/* =========================================================================
   Bausteine der Unterseiten — Seitenkopf, Brotkrumen, Fliesstext, Formular
   Ergaenzt styles.css und components.css, ersetzt nichts davon.
   ========================================================================= */

/* ---------- 1 · Kompakter Seitenkopf ---------- */
.kopf-seite{
  position:relative; overflow:hidden;
  padding-block:clamp(118px,15vh,186px) clamp(40px,6vw,80px);
  background:var(--paper-2);
}
.kopf-seite .wrap{ position:relative; z-index:1; }
.kopf-seite h1{ max-width:19ch; margin-bottom:.32em; }
.kopf-seite .lede{ max-width:58ch; }

.kopf-seite--bild{ background:#0E0812; }
.kopf-bild{ position:absolute; inset:0; z-index:0; }
.kopf-bild img{ width:100%; height:100%; object-fit:cover; }
.kopf-bild::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(102deg, rgba(9,5,13,.93) 0%, rgba(9,5,13,.80) 44%, rgba(9,5,13,.46) 100%);
}
/* Auf dem Bildkopf ist der Grund dunkel — die Schrift wird fest hell gesetzt,
   damit sie in BEIDEN Farbmodi denselben, gepruefte Kontrast traegt. */
.kopf-seite--bild h1{ color:#FFFFFF; }
.kopf-seite--bild .lede{ color:#EDE6F2; }
.kopf-seite--bild .krume{ color:#CFC5D8; }
.kopf-seite--bild .krume [aria-current]{ color:#FFFFFF; }
.kopf-seite--bild .krume a:hover{ color:#FFC98A; }
.kopf-seite--bild .eyebrow{ color:#CFC5D8; }
/* 🔴 Der Umriss-Knopf erbt seine Schriftfarbe von --ink. Auf dem dunklen
   Bildkopf heisst das: im Dunkelmodus hell (richtig), im HELLMODUS dunkel auf
   dunkel — gemessen 1,10:1 auf /online-kurs/. Eine Pruefung in nur einem
   Farbmodus haette das nie gefunden. Hier wird die Farbe fest gesetzt. */
.kopf-seite--bild .btn--ghost{ --btn-fg:#FFFFFF; border-color:rgba(255,255,255,.45); }
.kopf-seite--bild .btn--ghost:hover{ border-color:#FFFFFF; color:#FFFFFF; }

/* ---------- 2 · Brotkrumen ---------- */
.krume{
  display:flex; flex-wrap:wrap; gap:.45em; align-items:center;
  font-size:.82rem; color:var(--ink-3); margin:0 0 1.2rem; padding:0; list-style:none;
}
/* 🔴 44px Tappflaeche auch in der Brotkrume. Gemessen bei 360px: der
   "Home"-Link war 36x22 — auf jeder der zehn Unterseiten derselbe Fehler. */
.krume a{ text-decoration:none; color:inherit;
          display:inline-flex; align-items:center; justify-content:center;
          min-height:44px; min-width:44px; }
.krume a:hover{ color:var(--accent); text-decoration:underline; }
.krume li{ display:flex; align-items:center; gap:.45em; min-height:44px; }
.krume li + li::before{ content:"\203A"; opacity:.55; }
.krume [aria-current]{ font-weight:700; color:var(--ink-2); }

/* ---------- 3 · Fliesstext (Recht, lange Texte) ---------- */
.prosa{ max-width:74ch; }
.prosa h2{ font-size:clamp(1.4rem,2.6vw,2rem); margin-top:2.3em; }
.prosa h2:first-child{ margin-top:0; }
.prosa h3{ font-size:1.1rem; margin-top:1.8em; }
.prosa ul,.prosa ol{ padding-left:1.25em; margin:0 0 1.3em; }
.prosa li{ margin-bottom:.5em; color:var(--ink-2); }
/* Verweise im Fliesstext stehen mitten im Satz — 44px wuerde ihn zerreissen.
   Sie werden auf ueber 24px gebracht (WCAG 2.5.8 AA fuer Ziele in einem
   Textblock). Gemessen vorher im Impressum: E-Mail 242x21, Telefon 120x21. */
/* 🔴 `:not(.btn)` ist Pflicht. Ohne das schlaegt `.prosa a` (Spezifitaet 0,2,0)
   die Regel `.btn` (0,1,0) und faerbt die Knopfschrift auf --accent — also auf
   den Grund des Knopfes selbst. Gemessen auf beiden Beitragsseiten: 1,00:1,
   der Text war unsichtbar, in BEIDEN Farbmodi. */
.prosa a:not(.btn){ color:var(--accent); text-underline-offset:3px;
          display:inline-block; padding-block:.16em; }
.prosa strong{ color:var(--ink); }
.prosa table{ width:100%; border-collapse:collapse; margin:0; font-size:.94rem; }
.prosa th,.prosa td{ text-align:left; padding:.7em .8em;
                     border-bottom:1px solid var(--line); vertical-align:top; }
.prosa th{ font-weight:700; color:var(--ink); }

/* 🔴 Breite Tabellen rollen in EIGENEM Kasten. Ohne das schiebt eine
   Preistabelle die ganze Seite seitwaerts, und auf dem Desktop sieht das
   niemand. Der Kasten ist per Tastatur erreichbar (tabindex). */
.tabelle-rollt{ overflow-x:auto; margin:0 0 1.5em; -webkit-overflow-scrolling:touch; }
.tabelle-rollt table{ min-width:32rem; }

.inhalt-liste{
  list-style:none; margin:0 0 2.5rem; padding:20px 22px;
  border:1px solid var(--line); border-radius:var(--r-l);
  background:var(--paper-2); display:grid; gap:.1rem;
}
.inhalt-liste a{ display:inline-flex; align-items:center; min-height:44px;
                 font-size:.94rem; text-decoration:none; color:var(--ink-2); }
.inhalt-liste a:hover{ color:var(--accent); }

/* ---------- 4 · Merkmale ---------- */
.merkmale{
  display:grid; gap:clamp(16px,2.2vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
}
.merkmal{
  padding:clamp(20px,2.4vw,28px); border:1px solid var(--line);
  border-radius:var(--r-l); background:var(--paper); position:relative; overflow:hidden;
}
.merkmal::before{ content:""; position:absolute; inset:0 0 auto; height:3px; background:var(--ribbon); }
.merkmal h3{ font-size:1.06rem; margin-bottom:.45em; }
.merkmal p{ font-size:.94rem; margin:0; }

/* ---------- 5 · Ablauf in Schritten ---------- */
.schritte{ list-style:none; margin:0; padding:0; counter-reset:s;
           display:grid; gap:clamp(16px,2.2vw,24px); }
@media (min-width:820px){ .schritte{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.schritt{
  counter-increment:s; padding:clamp(22px,2.6vw,30px);
  border:1px solid var(--line); border-radius:var(--r-l); background:var(--paper);
}
.schritt::before{
  content:counter(s,decimal-leading-zero);
  display:block; font-size:.8rem; font-weight:800; letter-spacing:.14em;
  margin-bottom:.85rem;
  /* 🔴 Hier stand bis zum 10.09.2026 derselbe Verlauf wie in `.grad`.
     Diese Ziffer ist aber nur 12,8 px gross und braucht damit 4,5:1, nicht 3:1 —
     und so viel traegt der Verlauf im schwaechsten Punkt weder hell noch dunkel
     (gemessen 4,43:1 hell, 3,72:1 dunkel). Deshalb einfarbig:
     hell #195A91 = 6,47:1, dunkel #6BA6F2 = 5,25:1, je gegen --paper-2. */
  color:var(--nummer);
}
.schritt h3{ font-size:1.06rem; }
.schritt p{ font-size:.94rem; margin:0; }

/* ---------- 6 · Aufklapper ---------- */
.faq{ display:grid; gap:10px; max-width:74ch; }
.faq details{ border:1px solid var(--line); border-radius:var(--r-m);
              background:var(--paper); overflow:hidden; }
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:1em;
  min-height:56px; padding:.9em 1.2em; cursor:pointer; font-weight:700;
  list-style:none; color:var(--ink);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; flex:none; width:11px; height:11px; margin-right:3px;
  border-right:2.4px solid currentColor; border-bottom:2.4px solid currentColor;
  transform:rotate(45deg) translateY(-3px); transition:transform .3s;
}
.faq details[open] summary::after{ transform:rotate(-135deg) translateY(1px); }
.faq details[open] summary{ color:var(--accent); }
.faq .faq-text{ padding:0 1.2em 1.2em; }
.faq .faq-text p:last-child{ margin-bottom:0; }
@media (prefers-reduced-motion: reduce){ .faq summary::after{ transition:none; } }

/* ---------- 7 · Formular ---------- */
.formular{ display:grid; gap:16px; }
@media (min-width:680px){
  .formular .zwei{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .formular .zwei > *{ min-width:0; }
}
.feld{ display:grid; gap:.4rem; }
.feld label{ font-size:.88rem; font-weight:700; color:var(--ink); }
/* 🔴 `:not([type="radio"]):not([type="checkbox"])` ist kein Schmuck, sondern die
   Ursache des Befunds vom 22.09.2026 (Screenshot Jairo, iPhone): Ein
   `<fieldset class="feld voll wahl">` traegt BEIDE Klassen, also griff diese Regel
   fuer Textfelder auch auf die Auswahlknoepfe darin. `.wahl .kachel input` setzt
   zwar `height:18px` — aber `min-height` schlaegt `height`, und der Kasten des
   Radios mass gemessen 18 x 48 statt 18 x 18. Chrome zeichnet darin einen kleinen
   Kreis und verraet nichts; iOS Safari skaliert das Bedienelement auf die Kastenhoehe
   und schob einen 48-px-Kreis ueber die Beschriftung. Ein Chip wurde 62,6 px hoch
   statt 44. Betroffen waren 206 von 230 `.feld input` auf /kontakt/.
   Die uebrigen 24 — Text, Tel, Mail, Datum, Zahl, Datei — behalten ihre 48 px. */
.feld input:not([type="radio"]):not([type="checkbox"]),.feld select,.feld textarea{
  width:100%; min-height:48px; padding:.75em 1em; font:inherit;
  border:1px solid var(--line); border-radius:var(--r-m);
  background:var(--paper); color:var(--ink);
  /* 🔴 min-width:0 und max-width:100%. Ein <select> mit langen Optionen
     ("CHF 2'500.– bis CHF 5'000.–") blaeht sonst seine Rasterspalte auf und
     erzeugt echtes Seitenscrollen — gemessen bei 360px, nicht bei 375px. */
  min-width:0; max-width:100%;
}
.feld textarea{ min-height:130px; resize:vertical; }
.feld input:focus,.feld select:focus,.feld textarea:focus{ border-color:var(--accent); }
.feld .hinweis{ font-size:.82rem; color:var(--ink-3); }
.zustimmung{ display:flex; gap:.7em; align-items:flex-start; font-size:.9rem; color:var(--ink-2); }
.zustimmung input{ width:20px; height:20px; margin-top:.15em; flex:none; accent-color:var(--accent); }
/* Verweis MITTEN im Satz: 44px wuerde den Satz auseinanderreissen. Er wird auf
   ueber 24px gebracht — die Schwelle aus WCAG 2.5.8 (AA) fuer Ziele, die in
   einem Textblock liegen. Gemessen vorher: 145x19. */
.zustimmung a{ display:inline-block; padding-block:.32em; }
.pflicht{ color:var(--accent); }
/* Honigtopf — vom Bildschirm weg, aber nicht display:none (sonst fuellen ihn
   Automaten nicht, und genau darauf beruht die Erkennung). */
/* Der Honigtopf meldete sich selbst als Inhaltsueberlauf (37>1), weil das
   Eingabefeld darin seine Normalbreite behielt. Es wird mitgeschrumpft —
   ein echter Riegel ist besser als eine Ausnahme in der Messung. */
.honig{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.honig *{ width:1px; min-width:0; max-width:1px; padding:0; border:0; margin:0;
           font-size:0; line-height:0; }
.formular-danke{ margin:0; font-weight:700; color:var(--accent); }

/* ---------- 8 · Kontaktwege ---------- */
.kontaktwege{ display:grid; gap:12px; }
.weg{
  display:flex; align-items:center; gap:14px; padding:14px 18px; text-decoration:none;
  border:1px solid var(--line); border-radius:var(--r-m); background:var(--paper);
  min-height:60px;
  transition:border-color .3s, transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
}
.weg:hover{ border-color:transparent; box-shadow:var(--shadow-m); transform:translateX(4px); }
.weg i{ flex:none; display:grid; place-items:center; width:44px; height:44px;
        border-radius:13px; background:var(--ribbon); color:#fff; }
.weg b{ display:block; font-size:.98rem; }
.weg span{ display:block; font-size:.86rem; color:var(--ink-3); }
@media (prefers-reduced-motion: reduce){ .weg:hover{ transform:none; } }

/* ---------- 9 · Bald verfuegbar ---------- */
.bald{ text-align:center; max-width:58ch; margin-inline:auto; }
.bald .marke{
  display:inline-flex; align-items:center; gap:.6em; margin-bottom:1.3rem;
  padding:.5em 1.1em; border-radius:999px; font-size:.76rem; font-weight:800;
  letter-spacing:.13em; text-transform:uppercase; color:#fff; background:#8E0C43;
}
.bald .lede{ margin-inline:auto; }
.bald .hero-cta{ justify-content:center; }

/* ---------- 10 · Zitat ---------- */
.zitat{
  margin:0; padding:clamp(24px,3vw,40px); border-radius:var(--r-xl);
  background:var(--paper-2); border:1px solid var(--line);
}
.zitat p{ font-size:clamp(1.08rem,1.7vw,1.38rem); line-height:1.5;
          color:var(--ink); font-weight:500; margin-bottom:.8em; }
.zitat footer{ font-size:.88rem; color:var(--ink-3); font-weight:700; }

/* ---------- 11 · Hinweiskasten ---------- */
.hinweis-kasten{
  padding:16px 20px; border-radius:var(--r-m);
  background:var(--paper-2); border:1px solid var(--line);
  font-size:.92rem; color:var(--ink-2);
}
.hinweis-kasten strong{ color:var(--ink); }
.kopf-seite--bild + .section .hinweis-kasten{ background:var(--paper-2); }

/* ---------- 12 · Beitraege ---------- */
.beitrag-meta{
  display:flex; flex-wrap:wrap; gap:.5em 1.1em; align-items:center;
  font-size:.84rem; color:var(--ink-3); margin:0 0 1.4rem;
}
.beitrag-meta .kat{
  display:inline-flex; align-items:center; min-height:28px; padding:.24em .9em;
  border-radius:999px; font-size:.72rem; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; color:#fff; background:#8E0C43;
}
.beitrag-meta time{ font-variant-numeric:tabular-nums; }

/* Das Leitzitat am Anfang eines Beitrags */
.leitzitat{
  margin:0 0 2.6rem; padding:clamp(22px,3vw,36px) clamp(24px,3.4vw,44px);
  border-radius:var(--r-xl); background:var(--paper-2);
  border-left:4px solid transparent;
  background-image:linear-gradient(var(--paper-2),var(--paper-2)), var(--ribbon);
  background-origin:border-box; background-clip:padding-box, border-box;
}
.leitzitat p{ font-size:clamp(1.1rem,1.8vw,1.4rem); line-height:1.45;
              color:var(--ink); font-style:italic; margin:0 0 .6em; }
.leitzitat footer{ font-size:.88rem; font-weight:700; color:var(--ink-3); font-style:normal; }

/* Trenner zwischen Artikel und Handlungsaufforderung */
.prosa hr{
  border:0; height:2px; margin:2.8rem 0; border-radius:2px;
  background:var(--ribbon); opacity:.45;
}

/* Der Abschluss-Aufruf im Beitrag */
.beitrag-cta{
  padding:clamp(24px,3vw,38px); border-radius:var(--r-xl);
  background:var(--paper-2); border:1px solid var(--line);
}
.beitrag-cta h3{ margin-top:0; }
.beitrag-cta p:last-child{ margin-bottom:0; }

/* Weiterlesen */
.weiterlesen{ display:grid; gap:clamp(18px,2.4vw,28px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); }

/* ---------- 13 · Jeva: Preiskarten ---------- */
.preise{ display:grid; gap:clamp(16px,2.2vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); align-items:start; }
@media (min-width:900px){
  .preise > :nth-child(2){ margin-block-start:clamp(18px,2.6vw,40px); }
  .preise > :nth-child(3){ margin-block-start:clamp(6px,1vw,16px); }
}
.preis{ position:relative; padding:clamp(22px,2.6vw,32px); border:1px solid var(--line);
  border-radius:var(--r-l); background:var(--paper); display:flex; flex-direction:column; gap:.3rem; }
.preis--top{ box-shadow:var(--shadow-l); border:2px solid transparent;
  background:linear-gradient(var(--paper),var(--paper)) padding-box, var(--ribbon) border-box; }
.preis .tag{ position:absolute; top:-12px; left:18px; padding:.3em .9em; border-radius:999px;
  font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:var(--blue-deep); }
.preis h3{ font-size:1.05rem; margin:0; }
.preis .ab{ font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.preis .betrag{ font-family:"Work Sans",sans-serif; font-size:clamp(1.9rem,3vw,2.5rem); font-weight:800;
  letter-spacing:-.03em; line-height:1; color:var(--ink); }
.preis .zusatz{ font-size:.86rem; color:var(--ink-3); margin:0; }
.preis .checks{ margin:1rem 0 0; }
.preis .btn{ margin-top:1.2rem; align-self:flex-start; }
.preis-zeilen{ display:grid; border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden; background:var(--paper); }
/* `flex-wrap` und `min-width:0`: Beschriftung und Betrag stehen nebeneinander, solange
   sie passen — sonst umbricht der Betrag, statt aus dem Kasten zu laufen. Gemessen am
   05.09.2026 auf /preise/ bei 360 px: .preis-zeilen 299>263 («Bis 120 m²» neben
   «ab CHF 290.–/Mt», und `white-space:nowrap` auf dem Betrag). */
.preis-zeile{ display:flex; justify-content:space-between; gap:.3em 1em; flex-wrap:wrap; padding:.95em 1.3em; border-top:1px solid var(--line); align-items:baseline; }
.preis-zeile > b, .preis-zeile > span{ min-width:0; }
.preis-zeile:first-child{ border-top:0; }
.preis-zeile b{ font-weight:600; color:var(--ink); }
.preis-zeile span{ font-family:"Work Sans",sans-serif; font-weight:800; white-space:nowrap; color:var(--accent); text-align:right; }
.preis-zeile small{ display:block; font-weight:400; font-size:.8rem; color:var(--ink-3); white-space:normal; }

/* ---------- 14 · Stat-Reihe ---------- */
.stats{ display:grid; gap:clamp(14px,2vw,22px); grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)); }
.stat{ padding:clamp(18px,2.2vw,26px); border-radius:var(--r-l); background:var(--paper-2); border:1px solid var(--line); }
.stat b{ display:block; font-family:"Work Sans",sans-serif; font-size:clamp(1.7rem,3vw,2.4rem); font-weight:800; letter-spacing:-.03em; line-height:1; color:var(--accent); }
.stat span{ display:block; margin-top:.4rem; font-size:.86rem; color:var(--ink-2); }

/* ---------- 15 · Vorher/Nachher (Broken Grid, Hochformate) ---------- */
.vn{ display:grid; gap:clamp(14px,2vw,24px); grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:900px){ .vn{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .vn > :nth-child(2){ margin-block-start:clamp(22px,3vw,48px); }
  .vn > :nth-child(4){ margin-block-start:clamp(22px,3vw,48px); } }
.vn figure{ margin:0; position:relative; border-radius:var(--r-l); overflow:hidden; aspect-ratio:3/4; box-shadow:var(--shadow-m); background:var(--paper-2); }
.vn img{ width:100%; height:100%; object-fit:cover; }
.vn figcaption{ position:absolute; top:12px; left:12px; padding:.35em .9em; border-radius:999px;
  font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:rgba(10,20,35,.82); }
.vn .nach figcaption{ background:var(--blue-deep); }

/* ---------- 16 · Zitatkarten ---------- */
.zitate{ display:grid; gap:clamp(16px,2.2vw,26px); grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); align-items:start; }
@media (min-width:900px){ .zitate > :nth-child(2){ margin-block-start:clamp(20px,3vw,44px); } .zitate > :nth-child(5){ margin-block-start:clamp(20px,3vw,44px); } }
.zitate .zitat p{ font-size:1.02rem; }
.zitate .zitat .datum{ font-size:.8rem; color:var(--ink-3); font-weight:400; display:block; margin-top:.2rem; }
.sterne{ display:inline-flex; gap:2px; color:#C97A0A; margin-bottom:.6rem; }
.sterne svg{ width:16px; height:16px; }

/* ---------- 17 · Ikonen-Merkmale ---------- */
.merkmal .ico{ display:grid; place-items:center; width:46px; height:46px; border-radius:14px;
  background:var(--ribbon); color:#fff; margin-bottom:.9rem; }
.merkmal .ico svg{ width:22px; height:22px; }

/* ---------- 18 · Galerie (Kundenprojekt, versetzt) ---------- */
.galerie{ display:grid; gap:clamp(12px,1.8vw,22px); grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:800px){ .galerie{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .galerie > :nth-child(even){ margin-block-start:clamp(18px,3vw,44px); } }
.galerie figure{ margin:0; border-radius:var(--r-l); overflow:hidden; aspect-ratio:4/3; box-shadow:var(--shadow-m); }
.galerie img{ width:100%; height:100%; object-fit:cover; }

/* Aufklapper-Liste (Datenschutz) */
/* 🔴 `1fr` ist `minmax(auto,1fr)` — die Spalte schrumpft nie unter ihre Inhaltsbreite,
   und der Inhalt laeuft aus dem Kasten, ohne dass eine Ueberlaufzahl steigt (`clip`
   schneidet lautlos ab). Gemessen am 05.09.2026 auf /datenschutz/ bei 360 px:
   dl 329>270 und 284>270. Darum `minmax(0,1fr)` — und unter 34rem einspaltig,
   weil «Speicherdauer» plus Wert nebeneinander dort ohnehin nicht lesbar ist. */
.faq .faq-text dl{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:.3em 1em; margin:.6em 0 0; font-size:.92rem; }
@media (max-width:34rem){ .faq .faq-text dl{ grid-template-columns:minmax(0,1fr); gap:.1em 0; }
  .faq .faq-text dd{ margin-bottom:.5em; } }
.faq .faq-text dt{ font-weight:700; color:var(--ink); }
.faq .faq-text dd{ margin:0; color:var(--ink-2); }
.faq summary .kenn{ margin-left:auto; margin-right:.6em; font-size:.66rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; padding:.25em .7em; border-radius:999px; background:var(--paper-2); color:var(--ink-3); flex:none; }

/* ============================================================
   OFFERTFORMULAR — Gruppen, Haken, Dateifeld
   ============================================================
   🔴 Die Gruppen sind standardmaessig SICHTBAR. Erst app.js blendet aus, was
   nicht zum gewaehlten Anliegen passt. Andersherum waere das Formular ohne
   JavaScript leer — und ein leeres Formular sieht aus wie ein kaputtes. */
.gruppe{
  border:1px solid var(--line); border-radius:var(--r-l);
  padding:clamp(16px,2.2vw,22px); margin:0; min-width:0;
  display:grid; gap:16px; background:var(--paper);
}
.gruppe > legend{
  font-family:"Work Sans",sans-serif; font-weight:800; font-size:.98rem;
  color:var(--ink); padding:0 .5em; margin-left:-.5em;
}
.gruppe[hidden]{ display:none; }

.hinweis-inline{ font-weight:400; font-size:.82rem; color:var(--ink-3); }

/* Auswahlhaken für Zusatzleistungen */
.haken{ list-style:none; margin:0; padding:0; display:grid; gap:8px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); }
.haken label{
  display:flex; gap:.7em; align-items:flex-start; min-width:0;
  padding:.7em .85em; border:1px solid var(--line); border-radius:var(--r-m);
  cursor:pointer; font-size:.93rem; color:var(--ink-2);
  min-height:44px; transition:border-color .2s, background .2s;
}
.haken label:hover{ border-color:var(--accent); }
.haken input{ width:20px; height:20px; margin-top:.1em; flex:none; accent-color:var(--accent); }
.haken span{ min-width:0; overflow-wrap:break-word; }
.haken em{ display:block; font-style:normal; font-size:.8rem; color:var(--ink-3); }
.haken label:has(input:checked){ border-color:var(--accent); background:var(--paper-2); }
.haken label:focus-within{ outline:2px solid var(--lime); outline-offset:2px; }

/* Dateifeld: der Systemknopf ist auf schmalen Geräten der haeufigste Ueberlaeufer. */
.feld input[type="file"]{
  width:100%; max-width:100%; min-width:0; box-sizing:border-box;
  padding:.7em .8em; font-size:.9rem;
  border:1px dashed var(--line); border-radius:var(--r-m); background:var(--paper-2);
}
.feld input[type="file"]::file-selector-button{
  margin-right:.8em; padding:.5em .9em; border:0; border-radius:999px;
  background:var(--accent); color:#FFFFFF; font:inherit; font-weight:700; cursor:pointer;
  max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.feld input[type="file"]:focus{ border-color:var(--accent); }

.formular-fehler{ margin:0; font-weight:700; color:#B3261E; }

/* ============================================================
   TAPPFLAECHEN von Verweisen IM FLIESSTEXT
   ============================================================
   Gemessen am 05.09.2026 bei 360 und 375 px: 15 Verweise unter 44 px Hoehe —
   Telefon- und Mailverweise im Text, «Datenschutzerklärung», «Preisseite».
   Ein Verweis im Text ist ein INLINE-Element: senkrechtes Innenabstand
   vergroessert seine Trefferflaeche, ohne die Zeilenhoehe zu veraendern. Das
   Layout bleibt also exakt gleich, nur der Finger trifft.
   🔴 Knoepfe sind ausgenommen — die haben ihre Groesse schon und wuerden
   sonst auseinandergezogen. */
.prosa a:not(.btn),
.zustimmung a,
.faq-text a:not(.btn),
.feld .hinweis a,
main p > a:not(.btn):not(.card-go),
main li > a:not(.btn):not(.card-go),
main dd > a:not(.btn):not(.card-go),
main dd a:not(.btn):not(.card-go){
  padding-block:14px;          /* auch bei 18px Textzeile: 18 + 2x14 = 46 px */
}

/* ============================================================
   OFFERTFORMULAR MIT AMPEL (Auftrag Jairo, 14.09.2026)
   ============================================================
   Zuerst klicken, dann erst die passenden Fragen. Ohne JavaScript stehen alle
   Schritte untereinander. Erst app.js setzt .ampel-an und zeigt einen Schritt
   nach dem anderen; faellt das Skript aus, bleibt das Formular vollstaendig.
   🔴 Die Farbe ist nie die einzige Auskunft (WCAG 1.4.1): neben jedem Punkt
   steht ein Wort, und fuer Screenreader steht der Zustand im Knopftext.
   🔴 Gelb auf hellem Grund traegt als Flaeche nur rund 2:1. Der Punkt bekommt
   deshalb einen dunklen Rand, der die 3:1 fuer Grafik haelt. */
:root{
  --ampel-rot:#C62828; --ampel-rot-text:#B3261E;
  --ampel-gelb:#F2B705; --ampel-gelb-rand:#946C00;
  --ampel-gruen:#2E7D32; --ampel-aus:rgba(23,23,23,.52);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ampel-rot:#FF7A70; --ampel-rot-text:#FF8A80;
    --ampel-gelb:#F5C542; --ampel-gelb-rand:#F5C542;
    --ampel-gruen:#6CCB5F; --ampel-aus:rgba(243,245,248,.5);
  }
}
:root[data-theme="dark"]{
  --ampel-rot:#FF7A70; --ampel-rot-text:#FF8A80;
  --ampel-gelb:#F5C542; --ampel-gelb-rand:#F5C542;
  --ampel-gruen:#6CCB5F; --ampel-aus:rgba(243,245,248,.5);
}

/* Die Breite des Formulars entscheidet, nicht die des Fensters: im Split-Layout
   bekommt es nur einen Teil davon (siehe Kommentar zu auto-fit in bau.py). */
.formular{ container-type:inline-size; }
.formular-kurz{ max-width:780px; }

/* --- Die Leiste --- */
.ampel{ list-style:none; margin:0; padding:0; display:grid; gap:6px;
  grid-template-columns:repeat(var(--stufen,4),minmax(0,1fr)); }
.ampel li{ min-width:0; }
.ampel button{
  width:100%; min-height:56px; display:grid; justify-items:center; align-content:start; gap:4px;
  padding:7px 4px; border:1px solid var(--line); border-radius:var(--r-m);
  background:var(--paper); color:var(--ink-2); font:inherit; font-size:.78rem; font-weight:700;
  line-height:1.2; text-align:center; cursor:pointer; overflow-wrap:anywhere;
}
.ampel button[aria-current="step"]{ border-color:var(--accent); color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--accent); }
.ampel button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.ampel-punkt, .ampel-legende i{ display:block; width:14px; height:14px; border-radius:50%;
  border:2px solid var(--ampel-aus); background:transparent; flex:none; }
[data-ampel="rot"] > .ampel-punkt, .ampel-legende .l-rot{ background:var(--ampel-rot); border-color:var(--ampel-rot); }
[data-ampel="gelb"] > .ampel-punkt, .ampel-legende .l-gelb{ background:var(--ampel-gelb); border-color:var(--ampel-gelb-rand); }
[data-ampel="gruen"] > .ampel-punkt, .ampel-legende .l-gruen{ background:var(--ampel-gruen); border-color:var(--ampel-gruen); }
.ampel-wort{ display:none; font-weight:400; font-size:.72rem; color:var(--ink-3); }
@container (min-width:520px){ .ampel-wort{ display:block; } }
.ampel-legende{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap;
  gap:.3em 1.1em; font-size:.78rem; color:var(--ink-3); }
.ampel-legende li{ display:flex; align-items:center; gap:.45em; }
.ampel-legende i{ width:11px; height:11px; }

/* --- Die Schritte --- */
.stufe{ display:grid; gap:16px; min-width:0; }
.stufe-titel{ margin:0; font-size:1.05rem; }
.stufe-titel:focus{ outline:none; }
.stufe-titel:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.ampel-an .stufe:not(.ist-offen){ display:none; }
.formular:not(.ampel-an) .stufe + .stufe{ border-top:1px solid var(--line); padding-top:22px; }
.stufe-nav{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; }
.stufe-nav [hidden], .ampel-an [data-nur-ohne-js]{ display:none !important; }
.ampel-meldung{ margin:0; flex-basis:100%; font-size:.9rem; font-weight:700; color:var(--ink); }
.ampel-meldung:empty{ display:none; }
.ampel-meldung.ist-rot{ color:var(--ampel-rot-text); }

/* --- Klickflaechen ---
   🔴 `.wahl .kachel` und `.wahl .chip`, nicht die Klasse allein: `.feld label`
   (0,1,1) schluege sonst `.chip` (0,1,0) und machte jede Option fett. */
.wahl{ border:0; margin:0; padding:0; min-width:0; display:grid; gap:.55rem; }
.wahl > legend{ padding:0; margin:0 0 .55rem; font-size:.88rem; font-weight:700; color:var(--ink); }
.kacheln{ display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr)); }
.wahl .kachel{
  position:relative; display:grid; gap:.15rem; align-content:start; min-width:0; min-height:56px;
  padding:.8em 1em .8em 2.7em; border:1px solid var(--line); border-radius:var(--r-m);
  background:var(--paper); color:var(--ink); font-size:1rem; font-weight:400; cursor:pointer;
  transition:border-color .2s, background-color .2s;
}
/* Netz zur Ursache oben: `min-height:0` haelt den Kasten auch dann bei 18 px, wenn
   je wieder eine Regel fuer Textfelder hierher durchschlaegt. `height` allein
   genuegt dafuer nicht — `min-height` gewinnt immer. */
.wahl .kachel input{ position:absolute; left:1em; top:1.05em; width:18px; height:18px;
  min-height:0; min-width:0; padding:0; margin:0; accent-color:var(--accent); }
.wahl .kachel b{ font-size:.96rem; overflow-wrap:anywhere; }
.wahl .kachel span{ font-size:.82rem; color:var(--ink-3); overflow-wrap:anywhere; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.wahl .chip{
  display:inline-flex; align-items:center; gap:.5em; min-height:44px; max-width:100%; min-width:0;
  padding:.45em .95em; border:1px solid var(--line); border-radius:999px; background:var(--paper);
  color:var(--ink-2); font-size:.92rem; font-weight:400; line-height:1.25; cursor:pointer;
  transition:border-color .2s, background-color .2s;
}
.wahl .chip span{ min-width:0; overflow-wrap:anywhere; }
.wahl .chip em{ font-style:normal; font-size:.8rem; color:var(--ink-3); }
.wahl .chip input{ width:18px; height:18px; min-height:0; min-width:0; padding:0;
  margin:0; flex:none; accent-color:var(--accent); }
.wahl .kachel:hover, .wahl .chip:hover{ border-color:var(--accent); }
.wahl .kachel:has(input:checked), .wahl .chip:has(input:checked){
  border-color:var(--accent); color:var(--ink);
  background:color-mix(in srgb,var(--accent) 8%,var(--paper)); box-shadow:inset 0 0 0 1px var(--accent); }
.wahl .kachel:has(input:focus-visible), .wahl .chip:has(input:focus-visible){
  outline:2px solid var(--accent); outline-offset:2px; }

/* --- Was fehlt, und der Weg zum Telefon --- */
.feld.ist-fehlend > label, .feld.ist-fehlend > legend, .zustimmung.ist-fehlend{ color:var(--ampel-rot-text); }
.feld.ist-fehlend > input, .feld.ist-fehlend > textarea{ border-color:var(--ampel-rot); }
.ampel-sofort{ margin:0; padding:.8em 1em; border:1px solid var(--ampel-rot); border-radius:var(--r-m);
  background:var(--paper); color:var(--ink); font-weight:700; }
.ampel-sofort a{ white-space:nowrap; }

/* Kopf, Navigation, Abschluss.
   🔴 `display` aus einer Autorenregel schlaegt das `hidden` des Browsers. Ohne die
   Zeile [hidden] blieben Schritte nach dem Absenden stehen, weil .stufe grid ist. */
.ampel-kopf{ display:grid; gap:10px; scroll-margin-top:96px; }
.stufe[hidden], .ampel-kopf[hidden], .stufe-nav[hidden]{ display:none; }
.stufe-nav [data-weiter]{ margin-left:auto; }

/* BEGIN FORMULAR */
/* ERZEUGT von bau.py aus formular.json. Nicht von Hand aendern. */
.formular .raster{ display:grid; gap:16px; align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); }
.formular .raster > *{ min-width:0; }
.formular .raster > .voll{ grid-column:1 / -1; }
.formular .feld[hidden], .formular .gruppe[hidden]{ display:none; }
.formular-lage:empty{ display:none; }
.formular-lage{ margin:.2rem 0 0; font-size:.85rem; color:var(--ink-3); }
.no-js .formular:has(input[name="anliegen"][value="umzugsreinigung"]:checked) [data-fuer]:not([data-fuer*="|umzugsreinigung|"]){ display:none; }
.no-js .formular:has(input[name="anliegen"][value="wohnungsreinigung"]:checked) [data-fuer]:not([data-fuer*="|wohnungsreinigung|"]){ display:none; }
.no-js .formular:has(input[name="anliegen"][value="unterhaltsreinigung"]:checked) [data-fuer]:not([data-fuer*="|unterhaltsreinigung|"]){ display:none; }
.no-js .formular:has(input[name="anliegen"][value="fensterreinigung"]:checked) [data-fuer]:not([data-fuer*="|fensterreinigung|"]){ display:none; }
.no-js .formular:has(input[name="anliegen"][value="teppichreinigung"]:checked) [data-fuer]:not([data-fuer*="|teppichreinigung|"]){ display:none; }
.no-js .formular:has(input[name="anliegen"][value="polsterreinigung"]:checked) [data-fuer]:not([data-fuer*="|polsterreinigung|"]){ display:none; }
.no-js .formular:has(input[name="anliegen"][value="baureinigung"]:checked) [data-fuer]:not([data-fuer*="|baureinigung|"]){ display:none; }
.no-js .formular:has(input[name="anliegen"][value="bueroreinigung"]:checked) [data-fuer]:not([data-fuer*="|bueroreinigung|"]){ display:none; }
.no-js .formular:has(input[name="anliegen"][value="hauswartung"]:checked) [data-fuer]:not([data-fuer*="|hauswartung|"]){ display:none; }
.no-js .formular:has(input[name="anliegen"][value="notfallreinigung"]:checked) [data-fuer]:not([data-fuer*="|notfallreinigung|"]){ display:none; }
.no-js .formular:has(input[name="anliegen"][value="entsorgung"]:checked) [data-fuer]:not([data-fuer*="|entsorgung|"]){ display:none; }
.no-js .formular:has(input[name="anliegen"][value="sonstiges"]:checked) [data-fuer]:not([data-fuer*="|sonstiges|"]){ display:none; }
/* END FORMULAR */