/* Fassung 26: Vibe Coding, Abo ersetzen, Firmenpilot, Beleg-Band und Projektwand.
   Nutzt nur Farben, Schriften und Maße aus seite.css. Bewegung nur über transform und opacity.
   Jede Dauerschleife steht in prefers-reduced-motion:no-preference, sonst bleibt das Endbild stehen. */

/* ---------- Grundlagen ---------- */
.f26-js .f26-auf{transition:transform .9s var(--ease)}
.f26-js .f26-auf:not(.f26-da){transform:translateY(24px)}
.f26-kopf{display:grid;gap:.8rem;max-width:46rem;margin-bottom:clamp(1.8rem,4vw,2.8rem);justify-items:start}
.f26-kopf.mitte{margin-inline:auto;justify-items:center;text-align:center}
.f26-kopf .lead{max-width:44rem}
.pille.gut{color:var(--gut);background:var(--gut-bg)}
.nav > a[aria-current="page"]{background:var(--flaeche);color:var(--marke)}
.f26-beispiel{position:absolute;z-index:2;top:.7rem;right:.7rem;font:800 .62rem var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--leise);background:rgba(255,255,255,.92);border:1px solid var(--linie);border-radius:999px;padding:.2rem .55rem}
.f26-band-klein{padding-block:clamp(2.6rem,5vw,4rem)}

/* ---------- Startseite: neuer Kopfbereich ---------- */
.hero h1.f26-h1{font-size:clamp(2.2rem,4.1vw,3.8rem);line-height:.98}
.f26-markenzeile{display:inline-flex;align-items:center;gap:.7rem;font:800 clamp(1.05rem,1.6vw,1.3rem)/1.2 var(--display);letter-spacing:-.02em;color:var(--tinte)}
.f26-markenzeile::before{content:"";width:2.2rem;height:3px;border-radius:3px;background:var(--verlauf)}

