/* Hausverwaltung Rehbein · Starter hausverwaltung-weg · style.css (Stand 05.11.2026)
   Leitidee: „Wie im Hauseingang: für jedes Anliegen eine Klingel, und hinter jeder Klingel ein Name.“
   Formen aus dem Hauseingang: Messingschild (Klingelbrett, Seitenschild, Kapitelkante, Team), Schaukasten mit Aushang
   (Störungen, Notfall, freie Wohnungen), Briefkasten (Schadenmeldung, Danke, Fuß als Briefkastenanlage).
   Bewegung nur nach der Partitur des Rezepts: nichts bewegt sich ohne Eingabe, keine Scroll-Reveals.
   Alle Werte aus tokens.css; Dauern und Kurven nur als Variablen. */

/* ------------------------------------------------------------ Grund */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; interpolate-size: allow-keywords; scroll-padding-top: 120px; }
html[data-bewegung="ruhig"] { --dauer-klein: 150ms; --dauer-mittel: 150ms; --dauer-gross: 150ms; --dauer-seitenwechsel: 150ms; --dauer-schliessen: 100ms; --dauer-hover-ein: 150ms; --dauer-hover-aus: 100ms; }
body { font-family: var(--schrift-text); font-size: 1.0625rem; line-height: var(--zeilenhoehe-text); color: var(--farbe-text); background: var(--farbe-grund); hyphens: auto; overflow-wrap: break-word; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
p, li, dd { max-width: var(--mass); }
h1, h2, h3, .h1, .h2, .h3 { hyphens: manual; text-wrap: balance; overflow-wrap: normal; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ziffern { font-variant-numeric: tabular-nums lining-nums; font-weight: 500; white-space: nowrap; }
.huelle { width: 100%; max-width: calc(var(--raster-max) + 2 * var(--raster-rand)); margin-inline: auto; padding-inline: var(--raster-rand); }
.sektion { padding-block: var(--raum-sektion); }
.kante + .sektion, .kante + section .sektion { padding-top: var(--raum-7); }
.leise { color: var(--farbe-leise); font-size: .9375rem; }
.abstand-oben { margin-top: var(--raum-6); }
:focus-visible { outline: var(--fokus-ring); outline-offset: var(--fokus-abstand); }
.dunkel :focus-visible, .fuss :focus-visible, .notleiste :focus-visible { outline-color: #fff; }

/* Typo-Hierarchie: Serif für Aussagen (h1, Kapitel), Kursiv für die zweite Stimme, Geist für Gebrauch, gravierte Versalien für Schilder */
.h1, .hero-h1 { font-family: var(--schrift-headline); font-weight: 600; font-variation-settings: 'opsz' 60; letter-spacing: -.015em; line-height: 1.05; }
.h1 { font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem); }
.h2 { font-family: var(--schrift-headline); font-weight: 600; font-variation-settings: 'opsz' 36; font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.375rem); line-height: 1.12; letter-spacing: -.01em; margin-bottom: var(--raum-4); }
.h3 { font-family: var(--schrift-text); font-weight: 600; font-size: 1.25rem; line-height: 1.3; margin-bottom: var(--raum-2); }
.lead { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.55; margin-top: var(--raum-5); max-width: 52ch; }
.lead-klein { margin-bottom: var(--raum-6); }
.hell-leise { color: var(--dunkel-leise); }

/* Links: unterstreichung-varianten, Variante wiederkehr (Linie zieht sich zurück und kommt von links wieder) */
@media (hover: hover) and (pointer: fine) {
  .kante-wer, .fach a, .fach-knopf, .krumen a, .recht-text a, .nav-link, .leise a, .notleiste a, .menue-liste a, .frage-antwort a, .textknopf { text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px; }
  .nav-link, .menue-liste a { background-size: 0 2px; }
  .nav-link[aria-current="page"] { background-size: 100% 2px; }
  .kante-wer:hover, .fach a:hover, .fach-knopf:hover, .krumen a:hover, .recht-text a:hover, .leise a:hover, .notleiste a:hover, .frage-antwort a:hover, .textknopf:hover { animation: wiederkehr var(--dauer-hover-ein) var(--ease-ein); }
  .nav-link:hover, .menue-liste a:hover { background-size: 100% 2px; transition: background-size var(--dauer-hover-ein) var(--ease-ein); }
}
@keyframes wiederkehr { 0% { background-position: 100% 100%; background-size: 100% 1px; } 45% { background-position: 100% 100%; background-size: 0 1px; } 46% { background-position: 0 100%; background-size: 0 1px; } 100% { background-position: 0 100%; background-size: 100% 1px; } }

/* ------------------------------------------------------------ Sprunglinks */
.sprungleiste { position: absolute; top: 0; left: 0; z-index: 100; }
.sprung { position: absolute; left: 12px; top: -80px; background: var(--farbe-dunkel); color: #fff; padding: 12px 16px; border-radius: var(--radius-klein); white-space: nowrap; }
.sprung:focus { top: 12px; }

/* ------------------------------------------------------------ Kopf (steht beim Seitenwechsel: view-transition-name kopf) */
.kopf { position: sticky; top: 0; z-index: 30; background: var(--farbe-grund); border-bottom: 1px solid var(--farbe-linie); view-transition-name: kopf; }
.notleiste { background: var(--farbe-dunkel); color: #fff; font-size: .875rem; line-height: 1.35; }
.notleiste-innen { display: flex; align-items: center; justify-content: space-between; gap: var(--raum-4); min-height: 36px; padding-block: 6px; }
.notleiste-text { max-width: none; }
.notleiste-text b { display: inline-flex; align-items: center; gap: 8px; margin-right: 4px; }
.notleiste-text b::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--farbe-signal); box-shadow: 0 0 0 2px #fff; }
.notleiste a { color: #fff; font-weight: 600; }
.notleiste-alle { white-space: nowrap; }
.kopf-innen { display: flex; align-items: center; gap: var(--raum-5); min-height: 68px; }
.marke { display: flex; flex-direction: column; text-decoration: none; margin-right: auto; line-height: 1; }
.marke-wort { font-family: var(--schrift-headline); font-weight: 600; font-variation-settings: 'opsz' 36; font-size: 1.75rem; letter-spacing: -.02em; }
.marke-zusatz { font-size: .75rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--farbe-leise); margin-top: 4px; }
.kopf-nav ul { display: flex; gap: var(--raum-5); list-style: none; padding: 0; }
.nav-link { font-weight: 500; font-size: .9375rem; text-decoration: none; padding-block: 10px; }
.nav-link[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .4em; }
@media (hover: hover) and (pointer: fine) { .nav-link[aria-current="page"] { text-decoration: none; } }
.kopf-status { display: flex; align-items: center; gap: 8px; font-size: .8125rem; color: var(--farbe-leise); max-width: none; line-height: 1.25; white-space: nowrap; }
.punkt { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--farbe-leise); box-shadow: 0 0 0 3px rgba(90, 93, 97, .18); }
[data-offen="ja"] .punkt { background: #2F6B45; box-shadow: 0 0 0 3px rgba(47, 107, 69, .2); }
.menue-knopf { display: none; min-height: 44px; padding: 0 14px; border: 1px solid var(--farbe-leise); border-radius: var(--radius-klein); background: none; font-weight: 600; }

/* Knöpfe: button-zustaende (Ziegel nur für Schaden melden), Schiefer und Messing für den Rest, pfeil-icon-button Variante linie */
.knopf-ziegel, .knopf-ziegel-btn, .knopf-schiefer, .knopf-messing { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--button-hoehe); padding: 0 20px; border: 0; border-radius: var(--radius-button); font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none; text-align: center; transition: background-color var(--dauer-hover-aus) var(--ease-aus), transform var(--dauer-klein) var(--ease-aus); }
.knopf-ziegel, .knopf-ziegel-btn { background: var(--farbe-signal); color: #fff; }
.knopf-schiefer { background: var(--farbe-dunkel); color: #fff; }
.knopf-messing { background: var(--farbe-flaeche); color: var(--farbe-text); }
@media (hover: hover) and (pointer: fine) {
  .knopf-ziegel:hover, .knopf-ziegel-btn:hover { background: var(--signal-dunkel); transition-duration: var(--dauer-klein); transition-timing-function: var(--ease-ein); }
  .knopf-schiefer:hover { background: #1D2024; transition-timing-function: var(--ease-ein); }
  .knopf-messing:hover { background: var(--messing-hell); transition-timing-function: var(--ease-ein); }
}
.knopf-ziegel:active, .knopf-ziegel-btn:active, .knopf-schiefer:active, .knopf-messing:active { transform: scale(.98); }
[data-knopf] { position: relative; }
.knopf-laden { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; }
[data-knopf][data-zustand="laden"] .knopf-laden { display: inline-block; animation: drehen 800ms linear infinite; }
[data-knopf][data-zustand="laden"] { pointer-events: none; }
[data-knopf][data-zustand="fertig"]::after { content: "✓"; font-weight: 700; }
@keyframes drehen { to { transform: rotate(1turn); } }
.textpfeil { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--raum-4); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding-block: 8px 4px; }
.textpfeil.gross { font-family: var(--schrift-headline); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); font-weight: 600; font-variation-settings: 'opsz' 36; border-bottom-width: 2px; }
.pfeil-i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dauer-hover-aus) var(--ease-aus); }
@media (hover: hover) and (pointer: fine) { .textpfeil:hover .pfeil-i, .leistung-link:hover .pfeil-i { transform: translateX(4px); transition: transform var(--dauer-hover-ein) var(--ease-ein); } }
.textknopf { background: none; border: 0; padding: 10px 0; font-weight: 600; text-decoration: underline; min-height: 44px; }

