/* ============================================================
   Byteclue – start.css
   Startseite 2026, Konzept "Aktenfaden":
   warmes Papier, Haarlinien statt Kästen, ein Akzent (Tinte),
   eine Display-Stimme (Fraunces, Hausschrift, lokal gehostet).

   Wiederkehrende Elemente (der Faden):
   1. Registerschiene links: Position im Dokument + Sprungziel
   2. Haarlinien, die beim Eintreten aufziehen
   3. Zitatglyphe als Akzentmotiv
   4. Ein Radius- und Bewegungssystem

   Radien: 999px für alles Bedienbare, 18px Karten, 12px Felder.
   Bewegung: eine Kurve (--ease), drei Dauern (--fast/--med/--slow).
   ============================================================ */

:root {
  /* Papier */
  --paper:     #FAF8F4;
  --paper-2:   #F4F1EA;
  --card:      #FFFFFF;
  --line:      #E4DFD5;
  --line-2:    #CFC8BA;

  /* Tinte */
  --ink:       #16181C;
  --ink-2:     #4A4F58;
  --ink-3:     #6E7480;

  /* Ein Akzent, auf der ganzen Seite derselbe */
  --acc:       #1B3F7E;
  --acc-2:     #14305F;
  --acc-soft:  rgba(27,63,126,0.07);
  --acc-line:  rgba(27,63,126,0.22);

  --ok:        #2F7D52;

  /* Schrift (lokal, keine externen Requests) */
  --display: 'Cabinet Grotesk', 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sans:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'DM Mono', ui-monospace, Consolas, monospace;

  /* Maß */
  --wrap: 1200px;
  --gut: clamp(20px, 4vw, 44px);
  --r-card: 18px;
  --r-field: 12px;

  /* Bewegung */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  /* Überschwingende Kurve, nur für kleine Schalter (Plus, Knopf) */
  --pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --slow: 0.7s var(--ease);
  /* Ruhige Dauer fuer das Anheben von Flaechen. Eigene, sehr weich
     auslaufende Kurve: die Karte gleitet, statt zu springen. */
  --glide: cubic-bezier(0.22, 1, 0.36, 1);
  --calm: 0.85s var(--glide);
  /* Schatten faellt nach unten, nicht ringsum. Bewusst eng gehalten: eine
     kurze Kontaktkante plus ein knapper Wurf, damit die Karte abgesetzt
     wirkt und nicht in den Untergrund ausblendet. */
  --lift: 0 1px 2px rgba(22,24,28,0.05), 0 14px 26px -10px rgba(22,24,28,0.26);
  --med:  0.42s var(--ease);
  --fast: 0.22s var(--ease);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.68;
  min-height: 100dvh;
  /* clip statt hidden: verhindert waagerechtes Ueberlaufen, macht den
     Body aber NICHT zum Scroll-Container. hidden haette overflow-y zu
     auto gemacht, den Scroll im Body gefangen und die fixierte
     Kopfleiste auf Mobil aus dem Tritt gebracht. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--acc); color: #fff; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 3px; }

/* Filmkorn: fix, dezent, ohne Interaktion */
.grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: 0.5; mix-blend-mode: multiply;
  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='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");
}

/* ── Layout ─────────────────────────────────────────────────── */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); position: relative; z-index: 1; }
section { position: relative; }
.sec { padding: clamp(72px, 7.5vw, 112px) 0; }
.sec--tight { padding: clamp(56px, 5.5vw, 88px) 0; }
.sec--alt { background: var(--paper-2); }

/* Papiertextur: zwei Muster, sehr flach, als Sektionsgrund.
   Kein Deko-Raster, sondern Papierstruktur unter dem Satzspiegel. */
.tex { position: relative; }
.tex::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.tex--rule::before {
  background-image: repeating-linear-gradient(to bottom, rgba(22,24,28,0.028) 0 1px, transparent 1px 42px);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.tex--dot::before {
  background-image: radial-gradient(rgba(22,24,28,0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(120% 80% at 50% 40%, #000 35%, transparent 78%);
}

/* Naht zwischen den Sektionen: Haarlinie mit kurzem Akzentanschnitt */
.seam { position: relative; height: 1px; background: var(--line); }
/* Der Anschnitt sitzt buendig zur Textspalte, nicht am Fensterrand */
.seam::after {
  content: ''; position: absolute; top: 0; height: 1px; width: 74px;
  left: max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut)));
  background: var(--acc); opacity: 0.5;
}

/* ── Typografie ─────────────────────────────────────────────── */
/* Display ist jetzt eine Grotesk (Cabinet Grotesk): etwas weniger
   enges Tracking als bei der frueheren Serifenschrift, damit die
   breiteren Grotesk-Formen Luft behalten. */
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.028em; line-height: 1.06; text-wrap: balance; }
.h-sec { font-size: clamp(30px, 3.6vw, 46px); max-width: 22ch; }
.lead { font-size: clamp(16px, 1.2vw, 18px); color: var(--ink-2); max-width: 60ch; line-height: 1.7; }
/* Waisenkinder in Fliesstext vermeiden, wo der Browser es unterstuetzt */
p { text-wrap: pretty; }

/* Sektionskopf: Titel links, darunter die Haarlinie, die sich
   beim Eintreten aufzieht. (Die fruehere Nebenangabe rechts ist
   entfallen: das reine Titelbild wirkt ruhiger und weniger schematisch.) */
.head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 18px;
  padding-bottom: 20px; margin-bottom: clamp(28px, 3.6vw, 46px);
  position: relative;
}
.head::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--line); transform-origin: left;
  transition: transform 1s var(--ease);
}
.head__aside {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
}

/* ── Bedienelemente ─────────────────────────────────────────── */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 8px 8px 24px; border: 0; border-radius: 999px;
  background: var(--acc); color: #fff;
  font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  cursor: pointer; white-space: nowrap;
  transition: transform var(--fast), background var(--med), box-shadow var(--med);
}
/* Kein quer durchlaufender Lichtstreifen (zu generisch): beim Ueberfahren
   blueht ein weiches Licht am Knopf auf, genau dort wo die Aktion sitzt.
   Es faedt am Handlungspunkt ein, statt als Streifen durchzuwandern. */
.btn::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 150% at calc(100% - 18px) 50%, rgba(255,255,255,0.24), transparent 56%);
  opacity: 0; transition: opacity var(--med);
}
.btn:hover::after { opacity: 1; }
.btn--quiet::after { display: none; }
.btn:hover { background: var(--acc-2); box-shadow: 0 10px 26px rgba(27,63,126,0.22); }
.btn:active { transform: scale(0.978); }
.btn .knob {
  position: relative; z-index: 1;
  width: 32px; height: 32px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: rgba(255,255,255,0.16);
  transition: transform 0.45s var(--pop), background var(--med);
}
.btn:hover .knob { transform: translate(3px, -2px) scale(1.06); background: rgba(255,255,255,0.32); }
.btn--quiet {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line-2); padding: 12px 22px; box-shadow: none;
}
.btn--quiet:hover { background: var(--card); border-color: var(--ink-3); box-shadow: none; }
/* Auf schmalen Geraeten faellt der zweite Knopf im Hero sonst unter den
   ersten: "Leistungen ansehen" braucht 188 px, zusammen mit "Fall schildern"
   und dem Abstand passt das bis 408 px Viewport nicht mehr nebeneinander.
   Verkuerzt auf "Leistungen" haelt die Zeile bis 344 px. Die Grenze liegt
   bei 420 px, also knapp ueber dem Umbruch und noch unter den breiten
   Telefonen (428/430 px), die das lange Label weiter zeigen sollen.

   Das Label steht dabei in einer eigenen Huelle: .btn ist inline-flex mit
   gap, ein blosser Span um " ansehen" wuerde sonst ein zweites Flex-Element
   und der Wortabstand zum 12-px-Gap. */
@media (max-width: 420px) { .btn__more { display: none; } }

