/* Geogenial · Klimadiagramme – baut auf geogenial.css und koordinaten.css (Logbuch) auf.
   Fachkonvention: Temperatur rot, Niederschlag blau (wie in jedem Schulbuch). */
:root {
  --kd-t: #c8252c;
  --kd-n: #1f64b0;
  --kd-humid: #1f64b0;
  --kd-arid: #d9a520;
}
.kd { display: block; width: 100%; height: auto; font-family: var(--schrift); background: #fff; }
.kd-ort { font-family: var(--schrift-schmal); font-weight: 600; font-size: 21px; fill: #1a1a18; }
.kd-lage { font-size: 13px; fill: #4b524c; }
.kd-jahr { font-family: var(--schrift-schmal); font-weight: 600; font-size: 18px; }
.kd-jahr-t, .kd-achse-t { fill: var(--kd-t); }
.kd-jahr-n, .kd-achse-n { fill: var(--kd-n); }
.kd-linie { stroke: #d9dcd4; stroke-width: 1; }
.kd-null { stroke: #1a1a18; stroke-width: 1.2; }
.kd-grenze100 { stroke: var(--kd-n); stroke-width: 1; stroke-dasharray: 3 3; }
.kd-strich { stroke: #1a1a18; stroke-width: 1; }
.kd-rahmen { fill: none; stroke: #1a1a18; stroke-width: 1.2; }
.kd-achse { font-family: var(--schrift-schmal); font-weight: 600; font-size: 14px; dominant-baseline: central; }
.kd-einheit { font-family: var(--schrift-schmal); font-weight: 600; font-size: 14px; }
.kd-monat { font-family: var(--schrift-schmal); font-weight: 600; font-size: 15px; fill: #1a1a18; }
.kd-humid { stroke: none; }
.kd-arid { stroke: none; }
.kd-schraffur { stroke: var(--kd-humid); stroke-width: 1.3; }
.kd-punktur { fill: #b7791a; }
.kd-perhumid { fill: var(--kd-n); opacity: 0.85; }
.kd-saeule { fill: var(--kd-n); opacity: 0.85; }
.kd-n-linie { fill: none; stroke: var(--kd-n); stroke-width: 2.4; stroke-linejoin: round; }
.kd-t-linie { fill: none; stroke: var(--kd-t); stroke-width: 2.8; stroke-linejoin: round; }
.kd-t-punkt { fill: var(--kd-t); stroke: #fff; stroke-width: 1.2; }
.kd-n-punkt { fill: var(--kd-n); stroke: #fff; stroke-width: 1.2; }
.kd-spalte { fill: rgba(27, 45, 56, 0.07); }
.kd-fang { fill: transparent; cursor: crosshair; }
.kd-wert rect { fill: var(--einband); }
.kd-wert text { font-family: var(--schrift-schmal); font-weight: 600; font-size: 15px; fill: #fff; }
/* Schwarzweiss fuer den Kopierer */
.kd-sw .kd-t-linie { stroke: #111; }
.kd-sw .kd-t-punkt { fill: #111; }
.kd-sw .kd-n-linie { stroke: #111; stroke-dasharray: 6 3; }
.kd-sw .kd-saeule, .kd-sw .kd-perhumid { fill: #777; }
.kd-sw .kd-schraffur { stroke: #333; }
.kd-sw .kd-punktur { fill: #333; }
.kd-sw .kd-achse-t, .kd-sw .kd-achse-n, .kd-sw .kd-jahr-t, .kd-sw .kd-jahr-n { fill: #111; }

/* ---------------------------------------------------------------- Seite: Blatt mit Diagramm(en), darunter Weltkarte */
:root { --km-tropen: #3f8a3a; --km-trocken: #c9942a; --km-subtropen: #d96a2b; --km-gemaessigt: #2f8a7e; --km-kalt: #4f7fb5; --km-hoehe: #8a5a3a; }
.km-tisch { display: flex; flex-direction: column; gap: 10px; }
.km-blatt { flex: 1 1 auto; min-height: 0; margin-right: 0 !important; display: grid; place-items: center; padding: 14px 18px; }
.km-diagramme { width: 100%; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; justify-items: center; gap: 18px; }
.km-diagramme.km-zwei { grid-template-columns: 1fr 1fr; }
.km-fig { margin: 0; width: 100%; max-width: min(100%, calc((100dvh - 330px) * 1.27)); position: relative; }
.km-zwei .km-fig { max-width: 100%; }
.km-marke { position: absolute; left: 0; top: -2px; transform: translateY(-100%); font-family: var(--schrift-schmal); font-weight: 600; font-size: 18px; color: var(--einband); }
.km-kartenfeld { flex: none; height: 180px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; background: #fff; border-radius: 3px; box-shadow: var(--schatten-blatt); padding: 6px 18px 6px 6px; }
.km-kartenfeld .km-karte { height: 100%; aspect-ratio: 2.05 / 1; }
.km-karte { background: #fff; }
.ka-karte { width: 100%; }
.km-zonen h2 { margin: 0 0 6px; font-family: var(--schrift-schmal); font-weight: 600; font-size: 18px; }
.km-zonen ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 14px; font-size: 14.5px; }
.km-zonen li { display: flex; align-items: center; gap: 8px; }
.km-zonen i { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px rgba(27, 45, 56, 0.15); }
.km-zonen p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--tinte-2); max-width: 46ch; }
.km-ort-plakette { fill: #fff; stroke: var(--einband); stroke-width: 1; }
.km-mobil-kopf { display: none; }
@keyframes km-stempel { 0% { transform: scale(1.9); opacity: 0.2; } 60% { transform: scale(0.92); opacity: 1; } 100% { transform: scale(1); } }
.km-ort-an circle { animation: km-stempel 280ms cubic-bezier(0.2, 0.8, 0.3, 1) both; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .km-ort-an circle { animation: none; } }
.km-weltkarte { display: block; width: 100%; height: 100%; }
.km-meer { fill: #d3e4ee; }
.km-netz { fill: none; stroke: #9fbfd4; stroke-width: 0.5; }
.km-land { fill: #e3ebcf; stroke: #9fb58a; stroke-width: 0.5; }
.km-ort { cursor: pointer; }
.km-ort circle { stroke: #fff; stroke-width: 1.2; }
.km-ort:hover circle, .km-ort:focus-visible circle { stroke: var(--einband); stroke-width: 2; }
.km-ort-an circle { stroke: var(--einband); stroke-width: 2.4; }
.km-ort-name { font-family: var(--schrift-schmal); font-weight: 600; font-size: 13.5px; fill: var(--tinte); }
.km-f-tropen circle, i.km-f-tropen { fill: var(--km-tropen); background: var(--km-tropen); }
.km-f-trocken circle, i.km-f-trocken { fill: var(--km-trocken); background: var(--km-trocken); }
.km-f-subtropen circle, i.km-f-subtropen { fill: var(--km-subtropen); background: var(--km-subtropen); }
.km-f-gemaessigt circle, i.km-f-gemaessigt { fill: var(--km-gemaessigt); background: var(--km-gemaessigt); }
.km-f-kalt circle, i.km-f-kalt { fill: var(--km-kalt); background: var(--km-kalt); }
.km-f-hoehe circle, i.km-f-hoehe { fill: var(--km-hoehe); background: var(--km-hoehe); }
.km-quelle { flex: none; margin: -4px 2px 0; font-size: 11px; color: var(--tinte-2); }

/* ---------------------------------------------------------------- Logbuch-Inhalte */
.km-legende { list-style: none; margin: 4px 0 12px; padding: 0; display: grid; gap: 10px; }
.km-legende li { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: start; }
.km-legende b { display: block; font-size: 15.5px; }
.km-legende span { font-size: 14.5px; line-height: 1.45; color: var(--tinte-2); }
.lg-t, .lg-n, .lg-humid, .lg-arid, .lg-perhumid { display: inline-block; width: 36px; height: 16px; margin-top: 2px; border-radius: 3px; }
.lg-t { background: linear-gradient(transparent 6px, var(--kd-t) 6px, var(--kd-t) 10px, transparent 10px); }
.lg-n { background: var(--kd-n); opacity: 0.85; }
.lg-humid { background: repeating-linear-gradient(90deg, var(--kd-humid) 0 1.4px, transparent 1.4px 5px); box-shadow: inset 0 0 0 1px rgba(31, 100, 176, 0.3); }
.lg-arid { background: radial-gradient(#b7791a 1.1px, transparent 1.3px) 0 0 / 6px 6px; box-shadow: inset 0 0 0 1px rgba(183, 121, 26, 0.35); }
.lg-perhumid { background: var(--kd-n); }
.km-werkzeug .lg-t, .km-werkzeug .lg-n { width: 22px; height: 12px; margin: 0 8px 0 0; vertical-align: -1px; }
.km-feld { padding: 0 !important; margin-bottom: 10px; }
.km-feld label { display: block; font-size: 14px; font-weight: 600; color: var(--tinte-2); margin-bottom: 4px; }
.km-feld select { width: 100%; height: 44px; padding: 0 10px; border: 1.5px solid var(--linie-stark); border-radius: var(--r-kind); background: #fff; font-size: 15.5px; }
.km-feld select:focus { outline: none; border-color: var(--wasser); box-shadow: 0 0 0 3px var(--wasser-hell); }
.km-typ { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-weight: 600; font-size: 14.5px; }
.km-typ i, .km-familien i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: none; }
.km-merkmale { margin: 6px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.5; color: var(--tinte-2); }
.km-familien { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; color: var(--tinte-2); }
.km-familien li { display: inline-flex; align-items: center; gap: 6px; }
.km-tabelle-halter { overflow-x: auto; margin: 6px 0 10px; }
.km-tabelle { border-collapse: collapse; font-family: var(--schrift-schmal); font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
.km-tabelle th, .km-tabelle td { padding: 4px 5px; text-align: right; border-bottom: 1px solid var(--linie); white-space: nowrap; }
.km-tabelle thead th { color: var(--tinte-2); font-weight: 600; }
.km-zeile-t td, .km-zeile-t th { color: var(--kd-t); }
.km-zeile-n td, .km-zeile-n th { color: var(--kd-n); }
.km-werkzeug { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.km-werkzeug .wahl-knopf { min-height: 44px; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.km-monate { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.km-monate .wahl-knopf { min-height: 44px; padding: 4px; text-align: center; font-family: var(--schrift-schmal); font-size: 17px; }
.km-wahl .wahl-knopf b { display: block; font-size: 16px; }
.km-wahl .wahl-knopf small { display: block; font-weight: 500; font-size: 13.5px; color: var(--tinte-2); }
.km-wahl .wahl-knopf[aria-pressed="true"] small { color: rgba(255, 255, 255, 0.8); }
.km-eingabe input { width: 5.2ch; }
.km-arten button:not([aria-checked="true"]) small { display: none; }
.s-achse { fill: none; stroke: var(--tinte-2); stroke-width: 1.4; }
.s-balken { fill: var(--kd-n); opacity: 0.8; }
.s-kurve { fill: none; stroke: var(--kd-t); stroke-width: 2.2; stroke-linecap: round; }
.s-strich { fill: none; stroke: var(--einband); stroke-width: 2.2; stroke-linecap: round; }
.s-stift { fill: var(--einband); }
.s-p1 { fill: var(--km-tropen); } .s-p2 { fill: var(--km-kalt); } .s-p3 { fill: var(--km-trocken); }
body.km[data-zustand="expedition"] .km-form { opacity: 0.5; pointer-events: none; }

/* Stationen-Knoepfe wie in der Plattentektonik (gemeinsames Logbuch-Muster) */
.tk-station-knopf { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; width: 100%; padding: 8px 10px 8px 12px; border: 0; background: none; text-align: left; border-radius: var(--r-kind); }
.tk-station-knopf:hover { background: var(--pult-2); }
.tk-station-knopf b { display: block; font-size: 16.5px; font-weight: 600; }
.tk-station-knopf small { display: block; font-size: 13.5px; color: var(--tinte-2); }
.tk-station-bild { width: 40px; height: 40px; border-radius: 8px; background: var(--pult-2); }
.tk-stationen .lb-eintrag { min-height: 58px; }
.tk-station-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.tk-station-kopf h2 { margin: 0; font-family: var(--schrift-schmal); font-weight: 600; font-size: 23px; }
.tk-text { margin: 0 0 10px; font-size: 15.5px; line-height: 1.5; }
.tk-h { margin: 6px 0 8px; font-family: var(--schrift-schmal); font-weight: 600; font-size: 18px; }
.tk-zwischen { margin: 12px 0 6px; font-family: var(--schrift-schmal); font-weight: 600; font-size: 18px; }
.tk-info { margin-top: 12px; display: grid; gap: 10px; }
.tk-tipp-gross { margin: 0; padding: 12px 14px; border-radius: var(--r-kind); background: var(--wasser-hell); color: var(--wasser-tief); font-size: 15px; }
.tk-karte-info { padding: 12px 14px; border-radius: var(--r-kind); background: var(--pult); border: 1px solid var(--linie); }
.tk-karte-info h3 { margin: 0 0 4px; font-family: var(--schrift-schmal); font-weight: 600; font-size: 20px; }

@media (max-width: 900px) {
  .km-tisch { height: auto !important; }
  .km-blatt { height: auto; flex: none; }
  .km-fig { max-width: 100%; }
  .km-diagramme.km-zwei { grid-template-columns: 1fr; }
  .km-kartenfeld { height: auto; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 6px 6px 10px; }
  .km-kartenfeld .km-karte { height: auto; width: 100%; }
  .km-zonen { padding: 0 6px; }
  .km-zonen h2 { display: none; }
  .km-zonen ul { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13.5px; }
  .km-zonen p { display: none; }
  body.km[data-zustand="stationen"] .lb-kopf h1 { display: none; }
  .km-mobil-kopf { display: block; flex: none; margin: 0 2px; font-size: 15px; line-height: 1.3; }
  .km-mobil-kopf b { display: block; font-family: var(--schrift-schmal); font-weight: 600; font-size: 21px; }
  .km-mobil-kopf span { color: var(--tinte-2); }
  body.km .kt-tisch { height: auto; }
  .km-form button { height: 30px; padding: 0 10px; font-size: 13.5px; }
  .km .kd-achse, .km .kd-einheit { font-size: 20px; }
  .km .kd-monat { font-size: 21px; }
  .km .kd-lage { font-size: 19px; }
  .km .kd-ort { font-size: 25px; }
  .km .kd-jahr { font-size: 22px; }
  .km .lb-aufgabe .lb-knoepfe { position: static; margin: 14px 0 0; padding: 0; background: none; }
}

@media (max-width: 480px) {
  .km .marke-wort b { display: none; }
  .km .modul-name { display: inline-flex; }
}

/* ================================================================
   Generator der Lehrkraft (klima/generator.php): Werkbank + A4-Blatt hoch
   ================================================================ */
.kg-select, .kl .feld select { width: 100%; height: 38px; padding: 0 8px; border: 1px solid var(--linie-stark); border-radius: var(--r); background: #fff; font-size: 14.5px; }
.kg-eigen-kopf { display: grid; grid-template-columns: 1fr 96px; gap: 6px; margin-bottom: 6px; }
.kg-eigen-kopf input, .kg-werte input { width: 100%; height: 30px; padding: 0 7px; border: 1px solid var(--linie-stark); border-radius: 4px; background: #fff; font-size: 14px; font-variant-numeric: tabular-nums; }
.kg-werte { width: 100%; border-collapse: collapse; font-size: 13px; }
.kg-werte th { font-family: var(--schrift-schmal); font-weight: 600; text-align: left; padding: 2px 4px; color: var(--tinte-2); }
.kg-werte td { padding: 2px 3px; }
.kg-tisch { overflow: hidden; }
.kg-leiste { top: 12px; }
.kg-buehne { position: absolute; inset: 58px 0 0 0; display: grid; place-items: center; overflow: hidden; }
.kg-halter { position: relative; }
.kg-halter .kg-blatt { box-shadow: var(--schatten-blatt); }
.kg-hinweis { padding: 0 18px; }
.kg-leer { margin: 40mm 15mm; font-size: 5mm; color: var(--tinte-2); text-align: center; }

.kg-blatt { width: 210mm; min-height: 297mm; height: 297mm; padding: 12mm 14mm 9mm; background: #fff; color: #1a1a18; font-family: var(--schrift); display: flex; flex-direction: column; gap: 4mm; overflow: hidden; }
.kg-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 6mm; padding-bottom: 2.5mm; border-bottom: 0.35mm solid #1a1a18; }
.kg-kopf h2 { margin: 0; font-size: 6mm; line-height: 1.15; font-weight: 600; }
.kg-kopf p { margin: 1.4mm 0 0; font-size: 3.4mm; line-height: 1.4; color: #3c3c38; max-width: 110mm; }
.kg-kopf .kb-felder { flex-direction: column; gap: 1.6mm; padding-top: 0; }
.kg-kopf .kb-felder span { justify-content: space-between; }
.kg-kopf .kb-felder i { width: 34mm; }
.kg-diagramme { display: grid; grid-template-columns: 1fr; justify-items: center; }
.kg-diagramme .kg-fig { width: 150mm; margin: 0; }
.kg-diagramme.kg-zwei { grid-template-columns: 1fr 1fr; gap: 4mm; }
.kg-diagramme.kg-zwei .kg-fig { width: 100%; }
.kg-fig { position: relative; }
.kg-fig figcaption { position: absolute; left: 0; top: 0; font-family: var(--schrift-schmal); font-weight: 600; font-size: 5mm; }
.kg-fig svg { width: 100%; height: auto; display: block; }
.kg-tabelle table { width: 100%; border-collapse: collapse; font-family: var(--schrift-schmal); font-weight: 600; font-size: 3.4mm; font-variant-numeric: tabular-nums; }
.kg-tabelle th, .kg-tabelle td { border: 0.25mm solid #55554f; padding: 1.2mm 1mm; text-align: center; }
.kg-tabelle .kg-t td, .kg-tabelle .kg-t th { color: var(--kd-t); }
.kg-tabelle .kg-n td, .kg-tabelle .kg-n th { color: var(--kd-n); }
.kg-sw .kg-tabelle .kg-t td, .kg-sw .kg-tabelle .kg-t th, .kg-sw .kg-tabelle .kg-n td, .kg-sw .kg-tabelle .kg-n th { color: #1a1a18; }
.kg-fragen { margin: 0; padding-left: 6mm; display: grid; gap: 2.6mm; font-size: 3.6mm; line-height: 1.4; }
.kg-fragen p { margin: 0; }
.kg-zeile { display: block; height: 7.5mm; border-bottom: 0.25mm solid #55554f; }
.kg-antwort { margin-top: 1mm !important; font-weight: 600; color: #1a1a18; }
.kg-blatt .kb-fuss { margin-top: auto; }

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

/* ================================================================
   Auftraege der Lehrkraft (klima/lehrer.php)
   ================================================================ */
.ka-arten { display: grid; gap: 4px; }
.ka-arten label, .ka-orte label { display: flex; align-items: center; gap: 8px; min-height: 30px; font-size: 14px; }
.ka-arten input, .ka-orte input { width: 16px; height: 16px; accent-color: var(--einband); }
.ka-orte-blatt { max-width: 860px; margin: 0 auto; background: #fff; border-radius: 3px; box-shadow: var(--schatten-blatt); padding: 20px 22px 24px; }
.ka-orte-blatt h2 { margin: 0 0 4px; font-family: var(--schrift-schmal); font-weight: 600; font-size: 24px; }
.ka-orte-blatt > p { margin: 0 0 12px; font-size: 14px; color: var(--tinte-2); }
.ka-karte { height: 230px; margin-bottom: 14px; }
.ka-orte { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 14px; }
.ka-orte h3 { grid-column: 1 / -1; margin: 12px 0 2px; font-family: var(--schrift-schmal); font-weight: 600; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.ka-orte h3 i { width: 12px; height: 12px; border-radius: 50%; }