/* =============================================================================
   SNX WEBSITE-CHECK, Prototyp 20.10.2026
   So viel wie moeglich aus websites.css, so wenig wie noetig hier.
   Uebernommen statt nachgebaut: Raum-Szene (.szene, .pendant, .layer--wand),
   .eyebrow--bunt, .hl und .mark (Pinselstrich), .h1promise, .lead,
   .trustmarks, .sec-head(--left), .steps/.step, .preis__grid/.treiber,
   .zusage, .mess, .faq__item, .web-btn, .web-link, .cta.

   FARBLOGIK WIE AUF /websites (Nutzer 20.10.2026):
   - HELL ist die Grundflaeche, Weiss und Papier im Wechsel, Haarlinien.
   - FAST SCHWARZ nur fuer Momente, gebaut wie der Takt ("22:00"): die "52"
     auf dem Einstieg und das Urteil auf der Ergebnisseite. Flach, ohne Glow.
   - BLAU fuer die Anfrage mitten auf der Seite, gerade wie das Festpreis-
     Panel. Der gebogene Rand bleibt dem Band auf /websites vorbehalten.
   Ringe wie die Anzeige von PageSpeed Insights: Farbe nach Band (0 bis 49
   rot, 50 bis 89 orange, ab 90 gruen), getoente Innenflaeche, Zahl in der
   dunklen Fassung der Farbe. Kein Neon, kein Glas, keine Koernung auf Hell.
   ========================================================================== */

.wc-seite{
  --wc-gruen:#0cce6b; --wc-orange:#ffa400; --wc-rot:#ff4e42;
  --wc-gruen-ink:#087a4c; --wc-orange-ink:#9a5b00; --wc-rot-ink:#c42c22;
  --wc-spur:#e6ecf2; --wc-feldlinie:#cfd8e3;
  --wc-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --wc-zahl:Geist,"Geist Ersatz",system-ui,sans-serif;
  --wc-kurve:cubic-bezier(.2,.8,.2,1);
  /* Derselbe gezeichnete Haken wie in websites.css. Dort haengt er an einem
     Baustein und ist hier nicht erreichbar. */
  --haken:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.4 6.3 12.7 14 3.6' fill='none' stroke='%23000' stroke-width='2.3'/%3E%3C/svg%3E");
  --koernung:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
}
.wc{display:block}
.wc *,.wc *::before,.wc *::after{box-sizing:border-box}
.wc .rv{opacity:1;transform:none}
/* Eigene display-Regeln duerfen hidden nicht aushebeln (Umschalter, Bänder). */
.wc [hidden]{display:none!important}
/* Knoepfe erben die Seitenschrift. Ohne das nimmt ein <button class="web-btn">
   die Systemschrift, weil .web-btn auf /websites nur auf Links sitzt. */
.wc button,.wc input,.wc select,.wc textarea{font-family:inherit}

/* Prototyp-Hinweis: nur ein kleines Schild unten links, der Satz dazu
   erscheint beim Darueberfahren. Es soll nichts verdecken. */
.wc-prototyp{position:fixed;z-index:40;left:12px;bottom:12px;margin:0;padding:0;font-size:0;line-height:1.35;cursor:help}
.wc-prototyp b{display:inline-block;padding:2px 7px;background:var(--cyan);color:#00202e;
  font:700 .62rem/1.4 var(--wc-mono);letter-spacing:.08em;text-transform:uppercase}
.wc-prototyp:hover,.wc-prototyp:focus-within{max-width:min(340px,calc(100vw - 24px));padding:8px 12px;background:rgba(13,24,38,.92);color:rgba(255,255,255,.82);font-size:.74rem}
.wc-prototyp:hover b{margin-right:6px}

/* ==================================================================== Held
   Der Raum von /websites. Die Szene liegt absolut dahinter, der Inhalt
   darueber. Hoehe: fast ein Bildschirm, wie der Hero von /websites. */
.wc-held{position:relative;overflow:hidden;isolation:isolate;background:#f4f7fb;
  min-height:min(100svh,860px);display:grid;align-items:center;
  padding:calc(var(--nav-hoehe,80px) + clamp(28px,5vw,64px)) var(--page) clamp(64px,9vh,104px)}
.wc-held .szene{z-index:-1}
.wc-held .szene__boden{height:clamp(44px,7vh,80px)}
.wc-lampe{left:15%}
.wc-held__innen{position:relative;z-index:1;width:100%;min-width:0;max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(40px,5vw,80px);align-items:center}
@media(min-width:1000px){.wc-held__innen{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.wc-held__text{max-width:540px}
.wc-held h1{position:relative;z-index:1;margin:0;font-size:clamp(2.45rem,4.6vw,3.7rem);line-height:1.02;letter-spacing:-.045em;font-weight:760;color:var(--ink)}
.wc-held h1 .eyebrow{display:block;margin:0 0 16px;font-size:.78rem;letter-spacing:.16em}
.wc-held .lead{margin:22px 0 0}
.wc-held .trustmarks{margin:22px 0 0}
.wc-noscript{margin:18px 0 0;color:var(--ink-soft)}
.wc-held__innen--eins{max-width:760px}

/* ------------------------------------------------------------------- Feld
   Weisses Feld mit Haarlinie, der Knopf sitzt darin wie im Kopf einer
   Suchmaschine. Am Handy darunter, volle Breite. */
.wc-form{margin-top:26px;max-width:560px}
.wc-feld{display:flex;align-items:center;padding:5px;background:#fff;border:1px solid var(--wc-feldlinie);
  box-shadow:0 14px 34px -26px rgba(13,24,38,.5);transition:border-color .2s ease,box-shadow .25s ease}
.wc-feld:focus-within{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(25,191,244,.22),0 14px 34px -26px rgba(13,24,38,.5)}
.wc-feld__schema{padding:0 0 0 13px;font:500 .98rem/1 var(--wc-mono);color:#93a1b0;user-select:none}
.wc-feld input{flex:1;min-width:0;height:52px;padding:0 12px 0 3px;border:0;outline:0;background:transparent;
  color:var(--ink);font:500 1.08rem/1 var(--wc-zahl);letter-spacing:-.01em}
.wc-feld input::placeholder{color:#93a1b0}
.wc-feld__knopf{flex:none}
.wc-feld__knopf[disabled]{opacity:.7;cursor:progress}
@media(max-width:620px){
  .wc-feld{flex-wrap:wrap;padding:0;background:transparent;border:0;box-shadow:none}
  .wc-feld:focus-within{box-shadow:none}
  .wc-feld__schema{display:none}
  .wc-feld input{flex:1 1 100%;height:56px;padding:0 16px;font-size:16px;background:#fff;border:1px solid var(--wc-feldlinie)}
  .wc-feld input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(25,191,244,.22)}
  .wc-feld__knopf{flex:1 1 100%;margin-top:10px}
}
.wc-form__fehler{margin:12px 0 0;padding:10px 14px;background:#fff3f2;border-left:3px solid var(--wc-rot-ink);color:var(--wc-rot-ink);font-size:.95rem}

/* ---------------------------------------------------------- Beispielblatt
   Das Zeugnis als Dokument: weisses Blatt, Haarlinie, ruhiger Schatten. */
.wc-probe{margin:0;justify-self:center;min-width:0;width:min(100%,440px)}
.wc-probe__blatt{position:relative;padding:clamp(20px,2.5vw,28px) clamp(20px,2.5vw,28px) 22px;background:#fff;border:1px solid rgba(135,158,183,.24);
  box-shadow:0 2px 6px rgba(13,24,38,.025),0 16px 36px -20px rgba(26,57,93,.18),0 44px 88px -44px rgba(26,57,93,.24),inset 0 1px 0 rgba(255,255,255,.95)}
.wc-probe__kopf{display:flex;justify-content:space-between;margin:0;font-size:.72rem;font-weight:680;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan-ink)}
.wc-probe__kopf span:last-child{color:var(--muted)}
.wc-probe__domain{margin:10px 0 0;font-size:clamp(1.2rem,2.2vw,1.35rem);font-weight:780;letter-spacing:-.03em;color:var(--ink);overflow-wrap:anywhere}
.wc-probe__gesamt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;margin:20px 0 14px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.wc-probe__wort{margin:0 0 6px;font-size:.74rem;font-weight:680;letter-spacing:.1em;text-transform:uppercase;color:var(--wc-orange-ink)}
.wc-probe__urteil{margin:0;font-weight:800;font-size:1.15rem;line-height:1.25;letter-spacing:-.02em;color:var(--ink)}
.wc-probe__satz{margin:7px 0 0;color:var(--muted);font-size:.875rem;line-height:1.55}
.wc-probe .ring--gross{--groesse:clamp(80px,25vw,96px)}
.wc-probe .ring__note{font-size:calc(var(--groesse) * .33);font-weight:820}
.wc-probe__faecher{margin:0;padding:0;list-style:none}
.wc-probe__faecher li{display:grid;grid-template-columns:minmax(0,1fr) 28px 20px;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);font-size:.9rem;font-weight:500;color:var(--ink-soft)}
.wc-probe__faecher li:last-child{border-bottom:0}
.wc-probe__faecher b{justify-self:end;font:800 1.12rem/1 var(--wc-zahl);font-variant-numeric:tabular-nums}
.wc-probe>figcaption{margin-top:12px;text-align:center;font-size:.8rem;color:var(--muted)}

/* ------------------------------------------------------------------ Ringe
   Innen hat der Inhalt immer Luft, hoechstens 60 % des Durchmessers
   (Nutzer 20.10.2026: "darf nicht an die Ringe stossen"). Grosse Ringe
   tragen nur die Note, das Wort steht daneben. */
.ring{--wert:0;--farbe:var(--wc-spur);--farbe-text:var(--ink);--farbe-flaeche:transparent;--dicke:7;
  position:relative;display:grid;place-items:center;width:var(--groesse,92px);aspect-ratio:1;flex:none}
.ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring__flaeche{fill:var(--farbe-flaeche);transition:fill .6s ease}
.ring__spur,.ring__wert{fill:none;stroke-width:var(--dicke)}
.ring__spur{stroke:var(--wc-spur)}
.ring__wert{stroke:var(--farbe);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--wert));
  transition:stroke-dashoffset 1.5s var(--wc-kurve),stroke .4s ease}
.ring.is-null .ring__wert{opacity:0}
.ring--gruen{--farbe:var(--wc-gruen);--farbe-text:var(--wc-gruen-ink);--farbe-flaeche:rgba(12,206,107,.08)}
.ring--orange{--farbe:var(--wc-orange);--farbe-text:var(--wc-orange-ink);--farbe-flaeche:rgba(255,164,0,.09)}
.ring--rot{--farbe:var(--wc-rot);--farbe-text:var(--wc-rot-ink);--farbe-flaeche:rgba(255,78,66,.08)}
.ring--offen{--farbe:var(--wc-spur);--farbe-text:var(--muted)}
.ring.is-laeuft .ring__wert{stroke:var(--cyan);stroke-dasharray:16 84;stroke-dashoffset:0;transform-origin:50% 50%;transform-box:fill-box;
  animation:wc-drehen 1.15s linear infinite;transition:none}
@keyframes wc-drehen{to{transform:rotate(360deg)}}
.ring__zahl{position:relative;max-width:60%;font:680 calc(var(--groesse,92px) * .29)/1 var(--wc-zahl);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--farbe-text)}
.ring--mini{--groesse:28px;--dicke:13}
.ring--mini .ring__zahl{display:none}
.ring--gross{--groesse:96px;--dicke:8}
.ring--gesamt{--groesse:clamp(132px,13vw,156px);--dicke:7}
/* Noten in Geist, nicht Mono: In Mono steht das Komma von "3,7" so breit
   wie eine Ziffer und die Note faellt auseinander. */
