/* domenicschilling.de – v2 (19.10.2026)
   Idee: ein kaltes, ruhiges Punktefeld, das dort warm (Kupfer) aufleuchtet, wo Aufmerksamkeit hinfällt.
   Davor das freigestellte Porträt, der Name in zwei Ebenen: „Domenic“ hinter, „Schilling“ vor dem Porträt.
   Eine Schrift (Switzer), extreme Größenkontraste, eine Akzentfarbe (Kupfer). */

@font-face{font-family:"Switzer";src:url("fonts/switzer-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Switzer";src:url("fonts/switzer-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Switzer";src:url("fonts/switzer-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --nacht:#070A16;   /* Grund */
  --tiefe:#0E1328;   /* gehobene Flächen */
  --linie:#1D2440;   /* Linien */
  --kreide:#F2EFE9;  /* Text, leicht warm passend zum Porträt */
  --nebel:#959DB7;   /* Zweittext */
  --kupfer:#FFB27A;  /* einziger Akzent */
  --kupfer-hell:#FFC9A1;
  --schrift:"Switzer",system-ui,-apple-system,"Segoe UI",sans-serif;
  --rand:clamp(16px,4vw,48px);
  --breite:1240px;
  color-scheme:dark;
}
/* Die Seite ist bewusst dunkel – auch im hellen Systemmodus. Tokens für beide Fälle identisch gesetzt. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark}}
:root[data-theme="dark"]{color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--nacht);color:var(--kreide);font:400 1.0625rem/1.6 var(--schrift);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration-color:var(--kupfer);text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--kupfer);outline-offset:4px;border-radius:6px}
::selection{background:var(--kupfer);color:var(--nacht)}
.sprung{position:absolute;left:var(--rand);top:-60px;background:var(--kupfer);color:var(--nacht);padding:10px 14px;border-radius:8px;z-index:20;font-weight:600}
.sprung:focus{top:12px}
.nur-vorlesen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Kopfleiste ---------- */
.leiste{position:absolute;inset:0 0 auto;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:calc(14px + env(safe-area-inset-top)) var(--rand) 14px}
.zeichen{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-weight:500;letter-spacing:-.01em;min-height:44px}
.zeichen .monogramm{display:block;height:46px;width:auto;flex:none}
@media (min-width:900px){.zeichen .monogramm{height:52px}}
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:999px;background:var(--kupfer);color:var(--nacht);font-weight:600;text-decoration:none;transition:background-color .2s}
.knopf:hover{background:var(--kupfer-hell)}
.knopf.klein{min-height:44px;padding:0 18px;font-size:.9375rem}
.knopf.leer{background:transparent;color:var(--kreide);box-shadow:inset 0 0 0 1px rgba(242,239,233,.28)}
.knopf.leer:hover{background:rgba(242,239,233,.08)}

/* ---------- Bühne ---------- */
.buehne{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;display:grid;background:var(--nacht)}
.feld{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.buehne::after{content:"";position:absolute;inset:auto 0 0;height:18%;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(7,10,22,0),var(--nacht))}
.buehne-inhalt{position:relative;align-self:end;width:100%;max-width:calc(var(--breite) + 2*var(--rand));margin:0 auto;padding:120px var(--rand) clamp(28px,6vh,64px)}
.name-wrap{position:relative;z-index:3}
.name{position:relative;z-index:3;margin:0 0 -.24em -.05em;padding-bottom:.24em;font-weight:600;letter-spacing:-.07em;line-height:.82;font-size:clamp(4.2rem,24.2vw,18rem);pointer-events:none}
/* Glut: Kupfer-Kopie des Namens, nur im Lichtkegel des Punktefelds sichtbar (Position setzt feld.js) */
.glut{position:absolute;inset:0;color:var(--kupfer);--lx:-999px;--ly:-999px;
  -webkit-mask-image:radial-gradient(circle var(--lr,220px) at var(--lx) var(--ly),#000 0%,rgba(0,0,0,.55) 45%,transparent 72%);
  mask-image:radial-gradient(circle var(--lr,220px) at var(--lx) var(--ly),#000 0%,rgba(0,0,0,.55) 45%,transparent 72%)}
@media (prefers-reduced-motion:reduce){.glut{display:none}}
.name span{display:block;position:relative}
.text-block{position:relative;z-index:3;margin-top:clamp(40px,5.5vw,96px);padding-top:clamp(20px,3vh,28px);border-top:1px solid rgba(242,239,233,.16);display:grid;gap:22px}
.rolle{margin:0;max-width:36ch;font-size:clamp(1.125rem,1.7vw,1.4rem);line-height:1.4}
.rolle span{display:block;color:var(--nebel);font-size:.8em;margin-top:6px}
.aktionen{display:flex;flex-wrap:wrap;gap:12px 14px;align-items:center;margin:0;padding:0;list-style:none}
.aktionen .profil{display:inline-flex;align-items:center;min-height:48px;padding:0 6px;font-weight:500;text-decoration:none;color:var(--nebel)}
.aktionen .profil:hover{color:var(--kreide)}
@media (min-width:900px){
  .name{font-size:clamp(8rem,min(22.5vw,31svh),21rem)}
  .text-block{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:40px}
}

/* Foto: das Originalfoto, unverändert, als Abzug in einem ruhigen Rahmen */
.foto{position:relative;z-index:3;justify-self:end;margin:0 0 clamp(18px,3vh,32px) auto;width:min(44vw,200px);aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:var(--tiefe);
  box-shadow:0 0 0 1px rgba(242,239,233,.14),0 2px 0 rgba(242,239,233,.06) inset,0 40px 80px -30px rgba(0,0,0,.85),0 0 90px -30px rgba(255,178,122,.35)}
.foto img{display:block;width:100%;height:100%;object-fit:cover}
.mit-foto .buehne-inhalt{padding-top:84px}
@media (min-width:900px){
  .mit-foto .buehne-inhalt{padding-top:120px;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(32px,4vw,64px);align-items:end}
  .mit-foto .name-wrap{grid-column:1;grid-row:1}
  .mit-foto .foto{grid-column:2;grid-row:1;margin:0;width:clamp(240px,23vw,340px);align-self:end;margin-bottom:.4em}
  .mit-foto .text-block{grid-column:1 / -1;grid-row:2}
  .mit-foto .name{font-size:clamp(7rem,min(16.2vw,29svh),16.5rem)}
}

/* Einmaliger Auftritt beim Laden: Name steigt aus einer Kante, danach der Text */
.name span{animation:auftauchen 1s cubic-bezier(.2,.75,.15,1) both}
.name .nach{animation-delay:.1s}
.text-block{animation:einblenden .8s ease-out .5s both}
.foto{animation:einblenden 1s ease-out .25s both}
@keyframes auftauchen{from{opacity:0;transform:translateY(.22em)}to{opacity:1;transform:none}}
@keyframes einblenden{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.name span,.foto,.text-block{animation:none}}

/* ---------- Abschnitte ---------- */
main{position:relative;z-index:1}
.abschnitt{max-width:calc(var(--breite) + 2*var(--rand));margin:0 auto;padding:clamp(80px,12vw,160px) var(--rand) 0;display:grid;gap:28px}
@media (min-width:960px){.abschnitt{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px}}
.abschnitt h2{margin:0;font-weight:600;font-size:clamp(2.5rem,6.2vw,5.25rem);line-height:.92;letter-spacing:-.05em}
.abschnitt p{margin:0 0 1em;max-width:60ch}
.lead{font-size:clamp(1.375rem,2.4vw,1.875rem);line-height:1.32;letter-spacing:-.015em;max-width:30ch!important}
.leise{color:var(--nebel)}

.koennen{margin:40px 0 36px;padding:0;display:grid;gap:0}
.koennen div{padding:22px 0;border-top:1px solid var(--linie);display:grid;gap:6px}
@media (min-width:640px){.koennen div{grid-template-columns:15rem 1fr;gap:24px}}
.koennen dt{font-weight:600;font-size:1.125rem}
.koennen dd{margin:0;color:var(--nebel)}

/* Marken: Liste mit echten Logos */
.marken{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie)}
.marken li{position:relative;display:grid;grid-template-columns:56px 1fr;gap:4px 20px;align-items:center;padding:20px 12px;margin:0 -12px;border-bottom:1px solid var(--linie);border-radius:14px;transition:background-color .2s}
.marken li:hover{background:var(--tiefe)}
.kachel{grid-column:1;grid-row:1 / span 2;width:56px;height:56px;border-radius:14px;overflow:hidden;display:grid;place-items:center;background:var(--tiefe)}
.kachel img{width:100%;height:100%;object-fit:contain;display:block}
.kachel.text{background:var(--kupfer);color:var(--nacht);font-weight:600;font-size:.95rem;letter-spacing:-.03em}
.marken h3{grid-column:2;margin:0;font-size:1.375rem;font-weight:600;letter-spacing:-.025em;line-height:1.2}
.marken p{grid-column:2;margin:0;color:var(--nebel);font-size:1rem}
.marken .rolle-tag{color:var(--kupfer)}
.marken .domain{grid-column:2;justify-self:start;font-weight:500;font-size:.9375rem;color:var(--kreide);display:inline-flex;min-height:32px;align-items:center}
@media (min-width:720px){
  .marken li{grid-template-columns:56px minmax(0,1fr) auto}
  .marken .domain{grid-column:3;grid-row:1 / span 2;align-self:center}
}
/* ganze Zeile klickbar, Link bleibt das eigentliche Ziel */
.marken .domain::after{content:"";position:absolute;inset:0;border-radius:14px}

/* Werdegang: echte Zeitfolge */
.werdegang{list-style:none;margin:0;padding:0;position:relative}
.werdegang::before{content:"";position:absolute;left:5px;top:10px;bottom:10px;width:1px;background:var(--linie)}
.werdegang li{position:relative;padding:0 0 30px 34px;display:grid;gap:2px}
.werdegang li::before{content:"";position:absolute;left:0;top:8px;width:11px;height:11px;border-radius:50%;background:var(--nacht);box-shadow:inset 0 0 0 1px var(--nebel)}
.werdegang li.heute::before{background:var(--kupfer);box-shadow:0 0 0 5px rgba(255,178,122,.16)}
.werdegang .zeit{color:var(--nebel);font-size:.9375rem;font-variant-numeric:tabular-nums}
.werdegang .was{font-weight:600;font-size:1.1875rem;letter-spacing:-.015em}
.werdegang .wo{color:var(--nebel)}
.werdegang li:last-child{padding-bottom:0}

/* Kontakt: eine Spalte, die Adresse ist das Schlussbild. Dahinter ganz leise das Monogramm als Siegel. */
.kontakt{padding-bottom:0;position:relative;isolation:isolate}
.kontakt::after{content:"";position:absolute;z-index:-1;right:var(--rand);bottom:-40px;width:clamp(180px,30vw,400px);aspect-ratio:700/792;
  background:url("monogramm-elfenbein.svg") center/contain no-repeat;opacity:.045;pointer-events:none}
@media (min-width:960px){.kontakt{grid-template-columns:1fr;gap:28px}}
.grosse-mail{display:inline-block;font-weight:600;font-size:clamp(1.45rem,6.3vw,6rem);line-height:1.02;letter-spacing:-.045em;word-break:break-word;text-decoration-thickness:2px;margin:6px 0 26px}
.grosse-mail:hover{color:var(--kupfer-hell)}
.profile{display:flex;gap:10px 26px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.profile a{display:inline-flex;min-height:44px;align-items:center;font-weight:500}

/* Fuß */
.fuss{max-width:calc(var(--breite) + 2*var(--rand));margin:clamp(96px,12vw,160px) auto 0;padding:24px var(--rand) calc(28px + env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;align-items:center;color:var(--nebel);font-size:.9375rem;border-top:1px solid var(--linie)}
.fuss nav{display:flex;gap:22px}
.fuss a{display:inline-flex;min-height:44px;align-items:center;text-decoration:none}
.fuss a:hover{color:var(--kreide)}

/* ---------- Textseiten (Impressum, Datenschutz, 404) ---------- */
.textseite{max-width:760px;margin:0 auto;padding:calc(28px + env(safe-area-inset-top)) var(--rand) 0}
.textseite .zeichen{margin-bottom:clamp(40px,7vw,80px)}
.textseite h1{font-weight:600;font-size:clamp(2.75rem,8vw,5rem);line-height:.95;letter-spacing:-.05em;margin:0 0 32px}
.textseite h2{font-weight:600;font-size:1.125rem;letter-spacing:-.01em;margin:34px 0 6px}
.textseite p{margin:0 0 12px;color:#D9D6D0}
.textseite a{color:var(--kreide)}
.textseite + .fuss{margin-top:96px}