/* ------------------------------------------------------------ Messing: ein Material für Klingel, Schild, Kante, Tableau */
.klingel, .seitenschild, .kante-schild, .ansprech-schild, .person, .typschild, .fach-schild, .vorgang-schild, .leeres-schild, .bu-marke {
  background-color: var(--farbe-flaeche);
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .2) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(0, 0, 0, .12);
  border: 1px solid rgba(90, 93, 97, .55);
}
.schraube { flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #F4EEDD, #8A7A55); box-shadow: 0 0 0 1px rgba(0, 0, 0, .18); }
.schraube::after { content: ""; display: block; width: 6px; height: 1px; margin: 3.5px auto 0; background: rgba(0, 0, 0, .35); transform: rotate(-35deg); }
.klingel-nr { font-size: .6875rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--farbe-leise); }
.klingel-knopf { flex: none; position: relative; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #F6EFDC, #A8976F 72%); box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(0, 0, 0, .15); }
.klingel-knopf::after { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: var(--farbe-dunkel); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); transition: transform var(--dauer-klein) var(--ease-aus), background-color var(--dauer-hover-aus) var(--ease-aus); }

/* ------------------------------------------------------------ Start: erster Bildschirm */
.hero { padding-top: clamp(20px, 3.2vw, 44px); }
.hero-h1 { font-size: var(--h1-gross); max-width: none; margin-bottom: clamp(18px, 2.4vw, 32px); }
.hero-h1 em { display: block; font-style: italic; font-weight: 400; color: var(--farbe-leise); }
.hero-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--raster-spalt); align-items: stretch; }
.hero-bild { grid-column: 1 / 8; display: flex; flex-direction: column; }
.hero-bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-klein); }
.hero-raster .tableau { grid-column: 8 / 13; }
.hero-fuss { display: flex; justify-content: space-between; gap: var(--raum-4); flex-wrap: wrap; max-width: none; margin-top: var(--raum-6); padding-top: var(--raum-4); border-top: 1px solid var(--farbe-linie); font-size: .875rem; color: var(--farbe-leise); }
.bu { margin-top: 10px; font-size: .8125rem; line-height: 1.45; color: var(--farbe-leise); max-width: 60ch; }
.bu-marke { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 2px; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--farbe-text); vertical-align: 1px; }

