/* =========================================================
   Ümit Kocyigit — Persönliches Profil
   Design: dunkles Editorial-Layout, Gold-Akzent
   ========================================================= */

:root{
  --ink:        #080B10;
  --ink-2:      #0B0F16;
  --surface:    #10151E;
  --surface-2:  #151B26;
  --line:       rgba(255,255,255,.085);
  --line-2:     rgba(255,255,255,.16);

  --text:       #EEF1F6;
  --muted:      #98A2B3;
  --muted-2:    #6E7889;

  --gold:       #C9A46B;
  --gold-lt:    #E3C795;
  --gold-dim:   rgba(201,164,107,.14);
  --wa:         #25D366;

  --serif: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1240px;
  --pad: clamp(20px, 5vw, 64px);
  --r: 16px;
  --r-lg: 22px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
html.is-locked{ overflow:hidden; }
html.no-scroll{ overflow:hidden; }

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
::selection{ background:var(--gold); color:#0A0D12; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

.skip{
  position:fixed; top:-100px; left:16px; z-index:2000;
  background:var(--gold); color:#0A0D12; padding:10px 18px; border-radius:8px; font-weight:600;
}
.skip:focus{ top:16px; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }

/* ============ GATE ============ */
.gate{
  position:fixed; inset:0; z-index:1000;
  display:grid; place-items:center;
  padding:24px;
  background:var(--ink);
  transition:opacity .7s var(--ease), visibility .7s;
}
.gate.is-open{ opacity:0; visibility:hidden; pointer-events:none; }

.gate__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(201,164,107,.13), transparent 70%),
    radial-gradient(40% 40% at 80% 100%, rgba(80,120,200,.09), transparent 70%);
}
.gate__bg::after{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 50% 45%, #000 0%, transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 50% 45%, #000 0%, transparent 72%);
  opacity:.5;
}

.gate__card{
  position:relative; z-index:2;
  width:min(440px,100%);
  text-align:center;
  animation:gateIn 1s var(--ease-out) both;
}
@keyframes gateIn{ from{ opacity:0; transform:translateY(22px) } to{ opacity:1; transform:none } }

.gate__mono{
  width:66px; height:66px; margin:0 auto 26px;
  display:grid; place-items:center;
  border:1px solid var(--line-2); border-radius:50%;
  font-family:var(--serif); font-size:26px; color:var(--gold);
  letter-spacing:.02em;
  box-shadow:0 0 0 8px rgba(201,164,107,.04);
}
.gate__title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(34px,7vw,46px); line-height:1.05; margin:0 0 10px;
  letter-spacing:-.01em;
}
.gate__sub{ margin:0 0 30px; color:var(--muted); font-size:14px; letter-spacing:.04em; text-transform:uppercase; }

.gate__field{
  display:flex; align-items:center; gap:8px;
  background:var(--surface); border:1px solid var(--line-2);
  border-radius:100px; padding:6px 6px 6px 22px;
  transition:border-color .3s, box-shadow .3s, transform .3s;
}
.gate__field:focus-within{ border-color:var(--gold); box-shadow:0 0 0 4px var(--gold-dim); }
.gate__field input{
  flex:1; background:none; border:0; outline:none; color:var(--text);
  font-size:16px; padding:12px 0; letter-spacing:.08em;
}
.gate__field input::placeholder{ color:var(--muted-2); letter-spacing:.02em; }
.gate__btn{
  flex:none; width:46px; height:46px; border:0; border-radius:50%;
  background:var(--gold); color:#0A0D12; cursor:pointer;
  display:grid; place-items:center; transition:transform .3s var(--ease), background .3s;
}
.gate__btn:hover{ transform:translateX(2px); background:var(--gold-lt); }

.gate.is-error .gate__field{ border-color:#E5534B; animation:shake .45s; }
@keyframes shake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-9px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(3px)} }
.gate__error{ color:#F08C86; font-size:13.5px; margin:14px 0 0; }
.gate__hint{ color:var(--muted-2); font-size:13px; margin:26px 0 0; line-height:1.6; }
.gate__hint a{ color:var(--muted); border-bottom:1px solid var(--line-2); }
.gate__hint a:hover{ color:var(--gold); border-color:var(--gold); }

/* ============ SITE SHELL ============ */
.site{ opacity:0; transition:opacity .8s var(--ease); }
.site.is-visible{ opacity:1; }

.scroll-progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:900; background:transparent; }
.scroll-progress span{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold),var(--gold-lt)); }

.grain{
  position:fixed; inset:-200%; z-index:800; pointer-events:none; opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 16%{transform:translate(-5%,-5%)} 33%{transform:translate(3%,-8%)}
  50%{transform:translate(-6%,4%)} 66%{transform:translate(5%,6%)} 83%{transform:translate(-3%,3%)}
}

.cursor-glow{
  position:fixed; top:0; left:0; width:520px; height:520px; z-index:1; pointer-events:none;
  transform:translate(-50%,-50%); opacity:0; transition:opacity .5s;
  background:radial-gradient(circle, rgba(201,164,107,.07) 0%, transparent 62%);
}

