@font-face { font-family:'DM Sans'; font-style:normal; font-weight:300 700; font-display:swap; src:url('fonts/dmsans-latin.woff2') format('woff2'); }
@font-face { font-family:'DM Sans'; font-style:italic; font-weight:300 500; font-display:swap; src:url('fonts/dmsans-italic-latin.woff2') format('woff2'); }
@font-face { font-family:'Source Serif 4'; font-style:normal; font-weight:300 700; font-display:swap; src:url('fonts/sourceserif-latin.woff2') format('woff2'); }
@font-face { font-family:'Source Serif 4'; font-style:italic; font-weight:400; font-display:swap; src:url('fonts/sourceserif-italic-latin.woff2') format('woff2'); }

:root {
  --ink:       #131c26;
  --ink-2:     #1c2836;
  --ink-3:     #2a3846;
  --paper:     #f6f3ec;
  --paper-2:   #fffdf9;
  --brick:     #b4472c;
  --brick-dk:  #93361f;
  --brick-tint:#f0e2dc;
  --apricot:   #e8a289;
  --text:      #17202a;
  --text-mid:  #4d5661;
  --text-dim:  #7b848e;
  --line:      #ddd7cb;
  --line-dark: rgba(246,243,236,.14);
  --serif:     'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  --sans:      'DM Sans', system-ui, sans-serif;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;
  --ease: cubic-bezier(.16,1,.3,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--text);
  font-family: var(--sans); font-size: 17px; line-height: 1.68;
  font-weight: 300; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.12; letter-spacing: -.012em; margin: 0; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--s3); }
.narrow { max-width: 68ch; }

.skip { position: absolute; left: 0; top: -200px; background: var(--brick); color: #fff; padding: 14px 24px; font-weight: 600; z-index: 999; }
.skip:focus { top: 0; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--brick); outline-offset: 3px; border-radius: 2px; }
.dark a:focus-visible, .dark summary:focus-visible, .kopfband a:focus-visible,
.topbar a:focus-visible, .topbar summary:focus-visible { outline-color: var(--apricot); }

.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brick); margin: 0 0 var(--s3); display: flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--brick); flex: none; }
.dark .eyebrow, .hero .eyebrow { color: var(--apricot); }
.dark .eyebrow::before, .hero .eyebrow::before { background: var(--apricot); }

.btn {
  display: inline-block; font-family: var(--sans); font-size: 15px; font-weight: 600;
  padding: 15px 30px; border: 2px solid transparent; border-radius: 3px;
  transition: transform .3s var(--ease), background-color .25s ease, color .25s ease, border-color .25s ease;
  cursor: pointer; letter-spacing: .01em;
}
.btn-primary { background: var(--brick); color: #fff; }
.btn-primary:hover { background: var(--brick-dk); transform: translateY(-2px); }
.btn-line { border-color: var(--line); color: var(--text); }
.btn-line:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); transform: translateY(-2px); }
.dark .btn-line, .hero .btn-line, .kopfband .btn-line { border-color: rgba(246,243,236,.32); color: var(--paper); }
.dark .btn-line:hover, .hero .btn-line:hover, .kopfband .btn-line:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* ---------- Kopf ---------- */
.topbar {
  position: sticky; top: 0; z-index: 100; background: var(--ink); color: var(--paper);
  border-bottom: 1px solid var(--line-dark);
}
.topbar .wrap { display: flex; align-items: center; gap: var(--s4); min-height: 68px; }
.brand { font-family: var(--serif); font-size: 21px; font-weight: 600; letter-spacing: -.02em; margin-right: auto; }
.brand .punkt { color: var(--apricot); }
/* Nur die oberste Ebene. Seit die Klappmenues da sind, liegen weitere ul und a
   INNERHALB von .mainnav: Mit .mainnav ul wurden die Panel-Eintraege zu einer
   Flex-Zeile und lagen uebereinander, mit .mainnav a bekamen sie die helle
   Schrift der dunklen Menuezeile. Dieselbe Kaskadenfalle wie bei
   weihnachtsbaum-christbaum.de, dort stand sie in der Doku - und ich bin
   trotzdem hineingelaufen. */
.mainnav > ul { display: flex; align-items: baseline; gap: var(--s4); list-style: none; margin: 0; padding: 0; }
.mainnav > ul > li > a { font-size: 15px; color: rgba(246,243,236,.82); padding: 8px 0; position: relative; transition: color .2s; }
.mainnav > ul > li > a:hover { color: #fff; }
.mainnav > ul > li > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--apricot);
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.mainnav > ul > li > a:hover::after { transform: scaleX(1); }
.mainnav > ul > li > a[aria-current="page"] { color: #fff; }
.mainnav > ul > li > a[aria-current="page"]::after { transform: scaleX(1); }
/* Kopfzeilen-Knopf im Stil des Hauptknopfs (Variante 10), verkleinert: Karte in
   Ink-2, ziegelrotes Medaillon mit Brief halb über dem linken Rand. */
.mainnav > ul > li > a.nav-cta {
  margin-left: 14px; padding: 10px 20px 10px 26px; font-weight: 600; color: var(--paper);
  background: var(--ink-2); border: 1px solid rgba(246,243,236,.14); border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(232,162,137,.28); transition: background .3s var(--ease), color .3s var(--ease);
}
.mainnav > ul > li > a.nav-cta::after { display: none; }
.mainnav > ul > li > a.nav-cta::before {
  content: ""; position: absolute; left: -14px; top: 50%; margin-top: -14px; width: 28px; height: 28px;
  border-radius: 50%; background: var(--brick) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8a289' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='1.5'/%3E%3Cpath d='m3.5 6.5 8.5 6.5 8.5-6.5'/%3E%3C/svg%3E") center / 16px no-repeat;
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 3px rgba(232,162,137,.5);
  transform: rotate(-9deg); transition: transform .5s var(--ease);
}
.mainnav > ul > li > a.nav-cta:hover { background: var(--ink-3); color: var(--apricot); }
.mainnav > ul > li > a.nav-cta:hover::before { transform: rotate(0) scale(1.08); }

/* Mobile Navigation, ohne JavaScript */

/* ---------- Klappmenüs der Hauptnavigation ----------
   Übernommen von weihnachtsbaum-christbaum.de, dort am 07.09.2026 entstanden.
   Gleiche Mechanik, andere Bildsprache: statt Zapfen und Gold ein Linienzeichen
   auf Tinte. Die Grenze 900 steht hier UND in nav.js. */
.nav-ast { position: relative; display: flex; align-items: center; gap: 2px; }
.nav-versteckt {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.nav-klapp {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 28px; flex: none; padding: 0; margin: 0;
  background: none; border: 0; cursor: pointer; color: rgba(246,243,236,.6);
  /* Ohne JavaScript unsichtbar, der Platz aber reserviert: sonst ruckt die
     Menüzeile beim Laden, und niemand drückt auf einen toten Knopf. */
  visibility: hidden;
}
.nav-bereit .nav-klapp { visibility: visible; }
.nav-klapp svg { transition: transform .25s var(--ease); }
.nav-klapp:hover { color: #fff; }
.nav-klapp[aria-expanded="true"] { color: #fff; }
.nav-klapp[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Kein grauer Rahmen mit weichem Schatten - das ist die Karte, die jeder
   Generator baut. Stattdessen Papier, eine feine Inset-Linie in Ziegel und
   ein Medaillon, das halb über die Kante ragt. */
.nav-panel {
  position: absolute; top: calc(100% + 14px); left: 0; z-index: 40;
  min-width: min(22rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  background: var(--paper-2);
  border: 1px solid var(--line);
  box-shadow:
    inset 0 0 0 1px rgba(180,71,44,.20),
    0 30px 60px -34px rgba(19,28,38,.65),
    0 8px 18px -14px rgba(19,28,38,.35);
}
/* Unsichtbare Brücke über den 14 Pixeln zwischen Menüzeile und Kasten. Ohne
   sie verlässt der Zeiger auf dem Weg nach unten kurz den Menüpunkt, und das
   Menü fängt an zu flackern. */
.nav-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }

.nav-medaillon {
  position: absolute; top: -19px; left: 22px; width: 40px; height: 40px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--ink); color: var(--apricot);
  box-shadow: 0 0 0 3px var(--paper-2), 0 0 0 4px rgba(180,71,44,.45),
              0 10px 20px -10px rgba(19,28,38,.6);
  transform: rotate(-9deg);
}
.nav-medaillon svg { width: 23px; height: 23px; display: block; }
/* Klappt der Kasten nach rechts, wandert das Medaillon mit - sonst hängt es am
   entgegengesetzten Ende und zeigt auf nichts. */
/* Wird das Panel nach links geschoben, wandert das Medaillon ans andere
   Ende - sonst zeigt es auf nichts. */
.nav-panel-rechts .nav-medaillon { left: auto; right: 22px; }

/* Feste Spurbreite, nicht minmax(0, …): Das Panel ist absolut positioniert und
   nimmt die Breite seines Inhalts. Mit einer Untergrenze von 0 fielen die
   Spalten auf die min-width zusammen und jede Beschriftung bräche dreizeilig. */
.nav-panel-innen { display: grid; gap: var(--s3) var(--s4); padding: 30px var(--s3) var(--s3); }
.nav-spalten-1 { grid-template-columns: 19rem; }
.nav-spalten-2 { grid-template-columns: repeat(2, 17rem); }
.nav-spalten-3 { grid-template-columns: repeat(3, 15rem); }
/* Vier Gruppen nebeneinander wären 60 Zeichen breite Säulen. Sie stehen
   deshalb als zwei mal zwei. Ohne diese Regel fällt das Raster auf eine Spalte
   zurück, und das absolut positionierte Panel nimmt die Breite seines Inhalts:
   beim ersten Anlauf lief es über den ganzen Bildschirm. */
.nav-spalten-4 { grid-template-columns: repeat(2, 17rem); }
.nav-gruppe {
  font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-dim); margin: 0 0 8px;
}
.nav-ziele { display: block; list-style: none; margin: 0; padding: 0; }
.nav-ziele a {
  display: block; padding: 7px 8px; margin-left: -8px; border-radius: 2px;
  transition: background-color .18s ease;
}
.nav-ziele a:hover { background: var(--brick-tint); }
.nav-ziele b { display: block; font-size: 15px; font-weight: 600; color: var(--text); }
.nav-ziele a:hover b { color: var(--brick-dk); }
.nav-ziele span { display: block; font-size: 13px; line-height: 1.45; color: var(--text-mid); }

/* Der Auftritt: drei Bewegungen, nur am Rechner. Der Kasten fährt hoch, die
   Einträge laufen gestaffelt nach (--i aus dem Markup), das Medaillon dreht
   sich zuletzt in seine Lage - es ist der Blickfang, also darf es der einzige
   Teil sein, der wirklich auffällt. */
@media (min-width: 901px) {
  .nav-panel {
    opacity: 0; transform: translateY(-10px) scale(.985); transform-origin: top left;
    transition: opacity .22s var(--ease), transform .34s var(--ease);
  }
  .nav-panel-rechts { transform-origin: top right; }
  .nav-panel.auf { opacity: 1; transform: none; }

  .nav-medaillon {
    opacity: 0; transform: rotate(-52deg) scale(.45);
    transition: opacity .3s var(--ease) .08s, transform .5s cubic-bezier(.2,1.4,.4,1) .08s;
  }
  .nav-panel.auf .nav-medaillon { opacity: 1; transform: rotate(-9deg) scale(1); }

  .nav-gruppe, .nav-ziele li {
    opacity: 0; transform: translateY(8px);
    transition: opacity .28s var(--ease), transform .34s var(--ease);
  }
  .nav-panel.auf .nav-gruppe { opacity: 1; transform: none; transition-delay: .05s; }
  .nav-panel.auf .nav-ziele li {
    opacity: 1; transform: none;
    transition-delay: calc(var(--i, 0) * 28ms + 70ms);
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav-panel, .nav-medaillon, .nav-gruppe, .nav-ziele li {
    transition: none !important; opacity: 1; transform: none;
  }
  .nav-medaillon { transform: rotate(-9deg); }
}
/* Unter 900 Pixeln übernimmt die mobilnav: Klappknopf und Panel bleiben außen vor. */
@media (max-width: 900px) {
  .nav-klapp, .nav-panel { display: none; }
}

.mobilnav { display: none; }
.mobilnav > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 600; letter-spacing: .04em; color: var(--paper);
  padding: 10px 4px 10px 0;
}
.mobilnav > summary::-webkit-details-marker { display: none; }
.mobilnav > summary .balken { display: block; width: 22px; height: 12px; position: relative; flex: none; }
.mobilnav > summary .balken::before,
.mobilnav > summary .balken::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--paper);
  transition: transform .3s var(--ease), top .3s var(--ease);
}
.mobilnav > summary .balken::before { top: 0; }
.mobilnav > summary .balken::after { top: 10px; }
.mobilnav[open] > summary .balken::before { top: 5px; transform: rotate(45deg); }
.mobilnav[open] > summary .balken::after { top: 5px; transform: rotate(-45deg); }
.mobilnav-panel {
  position: absolute; left: 0; right: 0; top: 100%; background: var(--ink-2);
  border-bottom: 1px solid var(--line-dark); padding: var(--s2) 0 var(--s3);
  box-shadow: 0 24px 40px -24px rgba(0,0,0,.7);
}
.mobilnav-panel ul { list-style: none; margin: 0; padding: 0; }
.mobilnav-panel li { border-bottom: 1px solid var(--line-dark); }
.mobilnav-panel li:last-child { border-bottom: 0; }
.mobilnav-panel a { display: block; padding: 14px var(--s3); font-size: 16.5px; color: rgba(246,243,236,.88); }
.mobilnav-panel a:hover { background: var(--ink-3); color: #fff; }

/* ---------- Hero ---------- */
.hero { background: var(--ink); color: var(--paper); position: relative; overflow: hidden; padding: clamp(56px, 7vw, 92px) 0 clamp(56px, 7vw, 92px); }
.hero h1 { font-size: clamp(33px, 4.3vw, 54px); letter-spacing: -.018em; line-height: 1.1; margin-bottom: var(--s4); }
.hero h1 em { font-style: italic; font-weight: 400; color: var(--apricot); }
.hero .lead { font-size: clamp(17px, 1.35vw, 19.5px); color: rgba(246,243,236,.86); max-width: 54ch; }
.hero .lead strong { font-weight: 600; color: #fff; }
/* Flex-Spalte, damit die Markenzeile am unteren Ende haengt. Unter 1150 Pixeln
   bricht die Beschreibung im Register unter den Namen, dann ist die rechte Spalte
   hoeher als die linke - ohne margin-top:auto endet die Markenzeile dort 16 Pixel
   zu frueh. Steht links mehr Text, greift die Regel nicht, weil kein Platz frei ist. */
.hero-inner { position: relative; z-index: 2; display: flex; flex-direction: column; }
/* auto ersetzt das margin-top der Grundregel, deshalb steht der Mindestabstand
   hier als padding: sonst klebt die Zeile an der Knopfreihe. */
.hero-inner .hero-marke { margin-top: auto; padding-top: var(--s5); }

.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(32px, 5vw, 64px); align-items: stretch;
}
.cta-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }
.ortsmarke, .hero-marke {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px;
  font-size: 13.5px; letter-spacing: .06em; color: rgba(246,243,236,.6); margin-top: var(--s5);
}
.ortsmarke .dot, .hero-marke .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brick); flex: none; position: relative; display: block; }
.ortsmarke .dot::after, .hero-marke .dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--brick); opacity: .6; }
/* Nicht jeder Punkt der Zeile ist ein Link. Der Trennpunkt haengt deshalb am
   Kind, nicht am a, sonst faellt er weg, sobald dazwischen ein span steht. */