.tlink {
  position: relative; display: inline-flex; align-items: center; gap: 9px;
  font-size: 14.5px; font-weight: 600; color: var(--acc); padding-bottom: 3px;
}
.tlink::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--acc); transform: scaleX(0); transform-origin: right;
  transition: transform var(--med);
}
.tlink:hover::after { transform: scaleX(1); transform-origin: left; }
.tlink svg { transition: transform var(--med); }
.tlink:hover svg { transform: translateX(4px); }

/* ── Navigation ─────────────────────────────────────────────── */
.nav {
  /* sticky statt fixed: folgt dem sichtbaren Viewport auch im mobilen
     Device-Mode zuverlaessig (fixed wanderte dort beim Scrollen halb
     nach oben heraus). Body hat overflow-x: clip, ist also kein Scroll-
     Container, darum klebt die Nav am Viewport, nicht an einem Vorfahren.
     Sie liegt jetzt wieder im Fluss, daher das kleinere Hero-Top-Padding. */
  position: sticky; top: 16px;
  margin: 16px auto 0;
  z-index: 80; width: min(var(--wrap), calc(100% - 2 * var(--gut)));
  display: flex; align-items: center; gap: 16px;
  padding: 8px 8px 8px 18px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(250,248,244,0.86);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  /* Freischwebender Pill: mehrschichtiger, zur Tinte getoenter Schatten,
     damit die Leiste klar ueber dem Inhalt schwebt statt aufzuliegen. */
  box-shadow:
    0 1px 2px rgba(22,24,28,0.10),
    0 4px 10px rgba(22,24,28,0.13),
    0 12px 22px -10px rgba(22,24,28,0.16);
  overflow: hidden;
  /* Ruhezustand ganz oben -> Glaszustand beim Scrollen wird weich
     ueberblendet (Zustandswechsel per .is-glass, siehe unten). */
  transition: background var(--med), backdrop-filter var(--med),
              -webkit-backdrop-filter var(--med),
              border-color var(--med), box-shadow var(--med);
}

/* Sentinel ganz oben im Dokument: solange sichtbar = "ganz oben".
   Verlaesst er den Viewport (nach unten gescrollt), setzt JS .is-glass
   auf die Nav. Unsichtbar, ausserhalb des Flusses, kein Layout-Effekt. */
.nav-sentinel {
  position: absolute; top: 0; left: 0; width: 1px; height: 24px;
  pointer-events: none; visibility: hidden;
}

/* Liquid-Glass: sobald man nicht mehr ganz oben ist, wird die Leiste
   deutlich transparenter und glaesern -- staerkerer Blur/Saturation,
   oberer Lichtsaum und eine feine Kantenrefraktion (inset-Schatten),
   damit die Glaskante wie gebrochen wirkt statt flach aufzuliegen. */
.nav.is-glass {
  /* Ungleichmaessige Frost-Oberflaeche: mehrere weiche Licht-/Schatteninseln
     an unregelmaessigen Positionen + ein diagonaler Specular-Streifen, damit
     die Flaeche mottlig/gebrochen wirkt statt als flacher, gleichmaessiger Ton.
     Grundton deutlich transparenter als zuvor. */
  /* Taktiles Glanz-Glas (wie physische Milchglas-Pillen): ein weicher,
     glossy Licht-Reflex im oberen Bereich + gerichtete Lichtkante geben der
     Pille Volumen und eine reflektierende Oberflaeche statt einer flachen
     Folie. Grundton so gewaehlt, dass der dunkle Text ueber JEDEM Grund
     (helle Bilder wie dunkle Baender) lesbar bleibt. */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.46) 0%, rgba(255,255,255,0.12) 40%, rgba(255,255,255,0) 66%),
    linear-gradient(125deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0) 42%),
    rgba(250,248,244,0.22);
  /* Bewusst wenig Blur -> klar/transparent statt milchig; Sattigung+Helligkeit
     lassen den Inhalt durchleuchten. Der Text-Halo unten haelt die Lesbarkeit. */
  backdrop-filter: blur(6px) saturate(185%) brightness(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(185%) brightness(1.05);
  border-color: rgba(255,255,255,0.5);
  box-shadow:
    /* Aussenkontur: hebt die Pille auch auf hellem Papier klar vom Grund ab */
    0 0 0 1px rgba(22,24,28,0.06),
    /* Schaerfer gezeichneter Schwebeschatten (weniger Blur, etwas deutlicher) */
    0 3px 7px rgba(22,24,28,0.12),
    0 12px 22px -10px rgba(22,24,28,0.26),
    /* INNER BORDER + Glanz-Volumen: sanfter Lichtrand + weiche Top-Edge +
       leichter Innenglow oben geben Dicke ohne harten weissen Rahmen; unten
       dezentes dunkleres Volumen fuer die Glaskante. */
    inset 0 0 0 1px rgba(255,255,255,0.32),
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 11px 22px -11px rgba(255,255,255,0.5),
    inset 0 -1.5px 1px rgba(22,24,28,0.08),
    inset 0 -18px 30px -18px rgba(22,24,28,0.10);
}
/* Dezenter heller Halo haelt den dunklen Text ueber wechselndem Grund
   zusaetzlich frei -- nur im Glaszustand, nur Desktop. */
.nav.is-glass .nav__brand b,
.nav.is-glass .nav__links a { text-shadow: 0 0 9px rgba(255,255,255,0.5); }
/* Ueber dem transparenten Glas (v.a. auf dunklen Sektionen) brauchen die
   inaktiven Links etwas mehr Kontrast -> sanft dunkler als das ruhige
   Mittelgrau. Der aktive blaue Link (.on) bleibt unberuehrt. */
.nav.is-glass .nav__links a:not(.on) { color: #2C3038; }
/* Aktueller Abschnitt ueber transparentem Glas: das zarte acc-soft (7% Blau)
   verschwindet auf dunklen Sektionen. Darum im Glaszustand eine gefuellte
   blaue Pille mit weisser Schrift -> klar abgezeichnet ueber hell wie dunkel. */
.nav.is-glass .nav__links a.on {
  background: var(--acc); color: #fff; text-shadow: none;
}
/* Feine Oberflaechen-Koernung nur auf dem Glas (dieselbe SVG-Noise wie das
   globale Filmkorn, aber staerker), damit die Pille taktil/frosted statt
   lackglatt wirkt. soft-light = Textur, kein grauer Schleier. Liegt hinter
   dem Text (z-index:-1) und wird auf die Pille geclippt. */
.nav.is-glass::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  opacity: 0.4; mix-blend-mode: soft-light;
  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='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");
}
.nav__brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.nav__brand img { width: 28px; height: 28px; border-radius: 7px; }
.nav__brand b { font-size: 16.5px; font-weight: 600; letter-spacing: -0.02em; }
.nav__links { display: flex; align-items: center; gap: 2px; }
.nav__links a {
  padding: 9px 14px; border-radius: 999px; font-size: 14.5px; font-weight: 500; color: var(--ink-2);
  transition: color var(--fast), background var(--fast);
}
.nav__links a:hover { color: var(--ink); background: var(--paper-2); }
/* Aktueller Abschnitt: die Navigation uebernimmt die Orientierung,
   die frueher die Schiene am linken Rand leisten sollte. */
.nav__links a.on { color: var(--acc); background: var(--acc-soft); }
.nav__burger { display: none; }

/* Lesefortschritt am unteren Rand der Navigation.
   Scroll-getriebene CSS-Animation, kein Scroll-Listener. */
