/* ============================================================================
   Free Resources Library — Ergaenzung zu pages.css
   Erbt alle Tokens (Farben, Fonts, Eases, Radien) aus pages.css. Diese Datei
   fuegt nur hinzu, was die Bibliothek braucht, und ueberschreibt nichts
   Bestehendes — damit bleiben die uebrigen Seiten unberuehrt.

   Bewegung nach der Projektregel: Auftritte laufen ueber
   `animation-timeline: view()` hinter @supports. Kann der Browser das nicht,
   ist der Inhalt einfach da. Kein `opacity:0` ohne Rueckfallebene, keine
   `transition`-Kurzschreibweise auf Karten (die wuerde Staffelung platt machen).
   ========================================================================== */

:root{
  --res-tile:rgba(var(--tint-rgb),.045);
  --res-line:rgba(var(--line-rgb),.13);
  --mono-ish:var(--font-body);      /* Projektregel: keine ad-hoc Mono-Familie */

}

/* ---------------------------------------------------------------------------
   Akzent je Ressource — lesbar in beiden Themes

   Jede Ressourcenseite setzt ihre Akzentfarbe als Inline-Stil (--acc, und je
   Zeile der Kit-Liste --rc). Die sechs Werte aus tools/_visuals.py sind auf den
   dunklen Grund kalibriert: Amber #fbbf24 kommt auf Off-White nur auf 2,7:1 und
   ist als Schrift unbrauchbar.

   Statt sechs zweite Farben zu pflegen, wird der Ton abgeleitet. Verbraucht wird
   ueberall --acc-ink / --rc-ink; --acc / --rc bleiben die Eingabe.

   Drei Stufen, jede faengt die vorige auf:
     1. ohne alles         -> der Ausgangston (Dark ist ohnehin richtig)
     2. mit color-mix      -> 44 % Richtung Navy
     3. mit relativen Farben -> Helligkeit auf OKLCH 0.45, Farbton und Buntheit
                              bleiben. Alle sechs 6,07-7,64:1 auf --bg, und die
                              Farbe bleibt als Farbe erkennbar (Amber wird Ocker,
                              nicht Graubraun). Gemessen, nicht geschaetzt.
   ------------------------------------------------------------------------ */
.res-card,.res-detail,.res-bundle,.res-kit,[style*="--acc"]{--acc-ink:var(--acc)}
.kit-row,[style*="--rc"]{--rc-ink:var(--rc)}

@supports (color:color-mix(in srgb,red 50%,blue)){
  :root[data-theme="light"] [style*="--acc"]{--acc-ink:color-mix(in srgb,var(--acc) 44%,#0a1830)}
  :root[data-theme="light"] [style*="--rc"]{--rc-ink:color-mix(in srgb,var(--rc) 44%,#0a1830)}
  @media (prefers-color-scheme: light){
    :root:not([data-theme="dark"]) [style*="--acc"]{--acc-ink:color-mix(in srgb,var(--acc) 44%,#0a1830)}
    :root:not([data-theme="dark"]) [style*="--rc"]{--rc-ink:color-mix(in srgb,var(--rc) 44%,#0a1830)}
  }
}

@supports (color:oklch(from red l c h)){
  :root[data-theme="light"] [style*="--acc"]{--acc-ink:oklch(from var(--acc) .45 c h)}
  :root[data-theme="light"] [style*="--rc"]{--rc-ink:oklch(from var(--rc) .45 c h)}
  @media (prefers-color-scheme: light){
    :root:not([data-theme="dark"]) [style*="--acc"]{--acc-ink:oklch(from var(--acc) .45 c h)}
    :root:not([data-theme="dark"]) [style*="--rc"]{--rc-ink:oklch(from var(--rc) .45 c h)}
  }
}

/* ---------------------------------------------------------------- Hero */
.res-hero{padding:150px 0 54px;position:relative;overflow:hidden}
.res-hero::before,.res-hero::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;
  filter:blur(120px);
}
.res-hero::before{top:-260px;left:-140px;width:640px;height:640px;background:rgba(var(--accent-rgb),.075)}
.res-hero::after{top:-180px;right:-200px;width:560px;height:560px;background:rgba(var(--indigo-rgb),.06)}
/* Der Drift laeuft nur auf breiten Schirmen: zwei bewegte Flaechen mit
   blur(120px) sind auf schwachen Geraeten teuer, und der Effekt ist dort
   ohnehin kaum sichtbar. Das statische Leuchten bleibt. */
@media(prefers-reduced-motion:no-preference) and (min-width:900px){
  .res-hero::before{animation:resDrift 22s var(--ease-soft) infinite alternate}
  .res-hero::after{animation:resDrift 28s var(--ease-soft) infinite alternate-reverse}
}
@keyframes resDrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(60px,40px,0) scale(1.12)}}
.res-hero-inner{position:relative;max-width:880px}
.res-hero h1{font-size:clamp(36px,5.2vw,60px);line-height:1.06;letter-spacing:-.03em;margin-bottom:22px}
.res-hero .lead{max-width:660px;margin-bottom:30px}
.res-meta{display:flex;gap:22px;flex-wrap:wrap;font-size:13.5px;color:var(--text-dim)}
.res-meta b{color:var(--text);font-family:var(--font-display);font-weight:600}

/* ---------------------------------------------------------------- Toolbar */
.res-tools{
  position:sticky;top:76px;z-index:40;padding:16px 0 18px;
  background:linear-gradient(180deg,rgba(var(--bg-rgb),.96) 60%,rgba(var(--bg-rgb),0));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.res-tools-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.res-search{position:relative;flex:1 1 300px;max-width:420px}
.res-search svg{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--text-dim);pointer-events:none;
  transition:color var(--dur-base) var(--ease-out);
}
.res-search input{
  width:100%;font-family:var(--font-body);font-size:15px;color:var(--text);
  background:var(--panel);border:1px solid var(--panel-border);border-radius:100px;
  padding:13px 46px 13px 44px;outline:none;
  transition:border-color var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out);
}
.res-search input::placeholder{color:var(--text-dim)}
.res-search input:focus{border-color:rgba(var(--accent-rgb),.45);background:rgba(var(--tint-rgb),.055)}
.res-search:focus-within svg{color:var(--cyan)}
.res-search .res-clear{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border-radius:50%;border:none;background:rgba(var(--tint-rgb),.06);
  color:var(--text-dim);font-size:15px;line-height:1;cursor:pointer;display:none;
}
.res-search.has-value .res-clear{display:grid;place-items:center}
.res-search .res-clear:hover{color:var(--text);background:rgba(var(--tint-rgb),.12)}

.res-sort{
  font-family:var(--font-body);font-size:14px;color:var(--text-dim);
  background:var(--panel);border:1px solid var(--panel-border);border-radius:100px;
  padding:12px 18px;cursor:pointer;outline:none;
}
.res-sort:focus{border-color:rgba(var(--accent-rgb),.4)}
.res-sort option{background:var(--bg-2);color:var(--text)}

.res-chips{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
.res-chip{
  position:relative;font-family:var(--font-body);font-size:13.5px;font-weight:500;
  color:var(--text-dim);background:var(--panel);border:1px solid var(--panel-border);
  border-radius:100px;padding:9px 17px;cursor:pointer;
  transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),
             background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);
}
.res-chip:hover{color:var(--text);border-color:rgba(var(--accent-rgb),.3);transform:translateY(-1px)}
.res-chip[aria-pressed="true"]{
  color:var(--on-accent);background:var(--cyan);border-color:transparent;font-weight:600;
}
.res-chip .n{opacity:.6;font-size:12px;margin-left:6px;font-variant-numeric:tabular-nums}
/* Kategorie ohne Treffer: sichtbar, aber nicht anklickbar — die Zahl 0 ist
   eine Information, kein Fehler. */
.res-chip[disabled]{opacity:.4;cursor:not-allowed}
.res-chip[disabled]:hover{transform:none;color:var(--text-dim);border-color:var(--panel-border)}
.res-chip[aria-pressed="true"] .n{opacity:.75}

.res-count{margin-top:20px;font-size:13.5px;color:var(--text-dim)}
.res-count b{color:var(--text);font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- Grid */
.res-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  margin:26px 0 10px;align-items:stretch;
  /* dense: die breite erste Karte darf keine Luecke hinterlassen */
  grid-auto-flow:row dense;
}
.res-empty{
  display:none;text-align:center;padding:70px 20px;color:var(--text-dim);
  border:1px dashed var(--res-line);border-radius:var(--radius);margin-top:26px;
}
.res-empty b{display:block;font-family:var(--font-display);font-size:19px;color:var(--text);margin-bottom:8px}
.res-grid.is-empty+.res-empty{display:block}

/* ---------------------------------------------------------------- Karte */
.res-card{
  position:relative;display:flex;flex-direction:column;gap:16px;
  background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);
  padding:26px 24px 22px;text-decoration:none;color:var(--text);overflow:hidden;
  isolation:isolate;
  /* Einzelwerte statt Kurzschreibweise — sonst kappt die Kurzform die Staffelung */
  transition-property:transform,border-color,background;
  transition-duration:var(--dur-base);
  transition-timing-function:var(--ease-out);
}
/* Zeiger-Spotlight: --mx/--my setzt resources.js, Standard ist die Kartenmitte,
   damit ohne JS nichts kaputt aussieht. */
.res-card::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgba(var(--accent-rgb),.11),transparent 65%);
  transition:opacity var(--dur-base) var(--ease-out);
}
/* Lichtlauf auf der Oberkante */
.res-card::after{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.85),transparent);
  transform:translateX(-100%);opacity:0;
  transition:opacity var(--dur-fast) var(--ease-out);
}
.res-card:hover,.res-card:focus-visible{
  transform:translateY(-6px);border-color:rgba(var(--accent-rgb),.34);background:rgba(var(--tint-rgb),.055);
}
.res-card:focus-visible{outline:2px solid rgba(var(--accent-rgb),.55);outline-offset:3px}
.res-card:hover::before,.res-card:focus-visible::before{opacity:1}
.res-card:active{transform:translateY(-2px) scale(.995)}
/* [hidden] verliert gegen display:flex — deshalb ausdruecklich */
.res-card[hidden]{display:none}
@media(prefers-reduced-motion:no-preference){
  .res-card:hover::after,.res-card:focus-visible::after{
    opacity:1;animation:resSweep .9s var(--ease-expo) forwards;
  }
}
@keyframes resSweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