.hero-marke > :not(.dot) { position: relative; padding-bottom: 2px; }
.hero-marke a { transition: color .2s ease; }
.hero-marke a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--apricot);
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.hero-marke a:hover { color: var(--paper); }
.hero-marke a:hover::after { transform: scaleX(1); }
.hero-marke > :not(.dot):not(:last-child)::before {
  content: ""; position: absolute; right: -10px; top: 50%; width: 2px; height: 2px; margin-top: -1px;
  border-radius: 50%; background: rgba(246,243,236,.35);
}

/* Werkverzeichnis im Hero */
/* Das Register dehnt sich auf die Hoehe der linken Spalte, damit
   "Alle Leistungen ansehen" und die Markenzeile links auf einer Linie enden
   (Daniel, 13.09.2026). Gestreckt werden die vier Zeilen selbst, nicht die
   Abstaende dazwischen: sonst stuenden die Trennlinien frei in der Luft. */
.werk { border-top: 1px solid var(--line-dark); display: flex; flex-direction: column; }
/* Ohne flex:1 bleibt das Register auf seiner natuerlichen Hoehe stehen, auch
   wenn die Spalte gestreckt ist - dann stimmt die Unterkante nicht. */
.hero-neben .werk { flex: 1 1 auto; }
.werk ol { flex: 1; display: flex; flex-direction: column; }
.werk li { flex: 1 1 0; }
.werk li a { height: 100%; align-content: center; }
.werk-kopf {
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(246,243,236,.45); padding: var(--s3) 0 var(--s2); margin: 0;
}
.werk ol { list-style: none; margin: 0; padding: 0; counter-reset: w; }
/* (Anzeige und Streckung stehen oben, hier nur Liste und Zaehler.) */
.werk li { counter-increment: w; border-bottom: 1px solid var(--line-dark); }
.werk li a {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px var(--s3);
  align-items: baseline; padding: 13px 0 13px 40px; position: relative;
  transition: padding-left .3s var(--ease), background-color .25s ease;
}
.werk li a::before {
  content: counter(w, decimal-leading-zero); position: absolute; left: 0; top: 15px;
  font-family: var(--serif); font-size: 12.5px; color: var(--apricot); font-variant-numeric: tabular-nums;
}
.werk li a:hover { padding-left: 48px; background: rgba(246,243,236,.05); }
.werk b { font-weight: 600; font-size: 16px; color: var(--paper); flex: none; }
.werk span { font-size: 13.5px; color: rgba(246,243,236,.6); text-align: right; }
.werk li a:hover b { color: #fff; }
.werk li a:hover span { color: rgba(246,243,236,.8); }
@media (max-width: 1150px) {
  /* zu eng fuer zwei Spalten: Beschreibung sauber unter die Domain, statt zufaellig umbrechen */
  .werk li a { grid-template-columns: minmax(0, 1fr); }
  .werk span { text-align: left; }
}
.werk-fuss { margin: var(--s3) 0 0; font-size: 14.5px; }
.werk-fuss a { color: var(--apricot); }
.werk-fuss a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Sektionen ---------- */
section { padding: clamp(64px, 8vw, 112px) 0; }
.sec-head { max-width: 62ch; margin-bottom: var(--s6); }
.sec-head h2 { font-size: clamp(30px, 3.9vw, 46px); margin-bottom: var(--s3); }
.sec-head p { font-size: 18px; color: var(--text-mid); }
.dark { background: var(--ink); color: var(--paper); }
.dark .sec-head p, .dark .lead-alt { color: rgba(246,243,236,.8); }
.tint { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* Leistungen als Register, keine Card-Suppe */
.group { margin-bottom: var(--s6); }
.group:last-child { margin-bottom: 0; }
.group-head {
  display: flex; align-items: baseline; gap: var(--s3); padding-bottom: var(--s2);
  border-bottom: 2px solid var(--ink); margin-bottom: var(--s1);
}
.group-head h3 { font-size: 22px; }
.group-head span { font-size: 13px; color: var(--text-dim); margin-left: auto; letter-spacing: .04em; }
.svc {
  display: grid; grid-template-columns: minmax(0, 19em) minmax(0, 1fr) 2em;
  gap: var(--s4); align-items: baseline;
  border-bottom: 1px solid var(--line); padding: var(--s3) 0;
  transition: padding-left .35s var(--ease), border-color .25s ease;
}
.svc:hover { padding-left: 14px; border-color: var(--brick); }
/* Leistungen ohne eigene Seite: gleichwertig genannt, aber nicht anklickbar */
.svc-ohne { grid-template-columns: minmax(0, 19em) minmax(0, 1fr) 2em; cursor: default; }
.svc-ohne:hover { padding-left: 0; border-color: var(--line); }
.svc h3, .svc h4 { font-family: var(--sans); font-size: 18px; font-weight: 600; letter-spacing: 0; line-height: 1.35; }
.svc .arrow { color: var(--brick); font-size: 19px; opacity: 0; transform: translateX(-10px); transition: opacity .3s var(--ease), transform .3s var(--ease); text-align: right; }
.svc:hover .arrow { opacity: 1; transform: translateX(0); }
.svc p { font-size: 15.5px; color: var(--text-mid); max-width: 68ch; margin: 0; }

/* Ablauf */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); counter-reset: st; }
.step { counter-increment: st; border-top: 2px solid rgba(246,243,236,.25); padding-top: var(--s3); }
.step::before {
  content: counter(st, decimal-leading-zero); display: block; font-family: var(--serif);
  font-size: 34px; color: var(--apricot); line-height: 1; margin-bottom: var(--s2);
}
.step h3 { font-size: 21px; margin-bottom: 10px; }
.step p { font-size: 15.5px; color: rgba(246,243,236,.78); margin: 0; }

/* Referenzen */
.refs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--s6); }
.ref {
  border-bottom: 1px solid var(--line); padding: var(--s3) 0; display: flex; gap: var(--s3);
  align-items: baseline; transition: padding-left .3s var(--ease), border-color .25s ease;
}
.ref:hover { padding-left: 12px; border-color: var(--brick); }
.ref b { font-family: var(--sans); font-weight: 600; font-size: 16.5px; flex: none; min-width: 12.5em; }
.ref span { font-size: 15px; color: var(--text-mid); }
.ref:hover b { color: var(--brick); }

/* ---------- Slider: gemeinsame Mechanik ----------
   Zwei Abschnitte ziehen Folien durch: die Werkschau mit Kundenprojekten und
   die Google-Bewertungen. Die Mechanik steht deshalb einmal hier, das Aussehen
   je Bauteil darunter. Gefuehrt wird alles von assets/slider.js.

   Grundlage ist scroll-snap. Wischen, Trackpad und Tastatur macht damit der
   Browser, das laeuft auch ohne JavaScript. Was das Skript beisteuert, haengt
   an .js-an: ohne Skript bleibt jede Folie voll lesbar.

   Die Spur laeuft ueber die Satzbreite hinaus bis an den Bildschirmrand, sonst
   endet sie an einer unsichtbaren Kante und bei der ersten Folie steht die
   halbe Sektion leer. Das Ausbrechen braucht overflow-x: clip an der Sektion,
   weil 50vw die Bildlaufleiste mitzaehlt. */
.slider { position: relative; margin-inline: calc(50% - 50vw); }
#referenzen, #bewertungen { overflow-x: clip; }

.spur {
  display: flex; gap: clamp(20px, 3vw, 40px);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: var(--s1) calc(50% - var(--folie) / 2) var(--s5);
  scrollbar-width: none; -ms-overflow-style: none;
}
.spur::-webkit-scrollbar { display: none; }
.spur:focus-visible { outline: 2px solid var(--brick); outline-offset: 6px; }
/* Waehrend des Ziehens muss das Einrasten aus, sonst kaempft es gegen die Maus. */
.spur.wird-gezogen { scroll-snap-type: none; cursor: grabbing; }
.js-an .spur { cursor: grab; }

.folie { flex: 0 0 var(--folie); scroll-snap-align: center; }
.folie > a { display: block; }

