/* Oberflaeche des Buchungswerkzeugs.
 *
 * Gebucht wird vom Sofa aus, oft am Telefon -- deshalb grosszuegige
 * Klickflaechen und ein Raster, das bei schmalen Fenstern untereinander
 * faellt. Farben als Merkmale definiert.
 *
 * Immer hell, auch wenn das Geraet dunkel eingestellt ist (Jonathan,
 * 25.09.2026): Die Marke ist auf hellem Grund entworfen, und die Seite soll
 * bei allen Kunden gleich aussehen. "only light" haelt auch Browser davon
 * ab, die Seite von sich aus abzudunkeln (Samsung Internet, Chrome mit
 * "Auto-Dark") -- ohne das "only" duerften sie es.
 *
 * Farbe und Schrift kommen aus Michaels Logo (24.09.2026): Bernstein
 * #F3AE28 und eine geometrische Schrift wie die Century Gothic. Der
 * Bernstein ist hell -- als Schrift auf Weiss erreicht er nur 1.9:1 und ist
 * kaum zu lesen. Er traegt deshalb Flaechen (Knoepfe, Auswahl, Schritte)
 * mit dunkler Schrift darauf. Wo er als Schrift oder Linie stehen muesste,
 * nimmt eine dunklere Stufe derselben Farbe seinen Platz ein.
 */

:root {
  color-scheme: only light;

  --marke: #f3ae28;        /* Flaeche: Knoepfe, Auswahl, Schritte */
  --marke-tief: #e39a14;   /* dieselbe Flaeche unter dem Mauszeiger */
  --marke-hell: #fdf0d5;   /* getoenter Grund */
  --marke-rand: #b7791f;   /* Linie auf Weiss, 3.6:1 */
  --marke-text: #8a5a00;   /* Schrift und Fokus auf Weiss, 5.9:1 */
  --auf-marke: #26201a;    /* Schrift auf Bernstein, 8.4:1 */

  --grund: #fbf8f3;
  --karte: #ffffff;
  --schrift: #26201a;
  --leise: #6e655b;
  --rand: #e7e0d5;
  --fokus: var(--marke-text);
  /* Frei, knapp, voll: eine Ampel. Knapp war frueher ein Ocker -- neben
     dem Bernstein der Marke haette man es fuer eine Auswahl halten
     koennen. Jetzt ein Orange, das sich von beidem abhebt. */
  --frei: #4f8f68;
  --knapp: #b45309;
  --voll: #b42318;
  /* Gebucht bleibt gruen: Das hat sich bewaehrt, und es trennt sauber
     zwischen "schon angemeldet" und "eben angetippt" (Bernstein). */
  --meine: #3f6b52;
  --gewaehlt: var(--marke-hell);
  --gebucht: #eaf5ec;
  --warnung-grund: #fff4e0;
  --warnung-rand: #e9b95c;
  --fehler: #b42318;
  --rundung: 14px;

  /* Adventor ist der freie Zwilling der Century Gothic aus dem Logo (siehe
     static/schrift/LIESMICH.txt). Sie steht vorn, damit Telefon und
     Rechner gleich umbrechen -- auch dort, wo Century Gothic installiert
     waere. */
  --schriftart: "Adventor YDC", "Century Gothic", "Avenir Next", system-ui,
                -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

/* Das hidden-Attribut muss staerker sein als jede eigene display-Regel.
 * Ohne das blieb der Halbtags-Haken sichtbar, sobald ein Zeitraum gewaehlt
 * war: .ankreuz setzt display:flex, und ein Klassenselektor schlaegt die
 * Browserregel fuer [hidden]. */
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: 0 1rem 3rem;
  overflow-wrap: break-word;
  background: var(--grund);
  color: var(--schrift);
  font: 16px/1.5 var(--schriftart);
}

h1, h2 { font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 1.05rem; margin: 0 0 0.75rem; }

a { color: var(--marke-text); text-underline-offset: 0.15em; }

/* Ein sichtbarer Fokus in der Hausfarbe, fuer alle, die mit der Tastatur
   gehen. Die dunkle Stufe, weil der helle Bernstein auf Weiss als Ring
   verschwinden wuerde. */
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }

.leise { color: var(--leise); }
.klein { font-size: 0.85rem; }
.fehler { color: var(--fehler); font-size: 0.9rem; margin: 0.5rem 0 0; }
.hinweis { color: var(--leise); font-size: 0.85rem; margin: 0.5rem 0 0; }

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

.mittig { display: grid; place-items: center; min-height: 100vh; }
@supports (min-height: 100dvh) { .mittig { min-height: 100dvh; } }

.anmeldekasten {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  padding: 2rem;
  width: min(360px, 92vw);
}
.anmeldekasten h1 { margin: 0; font-size: 1.4rem; }
.anmeldekasten form { display: grid; gap: 0.9rem; margin: 1.5rem 0 1rem; }
/* Das Logo so, wie Michael es geschickt hat: Marke ueber dem Schriftzug. */
.anmeldelogo { display: grid; justify-items: center; gap: 0.9rem; }
.anmeldelogo img { display: block; max-width: 100%; height: auto; }
.anmeldelogo + .leise { text-align: center; margin: 0.6rem 0 0; }

/* align-content: start, damit ein Feld nicht mitwaechst, wenn das Raster
   seine Zeile wegen der Nachbarspalte hoeher macht. Mit der breiteren
   Schrift brechen die Untertitel der Buchungsart um, und das Auswahlfeld
   "Betreuungszeit" daneben wurde 71 Pixel hoch. */
label { display: grid; gap: 0.3rem; align-content: start; font-size: 0.9rem; color: var(--leise); }

input[type="email"], input[type="password"], select {
  font: inherit;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--rand);
  border-radius: 8px;
  background: var(--grund);
  color: var(--schrift);
  width: 100%;
}
/* Die uebrigen Felder im selben Kleid, aber ohne feste Breite -- die
   bestimmen ihre Nachbarn (Jahr im Monatskopf, Suche im Betrieb). Vorher
   trugen sie den grauen Rahmen des Browsers. */
input[type="number"], input[type="search"], input[type="date"],
input[type="time"], input[type="text"], input[type="tel"], textarea {
  font: inherit;
  border: 1px solid var(--rand);
  border-radius: 8px;
  background: var(--grund);
  color: var(--schrift);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline-width: 2px; outline-offset: 1px;
  border-color: var(--marke-rand);
}

/* ---------------------------------------------------------------- Gerippe */

/* Der Kopf reicht ueber die ganze Breite, weiss, mit einer Linie in
   Bernstein darunter: Das Logo braucht hellen Grund, und die Linie
   verbindet ihn mit der gleichfarbigen Leiste des Telefons darueber. Der
   negative Rand hebt den Innenabstand des body auf. */
.kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem 1rem; flex-wrap: wrap;
  margin: 0 -1rem 1rem;
  padding: 0.7rem 1rem;
  background: var(--karte);
  border-bottom: 3px solid var(--marke);
}
.marke-kopf { display: inline-flex; flex: none; border-radius: 6px; }
.marke-kopf img { display: block; height: 40px; width: auto; }
.kopf .leise { margin-left: 0.6rem; font-size: 0.9rem; }
.kopf > div:first-child {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  min-width: 0;
}
.kopf > div:first-child .leise { margin-left: 0; }

