/* Area 28 Planer – mobil zuerst */
:root {
  --orange: #fb5306;
  --orange-dunkel: #d94400;
  --blau: #5f7fa2;
  --text: #1f2328;
  --grau: #6b7280;
  --linie: #e5e7eb;
  --flaeche: #f5f6f8;
  --weiss: #fff;
  --rot: #d92d20;
  --gelb: #f2b705;
  --gruen: #2e9e5b;
  --radius: 12px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: var(--text);
  background: var(--flaeche);
  padding-bottom: calc(70px + env(safe-area-inset-bottom));
}
a { color: var(--blau); }
h1 { font-size: 1.4rem; margin: .2rem 0 .8rem; }
h2 { font-size: 1.1rem; margin: 0 0 .6rem; }

/* Kopf */
.kopf {
  display: flex; align-items: center; gap: .8rem;
  background: var(--weiss); border-bottom: 3px solid var(--orange);
  padding: .5rem 1rem; position: sticky; top: 0; z-index: 10;
}
.kopf-logo img { height: 34px; display: block; }
.test-schild {
  background: var(--gelb); color: #000; font-weight: 700; font-size: .75rem;
  padding: .15rem .5rem; border-radius: 4px; letter-spacing: .05em;
}
.nav-oben { display: none; gap: 1rem; }
.nav-oben a { text-decoration: none; color: var(--text); font-weight: 600; padding: .3rem 0; }
.nav-oben a.aktiv { color: var(--orange); border-bottom: 2px solid var(--orange); }
.abmelden { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.wer { display: none; color: var(--grau); font-size: .9rem; }

/* Navigation unten (Handy) */
.nav-unten {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; background: var(--weiss); border-top: 1px solid var(--linie);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-unten a {
  flex: 1; text-align: center; text-decoration: none; color: var(--grau);
  font-size: .75rem; padding: .45rem 0 .55rem;
}
.nav-unten a.aktiv { color: var(--orange); }
.nav-symbol { display: block; font-size: 1.35rem; line-height: 1.2; }

/* Inhalt */
.inhalt { max-width: 860px; margin: 0 auto; padding: 1rem; }
.karte {
  background: var(--weiss); border-radius: var(--radius);
  padding: 1rem; margin-bottom: 1rem; box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.karte.schmal { max-width: 420px; margin: 1.5rem auto; }
.titelzeile { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.titelzeile h1 { margin-bottom: .3rem; }
.unterzeile { color: var(--grau); margin: 0 0 .8rem; }
.zurueck { margin: 0 0 .6rem; }
.zurueck a { text-decoration: none; }
.leer, .hinweis { color: var(--grau); font-size: .9rem; }
.text-rot { color: var(--rot); }
.fuss { text-align: center; color: var(--grau); font-size: .75rem; padding: 1rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Meldungen */
.meldung { padding: .7rem .9rem; border-radius: 8px; margin-bottom: .8rem; }
.meldung-ok { background: #e7f6ec; color: #1d6b3d; }
.meldung-fehler { background: #fdecea; color: #9b1c13; }

/* Formulare */
label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .8rem; }
input, select, textarea {
  display: block; width: 100%; margin-top: .25rem;
  font: inherit; font-weight: 400; color: var(--text);
  padding: .65rem .7rem; border: 1px solid #cfd4da; border-radius: 8px; background: var(--weiss);
  min-height: 44px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--orange); border-color: var(--orange); }
.zwei { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
.knopf {
  display: inline-block; background: var(--orange); color: var(--weiss);
  border: 0; border-radius: 8px; padding: .7rem 1.1rem; min-height: 44px;
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
}
.knopf:hover { background: var(--orange-dunkel); }
.knopf-klein {
  font: inherit; font-size: .85rem; padding: .35rem .7rem; border-radius: 6px;
  border: 1px solid var(--linie); background: var(--weiss); color: var(--text); cursor: pointer;
}
.knopf-leise { color: var(--grau); }

/* Reiter */
.reiter { display: flex; gap: .5rem; margin-bottom: 1rem; }
.reiter a {
  text-decoration: none; padding: .4rem .9rem; border-radius: 999px;
  background: var(--weiss); color: var(--text); border: 1px solid var(--linie);
}
.reiter a.aktiv { background: var(--blau); color: var(--weiss); border-color: var(--blau); }

/* Listen */
.liste { list-style: none; margin: 0; padding: 0; }
.liste li { border-top: 1px solid var(--linie); }
.liste li:first-child { border-top: 0; }
.liste a {
  display: grid; grid-template-columns: auto 1fr; column-gap: .6rem;
  padding: .65rem 0; text-decoration: none; color: inherit;
}
.liste a > .zeile-haupt, .liste a > .zeile-neben { grid-column: 2; }
.liste a > .ampel { grid-row: span 2; align-self: center; }
.liste li.abgesagt .zeile-haupt { text-decoration: line-through; color: var(--grau); }
.zeile-haupt { display: block; font-weight: 600; }
.zeile-neben { display: block; color: var(--grau); font-size: .85rem; }

/* Ampel */
.ampel { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: middle; }
.ampel-rot { background: var(--rot); }
.ampel-gelb { background: var(--gelb); }
.ampel-gruen { background: var(--gruen); }
.ampel-grau { background: #c4c8ce; }

/* Detail */
.daten { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0 0 .5rem; }
.daten dt { color: var(--grau); }
.daten dd { margin: 0; }
.status { font-weight: 600; }
.status-abgesagt { color: var(--rot); }
.status-vertrag, .status-bestaetigt { color: var(--gruen); }
.zaehler { font-weight: 400; color: var(--grau); font-size: .85rem; }

/* Aufgaben */
.aufgaben { list-style: none; margin: 0; padding: 0; }
.aufgaben li {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem 0; border-top: 1px solid var(--linie);
}
.aufgaben li:first-child { border-top: 0; }
.aufgabe-text { flex: 1; min-width: 0; }
.haken-form, .nicht-noetig-form { margin: 0; }
.haken {
  width: 32px; height: 32px; flex: none; border-radius: 8px;
  border: 2px solid #b8bec6; background: var(--weiss); cursor: pointer;
  font-size: 1.1rem; font-weight: 700; color: var(--weiss); line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.haken-aus { cursor: default; opacity: .5; }
li.erledigt .haken { background: var(--gruen); border-color: var(--gruen); }
li.erledigt .zeile-haupt { text-decoration: line-through; color: var(--grau); font-weight: 400; }
li.ueberfaellig .zeile-neben { color: var(--rot); }

/* Größere Bildschirme */
@media (min-width: 760px) {
  body { padding-bottom: 0; }
  .nav-unten { display: none; }
  .nav-oben { display: flex; margin-left: 1rem; }
  .wer { display: inline; }
  .zwei { grid-template-columns: 1fr 1fr; }
  .inhalt { padding: 1.5rem; }
}

/* ab Version 0.2.0 */
a.wer { text-decoration: none; }
a.wer:hover { text-decoration: underline; }
h3 { font-size: .95rem; margin: .8rem 0 .2rem; color: var(--grau); }
.mehrzeilig { white-space: pre-line; margin: 0 0 .4rem; }
textarea { resize: vertical; min-height: 80px; }
label.schalter { display: flex; align-items: center; gap: .6rem; font-weight: 400; }
label.schalter input { width: 22px; height: 22px; min-height: 0; margin: 0; flex: none; accent-color: var(--orange); }
details.abschnitt { border-top: 1px solid var(--linie); padding: .6rem 0; margin-bottom: .4rem; }
details.abschnitt > summary { cursor: pointer; font-weight: 700; color: var(--blau); padding: .3rem 0 .7rem; }
.kopierfeld { font-family: ui-monospace, monospace; font-size: .85rem; }
.titelzeile .knopf-klein { text-decoration: none; flex: none; }

/* ab Version 0.3.0 – Dienste */
.dienste { list-style: none; margin: 0; padding: 0; }
.dienste > li {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem;
  padding: .6rem 0; border-top: 1px solid var(--linie);
}
.dienste > li:first-child { border-top: 0; }
.dienste > li.meiner { background: #fff6f1; margin: 0 -1rem; padding-left: 1rem; padding-right: 1rem; }
.dienst-kopf { flex: 1 1 12rem; min-width: 0; }
.dienst-kopf a { text-decoration: none; color: inherit; }
.dienst-aktionen { display: flex; gap: .4rem; flex-wrap: wrap; }
.dienst-aktionen form { margin: 0; }
.zeit { font-weight: 400; color: var(--grau); margin-left: .3rem; }
.marke { background: #f9eeda; color: #7a5300; border-radius: 4px; padding: 0 .35rem; font-size: .8rem; }
.knopf-orange { background: var(--orange); color: var(--weiss); border-color: var(--orange); font-weight: 700; }
.dienst-verwalten { flex-basis: 100%; }
.dienst-verwalten > summary { cursor: pointer; color: var(--blau); font-size: .85rem; }
.dienst-verwalten form { margin: .4rem 0; }
.zeile-form { display: flex; gap: .4rem; align-items: center; }
.zeile-form select { margin: 0; flex: 1; }
.tabelle-rahmen { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabelle th, .tabelle td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--linie); }
.tabelle th { color: var(--grau); font-weight: 600; }
.tabelle td + td, .tabelle th + th { text-align: right; }
.einstellungs-liste { list-style: none; margin: 0 0 1rem; padding: 0; }
.einstellungs-liste > li { border-top: 1px solid var(--linie); padding: .8rem 0 .2rem; }
.nav-unten a { font-size: .7rem; }

/* ab Version 0.4.0 – Adressbuch, Rollen */
.reiter { flex-wrap: wrap; }
.reiter a.rechts { order: 9; margin-left: auto; background: transparent; border-color: transparent; color: var(--blau); text-decoration: underline; }
.suchzeile { display: flex; gap: .5rem; margin-bottom: 1rem; }
.suchzeile input { margin: 0; flex: 1; }
.kontakt-zeile { padding-bottom: .5rem; }
.kontakt-zeile > .zeile-neben a { margin-right: .8rem; }
summary.abschnitt-titel { cursor: pointer; font-weight: 700; color: var(--blau); padding: .2rem 0 .6rem; }
fieldset.rollen { border: 1px solid var(--linie); border-radius: 8px; padding: .4rem .8rem .2rem; margin: 0 0 .8rem; }
fieldset.rollen legend { font-weight: 600; font-size: .9rem; padding: 0 .3rem; }
.marke.hotel-gebucht { background: #e5f4e4; color: #1d6b3d; }
.marke.hotel-offen { background: #fbebeb; color: #9b1c13; }
.daten dd a { word-break: break-word; }

/* ab Version 0.5.0 – Gage */
.karte-gage { border-left: 4px solid var(--orange); }
.gage-kurz { font-size: 1.15rem; font-weight: 700; margin: 0 0 .6rem; }

/* ab Version 0.6.0 – Kalender */
label.schalter input[type=radio] { width: 20px; height: 20px; }
form.abschnitt { border-top: 1px solid var(--linie); padding-top: .6rem; margin: .6rem 0; }

/* ab Version 0.6.1 */
label.schalter-gross { font-weight: 600; padding: .5rem 0; border-top: 1px solid var(--linie); margin: 0; }
[hidden] { display: none !important; }