/* === One-to-One im Erscheinungsbild der zITBOx ==============================
   Zusatz zu lernit.css und handreichung.css, eingebunden von
   scripts/baue_handreichung.py (ZITBOX_STIL) für Portal, Handreichung,
   Ideenpool und Kantonsfassungen. LernIT selbst bleibt unverändert.

   Grundlage zitbox.ch (BuddyBoss- und Brizy-Variablen, 19.10.2026):
     Grün #4B8021, helles Grün #5EAD22, Titel #1E2132 in Cairo 600,
     Text in Roboto, Flächen #EDEDED/#F5F7F5, Ränder #D6D9DD, Fusszeile #0A0909,
     grosser Bogen im Titelbild, stark gerundete Kästen, runde Knöpfe.
   Etwas moderner als zitbox.ch: Verläufe, feines Punktraster, weiche Schatten.
   Goldbraun bleibt die zweite Akzentfarbe (Kapitel-Symbole, Hinweise).

   Barrierefreiheit: Weisse Schrift nur auf #4B8021 oder dunkler (4.8:1 und mehr).
   Das helle Grün #5EAD22 erscheint nur als Lichtfleck im Verlauf, nie unter Text.

   Zurück zur früheren Gestaltung: rueckweg-original/LIESMICH.md
   ========================================================================== */
@import url("../assets/zitbox/fonts.css");