/* Tableau: Messingplatte mit Schrauben, Sprechgitter und vier Klingelschildern (nachbarn-reagieren-hover, Variante klingelbrett) */
.tableau { display: flex; flex-direction: column; padding: 16px 16px 18px; border-radius: var(--radius-gross); background: linear-gradient(165deg, #D9CCA8, var(--messing-platte) 46%, #BFAE84); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(0, 0, 0, .14); border: 1px solid var(--messing-tief); }
.tableau-kopf { display: flex; align-items: center; gap: 12px; padding: 0 2px 10px; }
.tableau-gravur { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #3D3628; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.sprechgitter { margin-left: auto; width: 74px; height: 26px; background: radial-gradient(circle, #3D3628 1.6px, transparent 2px) 0 0 / 8px 8px; opacity: .8; }
.tableau-frage { font-size: .875rem; font-weight: 600; color: #3D3628; margin: 2px 2px 10px; }
.klingeln { flex: 1; display: flex; flex-direction: column; gap: var(--raum-3); list-style: none; padding: 0; min-height: 360px; }
.klingeln > li { flex: 1 1 0; min-height: 0; display: flex; max-width: none; transition: flex-grow var(--dauer-hover-aus) var(--ease-aus); }
.klingel { position: relative; flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nr knopf" "name knopf" "zeile knopf"; align-content: center; column-gap: 14px; padding: 10px 16px; border-radius: 5px; color: var(--farbe-text); text-decoration: none; overflow: hidden; transition: background-color var(--dauer-hover-aus) var(--ease-aus); }
.klingel .klingel-nr { grid-area: nr; }
.klingel-name { grid-area: name; font-weight: 600; font-size: 1.25rem; line-height: 1.2; letter-spacing: -.005em; text-shadow: 0 1px 0 rgba(255, 255, 255, .55); }
.klingel-zeile { grid-area: zeile; font-size: .9375rem; line-height: 1.4; opacity: 0; max-height: 0; overflow: hidden; transition: opacity 120ms var(--ease-aus), max-height var(--dauer-hover-aus) var(--ease-aus), margin var(--dauer-hover-aus) var(--ease-aus); }
.klingel .klingel-knopf { grid-area: knopf; align-self: center; }
.klingel--notfall { background-color: var(--farbe-signal); background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 3px); color: #fff; border-color: #6E2716; }
.klingel--notfall .klingel-nr { color: #fff; opacity: .9; }
.klingel--notfall .klingel-name { text-shadow: 0 -1px 0 rgba(0, 0, 0, .25); }
.klingel--notfall .klingel-knopf::after { background: var(--farbe-signal); }
/* Platz machen: an 220 ms, zurück 150 ms; Nachbarn werden schmaler und heller, Schrift bleibt über 12 : 1 (Notfall 5,5 : 1) */
@media (hover: hover) and (pointer: fine) {
  .klingeln > li:has(.klingel:hover) { flex-grow: 1.4; transition: flex-grow var(--dauer-hover-ein) var(--ease-ein); }
  .klingeln:has(.klingel:hover) .klingel:not(:hover) { background-color: var(--messing-hell); background-image: none; transition: background-color var(--dauer-hover-ein) var(--ease-ein); }
  .klingeln:has(.klingel:hover) .klingel--notfall:not(:hover) { background-color: var(--signal-hell); }
  .klingel:hover .klingel-zeile { opacity: 1; max-height: 6em; margin-top: 6px; transition: opacity var(--dauer-hover-ein) var(--ease-ein) 60ms, max-height var(--dauer-hover-ein) var(--ease-ein), margin var(--dauer-hover-ein) var(--ease-ein); }
  .klingel:hover .klingel-knopf::after { background: #3F4852; }
  .klingel--notfall:hover .klingel-knopf::after { background: var(--signal-dunkel); }
}
.klingeln > li:has(.klingel:focus-visible) { flex-grow: 1.4; transition: flex-grow var(--dauer-hover-ein) var(--ease-ein); }
.klingeln:has(.klingel:focus-visible) .klingel:not(:focus-visible) { background-color: var(--messing-hell); background-image: none; }
.klingeln:has(.klingel:focus-visible) .klingel--notfall:not(:focus-visible) { background-color: var(--signal-hell); }
.klingel:focus-visible { outline: 3px solid var(--farbe-dunkel); outline-offset: 2px; }
.klingel:focus-visible .klingel-zeile { opacity: 1; max-height: 6em; margin-top: 6px; }
.klingel:active .klingel-knopf::after { transform: scale(.82); }
@media (hover: none), (pointer: coarse) { .klingel .klingel-zeile { opacity: 1; max-height: none; margin-top: 4px; } .klingeln { min-height: 0; } .klingeln > li { flex: none; } .klingel { padding-block: 14px; } }
html[data-bewegung="ruhig"] .klingeln > li { flex-grow: 1 !important; transition: none !important; }
html[data-bewegung="ruhig"] .klingel .klingel-zeile { opacity: 1; max-height: none; margin-top: 4px; transition: none; }
html[data-bewegung="ruhig"] .klingeln > li { flex: none; }
html[data-bewegung="ruhig"] .klingeln { min-height: 0; }
.tableau--klein { max-width: 560px; }
.tableau--klein .klingeln { min-height: 0; }
.tableau--klein .klingeln > li { flex: none; }

/* ------------------------------------------------------------ Kapitelkante „Klingelleiste“ (kapitel-kante-signatur, eigene Variante, steht still) */
.kante { width: 100%; max-width: calc(var(--raster-max) + 2 * var(--raster-rand)); margin: var(--raum-sektion) auto 0; padding-inline: var(--raster-rand); }
.kante::before { content: ""; display: block; height: 1px; background: var(--farbe-linie); }
.kante-schild { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; max-width: 100%; margin-top: -18px; padding: 7px 12px; border-radius: var(--radius-klein); font-size: .8125rem; line-height: 1.3; }
.kante-titel { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.kante-schild, .dunkel .kante-schild, .dunkel .kante-wer { color: var(--farbe-text); }
.kante-wer { color: var(--farbe-text); font-weight: 500; }
.kante-wer .ziffern { color: var(--farbe-leise); margin-left: 4px; }
.kante--dunkel { margin-top: 0; }
.kante--dunkel::before { display: none; }
.kante--dunkel .kante-schild { margin-top: -20px; }
.dunkel { background: var(--farbe-dunkel); color: #fff; margin-top: var(--raum-sektion); }
.dunkel a { color: #fff; }
.dunkel .knopf-messing { color: var(--farbe-text); }
.dunkel .h2 { color: #fff; }

/* ------------------------------------------------------------ Schaukasten mit Aushängen (Start, Notfall) */
.aushang-sektion { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--raster-spalt); align-items: start; }
.aushang-text { grid-column: 1 / 5; position: sticky; top: 130px; }
.schaukasten { grid-column: 5 / 13; padding: 12px; border-radius: 6px; background: #A9AEB4; border: 1px solid #8C9298; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.schaukasten-glas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; padding: 30px 24px 26px; background: var(--filz); border-radius: 2px; }
.zettel, .aushang-blatt, .wohnung, .protokoll-blatt { position: relative; background: var(--papier); border: 1px solid #D3CFC6; padding: 22px 20px 16px; }
.zettel { rotate: -.5deg; }
.zettel:nth-child(2) { rotate: .6deg; }
.zettel:nth-child(3) { rotate: .3deg; }
.zettel:nth-child(4) { rotate: -.7deg; }
.magnet { position: absolute; top: -9px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--farbe-dunkel); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .25); }
.zettel--stoerung .magnet { background: var(--farbe-signal); }
.zettel--buero .magnet { background: var(--messing-tief); }
.magnet--l { left: 12%; } .magnet--r { left: 88%; }
.zettel-kopf { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--farbe-leise); margin-bottom: 8px; }
.zettel-titel { font-size: 1.125rem; font-weight: 600; line-height: 1.3; margin-bottom: 6px; hyphens: auto; }
.zettel p { font-size: .9375rem; line-height: 1.5; }
.zettel-datum { margin-top: 12px; padding-top: 8px; border-top: 1px dashed #CFCAC0; color: var(--farbe-leise); font-size: .8125rem !important; font-variant-numeric: tabular-nums; }
.zettel-link { margin-top: 8px; font-size: .9375rem; }
.zettel--stoerung .zettel-kopf { color: var(--farbe-signal); }

/* Zuständigkeit (dunkel) */
.such-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--raum-7); align-items: start; }
.suche-haus label, .plz-pruef label, .faq-suche label { display: block; font-weight: 600; font-size: .9375rem; margin-bottom: 8px; }
.suche-zeile { display: flex; gap: 8px; }
.suche-zeile input { flex: 1; min-width: 0; }
input[type="search"], input[type="text"], input[type="tel"], input[type="email"], input[type="number"], input[type="date"], input:not([type]), input[inputmode], select, textarea {
  width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--farbe-leise); border-radius: var(--radius-klein); background: #fff; color: var(--farbe-text); font-size: 1rem; }
textarea { min-height: 112px; resize: vertical; line-height: 1.5; }
select { appearance: none; padding-right: 40px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%231D2024' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 12px center / 18px; }
.dunkel input { border-color: #fff; }
.hilfe-hell { color: var(--dunkel-leise); font-size: .875rem; margin-top: 8px; }
.hilfe { color: var(--farbe-leise); font-size: .875rem; margin-bottom: 6px; }
.such-ergebnis:not(:empty) { margin-top: var(--raum-5); }
.treffer-karte { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; align-items: center; padding: 16px; border-radius: var(--radius-gross); background: #353C44; border: 1px solid #4A525B; color: #fff; }
.suche-haus--hell .treffer-karte { background: #fff; color: var(--farbe-text); border-color: var(--farbe-linie); }
.treffer-karte .ansprech-schild { grid-row: span 3; color: var(--farbe-text); }
.treffer-haus { font-size: .875rem; color: var(--dunkel-leise); }
.suche-haus--hell .treffer-haus, .suche-haus--hell .treffer-satz { color: var(--farbe-leise); }
.treffer-tel { font-size: 1.5rem; font-weight: 600; }
.treffer-satz { font-size: .9375rem; color: var(--dunkel-leise); }
.kein-treffer { font-size: .9375rem; }

/* Preis groß */
.preis-sektion { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--raster-spalt); align-items: start; }
.preis-gross { grid-column: 1 / 6; }
.preis-text { grid-column: 7 / 13; }
.preis-zeile { display: flex; align-items: baseline; gap: 12px; max-width: none; }
.preis-ab { font-family: var(--schrift-headline); font-style: italic; font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem); color: var(--farbe-leise); }
.preis-zahl { font-size: var(--zahl-gross); line-height: .9; letter-spacing: -.04em; font-weight: 500; }
.preis-einheit { margin-top: 12px; font-size: .9375rem; color: var(--farbe-leise); max-width: 30ch; }
.plz-pruef { margin-top: var(--raum-5); max-width: 420px; }
.plz-antwort { margin-top: 10px; font-size: .9375rem; min-height: 1.5em; }
.plz-antwort b { font-weight: 600; }

/* ------------------------------------------------------------ Seitenkopf mit Seitenschild (view-transition: schild) */
.seitenkopf { padding-top: var(--raum-5); padding-bottom: clamp(24px, 4vw, 56px); }
.krumen ol { display: flex; flex-wrap: wrap; gap: 4px 8px; list-style: none; padding: 0; font-size: .8125rem; color: var(--farbe-leise); }
.krumen li + li::before { content: "/"; margin-right: 8px; color: var(--farbe-linie); }
.krumen a { text-decoration: none; }
.krumen [aria-current] { color: var(--farbe-text); }
.seitenschild { display: flex; align-items: center; gap: 14px; min-height: 64px; margin: var(--raum-4) 0 clamp(28px, 4vw, 52px); padding: 8px 14px; border-radius: 5px; max-width: none; }
.seitenschild .klingel-nr { flex: none; }
.schild-name { min-width: 0; hyphens: auto; font-weight: 600; font-size: 1.25rem; line-height: 1.2; text-shadow: 0 1px 0 rgba(255, 255, 255, .55); }
.seitenschild .klingel-knopf { margin-left: auto; }
.seitenschild--notfall { background-color: var(--farbe-signal); background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 3px); color: #fff; border-color: #6E2716; }
.seitenschild--notfall .klingel-nr { color: #fff; }
.seitenschild--notfall .schild-name { text-shadow: 0 -1px 0 rgba(0, 0, 0, .25); }
.seitenschild--notfall .klingel-knopf::after { background: var(--farbe-signal); }
.seitenkopf-raster--bild { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--raster-spalt); align-items: start; margin-top: var(--raum-4); }
.seitenkopf-links { grid-column: 1 / 8; }
.seitenkopf-links .seitenschild { margin-top: 0; }
.seitenkopf-raster--bild > :last-child { grid-column: 8 / 13; }
.seitenkopf-raster--text { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--raster-spalt); align-items: end; }
.seitenkopf-raster--text .h1 { grid-column: 1 / 8; }
.seitenkopf-raster--text .lead { grid-column: 8 / 13; margin-top: 0; padding-bottom: 6px; }
.schnell { list-style: none; padding: 0; margin-top: var(--raum-6); border-top: 2px solid var(--farbe-dunkel); max-width: 34rem; }
.schnell li { border-bottom: 1px solid var(--farbe-linie); }
.schnell a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; font-weight: 600; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .schnell a:hover .pfeil-i { transform: translateX(4px); transition: transform var(--dauer-hover-ein) var(--ease-ein); } }
.naechstes { margin-top: var(--raum-6); padding: 18px 20px; border-radius: var(--radius-gross); background: var(--farbe-flaeche); max-width: 34rem; }
.naechstes-kopf { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--farbe-leise); margin-bottom: 8px; }
.naechstes ul { list-style: none; padding: 0; }
.naechstes li { display: grid; grid-template-columns: 11ch minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid rgba(29, 32, 36, .14); font-size: .9375rem; }
.seitenkopf .im-notfall { margin: var(--raum-6) 0 0; max-width: 36rem; }
.ablauf-kurz { list-style: none; padding: 0; border-top: 2px solid var(--farbe-dunkel); }
.ablauf-kurz li { padding: 12px 0; border-bottom: 1px solid var(--farbe-linie); font-size: .9375rem; }
.ablauf-kurz b { display: block; }
.kopfbild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-klein); }
.seitenkopf .h1 { max-width: 20ch; }

/* ------------------------------------------------------------ Notfall */
.dienst-status { padding: 22px 22px 24px; border-radius: var(--radius-gross); background: var(--farbe-flaeche); border: 1px solid rgba(90, 93, 97, .4); }
.dienst-kopf { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--farbe-leise); }
.dienst-satz { font-family: var(--schrift-headline); font-weight: 600; font-variation-settings: 'opsz' 36; font-size: 1.625rem; line-height: 1.2; margin: 6px 0 8px; }
.dienst-neben { font-size: .9375rem; margin-bottom: 16px; }
.gas { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 28px; align-items: baseline; padding-block: 22px; border-top: 3px solid var(--farbe-signal); border-bottom: 1px solid var(--farbe-linie); }
.gas-titel { font-family: var(--schrift-headline); font-size: 1.75rem; font-weight: 600; color: var(--farbe-signal); }
.gas a { font-weight: 600; color: var(--farbe-signal); }
.schaukasten--gross { padding: 14px; }
.schaukasten--gross .schaukasten-glas { display: block; padding: clamp(24px, 4vw, 52px); }
.aushang-blatt { padding: clamp(24px, 4vw, 56px); rotate: -.3deg; }
.aushang-h { font-family: var(--schrift-headline); font-weight: 600; font-variation-settings: "opsz" 60; font-size: clamp(2.125rem, 1.4rem + 4.4vw, 5rem); line-height: 1; letter-spacing: -.02em; margin: 6px 0 clamp(20px, 3vw, 36px); }
.not-tabelle { width: 100%; border-collapse: collapse; }
.not-tabelle th, .not-tabelle td { text-align: left; vertical-align: baseline; padding: 16px 16px 16px 0; border-top: 1px solid #DCD8CF; }
.not-tabelle thead th { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--farbe-leise); border-top: 0; padding-block: 0 10px; }
.not-tabelle tbody th { font-weight: 600; width: 32%; }
.not-tabelle td:last-child { font-size: .9375rem; color: var(--farbe-leise); }
.not-nr { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 600; color: var(--farbe-signal); text-decoration: none; }
.not-nr:hover { text-decoration: underline; }
.aushang-fuss { margin-top: var(--raum-5); font-size: .9375rem; color: var(--farbe-leise); }
.dienstplan { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--raum-7); }
.feiertage { list-style: none; padding: 0; margin-bottom: var(--raum-4); }
.feiertage li { display: flex; gap: 14px; padding: 6px 0; border-bottom: 1px solid var(--farbe-linie); }
.band { list-style: none; padding: 0; align-self: start; }
.band li { display: grid; grid-template-columns: 34px minmax(0, 1fr) 13ch; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--farbe-linie); max-width: none; }
.band-tag { font-weight: 600; }
.band-spur { position: relative; height: 26px; border-radius: 3px; background: var(--farbe-dunkel); overflow: hidden; }
.band-spur::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 24 - 1px), rgba(255, 255, 255, .14) calc(100% / 24 - 1px) calc(100% / 24)); }
.band-buero { position: absolute; top: 0; bottom: 0; left: calc(var(--a) / 24 * 100%); width: calc((var(--b) - var(--a)) / 24 * 100%); background: var(--farbe-flaeche); }
.band-text { font-size: .875rem; }
.band li[data-heute] .band-tag::after { content: " heute"; font-weight: 500; font-size: .75rem; color: var(--farbe-signal); display: block; }
.stoer-liste { display: grid; gap: var(--raum-5); }
.stoerung { padding: 22px 24px; border: 1px solid var(--farbe-linie); border-left: 4px solid var(--farbe-signal); border-radius: var(--radius-klein); background: #fff; }
.stoerung--behoben { border-left-color: var(--farbe-leise); background: transparent; }
.stoer-status { display: inline-block; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--farbe-signal); margin-bottom: 6px; }
.stoerung--behoben .stoer-status { color: var(--farbe-leise); }
.stoer-verlauf { list-style: none; padding: 0; margin-top: var(--raum-4); }
.stoer-verlauf li { display: grid; grid-template-columns: 17ch minmax(0, 1fr); gap: 16px; padding: 10px 0; border-top: 1px dashed var(--farbe-linie); max-width: none; }
.stoer-verlauf time { font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.stoer-hilfe { margin-top: var(--raum-4); padding: 12px 14px; background: var(--farbe-flaeche); border-radius: var(--radius-klein); font-size: .9375rem; }
.wartung { list-style: none; padding: 0; }
.wartung li { display: grid; grid-template-columns: 12ch minmax(0, 1fr) minmax(0, 14rem); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--farbe-linie); max-width: none; }

