/**
 * „Schulkooperation" — Landing-Styles. Prefix rc-skoop-.
 *
 * Hell und sachlich: Weiß, helles Grau, Robbo-Grün als Akzent, EIN dunkler
 * Abschnitt (MINT). Ausschließlich px (die Templates pinnen
 * html{font-size:16px}), Farben ausschließlich über var(--robbo-*),
 * Lesegrößen über die --robbo-fs-*-Skala mit 15 px als Boden.
 * Mobile-first, min-width-Queries skalieren nach oben.
 *
 * UMBAU 12.09.2026 („zu überladen"): zwei neue Muster, drei entfernte.
 *   NEU  .rc-skoop-kachel  — sechs kleine Kacheln, die alle Möglichkeiten auf
 *        einen Blick zeigen. Bewusst klein und gleich groß: sie sollen
 *        SORTIEREN, nicht verkaufen, und in zwei bis drei Zeilen gelesen werden.
 *   NEU  .rc-skoop-ak-item — ein Akkordeon-Muster für Recht UND FAQ. Vorher gab
 *        es .rc-skoop-karte (sieben offene Karten mit Absätzen) und
 *        .rc-skoop-faq-item als zwei getrennte Muster, die gleich aussahen.
 *   WEG  .rc-skoop-anchors — die Sprungmarken-Leiste unter dem Hero. Die
 *        Kacheln leisten dasselbe; zwei Navigationen übereinander waren Teil
 *        des Rauschens.
 *   WEG  .rc-skoop-karte, .rc-skoop-brauchen — durch Akkordeon bzw. kurze
 *        Listen ersetzt.
 *
 * DRUCK IST EIN ANWENDUNGSFALL: Direktionen drucken die Seite für die
 * Konferenz. Am Ende ein @media print, das Header, Footer, Formular und Bilder
 * entfernt und einspaltig auf A4 legt; schulkooperation.js klappt die
 * Aufklapper davor auf.
 *
 * @since 0.237.0
 */

.rc-skoop {
    --sk-ink: #23302a;
    --sk-muted: #5b6a62;
    --sk-alt: #f4f8f6;
    --sk-line: #e4ebe7;
    font-family: 'ProximaNova', 'Proxima Nova', 'Noto Sans', sans-serif;
    color: var(--sk-ink);
    background: #fff;
    overflow-x: clip;
}
.rc-skoop * { box-sizing: border-box; }

/* --- Grundraster ------------------------------------------------------- */
.rc-skoop-wrap { max-width: 1180px; margin: 0 auto; width: 100%; }
.rc-skoop-sec { padding: 34px 16px; }
/* Sprungziele: der klebende Theme-Header verdeckt sonst Eyebrow und halbe
   Überschrift. Die Seite wird per Anker aus E-Mails und aus den Kacheln heraus
   angesprungen — ohne Versatz landet der Leser mitten im Satz. */
