/* =====================================================================
   BeoKiz Webapp
   Gestaltung fuer Menschen, die selten am Computer arbeiten:
   grosse Schrift, viel Luft, klare Farben, grosse Klickflaechen.
   ===================================================================== */

:root {
  --grund:        #FBF8F4;
  --karte:        #FFFFFF;
  --text:         #2A2724;
  --text-leise:   #6B6560;
  --rand:         #E5DED5;
  --akzent:       #D9741A;
  --akzent-dunkel:#B25B0E;
  --akzent-hell:  #FDF1E5;
  --gruen:        #2E7D4F;
  --gruen-hell:   #E9F5EE;
  --blau:         #2B6CB0;
  --blau-hell:    #E8F0F9;
  --gelb:         #9A6B00;
  --gelb-hell:    #FDF3DC;
  --rot:          #B3261E;
  --rot-hell:     #FBEAE9;
  --grau-hell:    #F0ECE6;
  --radius:       14px;
  --schatten:     0 1px 2px rgba(42,39,36,.06), 0 4px 14px rgba(42,39,36,.05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; font-weight: 650; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.08rem; }
p  { margin: 0 0 1em; }
a  { color: var(--akzent-dunkel); }

/* ------------------------------------------------------------ Kopfleiste */
.kopf {
  background: var(--karte);
  border-bottom: 1px solid var(--rand);
  position: sticky; top: 0; z-index: 20;
}
.kopf-inhalt {
  max-width: 1060px; margin: 0 auto; padding: .7rem 1.2rem;
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
}
.marke {
  display: flex; align-items: center; gap: .6rem;
  font-weight: 700; font-size: 1.15rem; color: var(--text); text-decoration: none;
}
.marke-zeichen {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: var(--akzent); color: #fff;
  display: grid; place-items: center; font-size: 1.05rem; font-weight: 700;
}
.navigation { display: flex; gap: .3rem; margin-left: auto; align-items: center; flex-wrap: wrap; }
.navigation a, .navigation button {
  padding: .5rem .85rem; border-radius: 10px; text-decoration: none;
  color: var(--text); font-size: .97rem; border: none; background: none;
  font-family: inherit; cursor: pointer;
}
.navigation a:hover, .navigation button:hover { background: var(--grau-hell); }
.navigation a.aktiv { background: var(--akzent-hell); color: var(--akzent-dunkel); font-weight: 600; }

/* ----------------------------------------------------------------- Seite */
.seite { max-width: 1060px; margin: 0 auto; padding: 1.8rem 1.2rem 4rem; }
.seite-schmal { max-width: 620px; }
.kopfzeile { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.kopfzeile h1 { margin: 0; }
.kopfzeile .rechts { margin-left: auto; }

/* ----------------------------------------------------------------- Karte */
.karte {
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--schatten);
  margin-bottom: 1.1rem;
}
.karte-schlicht { box-shadow: none; }
.karte h2:first-child, .karte h3:first-child { margin-top: 0; }

/* -------------------------------------------------------------- Schalter */
.schalter {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .75rem 1.3rem; border-radius: 11px; border: 1px solid var(--rand);
  background: var(--karte); color: var(--text); font-size: 1rem; font-weight: 600;
  font-family: inherit; cursor: pointer; text-decoration: none; line-height: 1.3;
}
.schalter:hover { background: var(--grau-hell); }
.schalter-haupt {
  background: var(--akzent); border-color: var(--akzent); color: #fff;
}
.schalter-haupt:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); }
.schalter-gross { padding: 1rem 1.7rem; font-size: 1.1rem; border-radius: 13px; }
.schalter-klein { padding: .4rem .8rem; font-size: .9rem; font-weight: 500; }
.schalter-gefahr { color: var(--rot); border-color: #E8C9C6; }
.schalter-gefahr:hover { background: var(--rot-hell); }
.schalter:disabled { opacity: .5; cursor: not-allowed; }

/* -------------------------------------------------------------- Formular */
.feld { margin-bottom: 1.15rem; }
.feld label, .feld-titel {
  display: block; font-weight: 600; margin-bottom: .35rem; font-size: 1rem;
}
.feld .hilfe { color: var(--text-leise); font-size: .92rem; margin: -.2rem 0 .45rem; }
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], select, textarea {
  width: 100%; padding: .7rem .8rem; font-size: 1rem; font-family: inherit;
  color: var(--text); background: var(--karte);
  border: 1px solid #D6CDC2; border-radius: 10px;
}
textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
input:focus, select:focus, textarea:focus {
  outline: 3px solid var(--akzent-hell); border-color: var(--akzent); outline-offset: 0;
}
.reihe { display: flex; gap: 1rem; flex-wrap: wrap; }
.reihe > * { flex: 1 1 200px; }