/* ------------------------------------------------------------ Formulare (mehrschritt-anfrage senkrecht, datei-upload-ablage kompakt-mobil, formular-fehlerzusammenfassung liste) */
.formular-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--raster-spalt); align-items: start; }
.formular-spalte { grid-column: 1 / 8; }
.formular-neben { grid-column: 9 / 13; position: sticky; top: 130px; display: grid; gap: var(--raum-5); }
.formular-raster--kontakt .formular-spalte { grid-column: 1 / 6; }
.formular-raster--kontakt .formular-neben--form { grid-column: 7 / 13; position: static; display: block; }
.formular-raster--kontakt .weiche { grid-template-columns: minmax(0, 1fr); }
.im-notfall { padding: 16px 18px; border: 2px solid var(--farbe-signal); border-radius: var(--radius-klein); margin-bottom: var(--raum-6); }
.im-notfall-h { font-size: 1rem; font-weight: 600; color: var(--farbe-signal); margin-bottom: 4px; }
.im-notfall a { font-weight: 600; }
.briefschlitz-form { position: relative; padding-top: 34px; }
.briefschlitz-form::before { content: "Briefschlitz"; position: absolute; top: 0; left: 0; right: 0; height: 18px; border-radius: 3px; background: linear-gradient(#1D2024, #3A4149); color: transparent; font-size: 0; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .6); }
.schritt { border: 0; padding: 0 0 0 26px; margin: 0 0 var(--raum-5); border-left: 2px solid var(--farbe-linie); min-width: 0; }
.schritt[data-aktiv] { border-left-color: var(--farbe-dunkel); }
.schritt-titel { display: flex; align-items: center; gap: 12px; padding: 0; margin: 0 0 var(--raum-4) -40px; }
.schritt-nr { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 3px; background: var(--farbe-flaeche); border: 1px solid rgba(90, 93, 97, .55); font-size: .875rem; font-weight: 600; }
.schritt[data-aktiv] .schritt-nr { background: var(--farbe-dunkel); color: #fff; border-color: var(--farbe-dunkel); }
.schritt-name { font-weight: 600; font-size: 1.25rem; }
.schritt-fertig { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; color: var(--farbe-leise); font-size: .9375rem; margin-top: -8px; }
.schritt[data-zu] .schritt-inhalt { display: none; }
.schritt[data-bevor] .schritt-inhalt { display: none; }
.aendern { background: none; border: 0; padding: 8px 0; font-weight: 600; text-decoration: underline; color: var(--farbe-text); min-height: 44px; }
.feld { margin-bottom: var(--raum-5); }
.feld > label, .label { display: block; font-weight: 600; font-size: .9375rem; margin-bottom: 6px; }
.optional { font-weight: 400; color: var(--farbe-leise); }
.feld-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-4); }
.feld-fehler { margin-top: 6px; color: var(--farbe-fehler); font-size: .875rem; font-weight: 500; }
.feld-fehler::before { content: "! "; font-weight: 700; }
[aria-invalid="true"] { border: 2px solid var(--farbe-fehler) !important; }
.kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kacheln--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kachel { position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border: 1px solid var(--farbe-leise); border-radius: var(--radius-klein); background: #fff; cursor: pointer; line-height: 1.3; font-size: .9375rem; transition: background-color var(--dauer-hover-aus) var(--ease-aus); }
.kachel input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.kachel-haken { flex: none; position: relative; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--farbe-leise); }
.kachel-haken::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--farbe-dunkel); transform: scale(0); transition: transform var(--dauer-klein) var(--ease-aus); }
.kachel:has(input:checked) { background: var(--farbe-flaeche); border: 2px solid var(--farbe-dunkel); padding: 9px 13px; }
.kachel:has(input:checked) .kachel-haken { border-color: var(--farbe-dunkel); }
.kachel:has(input:checked) .kachel-haken::after { transform: scale(1); transition: transform var(--dauer-klein) var(--ease-ein); }
.kachel:has(input:focus-visible) { outline: var(--fokus-ring); outline-offset: var(--fokus-abstand); }
.kachel:has(input[aria-invalid="true"]) { border-color: var(--farbe-fehler); }
@media (hover: hover) and (pointer: fine) { .kachel:hover { background: var(--messing-hell); transition: background-color var(--dauer-hover-ein) var(--ease-ein); } }
.haken { display: flex; gap: 12px; align-items: flex-start; margin-bottom: var(--raum-4); cursor: pointer; position: relative; font-size: .9375rem; }
.haken input { position: absolute; opacity: 0; width: 24px; height: 24px; margin: 0; }
.haken-box { flex: none; width: 24px; height: 24px; border: 1.5px solid var(--farbe-leise); border-radius: 3px; background: #fff; display: grid; place-items: center; }
.haken-box::after { content: ""; width: 12px; height: 7px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform var(--dauer-klein) var(--ease-aus); }
.haken input:checked + .haken-box { background: var(--farbe-dunkel); border-color: var(--farbe-dunkel); }
.haken input:checked + .haken-box::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); transition: transform var(--dauer-klein) var(--ease-ein); }
.haken input:focus-visible + .haken-box { outline: var(--fokus-ring); outline-offset: var(--fokus-abstand); }
.weiter { margin-top: var(--raum-2); }
.ablage-knopf { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border: 1.5px dashed var(--farbe-leise); border-radius: var(--radius-klein); font-weight: 600; cursor: pointer; background: #fff; }
.ablage-knopf input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ablage-knopf:has(input:focus-visible) { outline: var(--fokus-ring); outline-offset: var(--fokus-abstand); }
.ablage-liste { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.ablage-liste li { position: relative; border: 1px solid var(--farbe-linie); border-radius: var(--radius-klein); background: #fff; overflow: hidden; font-size: .8125rem; }
.ablage-liste img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ablage-name { display: block; padding: 6px 8px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ablage-groesse { display: block; padding: 0 8px 8px; color: var(--farbe-leise); }
.ablage-weg { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(29, 32, 36, .82); color: #fff; font-size: 1.25rem; line-height: 1; }
.ablage-leer { margin-top: 10px; }
.fehlerliste { padding: 18px 20px; border: 2px solid var(--farbe-fehler); border-radius: var(--radius-klein); background: #fff; margin-bottom: var(--raum-5); }
.fehlerliste-h { font-size: 1.0625rem; font-weight: 600; margin-bottom: 6px; color: var(--farbe-fehler); }
.fehlerliste a { color: var(--farbe-fehler); font-weight: 500; }
.zusammenfassung { margin: var(--raum-5) 0; padding: 18px 20px; background: var(--farbe-flaeche); border-radius: var(--radius-klein); }
.zusammenfassung dl { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 6px 16px; font-size: .9375rem; }
.zusammenfassung dt { color: var(--farbe-leise); }
.knopf-ziegel-btn { width: 100%; min-height: 56px; font-size: 1.0625rem; }
.formular-spalte form .knopf-schiefer[data-knopf] { min-height: 52px; }
.briefkasten-bild img, .leistung-bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-klein); }
.leistung-bild img[src*="nebel"] { aspect-ratio: 3 / 2; }
.wer-liest { padding: 18px 0; border-top: 1px solid var(--farbe-linie); }
.wer-liest-kopf { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--farbe-leise); }
.wer-liest-name { font-family: var(--schrift-headline); font-size: 1.625rem; font-weight: 600; font-variation-settings: 'opsz' 36; margin: 2px 0 4px; }

/* ------------------------------------------------------------ Danke */
.vorgang { padding: 22px; border-radius: var(--radius-gross); background: var(--farbe-dunkel); color: #fff; }
.vorgang-kopf { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--dunkel-leise); margin-bottom: 10px; }
.vorgang-schild { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-radius: 4px; color: var(--farbe-text); max-width: none; }
.vorgang-schild .ziffern { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); font-weight: 600; letter-spacing: .02em; }
.kopieren { margin-top: 12px; min-height: 44px; padding: 0 14px; border: 1px solid currentColor; border-radius: var(--radius-klein); background: none; font-weight: 600; font-size: .9375rem; }
.vorgang .kopieren { color: #fff; }
.danke-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--raum-8); }
.protokoll { list-style: none; padding: 0; }
.protokoll li { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 20px; padding: 18px 0; border-top: 1px solid var(--farbe-linie); max-width: none; }
.protokoll li:first-child { border-top: 2px solid var(--farbe-dunkel); }
.protokoll-wann { font-weight: 600; }
.zusammenfassung--fest { margin-top: 0; }
.danke-neben { display: grid; gap: var(--raum-4); align-content: start; }

/* ------------------------------------------------------------ Mieter: FAQ (faq-seite-suche, Variante suche) */
.faq-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--raum-4) var(--raum-7); align-items: end; margin-bottom: var(--raum-6); }
.faq-suche input { min-height: 56px; font-size: 1.0625rem; }
.faq-zahl { grid-column: 2; font-size: .875rem; color: var(--farbe-leise); margin-top: -8px; }
.themen { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.thema { min-height: 44px; padding: 0 14px; border: 1px solid var(--farbe-leise); border-radius: var(--radius-klein); background: #fff; font-size: .9375rem; font-weight: 500; transition: background-color var(--dauer-hover-aus) var(--ease-aus); }
.thema .ziffern { color: var(--farbe-leise); margin-left: 4px; }
.thema[aria-pressed="true"] { background: var(--farbe-dunkel); border-color: var(--farbe-dunkel); color: #fff; }
.thema[aria-pressed="true"] .ziffern { color: var(--dunkel-leise); }
@media (hover: hover) and (pointer: fine) { .thema[aria-pressed="false"]:hover { background: var(--messing-hell); transition: background-color var(--dauer-hover-ein) var(--ease-ein); } }
.fragen { border-top: 2px solid var(--farbe-dunkel); }
.frage, .akk { border-bottom: 1px solid var(--farbe-linie); }
.frage summary, .akk summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 14px 0; cursor: pointer; list-style: none; font-weight: 600; font-size: 1.0625rem; line-height: 1.35; }
.frage summary::-webkit-details-marker, .akk summary::-webkit-details-marker { display: none; }
.frage-zeichen { flex: none; position: relative; width: 28px; height: 28px; border-radius: 3px; background: var(--farbe-flaeche); border: 1px solid rgba(90, 93, 97, .45); }
.frage-zeichen::before, .frage-zeichen::after { content: ""; position: absolute; left: 7px; right: 7px; top: 12.5px; height: 1.5px; background: var(--farbe-text); transition: transform var(--dauer-schliessen) var(--ease-aus); }
.frage-zeichen::after { transform: rotate(90deg); }
details[open] > summary .frage-zeichen::after { transform: rotate(0); transition: transform var(--dauer-mittel) var(--ease-ein); }
/* akkordeon-hoehe-auto: ::details-content mit interpolate-size; öffnen 300 ms, schließen 200 ms */
.frage::details-content, .akk::details-content { block-size: 0; overflow: hidden; transition: block-size var(--dauer-schliessen) var(--ease-aus), content-visibility var(--dauer-schliessen) var(--ease-aus) allow-discrete; }
.frage[open]::details-content, .akk[open]::details-content { block-size: auto; transition: block-size var(--dauer-mittel) var(--ease-ein), content-visibility var(--dauer-mittel) var(--ease-ein) allow-discrete; }
html[data-bewegung="ruhig"] .frage::details-content, html[data-bewegung="ruhig"] .akk::details-content { transition: none; }
.frage-antwort, .akk-inhalt { padding: 0 48px 20px 0; }
.frage-link { margin-top: 8px; font-size: .875rem; }
::highlight(faq) { background: var(--farbe-flaeche); color: var(--farbe-text); text-decoration: underline 2px var(--farbe-signal); }
.faq-leer { padding: var(--raum-6) 0; }
.mieter-weiter { max-width: 760px; margin-inline: auto; }

/* Ansprechperson-Band (ansprechperson-band, Variante kanzlei) */
.ansprech { padding-block: var(--raum-7) var(--raum-4); }
.ansprech-kopf { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--farbe-leise); margin-bottom: 12px; }
.ansprech-raster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: var(--raum-6); align-items: center; }
.ansprech-schild { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 16px; border-radius: 5px; font-weight: 600; font-size: clamp(1.25rem, 1rem + .8vw, 1.625rem); text-shadow: 0 1px 0 rgba(255, 255, 255, .55); max-width: none; }
.ansprech-text p { font-size: 1rem; }
.band-urlaub { margin-top: 10px; padding: 8px 12px; border-left: 3px solid var(--farbe-dunkel); background: var(--messing-hell); font-size: .9375rem !important; }
.ansprech-tel { display: block; font-size: 1.75rem; font-weight: 600; text-decoration: none; }
.ansprech-status { display: flex; gap: 8px; align-items: center; font-size: .875rem; color: var(--farbe-leise); margin-top: 6px; }

