/*
    refresh-2026.css — Design 2026.
    Geladen von baseof.html fuer jede Seite mit design = "2026" im Vorspann (dann
    liegt auch die Klasse .scg-cl-scope um den Inhalt), ausserdem von den EN-Entwuerfen
    unter content/en/preview-2026/. Analyse, Regeln und Owner-Entscheidungen:
    docs/redesign-2026-protokoll.md. Handy wird auf 360px geprueft.

    Richtung: redaktionell, schweizerisch — kleine Radien (max. 4px), Haarlinien
    statt Schatten, linksbuendig, Typografie traegt. Bewusst kein Material-Look:
    keine Pillen, keine grossen Rundungen, keine weichen Riesenschatten.

    Alles ist unter .scg-cl-scope gekapselt, damit nichts auf den Rest der Seite (Header,
    Footer, Bundle) durchschlaegt.
*/

.scg-cl-scope {
    --scg-cl-ink: #0f172a;
    --scg-cl-text: #374151;
    --scg-cl-muted: #64748b;
    --scg-cl-line: #dfe4ec;
    --scg-cl-soft: #f4f6f9;
    --scg-cl-brand: #1f75cb;
    --scg-cl-brand-dark: #155a9e;
    --scg-cl-brand-tint: #e8f1fb;
    --scg-cl-navy: #0c1e36;
    --scg-cl-radius: 4px;

    color: var(--scg-cl-text);
    background: #fff;
}

/* ---------- Typografie ----------
   Fliesstext durchgehend 1.1rem wie auf der Live-Seite (2026 eher 16-18px, also
   nicht kleiner werden). Kleiner nur fuer Labels, Hinweise und Buttons. */

.scg-cl-scope h1, .scg-cl-scope h2, .scg-cl-scope h3, .scg-cl-scope h4 {
    color: var(--scg-cl-ink);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-top: 0;
}
.scg-cl-scope h1 { font-size: clamp(2.4rem, 4.2vw, 3.6rem); line-height: 1.08; margin-bottom: 1.25rem; }
.scg-cl-scope h2 { font-size: clamp(1.8rem, 2.8vw, 2.5rem); line-height: 1.12; margin-bottom: 1rem; }
.scg-cl-scope h3 { font-size: 1.2rem; line-height: 1.3; margin-bottom: .4rem; letter-spacing: -0.01em; }
.scg-cl-scope p  { font-size: 1.1rem; line-height: 1.65; }
.scg-cl-scope .scg-cl-lead { font-size: 1.25rem; line-height: 1.55; max-width: 34em; }
.scg-cl-scope .scg-cl-small { font-size: .9rem; color: var(--scg-cl-muted); }

/* Eyebrow: kleine Versalzeile mit kurzer Linie davor — das schweizerische Element.
   Regel (Owner 2026-11-04): nur ueber genau EINER Ueberschrift (oder als einziges Label,
   wie bei der Kundenstimme), nur wenn sie etwas sagt, das die Ueberschrift nicht schon
   sagt, keine Nummern. Kurz halten: Versalien mit Laufweite brauchen viel Platz, auf
   360px soll sie einzeilig bleiben. Bricht sie doch um, steht die Linie vor der ersten
   Zeile statt mittig neben dem ganzen Block. */
.scg-cl-eyebrow {
    display: flex;
    align-items: flex-start;
    line-height: 1.5;
    gap: .75rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--scg-cl-brand);
    margin-bottom: 1rem;
}
.scg-cl-eyebrow::before {
    content: "";
    flex: none;
    width: 28px;
    height: 2px;
    margin-top: calc(.75em - 1px); /* Mitte der ersten Zeile bei line-height 1.5 */
    background: currentColor;
}

/* ---------- Abschnitte ---------- */

.scg-cl-section { padding: 96px 0; }
.scg-cl-section-tight { padding: 64px 0; }
.scg-cl-bg-soft { background: var(--scg-cl-soft); }
.scg-cl-rule-top { border-top: 1px solid var(--scg-cl-line); }
.scg-cl-measure { max-width: 40em; }

@media (max-width: 767px) {
    .scg-cl-section { padding: 56px 0; }
    .scg-cl-section-tight { padding: 40px 0; }
}

/* ---------- Buttons ---------- */