/* ============ NAV ============ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:700;
  transition:background .45s var(--ease), backdrop-filter .45s, border-color .45s, padding .45s;
  border-bottom:1px solid transparent;
  padding:6px 0;
}
.nav.is-stuck{
  background:rgba(8,11,16,.82);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom-color:var(--line);
}
.nav__inner{
  max-width:var(--wrap); margin-inline:auto; padding:14px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav__brand{ display:flex; align-items:center; gap:12px; }
.nav__mono{
  width:38px; height:38px; flex:none; display:grid; place-items:center;
  border:1px solid var(--line-2); border-radius:50%;
  font-family:var(--serif); font-size:15px; color:var(--gold);
  transition:border-color .3s, color .3s;
}
.nav__brand:hover .nav__mono{ border-color:var(--gold); }
.nav__name{ font-size:14.5px; font-weight:500; letter-spacing:.01em; }

.nav__links{ display:flex; gap:4px; }
.nav__links a{
  position:relative; padding:8px 14px; font-size:14px; color:var(--muted);
  border-radius:100px; transition:color .3s, background .3s;
}
.nav__links a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease);
}
.nav__links a:hover{ color:var(--text); }
.nav__links a:hover::after,
.nav__links a.is-active::after{ transform:scaleX(1); }
.nav__links a.is-active{ color:var(--text); }

.nav__actions{ display:flex; align-items:center; gap:12px; }

.nav__burger{
  display:none; width:42px; height:42px; border:1px solid var(--line-2); border-radius:50%;
  background:none; cursor:pointer; position:relative;
}
.nav__burger span{
  position:absolute; left:12px; width:18px; height:1.5px; background:var(--text);
  transition:transform .35s var(--ease), opacity .3s;
}
.nav__burger span:first-child{ top:18px; }
.nav__burger span:last-child{ top:23px; }
.nav__burger[aria-expanded="true"] span:first-child{ transform:translateY(2.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child{ transform:translateY(-2.5px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:690;
  background:var(--ink-2);
  display:flex; flex-direction:column; justify-content:center; gap:40px;
  padding:100px var(--pad) 60px;
  opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility .45s;
}
.mobile-menu.is-open{ opacity:1; visibility:visible; }
.mobile-menu nav{ display:flex; flex-direction:column; gap:2px; }
.mobile-menu nav a{
  font-family:var(--serif); font-size:clamp(30px,9vw,44px); line-height:1.35;
  opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease-out), transform .5s var(--ease-out), color .3s;
}
.mobile-menu.is-open nav a{ opacity:1; transform:none; }
.mobile-menu nav a:nth-child(1){ transition-delay:.06s }
.mobile-menu nav a:nth-child(2){ transition-delay:.11s }
.mobile-menu nav a:nth-child(3){ transition-delay:.16s }
.mobile-menu nav a:nth-child(4){ transition-delay:.21s }
.mobile-menu nav a:nth-child(5){ transition-delay:.26s }
.mobile-menu nav a:nth-child(6){ transition-delay:.31s; color:var(--gold) }
.mobile-menu__foot{ display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:14px; }

/* ============ BUTTONS ============ */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 30px; border-radius:100px; border:1px solid transparent;
  font-size:14.5px; font-weight:500; letter-spacing:.01em; cursor:pointer;
  transition:transform .4s var(--ease), background .35s, color .35s, border-color .35s, box-shadow .35s;
  will-change:transform;
}
.btn--sm{ padding:10px 20px; font-size:13.5px; }
.btn--full{ width:100%; }
.btn--gold{ background:var(--gold); color:#0A0D12; }
.btn--gold:hover{ background:var(--gold-lt); box-shadow:0 10px 34px -12px rgba(201,164,107,.6); }
.btn--ghost{ border-color:var(--line-2); color:var(--text); background:rgba(255,255,255,.02); }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold); }
.btn[disabled]{ opacity:.55; pointer-events:none; }

/* ============ HERO ============ */
.hero{
  position:relative; min-height:100svh;
  display:grid; align-items:center;
  padding:118px 0 80px;
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0 0 0 30%; z-index:0; }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:68% 28%;
  transform:scale(1.06); will-change:transform;
  animation:heroZoom 2.4s var(--ease-out) both;
}
@keyframes heroZoom{ from{ transform:scale(1.16); opacity:0 } to{ transform:scale(1.06); opacity:1 } }
.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, var(--ink) 0%, var(--ink) 22%, rgba(8,11,16,.95) 38%, rgba(8,11,16,.7) 55%, rgba(8,11,16,.3) 76%, rgba(8,11,16,.5) 100%),
    linear-gradient(180deg, rgba(8,11,16,.75) 0%, rgba(8,11,16,.05) 32%, rgba(8,11,16,.9) 100%);
}
.hero__content{ position:relative; z-index:2; width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

.hero__eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  margin:0 0 22px; padding:8px 18px 8px 14px;
  border:1px solid var(--line-2); border-radius:100px;
  font-size:12.5px; letter-spacing:.13em; text-transform:uppercase; color:#B6BFCD;
  background:rgba(8,11,16,.55); backdrop-filter:blur(8px);
}
.dot{ width:7px; height:7px; border-radius:50%; background:var(--wa); box-shadow:0 0 0 0 rgba(37,211,102,.5); animation:pulse 2.4s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 9px rgba(37,211,102,0) } 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0) } }

