/* Portfolio Pascal Küffer – Formensprache angelehnt an «Allgemeines»:
   cremiges Papier, warmes Schwarz, breite fette Grotesk, Pastellkacheln, Outline-Pillen. */
:root{
  color-scheme: light dark;
  --papier:#fdfdf5; --flaeche:#f1f0e6; --flaeche-tief:#e6e4d8;
  --linie:#dddbcf; --linie-stark:#b9b6a9;
  --tinte:#10120e; --tinte-weich:#55585c; --tinte-zart:#7a7c75;
  --nacht:#12110c; --nacht-text:#fdfdf5; --nacht-weich:#c9c6bb;
  --akzent:#ff9a4d; --akzent-text:#a84b0a; --fokus:#0b57d0;
  --blau:#9fd8ff; --gruen:#a6e8b8; --gelb:#ffd766; --rosa:#ffb3a8; --lila:#d4c2ff; --orange:#ffc38f;
  --radius-gross:28px; --radius:16px; --pille:100px; --kontur:2px;
  --font:"Roboto Flex", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-mono:"Roboto Mono", ui-monospace, Menlo, monospace;
  --rand:clamp(20px,4vw,40px);
}
@media (prefers-color-scheme: dark){ :root{
  --papier:#12110c; --flaeche:#1d1c16; --flaeche-tief:#32302a;
  --linie:#32302a; --linie-stark:#4a473f;
  --tinte:#fdfdf5; --tinte-weich:#bdbaaf; --tinte-zart:#8d8a80;
  --nacht:#0a0906; --akzent-text:#ffb27a; --fokus:#8ab4f8;
  --blau:#91c4e7; --gruen:#97d3a7; --gelb:#e8cd6c; --rosa:#e8a59b; --lila:#c1b1e7; --orange:#e8b182;
} }

*{box-sizing:border-box;}
html{overflow-x:clip;-webkit-font-smoothing:antialiased;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *,*::before,*::after{animation:none !important;transition:none !important;} }
body{overflow-x:clip;margin:0;background:var(--papier);color:var(--tinte);font-family:var(--font);font-size:17px;line-height:1.6;}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;}
:focus-visible{outline:3px solid var(--fokus);outline-offset:3px;border-radius:6px;}
/* Auf dunklem Hero und orangem Fuss eigene Fokusfarben, damit der Ring sichtbar bleibt */
.hero :focus-visible{outline-color:#fdfdf5;}
.kontakt :focus-visible{outline-color:#10120e;}
.rahmen{max-width:1240px;margin:0 auto;padding:0 var(--rand);}
.breit{font-weight:800;font-stretch:125%;font-variation-settings:"wdth" 125;letter-spacing:-.02em;}
.mono{font-family:var(--font-mono);font-size:.8125rem;letter-spacing:.02em;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.sprung{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 18px;border-radius:var(--pille);background:var(--tinte);color:var(--papier);text-decoration:none;font-weight:700;}
.sprung:focus{top:12px;}

/* ------------------------------------------------------------------ Kopf */
.kopf{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--papier) 86%,transparent);
  backdrop-filter:blur(16px) saturate(170%);-webkit-backdrop-filter:blur(16px) saturate(170%);border-bottom:1px solid var(--linie);}
.kopf .rahmen{display:flex;align-items:center;gap:16px;min-height:68px;flex-wrap:wrap;padding-block:10px;}
.marke{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-stretch:115%;font-variation-settings:"wdth" 115;font-size:1.0625rem;letter-spacing:-.01em;}
.marke svg{width:34px;height:34px;flex:none;}
.kopf nav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap;}
.kopf nav a{padding:9px 16px;border-radius:var(--pille);text-decoration:none;font-weight:600;font-size:.9375rem;transition:background 160ms ease;}
.kopf nav a:hover{background:var(--flaeche-tief);}
.kopf nav a[aria-current="page"]{background:var(--tinte);color:var(--papier);}
@media (max-width:560px){ .kopf .rahmen{justify-content:space-between;} .kopf nav{margin-left:0;} .kopf nav a{padding:8px 12px;font-size:.875rem;} .marke span{display:none;} }

