/* =========================================================================
   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;
  background:var(--ribbon); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
@supports not (background-clip:text){
  .schritt::before{ color:var(--accent); -webkit-text-fill-color:currentColor; }
}
.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); }
.feld input,.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 */
}

/* 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 #kontaktform:has(#k-anliegen option[value="umzugsreinigung"]:checked) [data-fuer]:not([data-fuer*="|umzugsreinigung|"]){ display:none; }
.no-js #kontaktform:has(#k-anliegen option[value="wohnungsreinigung"]:checked) [data-fuer]:not([data-fuer*="|wohnungsreinigung|"]){ display:none; }
.no-js #kontaktform:has(#k-anliegen option[value="unterhaltsreinigung"]:checked) [data-fuer]:not([data-fuer*="|unterhaltsreinigung|"]){ display:none; }
.no-js #kontaktform:has(#k-anliegen option[value="fensterreinigung"]:checked) [data-fuer]:not([data-fuer*="|fensterreinigung|"]){ display:none; }
.no-js #kontaktform:has(#k-anliegen option[value="teppichreinigung"]:checked) [data-fuer]:not([data-fuer*="|teppichreinigung|"]){ display:none; }
.no-js #kontaktform:has(#k-anliegen option[value="polsterreinigung"]:checked) [data-fuer]:not([data-fuer*="|polsterreinigung|"]){ display:none; }
.no-js #kontaktform:has(#k-anliegen option[value="baureinigung"]:checked) [data-fuer]:not([data-fuer*="|baureinigung|"]){ display:none; }
.no-js #kontaktform:has(#k-anliegen option[value="bueroreinigung"]:checked) [data-fuer]:not([data-fuer*="|bueroreinigung|"]){ display:none; }
.no-js #kontaktform:has(#k-anliegen option[value="hauswartung"]:checked) [data-fuer]:not([data-fuer*="|hauswartung|"]){ display:none; }
.no-js #kontaktform:has(#k-anliegen option[value="notfallreinigung"]:checked) [data-fuer]:not([data-fuer*="|notfallreinigung|"]){ display:none; }
.no-js #kontaktform:has(#k-anliegen option[value="entsorgung"]:checked) [data-fuer]:not([data-fuer*="|entsorgung|"]){ display:none; }
.no-js #kontaktform:has(#k-anliegen option[value="sonstiges"]:checked) [data-fuer]:not([data-fuer*="|sonstiges|"]){ display:none; }
/* END FORMULAR */