.res-card-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.res-type{
  font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--text-dim);
}
.res-flags{display:flex;gap:6px;margin-left:auto}
.res-flag{
  font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 9px;border-radius:100px;border:1px solid transparent;white-space:nowrap;
}
.res-flag.is-new{color:var(--cyan);background:var(--cyan-soft);border-color:rgba(var(--accent-rgb),.3)}
.res-flag.is-pop{color:var(--violet-ink);background:rgba(var(--violet-rgb),.13);border-color:rgba(var(--violet-rgb),.3)}
.res-flag.is-soon{color:var(--text-dim);background:rgba(var(--tint-rgb),.05);border-color:var(--panel-border)}

.res-glyph{
  width:52px;height:52px;border-radius:15px;flex:none;display:grid;place-items:center;
  background:var(--cyan-soft);border:1px solid rgba(var(--accent-rgb),.24);color:var(--cyan);
  transition-property:transform,background,border-color;
  transition-duration:var(--dur-base);transition-timing-function:var(--ease-expo);
}
.res-glyph svg{width:23px;height:23px;stroke-width:1.6}
.res-card:hover .res-glyph,.res-card:focus-visible .res-glyph{
  transform:translateY(-2px) rotate(-4deg) scale(1.05);
  background:rgba(var(--accent-rgb),.19);border-color:rgba(var(--accent-rgb),.45);
}
.res-card.has-thumb .res-glyph{display:none}
/* Rueckfall ohne Szene: das Strichsymbol mittig im Kopfbereich */
.res-viz-fallback{display:grid;place-items:center}
.res-thumb{
  margin:-26px -24px 0;aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--panel-border);
}
.res-thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease-expo);
}
.res-card:hover .res-thumb img{transform:scale(1.05)}

.res-card h3{
  font-size:19.5px;line-height:1.25;margin:0;
  transition:color var(--dur-fast) var(--ease-out);
}
.res-card:hover h3{color:var(--text-bright)}
.res-card p{color:var(--text-dim);font-size:14.8px;line-height:1.6;margin:0;flex:1 1 auto}
.res-card-foot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-top:16px;border-top:1px solid var(--panel-border);
}
.res-cat{font-size:12.5px;color:var(--text-dim)}
.res-go{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-display);font-size:13.5px;font-weight:600;color:var(--cyan);
  white-space:nowrap;
}
.res-go svg{
  width:15px;height:15px;
  transition:transform var(--dur-base) var(--ease-expo);
}
.res-card:hover .res-go svg,.res-card:focus-visible .res-go svg{transform:translateX(5px)}

/* Hervorgehobene Karte — belegt zwei Spalten und traegt groessere Typo */
.res-grid>.res-card.is-featured:first-child{grid-column:span 2}
.res-card.is-featured{padding:32px 30px 26px}
.res-card.is-featured h3{font-size:25px}
.res-card.is-featured p{font-size:16px;max-width:62ch}
@media(max-width:1000px){.res-grid>.res-card.is-featured:first-child{grid-column:span 1}
  .res-card.is-featured{padding:26px 24px 22px}
  .res-card.is-featured h3{font-size:20px}.res-card.is-featured p{font-size:14.8px}}

