/* ==========================================================================
   components.css — Bauteile
   Fabio Venier DF Immobilienbetreuung

   Jedes Bauteil hat ein eigenes Praefix. Kein Bauteil greift auf die
   Strukturklassen aus layout.css zu und umgekehrt. Damit bleibt die
   Spezifitaet ueberall bei einer Klasse.

     .lst-      Leistungen als Akkordeon
     .jahr-     Objektjahr, feste Jahresuebersicht
     .ablauf-   Drei Schritte
     .arg-      Argumente fuer Hausverwaltungen
     .formular  Formulare und Felder
     .sheet     Anfrage-Sheet (dialog)
     .knopf     Schaltflaechen
     .icon      Material Symbols
     .platzhalter  Sichtbar markierte Luecke fuer Fabio
   ========================================================================== */


/* ==========================================================================
   1. ABSCHNITTSKOPF
   --------------------------------------------------------------------------
   Die Abschnittsmarke (kleiner Strich plus Versalien, ".kicker") ist
   ENTFERNT. Sie stand ueber fast jedem Abschnitt und trug nichts bei —
   in der Abnahme war sie an mehreren Stellen das Einzige, was zu sehen
   war. Die Ueberschrift allein reicht.
   ========================================================================== */

.abschnitt-kopf { margin-bottom: var(--raum-5); }
.abschnitt-kopf p { margin-top: var(--raum-3); color: var(--text-2); max-width: var(--satzbreite); }
.band-tief .abschnitt-kopf p { color: var(--auf-tiefe-2); }


/* ==========================================================================
   2. HERO
   --------------------------------------------------------------------------
   Linksbuendig, asymmetrisch. Die Telefonnummer ist Displaytype, keine
   Schaltflaeche — sie ist nach der Ueberschrift das groesste Element.
   ========================================================================== */

.hero { position: relative; padding-block: var(--raum-6) var(--abschnitt-y); }
/* Am Handy sitzt der Hero direkt unter der Kopfzeile. 84 Pixel Vorlauf
   verschenken dort ein Sechstel des ersten Bildschirms. */
@media (max-width: 47.99rem) {
  .hero { padding-block: var(--raum-4) var(--abschnitt-y); }
  .hero-unten { margin-top: var(--raum-4); }
}

.hero-titel {
  font-size: var(--gr-hero);
  font-weight: var(--fett-display);
  font-stretch: var(--breite-display);
  line-height: var(--zeile-display);
  letter-spacing: var(--lauf-display);
  text-wrap: balance;
}
/* Die Reihe unter der Ueberschrift traegt die Asymmetrie des Heros:
   Text links auf fuenf Spalten, Zeichnung rechts auf fuenf, dazwischen
   zwei Spalten Luft. */
.hero-unten { margin-top: var(--raum-5); align-items: start; }

.hero-vorspann {
  margin-top: 0;
  font-size: var(--gr-20);
  line-height: var(--zeile-dicht);
  color: var(--text-2);
  max-width: 34ch;
}

/* Handlungsaufruf im Hero.
   Vorher stand hier die Telefonnummer als grosser Schriftzug. Sie ist
   jetzt im Anfrage-Sheet zu finden, zusammen mit E-Mail und Zeiten. */
.hero-cta { margin-top: var(--raum-5); }

/* Nebenverweis unter der Nummer. Kein zweiter Button daneben. */
.hero-neben { margin-top: var(--raum-4); font-size: var(--gr-14); color: var(--text-2); }

/* Die gebaute Zeichnung rechts. Sie wird bewusst begrenzt: sie ist
   Begleitung, nicht Hauptdarsteller — der Hauptdarsteller ist die
   Ueberschrift darueber. */
.hero-zeichnung { position: relative; }
.hero-zeichnung svg { width: 100%; height: auto; }
@media (min-width: 48rem) {
  .hero-zeichnung { max-width: 24rem; margin-left: auto; }
}
@media (max-width: 47.99rem) {
  /* Am Handy stand die Zeichnung mit 329 Pixeln Hoehe zwischen
     Handlungsaufruf und erstem Inhalt. Sie ist Begleitung, nicht
     Information — deshalb hier deutlich kleiner und am rechten Rand,
     damit der Text weiterlaeuft statt umbrochen zu werden. */
  .hero-zeichnung { margin-top: var(--raum-4); max-width: 11rem; margin-left: auto; }
}


/* ==========================================================================
   3. LEISTUNGEN ALS AKKORDEON
   --------------------------------------------------------------------------
   Vorher war jede Zeile ein Verweis auf eine andere Seite. Ein Klick
   riss den Leser aus dem Zusammenhang. Jetzt klappt der Umfang an Ort
   und Stelle auf.

   Geoeffnet wird ueber ein echtes <button> mit aria-expanded. Die Hoehe
   wird ueber grid-template-rows von 0fr auf 1fr animiert — das ist der
   einzige Weg, eine unbekannte Hoehe in reinem CSS weich zu oeffnen,
   ohne eine feste max-height zu raten.
   ========================================================================== */

.lst { border-top: var(--linie-staerke) solid var(--linie); }
.lst-zeile { border-bottom: var(--linie-staerke) solid var(--linie); }

.lst-kopf { margin: 0; font: inherit; letter-spacing: normal; }