/* Der Deckel ist die Folie ganz links. Sie fuellt beim Aufruf die leere
   Haelfte, damit die erste echte Folie mittig im Fokus stehen kann statt am
   Rand. Sie ist kein Schnappziel und traegt kein data-folie, faellt also aus
   Fokus, Zaehler und Tastatur heraus. */
.deckel { scroll-snap-align: none; }

.steuer {
  display: none; align-items: center; justify-content: center;
  gap: var(--s3); margin-top: calc(var(--s3) * -1);
}
.js-an .steuer { display: flex; }
.steuer button {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  border: 1px solid var(--line); background: transparent; color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease,
              color .25s ease, transform .3s var(--ease), opacity .25s ease;
}
.steuer button svg { width: 18px; height: 18px; }
.steuer button:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.steuer button:active:not(:disabled) { transform: scale(.93); }
.steuer button:disabled { opacity: .28; cursor: default; }

.zaehler {
  font-family: var(--serif); font-size: 15.5px; color: var(--text-mid);
  font-variant-numeric: tabular-nums; margin: 0; min-width: 6.5em; text-align: center;
}
.zaehler b { color: var(--ink); font-weight: 600; }
.zaehler span { color: var(--text-dim); }

/* Auf dunklem Grund braucht die Steuerung eigene Farben, sonst verschwindet
   die Schrift im Knopf. Gilt wie bei .btn-line je Flaeche einzeln. */
.dark .steuer button { border-color: var(--line-dark); color: var(--paper); }
.dark .steuer button:hover:not(:disabled) { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.dark .zaehler { color: rgba(246, 243, 236, .6); }
.dark .zaehler b { color: var(--paper); }
.dark .zaehler span { color: rgba(246, 243, 236, .38); }

@media (max-width: 700px) {
  .spur { padding-bottom: var(--s4); }
  .steuer { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .spur { scroll-behavior: auto; }
}

/* ---------- Werkschau: Blaetter durchziehen ----------
   Ein aufgeschlagenes Werkstattbuch. Das mittlere Blatt liegt vorn im Licht,
   die Nachbarn stehen zurueck, entsaettigt und angeschnitten. */
.werkschau { --folie: clamp(232px, 26vw, 420px); }

.ws-blatt {
  display: block; overflow: hidden; background: var(--paper-2);
  border: 1px solid var(--line); border-radius: 2px;
  box-shadow: 0 1px 2px rgba(19, 28, 38, .05);
  transition: transform .6s var(--ease), opacity .6s var(--ease),
              filter .6s var(--ease), box-shadow .6s var(--ease);
}
.ws-blatt img { display: block; width: 100%; height: auto; }

/* Zurueckgesetzt sind die Nachbarn erst, wenn das Skript den Fokus fuehren kann. */
.js-an .ws-blatt { transform: scale(.87); opacity: .5; filter: saturate(.45); }
.werkschau.js-an .folie.ist-fokus .ws-blatt {
  transform: scale(1); opacity: 1; filter: none;
  box-shadow: 0 2px 4px rgba(19, 28, 38, .06), 0 20px 46px -14px rgba(19, 28, 38, .3);
}
.werkschau.js-an .folie.ist-fokus > a:hover .ws-blatt { transform: scale(1.02); }

/* Der Buchdeckel traegt keinen Link, es gibt keine Referenzseite dazu. */
.ws-deckel .ws-blatt {
  aspect-ratio: 720 / 450; background: var(--paper);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: var(--s2); padding: var(--s4); text-align: center;
}
/* Entsaettigt wuerde aus dem Ziegel ein Grau. Der Deckel wird nur gedaempft. */
.js-an .ws-deckel .ws-blatt { filter: none; opacity: .8; }
.wd-oben {
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-dim); margin: 0;
}
.wd-zahl {
  font-family: var(--serif); font-size: clamp(48px, 7vw, 76px); font-weight: 600;
  line-height: 1; color: var(--brick); margin: 0; font-variant-numeric: tabular-nums;
}
.wd-unten { font-size: 14.5px; line-height: 1.45; color: var(--text-mid); margin: 0; }

.ws-text { display: block; padding-top: var(--s3); text-align: center; }
.js-an .ws-text {
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s var(--ease) .06s, transform .5s var(--ease) .06s;
}
.werkschau.js-an .folie.ist-fokus .ws-text { opacity: 1; transform: none; }
.ws-text b {
  display: block; font-family: var(--serif); font-size: 19px; font-weight: 600;
  color: var(--ink); margin-bottom: 3px; transition: color .25s ease;
}
.ws-text span { display: block; font-size: 14.5px; color: var(--text-mid); }
.werkschau .folie > a:hover .ws-text b { color: var(--brick); }

/* Beim Tabben muss sichtbar werden, wo man ist, auch wenn die Folie am Rand liegt. */
.werkschau .folie > a:focus-visible .ws-blatt {
  transform: scale(1); opacity: 1; filter: none;
  outline: 2px solid var(--brick); outline-offset: 4px;
}
.werkschau .folie > a:focus-visible .ws-text { opacity: 1; transform: none; }

.ws-alle { margin-top: var(--s5); }

@media (max-width: 700px) {
  .werkschau { --folie: 78vw; }
  .js-an .ws-blatt { transform: scale(.92); opacity: .55; }
}
/* Ohne Bewegung bleibt die Hierarchie ueber Helligkeit erhalten, nur ohne Fahrt. */
@media (prefers-reduced-motion: reduce) {
  .ws-blatt, .ws-text { transition: none; }
  .js-an .ws-blatt { transform: none; }
  .werkschau.js-an .folie.ist-fokus > a:hover .ws-blatt { transform: none; }
}

/* ---------- Google-Bewertungen ----------
   Dieselbe Spur wie die Werkschau, anderes Aussehen.

   Der Abschnitt stand zuerst dunkel weit unten zwischen "Ich bin Daniel" und
   der FAQ. Daniel am 24.08.2026: gehoert weiter oben. Jetzt direkt hinter dem
   Hero, und damit zwangslaeufig auf Papier: der Hero ist Tinte, ein dunkler
   Abschnitt direkt darunter waere mit ihm zu einem Block verschmolzen.

   Zitate werden NICHT abgedunkelt. Bei Bildern traegt das die Tiefe, bei Text
   macht es die Nachbarn nur unleserlich. Der Fokus laeuft ueber Grund und
   Ziegelkante, das reicht.

   Folien sind breiter als in der Werkschau, weil Fliesstext sonst zu schmal
   umbricht. */
.bewschau { --folie: clamp(272px, 34vw, 440px); }

/* Der Deckel der Bewertungen ist die Gesamtnote. Sie stand vorher als Leiste
   ueber dem Slider und liess links die halbe Sektion leer. */
.bew-deckel {
  display: flex; flex-direction: column; justify-content: center; gap: var(--s2);
  padding: var(--s3) var(--s4) var(--s3) 0;
}
.bew-note { display: flex; align-items: center; gap: var(--s2); margin: 0; }
.bew-note b {
  font-family: var(--serif); font-size: clamp(38px, 5vw, 52px); font-weight: 600;
  line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums;
}
.bew-zahl { margin: 0; font-size: 15px; color: var(--text-mid); line-height: 1.5; }
.bew-zahl a { color: var(--brick); font-weight: 600; }
.bew-zahl a:hover { text-decoration: underline; text-underline-offset: 3px; }

.bew-sterne { display: inline-flex; gap: 3px; }
.bew-sterne svg { width: 19px; height: 19px; }
.bew-sterne svg.voll { fill: var(--brick); }
.bew-sterne svg.leer { fill: var(--line); }
.bew-sterne.klein svg { width: 14px; height: 14px; }

.bew {
  margin: 0; height: 100%; padding: var(--s3);
  border: 1px solid var(--line); border-radius: 2px; background: transparent;
  display: flex; flex-direction: column; gap: var(--s2);
  transition: background-color .5s var(--ease), border-color .5s var(--ease),
              box-shadow .5s var(--ease);
}
/* Zwei Stolpersteine an einer Stelle, beide am 24.08.2026 zugeschnappt:
   1. .folie und .bew sitzen auf demselben Element, .folie.ist-fokus .bew
      trifft deshalb nichts.
   2. .js-an setzt das Skript auf denselben Knoten, der .werkschau bzw.
      .bewschau traegt. Also .bewschau.js-an schreiben, nicht
      .js-an .bewschau, sonst greift die Regel nie. */
.bewschau.js-an .folie.ist-fokus {
  background: var(--paper);
  border-color: var(--line);
  border-top: 2px solid var(--brick); padding-top: calc(var(--s3) - 1px);
  box-shadow: 0 2px 4px rgba(19, 28, 38, .04), 0 16px 36px -14px rgba(19, 28, 38, .18);
}
.bew blockquote {
  margin: 0; padding: 0; border: 0; flex: 1 1 auto;
  font-size: 16px; line-height: 1.6; color: var(--text-mid);
}
.bew blockquote::before { content: "\201C"; }
.bew blockquote::after  { content: "\201D"; }
.bew figcaption {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px var(--s2);
  border-top: 1px solid var(--line); padding-top: var(--s2);
}
.bew figcaption b { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--ink); }
.bew figcaption span { font-size: 13.5px; color: var(--text-dim); }

@media (max-width: 700px) {
  .bewschau { --folie: 80vw; }
}
@media (prefers-reduced-motion: reduce) {
  .bew { transition: none; }
}

/* Kanaele */
.channels { border-top: 1px solid var(--line); padding-top: var(--s3); margin-top: var(--s5); }
.channels p.ch-title { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); margin-bottom: var(--s2); }
.channels ol { list-style: none; margin: 0; padding: 0; counter-reset: ch; column-count: 3; column-gap: var(--s5); }
.channels li {
  counter-increment: ch; font-size: 15px; color: var(--text-mid);
  padding: 7px 0 7px 30px; position: relative; break-inside: avoid;
}
.channels li::before {
  content: counter(ch, decimal-leading-zero); position: absolute; left: 0; top: 7px;
  font-family: var(--serif); font-size: 12px; color: var(--brick); font-variant-numeric: tabular-nums;
}

/* Die Kanal-Zeichnung steht neben der Liste, nicht darüber: nebeneinander
   erklären sich Bild und Aufzählung gegenseitig, gestapelt wären es zwei
   Blöcke, die dasselbe sagen. Unter 900 Pixeln steht sie oben. */
.ch-paar { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--s4) var(--s5); align-items: center; }
.ch-paar .sketch-breit { margin: 0; }
.ch-paar ol { column-count: 2; }
@media (max-width: 900px) {
  .ch-paar { grid-template-columns: 1fr; }
  .ch-paar ol { column-count: 1; }
}

/* Ortsliste mit Entfernung: die Zahl steht im Link, damit die Nähe sofort
   sichtbar ist, ohne eine zweite Spalte aufzumachen. */
.places-nah a { display: inline-flex; align-items: baseline; gap: 7px; }
.places-nah a span { font-size: 12.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.places-nah a:hover span { color: inherit; }
.ortsgruppe-zahl {
  font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--text-dim);
  margin-left: 8px; vertical-align: middle;
}

/* Region */
.region-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.region-grid h2 { font-size: clamp(30px, 3.9vw, 46px); margin-bottom: var(--s3); }
.region-grid p { color: var(--text-mid); }
.places { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s4); }
.places a {
  font-size: 14px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--text-mid); background: var(--paper-2); transition: all .25s var(--ease);
}
.places a:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-2px); }
.places a.is-home { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 500; }

/* Magazin */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.post { border-top: 2px solid var(--ink); padding-top: var(--s3); }
.post .tag { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brick); }
.post h3 { font-size: 20px; margin: 10px 0 10px; }
.post h3 a { background-image: linear-gradient(var(--brick), var(--brick)); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .35s var(--ease); }
.post:hover h3 a { background-size: 100% 1px; }
.post p { font-size: 15.5px; color: var(--text-mid); margin: 0; }

