/* oliver-schunn.tech – im Stil von Bent°Corner: Graustufen ohne Akzent, sachlich (New Utilitarian).
   Tasten wie im Tasten-Labor der App (B · OP-XY knapp): Fläche #141416, Licht oben links #202023, Schatten unten
   rechts #060607, Abstand 3, Weichheit 6, Ecken 9, Höhe 40, Druck 19 ms, Rückfedern 241 ms. Schriften liegen auf dem
   Server (keine Google Fonts, keine Cookies, kein Tracking). */
@font-face { font-family: "Inter"; src: url("fonts/Inter_18pt-Regular.ttf") format("truetype"); font-weight: 400; font-display: optional; }
@font-face { font-family: "Inter"; src: url("fonts/Inter_18pt-Medium.ttf") format("truetype"); font-weight: 500; font-display: optional; }
@font-face { font-family: "Barlow"; src: url("fonts/BarlowSemiCondensed-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: optional; }

:root {
  --bg: #141416; --face: #141416; --light: #202023; --dark: #060607; --surface: #18181a; --line: #2a2a2c;
  --line2: #3d3d40; --text: #ededed; --text2: #b5b5b5; --muted: #8e8e8e; --dim: #686868; --accent: #e4e4e4;
  --accent-deep: #3b3b3b; --hi: #ffffff; --glow: rgba(255,255,255,.55);
  --keygrad: linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.10)); --keyinset: rgba(255,255,255,.055);
}
/* Hell nur, wenn man oben umschaltet (html[data-theme=light]) – Standard ist dunkel */
:root[data-theme="light"] {
  --bg: #ebebed; --face: #ebebed; --light: #ffffff; --dark: #c4c4c9; --surface: #f3f3f4; --line: #d6d6da;
  --line2: #bdbdc2; --text: #141416; --text2: #3d3d42; --muted: #6a6a70; --dim: #8e8e94; --accent: #2a2a2e;
  --accent-deep: #c8c8cc; --hi: #141416; --glow: rgba(20,20,22,.35); --keygrad: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 60%); --keyinset: rgba(255,255,255,.9);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--text); }
body { font-family: "Inter", system-ui, sans-serif; font-size: 16px; line-height: 1.6; min-height: 100vh;
       display: flex; flex-direction: column; }
a { color: var(--text); text-underline-offset: 3px; text-decoration-color: var(--line2); }
a:hover { text-decoration-color: var(--text2); }
[data-lang] { display: none; }
html[lang="de"] [data-lang="de"], html[lang="en"] [data-lang="en"] { display: revert; }

/* ---------- Kopf und Fuß ---------- */
header, footer { padding: 22px 40px; display: flex; align-items: center; gap: 16px; }
header { border-bottom: 1px solid var(--line); }
footer { border-top: 1px solid var(--line); margin-top: auto; color: var(--dim); font-size: 13px; flex-wrap: wrap; }
footer .links { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.mark { font-family: "Barlow", sans-serif; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: 14px; }
.mark { display: flex; align-items: center; white-space: nowrap; }
.mark a { text-decoration: none; color: var(--muted); transition: color 160ms; }
.mark a:hover, .mark a.here { color: var(--text); }
/* der lange Strich zwischen Oliver Schunn und Bent°Corner: ein Geviertstrich, nur etwa fünfmal so lang */
.mark .dash { display: inline-block; width: 5em; height: 1.5px; margin: 0 1.1em 0 .95em; background: currentColor;
              opacity: .55; border-radius: 1px; transform: translateY(-.05em); }
.nav { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* ---------- Tasten (Tasten-Labor B) ---------- */
.key {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 40px; padding: 0 18px; border-radius: 9px; border: 0; cursor: pointer;
  font: 500 13px "Inter", sans-serif; color: var(--text2); text-decoration: none; white-space: nowrap;
  background: var(--keygrad), var(--face);
  box-shadow: -3px -3px 6px var(--light), 3px 3px 6px var(--dark), inset 0 1px 0 var(--keyinset);
  transition: transform 241ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 241ms ease, color 160ms;
  user-select: none;
}
.key:hover { color: var(--text); }
.key:active, .key.down {
  transform: translateY(1px) scale(.985);
  box-shadow: inset 3px 3px 6px var(--dark), inset -3px -3px 6px var(--light);
  transition: transform 19ms, box-shadow 19ms;
}
.key .led { width: 5px; height: 5px; border-radius: 50%; background: var(--dim); box-shadow: none; transition: background 160ms, box-shadow 160ms; }
.key.on .led, .key.primary .led { background: var(--hi); box-shadow: 0 0 8px var(--glow); }
.key.on, .key.primary { color: var(--text); }
.key.big { height: 54px; padding: 0 26px; font-size: 15px; border-radius: 11px; }
.key.small { height: 32px; padding: 0 12px; font-size: 12px; }
.key[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* Sprache: DE ▾ */
.lang { position: relative; }
.lang .menu { position: absolute; right: 0; top: 44px; display: none; flex-direction: column; gap: 8px; padding: 8px;
              border-radius: 12px; background: var(--surface); border: 1px solid var(--line); z-index: 10; }
.lang .menu .key { min-width: 56px; }
.lang.open .menu { display: flex; }

/* ---------- Startseite ---------- */
.hero { flex: 1; display: grid; place-items: center; padding: 64px 24px; }
.box { max-width: 760px; width: 100%; }
.index { color: var(--dim); font-family: "Barlow", sans-serif; letter-spacing: .2em; font-size: 13px; text-transform: uppercase; }
h1.big { font-family: "Barlow", sans-serif; font-weight: 600; text-transform: uppercase;
         font-size: clamp(56px, 13vw, 132px); line-height: .9; letter-spacing: -.01em; margin: 18px 0 26px; }
h1.big > span:not(.gw):not(.chw) { color: var(--dim); }   /* nur „Schunn.“ – nicht die Buchstaben-Spans vom Glitch */
.lead { color: var(--text2); max-width: 560px; }
.grid { margin-top: 42px; display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); }
.grid > div { padding: 14px 14px 0 0; color: var(--muted); font-size: 13px; }
.grid b { display: block; color: var(--text); font-weight: 500; font-size: 14px; }
.grid a { text-decoration: none; }
.box h2.sec { font-family: "Barlow", sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .12em;
              font-size: 15px; color: var(--text2); margin: 46px 0 0; }
.box h2.sec + .grid { margin-top: 12px; }
.box h2.sec + .row { margin-top: 14px; }   /* Startseite: Projekt als großer Knopf */
.row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 30px; }

/* ---------- In Arbeit: ASCII-Balken, durch den eine Helligkeits-Welle läuft (keine Prozent – nur "dran") ---------- */
.loading { display: grid; gap: 14px; margin-top: 40px; max-width: 560px; }
.ascii { font: 14px/1.25 ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace; color: var(--line2);
         white-space: pre; overflow: hidden; user-select: none; }
.ascii .lbl { color: var(--muted); }
.ascii i { font-style: normal; }

/* Fette Überschriften: Buchstaben weichen der Maus aus wie in zähem Öl */
.ch { display: inline-block; font-style: normal; will-change: transform; }
.chw { display: inline-block; white-space: nowrap; }   /* ein Wort aus .ch-Buchstaben bricht nie mitten drin (site.js) */

.features { list-style: none; display: grid; gap: 10px; }
.features li { color: var(--text2); padding-left: 18px; position: relative; }
.features li.white { color: var(--hi); }
.features li.white::before { background: var(--hi); }
.features li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--dim); }

