@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url('/wp-content/uploads/mayer/fonts/Geist_latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url('/wp-content/uploads/mayer/fonts/Geist_latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* Farbvererbung: Breakdance faerbt h1-h6 und a global, das schlaegt auf dunklen Flaechen durch */
.dunkel h1,.dunkel h2,.dunkel h3,.dunkel h4,.dunkel p,.dunkel a,.dunkel li,.dunkel dt,.dunkel dd,.dunkel span,.dunkel strong{color:inherit}
.bereich h1,.bereich h2,.bereich h3,.bereich h4,.bereich p,.bereich span,.bereich a{color:inherit}
.gruppe h3,.gruppe ul,.gruppe li,.gruppe span{color:inherit}
.karte h3,.karte p,.karte span{color:inherit}
.person h3,.person p{color:inherit}
.ebene a,.ebene h1,.ebene h2,.ebene h3,.ebene p,.ebene span,.ebene div{color:inherit}
.fuss a,.fuss p,.fuss li,.fuss span{color:inherit}
.stimme blockquote p,.zitat p,.tafel p,.tafel h3{color:inherit}
/* Mayer Hausverwaltung & Versicherungen — Entwurf 3: wie Entwurf 2, reines Schwarz-Weiß, mehr Icons */

:root {
  /* Die Tokens des Designs haengen an den globalen Breakdance-Einstellungen.
     Aendert jemand dort eine Farbe oder die Schrift, aendert sich die ganze Seite.
     Die Werte hinter dem Komma sind nur Rueckfall, falls eine Variable fehlt. */
  --papier: var(--bde-background-color, var(--mayer-papier, #FFFFFF));
  --papier-2: #F4F4F4;
  --tinte: var(--bde-body-text-color, var(--mayer-tinte, #0A0A0A));
  --tinte-2: #161616;
  --grau: var(--mayer-grau, #666666);
  --linie: var(--mayer-linie, rgba(0, 0, 0, .14));
  --linie-hell: var(--mayer-linie-dunkel, rgba(255, 255, 255, .18));

  --display: var(--bde-heading-font-family, "Geist"), "Helvetica Neue", Arial, sans-serif;
  --text: var(--bde-body-font-family, "Geist"), "Helvetica Neue", Arial, sans-serif;
  --mono: var(--bde-body-font-family, "Geist"), "Helvetica Neue", Arial, sans-serif;

  --rand: clamp(20px, 4vw, 56px);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.gesperrt { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }


/* Schrift-Rollen */
.display { font-family: var(--display); font-weight: 400; letter-spacing: -.05em; line-height: .95; }
.mono {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--grau); font-weight: 500;
}
.dunkel .mono { color: rgba(255, 255, 255, .6); }
.mono .punkt { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--tinte); margin: 0 10px; vertical-align: middle; }
h2.display { font-size: clamp(2.6rem, 7vw, 7.5rem); }
h3.display { font-size: clamp(1.8rem, 3.4vw, 3.4rem); }
em { font-style: italic; font-weight: 400; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--tinte); outline-offset: 4px; }
.dunkel :focus-visible, .ebene :focus-visible, .fuss :focus-visible, .bereich:focus-visible { outline-color: #fff; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 1000; background: var(--tinte); color: var(--papier); padding: 10px 16px; }
.skip:focus { top: 12px; }

.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; flex: none; }
.icon * { stroke-width: 1; }
.icon-fein * { stroke-width: .75; }

.rand { padding-left: var(--rand); padding-right: var(--rand); }
.abschnitt { padding-top: clamp(64px, 7vw, 112px); padding-bottom: clamp(64px, 7vw, 112px); }
.dunkel { background: var(--tinte); color: var(--papier); }
.dunkel .linie { border-color: var(--linie-hell); }

/* Zeiger */
.zeiger {
  position: fixed; left: 0; top: 0; z-index: 995; pointer-events: none;
  width: 10px; height: 10px; border-radius: 50%; background: var(--tinte);
  transform: translate(-50%, -50%); transition: width .25s var(--ease), height .25s var(--ease), opacity .3s; will-change: transform;
  opacity: 0;
}
.zeiger.aktiv { opacity: 1; }
.zeiger { display: grid; place-items: center; }
.zeiger.gross { width: 58px; height: 58px; }
.zeiger-pfeil { width: 0; height: 0; opacity: 0; color: #fff; transition: width .25s var(--ease), height .25s var(--ease), opacity .2s; }
.zeiger-pfeil * { stroke-width: 1.6; }
.zeiger.gross .zeiger-pfeil { width: 18px; height: 18px; opacity: 1; }
.zeiger.hell { background: #fff; }
.zeiger.hell .zeiger-pfeil { color: var(--tinte); }
@media (hover: hover) and (pointer: fine) {
  body.hat-zeiger, body.hat-zeiger a, body.hat-zeiger button, body.hat-zeiger summary { cursor: none; }
}

/* Aufdecken */
.auf { opacity: 0; transform: translateY(36px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.auf.da { opacity: 1; transform: none; }
.auf-bild { overflow: hidden; }
.auf-bild img { transform: scale(1.14); transition: transform 1.6s var(--ease), filter .8s; }
.auf-bild.da img { transform: scale(1); }

/* ---------- Kopf ---------- */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 900; mix-blend-mode: difference; color: #fff;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  padding: 18px var(--rand); font-size: .92rem;
  transition: transform .5s var(--ease);
}
.kopf.weg { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .kopf { transition: none; } }
.marke { display: inline-flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 600; letter-spacing: -.02em; font-size: 1.25rem; }
.marke img { width: 42px; filter: brightness(0) invert(1); }
.kopf-mitte { justify-self: center; font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; display: inline-flex; align-items: center; }
.kopf-mitte .punkt { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; margin: 0 12px; }
.kopf-mitte .offen::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 8px; opacity: .5; }
.kopf-mitte .offen.ja::before { opacity: 1; box-shadow: 0 0 0 3px rgba(255,255,255,.25); }
.kopf-rechts { justify-self: end; display: inline-flex; align-items: center; gap: 22px; }
.kopf-rechts .tel { font-family: var(--mono); font-size: .8rem; letter-spacing: .04em; }
.menue-knopf { display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.menue-knopf .balken { width: 28px; height: 10px; position: relative; }
.menue-knopf .balken::before, .menue-knopf .balken::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .5s var(--ease), top .5s var(--ease), box-shadow .3s var(--ease); }
.menue-knopf .balken::before { top: 0; box-shadow: 0 4px 0 currentColor; } .menue-knopf .balken::after { top: 8px; }
.menue-knopf[aria-expanded="true"] .balken::before { top: 4px; transform: rotate(45deg); box-shadow: none; }
.menue-knopf[aria-expanded="true"] .balken::after { top: 4px; transform: rotate(-45deg); }
@media (max-width: 760px) { .kopf { grid-template-columns: 1fr auto; } .kopf-mitte, .kopf-rechts .tel { display: none; } }

/* Menü-Ebene */
.ebene {
  position: fixed; inset: 0; z-index: 850; background: var(--tinte); color: var(--papier);
  display: grid; grid-template-columns: 1.4fr 1fr; align-items: end; gap: 40px;
  padding: 120px var(--rand) 48px;
  clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease); visibility: hidden;
}
.ebene.offen { clip-path: inset(0 0 0 0); visibility: visible; }
.ebene-menue li { overflow: hidden; }
.ebene-menue a {
  display: flex; align-items: baseline; gap: 20px; font-family: var(--display); font-weight: 500; letter-spacing: -.035em;
  /* 8vw liess Hausverwaltung und Versicherungen bei 1400 px zweizeilig mit
     Trennstrich umbrechen. (Helmut, 05.10.2026) */
  font-size: clamp(2.6rem, 6.6vw, 7rem); line-height: 1.02; transform: translateY(110%); transition: transform .9s var(--ease), color .3s;
}
.ebene.offen .ebene-menue a { transform: none; }
.ebene-menue li:nth-child(2) a { transition-delay: .05s; } .ebene-menue li:nth-child(3) a { transition-delay: .1s; }
.ebene-menue li:nth-child(4) a { transition-delay: .15s; } .ebene-menue li:nth-child(5) a { transition-delay: .2s; }
.ebene-menue a:hover { color: rgba(255,255,255,.45); }
.ebene-menue a .mono { color: rgba(255,255,255,.5); }
.ebene-info { display: grid; gap: 28px; font-size: 1rem; line-height: 1.5; }
.ebene-info .mono { margin-bottom: 8px; }
.ebene-info a:hover { text-decoration: underline; }
@media (max-width: 900px) { .ebene { grid-template-columns: 1fr; align-content: end; padding-top: 96px; } .ebene-info { grid-template-columns: 1fr 1fr; } }

/* ---------- S1 Kopfbereich ---------- */
.held { min-height: 0; display: grid; grid-template-rows: auto auto auto auto; padding-top: 120px; padding-bottom: 112px; position: relative; }
.held-oben { display: flex; justify-content: space-between; gap: 24px; }
.held h1 { grid-row: 2; font-size: clamp(3rem, 10.6vw, 11.4rem); line-height: .92; margin: 0 0 40px; }
.held .held-unten { grid-row: 4; }
.held h1 .z { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.held h1 .z span { display: block; transform: translateY(110%); animation: hoch 1.3s var(--ease) forwards; }

.held h1 .z:nth-child(3) { padding-left: clamp(0px, 14vw, 260px); color: var(--grau); }
@keyframes hoch { to { transform: none; } }
.held-unten { display: grid; grid-template-columns: 1fr calc(50vw - var(--rand)); gap: 32px; align-items: stretch; margin-top: 6vh; }
.held-lead { font-size: clamp(1.05rem, 1.4vw, 1.3rem); max-width: 30ch; line-height: 1.45; }
.held-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.held-bild { position: relative; overflow: hidden; margin-right: calc(-1 * var(--rand)); min-height: 0; }
.held-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }

.held-adresse { display: grid; gap: 6px; font-family: var(--mono); font-size: .78rem; letter-spacing: .04em; color: var(--grau); }
.held-adresse .offen { color: var(--tinte); }
.held-adresse .offen::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--grau); margin-right: 10px; }
.held-adresse .offen.ja::before { background: var(--tinte); box-shadow: 0 0 0 3px rgba(0,0,0,.12); }
@media (max-width: 900px) {
  .held { padding-top: 150px; }
  .held-unten { grid-template-columns: 1fr; }
  .held-bild { margin-right: 0; aspect-ratio: 16 / 10; order: -1; }
}

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 22px;
  border: 1px solid currentColor; border-radius: 999px; font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  position: relative; overflow: hidden; isolation: isolate; transition: color .4s var(--ease);
}
.knopf::before { content: ""; position: absolute; inset: 0; background: var(--tinte); transform: translateY(101%); transition: transform .5s var(--ease); z-index: -1; }
.knopf:hover { color: var(--papier); }
.knopf:hover::before { transform: none; }
.knopf-voll { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
.knopf-voll::before { background: var(--papier); }
.knopf-voll:hover { color: var(--tinte); }
.dunkel .knopf::before { background: var(--papier); }
.dunkel .knopf:hover { color: var(--tinte); }
.dunkel .knopf-voll { background: var(--papier); color: var(--tinte); border-color: var(--papier); }
.dunkel .knopf-voll::before { background: var(--tinte); }
.dunkel .knopf-voll:hover { color: var(--papier); }
.knopf .icon { width: 16px; height: 16px; }

/* ---------- Laufband ---------- */
.laufband { border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); overflow: hidden; padding: 18px 0; }
.laufband-spur { display: flex; width: max-content; animation: lauf 40s linear infinite; }
.laufband:hover .laufband-spur { animation-play-state: paused; }
.laufband-spur > span { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; font-family: var(--display); font-size: clamp(1.3rem, 2.4vw, 2.2rem); letter-spacing: -.02em; white-space: nowrap; }
.laufband-spur i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--tinte); }
@keyframes lauf { to { transform: translateX(-50%); } }

/* ---------- S2 Zahlen ---------- */
.zahlen { display: grid; grid-template-columns: repeat(4, 1fr); }
.zahlen-band { border-bottom: 1px solid var(--linie); }
.zahlen li { padding: clamp(32px, 4vw, 56px) 0; border-right: 1px solid var(--linie); padding-right: 24px; }
.zahlen li + li { padding-left: 24px; }
.zahlen li:last-child { border-right: 0; }
.zahl { display: block; font-family: var(--display); font-size: clamp(3rem, 7vw, 7.5rem); line-height: .95; letter-spacing: -.05em; font-weight: 400; font-variant-numeric: tabular-nums; }
.zahlen p { margin-top: 14px; max-width: 30ch; color: var(--grau); font-size: .95rem; }
@media (max-width: 1000px) { .zahlen { grid-template-columns: 1fr 1fr; } .zahlen li:nth-child(2n) { border-right: 0; } .zahlen li:nth-child(n+3) { border-top: 1px solid var(--linie); } .zahlen li:nth-child(3) { padding-left: 0; } }
@media (max-width: 560px) { .zahlen { grid-template-columns: 1fr; } .zahlen li, .zahlen li + li { border-right: 0; padding-left: 0; } .zahlen li + li { border-top: 1px solid var(--linie); } }

/* ---------- Abschnittskopf ---------- */
.kopfzeile { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; margin-bottom: clamp(40px, 6vw, 88px); }
.kopfzeile .mono { padding-top: 0; }
.kopfzeile h2 { max-width: 14ch; }
.kopfzeile h2.zweizeilig { max-width: none; }
@media (min-width: 901px) { .zweizeilig span { display: block; white-space: nowrap; } }
@media (max-width: 700px) { .kopfzeile { grid-template-columns: 1fr; gap: 12px; } }

/* ---------- S3 Bereiche ---------- */
.bereiche { display: flex; gap: 2px; height: min(82vh, 760px); }
.bereich { flex: 1; position: relative; overflow: hidden; background: var(--tinte); color: var(--papier); transition: flex 1s var(--ease); display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(24px, 3vw, 48px); }
.bereich:hover { flex: 1.7; }
.bereich img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .8; transition: filter 1s var(--ease), opacity 1s var(--ease), transform 1.4s var(--ease); }
.bereich:hover img { opacity: 1; transform: scale(1.03); }
.bereich::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(16,17,20,.85), rgba(16,17,20,0) 60%); }
.bereich-inhalt { position: relative; z-index: 1; display: grid; gap: 16px; max-width: 46ch; }
.bereich h3 { font-size: clamp(2rem, 4.6vw, 4.6rem); }
.bereich p { color: rgba(255,255,255,.85); }
.bereich .mono { color: rgba(255,255,255,.6); }
.bereich .marken { display: flex; flex-wrap: wrap; gap: 8px 18px; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.bereich .pfeil { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; margin-top: 8px; }
.bereich .pfeil .icon { transition: transform .4s var(--ease); }
.bereich:hover .pfeil .icon { transform: translateX(6px); }
@media (max-width: 800px) { .bereiche { flex-direction: column; height: auto; } .bereich { min-height: 70vh; } .bereich:hover { flex: 1; } }

/* ---------- S4 Statement (Wort für Wort) ---------- */
.statement { max-width: 1100px; }
.statement p { font-family: var(--display); font-weight: 400; font-size: clamp(1.7rem, 3.6vw, 3.6rem); line-height: 1.15; letter-spacing: -.025em; }
.statement p + p { margin-top: 1em; }
.statement .w { opacity: .18; transition: opacity .35s; }
.statement .w.da { opacity: 1; }
.statement .mono { display: block; margin-bottom: 40px; }

/* ---------- S5 Leistungen ---------- */
.leistungen-fuss { padding-top: 40px; }

/* ---------- S6 Schadensfall (waagrecht) ---------- */
.schaden { position: relative; }
.buehne { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; }
.spur { display: flex; gap: 0; will-change: transform; }
.tafel { flex: none; width: 31vw; min-width: 340px; height: 78vh; padding: clamp(28px, 4vw, 64px); border-left: 1px solid var(--linie-hell); display: flex; flex-direction: column; justify-content: space-between; }
.tafel-intro { width: 84vw; min-width: 0; border-left: 0; padding-left: var(--rand); display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: end; }
.tafel-intro h2 { font-size: clamp(2.6rem, 6.4vw, 6.8rem); max-width: 12ch; margin-top: 24px; }
.tafel-intro figure { height: 100%; overflow: hidden; }
.tafel-intro img { width: 100%; height: 100%; object-fit: cover; }
.tafel .riesig { font-family: var(--display); font-size: clamp(5rem, 18vh, 11rem); line-height: .85; letter-spacing: -.06em; font-weight: 300; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.55); }
.tafel-text { max-width: 34ch; display: grid; gap: 14px; }
.tafel-text h3 { font-size: clamp(1.8rem, 3vw, 3rem); display: flex; align-items: center; gap: 14px; }
.tafel-text p { font-size: 1.02rem; line-height: 1.55; color: rgba(255,255,255,.8); min-height: calc(4 * 1.55em); }
.tafel-ende { width: 50vw; justify-content: flex-end; align-items: flex-start; gap: 24px; }
.tafel-ende p { max-width: 26ch; font-size: 1.2rem; }
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .schaden { height: auto !important; }
  .buehne { position: static; height: auto; display: block; overflow: visible; }
  .spur { flex-direction: column; transform: none !important; }
  .tafel { width: auto; min-width: 0; height: auto; border-left: 0; border-top: 1px solid var(--linie-hell); gap: 32px; padding-left: var(--rand); padding-right: var(--rand); }
  .tafel-intro { grid-template-columns: 1fr; border-top: 0; }
  .tafel-intro figure { aspect-ratio: 4 / 3; }
  .tafel .riesig { font-size: 5rem; }
}

/* ---------- S7 Stapel ---------- */
.stapel { display: grid; grid-template-columns: minmax(0, 1fr); }
.karte { min-width: 0; }
.karte { position: sticky; top: 10vh; height: 76vh; border: 1px solid var(--linie); background: var(--papier); padding: clamp(24px, 4vw, 56px); display: grid; grid-template-columns: minmax(80px, 160px) 1fr; grid-template-rows: auto 1fr auto; gap: 24px 32px; align-items: start; }
.karte-bild { padding: 0; overflow: hidden; display: block; }
.karte-bild img { width: 100%; height: 100%; object-fit: cover; }
.karte .nr { font-family: var(--display); font-size: clamp(2.6rem, 6vw, 6rem); line-height: .9; letter-spacing: -.04em; }
.karte h3 { font-size: clamp(2.2rem, 5.6vw, 6rem); }
.karte p { grid-column: 2; max-width: 30ch; font-size: 1.15rem; }
.karte .karte-fuss { grid-column: 1 / -1; align-self: end; display: flex; justify-content: space-between; align-items: end; gap: 24px; }
@media (max-width: 800px) { .karte p { max-width: none; } }

/* ---------- S8 Stimmen ---------- */
.stimmen { display: grid; grid-template-columns: auto 1fr; gap: 40px 64px; align-items: start; }
.stimmen-buehne { position: relative; min-height: 40vh; }
.stimme { position: absolute; inset: 0; opacity: 0; transform: translateX(var(--ein, -56px)); transition: opacity .7s var(--ease), transform .8s var(--ease); pointer-events: none; }
.stimme.weg { opacity: 0; transform: translateX(var(--aus, 56px)); }
.stimme.da { opacity: 1; transform: none; pointer-events: auto; position: relative; }
.stimme blockquote p { font-family: var(--display); font-weight: 400; font-size: clamp(1.8rem, 4vw, 4.2rem); line-height: 1.1; letter-spacing: -.03em; max-width: 22ch; }
.stimme figcaption { margin-top: 32px; font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grau); }
.stimme figcaption strong { color: var(--tinte); font-weight: 500; display: block; margin-bottom: 4px; }
.stimmen-steuer { display: flex; align-items: center; gap: 16px; margin-top: 40px; font-family: var(--mono); font-size: .78rem; }
.stimmen-steuer button { width: 48px; height: 48px; border: 1px solid var(--linie); border-radius: 50%; display: grid; place-items: center; transition: background .3s, color .3s; }
.stimmen-steuer button:hover { background: var(--tinte); color: var(--papier); }
.stimmen-steuer .icon { width: 16px; height: 16px; }
.stimmen-steuer .zurueck .icon { transform: rotate(180deg); }
@media (max-width: 700px) { .stimmen { grid-template-columns: 1fr; gap: 16px; } }

/* ---------- S9 Versicherungen ---------- */
.versicherung { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 120px); align-items: center; }
.versicherung-bild { aspect-ratio: 4 / 5; clip-path: inset(0 0 100% 0); transition: clip-path 1.4s var(--ease); }
.versicherung-bild.da { clip-path: inset(0 0 0 0); }
.versicherung-bild img { width: 100%; height: 100%; object-fit: cover; }

.versicherung-text { display: grid; gap: 28px; }
.versicherung-text > p { font-size: 1.15rem; max-width: 42ch; }
.zitat { border-left: 1px solid var(--tinte); padding-left: 24px; display: grid; gap: 12px; }
.zitat p { font-family: var(--display); font-weight: 400; font-size: clamp(1.25rem, 1.8vw, 1.7rem); line-height: 1.25; letter-spacing: -.02em; max-width: 28ch; }
@media (max-width: 800px) { .versicherung { grid-template-columns: 1fr; } .versicherung-bild { aspect-ratio: 4 / 3; order: -1; } }

/* ---------- S10 Team ---------- */
.team { border-top: 1px solid var(--linie); }
.person { display: grid; grid-template-columns: 60px 1fr auto; gap: 16px 32px; align-items: baseline; padding: clamp(18px, 2.4vw, 32px) 0; border-bottom: 1px solid var(--linie); position: relative; }
.person h3 { font-size: clamp(1.7rem, 4.6vw, 4.8rem); transition: transform .6s var(--ease); }
.person:hover h3 { transform: translateX(16px); }
.person p { color: var(--grau); max-width: 36ch; text-align: right; transition: color .4s; }
.person:hover p { color: var(--tinte); }
@media (max-width: 700px) { .person { grid-template-columns: 1fr; gap: 6px; } .person p { text-align: left; } }
.team-fuss { padding-top: 40px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }

/* ---------- S11 Fragen ---------- */
.fragen { display: grid; grid-template-columns: 1fr 1.6fr; gap: 48px; align-items: start; }
.fragen-liste { border-top: 1px solid var(--linie); }
.frage { border-bottom: 1px solid var(--linie); }
.frage summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; padding: 26px 0; font-family: var(--display); font-weight: 500; font-size: clamp(1.25rem, 2vw, 1.9rem); letter-spacing: -.02em; line-height: 1.15; }
.frage summary::-webkit-details-marker { display: none; }
.frage summary .icon { width: 22px; height: 22px; transition: transform .5s var(--ease); }
.frage[open] summary .icon { transform: rotate(45deg); }
.frage-antwort { padding: 0 0 28px; max-width: 60ch; color: var(--grau); font-size: 1.05rem; }
.frage[open] .frage-antwort { color: var(--tinte); }
@media (max-width: 800px) { .fragen { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- S12 Kontakt ---------- */
.kontakt h2 { font-size: clamp(3rem, 11vw, 12rem); line-height: .9; }
.kontakt h2 em { color: rgba(255,255,255,.45); }
.kontakt-mail { display: inline-block; margin-top: 8vh; font-family: var(--display); font-size: clamp(1.4rem, 4.4vw, 4.8rem); letter-spacing: -.03em; line-height: 1.1; position: relative; padding-bottom: .1em; word-break: break-all; }
.kontakt-mail::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; transform: scaleX(1); transform-origin: left; transition: transform .6s var(--ease); }
.kontakt-mail:hover::after { transform: scaleX(0); transform-origin: right; }
.kontakt-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-top: 10vh; padding-top: 40px; border-top: 1px solid var(--linie-hell); font-size: 1rem; line-height: 1.55; }
.kontakt-raster .mono { display: block; margin-bottom: 14px; }
.kontakt-raster a:hover { text-decoration: underline; }
.kontakt-raster .zeiten { display: grid; grid-template-columns: auto 1fr; gap: 2px 16px; }
.kontakt-raster .offen { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.kontakt-raster .offen::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.4); }
.kontakt-raster .offen.ja::before { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.2); }
.kontakt-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
@media (max-width: 900px) { .kontakt-raster { grid-template-columns: 1fr 1fr; } .kontakt-mail { font-size: clamp(1.15rem, 5.6vw, 2.2rem); word-break: normal; } }
@media (max-width: 520px) { .kontakt-raster { grid-template-columns: 1fr; } }

/* ---------- Fuß ---------- */
.fuss { background: var(--tinte); color: var(--papier); padding-top: 60px; overflow: hidden; }
.fuss-zeile { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); padding-bottom: 24px; }
.fuss-zeile ul { display: flex; flex-wrap: wrap; gap: 24px; }
.fuss-zeile a:hover { color: var(--papier); }
.fuss-siegel { display: inline-flex; align-items: center; gap: 12px; text-transform: none; letter-spacing: 0; font-family: var(--text); font-size: .9rem; }
.fuss-siegel img { width: 36px; filter: grayscale(1) brightness(1.6); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .held h1 .z span { transform: none; }
  .auf { opacity: 1; transform: none; }
  .auf-bild img { transform: none; }
  .versicherung-bild { clip-path: none; }
  .statement .w { opacity: 1; }
  .laufband-spur { animation: none; }
  .zeiger { display: none; }
}

/* ---------- Icons (Entwurf 3) ---------- */
.mit-icon { display: inline-flex; align-items: center; gap: 10px; }
.mit-icon .icon { width: 15px; height: 15px; }
.mono.mit-icon .icon { width: 14px; height: 14px; color: var(--tinte); }
.dunkel .mono.mit-icon .icon { color: var(--papier); }
.kontakt-raster .mono.mit-icon { display: flex; }
.kontakt-raster a.mit-icon .icon { width: 13px; height: 13px; }
.zahl-icon { display: block; width: 30px; height: 30px; margin-bottom: 28px; }
.zahl-icon * { stroke-width: .9; }
.bereich-kopf { display: flex; justify-content: space-between; align-items: center; }
.bereich-icon { width: 48px; height: 48px; color: var(--papier); transition: transform .8s var(--ease); }
.bereich-icon * { stroke-width: .75; }
.bereich:hover .bereich-icon { transform: translateY(-6px) rotate(-6deg); }
@media (prefers-reduced-motion: reduce) { .bereich:hover .bereich-icon { transform: none; } }

/* ---------- Handy-Korrekturen (Entwurf 3) ---------- */
.stimmen > * { min-width: 0; }
.stimme blockquote p { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; }
@media (max-width: 800px) {
}

/* ---------- Bereiche nachgeschärft (Entwurf 3) ---------- */
.bereich .bereich-knopf { justify-self: start; margin-top: 12px; color: var(--papier); border-color: rgba(255,255,255,.8); }
.bereich .bereich-knopf::before { background: var(--papier); }
.bereich:hover .bereich-knopf { color: var(--tinte); border-color: var(--papier); }
.bereich:hover .bereich-knopf::before { transform: none; }
.bereich .bereich-knopf .icon { transition: transform .4s var(--ease); }
.bereich:hover .bereich-knopf .icon { transform: translateX(4px); }

/* ---------- WhatsApp als runder Knopf unten rechts (Entwurf 3) ---------- */
.whatsapp-knopf {
  position: fixed; right: clamp(16px, 2.4vw, 32px); bottom: clamp(16px, 2.4vw, 32px); z-index: 840;
  width: 60px; height: 60px; border-radius: 50%; background: var(--tinte); color: #fff;
  display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(255,255,255,.35), 0 10px 30px rgba(0,0,0,.18);
  transition: transform .4s var(--ease);
}
.whatsapp-knopf .icon { width: 26px; height: 26px; }
.whatsapp-knopf .icon * { stroke-width: 1.3; }
.whatsapp-knopf:hover { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) { .whatsapp-knopf:hover { transform: translateY(var(--hoch, 0px)); } }

/* ---------- Leistungen: Zeilen mit einfahrendem Bild (Entwurf 3) ---------- */
.leistungen { --bild: clamp(220px, 24vw, 380px); margin: 0 calc(-1 * var(--rand)); border-top: 1px solid var(--linie); }
.gruppe {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: 1fr minmax(0, 34ch); gap: 24px 48px; align-items: center;
  padding: clamp(28px, 3.2vw, 48px) var(--rand); border-bottom: 1px solid var(--linie);
}
.gruppe::before { content: ""; position: absolute; inset: 0; background: var(--tinte); transform: scaleY(0); transform-origin: var(--von, top); transition: transform .6s var(--ease); z-index: -2; }
.gruppe.an::before { transform: scaleY(1); }
.gruppe.an { color: var(--papier); }
.gruppe-bild { position: absolute; top: 0; bottom: 0; left: 0; width: var(--bild); overflow: hidden; z-index: -1; clip-path: inset(0 0 100% 0); transition: clip-path .6s var(--ease); }
.gruppe[data-von="bottom"] .gruppe-bild { clip-path: inset(100% 0 0 0); }
.gruppe-bild img { width: 100%; height: 100%; object-fit: cover; }
.gruppe.an .gruppe-bild, .gruppe.an[data-von="bottom"] .gruppe-bild { clip-path: inset(0 0 0 0); }
.gruppe h3 { font-size: clamp(1.8rem, 3.5vw, 4rem); line-height: 1; padding-bottom: .06em; transition: transform .7s var(--ease); }
.gruppe.an h3 { transform: translateX(var(--bild)); }
.gruppe ul { grid-column: 2; display: grid; gap: 10px; font-size: 1.02rem; }
.gruppe li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; }
.gruppe li::before { content: "—"; opacity: .5; }
@media (max-width: 900px) {
  .leistungen { --bild: 0px; }
  .gruppe { grid-template-columns: 1fr; gap: 16px; align-items: start; }
  .gruppe ul { grid-column: 1; }
  .gruppe-bild { display: none; }
  .gruppe.an h3 { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .gruppe-bild, .gruppe h3 { transition: none; } }

/* ---------- Verwalterwechsel: Stapel hält so, dass Nummer und Überschrift sichtbar bleiben (Entwurf 3) ---------- */
.stapel {
  --pad: 32px; --gr: clamp(2.2rem, 4.6vw, 4.8rem);
  --start: 12vh; --streifen: 64px; --kopfh: calc(2 * var(--pad) + .95 * var(--gr));
  margin: 0 calc(-1 * var(--rand));
}
.karte {
  --t: var(--start); top: var(--t); height: calc(96vh - var(--t));
  border: 0; border-top: 1px solid var(--linie);
  padding: var(--pad) var(--rand); grid-template-columns: minmax(80px, 160px) 1fr; grid-template-rows: auto 1fr auto; gap: calc(var(--pad) + 4px) 32px; align-items: start;
}
.karte:last-child { border-bottom: 1px solid var(--linie); }
.karte-bild { padding: 0; border-top: 0; }
.karte:nth-child(2) { --t: calc(var(--start) + var(--streifen)); }
.karte:nth-child(3) { --t: calc(var(--start) + var(--streifen) + var(--kopfh)); }
.karte:nth-child(4) { --t: calc(var(--start) + var(--streifen) + 2 * var(--kopfh)); }
.karte:nth-child(5) { --t: calc(var(--start) + var(--streifen) + 3 * var(--kopfh)); }
.karte .nr, .karte h3 { font-size: var(--gr); line-height: .95; }
.karte p { grid-column: 2; grid-row: 2; }
.karte .karte-fuss { grid-row: 3; }
@media (max-width: 800px) {
  .stapel { --pad: 22px; --gr: 2.2rem; --start: 10vh; --streifen: 44px; }
  .karte { grid-template-columns: auto 1fr; gap: calc(var(--pad) + 4px) 16px; }
  .karte p { grid-column: 1 / -1; }
}

/* ---------- Versicherungen: Bild so hoch wie der Inhalt (Entwurf 3) ---------- */
.versicherung { align-items: stretch; }
.versicherung-bild { aspect-ratio: auto; position: relative; min-height: 360px; }
.versicherung-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 800px) { .versicherung-bild { aspect-ratio: 4 / 3; min-height: 0; } }

/* ---------- Team, Kontakt, Fuß (Entwurf 3) ---------- */
.team { margin: 0 calc(-1 * var(--rand)); }
.person { grid-template-columns: 1fr auto; padding-left: var(--rand); padding-right: var(--rand); }
.kontakt h2 span { display: inline-block; }
@media (min-width: 701px) { .kontakt h2 span { display: block; } }
.kontakt-tel { display: inline-block; margin-top: 6vh; font-family: var(--display); font-size: clamp(2.4rem, 7vw, 7rem); line-height: 1; letter-spacing: -.04em; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; transition: text-underline-offset .4s var(--ease); }
.kontakt-tel:hover { text-underline-offset: .2em; }
.kontakt .kontakt-mail { display: table; margin-top: 28px; font-size: clamp(1.1rem, 1.8vw, 1.6rem); }
.kontakt-raster { margin-left: calc(-1 * var(--rand)); margin-right: calc(-1 * var(--rand)); padding-left: var(--rand); padding-right: var(--rand); }
.fuss { padding-top: 0; padding-bottom: 0; }
.fuss-zeile {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px 32px;
  margin: 0 calc(-1 * var(--rand)); padding: 28px var(--rand);
  border-top: 1px solid var(--linie-hell); border-bottom: 1px solid var(--linie-hell);
  text-transform: none; letter-spacing: 0; font-family: var(--text); font-size: .88rem;
}
.fuss-zeile p { margin: 0; }
.fuss-links a { color: var(--papier); }
.fuss-siegel { justify-self: center; }
.fuss-rechts { justify-self: end; }
@media (max-width: 900px) { .fuss-zeile { grid-template-columns: 1fr; } .fuss-siegel, .fuss-rechts { justify-self: start; } }

/* Schlusszeile im selben Raster wie die Karten: "Das war's." in der
   Nummernspalte, der Knopf buendig unter den Ueberschriften statt rechts
   aussen. (Helmut, 05.10.2026) */
.karte-schluss { --t: calc(var(--start) + var(--streifen) + 4 * var(--kopfh)); display: grid; grid-template-columns: minmax(80px, 160px) 1fr; grid-template-rows: auto; align-items: center; gap: 24px 32px; }
.karte-schluss .mono { line-height: 50px; }
.stapel::after { content: ""; display: block; height: 35vh; }
@media (max-width: 800px) { .karte-schluss { grid-template-columns: 1fr; } }

/* Vorzeilen überall gleich; E-Mail als Knopf (Entwurf 3) */
.versicherung-text > p.mono { font-size: .72rem; max-width: none; }
.kontakt-mail-zeile { margin-top: 32px; }
/* Kontaktraster: oben 50 % mehr Luft, unten gleich viel (Entwurf 3) */
.kontakt-raster { padding-top: 60px; }
.kontakt.abschnitt { padding-bottom: 60px; }
/* Team: Namen in Größe der Schadensfall-Überschriften, Aufgaben einzeilig (Entwurf 3) */
.person h3 { font-size: clamp(1.8rem, 3vw, 3rem); }
.person { gap: 16px 64px; align-items: center; }
@media (min-width: 701px) { .person p { max-width: none; white-space: nowrap; } }


/* Mauszeiger über den Fragen: Pfeil nach unten (offen: nach oben) */
.zeiger-pfeil { transition: width .25s var(--ease), height .25s var(--ease), opacity .2s, transform .3s var(--ease); }
.zeiger.runter .zeiger-pfeil { transform: rotate(90deg); }
.zeiger.hoch .zeiger-pfeil { transform: rotate(-90deg); }
.zeiger.raus .zeiger-pfeil { transform: rotate(-45deg); }

/* WhatsApp-Knopf: kehrt auf dunklem Grund um, rastet über dem Fuß ein (Entwurf 3) */
.whatsapp-knopf { transform: translateY(var(--hoch, 0px)); transition: transform .25s var(--ease), background-color .3s, color .3s, box-shadow .3s; will-change: transform; }
.whatsapp-knopf.hell { background: var(--papier); color: var(--tinte); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.whatsapp-knopf:hover { transform: translateY(var(--hoch, 0px)) scale(1.08); }
/* Leistungen: Trennlinie liegt unter der dunklen Fläche (Entwurf 3) */
.gruppe { overflow: visible; border-bottom: 0; }
.gruppe::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--linie); z-index: -3; }
.gruppe::before { inset: -1px 0 0 0; }
.gruppe-bild { top: -1px; }
.gruppe.an { z-index: 1; }
/* Bereiche Hausverwaltung/Versicherungen bis an den Fensterrand (Entwurf 3) */
.bereiche { margin-left: calc(-1 * var(--rand)); margin-right: calc(-1 * var(--rand)); }
.bereich { padding-left: var(--rand); padding-right: var(--rand); }

/* Kontakt: Tel.-Vorsatz, Knöpfe untereinander (Entwurf 3) */
.kontakt-raster .kontakt-knoepfe { flex-direction: column; align-items: flex-start; }