/* Umbrechen duerfen: Auf dem Telefon passen Datumssprung und Abmelden
 * nicht in eine Zeile. Ohne wrap ragte "Abmelden" hinaus und die Seite
 * liess sich seitwaerts schieben -- ein Fehler, den man sieht, aber nicht
 * erklaeren kann. Abmelden rutscht dann als eigene Zeile nach rechts. */
.kopf-rechts {
  display: flex; align-items: center; gap: 0.5rem 0.8rem;
  flex-wrap: wrap; justify-content: flex-end;
  min-width: 0;
}
.kopf-rechts form { margin: 0; margin-left: auto; }
.kopf-rechts > strong { white-space: nowrap; }

.band {
  background: var(--warnung-grund);
  border: 1px solid var(--warnung-rand);
  border-radius: var(--rundung);
  padding: 0.7rem 0.9rem;
  font-size: 0.9rem;
  margin: 0 0 1rem;
}

.raster {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
  align-items: start;
}
.raster .breit { grid-column: 1 / -1; }

@media (max-width: 760px) {
  /* minmax(0, 1fr) statt 1fr: Eine Spalte mit 1fr waechst mit dem
     breitesten Inhalt mit -- dann laesst sich die ganze Seite seitwaerts
     schieben statt nur das eine zu breite Stueck. */
  .raster { grid-template-columns: minmax(0, 1fr); }
}

.karte {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  padding: 1rem;
}

/* ------------------------------------------------------------ Assistent */

/* Eine schmale Spalte, auch am Rechner: Eine Frage pro Bildschirm liest
   sich in 40 Zeichen breiten Karten besser als quer ueber 1400 Pixel. */
.assistent {
  /* minmax(0, 1fr): Ohne feste Spalte waechst das Raster mit dem
     breitesten Inhalt -- bei 320 Pixeln schob eine lange Preiszeile
     ("Wochenende / Feiertag · Abreisetag") die Seite 3 Pixel zur Seite. */
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem;
  max-width: 40rem; margin: 0 auto;
}
.assistent > .band { margin: 0; }
/* Leer nimmt die Statuszeile keinen Platz -- sonst stuende zwischen Band
   und erstem Knopf eine doppelte Luecke. */
.assistent > #status:empty { display: none; }
.assistent > [data-schritt="start"] { display: grid; gap: 1rem; }
.assistent > [data-schritt="start"][hidden] { display: none; }
.ansicht h2[tabindex] { font-size: 1.35rem; margin: 0 0 1rem; }
.ansicht h2[tabindex]:focus:not(:focus-visible) { outline: none; }
.knopf--gross { margin-top: 0; padding: 1rem; font-size: 1.1rem; }

.assistent-kopf {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: 0.4rem 1rem;
}
.assistent-kopf #schrittzahl { justify-self: end; }
.zurueck-link {
  font: inherit; color: var(--marke-text); background: none; border: 0;
  padding: 0.4rem 0; cursor: pointer; text-decoration: underline;
  text-underline-offset: 0.2em;
}
.fortschritt { grid-column: 1 / -1; display: flex; gap: 4px; }
.fortschritt span { flex: 1; height: 6px; border-radius: 3px; background: var(--rand); }
.fortschritt span.erledigt { background: var(--marke); }

/* Was schon gewaehlt ist, als eine Zeile ueber der naechsten Frage --
   damit man weiss, wofuer man gerade Tage antippt. */
.wahlzeile { margin: -0.5rem 0 1rem; font-size: 0.9rem; color: var(--leise); }

/* Antworten untereinander, gross genug fuer den Daumen, mit einem Pfeil
   als Zeichen, dass Antippen weiterfuehrt. */
/* Doppelte Klasse, weil .buchungsart weiter unten zwei Spalten setzt --
   fuenf Zeiten nebeneinander liessen offen, in welcher Reihenfolge man
   liest. */
.buchungsart.wahlliste { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; margin: 0; }
.wahlkarte { align-items: center; padding: 0.95rem 1rem; }
.wahlkarte strong { font-size: 1.05rem; }
.wahlkarte::after {
  content: "›"; margin-left: auto; padding-left: 0.5rem; align-self: center;
  font-size: 1.5rem; line-height: 1; color: var(--leise);
}
.wahlkarte input[type="radio"] { margin-top: 0; }

.weiterleiste { margin-top: 1.25rem; }
.weiterleiste .knopf { margin-top: 0; }
/* Klebt unten am Bildschirm, solange der Kalender laenger ist als das
   Telefon. Mit dem Abstand fuer die Leiste des iPhones, wenn die Seite als
   App vom Home-Bildschirm laeuft. */
.weiterleiste--klebend {
  position: sticky; bottom: 0; z-index: 1;
  margin: 1rem -1rem -1rem;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  background: var(--karte);
  border-top: 1px solid var(--rand);
  border-radius: 0 0 var(--rundung) var(--rundung);
}
#leeren { margin-top: 0.3rem; }
.weiterleiste #feldmeldung { margin: 0 0 0.6rem; }
.weiterleiste #feldmeldung .fehler { margin: 0; }
[data-schritt="fertig"] .knopf--leise { width: 100%; margin-top: 0.5rem; }

/* ----------------------------------------------------------- Monatsraster */

.monatskopf {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.75rem;
}
.monatskopf h2 { margin: 0; }