/* ---------- Textseiten ---------- */
main.doc { max-width: 780px; width: 100%; margin: 0 auto; padding: 72px 40px 96px; }
main.doc h1 { font-family: "Barlow", sans-serif; font-weight: 600; text-transform: uppercase; font-size: 40px; letter-spacing: .02em; margin-bottom: 8px; }
main.doc .sub { color: var(--muted); margin-bottom: 36px; }
main.doc h2 { font-family: "Barlow", sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: 16px; margin: 34px 0 10px; padding-top: 14px; border-top: 1px solid var(--line); }
main.doc h3 { font-family: "Barlow", sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: 13px; color: var(--muted); margin: 18px 0 6px; }
main.doc p, main.doc li { color: var(--text2); }
main.doc ul { padding-left: 20px; margin: 8px 0; }
main.doc li { margin: 4px 0; }
main.doc p + p { margin-top: 10px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin: 12px 0; }

/* ---------- Allgemein ---------- */
.note { color: var(--text2); font-size: 14px; }

@media (max-width: 760px) {
  .grid { grid-template-columns: 1fr; }
  header, footer { padding: 14px 16px; }
  footer .links { margin-left: 0; }
  .nav .hide-s { display: none; }
}

/* Tastatur: sichtbarer Fokus (Barrierefreiheit) */
.key:focus-visible, a:focus-visible { outline: 2px solid var(--hi); outline-offset: 3px; }

.theme .ico { font-size: 14px; line-height: 1; }

/* Buy me a coffee: kleiner Sticker in der Kopfleiste (offizielles Tassen-Logo, gelb wie bei Buy Me a Coffee) */
.bmc { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 9px; border-radius: 9px;
  background: #FFDD00; color: #0D0C22; font-weight: 700; font-size: 13px; text-decoration: none; white-space: nowrap;
  border: 2px solid #fff; box-shadow: 2px 3px 0 rgba(0, 0, 0, .35); transform: rotate(-3deg);
  transition: transform 150ms ease, box-shadow 150ms ease; }
.bmc:hover { transform: rotate(-1deg) scale(1.05); box-shadow: 3px 4px 0 rgba(0, 0, 0, .35); }
.bmc img { width: 13px; height: 19px; display: block; }
@media (max-width: 560px) { .bmc span { display: none; } .bmc { padding: 0 8px; } }
@media (max-width: 480px) {   /* schmale Handys: Kopfleiste passt in eine Zeile (Sprachwahl lief rechts raus) */
  header { padding: 16px 16px; gap: 10px; }
  .nav { gap: 6px; }
  .mark { font-size: 12px; letter-spacing: .08em; }
  .nav .key.small { padding-left: 9px; padding-right: 9px; }
}

@media (max-width: 760px) { .mark .dash { width: 2.6em; margin: 0 .7em; } }
@media (max-width: 560px) { .mark .dash, .mark .dash + a { display: none; } }

