/* Kurth Web – gemeinsames Aussehen der Kundenseiten murale., imber., murus. (Stand 2026-10-05)
   Ein Satz Namen mit Präfix kw-. Werte aus den bisherigen Seiten übernommen (imber. ?kunde und murus., identisch):
   Schwarz/Weiss, Grau nur funktional, League Spartan Regular/Bold (lokal, keine Anfrage an Google),
   8-pt-Raster, eckig (2 px), keine Schatten, keine Verläufe.
   Enthält: Schrift, Farben, Seitenbreite, Kopf mit Menü, Seitenfuss mit Schwestermarken, Knöpfe,
   Formularfelder (Kontaktformular), Dankeseite, «Bewegung reduzieren».
   Seitenspezifisches (Abschnitte, Konfigurator, 3D) bleibt in der jeweiligen Seite. */

@font-face { font-family:"League Spartan"; src:url("schrift/LeagueSpartan-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"League Spartan"; src:url("schrift/LeagueSpartan-Bold.ttf") format("truetype"); font-weight:700; font-style:normal; font-display:swap; }

:root {
  --kw-schwarz:#000;      /* Text, Linien aktiv, Knopf */
  --kw-ink-2:#1A1A1A;     /* Fliesstext zweite Stufe, Knopf beim Überfahren */
  --kw-grau:#8C8C8C;      /* Hinweise, Überzeilen (nur funktional) */
  --kw-linie:#D9D9D9;     /* Trennlinien, Rahmen */
  --kw-flaeche:#F2F2F2;   /* graue Fläche (Abschnitte, Hinweise) */
  --kw-papier:#fff;
  --kw-radius:2px;
  --kw-kopf-h:64px;
  --kw-schrift:"League Spartan", Arial, sans-serif;
}

/* ---------- Seitenbreite ---------- */
.kw-wrap { max-width:1280px; margin:0 auto; padding-inline:24px; }
.kw-eyebrow { font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--kw-grau); margin:0 0 12px; line-height:1.4; }

/* ---------- Knöpfe ---------- */
.kw-primaer, .kw-sekundaer, .kw-geist { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 24px; border-radius:var(--kw-radius); font-family:var(--kw-schrift); font-size:15px; font-weight:700; line-height:1; text-decoration:none; white-space:nowrap; cursor:pointer; }
.kw-primaer { background:var(--kw-schwarz); color:#fff; border:1px solid var(--kw-schwarz); }
.kw-primaer:hover { background:var(--kw-ink-2); border-color:var(--kw-ink-2); color:#fff; }
.kw-sekundaer { background:#fff; color:var(--kw-schwarz); border:1px solid var(--kw-schwarz); padding:0 20px; }
.kw-sekundaer:hover { background:var(--kw-flaeche); }
.kw-geist { background:transparent; color:#fff; border:1px solid #fff; padding:0 20px; }
.kw-geist:hover { background:#fff; color:#000; }
.kw-klein { min-height:40px; padding:0 16px; font-size:14px; }
:is(.kw-primaer, .kw-sekundaer):disabled { opacity:.4; cursor:not-allowed; }
.kw-link { background:none; border:0; min-height:40px; padding:0 4px; font-family:var(--kw-schrift); font-size:14px; font-weight:700; color:var(--kw-schwarz); text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.kw-aktionen { display:flex; gap:16px; flex-wrap:wrap; align-items:center; margin-top:24px; }

/* ---------- Kopf: Menü links, Marke mittig (Wortmarke | Strich | KURTH-Quadrat), Knöpfe rechts ---------- */
.kw-kopf { position:sticky; top:0; z-index:30; display:block; background:#fff; border-bottom:1px solid var(--kw-linie); font-family:var(--kw-schrift); transition:background-color .35s ease, border-color .35s ease; }
.kw-kopf-grid { height:var(--kw-kopf-h); display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:16px; }
.kw-h-links { display:flex; align-items:center; }
.kw-h-rechts { display:flex; justify-content:flex-end; align-items:center; gap:24px; }
.kw-menue-knopf { display:inline-flex; align-items:center; gap:12px; min-height:40px; padding:0 4px; background:none; border:0; font-family:inherit; font-size:14px; font-weight:700; letter-spacing:.02em; color:var(--kw-schwarz); cursor:pointer; }
.kw-kopf .kw-menue-knopf, .kw-kopf .kw-menue-knopf:hover { background:none; border:0; border-radius:0; box-shadow:none; }
.kw-burger { position:relative; display:block; width:20px; height:12px; flex:none; }
.kw-burger i { position:absolute; left:0; right:0; height:2px; background:currentColor; transition:transform .3s cubic-bezier(.2,.7,.2,1), top .3s; }
.kw-burger i:first-child { top:0; } .kw-burger i:last-child { top:10px; }
.kw-menue-offen .kw-burger i:first-child { top:5px; transform:rotate(45deg); }
.kw-menue-offen .kw-burger i:last-child { top:5px; transform:rotate(-45deg); }
.kw-marke { display:flex; align-items:center; gap:14px; color:var(--kw-schwarz); text-decoration:none; }
.kw-marke:hover { color:var(--kw-schwarz); }
.kw-wortmarke { display:block; height:28px; width:auto; flex:none; color:inherit; }
.kw-strich { display:block; width:1px; height:28px; background:currentColor; flex:none; }
.kw-quadrat { display:block; width:34px; height:34px; outline:1px solid #000; outline-offset:-1px; flex:none; }
.kw-h-tel { display:none; align-items:center; gap:6px; min-height:40px; font-size:14px; font-weight:700; color:var(--kw-schwarz); text-decoration:none; white-space:nowrap; }
.kw-h-tel:hover { text-decoration:underline; text-underline-offset:4px; }
.kw-h-entwurf { min-height:40px; padding:0 4px; background:none; border:0; font-family:inherit; font-size:14px; font-weight:700; color:var(--kw-schwarz); cursor:pointer; white-space:nowrap; }
.kw-h-entwurf:hover { text-decoration:underline; text-underline-offset:4px; }
/* im Konfigurator: Telefon statt «Jetzt …» und «Mein Entwurf» */
html.kw-auf-konfig .kw-h-tel { display:inline-flex; }
html.kw-auf-konfig .kw-h-rechts :is(.kw-primaer, .kw-h-entwurf) { display:none; }
/* durchsichtig über dem Titelbild */
.kw-kopf.kw-auf-bild { background:transparent; border-bottom-color:transparent; }
.kw-kopf.kw-auf-bild :is(.kw-menue-knopf, .kw-marke, .kw-marke:hover, .kw-h-entwurf) { color:#fff; }
.kw-kopf.kw-auf-bild .kw-quadrat { filter:invert(1); outline-color:#000; }
.kw-kopf.kw-auf-bild .kw-primaer { background:#fff; color:#000; border-color:#fff; }
.kw-kopf.kw-auf-bild .kw-primaer:hover { background:var(--kw-linie); border-color:var(--kw-linie); }

/* ---------- Menü ---------- */
.kw-menue { position:fixed; left:0; right:0; top:var(--kw-kopf-h); bottom:0; z-index:40; background:#fff; overflow:auto; border-top:1px solid var(--kw-linie); font-family:var(--kw-schrift); animation:kw-ein .35s cubic-bezier(.2,.7,.2,1); }
@keyframes kw-ein { from { opacity:0; transform:translate3d(0,-8px,0); } to { opacity:1; transform:none; } }
body.kw-menue-auf { overflow:hidden; }
.kw-menue-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:48px; padding-block:56px 80px; }
.kw-menue-liste { display:flex; flex-direction:column; align-items:flex-start; }
.kw-menue .kw-menue-liste :is(button, a) { height:auto; min-height:0; margin:0; background:none; border:0; border-bottom:2px solid transparent; border-radius:0; box-shadow:none; padding:8px 0; font-family:inherit; font-weight:400; letter-spacing:normal; text-transform:none; color:var(--kw-schwarz); text-align:left; text-decoration:none; cursor:pointer; }
.kw-menue .kw-menue-liste.gross :is(button, a) { font-size:clamp(26px,3.6vw,48px); font-weight:700; letter-spacing:-.02em; line-height:1.1; }
.kw-menue .kw-menue-liste.klein :is(button, a) { font-size:20px; line-height:1.3; border-bottom-width:1px; }
.kw-menue .kw-menue-liste :is(button, a):hover { background:none; color:var(--kw-schwarz); border-bottom-color:var(--kw-schwarz); }

/* ---------- Seitenfuss ---------- */
.kw-fuss { display:block; background:#fff; border-top:1px solid var(--kw-linie); padding-block:64px 32px; font-family:var(--kw-schrift); color:var(--kw-schwarz); }
.kw-fuss-marke { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; padding-bottom:40px; border-bottom:1px solid var(--kw-linie); }
.kw-fuss-text { max-width:460px; }
.kw-fuss-text .kw-wortmarke { height:38px; margin-bottom:14px; }
.kw-fuss-text p { margin:0; font-size:14px; line-height:1.5; }
.kw-slogan { display:block; width:180px; height:auto; }
.kw-fuss-zeichen { display:flex; align-items:flex-end; gap:32px; flex-shrink:0; }
/* «Swiss Made» (Armbrust): feste Farben der Vorlage, nur in der Grösse angepasst */
.kw-swiss { display:block; width:72px; height:auto; aspect-ratio:178.54/205.95; flex-shrink:0; }
.kw-fuss-spalten { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; padding-block:40px; }
.kw-fuss-spalten h3 { margin:0 0 16px; font-size:16px; font-weight:700; line-height:1.05; letter-spacing:-.01em; }
.kw-fuss-spalten ul { list-style:none; margin:0; padding:0; }
.kw-fuss .kw-fuss-spalten :is(button, a.kw-fuss-link) { display:inline-block; height:auto; min-height:0; margin:0; background:none; border:0; border-radius:0; box-shadow:none; padding:4px 0; font-family:inherit; font-size:15px; font-weight:400; letter-spacing:normal; text-transform:none; line-height:1.5; color:var(--kw-ink-2); text-align:left; text-decoration:none; cursor:pointer; }
.kw-fuss .kw-fuss-spalten :is(button, a.kw-fuss-link):hover { background:none; text-decoration:underline; color:var(--kw-schwarz); }
.kw-adresse { margin:0; font-size:15px; line-height:1.7; color:var(--kw-ink-2); }
.kw-adresse a { color:inherit; text-decoration:none; }
.kw-adresse a:hover { text-decoration:underline; color:var(--kw-schwarz); }
/* die zwei Schwestermarken */
.kw-fuss-schwestern { display:flex; align-items:center; gap:16px 40px; flex-wrap:wrap; padding-block:0 40px; }
.kw-fuss-schwestern > span { font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--kw-grau); }
.kw-fuss a.kw-schwester { display:inline-flex; align-items:baseline; gap:12px; color:var(--kw-schwarz); text-decoration:none; }
.kw-fuss a.kw-schwester .kw-wortmarke { height:20px; align-self:center; }
.kw-fuss a.kw-schwester small { font-size:14px; font-weight:400; color:var(--kw-ink-2); text-decoration:none; }
.kw-fuss a.kw-schwester:hover small { text-decoration:underline; text-underline-offset:4px; color:var(--kw-schwarz); }
.kw-fuss-leiste { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding-top:24px; border-top:1px solid var(--kw-linie); font-size:13px; color:var(--kw-grau); }
.kw-fuss-leiste a { color:inherit; }
/* «Meine Angaben löschen»: Knopf, der wie ein Link aussieht; Bestätigung darunter */
.kw-fuss-leiste button.kw-daten-loeschen { all:unset; display:inline; font:inherit; color:inherit; text-decoration:underline; cursor:pointer; }
.kw-fuss-leiste button.kw-daten-loeschen:focus-visible { outline:2px solid var(--kw-schwarz); outline-offset:2px; }
.kw-daten-meldung { margin:12px 0 0; font-size:14px; font-weight:700; color:var(--kw-schwarz); }
.kw-daten-meldung[hidden] { display:none; }
/* Schalter «Bewegung reduzieren» */
label.kw-schalter { display:inline-flex; align-items:center; gap:12px; position:relative; margin:0; font-size:14px; font-weight:700; color:var(--kw-schwarz); cursor:pointer; }
.kw-schalter input { position:absolute; opacity:0; width:1px; height:1px; }
.kw-schalter-ui { position:relative; display:inline-block; flex:0 0 40px; width:40px; height:24px; border:2px solid var(--kw-schwarz); background:#fff; }
.kw-schalter-ui::after { content:''; position:absolute; left:2px; top:2px; width:16px; height:16px; background:var(--kw-schwarz); transition:transform .2s; }
.kw-schalter input:checked + .kw-schalter-ui { background:var(--kw-schwarz); }
.kw-schalter input:checked + .kw-schalter-ui::after { background:#fff; transform:translateX(16px); }
.kw-schalter input:focus-visible + .kw-schalter-ui { outline:2px solid var(--kw-schwarz); outline-offset:2px; }

/* ---------- Formularfelder (Kontaktformular) ---------- */
.kw-formular label.kw-feld { display:block; margin:12px 0 6px; font-size:13px; font-weight:700; color:var(--kw-schwarz); }
.kw-formular :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea) { width:100%; min-height:48px; padding:0 12px; border:1px solid var(--kw-linie); border-radius:var(--kw-radius); background:#fff; font-family:var(--kw-schrift); font-size:16px; color:var(--kw-schwarz); font-variant-numeric:tabular-nums; }
.kw-formular textarea { min-height:96px; padding:12px; resize:vertical; }
.kw-formular :is(input, select, textarea):focus { outline:none; border-color:var(--kw-schwarz); }
/* !important: Seiten stylen ihre Felder oft mit stärkeren Selektoren (z. B. murus. .kd-k-panel …); die Markierung muss trotzdem sichtbar sein */
.kw-formular :is(input, select, textarea).kw-fehlt { border:2px solid var(--kw-schwarz) !important; }
.kw-formular h3 { font-size:16px; margin:32px 0 12px; padding-top:24px; border-top:1px solid var(--kw-linie); }
.kw-felder { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; }
.kw-felder.eins { grid-template-columns:minmax(0,1fr); }
.kw-felder.plz { grid-template-columns:minmax(0,1fr) minmax(0,2fr); }
.kw-felder.anrede { grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,2fr); }
.kw-feld-hilfe { margin:6px 0 0; font-size:13px; color:var(--kw-grau); }
.kw-feld-fehler { margin:6px 0 0; font-size:13px; font-weight:700; color:var(--kw-schwarz); }
.kw-formular .kw-hinweis { margin:12px 0 0; font-size:14px; line-height:1.5; color:var(--kw-grau); }   /* Hinweis statt Feld, z. B. Anfahrt (ERP rechnet aus der PLZ) */
label.kw-check { text-transform:none; letter-spacing:normal; display:flex; gap:12px; align-items:flex-start; margin:8px 0 0; padding:12px 0; font-size:15px; color:var(--kw-schwarz); cursor:pointer; }
.kw-check input { width:20px; height:20px; margin:2px 0 0; flex:none; accent-color:#000; }
.kw-check b { display:block; font-size:15px; } .kw-check small { display:block; font-size:13px; color:var(--kw-grau); }
.kw-fehler { margin:0 0 16px; padding:16px 20px; background:#000; color:#fff; font-size:14px; }
.kw-fehler::before { content:'⚠'; margin-right:8px; }
/* Lockfeld gegen Spam (kontakt.js): ausserhalb des sichtbaren Bereichs, bewusst nicht display:none */
.kw-honig { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
.kw-nur-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.kw-hinweis { margin:16px 0 0; padding:12px 16px; background:var(--kw-flaeche); border:1px solid var(--kw-linie); border-left:2px solid var(--kw-schwarz); font-size:14px; }

/* ---------- Dankeseite ---------- */
.kw-danke { padding-block:48px 80px; }
.kw-done { max-width:880px; padding:32px; background:#fff; border:2px solid var(--kw-schwarz); }
.kw-nr { margin:8px 0 16px; font-size:32px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.kw-done .kw-status { margin:16px 0 0; font-size:15px; line-height:1.5; }

/* ---------- Zusammenfassung des Richtpreises (zusammenfassung.js, Entscheid Fabian 2026-10-07): Zeilen ohne Betrag, drei Summen ---------- */
.kw-zf { margin:12px 0; font-family:var(--kw-schrift); font-size:14px; line-height:1.4; color:var(--kw-schwarz); }
.kw-zf-zeilen { list-style:none; margin:0; padding:0; border-top:1px solid var(--kw-linie); }
.kw-zf-zeile { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:8px 0; border-bottom:1px solid var(--kw-linie); }
.kw-zf-text { min-width:0; overflow-wrap:anywhere; }
.kw-zf-zusatz { font-size:12px; color:var(--kw-grau); }
.kw-zf-menge { flex:none; color:var(--kw-grau); white-space:nowrap; font-variant-numeric:tabular-nums; }
.kw-zf-summen { margin:0; padding:0; }
.kw-zf-summe { display:flex; justify-content:space-between; gap:16px; padding:8px 0; border-bottom:1px solid var(--kw-linie); font-variant-numeric:tabular-nums; }
.kw-zf-summe dt, .kw-zf-summe dd { margin:0; }
.kw-zf-summe dd { white-space:nowrap; text-align:right; }
.kw-zf-summe[data-summe="brutto"] { border-bottom:1px solid var(--kw-schwarz); font-weight:700; }
.kw-zf-hinweis { margin:8px 0 0; font-size:12px; color:var(--kw-grau); }
/* Entscheid Fabian 2026-10-09: was noch dazukommt, direkt unter dem bisher berechneten Richtpreis */
.kw-zf-zusaetzlich { margin:8px 0 0; font-size:14px; }
.kw-zf-zusaetzlich p { margin:0 0 4px; font-weight:700; }
.kw-zf-zusaetzlich ul { margin:0; padding-left:18px; }

/* ---------- Bewegung reduzieren: Schalter (html.kw-ruhig) und Systemeinstellung ---------- */
html.kw-ruhig *, html.kw-ruhig *::before, html.kw-ruhig *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width:1000px) { .kw-fuss-spalten { grid-template-columns:repeat(2,minmax(0,1fr)); } .kw-h-entwurf { display:none; } .kw-fuss-schwestern > span { flex-basis:100%; } }
@media (max-width:900px) { .kw-menue-grid { grid-template-columns:minmax(0,1fr); gap:32px; padding-block:32px 56px; } }
@media (max-width:640px) {
  .kw-wrap { padding-inline:16px; }
  .kw-menue-wort { display:none; }
  .kw-h-rechts .kw-primaer { padding:0 12px; font-size:13px; }
  .kw-kopf .kw-wortmarke { height:21px; } .kw-marke { gap:8px; } .kw-strich { height:20px; } .kw-quadrat { width:28px; height:28px; }
  .kw-h-tel span { display:none; }
  .kw-fuss-spalten { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
  .kw-fuss-marke { flex-direction:column; align-items:flex-start; }
  .kw-fuss-zeichen { gap:24px; } .kw-swiss { width:60px; }
  /* Prüfung 10.10.2026: je nach Seite stand «Auch von KURTH» mal neben, mal über der ersten Marke – jetzt immer darüber, je Marke eine Zeile */
  .kw-fuss-schwestern { flex-direction:column; align-items:flex-start; gap:14px; }
  .kw-felder, .kw-felder.anrede { grid-template-columns:minmax(0,1fr); }
  .kw-done { padding:24px 16px; }
}
/* Prüfung 10.10.2026: bei 320 px überdeckte «Jetzt gestalten» die Wortmarke (die rechte Spalte war schmaler als der Knopf). Auf schmalen
   Handys steht die Marke darum mittig zwischen Menü und Knopf statt mittig auf der Seite – dann kann sich nichts überdecken. */
@media (max-width:480px) {
  .kw-kopf :is(.kw-strich, .kw-quadrat) { display:none; } .kw-kopf .kw-wortmarke { height:20px; max-width:100%; }
  .kw-kopf-grid { grid-template-columns:auto minmax(0,1fr) auto; gap:12px; }
  .kw-kopf .kw-marke { justify-self:center; min-width:0; max-width:100%; }
  .kw-h-rechts { gap:12px; }
  .kw-h-rechts .kw-primaer { padding:0 10px; font-size:12px; }
}

/* Cookie-Hinweis und Cookie-Einstellungen: eigene Datei gemeinsam/cookies.css (lädt gemeinsam/cookies.js; Auftrag Fabian 12.10.2026).
   Der frühere Statistik-Hinweis (.kw-statistik) ist darin aufgegangen. */