/* Auftritt der Karten — als Animation auf der Scroll-Zeitachse, gestaffelt
   ueber --i. Ohne Unterstuetzung sind alle Karten von Anfang an sichtbar. */
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    @keyframes resCardIn{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
    .res-grid>.res-card{
      animation:resCardIn linear both;animation-timeline:view();
      animation-range:entry 0% entry calc(26% + 4% * var(--i,0));
    }
  }
}

/* ---------------------------------------------------------------- Kategorien-Baender (Hub) */
.res-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px}
.res-cat-card{
  display:block;padding:20px 22px;border-radius:16px;text-decoration:none;
  background:var(--panel);border:1px solid var(--panel-border);color:var(--text);
  transition-property:transform,border-color;transition-duration:var(--dur-base);
  transition-timing-function:var(--ease-out);cursor:pointer;text-align:left;width:100%;
  font-family:var(--font-display);font-weight:500;font-size:15.5px;
}
.res-cat-card:hover{transform:translateY(-3px);border-color:rgba(var(--accent-rgb),.32)}
.res-cat-card small{
  display:block;color:var(--text-dim);font-family:var(--font-body);font-weight:400;
  font-size:13px;margin-top:5px;
}
@media(max-width:1000px){.res-cats{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.res-cats{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- Detailseite */
.res-detail-hero{padding:150px 0 20px;position:relative;overflow:hidden}
.res-detail-hero::before{
  content:"";position:absolute;top:-240px;right:-180px;width:620px;height:620px;border-radius:50%;
  background:rgba(var(--accent-rgb),.075);filter:blur(115px);pointer-events:none;
}
.res-detail-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:58px;align-items:center;position:relative}
.res-detail-hero h1{font-size:clamp(32px,4.4vw,52px);line-height:1.08;letter-spacing:-.03em;margin-bottom:20px}
.res-badges{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:20px}
.res-badge{
  display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;
  color:var(--text-dim);background:var(--panel);border:1px solid var(--panel-border);
  border-radius:100px;padding:7px 15px;
}
.res-badge.accent{color:var(--cyan);background:var(--cyan-soft);border-color:rgba(var(--accent-rgb),.28)}
.res-badge svg{width:14px;height:14px;flex:none}

/* Vorschau-Panel — stilisiertes Dokument, kein Screenshot */
.res-preview{
  position:relative;border-radius:24px;overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0%,rgba(var(--accent-rgb),.09),transparent 58%),var(--panel-raised);
  border:1px solid rgba(var(--accent-rgb),.18);
  box-shadow:var(--shadow-lg);
}
.res-preview-bar{
  display:flex;align-items:center;gap:9px;padding:14px 18px;
  border-bottom:1px solid var(--panel-border);
}
.res-preview-bar i{width:9px;height:9px;border-radius:50%;background:rgba(var(--line-rgb),.22);flex:none}
.res-preview-bar i:first-child{background:rgba(var(--accent-rgb),.5)}
.res-preview-bar span{
  font-size:12px;color:var(--text-dim);letter-spacing:.03em;margin-left:6px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.res-preview-body{padding:22px 22px 26px;display:grid;gap:9px}
.res-line{
  display:flex;gap:16px;align-items:baseline;
  font-family:var(--mono-ish);font-weight:500;font-size:13.5px;letter-spacing:.02em;
  color:var(--text);font-variant-numeric:tabular-nums;line-height:1.5;
}
.res-line>span:first-child{flex:1 1 auto;min-width:0}
.res-line>span+span{flex:none;color:var(--text-dim)}
.res-line.dim{color:var(--text-dim)}
.res-line.spacer{height:8px}
.res-preview-fade{
  position:absolute;left:0;right:0;bottom:0;height:78px;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--panel-raised));
}
@media(prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    @keyframes resLineIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
    .res-preview-body .res-line{
      animation:resLineIn linear both;animation-timeline:view();
      animation-range:entry 4% entry calc(24% + 3% * var(--i,0));
    }
  }
}

/* „Was Sie erhalten" */
.res-gets{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:44px}
.res-get{
  background:var(--panel);border:1px solid var(--panel-border);border-radius:18px;
  padding:26px 24px;position:relative;overflow:hidden;
  transition-property:transform,border-color;transition-duration:var(--dur-base);
  transition-timing-function:var(--ease-out);
}
.res-get:hover{transform:translateY(-4px);border-color:rgba(var(--accent-rgb),.3)}
.res-get .num{
  font-family:var(--font-display);font-size:12.5px;font-weight:600;letter-spacing:.1em;
  color:var(--cyan);opacity:.8;display:block;margin-bottom:14px;
}
.res-get h3{font-size:17.5px;margin-bottom:9px}
.res-get p{color:var(--text-dim);font-size:14.8px}
@media(max-width:820px){.res-gets{grid-template-columns:1fr}}

/* Nutzenliste */
.res-benefits{list-style:none;display:grid;gap:15px;margin-top:34px;max-width:760px}
.res-benefits li{display:flex;gap:14px;align-items:flex-start;font-size:16.5px;color:var(--text)}
.res-benefits .chk{
  flex:none;width:24px;height:24px;border-radius:50%;margin-top:2px;
  background:var(--cyan-soft);border:1px solid rgba(var(--accent-rgb),.35);
  display:grid;place-items:center;color:var(--cyan);
}
.res-benefits .chk svg{width:12px;height:12px}

/* ---------------------------------------------------------------- Formular */
.res-form-sec{background:var(--bg-2);position:relative}
.res-form-sec::before,.res-form-sec::after{
  content:"";position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.25),transparent);
}
.res-form-sec::before{top:0}.res-form-sec::after{bottom:0}
.res-form-card{
  max-width:620px;margin:0 auto;position:relative;
  background:var(--panel-raised);border:1px solid rgba(var(--accent-rgb),.2);border-radius:26px;
  padding:40px 38px;overflow:hidden;
}
.res-form-card::before{
  content:"";position:absolute;inset:-1px;border-radius:26px;padding:1px;pointer-events:none;
  background:linear-gradient(160deg,rgba(var(--accent-rgb),.45),transparent 42%,transparent 62%,rgba(var(--violet-rgb),.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.res-form-card h2{font-size:clamp(23px,3vw,30px);margin-bottom:12px}
.res-form-card>p{color:var(--text-dim);font-size:15.5px;margin-bottom:26px}
.res-field{position:relative;margin-bottom:16px}
.res-field input[type=email]{
  width:100%;font-family:var(--font-body);font-size:16px;color:var(--text);
  background:var(--inset);border:1px solid var(--panel-border);border-radius:14px;
  padding:16px 18px;outline:none;
  transition:border-color var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out);
}
.res-field input[type=email]::placeholder{color:var(--text-dim)}
.res-field input[type=email]:focus{border-color:rgba(var(--accent-rgb),.5);background:rgba(var(--tint-rgb),.06)}
.res-field.err input[type=email]{border-color:var(--danger)}
/* Honeypot — fuer Menschen unsichtbar, fuer Automaten ausfuellbar */
.res-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
/* Nur visuell verborgen, fuer Screenreader vorhanden */
.res-sr{position:absolute;width:1px;height:1px;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}

.res-consent{
  display:flex;gap:13px;align-items:flex-start;
  font-size:13.8px;line-height:1.6;color:var(--text-dim);cursor:pointer;
  padding:16px 18px;border-radius:14px;border:1px solid var(--panel-border);
  background:rgba(var(--tint-rgb),.02);margin-bottom:18px;
  transition:border-color var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out);
}
.res-consent:hover{border-color:rgba(var(--accent-rgb),.24);background:rgba(var(--tint-rgb),.035)}
.res-consent input{
  appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;margin-top:1px;
  border:1.5px solid rgba(var(--line-rgb),.35);border-radius:6px;cursor:pointer;position:relative;
  background:rgba(var(--tint-rgb),.03);
  transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);
}
.res-consent input:checked{background:var(--cyan);border-color:var(--cyan)}
.res-consent input:checked::after{
  content:"";position:absolute;left:6px;top:2.5px;width:5px;height:10px;
  border-right:2px solid var(--on-accent);border-bottom:2px solid var(--on-accent);transform:rotate(40deg);
}
.res-consent input:focus-visible{outline:2px solid rgba(var(--accent-rgb),.6);outline-offset:2px}
.res-consent a{color:var(--cyan);text-decoration:none}
.res-consent a:hover{text-decoration:underline}