.nav__prog { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: transparent; }
.nav__prog i { display: block; height: 100%; background: var(--acc); opacity: 0.55; transform: scaleX(0); transform-origin: left; }
@supports (animation-timeline: scroll()) {
  .nav__prog i { animation: prog linear both; animation-timeline: scroll(root block); }
  @keyframes prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* Nahe am Umschaltpunkt die volle Nav etwas kompakter (kleinere Gaps/Padding/
   Schrift), damit die fuenf Links + Button bis ~940px einzeilig bleiben statt
   vorzeitig zweizeilig umzubrechen. Grosse Screens bleiben unveraendert luftig. */
@media (max-width: 1040px) {
  .nav { gap: 12px; }
  .nav__links a { padding: 9px 11px; font-size: 14px; }
}

@media (max-width: 940px) {
  /* Umschalten auf Burger bei 940px: der Nutzer will die Desktop-Leiste bis
     ~940/950px halten; knapp darunter passen die Links nicht mehr einzeilig. */
  /* Glas jetzt auch mobil aktiv: seit die Nav position:sticky ist (frueher
     fixed), bleibt sie im mobilen Compositing beim Scrollen stabil -- der
     alte Grund, backdrop-filter mobil abzuschalten, entfaellt. Es gelten
     also dieselben Glas-Regeln wie auf Desktop (Ruhe + .is-glass). */
  .nav__links, .nav .btn { display: none; }
  .nav__burger {
    display: grid; place-items: center; width: 40px; height: 40px; flex: none;
    border: 1px solid var(--line); border-radius: 50%; background: var(--card); cursor: pointer;
  }
  .nav__burger span { display: block; width: 16px; height: 1.5px; background: var(--ink); border-radius: 2px; transition: transform var(--med), opacity var(--fast); }
  .nav__burger span + span { margin-top: 5px; }
  body.menu-open .nav__burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  body.menu-open .nav__burger span:nth-child(2) { opacity: 0; }
  body.menu-open .nav__burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}

.menu {
  position: fixed; inset: 0; z-index: 70; display: grid; align-content: center; gap: 4px;
  padding: 0 var(--gut);
  background: rgba(250,248,244,0.94);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  opacity: 0; pointer-events: none; transition: opacity var(--med);
}
body.menu-open .menu { opacity: 1; pointer-events: auto; }
.menu a {
  font-family: var(--display); font-size: clamp(28px, 7vw, 42px); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.3;
  opacity: 0; transform: translateY(24px);
  transition: opacity var(--slow), transform var(--slow);
}
body.menu-open .menu a { opacity: 1; transform: none; }
body.menu-open .menu a:nth-child(1) { transition-delay: 0.05s; }
body.menu-open .menu a:nth-child(2) { transition-delay: 0.10s; }
body.menu-open .menu a:nth-child(3) { transition-delay: 0.15s; }
body.menu-open .menu a:nth-child(4) { transition-delay: 0.20s; }
body.menu-open .menu a:nth-child(5) { transition-delay: 0.25s; }
body.menu-open .menu a:nth-child(6) { transition-delay: 0.30s; }

/* Aktenreif ist ein eigenes Produkt, kein Seitenanker: darum unten
   abgesetzt, kleiner, mit Logo und einer Zeile Erklaerung. */
.menu a.menu__product {
  display: flex; align-items: center; gap: 13px;
  margin-top: 26px; padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 0;
}
.menu__product img { width: 34px; height: 34px; border-radius: 9px; flex: none; }
.menu__product b {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: 21px; letter-spacing: -0.02em; color: var(--ink); line-height: 1.12;
}
.menu__product small {
  display: block; font-family: var(--sans); font-weight: 400;
  font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--ink-3); margin-top: 1px;
}

/* ── Hero ───────────────────────────────────────────────────── */
.hero { padding: clamp(30px, 3.6vw, 52px) 0 clamp(40px, 4vw, 60px); overflow: hidden; }
.hero::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  top: -26%; left: 54%; width: min(1240px, 128vw); aspect-ratio: 1.4;
  transform: translateX(-50%);
  /* Nur warmes Messing, kein blauer Anteil */
  background:
    radial-gradient(44% 48% at 62% 34%, rgba(201,150,58,0.13), transparent 74%),
    radial-gradient(36% 40% at 30% 52%, rgba(201,150,58,0.06), transparent 76%);
}
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(32px, 4.6vw, 68px); align-items: center;
}
/* Die Textspalte ist Query-Container: die H1 skaliert mit ihrer Breite
   (cqi), fuellt so die zwei festen Zeilen mit der groesstmoeglichen
   Schrift -- auf Mobil (volle Breite) wie Desktop (halbe Spalte). */
.hero__grid > div:first-child { container-type: inline-size; }
.hero__label {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-3);
  padding-bottom: 14px; margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
  display: flex; gap: 12px; align-items: baseline;
}
.hero__label b { color: var(--acc); font-weight: 500; }
/* Feste zwei Zeilen (harter <br> im Markup), Groesse = Container-Breite:
   11cqi fuellt die laengere Zeile ("Technische Klarheit", ~8.86em) auf ~97%,
   also die groesstmoegliche Schrift ohne dritten Umbruch. */
.hero h1 { font-size: clamp(28px, 11cqi, 72px); line-height: 1.04; letter-spacing: -0.03em; white-space: nowrap; }
.hero__sub { margin-top: 22px; font-size: clamp(16px, 1.15vw, 18px); color: var(--ink-2); max-width: 44ch; line-height: 1.65; }
.hero__acts { display: flex; align-items: center; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
@media (max-width: 760px) { .hero__grid { grid-template-columns: 1fr; gap: 36px; } }
/* Auf schmalen Screens enger setzen, damit die Kennzeile in eine Zeile passt */
@media (max-width: 560px) { .hero__label { font-size: 10px; letter-spacing: 0.08em; } }

/* Belegleiste unter dem Hero: drei harte Angaben auf einer Linie */
.facts {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.facts div { padding: 20px 26px 20px 0; position: relative; }
.facts div + div { padding-left: clamp(20px, 3vw, 40px); }
.facts div + div::before { content: ''; position: absolute; left: 0; top: 20px; bottom: 20px; width: 1px; background: var(--line); }
.facts dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.facts dd { font-family: var(--display); font-size: clamp(17px, 1.5vw, 21px); font-weight: 700; letter-spacing: -0.028em; }
@media (max-width: 760px) {
  .facts { grid-template-columns: 1fr; }
  .facts div { padding: 16px 0; border-top: 1px solid var(--line); }
  .facts div:first-child { border-top: 0; }
  .facts div + div { padding-left: 0; }
  .facts div + div::before { display: none; }
}

/* ── Anfragenkarte: das lebendige Element ───────────────────── */
.tick {
  position: relative; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: clamp(24px, 2.6vw, 32px);
  box-shadow: 0 1px 2px rgba(22,24,28,0.04), 0 18px 44px rgba(22,24,28,0.07);
  transition: transform var(--calm), box-shadow var(--calm), border-color var(--calm);
}
.tick:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--lift); }
.tick__top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3); padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--line);
}
.tick__count { font-variant-numeric: tabular-nums; color: var(--ink-2); }

.tick__stage { position: relative; min-height: 132px; }
.tick__stage::before {
  content: '\201E';
  position: absolute; left: 0; top: -18px;
  font-family: var(--display); font-weight: 700; font-size: 60px; line-height: 1;
  color: var(--acc); opacity: 0.15; pointer-events: none;
}
/* Blättern: die alte Lage kippt nach oben weg, die neue kommt von unten */
.tick__item {
  position: absolute; inset: 0 0 0 50px;
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
  transform: translateY(26px) rotateX(9deg) scale(0.985);
  transform-origin: 50% 100%;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.tick__item.on { opacity: 1; transform: none; pointer-events: auto; }
.tick__item.out { opacity: 0; transform: translateY(-22px) rotateX(-10deg) scale(0.985); }
.tick__item p {
  font-family: var(--display); font-weight: 400; font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.4; letter-spacing: -0.018em; color: var(--ink);
}
/* Zuordnung bleibt immer sichtbar. Ein zusaetzlicher Einblendeffekt
   brachte hier nichts ausser einer Fehlerquelle beim Wechsel. */
/* Zuordnung sitzt fest am unteren Rand der Buehne (ueber den Balken),
   damit das eintippende Zitat sie nicht mehr nach unten schiebt. */
.tick__item cite {
  display: block; margin-top: auto; padding-top: 14px; font-style: normal;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--acc);
}
.caret {
  display: inline-block; width: 2px; height: 0.92em; margin-left: 3px;
  background: var(--acc); vertical-align: -0.09em;
  animation: blink 1.05s steps(1, end) infinite;
}
@keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

