/* ═══════════════════════════════════════════════════════
   DESIGN TOKENS — exakte Werte aus dem Styleguide Dr. Maurer
   (identisch mit katjamaurer.ch, part-head.txt Fehlerchallenge)
═══════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Glacial Indifference';
  src: url('/assets/fonts/GlacialIndifference-Regular.woff2') format('woff2'),
       url('/assets/fonts/GlacialIndifference-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Glacial Indifference';
  src: url('/assets/fonts/GlacialIndifference-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/assets/fonts/SourceSerif4-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/assets/fonts/SourceSerif4-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/assets/fonts/SourceSerif4-Italic-400.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  /* Primärfarbe exakt aus Styleguide: RGB 4/65/65, HEX #044141 */
  --brand:        #044141;
  --brand-mid:    #0a5555;
  --brand-light:  #e8f0f0;
  --brand-pale:   #f2f7f7;

  --gold:         #c8a55a;
  --gold-light:   #f0e4c4;

  --white:        #ffffff;
  --off-white:    #f8f6f2;
  --text:         #1a2a2a;
  --text-mid:     #3d5555;
  /* Auf Weiss 4.91:1, auf Off-White und Pale 4.5+:1, erfüllt damit WCAG AA. */
  --text-muted:   #5e7575;

  /* Werkstatt-Welt (seit 25.09.2026): Lochwand als Bühne, davor Flipchart (Katja)
     und Bildschirm (Michi), goldene Werkzeug-Umrisse. Details in welt.css. */
  --wand:           #044141;
  --wand-loch:      #033333;
  --wand-tief:      #022a2a;
  --text-wand:      #d3e1de;   /* Fliesstext auf der Wand, 8.5:1 */
  --text-wand-leise:#a9c7c2;   /* Nebentext auf der Wand, 6.3:1 */
  --papier:         #fdfdfb;
  --raster:         #e3e7e6;
  --screen:         #0b2e2e;
  --screen-flaeche: #103838;
  --screen-linie:   rgba(255,255,255,.11);
  --screen-text:    #b9cfcb;   /* Nebentext auf dem Bildschirm, 7.8:1 */
  --screen-text-leise: #9fbdb8; /* Hinweise und Formularnotizen auf dem Bildschirm */
  --filz-rot:       #c4473a;
  --leuchtstift:    rgba(200,165,90,.46);
  --gedruckt:       #b3bebc;
  --zink:           #b8bec0;
  --zink-hell:      #eef0f0;
  --zink-tief:      #737b7d;
  --schild:         #f7f7f5;
  --schild-unten:   #edeee9;
  --gravur:         #1f2d2c;
  --gravur-text:    #3c4a48;   /* Fliesstext auf Schild und Platte */
  --gravur-leise:   #56625f;   /* Kleintext auf dem Schild */
  --grafit-weich:   #45534f;
  --tinte-weich:    #34423f;   /* lange Antworten auf Papier */
  --tinte-leise:    #4a5856;   /* Hinweise im weissen Kit-Formular */
  --papier-linie:   #d4dbd9;   /* Trennlinien auf Papier */
  --gold-hover:     #d6b66e;
  --fuss-leise:     #8fb0ab;   /* Copyright-Zeile im Fuss, 6.6:1 */

  /* Wie katjamaurer.ch: Überschriften/Buttons/Nav in Glacial, Fliesstext Helvetica/Arial */
  --font-main:    'Glacial Indifference', 'Josefin Sans', system-ui, sans-serif;
  --font-text:    'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-serif:   'Source Serif 4', Georgia, serif;

  --radius-sm:    3px;
  --radius:       6px;
  --max-w:        1180px;

  /* Kompakte Abstände wie auf der katjamaurer-Startseite (Michis Vorgabe) */
  --sp-section:   44px;
  --sp-gap:       20px;
}
@media (min-width: 768px)  { :root { --sp-section: 60px; --sp-gap: 32px; } }
@media (min-width: 1024px) { :root { --sp-section: 76px; } }

/* ── Reset ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
main { display: block; }

/* ── Layout ────────────────────────────────────────── */
.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 20px; }
@media (min-width: 640px)  { .wrap { padding: 0 32px; } }
@media (min-width: 1024px) { .wrap { padding: 0 40px; } }

/* ── Typografie ────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-main);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2rem, 6vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.6rem); }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.4rem); }
p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }

/* ── Buttons ───────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 28px;
  font-family: var(--font-main);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  transition: background .22s, color .22s, border-color .22s, transform .15s;
  cursor: pointer;
  line-height: 1.2;
  text-align: center;
}
.btn:active { transform: scale(.98); }
.btn-gold { background: var(--gold); color: var(--brand); border-color: var(--gold); }
/* Invertiert statt transparent: Gold auf Teal ergibt 4.89:1, der Goldrand haelt
   den Knopf auch auf dunklem Grund sichtbar. */
.btn-gold:hover { background: var(--brand); color: var(--gold); border-color: var(--gold); }
.btn-brand { background: var(--brand); color: var(--white); border-color: var(--brand); }
.btn-brand:hover { background: transparent; color: var(--brand); }
.btn-outline-white { background: transparent; color: var(--white); border-color: rgba(255,255,255,.5); }
.btn-outline-white:hover { background: var(--white); color: var(--brand); border-color: var(--white); }
@media (max-width: 640px) { .btn { width: 100%; } }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Header ────────────────────────────────────────── */
.site-header { background: var(--brand); padding: 14px 0; position: sticky; top: 0; z-index: 90; box-shadow: 0 2px 12px rgba(0,0,0,.18); transition: box-shadow .28s ease; }
/* Ganz oben liegt der Header flach auf, ab dem ersten Scrollen bekommt er eine
   Kante. Beide Klassen setzt main.js; ohne JavaScript bleibt der Schatten wie bisher. */
.site-header.sh-dyn { box-shadow: none; }
.site-header.sh-dyn.gescrollt { box-shadow: 0 3px 16px rgba(0,0,0,.26); }
.site-header .wrap { display: flex; align-items: center; gap: 18px; }
.site-logo { display: block; flex-shrink: 0; }
.site-logo img { width: 190px; height: auto; }
@media (min-width: 900px) { .site-logo img { width: 230px; } }
/* ── Burger-Menue (nur unter 900px) ────────────────────
   Der Knopf steht im HTML auf hidden und wird per JS eingeblendet, damit ohne
   JavaScript kein funktionsloser Knopf erscheint. Die Links liegen dann im
   Footer, der ohne JS erreichbar bleibt. */
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-left: 10px;
  background: transparent; border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--radius-sm); cursor: pointer; flex-shrink: 0;
}
.nav-toggle[hidden] { display: none; }
@media (min-width: 900px) { .nav-toggle { display: none; } }
/* Drei Striche aus einem Element plus zwei Pseudo-Elementen. */
.nav-toggle-strich, .nav-toggle-strich::before, .nav-toggle-strich::after {
  display: block; width: 20px; height: 2px; background: var(--white);
  border-radius: 2px; transition: transform .18s ease, opacity .18s ease;
}
.nav-toggle-strich::before, .nav-toggle-strich::after { content: ''; position: absolute; }
.nav-toggle-strich { position: relative; }
.nav-toggle-strich::before { transform: translateY(-6px); }
.nav-toggle-strich::after  { transform: translateY(6px); }
/* Offen: Kreuz statt Striche. */
.nav-toggle[aria-expanded="true"] .nav-toggle-strich { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-strich::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-strich::after  { transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .nav-toggle-strich, .nav-toggle-strich::before, .nav-toggle-strich::after { transition: none; }
}

.site-nav { display: none; margin-left: auto; }
/* Unter 900px klappt die Navigation als Panel unter dem Header auf. */
@media (max-width: 899px) {
  .site-nav.offen {
    display: flex; flex-direction: column;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--brand);
    border-top: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 14px 30px rgba(0,0,0,.28);
    padding: 6px 0 10px;
    margin: 0;
    /* Nie ueber den Bildschirm hinaus: Rest unter Header und Sticky-Leiste scrollt. */
    max-height: calc(100vh - 72px - 52px);
    overflow-y: auto;
  }
  /* Solange das Menue offen ist, tritt der Einwilligungs-Hinweis zurueck,
     sonst verdeckt er die untersten Menuepunkte. */
  body.menu-offen .consent-banner { display: none; }
  .site-nav.offen a.navlink {
    display: block;
    font-family: var(--font-main);
    color: var(--white);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255,255,255,.09);
  }
  .site-nav.offen a.navlink:last-child { border-bottom: 0; }
}
/* Zusatzlinks gibt es nur im Burger-Menue, der Desktop-Header hat dafuer keinen Platz. */
@media (min-width: 900px) { .nur-mobil { display: none; } }
@media (min-width: 900px) {
  .site-nav { display: flex; align-items: center; gap: 20px; }
  .site-nav a.navlink {
    font-family: var(--font-main);
    color: rgba(255,255,255,.78);
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
  }
  .site-nav a.navlink:hover { color: var(--white); border-bottom-color: var(--gold); }
}
.header-tel {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--white);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  white-space: nowrap;
}
@media (min-width: 900px) { .header-tel { margin-left: 26px; } }
.header-tel svg { width: 18px; height: 18px; fill: var(--gold); }
.header-tel span { display: none; }
@media (min-width: 640px) { .header-tel span { display: inline; } }
.header-cta { display: none; }
@media (min-width: 768px) { .header-cta { display: inline-flex; margin-left: 14px; padding: 12px 16px; font-size: .74rem; width: auto; white-space: nowrap; } }
@media (min-width: 1180px) { .header-cta { margin-left: 18px; padding: 12px 20px; font-size: .78rem; } }
/* «Kostenloses» erst zeigen, wenn der Header dafür Platz hat, sonst laeuft der Knopf ueber. */
.cta-zusatz { display: none; }
@media (min-width: 1160px) { .cta-zusatz { display: inline; } }
/* Enger Bereich: Navigation da, aber wenig Platz. Alles etwas kompakter, damit nichts ueberlaeuft. */
@media (min-width: 900px) and (max-width: 1159px) {
  .site-logo img { width: 168px; }
  .site-nav { gap: 14px; }
  .site-nav a.navlink { font-size: .74rem; letter-spacing: .06em; }
  .header-tel { font-size: .86rem; margin-left: 16px; }
  .header-cta { margin-left: 12px; padding: 11px 14px; }
}

/* ── Mobile Sticky-Leiste unten ────────────────────── */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #032f2f;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -4px 16px rgba(0,0,0,.22);
}
.sticky-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 10px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}
.sticky-cta .st-tel { background: var(--brand); color: var(--white); }
.sticky-cta .st-tel svg { width: 16px; height: 16px; fill: var(--gold); }
.sticky-cta .st-termin { background: var(--gold); color: var(--brand); }
@media (min-width: 768px) { .sticky-cta { display: none; } }
body { padding-bottom: 52px; }
@media (min-width: 768px) { body { padding-bottom: 0; } }