/* ------------------------------------------------------- Auswahl-Kacheln */
.kacheln { display: flex; flex-wrap: wrap; gap: .6rem; }
.kachel {
  position: relative; border: 2px solid var(--rand); border-radius: 12px;
  padding: .7rem 1rem; cursor: pointer; background: var(--karte);
  min-width: 110px; text-align: center;
}
.kachel input { position: absolute; opacity: 0; pointer-events: none; }
.kachel:hover { border-color: #C9BFB2; }
.kachel:has(input:checked) {
  border-color: var(--akzent); background: var(--akzent-hell);
  box-shadow: 0 0 0 1px var(--akzent);
}
.kachel-name { font-weight: 600; display: block; }
.kachel-zusatz { font-size: .85rem; color: var(--text-leise); }
.kachel-probe { font-size: 1.15rem; display: block; margin-bottom: .15rem; }

/* --------------------------------------------------------- Statusabzeichen */
.abzeichen {
  display: inline-block; padding: .22rem .65rem; border-radius: 999px;
  font-size: .85rem; font-weight: 650; white-space: nowrap;
}
.abzeichen-grau  { background: var(--grau-hell); color: var(--text-leise); }
.abzeichen-blau  { background: var(--blau-hell);  color: var(--blau); }
.abzeichen-gruen { background: var(--gruen-hell); color: var(--gruen); }
.abzeichen-gelb  { background: var(--gelb-hell);  color: var(--gelb); }
.abzeichen-rot   { background: var(--rot-hell);   color: var(--rot); }

/* -------------------------------------------------------------- Hinweise */
.hinweis {
  border-radius: 12px; padding: .9rem 1.1rem; margin-bottom: 1.1rem;
  border: 1px solid transparent;
}
.hinweis-info    { background: var(--blau-hell);  border-color: #C8DCF2; color: #1E4E80; }
.hinweis-erfolg  { background: var(--gruen-hell); border-color: #C3E3D1; color: #1E5B38; }
.hinweis-warnung { background: var(--gelb-hell);  border-color: #EBD9AC; color: #7A5400; }
.hinweis-fehler  { background: var(--rot-hell);   border-color: #EFC9C6; color: #8C1D17; }
.hinweis p:last-child { margin-bottom: 0; }
.hinweis strong { font-weight: 700; }

/* ---------------------------------------------------------------- Listen */
.liste { display: flex; flex-direction: column; gap: .7rem; }
.eintrag {
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: 1rem 1.2rem; text-decoration: none; color: inherit;
}
a.eintrag:hover { border-color: var(--akzent); background: #FFFDFA; }
.eintrag-haupt { flex: 1 1 260px; min-width: 0; }
.eintrag-titel { font-weight: 650; font-size: 1.05rem; }
.eintrag-zusatz { color: var(--text-leise); font-size: .93rem; }

/* --------------------------------------------------------------- Tabelle */
table { width: 100%; border-collapse: collapse; font-size: .97rem; }
th, td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--rand); vertical-align: middle; }
th { font-weight: 650; color: var(--text-leise); font-size: .9rem; }
.tabelle-huelle { overflow-x: auto; }

/* ------------------------------------------------------------ Fortschritt */
.balken { height: 10px; background: var(--grau-hell); border-radius: 999px; overflow: hidden; }
.balken-fuellung { height: 100%; background: var(--akzent); transition: width .5s ease; }

.punkte::after {
  content: ''; animation: punkte 1.4s steps(4, end) infinite;
}
@keyframes punkte { 0%{content:''} 25%{content:'.'} 50%{content:'..'} 75%{content:'...'} }

/* ------------------------------------------------------------- Abschnitt */
.abschnitt-nummer {
  display: inline-grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--akzent); color: #fff;
  font-size: .95rem; font-weight: 700; margin-right: .6rem; flex: none;
}
.abschnitt-kopf { display: flex; align-items: center; margin-bottom: 1rem; }
.abschnitt-kopf h2 { margin: 0; }

/* ----------------------------------------------------------------- Reiter */
.reiter { display: flex; gap: .4rem; border-bottom: 2px solid var(--rand); margin-bottom: 1.1rem; flex-wrap: wrap; }
.reiter button {
  padding: .65rem 1.1rem; border: none; background: none; font-family: inherit;
  font-size: 1rem; font-weight: 600; color: var(--text-leise); cursor: pointer;
  border-bottom: 3px solid transparent; margin-bottom: -2px; border-radius: 8px 8px 0 0;
}
.reiter button:hover { color: var(--text); background: var(--grau-hell); }
.reiter button.aktiv { color: var(--akzent-dunkel); border-bottom-color: var(--akzent); }

/* ------------------------------------------------------------- Vorschau */
.vorschau {
  background: #fff; border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 2.2rem 2.4rem; white-space: pre-wrap; line-height: 1.7;
}
.vorschau-titel { font-size: 1.45em; font-weight: 700; text-align: center; margin-bottom: 1.1rem; }
.vorschau-fuss { font-style: italic; font-size: .8em; margin-top: 1.2rem; }

/* ------------------------------------------------------------- Kleinkram */
.leise { color: var(--text-leise); }
.klein { font-size: .92rem; }
.mono { font-family: "Cascadia Mono", Consolas, monospace; font-size: .95rem; }
.mittig { text-align: center; }
.abstand-oben { margin-top: 1.4rem; }
.trenner { border: none; border-top: 1px solid var(--rand); margin: 1.6rem 0; }
.knopfreihe { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }
.verstecken { display: none !important; }

.fuss {
  max-width: 1060px; margin: 0 auto; padding: 1.5rem 1.2rem 2.5rem;
  color: var(--text-leise); font-size: .9rem; border-top: 1px solid var(--rand);
}

/* ------------------------------------------------------------- Verbindung */
.verbindung { display: inline-flex; align-items: center; gap: .45rem; font-size: .92rem; }
.punkt { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.punkt-an  { background: var(--gruen); }
.punkt-aus { background: #C0B7AB; }

@media (max-width: 620px) {
  body { font-size: 16px; }
  .seite { padding: 1.2rem .9rem 3rem; }
  .karte { padding: 1.1rem; }
  .vorschau { padding: 1.3rem; }
}