.scg-cl-scope .scg-cl-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem 1.4rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    border-radius: var(--scg-cl-radius);
    border: 1px solid transparent;
    text-decoration: none;
    transition: background-color .15s, color .15s, border-color .15s;
}
.scg-cl-scope .scg-cl-btn-primary { background: var(--scg-cl-brand); color: #fff; }
.scg-cl-scope .scg-cl-btn-primary:hover { background: var(--scg-cl-brand-dark); color: #fff; }
.scg-cl-scope .scg-cl-btn-white { background: #fff; color: var(--scg-cl-brand-dark); }
.scg-cl-scope .scg-cl-btn-white:hover { background: var(--scg-cl-brand-tint); color: var(--scg-cl-brand-dark); }
.scg-cl-scope .scg-cl-btn-outline-white { border-color: rgba(255,255,255,.6); color: #fff; }
.scg-cl-scope .scg-cl-btn-outline-white:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }

/* Textlink mit Pfeil fuer Nebenaktionen */
.scg-cl-scope .scg-cl-link-arrow {
    font-weight: 600;
    color: var(--scg-cl-brand);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
}
.scg-cl-scope .scg-cl-link-arrow::after { content: " \2192"; }
.scg-cl-scope .scg-cl-link-arrow:hover { color: var(--scg-cl-brand-dark); }
.scg-cl-scope .scg-cl-link-arrow-white { color: #fff; }
.scg-cl-scope .scg-cl-link-arrow-white:hover { color: #fff; opacity: .85; }

.scg-cl-scope a:focus-visible, .scg-cl-scope .scg-cl-btn:focus-visible { outline: 2px solid var(--scg-cl-brand); outline-offset: 3px; }

/* ---------- Hero (Startseite) ----------
   Der Superheld bleibt (Markenzeichen, Entscheidung 2026-10-25), ebenso der
   sanfte Bogen als Uebergang (Owner-Wunsch). Neu: ruhigere Typografie, eine
   Hauptaktion. */

.scg-cl-hero-arc {
    position: absolute;
    left: -25%;
    bottom: -1px;
    width: 150%;
    height: 48px;
    z-index: 1;
    display: block;
}
@media (max-width: 767px) { .scg-cl-hero-arc { height: 24px; } }

.scg-cl-hero {
    background: linear-gradient(115deg, #155a9e 0%, #1f75cb 55%, #4d93d9 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
    padding-top: 150px;
}
.scg-cl-hero h1, .scg-cl-hero p { color: #fff; }
.scg-cl-hero .scg-cl-eyebrow { color: rgba(255,255,255,.85); }
.scg-cl-hero .scg-cl-lead { color: rgba(255,255,255,.92); }
.scg-cl-hero-copy { padding-bottom: 96px; }
/* Superheld ragt bis an die Unterkante und etwas ueber die Spalte hinaus */
.scg-cl-hero-img {
    display: block;
    width: 118%;
    max-width: 780px;
    height: auto;
    margin-left: -6%;
}
.scg-cl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; margin-top: 2rem; }

.scg-cl-trust {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.75rem;
    margin: 2.25rem 0 0;
    padding: 1.25rem 0 0;
    list-style: none;
    border-top: 1px solid rgba(255,255,255,.25);
    font-size: .95rem;
}
.scg-cl-trust li::before { content: "\2713"; margin-right: .5rem; font-weight: 700; }
.scg-cl-trust-dark { border-top-color: var(--scg-cl-line); color: var(--scg-cl-text); }
.scg-cl-trust-dark li::before { color: var(--scg-cl-brand); }

@media (max-width: 991px) {
    .scg-cl-hero { padding-top: 110px; }
    .scg-cl-hero-copy { padding-bottom: 32px; }
    .scg-cl-hero-img { width: 100%; margin: 0 auto; max-width: 420px; }
}

/* ---------- Funktionsraster ----------
   Ruhiges 3x2 wie im Original, ohne Kaesten: jede Funktion mit Haarlinie oben.
   (Ein Bento-Raster mit ungleichen Kacheln war ausprobiert und verworfen,
   Owner 2026-10-25: zu unruhig, wirkte wie eine Tabelle.) */

.scg-cl-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem 2.5rem;
    margin-top: 3rem;
}
.scg-cl-feature {
    display: flex;
    flex-direction: column;
    padding-top: 1.75rem;
    border-top: 1px solid #c9d1dc;
    color: inherit;
    text-decoration: none;
    transition: border-color .15s;
}
.scg-cl-feature:hover { color: inherit; text-decoration: none; border-top-color: var(--scg-cl-brand); }
.scg-cl-feature:hover h3 { color: var(--scg-cl-brand); }
.scg-cl-feature p { font-size: 1.1rem; line-height: 1.6; margin-bottom: .75rem; }
.scg-cl-feature .scg-cl-feature-more { margin-top: auto; }
.scg-cl-feature .scg-cl-feature-more::after { content: " \2192"; }
/* Icon im Verhaeltnis zur h3 (1.2rem) und zum Text: Feld 64px, Glyphe 1.75rem.
   40px/1.05rem wirkte daneben verloren (Owner 2026-10-25). */
.scg-cl-feature-icon {
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #dbe8f7; /* kraeftiger als --scg-cl-brand-tint, sonst verschwindet das Feld auf --scg-cl-soft */
    color: var(--scg-cl-brand);
    border-radius: var(--scg-cl-radius);
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 991px) { .scg-cl-features { grid-template-columns: 1fr 1fr; } }
/* Handy: kompakt. Sechs Eintraege mit grossem Icon darueber waren auf 360px rund
   1800px lang, mobil scrollt aber nur ein Viertel bis ans Seitenende (GA4, DE,
   Sept.-Nov. 2026). Icon klein links neben die Ueberschrift, Text darunter ueber
   die volle Breite. Texte unveraendert. */
@media (max-width: 575px) {
    .scg-cl-features { grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2rem; }
    .scg-cl-feature {
        display: grid;
        grid-template-columns: 44px 1fr;
        column-gap: .9rem;
        align-items: center;
        padding-top: 1.25rem;
    }
    .scg-cl-feature .scg-cl-feature-icon { width: 44px; height: 44px; font-size: 1.25rem; margin-bottom: 0; }
    .scg-cl-feature h3 { margin-bottom: 0; }
    .scg-cl-feature p, .scg-cl-feature .scg-cl-feature-more { grid-column: 1 / -1; }
    .scg-cl-feature p { margin: .6rem 0 .4rem; }
}

/* ---------- Produktbild ---------- */

.scg-cl-screenshot {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--scg-cl-line);
    border-radius: var(--scg-cl-radius);
    background: #fff;
}
/* Handy-Screenshot (z.B. Sperrbildschirm). Zusammen mit .scg-cl-screenshot verwenden: Ohne
   Rahmen wirkten die Knoepfe im Bild wie echte Knoepfe der Seite. */
.scg-cl-screenshot-phone { max-width: 240px; margin: 0 auto; display: block; }
@media (max-width: 575px) { .scg-cl-screenshot-phone { max-width: 200px; } }

/* Bild, das auf dem Handy per <picture> gegen einen Hochformat-Screenshot getauscht
   wird (Startseite: Web Portal -> Eltern-App). Hochformat auf volle Breite waere
   zu hoch. */
@media (max-width: 575px) { .scg-cl-screenshot-mobile { max-width: 240px; margin: 0 auto; } }

/* Vektorzeichnungen der Marke als optische Anker (Owner 2026-10-25: bleiben) */
.scg-cl-illustration { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto; }
/* Auf dem Handy kleiner und linksbuendig, damit der Text danach nicht erst nach
   einer bildschirmhohen Zeichnung kommt. */
@media (max-width: 991px) { .scg-cl-illustration-sm { max-width: 200px; margin-left: 0; } }

/* "Mehr" im Funktionsraster in derselben Groesse wie die Textlinks (.scg-cl-link-arrow
   erbt 1.1rem vom Absatz) */
.scg-cl-scope .scg-cl-feature-more { color: var(--scg-cl-brand); font-weight: 600; font-size: 1.1rem; white-space: nowrap; }

/* Presselogos (Shortcode sc-press-logos, auch auf den Live-Startseiten). Hier nur
   innerhalb .scg-cl-scope umgestellt: Ueberschrift als kleines Label statt grosser
   zentrierter h2, die auf dem Handy zweizeilig neben der linksbuendigen Seite stand. */
.scg-cl-scope .scg-press { padding-top: 2.5rem; padding-bottom: 1rem; }
.scg-cl-scope .scg-press hr { display: none !important; }
.scg-cl-scope .scg-press h2 {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--scg-cl-muted);
}
@media (max-width: 767px) {
    .scg-cl-scope .scg-press { padding-top: 1.75rem; }
    .scg-cl-scope .scg-press .text-center { text-align: left !important; padding-left: 16px; }
    .scg-cl-scope .scg-press-row { margin-top: 1rem; }
}

/* Kopf Child Control: Web-Portal, davor versetzt die Eltern-App */
.scg-cl-product-duo { position: relative; padding: 0 0 48px 0; }
.scg-cl-product-duo .scg-cl-screenshot:first-child { width: 88%; }
/* height:auto, sonst gilt bei Bildern mit width/height-Attribut (DE-Entwurf) die
   feste Hoehe aus dem Attribut und die Eltern-App ragt ueber den Kopf. */
.scg-cl-product-duo img { height: auto; }
.scg-cl-product-duo .scg-cl-product-duo-phone {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 26%;
    border: 1px solid var(--scg-cl-line);
    border-radius: var(--scg-cl-radius);
    background: #fff;
}
.scg-cl-photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 60% center;
    border-radius: var(--scg-cl-radius);
}

/* Footer hell (Owner 2026-11-05, Vorschlag A, abgenommen; Navy war 2026-10-25 zu hart):
   nur Seiten im neuen Design (footer.html setzt .scg-cl-footer). Der Footer liegt ausserhalb von .scg-cl-scope, deshalb
   Farben hier als Werte statt Variablen. Das mittelgraue Band (#757575) war die
   einzige grosse Farbflaeche der weissen Seiten und wirkte wie ein Fremdkoerper;
   hell laeuft die Seite aus, statt gegen einen Block zu stossen. */
.scg-footer.scg-cl-footer {
    background: #f4f6f9;
    color: #374151;
    border-top: 1px solid #dfe4ec;
    padding-top: 2.5rem !important;
    padding-bottom: 3rem !important;
}
.scg-cl-footer > .container { font-size: .95rem !important; }
/* Handy: Abstand oben addiert sich sonst aus Footer, Container und erster Spalte */
@media (max-width: 767px) { .scg-footer.scg-cl-footer { padding-top: 1rem !important; } }
/* Spaltenueberschriften als kleines gesperrtes Label (wie Eyebrow, ohne Linie).
   DE: <b class="text-uppercase">, EN/FR: <div class="font-weight-bold text-uppercase"> (2026-11-06). */
.scg-cl-footer b.text-uppercase,
.scg-cl-footer div.font-weight-bold.text-uppercase {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    /* Etwas dunkler als --scg-cl-muted (#64748b): auf Hellgrau sonst nur 4,35:1, jetzt
       ca. 4,7:1 (WCAG AA 4,5:1). Gleicher Blauton, nicht das alte #757575 (Owner 2026-11-05). */
    color: #627083;
}
.scg-cl-footer .scg-link-footer { color: #374151; margin-bottom: .55rem; text-decoration: none; }
.scg-cl-footer a.scg-white { color: #374151; }
.scg-cl-footer a:hover, .scg-cl-footer a:focus { color: #1f75cb; text-decoration: none; }
/* Fusszeile (Copyright, Bekannt aus, Bewertungen) durch Haarlinie abgesetzt */
.scg-cl-footer > .container > .row + .row {
    margin-top: 2.5rem !important;
    padding-top: 1.75rem;
    /* Linie nur ueber den Spalten: die Zeile ragt per negativem Rand 15 px ueber */
    background: linear-gradient(#dfe4ec, #dfe4ec) no-repeat 15px 0 / calc(100% - 30px) 1px;
    align-items: center;
    color: #627083; /* wie die Labels oben, Kontrast auf Hellgrau */
    font-size: .9rem;
}
/* Presselogos: weisses PNG grau einfaerben statt neues Bild */
.scg-cl-footer img[src*="presse-v2"] { filter: brightness(0); opacity: .45; }

/* ---------- Plattformen ---------- */

.scg-cl-platform { border-top: 2px solid var(--scg-cl-ink); padding-top: 1.5rem; }
.scg-cl-platform h3 { font-size: 1.6rem; margin-bottom: .75rem; }
.scg-cl-platform h2 { font-size: clamp(1.5rem, 2vw, 1.9rem); }
.scg-cl-checklist { list-style: none; padding: 0; margin: 1.25rem 0 1.5rem; }
.scg-cl-checklist li { padding: .55rem 0 .55rem 1.75rem; border-top: 1px solid var(--scg-cl-line); position: relative; font-size: 1.1rem; }
.scg-cl-checklist li::before { content: "\2713"; position: absolute; left: 0; color: var(--scg-cl-brand); font-weight: 700; }
/* Vertrauenszeilen im blauen Kopf der Startseite: weiss, ohne Haarlinien */
.scg-cl-hero-checks { list-style: none; padding: 0; margin: 1.25rem 0 0; }
.scg-cl-hero-checks li { position: relative; padding: .15rem 0 .15rem 1.6rem; font-size: 1rem; line-height: 1.5; color: rgba(255,255,255,.9); }
@media (min-width: 992px) { .scg-cl-hero-copy:has(.scg-cl-hero-checks) { padding-bottom: 56px; } } /* Owner: weniger Rand unter "Kein Abo" */
.scg-cl-hero-checks li::before { content: "\2713"; position: absolute; left: 0; font-weight: 700; color: #fff; }

/* ---------- Zitat ---------- */

.scg-cl-quote { margin: 0; max-width: 46em; }
.scg-cl-quote p {
    font-size: clamp(1.4rem, 2.3vw, 1.9rem);
    line-height: 1.4;
    font-weight: 500;
    color: var(--scg-cl-ink);
    letter-spacing: -0.01em;
}
.scg-cl-quote footer { margin-top: 1.25rem; font-size: .95rem; color: var(--scg-cl-muted); }
.scg-cl-stars { color: #f5a623; letter-spacing: .1em; margin-right: .5rem; }

/* ---------- Teaser-Karten ---------- */

.scg-cl-card {
    display: block;
    height: 100%;
    padding: 1.75rem;
    border: 1px solid var(--scg-cl-line);
    border-radius: var(--scg-cl-radius);
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: border-color .15s;
}
.scg-cl-card:hover { border-color: var(--scg-cl-brand); text-decoration: none; color: inherit; }
.scg-cl-card:hover h3 { color: var(--scg-cl-brand); }
.scg-cl-card .scg-cl-eyebrow { margin-bottom: .75rem; }
.scg-cl-card p { font-size: 1.1rem; margin-bottom: 0; }

/* ---------- CTA-Band ----------
   Markenblau wie scg-bg-blue des Originals (Owner 2026-10-25: Navy zu hart). */

/* 48px statt 80px: bei einer Zeile Ueberschrift + einer Zeile Text war das Band
   zu hoch (Owner 2026-10-25). */
.scg-cl-band { background: var(--scg-cl-brand); color: #fff; padding: 48px 0; }
.scg-cl-band .scg-cl-actions { margin-top: 1rem; }

/* Testangebot als helles Panel in Inhaltsbreite (sc-cl-trial).
   Farbe und Stil vom Owner bestaetigt (2026-11-04), siehe docs/redesign-2026-protokoll.md.

   REGEL: Abstand ueber und unter dem Kasten ist immer gleich, auf Desktop und
   Handy. Der Kasten bekommt denselben Abstand wie ein Abschnitt (96 / 56 px).
   Grenzt er an einen weissen Abschnitt, uebernimmt dieser den Abstand auf
   seiner Seite und der Kasten verzichtet dort auf seinen - sonst addieren sich
   beide (gemessen vorher: 56 oben, 152 unten). An einem grauen Abschnitt zaehlt
   die Farbkante, dort bleibt der eigene Abstand.
   Wichtig: Der Shortcode darf nicht in ein zusaetzliches <div> gewickelt
   werden, sonst greifen die Nachbar-Regeln nicht. */
.scg-cl-trial { padding: 96px 0; background: #fff; }
.scg-cl-section:not(.scg-cl-bg-soft) + .scg-cl-trial { padding-top: 0; }
.scg-cl-trial + .scg-cl-section:not(.scg-cl-bg-soft) { padding-top: 0; }
.scg-cl-panel {
    background: var(--scg-cl-brand-tint);
    border-radius: var(--scg-cl-radius);
    padding: 40px 48px;
}
.scg-cl-panel h2 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); margin-bottom: .5rem; }
.scg-cl-panel p { color: var(--scg-cl-text); }
.scg-cl-panel .scg-cl-actions { margin-top: 1rem; }
/* Panel nur mit Text auf einer Textseite: so breit wie scg-cl-note (Lesebreite), linksbuendig
   (FR Charte, Owner 2026-11-06: rechts zu viel Luft). */
.scg-cl-panel-measure { max-width: 42em; }
/* Panel in Hellgrau: Information ohne eigene Handlung neben hellblauen Panels
   (FR 10 regles d'or, Point de Contact, Owner 2026-11-06). */
.scg-cl-panel-soft { background: var(--scg-cl-soft); }
@media (max-width: 767px) { .scg-cl-trial { padding: 56px 0; } }
@media (max-width: 575px) { .scg-cl-panel { padding: 28px 24px; } }
.scg-cl-band h2 { color: #fff; }
.scg-cl-band p { color: rgba(255,255,255,.9); }
.scg-cl-band .scg-cl-eyebrow { color: rgba(255,255,255,.85); }

/* ---------- Unterseite: Kopf, Tabelle ---------- */

.scg-cl-page-head { padding: 72px 0 0; }
.scg-cl-page-head .scg-cl-screenshot { margin-bottom: -1px; }

/* Seitenkopf mit Bild (Kindersicherung): Raster mit Bereichen, damit die
   Reihenfolge auf dem Handy eine andere sein kann als am Desktop, ohne doppeltes
   Markup. Desktop: Text links, Bild rechts. Handy: Ueberschrift, Bild,
   Vertrauenszeile, Text - der erste Bildschirm ist sonst reiner Text. */
.scg-cl-split-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "title media"
        "text  media"
        "trust media";
    grid-template-rows: auto auto 1fr;
    column-gap: 30px;
    padding-bottom: 3rem;
}
.scg-cl-split-head-title { grid-area: title; }
.scg-cl-split-head-text  { grid-area: text; }
.scg-cl-split-head-trust { grid-area: trust; align-self: start; }
.scg-cl-split-head-media { grid-area: media; align-self: center; min-width: 0; }
@media (max-width: 991px) {
    .scg-cl-split-head {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "title" "media" "trust" "text";
        grid-template-rows: none;
        padding-bottom: 0;
    }
    .scg-cl-split-head-media { margin: .5rem 0 0; }
    .scg-cl-split-head .scg-cl-product-duo { padding-bottom: 32px; }
    .scg-cl-split-head-trust { margin: 1rem 0 1.75rem; }
}
@media (max-width: 767px) { .scg-cl-page-head { padding-top: 40px; } }

/* Sprungziele (#zeitlimits usw., verlinkt von der Startseite) landen knapp unter dem
   festen Header (76px). Eine Sprungleiste gab es im Entwurf zeitweise; sie ist seit
   2026-11-04 entfernt (Owner: auf Desktop zu unauffaellig, Scrollen und grosse
   Ueberschriften reichen). */
.scg-cl-scope [id] { scroll-margin-top: 90px; }

.scg-cl-note {
    border-left: 2px solid var(--scg-cl-brand);
    padding: .25rem 0 .25rem 1.25rem;
    margin: 1.5rem 0;
    color: var(--scg-cl-ink);
}

/* ---------- Download-Seite (Entwurf preview-2026/download.html) ----------
   Stand 2026-11-04, mit dem Owner Schritt fuer Schritt abgestimmt. Ziel des
   Startseiten-Knopfs "Kostenlos testen": Kopf, drei Schritte, zwei Karten. */

/* Kopf */
.scg-cl-download-head { padding-bottom: 8px; }
.scg-cl-download-head h1 { margin-bottom: .75rem; }
.scg-cl-download-skip { margin-top: 1.5rem; gap: .75rem 1rem; }   /* Knopf "Direkt zum Download" */

/* Drei Schritte: grosse Ziffer, Haarlinie oben wie im Funktionsraster */
.scg-cl-steps {
    list-style: none;
    counter-reset: scg-cl-step;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    margin: 0;
    padding: 0;
}
.scg-cl-steps li {
    counter-increment: scg-cl-step;
    display: block;               /* Site-CSS setzt Listenpunkte sonst als Flex-Zeile */
    border-top: 1px solid var(--scg-cl-line);
    padding: 1.25rem 0 1.1rem;
}
.scg-cl-steps li::before {
    content: counter(scg-cl-step);
    display: block;
    margin-bottom: .75rem;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--scg-cl-brand);
}
.scg-cl-scope .scg-cl-steps h2 { font-size: 1.2rem; line-height: 1.3; margin-bottom: .4rem; }
.scg-cl-scope .scg-cl-steps p { margin-bottom: 0; }

/* Ueberschrift "Download" (Sprungziel) und Roaming-Tipp: linksbuendig wie der Rest
   der Seiten (war zentriert, stand auf dem Handy als zentrierter Absatz da). */
.scg-cl-scope .scg-cl-download-title { margin-bottom: 1rem; }
.scg-cl-download-tip { max-width: 40em; margin: 0 0 2.5rem; }

/* Zwei gleichwertige Karten. Auf dem Handy setzt das Skript .scg-cl-download-mobile:
   Android steht dann zuerst, die Windows-Karte zeigt nur einen Hinweis. */
.scg-cl-download-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: stretch; }
.scg-cl-download-mobile #scg-cl-download-android { order: -1; }

.scg-cl-download-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.5rem 2rem 1.75rem;
    text-align: center;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 30px rgba(15, 23, 42, .07);
    transition: box-shadow .2s, transform .2s;
}
.scg-cl-download-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(15, 23, 42, .06), 0 16px 40px rgba(15, 23, 42, .10);
}
.scg-cl-scope .scg-cl-download-card h2 { font-size: 1.8rem; margin-bottom: .5rem; }

/* Logo im hellblauen Kreis
   (Kreis wie im Entwurf, Owner 2026-11-05 - die zwischenzeitliche eckige Fassung ist zurueckgenommen) */
.scg-cl-download-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    margin-bottom: 1.25rem;
    border-radius: 50%; /* Kreis wie im Entwurf (Owner 2026-11-05, nimmt "Quadrat statt Kreis" zurueck) */
    background: var(--scg-cl-brand-tint);
    color: var(--scg-cl-brand);
    font-size: 3rem;
}

/* Systemzeile und Versionsnummer eng zusammen; Version nur beim Hover als Link */
.scg-cl-scope .scg-cl-download-card .scg-cl-download-requirements { margin: 0; line-height: 1.35; }
.scg-cl-scope .scg-cl-download-card .scg-cl-download-version {
    margin: .15rem 0 1.75rem;
    line-height: 1.35;
    color: var(--scg-cl-muted);
    font-variant-numeric: tabular-nums;
}
.scg-cl-scope .scg-cl-link-quiet { color: inherit; text-decoration: none; }
.scg-cl-scope .scg-cl-link-quiet:hover { color: var(--scg-cl-brand); text-decoration: underline; }

/* Knoepfe untereinander, gleich breit */
.scg-cl-download-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .9rem;
    width: 100%;
    margin-bottom: 1.5rem;
}
.scg-cl-download-actions .scg-cl-btn { min-width: 220px; justify-content: center; gap: .6rem; }
.scg-cl-scope .scg-cl-btn-secondary { background: #fff; border-color: var(--scg-cl-brand); color: var(--scg-cl-brand); }
.scg-cl-scope .scg-cl-btn-secondary:hover { background: var(--scg-cl-brand-tint); color: var(--scg-cl-brand-dark); }

/* Hinweis auf dem Handy statt Windows-Download */
.scg-cl-download-phone-note { text-align: center; margin: .25rem 0 1.5rem; }
.scg-cl-download-phone-note[hidden], .scg-cl-download-actions[hidden] { display: none; }

/* Fusszeile: links "Nur Intel/AMD" mit Info-Symbol (nur Windows), rechts
   "Hilfe Installation". margin-top:auto setzt sie in beiden Karten ganz nach
   unten, daher liegen die Trennlinien gleich hoch. */
.scg-cl-download-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .35rem;
    width: 100%;
    margin-top: auto;
    padding-top: .9rem;
    border-top: 1px solid var(--scg-cl-line);
    font-size: .9rem;
    color: var(--scg-cl-muted);
}
.scg-cl-download-foot > a { margin-left: auto; }
.scg-cl-download-foot .fa-question-circle { margin-right: .3rem; }
.scg-cl-download-cpu { position: relative; display: inline-flex; align-items: center; gap: .35rem; }

/* Info-Symbol mit Hinweisfenster (Hover am Desktop, Antippen am Handy) */
.scg-cl-info-tip {
    position: relative;
    padding: 0;
    border: 0;
    background: none;
    color: var(--scg-cl-muted);
    line-height: 1;
    cursor: pointer;
}
.scg-cl-info-tip:hover, .scg-cl-info-tip:focus { color: var(--scg-cl-brand); }
.scg-cl-info-tip-text {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-30%);
    width: max-content;
    max-width: 240px;
    padding: .55rem .75rem;
    border-radius: 6px;
    background: var(--scg-cl-ink);
    color: #fff;
    font-size: .85rem;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .18);
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s;
    z-index: 10;
}
.scg-cl-info-tip:hover .scg-cl-info-tip-text, .scg-cl-info-tip:focus .scg-cl-info-tip-text { opacity: 1; visibility: visible; }