.wochentage, .monat {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.wochentage {
  font-size: 0.75rem; color: var(--leise); text-align: center;
  margin-bottom: 4px;
}

.tag {
  font: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  min-height: 58px;
  padding: 4px 2px;
  border: 1px solid var(--rand);
  border-radius: 8px;
  background: var(--karte);
  color: var(--schrift);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.tag:hover:not(:disabled) { border-color: var(--marke-rand); }
.tag--wochenende { background: color-mix(in srgb, var(--grund) 60%, var(--karte)); }
.tag--zu { opacity: 0.4; cursor: not-allowed; }

/* Angetippte Tage in vollem Bernstein: Die Auswahl ist das, worum es auf
   der Seite geht, und soll auf einen Blick zu sehen sein. Alle Schrift
   darin wird dunkel -- Gruen oder Grau haetten auf Gelb zu wenig Kontrast. */
.tag--gewaehlt {
  background: var(--marke);
  border-color: var(--marke-text);
  color: var(--auf-marke);
}
.tag--gewaehlt .tag-meine, .tag--gewaehlt .tag-haken { color: var(--auf-marke); }
.tag--gewaehlt:hover:not(:disabled) { border-color: var(--auf-marke); }
.tag--anfang, .tag--ende { border-width: 2px; }

.tag-nummer { font-size: 1rem; font-variant-numeric: tabular-nums; }
.tag-meine {
  font-size: 0.62rem; color: var(--meine); font-weight: 600;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Der Haken ersetzt den Namen dort, wo er nicht hineinpasst -- ohne
   Legende muss ein gruener Tag auch auf dem Telefon sagen, was er ist. */
.tag-haken { display: none; font-size: 0.8rem; line-height: 1; color: var(--meine); font-weight: 700; }

/* -------------------------------------------------------------- Formular */

#formular label { margin-bottom: 0.9rem; }

/* Zwei Flaechen nebeneinander, beide immer sichtbar. Der Unterschied
   zwischen Tagesbetreuung und Uebernachtung ist die wichtigste Entscheidung
   auf dieser Seite -- er darf nicht in einer Auswahlliste verschwinden. */
.buchungsart {
  /* minmax(0, 1fr) statt 1fr: Ein fieldset bringt min-width: min-content
     mit, und mit blossem 1fr schiebt der laengste Untertitel die Spalte
     ueber den Rand hinaus -- die ganze Seite liess sich dann seitwaerts
     schieben. */
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem;
  border: 0; padding: 0; margin: 0 0 1rem;
  min-width: 0;
}
.buchungsart legend { margin-bottom: 0.4rem; }

.buchungsart-karte {
  display: flex; align-items: flex-start; gap: 0.5rem;
  margin: 0; padding: 0.7rem;
  border: 1px solid var(--rand); border-radius: 8px;
  background: var(--karte); cursor: pointer;
}
.buchungsart-karte:has(input:checked) {
  border-color: var(--marke-rand);
  box-shadow: inset 0 0 0 1px var(--marke-rand);
  background: var(--gewaehlt);
}
.buchungsart-karte:has(input:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 2px; }
.buchungsart-karte input[type="radio"] { margin-top: 0.15rem; flex: none; accent-color: var(--marke-text); }
.buchungsart-karte input[type="radio"]:focus-visible { outline: none; }
.buchungsart-text { display: flex; flex-direction: column; gap: 0.15rem; }

/* Nur fuer Vorleseprogramme -- sichtbar ersetzt durch die Auswahlfelder. */
.verborgen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Darf schrumpfen: Mit der breiteren Hausschrift brauchten Pfeile,
   "September" und das Jahr zusammen 300 Pixel, und auf einem 320er
   Telefon liess sich die ganze Seite seitwaerts schieben. */
.monatskopf { gap: 0.4rem; }
.monatswahl { display: flex; gap: 0.4rem; align-items: center; min-width: 0; }
.monatswahl select { width: auto; min-width: 0; padding: 0.35rem 0.5rem; margin: 0; }
.monatswahl input { width: 5.5rem; padding: 0.4rem; margin: 0; font: inherit; }
.tag:focus-visible { outline: 3px solid var(--fokus); outline-offset: 1px; }

/* Fahrdienst: eingeklappt, weil die meisten keine Wunschzeit angeben. */
.fahrdienst { margin: 0 0 1rem; font-size: 0.9rem; }
.fahrdienst summary { cursor: pointer; color: var(--leise); padding: 0.3rem 0; }
.fahrdienstfelder { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.fahrdienstfelder input[type="time"] {
  font: inherit; padding: 0.5rem 0.6rem; width: 100%;
  border: 1px solid var(--rand); border-radius: 8px;
  background: var(--grund); color: var(--schrift);
}

/* Meldung und Bestaetigung stehen beim Knopf, nicht am Seitenkopf. */
#feldmeldung, #bestaetigung { margin: 0 0 0.6rem; }
#bestaetigung {
  padding: 0.75rem 0.85rem;
  background: var(--gebucht);
  border: 1px solid var(--meine);
  border-radius: 8px;
}
.bestaetigung-titel { margin: 0 0 0.5rem; font-weight: 600; }
.bestaetigungsliste { list-style: none; margin: 0; padding: 0; font-size: 0.9rem; }
.bestaetigungsliste li {
  display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem;
  padding: 0.35rem 0; border-top: 1px solid var(--rand);
}
.bestaetigungsliste .b-hund { font-weight: 600; }
.bestaetigungsliste .b-preis { margin-left: auto; font-variant-numeric: tabular-nums; }
.bestaetigungsliste .b-zeit, .bestaetigungsliste .b-fahrt {
  flex-basis: 100%; color: var(--leise); font-size: 0.85rem;
}
.bestaetigung-summe { margin: 0.5rem 0 0.3rem; font-weight: 600; }

.v-gruppe {
  display: block; margin-top: 0.5rem; padding-top: 0.5rem;
  font-size: 0.85rem; font-weight: 600; color: var(--leise);
}

.monatskosten-zeile { display: block; font-size: 0.85rem; color: var(--leise); }

/* Stornierte, aber kostenpflichtige Aufenthalte bleiben stehen. Sie sind
   kein Termin mehr, aber eine Forderung -- also ruhig, nicht unsichtbar. */
.zeile--storniert { opacity: 0.85; }
.zeile--storniert .b-wann { text-decoration: line-through; }
.zeile--storniert .b-frist { color: var(--fehler); }

.b-fahrt { flex-basis: 100%; color: var(--leise); font-size: 0.85rem; }

.zusammenfassung {
  margin: 0 0 0.9rem; padding: 0.6rem 0.75rem;
  background: var(--gewaehlt); border-radius: 8px;
  font-size: 0.9rem;
}
.zusammenfassung p { margin: 0.5rem 0 0; }

/* Fahrzeiten fuer einzelne Tage: eingeklappt unter den allgemeinen. */
.tagesfahrten { margin-top: 1rem; font-size: 0.9rem; }
.tagesfahrten summary { cursor: pointer; color: var(--leise); padding: 0.3rem 0; }
.tagesfahrt {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem 0.6rem;
  margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--rand);
}
.tagesfahrt-datum { grid-column: 1 / -1; font-weight: 600; color: var(--schrift); }
.tagesfahrt input { font: inherit; padding: 0.5rem; width: 100%; }

.zeitraum {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem;
  padding: 0.75rem;
  background: var(--grund);
  border-radius: 8px;
  margin-bottom: 0.6rem;
}
.zeitraum span { display: block; }

.ankreuz {
  display: flex; align-items: center; gap: 0.5rem;
  color: var(--schrift); font-size: 0.9rem;
  margin: 0.6rem 0 0.9rem;
}
.ankreuz input[type="checkbox"] {
  width: 1.15rem; height: 1.15rem; flex: none;
  accent-color: var(--marke-text);
}

.vorschauliste {
  list-style: none; margin: 0.9rem 0 0; padding: 0;
  border-top: 1px solid var(--rand);
}
.vorschauliste li {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--rand);
  font-size: 0.85rem;
}
.v-art { color: var(--leise); }
.v-preis { font-variant-numeric: tabular-nums; }

.summe {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 0.7rem 0 0; font-size: 0.9rem;
}
.summe-betrag { font-weight: 600; font-size: 1.05rem; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------ Meine Buchungen */

/* Zwei Zeilen je Termin: Hund und Preis, darunter Tag und Stornieren.
   Mehr nicht (Jonathan, 25.09.2026) -- die Folgen einer Stornierung
   stehen in der Rueckfrage beim Klick. */
.buchungsliste { list-style: none; margin: 0; padding: 0; }
.buchungsliste li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.2rem 0.9rem;
  align-items: center;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rand);
}
.buchungsliste li:last-child { border-bottom: none; }
.b-hund { font-weight: 600; }
.b-preis { font-variant-numeric: tabular-nums; justify-self: end; }
.b-wann { color: var(--leise); font-size: 0.92rem; }
.buchungsliste li > .knopf { justify-self: end; }
.b-frist { grid-column: 1 / -1; font-size: 0.8rem; color: var(--leise); }

/* --------------------------------------------------------------- Knoepfe */

.knopf {
  font: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--rand);
  /* Rund wie die Scheibe im Logo und die Buchstaben der Schrift. */
  border-radius: 999px;
  background: var(--karte);
  color: var(--schrift);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.knopf:hover:not(:disabled) { border-color: var(--marke-rand); }
.knopf:disabled { opacity: 0.45; cursor: not-allowed; }

