/* Portal des Human Water Deficit.
   Farben und Schrift wie in der Kartenseite und der Excel-Fassung, damit das
   Portal erkennbar zum Projekt gehoert. */

:root{
  --grund:#F5F8F9;
  --flaeche:#FFFFFF;
  --tinte:#0F2B46;
  --tinte-weich:#4A5F70;
  --tinte-blass:#7E909D;
  --petrol:#1F6F8B;
  --petrol-tief:#155268;
  --linie:#D3DEE4;
  --linie-zart:#E8EEF1;
  --warn:#B5741C;
  --warn-flaeche:#FBF2E2;
  --gut:#2F6B4F;
  --gut-flaeche:#E8F1EC;
  --rot:#9E2B2B;
  --rot-flaeche:#F8EBEB;
}

*{box-sizing:border-box}
/* IBM Plex Sans statt Montserrat: für eine Arbeitsoberfläche mit vielen Zahlen
   und langen deutschen Wörtern besser geeignet. Echte Tabellenziffern, engere
   Laufweite, und sie passt zur Mono-Schwester, die hier schon für Pfade und
   Schlüssel benutzt wird. Zum Wechseln: hier und im <link> in basis.html. */
body{
  margin:0;background:var(--grund);color:var(--tinte);
  font-family:"IBM Plex Sans",-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
  font-feature-settings:"tnum" 1;          /* Ziffern stehen untereinander */
}