/* Handy: wenig Weissraum oben, Ziffer neben der Schritt-Ueberschrift,
   Karten untereinander */
@media (max-width: 767px) {
    .scg-cl-download-head { padding-top: 28px; padding-bottom: 0; }
    /* Owner 2026-11-05: oben zu gequetscht - mehr Luft zwischen h1, Text, Knopf und Schritten */
    .scg-cl-download-head + .scg-cl-section-tight { padding-top: 44px; }
    .scg-cl-download-head h1 { margin-bottom: 1rem; }
    .scg-cl-download-skip { margin-top: 1.6rem; }

    .scg-cl-steps { grid-template-columns: 1fr; gap: 1.1rem; }
    .scg-cl-steps li {
        display: grid;
        grid-template-columns: 2rem 1fr;
        column-gap: .6rem;
        padding-top: 1rem;
    }
    .scg-cl-steps li::before { grid-column: 1; grid-row: 1 / span 2; font-size: 1.6rem; margin: 0; }
    .scg-cl-steps li > * { grid-column: 2; }

    .scg-cl-download-grid { grid-template-columns: 1fr; }
    .scg-cl-download-card { padding: 2rem 1.25rem 1.5rem; }
}

/* ---------- Textseiten (Vorlage layouts/_default/scg-cl-text.html) ----------
   FAQ, Infos, Rechtliches, Videos, Kleinseiten. Der Inhalt dieser Seiten ist
   bestehendes Bootstrap-Markup (Zeilen, Spalten, Bilder, .btn) ohne eigene Huelle
   und ohne h1 - die Texte bleiben wortgleich. Die Regeln hier bringen dieses
   Markup auf den neuen Stil, nur innerhalb .scg-cl-prose. */

/* Kopf weiss. Ein hellgraues Kopfband war probiert und verworfen (Owner
   2026-11-05: sieht doof aus, vor allem mit dem grossen weissen Block danach). */
.scg-cl-page-head-text { padding: 48px 0 0; }
.scg-cl-scope .scg-cl-page-head-text h1 { font-size: clamp(2.15rem, 3.7vw, 3.25rem); margin-bottom: 0; } /* 34 / 52px (Owner 2026-11-05: "bischen groesser") */
.scg-cl-page-head-text .scg-cl-lead { margin: .75rem 0 0; }
/* Untertitel (Vorspann subtitle): groesser als die Einleitung, halbfett,
   Owner 2026-11-05 ("Kinder sicher online" war als Einleitung zu klein) */
.scg-cl-scope .scg-cl-page-head-text .scg-cl-subtitle { margin: .5rem 0 0; font-size: clamp(1.4rem, 2.2vw, 1.85rem); line-height: 1.3; font-weight: 500; color: var(--scg-cl-ink); letter-spacing: -.01em; }
.scg-cl-page-body { padding: 32px 0 96px; }
@media (max-width: 767px) {
    .scg-cl-page-head-text { padding-top: 36px; }
    .scg-cl-page-body { padding: 20px 0 56px; }
}

/* Grundschrift wie auf den uebrigen Seiten: 1.1rem, Zeilenhoehe 1.65. Viele
   Altseiten haben Text direkt in <div>s statt in <p>. */
.scg-cl-prose { font-size: 1.1rem; line-height: 1.65; color: var(--scg-cl-text); }
.scg-cl-prose p, .scg-cl-prose li, .scg-cl-prose td, .scg-cl-prose th { font-size: 1.1rem; line-height: 1.65; }
.scg-cl-prose b, .scg-cl-prose strong { color: var(--scg-cl-ink); }

/* Lesebreite: Text, der direkt in der Spalte steht, wird nicht breiter als ~42em.
   Zeilen und Spalten (Bild neben Text) behalten die volle Breite. */
.scg-cl-prose p, .scg-cl-prose > ul, .scg-cl-prose > ol, .scg-cl-prose > h2, .scg-cl-prose > h3,
.scg-cl-prose > div:not([class]) { max-width: 42em; }
.scg-cl-prose-narrow { max-width: 46em; }

.scg-cl-scope .scg-cl-prose h2 { font-size: clamp(1.45rem, 2.2vw, 1.85rem); margin: 2.5rem 0 .75rem; line-height: 1.2; }
.scg-cl-scope .scg-cl-prose h3, .scg-cl-scope .scg-cl-prose .scg-h3 { font-size: 1.2rem; font-weight: 700; margin: 1.75rem 0 .5rem; line-height: 1.3; color: var(--scg-cl-ink); }
.scg-cl-scope .scg-cl-prose h4 { font-size: 1.1rem; margin: 1.5rem 0 .4rem; }
.scg-cl-scope .scg-cl-prose > :first-child, .scg-cl-scope .scg-cl-prose > .row:first-child > [class*="col"] > :first-child { margin-top: 0; }
.scg-cl-prose hr { border: 0; border-top: 1px solid var(--scg-cl-line); margin: 1.5rem 0; }

.scg-cl-prose a:not(.btn):not(.scg-cl-btn):not(.scg-cl-link-arrow) {
    color: var(--scg-cl-brand);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.scg-cl-prose a:not(.btn):not(.scg-cl-btn):not(.scg-cl-link-arrow):hover { color: var(--scg-cl-brand-dark); }

/* Testangebot (sc-cl-trial) innerhalb der Textspalte: kein zweiter Container-
   Innenabstand, Ueberschrift im Stil des Kastens statt der Text-h2. */
.scg-cl-prose .scg-cl-trial { padding: 64px 0 0; background: none; }
.scg-cl-prose .scg-cl-trial > .container { padding: 0; max-width: none; }
.scg-cl-scope .scg-cl-prose .scg-cl-panel h2 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); margin: 0 0 .5rem; }
@media (max-width: 767px) { .scg-cl-prose .scg-cl-trial { padding-top: 48px; } }

/* Screenshot-Galerie (/screenshots/): .scg-gallery bleibt fuer das Lightbox-Skript,
   die alte Flex-Anordnung aus lightbox.css wird hier durch ein Raster 3/2/1 ersetzt.
   Jedes Bild auf einer einheitlichen hellgrauen Flaeche 4:3, Bild mittig mit
   feinem Schatten - so stehen Portal (quer) und Handy (hoch) gleich ruhig. */
.scg-cl-scope .scg-cl-screenshot-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem 1.75rem; margin-top: .5rem; }
.scg-cl-scope .scg-cl-screenshot-gallery > div { width: auto; padding: 0; }
.scg-cl-scope .scg-cl-screenshot-gallery .scg-gallery-img-container {
    height: auto;
    aspect-ratio: 4 / 3;
    margin-bottom: 1.1rem;
    padding: 18px;
    background: var(--scg-cl-soft);
    border-radius: var(--scg-cl-radius);
}
.scg-cl-scope .scg-cl-screenshot-gallery .scg-img-lightbox {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 6px 18px rgba(15, 23, 42, .08);
    cursor: zoom-in;
    transition: transform .15s;
}
.scg-cl-scope .scg-cl-screenshot-gallery .scg-img-lightbox:hover { transform: scale(1.02); }
.scg-cl-scope .scg-cl-prose .scg-cl-screenshot-gallery h2 { font-size: 1.2rem; margin: 0 0 .4rem; line-height: 1.3; }
.scg-cl-scope .scg-cl-prose .scg-cl-screenshot-gallery p { margin: 0; }
@media (max-width: 991px) { .scg-cl-scope .scg-cl-screenshot-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .scg-cl-scope .scg-cl-screenshot-gallery { grid-template-columns: 1fr; gap: 2rem; } }

/* Presseseite (sc-cl-press): Pressespiegel als Liste mit Haarlinien statt
   Karten - soll seriös und belegt wirken, nicht warm wie die Kundenstimmen.
   Links die Marke, rechts Einordnung und hervorgehobenes Zitat. */