.lst-schalter {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: 'icon name zeichen' '. kurz .';
  align-items: center;
  gap: var(--raum-1) var(--raum-3);
  width: 100%;
  padding: var(--raum-4) 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  transition: color var(--dauer-kurz) var(--kurve-aus);
}
@media (min-width: 48rem) {
  .lst-schalter {
    grid-template-columns: auto minmax(0, 5fr) minmax(0, 6fr) auto;
    grid-template-areas: 'icon name kurz zeichen';
  }
}
.lst-schalter:hover { color: var(--akzent-tief); }

.lst-icon    { grid-area: icon; display: flex; color: var(--akzent); }
.lst-icon .icon { width: 1.5rem; height: 1.5rem; }
/* font-family ausdruecklich: .lst-kopf setzt "font: inherit", damit die
   Ueberschrift im Schalter nicht die h3-Groesse mitbringt. Dabei geht
   auch die Display-Schrift verloren und muss hier zurueckgeholt werden. */
.lst-name    { grid-area: name; font-family: var(--schrift-display); font-size: var(--gr-20); font-weight: 600; letter-spacing: -0.02em; }
.lst-kurz    { grid-area: kurz; color: var(--text-2); font-size: var(--gr-14); line-height: var(--zeile-dicht); }

/* Plus, das sich zum Minus dreht. Nur transform. */
.lst-zeichen {
  grid-area: zeichen;
  position: relative;
  width: 1rem; height: 1rem;
  flex-shrink: 0;
}
.lst-zeichen::before,
.lst-zeichen::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: var(--akzent);
  transition: transform var(--dauer-mittel) var(--kurve-aus);
}
.lst-zeichen::after { transform: rotate(90deg); }
[aria-expanded='true'] .lst-zeichen::after { transform: rotate(0deg); }

/* --- Aufklappender Bereich ---------------------------------------------- */
.lst-inhalt {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dauer-mittel) var(--kurve-ein-aus);
}
.lst-inhalt > .lst-innen { overflow: hidden; }
.lst-zeile[data-offen='ja'] .lst-inhalt { grid-template-rows: 1fr; }

.lst-innen > * { margin-top: 0; }
.lst-zeile[data-offen='ja'] .lst-innen > :first-child { padding-top: var(--raum-1); }
.lst-innen { padding-bottom: 0; }
.lst-zeile[data-offen='ja'] .lst-innen { padding-bottom: var(--raum-4); }

.lst-text { max-width: var(--satzbreite); color: var(--text-2); }
@media (min-width: 48rem) { .lst-text, .lst-umfang, .lst-anfrage { margin-left: calc(1.5rem + var(--raum-3)); } }

.lst-umfang { margin-top: var(--raum-3); display: grid; gap: var(--raum-2); }
.lst-umfang li { display: grid; grid-template-columns: auto 1fr; gap: var(--raum-3); align-items: start; font-size: var(--gr-14); }
.lst-umfang li::before {
  content: '';
  width: var(--raum-3);
  height: var(--linie-staerke);
  background: var(--akzent);
  margin-top: 0.68em;
}

.lst-anfrage {
  margin-top: var(--raum-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-3);
  font-size: var(--gr-14);
  color: var(--text-2);
}
/* Mindestens 44 Pixel hoch. Darunter trifft ein Finger daneben — das
   ist keine Geschmacksfrage, sondern die uebliche Untergrenze. */
.lst-knopf {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  background: none;
  border: 0;
  border-bottom: 2px solid var(--akzent);
  padding: 0 0 2px;
  font-size: var(--gr-14);
  font-weight: var(--fett-betont);
  color: var(--akzent-tief);
  cursor: pointer;
}
.lst-knopf:hover { color: var(--tiefe); }

/* Ohne JavaScript sind alle Bereiche offen — sonst waere der Inhalt
   unerreichbar. */
html:not(.js) .lst-inhalt { grid-template-rows: 1fr; }
html:not(.js) .lst-zeichen { display: none; }


/* ==========================================================================
   4. DAS OBJEKTJAHR — feste Jahresuebersicht
   --------------------------------------------------------------------------
   Kein Pin, kein waagrechter Scrub mehr.

   Die erste Fassung hielt den Abschnitt fest und schob ein Monatsband
   durch das Bild. Dabei wanderten die Leistungsnamen hinaus: sichtbar
   blieb ein leerer Balken und drei Striche ohne Bezug.

   Jetzt steht der Name links fest, die zwoelf Monate laufen daneben.
   Drei Balkenarten, ohne Legende unterscheidbar:
     .jahr-saison     gefuellt, nur ueber die betroffenen Monate
     .jahr-dauerhaft  gefuellt, ueber das ganze Jahr
     .jahr-zuruf      gestrichelt, ueber das ganze Jahr
   ========================================================================== */

.jahr-fenster { overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: var(--raum-2); }
.jahr { min-width: 44rem; }

.jahr-zeile {
  display: grid;
  grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr);
  align-items: center;
  gap: var(--raum-3);
}

.jahr-spur { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; }

/* --- Monatskopf --------------------------------------------------------- */
.jahr-kopf { padding-bottom: var(--raum-2); border-bottom: var(--linie-staerke) solid var(--linie); }
.jahr-monat {
  font-size: var(--gr-12);
  font-weight: 500;
  letter-spacing: var(--lauf-label);
  text-transform: uppercase;
  color: var(--text-2);
  text-align: center;
}

/* --- Gruppen ------------------------------------------------------------- */
.jahr-gruppe { margin-top: var(--raum-4); }
.jahr-gruppenname {
  font-size: var(--gr-12);
  font-weight: 600;
  letter-spacing: var(--lauf-label);
  text-transform: uppercase;
  color: var(--akzent-tief);
  margin-bottom: var(--raum-2);
}