/* Ueber mich */
.about-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.about-grid h2 { font-size: clamp(30px, 3.9vw, 46px); margin-bottom: var(--s3); }
.about-grid p { color: var(--text-mid); }
.facts { list-style: none; margin: 0; padding: 0; }
.facts li { display: flex; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.facts b { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--brick); flex: none; min-width: 3.2em; line-height: 1.2; }
.facts span { color: var(--text-mid); }

/* FAQ */
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--s3) 40px var(--s3) 0; position: relative;
  font-family: var(--sans); font-size: 17.5px; font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 26px; color: var(--brick); font-weight: 300; line-height: 1; transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq .answer { padding: 0 0 var(--s3); color: var(--text-mid); font-size: 16px; max-width: 74ch; }

/* Abschluss-CTA */
.finish { background: var(--brick); color: #fff; }
.finish h2 { font-size: clamp(30px, 4.2vw, 52px); margin-bottom: var(--s3); }
.finish p { color: rgba(255,255,255,.9); font-size: 18px; max-width: 56ch; }
.finish .btn-primary { background: #fff; color: var(--brick); }
.finish .btn-primary:hover { background: var(--ink); color: #fff; }
.finish .btn-line { border-color: rgba(255,255,255,.45); color: #fff; }
.finish .btn-line:hover { background: #fff; color: var(--brick); border-color: #fff; }
.finish-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-top: var(--s5); }
.finish-row .btn { text-align: center; }
@media (max-width: 560px) { .finish-row { grid-template-columns: 1fr; } }

/* Fuss */
footer { background: var(--ink); color: rgba(246,243,236,.72); padding: var(--s7) 0 var(--s5); font-size: 15px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--s5); margin-bottom: var(--s6); }
footer h4 { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(246,243,236,.45); margin-bottom: var(--s3); }
footer ul { list-style: none; margin: 0; padding: 0; }
footer li { margin-bottom: 10px; }
footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.foot-brand { font-family: var(--serif); font-size: 22px; color: var(--paper); margin-bottom: var(--s2); }
.foot-brand span { color: var(--apricot); }
.foot-bottom { border-top: 1px solid var(--line-dark); padding-top: var(--s3); display: flex; flex-wrap: wrap; gap: var(--s3); font-size: 14px; color: rgba(246,243,236,.5); }
.foot-bottom nav { margin-left: auto; display: flex; gap: var(--s3); }
.foot-bottom .zeitreise { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.foot-bottom .zeitreise:hover { color: var(--paper); }

@media (max-width: 980px) {
  .about-grid, .region-grid { grid-template-columns: 1fr; }
  .steps, .posts { grid-template-columns: 1fr; gap: var(--s4); }
  .refs { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .channels ol { column-count: 2; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .werk li a { grid-template-columns: 1fr; }
  .werk span { text-align: left; }
  .mainnav { display: none; }
  .mobilnav { display: block; }
}
@media (max-width: 760px) {
  .svc { grid-template-columns: 1fr; gap: 8px; }
  .svc .arrow { display: none; }
  .group-head { flex-wrap: wrap; gap: 4px var(--s2); }
  .group-head span { margin-left: 0; }
}
@media (max-width: 680px) {
  body { font-size: 16.5px; }
  .topbar .wrap { min-height: 60px; gap: var(--s2); }
  .channels ol { column-count: 1; }
  .foot-grid { grid-template-columns: 1fr; gap: var(--s4); }
  .foot-bottom nav { margin-left: 0; flex-wrap: wrap; }
  .ref { flex-direction: column; gap: 4px; }
  .ref b { min-width: 0; }
  .btn { width: 100%; text-align: center; }
  .hero .lead { font-size: 16.5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise .9s var(--ease) both; }
  .rise-2 { animation-delay: .1s; }
  .rise-3 { animation-delay: .2s; }
  .rise-4 { animation-delay: .32s; }
  @keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

  .ortsmarke .dot::after { animation: puls 3.4s var(--ease) infinite; }
  @keyframes puls { 0% { transform: scale(.7); opacity: .9; } 70% { transform: scale(2.1); opacity: 0; } 100% { opacity: 0; } }
}

/* ---------- Kopfband für Unterseiten ---------- */
.kopfband { background: var(--ink); color: var(--paper); padding: clamp(48px, 6vw, 80px) 0 clamp(48px, 6vw, 72px); }
.kopfband h1 { font-size: clamp(34px, 4.6vw, 58px); letter-spacing: -.035em; margin-bottom: var(--s3); }
.kopfband h1 em { font-style: italic; font-weight: 400; color: var(--apricot); }
.kopfband .lead { font-size: clamp(17px, 1.35vw, 19.5px); color: rgba(246,243,236,.86); max-width: 62ch; }
.kopfband .eyebrow { color: var(--apricot); }
.kopfband .eyebrow::before { background: var(--apricot); }
.kopfband .eyebrow a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.kopfband .cta-row { margin-top: var(--s4); }

/* ---------- Gerätemuster: Desktop, Tablet, Smartphone ---------- */
.geraete { position: relative; aspect-ratio: 100 / 56; }
.geraete img {
  position: absolute; display: block; background: #fff; border-radius: 4px;
  border: 1px solid rgba(19,28,38,.14);
  box-shadow: 0 24px 44px -26px rgba(19,28,38,.55);
}
.dark .geraete img, .kopfband .geraete img { border-color: rgba(246,243,236,.16); box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.g-desktop { width: 78%; left: 0; top: 0; }
.g-tablet  { width: 25%; right: 8%; bottom: 0; }
.g-phone   { width: 13%; right: 0; bottom: 0; }
.geraete-gross { margin-bottom: clamp(48px, 6vw, 80px); }

/* ---------- Referenzübersicht ---------- */
.kacheln { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(56px, 6vw, 88px) clamp(32px, 4vw, 56px); }
/* Bild und Beschriftung sitzen in einem gemeinsamen Rahmen, damit klar ist,
   welcher Screenshot zu welchem Text gehoert */
.kachel {
  display: block; background: var(--paper-2); border: 1px solid var(--line); border-radius: 5px;
  overflow: hidden; transition: border-color .25s ease, transform .35s var(--ease), box-shadow .35s var(--ease);
}
.kachel:hover { border-color: var(--brick); transform: translateY(-3px); box-shadow: 0 22px 40px -28px rgba(19,28,38,.5); }
.kachel .geraete { margin: 0; padding: clamp(14px, 1.8vw, 22px) clamp(14px, 1.8vw, 22px) 0; }
.kachel .geraete img { box-shadow: 0 14px 26px -18px rgba(19,28,38,.5); }
.kachel-text { border-top: 1px solid var(--line); margin-top: clamp(14px, 1.8vw, 22px); padding: var(--s3); background: var(--paper); }
.kachel h3 { font-size: 22px; margin-bottom: 4px; }
.kachel:hover h3 { color: var(--brick); }
.kachel-meta { font-size: 15px; color: var(--text-mid); margin: 0 0 8px; }
.kachel-domain { font-size: 14.5px; color: var(--brick); font-weight: 600; margin: 0; }
.kachel:hover .kachel-domain span { padding-left: 4px; }

/* ---------- Referenz-Einzelseite ---------- */
.fall { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .7fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.fall-text h2 { font-size: clamp(26px, 3vw, 36px); margin-bottom: var(--s3); }
.fall-text p { font-size: 17.5px; color: var(--text-mid); max-width: 70ch; }
.fall-fakten { border-top: 2px solid var(--ink); padding-top: var(--s3); }
.fall-fakten h3 { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); margin-bottom: var(--s2); }
.fall-text p a { color: var(--brick); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(180,71,44,.4); text-underline-offset: 3px; transition: text-decoration-color .2s; }
.fall-text p a:hover { color: var(--brick-dk); text-decoration-color: currentColor; }
.fall-text h2 + p + h2 { margin-top: var(--s5); }
.aehnlich { list-style: none; margin: var(--s3) 0 var(--s5); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s3); }
.aehnlich a { display: block; padding: 16px 18px; background: var(--paper-2); border: 1px solid var(--line); }
.aehnlich a:hover { background: var(--brick-tint); }
.aehnlich b { display: block; font-weight: 600; }
.aehnlich span { font-size: 14px; color: var(--text-dim); }
.fall-fakten .fakten-liste { margin: 0 0 var(--s4); }
.fall-fakten .fakten-liste div { display: flex; justify-content: space-between; gap: var(--s3); border-bottom: 1px solid var(--line); padding: 11px 0; font-size: 16px; }
.fall-fakten .fakten-liste dt { color: var(--text-dim); }
.fall-fakten .fakten-liste dd { margin: 0; font-weight: 500; text-align: right; }
.fall-fakten ul { list-style: none; margin: 0; padding: 0; }
.fall-fakten li { border-bottom: 1px solid var(--line); padding: 11px 0; font-size: 16px; font-weight: 500; }
.fall-link { margin-top: var(--s3); font-size: 15px; }
.fall-link a { color: var(--brick); font-weight: 600; }
.fall-link a:hover { text-decoration: underline; text-underline-offset: 3px; }

.blaettern { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
.blatt { border-top: 2px solid var(--ink); padding-top: var(--s3); transition: border-color .25s ease; }
.blatt:hover { border-color: var(--brick); }
.blatt span { display: block; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px; }
.blatt b { font-family: var(--serif); font-size: 22px; font-weight: 600; }
.blatt:hover b { color: var(--brick); }
.blatt-zurueck { text-align: right; }
.blaettern-alle { margin-top: var(--s6); }

@media (max-width: 900px) {
  .fall { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .kacheln { grid-template-columns: 1fr; }
  .blaettern { grid-template-columns: 1fr; gap: var(--s3); }
  .blatt-zurueck { text-align: left; }
}

/* ---------- Leistungsseiten: Lesetext mit Faktenspalte ---------- */
.text-spalten { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .78fr); gap: clamp(32px, 4.5vw, 64px); align-items: start; }
.text-haupt > h2 { font-size: clamp(25px, 2.8vw, 34px); margin: clamp(36px, 4vw, 56px) 0 var(--s3); }
.text-haupt > h2:first-child { margin-top: 0; }
.text-haupt > p { font-size: 17.5px; color: var(--text-mid); max-width: 68ch; }
.text-haupt > p strong { color: var(--text); font-weight: 600; }

.text-neben { position: relative; }
.fakten-karte { background: var(--paper-2); border: 1px solid var(--line); border-radius: 4px; padding: var(--s4) var(--s3) var(--s3); }
.fakten-karte h3 { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); margin-bottom: var(--s2); }
.fakten-karte .facts li { gap: var(--s2); }
.fakten-karte .facts li:last-child { border-bottom: 0; }
.fakten-karte .facts b { font-size: 21px; min-width: 4.4em; }
.fakten-karte .facts span { font-size: 14.5px; }
.fakten-karte .fall-link { margin-top: var(--s3); }
.fakten-karte .karte-skizze { display: block; margin: calc(-1 * var(--s2)) calc(-1 * var(--s1)) var(--s3); }
.fakten-karte .karte-skizze img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }

/* Sketchnote oben in der Faktenspalte der Leistungsseiten. Kein Rahmen und kein
   Kasten: die Zeichnung hat ihren eigenen Papierton und steht frei auf der Seite.
   Die Bildunterschrift traegt die Aussage, im Bild selbst steht kein Wort. */
.sketch { margin: 0 0 var(--s3); }
/* Kein mix-blend-mode: Die Pipeline zieht den Papierton der Zeichnung exakt auf
   #f6f3ec, denselben Wert wie der Seitengrund. Multiply wuerde hier nichts
   freistellen, sondern das Bild abdunkeln (f6f3ec mal f6f3ec). */
.sketch img { width: 100%; height: auto; }
.sketch figcaption {
  margin-top: var(--s1); font-size: 14px; line-height: 1.5; color: var(--text-mid);
}
@media (max-width: 900px) {
  /* Einspaltig steht die Zeichnung ueber der Faktenkarte und darf nicht die
     halbe Bildschirmhoehe fuellen. */
  .sketch { max-width: 420px; margin-inline: auto; }
}

.stand { margin-top: var(--s5); font-size: 13.5px; color: var(--text-dim); }

@media (max-width: 900px) {
  .text-spalten { grid-template-columns: 1fr; }
}

/* ---------- Artikeltext ---------- */
.byline { font-size: 14px; color: rgba(246,243,236,.6); margin-top: var(--s4); letter-spacing: .03em; }
.artikel-text h2 { font-size: clamp(24px, 2.7vw, 33px); margin: clamp(36px, 4vw, 54px) 0 var(--s3); }
.artikel-text h3 { font-size: clamp(20px, 2.1vw, 25px); margin: var(--s5) 0 var(--s2); }
.artikel-text h4 { font-family: var(--sans); font-size: 18px; font-weight: 600; margin: var(--s4) 0 var(--s2); }
.artikel-text p { font-size: 17.5px; color: var(--text-mid); max-width: 68ch; }
.artikel-text a { color: var(--brick); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.artikel-text a:hover { color: var(--brick-dk); }
.artikel-text strong, .artikel-text b { color: var(--text); font-weight: 600; }
.artikel-text ul, .artikel-text ol { max-width: 66ch; margin: 0 0 1.1em; padding-left: 1.3em; color: var(--text-mid); font-size: 17px; }
.artikel-text li { margin-bottom: 8px; }
.artikel-text li::marker { color: var(--brick); }
.artikel-text img {
  max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 4px;
  margin: var(--s4) 0; background: var(--paper-2);
}
.artikel-text figure { margin: var(--s4) 0; }
.artikel-text figcaption { font-size: 14px; color: var(--text-dim); margin-top: 8px; }
.artikel-text blockquote {
  margin: clamp(28px, 3.4vw, 44px) 0; padding: 2px 0 2px clamp(20px, 2.4vw, 30px);
  border-left: 3px solid var(--brick); max-width: 62ch;
}
.artikel-text blockquote p {
  font-family: var(--serif); font-size: clamp(19px, 1.8vw, 23px); line-height: 1.42;
  color: var(--text); margin-bottom: 10px;
}
.artikel-text blockquote cite {
  display: block; font-family: var(--sans); font-style: normal; font-size: 13px;
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--brick);
}
.artikel-text blockquote cite::before { content: "— "; }

.artikel-text pre {
  background: var(--ink); color: var(--paper); border-radius: 4px;
  padding: var(--s3); margin: var(--s4) 0; overflow-x: auto;
  font-size: 14.5px; line-height: 1.6; max-width: 100%;
}
.artikel-text pre code { background: none; color: inherit; padding: 0; font-size: inherit; }
.artikel-text code {
  background: var(--brick-tint); color: var(--text); padding: 2px 6px; border-radius: 3px;
  font-size: .92em; word-break: break-word;
}
.artikel-text abbr { text-decoration: none; border-bottom: 1px dotted var(--text-dim); cursor: help; }
.artikel-text table { width: 100%; border-collapse: collapse; margin: var(--s4) 0; font-size: 16px; }
.artikel-text th, .artikel-text td { text-align: left; padding: 10px var(--s2) 10px 0; border-bottom: 1px solid var(--line); }
.artikel-text th { font-weight: 600; color: var(--text); }
.karte-text { font-size: 15px; color: var(--text-mid); }
.karte-text a { color: var(--brick); font-weight: 600; }

/* ---------- Kontaktformular ---------- */
.anfrage-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .78fr); gap: clamp(32px, 4.5vw, 64px); align-items: start; }

.formular { max-width: 62ch; }
.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s3); }
.feld { display: flex; flex-direction: column; gap: 7px; margin: 0 0 var(--s3); }
.feld label { font-size: 15px; font-weight: 600; color: var(--text); display: flex; align-items: baseline; gap: 8px; }
.feld label span[aria-hidden] { color: var(--brick); }
.feld-opt { font-size: 13px; font-weight: 400; color: var(--text-dim); }
.feld input, .feld select, .feld textarea {
  font: inherit; font-size: 16.5px; color: var(--text); background: var(--paper-2);
  border: 1px solid var(--line); border-radius: 3px; padding: 12px 14px; width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.feld textarea { resize: vertical; min-height: 150px; line-height: 1.55; }
.feld select { appearance: none; padding-right: 42px;
  background-image: linear-gradient(45deg, transparent 50%, var(--brick) 50%), linear-gradient(135deg, var(--brick) 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none; border-color: var(--brick); box-shadow: 0 0 0 3px var(--brick-tint);
}
.feld-hilfe { font-size: 14px; color: var(--text-dim); }
.feld-fehler { font-size: 14px; font-weight: 600; color: var(--brick-dk); }
.feld-falsch input, .feld-falsch select, .feld-falsch textarea { border-color: var(--brick); background: #fdf6f3; }

.feld-check { display: grid; grid-template-columns: 22px 1fr; gap: 8px var(--s2); align-items: start; margin-top: var(--s4); }
.feld-check input { width: 22px; height: 22px; accent-color: var(--brick); margin-top: 2px; padding: 0; }
.feld-check label { font-size: 15px; font-weight: 400; color: var(--text-mid); display: block; line-height: 1.5; }
.feld-check label a { color: var(--brick); text-decoration: underline; text-underline-offset: 3px; }
.feld-check .feld-fehler { grid-column: 2; }

.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s4); }
.formular-fuss .feld-hilfe { max-width: 34ch; }

.meldung { border-left: 3px solid var(--brick); background: var(--paper-2); padding: var(--s3) var(--s3) var(--s2); margin-bottom: var(--s4); }
.meldung h2 { font-size: clamp(26px, 3vw, 34px); margin-bottom: var(--s2); }
.meldung p { color: var(--text-mid); font-size: 17px; margin-bottom: .6em; }
.meldung a { color: var(--brick); font-weight: 600; }
.meldung-ok { border-left-color: #3d7a4e; }
.meldung-fehler strong { color: var(--brick-dk); }

@media (max-width: 900px) {
  .anfrage-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .feld-paar { grid-template-columns: 1fr; }
  .formular-fuss .btn { width: 100%; }
}

/* ---------- Ortsseiten: Sprungmarken ---------- */
.sprungmarken .ch-title { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); margin-bottom: var(--s2); }
.sprungmarken ol { list-style: none; margin: 0; padding: 0; counter-reset: sm; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px var(--s4); }
.sprungmarken li { counter-increment: sm; border-top: 1px solid var(--line); padding-top: 10px; }
.sprungmarken li a { display: flex; gap: 10px; font-size: 15.5px; color: var(--text-mid); align-items: baseline; transition: color .2s ease; }
.sprungmarken li a::before { content: counter(sm, decimal-leading-zero); font-size: 12px; font-weight: 600; color: var(--brick); flex: none; }
.sprungmarken li a:hover { color: var(--ink); }
.sprungmarken li:hover { border-top-color: var(--brick); }
.text-haupt > h2[id] { scroll-margin-top: 88px; }

@media (max-width: 980px) { .sprungmarken ol { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sprungmarken ol { grid-template-columns: 1fr; } }

/* ---------- Hinweis auf das jeweils andere Formular ---------- */
.wechsel {
  border-left: 3px solid var(--apricot); background: var(--paper-2);
  padding: var(--s2) var(--s3); margin: 0 0 var(--s4);
  font-size: 15.5px; color: var(--text-mid); max-width: 66ch;
}
.wechsel a { color: var(--brick); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.wechsel a:hover { color: var(--brick-dk); }

/* ---------- Anfrage-Assistent ---------- */
.assi { max-width: 70ch; }
.assi-schritt, .assi-kontakt { border: 0; margin: 0; padding: 0; min-width: 0; }
.assi-schritt[hidden] { display: none; }
.assi-schritt + .assi-schritt { margin-top: var(--s5); }
.assi-js .assi-schritt + .assi-schritt { margin-top: 0; }
.assi-js .assi-schritt { padding-bottom: var(--s1); }
.assi-legende {
  display: block; padding: 0; float: none; width: 100%;
  font-family: var(--serif); font-size: clamp(23px, 2.6vw, 30px); font-weight: 600;
  letter-spacing: -.02em; line-height: 1.16; margin-bottom: 10px; color: var(--text);
}
.assi-hilfe { font-size: 15px; color: var(--text-mid); margin: 0 0 var(--s3); max-width: 60ch; }
.assi-schritt > .feld-fehler, .assi-fehler { display: block; margin-top: var(--s2); }

/* Fortschritt */
.assi-kopf { margin-bottom: var(--s4); }
.assi-kopf[hidden] { display: none; }
.assi-status {
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-dim); margin: 0 0 10px;
}
.assi-fort { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; counter-reset: af; }
.assi-fort li {
  counter-increment: af; flex: 1 1 0; min-width: 0; border-top: 3px solid var(--line);
  padding-top: 8px; font-size: 12.5px; line-height: 1.3; color: var(--text-dim);
}
.assi-fort li::before { content: counter(af) ". "; font-variant-numeric: tabular-nums; }
.assi-fort li.ist-fertig { border-top-color: var(--apricot); color: var(--text-mid); }
.assi-fort li[aria-current="step"] { border-top-color: var(--brick); color: var(--brick); font-weight: 600; }

/* Auswahlkacheln */
.wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 12px; }
.wahl-feld { position: relative; display: block; }
.wahl-feld input { position: absolute; left: 14px; top: 50%; width: 1px; height: 1px; opacity: 0; margin: 0; }
.wahl-feld label {
  display: block; position: relative; cursor: pointer; height: 100%;
  padding: 16px 18px 16px 48px; background: var(--paper-2);
  border: 1px solid var(--line); border-radius: 4px;
  font-size: 16.5px; font-weight: 500; line-height: 1.35; color: var(--text);
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.wahl-feld label::before {
  content: ""; position: absolute; left: 17px; top: 50%; margin-top: -9px;
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); background: #fff;
}
.wahl-feld label::after {
  content: ""; position: absolute; left: 23px; top: 50%; margin-top: -3px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--brick);
  opacity: 0; transform: scale(.3); transition: opacity .2s ease, transform .25s var(--ease);
}
.wahl-feld label:hover { background: var(--paper); border-color: var(--ink); }
.wahl-feld input:checked + label {
  border-color: var(--brick); background: var(--brick-tint);
  font-weight: 600; box-shadow: inset 3px 0 0 var(--brick);
}
.wahl-feld input:checked + label::before { border-color: var(--brick); }
.wahl-feld input:checked + label::after { opacity: 1; transform: none; }
.wahl-feld input:focus-visible + label { outline: 3px solid var(--brick); outline-offset: 3px; }
.assi-falsch .wahl-feld label { border-color: var(--brick); }

/* Weiter und Zurück */
.assi-nav {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--line);
}
.assi-nav[hidden] { display: none; }
.assi-nav .btn { width: auto; flex: 0 0 auto; text-align: center; }
.assi-nav .btn[hidden] { display: none; }
.assi-nav [data-weiter] { margin-left: auto; }