/* ---------------------------------------------------------------- Hero */
.hero{position:relative;isolation:isolate;color:var(--nacht-text);padding:clamp(56px,9vw,120px) 0 clamp(48px,7vw,88px);}
.hero{background:var(--nacht);border-bottom:1px solid var(--linie);}
.hero .rahmen{display:grid;gap:clamp(32px,5vw,56px);}
@media (min-width:900px){ .hero .rahmen{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:end;} }
.etikett{display:inline-flex;align-items:center;gap:10px;margin:0 0 clamp(20px,3vw,32px);padding:7px 16px 7px 12px;border:1.5px solid color-mix(in srgb,var(--nacht-text) 40%,transparent);border-radius:var(--pille);font-size:.875rem;color:var(--nacht-weich);}
.etikett .punkt{width:10px;height:10px;border-radius:50%;background:#6dd58c;flex:none;}
.hero h1{font-size:clamp(3rem,9.5vw,7.5rem);line-height:.92;margin:0 0 clamp(18px,2.6vw,28px);}
.hero .unter{font-size:clamp(1.0625rem,1.8vw,1.3125rem);line-height:1.5;color:var(--nacht-weich);max-width:46ch;margin:0 0 clamp(24px,4vw,36px);}
.hero .unter strong{color:var(--nacht-text);font-weight:700;}
.knoepfe{display:flex;gap:12px;flex-wrap:wrap;}
.knopf{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 24px;border-radius:var(--pille);border:var(--kontur) solid currentColor;font-weight:700;text-decoration:none;font-size:1rem;transition:transform 260ms cubic-bezier(.3,1.6,.5,1),background 160ms ease,color 160ms ease;}
.knopf:active{transform:scale(.96);}
.knopf--voll{background:var(--akzent);border-color:var(--akzent);color:#10120e;}
.knopf--voll:hover{filter:brightness(1.06);}
.knopf--rand:hover{background:var(--nacht-text);color:var(--nacht);}
.kunst{display:none;}
@media (min-width:900px){
  .kunst{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);aspect-ratio:3/2;width:100%;max-width:420px;justify-self:end;}
  .kunst span:nth-child(1){background:var(--blau);border-radius:0 0 100% 0;}
  .kunst span:nth-child(2){background:var(--gelb);border-radius:50%;}
  .kunst span:nth-child(3){background:var(--rosa);border-radius:100% 0 0 0;}
  .kunst span:nth-child(4){background:var(--gruen);border-radius:0 100% 100% 0;}
  .kunst span:nth-child(5){background:var(--lila);}
  .kunst span:nth-child(6){background:var(--orange);border-radius:100% 100% 0 0;}
}
.zahlen{display:flex;gap:10px;flex-wrap:wrap;margin-top:clamp(28px,4vw,40px);padding:0;list-style:none;}
.zahlen li{display:inline-flex;align-items:baseline;gap:8px;border:var(--kontur) solid var(--nacht-text);border-radius:var(--pille);padding:7px 20px;font-size:.875rem;}
.zahlen b{font-weight:800;font-variant-numeric:tabular-nums;}

/* ----------------------------------------------------------- Abschnitte */
main section{padding:clamp(56px,8vw,104px) 0 0;}
.kopfzeile{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 48px;margin-bottom:clamp(24px,4vw,40px);}
h2{font-size:clamp(2rem,5vw,3.25rem);line-height:1.02;margin:0;}
.kopfzeile p{margin:0;max-width:52ch;color:var(--tinte-weich);font-size:1.0625rem;}

/* Mitbringen: drei Pastellkacheln */
.mitbringen{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));padding:0;margin:0;list-style:none;}
.mitbringen li{border-radius:var(--radius-gross);padding:clamp(22px,3vw,32px);color:#10120e;display:flex;flex-direction:column;gap:10px;min-height:220px;}
.mitbringen li:nth-child(1){background:var(--blau);} .mitbringen li:nth-child(2){background:var(--gruen);} .mitbringen li:nth-child(3){background:var(--orange);}
.mitbringen h3{margin:12px 0 0;font-size:1.5rem;line-height:1.1;}
.mitbringen p{margin:0;font-size:1rem;line-height:1.5;}
.mitbringen .mono{opacity:.75;}
@media (min-width:640px) and (max-width:899px){ .mitbringen{grid-template-columns:1fr 1fr;} .mitbringen li:nth-child(3){grid-column:1/-1;min-height:0;} }

/* ---------------------------------------------------------------- Filter */
.filter{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 clamp(24px,3vw,32px);padding:0;list-style:none;}
.filter button{font:inherit;font-size:.9375rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--pille);
  border:var(--kontur) solid var(--tinte);background:transparent;color:var(--tinte);transition:background 160ms ease,color 160ms ease;}
.filter button:hover{background:var(--flaeche-tief);}
.filter button[aria-pressed="true"]{background:var(--tinte);color:var(--papier);}
.filter .zahl{font-family:var(--font-mono);font-size:.75rem;opacity:.7;}

/* ---------------------------------------------------------------- Raster */
.raster{display:grid;gap:clamp(28px,3.5vw,44px) clamp(16px,2vw,24px);grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));padding:0;margin:0;list-style:none;}
.raster li[hidden]{display:none;}
.karte{display:block;color:inherit;text-decoration:none;cursor:zoom-in;}
.karte .bild{display:block;position:relative;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--kat,var(--flaeche));margin-bottom:14px;
  transition:border-radius 420ms cubic-bezier(.2,.9,.3,1);}