.jahr-name {
  font-size: var(--gr-14);
  font-weight: var(--fett-betont);
  line-height: var(--zeile-dicht);
  /* Bleibt beim seitlichen Scrollen am linken Rand stehen. Ohne das
     verschwindet genau die Angabe, die den Balken erklaert. */
  position: sticky;
  left: 0;
  background: var(--papier-tief);
  padding-right: var(--raum-2);
  z-index: 1;
}
.jahr-gruppe .jahr-zeile + .jahr-zeile { margin-top: 6px; }

/* Der Zeitraum neben dem Namen. Am Desktop tragen die Balken die
   Information optisch, hier steht sie nur fuer Vorlesesoftware. */
.jahr-zusatz {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Balken -------------------------------------------------------------- */
.jahr-balken {
  grid-column: var(--von) / calc(var(--bis) + 1);
  display: flex;
  align-items: center;
  min-height: 2.5rem;
  padding-inline: var(--raum-2);
  border-radius: var(--radius);
  font-size: var(--gr-12);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
}

/* Die Balkenfarben folgen dem Logo und tragen Bedeutung:
     BLAU  = Immobilie und Reinigung, also Winterdienst und alles,
             was durchlaeuft
     GRUEN = Garten, also die Saison von April bis Oktober
   Damit sagt die Farbe dasselbe wie die Beschriftung. */
.jahr-saison {
  background: color-mix(in srgb, var(--akzent) 16%, var(--papier));
  border: var(--linie-staerke) solid var(--akzent);
  color: var(--akzent-tief);
}
.jahr-saison[data-leistung='gartendienste'] {
  background: color-mix(in srgb, var(--signal) 18%, var(--papier));
  border-color: var(--signal);
  color: var(--signal-text);
}
.jahr-dauerhaft {
  background: var(--akzent);
  color: var(--papier);
}
.jahr-zuruf {
  border: 2px dashed var(--linie);
  color: var(--text-2);
}

/* --- Wischhinweis --------------------------------------------------------
   Grundzustand zuerst, Sichtbarkeit danach — andersherum gewaenne die
   spaetere Regel bei gleicher Spezifitaet. */
.jahr-hinweis {
  display: none;
  align-items: center;
  gap: var(--raum-2);
  margin-top: var(--raum-3);
  font-size: var(--gr-12);
  color: var(--text-2);
}
.jahr-hinweis .icon { width: 1.125rem; height: 1.125rem; color: var(--akzent); }

/* Zwischen Tablet und Desktop wird seitlich gescrollt. */
@media (min-width: 48rem) and (max-width: 63.99rem) { .jahr-hinweis { display: flex; } }

/* --- Handyansicht --------------------------------------------------------
   Am Handy wurde das Band 684 Pixel breit in ein 320 Pixel schmales
   Fenster gezwaengt: gut zwei Bildschirmbreiten Wischen, nur um eine
   Zeile zu lesen.

   Jetzt steht der Name UEBER der Spur statt daneben. Damit bleiben die
   vollen 320 Pixel fuer zwoelf Monate, rund 26 Pixel je Monat — es passt
   ohne seitliches Scrollen. Beschriftet wird nur jeder dritte Monat,
   sonst kleben die Kuerzel aneinander. Die uebrigen behalten ihre
   Gitterzelle, damit die Balken darunter weiter stimmen. */
@media (max-width: 47.99rem) {
  .jahr-fenster { overflow-x: visible; padding-bottom: 0; }
  .jahr { min-width: 0; }

  .jahr-zeile { grid-template-columns: 1fr; gap: var(--raum-1); }

  .jahr-name {
    position: static;
    background: none;
    padding-right: 0;
    /* Steht am Handy als eigene Zeile ueber der Spur, nicht mehr als
       schmale Spalte daneben — deshalb einen Grad groesser. */
    font-size: var(--gr-16);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--raum-2);
  }
  .jahr-kopf .jahr-name { display: none; }

  /* Beschriftet wird nur jeder dritte Monat, sonst kleben die Kuerzel
     aneinander. Die uebrigen werden ausgeblendet UND aus dem Gitter
     genommen, die verbleibenden vier spannen dafuer je drei Spalten.

     Vorher blieben die acht ausgeblendeten als leere Zellen stehen und
     jedes Kuerzel musste in 22 Pixel passen — bei 320 Pixeln Fenster-
     breite lief "Mär" um neun Pixel darueber hinaus. Mit drei Spalten
     je Kuerzel sind es rund 70 Pixel Platz, und die Balken darunter
     sitzen unveraendert, weil sie ihre Spalten selbst benennen. */
  .jahr-monat { font-size: var(--gr-12); letter-spacing: 0; text-align: left; padding-left: 1px; }
  .jahr-monat:not(:nth-child(3n+1)) { display: none; }
  .jahr-monat:nth-child(3n+1) { grid-column: span 3; }

  /* Am Handy traegt der Balken keine Schrift mehr. Der Zeitraum steht
     stattdessen lesbar neben dem Leistungsnamen, der Balken zeigt nur
     noch die Lage im Jahr. Das loest zwei Probleme auf einmal: kurze
     Balken schnitten ihre Beschriftung ab, und 11 Pixel waren am Handy
     ohnehin zu klein. */
  .jahr-balken-text { display: none; }
  .jahr-balken { min-height: 1.75rem; padding-inline: 0; }

  .jahr-zusatz {
    position: static;
    width: auto; height: auto;
    overflow: visible;
    clip-path: none;
    font-size: var(--gr-14);
    font-weight: var(--fett-text);
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
  }
  .jahr-gruppe .jahr-zeile + .jahr-zeile { margin-top: var(--raum-3); }
  .jahr-gruppe { margin-top: var(--raum-5); }

  /* Es wird nicht mehr gewischt, also braucht es auch keinen Hinweis. */
  .jahr-hinweis { display: none; }
}