/* ---------- Startseite: Beleg-Band ---------- */
.f26-belege{position:relative;padding-block:clamp(2.4rem,5vw,3.8rem) clamp(2.8rem,5.5vw,4.2rem);background:linear-gradient(180deg,var(--papier) 0%,var(--grund) 100%);border-top:1px solid var(--linie)}
.f26-beleg-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem}
.f26-beleg{display:grid;grid-template-rows:auto 1fr;border-radius:var(--r-l);background:var(--papier);border:1px solid var(--linie);box-shadow:var(--schatten);overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.f26-beleg:hover{transform:translateY(-4px);box-shadow:var(--schatten-hoch)}
.f26-beleg-bild{position:relative;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;background:linear-gradient(140deg,#fdf0f6 0%,#fff 55%,#f6e7ef 100%);border-bottom:1px solid var(--linie)}
.f26-beleg-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0 0}
.f26-beleg-bild svg{width:46%;height:auto;overflow:visible}
.f26-beleg-inhalt{display:grid;gap:.95rem;padding:1.1rem 1.2rem 1.25rem;align-content:start}
.f26-beleg-kopf{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.f26-beleg-kopf h3{font:900 1.3rem/1.1 var(--display);letter-spacing:-.03em}
.f26-weg{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.f26-weg::before{content:"";position:absolute;left:.95rem;top:1.2rem;bottom:1.2rem;border-left:2px dashed var(--linie-2)}
.f26-weg li{position:relative;display:grid;grid-template-columns:1.9rem minmax(0,1fr);gap:.65rem;align-items:start}
.f26-weg i{position:relative;z-index:1;width:1.9rem;height:1.9rem;border-radius:50%;display:grid;place-items:center;background:var(--papier);border:1.5px solid var(--linie-2);color:var(--marke);font-style:normal}
.f26-weg i svg{width:1rem;height:1rem}
.f26-weg li:last-child i{background:var(--verlauf);border-color:transparent;color:#fff}
.f26-weg small{display:block;font:800 .66rem var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--marke)}
.f26-weg span{display:block;font-size:.92rem;line-height:1.45;color:var(--text)}
.f26-beleg-link{justify-self:start;display:inline-flex;align-items:center;gap:.35rem;font:700 .9rem var(--display);color:var(--marke);text-decoration:none}
.f26-beleg-link svg{width:1rem;height:1rem;flex:none}
.f26-beleg-link:hover{text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:no-preference){
  .f26-js .f26-beleg:not(.f26-da) .f26-weg li{opacity:.001;transform:translateY(8px)}
  .f26-beleg .f26-weg li{transition:opacity .6s var(--ease),transform .6s var(--ease)}
  .f26-beleg .f26-weg li:nth-child(2){transition-delay:.25s}
  .f26-beleg .f26-weg li:nth-child(3){transition-delay:.5s}
  .f26-beleg.f26-da .f26-weg li:last-child i{animation:f26Puls 2.6s var(--ease) 1.2s infinite}
}
@keyframes f26Puls{0%{box-shadow:0 0 0 0 rgba(221,66,140,.45)}70%{box-shadow:0 0 0 .55rem rgba(221,66,140,0)}100%{box-shadow:0 0 0 0 rgba(221,66,140,0)}}
@media (max-width:980px){.f26-beleg-raster{grid-template-columns:1fr;max-width:34rem;margin-inline:auto}}
.f26-intro .f26-kopf{margin-bottom:0}
.f26-intro .h2 .zeile{display:inline}

/* Orbit-Grafik im Beleg-Band */
.f26-orbit .f26-bahn{fill:none;stroke:var(--linie-2);stroke-width:1.4;stroke-dasharray:3 5}
.f26-orbit .f26-mitte{fill:url(#f26OrbitVerlauf)}
.f26-orbit .f26-kreisen{transform-origin:60px 60px}
@media (prefers-reduced-motion:no-preference){
  .f26-orbit .f26-kreisen{animation:f26Drehen 22s linear infinite}
  .f26-orbit .f26-kreisen.zwei{animation-duration:34s;animation-direction:reverse}
}
@keyframes f26Drehen{to{transform:rotate(360deg)}}

/* ---------- Startseite: Lernpfad-Karte Leitpfad ---------- */
.ak-pfad.f26-leitkarte{grid-column:1 / -1;border:1.5px solid transparent;background:linear-gradient(var(--papier),var(--papier)) padding-box,var(--verlauf) border-box;box-shadow:var(--schatten)}
@media (min-width:1061px){
  .ak-pfad.f26-leitkarte{grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);column-gap:2rem;align-items:start}
  .f26-leitkarte .ak-kopf,.f26-leitkarte .ak-fort,.f26-leitkarte .ak-ziel{grid-column:1}
  .f26-leitkarte .ak-schritte{grid-column:2;grid-row:1 / span 3;grid-template-columns:repeat(5,minmax(0,1fr));gap:.9rem}
  .f26-leitkarte .ak-schritte li{grid-template-columns:1fr;gap:.45rem}
}
.f26-neu-marke{display:inline-block;margin-left:.4rem;font:800 .62rem var(--display);letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--marke);border-radius:999px;padding:.12rem .45rem;vertical-align:middle}

/* ---------- Startseite: Abschnitt Abo ersetzen ---------- */
.f26-zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(1.8rem,4vw,3.5rem);align-items:center}
.f26-zwei .f26-kopf{margin-bottom:0}
@media (max-width:980px){.f26-zwei{grid-template-columns:1fr}}

/* ---------- Grafik: Abos fließen in ein eigenes Werkzeug ---------- */
.f26-abo-fluss{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(1.5rem,.35fr) minmax(0,1.2fr);align-items:center;padding:clamp(1.1rem,2.6vw,1.7rem);border-radius:calc(var(--r-l) + .4rem);background:linear-gradient(140deg,#fdf0f6 0%,#fff 50%,#f6e7ef 100%);border:1px solid var(--linie);box-shadow:var(--schatten);text-align:left}
.f26-abos{display:grid;gap:.6rem;position:relative;z-index:1}
.f26-abo{display:grid;grid-template-columns:2.1rem minmax(0,1fr) auto;gap:.5rem;align-items:center;padding:.45rem .55rem .45rem .45rem;border-radius:.9rem;background:var(--papier);border:1px solid var(--linie);box-shadow:0 10px 22px -18px rgba(58,16,56,.6)}
.f26-abo i{width:2.1rem;height:2.1rem;border-radius:.65rem;display:grid;place-items:center;color:#fff;background:var(--f,#b72f67)}
.f26-abo i svg{width:1.15rem;height:1.15rem}
.f26-abo b{font:800 .92rem var(--display);color:var(--tinte);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f26-abo small{font:800 .62rem var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--leise);background:var(--grund);border:1px solid var(--linie);border-radius:999px;padding:.12rem .45rem}
.f26-abo-linien{width:100%;height:100%;min-height:12rem;overflow:visible}
.f26-abo-linien path{fill:none;stroke:var(--linie-2);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-dasharray:4 5}
@media (prefers-reduced-motion:no-preference){.f26-abo-linien path{animation:f26Fluss 1.2s linear infinite}}
@keyframes f26Fluss{to{stroke-dashoffset:-18}}
.f26-werkzeug{position:relative;z-index:1;display:grid;gap:.5rem;padding:0 0 .9rem;border-radius:1rem;background:var(--papier);border:1px solid var(--linie);box-shadow:var(--schatten-hoch);overflow:hidden}
.f26-fenster-kopf{display:flex;align-items:center;gap:.3rem;padding:.5rem .7rem;background:#f8f2f5;border-bottom:1px solid #efe3ea;font:700 .72rem var(--display);color:#7d6676}
.f26-fenster-kopf i{width:.45rem;height:.45rem;border-radius:50%;background:#e3d4dd}
.f26-fenster-kopf i:first-child{background:#f2696c}
.f26-fenster-kopf span{margin-left:.35rem}
.f26-werkzeug ul{list-style:none;margin:0;padding:.2rem .9rem 0;display:grid;gap:.4rem}
.f26-werkzeug li{display:flex;align-items:center;gap:.55rem;font-size:.9rem;color:var(--text);transition:opacity .6s var(--ease)}
.f26-werkzeug li::before{content:"";flex:none;width:1.05rem;height:1.05rem;border-radius:.35rem;border:1.5px solid var(--linie-2);background:var(--papier)}
.f26-werkzeug li.an::before{border-color:transparent;background:var(--gut) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/78% no-repeat}
.f26-werkzeug li.aus{opacity:.38;text-decoration:line-through;text-decoration-color:var(--linie-2)}
.f26-werkzeug p{margin:.2rem .9rem 0;font:800 .82rem var(--display);color:var(--marke)}
@media (prefers-reduced-motion:no-preference){
  .f26-werkzeug li.aus{animation:f26Weglassen 6s var(--ease) infinite}
  .f26-werkzeug li.aus:nth-of-type(4){animation-delay:.35s}
  .f26-werkzeug li.aus:nth-of-type(6){animation-delay:.7s}
}
@keyframes f26Weglassen{0%,15%{opacity:1;text-decoration-color:transparent}35%,85%{opacity:.38;text-decoration-color:var(--linie-2)}100%{opacity:1;text-decoration-color:transparent}}
@media (max-width:620px){
  .f26-abo-fluss{grid-template-columns:1fr;gap:.9rem}
  .f26-abo-linien{display:none}
  .f26-abos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .f26-abo{grid-template-columns:2rem minmax(0,1fr)}
  .f26-abo i{width:2rem;height:2rem}
  .f26-abo small{display:none}
}

/* ---------- Grafik: Du beschreibst, die KI baut ---------- */
.f26-bau{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(2.5rem,.4fr) minmax(0,1.15fr);align-items:center;gap:.4rem;width:min(100%,52rem);padding:clamp(1.1rem,2.6vw,1.7rem);border-radius:calc(var(--r-l) + .4rem);background:linear-gradient(140deg,#fdf0f6 0%,#fff 50%,#f6e7ef 100%);border:1px solid var(--linie);box-shadow:var(--schatten);text-align:left;margin-top:.6rem}
.f26-wunsch{position:relative;z-index:1;padding:.8rem .9rem;border-radius:1rem 1rem .3rem 1rem;color:#fff;background:linear-gradient(120deg,#9c54a1,#dd428c);box-shadow:0 14px 30px -18px rgba(183,47,103,.8)}
.f26-wunsch b{display:block;font:800 .66rem var(--display);letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.f26-wunsch p{font-size:.92rem;line-height:1.45}
.f26-bau-pfeil{width:100%;height:2.4rem;overflow:visible}
.f26-bau-pfeil path{fill:none;stroke:var(--linie-2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.f26-bau-pfeil .strich{stroke-dasharray:4 5}
@media (prefers-reduced-motion:no-preference){.f26-bau-pfeil .strich{animation:f26Fluss 1.2s linear infinite}}
.f26-app{position:relative;z-index:1;display:grid;gap:.55rem;padding:0 0 .9rem;border-radius:1rem;background:var(--papier);border:1px solid var(--linie);box-shadow:var(--schatten-hoch);overflow:hidden}
.f26-app ul{list-style:none;margin:0;padding:.1rem .8rem 0;display:grid;gap:.4rem}
.f26-app li{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.45rem .6rem;border-radius:.6rem;background:var(--grund);border:1px solid var(--linie);font-size:.84rem;color:var(--text)}
.f26-app li em{font:800 .62rem var(--display);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--warn);background:var(--warn-bg);border-radius:999px;padding:.12rem .45rem}
.f26-app li em.ok{color:var(--gut);background:var(--gut-bg)}
.f26-app-knopf{margin:0 .8rem;justify-self:start;font:700 .78rem var(--display);color:#fff;background:linear-gradient(120deg,#9c54a1,#b72f67);border-radius:999px;padding:.45rem .8rem}
@media (prefers-reduced-motion:no-preference){
  .f26-app li{animation:f26Zeile 7s var(--ease) infinite}
  .f26-app li:nth-child(2){animation-delay:.25s}
  .f26-app li:nth-child(3){animation-delay:.5s}
  .f26-app-knopf{animation:f26Zeile 7s var(--ease) .75s infinite}
}
@keyframes f26Zeile{0%,6%{opacity:0;transform:translateY(8px)}16%,88%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-4px)}}
@media (max-width:620px){
  .f26-bau{grid-template-columns:1fr}
  .f26-bau-pfeil{transform:rotate(90deg);height:2rem;width:3rem;justify-self:center}
}

/* ---------- Hinweisbox „Weniger ist heute mehr“ ---------- */
.f26-hinweis{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.2rem 1.6rem;align-items:center;padding:clamp(1.1rem,2.4vw,1.6rem);border-radius:calc(var(--r-l) + .2rem);background:linear-gradient(120deg,#fdf0f6 0%,#fff 62%);border:1px solid var(--linie-2);box-shadow:var(--schatten)}
.f26-hinweis-bild{width:clamp(6.5rem,12vw,8.6rem);aspect-ratio:4/3;border-radius:1rem;background:var(--papier);border:1px solid var(--linie);display:grid;place-items:center}
.f26-hinweis-bild svg{width:82%;height:auto;overflow:visible}
.f26-hinweis-text{display:grid;gap:.55rem}
.f26-hinweis-titel{font:900 clamp(1.2rem,2vw,1.45rem)/1.15 var(--display);color:var(--tinte);letter-spacing:-.03em;margin:0}
.f26-hinweis-text p{color:var(--text);max-width:54rem}
.f26-lang rect{fill:var(--linie-2);transform-box:fill-box;transform-origin:0 50%}
.f26-klar{transform-box:fill-box;transform-origin:0 50%}
.f26-haken{transform-box:fill-box;transform-origin:50% 50%}
@media (prefers-reduced-motion:no-preference){
  .f26-lang rect{animation:f26Weg 7s var(--ease) infinite}
  .f26-lang rect:nth-child(2){animation-delay:.1s}.f26-lang rect:nth-child(3){animation-delay:.2s}
  .f26-lang rect:nth-child(4){animation-delay:.3s}.f26-lang rect:nth-child(5){animation-delay:.4s}.f26-lang rect:nth-child(6){animation-delay:.5s}
  .f26-klar{animation:f26Klar 7s var(--ease) infinite}
  .f26-haken{animation:f26Haken 7s var(--ease) infinite}
}
@keyframes f26Weg{0%,16%{transform:scaleX(1);opacity:1}36%,84%{transform:scaleX(.12);opacity:.15}100%{transform:scaleX(1);opacity:1}}
@keyframes f26Klar{0%,26%{transform:scaleX(.08);opacity:.3}44%,86%{transform:scaleX(1);opacity:1}100%{transform:scaleX(.08);opacity:.3}}
@keyframes f26Haken{0%,42%{transform:scale(.4);opacity:0}52%,86%{transform:scale(1);opacity:1}100%{transform:scale(.4);opacity:0}}
@media (max-width:620px){.f26-hinweis{grid-template-columns:1fr}.f26-hinweis-bild{width:7.2rem}}
.f26-hinweis-band{padding-block:clamp(1.4rem,3vw,2.2rem) 0}

/* ---------- Kleine Wortliste für Einsteiger ---------- */
.f26-woerter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}
.f26-wort{display:grid;gap:.35rem;padding:1.1rem 1.2rem;border-radius:var(--r-m);background:var(--papier);border:1px solid var(--linie)}
.f26-wort b{font:900 1.05rem var(--display);color:var(--tinte)}
.f26-wort span{font-size:.94rem;color:var(--leise);line-height:1.5}
@media (max-width:760px){.f26-woerter{grid-template-columns:1fr}}

/* ---------- Leitpfad ---------- */
.f26-sprung{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 clamp(1.8rem,4vw,2.6rem)}
.f26-sprung a{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .9rem .45rem .45rem;border-radius:999px;background:var(--papier);border:1px solid var(--linie);font:700 .9rem var(--display);color:var(--tinte);text-decoration:none;transition:border-color .2s,transform .2s}
.f26-sprung a:hover{border-color:var(--marke);transform:translateY(-1px)}
.f26-sprung span{width:1.7rem;height:1.7rem;border-radius:50%;display:grid;place-items:center;font:900 .78rem var(--display);color:#fff;background:var(--verlauf)}
.f26-stufen{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.4rem,3vw,2.2rem)}
.f26-stufen::before,.f26-stufen::after{content:"";position:absolute;left:1.4rem;top:1.6rem;bottom:1.6rem;width:3px;border-radius:3px;background:var(--linie)}
.f26-stufen::after{background:var(--verlauf-tief);transform-origin:50% 0;transform:scaleY(var(--f26-fort,1))}
.f26-js .f26-stufen::after{transform:scaleY(var(--f26-fort,0));transition:transform .2s linear}
.f26-stufe{position:relative;display:grid;grid-template-columns:3rem minmax(0,1fr);gap:1.2rem;scroll-margin-top:7rem}
.f26-marke{position:relative;z-index:1;width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;background:var(--verlauf);color:#fff;transition:background .4s,color .4s,transform .4s var(--ease),box-shadow .4s}
.f26-js .f26-stufe:not(.f26-erreicht) .f26-marke{background:var(--papier);color:var(--marke);box-shadow:inset 0 0 0 2px var(--linie-2)}
.f26-stufe.f26-erreicht .f26-marke{transform:scale(1.06);box-shadow:0 10px 24px -12px rgba(183,47,103,.8)}
.f26-marke svg{width:1.35rem;height:1.35rem}
.f26-stufe-karte{display:grid;gap:.85rem;padding:clamp(1.1rem,2.4vw,1.6rem);border-radius:var(--r-l);background:var(--papier);border:1px solid var(--linie);box-shadow:var(--schatten);min-width:0}
.f26-stufe-nr{font:800 .72rem var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--marke)}
.f26-stufe-karte h3{font:900 clamp(1.25rem,2.2vw,1.6rem)/1.15 var(--display);letter-spacing:-.03em}
.f26-stufe-karte > p{color:var(--text);max-width:48rem}
.f26-fertig{display:flex;gap:.6rem;align-items:flex-start;padding:.75rem .9rem;border-radius:var(--r-s);background:var(--gut-bg);color:#14583e;font-size:.95rem;line-height:1.5}
.f26-fertig svg{flex:none;width:1.15rem;height:1.15rem;margin-top:.15rem;color:var(--gut)}
.f26-checkliste{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.f26-checkliste label{display:flex;gap:.7rem;align-items:flex-start;padding:.65rem .85rem;border-radius:var(--r-s);border:1px solid var(--linie);background:var(--grund);cursor:pointer;line-height:1.45}
.f26-checkliste input{flex:none;width:1.15rem;height:1.15rem;margin:.15rem 0 0;accent-color:var(--marke)}
.f26-checkliste input:checked + span{color:var(--leise)}
.f26-checkliste-stand{font:700 .86rem var(--display);color:var(--leise)}
.f26-checkliste-stand.voll{color:var(--gut)}
.f26-ki-hinweis{font-size:.88rem;color:var(--leise)}
@media (max-width:620px){
  .f26-stufe{grid-template-columns:2.4rem minmax(0,1fr);gap:.8rem}
  .f26-marke{width:2.4rem;height:2.4rem}
  .f26-marke svg{width:1.1rem;height:1.1rem}
  .f26-stufen::before,.f26-stufen::after{left:1.1rem}
}
.f26-entwuerfe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;max-width:30rem}
.f26-entwurf{position:relative;aspect-ratio:4/3;border-radius:.8rem;border:1px solid var(--linie);background:var(--grund);padding:.5rem;display:grid;gap:.3rem;align-content:start;overflow:hidden}
.f26-entwurf i{display:block;height:.42rem;border-radius:.3rem;background:var(--linie-2)}
.f26-entwurf i:first-child{width:55%;background:var(--violett);opacity:.55}
.f26-entwurf i.k{height:1.3rem;width:100%;background:#fff;border:1px solid var(--linie)}
.f26-entwurf i.h{width:70%}
.f26-entwurf.b i.k{height:.9rem;width:46%;display:inline-block}
.f26-entwurf.gewaehlt{border:1.5px solid transparent;background:linear-gradient(#fff,#fff) padding-box,var(--verlauf) border-box;box-shadow:var(--schatten)}
.f26-entwurf.gewaehlt::after{content:"Gewählt";position:absolute;right:.35rem;bottom:.35rem;font:800 .56rem var(--display);letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--marke);border-radius:999px;padding:.15rem .45rem}
.f26-entwurf::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.8) 50%,transparent 70%);transform:translateX(-110%)}
@media (prefers-reduced-motion:no-preference){
  .f26-entwurf::before{animation:f26Glanz 3.8s ease-in-out infinite}
  .f26-entwurf:nth-child(2)::before{animation-delay:.45s}
  .f26-entwurf:nth-child(3)::before{animation-delay:.9s}
}
@keyframes f26Glanz{0%{transform:translateX(-110%)}45%,100%{transform:translateX(110%)}}

/* ---------- Abo-Rechner ---------- */
.f26-rechner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(1.2rem,3vw,2rem);align-items:start}
.f26-eingaben{display:grid;gap:1.1rem;padding:clamp(1.1rem,2.4vw,1.6rem);border-radius:var(--r-l);background:var(--papier);border:1px solid var(--linie);box-shadow:var(--schatten)}
.f26-gruppe{display:grid;gap:.9rem;margin:0;padding:0;border:0;min-width:0}
.f26-gruppe legend{padding:0;margin-bottom:.2rem;font:800 .72rem var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--marke)}
.f26-feld{display:grid;gap:.4rem}
.f26-feld-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem}
.f26-feld-kopf label{font:700 .95rem var(--display);color:var(--tinte)}
.f26-zahl{display:inline-flex;align-items:center;gap:.3rem;font-size:.9rem;color:var(--leise)}
.f26-zahl input{width:5.6rem;padding:.35rem .5rem;border-radius:.55rem;border:1.5px solid var(--linie-2);font:700 .95rem var(--body);color:var(--tinte);text-align:right;background:var(--papier)}
.f26-zahl input:focus-visible{outline:3px solid var(--magenta);outline-offset:2px}
.f26-regler{-webkit-appearance:none;appearance:none;width:100%;height:.45rem;margin:.35rem 0;border-radius:999px;background:linear-gradient(90deg,var(--marke) 0 var(--p,50%),var(--linie) var(--p,50%) 100%);cursor:pointer}
.f26-regler::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:1.4rem;height:1.4rem;border-radius:50%;background:#fff;border:3px solid var(--marke);box-shadow:0 4px 10px -4px rgba(183,47,103,.7)}
.f26-regler::-moz-range-thumb{width:1.1rem;height:1.1rem;border-radius:50%;background:#fff;border:3px solid var(--marke);box-shadow:0 4px 10px -4px rgba(183,47,103,.7)}
.f26-regler:focus-visible{outline:3px solid var(--magenta);outline-offset:6px}
.f26-feld small{font-size:.82rem;line-height:1.4;color:var(--leise)}
.f26-beispielwerte{font-size:.86rem;color:var(--leise)}
.f26-zuruecksetzen{justify-self:start;font:700 .86rem var(--display);color:var(--marke);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.f26-ergebnis{position:relative;display:grid;gap:1rem;padding:clamp(1.1rem,2.4vw,1.6rem);border-radius:var(--r-l);background:var(--papier);border:1.5px solid transparent;background:linear-gradient(var(--papier),var(--papier)) padding-box,var(--verlauf) border-box;box-shadow:var(--schatten-hoch)}
.f26-urteil{display:flex;gap:.8rem;align-items:flex-start;padding:.85rem 1rem;border-radius:var(--r-m);background:var(--grund)}
.f26-urteil-punkt{flex:none;width:1rem;height:1rem;margin-top:.25rem;border-radius:50%;background:var(--leise)}
.f26-urteil b{display:block;font:900 1.12rem/1.25 var(--display);color:var(--tinte)}
.f26-urteil p{font-size:.94rem;color:var(--text);margin-top:.15rem}
.f26-urteil.gruen{background:var(--gut-bg)}.f26-urteil.gruen .f26-urteil-punkt{background:var(--gut)}
.f26-urteil.gelb{background:var(--warn-bg)}.f26-urteil.gelb .f26-urteil-punkt{background:#d48a00}
.f26-urteil.rot{background:var(--schlecht-bg)}.f26-urteil.rot .f26-urteil-punkt{background:var(--schlecht)}
@media (prefers-reduced-motion:no-preference){.f26-urteil .f26-urteil-punkt{animation:f26Puls 2.4s var(--ease) infinite}}
.f26-zahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.f26-zahlen div{display:grid;gap:.15rem;padding:.75rem .85rem;border-radius:var(--r-s);border:1px solid var(--linie);background:var(--papier)}
.f26-zahlen small{font:800 .64rem var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--leise)}
.f26-zahlen b{font:900 clamp(1.1rem,2vw,1.45rem)/1.1 var(--display);color:var(--tinte);font-variant-numeric:tabular-nums}
.f26-zahlen .gross b{background:var(--verlauf-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.f26-zahlen .minus b{color:var(--schlecht);background:none}
.f26-kurve{width:100%;height:auto;display:block;overflow:visible}
.f26-kurve .gitter{stroke:var(--linie);stroke-width:1}
.f26-kurve .achse{font:700 12px var(--display);fill:var(--leise)}
@media (max-width:620px){.f26-kurve .achse{font-size:19px}}
.f26-kurve .linie-abo{fill:none;stroke:var(--leise);stroke-width:2.5;stroke-dasharray:6 6}
.f26-kurve .linie-eigen{fill:none;stroke:url(#f26KurveVerlauf);stroke-width:3.5;stroke-linecap:round}
.f26-kurve .plus{fill:rgba(30,122,87,.12)}
.f26-kurve .schnitt{fill:var(--papier);stroke:var(--gut);stroke-width:3}
.f26-kurve .schnitt-ring{fill:none;stroke:var(--gut);stroke-width:2;opacity:.5;transform-box:fill-box;transform-origin:50% 50%}
@media (prefers-reduced-motion:no-preference){.f26-kurve .schnitt-ring{animation:f26Ring 2.2s var(--ease) infinite}}
@keyframes f26Ring{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.4);opacity:0}}
.f26-kurve .zeichnen{stroke-dasharray:1;stroke-dashoffset:0}
.f26-js .f26-kurve.vorher .zeichnen{stroke-dashoffset:1}
.f26-kurve.zeichnet .zeichnen{transition:stroke-dashoffset 1.4s var(--ease)}
.f26-legende{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-size:.86rem;color:var(--leise)}
.f26-legende span{display:inline-flex;align-items:center;gap:.45rem}
.f26-legende i{display:inline-block;width:1.6rem;height:0;border-top:3px dashed var(--leise)}
.f26-legende i.eigen{border-top:3.5px solid var(--marke)}
.f26-legende i.plus{height:.7rem;border:0;background:rgba(30,122,87,.18);border-radius:.2rem}
.f26-rechenweg{border-top:1px solid var(--linie);padding-top:.8rem}
.f26-rechenweg summary{cursor:pointer;font:700 .92rem var(--display);color:var(--marke)}
.f26-rechenweg ul{margin:.6rem 0 0;padding-left:1.1rem;display:grid;gap:.35rem;font-size:.9rem;color:var(--text)}
@media (max-width:980px){.f26-rechner{grid-template-columns:1fr}}
@media (max-width:520px){.f26-zahlen{grid-template-columns:1fr 1fr}.f26-zahlen .gross{grid-column:1 / -1}}

/* ---------- Drei Schritte ---------- */
.f26-drei{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;counter-reset:f26}
.f26-drei::before{content:"";position:absolute;left:8%;right:8%;top:2.05rem;border-top:2px dashed var(--linie-2);z-index:0}
.f26-drei .weg-schritt{z-index:1;padding:1.2rem;gap:.4rem}
.f26-drei .weg-schritt span{width:2.3rem;height:2.3rem;font-size:.95rem}
.f26-drei .weg-schritt b{font-size:1.08rem}
.f26-drei .weg-schritt small{font-size:.9rem;line-height:1.5}
@media (max-width:860px){.f26-drei{grid-template-columns:1fr}.f26-drei::before{display:none}}

/* ---------- Grenzen ---------- */
.f26-grenzen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.f26-grenze{display:grid;gap:.8rem;align-content:start;padding:clamp(1.1rem,2.4vw,1.5rem);border-radius:var(--r-l);border:1px solid var(--linie);background:var(--papier);box-shadow:var(--schatten)}
.f26-grenze h3{font:900 1.2rem var(--display)}
.f26-grenze ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.f26-grenze li{display:grid;grid-template-columns:1.6rem minmax(0,1fr);gap:.55rem;align-items:start;line-height:1.5}
.f26-grenze li svg{width:1.6rem;height:1.6rem;padding:.25rem;border-radius:50%}
.f26-grenze.ja li svg{color:var(--gut);background:var(--gut-bg)}
.f26-grenze.nein li svg{color:var(--schlecht);background:var(--schlecht-bg)}
.f26-grenze li svg path{stroke-dasharray:30;stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){
  .f26-js .f26-grenze:not(.f26-da) li svg path{stroke-dashoffset:30}
  .f26-grenze li svg path{transition:stroke-dashoffset .7s var(--ease)}
  .f26-grenze li:nth-child(2) svg path{transition-delay:.15s}
  .f26-grenze li:nth-child(3) svg path{transition-delay:.3s}
  .f26-grenze li:nth-child(4) svg path{transition-delay:.45s}
}
.f26-vorsicht{margin-top:1rem;display:flex;gap:.7rem;align-items:flex-start;padding:.85rem 1rem;border-radius:var(--r-m);background:var(--warn-bg);color:#5e3a00;font-size:.95rem}
.f26-vorsicht svg{flex:none;width:1.2rem;height:1.2rem;margin-top:.15rem;color:var(--warn)}
@media (max-width:760px){.f26-grenzen{grid-template-columns:1fr}}

/* ---------- Orbit: Muster einer Projektkarte ---------- */
.f26-orbit-karte{position:relative;display:grid;gap:.55rem;padding:clamp(1.1rem,2.4vw,1.5rem);border-radius:var(--r-l);background:var(--papier);border:1px solid var(--linie);box-shadow:var(--schatten-hoch);max-width:30rem;justify-self:center;width:100%}
.f26-orbit-karte-kopf{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;padding-bottom:.55rem;border-bottom:1px solid var(--linie)}
.f26-orbit-karte-kopf b{font:900 1.05rem var(--display);color:var(--tinte)}
.f26-orbit-karte dl{margin:0;display:grid;gap:.45rem}
.f26-orbit-karte dl div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:.8rem;align-items:center;padding:.5rem .65rem;border-radius:.6rem;background:var(--grund)}
.f26-orbit-karte dt{font:700 .84rem var(--display);color:var(--leise)}
.f26-orbit-karte dd{margin:0;font:700 .9rem var(--display);color:var(--tinte)}
.f26-orbit-karte dd i{display:block;height:.55rem;border-radius:.3rem;background:linear-gradient(90deg,var(--linie-2),var(--linie));transform-origin:0 50%}
@media (prefers-reduced-motion:no-preference){
  .f26-js .f26-orbit-karte:not(.f26-da) dd i{transform:scaleX(.1)}
  .f26-orbit-karte dd i{transition:transform 1s var(--ease)}
  .f26-orbit-karte dl div:nth-child(2) dd i{transition-delay:.15s}.f26-orbit-karte dl div:nth-child(3) dd i{transition-delay:.3s}
  .f26-orbit-karte dl div:nth-child(4) dd i{transition-delay:.45s}.f26-orbit-karte dl div:nth-child(5) dd i{transition-delay:.6s}
  .f26-orbit-karte dl div:nth-child(6) dd i{transition-delay:.75s}
}
.f26-orbit-karte small{font-size:.8rem;color:var(--leise)}
.f26-fakt{display:flex;gap:.7rem;align-items:flex-start;padding:.85rem 1rem;border-radius:var(--r-m);background:var(--papier);border:1px solid var(--linie);font-size:.95rem}
.f26-fakt svg{flex:none;width:1.2rem;height:1.2rem;margin-top:.15rem;color:var(--marke)}

/* ---------- Projekte mit echter Rechnung ---------- */
.f26-projekte{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));gap:1rem}
.f26-projekt{display:grid;gap:.7rem;padding:1.2rem;border-radius:var(--r-l);background:var(--papier);border:1px solid var(--linie);box-shadow:var(--schatten)}
.f26-projekt h3{font:900 1.15rem var(--display)}
.f26-projekt dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.3rem .9rem;font-size:.9rem}
.f26-projekt dt{color:var(--leise)}
.f26-projekt dd{margin:0;font-weight:700;color:var(--tinte);text-align:right}
.f26-projekt small{font-size:.8rem;color:var(--leise)}
.f26-leer{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.2rem;align-items:center;padding:clamp(1.2rem,2.6vw,1.8rem);border-radius:var(--r-l);border:1.5px dashed var(--linie-2);background:linear-gradient(135deg,#fdf0f6,#fff)}
.f26-leer-bild{width:4.4rem;height:4.4rem;border-radius:1.2rem;display:grid;place-items:center;color:#fff;background:var(--verlauf)}
.f26-leer-bild svg{width:2rem;height:2rem}
.f26-leer b{display:block;font:900 1.2rem var(--display);color:var(--tinte)}
.f26-leer p{color:var(--leise);margin:.25rem 0 .9rem;max-width:40rem}
@media (prefers-reduced-motion:no-preference){.f26-leer-bild svg{animation:f26Wippen 3.2s ease-in-out infinite}}
@keyframes f26Wippen{50%{transform:translateY(-3px) rotate(-6deg)}}
@media (max-width:620px){.f26-leer{grid-template-columns:1fr}}

/* ---------- Firmenpilot ---------- */
.f26-pilot{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.4rem,3.5vw,2.8rem);align-items:center;margin-top:clamp(1.8rem,4vw,2.8rem);padding:clamp(1.3rem,3vw,2.2rem);border-radius:calc(var(--r-l) + .4rem);border:1.5px solid transparent;background:linear-gradient(120deg,#fff,#fdf0f6) padding-box,var(--verlauf) border-box;box-shadow:var(--schatten-hoch);scroll-margin-top:7rem}
.f26-pilot-text{display:grid;gap:.9rem;justify-items:start}
.f26-pilot-titel{font:900 clamp(1.6rem,3vw,2.3rem)/1.05 var(--display);letter-spacing:-.04em;color:var(--tinte)}
.f26-pilot-text > p{color:var(--text);max-width:36rem}
.f26-preis{display:grid;gap:.1rem;padding:.8rem 1rem;border-radius:var(--r-m);background:var(--papier);border:1px solid var(--linie)}
.f26-preis b{font:900 clamp(1.8rem,3.4vw,2.4rem)/1 var(--display);letter-spacing:-.03em;background:var(--verlauf-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.f26-preis span{font:700 .95rem var(--display);color:var(--tinte)}
.f26-preis small{font-size:.84rem;color:var(--leise)}
.f26-pilot-ort{font-size:.92rem;color:var(--leise)!important}
.f26-wochen{position:relative;padding:.4rem 0}
.f26-wochen ol{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:.8rem;counter-reset:f26woche}
.f26-wochen ol::before,.f26-wochen ol::after{content:"";position:absolute;left:1.15rem;top:1.2rem;bottom:1.2rem;width:3px;border-radius:3px;background:var(--linie)}
.f26-wochen ol::after{background:var(--verlauf-tief);transform-origin:50% 0}
.f26-wochen li{position:relative;z-index:1;display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:.8rem;align-items:center;counter-increment:f26woche}
.f26-wochen li::before{content:counter(f26woche);width:2.6rem;height:2.6rem;border-radius:50%;display:grid;place-items:center;font:900 .95rem var(--display);color:#fff;background:var(--verlauf);box-shadow:0 8px 18px -10px rgba(183,47,103,.8)}
.f26-wochen li div{padding:.7rem .9rem;border-radius:var(--r-m);background:var(--papier);border:1px solid var(--linie)}
.f26-wochen b{display:block;font:800 .7rem var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--marke)}
.f26-wochen span{display:block;font-size:.94rem;color:var(--tinte);font-weight:600}
@media (prefers-reduced-motion:no-preference){
  .f26-js .f26-pilot:not(.f26-da) .f26-wochen ol::after{transform:scaleY(0)}
  .f26-wochen ol::after{transition:transform 1.6s var(--ease) .2s}
  .f26-js .f26-pilot:not(.f26-da) .f26-wochen li{opacity:.001;transform:translateX(10px)}
  .f26-wochen li{transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .f26-wochen li:nth-child(2){transition-delay:.4s}.f26-wochen li:nth-child(3){transition-delay:.8s}.f26-wochen li:nth-child(4){transition-delay:1.2s}
}
@media (max-width:900px){.f26-pilot{grid-template-columns:1fr}}

/* ---------- Projektwand mit mehr Karten ---------- */
.wand-stapel .wk:nth-child(3){transform:rotate(-.6deg) translateX(-.2rem);border:1px solid var(--linie);background:var(--papier)}
.wand-stapel .wk:nth-child(4){transform:rotate(1deg) translateX(.7rem)}
.wand-stapel .wk.f26-offen{transform:rotate(-.4deg) translateX(-.3rem);border:1.5px dashed var(--linie-2);background:linear-gradient(135deg,#fdf0f6,#fff)}
.wand:hover .wand-stapel .wk{transform:none}
@media (max-width:1060px){.wand-stapel .wk:nth-child(n){transform:none}}
.f26-wand-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));gap:.9rem;margin-top:clamp(1.8rem,4vw,2.6rem)}
.f26-wand-raster .wk:nth-child(n){transform:none;border:1px solid var(--linie);background:var(--papier)}
.f26-wand-raster .wk.f26-offen{border:1.5px dashed var(--linie-2);background:linear-gradient(135deg,#fdf0f6,#fff)}
.wk .f26-wk-orbit{width:1.6rem;height:1.6rem;color:var(--marke)}
.wand-notiz a{color:var(--marke)}

/* ---------- KI-Kompass ---------- */
.pille.nein{color:var(--schlecht);background:var(--schlecht-bg)}
.f26-kompass-buehne{position:relative;width:min(100%,24rem);aspect-ratio:1/1;margin:.8rem auto 0}
.f26-kompass{position:absolute;inset:12%;width:76%;height:76%;overflow:visible}
.f26-kompass .ring{fill:var(--papier);stroke:var(--linie);stroke-width:2}
.f26-kompass .ring2{fill:none;stroke:var(--linie-2);stroke-width:1.5;stroke-dasharray:3 6}
.f26-kompass .strich{stroke:var(--linie-2);stroke-width:2;stroke-linecap:round}
.f26-kompass .richtung{font:800 13px var(--display);fill:var(--leise);text-anchor:middle}
.f26-kompass .mitte{fill:var(--tinte)}
.f26-nadel{transform-origin:100px 100px;transform-box:view-box}
@media (prefers-reduced-motion:no-preference){.f26-nadel{animation:f26Nadel 9s var(--ease) infinite}}
@keyframes f26Nadel{0%{transform:rotate(-38deg)}14%{transform:rotate(22deg)}24%{transform:rotate(-11deg)}32%{transform:rotate(6deg)}40%{transform:rotate(-2deg)}48%,88%{transform:rotate(0)}100%{transform:rotate(-38deg)}}
.f26-kompass-chip{position:absolute;z-index:1;display:inline-flex;box-shadow:0 14px 28px -18px rgba(58,16,56,.6)}
.f26-kompass-chip.n{top:0;left:50%;translate:-50% 0}
.f26-kompass-chip.o{right:-.4rem;top:50%;translate:0 -50%}
.f26-kompass-chip.s{bottom:0;left:50%;translate:-50% 0}
.f26-kompass-chip.w{left:-.4rem;top:50%;translate:0 -50%}
@media (prefers-reduced-motion:no-preference){
  .f26-kompass-chip{animation:f26Schweben 6s ease-in-out infinite}
  .f26-kompass-chip.o{animation-delay:-1.5s}.f26-kompass-chip.s{animation-delay:-3s}.f26-kompass-chip.w{animation-delay:-4.5s}
}
@keyframes f26Schweben{50%{transform:translateY(-5px)}}
@media (max-width:520px){.f26-kompass-chip{font-size:.6rem;padding:.3rem .55rem}.f26-kompass-chip.o{right:-.2rem}.f26-kompass-chip.w{left:-.2rem}}

.f26-meldungen{display:grid;gap:1rem}
.f26-meldung{display:grid;gap:.85rem;padding:clamp(1.1rem,2.4vw,1.5rem);border-radius:var(--r-l);background:var(--papier);border:1px solid var(--linie);box-shadow:var(--schatten);scroll-margin-top:7rem}
.f26-meldung-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem}
.f26-meldung-kopf time{font:800 .8rem var(--display);color:var(--leise);font-variant-numeric:tabular-nums}
.f26-wz-marke{display:inline-flex;align-items:center;gap:.4rem;font:800 .74rem var(--display);color:var(--violett);background:#f2e7f8;border-radius:999px;padding:.22rem .65rem .22rem .3rem;text-decoration:none}
.f26-wz-marke i{width:1.15rem;height:1.15rem;border-radius:.35rem;display:grid;place-items:center;font:900 .62rem var(--display);font-style:normal;color:#fff;background:var(--f,var(--marke))}
.f26-wz-marke:hover{color:var(--marke)}
.f26-meldung h3{font:900 clamp(1.15rem,2vw,1.4rem)/1.2 var(--display);letter-spacing:-.02em}
.f26-meldung dl{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.f26-meldung dl > div{display:grid;gap:.3rem;align-content:start;padding:.8rem .9rem;border-radius:var(--r-m);background:var(--grund);min-width:0}
.f26-meldung dt{font:800 .68rem var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--marke)}
.f26-meldung dd{margin:0;font-size:.95rem;line-height:1.55;color:var(--text)}
.f26-meldung dd .pille{margin-bottom:.35rem}
.f26-quelle{font-size:.85rem;color:var(--leise);overflow-wrap:anywhere}
.f26-quelle a{color:var(--marke)}
@media (max-width:860px){.f26-meldung dl{grid-template-columns:1fr}}

.f26-werkzeuge{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,14.5rem),1fr));gap:1rem}
@media (min-width:1100px){.f26-werkzeuge{grid-template-columns:repeat(5,minmax(0,1fr))}}
.f26-wz-karte{display:grid;gap:.65rem;align-content:start;padding:1.2rem;border-radius:var(--r-l);background:var(--papier);border:1px solid var(--linie);box-shadow:var(--schatten);text-decoration:none;color:var(--text);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.f26-wz-karte:hover{transform:translateY(-4px);box-shadow:var(--schatten-hoch);border-color:var(--linie-2)}
.f26-wz-kopf{display:flex;align-items:center;gap:.7rem;min-width:0}
.f26-wz-zeichen{flex:none;width:2.6rem;height:2.6rem;border-radius:.8rem;display:grid;place-items:center;font:900 1.05rem var(--display);color:#fff;background:var(--f,var(--marke));box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 8px 16px -10px rgba(58,16,56,.6)}
.f26-wz-kopf b{display:block;font:900 1.15rem/1.15 var(--display);color:var(--tinte)}
.f26-wz-kopf small{display:block;font-size:.8rem;color:var(--leise)}
.f26-wz-karte p{font-size:.93rem;line-height:1.5}
.f26-wz-mehr{font:700 .86rem var(--display);color:var(--marke)}

.f26-urteile{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.f26-urteil-erkl{display:grid;gap:.5rem;align-content:start;padding:1rem;border-radius:var(--r-m);background:var(--papier);border:1px solid var(--linie)}
.f26-urteil-erkl .pille{justify-self:start}
.f26-urteil-erkl p{font-size:.9rem;color:var(--leise);line-height:1.5}
@media (max-width:900px){.f26-urteile{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.f26-urteile{grid-template-columns:1fr}}
.f26-regeln{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.f26-regel{display:grid;gap:.4rem;padding:1.1rem 1.2rem;border-radius:var(--r-m);background:var(--papier);border:1px solid var(--linie)}
.f26-regel b{font:900 1.02rem var(--display);color:var(--tinte)}
.f26-regel span{font-size:.92rem;color:var(--leise);line-height:1.5}
@media (max-width:860px){.f26-regeln{grid-template-columns:1fr}}

.f26-wz-held .f26-wz-zeichen{width:4.2rem;height:4.2rem;font-size:1.7rem;border-radius:1.25rem}
.f26-wz-held .pille{font-size:.8rem}
.f26-steckbrief{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(1.2rem,3vw,2rem);align-items:start}
.f26-kann{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.f26-kann li{display:grid;grid-template-columns:1.6rem minmax(0,1fr);gap:.65rem;align-items:start;padding:.85rem .95rem;border-radius:var(--r-m);background:var(--papier);border:1px solid var(--linie)}
.f26-kann li > svg{width:1.6rem;height:1.6rem;padding:.25rem;border-radius:50%;color:var(--gut);background:var(--gut-bg)}
.f26-kann span{display:block;line-height:1.5}
.f26-kann small{display:block;margin-top:.2rem;font-size:.8rem;color:var(--leise);overflow-wrap:anywhere}
.f26-kann small a{color:var(--marke)}
.f26-fakten{display:grid;gap:.8rem;padding:clamp(1.1rem,2.4vw,1.4rem);border-radius:var(--r-l);background:var(--papier);border:1px solid var(--linie);box-shadow:var(--schatten)}
.f26-fakten h3{font:900 1.1rem var(--display)}
.f26-fakten dl{margin:0;display:grid;gap:.55rem}
.f26-fakten dl > div{display:grid;gap:.15rem;padding:.6rem .75rem;border-radius:.65rem;background:var(--grund)}
.f26-fakten dt{font:800 .66rem var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--leise)}
.f26-fakten dd{margin:0;font-weight:600;color:var(--tinte);overflow-wrap:anywhere}
.f26-fakten dd a{color:var(--marke);font-weight:600}
.f26-urteil-box{display:grid;gap:.6rem;padding:clamp(1.1rem,2.4vw,1.5rem);border-radius:var(--r-l);border:1.5px solid transparent;background:linear-gradient(120deg,#fff,#fdf0f6) padding-box,var(--verlauf) border-box;box-shadow:var(--schatten)}
.f26-urteil-box .pille{justify-self:start;font-size:.8rem}
.f26-urteil-box p{color:var(--text)}
@media (max-width:900px){.f26-steckbrief{grid-template-columns:1fr}}

/* ---------- Konnektoren: unsere Verbindungen ---------- */
.f26-tipp{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.6rem 1.2rem;align-items:center;padding:clamp(1rem,2.4vw,1.4rem) clamp(1.1rem,2.6vw,1.6rem);border-radius:var(--r-l);background:linear-gradient(120deg,var(--gut-bg),#fff 72%);border:1px solid #bfe3cf;margin-bottom:1.4rem}
.f26-tipp-bild{width:3.2rem;height:3.2rem;border-radius:1rem;display:grid;place-items:center;color:#fff;background:var(--gut)}
.f26-tipp-bild svg{width:1.6rem;height:1.6rem}
.f26-tipp b{display:block;font:900 clamp(1.1rem,2vw,1.3rem) var(--display);color:var(--tinte)}
.f26-tipp p{color:var(--text);margin-top:.2rem;max-width:62rem}
.f26-bedarf{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 .8rem}
.f26-bedarf button{font:700 .9rem var(--display);color:var(--tinte);background:var(--papier);border:1.5px solid var(--linie-2);border-radius:999px;padding:.55rem 1rem;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.f26-bedarf button:hover{border-color:var(--marke)}
.f26-bedarf button[aria-pressed="true"]{color:#fff;background:linear-gradient(120deg,#9c54a1,#b72f67);border-color:transparent}
.f26-bedarf-text{font-size:.92rem;color:var(--leise);margin:0 0 1.2rem;min-height:1.4em}
.f26-bereiche{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;align-items:start}
.f26-bereich{display:grid;gap:.65rem;align-content:start;padding:1.1rem;border-radius:var(--r-l);background:var(--papier);border:1px solid var(--linie);box-shadow:var(--schatten);transition:opacity .45s var(--ease),transform .45s var(--ease),filter .45s;min-width:0}
.f26-bereich h3{font:900 1.08rem var(--display)}
.f26-bereich > small{font-size:.84rem;color:var(--leise);margin-top:-.35rem}
.f26-bereiche[data-wahl]:not([data-wahl="alle"]) .f26-bereich:not(.gewaehlt){opacity:.32;transform:scale(.97);filter:saturate(.3)}
.f26-bereiche[data-wahl]:not([data-wahl="alle"]) .f26-bereich.gewaehlt{border-color:var(--linie-2);box-shadow:var(--schatten-hoch)}
.f26-verbindung{display:grid;grid-template-columns:2.2rem minmax(0,1fr);gap:.6rem;align-items:start;padding:.7rem;border-radius:var(--r-m);background:var(--grund)}
.f26-verbindung .kn-logo{display:inline-grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:.7rem;font-size:.78rem}
.f26-verbindung b{display:block;font:800 .95rem var(--display);color:var(--tinte)}
.f26-verbindung div > span:not(.pille){display:block;font-size:.86rem;line-height:1.45;color:var(--text)}
.f26-verbindung .pille{margin-top:.45rem;font-size:.6rem;white-space:normal;line-height:1.3}
.f26-verbindung .pille.gut::before,.f26-verbindung .pille.dev::before,.f26-verbindung .pille.spaeter::before{flex:none}
@media (max-width:1100px){.f26-bereiche{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.f26-bereiche{grid-template-columns:1fr}.f26-tipp{grid-template-columns:1fr}}
.f26-mini-quelle{display:inline-block;margin-left:.45rem;font:700 .72rem var(--display);color:var(--marke)}
.f26-grenze-text{display:block;margin-top:.3rem;font-size:.76rem;line-height:1.4;color:var(--leise)}

/* Neutrale Symbole statt fremder Logos (bis eine Erlaubnis vorliegt) */
.kn-logo svg,.f26-wz-zeichen svg{width:58%;height:58%}
.f26-wz-marke i svg{width:.78rem;height:.78rem}
.kn-logo.bild{background:#fff;box-shadow:inset 0 0 0 1px var(--linie),0 8px 16px -10px rgba(58,16,56,.4)}
.kn-logo.bild img{width:78%;height:78%;object-fit:contain}