.scg-cl-press-list {
    display: grid;
    grid-template-columns: 200px minmax(0, 42em);
    gap: 2.5rem;
    align-items: start;
    padding: 2.25rem 0;
    border-top: 1px solid var(--scg-cl-line);
}
.scg-cl-press-list:last-of-type { border-bottom: 1px solid var(--scg-cl-line); }
.scg-cl-press-mark { padding-top: .35rem; }
.scg-cl-press-mark img { display: block; max-width: 150px; max-height: 50px; width: auto; height: auto; }
.scg-cl-press-name { font-size: 1.35rem; font-weight: 700; line-height: 1.25; color: #4a4a4a; letter-spacing: -.01em; }
.scg-cl-scope .scg-cl-prose .scg-cl-press-list .scg-cl-press-mark a { text-decoration: none; }
.scg-cl-press-body > :last-child { margin-bottom: 0; }
.scg-cl-press-list blockquote {
    margin: 1rem 0 1rem;
    padding-left: 1.25rem;
    border-left: 2px solid var(--scg-cl-brand);
    font-size: 1.25rem;
    line-height: 1.5;
    font-weight: 500;
    color: var(--scg-cl-ink);
}
@media (max-width: 767px) {
    .scg-cl-press-list { grid-template-columns: 1fr; gap: 1rem; padding: 1.75rem 0; }
    .scg-cl-press-mark img { max-width: 140px; max-height: 48px; }
    .scg-cl-press-list blockquote { font-size: 1.15rem; }
}

/* 10 Goldene Regeln: Markup der Shortcodes golden-rule/* bleibt (auch EN/FR im
   alten Design), hier nur innerhalb .scg-cl-scope umgestellt. goldene-regeln.css setzt
   min-height:100vh und max-width:70% - beides aufgehoben. Regeln als Liste mit
   Haarlinie, Nummer im blauen Quadrat (eckig wie die Icons), "Mehr lesen" als
   Textlink, Erlaeuterung klappt hellgrau auf (Skript goldene-regeln.js). */
/* Angebot oben (Broschuere/PDF): Handy ohne Kasten, Cover zentriert unter dem
   Text; Desktop im hellblauen Kasten, Cover klein links neben dem Text. */
.scg-cl-golden-rules-intro-cover { text-align: center; margin-top: 1.75rem; }
.scg-cl-prose .scg-cl-golden-rules-cover { max-width: 160px; width: 70%; height: auto; }
@media (min-width: 992px) {
    .scg-cl-prose .scg-cl-golden-rules-intro {
        display: grid;
        grid-template-columns: 200px minmax(0, 1fr);
        column-gap: 2.5rem;
        align-items: center;
        max-width: 52em; /* = Breite der Regel-Liste, gemeinsame rechte Kante */
        padding: 36px 48px;
        background: var(--scg-cl-brand-tint);
        border-radius: var(--scg-cl-radius);
    }
    .scg-cl-golden-rules-intro-cover { order: -1; margin: 0; }
    /* Das Cover-PNG hat weissen Grund: multiply laesst ihn im Hellblau aufgehen. */
    .scg-cl-prose .scg-cl-golden-rules-cover { width: 100%; max-width: 200px; mix-blend-mode: multiply; }
    /* Kasten und Regel-Liste gleich breit (Owner 2026-11-05: Kasten war zu breit) */
    .scg-cl-golden-rules-intro-text p { max-width: none; }
    .scg-cl-golden-rules-intro-text p:last-child { margin-bottom: 0; }
}
.scg-cl-scope #regeln-wrapper { display: block; min-height: 0; overflow: visible; margin-top: 3rem; }
.scg-cl-scope #regeln-content { min-height: 0; max-width: 52em; }
.scg-cl-scope .regeln-rule {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 1.5rem;
    margin: 0;
    padding: 1.75rem 0;
    border-top: 1px solid var(--scg-cl-line);
}
.scg-cl-scope .regeln-rule:last-child { border-bottom: 1px solid var(--scg-cl-line); }
.scg-cl-scope .regeln-number-container { display: block; margin: 0; }
.scg-cl-scope .regeln-number {
    width: 48px;
    min-width: 0;
    height: 48px;
    border-radius: var(--scg-cl-radius);
    background: var(--scg-cl-brand);
}
.scg-cl-scope .regeln-number span { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.scg-cl-scope .regeln-rule p { font-size: 1.1rem; line-height: 1.65; }
.scg-cl-scope .regeln-spoiler { margin-top: .75rem; }
.scg-cl-scope .regeln-spoiler-trigger { padding: 0; color: var(--scg-cl-brand); font-weight: 600; }
/* Abstand zwischen "Mehr erfahren" und dem aufgeklappten Kasten (Owner 2026-11-05),
   nur im offenen Zustand - goldene-regeln.js setzt data-collapsed="false". */
.scg-cl-scope .regeln-spoiler-container { transition: max-height .5s, margin-top .3s; }
.scg-cl-scope .regeln-spoiler-container[data-collapsed="false"] { margin-top: 1.1rem; }
/* Klick auf den Pfeil ging bisher ins Leere: das Skript sucht vom Klickziel aus
   nach dem Pfeil und bricht ab, wenn das Ziel der Pfeil selbst ist. */
.scg-cl-scope .regeln-spoiler-trigger i { pointer-events: none; }
.scg-cl-scope .regeln-spoiler-container { font-size: 1.1rem; background: var(--scg-cl-soft); border-radius: var(--scg-cl-radius); }
.scg-cl-scope .regeln-spoiler-container > div { padding: 1.25rem 1.5rem; }
.scg-cl-scope .scg-cl-prose .regeln-spoiler-container h3 { margin: 0 0 .5rem; }
.scg-cl-golden-rules-pdf { margin: 2.5rem 0 0; }
@media (max-width: 575px) {
    .scg-cl-scope .regeln-rule { grid-template-columns: 40px minmax(0, 1fr); column-gap: 1rem; padding: 1.4rem 0; }
    .scg-cl-scope .regeln-number { width: 40px; height: 40px; }
    .scg-cl-scope .regeln-number span { font-size: 1.15rem; }
    .scg-cl-scope .regeln-spoiler-container > div { padding: 1rem 1.1rem; }
}

/* Lange Rechtstexte (/rechtliches/): Inhaltsverzeichnis (static/js/scg-cl-toc.js)
   am Desktop als mitlaufende linke Spalte, auf dem Handy aufklappbar unter der
   Einleitung. Text in Lesebreite, Teile A/B/C mit kraeftiger Linie abgesetzt,
   Begriffe (.scg-u, frueher unterstrichen) fett. */
.scg-cl-toc { margin: 1.75rem 0 2.25rem; }
.scg-cl-toc details { border: 1px solid var(--scg-cl-line); border-radius: var(--scg-cl-radius); padding: .9rem 1.1rem; }
.scg-cl-toc summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--scg-cl-ink);
    list-style: none;
}
.scg-cl-toc summary::-webkit-details-marker { display: none; }
.scg-cl-toc summary::after { content: "\25BE"; margin-left: .5rem; color: var(--scg-cl-brand); }
.scg-cl-toc details[open] summary::after { content: "\25B4"; }
.scg-cl-scope .scg-cl-prose .scg-cl-toc ol { list-style: none; margin: .75rem 0 0; padding: 0; }
.scg-cl-scope .scg-cl-prose .scg-cl-toc ol ol { margin: .25rem 0 .75rem; padding-left: .9rem; border-left: 1px solid var(--scg-cl-line); }
.scg-cl-scope .scg-cl-prose .scg-cl-toc li { margin: 0; font-size: 1rem; line-height: 1.4; }
.scg-cl-scope .scg-cl-prose .scg-cl-toc a:not(.btn) {
    display: block;
    padding: .3rem 0;
    color: var(--scg-cl-ink);
    font-weight: 600;
    text-decoration: none;
}
.scg-cl-scope .scg-cl-prose .scg-cl-toc ol ol a:not(.btn) { padding: .22rem 0; color: var(--scg-cl-muted); font-weight: 400; font-size: .95rem; }
.scg-cl-scope .scg-cl-prose .scg-cl-toc a:not(.btn):hover,
.scg-cl-scope .scg-cl-prose .scg-cl-toc a.is-active:not(.btn) { color: var(--scg-cl-brand); }
.scg-cl-scope .scg-cl-prose .scg-cl-toc ol ol a.is-active:not(.btn) { font-weight: 600; }

.scg-cl-legal-part { margin-top: 3.5rem; padding-top: 1.75rem; border-top: 2px solid var(--scg-cl-ink); }
.scg-cl-scope .scg-cl-prose .scg-cl-legal-part > h2:first-child { margin-top: 0; }
.scg-cl-scope .scg-cl-prose .scg-cl-legal-part h3 { margin-top: 2.25rem; }
.scg-cl-legal .scg-u { font-weight: 700; color: var(--scg-cl-ink); text-decoration: none; }

@media (min-width: 992px) {
    .scg-cl-legal {
        display: grid;
        grid-template-columns: 250px minmax(0, 44em);
        column-gap: 4rem;
        align-items: start;
    }
    .scg-cl-legal > * { grid-column: 2; }
    .scg-cl-legal > .scg-cl-toc {
        grid-column: 1;
        grid-row: 1 / span 4;
        position: sticky;
        top: 100px;
        max-height: calc(100vh - 124px);
        overflow-y: auto;
        margin: 0;
        padding-right: .5rem;
    }
    /* Am Desktop immer offen, keine Klappfunktion, kein Rahmen */
    .scg-cl-toc details { border: 0; padding: 0; }
    .scg-cl-toc summary {
        pointer-events: none;
        font-size: .75rem;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--scg-cl-muted);
    }
    .scg-cl-toc summary::after, .scg-cl-toc details[open] summary::after { content: none; }
    .scg-cl-legal-intro p { margin-bottom: 0; }
    .scg-cl-legal-part:first-of-type { margin-top: 2.5rem; }
}

/* Faktenbloecke (Impressum: Anschrift, Kontakt, Register): Haarlinie oben,
   kleines Versal-Label - als Daten lesbar, nicht als Fliesstext. 3 / 1 Spalten.
   Ein hellblauer Kasten darum war probiert und verworfen (Owner 2026-11-05). */
.scg-cl-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem 2.5rem;
    margin: 3.5rem 0 3rem;
}
.scg-cl-facts > div { padding-top: 1.1rem; border-top: 1px solid var(--scg-cl-line); }
.scg-cl-fact-label {
    margin-bottom: .5rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--scg-cl-muted);
}
.scg-cl-prose > .scg-cl-fact-label { max-width: none; }
@media (max-width: 767px) { .scg-cl-facts { grid-template-columns: 1fr; margin: 2.5rem 0 2.25rem; } }

/* Foto ohne Rahmen, nur kleine Ecken (z.B. Reutlingen im Impressum) */
.scg-cl-photo-plain { display: block; width: 100%; height: auto; border-radius: var(--scg-cl-radius); }
@media (max-width: 991px) { .scg-cl-photo-plain { max-width: 400px; } }

/* Kundenstimmen-Seite: Karten (.scg-cl-review, siehe unten) auf weissem Grund,
   3 / 2 / 1 Spalten (Owner 2026-11-05: dreispaltig besser als zwei). Zitat in
   normaler Textgroesse (Fliesstext nicht verkleinern), Figur klein im Fuss
   neben dem Namen. */