/* ==========================================================================
   5. ABLAUF IN DREI SCHRITTEN
   --------------------------------------------------------------------------
   Die einzige Stelle im Projekt mit einer Nummerierung, weil hier
   tatsaechlich eine Reihenfolge vorliegt.
   ========================================================================== */

.ablauf { display: grid; gap: 0; }
@media (min-width: 48rem) {
  .ablauf { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--steg); }
}

.ablauf-schritt {
  position: relative;
  padding-block: var(--raum-4);
  border-top: 2px solid var(--tiefe);
}
.band-tief .ablauf-schritt { border-top-color: var(--auf-tiefe); }

/* Die Ziffer traegt den Abschnitt optisch. Vorher stand dort nur ein
   winziges "SCHRITT 1" in Versalien — zu wenig, um dem Abschnitt Halt
   zu geben. Jetzt eine grosse, leichte Ziffer in der Akzentfarbe.
   Zulaessig, weil hier tatsaechlich eine Reihenfolge vorliegt; an jeder
   anderen Stelle der Seite gibt es bewusst keine Nummerierung. */
.ablauf-nr {
  display: block;
  font-family: var(--schrift-display);
  font-size: var(--gr-44);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--akzent);
  margin-bottom: var(--raum-3);
  font-variant-numeric: lining-nums tabular-nums;
}
.ablauf-titel {
  font-family: var(--schrift-display);
  font-stretch: var(--breite-display);
  font-weight: var(--fett-h);
  font-size: var(--gr-26);
  line-height: var(--zeile-eng);
  letter-spacing: var(--lauf-display);
  margin-bottom: var(--raum-2);
}
.ablauf-text { color: var(--text-2); max-width: 32ch; }
.band-tief .ablauf-text { color: var(--auf-tiefe-2); }


/* ==========================================================================
   6. ARGUMENTE (Seite fuer Hausverwaltungen)
   ========================================================================== */

.arg-liste { display: grid; gap: 0; }
@media (min-width: 48rem) { .arg-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--raum-5); } }

.arg {
  padding-block: var(--raum-4);
  border-top: var(--linie-staerke) solid var(--linie);
}
.band-tief .arg { border-top-color: var(--linie-auf-tiefe); }
.arg-titel { font-size: var(--gr-20); font-family: var(--schrift-display); font-stretch: var(--breite-display); font-weight: var(--fett-h); letter-spacing: var(--lauf-display); margin-bottom: var(--raum-2); }
.arg-text { color: var(--text-2); }
.band-tief .arg-text { color: var(--auf-tiefe-2); }

/* Hinweiszeile unter einem Inhaltsblock, etwa "Keine Preisliste ...".
   Die frueheren Regeln fuer .leistung-umfang sind entfallen — die
   Leistungsdetails stehen jetzt im Akkordeon (.lst-umfang). */
.leistung-anfrage {
  margin-top: var(--raum-4);
  padding-top: var(--raum-3);
  border-top: var(--linie-staerke) solid var(--linie);
  font-size: var(--gr-14);
  color: var(--text-2);
}

/* Kurzliste fuer den Hausverwaltungs-Block auf der Startseite.
   Zweispaltig, mit Haken. Gibt dem Abschnitt Inhalt statt Leerraum. */
.kurzliste {
  display: grid;
  gap: 0;
  margin-top: var(--raum-3);
}
@media (min-width: 40rem) {
  .kurzliste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--raum-5); }
}
.kurzliste-punkt {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--raum-2);
  align-items: center;
  padding-block: var(--raum-2);
  border-bottom: var(--linie-staerke) solid var(--linie);
  font-weight: var(--fett-betont);
  font-size: var(--gr-14);
}
.kurzliste-punkt .icon { width: 1.125rem; height: 1.125rem; color: var(--akzent); }
.band-tief .kurzliste-punkt { border-bottom-color: var(--linie-auf-tiefe); }

/* Uebernahmeliste: was am Objekt uebernommen wird. */
.uebernahme { display: grid; gap: 0; }
.uebernahme-punkt {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--raum-3);
  align-items: start;
  padding-block: var(--raum-3);
  border-top: var(--linie-staerke) solid var(--linie);
}
.band-tief .uebernahme-punkt { border-top-color: var(--linie-auf-tiefe); }
.uebernahme-punkt svg { width: 1.5rem; height: 1.5rem; color: var(--akzent); margin-top: 0.15em; }
.uebernahme-name { font-weight: var(--fett-betont); }
.uebernahme-text { color: var(--text-2); font-size: var(--gr-14); }
.band-tief .uebernahme-text { color: var(--auf-tiefe-2); }


/* ==========================================================================
   7. FORMULARE
   --------------------------------------------------------------------------
   Felder mit ruhiger Flaeche und einer Haarlinie unten, die beim Fokus
   in die Akzentfarbe wechselt und dicker wird. Keine runden Ecken,
   keine Schatten.
   ========================================================================== */

.formular { display: grid; gap: var(--raum-4); }

.feld { display: grid; gap: var(--raum-1); }

