/* Baukasten – Ergänzungen für echte Bricks-Seiten (Seitentyp «Baukasten», 31.10.2026).
   Lädt nach baukasten.css. Gleicht Bricks-Ausgabe an (SVG-Elemente, Bild-Elemente, Text-Elemente), dazu Handy-Menü und Handy-Leiste. */

/* Grundlage auf der ganzen Seite */
html{scroll-padding-top:24px}
body.bk{margin:0}
.bk #brx-content{display:block}
.bk .skip{position:absolute;left:-9999px;top:10px;z-index:999;padding:10px 14px;background:#fff;color:var(--bk-ink);border-radius:8px;font-weight:600}
.bk .skip:focus{left:12px}

/* Bricks-Elemente: SVG aus Datei und Bilder */
.bk svg.bk-ico,.bk .bk-ico svg{inline-size:1.25em;block-size:1.25em}
.bk .bk-btn svg{inline-size:1.15em;block-size:1.15em;flex:none}
.bk .kz-tel svg,.bk .kz-menu svg{inline-size:1.25rem;block-size:1.25rem}
.bk .vt-c-ico svg{inline-size:1.4rem;block-size:1.4rem}
.bk .le-d-reiter svg{inline-size:1.1rem;block-size:1.1rem}
.bk figure{margin:0}
.bk .bk-logo img{inline-size:auto}

/* Leistungen D: Reiter als Links (ohne JavaScript bleiben alle Felder sichtbar) */
.bk .le-d-reiter a{display:flex;justify-content:space-between;align-items:center;min-height:54px;padding:0 1.1rem;border-radius:var(--bk-r-btn);color:var(--bk-text);
  font:500 1.0625rem var(--bk-f-text);text-decoration:none;transition:background-color .2s,color .2s}
.bk .le-d-reiter a:hover{background:var(--bk-bg2)}
.bk .le-d-reiter a[aria-selected="true"]{background:var(--bk-dark);color:#fff}
.bk .le-d-panels{display:grid;gap:3rem}
.bk.js .le-d-panels{display:block}
.bk .le-d-panel .le-d-links{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem}
.bk .le-d-mehr{font-weight:600;color:var(--bk-ink);text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1.5px}
.bk .le-d-mehr:hover{color:var(--bk-red)}
@media (max-width:999.98px){.bk .le-d-reiter a{flex:none;min-height:44px;border:1.5px solid var(--bk-line);border-radius:999px;white-space:nowrap}.bk .le-d-reiter a svg{display:none}}

/* Preise C: Links unter der Liste */
.bk .pr-c-links{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}

/* FAQ: Klassen fürs FAQ-Schema (faq-item, faq-frage, faq-antwort) ändern nichts am Aussehen */
.bk .faq-frage{font:inherit;color:inherit}

/* Kopfzeile: Handy-Menü */
.bk .kz{position:relative}
.bk .kz-menu{cursor:pointer}
.bk .kz-mobil{display:none}
@media (max-width:1239.98px){
  .bk .kz-mobil{position:absolute;left:0;right:0;top:100%;z-index:50;display:grid;gap:1rem;padding:1rem var(--bk-gut) 1.5rem;background:var(--bk-bg);border-top:1px solid var(--bk-line);border-bottom:1px solid var(--bk-line);box-shadow:0 30px 40px -30px rgb(13 13 63/.35)}
  .bk .kz-mobil[hidden]{display:none}
  .bk .kz-mobil nav{display:grid}
  .bk .kz-mobil nav a{display:flex;align-items:center;min-height:52px;border-bottom:1px solid var(--bk-line);color:var(--bk-ink);font:var(--bk-titel-w) 1.25rem/1.2 var(--bk-f-titel);text-decoration:none}
  .bk .kz-mobil .bk-btns{margin-top:.5rem}
  .bk .kz-mobil .bk-btn{display:inline-flex}
}

/* Handy-Leiste unten (wie bisher: Anrufen, WhatsApp, E-Mail, Gratis Offerte) */
.bk .bk-mbar{display:none}
@media (max-width:759.98px){
  .bk .bk-mbar{position:fixed;inset:auto 0 0;z-index:60;display:grid;grid-template-columns:1fr 1fr 1fr 1.4fr;padding-bottom:env(safe-area-inset-bottom);background:var(--bk-bg);border-top:1px solid var(--bk-line);box-shadow:0 -10px 30px -18px rgb(13 13 63/.4)}
  .bk .bk-mbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:62px;color:var(--bk-ink);font:600 .78rem/1.2 var(--bk-f-text);text-decoration:none}
  .bk .bk-mbar a+a{border-left:1px solid var(--bk-line)}
  .bk .bk-mbar a.rot{background:var(--bk-red);border-left-color:var(--bk-red);color:#fff}
  .bk .bk-mbar svg{inline-size:1.35rem;block-size:1.35rem}
  body.bk{padding-bottom:calc(62px + env(safe-area-inset-bottom))}
}

@media print{.bk .bk-mbar,.bk .kz-menu,.bk .kz-mobil{display:none!important}}

/* Bewertungen B: Autorenzeile als div statt footer (Bricks) */
.bk .bw-b-raster .bw-b-wer{margin-top:auto;font-size:.9375rem;color:var(--bk-muted)}
.bk .bw-b-wer b{display:block;color:var(--bk-ink)}

/* Menüknopf zeigt den offenen Zustand */
.bk .kz-menu[aria-expanded="true"]{background:var(--bk-dark);border-color:var(--bk-dark);color:#fff}

/* Handy: Telefon-Symbol in der Kopfzeile weg, die Handy-Leiste unten hat «Anrufen»; Platz für den Hell-Dunkel-Schalter */
@media (max-width:759.98px){.bk .kz-c .kz-tel{display:none}}

/* Knopf «Nach oben» (wie auf der bisherigen Website: erscheint nach gut einer Bildschirmhöhe, auf dem Handy nur beim
   Hochscrollen und über der Handy-Leiste). Farben aus den Baukasten-Tokens, damit er auch im dunklen Modus passt. */
.bk .nach-oben{--unten:24px;position:fixed;right:clamp(16px,2.4vw,32px);bottom:var(--unten);z-index:55;display:grid;place-items:center;
  inline-size:48px;block-size:48px;border-radius:999px;background:var(--bk-card);color:var(--bk-ink);border:1px solid var(--bk-line);
  box-shadow:0 1px 2px rgb(13 13 63/.06),0 22px 44px -22px rgb(13 13 63/.35);text-decoration:none;
  opacity:0;visibility:hidden;translate:0 8px;transition:opacity .25s var(--bk-ease),translate .25s var(--bk-ease),visibility .25s}
.bk .nach-oben.sichtbar{opacity:1;visibility:visible;translate:0 0}
.bk .nach-oben:hover,.bk .nach-oben:focus-visible{background:var(--bk-red);border-color:var(--bk-red);color:#fff}
@media (max-width:759.98px){.bk .nach-oben{--unten:calc(62px + env(safe-area-inset-bottom) + 12px)}}
@media (prefers-reduced-motion:reduce){.bk .nach-oben{transition:none}}
@media print{.bk .nach-oben{display:none!important}}

/* Feste Symbolgrössen, die die allgemeine Bricks-Regel (.bk svg.bk-ico) nicht überschreiben soll */
.bk .he-vorteile svg{inline-size:24px;block-size:24px}
.bk .kz-modus svg{inline-size:18px;block-size:18px}

/* Dunkler Modus: aktiver Leistungs-Reiter rot, sonst hebt er sich vom dunklen Grund kaum ab */
html:is([data-farbe="nacht"],[data-farbe="dunkel"]) .bk .le-d-reiter a[aria-selected="true"]{background:var(--bk-red);border-color:var(--bk-red);color:#fff}

/* Symbolgrössen der Preis-Kacheln und des Schleifen-Knopfs gegen die allgemeine Bricks-Regel sichern */
.bk .pr-k-leute svg{inline-size:22px;block-size:22px}
.bk .pr-k-wagen svg{inline-size:26px;block-size:26px}
.bk .pr-k-link svg{inline-size:1.1em;block-size:1.1em}
.bk .bk-schleife-knopf svg{inline-size:1rem;block-size:1rem}

/* Schrift nie blau: Link im Cookie-Hinweis (Plugin) auf Baukasten-Seiten in Textfarbe, unterstrichen */
.bk [class*="alp-cc"] a{color:inherit;text-decoration:underline;text-underline-offset:.2em}

/* Kopfzeile: Pfeil der Untermenüs; Handy-Menü mit aufklappbaren Gruppen (details) */
.bk .kz-auf svg{inline-size:14px;block-size:14px}
@media (max-width:1239.98px){
  .bk .kz-mobil{max-block-size:calc(100dvh - 68px);overflow-y:auto}
  .bk .kz-mobil details{border-bottom:1px solid var(--bk-line)}
  .bk .kz-mobil summary{display:flex;align-items:center;justify-content:space-between;min-height:52px;cursor:pointer;list-style:none;color:var(--bk-ink);font:var(--bk-titel-w) 1.25rem/1.2 var(--bk-f-titel);letter-spacing:var(--bk-titel-ls)}
  .bk .kz-mobil summary::-webkit-details-marker{display:none}
  .bk .kz-mobil summary svg{inline-size:20px;block-size:20px;transition:rotate .2s var(--bk-ease)}
  .bk .kz-mobil details[open] summary svg{rotate:180deg}
  .bk .kz-mobil details ul{display:grid;margin:0 0 .75rem;padding:0;list-style:none}
  .bk .kz-mobil details a{min-height:44px;padding-left:.25rem;border-bottom:0;color:var(--bk-text);font:500 1.05rem/1.3 var(--bk-f-text);letter-spacing:0}
}