.tick__nav { display: flex; gap: 8px; margin-top: 20px; }
.tick__nav button { flex: 1; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; }
.tick__nav i { display: block; width: 100%; height: 3px; background: var(--line-2); border-radius: 3px; overflow: hidden; position: relative; }
.tick__nav i::after {
  content: ''; position: absolute; inset: 0; background: var(--acc);
  transform: scaleX(0); transform-origin: left;
}
.tick__nav button.done i::after { transform: scaleX(1); }
.tick__nav button.run i::after { animation: fill var(--tick-dur, 7s) linear forwards; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.tick__nav button:hover i { background: var(--ink-3); }

/* ── Positionsband ──────────────────────────────────────────── */
.stance { background: var(--ink); color: #fff; overflow: hidden; }
.stance::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(56% 130% at 84% 8%, rgba(255,255,255,0.10), transparent 62%),
    radial-gradient(46% 110% at 4% 100%, rgba(27,63,126,0.42), transparent 68%);
}
/* feine Papierrillen auch auf dunklem Grund */
.stance::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: repeating-linear-gradient(to bottom, rgba(255,255,255,0.028) 0 1px, transparent 1px 46px);
}
.stance__in {
  padding: clamp(44px, 5vw, 72px) 0;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px); align-items: start;
}
.stance p.big {
  font-family: var(--display); font-weight: 500; font-size: clamp(21px, 2.2vw, 30px);
  line-height: 1.3; letter-spacing: -0.022em; color: #fff; max-width: 30ch; text-wrap: balance;
  align-self: center;
}
.stance ul { list-style: none; display: grid; gap: 20px; align-self: center; }
.stance li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.stance li svg { margin-top: 3px; color: #fff; opacity: 0.55; flex: none; }
/* Zweizeilig: fettes Substantiv-Label, darunter die konkrete Beschreibung. */
.stance__it b { display: block; font-family: var(--sans); font-weight: 600; font-size: 15.5px; letter-spacing: -0.01em; color: #fff; margin-bottom: 4px; }
.stance__it span { display: block; font-size: 14px; color: rgba(255,255,255,0.62); line-height: 1.5; }
@media (max-width: 860px) { .stance__in { grid-template-columns: 1fr; } }

/* ── Register (Anliegen) ────────────────────────────────────── */
.reg { border-top: 1px solid var(--line); }
.reg__row { border-bottom: 1px solid var(--line); }
.reg__head {
  position: relative; width: 100%;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center; gap: clamp(14px, 2.6vw, 34px);
  padding: clamp(20px, 2.4vw, 28px) 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: inherit; color: inherit;
  transition: padding var(--med);
}
.reg__head::before {
  content: ''; position: absolute; left: -16px; right: -16px; top: 0; bottom: 0; z-index: -1;
  background: var(--card); opacity: 0; border-radius: 10px; transition: opacity var(--med);
}
.reg__row:hover:not(.is-open) .reg__head::before { opacity: 1; }
.reg__row:hover .reg__head, .reg__row.is-open .reg__head { padding-left: 16px; }
.reg__no { font-family: var(--mono); font-size: 12px; color: var(--ink-3); transition: color var(--med); }
.reg__row:hover .reg__no, .reg__row.is-open .reg__no { color: var(--acc); }
.reg__title { font-family: var(--display); font-weight: 700; font-size: clamp(20px, 2.4vw, 31px); line-height: 1.08; letter-spacing: -0.03em; }
.reg__tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.reg__plus {
  position: relative; width: 32px; height: 32px; flex: none;
  border: 1px solid var(--line-2); border-radius: 50%;
  transition: background var(--med), border-color var(--med), transform 0.55s var(--pop);
}
.reg__plus::before, .reg__plus::after {
  content: ''; position: absolute; top: 50%; left: 50%; background: var(--ink);
  transform: translate(-50%, -50%); transition: background var(--med), transform var(--med);
}
.reg__plus::before { width: 11px; height: 1.5px; }
.reg__plus::after { width: 1.5px; height: 11px; }
.reg__row.is-open .reg__plus { background: var(--acc); border-color: var(--acc); transform: rotate(135deg); }
.reg__row.is-open .reg__plus::before, .reg__row.is-open .reg__plus::after { background: #fff; }

.reg__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--slow); }
.reg__row.is-open .reg__panel { grid-template-rows: 1fr; }
.reg__panelin { overflow: hidden; }
.reg__body {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: clamp(22px, 4vw, 56px);
  padding: 2px 16px clamp(26px, 3.2vw, 38px) clamp(38px, 5vw, 72px);
}
.reg__body p { color: var(--ink-2); font-size: 15.5px; line-height: 1.72; max-width: 52ch; }
.reg__body p + p { margin-top: 12px; }
.reg__body a { color: var(--acc); border-bottom: 1px solid var(--acc-line); }
.reg__side { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.reg__list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.reg__list li { position: relative; padding-left: 18px; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.reg__list li::before { content: ''; position: absolute; left: 0; top: 10px; width: 8px; height: 1px; background: var(--acc); }
/* Preis-Pille als kleiner, hochwertiger CTA zum Kontakt: schwarze Pille,
   weisse Mono-Schrift, Pfeil-Chip in der Sprache des Haupt-Buttons. Schwarz
   ist neutral (kein zweiter Akzent) -> Taste-Skill-konform. */
.reg__note {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; font-weight: 500;
  color: #fff; text-decoration: none;
  padding: 8px 8px 8px 15px;
  border: 1px solid var(--ink); border-radius: 999px; background: var(--ink);
  box-shadow: 0 1px 2px rgba(22,24,28,0.12), 0 10px 22px -8px rgba(22,24,28,0.30);
  transition: transform var(--fast), box-shadow var(--fast), background var(--fast);
}
.reg__note__ic {
  display: grid; place-items: center; flex: none;
  width: 19px; height: 19px; border-radius: 50%;
  background: rgba(255,255,255,0.16); color: #fff;
  transition: transform var(--fast), background var(--fast);
}
.reg__note__ic svg { width: 11px; height: 11px; }
.reg__note:hover {
  background: #22252c; transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(22,24,28,0.14), 0 16px 30px -10px rgba(22,24,28,0.38);
}
.reg__note:hover .reg__note__ic { background: rgba(255,255,255,0.26); transform: translate(1px,-1px); }
.reg__note:active { transform: translateY(0) scale(0.98); }
.reg__note:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
/* Muss die generische Link-Regel .reg__body a (blau + Unterstrich) schlagen:
   auf der schwarzen Pille bleibt die Schrift weiss, ohne Unterstrich. */
.reg__body a.reg__note { color: #fff; border-bottom: none; }
.reg__body a.reg__note:hover { color: #fff; }
/* Offene Zeile wird zur zusammenhängenden Karte */
.reg__row.is-open {
  background: var(--card); border-radius: 14px; border-bottom-color: transparent;
  box-shadow: 0 1px 2px rgba(22,24,28,0.04), 0 18px 44px rgba(22,24,28,0.06);
  margin: 0 -16px; padding: 0 16px;
}
@media (max-width: 860px) {
  .reg__head { grid-template-columns: auto minmax(0, 1fr) auto; }
  .reg__tag { display: none; }
  .reg__body { grid-template-columns: 1fr; padding-left: 0; padding-right: 0; }
}

/* ── Ablauf ─────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 20px); }
.step {
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: clamp(26px, 3vw, 36px);
  transition: transform var(--calm), box-shadow var(--calm), border-color var(--calm);
}
/* Dieselbe Haarlinie wie bei den Beitragskarten: ein Verhalten fuer alle Karten */
.step::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--acc); transform: scaleX(0); transform-origin: left;
  transition: transform var(--calm);
}
.step:hover::before { transform: scaleX(1); }
.step:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--lift); }
.step__no {
  display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 20px;
  border: 1px solid var(--acc-line); border-radius: 50%;
  background: var(--acc-soft); color: var(--acc);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em;
  transition: background var(--med), color var(--med);
}
.step:hover .step__no { background: var(--acc); color: #fff; border-color: var(--acc); }
.step__no { transition: background var(--med), color var(--med), border-color var(--med); }
.step h3 { font-size: clamp(19px, 1.8vw, 23px); margin-bottom: 10px; }
.step p { color: var(--ink-2); font-size: 15px; line-height: 1.66; }
/* Chevron nur mobil sichtbar: dort werden die Schritte zu Tap-Akkordeons. */
.step__chev { display: none; }
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; }
  /* Schritte einzeln aufklappbar (immer nur einer offen), initial eingeklappt.
     Der Chevron unten signalisiert, dass hier mehr steckt. */
  .step { cursor: pointer; padding-bottom: 0; }
  .step h3 { margin-bottom: 0; }
  .step.is-open h3 { margin-bottom: 10px; }
  .step__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--med); }
  .step.is-open .step__body { grid-template-rows: 1fr; }
  .step__body > * { overflow: hidden; min-height: 0; }
  .step__chev { display: flex; justify-content: center; margin-top: 12px; padding-bottom: clamp(18px, 4vw, 24px); color: var(--ink-3); }
  .step__chev svg { transition: transform var(--med); }
  .step.is-open .step__chev svg { transform: rotate(180deg); }
  .step:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
  /* Kein klebendes :hover-Anheben auf Touch. */
  .step:hover { transform: none; box-shadow: none; border-color: var(--line); }
}