/* ------------------------------------------------------------ Eigentümer: Jahreslineal */
.lineal { position: relative; margin: var(--raum-5) 0 var(--raum-4); }
.lineal-monate { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); list-style: none; padding: 0; border-bottom: 2px solid var(--farbe-dunkel); }
.monat { position: relative; padding: 8px 0 10px 8px; font-size: .8125rem; font-weight: 600; color: var(--farbe-leise); border-left: 1px solid var(--farbe-linie); max-width: none; }
.monat--jetzt { background: var(--farbe-flaeche); color: var(--farbe-text); }
.lineal-marken { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: auto; gap: 0; list-style: none; padding: 0; }
.marke-j { grid-column: var(--s) / span 3; grid-row: var(--l); margin-top: 18px; padding: 10px 14px 12px 12px; border-left: 2px solid var(--farbe-dunkel); max-width: none; }
.marke-j--rechts { border-left: 0; border-right: 2px solid var(--farbe-dunkel); text-align: right; padding: 10px 12px 12px 14px; }
.marke-mon { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--farbe-leise); }
.marke-j b { display: block; font-weight: 600; font-size: 1.0625rem; line-height: 1.3; margin: 2px 0 4px; }
.marke-text { display: block; font-size: .875rem; line-height: 1.45; color: var(--farbe-leise); }
.portal { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--raum-4) var(--raum-8); }
.portal-liste { list-style: none; padding: 0; border-top: 1px solid #4A525B; }
.portal-liste li { display: flex; flex-direction: column; padding: 12px 0; border-bottom: 1px solid #4A525B; }
.portal-liste span { color: var(--dunkel-leise); font-size: .9375rem; }
.portal-knopf { grid-column: 2; }
.akk-raster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--raum-7); }
.akks { border-top: 2px solid var(--farbe-dunkel); }
.akk summary { font-size: 1.25rem; min-height: 72px; }
.nachweis { max-width: 820px; margin-inline: auto; }
.nachweis p { margin-bottom: var(--raum-3); }
.vorlage-hinweis { margin-top: var(--raum-4); padding: 10px 14px; border: 1px dashed var(--farbe-leise); border-radius: var(--radius-klein); font-size: .875rem; color: var(--farbe-leise); }

/* ------------------------------------------------------------ Leistungen */
.leistungen { list-style: none; padding: 0; border-top: 2px solid var(--farbe-dunkel); }
.leistungen li { max-width: none; border-bottom: 1px solid var(--farbe-linie); }
.leistung-link { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr) 24px; gap: var(--raum-5); align-items: center; padding: 28px 12px; text-decoration: none; transition: background-color var(--dauer-hover-aus) var(--ease-aus); }
.leistung-name { font-family: var(--schrift-headline); font-weight: 600; font-variation-settings: 'opsz' 36; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); line-height: 1.1; }
.leistung-text { font-size: .9375rem; }
.leistung-preis .ziffern { display: block; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1; letter-spacing: -.02em; }
.leistung-preis small { display: block; margin-top: 6px; font-size: .8125rem; color: var(--farbe-leise); line-height: 1.4; }
@media (hover: hover) and (pointer: fine) { .leistung-link:hover { background: var(--messing-hell); transition: background-color var(--dauer-hover-ein) var(--ease-ein); } }
.preis-abh { margin-top: var(--raum-5); }
.zusatz-raster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--raum-7); }
.tabelle { width: 100%; border-collapse: collapse; }
.tabelle th, .tabelle td { text-align: left; padding: 14px 12px 14px 0; border-bottom: 1px solid var(--farbe-linie); vertical-align: baseline; }
.tabelle thead th { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--farbe-leise); border-bottom: 2px solid var(--farbe-dunkel); }
.tabelle tbody th { font-weight: 500; }
.tabelle td { white-space: normal; }
.gebiet { max-width: 860px; margin-inline: auto; }
.plz-pruef--zeile { max-width: 480px; }

/* Leistungsseite: Typenschild (Antwort zuerst) */
.typschild { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 22px 26px; border-radius: 6px; }
.typschild > .schraube { position: absolute; top: 9px; }
.typschild > .schraube:first-child { left: 9px; }
.typschild > .schraube:last-child { right: 9px; }
.typ-feld { padding: 4px 18px; border-left: 1px solid rgba(90, 93, 97, .35); }
.typ-feld:first-of-type { border-left: 0; padding-left: 0; }
.typschild dt { font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--farbe-leise); margin-bottom: 6px; }
.typschild dd { font-weight: 600; font-size: 1.0625rem; line-height: 1.35; }
.typschild dd .ziffern { font-weight: 600; font-size: 1.375rem; }
.leistung-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--raster-spalt); align-items: start; }
.leistung-raster > figure { grid-column: 1 / 6; }
.leistung-raster > div { grid-column: 7 / 13; }
.haken-liste, .strich-liste { list-style: none; padding: 0; }
.haken-liste li { position: relative; padding: 10px 0 10px 34px; border-bottom: 1px solid var(--farbe-linie); }
.haken-liste li::before { content: ""; position: absolute; left: 4px; top: 16px; width: 14px; height: 8px; border-left: 2px solid var(--farbe-dunkel); border-bottom: 2px solid var(--farbe-dunkel); transform: rotate(-45deg); }
.strich-liste li { position: relative; padding: 6px 0 6px 22px; }
.strich-liste li::before { content: "–"; position: absolute; left: 0; color: var(--farbe-leise); }
.sev { max-width: 860px; margin-inline: auto; }
.weiter-zu { padding-top: var(--raum-6); }