.rc-skoop-sec[id], .rc-skoop-hero[id], .rc-skoop-oly[id] { scroll-margin-top: 90px; }
.rc-skoop-sec-alt { background: var(--sk-alt); }
.rc-skoop-sec-dark { background: var(--sk-ink); color: #fff; }
.rc-skoop-sec-dark .rc-skoop-h2,
.rc-skoop-sec-dark .rc-skoop-h3 { color: #fff; }
.rc-skoop-sec-dark .rc-skoop-eyebrow { background: rgba(255,255,255,.12); color: #7ee2ab; }
.rc-skoop-sec-dark .rc-skoop-intro { color: #d7e2dc; }
.rc-skoop-sec-dark .rc-skoop-intro strong { color: #fff; }

/* --- Typografie ------------------------------------------------------- */
.rc-skoop-eyebrow {
    display: inline-block;
    margin: 0 0 12px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(0,175,65,.1);
    color: var(--robbo-green-dark, #009638);
    font-size: var(--robbo-fs-badge, 12px);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.rc-skoop-h1 {
    margin: 0 0 12px;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 800;
    color: var(--robbo-coal, #383838);
}
.rc-skoop-h2 {
    margin: 0 0 10px;
    font-family: 'Plakkaat', 'ProximaNova', 'Noto Sans', sans-serif;
    font-size: 26px;
    line-height: 1.15;
    font-weight: 400;
    color: var(--robbo-coal, #383838);
}
.rc-skoop-h2-klein { font-size: 22px; }
.rc-skoop-h3 {
    margin: 0 0 6px;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--robbo-coal, #383838);
}
.rc-skoop-lead {
    margin: 0 0 16px;
    font-size: var(--robbo-fs-lg, 18px);
    line-height: 1.5;
    color: var(--sk-muted);
}
.rc-skoop-intro {
    margin: 0 0 20px;
    max-width: 720px;
    font-size: var(--robbo-fs-base, 16px);
    line-height: 1.6;
    color: var(--sk-muted);
}
.rc-skoop-intro-wide { max-width: 880px; }
.rc-skoop p { font-size: var(--robbo-fs-base, 16px); line-height: 1.6; }

/* --- Buttons + Chip --------------------------------------------------- */
.rc-skoop-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 22px;
    border: 0;
    border-radius: 12px;
    font-size: var(--robbo-fs-base, 16px);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background .18s ease, transform .18s ease;
}
.rc-skoop-btn svg { width: 20px; height: 20px; flex: 0 0 auto; }
.rc-skoop-btn-primary {
    background: var(--robbo-green, #00af41);
    color: #fff;
    box-shadow: 0 6px 18px rgba(0,175,65,.22);
}
.rc-skoop-btn-primary:hover { background: var(--robbo-green-dark, #009638); transform: translateY(-1px); }
.rc-skoop-btn-ghost {
    background: #fff;
    color: var(--robbo-coal, #383838);
    border: 1px solid var(--sk-line);
}
.rc-skoop-btn-ghost:hover { border-color: var(--robbo-green, #00af41); color: var(--robbo-green-dark, #009638); }
.rc-skoop-cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }

/* „kostenlos" / „Eltern zahlen" — die einzige Information, die auf
   Kachel-Ebene über Geld nötig ist. Kein Betrag: der entscheidet hier nichts. */
.rc-skoop-chip {
    display: inline-block;
    align-self: flex-start;
    margin-top: auto;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0,175,65,.1);
    color: var(--robbo-green-dark, #009638);
    font-size: var(--robbo-fs-badge, 12px);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* --- 1 Hero ----------------------------------------------------------- */
.rc-skoop-hero { padding: 26px 16px 18px; background: linear-gradient(180deg, #fff 0%, var(--sk-alt) 100%); }
.rc-skoop-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center; }
.rc-skoop-hero-media img {
    display: block;
    width: 100%;
    max-width: 100%;
    /* Hochformat (1365×2048) — ohne festen Ausschnitt schiebt es die Spalte über
       zwei Bildschirmhöhen auseinander. Gleiche Korrektur wie /fuer-schulen/. */
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 14px 34px rgba(35,48,42,.14);
}
.rc-skoop-stoerer { display: block; width: 190px; height: auto; margin: 2px 0 0; }

.rc-skoop-zahlen {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 20px 0 8px;
}
.rc-skoop-zahl {
    background: #fff;
    border: 1px solid var(--sk-line);
    border-radius: 12px;
    padding: 11px 10px;
    text-align: center;
}
.rc-skoop-zahl strong {
    display: block;
    font-size: 23px;
    line-height: 1.1;
    font-weight: 800;
    color: var(--robbo-green-dark, #009638);
}
.rc-skoop-zahl span {
    display: block;
    margin-top: 2px;
    font-size: var(--robbo-fs-md, 15px);
    line-height: 1.3;
    color: var(--sk-muted);
}
.rc-skoop-quelle {
    margin: 0;
    font-size: var(--robbo-fs-md, 15px) !important;
    line-height: 1.45;
    color: var(--robbo-grey, #989898);
}

/* --- 2 Kacheln: alles auf einen Blick --------------------------------- */
.rc-skoop-kacheln { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
/* Flex-Spalte, damit der Chip in allen Kacheln einer Zeile auf derselben Höhe
   sitzt — bei unterschiedlich langen Zeilen rutschte er sonst mit dem Text
   nach oben, und sechs gleich gebaute Kacheln lasen sich als sechs
   verschiedene. */
.rc-skoop-kachel {
    display: flex;
    flex-direction: column;
    padding: 15px 14px;
    background: #fff;
    border: 1px solid var(--sk-line);
    border-radius: 14px;
    text-decoration: none;
    color: var(--sk-ink);
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.rc-skoop-kachel:hover {
    border-color: var(--robbo-green, #00af41);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(35,48,42,.08);
}
.rc-skoop-kachel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: rgba(0,175,65,.1);
    color: var(--robbo-green-dark, #009638);
}
.rc-skoop-kachel-icon svg { width: 20px; height: 20px; }
.rc-skoop-kachel-titel {
    display: block;
    font-size: var(--robbo-fs-base, 16px);
    font-weight: 700;
    color: var(--robbo-coal, #383838);
}
.rc-skoop-kachel-zeile {
    display: block;
    margin: 3px 0 10px;
    font-size: var(--robbo-fs-md, 15px);
    line-height: 1.45;
    color: var(--sk-muted);
}

/* --- 3 Formate -------------------------------------------------------- */
.rc-skoop-wege { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 16px; }
/* Flex-Spalte: Statuszeile und Link sitzen über margin-top:auto in allen drei
   Karten auf derselben Höhe. Die Geld-Zeile ist je Format unterschiedlich lang,
   und ohne diesen Griff wanderte darunter alles mit — drei gleich gebaute
   Karten lasen sich als drei verschiedene (gleiche Korrektur wie bei den
   Überblick-Kacheln). */
.rc-skoop-weg {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--sk-line);
    border-radius: 16px;
    padding: 16px 14px;
}
.rc-skoop-weg-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(0,175,65,.1);
    color: var(--robbo-green-dark, #009638);
}
.rc-skoop-weg-icon svg { width: 20px; height: 20px; }
/* Kopfzeile: Icon links, Chip rechts. Der Chip ersetzt das frühere Label-Paar
   „WER ZAHLT / …" und ist dasselbe Muster wie in den Überblick-Kacheln — eine
   Systematik statt zwei. */
.rc-skoop-weg-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.rc-skoop-weg-kopf .rc-skoop-chip { margin-top: 0; }
.rc-skoop-weg-rahmen {
    margin: 0 0 8px;
    font-size: var(--robbo-fs-md, 15px) !important;
    line-height: 1.45;
    color: var(--sk-muted);
}
.rc-skoop-weg-geld {
    margin: 0 0 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--sk-alt);
    font-size: var(--robbo-fs-md, 15px) !important;
    line-height: 1.45;
    color: var(--sk-ink);
}
.rc-skoop-weg-status {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: auto 0 10px !important;
    font-size: var(--robbo-fs-md, 15px) !important;
    line-height: 1.4;
    font-weight: 600;
    color: var(--robbo-coal, #383838);
}
.rc-skoop-weg-status-icon { flex: 0 0 auto; color: var(--robbo-green, #00af41); }
.rc-skoop-weg-status-icon svg { width: 19px; height: 19px; }
.rc-skoop-weg-link {
    font-size: var(--robbo-fs-md, 15px);
    font-weight: 700;
    color: var(--robbo-green-dark, #009638);
    text-decoration: none;
}
.rc-skoop-weg-link:hover { text-decoration: underline; }
.rc-skoop-hinweis {
    margin: 0 0 18px;
    padding: 13px 15px;
    border-left: 4px solid var(--robbo-green, #00af41);
    border-radius: 0 12px 12px 0;
    background: var(--sk-alt);
    font-size: var(--robbo-fs-md, 15px) !important;
    line-height: 1.55;
    color: var(--sk-ink);
}

/* Aufgabenteilung — zwei kurze Listen, keine Karten mit Absätzen. */
.rc-skoop-zwei { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.rc-skoop-spalte {
    background: var(--sk-alt);
    border: 1px solid var(--sk-line);
    border-radius: 16px;
    padding: 16px 14px;
}
.rc-skoop-spalte-akzent { background: #fff; border-color: rgba(0,175,65,.35); }
.rc-skoop-liste { list-style: none; margin: 0; padding: 0; }
.rc-skoop-liste li {
    display: flex;
    gap: 9px;
    padding: 7px 0;
    border-bottom: 1px solid var(--sk-line);
    font-size: var(--robbo-fs-md, 15px);
    line-height: 1.45;
}
.rc-skoop-liste li:last-child { border-bottom: 0; }
.rc-skoop-li-icon { flex: 0 0 auto; color: var(--robbo-green, #00af41); }
.rc-skoop-li-icon svg { width: 19px; height: 19px; }

/* --- Akkordeon (Recht, FAQ, MINT-Kriterien) --------------------------- */
.rc-skoop-akkordeon { display: grid; gap: 8px; max-width: 880px; }
.rc-skoop-ak-item {
    background: #fff;
    border: 1px solid var(--sk-line);
    border-radius: 12px;
    overflow: hidden;
}
.rc-skoop-ak-item summary {
    padding: 13px 15px;
    cursor: pointer;
    font-size: var(--robbo-fs-base, 16px);
    font-weight: 700;
    color: var(--robbo-coal, #383838);
    list-style: none;
}
.rc-skoop-ak-item summary::-webkit-details-marker { display: none; }
.rc-skoop-ak-item summary::after {
    content: '+';
    float: right;
    margin-left: 10px;
    color: var(--robbo-green, #00af41);
    font-weight: 800;
}
.rc-skoop-ak-item[open] summary::after { content: '–'; }
.rc-skoop-ak-a { padding: 0 15px 14px; }
.rc-skoop-ak-a p { margin: 0; font-size: var(--robbo-fs-md, 15px); color: var(--sk-muted); }
/* Der eine Aufklapper im dunklen Abschnitt. */
.rc-skoop-ak-dark {
    margin: 0 0 16px;
    max-width: 880px;
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.16);
}
.rc-skoop-ak-dark summary { color: #fff; }
.rc-skoop-ak-dark summary::after { color: #7ee2ab; }

/* --- 5 Lehrkräfte ----------------------------------------------------- */
.rc-skoop-lk-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.rc-skoop-lk-liste { display: grid; gap: 10px; }
.rc-skoop-lk { background: var(--sk-alt); border-radius: 14px; padding: 14px; }
.rc-skoop-lk p { margin: 0; font-size: var(--robbo-fs-md, 15px); color: var(--sk-muted); }
.rc-skoop-lk-meta {
    margin: 0 0 5px !important;
    /* 13 px, nicht 12: die Zeile trägt eine Aussage (die Lehrplan-Fundstelle) und
       ist damit Information, keine Badge-Dekoration. */
    font-size: var(--robbo-fs-xs, 13px) !important;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--robbo-green-dark, #009638) !important;
}
.rc-skoop-lk-media img {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 16px;
}
/* Lehrplan-Zitate: Fundstelle als Label, darunter der Wortlaut. Kursiv, damit
   sichtbar ist, dass hier zitiert und nicht umschrieben wird. */
.rc-skoop-lk-zitate { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rc-skoop-lk-zitate li { padding: 0 0 10px; border-bottom: 1px solid var(--sk-line); }
.rc-skoop-lk-zitate li:last-child { border-bottom: 0; padding-bottom: 0; }
.rc-skoop-lk-zitate .rc-skoop-lk-meta { display: block; }
.rc-skoop-lk-zitat {
    display: block;
    font-size: var(--robbo-fs-md, 15px);
    font-style: italic;
    line-height: 1.45;
    color: var(--sk-ink);
}
.rc-skoop-lk .rc-skoop-lk-quelle {
    margin: 12px 0 0;
    font-size: var(--robbo-fs-xs, 13px);
    color: var(--robbo-grey, #989898);
}

/* --- 6 MINT + Olympiade ---------------------------------------------- */
/* Drei Belege als Liste — keine Tabelle mit Kriterien-Zitaten mehr (0.239.3). */
.rc-skoop-mint-liste { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; max-width: 880px; }
.rc-skoop-mint-liste li {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    font-size: var(--robbo-fs-md, 15px);
    line-height: 1.45;
    color: #eaf3ee;
}
.rc-skoop-mint-liste li > span:last-child { min-width: 0; }
.rc-skoop-mint-liste strong { display: block; font-size: var(--robbo-fs-base, 16px); color: #fff; }
.rc-skoop-mint-krit { display: block; margin-top: 4px; font-size: var(--robbo-fs-xs, 13px); color: #7ee2ab; }
.rc-skoop-mint-icon { flex: 0 0 auto; color: #7ee2ab; }
.rc-skoop-mint-icon svg { width: 19px; height: 19px; }
.rc-skoop-mint-fuss {
    margin: 0 0 18px;
    max-width: 880px;
    font-size: var(--robbo-fs-md, 15px) !important;
    line-height: 1.55;
    color: #d7e2dc;
}
.rc-skoop-mint-fuss strong { color: #fff; }
.rc-skoop-mint-fuss-stark { font-size: var(--robbo-fs-base, 16px) !important; }
.rc-skoop-oly {
    display: flex;
    gap: 13px;
    padding: 16px 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 16px;
}
.rc-skoop-oly-icon { flex: 0 0 auto; color: #7ee2ab; }
.rc-skoop-oly p { margin: 0 0 9px; font-size: var(--robbo-fs-md, 15px); line-height: 1.55; color: #d7e2dc; }
.rc-skoop-oly p strong { color: #fff; }
.rc-skoop-sec-dark .rc-skoop-weg-link { color: #7ee2ab; }

/* --- 7 Referenzen ----------------------------------------------------- */
.rc-skoop-stimmen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 11px; }
.rc-skoop-stimme {
    margin: 0;
    padding: 15px;
    background: var(--sk-alt);
    border-radius: 14px;
    border-top: 3px solid var(--robbo-green, #00af41);
}
.rc-skoop-stimme blockquote {
    margin: 0 0 9px;
    padding: 0;
    border: 0;
    font-size: var(--robbo-fs-md, 15px);
    line-height: 1.55;
    font-style: italic;
    color: var(--sk-ink);
}
.rc-skoop-stimme figcaption { font-size: var(--robbo-fs-md, 15px); font-weight: 600; color: var(--robbo-coal, #383838); }
.rc-skoop-stimme-kontext { display: block; font-weight: 400; color: var(--robbo-grey, #989898); font-size: var(--robbo-fs-md, 15px); }

/* --- 9 Kontakt + Formular -------------------------------------------- */
.rc-skoop-kontakt-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.rc-skoop-kontakt-karte { padding: 18px 15px; background: var(--sk-alt); border-radius: 16px; }
.rc-skoop-kontakt-foto {
    display: block;
    width: 92px;
    height: 92px;
    margin: 0 0 10px;
    border-radius: 50%;
    object-fit: cover;
}
/* Ein Personenname in der Display-Schrift (Plakkaat, Versalien) liest sich wie
   ein Plakat und nicht wie eine Ansprechperson — hier die Textschrift. */
.rc-skoop-kontakt-name {
    margin: 0 0 3px;
    font-family: 'ProximaNova', 'Proxima Nova', 'Noto Sans', sans-serif;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 800;
    color: var(--robbo-coal, #383838);
}
.rc-skoop-kontakt-rolle { margin: 0 0 10px; font-size: var(--robbo-fs-md, 15px); color: var(--robbo-grey, #989898); }
.rc-skoop-kontakt-text { margin: 0 0 12px; font-size: var(--robbo-fs-md, 15px); color: var(--sk-muted); }
.rc-skoop-kontakt-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rc-skoop-kontakt-liste a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: var(--robbo-fs-base, 16px);
    font-weight: 700;
    color: var(--robbo-coal, #383838);
    text-decoration: none;
}
.rc-skoop-kontakt-liste a:hover { color: var(--robbo-green-dark, #009638); }
.rc-skoop-kontakt-liste svg { width: 20px; height: 20px; color: var(--robbo-green, #00af41); }

.rc-skoop-form-karte {
    padding: 18px 15px;
    background: #fff;
    border: 1px solid var(--sk-line);
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(35,48,42,.07);
}
.rc-skoop-form-intro { margin: 0 0 14px; font-size: var(--robbo-fs-md, 15px); color: var(--sk-muted); }
.rc-skoop-form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 11px; }
.rc-skoop-feld { display: block; }
.rc-skoop-feld > span {
    display: block;
    margin-bottom: 5px;
    font-size: var(--robbo-fs-md, 15px);
    font-weight: 600;
    color: var(--robbo-coal, #383838);
}
.rc-skoop-feld > span i { color: var(--robbo-green, #00af41); font-style: normal; }
.rc-skoop-input {
    width: 100%;
    max-width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--sk-line);
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-size: var(--robbo-fs-base, 16px);
    color: var(--sk-ink);
}
.rc-skoop-input:focus { outline: 2px solid rgba(0,175,65,.35); outline-offset: 1px; border-color: var(--robbo-green, #00af41); }
textarea.rc-skoop-input { resize: vertical; min-height: 74px; }
/* agent-ui (Choices.js) greift nur auf eine feste Liste von Template-Wurzeln zu
   und kennt .rc-skoop nicht. Das eine <select> der Seite bleibt native und
   bekommt hier seinen eigenen Pfeil, damit es nicht systemfremd aussieht. */
select.rc-skoop-input {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23383838' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px 18px;
}

.rc-skoop-fieldset { margin: 14px 0 0; padding: 0; border: 0; }
.rc-skoop-fieldset legend {
    padding: 0;
    margin-bottom: 8px;
    font-size: var(--robbo-fs-md, 15px);
    font-weight: 600;
    color: var(--robbo-coal, #383838);
}
.rc-skoop-fieldset legend i { color: var(--robbo-green, #00af41); font-style: normal; }
.rc-skoop-fieldset legend span { font-weight: 400; color: var(--robbo-grey, #989898); }
.rc-skoop-checks { display: grid; gap: 6px; }
.rc-skoop-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 11px;
    border: 1px solid var(--sk-line);
    border-radius: 10px;
    cursor: pointer;
    font-size: var(--robbo-fs-md, 15px);
    line-height: 1.4;
}
.rc-skoop-check:hover { border-color: var(--robbo-green, #00af41); }
.rc-skoop-check input { margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--robbo-green, #00af41); }

.rc-skoop-form-submit { margin-top: 14px; }
/* Ein Inline-min-width am Button hat auf den Schulseiten das Formular auf
   375 px um 39 px aus der Karte geschoben — hier von Anfang an ohne. */
.rc-skoop-form-submit .rc-skoop-btn { width: 100%; }
.rc-skoop-dsgvo {
    margin: 8px 0 0;
    font-size: var(--robbo-fs-legal, 12px) !important;
    line-height: 1.5;
    color: var(--robbo-grey, #989898);
}
.rc-skoop-dsgvo a { color: var(--robbo-green-dark, #009638); text-decoration: underline; }
.rc-skoop-form-msg {
    margin: 12px 0 0;
    padding: 11px 13px;
    border-radius: 10px;
    background: #fff7f7;
    border: 1px solid #f0c9c9;
    font-size: var(--robbo-fs-md, 15px) !important;
    color: #9b2c2c;
}
.rc-skoop-form-success {
    padding: 17px 15px;
    background: rgba(0,175,65,.08);
    border: 1px solid rgba(0,175,65,.35);
    border-radius: 14px;
}
.rc-skoop-form-success p { margin: 0; font-size: var(--robbo-fs-md, 15px); }
.rc-skoop-form-success a { color: var(--robbo-green-dark, #009638); font-weight: 700; }
/* Ein [hidden]-Element, dessen Klasse display:flex/grid setzt, bleibt sichtbar
   — die UA-Regel verliert bei gleicher Spezifität
   ([[reference_hidden_attr_vs_display_flex]]). */
.rc-skoop [hidden] { display: none !important; }

/* --- ab 680 px -------------------------------------------------------- */
@media (min-width: 680px) {
    .rc-skoop-sec { padding: 42px 20px; }
    .rc-skoop-hero { padding: 32px 20px 24px; }
    .rc-skoop-h1 { font-size: 38px; }
    .rc-skoop-h2 { font-size: 32px; }
    .rc-skoop-zahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .rc-skoop-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rc-skoop-stimmen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rc-skoop-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rc-skoop-feld-weit { grid-column: 1 / -1; }
    .rc-skoop-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rc-skoop-form-submit { display: flex; align-items: center; gap: 16px; }
    .rc-skoop-form-submit .rc-skoop-btn { width: auto; }
    .rc-skoop-dsgvo { margin: 0 !important; }
}

/* --- ab 1024 px ------------------------------------------------------- */
@media (min-width: 1024px) {
    .rc-skoop-sec { padding: 52px 24px; }
    .rc-skoop-hero { padding: 42px 24px 28px; }
    .rc-skoop-hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 34px; }
    .rc-skoop-h1 { font-size: 44px; }
    .rc-skoop-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rc-skoop-wege { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rc-skoop-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .rc-skoop-lk-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 24px; }
    .rc-skoop-lk-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rc-skoop-stimmen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rc-skoop-kontakt-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 24px; }
}

/* --- Druck: A4, einspaltig, ohne Interaktion -------------------------- */
@media print {
    .site-header, .site-footer, header.site-header, footer,
    .rc-skoop-cta-row, .rc-skoop-form-karte, .rc-skoop-hero-media,
    .rc-skoop-lk-media, .rc-skoop-kontakt-foto { display: none !important; }
    .rc-skoop { background: #fff !important; color: #000 !important; }
    .rc-skoop-sec, .rc-skoop-hero { padding: 12px 0 !important; background: #fff !important; }
    .rc-skoop-sec-dark { background: #fff !important; color: #000 !important; }
    .rc-skoop-sec-dark .rc-skoop-h2, .rc-skoop-sec-dark .rc-skoop-h3,
    .rc-skoop-sec-dark .rc-skoop-intro, .rc-skoop-mint-liste li, .rc-skoop-mint-liste strong,
    .rc-skoop-mint-krit, .rc-skoop-mint-fuss,
    .rc-skoop-oly p, .rc-skoop-ak-dark summary { color: #000 !important; }
    .rc-skoop-mint-liste li, .rc-skoop-oly, .rc-skoop-ak-dark { border: 1px solid #999 !important; background: #fff !important; }
    .rc-skoop-kacheln, .rc-skoop-wege, .rc-skoop-zwei, .rc-skoop-stimmen,
    .rc-skoop-lk-grid, .rc-skoop-lk-liste,
    .rc-skoop-hero-grid { grid-template-columns: minmax(0, 1fr) !important; }
    /* Zugeklappte <details> drucken sich als leere Kästen, und CSS kann das
       nicht aufheben — schulkooperation.js öffnet sie in beforeprint und stellt
       danach den vorherigen Stand wieder her. */
    .rc-skoop-ak-item { border: 1px solid #999 !important; }
    .rc-skoop-sec, .rc-skoop-weg, .rc-skoop-kachel, .rc-skoop-ak-item { break-inside: avoid; }
}