.hero__title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(40px, 5.6vw, 68px);
  line-height:1.06; letter-spacing:-.018em;
  margin:0 0 26px; max-width:none;
  text-shadow:0 2px 30px rgba(8,11,16,.65);
}
@media (min-width:861px){ .hero__title .line{ white-space:nowrap; } }

/* Flache Viewports (13" Laptops): Hero kompakter, damit die Buttons sichtbar bleiben */
@media (min-width:861px) and (max-height:840px){
  .hero{ padding:100px 0 62px; }
  .hero__eyebrow{ margin-bottom:16px; }
  .hero__title{ font-size:clamp(34px,4.3vw,54px); margin-bottom:20px; }
  .hero__lead{ font-size:15px; margin-bottom:22px; }
  .hero__scroll{ bottom:18px; }
}
.hero__title em{ font-style:italic; color:var(--gold); }
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line > span{
  display:block; transform:translateY(105%);
  animation:lineUp 1.05s var(--ease-out) both;
}
.hero__title .line:nth-child(1) > span{ animation-delay:.15s }
.hero__title .line:nth-child(2) > span{ animation-delay:.24s }
.hero__title .line:nth-child(3) > span{ animation-delay:.33s }
.hero__title .line:nth-child(4) > span{ animation-delay:.42s }
.hero__title .line:nth-child(5) > span{ animation-delay:.51s }
@keyframes lineUp{ to{ transform:none } }

.hero__lead{ max-width:46ch; color:#AEB7C4; font-size:clamp(14.5px,1.4vw,16px); margin:0 0 30px; text-shadow:0 1px 16px rgba(8,11,16,.8); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; }

.hero__eyebrow, .hero__lead, .hero__cta{ animation:heroFade .9s var(--ease-out) both; }
.hero__eyebrow{ animation-delay:.10s; }
.hero__lead{ animation-delay:.62s; }
.hero__cta{ animation-delay:.74s; }
@keyframes heroFade{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }

.hero__scroll{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted-2);
}
.hero__scroll span{ width:1px; height:44px; background:linear-gradient(var(--gold), transparent); animation:scrollLine 2.2s var(--ease) infinite; }
@keyframes scrollLine{ 0%{ transform:scaleY(0); transform-origin:top } 45%{ transform:scaleY(1); transform-origin:top } 55%{ transform:scaleY(1); transform-origin:bottom } 100%{ transform:scaleY(0); transform-origin:bottom } }

/* ============ STATS ============ */
.stats{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--ink-2); }
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat{ padding:46px 26px; text-align:center; border-right:1px solid var(--line); }
.stat:last-child{ border-right:0; }
.stat__num{
  display:block; font-family:var(--serif); font-size:clamp(34px,4.6vw,54px);
  line-height:1; color:var(--gold); letter-spacing:-.01em; margin-bottom:10px;
}
.stat__label{ display:block; font-size:12.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted-2); }

/* ============ SECTION BASICS ============ */
.section{ position:relative; padding:clamp(80px,11vw,150px) 0; }
.section--alt{ background:var(--ink-2); border-block:1px solid var(--line); }

.sec-head{ margin-bottom:clamp(44px,6vw,72px); max-width:62ch; }
.sec-num{
  display:inline-block; font-size:12px; letter-spacing:.24em; color:var(--gold);
  margin-bottom:16px; position:relative; padding-left:44px;
}
.sec-num::before{ content:""; position:absolute; left:0; top:50%; width:32px; height:1px; background:var(--gold); opacity:.5; }
.sec-title{
  font-family:var(--serif); font-weight:400; font-size:clamp(32px,5vw,58px);
  line-height:1.06; letter-spacing:-.015em; margin:0;
}
.sec-sub{ color:var(--muted); margin:18px 0 0; font-size:16px; max-width:56ch; }

/* Spotlight-Hover für Karten */
[data-spotlight]{ position:relative; overflow:hidden; }
[data-spotlight]::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(201,164,107,.09), transparent 62%);
  transition:opacity .45s;
}
[data-spotlight]:hover::before{ opacity:1; }

/* ============ PROFIL ============ */
.profil{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(32px,5vw,74px); align-items:start; }
.profil__media{ position:sticky; top:110px; }
.frame{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line-2);
  transform-style:preserve-3d; transition:transform .5s var(--ease);
}
.frame img{ width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center 18%; }
.frame::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 45%, rgba(8,11,16,.7) 100%);
}
.profil__badge{
  margin-top:-42px; margin-left:22px; position:relative; z-index:2;
  display:inline-flex; flex-direction:column;
  background:rgba(16,21,30,.9); backdrop-filter:blur(12px);
  border:1px solid var(--line-2); border-radius:14px; padding:14px 20px;
}
.profil__badge strong{ font-size:15px; color:var(--gold); font-weight:600; }
.profil__badge span{ font-size:12.5px; color:var(--muted); }