.res-submit{width:100%;justify-content:center;font-size:16.5px;padding:17px 30px;position:relative}
.res-submit[disabled]{opacity:.65;cursor:progress}
.res-submit .spin{
  width:16px;height:16px;border-radius:50%;display:none;
  border:2px solid rgba(var(--on-accent-rgb),.3);border-top-color:var(--on-accent);
  animation:resSpin .7s linear infinite;
}
.res-submit.busy .spin{display:block}
.res-submit.busy .lbl{opacity:.75}
@keyframes resSpin{to{transform:rotate(360deg)}}
.res-fineprint{margin-top:16px;font-size:12.5px;color:var(--text-dim);line-height:1.6}
.res-fineprint a{color:var(--text-dim);text-decoration:underline}
.res-error{
  display:none;margin-top:14px;font-size:13.5px;color:var(--danger);
  background:rgba(var(--danger-rgb),.08);border:1px solid rgba(var(--danger-rgb),.25);
  border-radius:12px;padding:12px 15px;
}
.res-error.show{display:block}

/* Erfolgszustand */
.res-done{display:none;text-align:center;padding:8px 0 4px}
.res-done:focus{outline:none}
.res-form-card.is-done .res-form-body{display:none}
.res-form-card.is-done .res-done{display:block}
.res-done .ring{
  width:74px;height:74px;border-radius:50%;margin:0 auto 22px;display:grid;place-items:center;
  background:var(--cyan-soft);border:1px solid rgba(var(--accent-rgb),.4);color:var(--cyan);
}
.res-done .ring svg{width:32px;height:32px;stroke-width:2}
@media(prefers-reduced-motion:no-preference){
  .res-form-card.is-done .ring{animation:resPop .6s var(--ease-expo) both}
  .res-form-card.is-done .ring svg{animation:resCheck .5s var(--ease-out) .18s both}
}
@keyframes resPop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes resCheck{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
.res-done h3{font-size:24px;margin-bottom:12px}
.res-done p{color:var(--text-dim);font-size:15.5px;max-width:420px;margin:0 auto 8px}
.res-done .res-done-mail{color:var(--text);font-weight:500}
.res-done-extra{
  margin-top:24px;padding-top:22px;border-top:1px solid var(--panel-border);
  font-size:13.5px;color:var(--text-dim);
}
.res-done-extra a{color:var(--cyan);text-decoration:none}

/* ---------------------------------------------------------------- Verwandte */
.res-related{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}

/* ---------------------------------------------------------------- Bestaetigungsseite */
.res-confirm{padding:190px 0 90px;text-align:center}
.res-confirm .ring{
  width:88px;height:88px;border-radius:50%;margin:0 auto 28px;display:grid;place-items:center;
  background:var(--cyan-soft);border:1px solid rgba(var(--accent-rgb),.4);color:var(--cyan);
}
.res-confirm .ring svg{width:38px;height:38px;stroke-width:2}
.res-confirm h1{font-size:clamp(30px,4vw,44px);margin-bottom:18px}
.res-confirm .lead{margin:0 auto 34px}

/* ============================================================================
   Animierte Szenen (.res-viz) — eine je Ressource
   Aufbau siehe tools/_visuals.py. Jedes bewegte Element traegt `.viz-anim` und
   im style-Attribut `--anim` (Keyframe-Name), optional `--d` (Verzoegerung) und
   `--dur` (Dauer). Die Zuweisung passiert nur hier — eine neue Szene braucht
   kein neues CSS, solange sie diese Keyframes nutzt.

   Drei Zustaende:
     ruhend   — keine Animation, Szene vollstaendig lesbar
     Zeiger   — beim Hover/Fokus der Kachel laeuft die Bewegung einmal ab
     Touch    — kein Hover: die Bewegung laeuft einmal beim Hereinscrollen
                (`animation-timeline: view()`, hinter @supports)

   Jede Animation beginnt und endet im Ruhezustand. Deshalb schnappt beim
   Verlassen des Zeigers nichts zurueck, und dieselben Keyframes funktionieren
   fuer Hover und fuer die Scroll-Zeitachse.
   ========================================================================== */

.res-viz{
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 130% at 50% 0%,color-mix(in srgb,var(--acc-ink) 13%,transparent),transparent 62%),
    linear-gradient(180deg,rgba(var(--tint-rgb),.035),rgba(var(--tint-rgb),0));
  border-bottom:1px solid var(--panel-border);
}
/* Feste Hoehe, nicht `height:auto`: sonst skaliert die Szene mit der
   Kartenbreite und die hervorgehobene Karte bekommt einen 350 px hohen Kopf.
   `preserveAspectRatio="xMidYMid meet"` laesst die Szene darin mittig sitzen. */
.res-viz{height:168px}
.res-viz svg{display:block;width:100%;height:100%}

/* Farbrollen innerhalb der Szene. Nur `--acc` wechselt je Ressource, die
   uebrigen Werte kommen aus den Marken-Tokens. */
.res-viz .fill-panel{fill:rgba(var(--tint-rgb),.055)}
.res-viz .fill-dark{fill:var(--viz-dark)}
.res-viz .fill-dim{fill:rgba(var(--line-rgb),.28)}
.res-viz .fill-acc{fill:var(--acc-ink)}
.res-viz .stroke-line{stroke:rgba(var(--line-rgb),.3);fill:none;stroke-width:1.5;stroke-linecap:round}
.res-viz .stroke-acc{stroke:var(--acc-ink);fill:none;stroke-width:1.6;stroke-linecap:round}
.res-viz .fill-panel.stroke-acc,.res-viz .fill-panel.stroke-line{fill:rgba(var(--tint-rgb),.055)}
.res-viz .viz-floor{fill:var(--viz-floor)}
.res-viz .viz-glow{fill:var(--acc-ink);opacity:.1;filter:blur(26px)}

