/* ==========================================================================
   Wartungsbuch Kleinkläranlage – Gestaltung
   Bildschirm: für das Handy optimiert. Druck: Tabelle Seite 1, Diagramme danach.
   ========================================================================== */

:root {
  --blau: #1f4e79;
  --blau-hell: #ddebf7;
  --gelb: #fff2cc;
  --rand: #9bb7d4;
  --text: #1a1a1a;
  --grau: #666;
  --rot: #b00020;
  --gruen: #1b7f3b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  color: var(--text);
  background: #f4f6f8;
  -webkit-text-size-adjust: 100%;
}

.hidden { display: none !important; }

/* ------------------------------------------------------------- Anmeldung */

.login {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  /* ruhiger Farbverlauf statt flächigem Grau – die Karte soll schweben */
  background: linear-gradient(165deg, #2a6394 0%, var(--blau) 55%, #163a5a 100%);
}

.login-box {
  background: #fff;
  border-radius: 18px;
  padding: 2.2rem 1.6rem 1.8rem;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .28), 0 2px 6px rgba(0, 0, 0, .12);
  animation: auftauchen .35s ease-out;
}

@keyframes auftauchen {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .login-box { animation: none; }
}

/* ------------------------------------------------------------ Markenkopf */

.marke { text-align: center; margin-bottom: 1.6rem; }

.marke-zeichen {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  display: block;
  margin: 0 auto .8rem;
  box-shadow: 0 4px 12px rgba(31, 78, 121, .3);
}

.login-box h1 {
  margin: 0;
  color: var(--blau);
  font-size: 1.45rem;
  letter-spacing: -.01em;
}

.klein { color: var(--grau); font-size: .88rem; margin: .25rem 0 0; }

/* ------------------------------------------------- Umschalter An/Register */

.segment {
  display: flex;
  gap: .25rem;
  background: #eef2f6;
  border-radius: 10px;
  padding: .25rem;
  margin-bottom: 1.4rem;
}

.segment-btn {
  flex: 1;
  padding: .55rem .5rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--grau);
  font-size: .92rem;
  font-weight: 600;
  transition: background .15s, color .15s;
}

.segment-btn.aktiv {
  background: #fff;
  color: var(--blau);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
}

/* --------------------------------------------------------- Anmeldeformular */

.formular label {
  margin: .9rem 0 .35rem;
  font-size: .82rem;
  letter-spacing: .01em;
}

.formular input {
  background: #f7f9fb;
  border-color: #d3dde7;
  font-size: 1rem;
  padding: .7rem .8rem;
  transition: border-color .15s, background .15s, box-shadow .15s;
}

.formular input:focus {
  outline: none;
  background: #fff;
  border-color: var(--blau);
  box-shadow: 0 0 0 3px rgba(31, 78, 121, .16);
}