.profil__text p{ color:var(--muted); margin:0 0 20px; }
.profil__text .lead{ font-size:clamp(17px,2vw,20px); line-height:1.6; color:var(--text); }
.profil__text strong{ color:var(--text); font-weight:600; }

.principles{ display:grid; gap:14px; margin:44px 0; }
.principle{
  display:grid; grid-template-columns:34px 1fr; column-gap:18px; row-gap:6px; align-items:start;
  padding:24px 26px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); transition:border-color .4s, transform .4s var(--ease);
}
.principle:hover{ border-color:var(--line-2); transform:translateY(-2px); }
.principle__idx{
  grid-row:1 / span 2; grid-column:1;
  font-family:var(--serif); font-size:21px; color:var(--gold); opacity:.8;
  line-height:1.25; letter-spacing:.04em;
}
.principle h3{ grid-column:2; }
.principle p{ grid-column:2; }
.principle h3{ margin:0; font-size:16.5px; font-weight:600; }
.principle p{ margin:0; font-size:14.5px; color:var(--muted); line-height:1.6; }

.values{ border-top:1px solid var(--line); padding-top:32px; }
.values__title{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin:0 0 16px; font-weight:500; }
.values p{ margin:0; font-size:15px; }

/* ============ TIMELINE ============ */
.timeline{ position:relative; padding-left:clamp(28px,5vw,58px); }
.timeline__rail{
  position:absolute; left:6px; top:8px; bottom:8px; width:1px;
  background:var(--line-2);
}
.timeline__rail span{
  position:absolute; top:0; left:0; width:100%; height:0;
  background:linear-gradient(180deg,var(--gold),rgba(201,164,107,.15));
}
.tl-item{ position:relative; padding-bottom:clamp(22px,3vw,34px); }
.tl-dot{
  position:absolute; left:calc(-1 * clamp(28px,5vw,58px) + 1px); top:30px;
  width:11px; height:11px; border-radius:50%;
  background:var(--ink-2); border:1.5px solid var(--line-2);
  transition:border-color .4s, box-shadow .4s, background .4s;
}
.tl-item--current .tl-dot{ background:var(--gold); border-color:var(--gold); box-shadow:0 0 0 5px var(--gold-dim); }
.tl-item.is-inview .tl-dot{ border-color:var(--gold); }

.tl-body{
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  padding:clamp(22px,3vw,32px);
  transition:border-color .45s, transform .45s var(--ease), background .45s;
}
.tl-body:hover{ border-color:var(--line-2); transform:translateY(-2px); }
.tl-item--current .tl-body{
  border-color:rgba(201,164,107,.32);
  background:linear-gradient(180deg, rgba(201,164,107,.05), var(--surface) 55%);
}
.tl-item--quiet .tl-body{ background:transparent; border-style:dashed; }

.tl-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:12px; }
.tl-date{ font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); font-variant-numeric:tabular-nums; }
.tag{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 11px; border-radius:100px; border:1px solid var(--line-2); color:var(--muted);
}
.tag--live{ border-color:rgba(201,164,107,.4); color:var(--gold); background:var(--gold-dim); }

.tl-role{ font-family:var(--serif); font-weight:400; font-size:clamp(23px,2.9vw,32px); line-height:1.15; margin:0 0 6px; letter-spacing:-.01em; }
.tl-role--sm{ font-size:clamp(19px,2.2vw,24px); color:var(--muted); }
.tl-org{ margin:0 0 18px; font-size:14.5px; color:var(--gold); }
.tl-plain{ margin:0; color:var(--muted); font-size:14.5px; }