/* Grundlage jeder Bewegung. `transform-box: fill-box` ist bei SVG noetig,
   sonst bezieht sich transform-origin auf das ganze Koordinatensystem. */
.res-viz .viz-anim{transform-box:fill-box;transform-origin:50% 50%}

/* ---- Zeiger: Bewegung beim Hover oder Tastaturfokus der Kachel ---- */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .res-card:hover .res-viz .viz-anim,
  .res-card:focus-visible .res-viz .viz-anim{
    animation-name:var(--anim);
    animation-duration:var(--dur,1.2s);
    animation-delay:var(--d,0s);
    animation-timing-function:var(--ease-expo);
    animation-fill-mode:both;
  }
  /* die Szene selbst hebt sich leicht mit */
  .res-card:hover .res-viz svg,.res-card:focus-visible .res-viz svg{transform:scale(1.03)}
  .res-viz svg{transition:transform .5s var(--ease-expo)}
}

/* ---- Touch: einmal beim Hereinscrollen, ohne JavaScript ---- */
@media (hover:none) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .res-viz .viz-anim{
      animation-name:var(--anim);
      animation-timeline:view();
      animation-range:entry 12% entry 62%;
      animation-fill-mode:both;
      animation-timing-function:linear;
    }
  }
}

/* ---- Keyframes. Erste und letzte Stufe sind identisch (Ruhezustand). ---- */
@keyframes vizTilt{
  0%,100%{transform:rotate(0) translateY(0)}
  32%{transform:rotate(-5deg) translateY(-4px)}
  66%{transform:rotate(3.5deg) translateY(-1px)}
}
@keyframes vizBob{
  0%,100%{transform:translateY(0)}
  40%{transform:translateY(-7px)}
  72%{transform:translateY(1px)}
}
@keyframes vizBlink{
  0%,32%,100%{transform:scaleY(1)}
  40%,46%{transform:scaleY(.1)}
  56%{transform:scaleY(1)}
}
@keyframes vizPulse{
  0%,100%{transform:scale(1);opacity:.9}
  45%{transform:scale(1.75);opacity:.35}
}
@keyframes vizFanL{
  0%,100%{transform:translate(0,0) rotate(0)}
  45%{transform:translate(-13px,-9px) rotate(-8deg)}
}
@keyframes vizFanR{
  0%,100%{transform:translate(0,0) rotate(0)}
  45%{transform:translate(13px,-9px) rotate(8deg)}
}
@keyframes vizRise{
  0%,100%{transform:translateY(0)}
  46%{transform:translateY(-11px)}
}
/* Lichtbalken laeuft durch und ist an beiden Enden ausserhalb des Clips */
@keyframes vizScan{
  0%,100%{transform:translateX(-60px);opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  99.9%{transform:translateX(230px);opacity:0}
}
@keyframes vizGleam{
  0%,100%{transform:translateY(0);opacity:0}
  14%{opacity:1}
  86%{opacity:1}
  99.9%{transform:translateY(-110px);opacity:0}
}
@keyframes vizFlash{
  0%,100%{opacity:0}
  40%{opacity:.4}
}
/* Token folgt der Strecke M66 92 -> 160 52 -> 254 92 und wieder zurueck an den
   Start. Wegpunkte als transform, damit kein offset-path noetig ist. */
@keyframes vizTravel{
  0%{transform:translate(0,0);opacity:0}
  8%{transform:translate(0,0);opacity:1}
  46%{transform:translate(94px,-40px)}
  84%{transform:translate(188px,0)}
  92%{transform:translate(188px,0);opacity:0}
  100%{transform:translate(0,0);opacity:0}
}
@keyframes vizSpin{
  0%{transform:rotate(0)}
  100%{transform:rotate(360deg)}
}
@keyframes vizPop{
  0%,100%{transform:scale(1)}
  38%{transform:scale(1.22)}
  70%{transform:scale(.97)}
}
@keyframes vizLiftOff{
  0%,100%{transform:translate(0,0) rotate(0);opacity:1}
  50%{transform:translate(16px,-22px) rotate(12deg);opacity:0}
  51%{transform:translate(-8px,10px) rotate(-6deg);opacity:0}
}
/* Punkt fallt durch den Trichter, verschwindet unten und ist oben wieder da */
@keyframes vizDrop{
  0%{transform:translateY(0);opacity:.85}
  52%{transform:translateY(62px);opacity:.15}
  56%{transform:translateY(62px);opacity:0}
  57%{transform:translateY(0);opacity:0}
  100%{transform:translateY(0);opacity:.85}
}

/* ---------------------------------------------------------------- Kachel */
/* Die Szene sitzt am oberen Rand und laeuft randlos in die Kachel aus. */
.res-card .res-viz{
  margin:-26px -24px 0;
  border-radius:var(--radius) var(--radius) 0 0;
}
.res-card.is-featured .res-viz{margin:-32px -30px 0;height:196px}
.res-stage .res-viz{height:clamp(210px,24vw,300px)}
/* Akzentkante am unteren Rand der Szene — der eine farbige Moment je Kachel */
.res-card .res-viz::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--acc-ink),transparent);
  opacity:.45;transition:opacity var(--dur-base) var(--ease-out);
}
.res-card:hover .res-viz::after,.res-card:focus-visible .res-viz::after{opacity:1}
/* Rahmen und Spotlight folgen dem Akzent statt dem Standard-Cyan */
.res-card:hover,.res-card:focus-visible{border-color:color-mix(in srgb,var(--acc-ink) 34%,transparent)}
.res-card::before{
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),
    color-mix(in srgb,var(--acc-ink) 11%,transparent),transparent 65%);
}
.res-card::after{
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--acc-ink) 85%,transparent),transparent);
}
.res-card .res-go{color:var(--acc-ink)}
.res-flag.is-new{color:var(--acc-ink);background:color-mix(in srgb,var(--acc-ink) 14%,transparent);
  border-color:color-mix(in srgb,var(--acc-ink) 30%,transparent)}

