/* static/gemeinsam.css - gemeinsame Basis-Styles der zehn statischen
   Seiten (agb, datenschutz, fuer-eltern, fuer-lehrkraefte, fuer-schueler,
   fuer-studierende, impressum, kontakt, ueber-uns) sowie der Kopf-
   Anmelden-Button in static/index.html.
   Hintergrund: bis 10.08.2026 pflegte jede der neun statischen Seiten
   diese Styles komplett dupliziert in einem eigenen <style>-Block -
   ein Fix (Kontrast des Anmelden-Buttons) landete dadurch zunaechst nur
   auf EINER Seite, weil die anderen neun ihre eigene Kopie hatten. Diese
   Datei ist jetzt die einzige Quelle fuer diese gemeinsamen Regeln -
   Aenderungen hier wirken automatisch auf allen zehn Seiten. */

@font-face { font-family: 'Poppins'; src: url('/static/fonts/Poppins-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/static/fonts/Poppins-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/static/fonts/Poppins-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/static/fonts/Poppins-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/static/fonts/Poppins-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
  html { background-color: #fafcfc; background-image: url('/static/hintergrund-muster.svg'); background-repeat: repeat; }
  body { font-family: 'Poppins', system-ui, sans-serif; max-width: 700px; margin: 0 auto 40px auto; padding: 0 16px; color: #1a1a1a; line-height: 1.6; background: transparent; overflow-x: hidden; }
  button { font-family: inherit; }
  img { max-width: 100%; height: auto; }
  h1 { font-size: 1.4rem; color: #1c2541; }
  h2 { color: #1c2541; }
  h1, h2, h3 { overflow-wrap: break-word; word-break: break-word; }
  h3 { color: #1c2541; }
  a { color: #2d5be3; }
  .karte { border: none; border-radius: 16px; padding: 20px 24px; margin-top: 20px; background: #faf5ec; }
  .inhalt-karte { background: #faf5ec; border-radius: 16px; padding: 28px 32px; margin: 32px 0; }
  .hinweis { background: #fff3cd; border-radius: 8px; padding: 14px; margin-bottom: 24px; font-size: 0.9rem; }
  .kopf { display: flex; justify-content: space-between; align-items: center; background: #00b5b5; padding: 30px 32px; width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); box-sizing: border-box; }
  .kopf-anmelden { background: white; color: #00838a; border: 1.5px solid white; border-radius: 999px; padding: 8px 20px; font-size: 0.9rem; line-height: 1.6; font-weight: 600; font-family: inherit; text-decoration: none; margin: 0; }
  .kopf-anmelden:hover { background: #d9f7f7; color: #00646a; border-color: #d9f7f7; }
  /* Nachtrag (Footer-Feinschliff, siehe README): duenne, dunklere Trennlinie
     oben am Footer, damit der Uebergang vom (sehr hellen) Seiten-Hintergrund
     zum tuerkisen Footer klarer abgesetzt ist, statt fliessend ineinander
     ueberzugehen - bewusst dezent (niedrige Deckkraft, gleiche Farbfamilie
     wie die Footer-Schrift #003d40) statt eines harten Kontrasts. */
  #fusszeile { margin-top: 60px; padding: 32px 24px 20px 24px; background: #00b5b5; border-top: 3px solid rgba(0,61,64,0.18); width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; box-sizing: border-box; }
  .footer-spalten { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; max-width: 900px; margin: 0 auto; }
  .footer-spalte { flex: 1; min-width: 160px; }
  .footer-logo-spalte { flex: 1.4; min-width: 220px; }
  .footer-logo { height: 32px; display: block; margin-bottom: 8px; }
  .footer-claim { font-size: 0.8rem; color: rgba(255,255,255,0.85); margin: 0; }
  .footer-spalte h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: #003d40; margin: 0 0 10px 0; }
  .footer-spalte ul { list-style: none; padding: 0; margin: 0; }
  .footer-spalte li { margin-bottom: 6px; }
  .footer-spalte a { color: #003d40; text-decoration: none; font-size: 0.9rem; }
  .footer-spalte a:hover { color: #001f21; text-decoration: underline; }
  .footer-copyright { text-align: center; font-size: 0.75rem; color:#707070; margin: 20px auto 0 auto; }
  /* Nachtrag: Footer-Sektion "Lern-Ressourcen" (SEO-Landingpages) - gleiche
     Schriftfarbe/-familie wie die bestehenden Footer-Spalten, aber
     bewusst kleinere Schrift (0.78rem statt 0.9rem), damit die deutlich
     laengere Linkliste nicht zu dominant wirkt. Eigene Klassen (statt
     .footer-spalte wiederzuverwenden), da 5 Spalten (3 Lern-Ressourcen +
     2 bestehende) in einer Reihe zu eng würden - die neue Sektion bekommt
     stattdessen eine eigene volle Zeile UNTER der bestehenden. */
  .footer-lernressourcen { max-width: 1040px; margin: 28px auto 0 auto; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.3); }
  .footer-lernressourcen > h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: #003d40; margin: 0 0 14px 0; }
  .footer-lernressourcen-spalten { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; }
  .footer-lernressourcen-spalte { flex: 1; min-width: 150px; }
  /* Nachtrag (Footer v258): die 4 Spalten sind <details>/<summary> und
     jetzt auf ALLEN Bildschirmgroessen (Desktop UND Mobile) standardmaessig
     eingeklappt - kein "open"-Attribut mehr im HTML, kein CSS-Override und
     kein JavaScript noetig. Das native UA-Verhalten von <details> reicht
     komplett aus und ist die einzige Variante, die zuverlaessig in allen
     Browsern funktioniert (siehe Lesson-Learned zu v257 im README: ein
     CSS-"display:block!important"-Zwang gegen den geschlossenen Zustand
     brach in aktuellen Browsern und machte den ganzen Footer unklickbar). */
  .footer-lernressourcen-spalte summary { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: #003d40; opacity: 0.75; margin: 0 0 8px 0; font-weight: 700; list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: flex-start; }
  .footer-lernressourcen-spalte summary::-webkit-details-marker { display: none; }
  .footer-lernressourcen-spalte summary::marker { display: none; content: ""; }
  .footer-lernressourcen-spalte summary::before { content: "+"; font-size: 1rem; font-weight: 700; margin-right: 8px; }
  .footer-lernressourcen-spalte[open] summary::before { content: "\2212"; }
  .footer-lernressourcen-spalte > ul { padding-top: 10px; }
  .footer-lernressourcen-spalte ul { list-style: none; padding: 0; margin: 0; }
  .footer-lernressourcen-spalte li { margin-bottom: 5px; }
  .footer-lernressourcen-spalte a { color: #003d40; text-decoration: none; font-size: 0.78rem; }
  .footer-lernressourcen-spalte a:hover { color: #001f21; text-decoration: underline; }
  .versteckt { display: none !important; }
  .mobil-menu-button { display: none; background: none; border: none; padding: 4px; margin: 0; cursor: pointer; }
  #mobil-menu-panel { display: none; }
  #mobil-menu-panel.offen { display: flex; flex-direction: column; background: #00838a; position: fixed; top: 60px; left: 0; right: 0; bottom: 0; z-index: 400; overflow-y: auto; box-sizing: border-box; }
  #mobil-menu-panel a { color: white; text-decoration: none; font-weight: 600; font-size: 0.95rem; padding: 14px 20px; border-top: 1px solid rgba(255,255,255,0.15); }
  @media (max-width: 600px) {
    .kopf { flex-wrap: nowrap; padding: 12px 16px; }
    .kopf > div:first-child { gap: 0 !important; }
    .kopf nav { display: none !important; }
    .mobil-menu-button { display: flex; align-items: center; justify-content: center; }
    .kopf img { height: 30px !important; }
    .kopf-anmelden { padding: 7px 14px; font-size: 0.82rem; }
    /* Bugfix (siehe README-Nachtrag "Footer Lern-Ressourcen"): auf
       Mobilgeräten sollen die 4 Spalten UNTEREINANDER stapeln statt sich
       nebeneinander zu quetschen (Klickfläche der einzelnen Links bliebe
       sonst zu klein). Nachtrag (Footer-Feinschliff): zusaetzlich jede
       Spalte als natives Akkordeon (details/summary, siehe oben) statt
       alle Links permanent ausgeklappt zu zeigen - verhindert langes
       Scrollen durch ~40 Footer-Links auf dem Smartphone. */
    .footer-lernressourcen-spalten { flex-direction: column; gap: 0; }
    .footer-lernressourcen-spalte { border-top: 1px solid rgba(255,255,255,0.25); padding: 12px 0; min-width: 100%; }
    .footer-lernressourcen-spalte:last-child { border-bottom: 1px solid rgba(255,255,255,0.25); }
  }