/* Hell/Dunkel: die neue Farbe läuft als Welle von links über die Seite (View Transitions; ohne = sofort) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) {
  -webkit-mask: var(--wave) 0 0 / 300% 100% no-repeat; mask: var(--wave) 0 0 / 300% 100% no-repeat;
  -webkit-mask-position: 82% 0; mask-position: 82% 0;
}
:root { --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 0H160Q170 6 162 12.5T158 25T164 37.5T156 50T160 62.5T152 75T156 87.5T146 100H0Z'/%3E%3C/svg%3E"); }

/* KI-Hinweis: dezent im Fuß */
footer .ai-note { color: var(--dim); font-size: 11px; }

/* ---------- Burger-Menü (nur Handy) und „nach oben“ ---------- */
.burger { position: relative; display: none; }
.burger .bars { display: inline-flex; flex-direction: column; gap: 3px; }
.burger .bars i { display: block; width: 14px; height: 1.6px; border-radius: 1px; background: currentColor; transition: transform .2s, opacity .2s; }
.burger.open .bars i:nth-child(1) { transform: translateY(4.6px) rotate(45deg); }
.burger.open .bars i:nth-child(2) { opacity: 0; }
.burger.open .bars i:nth-child(3) { transform: translateY(-4.6px) rotate(-45deg); }
.burger .menu { position: absolute; right: 0; top: 42px; display: none; flex-direction: column; gap: 8px; padding: 10px; min-width: 190px;
                border-radius: 12px; background: var(--surface); border: 1px solid var(--line); z-index: 20;
                box-shadow: 0 14px 30px rgba(0, 0, 0, .35); }
.burger .menu .key { justify-content: flex-start; width: 100%; }
.burger.open .menu { display: flex; }
.burger .menu .sep { height: 1px; margin: 2px 2px; background: var(--line); }   /* Linie zwischen Kategorien */
.burger .row2 { display: flex; gap: 8px; padding-top: 8px; margin-top: 2px; border-top: 1px solid var(--line); }
.burger .row2 .key:first-child { flex: 1; justify-content: flex-start; }
.burger .row2 .lng { min-width: 44px; }
@media (max-width: 700px) {
  .burger { display: block; }
  .nav > a.key[href="kontakt.html"], .nav > .theme, .nav > .lang { display: none; }   /* stecken im Burger-Menü */
}
html, body { overflow-x: clip; }   /* nichts darf die Seite seitlich verschiebbar machen */
.totop { position: fixed; right: 22px; bottom: 22px; width: 44px; height: 44px; padding: 0; z-index: 900; font-size: 18px;
         opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .25s, transform .25s, box-shadow 241ms, color 160ms; }
.totop.up-on { opacity: 1; pointer-events: auto; transform: none; }
@media (max-width: 700px) { .totop { right: 14px; bottom: 14px; } }

/* ---------- Projektseite (projekt-bentcorner.html) ---------- */
.project .box { max-width: 860px; }
.index .back { color: inherit; text-decoration: none; }
.index .back:hover { color: var(--text); }
.grid.facts > div { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.grid.facts span { display: block; margin-top: 3px; }
.grid > a { display: block; padding: 14px 14px 0 0; color: var(--muted); font-size: 13px; }
.grid > a b { transition: color 160ms; } .grid > a:hover b { color: var(--hi); }
.grid > a span { display: block; margin-top: 3px; }
.box h2.sec + .features { margin-top: 16px; }
.pshots { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 14px; margin-top: 46px; align-items: start; }
.pshots figure { margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--surface);
                 box-shadow: -4px -4px 10px var(--light), 6px 10px 24px rgba(0, 0, 0, .45); }
.pshots img { display: block; width: 100%; height: auto; }
.pshots.two { grid-template-columns: 336px 260px; justify-content: start; }   /* zwei hochkante Bilder, nicht aufgeblasen */
.project .row:last-child { margin-top: 56px; }
.pnote { margin-top: 10px; color: var(--dim); font-size: 12px; max-width: none; }
@media (max-width: 700px) {
  .pshots, .pshots.two { grid-template-columns: 1fr 1fr; }
  .grid.facts { grid-template-columns: 1fr; }
}

/* ---------- Startseite: Portfolio-Liste (01 Bent°Corner als EIN Knopf, 02 coming soon) ---------- */
.works { display: grid; gap: 22px; margin-top: 16px; }
.work { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 10px 22px 10px 12px;
        margin-left: -12px; border-radius: 14px; color: var(--muted); text-decoration: none;
        transition: box-shadow 241ms ease, transform 241ms cubic-bezier(.34, 1.56, .64, 1), color 160ms; }
.wnum { font: 600 64px/.86 "Barlow", sans-serif; color: var(--dim); letter-spacing: -.01em; transition: color 160ms; }
.wtext b { display: block; color: var(--text); font-weight: 500; font-size: 17px; }
.wtext > span { display: block; margin-top: 3px; font-size: 13px; }
.arr { display: inline-block; font-size: 34px; line-height: 1; color: var(--text); opacity: 0; transition: opacity 320ms ease; }   /* rechts in der Taste, mittig */   /* erst beim Drüberfahren (Platz bleibt reserviert) */
a.work:hover, a.work:focus-visible { background: var(--keygrad), var(--face);
  box-shadow: -3px -3px 6px var(--light), 3px 3px 6px var(--dark), inset 0 1px 0 var(--keyinset); }