/* ------------------------------------------------- Detailseite: grosse Buehne */
.res-stage{
  position:relative;border-radius:26px;overflow:hidden;
  background:
    radial-gradient(120% 120% at 50% 0%,color-mix(in srgb,var(--acc-ink) 16%,transparent),transparent 62%),
    var(--panel-raised);
  border:1px solid color-mix(in srgb,var(--acc-ink) 22%,transparent);
  box-shadow:var(--shadow-lg);
  padding:14px 10px 6px;
}
.res-stage::before{
  content:"";position:absolute;inset:-1px;border-radius:26px;padding:1px;pointer-events:none;
  background:linear-gradient(160deg,color-mix(in srgb,var(--acc-ink) 55%,transparent),
    transparent 44%,transparent 62%,rgba(var(--violet-rgb),.3));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.res-stage .res-viz{background:none;border-bottom:none}
.res-stage-cap{
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:4px 0 10px;font-size:12.5px;color:var(--text-dim);
}
.res-stage-cap i{
  width:7px;height:7px;border-radius:50%;background:var(--acc-ink);flex:none;
  box-shadow:0 0 10px var(--acc-ink);
}
/* Auf der Detailseite laeuft die Bewegung nach dem Hereinscrollen einmal ab
   (resources.js setzt .play) und beim Ueberfahren erneut. */
@media (prefers-reduced-motion:no-preference){
  .res-stage.play .viz-anim{
    animation-name:var(--anim);
    animation-duration:var(--dur,1.2s);
    animation-delay:var(--d,0s);
    animation-timing-function:var(--ease-expo);
    animation-fill-mode:both;
  }
}

/* Akzent auf der Detailseite: Kicker, Nummern, Haken, Vorschau-Kante */
.res-detail .eyebrow{color:var(--acc-ink)}
.res-detail .eyebrow::before{background:var(--acc-ink)}
.res-detail-hero::before{background:color-mix(in srgb,var(--acc-ink) 9%,transparent)}
.res-detail .res-badge.accent{
  color:var(--acc-ink);background:color-mix(in srgb,var(--acc-ink) 13%,transparent);
  border-color:color-mix(in srgb,var(--acc-ink) 28%,transparent);
}
.res-detail .res-get .num{color:var(--acc-ink)}
.res-detail .res-get:hover{border-color:color-mix(in srgb,var(--acc-ink) 30%,transparent)}
.res-detail .res-benefits .chk{
  color:var(--acc-ink);background:color-mix(in srgb,var(--acc-ink) 13%,transparent);
  border-color:color-mix(in srgb,var(--acc-ink) 35%,transparent);
}
.res-detail .res-preview{border-color:color-mix(in srgb,var(--acc-ink) 18%,transparent)}
.res-detail .res-preview-bar i:first-child{background:color-mix(in srgb,var(--acc-ink) 50%,transparent)}
.res-detail .hv::before,.res-detail .hv::after,
.res-detail .res-form-sec::before,.res-detail .res-form-sec::after{
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--acc-ink) 30%,transparent),transparent);
}
.res-detail .res-form-card{border-color:color-mix(in srgb,var(--acc-ink) 20%,transparent)}
.res-detail .res-form-card::before{
  background:linear-gradient(160deg,color-mix(in srgb,var(--acc-ink) 45%,transparent),
    transparent 42%,transparent 62%,rgba(var(--violet-rgb),.32));
}
.res-detail .res-done .ring{
  color:var(--acc-ink);background:color-mix(in srgb,var(--acc-ink) 13%,transparent);
  border-color:color-mix(in srgb,var(--acc-ink) 40%,transparent);
}

/* Abschnitt „Ein Blick hinein" */
.res-peek{max-width:720px;margin:38px auto 0}

/* Rueckfallebene fuer Browser ohne color-mix(): dann greift der Cyan-Standard
   aus den Marken-Tokens, nichts bleibt farblos. */
@supports not (color:color-mix(in srgb,#fff 50%,transparent)){
  .res-card:hover,.res-card:focus-visible{border-color:rgba(var(--accent-rgb),.34)}
  .res-stage{border-color:rgba(var(--accent-rgb),.22)}
  .res-detail .res-badge.accent,.res-detail .res-benefits .chk,.res-detail .res-done .ring{
    background:var(--cyan-soft);border-color:rgba(var(--accent-rgb),.3)
  }
}

@media(max-width:680px){
  .res-card .res-viz,.res-card.is-featured .res-viz{margin:-26px -24px 0;height:146px}
  .res-stage{padding:10px 6px 4px}
  .res-stage .res-viz{height:186px}
}

/* ---- Keyframe fuer den Anruf, der wegfaellt (call-loss) ---- */
@keyframes vizMiss{
  0%{transform:translate(0,0);opacity:.85}
  48%{transform:translate(-26px,42px);opacity:0}
  52%{transform:translate(0,0);opacity:0}
  100%{transform:translate(0,0);opacity:.85}
}

/* ============================================================================
   Kachel-Varianten nach `kind`
   tool     — interaktiv, laeuft im Browser, keine E-Mail
   external — zeigt auf eine bestehende Seite (z. B. /audit/)
   download — der Regelfall, E-Mail gegen Datei
   ========================================================================== */
.res-flag.is-tool{
  color:var(--on-accent);background:var(--acc-ink);border-color:transparent;font-weight:700;
}
.res-card[data-kind="tool"] .res-viz::after,
.res-card[data-kind="external"] .res-viz::after{opacity:.8}
.res-nomail{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--acc-ink);
  margin-top:-4px;
}
.res-nomail svg{width:13px;height:13px}

/* ============================================================================
   Bundle-Band auf dem Hub
   ========================================================================== */
.res-bundle{
  position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;
  margin:34px 0 8px;padding:38px 40px;border-radius:26px;overflow:hidden;
  background:
    radial-gradient(110% 130% at 12% 0%,color-mix(in srgb,var(--acc-ink) 15%,transparent),transparent 60%),
    var(--panel-raised);
  border:1px solid color-mix(in srgb,var(--acc-ink) 22%,transparent);
}
.res-bundle::before{
  content:"";position:absolute;inset:-1px;border-radius:26px;padding:1px;pointer-events:none;
  background:linear-gradient(120deg,color-mix(in srgb,var(--acc-ink) 50%,transparent),
    transparent 40%,transparent 60%,rgba(var(--violet-rgb),.34));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.res-bundle h2{font-size:clamp(24px,3.2vw,34px);margin-bottom:14px;position:relative}
.res-bundle p{color:var(--text-dim);font-size:16px;max-width:52ch;margin-bottom:26px;position:relative}
.res-bundle .eyebrow{color:var(--acc-ink)}
.res-bundle .eyebrow::before{background:var(--acc-ink)}
.res-bundle-side{position:relative}
.res-bundle-count{
  display:flex;align-items:baseline;gap:10px;margin-bottom:16px;
}
.res-bundle-count b{
  font-family:var(--font-display);font-size:46px;font-weight:700;line-height:1;
  color:var(--acc-ink);
}
.res-bundle-count span{color:var(--text-dim);font-size:14px;max-width:16ch;line-height:1.4}
.res-bundle-list{list-style:none;display:grid;gap:9px;margin-bottom:24px}
.res-bundle-list li{
  display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--text-dim);
}
.res-bundle-list .tick{
  flex:none;width:18px;height:18px;border-radius:50%;margin-top:2px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--acc-ink) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--acc-ink) 34%,transparent);color:var(--acc-ink);
}
.res-bundle-list .tick svg{width:10px;height:10px}
.res-bundle-list li b{color:var(--text);font-weight:500}
@media(max-width:900px){
  .res-bundle{grid-template-columns:1fr;gap:28px;padding:30px 24px}
}