/* Honorar: offene Tafel, bewusst kein drittes Kartenraster */
.fee { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(26px, 3vw, 40px); border-top: 1px solid var(--line-2); }
.fee__item { position: relative; padding: 26px 30px 26px 0; }
.fee__item + .fee__item { padding-left: clamp(24px, 3vw, 44px); }
.fee__item + .fee__item::before { content: ''; position: absolute; left: 0; top: 26px; bottom: 26px; width: 1px; background: var(--line); }
.fee__item dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.fee__item dd { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.032em; line-height: 1.1; }
.fee__item dd small { display: block; margin-top: 10px; font-family: var(--sans); font-weight: 400; font-size: 13.5px; letter-spacing: 0; color: var(--ink-3); line-height: 1.55; max-width: 30ch; }
/* Die kostenlose Stufe ist das Einstiegsargument und traegt deshalb
   eine eigene Flaeche statt nur einer anderen Schriftfarbe. */
.fee__item--free {
  background: var(--acc-soft);
  border-radius: var(--r-card);
  /* Etwas kleiner + eingerueckt, damit die Tafel nicht an die obere Linie
     und den rechten Trennstrich stoesst. */
  margin: 10px 16px 2px 0;
  padding: 20px clamp(18px, 2vw, 24px);
  /* Gegossenes Element statt loser Text: nicht markierbar, mit dezentem,
     zur Tinte getoentem Auftrieb, damit es als solide Tafel wirkt. */
  user-select: none; -webkit-user-select: none;
  box-shadow:
    inset 0 0 0 1px var(--acc-line),
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 1px 2px rgba(22,24,28,0.04),
    0 14px 26px -16px rgba(27,63,126,0.22);
}
.fee__item--free dt { color: var(--acc); }
.fee__item--free dd { color: var(--acc); }
.fee__item--free dd small { color: var(--ink-2); }
.fee__item + .fee__item--free::before { display: none; }
/* Rechtliche Hinweise als eigene Tafel: sie sollen auffindbar sein,
   aber die Preiszeile nicht unruhig machen. */
/* Rechtliche Hinweise eingeklappt: standardmaessig nur eine ruhige Zeile,
   ausklappbar. So bleibt es auffindbar, wirkt aber nicht wie Kleingedrucktes. */
.fee__note {
  margin-top: clamp(20px, 2.4vw, 30px);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
}
.fee__note > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2);
  transition: color var(--fast);
}
.fee__note > summary::-webkit-details-marker { display: none; }
.fee__note > summary::marker { content: ''; }
.fee__note > summary:hover { color: var(--ink); }
.fee__note > summary:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: var(--r-card); }
.fee__note__chev { margin-left: auto; color: var(--ink-3); flex: none; transition: transform var(--med); }
.fee__note[open] .fee__note__chev { transform: rotate(180deg); }
.fee__note__body {
  margin: 0; padding: 2px 20px 16px;
  font-size: 12.5px; color: var(--ink-3); line-height: 1.7;
}
.fee__note__body a { color: var(--ink-2); border-bottom: 1px solid var(--line-2); }
@media (max-width: 860px) {
  .fee { grid-template-columns: 1fr; }
  .fee__item { padding: 20px 0; border-top: 1px solid var(--line); }
  .fee__item:first-child { border-top: 0; }
  .fee__item + .fee__item { padding-left: 0; }
  .fee__item + .fee__item::before { display: none; }
  /* Die Kostenlos-Tafel behaelt ihren eigenen Innenabstand, auch einspaltig;
     die Desktop-Raender werden zurueckgesetzt (volle Breite). */
  .fee__item--free { padding: 22px clamp(18px, 5vw, 24px); margin: 16px 0 10px 0; }
}

/* Sehr schwache, weit gestreute Lichtpunkte: bringen Tiefe in die
   unteren Sektionen, ohne einen weiteren Farbton einzufuehren. */
#ueber-mich::after, #kontakt::after {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  width: clamp(280px, 34vw, 460px); aspect-ratio: 1; border-radius: 50%;
  background: var(--acc); opacity: 0.05; filter: blur(90px);
}
#ueber-mich::after { left: -6%; bottom: -12%; }
#kontakt::after { right: -6%; top: -10%; }

/* ── Über mich ──────────────────────────────────────────────── */
/* Der Inhalt liegt auf einer eigenen Fläche: gibt der Sektion Kontur,
   ohne einen weiteren Farbton einzuführen. */
.about {
  display: grid; grid-template-columns: clamp(180px, 22%, 260px) minmax(0, 1fr);
  align-items: stretch;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(22,24,28,0.03), 0 20px 50px rgba(22,24,28,0.05);
}
/* Eigene Spalte in Papierton: das Portrait steht nicht mehr allein
   auf Weiss, sondern sitzt in einer eigenen Flaeche. */
.about__col {
  background: var(--paper-2); border-right: 1px solid var(--line);
  padding: clamp(24px, 2.6vw, 36px);
  display: flex; flex-direction: column; gap: 16px; align-items: flex-start; justify-content: center;
}
.about__body { padding: clamp(28px, 3.4vw, 46px); }
/* Portrait als Flip-Karte: Vorderseite Portrait, Rueckseite die Karte
   des Standorts (Berlin Pankow). Kippt beim Ueberfahren, per Tastatur
   und per Tipp. Bewusst ein abgerundetes Quadrat, kein Kreis: dieselbe
   Radienlogik wie die uebrigen Karten. */
.about__shot {
  width: 100%; max-width: 150px; position: relative;
  aspect-ratio: 1; perspective: 1000px; cursor: pointer;
  border-radius: 14px; outline-offset: 4px;
}
.flip {
  position: absolute; inset: 0; border-radius: 14px;
  transform-style: preserve-3d;
  transition: transform 0.75s var(--glide), box-shadow var(--calm);
  box-shadow: 0 1px 2px rgba(22,24,28,0.05), 0 14px 30px -8px rgba(22,24,28,0.18);
}
.about__shot:focus-visible .flip,
.about__shot.is-flipped .flip { transform: rotateY(180deg); }
/* Hover-Flip nur auf Geraeten mit echtem Zeiger. Auf Touch bleibt
   allein der Tipp (is-flipped) zustaendig: sonst kollidiert das
   klebende :hover mit dem Umschalten und die Karte klappt verzoegert
   oder gar nicht zurueck. */