/* ── Footer ────────────────────────────────────────── */
.site-footer { background: #032f2f; color: rgba(255,255,255,.65); padding: 52px 0 26px; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 34px; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; } }
.site-footer p { font-size: .92rem; line-height: 1.65; }
.footer-col h4 {
  color: var(--white);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer-col a { color: rgba(255,255,255,.65); text-decoration: none; font-size: .95rem; }
.footer-col a:hover { color: var(--gold); }
.footer-legal {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-size: .82rem;
}
.footer-legal span { color: var(--fuss-leise); }   /* 6.6:1 auf der Fusszeile, vorher 3.1:1 */
.footer-legal a { color: var(--text-wand-leise); text-decoration: none; }   /* 8.5:1, vorher 4.2:1 */
.footer-legal a:hover { color: var(--gold); }


/* Formular */
.form-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 30px 24px;
}
@media (min-width: 768px) { .form-card { padding: 36px 36px; } }
.form-card label { display: block; font-size: .85rem; font-weight: 700; color: var(--brand); margin: 16px 0 6px; }
.form-card label .opt { font-weight: 400; color: var(--text-muted); }
.form-card input, .form-card select, .form-card textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #cfdede;
  border-radius: var(--radius-sm);
  font-family: var(--font-main);
  font-size: 1rem;
  color: var(--text);
  background: var(--white);
}
.form-card textarea { min-height: 110px; resize: vertical; }
.form-card select {
  height: 48px;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23044141' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
}
.form-card input:focus, .form-card select:focus, .form-card textarea:focus { outline: 2px solid var(--brand-mid); border-color: var(--brand-mid); }
.form-card .btn { width: 100%; margin-top: 20px; }
.form-card .btn[disabled] { opacity: .6; cursor: wait; }
.form-ok {
  background: var(--brand-light);
  border-radius: var(--radius-sm);
  padding: 16px 16px;
  color: var(--brand);
  font-weight: 600;
  margin-top: 16px;
}
.form-err {
  background: #fdecea;
  border-radius: var(--radius-sm);
  padding: 16px 16px;
  color: #c62828;
  margin-top: 16px;
}
/* Hinweis direkt unter dem E-Mail-Feld: Telefon oder E-Mail genuegt. */
.form-hinweis { font-size: .8rem; color: var(--text-muted); margin: -6px 0 14px; }
.form-note { font-size: .78rem; color: var(--text-muted); margin-top: 14px; }
.form-note a { color: var(--text-muted); }
.hp-feld { position: absolute; left: -9999px; top: -9999px; }

/* ── Bild vergroessern (Lightbox) ──────────────────────
   Der Knopf umschliesst das Bild, damit es auch mit der Tastatur erreichbar ist.
   Das grosse Bild wird erst beim Oeffnen geladen (data-gross). */
.bild-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radius-sm); }
.bild-zoom img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); }
.bild-zoom:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
/* Nur an Geraeten mit echtem Mauszeiger: hebt sich leicht, damit erkennbar ist,
   dass hier etwas passiert. Auf dem Handy bliebe der Zustand sonst kleben. */
@media (hover: hover) {
  .bild-zoom { transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease; }
  .bild-zoom:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.24); }
}
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(3, 30, 30, .93);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; cursor: zoom-out;
  /* Auf schmalen Schirmen laesst sich das grosse Bild schieben, sonst waere es
     genauso unlesbar wie vorher. */
  overflow: auto; -webkit-overflow-scrolling: touch;
}
.lightbox img {
  width: auto; height: auto;
  min-width: 900px;              /* so breit, dass die Schrift lesbar bleibt */
  max-width: none; max-height: none;
  border-radius: var(--radius-sm); box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
/* Ab Tabletbreite passt das Bild ohnehin auf den Schirm. */
@media (min-width: 940px) {
  .lightbox img { min-width: 0; max-width: 100%; max-height: 92vh; }
}
.lightbox-zu {
  position: absolute; top: 12px; right: 12px;
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3);
  color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.lightbox-hinweis { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.7); font-size: .8rem; }

/* Consent-Banner */
.consent-banner {
  position: fixed;
  left: 12px; right: 12px;
  /* Sitzt oberhalb der mobilen Sticky-Leiste (52px), damit «Anrufen» sichtbar bleibt. */
  bottom: calc(52px + 10px);
  z-index: 200;
  max-width: 520px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid rgba(4,65,65,.18);
  border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(0,0,0,.28);
  padding: 15px 16px;
}
@media (min-width: 768px) { .consent-banner { left: auto; right: 24px; bottom: 24px; padding: 20px; } }
.consent-banner p { font-size: .84rem; line-height: 1.5; color: var(--text-mid); margin-bottom: 12px; }
@media (min-width: 768px) { .consent-banner p { font-size: .88rem; margin-bottom: 14px; } }
.consent-banner p a { color: var(--brand); }
.consent-knoepfe { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 480px) { .consent-knoepfe { flex-direction: row; } }
.consent-knoepfe .btn { flex: 1; padding: 12px 14px; font-size: .78rem; width: auto; }

/* Weiche Farbwechsel statt hartem Umschalten. */
.site-nav a.navlink, .footer-col a, .footer-legal a {
  transition: color .2s ease, border-color .2s ease;
}

@media (prefers-reduced-motion: reduce) {
  
  
  .bild-zoom { transition: none; }
  .site-header { transition: none; }
}



/* ── Teil 1: gilt für alle Seiten ─────────────────────── */
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
::selection { background: var(--gold-light); color: var(--text); }
html { scrollbar-color: var(--zink-tief) var(--wand-tief); }

.btn {
  min-height: 52px;
  padding: 12px 26px;
  font-size: 1rem;
  letter-spacing: .01em;
  text-transform: none;
  border-radius: 6px;
}
.btn-gold { background: var(--gold); color: var(--text); border-color: var(--gold); }
.btn-gold:hover { background: var(--gold-hover); border-color: var(--gold-hover); color: var(--text); }

.site-header { background: var(--wand-tief); box-shadow: none; border-bottom: 0; }
/* Wortmarke: das Zeichen der Dr. Maurer GmbH plus «maurerDigital» in Glacial (Entscheid Michi 25.09.2026).
   Die eingetragene Firma steht weiter in Fusszeile und Impressum (Art. 954a OR). */
.site-logo { display: inline-flex; align-items: center; gap: 11px; color: var(--white); text-decoration: none; }
.site-logo .site-logo__zeichen { width: 28px; height: 28px; flex: 0 0 auto; }
.site-logo__name { font: 400 26px/1 var(--font-main); letter-spacing: .01em; color: var(--white); white-space: nowrap; }
@media (min-width: 900px) and (max-width: 1159px) { .site-logo__name { font-size: 23px; } .site-logo .site-logo__zeichen { width: 25px; height: 25px; } }
@media (max-width: 480px) { .site-logo__name { font-size: 22px; } .site-logo .site-logo__zeichen { width: 24px; height: 24px; } }
/* Fusszeile links: dieselbe Wortmarke, kleiner und leicht zurückgenommen (Michi 25.09.2026).
   Steht nach den Kopf-Regeln, damit sie deren Medienabfragen überschreibt. */
.site-logo--fuss { display: flex; gap: 10px; margin-bottom: 16px; opacity: .85; }
.site-logo--fuss .site-logo__zeichen { width: 24px; height: 24px; }
.site-logo--fuss .site-logo__name { font-size: 22px; }
/* Die Kopfleiste ist eine Wandschiene: flache Zinkkante unten, Schraubenköpfe alle
   240 px. 240 ist ein Vielfaches des Lochrasters (24 px), so sitzen die Schrauben
   über den Lochspalten der Wand (12 + n × 24 px ab dem linken Rand). */
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 9px; pointer-events: none;
  background:
    radial-gradient(circle at 12px 5px, var(--zink-tief) 0 .9px, var(--zink-hell) 1.3px 2.7px, var(--zink-tief) 3.1px 3.6px, transparent 4px) 0 0 / 240px 9px repeat-x,
    linear-gradient(var(--zink-hell), var(--zink-hell)) 0 1px / 100% 1px no-repeat,
    linear-gradient(#1a2323, #1a2323) 0 100% / 100% 1px no-repeat,
    var(--zink);
}
.site-header.sh-dyn { box-shadow: none; }
.site-header.sh-dyn.gescrollt { box-shadow: 0 8px 20px -8px rgba(0,0,0,.55); }
.header-cta { min-height: 44px; gap: 0; }
/* Abstand über margin statt Leerzeichen: Das Leerzeichen im Span fällt im Flex-Knopf weg, der gap verdoppelte sonst den Abstand. */
.header-cta .cta-zusatz { margin-right: .28em; }
@media (min-width: 768px) { .header-cta { padding: 10px 18px; font-size: .92rem; } }
@media (min-width: 900px) {
  .site-nav a.navlink {
    text-transform: none;
    letter-spacing: .01em;
    font-size: .98rem;
    color: rgba(255,255,255,.84);
    padding: 8px 0;
  }
  .site-nav a.navlink:hover { color: var(--white); border-bottom-color: var(--gold); }
}
@media (min-width: 900px) and (max-width: 1159px) {
  .site-nav a.navlink { font-size: .9rem; letter-spacing: 0; }
}
@media (max-width: 899px) {
  .site-nav.offen { background: var(--wand-tief); }
  .site-nav.offen a.navlink { text-transform: none; letter-spacing: .01em; font-size: 1.05rem; }
}
.sticky-cta { background: var(--wand-tief); }
.sticky-cta a { text-transform: none; letter-spacing: .01em; font-family: var(--font-main); font-size: .98rem; }
.sticky-cta .st-tel { background: var(--wand); }
.sticky-cta .st-termin { color: var(--text); }

.site-footer { background: var(--wand-tief); border-top: 1px solid rgba(255,255,255,.07); }
/* Spaltentitel als h2 (vorher h4), damit die Überschriften-Stufen lückenlos sind. */
.footer-col .footer-titel { font-family: var(--font-main); color: var(--white); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; margin-bottom: 14px; }

/* ── Teil 2: die Welt der Startseite ──────────────────── */
/* Die Lochwand: Raster 24 px, Lochmitte bei 12 px. Der zweite, versetzte
   Kreis gibt jedem Loch eine hauchfeine Unterkante. */