/* ---------- Kopf ---------- */
.kopfleiste{background:var(--tinte);color:#fff;padding:0 32px}
.kopfleiste .innen{
  max-width:1800px;margin:0 auto;display:flex;flex-wrap:wrap;
  align-items:center;gap:6px 26px;min-height:58px
}
.marke{font-weight:700;font-size:15px;letter-spacing:-.01em;margin-right:8px}
.marke span{color:#8FC4D6;font-weight:500}
.kopfleiste nav{display:flex;flex-wrap:wrap;gap:4px 20px;flex:1}
.kopfleiste a{color:#C8DCE6;text-decoration:none;font-size:13.5px;font-weight:500;padding:4px 0}
.kopfleiste a:hover,.kopfleiste a:focus-visible{color:#fff;text-decoration:underline}
.wer{font-size:12.5px;color:#8FA8B8;display:flex;align-items:center;gap:12px}
.wer form{margin:0}
.abmelden{
  background:none;border:1px solid #2F5573;color:#C8DCE6;font:inherit;font-size:12.5px;
  padding:4px 11px;border-radius:3px;cursor:pointer
}
.abmelden:hover{border-color:#5D8CA8;color:#fff}

/* ---------- Gerüst ----------
   Das Portal ist ein Arbeitswerkzeug, keine Leseseite. Die Prüfliste führt
   159 Länder mit sechs Spalten; die brauchen Breite. Über etwa 1800 Pixel
   hinaus wird es aber wieder schlechter: die Zeilen laufen so weit
   auseinander, dass das Auge beim Wandern von der ersten zur letzten Spalte
   die Zeile verliert. Deshalb breit, aber nicht unbegrenzt. */
.inhalt{max-width:1800px;margin:0 auto;padding:30px 32px 72px}
h1{font-size:25px;font-weight:700;letter-spacing:-.015em;margin:0 0 4px}
h2{font-size:17px;font-weight:600;margin:0 0 14px}
/* Fließtext bleibt schmal, auch wenn die Seite breit ist: eine Zeile über die
   ganze Bildschirmbreite liest sich niemand. Tabellen dürfen dagegen ziehen. */
.unterzeile{color:var(--tinte-weich);margin:0 0 24px;font-size:14px;max-width:78ch}
.tafel>p,.tafel>ul{max-width:82ch}
p{margin:0 0 14px}
a{color:var(--petrol-tief)}

.tafel{
  background:var(--flaeche);border:1px solid var(--linie);border-radius:4px;
  padding:22px 26px;margin-bottom:20px
}
.tafel--schmal{max-width:440px}
.reihe{display:flex;flex-wrap:wrap;gap:20px 26px;align-items:flex-start}
.reihe>*{flex:1 1 320px;min-width:0}

/* ---------- Kennzahlen ---------- */
/* Kennzahlen bleiben beieinander statt über die ganze Breite auseinanderzulaufen.
   Vier Kacheln auf 2500 Pixel wären je 600 Pixel breit und läsen sich schlechter. */
.zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;
  background:var(--linie);border:1px solid var(--linie);border-radius:4px;overflow:hidden;
  margin-bottom:22px;max-width:1080px}
.zahl{background:var(--flaeche);padding:16px 18px}
.zahl b{display:block;font-size:26px;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.2}
.zahl span{display:block;font-size:12px;color:var(--tinte-blass);margin-top:2px}

/* ---------- Tabellen ----------
   Kein min-width auf der Tabelle. Das war der Grund für die waagerechten
   Bildlaufleisten: overflow-x:auto zeigt eine Leiste, sobald der Inhalt breiter
   ist als der Kasten, und eine erzwungene Mindestbreite ist genau das. Ohne sie
   passt sich die Tabelle an und die Leiste erscheint nur, wenn sie wirklich
   gebraucht wird. */
.tabellenbox{overflow-x:auto}
/* Für lange Listen: der Kasten scrollt, nicht die Seite, und der Tabellenkopf
   bleibt dabei stehen. Ein position:sticky im Seitenfluss brächte hier nichts,
   weil ein Kasten mit overflow selbst zum Scrollbereich wird. */
.tabellenbox--lang{max-height:72vh;overflow:auto}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{text-align:left;padding:10px 16px 10px 0;border-bottom:1px solid var(--linie-zart);
  vertical-align:middle}
th{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--tinte-blass);
  font-weight:600;border-bottom:1px solid var(--linie);white-space:nowrap}
td:last-child,th:last-child{padding-right:0;text-align:right}
/* Bei vielen Zeilen bleibt der Kopf stehen, sonst weiß man in Zeile 90 nicht
   mehr, welche Spalte man liest. */
thead th{position:sticky;top:0;background:var(--flaeche);z-index:1}
tbody tr:hover{background:var(--linie-zart)}
.einheit{font-variant-numeric:tabular-nums;white-space:nowrap}
.leise{color:var(--tinte-blass);font-size:13px}

/* ---------- Formulare ---------- */
label{display:block;font-size:12.5px;font-weight:600;margin:0 0 4px;color:var(--tinte-weich)}
input[type=text],input[type=email],input[type=password],select,textarea{
  width:100%;font:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--linie);
  border-radius:3px;background:var(--flaeche);color:var(--tinte)
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--petrol);outline-offset:1px;
  border-color:var(--petrol)}
.feld{margin-bottom:14px}
/* Alle Schaltflächen teilen sich dieselben Maße und unterscheiden sich nur in
   der Farbe. Vorher hatte jede Spielart eigene Polsterung und Schriftgröße;
   nebeneinander in einer Reihe ergab das drei verschiedene Höhen. Die
   durchsichtige Umrandung bei der gefüllten Variante hält sie genauso hoch wie
   die umrandeten, ohne dass man sie sieht. */
.knopf,.knopf--leise,.knopf--warnung{
  font:inherit;font-size:13.5px;font-weight:600;line-height:1.2;
  background:var(--petrol);color:#fff;border:1px solid transparent;border-radius:3px;
  padding:9px 16px;cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;min-height:36px;white-space:nowrap;text-decoration:none
}
.knopf:hover{background:var(--petrol-tief)}
.knopf--leise{background:none;color:var(--petrol-tief);border-color:var(--linie);
  font-weight:500}
.knopf--leise:hover{background:var(--linie-zart);border-color:var(--petrol)}
.knopf--warnung{background:none;color:var(--rot);border-color:var(--linie);
  font-weight:500}
.knopf--warnung:hover{background:var(--rot-flaeche);border-color:var(--rot)}
.knopf:focus-visible,.knopf--leise:focus-visible,.knopf--warnung:focus-visible{
  outline:2px solid var(--petrol);outline-offset:2px}
.knopfreihe{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;
  align-items:center}
.knopfreihe form{margin:0;display:flex}

/* ---------- Zwei Schritte ----------
   Freigeben und Veröffentlichen sind getrennt. Wer nur freigibt, ändert an der
   Karte nichts; ohne sichtbaren Schrittstand merkt das niemand. */
.schritte{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px}
.schritt{
  flex:1 1 220px;border:1px solid var(--linie);border-left-width:3px;
  border-radius:3px;padding:10px 14px;background:var(--grund)
}
.schritt b{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  margin-bottom:2px}
.schritt span{font-size:13.5px;color:var(--tinte-weich)}
.schritt--fertig{border-left-color:var(--gut)}
.schritt--fertig b{color:var(--gut)}
.schritt--offen{border-left-color:var(--warn)}
.schritt--offen b{color:var(--warn)}

/* ---------- Meldungen ---------- */
.meldung{padding:12px 16px;border-radius:3px;margin-bottom:18px;font-size:14px;
  border-left:3px solid}
.meldung--fehler{background:var(--rot-flaeche);border-color:var(--rot);color:#6E1F1F}
.meldung--hinweis{background:var(--gut-flaeche);border-color:var(--gut);color:#1E4A36}
.meldung--warnung{background:var(--warn-flaeche);border-color:var(--warn);color:#744A11}

/* ---------- Marken ---------- */
.marke-klein{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;padding:3px 8px;border-radius:2px;white-space:nowrap}
.m-gut{background:var(--gut-flaeche);color:var(--gut)}
.m-warn{background:var(--warn-flaeche);color:var(--warn)}
.m-aus{background:var(--linie-zart);color:var(--tinte-blass)}

/* ---------- Geheimnis einmalig zeigen ---------- */
.einmalig{background:var(--warn-flaeche);border:1px solid var(--warn);border-radius:4px;
  padding:18px 20px;margin-bottom:22px}
.einmalig h2{color:var(--warn);font-size:13px;text-transform:uppercase;letter-spacing:.07em;
  margin-bottom:8px}
.geheim{
  font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace;font-size:16px;
  background:var(--flaeche);border:1px solid var(--linie);border-radius:3px;
  padding:11px 14px;margin:8px 0;word-break:break-all;user-select:all
}
code{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace;font-size:.88em;
  background:var(--linie-zart);padding:.1em .35em;border-radius:2px}
pre{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace;font-size:12.5px;
  background:var(--flaeche);border:1px solid var(--linie);border-radius:3px;
  padding:14px 16px;overflow-x:auto;line-height:1.65}

/* ---------- Anmeldeseite ---------- */
.mitte{max-width:400px;margin:64px auto;padding:0 24px}
.mitte h1{font-size:21px;margin-bottom:6px}
.mitte .tafel{padding:26px 26px 22px}
.qr{display:block;width:196px;height:196px;margin:4px auto 14px;
  border:1px solid var(--linie);border-radius:3px;background:#fff}

@media (max-width:640px){
  .inhalt{padding:24px 16px 56px}
  .kopfleiste{padding:0 16px}
  td:last-child,th:last-child{text-align:left}
}