.feld-label {
  font-family: var(--schrift-label);
  font-size: var(--gr-12);
  font-weight: var(--fett-label);
  letter-spacing: var(--lauf-label);
  text-transform: uppercase;
  color: var(--text-2);
}
.band-tief .feld-label { color: var(--auf-tiefe-2); }

/* Pflichtkennzeichnung. Das Sternchen wird fuer Screenreader durch einen
   Text ersetzt, damit nicht "Stern" vorgelesen wird. */
.feld-pflicht { color: var(--akzent); margin-left: 0.2em; }

.feld-eingabe {
  width: 100%;
  padding: var(--raum-2) var(--raum-3);
  background: var(--papier-tief);
  color: var(--tiefe);
  border: 0;
  border-bottom: 2px solid var(--linie);
  border-radius: var(--radius) var(--radius) 0 0;
  font-size: var(--gr-16);
  line-height: var(--zeile-dicht);
  transition: border-color var(--dauer-kurz) var(--kurve-aus),
              background-color var(--dauer-kurz) var(--kurve-aus);
}
.feld-eingabe::placeholder { color: var(--text-2); opacity: 0.65; }
.feld-eingabe:hover { border-bottom-color: var(--text-2); }
.feld-eingabe:focus { outline: none; border-bottom-color: var(--akzent); background: var(--akzent-hauch); }
.feld-eingabe:focus-visible { outline: var(--fokus-kontur) solid var(--fokus); outline-offset: var(--fokus-abstand); }

textarea.feld-eingabe { min-height: 8rem; resize: vertical; }
select.feld-eingabe { appearance: none; cursor: pointer; }

.band-tief .feld-eingabe {
  background: color-mix(in srgb, var(--papier) 8%, transparent);
  color: var(--auf-tiefe);
  border-bottom-color: var(--linie-auf-tiefe);
}
.band-tief .feld-eingabe:focus { border-bottom-color: var(--akzent-hell); background: color-mix(in srgb, var(--akzent-hell) 16%, transparent); }

.feld-hilfe { font-size: var(--gr-12); color: var(--text-2); }
.band-tief .feld-hilfe { color: var(--auf-tiefe-2); }

/* --- Fehlerzustand -------------------------------------------------------
   Farbe traegt die Aussage nie allein: es gibt immer Text, und die
   Meldung wird ueber aria-live angesagt. */
.feld-eingabe[aria-invalid='true'] { border-bottom-color: var(--fehler); background: var(--fehler-hauch); }
.feld-fehler {
  display: none;
  font-size: var(--gr-12);
  color: var(--fehler);
  font-weight: var(--fett-betont);
}
.feld-fehler:not(:empty) { display: block; }
.band-tief .feld-fehler { color: color-mix(in srgb, var(--fehler) 55%, var(--papier)); }

/* --- Mehrfachauswahl -----------------------------------------------------
   Echte Checkboxen, nur die Darstellung wird ersetzt. Tastatur und
   Screenreader arbeiten unveraendert. */
.mehrfach { display: grid; gap: var(--raum-2); border: 0; padding: 0; margin: 0; }
@media (min-width: 40rem) { .mehrfach-optionen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--raum-2) var(--raum-4); } }

.mehrfach legend { padding: 0; margin-bottom: var(--raum-2); }

.wahl { display: grid; grid-template-columns: auto 1fr; gap: var(--raum-2); align-items: center; cursor: pointer; }
.wahl input {
  appearance: none;
  width: 1.25rem; height: 1.25rem;
  margin: 0;
  border: 2px solid var(--linie);
  border-radius: var(--radius);
  background: var(--papier);
  cursor: pointer;
  position: relative;
  transition: border-color var(--dauer-kurz) var(--kurve-aus),
              background-color var(--dauer-kurz) var(--kurve-aus);
}
.wahl input:hover { border-color: var(--text-2); }
.wahl input:checked { background: var(--akzent); border-color: var(--akzent); }
/* Der Haken wird gezeichnet, nicht als Zeichen gesetzt. */
.wahl input:checked::after {
  content: '';
  position: absolute;
  left: 0.3rem; top: 0.08rem;
  width: 0.32rem; height: 0.62rem;
  border: solid var(--papier);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
.wahl-text { font-size: var(--gr-14); }

.band-tief .wahl input { background: transparent; border-color: var(--linie-auf-tiefe); }
.band-tief .wahl input:checked { background: var(--akzent-hell); border-color: var(--akzent-hell); }
/* Haken in der dunklen Grundfarbe, sonst Weiss auf Hellblau = 2,9:1. */
.band-tief .wahl input:checked::after { border-color: var(--tiefe); }

/* --- Honigtopf -----------------------------------------------------------
   Muss fuer Menschen unsichtbar sein, aber fuer Roboter ausfuellbar
   aussehen. Deshalb nicht display: none — das fuellen viele Roboter
   bewusst nicht aus. Stattdessen aus dem Sichtfeld geschoben und
   ausdruecklich aus der Tastaturreihenfolge genommen. */
.honigtopf {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* --- Rueckmeldung nach dem Absenden -------------------------------------- */
.formular-meldung {
  padding: var(--raum-3) var(--raum-4);
  border-left: 3px solid var(--akzent);
  background: var(--akzent-hauch);
  font-size: var(--gr-14);
}
.formular-meldung[data-art='fehler'] { border-left-color: var(--fehler); background: var(--fehler-hauch); color: var(--fehler); }
.formular-meldung:empty { display: none; }


/* ==========================================================================
   8. SCHALTFLAECHEN
   --------------------------------------------------------------------------
   Es gibt genau zwei: eine gefuellte fuer das Absenden, eine textnahe
   fuer Weiterverweise. Keine Pillenform, kein Schatten.
   ========================================================================== */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--raum-2);
  min-height: 3rem;
  padding: var(--raum-2) var(--raum-5);
  background: var(--akzent);
  color: var(--papier);
  border: 2px solid var(--akzent);
  border-radius: var(--radius);
  font-family: var(--schrift-display);
  font-stretch: var(--breite-display);
  font-weight: var(--fett-display);
  font-size: var(--gr-16);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dauer-mittel) var(--kurve-aus),
              color var(--dauer-mittel) var(--kurve-aus);
}
.knopf:hover { background: var(--akzent-tief); border-color: var(--akzent-tief); }
.knopf:disabled { opacity: 0.55; cursor: progress; }
.band-tief .knopf { background: var(--akzent-hell); border-color: var(--akzent-hell); color: var(--tiefe); }
.band-tief .knopf:hover { background: var(--auf-tiefe); border-color: var(--auf-tiefe); }