a.work:hover .wnum, a.work:focus-visible .wnum { color: var(--text); }
a.work:hover .arr, a.work:focus-visible .arr { opacity: 1; animation: zuck 1400ms steps(1) infinite; }   /* langsam zucken */
@media (prefers-reduced-motion: reduce) { a.work:hover .arr, a.work:focus-visible .arr { animation: none; } }
a.work:active { transform: translateY(1px) scale(.99); box-shadow: inset 3px 3px 6px var(--dark), inset -3px -3px 6px var(--light);
                transition: transform 19ms, box-shadow 19ms; }
@keyframes zuck { 0% { transform: translateX(0); } 20% { transform: translateX(4px); } 30% { transform: translateX(1px); }
                  45% { transform: translateX(5px); } 60% { transform: translateX(0); } }
.work.soon .wnum { color: var(--line2); }
.work.soon .wtext b { color: var(--dim); font-weight: 400; }

/* ---------- Projektseite (project-bentcorner.html): groß, luftig, eine Spalte – Bilder dürfen breit sein ---------- */
main.case { flex: 1; width: 100%; max-width: 1160px; margin: 0 auto; padding: 72px 24px 40px; }
.case > section, .case > figure { margin-top: 140px; }
.case > .c-hero { margin-top: 0; }
.case > .c-shot.big { margin-top: 64px; }
.case > .pnote { max-width: 760px; }
.case > .pnote:first-of-type { margin-top: 28px; }
.kicker { font: 600 13px "Barlow", sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }
h2.mega { font-family: "Barlow", sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: -.005em;
          font-size: clamp(38px, 6vw, 76px); line-height: .95; margin-top: 16px; max-width: 900px; }
.c-lead { margin-top: 22px; max-width: 640px; color: var(--text2); font-size: 19px; line-height: 1.55; }
.c-note { margin-top: 26px; max-width: 560px; color: var(--muted); font-size: 14px; }
.c-hero .row { margin-top: 34px; }

/* Logo in einer Zeile: Bildmarke + Schriftzug (Logo-Runde 3) – die Karte bleibt schief, sie bewegt sich nicht */
.lockup { display: flex; align-items: center; gap: .14em; margin: 22px 0 0; font: 600 clamp(36px, 6.4vw, 92px)/1 "Barlow", sans-serif; color: var(--text);
          text-transform: uppercase; letter-spacing: .03em; }
.lmark { height: .88em; width: auto; aspect-ratio: 59 / 73.5; flex: none; overflow: visible; }
.lcard { fill: currentColor; } .lback { fill: #8a8a8e; } .lring { fill: none; stroke: var(--text); stroke-width: 3.2; } .ldot { fill: var(--text); }
.lockup .deg { color: var(--dim); }

/* App-Bilder: groß, ruhiger Rahmen */
.c-shot { margin: 0; }
.c-shot img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line);
              box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.c-shot.ph .phbox { aspect-ratio: 1400 / 874; border-radius: 14px; border: 1px dashed var(--line2); display: grid; place-items: center;
                    color: var(--dim); font: 13px var(--mono, ui-monospace, monospace); }
.c-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 48px; align-items: center; }   /* Text 25 · Bild 75 */
.c-pair.rev { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }   /* gespiegelt: Bild 75 · Text 25 */
.c-pair.rev .c-text { order: 2; }
.c-text p { margin-top: 20px; color: var(--text2); font-size: 17px; }
.c-pair h2.mega { font-size: clamp(28px, 2.9vw, 40px); }
.c-text p { font-size: 15px; }

/* Zahlen: groß, ohne Kästen */
.c-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.c-stats b { display: block; font: 600 clamp(64px, 9vw, 120px)/.9 "Barlow", sans-serif; color: var(--text); font-variant-numeric: tabular-nums; }
.c-stats span { display: block; margin-top: 10px; color: var(--muted); font-size: 14px; }

/* Bedienelemente wie in der App, beschriftet mit dem, was sie sind */
.c-ctl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ctl { min-height: 190px; display: grid; place-items: center; align-content: center; gap: 18px; border-radius: 18px; background: var(--surface);
       box-shadow: inset 2px 2px 8px var(--dark), inset -2px -2px 8px var(--light); }
.ctl.wide { grid-column: span 2; }
.c-ctl .c-note { grid-column: 1 / -1; margin-top: 10px; }
.ctl .key.big { font-size: 17px; height: 60px; padding: 0 30px; }
.ktoggle.on { color: var(--text); }
.ktoggle.on .led { background: var(--hi); box-shadow: 0 0 8px var(--glow); }
.sw { display: inline-flex; align-items: center; gap: 14px; border: 0; background: none; cursor: pointer; color: var(--muted);
      font: 500 17px "Inter", sans-serif; transition: color 160ms; }