/* Einschätzung */
.ein { border-top: 2px solid var(--ink); margin-bottom: var(--s5); }
.ein[hidden] { display: none; }
.ein-kopf {
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-dim); margin: var(--s3) 0 var(--s2);
}
.ein-block { border-bottom: 1px solid var(--line); padding: 6px 0 var(--s3); }
.ein-block h3 { font-family: var(--sans); font-size: 17px; font-weight: 600; letter-spacing: 0; margin-bottom: 8px; }
.ein-block h3::before {
  content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 11px;
  background: var(--brick); vertical-align: middle;
}
.ein-block p { font-size: 16.5px; color: var(--text-mid); margin: 0; max-width: 68ch; }
.ein-fuss { font-size: 14px; color: var(--text-dim); margin: var(--s3) 0 0; max-width: 68ch; }

@media (max-width: 620px) {
  .assi-fort li span { position: absolute; left: -9999px; }
  .assi-fort li { text-align: center; font-size: 13px; }
  .assi-fort li::before { content: counter(af); }
  .wahl { grid-template-columns: 1fr; }
  .assi-nav .btn { flex: 1 1 100%; }
  .assi-nav [data-weiter] { margin-left: 0; }
}

/* ---------- Ortsseiten: eigenes Stadtfoto ---------- */
.ortsbild-band { padding: clamp(28px, 3.5vw, 48px) 0 0; }
.ortsbild { margin: 0; }
.ortsbild img {
  width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: 4px;
  background: var(--paper-2);
}
.ortsbild figcaption { margin-top: 10px; font-size: 14px; color: var(--text-dim); }