/* Schmalere Fassung fuer die Kopfzeile. Dort steht sie neben der
   Navigation und darf die Zeile nicht auseinanderziehen. */
.knopf-schmal {
  min-height: 2.5rem;
  padding-inline: var(--raum-3);
  font-size: var(--gr-14);
  white-space: nowrap;
}
@media (max-width: 63.99rem) { .knopf-schmal { display: none; } }

/* Textnaher Weiterverweis mit wachsendem Pfeil. */
.weiter {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  gap: var(--raum-2);
  font-family: var(--schrift-display);
  font-stretch: var(--breite-display);
  font-weight: var(--fett-h);
  font-size: var(--gr-20);
  letter-spacing: var(--lauf-display);
  text-decoration: none;
  color: inherit;
  padding-bottom: var(--raum-1);
  border-bottom: 2px solid var(--akzent);
}
.weiter svg { width: 1.25rem; height: 1.25rem; color: var(--akzent); transition: transform var(--dauer-mittel) var(--kurve-aus); }
.weiter:hover svg { transform: translateX(0.35rem); }


/* ==========================================================================
   9. ICONS
   --------------------------------------------------------------------------
   Alle Icons sind eigene SVGs mit identischer Strichstaerke und ohne
   Fuellung. Keine Emoji, keine fremde Icon-Bibliothek.
   ========================================================================== */

/* Material Symbols sind FLAECHEN, keine Striche. Sie werden ueber fill
   eingefaerbt. Ein stroke wuerde die Konturen doppelt zeichnen und die
   Icons verschmieren. */
.icon {
  fill: currentColor;
  stroke: none;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}


/* ==========================================================================
   10. LUECKEN, DIE FABIO SCHLIESSEN MUSS
   --------------------------------------------------------------------------
   Fehlende Rechtsangaben werden sichtbar markiert statt stillschweigend
   weggelassen oder erfunden. Auf der veroeffentlichten Seite darf keine
   dieser Marken mehr stehen.
   ========================================================================== */

.platzhalter {
  display: inline-block;
  padding: 0.1em 0.45em;
  background: var(--fehler-hauch);
  border: 1px dashed var(--fehler);
  border-radius: var(--radius);
  color: var(--fehler);
  font-family: var(--schrift-label);
  font-size: 0.85em;
  letter-spacing: 0.03em;
}


/* ==========================================================================
   11. RECHTSSEITEN
   Laufender Text mit klarer Gliederung, schmalere Satzbreite.
   ========================================================================== */

.rechtstext { max-width: var(--satzbreite); }
.rechtstext h2 { font-size: var(--gr-26); margin-top: var(--raum-5); margin-bottom: var(--raum-3); }
.rechtstext h3 { font-size: var(--gr-20); margin-top: var(--raum-4); margin-bottom: var(--raum-2); }
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext p + p { margin-top: var(--raum-3); }
.rechtstext ul { margin-top: var(--raum-2); display: grid; gap: var(--raum-2); }
.rechtstext ul li { display: grid; grid-template-columns: auto 1fr; gap: var(--raum-2); }
/* Marker als Haarlinie statt Punkt — passt zum Strichduktus der Seite. */
.rechtstext ul li::before { content: ''; width: var(--raum-3); height: var(--linie-staerke); background: var(--akzent); margin-top: 0.72em; }
.rechtstext dl { display: grid; gap: var(--raum-2); margin-top: var(--raum-3); }
@media (min-width: 40rem) { .rechtstext dl { grid-template-columns: 14rem 1fr; column-gap: var(--raum-4); } }
.rechtstext dt { font-family: var(--schrift-label); font-size: var(--gr-12); letter-spacing: var(--lauf-label); text-transform: uppercase; color: var(--text-2); padding-top: 0.25em; }


/* ==========================================================================
   11b. HAEUFIGE FRAGEN
   --------------------------------------------------------------------------
   Baut auf dem Leistungsakkordeon auf (.lst-). Unterschied: kein Icon
   und keine Kurzzeile, deshalb nur zwei Spalten.
   ========================================================================== */

.lst-faq .lst-schalter {
  grid-template-columns: 1fr auto;
  grid-template-areas: 'name zeichen';
}
@media (min-width: 48rem) {
  .lst-faq .lst-schalter {
    grid-template-columns: 1fr auto;
    grid-template-areas: 'name zeichen';
  }
  .lst-faq .lst-text, .lst-faq .faq-hinweis { margin-left: 0; }
}
.lst-faq .lst-name { font-size: var(--gr-20); }