:root {
  --zb-gruen:      #4B8021;
  --zb-gruen-tief: #3E6B1B;
  --zb-gruen-hell: #5EAD22;
  --zb-gruen-zart: #EEF4E6;
  --zb-titel:      #1E2132;
  --zb-text:       #3F4448;
  --zb-flaeche:    #EDEDED;
  --zb-grund:      #F4F6F2;
  --zb-rand:       #D6D9DD;
  /* Weitere Farben der zITBOx (Brizy-Palette), sparsam als Akzent je Bereich.
     Helle Stufen nur als Dekor, für Schrift die dunklen (Kontrast ab 4.9:1). */
  --zb-blau-hell:  #62A8E5;
  --zb-beere:      #AA4C7D;
  --zb-gold:       #CCA36E;
  --zb-akzent:     var(--zb-gruen-hell);   /* je Bereich überschrieben, siehe unten */
  --blau:          #2B6CA3;
  --blau-hell:     #E9F3FC;
  --violett:       #93406C;                /* KI im Ideenpool: Beerenrot statt Violett */
  --violett-hell:  #F8EBF2;
  --zb-verlauf:
    radial-gradient(900px 420px at 92% -20%, rgba(94,173,34,.50), transparent 60%),
    radial-gradient(700px 380px at -10% 120%, rgba(32,58,14,.45), transparent 60%),
    linear-gradient(135deg, var(--zb-gruen-tief) 0%, var(--zb-gruen) 60%, #4F8723 100%);
  --zb-raster: radial-gradient(rgba(255,255,255,.9) 1px, transparent 1.2px);

  /* Bestehende Variablen umlenken: so übernehmen alle Bausteine die Farben.
     --gold, --gold-hell und --gold-text bleiben bewusst unverändert. */
  --gruen-dunkel: var(--zb-titel);
  --gruen-mittel: var(--zb-gruen);
  --gruen-hell:   var(--zb-gruen-hell);
  --gruen-bg:     var(--zb-grund);
  --grau-text:    var(--zb-text);
  --grau-leicht:  #EEF0EC;
  --grau-rand:    var(--zb-rand);
  --schatten:     0 1px 2px rgba(30,33,50,.06), 0 8px 24px -6px rgba(30,33,50,.10);
  --radius:       22px;
  --radius-kl:    14px;
}

html { font-size: 17px; }
body {
  font-family: 'Roboto', 'Segoe UI', Arial, sans-serif; color: var(--zb-text);
  background:
    radial-gradient(1200px 600px at 100% 0, rgba(94,173,34,.07), transparent 70%),
    var(--zb-grund);
  background-attachment: fixed;
}
h1, h2, h3, h4,
.hr-held__titel, .hr-kopf__titel, .pt-held__titel, .hr-angebot__titel, .hr-einstieg__titel,
.pt-angebot__titel, .pt-abschnitt__titel, .hr-schritt__titel, .hr-startklar-teaser__titel, .hr-rahmen__titel {
  font-family: 'Cairo', 'Segoe UI', Arial, sans-serif; font-weight: 600; color: var(--zb-titel); letter-spacing: 0;
}
a { color: var(--zb-gruen); }
:focus-visible { outline-color: var(--zb-gruen); }

/* --- Kopfzeile: weiss, leicht durchscheinend, zITBOx-Logo --------------- */
.header {
  background: rgba(255,255,255,.88); color: var(--zb-titel); height: 72px; padding: 0 32px;
  box-shadow: 0 1px 0 var(--zb-rand), 0 8px 24px -16px rgba(30,33,50,.25);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
}
.hr-marke::before {
  content: ""; flex: none; width: 124px; height: 28px; padding-right: 14px;
  border-right: 1px solid var(--zb-rand); background-origin: content-box;
  background: url("../assets/zitbox/logo.png") left center / contain no-repeat content-box;
}
.hr-marke__icon { display: none; }
.header__title { font-family: 'Cairo', sans-serif; font-weight: 600; font-size: 1.12rem; color: var(--zb-titel); }
.plattform-btn {
  color: var(--zb-titel); border: 0; border-radius: 999px; padding: 7px 14px; margin: 0 2px;
  font-weight: 500; font-size: .92rem;
}
.plattform-btn:hover { background: var(--zb-gruen-zart); color: var(--zb-gruen-tief); border-color: transparent; }
.plattform-btn.aktiv { background: var(--zb-gruen); color: #fff; border-color: transparent;
  box-shadow: 0 4px 12px -4px rgba(75,128,33,.6); }
.hr-suche-kopf, .hr-stand-kopf {
  color: var(--zb-titel) !important; background: #fff !important;
  border: 1px solid var(--zb-rand) !important; border-radius: 999px !important;
}
.hr-suche-kopf:hover, .hr-stand-kopf:hover { border-color: var(--zb-gruen) !important; color: var(--zb-gruen) !important; }

.breadcrumb { color: #5A5A5A; }
.hr .breadcrumb a { color: var(--zb-gruen); }

/* --- Titelbild: zITBOx-Bogen mit Verlauf und Punktraster ------------------- */
.hr-held:not(.hr-held--landing) {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--zb-verlauf); color: #fff;
  max-width: 820px; margin: 10px 0 28px; padding: 40px 150px 44px 44px;
  border-radius: 22px 340px 22px 22px / 22px 100% 22px 22px;
  box-shadow: 0 18px 40px -22px rgba(62,107,27,.75);
}
.hr-held:not(.hr-held--landing)::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--zb-raster); background-size: 20px 20px; opacity: .10;
  -webkit-mask-image: linear-gradient(115deg, transparent 35%, #000 90%); mask-image: linear-gradient(115deg, transparent 35%, #000 90%);
}
.hr-held:not(.hr-held--landing) .hr-held__titel { color: #fff; font-size: 2.2rem; max-width: 19ch; text-wrap: balance; }
.hr-held:not(.hr-held--landing) .hr-held__kurz { color: #fff; max-width: 42ch; }
.hr-held:not(.hr-held--landing) .hr-held__marke { color: #fff; opacity: .9; }
.hr-held__marke { color: var(--zb-gruen); }

/* Portal: dieselbe Fläche, gross, mit Bogen unten */
.pt-seite { background: var(--zb-grund); }
.pt-held { background: var(--zb-verlauf) !important; border-radius: 0 0 0 min(30vw, 420px); }
.pt-held::after { opacity: .09; background-image: var(--zb-raster); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 85%); mask-image: linear-gradient(100deg, transparent 30%, #000 85%); }
.pt-held__marke { color: #F1D8B4; }
.pt-held__titel, .pt-held__kurz { color: #fff; }
.pt-suche input { border-radius: 999px; box-shadow: 0 10px 30px -12px rgba(0,0,0,.45); }
.pt-suche input:focus { outline-color: #fff; }
.pt-beliebt button {
  background: rgba(255,255,255,.12) !important; color: #fff !important;
  border: 1px solid rgba(255,255,255,.55) !important; border-radius: 999px; font-weight: 500;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.pt-beliebt button:hover { background: #fff !important; color: var(--zb-gruen-tief) !important; }

/* --- Karten: weiss, weich, mit Lichtkante beim Überfahren ----------------- */
.hr-einstieg, .hr-angebot, .hr-schritt, .hr-leiste, .pt-angebot, .pt-neu__karte, .hr-rahmen__karte a {
  border-radius: var(--radius);
}
.hr-einstieg, .hr-angebot, .pt-angebot, .pt-neu__karte, .hr-rahmen__karte a, .hr-schritt {
  background: linear-gradient(180deg, #fff 0%, #fff 70%, #FAFBF8 100%);
  box-shadow: var(--schatten); border: 1px solid rgba(214,217,221,.7);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hr-einstieg:hover, .hr-angebot:hover, .pt-angebot:hover, .pt-neu__karte:hover, .hr-rahmen__karte a:hover {
  transform: translateY(-3px); border-color: rgba(75,128,33,.45);
  box-shadow: 0 2px 4px rgba(30,33,50,.06), 0 18px 36px -12px rgba(62,107,27,.35);
}
/* Farbkante oben: innerhalb der Rundung (overflow), je Angebot eine zITBOx-Farbe */
.hr-angebot, .pt-angebot { position: relative; overflow: hidden; border-top: 0 !important; }
.pt-angebot::before, .hr-angebot::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--kante, var(--zb-gruen));
}
.pt-angebot--handreichung, .hr-angebot--handreichung { --kante: var(--zb-gold); }
.pt-angebot--ideenpool, .hr-angebot--ideenpool       { --kante: var(--zb-blau-hell); }
.pt-angebot--lernit, .hr-angebot--lernit             { --kante: var(--zb-gruen-hell); }
.pt-angebot__symbol { background: var(--gold-hell); color: var(--gold-text); }
.pt-angebot--ideenpool .pt-angebot__symbol { background: var(--blau-hell); color: var(--blau); }
.pt-angebot--lernit .pt-angebot__symbol, .pt-rolle__symbol { background: var(--zb-gruen-zart); color: var(--zb-gruen); }
.pt-angebot__los { background: var(--zb-gruen) !important; color: #fff !important; font-weight: 500;
  box-shadow: 0 6px 16px -8px rgba(62,107,27,.8); }
.pt-angebot__los:hover { background: var(--zb-gruen-tief) !important; }
.pt-zusammen { background: var(--zb-titel); border-radius: var(--radius); position: relative; overflow: hidden; }
.pt-zusammen::after { content: ""; position: absolute; right: -120px; top: -120px; width: 320px; height: 320px;
  border-radius: 50%; background: radial-gradient(circle, rgba(94,173,34,.35), transparent 70%); pointer-events: none; }
.pt-zusammen__links a:hover { color: var(--zb-gruen-hell); }

/* Kästen im Text */
.hr-rahmen { background: linear-gradient(180deg, #fff 0%, var(--zb-grund) 100%); border: 1px solid rgba(214,217,221,.7); }
.hr-karten > p { background: #fff; border: 1px solid rgba(214,217,221,.7); border-radius: var(--radius-kl); }
.hr-status, .hinweis-rechtlich { border-radius: var(--radius-kl); }
.hr-kopf__icon { border-radius: 20px; }

/* Startklar-Teaser: Verlauf wie das Titelbild */
.hr-startklar-teaser { position: relative; overflow: hidden; isolation: isolate;
  background: var(--zb-verlauf); border-radius: var(--radius); box-shadow: 0 14px 30px -18px rgba(62,107,27,.8); }
.hr-startklar-teaser::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .09;
  background-image: var(--zb-raster); background-size: 18px 18px; }
.hr-startklar-teaser__titel { color: #fff; }
.hr-startklar-teaser__los { background: #fff; color: var(--zb-titel); border-radius: 999px; padding: 8px 20px; font-weight: 500; }

/* Seitenleiste */
.hr-leiste { border: 1px solid rgba(214,217,221,.7); }
.hr-leiste__schritt a.aktiv, .hr-leiste__rahmen a.aktiv { background: var(--zb-gruen-zart); color: var(--zb-titel); }

/* Knöpfe rund wie auf zitbox.ch */
.ip-knopf, button.ip-knopf, .hr-knopf { border-radius: 999px; }

/* --- Fusszeile: schwarz wie auf zitbox.ch, mit Verlaufskante ------------- */
.hr-fuss, .footer {
  position: relative; background: #0A0909; color: #fff; padding: 30px 16px 34px; margin-top: 48px;
}
.hr-fuss::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--zb-gruen) 0 40%, var(--zb-blau-hell) 40% 60%, var(--zb-beere) 60% 75%, var(--zb-gold) 75%); }
.hr .footer__link, .footer__link, .footer__version { color: #fff !important; }
.footer__link:hover { color: var(--zb-gruen-hell) !important; }

@media (prefers-reduced-motion: reduce) {
  .hr-einstieg, .hr-angebot, .pt-angebot, .pt-neu__karte, .hr-rahmen__karte a { transition: none; }
  .hr-einstieg:hover, .hr-angebot:hover, .pt-angebot:hover, .pt-neu__karte:hover, .hr-rahmen__karte a:hover { transform: none; }
}
@media (max-width: 760px) {
  .header { height: auto; min-height: 60px; padding: 8px 16px; flex-wrap: wrap; }
  .hr-marke::before { width: 96px; height: 22px; }
  .hr-held:not(.hr-held--landing) { padding: 28px 22px; border-radius: var(--radius); }
  .pt-held { border-radius: 0 0 0 80px; }
}
@media print {
  .header { backdrop-filter: none; background: #fff; }
  .hr-held:not(.hr-held--landing), .hr-startklar-teaser { background: #fff; color: var(--zb-titel); box-shadow: none; }
  .hr-held:not(.hr-held--landing) * { color: var(--zb-titel) !important; }
  .hr-fuss { background: #fff; color: var(--zb-titel); }
}
@media print { .hr .footer__link, .footer__link, .footer__version { color: var(--zb-titel) !important; } .hr-fuss::before { display: none; } }

/* --- Akzent je Bereich ------------------------------------------------------
   Grün bleibt die Grundfarbe (Titelbild, Knöpfe, Links). Jeder Bereich trägt
   dazu eine zweite zITBOx-Farbe, nur in Kanten, Ring und Marke:
   Handreichung und Vorlagen Goldbraun, Ideenpool Blau, KI Beerenrot. */
.hr-bereich--handreichung, .hr-bereich--vorlagen {
  --zb-akzent: var(--zb-gold); --zb-akzent-text: var(--gold-text); --zb-akzent-zart: var(--gold-hell); }
.hr-bereich--ideenpool {
  --zb-akzent: var(--zb-blau-hell); --zb-akzent-text: var(--blau); --zb-akzent-zart: var(--blau-hell); }
.hr-bereich--lernpfad {
  --zb-akzent: var(--zb-gruen-hell); --zb-akzent-text: var(--zb-gruen); --zb-akzent-zart: var(--zb-gruen-zart); }

/* Titelbild: Marke als Pille, ein feiner Ring in der Akzentfarbe im Bogen */
.hr-held:not(.hr-held--landing) .hr-held__marke {
  display: inline-block; padding: 3px 12px; border-radius: 999px; opacity: 1;
  background: var(--zb-akzent-zart, var(--zb-gruen-zart)); color: var(--zb-akzent-text, var(--zb-gruen));
}
.hr-held:not(.hr-held--landing)::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: 36px; bottom: -150px; width: 320px; height: 320px; border-radius: 50%;
  border: 2px solid var(--zb-akzent); opacity: .6;
  box-shadow: 0 0 0 26px rgba(255,255,255,.04), 0 0 0 54px rgba(255,255,255,.03);
}

/* Karten im Bereich: Kante in der Akzentfarbe, innerhalb der Rundung */
.hr-einstieg { position: relative; overflow: hidden; }
.hr-einstieg::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--zb-akzent);
}
.ip-einstieg--ki { border-top: 0 !important; }
.ip-einstieg--ki::before { background: var(--zb-beere); }
.ip-einstieg--ki .hr-einstieg__titel { color: var(--violett); }

/* Seitenleiste: aktive Seite mit Strich in der Akzentfarbe */
.hr-leiste__schritt a.aktiv, .hr-leiste__rahmen a.aktiv { box-shadow: inset 3px 0 0 var(--zb-akzent); }
.hr-leiste__extra:hover { color: var(--zb-akzent-text, var(--zb-gruen)); }

/* Kopf einer Kapitelseite: Schrittangabe in der Akzentschrift */
.hr-kopf__schritt { color: var(--zb-akzent-text, var(--gold-text)); }

@media (max-width: 760px) {
  .hr-held:not(.hr-held--landing)::before { width: 200px; height: 200px; bottom: -110px; right: -40px; }
}

/* Feinschliff: Kanten als Balken mit Abstand zu den Ecken (kein spitzes Auslaufen
   in der Rundung), Titel ausgewogen auf zwei Zeilen, Ring ausserhalb des Inhalts */
.pt-angebot::before, .hr-angebot::before, .hr-einstieg::before {
  left: 24px; right: 24px; height: 4px; border-radius: 0 0 4px 4px;
}
.hr-held:not(.hr-held--landing) .hr-held__titel { max-width: 24ch; }
.hr-held:not(.hr-held--landing)::before {
  right: -70px; bottom: -210px; width: 400px; height: 400px; opacity: .5;
}
.hr-held:not(.hr-held--landing)::before { right: -170px; bottom: -240px; }