/* ---------- Portrait ---------- */
.portrait { margin: 0 0 var(--s4); }
.portrait img {
  width: clamp(160px, 20vw, 260px); height: auto; aspect-ratio: 1; object-fit: cover;
  border-radius: 50%; border: 1px solid var(--line); background: var(--paper-2);
}
.portrait figcaption { margin-top: 12px; font-size: 14px; color: var(--text-dim); }
.portrait-gross img { width: clamp(180px, 24vw, 300px); }

/* ---------- CTA-Reihe: beide Knöpfe füllen zusammen die Breite ---------- */
.cta-row { flex-wrap: nowrap; }
.cta-row .btn {
  flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: space-between;
  gap: var(--s3); padding: 18px 24px; font-size: 17px;
  position: relative; overflow: hidden; isolation: isolate;
  --wisch: var(--ink);
}
/* Der Pfeil sitzt rechts und wandert beim Überfahren mit */
.cta-row .btn::before {
  content: "\2192"; order: 1; font-size: 20px; line-height: 1; flex: none;
  transition: transform .35s var(--ease);
}
.cta-row .btn:hover::before, .cta-row .btn:focus-visible::before { transform: translateX(6px); }

/* Beim Überfahren schiebt sich ein schräger Block herein. Die schräge Kante
   ist der Unterschied zur geraden Linie, die wie ein Scanner aussieht. */
.cta-row .btn::after {
  content: ""; position: absolute; z-index: -1; inset: -2px -14px; background: var(--wisch);
  transform: translateX(-112%) skewX(-14deg);
  transition: transform .5s var(--ease);
}
.cta-row .btn:hover::after, .cta-row .btn:focus-visible::after { transform: translateX(0) skewX(-14deg); }
.cta-row .btn:hover, .cta-row .btn:focus-visible { transform: translateY(-3px); }
.cta-row .btn:active { transform: translateY(-1px) scale(.995); }

/* Ruhezustand deutlicher: der Hauptknopf bekommt Tiefe, der zweite etwas Fläche */
.cta-row .btn-primary { box-shadow: 0 14px 30px -18px rgba(147, 54, 31, .95); }
.cta-row .btn-primary:hover { background: var(--brick); color: #fff; box-shadow: 0 18px 34px -18px rgba(19, 28, 38, .8); }
.cta-row .btn-line { background: rgba(19, 28, 38, .04); }
.cta-row .btn-line:hover { background: rgba(19, 28, 38, .04); color: var(--paper); border-color: var(--ink); }
.hero .cta-row .btn-line, .kopfband .cta-row .btn-line, .dark .cta-row .btn-line {
  background: rgba(246, 243, 236, .07); border-color: rgba(246, 243, 236, .45); --wisch: var(--paper);
}
.hero .cta-row .btn-line:hover, .kopfband .cta-row .btn-line:hover, .dark .cta-row .btn-line:hover {
  background: rgba(246, 243, 236, .07); color: var(--ink); border-color: var(--paper);
}

/* Hauptknopf im Stil der Klappmenüs (Daniel, 20.10.2026, Variante 10 aus
   _design/cta-varianten.html): Papierkarte mit feiner Ziegel-Inset-Linie und das
   gekippte Medaillon halb über dem linken Rand. Das Medaillon ist das ::before,
   das beim Pfeil-Knopf den Pfeil trägt; der Brief steckt als Hintergrundbild darin.
   Der Wisch (::after) und overflow: hidden entfallen, sonst würde das Medaillon
   abgeschnitten. Der Knopf rückt um die Medaillonbreite nach rechts, damit dessen
   Kante bündig mit dem Text darüber steht. */
.cta-row .btn.btn-primary {
  overflow: visible; justify-content: flex-start; margin-left: 22px; padding: 18px 28px 18px 38px;
  background: var(--paper-2); color: var(--text); border: 1px solid var(--line); border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(180,71,44,.20), 0 24px 44px -30px rgba(19,28,38,.65);
}
.cta-row .btn.btn-primary::after { display: none; }
.cta-row .btn.btn-primary::before {
  content: ""; position: absolute; left: -22px; top: 50%; margin-top: -20px; width: 40px; height: 40px;
  border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8a289' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='1.5'/%3E%3Cpath d='m3.5 6.5 8.5 6.5 8.5-6.5'/%3E%3C/svg%3E") center / 23px no-repeat;
  box-shadow: 0 0 0 3px var(--paper-2), 0 0 0 4px rgba(180,71,44,.45), 0 10px 20px -10px rgba(19,28,38,.6);
  transform: rotate(-9deg); transition: transform .5s var(--ease);
}
.cta-row .btn.btn-primary:hover, .cta-row .btn.btn-primary:focus-visible {
  background: var(--brick-tint); color: var(--brick-dk); transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px rgba(180,71,44,.20), 0 24px 44px -30px rgba(19,28,38,.65);
}
.cta-row .btn.btn-primary:hover::before, .cta-row .btn.btn-primary:focus-visible::before { transform: rotate(0) scale(1.08); }
/* Auf Tinte: Karte in Ink-2, Medaillon in Ziegel mit hellem Brief */
.hero .cta-row .btn.btn-primary, .kopfband .cta-row .btn.btn-primary, .dark .cta-row .btn.btn-primary {
  background: var(--ink-2); color: var(--paper); border-color: rgba(246,243,236,.14);
  box-shadow: inset 0 0 0 1px rgba(232,162,137,.28);
}
.hero .cta-row .btn.btn-primary::before, .kopfband .cta-row .btn.btn-primary::before, .dark .cta-row .btn.btn-primary::before {
  background-color: var(--brick);
  box-shadow: 0 0 0 3px var(--ink-2), 0 0 0 4px rgba(232,162,137,.5), 0 10px 20px -10px rgba(0,0,0,.6);
}
.hero .cta-row .btn.btn-primary:hover, .kopfband .cta-row .btn.btn-primary:hover, .dark .cta-row .btn.btn-primary:hover,
.hero .cta-row .btn.btn-primary:focus-visible, .kopfband .cta-row .btn.btn-primary:focus-visible, .dark .cta-row .btn.btn-primary:focus-visible {
  background: var(--ink-3); color: var(--apricot);
  box-shadow: inset 0 0 0 1px rgba(232,162,137,.28);
}

@media (max-width: 680px) {
  .cta-row { flex-wrap: wrap; }
  .cta-row .btn { flex: 1 1 100%; }
  .cta-row .btn.btn-primary { flex-basis: calc(100% - 22px); }
}

/* ---------- Hero: Portrait oben, Werkverzeichnis unten ---------- */
.hero-grid { align-items: stretch; }
/* Oben ausgerichtet, nicht mehr space-between: Seit das Register nur noch vier
   Zeilen hat (13.09.2026), riss der Ausgleich eine Lücke zwischen Portrait und
   Register. Die rechte Spalte darf kürzer enden als die linke. */
.hero-neben { display: flex; flex-direction: column; justify-content: flex-start; gap: var(--s5); }
.hero-portrait { margin: 0; display: flex; align-items: center; gap: var(--s3); }
.hero-portrait img {
  width: clamp(112px, 12vw, 168px); height: auto; aspect-ratio: 1; object-fit: cover;
  border-radius: 50%; border: 1px solid rgba(246, 243, 236, .22); flex: none;
}
.hero-portrait figcaption { display: flex; flex-direction: column; gap: 3px; }
.hero-portrait b { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--paper); }
.hero-portrait span { font-size: 14px; color: rgba(246, 243, 236, .6); }
.hero-portrait a { font-size: 14px; color: var(--apricot); margin-top: 4px; }
.hero-portrait a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .hero-neben { gap: var(--s4); }
  .hero-portrait { order: -1; }
}

/* ---------- Blöcke, die beim Scrollen hereinkommen ---------- */
/* Der Startzustand greift nur, wenn animation.js die Klasse gesetzt hat.
   Ohne JavaScript steht alles sofort da. */
.anim [data-anim] {
  opacity: 0;
  transition: opacity .65s var(--ease), transform .8s var(--ease);
  transition-delay: var(--verzug, 0ms);
  will-change: opacity, transform;
}
.anim [data-anim="hoch"]  { transform: translateY(26px); }
.anim [data-anim="links"] { transform: translateX(-32px); }
.anim [data-anim="rechts"]{ transform: translateX(32px); }
.anim [data-anim].sichtbar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .anim [data-anim] { opacity: 1; transform: none; transition: none; }
}

/* ---------- Ortsseiten: Karte, eigener Absatz, Umgebung ---------- */
.ortsband { padding: clamp(28px, 3.5vw, 48px) 0 0; }
.ortsband-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s5); align-items: center;
}
.ortsband-eins { grid-template-columns: minmax(0, 640px); }
.ortsband-text { font-size: 18px; color: var(--text); }
.ortsband-text p { margin-bottom: 0; }

.ortskarte { margin: 0; }
.ortskarte-bild {
  position: relative; border: 1px solid var(--line); border-radius: 4px;
  background: var(--paper-2); overflow: hidden;
}
.ortskarte-bild img { width: 100%; height: auto; display: block; }
.ortskarte figcaption { margin-top: 10px; font-size: 14px; color: var(--text-dim); }
.ortskarte figcaption a { color: var(--text-mid); text-decoration: underline; text-underline-offset: 3px; }
.ortskarte figcaption a:hover { color: var(--brick); }

.karte-ort { font-size: 14.5px; color: var(--text-mid); margin: -6px 0 var(--s2); }

.umgebung-liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--s4);
}
.umgebung-liste li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2);
  border-bottom: 1px solid var(--line); padding: 12px 0; font-size: 16.5px;
}
.umgebung-liste b { font-weight: 500; color: var(--text-mid); }
.umgebung-liste a {
  font-weight: 600; border-bottom: 1px solid var(--line); transition: color .2s ease, border-color .2s ease;
}
.umgebung-liste a:hover { color: var(--brick); border-color: var(--brick); }
.umgebung-liste span {
  font-size: 14px; color: var(--text-dim); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.umgebung-fuss { margin-top: var(--s3); font-size: 14px; color: var(--text-dim); }
.umgebung-fuss a { text-decoration: underline; text-underline-offset: 3px; }
.umgebung-fuss a:hover { color: var(--brick); }

@media (max-width: 980px) {
  .umgebung-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ortsband-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
}
@media (max-width: 560px) {
  .umgebung-liste { grid-template-columns: minmax(0, 1fr); }
}

/* Karte im Fliesstext: Orte mit eigenem Foto bekommen sie erst hier unten.
   Die Regeln fuer .artikel-text img und b greifen dort sonst mit und geben der
   Karte sonst einen zweiten Rahmen. */
.artikel-text .ortskarte { margin: var(--s4) 0 var(--s3); max-width: 560px; }
.artikel-text .ortskarte-bild img { border: 0; border-radius: 0; margin: 0; }
.ortsband-text p { color: var(--text); font-size: 18px; max-width: none; }
.fakten-karte .facts span a { color: var(--brick); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.fakten-karte .facts span a:hover { color: var(--brick-dk); }

/* „hier sitze ich" ist kein Link, sieht aber aus wie einer der Ortsknöpfe */
.places span.is-home { display: inline-block; font-size: 14px; padding: 8px 16px; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 500; }

/* Ortsliste auf /webdesign/, nach Bundesland gruppiert */
.ortsgruppe { margin-bottom: var(--s5); }
.ortsgruppe:last-child { margin-bottom: 0; }
.ortsgruppe h3 { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); margin-bottom: var(--s2); }
.ortsgruppe .places { margin-top: 0; }

/* Leiste am unteren Rand des Stadtfotos, wie bei den alten Vorlagen,
   aber als HTML: echte Hausschrift, passt sich der Breite an. */
.ortsbild-bild { position: relative; line-height: 0; }
.bild-leiste {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  min-height: clamp(46px, 4.6vw, 60px);
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px clamp(10px, 1.4vw, 16px);
  padding: clamp(9px, 1vw, 14px) clamp(14px, 2vw, 26px);
  background: var(--brick); color: var(--paper-2); line-height: 1.2;
  border-radius: 0 0 3px 3px;
}
.bild-leiste i {
  font-style: normal; font-size: clamp(10.5px, 1vw, 12px); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 253, 249, .8);
}
.bild-leiste b {
  font-family: var(--serif); font-weight: 600; letter-spacing: -.02em;
  font-size: clamp(19px, 2.2vw, 26px);
}