.formular input::placeholder { color: #9aa7b4; }

.hinweis {
  font-size: .78rem;
  color: var(--grau);
  margin: .4rem 0 0;
  line-height: 1.4;
}

.formular .gross { margin-top: 1.6rem; }
.primaer:hover { background: #1a4368; border-color: #1a4368; }
.primaer:active { transform: translateY(1px); }

/* ------------------------------------------------------------------ Kopf */

.kopf {
  background: var(--blau);
  color: #fff;
  padding: .9rem 1rem calc(.9rem + env(safe-area-inset-bottom, 0px));
  position: sticky;
  top: 0;
  z-index: 10;
}

.kopf h1 { margin: 0 0 .7rem; font-size: 1.2rem; font-weight: 600; }
.kopf nav { display: flex; gap: .5rem; }

.tab {
  flex: 1;
  padding: .6rem;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  font-size: .95rem;
  cursor: pointer;
}

.tab.aktiv { background: #fff; color: var(--blau); font-weight: 600; }

/* --------------------------------------------------------------- Inhalte */

.tabinhalt { padding: 1rem; max-width: 1100px; margin: 0 auto; }

.karte {
  background: #fff;
  border-radius: 12px;
  padding: 1.2rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .08);
}

label {
  display: block;
  margin: 1rem 0 .3rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--blau);
}

label:first-of-type { margin-top: 0; }
.einheit { font-weight: 400; color: var(--grau); }

input, textarea, select {
  width: 100%;
  padding: .75rem;
  font-size: 1.05rem;
  font-family: inherit;
  border: 1px solid var(--rand);
  border-radius: 8px;
  background: var(--gelb);
  color: var(--text);
}

textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--blau); }
select { background: #fff; }

.reihe { display: flex; gap: .5rem; align-items: center; }
.reihe > input, .reihe > select { flex: 1; }

button {
  font-family: inherit;
  font-size: 1rem;
  border-radius: 8px;
  cursor: pointer;
  padding: .75rem 1rem;
  border: 1px solid transparent;
}

.primaer { background: var(--blau); color: #fff; border-color: var(--blau); }
.sekundaer { background: #fff; color: var(--blau); border-color: var(--rand); white-space: nowrap; }
.gross { width: 100%; margin-top: 1.5rem; padding: 1rem; font-size: 1.05rem; font-weight: 600; }
.link { background: none; border: 0; color: var(--grau); text-decoration: underline; }

.fehler { color: var(--rot); font-size: .9rem; min-height: 1.2rem; margin: .8rem 0 0; }
.meldung { font-size: .95rem; min-height: 1.4rem; margin: .8rem 0 0; text-align: center; }
.meldung.ok { color: var(--gruen); }
.meldung.schlecht { color: var(--rot); }

.fuss { text-align: center; padding: 1rem 1rem 2rem; }
.wer { font-size: .85rem; color: var(--grau); margin: 0 0 .4rem; }

/* -------------------------------------------------------------- Tabelle */

.tabelle-scroll { overflow-x: auto; background: #fff; border-radius: 12px; }

table { border-collapse: collapse; width: 100%; font-size: .85rem; background: #fff; }

th {
  background: var(--blau);
  color: #fff;
  padding: .5rem .4rem;
  text-align: center;
  font-weight: 600;
  font-size: .78rem;
}

th .einheit { color: #cfe0f0; }

td {
  border: 1px solid var(--rand);
  padding: .45rem .4rem;
  text-align: center;
  white-space: nowrap;
}

td.text { text-align: left; white-space: normal; min-width: 9rem; }
tbody tr:nth-child(even) td { background: var(--blau-hell); }

.zeilen-btn {
  padding: .3rem .5rem;
  font-size: .8rem;
  background: #fff;
  border: 1px solid var(--rand);
  color: var(--blau);
  margin: 0 .1rem;
}

.leer { text-align: center; color: var(--grau); padding: 2rem; }

/* ------------------------------------------------------------ Diagramme */

.diagramme { margin-top: 1.5rem; }

.diagramm {
  background: #fff;
  border-radius: 12px;
  padding: 1rem;
  margin: 0 0 1rem;
}

.diagramm figcaption {
  font-weight: 600;
  color: var(--blau);
  margin-bottom: .5rem;
  font-size: .95rem;
}

.diagramm svg { width: 100%; height: auto; display: block; }

/* ----------------------------------------------------------------- Druck */

@media print {
  @page { size: A4 landscape; margin: 10mm; }

  body { background: #fff; font-size: 10pt; }
  .noprint, .kopf, .fuss { display: none !important; }
  .tabinhalt { padding: 0; max-width: none; }
  .tabelle-scroll { overflow: visible; }

  .drucktitel { color: var(--blau); font-size: 14pt; margin: 0 0 6mm; }

  table { font-size: 8.5pt; }
  th, td { border: .4pt solid #666; padding: 1.5mm 1mm; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; }

  .diagramme { margin-top: 0; }

  /* jedes Diagramm auf eine eigene Seite */
  .diagramm {
    break-before: page;
    page-break-before: always;
    break-inside: avoid;
    padding: 0;
    margin: 0;
  }

  .diagramm figcaption { font-size: 12pt; margin-bottom: 4mm; }
}