/* 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-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-liste :is(button, a) { background:none; border:0; border-bottom:2px solid transparent; padding:8px 0; font-family:inherit; color:var(--kw-schwarz); text-align:left; text-decoration:none; cursor:pointer; }
.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-liste.klein :is(button, a) { font-size:20px; border-bottom-width:1px; }
.kw-menue-liste :is(button, a):hover { 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-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-spalten :is(button, a.kw-fuss-link) { display:inline-block; background:none; border:0; padding:4px 0; font-family:inherit; font-size:15px; line-height:1.5; color:var(--kw-ink-2); text-align:left; text-decoration:none; cursor:pointer; }
.kw-fuss-spalten :is(button, a.kw-fuss-link):hover { 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-schwester { display:inline-flex; align-items:baseline; gap:12px; color:var(--kw-schwarz); text-decoration:none; }
.kw-schwester .kw-wortmarke { height:20px; align-self:center; }
.kw-schwester small { font-size:14px; color:var(--kw-ink-2); }
.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; }
/* 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); }
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; }

/* ---------- 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; } }
@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-felder, .kw-felder.anrede { grid-template-columns:minmax(0,1fr); }
  .kw-done { padding:24px 16px; }
}
@media (max-width:480px) { .kw-kopf :is(.kw-strich, .kw-quadrat) { display:none; } .kw-kopf .kw-wortmarke { height:20px; } }