.scg-cl-reviews.scg-cl-reviews-page { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: .5rem; }
.scg-cl-reviews-page .scg-cl-stars { font-size: 1.15rem; }
.scg-cl-reviews-page .scg-cl-review { padding: 1.75rem 1.75rem 1.5rem; }
.scg-cl-scope .scg-cl-prose .scg-cl-reviews-page blockquote { font-size: 1.1rem; line-height: 1.65; max-width: none; }
.scg-cl-reviews-page figcaption {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--scg-cl-line);
}
.scg-cl-reviews-page figcaption img { width: 48px; height: 48px; object-fit: contain; }
@media (max-width: 991px) { .scg-cl-reviews.scg-cl-reviews-page { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
    .scg-cl-reviews.scg-cl-reviews-page { grid-template-columns: 1fr; gap: 1.25rem; }
    .scg-cl-reviews-page .scg-cl-review { padding: 1.5rem 1.25rem 1.25rem; }
}

.scg-cl-prose ul, .scg-cl-prose ol { padding-left: 1.25rem; }
.scg-cl-prose li { margin-bottom: .35rem; }

/* Bilder und Medien nie breiter als ihre Spalte */
.scg-cl-prose img, .scg-cl-prose video, .scg-cl-prose iframe { max-width: 100%; }
.scg-cl-prose img { height: auto; }
/* Illustration im Lesetext einer Textseite (FR Charte): sonst gewinnt max-width:100% oben;
   linksbuendig wie alles auf Textseiten (Styleguide 2.6). */
.scg-cl-page-body .scg-cl-prose img.scg-cl-illustration { max-width: 360px; margin-left: 0; }
@media (max-width: 991px) { .scg-cl-page-body .scg-cl-prose img.scg-cl-illustration-sm { max-width: 200px; } }
.scg-cl-prose video { height: auto; display: block; border-radius: var(--scg-cl-radius); background: #000; }

/* Bootstrap-Knoepfe im neuen Stil: keine Versalien, kleine Radien, Markenblau
   fuer Hauptaktionen (auch die frueheren gruenen), alles andere als Zweitknopf. */
.scg-cl-scope .scg-cl-prose .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .8rem 1.4rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-transform: none !important; /* gegen Bootstraps .text-uppercase (mit !important) */
    border-radius: var(--scg-cl-radius);
    box-shadow: none;
}
.scg-cl-scope .scg-cl-prose .btn-primary, .scg-cl-scope .scg-cl-prose .btn-success {
    background: var(--scg-cl-brand); border-color: var(--scg-cl-brand); color: #fff;
}
.scg-cl-scope .scg-cl-prose .btn-primary:hover, .scg-cl-scope .scg-cl-prose .btn-success:hover {
    background: var(--scg-cl-brand-dark); border-color: var(--scg-cl-brand-dark); color: #fff;
}
.scg-cl-scope .scg-cl-prose .btn-warning, .scg-cl-scope .scg-cl-prose .btn-secondary,
.scg-cl-scope .scg-cl-prose [class*="btn-outline"] {
    background: #fff; border-color: var(--scg-cl-brand); color: var(--scg-cl-brand);
}
.scg-cl-scope .scg-cl-prose .btn-warning:hover, .scg-cl-scope .scg-cl-prose .btn-secondary:hover,
.scg-cl-scope .scg-cl-prose [class*="btn-outline"]:hover {
    background: var(--scg-cl-brand-tint); color: var(--scg-cl-brand-dark);
}

/* Screenshot-Reihe (2-4 Bilder nebeneinander, Handy: 2) */
.scg-cl-figure-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.scg-cl-figure-row img { width: 100%; border: 1px solid var(--scg-cl-line); border-radius: var(--scg-cl-radius); }

/* Kachelraster (z.B. Videouebersicht): 3 / 2 / 1 Spalten */
.scg-cl-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 1.75rem; margin: 1.25rem 0 0; }
.scg-cl-tile { display: flex; flex-direction: column; }
.scg-cl-scope .scg-cl-prose .scg-cl-tile h3 { margin: 0 0 .6rem; }
.scg-cl-tile img, .scg-cl-tile video { width: 100%; border: 1px solid var(--scg-cl-line); border-radius: var(--scg-cl-radius); }
.scg-cl-tile p { margin: .6rem 0 0; }
@media (max-width: 991px) { .scg-cl-tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px) { .scg-cl-tiles { grid-template-columns: 1fr; } }

/* Kapitel (z.B. Videoseite): ab Tablet-Breite im hellblauen Kasten, die Kacheln
   darin als weisse Karten. Auf dem Handy ohne Kasten, dort wirkt Weiss ruhiger.
   Hellblau war bis dahin dem Testangebot vorbehalten; fuer Kapitelkaesten vom
   Owner bewusst geoeffnet (2026-11-05, Varianten A/B/C verglichen, B gewaehlt). */
@media (min-width: 768px) {
    .scg-cl-chapter {
        background: var(--scg-cl-brand-tint);
        border-radius: var(--scg-cl-radius);
        padding: 40px 48px 48px;
        margin-top: 2.5rem;
    }
    .scg-cl-scope .scg-cl-prose .scg-cl-chapter > h2 { margin-top: 0; }
    .scg-cl-chapter .scg-cl-tile { background: #fff; border-radius: var(--scg-cl-radius); padding: 1.25rem 1.25rem 1rem; }
    .scg-cl-chapter .scg-cl-tile img, .scg-cl-chapter .scg-cl-tile video { border: 0; }
}

/* ---------- Bestellseite (Entwurf preview-2026/order.html) ----------
   Gleiche Bausteine wie die Download-Seite: Karten mit Schatten, Markenblau
   fuer alle Hauptaktionen (keine gruenen Knoepfe mehr, Owner 2026-11-04). */

.scg-cl-scope .scg-cl-btn-block { display: flex; width: 100%; justify-content: center; }

/* Auswahlfelder (Laufzeit, Waehrung, Geraeteanzahl) */
.scg-cl-scope .scg-cl-select {
    position: relative;
    min-width: 160px;
    padding: .65rem 2.25rem .65rem .9rem;
    border: 1px solid var(--scg-cl-line);
    border-radius: 6px;
    background: #fff;
    color: var(--scg-cl-ink);
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.scg-cl-scope .scg-cl-select:hover, .scg-cl-scope .scg-cl-select:focus { border-color: var(--scg-cl-brand); background: #fff; color: var(--scg-cl-ink); }
.scg-cl-scope .dropdown-toggle.scg-cl-select::after { position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); }
.scg-cl-scope .cur-flag-icon { width: 22px; height: auto; margin-right: 8px; vertical-align: middle; border: 1px solid rgba(0,0,0,.1); }
.scg-cl-scope .dropdown-menu { min-width: 160px; border-color: var(--scg-cl-line); border-radius: 6px; box-shadow: 0 10px 30px rgba(15, 23, 42, .10); }
.scg-cl-scope .dropdown-item { display: flex; align-items: center; padding: .5rem .9rem; }
.scg-cl-scope .dropdown-item:active { background: var(--scg-cl-brand); }

.scg-cl-price-switch { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }

/* Preiskarten */
.scg-cl-price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; }
.scg-cl-price-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.5rem 2rem 1.25rem;
    text-align: center;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 30px rgba(15, 23, 42, .07);
}
.scg-cl-scope .scg-cl-price-card h2 { font-size: 1.6rem; margin-bottom: 1rem; }
/* Keine "Most Popular"/"Beliebteste"-Markierung (Owner 2026-11-05, alle Sprachen) */

.scg-cl-price-features { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.scg-cl-price-features li { display: block; padding: .15rem 0; color: var(--scg-cl-text); }
.scg-cl-price-features li::before { content: "\2713"; margin-right: .5rem; color: var(--scg-cl-brand); font-weight: 700; }
.scg-cl-price-amount {
    margin: auto 0 1.25rem;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    color: var(--scg-cl-ink);
    font-variant-numeric: tabular-nums;
}
.scg-cl-price-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    margin-top: 1.25rem;
    padding-top: .9rem;
    border-top: 1px solid var(--scg-cl-line);
    font-size: .9rem;
    color: var(--scg-cl-muted);
}
.scg-cl-price-foot img { width: 22px; height: auto; }
.scg-cl-scope .scg-cl-price-foot a { text-decoration: underline; }

/* Mehrgeraete-Rechner */
.scg-cl-calculator {
    margin-top: 2rem;
    padding: 1.75rem 2rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 30px rgba(15, 23, 42, .07);
}
.scg-cl-scope .scg-cl-calculator h2 { font-size: 1.4rem; margin-bottom: 1.25rem; }
.scg-cl-calculator-row { display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center; gap: 1.5rem; }
.scg-cl-calculator-label { font-size: 1.2rem; font-weight: 600; color: var(--scg-cl-ink); line-height: 1.2; }
.scg-cl-calculator-period { margin-top: .2rem; font-size: .95rem; font-weight: 400; color: var(--scg-cl-muted); }
.scg-cl-scope .scg-cl-calculator-qty { min-width: 120px; font-size: 1.15rem; }
.scg-cl-calculator-price { text-align: center; font-size: 1.8rem; font-weight: 700; color: var(--scg-cl-ink); font-variant-numeric: tabular-nums; }

/* Zahlungsarten */
.scg-cl-payment { margin-top: 2rem; text-align: center; color: var(--scg-cl-muted); }
.scg-cl-payment-icons { margin-top: .25rem; font-size: 2.4rem; line-height: 1; color: #8a94a6; }
.scg-cl-payment-icons i { margin: 0 .3rem; }

/* Kundenstimmen */
.scg-cl-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 1.5rem; }
.scg-cl-review {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 1.75rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 30px rgba(15, 23, 42, .07);
}
.scg-cl-stars { margin-bottom: .75rem; color: #f5b301; letter-spacing: .1em; }
.scg-cl-review blockquote { margin: 0 0 1rem; font-size: 1.05rem; line-height: 1.6; color: var(--scg-cl-text); }
.scg-cl-review figcaption { margin-top: auto; font-weight: 600; color: var(--scg-cl-ink); }

.scg-cl-guarantee-seal { width: 160px; height: auto; }

@media (max-width: 991px) {
    .scg-cl-price-grid, .scg-cl-reviews { grid-template-columns: 1fr; }
    .scg-cl-price-grid { gap: 2rem; }
    .scg-cl-calculator-row { grid-template-columns: 1fr 1fr; }
    .scg-cl-calculator-price { text-align: left; }
    .scg-cl-calculator-row .scg-cl-btn { justify-content: center; }
}
@media (max-width: 575px) {
    .scg-cl-price-switch .scg-cl-select { min-width: 0; }
    .scg-cl-calculator { padding: 1.5rem 1.25rem; }
    .scg-cl-calculator-row { grid-template-columns: 1fr auto; gap: 1rem; }
    .scg-cl-calculator-price, .scg-cl-calculator-row .scg-cl-btn { grid-column: 1 / -1; }
}

/* Superheld steht mittig direkt auf dem Footer (Bestaetigungsseiten wie
   /portal/verify-success/). Der untere Abstand der Textseite entfaellt dafuer. */
.scg-cl-hero-foot { text-align: center; line-height: 0; }
.scg-cl-prose .scg-cl-hero-foot img { width: 100%; max-width: 420px; height: auto; }
.scg-cl-page-body:has(.scg-cl-hero-foot) { padding-bottom: 0; }
@media (max-width: 767px) { .scg-cl-prose .scg-cl-hero-foot img { max-width: 280px; } }
/* Bei kurzen Seiten ist das Fenster hoeher als der Inhalt; .content fuellt die
   Hoehe (Grid in custom.css), der Inhalt darin aber nicht - dann stuende der
   Superheld nicht auf dem Footer. Deshalb die Kette bis zum Bild als Flex-Spalte,
   das Bild mit margin-top:auto ganz nach unten. */
.content:has(.scg-cl-hero-foot) { display: flex; flex-direction: column; }
.content:has(.scg-cl-hero-foot) > .scg-cl-scope,
.scg-cl-scope:has(.scg-cl-hero-foot) .scg-cl-page-body,
.scg-cl-scope:has(.scg-cl-hero-foot) .scg-cl-page-body > .container,
.scg-cl-scope:has(.scg-cl-hero-foot) .scg-cl-prose { display: flex; flex-direction: column; flex: 1 0 auto; }
.scg-cl-scope:has(.scg-cl-hero-foot) .scg-cl-hero-foot { margin-top: auto; padding-top: 3rem; }
/* In der Flex-Spalte sonst auf volle Breite gezogen (Knopf "Zum Web Portal") */
.scg-cl-scope:has(.scg-cl-hero-foot) .scg-cl-prose > :not(.scg-cl-hero-foot) { align-self: flex-start; }
@media (min-width: 768px) { .scg-cl-scope:has(.scg-cl-hero-foot) .scg-cl-hero-foot { padding-top: 1rem; } }

/* ---------- Formulare (Kontakt, Newsletter, Widerruf usw.) ----------
   Bootstrap-Felder innerhalb .scg-cl-prose im neuen Stil: 1px-Rahmen, Ecken 4px,
   Schrift 1.1rem, blauer Fokusrahmen. IDs und Skripte der Formulare bleiben. */
.scg-cl-scope .scg-cl-prose .form-control {
    height: auto;
    padding: .7rem .9rem;
    font-size: 1.1rem;
    line-height: 1.4;
    color: var(--scg-cl-ink);
    background-color: #fff;
    border: 1px solid #c9d1dc;
    border-radius: var(--scg-cl-radius);
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
}
.scg-cl-scope .scg-cl-prose .form-control::placeholder { color: var(--scg-cl-muted); opacity: 1; }
.scg-cl-scope .scg-cl-prose .form-control:focus {
    border-color: var(--scg-cl-brand);
    box-shadow: 0 0 0 3px rgba(31, 117, 203, .18);
    outline: 0;
}
.scg-cl-scope .scg-cl-prose select.form-control { cursor: pointer; }
.scg-cl-scope .scg-cl-prose textarea.form-control { min-height: 9rem; resize: vertical; }
.scg-cl-scope .scg-cl-prose .scg-note-error { border-radius: var(--scg-cl-radius); }

/* Zwischenueberschrift, die am Desktop als Untertitel direkt unter der h1 steht
   (Broschueren anfordern). Hebt den Abstand der Textspalte auf (32px) und
   uebernimmt Groesse und Gewicht von .scg-cl-subtitle. Auf dem Handy normale h2. */
.scg-cl-scope .scg-cl-prose .scg-cl-subtitle-lg { margin-top: 0; } /* Handy: direkt unter dem Bild */
@media (min-width: 992px) {
    /* Selektor so spezifisch wie die margin-top:0-Regel fuer das erste Element
       der ersten Spalte (".scg-cl-prose > .row:first-child > [class*=col] > :first-child"),
       sonst greift der negative Abstand nicht. Ergebnis: .5rem unter der h1 wie
       bei .scg-cl-subtitle. */
    .scg-cl-scope .scg-cl-prose > .row:first-child > [class*="col"] > .scg-cl-subtitle-lg:first-child,
    .scg-cl-scope .scg-cl-prose .scg-cl-subtitle-lg {
        margin: calc(.5rem - 32px) 0 2.5rem;
        font-size: clamp(1.4rem, 2.2vw, 1.85rem);
        line-height: 1.3;
        font-weight: 500;
        letter-spacing: -.01em;
        color: var(--scg-cl-ink);
    }
    .scg-cl-scope .scg-cl-prose .scg-cl-subtitle-lg br { display: none; } /* Desktop: eine Zeile */
}

/* Weicher Schatten fuer freigestellte Grafiken (Broschueren-Cover). drop-shadow
   statt box-shadow: folgt der Kontur, nicht dem Bildrechteck. Werte wie die
   Karten (Kundenstimmen, Download). */
.scg-cl-img-shadow { filter: drop-shadow(0 1px 2px rgba(15, 23, 42, .08)) drop-shadow(0 10px 22px rgba(15, 23, 42, .14)); }

/* Zwei gleichrangige Knoepfe nebeneinander (Newsletter: deaktivieren / aktivieren),
   auf dem Handy untereinander in voller Breite. */
.scg-cl-form-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }
@media (max-width: 575px) { .scg-cl-scope .scg-cl-prose .scg-cl-form-actions .btn { flex: 1 1 100%; } }