.tl-list{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.tl-list li{ position:relative; padding-left:22px; font-size:14.8px; color:var(--muted); line-height:1.6; }
.tl-list li::before{
  content:""; position:absolute; left:2px; top:10px; width:7px; height:1px; background:var(--gold); opacity:.65;
}
.tl-list strong{ color:var(--text); font-weight:600; }

.tl-wins{ margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
.tl-wins__label{ display:block; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:12px; }
.tl-wins ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.tl-wins li{ position:relative; padding-left:22px; font-size:14.3px; color:var(--muted); }
.tl-wins li::before{ content:"✦"; position:absolute; left:0; top:-1px; color:var(--gold); font-size:11px; opacity:.8; }
.tl-wins strong{ color:var(--text); }

.tl-highlight{
  display:flex; gap:14px; align-items:flex-start;
  margin-top:22px; padding:16px 18px; border-radius:12px;
  background:var(--gold-dim); border:1px solid rgba(201,164,107,.24);
}
.tl-highlight__ico{ color:var(--gold); flex:none; margin-top:1px; }
.tl-highlight p{ margin:0; font-size:14.5px; color:var(--text); line-height:1.55; }
.tl-highlight strong{ color:var(--gold-lt); }

.honorary{
  display:flex; gap:20px; align-items:flex-start;
  margin-top:26px; padding:26px 30px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
}
.honorary__icon{ color:var(--gold); flex:none; }
.honorary h3{ margin:0 0 8px; font-size:16.5px; font-weight:600; }
.honorary__since{ font-size:12px; color:var(--muted-2); font-weight:400; letter-spacing:.06em; }
.honorary p{ margin:0; font-size:14.5px; color:var(--muted); }

/* ============ SKILLS ============ */
.skills{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.skill{
  padding:clamp(26px,3vw,36px);
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  transition:border-color .4s, transform .4s var(--ease);
}
.skill:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.skill h3{
  font-size:17px; font-weight:600; margin:0 0 20px; padding-bottom:16px;
  border-bottom:1px solid var(--line); position:relative;
}
.skill h3::after{ content:""; position:absolute; left:0; bottom:-1px; width:38px; height:1px; background:var(--gold); }
.skill ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.skill li{ position:relative; padding-left:20px; font-size:14.6px; color:var(--muted); }
.skill li::before{ content:""; position:absolute; left:0; top:9px; width:5px; height:5px; border-radius:50%; border:1px solid var(--gold); opacity:.7; }

.chips-block{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px; margin-top:44px; padding-top:38px; border-top:1px solid var(--line); }
.chips-col h4{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin:0 0 16px; font-weight:500; }
.chips-col__new{
  display:inline-block; margin-left:8px; padding:2px 8px; border-radius:100px;
  background:var(--gold); color:#0A0D12; font-size:9.5px; letter-spacing:.08em; vertical-align:middle;
}
.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{
  display:inline-flex; align-items:baseline; gap:7px;
  padding:9px 16px; border:1px solid var(--line-2); border-radius:100px;
  font-size:13.5px; color:var(--text); background:rgba(255,255,255,.02);
  transition:border-color .3s, color .3s;
}
.chip:hover{ border-color:var(--gold); }
.chip em{ font-style:normal; font-size:11.5px; color:var(--muted-2); }

/* ============ QUALS ============ */
.quals{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.qual{
  padding:clamp(26px,3vw,36px); border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); transition:border-color .4s, transform .4s var(--ease);
}
.qual:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.qual--new{ border-color:rgba(201,164,107,.3); background:linear-gradient(180deg, rgba(201,164,107,.05), var(--surface) 60%); }
.qual__date{ display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); margin-bottom:14px; }
.qual__flag{
  display:inline-block; margin-left:8px; padding:2px 9px; border-radius:100px;
  background:var(--gold); color:#0A0D12; font-size:9.5px; letter-spacing:.1em;
}
.qual h3{ font-family:var(--serif); font-weight:400; font-size:clamp(21px,2.4vw,26px); line-height:1.2; margin:0 0 8px; }
.qual__org{ font-size:14px; color:var(--gold); margin:0 0 18px; line-height:1.5; }
.qual p{ font-size:14.6px; color:var(--muted); margin:0; line-height:1.65; }
.qual__files{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.qual__files a{
  font-size:13px; padding:8px 15px; border:1px solid var(--line-2); border-radius:100px; color:var(--text);
  transition:border-color .3s, color .3s, background .3s;
}
.qual__files a:hover{ border-color:var(--gold); color:var(--gold); background:var(--gold-dim); }

.courses{ margin-top:38px; padding:clamp(26px,3vw,36px); border:1px solid var(--line); border-radius:var(--r); background:var(--surface); }
.courses__title{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin:0 0 20px; font-weight:500; }
.courses__list{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.courses__list li{
  display:grid; grid-template-columns:76px 1fr; gap:18px; align-items:baseline;
  padding:13px 0; border-top:1px solid var(--line); font-size:14.8px; color:var(--muted);
}
.courses__list li:first-child{ border-top:0; }
.courses__list span{ color:var(--gold); font-size:13px; font-variant-numeric:tabular-nums; }

/* ============ DOCS ============ */
.docs{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.doc{
  display:flex; flex-direction:column;
  padding:28px 26px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  transition:border-color .4s, transform .4s var(--ease);
}
.doc:hover{ border-color:var(--line-2); transform:translateY(-4px); }
.doc--primary{ background:linear-gradient(165deg, rgba(201,164,107,.12), var(--surface) 58%); border-color:rgba(201,164,107,.3); }
.doc--primary:hover{ border-color:var(--gold); }
.doc__kind{ font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.doc h3{ font-family:var(--serif); font-weight:400; font-size:24px; margin:0 0 12px; line-height:1.15; }
.doc p{ font-size:14px; color:var(--muted); margin:0 0 20px; }
.doc__list{ list-style:none; margin:0 0 20px; padding:0; display:grid; gap:8px; }
.doc__list li{ font-size:13.8px; color:var(--muted); position:relative; padding-left:16px; }
.doc__list li::before{ content:""; position:absolute; left:0; top:9px; width:5px; height:1px; background:var(--gold); opacity:.6; }
.doc__list a{ border-bottom:1px solid var(--line-2); transition:color .3s, border-color .3s; }
.doc__list a:hover{ color:var(--gold); border-color:var(--gold); }
.doc__list em{ font-style:normal; font-size:10px; letter-spacing:.1em; color:var(--gold); margin-left:5px; }
.doc__cta{
  margin-top:auto; display:inline-flex; align-items:center; gap:8px;
  font-size:13.5px; color:var(--gold); transition:gap .3s;
}
.doc:hover .doc__cta{ gap:13px; }
.doc__cta--muted{ color:var(--muted-2); }
.doc__cta--muted a{ color:var(--gold); border-bottom:1px solid rgba(201,164,107,.4); }

/* ============ QUOTE ============ */
.quote-band{ padding:clamp(70px,9vw,120px) 0; background:var(--ink-2); border-block:1px solid var(--line); text-align:center; }
.quote-band blockquote{ margin:0; max-width:22ch; margin-inline:auto; }
.quote-band p{
  font-family:var(--serif); font-size:clamp(26px,4.2vw,46px); line-height:1.22;
  margin:0 0 22px; letter-spacing:-.01em;
}
.quote-band cite{ font-style:normal; font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }

/* ============ KONTAKT ============ */
.section--contact{ background:
  radial-gradient(70% 55% at 50% 0%, rgba(201,164,107,.06), transparent 65%), var(--ink); }
.contact{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(26px,4vw,56px); align-items:start; }
.contact__side{ display:grid; gap:12px; }

.ccard{
  display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center;
  padding:20px 24px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  transition:border-color .4s, transform .4s var(--ease), background .4s;
}
.ccard:hover{ border-color:var(--line-2); transform:translateX(3px); }
.ccard--static{ cursor:default; }
.ccard--static:hover{ transform:none; }
.ccard__ico{
  width:44px; height:44px; flex:none; display:grid; place-items:center;
  border:1px solid var(--line-2); border-radius:12px; color:var(--gold);
  transition:border-color .35s, background .35s, color .35s;
}
.ccard:hover .ccard__ico{ border-color:var(--gold); background:var(--gold-dim); }
.ccard__ico--wa{ color:var(--wa); border-color:rgba(37,211,102,.3); }
.ccard:hover .ccard__ico--wa{ border-color:var(--wa); background:rgba(37,211,102,.12); color:var(--wa); }
.ccard__txt{ display:grid; gap:3px; min-width:0; }
.ccard__txt strong{ font-size:15px; font-weight:600; overflow-wrap:anywhere; }
.ccard__txt span{ font-size:13px; color:var(--muted-2); }
.ccard__arrow{ color:var(--muted-2); transition:transform .35s var(--ease), color .35s; }
.ccard:hover .ccard__arrow{ transform:translateX(4px); color:var(--gold); }

.social{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.social__link{
  padding:11px 20px; border:1px solid var(--line-2); border-radius:100px; background:none;
  font-size:13.5px; color:var(--muted); cursor:pointer;
  transition:border-color .3s, color .3s;
}
.social__link:hover{ border-color:var(--gold); color:var(--gold); }

/* Formular */
.contact__form{
  padding:clamp(26px,3.4vw,40px);
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface);
}
.f-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field{ position:relative; margin-bottom:14px; }
.field input, .field textarea, .field select{
  width:100%; padding:22px 18px 10px; border-radius:12px;
  background:var(--ink-2); border:1px solid var(--line-2); color:var(--text);
  font-family:inherit; font-size:15px; outline:none;
  transition:border-color .3s, box-shadow .3s, background .3s;
  appearance:none;
}
.field textarea{ resize:vertical; min-height:130px; line-height:1.6; }
.field select{
  padding:20px 18px 10px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2398A2B3' stroke-width='1.6'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 18px center;
}
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-dim); }
.field label{
  position:absolute; left:19px; top:16px; font-size:15px; color:var(--muted-2);
  pointer-events:none; transition:transform .25s var(--ease), font-size .25s var(--ease), color .25s;
  transform-origin:left top;
}
.field input:focus + label, .field textarea:focus + label,
.field input:not(:placeholder-shown) + label, .field textarea:not(:placeholder-shown) + label,
.field .label--static{ transform:translateY(-9px); font-size:11.5px; letter-spacing:.06em; color:var(--gold); }
.field.is-invalid input, .field.is-invalid textarea{ border-color:#E5534B; }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.check{ display:flex; gap:12px; align-items:flex-start; margin:8px 0 22px; font-size:13.2px; color:var(--muted); line-height:1.55; cursor:pointer; }
.check input{ margin-top:2px; width:17px; height:17px; accent-color:var(--gold); flex:none; cursor:pointer; }
.check a{ color:var(--gold); border-bottom:1px solid rgba(201,164,107,.4); }

.f-status{ margin:16px 0 0; font-size:13.8px; min-height:20px; text-align:center; }
.f-status.is-ok{ color:var(--wa); }
.f-status.is-err{ color:#F08C86; }

/* ============ FOOTER ============ */
.footer{ border-top:1px solid var(--line); background:var(--ink-2); padding:52px 0 40px; }
.footer__inner{ display:flex; flex-wrap:wrap; gap:30px; justify-content:space-between; align-items:flex-start; }
.footer__brand{ display:flex; align-items:center; gap:14px; max-width:34ch; }
.footer__brand p{ margin:0; font-size:13.5px; color:var(--muted-2); }
.footer__nav{ display:flex; flex-wrap:wrap; gap:20px; }
.footer__nav a{ font-size:13.5px; color:var(--muted); transition:color .3s; }
.footer__nav a:hover{ color:var(--gold); }
.footer__legal{ display:flex; flex-wrap:wrap; align-items:center; gap:18px; font-size:12.5px; color:var(--muted-2); }
.footer__legal a:hover{ color:var(--gold); }
.footer__logout{ background:none; border:0; padding:0; cursor:pointer; font-size:12.5px; color:var(--muted-2); border-bottom:1px solid var(--line-2); }
.footer__logout:hover{ color:var(--gold); }

/* ============ WHATSAPP FLOAT ============ */
.wa-float{
  position:fixed; right:24px; bottom:24px; z-index:650;
  width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--wa); color:#fff;
  box-shadow:0 12px 34px -8px rgba(37,211,102,.55);
  transform:scale(0); transition:transform .5s var(--ease-out), box-shadow .35s;
}
.wa-float.is-in{ transform:scale(1); }
.wa-float:hover{ box-shadow:0 16px 40px -6px rgba(37,211,102,.7); }
.wa-float::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1px solid var(--wa); animation:waPulse 2.6s var(--ease) infinite;
}
@keyframes waPulse{ 0%{ transform:scale(1); opacity:.7 } 100%{ transform:scale(1.6); opacity:0 } }
.wa-float__tip{
  position:absolute; right:70px; white-space:nowrap;
  background:var(--surface-2); border:1px solid var(--line-2); color:var(--text);
  padding:9px 15px; border-radius:100px; font-size:13px;
  opacity:0; transform:translateX(8px); pointer-events:none;
  transition:opacity .3s, transform .3s var(--ease);
}
.wa-float:hover .wa-float__tip{ opacity:1; transform:none; }

/* ============ REVEAL ============ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .85s var(--ease-out), transform .85s var(--ease-out); }
.reveal.is-in{ opacity:1; transform:none; }

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .hero__media{ inset:0 0 0 22%; }
  .hero__veil{ background:
    linear-gradient(90deg, var(--ink) 0%, var(--ink) 26%, rgba(8,11,16,.95) 44%, rgba(8,11,16,.62) 66%, rgba(8,11,16,.42) 100%),
    linear-gradient(180deg, rgba(8,11,16,.75) 0%, rgba(8,11,16,.05) 34%, rgba(8,11,16,.9) 100%); }
  .profil{ grid-template-columns:1fr; }
  .profil__media{ position:static; max-width:400px; }
  .contact{ grid-template-columns:1fr; }
  .docs{ grid-template-columns:repeat(2,1fr); }
  .chips-block{ grid-template-columns:1fr 1fr; }
}

@media (max-width:860px){
  .nav__links{ display:none; }
  .nav__burger{ display:block; }
  .stats__grid{ grid-template-columns:1fr 1fr; }
  .stat{ border-bottom:1px solid var(--line); padding:34px 18px; }
  .stat:nth-child(2n){ border-right:0; }
  .stat:nth-last-child(-n+2){ border-bottom:0; }
  .skills, .quals{ grid-template-columns:1fr; }
  .hero{ min-height:auto; padding:0 0 64px; }
  .hero__media{ position:relative; inset:auto; height:58vh; min-height:360px; margin-bottom:30px; }
  .hero__media img{ object-position:64% 24%; animation:none; transform:none; }
  .hero__veil{ background:linear-gradient(180deg, rgba(8,11,16,.72) 0%, rgba(8,11,16,.08) 30%, rgba(8,11,16,.55) 78%, var(--ink) 100%); }
  .hero__title{ max-width:none; }
  .hero__scroll{ display:none; }
  .cursor-glow{ display:none; }
}

@media (max-width:620px){
  .f-row{ grid-template-columns:1fr; gap:0; }
  .docs{ grid-template-columns:1fr; }
  .chips-block{ grid-template-columns:1fr; gap:26px; }
  .nav__name{ display:none; }
  .footer__inner{ flex-direction:column; gap:26px; }
  .principle{ grid-template-columns:26px 1fr; column-gap:14px; }
  .honorary{ flex-direction:column; gap:14px; padding:24px; }
  .wa-float{ right:16px; bottom:16px; }
  .btn{ width:100%; }
  .hero__cta{ flex-direction:column; }
  .courses__list li{ grid-template-columns:56px 1fr; gap:12px; font-size:14px; }
}

/* ============ MOTION / PRINT ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
  .hero__title .line > span{ transform:none; }
  .grain{ display:none; }
}

@media print{
  .gate, .nav, .mobile-menu, .wa-float, .grain, .cursor-glow, .scroll-progress, .hero__scroll, .contact__form{ display:none !important; }
  html.is-locked{ overflow:visible; }
  .site{ opacity:1 !important; }
  body{ background:#fff; color:#111; }
  .section, .section--alt, .stats, .quote-band, .footer{ background:#fff !important; border-color:#ddd !important; }
  .tl-body, .skill, .qual, .doc, .courses, .honorary, .ccard, .principle{ background:#fff !important; border-color:#ddd !important; break-inside:avoid; }
  .sec-title, .tl-role, .qual h3, .doc h3, .hero__title{ color:#111 !important; }
  .tl-list li, .skill li, .qual p, .profil__text p, .hero__lead{ color:#333 !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .hero{ min-height:auto; padding:20px 0; }
  .hero__media{ display:none; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:10px; color:#666; }
}

/* ============ LEGAL-SEITEN ============ */
.legal-page{ background:var(--ink); }
.legal{ padding:150px 0 90px; }
.legal__inner{ max-width:820px; }
.legal .sec-title{ margin-bottom:44px; }
.legal__lead{ font-size:17px; color:var(--text); border-left:2px solid var(--gold); padding-left:22px; margin:0 0 40px; }
.legal h2{
  font-family:var(--serif); font-weight:400; font-size:24px; line-height:1.25;
  margin:44px 0 14px; color:var(--text);
}
.legal p{ color:var(--muted); font-size:15.2px; line-height:1.75; margin:0 0 16px; }
.legal a{ color:var(--gold); border-bottom:1px solid rgba(201,164,107,.35); }
.legal a:hover{ border-color:var(--gold); }
.legal code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px;
  background:var(--surface); border:1px solid var(--line); border-radius:5px; padding:2px 6px; color:var(--gold-lt);
}
.legal strong{ color:var(--text); }
.legal__meta{ margin-top:52px; padding-top:24px; border-top:1px solid var(--line); font-size:13px; color:var(--muted-2); }
.legal-page .nav__inner{ padding-block:16px; }

/* Dokumentenlisten mit Links */
.doc__list--links li{ padding-left:0; }
.doc__list--links li::before{ display:none; }
.doc__list--links a{
  display:flex; align-items:baseline; gap:8px; justify-content:space-between;
  padding:9px 0; border-bottom:1px solid var(--line); font-size:13.6px; color:var(--muted);
  transition:color .3s, border-color .3s, padding-left .3s;
}
.doc__list--links a:hover{ color:var(--gold); border-color:rgba(201,164,107,.4); padding-left:5px; }
.doc__list--links em{
  font-style:normal; font-size:9.5px; letter-spacing:.12em; color:var(--muted-2);
  border:1px solid var(--line-2); border-radius:4px; padding:2px 5px; flex:none;
  transition:color .3s, border-color .3s;
}
.doc__list--links a:hover em{ color:var(--gold); border-color:rgba(201,164,107,.5); }

/* ============ LEBENSLAUFSEITE: Beispiel-Hinweise ============ */
.gate__demo{ margin:22px 0 0; padding:12px 12px 12px 16px; border:1px solid var(--line-2); border-radius:12px; background:rgba(255,255,255,.03); display:flex; gap:12px; align-items:center; justify-content:space-between; text-align:left; font-size:13.5px; color:var(--muted); }
.gate__demo b{ color:var(--text); font-weight:600; }
.gate__demo code{ font-family:ui-monospace,Menlo,monospace; color:var(--gold); font-weight:700; }
.gate__demo button{ border:0; border-radius:8px; background:var(--gold); color:#0A0D12; font:600 13px/1 inherit; padding:9px 13px; cursor:pointer; white-space:nowrap; }
.gate.is-busy .gate__btn svg{ animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg) } }
.demo-bar{ position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:900; display:flex; align-items:center; gap:14px; max-width:calc(100% - 24px); padding:7px 7px 7px 18px; background:#F4EFE6; color:#0A0D12; border-radius:999px; font:600 13.5px/1.3 Inter,system-ui,sans-serif; box-shadow:0 14px 34px rgba(0,0,0,.4); }
.demo-bar[hidden]{ display:none; }
.demo-bar a{ background:#E07A2F; color:#fff; text-decoration:none; padding:9px 16px; border-radius:999px; white-space:nowrap; }
.demo-toast{ position:fixed; left:50%; top:18px; transform:translate(-50%,-20px); opacity:0; z-index:1100; background:#F4EFE6; color:#0A0D12; padding:12px 18px; border-radius:12px; font:500 14px/1.4 Inter,system-ui,sans-serif; transition:.3s; pointer-events:none; }
.demo-toast.is-in{ opacity:1; transform:translate(-50%,0); }
body:has(.demo-bar:not([hidden])) .footer{ padding-bottom:96px; }
body:has(.demo-bar:not([hidden])) .wa-float{ bottom:84px; }
@media (max-width:620px){ .db-long{ display:none; } .demo-bar{ font-size:12.5px; gap:10px; padding-left:14px; bottom:10px; } }

/* Kopfbild für Hochformat-Porträt: schmaler, nicht über den Rand zoomen */
.hero__media{ inset:0 0 0 44%; overflow:hidden; }
.hero__media img{ object-position:50% 22%; }
@media (max-width:1080px){ .hero__media{ inset:0 0 0 38%; } }
@media (max-width:860px){ .hero__media{ inset:auto; } .hero__media img{ object-position:50% 20%; } }