.knopf--wichtig {
  background: var(--marke);
  border-color: var(--marke);
  color: var(--auf-marke);
  width: 100%;
  padding: 0.75rem;
  font-weight: 700;
  margin-top: 0.9rem;
}
.knopf--wichtig:hover:not(:disabled) {
  background: var(--marke-tief); border-color: var(--marke-rand);
}
.knopf--leise { background: transparent; }
.knopf--klein { padding: 0.35rem 0.7rem; font-size: 0.85rem; }

/* ------------------------------------------------------- Betriebsansicht */

/* Eine ruhige Spalte fuer die Betriebsseiten mit Listen -- am Rechner nicht
   ueber die ganze Breite gezogen, auf dem Telefon randvoll. */
/* minmax(0, 1fr): Ein breiter Inhalt darf die Spalte nicht über den Bildschirm
   hinaus schieben (Kundenseite bei 320 px). */
.spalte { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; max-width: 52rem; margin: 0 auto; }
.spalte > .band, .spalte > .tageswahl, .spalte > p { margin: 0; }
.suchfeld { width: 100%; padding: 0.65rem 0.8rem; }
#arbeitsstatus:empty { display: none; }
.leer { text-align: center; padding: 1.5rem 0; }

.karte--achtung { background: var(--warnung-grund); border-color: var(--warnung-rand); }
.karte h2 + .leise { margin-top: -0.4rem; }
.schlichtliste { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.schlichtliste li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.3rem 0.8rem;
}
.schlichtliste li > span { display: grid; }

/* Die Zahlen des Tages und die Gruppen als Sprungmarken. */
.tageszahlen { display: grid; gap: 0.55rem; }
.tz-zeile, .tz-details { margin: 0; }
.tz-details { margin-top: -0.4rem; }
.tz-zahl { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.tageszahlen .balken { margin: 0; }
.gruppenwahl { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.gruppenwahl a {
  padding: 0.25rem 0.7rem; border-radius: 999px; border: 1px solid var(--rand);
  background: var(--grund); color: var(--schrift); text-decoration: none; font-size: 0.85rem;
}
.gruppenwahl a:hover { border-color: var(--marke-rand); }

.tagesgruppe { scroll-margin-top: 1rem; }
.tagesgruppe h2 { display: flex; align-items: baseline; gap: 0.45rem; margin: 0.3rem 0 0.5rem; }
.tagesliste {
  list-style: none; margin: 0; padding: 0 1rem;
  background: var(--karte); border: 1px solid var(--rand); border-radius: var(--rundung);
}
.tagesliste li { display: grid; gap: 0.3rem; padding: 0.8rem 0; border-bottom: 1px solid var(--rand); }
.tagesliste li:last-child { border-bottom: none; }
.z-kopf { display: flex; align-items: baseline; gap: 0.3rem 0.7rem; flex-wrap: wrap; }
.t-hund { font-weight: 700; }
.z-kopf .t-code { margin-left: auto; font-size: 0.8rem; color: var(--leise); cursor: help; }
.z-wer { margin: 0; font-size: 0.9rem; }
.t-adresse { color: var(--leise); font-size: 0.85rem; }
.z-marken { margin: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.marke {
  display: inline-block; padding: 0.05rem 0.55rem; border-radius: 999px;
  background: var(--grund); border: 1px solid var(--rand); font-size: 0.78rem; white-space: nowrap;
}
.marke--quelle { background: var(--marke-hell); border-color: transparent; color: var(--marke-text); font-weight: 600; }
.marke--fahrt { border-color: var(--warnung-rand); }
.z-hinweis { margin: 0; font-size: 0.85rem; color: var(--knapp); }
.z-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.1rem 1.1rem; }
.haken { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0; color: var(--schrift); font-size: 0.9rem; }
.haken input { width: 1.1rem; height: 1.1rem; accent-color: var(--meine); }
.z-kontakt { font-size: 0.9rem; }
.disponotiz summary { cursor: pointer; padding: 0.3rem 0; color: var(--marke-text); font-size: 0.9rem; }
.disponotiz[open] { flex-basis: 100%; }
.disponotiz textarea { display: block; width: 100%; min-height: 4.5rem; margin: 0.3rem 0 0.5rem; padding: 0.5rem; }
.t-nacht { color: var(--marke-text); font-size: 0.8rem; font-weight: 600; }

.balken {
  height: 8px; border-radius: 4px; background: var(--rand);
  overflow: hidden; margin: 0.4rem 0 1rem;
}
.balken span { display: block; height: 100%; background: var(--frei); }
.balken--knapp span { background: var(--knapp); }
.balken--voll span { background: var(--voll); }

/* Der Tag als Ueberschrift -- anklickbar: Ein Tipp oeffnet den Datumswaehler.
   Das Datumsfeld liegt unsichtbar darueber, damit der Tipp es selbst trifft. */
.datumswahl { display: grid; justify-items: center; gap: 0.1rem; min-width: 0; }
.datumsknopf { position: relative; display: inline-block; max-width: 100%; }
.datumsknopf h1 { margin: 0; font-size: 1.2rem; text-align: center; }
.datumsknopf input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; border: 0; padding: 0; margin: 0;
}
.datumsknopf:hover h1, .datumsknopf:focus-within h1 { color: var(--marke-text); }
.datumsknopf:focus-within { outline: 3px solid var(--fokus); outline-offset: 2px; border-radius: 6px; }
.datum-pfeil { color: var(--marke-text); font-size: 0.75em; }
.datum-heute { font-size: 0.85rem; }

/* -------------------------------------------------------------- Touren */

.artwahl {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  margin: 0 0 1rem;
}
.artknopf[aria-pressed="true"] {
  background: var(--marke);
  border-color: var(--marke-rand);
  color: var(--auf-marke);
  font-weight: 700;
}
.artknopf[aria-pressed="true"] .leise { color: inherit; opacity: 0.8; }
.artwahl .leise { margin-left: auto; }

.halt-zeit {
  flex-basis: 100%; color: var(--leise); font-size: 0.8rem;
}
.halt-navi { margin-left: auto; }

/* Konkrete Uhrzeit in der Tagesliste. Offen heisst: alte Buchung ohne
   bekannte Zeit -- das soll auffallen, nicht so aussehen wie eine Angabe. */
.t-zeit { font-variant-numeric: tabular-nums; }
.t-zeit--offen { color: var(--knapp); }
.t-fahrt { flex-basis: 100%; color: var(--leise); }
.arbeitsleiste, .arbeitsleiste form { display: flex; flex-wrap: wrap; align-items: end; gap: 0.6rem 1rem; }
.arbeitsleiste input, .disponotiz textarea { font: inherit; padding: 0.6rem; max-width: 100%; }
.arbeitsleiste p { flex-basis: 100%; }
/* Auf der Tourenseite steht die Datumsleiste frei, ohne Karte darum --
   ohne Abstand klebte "Datum" am Hinweistext darueber. */
form.arbeitsleiste { margin: 0.9rem 0 1rem; }
.arbeitsaktionen, .disponotiz { grid-column: 1 / -1; }
.arbeitsaktionen { display: flex; gap: 0.5rem 1rem; flex-wrap: wrap; font-size: 0.85rem; }
.arbeitsaktionen label { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0; }
.disponotiz summary { cursor: pointer; padding: 0.4rem 0; }
.disponotiz textarea { width: 100%; min-height: 5rem; }
.fahraktionen { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.5rem; }

.tourenraster {
  display: grid; gap: 1rem;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
  align-items: start;
}
@media (max-width: 900px) { .tourenraster { grid-template-columns: 1fr; } }

.kartenfeld { padding: 0; overflow: hidden; }
#landkarte { height: min(70vh, 620px); width: 100%; }
@media (max-width: 760px) {
  #landkarte { height: min(55vh, 380px); }
}
#landkarte:empty::after {
  content: "Karte wird geladen …";
  display: grid; place-items: center; height: 100%;
  color: var(--leise); font-size: 0.9rem;
}