.welt {
  background-color: var(--wand);
  background-image:
    radial-gradient(circle at 12px 12px, var(--wand-loch) 2.3px, transparent 2.9px),
    radial-gradient(circle at 12px 13.3px, rgba(255,255,255,.05) 2.3px, transparent 2.9px);
  background-size: 24px 24px;
  color: var(--text-wand);
  font-size: 17px;
  line-height: 1.6;
  padding-bottom: clamp(88px, 10vw, 140px);
  --breite: 1240px;
  --rand: clamp(16px, 4vw, 40px);
  --luecke: 104px;
  --raster-mass: 24px;
}
/* Rücksetzer ohne Gewicht (:where), damit die gezielten Abstände der Bausteine greifen. */
:where(.welt) p { margin: 0; }
:where(.welt) h1, :where(.welt) h2, :where(.welt) h3 { margin: 0; }
.welt h1, .welt h2, .welt h3 { letter-spacing: -.005em; text-wrap: balance; }
.welt h1 { font-size: clamp(34px, 4.1vw, 58px); line-height: 1.04; color: var(--brand); }
.welt h2 { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.08; color: var(--schild); }
.welt h3 { font-size: 22px; line-height: 1.2; }
:where(.welt) a { color: inherit; }   /* ohne Gewicht, damit .btn-gold seine dunkle Schrift behält */

.w-innen { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.w-sektion { padding-top: clamp(88px, 10vw, 144px); }
.w-kopf { max-width: 820px; margin-bottom: clamp(32px, 4vw, 54px); }
.w-einleitung { margin-top: 18px; font-size: clamp(17px, 1.5vw, 19.5px); line-height: 1.55; color: var(--text-wand); max-width: 34em; }
.w-klein { font-size: 14px; line-height: 1.5; }

/* ── Grundpaar: Papier, gezeichneter Pfeil, Bildschirm ── */
.w-paar { display: grid; grid-template-columns: minmax(0, 5fr) var(--luecke) minmax(0, 6fr); align-items: start; }
.w-paar--gleich { grid-template-columns: minmax(0, 1fr) var(--luecke) minmax(0, 1fr); }
.w-paar--weit { grid-template-columns: minmax(0, 4fr) var(--luecke) minmax(0, 7fr); }

/* Flipchart-Bogen mit Karoraster und Abreiss-Perforation */
.w-bogen {
  position: relative;
  background-color: var(--papier);
  background-image:
    linear-gradient(to bottom, var(--raster) 1px, transparent 1px),
    linear-gradient(to right, var(--raster) 1px, transparent 1px);
  background-size: var(--raster-mass) var(--raster-mass);
  background-position: -1px 11px;
  color: var(--text);
  padding: calc(var(--raster-mass) * 2) clamp(20px, 3.4vw, 48px);
  border-radius: 2px;
  box-shadow: 0 2px 3px rgba(0,0,0,.25), 0 28px 50px -24px rgba(0,0,0,.65);
}
.w-bogen::before {
  content: ""; position: absolute; left: 6px; right: 6px; top: 14px; height: 6px;
  background: radial-gradient(circle at 4px 3px, var(--wand) 0 1.9px, transparent 2.4px) repeat-x;
  background-size: 11px 6px;
}
.w-bogen--gebunden { margin-top: 16px; padding-top: 72px; }
.w-bogen--gebunden::before { top: 30px; }
.w-bogen--gebunden::after {
  content: ""; position: absolute; left: -12px; right: -12px; top: -16px; height: 32px; border-radius: 9px;
  background:
    radial-gradient(circle at 24px 50%, #56615f 0 5px, transparent 5.5px),
    radial-gradient(circle at calc(100% - 24px) 50%, #56615f 0 5px, transparent 5.5px),
    linear-gradient(to bottom, #3a4746 0%, #2b3736 55%, #1f2928 100%);
  box-shadow: 0 4px 8px -2px rgba(0,0,0,.45);
}
.w-bogen h2 { color: var(--brand); }
.w-bogen h3 { color: var(--brand); }
.w-bogen__titel {
  display: inline-block; position: relative;
  font: 700 clamp(24px, 2.3vw, 30px)/1.15 var(--font-main);
  color: var(--brand); padding-bottom: 14px; margin: 0 0 18px;
}
.w-bogen__titel .w-unterstrich { position: absolute; left: -6px; bottom: 0; width: calc(100% + 12px); height: 14px; overflow: visible; }
.w-bogen__text { margin-top: 22px; font-size: 16px; line-height: 1.6; color: var(--text); }

/* Übergang Papier zu Bildschirm: ein Pfeil, mit hellem Stift auf die Wand gezeichnet */
.w-uebergang { align-self: center; display: flex; justify-content: center; align-items: center; }
.w-uebergang svg { width: 88px; height: 88px; overflow: visible; }
.welt .w-uebergang .fs { stroke: var(--text-wand); }

/* Bildschirm: Rahmen, Titelzeile wie ein Programmfenster, Fläche */
.w-bildschirm {
  position: relative;
  background: var(--screen);
  color: var(--white);
  border-radius: 18px;
  padding: 8px 10px 10px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 2px 4px rgba(0,0,0,.25), 0 34px 60px -30px rgba(0,0,0,.8);
}
.w-bildschirm__leiste { display: flex; justify-content: center; align-items: center; height: 22px; }
.w-bildschirm__leiste::before { /* Kamera im Rahmen */
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #061f1f; box-shadow: 0 0 0 1px rgba(255,255,255,.1);
}
.w-bildschirm__flaeche {
  background: var(--screen-flaeche);
  border: 1px solid var(--screen-linie);
  border-radius: 10px;
  padding: clamp(22px, 2.6vw, 34px);
}
.w-bildschirm h3 { color: var(--white); }

/* ── Filzstift-Skizzen und Leuchtstift ── */
.welt .fs { fill: none; stroke: var(--brand); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.welt .fs--rot { stroke: var(--filz-rot); }
.welt .fs--fein { stroke-width: 2.6; }
.welt .fs--gedruckt { stroke: var(--gedruckt); stroke-width: 3.2; }
.welt .sk { font-family: var(--font-main); font-weight: 700; fill: var(--brand); }
.welt .sk--leicht { font-weight: 400; }
.welt .leucht {
  background-image: linear-gradient(100deg, transparent 0 1.5%, var(--leuchtstift) 2.5% 97.5%, transparent 98.5%);
  background-repeat: no-repeat;
  background-size: 100% var(--leucht-hoehe, 44%);
  background-position: 0 90%;
  padding: 0 .06em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.w-skizze { margin: 34px 0 0; }
/* Auf der dunklen Wand gibt es keinen Leuchtstift: Halbtransparentes Gold über Teal
   mischt sich zu Oliv. Stattdessen zieht ein goldener Filzstift einen Strich unter
   das Wort, die Schrift bleibt weiss (11:1). */
.w-kopf .leucht, .w-schluss .leucht, .w-leitsatz .leucht, .w-start__text .leucht {
  color: var(--white);
  --leucht-hoehe: .3em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 7.5C48 5 118 8.8 197 5.2' fill='none' stroke='%23c8a55a' stroke-width='4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  background-position: 0 100%;
  padding-bottom: .1em;
}
.w-skizze svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Einmaliges Selbst-Zeichnen: nur mit JS und ohne Bewegungsreduktion.
   Die Klasse js setzt ein Einzeiler im Kopf, noch bevor das CSS greift. */
@media (prefers-reduced-motion: no-preference) {
  .js .welt [data-zeichnen] .strich {
    stroke-dasharray: 1 2;
    stroke-dashoffset: 1.01;
    transition: stroke-dashoffset var(--d, 480ms) cubic-bezier(.45,.05,.3,1) var(--v, 0ms);
  }
  .js .welt [data-zeichnen].gezeichnet .strich { stroke-dashoffset: 0; }
  .js .welt [data-zeichnen] .leucht {
    background-size: 0% var(--leucht-hoehe, 44%);
    transition: background-size 620ms cubic-bezier(.45,.05,.3,1) var(--v, 260ms);
  }
  .js .welt [data-zeichnen].gezeichnet .leucht { background-size: 100% var(--leucht-hoehe, 44%); }
}

/* ── Einstieg: Botschaft direkt auf der Wand, daneben das Werkzeugbrett ──
   Muster aus Entwurf 2 (Wunsch Michi 25.09.2026): Der Blick geht vom Titel direkt
   zum Goldknopf; rechts tragen drei Werkzeuge das Angebot als Preisschild. */
.w-einstieg { padding-top: clamp(40px, 5vw, 72px); }
.w-start { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: clamp(32px, 5vw, 80px); align-items: center; }
.w-start__text h1 { color: var(--white); font-size: clamp(38px, 4.6vw, 66px); line-height: 1.02; }
.w-start__text .w-zielgruppe { max-width: 36em; color: var(--text-wand-leise); }
.w-start__text .w-knoepfe { margin-top: 30px; }
.w-tafel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; --s: 1; }
.w-platz { position: relative; display: flex; justify-content: center; min-height: 292px; }
.w-platz--leer { justify-content: flex-start; padding-left: 12px; }
/* Preisschild am Zapfen des Werkzeugs: Draht plus Blechschild, als Link zur Stufe */
.w-preisschild { position: absolute; z-index: 2; left: calc(var(--px) * var(--s, 1) * 1px); top: calc(var(--py) * var(--s, 1) * 1px); width: 188px; margin-left: -94px; padding-top: 28px; }
.w-preisschild .w-draht { height: 30px; }
.w-preisschild .w-schild { display: block; padding: 20px 14px 16px; text-align: center; text-decoration: none; transition: transform .35s cubic-bezier(.3,.7,.3,1), box-shadow .35s ease; }
.w-schild__stufe { display: block; font: 700 14px/1.2 var(--font-main); color: var(--gravur); }
.w-schild__wert { display: block; margin-top: 6px; font: 700 30px/1.05 var(--font-main); color: var(--brand); white-space: nowrap; }
.w-schild__fuss { display: block; margin-top: 6px; font-size: 13px; line-height: 1.3; color: var(--gravur-text); }
/* Einstieg: Stufe plus ein Satz zum Nutzen (Wunsch Michi 25.09.2026: keine Preise im ersten Bild) */
.w-schild__satz { display: block; margin-top: 8px; font: 700 18px/1.28 var(--font-main); color: var(--brand); text-wrap: balance; }
@media (hover: hover) {
  .w-preisschild .w-schild:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 2px 3px rgba(0,0,0,.25), 0 26px 34px -16px rgba(0,0,0,.75); }
}
.w-leerfrage { position: absolute; left: calc(12px + 112px * var(--s, 1)); top: calc(96px * var(--s, 1)); width: 140px; font-size: 15px; line-height: 1.4; color: var(--text-wand); text-decoration: none; }
.w-leerfrage strong { display: block; margin-bottom: 8px; font: 700 25px/1.05 var(--font-main); color: var(--white); }
.w-leerfrage:hover strong { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--gold); text-underline-offset: 5px; }

.w-einstieg .w-bogen { display: flex; flex-direction: column; }
.w-zielgruppe { font: 500 16px/1.45 var(--font-text); color: var(--grafit-weich); margin-top: 18px; max-width: 30em; }
.w-skizze--ablauf { margin-top: auto; padding-top: 34px; }
.w-skizze--ablauf svg { max-width: 460px; }

.w-untertitel { margin-top: 26px; max-width: 32em; font-size: clamp(17px, 1.45vw, 19.5px); line-height: 1.55; color: var(--text-wand); }
.w-anfang { margin-top: 16px; max-width: 34em; font-size: 15.5px; line-height: 1.55; color: var(--text-wand-leise); }
.w-anfang strong { color: var(--white); font-weight: 600; }
.w-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 24px; }
.w-telefonlink {
  font-size: 15.5px; color: var(--white); text-decoration: underline; text-decoration-color: rgba(255,255,255,.4);
  text-underline-offset: 5px; padding: 12px 0; white-space: nowrap;
}
.w-telefonlink:hover { text-decoration-color: var(--gold); }

/* Vertrauenszeile: vier verzinkte Schrauben in der Wand */
.w-vertrauen {
  list-style: none; margin: clamp(40px, 5vw, 60px) 0 0; padding: 22px 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 30px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.w-vertrauen li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.45; color: var(--text-wand); }
.w-schraube, .w-vertrauen li::before {
  content: ""; position: absolute; left: 0; top: .3em; width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, var(--zink-hell) 0 1px, #cdd2d3 2.2px, var(--zink) 3.6px, var(--zink-tief) 5.5px);
  box-shadow: 0 1px 1px rgba(0,0,0,.5);
}

/* ── Werkzeug-Umrisse, Zapfen, Draht, Schilder ── */
.w-umriss { overflow: visible; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.w-umriss .detail { stroke-width: 1.5; opacity: .75; }
.w-umriss--leer { stroke-dasharray: 5 6; }
.w-umriss--leer .detail { stroke-dasharray: none; opacity: .55; }
.w-zapfen {
  position: absolute; left: 50%; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff 0 1.2px, #d7dbdc 2.4px, var(--zink) 4px, #8a9294 5.4px, #687072 6px);
  box-shadow: 0 0 0 2px #022626, 0 3px 4px rgba(0,0,0,.45);
  z-index: 3;
}
.w-haenger { position: relative; padding-top: calc(var(--draht, 36px) - 2px); }
.w-draht { position: absolute; left: 8%; top: 0; width: 84%; height: var(--draht, 36px); overflow: visible; }
.w-draht path { fill: none; stroke: var(--zink); stroke-width: 1.6; }
.w-schild {
  position: relative;
  background: linear-gradient(180deg, var(--schild) 0%, var(--schild-unten) 100%);
  color: var(--gravur);
  border-radius: 4px;
  padding: 20px 20px 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 2px 3px rgba(0,0,0,.25), 0 18px 28px -16px rgba(0,0,0,.7);
  transform: rotate(var(--dreh, 0deg));
  transform-origin: 50% 0;
}
.w-schild::before, .w-schild::after { /* Ösen, in die der Draht greift */
  content: ""; position: absolute; top: 7px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--wand-tief); box-shadow: inset 0 1px 1px rgba(0,0,0,.5);
}
.w-schild::before { left: 12%; }
.w-schild::after { right: 12%; }
.w-schild h2, .w-schild h3 { color: var(--gravur); }
.w-schild h3 { font-size: 19px; line-height: 1.25; margin-bottom: 8px; }
.w-schild p { font-size: 15.5px; line-height: 1.55; color: var(--gravur-text); }

/* Kennen Sie das? Fünf Werkzeuge fehlen (seit 26.09.2026 mit der Säge für die Website). Ihr Umriss ist noch da, der Zapfen, an dem
   sie hingen, auch, und an genau diesem Zapfen hängt jetzt das Schild.
   --hx/--hy: Aufhängepunkt im Umriss, --draht: Abstand Zapfen bis Schild. */
/* Fünf Plätze: oben drei, darunter zwei mittig versetzt (6er-Raster, je zwei Spalten). */
.w-fehlplaetze { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 40px 24px; align-items: start; }
.w-fehlplatz { position: relative; grid-column: span 2; }
.w-fehlplatz:nth-child(4) { grid-column: 2 / span 2; }
.w-fehlplatz:nth-child(5) { grid-column: 4 / span 2; }
.w-fehlplatz .w-haenger { margin-top: var(--hy); }
.w-fehl-umriss { position: absolute; left: 50%; top: 0; translate: calc(var(--hx) * -1) calc(var(--hy) * -1); }
.w-fehlplatz:nth-child(1) .w-schild { --dreh: -.8deg; }
.w-fehlplatz:nth-child(2) .w-schild { --dreh: .6deg; }
.w-fehlplatz:nth-child(3) .w-schild { --dreh: -.4deg; }
.w-fehlplatz:nth-child(4) .w-schild { --dreh: .9deg; }
.w-fehlplatz:nth-child(5) .w-schild { --dreh: -.6deg; }
.w-schluss { margin-top: clamp(56px, 6vw, 84px); max-width: 36em; font-size: clamp(19px, 1.9vw, 23px); line-height: 1.5; color: var(--text-wand); }
.w-schluss strong { color: var(--white); }

/* Kopf einer Sektion mit Skizzen-Bogen daneben (Zettel, Excel, Offerte) */
.w-kopf-paar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: clamp(32px, 5vw, 80px); align-items: center; margin-bottom: clamp(44px, 5vw, 68px); }
.w-kopf-paar .w-kopf { margin-bottom: 0; }
.w-bogen--skizze { padding: 60px clamp(18px, 2.4vw, 30px) 30px; }
.w-bogen--skizze .w-skizze--ablauf { margin: 0; padding: 0; }

/* ── Rechner ── */
.w-rechnung { max-width: 420px; }
.w-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 16px; min-height: 48px; padding-top: 8px; }
.w-beschr { font: 500 14px/1.3 var(--font-text); color: var(--grafit-weich); }
.w-wert { position: relative; text-align: right; white-space: nowrap; font: 700 clamp(24px, 2.4vw, 31px)/1 var(--font-main); color: var(--brand); }
.w-zeile--summe { min-height: 60px; }
.w-zeile--summe .w-wert { font-size: clamp(30px, 3.1vw, 40px); }
.w-zeile--kringel { padding-top: 18px; }
.w-summenstrich { display: block; width: 100%; height: 16px; margin: 4px 0 0; overflow: visible; }
.w-kringel-um { position: relative; display: inline-block; }
.w-kringel-um svg { position: absolute; left: 50%; top: 50%; width: 168px; height: 66px; transform: translate(-50%, -52%); overflow: visible; pointer-events: none; max-width: none; }
.w-notiz .w-kringel-um svg { width: 196px; height: 82px; }
.w-rechner { display: grid; gap: 26px; }
.w-feld__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; }
.w-feld label { font-size: 15px; line-height: 1.4; color: var(--screen-text); }
.w-feld output { font: 700 22px/1 var(--font-main); color: var(--white); white-space: nowrap; }
.w-feld input[type=range] {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 44px; margin: 6px 0 0; background: transparent; cursor: pointer;
  --anteil: 30%;
}
.w-feld input[type=range]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--gold) var(--anteil), rgba(255,255,255,.18) var(--anteil));
}
.w-feld input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; margin-top: -11px; border-radius: 50%;
  background: var(--white); border: 3px solid var(--gold); box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.w-feld input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(255,255,255,.18); }
