/* ============================================================
   ALARMETIK — Neue Optik „Hell & Vertrauen" + Produktkacheln
   (Kombination aus Entwurf B und C, Oktober 2026)

   Liegt als eigene Schicht NACH site.css. site.css bleibt unverändert;
   wer zur alten Optik zurück will, entfernt nur die Zeile
   <link … redesign.css> aus den Seiten.

   Ansatz: Die Seite ist bereits farbgesteuert (data-theme="hell").
   Hier werden deshalb zuerst die Farben und Schriften getauscht
   und danach Form (Rundungen, Karten) und die neuen Bausteine gesetzt.
   ============================================================ */

html[data-theme="hell"]{
  --ink:#faf7f2;            /* Seitengrund: warmes Creme */
  --ink-2:#ffffff;          /* Karten */
  --ink-3:#f2ece0;          /* Überfahren */
  --paper:#14213d;          /* Text: tiefes Marineblau */
  --paper-dim:#3d4960;
  --paper-faint:#626d82;
  --line:#e7dfd0;
  --line-2:#efe8da;
  --trennlinie:#e2d9c8;
  --amber:#f5a623;
  --amber-ink:#8a4f08;
  --fokus:#8a4f08;
  --marine:#14213d;
  --marine-tief:#0f1a30;
  --serif:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --radius:20px;
  background:var(--ink);
}

/* ---------- Schrift ---------- */
html[data-theme="hell"] h1,
html[data-theme="hell"] h2,
html[data-theme="hell"] .h-xl,
html[data-theme="hell"] .h-lg,
html[data-theme="hell"] .h-md,
html[data-theme="hell"] .h-sm,
html[data-theme="hell"] .obj__panel h3,
html[data-theme="hell"] .rev__cta h3,
html[data-theme="hell"] .xlink h3{
  font-family:var(--serif);font-weight:700;font-style:normal;
  text-transform:none;letter-spacing:-.015em;line-height:1.1}
html[data-theme="hell"] h1 em,
html[data-theme="hell"] h2 em,
html[data-theme="hell"] .hero h1 em,
html[data-theme="hell"] .subhero h1 em{font-style:italic;color:var(--amber-ink)}
html[data-theme="hell"] .eyebrow{
  font-family:var(--font);font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--paper-dim)}
html[data-theme="hell"] .eyebrow b{font-family:var(--mono);font-weight:500}
html[data-theme="hell"] .lead{font-size:clamp(17px,1.4vw,20px);line-height:1.6}
html[data-theme="hell"] .sec-head .eyebrow{margin-bottom:16px}

