/* =========================================================
   Knut Hoberg, private Seite
   Dark-Theme-Lock, Markenfarben Charcoal / Burnt Orange / warmes Grau,
   ein Radius-System:
   Flaechen 14px, interaktive Elemente Pille.
   ========================================================= */

@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;
  src:url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;
  src:url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  --bg:#0a0b0d;            /* Charcoal, Basis */
  --text:#eeebe7;          /* warmes Off-White */
  --muted:#9e9188;         /* warmes Grau aus dem Logo-Entwurf, Sekundaer */
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.06);
  --surface:rgba(21,21,23,.8);
  --accent:#e2653a;        /* Burnt Orange, Akzent */
  --accent-soft:#ee8661;
  --ink:#0a0b0d;

  --radius:14px;
  --shell:1320px;
  --gap:clamp(.9rem,1.6vw,1.4rem);
  --section-y:clamp(6rem,13vw,11rem);

  --portrait-opacity:.15;
  --portrait-scale:1.06;
  --portrait-bright:.8;     /* waechst beim Scrollen mit der Deckkraft */
  --scrim-opacity:1;        /* Abdunkler hinter dem Text, lichtet sich zum Schluss */

  --z-bg:0; --z-content:10; --z-bar:40; --z-grain:60;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Space Grotesk',ui-sans-serif,system-ui,'Segoe UI',sans-serif;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,p{margin:0}
img{max-width:100%;display:block}
::selection{background:var(--accent);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent-soft);outline-offset:3px;border-radius:4px}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,3.5rem)}

/* ---------- Hintergrundebenen: Foto, WebGL-Gitter, Scrim ---------- */
.backdrop{position:fixed;inset:0;z-index:var(--z-bg);pointer-events:none;overflow:hidden}
.backdrop__portrait{
  position:absolute;inset:0;
  background-image:url('../img/portrait.jpg');
  background-repeat:no-repeat;
  /* schmale Schirme: Bild fuellt die Flaeche, Blende von oben nach unten */
  background-size:cover;
  background-position:50% 22%;
  filter:grayscale(1) contrast(1.14) brightness(var(--portrait-bright));
  opacity:var(--portrait-opacity);
  transform:scale(var(--portrait-scale));
  transform-origin:95% 18%;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 46%,transparent 80%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 46%,transparent 80%);
}
.backdrop__portrait::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(210deg,rgba(226,101,58,.30),rgba(10,11,13,0) 58%);
  mix-blend-mode:overlay;
}
.backdrop__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:1}
.backdrop__scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(90% 60% at 18% 0%,rgba(226,101,58,.07),transparent 60%),
    linear-gradient(180deg,rgba(10,11,13,.20) 0%,rgba(10,11,13,.62) 52%,rgba(10,11,13,.93) 100%);
  opacity:var(--scrim-opacity);
}
.grain{
  position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;opacity:.30;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

main,.topbar,.footer{position:relative;z-index:var(--z-content)}

/* ---------- Kopfzeile ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-bar);
  height:66px;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding-inline:clamp(1.25rem,4vw,3.5rem);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:linear-gradient(180deg,rgba(10,11,13,.78),rgba(10,11,13,.18));
  border-bottom:1px solid var(--line-soft);
  will-change:transform;
}

/* ---------- Marke KH (eigener Entwurf, freigestellt aus dem Original) ---------- */
.brand{display:inline-flex;align-items:center;gap:.85rem}
.brand__mark{height:26px;width:auto;display:block;flex:none}
.brand--small .brand__mark{height:20px}
.brand .wordmark{font-weight:500;font-size:.86rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.brand--small .wordmark{font-size:.78rem}
/* Kontaktadresse: erscheint bei Mouseover, Fokus oder Antippen (.is-open). Kein Link, nur Text. */
.brand{position:relative;cursor:default;border-radius:6px}
.brand__contact{
  position:absolute;left:100%;top:50%;padding-left:.85rem;   /* nimmt keinen Platz, Hover nur auf Logo + Name */
  display:inline-flex;align-items:center;gap:.85rem;white-space:nowrap;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.78rem;letter-spacing:.02em;
  color:var(--accent);user-select:text;
  opacity:0;transform:translate(-6px,-50%);pointer-events:none;
  transition:opacity .3s ease,transform .35s cubic-bezier(.16,1,.3,1);
}
.brand__contact::before{content:"";width:1px;height:14px;background:var(--line)}
.brand--small .brand__contact{font-size:.72rem}
.brand:hover .brand__contact,.brand:focus-visible .brand__contact,.brand.is-open .brand__contact{
  opacity:1;transform:translate(0,-50%);pointer-events:auto;
}
.brand .wordmark{transition:opacity .25s ease}
.topbar__note{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ---------- Typografie ---------- */
.eyebrow{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);
  margin-bottom:1.1rem;
}
.section__head{
  font-size:clamp(1.85rem,1.1rem + 2.6vw,3.1rem);
  line-height:1.08;letter-spacing:-.03em;font-weight:500;
  max-width:18ch;margin-bottom:clamp(2.5rem,5vw,4rem);
}

/* ---------- Hero ---------- */
.hero{
  min-height:100dvh;display:grid;align-content:center;
  padding:6rem clamp(1.25rem,4vw,3.5rem) clamp(4rem,8vw,7rem);
}
.hero__inner{width:100%;max-width:var(--shell);margin-inline:auto}
.hero__title{
  font-size:clamp(2.4rem,1rem + 5.6vw,5rem);
  line-height:1.04;letter-spacing:-.045em;font-weight:700;
  max-width:23ch;
}
.mask{display:block;overflow:hidden;padding-bottom:.06em}
.mask__i{display:block;will-change:transform}
.hero__sub{
  margin:clamp(1.4rem,2.6vw,2rem) 0 clamp(2rem,3.4vw,2.8rem);
  color:var(--muted);max-width:46ch;font-size:clamp(1.02rem,.98rem + .35vw,1.22rem);
}
.btn{
  font:inherit;font-weight:500;
  display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap;
  padding:.86rem 1.6rem;border-radius:999px;border:1px solid transparent;
  background:var(--accent);color:var(--ink);cursor:pointer;
  transition:transform .25s cubic-bezier(.16,1,.3,1),background-color .25s ease;
  box-shadow:0 10px 30px rgba(226,101,58,.16);
}
.btn::after{content:"";width:16px;height:1px;background:currentColor;opacity:.7;transition:width .25s cubic-bezier(.16,1,.3,1)}
.btn:hover{background:var(--accent-soft);transform:translateY(-2px)}
.btn:hover::after{width:26px}
.btn:active{transform:translateY(0) scale(.985)}

/* ---------- Statement ---------- */
.statement{padding-block:var(--section-y)}
.statement__head{
  font-size:clamp(1.7rem,1rem + 2.3vw,2.85rem);
  line-height:1.14;letter-spacing:-.03em;font-weight:500;max-width:20ch;
  margin-bottom:clamp(1.8rem,3vw,2.6rem);
}
.statement__body{color:var(--muted);max-width:58ch;font-size:clamp(1.05rem,1rem + .4vw,1.26rem);line-height:1.7}
.statement__body .word{display:inline-block;will-change:transform,opacity}

/* ---------- Bento ---------- */
.fields{padding-block:var(--section-y)}
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.tile{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);
  padding:clamp(1.4rem,2.2vw,2rem);
  min-height:190px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:.7rem;
  transition:border-color .3s ease,transform .4s cubic-bezier(.16,1,.3,1);
}
/* Touch kennt kein Mouseover: dort setzt tiles.js .is-focus auf die Kachel in der Bildschirmmitte */
@media (hover:hover){.tile:hover{border-color:rgba(226,101,58,.42);transform:translateY(-3px)}}
.tile.is-focus{border-color:rgba(226,101,58,.42);transform:translateY(-3px)}
.tile h3{font-size:clamp(1.12rem,1rem + .5vw,1.5rem);font-weight:500;letter-spacing:-.02em}
.tile p{color:var(--muted);font-size:.95rem;line-height:1.55;max-width:42ch}
/* Link in einer Kachel, fuehrt zur Galerie */
.tile__link{
  margin-top:1rem;align-self:flex-start;text-decoration:none;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);display:inline-flex;align-items:center;gap:.65rem;
  transition:color .25s ease;
}
.tile__link::after{content:"";width:18px;height:1px;background:currentColor;transition:width .25s cubic-bezier(.16,1,.3,1)}
.tile__link:hover{color:var(--accent-soft)}
.tile__link:hover::after{width:30px}
.tile--lead{grid-column:span 2;grid-row:span 2;min-height:400px}
.tile--lead h3{font-size:clamp(1.6rem,1.1rem + 1.6vw,2.4rem)}
.tile--lead p{font-size:1.03rem;max-width:34ch}
.tile--wide{grid-column:span 2}
/* Obsidian-Kachel: Graph des eigenen Vaults, ohne Notiztitel neu gezeichnet. Oben sichtbar,
   unter Ueberschrift, Text und Liste fast deckend abgedunkelt. */