.karte img{width:100%;height:100%;object-fit:cover;transition:transform 600ms cubic-bezier(.2,.9,.3,1);}
.karte .bild.enthalten img{object-fit:contain;padding:8%;}
.karte:hover .bild{border-radius:var(--radius-gross);}
.karte:hover img{transform:scale(1.03);}
.karte .anzahl{position:absolute;right:12px;bottom:12px;padding:4px 11px;border-radius:var(--pille);background:#10120e;color:#fdfdf5;font-size:.75rem;font-weight:700;}
.karte .spiel{position:absolute;left:12px;bottom:12px;width:36px;height:36px;border-radius:50%;background:var(--akzent);display:grid;place-items:center;}
.karte .spiel svg{width:14px;height:14px;margin-left:2px;}
.karte h3{display:block;margin:0 0 4px;font-size:1.25rem;line-height:1.2;font-weight:800;font-stretch:112%;font-variation-settings:"wdth" 112;letter-spacing:-.01em;}
.karte .meta{display:flex;gap:8px;align-items:center;color:var(--tinte-weich);margin-bottom:6px;}
.karte .meta i{width:9px;height:9px;border-radius:50%;background:var(--kat);flex:none;}
.karte p{display:block;margin:0;color:var(--tinte-weich);font-size:.9375rem;line-height:1.5;}

/* ----------------------------------------------------------- Lightbox */
dialog.leuchte{overscroll-behavior:contain;width:min(1200px,100vw - 24px);max-height:calc(100dvh - 24px);padding:0;border:0;border-radius:var(--radius-gross);background:var(--papier);color:var(--tinte);overflow:hidden;}
dialog.leuchte::backdrop{background:rgb(10 10 8 / .82);backdrop-filter:blur(4px);}
.leuchte .innen{display:grid;grid-template-rows:minmax(0,1fr) auto;max-height:calc(100dvh - 24px);}
.leuchte figure{margin:0;position:relative;background:var(--flaeche);display:grid;place-items:center;min-height:0;}
.leuchte figure img,.leuchte figure video{max-width:100%;max-height:calc(100dvh - 190px);width:auto;height:auto;object-fit:contain;}
.leuchte .leiste{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:16px 20px;}
.leuchte .leiste h3{margin:0;font-size:1.25rem;font-weight:800;font-stretch:112%;font-variation-settings:"wdth" 112;}
.leuchte .leiste p{margin:0;color:var(--tinte-weich);font-size:.9375rem;flex:1 1 260px;}
.leuchte .steuer{display:flex;gap:8px;margin-left:auto;align-items:center;}
.rund{width:44px;height:44px;border-radius:50%;border:var(--kontur) solid var(--tinte);background:transparent;color:var(--tinte);display:grid;place-items:center;cursor:pointer;padding:0;}
.rund:hover{background:var(--tinte);color:var(--papier);}
.rund[aria-disabled="true"]{opacity:.3;cursor:default;}
.rund[aria-disabled="true"]:hover{background:transparent;color:var(--tinte);}
.leuchte .steuer[hidden]{display:none;}
.rund svg{width:18px;height:18px;}
.leuchte .zu{position:absolute;top:12px;right:12px;background:var(--papier);border-color:var(--papier);z-index:2;}
.leuchte .stelle{font-family:var(--font-mono);font-size:.8125rem;color:var(--tinte-weich);min-width:44px;text-align:center;}

/* ------------------------------------------------------------ Über mich */
.ich{display:grid;gap:clamp(32px,5vw,64px);align-items:start;}
@media (min-width:860px){ .ich{grid-template-columns:minmax(0,5fr) minmax(0,7fr);} }
.ich .portraet{border-radius:var(--radius-gross);overflow:hidden;background:var(--gelb);aspect-ratio:4/5;}
.ich .portraet img{width:100%;height:100%;object-fit:cover;}
.ich h1{font-size:clamp(2.75rem,7vw,5rem);line-height:.95;margin:0 0 20px;}
.ich .lead{font-size:clamp(1.125rem,2vw,1.375rem);line-height:1.5;margin:0 0 20px;max-width:40ch;}
.ich p{max-width:62ch;}
.fakten{display:grid;grid-template-columns:1fr;gap:12px;margin:28px 0 0;padding:0;}
@media (min-width:480px){ .fakten{grid-template-columns:1fr 1fr;} }
.fakten div{background:var(--flaeche);border-radius:var(--radius);padding:16px 18px;}
.fakten dt{color:var(--tinte-weich);margin-bottom:4px;}
.fakten dd{margin:0;font-weight:700;}
.zeitstrahl{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie-stark);}
.zeitstrahl li{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);gap:8px 32px;padding:20px 0;border-bottom:1px solid var(--linie);}
@media (max-width:560px){ .zeitstrahl li{grid-template-columns:1fr;} }
.zeitstrahl .wann{color:var(--tinte-weich);padding-top:3px;}
.zeitstrahl h4{margin:0;font-size:1.1875rem;line-height:1.3;font-weight:800;font-stretch:110%;font-variation-settings:"wdth" 110;}
.zeitstrahl p{margin:4px 0 0;color:var(--tinte-weich);}
.zeitstrahl .hervor{background:color-mix(in srgb,var(--gruen) 35%,var(--papier));color:var(--tinte);}
.zeitstrahl .hervor p,.zeitstrahl .hervor .wann{color:var(--tinte);}
@media (prefers-color-scheme: dark){ .zeitstrahl .hervor{background:color-mix(in srgb,var(--gruen) 18%,var(--papier));} }
.zeitstrahl .hervor{border-radius:var(--radius);padding:20px;margin:8px -20px;border-bottom:0;}
.marke-bsb{display:inline-block;margin-left:8px;padding:2px 10px;border-radius:var(--pille);background:var(--tinte);color:var(--papier);font-family:var(--font-mono);font-size:.6875rem;vertical-align:middle;font-weight:500;}
.lebenslauf{display:grid;gap:clamp(40px,6vw,72px);}
@media (min-width:960px){ .lebenslauf{grid-template-columns:1fr 1fr;} }
.lebenslauf h3.titel{font-size:1.5rem;margin:0 0 16px;}
.pillen{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;}
.pillen li{border:var(--kontur) solid var(--tinte);border-radius:var(--pille);padding:6px 16px;font-size:.9375rem;font-weight:600;}