@media (hover: hover) and (pointer: fine) {
  .about__shot:hover .flip { transform: rotateY(180deg); box-shadow: var(--lift); }
}
.flip__face {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: 14px; border: 1px solid var(--line);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
.flip__face img { width: 100%; height: 100%; object-fit: cover; }
.flip__back { transform: rotateY(180deg); background: var(--paper-2); }
.flip__back img { object-position: 50% 42%; filter: saturate(0.92); }
/* Standort-Anschnitt auf der Karte */
.flip__pin {
  position: absolute; left: 8px; bottom: 8px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em;
  padding: 5px 9px; border-radius: 999px;
  background: rgba(250,248,244,0.92); color: var(--ink-2);
  border: 1px solid var(--line); box-shadow: 0 2px 6px rgba(22,24,28,0.12);
}
.about h2 { font-size: clamp(26px, 3.1vw, 40px); margin-bottom: 18px; max-width: 18ch; }
.about p { color: var(--ink-2); font-size: 16px; line-height: 1.74; max-width: 60ch; }
.about p + p { margin-top: 14px; }
.about__sig {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3); line-height: 1.7;
}
.about__sig b { display: block; color: var(--ink-2); font-weight: 500; }
@media (max-width: 720px) {
  .about { grid-template-columns: 1fr; }
  .about__col { flex-direction: row; align-items: center; border-right: 0; border-bottom: 1px solid var(--line); }
  .about__shot { max-width: 108px; }
}

/* ── Kontakt ────────────────────────────────────────────────── */
.contact { display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); gap: clamp(28px, 4vw, 62px); align-items: start; }
.contact h2 { font-size: clamp(27px, 3.4vw, 42px); max-width: 14ch; }
.contact__lead { color: var(--ink-2); margin-top: 16px; font-size: 16.5px; max-width: 42ch; }
.chan { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 28px; }
.chan__it {
  display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 76px; box-sizing: border-box; text-align: left;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--card);
  font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--ink); cursor: pointer;
  transition: border-color var(--calm), transform var(--calm), box-shadow var(--calm);
}
.chan__it:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: var(--lift); }
.chan__it i { width: 20px; height: 20px; flex: none; color: var(--acc); display: grid; place-items: center; }
.chan__it i svg { transition: transform var(--med); }
.chan__it:hover i svg { animation: nudge 0.5s var(--ease) 1; }
@keyframes nudge {
  0%, 100% { transform: translate(0) rotate(0); }
  35% { transform: translate(1px, -1px) rotate(-5deg) scale(1.1); }
  65% { transform: translate(-1px, 0) rotate(3deg) scale(1.06); }
}
.chan__it b { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.chan__it small { display: block; font-size: 12.5px; color: var(--ink-3); }
.chan__it .go { margin-left: auto; color: var(--ink-3); transition: transform var(--med), color var(--med); }
.chan__it:hover .go { transform: translateX(3px); color: var(--acc); }

.form { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: clamp(24px, 3vw, 34px); box-shadow: 0 1px 2px rgba(22,24,28,0.04), 0 24px 60px rgba(22,24,28,0.06); }
.form h3 { font-size: 21px; margin-bottom: 4px; }
.form .hint { color: var(--ink-3); font-size: 13px; margin-bottom: 20px; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.f { margin-bottom: 12px; }
/* Felder in einer Reihe tragen keine eigene Untermarge: sonst addiert
   sie sich auf Mobil (gestapelt) zum grid-gap und die Abstaende werden
   groesser und ungleich. So bleibt es ueberall durchgehend 12px. */
.f-row .f { margin-bottom: 0; }
.f label { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.f input, .f select, .f textarea {
  width: 100%; padding: 12px 14px; background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-field);
  font-family: var(--sans); font-size: 15px;
  transition: border-color var(--fast), background var(--fast), box-shadow var(--fast);
}
.f textarea { min-height: 112px; resize: vertical; }
.f input::placeholder, .f textarea::placeholder { color: #8C8578; }
.f input:focus, .f select:focus, .f textarea:focus {
  outline: none; border-color: var(--acc); background: var(--card);
  box-shadow: 0 0 0 3px var(--acc-soft);
}
.f select {
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2316181C' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.f .err { display: block; margin-top: 5px; font-size: 12.5px; color: #B3261E; min-height: 1em; }
.f input.bad, .f select.bad, .f textarea.bad { border-color: #B3261E; }
.form .note { margin-top: 14px; font-size: 12px; color: var(--ink-3); line-height: 1.6; }
.form .note a { color: var(--ink-2); border-bottom: 1px solid var(--line-2); }
.formfb { display: none; padding: 13px 15px; border-radius: var(--r-field); margin-bottom: 16px; font-size: 14px; line-height: 1.5; }
.formfb.ok { display: block; background: rgba(47,125,82,0.08); border: 1px solid rgba(47,125,82,0.3); color: #235E3E; }
.formfb.no { display: block; background: rgba(179,38,30,0.06); border: 1px solid rgba(179,38,30,0.26); color: #8C1D18; }
/* Honeypot unsichtbar, aber OHNE left:-9999px (das erzeugte im mobilen
   Device-Mode horizontales Overflow und brachte die fixierte/sticky
   Kopfleiste beim Scrollen aus dem Tritt). */
.hp { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } .f-row { grid-template-columns: 1fr; } }

/* ── FAQ ────────────────────────────────────────────────────── */
.faqwrap { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: clamp(28px, 4vw, 64px); align-items: start; }
.faq-aside {
  position: sticky; top: 96px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 24px 26px;
}
.faq-aside p { font-size: 14.5px; line-height: 1.65; color: var(--ink-2); margin-bottom: 16px; }
.faq-aside p b { color: var(--ink); font-weight: 600; display: block; margin-bottom: 6px; font-size: 15px; }
@media (max-width: 980px) { .faqwrap { grid-template-columns: 1fr; } .faq-aside { position: static; } }

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  padding: 20px 0; cursor: pointer; list-style: none;
  font-size: 16.5px; font-weight: 500; letter-spacing: -0.01em;
  transition: color var(--fast), padding-left var(--med);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--acc); padding-left: 10px; }
.faq summary i { flex: none; width: 24px; height: 24px; position: relative; border: 1px solid var(--line-2); border-radius: 50%; transition: border-color var(--med); }
.faq summary i::before, .faq summary i::after { content: ''; position: absolute; top: 50%; left: 50%; background: currentColor; transform: translate(-50%,-50%); }
.faq summary i::before { width: 9px; height: 1.5px; }
.faq summary i::after { width: 1.5px; height: 9px; transition: transform var(--med); }
.faq details[open] summary { color: var(--acc); }
.faq details[open] summary i { border-color: var(--acc-line); }
.faq details[open] summary i::after { transform: translate(-50%,-50%) scaleY(0); }
/* Antwort-Panel: gleiche Akkordeon-Technik wie .reg__panel (0fr -> 1fr),
   damit Auf-/Zuklappen weich laeuft. Sichtbares Padding sitzt am Kind,
   damit es eingeklappt sauber auf 0 kollabiert. Single-Open + animiertes
   Schliessen steuert das Skript (siehe IIFE). */
.faq .a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--med); color: var(--ink-2); font-size: 15.5px; line-height: 1.72; }
.faq details[open] .a { grid-template-rows: 1fr; }
.faq .a > * { overflow: hidden; min-height: 0; }
.faq .a p { padding: 0 54px 24px 0; max-width: 76ch; }
.faq .a p + p { margin-top: 10px; }
.faq .a a { color: var(--acc); border-bottom: 1px solid var(--acc-line); }
@media (max-width: 660px) { .faq .a p { padding-right: 0; } }

/* ── Beiträge ───────────────────────────────────────────────── */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.post {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: clamp(22px, 2.6vw, 30px);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  transition: border-color var(--calm), transform var(--calm), box-shadow var(--calm);
}
.post:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: var(--lift); }
/* Kopflinie in Akzent: schon in Ruhe dezent sichtbar, faehrt bei Hover
   voll aus. Macht die Kachel als redaktionellen Beitrag lesbar statt
   als Produktkarte, zusammen mit Rubrik oben und Fusszeile unten. */
.post::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--acc); transform: scaleX(0.0001); transform-origin: left;
  opacity: 0.3; transition: transform var(--calm), opacity var(--med);
}
.post:hover::before { transform: scaleX(1); opacity: 1; }
.post__kicker {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--acc);
}
.post h3 { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.22; margin: 13px 0 8px; transition: color var(--med); }
.post:hover h3 { color: var(--acc); }
.post p { color: var(--ink-3); font-size: 14.5px; line-height: 1.6; }
/* Fusszeile: Datum links, Weiterlesen rechts, unten buendig ueber alle Kacheln */
.post__meta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 18px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; color: var(--ink-3);
}
.post__more { display: inline-flex; align-items: center; gap: 6px; color: var(--acc); white-space: nowrap; }
.post__more svg { transition: transform var(--med); }
.post:hover .post__more svg { transform: translateX(4px); }
/* Dritte Kachel führt in den Blog: gleiche Bauform, andere Aufgabe */
.post--all {
  justify-content: space-between;
  background: var(--paper); border-style: dashed;
}
.post--all span {
  display: block;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3);
}
.post--all strong {
  display: block;
  font-family: var(--display); font-weight: 700; font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.2; letter-spacing: -0.028em; color: var(--ink); margin: 12px 0 8px;
  transition: color var(--med);
}
.post--all:hover strong { color: var(--acc); }
.post--all .go { color: var(--acc); transition: transform var(--med); margin-top: 10px; }
.post--all:hover .go { transform: translateX(4px); }
@media (max-width: 980px) { .posts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .posts { grid-template-columns: 1fr; } }