.ring__note{position:relative;max-width:60%;text-align:center;font:780 calc(var(--groesse) * .3)/1 var(--wc-zahl);
  letter-spacing:-.045em;font-variant-numeric:tabular-nums;color:var(--farbe-text)}
.ring.is-laeuft .ring__note{color:var(--wc-spur)}
.ring.is-laeuft .ring__zahl{visibility:hidden}

/* ================================================================= Ablauf */
.wc-ablauf .sec-head{margin-bottom:clamp(36px,4.6vw,56px)}
@media(min-width:861px){.wc-steps{grid-template-columns:repeat(3,1fr)}}

/* ============================================================== Faecher */
.wc-faecher .preis__grid{margin-bottom:0}
.wc-ki-zusage{margin-top:clamp(18px,2.4vw,26px)}

/* ================================================= Dunkler Moment (Takt)
   Wie .takt auf /websites: fast schwarz, die Zahl riesig und leise im
   Hintergrund, zwei Zeilen Text, die zweite hell. Kanten gerade. */
.wc-takt{position:relative;overflow:hidden;isolation:isolate;display:grid;align-items:center;
  padding:clamp(56px,7vw,104px) var(--page);min-height:clamp(280px,30vw,420px);background:var(--navy,#020914);color:#e8f1fa}
.wc-takt[hidden]{display:none}
.wc-takt__zahl{position:absolute;z-index:0;right:-.05em;bottom:-.24em;font:700 clamp(8rem,30vw,22rem)/.78 var(--wc-mono);letter-spacing:-.05em;
  color:rgba(255,255,255,.05);pointer-events:none;user-select:none;white-space:nowrap}
.wc-takt__wort{position:relative;z-index:1;width:100%;max-width:var(--wrap);margin:0 auto}
.wc-takt__wort::before{content:"";display:block;width:44px;height:2px;margin-bottom:26px;background:var(--cyan)}
.wc-takt__zeile{margin:0;max-width:26ch;font-size:clamp(1.45rem,3.1vw,2.5rem);line-height:1.18;letter-spacing:-.02em;font-weight:760}
.wc-takt__zeile span{color:#8fa6bd;font-weight:600}
.wc-takt__zeile b{color:#fff;font-weight:760}
.wc-takt__quelle{margin:18px 0 0;max-width:60ch;font-size:.82rem;line-height:1.5;color:#7d93aa}
.wc-takt__quelle a{color:#9fe3fb}
.wc-takt .web-btn{margin-top:26px}

/* ======================================================= Eigene Websites */
.wc-eigene{padding:clamp(52px,7vw,100px) var(--page);background:var(--white)}
.wc-eigene__liste{display:grid;gap:clamp(30px,3.4vw,48px);max-width:var(--wrap);margin:0 auto;padding:0;list-style:none}
@media(min-width:900px){.wc-eigene__liste{grid-template-columns:repeat(3,1fr)}}
.wc-eigene__name{margin:0;font-weight:740;font-size:1.25rem;letter-spacing:-.02em}
.wc-eigene__domain{margin:4px 0 14px;font-size:.92rem;color:var(--muted)}
.wc-eigene .mess{padding-top:14px;border-top:1px solid var(--line)}
.wc-eigene__alle{max-width:var(--wrap);margin:clamp(30px,3.4vw,44px) auto 0;text-align:center}

/* ============================================================ Ehrlich */
.wc-ehrlich{padding:clamp(52px,7vw,100px) var(--page);background:var(--paper)}
.wc-strichliste{max-width:var(--wrap);margin:0 auto;padding:0;list-style:none;columns:1}
@media(min-width:900px){.wc-strichliste{columns:2;column-gap:clamp(32px,5vw,72px)}}
.wc-strichliste li{position:relative;break-inside:avoid;margin:0 0 18px;padding-left:24px;color:var(--ink-soft);line-height:1.55}
.wc-strichliste li::before{content:"";position:absolute;left:0;top:.72em;width:12px;height:2px;background:var(--cyan)}
.wc-strichliste b{color:var(--ink)}
.wc-strichliste a{color:var(--cyan-ink)}

/* =============================================================== Messung
   Hell wie der Kopf des Ratgebers. Links das Handy, rechts Note und Liste. */
.wc-lauf{position:relative;padding:calc(var(--nav-hoehe,80px) + clamp(30px,4.5vw,60px)) var(--page) clamp(40px,5vw,72px);
  background:linear-gradient(180deg,var(--cyan-soft) 0%,#f7fbfe 52%,var(--white) 100%);border-bottom:1px solid var(--line)}
.wc-fortschritt{position:absolute;left:0;right:0;top:var(--nav-hoehe,80px);height:2px;z-index:2}
.wc-fortschritt span{display:block;height:100%;width:0;background:var(--cyan);transition:width .8s var(--wc-kurve),opacity .6s ease}
.wc-lauf.is-fertig .wc-fortschritt span{opacity:0;transition-delay:0s,1s}
.wc-lauf__innen{max-width:var(--wrap);margin:0 auto;display:grid;gap:clamp(34px,5vw,80px);align-items:start}
@media(min-width:960px){.wc-lauf__innen{grid-template-columns:auto minmax(0,1fr)}}
/* Schmal: erst Domain, Note und Ringe, dann das Handy. Die Note ist das
   Wichtigste und gehoert in den ersten Bildschirm. */
@media(max-width:959px){.wc-lauf__innen .wc-handy{order:2;width:min(64vw,250px)}}
.wc-lauf__rechts{min-width:0}
.wc-lauf__kopf .eyebrow{margin:0 0 12px}
.wc-lauf__kopf h1{display:flex;align-items:center;gap:14px;margin:0;font-size:clamp(2rem,4.4vw,3.3rem);line-height:1.02;letter-spacing:-.045em;font-weight:760;color:var(--ink);word-break:break-word}
.wc-lauf__favicon{display:inline-grid;place-items:center;width:clamp(34px,3.6vw,44px);height:clamp(34px,3.6vw,44px);flex:none;background:#fff;border:1px solid var(--line);overflow:hidden}
.wc-lauf__favicon:empty{display:none}
.wc-lauf__favicon img{width:68%;height:68%;object-fit:contain}
.wc-lauf__meta{margin:12px 0 0;color:var(--muted);font-size:.9rem}

.wc-gesamt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,2.6vw,30px);align-items:center;margin-top:clamp(24px,3vw,34px);padding:clamp(20px,2.4vw,26px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(max-width:480px){.wc-gesamt{grid-template-columns:1fr}}
.wc-gesamt__wort{margin:0 0 8px;font-size:.76rem;font-weight:680;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.wc-gesamt__wort.farbe-gruen{color:var(--wc-gruen-ink)} .wc-gesamt__wort.farbe-orange{color:var(--wc-orange-ink)} .wc-gesamt__wort.farbe-rot{color:var(--wc-rot-ink)}
.wc-gesamt__urteil{margin:0;font-size:clamp(1.35rem,2.6vw,1.9rem);font-weight:760;letter-spacing:-.025em;line-height:1.12;color:var(--ink)}
.wc-gesamt__satz{margin:8px 0 0;color:var(--ink-soft);font-size:1rem;line-height:1.5}
.wc-stempel{animation:wc-stempel .6s cubic-bezier(.2,1.3,.4,1) both}
@keyframes wc-stempel{from{opacity:0;transform:scale(1.25)}to{opacity:1;transform:none}}

.wc-ringe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 10px;margin:clamp(22px,2.8vw,32px) 0 0;padding:0;list-style:none}
@media(min-width:1180px){.wc-ringe{grid-template-columns:repeat(6,minmax(0,1fr))}}
/* Name immer zweizeilig reserviert, damit die Notenzeile bei allen Ringen
   auf einer Hoehe steht, auch wenn "Technik & Sicherheit" umbricht. */
.wc-ringe li{display:grid;grid-template-rows:auto 2.5em auto;justify-items:center;align-items:start;gap:8px;text-align:center}
.wc-ringe .ring{--groesse:clamp(70px,7.4vw,80px);--dicke:7}
.wc-ringe__name{display:flex;align-items:center;min-height:2.5em;font-size:.84rem;font-weight:640;line-height:1.2;color:var(--ink)}
.wc-ringe__note{font-size:.76rem;color:var(--muted)}
.wc-ringe li.is-fehlt .ring__zahl{font-size:.74rem;font-weight:600;color:var(--muted)}
.wc-kizeile{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:22px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:.92rem;color:var(--ink-soft)}
.wc-kizeile b{font-weight:740;color:var(--ink)}

/* Live-Liste */
.wc-liste{margin-top:clamp(22px,3vw,32px);padding-top:16px;border-top:1px solid var(--line)}
.wc-liste__fakt{min-height:1.5em;margin:0 0 12px;color:var(--ink-soft);font-size:.9rem;transition:opacity .4s ease}
.wc-liste__fakt b{margin-right:6px;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-ink)}
.wc-liste__fakt.is-weg{opacity:0}
.wc-liste__schritte{display:grid;gap:0 clamp(24px,3vw,40px);margin:0;padding:0;list-style:none}
@media(min-width:760px){.wc-liste__schritte{grid-template-columns:1fr 1fr}}
.wc-schritt{display:grid;grid-template-columns:18px 1fr auto;gap:11px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:.9rem;color:var(--muted)}
.wc-schritt__punkt{position:relative;width:14px;height:14px;border-radius:50%;border:1.5px solid #c3cfdb}
.wc-schritt__text{font:500 .76rem/1.3 var(--wc-mono);text-align:right;color:var(--muted)}
.wc-schritt.is-laeuft{color:var(--ink)}
.wc-schritt.is-laeuft .wc-schritt__punkt{border-color:var(--cyan)}
.wc-schritt.is-laeuft .wc-schritt__punkt::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--cyan);animation:wc-puls 1.3s ease-out infinite}
@keyframes wc-puls{from{opacity:.9;transform:scale(.55)}to{opacity:0;transform:scale(1.35)}}
.wc-schritt.is-fertig{color:var(--ink)}
.wc-schritt.is-fertig .wc-schritt__punkt{border:0;background:var(--ton,var(--wc-gruen-ink))}
.wc-schritt.is-fertig .wc-schritt__punkt::after{content:"";position:absolute;inset:3px;background:#fff;-webkit-mask:var(--haken) center/contain no-repeat;mask:var(--haken) center/contain no-repeat}
.wc-schritt.ton-mittel{--ton:var(--wc-orange-ink)} .wc-schritt.ton-schlecht{--ton:var(--wc-rot-ink)} .wc-schritt.ton-neutral{--ton:#9aa8b6}
.wc-schritt.is-fertig .wc-schritt__text{color:var(--ton,var(--wc-gruen-ink))}
.wc-schritt.is-fehler .wc-schritt__punkt,.wc-schritt.is-abgebrochen .wc-schritt__punkt{border-style:dashed}
.wc-lauf.is-fertig .wc-liste{display:none}

/* ------------------------------------------------------------------ Handy
   Dunkles Geraet auf hellem Grund, wie die Geraete auf /websites. */
.wc-handy{margin:0;justify-self:center;width:clamp(232px,24vw,292px)}
.wc-handy__rahmen{position:relative;padding:9px;border-radius:44px;background:#0b1422;
  box-shadow:0 50px 90px -46px rgba(13,24,38,.6),0 0 0 1px #1c2a3f inset}
.wc-handy__insel{position:absolute;z-index:3;top:19px;left:50%;width:82px;height:23px;margin-left:-41px;border-radius:20px;background:#03070d}
.wc-handy__schirm{position:relative;aspect-ratio:390/844;overflow:hidden;border-radius:36px;background:#eef3f8}
.wc-handy__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .6s ease}
.wc-handy__bild.is-da{opacity:1}
.wc-handy__skelett{position:absolute;inset:0;padding:58px 18px 18px;display:grid;align-content:start;gap:12px}
.wc-handy__skelett i{display:block;height:13px;background:linear-gradient(90deg,#e1e8f0 0%,#f4f7fa 45%,#e1e8f0 90%);background-size:220% 100%;animation:wc-schimmer 1.6s linear infinite}
.wc-handy__skelett i:nth-child(1){height:28px;width:62%}
.wc-handy__skelett i:nth-child(2){width:88%}
.wc-handy__skelett i:nth-child(3){width:76%}
.wc-handy__skelett i:nth-child(4){height:150px;margin-top:10px}
.wc-handy__skelett i:nth-child(5){width:70%}
.wc-handy__skelett i:nth-child(6){height:44px;width:54%;margin-top:6px;background:#bfe9fb}
@keyframes wc-schimmer{to{background-position:-220% 0}}
/* Scan: eine feine Linie, die ueber den Schirm faehrt. */
.wc-handy__scan{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.wc-handy__scan::before{content:"";position:absolute;left:0;right:0;top:-18%;height:18%;
  background:linear-gradient(180deg,rgba(25,191,244,0),rgba(25,191,244,.14) 85%,rgba(25,191,244,.9) 100%);
  animation:wc-scan 2.4s cubic-bezier(.45,.05,.55,.95) infinite}
@keyframes wc-scan{to{transform:translateY(660%)}}
.wc-lauf.is-fertig .wc-handy__scan{display:none}
.wc-handy__marken{position:absolute;inset:0;z-index:2}
.wc-marke-rahmen{position:absolute;border:2px solid var(--farbe,var(--wc-gruen-ink));border-radius:8px;background:color-mix(in srgb,var(--farbe,var(--wc-gruen-ink)) 8%,transparent);
  animation:wc-auftauchen .45s var(--wc-kurve) both}
.wc-marke-rahmen span{position:absolute;left:-2px;bottom:calc(100% + 5px);white-space:nowrap;padding:4px 7px;background:var(--farbe,var(--wc-gruen-ink));color:#fff;font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.wc-marke-rahmen--unten span{bottom:auto;top:calc(100% + 5px)}
@keyframes wc-auftauchen{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
.wc-handy figcaption{margin-top:14px;text-align:center;font-size:.82rem;color:var(--muted)}
.wc-handy__umschalter{display:flex;justify-content:center;margin-top:16px}
.wc-handy__umschalter button{padding:8px 12px;border:1px solid var(--line);background:#fff;color:var(--ink-soft);font:600 .8rem/1 var(--wc-zahl);cursor:pointer}
.wc-handy__umschalter button+button{border-left:0}
.wc-handy__umschalter button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

/* Urteil-Band nutzt .wc-takt; das Band erscheint mit dem Zeugnis. */
/* Die Note sitzt hoeher als die "52": Das Komma reicht unter die
   Grundlinie und waere sonst abgeschnitten. */
.wc-urteil .wc-takt__zahl{bottom:-.02em;font-family:var(--wc-zahl);font-weight:780;letter-spacing:-.06em}

/* ======================================================= Ergebnis: Inhalt */
.wc-inhalt>section{padding:clamp(52px,7vw,100px) var(--page);background:var(--white)}
.wc-inhalt>section.wc-papier{background:var(--paper)}
.wc-block{max-width:var(--wrap);margin:0 auto}
.wc-block--schmal{max-width:920px}
.wc-inhalt .sec-head{margin-bottom:clamp(30px,4vw,48px)}

/* Top 3 als Karten wie die Preis-Treiber */
.wc-baustelle{gap:0}
.wc-baustelle__loesung{margin-top:auto}
@media(min-width:700px){
  .wc-baustelle{display:grid;grid-template-rows:subgrid;grid-row:span 6;row-gap:0}
  .wc-baustelle__inhalt{display:contents}
  .wc-baustelle__loesung{margin-top:0}
  .wc-baustelle .treiber__frage{margin-top:0}
}
.wc-baustelle__kopf{display:flex;align-items:center;margin:0 0 12px}
.wc-marke{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.wc-marke::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.wc-marke--kritisch,.wc-marke--hoch{color:var(--wc-rot-ink)} .wc-marke--mittel{color:var(--wc-orange-ink)} .wc-marke--klein{color:var(--muted)}
.wc-baustelle h3{display:block!important}
.wc-baustelle__fach{margin:0 0 6px!important;font-size:.82rem!important;font-weight:640;color:var(--cyan-ink)!important}
.wc-baustelle details{margin-top:12px}
.wc-baustelle summary{cursor:pointer;font-size:.92rem;font-weight:640;color:var(--ink);list-style:none;display:inline-flex;align-items:center;gap:8px}
.wc-baustelle summary::-webkit-details-marker{display:none}
.wc-baustelle summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--cyan-ink);border-bottom:2px solid var(--cyan-ink);transform:rotate(45deg) translateY(-2px);transition:transform .2s ease}
.wc-baustelle details[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.wc-baustelle ol{margin:10px 0 0;padding-left:20px;color:var(--ink-soft);line-height:1.5;font-size:.94rem}
.wc-baustelle .treiber__frage{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;margin-top:auto;padding-top:16px}
.wc-baustelle .treiber__frage span{color:var(--muted);font-weight:560}
.wc-hinweis-baukasten{display:block;margin-top:10px;font-size:.88rem;color:var(--wc-orange-ink)}
.wc-staerken{max-width:var(--wrap);margin:clamp(30px,4vw,44px) auto 0;padding:clamp(18px,2vw,24px) 0 0;border-top:1px solid var(--line);display:grid;gap:12px 32px}
@media(min-width:860px){.wc-staerken{grid-template-columns:auto 1fr}}
.wc-staerken>p{margin:0;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--wc-gruen-ink);padding-top:3px}
.wc-staerken ul{margin:0;padding:0;list-style:none;display:grid;gap:10px 28px}
@media(min-width:860px){.wc-staerken ul{grid-template-columns:repeat(3,1fr)}}
.wc-staerken li{position:relative;padding-left:24px;line-height:1.45;color:var(--ink);font-weight:620;font-size:.96rem}
.wc-staerken li::before{content:"";position:absolute;left:0;top:.2em;width:15px;height:15px;background:var(--wc-gruen-ink);-webkit-mask:var(--haken) center/contain no-repeat;mask:var(--haken) center/contain no-repeat}
.wc-staerken li span{display:block;margin-top:2px;font-weight:450;font-size:.9rem;color:var(--ink-soft)}

/* Persoenliche Einschaetzung: Blau wie das Festpreis-Panel, gerade Kanten. */
.wc-panel{position:relative;max-width:var(--wrap);margin:0 auto;padding:clamp(30px,4vw,54px);color:#fff;
  background:var(--koernung),radial-gradient(55% 80% at 100% 0%,rgba(120,222,255,.3),transparent 70%),
    linear-gradient(160deg,#0a2e78 0%,#0e4bb0 55%,#1561cc 100%);
  display:grid;gap:clamp(26px,4vw,56px)}
@media(min-width:960px){.wc-panel{grid-template-columns:1fr 1fr;align-items:start}}
.wc-panel .eyebrow{color:#bfe9ff}
.wc-panel h2{margin:0;font-size:clamp(1.8rem,3.6vw,2.6rem);line-height:1.06;letter-spacing:-.035em;color:#fff}
.wc-panel__text{margin:16px 0 0;color:rgba(255,255,255,.88);line-height:1.6;font-size:1.04rem;max-width:520px}
.wc-panel__direkt{margin:20px 0 0;display:flex;flex-wrap:wrap;gap:10px 22px}
.wc-panel__direkt a{color:#fff;font-weight:650;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45)}
.wc-panel__direkt a:hover{border-color:#fff}
.wc-anfrage{display:grid;gap:14px}
.wc-anfrage label{display:grid;gap:7px;font-size:.86rem;font-weight:620;color:rgba(255,255,255,.92)}
.wc-anfrage input{height:52px;padding:0 14px;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.1);color:#fff;font:500 16px/1 var(--wc-zahl);border-radius:0}
.wc-anfrage input:focus{outline:0;border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.22)}
.wc-anfrage__zeile{display:grid;gap:14px}
@media(min-width:620px){.wc-anfrage__zeile{grid-template-columns:1fr 1fr}}
.wc-anfrage fieldset{margin:4px 0 0;padding:0;border:0}
.wc-anfrage legend{margin-bottom:9px;font-size:.86rem;font-weight:620;color:rgba(255,255,255,.92)}
.wc-chips{display:flex;flex-wrap:wrap;gap:8px}
.wc-chips button{padding:9px 13px;border:1px solid rgba(255,255,255,.5);background:transparent;color:#fff;font:600 .86rem/1 var(--wc-zahl);cursor:pointer;transition:background-color .15s ease,color .15s ease}
.wc-chips button[aria-pressed="true"]{background:#fff;border-color:#fff;color:#0a2e78}
.wc-anfrage .web-btn{background:#fff;color:#0a2e78}
.wc-anfrage .web-btn:hover{background:#e8f6ff;box-shadow:0 12px 28px rgba(2,9,20,.3)}
.wc-anfrage__fuss{margin:2px 0 0;font-size:.8rem;color:rgba(255,255,255,.8);line-height:1.5}
.wc-anfrage__danke{padding:18px;border-left:3px solid #fff;background:rgba(255,255,255,.12);line-height:1.55}

/* Vorschauen */
.wc-vorschauen{display:grid;gap:clamp(28px,4vw,56px);align-items:start}
@media(min-width:960px){.wc-vorschauen{grid-template-columns:1.1fr .9fr}}
.wc-vorschau__titel{margin:0 0 14px;font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.wc-google{padding:20px 22px;background:#fff;border:1px solid var(--line);box-shadow:0 20px 50px -34px rgba(13,24,38,.35);font-family:Arial,Helvetica,sans-serif}
.wc-google__kopf{display:flex;align-items:center;gap:12px}
.wc-google__icon{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#f1f3f4;overflow:hidden;flex:none}
.wc-google__icon img{width:18px;height:18px;object-fit:contain}
.wc-google__name{font-size:14px;color:#202124;line-height:1.3}
.wc-google__url{font-size:12px;color:#4d5156;line-height:1.3;word-break:break-all}
.wc-google__titel{margin:8px 0 4px;font-size:20px;line-height:1.3;color:#1a0dab;font-weight:400}
.wc-google__text{margin:0;font-size:14px;line-height:1.58;color:#4d5156}
.wc-google__text.is-leer{font-style:italic;color:#80868b}
.wc-chat{padding:22px 18px;background:#0b141a;background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px);background-size:18px 18px}
.wc-blase{position:relative;max-width:330px;margin-left:auto;padding:5px;background:#005c4b;border-radius:10px 2px 10px 10px;color:#e9edef;font-family:Arial,Helvetica,sans-serif}
.wc-blase__karte{overflow:hidden;border-radius:7px;background:#025144}
.wc-blase__bild{display:block;width:100%;aspect-ratio:1200/630;object-fit:cover;background:#0b3d34}
.wc-blase__keinbild{display:grid;place-items:center;aspect-ratio:1200/630;color:rgba(233,237,239,.6);font-size:13px;background:repeating-linear-gradient(135deg,#0b3d34 0 10px,#0d453b 10px 20px)}
.wc-blase__info{padding:8px 10px}
.wc-blase__info b{display:block;font-size:14px;line-height:1.3;color:#e9edef}
.wc-blase__info span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:3px;font-size:12.5px;line-height:1.35;color:rgba(233,237,239,.72)}
.wc-blase__info small{display:block;margin-top:4px;font-size:12px;color:rgba(233,237,239,.6)}
.wc-blase__link{padding:6px 6px 2px;font-size:14px;color:#53bdeb;word-break:break-all}
.wc-blase__zeit{display:block;text-align:right;padding:0 6px 2px;font-size:11px;color:rgba(233,237,239,.6)}
.wc-vorschau__notiz{margin:10px 0 0;font-size:.82rem;color:var(--muted)}

/* Zeugnisblatt */
.wc-blatt{position:relative;max-width:920px;margin:0 auto;padding:clamp(24px,4vw,52px);background:#fff;border:1px solid var(--line);
  box-shadow:0 44px 90px -56px rgba(13,24,38,.5)}
.wc-blatt__kopf{display:grid;gap:6px;padding-bottom:20px;border-bottom:2px solid var(--ink)}
@media(min-width:700px){.wc-blatt__kopf{grid-template-columns:1fr auto;align-items:end}}
.wc-blatt__art{margin:0;font-size:.78rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--cyan-ink)}
.wc-blatt__domain{margin:8px 0 0;font-size:clamp(1.5rem,3.2vw,2.15rem);font-weight:760;letter-spacing:-.035em;word-break:break-word}
.wc-blatt__datum{margin:0;font-size:.84rem;line-height:1.45;color:var(--muted)}
@media(min-width:700px){.wc-blatt__datum{text-align:right}}
.wc-blatt__faecher{margin:0;padding:0;list-style:none}
.wc-blatt__faecher>li{border-bottom:1px solid var(--line)}
.wc-blatt__faecher summary{display:grid;grid-template-columns:1fr auto;gap:6px 18px;align-items:center;padding:18px 32px 18px 0;cursor:pointer;list-style:none;position:relative}
@media(min-width:700px){.wc-blatt__faecher summary{grid-template-columns:210px 1fr auto}}
.wc-blatt__faecher summary::-webkit-details-marker{display:none}
.wc-blatt__faecher summary::after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;margin-top:-7px;border-right:2.4px solid var(--cyan-ink);border-bottom:2.4px solid var(--cyan-ink);transform:rotate(45deg);transition:transform .22s ease}
.wc-blatt__faecher details[open] summary::after{transform:rotate(-135deg);margin-top:-1px}
.wc-blatt__fach{font-weight:740;font-size:1.06rem}
.wc-blatt__fach small{display:block;margin-top:4px;font-size:.78rem;font-weight:500;color:var(--muted)}
.wc-blatt__bemerkung{grid-column:1/-1;grid-row:2;color:var(--ink-soft);font-size:.96rem;line-height:1.4}
@media(min-width:700px){.wc-blatt__bemerkung{grid-column:auto;grid-row:auto}}
.wc-blatt__note{display:grid;justify-items:end;gap:4px;grid-column:2;grid-row:1}
/* Breit: Fach | Bemerkung | Note. grid-row muss mit zurueck auf auto, sonst
   setzt das Raster die Note als Erstes in Spalte 1. */
@media(min-width:700px){.wc-blatt__note{grid-column:auto;grid-row:auto}}
.wc-blatt__note b{font:780 2.1rem/1 var(--wc-zahl);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.wc-blatt__note span{font-size:.76rem;color:var(--muted);white-space:nowrap}
.farbe-gruen{color:var(--wc-gruen-ink)} .farbe-orange{color:var(--wc-orange-ink)} .farbe-rot{color:var(--wc-rot-ink)} .farbe-offen{color:var(--muted)}
.wc-blatt__frage{margin:0 0 14px;color:var(--muted);font-size:.92rem}
.wc-befunde{margin:0 0 22px;padding:0;list-style:none;display:grid;gap:16px}
.wc-befund{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;line-height:1.5}
.wc-befund__symbol{position:relative;width:18px;height:18px;margin-top:3px;border-radius:50%;flex:none}
.wc-befund--gut .wc-befund__symbol{background:var(--wc-gruen-ink)}
.wc-befund--gut .wc-befund__symbol::after{content:"";position:absolute;inset:4px;background:#fff;-webkit-mask:var(--haken) center/contain no-repeat;mask:var(--haken) center/contain no-repeat}
.wc-befund--problem .wc-befund__symbol{background:var(--wc-orange)}
.wc-befund--kritisch .wc-befund__symbol{background:var(--wc-rot-ink)}
.wc-befund--problem .wc-befund__symbol::after,.wc-befund--kritisch .wc-befund__symbol::after{content:"!";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font:800 .72rem/1 var(--wc-zahl)}
.wc-befund--tipp .wc-befund__symbol{border:2px solid var(--cyan-ink)}
.wc-befund--tipp .wc-befund__symbol::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;background:var(--cyan-ink)}
.wc-befund--info .wc-befund__symbol{border:2px solid #c3cfdb}
.wc-befund h4{margin:0;font-size:1rem;font-weight:700}
.wc-befund p{margin:3px 0 0;color:var(--ink-soft);font-size:.95rem}
.wc-befund ol{margin:6px 0 0;padding-left:18px;color:var(--ink-soft);font-size:.93rem}
.wc-befund__fuss{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:6px;font-size:.8rem;color:var(--muted)}
.wc-befund__fuss a{color:var(--cyan-ink)}
.wc-aufwand{display:inline-flex;align-items:center;gap:6px}
.wc-aufwand svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}
.wc-beleg{margin-top:6px}
.wc-beleg summary{cursor:pointer;font-size:.8rem;color:var(--muted)}
.wc-beleg ul{margin:6px 0 0;padding-left:16px;font:500 .78rem/1.5 var(--wc-mono);color:var(--ink-soft);word-break:break-all}
.wc-blatt__fuss{display:grid;gap:18px;align-items:center;padding-top:26px}
@media(min-width:700px){.wc-blatt__fuss{grid-template-columns:1fr auto}}
.wc-blatt__gesamt{display:flex;align-items:baseline;gap:16px;margin:0}
.wc-blatt__gesamt b{font:780 clamp(2.8rem,6vw,3.8rem)/.9 var(--wc-zahl);letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.wc-blatt__gesamt span{font-weight:650;color:var(--ink-soft);line-height:1.35}
.wc-blatt__aussteller{margin:8px 0 0;font-size:.82rem;color:var(--muted)}
.wc-siegel{width:108px;height:108px;color:var(--cyan-ink);transform:rotate(-8deg);opacity:.8}
.wc-siegel text{font:700 8.4px/1 var(--wc-mono);letter-spacing:.24em;fill:currentColor}

/* Messwerte wie die Messleiste der Referenzen (.mess) */
.wc-messwerte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
@media(min-width:700px){.wc-messwerte{grid-template-columns:repeat(3,minmax(0,1fr))}}
.wc-messwerte li{padding:16px 14px 16px 0;border-bottom:1px solid var(--line)}
.wc-messwerte b{display:block;font-size:clamp(1.5rem,2.1vw,1.85rem);line-height:1.05;font-weight:660;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink)}
.wc-messwerte span{display:block;margin-top:6px;font-size:.78rem;line-height:1.3;font-weight:560;color:var(--muted)}

/* Ladefilm als Bildleiste wie bei PageSpeed. Lighthouse liefert die Bilder
   nur 250 Pixel breit; gross in einem Handy wurden sie unscharf. */
.wc-film__bilder{display:grid;grid-template-columns:repeat(var(--anzahl,8),minmax(0,1fr));gap:clamp(6px,1vw,14px);margin:0 0 10px;padding:0;list-style:none}
.wc-film__bilder li{position:relative;opacity:.38;transition:opacity .25s ease;cursor:pointer}
.wc-film__bilder li.is-jetzt,.wc-film__bilder li.is-gesehen{opacity:1}
.wc-film__bilder img{display:block;width:100%;aspect-ratio:250/498;object-fit:cover;object-position:top;border:1px solid var(--line);background:#fff;
  box-shadow:0 14px 30px -24px rgba(13,24,38,.5)}
.wc-film__bilder li.is-jetzt img{outline:2px solid var(--cyan);outline-offset:3px}
.wc-film__steuer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 clamp(26px,3vw,36px);font-size:.84rem;color:var(--muted)}
.wc-film__steuer button{padding:0;border:0;background:none;font:inherit;font-weight:640;cursor:pointer}
@media(max-width:700px){.wc-film__bilder{grid-template-columns:repeat(4,minmax(0,1fr))}}
.wc-film__notiz{margin:16px 0 0;font-size:.84rem;color:var(--muted);line-height:1.5}
.wc-bremsen{margin:20px 0 0;padding:0;list-style:none}
.wc-bremsen li{position:relative;padding:0 0 10px 24px;color:var(--ink-soft);line-height:1.45}
.wc-bremsen li::before{content:"";position:absolute;left:0;top:.72em;width:12px;height:2px;background:var(--cyan)}
.wc-bremsen b{color:var(--ink)}

/* KI-Ansicht */
.wc-ki{display:grid;gap:clamp(28px,4vw,56px)}
@media(min-width:960px){.wc-ki{grid-template-columns:1.1fr .9fr}}
.wc-terminal{background:#0b1422;color:#d7e6f5;border:1px solid #1b2a40;box-shadow:0 30px 70px -44px rgba(2,9,20,.6)}
.wc-terminal__kopf{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid #1b2a40;font:600 .74rem/1 var(--wc-mono);color:#7f93ab}
.wc-terminal__kopf i{width:10px;height:10px;border-radius:50%;background:#26364d}
.wc-terminal__kopf span{margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wc-terminal pre{position:relative;max-height:300px;margin:0;padding:16px;overflow:hidden;font:500 .82rem/1.6 var(--wc-mono);white-space:pre-wrap;word-break:break-word}
.wc-terminal pre::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(transparent,#0b1422)}
.wc-terminal__fuss{display:flex;flex-wrap:wrap;gap:8px 20px;padding:12px 16px;border-top:1px solid #1b2a40;font:600 .78rem/1.3 var(--wc-mono);color:#9fe3fb}
.wc-checkliste{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.wc-checkliste li{display:grid;grid-template-columns:24px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.wc-checkliste h4{margin:0;font-size:1rem}
.wc-checkliste p{margin:3px 0 0;color:var(--ink-soft);font-size:.92rem;line-height:1.5}
.wc-haken,.wc-kreuz{position:relative;display:inline-block;width:20px;height:20px;margin-top:2px;border-radius:50%;flex:none}
.wc-haken{background:var(--wc-gruen-ink)}
.wc-haken::after{content:"";position:absolute;inset:4px;background:#fff;-webkit-mask:var(--haken) center/contain no-repeat;mask:var(--haken) center/contain no-repeat}
.wc-kreuz{background:var(--wc-rot-ink)}
.wc-kreuz::before,.wc-kreuz::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:2px;margin:-1px 0 0 -5px;background:#fff;transform:rotate(45deg)}
.wc-kreuz::after{transform:rotate(-45deg)}
.wc-crawler{width:100%;margin-top:18px;border-collapse:collapse;font-size:.88rem}
.wc-crawler th,.wc-crawler td{padding:8px 6px 8px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.wc-crawler th{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.wc-crawler td:last-child{text-align:right;white-space:nowrap;font-weight:650}
.wc-crawler small{color:var(--muted);font-family:var(--wc-mono)}
.wc-ja{color:var(--wc-gruen-ink)} .wc-nein{color:var(--wc-rot-ink)}
.wc-infos{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:8px;font-size:.88rem;color:var(--ink-soft)}
.wc-infos b{color:var(--ink)}
.wc-infos a{color:var(--cyan-ink)}

/* Fremde Dienste */
.wc-zeitachse{position:relative;height:84px;margin:24px 0 8px;border-bottom:1px solid var(--ink)}
.wc-zeitachse__punkt{position:absolute;bottom:-6px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--wc-rot-ink);box-shadow:0 0 0 4px #fff}
.wc-zeitachse__punkt span{position:absolute;bottom:20px;left:50%;transform:rotate(-30deg);transform-origin:left bottom;white-space:nowrap;font-size:.74rem;font-weight:640;color:var(--ink)}
.wc-zeitachse__skala{display:flex;justify-content:space-between;font:500 .72rem/1 var(--wc-mono);color:var(--muted)}
.wc-dienstliste{margin:22px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.wc-dienstliste li{display:grid;grid-template-columns:58px 1fr auto;gap:12px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line)}
.wc-dienstliste time{font:600 .8rem/1 var(--wc-mono);color:var(--muted)}
.wc-dienstliste b{font-weight:700}
.wc-dienstliste small{display:block;margin-top:2px;font:500 .74rem/1.4 var(--wc-mono);color:var(--muted);word-break:break-all}
.wc-dienstliste em{font-style:normal;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--wc-rot-ink)}
.wc-ablehnen{display:grid;grid-template-columns:24px 1fr;gap:12px;margin-top:26px;padding:18px 0;border-top:2px solid var(--ink);line-height:1.5}
.wc-ablehnen h3{margin:0;font-size:1.1rem}
.wc-ablehnen p{margin:4px 0 0;color:var(--ink-soft)}
.wc-recht{margin:20px 0 0;font-size:.82rem;color:var(--muted);line-height:1.5}

/* Vergleich */
.wc-balken{display:grid;gap:18px;max-width:820px;margin:0;padding:0;list-style:none}
.wc-balken li{display:grid;gap:8px}
.wc-balken__kopf{display:flex;justify-content:space-between;gap:12px;font-size:.95rem}
.wc-balken__kopf b{font:720 1.02rem/1 var(--wc-zahl);font-variant-numeric:tabular-nums}
.wc-balken__spur{position:relative;height:10px;background:#e9eef4;overflow:hidden}
.wc-balken__wert{position:absolute;top:0;bottom:0;left:var(--von,0%);width:calc(var(--bis,0%) - var(--von,0%));background:var(--farbe,var(--ink));transform-origin:left;animation:wc-wachsen 1.2s var(--wc-kurve) both}
@keyframes wc-wachsen{from{transform:scaleX(0)}}
.wc-quelle{margin:16px 0 0;font-size:.8rem;color:var(--muted)}
.wc-quelle a{color:var(--cyan-ink)}

/* Teilen */
.wc-teilen{display:grid;gap:clamp(24px,4vw,56px);align-items:center}
@media(min-width:900px){.wc-teilen{grid-template-columns:1.05fr .95fr}}
.wc-teilen__bild{display:block;width:100%;aspect-ratio:1200/630;object-fit:cover;background:#020914;border:1px solid var(--line)}
.wc-links{display:grid;gap:12px;margin:22px 0 0;padding:0;list-style:none}
.wc-links button.web-link{padding:0;border:0;background:none;font:inherit;font-weight:640;cursor:pointer}
.wc-klein{margin-top:20px;font-size:.84rem;color:var(--muted);line-height:1.55}
.wc-klein button{padding:0;border:0;background:none;color:var(--wc-rot-ink);font:inherit;text-decoration:underline;cursor:pointer}
.wc-klein a{color:var(--ink-soft)}

/* Methodik */
.wc-inhalt>section.wc-methodik{padding-top:clamp(34px,4vw,48px);padding-bottom:clamp(34px,4vw,48px);font-size:.84rem;color:var(--muted);line-height:1.65;border-top:1px solid var(--line)}
.wc-methodik h2{font-size:1rem;margin:0 0 8px;color:var(--ink)}
.wc-methodik p{margin:0 0 8px;max-width:920px}

/* Sonderfaelle und Fehler: auf der hellen Messflaeche */
.wc-sonder{grid-column:1/-1;max-width:760px}
.wc-sonder h2{margin:0;font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.04;letter-spacing:-.04em;color:var(--ink)}
.wc-sonder p{color:var(--ink-soft);font-size:1.06rem;line-height:1.6}
.wc-sonder .trustmarks{margin:18px 0 24px}

/* Interne Statistik-Seite */
.wc-stat-kopf{padding:calc(var(--nav-hoehe,80px) + clamp(30px,4.5vw,60px)) var(--page) clamp(34px,4vw,52px);
  background:linear-gradient(180deg,var(--cyan-soft) 0%,#f7fbfe 55%,var(--white) 100%);border-bottom:1px solid var(--line)}
.wc-stat-kopf h1{margin:0;max-width:18ch;font-size:clamp(2.1rem,4.4vw,3.3rem);line-height:1.04;letter-spacing:-.045em;font-weight:760}
.wc-stat-kopf .eyebrow{margin:0 0 14px}
.wc-stat-kopf .lead{margin:18px 0 0;max-width:62ch}
.wc-stat__meta{margin:14px 0 0;font-size:.86rem;color:var(--muted)}
.wc-stat-zahlen{padding:clamp(34px,4vw,52px) var(--page) 0;background:var(--white)}
.wc-stat-raster{padding:clamp(34px,4vw,52px) var(--page) clamp(56px,7vw,96px);background:var(--white)}
.wc-stat__gitter{display:grid;gap:clamp(30px,3.6vw,48px) clamp(32px,4vw,64px)}
@media(min-width:900px){.wc-stat__gitter{grid-template-columns:1fr 1fr}}
.wc-stat__block{padding-top:18px;border-top:1px solid var(--line)}
.wc-stat__block h3{margin:0 0 16px;font-size:1.12rem;letter-spacing:-.01em}
.wc-stat__block .wc-balken{gap:12px}
.wc-stat__leer{margin:0;color:var(--muted);font-size:.92rem}
.wc-stat__liste{margin:0;padding:0;list-style:none}
.wc-stat__liste li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.wc-stat__liste b{font-variant-numeric:tabular-nums}

/* Bewegung nur, wenn gewuenscht */
@media (prefers-reduced-motion: reduce){
  .wc *,.wc *::before,.wc *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .wc-handy__scan{display:none}
}

/* Druck: hell, ohne Navigation */
@media print{
  .topnav,.edge-handle,.edge-scrim,.edge-menu,.wc-prototyp,.wc-panel,.cta,.web-foot,.wc-teilen,.wc-handy__umschalter,.wc-urteil .web-btn{display:none!important}
  .wc-fortschritt{display:none}
  .wc-lauf{padding-top:0;background:#fff}
  .wc-takt{background:#fff!important;color:var(--ink)!important;min-height:0;padding:20px 0}
  .wc-takt__zeile span{color:var(--ink-soft)} .wc-takt__zeile b{color:var(--ink)}
  .wc-inhalt>section{padding:24px 0!important;background:#fff!important;break-inside:avoid}
  .wc-blatt{box-shadow:none}
  details>*:not(summary){display:block!important}
}

/* All selectors are confined to the Website Check. Shared agency pages keep their own colours. */
.wc-seite .wc-theme-switch{display:block;position:relative;width:76px;height:76px;margin:0 0 24px clamp(24px,calc(24% - 38px),110px);padding:0;border:0;background:transparent;color:#748ba2;cursor:pointer;line-height:0;transform:translateY(-16px);-webkit-tap-highlight-color:transparent;flex:none}
.wc-theme-switch svg{display:block;width:100%;height:100%;overflow:visible}
.wc-theme-switch::before{content:"";position:absolute;left:calc(50% - 1px);bottom:100%;width:2px;height:100vh;background:currentColor;pointer-events:none}
.wc-seite .wc-lauf{overflow:hidden}
.wc-theme-switch__shade{fill:rgba(25,191,244,.05);transition:fill .2s ease}
.wc-theme-switch__beam{fill:none;stroke:var(--cyan);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:10 90;stroke-dashoffset:10;opacity:0}
.wc-theme-switch.is-lit .wc-theme-switch__beam{animation:wc-lampenlicht 4.2s linear infinite}
@keyframes wc-lampenlicht{0%{opacity:0;stroke-dashoffset:10}4%,40%{opacity:1}44%{opacity:0;stroke-dashoffset:-90}100%{opacity:0;stroke-dashoffset:-90}}
.wc-theme-switch:hover{color:var(--cyan-ink)}
.wc-theme-switch:hover .wc-theme-switch__shade{fill:rgba(25,191,244,.18)}
.wc-theme-switch:focus-visible{outline:2px solid var(--cyan-ink);outline-offset:5px;border-radius:4px}
.wc-lauf__kopf .wc-theme-switch{width:60px;height:60px;margin-bottom:18px;margin-left:clamp(24px,calc(24% - 30px),110px)}
.wc-seite .wc-held{padding-bottom:calc(clamp(44px,7vh,80px) + 44px)}
.wc-seite .wc-held .layer--wand line[y1="744"]{display:none}
/* Like the office scene on /websites: warm light sinks at dusk and rises at dawn. */
html[data-wc-theme]::view-transition-group(root){animation:none}
html[data-wc-theme]::view-transition-group(root){z-index:0}
html[data-wc-theme] .wc-held .layer--wand{view-transition-name:wc-window}
html[data-wc-theme] .wc-held__innen{view-transition-name:wc-content}
html[data-wc-theme] .wc-seite .topnav{view-transition-name:wc-nav}
html[data-wc-theme]::view-transition-group(wc-window){animation:none;z-index:1}
html[data-wc-theme]::view-transition-old(wc-window){display:none}
html[data-wc-theme]::view-transition-new(wc-window){animation:none;mix-blend-mode:normal}
html[data-wc-theme]::view-transition-group(wc-content){animation:none;z-index:3}
html[data-wc-theme]::view-transition-group(wc-nav){animation:none;z-index:4}
html[data-wc-theme]::view-transition-old(wc-content),html[data-wc-theme]::view-transition-new(wc-content),html[data-wc-theme]::view-transition-old(wc-nav),html[data-wc-theme]::view-transition-new(wc-nav){animation:none;mix-blend-mode:normal}
html[data-wc-theme]::view-transition-old(root),html[data-wc-theme]::view-transition-new(root){animation:none;mix-blend-mode:normal}
html[data-wc-theme]::view-transition-old(root){z-index:1}
html[data-wc-theme]::view-transition-new(root){z-index:2}
html[data-wc-theme]::view-transition{pointer-events:none}
html[data-wc-theme]::view-transition-group(wc-daylight){animation:none;z-index:2}
html[data-wc-theme]::view-transition-old(wc-daylight){display:none}
html[data-wc-theme]::view-transition-new(wc-daylight){animation:none;mix-blend-mode:screen}
html.wc-theme-changing .wc-seite,html.wc-theme-changing .wc-seite *,html.wc-theme-changing .wc-seite *::before,html.wc-theme-changing .wc-seite *::after{transition:none!important}
.wc-seite .wc-theme-veil{position:fixed;inset:0;z-index:10000;pointer-events:none;opacity:0}
.wc-seite .wc-daylight{position:fixed;inset:0;z-index:10001;pointer-events:none;opacity:0;view-transition-name:wc-daylight;transform-origin:var(--wc-light-x,54%) var(--wc-light-y,40%);background:radial-gradient(ellipse 42% 60% at var(--wc-light-x,54%) var(--wc-light-y,40%),rgba(255,196,118,.58),rgba(255,168,92,.18) 43%,transparent 70%),conic-gradient(from 145deg at var(--wc-light-x,54%) var(--wc-light-y,40%),transparent,rgba(255,185,110,.15) 25deg,rgba(255,185,110,.06) 75deg,transparent 100deg);mix-blend-mode:screen}
.wc-held .layer--wand>svg{position:relative;z-index:1}
.wc-window-sky{position:absolute;overflow:hidden;border-radius:9px;background-color:#e6f1f9}
.wc-window-sun{position:absolute;left:32%;top:50%;width:clamp(30px,4vw,64px);aspect-ratio:1;border-radius:50%;background:#ffdc9f;box-shadow:0 0 38px 16px rgba(255,180,100,.48);transform:translate(-50%,-50%);opacity:0}
.wc-window-stars{position:absolute;inset:0;opacity:0;background:radial-gradient(1px 1px at 18% 22%,#c8ddf2 98%,transparent),radial-gradient(1.5px 1.5px at 39% 16%,#b7cee7 98%,transparent),radial-gradient(1px 1px at 67% 31%,#c8ddf2 98%,transparent),radial-gradient(1px 1px at 83% 19%,#c8ddf2 98%,transparent)}
html[data-wc-theme="dark"] .wc-seite{color-scheme:dark;--white:#0b1523;--paper:#111f30;--ink:#edf4fc;--ink-soft:#bacbdd;--muted:#9aafc5;--line:#2b3e53;--cyan-ink:#63d2f8;--cyan-soft:#123449;--wc-gruen-ink:#58dea0;--wc-orange-ink:#ffc563;--wc-rot-ink:#ff8278;--wc-spur:#2b3e53;--wc-feldlinie:#526b84;--nav-bg:rgba(11,21,35,.96);--nav-linie:#2b3e53;--nav-marke-dunkel:1;--nav-ruhe:#bacbdd;--nav-hell:#edf4fc;--rail-ruhe:#8095ad;--rail-hell:#edf4fc;--rail-chip:#142337;--pill-linie:#2b3e53;background:var(--white);color:var(--ink)}
html[data-wc-theme="dark"] .wc-seite .topnav{background:rgba(11,21,35,.96);border-color:var(--line)}
html[data-wc-theme="dark"] .wc-seite .wc-held{background:radial-gradient(1000px 640px at 22% 12%,rgba(25,191,244,.08),transparent 65%),var(--white)}
html[data-wc-theme="dark"] .wc-held .layer--wand{opacity:1}
html[data-wc-theme="dark"] .wc-held .layer--wand>svg{opacity:.32}
html[data-wc-theme="dark"] .wc-window-sky{background-color:#0b1c31}
html[data-wc-theme="dark"] .wc-window-stars{opacity:1}
html[data-wc-theme="dark"] .wc-held .szene__nebel{display:none}
html[data-wc-theme="dark"] .wc-held .szene__boden{background:linear-gradient(#15273b,#111f30);border-color:var(--line)}
html[data-wc-theme="dark"] .wc-seite :is(.wc-probe__blatt,.wc-blatt,.wc-feld,.wc-handy__umschalter button){background:var(--paper)}
html[data-wc-theme="dark"] .wc-seite .wc-probe__blatt{border-color:rgba(137,179,217,.23);box-shadow:0 2px 8px rgba(0,0,0,.1),0 20px 44px -24px rgba(0,0,0,.38),0 48px 96px -44px rgba(0,0,0,.45),inset 0 1px 0 rgba(199,228,255,.07)}
html[data-wc-theme="dark"] .wc-seite .wc-feld input{background:var(--paper)}
html[data-wc-theme="dark"] .wc-seite .wc-feld__schema,html[data-wc-theme="dark"] .wc-seite .wc-feld input::placeholder{color:var(--muted)}
html[data-wc-theme="dark"] .wc-seite :is(.wc-lauf,.wc-stat-kopf){background:linear-gradient(180deg,var(--cyan-soft),var(--paper) 52%,var(--white))}
html[data-wc-theme="dark"] .wc-seite .wc-handy__umschalter button[aria-pressed="true"]{background:#63d2f8;border-color:#63d2f8;color:#08212f}
html[data-wc-theme="dark"] .wc-seite .wc-handy__schirm{background:var(--paper)}
html[data-wc-theme="dark"] .wc-seite .wc-handy__skelett i{background:linear-gradient(90deg,#1c3046,#29425d 45%,#1c3046 90%);background-size:220% 100%}
html[data-wc-theme="dark"] .wc-seite .wc-balken__spur{background:var(--wc-spur)}
html[data-wc-theme="dark"] .wc-seite .wc-zeitachse__punkt{box-shadow:0 0 0 4px var(--paper)}
html[data-wc-theme="dark"] .wc-seite .wc-form__fehler{background:#341d25}
html[data-wc-theme="dark"] .wc-seite .wc-theme-switch{color:#63d2f8;filter:drop-shadow(0 2px 7px rgba(25,191,244,.22))}
html[data-wc-theme="dark"] .wc-theme-switch__shade{fill:rgba(25,191,244,.25)}
html[data-wc-theme="dark"] .wc-theme-switch__beam{stroke:#a6edff}
html[data-wc-theme="dark"] .wc-seite .eyebrow--bunt{--ev1:#ff7738;--ev2:#ff525e;--ev3:#ff49c0;--ev4:#a37aff;--ev5:#5c9eff}
html[data-wc-theme="dark"] .wc-seite :is(.wc-befund__symbol,.wc-haken)::after{background:#0b1523}
html[data-wc-theme="dark"] .wc-seite :is(.wc-befund--problem,.wc-befund--kritisch) .wc-befund__symbol::after{color:#0b1523}
html[data-wc-theme="dark"] .wc-seite .wc-marke-rahmen span{color:#0b1523}
html[data-wc-theme="dark"] .wc-seite :is(.feat:hover,.preis__hinweis){background:var(--paper)}
@media(max-width:700px){.wc-seite .wc-theme-switch{width:64px;height:64px;margin-bottom:22px;margin-left:clamp(24px,calc(24% - 32px),110px)}.wc-lauf__kopf .wc-theme-switch{width:54px;height:54px;margin-left:clamp(24px,calc(24% - 27px),110px)}}
@media(prefers-reduced-motion:reduce){.wc-theme-switch__beam{animation:none!important}.wc-theme-switch__shade{transition:none}}
@media(forced-colors:active){.wc-seite .wc-theme-switch{color:ButtonText}.wc-theme-switch__beam{display:none}}
@media print{.wc-seite .wc-theme-switch{display:none}html[data-wc-theme="dark"] .wc-seite{--white:#fff;--paper:#f5f8fc;--ink:#0d1826;--ink-soft:#41566b;--muted:#627486;--line:#e4eaf1;--cyan-ink:#007aa6;--wc-gruen-ink:#087a4c;--wc-orange-ink:#9a5b00;--wc-rot-ink:#c42c22;background:#fff;color:#0d1826}}

html[data-wc-theme="dark"] .wc-seite .wc a:not([class]){color:var(--cyan-ink)}
.wc-held__innen.wc-held__innen--eins{grid-template-columns:1fr}
html[data-wc-theme="dark"] .wc-seite .wc-schritt.is-fertig .wc-schritt__punkt::after{background:#0b1523}


/* The English shell imports the stacked footer markup from /en/websites.html.
   Keep its layout here, without importing the unrelated websites page styles. */
.wc-seite .web-foot.snx-footer-social--stacked{
  display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start;
  padding:clamp(28px,3.6vw,36px) var(--page) clamp(22px,3vw,28px)
}
.wc-seite .snx-footer-social--stacked .web-foot__nav{
  min-width:0;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.07)
}
.wc-seite .snx-footer-social--stacked .web-foot__links{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(20px,4vw,40px);
  list-style:none;margin:0;padding:0
}
.wc-seite .snx-footer-social--stacked .web-foot__links a{
  display:inline-block;padding:5px 0;line-height:1.35;color:#c4d2e0;text-decoration:none
}
.wc-seite .snx-footer-social--stacked .web-foot__links a:hover{
  color:#fff;text-decoration:underline;text-underline-offset:3px
}
.wc-seite .snx-footer-social--stacked .web-foot__recht{
  display:flex;flex-wrap:wrap;gap:4px 18px;margin:0;color:#8ea1b5;font-size:.85rem
}
.wc-seite .snx-footer-social--stacked .web-foot__recht a{
  color:#c4d2e0;text-decoration:underline;text-underline-offset:3px
}
.wc-seite .snx-footer-social--stacked .web-foot__recht a:hover{color:#fff}
.wc-seite .snx-footer-social--stacked :is(.web-foot__links,.web-foot__recht) a:focus-visible{
  outline:2px solid #12bde9;outline-offset:4px
}
@media(min-width:861px){
  .wc-seite .web-foot.snx-footer-social--stacked{grid-template-columns:minmax(0,1fr) auto;column-gap:26px}
  .wc-seite .snx-footer-social--stacked .web-foot__nav{grid-column:1 / -1}
  .wc-seite .snx-footer-social--stacked .web-foot__links{display:flex;flex-wrap:wrap;gap:2px 26px}
  .wc-seite .snx-footer-social--stacked .web-foot__links a{padding:3px 0}
  .wc-seite .snx-footer-social--stacked .web-foot__recht{grid-column:1;align-self:center}
  .wc-seite .snx-footer-social--stacked > .snx-social{grid-column:2;grid-row:2;align-self:center}
}

/* Long English terminal headings must not widen the mobile report viewport. */
html[lang="en"] .wc-seite .wc-terminal{min-width:0}