/* Lesespalte als weiße Karte, damit der Text ruhiger steht */
.text-haupt.artikel-text {
  --kartenluft: clamp(22px, 3.2vw, 46px);
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 4px;
  padding: var(--kartenluft);
}
.text-haupt.artikel-text > h2:first-child,
.text-haupt.artikel-text > p:first-child { margin-top: 0; }
@media (max-width: 560px) {
  .text-haupt.artikel-text { border-left: 0; border-right: 0; border-radius: 0;
    margin-left: calc(-1 * var(--s3)); margin-right: calc(-1 * var(--s3));
    padding-left: var(--s3); padding-right: var(--s3); }
}

/* ---------- Turmzeichen: Kopf, Fuß, Aufzählung ---------- */
/* gap wuerde auch zwischen 'Weihmann' und dem Punkt greifen, deshalb Abstand am Zeichen */
/* Der Turm steht links neben zwei Textzeilen und ist mittig dazu, siehe .marke-text unten.
   Bis 25.08.2026 stand er einzeilig auf der Schriftgrundlinie. */
.brand { display: inline-flex; align-items: center; }
.brand-turm {
  height: 24px; width: auto; margin-right: 10px; flex: none;
  color: var(--apricot); transition: color .25s ease;
}
.brand:hover .brand-turm { color: var(--brick); }

/* Turm links über die Höhe beider Zeilen (Wortmarke und Stichworte), die Schrift
   daneben. Der Turm ist so hoch wie der Textblock: 21px Schrift mit Zeilenhöhe
   1,1 plus 3px Abstand plus die 12px-Zeile. */
.brand { align-items: center; }
.brand-turm { height: 42px; margin-right: 12px; }
.marke-text { display: flex; flex-direction: column; gap: 3px; }
.marke-wort { line-height: 1.1; }
.marke-zeile {
  font-family: var(--sans); font-size: 12px; font-weight: 400; line-height: 1.2;
  letter-spacing: .04em; color: rgba(246,243,236,.62); white-space: nowrap;
}

footer { position: relative; overflow: hidden; }
.fuss-turm {
  position: absolute; right: -7%; bottom: -16%; height: 124%; width: auto;
  color: rgba(246, 243, 236, .05); pointer-events: none;
}
footer .wrap { position: relative; z-index: 1; }

/* Der Turm sitzt als Zeichen auf der Faktenkarte, nicht als Aufzählungspunkt.
   Als Maske, damit die Farbe aus den Variablen kommt und kein zweites Bild nötig ist. */
.fakten-karte { position: relative; }
.fakten-karte::before {
  content: ""; position: absolute; right: clamp(16px, 2vw, 22px); top: clamp(14px, 1.8vw, 20px);
  width: 34px; height: 47px; background: var(--brick); opacity: .9;
  -webkit-mask: url('/assets/favicon.svg') no-repeat center / contain;
          mask: url('/assets/favicon.svg') no-repeat center / contain;
}
.fakten-karte h3 { padding-right: 46px; }

/* ---------- Werkstattbuch: Initiale und Kapitelzahlen ---------- */
/* Initiale nur im Lesetext, nicht in Impressum und Datenschutz: dort waere
   die erste Zeile die Anschrift. */
article.artikel-text > p:first-of-type::first-letter,
/* Kapitelnummern als Ziegelkasten, der zur Haelfte aus der Lesekarte ragt.
   Der Versatz greift die Kartenluft als Variable ab, sonst muesste der Wert
   des clamp() hier doppelt stehen und beim naechsten Anfassen auseinanderlaufen.
   left: -Kartenluft setzt die linke Kante des Kastens auf den Kartenrand,
   translateX(-50%) schiebt ihn um seine halbe Breite darueber hinaus. */
.kapitel { counter-reset: kap; }
.kapitel > h2 { counter-increment: kap; position: relative; }
.kapitel > h2::before {
  content: counter(kap, decimal-leading-zero);
  position: absolute; left: calc(var(--kartenluft) * -1); top: .04em;
  transform: translateX(-50%);
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 3px;
  background: var(--brick); color: var(--paper);
  font-family: var(--serif); font-size: 16px; font-weight: 600; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; line-height: 1;
}
/* Unter 700 Pixel laeuft die Karte bis an den Bildschirmrand, ein
   herausragender Kasten waere dort abgeschnitten. */
@media (max-width: 700px) {
  .kapitel > h2::before {
    position: static; transform: none; margin-bottom: var(--s2);
    width: 40px; height: 40px; font-size: 15px;
  }
}

/* ---------- Ortsfoto und Karte als Paar ----------
   Die Spaltenbreiten sind gerechnet, nicht geschaetzt: Im 1180er-Satz mit
   32 Pixeln Abstand ergibt 1,551fr zu 1fr ein Foto von 698x466 (3:2) neben
   einer Karte von 450x466 (560/580). Die Unterkanten der Bilder liegen damit
   auf einer Linie.
   Unter 900 Pixeln faellt die Karte aus dem Paar heraus und wird unten im
   Abschnitt Zusammenarbeit gezeigt, wo sie ohnehin steht. Gestapelt waeren es
   fast 800 Pixel Bild, bevor der erste Satz kommt. */
.ortspaar-band { padding: clamp(28px, 4vw, 52px) 0 0; }
.ortspaar { display: grid; grid-template-columns: 1.551fr 1fr; gap: var(--s4); align-items: start; }
.ortspaar-eins { grid-template-columns: 1fr; }
.ortspaar .ortsfoto, .ortspaar .ortskarte { margin: 0; }
.ortsfoto-bild { position: relative; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; line-height: 0; }
.ortsfoto-bild img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.ortsfoto .bild-leiste {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px var(--s2);
  background: var(--brick); color: var(--paper); margin: 0;
  padding: 10px clamp(12px, 1.6vw, 18px); line-height: 1.3;
}
.ortsfoto .bild-leiste i { font-style: normal; font-size: 11.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; opacity: .78; }
.ortsfoto .bild-leiste b { font-family: var(--serif); font-size: 19px; font-weight: 600; }
.ortsfoto figcaption { font-size: 14px; color: var(--text-dim); margin-top: 10px; }

/* ---------- Lupe und Lightbox ----------
   Das Foto ist ein Link auf seine grosse Fassung. Ohne JavaScript oeffnet er
   das Bild ganz normal, das ist gewollt: So hat die grosse Fassung eine
   eigene Adresse, der Bildersuchen folgen koennen. */
.ortsfoto-bild { display: block; cursor: zoom-in; }
.lupe-zeichen {
  position: absolute; right: 12px; top: 12px; width: 38px; height: 38px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(19, 28, 38, .55); color: var(--paper);
  opacity: 0; transform: scale(.9);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.lupe-zeichen svg { width: 19px; height: 19px; }
.ortsfoto-bild:hover .lupe-zeichen,
.ortsfoto-bild:focus-visible .lupe-zeichen { opacity: 1; transform: none; }
.ortsfoto-bild:focus-visible { outline: 2px solid var(--brick); outline-offset: 3px; }

.lupe-schicht {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; gap: var(--s2);
  grid-template-rows: 1fr auto;
  background: rgba(19, 28, 38, .93);
  padding: clamp(16px, 4vw, 48px); cursor: zoom-out;
}
.lupe-schicht[hidden] { display: none; }
.lupe-bild {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  border-radius: 3px; cursor: default; align-self: center;
}
.lupe-text { margin: 0; color: rgba(246, 243, 236, .72); font-size: 14.5px; text-align: center; }
.lupe-zu {
  position: fixed; right: clamp(12px, 3vw, 28px); top: clamp(12px, 3vw, 28px);
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(246, 243, 236, .3); background: transparent; color: var(--paper);
  display: grid; place-items: center;
  transition: background-color .2s ease, border-color .2s ease;
}
.lupe-zu:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.lupe-zu svg { width: 20px; height: 20px; }
.lupe-offen, .lupe-offen body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .lupe-zeichen { transition: none; } }

/* Unterkanten auf eine Linie. Die Karten sind je Ort verschieden hoch
   (Halberstadt 535, Aschersleben 580, Nienburg 607), ein festes Verhaeltnis
   fuer alle gibt es also nicht. Deshalb wird die Hoehe der Kartenflaeche aus
   der Fotohoehe zurueckgerechnet: Foto ist 1,551 mal so breit und 3:2, also
   Kartenflaeche = 1,551/1,5 = 1,034 mal so hoch wie breit.
   contain statt cover, damit nichts von der Karte abgeschnitten wird. Der
   schmale Rand faellt nicht auf, die Zeichnung steht ohnehin auf Papier. */
.ortspaar .ortskarte-bild { aspect-ratio: 1 / 1.034; }
.ortspaar .ortskarte-bild img { width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 900px) {
  .ortspaar { grid-template-columns: 1fr; }
  /* Die Karte steht unten weiter, hier waere sie nur Ballast vor dem Text. */
  .ortspaar .ortskarte { display: none; }
}
@media (min-width: 901px) {
  /* Ab hier sitzt die Karte oben im Paar, unten waere sie doppelt. */
  .text-haupt > .ortskarte { display: none; }
}

/* Stadtfoto über die volle Breite, Leiste und Bildunterschrift bleiben im Raster */
.ortsbild-band { padding: 0; }
.ortsbild-voll { margin: 0; }
.ortsbild-voll .ortsbild-bild { line-height: 0; }
.ortsbild-voll img {
  width: 100%; height: auto; max-height: min(62vh, 620px); object-fit: cover;
  border: 0; border-radius: 0;
}
.ortsbild-voll .bild-leiste { border-radius: 0; padding-left: 0; padding-right: 0; }
.ortsbild-voll .bild-leiste .wrap { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px clamp(10px, 1.4vw, 16px); width: 100%; }
.ortsbild-voll figcaption { padding-top: 12px; }