/* ── Footer ─────────────────────────────────────────────────── */
.foot { background: var(--ink); color: rgba(255,255,255,0.62); padding: clamp(48px, 6vw, 74px) 0 30px; position: relative; overflow: hidden; }
.foot::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 120% at 88% 0%, rgba(27,63,126,0.36), transparent 66%);
}
/* Dieselben Rillen wie im Positionsband: der Faden endet, wie er begann */
.foot::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: repeating-linear-gradient(to bottom, rgba(255,255,255,0.028) 0 1px, transparent 1px 46px);
}
.foot .wrap { position: relative; z-index: 1; }
.totop {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.45); transition: color var(--fast);
}
.totop:hover { color: #fff; }
.totop svg { transition: transform var(--med); }
.totop:hover svg { transform: translateY(-3px); }
.foot__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px; }
.foot__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.foot__brand img { width: 28px; height: 28px; border-radius: 7px; }
.foot__brand b { font-size: 16.5px; font-weight: 600; color: #fff; letter-spacing: -0.02em; }
.foot p { font-size: 14px; line-height: 1.7; max-width: 34ch; }
.foot h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.4); font-weight: 500; margin-bottom: 14px; }
.foot ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.foot ul a { font-size: 14.5px; color: rgba(255,255,255,0.68); transition: color var(--fast); }
.foot ul a:hover { color: #fff; }
.foot__end {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: clamp(36px, 4vw, 54px); padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.12);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: rgba(255,255,255,0.45);
}
@media (max-width: 860px) { .foot__top { grid-template-columns: 1fr 1fr; gap: 26px; } }

