/* =========================================================================
   Deniz Sirmasac — Personenmarke · gemeinsames Stylesheet
   Executive-Profil, Sog statt Vertrieb. Hell & modern: grosse Editorial-Typo,
   asymmetrische Kopfzeilen, weiche Tiefe, geschmeidige Bewegung.
   Selbst gehostete Schriften, keine Drittanbieter-Requests.
   Alle Bewegung haengt an html.anim (Progressive Enhancement) und
   respektiert prefers-reduced-motion.
   ========================================================================= */
@font-face{font-family:"Fraunces";src:url("fonts/fraunces-variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("fonts/fraunces-italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --paper:#F4F2EC;
  --paper-dim:#ECEAE2;
  --surface:#FBFAF6;        /* leicht erhoehte Kartenflaeche */
  --navy:#1B2A45;
  --navy-soft:#24344F;
  --ink:#191B1F;
  --slate:#565F6B;
  --slate-lt:#727A86;
  --rule:#D8D5CB;
  --rule-soft:#E4E1D8;
  --rule-dk:#33405A;
  --accent:#1B2A45;
  --gold:#B8975A;

  --pad:clamp(1.5rem,5vw,6rem);
  --gap:clamp(4.5rem,11vw,10rem);
  --radius:16px;
  --radius-sm:10px;

  --ease:cubic-bezier(.22,.61,.16,1);
  --ease-out:cubic-bezier(.16,.84,.44,1);

  --shadow-sm:0 1px 2px rgba(25,27,31,.04),0 6px 16px rgba(25,27,31,.05);
  --shadow-md:0 2px 6px rgba(25,27,31,.05),0 20px 44px rgba(27,42,69,.09);
  --shadow-navy:0 24px 60px rgba(27,42,69,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:clamp(1.02rem,.35vw + .95rem,1.16rem);
  line-height:1.65;font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
.wrap{max-width:1200px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
section{padding-top:var(--gap);padding-bottom:var(--gap)}
section[id]{scroll-margin-top:5.5rem}
.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;background:var(--navy);color:var(--paper);padding:.6rem 1rem;z-index:100;border-radius:3px}

/* ---- Typografie ---- */
h1,h2,h3,.serif{font-family:"Fraunces",Georgia,"Times New Roman",serif;font-weight:400}
h1{font-size:clamp(3.4rem,10.5vw,7.6rem);line-height:.9;letter-spacing:-.035em}
h2{font-size:clamp(2.05rem,4.4vw,3.7rem);line-height:1.02;letter-spacing:-.025em;font-weight:500}
h3{font-size:1.3rem;line-height:1.3;letter-spacing:-.01em;font-weight:500}
.eyebrow{font-family:"Inter",sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--slate-lt)}
.lede{font-size:clamp(1.16rem,1.5vw,1.42rem);line-height:1.5;color:var(--slate);max-width:42ch}

/* ---- Scroll-Fortschritt ---- */
.scroll-progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:60;
  background:var(--navy);transform:scaleX(var(--p,0));transform-origin:0 50%;
  opacity:0;transition:opacity .4s ease}
html.anim .scroll-progress{opacity:1}

/* ---- Header (fixiert, frostet beim Scrollen) ---- */
.top{position:fixed;top:0;left:0;right:0;z-index:40;
  border-bottom:1px solid transparent;
  transition:background .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)}
.top.scrolled{background:rgba(244,242,236,.82);backdrop-filter:saturate(1.3) blur(12px);
  -webkit-backdrop-filter:saturate(1.3) blur(12px);border-bottom-color:var(--rule);
  box-shadow:0 10px 30px rgba(25,27,31,.06)}
.top.static{position:static;background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none}
.nav{display:flex;align-items:center;justify-content:space-between;padding-top:1.5rem;padding-bottom:1.5rem;transition:padding .45s var(--ease)}
.top.scrolled .nav{padding-top:1.05rem;padding-bottom:1.05rem}
.top.static .nav{padding-top:1.8rem;padding-bottom:1.4rem;border-bottom:1px solid var(--rule)}
.brandmark{font-family:"Fraunces",serif;font-weight:500;font-size:1.18rem;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.nav-right{font-family:"Inter",sans-serif;font-size:.9rem;color:var(--slate)}
.nav-right a{position:relative;color:var(--slate);text-decoration:none;padding-bottom:3px}
.nav-right a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--navy);
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav-right a:hover{color:var(--ink)}
.nav-right a:hover::after{transform:scaleX(1);transform-origin:left}