/* ---------- Bewegung: Zoom und Hereinschieben ---------- */
@media (prefers-reduced-motion: no-preference) {

  /* Stadtfoto: langsamer Zoom beim Laden. Als Animation und nicht an die
     Sichtbarkeitsklasse gebunden, weil das Bild ohnehin ganz oben steht. */
  .ortsbild-voll .ortsbild-bild { overflow: hidden; }
  .ortsbild-voll img { animation: fotozoom 14s var(--ease) both; }
  @keyframes fotozoom { from { transform: scale(1.07); } to { transform: scale(1); } }

  /* Die Ziegelleiste fährt von unten ein */
  .ortsbild-voll .bild-leiste { animation: leiste .75s var(--ease) .35s both; }
  @keyframes leiste { from { transform: translateY(100%); } to { transform: translateY(0); } }

  /* Referenzkacheln und Karten: Bild zoomt beim Überfahren */
  .kachel .geraete img { transition: transform .55s var(--ease), box-shadow .35s var(--ease); }
  .kachel:hover .g-desktop { transform: scale(1.045); }
  .kachel:hover .g-tablet  { transform: scale(1.06) translateY(-2px); }
  .kachel:hover .g-phone   { transform: scale(1.08) translateY(-3px); }

  .ortskarte-bild { overflow: hidden; border-radius: 4px; }
  .ortskarte-bild img { transition: transform .6s var(--ease); }
  .ortskarte:hover .ortskarte-bild img { transform: scale(1.05); }

  /* Zeilen der Faktenkarte kommen nacheinander */
  .anim .fakten-karte.sichtbar .facts li,
  .anim [data-anim].sichtbar .fakten-karte .facts li { animation: zeile .5s var(--ease) both; }
  .anim .fakten-karte .facts li:nth-child(2) { animation-delay: .07s; }
  .anim .fakten-karte .facts li:nth-child(3) { animation-delay: .14s; }
  .anim .fakten-karte .facts li:nth-child(4) { animation-delay: .21s; }
  .anim .fakten-karte .facts li:nth-child(5) { animation-delay: .28s; }
  @keyframes zeile { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

  /* Ortsknöpfe: Ziegelpunkt wächst beim Überfahren */
  .places a { position: relative; }
  .places a::before {
    content: ""; position: absolute; left: 8px; top: 50%; width: 6px; height: 6px; margin-top: -3px;
    border-radius: 50%; background: var(--brick); transform: scale(0); transition: transform .3s var(--ease);
  }
  .places a:hover { padding-left: 26px; }
  .places a:hover::before { transform: scale(1); }
  .places a { transition: all .3s var(--ease); }
}

/* Auf schmalen Bildschirmen von unten statt von der Seite: Die Lesekarte läuft
   dort bis an den Rand, seitliches Versetzen erzeugt sonst Querscrollen. */
@media (max-width: 900px) {
  .anim [data-anim="links"], .anim [data-anim="rechts"] { transform: translateY(24px); }
}

/* ---------- Musteransicht: Desktop und Handy als Paar ---------- */
/* Die dreiteilige .geraete-Ansicht ist für Referenzen gedacht. Bei nur zwei
   Geräten steht das Handy sonst verloren in der Ecke. Die Höhe bestimmt das
   Desktop-Bild, das Handy liegt darüber. Nichts wird abgeschnitten. */
.geraete-paar {
  position: relative; margin: clamp(28px, 3.6vw, 46px) 0 clamp(34px, 4vw, 52px);
  background: linear-gradient(160deg, var(--paper-2) 0%, #f1ebe0 100%);
  border: 1px solid var(--line); border-radius: 6px;
  padding: clamp(16px, 2.6vw, 36px);
  padding-right: clamp(70px, 15vw, 190px);
  /* Der Umbruch zwischen den beiden Bildern erzeugt sonst leere Zeilenkästen
     und damit einen zu hohen Rahmen. */
  line-height: 0; font-size: 0;
}
/* .artikel-text img gibt jedem Bild im Lesetext Rand und Rahmen. Im Paar
   stört beides und macht den Rahmen zu hoch. */
.geraete-paar img { display: block; background: #fff; margin: 0; }
.geraete-paar .g-desktop {
  width: 100%; height: auto;
  border: 1px solid rgba(19, 28, 38, .16); border-radius: 4px;
  box-shadow: 0 30px 50px -34px rgba(19, 28, 38, .8);
}
.geraete-paar .g-phone {
  position: absolute; right: clamp(14px, 2.4vw, 32px); bottom: clamp(20px, 3vw, 44px);
  width: clamp(96px, 19%, 240px); height: auto;
  border: 1px solid rgba(19, 28, 38, .22); border-radius: 14px;
  box-shadow: 0 24px 38px -18px rgba(19, 28, 38, .85);
}

@media (prefers-reduced-motion: no-preference) {
  .geraete-paar img { transition: transform .6s var(--ease); }
  .geraete-paar:hover .g-desktop { transform: translateY(-4px); }
  .geraete-paar:hover .g-phone { transform: translateY(-9px); }
}

@media (max-width: 600px) {
  .geraete-paar { padding: 12px; padding-bottom: 64px; }
  .geraete-paar .g-phone { width: 34%; right: 12px; bottom: -18px; }
}

/* Eingang zum Wischfeed auf /referenzen/, bewusst leise */
.feed-eingang { margin-top: var(--s2); font-size: 14px; }
.feed-eingang a { color: inherit; opacity: .7; text-decoration: underline dotted; text-underline-offset: 3px; }
.feed-eingang a:hover { opacity: 1; }

/* ---------- Bausteine der Ratgeber (ab 19.09.2026, siehe _seo/artikel-handbuch.md) ----------
   Kaesten: 1px Rahmen rundum, feine Innenlinie, Grund und Schatten, Label auf der
   Oberkante. Kein dicker Farbbalken links. */
.artikel-text .kasten {
  position: relative; max-width: 68ch; margin: calc(var(--s5) + 6px) 0 var(--s5);
  padding: calc(var(--s3) + 10px) var(--s4) var(--s3);
  background: var(--paper); border: 1px solid var(--line); border-radius: 5px;
  box-shadow: inset 0 0 0 3px var(--paper-2), inset 0 0 0 4px var(--line), 0 2px 10px rgba(19,28,38,.05);
}
.artikel-text .kasten .kasten-label {
  position: absolute; top: 0; left: var(--s3); transform: translateY(-50%);
  margin: 0; padding: 4px 12px; border-radius: 3px;
  font: 700 12px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  background: var(--ink); color: var(--paper);
}
.artikel-text .kasten p:last-child, .artikel-text .kasten ul:last-child { margin-bottom: 0; }
.artikel-text .kasten p { font-size: 17px; color: var(--text); }

.artikel-text .kasten-cta { background: var(--brick-tint); border-color: #e2c9bf; box-shadow: inset 0 0 0 3px var(--brick-tint), inset 0 0 0 4px #e8d3ca, 0 2px 10px rgba(19,28,38,.05); }
.artikel-text .kasten-cta .kasten-label { background: var(--brick); color: #fff; }
.artikel-text .kasten .kasten-label { font-size: 12px; }
.artikel-text .kasten-cta .cta-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-top: var(--s3); }
.artikel-text .kasten-cta .cta-reihe .btn { text-align: center; padding-left: var(--s2); padding-right: var(--s2); }
@media (max-width: 560px) { .artikel-text .kasten-cta .cta-reihe { grid-template-columns: 1fr; } }
.artikel-text .kasten-cta .btn { text-decoration: none; }
.artikel-text .kasten-cta .btn-primary { color: #fff; }
.artikel-text .kasten-cta .btn-line { color: var(--ink); border-color: var(--ink); }
.artikel-text .kasten-cta .btn-line:hover { color: var(--paper); }

/* Schaubilder: selbst gezeichnet, HTML oder SVG. Text steht im HTML, nicht im Bild. */
.artikel-text .schaubild { margin: var(--s5) 0; }
.artikel-text .schaubild svg { display: block; width: 100%; height: auto; max-width: 720px; }
.artikel-text .schaubild figcaption, .artikel-text .bildschirm figcaption { max-width: 68ch; }
.sb-tinte { fill: var(--ink); } .sb-ziegel { fill: var(--brick); } .sb-papier { fill: var(--paper-2); }
.sb-apricot { fill: var(--apricot); } .sb-linie { fill: none; stroke: var(--ink); stroke-width: 2; }
.sb-linie-z { fill: none; stroke: var(--brick); stroke-width: 2.5; } .sb-duenn { fill: none; stroke: var(--line); stroke-width: 1.5; }
.sb-text { font: 600 22px var(--sans); fill: var(--ink); } .sb-klein { font: 400 18px var(--sans); fill: var(--text-mid); }
.sb-hell { fill: var(--paper); }

/* Vergleich als Schaubild aus HTML: bleibt am Handy lesbar */
.artikel-text .vergleich { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s2); margin: 0; padding: 0; list-style: none; max-width: none; }
.artikel-text .vergleich > li { margin: 0; padding: var(--s3); background: var(--paper); border: 1px solid var(--line); border-radius: 5px; font-size: 15.5px; }
.artikel-text .vergleich h4 { margin: 0 0 var(--s2); font-family: var(--serif); font-size: 21px; }
.artikel-text .vergleich dl { margin: 0; }
.artikel-text .vergleich dt { font-weight: 600; color: var(--text); margin-top: 10px; font-size: 14px; }
.artikel-text .vergleich dd { margin: 2px 0 0; color: var(--text-mid); }
.artikel-text .vergleich .ja::before, .artikel-text .vergleich .nein::before, .artikel-text .vergleich .teils::before {
  display: inline-block; width: 1.3em; font-weight: 700; }
.artikel-text .vergleich .ja::before { content: "✓"; color: #2f6b3a; }
.artikel-text .vergleich .nein::before { content: "✕"; color: var(--brick); }
.artikel-text .vergleich .teils::before { content: "~"; color: #9a6b12; }

/* Screenshots: Rahmen wie ein Browserfenster, Quelle in der Bildunterschrift */
.artikel-text .bildschirm { margin: var(--s5) 0; }
.artikel-text .bildschirm .fenster { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--paper-2); box-shadow: 0 6px 24px rgba(19,28,38,.08); }
.artikel-text .bildschirm .fenster::before { content: ""; display: block; height: 22px; background: #ece7dd radial-gradient(circle at 14px 11px, #d3cbbd 4px, transparent 5px), radial-gradient(circle at 30px 11px, #d3cbbd 4px, transparent 5px); background-color: #ece7dd; border-bottom: 1px solid var(--line); }
.artikel-text .bildschirm img { display: block; width: 100%; margin: 0; border: 0; border-radius: 0; }

/* FAQ: jede Frage selbsttragend, dazu FAQPage-Schema aus artikel.php */
.artikel-text .faq h3 { font-family: var(--sans); font-size: 18.5px; font-weight: 600; margin: var(--s4) 0 var(--s1); }

/* Quellen am Ende */
.artikel-text .quellen { font-size: 15px; }
.artikel-text .quellen li { color: var(--text-mid); }

/* Weitere Ratgeber einer Leistung: nach sechs Karten als schlichte Liste */
.ratgeber-liste { columns: 2 320px; column-gap: var(--s5); margin: var(--s5) 0 0; padding: 0; list-style: none; }
.ratgeber-liste li { break-inside: avoid; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.ratgeber-liste a { color: var(--text); text-decoration: none; font-weight: 500; }
.ratgeber-liste a:hover { color: var(--brick); }

/* Tabellen im Lesetext duerfen am Handy nicht ueber den Rand druecken */
.artikel-text table { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 560px) {
  .artikel-text table { font-size: 14.5px; }
  .artikel-text th, .artikel-text td { padding: 8px 10px 8px 0; }
}

/* Tabellen als Schaubild laufen bis an den Rand der Lesekarte (ueber --kartenluft
   hinaus), bekommen einen Tintenkopf und Zeilen mit Abstand zu den Raendern. */
.artikel-text .schaubild:has(> table) { margin-left: calc(-1 * var(--kartenluft)); margin-right: calc(-1 * var(--kartenluft)); }
.artikel-text .schaubild > table { margin: 0; font-size: 16px; }
.artikel-text .schaubild > table th, .artikel-text .schaubild > table td { padding: 13px 18px; vertical-align: top; }
.artikel-text .schaubild > table th:first-child, .artikel-text .schaubild > table td:first-child { padding-left: var(--kartenluft); }
.artikel-text .schaubild > table th:last-child, .artikel-text .schaubild > table td:last-child { padding-right: var(--kartenluft); }
.artikel-text .schaubild > table thead th { background: var(--ink); color: var(--paper); font-size: 14px; letter-spacing: .04em; border-bottom: 0; }
.artikel-text .schaubild > table tbody tr:nth-child(even) td { background: var(--paper); }
.artikel-text .schaubild > table td:first-child { font-weight: 600; color: var(--text); }
.artikel-text .schaubild:has(> table) figcaption { padding: 0 var(--kartenluft); }
@media (max-width: 560px) {
  .artikel-text .schaubild > table th, .artikel-text .schaubild > table td { padding: 10px 8px; }
}