/* Auswahlliste mit Radio-Knoepfen (Deinstallations-Umfrage): jede Antwort eine
   Zeile mit Haarlinie, ganze Zeile klickbar, gewaehlte Zeile hellblau.
   Kompakt (Owner 2026-11-05: Abstaende waren zu gross, Liste zu lang). */
.scg-cl-choices { border-top: 1px solid var(--scg-cl-line); }
.scg-cl-scope .scg-cl-prose .scg-cl-choices label {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    margin: 0;
    padding: .45rem .6rem;
    line-height: 1.45;
    border-bottom: 1px solid var(--scg-cl-line);
    cursor: pointer;
    font-weight: 400;
}
.scg-cl-choices label:hover { background: #f6f9fd; }
.scg-cl-choices label:has(input:checked) { background: var(--scg-cl-brand-tint); }
/* Grafik neben der Umfrage: groesser als frueher (70 % von col-lg-4), Original 259 px */
.scg-cl-survey-img { width: 70%; max-width: 380px; }
@media (min-width: 992px) { .scg-cl-survey-img { width: 85%; } }

.scg-cl-choices input[type="radio"] {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: .2rem;
    accent-color: var(--scg-cl-brand);
}

/* ---------- Partnerprogramm (content/de/digistore/partnerprogramm.html) ----------
   Urspruenglich von Remi im eigenen Stil gebaut (scg-aff-* in custom.css, gilt
   weiter fuer EN/FR). DE auf die Bausteine der Startseite umgestellt (2026-11-05). */

/* Blauer Kopf ohne transparente Kopfzeile: weniger Abstand oben als die Startseite */
.scg-cl-hero.scg-cl-hero-sub { padding-top: 104px; }
/* Owner 2026-11-05: Kopf am Desktop zu dicht - mehr Luft zwischen h1, Text, Knoepfen und Hinweis */
@media (min-width: 992px) {
    .scg-cl-scope .scg-cl-hero-sub h1 { line-height: 1.12; margin-bottom: 1.75rem; }
    .scg-cl-hero-sub .scg-cl-actions { margin-top: 2.5rem; }
    .scg-cl-hero-sub .scg-cl-small { margin-top: 1.25rem !important; }
}
.scg-cl-affiliate-hero-col { padding-bottom: 96px; }
.scg-cl-affiliate-hero-img { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; }
@media (max-width: 991px) {
    .scg-cl-hero.scg-cl-hero-sub { padding-top: 48px; }
    .scg-cl-affiliate-hero-col { padding-bottom: 56px; }
    .scg-cl-affiliate-hero-img { max-width: 380px; }
}

/* Drei Kennzahlen als Karten mit weichem Schatten (wie Download/Kundenstimmen) */
.scg-cl-affiliate-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; margin-top: 2.5rem; }
.scg-cl-affiliate-card {
    padding: 2rem 1.75rem 1.5rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 30px rgba(15, 23, 42, .07);
}
.scg-cl-affiliate-stat {
    margin-bottom: .75rem;
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--scg-cl-brand);
    white-space: nowrap;
}
.scg-cl-affiliate-card p { margin-bottom: 0; }
@media (max-width: 991px) { .scg-cl-affiliate-stats { grid-template-columns: 1fr; max-width: 520px; } }

.scg-cl-affiliate-how p { margin-bottom: 1.1rem; }
.scg-cl-affiliate-how strong { color: var(--scg-cl-ink); }

/* Konditionen: Daten, daher Haarlinien statt Kasten (wie Impressum) */
.scg-cl-affiliate-terms { display: grid; grid-template-columns: auto 1fr; margin: 1.5rem 0 0; border-top: 1px solid var(--scg-cl-line); }
.scg-cl-affiliate-terms dt, .scg-cl-affiliate-terms dd { margin: 0; padding: .8rem 0; font-size: 1.1rem; line-height: 1.5; border-bottom: 1px solid var(--scg-cl-line); }
.scg-cl-affiliate-terms dt { padding-right: 1.75rem; font-weight: 600; color: var(--scg-cl-ink); }
.scg-cl-affiliate-terms dd { text-align: right; color: var(--scg-cl-text); }

