/* Geogenial · Koordinatentrainer – Logbuch, Atlasblatt, Gradnetzkarte. Baut auf geogenial.css auf.
   Schuelerseite: groesser und runder als die Werkbank der Lehrkraft (Knopfhoehe 48 px, Radius 10 px). */
:root {
  --r-kind: 10px;
  --stern: #d39a17;
  --stern-tief: #9a6b06;
  --lb-rand: 52px;
}

body.kt { height: 100vh; height: 100dvh; display: grid; grid-template-rows: 54px minmax(0, 1fr); overflow: hidden; font-size: 16px; }

/* ---------------------------------------------------------------- Kopf */
.kt-kopf { gap: 16px; }
.kt-expedition {
  margin: 0; min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 15px; font-weight: 500; color: var(--einband-text-2);
}
.kt-kopf-aktionen { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.kt-sterne, .kt-uhr {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 9px; border-radius: 17px;
  background: var(--einband-2); font-family: var(--schrift-schmal); font-weight: 600; font-size: 19px; line-height: 1;
}
.kt-sterne svg { width: 20px; height: 20px; fill: var(--stern); }
.kt-uhr svg { width: 18px; height: 18px; fill: none; stroke: var(--einband-text-2); stroke-width: 1.8; stroke-linecap: round; }
.kt-uhr span { font-variant-numeric: tabular-nums; }
.kt-sterne.kt-plopp { animation: plopp 0.45s var(--ease); }
@keyframes plopp { 30% { scale: 1.22; background: #34505f; } }

/* ---------------------------------------------------------------- Flaeche: Logbuch | Atlasblatt */
.kt-flaeche { display: grid; grid-template-columns: 372px minmax(0, 1fr); min-height: 0; }

.logbuch {
  position: relative; min-height: 0; overflow: auto; background: var(--pult); border-right: 1px solid var(--linie-stark);
  scrollbar-width: thin; scrollbar-color: var(--linie-stark) transparent; padding-bottom: 28px;
  /* Randlinie des Logbuchs (doppelt, wie auf einer Logbuchseite) */
  background-image: linear-gradient(90deg, transparent calc(var(--lb-rand) - 4px), var(--linie) calc(var(--lb-rand) - 4px), var(--linie) calc(var(--lb-rand) - 3px), transparent calc(var(--lb-rand) - 3px), transparent calc(var(--lb-rand) - 1px), var(--linie) calc(var(--lb-rand) - 1px), var(--linie) var(--lb-rand), transparent var(--lb-rand));
}
.logbuch::-webkit-scrollbar { width: 8px; }
.logbuch::-webkit-scrollbar-thumb { background: var(--linie-stark); border-radius: 8px; border: 2px solid var(--pult); }

.lb-kopf { padding: 22px 22px 16px calc(var(--lb-rand) + 16px); }
.lb-kopf h1 { margin: 0; font-family: var(--schrift-schmal); font-weight: 600; font-size: 30px; line-height: 1.05; letter-spacing: 0.005em; text-wrap: balance; }
.lb-kopf p { margin: 6px 0 0; color: var(--tinte-2); font-size: 15px; line-height: 1.45; text-wrap: pretty; }
.lb-kopf-exp { padding-bottom: 12px; border-bottom: 1px solid var(--linie-stark); }
.lb-kopf-exp h1 { font-size: 25px; }
.lb-kopf-exp p { font-size: 14px; }
.lb-stand { font-variant-numeric: tabular-nums; }
.lb-fehler { margin: 0 18px 14px calc(var(--lb-rand) + 16px); padding: 10px 12px; border-radius: var(--r-kind); background: var(--daneben-hell); color: #6d3a0e; font-size: 14.5px; }

/* Planung */
.lb-gruppe { padding: 6px 16px 14px calc(var(--lb-rand) + 6px); }
.lb-gruppe h2 { margin: 6px 0 8px 10px; font-family: var(--schrift-schmal); font-weight: 600; font-size: 18px; letter-spacing: 0.01em; color: var(--tinte); }
.lb-arten, .lb-stufen { display: grid; gap: 4px; }
.lb-arten button, .lb-stufen button {
  display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 12px; width: 100%; padding: 9px 12px 9px 8px; text-align: left;
  background: transparent; border: 1.5px solid transparent; border-radius: var(--r-kind); color: var(--tinte);
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.2s var(--ease);
}
.lb-arten button:hover, .lb-stufen button:hover { background: var(--pult-2); }
.lb-arten button[aria-checked="true"], .lb-stufen button[aria-checked="true"] {
  background: #fff; border-color: var(--einband); box-shadow: 0 1px 2px rgba(20, 30, 25, 0.1), 0 8px 18px -10px rgba(20, 30, 25, 0.35);
}
.lb-arten b, .lb-stufen b { display: block; font-size: 16.5px; font-weight: 600; line-height: 1.2; }
.lb-arten small, .lb-stufen small { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.35; color: var(--tinte-2); }
.lb-arten button:not([aria-checked="true"]) small, .lb-stufen button:not([aria-checked="true"]) small { display: none; }
.lb-arten button, .lb-stufen button { padding-top: 7px; padding-bottom: 7px; }
.lb-fuss-planen { position: sticky; bottom: -28px; z-index: 2; padding-top: 12px; padding-bottom: 14px; margin-bottom: -28px; margin-top: 18px; background: var(--pult); }
.lb-fuss-planen::before { content: ''; position: absolute; left: 0; right: 0; top: -28px; height: 28px; background: linear-gradient(rgba(245, 244, 238, 0), var(--pult)); pointer-events: none; }
.u-bild { width: 44px; height: 44px; border-radius: 8px; background: var(--pult-2); }
.lb-arten button[aria-checked="true"] .u-bild { background: var(--wasser-hell); }
.u-netz { fill: none; stroke: #8f978d; stroke-width: 1.2; }
.u-nadel { fill: var(--einband); }
.u-ring { fill: none; stroke: var(--marke); stroke-width: 1.6; }
.u-ziel { fill: var(--marke); }
.u-lese { fill: none; stroke: var(--tinte-2); stroke-width: 1.3; stroke-dasharray: 2.5 2; }
.u-linie-b { fill: none; stroke: var(--breite); stroke-width: 3; stroke-linecap: round; }
.u-linie-l { fill: none; stroke: var(--laenge); stroke-width: 3; stroke-linecap: round; }
.u-kompass { fill: #8f978d; }
.u-kompass-n { fill: var(--einband); }
.lb-sterne { display: inline-flex; gap: 1px; justify-content: center; }
.lb-stufen .lb-sterne { width: 46px; }
.st { width: 15px; height: 15px; fill: var(--stern); stroke: var(--stern-tief); stroke-width: 0.8; stroke-linejoin: round; }

.lb-zeile { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.lb-zeile h2 { margin-left: 2px; }
.lb-zeile > div { padding-left: 8px; }
.kt-umschalter button { height: 40px; min-width: 52px; font-size: 16px; }
.kt-uhrwahl { font-size: 15.5px !important; gap: 12px !important; min-height: 40px; }

.lb-wdh { display: flex; gap: 10px; align-items: flex-start; margin: 0 18px 8px calc(var(--lb-rand) + 16px); padding: 10px 12px; border-radius: var(--r-kind); background: var(--wasser-hell); color: var(--wasser-tief); font-size: 14px; }
.lb-wdh .ic { width: 18px; height: 18px; flex: none; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.lb-fuss { display: flex; gap: 10px; flex-wrap: wrap; padding: 10px 18px 6px calc(var(--lb-rand) + 16px); }
.knopf.kt-los, .knopf.kt-pruefen, .knopf.kt-weiter {
  height: 50px; padding: 0 22px; border-radius: var(--r-kind); font-size: 17px; background: var(--einband); border-color: var(--einband); color: #fff;
  box-shadow: 0 1px 1px rgba(20, 30, 25, 0.2), 0 8px 16px -10px rgba(27, 45, 56, 0.9); transition: background-color 0.15s, transform 0.15s var(--ease);
}
.knopf.kt-los:hover, .knopf.kt-pruefen:hover, .knopf.kt-weiter:hover { background: var(--einband-2); border-color: var(--einband-2); }
.knopf.kt-los:active, .knopf.kt-pruefen:active, .knopf.kt-weiter:active { transform: translateY(1px); }
.lb-fuss .knopf { height: 50px; border-radius: var(--r-kind); font-size: 16px; padding: 0 18px; }
.knopf .ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kt-los .ic:last-child, .kt-weiter .ic:last-child { margin-left: 2px; }

.lb-code { margin: 18px 18px 0 calc(var(--lb-rand) + 16px); font-size: 14.5px; color: var(--tinte-2); }
.lb-code summary { cursor: pointer; width: max-content; padding: 4px 0; text-decoration: underline; text-decoration-color: var(--linie-stark); text-underline-offset: 0.2em; }
.lb-code summary:hover { color: var(--tinte); }
.lb-code-form { display: flex; gap: 8px; margin-top: 8px; }
.lb-code-form input {
  width: 9.5ch; height: 44px; padding: 0 10px; border: 1.5px solid var(--linie-stark); border-radius: var(--r-kind); background: #fff;
  font-family: var(--schrift-schmal); font-weight: 600; font-size: 22px; letter-spacing: 0.18em; text-transform: uppercase;
}
.lb-code-form input::placeholder { color: #c3c4b7; }
.lb-code-form input:focus { outline: none; border-color: var(--wasser); box-shadow: 0 0 0 3px var(--wasser-hell); }
.lb-code-form .knopf { height: 44px; border-radius: var(--r-kind); }

/* Steckbrief (Lehrer-Reihe, Ergebnisbeleg) */
.lb-steckbrief { margin: 0 18px 16px calc(var(--lb-rand) + 16px); padding: 0; display: grid; gap: 0; border-top: 1px solid var(--linie); }
.lb-steckbrief div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linie); font-size: 15px; }
.lb-steckbrief dt { color: var(--tinte-2); }
.lb-steckbrief dd { margin: 0; font-weight: 600; text-align: right; }
.lb-code-wert { font-family: var(--schrift-schmal); letter-spacing: 0.14em; font-size: 17px; }
.lb-name { padding: 0 18px 0 calc(var(--lb-rand) + 16px) !important; }
.lb-name label { font-size: 14px !important; }
.lb-name input { height: 46px; font-size: 17px !important; border-radius: var(--r-kind) !important; }

/* ---------------------------------------------------------------- Eintraege */
.lb-eintraege { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.lb-eintrag { position: relative; display: grid; grid-template-columns: var(--lb-rand) minmax(0, 1fr) auto; align-items: center; min-height: 48px; border-bottom: 1px solid var(--linie); padding-right: 16px; }
.lb-nr {
  justify-self: center; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; position: relative; z-index: 1;
  font-family: var(--schrift-schmal); font-weight: 600; font-size: 15px; line-height: 1; background: var(--pult); border: 1.5px solid var(--linie-stark); color: var(--tinte-3);
}
.lb-leer { padding: 0 0 0 14px; font-size: 15px; color: var(--tinte-3); display: flex; align-items: center; gap: 10px; }
.lb-leer::after { content: ''; flex: 1; border-bottom: 1.5px dotted var(--linie-stark); translate: 0 4px; }
.lb-kurz { padding: 7px 0 7px 14px; min-width: 0; }
.lb-kurz b { display: block; font-family: var(--schrift-schmal); font-weight: 600; font-size: 19px; line-height: 1.15; }
.lb-kurz small { display: block; font-size: 14px; line-height: 1.35; color: var(--tinte-2); }
.lb-wertung { display: flex; align-items: center; gap: 6px; }
.lb-zeichen { width: 22px; height: 22px; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lb-ok .lb-zeichen { stroke: var(--richtig); }
.lb-nein .lb-zeichen { stroke: var(--daneben); }
.lb-wertung .lb-sterne { min-width: 31px; justify-content: flex-end; }
.lb-fertig .lb-nr { color: #fff; border-color: transparent; }
.lb-ok .lb-nr { background: var(--richtig); }
.lb-nein .lb-nr { background: var(--daneben); }
.lb-frisch .lb-nr, .lb-frisch .lb-zeichen { animation: stempel 0.36s var(--ease); }
@keyframes stempel { from { opacity: 0; scale: 1.7; } }

/* Aufgeschlagener Eintrag */
.lb-aktiv { align-items: start; background: var(--pult-2); padding: 12px 12px 14px 0; grid-template-columns: var(--lb-rand) minmax(0, 1fr); }
.lb-aktiv .lb-nr { margin-top: 14px; background: var(--einband); border-color: var(--einband); color: #fff; width: 32px; height: 32px; font-size: 17px; }
.lb-aufgabe {
  background: #fff; border-radius: var(--r-kind); padding: 14px 16px 16px; margin-left: 4px;
  box-shadow: 0 1px 2px rgba(20, 30, 25, 0.12), 0 14px 28px -16px rgba(20, 30, 25, 0.45);
  animation: aufschlagen 0.3s var(--ease);
}
@keyframes aufschlagen { from { opacity: 0; translate: 0 6px; } }
.lb-frage-kopf { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; }
.lb-art-bild { width: 40px; height: 40px; border-radius: 8px; background: var(--pult-2); }
.lb-frage { margin: 1px 0 12px; font-size: 19px; font-weight: 600; line-height: 1.3; text-wrap: balance; }
.lb-frage .rot { color: var(--marke); }
.txt-b { color: var(--breite); }
.txt-l { color: var(--laenge); }
.lb-tipp { margin: 12px 0 0; font-size: 15px; color: var(--tinte-2); }
.lb-wdh-notiz { margin: 10px 0 0; font-size: 14px; color: var(--wasser-tief); }

/* Koordinaten: Breite blaugruen mit waagerechten Strichen, Laenge ocker mit senkrechten Strichen */
.koord { display: flex; flex-wrap: wrap; gap: 8px; }
.koord span {
  display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px 0 12px; border-radius: var(--r-kind);
  font-family: var(--schrift-schmal); font-weight: 600; font-size: 31px; line-height: 1; letter-spacing: 0.005em; font-variant-numeric: tabular-nums;
}
.koord-b { background: var(--breite-hell); color: #0b5a57; }
.koord-l { background: var(--laenge-hell); color: #8a4308; }
.koord i, .eingabe label i { display: inline-block; flex: none; width: 16px; height: 16px; border-radius: 2px; }
.koord-b i, .eingabe-b label i { background: repeating-linear-gradient(180deg, var(--breite) 0 2px, transparent 2px 5px); }
.koord-l i, .eingabe-l label i { background: repeating-linear-gradient(90deg, var(--laenge) 0 2px, transparent 2px 5px); }

/* Eingabe */
.eingaben { display: grid; gap: 12px; }
.eingabe label { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-weight: 600; font-size: 15px; }
.eingabe-b label { color: #0b5a57; }
.eingabe-l label { color: #8a4308; }
.eingabe-zeile { display: flex; align-items: center; gap: 8px; }
.eingabe input {
  width: 4.6ch; height: 52px; padding: 0 10px; border: 2px solid var(--linie-stark); border-radius: var(--r-kind); background: #fff; text-align: right;
  font-family: var(--schrift-schmal); font-weight: 600; font-size: 28px; font-variant-numeric: tabular-nums; color: var(--tinte);
}
.eingabe input::placeholder { color: #cfd0c5; }
.eingabe-b input:focus { outline: none; border-color: var(--breite); box-shadow: 0 0 0 3px var(--breite-hell); caret-color: var(--breite); }
.eingabe-l input:focus { outline: none; border-color: var(--laenge); box-shadow: 0 0 0 3px var(--laenge-hell); caret-color: var(--laenge); }
.eingabe .grad { font-family: var(--schrift-schmal); font-weight: 600; font-size: 28px; margin-left: -4px; color: var(--tinte-2); }
.richtung { margin-left: 4px; border-radius: var(--r-kind); padding: 3px; }
.richtung button { width: 48px; height: 44px; padding: 0; border-radius: 8px; font-family: var(--schrift-schmal); font-size: 21px; }
.eingabe-b .richtung button[aria-pressed="true"] { background: var(--breite); color: #fff; }
.eingabe-l .richtung button[aria-pressed="true"] { background: var(--laenge); color: #fff; }

/* Auswahlantworten */
.wahl { display: grid; gap: 8px; }
.wahl-knopf {
  min-height: 50px; padding: 8px 14px; border: 1.5px solid var(--linie-stark); border-radius: var(--r-kind); background: #fff; text-align: left;
  font-size: 16.5px; font-weight: 600; color: var(--tinte); transition: border-color 0.15s, background-color 0.15s;
}
.wahl-knopf:hover { border-color: var(--einband); }
.wahl-knopf[aria-pressed="true"] { background: var(--einband); border-color: var(--einband); color: #fff; }

/* Rueckmeldung */
.lb-rueck { margin: 14px 0 0; font-size: 15.5px; line-height: 1.45; display: flex; gap: 10px; align-items: flex-start; }
.lb-rueck:empty { display: none; }
.lb-rueck[class*="lb-rueck-"] { padding: 11px 13px; border-radius: var(--r-kind); animation: aufschlagen 0.25s var(--ease); }
.lb-rueck-richtig { background: var(--richtig-hell); color: #2b5520; font-weight: 500; }
.lb-rueck-richtig .ic { width: 26px; height: 26px; flex: none; padding: 3px; border-radius: 50%; background: var(--richtig); fill: none; stroke: #fff; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; animation: stempel 0.36s var(--ease); }
.lb-rueck-nochmal, .lb-rueck-daneben { background: var(--daneben-hell); color: #6d3a0e; }
.lb-rueck-hinweis { background: var(--pult-2); color: var(--tinte); }
.lb-verdient { margin-left: auto; display: inline-flex; align-items: center; gap: 1px; font-family: var(--schrift-schmal); font-weight: 600; font-size: 17px; color: var(--stern-tief); white-space: nowrap; }
.lb-verdient .st { width: 18px; height: 18px; animation: stempel 0.4s var(--ease) both; }
.lb-verdient .st + .st { animation-delay: 0.12s; }
.lb-knoepfe { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.lb-versuch { font-family: var(--schrift-schmal); font-weight: 600; font-size: 15px; color: var(--daneben); }

/* Ergebnis */
.lb-ergebnis-kopf { text-align: left; }
.lb-siegel { display: block; width: 68px; height: 68px; margin: 0 0 12px; animation: stempel-gross 0.55s var(--ease) both; }
@keyframes stempel-gross { from { opacity: 0; scale: 1.8; } }
.sg-grund { fill: var(--breite-hell); }
.sg-b { stroke: var(--breite); stroke-width: 1.4; opacity: 0.55; fill: none; }
.sg-l { stroke: var(--laenge); stroke-width: 1.4; opacity: 0.55; fill: none; }
.sg-rand { fill: none; stroke: var(--einband); stroke-width: 2.5; }
.sg-stern { fill: var(--stern); stroke: var(--stern-tief); stroke-width: 1.2; stroke-linejoin: round; }
.lb-sternsumme { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px !important; font-size: 17px !important; color: var(--tinte) !important; }
.lb-sternsumme .st { width: 30px; height: 30px; }
.lb-sternsumme b { font-family: var(--schrift-schmal); font-size: 34px; font-weight: 600; line-height: 1; }
.lb-alle .lb-eintrag { min-height: 44px; }
.lb-fuss-ergebnis { padding-top: 16px; }
.lb-beleg { margin-top: 0; }
.lb-leer-hinweis { margin: 4px 18px 10px calc(var(--lb-rand) + 16px); color: var(--tinte-2); font-size: 15px; }

/* ---------------------------------------------------------------- Kartentisch und Atlasblatt */
.kt-tisch {
  position: relative; min-width: 0; min-height: 0; padding: 18px;
  background-color: var(--tisch);
  background-image: linear-gradient(var(--tisch-linie) 1px, transparent 1px), linear-gradient(90deg, var(--tisch-linie) 1px, transparent 1px);
  background-size: 48px 48px; background-position: center center;
}
.kt-blatt { position: relative; isolation: isolate; height: 100%; background: #fff; border-radius: 3px; box-shadow: var(--schatten-blatt); }
body[data-zustand="planen"] .kt-blatt, body[data-zustand="erkunden"] .kt-blatt { margin-right: 124px; }
.kt-karte { position: absolute; inset: 8px; }

/* Daumenregister am rechten Blattrand */
.kt-register { position: absolute; top: 26px; left: 100%; display: flex; flex-direction: column; gap: 5px; z-index: -1; }
.kt-register[hidden] { display: none; }
.kt-register button {
  display: flex; align-items: center; height: 40px; width: 132px; padding: 0 10px 0 22px; margin-left: -8px;
  border: 0; border-radius: 0 8px 8px 0; color: #fff; text-align: left;
  font-family: var(--schrift-schmal); font-weight: 600; font-size: 16px; letter-spacing: 0.02em; line-height: 1;
  box-shadow: 0 1px 2px rgba(20, 30, 25, 0.2); transform: translateX(-14px); transition: transform 0.22s var(--ease);
}
.kt-register button:hover { transform: translateX(-7px); }
.kt-register button[aria-selected="true"] { transform: translateX(0); }
.kt-register button[aria-selected="true"]::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-left: auto; }
.kt-register [data-gebiet="welt"] { background: var(--reg-welt); }
.kt-register [data-gebiet="europa"] { background: var(--reg-europa); }
.kt-register [data-gebiet="deutschland"] { background: var(--reg-deutschland); }
.kt-register [data-gebiet="afrika"] { background: var(--reg-afrika); }
.kt-register [data-gebiet="asien"] { background: var(--reg-asien); color: #2b2410; }
.kt-register [data-gebiet="nordamerika"] { background: var(--reg-nordamerika); }
.kt-register [data-gebiet="suedamerika"] { background: var(--reg-suedamerika); }
.kt-register [data-gebiet="ozeanien"] { background: var(--reg-ozeanien); }

/* ---------------------------------------------------------------- Gradnetzkarte (SVG, Einheiten = px) */
.gn-karte { display: block; width: 100%; height: 100%; touch-action: none; font-family: var(--schrift); user-select: none; -webkit-user-select: none; }
.gn-karte:focus-visible { outline: 2px solid var(--wasser); outline-offset: -2px; border-radius: 4px; }
body[data-zustand="expedition"] .gn-karte, body[data-zustand="erkunden"] .gn-karte { cursor: crosshair; }
.gn-meer { fill: #d3e4ee; }
.gn-staat { fill: #e3ebcf; stroke: #5d8aac; stroke-width: 0.7; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.gn-ausland { fill: #eeeee4; }
.gn-bl { fill: #e3ebcf; stroke: none; }
.gn-grenze { fill: none; stroke: #7a7568; stroke-width: 0.7; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.gn-bl-grenze { fill: none; stroke: #948f81; stroke-width: 0.6; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }

.gn-netz, .gn-besondere, .gn-faden, .gn-faden-rand, .gn-rahmen { pointer-events: none; }
.gn-linie { stroke-width: 1; opacity: 0.32; shape-rendering: crispEdges; }
.gn-breite { stroke: var(--breite); }
.gn-laenge { stroke: var(--laenge); }
.gn-linie.gn-haupt { opacity: 0.62; }
.gn-linie.gn-null { opacity: 0.95; stroke-width: 2; shape-rendering: auto; }
.gn-besonders { stroke-width: 1.4; stroke-dasharray: 7 4; opacity: 0.85; }
.gn-schild text { font-family: var(--schrift-schmal); font-weight: 600; font-size: 13px; letter-spacing: 0.03em; paint-order: stroke; stroke: rgba(255, 255, 255, 0.92); stroke-width: 3.5px; stroke-linejoin: round; }
.gn-schild.gn-breite text { fill: #0b5a57; stroke: rgba(255, 255, 255, 0.92); }
.gn-schild.gn-laenge text { fill: #8a4308; stroke: rgba(255, 255, 255, 0.92); }

.gn-leiste-grund { fill: #fff; fill-rule: evenodd; }
.gn-leiste { fill: var(--tinte); }
.gn-rand, .gn-rand-aussen { fill: none; stroke: var(--tinte); stroke-width: 1; shape-rendering: crispEdges; }
.gn-zahl { font-family: var(--schrift-schmal); font-weight: 600; font-size: 13.5px; dominant-baseline: central; font-variant-numeric: tabular-nums; }
.gn-zahl-breite { fill: #0b5a57; }
.gn-zahl-laenge { fill: #8a4308; dominant-baseline: auto; }

.gn-faden-b { stroke: var(--breite); stroke-width: 1; stroke-dasharray: 5 4; opacity: 0.9; }
.gn-faden-l { stroke: var(--laenge); stroke-width: 1; stroke-dasharray: 5 4; opacity: 0.9; }
.gn-zeiger-b { fill: var(--breite); }
.gn-zeiger-l { fill: var(--laenge); }
.gn-live text { fill: #fff; font-family: var(--schrift-schmal); font-weight: 600; font-size: 14px; dominant-baseline: central; }
.gn-live-b rect { fill: var(--breite); }
.gn-live-l rect { fill: var(--laenge); }

.gn-bereich { fill: rgba(231, 241, 223, 0.8); stroke: var(--richtig); stroke-width: 1.3; stroke-dasharray: 4 3; }
.gn-hervor { stroke-width: 4; stroke-linecap: round; }
.gn-hervor.gn-halo { stroke: rgba(255, 255, 255, 0.85); stroke-width: 9; }
.gn-hervor-frage.gn-breite:not(.gn-halo) { stroke: var(--breite); }
.gn-hervor-frage.gn-laenge:not(.gn-halo) { stroke: var(--laenge); }
.gn-hervor-richtig:not(.gn-halo) { stroke: var(--richtig); }
.gn-hervor-daneben:not(.gn-halo) { stroke: var(--breite); }
.gn-hervor-daneben.gn-laenge:not(.gn-halo) { stroke: var(--laenge); }
.gn-hervor-klick:not(.gn-halo) { stroke: var(--einband); stroke-width: 2.5; stroke-dasharray: 6 5; }
.gn-hervor-klick.gn-halo { stroke-width: 6; }
.gn-hervor.gn-hervor-frage:not(.gn-halo) { animation: puls 1.6s ease-in-out 2; }
@keyframes puls { 50% { stroke-width: 6; } }

.gn-verbindung { stroke: var(--einband); stroke-width: 1.6; stroke-dasharray: 3 4; }
.gn-route { fill: none; stroke: var(--einband); stroke-width: 2.4; stroke-dasharray: 2 6; stroke-linejoin: round; stroke-linecap: round; opacity: 0.85; }
.gn-route-neu { animation: route-auf 0.9s var(--ease) both; }
@keyframes route-auf { from { opacity: 0; } }
.gn-station circle { fill: #fff; stroke-width: 2.6; }
.gn-station.gn-ok circle { fill: var(--richtig-hell); }
.gn-station.gn-nein circle { fill: var(--daneben-hell); }
.gn-station.gn-ok circle { stroke: var(--richtig); }
.gn-station.gn-nein circle { stroke: var(--daneben); }
.gn-station text { font-family: var(--schrift-schmal); font-weight: 600; font-size: 12.5px; text-anchor: middle; dominant-baseline: central; fill: var(--tinte); }
.gn-route-neu ~ .gn-station { animation: stempel 0.36s var(--ease) both; transform-box: fill-box; transform-origin: center; }

.gn-ziel-ring { fill: rgba(194, 26, 48, 0.12); stroke: var(--marke); stroke-width: 2; }
.gn-ziel-kern { fill: var(--marke); stroke: #fff; stroke-width: 2; }
.gn-ziel-name { font-weight: 600; font-size: 14.5px; fill: var(--tinte); paint-order: stroke; stroke: rgba(255, 255, 255, 0.95); stroke-width: 4px; stroke-linejoin: round; }
.gn-ziel.gn-neu { animation: stempel 0.36s var(--ease); transform-box: fill-box; transform-origin: center; }
.gn-nadel-kopf { fill: var(--einband); stroke: #fff; stroke-width: 1.5; }
.gn-nadel-fund .gn-nadel-kopf { fill: var(--wasser); }
.gn-nadel-licht { fill: rgba(255, 255, 255, 0.55); }
.gn-nadel-schatten { fill: rgba(20, 30, 25, 0.3); }
.gn-nadel.gn-neu { animation: stecken 0.34s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes stecken { from { translate: 0 -16px; opacity: 0.2; } }

/* Zoomknoepfe */
.gn-zoom { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; background: var(--pult); border: 1px solid var(--linie-stark); border-radius: var(--r-kind); box-shadow: 0 1px 2px rgba(20, 30, 25, 0.12), 0 8px 18px -10px rgba(20, 30, 25, 0.4); overflow: hidden; }
.gn-zoom button { width: 42px; height: 42px; display: grid; place-items: center; background: none; border: 0; color: var(--tinte); }
.gn-zoom button + button { border-top: 1px solid var(--linie); }
.gn-zoom button:hover { background: var(--pult-2); }
.gn-zoom svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- Spickzettel */
.kt-spickzettel { top: 62px; right: 14px; width: 390px; max-width: calc(100vw - 28px); max-height: calc(100dvh - 80px); overflow: auto; padding: 16px 18px 18px; border-radius: var(--r-kind); }
.spick-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.spick-kopf h3 { margin: 0 !important; font-size: 21px !important; }
.spick-bild { display: block; width: 100%; height: auto; margin: 0 0 10px; }
.sb-meer { fill: #d3e4ee; stroke: var(--tinte); stroke-width: 1; }
.sb-b { stroke: var(--breite); stroke-width: 1.4; opacity: 0.8; }
.sb-l { stroke: var(--laenge); stroke-width: 1.4; opacity: 0.8; }
.sb-null { stroke-width: 2.6; opacity: 1; }
.spick-bild text { font-family: var(--schrift-schmal); font-weight: 600; font-size: 12px; }
.sb-tb { fill: #0b5a57; }
.sb-tl { fill: #8a4308; }
.sb-name { font-size: 11.5px !important; letter-spacing: 0.03em; }
.sb-ziel { fill: var(--marke); stroke: #fff; stroke-width: 2; }
.sb-bsp { fill: var(--tinte); font-size: 13px !important; }
.spick-liste { margin: 0; display: grid; gap: 10px; }
.spick-liste div { display: grid; gap: 2px; }
.spick-liste dt { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15.5px; }
.spick-liste dd { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--tinte-2); }
.spick-liste dd b { color: var(--tinte); font-weight: 600; }
.spick-liste i { display: inline-block; width: 16px; height: 16px; border-radius: 2px; }
.sp-b dt { color: #0b5a57; }
.sp-l dt { color: #8a4308; }
.sp-b i { background: repeating-linear-gradient(180deg, var(--breite) 0 2px, transparent 2px 5px); }
.sp-l i { background: repeating-linear-gradient(90deg, var(--laenge) 0 2px, transparent 2px 5px); }

/* ---------------------------------------------------------------- Tablet und Handy: Karte oben, Logbuch darunter */
@media (max-width: 900px) {
  body.kt { height: auto; min-height: 100dvh; overflow: auto; grid-template-rows: 54px auto; }
  .kt-kopf { gap: 10px; padding: 0 8px 0 12px; }
  .kt-expedition { display: none; }
  .modul-name { font-size: 17px; }
  .eb-knopf .eb-text { display: none; }
  .kt-flaeche { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
  .kt-tisch { order: 1; padding: 10px; height: clamp(320px, 100vw, 58dvh); display: flex; flex-direction: column; gap: 8px; }
  .kt-blatt { flex: 1; min-height: 0; margin-right: 0 !important; }
  .kt-register { position: static; order: -1; flex-direction: row; overflow-x: auto; gap: 6px; z-index: auto; scrollbar-width: none; padding: 2px 0; }
  .kt-register button { transform: none !important; width: auto; height: 34px; padding: 0 12px; margin: 0; border-radius: 17px; flex: none; font-size: 15px; opacity: 0.55; }
  .kt-register button[aria-selected="true"] { opacity: 1; }
  .kt-register button[aria-selected="true"]::after { display: none; }
  .logbuch { order: 2; overflow: visible; border-right: 0; border-top: 1px solid var(--linie-stark); padding-bottom: 16px; }
  body[data-zustand="expedition"] .kt-tisch { height: clamp(250px, 78vw, 42dvh); }
  body[data-zustand="expedition"] .lb-kopf-exp { display: none; }
  body[data-zustand="expedition"] .lb-eintraege { display: flex; flex-direction: column; }
  body[data-zustand="expedition"] .lb-aktiv { order: -1; padding-top: 8px; }
  body[data-zustand="expedition"] .lb-aktiv .lb-nr { margin-top: 10px; }
  .lb-aufgabe .lb-knoepfe { position: sticky; bottom: 0; margin: 12px -12px -14px; padding: 10px 12px 12px; background: #fff; border-radius: 0 0 var(--r-kind) var(--r-kind); }
  .koord span { height: 46px; font-size: 27px; }
  .lb-frage { font-size: 18px; margin-bottom: 10px; }
  .eingaben { gap: 8px; }
  .eingabe label { margin-bottom: 3px; }
  .lb-fuss-planen { position: static; margin: 0; background: none; }
  .lb-fuss-planen::before { display: none; }
  .kt-spickzettel { top: 60px; right: 8px; }
}
@media (max-width: 900px) and (min-width: 600px) {
  .kt-tisch { height: 62vh; height: 62dvh; }
}
@media (max-width: 480px) {
  :root { --lb-rand: 42px; }
  .modul-name { display: none; }
  .lb-kopf { padding-right: 14px; }
  .lb-aufgabe { padding: 12px 12px 14px; }
  .koord span { font-size: 27px; height: 48px; }
  .eingabe input { font-size: 25px; width: 4.2ch; }
  .richtung button { width: 44px; }
  .gn-zoom { bottom: 36px; right: 8px; }
  .gn-zoom button { width: 38px; height: 38px; }
}

/* ---------------------------------------------------------------- Druck: nur der Ergebnisbeleg */
@media print {
  body.kt { display: block; height: auto; overflow: visible; background: #fff; }
  .kt-kopf, .kt-tisch, .lb-fuss, .klappe, .meldung { display: none !important; }
  .kt-flaeche { display: block; }
  .logbuch { overflow: visible; border: 0; background-color: #fff; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ================================================================
   Werkbank der Lehrkraft (lehrer.php) – gleiche Atlas-Werkbank wie bei den stummen Karten
   ================================================================ */
body.kl { font-size: 15px; }
.kl-werkbank { display: grid; grid-template-rows: 54px minmax(0, 1fr); grid-template-columns: 300px minmax(0, 1fr) 330px; height: 100vh; height: 100dvh; }
.kl-werkbank .einband { grid-column: 1 / -1; }
.kl-hinweis { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--tinte-2); }
.kl-gebiete { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.kl-gebiete button {
  display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 9px; border: 1px solid var(--linie); border-radius: var(--r); background: #fff;
  font-size: 14px; font-weight: 500; text-align: left; white-space: nowrap; overflow: hidden;
}
.kl-gebiete button i { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.kl-gebiete button:hover { border-color: var(--tinte-2); }
.kl-gebiete button[aria-checked="true"] { border-color: var(--einband); box-shadow: inset 0 0 0 1px var(--einband); font-weight: 600; }
.kl-gebiete [data-gebiet="welt"] i { background: var(--reg-welt); }
.kl-gebiete [data-gebiet="europa"] i { background: var(--reg-europa); }
.kl-gebiete [data-gebiet="deutschland"] i { background: var(--reg-deutschland); }
.kl-gebiete [data-gebiet="afrika"] i { background: var(--reg-afrika); }
.kl-gebiete [data-gebiet="asien"] i { background: var(--reg-asien); }
.kl-gebiete [data-gebiet="nordamerika"] i { background: var(--reg-nordamerika); }
.kl-gebiete [data-gebiet="suedamerika"] i { background: var(--reg-suedamerika); }
.kl-gebiete [data-gebiet="ozeanien"] i { background: var(--reg-ozeanien); }
.kl-zufall { display: flex; gap: 6px; }
.kl-zufall select { flex: 1; min-width: 0; height: 36px; border: 1px solid var(--linie-stark); border-radius: var(--r); background: #fff; padding: 0 8px; font-size: 14.5px; }
.kl-zufall .knopf { flex: none; }

.kl-tisch {
  position: relative; min-width: 0; min-height: 0; padding: 16px;
  background-color: var(--tisch);
  background-image: linear-gradient(var(--tisch-linie) 1px, transparent 1px), linear-gradient(90deg, var(--tisch-linie) 1px, transparent 1px);
  background-size: 48px 48px; background-position: center center;
}
body.kl .gn-karte { cursor: crosshair; }
.kl-karten-hinweis {
  position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); margin: 0; max-width: calc(100% - 60px);
  padding: 9px 14px; border-radius: 8px; background: var(--einband); color: var(--einband-text); font-size: 14px; box-shadow: var(--schatten-pop); pointer-events: none;
}
.kl-karten-hinweis b { color: #fff; }
.kl-karten-hinweis[hidden] { display: none; }

.kl-liste-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.kl-liste { list-style: none; margin: 0; padding: 0 10px 18px; }
.kl-liste li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 6px; border-top: 1px solid var(--linie); }
.kl-liste li:first-child { border-top: 0; }
.kl-liste li.kl-neu { animation: aufschlagen 0.3s var(--ease); }
.kl-nr {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--einband);
  font-family: var(--schrift-schmal); font-weight: 600; font-size: 14px;
}
.kl-ablesen .kl-nr, .kl-halbkugel .kl-nr { border-color: var(--marke); color: var(--marke-tief); }
.kl-linie-wert .kl-nr, .kl-linie-klick .kl-nr, .kl-linie-name .kl-nr { border-radius: 5px; border-color: var(--tinte-2); }
.kl-inhalt { min-width: 0; display: grid; }
.kl-inhalt b { font-family: var(--schrift-schmal); font-weight: 600; font-size: 17px; line-height: 1.2; }
.kl-inhalt small { font-size: 12.5px; color: var(--tinte-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kl-typ-knopf, .kl-typ-fest { justify-self: start; font-size: 13px; font-weight: 500; color: var(--tinte-2); }
.kl-typ-knopf { padding: 1px 6px; margin-left: -6px; border: 0; border-radius: 4px; background: none; text-decoration: underline dotted var(--linie-stark); text-underline-offset: 3px; }
.kl-typ-knopf:hover { background: var(--pult-2); color: var(--tinte); }
.kl-tun { display: flex; opacity: 0.35; transition: opacity 0.15s; }
.kl-liste li:hover .kl-tun, .kl-tun:focus-within { opacity: 1; }
.kl-tun .werkzeug { width: 28px; height: 28px; }
.kl-tun .werkzeug svg { width: 16px; height: 16px; }

/* Werkbank-Kartenzeichen */
.gn-station.gn-st-finden circle { stroke: var(--einband); }
.gn-station.gn-st-ablesen circle, .gn-station.gn-st-halbkugel circle { stroke: var(--marke); fill: #fff; }
.gn-tag rect { fill: #fff; stroke-width: 1.6; }
.gn-tag.gn-breite rect { stroke: var(--breite); }
.gn-tag.gn-laenge rect { stroke: var(--laenge); }
.gn-tag text { font-family: var(--schrift-schmal); font-weight: 600; font-size: 13px; text-anchor: middle; dominant-baseline: central; fill: var(--tinte); }

@media (max-width: 1100px) {
  .kl-werkbank { grid-template-columns: 270px minmax(0, 1fr) 290px; }
  body.kl .einband-titel { display: none; }
}
@media (max-width: 900px) {
  .kl-werkbank { grid-template-columns: 1fr; grid-template-rows: 54px 62vh auto auto; height: auto; }
  body.kl { overflow: auto; }
  .kl-tisch { grid-row: 2; }
  .kl-werkbank .pult-links { grid-row: 3; border-right: 0; border-top: 1px solid var(--linie); }
  .kl-werkbank .pult-rechts { grid-row: 4; border-left: 0; border-top: 1px solid var(--linie); }
}

/* ---------------------------------------------------------------- Druckblatt A4 quer (Masse in mm) */
#druckbereich { display: none; }
.kb-blatt { position: relative; width: 297mm; height: 210mm; padding: 11mm 12mm 9mm; background: #fff; color: #1a1a18; font-family: var(--schrift); display: grid; grid-template-columns: 190mm 1fr; grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 7mm; overflow: hidden; }
.kb-kopf { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: flex-start; gap: 6mm; padding-bottom: 2.5mm; border-bottom: 0.35mm solid #1a1a18; margin-bottom: 3mm; }
.kb-kopf h2 { margin: 0; font-size: 6mm; line-height: 1.1; font-weight: 600; }
.kb-kopf p { margin: 1.2mm 0 0; font-size: 3.2mm; color: #3c3c38; }
.kb-felder { display: flex; gap: 4mm; padding-top: 1.5mm; }
.kb-felder span { display: flex; align-items: flex-end; gap: 1.5mm; font-size: 3mm; color: #3c3c38; }
.kb-felder i { display: block; width: 36mm; height: 4mm; border-bottom: 0.25mm solid #1a1a18; }
.kb-felder .kb-kurzfeld i { width: 16mm; }
.kb-stempel { padding: 1.4mm 3.5mm 1.2mm; border: 0.45mm solid #1a1a18; border-radius: 1mm; font-family: var(--schrift-schmal); font-weight: 600; font-size: 4.4mm; letter-spacing: 0.14em; text-transform: uppercase; }
.kb-karte { min-height: 0; }
.kb-karte svg { width: 100%; height: 100%; display: block; }
.kb-aufgaben { min-height: 0; overflow: hidden; font-size: 3.3mm; }
.kb-aufgaben section + section { margin-top: 4mm; }
.kb-aufgaben h3 { margin: 0 0 2mm; padding-bottom: 1mm; border-bottom: 0.25mm solid #1a1a18; font-family: var(--schrift-schmal); font-weight: 600; font-size: 3.5mm; line-height: 1.25; }
.kb-aufgaben ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.kb-aufgaben li { display: flex; align-items: flex-end; gap: 1.5mm; min-height: 7.2mm; padding-bottom: 0.8mm; }
.kb-marke { flex: none; width: 5.2mm; height: 5.2mm; border-radius: 50%; border: 0.4mm solid #1a1a18; display: grid; place-items: center; font-family: var(--schrift-schmal); font-weight: 600; font-size: 3mm; margin-right: 1mm; }
.kb-marke.kb-ablesen, .kb-marke.kb-halbkugel { border-color: var(--marke); color: var(--marke-tief); }
.kb-marke.kb-linie-wert, .kb-marke.kb-linie-klick, .kb-marke.kb-linie-name { border-radius: 1mm; }
.kb-luecke { display: inline-block; width: 11mm; border-bottom: 0.25mm solid #55554f; height: 4.5mm; }
.kb-luecke.kb-kurz { width: 6mm; margin-right: 2.5mm; }
.kb-luecke.kb-lang { width: 50mm; }
.kb-loes { font-weight: 600; }
.kb-ort { margin-left: auto; color: #55554f; font-size: 3mm; }
.kb-fuss { grid-column: 1 / -1; display: flex; justify-content: space-between; font-size: 2.3mm; color: #77776f; padding-top: 2mm; }
.kb-fuss span:first-child { font-family: var(--schrift-schmal); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.gn-druck .gn-zahl { font-size: 15px; }
.gn-druck .gn-station circle { stroke: #1a1a18; }

@media print {
  body.kl > *:not(#druckbereich) { display: none !important; }
  body.kl #druckbereich { display: block; }
  #druckbereich .kb-blatt { break-after: page; }
  #druckbereich .kb-blatt:last-child { break-after: auto; }
}