/* Mauskreis über Telefon-Links: Hörer statt Pfeil (Entwurf 3) */
.zeiger > .icon { grid-area: 1 / 1; }
.zeiger-tel { width: 0; height: 0; opacity: 0; color: #fff; transition: width .25s var(--ease), height .25s var(--ease), opacity .2s; }
.zeiger-tel * { stroke-width: 1.5; }
.zeiger.hell .zeiger-tel { color: var(--tinte); }
.zeiger.gross.telefon .zeiger-tel { width: 18px; height: 18px; opacity: 1; }
.zeiger.telefon .zeiger-pfeil { opacity: 0; }

/* Kopfleiste: deckender Grund, Linie über die ganze Breite, größeres Logo (Entwurf 3) */
.kopf { mix-blend-mode: normal; color: var(--tinte); background: var(--papier); box-shadow: inset 0 -1px 0 transparent; transition: transform .5s var(--ease), box-shadow .3s, background-color .3s, color .3s; }
.kopf.linie { box-shadow: inset 0 -1px 0 var(--linie); }
.marke { font-size: 1.625rem; gap: 14px; }
.marke img { width: 55px; filter: brightness(0); }
body.gesperrt .kopf { background: transparent; color: var(--papier); box-shadow: none; }
body.gesperrt .marke img { filter: brightness(0) invert(1); }
.kopf-mitte .offen.ja::before { box-shadow: 0 0 0 3px rgba(0,0,0,.15); }

/* Kontakt: beide Knöpfe gleich breit (Entwurf 3) */
.kontakt-raster .kontakt-knoepfe { display: inline-flex; align-items: stretch; }
.kontakt-raster .kontakt-knoepfe .knopf { justify-content: space-between; }

/* Nur „Alle Leistungen ansehen" und „Jobs": dunkel, beim Überfahren hell mit Umriss (Entwurf 3) */
.leistungen-fuss .knopf, .team-fuss .knopf { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
.leistungen-fuss .knopf::before, .team-fuss .knopf::before { background: var(--papier); }
.leistungen-fuss .knopf:hover, .team-fuss .knopf:hover { color: var(--tinte); }

/* Versicherungen: Bild steht fest, der Rahmen legt es beim Scrollen frei (Entwurf 3) */
.versicherung-bild, .versicherung-bild.da { clip-path: inset(0 0 0 0); transition: none; }
@media (min-width: 801px) and (prefers-reduced-motion: no-preference) {
  .versicherung-bild img { position: fixed; top: 0; left: var(--bild-links, 50vw); width: var(--bild-breite, 50vw); height: 100vh; inset: auto; top: 0; }
}
.versicherung-text > p:not(.mono) { max-width: none; text-wrap: balance; } /* ausgewogen statt nur schoen umbrochen (Helmut, 05.10.2026) */

/* Zahlen: Linien bis zum Rand auch bei 2 und 1 Spalte (Entwurf 3) */
.zahlen { margin: 0 calc(-1 * var(--rand)); }
.zahlen li:first-child { padding-left: var(--rand); }
.zahlen li:last-child { padding-right: var(--rand); }
@media (max-width: 1000px) {
  .zahlen li:nth-child(odd) { padding-left: var(--rand); }
  .zahlen li:nth-child(even) { padding-right: var(--rand); padding-left: 24px; }
}
@media (max-width: 560px) {
  .zahlen li, .zahlen li + li, .zahlen li:nth-child(odd), .zahlen li:nth-child(even) { padding-left: var(--rand); padding-right: var(--rand); }
}

/* Leistungen auf Tablet und Handy: quadratisches Bild links, Text rechts, ohne Hover-Effekt */
@media (max-width: 900px) {
  .gruppe { grid-template-columns: clamp(96px, 24vw, 200px) 1fr; grid-template-rows: auto 1fr; gap: 12px clamp(16px, 4vw, 32px); align-items: start; }
  .gruppe-bild { display: block; position: static; grid-row: 1 / 3; grid-column: 1; width: 100%; aspect-ratio: 1 / 1; clip-path: none !important; z-index: 0; }
  .gruppe h3 { grid-column: 2; grid-row: 1; font-size: clamp(1.5rem, 5vw, 2.4rem); }
  .gruppe ul { grid-column: 2; grid-row: 2; font-size: .95rem; gap: 6px; }
  .gruppe.an { color: inherit; }
  .gruppe.an::before { transform: scaleY(0); }
  .gruppe.an h3 { transform: none; }
}
@media (max-width: 800px) {
  .fragen-liste { margin: 0 calc(-1 * var(--rand)); }
  .frage summary, .frage-antwort { padding-left: var(--rand); padding-right: var(--rand); }
}

/* Leistungen auf Tablet und Handy: Bild randlos links, oben und unten (Entwurf 3) */
@media (max-width: 900px) {
  .leistungen { --bb: clamp(110px, 26vw, 220px); }
  .gruppe { position: relative; min-height: var(--bb); padding-left: calc(var(--bb) + clamp(16px, 4vw, 32px)); grid-template-columns: 1fr; }
  .gruppe-bild { position: absolute; grid-area: auto; top: 0; bottom: 1px; left: 0; width: var(--bb); height: auto; aspect-ratio: auto; }
  .gruppe h3, .gruppe ul { grid-column: 1; }
}

/* Häufige Fragen auf Tablet und Handy: Überschrift in einer Zeile, Fragen darunter */
@media (max-width: 1100px) {
  .fragen { grid-template-columns: 1fr; gap: 40px; }
  .fragen h2 { white-space: nowrap; }
  .fragen > div:first-child p[style] { max-width: 60ch !important; }
  .fragen-liste { margin: 0 calc(-1 * var(--rand)); }
  .frage summary, .frage-antwort { padding-left: var(--rand); padding-right: var(--rand); }
}

/* Fuß gestapelt: Verband, dann Impressum und Datenschutz, ganz unten BÜRO15 */
@media (max-width: 900px) {
  .fuss-siegel { order: 1; }
  .fuss-rechts { order: 2; }
  .fuss-links { order: 3; }
}

/* ---------- Tablet und Handy, Runde 18.09.2026 (Entwurf 3) ---------- */
/* Überschriften mit festem Umbruch: zweite Zeile immer eigene Zeile */
.zweizeilig span { display: block; }
.kopfzeile h2.zweizeilig { max-width: none; }

@media (max-width: 900px) {
  /* Kopfbereich: Überschrift mit Abstand zum Menü, Bild direkt darunter, Text breiter */
  .held { min-height: 0; grid-template-rows: auto auto; padding-top: 150px; padding-bottom: 56px; }
  .held h1 { grid-row: 1; margin-bottom: 28px; }
  .held .held-unten { grid-row: 2; margin-top: 0; }
  .held-lead { max-width: 45ch; }
  /* „Was wir für Sie erledigen." in einer Zeile */
  #leistungen-titel { max-width: none; white-space: nowrap; font-size: min(7.2vw, 7.5rem); }
  /* Schaden: Überschrift über die ganze Breite, unter „Schaden melden" doppelt so viel Fläche */
  .tafel-intro h2 { max-width: none; }
  .tafel-ende { padding-bottom: calc(2 * clamp(28px, 4vw, 64px)); }
}
/* Bereiche schon ab Tabletgröße untereinander */
@media (max-width: 1100px) {
  .bereiche { flex-direction: column; height: auto; gap: 2px; }
  .bereich { min-height: min(70vh, 640px); }
  .bereich:hover { flex: 1; }
}
/* Schaden auf dem Tablet: Nummer links, Überschrift und Text rechts daneben */
@media (min-width: 601px) and (max-width: 900px) {
  .tafel:not(.tafel-intro):not(.tafel-ende) { display: grid; grid-template-columns: 9rem 1fr; gap: 0 32px; align-items: start; }
  .tafel-text { max-width: 52ch; }
  .tafel-text p { min-height: 0; }
}
/* Handy: Leistungen mit schmalem Bild oben (16:9), Inhalt darunter */
@media (max-width: 600px) {
  .gruppe { padding-left: var(--rand); padding-top: 0; min-height: 0; grid-template-rows: auto auto auto; }
  .gruppe-bild { position: static; grid-row: 1; grid-column: 1; width: auto; margin: 0 calc(-1 * var(--rand)) 12px; aspect-ratio: 16 / 9; }
  .gruppe h3 { grid-row: 2; }
  .gruppe ul { grid-row: 3; }
  .held h1 { font-size: clamp(2.4rem, 11vw, 3rem); }
  .held { padding-top: 195px; }
  .abschnitt { padding-top: 40px; padding-bottom: 40px; }
}
/* Unter „Das war's" weniger Abstand zum nächsten Bereich (Tablet und Handy) */
@media (max-width: 900px) {
  .karte-schluss { height: auto; }
  .stapel::after { height: 12vh; }
}
@media (max-width: 600px) {
  /* Schaden: mehr schwarze Fläche oben und unten */
  .tafel-intro { padding-top: 72px; }
  /* Verwalterwechsel: Bild normal und fast quadratisch statt bildschirmhoch */
  .karte-bild { aspect-ratio: auto; height: 0; padding-top: 100%; }
  .karte-bild img { position: absolute; inset: 0; }
}

/* ---------- Nur Handy, 18.09.2026 (Entwurf 3) ---------- */
.bereich p { hyphens: none; -webkit-hyphens: none; }
@media (max-width: 600px) {
  .bereich p { text-wrap: pretty; hyphens: manual; -webkit-hyphens: manual; }
  /* Team: Name in einer Zeile, Aufgabe darunter */
  .person { grid-template-columns: 1fr; gap: 6px; align-items: start; }
  .person h3 { white-space: nowrap; }
  .person p { text-align: left; max-width: none; }
  /* Häufige Fragen: ausgewogene Zeilen */
  .frage summary { text-wrap: balance; }
}
@media (max-width: 600px) {
  /* Sinnvolle Silbentrennung auf schmalen Bildschirmen (nur Fließtext, nicht bei kurzen Wörtern) */
  p, li, blockquote, .frage-antwort, .bereich p {
    hyphens: manual; -webkit-hyphens: manual;
    hyphenate-limit-chars: 10 5 4; -webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 4;
  }
  .display, h1, h2, h3, .mono, .knopf { hyphens: manual; -webkit-hyphens: manual; }
  /* Kundenstimmen: Höhe folgt der gezeigten Stimme, weich */
  .stimmen-buehne { min-height: 0; transition: height .6s var(--ease); }
  .stimme, .stimme.da { position: absolute; top: 0; left: 0; right: 0; bottom: auto; }
}
/* Kundenstimmen: ausfahrende Stimme erzeugt keine seitliche Überbreite */
section:has(> .stimmen) { overflow-x: clip; }
/* Häufige Fragen: weiches Auf- und Zufahren (alle Größen) */
.frage-antwort { overflow: hidden; }
.frage.schliesst summary .icon { transform: none; }

/* Titelbild: Höhe nicht nur über aspect-ratio (Safari zeigt sonst teils nichts), 18.09.2026 */
.held-bild { min-height: 240px; }
@media (max-width: 900px) {
  .held-bild { aspect-ratio: auto; height: 0; min-height: 0; padding-top: 62.5%; }
}
/* Handy: Prelines, die umbrechen, ausgewogen */
@media (max-width: 600px) {
  .mono { text-wrap: balance; }
  /* Verwalterwechsel: Bild bleibt stehen wie die Karten; nächste Karte kommt nach gut 500 px */
  .karte:not(.karte-bild):not(.karte-schluss) { height: auto; min-height: min(500px, 62vh); }
}
/* Kundenstimmen: wischen */
.stimmen-buehne { touch-action: pan-y; }
@media (max-width: 600px) {
  .gruppe-bild { position: relative; aspect-ratio: auto; height: 0; padding-top: calc((100% + 2 * var(--rand)) * .5625); }
  .gruppe-bild img { position: absolute; inset: 0; }
}

/* Handy: Karten bleiben stehen, bis „Das war's" den Text von 04 verdeckt; erst dann läuft alles weg.
   Der Auslauf muss die Höhe der 04-Karte über „Das war's" hinaus abdecken, plus kurze Haltezeit. */
@media (max-width: 600px) {
  /* Alle Karten enden auf derselben Linie (wie am Computer) — so laufen sie gemeinsam weg */
  .karte:not(.karte-bild), .karte-schluss { height: calc(var(--start) + var(--streifen) + min(500px, 62vh) - var(--t)); min-height: 0; }
  .stapel::after { height: 18vh; }
}

/* Handy: sanftes Einblenden von Inhalten ohne eigenen Effekt (Klasse „rein" setzt das Skript) */
@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
  .rein { opacity: 0; transform: translateY(28px); transition: opacity 1.8s var(--ease), transform 2s var(--ease); transition-delay: var(--vz, 0s); }
  .rein.da { opacity: 1; transform: none; }
}
@media (max-width: 600px) {
  /* Kartenhöhe: gleiche Spezifität wie die ältere Regel, damit sie greift */
  .karte:not(.karte-bild):not(.karte-schluss) { height: calc(var(--start) + var(--streifen) + min(500px, 62vh) - var(--t)); min-height: 0; }
  /* Team: Aufgabe ausgewogen umbrechen */
  .person p { text-wrap: balance; }
  /* Versicherung: Bild im Querformat nach dem Button, Höhe ohne aspect-ratio (Safari) */
  .versicherung-bild { order: 1; aspect-ratio: auto; height: 0; min-height: 0; padding-top: 62.5%; }
  .versicherung-bild img { position: absolute; inset: 0; width: 100%; height: 100%; }
}

/* Menü-Ebene am Computer: graue Beschriftung über dem Inhalt, Button mit weißem Umriss (18.09.2026) */
@media (min-width: 901px) {
  .ebene-info .mono { display: block; }
  .ebene .knopf-voll { background: transparent; color: var(--papier); border-color: var(--papier); }
  .ebene .knopf-voll::before { background: var(--papier); }
  .ebene .knopf-voll:hover { color: var(--tinte); }
}
/* Menü-Ebene auf dem Handy: gleiche Anordnung, alles untereinander */
@media (max-width: 600px) {
  .ebene-info { grid-template-columns: 1fr; gap: 22px; }
  .ebene-info .mono { display: block; margin-bottom: 6px; }
  .ebene .knopf-voll { background: transparent; color: var(--papier); border-color: var(--papier); }
  .ebene .knopf-voll::before { background: var(--papier); }
  .ebene .knopf-voll:hover { color: var(--tinte); }
}
/* Menü-Ebene auf dem Handy: nur „Erreichen" und der Button */
@media (max-width: 600px) {
  .ebene-info > div:nth-child(1), .ebene-info > div:nth-child(3) { display: none; }
}
/* Menü-Ebene auf dem Handy: große Menüpunkte mittig zwischen Kopfleiste und „Erreichen" */
@media (max-width: 600px) {
  .ebene { display: flex; flex-direction: column; align-items: stretch; }
  .ebene > nav { flex: 1; display: flex; align-items: center; }
  .ebene-info { flex: none; }
}
/* Handy: Bereiche Hausverwaltung/Versicherungen unten 20 px mehr Luft unter dem Button */
@media (max-width: 600px) {
  .bereich { padding-bottom: calc(clamp(24px, 3vw, 48px) + 20px); }
}

/* Breakdance-Reparaturen */
svg[fill='none']{fill:none}
svg[stroke-width]{stroke-width:inherit}
a:hover,.button-atom--text:hover{color:inherit}
.bde-f-svg-icon{display:inline-flex}
.breakdance.canvas .auf,.breakdance.canvas .rein{opacity:1!important;transform:none!important}
.breakdance.canvas .gruppe-bild,.breakdance.canvas .versicherung-bild{clip-path:none!important}
body.breakdance{padding-bottom:0}

/* Nur im Builder-Canvas: feste und versteckte Elemente sichtbar und an ihrem Platz */
.breakdance.canvas .versicherung-bild img{position:absolute!important;top:0!important;left:0!important;width:100%!important;height:100%!important}
.breakdance.canvas .zeiger,.breakdance.canvas .whatsapp-knopf{display:none!important}
.breakdance.canvas .kopf{position:static!important;transform:none!important}
.breakdance.canvas .buehne{position:static!important;height:auto!important;overflow:visible!important}
.breakdance.canvas .spur{flex-direction:column!important;transform:none!important}
.breakdance.canvas .tafel{width:auto!important;min-width:0!important;height:auto!important}
.breakdance.canvas .karte{position:static!important;height:auto!important}
.breakdance.canvas .stimme{position:relative!important;opacity:1!important;transform:none!important}
.breakdance.canvas .stimmen-buehne{height:auto!important;min-height:0!important}

/* Icon-Huelle */
.isp{display:inline-flex;align-items:center;flex:none}
.bde-f-svg-icon > svg{stroke-width:inherit}
.icon svg,.icon > svg{width:100%;height:100%}

/* Icon-Farben: Breakdance fuellt SVGs und setzt stroke-width 0 */
.bde-f-svg-icon.icon > svg,.bde-f-svg-icon.icon svg{fill:none;stroke:currentColor;stroke-width:inherit}
.icon{stroke-width:1}
.icon-fein{stroke-width:.75}
.whatsapp-knopf .icon{stroke-width:1.3}

/* Mauszeiger-Huelle: die Icon-Spans duerfen das Raster nicht aufbrechen */
.zeiger > .isp{display:contents}
.zeiger .icon{grid-area:1 / 1}


/* Beim Import verlorene Inline-Angaben */
#fragen-titel{margin-top:14px}
.fragen > div > p:not(.mono){margin:24px 0 20px;max-width:32ch;color:var(--grau)}
#kontakt-titel{margin-top:20px}
/* Kachel bleibt beim Ueberfahren hell */
.bereich:hover,.bereich:focus-visible{color:var(--papier)}

/* Kundenwuensche 21.09.2026 */
.marke img{filter:none}
.marke span{white-space:nowrap}
@media (max-width:760px){.marke span{font-size:1.1rem}}

/* Unterseiten */
main > section:first-child{padding-top:clamp(120px,12vw,190px)}

/* Kontaktseite */
.kontakt-tel-hell{display:inline-block;margin-top:6vh;font-family:var(--display);font-size:clamp(2.2rem,5.6vw,5rem);line-height:1;letter-spacing:-.04em;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.12em}
.kontakt-raster-hell{border-top:1px solid var(--linie);padding-top:40px;margin-top:24px}
.kontakt-raster-hell .mono{color:var(--grau)}
.kontakt-raster-hell a{text-decoration:underline;text-underline-offset:.18em}
.formular{margin-top:8px}

/* Formulare */
.bde-form-builder .breakdance-form{display:grid;grid-template-columns:repeat(12,1fr);gap:26px 32px}
.bde-form-builder .breakdance-form-field{grid-column:span 12;min-width:0}
.bde-form-builder .breakdance-form-field__label{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grau);margin-bottom:10px}
.bde-form-builder .breakdance-form-field__required{color:var(--tinte)}
.bde-form-builder .breakdance-form-field__input{width:100%;background:transparent;border:0;border-bottom:1px solid var(--linie);border-radius:0;padding:10px 0;font-family:var(--text);font-size:1.05rem;color:var(--tinte);transition:border-color .3s var(--ease)}
.bde-form-builder .breakdance-form-field__input:focus{outline:none;border-bottom-color:var(--tinte)}
.bde-form-builder textarea.breakdance-form-field__input{min-height:140px;resize:vertical}
.bde-form-builder select.breakdance-form-field__input{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='1'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:18px;padding-right:40px}
.bde-form-builder .breakdance-form-checkbox,.bde-form-builder .breakdance-form-radio{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;color:var(--grau)}
.bde-form-builder .breakdance-form-checkbox a,.bde-form-builder .breakdance-form-radio a{color:var(--tinte);text-decoration:underline;text-underline-offset:.18em}
.bde-form-builder .breakdance-form-button__submit{display:inline-flex;align-items:center;gap:12px;min-height:50px;padding:0 26px;border-radius:999px;border:1px solid var(--tinte);background:var(--tinte);color:var(--papier);font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background .4s var(--ease),color .4s var(--ease)}
.bde-form-builder .breakdance-form-button__submit:hover{background:var(--papier);color:var(--tinte)}
.bde-form-builder .breakdance-form-file-upload__button{border-radius:999px;border:1px solid var(--tinte);background:transparent;color:var(--tinte);padding:10px 20px;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
@media (min-width:768px){
 .bde-form-builder-69-133 .breakdance-form > .breakdance-form-field:nth-child(-n+6){grid-column:span 4}
}

/* Rechtstexte */
.rechtstext{max-width:72ch;display:grid;gap:14px}
.rechtstext h2{font-size:clamp(1.3rem,2.2vw,1.9rem);margin-top:40px;letter-spacing:-.03em}
.rechtstext h2:first-child{margin-top:0}
.rechtstext p{font-size:1.02rem;line-height:1.6;color:var(--tinte)}
.rechtstext ul{display:grid;gap:8px;padding-left:20px;list-style:disc;color:var(--tinte);font-size:1.02rem;line-height:1.6}

/* Menue schliesst weich: Sichtbarkeit erst nach der Bewegung wegnehmen */
.ebene{transition:clip-path .8s var(--ease),visibility 0s linear .8s}
.ebene.offen{transition:clip-path .8s var(--ease),visibility 0s linear 0s}
.ebene .ebene-menue a{transition:transform .7s var(--ease),color .3s}
.ebene:not(.offen) .ebene-menue a{transform:translateY(110%);transition-delay:0s}
.ebene:not(.offen) .ebene-info{opacity:0;transition:opacity .35s var(--ease)}
.ebene.offen .ebene-info{opacity:1;transition:opacity .6s var(--ease) .25s}

/* Knoepfe: Flaeche kommt aus der Richtung der Maus */
.knopf::before{transform:scaleY(0);transform-origin:var(--von,bottom);transition:transform .5s var(--ease)}
.knopf:hover::before{transform:scaleY(1)}
/* Im Menue und im Fuss keine Unterstreichung auf Knoepfen */
.ebene a.knopf:hover,.ebene-info a.knopf:hover,.fuss a.knopf:hover,.kontakt a.knopf:hover,.rechtstext a.knopf:hover{text-decoration:none}
.breakdance-form-button__submit{position:relative;overflow:hidden;z-index:0}

/* Seitenkopf: links Preline, Ueberschrift, Text und Knoepfe — rechts das Bild ueber die ganze Hoehe */
@media (max-width:900px){
}

/* Kontaktseite */
.kontakt-tel-hell{display:inline-block;margin-top:6vh;font-family:var(--display);font-size:clamp(2.2rem,5.6vw,5rem);line-height:1;letter-spacing:-.04em;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.12em}
.kontakt-raster-hell{border-top:1px solid var(--linie);padding-top:40px;margin-top:24px}
.kontakt-raster-hell .mono{color:var(--grau)}
.kontakt-raster-hell a{text-decoration:underline;text-underline-offset:.18em}
.formular{margin-top:8px}

/* Formulare */
.bde-form-builder .breakdance-form{display:grid;grid-template-columns:repeat(12,1fr);gap:26px 32px}
.bde-form-builder .breakdance-form-field{grid-column:span 12;min-width:0}
.bde-form-builder .breakdance-form-field__label{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grau);margin-bottom:10px}
.bde-form-builder .breakdance-form-field__required{color:var(--tinte)}
.bde-form-builder .breakdance-form-field__input{width:100%;background:transparent;border:0;border-bottom:1px solid var(--linie);border-radius:0;padding:10px 0;font-family:var(--text);font-size:1.05rem;color:var(--tinte);transition:border-color .3s var(--ease)}
.bde-form-builder .breakdance-form-field__input:focus{outline:none;border-bottom-color:var(--tinte)}
.bde-form-builder textarea.breakdance-form-field__input{min-height:140px;resize:vertical}
.bde-form-builder select.breakdance-form-field__input{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='1'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:18px;padding-right:40px}
.bde-form-builder .breakdance-form-checkbox,.bde-form-builder .breakdance-form-radio{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;color:var(--grau)}
.bde-form-builder .breakdance-form-checkbox a,.bde-form-builder .breakdance-form-radio a{color:var(--tinte);text-decoration:underline;text-underline-offset:.18em}
.bde-form-builder .breakdance-form-button__submit{display:inline-flex;align-items:center;gap:12px;min-height:50px;padding:0 26px;border-radius:999px;border:1px solid var(--tinte);background:var(--tinte);color:var(--papier);font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background .4s var(--ease),color .4s var(--ease)}
.bde-form-builder .breakdance-form-button__submit:hover{background:var(--papier);color:var(--tinte)}
.bde-form-builder .breakdance-form-file-upload__button{border-radius:999px;border:1px solid var(--tinte);background:transparent;color:var(--tinte);padding:10px 20px;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
@media (min-width:768px){
 .bde-form-builder-69-133 .breakdance-form > .breakdance-form-field:nth-child(-n+6){grid-column:span 4}
}

/* Rechtstexte */
.rechtstext{max-width:72ch;display:grid;gap:14px}
.rechtstext h2{font-size:clamp(1.3rem,2.2vw,1.9rem);margin-top:40px;letter-spacing:-.03em}
.rechtstext h2:first-child{margin-top:0}
.rechtstext p{font-size:1.02rem;line-height:1.6;color:var(--tinte)}
.rechtstext ul{display:grid;gap:8px;padding-left:20px;list-style:disc;color:var(--tinte);font-size:1.02rem;line-height:1.6}

/* Menue schliesst weich: Sichtbarkeit erst nach der Bewegung wegnehmen */
.ebene{transition:clip-path .8s var(--ease),visibility 0s linear .8s}
.ebene.offen{transition:clip-path .8s var(--ease),visibility 0s linear 0s}
.ebene .ebene-menue a{transition:transform .7s var(--ease),color .3s}
.ebene:not(.offen) .ebene-menue a{transform:translateY(110%);transition-delay:0s}
.ebene:not(.offen) .ebene-info{opacity:0;transition:opacity .35s var(--ease)}
.ebene.offen .ebene-info{opacity:1;transition:opacity .6s var(--ease) .25s}

/* Knoepfe: Flaeche kommt aus der Richtung der Maus */
.knopf::before{transform:scaleY(0);transform-origin:var(--von,bottom);transition:transform .5s var(--ease)}
.knopf:hover::before{transform:scaleY(1)}
/* Im Menue und im Fuss keine Unterstreichung auf Knoepfen */
.ebene a.knopf:hover,.ebene-info a.knopf:hover,.fuss a.knopf:hover,.kontakt a.knopf:hover,.rechtstext a.knopf:hover{text-decoration:none}
.breakdance-form-button__submit{position:relative;overflow:hidden;z-index:0}

/* Seitenkopf: Aufbau wie die Startseite — Ueberschrift, darunter Text und Knoepfe links, Bild rechts genauso hoch */
@media (max-width:900px){
}


/* Bilder nie verzerren */
img{object-fit:cover}
.marke img,.fuss-siegel img{object-fit:contain}

/* Ladelinie im Vorhang */
.vorhang::after{content:'';position:absolute;left:0;top:0;height:2px;width:0;background:var(--papier);opacity:.9}
.vorhang.an::after{animation:mayerLaden 1.1s var(--ease) forwards}
@keyframes mayerLaden{0%{width:0}55%{width:68%}100%{width:100%}}
.vorhang.an.weg::after{opacity:0;transition:opacity .25s}

/* Bildmarke groesser, Schriftzug etwas kleiner damit die Kopfzeile ruhig bleibt */
.marke img{width:72px}
.marke{gap:12px}
.marke span{font-size:1.28rem;letter-spacing:-.02em}
@media (max-width:900px){.marke img{width:58px}.marke span{font-size:1.05rem}}
@media (max-width:600px){.marke img{width:50px}.marke span{font-size:.98rem}}

/* Formularfelder im Fokus: graue Flaeche statt Rahmen */
.bde-form-builder .breakdance-form-field__input{padding:12px 14px;background:transparent;transition:background .25s var(--ease),border-color .25s var(--ease)}
.bde-form-builder .breakdance-form-field__input:hover{background:rgba(0,0,0,.03)}
.bde-form-builder .breakdance-form-field__input:focus,.bde-form-builder .breakdance-form-field__input:focus-visible{outline:none;box-shadow:none;background:rgba(0,0,0,.06);border-bottom-color:var(--tinte)}
.bde-form-builder .breakdance-form-field__input:-webkit-autofill{box-shadow:0 0 0 1000px rgba(0,0,0,.06) inset}

/* Fokus staerker: graue Flaeche, kein Rahmen */
.bde-form-builder .breakdance-form .breakdance-form-field__input:focus,
.bde-form-builder .breakdance-form input.breakdance-form-field__input:focus,
.bde-form-builder .breakdance-form select.breakdance-form-field__input:focus,
.bde-form-builder .breakdance-form textarea.breakdance-form-field__input:focus{background-color:rgba(0,0,0,.06);outline:none;box-shadow:none;border-color:transparent;border-bottom-color:var(--tinte)}
.bde-form-builder .breakdance-form .breakdance-form-field__input:focus-visible{outline:none}

/* Breakdance-Formularvariablen: Fokus als graue Flaeche ohne Rahmen */
:root{--bde-form-input-focused-background-color:rgba(0,0,0,.06);--bde-form-input-focused-border-color:transparent;--bde-form-input-background-color:transparent;--bde-form-input-border-color:transparent;--bde-form-input-placeholder-color:var(--grau)}

/* Einheitliche Elemente auf den Unterseiten */
.leistungen.ohne-bild{--bild:0px}
.leistungen.ohne-bild .gruppe-bild{display:none}
.leistungen.ohne-bild .gruppe.an h3{transform:none}
/* Formularknopf wie jeder andere Knopf: Flaeche faehrt aus der Mausrichtung ein */
.bde-form-builder .breakdance-form-button__submit{position:relative;isolation:isolate;overflow:hidden;background:var(--tinte);color:var(--papier);border:1px solid var(--tinte);transition:color .4s var(--ease)}
.bde-form-builder .breakdance-form-button__submit::before{content:'';position:absolute;inset:0;background:var(--papier);transform:scaleY(0);transform-origin:var(--von,bottom);transition:transform .5s var(--ease);z-index:-1}
.bde-form-builder .breakdance-form-button__submit:hover{background:var(--tinte);color:var(--tinte)}
.bde-form-builder .breakdance-form-button__submit:hover::before{transform:scaleY(1)}

/* Fussbereich mit Kontaktraster: auf jeder Seite gleich */
.fuss{padding-top:clamp(56px,6vw,90px)}
.fuss .fuss-raster{margin-top:0;padding-top:0;border-top:0;padding-bottom:clamp(48px,6vw,80px)}
.fuss .fuss-raster .mono{color:rgba(255,255,255,.6)}
.fuss .fuss-raster a{color:var(--papier)}
@media (max-width:900px){.fuss .fuss-raster{grid-template-columns:1fr 1fr;gap:32px}}
@media (max-width:520px){.fuss .fuss-raster{grid-template-columns:1fr}}
/* Der dunkle Abschluss der Seite geht ohne Absatz in den Fuss ueber */
.kontakt.abschnitt{padding-bottom:clamp(48px,6vw,80px)}

/* Knoepfe im Fussbereich wie auf jeder dunklen Flaeche */
.fuss .knopf{color:var(--papier);border-color:var(--papier)}
.fuss .knopf::before{background:var(--papier)}
.fuss .knopf:hover{color:var(--tinte)}
.fuss .knopf-voll{background:var(--papier);color:var(--tinte);border-color:var(--papier)}
.fuss .knopf-voll::before{background:var(--tinte)}
.fuss .knopf-voll:hover{color:var(--papier)}

/* Knoepfe im Fussraster: Farbe vor der Linkfarbe */
.fuss .fuss-raster a.knopf{color:var(--papier);border-color:var(--papier)}
.fuss .fuss-raster a.knopf:hover{color:var(--tinte)}
.fuss .fuss-raster a.knopf-voll{background:var(--papier);color:var(--tinte);border-color:var(--papier)}
.fuss .fuss-raster a.knopf-voll:hover{color:var(--papier)}
.fuss .fuss-raster a.knopf-voll::before{background:var(--tinte)}

/* Seitenkopf der Unterseiten: links Preline, Ueberschrift, Text und Knoepfe — rechts das Bild ueber die ganze Hoehe */
.seitenkopf{display:grid;grid-template-columns:minmax(0,1fr) calc(50vw - var(--rand));grid-template-rows:auto auto auto auto auto;column-gap:clamp(28px,4vw,64px);row-gap:0;align-items:stretch}
.seitenkopf > .kopfzeile{grid-column:1;grid-row:1;margin-bottom:clamp(24px,3vw,40px)}
.seitenkopf h1{font-size:clamp(2.4rem,5.4vw,5.2rem);line-height:.98;letter-spacing:-.045em}
.seitenkopf > .seitenkopf-lead{grid-column:1;grid-row:2;align-self:start;max-width:52ch;font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:1.5;color:var(--grau)}
.seitenkopf > .held-knoepfe{grid-column:1;grid-row:3;align-self:start;margin-top:26px}
.seitenkopf > .kontakt-tel-hell{grid-column:1;grid-row:4;justify-self:start;align-self:start;margin-top:26px}
img.seitenkopf-bild,.seitenkopf-bild{grid-column:2;grid-row:1 / span 5;margin-right:calc(-1 * var(--rand));width:100%;height:0;min-height:100%;object-fit:cover;aspect-ratio:auto;align-self:stretch;display:block}
@media (max-width:900px){
 .seitenkopf{grid-template-columns:minmax(0,1fr)}
 .seitenkopf > .kopfzeile{grid-column:1;grid-row:1;margin-bottom:24px}
 img.seitenkopf-bild,.seitenkopf-bild{grid-column:1;grid-row:2;width:calc(100% + 2 * var(--rand));max-width:none;margin:0 calc(-1 * var(--rand)) 26px calc(-1 * var(--rand));aspect-ratio:16 / 10;height:auto;min-height:0}
 .seitenkopf > .seitenkopf-lead{grid-column:1;grid-row:3}
 .seitenkopf > .held-knoepfe{grid-column:1;grid-row:4}
 .seitenkopf > .kontakt-tel-hell{grid-column:1;grid-row:5}
}

/* Mauskreis und Datei-Knopf */
body.hat-zeiger input,body.hat-zeiger textarea,body.hat-zeiger select,body.hat-zeiger .breakdance-form-file-upload{cursor:none}
.bde-form-builder .breakdance-form-file-upload__button{position:relative;isolation:isolate;overflow:hidden;background:transparent;color:var(--tinte);border:1px solid var(--tinte);transition:color .4s var(--ease)}
.bde-form-builder .breakdance-form-file-upload__button::before{content:'';position:absolute;inset:0;background:var(--tinte);transform:scaleY(0);transform-origin:var(--von,bottom);transition:transform .5s var(--ease);z-index:-1}
.bde-form-builder .breakdance-form-file-upload:hover .breakdance-form-file-upload__button{color:var(--papier)}
.bde-form-builder .breakdance-form-file-upload:hover .breakdance-form-file-upload__button::before{transform:scaleY(1)}

/* Menue-Ebene: Beschriftungen grau wie die Nummern, Zeilen ohne Leerraum */
.ebene-info .mono{color:rgba(255,255,255,.5);font-size:.72rem;letter-spacing:.1em}
.ebene-info a,.ebene-info > div > div{display:block}
.ebene-info a{line-height:1.5}
.ebene-info a.knopf{display:inline-flex;line-height:1}

/* Trennpunkt in der Kopfzeile und rechte Spalte der Menue-Ebene */
.kopf-mitte .punkt{display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin:0 10px;vertical-align:middle}
.ebene-info{justify-items:end;text-align:left}
.ebene-info > div{width:min(30ch,100%);text-align:left}
.ebene-info a.knopf{justify-self:end}
@media (max-width:900px){.ebene-info{justify-items:start;text-align:left}.ebene-info a.knopf{justify-self:start}}

/* Kopfzeile: eine Schriftstaerke, eine Groesse, alles in Versalien */
.kopf-mitte,.kopf-rechts .tel,.menue-knopf .wort{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
/* Menuepunkte: Unterlaengen nicht abschneiden */
.ebene-menue a{padding-bottom:.14em}
.ebene-menue li{overflow:hidden}

/* Bild im Kartenstapel bleibt oben am Bildschirmrand stehen */
.karte-bild{--t:0px;top:0;height:96vh}
@media (max-width:600px){.karte-bild{--t:0px;top:0;height:auto}}

/* Titelbild: Parallax ohne Stopp — das Bild ist hoeher als sein Rahmen und wandert darin */
.held-bild img{height:140%;top:-20%;bottom:auto}


/* ---- Glossar (23.09.2026) ------------------------------------------------ */
.glossar-az { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 clamp(40px, 5vw, 72px); }
.glossar-az a { font-family: var(--mono); font-size: .78rem; letter-spacing: .08em; text-decoration: none; color: var(--tinte); width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--linie); transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.glossar-az a:hover, .glossar-az a:focus-visible { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
.glossar-gruppe { display: grid; grid-template-columns: 1fr 3fr; gap: clamp(24px, 4vw, 56px); align-items: start; border-top: 1px solid var(--linie); padding: clamp(32px, 4vw, 56px) 0; scroll-margin-top: 12px; }
.glossar-buchstabe { font-family: var(--display); font-weight: 500; letter-spacing: -.03em; font-size: clamp(3rem, 7vw, 6rem); line-height: .85; margin: 0; position: sticky; top: 112px; }
.glossar-eintrag { border-bottom: 1px solid var(--linie); padding-bottom: clamp(20px, 2.4vw, 30px); margin-bottom: clamp(20px, 2.4vw, 30px); scroll-margin-top: 16px; }
.glossar-eintrag:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.glossar-wort { font-family: var(--display); font-weight: 500; letter-spacing: -.02em; font-size: clamp(1.2rem, 1.8vw, 1.6rem); line-height: 1.15; margin: 0 0 10px; }
.glossar-eintrag p { margin: 0; color: var(--grau); max-width: 68ch; }
.glossar-eintrag p + p { margin-top: 10px; }
.glossar-siehe { font-family: var(--mono); font-size: .8rem; letter-spacing: .04em; }
@media (max-width: 900px) {
  .glossar-gruppe { grid-template-columns: 1fr; gap: 20px; }
  .glossar-buchstabe { position: static; font-size: clamp(2.4rem, 12vw, 3.4rem); }
}
@media (max-width: 600px) {
  .glossar-az a { width: 36px; height: 36px; }
}
/* Haeufige Fragen als eigene Seite: Kategorien untereinander */
.fragen-gruppe + .fragen-gruppe { border-top: 1px solid var(--linie); padding-top: clamp(40px, 5vw, 72px); margin-top: clamp(40px, 5vw, 72px); }
.fragen-hinweis { color: var(--grau); font-size: .95rem; max-width: 72ch; }
/* Kategorie-Ueberschriften der Fragen-Seite duerfen umbrechen (sonst Ueberbreite am Handy) */
.fragen-gruppe .fragen h2 { white-space: normal; text-wrap: balance; }

/* Kopfzeile: Fon und Menue gleiche Staerke */
.menue-knopf { font-weight: 500; letter-spacing: .1em; }

/* Spalte Erreichen: jede Zeile untereinander, ohne Leerzeilen */
.fuss-liste > a, .fuss-liste > div { display: block; }

.fuss-liste .nb { white-space: nowrap; }

/* Fusszeile und Kontaktraster: Spalten so breit wie ihr Inhalt, der uebrige Platz
   gleichmaessig in die Zwischenraeume (optisch gleiche Abstaende statt gleicher Spalten) */
@media (min-width: 901px) {
  .kontakt-raster { grid-template-columns: repeat(4, auto); justify-content: space-between; }
}

/* Fusszeile: Spaltenueberschrift steht links, laeuft von unten nach oben und endet oben
   auf Hoehe der ersten Inhaltszeile; der Inhalt steht rechts daneben. */
@media (min-width: 901px) {
  .fuss-raster > *:not(.fuss-knoepfe) { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: start; }
  .fuss-raster > *:not(.fuss-knoepfe) > :first-child { writing-mode: vertical-rl; transform: rotate(180deg); display: block; margin: 0; }
  .fuss-raster > *:not(.fuss-knoepfe) > :first-child .mono { display: inline; margin: 0; }
  .fuss-raster .fuss-inhalt > a, .fuss-raster .fuss-inhalt > div { display: block; }
  .fuss-raster > .fuss-knoepfe { display: block; }
  .fuss-raster > .fuss-knoepfe .kontakt-knoepfe { margin-top: 0; }
}
.fuss-siegel a:hover { text-decoration: underline; }

/* Bildmarke des Verbands: weiß, monochrom, ohne Schriftzug */
.fuss-siegel img { width: 40px; height: auto; filter: none; opacity: .72; }

/* Schlusszeile: Rechtslinks brauchen ihre eigene Breite, sonst bricht Datenschutz um */
@media (min-width: 901px) {
  .fuss-zeile { grid-template-columns: auto 1fr auto; }
}

/* Kopfbereich Startseite: Fließtext wie auf den Unterseiten (Farbe, Breite),
   Knöpfe sitzen auf Höhe des Bildfußes, Bild mit Mindesthöhe. 01.10.2026 */
.held-lead { max-width: 52ch; line-height: 1.5; color: var(--tinte); }
@media (min-width: 901px) {
  .held-unten > *:not(.held-bild) { display: flex; flex-direction: column; align-items: flex-start; }
  .held-unten .held-knoepfe { margin-top: auto; padding-top: 24px; }
  .held-bild { min-height: 320px; }
}

/* Einleitungstext der Seitenkoepfe in derselben Farbe wie auf der Startseite (Helmut, 01.10.2026) */
.seitenkopf > .seitenkopf-lead { color: var(--tinte); }

/* Einleitungstexte nutzen zwei Drittel der Spaltenbreite (Helmut, 01.10.2026) */
@media (min-width: 901px) {
  .held-lead, .seitenkopf > .seitenkopf-lead { max-width: 75%; }
}

/* Seitenkopfbild randabfallend: width:100% pinnt die Breite auf die Rasterspalte,
   der negative Aussenabstand allein zieht nur die Margin-Box. (Helmut, 01.10.2026) */
@media (min-width: 901px) {
  img.seitenkopf-bild, .seitenkopf-bild { width: calc(100% + var(--rand)); max-width: none; }
}

/* Silbentrennung auf der ganzen Website, aber nur wo sie sinnvoll ist:
   erst ab zehn Buchstaben, mindestens vier Zeichen vor und nach dem Trennstrich.
   Ueberschriften, Marken und Knoepfe werden nie getrennt. (Helmut, 01.10.2026) */
p, li, blockquote, .frage-antwort, .bereich p, .held-lead, .seitenkopf-lead {
  hyphens: manual; -webkit-hyphens: manual;
  hyphenate-limit-chars: 10 5 4; -webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 4;
}
.display, h1, h2, h3, h4, .mono, .knopf, .zahl, .glossar-wort, .frage summary {
  hyphens: manual; -webkit-hyphens: manual;
}

/* Seitenkopf: H1 faehrt zeilenweise ein wie auf der Startseite (Helmut, 01.10.2026) */
.seitenkopf h1 .z { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.seitenkopf h1 .z > * { display: block; transform: translateY(110%); animation: hoch 1.3s var(--ease) forwards; }


@media (prefers-reduced-motion: reduce) {
  .seitenkopf h1 .z > * { transform: none; animation: none; }
}

/* Ueberschriften duerfen ihre Spalte nicht aufweiten: als Rasterkind waechst ein
   Element sonst auf die Breite seines laengsten nicht umbrechenden Wortes und
   schiebt sich ueber das Bild daneben. (Helmut, 01.10.2026) */
.seitenkopf h1, .kopfzeile h1, .held h1, .kontakt h2.zweizeilig { min-width: 0; }

/* Alle Ueberschriften ausgewogen umbrechen (Helmut, 01.10.2026).
   Bei den festgelegten Zeilen (.zweizeilig, nowrap) bleibt es wirkungslos. */
h1, h2, h3, h4, .display, .frage summary, .glossar-wort, .zahl + p { text-wrap: balance; }

/* Seitenkopf der Unterseiten: mehr Luft zwischen Fließtext und Knöpfen,
   Bild mit eigener Mindesthoehe. Gilt nicht fuer die Startseite. (Helmut, 01.10.2026) */
@media (min-width: 901px) {
  .seitenkopf > .held-knoepfe { margin-top: 52px; }
}

/* Seitenkopf der Unterseiten im Aufbau der Startseite: gleiche Anordnung,
   aber die H1 so gross wie eine Abschnittsueberschrift. (Helmut, 01.10.2026) */
.held-unter h1 { font-size: clamp(2.6rem, 7vw, 7.5rem); }

/* Formularraster darf nicht breiter werden als sein Platz: 1fr heisst minmax(auto,1fr),
   dadurch wuchsen die Spalten am Handy auf den Inhalt und das Formular stand ueber den
   Bildschirmrand hinaus. (01.10.2026) */
.bde-form-builder .breakdance-form { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.bde-form-builder .breakdance-form-file-upload { flex-wrap: wrap; max-width: 100%; }
.bde-form-builder .breakdance-form-file-upload__text { min-width: 0; overflow-wrap: anywhere; }

/* Felder ueber die volle Breite: die Grundregel verliert gegen eine spaetere Regel
   von Breakdance, deshalb mit hoeherer Gewichtung. (01.10.2026) */
.bde-form-builder .breakdance-form > .breakdance-form-field { grid-column: span 12; min-width: 0; }

/* Jeder Knopf ohne eigenes Icon bekommt den Pfeil — wie die uebrigen Knoepfe.
   Die Maske nimmt die Textfarbe an, also auch beim Umschlagen im Mouseover.
   (Helmut, 01.10.2026) */
:root { --pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m0.75 12 22.5 0'/%3E%3Cpath d='M12.75 22.5 23.25 12 12.75 1.5'/%3E%3C/svg%3E"); }
.knopf:not(:has(.icon))::after {
  content: ""; width: 16px; height: 16px; flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--pfeil) center / contain no-repeat;
  mask: var(--pfeil) center / contain no-repeat;
}
/* Anrisstexte in Abschnitten: halbe Breite */
@media (min-width: 901px) {
  .abschnitt > .seitenkopf-lead { max-width: 50%; }
}

/* Absenden-Knopf bekommt denselben Pfeil wie die uebrigen Knoepfe */
.bde-form-builder .breakdance-form-button__submit:not(:has(.icon))::after {
  content: ""; width: 16px; height: 16px; flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--pfeil) center / contain no-repeat;
  mask: var(--pfeil) center / contain no-repeat;
}

/* Abschluss: Ueberschrift so gross wie eine Abschnittsueberschrift, eine Zeile,
   die Telefonnummer darunter. (Helmut, 01.10.2026) */
.kontakt h2 { font-size: clamp(2.6rem, 7vw, 7.5rem); }

/* Inhaltsbilder ebenfalls randabfallend (Helmut, 01.10.2026) */
@media (min-width: 801px) {
  .versicherung-bild { margin-right: calc(-1 * var(--rand)); width: calc(100% + var(--rand)); max-width: none; }
}
@media (max-width: 800px) {
  .versicherung-bild { margin-left: calc(-1 * var(--rand)); margin-right: calc(-1 * var(--rand)); width: calc(100% + 2 * var(--rand)); max-width: none; }
}

/* H1 der Unterseiten bricht selbst um und trennt dabei, statt in zwei starre
   Zeilen gezwungen zu werden — kein harter Trennstrich im Text. (Helmut, 01.10.2026) */
.held-unter h1, .held-unter h1 .z > * {
  white-space: normal;
  text-wrap: balance;
  hyphens: manual; -webkit-hyphens: manual;
  hyphenate-limit-chars: 10 5 4; -webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 4;
}

/* Uebersichten schliessen oben und unten ab — sonst haengen die Trennlinien
   zwischen den Spalten in der Luft. (Helmut, 01.10.2026) */
.zahlen-band { border-top: 1px solid var(--linie); }
.laufband + .zahlen-band, .laufband + * + .zahlen-band { margin-top: -1px; }
.glossar { border-bottom: 1px solid var(--linie); }
.leistungen { border-bottom: 1px solid var(--linie); }

/* Fragen: linke Spalte oben buendig mit der ersten Frage (Helmut, 01.10.2026) */
.fragen > div:first-child { padding-top: 0; }
.fragen > div:first-child > :first-child { margin-top: 0; }
.fragen > div:first-child h2 { margin-top: -.14em; }
@media (max-width: 1100px) { .fragen > div:first-child { padding-top: 0; } }

/* Bild in voller Hoehe, nichts beschnitten, kein Versatz (Helmut, 01.10.2026) */
.versicherung-bild.bild-voll { position: static; min-height: 0; aspect-ratio: auto; clip-path: none; }
.versicherung-bild.bild-voll img { position: static; width: 100%; height: auto; object-fit: contain; display: block; }

/* Das grosse Anfuehrungszeichen steht jetzt weiter unten neu. */

/* Fragen-Ueberschrift darf umbrechen: das alte nowrap war fuer die kurze Zeile
   „Gut zu wissen.“ gedacht und sprengt bei laengeren Ueberschriften am Handy die
   Breite. (01.10.2026) */
@media (max-width: 1100px) { .fragen h2 { white-space: normal; text-wrap: balance; } }



/* Leistungen auf der Unterseite: gestapelte Buehne (Helmut, 02.10.2026).
   Die vier Bereiche liegen uebereinander, Bild immer links, Text immer rechts.
   Beim Weiterscrollen faehrt das neue Bild von links ueber das alte, und im
   gleichen Takt schiebt sich die neue weisse Textflaeche aus der Mitte nach
   rechts hervor — so, als kaeme sie hinter dem Bild hervor. Danach fadeln
   Ueberschrift und Fliesstext ein. Die grosse Ueberschrift steht weiss oben
   links ueber den Bildern und wird nie ueberdeckt.
   Gesteuert ueber --p (0 bis 1) je Block aus app.js. */
.leistungen-neu {
  --bloecke: 4;
  --kopf-raum: clamp(104px, 12vh, 150px);
  --zeile-oben: clamp(196px, 23vh, 280px);
  margin: 0 calc(-1 * var(--rand));
  position: relative; display: block;
  height: calc(var(--bloecke) * 100svh);
}
.leistungen-neu > .kopfzeile {
  position: sticky; top: 0; z-index: 30; pointer-events: none;
  height: 100svh; margin-bottom: 0;
  padding: var(--zeile-oben) var(--rand) 0;
}
.leistungen-neu > .kopfzeile h2 {
  /* Groesse wie die uebrigen Abschnitts-Ueberschriften (h2.display),
     darum hier keine eigene Angabe. (Helmut, 02.10.2026) */
  margin: 0; color: #fff; width: 50%;
}
.leistung {
  position: sticky; top: 0; height: 100svh;
  display: grid; grid-template-columns: 1fr 1fr;
  overflow: hidden;
}
.leistung { margin-top: -100svh; }
/* Weicher An- und Ablauf: app.js setzt --versatz, solange der Abschnitt
   oben hereinkommt oder unten wieder hereinfaehrt. */
.leistungen-neu > .kopfzeile,
.leistung-nav,
.leistung { transform: translateY(var(--versatz, 0px)); }
.leistung-bild {
  position: relative; isolation: isolate;
  display: flex; align-items: center; justify-content: flex-start;
  padding: clamp(28px, 4vw, 72px) var(--rand);
  transform: translateX(calc((var(--p, 1) - 1) * 100%));
}
.leistung-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
/* Die Bilder sind quer (1536 x 1024), die Spalte ist hoch — es passt also nur
   gut die Haelfte hinein. Mittig (der Vorgabewert) schneidet bei diesen Motiven
   das Wichtige an, darum je Bild ein eigener Schwerpunkt. (Helmut, 03.10.2026)
   Angesprochen ueber den Dateinamen, nicht ueber die Position — die Leiste wird
   von app.js eingehaengt und wuerde nth-child verschieben. */
.leistung-bild img[src*="leistung-kaufmaennisch"] { object-position: 58% 50%; }
.leistung-bild img[src*="leistung-abrechnung"]   { object-position: 62% 50%; }
.leistung-bild img[src*="leistung-technik"]      { object-position: 42% 50%; }
.leistung-bild img[src*="leistung-recht"]        { object-position: 45% 50%; }
.leistung-bild::after { content: ""; position: absolute; inset: 0; background: rgba(10,10,10,.42); z-index: -1; }
/* Nummernleiste oben in der Textspalte: 01 02 03 04 klein und gefuellt,
   der laufende Bereich einfach groesser, ebenfalls gefuellt. (Helmut, 03.10.2026) */
.leistung-nav {
  position: sticky; top: 0; height: 100svh; margin-top: -100svh;
  z-index: 31; pointer-events: none;
  display: grid; grid-template-columns: 1fr 1fr;
}
.leistung-nav-liste {
  grid-column: 2; align-self: start;
  /* Abstand nach oben als Aussenabstand, nicht als Innenabstand: bei
     box-sizing: border-box zaehlt der Innenabstand zur min-height, die feste
     Zeilenhoehe waere sonst wirkungslos. (Helmut, 03.10.2026) */
  margin-top: var(--kopf-raum);
  padding: 0 clamp(28px, 4vw, 72px);
  /* Feste Zeilenhoehe: Waehrend des Wechsels schrumpft die alte Zahl und die
     neue waechst — ohne feste Hoehe faellt die Zeile dazwischen zusammen und
     die kleinen Zahlen huepfen nach oben. (Helmut, 03.10.2026) */
  display: flex; align-items: center; gap: clamp(10px, 1vw, 18px);
  min-height: clamp(2rem, 3.2vw, 2.9rem);
  font-family: var(--display); font-variant-numeric: tabular-nums;
  line-height: 1; letter-spacing: -.02em;
}
.leistung-nav-liste > span {
  color: var(--tinte); font-weight: 400; font-size: 1rem;
  transition: font-size .45s var(--ease), opacity .45s var(--ease);
  opacity: .45;
}
.leistung-nav-liste > span.laufend {
  font-size: clamp(2rem, 3.2vw, 2.9rem); opacity: 1;
}

/* Grosse Nummer im Bild vorlaeufig ausgeblendet (Helmut, 02.10.2026) — zum Zurueckholen
   genuegt es, display:none zu entfernen. */
.leistung-nr {
  display: none;
  font-family: var(--display); font-weight: 300; line-height: .85; letter-spacing: -.06em;
  font-size: clamp(7rem, 38vh, 24rem);
  color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.6);
}
/* Sauberer Umriss: -webkit-text-stroke zeichnet bei Geist auch die innen
   liegenden Konturkanten mit — bei der 3 ragt dadurch ein Schnoerkel heraus.
   Mit feMorphology wird stattdessen die fertige Silhouette erodiert.
   Die Klasse setzt app.js, sobald der Filter im Dokument steht. */
.umriss-filter .leistung-nr {
  color: #fff; -webkit-text-stroke: 0;
  filter: url(#mayer-umriss); opacity: .62;
}
.leistung-text {
  background: var(--papier);
  clip-path: inset(0 calc((1 - var(--p, 1)) * 100%) 0 0);
  display: grid; gap: clamp(18px, 1.8vw, 28px); align-content: start;
  padding: var(--zeile-oben) clamp(28px, 4vw, 72px) clamp(28px, 4vw, 72px);
}
.leistung-text h3 {
  margin: 0; font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.6rem); line-height: 1.12; color: var(--tinte);
  transform: translateX(-22px); opacity: 0;
  transition: transform .8s var(--ease), opacity .6s var(--ease);
}
.leistung-text p {
  margin: 0; max-width: 46ch;
  transform: translateX(-22px); opacity: 0;
  transition: transform .8s var(--ease) .1s, opacity .6s var(--ease) .1s;
}
.leistung-text p + p { transition-delay: .18s; }
.leistung.an .leistung-text h3,
.leistung.an .leistung-text p { transform: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .leistungen-neu { height: auto; }
  .leistungen-neu > .kopfzeile { position: static; height: auto; margin-bottom: 28px; padding: 0 var(--rand); pointer-events: auto; }
  .leistungen-neu > .kopfzeile h2 { color: var(--tinte); width: auto; max-width: none; }
  .leistung { position: static; height: auto; margin-top: 0; }
  .leistung-nav { display: none; }
  .leistungen-neu > .kopfzeile, .leistung { transform: none; }
  .leistung-bild { transform: none; padding: clamp(28px, 4vw, 72px) var(--rand); }
  .leistung-text { clip-path: none; align-content: center; padding: clamp(28px, 4vw, 72px); }
  .leistung-text h3, .leistung-text p { transform: none; opacity: 1; transition: none; }
}
@media (max-width: 900px) {
  .leistungen-neu { height: auto; }
  .leistungen-neu > .kopfzeile { position: static; height: auto; margin-bottom: 28px; padding: 0 var(--rand); pointer-events: auto; }
  .leistungen-neu > .kopfzeile h2 { color: var(--tinte); width: auto; max-width: none; }
  .leistung { position: static; height: auto; min-height: 0; margin-top: 0; grid-template-columns: 1fr; }
  .leistung-nav { display: none; }
  .leistungen-neu > .kopfzeile, .leistung { transform: none; }
  .leistung + .leistung { border-top: 1px solid var(--linie); }
  .leistung-bild { min-height: 220px; transform: none; padding: clamp(28px, 4vw, 72px) var(--rand); }
  .leistung-text { clip-path: none; align-content: center; padding: clamp(28px, 4vw, 72px); }
  .leistung-text h3, .leistung-text p { transform: none; opacity: 1; }
  .leistung-nr { font-size: clamp(5rem, 22vw, 9rem); }
}

/* Knopf in einer Ablaufkarte gehoert unter den Fliesstext, nicht neben ihn:
   die Karte ist zweispaltig (Nummer | Inhalt), der Knopf landete sonst in der
   Nummernspalte. (Helmut, 05.10.2026) */
.karte > a.knopf { grid-column: 2; justify-self: start; }
/* Damit der Knopf direkt unter dem Fliesstext sitzt und nicht am Kartenfuss:
   die dehnbare Zeile wandert hinter den Knopf. */
.karte:has(> a.knopf):not(.karte-schluss) { grid-template-rows: auto auto 1fr; }
@media (max-width: 900px) { .karte > a.knopf { grid-column: 1; } }

/* Kacheln: Titel immer in einer Zeile (Helmut, 02.10.2026) */
.bereich h3 { white-space: nowrap; }
















/* ---- 05.10.2026 ---------------------------------------------------------- */

/* Das grosse Zier-Anfuehrungszeichen ist wieder entfallen — im Text stehen
   jetzt die normalen deutschen Gaensefuesschen „…“. (Helmut, 05.10.2026) */

/* Haeufige Fragen: Auf den Unterseiten besteht die Zusammenfassung nur aus Text,
   auf der Startseite steckt dort zusaetzlich das Plus-Zeichen. Damit beide gleich
   aussehen, bekommen die uebrigen ein Plus per Maske. (Helmut, 05.10.2026) */
:root { --plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M12 .75 12 23.25'/%3E%3Cpath d='M.75 12 23.25 12'/%3E%3C/svg%3E"); }
.frage > summary:not(:has(.icon))::after {
  content: ""; width: 22px; height: 22px; flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--plus) center / contain no-repeat;
  mask: var(--plus) center / contain no-repeat;
  transition: transform .5s var(--ease);
}
.frage[open] > summary:not(:has(.icon))::after { transform: rotate(45deg); }
.frage.schliesst > summary:not(:has(.icon))::after { transform: none; }

/* H1 der Unterseiten beginnt auf derselben Hoehe wie auf der Startseite.
   Der Kopfbereich verteilt freien Platz ueber 2fr nach oben; weil die Unterseiten
   kuerzere Ueberschriften haben, rutschte die Zeile dort nach unten. Jetzt oben
   feste Zeilen. Gemessen: Oberkante der Versalien 110 px statt 195 px, Startseite
   109 px. (Helmut, 05.10.2026) */
@media (min-width: 901px) {
  /* Kein erzwungener Bildschirm: der Kopfbereich der Unterseiten ist nur so hoch
     wie sein Inhalt, damit Fliesstext und Bild nicht weit unter der Ueberschrift
     haengen. (Helmut, 05.10.2026) */
  .held.held-unter { grid-template-rows: auto auto auto auto; padding-top: 210px; min-height: 0; }
  /* Lange Ueberschriften laufen nicht mehr ueber die ganze Breite, sondern
     brechen ausgewogen um. (Helmut, 05.10.2026) */
  .held.held-unter h1 { max-width: 76%; text-wrap: balance; }
  .held.held-unter .held-unten { margin-top: clamp(40px, 5vh, 64px); }
}

/* Die Nummern sind anklickbar — die Leiste selbst laesst Klicks durch. */
.leistung-nav-liste > span { pointer-events: auto; cursor: pointer; }
.leistung-nav-liste > span:focus-visible { outline: 2px solid var(--tinte); outline-offset: 6px; }

/* Bild der Ablaufkarte etwas hoeher als die Karte, damit es beim Zudecken
   nach oben wandern kann. (Helmut, 05.10.2026) */
@media (min-width: 901px) { .karte-bild img { height: 116%; } }

/* Schlusszeile: Inhalt genauso weit unter der Linie wie bei den Karten 01-04
   (32 px Innenabstand statt senkrecht zentriert) und nur so hoch wie noetig.
   (Helmut, 05.10.2026) */
/* Nur die Ausrichtung aendern, NICHT die Hoehe: die Karten sind so berechnet,
   dass sie alle an derselben Stelle enden und damit gemeinsam nach oben
   wegwandern. Eine niedrigere Karte klebt laenger und bleibt zurueck. */
.karte.karte-schluss { align-items: start; }

/* ---- Formulare, 05.10.2026 (Helmut) ---------------------------------------
   Felder haben auch ohne Fokus eine leichte graue Flaeche, nicht erst beim
   Hineinklicken. Das Kaestchen bei Datenschutz war unsichtbar — es bekommt
   dieselbe Flaeche und dieselbe Unterlinie wie die uebrigen Felder. */
:root { --bde-form-input-background-color: rgba(0,0,0,.04); }
.bde-form-builder .breakdance-form-field__input { background: rgba(0,0,0,.04); }
.bde-form-builder .breakdance-form-field__input:hover { background: rgba(0,0,0,.055); }
.bde-form-builder .breakdance-form .breakdance-form-field__input:focus,
.bde-form-builder .breakdance-form input.breakdance-form-field__input:focus,
.bde-form-builder .breakdance-form select.breakdance-form-field__input:focus,
.bde-form-builder .breakdance-form textarea.breakdance-form-field__input:focus { background-color: rgba(0,0,0,.075); }

.bde-form-builder .breakdance-form-checkbox input[type="checkbox"],
.bde-form-builder .breakdance-form-radio input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 24px; height: 24px; flex: 0 0 auto; margin: 0;
  background: rgba(0,0,0,.04);
  border: 0; border-bottom: 1px solid var(--linie); border-radius: 0;
  cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.bde-form-builder .breakdance-form-radio input[type="radio"] { border-radius: 50%; border-bottom-color: var(--linie); }
.bde-form-builder .breakdance-form-checkbox input[type="checkbox"]:hover,
.bde-form-builder .breakdance-form-radio input[type="radio"]:hover { background: rgba(0,0,0,.075); }
.bde-form-builder .breakdance-form-checkbox input[type="checkbox"]:checked {
  background-color: var(--tinte); border-bottom-color: var(--tinte);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat;
  background-position: center; background-size: 15px;
}
.bde-form-builder .breakdance-form-radio input[type="radio"]:checked { background-color: var(--tinte); border-color: var(--tinte); box-shadow: inset 0 0 0 4px var(--papier); }
.bde-form-builder .breakdance-form-checkbox input:focus-visible,
.bde-form-builder .breakdance-form-radio input:focus-visible { outline: 2px solid var(--tinte); outline-offset: 2px; }
.bde-form-builder .breakdance-form-checkbox__text, .bde-form-builder .breakdance-form-radio__text { cursor: pointer; }

/* Systemzeiger auch ueber den Formularknoepfen aus — die eigene Regel der
   Formulare setzte cursor:pointer und war staerker als body.hat-zeiger button.
   (Helmut, 05.10.2026) */
body.hat-zeiger .bde-form-builder .breakdance-form-button__submit,
body.hat-zeiger .bde-form-builder .breakdance-form-file-upload__button,
body.hat-zeiger .bde-form-builder .breakdance-form-checkbox input,
body.hat-zeiger .bde-form-builder .breakdance-form-checkbox__text,
body.hat-zeiger .leistung-nav-liste > span { cursor: none; }

/* Abstand Gruppenlinie zur ersten Frage genauso gross wie der Abstand
   zwischen zwei Fragen (gemessen 85 px). (Helmut, 05.10.2026) */
.fragen-gruppe + .fragen-gruppe { padding-top: clamp(56px, 6vw, 84px); }

/* Inhaltsuebersicht der Fragenseite: ein Kasten je Gruppe, beim Ueberfahren
   schwarz gefuellt mit heller Schrift. (Helmut, 05.10.2026) */
.fragen-uebersicht { padding-top: 0; padding-bottom: 0; }
.fragen-uebersicht-liste {
  list-style: none; margin: 0 calc(-1 * var(--rand)); padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
}
.fragen-uebersicht-liste > li + li { border-left: 1px solid var(--linie); }
.fragen-uebersicht-liste a {
  display: grid; align-content: space-between; gap: clamp(12px, 2vh, 24px);
  min-height: 100%; text-decoration: none; color: var(--tinte);
  padding: clamp(28px, 3vw, 48px) clamp(18px, 1.6vw, 28px);
  transition: background .45s var(--ease), color .45s var(--ease);
}
.fragen-uebersicht-liste > li:first-child a { padding-left: var(--rand); }
.fragen-uebersicht-liste > li:last-child a { padding-right: var(--rand); }
.fragen-uebersicht-liste a:hover, .fragen-uebersicht-liste a:focus-visible { background: var(--tinte); color: var(--papier); outline: none; }
.fragen-uebersicht-liste .nr { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grau); }
.fragen-uebersicht-liste .wort { font-family: var(--display); font-size: clamp(1.3rem, 1.9vw, 2rem); line-height: 1.05; letter-spacing: -.03em; text-wrap: balance; }
.fragen-uebersicht-liste a:hover .nr, .fragen-uebersicht-liste a:focus-visible .nr { color: rgba(255,255,255,.65); }
@media (max-width: 900px) {
  .fragen-uebersicht-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fragen-uebersicht-liste > li { border-left: 1px solid var(--linie); border-top: 1px solid var(--linie); }
  .fragen-uebersicht-liste > li:nth-child(odd) { border-left: 0; }
  .fragen-uebersicht-liste > li:nth-child(-n+2) { border-top: 0; }
  .fragen-uebersicht-liste > li:first-child a, .fragen-uebersicht-liste > li:last-child a { padding-left: var(--rand); padding-right: var(--rand); }
  .fragen-uebersicht-liste > li:nth-child(odd) a { padding-left: var(--rand); }
  .fragen-uebersicht-liste > li:nth-child(even) a { padding-right: var(--rand); }
}

/* Klebepunkte der Karten auf ganze Pixel runden. Die Schritthoehe ergibt sich
   aus rem-Werten und war krumm (125,18 px) — dadurch lagen die Trennlinien auf
   halben Geraetepunkten und wirkten unterschiedlich dick. (Helmut, 05.10.2026) */
@supports (top: round(1px, 1px)) {
  .karte { top: round(var(--t), 1px); }
}

/* Impressum: eine Ueberschrift statt zwei. Keine Linie ueber dem Fliesstext,
   beide Spalten beginnen auf derselben Hoehe, und oben genug Luft unter der
   Kopfleiste, weil der eigene Kopfbereich entfallen ist. (Helmut, 05.10.2026) */
#impressum, #datenschutz { padding-top: 126px; }
#impressum .fragen-liste, #datenschutz .fragen-liste { border-top: 0; margin: 0; }
#impressum .fragen-liste > *, #datenschutz .fragen-liste > * { padding-left: 0; padding-right: 0; }
/* Eine Stufe kleiner als die H1 der Unterseiten: 64 px statt 98 px bei 1400 px
   Breite — dieselbe Stufe wie die Kacheltitel. (Helmut, 05.10.2026) */
#impressum h1, #datenschutz h1 { font-size: clamp(2rem, 4.6vw, 4.8rem); }
/* Steht eine Vorzeile ueber der Ueberschrift, gilt der normale Abstand der
   Seite (optisch rund 33 px bei 98 px Schrift). Die negative Regel weiter oben
   ist nur fuer Ueberschriften ohne Vorzeile gedacht. (Helmut, 05.10.2026) */
.fragen > div:first-child .mono { margin-bottom: 0; }
.fragen > div:first-child .mono + h1,
.fragen > div:first-child .mono + h2 { margin-top: .225em; }
/* Die linke Spalte bleibt beim Scrollen stehen. */
@media (min-width: 801px) {
  #impressum .fragen > div:first-child,
  #datenschutz .fragen > div:first-child { position: sticky; top: clamp(110px, 14vh, 170px); align-self: start; }
}
#datenschutz .fragen-liste > p, #datenschutz .fragen-liste > ul { max-width: 68ch; }
#datenschutz .fragen-liste > h2 { font-size: clamp(1.2rem, 1.6vw, 1.5rem); margin: 2.4em 0 .7em; }
#datenschutz .fragen-liste > h2:first-child { margin-top: 0; }

/* Optischer Randausgleich: Grosse Schrift hat mehr Vorbreite — bei 98 px
   beginnt die Tinte des D 9,0 px rechts vom Satzanfang, beim Fliesstext nur
   0,7 px. Ohne Ausgleich steht die Ueberschrift sichtbar weiter rechts als
   Vorzeile und Text darunter. (Helmut, 05.10.2026) */
h1.display, h2.display { text-indent: 0; }

/* Kleine Zeile steht bei den Rechtstexten unter der Ueberschrift und dem
   Einleitungstext, etwas kraeftiger. (Helmut, 05.10.2026) */
#impressum .fragen > div:first-child > .mono,
#datenschutz .fragen > div:first-child > .mono { margin-bottom: 0; font-weight: 600; color: var(--tinte); }
/* Impressum: die Zeile folgt direkt auf die Ueberschrift und braucht den
   Abstand selbst. Datenschutz: davor steht der Einleitungstext, dessen
   Aussenabstand reicht — beide landen bei 42 px. (Helmut, 05.10.2026) */
#impressum .fragen > div:first-child > .mono { margin-top: clamp(28px, 3vw, 44px); }
#datenschutz .fragen > div:first-child > .mono { margin-top: 0; }

/* Aufzaehlungen in den Rechtstexten: Punkte fehlten ganz, und der Text stand
   dunkler als die Absaetze. Jetzt derselbe Ton wie der Fliesstext und ein
   Gedankenstrich als Marke — wie bei den Leistungsgruppen. (Helmut, 05.10.2026) */
#datenschutz .fragen-liste ul, #impressum .fragen-liste ul { display: grid; gap: 8px; margin: 0 0 1.4em; max-width: 68ch; }
#datenschutz .fragen-liste li, #impressum .fragen-liste li {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px;
  color: var(--grau); font-size: 1.02rem; line-height: 1.6;
}
#datenschutz .fragen-liste li > *, #impressum .fragen-liste li > * { color: inherit; }
#datenschutz .fragen-liste li::before, #impressum .fragen-liste li::before { content: "—"; opacity: .5; }

/* Fragenspalte etwas schmaler, der gewonnene Platz geht in den Abstand zur
   Ueberschrift der Gruppe. (Helmut, 05.10.2026) */
@media (min-width: 1201px) {
  .fragen-gruppe .fragen { grid-template-columns: 1fr 1.52fr; gap: 86px; }
}

/* Weitere Seiten im Hauptmenue: kleine Knoepfe nebeneinander ganz unten.
   (Helmut, 05.10.2026) */
#menue-weitere { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(16px, 2.2vh, 31px); }
#menue-weitere a {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.65); border: 1px solid rgba(255,255,255,.22); border-radius: 999px;
  padding: 9px 16px; text-decoration: none; white-space: nowrap;
  transition: color .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
#menue-weitere a:hover, #menue-weitere a:focus-visible { color: var(--tinte); background: var(--papier); border-color: var(--papier); outline: none; }
@media (max-width: 600px) { #menue-weitere { gap: 8px; } #menue-weitere a { padding: 8px 13px; font-size: .66rem; } }

/* Die zwei Hauptwege im Menue untereinander, gleich breit, beide als Umriss.
   (Helmut, 05.10.2026) */
#menue-knoepfe { display: grid; gap: 10px; width: 100%; max-width: 300px; }
#menue-knoepfe > a { width: 100%; justify-content: space-between; }

/* Menueinhalt nach unten ausrichten statt mittig, die kleine Leiste ueber die
   ganze Breite. (Helmut, 05.10.2026) */
@media (min-width: 601px) {
  .ebene { align-content: end; }
  #menue-weitere { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .ebene > nav { flex: none; }
  .ebene { justify-content: flex-end; }
}

/* Formulare dreispaltig */
@media (min-width:768px){
 .bde-form-builder-70-146 .breakdance-form > .breakdance-form-field:nth-child(-n+18){grid-column:span 4}
 .bde-form-builder-71-129 .breakdance-form > .breakdance-form-field:nth-child(-n+12){grid-column:span 4}
 }

/* Fuß: beide Knöpfe gleich ausgerichtet — Text links, Pfeil rechts */
.kontakt-knoepfe .knopf, .kontakt-raster .kontakt-knoepfe .knopf{justify-content:space-between}

/* Kopfzeile: Telefon statt Ort */
.kopf-mitte a{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:inherit}
.kopf-mitte a .isp{display:inline-flex}
.kopf-mitte a svg{width:1em;height:1em}

/* Waagrechter Bereich hell (Jobs) — invertiert zum Schadensfall */
.schaden:not(.dunkel) .tafel{border-left-color:var(--linie)}
.schaden:not(.dunkel) .tafel .riesig{-webkit-text-stroke-color:rgba(10,10,10,.55)}
.schaden:not(.dunkel) .tafel-text p{color:rgba(10,10,10,.75)}
@media (max-width:900px){.schaden:not(.dunkel) .tafel{border-top-color:var(--linie)}}

.schaden:not(.dunkel) .tafel-intro > :first-child{align-self:start}
.schaden:not(.dunkel) .tafel-intro h2{margin-top:0}

.schaden:not(.dunkel) .tafel-ende p{max-width:none;line-height:1.5}

/* Jobs: flachere Tafeln */
@media (min-width:901px){
 .schaden:not(.dunkel) .tafel{height:42vh;width:36vw;justify-content:flex-start}
 .schaden:not(.dunkel) .tafel-ende{justify-content:flex-end}
}
.schaden:not(.dunkel) .tafel-text{height:auto;gap:18px;flex:1;align-content:space-between}
.schaden:not(.dunkel) .tafel-text h3{font-size:clamp(1.5rem,2.2vw,2.1rem);white-space:nowrap}
.schaden:not(.dunkel) .tafel-text ul{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.schaden:not(.dunkel) .tafel-text li{position:relative;padding-left:22px;font-size:1.225rem;line-height:1.5;color:var(--tinte)}
.schaden:not(.dunkel) .tafel-text li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:1}
.schaden:not(.dunkel) .tafel-intro h2{font-size:clamp(2.2rem,4.6vw,4.4rem)}

.nb{white-space:nowrap}

.schaden.dunkel .tafel-ende p{max-width:none;line-height:1.5}

/* Textlinks im Fließtext unterstrichen */
.frage-antwort a, .rechtstext p a:not(.knopf), .glossar-text a:not(.knopf), .tafel-text a:not(.knopf), .fragen-hinweis a:not(.knopf){text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}

/* Menü: bei wenig Höhe scrollbar, Inhalt beginnt dann sauber oben */
.ebene{overflow-y:auto;overscroll-behavior:contain}
@media (min-width:601px){.ebene{align-items:safe end;align-content:safe end}}

/* H1: jede Zeile eine Zeile — der Einpasser verkleinert notfalls die Schrift */
@media (min-width:601px){.seitenkopf h1 .z > *:not(.held-unter *){white-space:nowrap}}

.fragen-hinweis p, .fragen-hinweis{text-wrap:balance}

/* Maskenrahmen: links Luft, damit kein Buchstabe angeschnitten wird */
.held h1 .z, .seitenkopf h1 .z{padding-left:.1em;margin-left:-.1em}

/* Mauszeiger über der Buchstabenleiste: dunkel mit dem Buchstaben */
.zeiger.zeichen, .zeiger.hell.zeichen{background:var(--tinte);width:42px;height:42px}
.zeiger.zeichen .icon{width:0;height:0;opacity:0}
.zeiger.zeichen::after{content:attr(data-zeichen);grid-area:1/1;color:#fff;font-family:var(--display);font-weight:500;font-size:1.05rem;line-height:1}

/* Rechtstexte: gleicher Abstand nach oben wie die H1 der Unterseiten */
/* Buchstabenleiste: das Feld tritt zurück, solange der Mauskreis den Buchstaben zeigt */
.glossar-az a{transition:opacity .22s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease)}
.glossar-az a:hover{opacity:0}

/* Kopfzeile: wird es eng, bleibt links die Wortmarke, in der Mitte nur das Telefon */
.kopf-mitte.knapp > span:first-child, .kopf-mitte.knapp .punkt{display:none}

/* H1-Zeilen starten gleichzeitig — hält die alten Verzögerungen aus der Kopie
   im globalen Breakdance-Stylesheet in Schach (Helmut, 05.10.2026) */
.held h1 .z:nth-child(n) span, .held h1 .z:nth-child(n) > *,
.seitenkopf h1 .z:nth-child(n) > *{animation-delay:0s}

/* Rechtstexte: Inhalt auf der Spalte der Kopfzeile — die Kopfzeile hat drei gleiche
   Spalten mit 24 px Abstand, der Inhalt beginnt also bei (100% - 48px)/3 + 24px. */

/* Schlussüberschriften: lieber zwei ausgewogene Zeilen als eine sehr lange */
@media (min-width:901px){.kontakt h2.display{text-wrap:balance}}

/* Jobs: die Bühne ist nur so hoch wie ihr Inhalt, nicht bildschirmhoch */
@media (min-width:901px){
 .schaden:not(.dunkel) .buehne{height:auto;padding-block:clamp(56px,7vw,112px);top:clamp(96px,12vh,150px)}
}

/* Einleitungstexte: keine einzelnen Wörter in der letzten Zeile */
.held-lead, .seitenkopf-lead{text-wrap:pretty}

/* Hilfreiche Seiten: vier Felder, durch dünne Linien getrennt (Kontaktseite) */
.hilfe-raster{display:grid;grid-template-columns:repeat(4,1fr);margin:0 calc(-1 * var(--rand));border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.hilfe-feld{display:grid;grid-template-columns:auto auto;align-items:center;align-content:start;gap:clamp(22px,2.6vw,34px) 16px;padding:clamp(28px,3vw,44px) clamp(24px,2.4vw,36px);border-right:1px solid var(--linie)}
.hilfe-feld:last-child{border-right:0}
.hilfe-feld:first-child{padding-left:var(--rand)}
.hilfe-feld:last-child{padding-right:var(--rand)}
.hilfe-feld a{align-self:start;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinte);border:1px solid var(--tinte);border-radius:999px;padding:9px 16px;text-decoration:none;white-space:nowrap;transition:color .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease)}
.hilfe-feld a:hover, .hilfe-feld a:focus-visible{color:var(--papier);background:var(--tinte);border-color:var(--tinte);outline:none}
.hilfe-feld p{font-size:1.02rem;line-height:1.55;margin:0;text-wrap:pretty}

@media (max-width:1100px){
 .hilfe-raster{grid-template-columns:repeat(2,1fr)}
 .hilfe-feld{padding-left:clamp(20px,2vw,32px);padding-bottom:clamp(28px,3vw,44px);border-bottom:1px solid var(--linie)}
 .hilfe-feld:nth-child(2n+1){padding-left:0}
 .hilfe-feld:nth-child(2n){border-right:0;padding-right:0}
 .hilfe-feld:nth-last-child(-n+2){border-bottom:0;padding-bottom:0}
}
@media (max-width:700px){
 .hilfe-raster{grid-template-columns:1fr}
 .hilfe-feld{border-right:0;padding-left:0;padding-right:0;border-bottom:1px solid var(--linie);padding-bottom:clamp(28px,3vw,44px)}
 .hilfe-feld:last-child{border-bottom:0;padding-bottom:0}
}

.hilfe-icon{display:block;width:38px;height:38px}
.hilfe-icon svg{width:38px;height:38px;fill:none;stroke:var(--tinte)}
.hilfe-icon svg *{stroke-width:.9;fill:none}

.hilfe-icon{grid-column:1;grid-row:1}
.hilfe-feld a{grid-column:2;grid-row:1;justify-self:end;align-self:center;margin:0}
.hilfe-feld p{grid-column:1 / -1;grid-row:2;margin:0}

/* Hilfreiche Seiten: engere Abstände nach oben und unten (ein Drittel weniger) */
section:has(> .hilfe-raster){padding-top:clamp(43px,4.7vw,66px);padding-bottom:clamp(43px,4.7vw,66px)}
section:has(> .hilfe-raster) + section{padding-top:clamp(43px,4.7vw,66px)}

/* Tablet: in der Kopfzeile bleibt nur das Telefon — für beide Zeilen ist zu wenig Platz */
@media (max-width:1024px){.kopf-mitte > span:first-child, .kopf-mitte .punkt{display:none}}

/* Tablet: Inhaltsübersicht der Fragenseite aus — die Gruppen stehen dort ohnehin
   untereinander, Überschrift über die volle Breite und die Fragen darunter */
@media (max-width:1200px){.fragen-uebersicht{display:none}}

/* Tablet: Fragen-Gruppen einspaltig bis 1200 px — Überschrift über die volle Breite,
   Fragen darunter (gilt auch für große iPads hochkant und 11" quer) */
@media (max-width:1200px){.fragen, .fragen-gruppe .fragen{grid-template-columns:1fr;gap:40px}}

/* Tablet: keine zweite Linie zwischen den Fragengruppen — die letzte Frage der
   vorigen Gruppe bringt ihre eigene Linie schon mit */
@media (max-width:1200px){.fragen-gruppe + .fragen-gruppe{border-top:0;padding-top:24px;margin-top:16px}}

/* Tablet: Telefon/E-Mail näher an die Frage darüber (rund 30 Prozent weniger) */
@media (max-width:1200px){.kontakt-tel, .kontakt-tel-hell{margin-top:4.2vh}}

/* Tablet: Rechtstexte ohne klebende Spalte — die Überschrift scrollt mit */
@media (max-width:1200px){section#impressum .fragen > *:first-child, section#datenschutz .fragen > *:first-child{position:static;top:auto}}

/* Tablet: Menü untereinander — erst die großen Begriffe, dann die kleinen Knöpfe,
   darunter Büro, Erreichen und Bürozeiten als drei Blöcke untereinander */
@media (max-width:1200px){
 .ebene{align-items:start;align-content:safe center;gap:clamp(24px,3.4vh,44px)}
 .ebene > nav:first-of-type{order:1}
 #menue-weitere{order:2;margin-top:0}
 .ebene-info{order:3;grid-template-columns:1fr;gap:clamp(20px,2.6vh,32px)}
 .ebene-info .mono{display:block}
}

/* Tablet: Kartenstapel — Bild ganz zeigen, Knopf unter den Text.
   Alle Karten enden auf derselben Linie (96vh), damit sie sich gemeinsam loesen:
   der Bildblock bekommt dafuer die volle Hoehe, Karte 01 wird mit negativem
   Abstand wieder direkt unter das sichtbare Bild gezogen. (Helmut, 06.10.2026) */
@media (max-width:1200px){
 .stapel{--bildh:42.9vw;--start:0px}
 .karte-bild{position:sticky;top:var(--start);height:calc(96vh - var(--start));overflow:hidden;z-index:0}
 .karte-bild img{height:auto;display:block}
 .karte:nth-child(2){--t:calc(var(--start) + var(--bildh));margin-top:calc(var(--start) + var(--bildh) - 96vh)}
 .karte:nth-child(3){--t:calc(var(--start) + var(--bildh) + var(--kopfh))}
 .karte:nth-child(4){--t:calc(var(--start) + var(--bildh) + 2 * var(--kopfh))}
 .karte:nth-child(5){--t:calc(var(--start) + var(--bildh) + 3 * var(--kopfh))}
 .karte-schluss{position:sticky;--t:calc(var(--start) + var(--bildh) + 4 * var(--kopfh));height:calc(96vh - var(--t));z-index:2}
 .karte .karte-fuss, .karte > a.knopf{grid-column:2;justify-self:start}
}

/* Tablet: Leistungsbereiche — Nummer vor der Ueberschrift, Bild ohne Abdunklung */
@media (max-width:1200px){
 .leistungen-neu{counter-reset:leistung}
 .leistung{counter-increment:leistung}
 .leistung-bild::after{display:none}
 .leistung-text h3::before{content:counter(leistung,decimal-leading-zero) "\00a0\00a0";font-family:inherit;font-size:inherit;letter-spacing:inherit;vertical-align:baseline}
}

/* Tablet: Kopfbild nach der Ueberschrift um ein Drittel flacher (Helmut, 06.10.2026) */
@media (min-width:601px) and (max-width:1200px){
 .held-bild{padding-top:41.7%}
 img.seitenkopf-bild,.seitenkopf-bild{aspect-ratio:2.4 / 1}
}

/* Tablet: „Wozu wir Sie beraten" in zwei Spalten (Helmut, 06.10.2026) */
@media (min-width:601px) and (max-width:1200px){
 section[aria-labelledby="themen-titel"] .leistungen.ohne-bild{display:grid;grid-template-columns:1fr 1fr}
 section[aria-labelledby="themen-titel"] .leistungen.ohne-bild .gruppe{grid-template-columns:1fr;gap:14px;align-items:start;padding:clamp(22px,2.8vw,34px) clamp(16px,2.4vw,28px)}
 section[aria-labelledby="themen-titel"] .leistungen.ohne-bild .gruppe:nth-child(odd){padding-left:var(--rand)}
 section[aria-labelledby="themen-titel"] .leistungen.ohne-bild .gruppe:nth-child(even){padding-right:var(--rand)}
 section[aria-labelledby="themen-titel"] .leistungen.ohne-bild .gruppe:last-child:nth-child(odd){grid-column:1 / -1;padding-left:var(--rand);padding-right:var(--rand)}
 section[aria-labelledby="themen-titel"] .leistungen.ohne-bild .gruppe h3{font-size:clamp(1.35rem,2.8vw,1.9rem)}
 section[aria-labelledby="themen-titel"] .leistungen.ohne-bild .gruppe ul{grid-column:1;font-size:.95rem;gap:8px}
}

/* Tablet: Stapel-Abschnitt enger — kein Strich unter der Schlusskarte, kurzer
   Auslauf, „Häufige Fragen" rückt auf, Abstand über der Stapel-Ueberschrift
   um ein Drittel kürzer. Nur /hausverwaltung/ hat einen .stapel. (Helmut, 06.10.2026) */
@media (max-width:1200px){
 .karte-schluss, .karte:last-child{border-bottom:0}
 .stapel::after{height:0}
 section:has(.stapel){padding-top:21px;padding-bottom:0}
 section:has(.stapel) + section{padding-top:24px;margin-top:-130px;position:relative;z-index:3;background:var(--papier)}
}

/* Tablet: Versicherungen — Feinschliff (Helmut, 06.10.2026):
   keine Linien bei „Wozu wir Sie beraten", Zitat auf zwei Drittel Breite,
   Kopfbild tiefer angeschnitten, damit die Köpfe ganz zu sehen sind. */
@media (min-width:601px) and (max-width:1200px){
 section[aria-labelledby="themen-titel"] .leistungen.ohne-bild{border-top:0}
 section[aria-labelledby="themen-titel"] .leistungen.ohne-bild .gruppe{border-bottom:0}
 section[aria-labelledby="themen-titel"] .leistungen.ohne-bild .gruppe::after{display:none}
 .statement p{max-width:66%}
 /* Startseite: laengeres Zitat, deshalb breiter (hoechstens fuenf Zeilen) */
 body.home .statement p{max-width:88%;text-wrap:balance}
 /* Menue: Fon-, Fax- und WhatsApp-Zeile nie umbrechen */
 .ebene-info a[href^="tel:"], .ebene-info a[href*="wa.me"], .ebene-info a[href^="tel:"] + div{white-space:nowrap}
 /* iOS macht aus der Faxnummer selbst einen tel-Link; der darf nicht zum
    Block werden, sonst rutscht die Nummer unter "Fax:". */
 .ebene-info > div > div a{display:inline}
 .held-bild img[src*="versicherungen-modern"]{object-position:50% 22%}
}

/* ---------- Tablet-Runde 3 (Helmut, 06.10.2026) ---------- */
@media (min-width:601px) and (max-width:1200px){
 /* Team: Aufgabe unter den Namen, damit lange Namen nicht umbrechen */
 .person{grid-template-columns:1fr;gap:8px}

 /* „Obere Wilhelmstraße": Ueberschrift ueber beide Spalten, darunter Text und Bild
    nebeneinander, der Text senkrecht mittig zum Bild */
 .versicherung:has(#buero-titel){display:block}
 .versicherung:has(#buero-titel) .versicherung-text{display:grid;position:absolute;left:0;right:0;bottom:0;top:auto;z-index:2;padding:var(--rand)}
 .versicherung:has(#buero-titel) #buero-titel{grid-column:auto}
 .versicherung:has(#buero-titel) .versicherung-text p{grid-column:auto;align-self:auto}
 .versicherung:has(#buero-titel) .versicherung-bild{grid-column:auto;margin:0;width:100%}

 /* Jobs: Bild so flach wie das Kopfbild, Punkte ueber die ganze Breite */
 #arbeit .tafel-intro figure{aspect-ratio:2.4 / 1}
 #arbeit .tafel{grid-template-columns:1fr}
 #arbeit .tafel-text{grid-column:1 / -1;grid-template-columns:minmax(0,300px) 1fr;column-gap:clamp(24px,4vw,48px);align-items:start}
 #arbeit .tafel-text h3{grid-column:1;grid-row:1}
 #arbeit .tafel-text ul{grid-column:2;grid-row:1}

 /* Kontakt: gleicher Innenabstand in allen vier Kaesten, Text buendig zum Seitentext */
 .hilfe-feld{padding:var(--rand)}

 /* Formulare: statt drei nur zwei Spalten */
 .bde-form-builder-69-133 .breakdance-form > .breakdance-form-field:nth-child(-n+6),
 .bde-form-builder-70-146 .breakdance-form > .breakdance-form-field:nth-child(-n+18),
 .bde-form-builder-71-129 .breakdance-form > .breakdance-form-field:nth-child(-n+12){grid-column:span 6}
 .bde-form-builder .breakdance-form-checkbox{text-wrap:balance}
}


/* ---------- Tablet-Runde 3, Nachtrag (Helmut, 06.10.2026) ---------- */
@media (min-width:601px) and (max-width:1200px){
 /* Kontakt: gleicher Innenabstand auf allen vier Seiten — höhere Spezifität als
    die Spaltenregeln, sonst klebt die linke Spalte am Rand */
 .hilfe-raster .hilfe-feld:nth-child(n){padding:var(--rand)}

 /* Jobs: Punkte wirklich über die ganze Breite (34ch/52ch-Grenze aufheben) */
 #arbeit .tafel-text{max-width:none}

 /* „Vier Schritte bis zur Übernahme" (/verwaltung-anfragen/): die Punkte stehen
    untereinander, je Punkt die Nummer links und die beiden Zeilen rechts daneben.
    Der Strich über dem Formular fällt weg, das Formular rückt auf. */
 section[aria-labelledby="ablauf-titel"] .gruppe{grid-template-columns:1fr minmax(0,34ch);align-items:start;gap:14px 32px;min-height:0;padding-left:var(--rand);padding-right:var(--rand)}
 section[aria-labelledby="ablauf-titel"] .gruppe h3{font-size:clamp(1.5rem,3vw,2.2rem);white-space:nowrap}
 section[aria-labelledby="ablauf-titel"] .gruppe h3{grid-column:1;grid-row:1}
 section[aria-labelledby="ablauf-titel"] .gruppe ul{grid-column:2;grid-row:1}
 section[aria-labelledby="ablauf-titel"] .leistungen.ohne-bild{border-bottom:0}
 section[aria-labelledby="ablauf-titel"]{padding-bottom:0}
 section[aria-labelledby="formular-titel"]{padding-top:72px}
}

/* Datumsfeld genauso hoch wie die übrigen Eingabefelder (Helmut, 06.10.2026):
   Chrome gibt input[type=date] nur 19,8 px Inhaltshöhe statt 22 px, dadurch war
   „Seit wann besteht der Schaden?" 2 px flacher als die Nachbarfelder. */
.bde-form-builder input.breakdance-form-field__input[type="date"]{min-height:47px;height:47px}

/* ---------- Tablet-Runde 4 (Helmut, 06.10.2026) ---------- */
@media (min-width:601px) and (max-width:1200px){
 /* Der leere Teil der Schlusskarte steckt in der Stapel-Mechanik — der Inhalt
    sitzt jetzt mittig darin, dadurch ist der Abstand nach unten halb so gross. */
 .karte-schluss{align-content:start}

 /* „Warum beides zusammen Sinn ergibt.": einspaltig, zuerst das ganze Bild
    über die volle Breite, darunter Text und Knöpfe. */
 .versicherung:has(#zusammen-titel){grid-template-columns:1fr;gap:28px}
 .versicherung:has(#zusammen-titel) .versicherung-bild{order:-1;position:static;height:auto;min-height:0;aspect-ratio:3 / 2;overflow:hidden;width:calc(100% + 2 * var(--rand));max-width:none;margin:0 calc(-1 * var(--rand))}
 .versicherung:has(#zusammen-titel) .versicherung-bild img{position:static;width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block}
 .versicherung:has(#zusammen-titel) .versicherung-text{max-width:none}
 .versicherung:has(#zusammen-titel) .versicherung-text p{max-width:none}
 .versicherung:has(#zusammen-titel) .held-knoepfe{display:flex;flex-wrap:wrap;gap:10px}
}

/* Teamliste: Aufgabe unter dem Namen, linksbündig — in allen Größen
   (Helmut, 06.10.2026) */
@media (max-width:1200px){.person{grid-template-columns:1fr;gap:8px}}
.person p{max-width:52ch;text-align:left}


/* Jobs auf Tablet: Ueberschriften deutlicher als die Aufzaehlung, Aufzaehlung
   enger, kein Strich oberhalb der ersten Tafel. (Helmut, 06.10.2026) */
@media (min-width:601px) and (max-width:1200px){
 #arbeit .tafel-text h3{font-size:clamp(2rem,4vw,2.6rem)}
 #arbeit .tafel-text ul{gap:5px}
 #arbeit .tafel-text li{font-size:.95rem;line-height:1.5;padding-left:26px}
 #arbeit .tafel-intro + .tafel{border-top:0}
}

/* Startseite auf Tablet: die beiden Bildkacheln „Hausverwaltung" und
   „Versicherungen" — der Inhalt rückt nach oben, damit unter dem Knopf etwa
   doppelt so viel Luft bis zur Bildkante bleibt. (Helmut, 06.10.2026) */
@media (max-width:1200px){
 .bereich{padding-bottom:50px}
 /* Schadensablauf: kein Strich oberhalb von 01 */
 #schaden .tafel-intro + .tafel{border-top:0}
}

/* Aufzaehlungszeichen einheitlich: Strich statt Punkt, wie bei den Leistungen
   auf der Startseite. (Helmut, 06.10.2026) */
.schaden:not(.dunkel) .tafel-text li::before{content:"\2014";position:absolute;left:0;top:0;width:auto;height:auto;border-radius:0;background:none;opacity:.5}
.schaden:not(.dunkel) .tafel-text li{padding-left:32px}

/* Startseite auf Tablet: die Bilder bei "Alles, was ein Haus braucht." im
   Format 4:3 und breiter, damit der Text weiter nach rechts rueckt. */
@media (min-width:601px) and (max-width:1200px){
 .leistungen{--bb:clamp(260px,42vw,380px)}
 .gruppe-bild{aspect-ratio:auto}
 .gruppe{min-height:calc(var(--bb) * .75);align-content:center;grid-template-rows:auto auto}
}

/* Jobs am Computer: die Aufzaehlungen der drei Tafeln beginnen auf gleicher
   Hoehe. Vorher verteilte align-content:space-between den Inhalt ueber die
   Tafelhoehe, dadurch sass jede Liste anders hoch. (Helmut, 06.10.2026) */
@media (min-width:1201px){
 .schaden:not(.dunkel) .tafel-text{align-content:start;row-gap:49px;max-width:none}
}

/* Handy: Die Ueberschrift der Startseite beginnt so hoch wie auf den
   Unterseiten (195 px Vorlauf waren 75 px mehr). (Helmut, 06.10.2026) */
@media (max-width:600px){
 .held:not(.held-unter){padding-top:120px}
}

/* ---------- Handy-Runde (Helmut, 06.10.2026) ---------- */
/* Von iOS erzeugte tel-Links duerfen nicht zu Bloecken werden (siehe Menue) */
.ebene-info > div > div a, .fuss-inhalt > div a{display:inline}
@media (max-width:600px){
 /* Im offenen Menue steht nur noch das X, das Wort wuerde das Logo ueberlagern */
 .menue-knopf[aria-expanded="true"] .wort{display:none}
 /* Buero und Buerozeiten im Menue wieder zeigen */
 .ebene-info > div:nth-child(1), .ebene-info > div:nth-child(3){display:block}
 /* Fuss: Haeufige Fragen + Glossar in Zeile 1, Impressum + Datenschutz in Zeile 2,
    beide eng beieinander, danach etwas Abstand zu BUERO15 */
 .fuss .fuss-zeile .fuss-rechts{display:grid;grid-template-columns:auto auto;justify-content:start;column-gap:20px;row-gap:4px;margin-bottom:12px;flex-wrap:nowrap}
 .fuss-siegel a{text-wrap:balance}
}

/* Handy: Menue beginnt oben unter der Kopfzeile und ist nach unten scrollbar.
   Vorher klebte der Inhalt mit justify-content:flex-end unten, dadurch liefen die
   ersten Menuepunkte oben aus dem Bild und waren nicht erreichbar. (Helmut, 06.10.2026) */
@media (max-width:600px){
 .ebene{justify-content:safe center;overflow-y:auto;-webkit-overflow-scrolling:touch}
 /* Kartenstapel: Knopf buendig mit dem Flesstext darueber */
 .karte > a.knopf, .karte .karte-fuss{grid-column:1 / -1;justify-self:start}
}

/* Handy: Kartenstapel wie auf dem Tablet — alle Karten enden auf derselben
   Linie, damit Bild, 01 bis 04 und die Schlusskarte gemeinsam weglaufen. Die
   alten Handy-Hoehen (min(500px,62vh)) liessen jede Karte anders enden.
   (Helmut, 06.10.2026) */
@media (max-width:600px){
 .karte:not(.karte-bild):not(.karte-schluss), .stapel .karte-schluss{height:calc(96vh - var(--t));min-height:0}
 /* Mehr Luft unter "Design und Umsetzung: BUERO15", sonst blendet es nie ein */
 .fuss{padding-bottom:44px}
 .fuss .fuss-zeile{border-bottom:0;padding-bottom:14px}
 /* Knopf naeher an "Das war's." */
 .karte-schluss{row-gap:18px;grid-template-rows:auto auto;align-content:start}
 /* Die Vorzeile hatte 50 px Zeilenhoehe, dadurch wirkte der Abstand gross */
 .karte-schluss .mono{line-height:1.4}
 /* Haeufige Fragen: der Glossar-Knopf im Kopf entfaellt auf dem Handy */
 .held-knoepfe a.knopf[href="/glossar/"]{display:none}
 /* Teamseite: Ueberschrift ausgewogen umbrechen */
 body.page-id-65 .held h1{text-wrap:balance;font-size:2.3rem}
 .person p{text-wrap:balance}
 /* Kunstbild: das img gehoert in den Platzhalter, sonst rutscht es unter die
    Section und liegt hinter dem dunklen Abschnitt */
 /* Das Kunstbild wird ganz gezeigt (bild-voll): kein Platzhalter mit padding-top,
    sonst steht das Bild darunter und ragt in den dunklen Abschnitt */
 .versicherung-bild.bild-voll{height:auto;padding-top:0;min-height:0}
 /* Nach dem Kunstbild grenzt der dunkle Abschnitt direkt an */
 section:has(.versicherung-bild.bild-voll){padding-bottom:0}
 /* Fuss: Buero-Block rueckt naeher an den Text darueber (ein Drittel weniger) */
 .fuss{padding-top:21px}
 /* Jobs: Aufzaehlung so gross wie auf der Startseite, weniger Luft ueber
    "Was die Arbeit ausmacht." */
 #arbeit .tafel-text li{font-size:.95rem;line-height:1.5}
 body.page-id-68 .held{padding-bottom:0}
 #arbeit .tafel-intro{padding-top:50px}
 /* Kontakt: gleicher Innenabstand wie auf dem Tablet, Linie zwischen allen vier Kaesten */
 .hilfe-raster .hilfe-feld:nth-child(n){padding:var(--rand);border-bottom:1px solid var(--linie);border-right:0}
 .hilfe-raster .hilfe-feld:last-child{border-bottom:0}
 /* Der Fragen-Abschnitt darf die Schlusskarte nicht verdecken */
 section:has(.stapel) + section{margin-top:-51px}
 /* BUERO15-Zeile ist sofort da, sie wurde oft nie eingeblendet */
 .fuss-links.rein{opacity:1;transform:none;transition:none}
}

/* Computer: kein Strich unter der Schlusskarte, "Haeufige Fragen" rueckt an die
   Stelle, an der vorher die Linie war. (Helmut, 06.10.2026) */
@media (min-width:1201px){
 .karte-schluss, .karte:last-child{border-bottom:0}
 .stapel::after{height:0}
 section:has(.stapel){padding-bottom:0}
 section:has(.stapel) + section{padding-top:0}
 /* Jobs: "Klingt nach dir? Dann schreib uns." am Computer wieder zweizeilig */
 #arbeit .tafel-ende p.display{max-width:180px;text-wrap:balance}
}

/* Touch: kein haengender Hover bei den Teammitgliedern — auf dem Handy blieb der
   Name nach dem Antippen verschoben stehen. (Helmut, 06.10.2026) */
@media (hover: none){
 .person:hover h3, .person:active h3{transform:none}
 .person:hover p, .person:active p{color:var(--grau)}
}

/* ---------- Sponsoring: Vereine mit Wappen (Helmut, 08.10.2026) ---------- */
/* ---------- Sponsoring: Vereine mit Wappen (Helmut, 08.10.2026) ---------- */
.verein-zeile{display:block;padding:0}
.verein{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:16px 32px;text-decoration:none;color:inherit;position:relative}
a.verein{padding:clamp(18px,2.4vw,32px) var(--rand);transition:color .3s var(--ease)}
a.verein:hover, a.verein:focus-visible{background:var(--tinte);color:var(--papier);outline:none}
a.verein:hover h3, a.verein:focus-visible h3, a.verein:hover p, a.verein:focus-visible p{color:var(--papier);text-decoration:none}
.verein-logo{filter:grayscale(1);transition:filter .3s var(--ease)}
a.verein:hover .verein-logo, a.verein:focus-visible .verein-logo{filter:none}
.verein-pfeil{display:none}
.verein-logo{width:64px;height:64px;object-fit:contain;display:block}
.verein h3{font-size:clamp(1.4rem,2.4vw,2.2rem)}
@media (max-width:1200px){
 .verein{grid-template-columns:56px 1fr;gap:10px 20px;align-items:center}
 .verein-logo{width:56px;height:56px;grid-row:1 / span 2}
 .verein h3{grid-column:2;font-size:clamp(1.3rem,2.6vw,1.8rem)}
 .verein p{grid-column:2;text-wrap:initial}
}
@media (max-width:600px){
 .verein{grid-template-columns:48px 1fr;gap:6px 16px}
 .verein-logo{width:48px;height:48px}
}

/* Zwei Einleitungsabsaetze: eine Zeile Abstand (Helmut, 08.10.2026) */
.held-lead + .held-lead{margin-top:1.5em}

/* Kopfbereich: feste Anordnung oben statt Verteilung auf die Fensterhoehe (Helmut, 08.10.2026) */
.held .held-unten{margin-top:72px}

/* Unterseiten: Kopf beginnt auf gleicher Hoehe wie die Startseite (Helmut, 08.10.2026) */
@media (min-width:1201px){ .held.held-unter{padding-top:120px} }

/* ---------- Aktuelles: Urteile und Hinweise (09.10.2026) ---------- */
.aktuell-liste{list-style:none;margin:0 calc(-1 * var(--rand));padding:0;border-top:1px solid var(--linie)}
.aktuell{display:grid;grid-template-columns:clamp(140px,16vw,220px) 1fr;gap:clamp(16px,3vw,48px);padding:clamp(28px,3.4vw,52px) var(--rand);border-bottom:1px solid var(--linie)}
.aktuell-kopf{display:flex;flex-direction:column;gap:6px;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grau)}
.aktuell-art{color:var(--tinte)}
.aktuell-text h3{font-size:clamp(1.25rem,2.2vw,1.85rem);line-height:1.2;margin:0 0 14px;max-width:32ch;text-wrap:balance}
.aktuell-text p{margin:0;max-width:64ch;line-height:1.62}
.aktuell-quelle{margin-top:16px;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--grau)}
.aktuell-quelle a{color:inherit;text-decoration:underline;text-underline-offset:.2em}
@media (max-width:900px){
 .aktuell{grid-template-columns:1fr;gap:12px}
 .aktuell-kopf{flex-direction:row;gap:16px}
}


/* Versicherungen: Schwerpunkt bAV (09.10.2026) */
section[aria-labelledby="bav-titel"] > div:first-child > p:last-of-type{max-width:68ch;margin-top:20px}
section[aria-labelledby="bav-titel"] > div:first-child > a{margin-top:28px;justify-self:start;align-self:start;width:fit-content;max-width:max-content}

/* Vereinsnamen duerfen umbrechen (Helmut, 09.10.2026) */
.verein > *{min-width:0}
.verein h3{white-space:normal;overflow-wrap:anywhere;hyphens:auto}
.verein p{overflow-wrap:anywhere}

/* Schwerpunkt bAV: auf Tablet zwei Spalten wie bei den Themen (09.10.2026) */
@media (min-width:601px) and (max-width:1200px){
 section[aria-labelledby="bav-titel"] .leistungen.ohne-bild{display:grid;grid-template-columns:1fr 1fr}
 section[aria-labelledby="bav-titel"] .leistungen.ohne-bild .gruppe{grid-template-columns:1fr;gap:14px;align-items:start;padding:clamp(22px,2.8vw,34px) clamp(16px,2.4vw,28px)}
 section[aria-labelledby="bav-titel"] .leistungen.ohne-bild .gruppe:nth-child(odd){padding-left:var(--rand)}
 section[aria-labelledby="bav-titel"] .leistungen.ohne-bild .gruppe:nth-child(even){padding-right:var(--rand)}
 section[aria-labelledby="bav-titel"] .leistungen.ohne-bild .gruppe:last-child:nth-child(odd){grid-column:1 / -1;padding-left:var(--rand);padding-right:var(--rand)}
 section[aria-labelledby="bav-titel"] .leistungen.ohne-bild .gruppe h3{font-size:clamp(1.35rem,2.8vw,1.9rem)}
 section[aria-labelledby="bav-titel"] .leistungen.ohne-bild .gruppe ul{grid-column:1;font-size:.95rem;gap:8px}
}

/* Tafeln im Mitarbeiten-Bereich: Icon ueber der Ueberschrift (09.10.2026) */
.tafel-icon-huelle{display:block;line-height:0}
.tafel-icon{width:30px;height:30px;display:block;margin-bottom:16px}
.tafel-icon *{stroke-width:.85}

/* Startseite: Versicherungsbild nach links, Text nach rechts (Helmut, 09.10.2026) */
@media (min-width:801px){
 section[aria-labelledby="versicherung-titel"] .versicherung-bild{order:-1;margin-left:calc(-1 * var(--rand));margin-right:0;width:calc(100% + var(--rand))}
}

/* Betriebliche Altersversorgung: zwei Bloecke, Bild und Text im Wechsel (09.10.2026) */
.bav-block{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0}
.bav-block .bav-text{padding-right:clamp(28px,4vw,72px)}
.bav-block.gedreht .bav-text{padding-right:0;padding-left:clamp(28px,4vw,72px)}
.bav-block .bav-bild{margin-right:calc(-1 * var(--rand));width:calc(100% + var(--rand));aspect-ratio:4 / 3;overflow:hidden}
.bav-block.gedreht .bav-bild{margin-right:0;margin-left:calc(-1 * var(--rand));width:calc(100% + var(--rand))}
.bav-bild img{width:100%;height:100%;object-fit:cover;display:block}
.bav-text{display:grid;gap:14px;max-width:54ch}
.bav-text h3{font-size:clamp(1.35rem,2.3vw,2rem);line-height:1.15;margin:0}
.bav-text p{margin:0;line-height:1.62}
section[aria-labelledby="bav-titel"] > div:first-child{margin-bottom:clamp(36px,4vw,64px)}
@media (max-width:900px){
 .bav-block{grid-template-columns:1fr;gap:22px}
 .bav-block .bav-text, .bav-block.gedreht .bav-text{padding-left:0;padding-right:0}
 .bav-block .bav-bild, .bav-block.gedreht .bav-bild{order:-1;margin-left:calc(-1 * var(--rand));margin-right:calc(-1 * var(--rand));width:calc(100% + 2 * var(--rand));aspect-ratio:3 / 2}
 .bav-text{max-width:none}
}

/* Mitarbeiten-Bereich: kompaktere Tafeln (Helmut, 09.10.2026) */
@media (min-width:1201px){ #arbeit .tafel-intro{width:min(640px,48vw)} }
#arbeit .tafel-intro > div{display:grid;align-content:start}
#arbeit .tafel-intro > div > p:last-child{margin-top:clamp(26px,3vw,44px)}
#arbeit .tafel-text{grid-template-columns:auto 1fr;column-gap:14px;row-gap:0;align-items:center}
#arbeit .tafel-icon-huelle{grid-column:1;grid-row:1;align-self:center}
#arbeit .tafel-icon{margin-bottom:0;width:26px;height:26px}
#arbeit .tafel-text h3{grid-column:2;grid-row:1;margin:0}
#arbeit .tafel-text ul{grid-column:1 / -1;grid-row:2;margin-top:clamp(20px,2.2vw,30px);display:grid;gap:10px;padding:0;list-style:none}
#arbeit .tafel-text li{position:relative;padding-left:24px;line-height:1.5}
#arbeit .tafel-text li::before{content:"\2014";position:absolute;left:0;top:0;opacity:.5}

/* Mauszeiger zeigt ein Symbol statt des Pfeils: nicht drehen, gleiche Groesse wie im Knopf (Helmut, 09.10.2026) */
.zeiger.menue .zeiger-pfeil{transform:none}
.zeiger.gross.menue .zeiger-pfeil{width:26px;height:26px}

/* Startseite: neueste Meldung als Anreißer (09.10.2026) */
.aktuell-teaser{display:grid;gap:12px;max-width:68ch;margin-top:clamp(22px,2.6vw,36px);padding-top:clamp(22px,2.6vw,32px);border-top:1px solid var(--linie)}
.aktuell-teaser h3{font-size:clamp(1.3rem,2.2vw,1.9rem);line-height:1.2;margin:0;max-width:30ch;text-wrap:balance}
.aktuell-teaser p{margin:0;max-width:64ch;line-height:1.6}
.aktuell-teaser .aktuell-quelle{color:var(--grau);margin-top:2px}
#wechsel .aktuell-teaser + div{margin-top:clamp(24px,2.8vw,36px)}
/* Aktuelles-Tafeln im waagrechten Lauf */
.tafel-news .tafel-text{align-content:start;gap:14px}
.tafel-news h3.display{font-size:clamp(1.3rem,2vw,1.75rem);line-height:1.15}
.tafel-news .aktuell-quelle{opacity:.6}
.tafel-news a.knopf{justify-self:start;margin-top:6px}

/* Aktuelles-Lauf: kompakter Einstieg, Buehne nur so hoch wie noetig (Helmut, 09.10.2026) */
#aktuelles .buehne{height:auto;padding-block:clamp(56px,7vh,104px);top:clamp(96px,12vh,150px)}
#aktuelles .tafel{height:auto}
@media (min-width:1201px){ #aktuelles .tafel-intro{width:min(520px,36vw)} }
#aktuelles .tafel-intro{align-items:start}
#aktuelles .tafel-intro > div{display:grid;align-content:start;gap:14px}

#aktuelles .tafel-intro h2{margin:0;font-size:clamp(2.4rem,4.4vw,4rem);line-height:1.02}
#aktuelles .aktuell-sub{margin:0;max-width:34ch;text-wrap:balance;line-height:1.55}
#aktuelles .tafel-news .tafel-text{align-content:start}


#aktuelles .tafel-news p.mono{flex:none;align-self:start;margin:0}
#aktuelles .tafel-news .tafel-text{display:grid;align-content:start;gap:14px}
@media (min-width:1201px){
 /* Ueberschrift auf Hoehe der Meldungsueberschriften, der Text darunter endet auf der
    Linie der Meldungstexte (Helmut, 14.10.2026) */
 #aktuelles .tafel-intro{padding-top:calc(155px + 1.25vw)}
 #aktuelles .tafel-intro > div{min-height:281px;display:grid;grid-template-rows:auto 1fr;align-content:start}
 #aktuelles .tafel-intro .aktuell-sub{align-self:end;margin-bottom:0}
}

/* Service-Baustein: drei bzw. zwei Felder statt vier (Helmut, 14.10.2026) */
.hilfe-raster.drei{grid-template-columns:repeat(3,1fr)}
.hilfe-raster.zwei{grid-template-columns:repeat(2,1fr)}
@media (max-width:1100px){ .hilfe-raster.drei, .hilfe-raster.zwei{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .hilfe-raster.drei, .hilfe-raster.zwei{grid-template-columns:1fr} }

/* Aktuelles-Tafeln: Quellenzeile einzeilig halten (Helmut, 14.10.2026) */
@media (min-width:1201px){ #aktuelles .tafel-news{width:500px} }
#aktuelles .tafel-news .aktuell-quelle{font-size:.63rem;letter-spacing:.05em;max-width:none}

/* Service-Baustein: Einleitung schmaler (Helmut, 14.10.2026) */
section[aria-labelledby^="service-titel"] > div:first-child > p:last-of-type{max-width:46ch;text-wrap:pretty}

/* Service-Seite: flachere Bildkacheln für Glossar und Fragen (Helmut, 14.10.2026) */
.service-kacheln .bereich{min-height:0;aspect-ratio:auto;height:clamp(300px,34vw,420px)}
.service-kacheln .bereich-inhalt{padding:clamp(24px,2.6vw,40px)}
.service-kacheln .bereich-inhalt h3{font-size:clamp(2.2rem,4.2vw,3.6rem);line-height:1.02}
.service-kacheln .bereich-inhalt p:not(.mono){max-width:48ch}
.service-kacheln .bereich-inhalt h3{margin-bottom:16px}
@media (max-width:800px){ .service-kacheln .bereich{height:clamp(260px,52vw,340px)} }

/* Aktuelles-Tafeln: Ueberschrift, Text, Quelle und Knopf auf gleicher Hoehe (Helmut, 14.10.2026) */
@media (min-width:1201px){
 #aktuelles .tafel-news h3.display{min-height:calc(2 * 1.15em)}
 #aktuelles .tafel-news .tafel-text > p:not(.mono):not(.aktuell-quelle){min-height:calc(8 * 1.55em)}
}

/* Service: Kacheln ohne Abstand zum Abschluss (Helmut, 14.10.2026) */

/* Service-Kacheln: Container nur so hoch wie die Kacheln (Helmut, 14.10.2026) */
.service-kacheln{height:auto;min-height:0;align-items:stretch}
.service-kacheln .bereich{align-self:stretch}


/* Hausverwaltung: Abstaende um rund ein Drittel enger (Helmut, 14.10.2026) */
section[aria-labelledby="leistungen-titel"]{padding-bottom:clamp(48px,4.67vw,67px)}
section[aria-labelledby="service-titel-66"]{padding-top:clamp(29px,3.1vw,44px)}
@media (min-width:1101px){ section[aria-labelledby="wechsel-titel"] .karte-schluss{height:calc(96vh - var(--t) - 38px)} }

/* Service-Baustein auf der Hausverwaltung: Knoepfe gefuellt statt umrandet (Helmut, 14.10.2026) */
section[aria-labelledby="service-titel-66"] .hilfe-feld a{color:var(--papier);background:var(--tinte);border-color:var(--tinte)}
section[aria-labelledby="service-titel-66"] .hilfe-feld a:hover,
section[aria-labelledby="service-titel-66"] .hilfe-feld a:focus-visible{color:var(--tinte);background:transparent;border-color:var(--tinte)}

/* Drei Felder auf dem Tablet: Trennlinie zwischen den beiden Zeilen bleibt (Helmut, 14.10.2026) */
@media (max-width:1100px) and (min-width:701px){
 .hilfe-raster.drei .hilfe-feld:nth-child(2){border-bottom:1px solid var(--linie);padding-bottom:clamp(28px,3vw,44px)}
 .hilfe-raster.drei .hilfe-feld:last-child{border-bottom:0;padding-bottom:clamp(28px,3vw,44px)}
}

/* Service-Baustein: das ganze Feld ist der Knopf — Flaeche dunkel, Inhalt hell (Helmut, 14.10.2026) */
section[aria-labelledby="service-titel-66"] .hilfe-feld, section[aria-label="Hilfreiche Seiten"] .hilfe-feld{position:relative;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease)}
section[aria-labelledby="service-titel-66"] .hilfe-feld a::after, section[aria-label="Hilfreiche Seiten"] .hilfe-feld a::after{content:"";position:absolute;inset:0}
section[aria-labelledby="service-titel-66"] .hilfe-feld:has(a:hover), section[aria-labelledby="service-titel-66"] .hilfe-feld:has(a:focus-visible), section[aria-label="Hilfreiche Seiten"] .hilfe-feld:has(a:hover), section[aria-label="Hilfreiche Seiten"] .hilfe-feld:has(a:focus-visible){background:var(--tinte);color:var(--papier)}
section[aria-labelledby="service-titel-66"] .hilfe-feld:has(a:hover) .hilfe-icon svg, section[aria-labelledby="service-titel-66"] .hilfe-feld:has(a:focus-visible) .hilfe-icon svg, section[aria-label="Hilfreiche Seiten"] .hilfe-feld:has(a:hover) .hilfe-icon svg, section[aria-label="Hilfreiche Seiten"] .hilfe-feld:has(a:focus-visible) .hilfe-icon svg{stroke:var(--papier)}
section[aria-labelledby="service-titel-66"] .hilfe-feld a:hover, section[aria-labelledby="service-titel-66"] .hilfe-feld a:focus-visible, section[aria-label="Hilfreiche Seiten"] .hilfe-feld a:hover, section[aria-label="Hilfreiche Seiten"] .hilfe-feld a:focus-visible{color:var(--tinte);background:var(--papier);border-color:var(--papier);outline:none}

/* Mitarbeiten-Bereich: Icon oben, Ueberschrift darunter, Aufzaehlung auf der Textlinie
   der Intro-Spalte (Helmut, 14.10.2026) */
@media (min-width:1201px){
 #arbeit{--textlinie:calc(18px + 24px + 1.9 * clamp(2.6rem,6.4vw,6.8rem) + clamp(26px,3vw,44px) + 10px)}
 #arbeit .tafel-intro{grid-template-columns:1fr;width:min(805px,56vw);align-items:start}
 #arbeit .tafel-intro h2{max-width:11ch}
 #arbeit .tafel-intro > div > p:last-child{max-width:46ch}
 #arbeit .tafel{padding-top:calc(clamp(28px,4vw,64px) + var(--mitte,0px))}
 #arbeit .tafel-text{grid-template-columns:1fr;grid-template-rows:26px calc(var(--textlinie) - 26px) auto;align-items:start;column-gap:0}
 #arbeit .tafel-icon-huelle{grid-column:1;grid-row:1;align-self:start}
 #arbeit .tafel-text h3{grid-column:1;grid-row:2;margin:22px 0 0}
 #arbeit .tafel-text ul{grid-column:1;grid-row:3;margin-top:0}
 #arbeit .tafel-ende{width:31vw;min-width:340px;display:grid;justify-content:start;grid-template-rows:26px calc(var(--textlinie) - 26px) auto auto;align-content:start;justify-items:start;gap:0;padding-bottom:clamp(28px,4vw,64px)}
 #arbeit .tafel-ende .tafel-icon-huelle{grid-row:1}
 #arbeit .tafel-ende p.display:nth-of-type(1){grid-row:2;margin:22px 0 0;max-width:none;font-size:clamp(2.4rem,3vw,3.2rem);line-height:.95;letter-spacing:-.05em}
 #arbeit .tafel-ende p.display:nth-of-type(2){grid-row:3;margin:0}
 #arbeit .tafel-ende a{grid-row:4;margin-top:24px}
 /* Intro: Kicker auf Icon-Hoehe, Ueberschrift auf Ueberschriftenhoehe, Text auf der Textlinie */
 #arbeit .tafel-intro h2{margin-top:30px}
 #arbeit .tafel-intro > div > p:last-child{margin-top:calc(clamp(26px,3vw,44px) - 6px)}
}

/* Wilhelmstrasse: Bild ueber die ganze Breite, Text weiss im Bild (Helmut, 14.10.2026) */
section[aria-labelledby="buero-titel"]{padding:0}
section[aria-labelledby="buero-titel"] .versicherung{display:block;position:relative;isolation:isolate}
section[aria-labelledby="buero-titel"] .versicherung::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(10,10,10,.78) 0%,rgba(10,10,10,.45) 38%,rgba(10,10,10,.08) 72%,rgba(10,10,10,0) 100%)}
section[aria-labelledby="buero-titel"] .versicherung-bild{width:100%;margin:0;height:auto}
section[aria-labelledby="buero-titel"] .versicherung-bild img{width:100%;height:auto;object-fit:contain;display:block}
section[aria-labelledby="buero-titel"] .versicherung-text{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:var(--rand);color:var(--papier);display:grid;gap:0}
section[aria-labelledby="buero-titel"] .versicherung-text h2{font-size:clamp(2.4rem,4.6vw,4.2rem);margin:0;color:var(--papier)}
section[aria-labelledby="buero-titel"] .versicherung-text p{margin-top:clamp(14px,1.6vw,22px);max-width:52ch;color:var(--papier)}
/* Handy: das Bild bleibt ganz sichtbar, der Text steht darunter auf dunklem Grund */
@media (max-width:700px){
 section[aria-labelledby="buero-titel"] .versicherung{display:flex;flex-direction:column-reverse}
 section[aria-labelledby="buero-titel"] .versicherung-text{position:static;background:var(--tinte);padding:var(--rand)}
 section[aria-labelledby="buero-titel"] .versicherung-text p{max-width:none}
 section[aria-labelledby="buero-titel"] .versicherung::after{display:none}
}

/* Aktuelles-Lauf: Schlusstafel auf denselben Linien wie die Meldungen (Helmut, 14.10.2026) */
@media (min-width:1201px){
 #aktuelles .tafel-ende{display:grid;align-content:start;justify-items:start;justify-content:start;gap:0}
 #aktuelles .tafel-ende .tafel-ende-titel{margin:115px 0 0;font-size:clamp(1.3rem,2vw,1.75rem);line-height:1.15;max-width:none}
 #aktuelles .tafel-ende .tafel-ende-text{margin:0;font-size:clamp(1.3rem,2vw,1.75rem);line-height:1.15;max-width:none}
 #aktuelles .tafel-ende a.knopf{margin-top:313px}
}

/* bAV-Bloecke: Bild nur so hoch wie der Text, Text oben buendig, groessere Ueberschrift,
   Fliesstext so breit wie die Einleitung oben (Helmut, 14.10.2026) */
.bav-block .bav-text h3{font-size:clamp(1.9rem,2.8vw,2.6rem);line-height:1.12}
.bav-block .bav-text h3 + p{margin-top:26px}
@media (min-width:901px){
 .bav-block{align-items:start}
 /* Textbreite wie die Einleitung oben (68ch), begrenzt durch die halbe Spalte —
    so bleiben die Bilder bis zur Mitte. (Helmut, 14.10.2026) */
 .bav-block .bav-text{max-width:none}
 .bav-block .bav-text p, .bav-block .bav-text h3{max-width:68ch}
 .bav-block .bav-text{padding-bottom:80px}
 .bav-block.gedreht .bav-text{padding-top:80px;padding-bottom:0}
 .bav-block .bav-bild{aspect-ratio:auto;align-self:stretch;position:relative;overflow:hidden}
 .bav-block .bav-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
}


/* Namenszeile unter dem Zitat: kleine Kickerschrift wie zuvor (Helmut, 14.10.2026) */
#wort-titel{font-size:.72rem;line-height:1.4;letter-spacing:.1em;font-weight:400;margin-top:clamp(28px,3vw,44px)}

/* Tafeln aus dem Kurzbefehl: der Wrapper zaehlt nicht als eigenes Element (14.10.2026) */
.spur > .bde-shortcode{display:contents}

/* Eingeloggt schiebt die WordPress-Leiste die Seite um 32 Pixel nach unten; die klebenden
   Spalten muessen das mitmachen, sonst rutschen sie beim ersten Scrollen. (Helmut, 14.10.2026) */
@media screen and (min-width:783px){
 body.admin-bar #impressum .fragen > div:first-child,
 body.admin-bar #datenschutz .fragen > div:first-child{top:calc(clamp(110px,14vh,170px) + 32px)}
}

/* Tablet und Handy: halber Abstand zwischen Kundenstimmen und "Gut zu wissen" (Helmut, 14.10.2026) */
@media (max-width:1200px){
 section[aria-labelledby="stimmen-titel"]{padding-bottom:32px}
 .bde-shortcode:has(section[aria-labelledby="stimmen-titel"]) + section[aria-labelledby="fragen-titel"]{padding-top:32px}
}

/* Die Buehne der Kundenstimmen waechst weich mit (Tablet und Handy) */
@media (max-width:1200px){ .stimmen-buehne{min-height:0;transition:height .45s var(--ease)} }

/* Tablet: die drei Service-Felder stehen untereinander statt 2 + 1 (Helmut, 14.10.2026) */
@media (max-width:1100px){
 .hilfe-raster.drei{grid-template-columns:1fr}
 .hilfe-raster.drei .hilfe-feld:nth-child(n){border-right:0;padding-left:var(--rand);padding-right:var(--rand);border-bottom:1px solid var(--linie);padding-bottom:clamp(28px,3vw,44px)}
 .hilfe-raster.drei .hilfe-feld:last-child{border-bottom:0;padding-bottom:clamp(28px,3vw,44px)}
}

/* Tablet: bAV-Bloecke zweispaltig — Text zwei Drittel links, Bild ein Drittel rechts,
   randabfallend; beide Bloecke gleich herum, dazwischen etwas Abstand. (Helmut, 14.10.2026) */
@media (min-width:701px) and (max-width:1200px){
 .bav-block, .bav-block.gedreht{display:grid;grid-template-columns:2fr 1fr;align-items:start;gap:0}
 .bav-block .bav-text, .bav-block.gedreht .bav-text{order:0;padding:0 clamp(24px,3vw,44px) 0 0}
 .bav-block .bav-bild, .bav-block.gedreht .bav-bild{order:1;align-self:stretch;position:relative;overflow:hidden;aspect-ratio:auto;margin-left:0;margin-right:calc(-1 * var(--rand));width:calc(100% + var(--rand));min-height:240px}
 .bav-block .bav-bild img, .bav-block.gedreht .bav-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
 .bav-block + .bav-block{margin-top:clamp(32px,4.5vw,56px)}
}

/* Tablet, Schlusstafel im Jobs-Bereich: Icon links, daneben in einer Zeile
   "Klingt nach dir? Dann schreib uns." in Ueberschriftengroesse, Knopf darunter.
   (Helmut, 14.10.2026) */
@media (min-width:601px) and (max-width:1200px){
 #arbeit .tafel-ende{display:grid;grid-template-columns:auto auto 1fr;align-items:center;justify-items:start;gap:0 12px;padding-bottom:clamp(56px,8vw,128px)}
 #arbeit .tafel-ende .tafel-icon-huelle{grid-column:1;grid-row:1;align-self:center;margin:0}
 #arbeit .tafel-ende p.display:nth-of-type(1){grid-column:2;grid-row:1;margin:0;font-size:clamp(2rem,4vw,2.6rem);line-height:1.12;max-width:none}
 #arbeit .tafel-ende p.display:nth-of-type(2){grid-column:3;grid-row:1;margin:0;font-size:clamp(2rem,4vw,2.6rem);line-height:1.12;max-width:none}
 #arbeit .tafel-ende a{grid-column:1 / -1;grid-row:2;margin-top:clamp(30px,3.9vw,48px)}
}

/* Tablet: Wilhelmstrasse wie am Computer — Bild randlos direkt unter dem dunklen Bereich,
   Text weiss im Bild. Ohne das hier wird .versicherung-text auf display:contents gesetzt,
   dann steht die weisse Schrift unsichtbar neben dem Bild. (Helmut, 14.10.2026) */
@media (min-width:701px) and (max-width:1200px){
 section[aria-labelledby="buero-titel"]{padding:0}
 section[aria-labelledby="buero-titel"] .versicherung{display:block;position:relative;margin:0;padding:0;gap:0}
 section[aria-labelledby="buero-titel"] .versicherung-bild{margin:0;width:100%;height:auto}
 section[aria-labelledby="buero-titel"] .versicherung-bild img{width:100%;height:auto;display:block}
 section[aria-labelledby="buero-titel"] .versicherung-text{display:grid;position:absolute;left:0;right:0;bottom:0;top:auto;z-index:2;padding:var(--rand);background:none}
}

/* Tablet: Die Aktuelles-Tafeln nutzen die ganze Breite. Ohne das hier erben sie von den
   Schaden-Tafeln die schmale Nummernspalte (9rem). (Helmut, 14.10.2026) */
@media (min-width:601px) and (max-width:1200px){
 #aktuelles .tafel:not(.tafel-intro):not(.tafel-ende){display:block}
 #aktuelles .tafel-text{max-width:none;width:auto}
 #aktuelles .tafel-news h3.display{min-height:0}
 #aktuelles .tafel-news .tafel-text > p:not(.mono):not(.aktuell-quelle){min-height:0}
}

/* Tablet quer (901–1200 px): Auch dort laufen die Aktuelles-Tafeln nicht mehr seitlich,
   sondern stehen untereinander ueber die ganze Breite. (Helmut, 14.10.2026) */
@media (min-width:901px) and (max-width:1200px){
 #aktuelles{height:auto !important}
 #aktuelles .buehne{position:static;height:auto;display:block;overflow:visible;top:auto;padding-block:0}
 #aktuelles .spur{flex-direction:column;display:block;transform:none !important;width:auto}
 #aktuelles .tafel{width:auto;min-width:0;height:auto;border-left:0;border-top:1px solid var(--linie-hell);padding-left:var(--rand);padding-right:var(--rand)}
 #aktuelles .tafel-intro{border-top:0;width:auto}
 #aktuelles .tafel:not(.tafel-intro):not(.tafel-ende){display:block}
 #aktuelles .tafel-text{max-width:none;width:auto}
 #aktuelles .tafel-news h3.display{min-height:0}
 #aktuelles .tafel-news .tafel-text > p:not(.mono):not(.aktuell-quelle){min-height:0}
 #aktuelles .tafel-intro .aktuell-sub{align-self:auto}
 #aktuelles .tafel-intro > div{min-height:0;display:block}
 #aktuelles .tafel-ende{display:block}
 #aktuelles .tafel-ende .tafel-ende-titel, #aktuelles .tafel-ende .tafel-ende-text{margin:0;max-width:none}
 #aktuelles .tafel-ende a.knopf{margin-top:clamp(20px,2.6vw,32px)}
}

/* Tablet, Service: Schlusstafel wie am Computer — beide Saetze als Ueberschrift oben,
   Knopf darunter; weniger Luft unter dem Knopf. Und nach der letzten Frage so viel
   Abstand wie eine Frage hoch ist. (Helmut, 14.10.2026) */
@media (min-width:601px) and (max-width:1200px){
 #aktuelles .tafel-ende .tafel-ende-titel, #aktuelles .tafel-ende .tafel-ende-text{font-size:clamp(1.3rem,2.4vw,1.75rem);line-height:1.15;margin:0;max-width:none}
 #aktuelles .tafel-ende a.knopf{margin-top:clamp(22px,2.8vw,34px)}
 #aktuelles .tafel-ende{padding-bottom:clamp(18px,2.4vw,30px);gap:0}
 section[aria-labelledby="fragen-titel"]{padding-bottom:76px}
}

/* Handy: Nach der letzten Frage so viel Abstand, wie eine einzeilige Frage hoch ist
   (Helmut, 14.10.2026) */
@media (max-width:600px){
 section[aria-labelledby="fragen-titel"]{padding-bottom:85px}
}

/* Handy: weniger Luft zwischen der Ueberschrift und dem Bild im Kopfbereich (Helmut, 14.10.2026) */
@media (max-width:600px){ .held .held-unten{margin-top:33px} }

/* Handy, bAV-Bloecke: flachere Bilder (ein Drittel weniger Hoehe, oben ausgerichtet),
   mehr Luft zwischen Bild und Ueberschrift und zwischen den beiden Bloecken.
   (Helmut, 14.10.2026) */
@media (max-width:600px){
 .bav-block, .bav-block.gedreht{gap:40px}
 .bav-block .bav-bild, .bav-block.gedreht .bav-bild{aspect-ratio:9 / 4;height:auto;overflow:hidden}
 .bav-block .bav-bild img, .bav-block.gedreht .bav-bild img{width:100%;height:100%;object-fit:cover;object-position:center top}
 .bav-block + .bav-block{margin-top:40px}
}

/* Handy, Schlusstafel im Jobs-Bereich: Icon links wie in den Tafeln darueber,
   "Klingt nach dir? Dann schreib uns." als Ueberschrift. (Helmut, 14.10.2026) */
@media (max-width:600px){
 #arbeit .tafel-ende{display:grid;grid-template-columns:auto 1fr;align-items:center;justify-items:start;gap:0 14px}
 #arbeit .tafel-ende .tafel-icon-huelle{grid-column:1;grid-row:1;margin:0;align-self:center}
 #arbeit .tafel-ende p.display:nth-of-type(1){grid-column:2;grid-row:1;margin:0;font-size:1.8rem;line-height:1.12;max-width:none}
 #arbeit .tafel-ende p.display:nth-of-type(2){grid-column:2;grid-row:2;margin:6px 0 0;font-size:1.8rem;line-height:1.12;max-width:none}
 #arbeit .tafel-ende a{grid-column:2;grid-row:3;margin-top:clamp(20px,5vw,28px)}
}

/* Handy: Wilhelmstrasse wie auf den groesseren Schirmen — ganzes Bild, Text weiss darin,
   kleinere Schrift, kein Weissraum zum Fuss. (Helmut, 14.10.2026) */
@media (max-width:700px){
 section[aria-labelledby="buero-titel"]{padding:0}
 section[aria-labelledby="buero-titel"] .versicherung{display:block;position:relative;flex-direction:row}
 section[aria-labelledby="buero-titel"] .versicherung::after{display:block}
 section[aria-labelledby="buero-titel"] .versicherung-bild{margin:0;width:100%;height:auto}
 section[aria-labelledby="buero-titel"] .versicherung-bild img{width:100%;height:auto;display:block}
 section[aria-labelledby="buero-titel"] .versicherung-text{position:absolute;left:0;right:0;bottom:0;top:auto;z-index:2;padding:14px 16px;background:none;gap:4px}
 section[aria-labelledby="buero-titel"] .versicherung-text h2{font-size:1.15rem;line-height:1.1;margin:0}
 section[aria-labelledby="buero-titel"] .versicherung-text p{font-size:.72rem;line-height:1.4;max-width:none;margin:0}
 section[aria-labelledby="buero-titel"] .versicherung::after{background:linear-gradient(to top,rgba(10,10,10,.88) 0%,rgba(10,10,10,.6) 45%,rgba(10,10,10,.12) 80%,rgba(10,10,10,0) 100%)}
}

/* Handy, Aktuelles: Der Knopf gehoert zum Text darueber — naeher heran, mehr Abstand
   zur Trennlinie darunter. (Helmut, 14.10.2026) */
@media (max-width:600px){
 #aktuelles .tafel-news a.knopf{margin-top:0}
 #aktuelles .tafel-news{padding-bottom:56px;padding-top:48px}
 /* Die Datumszeile hatte vom Computer-Layout eine Mindesthoehe von vier Zeilen geerbt —
    dadurch standen Datum und Ueberschrift 85 px auseinander. (Helmut, 14.10.2026) */
 #aktuelles .tafel-news p.mono{min-height:0}
 #aktuelles .tafel-news h3.display{min-height:0;margin-top:0}
 #aktuelles .tafel-news .tafel-text > p:not(.mono):not(.aktuell-quelle){min-height:0}
 #aktuelles .tafel-news .aktuell-quelle{min-height:0;margin-top:10px}
 #aktuelles .tafel-news a.knopf{margin-top:10px}
}


/* Hauptmenue statt der Nummern 01-05 (Helmut, 15.10.2026).
   Im Ruhezustand steht nur das Wort. Beim Ueberfahren rutscht von links ein Pfeil herein
   (Form wie in den Knoepfen) und schiebt das Wort zur Seite. Der Pfeil sitzt mittig zur
   Versalhoehe des Wortes, also 7 px ueber der Mitte der Zeilenbox (= .175em des Zeichens,
   gemessen bei 1440 px). Er liegt absolut, damit das Layout ruhig bleibt.
   Die Staffelung der Menuezeilen liegt nur am transform, sonst faerbt sich 'Kontakt'
   spaeter ein als 'Hausverwaltung'. */
.ebene-menue a{position:relative}
.ebene-menue a .mono{position:absolute;left:0;top:calc(50% - .175em);font-size:.42em;line-height:1;letter-spacing:0;display:block;width:1.15em;height:1em;overflow:visible;text-indent:-99em;color:var(--papier);opacity:0;transform:translate(-85%,-50%);transition:transform .3s ease,opacity .22s ease;pointer-events:none}
.ebene-menue a .mono::after{content:"";position:absolute;right:0;top:50%;width:.5625em;height:1em;transform:translateY(-50%);background:currentColor;-webkit-mask:url(/wp-content/uploads/mayer/img/pfeil-spitze-2.svg) center/contain no-repeat;mask:url(/wp-content/uploads/mayer/img/pfeil-spitze-2.svg) center/contain no-repeat}
.ebene-menue a .mono::before{content:"";position:absolute;right:.0625em;top:50%;width:.95em;height:.0667em;border-radius:.05em;background:currentColor;transform:translateY(-50%)}
.ebene-menue a > span:not(.mono){display:block;transition:transform .3s ease}
.ebene-menue a:hover .mono{opacity:.55;transform:translate(0,-50%)}
.ebene-menue a:hover > span:not(.mono){transform:translateX(.68em)}
.ebene .ebene-menue a{transition:transform .7s var(--ease),color .3s ease}
.ebene .ebene-menue li:nth-child(2) a{transition:transform .7s var(--ease) .05s,color .3s ease 0s}
.ebene .ebene-menue li:nth-child(3) a{transition:transform .7s var(--ease) .1s,color .3s ease 0s}
.ebene .ebene-menue li:nth-child(4) a{transition:transform .7s var(--ease) .15s,color .3s ease 0s}
.ebene .ebene-menue li:nth-child(5) a{transition:transform .7s var(--ease) .2s,color .3s ease 0s}
.ebene:not(.offen) .ebene-menue a{transition-delay:0s}
@media (prefers-reduced-motion:reduce){.ebene-menue a .mono,.ebene-menue a > span:not(.mono){transition:none}}

/* Startseite: die Ueberschrift steht mittig - nur auf dem Desktop (Helmut, 15.10.2026).
   Der laufende Schriftring ist dafuer wieder entfallen. */
@media (min-width:1201px){body.home .held h1{text-align:center}}


/* Ankersprünge: der Zielabschnitt steht oben buendig. Die Kopfzeile faehrt beim
   Sprung nach unten ohnehin weg, ihre Hoehe darf also nicht zusaetzlich abgezogen
   werden - sonst bleibt ein Streifen des vorigen Abschnitts stehen.
   (Helmut, 16.10.2026) */
/* Die uebrigen Sprungziele sind Abschnitte mit eigenem Innenabstand und stehen schon
   buendig. Nur diese Ueberschrift ist selbst das Ziel und wuerde sonst am Rand kleben. */
#buero-titel{scroll-margin-top:28px}