.w-feld input[type=range]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--gold); }
.w-feld input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--white); border: 3px solid var(--gold); }
.w-feld input[type=range]:focus-visible { outline-offset: 6px; }
.w-resultat { border-top: 1px solid var(--screen-linie); padding-top: 24px; }
.w-resultat__zahl { font: 700 clamp(44px, 5.4vw, 78px)/1 var(--font-main); color: var(--white); letter-spacing: -.01em; margin: 4px 0 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.w-resultat p.re-label { margin-top: 4px; color: var(--screen-text); font-size: 16px; }
.w-resultat .w-klein { margin-top: 8px; color: var(--screen-text); }
.w-rechner .btn { justify-self: start; }

/* ── So geht es ── */
.w-skizze--schritte svg { max-width: 340px; }
.w-angebot {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 32px;
  padding: 28px 0; border-top: 1px solid var(--screen-linie);
}
.w-angebot:first-child { border-top: 0; padding-top: 2px; }
.w-angebot:last-child { padding-bottom: 2px; }
.w-angebot h3 { font-size: 25px; }
.w-angebot__rolle { margin-top: 4px; font: 400 16px/1.4 var(--font-main); color: var(--gold); }
.w-angebot__text > p:not(.w-angebot__rolle) { margin-top: 12px; color: var(--screen-text); font-size: 15.5px; line-height: 1.55; max-width: 36em; }
.w-angebot__text .w-klein { color: var(--screen-text-leise); font-size: 13.5px; }
.w-angebot__preis { text-align: right; min-width: 150px; padding-top: 2px; }
.w-angebot__preis .vor { display: block; font-size: 13px; color: var(--screen-text); margin-bottom: 4px; }
.w-angebot__preis strong { display: block; font: 700 29px/1.08 var(--font-main); color: var(--white); white-space: nowrap; }
.w-angebot__preis .nach { display: block; font-size: 13px; line-height: 1.4; color: var(--screen-text); margin-top: 7px; }
.w-angebot__preis--spanne strong { font-size: 24px; }
.w-angebot__weiter { grid-column: 1; }
.w-angebot--ohne-preis { grid-template-columns: minmax(0, 1fr); }   /* Umsetzung: Preis erst in der Offerte */
.w-angebot__weiter .btn { margin-top: 4px; min-height: 46px; padding: 0 20px; font-size: .95rem; }
.w-angebot__weiter .w-link-hell { margin-top: 0; }
.w-link-hell {
  display: inline-block; margin-top: 14px; padding: 6px 0;
  font: 700 16px/1.2 var(--font-main); color: var(--white);
  text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--gold); text-underline-offset: 6px;
}
.w-link-hell:hover { color: var(--gold); }
.w-website {
  margin-top: 22px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 32px;
  background: var(--papier); color: var(--text);
  border-radius: 4px;
  padding: 26px clamp(22px, 2.6vw, 34px);
  box-shadow: 0 2px 3px rgba(0,0,0,.25), 0 22px 40px -24px rgba(0,0,0,.65);
}
.w-website h3 { font-size: 25px; color: var(--brand); }
.w-website p { margin-top: 10px; font-size: 15.5px; line-height: 1.55; color: var(--grafit-weich); max-width: 36em; }
.w-website__preis { text-align: right; }
.w-website__preis strong { display: block; font: 700 29px/1.08 var(--font-main); color: var(--brand); white-space: nowrap; }
.w-website__preis .nach { display: block; margin-top: 7px; font-size: 13px; line-height: 1.4; color: var(--grafit-weich); }
.w-link-dunkel {
  display: inline-block; margin-top: 12px; padding: 6px 0;
  font: 700 16px/1.2 var(--font-main); color: var(--brand);
  text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--gold); text-underline-offset: 6px;
}
.w-preisfuss { margin-top: 18px; max-width: 36em; font-size: 14px; line-height: 1.5; color: var(--text-wand-leise); }
@media (min-width: 861px) {
  .w-paar--klebend > .w-bogen { position: sticky; top: 100px; align-self: start; }
  .w-paar--klebend > .w-uebergang { position: sticky; top: 320px; align-self: start; margin-top: 212px; }
}