/* Die Nummern auf der Karte. Weisser Ring, damit sie auf jedem Untergrund
 * lesbar bleiben -- Kartenkacheln sind mal hell, mal dunkel. */
.haltsymbol span {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  color: #fff; font: 600 12px/1 system-ui, sans-serif;
}
/* Der Betrieb als Scheibe in der Hausfarbe -- wie das Logo. */
.haltsymbol--betrieb span {
  width: 30px; height: 30px;
  background: var(--marke); color: var(--auf-marke); font-size: 17px;
}

.tour { border-bottom: 1px solid var(--rand); }
.tour:last-of-type { border-bottom: none; }
.tourkopf {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.6rem; align-items: center;
  padding: 0.6rem 0; cursor: pointer;
}
.tourkopf::-webkit-details-marker { display: none; }
.tourmarke {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--wagenfarbe, var(--marke-text));
  color: #fff; font-size: 0.75rem; font-weight: 600;
}
.tourtitel { font-weight: 600; }
.tourzahl { color: var(--leise); font-size: 0.85rem; }

.haltliste { list-style: none; margin: 0 0 0.7rem; padding: 0 0 0 1.9rem; }
.haltliste li {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0 0.6rem;
  padding: 0.35rem 0;
  border-top: 1px solid var(--rand);
  font-size: 0.87rem;
  cursor: pointer;
}
.haltliste--schlicht li { cursor: default; }
/* Zeiten und Navigation ueber die ganze Breite. Ohne das fielen die
   Zeiten in die schmale Namensspalte links und wurden zu einer hohen,
   duennen Saeule -- "flex-basis" wirkt in einem Raster nicht. */
.haltliste .halt-zeit { grid-column: 1 / -1; }
.haltliste .halt-navi { grid-column: 1 / -1; justify-self: end; margin-left: 0; }
/* Haekchen neben dem Text, nicht darueber: label ist sonst ein Raster. */
.fahraktionen label { display: flex; align-items: center; gap: 0.4rem; }
.haltliste li:hover { background: var(--grund); }
.halt-hund { font-weight: 600; }
.halt-adresse { grid-column: 2; color: var(--leise); font-size: 0.8rem; }

.problem {
  margin-top: 1rem; padding-top: 0.8rem;
  border-top: 2px solid var(--warnung-rand);
}
.problem h3 { margin: 0 0 0.2rem; font-size: 0.95rem; }

/* Mehrere Hunde auf einmal anmelden. Ankreuzfelder statt eines
 * Mehrfach-Auswahlfelds: Auf dem Telefon laesst sich ein <select multiple>
 * kaum bedienen, und bei zwei bis drei Hunden je Haushalt sieht man so
 * ohnehin alles auf einen Blick. */
.hundewahl {
  border: 1px solid var(--rand);
  border-radius: 8px;
  padding: 0.5rem 0.7rem 0.6rem;
  margin: 0 0 0.9rem;
}
.hundewahl legend { padding: 0 0.3rem; }
.hundewahl .ankreuz { margin: 0.25rem 0; }

/* Vergangene Aufenthalte: vorhanden, aber nicht im Weg. */
.vergangenes { margin-top: 0.8rem; border-top: 1px solid var(--rand); }
.vergangenes summary {
  padding: 0.6rem 0;
  cursor: pointer;
  color: var(--leise);
  font-size: 0.9rem;
}
.zeile--vergangen { opacity: 0.65; }

/* Rechnungen: wie die Buchungen zwei Zeilen -- Titel und Betrag, darunter
   der Stand und die beiden Wege: Bezahlen und das PDF. */
.rechnungsliste { list-style: none; margin: 0; padding: 0; }
.rechnungsliste li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.25rem 0.9rem; align-items: center;
  padding: 0.7rem 0; border-bottom: 1px solid var(--rand);
}
.rechnungsliste li:last-child { border-bottom: none; }
.r-titel { font-weight: 600; }
.r-betrag { justify-self: end; font-weight: 600; font-variant-numeric: tabular-nums; }
.r-zustand { color: var(--leise); font-size: 0.92rem; }
.r-zustand--ueberfaellig { color: var(--fehler); }
.r-aktionen { justify-self: end; display: flex; gap: 0.4rem; }
/* Bernstein, aber klein: die Hauptsache in der Zeile, nicht auf der Seite. */
.knopf--marke { background: var(--marke); border-color: var(--marke); color: var(--auf-marke); font-weight: 700; }
.knopf--marke:hover:not(:disabled) { background: var(--marke-tief); border-color: var(--marke-rand); }
.hinweis-titel { font-size: 1.2rem; margin: 1.2rem 0 0.5rem; }
.anmeldekasten form + .klein { margin: 0; }
.startfuss { text-align: center; margin: 0; }

/* ------------------------------------------------------------- Konten */

/* Der Versandstand steht ueber allem: Was "Einladung senden" bewirkt,
   soll man wissen, bevor man drueckt. */
.band--achtung { background: #fde8e6; border-color: var(--voll); }
.kontenliste, .postliste { list-style: none; margin: 0.8rem 0 0; padding: 0; }
.kontenliste li, .postliste li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.15rem 0.9rem; align-items: center;
  padding: 0.6rem 0; border-top: 1px solid var(--rand);
}
.k-name, .p-betreff { font-weight: 600; }
.k-email, .k-hunde, .k-stand, .p-an, .p-status, .p-inhalt { grid-column: 1; font-size: 0.9rem; }
.kontenliste .knopf { grid-column: 2; grid-row: 1 / span 3; }
.k-stand--eigenes { color: var(--meine); }
.k-stand--ohne_mail { color: var(--leise); font-style: italic; }
.k-stand--abgelaufen { color: var(--knapp); }
.p-zeit { grid-column: 2; grid-row: 1; font-size: 0.85rem; }
.p-status--zurueckgehalten { color: var(--leise); }
.p-status--verschickt { color: var(--meine); }
.p-status--fehler { color: var(--fehler); }
.p-inhalt summary { cursor: pointer; color: var(--leise); }
.p-inhalt pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 0.85rem;
  background: var(--grund); border-radius: 8px; padding: 0.6rem; margin: 0.3rem 0 0; }

/* -------------------------------------------------------- Betriebskopf */

/* Logo, Bereiche, Abmelden -- auf jeder Betriebsseite gleich. Am Rechner
   in einer Zeile. Auf dem Telefon oben Logo und Abmelden, die Bereiche
   darunter; vorher brauchte der Kopf dort vier Zeilen, und der Weg zu den
   anderen Seiten stand zwischen Datum und Abmelden verstreut. */