/* ============================================================================
   Bundle-Seite: Pfad in drei Schritten + Inhaltsliste
   ========================================================================== */
.kit-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:46px;counter-reset:ks}
.kit-step{
  position:relative;background:var(--panel);border:1px solid var(--panel-border);
  border-radius:20px;padding:28px 26px;
  transition-property:transform,border-color;transition-duration:var(--dur-base);
  transition-timing-function:var(--ease-out);
}
.kit-step:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--acc-ink) 30%,transparent)}
.kit-step::before{
  counter-increment:ks;content:counter(ks);
  position:absolute;top:-14px;left:26px;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:14px;
  color:var(--on-accent);background:var(--acc-ink);
}
.kit-step h3{font-size:18px;margin:10px 0 9px}
.kit-step p{color:var(--text-dim);font-size:14.8px}
/* Verbindungslinie zwischen den Schritten */
.kit-step:not(:last-child)::after{
  content:"";position:absolute;top:0;right:-20px;width:20px;height:1px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--acc-ink) 40%,transparent),transparent);
}
@media(max-width:900px){.kit-steps{grid-template-columns:1fr}.kit-step:not(:last-child)::after{display:none}}

.kit-table{
  margin-top:44px;border:1px solid var(--panel-border);border-radius:20px;overflow:hidden;
  background:rgba(var(--tint-rgb),.02);
}
.kit-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;
  padding:18px 24px;border-top:1px solid var(--panel-border);
  text-decoration:none;color:var(--text);
  transition:background var(--dur-fast) var(--ease-out);
}
.kit-row:first-child{border-top:none}
.kit-row:hover{background:rgba(var(--tint-rgb),.035)}
.kit-row-ic{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:color-mix(in srgb,var(--rc-ink) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--rc-ink) 30%,transparent);color:var(--rc-ink);
}
.kit-row-ic svg{width:18px;height:18px;stroke-width:1.7}
.kit-row-txt b{display:block;font-family:var(--font-display);font-weight:600;font-size:16px;margin-bottom:3px}
.kit-row-txt span{color:var(--text-dim);font-size:13.8px}
.kit-state{
  font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  padding:5px 11px;border-radius:100px;white-space:nowrap;
}
.kit-state.now{color:var(--on-accent);background:var(--rc-ink)}
.kit-state.soon{color:var(--text-dim);background:rgba(var(--tint-rgb),.05);border:1px solid var(--panel-border)}
@media(max-width:680px){
  .kit-row{grid-template-columns:auto 1fr;gap:14px;padding:16px 18px}
  .kit-state{grid-column:2;justify-self:start;margin-top:4px}
}

/* ============================================================================
   Anruf-Verlust-Rechner
   ========================================================================== */
.calc{
  display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start;
  margin-top:44px;
}
.calc-panel{
  background:var(--panel-raised);border:1px solid var(--panel-border);
  border-radius:24px;padding:32px 30px;
}
.calc-field{margin-bottom:26px}
.calc-field:last-child{margin-bottom:0}
.calc-label{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:12px;
}
.calc-label span{font-size:14.5px;color:var(--text)}
.calc-label output{
  font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--acc-ink);
  font-variant-numeric:tabular-nums;
}
.calc-hint{display:block;font-size:12.5px;color:var(--text-dim);margin-top:7px;line-height:1.5}
.calc-field input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:100px;
  background:linear-gradient(90deg,var(--acc-ink) var(--fill,30%),rgba(var(--line-rgb),.16) var(--fill,30%));
  outline:none;cursor:pointer;
}
.calc-field input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;border-radius:50%;cursor:grab;
  background:var(--acc-ink);border:3px solid var(--bg);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--acc-ink) 60%,transparent),var(--shadow-sm);
  transition:transform var(--dur-fast) var(--ease-out);
}
.calc-field input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.14)}
.calc-field input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;cursor:grab;border:3px solid var(--bg);
  background:var(--acc-ink);
}
.calc-field input[type=range]:focus-visible{outline:2px solid var(--acc-ink);outline-offset:6px}

/* Ergebnis */
.calc-out{
  position:relative;border-radius:24px;padding:34px 32px;overflow:hidden;
  background:
    radial-gradient(120% 120% at 50% 0%,color-mix(in srgb,var(--acc-ink) 16%,transparent),transparent 62%),
    var(--panel-raised);
  border:1px solid color-mix(in srgb,var(--acc-ink) 26%,transparent);
}
.calc-out .eyebrow{color:var(--acc-ink);margin-bottom:14px}
.calc-out .eyebrow::before{background:var(--acc-ink)}
.calc-big{
  font-family:var(--font-display);font-weight:700;line-height:1;letter-spacing:-.02em;
  font-size:clamp(34px,5.6vw,54px);color:var(--acc-ink);font-variant-numeric:tabular-nums;
  margin-bottom:8px;
}
.calc-big small{font-size:.42em;font-weight:600;color:var(--text-dim);margin-left:8px;letter-spacing:0}
.calc-sub{color:var(--text-dim);font-size:15px;margin-bottom:26px}
.calc-rows{list-style:none;display:grid;gap:1px;background:var(--panel-border);
  border:1px solid var(--panel-border);border-radius:14px;overflow:hidden}