.tile--notes .tile__media{opacity:.6;object-position:50% 30%;filter:blur(.3px)}
.tile--notes:has(.tile__media)::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,11,13,.3) 0%,rgba(10,11,13,.62) 28%,rgba(10,11,13,.93) 46%,rgba(10,11,13,.96) 100%);
}
/* Kleine Kacheln mit Motiv (n8n, Python): Motiv oben rechts sichtbar,
   unten links, wo der Text steht, fast deckend abgedunkelt. */
.tile--soft .tile__media{opacity:.55;object-position:100% 0%}
.tile--soft:has(.tile__media)::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(205deg,rgba(10,11,13,.08) 0%,rgba(10,11,13,.5) 34%,rgba(10,11,13,.9) 60%,rgba(10,11,13,.95) 100%);
}
/* Aufgabenliste in der Obsidian-Kachel: 2x2, nur Haarlinien oben, keine Punkte */
.tile__list{
  list-style:none;margin:.9rem 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:.2rem 1.4rem;max-width:34rem;
}
.tile__list li{
  padding:.7rem 0 .15rem;border-top:1px solid var(--line);
  font-size:.95rem;line-height:1.35;color:var(--text);
}
.tile > *{position:relative;z-index:1}

/* Hover-Szene (tiles.js): Canvas liegt ueber Bild und Textur, unter Text und Abdunkler.
   Waehrend .is-live tritt die statische Ebene zurueck, danach kehrt sie sanft wieder. */
.tile > .tile__scene{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0}
.tile__media,.tile--data::before,.tile--warm::before{transition:opacity .5s ease}
.tile::after{transition:opacity .5s ease}
.tile.is-live > .tile__media{opacity:.18}
.tile--data.is-live::before{opacity:0}
.tile--warm.is-live::before{opacity:.35}
.tile--soft.is-live:has(.tile__media)::after{opacity:.8}
.tile--notes.is-live:has(.tile__media)::after{opacity:.4}
/* Data und ML haben keinen Abdunkler: ein weicher Grund unter dem Text haelt ihn lesbar */
.tile--data::after,.tile--warm::after,.tile[data-scene="gemini"]::after{
  content:"";position:absolute;inset:0;opacity:0;pointer-events:none;
  background:linear-gradient(20deg,rgba(10,11,13,.9) 0%,rgba(10,11,13,.65) 42%,rgba(10,11,13,0) 76%);
}
.tile--data.is-live::after,.tile--warm.is-live::after,.tile[data-scene="gemini"].is-live::after{opacity:1}