/* ---------- Kopfzeile: hell ---------- */
html[data-theme="hell"] .nav{
  --paper:#14213d;--paper-dim:#3d4960;--paper-faint:#626d82;--line:#e7dfd0;--amber-ink:#8a4f08;
  background:rgba(250,247,242,.94);border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
html[data-theme="hell"] .nav.stuck{background:rgba(250,247,242,.97);border-bottom-color:var(--line)}
html[data-theme="hell"] .logo__row{color:var(--marine)}
html[data-theme="hell"] .logo__row i{color:var(--amber)}
html[data-theme="hell"] .logo__tag{color:var(--amber-ink)}
html[data-theme="hell"] .nav__links a{color:var(--paper-dim);font-weight:500}
html[data-theme="hell"] .nav__links a:hover,
html[data-theme="hell"] .nav__links a[aria-current]{color:var(--marine)}
html[data-theme="hell"] .burger i{background:var(--marine)}
/* Der Button oben rechts folgt der Haupt-Schaltfläche (amber, Pfeil, Marine-Füllung beim Darüberfahren); nur Nebenschaltflächen im Kopf sind umrandet. */
html[data-theme="hell"] .nav .btn:not(.btn--fill){border-color:var(--marine);color:var(--marine)}
html[data-theme="hell"] .nav .btn--fill{background:var(--amber);border-color:var(--amber);color:var(--marine)}
html[data-theme="hell"] .nav .btn--fill:hover,
html[data-theme="hell"] .nav .btn--fill:focus-visible{color:#fff;border-color:var(--marine)}
html[data-theme="hell"] .nav .btn--fill .arrow{width:11px;height:11px}
/* Der Pfeil liegt über der Füllung, damit er beim Darüberfahren sichtbar bleibt (alle Schaltflächen) */
.btn .arrow{position:relative;z-index:1}
html[data-theme="hell"] .menu{
  --paper:#14213d;--paper-dim:#3d4960;--paper-faint:#626d82;--line:#e7dfd0;--amber-ink:#8a4f08;
  background:var(--ink)}
html[data-theme="hell"] .menu a{color:var(--marine);border-color:var(--line)}
html[data-theme="hell"] .menu a span{color:var(--amber-ink)}
html[data-theme="hell"] .menu a:hover{background:var(--ink-3)}
html[data-theme="hell"] .menu__foot{border-color:var(--line)}
html[data-theme="hell"] .menu__foot a{color:var(--marine)}

/* ---------- Schaltflächen: rund ---------- */
html[data-theme="hell"] .btn{
  border-radius:999px;font-family:var(--font);font-size:15px;font-weight:600;
  letter-spacing:.005em;text-transform:none;padding:14px 26px;
  border:1.5px solid var(--marine);color:var(--marine)}
html[data-theme="hell"] .btn--sm{padding:10px 20px;font-size:14px}
html[data-theme="hell"] .btn:hover{color:var(--marine);border-color:var(--amber)}
html[data-theme="hell"] .btn--fill{background:var(--amber);border-color:var(--amber);color:var(--marine)}
html[data-theme="hell"] .btn--fill::before{background:var(--marine)}
html[data-theme="hell"] .btn--fill:hover{color:#fff;border-color:var(--marine)}
html[data-theme="hell"] .btn--gross{padding:17px 32px;font-size:16px}

/* ---------- Abschnitte ---------- */
html[data-theme="hell"] .sec{padding-top:clamp(56px,6vw,104px);padding-bottom:clamp(56px,6vw,104px)}
html[data-theme="hell"] .sec + .sec,
html[data-theme="hell"] main + .sec,
html[data-theme="hell"] main > .sec:first-of-type{border-top:none}
html[data-theme="hell"] .sec--alt{background:#fff}
html[data-theme="hell"] #konfigurator{background:#fff}
html[data-theme="hell"] .h-lg{font-size:clamp(32px,4.4vw,60px)}
html[data-theme="hell"] .h-lg--still{font-size:clamp(28px,3.4vw,44px)}

/* ---------- Karten und Flächen: gerundet ---------- */
html[data-theme="hell"] .fstep,
html[data-theme="hell"] .xlink,
html[data-theme="hell"] .result,
html[data-theme="hell"] .obj__panel,
html[data-theme="hell"] .dev-detail,
html[data-theme="hell"] .pcard,
html[data-theme="hell"] .fakt,
html[data-theme="hell"] .weg,
html[data-theme="hell"] .cfg-attach,
html[data-theme="hell"] .attach,
html[data-theme="hell"] .cta-band,
html[data-theme="hell"] .plan__stage,
html[data-theme="hell"] .rev,
html[data-theme="hell"] .quote,
html[data-theme="hell"] .home-locks__visual{border-radius:var(--radius);border:1px solid var(--line)}
html[data-theme="hell"] .result{border-radius:26px;box-shadow:0 18px 50px rgba(20,33,61,.08)}
/* Abschlussband läuft über die volle Breite: keine Rundung, nur eine Kante oben */
html[data-theme="hell"] .cta-band{border-radius:0;border-left:none;border-right:none;border-bottom:none;background:#fff}
/* Platzhaltertexte waren fast unsichtbar (30 % Hellgrau auf Weiß) */
html[data-theme="hell"] ::placeholder{color:#6b7589;opacity:1}
html[data-theme="hell"] .field input::placeholder,
html[data-theme="hell"] .field textarea::placeholder{color:#6b7589;opacity:1}
html[data-theme="hell"] .home-locks__visual{overflow:hidden;background:#fff}
html[data-theme="hell"] .home-locks__visual img{border-radius:var(--radius)}

/* Karten auf weißen Abschnitten: Creme, damit sie sich abheben */
html[data-theme="hell"] .sec--alt .fstep,
html[data-theme="hell"] .sec--alt .xlink,
html[data-theme="hell"] .sec--alt .obj__panel,
html[data-theme="hell"] .sec--alt .dev-detail{background:var(--ink)}
html[data-theme="hell"] .result{background:var(--ink)}
html[data-theme="hell"] .xlinks{gap:14px;background:none;border:none}
html[data-theme="hell"] .xlink{transition:transform .35s var(--ease),box-shadow .35s}
html[data-theme="hell"] .xlink:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(20,33,61,.1)}

/* ---------- Ablauf: gerundete Karten statt Linienraster ---------- */
html[data-theme="hell"] .flow{gap:14px;background:none;border:none}
html[data-theme="hell"] .fstep{padding:22px 20px 24px;gap:10px;background:#fff}
html[data-theme="hell"] .fstep__n{
  width:38px;height:38px;border-radius:50%;background:var(--marine);color:#fff;
  display:grid;place-items:center;font-family:var(--font);font-size:15px;font-weight:700;
  letter-spacing:0;margin-bottom:30px}
html[data-theme="hell"] .fstep:hover .fstep__n{background:var(--amber);color:var(--marine)}
html[data-theme="hell"] .fstep h3{font-family:var(--font);font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
html[data-theme="hell"] .fstep p{font-size:14px}

/* ---------- Konfigurator ---------- */
html[data-theme="hell"] .q{border-top:1px solid var(--line)}
html[data-theme="hell"] .q__l{font-family:var(--font);font-size:16px;font-weight:700;letter-spacing:-.005em;color:var(--marine)}
html[data-theme="hell"] .q__l b{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--amber-ink)}
html[data-theme="hell"] .opt{
  border-radius:14px;border:1.5px solid var(--line);background:#fff;color:var(--paper);
  font-weight:500;padding:12px 18px}
html[data-theme="hell"] .opt:hover{border-color:var(--marine);color:var(--marine)}
html[data-theme="hell"] .opt.on{background:var(--marine);border-color:var(--marine);color:#fff}
html[data-theme="hell"] .qselect select,
html[data-theme="hell"] .bom__menge select{border-radius:12px}
html[data-theme="hell"] .q__hinweis{font-size:13.5px}
html[data-theme="hell"] .schrittfuss__zurueck,
html[data-theme="hell"] .schrittfuss__weiter{
  border-radius:999px;font-family:var(--font);font-size:15px;font-weight:600;letter-spacing:0;text-transform:none}
html[data-theme="hell"] .schrittfuss__zurueck{border:1.5px solid var(--marine);color:var(--marine);background:#fff}
html[data-theme="hell"] .schrittfuss__zurueck:disabled{border-color:var(--line);color:var(--paper-faint)}
html[data-theme="hell"] .schrittfuss__weiter{background:var(--amber);color:var(--marine);border:1.5px solid var(--amber)}
html[data-theme="hell"] .schrittkopf__zaehler{font-family:var(--font);font-weight:700;letter-spacing:.02em;color:var(--marine)}
html[data-theme="hell"] .schrittkopf__stand{font-family:var(--font);letter-spacing:0}

/* ---------- Schließplan-Konfigurator (schliessanlagen.html) ---------- */
html[data-theme="hell"] .skalk__vorlagen button{
  border:1.5px solid var(--line);border-radius:999px;background:#fff;padding:10px 20px;font-weight:500}
html[data-theme="hell"] .skalk__vorlagen button:hover{border-color:var(--marine)}
html[data-theme="hell"] .skalk__vorlagen button.on{background:var(--marine);border-color:var(--marine);color:#fff}
html[data-theme="hell"] .sblock h3{font-family:var(--font);font-weight:700;letter-spacing:-.01em;line-height:1.25}
html[data-theme="hell"] .sblock h3 b{color:var(--amber-ink)}
html[data-theme="hell"] .skarten{gap:10px;background:none;border:none;border-radius:0;overflow:visible}
html[data-theme="hell"] .skarte{
  background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:18px 20px;
  transition:border-color .25s,box-shadow .25s,background .25s}
html[data-theme="hell"] .skarte:hover{background:#fff;border-color:var(--marine)}
html[data-theme="hell"] .skarte.on{background:var(--marine);border-color:var(--marine);box-shadow:none}
html[data-theme="hell"] .skarte.on b{color:#fff}
html[data-theme="hell"] .skarte.on span{color:#d2d8e4}
html[data-theme="hell"] .skarte.on em,
html[data-theme="hell"] .skarte.on u{color:var(--amber)}
html[data-theme="hell"] .skarte em{font-family:var(--font);font-size:11.5px;font-weight:600;letter-spacing:.04em}
html[data-theme="hell"] .skarte.aus:hover{background:#fff;border-color:var(--line)}
html[data-theme="hell"] .stuer,
html[data-theme="hell"] .splan,
html[data-theme="hell"] .sbom{border-radius:18px;background:#fff}
html[data-theme="hell"] .sbom{background:var(--ink)}
html[data-theme="hell"] .stuer__name{border-bottom-width:1.5px}
html[data-theme="hell"] .stuer__move,
html[data-theme="hell"] .stuer__weg,
html[data-theme="hell"] .szelle{border-radius:10px}
html[data-theme="hell"] .stuer__reihe select,
html[data-theme="hell"] .stuer__neu select,
html[data-theme="hell"] .sgruppe input[type=text],
html[data-theme="hell"] .sgruppe input[type=number]{border-radius:12px}
html[data-theme="hell"] .sfunk{border-radius:12px;background:#fff}
html[data-theme="hell"] .sfunk:has(input:checked){border-color:var(--marine);box-shadow:inset 0 0 0 1px var(--marine)}
html[data-theme="hell"] .szelle.on{border-color:var(--marine);background:var(--marine)}
html[data-theme="hell"] .szelle.on i{background:var(--amber)}
html[data-theme="hell"] .sbom__kopf span{font-family:var(--font);font-weight:700;letter-spacing:.06em;color:var(--amber-ink)}
html[data-theme="hell"] .sableitung{border-radius:0 12px 12px 0}

/* ---------- Unterseiten: Fakten-Raster, Über-uns-Aussage ---------- */
html[data-theme="hell"] .about__claim,
html[data-theme="hell"] .big-quote{font-family:var(--serif);font-weight:700;letter-spacing:-.015em;line-height:1.12}
html[data-theme="hell"] .about__claim em,
html[data-theme="hell"] .big-quote em{color:var(--amber-ink)}
html[data-theme="hell"] .fakten,
html[data-theme="hell"] .tech{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
html[data-theme="hell"] .fakten .fakt{border:none;border-radius:0;background:#fff}
html[data-theme="hell"] .fakten .fakt:hover{background:var(--ink-3)}
html[data-theme="hell"] .tech > *{background:#fff}
html[data-theme="hell"] .facts{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
html[data-theme="hell"] .facts > .fact{background:#fff}

/* ---------- Terminseite ---------- */
html[data-theme="hell"] .slot{
  border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--paper);
  font-family:var(--font);font-weight:600;font-size:15px;padding:11px 18px}
html[data-theme="hell"] .slot:hover{border-color:var(--marine);color:var(--marine)}
html[data-theme="hell"] .slot.on{background:var(--marine);border-color:var(--marine);color:#fff}
html[data-theme="hell"] .term__gewaehlt{border:1.5px solid var(--line);border-radius:18px;background:#fff}
html[data-theme="hell"] .term__gewaehlt.is-an{border-color:var(--marine);background:#fff}
html[data-theme="hell"] .term__zwei{gap:0 12px}
html[data-theme="hell"] .tag__datum{color:var(--marine)}

/* Datenschutz-Haken: Kästchen neben dem Text, normale Schrift statt Feldbeschriftung */
html[data-theme="hell"] .field .consent__row{
  display:flex;align-items:flex-start;gap:12px;font-family:var(--font);font-size:14.5px;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--paper)}
html[data-theme="hell"] .field .consent__row a{color:var(--amber-ink);text-underline-offset:3px}
html[data-theme="hell"] .field .consent__row input{accent-color:var(--marine)}
html[data-theme="hell"] .field.consent{padding:14px 16px}

/* ---------- Alle Formulare: Abstand zwischen den Feldern ---------- */
html[data-theme="hell"] form .field{margin-bottom:12px}

/* ---------- Kontaktformular: Felder als Kästen ---------- */
html[data-theme="hell"] .field{
  border:1.5px solid var(--line);border-radius:14px;background:#fff;padding:11px 16px 12px}
html[data-theme="hell"] .field:focus-within{border-color:var(--marine);box-shadow:0 0 0 3px rgba(245,166,35,.28)}
html[data-theme="hell"] .field label{font-family:var(--font);font-size:12.5px;font-weight:600;letter-spacing:.02em;text-transform:none}
html[data-theme="hell"] #kontaktForm > .field{margin-bottom:12px}
html[data-theme="hell"] #kontaktForm > .attach{margin-bottom:18px}
html[data-theme="hell"] .field.is-error{border-color:#b3261e}
html[data-theme="hell"] .ok{border-radius:14px}
html[data-theme="hell"] .cinfo__b{border-top-color:var(--line)}
html[data-theme="hell"] .cinfo__b span{font-family:var(--font);font-size:12.5px;font-weight:600;letter-spacing:.04em}

/* ---------- Objekt-Auswahl ---------- */
html[data-theme="hell"] .obj__nav{border-top:none;gap:8px}
html[data-theme="hell"] .obj__nav button{
  border:1.5px solid var(--line);border-radius:14px;padding:14px 18px;background:#fff}
html[data-theme="hell"] .obj__nav button.on{
  padding-left:18px;background:var(--marine);border-color:var(--marine);color:#fff}
html[data-theme="hell"] .obj__nav button.on i{color:var(--amber)}

/* ============================================================
   STARTSEITE: EINSTIEG
   ============================================================ */
html[data-theme="hell"] .hero{min-height:0;background:var(--ink)}
html[data-theme="hell"] .hero::before{content:none}
html[data-theme="hell"] .hero__in{padding-top:clamp(104px,12vh,150px)}
.hero__split{display:grid;gap:36px;align-items:center}
@media(min-width:900px){.hero__split{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(34px,4.5vw,70px)}}

html[data-theme="hell"] .hero .tag{
  display:inline-flex;gap:8px;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:8px 16px;font-family:var(--font);font-size:13px;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--paper-dim)}
html[data-theme="hell"] .hero .tag b{color:var(--amber-ink);font-family:var(--font);font-weight:700}
html[data-theme="hell"] .hero h1{
  margin:22px 0 0;font-size:clamp(40px,5.4vw,76px);line-height:1.04;font-weight:700}
html[data-theme="hell"] .hero h1 .ln{padding-bottom:.1em;margin-bottom:-.1em}
html[data-theme="hell"] .hero .lead{margin-top:24px;max-width:50ch}
html[data-theme="hell"] .hero .area{margin-top:22px}
html[data-theme="hell"] .area span{
  border-radius:999px;border:1px solid var(--line);background:#fff;font-family:var(--font);
  font-size:12.5px;letter-spacing:0;text-transform:none;padding:5px 13px}
html[data-theme="hell"] .area span:first-child{border:none;background:none;padding-left:0;font-weight:600}
html[data-theme="hell"] .hero__hint{color:var(--paper-faint);font-size:14px;margin-top:16px}

/* Illustration als Karte */
html[data-theme="hell"] .hero__karte{
  position:relative;border-radius:30px;overflow:hidden;min-height:440px;padding-bottom:104px;
  background:linear-gradient(160deg,#e3eaf1 0%,#c9d8e5 100%);
  box-shadow:0 24px 60px rgba(20,33,61,.14)}
html[data-theme="hell"] .hero__karte .haus{
  position:relative;right:auto;top:auto;transform:none;z-index:0;
  width:min(86%,520px);margin:34px auto 0;opacity:1;display:block}
html[data-theme="hell"] .hero__karte .haus .h-glas{fill:var(--amber);opacity:.5}
html[data-theme="hell"] .hero__karte .haus .h-linie{stroke:var(--marine);opacity:.85}
html[data-theme="hell"] .hero__karte .haus .h-fein{stroke:var(--marine);opacity:.4}
html[data-theme="hell"] .hero__karte .haus .h-boden{stroke:var(--marine);opacity:.3}
html[data-theme="hell"] .hero__karte .haus .h-rahmen{stroke:#b9770e;opacity:1}
html[data-theme="hell"] .hero__status{
  position:absolute;left:20px;right:20px;bottom:20px;display:flex;gap:16px;align-items:center;
  background:#fff;border-radius:18px;padding:14px 18px;box-shadow:0 12px 32px rgba(20,33,61,.18)}
.hero__status img{width:56px;height:56px;object-fit:contain;background:var(--ink);border-radius:12px;padding:5px;
  mix-blend-mode:multiply;flex:none}
.hero__status b{display:block;font-size:15px;color:var(--marine)}
.hero__status small{display:block;color:var(--paper-faint);font-size:13px}
.hero__status i{width:10px;height:10px;border-radius:50%;background:#2e9e5b;flex:none;margin-left:auto;
  box-shadow:0 0 0 4px rgba(46,158,91,.18)}

/* Kennzahlen als Karten */
html[data-theme="hell"] .hero__stats{background:none;border:none;gap:14px;margin-top:clamp(36px,5vw,64px)}
html[data-theme="hell"] .stat{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 20px}
html[data-theme="hell"] .stat__n{font-family:var(--serif);letter-spacing:-.02em;color:var(--marine)}
html[data-theme="hell"] .stat__l{font-family:var(--font);font-size:12.5px;letter-spacing:0;text-transform:none;
  color:var(--paper-faint);margin-top:8px}

/* ============================================================
   STARTSEITE: PRODUKTKACHELN (Auswahl der Lösung)
   ============================================================ */
.bento{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.bento .kachel--dunkel{grid-column:1/-1}
@media(min-width:860px){
  .bento{grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:250px 250px}
  .bento .kachel--dunkel{grid-column:auto;grid-row:span 2}
}
.kachel{
  position:relative;display:block;overflow:hidden;min-height:210px;
  background:#fff;border:1px solid var(--line);border-radius:26px;padding:26px 24px;
  color:var(--marine);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.kachel:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(20,33,61,.13)}
.kachel h3{font-family:var(--font);font-size:clamp(18px,1.6vw,22px);font-weight:700;letter-spacing:-.015em;line-height:1.2}
.kachel p{margin-top:6px;font-size:14px;line-height:1.5;color:var(--paper-dim);max-width:19ch}
.kachel img{position:absolute;right:14px;bottom:12px;height:52%;width:auto;max-width:56%;object-fit:contain;
  mix-blend-mode:multiply;transition:transform .5s var(--ease)}
.kachel:hover img{transform:scale(1.06)}
.kachel__mehr{position:absolute;left:24px;bottom:20px;font-size:14px;font-weight:700;color:var(--amber-ink)}
.kachel--dunkel{background:var(--marine);border-color:var(--marine);color:#fff;min-height:300px}
.kachel--dunkel p{color:#c5cbd8;max-width:30ch}
.kachel--dunkel img{right:50%;transform:translateX(50%);bottom:62px;height:48%;max-width:70%;
  border-radius:24px;mix-blend-mode:normal;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.kachel--dunkel:hover img{transform:translateX(50%) scale(1.04)}
.kachel--dunkel .kachel__mehr{color:var(--amber)}
.kachel__pill{display:inline-block;background:var(--amber);color:var(--marine);font-size:12px;font-weight:700;
  border-radius:999px;padding:4px 12px;margin-bottom:12px}
.produkte__fuss{margin-top:22px;color:var(--paper-dim);font-size:15px}
.produkte__fuss a{color:var(--amber-ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media(max-width:859px){
  .kachel{min-height:236px;padding:22px 18px}
  .kachel p{max-width:14ch;font-size:13.5px}
  .kachel img{height:40%;right:10px}
  /* Dunkle Kachel über die volle Breite: Text links, Bild rechts daneben */
  .kachel--dunkel{min-height:250px}
  .kachel--dunkel p{max-width:17ch}
  .kachel--dunkel img{right:20px;bottom:58px;transform:none;height:46%;max-width:42%}
  .kachel--dunkel:hover img{transform:scale(1.04)}
}

/* ============================================================
   Datenschutz-Hinweis: weiter dunkel (Textfarben sind dort fest gesetzt),
   jetzt in Marineblau und gerundet. Beide Schaltflächen bleiben gleich
   gestaltet und gleich auffällig.
   ============================================================ */
html[data-theme="hell"] .cbar{
  background:rgba(20,33,61,.985);border-radius:24px;
  box-shadow:0 24px 60px rgba(20,33,61,.4)}
html[data-theme="hell"] .cbar h2{font-family:var(--serif);font-weight:700;letter-spacing:-.01em}
html[data-theme="hell"] .cbar__t{font-family:var(--font);font-weight:700;letter-spacing:.12em}
html[data-theme="hell"] .cbar__btns button{
  border-radius:999px;font-family:var(--font);font-size:14px;font-weight:600;letter-spacing:0;
  text-transform:none;padding:13px 14px}
html[data-theme="hell"] .cbar__more{font-family:var(--font);font-size:13px;letter-spacing:0;text-transform:none;
  text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   Bewertungen, Zitate, Fuß
   ============================================================ */
html[data-theme="hell"] .sec--streifen{background:var(--ink)}
html[data-theme="hell"] .rev__cta h3{font-size:clamp(22px,2vw,28px)}
/* Direktkontakt (Seitenleiste am Rechner, Leiste am Handy): Marineblau statt Fast-Schwarz */
html[data-theme="hell"] .cdock{background:var(--marine);border-top:none}
html[data-theme="hell"] .cdock a{color:#fff}
html[data-theme="hell"] .cdock__b+.cdock__b{border-left-color:rgba(255,255,255,.14)}
html[data-theme="hell"] .crail__i{background:var(--marine);border-color:var(--marine);color:#fff;border-radius:14px 0 0 14px}
html[data-theme="hell"] .crail__i:hover,
html[data-theme="hell"] .crail__i:focus-visible{background:var(--amber);border-color:var(--amber);color:var(--marine)}
html[data-theme="hell"] .crail__lbl{color:var(--paper-faint)}
html[data-theme="hell"] .crail__i--wa{background:#0F7A3D;border-color:#0F7A3D;color:#fff}
html[data-theme="hell"] .crail__i--wa:hover,
html[data-theme="hell"] .crail__i--wa:focus-visible{background:#0b6432;border-color:#0b6432;color:#fff}
html[data-theme="hell"] .cdock__b--wa{background:#0F7A3D;color:#fff}

html[data-theme="hell"] footer{
  --ink:#0f1a30;--ink-2:#14213d;--ink-3:#1b2c52;
  --paper:#f3efe6;--paper-dim:#ccd1dc;--paper-faint:#98a2b6;
  --line:#2b3b60;--line-2:#1f2e50;--amber-ink:#f5a623;
  background:var(--ink);color:var(--paper);border-top:none}
html[data-theme="hell"] .fmark{color:rgba(243,239,230,.06)}

/* ============================================================
   UNTERSEITEN: gleicher Kopf in neuer Schrift
   ============================================================ */
html[data-theme="hell"] .subhero{background:var(--ink)}
html[data-theme="hell"] .subhero h1{
  font-size:clamp(34px,5vw,68px);text-transform:none;font-style:normal;font-weight:700;
  letter-spacing:-.015em;line-height:1.06}
html[data-theme="hell"] .crumbs a,html[data-theme="hell"] .crumbs{font-family:var(--font)}

@media(max-width:899px){
  html[data-theme="hell"] .hero__karte{min-height:330px}
  html[data-theme="hell"] .hero__karte .haus{width:80%;margin-top:26px}
  html[data-theme="hell"] .hero h1{font-size:clamp(36px,10.4vw,52px)}
}
@media(prefers-reduced-motion:reduce){
  .kachel,.kachel img,.xlink{transition:none}
}

/* ---------- Schließplan-Konfigurator: Erklärkästen „In einfachen Worten“ ---------- */
.sinfo{margin-top:14px;border:1.5px solid var(--line);border-radius:16px;background:#fff;overflow:hidden}
.sinfo summary{cursor:pointer;list-style:none;padding:14px 18px;font-family:var(--font);font-size:14.5px;font-weight:600;color:var(--marine);display:flex;align-items:center;gap:10px}
.sinfo summary::-webkit-details-marker{display:none}
.sinfo summary::before{content:"+";flex:none;width:22px;height:22px;border-radius:50%;background:var(--amber);color:var(--marine);display:grid;place-items:center;font-weight:700;line-height:1}
.sinfo[open] summary::before{content:"–"}
.sinfo summary:focus-visible{outline:2px solid var(--fokus);outline-offset:-2px}
.sinfo dl{margin:0;padding:0 18px 4px;display:grid;gap:0}
.sinfo dl>div{padding:11px 0;border-top:1px solid var(--line)}
.sinfo dt{font-weight:700;font-size:14px;color:var(--marine)}
.sinfo dd{margin:3px 0 0;font-size:14px;line-height:1.6;color:var(--paper-dim)}
.sinfo>p{margin:0;padding:12px 18px 16px;border-top:1px solid var(--line);background:var(--ink);font-size:13.5px;line-height:1.65;color:var(--paper-dim)}

/* ============================================================
   Startseite 2026-10: drei Lösungskacheln, Preis-Rechner
   ============================================================ */
.bento--drei{grid-template-columns:1fr 1fr}
@media(min-width:860px){
  .bento--drei{grid-template-columns:1.25fr 1fr;grid-template-rows:250px 250px}
  .bento--drei .kachel--dunkel{grid-column:1;grid-row:span 2}
}
/* Schließanlagen-Kachel: Bild mit mechanischem und elektronischem Zylinder, kein Multiply nötig (Bild ist transparent) */
.kachel--schloss img{mix-blend-mode:normal;max-width:60%}
.kachel--dunkel .kachel__mehr{color:var(--amber)}
@media(max-width:859px){
  .kachel--schloss img{height:auto;width:calc(100% - 28px);max-width:none;right:14px}
  .kachel__mehr{left:18px;bottom:16px;font-size:13.5px}
  .kachel:not(.kachel--dunkel) img{bottom:50px;height:34%}
  .kachel--schloss img{height:auto}
}

/* Preisanzeige im Rechner */
.preis{border-radius:18px;background:var(--marine);color:#fff;padding:20px 20px 18px}
.preis__zahl{font-size:clamp(28px,3.4vw,42px);font-weight:700;letter-spacing:-.025em;line-height:1.1;white-space:nowrap}
.preis__text{margin:8px 0 0;font-size:14px;line-height:1.55;color:#d5dbea}
.preis:not(.preis--ok) .preis__zahl{font-size:clamp(24px,2.6vw,30px);color:#c9d2e6;letter-spacing:-.01em}
.cfg-note:empty,.cfg-vorb:empty,.zusatz:empty{display:none}
html[data-theme="hell"] .cfg-note{font-size:13.5px;color:var(--paper-dim)}
@media(min-width:1000px){.result{max-height:calc(100vh - 124px);overflow:auto}}

/* Postleitzahl als letzte Frage */
.qplz{display:grid;gap:10px;max-width:420px}
.qplz input{width:100%;max-width:220px;min-height:52px;border-radius:14px;border:1.5px solid var(--line);background:#fff;
  padding:0 16px;font-family:var(--font);font-size:20px;font-weight:600;letter-spacing:.14em;color:var(--marine)}
.qplz input:focus{outline:none;border-color:var(--marine);box-shadow:0 0 0 3px rgba(20,33,61,.12)}
.qplz__text{font-size:13.5px;line-height:1.5;color:var(--paper-faint)}

/* Zusatzoptionen und weitere Interessen */
.zusatz{display:grid;gap:18px}
.zusatz__t{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--paper-dim)}
.zusatz__p{margin:5px 0 0;font-size:13.5px;line-height:1.5;color:var(--paper-faint)}
.zusatz__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chipwahl{min-height:44px;padding:0 15px;border-radius:999px;border:1.5px solid var(--line);background:#fff;
  font-family:var(--font);font-size:14px;font-weight:600;color:var(--marine);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.chipwahl:hover{border-color:var(--marine)}
.chipwahl[aria-pressed="true"]{background:var(--marine);border-color:var(--marine);color:#fff}
.chipwahl:focus-visible{outline:2px solid var(--fokus);outline-offset:2px}

/* Zusammenstellung im Formular: Mengen als Auswahl */
html[data-theme="hell"] .attach__list{gap:0}
html[data-theme="hell"] .attach__list .bom__row{padding:9px 0;border-bottom:1px solid var(--line-2);font-size:14.5px;align-items:center}
html[data-theme="hell"] .attach__list .bom__row:last-child{border-bottom:0}
html[data-theme="hell"] .attach__list .bom__row small{display:block;font-size:12px;letter-spacing:0;text-transform:none;color:var(--paper-faint);margin-top:2px}

/* ---------- Schließanlagen: Kurzanfrage ohne Details ---------- */
.skurz{background:#fff;border:1.5px solid var(--line);border-radius:22px;padding:22px 20px 20px;margin:0 0 28px;display:grid;gap:18px}
.skurz__kopf h3{font-size:clamp(20px,2.2vw,26px);font-weight:700;letter-spacing:-.015em;line-height:1.2;color:var(--marine)}
.skurz__kopf p{margin:6px 0 0;color:var(--paper-dim);font-size:15px;line-height:1.55}
.skurz__zeile{display:grid;gap:8px}
.skurz__label{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--paper-dim)}
.skurz__chips{display:flex;flex-wrap:wrap;gap:8px}
.skurz__chips .chipwahl{min-height:48px;padding:0 18px;font-size:15px}
.skurz__fuss{display:grid;gap:10px;justify-items:start}
.skurz__fuss p{margin:0;font-size:14px;color:var(--paper-faint);line-height:1.5}
@media(max-width:600px){.skurz__fuss .btn{width:100%;justify-content:center}}
.skurz-hinweis{border-left:3px solid var(--amber);background:#fff;border-radius:0 14px 14px 0;padding:12px 16px;margin:0 0 20px}
.skurz-hinweis p{margin:0;font-size:15px;line-height:1.55;color:var(--marine)}
.skurz-hinweis__link{margin-top:6px;padding:6px 0;min-height:36px;font-size:14px;font-weight:600;color:var(--amber-ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ---------- Lösungen: drei gleich große Kacheln nebeneinander, auch auf dem Handy ---------- */
.bento--drei{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;gap:10px}
.bento--drei .kachel{
  grid-column:auto;grid-row:auto;display:flex;flex-direction:column;align-items:flex-start;
  min-height:0;padding:12px 10px 14px;border-radius:20px;background:#fff;border:1px solid var(--line);color:var(--marine)}
.bento--drei .kachel img{
  position:static;order:-1;display:block;width:100%;max-width:none;height:76px;margin:0 0 10px;
  object-fit:contain;object-position:center;mix-blend-mode:multiply;transform:none;border-radius:0;box-shadow:none}
.bento--drei .kachel:hover img{transform:scale(1.05)}
.bento--drei .kachel h3{font-size:14px;line-height:1.2;min-height:2.4em;hyphens:manual;overflow-wrap:normal}
.bento--drei .kachel p{display:none}
.bento--drei .kachel__mehr{position:static;left:auto;bottom:auto;margin-top:auto;padding-top:8px;font-size:15px;font-weight:700;color:var(--amber-ink)}
.bento--drei .mehr-text{display:none}
@media(min-width:420px){
  .bento--drei{gap:12px}
  .bento--drei .kachel{padding:16px 14px 16px}
  .bento--drei .kachel img{height:92px}
  .bento--drei .kachel h3{font-size:16px}
}
@media(min-width:640px){
  .bento--drei{gap:16px}
  .bento--drei .kachel{padding:22px 20px 20px}
  .bento--drei .kachel img{height:130px;margin-bottom:14px}
  .bento--drei .kachel h3{font-size:20px;min-height:0}
  .bento--drei .kachel p{display:block;margin-top:6px;max-width:none;font-size:14px;line-height:1.5}
  .bento--drei .kachel__mehr{font-size:14px;padding-top:14px}
  .bento--drei .mehr-text{display:inline}
}
@media(min-width:960px){
  .bento--drei .kachel{padding:28px 26px 24px}
  .bento--drei .kachel img{height:170px}
  .bento--drei .kachel h3{font-size:24px}
}

/* ============================================================
   Preis-Rechner: drei Pakete (Starter, Standard, Premium)
   ============================================================ */
.pakete{display:grid;gap:10px}
.paket{border:1.5px solid var(--line);border-radius:18px;background:#fff;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.paket--an{border-color:var(--marine);box-shadow:0 10px 26px -16px rgba(20,33,61,.55)}
.paket__wahl{position:relative;display:grid;gap:4px;width:100%;text-align:left;padding:14px 48px 10px 16px;background:none;cursor:pointer}
.paket__wahl::after{content:"";position:absolute;right:16px;top:16px;width:20px;height:20px;border-radius:50%;border:2px solid var(--line);background:#fff}
.paket--an .paket__wahl::after{border-color:var(--marine);background:radial-gradient(circle,var(--marine) 0 42%,#fff 46%)}
.paket__wahl:focus-visible{outline:2px solid var(--fokus);outline-offset:-2px;border-radius:18px}
.paket__kopf{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:15px}
.paket__kopf b{font-weight:700;color:var(--marine)}
.paket__kopf em{font-style:normal;font-size:11.5px;font-weight:700;background:var(--amber);color:var(--marine);border-radius:999px;padding:3px 9px}
.paket__preis{font-size:clamp(22px,2.4vw,28px);font-weight:700;letter-spacing:-.02em;color:var(--marine);line-height:1.15;white-space:nowrap}
.paket__preis--leer{font-size:15px;font-weight:600;color:var(--paper-faint);letter-spacing:0;white-space:normal}
.paket__kurz{font-size:13.5px;line-height:1.4;color:var(--paper-dim)}
.paket__liste{border-top:1px solid var(--line-2);padding:0 16px}
.paket__liste summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-size:13.5px;font-weight:600;color:var(--amber-ink);list-style:none}
.paket__liste summary::-webkit-details-marker{display:none}
.paket__liste summary::after{content:"+";margin-left:8px;font-weight:700}
.paket__liste[open] summary::after{content:"–"}
.paket__liste ul{margin:0 0 12px;padding:0;list-style:none;font-size:13.5px;line-height:1.45;color:var(--paper-dim);display:grid;gap:5px}
.paket__liste li b{color:var(--marine);font-variant-numeric:tabular-nums}
.pakete__hinweis{margin:2px 0 0;font-size:13.5px;line-height:1.55;color:var(--paper-dim)}