/* Dipha – Variante A3 „Logistik“
   Farben aus dem Dipha-Dashboard (tokens.css, Farbgrund.tsx, avatar-farben.css).
   Bewegung nur über transform und opacity. */

@font-face { font-family: "Suisse"; src: url("fonts/SuisseIntl-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Suisse"; src: url("fonts/SuisseIntl-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Suisse Mono"; src: url("fonts/SuisseIntlMono-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }

:root {
  --canvas: #F1EFE8;
  --surface: #FDFCF8;
  --surface-3: #E9E6DC;
  --ink: #1E1C19;
  --ink-2: #5C5953;
  --ink-3: rgba(30, 28, 25, .42);
  --line: rgba(30, 28, 25, .12);
  --ring: 0 0 0 1px rgba(30, 28, 25, .09);
  --amber: #E3A23C;
  --dunkel: #1E1C19;
  --hell-1: #F2F0EB;
  --hell-2: #B5AFA5;

  /* Farbgrund-Blasen der Übersicht (helle Fassung) */
  --b-braun: #854F0B;
  --b-gelb: #F5E985;
  --b-gruen: #4ADE80;
  --b-rose: #E8A0A0;
  --b-himmel: #9FC9E8;

  /* Eine Farbe je Station */
  --c-anfrage: #9FC9E8;
  --c-angebot: #F5E985;
  --c-projekt: #8BE3A6;
  --c-uebergabe: #E8A0A0;
  --c-abrechnung: #E3A23C;

  /* Illustrationen (Token aus tokens.css) */
  --illu-line: var(--ink);
  --illu-fill: var(--surface-3);
  --illu-fill-light: var(--surface);
  --illu-accent: var(--amber);
  --illu-ground: var(--surface-3);

  /* Schriftstufen: eine Leiter für die ganze Seite */
  --fs-h1: clamp(54px, 9.8vw, 156px);
  --fs-h2: clamp(38px, 4.6vw, 68px);
  --fs-h3: clamp(26px, 2.6vw, 38px);
  --fs-h4: 18px;
  --fs-lead: clamp(17px, 1.35vw, 20px);
  --fs-body: 18px;
  --fs-small: 16px;
  --fs-label: 11px;
  --fs-micro: 10px;
  --fs-wm: 18px;

  --wrap: 1312px;
  --pad: clamp(20px, 4.4vw, 64px);
  --head-h: 68px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--head-h); }
body {
  background: var(--canvas); color: var(--ink);
  font: 400 var(--fs-body)/1.55 "Suisse", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
a { color: inherit; }
img, video { display: block; max-width: 100%; }
ul { list-style: none; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.mono {
  font-family: "Suisse Mono", ui-monospace, monospace;
  font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; line-height: 1.4; font-weight: 400;
}
p { text-wrap: pretty; }
.illu {
  display: block; flex: none; fill: none;
  stroke: var(--illu-line); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
h2 { font-weight: 500; font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -.04em; text-wrap: balance; }
h3 { font-weight: 500; font-size: var(--fs-h3); line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }

/* ---------- Wortmarke: überall dieselbe ---------- */
.wortmarke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.wortmarke .wm { font-weight: 500; font-size: var(--fs-wm); letter-spacing: -.015em; line-height: 1; }
.signet { position: relative; display: block; width: 46px; aspect-ratio: 5 / 3; flex: none; }
.signet img, .signet video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.signet video { opacity: 0; }
.signet.laeuft video { opacity: 1; }
.signet.laeuft img { opacity: 0; }

/* ---------- Kopf ---------- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--head-h);
  display: flex; align-items: center;
  transition: background-color .4s ease, box-shadow .4s ease, color .4s ease;
}
.top.is-solid { background: rgba(241, 239, 232, .82); box-shadow: 0 1px 0 var(--line); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }
.top.is-dark { background: rgba(30, 28, 25, .8); box-shadow: 0 1px 0 rgba(242,240,235,.08); color: var(--hell-1); }
.top.is-dark .signet { filter: invert(1); }
.top .wrap { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.top nav { display: flex; align-items: center; gap: 30px; font-size: 15px; }
.top nav a { text-decoration: none; color: var(--ink-2); transition: color .2s; }
.top nav a:hover, .top nav a[aria-current] { color: var(--ink); }
.top nav a.pill { color: var(--ink); border: 1px solid currentColor; border-radius: 999px; padding: 7px 16px; }
.top nav a.pill:hover { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.top.is-dark nav a { color: var(--hell-2); }
.top.is-dark nav a:hover, .top.is-dark nav a.pill { color: var(--hell-1); }
.top.is-dark nav a.pill:hover { background: var(--hell-1); color: var(--ink); border-color: var(--hell-1); }

/* ---------- Farbgrund ---------- */
.farbgrund { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.blase {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, var(--f) 0%, transparent var(--k, 70%));
  filter: blur(var(--bl, 90px)); opacity: var(--o);
  will-change: transform;
  animation: blase var(--d, 20s) ease-in-out var(--v, 0s) infinite alternate;
}
@keyframes blase {
  0%   { transform: translate3d(0, 0, 0) scale(1, 1) rotate(0deg); }
  33%  { transform: translate3d(var(--x1), var(--y1), 0) scale(var(--sx1), var(--sy1)) rotate(var(--r1)); }
  66%  { transform: translate3d(var(--x2), var(--y2), 0) scale(var(--sx2), var(--sy2)) rotate(var(--r2)); }
  100% { transform: translate3d(var(--x3), var(--y3), 0) scale(1.1, .92) rotate(8deg); }
}
.korn {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; opacity: .22;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)'/%3E%3C/svg%3E");
}

/* ---------- Startscreen ---------- */
.hero { position: relative; height: 240vh; }
.hero-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; perspective: 1200px; }
/* Farbgrund und Korn laufen über rund 40 vh weich ins Off-White aus; die Maske sitzt auf einer
   festen Ebene, damit die Parallax-Bewegung darunter keine Kante sichtbar macht */
.hero-grund { position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 54%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 0, #000 54%, transparent 96%); }
.hero-parallax { position: absolute; inset: -12% -6%; will-change: transform; }
.hero-copy { position: absolute; left: 0; right: 0; top: clamp(120px, 19vh, 190px); z-index: 3; will-change: transform; }
.hero-eyebrow { display: flex; align-items: center; gap: 10px; color: var(--ink-2); margin-bottom: 26px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 1px rgba(30,28,25,.18); flex: none; }
.hero h1 { font-weight: 500; font-size: var(--fs-h1); line-height: .9; letter-spacing: -.055em; }
.zeile { display: block; }
.hero-sub { margin-top: clamp(18px, 2.6vh, 30px); font-weight: 500; font-size: clamp(30px, 3.9vw, 58px); letter-spacing: -.04em; line-height: 1.02; }
.hero-sub .leise { color: var(--ink-2); font-weight: 400; letter-spacing: -.035em; }
.hero-lead { margin-top: 18px; max-width: 30em; color: var(--ink-2); font-size: var(--fs-lead); }
@media (prefers-reduced-motion: no-preference) {
  .hero-eyebrow, .hero .zeile, .hero-lead { animation: auftritt 1.1s var(--ease) both; }
  .hero h1 .zeile:nth-child(1) { animation-delay: .08s; }
  .hero h1 .zeile:nth-child(2) { animation-delay: .16s; }
  .hero-sub .zeile:nth-child(1) { animation-delay: .3s; }
  .hero-sub .zeile:nth-child(2) { animation-delay: .38s; }
  .hero-lead { animation-delay: .5s; }
}
@keyframes auftritt { from { opacity: 0; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: none; } }

.things { position: absolute; inset: 0; pointer-events: none; perspective: 1200px; }
.things { z-index: 2; }
.thing { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.thing > .face { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); will-change: opacity; }

/* Unordnung: echte Dinge */
.paper { background: var(--surface); border-radius: 10px; box-shadow: var(--ring), 0 18px 40px -22px rgba(30,28,25,.35), 0 2px 6px -2px rgba(30,28,25,.08); }
.f-mail { width: 236px; padding: 14px 16px 16px; }
.f-mail .m-top { display: flex; align-items: center; gap: 8px; color: var(--ink-2); margin-bottom: 9px; font-size: var(--fs-micro); }
.f-mail .m-top svg { width: 16px; height: 16px; stroke: var(--ink); fill: none; stroke-width: 1.4; }
.f-mail b { display: block; font-weight: 500; font-size: 15px; line-height: 1.25; letter-spacing: -.01em; }
.f-mail .anhang { display: inline-block; margin-top: 10px; padding: 3px 7px 2px; border-radius: 4px; background: var(--surface-3); color: var(--ink-2); font-size: 9px; }
.bars { margin-top: 10px; display: grid; gap: 6px; }
.bars i { display: block; height: 5px; border-radius: 3px; background: var(--surface-3); }
.bars i:nth-child(2) { width: 72%; }
.f-note { width: 150px; height: 146px; padding: 22px 16px 14px; border-radius: 3px; background: #FFF584; box-shadow: 0 16px 32px -20px rgba(30,28,25,.45), inset 0 -18px 24px -20px rgba(30,28,25,.12); font-size: 17px; line-height: 1.22; letter-spacing: -.01em; }
.f-note.rosa { background: #FFB8D2; }
.f-note:not(.rosa)::before { content: ""; position: absolute; left: 50%; top: -9px; width: 58px; height: 20px; transform: translateX(-50%) rotate(-3deg); background: rgba(253,252,248,.6); box-shadow: 0 0 0 1px rgba(30,28,25,.05); }
.f-note .klammer { position: absolute; right: 22px; top: -18px; width: 18px; height: 42px; fill: none; stroke: #8A8680; stroke-width: 1.6; stroke-linecap: round; }
.f-note small { display: block; margin-top: 10px; color: rgba(30,28,25,.55); font-size: var(--fs-micro); }
.f-file { width: 132px; height: 162px; padding: 14px; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 8px; clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%); }
.f-file::after { content: ""; position: absolute; right: 0; top: 0; width: 30px; height: 30px; background: var(--surface-3); border-bottom-left-radius: 6px; }
.f-file .ext { position: absolute; left: 14px; top: 16px; background: var(--ink); color: var(--surface); padding: 3px 6px 2px; border-radius: 4px; font-size: var(--fs-micro); }
.f-file .lines { position: absolute; left: 14px; right: 14px; top: 52px; display: grid; gap: 7px; }
.f-file .lines i { display: block; height: 4px; border-radius: 2px; background: var(--surface-3); }
.f-file .lines i:nth-child(3) { width: 60%; }
.f-file .name { font-size: var(--fs-micro); letter-spacing: .06em; color: var(--ink-2); text-transform: none; word-break: break-all; }
.f-cal { width: 138px; overflow: hidden; text-align: center; }
.f-cal .c-head { background: var(--ink); color: var(--surface); padding: 8px 0 7px; font-size: var(--fs-micro); }
.f-cal b { display: block; font-weight: 500; font-size: 62px; line-height: 1; letter-spacing: -.05em; padding: 14px 0 4px; }
.f-cal .mono { display: block; color: var(--ink-2); padding-bottom: 14px; font-size: var(--fs-micro); }
.f-photo { width: 156px; padding: 10px 10px 0; border-radius: 4px; }
.f-photo .pic { height: 150px; border-radius: 2px; background:
  radial-gradient(circle at 70% 30%, #F5B8FF 0 22%, transparent 23%),
  linear-gradient(160deg, transparent 52%, rgba(74, 222, 128, .55) 52.5%),
  linear-gradient(200deg, #F7C9D9, #E8A0A0 70%, #C9BCF4); }
.f-photo .mono { display: block; padding: 10px 2px 12px; color: var(--ink-2); font-size: var(--fs-micro); }
.f-link { width: 220px; padding: 14px 16px 16px; }
.f-link .mono { color: var(--ink-2); font-size: var(--fs-micro); }
.f-link b { display: block; margin: 6px 0 12px; font-weight: 500; font-size: 15px; letter-spacing: -.01em; }
.f-link .prog { height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.f-link .prog i { display: block; height: 100%; width: 82%; background: var(--b-rose); }

.f-chat { width: 230px; padding: 13px 16px 15px; border-radius: 16px 16px 16px 4px; }
.f-chat .mono { color: var(--ink-2); font-size: var(--fs-micro); }
.f-chat b { display: block; margin-top: 6px; font-weight: 500; font-size: 16px; letter-spacing: -.01em; line-height: 1.25; }
.f-chat::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--b-gruen); margin-right: 7px; vertical-align: 1px; float: left; margin-top: 3px; }
.f-buyout { width: 212px; padding: 14px 16px 15px; }
.f-buyout .mono { color: var(--ink-2); font-size: var(--fs-micro); display: block; }
.f-buyout b { display: block; margin: 6px 0 10px; font-weight: 500; font-size: 16px; letter-spacing: -.01em; }
.f-buyout .warn { display: inline-block; width: auto; padding: 3px 7px 2px; border-radius: 4px; background: #FCE4B7; color: #8A5A12; }
.f-nda .sig { position: absolute; left: 14px; right: 14px; bottom: 34px; padding-top: 5px; border-top: 1px solid var(--ink); font-size: 8px; color: var(--ink-2); }
.f-nda .lines { top: 46px; }
.f-list { width: 176px; padding: 14px 16px 12px; }
.f-list > .mono { color: var(--ink-2); font-size: var(--fs-micro); }
.f-list ul { margin-top: 8px; display: grid; gap: 6px; font-size: 13px; line-height: 1.25; }
.f-list li { display: flex; gap: 8px; align-items: center; }
.f-list li::before { content: ""; width: 11px; height: 11px; border-radius: 3px; box-shadow: inset 0 0 0 1.2px var(--ink); flex: none; }
.f-list li.ok { color: var(--ink-2); text-decoration: line-through; text-decoration-color: rgba(30,28,25,.35); }
.f-list li.ok::before { background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2.5 6.2 2.3 2.3 4.7-5' fill='none' stroke='%23FDFCF8' stroke-width='2'/%3E%3C/svg%3E") center / 9px no-repeat; }
.f-mood { width: 196px; padding: 12px 12px 12px; }
.f-mood > .mono { color: var(--ink-2); font-size: var(--fs-micro); }
.f-mood .mood { margin-top: 8px; display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 46px 46px; gap: 4px; }
.f-mood .mood i { border-radius: 2px; background: #E9E6DC; }
.f-mood .mood i:nth-child(1) { grid-row: span 2; background: linear-gradient(170deg, #C9BCF4, #FFB8D2); }
.f-mood .mood i:nth-child(2) { background: #2B2620; }
.f-mood .mood i:nth-child(3) { background: #FFD3A8; }
.f-mood .mood i:nth-child(4) { background: linear-gradient(200deg, #BDE3FF, #8BE3A6); }
.f-mood .mood i:nth-child(5) { background: #F5E985; }
.f-mood .mood i:nth-child(6) { display: none; }
.f-invite { width: 226px; padding: 14px 16px 14px; }
.f-invite .mono { color: var(--ink-2); font-size: var(--fs-micro); display: block; }
.f-invite b { display: block; margin-top: 6px; font-weight: 500; font-size: 16px; letter-spacing: -.01em; }
.f-invite .when { display: block; font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.f-invite .btns { display: flex; gap: 6px; margin-top: 10px; }
.f-invite .btns i { font-style: normal; font-size: 11.5px; padding: 4px 9px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
.f-invite .btns i:first-child { background: var(--ink); color: var(--surface); box-shadow: none; }
.f-due { width: 200px; padding: 14px 16px 15px; }
.f-due .mono { color: var(--ink-2); font-size: var(--fs-micro); display: block; }
.f-due b { display: block; margin: 6px 0 10px; font-weight: 500; font-size: 16px; letter-spacing: -.01em; line-height: 1.2; }
.f-due .badge { display: inline-block; padding: 3px 7px 2px; border-radius: 4px; background: #FEDBD6; color: #9A3B30; }

/* Ordnung: einheitliche Karte, alles am selben Projekt */
.f-card {
  width: 104px; height: 60px; padding: 10px 11px; border-radius: 10px;
  background: var(--surface); box-shadow: var(--ring), 0 10px 24px -16px rgba(30,28,25,.4);
  display: flex; flex-direction: column; justify-content: space-between; opacity: 0;
}
.f-card .k-top { display: flex; align-items: center; gap: 6px; font-size: var(--fs-micro); letter-spacing: .1em; }
.f-card .k-top i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(30,28,25,.16); flex: none; }
.f-card .k-code { font-size: var(--fs-micro); color: var(--ink-2); letter-spacing: .1em; }

.hero-band { position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.hero-band .rail { position: absolute; left: 0; width: 100px; height: 1px; background: var(--ink); transform-origin: left center; transform: scaleX(0); will-change: transform; }
.hero-band .group { position: absolute; top: 0; transform: translateX(-50%); color: var(--ink-2); white-space: nowrap; opacity: 0; will-change: opacity; }
.hero-band .group::before { content: ""; display: block; width: 1px; height: 9px; background: var(--ink); margin: 0 auto 8px; }
.hero-hint { position: absolute; left: 0; right: 0; bottom: 26px; z-index: 5; color: var(--ink-2); will-change: opacity; }
.hero-hint .wrap { display: flex; justify-content: space-between; }
.hero-hint .pfeil { display: inline-block; animation: tippen 2.4s ease-in-out infinite; }
@keyframes tippen { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.hero-done { position: absolute; left: 0; right: 0; z-index: 3; opacity: 0; will-change: opacity, transform; }
.hero-done .wrap { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.hero-done p { font-size: 15px; color: var(--ink-2); }
.hero-done p b { font-weight: 500; color: var(--ink); }
.hero-done p.mono { font-size: var(--fs-label); color: var(--ink); }

/* ---------- Abschnitte allgemein ---------- */
.sec-head { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; }
.sec-head > .mono { color: var(--ink-2); padding-top: 14px; }
.intro { margin-top: 20px; color: var(--ink-2); max-width: 32em; font-size: var(--fs-lead); }
.frame { border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 30px 70px -40px rgba(30,28,25,.4); }
.frame img { width: 100%; height: auto; }

/* ---------- Ablauf ---------- */
.flow { position: relative; }
.flow-intro { padding-top: clamp(96px, 12vw, 168px); }
.flow-scroll { padding: 64px 0 clamp(80px, 10vw, 140px); }
.flow-top, .flow-band { display: none; }
.stations { position: relative; }
.station { position: relative; display: grid; grid-template-columns: 56px 1fr; column-gap: 18px; padding-bottom: 72px; }
.station:last-child { padding-bottom: 0; }
.station-node { position: relative; z-index: 2; width: 56px; height: 56px; border-radius: 50%; background: var(--surface); box-shadow: var(--ring); display: grid; place-items: center; transition: box-shadow .5s ease, background-color .5s ease; }
.station-node .illu { width: 44px; height: 44px; stroke-width: 2; }
.station.is-on .station-node { background: color-mix(in srgb, var(--c) 45%, var(--surface)); box-shadow: 0 0 0 1px rgba(30,28,25,.2), 0 0 0 8px color-mix(in srgb, var(--c) 28%, transparent); }
.station-no { color: var(--ink-2); padding-top: 4px; }
.station h3 { margin: 10px 0 14px; }
.station-lead { font-size: var(--fs-lead); line-height: 1.5; max-width: 26em; }
.facts { margin-top: 20px; display: grid; gap: 9px; color: var(--ink-2); }
.facts li { display: flex; gap: 10px; align-items: center; }
.facts li::before { content: ""; width: 14px; height: 1px; background: var(--ink); flex: none; }
.station-text { min-width: 0; }
.station-shot { grid-column: 2; min-width: 0; margin-top: 28px; position: relative; }
.station-shot .frame { aspect-ratio: 1440 / 900; }
.station-shot .frame.inset { position: absolute; width: 50%; right: -3%; bottom: -12%; }
.station-shot.zwei { margin-bottom: 9%; }
.station-shot figcaption { margin-top: 14px; color: var(--ink-2); display: flex; justify-content: space-between; gap: 16px; }
.station-shot.zwei figcaption { margin-top: calc(14px + 9%); padding-right: 52%; }
.flow-rail { position: absolute; left: 27.5px; top: 28px; bottom: 28px; width: 1px; background: var(--line); }
.flow-rail i { position: absolute; inset: 0; background: var(--ink); transform-origin: top; transform: scaleY(0); will-change: transform; }
.flow-rail b { position: absolute; left: -5px; top: 0; width: 11px; height: 11px; border-radius: 3px; background: var(--ink); will-change: transform; }
@media (min-width: 900px) {
  .station { grid-template-columns: 56px 5fr 7fr; column-gap: 32px; padding-bottom: 120px; }
  .station-shot { margin-top: 0; grid-column: 3; }
}

/* Band-Modus (Desktop mit Bewegung): klebende Bühne */
[data-mode="band"] .flow-intro { padding-bottom: clamp(24px, 4vh, 48px); }
[data-mode="band"] .flow-scroll { padding: 0; height: 560vh; }
[data-mode="band"] .flow-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; padding-top: calc(var(--head-h) + clamp(14px, 2.4vh, 26px)); }
[data-mode="band"] .flow-stage > .wrap { width: 100%; flex: 1; min-height: 0; display: flex; flex-direction: column; }
[data-mode="band"] .flow-top { display: flex; justify-content: space-between; align-items: center; gap: 24px; color: var(--ink-2); }
[data-mode="band"][data-ablauf="3"] .flow-top { display: none; }
.fp b, .ab3-count b { font-weight: 400; color: var(--ink); }
.ab { display: none; flex: none; }
[data-mode="band"][data-ablauf="1"] .ab1, [data-mode="band"][data-ablauf="2"] .ab2, [data-mode="band"][data-ablauf="3"] .ab3 { display: block; }
.ab-fill { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--ink); transform-origin: left center; transform: scaleX(0); will-change: transform; }

/* Variante 1: ruhig und typografisch */
.ab1 { margin-top: clamp(18px, 3.4vh, 36px); }
.ab1-row { display: grid; grid-template-columns: repeat(5, 1fr); }
.ab1-st { display: flex; flex-direction: column; gap: 0; color: rgba(30, 28, 25, .18); transition: color .6s var(--ease); }
.ab1-st .mono { color: inherit; }
.ab1-nm { font-weight: 500; font-size: clamp(28px, 3.2vw, 48px); letter-spacing: -.045em; line-height: 1; }
.ab1-st.is-done { color: rgba(30, 28, 25, .42); }
.ab1-st.is-on { color: var(--ink); }
.ab1-line { position: relative; height: 1px; margin-top: clamp(18px, 3vh, 28px); background: var(--line); }
.ab1-dot { position: absolute; left: 0; top: -5px; width: 11px; height: 11px; margin-left: -1px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 5px var(--canvas); will-change: transform; }

/* Variante 2: Illustrationen frei und groß, die aktive zeichnet sich */
.ab2 { margin-top: clamp(10px, 2vh, 22px); }
.ab2-row { display: grid; grid-template-columns: repeat(5, 1fr); }
.ab2-st { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ab2-st::before { content: ""; position: absolute; top: -12%; left: 50%; width: clamp(140px, 19vh, 190px); aspect-ratio: 1; transform: translateX(-50%) scale(.7); border-radius: 50%; background: radial-gradient(circle, var(--c) 0%, transparent 66%); opacity: 0; transition: opacity .9s var(--ease), transform 1.2s var(--ease); z-index: -1; }
.ab2-st.is-on::before { opacity: .55; transform: translateX(-50%) scale(1); }
.ab2-st .illu { position: relative; width: clamp(84px, 12.4vh, 124px); height: clamp(84px, 12.4vh, 124px); stroke-width: 1.3; stroke-opacity: .26; fill-opacity: 0; stroke-dasharray: 420; stroke-dashoffset: 0; transition: stroke-opacity .6s ease, fill-opacity .8s ease .5s; }
.ab2-st.is-done .illu { stroke-opacity: .6; }
.ab2-st.is-on .illu { stroke-opacity: 1; fill-opacity: 1; animation: zeichnen 1.5s var(--ease) both; }
@keyframes zeichnen { from { stroke-dashoffset: 420; } to { stroke-dashoffset: 0; } }
.ab2-st .mono { color: var(--ink-3); transition: color .5s ease; }
.ab2-st.is-on .mono { color: var(--ink); }
.ab2-st.is-done .mono { color: var(--ink-2); }
.ab2-line { position: relative; height: 1px; margin-top: clamp(14px, 2.4vh, 24px); background: var(--line); }

/* Variante 3: Reiter wie in Dipha, Unterstrich gleitet */
.ab3 { margin-top: clamp(6px, 1.4vh, 14px); }
[data-mode="band"][data-ablauf="3"] .ab3 { display: grid; grid-template-columns: 4fr 8fr; column-gap: clamp(32px, 4.4vw, 72px); align-items: end; }
.ab3-count { color: var(--ink-2); padding-bottom: 15px; }
.ab3-tabs { position: relative; display: flex; gap: clamp(18px, 2.4vw, 38px); border-bottom: 1px solid var(--line); }
.ab3-tab { padding: 8px 0 14px; font-size: 17px; letter-spacing: -.01em; color: var(--ink-3); transition: color .45s ease; white-space: nowrap; }
.ab3-tab.is-on { color: var(--ink); }
.ab3-tab.is-done { color: var(--ink-2); }
.ab3-bar { position: absolute; left: 0; bottom: -1px; width: 100px; height: 2px; background: var(--ink); transform-origin: left center; will-change: transform; }
[data-mode="band"][data-ablauf="3"] .stations { margin-top: clamp(22px, 3.6vh, 40px); }
[data-mode="band"] .flow-rail, [data-mode="band"] .station-node { display: none; }
[data-mode="band"] .stations { flex: 1; min-height: 0; margin: clamp(18px, 3vh, 34px) 0 clamp(30px, 5.4vh, 56px); }
[data-mode="band"] .station { position: absolute; inset: 0; padding: 0; grid-template-columns: 4fr 8fr; column-gap: clamp(32px, 4.4vw, 72px); align-items: start; opacity: 0; will-change: opacity; }
[data-mode="band"] .station-text { padding-top: 4px; will-change: transform; }
[data-mode="band"] .station-shot { grid-column: 2; height: 100%; margin: 0; display: flex; flex-direction: column; align-items: flex-end; }
[data-mode="band"] .station-shot .frame { height: calc(100% - 30px); width: auto; max-width: 100%; aspect-ratio: 1440 / 900; flex: none; }
[data-mode="band"] .station-shot .frame img { height: 100%; object-fit: cover; object-position: left top; }
[data-mode="band"] .station-shot .frame.inset { position: absolute; height: 44%; width: auto; right: 0; bottom: 18px; transform: translateX(-122%); }
[data-mode="band"] .station-shot.zwei { margin: 0; }
[data-mode="band"] .station-shot figcaption, [data-mode="band"] .station-shot.zwei figcaption { width: 100%; margin-top: 12px; padding: 0; }


/* ---------- Was Dipha ersetzt ---------- */
.ersetzt {
  position: relative; background: var(--dunkel); color: var(--hell-1);
  margin: 0 clamp(10px, 1.6vw, 24px); border-radius: clamp(22px, 2.2vw, 32px);
  --illu-line: var(--hell-1); --illu-fill: #3A3631; --illu-fill-light: #2B2824; --illu-ground: #34302B;
  padding: clamp(96px, 12vw, 160px) 0;
}
.ersetzt .mono-2, .ersetzt .intro { color: var(--hell-2); }
.ersetzt h2 { margin-top: 18px; }
.ers-grid { display: grid; grid-template-columns: 1fr; gap: 48px; }
.ers-left { position: relative; }
.tiles { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 40px; }
.tile {
  position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center;
  padding: 13px 16px; border-radius: 12px; background: #2A2723; box-shadow: 0 0 0 1px rgba(242,240,235,.08);
  will-change: transform, opacity;
}
.tile .illu { width: 44px; height: 44px; stroke-width: 2; }
.tile b { display: block; font-weight: 500; font-size: var(--fs-h4); letter-spacing: -.015em; line-height: 1.25; }
.tile .tool { display: block; margin-top: 3px; color: var(--hell-2); font-size: 14px; line-height: 1.45; }
.tile .weg { background: linear-gradient(var(--b-rose), var(--b-rose)) left 58% / calc(var(--strike, 0) * 100%) 1.5px no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.tile.is-struck { --strike: 1; }
.tile.is-struck .weg { transition: background-size .7s var(--ease); }
.feld {
  position: relative; border-radius: 22px; overflow: hidden; color: var(--ink);
  background: var(--canvas); padding: 22px 22px 18px; isolation: isolate;
  --illu-line: var(--ink); --illu-fill: var(--surface-3); --illu-fill-light: var(--surface); --illu-ground: var(--surface-3);
  box-shadow: 0 40px 100px -40px rgba(0,0,0,.7);
}
.feld .farbgrund { z-index: -1; }
.feld-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.feld-head .mono { color: var(--ink-2); }
.slots { display: grid; }
.slot { position: relative; display: grid; grid-template-columns: 32px 1fr auto; gap: 14px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--line); min-height: 56px; }
.slot:last-child { border-bottom: 0; }
.slot .illu { width: 32px; height: 32px; stroke-width: 2.6; }
.slot b { font-weight: 500; font-size: var(--fs-h4); letter-spacing: -.015em; line-height: 1.2; }
.slot b small { display: block; font-weight: 400; color: var(--ink-2); font-size: 14px; letter-spacing: 0; margin-top: 2px; }
.slot b small s { text-decoration-color: rgba(200, 80, 80, .55); text-decoration-thickness: 1.5px; }
.slot .ok { width: 20px; height: 20px; border-radius: 50%; background: var(--b-gruen); display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(30,28,25,.15); }
.slot .ok svg { width: 11px; height: 11px; stroke: var(--ink); stroke-width: 2.2; fill: none; }
.slot-in { display: contents; }
.summe { margin-top: 56px; }
.summe .mono { color: var(--hell-2); }
.summe .zahl { display: block; font-weight: 500; font-size: clamp(54px, 7.4vw, 116px); letter-spacing: -.055em; line-height: .95; margin: 12px 0 4px; white-space: nowrap; }
.summe .pro { display: block; font-size: var(--fs-h3); letter-spacing: -.03em; color: var(--hell-1); margin-bottom: 18px; }
.summe p { color: var(--hell-2); max-width: 30em; font-size: var(--fs-small); }
.summe p b { color: var(--hell-1); font-weight: 400; }
@media (min-width: 900px) {
  .ers-grid { grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
  .tiles { grid-template-columns: 1fr 1fr; }
}
[data-mode="band"] .ersetzt { padding: 0; height: 400vh; margin: 0; border-radius: 0; background: none; }
[data-mode="band"] .ers-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; padding-top: var(--head-h); isolation: isolate; }
/* Die dunkle Sektion als abgerundetes Feld mit Rand zum Off-White, kein Verlauf */
[data-mode="band"] .ers-stage::before { content: ""; position: absolute; z-index: -1; inset: calc(var(--head-h) + 14px) clamp(12px, 1.6vw, 24px) 14px; border-radius: clamp(22px, 2.2vw, 32px); background: var(--dunkel); }
[data-mode="band"] .ers-stage > .wrap { width: 100%; }
[data-mode="band"] .ers-grid { align-items: center; }
[data-mode="band"] .ersetzt .intro { margin-top: 14px; }
[data-mode="band"] .tiles { margin-top: clamp(20px, 3.6vh, 40px); }
[data-mode="band"] .tile { padding: 11px 14px; min-height: clamp(66px, 8.6vh, 80px); }
[data-mode="band"] .tile .illu { width: 40px; height: 40px; }
[data-mode="band"] .slot-in { display: grid; grid-column: 1 / -1; grid-template-columns: 32px 1fr auto; gap: 14px; align-items: center; opacity: 0; will-change: opacity, transform; }
[data-mode="band"] .slot::before { content: ""; position: absolute; inset: 6px 0; border-radius: 8px; border: 1px dashed rgba(30,28,25,.16); transition: opacity .4s; }
[data-mode="band"] .slot.is-full::before { opacity: 0; }
[data-mode="band"] .slot { min-height: clamp(50px, 6.4vh, 60px); padding: 6px 10px; }
[data-mode="band"] .summe { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; opacity: 0; will-change: opacity, transform; }
[data-mode="band"] .tiles-wrap { position: relative; }

/* ---------- KI und Datenschutz ---------- */
.block { padding: clamp(96px, 12vw, 160px) 0 0; }
.duo { display: grid; grid-template-columns: 1fr; gap: 64px; margin-top: 56px; }
.duo h3.kopf { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.duo h3.kopf .illu { width: 64px; height: 64px; stroke-width: 1.8; }
.ki-items { border-top: 1px solid var(--line); }
.ki-items div { padding: 18px 0; border-bottom: 1px solid var(--line); }
.ki-items b, .row b { display: block; font-weight: 500; font-size: var(--fs-h4); letter-spacing: -.015em; margin-bottom: 4px; }
.ki-items p, .row span { color: var(--ink-2); font-size: var(--fs-small); }
.note { margin-top: 18px; display: flex; align-items: center; gap: 10px; color: var(--ink-2); }
.rows { border-top: 1px solid var(--line); }
.row { padding: 18px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .duo { grid-template-columns: 1fr 1fr; gap: clamp(48px, 7vw, 112px); } }

/* ---------- Für wen ---------- */
.who { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 56px; }
.who > div { position: relative; border-radius: 18px; background: var(--surface); box-shadow: var(--ring); padding: 28px 28px 32px; overflow: hidden; }
.who .illu { width: 112px; height: 112px; margin: -6px 0 18px -10px; stroke-width: 1.6; }
.who h3 { margin-bottom: 12px; }
.who p { color: var(--ink-2); max-width: 28em; font-size: var(--fs-small); }
@media (min-width: 900px) { .who { grid-template-columns: 1fr 1fr; } }

/* ---------- Kontakt ---------- */
.schluss { position: relative; margin-top: clamp(64px, 8vw, 120px); }
.schluss-grund { inset: -22vh 0 0 0; z-index: -1; opacity: .9;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 26%, #000 86%, transparent 100%); }
.contact { position: relative; padding: clamp(88px, 12vw, 168px) 0 0; }
.signatur { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; padding: clamp(110px, 14vw, 200px) 0 clamp(110px, 13vw, 190px); }
.signatur .wortmarke { flex-direction: row; align-items: center; gap: clamp(14px, 1.6vw, 24px); }
.signatur .signet { width: clamp(110px, 12vw, 176px); }
.signatur .wm { font-size: clamp(54px, 6.4vw, 100px); letter-spacing: -.05em; transform: translateY(-.04em); }
.signatur .mono { color: var(--ink-2); }
.contact .wrap { position: relative; display: grid; grid-template-columns: 1fr; gap: 48px; align-items: end; }
.contact .wer { margin-top: 30px; color: var(--ink-2); }
.contact .mail { display: inline-block; margin-top: 6px; font-size: var(--fs-h3); font-weight: 500; letter-spacing: -.03em; text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
@media (min-width: 900px) { .contact .wrap { grid-template-columns: 1fr; } }
/* ---------- Fuß ---------- */
.fuss { padding: 26px 0 34px; color: var(--ink-2); border-top: 1px solid var(--line); }
.fuss .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap; }
.fuss .wortmarke { color: var(--ink); }
.fuss-claim { flex: 1; }
.fuss-links { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; font-size: 15px; }
.fuss-links a { text-decoration: none; }
.fuss-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.fuss-links .leise { color: var(--ink-2); display: inline-flex; align-items: center; gap: 8px; }

/* ---------- Rechtstexte (Unterseiten) ---------- */
.recht { padding: calc(var(--head-h) + clamp(56px, 8vw, 112px)) 0 clamp(80px, 10vw, 140px); }
.recht .sec-head { margin-bottom: clamp(40px, 6vw, 72px); }
.recht .stand { margin-top: 18px; color: var(--ink-2); }
.recht-text { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; }
.recht-nav { position: sticky; top: calc(var(--head-h) + 32px); align-self: start; display: grid; gap: 10px; color: var(--ink-2); }
.recht-nav a { text-decoration: none; }
.recht-nav a:hover { color: var(--ink); }
.recht-body { max-width: 40em; }
.recht-body section { padding: 28px 0 32px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--head-h) + 16px); }
.recht-body h3 { font-size: clamp(22px, 2vw, 28px); margin-bottom: 14px; }
.recht-body h4 { font-weight: 500; font-size: var(--fs-h4); letter-spacing: -.015em; margin: 18px 0 6px; }
.recht-body p, .recht-body li { color: var(--ink-2); font-size: var(--fs-small); }
.recht-body p + p { margin-top: 10px; }
.recht-body ul { margin-top: 10px; display: grid; gap: 6px; }
.recht-body li { display: flex; gap: 10px; }
.recht-body li::before { content: ""; width: 12px; height: 1px; background: var(--ink); flex: none; margin-top: .8em; }
.recht-body address { font-style: normal; color: var(--ink); font-size: var(--fs-lead); line-height: 1.5; }
.recht-body a { color: var(--ink); }

/* ---------- Einblenden ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Handy ---------- */
@media (max-width: 899px) {
  .top nav a:not(.pill) { display: none; }
  .sec-head, .recht-text { grid-template-columns: 1fr; gap: 14px; }
  .sec-head > .mono { padding-top: 0; }
  .recht-nav { display: none; }
}
@media (max-width: 699px) {
  .thing.extra { display: none; }
  :root { --head-h: 60px; --fs-body: 17px; --fs-small: 15.5px; }
  .hero { height: 220vh; }
  .hero h1 { font-size: clamp(50px, 15.6vw, 72px); }
  .hero-sub { font-size: clamp(28px, 8.4vw, 36px); }
  .hero-lead { font-size: 15.5px; max-width: 21em; }
  .f-card { width: var(--cw, 64px); height: 52px; padding: 7px 7px; border-radius: 8px; border-top: 3px solid var(--c); }
  .f-card .k-top { font-size: 7.5px; letter-spacing: .03em; gap: 4px; }
  .f-card .k-top i { display: none; }
  .f-card .k-code { font-size: 8px; letter-spacing: .04em; }
  .hero-done .wrap { flex-direction: column; gap: 4px; }
  .hero-done p { font-size: 14px; }
  .station-shot .frame { aspect-ratio: 4 / 3.3; }
  .station-shot .frame img { width: 190%; max-width: none; }
  .station-shot .frame.inset { display: none; }
  .station-shot.zwei { margin-bottom: 0; }
  .station-shot.zwei figcaption { margin-top: 14px; padding-right: 0; }
  .tile { grid-template-columns: 40px 1fr; padding: 12px 14px; }
  .tile .illu { width: 40px; height: 40px; }
  .feld { padding: 18px 16px 14px; }
  .slot { gap: 12px; }
  .who > div { padding: 22px 22px 26px; }
  .who .illu { width: 88px; height: 88px; }
  .fuss-claim { flex-basis: 100%; order: 3; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .blase, .hero-hint .pfeil { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero { height: 100vh; }
}
@media (prefers-reduced-motion: no-preference) { html.weich { scroll-behavior: smooth; } }


/* Sortierte Karten auf dem Desktop: einzeilig, gleich breit, ohne Projektcode */
@media (min-width: 700px) {
  .f-card { width: var(--cw, 112px); height: 34px; padding: 0 11px; flex-direction: row; align-items: center; justify-content: flex-start; }
  .f-card .k-code { display: none; }
  .f-card .k-top { white-space: nowrap; }
}

/* Im Band-Modus nummeriert nur der Zähler oben; die Stationsnamen tragen keine Nummern */
[data-mode="band"] .station-no { display: none; }
[data-mode="band"] .station h3 { margin-top: 2px; }

/* ---------- KI-Anbindung ---------- */
.ki { position: relative; padding: clamp(110px, 13vw, 190px) 0 clamp(30px, 5vw, 70px); }
.ki-farbe { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent); }
.ki-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 48px; }
.ki-label { color: var(--ink-2); }
.ki-text h2 { margin-top: 18px; }
.ki-facts { margin-top: 22px; }
.kc-fertig b { width: 20px; height: 20px; border-radius: 50%; background: var(--b-gruen); display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(30,28,25,.15); flex: none; }
.kc-fertig b svg { width: 11px; height: 11px; fill: none; stroke: var(--ink); stroke-width: 2.2; }
.ki-chat-wrap { min-width: 0; }
.ki-chat { position: relative; z-index: 1; display: flex; flex-direction: column; height: clamp(540px, 68vh, 620px); background: var(--surface); border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 1px rgba(30,28,25,.08), 0 50px 100px -50px rgba(30,28,25,.45); }
.kc-kopf { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.kc-kopf .mono { color: var(--ink-2); }
.kc-punkte { display: inline-flex; gap: 6px; }
.kc-punkte i { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-3); box-shadow: inset 0 0 0 1px rgba(30,28,25,.08); }
.kc-verb { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; }
.kc-verb i { width: 7px; height: 7px; border-radius: 50%; background: var(--b-gruen); }
.kc-verlauf { flex: 1; min-height: 0; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px); mask-image: linear-gradient(to bottom, transparent 0, #000 28px); display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 20px 22px; }
.kc-msg p { font-size: 15.5px; line-height: 1.45; }
.kc-ich { align-self: flex-end; max-width: 80%; background: var(--ink); color: var(--canvas); padding: 10px 15px; border-radius: 16px 16px 4px 16px; }
.kc-ki { align-self: flex-start; width: min(88%, 440px); background: var(--canvas); padding: 12px 15px 14px; border-radius: 16px 16px 16px 4px; }
.kc-quelle { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); font-size: var(--fs-micro); margin-bottom: 6px; }
.kc-quelle::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--b-gruen); }
.kc-liste { margin-top: 8px; }
.kc-liste li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--line); font-size: 14px; }
.kc-liste li b { font-weight: 500; }
.kc-liste li span:not(.mono) { color: var(--ink-2); }
.kc-liste li .mono { color: var(--ink-2); font-size: var(--fs-micro); }
.kc-liest { display: none; align-self: flex-start; align-items: center; gap: 5px; color: var(--ink-2); padding: 8px 2px; }
.kc-liest i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-2); animation: tippt 1.2s ease-in-out infinite; }
.kc-liest i:nth-child(2) { animation-delay: .15s; } .kc-liest i:nth-child(3) { animation-delay: .3s; margin-right: 6px; }
@keyframes tippt { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.kc-vorschlag { margin-top: 10px; display: grid; gap: 2px; background: var(--surface); border-radius: 12px; padding: 12px 14px 14px; box-shadow: var(--ring); }
.kc-vorschlag .mono { color: var(--ink-2); font-size: var(--fs-micro); }
.kc-vorschlag b { font-weight: 500; font-size: 16px; letter-spacing: -.01em; margin-top: 2px; }
.kc-datum { font-size: 14px; color: var(--ink-2); }
.kc-knopf { justify-self: start; margin-top: 10px; display: inline-grid; font-size: 13.5px; }
.kc-knopf > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; padding: 7px 15px; border-radius: 999px; transition: opacity .35s ease; }
.kk-a { background: var(--ink); color: var(--canvas); }
.kk-b { background: var(--b-gruen); color: var(--ink); opacity: 0; }
.kk-b svg { width: 11px; height: 11px; fill: none; stroke: var(--ink); stroke-width: 2.2; }
.ist-bestaetigt .kk-a { opacity: 0; }
.ist-bestaetigt .kk-b { opacity: 1; }
.kc-fertig { align-self: flex-start; display: inline-flex; align-items: center; gap: 9px; color: var(--ink); padding: 2px; }
.kc-eingabe { display: flex; align-items: center; gap: 10px; padding: 12px 14px 14px; border-top: 1px solid var(--line); }
.kc-feld { position: relative; flex: 1; min-height: 46px; display: flex; align-items: center; background: var(--canvas); border-radius: 14px; padding: 10px 14px; font-size: 15px; }
.kc-platz { color: var(--ink-3); }
.kc-text:empty { display: none; }
.kc-feld.hat-text .kc-platz { display: none; }
.kc-caret { display: none; width: 1.5px; height: 18px; background: var(--ink); margin-left: 1px; animation: caret 1s steps(2) infinite; }
.kc-feld.hat-text .kc-caret { display: inline-block; }
@keyframes caret { 50% { opacity: 0; } }
.kc-senden { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); transition: background-color .3s ease; flex: none; }
.kc-senden svg { width: 16px; height: 16px; fill: none; stroke: var(--ink-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kc-feld.hat-text + .kc-senden { background: var(--ink); }
.kc-feld.hat-text + .kc-senden svg { stroke: var(--canvas); }
/* Ablauf der Unterhaltung (nur mit Bewegung): Nachrichten erscheinen nacheinander */
.ki-anim .kc-verlauf > [data-k]:not(.da) { display: none; }
.ki-anim .kc-liest.da { display: inline-flex; }
.ki-anim .kc-verlauf > .da { animation: kc-ein .45s var(--ease) both; }
@keyframes kc-ein { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
@media (min-width: 900px) {
  .ki-grid { grid-template-columns: 5fr 7fr; gap: clamp(48px, 7vw, 120px); align-items: center; }
}
[data-mode="band"] .ki { padding: 0; height: 340vh; }
[data-mode="band"] .ki-farbe { position: sticky; top: 0; height: 100vh; margin-bottom: -100vh; }
[data-mode="band"] .ki-stage { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding-top: var(--head-h); }
[data-mode="band"] .ki-stage > .wrap { width: 100%; }
@media (max-width: 699px) {
  .ki-chat { height: auto; min-height: 560px; }
  .kc-ich { max-width: 88%; }
  .kc-ki { width: 94%; }
  .kc-liste li { grid-template-columns: 1fr auto; }
  .kc-liste li span:not(.mono) { display: none; }
}

/* ---------- Effekte (nur mit Bewegung, siehe effekte.js) ---------- */
.rw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.rw > span { display: inline-block; transform: translate3d(0, 108%, 0); transition: transform 1.1s var(--ease) calc(var(--i, 0) * 60ms); }
.rw-da .rw > span { transform: none; }
.chip { display: inline-block; width: 1.9em; height: .74em; border-radius: .14em; overflow: hidden; vertical-align: -.02em; box-shadow: 0 0 0 1px var(--line); background: #fff; }
.chip img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.rw-bereit .chip { transform: scale(.4); opacity: 0; transition: transform 1.2s var(--ease) .25s, opacity .6s ease .25s; }
.rw-da .chip { transform: none; opacity: 1; }
.frame { position: relative; }
.mosaik { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(8, 1fr); pointer-events: none; }
.mosaik i { background: var(--canvas); outline: 1px solid var(--canvas); }
.mosaik.auf i { opacity: 0; transition: opacity .32s ease var(--d, 0s); }
.zeiger { position: fixed; left: 0; top: 0; z-index: 200; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 1px solid #fff; border-radius: 50%; mix-blend-mode: difference; pointer-events: none; opacity: 0; transition: opacity .3s ease; will-change: transform; }
.zeiger.da { opacity: .9; }
@media (prefers-reduced-motion: reduce) { .zeiger, .mosaik { display: none; } }
/* KI am Handy: festes Fenster (kein Springen beim Ablauf), Dipha-Fenster unter dem Chat */
@media (max-width: 899px) {
  .ki-grid { gap: 0; }
  .ki-text { display: contents; }
  .ki-text > * { order: 0; }
  .ki-chat-wrap { order: 1; margin-top: 36px; }
}
@media (max-width: 699px) { .ki-chat { height: 640px; min-height: 0; } }

/* Feste Plätze je Station im sortierten Zustand */
.plaetze { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; will-change: opacity; }
.plaetze i { position: absolute; left: 0; top: 0; border-radius: 10px; border: 1px dashed rgba(30, 28, 25, .16); }
@media (max-width: 699px) { .plaetze { display: none; } }

/* =====================================================================
   Runde 09.11.2026: bunte Boxen, lose Karten mit Davids Bildern,
   Kassenzettel mit Handschrift
   ===================================================================== */
@font-face { font-family: "Hand"; src: url("fonts/Caveat-Variable.ttf") format("truetype"); font-weight: 400 700; font-display: swap; }
:root { --tinte: #2747A8; --rot: #C8372D; }
.hand { font-family: "Hand", "Bradley Hand", cursive; font-weight: 500; }

/* ---------- Startscreen: je Station eine farbige Box ---------- */
.hero-band, .plaetze { display: none; }
.kisten { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.kiste {
  position: absolute; left: 0; top: 0; opacity: 0;
  display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
  padding: 16px 18px 17px; border-radius: 18px;
  background: color-mix(in srgb, var(--c) 60%, var(--surface));
  box-shadow: inset 0 0 0 1px rgba(30,28,25,.06), 0 26px 50px -34px rgba(30,28,25,.5);
  transform-origin: 50% 100%; will-change: opacity, transform;
}
.kiste .k-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: var(--fs-label); letter-spacing: .12em; color: var(--ink); }
.kiste .k-zahl { font-size: var(--fs-label); color: rgba(30,28,25,.55); font-variant-numeric: tabular-nums; transition: color .3s; }
.kiste.voll .k-zahl { color: var(--ink); }
.kiste .k-liste { font-weight: 500; font-size: 15px; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); }
@media (max-width: 699px) {
  .kiste { padding: 10px 11px 11px; border-radius: 14px; gap: 6px; }
  .kiste .k-kopf { font-size: 9px; letter-spacing: .08em; }
  .kiste .k-zahl { font-size: 9px; }
  .kiste .k-liste { font-size: 12px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ---------- Lose Karten: Davids Bilder statt Platzhalter ---------- */
.f-photo .pic { background: var(--surface-3); overflow: hidden; }
.f-photo .pic img, .f-mood .mood img { display: block; width: 100%; height: 100%; object-fit: cover; }
.f-mood .mood img { border-radius: 2px; min-height: 0; }
.f-mood .mood img:nth-child(1) { grid-row: span 2; }

.f-video { width: 252px; padding: 6px; border-radius: 14px; background: #1E1C19; box-shadow: 0 22px 44px -22px rgba(30,28,25,.55); }
.f-video .v-bild { position: relative; height: 150px; border-radius: 9px; overflow: hidden; }
.f-video .v-bild > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.f-video .v-ich { position: absolute; right: 8px; bottom: 8px; width: 64px; height: 46px; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1.5px rgba(253,252,248,.9); }
.f-video .v-ich img { display: block; width: 100%; height: 100%; object-fit: cover; }
.f-video .v-zeit { position: absolute; left: 8px; top: 8px; display: flex; align-items: center; gap: 5px; padding: 3px 7px 2px; border-radius: 999px; background: rgba(30,28,25,.55); color: #FDFCF8; font-size: 9px; }
.f-video .v-zeit i { width: 6px; height: 6px; border-radius: 50%; background: #FF5F57; }
.f-video .v-leiste { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 4px 3px 7px; }
.f-video .v-leiste .mono { color: rgba(242,240,235,.78); font-size: 9px; white-space: nowrap; }
.f-video .v-knoepfe { display: flex; gap: 5px; }
.f-video .v-knoepfe i { width: 16px; height: 16px; border-radius: 50%; background: rgba(242,240,235,.2); }
.f-video .v-knoepfe i.aus { background: #E5484D; }

.f-mappe { width: 172px; padding: 10px 10px 12px; border-radius: 6px; }
.f-mappe .ext { position: absolute; left: 16px; top: 16px; z-index: 1; background: var(--ink); color: var(--surface); padding: 3px 6px 2px; border-radius: 4px; font-size: var(--fs-micro); }
.f-mappe .m-cover { height: 118px; border-radius: 3px; overflow: hidden; }
.f-mappe .m-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.f-mappe b { display: block; margin-top: 10px; font-weight: 500; font-size: 15px; letter-spacing: -.01em; }
.f-mappe .name { display: block; margin-top: 3px; color: var(--ink-2); font-size: var(--fs-micro); letter-spacing: .04em; }

.f-frage { width: 218px; padding: 13px 16px 15px; border-radius: 18px 18px 18px 5px; background: color-mix(in srgb, var(--c-anfrage) 42%, var(--surface)); }
.f-frage .mono { color: var(--ink-2); font-size: var(--fs-micro); }
.f-frage b { display: block; margin-top: 5px; font-weight: 500; font-size: 27px; letter-spacing: -.035em; line-height: 1.02; }
.f-frage .f-wann { display: block; margin-top: 6px; font-size: 13px; color: var(--ink-2); }

/* ---------- Was Dipha ersetzt: Kassenzettel ---------- */
.bon-halter { filter: drop-shadow(0 34px 38px rgba(0,0,0,.42)) drop-shadow(0 2px 3px rgba(0,0,0,.22)); transform: rotate(1.4deg); }
.feld.bon {
  --zz: 16px;
  max-width: 460px; margin: 0 auto; padding: 34px 30px 32px; border-radius: 0; overflow: visible; box-shadow: none;
  background: #FBFAF4 linear-gradient(180deg, rgba(30,28,25,.025), transparent 18%, transparent 82%, rgba(30,28,25,.03));
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--zz) 51% repeat-x,
                conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--zz) 51% repeat-x;
          mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--zz) 51% repeat-x,
                conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--zz) 51% repeat-x;
}
.bon-kopf { text-align: center; padding-bottom: 14px; border-bottom: 1.5px dashed rgba(30,28,25,.3); }
.bon-kopf .bon-titel { font-size: 15px; letter-spacing: .2em; color: var(--ink); }
.bon-kopf .mono + .mono { margin-top: 6px; color: var(--ink-2); font-size: var(--fs-micro); }
.bon .slots { padding: 6px 0 6px; }
.bon .slot { grid-template-columns: 24px 1fr auto; gap: 10px; align-items: start; min-height: 0; padding: 7px 0; border-bottom: 0; }
.bon .b-pos { color: var(--ink-3); font-size: 11px; padding-top: 2px; }
.bon .slot b { font-family: "Suisse Mono", ui-monospace, monospace; font-weight: 400; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; line-height: 1.3; }
.bon .slot b small { font-family: "Suisse Mono", ui-monospace, monospace; text-transform: none; letter-spacing: 0; font-size: 11.5px; color: var(--ink-2); margin-top: 3px; }
.bon .slot b small s {
  text-decoration: none; padding: 0 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M1 6.5C18 4 34 7 52 5.2S86 4 119 4.6' fill='none' stroke='%232747A8' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") 0 58% / 100% 9px no-repeat;
}
.bon .b-ok { display: flex; align-items: center; gap: 1px; color: var(--tinte); transform: rotate(-5deg); margin-top: -3px; white-space: nowrap; }
.bon .b-ok .hand { font-size: 23px; line-height: 1; }
.hand-haken { width: 24px; height: 18px; fill: none; stroke: var(--tinte); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.bon-summe { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 4px; padding-top: 14px; border-top: 1.5px dashed rgba(30,28,25,.3); }
.bon-summe .mono { font-size: 12px; letter-spacing: .14em; color: var(--ink); }
.bon-zahl { position: relative; font-family: "Suisse Mono", ui-monospace, monospace; font-size: 26px; letter-spacing: -.02em; white-space: nowrap; }
.hand-strich { position: absolute; left: -10px; top: -2px; width: calc(100% + 20px); height: 100%; fill: none; stroke: var(--rot); stroke-width: 2.8; stroke-linecap: round; overflow: visible; }
.hand-strich path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .45s ease-out; }
.hand-strich path + path { transition-delay: .32s; }
.bon.is-voll .hand-strich path, .bon.in .hand-strich path { stroke-dashoffset: 0; }
.bon-notiz {
  display: flex; align-items: flex-end; gap: 2px; width: max-content; margin: 4px 0 0 auto;
  color: var(--rot); font-size: 40px; line-height: 1; transform: rotate(-5deg); transform-origin: right center;
  clip-path: inset(-30% 100% -30% -10%); transition: clip-path 1s cubic-bezier(.5, 0, .3, 1) .75s;
}
.bon.is-voll .bon-notiz, .bon.in .bon-notiz { clip-path: inset(-30% -10% -30% -10%); }
.hand-pfeil { width: 46px; height: 30px; margin-bottom: 10px; fill: none; stroke: var(--rot); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bon-fuss { margin-top: 16px; text-align: center; }
.bon-code { display: block; width: 62%; height: 30px; margin: 0 auto 8px; opacity: .82;
  background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 12px, var(--ink) 12px 13px, transparent 13px 16px); }
.bon-fuss .mono { color: var(--ink-2); font-size: var(--fs-micro); }
[data-mode="band"] .bon .slot { min-height: clamp(42px, 5.4vh, 52px); padding: 4px 0; }
[data-mode="band"] .bon .slot-in { grid-template-columns: 24px 1fr auto; gap: 10px; align-items: start; }
[data-mode="band"] .bon .slot::before { inset: auto 0 50% 34px; height: 0; border: 0; border-top: 1px dotted rgba(30,28,25,.28); border-radius: 0; }
@media (max-width: 699px) {
  .feld.bon { padding: 30px 18px 28px; }
  .bon .slot b { font-size: 12px; }
  .bon .b-ok .hand { font-size: 20px; }
  .bon-zahl { font-size: 22px; }
  .bon-notiz { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .hand-strich path { stroke-dashoffset: 0; transition: none; }
  .bon-notiz { clip-path: none; transition: none; }
}

/* Korrektur 09.11. mittags: Videocall ohne Fotos (Initialen), Ziffern in den Boxen weg */
.kiste .k-zahl { display: none; }
.f-video .v-bild { display: grid; place-items: center; background: linear-gradient(150deg, #CFE3F5 0%, #E9DDF0 55%, #F3D3DC 100%); }
.f-video .v-person { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; background: #7FA9CC; box-shadow: 0 0 0 6px rgba(253,252,248,.45), 0 0 0 12px rgba(253,252,248,.2); }
.f-video .v-person b { font-weight: 500; font-size: 22px; letter-spacing: -.02em; color: #FDFCF8; }
.f-video .v-name { position: absolute; left: 8px; bottom: 8px; padding: 3px 8px 2px; border-radius: 999px; background: rgba(30,28,25,.5); color: #FDFCF8; font-size: 10px; }
.f-video .v-ich { display: grid; place-items: center; background: #3A3631; }
.f-video .v-ich b { font-weight: 500; font-size: 13px; color: rgba(242,240,235,.85); }

/* Korrektur 09.11.: Luft unter der Mailadresse (Logo-Abschluss ist entfallen) */
.contact { padding-bottom: clamp(96px, 11vw, 160px); }

/* Korrektur 09.11.: Summe links als Ersparnis lesbar (nicht als Kosten) */
.summe .spar-label { display: inline-flex; align-items: center; gap: 8px; color: var(--c-projekt); }
.summe .spar-label svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; padding: 3px; box-sizing: content-box; border-radius: 50%; box-shadow: inset 0 0 0 1px currentColor; }
.summe .zahl.spar { color: var(--c-projekt); }
.summe .pro { position: relative; }
.summe .spar-notiz { display: inline-block; margin-left: .18em; vertical-align: top; color: var(--c-projekt); font-size: .3em; letter-spacing: 0; line-height: 1; transform: rotate(-8deg) translateY(.15em); }

/* Korrektur 09.11.: Stationsnamen mit gleichen Abständen statt gleicher Spalten */
.ab1-row { display: flex; justify-content: space-between; gap: 24px; }

/* =====================================================================
   KI-Hub 3 09.11.: rechts ein ruhiges Dipha-Fenster; Karten erscheinen
   von selbst, sobald ihr Faden ankommt (Fäden nur im Band-Modus)
   ===================================================================== */
.ki-faeden { display: none; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
[data-mode="band"] .ki-faeden { display: block; }
.kf { opacity: 0; transition: opacity .6s ease; }
.kf.da { opacity: 1; }
.kf-bahn { fill: none; stroke: rgba(30,28,25,.26); stroke-width: 1.1; stroke-dasharray: 1.5 5; stroke-linecap: round; }
.kf-glanz { fill: none; stroke: var(--kf); stroke-width: 4; stroke-linecap: round; opacity: 0; mix-blend-mode: multiply; }
.kf-anker { fill: var(--surface); stroke: rgba(30,28,25,.32); stroke-width: 1; }
.kf-b { fill: var(--kf); stroke: rgba(30,28,25,.25); }
.kf-hof { fill: var(--kf); opacity: 0; }
.kf-punkt { fill: var(--ink); opacity: 0; }

/* Dipha-Fenster */
.ki-app { min-width: 0; }
.kd-fenster { position: relative; z-index: 1; display: flex; flex-direction: column; background: var(--surface); border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 1px rgba(30,28,25,.08), 0 50px 100px -50px rgba(30,28,25,.45); }
.kd-kopf { display: flex; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.kd-kopf .wortmarke { gap: 9px; }
.kd-kopf .signet { width: 32px; }
.kd-kopf .wm { font-size: 16px; }
.kd-stapel { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 24px 22px; }
.kd-karte { position: relative; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 14px 18px; border-radius: 16px; overflow: hidden; background: var(--surface); box-shadow: 0 0 0 1px rgba(30,28,25,.07), 0 18px 36px -26px rgba(30,28,25,.35); transition: opacity .7s ease, transform .8s var(--ease), filter .8s ease, box-shadow .5s ease; }
.kd-sym { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--kf) 55%, var(--surface)); }
.kd-sym svg { width: 17px; height: 17px; fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.kd-satz { min-width: 0; font-weight: 500; font-size: 18px; line-height: 1.25; letter-spacing: -.015em; }
.kd-karte.aktiv { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--kf) 70%, var(--ink)), 0 0 0 7px color-mix(in srgb, var(--kf) 26%, transparent), 0 18px 36px -26px rgba(30,28,25,.35); }
/* Zauberhand: weich einblenden, danach einmal ein leichter Schimmer */
.kd-karte::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--kf) 45%, transparent) 50%, transparent 70%); transform: translate3d(-100%, 0, 0); }
.ki-anim .kd-karte[data-z]:not(.da) { opacity: 0; transform: translate3d(0, 10px, 0) scale(.98); filter: blur(6px); }
.ki-anim .kd-karte[data-z].da::after { animation: kd-schimmer 1.3s ease .15s both; }
@keyframes kd-schimmer { 0% { opacity: 1; transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; transform: translate3d(100%, 0, 0); } }

/* Chat: Bestätigung knapp, Erledigt in einer Zeile, Datei-Chip */
.kc-fertig.kc-eine { gap: 8px; font-size: 13px; color: var(--ink-2); }
.kc-fertig.kc-eine b { width: 18px; height: 18px; }
.kc-fertig.kc-eine b svg { width: 10px; height: 10px; }
.kc-eine [data-k] { transition: opacity .4s ease; }
.ki-anim .kc-eine [data-k]:not(.da) { opacity: 0; }
.kc-datei { display: flex; align-items: center; gap: 11px; min-width: 0; margin-top: 8px; padding: 9px 11px; border-radius: 10px; background: var(--surface); box-shadow: var(--ring); }
.kc-datei > span:last-child { min-width: 0; }
.kc-datei b { display: block; font-weight: 500; font-size: 13.5px; letter-spacing: -.01em; overflow-wrap: anywhere; }
.kc-datei small { display: block; margin-top: 1px; font-size: 12px; line-height: 1.3; color: var(--ink-2); }
.kb-pdf { flex: none; display: grid; place-items: end center; width: 28px; height: 34px; padding-bottom: 6px; border-radius: 3px; background: var(--ink); color: var(--surface); font-size: 8px; letter-spacing: .06em; clip-path: polygon(0 0, 68% 0, 100% 24%, 100% 100%, 0 100%); }

/* Band-Modus: Text schmal, Chat mittel, Dipha am größten */
[data-mode="band"] .ki { height: 460vh; }
[data-mode="band"] .ki-grid { --ki-h: clamp(480px, calc(100vh - var(--head-h) - 64px), 640px); grid-template-columns: minmax(0, .82fr) minmax(0, 1.1fr) minmax(0, 1.42fr); column-gap: clamp(28px, 2.8vw, 40px); align-items: center; }
[data-mode="band"] .ki-app { margin-left: clamp(20px, 2.6vw, 40px); }
[data-mode="band"] .ki-chat { height: var(--ki-h); }
[data-mode="band"] .kd-fenster { min-height: var(--ki-h); }
[data-mode="band"] .ki-text h2 { font-size: clamp(32px, 3vw, 44px); }
[data-mode="band"] .ki-text .intro { margin-top: 16px; font-size: 15.5px; }
[data-mode="band"] .ki-facts { font-size: 10px; letter-spacing: .08em; }
[data-mode="band"] .kc-verlauf { gap: 10px; padding: 16px; }
[data-mode="band"] .kc-msg p { font-size: 14.5px; }
[data-mode="band"] .kc-ich { max-width: 86%; padding: 9px 13px; }
[data-mode="band"] .kc-ki { width: 94%; padding: 11px 13px 12px; }
[data-mode="band"] .kc-feld { font-size: 14px; }
[data-mode="band"] .kc-liste li { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; font-size: 13px; }
[data-mode="band"] .kc-liste li span:not(.mono) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-height: 820px) {
  [data-mode="band"] .kd-stapel { gap: 9px; padding: 16px 18px; }
  [data-mode="band"] .kd-karte { min-height: 56px; padding: 11px 16px; }
  [data-mode="band"] .kd-satz { font-size: 17px; }
}

/* Ohne Band: Dipha-Fenster unter dem Chat */
@media (max-width: 899px) {
  .ki-app { order: 2; margin-top: 16px; }
  .kd-stapel { padding: 18px 16px; gap: 10px; }
  .kd-satz { font-size: 17px; }
}
@media (min-width: 900px) {
  [data-mode="linear"] .ki-app { grid-column: 1 / -1; margin-top: 8px; }
  [data-mode="linear"] .kd-stapel { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}

/* Korrekturen 09.11. aus der Browser-Prüfung */
.recht h2, .recht h1 { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 420px) { .recht h2, .recht h1 { font-size: clamp(30px, 9.4vw, 68px); } }
.bon .b-pos { color: var(--ink-2); }
.kc-platz { color: var(--ink-2); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.reveal:focus-within { opacity: 1 !important; transform: none !important; }