/* Arbeitsanweisung an Fabio, direkt an der offenen Frage.
   Erscheint nur dort, wo die Antwort noch fehlt, und muss vor dem
   Livegang verschwunden sein. */
.faq-hinweis {
  margin-top: var(--raum-3);
  padding: var(--raum-2) var(--raum-3);
  border-left: 3px solid var(--fehler);
  background: var(--fehler-hauch);
  font-size: var(--gr-14);
  color: var(--text-2);
  max-width: var(--satzbreite);
}


/* ==========================================================================
   11c. BILDPLAETZE
   --------------------------------------------------------------------------
   Das Seitenverhaeltnis steht im CSS, nicht am Bild. Dadurch ist der
   Platz schon reserviert, bevor ein Foto geladen ist — es gibt keinen
   Layoutsprung, egal ob dort ein Bild oder ein Platzhalter steht.
   ========================================================================== */

.bild {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--papier-tief);
}
.bild img { width: 100%; height: 100%; object-fit: cover; }

.band-tief .bild { background: color-mix(in srgb, var(--papier) 7%, transparent); }

/* Zustand ohne Foto: sichtbar als Luecke, mit dem gewuenschten Motiv. */
.bild[data-zustand='leer'] {
  border: 1px dashed var(--linie);
  background: transparent;
}
.band-tief .bild[data-zustand='leer'] { border-color: var(--linie-auf-tiefe); }

.bild-leer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--raum-2);
  height: 100%;
  padding: var(--raum-3);
}
.bild-motiv {
  font-size: var(--gr-14);
  line-height: var(--zeile-dicht);
  color: var(--text-2);
  max-width: 34ch;
}
.band-tief .bild-motiv { color: var(--auf-tiefe-2); }

/* Dreierreihe auf der Startseite. Am Handy untereinander. */
.bilder-reihe { display: grid; gap: var(--raum-4); }
@media (min-width: 48rem) {
  .bilder-reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--steg); }
}
.bilder-reihe figure { margin: 0; }
.bilder-reihe figcaption {
  margin-top: var(--raum-2);
  font-size: var(--gr-14);
  font-weight: var(--fett-betont);
}


/* ==========================================================================
   11d. OBJEKTBEREICHE UND SCHNITTZEICHNUNG
   --------------------------------------------------------------------------
   Die Zeichnung traegt nur Nummern, die Beschriftung steht als Text
   daneben. Grund: Text im SVG skaliert schlecht, laesst sich nicht
   umbrechen und ist fuer Screenreader umstaendlich. So ist beides
   sauber — die Zeichnung bleibt ruhig, die Angaben bleiben lesbar.
   ========================================================================== */

.schnitt { position: relative; }
.schnitt svg { width: 100%; height: auto; }
@media (min-width: 48rem) { .schnitt { max-width: 26rem; } }

.bereiche { display: grid; gap: 0; }
.bereich {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--raum-3);
  align-items: start;
  padding-block: var(--raum-3);
  border-top: var(--linie-staerke) solid var(--linie);
}
.band-tief .bereich { border-top-color: var(--linie-auf-tiefe); }

.bereich-nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  background: var(--akzent);
  color: var(--papier);
  font-family: var(--schrift-display);
  font-size: var(--gr-12);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 0.1em;
}
.bereich-name { font-weight: var(--fett-betont); }
.bereich-text { color: var(--text-2); font-size: var(--gr-14); }
.band-tief .bereich-text { color: var(--auf-tiefe-2); }


/* ==========================================================================
   12. ANFRAGE-SHEET
   --------------------------------------------------------------------------
   Ein echtes <dialog>. Der Browser liefert damit Fokusfalle, Escape zum
   Schliessen, die Sperre des Hintergrunds und die richtige Rolle fuer
   Screenreader selbst mit. Ein nachgebautes Fenster aus <div> muesste
   das alles von Hand nachziehen und bekommt es erfahrungsgemaess nicht
   vollstaendig hin.

   Am Handy faehrt es von unten ein und nimmt fast die ganze Hoehe ein.
   Ab Tablet steht es als Flaeche in der Mitte.
   ========================================================================== */

.sheet {
  width: min(46rem, 100%);
  max-height: 92svh;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--papier);
  color: var(--tiefe);
  overflow: hidden;
}
.sheet::backdrop {
  background: color-mix(in srgb, #000 62%, transparent);
}

.sheet-innen {
  position: relative;
  max-height: 92svh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--raum-5) var(--raum-4) var(--raum-5);
}
@media (min-width: 48rem) {
  .sheet-innen { padding: var(--raum-6) var(--raum-6) var(--raum-6); }
}

.sheet-titel { font-size: var(--gr-34); margin-bottom: var(--raum-4); padding-right: var(--raum-6); }

.sheet-zu {
  position: absolute;
  top: var(--raum-3);
  right: var(--raum-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background: none;
  border: 0;
  border-radius: var(--radius);
  color: var(--text-2);
  cursor: pointer;
  transition: background-color var(--dauer-kurz) var(--kurve-aus),
              color var(--dauer-kurz) var(--kurve-aus);
}
.sheet-zu:hover { background: var(--papier-tief); color: var(--tiefe); }

/* --- Direkter Draht: Telefon, E-Mail, Zeiten ---------------------------- */
.sheet-direkt {
  display: grid;
  gap: var(--raum-4);
  padding-bottom: var(--raum-4);
  margin-bottom: var(--raum-5);
  border-bottom: var(--linie-staerke) solid var(--linie);
}
@media (min-width: 40rem) {
  .sheet-direkt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sheet-direkt > :last-child { grid-column: 1 / -1; }
}
.sheet-direkt .label { display: block; margin-bottom: var(--raum-1); }

.sheet-telefon {
  display: inline-block;
  font-family: var(--schrift-display);
  font-size: var(--gr-26);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--akzent-tief);
  text-decoration: none;
  border-bottom: 2px solid var(--akzent);
  padding-bottom: 2px;
}
.sheet-telefon:hover { color: var(--tiefe); }