/* ---- Hero ---- */
.hero{padding-top:clamp(8.5rem,17vw,13rem);padding-bottom:clamp(3rem,7vw,5.5rem);position:relative}
.hero-grid{display:grid;grid-template-columns:1.24fr .76fr;gap:clamp(2rem,5vw,4.5rem);align-items:end}
.hero-title{margin-left:-.04em}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero-title .line>span{display:inline-block}
.hero-title .accent{color:var(--navy);font-style:italic}
.hero-sub{margin-top:2.3rem;font-size:clamp(1.16rem,1.5vw,1.42rem);line-height:1.5;max-width:35ch;color:var(--slate)}
.hero-scroll{display:inline-flex;align-items:center;gap:.7rem;margin-top:2.9rem;font-size:.85rem;letter-spacing:.02em;color:var(--slate);text-decoration:none;cursor:pointer;transition:gap .3s var(--ease),color .3s var(--ease)}
.hero-scroll:hover{color:var(--ink);gap:1.1rem}
.hero-scroll .ln{width:38px;height:1px;background:var(--slate-lt);display:inline-block;transition:width .3s var(--ease),background .3s var(--ease)}
.hero-scroll:hover .ln{width:52px;background:var(--navy)}
.hero-scroll::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-1px) rotate(45deg);transition:border-color .3s var(--ease)}
html.anim .hero-scroll::after{animation:hs-nudge 1.7s var(--ease) infinite}
.hero-scroll:hover::after{border-color:var(--navy)}
@keyframes hs-nudge{0%,100%{transform:translateY(-1px) rotate(45deg)}50%{transform:translateY(3px) rotate(45deg)}}
.hero-photo{max-width:400px;margin-left:auto;overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow-md)}
.hero-photo img{width:100%;height:auto;display:block;filter:grayscale(1) contrast(1.05)}

/* ---- Asymmetrische Sektionskoepfe ---- */
.sec-head{display:grid;grid-template-columns:1fr;gap:1.1rem;margin-bottom:clamp(2.8rem,5vw,4.4rem)}
.sec-label{display:flex;align-items:baseline;gap:.9rem}
.sec-no{font-family:"Fraunces",serif;font-weight:500;font-style:italic;font-size:1rem;color:var(--gold);letter-spacing:0}
.sec-copy h2{max-width:22ch}
.sec-copy .lede{margin-top:1.3rem}
@media(min-width:880px){
  .sec-head{grid-template-columns:14rem 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
  .sec-label{flex-direction:column;gap:.7rem}
  .sec-no{font-size:1.15rem}
}

/* ---- Anlaesse ---- */
.anlass-list{border-top:1px solid var(--rule)}
.anlass{display:grid;grid-template-columns:3.6rem 1fr;gap:clamp(1rem,3vw,2.5rem);padding:1.9rem clamp(.4rem,1.5vw,1.2rem) 1.9rem 0;border-bottom:1px solid var(--rule);align-items:start;transition:background .4s var(--ease),padding-left .4s var(--ease)}
.anlass:hover{background:var(--surface);padding-left:1rem}
.anlass .tick{font-family:"Fraunces",serif;font-style:italic;font-weight:500;font-size:1.15rem;color:var(--navy);padding-top:.15rem}
.anlass p{max-width:60ch;font-size:1.14rem}
.anlass strong{font-weight:600}
.anlass span{color:var(--slate)}

/* ---- nicht / sondern (navy) ---- */
.dark{background:var(--navy);color:var(--paper);position:relative}
.dark .eyebrow{color:#9AA7C0}
.dark h2{color:var(--paper)}
.contrast{border-top:1px solid var(--rule-dk)}
.row{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--rule-dk)}
.cell{padding:1.9rem clamp(1rem,2.5vw,2.2rem) 1.9rem 0}
.cell.no{color:#98A2B6;border-right:1px solid var(--rule-dk);padding-right:clamp(1rem,2.5vw,2.2rem)}
.cell.yes{padding-left:clamp(1rem,2.5vw,2.2rem);color:var(--paper)}
.cell .tag{font-family:"Inter",sans-serif;font-size:.64rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;display:block;margin-bottom:.6rem}
.cell.no .tag{color:#6E7890}
.cell.yes .tag{color:var(--gold)}
.cell p{font-size:1.06rem;line-height:1.5}
/* ---- Kompetenz (Karten mit Tiefe) ---- */
.comp{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,2rem)}
.comp-block{background:var(--surface);border:1px solid var(--rule-soft);border-radius:var(--radius);
  padding:clamp(1.6rem,3vw,2.4rem);box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)}
.comp-block:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--rule)}
.comp-block h3{margin-bottom:.6rem;font-size:1.5rem}
.comp-block>p{color:var(--slate);margin-bottom:1.8rem;max-width:38ch}
.comp-roles{list-style:none;border-top:1px solid var(--rule)}
.comp-roles li{padding:1.05rem 0;border-bottom:1px solid var(--rule-soft);font-size:1.06rem}
.comp-roles li:last-child{border-bottom:0;padding-bottom:0}
.comp-roles li span{display:block;color:var(--slate);font-size:.95rem;margin-top:.2rem}
.comp-fields{margin-top:1.5rem;padding-top:1.2rem;border-top:1px solid var(--rule-soft);font-size:.92rem;line-height:1.55;color:var(--slate)}
.cf-label{display:block;font-family:"Inter",sans-serif;font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-lt);margin-bottom:.45rem}
.comp-note{margin-top:2.8rem;color:var(--slate);max-width:62ch;font-size:1.02rem}