/* ── Aus der Praxis ── */
.w-skizze--liste { margin-top: 10px; }
.w-skizze--liste svg { max-width: 360px; }
.w-nachher { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 34px; align-items: start; }
.w-handy {
  position: relative; background: var(--screen); border-radius: 40px; padding: 26px 10px 22px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 34px 54px -26px rgba(0,0,0,.8);
}
.w-handy::before {
  content: ""; position: absolute; top: 11px; left: 50%; width: 46px; height: 5px; border-radius: 3px;
  background: rgba(255,255,255,.16); transform: translateX(-50%);
}
.w-handy img { width: 100%; border-radius: 26px; }
.w-nachher__text h3 { color: var(--white); font-size: 25px; margin-bottom: 12px; }
.w-nachher__text > p { font-size: 16px; line-height: 1.6; color: var(--text-wand); }
.w-fakten { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid rgba(255,255,255,.12); }
.w-fakten li {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 15.5px; line-height: 1.45; color: var(--white);
}
.w-haken { position: relative; width: 22px; height: 22px; border-radius: 5px; background: var(--gold); }
.w-haken::after {
  content: ""; position: absolute; left: 8px; top: 4px; width: 5px; height: 10px;
  border: solid var(--screen); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.w-hinweis { margin-top: 18px; font-size: 14.5px; line-height: 1.55; color: var(--text-wand-leise); }
.w-hinweis strong { color: var(--text-wand); }

/* ── Gratis-Checkliste: ein breites Schild am Draht ── */
.w-freebie .w-haenger { max-width: 820px; margin: 0 auto; }
.w-freebie .w-draht { left: 20%; width: 60%; }
.w-schild--breit { padding: 30px clamp(22px, 4vw, 44px) 32px; --dreh: -.35deg; }
.w-schild--breit h2 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; }
.w-schild--breit p { margin-top: 12px; max-width: 34em; font-size: 16.5px; }
.w-schild--breit .w-klein { font-size: 13.5px; color: var(--gravur-leise); }
.w-schild--breit .btn { margin-top: 20px; }

/* ── Wer dahintersteht ── */
.w-wer-oben { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.w-wer-oben .w-einleitung + .w-einleitung { margin-top: 14px; }
.w-foto { margin: 0; }
.w-foto img { width: 100%; height: auto; border-radius: 4px; box-shadow: 0 30px 50px -28px rgba(0,0,0,.8); }
.w-foto figcaption { margin-top: 10px; font-size: 13.5px; color: var(--text-wand-leise); }
.w-wer-paar { margin-top: clamp(48px, 6vw, 80px); }
.w-person h3 { font-size: clamp(24px, 2.3vw, 30px); }
.w-person p { font-size: 16px; line-height: 1.6; }
.w-bogen.w-person p { color: var(--text); }
.w-beleg { margin: 22px 0 20px; }
.w-beleg__bild { position: relative; overflow: hidden; aspect-ratio: 10 / 7; border-radius: 3px; background: var(--white); box-shadow: 0 0 0 1px var(--raster), 0 10px 22px -16px rgba(26,42,42,.5); }
/* Ausschnitt per CSS: Das Foto bleibt unbearbeitet, gezeigt wird nur der beschriebene Bogen. */
.w-beleg__bild img { position: absolute; top: 0; left: 0; width: 350%; max-width: none; height: auto; transform: translate(-42.857%, -20.9%); }
.w-beleg figcaption { margin-top: 10px; font-size: 13.5px; color: var(--grafit-weich); }
.w-bildschirm.w-person p { color: var(--screen-text); }
.w-ui-liste { list-style: none; margin: 18px 0 0; padding: 0; }
.w-ui-liste li {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 14px 16px; margin-top: 8px;
  background: rgba(255,255,255,.04); border: 1px solid var(--screen-linie); border-radius: 8px;
  font-size: 16px; line-height: 1.4; color: var(--white);
}
.w-leitsatz { margin-top: clamp(56px, 7vw, 96px); max-width: 26em; font: italic 400 clamp(25px, 3vw, 40px)/1.3 var(--font-serif); color: var(--white); }
.w-bruecke { margin-top: 26px; max-width: 34em; font-size: 15px; line-height: 1.55; color: var(--text-wand-leise); }
.w-bruecke a { color: var(--white); text-decoration-color: var(--gold); text-underline-offset: 4px; }

/* ── Zusagen: eine gravierte Platte mit vier Schrauben ── */
.w-platte {
  position: relative;
  background: linear-gradient(180deg, var(--schild) 0%, var(--schild-unten) 100%);
  color: var(--gravur);
  border-radius: 4px;
  padding: clamp(34px, 4vw, 48px) clamp(24px, 4vw, 52px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 2px 3px rgba(0,0,0,.25), 0 30px 50px -28px rgba(0,0,0,.75);
}
.w-platte > .w-schraube { position: absolute; top: auto; left: auto; }
.w-platte > .w-schraube.ol { left: 14px; top: 14px; }
.w-platte > .w-schraube.or { right: 14px; top: 14px; }
.w-platte > .w-schraube.ul { left: 14px; bottom: 14px; }
.w-platte > .w-schraube.ur { right: 14px; bottom: 14px; }
.w-zusagen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.w-zusagen li + li { border-left: 1px solid rgba(31,45,44,.14); padding-left: 30px; }
.w-zusagen h3 { font-size: 20px; color: var(--gravur); margin-bottom: 10px; }
.w-zusagen p { font-size: 15px; line-height: 1.55; color: var(--gravur-text); }

/* ── Fragen: auf einem Flipchart-Bogen, damit sich lange Antworten gut lesen ── */
.w-bogen--fragen { max-width: 920px; }
.w-bogen--fragen h2 { margin-bottom: 18px; }
.w-faq details { border-bottom: 1px solid var(--papier-linie); }
.w-faq details:first-of-type { border-top: 1px solid var(--papier-linie); }
.w-faq summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 18px 48px 18px 0;
  font: 700 18px/1.35 var(--font-main); color: var(--brand);
}
.w-faq summary::-webkit-details-marker { display: none; }
.w-faq summary::before, .w-faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 16px; height: 3px; border-radius: 2px; background: var(--brand);
}
.w-faq summary::after { transform: translateY(-50%); }
.w-faq summary::before { transform: translateY(-50%) rotate(90deg); transition: transform .28s ease, opacity .28s ease; }
.w-faq details[open] summary::before { transform: translateY(-50%) rotate(0deg); opacity: 0; }
.w-faq summary:hover { color: var(--brand-mid); }
.w-faq .faq-a { padding: 0 0 22px; color: var(--tinte-weich); font-size: 16px; line-height: 1.65; max-width: 34em; }

/* ── Kontakt: das Werkzeugbrett, daneben das Formular auf dem Bildschirm ──
   Drei Werkzeuge hängen an ihren Zapfen, der Hammer fehlt. Jeder Zapfen sitzt am
   Aufhängepunkt des Werkzeugs (--px/--py in Umriss-Pixeln); --s skaliert das Brett. */
