/* testorg: neuer Kopf der Homepage im dunklen Design über der alten WordPress-Seite.
   Die Regeln für Kopf, Menü und Knöpfe setzt bauen.py aus ../site/css/style.css ein (Platzhalter unten). */

:root {
  --grund: #000000;
  --grund-hell: #1c1c1b;
  --tinte: #ffffff;
  --tinte-weich: #c9c8c3;
  --akzent: #ffffff;
  --rand: clamp(16px, 3vw, 40px);
  --kurve: cubic-bezier(.23, 1, .32, 1);
  --schrift: "Archivo", "Helvetica Neue", Arial, sans-serif;
}

@font-face {
  font-family: "Archivo";
  src: url("/neu/archivo-variable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
.sprunglink {position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--tinte); color: #fff; padding: 12px 16px;}
.sprunglink:focus {left: 8px; top: 8px;}
.testleiste {position: relative; z-index: 60; display: flex; align-items: center; gap: 16px; background: #f2c94c; color: #111; font-size: 14px; padding: 6px var(--rand); line-height: 1.4;}
.testleiste__version {display: flex; flex-direction: column; flex: none; padding-right: 16px; border-right: 1px solid rgba(0,0,0,.25);}
.testleiste__nummer {font-size: 15px; font-weight: 600; line-height: 1.2;}
.testleiste__nummer b {font-size: 20px; font-weight: 800;}
.testleiste__zeit {font-size: 12px; line-height: 1.3;}
.testleiste__hinweis {margin: 0; flex: 1; text-align: center; font-size: 13px;}
.testleiste__original {flex: none; background: #111; color: #f2c94c; text-decoration: none; font-weight: 600; font-size: 13px; padding: 8px 12px; min-height: 36px; display: inline-flex; align-items: center; transition: background .16s ease;}
.testleiste__original:hover {background: #333;}
.testleiste__knoepfe {display: flex; flex: none; gap: 8px;}
@media (max-width: 759px) {
.testleiste {justify-content: space-between;}
.testleiste__hinweis {display: none;}
.testleiste__knoepfe {flex-direction: column; gap: 4px;}
}
@media (max-width: 759px) {
.testleiste {gap: 10px;}
.testleiste__version {padding-right: 10px;}
.testleiste__lang {display: none;}
.testleiste__hinweis {text-align: left; font-size: 12px; line-height: 1.35;}
.testleiste__original {font-size: 12px; padding: 6px 8px;}
}
.kopf {position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; padding: 0 var(--rand); background: var(--grund); transition: background .3s ease;}
.kopf.gescrollt {box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 6px 18px -12px rgba(0,0,0,.25);}
.kopf__logo img {width: 112px; height: auto;}
.menue-knopf {display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 0 0 12px; border: 0; background: none; color: var(--tinte); font: 600 16px/1 var(--schrift); cursor: pointer;}
.menue-knopf__striche, .menue-knopf__striche::before, .menue-knopf__striche::after {display: block; width: 22px; height: 2px; background: currentColor; transition: transform .3s var(--kurve), opacity .2s ease;}
.menue-knopf__striche {position: relative;}
.menue-knopf__striche::before, .menue-knopf__striche::after {content: ""; position: absolute; left: 0;}
.menue-knopf__striche::before {top: -7px;}
.menue-knopf__striche::after {top: 7px;}
.menue-knopf[aria-expanded="true"] .menue-knopf__striche {background: transparent;}
.menue-knopf[aria-expanded="true"] .menue-knopf__striche::before {transform: translateY(7px) rotate(45deg);}
.menue-knopf[aria-expanded="true"] .menue-knopf__striche::after {transform: translateY(-7px) rotate(-45deg);}
.navi a {text-decoration: none;}
@media (max-width: 1079px) {
.navi {position: fixed; top: var(--kopf-unten, 72px); right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 24px var(--rand) 32px; background: var(--grund); color: var(--tinte); overflow-y: auto; border-top: 1px solid #e4e4e1; clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .45s var(--kurve), visibility 0s .45s;}
.navi.ausgeklappt {clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .45s var(--kurve);}
.navi__liste {list-style: none;}
.navi__liste a {display: block; padding: 10px 0; font-size: 34px; font-weight: 700; font-stretch: 82%; letter-spacing: -.02em; line-height: 1.1;}
.navi__unter a {font-size: 20px; font-weight: 500; font-stretch: 100%; letter-spacing: 0; padding: 8px 0 8px 20px; color: var(--tinte-weich);}
.navi a[aria-current="page"] {text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .18em;}
.navi__aktionen {flex-direction: column;}
.navi__aktionen .knopf {justify-content: center;}
.navi__aktion {order: -1;}
.navi__anfrage {order: 1;}
body.menue-offen {overflow: hidden;}
}
@media (min-width: 1080px) {
.kopf {height: 88px;}
.kopf__logo img {width: 128px;}
.menue-knopf {display: none;}
.navi {display: flex; align-items: center; gap: 32px;}
.navi__liste {display: flex; gap: 28px; list-style: none;}
.navi__unter {display: none;}
.navi__liste a {font-size: 16px; font-weight: 600; padding: 8px 0; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .3s var(--kurve);}
.navi__liste a:hover, .navi__liste a[aria-current="page"] {background-size: 100% 2px;}
.navi__aktionen .knopf {min-height: 44px; padding: 0 16px; font-size: 15px; white-space: nowrap;}
}
.knopf {display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; border: 0; border-radius: 8px; background: linear-gradient(#2c2c2a, #151515); color: #fff; font: 600 17px/1 var(--schrift); text-decoration: none; cursor: pointer; box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 1px 2px rgba(0,0,0,.25), 0 3px 8px -3px rgba(0,0,0,.35); transition: background .16s ease, transform .16s var(--kurve), box-shadow .16s ease;}
.knopf:hover {background: linear-gradient(#3a3a38, #222220);}
.knopf:active {transform: translateY(1px); box-shadow: 0 1px 2px rgba(0,0,0,.25);}
.knopf:disabled {opacity: .6; cursor: progress;}
.knopf--hell {background: #fff; color: var(--tinte);}
.knopf--hell:hover {background: var(--grund);}
.knopf--rand {background: transparent; color: var(--tinte); box-shadow: inset 0 0 0 2px var(--tinte);}
.knopf--rand:hover {background: var(--grund-hell);}
.navi__aktionen {display: flex; gap: 8px;}
.knopf--zweizeilig {flex-direction: column; justify-content: center; gap: 3px; line-height: 1.1;}
.knopf__unter {font-size: 11.5px; font-weight: 500; line-height: 1.2; opacity: .75;}
@media (min-width: 1080px) {
.knopf__unter {white-space: nowrap;}
}
.schnell {display: grid; gap: 12px; padding: 12px var(--rand) 16px; border-bottom: 1px solid #e4e4e1;}
.schnell__kontakt {display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px;}
.schnell__adresse {justify-self: end;}
.schnell__offen {grid-column: 1 / -1; margin-bottom: -6px; font-size: 13px; line-height: 1.3;}
.schnell__telefon {display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: 20px; font-weight: 700; text-decoration: none; white-space: nowrap;}
.schnell__adresse {font-size: 14px; line-height: 1.3; color: var(--tinte-weich); text-align: right; white-space: nowrap; text-decoration: underline; text-decoration-color: #b5b5b0;}
.schnell__knoepfe {display: grid; grid-template-columns: 1fr 1fr; gap: 8px;}
.schnell__knoepfe .knopf {justify-content: center; min-height: 52px; padding: 0 10px; font-size: 16px; text-align: center;}
.schnell__knoepfe .schnell__anliegen {grid-column: 1 / -1; min-height: 62px; gap: 4px;}
.schnell__anliegen small {font-size: 12.5px; font-weight: 600; opacity: .85;}
@media (max-width: 359px) {
.schnell__telefon {gap: 6px; font-size: 17px;}
.schnell__adresse {font-size: 12.5px;}
.schnell__knoepfe {grid-template-columns: 1fr;}
.schnell__knoepfe .knopf {min-height: 48px;}
.schnell__knoepfe .schnell__anliegen {min-height: 58px;}
}
@media (min-width: 1080px) {
.schnell {display: none;}
}
.offen {display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--tinte-weich);}
.offen::before {content: ""; width: 9px; height: 9px; border-radius: 50%; background: #9a9892; flex: none;}
.offen[data-zustand="offen"]::before {background: var(--tinte); box-shadow: 0 0 0 0 rgba(0,0,0,.35); animation: puls 2.4s ease-out infinite;}
@keyframes puls { 70% { box-shadow: 0 0 0 7px rgba(0,0,0,0); } 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); } }
.oben {display: none;}
@media (min-width: 1080px) {
.oben {display: flex; align-items: center; justify-content: flex-end; gap: 28px; padding: 6px var(--rand); border-bottom: 1px solid #e4e4e1; font-size: 15px;}
.oben .offen {margin-right: auto; font-size: 15px;}
.oben__telefon {display: inline-flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; text-decoration: none; white-space: nowrap;}
.oben__adresse {color: var(--tinte-weich); white-space: nowrap; text-decoration: underline; text-decoration-color: #b5b5b0;}
.navi__aktionen .knopf--zweizeilig {gap: 2px;}
.navi__liste a {white-space: nowrap;}
}
@media (min-width: 1080px) and (max-width: 1279px) {
.navi {gap: 18px;}
.navi__liste {gap: 18px;}
.navi__aktionen .knopf {padding: 0 12px;}
}
@media (max-width: 759px) {
.kopf {height: 64px;}
.kopf__logo img {width: 104px;}
.schnell {gap: 10px; padding: 8px var(--rand) 12px;}
.schnell__knoepfe .knopf {min-height: 46px;}
.schnell__knoepfe .schnell__anliegen {min-height: 54px;}
}

/* Grundlagen nur für den neuen Kopf, damit die Regeln der alten Seite nicht hineinwirken */
.testleiste, .oben, .kopf, .schnell, .neu-ersatz { font-family: var(--schrift); line-height: 1.4; font-stretch: 100%; -webkit-font-smoothing: antialiased; letter-spacing: 0; text-transform: none; }
.testleiste *, .oben *, .kopf *, .schnell *, .neu-ersatz *, .testleiste, .oben, .kopf, .schnell { box-sizing: border-box; }
.oben a, .kopf a, .schnell a { color: var(--tinte); }
.kopf ul, .kopf li { margin: 0; padding: 0; list-style: none; }
.kopf img { display: block; max-width: 100%; height: auto; }
.kopf p, .schnell p { margin: 0; }
.oben, .kopf, .schnell { background: var(--grund); color: var(--tinte); }
html, body { overflow-x: clip !important; overflow-y: visible !important; } /* „hidden“ der alten Seite verhindert, dass der Kopf beim Scrollen oben bleibt */
.kopf { z-index: 100000; } /* über Slider und Elementen der alten Seite, auch das ausgeklappte Menü am Handy */
.testleiste { z-index: 100001; }
.oben, .schnell { border-bottom-color: #2a2a28 !important; }
.kopf.gescrollt { box-shadow: 0 1px 0 rgba(255,255,255,.08); }
.sprunglink { position: absolute; left: -9999px; top: 0; z-index: 100; background: #fff; color: #000; padding: 12px 16px; }
.sprunglink:focus { left: 8px; top: 8px; }
.kopf :focus-visible, .oben :focus-visible, .schnell :focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 1079px) { .navi { border-top-color: #2a2a28 !important; } }
.offen[data-zustand="offen"]::before { background: #fff; }

/* Knöpfe im Dunkeln: hell mit schwarzer Schrift, leicht abgerundet */
.knopf, .knopf:visited { background: linear-gradient(#ffffff, #e6e5e1); color: #151515 !important; box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 3px 10px -4px rgba(0,0,0,.6); }
.knopf:hover { background: linear-gradient(#ffffff, #d6d5d0); color: #151515 !important; }

/* Testleiste mit zwei Knöpfen */
.testleiste__knoepfe { display: flex; flex: none; gap: 8px; }
.testleiste a.testleiste__original, .testleiste a.testleiste__original:hover { color: #f2c94c !important; text-decoration: none; }
@media (max-width: 759px) { .testleiste__knoepfe { flex-direction: column; gap: 4px; } }

/* Neue Schrift für die ganze alte Seite; Symbolschriften (Font Awesome, Elegant Icons) bleiben */
body, body *:not(i):not([class*="icon_"]):not([class*="arrow_"]):not([class*="fa-"]):not([class^="fa"]):not([class*=" fa"]):not([class*="social_"]):not([class*="revicon"]) { font-family: var(--schrift) !important; }

/* Überschriften schmal wie auf der neuen Homepage; lange Wörter trennen statt mitten im Wort umbrechen */
h1, h2, h3, h4, h5, h6, .gdlr-core-title-item-title, sr7-txt { font-stretch: 82% !important; }
h1, h2, h3, h4, h5, h6, .gdlr-core-title-item-title { word-break: normal !important; overflow-wrap: normal !important; hyphens: auto; -webkit-hyphens: auto; }
.knopf { white-space: nowrap; }

/* Slider: ohne Knopf „Jetzt kontaktieren“ (Kontakt läuft über die Knöpfe im Kopf) */
sr7-module .sr7-btn { display: none !important; }
/* Bis der Slider sein erstes Bild zeichnet, steht dasselbe Bild schon da (statt einige Sekunden Schwarz) */
sr7-module { background: #1e1e1e url(/wp-content/uploads/2025/10/1slider-bearbeitet-scaled.jpg) center / cover no-repeat; }

/* Handy und Tablet: kein Parallax (ruckelt beim Scrollen), Bilder in festem Verhältnis */
@media (max-width: 999px) {
  .gdlr-core-parallax { position: absolute !important; inset: 0 !important; height: auto !important; transform: none !important; }
  /* Slider lädt am Handy spät und ruckelt: stattdessen festes Startbild mit denselben Texten */
  .gdlr-core-revolution-slider-item { display: none !important; }
  .neu-held { display: flex !important; }
  /* Leistungsbilder (Hintergrund einer Spalte) nicht als schmaler Streifen, sondern im Verhältnis 3:2 */
  .gdlr-core-pbf-column-content-margin:has(> .gdlr-core-pbf-background-wrap [style*="-scaled.jpg"]) { min-height: 0 !important; aspect-ratio: 3 / 2; }
  /* Überschriften so groß, dass auch „Sondereigentumsverwaltung“ in eine Zeile passt */
  .gdlr-core-title-item-title { font-size: min(6.2vw, 34px) !important; line-height: 1.15 !important; letter-spacing: .01em !important; max-width: 100%; }
}

/* Startbild am Handy (statt Slider) */
.neu-held { display: none; position: relative; flex-direction: column; justify-content: center; align-items: center; gap: 14px; min-height: 62svh; padding: 48px 24px; text-align: center; color: #fff; background: #1e1e1e center / cover no-repeat; }
.neu-held::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.neu-held > * { position: relative; margin: 0; color: #fff; }
.neu-held__marke { font-size: 64px !important; font-weight: 400; letter-spacing: .12em; line-height: 1; }
.neu-held__zusatz { font-size: 22px !important; letter-spacing: .06em; text-transform: uppercase; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.8); }
.neu-held__satz { max-width: 30ch; font-size: 16px !important; line-height: 1.5; }

/* Ersatz für Fragebögen und Kontaktformular */
.neu-ersatz { padding: 8px 0 24px; text-align: center; }
.neu-ersatz p { margin: 0 0 16px; }
.neu-ersatz .knopf { text-decoration: none; }
/* Ersatz-Knopf schwarz mit hellem Rand: gut sichtbar auf weißen und auf dunklen Abschnitten */
.neu-ersatz .knopf, .neu-ersatz .knopf:visited { background: linear-gradient(#2c2c2a, #151515); color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), 0 3px 10px -4px rgba(0,0,0,.5); }
.neu-ersatz .knopf:hover { background: linear-gradient(#3a3a38, #222220); color: #fff !important; }

/* Karte statt Cookie-Sperre: Vorschaubild mit Link */
.neu-karte { display: flex; align-items: flex-end; justify-content: center; min-height: 260px; padding: 16px; background: #222 center / cover no-repeat; text-decoration: none; }
.neu-karte span { background: #fff; color: #151515; font: 600 16px/1 var(--schrift); padding: 14px 18px; border-radius: 8px; }