/* 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; position: sticky; top: 0; z-index: 500; }
  .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; }
  /* README v661: auf localace.ch ausgeblendete DE-Inhalte (Klasse land-ch setzt kopf-nav.js) */
  .land-ch .ch-ausblenden { display: none !important; }
  .mobil-menu-button { display: none; background: none; border: none; padding: 4px; margin: 0; cursor: pointer; }
  #mobil-menu-panel { display: none; }
  /* Bugfix (siehe README-Nachtrag "Mobil-Menu: Ganzseiten-Leerraum"):
     bottom:0 zog das Panel bisher bis zum unteren Bildschirmrand, auch
     wenn die 4 Links nach wenigen hundert Pixeln enden - darunter blieb
     nur leere Teal-Flaeche stehen (wirkte wie eine kaputte/leere Seite).
     Jetzt schrumpft das Panel auf seinen Inhalt (kein bottom:0 mehr) und
     bekommt einen Schatten als Dropdown-Abschluss statt Vollbild-Overlay. */
  #mobil-menu-panel.offen { display: flex; flex-direction: column; background: #00838a; position: fixed; top: 64px; left: 0; right: 0; max-height: calc(100vh - 64px); z-index: 400; overflow-y: auto; box-sizing: border-box; box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
  #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); }
  /* README v652: neue Kopfnavigation - "Wie funktioniert's?", Dropdown
     "Zielgruppen", "Preise"; rechts "Anmelden" als Text-Link plus
     "Kostenlos starten" als Hauptbutton. Menue-Schrift Plus Jakarta Sans
     (lokal gehostet wie Poppins, OFL-Lizenz in static/fonts/). Die
     Knopf-Regeln setzen globale button-Stile (margin/border/hover) bewusst
     zurueck, da index.html und gemeinsam-landing.css button global stylen. */
  @font-face { font-family: 'Plus Jakarta Sans'; src: url('/static/fonts/PlusJakartaSans-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
  @font-face { font-family: 'Plus Jakarta Sans'; src: url('/static/fonts/PlusJakartaSans-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
  @font-face { font-family: 'Plus Jakarta Sans'; src: url('/static/fonts/PlusJakartaSans-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
  .kopf-nav { display: flex; align-items: center; gap: 10px; }
  .kopf .kopf-link, .kopf .kopf-anmelden-link, .kopf .kopf-cta, .kopf-dropdown-menu { font-family: 'Plus Jakarta Sans', 'Poppins', system-ui, sans-serif; }
  .kopf .kopf-link { color: #fff; text-decoration: none; font-size: 15px; font-weight: 700; letter-spacing: 0.015em; line-height: 1.4; padding: 7px 13px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; transition: background 0.15s; }
  /* README v658: Hover ohne Bewegung/Unterstreichung - dezente helle Pille */
  .kopf .kopf-link:hover, .kopf .kopf-anmelden-link:hover, .kopf-dropdown.offen .kopf-dropdown-knopf { background: rgba(255,255,255,0.18); }
  .kopf .kopf-dropdown-knopf { background: none; border: none; border-radius: 999px; margin: 0; cursor: pointer; color: #fff; box-shadow: none; gap: 8px; }
  .kopf .kopf-dropdown-knopf:hover { background: rgba(255,255,255,0.18); color: #fff; }
  .kopf .kopf-dropdown-knopf:focus { color: #fff; }
  .kopf-pfeil { transition: transform 0.2s; }
  .kopf-dropdown { position: relative; }
  .kopf-dropdown-menu { display: none; position: absolute; top: 100%; left: -6px; padding-top: 10px; z-index: 600; }
  .kopf-dropdown-menu-innen { background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.18); padding: 8px; min-width: 340px; }
  .kopf-dropdown-menu a { display: block; padding: 10px 14px; border-radius: 10px; text-decoration: none; color: #1c2541; }
  .kopf-dropdown-menu a strong { display: block; font-size: 15px; font-weight: 700; }
  .kopf-dropdown-menu a span { display: block; font-size: 13px; font-weight: 500; color: #5b6478; margin-top: 2px; }
  .kopf-dropdown-menu a:hover, .kopf-dropdown-menu a:focus { background: #e6f7f7; }
  .kopf-dropdown.offen .kopf-dropdown-menu, .kopf-dropdown:focus-within .kopf-dropdown-menu { display: block; }
  @media (hover: hover) { .kopf-dropdown:hover .kopf-dropdown-menu { display: block; } .kopf-dropdown:hover .kopf-pfeil { transform: rotate(180deg); } }
  .kopf-dropdown.offen .kopf-pfeil { transform: rotate(180deg); }
  .kopf-gast { display: flex; align-items: center; gap: 12px; }
  .kopf .kopf-anmelden-link { color: #fff; text-decoration: none; font-size: 15px; font-weight: 700; letter-spacing: 0.015em; padding: 7px 14px; border-radius: 999px; transition: background 0.15s; }
  .kopf .kopf-cta { background: #f4a83c; color: #1c2541; text-decoration: none; border-radius: 999px; padding: 10px 20px; font-size: 15px; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; box-shadow: 0 3px 10px rgba(0,0,0,0.12); transition: box-shadow 0.15s, background 0.15s; }
  .kopf .kopf-cta:hover { background: #f7b65a; box-shadow: 0 4px 14px rgba(0,0,0,0.18); }
  #mobil-menu-panel .mobil-menu-gruppe { color: rgba(255,255,255,0.7); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin: 0; padding: 14px 20px 4px 20px; border-top: 1px solid rgba(255,255,255,0.15); }
  #mobil-menu-panel a.mobil-menu-unterpunkt { padding-left: 34px; border-top: none; }
  #mobil-menu-panel a.mobil-menu-anmelden { margin-top: 10px; border-top: 1px solid rgba(255,255,255,0.5); }
  @media (max-width: 900px) { .kopf-nav { gap: 4px; } .kopf .kopf-link, .kopf .kopf-anmelden-link, .kopf .kopf-cta { font-size: 14px; } .kopf-gast { gap: 8px; } }
  @media (max-width: 600px) {
    .kopf .kopf-anmelden-link { display: none; }
    .kopf .kopf-cta { padding: 8px 14px; font-size: 13px; }
  }
  @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: 40px !important; }  /* README v648: neues Logo braucht etwas mehr Hoehe */
    .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); }
  }