/* Claude-Code-Kachel: KI-Kopf als Bild, dezent in Bewegung (Atmen, Leuchten, Neigung zur Maus) */
.tile__head{position:absolute;inset:0;z-index:0;pointer-events:none;perspective:700px;overflow:hidden}
.tile__head-in{position:absolute;inset:0;will-change:transform}
.tile__head img{
  position:absolute;right:-4%;top:-9%;height:128%;width:auto;max-width:none;
  filter:saturate(.8) brightness(.95);
  -webkit-mask-image:radial-gradient(closest-side at 50% 52%,#000 58%,transparent 100%);
  mask-image:radial-gradient(closest-side at 50% 52%,#000 58%,transparent 100%);
}
.tile--head::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(98deg,rgba(10,11,13,.96) 0%,rgba(10,11,13,.82) 42%,rgba(10,11,13,.25) 74%,rgba(10,11,13,0) 100%);
}
@media (prefers-reduced-motion:no-preference){
  .tile__head img{animation:headDrift 18s ease-in-out infinite alternate,headGlow 6s ease-in-out infinite alternate}
}
@keyframes headDrift{from{transform:translate(-2px,2px) scale(1)}to{transform:translate(3px,-3px) scale(1.045)}}
@keyframes headGlow{from{filter:saturate(.8) brightness(.88)}to{filter:saturate(.85) brightness(1.12)}}

/* Kachel-Texturen: sichtbare Varianz statt sieben gleicher Kaesten */
.tile--data::before{
  content:"";position:absolute;inset:0;opacity:1;
  background-image:
    radial-gradient(circle at 22% 26%,rgba(226,101,58,.9) 0 2.4px,transparent 3.2px),
    radial-gradient(circle at 61% 14%,rgba(226,101,58,.6) 0 2px,transparent 2.8px),
    radial-gradient(circle at 84% 40%,rgba(255,255,255,.75) 0 1.8px,transparent 2.6px),
    radial-gradient(circle at 38% 54%,rgba(255,255,255,.5) 0 1.8px,transparent 2.6px),
    radial-gradient(circle at 72% 62%,rgba(226,101,58,.45) 0 1.6px,transparent 2.4px),
    radial-gradient(circle at 14% 48%,rgba(255,255,255,.4) 0 1.4px,transparent 2.2px),
    radial-gradient(110% 90% at 82% 4%,rgba(226,101,58,.16),transparent 62%),
    linear-gradient(rgba(255,255,255,.085) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.085) 1px,transparent 1px);
  background-size:100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,46px 46px,46px 46px;
  -webkit-mask-image:linear-gradient(198deg,#000 4%,rgba(0,0,0,.45) 52%,transparent 84%);
  mask-image:linear-gradient(198deg,#000 4%,rgba(0,0,0,.45) 52%,transparent 84%);
}
.tile--warm::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 140% at 92% 8%,rgba(226,101,58,.26),transparent 58%),
    linear-gradient(140deg,rgba(255,255,255,.06),transparent 46%);
}
.tile--glass{
  background:rgba(16,17,19,.42);
  backdrop-filter:blur(3px) saturate(130%);-webkit-backdrop-filter:blur(3px) saturate(130%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.tile--glass::before{
  content:"";position:absolute;inset:-20%;
  background:conic-gradient(from 210deg at 72% 26%,rgba(226,101,58,.34),rgba(255,255,255,.06) 26%,transparent 52%,rgba(226,101,58,.18) 82%,rgba(226,101,58,.34));
  filter:blur(26px);opacity:.72;
}
/* Bildebene in einer Kachel. Fehlt die Datei, entfernt sich das img selbst
   und die Kachel faellt auf den Farbverlauf darunter zurueck. */
.tile__media{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 26%;
  opacity:.7;
  z-index:0;            /* sonst erbt das Bild z-index 1 von .tile > * und liegt ueber dem Abdunkler */
}
.tile--glass:has(.tile__media)::before{opacity:.3}
.tile--glass:has(.tile__media) p{max-width:34ch}
.tile--glass:has(.tile__media)::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(10,11,13,.94) 0%,rgba(10,11,13,.86) 44%,rgba(10,11,13,.45) 74%,rgba(10,11,13,0) 100%);
}

/* ---------- k-Means zum Ausprobieren (kmeans.js) ---------- */
.sort{padding-block:var(--section-y)}
.sort__grid{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.sort__text .section__head{margin-bottom:clamp(1.4rem,2.6vw,2rem)}
.sort__body{color:var(--muted);max-width:44ch;font-size:clamp(1.02rem,.98rem + .3vw,1.15rem);line-height:1.7}
.sort__note{
  margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--line);max-width:44ch;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.78rem;line-height:1.65;color:var(--muted);
}
.sort__lab{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  padding:clamp(.75rem,1.4vw,1.1rem);display:flex;flex-direction:column;gap:.9rem;
}
.sort__canvas{
  display:block;width:100%;aspect-ratio:16/11;border-radius:calc(var(--radius) - 6px);
  background:rgba(10,11,13,.92);cursor:crosshair;touch-action:pan-y;
}
.sort__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.7rem 1.2rem}
.sort__k,.sort__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.sort__label{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.78rem;color:var(--muted);margin-right:.25rem}
.sort__status{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.74rem;letter-spacing:.02em;color:var(--muted);
  min-height:1.6em;padding-inline:.15rem;
}
/* kleine Pillen-Schalter, Radius-System: interaktiv = Pille */
.chip{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.74rem;letter-spacing:.02em;
  min-width:2.2rem;padding:.48rem .85rem;border-radius:999px;cursor:pointer;
  background:transparent;color:var(--text);border:1px solid var(--line);
  transition:border-color .25s ease,color .25s ease,background-color .25s ease;
}
.chip:hover{border-color:rgba(226,101,58,.5)}
.chip[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);background:rgba(226,101,58,.08)}
.chip:disabled{opacity:.4;cursor:default;border-color:var(--line)}
.btn--small{padding:.55rem 1.1rem;font-size:.86rem;box-shadow:none}
@media (min-width:900px){
  .sort__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .sort__text{position:sticky;top:7rem}
}