/* Der Anfahrtsweg fuer die Tastatur: Beim Oeffnen bekommt die
   Ueberschrift den Fokus, nicht der Schliessen-Knopf. Sonst landet man
   auf "Schliessen" und muss sich erst zurueckarbeiten. */
.sheet-titel:focus { outline: none; }
.sheet-titel:focus-visible { outline: var(--fokus-kontur) solid var(--fokus); outline-offset: var(--fokus-abstand); }

/* --- Handyansicht --------------------------------------------------------
   Am Handy sitzt es am unteren Rand, nicht in der Mitte: dort ist der
   Daumen, und der Schliessen-Knopf bleibt oben erreichbar. Deshalb
   heisst es Sheet und nicht Fenster. */
@media (max-width: 47.99rem) {
  .sheet {
    width: 100%;
    max-width: 100%;
    max-height: 92svh;
    /* dialog wird sonst mittig ausgerichtet. */
    margin-block: auto 0;
    margin-inline: 0;
    border-radius: var(--radius) var(--radius) 0 0;
  }
  .sheet-innen { max-height: 92svh; padding: var(--raum-4) var(--raum-3) var(--raum-5); }
  .sheet-titel { font-size: var(--gr-26); margin-bottom: var(--raum-3); }
  .sheet-direkt { gap: var(--raum-3); padding-bottom: var(--raum-3); margin-bottom: var(--raum-4); }
  .sheet-zu { top: var(--raum-2); right: var(--raum-2); }
}


/* ==========================================================================
   13. HANDYANSICHT — Bauteile zusammenruecken
   --------------------------------------------------------------------------
   Die Startseite war am Handy ueber 10 000 Pixel hoch. Der groesste Teil
   davon war Abstand, nicht Inhalt. Hier wird nur enger gestellt und die
   Trefferflaechen vergroessert — nichts hinzugefuegt.
   ========================================================================== */

@media (max-width: 47.99rem) {

  /* Akkordeon: 32 Pixel oben und unten je Zeile ergaben bei sieben
     Leistungen allein 450 Pixel reinen Abstand. */
  .lst-schalter {
    padding-block: var(--raum-3);
    gap: var(--raum-2);
    grid-template-columns: auto 1fr auto;
    grid-template-areas: 'icon name zeichen';
  }
  .lst-name { font-size: var(--gr-16); }

  /* Die Kurzbeschreibung faellt am Handy weg. Sie wiederholt, was drei
     Zeilen tiefer im aufgeklappten Bereich ohnehin steht, kostete aber
     bei sieben Leistungen rund 140 Pixel. Ohne sie ist die Liste eine
     reine Namensliste und damit auf einen Blick zu ueberfliegen. */
  .lst-kurz { display: none; }
  .lst-zeile[data-offen='ja'] .lst-innen { padding-bottom: var(--raum-3); }

  /* Formulare: 32 Pixel zwischen den Feldern sind am Handy zu viel. */
  .formular { gap: var(--raum-3); }
  .mehrfach-optionen { gap: var(--raum-1); }
  .wahl { min-height: 2.75rem; align-items: center; }

  /* Abschnittskoepfe und Dreierreihen enger. */
  .abschnitt-kopf { margin-bottom: var(--raum-4); }
  .bilder-reihe { gap: var(--raum-3); }
  .ablauf-schritt { padding-block: var(--raum-3); }
  .ablauf-nr { font-size: var(--gr-34); margin-bottom: var(--raum-2); }
  .arg { padding-block: var(--raum-3); }
  .uebernahme-punkt { padding-block: var(--raum-2); }

  /* Der feste Knopf am unteren Rand deckt sonst den letzten Absatz zu. */
  .anrufen { min-height: 3rem; }

  /* Freistehende E-Mail- und Telefonverweise brauchen eine greifbare
     Flaeche. Verweise MITTEN IM SATZ bleiben unangetastet — sie zu
     vergroessern wuerde den Zeilenfall zerreissen, und dafuer gibt es
     die Ausnahme fuer eingebettete Verweise. */
  a[data-kontakt='email'],
  a[data-kontakt='telefon'] {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }
  .rechtstext a[data-kontakt='email'],
  .rechtstext a[data-kontakt='telefon'] { display: inline; min-height: 0; }

  /* Typografie am Handy noch eine Stufe zurueck. Die Werte gelten NUR
     hier — am Rechner bleibt der Maßstab wie er ist. */
  .hero-titel   { font-size: clamp(2rem, 9vw, 2.25rem); }
  .hero-vorspann { font-size: var(--gr-16); }
  h2            { font-size: var(--gr-20); }
  h3            { font-size: var(--gr-16); }
  .arg-titel    { font-size: var(--gr-16); }
  .sheet-titel  { font-size: var(--gr-20); }

  /* Kleinere Icons in der Leistungsliste, damit Name und Zeichen mehr
     Platz bekommen. */
  .lst-icon .icon { width: 1.25rem; height: 1.25rem; }
}