/* ── QR-Overlay ─────────────────────────────────────────────── */
.qr {
  position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 24px;
  background: rgba(22,24,28,0.5);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; pointer-events: none; transition: opacity var(--med);
}
.qr.is-on { opacity: 1; pointer-events: auto; }
.qr__box {
  background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 18px;
  text-align: center; box-shadow: 0 40px 90px rgba(22,24,28,0.28);
  transform: scale(0.94) translateY(10px); transition: transform var(--slow);
}
.qr.is-on .qr__box { transform: none; }
.qr__box img { width: min(250px, 60vw); height: auto; border-radius: 12px; }
.qr__box p { padding: 14px 8px 6px; font-size: 13px; color: var(--ink-2); }
.qr__box button {
  margin: 6px auto 2px; padding: 9px 20px; cursor: pointer;
  background: var(--paper-2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 999px; font-family: var(--sans); font-size: 13px;
}
.qr__box button:hover { background: var(--paper); }

/* ── Eintritt beim Scrollen ─────────────────────────────────── */
/* Eintritt nur, wenn JavaScript läuft: sonst bliebe der Inhalt bei
   einem Skriptfehler dauerhaft unsichtbar. */
.js .rise { opacity: 0; transform: translateY(24px); }
.js .rise.seen { opacity: 1; transform: none; transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.js .head::after { transform: scaleX(0); }
.js .head.seen::after { transform: scaleX(1); }
.rise:nth-child(2).seen { transition-delay: 0.07s; }
.rise:nth-child(3).seen { transition-delay: 0.14s; }
.rise:nth-child(4).seen { transition-delay: 0.21s; }

/* Reduzierte Bewegung: Dekoratives aus, Orientierung bleibt.
   Der Wechsel der Anfragenkarte und der Fortschrittsbalken sind
   Information, kein Schmuck, und laufen deshalb weiter. */
/* Reduzierte Bewegung: Die Grenze liegt zwischen Bewegung, die von
   allein passiert, und Bewegung, die der Benutzer selbst ausloest.
   Abgeschaltet wird nur das Erste.

   Aus:  Eintritte beim Scrollen, aufziehende Kopflinien, weiches
         Scrollen, Lichtstreifen und das Kippen der Symbole.
   Bleibt: das Anheben von Karten beim Ueberfahren (3 px, vom Zeiger
         ausgeloest) und die Anfragenkarte im Hero. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise, .head::after { opacity: 1; transform: none; transition: none; }
  .btn:hover::after, .chan__it:hover i svg { animation: none; }
  .stance::after, .grain { opacity: 0.35; }
  .flip { transition: none; }
  .nav { transition: none; }
  /* Nutzer-ausgeloeste Akkordeons duerfen bleiben, aber ohne Bewegung:
     sofortiges Auf-/Zuklappen statt Hoehen-/Chevron-Animation. */
  .faq .a, .step__body, .step__chev svg { transition: none; }
  /* Die Aktenreif-Card braucht hier keine Regel: das Skript schaltet
     Kippen und Lichtfuehrung von sich aus ab, --tx/--ty bleiben auf 0,
     also wandert auch die Praegung nicht. Die Praegung selbst bleibt
     stehen, sie ist Material und keine Bewegung. Was bleibt, ist das
     Anheben beim Ueberfahren -- vom Zeiger ausgeloest, siehe oben. */
}

/* ── Aktenreif: Produkt-Banner (dunkel) ─────────────────────
   Eigenes Software-Produkt in derselben dunklen Sprache wie das
   Positionsband: Hook links, rechts ein Glas-Panel mit Marke und den
   wichtigsten Punkten. Klar als Kanzlei-Angebot gerahmt, eigene Layout-
   Familie, kein weiteres Karten- oder Akkordeon-Raster. */
.prodbanner { background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.prodbanner::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(52% 120% at 82% 8%, rgba(255,255,255,0.09), transparent 60%),
    radial-gradient(48% 120% at 4% 100%, rgba(27,63,126,0.52), transparent 66%);
}
.prodbanner::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: repeating-linear-gradient(to bottom, rgba(255,255,255,0.028) 0 1px, transparent 1px 46px);
}
.prodbanner__in {
  position: relative; z-index: 1;
  padding: clamp(48px, 6vw, 84px) 0;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.prodbanner__eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.prodbanner__big { font-family: var(--display); font-weight: 500; font-size: clamp(24px, 3vw, 38px); line-height: 1.2; letter-spacing: -0.02em; color: #fff; max-width: 20ch; margin: 16px 0 26px; text-wrap: balance; }
.prodbanner__cta { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-weight: 600; font-size: 15px; color: #fff; }
.prodbanner__cta svg { transition: transform var(--med); }
.prodbanner__cta:hover svg { transform: translateX(4px); }
/* Aktenreif-Card: klickbares Produkt-Element. Dezenter, mausgesteuerter 3D-
   Tilt + mitlaufender Glanz + leichtes Anheben beim Hover -- langsam/soft
   (high-end Motion), bewusst zurueckhaltend, damit es hochwertig statt
   verspielt wirkt. Neigung/Glanz werden per JS ueber CSS-Variablen gesetzt:
   --gx/--gy  Zeigerposition in Prozent (das Licht)
   --tx/--ty  Neigung, -1 bis 1 (die Lage der Flaeche)

   Achtung: die Hebung heisst hier --plift, nicht --lift. --lift ist im
   :root schon als Schatten belegt und wuerde das transform ungueltig
   machen. */
.prodbanner__panel {
  --gx: 50%; --gy: 50%; --tx: 0; --ty: 0;
  position: relative; display: block; overflow: hidden; isolation: isolate;
  border: 1px solid rgba(255,255,255,0.14); border-radius: var(--r-card);
  padding: clamp(22px, 2.6vw, 30px);
  background: rgba(255,255,255,0.04);
  color: inherit; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  transform:
    perspective(900px)
    rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
    translateY(var(--plift, 0px)) scale(var(--scale, 1));
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.4s ease, background 0.4s ease;
  will-change: transform;
}

/* ── Oberflaeche ───────────────────────────────────────────
   Die Karte ist kein glattes Rechteck, sondern hat ein feines
   Gewebe wie der Leinenbezug eines Aktendeckels: zwei senkrecht
   zueinander laufende Haarlinien-Raster, jedes mit Licht- UND
   Schattenkante, also eine echte Praegung statt aufgedruckter
   Textur. Drei Ebenen teilen sich dieselben Variablen:

   1. ::before   das Material. Liegt UNTER dem Text und darf
                 deshalb auch dunkle Kanten fuehren.
   2. __sheen    der Glanz. Liegt UEBER dem Text, aber nur mit
                 hellen Linien, damit die Lesbarkeit nie leidet.
                 Auf den Lichtkegel am Zeiger maskiert, dazu ein
                 breites Streiflicht quer zum Gewebe.
   3. ::after    das Kantenlicht. Der Rand leuchtet dort auf, wo
                 das Licht ihn trifft.

   Beide Gewebe-Ebenen stehen 10 px ueber den Rand hinaus und
   werden per transform verschoben, nie per background-position:
   so wandert die Praegung beim Kippen gegen die Neigung
   (Parallaxe = Tiefe), ohne dass an der Kante eine Naht des
   wiederholten Verlaufs sichtbar wird. Beide bewegen sich um
   denselben Betrag, sonst laegen Licht- und Schattenkante nicht
   mehr aufeinander und es waeren zwei Texturen statt einer. */
.prodbanner__panel::before,
.prodbanner__sheen::before {
  content: ''; position: absolute; inset: -10px; pointer-events: none;
  transform: translate3d(calc(var(--tx) * -7px), calc(var(--ty) * -7px), 0);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.prodbanner__panel::before {
  z-index: 0; opacity: 0.55; transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
  background-image:
    repeating-linear-gradient(116deg,
      rgba(255,255,255,0.032) 0 1px,
      rgba(0,0,0,0.050) 1px 2px,
      transparent 2px 6px),
    repeating-linear-gradient(26deg,
      rgba(255,255,255,0.028) 0 1px,
      rgba(0,0,0,0.045) 1px 2px,
      transparent 2px 7px);
}
/* Glanz, der der Maus folgt -- reine Deko ueber dem Inhalt, blockt keinen
   Klick. Traegt selbst den weichen Lichtkegel. */
.prodbanner__sheen {
  position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  overflow: hidden; opacity: 0; transition: opacity 0.5s ease;
  background: radial-gradient(300px 300px at var(--gx) var(--gy),
    rgba(255,255,255,0.055), rgba(255,255,255,0.022) 42%, transparent 72%);
}
/* Das Gewebe im Licht: nur die hellen Kanten, und nur dort sichtbar, wo
   der Lichtkegel steht. Dadurch glaenzt beim Fahren immer ein anderer
   Ausschnitt der Struktur auf. */
.prodbanner__sheen::before {
  background-image:
    repeating-linear-gradient(116deg, rgba(255,255,255,0.105) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(26deg, rgba(255,255,255,0.090) 0 1px, transparent 1px 7px);
  -webkit-mask-image: radial-gradient(200px 200px at var(--gx) var(--gy),
    #000, rgba(0,0,0,0.45) 42%, transparent 72%);
  mask-image: radial-gradient(200px 200px at var(--gx) var(--gy),
    #000, rgba(0,0,0,0.45) 42%, transparent 72%);
}
/* Streiflicht quer zum Gewebe. Liegt als uebergrosses Bild in der Flaeche
   und wird ueber background-position bewegt: weil das Bild 250 % misst,
   laeuft das Band schneller als der Zeiger -- die Ebenen entkoppeln sich
   leicht, und genau das laesst die Flaeche gewoelbt wirken. */
.prodbanner__sheen::after {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(26deg,
    transparent 34%,
    rgba(255,255,255,0.05) 46%,
    rgba(255,255,255,0.09) 50%,
    rgba(255,255,255,0.05) 54%,
    transparent 66%);
  background-size: 250% 250%; background-repeat: no-repeat;
  background-position: var(--gx) var(--gy);
}
/* Kantenlicht: der Rand hellt dort auf, wo das Licht ihn streift. */
.prodbanner__panel::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border: 1px solid rgba(255,255,255,0.5); border-radius: inherit;
  opacity: 0; transition: opacity 0.5s ease;
  -webkit-mask-image: radial-gradient(260px 260px at var(--gx) var(--gy), #000, transparent 68%);
  mask-image: radial-gradient(260px 260px at var(--gx) var(--gy), #000, transparent 68%);
}
/* Inhalt zwischen Material und Glanz. */
.prodbanner__brand, .prodbanner__points { position: relative; z-index: 1; }
/* Klick-Affordanz: kleiner Pfeil rechts im Markenkopf. */
.prodbanner__go { margin-left: auto; color: #fff; opacity: 0.5; flex: none;
  transition: transform var(--med), opacity var(--fast); }
@media (hover: hover) and (pointer: fine) {
  .prodbanner__panel:hover {
    --plift: -6px; --scale: 1.015;
    border-color: rgba(255,255,255,0.28);
    background: rgba(255,255,255,0.06);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 30px 64px -26px rgba(0,0,0,0.6);
  }
  .prodbanner__panel:hover::before { opacity: 0.85; }
  .prodbanner__panel:hover::after { opacity: 0.55; }
  .prodbanner__panel:hover .prodbanner__sheen { opacity: 1; }
  .prodbanner__panel:hover .prodbanner__go { opacity: 1; transform: translate(2px, -2px); }
}
.prodbanner__panel:focus-visible { outline: 2px solid rgba(255,255,255,0.6); outline-offset: 3px; }
.prodbanner__brand { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.prodbanner__brand img { width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255,255,255,0.12); }
.prodbanner__brand b { font-family: var(--display); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.prodbanner__points { list-style: none; display: grid; gap: 13px; }
.prodbanner__points li { display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start; font-size: 14.5px; color: rgba(255,255,255,0.8); line-height: 1.5; }
.prodbanner__points svg { margin-top: 3px; color: #fff; opacity: 0.6; flex: none; }
@media (max-width: 860px) { .prodbanner__in { grid-template-columns: 1fr; gap: 30px; } }

/* Skip-Link: standardmaessig ausserhalb per translateY (kein left:-9999px,
   das sonst horizontales Overflow ausloest). Bei Fokus faehrt er ein. */
.skip {
  position: fixed; top: 10px; left: 50%; z-index: 100;
  transform: translateX(-50%) translateY(-160%);
  padding: 12px 20px; border-radius: 999px;
  background: var(--acc); color: #fff; font-weight: 600;
  opacity: 0; pointer-events: none;
  transition: transform var(--fast), opacity var(--fast);
}
.skip:focus { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }