/* cleverprep: ein Design fuer Dachseiten, Landingpages und den Rahmen der Markt-Infoseiten.
 *
 * Palette wie Styleguide "Klare Karte" (generator/design3.py) und Lernbereich
 * (engine-src/public/lernen.css): Primaer #1c6ab7, Akzent #00a3a8, Tinte #131b2b, heller Grund.
 *
 * Jede Klasse traegt das Praefix cp-. Die Infoseiten bringen ihr eigenes, je Seite anderes CSS
 * mit und belegen generische Namen (.wrap, .band, header, section, h2). Unsere Rahmenteile
 * setzen deshalb alle Eigenschaften, auf die es ankommt, selbst, statt sie zu erben.
 */
:root{
 --cp-blau:#1c6ab7;--cp-blau-h:#155a9e;--cp-blau-d:#0f3f6e;--cp-blau-l:#e8f1fa;
 --cp-teal:#00a3a8;--cp-teal-l:#e5f6f7;--cp-gruen:#1aa568;--cp-gruen-l:#e7f7ef;
 --cp-tinte:#131b2b;--cp-text:#48566b;--cp-grau:#8494a7;--cp-linie:#e6eaf0;--cp-linie-l:#eef2f7;
 --cp-grund:#f6f8fc;--cp-karte:#fff;
 --cp-r:18px;--cp-rs:12px;
 --cp-sh-s:0 1px 3px rgba(15,40,80,.05),0 1px 2px rgba(15,40,80,.04);
 --cp-sh-m:0 6px 20px rgba(15,40,80,.08),0 2px 6px rgba(15,40,80,.05);
 --cp-font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
}
/* Volle Breite fuer Rahmenteile auch dann, wenn eine Infoseite dem body Innenabstand gibt. */
html{overflow-x:clip}
.cp-voll{margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;
 width:auto!important;max-width:none!important;box-sizing:border-box}
.cp-voll *,.cp-voll *::before,.cp-voll *::after{box-sizing:border-box}

/* ---------- Kopfzeile ---------- */
.cp-kopf{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.94);
 backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);
 border-bottom:1px solid var(--cp-linie);font-family:var(--cp-font);margin-top:0;padding:0}
.cp-kopf-in{max-width:1140px;margin:0 auto;padding:0 18px;height:60px;display:flex;
 align-items:center;gap:8px}
.cp-wort{font:800 21px/1 var(--cp-font);letter-spacing:-.03em;color:var(--cp-tinte)!important;
 text-decoration:none!important;margin-right:auto;display:inline-flex;align-items:center;gap:8px;
 white-space:nowrap}
.cp-wort i{font-style:normal;color:var(--cp-blau)}
.cp-wort-punkt{width:9px;height:9px;border-radius:3px;background:linear-gradient(135deg,var(--cp-blau),var(--cp-teal));
 display:inline-block;transform:translateY(1px)}
.cp-maerkte{position:relative;font:600 14px/1 var(--cp-font)}
.cp-maerkte>summary{list-style:none;cursor:pointer;padding:10px 12px;border-radius:10px;
 color:var(--cp-text);display:flex;align-items:center;gap:6px;white-space:nowrap;user-select:none}
.cp-maerkte>summary::-webkit-details-marker{display:none}
.cp-maerkte>summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;
 border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:2px}
.cp-maerkte[open]>summary,.cp-maerkte>summary:hover{background:var(--cp-linie-l);color:var(--cp-tinte)}
.cp-maerkte-liste{position:absolute;right:0;top:calc(100% + 8px);width:290px;max-width:calc(100vw - 24px);
 background:#fff;border:1px solid var(--cp-linie);border-radius:14px;box-shadow:var(--cp-sh-m);padding:8px}
.cp-maerkte-liste a{display:block;padding:11px 12px;border-radius:10px;text-decoration:none!important;
 color:var(--cp-tinte)!important;font:700 15px/1.3 var(--cp-font)}
.cp-maerkte-liste a span{display:block;font-weight:500;font-size:13px;color:var(--cp-grau);margin-top:2px}
.cp-maerkte-liste a:hover{background:var(--cp-blau-l)}
.cp-maerkte-liste .cp-bald{padding:10px 12px 6px;font:500 12.5px/1.4 var(--cp-font);color:var(--cp-grau);
 border-top:1px solid var(--cp-linie-l);margin-top:4px}
.cp-anmelden{display:inline-flex;align-items:center;padding:9px 15px;border-radius:10px;
 border:1.5px solid var(--cp-blau);color:var(--cp-blau)!important;font:700 14px/1 var(--cp-font);
 text-decoration:none!important;white-space:nowrap;background:#fff}
.cp-anmelden:hover{background:var(--cp-blau);color:#fff!important}

/* ---------- Markt-Unternavigation ---------- */
.cp-unter{background:#fff;border-bottom:1px solid var(--cp-linie);font-family:var(--cp-font);
 position:sticky;top:60px;z-index:79}
.cp-unter-in{max-width:1140px;margin:0 auto;padding:0 18px;display:flex;align-items:center;gap:4px;
 overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;height:46px}
.cp-unter-in::-webkit-scrollbar{display:none}
.cp-unter-markt{font:800 13px/1 var(--cp-font);color:var(--cp-tinte)!important;text-decoration:none!important;
 padding:7px 12px 7px 0;margin-right:6px;border-right:1px solid var(--cp-linie);white-space:nowrap}
.cp-unter-in a.cp-u{color:var(--cp-text)!important;text-decoration:none!important;font:600 13px/1 var(--cp-font);
 padding:8px 10px;border-radius:9px;white-space:nowrap;flex:none}
.cp-unter-in a.cp-u:hover{background:var(--cp-linie-l);color:var(--cp-tinte)!important}
.cp-unter-in a.cp-u.aktiv{background:var(--cp-blau-l);color:var(--cp-blau-h)!important}
.cp-unter-in a.cp-u.cp-lern{color:var(--cp-teal)!important;margin-left:auto}
.cp-unter-in a.cp-u.cp-lern.aktiv{background:var(--cp-teal-l)}
@media (max-width:700px){.cp-unter-in a.cp-u.cp-lern{margin-left:0}}

/* ---------- Knoepfe ---------- */
.cp-knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;
 font:700 16px/1.2 var(--cp-font);padding:15px 26px;border-radius:13px;text-decoration:none!important;
 border:0;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s;text-align:center}
.cp-knopf-primaer{background:var(--cp-blau);color:#fff!important;box-shadow:0 8px 22px rgba(28,106,183,.28)}
.cp-knopf-primaer:hover{background:var(--cp-blau-h);transform:translateY(-1px)}
.cp-knopf-leise{background:#fff;color:var(--cp-blau)!important;border:1.5px solid var(--cp-linie)}
.cp-knopf-leise:hover{border-color:var(--cp-blau)}
.cp-knopf-hell{background:#fff;color:var(--cp-blau-d)!important}
.cp-knopf-hell:hover{background:var(--cp-blau-l)}

/* ---------- CTA-Band auf den Infoseiten ---------- */
section.cp-cta-band{display:block;padding:40px 0!important;margin:0!important;background:none!important;border:0!important}
.cp-cta{max-width:880px;margin:0 auto;border-radius:22px;padding:34px 30px;font-family:var(--cp-font);
 background:linear-gradient(135deg,var(--cp-blau-d) 0%,var(--cp-blau) 70%,#1f7fb8 100%);color:#fff;
 box-shadow:var(--cp-sh-m);text-align:left}
.cp-cta .cp-cta-marke{display:inline-block;font:800 12px/1 var(--cp-font);letter-spacing:.09em;
 text-transform:uppercase;color:#bfe6e8;margin:0 0 12px}
.cp-cta h2.cp-cta-titel{font:800 clamp(23px,3vw,30px)/1.2 var(--cp-font);letter-spacing:-.02em;color:#fff;
 margin:0 0 12px;padding:0;border:0;text-align:left;max-width:none}
.cp-cta h2.cp-cta-titel::before,.cp-cta h2.cp-cta-titel::after{display:none}
.cp-cta p.cp-cta-text{font:400 16px/1.6 var(--cp-font);color:#e3edf8;margin:0 0 18px;max-width:40em}
.cp-cta p.cp-cta-text strong{color:#fff}
.cp-cta-preis{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;margin:0 0 20px;color:#fff}
.cp-cta-preis s{font:700 20px/1 var(--cp-font);opacity:.6;text-decoration-thickness:2px}
.cp-cta-preis b{font:800 30px/1 var(--cp-font)}
.cp-cta-preis span{font:600 14px/1.3 var(--cp-font);color:#e3edf8}
/* In einer schmalen Spalte (z.B. neben einer Liste) kompakter */
.cp-cta.cp-cta-eng{padding:26px 22px}

/* ---------- Fuss ---------- */
.cp-fuss{background:#fff;border-top:1px solid var(--cp-linie);font-family:var(--cp-font);
 color:var(--cp-text);padding:34px 0 40px;margin-top:0}
.cp-fuss-in{max-width:1140px;margin:0 auto;padding:0 18px;display:grid;gap:18px}
.cp-fuss .cp-wort{font-size:18px}
.cp-fuss-links{display:flex;flex-wrap:wrap;gap:6px 18px;font:500 14px/1.5 var(--cp-font)}
.cp-fuss-links a{color:var(--cp-text)!important;text-decoration:none!important}
.cp-fuss-links a:hover{color:var(--cp-blau)!important;text-decoration:underline!important}
.cp-fuss p.cp-fuss-klein{font:400 12.5px/1.6 var(--cp-font);color:var(--cp-grau);margin:0;max-width:62em}

/* ================= Eigene Seiten (Startseite, Landingpage, Rechtstexte) ================= */
body.cp-seite{margin:0;font:400 16px/1.65 var(--cp-font);color:var(--cp-tinte);background:var(--cp-grund);
 -webkit-font-smoothing:antialiased}
body.cp-seite *,body.cp-seite *::before,body.cp-seite *::after{box-sizing:border-box}
body.cp-seite a{color:var(--cp-blau)}
.cp-w{max-width:1140px;margin:0 auto;padding:0 20px}
.cp-w-schmal{max-width:780px;margin:0 auto;padding:0 20px}
.cp-held{background:
  radial-gradient(900px 480px at 85% -10%,#dcecff 0%,transparent 60%),
  radial-gradient(700px 420px at 0% 10%,#e3f7f4 0%,transparent 55%),
  linear-gradient(180deg,#fbfdff,var(--cp-grund));padding:56px 0 44px}
.cp-held h1{font:900 clamp(32px,5.4vw,56px)/1.06 var(--cp-font);letter-spacing:-.03em;margin:0 0 18px;
 max-width:15em}
.cp-held h1 em{font-style:normal;color:var(--cp-blau)}
.cp-held p.cp-unter-h1{font-size:clamp(17px,2vw,19px);color:var(--cp-text);max-width:36em;margin:0 0 26px}
.cp-marke-klein{display:inline-flex;align-items:center;gap:8px;font:800 12px/1 var(--cp-font);
 letter-spacing:.09em;text-transform:uppercase;color:var(--cp-teal);margin:0 0 16px}
.cp-marke-klein::before{content:"";width:22px;height:2px;background:var(--cp-teal);border-radius:2px}
.cp-knopfreihe{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cp-chips{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0;padding:0;list-style:none}
.cp-chips li{background:#fff;border:1px solid var(--cp-linie);border-radius:999px;padding:7px 13px;
 font:600 13.5px/1.2 var(--cp-font);color:var(--cp-text)}
.cp-chips li b{color:var(--cp-tinte)}
.cp-abschnitt{padding:52px 0}
.cp-abschnitt-weiss{background:#fff;border-top:1px solid var(--cp-linie-l);border-bottom:1px solid var(--cp-linie-l)}
.cp-abschnitt h2{font:800 clamp(24px,3.2vw,34px)/1.2 var(--cp-font);letter-spacing:-.02em;margin:0 0 10px}
.cp-abschnitt p.cp-vorspann{color:var(--cp-text);max-width:40em;margin:0 0 28px}
.cp-raster{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.cp-karte{background:var(--cp-karte);border:1px solid var(--cp-linie);border-radius:var(--cp-r);
 padding:22px;box-shadow:var(--cp-sh-s)}
.cp-karte h3{font:800 18px/1.3 var(--cp-font);margin:0 0 6px}
.cp-karte p{margin:0;color:var(--cp-text);font-size:15px}
.cp-symbol{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;margin-bottom:14px;
 background:var(--cp-blau-l);color:var(--cp-blau)}
.cp-symbol svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cp-symbol.t{background:var(--cp-teal-l);color:var(--cp-teal)}
.cp-symbol.g{background:var(--cp-gruen-l);color:var(--cp-gruen)}

/* Markt-Karte auf der Startseite */
.cp-markt{display:grid;gap:18px;grid-template-columns:1fr;background:#fff;border:1px solid var(--cp-linie);
 border-radius:22px;padding:26px;box-shadow:var(--cp-sh-m)}
.cp-markt-land{font:700 12px/1 var(--cp-font);letter-spacing:.06em;text-transform:uppercase;color:var(--cp-grau)}
.cp-markt h3{font:900 28px/1.1 var(--cp-font);letter-spacing:-.02em;margin:8px 0 4px}
.cp-markt .cp-markt-sub{color:var(--cp-text);margin:0}
.cp-markt ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.cp-markt li{display:flex;gap:10px;align-items:flex-start;color:var(--cp-text);font-size:15px}
.cp-markt li::before{content:"";flex:none;width:18px;height:18px;margin-top:3px;border-radius:50%;
 background:var(--cp-gruen-l) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231aa568' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}
.cp-bald-karte{border:1.5px dashed #cfd8e3;border-radius:22px;padding:24px;color:var(--cp-grau);
 display:flex;align-items:center;justify-content:center;text-align:center;min-height:120px;font-weight:600}
.cp-maerkte-raster{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:900px){
 .cp-maerkte-raster{grid-template-columns:2fr 1fr}
 .cp-markt{grid-template-columns:1.1fr 1fr;align-items:center;padding:32px}
}

/* Angebotsblock */
.cp-angebot{background:#fff;border:1px solid var(--cp-linie);border-radius:24px;box-shadow:var(--cp-sh-m);
 padding:30px 24px;display:grid;gap:22px}
.cp-preis{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px}
.cp-preis s{font:700 26px/1 var(--cp-font);color:var(--cp-grau);text-decoration-thickness:2px}
.cp-preis b{font:900 54px/1 var(--cp-font);letter-spacing:-.03em;color:var(--cp-tinte)}
.cp-preis span{font:700 17px/1.2 var(--cp-font);color:var(--cp-blau)}
.cp-angebot p{margin:0;color:var(--cp-text)}
.cp-angebot p.cp-danach{font-weight:700;color:var(--cp-tinte)}
.cp-angebot .cp-klein{font-size:13.5px;color:var(--cp-grau)}
@media (min-width:900px){.cp-angebot{grid-template-columns:1fr 1.5fr;align-items:center;padding:38px}}

/* Beispielaufgaben */
.cp-beispiel{border-radius:var(--cp-r);overflow:hidden;background:#fff;border:1px solid var(--cp-linie);box-shadow:var(--cp-sh-s)}
.cp-beispiel figcaption{padding:14px 18px;font:600 14px/1.4 var(--cp-font);color:var(--cp-text);border-top:1px solid var(--cp-linie-l)}
.cp-platzhalter{aspect-ratio:4/3;display:grid;place-items:center;text-align:center;padding:20px;
 background:repeating-linear-gradient(135deg,#f6f8fc 0 12px,#eef2f7 12px 24px);color:var(--cp-grau);font:600 14px/1.4 var(--cp-font)}
.cp-beispiel img{display:block;width:100%;height:auto}

/* Schritte */
.cp-schritte{display:grid;gap:14px;grid-template-columns:1fr;counter-reset:s;margin:0;padding:0;list-style:none}
.cp-schritte li{counter-increment:s;background:#fff;border:1px solid var(--cp-linie);border-radius:var(--cp-r);
 padding:22px 22px 22px 74px;position:relative;box-shadow:var(--cp-sh-s)}
.cp-schritte li::before{content:counter(s);position:absolute;left:22px;top:20px;width:36px;height:36px;
 border-radius:50%;background:var(--cp-blau);color:#fff;display:grid;place-items:center;font:800 16px/1 var(--cp-font)}
.cp-schritte h3{font:800 17px/1.3 var(--cp-font);margin:0 0 4px}
.cp-schritte p{margin:0;color:var(--cp-text);font-size:15px}
@media (min-width:900px){.cp-schritte{grid-template-columns:repeat(3,1fr)}}

/* FAQ */
.cp-faq{display:grid;gap:10px}
.cp-faq details{background:#fff;border:1px solid var(--cp-linie);border-radius:14px;padding:0 20px}
.cp-faq summary{cursor:pointer;list-style:none;padding:17px 30px 17px 0;font:700 16px/1.4 var(--cp-font);position:relative}
.cp-faq summary::-webkit-details-marker{display:none}
.cp-faq summary::after{content:"+";position:absolute;right:0;top:13px;font:500 24px/1 var(--cp-font);color:var(--cp-blau)}
.cp-faq details[open] summary::after{content:"\2212"}
.cp-faq details p{margin:0 0 18px;color:var(--cp-text)}

/* Schluss-CTA auf eigenen Seiten */
.cp-schluss{text-align:center}
.cp-schluss .cp-cta{text-align:center}
.cp-schluss .cp-cta h2.cp-cta-titel,.cp-schluss .cp-cta p.cp-cta-text{text-align:center;margin-left:auto;margin-right:auto}

/* Rechtstexte */
.cp-recht{padding:40px 0 56px}
.cp-recht .cp-karte{padding:30px 22px}
.cp-recht h1{font:900 clamp(28px,4vw,40px)/1.15 var(--cp-font);letter-spacing:-.025em;margin:0 0 10px}
.cp-recht h2{font:800 19px/1.35 var(--cp-font);margin:30px 0 8px}
.cp-recht p,.cp-recht li{color:var(--cp-text)}
@media (min-width:700px){.cp-recht .cp-karte{padding:44px}}

@media (max-width:640px){
 .cp-kopf-in{padding:0 12px;gap:4px}
 .cp-wort{font-size:19px}
 .cp-maerkte>summary{padding:10px 8px}
 .cp-anmelden{padding:9px 12px}
 .cp-cta{padding:26px 20px;border-radius:18px}
 .cp-held{padding:40px 0 34px}
 .cp-abschnitt{padding:40px 0}
}
@media (max-width:360px){.cp-maerkte>summary{font-size:13px}.cp-anmelden{font-size:13px}}
/* Nachtrag: Absaetze in Rechtstexten brauchen Abstand (.cp-karte p setzt margin 0) */
.cp-recht .cp-karte p{margin:0 0 12px}
/* Maerkte-Menue mobil: an den Bildschirm heften statt am Knopf, sonst ragt es links heraus */
@media (max-width:640px){.cp-maerkte-liste{position:fixed;left:12px;right:12px;top:66px;width:auto;max-width:none}}
/* Beispielaufgaben: hohe Screenshots, oben angeschnitten gezeigt, ganzes Bild per Klick */
.cp-beispiel .cp-bild{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;background:#f6f8fc}
.cp-beispiel .cp-bild img{width:100%;height:100%;object-fit:cover;object-position:top}
.cp-beispiel .cp-bild::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;
 background:linear-gradient(180deg,rgba(255,255,255,0),#fff)}
#beispiele .cp-raster{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}