/* ------------------------------------------------------------ Verwaltung anfragen: Übergabeprotokoll */
.protokoll-blatt { padding: clamp(22px, 4vw, 48px); }
.tabelle-rolle { overflow-x: auto; position: relative; }
.pr-tabelle { width: 100%; border-collapse: collapse; min-width: 640px; }
.pr-tabelle th, .pr-tabelle td { text-align: left; vertical-align: top; padding: 14px 14px 14px 0; border-top: 1px solid #DCD8CF; font-size: .9375rem; }
.pr-tabelle thead th { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--farbe-leise); border-top: 0; }
.pr-tabelle tbody th { font-weight: 600; font-size: 1.0625rem; }
.pr-tabelle td:first-child { font-weight: 600; color: var(--farbe-leise); width: 3.5em; }
.ankreuz { display: inline-block; width: 20px; height: 20px; border: 1.5px solid var(--farbe-text); border-radius: 2px; position: relative; }
.ankreuz--an::before, .ankreuz--an::after { content: ""; position: absolute; left: 2px; right: 2px; top: 8px; height: 2px; background: var(--farbe-signal); transform: rotate(45deg); }
.ankreuz--an::after { transform: rotate(-45deg); }

/* ------------------------------------------------------------ Häuser und freie Wohnungen */
.haus-typen { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--raum-7) var(--raster-spalt); }
.haus-typ img { width: 100%; object-fit: cover; border-radius: var(--radius-klein); }
.haus-typ--0 { grid-column: 1 / 7; grid-row: 1; }
.haus-typ--0 img, .haus-typ--2 img { aspect-ratio: 4 / 5; }
.haus-typ--2 { grid-column: 8 / 12; grid-row: 1; margin-top: clamp(40px, 12vw, 180px); }
.haus-typ--1 { grid-column: 3 / 13; grid-row: 2; }
.haus-typ--1 img { aspect-ratio: 3 / 2; }
.haus-typ figcaption { display: grid; gap: 4px; margin-top: 12px; }
.haus-typ figcaption .bu-marke { justify-self: start; }
.haus-typ-name { font-family: var(--schrift-headline); font-weight: 600; font-variation-settings: 'opsz' 36; font-size: 1.5rem; line-height: 1.2; }
.haus-typ-zahl { font-size: .875rem; color: var(--farbe-leise); }
.wohnungen-sektion { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--raum-7); align-items: start; }
.wohnungen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--raum-6) var(--raum-5); padding: 28px 22px; background: var(--filz); border: 12px solid #A9AEB4; border-radius: 6px; }
.wohnung { padding-bottom: 0; rotate: -.4deg; }
.wohnung:nth-child(2) { rotate: .5deg; }
.wohnung-titel { font-family: var(--schrift-headline); font-weight: 600; font-variation-settings: 'opsz' 36; font-size: 1.5rem; line-height: 1.15; margin-bottom: 4px; }
.wohnung-lage { color: var(--farbe-leise); font-size: .9375rem; margin-bottom: 12px; }
.wohnung-daten { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; font-size: .875rem; }
.wohnung-daten .ganz { grid-column: 1 / -1; }
.wohnung-daten div { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px dotted #CFCAC0; }
.wohnung-daten dt { color: var(--farbe-leise); }
.wohnung-daten dd { text-align: right; font-weight: 500; }
.energie { margin-top: 12px; font-size: .8125rem; line-height: 1.5; }
.ea-klasse { display: inline-block; min-width: 1.6em; padding: 0 4px; border: 1.5px solid var(--farbe-text); font-weight: 700; text-align: center; }
.wohnung-wer { margin-top: 10px; font-size: .8125rem; color: var(--farbe-leise); }
.abreiss { display: flex; list-style: none; padding: 0; margin: 16px -20px 0; border-top: 1px dashed #BDB8AD; }
.abreiss li { flex: 1; border-left: 1px dashed #BDB8AD; max-width: none; }
.abreiss li:first-child { border-left: 0; }
.abreiss a { display: block; padding: 10px 0 12px; writing-mode: vertical-rl; rotate: 180deg; margin-inline: auto; font-size: .75rem; text-decoration: none; transition: transform var(--dauer-hover-aus) var(--ease-aus); min-height: 132px; }
@media (hover: hover) and (pointer: fine) { .abreiss a:hover { transform: translateY(-3px) rotate(-4deg); transition: transform var(--dauer-hover-ein) var(--ease-ein); } }

/* ------------------------------------------------------------ Team als Klingeltableau */
.team-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--raster-spalt); align-items: start; }
.team-links { grid-column: 1 / 6; position: sticky; top: 130px; }
.tableau--team { grid-column: 6 / 13; }
.personen { list-style: none; padding: 0; display: grid; gap: var(--raum-3); }
.person { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "schild tel knopf" "text text text"; gap: 8px 14px; align-items: center; padding: 14px 16px 16px; border-radius: 5px; max-width: none; transition: background-color var(--dauer-hover-aus) var(--ease-aus); scroll-margin-top: 140px; }
.person-schild { grid-area: schild; display: flex; align-items: center; gap: 10px; max-width: none; }
.person-name { font-weight: 600; font-size: 1.375rem; line-height: 1.2; text-shadow: 0 1px 0 rgba(255, 255, 255, .55); }
.person-tel { grid-area: tel; font-size: 1.5rem; font-weight: 600; text-decoration: none; padding: 6px 4px; min-height: 44px; }
.person .klingel-knopf { grid-area: knopf; }
.person-text { grid-area: text; display: grid; gap: 6px; padding-left: 18px; }
.person-rolle { font-size: .9375rem; }
.person-haeuser { display: flex; flex-wrap: wrap; gap: 6px; }
.haus-nr { padding: 1px 6px; border: 1px solid rgba(29, 32, 36, .45); border-radius: 2px; font-size: .75rem; }
.person-status { display: flex; gap: 8px; align-items: center; font-size: .875rem; color: var(--farbe-leise); }
.urlaub { padding: 2px 8px; background: var(--farbe-dunkel); color: #fff; border-radius: 2px; }
@media (hover: hover) and (pointer: fine) {
  .personen:has(.person:hover) .person:not(:hover) { background-color: var(--messing-hell); background-image: none; transition: background-color var(--dauer-hover-ein) var(--ease-ein); }
}
.personen[data-gesucht] .person:not(.treffer) { background-color: var(--messing-hell); background-image: none; }
.person.treffer { outline: 3px solid var(--farbe-dunkel); outline-offset: 2px; }

/* ------------------------------------------------------------ Kontakt (erreichbarkeits-button knopf, oeffnungszeiten-status karte, karte-zwei-klick bild) */
.erreichbar { display: grid; gap: 6px; justify-items: start; }
.erreichbar-knopf { display: grid; gap: 2px; width: 100%; padding: 20px 22px; border-radius: var(--radius-gross); background: var(--farbe-dunkel); color: #fff; text-decoration: none; transition: background-color var(--dauer-hover-aus) var(--ease-aus); }
@media (hover: hover) and (pointer: fine) { .erreichbar-knopf:hover { background: #1D2024; transition: background-color var(--dauer-hover-ein) var(--ease-ein); } }
.erreichbar-titel { font-weight: 600; font-size: 1.125rem; }
.erreichbar-nr { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); font-weight: 600; }
.erreichbar-satz { font-size: .9375rem; color: var(--dunkel-leise); }
.kontakt-raster { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--raum-7); align-items: start; }
.zeiten-karte { padding: 26px; border-radius: var(--radius-gross); background: var(--farbe-flaeche); }
.zeiten-status { font-weight: 600; margin-bottom: 12px; }
.zeiten { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.zeiten th, .zeiten td { text-align: left; padding: 8px 0; border-bottom: 1px solid rgba(29, 32, 36, .14); font-weight: 400; }
.zeiten td.ziffern { white-space: normal; }
.zeiten tr[data-heute] th, .zeiten tr[data-heute] td { font-weight: 600; }
.zeiten tr[data-heute] th::after { content: " · heute"; font-weight: 500; color: var(--farbe-leise); }
.anschrift address { font-style: normal; margin-bottom: 12px; }
.karte { position: relative; border-radius: var(--radius-gross); overflow: hidden; border: 1px solid var(--farbe-linie); aspect-ratio: 800 / 380; background: var(--farbe-flaeche); }
.karte svg, .karte iframe { width: 100%; height: 100%; border: 0; }
.karte-zwei { position: absolute; left: 16px; bottom: 16px; max-width: 360px; padding: 16px 18px; background: var(--farbe-grund); border-radius: var(--radius-klein); border: 1px solid var(--farbe-linie); font-size: .875rem; }
.karte-zwei p { margin-bottom: 10px; }
.weiche { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: var(--raum-6); }
.weiche-weg { display: grid; gap: 2px; padding: 16px 18px; border: 1px solid rgba(90, 93, 97, .55); border-radius: 5px; background: var(--farbe-flaeche); text-decoration: none; transition: background-color var(--dauer-hover-aus) var(--ease-aus); }
.weiche-weg span { font-size: .875rem; color: var(--farbe-leise); }
.weiche-weg--notfall { background: var(--farbe-signal); color: #fff; border-color: #6E2716; }
.weiche-weg--notfall span { color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .weiche:has(.weiche-weg:hover) .weiche-weg:not(:hover):not(.weiche-weg--notfall) { background: var(--messing-hell); transition: background-color var(--dauer-hover-ein) var(--ease-ein); }
}

/* ------------------------------------------------------------ 404 */
.seitenkopf--404 .seitenkopf-raster--bild { align-items: center; }
.leeres-schild { display: flex; align-items: center; gap: 20px; padding: 26px; border-radius: 8px; }
.leer-papier { flex: 1; display: grid; place-items: center; min-height: 120px; background: var(--papier); border: 1px solid #D3CFC6; font-family: var(--schrift-headline); font-style: italic; font-size: clamp(3rem, 2rem + 4vw, 5.5rem); color: var(--farbe-leise); }
.leeres-schild .klingel-knopf { width: 64px; height: 64px; }
.leeres-schild .klingel-knopf::after { inset: 20px; }
.fehler-klingeln { display: grid; gap: var(--raum-5); }

/* ------------------------------------------------------------ Rechtsseiten (rechtstext-layout) */
.recht { display: grid; grid-template-columns: minmax(0, 1fr); }
.recht--toc { grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: var(--raum-7); align-items: start; }
.recht-toc { position: sticky; top: 130px; font-size: .9375rem; }
.recht-toc-kopf { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--farbe-leise); margin-bottom: 8px; }
.recht-toc ol { padding-left: 1.2em; display: grid; gap: 6px; }
.recht-text { max-width: 68ch; }
.recht-text .h3 { margin-top: var(--raum-6); scroll-margin-top: 130px; }
.recht-text p { margin-bottom: var(--raum-3); }
.anker { color: var(--farbe-leise); text-decoration: none; font-weight: 400; margin-left: 6px; }
.platzhalter { padding: 14px 16px; border: 1px dashed var(--farbe-leise); border-radius: var(--radius-klein); background: var(--messing-hell); font-size: .9375rem; }

/* ------------------------------------------------------------ Fuß: Briefkastenanlage */
.fuss { background: var(--farbe-dunkel); color: #fff; margin-top: var(--raum-sektion); padding: var(--raum-8) 0 var(--raum-6); }
.anlage { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 12px; border-radius: 8px; background: #22272D; }
.fach { padding: 16px 18px 20px; background: #353C44; border: 1px solid #4A525B; border-radius: 4px; font-size: .9375rem; }
.fach-schild { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 3px; color: var(--farbe-text); font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.fach-schlitz { display: block; height: 9px; width: 70%; margin: 14px 0 16px; border-radius: 2px; background: #15181B; box-shadow: inset 0 2px 2px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .12); }
.fach address { font-style: normal; margin-bottom: 10px; line-height: 1.5; }
.fach a, .fach-knopf { color: #fff; }
.fach .gross { font-size: 1.375rem; font-weight: 600; }
.fach-liste, .fach-wege { list-style: none; padding: 0; }
.fach-liste li { display: grid; gap: 0; padding: 5px 0; }
.fach-liste a { background-size: 0 1px !important; }
.fach-liste a:hover { background-size: 100% 1px !important; }
.fach-liste span { font-size: .8125rem; color: var(--dunkel-leise); }
.fach-liste a { font-weight: 600; }
.fach-wege li { padding: 4px 0; }
.fach-wege a, .fach-knopf { display: inline-block; padding-block: 6px; }
.fach-knopf { background: none; border: 0; padding-inline: 0; font-size: inherit; text-decoration: underline; }
.fach-link { display: inline-block; margin-top: 10px; font-size: .875rem; }
.fach-leise { color: var(--dunkel-leise); font-size: .8125rem; margin-top: 10px; }
.papierfach { grid-column: 1 / -1; display: grid; gap: 14px; padding: 22px 24px 26px; background: #353C44; border: 1px solid #4A525B; border-radius: 4px; max-width: none; }
.papierfach-schlitz { display: block; height: 12px; border-radius: 2px; background: #15181B; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .12); }
.papierfach-text { font-family: var(--schrift-headline); font-style: italic; font-variation-settings: 'opsz' 36; font-size: clamp(1.375rem, 1rem + 1.6vw, 2.25rem); line-height: 1.2; text-wrap: balance; }
.fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; margin-top: var(--raum-5); font-size: .8125rem; color: var(--dunkel-leise); }
.bewegung-schalter, .schalter { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; background: none; border: 0; color: inherit; font-size: .875rem; cursor: pointer; }
.schalter-spur { position: relative; width: 38px; height: 22px; border-radius: 11px; border: 1.5px solid currentColor; }
.schalter-spur::after { content: ""; position: absolute; top: 3px; left: 3px; width: 13px; height: 13px; border-radius: 50%; background: currentColor; transition: transform var(--dauer-klein) var(--ease-aus); }
.bewegung-schalter[aria-pressed="true"] .schalter-spur::after, .schalter input:checked + .schalter-spur::after { transform: translateX(16px); }
.schalter { position: relative; color: var(--farbe-text); }
.schalter input { position: absolute; opacity: 0; width: 38px; height: 22px; }
.schalter input:focus-visible + .schalter-spur { outline: var(--fokus-ring); outline-offset: 3px; }
.fundus-hinweis { background: var(--farbe-text); color: #E8E6E1; font-size: .8125rem; padding: 12px var(--raster-rand) 80px; text-align: center; }
.fundus-hinweis a { color: #fff; }

/* Mobile Leiste: Anrufen / Schaden melden (steht beim Seitenwechsel: view-transition-name unten) */
.unten { display: none; }

/* ------------------------------------------------------------ Dialoge (dialog-modal-nativ): öffnen 300 ms, schließen 200 ms */
.dialog, .menue { border: 0; padding: 0; color: var(--farbe-text); background: var(--farbe-grund); opacity: 0; translate: 0 12px; transition: opacity var(--dauer-schliessen) var(--ease-aus), translate var(--dauer-schliessen) var(--ease-aus), overlay var(--dauer-schliessen) var(--ease-aus) allow-discrete, display var(--dauer-schliessen) var(--ease-aus) allow-discrete; }
.dialog[open], .menue[open] { opacity: 1; translate: 0 0; transition: opacity var(--dauer-mittel) var(--ease-ein), translate var(--dauer-mittel) var(--ease-ein), overlay var(--dauer-mittel) var(--ease-ein) allow-discrete, display var(--dauer-mittel) var(--ease-ein) allow-discrete; }
@starting-style { .dialog[open], .menue[open] { opacity: 0; translate: 0 12px; } }
.dialog::backdrop, .menue::backdrop { background: rgba(29, 32, 36, .5); }
.dialog { width: min(520px, calc(100% - 32px)); border-radius: var(--radius-gross); }
.dialog-innen { padding: 26px; display: grid; gap: 12px; }
.dialog-knoepfe { display: flex; justify-content: flex-end; gap: 14px; align-items: center; margin-top: 6px; }
.menue { margin: 0 0 0 auto; width: min(420px, 100%); height: 100%; max-height: none; translate: 24px 0; }
.menue[open] { translate: 0 0; }
@starting-style { .menue[open] { translate: 24px 0; } }
.menue-innen { padding: 20px var(--raster-rand) 40px; display: grid; gap: 20px; }
.menue-kopf { display: flex; justify-content: space-between; align-items: center; }
.menue-zu { min-height: 44px; padding: 0 14px; border: 1px solid var(--farbe-leise); border-radius: var(--radius-klein); background: none; font-weight: 600; }
.menue-liste { list-style: none; padding: 0; }
.menue-liste a { display: block; padding: 12px 0; font-family: var(--schrift-headline); font-size: 1.625rem; font-weight: 600; font-variation-settings: 'opsz' 36; text-decoration: none; border-bottom: 1px solid var(--farbe-linie); }
.menue-liste a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
.menue-tel a { font-weight: 600; font-size: 1.25rem; }
html[data-bewegung="ruhig"] .dialog, html[data-bewegung="ruhig"] .menue { translate: 0 0; }

/* ------------------------------------------------------------ Seitenwechsel (vt-cross-document-mpa Variante typen + vt-shared-element-morph)
   450 ms, Hauptkurve --ease. Inhalt rückt 8 px nach und startet 120 ms später, damit der Wechsel sichtbar bleibt;
   das Schild verwandelt sich (morph), wird getauscht (tausch), eingeschoben (ein) oder herausgezogen (aus). */
::view-transition-group(*) { animation-duration: var(--dauer-seitenwechsel); animation-timing-function: var(--ease); }
::view-transition-old(root) { animation: vt-raus var(--dauer-schliessen) linear both; }
/* Deckkraft linear (Partitur: Opazität linear oder Hauptkurve), Weg mit --ease: so bleibt der Wechsel 0–450 ms sichtbar,
   ohne dass zwei Textebenen lange übereinander liegen (alte Seite ist nach 200 ms weg, neue kommt ab 150 ms). */
::view-transition-new(root) { animation: vt-ein calc(var(--dauer-seitenwechsel) - 150ms) linear 150ms both, vt-rueck calc(var(--dauer-seitenwechsel) - 150ms) var(--ease) 150ms both; }
html:active-view-transition-type(hoeher)::view-transition-new(root) { animation-name: vt-ein, vt-rueck-oben; }
@keyframes vt-raus { to { opacity: 0; } }
@keyframes vt-ein { from { opacity: 0; } }
@keyframes vt-rueck { from { transform: translateY(8px); } }
@keyframes vt-rueck-oben { from { transform: translateY(-8px); } }
::view-transition-group(schild) { overflow: clip; border-radius: 5px; }
::view-transition-old(schild), ::view-transition-new(schild) { inline-size: auto; block-size: auto; object-fit: none; object-position: left center; }
::view-transition-old(schild) { animation: vt-raus var(--dauer-schliessen) var(--ease-aus) both; }
::view-transition-new(schild) { animation: vt-schild-auf var(--dauer-seitenwechsel) var(--ease-ein) both; }
html:active-view-transition-type(morph)::view-transition-new(schild) { animation: vt-schild-hell var(--dauer-seitenwechsel) linear both; }
html:active-view-transition-type(morph)::view-transition-old(schild) { animation: vt-raus calc(var(--dauer-seitenwechsel) * .5) linear both; }
html:active-view-transition-type(tausch)::view-transition-old(schild) { animation: none; }
html:active-view-transition-type(tausch)::view-transition-new(schild) { animation: vt-schild-auf calc(var(--dauer-seitenwechsel) - 60ms) var(--ease-ein) 60ms both; }
html:active-view-transition-type(aus)::view-transition-old(schild) { animation: vt-schild-zu var(--dauer-schliessen) var(--ease-aus) both; }
@keyframes vt-schild-auf { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes vt-schild-zu { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 100% 0 0); } }
@keyframes vt-schild-hell { from { opacity: 0; } 30% { opacity: 0; } }
html:active-view-transition-type(ruhig)::view-transition-old(root) { animation: vt-raus 150ms linear both; }
html:active-view-transition-type(ruhig)::view-transition-new(root) { animation: vt-ueber 150ms linear both; }
@keyframes vt-ueber { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root) { animation: vt-raus 150ms linear both; }
  ::view-transition-new(root) { animation: vt-ueber 150ms linear both; }
}

/* ------------------------------------------------------------ Breiten */
@media (max-width: 1180px) {
  .kopf-nav { display: none; }
  .menue-knopf { display: inline-flex; align-items: center; }
}
@media (max-width: 1000px) {
  .hero-raster { grid-template-columns: minmax(0, 1fr); }
  .hero-bild, .hero-raster .tableau { grid-column: 1 / -1; }
  .klingeln { min-height: 0; }
  .klingeln > li { flex: none; }
  .aushang-sektion, .preis-sektion, .formular-raster, .leistung-raster, .team-raster, .haus-typen { grid-template-columns: minmax(0, 1fr); }
  .aushang-text, .schaukasten, .preis-gross, .preis-text, .formular-spalte, .formular-neben, .leistung-raster > *, .team-links, .tableau--team, .haus-typ--0, .haus-typ--1, .haus-typ--2 { grid-column: 1 / -1; grid-row: auto; }
  .aushang-text, .formular-neben, .team-links { position: static; }
  .formular-neben { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .such-raster, .dienstplan, .danke-raster, .portal, .akk-raster, .zusatz-raster, .kontakt-raster, .wohnungen-sektion, .recht--toc, .faq-kopf { grid-template-columns: minmax(0, 1fr); gap: var(--raum-5); }
  .portal-knopf, .faq-zahl { grid-column: auto; }
  .recht-toc { position: static; }
  .seitenkopf-raster--bild, .seitenkopf-raster--text { grid-template-columns: minmax(0, 1fr); }
  .seitenkopf-links, .seitenkopf-raster--bild > :last-child, .seitenkopf-raster--text .h1, .seitenkopf-raster--text .lead { grid-column: 1 / -1; }
  .seitenkopf-raster--text .lead { margin-top: var(--raum-4); }
  .formular-raster--kontakt .formular-spalte, .formular-raster--kontakt .formular-neben--form { grid-column: 1 / -1; }
  .kopfbild { max-width: 520px; }
  .ansprech-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ansprech-schild { grid-column: 1 / -1; }
  .typschild { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 0; }
  .typ-feld:nth-of-type(3) { border-left: 0; padding-left: 0; }
  .leistung-link { grid-template-columns: minmax(0, 1fr) auto; }
  .leistung-text { grid-column: 1; }
  .leistung-preis { grid-column: 1; }
  .leistung-link .pfeil-i { grid-column: 2; grid-row: 1; }
  .anlage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lineal-monate, .lineal-marken { grid-template-columns: minmax(0, 1fr); }
  .lineal-monate { display: none; }
  .lineal-marken { border-left: 2px solid var(--farbe-dunkel); padding-left: 0; }
  .marke-j, .marke-j--rechts { grid-column: 1 !important; grid-row: auto !important; margin-top: 0; border: 0; border-bottom: 1px solid var(--farbe-linie); text-align: left; padding: 12px 0 12px 18px; }
}
@media (max-width: 760px) {
  .kopf-status, .kopf-schaden { display: none; }
  .notleiste .nl-mehr { display: none; }
  .kopf-innen { min-height: 60px; gap: 12px; }
  .marke-wort { font-size: 1.5rem; }
  .hero-h1 { font-size: clamp(2.125rem, 1.2rem + 4.6vw, 2.75rem); }
  .hero-raster .tableau { order: -1; }
  .hero-bild img { aspect-ratio: 4 / 5; }
  .schaukasten-glas, .wohnungen { grid-template-columns: minmax(0, 1fr); }
  .formular-neben { grid-template-columns: minmax(0, 1fr); }
  .kacheln--3 { grid-template-columns: minmax(0, 1fr); }
  .feld-reihe { grid-template-columns: minmax(0, 1fr); }
  .ansprech-raster { grid-template-columns: minmax(0, 1fr); gap: var(--raum-4); }
  .treffer-karte { grid-template-columns: minmax(0, 1fr); }
  .treffer-karte .ansprech-schild { grid-row: auto; }
  .not-tabelle thead { display: none; }
  .not-tabelle, .not-tabelle tbody, .not-tabelle tr, .not-tabelle th, .not-tabelle td { display: block; width: auto !important; }
  .not-tabelle tr { padding: 14px 0; border-top: 1px solid #DCD8CF; }
  .not-tabelle th, .not-tabelle td { border: 0; padding: 2px 0; }
  .band li { grid-template-columns: 30px minmax(0, 1fr); }
  .band-text { grid-column: 2; }
  .wartung li, .stoer-verlauf li, .protokoll li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .gas { grid-template-columns: minmax(0, 1fr); }
  .zusammenfassung dl { grid-template-columns: minmax(0, 1fr); }
  .zusammenfassung dd { margin-bottom: 6px; }
  .weiche { grid-template-columns: minmax(0, 1fr); }
  .person { grid-template-areas: "schild schild knopf" "tel tel tel" "text text text"; }
  .person-text { padding-left: 0; }
  .karte { aspect-ratio: auto; }
  .karte svg { aspect-ratio: 800 / 380; height: auto; }
  .karte-zwei { position: static; max-width: none; border: 0; border-top: 1px solid var(--farbe-linie); border-radius: 0; }
  .unten { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--farbe-linie); padding-bottom: env(safe-area-inset-bottom); view-transition-name: unten; transition: translate var(--dauer-schliessen) var(--ease-aus); }
  .unten a { display: grid; place-content: center; min-height: 56px; text-align: center; font-weight: 600; text-decoration: none; line-height: 1.15; }
  .unten-tel { background: var(--farbe-dunkel); color: #fff; }
  .unten-tel small { font-weight: 400; font-size: .75rem; color: var(--dunkel-leise); }
  .unten-schaden { background: var(--farbe-signal); color: #fff; }
  .unten[data-weg] { translate: 0 110%; }
  .fundus-hinweis { padding-bottom: 90px; }
}
@media (max-width: 520px) {
  .anlage { grid-template-columns: minmax(0, 1fr); }
  .typschild { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .typ-feld { border-left: 0; padding: 8px 0; border-top: 1px solid rgba(90, 93, 97, .3); }
  .typ-feld:first-of-type { border-top: 0; }
  .kacheln { grid-template-columns: minmax(0, 1fr); }
  .tableau { padding: 12px; }
  .klingel { padding: 10px 12px; }
  .klingel-name { font-size: 1.125rem; }
  .klingel-knopf { width: 38px; height: 38px; }
  .klingel-knopf::after { inset: 11px; }
  .sprechgitter { width: 48px; }
  .seitenschild { gap: 10px; padding: 8px 10px; }
  .seitenschild .schraube { display: none; }
  .schild-name { font-size: 1.0625rem; }
  .suche-zeile { flex-direction: column; }
  .notleiste-alle { display: none; }
  .schritt { padding-left: 18px; }
  .schritt-titel { margin-left: -32px; }
  .vorgang-schild .ziffern { font-size: 1.5rem; }
  .preis-zahl { font-size: 4rem; }
}

/* ------------------------------------------------------------ Kontrastmodus */
@media (forced-colors: active) {
  .klingel, .seitenschild, .kante-schild, .person, .typschild, .fach, .zettel, .wohnung, .aushang-blatt, .schaukasten, .knopf-ziegel, .knopf-ziegel-btn, .knopf-schiefer, .knopf-messing, .weiche-weg, .kachel, .unten a { border: 1px solid CanvasText; }
  .klingel-knopf, .schraube, .magnet, .sprechgitter { forced-color-adjust: none; }
  .punkt { forced-color-adjust: none; }
}
@media print {
  .kopf, .unten, .fuss, .fundus-hinweis, .menue-knopf { display: none; }
}

/* Nach dem Seitenkopf folgt der Inhalt ohne zweite große Lücke */
.seitenkopf + .sektion, .seitenkopf + section > .sektion:first-child, .seitenkopf + .gas { padding-top: var(--raum-4); }
.seitenkopf + .typschild-sektion { padding-top: 0; }