.calc-rows li{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  background:var(--panel-raised);padding:13px 16px;font-size:14px;
}
.calc-rows li span{color:var(--text-dim)}
.calc-rows li b{font-family:var(--font-display);font-weight:600;color:var(--text);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.calc-rows li.sum{background:color-mix(in srgb,var(--acc-ink) 9%,var(--panel-raised))}
.calc-rows li.sum b{color:var(--acc-ink)}
.calc-note{
  margin-top:20px;font-size:12.5px;color:var(--text-dim);line-height:1.6;
  padding-top:18px;border-top:1px solid var(--panel-border);
}
.calc-note b{color:var(--text)}
.calc-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
@media(max-width:900px){.calc{grid-template-columns:1fr;gap:24px}}

/* Beweis-Band unter dem Hero des Hubs */
.res-proof{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:34px;
  background:rgba(var(--line-rgb),.09);border:1px solid var(--panel-border);
  border-radius:18px;overflow:hidden;
}
.res-proof div{background:var(--panel-solid);padding:20px 22px}
.res-proof b{
  display:block;font-family:var(--font-display);font-size:15.5px;font-weight:600;
  color:var(--text);margin-bottom:5px;
}
.res-proof span{font-size:13.5px;color:var(--text-dim);line-height:1.5}
@media(max-width:820px){.res-proof{grid-template-columns:1fr}}

/* ============================================================================
   Visuelle Aufwertung, Runde 2
   ========================================================================== */

/* --- Lesefortschritt: eine 2-px-Linie unter der Kopfzeile.
   Rein ueber die Scroll-Zeitachse, ohne JavaScript. Kann der Browser das nicht,
   ist die Linie unsichtbar (scaleX(0)) und stoert nichts. --- */
.res-progress{
  position:fixed;top:76px;left:0;right:0;height:2px;z-index:99;pointer-events:none;
  background:linear-gradient(90deg,var(--acc-ink,var(--cyan)),color-mix(in srgb,var(--acc-ink,var(--cyan)) 40%,var(--violet)));
  transform:scaleX(0);transform-origin:0 50%;
}
@supports (animation-timeline:scroll()){
  @media(prefers-reduced-motion:no-preference){
    .res-progress{animation:resProgress linear;animation-timeline:scroll(root block)}
    @keyframes resProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  }
}
@media(max-width:680px){.res-progress{top:76px}}

/* --- Kategoriekacheln: Symbol, Zahl, Akzent statt reiner Text --- */
.res-cat-card{
  display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;
  padding:18px 20px;
}
.res-cat-ic{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;
  background:color-mix(in srgb,var(--acc-ink) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--acc-ink) 28%,transparent);color:var(--acc-ink);
  transition:transform var(--dur-base) var(--ease-expo),background var(--dur-base) var(--ease-out);
}
.res-cat-ic svg{width:19px;height:19px;stroke-width:1.7}
.res-cat-card:hover .res-cat-ic{transform:rotate(-6deg) scale(1.07);background:color-mix(in srgb,var(--acc-ink) 20%,transparent)}
.res-cat-txt{min-width:0}
.res-cat-n{
  font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--acc-ink);
  font-variant-numeric:tabular-nums;opacity:.85;
}
.res-cat-card:hover{border-color:color-mix(in srgb,var(--acc-ink) 32%,transparent)}

/* --- Bundle-Zeilen: Akzentkante schiebt sich beim Ueberfahren ein --- */
.kit-row{position:relative}
.kit-row::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--rc-ink);
  transform:scaleY(0);transform-origin:50% 0;
  transition:transform var(--dur-base) var(--ease-expo);
}
.kit-row:hover::before{transform:scaleY(1)}
.kit-row .kit-row-ic{transition:transform var(--dur-base) var(--ease-expo)}
.kit-row:hover .kit-row-ic{transform:translateX(3px) scale(1.06)}

/* --- Ergebniszahl des Rechners: Zaehlanimation beim ersten Erscheinen --- */
.calc-big{transition:color .3s var(--ease-out)}
.calc-out.counting .calc-big{color:color-mix(in srgb,var(--acc-ink) 70%,var(--text))}

/* ============================================================================
   Schaltflaechen in der Bibliothek eine Nummer kleiner
   `.res-page` sitzt am <main> jeder erzeugten Seite. Die Groesse gilt damit
   ausschliesslich hier — Kopfzeile, Startseite und die uebrigen Landingpages
   behalten ihre bisherige Schaltflaechengroesse.
   ========================================================================== */
.res-page .btn{
  font-size:14.5px;padding:12px 22px;gap:8px;
}
.res-page .btn svg{width:15px;height:15px}
.res-page .lhero-ctas,.res-page .cta-ctas,.res-page .calc-ctas{gap:10px}

/* Absenden bleibt volle Breite (gut zu treffen), wird aber flacher */
.res-page .res-submit{font-size:15px;padding:14px 26px}

/* Feindruck unter dem Formular: eine Zeile, nicht ein Absatz */
.res-fineprint{font-size:12px;line-height:1.55}
.res-consent{font-size:13.2px;padding:14px 16px}
.res-consent input{width:19px;height:19px}
.res-consent input:checked::after{left:5.5px;top:2px}

@media(max-width:680px){
  /* Auf dem Handy die Schaltflaechen nebeneinander lassen, solange sie passen,
     und sonst umbrechen — aber nie schmaler als eine gut treffbare Flaeche. */
  .res-page .btn{
    font-size:14px;padding:12px 18px;min-height:44px;
    justify-content:center;flex:1 1 auto;
  }
  .res-page .lhero-ctas,.res-page .cta-ctas,.res-page .calc-ctas{gap:9px}
  /* Im zentrierten CTA-Kasten bricht Text sonst zweizeilig um: dort volle Breite */
  .res-page .cta-ctas .btn{flex:1 1 100%}
  .res-page .res-submit{flex:1 1 100%;font-size:15px}
  /* Der Kicker mit „Typ · Kategorie" bricht bei langen Kategorien haesslich */
  .res-page .eyebrow{font-size:12px;letter-spacing:.1em}
  .res-detail-hero h1{font-size:clamp(27px,7.4vw,34px)}
  .res-badges{gap:7px}
  .res-badge{font-size:11.8px;padding:6px 12px}
  .res-badge svg{width:13px;height:13px}
  /* Bundle-Band: Zahl und Liste kompakter */
  .res-bundle{padding:26px 20px}
  .res-bundle-count b{font-size:38px}
  .kit-row-txt span{font-size:13px}
  .calc-panel,.calc-out{padding:24px 20px}
  .calc-big{font-size:clamp(30px,9vw,40px)}
  .calc-label span{font-size:13.8px}
  .calc-hint{font-size:12px}
  .res-form-card{padding:26px 20px}
}
/* Sehr schmale Geraete (iPhone SE, 320 px): sonst bricht „KI-Potenzial-Analyse"
   auf zwei Zeilen und die Schaltflaeche wird doppelt so hoch. */
@media(max-width:340px){
  .res-page .btn{font-size:13.4px;padding:11px 14px}
  .res-page .btn svg{width:14px;height:14px}
}

/* ---------------------------------------------------------------- Responsive */
@media(max-width:1000px){
  .res-grid{grid-template-columns:1fr 1fr}
  .res-related{grid-template-columns:1fr 1fr}
  .res-detail-grid{grid-template-columns:1fr;gap:42px}
  .res-tools{top:0}
}
@media(max-width:680px){
  .res-hero{padding:120px 0 40px}
  .res-detail-hero{padding:120px 0 10px}
  .res-grid,.res-related{grid-template-columns:1fr}
  .res-tools{position:static;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:8px 0 4px}
  .res-tools-row{gap:10px}
  .res-search{max-width:none}
  .res-sort{flex:1 1 100%}
  .res-chips{
    margin:14px -28px 0;padding:0 28px 4px;flex-wrap:nowrap;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .res-chips::-webkit-scrollbar{display:none}
  .res-chip{flex:none}
  .res-form-card{padding:30px 22px}
  .res-preview-body{padding:18px 18px 22px}
  .res-line{font-size:12.5px;gap:10px}
}