.sw:hover { color: var(--text2); } .sw[aria-checked="true"] { color: var(--text); }
.slot { position: relative; width: 52px; height: 24px; border-radius: 12px; background: var(--surface);
        box-shadow: inset 2px 2px 5px var(--dark), inset -2px -2px 5px var(--light); }
.lamp { position: absolute; top: 7px; left: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--dim);
        transition: left 241ms cubic-bezier(.34, 1.56, .64, 1), background 160ms, box-shadow 160ms; }
.sw[aria-checked="true"] .lamp { left: 34px; background: var(--hi); box-shadow: 0 0 8px var(--glow); }
.seg { display: flex; gap: 8px; }
.seg .key { height: 48px; padding: 0 18px; font-size: 15px; }
.seg .key.on { color: var(--text); }
.stepsl { position: relative; width: min(420px, 80%); height: 44px; cursor: pointer; touch-action: none; outline: none; }
.stepsl .trk { position: absolute; left: 0; right: 0; top: 19px; height: 6px; border-radius: 3px; background: var(--surface);
               box-shadow: inset 2px 2px 4px var(--dark), inset -2px -2px 4px var(--light); }
.stepsl .hdl { position: absolute; top: 2px; left: 0; width: 40px; height: 40px; margin-left: -20px; border-radius: 10px;
               display: grid; place-items: center; font: 600 16px "Barlow", sans-serif; color: var(--text);
               background: var(--keygrad), var(--face); box-shadow: -3px -3px 6px var(--light), 3px 3px 6px var(--dark), inset 0 1px 0 var(--keyinset); }
.stepsl:focus-visible .hdl { outline: 2px solid var(--hi); outline-offset: 3px; }
.ctl-name { font: 500 15px "Inter", sans-serif; color: var(--muted); }

/* Icons */
.icons { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 34px 18px; margin-top: 34px; }
.icon { display: grid; justify-items: center; gap: 12px; cursor: pointer; color: var(--muted); font-size: 13px; }
.icon canvas { width: 52px; height: 52px; }
.icon:hover { color: var(--text); }

/* Schrift: fett und groß */
.c-type { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-items: end; }   /* volle Breite: zwei Schriften nebeneinander */
.tbig.barlow { grid-column: 1; grid-row: 2; } .tmeta.m1 { grid-column: 1; grid-row: 3; }
.tbig.inter { grid-column: 2; grid-row: 2; } .tmeta.m2 { grid-column: 2; grid-row: 3; }
.tmeta { margin-top: 26px; }
.c-type .kicker { grid-column: 1 / -1; margin-bottom: 18px; }
.tbig { font-size: clamp(130px, 27vw, 390px); line-height: .8; color: var(--text); }
.tbig.inter { font-weight: 500; }
.tmeta b { display: block; color: var(--text); font-weight: 500; font-size: 20px; }
.tmeta span { display: block; color: var(--muted); font-size: 15px; margin-top: 4px; }
.tline { grid-column: 1 / -1; margin-top: 18px; font-size: clamp(36px, 7.4vw, 96px); line-height: 1; color: var(--text2);
         white-space: nowrap; overflow: hidden; text-overflow: clip; }
.barlow { font-family: "Barlow", sans-serif; font-weight: 600; } .inter { font-family: "Inter", sans-serif; }
.tline.barlow { letter-spacing: .04em; }