.w-kontakt-raster { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.w-brett { position: relative; --s: 1; }
.w-werkzeug { position: relative; flex: 0 0 auto; width: calc(var(--w) * var(--s, 1) * 1px); }
.w-werkzeug svg { display: block; width: 100%; height: auto; }
.w-werkzeug .w-zapfen { left: calc(var(--px) * var(--s, 1) * 1px); top: calc(var(--py) * var(--s, 1) * 1px); }
.w-brett .w-leerplatz { margin: 0 0 0 14px; }
.w-brett__frage { position: absolute; left: 118px; top: 96px; width: 146px; font-size: 15px; line-height: 1.4; color: var(--text-wand); }
.w-brett__frage strong { display: block; font: 700 25px/1.05 var(--font-main); color: var(--white); margin-bottom: 8px; }
.w-kontakt-paar { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(24px, 3vw, 44px); margin-top: clamp(28px, 3vw, 40px); align-items: start; }
.w-direkt__tel { display: inline-block; font: 700 clamp(28px, 3vw, 38px)/1.1 var(--font-main); color: var(--white); text-decoration: none; white-space: nowrap; padding: 4px 0; }
.w-direkt__tel:hover { color: var(--gold); }
.w-direkt__mail { display: inline-block; margin-top: 10px; font-size: 18px; color: var(--white); text-underline-offset: 5px; text-decoration-color: rgba(255,255,255,.4); }
.w-direkt__mail:hover { color: var(--gold); }
.w-direkt ul { list-style: none; margin: 24px 0 0; padding: 0; }
.w-direkt li { position: relative; padding-left: 24px; margin-top: 10px; font-size: 15.5px; line-height: 1.45; color: var(--text-wand); }
.w-direkt li::before {
  content: ""; position: absolute; left: 0; top: .32em; width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, var(--zink-hell) 0 1px, #cdd2d3 2.2px, var(--zink) 3.6px, var(--zink-tief) 5.5px);
  box-shadow: 0 1px 1px rgba(0,0,0,.5);
}
/* Das bestehende Formular in der Bildschirm-Welt (Funktion unverändert in main.js) */
.w-bildschirm .form-card { background: transparent; border: 0; box-shadow: none; padding: 0; }
.w-bildschirm .form-card label { color: var(--screen-text); font-weight: 600; font-size: .9rem; margin: 14px 0 6px; }
.w-bildschirm .form-card label:first-of-type { margin-top: 0; }
.w-bildschirm .form-card label .opt { color: var(--screen-text-leise); font-weight: 400; }
.w-bildschirm .form-card input, .w-bildschirm .form-card select, .w-bildschirm .form-card textarea {
  font-family: var(--font-text); border: 1px solid rgba(255,255,255,.22); border-radius: 6px; background-color: var(--white);
}
.w-bildschirm .form-card input:focus, .w-bildschirm .form-card select:focus, .w-bildschirm .form-card textarea:focus { outline: 3px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.w-bildschirm .form-hinweis { color: var(--screen-text-leise); margin: 6px 0 0; }
.w-bildschirm .form-note, .w-bildschirm .form-note a { color: var(--screen-text-leise); }
.w-bildschirm .form-note { max-width: 36em; }
.w-bildschirm .form-ok { background: rgba(255,255,255,.08); border: 0; border-radius: 6px; color: var(--white); }
.w-bildschirm .form-err { background: #fdecea; border: 0; border-radius: 6px; color: #8f1d1d; }
.w-bildschirm .form-err a { color: #8f1d1d; }

/* ── Breiten ── */
@media (max-width: 1180px) {
  .w-start { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); }
  .w-tafel { --s: .82; gap: 24px 16px; }
  .w-platz { min-height: 250px; }
  .w-preisschild { width: 164px; margin-left: -82px; }
  .w-schild__wert { font-size: 26px; }
  .w-leerfrage { width: 120px; }
  .w-leerfrage strong { font-size: 22px; }
}
@media (max-width: 960px) {
  .w-start { grid-template-columns: minmax(0, 1fr); }
  .w-tafel { max-width: 560px; }
}
@media (max-width: 1080px) {
  .welt { --luecke: 76px; }
  .w-uebergang svg { width: 70px; height: 70px; }
  
  .w-angebot, .w-website { grid-template-columns: minmax(0, 1fr); }
  .w-angebot__preis, .w-website__preis { text-align: left; padding-top: 4px; }
  .w-nachher { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; }
  .w-zusagen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-zusagen li + li { border-left: 0; padding-left: 0; }
  .w-vertrauen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-fehlplaetze { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-fehlplatz, .w-fehlplatz:nth-child(4) { grid-column: auto; }
  .w-fehlplatz:nth-child(5) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 12px); }
  .w-kontakt-paar { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .w-paar, .w-paar--einstieg, .w-paar--gleich, .w-paar--weit { grid-template-columns: minmax(0, 1fr); }
  .w-uebergang, .w-uebergang--einstieg { align-self: center; margin: 0; padding: 10px 0; position: static; }
  .w-uebergang svg, .w-uebergang--einstieg svg { width: 64px; height: 64px; transform: rotate(90deg); }
  .w-wer-oben { grid-template-columns: minmax(0, 1fr); }
  .w-nachher { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .w-nachher .w-handy { width: 236px; }
  .w-nachher__text { justify-self: stretch; }
  
  
  
  .w-kontakt-raster { grid-template-columns: minmax(0, 1fr); }
  /* Der leere Hammer steht über der Überschrift, die Frage direkt daneben. */
  .w-brett { --s: .7; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 20px; align-items: center; }
  .w-brett .w-leerplatz { margin: 0; }
  .w-brett__frage { position: static; width: auto; }
  .w-kopf-paar { grid-template-columns: minmax(0, 1fr); }
  .w-brett__frage strong { font-size: 20px; }   
}
@media (max-width: 640px) {
  .w-tafel { --s: .62; gap: 26px 10px; }
  .w-platz { min-height: 190px; }
  .w-platz--leer { padding-left: 4px; }
  .w-preisschild { width: 146px; margin-left: -73px; padding-top: 22px; }
  .w-preisschild .w-draht { height: 24px; }
  .w-preisschild .w-schild { padding: 15px 8px 11px; }
  .w-schild__stufe { font-size: 12.5px; }
  .w-schild__wert { font-size: 22px; }
  .w-schild__fuss { font-size: 12px; }
  .w-schild__satz { font-size: 14.5px; margin-top: 6px; }
  .w-leerfrage { left: calc(4px + 112px * var(--s)); top: calc(90px * var(--s)); width: 96px; font-size: 13.5px; }
  .w-leerfrage strong { font-size: 18px; }
  .w-bogen { padding-left: 20px; padding-right: 20px; }
  .w-bogen--gebunden { padding-top: 64px; }
  .w-bogen--gebunden::after { left: -8px; right: -8px; height: 28px; top: -14px; }
  .w-bildschirm { border-radius: 14px; padding: 6px 7px 7px; }
  .w-bildschirm__flaeche { padding: 20px 18px; }
  .w-knoepfe .btn, .w-rechner .btn { width: 100%; }
  .w-vertrauen, .w-zusagen, .w-fehlplaetze { grid-template-columns: minmax(0, 1fr); }
  .w-fehlplatz:nth-child(5) { grid-column: auto; justify-self: stretch; width: auto; }
  .w-feld__kopf { flex-direction: column; align-items: flex-start; gap: 6px; }
  .w-direkt__tel { font-size: 27px; }
  .w-resultat__zahl { font-size: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .w-faq summary::before { transition: none; }
}

/* ═══════════════════════════════════════════════════════
   Teil 3: Bausteine der Unterseiten (seit 25.09.2026)
   Gleiche Welt wie die Startseite. Listen, Schritte und Texte
   nehmen die Farbe ihres Trägers an: Wand, Papier oder Bildschirm.
═══════════════════════════════════════════════════════ */
:root {
  /* Handgezeichnete Formen als Masken; die Farbe kommt aus background */
  --maske-kreis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 56'%3E%3Cpath d='M30 5C45 3 56 14 55 28C55 42 44 52 29 51C14 52 4 41 5 27C5 14 15 5 32 4C37 4 40 6 42 8' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --maske-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24'%3E%3Cpath d='M3 13C15 9 29 17 43 11M34 4L43 11L35 19' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --maske-haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M3 12.5L9 18L21 3.5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --maske-kaestchen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 28'%3E%3Cpath d='M3 7C9 6 16 7 21 6C22 12 21 18 22 25C15 26 9 25 3 26C2 20 3 13 2 7M7 15L12 20L27 2.5' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Seitenkopf: der Bogen rechts neben der Botschaft */
.w-start > .w-bogen { width: 100%; max-width: 520px; justify-self: end; }
.w-start > .w-bildschirm { width: 100%; }
/* Auf den Unterseiten ist rechts ein Bogen oder Bildschirm, kein Brett: etwas schmaler, damit Knopf und Telefonlink nebeneinander passen. */
@media (min-width: 1181px) { .w-start:has(> .w-bogen, > .w-bildschirm) { grid-template-columns: minmax(0, 1fr) minmax(0, 500px); } }
.w-start__text .w-h1--lang, .w-abschluss .w-h1--lang { font-size: clamp(32px, 3.5vw, 50px); }
.w-start__text .w-einleitung { margin-top: 22px; }

/* Listen: auf der Wand Schraube, auf Papier gezeichneter Haken, am Bildschirm Gold */
.w-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 48px; max-width: 1100px; }
.w-liste--eins { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.w-liste li { position: relative; max-width: 36em; padding-left: 28px; font-size: 16.5px; line-height: 1.6; color: var(--text-wand); }
.w-liste li strong { color: var(--white); }
.w-liste li::before {
  content: ""; position: absolute; left: 0; top: .42em; width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, var(--zink-hell) 0 1px, #cdd2d3 2.2px, var(--zink) 3.6px, var(--zink-tief) 5.5px);
  box-shadow: 0 1px 1px rgba(0,0,0,.5);
}
.w-liste a { color: var(--white); text-decoration-color: var(--gold); text-underline-offset: 3px; }
.w-bogen .w-liste li { padding-left: 34px; font-size: 16px; color: var(--text); }
.w-bogen .w-liste li strong { color: var(--brand); }
.w-bogen .w-liste li::before {
  top: .28em; width: 22px; height: 20px; border-radius: 0; box-shadow: none; background: var(--brand);
  -webkit-mask: var(--maske-haken) center / contain no-repeat; mask: var(--maske-haken) center / contain no-repeat;
}
.w-bogen .w-liste a { color: var(--brand); }
.w-bogen .w-liste--kaestchen li { padding-left: 42px; }
.w-bogen .w-liste--kaestchen li::before { top: .1em; width: 28px; height: 26px; -webkit-mask-image: var(--maske-kaestchen); mask-image: var(--maske-kaestchen); }
.w-bildschirm .w-liste li { padding-left: 38px; font-size: 15.5px; color: var(--screen-text); }
.w-bildschirm .w-liste li strong { color: var(--white); }
.w-bildschirm .w-liste li::before { top: .12em; width: 22px; height: 22px; border-radius: 5px; box-shadow: none; background: var(--gold); }
.w-bildschirm .w-liste li::after {
  content: ""; position: absolute; left: 8px; top: calc(.12em + 4px); width: 5px; height: 10px;
  border: solid var(--screen); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}

/* Schritte: gezeichnete Kreise und Pfeile, wie am Flipchart */
.w-schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 64px; }
.w-schritte--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 52px; }
.w-schritte li { position: relative; }
.w-schritt__nr { position: relative; display: flex; align-items: center; justify-content: center; width: 56px; height: 52px; margin-bottom: 14px; font: 700 26px/1 var(--font-main); color: var(--brand); }
.w-schritt__nr::before {
  content: ""; position: absolute; inset: 0; background: currentColor;
  -webkit-mask: var(--maske-kreis) center / 100% 100% no-repeat; mask: var(--maske-kreis) center / 100% 100% no-repeat;
}
.w-schritte strong { display: block; font: 700 20px/1.25 var(--font-main); color: var(--brand); }
.w-schritt__dauer { display: block; margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--grafit-weich); }
.w-schritt__text { display: block; margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: var(--text); }
.w-schritte li + li::after {
  content: ""; position: absolute; left: -54px; top: 16px; width: 42px; height: 21px; background: var(--brand);
  -webkit-mask: var(--maske-pfeil) center / contain no-repeat; mask: var(--maske-pfeil) center / contain no-repeat;
}
.w-schritte--vier li + li::after { left: -46px; width: 38px; }
.w-bildschirm .w-schritt__nr { color: var(--white); }
.w-bildschirm .w-schritt__nr::before { background: var(--gold); }
.w-bildschirm .w-schritte strong { color: var(--white); }
.w-bildschirm .w-schritt__text { color: var(--screen-text); }
.w-bildschirm .w-schritte li + li::after { background: var(--screen-text); }
.w-schritte--senkrecht { grid-template-columns: minmax(0, 1fr); gap: 26px; }
.w-schritte--senkrecht li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; align-content: start; }
.w-schritte--senkrecht .w-schritt__nr { grid-row: 1 / span 3; margin: 0; }
.w-schritte--senkrecht li + li::after { display: none; }

/* Zahlen als Filzstift-Notiz auf dem Bogen: nur der Verlust (36 %) ist gross und rot eingekreist */
.w-notiz { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.w-notiz li { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 20px; align-items: baseline; }
.w-notiz__wert { font: 700 30px/1 var(--font-main); color: var(--brand); white-space: nowrap; font-variant-numeric: tabular-nums; }
.w-notiz__wert--gross { font-size: 46px; }
.w-notiz strong { display: block; font: 700 18px/1.25 var(--font-main); color: var(--brand); }
.w-notiz p { font-size: 15.5px; line-height: 1.55; color: var(--text); max-width: 30em; }
.w-bogen .w-quelle { margin-top: 26px; font-size: 13.5px; line-height: 1.45; color: var(--grafit-weich); }

/* Punkte: Titel und Text untereinander, getrennt durch feine Linien */
.w-punkte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 44px; --linie: var(--screen-linie); }

.w-punkte--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
.w-punkte > li { padding: 22px 0; border-top: 1px solid var(--linie); }
.w-punkte > li:first-child, .w-punkte--drei > li:nth-child(-n+3) { padding-top: 0; border-top: 0; }
.w-punkte h3 { font-size: 20px; line-height: 1.25; }
.w-punkte p { margin-top: 8px; max-width: 34em; font-size: 15.5px; line-height: 1.55; }
.w-bildschirm .w-punkte h3 { color: var(--white); }
.w-bildschirm .w-punkte p { color: var(--screen-text); }
.w-bogen .w-punkte { --linie: var(--papier-linie); }
.w-bogen .w-punkte h3 { color: var(--brand); }
.w-bogen .w-punkte p { color: var(--text); }

/* Zweier-Anordnungen */
.w-duo { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.w-duo--gespiegelt { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.w-duo--oben { align-items: start; }
.w-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 56px; }
.w-text h3, .w-spalten h3 { font-size: 22px; line-height: 1.25; color: var(--white); }
.w-text p, .w-spalten p { max-width: 34em; font-size: 16px; line-height: 1.65; color: var(--text-wand); }
.w-text h3 + p, .w-spalten h3 + p, .w-text p + p, .w-spalten p + p { margin-top: 12px; }
.w-text p + h3, .w-text ul + h3 { margin-top: 30px; }
.w-text strong, .w-spalten strong { color: var(--white); }
.w-text a, .w-spalten a, .w-hinweis a { color: var(--white); text-decoration-color: var(--gold); text-underline-offset: 3px; }
.w-sektion .w-knoepfe--mitte { justify-content: flex-start; margin-top: 34px; }

/* Bilder in Bildschirm und Handy */
.w-bildschirm figure { margin: 0; }
.w-bild .bild-zoom img { border-radius: 6px; }
.w-bild figcaption { margin-top: 10px; font-size: 13px; line-height: 1.45; color: var(--screen-text); }
/* Excel-Dashboard (Umsetzung): breites Bild unter Eingabemaske und Text, 26.09.2026 */
.w-dashboard { margin-top: clamp(40px, 5vw, 64px); }
.w-handy-bild { width: 260px; justify-self: center; margin: 0; }
.w-handy-bild figcaption { margin-top: 12px; font-size: 13.5px; line-height: 1.45; text-align: center; color: var(--text-wand-leise); }

/* Ein einzelnes Angebot auf dem Bildschirm (Betreuung) */
.w-einzelangebot h3 { font-size: 25px; color: var(--white); }
.w-einzelangebot__preis { margin-top: 18px; }
.w-einzelangebot__preis strong { display: block; font: 700 34px/1.05 var(--font-main); color: var(--white); }
.w-einzelangebot__preis span { display: block; margin-top: 6px; font-size: 13.5px; color: var(--screen-text); }
.w-einzelangebot .w-liste { margin-top: 22px; }
.w-einzelangebot .btn { margin-top: 26px; }

/* Direkter Kontakt: Titel und Adresse */
.w-direkt h2, .w-direkt h3 { margin-bottom: 12px; font-size: 22px; line-height: 1.25; color: var(--white); }
.w-direkt__adresse { margin-top: 16px; font-size: 15.5px; line-height: 1.6; color: var(--text-wand); }
.w-direkt li a { color: var(--white); text-decoration-color: var(--gold); text-underline-offset: 3px; }

/* Abschluss jeder Unterseite: der leere Hammer, daneben die Einladung */
.w-abschluss { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; max-width: 940px; }
.w-abschluss .w-einleitung { margin-top: 14px; }
.w-abschluss h1 { color: var(--white); font-size: clamp(34px, 4vw, 54px); }
.w-abschluss .w-hinweis { margin-top: 22px; }
.w-abschluss--oben { align-items: start; max-width: 1040px; }
.w-abschluss__liste { margin-top: 28px; }
.w-abschluss--oben .w-knoepfe { margin-top: 32px; }

/* Textseiten (Impressum, Datenschutz) auf einem grossen Bogen */
.w-bogen--text { max-width: 760px; margin-inline: auto; }
.w-bogen--text h1 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.08; color: var(--brand); }
.w-bogen--text h2 { margin: 36px 0 10px; font-size: 22px; line-height: 1.25; color: var(--brand); }
.w-bogen--text p, .w-bogen--text li { max-width: 34em; font-size: 16px; line-height: 1.65; color: var(--text); }
.w-bogen--text h1 + p { margin-top: 22px; }
.w-bogen--text p + p, .w-bogen--text p + ul, .w-bogen--text ul + p { margin-top: 12px; }
.w-bogen--text ul { padding-left: 22px; }
.w-bogen--text li + li { margin-top: 6px; }
.w-bogen--text a { color: var(--brand); text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.w-bogen--text strong { color: var(--brand); }
.w-bogen--text code { font-family: ui-monospace, Menlo, monospace; font-size: .9em; }
.w-bogen--text .w-klein { margin-top: 30px; color: var(--grafit-weich); }

/* Gut zu wissen (seit 09.10.2026): Beiträge auf dem Textbogen, Übersicht im Seitenkopf */
.w-bogen--text p + ol, .w-bogen--text ol + p { margin-top: 12px; }
.w-bogen--text ol { padding-left: 26px; }
.w-bogen--text ol li { padding-left: 4px; }
.w-bogen--text ol li::marker { font-weight: 700; color: var(--brand); }
/* Haken- und Kästchenlisten bringen eigene Abstände mit; die Regeln für ul und li + li oben würden sie verdoppeln. */
.w-bogen--text .w-liste { margin-top: 16px; padding-left: 0; }
.w-bogen--text .w-liste li + li { margin-top: 0; }
.w-bogen--text .w-liste + p { margin-top: 18px; }
.w-bogen--text .w-artikel__lead { font-size: 17.5px; line-height: 1.6; }
.w-bogen--text .w-artikel__fuss { max-width: none; padding-top: 18px; border-top: 1px solid var(--papier-linie); }
/* Autor und Datum direkt unter der H1 (Google will ein sichtbares, beschriftetes Datum passend zum Schema) */
.w-bogen--text .w-artikel__zeile { margin-top: 12px; font-size: 14px; }
.w-bogen--text .w-artikel__zeile + .w-artikel__lead { margin-top: 20px; }
.w-beitraege__faq { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--papier-linie); font-size: 15px; line-height: 1.55; color: var(--text); }
.w-beitraege__faq a { color: var(--brand); text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.w-beitraege h2 { font-size: 20px; line-height: 1.25; color: var(--brand); }
.w-beitraege h2 a { color: var(--brand); text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.w-beitraege p.w-klein { margin-top: 10px; font-size: 14px; color: var(--grafit-weich); }

/* Fallstudien: Geschichte auf Papier, Ergebnis am Bildschirm */
.w-fall + .w-fall { margin-top: clamp(96px, 11vw, 160px); }
.w-paar--fall { grid-template-columns: minmax(0, 6fr) var(--luecke) minmax(0, 5fr); }
.w-geschichte p { max-width: 36em; font-size: 16px; line-height: 1.65; color: var(--text); }
.w-geschichte p + p { margin-top: 14px; }
.w-geschichte strong { color: var(--brand); }
.w-geschichte .w-klein { margin-top: 22px; font-size: 14px; color: var(--grafit-weich); }
.w-shots { display: grid; gap: 14px; justify-items: center; }
.w-shots--zwei { grid-template-columns: 1fr 1fr; align-items: start; }
.w-shots .bild-zoom img { border-radius: 6px; }
.w-shots .w-shot-handy { width: 52%; }
.w-shots__hinweis { grid-column: 1 / -1; justify-self: stretch; font-size: 13px; line-height: 1.45; color: var(--screen-text); }
.w-vgl { display: grid; gap: 18px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--screen-linie); }
.w-vgl h3 { font-size: 19px; color: var(--white); }
.w-vgl .w-vgl__vorher h3 { color: var(--screen-text); }
.w-vgl p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--screen-text); }
.w-bildschirm .w-fakten { margin-top: 22px; border-top-color: var(--screen-linie); }
.w-bildschirm .w-fakten li { border-bottom-color: var(--screen-linie); font-size: 15px; }
.w-prinzip { margin-top: 22px; font: 700 18px/1.4 var(--font-main); color: var(--white); }
.w-prinzip span { display: block; margin-top: 6px; font: 400 13px/1.4 var(--font-text); color: var(--screen-text); }
.w-fall__notiz { margin-top: 18px; font-size: 15px; line-height: 1.55; color: var(--screen-text); }

@media (min-width: 861px) {
  .w-paar--fall > .w-bildschirm { position: sticky; top: 100px; align-self: start; }
  .w-paar--fall > .w-uebergang { position: sticky; top: 320px; align-self: start; margin-top: 180px; }
}
@media (max-width: 1080px) {
  .w-punkte--drei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-punkte--drei > li:nth-child(3) { padding-top: 22px; border-top: 1px solid var(--linie); }
  .w-schritte--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 64px; }
  .w-schritte--vier li:nth-child(3)::after { display: none; }
}
@media (max-width: 860px) {
  .w-duo, .w-duo--gespiegelt, .w-spalten, .w-paar--fall { grid-template-columns: minmax(0, 1fr); }
  .w-liste { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .w-punkte--drei { grid-template-columns: minmax(0, 1fr); }
  .w-punkte--drei > li:nth-child(-n+3) { padding-top: 22px; border-top: 1px solid var(--linie); }
  .w-punkte > li:first-child { padding-top: 0; border-top: 0; }
  .w-schritte, .w-schritte--vier { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .w-schritte li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; align-content: start; }
  .w-schritt__nr { grid-row: 1 / span 3; margin: 0; }
  .w-schritte li + li::after { display: none; }
  .w-start > .w-bogen { justify-self: stretch; max-width: none; }
  .w-shots--zwei { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .w-abschluss { grid-template-columns: minmax(0, 1fr); }
  .w-abschluss .w-werkzeug { --s: .6; }
  .w-notiz li { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
  .w-notiz__wert { font-size: 25px; }
  .w-notiz__wert--gross { font-size: 36px; }
  /* Der Kringel um «36 %» ragte am Handy 25 px über den linken Bildschirmrand (07.10.2026): kleiner und nach rechts gerückt */
  .w-notiz .w-kringel-um svg { width: 120px; height: 52px; transform: translate(-42%, -52%); }
}

/* Ergänzungen zu Teil 3 */
.w-foto--hoch { max-width: 380px; justify-self: center; }
.w-bildschirm__titel { margin-bottom: 24px; font-size: 24px; line-height: 1.2; color: var(--white); }
.w-hinweis { max-width: 34em; }
/* Unterzeile unter dem Bildschirmtitel (Checkliste: eigenes Formular seit 25.09.2026) */
.w-bildschirm__unterzeile { margin: -16px 0 22px; font-size: 15px; line-height: 1.5; color: var(--screen-text-leise); }
.w-anfang a { color: var(--white); text-decoration-color: var(--gold); text-underline-offset: 3px; }
.w-abschluss .w-zielgruppe { margin-top: 10px; color: var(--text-wand-leise); }

/* ── Projekte-Vitrine «Zwei eigene Websites, zwei Entwürfe» (seit 07.10.2026) ──
   Ohne JS stehen die Projekte untereinander. Mit JS (Klasse bereit) liegen sie übereinander,
   die Reiter wählen eines aus, und die Seite scrollt in Bildschirm und Handy langsam durch.
   Der goldene Balken im Reiter zeigt, wann das nächste Projekt kommt (Steuerung in main.js). */
.w-vitrine { --dauer: 16s; }
.w-vitrine__projekt { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.w-vitrine__projekt + .w-vitrine__projekt { margin-top: clamp(56px, 7vw, 88px); }
.w-vitrine__buehne { position: relative; padding: 0 9% 7% 0; }
.w-vitrine__monitor {
  background: var(--screen); border-radius: 14px; padding: 0 8px 8px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 2px 4px rgba(0,0,0,.25), 0 40px 70px -34px rgba(0,0,0,.85);
}
/* Titelzeile wie ein Browserfenster: drei Punkte links, Adresse in der Mitte */
.w-vitrine__leiste { position: relative; display: flex; align-items: center; justify-content: center; height: 32px; }
.w-vitrine__leiste::before {
  content: ""; position: absolute; left: 8px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: rgba(255,255,255,.2); box-shadow: 14px 0 0 rgba(255,255,255,.2), 28px 0 0 rgba(255,255,255,.2);
}
.w-vitrine__adresse {
  max-width: 62%; padding: 5px 16px; border-radius: 999px; background: rgba(255,255,255,.07);
  font: 400 12.5px/1.2 var(--font-text); color: var(--screen-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Das Fenster ist ein Container: 100cqh ist seine Höhe, damit weiss die Animation, wie weit sie scrollen darf. */
.w-vitrine__fenster { position: relative; overflow: hidden; aspect-ratio: 16 / 10; container-type: size; background: var(--white); border-radius: 6px; }
.w-vitrine__seite { display: block; width: 100%; height: auto; }
.w-vitrine__handy {
  position: absolute; right: 0; bottom: 0; width: 23%; min-width: 118px;
  background: var(--screen); border-radius: 26px; padding: 18px 6px 14px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 50px -20px rgba(0,0,0,.85);
}
.w-vitrine__handy::before {
  content: ""; position: absolute; top: 8px; left: 50%; width: 30px; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,.18); transform: translateX(-50%);
}
.w-vitrine__handy .w-vitrine__fenster { aspect-ratio: 9 / 19; border-radius: 16px; }
.w-vitrine__text h3 { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; color: var(--white); }
.w-vitrine__text p { margin-top: 14px; max-width: 34em; font-size: 16px; line-height: 1.6; color: var(--text-wand); }
.w-vitrine__text .w-link-hell { margin-right: 22px; }
/* Reiter: erst mit JS sichtbar (hidden im HTML) */
.w-vitrine__wahl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: clamp(28px, 3.5vw, 44px); }
.w-vitrine__wahl[hidden] { display: none; }
.w-vitrine__reiter {
  position: relative; display: block; width: 100%; overflow: hidden;
  padding: 15px 16px 18px; border: 0; border-radius: 8px; cursor: pointer; text-align: left; font: inherit;
  background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); color: var(--text-wand-leise);
  transition: background .25s ease, box-shadow .25s ease;
}
.w-vitrine__reiter:hover { background: rgba(255,255,255,.08); }
.w-vitrine__reiter[aria-selected="true"] { background: var(--screen); box-shadow: inset 0 0 0 1px rgba(200,165,90,.6); color: var(--text-wand); }
.w-vitrine__name { display: block; font: 700 18px/1.2 var(--font-main); color: var(--white); }
.w-vitrine__art { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.3; }
.w-vitrine__lauf {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(var(--gold), var(--gold)) 0 0 / 0% 100% no-repeat, rgba(255,255,255,.08);
}
.w-vitrine__reiter[aria-selected="true"] .w-vitrine__lauf { background-size: 100% 100%, auto; }
/* Anhalten/Weiter (seit 08.10.2026 statt Pause bei Maus darauf, die beim Scrollen fast immer griff) */
.w-vitrine__pause { display: flex; align-items: center; gap: 8px; margin: 22px 0 0; padding: 8px 14px; border: 0; border-radius: 999px; cursor: pointer; font: 600 14px/1 var(--font-text); color: var(--text-wand); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.w-vitrine__pause:hover { background: rgba(255,255,255,.1); }
.w-vitrine__pause::before { content: ""; width: 10px; height: 12px; background: linear-gradient(90deg, currentColor 0 3px, transparent 3px 7px, currentColor 7px 10px); }
.w-vitrine__pause[aria-pressed="true"]::before { width: 0; height: 0; background: none; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.w-vitrine__pause[hidden] { display: none; }
.w-vitrine.bereit .w-vitrine__projekte { display: grid; }
.w-vitrine.bereit .w-vitrine__projekt { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.w-vitrine.bereit .w-vitrine__projekt.ist-aktiv { opacity: 1; visibility: visible; transition: opacity .5s ease; }
@media (prefers-reduced-motion: no-preference) {
  .w-vitrine.bereit .ist-aktiv .w-vitrine__seite { animation: vitrine-blaettern var(--dauer) ease-in-out infinite paused; }
  .w-vitrine.bereit .ist-aktiv .w-vitrine__handy .w-vitrine__seite { animation-delay: .3s; }
  .w-vitrine.laeuft .ist-aktiv .w-vitrine__seite { animation-play-state: running; }
  .w-vitrine.bereit:not(.handbetrieb) .w-vitrine__reiter[aria-selected="true"] .w-vitrine__lauf { animation: vitrine-lauf var(--dauer) linear both paused; }
  .w-vitrine.laeuft:not(.handbetrieb) .w-vitrine__reiter[aria-selected="true"] .w-vitrine__lauf { animation-play-state: running; }
}
/* Langsam blättern: kurz oben (seit 08.10.2026 nur noch rund 0,5 s, vorher 1,3 s), in drei Etappen nach unten, kurz halten, zurück nach oben */
@keyframes vitrine-blaettern {
  0%, 3% { transform: translateY(0); }
  22%, 30% { transform: translateY(calc((100cqh - 100%) * .34)); }
  49%, 57% { transform: translateY(calc((100cqh - 100%) * .68)); }
  78%, 88% { transform: translateY(calc(100cqh - 100%)); }
  100% { transform: translateY(0); }
}
@keyframes vitrine-lauf { from { background-size: 0% 100%, auto; } to { background-size: 100% 100%, auto; } }
@media (max-width: 1080px) {
  .w-vitrine__projekt { grid-template-columns: minmax(0, 1fr); }
  .w-vitrine__buehne { max-width: 760px; }
}
@media (max-width: 640px) {
  .w-vitrine__wahl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .w-vitrine__reiter { padding: 12px 12px 15px; }
  .w-vitrine__name { font-size: 16px; }
  .w-vitrine__art { font-size: 12.5px; }
  .w-vitrine__buehne { padding: 0 13% 9% 0; }
  .w-vitrine__monitor { border-radius: 10px; padding: 0 5px 5px; }
  .w-vitrine__leiste { height: 24px; }
  .w-vitrine__leiste::before { left: 6px; width: 6px; height: 6px; margin-top: -3px; box-shadow: 10px 0 0 rgba(255,255,255,.2), 20px 0 0 rgba(255,255,255,.2); }
  .w-vitrine__adresse { font-size: 11px; padding: 3px 10px; }
  .w-vitrine__fenster { border-radius: 4px; }
  .w-vitrine__handy { width: 30%; min-width: 0; border-radius: 18px; padding: 12px 4px 10px; }
  .w-vitrine__handy::before { top: 5px; width: 20px; height: 3px; }
  .w-vitrine__handy .w-vitrine__fenster { border-radius: 11px; }
}

/* Kontakt, Stufe website (Michi 07.10.2026): die Antwort neben dem Hammer trägt, die Frage tritt zurück */
.w-brett__frage--antwort { font: 700 20px/1.2 var(--font-main); color: var(--white); }
.w-brett__frage--antwort strong { font: 400 15px/1.35 var(--font-text); color: var(--text-wand-leise); margin-bottom: 8px; }
@media (max-width: 860px) { .w-brett__frage--antwort { font-size: 19px; } .w-brett__frage--antwort strong { font-size: 14.5px; } }

/* Kontakt in der Zwischenphase: drei Werkzeuge neben dem leeren Hammerplatz, Frage darunter (seit 08.10.2026) */
.w-brett--wand { --s: .62; }
.w-brett__reihe { display: flex; align-items: flex-start; gap: 12px; }
.w-brett--wand .w-leerplatz { margin: 0; }
.w-brett--wand .w-brett__frage { position: static; width: auto; margin-top: 22px; }
.w-brett--wand .w-brett__frage--antwort { font-size: 24px; line-height: 1.2; }
.w-brett--wand .w-brett__frage--antwort strong { font: 700 19px/1.25 var(--font-main); color: var(--gold); margin-bottom: 6px; }
@media (max-width: 860px) {
  .w-brett.w-brett--wand { display: block; --s: .55; }
  .w-brett--wand .w-brett__frage--antwort { font-size: 21px; }
  .w-brett--wand .w-brett__frage--antwort strong { font-size: 17px; }
}

/* Häufige Fragen: nur die ersten (data-faq-kurz) zeigen, Rest per Knopf (seit 08.10.2026). Ohne JS alle sichtbar. */
.w-faq.gekuerzt details.faq-weitere { display: none; }
.w-faq__mehr { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 10px 18px; border: 0; border-radius: 999px; cursor: pointer; font: 600 15px/1 var(--font-text); color: var(--brand); background: transparent; box-shadow: inset 0 0 0 1.5px var(--brand); }
.w-faq__mehr:hover { background: rgba(0,0,0,.04); }
.w-faq__mehr::after { content: "+"; font-size: 18px; line-height: 1; }
.w-faq__mehr[hidden] { display: none; }

/* WhatsApp-Link im «Direkten Draht» der Kontaktseite (seit 09.10.2026) */
.w-direkt__wa { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 18px; color: var(--white); text-underline-offset: 5px; text-decoration-color: rgba(255,255,255,.4); }
.w-direkt__wa:hover { color: var(--gold); }
.w-direkt__wa svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linejoin: round; }

/* Erklärvideo «Kurt» (Comic) auf /website/ (seit 09.10.2026): Rahmen wie die Vitrine, Vorschaubild bis zum Antippen */
.w-video { margin: 0; max-width: 960px; }
.w-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #0b2a2a; border-radius: 8px; box-shadow: 0 18px 40px rgba(0,0,0,.35); }