/* ---------- Ablauf, horizontaler Schwenk ---------- */
.flow{padding-block:var(--section-y)}
.flow__head{margin-bottom:clamp(2rem,4vw,3rem)}
.flow__head .section__head{margin-bottom:0}
.flow__track{
  display:flex;flex-direction:column;gap:var(--gap);
  padding-inline:clamp(1.25rem,4vw,3.5rem);
}
.panel{
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(160deg,rgba(25,25,28,.86),rgba(14,15,17,.9));
  padding:clamp(1.6rem,2.6vw,2.4rem);
  display:flex;flex-direction:column;justify-content:flex-end;gap:.7rem;
}
.panel h3{font-size:clamp(1.4rem,1.1rem + 1.1vw,2rem);font-weight:500;letter-spacing:-.025em}
.panel p{color:var(--muted);max-width:34ch}

/* Motive der Panels: in Ruhe nur als Skizze angedeutet. Bei Hover (Touch: .is-focus aus
   motion.js) laeuft die Zeichnung einmal ab, beim Verlassen zurueck. Alles haengt an --on
   (0 oder 1), so nutzen Maus und Touch dieselben Regeln. Beim Einschalten greifen die
   Verzoegerungen aus --d, beim Ausschalten laeuft alles ohne Wartezeit zurueck. */