/* Drei Looks der App (Farben aus ui/look.py) */
.looks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
.lk { aspect-ratio: 4 / 3; border-radius: 16px; padding: 18px; display: grid; grid-template-rows: auto 1fr auto; gap: 16px;
      --b: #0a0a0a; --s: #121212; --k: #1d1d1d; --l: #2a2a2a; --t: #ededed; --a: #e4e4e4; background: var(--b); border: 1px solid var(--l); }
.lk.light { --b: #e9e9eb; --s: #f1f1f2; --k: #e4e4e6; --l: #d2d2d6; --t: #141416; --a: #2a2a2e; }
.lk.neon { --b: #0b0e1a; --s: #111527; --k: #1b2033; --l: #2c3352; --t: #eef1ff; --a: #62f2ff; }
.lk-bar { display: flex; gap: 8px; }
.lk-bar i { width: 22%; height: 16px; border-radius: 5px; background: var(--k); box-shadow: 0 0 0 1px var(--l); }
.lk-bar i.on { box-shadow: 0 0 0 1px var(--a); }
.lk.neon .lk-bar i.on { box-shadow: 0 0 0 1px var(--a), 0 0 12px rgba(98, 242, 255, .6); }
.lk-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lk-cards i { border-radius: 6px; background: linear-gradient(160deg, #6b3a2a, #c9884c); }   /* die Karten bringen die Farbe */
.lk-cards i:nth-child(2) { background: linear-gradient(160deg, #1f3c63, #6aa3d8); }
.lk-cards i:nth-child(3) { background: linear-gradient(160deg, #23472d, #8cc27a); }
.lk.neon .lk-cards i { box-shadow: 0 0 0 1px #ff5bd6; }
.lk-lines { display: grid; gap: 8px; }
.lk-lines i { height: 8px; border-radius: 4px; background: var(--t); opacity: .8; width: 70%; }
.lk-lines i + i { width: 45%; opacity: .4; }
.looks-names { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 14px; color: var(--text2); font-size: 15px; }

/* Logo von klein bis groß */
.sizes { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-top: 34px; flex-wrap: wrap; }   /* volle Breite */
.sizes figure { margin: 0; display: grid; justify-items: center; gap: 12px; }
.sizes svg { overflow: visible; }
.sizes figcaption { font-size: 12px; color: var(--dim); }

/* SCAN° in vier Schritten */
.steps { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.steps .key .sn { font: 600 11px "Barlow", sans-serif; color: var(--dim); letter-spacing: .1em; }
.steps .key.on { color: var(--text); box-shadow: inset 3px 3px 6px var(--dark), inset -3px -3px 6px var(--light); }
.stage { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: center; margin-top: 26px; }
.sv { width: 100%; height: auto; border-radius: 18px; background: var(--surface);
      box-shadow: inset 2px 2px 8px var(--dark), inset -2px -2px 8px var(--light); }
.sv .s { opacity: 0; transition: opacity 420ms ease; }
.scan[data-step="0"] .s0, .scan[data-step="1"] .s1, .scan[data-step="2"] .s2, .scan[data-step="3"] .s3 { opacity: 1; }
.sv .frame { fill: none; stroke: var(--muted); stroke-width: 2.5; stroke-linecap: round; }
.sv .cardr { fill: var(--face); stroke: var(--line2); stroke-width: 1.5; }
.sv .art { fill: var(--line2); } .sv .txt { fill: var(--line); }
.sv .sline { fill: var(--text); opacity: .7; }
.scan.run .sline { animation: sline 1.6s ease-in-out infinite alternate; }
@keyframes sline { to { transform: translateY(134px); } }
.sv .fp rect { fill: var(--text); }
.sv .cand { fill: var(--face); stroke: var(--line2); stroke-width: 1.5; transform-box: fill-box; transform-origin: 50% 100%;
            transition: transform 420ms cubic-bezier(.34, 1.56, .64, 1); }
.sv .c2 { stroke: var(--text); stroke-width: 2.2; }
.scan[data-step="2"] .c1 { transform: rotate(-5deg); } .scan[data-step="2"] .c3 { transform: rotate(5deg); }
.sv .pct { font: 500 12px "Inter", sans-serif; fill: var(--muted); text-anchor: middle; } .sv .pct.hi { fill: var(--text); font-weight: 600; }
.sv .num { fill: var(--text); opacity: .8; }
.sv .ok { fill: var(--text); } .sv .okv { fill: none; stroke: var(--bg); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.say { display: grid; }
.say .sp { grid-area: 1 / 1; color: var(--text2); font-size: 19px; line-height: 1.55; opacity: 0; transition: opacity 420ms ease; }
.scan[data-step="0"] .sp:nth-child(1), .scan[data-step="1"] .sp:nth-child(2),
.scan[data-step="2"] .sp:nth-child(3), .scan[data-step="3"] .sp:nth-child(4) { opacity: 1; }
.case > .scan { margin-top: 30px; }

/* Orbit – wie auf bentcorner.app */
.show { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.show-text .lead { margin-top: 14px; }
.show-text .note { margin-top: 14px; }
/* ---------- Bent°Corner Orbit: Regler mit drei Stufen, Ringe um die Sammlung (orbit.js) ----------
   Nichts springt: die drei Stufentexte liegen übereinander in einer Zelle (die höchste gibt die Höhe vor), die
   Grafik hat ein festes Seitenverhältnis, Ringe und Punkte blenden nur über opacity. */
.orb-ctl { margin-top: 28px; max-width: 460px; }
.orb-ticks { display: flex; justify-content: space-between; margin-top: 8px; }
.orb-t { font: 600 12px/1.2 "Barlow", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
         background: none; border: 0; padding: 4px 0; cursor: pointer; transition: color 200ms; }
.orb-t:hover, .orb-t.on { color: var(--text); }
.orb-t:nth-child(2) { text-align: center; } .orb-t:last-child { text-align: right; }
.orb-say { display: grid; margin-top: 22px; }
.orb-lv { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 260ms, visibility 0s 260ms; }
.orb-lv.on { opacity: 1; visibility: visible; transition: opacity 260ms; }
.orb-lv b { display: block; color: var(--text); font-weight: 500; font-size: 17px; line-height: 1.4; }
.orb-lv p { margin-top: 8px; color: var(--text2); font-size: 14px; }
.orbit .note { margin-top: 18px; color: var(--dim); font-size: 13px; max-width: 560px; }

.orb-fig { width: 100%; max-width: 520px; justify-self: center; aspect-ratio: 1; }
.orb-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.orb-core { fill: var(--text); }
.orb-ghost { fill: none; stroke: var(--line2); stroke-width: 1.5; stroke-dasharray: 2 7; stroke-linecap: round; transition: opacity 420ms; }
.orbit[data-lv="1"] .g1, .orbit[data-lv="2"] .g1, .orbit[data-lv="2"] .g2 { opacity: 0; }   /* der echte Ring ersetzt den leeren */
.orb-ring { fill: none; stroke: var(--text); stroke-width: 3; stroke-linecap: round; }
.orb-gap, .orb-moon { fill: var(--text); }
.orb-in { fill: var(--line2); }   /* Preise/Märkte: kaum sichtbar */
.orb-ins { opacity: .55; }
.orb-friend { fill: none; stroke: var(--text2); stroke-width: 2.5; }
.orb-pk { fill: var(--text2); }
.orb-lab { fill: var(--dim); font: 600 13px "Barlow", sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.orb-l1, .orb-l2 { opacity: 0; transition: opacity 420ms ease; }
.orbit[data-lv="1"] .orb-l1, .orbit[data-lv="2"] .orb-l1, .orbit[data-lv="2"] .orb-l2 { opacity: 1; }
.orb-core { transition: filter 420ms; }
.orbit[data-lv="0"] .orb-core { filter: drop-shadow(0 0 18px var(--glow)); }

/* Bewegung (Mond, Preise/Märkte herein, Päckchen hinaus) zeichnet orbit.js – nur, solange die Grafik zu sehen ist */
@media (max-width: 960px) { .orb-fig { max-width: 420px; } }
@media (prefers-reduced-motion: reduce) { .orb-l1, .orb-l2, .orb-lv { transition: none; } }   /* Bewegung: orbit.js startet sie gar nicht erst */

/* Behind the scenes */
.c-labs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 64px; }
.case > .c-labs { margin-top: 60px; }
.lab b { font: 600 clamp(56px, 7vw, 92px)/.85 "Barlow", sans-serif; color: var(--line2); }
.lab h3 { margin-top: 14px; font: 600 26px "Barlow", sans-serif; text-transform: uppercase; letter-spacing: .02em; color: var(--text); }
.lab p { margin-top: 8px; color: var(--text2); font-size: 16px; max-width: 420px; }
.crew-big { margin-top: 18px; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.35; color: var(--text); max-width: 900px; }
.c-month .month { margin-top: 26px; }
.bars { width: 100%; height: auto; display: block; }
.bars .b { fill: var(--line2); transition: fill 160ms; cursor: pointer; } .bars .b:hover { fill: var(--text); }
.bars .b0 { fill: var(--line); }
.axis { display: flex; justify-content: space-between; font: 12px "Inter", sans-serif; color: var(--dim); margin-top: 8px; }
.bar-say { margin-top: 10px; min-height: 1.6em; }
.tl { list-style: none; margin-top: 46px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px; border-top: 1px solid var(--line2); }
.tl li { position: relative; padding-top: 22px; color: var(--text2); font-size: 14px; }
.tl li::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--line2); }
.tl li:last-child::before { background: var(--text); box-shadow: 0 0 8px var(--glow); }
.tl b { display: block; font: 600 13px "Barlow", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }

/* Scalper Invaders – das Original von bentcorner.app (game.js) */
.game-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 56px; align-items: start; margin-top: 30px; }
.game-wrap .lead { margin-top: 0; color: var(--text2); font-size: 17px; }
.game-wrap canvas { width: 100%; aspect-ratio: 3 / 4; display: block; border-radius: 16px; border: 1px solid var(--line); background: #0b0b0c; }
.game-wrap canvas:focus-visible { outline: 2px solid var(--hi); outline-offset: 3px; }
.game-wrap .keys { font: 13px/1.9 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--muted); margin-top: 22px; }
.game-wrap .keys b { color: var(--text2); font-weight: 500; }
.gnote { display: none; margin-top: 12px; }
.c-end { padding-bottom: 40px; }

@media (hover: none) and (pointer: coarse), (max-width: 700px) {   /* wie game.js: am Handy kein Spiel, nur der Text */
  .game-wrap { grid-template-columns: minmax(0, 1fr); }
  .game-wrap canvas { display: none; }
  .gnote { display: block; }
}
@media (max-width: 900px) {
  .case > section, .case > figure { margin-top: 96px; }
  .c-pair, .show, .stage { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .c-pair.rev { grid-template-columns: minmax(0, 1fr); } .c-pair.rev .c-text { order: 0; }
  .c-ctl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ctl.wide { grid-column: 1 / -1; }
  .icons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .looks, .looks-names { grid-template-columns: minmax(0, 1fr); }
  .looks-names { display: none; }
  .tl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .c-stats { grid-template-columns: 1fr 1fr; }
  .c-ctl { grid-template-columns: minmax(0, 1fr); }
  .c-labs { grid-template-columns: minmax(0, 1fr); }
  .c-type { grid-template-columns: minmax(0, 1fr); }
  .tbig.barlow, .tbig.inter, .tmeta.m1, .tmeta.m2 { grid-column: 1; grid-row: auto; } .tbig.inter { margin-top: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .scan.run .sline { animation: none; }
}

/* Orbit-Regler wie in der App: Griff folgt beim Ziehen, gleitet dann auf die nächste Stufe (orbit.js) */
.orb-sl { position: relative; height: 32px; cursor: pointer; touch-action: none; outline: none; }
.orb-trk { position: absolute; left: 0; right: 0; top: 13px; height: 6px; border-radius: 3px; background: var(--surface);
           box-shadow: inset 2px 2px 4px var(--dark), inset -2px -2px 4px var(--light); }
.orb-hdl { position: absolute; top: 5px; left: 50%; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: var(--text);
           box-shadow: 0 0 0 4px var(--bg), 0 0 14px var(--glow); }
.orb-sl:focus-visible .orb-hdl { outline: 2px solid var(--line2); outline-offset: 6px; }

/* Drei Looks: Umschalter über einem großen Bild – alle drei liegen übereinander, Höhe fest */
.lookkeys { margin-top: 28px; }
.lookshots { display: grid; margin-top: 22px; }
.lookshots img { grid-area: 1 / 1; opacity: 0; transition: opacity 420ms ease; }
.lookshots[data-look="gray"] img[data-look="gray"], .lookshots[data-look="light"] img[data-look="light"],
.lookshots[data-look="neon"] img[data-look="neon"] { opacity: 1; }

/* Dezente Teiler zwischen den Themen; doppelt vor den Knöpfen am Ende (dort beginnt quasi der Fuß) */
.case > hr.c-div { border: 0; height: 1px; background: var(--line); margin: 140px 0 0; }
.case > hr.c-div + section, .case > hr.c-div + figure { margin-top: 72px; }
.case > hr.c-div.double { height: 5px; background: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (max-width: 900px) { .case > hr.c-div { margin-top: 96px; } .case > hr.c-div + section { margin-top: 56px; } }

/* Stand der Seite: „Ongoing · Snapshot after 30 days“ – gut sichtbar unter dem Logo */
.snap { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; }
.snap-pill { display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 14px; border-radius: 999px;
             background: var(--keygrad), var(--face); box-shadow: -3px -3px 6px var(--light), 3px 3px 6px var(--dark), inset 0 1px 0 var(--keyinset);
             font: 600 12px "Barlow", sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--text); }
.snap-pill .led { width: 6px; height: 6px; border-radius: 50%; background: var(--hi); box-shadow: 0 0 8px var(--glow); animation: puls 2.4s ease-in-out infinite; }
@keyframes puls { 50% { opacity: .35; } }
.snap-txt { font: 600 clamp(16px, 1.8vw, 20px) "Barlow", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--text2); }
.snap-note { margin-top: 12px; max-width: 640px; color: var(--muted); font-size: 15px; }
.c-hero .c-lead { margin-top: 26px; }
@media (prefers-reduced-motion: reduce) { .snap-pill .led { animation: none; } }

/* Logo 30.10.: Wort-Bildmarke in einer Farbe; Logo-Leiter mit Pixelmarken (16–24 px, 2 Bit, je Thema ein Bild) */
.lockup .lword { color: var(--text); }
.pxm { display: block; width: var(--px); height: var(--px); }
.pxm img { display: block; image-rendering: pixelated; }
.pxm .pl { display: none; }
:root[data-theme="light"] .pxm .pd { display: none; } :root[data-theme="light"] .pxm .pl { display: block; }

/* Logo gestapelt (Stufen, 31.10.): Karte mit Ring von linker Kante B bis Ende E, darunter BENT / CORNER gleich groß.
   Maße in em der Schrift (gemessen): Karte 1.146 em breit, 0.056 em eingerückt; Abstand Karte–BENT = halbe °-Breite. */
h1.stack { display: grid; justify-items: start; font-family: "Barlow", sans-serif; font-weight: 600; line-height: .86; letter-spacing: .02em;
           text-transform: uppercase; color: var(--text); margin: 22px 0 26px; }
.smark { display: block; width: 1.146em; height: 1.492em; margin: 0 0 .15em .056em; overflow: visible; }
.smark .lcard { fill: currentColor; } .smark .lback { fill: #8a8a8e; }
.smark .sring { fill: none; stroke: currentColor; stroke-width: 3.2; }
h1.stack .stw { display: block; white-space: nowrap; }
/* Idle: die Karte schwebt ruhig auf und ab, der Ring zieht etwas verzögert nach – nur transform, verschiebt nichts */
.smark { animation: sfloat 3.3s ease-in-out infinite; will-change: transform; }
.smark .sring { animation: sring 3.3s ease-in-out -.5s infinite; }
@keyframes sfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.075em); } }
@keyframes sring { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.6px; } }
/* Hover: der Ring dreht sich wie ein Sonic-Ring zweimal auf die Kante – nur die Breite schrumpft, der Strich bleibt dick:
   auf der Kante ist er ein Drittel so breit wie hoch (4.5 von 13.6), wirkt also wie ein Ring mit Tiefe */
@media (hover: hover) and (prefers-reduced-motion: no-preference) { h1.stack:hover .smark .sring { animation: sring 3.3s ease-in-out -.5s infinite, sspin .6s linear 2; } }
@keyframes sspin {   /* Breite ~ cos(Winkel): zur Kante hin schneller, zur vollen Breite hin langsamer */
  0% { rx: 5.2px; animation-timing-function: cubic-bezier(.12, 0, .39, 0); }
  50% { rx: .65px; animation-timing-function: cubic-bezier(.61, 1, .88, 1); }
  100% { rx: 5.2px; } }
@media (prefers-reduced-motion: reduce) { .smark, .smark .sring { animation: none; } }
h1.stack { font-size: clamp(54px, 5.8vw, 86px); margin-top: 26px; margin-bottom: 0; }
@media (max-width: 700px) { h1.stack { font-size: 15vw; } }