/* ---- Track Record ---- */
.tr-note{font-size:1.08rem;color:var(--slate);max-width:58ch;margin-bottom:3rem}
.mandates{border-top:1px solid var(--rule)}
.mandate{display:grid;grid-template-columns:1fr auto;gap:1rem 2rem;padding:1.7rem clamp(.4rem,1.2vw,1rem);border-bottom:1px solid var(--rule);align-items:baseline;position:relative;
  transition:background .4s var(--ease)}
.mandate:hover{background:var(--surface)}
.m-co{display:flex;flex-direction:column;gap:.35rem}
.m-name{font-family:"Fraunces",serif;font-weight:500;font-size:1.35rem;letter-spacing:-.01em}
.m-seg{font-family:"Inter",sans-serif;font-size:.68rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-lt)}
.m-what{font-size:1rem;color:var(--slate);text-align:right;max-width:34ch}
.tr-more{font-family:"Inter",sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-lt);margin-top:3.6rem;margin-bottom:1.4rem}
.logos{display:flex;flex-wrap:wrap;gap:.6rem 2.4rem;font-family:"Fraunces",serif;font-weight:500;font-size:1.2rem;color:var(--slate)}
.logos span{white-space:nowrap;transition:color .35s var(--ease)}
.logos:hover span{color:var(--slate-lt)}
.logos span:hover{color:var(--ink)}
.tr-disc{margin-top:3rem;font-size:1.05rem;color:var(--slate-lt);font-style:italic;font-family:"Fraunces",serif}

/* ---- Werdegang ---- */
.cv{border-top:1px solid var(--rule)}
.cv-row{display:grid;grid-template-columns:11rem 1fr;gap:1.5rem;padding:1.5rem clamp(.4rem,1.2vw,1rem);border-bottom:1px solid var(--rule);align-items:baseline;transition:background .4s var(--ease)}
.cv-row:hover{background:var(--surface)}
.cv-when{font-family:"Inter",sans-serif;font-size:.9rem;font-weight:500;letter-spacing:.03em;color:var(--slate-lt);white-space:nowrap}
.cv-what{font-size:1.12rem;color:var(--slate)}
.cv-what strong{color:var(--ink);font-weight:600}
.cv-exit{background:linear-gradient(90deg,rgba(184,151,90,.08),transparent 70%)}
.cv-exit .cv-what{color:var(--ink)}
.cv-exit .cv-what em{font-style:italic;font-family:"Fraunces",serif;color:var(--navy)}