.panel{--on:0;transition:border-color .3s ease}
.fig{
  display:block;width:clamp(116px,9.5vw,150px);height:auto;margin-bottom:.6rem;overflow:visible;
  --sketch:rgba(158,145,136,.34);
}
.fig *{fill:none;stroke:var(--sketch);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.fig .fig__dash{stroke-dasharray:2 4}
.fig .fig__head{stroke-width:2.4}
.fig .fig__dot{fill:var(--sketch);stroke:none}
/* Tinte zeichnet sich ueber die Skizze. pathLength="1" im SVG, 1.05 statt 1 laesst
   in Ruhe keinen runden Linienkopf am Pfadanfang stehen. */
.fig .fig__ink{
  stroke:var(--accent);stroke-dasharray:1px 2px;
  stroke-dashoffset:calc((1 - var(--on)) * 1.05px);
  transition:stroke-dashoffset calc(.4s + var(--on) * .5s) cubic-bezier(.65,0,.35,1) calc(var(--on) * var(--d,0) * 1s);
}
.fig .fig__ink--soft{stroke:rgba(238,235,231,.55)}
.fig .fig__pop{
  fill:var(--accent);stroke:none;transform-box:fill-box;transform-origin:center;
  transform:scale(var(--on));
  transition:transform .45s cubic-bezier(.16,1,.3,1) calc(var(--on) * var(--d,0) * 1s);
}
/* Daten sortieren: Balken rutschen um --dx auf ihren Platz */
.fig .fig__bar{
  fill:rgba(158,145,136,calc(.34 + var(--on) * .26));stroke:none;
  transform:translateX(calc(var(--dx,0px) * var(--on)));
  transition:transform calc(.4s + var(--on) * .3s) cubic-bezier(.65,0,.35,1) calc(var(--on) * (.45s + var(--d,0) * .06s)),fill .5s ease;
}
.fig .fig__drop{
  transform:translateY(calc(var(--on) * 8px));opacity:calc(1 - var(--on));
  transition:transform .5s cubic-bezier(.65,0,.35,1) calc(var(--on) * .3s),opacity .45s ease calc(var(--on) * .3s);
}
.fig .fig__flag{fill:var(--accent);stroke:none;opacity:var(--on);transition:opacity .25s ease}
/* Automatisieren: Knoten sind gefuellt, das Paket verschwindet darin und taucht wieder auf */
.fig .fig__node{fill:#0f1012;stroke:rgba(158,145,136,calc(.34 + var(--on) * .3));transition:stroke .4s ease}
.fig .fig__packet{opacity:var(--on);transition:opacity .3s ease calc(var(--on) * .7s)}
.fig .fig__packet circle{fill:var(--accent);stroke:none;animation:figFlow 2.6s cubic-bezier(.45,0,.55,1) infinite paused}
@keyframes figFlow{to{transform:translateX(96px)}}
@media (prefers-reduced-motion:no-preference){
  .panel.is-focus{--on:1;border-color:rgba(226,101,58,.42)}
  .panel.is-focus .fig__packet circle{animation-play-state:running}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .panel:hover{--on:1;border-color:rgba(226,101,58,.42)}
  .panel:hover .fig__packet circle{animation-play-state:running}
}

/* ---------- Schluss ---------- */
.closing{padding-block:clamp(8rem,18vw,15rem)}
.closing__line{
  font-size:clamp(1.9rem,1rem + 3.4vw,4rem);
  line-height:1.1;letter-spacing:-.035em;font-weight:500;max-width:16ch;
}
.closing__line--accent{color:var(--accent)}

/* ---------- Fuss ---------- */
.footer{border-top:1px solid var(--line-soft);padding-block:2.2rem}
.footer__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.footer__meta{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---------- Reveal-Grundzustaende, nur mit aktivem JS ---------- */
.js .reveal{opacity:0;transform:translateY(22px)}
.js .mask__i{transform:translateY(105%)}
/* .is-in setzt motion.js nach dem Einblenden, dann ist transform frei fuer das Anheben bei Hover/Fokus */
.js [data-tile]:not(.is-in){opacity:0;transform:translateY(26px)}
.js .topbar .brand__mark{clip-path:inset(0 100% 0 0)}

/* ---------- Breakpoints ---------- */
@media (min-width:900px){
  .backdrop__portrait{
    background-size:auto 116%;
    background-position:95% 9%;
    -webkit-mask-image:linear-gradient(90deg,transparent 38%,rgba(0,0,0,.45) 55%,#000 72%,#000 82%,transparent 97%);
    mask-image:linear-gradient(90deg,transparent 38%,rgba(0,0,0,.45) 55%,#000 72%,#000 82%,transparent 97%);
  }
  .flow__track{
    flex-direction:row;align-items:stretch;
    gap:clamp(1.2rem,2vw,2rem);
    width:max-content;
  }
  .panel{width:clamp(290px,32vw,560px);min-height:min(48vh,400px)}
  /* drei Textzeilen Platz, damit die Ueberschriften aller Panels auf einer Hoehe stehen */
  .panel p{min-height:calc(1.6em * 3)}
  .fig{margin-bottom:auto}       /* Motiv oben, Text bleibt unten */
  .flow.is-pinned{padding-block:0}
  .flow.is-pinned .flow__pin{
    min-height:100dvh;display:flex;flex-direction:column;justify-content:center;
    gap:clamp(2rem,4vw,3.5rem);overflow:hidden;
  }
  .flow.is-pinned .flow__head{margin-bottom:0}
}
@media (max-width:899px){
  .tile--notes:has(.tile__media){min-height:380px}
  /* Schmale Kachel: Bild als Band oben, Text darunter auf fast deckendem Grund */
  .tile--glass:has(.tile__media){min-height:250px}
  .tile--glass .tile__media{opacity:.75;object-position:50% 34%}
  .tile--glass:has(.tile__media) p{max-width:none}
  .tile--glass:has(.tile__media)::after{
    background:linear-gradient(180deg,rgba(10,11,13,0) 0%,rgba(10,11,13,.25) 26%,rgba(10,11,13,.86) 46%,rgba(10,11,13,.94) 60%,rgba(10,11,13,.94) 100%);
  }
  .bento{grid-template-columns:repeat(2,1fr)}
  .tile--lead{grid-column:span 2;grid-row:span 1;min-height:260px}
  .tile--wide{grid-column:span 2}
  .flow__track{padding-inline:0}
}
@media (max-width:640px){
  .bento{grid-template-columns:1fr}
  .tile,.tile--lead,.tile--wide{grid-column:span 1;min-height:0}
  .tile__list{grid-template-columns:1fr}
  .brand__contact{left:calc(39px + .85rem);padding-left:0;transform:translateY(-30%)}
  .brand--small .brand__contact{left:calc(30px + .85rem)}
  .brand__contact::before{display:none}
  .brand:hover .brand__contact,.brand:focus-visible .brand__contact,.brand.is-open .brand__contact{transform:translateY(-50%)}
  .brand:hover .wordmark,.brand:focus-visible .wordmark,.brand.is-open .wordmark{opacity:0}
  .tile--soft:has(.tile__media){min-height:200px}
  .tile--notes:has(.tile__media){min-height:470px}
  .topbar__note{display:none}
  .backdrop__portrait{background-position:50% 18%;opacity:calc(var(--portrait-opacity) * .8)}
  .hero{padding-top:5rem}
}

/* ---------- Konsole, verstecktes Extra (konsole.js, Taste /) ---------- */
.konsole{
  position:fixed;left:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:45;
  width:min(560px,calc(100vw - 2rem));
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--radius);
  background:rgba(10,11,13,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.8rem;line-height:1.6;
  opacity:0;transform:translateY(10px);
  transition:opacity .2s ease,transform .25s cubic-bezier(.16,1,.3,1);
}
.konsole[hidden]{display:none}
.konsole.is-open{opacity:1;transform:none}
.konsole__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:.55rem .9rem;border-bottom:1px solid var(--line-soft);
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.konsole__x{
  font:inherit;letter-spacing:.12em;color:var(--muted);background:none;cursor:pointer;
  border:1px solid var(--line);border-radius:999px;padding:.1rem .6rem;
}
.konsole__x:hover{color:var(--accent);border-color:rgba(226,101,58,.5)}
.konsole__out{max-height:min(42vh,320px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(158,145,136,.35) transparent;padding:.7rem .9rem 0;color:var(--text);overscroll-behavior:contain}
.konsole__row{white-space:pre-wrap;word-break:break-word}
.konsole__row--cmd{color:var(--muted)}
.konsole__row--dim{color:var(--muted)}
.konsole__row--err{color:var(--accent-soft)}
.konsole__row--acc{color:var(--accent)}
.konsole__line{display:flex;align-items:center;gap:.6rem;padding:.6rem .9rem .8rem}
.konsole__prompt{color:var(--accent);white-space:nowrap}
.konsole__in{
  flex:1;min-width:0;font:inherit;color:var(--text);caret-color:var(--accent);
  background:transparent;border:0;outline:0;padding:0;
}
.konsole__in:focus-visible{outline:0}
@media (prefers-reduced-motion:reduce){.konsole{transition:none}}
@media (prefers-reduced-transparency:reduce){.konsole{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(10,11,13,.98)}}

/* ---------- Seitenwechsel zur Galerie (View Transitions) ----------
   Die Kachel "Stable Diffusion" waechst ins Vollbild, wird zu Charcoal und gibt die
   Galerie frei. Die Kachel bekommt ihren Namen erst beim Klick (motion.js, pageswap),
   auf der Galerie steht ihr Gegenstueck als unsichtbare Flaeche (.gal__veil).
   Laeuft nur ueber http(s), nicht beim Oeffnen per Doppelklick. Ohne Unterstuetzung
   wechselt die Seite wie bisher. */
@view-transition{navigation:auto}
.topbar{view-transition-name:kopf}
::view-transition-group(root),::view-transition-group(kopf){animation-duration:.6s;animation-timing-function:cubic-bezier(.65,0,.35,1)}
::view-transition-group(galerie){animation-duration:.8s;animation-timing-function:cubic-bezier(.65,0,.35,1)}
::view-transition-old(galerie){animation:vtOut .4s ease both}
::view-transition-new(galerie){animation:vtVeil .8s ease both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtVeil{0%{opacity:0}35%{opacity:1}70%{opacity:1}100%{opacity:0}}
.gal__veil{position:fixed;inset:0;z-index:-1;background:var(--bg);pointer-events:none;view-transition-name:galerie}

/* ---------- Zugaenglichkeit ---------- */
@media (prefers-reduced-motion:reduce){
  .js .reveal,.js [data-tile]:not(.is-in){opacity:1;transform:none}
  .js .mask__i{transform:none}
  .js .topbar .brand__mark{clip-path:none}
  .btn,.tile{transition:none}
  .brand__contact{transition:opacity .2s ease}
  .grain{opacity:.18}
}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
}
@media (prefers-reduced-transparency:reduce){
  .topbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(10,11,13,.94)}
  .tile--glass{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(21,21,23,.86)}
}