/* Bewerbung: weisse Karte auf Grau */
.scg-cl-affiliate-form-wrap { max-width: 760px; margin: 0 auto; }
.scg-cl-affiliate-form {
    padding: 2.5rem 2.5rem 2rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 30px rgba(15, 23, 42, .07);
}
@media (max-width: 575px) { .scg-cl-affiliate-form { padding: 1.75rem 1.25rem 1.5rem; } }
.scg-cl-scope .scg-cl-affiliate-legend {
    margin-bottom: 1rem;
    padding-bottom: .6rem;
    font-size: 1.2rem;
    border-bottom: 1px solid var(--scg-cl-line);
}
/* Pflichtfeld-Sternchen; scg-cl-req allgemein fuer Formulare (FR Charte, 2026-11-06) */
.scg-cl-affiliate-requirements, .scg-cl-req { color: #d0343f; }
.scg-cl-affiliate-form label { font-size: 1rem; font-weight: 600; color: var(--scg-cl-ink); margin-bottom: .35rem; }
.scg-cl-affiliate-form .custom-control-label { font-weight: 400; color: var(--scg-cl-text); line-height: 1.5; }
.scg-cl-affiliate-form .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--scg-cl-brand); border-color: var(--scg-cl-brand); }
.scg-cl-scope .scg-cl-affiliate-form .form-control {
    height: auto;
    padding: .7rem .9rem;
    font-size: 1.1rem;
    line-height: 1.4;
    color: var(--scg-cl-ink);
    border: 1px solid #c9d1dc;
    border-radius: var(--scg-cl-radius);
    box-shadow: none;
}
.scg-cl-scope .scg-cl-affiliate-form .form-control::placeholder { color: var(--scg-cl-muted); opacity: 1; }
.scg-cl-scope .scg-cl-affiliate-form .form-control:focus { border-color: var(--scg-cl-brand); box-shadow: 0 0 0 3px rgba(31, 117, 203, .18); }
.scg-cl-scope .scg-cl-affiliate-form .form-control.is-invalid { border-color: #d0343f; }
/* Box "hoehere Provision" und Erfolgsmeldung: hellblau statt grau */
.scg-cl-affiliate-box { margin-top: 1rem; padding: 1.25rem; background: var(--scg-cl-brand-tint); border-radius: var(--scg-cl-radius); }
.scg-cl-affiliate-form-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--scg-cl-line);
}
.scg-cl-affiliate-form-foot .scg-cl-btn { border: 0; cursor: pointer; }
@media (min-width: 992px) { .scg-cl-affiliate-how { padding-right: 2.5rem; } }
/* Partnerprogramm, Handy: beide Kopf-Knoepfe gleich breit (volle Breite, untereinander) */
@media (max-width: 575px) {
    .scg-cl-hero-sub .scg-cl-actions { gap: .75rem; }
    .scg-cl-hero-sub .scg-cl-actions .scg-cl-btn { flex: 1 1 100%; justify-content: center; }
}
/* Fehlerseite (portal/failure): rotes Symbol statt error.png mit grauem Bildgrund */
.scg-cl-error-icon { font-size: 9rem; line-height: 1; color: #d0343f; }
@media (max-width: 991px) { .scg-cl-error-icon { font-size: 5rem; } }

/* ---------- Bestellen DE (content/de/bestellen/_index.html) ----------
   Preiskarten und Rechner wie der EN-Entwurf. DE hat zwei Knoepfe pro Karte
   (Bestellen, Bei Amazon); die 5-Geraete-Karte hat kein Amazon-Angebot, ein
   Platzhalter in Knopfhoehe haelt die "Bestellen"-Knoepfe auf einer Linie. */
.scg-cl-price-card .scg-cl-btn-block { width: 100%; justify-content: center; }
.scg-cl-price-no-button { visibility: hidden; }
@media (max-width: 991px) { .scg-cl-price-no-button { display: none; } }

/* Rechner DE wie EN-Entwurf in einer Zeile: Geraete [Stepper]  Laufzeit [Auswahl]  Preis  Knopf.
   Handy: Felder zweispaltig, Preis und Knopf darunter in voller Breite. */
.scg-cl-calculator-de { display: grid; grid-template-columns: auto auto auto auto 1fr auto; align-items: center; gap: 1rem 1.25rem; }
.scg-cl-calculator-de .scg-cl-calculator-label { margin: 0; }
.scg-cl-calculator-de label.scg-cl-calculator-label { margin-left: 1rem; }
.scg-cl-scope .scg-cl-calculator-term { min-width: 150px; height: 3rem; font-size: 1.1rem; cursor: pointer; }
.scg-cl-calculator-de .scg-cl-calculator-price { text-align: right; }
.scg-cl-calculator-de > .scg-cl-btn { height: 3rem; border: 0; cursor: pointer; }
@media (max-width: 767px) {
    .scg-cl-calculator-de { grid-template-columns: auto 1fr; gap: .9rem 1rem; }
    .scg-cl-calculator-de label.scg-cl-calculator-label { margin-left: 0; }
    .scg-cl-calculator-de .scg-cl-stepper, .scg-cl-calculator-de .scg-cl-calculator-term { justify-self: start; }
    .scg-cl-calculator-de .scg-cl-calculator-price { grid-column: 1 / -1; text-align: left; }
    .scg-cl-calculator-de > .scg-cl-btn { grid-column: 1 / -1; justify-content: center; }
}
/* Stepper (Plus/Minus) im neuen Stil; Markup und Skript wie bisher */
.scg-cl-scope .scg-cl-stepper { display: inline-flex; height: 3rem; padding: 0; border: 1px solid #c9d1dc; border-radius: var(--scg-cl-radius); background: #fff; overflow: hidden; }
.scg-cl-scope .scg-cl-stepper input { width: 4.5rem; height: 100%; border: 0; border-left: 1px solid var(--scg-cl-line); border-right: 1px solid var(--scg-cl-line); font-size: 1.2rem; font-weight: 600; text-align: center; color: var(--scg-cl-ink); -moz-appearance: textfield; }
.scg-cl-scope .scg-cl-stepper input::-webkit-outer-spin-button, .scg-cl-scope .scg-cl-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.scg-cl-scope .scg-cl-stepper button { width: 2.75rem; height: 100%; padding: 0 !important; border: 0; background: #fff; color: var(--scg-cl-brand); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.scg-cl-scope .scg-cl-stepper button:hover { background: var(--scg-cl-brand-tint); }

/* Details: Einkaufskorb nicht zu klein, auf dem Handy begrenzt */
.scg-cl-illustration-order { width: 100%; max-width: 300px; height: auto; }
@media (max-width: 991px) { .scg-cl-illustration-order { max-width: 200px; } }
/* Karten auf Weiss (Bestellen DE): Schatten kraeftiger, sonst verschwinden sie
   (Owner 2026-11-05). Dazu ein schmaler Rand in Haarlinienfarbe. */
.scg-cl-cards-on-white .scg-cl-price-card,
.scg-cl-cards-on-white .scg-cl-calculator {
    border: 1px solid var(--scg-cl-line); /* schmaler Rand (Owner 2026-11-05) */
    box-shadow: 0 2px 4px rgba(15, 23, 42, .06), 0 14px 36px rgba(15, 23, 42, .12);
}
/* Bestellen DE: mehr Abstand zwischen "Kundenstimmen" und den Karten (Owner 2026-11-05),
   Desktop 2rem, Handy/Tablet 1.5rem */
.scg-cl-section > .container > h2 + .scg-cl-reviews.scg-cl-reviews-page { margin-top: 1.5rem; }
@media (min-width: 992px) { .scg-cl-section > .container > h2 + .scg-cl-reviews.scg-cl-reviews-page { margin-top: 2rem; } }
/* Etwas groessere Unterzeile unter der h1 (Bestellen DE, Owner 2026-11-05) */
.scg-cl-scope .scg-cl-lead.scg-cl-lead-lg { font-size: clamp(1.3rem, 1.8vw, 1.5rem); line-height: 1.4; }
/* Bestellen DE: weniger Abstand zwischen Kopf und Karten am Desktop (Owner 2026-11-05) */
@media (min-width: 768px) { .scg-cl-download-head + .scg-cl-cards-on-white { padding-top: 36px; } }
/* h1, die auf dem Handy (360 px) in eine Zeile passen soll (Bestellen DE) */
@media (max-width: 575px) {
    .scg-cl-scope h1.scg-cl-h1-compact { font-size: 2.15rem; }  /* Owner 2026-11-05: etwas groesser, muss bei 360 px einzeilig bleiben */
    .scg-cl-scope .scg-cl-lead.scg-cl-lead-lg { font-size: 1.4rem; }
}
/* ... und dicht an der Unterzeile (Owner 2026-11-05: Abstand h1 zu Unterzeile zu gross) */
@media (max-width: 767px) { .scg-cl-scope .scg-cl-download-head h1.scg-cl-h1-compact { margin-bottom: .35rem; } }
/* Lizenz verlaengern (/bestellen/upgrade/): Feldbeschriftungen, Hilfetext darunter. */
.scg-cl-scope .scg-cl-prose .scg-cl-upgrade-label { display: block; margin: 1.75rem 0 .6rem; font-size: 1.2rem; font-weight: 700; color: var(--scg-cl-ink); }
/* Hilfetext direkt unter einem Feld (statt Info-Popup) */
.scg-cl-scope .scg-cl-prose .scg-cl-field-help { margin-top: .5rem; font-size: .95rem; line-height: 1.5; color: var(--scg-cl-muted); }
/* Rueckmeldeseiten (verify-success, agree-success): am Desktop steht der Superheld
   rechts neben dem Text auf dem Footer statt mittig darunter (Owner 2026-11-05:
   sonst fast nur Weiss). Text oben links, Figur unten rechts; Handy unveraendert. */
@media (min-width: 992px) {
    .scg-cl-scope:has(.scg-cl-hero-foot-right) .scg-cl-prose {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 3rem;
    }
    .scg-cl-scope:has(.scg-cl-hero-foot-right) .scg-cl-feedback-text { grid-column: 1; grid-row: 1; align-self: start; }
    .scg-cl-scope:has(.scg-cl-hero-foot-right) .scg-cl-hero-foot-right { grid-column: 2; grid-row: 1; align-self: end; padding-top: 2rem; }
    .scg-cl-prose .scg-cl-hero-foot-right img { max-width: 460px; }
}
/* Lizenz verlaengern: "Weiter" / "Zum Angebot" rechtsbuendig unter dem Feld und breiter
   (Owner 2026-11-05), auf dem Handy volle Breite */
.scg-cl-upgrade-actions { text-align: right; }
.scg-cl-scope .scg-cl-prose .scg-cl-upgrade-actions .btn { min-width: 220px; }
@media (max-width: 575px) { .scg-cl-scope .scg-cl-prose .scg-cl-upgrade-actions .btn { width: 100%; } }
/* Download, Schritt 1: Zweitknopf zu den Karten (Owner 2026-11-05) */
.scg-cl-scope .scg-cl-step-btn { margin-top: 1rem; justify-self: start; }
/* gleich breit wie "Direkt zum Download" im Kopf (Owner 2026-11-05) */
.scg-cl-scope .scg-cl-download-skip .scg-cl-btn, .scg-cl-scope .scg-cl-step-btn { min-width: 13rem; justify-content: center; }
/* Shop-Huelle (/bestellen/shop/): Bestell-App auf Weiss, kein grauer Kasten (Owner 2026-11-05) */
.scg-cl-shop-frame { padding: 24px 0 48px; }
.scg-cl-shop-frame iframe { display: block; border: 0; }
/* Widerrufsbelehrung: Anschrift und Muster-Formular mit Haarlinie links abgesetzt
   (Daten, kein Kasten - wie Impressum) */
.scg-cl-prose .scg-cl-legal-address { padding-left: 1rem; border-left: 2px solid var(--scg-cl-line); }
.scg-cl-legal-form { margin-top: 1.5rem; padding: .25rem 0 .25rem 1rem; border-left: 2px solid var(--scg-cl-line); }
.scg-cl-prose .scg-cl-legal-form p { margin-bottom: .75rem; }

/* ---------- Web Portal Login (sc-login-portal, DE mit scg-cl-text) ----------
   Owner 2026-11-05: Grafiken daneben waren "wuselig" -> ohne Bilder, Karte mittig.
   Ganz schlicht war zu "plain" -> Flaeche hinter Kopf und Karte einfarbig Hellgrau
   (--scg-cl-soft), Karte weiss ohne Rand mit leichtem Schatten. Verworfen (Owner):
   hellblauer Verlauf (erst gewaehlt, dann gegen Hellgrau getauscht), Hellblau
   einfarbig, Schloss-Symbol, blaue Oberkante der Karte, Unterzeile unter der h1,
   einfarbiges Band mit halb ueberstehender Karte ("geht gar nicht").
   Karte 544 px -> Felder am Desktop ~480 px. */
/* Grau bis zum Footer (Owner 2026-11-05): nicht die Huelle .scg-cl-scope einfaerben,
   sondern den aeusseren .content aus baseof.html, der bis zum Footer reicht. Er liegt
   ausserhalb der Huelle, daher Farbwert statt Variable und !important gegen bg-white. */
.content:has(.scg-cl-login) { background-color: #f4f6f9 !important; } /* = --scg-cl-soft */
.scg-cl-scope:has(.scg-cl-login) { background: transparent; } /* Huelle ist sonst weiss */
.scg-cl-scope:has(.scg-cl-login) .scg-cl-login-card { border-color: transparent; }
.scg-cl-scope:has(.scg-cl-login) .scg-cl-page-head-text { text-align: center; }
.scg-cl-login { max-width: 544px; margin: 0 auto; }
.scg-cl-login-card {
    padding: 2rem 2rem 1.75rem;
    background: #fff;
    border: 1px solid var(--scg-cl-line);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(15, 23, 42, .04), 0 12px 32px rgba(15, 23, 42, .08);
}
.scg-cl-scope .scg-cl-prose .scg-cl-login-card label { margin-bottom: .4rem; font-size: 1rem; font-weight: 600; color: var(--scg-cl-ink); }
.scg-cl-scope .scg-cl-prose .scg-cl-login-card .form-control { border-color: #9aa7b8; }
.scg-cl-login-password-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.scg-cl-scope .scg-cl-prose .scg-cl-login-password-row a { font-size: .95rem; }
.scg-cl-scope .scg-cl-prose .scg-cl-login-card .scg-note-error { margin-top: 1rem; }
.scg-cl-login-foot { margin-top: 1.25rem; text-align: center; }
.scg-cl-scope .scg-cl-prose .scg-cl-login a:not(.btn) { color: var(--scg-cl-brand-dark); text-decoration: none; font-weight: 600; }
.scg-cl-scope .scg-cl-prose .scg-cl-login a:not(.btn):hover { text-decoration: underline; }
/* Handy/Tablet: mehr Luft zwischen h1 und Karte und ueber dem Footer (Owner 2026-11-05;
   Textseiten sonst 56px unten). Selektor so spezifisch wie
   ".scg-cl-prose > :first-child { margin-top: 0 }" */
@media (max-width: 767px) {
    .scg-cl-scope .scg-cl-prose > .scg-cl-login { margin-top: 1rem; }
    .scg-cl-scope:has(.scg-cl-login) .scg-cl-page-body { padding-bottom: 104px; }
}
@media (max-width: 575px) {
    .scg-cl-login-card { padding: 1.5rem 1.25rem 1.25rem; }
}
/* Aktionspreise: Rabatt-Hinweis fett in Markenblau (vorher rot; Rot ist Fehlern vorbehalten) */
.scg-cl-scope .scg-cl-promo-lead { font-weight: 700; color: var(--scg-cl-brand); }
/* Bestellen + Aktionspreise: auf dem Handy etwas mehr Luft ueber der h1 (Owner 2026-11-05) */
@media (max-width: 767px) { .scg-cl-download-head:has(.scg-cl-h1-compact) { padding-top: 44px; } }
/* ... und weniger Abstand zwischen Unterzeile und den Karten auf dem Handy */
@media (max-width: 767px) { .scg-cl-download-head:has(.scg-cl-h1-compact) + .scg-cl-section-tight { padding-top: 24px; } }
/* Startseite, Plattformen: Portal + Eltern-App mit weichem Schatten (Owner 2026-11-05) */
.scg-cl-product-duo-shadow .scg-cl-screenshot,
.scg-cl-product-duo-shadow .scg-cl-product-duo-phone,
.scg-cl-screenshot.scg-cl-screenshot-shadow {
    box-shadow: 0 2px 4px rgba(15, 23, 42, .06), 0 14px 36px rgba(15, 23, 42, .12);
}

/* ---------- Ratgeber (layouts/ratgeber/scg-cl-list.html, scg-cl-single.html) ----------
   Eine Lesespalte fuer Kopf, Aufmacher und Text, mittig auf der Seite (Owner
   2026-11-05: links stehend blieb rechts eine leere Flaeche). Text in der Spalte
   linksbuendig, Bilder und Videos mittig. Breite 46em wegen der Zeilenlaenge -
   volle Containerbreite ergaebe rund 130 Zeichen pro Zeile.
   Die Tabellen- und Bildregeln der Artikel kommen weiter aus custom.css
   (.scg-ratgeber-text, Handy: Zeilen als Karten); hier nur Farben und Linien. */
/* Spaltenbreite = Textbreite (42em bei 1.1rem). Die Begrenzung der Textvorlage auf
   42em entfaellt in der Spalte, sonst ist der Text schmaler als die Spalte und
   mittige Bilder stehen rechts von der Textmitte (Owner 2026-11-05). */
.scg-cl-reading-column { max-width: 46.2rem; margin: 0 auto; }
.scg-cl-reading-column .scg-cl-prose p, .scg-cl-reading-column .scg-cl-prose > ul, .scg-cl-reading-column .scg-cl-prose > ol,
.scg-cl-reading-column .scg-cl-prose > h2, .scg-cl-reading-column .scg-cl-prose > h3, .scg-cl-reading-column .scg-cl-prose > div:not([class]),
.scg-cl-reading-column .scg-cl-note, .scg-cl-scope .scg-cl-reading-column .scg-cl-lead { max-width: none; }
.scg-cl-scope .scg-cl-guide-head h1 { font-size: clamp(1.9rem, 3.2vw, 2.75rem); line-height: 1.15; }
.scg-cl-scope .scg-cl-guide-lead { margin: 1rem 0 0; color: var(--scg-cl-text); }
.scg-cl-scope .scg-cl-guide-lead p { font-size: inherit; line-height: inherit; margin: 0 0 .75rem; }
.scg-cl-scope .scg-cl-guide-lead p:last-child { margin-bottom: 0; }

/* Uebersicht: Gruppen als h2, darunter die Elternfragen als Zeilen mit Haarlinie */
.scg-cl-scope .scg-cl-guide-group h2 { font-size: clamp(1.45rem, 2.2vw, 1.85rem); margin: 3rem 0 .75rem; }
.scg-cl-scope .scg-cl-guide-group:first-child h2 { margin-top: 0; }
.scg-cl-scope .scg-cl-guide-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--scg-cl-line);
    color: var(--scg-cl-ink);
    font-size: 1.2rem;
    line-height: 1.4;
    text-decoration: none;
}
.scg-cl-scope .scg-cl-guide-group h2 + .scg-cl-guide-question { border-top: 1px solid var(--scg-cl-line); }
.scg-cl-scope .scg-cl-guide-question:hover, .scg-cl-scope .scg-cl-guide-question:focus-visible { color: var(--scg-cl-brand); text-decoration: none; }
.scg-cl-guide-question-arrow { flex: none; color: var(--scg-cl-brand); transition: transform .15s; }
.scg-cl-guide-question:hover .scg-cl-guide-question-arrow { transform: translateX(4px); }
@media (max-width: 767px) {
    .scg-cl-scope .scg-cl-guide-group h2 { margin-top: 2.25rem; }
    .scg-cl-scope .scg-cl-guide-question { font-size: 1.1rem; padding: .85rem 0; }
}

/* Artikel: Aufmacher mittig, Groessengrenzen setzt die Vorlage inline.
   Bild allein im Absatz zentriert bereits custom.css. */
.scg-cl-guide-hero { margin: 0 0 2rem; }
.scg-cl-guide-hero:empty { display: none; }
.scg-cl-guide-hero img { display: block; width: auto; height: auto; margin: 0 auto; }
.scg-cl-guide-hero video { display: block; width: 100%; max-width: 640px; height: auto; margin: 0 auto; border-radius: var(--scg-cl-radius); background: #000; }
.scg-cl-scope .scg-cl-guide-body .scg-cl-prose > h2:first-child { margin-top: 0; }

/* Tabellen: Haarlinien statt Schatten, Kopf im hellen Grau des neuen Stils */
.scg-cl-scope .scg-ratgeber-text table { box-shadow: none; border: 1px solid var(--scg-cl-line); border-radius: var(--scg-cl-radius); border-collapse: separate; border-spacing: 0; }
.scg-cl-scope .scg-ratgeber-text thead th { background: var(--scg-cl-soft); color: var(--scg-cl-ink); border-bottom: 1px solid var(--scg-cl-line); }
.scg-cl-scope .scg-ratgeber-text tbody td { border-bottom-color: var(--scg-cl-line); }
.scg-cl-scope .scg-ratgeber-text tbody tr:nth-child(even) { background: #fafbfc; }
.scg-cl-scope .scg-ratgeber-text tbody td:first-child { color: var(--scg-cl-ink); }
@media (max-width: 767px) {
    .scg-cl-scope .scg-ratgeber-text table { border: 0; }
    .scg-cl-scope .scg-ratgeber-text thead th { background: transparent; border: 0; color: var(--scg-cl-muted); }
    .scg-cl-scope .scg-ratgeber-text thead th + th::before,
    .scg-cl-scope .scg-ratgeber-text thead tr::before { color: var(--scg-cl-muted); }
    .scg-cl-scope .scg-ratgeber-text tbody tr { border: 1px solid var(--scg-cl-line); border-left: 3px solid var(--scg-cl-brand); border-radius: var(--scg-cl-radius); }
    .scg-cl-scope .scg-ratgeber-text tbody tr:nth-child(even) { background: #fff; }
    .scg-cl-scope .scg-ratgeber-text tbody td:first-child { background: var(--scg-cl-soft); }
    .scg-cl-scope .scg-ratgeber-text tbody td:nth-child(n+3) { border-top-color: var(--scg-cl-line); }
}

/* Hinweiskasten (sc-note-info) und Video mit Unterschrift (sc-video) */
.scg-cl-note { background: var(--scg-cl-soft); border-radius: var(--scg-cl-radius); padding: 1.5rem 1.75rem; margin: 1.75rem 0; max-width: 42em; }
.scg-cl-note > :last-child { margin-bottom: 0; }
.scg-cl-scope .scg-cl-prose .scg-cl-note > h2:first-child, .scg-cl-scope .scg-cl-prose .scg-cl-note > h3:first-child { margin-top: 0; }
@media (max-width: 575px) { .scg-cl-note { padding: 1.25rem 1.25rem; } }
.scg-cl-figure { margin: 2rem auto; max-width: 640px; }
.scg-cl-figure figcaption { margin-top: .6rem; font-size: .95rem; color: var(--scg-cl-muted); text-align: center; }

/* Rueckweg zur Uebersicht am Artikelende */
.scg-cl-scope .scg-cl-back-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: 3rem;
    padding: 1rem 0;
    border-top: 1px solid var(--scg-cl-line);
    color: var(--scg-cl-brand);
    font-weight: 600;
    text-decoration: none;
}
.scg-cl-scope .scg-cl-back-link:hover { color: var(--scg-cl-brand-dark); text-decoration: none; }
.scg-cl-back-link-arrow { transition: transform .15s; }
.scg-cl-back-link:hover .scg-cl-back-link-arrow { transform: translateX(-4px); }

/* ---------- SEO-Seiten (layouts/_default/scg-cl-seo.html, content/de/seopages/) ----------
   Abschnitte kommen aus den Design-2026-Zweigen von sc-text, sc-textimg, sc-textimg-third,
   sc-textimg-half und sc-cta-freetrial. Texte, Stockfotos und Packshot wie im
   Original (Owner-Ausnahme). Der Inhalt bringt eigene Abstands-<div>s und Inline-
   Stile an der h1 mit; die werden hier neutralisiert statt in den Inhaltsdateien
   geloescht, damit die Texte unberuehrt bleiben.

   Hintergrund: Die Abschnitte tragen scg-cl-seo-bg-grey / scg-cl-seo-bg-white (aus dem
   Shortcode-Parameter), beide bleiben weiss wie auf den uebrigen Seiten im neuen
   Stil. Der Grau/Weiss-Wechsel des Originals wurde auf /kindersicherung-handy/
   getestet und verworfen (Owner 2026-11-05: "nur weiss"). */
.scg-cl-seo-section { padding: 40px 0; }
.scg-cl-seo-page > .scg-cl-seo-section:first-child { padding-top: 56px; }
.scg-cl-seo-page > :last-child { margin-bottom: 56px; }
/* Abschnitte ohne Bild (sc-text, sc-textimg): Lesespalte mittig wie im Ratgeber -
   links stehend blieb am Desktop rechts eine leere Flaeche (Owner 2026-11-05).
   Ausnahme: Abschnitt nur mit der h1, die bleibt links ueber dem ersten Text. */
.scg-cl-reading-column { max-width: 46.2rem; margin: 0 auto; }
.scg-cl-reading-column:has(> h1:last-child) { margin: 0; }
@media (max-width: 767px) {
    .scg-cl-seo-section { padding: 28px 0; }
    .scg-cl-seo-page > .scg-cl-seo-section:first-child { padding-top: 36px; }
}

/* Abschnitt nur mit der h1 (kindersicherung-handy): kein Abstand nach unten,
   sonst steht die Ueberschrift abgehaengt ueber dem ersten Text */
.scg-cl-seo-section:has(.scg-cl-prose > h1:last-child) { padding-bottom: 0; }
.scg-cl-seo-section:has(.scg-cl-prose > h1:last-child) + .scg-cl-seo-section { padding-top: 28px; }
/* ... und die h1 ohne Aussenabstand nach unten: der ragte sonst aus dem Abschnitt
   heraus (bei grauem Abschnitt als weisser Streifen sichtbar); Abstand oben drueber */
.scg-cl-scope .scg-cl-seo-page .scg-cl-seo-section .scg-cl-prose > h1:last-child { margin-bottom: 0 !important; }

/* Leere Abstandshalter aus dem Inhalt (mt-4, height:40px ...) */
.scg-cl-seo-page div[class^="mt-"]:empty, .scg-cl-seo-page div[style*="height"]:empty { display: none; }

/* h1 im Inhalt; !important gegen style="font-size:2rem". Kleiner als im Ratgeber,
   weil sie oft in der halben Spalte neben dem Bild steht (sonst "Kinderschutz-/App:"). */
.scg-cl-scope .scg-cl-seo-page h1 { font-size: clamp(1.9rem, 2.8vw, 2.3rem) !important; line-height: 1.15; margin: 0 0 1.25rem !important; }
/* Erste Ueberschrift eines Abschnitts ohne Abstand nach oben (auch hinter
   ausgeblendeten Abstandshaltern) */
.scg-cl-scope .scg-cl-seo-page .scg-cl-prose > :is(h1, h2):first-child,
.scg-cl-scope .scg-cl-seo-page .scg-cl-prose > div:empty + :is(h1, h2) { margin-top: 0 !important; }

/* Bilder: ganze Spalte, kleine Ecken; Handy ueber dem Text, nicht hoeher als 240 px */
.scg-cl-seo-media { text-align: center; }
.scg-cl-seo-media > img { max-width: 100%; height: auto; border-radius: var(--scg-cl-radius); }
.scg-cl-seo-page .scg-cl-prose img { border-radius: var(--scg-cl-radius); }
/* Packshot (auf allen SEO-Seiten dasselbe Bild): am Desktop kleiner als die volle
   Drittelspalte, er wirkte sonst wuchtig (Owner 2026-11-05). Handy: Hoehengrenze unten.
   EN/FR (2026-11-06): packshot-english.png, packshot-fr.png. */
@media (min-width: 768px) { .scg-cl-seo-media > img:is([src*="kindersicherung-packshot"], [src*="packshot-english"], [src*="packshot-fr"]) { max-width: 280px; } }
@media (max-width: 767px) {
    .scg-cl-seo-media { margin-bottom: 1.5rem; }
    .scg-cl-seo-media > img { max-height: 240px; width: auto; }
}

/* Testangebot zwischen den Abschnitten: Abstand oben und unten gleich (Regel
   Abschnitt 9): eigener Abstand = Abschnittsabstand, am Seitenende mehr. */
.scg-cl-seo-page .scg-cl-trial { padding: 40px 0; }
.scg-cl-seo-page .scg-cl-trial:last-child { padding-bottom: 96px; margin-bottom: 0; }
@media (max-width: 767px) {
    .scg-cl-seo-page .scg-cl-trial { padding: 28px 0; }
    .scg-cl-seo-page .scg-cl-trial:last-child { padding-bottom: 56px; }
}

/* ---------- Fragen zum Aufklappen (scg-cl-questions), 2026-11-06 ----------
   Startseite DE, ersetzt den Ratgeber-Block. Optik wie die FAQ der Vergleichsseiten
   (.faq-item in scg-cl-compare.css: Haarlinien, Frage fett, grauer Pfeil rechts), aber
   mit <details>/<summary> ohne Skript. Zu sieht man nur die Frage (Owner: "das mit dem
   Draufklicken checken die User"); aufgeklappt Kurzantwort, Beispiel, Link. */
.scg-cl-questions { margin-top: 1.5rem; }
@media (min-width: 992px) { .scg-cl-questions { margin-top: 2.5rem; } }
/* Grafik rechts neben den Fragen (nur Desktop), groesser als die Standard-Illustration */
.scg-cl-questions-illu { max-width: 440px; margin-right: 0; }
/* Ratgeber-Hinweis unter der Grafik, rechtsbuendig zur Grafik (Desktop) */
@media (min-width: 992px) { .scg-cl-questions-more { max-width: 440px; margin: 1.5rem 0 0 auto; } }
/* Linktext und Pfeil nicht trennen (EN brach sonst mit dem Pfeil allein in der Zeile um) */
.scg-cl-scope .scg-cl-questions-more .scg-cl-link-arrow { white-space: nowrap; }
.scg-cl-question { border-bottom: 1px solid var(--scg-cl-line); }
.scg-cl-question:first-child { border-top: 1px solid var(--scg-cl-line); }
.scg-cl-question summary {
    display: block;
    list-style: none;
    position: relative;
    padding: 1.1rem 2.25rem 1.1rem 0;
    cursor: pointer;
}
.scg-cl-question summary::-webkit-details-marker { display: none; }
.scg-cl-question summary::after {
    content: "\25BE";
    position: absolute;
    right: .25rem;
    top: 1.15rem;
    color: var(--scg-cl-muted);
    font-size: 1rem;
    transition: transform .2s;
}
.scg-cl-question[open] summary::after { transform: rotate(180deg); }
.scg-cl-question summary:focus-visible { outline: 2px solid var(--scg-cl-brand); outline-offset: 2px; }
.scg-cl-scope .scg-cl-question summary h3 { font-size: 1.1rem; font-weight: 600; margin: 0; }
.scg-cl-question summary:hover h3 { color: var(--scg-cl-brand); }
.scg-cl-question-body .scg-cl-question-short { color: var(--scg-cl-ink); margin-bottom: 0; }
.scg-cl-question-body { padding: 0 2.25rem 1.25rem 0; }
.scg-cl-question-body p { color: var(--scg-cl-text); margin-bottom: .75rem; }
@media (max-width: 575px) {
    .scg-cl-question summary { padding-right: 1.75rem; }
    .scg-cl-question-body { padding-right: 0; }
}