.kopf--betrieb {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "marke nav aus";
}
.kopf--betrieb .marke-kopf { grid-area: marke; }
.kopf-abmelden { margin: 0; }
.kopf-mehr { grid-area: aus; justify-self: end; display: flex; align-items: center; gap: 0.2rem; }
.kopf-einstellungen {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.4rem 0.6rem; border-radius: 999px;
  color: var(--schrift); text-decoration: none; font-size: 0.92rem;
}
.kopf-einstellungen:hover { background: var(--grund); }
.kopf-einstellungen[aria-current="page"] {
  background: var(--marke-hell); box-shadow: inset 0 0 0 1px var(--marke-rand); font-weight: 700;
}
.betriebsnav { grid-area: nav; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.betriebsnav a {
  display: inline-flex; align-items: center;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  color: var(--schrift);
  text-decoration: none;
  font-size: 0.92rem;
  white-space: nowrap;
}
.betriebsnav a:hover { background: var(--grund); }
/* Die aktuelle Seite im getoenten Bernstein -- dieselbe Sprache wie ein
   gewaehlter Tag im Kalender der Kunden. */
.betriebsnav a[aria-current="page"] {
  background: var(--marke-hell);
  box-shadow: inset 0 0 0 1px var(--marke-rand);
  font-weight: 700;
}
@media (max-width: 760px) {
  .kopf--betrieb {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "marke aus" "nav nav";
  }
  /* Auf dem Telefon nur das Zahnrad -- der Name steht im title. */
  .nur-breit { display: none; }
}
@media (pointer: coarse) {
  .betriebsnav a { min-height: 40px; }
}
/* Knapper auf dem Telefon: So passen die vier Bereiche ab 360 Pixeln in
   eine Zeile, statt dass "Konten" allein in eine zweite rutscht. */
@media (max-width: 420px) {
  .betriebsnav { gap: 0.15rem; }
  .betriebsnav a { padding: 0.4rem 0.5rem; }
}

/* Der gezeigte Tag als Ueberschrift, mit Vor- und Folgetag daneben. */
.tageswahl {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 0.5rem;
  margin: 0 0 1rem;
}

/* ---------------------------------------------------------- Uebersicht */

/* Eine ruhige Spalte statt der ganzen Breite: Die Seite ist ein Wegweiser,
   keine Arbeitsliste. */
.uebersicht { display: grid; gap: 1rem; max-width: 60rem; margin: 0 auto; }
.uebersicht > .band { margin: 0; }
.uebersicht-titel { font-size: 1.35rem; margin: 0.25rem 0 0; }

.kacheln {
  display: grid; gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.kachel {
  display: grid; gap: 0.6rem; align-content: start;
  padding: 1rem 1.1rem;
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  color: var(--schrift);
  text-decoration: none;
}
.kachel:hover { border-color: var(--marke-rand); }
.kachel h2 {
  display: flex; justify-content: space-between; gap: 0.5rem;
  margin: 0; font-size: 1.1rem;
}
.kachel h2::after { content: "›"; color: var(--marke-text); font-weight: 400; }
.kachel--extern h2::after { content: none; }
.kennzahlen { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; margin: 0; }
.kennzahlen div { display: flex; flex-direction: column-reverse; }
.kennzahlen dt { font-size: 0.82rem; color: var(--leise); }
.kennzahlen dd {
  margin: 0; font-size: 1.7rem; font-weight: 700; line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.kennzahlen small { font-size: 0.95rem; font-weight: 400; color: var(--leise); }
.kachel-fuss { margin: 0; font-size: 0.85rem; color: var(--leise); }
.kachel-fuss--achtung { color: var(--knapp); font-weight: 600; }

.aufgabenliste { list-style: none; margin: 0; padding: 0; }
.aufgabenliste li {
  display: grid; gap: 0.1rem;
  padding: 0.6rem 0; border-top: 1px solid var(--rand);
}
.aufgabenliste li:first-child { border-top: 0; padding-top: 0; }
.aufgabenliste a { font-weight: 600; }

.uebersicht-unten {
  display: grid; gap: 1rem; align-items: start;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}
@media (max-width: 760px) {
  .uebersicht-unten { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .uebersicht { gap: 0.75rem; }
}

.wochenliste { list-style: none; margin: 0 0 0.6rem; padding: 0; }
.wochenliste li + li { border-top: 1px solid var(--rand); }
.wochenliste a {
  display: grid; align-items: center; gap: 0.25rem 0.8rem;
  grid-template-columns: 10rem minmax(0, 1fr) 4.8rem 6.2rem;
  padding: 0.55rem 0;
  color: inherit; text-decoration: none;
}
.wochenliste a:hover strong { color: var(--marke-text); text-decoration: underline; }
.wochenliste .balken { margin: 0; }
.w-hunde, .w-nacht { text-align: right; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.w-nacht { color: var(--leise); }
.w-nacht--voll { color: var(--voll); font-weight: 600; }
/* Auf dem Telefon zwei Zeilen je Tag: oben Tag und Hunde, darunter der
   Balken mit den Naechten -- vier Spalten nebeneinander passen nicht. */
@media (max-width: 560px) {
  .wochenliste a {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "tag hunde" "balken nacht";
  }
  .w-tag { grid-area: tag; }
  .w-hunde { grid-area: hunde; }
  .wochenliste .balken { grid-area: balken; }
  .w-nacht { grid-area: nacht; }
}

/* Woher eine Zeile kommt, sobald der Kalender gelesen wird: Im Tool
   Gebuchtes steht (noch) nicht im Kalender, neu Eingetragenes (noch) nicht
   im Tool. Beides soll man beim Testen auf einen Blick finden. */
.t-quelle {
  display: inline-block; margin-left: 0.3rem; padding: 0 0.45rem;
  border-radius: 999px; background: var(--marke-hell); color: var(--marke-text);
  font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}
.kalenderstand { flex-basis: 100%; margin: 0; }
.kalenderstand--fehler { color: var(--fehler); }

.anbindungen { display: grid; gap: 0.6rem; margin: 0; }
.anbindungen dt { font-weight: 600; font-size: 0.9rem; }
.anbindungen dd { margin: 0; font-size: 0.9rem; color: var(--leise); }

/* Tage, an denen schon ein eigener Hund angemeldet ist. Leichtes Gruen,
 * nicht die Auswahlfarbe: Beides gleichzeitig kommt vor, und dann muss man
 * noch unterscheiden koennen, was gebucht und was eben angetippt ist. */
.tag--gebucht {
  background: var(--gebucht);
  border-color: color-mix(in srgb, var(--gebucht) 60%, var(--meine));
}
.tag--gebucht.tag--gewaehlt {
  background: var(--marke);
  border-color: var(--marke-text);
}

/* Was der laufende Monat kostet. */
.monatskosten {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.6rem; flex-wrap: wrap;
  margin: 0.9rem 0 0;
  padding: 0.6rem 0.75rem;
  background: var(--grund);
  border-radius: 8px;
  font-size: 0.9rem;
}
.monatskosten-betrag { font-weight: 600; font-size: 1.05rem; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------- Telefon und Finger */

/* Unter 400px zaehlt jeder Millimeter: Sieben Kalenderspalten muessen
 * nebeneinander bleiben, also nimmt der Rand ab statt der Spalte. */
@media (max-width: 400px) {
  body { padding: 0 0.75rem 3rem; }
  .karte { padding: 0.85rem; }
  /* Die klebende Leiste folgt dem schmaleren Rand der Karte, sonst stuende
     sie links und rechts vor und die Seite liesse sich seitwaerts schieben. */
  .weiterleiste--klebend {
    margin: 1rem -0.85rem -0.85rem;
    padding-left: 0.85rem; padding-right: 0.85rem;
  }
  .anmeldekasten { padding: 1.5rem; }
  /* Der Kopf folgt dem schmaleren Rand des body, sonst stuende er vor. */
  .kopf { margin: 0 -0.75rem 0.75rem; padding: 0.6rem 0.75rem; gap: 0.5rem 0.6rem; }
  .marke-kopf img { height: 34px; }
  .zeitraum { gap: 0.5rem; padding: 0.6rem; }
  /* Zwei Flaechen nebeneinander werden hier zu schmal fuer die
     Untertitel -- untereinander bleiben beide vollstaendig lesbar. */
  .buchungsart { grid-template-columns: 1fr; }
  .fahrdienstfelder { grid-template-columns: 1fr; }
  .monatswahl select { font-size: 0.85rem; padding: 0.3rem 0.35rem; }
  .monatswahl input { width: 4.4rem; padding: 0.35rem; }
}

/* Untereinander gestellte Karten brauchen weniger Luft dazwischen als
 * nebeneinander gestellte. Der Planstand rutscht unter die beiden
 * Tourknoepfe, statt sie mit margin-left:auto zusammenzuquetschen. */
@media (max-width: 760px) {
  .tourenraster, .raster { gap: 0.75rem; }
  .artwahl .leise { margin-left: 0; flex-basis: 100%; }
}

/* Ein Finger trifft rund 44px zuverlaessig, ein Mauszeiger jeden Pixel.
 * Deshalb nur fuer grobe Zeiger vergroessern -- am Schreibtisch waeren die
 * gleichen Flaechen bloss klobig. */
@media (pointer: coarse) {
  .knopf { min-height: 44px; }
  .knopf--klein { min-height: 40px; padding: 0.35rem 0.9rem; }
  .monatskopf .knopf { min-width: 48px; font-size: 1.2rem; }
  .ankreuz { min-height: 44px; margin: 0.2rem 0; }
  .hundewahl .ankreuz { margin: 0; }
  input[type="email"], input[type="password"], select { min-height: 44px; }
  .haltliste li { padding: 0.55rem 0; }
  .vergangenes summary { padding: 0.8rem 0; }
}

/* Auf schmalen Telefonen ist eine Kalenderzelle rund 35 Pixel breit. Da
 * passt kein Hundename hinein: "BONNIE" wurde zu "BO…", waehrend "FREYA"
 * gerade noch ging -- abgeschnitten und uneinheitlich. Weglassen kostet
 * nichts, denn der gruene Grund sagt dasselbe, und der vorgelesene Name der
 * Zelle traegt die Angabe ohnehin.
 *
 * Und "25 frei" brach auf zwei Zeilen um, was die Zellen unnoetig hoch
 * machte. Kleiner und ohne Umbruch passt es in eine. */
@media (max-width: 400px) {
  /* Nach den Regeln fuer Finger, damit diese hier gewinnt: 40 statt 48
     Pixel breite Pfeile machen im Monatskopf Platz fuer "September".
     Hoch bleiben sie 44 Pixel -- gut zu treffen. */
  .monatskopf { gap: 0.3rem; }
  .monatswahl { gap: 0.3rem; }
  .monatskopf .knopf { min-width: 40px; padding-left: 0.4rem; padding-right: 0.4rem; }
  .monatswahl input { width: 3.9rem; }
  /* Ohne die Pfeiltasten des Browsers: Sie nahmen im schmalen Feld die
     halbe "6" weg. Das Jahr laesst sich tippen, der Monat blaettern. */
  #jahrfeld { appearance: textfield; -moz-appearance: textfield; }
  #jahrfeld::-webkit-inner-spin-button,
  #jahrfeld::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
  .tag { min-height: 52px; }
  .tag-meine { display: none; }
  .tag-haken { display: block; }
  .tag-nummer { font-size: 0.95rem; }
}

/* ---------------------------------------------------------- Verwaltung */

/* Einstellungen, Kunden und Buchungen im Betrieb: Formulare, die ihre
   Antwort gleich darunter zeigen (static/verwaltung.js). */
.seitentitel { font-size: 1.35rem; margin: 0.25rem 0 0; }
.meldung { margin: 0; font-size: 0.9rem; }
.meldung[hidden] { display: none; }
.meldung--ok { color: var(--meine); font-weight: 600; }
.meldung--fehler { color: var(--fehler); font-weight: 600; }
.meldung--leise { color: var(--leise); }
#seitenmeldung { padding: 0.6rem 0.9rem; border-radius: var(--rundung); background: #eaf5ec; }

.formular { display: grid; gap: 0.8rem; margin-top: 0.6rem; }
.formular input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.formular select, .formular textarea {
  width: 100%; padding: 0.55rem 0.65rem; font: inherit;
}
.formular p { margin: 0; }
.felder { display: grid; gap: 0.8rem; }
.felder--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.felder--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 620px) {
  .felder--zwei, .felder--drei { grid-template-columns: minmax(0, 1fr); }
}
.formularfuss { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.auswahlreihe { display: flex; flex-wrap: wrap; gap: 0.2rem 1.4rem; }
.aufklappen { margin-top: 0.8rem; }
.aufklappen > summary { cursor: pointer; color: var(--marke-text); font-weight: 600; padding: 0.3rem 0; }
.vorbei { opacity: 0.6; }
.k-knoepfe { grid-column: 2; grid-row: 1 / span 3; display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: flex-end; }

/* -------------------------------------------------------------- Kunden */

.titelzeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.zurueck-zeile { margin: 0; font-size: 0.9rem; }
.unterzeile { font-size: 0.95rem; margin: 1.2rem 0 0.4rem; }
.fehler-text { color: var(--fehler); }

/* Filter als Knoepfe mit Zustand -- dieselbe Pille wie die Sprungmarken. */
.filter {
  font: inherit; font-size: 0.85rem; cursor: pointer;
  padding: 0.25rem 0.7rem; border-radius: 999px; border: 1px solid var(--rand);
  background: var(--grund); color: var(--schrift);
}
.filter[aria-pressed="true"] { background: var(--marke-hell); border-color: var(--marke-rand); font-weight: 700; }
#trefferzahl:empty { display: none; }

.kundenliste {
  list-style: none; margin: 0; padding: 0;
  background: var(--karte); border: 1px solid var(--rand); border-radius: var(--rundung);
}
.kundenzeile + .kundenzeile { border-top: 1px solid var(--rand); }
.kundenzeile a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem 0.8rem;
  padding: 0.75rem 1rem; color: inherit; text-decoration: none;
}
.kundenzeile a:hover { background: var(--grund); }
.kz-name { font-weight: 700; }
.kz-hunde { justify-self: end; font-size: 0.9rem; text-align: right; }
.kz-kontakt { grid-column: 1 / -1; font-size: 0.88rem; overflow-wrap: anywhere; }
.kz-marken { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.15rem; }
.marke--stand-eigenes { border-color: var(--frei); color: var(--meine); }
.marke--stand-ohne_mail { font-style: italic; color: var(--leise); }
.marke--stand-abgelaufen { border-color: var(--knapp); color: var(--knapp); }
.marke--rechnung { border-color: var(--voll); color: var(--voll); font-weight: 600; }

.hundeliste { list-style: none; margin: 0 0 0.6rem; padding: 0; display: grid; gap: 0.5rem; }
.hundeliste li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; }
.hundeform { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; min-width: 0; }
.hundeform input { flex: 1 1 8rem; width: auto; min-width: 0; max-width: 11rem; padding: 0.4rem 0.55rem; font: inherit; text-transform: uppercase; }
.hundeliste .meldung { flex-basis: 100%; }
.formular--eine-zeile { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
@media (max-width: 620px) { .formular--eine-zeile { grid-template-columns: minmax(0, 1fr); } }
.personensuche { margin-top: 0.8rem; }
.personensuche input { width: 100%; padding: 0.55rem 0.65rem; }
.buchungsuebersicht li > span { display: block; }
.r-betrag { display: inline-flex; align-items: center; gap: 0.5rem; font-variant-numeric: tabular-nums; font-weight: 600; }

/* ----------------------------------------------- Buchungen im Betrieb */

.suchzeile { display: flex; gap: 0.6rem; align-items: stretch; }
.suchzeile .suchfeld { flex: 1; min-width: 0; }
.suchzeile .knopf { flex: none; }
.z-oeffnen { font-size: 0.9rem; margin-left: auto; }

.feldgruppe { border: 0; margin: 0; padding: 0; display: grid; gap: 0.4rem; min-width: 0; }
.feldgruppe legend { font-size: 0.9rem; color: var(--leise); padding: 0; margin-bottom: 0.3rem; }
.tageliste { display: grid; gap: 0.5rem; margin: 0.6rem 0; }
.tagzeile { display: flex; gap: 0.5rem; align-items: center; }
.tagzeile input { flex: 1; min-width: 0; padding: 0.55rem 0.65rem; }
.betriebsvorschau { background: var(--grund); border-radius: 10px; padding: 0.8rem 0.9rem; }
.betriebsvorschau[aria-busy="true"] { opacity: 0.6; }
.betriebsvorschau .vorschauliste { margin: 0; }
.betriebsvorschau p { margin: 0.4rem 0 0; }

.angaben { margin: 0; display: grid; gap: 0.55rem; }
.angaben div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0.8rem; }
.angaben dt { color: var(--leise); font-size: 0.9rem; }
.angaben dd { margin: 0; }
@media (max-width: 400px) { .angaben div { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* Listen, deren Zeilen ganz anklickbar sind -- mit Pfeil wie die Kacheln. */
.zeilenliste { list-style: none; margin: 0.4rem -1rem 0; padding: 0; }
.zeilenliste li + li { border-top: 1px solid var(--rand); }
.zeilenliste a, .zeilenliste .zeile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.1rem 0.6rem;
  padding: 0.6rem 1rem; color: inherit; text-decoration: none;
}
.zeilenliste a::after { content: "›"; grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--marke-text); }
.zeilenliste a:hover { background: var(--grund); }
.zeilenliste a > span, .zeilenliste .zeile > span { grid-column: 1; }
@media (max-width: 400px) { .zeilenliste { margin: 0.4rem -0.85rem 0; } .zeilenliste a, .zeilenliste .zeile { padding: 0.6rem 0.85rem; } }

/* ---------------------------------------------------- Touren-Assistent */

/* Vier Schritte wie bei der Buchung: die Leiste zeigt, wo man ist, und
   fuehrt zurueck. */
.schrittleiste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.schrittleiste button {
  width: 100%; font: inherit; font-size: 0.82rem; padding: 0.45rem 0.2rem; cursor: pointer;
  border: 0; border-bottom: 4px solid var(--rand); background: none; color: var(--leise);
}
.schrittleiste button[aria-current="step"] { color: var(--schrift); font-weight: 700; border-bottom-color: var(--marke); }
.schrittleiste button:disabled { cursor: default; opacity: 0.5; }
.tourschritt { display: grid; gap: 0.9rem; }
.tourschritt[hidden] { display: none; }
.tourschritt h2[tabindex] { font-size: 1.35rem; margin: 0; }
.tourschritt h2:focus:not(:focus-visible) { outline: none; }
.tourschritt > p { margin: 0; }

.fahrtwahl { display: grid; gap: 0.6rem; }
.fahrtkarte {
  position: relative; display: grid; gap: 0.2rem; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
  padding: 1rem 2.4rem 1rem 1.1rem;
  background: var(--karte); border: 1px solid var(--rand); border-radius: var(--rundung);
}
.fahrtkarte::after {
  content: "›"; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; color: var(--marke-text);
}
.fahrtkarte:hover { border-color: var(--marke-rand); }
.fahrtkarte[aria-pressed="true"] { background: var(--marke-hell); border-color: var(--marke-rand); }
.wahl-titel { font-weight: 700; font-size: 1.1rem; }
.wahl-text { color: var(--leise); font-size: 0.9rem; }

.abschnittstitel { font-size: 1rem; margin: 0.4rem 0 0; }
.tourkarte {
  background: var(--karte); border: 1px solid var(--rand); border-left: 5px solid var(--wagenfarbe, var(--marke));
  border-radius: var(--rundung); padding: 0.8rem 1rem;
}
.tourkarte-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; }
.tourkarte .haltliste { padding: 0; margin: 0.5rem 0 0; }
.tourkarte .haltliste li {
  grid-template-columns: 3.2rem minmax(0, 1fr) auto; align-items: start;
  cursor: default; font-size: 0.9rem; padding: 0.55rem 0;
}
.tourkarte .haltliste li:hover { background: none; }
.halt-uhr { font-variant-numeric: tabular-nums; font-weight: 700; }
.halt-text { display: grid; gap: 0.15rem; min-width: 0; }
.halt-text .halt-adresse { grid-column: auto; }
.wagenwahl {
  font: inherit; font-size: 0.85rem; padding: 0.3rem 0.4rem; max-width: 8.5rem;
  border: 1px solid var(--rand); border-radius: 8px; background: var(--grund); color: var(--schrift);
}
@media (max-width: 480px) {
  .tourkarte .haltliste li { grid-template-columns: 3rem minmax(0, 1fr); }
  .wagenwahl { grid-column: 2; justify-self: start; }
}
.knoepfe { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.2rem; }
.kartenhuelle #landkarte { height: min(60vh, 420px); border-radius: 10px; margin-top: 0.5rem; }
.problem .schlichtliste li > span:first-child { display: grid; }
#fahrerliste a { border-left: 5px solid var(--wagenfarbe, transparent); }

/* ----------------------------------------------------------- Fahreransicht */

a.filter { text-decoration: none; }
.filter[aria-current="page"] { background: var(--marke-hell); border-color: var(--marke-rand); font-weight: 700; }
.wagenwahl-leiste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.35rem; }
.wagenknopf {
  text-align: center; padding: 0.6rem 0.2rem; border-radius: 10px; font-size: 0.9rem;
  border: 1px solid var(--rand); background: var(--karte); color: var(--schrift); text-decoration: none;
}
.wagenknopf[aria-current="page"] { background: var(--marke); border-color: var(--marke); color: var(--auf-marke); font-weight: 700; }
.wagenknopf.leer:not([aria-current]) { color: var(--leise); }
.wagenknopf small { display: block; font-size: 0.75rem; font-weight: 400; }
.fahrliste li { grid-template-columns: 3.4rem minmax(0, 1fr); }
.fahrhalt .halt-adresse { font-size: 0.95rem; color: var(--schrift); }
.fahrt-start { margin: 0.5rem 0 0; font-size: 0.9rem; color: var(--leise); }
.haken--gross { font-size: 1rem; padding: 0.4rem 0; }
.haken--gross input { width: 1.4rem; height: 1.4rem; }