/* ---- Wer ich bin ---- */
.bio{background:var(--paper-dim)}
.bio-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.bio-photo{overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow-md)}
.bio-photo img{width:100%;height:auto;display:block;filter:grayscale(1) contrast(1.04)}
.bio-caption{font-family:"Inter",sans-serif;font-size:.75rem;color:var(--slate-lt);margin-top:.9rem;letter-spacing:.02em}
.bio-copy .kicker{font-family:"Fraunces",serif;font-weight:500;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.22;letter-spacing:-.02em;margin-bottom:1.7rem;max-width:24ch}
.bio-copy p{max-width:46ch;margin-bottom:1.2rem;color:var(--ink)}
.bio-copy p.mut{color:var(--slate)}

/* ---- Kontakt ---- */
.close{background:var(--navy);color:var(--paper)}
.close .eyebrow{color:#9AA7C0}
.close h2{color:var(--paper);max-width:20ch;font-size:clamp(2.3rem,5vw,4rem)}
.close p{color:#C3CCDA;max-width:44ch;margin-top:1.5rem}
.contact{display:flex;flex-wrap:wrap;gap:1.4rem 2.6rem;margin-top:3rem;font-family:"Inter",sans-serif;font-size:1.05rem}
.contact a{position:relative;color:var(--paper);text-decoration:none;padding-bottom:4px}
.contact a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.contact a:hover::after{transform:scaleX(1);transform-origin:left}
.contact a::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule-dk)}

/* ---- Footer ---- */
footer{border-top:1px solid var(--rule);padding-top:2.8rem;padding-bottom:3.2rem;font-family:"Inter",sans-serif;font-size:.82rem;color:var(--slate)}
.foot-grid{display:flex;flex-wrap:wrap;gap:2.6rem;justify-content:space-between}
footer a{color:var(--slate);text-decoration:none;transition:color .3s var(--ease)}
footer a:hover{color:var(--ink)}
footer p{line-height:1.6}
footer strong{color:var(--ink);font-weight:600}

/* ---- Rechtstexte (Impressum / Datenschutz) ---- */
main.legal{padding-top:clamp(6rem,10vw,8rem);padding-bottom:clamp(4rem,9vw,7rem)}
.legal h1{font-size:clamp(2.4rem,5.5vw,3.6rem);line-height:1;letter-spacing:-.025em;margin-bottom:1.6rem}
.prose{max-width:70ch}
.prose h2{font-family:"Fraunces",serif;font-weight:500;font-size:clamp(1.35rem,2.4vw,1.75rem);letter-spacing:-.01em;margin-top:2.7rem;margin-bottom:.7rem}
.prose p,.prose li{color:#2A2D33;margin-bottom:.85rem;max-width:68ch}
.prose ul{list-style:none;margin:.6rem 0 1.2rem}
.prose li{position:relative;padding-left:1.3rem}
.prose li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1px;background:var(--navy)}
.prose address{font-style:normal;color:var(--ink)}
.prose a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--navy)}
.prose a:hover{color:var(--navy)}
.ph{color:var(--navy);background:rgba(27,42,69,.08);padding:.05rem .4rem;border-radius:3px;font-weight:500}
.pagenav{border-top:1px solid var(--rule);margin-top:2.6rem;padding-top:1.8rem;font-family:"Inter",sans-serif;font-size:.9rem}
.pagenav a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--navy);padding-bottom:2px}

/* ---- Fokus (A11y) ---- */
a:focus-visible,button:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:2px}
.dark a:focus-visible,.close a:focus-visible{outline-color:var(--gold)}

/* ---- Cookie-/Datenschutz-Hinweis ---- */
.cookie{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:70;max-width:520px;margin:0 auto;
  background:var(--ink);color:var(--paper);border-radius:var(--radius-sm);padding:1rem 1.2rem;
  box-shadow:0 14px 40px rgba(25,27,31,.28);display:flex;align-items:center;gap:1rem 1.4rem;flex-wrap:wrap;
  transform:translateY(0)}