/* ------------------------------------------------------------- Kontakt */
.kontakt{margin-top:clamp(64px,9vw,120px);background:var(--akzent);color:#10120e;border-radius:var(--radius-gross) var(--radius-gross) 0 0;padding:clamp(40px,6vw,72px) 0 28px;}
.kontakt h2{font-size:clamp(2.25rem,6vw,4rem);margin-bottom:16px;}
.kontakt p{max-width:52ch;font-size:1.125rem;margin:0 0 28px;}
.kontakt .wege{display:flex;flex-wrap:wrap;gap:12px;}
.kontakt .knopf{border-color:#10120e;color:#10120e;max-width:100%;}
@media (max-width:400px){ .kontakt .knopf{font-size:.9375rem;padding:0 16px;gap:8px;} }
.kontakt .knopf:hover{background:#10120e;color:#fdfdf5;}
.kontakt .fuss{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:clamp(40px,6vw,64px);padding-top:20px;border-top:1.5px solid rgb(16 18 14 / .25);font-size:.875rem;}
.kontakt .fuss a{text-decoration:none;} .kontakt .fuss a:hover{text-decoration:underline;}

/* ----------------------------------------------------------- Erscheinen */
@media (prefers-reduced-motion: no-preference){
  .js .auf{opacity:0;transform:translateY(16px);transition:opacity 600ms ease,transform 700ms cubic-bezier(.2,.9,.3,1);}
  .js .auf.da{opacity:1;transform:none;}
}

/* ----------------------------------------------------------------- Druck */
@media print{
  .kopf,.filter,.knoepfe,.kunst,dialog,.sprung,.alle-zeigen,.karte .spiel,.karte .anzahl{display:none !important;}
  .js .auf{opacity:1 !important;transform:none !important;}
  .kontakt .knopf{border:0;padding:0;min-height:0;} .kontakt .knopf svg{display:none;}
  .hero{background:none;border:0;}
  body{background:#fff;color:#000;font-size:11pt;}
  .hero{color:#000;padding:0 0 12pt;}
  .hero .unter,.etikett{color:#000;}
  .raster{grid-template-columns:repeat(3,1fr);gap:12pt;}
  .raster li{break-inside:avoid;}
  .kontakt{background:none;color:#000;}
  a{text-decoration:none;}
}

/* Hervorgehobene Karte (BSB-Übung): doppelt breit ab Tablet */
@media (min-width:640px){ .raster > li.hervor{grid-column:span 2;} .raster > li.hervor .bild{aspect-ratio:16/9;} }
.raster > li.hervor .bild img{object-fit:contain;background:#fff;}
.karte .bild::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--linie);pointer-events:none;}
.alle-zeigen{display:flex;justify-content:center;margin:clamp(32px,4vw,48px) 0 0;}
.alle-zeigen[hidden]{display:none;}
.knopf,.karte,.rund,.filter button{touch-action:manipulation;}
body:has(dialog[open]){overflow:hidden;}
.karte .band{position:absolute;left:12px;top:12px;padding:5px 12px;border-radius:var(--pille);background:#10120e;color:#fdfdf5;font-size:.75rem;font-weight:700;letter-spacing:.01em;}