/* Vorlage "modern". Navy und Beere, eine Schrift (Urbanist, lokal).
 * Das wiederkehrende Motiv sind die vier Quadrate aus dem Logo: Jede Kachel hat genau eine runde Aussenecke.
 * Die Beere kommt je Buero aus der Datenbank (--beere), alles andere ist fest. */

@font-face { font-family: 'Fraunces'; src: url('/_schrift/fraunces.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Urbanist'; src: url('/_schrift/urbanist.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --navy: #1c2633;
  --navy-2: #2a3546;
  --beere: #b63782;
  --beere-dunkel: #962b6a;
  --pflaume: #6b2d6b;
  --rose: #f6e3ee;
  --flieder: #ece7f0;
  --grau: #a9a6ab;
  --papier: #fcfbfd;
  --getoent: #f4f1f6;
  --linie: #e3dde7;
  --tinte: #1c2633;
  --tinte-2: #4b5363;
  --leise: #6d7381;
  --weiss: #fff;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --schrift: 'Urbanist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --breite: 1200px;
  /* Typografische Skala: eine Grösse je Rolle */
  --t-h1: clamp(2.5rem, 4.6vw, 4.2rem);
  --t-h2: clamp(2rem, 3.4vw, 2.9rem);
  --t-h2-klein: clamp(1.6rem, 2.4vw, 2rem);
  --t-bauteil: 1.3rem;
  --ecke: 34px;
  --r: 12px;
}

* { box-sizing: border-box; }
button, input, select, textarea { font-family: inherit; }
::selection { background: var(--beere); color: #fff; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; background: var(--papier); color: var(--tinte); font-family: var(--schrift); font-size: 18px; line-height: 1.6; font-weight: 450; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--beere); }
h1, h2, h3 { margin: 0; line-height: 1.12; letter-spacing: -0.02em; }
h1, h2 { font-family: var(--serif); font-variation-settings: 'opsz' 96; letter-spacing: -0.025em; }
h1 { font-weight: 300; font-size: var(--t-h1); }
h2 { font-weight: 350; font-size: var(--t-h2); }
h3 { font-weight: 650; font-size: 1.18rem; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--beere); outline-offset: 3px; border-radius: 4px; }

.huelle { max-width: var(--breite); margin: 0 auto; padding: 0 24px; }
.sprung { position: absolute; left: -999px; top: 8px; background: var(--navy); color: #fff; padding: 10px 16px; z-index: 50; border-radius: 8px; }
.sprung:focus { left: 16px; }
:root:has(.band) { --band-hoehe: 37px; }
.band { background: var(--pflaume); color: #fff; font-size: 14px; text-align: center; padding: 8px 16px; }
.klein { font-size: 15px; color: var(--leise); }
.schmal { max-width: 46rem; }
h2.schmal { margin-bottom: 18px; }
.gross-text { font-size: 1.2rem; line-height: 1.55; color: var(--tinte-2); }

/* Knoepfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--beere); color: #fff; text-decoration: none; border: 0; border-radius: var(--r); padding: 14px 24px; font: 650 16px/1.2 var(--schrift); cursor: pointer; transition: background .15s; }
.knopf:hover { background: var(--beere-dunkel); color: #fff; }
.knopf.hell { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); }
.knopf.hell:hover { background: var(--navy); color: #fff; }
.knopf.glas { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .55); }
.knopf.glas:hover { background: rgb(255 255 255 / .1); }
.klein-knopf { padding: 10px 18px; font-size: 15px; }
.aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.mehr { font-weight: 650; color: var(--beere); text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; white-space: nowrap; }
.mehr:hover { color: var(--beere-dunkel); }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 30; background: rgb(252 251 253 / .94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linie); }
.kopf-reihe { display: flex; align-items: center; justify-content: space-between; height: 80px; gap: 24px; }
.marke { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--navy); }
.marke svg { width: 42px; height: 42px; flex: none; }
.marke-text { white-space: nowrap; font-size: 1.45rem; font-weight: 250; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; color: #6f6c73; }
.marke-text b { font-weight: 250; color: var(--beere); }
.marke:hover { color: var(--navy); }
.nav { display: flex; align-items: center; gap: 26px; font-size: 16px; font-weight: 550; }
.nav a { text-decoration: none; color: var(--tinte-2); }
.nav a:not(.knopf):hover, .nav a[aria-current]:not(.knopf) { color: var(--beere); }
.nav .knopf { color: #fff; }
.menue-knopf { display: none; width: 46px; height: 46px; border: 1.5px solid var(--linie); border-radius: var(--r); background: #fff; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 6px; }
.menue-knopf span { display: block; width: 20px; height: 2px; background: var(--navy); transition: transform .2s; }
.menue-knopf[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.menue-knopf[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* Startseite: Kopf mit den vier Kacheln */
.held { background: var(--navy); color: #fff; padding: 72px 0 80px; }
.held-raster { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.held h1 { color: #fff; }
.held h1 span { display: block; color: #fff; }
.held .lead { font-size: 1.22rem; color: #d9dde6; max-width: 34rem; margin: 26px 0 32px; }
.held-kontakt { margin: 28px 0 0; font-size: 15px; color: #aeb5c3; }
.held-kontakt a { color: #fff; font-weight: 650; }

.kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kachel { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 200px; padding: 22px 24px 24px; text-decoration: none; border-radius: 6px; transition: transform .2s ease; }
.kachel:hover { transform: translateY(-3px); }
.kachel .zeichen { position: absolute; top: 4px; left: 20px; font-size: 5.2rem; font-weight: 300; line-height: 1; }
.kachel-name { font-size: 1.35rem; font-weight: 650; letter-spacing: -0.01em; }
.kachel-text { font-size: 15px; line-height: 1.4; margin-top: 4px; }
.k1 { background: var(--beere); color: #fff; border-top-left-radius: var(--ecke); }
.k2 { background: var(--rose); color: var(--navy); border-top-right-radius: var(--ecke); }
.k3 { background: var(--flieder); color: var(--navy); border-bottom-left-radius: var(--ecke); }
.k4 { background: var(--pflaume); color: #fff; border-bottom-right-radius: var(--ecke); }
.k2 .zeichen, .k3 .zeichen { color: var(--beere); }
.kachel.k1:hover, .kachel.k4:hover { color: #fff; }
.kachel.k2:hover, .kachel.k3:hover { color: var(--navy); }
.kacheln.flach { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 24px; }
.kacheln.flach .kachel { min-height: 170px; border-radius: 6px var(--ecke) 6px 6px; }

/* Abschnitte */
.abschnitt { padding: 88px 0; }
.abschnitt.oben { padding-top: 40px; }
.getoent { background: var(--getoent); }
.kopfzeile { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 36px; }
.kopfzeile p { color: var(--tinte-2); margin: 12px 0 0; max-width: 40rem; }
.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.zweispaltig > div > h2 { margin-bottom: 22px; }
.weit-oben { margin-top: 72px; }
.seiten-h1 { font-size: clamp(2.2rem, 4.4vw, 3.5rem); margin: 8px 0 22px; max-width: 22ch; }
.raster-titel { font-size: 1.3rem; font-weight: 650; margin: 48px 0 20px; letter-spacing: -0.01em; }

/* Brotkrumen */
.brot ol { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--leise); }
.brot li + li::before { content: '/'; margin-right: 6px; color: var(--grau); }
.brot a { color: var(--leise); }

/* Objektkarten */
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 32px 24px; }
.raster.zwei { grid-template-columns: 1fr 1fr; gap: 24px; }
.schaufenster { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; align-items: start; }
.karte { display: block; text-decoration: none; color: var(--tinte); }
.karte .foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px 6px 6px var(--ecke); background: var(--flieder); }
.karte.gross .foto { aspect-ratio: 5 / 4; }
.karte .foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
a.karte:hover .foto img { transform: scale(1.03); }
a.karte:hover { color: var(--tinte); }
a.karte:hover .karte-titel { color: var(--beere); }
.karte .inhalt { padding: 14px 2px 0; }
.karte .ort { font-size: 14px; color: var(--leise); margin: 0 0 4px; font-weight: 550; }
.karte-titel { font-size: 1.12rem; font-weight: 650; line-height: 1.3; letter-spacing: -0.01em; }
.karte.gross .karte-titel { font-size: 1.5rem; font-weight: 600; }
.karte .eck { font-size: 15px; color: var(--tinte-2); margin: 6px 0 0; }
.karte .preis { font-size: 1.1rem; font-weight: 700; margin: 8px 0 0; }
.karte .preis small { font-weight: 500; color: var(--leise); }
.pille { position: absolute; top: 12px; left: 12px; background: #fff; color: var(--navy); font-size: 13px; font-weight: 700; padding: 5px 11px; border-radius: 999px; }
.pille.dunkel { background: var(--navy); color: #fff; }
.streifen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
.leer { background: var(--getoent); border-radius: var(--r); padding: 32px; }

/* Kette: Immobilie, Finanzierung, Schutz */
.kette { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.kette li { position: relative; padding: 28px 32px 8px 0; border-top: 2px solid var(--navy); }
.kette li + li { padding-left: 32px; border-left: 1px solid var(--linie); }
.kette-zeichen { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 6px 6px 6px 18px; background: var(--beere); color: #fff; font-size: 2rem; font-weight: 300; line-height: 1; margin-bottom: 18px; }
.kette li:nth-child(2) .kette-zeichen { background: var(--pflaume); }
.kette li:nth-child(3) .kette-zeichen { background: var(--rose); color: var(--beere); }
.kette h3 { margin-bottom: 10px; }
.kette p { color: var(--tinte-2); }
.kette a { font-weight: 650; color: var(--beere); }

/* Schritte: echte Reihenfolge, deshalb nummeriert */
.schritte { list-style: none; counter-reset: s; padding: 0; margin: 0; }
.schritte li { counter-increment: s; position: relative; padding: 0 0 26px 64px; }
.schritte li::before { content: counter(s); position: absolute; left: 0; top: -4px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--beere); color: var(--beere); font-weight: 700; }
.schritte li:not(:last-child)::after { content: ''; position: absolute; left: 21px; top: 44px; bottom: 4px; width: 1.5px; background: var(--linie); }
.schritte h3 { margin-bottom: 6px; }
.schritte p { color: var(--tinte-2); margin: 0; }

.anspruch { margin: 0; }
.anspruch dt { font-weight: 700; font-size: 1.15rem; }
.anspruch dd { margin: 4px 0 22px; color: var(--tinte-2); padding-bottom: 22px; border-bottom: 1px solid var(--linie); }
.anspruch dd:last-child { border-bottom: 0; }

/* Ansprechpartner */
.ansprech { display: grid; grid-template-columns: minmax(0, 0.85fr) 1fr; gap: 56px; align-items: center; }
.ansprech-bild .portrait { width: 100%; max-width: 520px; }
.ansprech-text h2 { margin-bottom: 18px; }
.ansprech-name { font-size: 1.3rem; font-weight: 700; margin-bottom: 12px; }
.ansprech-name span { display: block; font-size: 15px; font-weight: 500; color: var(--leise); }
.ansprech-text p { color: var(--tinte-2); max-width: 34rem; }
.ansprech-wege { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.kreis { width: 120px; height: 120px; border-radius: 50%; background: var(--rose); color: var(--beere); display: grid; place-items: center; font-size: 2rem; font-weight: 600; }

/* Fragen */
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen details:first-child { border-top: 1px solid var(--linie); }
.fragen summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative; font-weight: 650; font-size: 1.05rem; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: '+'; position: absolute; right: 4px; top: 12px; font-size: 1.6rem; font-weight: 300; color: var(--beere); transition: transform .2s; }
.fragen details[open] summary::after { transform: rotate(45deg); }
.fragen .antwort { padding: 0 0 18px; color: var(--tinte-2); }
.fragen .antwort p:last-child { margin: 0; }

.ortliste { list-style: none; padding: 0; margin: 20px 0 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.ortliste a, .ortkacheln li { display: inline-block; padding: 9px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--linie); text-decoration: none; font-weight: 600; font-size: 15px; }
.ortliste a:hover { border-color: var(--beere); }
.ortkacheln { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.ortkacheln li a { text-decoration: none; color: var(--beere); }

/* Abschluss */
.abschluss { background: var(--beere); color: #fff; padding: 64px 0; }
.abschluss-reihe { display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap; }
.abschluss h2 { color: #fff; margin-bottom: 8px; }
.abschluss p { margin: 0; color: #fbe9f3; }
.abschluss .aktionen { margin-top: 4px; }
.abschluss .knopf { background: #fff; color: var(--beere); }
.abschluss .knopf:hover { background: var(--rose); color: var(--beere-dunkel); }
.abschluss .knopf.glas { background: transparent; color: #fff; }

/* Hinweiskasten */
.hinweiskasten { display: flex; justify-content: space-between; align-items: center; gap: 32px; background: var(--navy); color: #fff; border-radius: 6px 6px 6px var(--ecke); padding: 32px 36px; margin-top: 48px; }
.hinweiskasten h2 { color: #fff; font-size: 1.45rem; margin-bottom: 8px; }
.hinweiskasten p { margin: 0; color: #d3d8e1; max-width: 40rem; }
.hinweiskasten.hell { background: var(--rose); color: var(--navy); margin-top: 16px; }
.hinweiskasten.hell h2 { color: var(--navy); }
.hinweiskasten.hell p { color: var(--tinte-2); }
.hinweiskasten .knopf { flex: none; }
.hinweiskasten.senkrecht { flex-direction: column; align-items: flex-start; margin-top: 0; }

/* Vertrauen: wer bietet an */
.vertrauen { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start; margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--linie); }
.vertrauen h2 { font-size: 1.4rem; margin-bottom: 10px; }
.vertrauen p { color: var(--tinte-2); max-width: 48rem; margin: 0; }
.vertrauen-person .portrait { width: 120px; }
@media (max-width: 640px) { .vertrauen { grid-template-columns: 1fr; } }

/* Leistungsseiten */
.seitenkopf { padding: 40px 0 64px; }
.seitenkopf-raster { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; }
.seitenkopf h1 { font-size: clamp(2.3rem, 4.8vw, 3.8rem); margin: 10px 0 20px; max-width: 18ch; }
.seitenkopf .lead { font-size: 1.2rem; max-width: 40rem; margin-bottom: 28px; }
.seitenkopf .brot ol, .seitenkopf .brot a { color: inherit; opacity: .85; }
.gross-zeichen { font-size: clamp(8rem, 18vw, 15rem); font-weight: 200; line-height: .8; }
.seitenkopf.k1 { border-radius: 0; color: #fff; }
.seitenkopf.k4 { border-radius: 0; color: #fff; }
.seitenkopf.k1 .knopf, .seitenkopf.k4 .knopf { background: #fff; color: var(--navy); }
.seitenkopf.k2, .seitenkopf.k3 { border-radius: 0; }
.seitenkopf.k2 .gross-zeichen, .seitenkopf.k3 .gross-zeichen { color: var(--beere); }
.gruppen { display: grid; gap: 56px; }
.gruppen.zwei { grid-template-columns: 1fr 1fr; }
.gruppe h2 { margin-bottom: 12px; }
.gruppe > p { color: var(--tinte-2); }
.risiko { margin-top: 28px; }

/* Listen mit dem Logoquadrat als Aufzaehlungszeichen */
.haken { list-style: none; padding: 0; margin: 16px 0 0; }
.haken li { position: relative; padding: 9px 0 9px 26px; border-bottom: 1px solid var(--linie); }
.haken li::before { content: ''; position: absolute; left: 0; top: 18px; width: 10px; height: 10px; background: var(--beere); border-radius: 1px 1px 1px 4px; }
.haken.zwei-spalten { columns: 2; column-gap: 40px; }
.haken.zwei-spalten li { break-inside: avoid; }

/* Textseiten */
.textseite { max-width: 48rem; padding: 40px 0 96px; }
.textseite.breit { max-width: 64rem; }
.textseite h2 { margin: 48px 0 14px; font-size: 1.6rem; }
.textseite .ansprech { margin-top: 56px; padding: 32px; background: var(--getoent); border-radius: 6px 6px 6px var(--ecke); }
.dreier { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
.dreier > div { border-top: 2px solid var(--beere); padding-top: 16px; }
.dreier h2 { margin: 0 0 8px; font-size: 1.3rem; }
.dreier p { color: var(--tinte-2); margin: 0; }
.erlaubnisse { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.erlaubnisse li { background: var(--getoent); padding: 16px 18px; border-radius: var(--r); }
.erlaubnisse b { display: block; }
.erlaubnisse span { font-size: 15px; color: var(--tinte-2); }
.hinweis-entwurf { background: var(--rose); padding: 12px 16px; border-radius: var(--r); }

/* Objektseite */
.objekt { padding-top: 32px; padding-bottom: 32px; }
.objekt-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin: 8px 0 24px; }
.objekt-kopf .ort { color: var(--leise); font-weight: 550; margin: 0 0 6px; }
.objekt-h1 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 400; max-width: 26ch; }
.objekt-kopf .preis { font-size: 1.8rem; font-weight: 700; margin: 0; text-align: right; white-space: nowrap; }
.objekt-kopf .preis small { display: block; font-size: 14px; font-weight: 500; color: var(--leise); }
.galerie { display: grid; gap: 10px; margin-bottom: 40px; }
.galerie a { position: relative; display: block; overflow: hidden; background: var(--flieder); }
.galerie img { width: 100%; height: 100%; object-fit: cover; }
.galerie-1 a { aspect-ratio: 16 / 9; border-radius: 6px 6px 6px var(--ecke); }
.galerie-2 { grid-template-columns: 1.6fr 1fr; }
.galerie-2 a { aspect-ratio: 4 / 3; }
.galerie-2 a:first-child { border-radius: 6px 0 0 var(--ecke); }
.galerie-2 a:last-child { border-radius: 0 6px 6px 0; }
.galerie-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; height: min(62vh, 560px); }
.galerie-3 a:first-child { grid-row: span 2; border-radius: 6px 0 0 var(--ecke); }
.galerie-3 a:nth-child(2) { border-radius: 0 6px 0 0; }
.galerie-3 a:nth-child(3) { border-radius: 0 0 6px 0; }
.alle { position: absolute; right: 12px; bottom: 12px; background: #fff; color: var(--navy); font-size: 14px; font-weight: 700; padding: 8px 14px; border-radius: 999px; }
.objekt-raster { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 64px; align-items: start; }
.objekt-text h2 { font-size: 1.55rem; margin: 44px 0 14px; }
.kurzfassung { font-size: 1.15rem; color: var(--tinte-2); }
.eckdaten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 24px 0 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.eckdaten div { padding: 18px 0; }
.eckdaten div + div { padding-left: 20px; border-left: 1px solid var(--linie); }
.eckdaten dt { font-size: 14px; color: var(--leise); }
.eckdaten dd { margin: 2px 0 0; font-size: 1.45rem; font-weight: 650; }
.tabelle, .zeiten { border-collapse: collapse; width: 100%; }
.tabelle th, .tabelle td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle th { font-weight: 550; color: var(--tinte-2); width: 50%; padding-right: 16px; }
.zeiten th, .zeiten td { text-align: left; padding: 3px 0; font-weight: 450; vertical-align: top; }
.zeiten th { padding-right: 16px; font-weight: 600; }
.stand { margin-top: 40px; font-size: 15px; color: var(--leise); }
.seitenleiste { position: sticky; top: 104px; background: #fff; border: 1px solid var(--linie); border-radius: 6px 6px 6px var(--ecke); padding: 28px; }
.seitenleiste h2 { font-size: 1.4rem; margin-bottom: 8px; }
.seitenleiste > p { color: var(--tinte-2); font-size: 16px; }
.leisten-person { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--linie); }
.leisten-person .portrait { width: 64px; height: auto; }
.leisten-person b { display: block; }
.leisten-person a { font-weight: 650; color: var(--beere); }
.aehnlich { margin-top: 88px; }
.aehnlich h2 { margin-bottom: 24px; }

/* Formular */
.formular { display: grid; gap: 16px; }
.formular label { display: grid; gap: 6px; font-size: 15px; font-weight: 650; }
.formular input, .formular select, .formular textarea { font: 450 17px/1.4 var(--schrift); color: var(--tinte); padding: 12px 14px; border: 1.5px solid #cfc7d5; border-radius: 10px; background: #fff; width: 100%; }
.formular input:focus, .formular select:focus, .formular textarea:focus { outline: none; border-color: var(--beere); box-shadow: 0 0 0 3px rgb(182 55 130 / .18); }
.formular .knopf { justify-self: start; }
.formular .klein { margin: 0; font-size: 14px; }
.optional { font-weight: 450; color: var(--leise); }
.feldpaar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.falle { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.formular-ok { background: var(--rose); border-radius: 6px 6px 6px var(--ecke); padding: 28px; }
.formular-ok h2 { font-size: 1.4rem; margin-bottom: 8px; }
.formular-fehler { background: #fdecec; color: #8a1c1c; padding: 12px 14px; border-radius: 10px; margin: 0; }
.seitenleiste .formular { margin-top: 12px; }
.seitenleiste .feldpaar { grid-template-columns: 1fr; }

/* Kontakt */
.kontakt-raster { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: start; margin-top: 24px; }
.kontakt-form h2 { margin-bottom: 20px; }
.kontakt-karte { background: var(--getoent); border-radius: 6px var(--ecke) 6px 6px; padding: 32px; }
.kontakt-karte h2 { font-size: 1.15rem; font-weight: 700; margin: 28px 0 8px; letter-spacing: 0; }
.kontakt-person { display: grid; grid-template-columns: 140px 1fr; gap: 18px; align-items: center; }
.kontakt-person .ansprech-name { margin: 0; }
.gross-link { font-size: 1.25rem; font-weight: 650; }
.gross-link a { color: var(--beere); text-decoration: none; }

/* Stimmen */
.stimmen { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.stimme { margin: 0; background: #fff; padding: 24px; border-radius: 6px 6px 6px var(--ecke); border: 1px solid var(--linie); }
.stimme blockquote { margin: 0 0 12px; font-size: 1.1rem; }
.stimme figcaption { color: var(--leise); font-size: 15px; }

/* Fotobetrachter */
.betrachter { position: fixed; inset: 0; z-index: 60; background: rgb(18 24 33 / .94); display: none; align-items: center; justify-content: center; }
.betrachter.offen { display: flex; }
.betrachter img { max-width: 90vw; max-height: 86vh; object-fit: contain; }
.betrachter button { position: absolute; background: rgb(255 255 255 / .12); color: #fff; border: 0; width: 52px; height: 52px; border-radius: 50%; font-size: 2rem; cursor: pointer; }
.betrachter .zu { top: 20px; right: 20px; }
.betrachter .zurueck { left: 20px; }
.betrachter .vor { right: 20px; }
.betrachter .zaehler { position: absolute; bottom: 20px; color: #fff; font-size: 15px; }

/* Fuss */
.fuss { background: var(--navy); color: #c9cfda; padding: 72px 0 28px; margin-top: 0; font-size: 16px; }
.fuss a { color: #fff; }
.fuss a:hover { color: #f3b9da; }
.fuss-raster { display: grid; grid-template-columns: 1.4fr 1fr 1.1fr 1fr 1fr; gap: 40px; }
.fuss .marke { color: #fff; margin-bottom: 18px; }
.fuss .marke-text { color: #d6d3da; }
.fuss .marke-text b { color: #f08fc4; }
.fuss-marke p { max-width: 20rem; }
.fuss .marke-text { font-size: 1.2rem; }
.fuss-titel { font-size: 1rem; font-weight: 700; color: #fff; margin: 6px 0 14px; letter-spacing: 0; }
.fuss-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.fuss-liste a { text-decoration: none; color: #c9cfda; }
.fuss-liste a:hover { color: #fff; }
.fuss .zeiten { color: #c9cfda; font-size: 15px; }
.fuss .zeiten th { color: #fff; }
.fuss .klein { color: #97a0b0; margin-top: 10px; }
.fuss-unten { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 56px; padding-top: 24px; border-top: 1px solid rgb(255 255 255 / .12); font-size: 14px; color: #97a0b0; }
.fuss-unten span:last-child { display: flex; gap: 20px; }
.fuss-unten a { color: #c9cfda; }

/* ===== Runde 2: Medien, Mosaik, Buehne ===== */

.knopf.weiss { background: #fff; color: var(--beere); }
.knopf.weiss:hover { background: var(--rose); color: var(--beere-dunkel); }

/* Menue mit Unterpunkten */
.nav-punkt { position: relative; }
.nav-punkt > a { display: inline-block; padding: 28px 0; }
.nav-unter { position: absolute; top: 100%; left: -18px; min-width: 250px; background: #fff; border: 1px solid var(--linie); border-radius: 6px 6px 6px var(--ecke); padding: 10px 0; box-shadow: 0 24px 48px rgb(28 38 51 / .14); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s; }
.nav-unter a { display: block; padding: 9px 18px; font-size: 15px; font-weight: 500; }
.nav-unter a:hover, .nav-unter a[aria-current] { background: var(--getoent); color: var(--beere); }
.nav-punkt:hover .nav-unter, .nav-punkt:focus-within .nav-unter { opacity: 1; visibility: visible; transform: none; }

/* Mosaik: die vier Logoquadrate mit Video oder Foto, eingefaerbt */
.mosaik { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mosaik .kachel { position: relative; overflow: hidden; aspect-ratio: 1 / 1; min-height: 0; isolation: isolate; animation: einfliegen .9s cubic-bezier(.2, .75, .2, 1) both; }
.mosaik .kachel:nth-child(1) { --dx: -18px; --dy: -18px; animation-delay: .05s; }
.mosaik .kachel:nth-child(2) { --dx: 18px; --dy: -18px; animation-delay: .15s; }
.mosaik .kachel:nth-child(3) { --dx: -18px; --dy: 18px; animation-delay: .25s; }
.mosaik .kachel:nth-child(4) { --dx: 18px; --dy: 18px; animation-delay: .35s; }
@keyframes einfliegen { from { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.94); } to { opacity: 1; transform: none; } }
.kachel-medium { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s ease; }
.mosaik .kachel::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--ton); opacity: .5; transition: opacity .35s ease; }
.mosaik .kachel::after { content: ''; position: absolute; inset: 45% 0 0; z-index: -1; background: linear-gradient(transparent, var(--ton)); opacity: .9; }
.mosaik .k1 { --ton: var(--beere); }
.mosaik .k2 { --ton: #f3dbe8; }
.mosaik .k3 { --ton: #e7e1ec; }
.mosaik .k4 { --ton: var(--pflaume); }
.mosaik .kachel:hover::before, .mosaik .kachel:focus-visible::before { opacity: .3; }
.mosaik .k2::before, .mosaik .k3::before { opacity: .6; }
.mosaik .k2:hover::before, .mosaik .k3:hover::before { opacity: .45; }
.mosaik .kachel:hover .kachel-medium { transform: scale(1.05); }
.mosaik .kachel .zeichen { font-size: clamp(4rem, 7vw, 6.4rem); top: 6px; left: 22px; }
.mosaik .kachel-name { font-size: 1.4rem; }
.held .mosaik .kachel:hover { transform: none; }

/* Unterseiten als Fotokarten */
.unterkarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px 22px; margin-top: 28px; }
.unterkarte { text-decoration: none; color: var(--tinte); display: block; }
.unterkarte-bild { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px 6px 6px var(--ecke); background: var(--flieder); margin-bottom: 14px; }
.unterkarte-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.unterkarte:hover img { transform: scale(1.04); }
.unterkarte:hover h3 { color: var(--beere); }
.unterkarte h3 { font-size: 1.2rem; margin-bottom: 6px; }
.unterkarte p { color: var(--tinte-2); font-size: 16px; margin: 0; }

/* Abschnitte der Unterseiten: Ueberschrift links, Inhalt rechts, abwechselnd getoent */
.abschnitte { display: grid; gap: 0; }
.block { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; padding: 40px 0; border-top: 1px solid var(--linie); }
.block:first-child { border-top: 0; padding-top: 0; }
.block h2 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); }
.block p { color: var(--tinte-2); font-size: 1.08rem; }

.geschwister { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.geschwister a { display: block; text-decoration: none; padding: 16px 20px; background: var(--getoent); border-radius: 6px 6px 6px 20px; }
.geschwister a:hover { background: var(--rose); color: var(--tinte); }
.geschwister b { display: block; font-size: 1.05rem; }
.geschwister span { font-size: 15px; color: var(--tinte-2); }

/* So arbeiten wir: Foto plus Schritte */
.arbeit { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.arbeit-bild { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 8px var(--ecke) 8px 8px; }
.arbeit-bild img { width: 100%; height: 100%; object-fit: cover; }
.arbeit h2 { margin-bottom: 26px; }
.vierschritte { list-style: none; counter-reset: v; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.vierschritte li { counter-increment: v; position: relative; padding: 76px 22px 24px; background: var(--getoent); border-radius: 6px 6px 6px var(--ecke); }
.vierschritte li::before { content: counter(v); position: absolute; top: 14px; left: 22px; font-size: 3.2rem; font-weight: 200; color: var(--beere); line-height: 1; }
.vierschritte h3 { margin-bottom: 8px; }
.vierschritte p { color: var(--tinte-2); margin: 0; font-size: 16px; }
.erlaubnisse.vier { grid-template-columns: repeat(4, 1fr); margin-top: 24px; }

/* Zitatband: Klaus und sein Leitsatz */
.zitatband { background: var(--navy); color: #fff; padding: 88px 0 0; overflow: hidden; }
.zitat-raster { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: end; }
.zitat-bild .portrait { width: 100%; max-width: 480px; display: block; }
.zitat { margin: 0; padding-bottom: 88px; }
.zitat blockquote { margin: 0 0 24px; font-family: var(--serif); font-variation-settings: 'opsz' 96; font-size: clamp(2.1rem, 4.4vw, 3.6rem); font-weight: 300; line-height: 1.12; letter-spacing: -0.02em; }
.zitat blockquote::before { content: '„'; color: var(--beere); }
.zitat blockquote::after { content: '“'; color: var(--beere); }
.zitat figcaption { color: #c9cfda; margin-bottom: 28px; }
.zitat figcaption b { color: #fff; }

/* Ansprechpartner Band */
.ansprech-titel { color: #fff; font-size: clamp(2.2rem, 4.2vw, 3.4rem); margin-bottom: 18px; }
.ansprech-lead { color: #d3d8e1; font-size: 1.15rem; max-width: 36rem; margin-bottom: 28px; }

/* Schlagwortwolke statt langer Listen */
.wolke { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wolke li { padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--linie); font-size: 15px; font-weight: 550; }
.unterkarten.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .unterkarten.drei { grid-template-columns: 1fr; } }

/* Partnerleiste */
.partner { padding: 56px 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); background: #fff; }
.partner-titel { font-size: 1.1rem; font-weight: 600; color: var(--tinte-2); margin-bottom: 24px; letter-spacing: 0; }
.partner-band { overflow: hidden; margin: 0 0 14px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.partner-liste { list-style: none; padding: 0; margin: 0; display: flex; gap: 72px; width: max-content; animation: band 32s linear infinite; }
.partner-band:hover .partner-liste { animation-play-state: paused; }
@keyframes band { to { transform: translateX(calc(-50% - 36px)); } }
.partner-liste li { display: grid; place-items: center; height: 72px; flex: none; width: 170px; }
.partner-liste img { max-height: 54px; width: auto; max-width: 100%; filter: grayscale(1); opacity: .7; transition: filter .2s, opacity .2s; }
.partner-liste li:hover img { filter: none; opacity: 1; }

/* Regionband: Stadtbild Leonberg */
.regionband { position: relative; min-height: 520px; display: flex; align-items: flex-end; color: #fff; overflow: hidden; }
.region-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.region-schleier { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(28 38 51 / .92) 0%, rgb(28 38 51 / .55) 55%, rgb(107 45 107 / .25) 100%); }
.region-inhalt { position: relative; padding-top: 96px; padding-bottom: 72px; width: 100%; }
.region-inhalt h2 { color: #fff; max-width: 18ch; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 300; margin-bottom: 18px; }
.region-inhalt p { max-width: 36rem; color: #e1e5ec; font-size: 1.12rem; }
.ortliste.hell a { background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .3); color: #fff; }
.ortliste.hell a:hover { background: rgb(255 255 255 / .22); border-color: #fff; }

/* ===== Runde 3: Fotokopf ===== */

/* Navigation: transparent über dem Foto, fest beim Scrollen */
.foto-kopf .kopf { margin-bottom: -81px; background: transparent; border-bottom-color: transparent; backdrop-filter: none; transition: background .3s ease, border-color .3s ease; }
.foto-kopf .kopf:not(.fest) .nav-punkt > a, .foto-kopf .kopf:not(.fest) .marke-text { color: #fff; }
.foto-kopf .kopf:not(.fest) .marke-text b { color: #f6b6d8; }
.foto-kopf .kopf:not(.fest) .menue-knopf { background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .35); }
.foto-kopf .kopf:not(.fest) .menue-knopf span { background: #fff; }
.foto-kopf .kopf.fest { background: rgb(252 251 253 / .94); backdrop-filter: blur(10px); border-bottom-color: var(--linie); }

/* Startseite: Foto über die volle Breite */
/* Volle Bildschirmhöhe: Foto füllt den ersten Bildschirm, das Entwurfsband oben wird abgezogen */
.held-foto { position: relative; min-height: calc(100vh - var(--band-hoehe, 0px)); min-height: calc(100svh - var(--band-hoehe, 0px)); display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: var(--navy); padding: 140px 0 clamp(48px, 9vh, 96px); }
.held-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; animation: atmen 18s ease-out both; }
@keyframes atmen { from { transform: scale(1.08); } to { transform: none; } }
.held-verlauf { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(28 38 51 / .9) 0%, rgb(28 38 51 / .62) 42%, rgb(28 38 51 / .08) 75%), linear-gradient(0deg, rgb(28 38 51 / .7) 0%, transparent 38%); }
.held-foto-raster { position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .55fr); gap: 56px; align-items: end; }
.held-foto h1 { color: #fff; font-size: clamp(2.5rem, 4.6vw, 4.2rem); max-width: 19ch; line-height: 1.05; }
.held-foto .lead { font-size: 1.2rem; color: #e6e9ef; max-width: 34rem; margin: 26px 0 32px; }
.held-foto h1, .held-foto .lead, .held-foto .aktionen { animation: zeile .9s cubic-bezier(.2, .75, .2, 1) both; }
.held-foto .lead { animation-delay: .12s; }
.held-foto .aktionen { animation-delay: .24s; }
@keyframes zeile { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Glaskarten */
.glaskarten { display: grid; gap: 14px; justify-items: end; }
.glas-karte { display: flex; align-items: center; gap: 14px; width: min(100%, 320px); padding: 12px 14px; border-radius: 6px 6px 6px 24px; background: rgb(255 255 255 / .14); border: 1px solid rgb(255 255 255 / .28); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); color: #fff; text-decoration: none; font-size: 15px; line-height: 1.35; animation: karte .9s cubic-bezier(.2, .75, .2, 1) both; transition: background .2s ease, transform .2s ease; }
.glas-karte:nth-child(1) { animation-delay: .35s; }
.glas-karte:nth-child(2) { animation-delay: .5s; }
.glas-karte:nth-child(3) { animation-delay: .65s; }
@keyframes karte { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.glas-karte:hover { background: rgb(255 255 255 / .22); color: #fff; transform: translateY(-2px); }
.glas-karte b { display: block; font-size: 16px; }
.glas-karte small { display: block; font-size: 12px; font-weight: 600; color: #f6b6d8; margin-bottom: 2px; }
.glas-karte img { width: 84px; height: 64px; object-fit: cover; border-radius: 4px 4px 4px 14px; flex: none; }
.glas-person { padding: 10px 18px 10px 10px; }
.glas-person .portrait { width: 92px; height: auto; flex: none; }

/* Die vier Kernleistungen: grosse Bildkarten, 2 x 2 */
.kern { padding: 96px 0 40px; }
.kern-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-bottom: 40px; }
.kern-kopf h2 { font-size: clamp(2.2rem, 4vw, 3.4rem); max-width: 20ch; }
.kern-kopf p { margin: 0; }
.kern-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.kern-karte { position: relative; isolation: isolate; overflow: hidden; min-height: 460px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; border-radius: 8px; }
.kern-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.kern-karte::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(28 38 51 / .05) 25%, var(--ton) 100%); opacity: .92; transition: opacity .4s ease; }
.kern-karte.k1 { --ton: var(--beere); border-top-left-radius: 64px; }
.kern-karte.k2 { --ton: var(--navy); border-top-right-radius: 64px; }
.kern-karte.k3 { --ton: var(--navy); border-bottom-left-radius: 64px; }
.kern-karte.k4 { --ton: var(--pflaume); border-bottom-right-radius: 64px; }
.kern-zeichen { position: absolute; top: 18px; right: 30px; font-size: clamp(5rem, 8vw, 7.5rem); font-weight: 200; line-height: 1; color: #fff; text-shadow: 0 4px 30px rgb(0 0 0 / .25); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.kern-text { padding: 32px 34px 34px; }
.kern-text h3 { font-family: var(--serif); font-weight: 350; font-size: clamp(2rem, 3.2vw, 2.8rem); letter-spacing: -.02em; line-height: 1.05; margin-bottom: 8px; }
.kern-text h3 a { color: #fff; text-decoration: none; }
.kern-text h3 a::after { content: ''; position: absolute; inset: 0; z-index: 0; }
.kern-text > p { color: rgb(255 255 255 / .88); font-size: 1.08rem; margin-bottom: 18px; }
.kern-wege { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; position: relative; z-index: 1; }
.kern-wege a { display: inline-block; padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #fff; text-decoration: none; background: rgb(255 255 255 / .14); border: 1px solid rgb(255 255 255 / .3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .2s ease; }
.kern-wege a:hover { background: rgb(255 255 255 / .3); color: #fff; }
.kern-karte:hover .kern-bild { transform: scale(1.05); }
.kern-karte:hover .kern-zeichen { transform: rotate(90deg); }
.kern-karte.k1:hover .kern-zeichen, .kern-karte.k2:hover .kern-zeichen { transform: scale(1.12); }
.kern-karte:focus-within { outline: 3px solid var(--beere); outline-offset: 3px; }

/* Bühne der Leistungs und Unterseiten: Foto über die volle Breite */
.buehne { position: relative; overflow: hidden; color: #fff; background: var(--navy); min-height: calc(100vh - var(--band-hoehe, 0px)); min-height: calc(100svh - var(--band-hoehe, 0px)); display: flex; align-items: flex-end; padding: 150px 0 clamp(56px, 10vh, 112px); }
.buehne-medium { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.buehne-verlauf { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(28 38 51 / .92) 0%, rgb(28 38 51 / .6) 50%, rgb(28 38 51 / .15) 100%), linear-gradient(0deg, rgb(28 38 51 / .55), transparent 45%); }
.buehne.ton1 .buehne-verlauf, .buehne.ton4 .buehne-verlauf { background: linear-gradient(90deg, rgb(28 38 51 / .92) 0%, rgb(28 38 51 / .58) 50%, rgb(107 45 107 / .25) 100%), linear-gradient(0deg, rgb(28 38 51 / .55), transparent 45%); }
.buehne-inhalt { position: relative; width: 100%; }
.buehne h1 { color: #fff; font-size: clamp(2.3rem, 4.6vw, 3.9rem); max-width: 17ch; margin: 12px 0 20px; }
.buehne .lead { font-size: 1.18rem; color: #e1e5ec; max-width: 38rem; margin-bottom: 28px; }
.buehne .brot ol, .buehne .brot a { color: #c9cfda; }
.buehne-zeichen { position: absolute; right: 4%; bottom: -4%; font-size: clamp(12rem, 26vw, 24rem); font-weight: 100; line-height: 1; color: rgb(255 255 255 / .16); pointer-events: none; }

/* Scroll Geschichte: So arbeiten wir */
.geschichte { padding: 96px 0; background: var(--getoent); }
.geschichte-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.geschichte-buehne { position: sticky; top: 120px; aspect-ratio: 4 / 5; max-height: calc(100vh - 160px); width: 100%; }
.geschichte-bilder { position: absolute; inset: 0; overflow: hidden; border-radius: 8px var(--ecke) 8px 8px; background: var(--flieder); }
.geschichte-bild { position: absolute; inset: 0; opacity: 0; transform: scale(1.06); transition: opacity .7s ease, transform 1.2s ease; }
.geschichte-bild.an { opacity: 1; transform: none; }
.geschichte-bild img { width: 100%; height: 100%; object-fit: cover; }
.geschichte-nr { position: absolute; left: -18px; bottom: -34px; font-size: clamp(6rem, 11vw, 9.5rem); font-weight: 200; line-height: 1; color: var(--beere); text-shadow: 0 2px 30px rgb(252 251 253 / .6); }
.geschichte-text { position: relative; padding-left: 40px; }
.geschichte-text > h2 { margin-bottom: 14px; }
.geschichte-text > .gross-text { margin-bottom: 24px; }
.geschichte-linie { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--linie); }
.geschichte-linie span { position: absolute; inset: 0; background: var(--beere); transform-origin: top; transform: scaleY(.25); transition: transform .6s ease; }
.geschichte-schritte { list-style: none; padding: 0; margin: 0 0 24px; }
.geschichte-schritt { padding: 12vh 0; transition: opacity .35s ease; }
.geschichte-schritt:last-child { padding-bottom: 20vh; }
.geschichte-schritt:first-child { padding-top: 6vh; }
.geschichte.aktiv .geschichte-schritt { opacity: .28; }
.geschichte.aktiv .geschichte-schritt.an { opacity: 1; }
.geschichte-zahl { display: block; font-size: 15px; font-weight: 700; color: var(--beere); letter-spacing: .04em; margin-bottom: 8px; }
.geschichte-schritt h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 400; margin-bottom: 12px; }
.geschichte-schritt p { font-size: 1.15rem; color: var(--tinte-2); max-width: 30rem; }
.geschichte-mobilbild { display: none; }
@media (max-width: 960px) {
  .geschichte { padding: 64px 0; }
  .geschichte-raster { grid-template-columns: 1fr; gap: 0; }
  .geschichte-buehne { display: none; }
  .geschichte-text { padding-left: 24px; }
  .geschichte-schritt { padding: 32px 0; }
  .geschichte.aktiv .geschichte-schritt { opacity: 1; }
  .geschichte-mobilbild { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 6px 6px 6px var(--ecke); margin-bottom: 16px; }
  .geschichte-mobilbild img { width: 100%; height: 100%; object-fit: cover; }
}

/* Ueber uns: persoenliches Foto */
.persoenlich { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: center; }
.persoenlich-bild { aspect-ratio: 3 / 4; overflow: hidden; border-radius: 8px 8px 8px var(--ecke); transform: rotate(-2deg); box-shadow: 0 30px 60px rgb(28 38 51 / .18); }
.persoenlich-bild img { width: 100%; height: 100%; object-fit: cover; }
.persoenlich h2 { margin-bottom: 18px; }
@media (max-width: 960px) { .persoenlich { grid-template-columns: 1fr; gap: 36px; } .persoenlich-bild { max-width: 420px; } }

/* Ueber uns */
.ueber-raster { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 72px; align-items: start; }
.ueber-raster h2 { margin-bottom: 24px; }
.ueber-text p { margin-bottom: 1.1em; }
.block.wer { border-top: 0; padding: 0; }
.block.wer h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
.block.wer .ueber-text p { color: var(--tinte); font-size: 1.25rem; }
.ueber-person { margin: 0; position: sticky; top: 120px; }
.ueber-person .portrait { width: 100%; max-width: 440px; }
.ueber-person figcaption { margin-top: 12px; }
.dreier h3 { margin: 0 0 8px; font-size: 1.3rem; }

/* Bewegung nur, wenn erwuenscht */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; animation: none !important; }
  .partner-liste { flex-wrap: wrap; width: auto; justify-content: center; gap: 24px; }
  .partner-liste li[aria-hidden] { display: none; }
}

/* Tablet */
@media (max-width: 1080px) {
  .nav { gap: 18px; font-size: 15px; }
  .fuss-raster { grid-template-columns: 1fr 1fr 1fr; }
  .fuss-marke { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
  .menue-knopf { display: flex; }
  .nav { display: none; position: absolute; top: 80px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--papier); border-bottom: 1px solid var(--linie); padding: 8px 24px 24px; box-shadow: 0 20px 40px rgb(28 38 51 / .12); }
  .nav.offen { display: flex; }
  .nav a:not(.knopf) { padding: 14px 0; border-bottom: 1px solid var(--linie); font-size: 17px; }
  .nav { max-height: calc(100vh - 80px); overflow-y: auto; }
  .nav-punkt > a { display: block; padding: 14px 0; font-weight: 700; }
  .nav-unter { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 8px 14px; min-width: 0; background: transparent; }
  .nav-unter a { padding: 8px 0 !important; font-size: 15px !important; border-bottom: 0 !important; color: var(--tinte-2); }
  .nav-unter a:first-child { display: none; }
  .arbeit, .zitat-raster, .ueber-raster, .block, .held-foto-raster { grid-template-columns: 1fr; }
  .glaskarten { justify-items: start; }
  .glas-karte:nth-child(2) { margin-right: 0; }
  .glas-recht { display: none; }
  .kern-kopf { grid-template-columns: 1fr; gap: 16px; }
  .kern-raster { grid-template-columns: 1fr; }
  .kern-karte { min-height: 380px; }
  .held-foto { padding: 130px 0 72px; }

  .block { gap: 12px; }
  .arbeit { gap: 36px; }
  .arbeit-bild { aspect-ratio: 16 / 11; }
  .vierschritte { grid-template-columns: 1fr 1fr; }
  .erlaubnisse.vier { grid-template-columns: 1fr 1fr; }
  .zitat-raster { gap: 24px; }
  .zitat-bild { order: 2; }
  .zitat-bild .portrait { max-width: 320px; }
  .zitat { padding-bottom: 0; }
  .ueber-person { max-width: 380px; position: static; }
  .nav .knopf { margin-top: 16px; }
  .held-raster, .zweispaltig, .ansprech, .objekt-raster, .kontakt-raster, .schaufenster, .gruppen.zwei { grid-template-columns: 1fr; }
  .held-raster { gap: 48px; }
  .zweispaltig { gap: 56px; }
  .ansprech { gap: 28px; }
  .ansprech-bild .portrait { max-width: 380px; }
  .seitenleiste { position: static; }
  .kette { grid-template-columns: 1fr; }
  .kette li + li { padding-left: 0; border-left: 0; }
  .streifen { grid-template-columns: repeat(2, 1fr); }
  .seitenkopf-raster { grid-template-columns: 1fr; }
  .gross-zeichen { display: none; }
  .dreier { grid-template-columns: 1fr; }
}

/* Handy */
@media (max-width: 640px) {
  body { font-size: 17px; }
  .huelle { padding: 0 16px; }
  .kopf-reihe { height: 68px; }
  .nav { top: 68px; padding: 8px 16px 20px; }
  .marke svg { width: 36px; height: 36px; }
  .marke-text { font-size: 1.1rem; letter-spacing: 0.04em; }
  .held { padding: 48px 0 56px; }
  .held .lead { font-size: 1.1rem; }
  .kachel { min-height: 150px; padding: 16px 16px 18px; }
  .kachel .zeichen { font-size: 3.8rem; left: 14px; }
  .kachel-name { font-size: 1.1rem; }
  .kachel-text { font-size: 14px; }
  .abschnitt { padding: 64px 0; }
  .kopfzeile { flex-direction: column; align-items: flex-start; gap: 16px; }
  .raster.zwei, .streifen { grid-template-columns: 1fr; }
  .hinweiskasten { flex-direction: column; align-items: flex-start; padding: 26px 22px; }
  .haken.zwei-spalten { columns: 1; }
  .eckdaten { grid-template-columns: 1fr 1fr; }
  .eckdaten div:nth-child(3) { padding-left: 0; border-left: 0; border-top: 1px solid var(--linie); }
  .eckdaten div:nth-child(4) { border-top: 1px solid var(--linie); }
  .objekt-kopf { flex-direction: column; align-items: flex-start; }
  .objekt-kopf .preis { text-align: left; }
  .galerie-3 { height: auto; grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .galerie-3 a { aspect-ratio: 4 / 3; }
  .galerie-3 a:first-child { grid-column: 1 / -1; grid-row: auto; border-radius: 6px 6px 0 0; }
  .galerie-3 a:nth-child(2) { border-radius: 0 0 0 var(--ecke); }
  .galerie-2 { grid-template-columns: 1fr; }
  .feldpaar { grid-template-columns: 1fr; }
  .foto-kopf .kopf { margin-bottom: -69px; }
  .glas-objekt { display: none; }
  .kern { padding: 64px 0 24px; }
  .kern-karte { min-height: 340px; }
  .kern-text { padding: 22px 20px 22px; }
  .kern-zeichen { font-size: 4.2rem; right: 18px; }
  .buehne { padding: 120px 0 48px; min-height: 0; }
  .held-bild { object-position: 78% 40%; }
  .mosaik .kachel .zeichen { font-size: 3.4rem; left: 14px; }
  .mosaik .kachel-name { font-size: 1.05rem; }
  .mosaik .kachel-text { font-size: 13px; }
  .vierschritte, .erlaubnisse.vier { grid-template-columns: 1fr; }
  .partner-liste { gap: 40px; }
  .partner-liste li { width: 130px; }
  .regionband { min-height: 460px; }
  .kontakt-karte { padding: 24px 20px; }
  .kontakt-person { grid-template-columns: 110px 1fr; }
  .erlaubnisse { grid-template-columns: 1fr; }
  .fuss-raster { grid-template-columns: 1fr 1fr; gap: 32px; }
  .textseite .ansprech { padding: 22px; }
  .betrachter .zurueck, .betrachter .vor { bottom: 16px; top: auto; }
}

/* ===== Einheitliche Typografie (Audit 05.10.) =====
 * Serife nur für Seitentitel, Abschnittstitel und die grossen Display Überschriften.
 * Überschriften in Bauteilen (Kästen, Leisten, Formulare) einheitlich in der Grotesk. */
.held-foto h1, .buehne h1, .seiten-h1 { font-size: var(--t-h1); }
.kern-kopf h2, .gruppe h2, .block h2, .zweispaltig > div > h2, .kopfzeile h2, .region-inhalt h2, .ansprech-titel, .ansprech-text h2 { font-size: var(--t-h2); }
.gruppe h2, .block h2 { font-size: var(--t-h2-klein); }
.hinweiskasten h2, .seitenleiste h2, .kontakt-karte h2, .kontakt-form h2, .formular-ok h2, .dreier h2, .dreier h3, .raster-titel, .vertrauen h2, .partner-titel {
  font-family: var(--schrift); font-variation-settings: normal; font-weight: 700; font-size: var(--t-bauteil); letter-spacing: -0.01em; line-height: 1.25;
}
.kontakt-form h2 { font-size: 1.6rem; }
.partner-titel { font-size: 1rem; font-weight: 600; }
.geschichte-schritt h3 { font-family: var(--serif); font-variation-settings: 'opsz' 96; font-weight: 350; font-size: clamp(1.7rem, 2.6vw, 2.2rem); letter-spacing: -0.02em; }
.textseite h2 { font-size: var(--t-h2-klein); }
/* Zeilenlänge: höchstens rund 75 Zeichen */
.textseite { max-width: 42rem; }
.textseite.breit { max-width: 64rem; }
.textseite.breit > p, .textseite.breit .text p { max-width: 42rem; }
.gruppe > p, .vertrauen p, .risiko, .block p { max-width: 40rem; }
/* Scroll Geschichte kompakter */
.geschichte-schritt { padding: 8vh 0; }
.geschichte-schritt:first-child { padding-top: 4vh; }
.geschichte-schritt:last-child { padding-bottom: 14vh; }

.unterkarten { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.risiko { max-width: 34rem; }
h1 { overflow-wrap: break-word; hyphens: auto; }

/* Einzelne Unterseite als breite Querkarte statt einsamer Kachel */
.unterkarte.quer { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; margin-top: 28px; }
.unterkarte.quer .unterkarte-bild { aspect-ratio: 16 / 10; margin: 0; }
.unterkarte.quer h3 { font-family: var(--serif); font-variation-settings: 'opsz' 96; font-weight: 350; font-size: var(--t-h2-klein); letter-spacing: -0.02em; margin-bottom: 12px; }
.unterkarte.quer p { font-size: 1.1rem; margin-bottom: 24px; }
.gruppen:not(.zwei) .gruppe { max-width: 48rem; }
@media (max-width: 960px) { .unterkarte.quer { grid-template-columns: 1fr; gap: 20px; } }

@media (min-width: 961px) { .geschichte-zahl { display: none; } }


/* ===== Runde 4: Paneele, Darüberfahren, Partnerband ===== */

/* Kernleistungen: vier Paneele nebeneinander */
@media (min-width: 961px) and (hover: hover) {
  .kern-raster { display: flex; gap: 12px; height: clamp(440px, calc(100vh - 360px), 600px); grid-template-columns: none; }
  .kern-karte { flex: 1 1 0; min-width: 0; min-height: 0; border-radius: 8px; transition: flex .75s cubic-bezier(.2, .8, .2, 1); }
  .kern-karte.p1 { border-top-left-radius: 64px; }
  .kern-karte.p4 { border-bottom-right-radius: 64px; }
  .kern-raster:hover .kern-karte, .kern-raster:focus-within .kern-karte { flex: .7 1 0; }
  .kern-raster .kern-karte:hover, .kern-raster .kern-karte:focus-within,
  .kern-raster:not(:hover):not(:focus-within) .kern-karte:first-child { flex: 2.6 1 0; }
  .kern-text { width: min(520px, 42vw); opacity: 0; transform: translateY(18px); transition: opacity .3s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
  .kern-karte:hover .kern-text, .kern-karte:focus-within .kern-text,
  .kern-raster:not(:hover):not(:focus-within) .kern-karte:first-child .kern-text { opacity: 1; transform: none; transition-delay: .28s; }
  .kern-senkrecht { position: absolute; left: 26px; bottom: 30px; writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--serif); font-variation-settings: 'opsz' 96; font-weight: 350; font-size: 2rem; letter-spacing: -.01em; color: #fff; white-space: nowrap; transition: opacity .25s ease; }
  .kern-karte:hover .kern-senkrecht, .kern-karte:focus-within .kern-senkrecht,
  .kern-raster:not(:hover):not(:focus-within) .kern-karte:first-child .kern-senkrecht { opacity: 0; }
  .kern-karte .kern-zeichen { left: 22px; right: auto; }
  .kern-karte:hover .kern-bild { transform: scale(1.04); }
}
.kern-senkrecht { display: none; }
@media (min-width: 961px) and (hover: hover) { .kern-senkrecht { display: block; } }
.kern-karte.p1 { --ton: var(--beere); }
.kern-karte.p2, .kern-karte.p3 { --ton: var(--navy); }
.kern-karte.p4 { --ton: var(--pflaume); }

/* Einheitliche, deutliche Reaktion beim Darüberfahren */
.knopf { transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
.knopf:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgb(182 55 130 / .35); }
.knopf.glas:hover { background: #fff; color: var(--navy) !important; box-shadow: 0 12px 28px rgb(0 0 0 / .25); }
.knopf.weiss:hover { box-shadow: 0 12px 28px rgb(0 0 0 / .2); }
.knopf.hell:hover { box-shadow: 0 12px 28px rgb(28 38 51 / .2); }
.kern-wege a, .ortliste a { transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.kern-wege a:hover, .ortliste.hell a:hover { background: #fff; color: var(--beere); border-color: #fff; transform: translateY(-2px); }
.ortliste a:hover { background: var(--beere); color: #fff; border-color: var(--beere); transform: translateY(-2px); }
a.karte, .unterkarte { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
a.karte:hover, .unterkarte:hover { transform: translateY(-6px); }
a.karte .foto, .unterkarte-bild { transition: box-shadow .35s ease; }
a.karte:hover .foto, .unterkarte:hover .unterkarte-bild { box-shadow: 0 22px 44px rgb(28 38 51 / .22); }
a.karte:hover .foto img { transform: scale(1.06); }
.nav-punkt > a { position: relative; }
.nav-punkt > a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 20px; height: 2px; background: var(--beere); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.nav-punkt > a:hover::after, .nav-punkt > a[aria-current]::after { transform: scaleX(1); }
.mehr { transition: color .2s ease, border-width .2s ease, padding .2s ease; }
.mehr:hover { border-bottom-width: 3px; }
.geschwister a { transition: background .2s ease, transform .2s ease; }
.geschwister a:hover { transform: translateX(6px); }
@media (max-width: 960px) { .nav-punkt > a::after { display: none; } }

/* Partnerband: Originallogos in Farbe über die volle Breite, darüber das Markenband */
.partner { padding: 64px 0 48px; overflow: hidden; }
.partner .huelle .partner-titel { margin-bottom: 28px; }
.partner-band { margin: 0 0 20px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.partner-liste { --lucke: 96px; gap: var(--lucke); padding-right: var(--lucke); animation: band-links 40s linear infinite; }
@keyframes band-links { to { transform: translateX(-50%); } }
.partner-liste li { width: 190px; height: 84px; }
.partner-liste img { max-height: 64px; filter: none; opacity: 1; }
.partner-liste li:hover img { transform: scale(1.08); }
.partner-liste img { transition: transform .3s ease; }
.markenband { overflow: hidden; margin: 0 0 48px; padding: 14px 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.markenband-spur { display: flex; align-items: center; gap: 28px; width: max-content; padding-right: 28px; animation: band-rechts 60s linear infinite; font-family: var(--serif); font-variation-settings: 'opsz' 144; font-weight: 300; font-size: clamp(1.6rem, 2.6vw, 2.4rem); letter-spacing: -.02em; line-height: 1.2; color: var(--navy); white-space: nowrap; }
.markenband-spur b { font-family: var(--schrift); font-weight: 200; color: var(--beere); }
@keyframes band-rechts { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .markenband-spur { animation: none; } }
@media (max-width: 640px) { .partner-liste { --lucke: 48px; } .partner-liste li { width: 130px; } .markenband { margin-bottom: 36px; } }

.kern-karte:hover .kern-zeichen, .kern-karte.k1:hover .kern-zeichen, .kern-karte.k2:hover .kern-zeichen { transform: scale(1.15); }
.kern { padding-top: 72px; }
.kern-kopf { margin-bottom: 32px; }

/* Immobilienübersicht: kompakter dunkler Kopf, darunter sofort die Angebote */
.liste-kopf { background: var(--navy); color: #fff; padding: 132px 0 44px; position: relative; overflow: hidden; }
.liste-kopf::after { content: ''; position: absolute; inset: auto -10% -60% 40%; height: 120%; background: radial-gradient(closest-side, rgba(182, 55, 130, .35), transparent); pointer-events: none; }
.liste-kopf .huelle { position: relative; z-index: 1; }
.liste-kopf .brot, .liste-kopf .brot a { color: #c9cfda; }
.liste-kopf h1, .abschluss-text h2 { hyphens: manual; }
.liste-kopf h1 { color: #fff; font-size: clamp(2.2rem, 4vw, 3.6rem); max-width: 26ch; margin: 10px 0 14px; }
.liste-kopf .lead { color: #d3d8e1; max-width: 46rem; }
.liste-werkzeug { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 26px; }
.liste-werkzeug .knopf { margin-left: auto; }
.typ-filter, .liste-kopf .filter { display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); }
.typ-filter button, .liste-kopf .filter a { border: 0; background: none; color: #fff; font: inherit; font-size: .95rem; font-weight: 600; padding: 8px 16px; border-radius: 999px; cursor: pointer; text-decoration: none; transition: background .2s, color .2s; white-space: nowrap; }
.typ-filter button span, .liste-kopf .filter a span { opacity: .6; font-weight: 500; margin-left: 2px; }
.typ-filter button:hover, .liste-kopf .filter a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.typ-filter button[aria-pressed="true"], .liste-kopf .filter a[aria-current="page"] { background: #fff; color: var(--beere); }
.angebote { padding-top: 40px; }

/* Top Objekt: volle Breite, Bild links gross, Daten rechts */
.top-objekt { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); background: var(--navy); color: #fff; border-radius: 10px 10px 10px 64px; overflow: hidden; text-decoration: none; min-height: 480px; box-shadow: 0 30px 60px -30px rgba(28, 38, 51, .45); transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s; }
.top-objekt:hover { color: #fff; transform: translateY(-4px); box-shadow: 0 40px 80px -30px rgba(182, 55, 130, .45); }
.top-bild { overflow: hidden; }
.top-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.top-objekt:hover .top-bild img { transform: scale(1.05); }
.top-text { padding: 44px 44px 40px; display: flex; flex-direction: column; justify-content: center; }
.top-text .ort { color: #f0a9d1; font-weight: 600; margin-bottom: 10px; }
.top-text h2 { color: #fff; font-size: var(--t-h2-klein); margin-bottom: 26px; }
.top-eck { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 26px; padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, .16); border-bottom: 1px solid rgba(255, 255, 255, .16); }
.top-eck dt { font-size: .82rem; color: #aab2c0; }
.top-eck dd { margin: 2px 0 0; font-family: var(--serif); font-size: 1.5rem; font-weight: 350; }
.top-preis { font-family: var(--serif); font-size: clamp(1.9rem, 2.8vw, 2.5rem); font-weight: 350; margin-bottom: 24px; }
.top-preis small { display: block; font-family: var(--schrift); font-size: .85rem; color: #aab2c0; }
.top-text .knopf { align-self: flex-start; }

/* Angebotskarten: gross, Preis auf dem Bild, Eckdaten beim Darüberfahren */
.angebote-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 28px; margin-top: 28px; }
.angebot { text-decoration: none; color: var(--tinte); display: block; }
.angebot[hidden], .top-objekt[hidden] { display: none; }
.angebot-bild { position: relative; aspect-ratio: 4 / 3; border-radius: 8px 8px 8px var(--ecke); overflow: hidden; background: var(--getoent); }
.angebot-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.angebot-preis { position: absolute; left: 16px; top: 16px; background: rgba(255, 255, 255, .94); color: var(--navy); font-weight: 700; padding: 7px 14px; border-radius: 999px; font-size: .95rem; }
.angebot-bild .pille { position: absolute; right: 16px; top: 16px; }
.angebot-daten { position: absolute; inset: auto 0 0 0; display: flex; flex-wrap: wrap; gap: 6px; padding: 48px 18px 18px; background: linear-gradient(transparent, rgba(28, 38, 51, .85)); }
.angebot-daten span { color: #fff; font-size: .88rem; font-weight: 600; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .25); padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(6px); }
.angebot .ort { color: var(--beere); font-weight: 600; font-size: .92rem; margin: 16px 0 4px; }
.angebot h3 { font-size: 1.25rem; transition: color .2s; }
.angebot:hover h3 { color: var(--beere); }
@media (hover: hover) {
  .angebot-daten { opacity: 0; transform: translateY(14px); transition: opacity .4s, transform .5s cubic-bezier(.2, .8, .2, 1); }
  .angebot:hover .angebot-daten, .angebot:focus-visible .angebot-daten { opacity: 1; transform: none; }
  .angebot:hover .angebot-bild img { transform: scale(1.06); }
}
@media (max-width: 960px) {
  .top-objekt { grid-template-columns: 1fr; min-height: 0; border-radius: 10px 10px 10px var(--ecke); }
  .top-bild { aspect-ratio: 4 / 3; }
  .top-text { padding: 28px 24px; }
  .liste-kopf { padding-top: 112px; }
  .liste-werkzeug .knopf { margin-left: 0; }
  .typ-filter { overflow-x: auto; max-width: 100%; }
}

/* Abschluss mit Rückruf: dunkles Foto, klare Aussage, Formular direkt auf der Seite */
.abschlussband { position: relative; overflow: hidden; color: #fff; padding: 120px 0; isolation: isolate; }
.abschluss-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.abschluss-schleier { position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(28, 38, 51, .94) 0%, rgba(28, 38, 51, .82) 45%, rgba(107, 45, 107, .55) 100%); }
.abschluss-raster { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 72px; align-items: center; }
.abschluss-text h2 { color: #fff; font-size: clamp(2.4rem, 4.4vw, 4rem); font-weight: 300; max-width: 14ch; margin-bottom: 20px; }
.abschluss-text .lead { color: #d3d8e1; max-width: 32rem; margin-bottom: 34px; }
.abschluss-person { display: flex; align-items: center; gap: 18px; }
.abschluss-person img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, .5); }
.abschluss-person b { display: block; font-weight: 600; color: #d3d8e1; }
.abschluss-person a { font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 350; text-decoration: none; color: #fff; }
.abschluss-person a:hover { color: #f0a9d1; }
.rueckruf { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius: 10px 10px 10px var(--ecke); padding: 34px; display: grid; gap: 14px; }
.rueckruf h3 { color: #fff; font-size: 1.4rem; font-family: var(--serif); font-weight: 400; margin-bottom: 4px; }
.rueckruf label { display: grid; gap: 6px; font-size: .9rem; font-weight: 600; color: #e3e7ee; }
.rueckruf .optional { font-weight: 400; opacity: .7; }
.rueckruf input { background: rgba(255, 255, 255, .95); border: 1px solid transparent; border-radius: 8px; padding: 13px 14px; font-size: 1rem; color: var(--navy); }
.rueckruf input:focus { outline: 3px solid #f0a9d1; outline-offset: 1px; }
.rueckruf .knopf { width: 100%; justify-content: center; margin-top: 6px; }
.rueckruf .klein { font-size: .82rem; color: #aab2c0; margin: 0; }
.rueckruf .klein a { color: #d3d8e1; }
.rueckruf .falle { position: absolute; left: -9999px; }
.rueckruf.ok p { color: #d3d8e1; margin: 0; }
.rueckruf .formular-fehler { background: rgba(255, 255, 255, .95); color: var(--beere-dunkel); padding: 10px 12px; border-radius: 8px; margin: 0; font-weight: 600; }
@media (max-width: 960px) {
  .abschlussband { padding: 80px 0; }
  .abschluss-raster { grid-template-columns: 1fr; gap: 40px; }
  .rueckruf { padding: 24px; }
}

/* So arbeiten wir, Desktop: senkrechte Zeitleiste, alle vier Schritte sichtbar, Bild rechts bleibt stehen.
   Der Abschnitt hält fest (Höhe n Bildschirme), jede Scrollbewegung springt einen Schritt weiter. */
.geschichte-leiste { position: relative; }
.geschichte:not(.aktiv) .geschichte-leiste { margin-left: -40px; padding-left: 40px; }
@media (max-width: 960px) { .geschichte:not(.aktiv) .geschichte-leiste { margin-left: -24px; padding-left: 24px; } }
@media (min-width: 961px) {
  .geschichte.aktiv { padding: 0; height: calc(var(--n) * 100vh); }
  .geschichte.aktiv .geschichte-pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding-top: 72px; }
  .geschichte.aktiv .geschichte-raster { width: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
  .geschichte.aktiv .geschichte-buehne { order: 2; position: relative; top: 0; aspect-ratio: auto; height: min(calc(100vh - 180px), 680px); max-height: none; }
  .geschichte.aktiv .geschichte-bilder { border-radius: 10px 72px 10px 10px; }
  .geschichte.aktiv .geschichte-bild { opacity: 1; clip-path: inset(100% 0 0 0); transform: scale(1.08); transition: clip-path .9s cubic-bezier(.7, 0, .2, 1), transform 1.4s cubic-bezier(.2, .8, .2, 1); z-index: 0; }
  .geschichte.aktiv .geschichte-bild.vorbei { clip-path: inset(0); transform: none; z-index: 1; }
  .geschichte.aktiv .geschichte-bild.an { clip-path: inset(0); transform: none; z-index: 2; }
  .geschichte.aktiv .geschichte-nr { left: auto; right: 28px; bottom: 18px; z-index: 3; color: #fff; font-family: var(--serif); font-weight: 300; font-size: clamp(6rem, 10vw, 9rem); text-shadow: 0 6px 40px rgba(28, 38, 51, .45); }
  .geschichte.aktiv .geschichte-text { padding-left: 0; }
  .geschichte.aktiv .geschichte-text > h2 { margin-bottom: 10px; }
  .geschichte.aktiv .geschichte-text > .gross-text { margin-bottom: 30px; font-size: 1.1rem; }
  /* Linie mit Punkten: läuft bis zum aktiven Schritt beere */
  .geschichte.aktiv .geschichte-linie { display: block; left: 13px; top: 14px; bottom: 14px; width: 2px; }
  .geschichte.aktiv .geschichte-linie span { inset: 0 0 auto 0; height: 0; transform: none; transition: height .7s cubic-bezier(.2, .8, .2, 1); }
  .geschichte.aktiv .geschichte-schritte { margin: 0 0 22px; }
  .geschichte.aktiv .geschichte-schritt, .geschichte.aktiv .geschichte-schritt:first-child, .geschichte.aktiv .geschichte-schritt:last-child { position: relative; padding: 0 0 22px 64px; opacity: .38; transition: opacity .5s; }
  .geschichte.aktiv .geschichte-schritt.vorbei { opacity: .6; }
  .geschichte.aktiv .geschichte-schritt.an { opacity: 1; }
  .geschichte.aktiv .geschichte-zahl { display: grid; place-items: center; position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; margin: 0; background: var(--getoent); border: 2px solid var(--linie); color: var(--leise); font-size: .72rem; letter-spacing: 0; transition: background .4s, border-color .4s, color .4s, transform .5s; }
  .geschichte.aktiv .vorbei .geschichte-zahl { border-color: var(--beere); color: var(--beere); }
  .geschichte.aktiv .an .geschichte-zahl { background: var(--beere); border-color: var(--beere); color: #fff; transform: scale(1.25); box-shadow: 0 0 0 8px rgba(182, 55, 130, .14); }
  .geschichte.aktiv .geschichte-schritt h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.1; margin: 0 0 8px; transition: color .4s; }
  .geschichte.aktiv .geschichte-schritt.an h3 { color: var(--navy); }
  .geschichte.aktiv .geschichte-schritt p { font-size: 1.02rem; margin: 0; }
}
/* Niedrige Bildschirme: nur der aktive Schritt zeigt seinen Text, damit alle vier Titel reinpassen */
@media (min-width: 961px) and (max-height: 860px) {
  .geschichte.aktiv .geschichte-text > .gross-text { display: none; }
  .geschichte.aktiv .geschichte-text > h2 { margin-bottom: 32px; }
  .geschichte.aktiv .geschichte-schritt p { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s cubic-bezier(.2, .8, .2, 1); }
  .geschichte.aktiv .geschichte-schritt p > span { overflow: hidden; }
  .geschichte.aktiv .geschichte-schritt.an p { grid-template-rows: 1fr; }
}

/* Auftritt beim Scrollen: nur Elemente unterhalb des ersten Bildschirms, nur mit JavaScript, nie bei reduzierter Bewegung */
.auftritt { opacity: 0; transform: translateY(36px); transition: opacity .8s ease, transform 1s cubic-bezier(.2, .8, .2, 1); }
.auftritt.da { opacity: 1; transform: none; }
.angebot.auftritt .angebot-bild, .unterkarte.auftritt img, .top-objekt.auftritt .top-bild { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1); }
.angebot.auftritt.da .angebot-bild, .unterkarte.auftritt.da img, .top-objekt.auftritt.da .top-bild { clip-path: inset(0); }
.angebote-raster .angebot:nth-child(3n+2) { transition-delay: .08s; }
.angebote-raster .angebot:nth-child(3n) { transition-delay: .16s; }

/* So arbeiten wir auf dem Handy: schlichte Liste, ohne Fortschrittslinie */
@media (max-width: 960px) {
  .geschichte .geschichte-linie { display: none; }
  .geschichte:not(.aktiv) .geschichte-leiste { margin-left: 0; padding-left: 0; }
  .geschichte-text { padding-left: 0; }
  .geschichte-schritt, .geschichte-schritt:first-child, .geschichte-schritt:last-child { padding: 0 0 40px; }
}

/* Ansprechpartner neben einem Formular: Foto rund neben Name und Rolle */
.ansprech-schmal h2 { font-size: var(--t-h2-klein); margin-bottom: 24px; }
.ansprech-kopf { display: flex; align-items: center; gap: 20px; margin-bottom: 18px; }
.ansprech-kopf .portrait { width: 104px; height: 104px; flex: none; border-radius: 50%; object-fit: cover; object-position: 50% 20%; box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--rose); }
.ansprech-schmal .ansprech-name { margin: 0; }
.ansprech-schmal > p { color: var(--tinte-2); }

/* Startbild auf dem Handy: Überschrift, Text und Knöpfe passen auf einen Bildschirm.
   Die Glaskarten entfallen dort, Klaus erscheint weiter unten im Ansprechpartner Band. */
h1 { hyphens: manual; }
@media (max-width: 960px) {
  .held-foto .glaskarten { display: none; }
  .held-foto { padding: 110px 0 76px; }
  .held-foto h1 { font-size: clamp(2.1rem, 9vw, 2.6rem); line-height: 1.08; }
  .held-foto .lead { font-size: 1.05rem; margin: 18px 0 26px; }
}

/* Kernleistungen ohne Maus (Handy, Tablet): Verlauf beginnt höher und ist dichter, damit der Titel auf hellen Fotos lesbar bleibt */
@media (max-width: 960px), (hover: none) {
  .kern-karte::before { background: linear-gradient(180deg, rgb(28 38 51 / .15) 0%, rgb(28 38 51 / .45) 30%, var(--ton) 72%); opacity: .95; }
  .kern-text h3, .kern-text p { text-shadow: 0 1px 14px rgb(28 38 51 / .45); }
}

/* Partner: das Laufband ist ein schräges Beere Band auf der Kante zum Abschnitt darüber, ohne graue Linien */
.partner { border: 0; padding: 0 0 88px; overflow-x: clip; overflow-y: visible; position: relative; z-index: 2; }
.markenband { background: var(--beere); border: 0; margin: -34px -4vw 76px; padding: 18px 0; transform: rotate(-1.6deg); box-shadow: 0 24px 48px -24px rgb(107 45 107 / .55); }
.markenband-spur { color: #fff; }
.markenband-spur b { color: #f0a9d1; }
.partner .huelle .partner-titel { text-align: center; margin-bottom: 36px; font-size: 1.05rem; color: var(--tinte-2); }
.partner .klein { text-align: center; margin-top: 8px; }
@media (max-width: 640px) { .markenband { margin: -24px -6vw 52px; padding: 12px 0; } .partner { padding-bottom: 64px; } }

/* Zuletzt vermittelt als Unterzeile im Immobilien Abschnitt */
.kopfzeile.unterkopf { margin-top: 72px; padding-top: 48px; border-top: 1px solid var(--linie); }
.h-klein { font-family: var(--serif); font-weight: 350; font-size: var(--t-h2-klein); letter-spacing: -.02em; margin-bottom: 8px; }

/* Kundenstimmen im Stil von Google Bewertungen, direkt unter den Partnerlogos auf demselben weissen Grund */
.stimmenband { background: #fff; padding: 8px 0 104px; }
.stimmenband h2 { text-align: center; margin-bottom: 44px; }
.bewertungen { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 40px; align-items: start; }
.bewertung-schnitt { position: sticky; top: 110px; background: var(--getoent); border-radius: 10px 10px 10px var(--ecke); padding: 32px 28px; text-align: center; }
.schnitt-zahl { font-family: var(--serif); font-weight: 300; font-size: 4.2rem; line-height: 1; margin: 0 0 10px; color: var(--navy); }
.schnitt-text { color: var(--leise); font-size: .95rem; margin: 10px 0 22px; }
.bewertung-schnitt .knopf { width: 100%; justify-content: center; }
.sterne { display: inline-flex; gap: 2px; }
.sterne svg { width: 18px; height: 18px; fill: #dcd6e0; }
.sterne svg.voll { fill: #f4b400; }
.bewertung-schnitt .sterne svg { width: 24px; height: 24px; }
.bewertung-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.bewertung { margin: 0; background: #fff; border: 1px solid var(--linie); border-radius: 10px; padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 12px; transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
.bewertung:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -24px rgb(28 38 51 / .35); }
.bewertung figcaption { display: flex; align-items: center; gap: 12px; }
.kuerzel { width: 40px; height: 40px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.bewertung figcaption b { display: block; font-size: .98rem; }
.bewertung figcaption small { color: var(--leise); font-size: .85rem; }
.bewertung blockquote { margin: 0; color: var(--tinte-2); font-size: 1rem; line-height: 1.6; }
.muster-hinweis { margin: 28px auto 0; max-width: 46rem; text-align: center; background: #fff6d6; border: 1px dashed #d9b84a; color: #6b5310; padding: 10px 16px; border-radius: 8px; font-size: .9rem; }
.stimmenband .klein { text-align: center; margin-top: 28px; }
@media (max-width: 1100px) { .bewertung-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bewertung-karten .bewertung:nth-child(3) { display: none; } }
@media (max-width: 760px) {
  .stimmenband { padding-bottom: 72px; }
  .bewertungen { grid-template-columns: 1fr; gap: 24px; }
  .bewertung-schnitt { position: static; }
  .bewertung-karten { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin: 0 -16px; padding: 0 16px 8px; scroll-padding: 0 16px; }
  .bewertung-karten .bewertung, .bewertung-karten .bewertung:nth-child(3) { display: flex; flex: 0 0 82%; scroll-snap-align: start; }
}

/* Ansprechpartner Band auf dem Handy: rundes Porträt oben, Block unten sauber abgeschlossen statt Foto auf der Kante */
@media (max-width: 960px) {
  /* Genau ein Bildschirm unter der Navigation: richtet man den Block an der Navigation aus, blitzt unten nichts durch */
  .zitatband { padding: 48px 0; min-height: calc(100svh - var(--kopf-hoehe, 69px)); display: flex; align-items: center; }
  .zitatband > .huelle { width: 100%; }
  .zitat-raster { gap: 28px; align-items: start; }
  .zitat-bild { order: -1; }
  .zitat-bild .portrait { width: 240px; max-width: 70%; }
}

/* Fuss auf schmalen Handys: Spalten dürfen schrumpfen, Logo darf umbrechen */
.fuss-raster > * { min-width: 0; }
.marke-text { min-width: 0; }
@media (max-width: 400px) {
  .fuss-raster { grid-template-columns: minmax(0, 1fr) !important; }
  .fuss .marke-text { font-size: 1.05rem; }
}

/* So arbeiten wir auf dem Handy: der Link schliesst den Abschnitt als Knopf ab, mit Luft bis zum Beere Band */
@media (max-width: 960px) {
  .geschichte { padding-bottom: 96px; }
  .geschichte-schritt:last-child { padding-bottom: 8px; }
  .geschichte-mehr { margin: 0; }
  .geschichte-mehr .mehr { display: flex; justify-content: center; align-items: center; width: 100%; padding: 15px 20px; border: 1.5px solid var(--beere); border-radius: 12px; text-decoration: none; font-weight: 700; }
  .geschichte-mehr .mehr::after { display: none; }
}

/* Region auf dem Handy: ein Bildschirm hoch, oben Luft für das Foto, Text unten, Ortsknöpfe nebeneinander */
@media (max-width: 960px) {
  .regionband { min-height: calc(100svh - var(--kopf-hoehe, 69px)); }
  .region-inhalt { padding-top: 140px; padding-bottom: 56px; }
  .region-inhalt h2 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .region-inhalt p { font-size: 1rem; }
  .regionband .ortliste { display: flex; flex-wrap: wrap; gap: 8px; }
  .regionband .ortliste li { margin: 0; }
  .regionband .ortliste a { font-size: .88rem; padding: 7px 13px; }
}

/* Bewertungen: am PC die ersten drei (bzw. zwei) Karten fest, auf dem Handy ein selbst laufendes Band, Finger drauf hält es an */
.bewertung-karten { display: block; }
.bewertung-spur { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.bewertung-spur .bewertung:nth-child(n+4), .bewertung.kopie { display: none; }
@media (max-width: 1100px) { .bewertung-spur { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bewertung-spur .bewertung:nth-child(3) { display: none; } }
@media (max-width: 760px) {
  .bewertung-karten, .bewertung-karten .bewertung, .bewertung-karten .bewertung:nth-child(3) { all: unset; }
  .bewertung-karten { display: block; overflow: hidden; margin: 0 -16px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
  .bewertung-spur { --lucke: 14px; display: flex; gap: var(--lucke); padding-right: var(--lucke); width: max-content; animation: band-links 55s linear infinite; }
  .bewertung-spur .bewertung, .bewertung-spur .bewertung:nth-child(n+4), .bewertung-spur .bewertung:nth-child(3), .bewertung-spur .bewertung.kopie { display: flex; flex: 0 0 auto; width: 280px; margin: 0; background: #fff; border: 1px solid var(--linie); border-radius: 10px; padding: 20px; flex-direction: column; gap: 10px; box-sizing: border-box; }
  .bewertung-karten:active .bewertung-spur, .bewertung-karten:hover .bewertung-spur { animation-play-state: paused; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .bewertung-karten { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .bewertung-spur { animation: none; padding-left: 16px; }
  .bewertung.kopie { display: none !important; }
}

/* Immobilien nach Ort: Fotokacheln, der Bürostandort gross */
.ortsband { background: var(--papier); }
.ort-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 230px; gap: 14px; }
.ort-kachel { position: relative; overflow: hidden; border-radius: 10px; color: #fff; text-decoration: none; display: flex; align-items: flex-end; background: var(--navy); isolation: isolate; }
.ort-kachel.gross { grid-column: span 2; grid-row: span 2; border-radius: 10px 10px 10px 64px; }
.ort-kachel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1s cubic-bezier(.2, .8, .2, 1); }
.ort-kachel::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, rgb(28 38 51 / .85)); transition: background .4s; }
.ort-kachel:hover { color: #fff; }
.ort-kachel:hover img { transform: scale(1.06); }
.ort-kachel:hover::before { background: linear-gradient(180deg, rgb(182 55 130 / .15) 20%, rgb(107 45 107 / .9)); }
.ort-text { padding: 20px 22px; display: grid; gap: 4px; }
.ort-text b { font-family: var(--serif); font-weight: 350; font-size: 1.6rem; letter-spacing: -.02em; line-height: 1.1; }
.ort-kachel.gross .ort-text { padding: 32px 34px; }
.ort-kachel.gross .ort-text b { font-size: clamp(2rem, 3.4vw, 2.8rem); }
.ort-text small { font-size: .92rem; color: #e1e5ec; font-weight: 600; }
.ort-kachel.such { background: var(--rose); color: var(--navy); border: 1.5px dashed var(--beere); }
.ort-kachel.such::before { display: none; }
.ort-kachel.such small { color: var(--tinte-2); font-weight: 500; }
.ort-kachel.such:hover { background: var(--beere); color: #fff; }
.ort-kachel.such:hover small { color: #fbe9f3; }
@media (max-width: 960px) {
  .ort-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 180px; gap: 10px; }
  .ort-kachel.gross { grid-row: span 1; height: 260px; grid-column: 1 / -1; }
  .ort-raster { grid-auto-rows: 170px; }
  .ort-text { padding: 14px 16px; }
  .ort-text b { font-size: 1.3rem; }
  .ort-kachel.gross .ort-text { padding: 20px 22px; }
  .ort-kachel.such small { font-size: .82rem; }
}
.ort-kachel.gesamt { background: var(--navy); }
.ort-kachel.gesamt::before { background: radial-gradient(circle at 85% 15%, rgb(182 55 130 / .55), transparent 60%); }
.ort-kachel.gesamt:hover::before { background: radial-gradient(circle at 85% 15%, rgb(182 55 130 / .9), transparent 75%); }
@media (max-width: 960px) {
  .ort-raster { grid-auto-rows: 84px; }
  .ort-kachel { grid-row: span 2; }
  .ort-kachel.gross { grid-row: span 3; height: auto; }
  .ort-kachel.gross .ort-text b { font-size: 1.8rem; }
}
.echtheit { display: inline-block; margin-top: 14px; font-size: .82rem; color: var(--leise); }
.echtheit:hover { color: var(--beere); }

/* So arbeiten wir ohne Festhalten: normale Höhe, Schritte wechseln von selbst oder per Maus */
@media (min-width: 961px) {
  .geschichte.aktiv { height: auto; padding: 112px 0; }
  .geschichte.aktiv .geschichte-pin { position: static; height: auto; padding-top: 0; display: block; }
  .geschichte.aktiv .geschichte-buehne { height: min(640px, calc(100vh - 160px)); }
  .geschichte.aktiv .geschichte-schritt { cursor: pointer; }
}

/* Verkäufer Block auf der Angebotsseite: volle Breite, eigene Farbe, klar getrennt von den Angeboten */
.verkaeuferband { background: var(--beere); color: #fff; padding: 96px 0; position: relative; overflow: hidden; }
.verkaeuferband::after { content: ''; position: absolute; right: -10%; top: -40%; width: 60%; height: 180%; background: radial-gradient(closest-side, rgb(107 45 107 / .55), transparent); pointer-events: none; }
.verkaeufer-raster { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.verkaeufer-bild { aspect-ratio: 5 / 4; overflow: hidden; border-radius: 10px 72px 10px 10px; box-shadow: 0 40px 70px -40px rgb(28 38 51 / .7); }
.verkaeufer-bild img { width: 100%; height: 100%; object-fit: cover; }
.verkaeufer-text h2 { color: #fff; font-size: var(--t-h2); max-width: 16ch; margin-bottom: 18px; }
.verkaeufer-text .lead { color: #fbe9f3; max-width: 32rem; margin-bottom: 30px; }
.verkaeufer-text .knopf.weiss { background: #fff; color: var(--beere); }
.verkaeufer-text .knopf.weiss:hover { background: var(--navy); color: #fff; }
.verkaeufer-wege { display: flex; gap: 28px; margin: 22px 0 0; }
.verkaeufer-wege a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: rgb(255 255 255 / .45); text-underline-offset: 5px; }
.verkaeufer-wege a:hover { color: #fff; text-decoration-color: #fff; }
@media (max-width: 960px) {
  .verkaeuferband { padding: 64px 0; }
  .verkaeufer-raster { grid-template-columns: 1fr; gap: 32px; }
  .verkaeufer-bild { aspect-ratio: 16 / 10; }
}

/* Angebote ohne Lücke: 6er Raster, bei Rest 2 die ersten zwei breit, bei Rest 1 die ersten vier breit */
@media (min-width: 1100px) {
  .angebote-raster { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .angebote-raster .angebot { grid-column: span 2; }
  .angebote-raster.rest-2 .angebot:nth-child(-n+2), .angebote-raster.rest-1 .angebot:nth-child(-n+4) { grid-column: span 3; }
  .angebote-raster.rest-2 .angebot:nth-child(-n+2) .angebot-bild, .angebote-raster.rest-1 .angebot:nth-child(-n+4) .angebot-bild { aspect-ratio: 16 / 9; }
}

/* So arbeiten wir, Desktop: Inhalt bleibt beim Durchscrollen stehen, der Schritt folgt der Scrollposition (rund 75 % Bildschirmhöhe je Schritt) */
@media (min-width: 961px) {
  .geschichte.aktiv { height: calc(100vh + (var(--n) - 1) * 75vh); padding: 0; }
  .geschichte.aktiv .geschichte-pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding-top: 72px; }
}
@media (min-width: 961px) and (prefers-reduced-motion: no-preference) {
  .geschichte.aktiv .geschichte-schritt, .geschichte.aktiv .geschichte-zahl { transition-duration: .35s; }
}

/* So arbeiten wir, Desktop: kompakt, Abschnitt bleibt stehen (Höhe n Bildschirme), eine Wischbewegung = ein Schritt */
@media (min-width: 961px) {
  .geschichte.aktiv { height: calc(var(--n) * 100vh); padding: 0; }
  .geschichte.aktiv .geschichte-pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding-top: 72px; }
  .geschichte.aktiv .geschichte-schritt { cursor: pointer; }
}
.glas-kuerzel { width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--beere); color: #fff; font-weight: 700; font-size: 1.05rem; letter-spacing: .02em; }
.abschluss-person b { font-size: 1rem; }

.textseite .liste-schlicht { padding-left: 1.2em; margin: 0 0 1em; display: grid; gap: 6px; }