@import url('../fonts/fonts.css');

/* ================================================================
   Geogenial – gemeinsames Fundament aller Module
   Welt des Schulatlas: Einband, Atlaspapier, Gradnetz, Daumenregister.
   Rot (--marke) ist gesetzlich den gesuchten/abgefragten Punkten vorbehalten.
   Modulspezifisches steht in karten.css, loesen.css, koordinaten.css, start.css.
   ================================================================ */
:root {
  --einband: #1b2d38;
  --einband-2: #243b48;
  --einband-text: #eef2ec;
  --einband-text-2: #b7c5c4;

  --tisch: #dcdfd3;
  --tisch-linie: rgba(35, 96, 143, 0.07);
  --pult: #f5f4ee;
  --pult-2: #ebeae1;
  --pult-3: #e2e1d6;
  --tinte: #1c211e;
  --tinte-2: #4b524c;
  --tinte-3: #666c65;
  --linie: #d2d2c5;
  --linie-stark: #aeaf9f;

  --wasser: #23608f;
  --wasser-tief: #1a4b71;
  --wasser-hell: #dbe8f0;
  --tiefland: #5f8f4c;
  --hochland: #a0743f;
  --marke: #c21a30;
  --marke-tief: #9c1225;

  /* Daumenregister */
  --reg-welt: #1f4e6e;
  --reg-europa: #2f6fa3;
  --reg-deutschland: #4f7f3d;
  --reg-afrika: #b7772b;
  --reg-asien: #c9a227;
  --reg-nordamerika: #7a5a9c;
  --reg-suedamerika: #2f8a7e;
  --reg-ozeanien: #4f7fb5;

  /* Gradnetz: Breitenkreise und Meridiane haben je eine feste Farbe (Farbe + Form, nie Farbe allein) */
  --breite: #0f7470;
  --breite-hell: #d7ecea;
  --laenge: #b35c12;
  --laenge-hell: #f6e3d0;

  /* Rueckmeldung (kein Rot: Rot gehoert den Markern) */
  --richtig: #3f7a2e;
  --richtig-hell: #e7f1df;
  --daneben: #b0601f;
  --daneben-hell: #fbeedd;

  /* Module im Inhaltsverzeichnis */
  --modul-karten: #2f6fa3;
  --modul-koordinaten: #0f7470;
  --modul-tektonik: #6a3d9a;
  --modul-klima: #b7772b;
  --modul-quiz: #7a5a9c;

  --schrift: 'Barlow', system-ui, sans-serif;
  --schrift-schmal: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;

  --r-klein: 3px;
  --r: 5px;
  --schatten-blatt: 0 1px 2px rgba(20, 30, 25, 0.12), 0 12px 32px -8px rgba(20, 30, 25, 0.28);
  --schatten-pop: 0 2px 6px rgba(20, 30, 25, 0.12), 0 18px 40px -12px rgba(20, 30, 25, 0.35);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--schrift); font-size: 15px; line-height: 1.45; color: var(--tinte);
  background: var(--tisch); font-variant-numeric: tabular-nums;
}
::selection { background: var(--wasser-hell); color: var(--wasser-tief); }
:focus-visible { outline: 2px solid var(--wasser); outline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--wasser); text-underline-offset: 0.18em; }
input, textarea { caret-color: var(--wasser); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Scrollleisten im Pult */
.pult-scroll { scrollbar-width: thin; scrollbar-color: var(--linie-stark) transparent; }
.pult-scroll::-webkit-scrollbar { width: 8px; }
.pult-scroll::-webkit-scrollbar-thumb { background: var(--linie-stark); border-radius: 8px; border: 2px solid var(--pult); }

/* ---------------------------------------------------------------- Kopfleiste (Einband) */
.einband {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; padding: 0 14px 0 16px;
  background: var(--einband); color: var(--einband-text);
  border-bottom: 1px solid #0f1c24;
}
.marke-wort { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; margin-right: 6px; }
.marke-wort svg { width: 26px; height: 26px; flex: none; }
.marke-wort b { font-family: var(--schrift-schmal); font-weight: 600; font-size: 21px; letter-spacing: 0.01em; }
.marke-wort b span { color: var(--einband-text-2); font-weight: 500; }
.einband-titel {
  min-width: 0; flex: 1 1 auto; max-width: 420px; background: transparent; border: 1px solid transparent; border-radius: var(--r);
  color: var(--einband-text); padding: 5px 8px; font-size: 15px; font-weight: 500; text-overflow: ellipsis;
}
.einband-titel::placeholder { color: var(--einband-text-2); opacity: 1; }
.einband-titel:hover { border-color: rgba(255, 255, 255, 0.14); }
.einband-titel:focus { outline: none; border-color: rgba(255, 255, 255, 0.3); background: var(--einband-2); }
.einband-aktionen { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.eb-knopf {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: var(--r);
  background: transparent; border: 1px solid transparent; color: var(--einband-text); font-weight: 500; font-size: 14.5px;
  transition: background-color 0.15s, border-color 0.15s;
}
.eb-knopf svg { width: 17px; height: 17px; }
.eb-knopf:hover { background: var(--einband-2); }
.eb-knopf:disabled { opacity: 0.4; cursor: default; background: transparent; }
.eb-knopf.hell { background: var(--einband-text); color: var(--einband); }
.eb-knopf.hell:hover { background: #fff; }
.eb-knopf.rahmen { border-color: rgba(255, 255, 255, 0.22); }
.eb-trenner { width: 1px; height: 22px; background: rgba(255, 255, 255, 0.14); margin: 0 4px; }
.eb-status { font-size: 13px; color: var(--einband-text-2); white-space: nowrap; }
/* ---------------------------------------------------------------- Pulte (Seitenleisten) */
.pult { background: var(--pult); min-height: 0; overflow: auto; }
.pult-links { border-right: 1px solid var(--linie); }
.pult-rechts { border-left: 1px solid var(--linie); }
.pult-kopf { padding: 16px 18px 10px; }
.pult-kopf h2 { margin: 0; font-family: var(--schrift-schmal); font-size: 19px; font-weight: 600; letter-spacing: 0.01em; }
.pult-kopf p { margin: 2px 0 0; color: var(--tinte-2); font-size: 13.5px; }

.umschalter { display: inline-flex; background: var(--pult-2); border-radius: 6px; padding: 2px; }
.umschalter button {
  height: 30px; padding: 0 13px; border: 0; background: transparent; border-radius: 5px; font-weight: 600; font-size: 14px; color: var(--tinte-2);
}
.umschalter button[aria-pressed="true"] { background: #fff; color: var(--tinte); box-shadow: 0 1px 2px rgba(20, 30, 25, 0.16); }
.umschalter button:not([aria-pressed="true"]):hover { color: var(--tinte); }
.werkzeug {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 6px; border: 0; background: transparent; color: var(--tinte-2);
}
.werkzeug svg { width: 18px; height: 18px; }
.werkzeug:hover { background: var(--pult-2); color: var(--tinte); }
.werkzeug[aria-pressed="true"] { background: var(--einband); color: #fff; }
.werkzeug:disabled { opacity: 0.35; cursor: default; background: none; }
.leiste-trenner { width: 1px; height: 22px; background: var(--linie); }
/* ---------------------------------------------------------------- rechtes Pult: Blatt-Einstellungen */
.feld { padding: 0 18px; margin-bottom: 16px; }
.feld > label, .feld > .feld-name { display: block; font-size: 13px; font-weight: 600; color: var(--tinte-2); margin-bottom: 5px; }
.feld input[type="text"], .feld textarea {
  width: 100%; border: 1px solid var(--linie-stark); border-radius: var(--r); background: #fff; padding: 7px 9px; font-size: 14.5px;
}
.feld textarea { resize: vertical; min-height: 56px; line-height: 1.35; }
.feld textarea::placeholder { color: var(--tinte-3); }
.feld .umschalter { display: flex; }
.feld .umschalter button { flex: 1 1 auto; min-width: 0; padding: 0 6px; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feld > label.schalter-reihe, .schalter-reihe { display: flex; margin-bottom: 2px; font-weight: 500; color: var(--tinte); align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; font-size: 14.5px; }
.schalter { position: relative; display: inline-block; width: 36px; height: 21px; flex: none; }
.schalter input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.schalter span { position: absolute; inset: 0; border-radius: 11px; background: var(--linie-stark); transition: background 0.15s; pointer-events: none; }
.schalter span::after { content: ''; position: absolute; left: 2px; top: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: transform 0.2s var(--ease); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
.schalter input:checked + span { background: var(--wasser); }
.schalter input:checked + span::after { transform: translateX(15px); }
.schalter input:focus-visible + span { outline: 2px solid var(--wasser); outline-offset: 2px; }
.abschnitt { border-top: 1px solid var(--linie); padding-top: 14px; margin-top: 4px; }
.abschnitt-kopf { display: flex; align-items: baseline; justify-content: space-between; padding: 0 18px; margin-bottom: 8px; }
.abschnitt-kopf h3 { margin: 0; font-family: var(--schrift-schmal); font-size: 17px; font-weight: 600; }
.abschnitt-kopf span { font-size: 13px; color: var(--tinte-2); }

/* ---------------------------------------------------------------- Aufklapper (Teilen, Drucken, Vorlagen) */
.klappe {
  position: fixed; z-index: 50; width: 340px; background: var(--pult); border: 1px solid var(--linie-stark); border-radius: 8px; box-shadow: var(--schatten-pop);
  padding: 16px; transform-origin: top right; animation: klappe-auf 0.22s var(--ease);
}
.klappe[hidden] { display: none; }
@keyframes klappe-auf { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
.klappe h3 { margin: 0 0 4px; font-family: var(--schrift-schmal); font-size: 19px; font-weight: 600; }
.klappe p { margin: 0 0 12px; font-size: 14px; color: var(--tinte-2); }
.klappe .knopf-reihe { display: flex; gap: 8px; flex-wrap: wrap; }
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: var(--r);
  border: 1px solid var(--linie-stark); background: #fff; font-weight: 600; font-size: 14px; color: var(--tinte); text-decoration: none;
}
.knopf:hover { border-color: var(--tinte-2); }
.knopf.primaer { background: var(--einband); border-color: var(--einband); color: #fff; }
.knopf.primaer:hover { background: var(--einband-2); }
.knopf svg { width: 16px; height: 16px; }
.knopf:disabled { opacity: 0.5; cursor: default; }
.code-gross { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; }
.code-gross output {
  font-family: var(--schrift-schmal); font-weight: 600; font-size: 34px; letter-spacing: 0.14em; line-height: 1; padding: 8px 12px 6px;
  background: #fff; border: 1px solid var(--linie-stark); border-radius: var(--r);
}
.qr { width: 132px; height: 132px; background: #fff; border: 1px solid var(--linie); border-radius: var(--r); padding: 6px; }
.qr svg { width: 100%; height: 100%; display: block; }
.teilen-zeile { display: flex; gap: 14px; align-items: flex-start; }
.link-feld { display: flex; margin: 0 0 12px; }
.link-feld input { flex: 1; min-width: 0; height: 34px; border: 1px solid var(--linie-stark); border-right: 0; border-radius: var(--r) 0 0 var(--r); padding: 0 9px; font-size: 13.5px; background: #fff; }
.link-feld button { border-radius: 0 var(--r) var(--r) 0; height: 34px; }
.druck-wahl { display: grid; gap: 6px; margin-bottom: 12px; }
.druck-wahl label { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--linie); border-radius: var(--r); background: #fff; font-size: 14.5px; cursor: pointer; }
.druck-wahl label:has(input:checked) { border-color: var(--wasser); box-shadow: inset 0 0 0 1px var(--wasser); }
.druck-wahl input { accent-color: var(--wasser); margin: 0; }
.druck-wahl small { color: var(--tinte-2); margin-left: auto; font-size: 13px; }

/* Vorlagen-Bibliothek: strenges Etikettenraster */
.meldung {
  position: fixed; left: 50%; bottom: 22px; z-index: 60; transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px; padding: 9px 10px 9px 16px; border-radius: 8px; background: var(--tinte); color: #fff; font-size: 14.5px;
  box-shadow: var(--schatten-pop); animation: meldung-auf 0.25s var(--ease);
}
.meldung[hidden] { display: none; }
.meldung button { height: 30px; padding: 0 11px; border: 0; border-radius: 5px; background: rgba(255, 255, 255, 0.14); color: #fff; font-weight: 600; font-size: 13.5px; }
.meldung button:hover { background: rgba(255, 255, 255, 0.24); }
@keyframes meldung-auf { from { opacity: 0; transform: translate(-50%, 8px); } }

.laden { position: absolute; inset: 0; display: grid; place-items: center; color: var(--tinte-2); font-size: 14.5px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}


/* ---------------------------------------------------------------- Markenzeichen */
.marke-bild { width: 26px; height: 26px; flex: none; }
.modul-name {
  display: flex; align-items: center; gap: 14px; margin-left: -4px; white-space: nowrap;
  font-family: var(--schrift-schmal); font-weight: 500; font-size: 19px; color: var(--einband-text);
}
.modul-name::before { content: ''; width: 1px; height: 22px; background: rgba(255, 255, 255, 0.22); }

/* Kopfleisten-Links sehen aus wie Kopfleisten-Knoepfe */
a.eb-knopf { text-decoration: none; }