/* 01.11.2026 (Lieb, Silvio „Alles bauen“ auf die Startseiten-Durchsicht): Feinschliff nach dem Schaltwerk-Markenleitfaden.
   Wird als letzte Stilvorlage geladen. Skala 12/14/16/18/22/28/36/48 px, Fließtext mindestens 16 px,
   Handlung #BD3910, Plex Mono nur für Zahlen/Codes, nicht für Etiketten. */
:root { --sw-handlung: #BD3910; --sw-text: #15161A; --sw-text2: #494B4F; --sw-text3: #64685F; --sw-linie: #D5D7CE; --sw-flaeche: #FAF9F5; }
/* Leitfaden Schritt 2 (01.11.2026): EIN Orange. Vorher wirkten auf der Webseite fünf verschiedene Orangetöne (Knopf, Hover,
   zwei Variablen der Basis-Stilvorlage, Häkchen inline). Jetzt: Handlung hell, auf dunklen Flächen Handlung dunkel, Hover abgeleitet. */
:root { --brand: #BD3910; --brand-deep: color-mix(in srgb, #BD3910, black 12%); --brand-soft: #FF6B2C; }
#leadForm input[type="checkbox"] { accent-color: var(--brand) !important; }

/* Schrift: Fließtext 16 px, Hinweise 14 px */
main p, main li, main .ans, main dd { font-size: 16px; line-height: 1.6; }
main figcaption, main .hero-assurance, main .plain-label, main .form-hint, main .workbench-heading span,
main .cta-band-text, main .vertrauen-fakten, main .optional, main .chapter-index a, main .chapter-index span { font-size: 14px; line-height: 1.5; }
main .eyebrow, main .eyebrow.mono, main .plain-label { font-family: "IBM Plex Sans", system-ui, sans-serif; letter-spacing: .02em; text-transform: none; font-size: 14px; }
#koennen .hl-tag { display: none; }                    /* nur in den Funktionskarten: das Etikett wiederholte den Titel. In „Startklar“ trägt hl-tag den Preis und bleibt! */
main .hl-card h3 { font-size: 18px; line-height: 1.3; }
main .hl-card p { font-size: 16px; }
main .sec-head p { font-size: 18px; line-height: 1.55; }

/* Vertrauenszeile im Kopf */
.vertrauen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 22px 0 0; padding: 14px 0 0; border-top: 1px solid var(--sw-linie); }
.vertrauen-label { font: 500 12px/1 "IBM Plex Sans", system-ui, sans-serif; color: var(--sw-text3); letter-spacing: .04em; }
.vertrauen a { display: inline-flex; align-items: center; gap: 8px; color: var(--sw-text2); text-decoration: none; font-size: 14px; }
.vertrauen a b { font-weight: 500; }
.vertrauen img { height: 36px; width: auto; filter: grayscale(1); opacity: .85; }
.vertrauen a:hover img, .vertrauen a:focus-visible img { filter: none; opacity: 1; }
.vertrauen-fakten { flex-basis: 100%; margin: 0; color: var(--sw-text3); }

/* Programmbild im Kopf: vergrößerter Ausschnitt der Plantafel, das ganze Bild bleibt hinter „Vergrößern“ */
#view-plan-panel .product-zoom { overflow: hidden; }
#view-plan-panel .product-zoom img { transform: scale(1.9); transform-origin: 22% 38%; }

/* Aufforderungs-Bänder */
.cta-band { background: var(--sw-flaeche); border-top: 1px solid var(--sw-linie); border-bottom: 1px solid var(--sw-linie); padding-block: 40px; }
.cta-band-innen { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.cta-band-titel { margin: 0; font: 650 28px/1.2 "Archivo", system-ui, sans-serif; color: var(--sw-text); }
.cta-band-text { margin: 6px 0 0; color: var(--sw-text2); }
.cta-band-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-band .btn { min-height: 48px; }

/* Zugeklappte Bereiche */
.einblick-mehr > summary, .alle-funktionen > summary { list-style: none; cursor: pointer; }
.einblick-mehr > summary::-webkit-details-marker, .alle-funktionen > summary::-webkit-details-marker { display: none; }
.einblick-mehr > summary { max-width: 1140px; margin: 0 auto; padding: 8px 24px 40px; }
.einblick-mehr > summary span, .alle-funktionen > summary span {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 20px; border: 1px solid var(--sw-linie);
  border-radius: 8px; background: #fff; color: var(--sw-text); font: 600 16px/1 "IBM Plex Sans", system-ui, sans-serif; }
.einblick-mehr > summary span::after, .alle-funktionen > summary span::after { content: "+"; font-weight: 400; }
.einblick-mehr[open] > summary span::after, .alle-funktionen[open] > summary span::after { content: "−"; }
.alle-funktionen { margin-top: 24px; }
.alle-funktionen > summary { margin-bottom: 24px; }
.alle-funktionen > .hl { margin-bottom: 32px; }

/* „Geht uns genauso“ im Hausstil statt Plakat */
.camp.camp-ruhig { background: #16171A; color: #ECECEE; padding-block: 72px; text-align: left; }
.camp-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 32px; align-items: center; }
.camp-ruhig .camp-vor { margin: 0 0 12px; font-size: 14px; color: #8C8C96; }
.camp-ruhig h2 { margin: 0; font: 650 clamp(36px, 4vw, 48px)/1.05 "Archivo", system-ui, sans-serif; letter-spacing: -.01em; color: #ECECEE; text-transform: none; }
.camp-ruhig p { color: #C9C9CF; font-size: 18px; line-height: 1.55; margin: 16px 0 28px; }
.camp-ruhig .camp-knopf { display: inline-block; background: #FF6B2C; color: #0A0A0A; font: 600 16px/1 "IBM Plex Sans", system-ui, sans-serif; padding: 16px 22px; border-radius: 8px; text-decoration: none; text-transform: none; letter-spacing: 0; }
.camp-ruhig .camp-knopf:hover { background: #ff8247; color: #0A0A0A; }
.camp-ruhig .camp-foto { max-width: 100%; margin: 0; border-radius: 8px; }

/* Häkchen im Formular: Tippfläche 24 px */
#leadForm input[type="checkbox"] { width: 24px !important; height: 24px !important; }

/* Feste Leiste am Handy (Skript schaltwerk-home-leiste.js blendet sie nach dem Kopf ein und am Formular aus) */
.mobile-cta-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: rgba(242, 241, 236, .96); border-top: 1px solid var(--sw-linie); box-shadow: 0 -4px 12px rgba(0, 0, 0, .06); }
.mobile-cta-leiste .btn { display: block; width: auto !important; max-width: 100%; box-sizing: border-box; margin: 0; text-align: center; min-height: 52px; font-size: 16px; }   /* 01.11. Prüf-Blick live: eine ältere Regel setzte 390 px, der Knopf stieß rechts an den Rand; gemessen danach 14 px Abstand je Seite */
@media (min-width: 761px) { .mobile-cta-leiste { display: none !important; } }
@media (max-width: 760px) { body.mit-leiste { padding-bottom: 84px; } .cta-band-titel { font-size: 22px; } }
@media (prefers-reduced-motion: no-preference) { .mobile-cta-leiste { transition: transform .2s ease; } }