.cookie[hidden]{display:none}
.cookie p{font-family:"Inter",sans-serif;font-size:.86rem;line-height:1.45;color:#E7E5DE;margin:0;flex:1 1 260px}
.cookie a{color:#fff;text-decoration:underline}
.cookie-ok{font-family:"Inter",sans-serif;font-weight:600;font-size:.85rem;color:var(--ink);background:var(--paper);
  border:0;border-radius:6px;padding:.6rem 1.1rem;cursor:pointer;white-space:nowrap;transition:background .3s var(--ease),transform .2s var(--ease)}
.cookie-ok:hover{background:#fff;transform:translateY(-1px)}

/* =========================================================================
   Bewegung — nur wenn html.anim gesetzt ist (JS an + Motion erlaubt).
   Ohne JS oder bei reduced-motion bleibt alles sofort sichtbar.
   ========================================================================= */
/* Scroll-Reveals: Einzelblock */
html.anim .rv{opacity:0;transform:translateY(24px);
  transition:opacity .85s var(--ease),transform .85s var(--ease)}
html.anim .rv.in{opacity:1;transform:none}

/* Scroll-Reveals: gestaffelte Gruppe (Kinder kaskadieren) */
html.anim .rv-group>*{opacity:0;transform:translateY(22px);
  transition:opacity .75s var(--ease),transform .75s var(--ease);
  transition-delay:calc(var(--i,0)*70ms)}
html.anim .rv-group.in>*{opacity:1;transform:none}

/* Bild-Reveal: leichter Zoom beim Erscheinen */
html.anim .bio-photo img{transform:scale(1.12);transition:transform 1.5s var(--ease)}
html.anim .bio-photo.in img{transform:scale(1)}

/* Hero-Ladesequenz */
html.anim .hero-title .line>span{transform:translateY(115%)}
html.anim .hero-sub,html.anim .hero-scroll{opacity:0;transform:translateY(18px)}
html.anim .hero-photo{opacity:0}
html.anim .hero-photo img{transform:scale(1.14)}
html.anim .hero.ready .hero-title .line>span{transform:translateY(0);transition:transform 1s var(--ease)}
html.anim .hero.ready .hero-title .line:nth-child(2)>span{transition-delay:.12s}
html.anim .hero.ready .hero-sub{opacity:1;transform:none;transition:opacity .9s var(--ease) .4s,transform .9s var(--ease) .4s}
html.anim .hero.ready .hero-scroll{opacity:1;transform:none;transition:opacity .9s var(--ease) .55s,transform .9s var(--ease) .55s}
html.anim .hero.ready .hero-photo{opacity:1;transition:opacity 1s var(--ease) .2s}
html.anim .hero.ready .hero-photo img{transform:scale(1);transition:transform 1.6s var(--ease) .2s}

/* ---- Responsive ---- */
@media(max-width:880px){
  .hero-grid{grid-template-columns:1fr}
  .hero-photo{order:2;max-width:300px;margin-left:0}   /* Headline zuerst, Portraet darunter */
  .comp,.bio-grid{grid-template-columns:1fr}
  .bio-photo{max-width:380px}
  .row{grid-template-columns:1fr}
  .cell.no{border-right:0;border-bottom:1px solid var(--rule-dk);padding-right:0;padding-bottom:1.3rem}
  .cell.yes{padding-left:0;padding-top:1.3rem}
  .mandate{grid-template-columns:1fr;gap:.5rem}
  .m-what{text-align:left}
  .cv-row{grid-template-columns:1fr;gap:.25rem;padding:1.2rem clamp(.4rem,1.2vw,1rem)}
  .anlass:hover,.mandate:hover,.cv-row:hover{background:transparent}  /* kein Hover-Wash auf Touch-Reihen */
  .anlass:hover{padding-left:0}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.anim .rv,html.anim .rv-group>*,html.anim .hero-title .line>span,
  html.anim .hero-sub,html.anim .hero-scroll,html.anim .hero-photo,html.anim .hero-photo img,
  html.anim .bio-photo img{opacity:1;transform:none;transition:none}
  html.anim .hero-scroll::after{animation:none}
  *{scroll-behavior:auto}
  .scroll-progress{display:none}
}