/* ============================================================
   Sylvia Houschka Immobilien — Modernes Design
   Original-Farben: Grün #006600 · Gold #ffd700 (jetzt via :root-Variablen, admin-steuerbar)
   Schrift: Roboto (Fließtext), CoventryGarden (Logo)
   ============================================================ */

:root {
    --brand: #006600;        /* Grün — Header, Links, Buttons, Rahmen */
    --brand-dark: #004d00;   /* dunkles Grün — Hover/Verläufe */
    --accent: #ffd700;       /* Gold — Hover-Akzent, Highlights */
    --accent-dark: #e6c200;  /* dunkles Gold */
    --text: #1c1c1c;         /* Fließtext & Überschriften */
    --muted: #c8c8c8;        /* Grautöne — Rahmen, sekundär */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ---------- Responsive Text-Skalierung (gestuft) ---------- */
html { font-size: 16px; }  /* Ultrawide >1920px */
@media (max-width: 1600px) { html { font-size: 15px; } }
@media (max-width: 1200px) { html { font-size: 14px; } }
@media (max-width: 768px)  { html { font-size: 13px; } }
@media (max-width: 480px)  { html { font-size: 12.5px; } }

/* ---------- Basis ---------- */
body {
    font-family: var(--font-text, 'Roboto'), sans-serif;
    font-weight: 400;
    line-height: 1.25;
    color: var(--text);
    background-color: #fafaf7;
}

a {
    color: var(--brand);
    text-decoration: none;
    transition: color 0.2s;
}
a:hover { color: var(--accent); }

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ---------- Globaler Overflow-Schutz für Formulare ---------- */
input, textarea, select, button {
    max-width: 100%;
    box-sizing: border-box;
}

/* ---------- Header / Logo-Streifen ---------- */
#main-header {
    background-color: var(--brand);
    padding: 14px 28px;
    position: relative;
    z-index: 95;
    box-shadow: 0 3px 12px rgba(0,102,0,0.25);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

/* ---------- Burger-Menü (nur via Media-Query, Default unsichtbar) ---------- */
.nav-toggle-checkbox {
    display: none;
}
.burger-icon {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 28px;
    cursor: pointer;
    gap: 5px;
    z-index: 20;
}
.burger-icon span {
    display: block;
    width: 26px;
    height: 3px;
    background: #ffffff;
    border-radius: 2px;
    transition: transform 0.25s, opacity 0.25s;
}
/* Burger-Animation bei geöffnetem Menü */
#nav-toggle:checked ~ #main-header .burger-icon span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
#nav-toggle:checked ~ #main-header .burger-icon span:nth-child(2) {
    opacity: 0;
}
#nav-toggle:checked ~ #main-header .burger-icon span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}
.logo-link {
    display: inline-block;
    text-decoration: none;
    color: var(--accent);
    transition: color 0.2s;
}
.logo-link:hover {
    color: #ffffff;
}.logo-link:hover .logo-tagline {
    color: #ffffff;
}
.logo-sylvia {
    font-family: 'CoventryGarden', serif;
    font-size: 2.2rem;
    line-height: 1;
    display: inline;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.logo-sub {
    font-family: 'CoventryGarden', serif;
    font-size: 2.2rem;
    margin-left: 0.35em;
    display: inline;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.logo-sub-merriweather {
    font-family: 'Merriweather SemiCondensed Light', serif;
    font-weight: 300;
    font-size: 2.0rem;
    margin-left: 0.3em;
    display: inline;
    letter-spacing: 0.02em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.logo-tagline {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 1.0rem;
    color: var(--accent);
    letter-spacing: 0.6px;
    display: block;
    margin-top: 2px;
}


/* ---------- Top Nav-Stripe (dunkles Anthrazit, unter dem Header) ---------- */
.top-nav-stripe {
    background-color: #2a2a2a;
    padding: 0 28px;
    border-bottom: 2px solid var(--accent);
}
.top-nav-inner {
    display: flex;
    align-items: center;
    gap: 0;
    height: 40px;
}
.top-nav-inner a {
    color: #ffffff;
    font-size: 0.9rem;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.2s;
    white-space: nowrap;
    letter-spacing: 0.3px;
    padding: 0;
}
.top-nav-inner a:hover {
    color: var(--accent);
}/* Pipe-Trenner zwischen Nav-Punkten */.top-nav-inner a.active {
    color: var(--accent);
    font-weight: 500;
}

.top-nav-inner a:not(:last-child)::after {
    content: '|';
    color: rgba(255,255,255,0.35);
    padding: 0 10px;
}
/* ---------- 3-Spalten-Raster ---------- */
.page-wrapper {
    display: flex;
    min-height: calc(100vh - 180px);
    align-items: stretch;
    padding-right: 18px;
}

/* ---------- Linke Spalte: Navigation (Zebrastreifen soft) ---------- */
#sidebar {
    width: 230px;
    flex-shrink: 0;
    background-color: #ffffff;
    padding: 24px 12px;
    border-right: 1px solid #e8e5dc;
    box-shadow: 2px 0 8px rgba(0,0,0,0.04);
}
.nav-list {
    list-style: none;
    margin-bottom: 30px;
}
.nav-list li {
    margin-bottom: 0;
    border-bottom: 1px solid rgba(128,128,128,0.50);
}
.nav-list li:last-child { border-bottom: none; }
.nav-list li:nth-child(even) a {
    background-color: #f5f4ef;
}
.nav-list li:nth-child(odd) a {
    background-color: #fcfbf8;
}
.nav-list a {
    display: block;
    padding: 7px 16px;
    font-weight: 400;
    color: var(--text);
    border-radius: 0;
    transition: background-color 0.2s, color 0.2s;
}
.nav-list a:hover,
.nav-list a.active {
    background-color: var(--accent) !important;
    color: var(--text);
}

/* Öffnungszeiten im Sidebar */
.oeffnungszeiten {
    border-top: 1px solid #e8e5dc;
    padding-top: 18px;
    font-size: 0.9rem;
}
.oeffnungszeiten h3 {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 1.05rem;
    margin-bottom: 8px;
    color: var(--brand);
}
.oeffnungszeiten ul {
    list-style: none;
    padding-left: 0;
}
.oeffnungszeiten li { margin-bottom: 4px; }
.warn-geschlossen { color: var(--text); font-weight: 500; }
.hinweis-besichtigung {
    margin-top: 10px;
    font-style: italic;
    color: #666;
    font-size: 0.85rem;
}

/* ---------- Besucherzähler (unter Öffnungszeiten) ---------- */
.besucherzaehler {
    margin-top: 28px;
    font-size: 0.9rem;
    color: var(--text);
    text-align: center;
    background: #ffffcc;
    border: 2px solid var(--brand);
    border-radius: 18px;
    padding: 12px 16px;
}
.besucherzaehler .trennlinie {
    display: none;
}
.besucher-text {
    margin-bottom: 4px;
    font-weight: 400;
}
.besucher-zahl {
    font-weight: 400;
    color: var(--brand);
}
.besucher-update {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.5;
}

/* ---------- Mittlere Spalte: Slider + Content ---------- */
#main-content {
    flex: 1;
    padding: 32px 36px;
    min-width: 0;
}

/* ---------- Rechte Spalte: Kontaktbox (zwei Spalten) ---------- */
#right-sidebar {
    width: 580px;
    flex-shrink: 0;
    background-color: #ffffff;
    border-left: 1px solid #e8e5dc;
    padding: 32px 20px;
    box-shadow: -2px 0 8px rgba(0,0,0,0.04);
}
#right-sidebar h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    color: var(--brand);
    margin-bottom: 16px;
    margin-top: 2px;
}
.sidebar-name {
    font-family: 'CoventryGarden', serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Zwei-Spalten-Layout im rechten Sidebar */
.sidebar-two-col {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 16px;
}
.sidebar-col-left {
    flex: 1;
    min-width: 0;
}
.sidebar-col-right {
    flex-shrink: 0;
    width: 50%;
    max-width: 50%;
}
/* Profilbild IMMER 50% Breite — auch auf kleinstem Phone */
.sidebar-col-right .responsive-img {
    max-width: 100%;
    width: auto;
    border: 1px solid var(--brand);
    border-radius: 4px;
}
.sidebar-col-left address {
    font-style: normal;
    line-height: 1.45;
    margin-bottom: 10px;
    color: var(--text);
}
.contact-list {
    list-style: none;
    margin: 8px 0;
}
.contact-list li {
    margin-bottom: 6px;
    line-height: 1.45;
    font-weight: 400;
}
.responsive-img {
    display: block;
    margin: 0;
}

.right-sidebar-note {
    font-size: 0.9rem;
    color: #444;
    margin-top: 0;
    margin-bottom: 16px;
    line-height: 1.4;
}
/* ---------- Sylvia-Message-Box (bg #ffffcc, grüner 5px Border, NUR Text zentriert) ---------- */
.sylvia-message-box {
    background: #ffffcc;
    border: 2px solid var(--brand);
    border-radius: 18px;
    padding: 22px 24px;
    margin-bottom: 16px;
    text-align: center;
}
.sylvia-message-box .message-text {    margin-bottom: 0;
    /* Single-P: kein margin-bottom nötig, padding-bottom der Box reicht */
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--text);
    line-height: 1.4;
}
.sylvia-message-box .message-signature {
    font-family: 'CoventryGarden', serif;
    font-size: 1.8rem;
    color: var(--brand);
    line-height: 1.3;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.sig-merriweather {
    font-family: 'CoventryGarden', serif;
    font-weight: 300;
    font-size: 1.75rem;
    vertical-align: 0.05em;
    letter-spacing: 0.02em;
    line-height: 1.3;
    margin-right: -0.06em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* ---------- 2-Spalten 50/50: immobilien-gesuche.gif + werkenntdenbesten (LEGACY – jetzt durch gesuche-drei-col ersetzt) ---------- */
.gesuche-werkennt-two-col {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-top: 10px;
    width: 100%;
}
.gesuche-col-left {
    flex: 0 0 50%;
    max-width: 50%;
}
.gesuche-col-left {
    text-align: center;
}
.gesuche-col-left img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}
.wer-kennt-badge {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.2s, box-shadow 0.2s;
}
.wer-kennt-badge:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 16px rgba(0,102,0,0.2);
}
.gesuche-col-right {
    flex: 0 0 50%;
    max-width: 50%;
    text-align: center;
}
.gesuche-col-right img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto 8px;
}
.gesuche-wer-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 0.95rem;
    color: var(--brand);
    margin-bottom: 10px;
}
.gesuche-wer-text {
    font-size: 0.9rem;
    color: #444;
    margin-bottom: 6px;
    line-height: 1.5;
    margin-top: 6px;
}
.gesuche-wer-link {
    display: inline-block;
    color: var(--brand);
    font-weight: 400;
    font-size: 0.9rem;
    text-decoration: underline;
}
.gesuche-wer-link:hover {
    color: var(--accent);
}

/* ---------- 3-Spalten Gesuche 50/25/25 (ersetzt gesuche-werkennt-two-col) ---------- */
.gesuche-drei-col {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
    margin-top: 0;
    width: 100%;
    overflow: visible;
}
.gesuche-drei-col > .sylvia-message-box {
    flex: 0 0 100%;
    margin-bottom: 0;
    text-align: center;
}
/* Immoscout-iFrame: eigene Zeile — zentriert via margin:auto */
.gesuche-col-mitte {
    margin-bottom: 6px;
    width: 100%;
}
.gesuche-col-mitte iframe {
    display: block;
    margin: 0 auto;
    border: none;
}

.gesuche-col-rechts {
    display: block;
    flex: 0 0 50%;
    text-align: center;
}
.gesuche-col-rechts img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto 8px;
}
/* ---------- WerKenntDenBesten-Block (zentriert, kein GIF) ---------- */
.werkenntdenbesten-block {
    text-align: center;
    margin-top: 10px;
}
.werkenntdenbesten-block img {
    display: block;
    max-width: 280px;
    height: auto;
    margin: 0 auto 8px;
}

/* ---------- Bewertung-Star-Card (ersetzt WerKenntDenBesten-Grafik, Spalte 3) ---------- */
.bewertung-star-card {
    display: block;
    text-align: center;
    padding: 16px 10px;
    background: #ffffff;
    border: 2px solid var(--muted);
    border-radius: 12px;
    text-decoration: none;
    color: var(--text);
    transition: box-shadow 0.2s;
}
.bewertung-star-card:hover {
    box-shadow: 0 4px 18px rgba(0,0,0,0.12);
}
.bewertung-star-card:hover .bewertung-green-btn {
    color: var(--accent);
}
.bewertung-stars {
    font-size: 1.3rem;
    color: var(--accent);
    letter-spacing: 3px;
    line-height: 1.3;
}
.bewertung-rating {
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--brand);
    margin: 4px 0 2px;
    line-height: 1.3;
}
.bewertung-name {
    font-family: 'CoventryGarden', serif;
    font-size: 1.1rem;
    color: var(--brand);
    margin: 2px 0;
    line-height: 1.4;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.bewertung-link-text {
    font-size: 0.85rem;
    color: var(--brand);
    text-decoration: underline;
    margin-top: 2px;
}

/* Bewertung-Text-Box (rechte 50% in Spalte 3) */
.bewertung-box {
    text-align: center;
    padding: 10px 8px;
}

/* Grüner Button (immobilienscout24-Link, KEIN Pfeil-Icon) */
.bewertung-green-btn {
    display: inline-block;
    background: var(--btn-green-bg, var(--brand));
    color: var(--btn-green-fg, #ffffff);
    padding: var(--btn-green-pad, 10px 22px);
    border: var(--btn-green-border, none);
    border-radius: var(--btn-green-radius, 10px);
    text-decoration: none;
    font-weight: 400;
    font-size: 0.9rem;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.15s;
    box-shadow: var(--btn-green-shadow, 0 3px 10px rgba(0,102,0,0.30));
    margin-top: 8px;
}
.bewertung-green-btn:hover {
    background: var(--btn-green-bg-h, #008800);
    color: var(--btn-green-fg-h, var(--accent));
    box-shadow: var(--btn-green-shadow-h, var(--btn-green-shadow, 0 3px 10px rgba(0,102,0,0.30)));
}
/* ---------- Referenzen: Grüne Action-Buttons (wie "Bewertungen ansehen") ---------- */
.ref-link-btn {
    display: inline-block;
    background: var(--btn-green-bg, var(--brand));
    color: var(--btn-green-fg, #ffffff);
    padding: var(--btn-green-pad, 10px 22px);
    border: var(--btn-green-border, none);
    border-radius: var(--btn-green-radius, 10px);
    text-decoration: none;
    font-weight: 400;
    font-size: 0.9rem;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.15s;
    box-shadow: var(--btn-green-shadow, 0 3px 10px rgba(0,102,0,0.30));
}
.ref-link-btn:hover {
    background: var(--btn-green-bg-h, #008800);
    color: var(--btn-green-fg-h, var(--accent));
    box-shadow: var(--btn-green-shadow-h, var(--btn-green-shadow, 0 3px 10px rgba(0,102,0,0.30)));
}

/* ---------- Slider (Referenzobjekte) ---------- */
.slider-section {
    margin-bottom: 40px;
}
.slider-section h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    color: var(--brand);
    margin-bottom: 20px;
}

.slider-wrapper {
    position: relative;
    overflow: hidden;
    border: 2px solid var(--muted);
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.10);
    background: #fff;
    min-height: 340px;
}

.slider-slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
}
.slider-slide {
    flex: 0 0 100%;
    display: flex;
    flex-direction: row;
    gap: 28px;
    padding: 28px;
    align-items: flex-start;
}
.slider-slide img {
    width: 320px;
    height: 240px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.12);
    flex-shrink: 0;
}
.slide-text {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-top: -4px;
}
.slide-text h3 {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 1.3rem;
    color: var(--brand);
    margin-bottom: 8px;
    display: inline;
    order: 1;
    flex: 0 0 auto;
    margin-right: 20px;
}
.slide-text .slide-label {
    display: inline-block;
    background: var(--accent);
    color: var(--text);
    font-weight: 400;
    font-size: 0.8rem;
    padding: 3px 12px;
    border-radius: 20px;
    margin-right: 0;
    vertical-align: baseline;
    margin-top: -10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    order: 2;
    flex: 0 0 auto;
    animation: softPulse 2.5s ease-in-out infinite !important;
    will-change: transform, opacity;
}
.slide-text p {
    margin-bottom: 8px;
    line-height: 1.4;
    font-weight: 400;
    width: 100%;
    order: 3;
}
.slide-text .slide-body {
    width: 100%;
    order: 3;
    line-height: 1.4;
    font-weight: 400;
}
.slide-text .slide-body p,
.slide-text .slide-body div {
    margin: 0 0 8px;
}
.slide-text .slide-body strong {
    font-weight: 700;
}
.slide-text .slide-body em {
    font-style: italic;
}
.slide-text .price {
    font-weight: 400;
    color: var(--brand);
    font-size: 1.1rem;
    margin-top: 8px;
    width: 100%;
    order: 4;
}

/* Soft-Pulse-Animation für den „Neu"-Badge — extra sanft */
@keyframes softPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.70; transform: scale(1.12); }
}

/* Slider-Navigation (Radio-Buttons) */
.slider-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    background: #fafaf7;
}
.slider-nav label {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ccc;
    cursor: pointer;
    transition: background 0.2s;
}
.slider-nav label:hover { background: var(--accent); }

/* Radio-Button Slider-Logik — die :checked-Regeln erzeugt includes/slider_cms.php
   passend zur Slide-Anzahl aus dem CMS (hier steht nur, was von der Anzahl unabhaengig ist). */
.slider-radio { display: none; }

/* ---------- Kontaktformular ---------- */
.contact-form-section {
    margin: 0 auto;
    max-width: 780px;
    background: #ffffff;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 6px 28px rgba(0,0,0,0.08);
    overflow: hidden;
}
.contact-form-section h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    color: var(--brand);
    margin-bottom: 6px;
}
.contact-form-section .form-subtitle {
    color: #666;
    margin-bottom: 24px;
    font-size: 0.95rem;
    font-weight: 400;
}
.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.form-group {
    flex: 1;
    min-width: 200px;
    overflow: hidden;
}
.form-group label {
    display: block;
    font-weight: 400;
    margin-bottom: 5px;
    color: var(--text);
    font-size: 0.9rem;
}
.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    max-width: 100%;
    padding: 12px 16px;
    border: 2px solid #e0ddd5;
    border-radius: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 0.95rem;
    color: var(--text);
    background: #fafaf7;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(255,215,0,0.15);
    background: #fff;
}
.form-group textarea {
    resize: vertical;
    min-height: 120px;
}
.form-submit {
    margin-top: 8px;
}
/* Absenden-Button: DEFAULT wie ein Formularfeld (dezent, Input-Optik), HOVER = Gold (primary gelb). */
.form-submit button {
    background: #fafaf7;                 /* wie das Input-Feld (heller Kontext) */
    color: var(--text);
    border: 2px solid #e0ddd5;           /* graue Input-Outline */
    padding: 14px 40px;
    font-size: 1.05rem;
    font-weight: 400;
    font-family: 'Roboto', sans-serif;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
    box-shadow: none;
}
.form-submit button:hover {
    background: var(--accent);           /* Gold */
    color: var(--text);
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(255,215,0,0.35);
    transform: translateY(-1px);
}
.form-submit button:active {
    transform: translateY(0);
}

/* ---------- Kontaktformular: 2-Spalten ab 1024px ---------- */
/* ---------- Kontaktformular IN SPALTE 2: volle Breite + Anthrazit-BG ---------- */
#main-content .contact-form-section {
    margin: 0;
    max-width: none;
    background: #2a2a2a;
    border: 2px solid var(--muted);
    border-radius: 16px;
    padding: 40px 36px;
    box-shadow: none;
}
#main-content .contact-form-section h2 {
    color: var(--accent);
}
#main-content .contact-form-section .form-subtitle {
    color: #ccc;
}
#main-content .contact-form-section label {
    color: #ddd;
}
#main-content .contact-form-section .form-group input,
#main-content .contact-form-section .form-group textarea,
#main-content .contact-form-section .form-group select {
    background: var(--field-bg, #3a3a3a);
    border: var(--field-border, 2px solid #555);
    color: var(--field-fg, #fff);
    padding: var(--field-pad, 12px 16px);
    border-radius: var(--field-radius, 10px);
}
#main-content .contact-form-section .form-group input::placeholder,
#main-content .contact-form-section .form-group textarea::placeholder {
    color: #999;
}
#main-content .contact-form-section .form-group input:focus,
#main-content .contact-form-section .form-group textarea:focus {
    border: var(--field-border-a, 2px solid var(--accent));
    box-shadow: 0 0 0 4px rgba(255,215,0,0.20);
}
/* Dunkler Formular-Kontext: Button wie die dunklen Input-Felder (bg #3a3a3a, graue Outline,
   Text weiss) — HOVER = Gold. Genau die Optik der Inputs daneben. */
#main-content .contact-form-section .form-submit button {
    background: var(--btn-submit-bg, #3a3a3a);
    border: var(--btn-submit-border, 2px solid #555);
    color: var(--btn-submit-fg, #fff);
    padding: var(--btn-submit-pad, 14px 40px);
    border-radius: var(--btn-submit-radius, 10px);
    box-shadow: var(--btn-submit-shadow, none);
}
#main-content .contact-form-section .form-submit button:hover {
    background: var(--btn-submit-bg-h, var(--accent));
    border: var(--btn-submit-border-h, 2px solid var(--accent));
    color: var(--btn-submit-fg-h, var(--text));
    box-shadow: var(--btn-submit-shadow-h, 0 4px 12px rgba(255,215,0,0.35));
}
#main-content .contact-form-section a {
    color: var(--accent);
}
#main-content .contact-form-section a:hover {
    color: #ffffff;
}

@media (max-width: 1023px) {
    .contact-form-section {
        max-width: none;
    }
    .form-row {
        flex-wrap: wrap;
    }
    .form-row:nth-child(1) .form-group,
    .form-row:nth-child(2) .form-group {
        flex: 0 0 calc(50% - 10px);
        min-width: 0;
    }
    .form-row:nth-child(3) .form-group,
    .form-row:nth-child(4) .form-group {
        flex: 0 0 100%;
    }
}
/* Kontaktformular: Inputs untereinander ab Phone (≤650px) */
@media (max-width: 650px) {
    .contact-form-section .form-row {
        flex-direction: column;
    }
    .contact-form-section .form-row .form-group {
        min-width: 100%;
        flex: 0 0 100% !important;
    }
}

/* ---------- Kontaktformular: Display-Switch (Spalte-2 vs Full-Width) ---------- */
/* Default (<1280px): Inhalt-Formular ausblenden, Full-Width (100%) anzeigen */
.contact-form-in-content { display: none; }
.contact-form-fullwidth { 
    display: block;
    width: 100%;
    background: #2a2a2a;
    padding: 40px 0;
}
.contact-form-fullwidth .contact-form-section {
    max-width: none;
    margin: 0 18px;
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}
.contact-form-fullwidth .contact-form-section h2 {
    color: var(--accent);
}
.contact-form-fullwidth .contact-form-section .form-subtitle {
    color: #ccc;
}
.contact-form-fullwidth .contact-form-section label {
    color: #ddd;
}
.contact-form-fullwidth .contact-form-section .form-group input,
.contact-form-fullwidth .contact-form-section .form-group textarea,
.contact-form-fullwidth .contact-form-section .form-group select {
    background: #3a3a3a;
    border-color: #555;
    color: #fff;
}
.contact-form-fullwidth .contact-form-section .form-group input::placeholder,
.contact-form-fullwidth .contact-form-section .form-group textarea::placeholder {
    color: #999;
}
.contact-form-fullwidth .contact-form-section .form-group input:focus,
.contact-form-fullwidth .contact-form-section .form-group textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(255,215,0,0.20);
}
.contact-form-fullwidth .contact-form-section .form-submit button {
    background: var(--button, var(--accent));
    color: var(--text);
    box-shadow: 0 4px 12px rgba(255,215,0,0.35);
}
.contact-form-fullwidth .contact-form-section a {
    color: var(--accent);
}

/* ≥1281px: Inhalt-Formular anzeigen (Anthrazit-Look bleibt via #main-content .contact-form-section), Full-Width ausblenden */
@media (min-width: 1281px) {
    .contact-form-in-content { display: block; }
    .contact-form-fullwidth { display: none; }
}

/* Fullwidth-Formular: Margins an Content-Spalte ausrichten */
@media (max-width: 1023px) {
    .contact-form-fullwidth .contact-form-section {
        margin: 0 18px;
    }
}
@media (max-width: 800px) {
    .contact-form-fullwidth .contact-form-section {
        margin: 0 18px 0 18px;
    }
}

/* ---------- Footer (volle Breite, durchgezogener grüner Streifen) ---------- */
/* ---------- Footer (volle Breite, 2-Spalten, durchgezogener grüner Streifen) ---------- */
#main-footer {
    background-color: var(--brand);
    color: #ffffff;
    padding: 28px 0;
    font-size: 0.9rem;
    width: 100%;
    box-shadow: 0 -6px 16px rgba(0,0,0,0.22);
}
.footer-inner {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 32px;
    margin-left: 0;
    padding-left: 0;
    padding-right: 36px;
    max-width: none;
}
.footer-col-left {
    flex: 0 0 60%;
    text-align: left;
    min-width: 0;
}
.footer-address {
    font-size: 0.95rem;
    color: var(--accent);
    margin-bottom: 12px;
    line-height: 1.5;
}
.footer-address strong {
    font-family: 'CoventryGarden', serif;
    font-size: 1.6rem;
    font-weight: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.footer-logo-name {
    font-family: 'CoventryGarden', serif;
    font-size: 1.6rem;
    font-weight: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.footer-col-right {
    flex: 0 0 40%;
    text-align: left;
    padding-left: 24px;
    border-left: 1px solid #ffffff;
    line-height: 1.45;
    font-size: 0.9rem;
    white-space: nowrap;
}
.footer-legal {
    padding-top: 0;
    margin-top: 6px;
}
.footer-legal a {
    color: var(--accent);
    margin: 0 6px;
}
.footer-legal a:first-child {
    margin-left: 0;
}
.footer-legal a:hover {
    text-decoration: underline;
}
.footer-copyright {
    margin-top: 10px;
    font-size: 0.8rem;
    color: var(--accent);
}

/* ---------- Email-Obfuscation (AI-Connector Pattern) ---------- *//* Footer: E-Mail-Links in Weiß, Hover in Styleguide-Gold */
#main-footer .email-obf { color: #ffffff; }
#main-footer .email-obf:hover { color: var(--accent); }

.email-obf {
    cursor: pointer;
    color: var(--brand);
    font-weight: 400;
    transition: color 0.2s;
}
.email-obf:hover {
    color: var(--accent);
}
.email-obf-link {
    color: var(--brand);
    font-weight: 400;
}
.email-obf-link:hover {
    color: var(--accent);
}

/* ---------- Phone Reveal ---------- */
.phone-reveal {
    cursor: pointer;
    color: var(--text);
    font-weight: 400;
}
.phone-reveal:hover {
    color: var(--brand);
}


/* ---------- Slide-Out Overlay (eigenes Element, deckt GANZEN Viewport ab) ---------- */
.slide-out-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.90);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 85;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
}
#nav-toggle:checked ~ .slide-out-overlay {
    opacity: 1;
    pointer-events: auto;
}
/* ============================================================
   Subpages (Impressum, Datenschutz, Widerruf, AGB) — Kartendesign
   ============================================================ */
.content-subpage {
    padding-right: 0;
    min-width: 0;
}
.content-subpage h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    color: var(--brand);
    margin-bottom: 30px;
    padding-bottom: 7px;
    border-bottom: 2px solid var(--accent);
    display: inline-block;
}
.content-subpage h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 1.25rem;
    color: var(--brand);
    margin-top: 18px;
    margin-bottom: 16px;
    padding-left: 16px;
    border-left: 4px solid var(--accent);
}
.content-subpage h3 {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 1.05rem;
    color: var(--text);
    margin-top: 22px;
    margin-bottom: 10px;
    padding-left: 8px;
    border-left: 2px solid var(--brand);
}
.content-subpage p {
    margin-bottom: 14px;
    line-height: 1.45;
    color: var(--text);
    font-size: 0.95rem;
}
.content-subpage strong {
    color: var(--brand);
    font-weight: 500;
}
.content-subpage a {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.content-subpage a:hover {
    color: var(--accent);
}

/* Info-Karte: hervorgehobener Block (Kontakt, Verantwortliche Stelle) */
.info-card {
    background: #ffffff;
    border: 2px solid var(--muted);
    border-left: 5px solid var(--accent);
    border-radius: 12px;
    padding: 20px 24px;
    margin: 18px 0 12px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    column-span: all;
    display: inline-block;
    width: 100%;
}
.info-card p {
    margin-bottom: 4px;
}
.info-card p:last-child {
    margin-bottom: 0;
}

/* Hinweis-Box (Warnhinweise, wichtige Infos) */
.hinweis-box {
    background: #fffdf0;
    border: 2px solid var(--muted);
    border-radius: 12px;
    padding: 18px 24px;
    margin: 20px 0 24px 0;
    font-size: 0.93rem;
    line-height: 1.4;
    box-shadow: 0 2px 8px rgba(255,215,0,0.12);
}
.hinweis-box h3 {
    margin-top: 0;
    padding-left: 0;
    border-left: none;
    color: var(--brand);
}

/* Aufzählungen — goldene Bullets */
.content-subpage ul,
.sommer-text ul {
    list-style: none;
    padding-left: 0;
    margin: 12px 0 20px 0;
}
.content-subpage ul li,
.sommer-text ul li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 8px;
    line-height: 1.4;
    font-size: 0.95rem;
}
.content-subpage ul li::before,
.sommer-text ul li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: calc(0.7em - 4px);   /* vertikal mittig zur ersten Textzeile (halbe Zeilenhöhe minus halber Punkt) */
    width: 8px;
    height: 8px;
    background: var(--brand);
    border-radius: 50%;
}

/* Nummerierte Listen — ABSICHTLICH dieselbe Darstellung wie die Punkt-Listen darüber:
   gleiche Gasse (24px), gleiche Textkante, gleiche Abstände. Nur der Marker ist eine Zahl
   in Markenfarbe statt eines Punktes. So sieht es identisch aus, egal welche der beiden
   Formatierungen im Editor gewählt wird.
   Ohne diese Regel greift nur der globale Reset (`* { padding: 0 }`): die Zahl wird dann bei
   `list-style-position: outside` LINKS AUSSERHALB des Kastens gezeichnet und steht nicht mehr
   auf der Textkante der Absätze. Eigener Zähler, weil `list-style: none` die Browser-Nummern
   entfernt. */
.content-subpage ol,
.sommer-text ol {
    list-style: none;
    padding-left: 0;
    margin: 12px 0 20px 0;
    counter-reset: aic-liste;
}
.content-subpage ol li,
.sommer-text ol li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 8px;
    line-height: 1.4;
    font-size: 0.95rem;
    counter-increment: aic-liste;
}
.content-subpage ol li::before,
.sommer-text ol li::before {
    content: counter(aic-liste) '.';
    position: absolute;
    left: 0;                 /* linksbündig zur Textkante der Absätze */
    top: 0;
    color: var(--brand);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;   /* 1. und 10. gleich breit → Text bleibt in Linie */
}
/* Trennlinie (hr) im Fließtext/Baustein: dünne helle Linie, responsive rem-Abstand als Abstandhalter */
.content-home hr,
.content-page hr,
.content-subpage hr,
.sommer-text hr {
    border: none;
    border-top: 1px solid var(--muted, #c8c8c8);
    height: 0;
    margin: 1.5rem 0;
}
/* Eingefügte Webstyle-Buttons (Editor „Button einfügen"): Basis-Layout, Farben/Padding kommen inline aus dem Webstyle,
   Hover über Inline-Vars (--hbg/--hfg/--hbc/--hsh). In einer 100%-Zeile (.aic-cbtn-row, text-align steuert die Position). */
/* Content-Buttons (Editor „Button einfügen"): markiert über name="aic-cbtn-<key>" (überlebt SunEditors <a>-Clean,
   das class immer strippt). Basis-Layout hier; Farbe/Padding/Hover pro Webstyle-Button aus
   a[name="aic-cbtn-<key>"] (emittiert in system/inc/webstyle-vars.php). */
a[name^="aic-cbtn-"] {
    display: inline-block;
    text-decoration: none;
    font-weight: 400;
    line-height: 1.2;
    cursor: pointer;
    box-sizing: border-box;
    transition: background .2s, color .2s, box-shadow .2s, border-color .2s;
}
/* Editor-Spacer: volle Zeile, Höhe inline in rem (überlebt SunEditor). Der rem-Wert ist nur Editor-Hilfe → hier ausgeblendet. */
.content-home div[style*="width"][style*="height"],
.content-page div[style*="width"][style*="height"],
.content-subpage div[style*="width"][style*="height"],
.sommer-text div[style*="width"][style*="height"],
.oeffnungszeiten div[style*="width"][style*="height"],
.right-sidebar-note div[style*="width"][style*="height"] {
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

/* PDF-Download-Box */
.pdf-download-box {
    background: #ffffff;
    border: 2px solid var(--muted);
    border-radius: 14px;
    padding: 22px 28px;
    margin: 28px 0 10px 0;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s;
}
.pdf-download-box:hover {
    box-shadow: 0 4px 20px rgba(0,102,0,0.12);
}
.pdf-download-box p {
    margin-bottom: 12px;
    font-weight: 400;
    color: var(--text);
}
.pdf-download-box ul {
    margin-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}
.pdf-download-box ul li {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
.pdf-download-box ul li::before {
    display: none;
}
.pdf-download-box a {
    display: inline-block;
    background: var(--accent);
    color: var(--text);
    text-decoration: none;
    padding: 10px 22px;
    border-radius: 8px;
    font-weight: 400;
    font-size: 0.95rem;
    transition: background 0.2s, transform 0.15s;
    box-shadow: 0 3px 10px rgba(255,215,0,0.3);
}
.pdf-download-box a:hover {
    background: var(--accent-dark);
    transform: translateY(-1px);
    color: var(--text);
    text-decoration: none;
}

/* Nummerierte Paragraphen (AGB) */
.paragraf-list p {
    position: relative;
    padding-left: 40px;
    margin-bottom: 18px;
    line-height: 1.45;
}
.paragraf-list p strong {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--brand);
    color: #ffffff;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0;
}
.paragraf-list p strong::after {
    content: '';
}

/* Abschnitts-Trenner (dezente Linie zwischen Hauptkapiteln) */
.section-divider {
    border: none;
    border-top: 1px solid #e0ddd5;
    margin: 24px 0 40px 0;
}
.subpage-split .section-divider {
    column-span: all;
}
hr.section-divider + h2 {
    margin-top: 40px;
}
/* Grid-Modus: HR volle Breite + Margins symmetrisch (Grid-Gap liefert bereits Abstand) */
@media (min-width: 1151px) {
    .subpage-two-col > hr.section-divider {
        grid-column: 1 / -1;
        margin: 14px 0 30px 0;
    }
    .subpage-two-col .subpage-row-full > hr.section-divider:first-child {
        margin: 14px 0 30px 0;
    }
}
/* ============================================================
   NEUE SEITEN: Über mich · Referenzen · Links
   ============================================================ */

/* ---------- Gemeinsames Page-Wrapper für Folgeseiten ---------- */
.content-page {
    padding-right: 0;
    min-width: 0;
}
.content-page h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    color: var(--brand);
    margin-bottom: 14px;
    padding-bottom: 7px;
    border-bottom: 2px solid var(--accent);
    display: inline-block;
}
.content-page h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 1.25rem;
    color: var(--brand);
    margin-top: 0;
    margin-bottom: 14px;
    padding-left: 16px;
    border-left: 4px solid var(--accent);
}
.page-intro {
    font-size: 1.0rem;
    color: #444;
    margin-bottom: 28px;
    line-height: 1.5;
    font-weight: 300;
}

/* ---------- Über-mich: Profil-Grid (Text links, Foto rechts) ---------- */
.ueber-mich-grid {
    display: flex;
    flex-direction: row-reverse;
    gap: 28px;
    align-items: flex-start;
}
.ueber-mich-bild {
    flex-shrink: 0;
    width: 220px;
}
.ueber-mich-bild img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--brand);
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}
.ueber-mich-text {
    flex: 1;
    min-width: 0;
}
.ueber-mich-text p {
    font-size: 0.95rem;
    line-height: 1.55;
    margin-bottom: 10px;
}
.ueber-mich-text p:last-child {
    margin-bottom: 0;
}

/* Marken-Name im Fließtext */
.marken-name {
    font-family: 'CoventryGarden', serif;
    font-size: 1.1em;
    color: var(--brand);
    font-weight: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* Checklist-Style */
.checklist {
    list-style: none;
    padding-left: 0;
    margin: 8px 0;
}
.checklist li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 10px;
    line-height: 1.4;
    font-size: 0.95rem;
}
.checklist li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--brand);
    font-weight: 700;
    font-size: 1.0rem;
}

/* Bewertungs-Karte (Über-mich Seite) */
.bewertung-karte {
    background: #fafaf7;
    border: 2px solid var(--muted);
    border-left: 4px solid var(--accent);
    border-radius: 12px;
    padding: 16px 20px;
}
.bewertung-karte .bewertung-name {
    font-family: 'CoventryGarden', serif;
    font-size: 1.1rem;
    color: var(--brand);
    display: block;
    margin-bottom: 8px;
}
.bewertung-karte p {
    font-size: 0.93rem;
    line-height: 1.5;
    margin-bottom: 4px;
    font-style: italic;
}
.bewertung-quelle {
    font-size: 0.85rem !important;
    color: #888 !important;
    font-style: normal !important;
    margin-top: 6px !important;
}

/* ---------- Referenzen: Cards ---------- */
.referenz-card {
    background: #ffffff;
    border: 2px solid var(--muted);
    border-radius: 16px;
    padding: 28px;
    margin-bottom: 28px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.06);
    position: relative;
}
.referenz-badge {
    display: inline-block;
    background: var(--accent);
    color: var(--text);
    font-size: 0.7rem;
    font-weight: 500;
    padding: 3px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    animation: none !important;
}
.referenz-badge-verkauft {
    background: var(--brand);
    color: #ffffff;
}
/* ---- Label-Farben für die neue Legende (Fabi 2026) ---- */
.referenz-badge-bauland {
    background: #0066cc;
    color: #ffffff;
}
.referenz-badge-wohnung-vermietet {
    background: var(--accent);
    color: var(--text);
}
.referenz-badge-immobilie-verkauft {
    background: var(--brand);
    color: #ffffff;
}
.referenz-badge-gewerbe-vermietet {
    background: #e67300;
    color: #ffffff;
}

/* ---- Label-Legende (eine Zeile) ---- */
.label-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 28px;
    padding: 12px 4px;
    font-size: 0.85rem;
}
.label-legende .legende-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.label-legende .legende-farbe {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* ---- Referenzen-Filter (Legende als Buttons, links) ---- */
.ref-layout { display: flex; gap: 24px; align-items: flex-start; }
.ref-filter { flex: 0 0 190px; position: sticky; top: 16px; display: flex; flex-direction: column; gap: 10px; }
.ref-cards { flex: 1 1 auto; min-width: 0; }
.ref-filter-btn {
    display: flex; align-items: center; gap: 9px; width: 100%;
    font-family: 'Roboto', sans-serif; font-size: 0.9rem; line-height: 1.2;
    padding: 10px 13px; border: 2px solid var(--muted); border-radius: 10px;
    background: #fff; color: var(--text); cursor: pointer; text-align: left;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.ref-filter-btn:hover { border-color: #999; }
.ref-filter-btn .ref-dot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.ref-filter-btn .ref-label { flex: 1 1 auto; }
.ref-filter-btn .ref-cnt { font-size: 0.75rem; opacity: .7; font-variant-numeric: tabular-nums; }
.ref-filter-btn.active { color: #fff; border-color: transparent; }
.ref-filter-btn.active .ref-dot { background: #fff !important; }
.ref-filter-btn.active .ref-cnt { opacity: .9; }
.ref-filter-btn[data-filter="alle"].active               { background: #006600; }
.ref-filter-btn[data-filter="immobilie-verkauft"].active { background: #006600; }
.ref-filter-btn[data-filter="bauland"].active            { background: #0066cc; }
.ref-filter-btn[data-filter="wohnung-vermietet"].active  { background: #ffd700; color: #2a2a2a; }
.ref-filter-btn[data-filter="gewerbe-vermietet"].active  { background: #e67300; }

/* Ab Burger-Breakpoint: Filter horizontal ueber die Karten statt links */
@media (max-width: 1023px) {
    .ref-layout { flex-direction: column; }
    .ref-filter { flex: 0 0 auto; position: static; flex-direction: row; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
    .ref-filter-btn { width: auto; }
    .ref-filter-btn .ref-label { flex: 0 0 auto; }
}

/* ---- Referenzen: "Mehr laden" ---- */
.ref-more-wrap { text-align: center; margin-top: 10px; }
.ref-more { background: var(--brand, #006600); color: #fff; border: none; border-radius: 10px; padding: 12px 26px; font-family: 'Roboto', sans-serif; font-size: 0.95rem; font-weight: 500; cursor: pointer; transition: filter .15s ease; }
.ref-more:hover { filter: brightness(1.12); }
.referenz-grid {
    display: flex;
    gap: 28px;
    align-items: stretch;
}
.referenz-bild {
    flex-shrink: 0;
    width: 320px;
    height: 160px;
}
.referenz-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.12);
}
.referenz-bild-platzhalter {
    background: linear-gradient(135deg, #e8e5dc 0%, #d5d0c5 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--brand);
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 1.1rem;
    line-height: 1.3;
    border: 1px dashed var(--muted);
}
.referenz-text {
    flex: 1;
    min-width: 0;
    padding-top: 4px;
}
.referenz-text h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 1.3rem;
    color: var(--brand);
    margin-bottom: 4px;
    padding-left: 0;
    border-left: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.referenz-subtitle {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 12px;
}
.referenz-daten {
    list-style: none;
    padding: 0;
    margin: 12px 0;
}
.referenz-daten li {
    font-size: 0.9rem;
    margin-bottom: 4px;
    line-height: 1.4;
    color: #444;
}
.referenz-daten li strong {
    color: var(--text);
}
.referenz-preis {
    font-weight: 500;
    color: var(--brand);
    font-size: 1.0rem;
    margin-top: 8px;
    margin-bottom: 4px;
}
.referenz-detail-link {
    font-size: 0.9rem;
    color: var(--brand);
    margin-top: 4px;
}
.referenz-detail-link a {
    font-weight: 500;
}

/* ---------- Links-Seite: Link-Liste ---------- */
.link-liste {
    list-style: none;
    padding: 0;
    margin: 4px 0;
}
.link-liste li {
    margin-bottom: 8px;
    font-size: 0.93rem;
    line-height: 1.45;
    color: #444;
}
.link-liste li a {
    font-weight: 500;
    color: var(--brand);
}
.link-liste li a:hover {
    color: var(--accent);
}

/* ---------- Content-Boxen auf Folgeseiten (angepasst) ---------- */
.content-page .info-card {
    margin: 0 0 24px 0;
}
.content-page .info-card h2:first-child {
    margin-top: 0;
}
.content-page .hinweis-box {
    margin: 0 0 24px 0;
}

/* ---------- Referenzen responsive ---------- */
@media (max-width: 1023px) {
    .referenz-grid {
        flex-direction: column;
    }
    .referenz-bild {
        width: 100%;
        height: 378px;
    }
    .referenz-bild-platzhalter {
        height: 320px;
    }
}
@media (max-width: 650px) {
    .ueber-mich-grid {
        flex-direction: column;
        align-items: center;
    }
    .ueber-mich-bild {
        width: 180px;
        margin-bottom: 8px;
    }
}
@media (max-width: 480px) {
    .referenz-card {
        padding: 18px 14px;
    }
    .referenz-bild {
        height: 315px;
    }
    .referenz-bild-platzhalter {
        height: 250px;
        font-size: 0.95rem;
    }
    .referenz-badge {
        font-size: 0.65rem;
        padding: 2px 8px;
    }
}

/* ---------- Subpages: 2-Spalten-Grid (Big Desktop >1150px) — Lesefluss links→rechts ---------- */
.subpage-two-col {
    display: block;
}
@media (min-width: 1151px) {
    .subpage-two-col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 36px 44px;
        align-items: start;
    }
    .subpage-row-full {
        grid-column: 1 / -1;
    }
    .subpage-col {
        min-width: 0;
    }
    /* Langer Abschnitt: Text intern in zwei Spalten — Lesefluss links→rechts innerhalb des Themas */
    .subpage-split {
        column-count: 2;
        column-gap: 40px;
        column-rule: 1px solid #e0ddd5;
    }
    .subpage-split h2,
    .subpage-split h3 {
        column-span: all;
    }
}

/* ---------- Objekt-Detailseite: Info-Blöcke im Spaltenfluss statt im Raster ----------
   Das 2er-Raster (.subpage-two-col) richtet ZEILEN aus: eine kurze Box wartet auf die höhere
   Nachbarbox, darunter klafft eine Lücke — und neben einem sehr langen Block bleibt die halbe
   Seite leer. Hier laufen die Boxen deshalb im Spaltenfluss: jede rutscht direkt unter ihre
   Vorgängerin, die Spalten füllen sich gleichmäßig. Eine Box wird dabei nie zerrissen.
   Responsiv ist das EINE Zahl (column-count) — kein Spalten-Markup, kein Float-Versatz. */
.objekt-bloecke.subpage-two-col {
    display: block;
    column-count: 2;
    column-gap: 44px;
}
.objekt-bloecke .subpage-col {
    display: block;
    min-width: 0;
    margin: 0 0 36px 0;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;   /* ältere WebKit */
}
/* .info-card trägt für .subpage-split ein column-span:all — im Spaltenfluss würde das
   jede Box über beide Spalten reißen und die Anordnung zerstören. */
.objekt-bloecke .info-card { column-span: none; }
/* Erste Überschrift einer Spalte oben bündig halten. */
.objekt-bloecke .subpage-col > h2:first-child { margin-top: 0; }
@media (max-width: 1150px) {
    .objekt-bloecke.subpage-two-col { column-count: 1; }
}

/* Subpage-Split: ≤1024px wieder eine Spalte */
@media (max-width: 1023px) {
    .subpage-split {
        column-count: 1;
        column-rule: none;
    }
    .subpage-split h2,
    .subpage-split h3 {
        column-span: none;
    }
}
/* ---------- Scroll-to-Top Button (SVG-Pfeil per Mask, Icon-Farbe via ::before) ---------- */
.scroll-top-btn {
    position: fixed;
    bottom: 18px;
    right: 18px;
    width: 3.2em;
    height: 3.2em;
    background: var(--brand);
    border: 1px solid var(--brand-dark);
    border-radius: 10px;
    cursor: pointer;
    z-index: 80;
    box-shadow: 0 4px 14px rgba(0,0,0,0.30);
    opacity: 0.7;
    transition: opacity 0.25s, box-shadow 0.2s;
    padding: 0;
}
.scroll-top-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    mask-image: url('../img/mediathek/icons/arrow-scrolltop.svg');
    mask-repeat: no-repeat;
    mask-position: 52% 52%;
    mask-size: 60% 60%;
    -webkit-mask-image: url('../img/mediathek/icons/arrow-scrolltop.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 52% 52%;
    -webkit-mask-size: 60% 60%;
    background: #ffffff;
    transition: background 0.2s;
}
.scroll-top-btn:hover::before {
    background: var(--accent);
}
.scroll-top-btn:hover {
    opacity: 1.0;
    box-shadow: 0 8px 24px rgba(0,102,0,0.35);
}
.scroll-top-btn:active {
    opacity: 0.9;
}
@media (max-width: 480px) {
    .scroll-top-btn {
        width: 2.6em;
        height: 2.6em;
        bottom: 12px;
        right: 12px;
    }
    .scroll-top-btn::before {
        mask-size: 55% 55%;
        -webkit-mask-size: 55% 55%;
    }
}
/* ---------- Responsive ---------- */

/* Slider + Rechte Sidebar (≤1920px) — Headlines kleiner, Rechte Spalte BLEIBT als Column (schmaler), Foto ÜBER Text */
@media (max-width: 1920px) {
    /* Headlines verkleinern */
    .content-home h1 {
        font-size: 1.2rem;
    }
    .slider-section h2 {
        font-size: 1.2rem;
    }

    /* Slider: Bild links + Text rechts bei ≥1280px (Content breit genug) */
    @media (min-width: 1400px) {
        .slider-slide {
            flex-direction: row;
            padding: 28px;
        }
        .slider-slide img {
            width: 320px;
            height: 240px;
            flex-shrink: 0;
        }
        .slide-text {
            flex: 1;
        }
    }
    /* Slider: unter 1400px Text unter Bild (3-Spalten = Content zu schmal für Row) */
    @media (max-width: 1399px) {
        .slider-slide {
            flex-direction: column;
            padding: 18px;
        }
        .slider-slide img {
            width: 100%;
            height: 267px;
        }
    }

    /* Rechte Spalte SCHMALER (Mittelspalte kriegt mehr Platz), KEIN Wrap */
    .page-wrapper {
        flex-wrap: nowrap;
    }
    #sidebar {
        width: 230px;
        flex-shrink: 0;
    }
    #main-content {
        flex: 1 1 auto;
        min-width: 300px;
        padding: 28px 24px;
    }

    /* Rechte Spalte: schmaler, Foto ÜBER Adresse, KEIN Stretch */
    #right-sidebar {
        width: 340px;
        flex-shrink: 0;
        flex-basis: 340px;
        align-self: flex-start;
        min-height: 0;
        height: auto;
        padding: 24px 16px;
    }
    #right-sidebar h2 {
        font-size: 1.4rem;
    }

    /* Adresse LINKS, Portrait RECHTS (Desktop-Zweispalter) */
    .sidebar-two-col {
        flex-direction: row;
        gap: 14px;
        align-items: flex-start;
    }
    .sidebar-col-right {
        width: 44%;
        max-width: 44%;
        flex-shrink: 0;
    }
    .sidebar-col-left {
        flex: 1;
        min-width: 0;
    }
    .sidebar-col-left address,
    .contact-list li {
        font-size: 0.85rem;
    }

    /* Gesuche: Message-Box volle Breite, Widget + Bewertung untereinander (340px Sidebar zu schmal für 50/50) */
    .gesuche-drei-col > .sylvia-message-box {
        flex: 0 0 100%;
        width: 100%;
        margin-bottom: 0;
    }


    .gesuche-col-mitte {
        display: block;
        margin: 0 auto;
        border: none;
        display: flex;
        width: 100%;  
        justify-content: center; /* Centers horizontally */
    }
  
    /* Very Important-Block .immoscout24-wrapper:  für center ausrichtung von widget iframe - nicht ändern!!! */
    .immoscout24-wrapper {
        display: block;
        margin: 0 auto;
        border: none;
        display: flex;
        width: auto;
        justify-content: center; /* Centers horizontally */
        align-items: center;     /* Centers vertically (if parent has height) */   
        margin:0;
        padding:0;
       
    } 

    .gesuche-col-rechts {
        flex: 0 0 100%;
    }


    /* Footer: Padding an ≤1920px angleichen */
    .footer-inner {
        padding-left: 24px;
        padding-right: 24px;
    }
    /* Kontaktformular-Felder: 2-Spalten auf Big Desktop (bis runter zu Tablet-Landscape) */
}

/* Tablet-Landscape (<1024px) — Burger-Menü aktiv, Sidebar Slide-Out, Content + RightSidebar nebeneinander */
@media (max-width: 1023px) {
    /* Burger-Icon anzeigen */
    .burger-icon {
        display: flex;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 100;
        padding: 14px;
        width: auto;
        height: auto;
    }
    #main-header {
        /* padding-right >= Burger-Footprint (right:20 + Box ~60) + Puffer → Tagline bricht sauber um, statt hinter den Burger zu laufen */
        padding: 12px 88px 12px 16px;
        justify-content: flex-start;
    }
    .logo-sylvia { font-size: 2.0rem; }
    .logo-sub-merriweather { font-size: 1.8rem; }
    .logo-sub { font-size: 2.0rem; }
    .logo-tagline { font-size: 0.8rem; }

    /* Sidebar als Slide-Out-Panel (fährt von links rein) */
    #sidebar {
        position: fixed;
        top: 70px;
        left: 0;
        bottom: 0;
        height: calc(100vh - 70px);
        min-height: calc(100vh - 70px);
        width: 440px;
        max-width: 92vw;
        z-index: 96;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
        padding: 24px 0 0 0;
        overflow-y: auto;
        box-shadow: 2px 0 16px rgba(0,0,0,0.3);
        border-right: none;
        border-radius: 0;
        background: var(--brand) !important;
        background-color: var(--brand) !important;
        opacity: 1;
    }
    .nav-list {
        margin: 0;
        padding: 0;
        gap: 0;
        display: block;
    }
    .nav-list li {
        border-bottom: none;
        margin: 0;
        padding: 0;
        background: transparent;
    }
    .nav-list a {
        display: block;
        padding: 14px 20px;
        font-size: 1.0rem;
        line-height: 1.3;
        background: transparent !important;
        color: #ffffff;
        border-bottom: 1px solid rgba(255,255,255,0.5);
    }
    .nav-list li:last-child a {
        border-bottom: 1px solid rgba(255,255,255,0.5);
    }
    .nav-list li { width: 100%; }
    .nav-list a { width: 100%; }
    #nav-toggle:checked ~ .page-wrapper #sidebar {
        transform: translateX(0);
    }
    .nav-list a:hover,
    .nav-list a.active {
        background-color: var(--accent) !important;
        color: var(--text);
    }

    /* Slide-Out: Öffnungszeiten + Besucherzähler in Weiß */
    #sidebar .oeffnungszeiten,
    #sidebar .oeffnungszeiten h3,
    #sidebar .oeffnungszeiten li,
    #sidebar .hinweis-besichtigung,
    #sidebar .besucherzaehler,
    #sidebar .besucher-text,
    #sidebar .besucher-zahl,
    #sidebar .besucher-update {
        color: #ffffff;
    }
    #sidebar .besucherzaehler {
        border-color: #ffffff;
        background: transparent;
    }
    #sidebar .besucher-zahl {
        color: var(--accent);
    }
    #sidebar .oeffnungszeiten {
        border-top: none;
    }
    #sidebar .warn-geschlossen {
        color: #ffffff;
    }
    #sidebar .oeffnungszeiten,
    #sidebar .besucherzaehler {
        padding-left: 20px;
        padding-right: 20px;
    }
    #sidebar .besucherzaehler {
        margin: 10px 20px;
    }

    /* ALLES unter 1024px: rechte Spalte RUTSCHT unter Content (page-wrapper column) */
    .page-wrapper {
        flex-direction: column;
        align-items: stretch;
        min-height: auto;
        padding-right: 0;
    }
    /* Links-Seite: rechte Spalte (gelbe Box) ÜBER den Link-Listen anzeigen */
    .page-wrapper.links-page-reverse #main-content { order: 2; }
    .page-wrapper.links-page-reverse #right-sidebar { order: 1; }
    #main-content {
        flex: 1 1 auto;
        width: 100%;
        padding: 24px 18px;
    }
    #right-sidebar {
        width: auto;
        height: auto;
        min-height: 0;
        align-self: auto;
        flex: 0 0 auto;
        flex-basis: auto;
        border: 2px solid var(--brand);
        border-radius: 16px;
        margin: 0 18px 18px 18px;
        padding: 24px 20px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        background: #ffffff;
        overflow: hidden;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(120px, 220px);
        column-gap: 16px;
        align-items: start;
    }
    #right-sidebar h2 {
        grid-column: 1;
        grid-row: 1;
        font-size: 1.4rem;
    }
    .sidebar-two-col {
        display: contents;
    }
    .sidebar-col-left {
        grid-column: 1;
        grid-row: 2;
        flex: 1;
        width: auto;
        text-align: left;
    }
    .sidebar-col-right {
        grid-column: 2;
        grid-row: 1 / span 2;
        width: 100%;
        max-width: 220px;
        flex-shrink: 0;
        margin: 0;
    }
    .right-sidebar-note,
    .gesuche-drei-col {
        grid-column: 1 / -1;
    }
    .right-sidebar-note {
        margin-top: 16px;
    }
    .sidebar-col-left address,
    .contact-list li {
        font-size: 0.9rem;
        text-align: left;
    }
    /* Footer: 3 Gesuche-Blöcke nebeneinander (volle Breite = genug Platz) */
    .gesuche-drei-col {
        align-items: stretch;
    }
    .gesuche-drei-col > .sylvia-message-box,
    .gesuche-col-mitte,
    .gesuche-col-rechts {
        flex: 0 0 calc(33.333% - 11px);
    }
    .gesuche-col-mitte iframe {
        display: block;
        margin: 0 auto;
        border: none;
        width: 100%;
        max-width: 200px;
    }
    .gesuche-drei-col > .sylvia-message-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .gesuche-col-rechts {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .gesuche-col-rechts .bewertung-star-card {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    /* Top-Nav: scrollbar */
    .top-nav-inner {
        gap: 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .top-nav-stripe {
        padding: 0 16px;
    }
    .top-nav-inner a {
        font-size: 0.85rem;
    }
    /* Kontaktformular 2-Spalten */
    .contact-form-section {
        max-width: none;
    }
    .form-row {
        flex-wrap: wrap;
    }
    .form-row:nth-child(1) .form-group,
    .form-row:nth-child(2) .form-group {
        flex: 0 0 calc(50% - 10px);
        min-width: 0;
    }
    .form-row:nth-child(3) .form-group,
    .form-row:nth-child(4) .form-group {
        flex: 0 0 100%;
    }
    .contact-form-section { overflow-x: hidden; }
    /* Footer: durchgezogener grüner Streifen (KEINE Box, KEINE Rundung) */
    #main-footer {
        border-radius: 0;
        margin: 0;
        padding: 24px 0;
        width: 100%;
    }
    .footer-inner {
        flex-direction: column;
        gap: 20px;
        text-align: left;
        padding-left: 18px;
        padding-right: 18px;
    }
    .footer-col-left {
        text-align: left;
    }
    .footer-col-right {
        flex: 0 0 auto;
        padding-left: 0;
        border-left: none;
        border-top: 1px solid #ffffff;
        padding-top: 16px;
        width: 100%;
    }
}

/* Alles untereinander (≤800px) — Burger+Slide-Out bleibt von 1024px, Layout auf Column */
@media (max-width: 800px) {
    .slider-slide {
        flex-direction: column !important;
    }
    .slider-slide img {
        width: 100%;
        height: 267px;
    }
    /* Legende mittig ab Breakpoint wo Urkunden in eine Spalte umbrechen */
    .label-legende {
        justify-content: center;
    }
}



/* Hinweis: >1920px = 3 Spalten; ≤1920px = Rechte Spalte schmaler (340px); &lt;1024px = Burger Slide-Out, rechte Spalte unter Content (column), Footer 3 nebeneinander; ≤800px = Slider unter Bild; ≤650px = Footer 3 untereinander */

/* ---------- Subpages responsive ---------- */
@media (max-width: 1023px) {
    .subpage-two-col {
        display: block;
    }
    .subpage-col {
        margin-bottom: 28px;
    }
    .content-subpage h1 {
        font-size: 1.4rem;
    }
    .content-subpage h2 {
        font-size: 1.15rem;
        padding-left: 12px;
    }
    .content-subpage h3 {
        font-size: 1.0rem;
    }
    .info-card,
    .hinweis-box {
        padding: 16px 18px;
    }
    .pdf-download-box {
        padding: 16px 20px;
    }
}

@media (max-width: 650px) {
    .content-subpage h1 {
        font-size: 1.25rem;
        border-bottom-width: 1px;
        margin-bottom: 20px;
    }
    .content-subpage h2 {
        font-size: 1.05rem;
        border-left-width: 3px;
        margin-top: 24px;
        padding-left: 10px;
    }
    .content-subpage h3 {
        font-size: 0.95rem;
    }
    .content-subpage p,
    .content-subpage ul li {
        font-size: 0.9rem;
    }
    .info-card,
    .hinweis-box {
        padding: 14px 16px;
        border-radius: 10px;
    }
    .pdf-download-box ul {
        flex-direction: column;
        gap: 10px;
    }
    .pdf-download-box a {
        width: 100%;
        text-align: center;
    }
    .paragraf-list p {
        padding-left: 34px;
    }
    .paragraf-list p strong {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .content-subpage {
        padding: 0 4px;
    }
    .content-subpage h1 {
        font-size: 1.15rem;
    }
    .content-subpage h2 {
        font-size: 1.0rem;
        margin-top: 20px;
    }
    .content-subpage h3 {
        font-size: 0.9rem;
    }
    .content-subpage p,
    .content-subpage ul li {
        font-size: 0.85rem;
        line-height: 1.35;
    }
    .info-card,
    .hinweis-box {
        padding: 12px 14px;
        border-radius: 8px;
        margin: 14px 0;
    }
    .info-card {
        border-left-width: 4px;
    }
    .section-divider {
        margin: 8px 0 24px 0;
    }
}

/* Phone-Tablet: 3 Gesuche-Spalten früher untereinander */
@media (max-width: 650px) {
    .gesuche-drei-col {
        margin-left: 0;
        width: 100%;
    }
    .gesuche-drei-col > .sylvia-message-box,
    .gesuche-col-rechts {
        flex: 0 0 100% !important;
    }
    .gesuche-col-mitte {
        flex: 0 0 100% !important;
        margin-bottom: 6px !important;
    }
    .gesuche-col-mitte iframe {
        display: block !important;
        margin: 0 auto !important;
        border: none !important;
    }
    .gesuche-col-rechts {
        display: block !important;
        text-align: center !important;
    }
    .gesuche-col-rechts .gesuche-wer-title,
    .gesuche-col-rechts .gesuche-wer-text,
    .gesuche-col-rechts .gesuche-wer-link {
        display: block !important;
        flex: none !important;
        min-width: 0 !important;
        text-align: center !important;
    }
}


/* ---------- Top-Nav-Stripe responsive ---------- */
@media (max-width: 800px) {
    .top-nav-inner {
        gap: 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .top-nav-stripe {
        padding: 0 16px;
    }
    .top-nav-inner a {
        font-size: 0.85rem;
    }
}
@media (max-width: 650px) {
    .top-nav-inner {
        gap: 14px;
        flex-wrap: wrap;
        height: auto;
        padding: 6px 0;
    }
    .top-nav-stripe {
        padding: 4px 12px;
    }
    .top-nav-inner a {
        font-size: 0.8rem;
    }
}


/* (Formular-Responsive jetzt via 1024px/650px Breakpoints — siehe oben) */

@media (max-width: 480px) {
    #main-header { padding: 8px 64px 8px 10px; }
    .logo-sylvia { font-size: 1.3rem; }
    .logo-sub-merriweather { font-size: 1.15rem; }
    .logo-tagline { font-size: 0.7rem; }
    .slider-slide img { height: 215px; }
    .sidebar-col-right {
        width: 50%;
        max-width: 50%;
    }
    #right-sidebar {
        padding: 18px 12px;
    }
    #right-sidebar h2 {
        font-size: 1.05rem;
    }
    .sidebar-col-left address,
    .contact-list li {
        font-size: 0.85rem;
    }
    .burger-icon {
        right: 12px;
        padding: 12px;
        width: auto;
        height: auto;
    }
    .burger-icon span {
        width: 22px;
        height: 2.5px;
    }
    .contact-form-section {
        overflow-x: hidden;
    }
    .form-group {
        min-width: 100%;
    }
    .form-row {
        gap: 10px;
    }
    .gesuche-drei-col {
        margin-left: 0;
        width: 100%;
    }
    .gesuche-drei-col > .sylvia-message-box,
    .gesuche-col-rechts {
        flex: 0 0 100%;
        margin: 0;
    }
    .gesuche-col-mitte {
        flex: 0 0 100%;
        margin-bottom: 6px;
    }
    .gesuche-col-mitte iframe {
        display: block;
        margin: 0 auto;
        border: none;
    }
    /* Phone: Spalte-3-Inhalte wieder untereinander */
    .gesuche-col-rechts {
        display: block;
        text-align: center;
    }
    .gesuche-col-rechts .gesuche-wer-title,
    .gesuche-col-rechts .gesuche-wer-text,
    .gesuche-col-rechts .gesuche-wer-link {
        display: block;
        flex: none;
        min-width: 0;
        text-align: center;
    }
}

/* ---------- Caret-Color: blinkender Text-Cursor global aus, nur in Eingabefeldern ---------- */
* { caret-color: transparent; }
input, textarea, select, [contenteditable]:not([contenteditable="false"]) { caret-color: auto; }

/* ---------- Sommer-Gruß-Container (vor Slider, Content-Spalte) ---------- */
/* ---------- Index-Headline: Padding unten zum Sommer-Container ---------- */
.content-home .index-headline {
    padding-bottom: 20px;
    margin-bottom: 0;
}

.sommer-gruss {
    background: linear-gradient(135deg, #fffdf0 0%, #ffffff 100%);
    border: 2px solid var(--accent);
    border-radius: 18px;
    margin-bottom: 40px;
    box-shadow: 0 4px 20px rgba(255,215,0,0.15);
    overflow: hidden;
    container-type: inline-size;   /* Baustein = eigener Layout-Kontext (Bild/Text-Umbruch reagiert auf Baustein-Breite, nicht Viewport) */
}
.sommer-gruss-inner {
    display: flex;
    flex-direction: column;
    gap: 28px;
    align-items: center;
    padding: 24px 28px;
}
.sommer-bild {
    flex-shrink: 0;
    width: 100%;
    height: 133px;
}
.sommer-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.10);
}
.sommer-text {
    flex: 1;
    min-width: 0;
}
.sommer-text h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 1.4rem;
    color: var(--brand);
    margin-top: 0;
    line-height: 1.2;   /* weniger Leading → Überschrift bündig mit der Bildoberkante (Side-by-side) */
    margin-bottom: 12px;
}
.sommer-text p {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text);
    margin-bottom: 8px;
}
.sommer-text .sommer-signatur {
    margin-top: 14px;
    font-size: 0.95rem;
    color: var(--brand);
    line-height: 1.5;
}
.sommer-text .sommer-name {
    font-family: 'CoventryGarden', serif;
    font-size: 1.5rem;
    color: var(--brand);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Sommer-Baustein: sobald der Baustein selbst breit genug ist → Bild + Text nebeneinander.
   Container-Query (nicht Viewport) → wirkt unabhängig von Fensterbreite/Zoom/Sidebar. */
@container (min-width: 640px) {
    .sommer-gruss-inner {
        flex-direction: row;
        align-items: flex-start;
    }
    .sommer-gruss.invert .sommer-gruss-inner {
        flex-direction: row-reverse;   /* Text links, Bild rechts */
    }
    .sommer-bild {
        width: 346px;
        height: 231px;
        flex-shrink: 0;
    }
    .sommer-bild img {
        height: 100%;
        object-fit: cover;
    }
}

/* Sommer-Container: unter 700px Bild über Text */
@media (max-width: 700px) {
    .sommer-gruss-inner {
        flex-direction: column;
        gap: 18px;
        padding: 18px 16px;
    }
    .sommer-bild {
        width: 100%;
        height: 160px;
    }
    .sommer-text h2 {
        font-size: 1.2rem;
    }
}

/* ===== Impressum: DIGITAL-CONNECTOR Credit-Box ===== */
.dc-credit-box {
    border: 2px solid #e30613;
    border-radius: 8px;
    padding: 16px 20px;
    margin-top: 10px;
    text-align: center;
    font-size: 0.95rem;
    color: #444;
}
.dc-credit-box p {
    margin-bottom: 0;
}
.dc-credit-box a {
    color: #e30613;
    text-decoration: none;
    font-weight: 600;
}
.dc-credit-box a:hover {
    text-decoration: underline;
}

/* ---------- Premium Partner Box (Referenzenseite) ---------- */
/* ---------- Über-mich: Leitsätze, Boxen, Listen ---------- */
.leitsaetze-box {
    background: var(--brand);
    color: #ffffff;
    text-align: center;
    border: none;
    border-left: 5px solid var(--accent);
    padding: 24px 28px;
}
.leitsatz-header {
    color: var(--accent);
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 10px;
}
.leitsatz-text {
    font-style: italic;
    font-size: 1.0rem;
    margin-bottom: 4px;
}
.leitsatz-trenner {
    color: var(--accent);
    font-weight: bold;
    margin: 8px 0;
}
.leitsatz-hr {
    border-color: var(--accent);
    margin: 12px auto;
    max-width: 60%;
}
.leitsatz-bold-gold {
    font-weight: bold;
    color: var(--accent);
    margin-top: 4px;
}
.leitsatz-akzent {
    display: inline-block;
    background: var(--accent);
    color: #004400;
    font-weight: bold;
    padding: 4px 16px;
    border-radius: 4px;
    margin-top: 6px;
}
.leitsatz-normal {
    color: #ffffff;
}
/* Leitsätze + Profilbild nebeneinander */
.leitsaetze-row {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    margin: 18px 0 24px 0;
}
.leitsaetze-box {
    flex: 1;
    min-width: 0;
    margin: 0;
}
.leitsaetze-profilbild {
    flex-shrink: 0;
    width: 200px;
}
.leitsaetze-profilbild img {
    width: 100%;
    height: auto;
    border-radius: 50%;
    border: 3px solid var(--accent);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
@media (max-width: 800px) {
    .leitsaetze-row {
        flex-direction: column;
        align-items: center;
    }
    .leitsaetze-profilbild {
        width: 160px;
    }
}


/* Leitsätze mit Profilbild IN der grünen Box */
.leitsaetze-mit-profil .leitsaetze-inhalt {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}
.leitsaetze-mit-profil .leitsaetze-text {
    flex: 1;
    min-width: 0;
}
.leitsaetze-profilbild-inbox {
    flex-shrink: 0;
    width: 200px;
}
.leitsaetze-profilbild-inbox img,
img.profilbild-abgerundet {
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 3px solid var(--accent);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
@media (max-width: 800px) {
    .leitsaetze-mit-profil .leitsaetze-inhalt {
        flex-direction: column;
        align-items: center;
    }
    .leitsaetze-profilbild-inbox {
        width: 160px;
    }
}

/* Über-mich: 2er-Raster ab >1280px (alles außer Leitsätze) */
@media (min-width: 1281px) {
    .ueber-mich-grid-2col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 28px;
        align-items: start;
    }
    .ueber-mich-grid-2col > .grid-fullwidth {
        grid-column: 1 / -1;
    }
    .ueber-mich-grid-2col h2.grid-fullwidth {
        margin-top: 16px;
    }
}
.sylvias-welt-box {
    background: var(--brand);
    text-align: center;
    border: none;
    border-left: 5px solid var(--accent);
    padding: 14px 20px;
}
.sylvias-welt-box a {
    color: var(--accent);
    font-weight: bold;
    font-size: 1.0rem;
    text-decoration: underline;
}
.sylvias-welt-box a:hover {
    color: #ffffff;
}

/* Ebene2-Listen in Über-mich (geschachtelte sub-ul) */
.ueber-mich-liste li {
    margin-bottom: 12px;
}
.ueber-mich-liste li ul.ebene2 {
    list-style: disc;
    padding-left: 20px;
    margin-top: 4px;
    margin-bottom: 0;
}
.ueber-mich-liste li ul.ebene2 li {
    margin-bottom: 2px;
    padding-left: 0;
    font-size: 0.92rem;
    color: #444;
}
.ueber-mich-liste li ul.ebene2 li::before {
    content: none;
}

/* Generische Ebene2-Listen (auch außerhalb ueber-mich) */
ul.ebene2 {
    list-style: disc;
    padding-left: 20px;
    margin-top: 4px;
    margin-bottom: 0;
}
ul.ebene2 li {
    margin-bottom: 2px;
    padding-left: 0;
    font-size: 0.92rem;
    color: #444;
}
ul.ebene2 li::before {
    content: none;
}

/* Section-Header (grün, gold) */
.section-header-box {
    background: var(--brand);
    color: var(--accent);
    text-align: center;
    font-weight: bold;
    border: none;
    border-left: 5px solid var(--accent);
    padding: 14px 20px;
    font-size: 1.0rem;
}

.leistung-schwerpunkt {
    font-weight: bold;
    margin-bottom: 8px;
}

.hinweis-klein {
    font-size: 0.8em;
    color: #cc0000;
}

/* Abschluss-Box (grün, gold) */
.kontakt-abschluss-box {
    background: var(--brand);
    color: #ffffff;
    text-align: center;
    border: none;
    border-left: 5px solid var(--accent);
    padding: 20px 24px;
}
.abschluss-titel {
    font-weight: bold;
    color: var(--accent);
    font-size: 1.05rem;
    margin-bottom: 8px;
}
.abschluss-kontakt {
    color: #ffffff;
    font-size: 0.95rem;
}
.abschluss-kontakt a {
    color: var(--accent);
    font-weight: bold;
}
.abschluss-kontakt a:hover {
    color: #ffffff;
}

/* Schwerpunkt-Innenbox (Was kann ich für Sie tun?) */
.schwerpunkt-innen-box {
    background: #fafaf7;
    border: 1px solid var(--muted);
    border-left: 4px solid var(--accent);
    border-radius: 10px;
    padding: 14px 20px;
    margin-top: 4px;
}

/* Platzhalter-Bild (für lokale Entwicklung) */
.ph-placeholder {
    background: linear-gradient(135deg, #e8e5dc 0%, #d5d0c5 100%);
    border: 1px dashed var(--muted);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--brand);
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 0.85rem;
}

.premium-partner-box {
    background: #ffffff;
    border: 2px solid var(--muted);
    border-radius: 16px;
    padding: 28px;
    margin-bottom: 28px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.06);
}
.premium-partner-grid {
    display: flex;
    gap: 28px;
    align-items: center;
}
.premium-partner-logo {
    flex-shrink: 0;
    width: 284px;
    max-width: 100%;
}
.premium-partner-text {
    flex: 1;
    min-width: 0;
}
.premium-partner-text p {
    font-size: 1.0rem;
    line-height: 1.4;
    color: var(--text);
}
.premium-partner-urkunden {
    flex-shrink: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: right;
}
.premium-partner-urkunden a {
    color: var(--brand);
    text-decoration: underline !important;
    text-underline-offset: 2px;
    display: inline-block;
}
.premium-partner-urkunden a:hover {
    color: var(--accent);
}
/* Premium-Partner-Urkunden: Links UNTEREINANDER (Default-Block), Logo kompakter bei 801-1200px */
@media (min-width: 1201px) {
    .premium-partner-urkunden a {
        display: block;
    }
}
/* Premium-Partner: bei schmalem 3-Spalten-Layout (801-1200px) kompakter, Links untereinander */
@media (max-width: 1200px) and (min-width: 801px) {
    .premium-partner-grid {
        gap: 18px;
    }
    .premium-partner-logo {
        width: 160px;
        max-width: 100%;
    }
    .premium-partner-logo img {
        max-width: 160px !important;
        width: auto;
    }
    .premium-partner-urkunden a {
        display: block;
    }
}
@media (max-width: 800px) {
    .premium-partner-grid {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .premium-partner-urkunden {
        text-align: center;
    }
    .premium-partner-urkunden a {
        display: inline-block;
        margin-right: 0;
    }
}


/* ============================================================
   Premium-Partner — Zwei-Box-Layout (Medaillen | PDF-Urkunden)
   ============================================================ */
.premium-partner-headline {
    color: var(--brand);
    font-size: 1.3rem;
    line-height: 1.3;
    margin: 0 0 22px;
    text-align: left;
}
.premium-partner-2col {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}
/* Linke Box: Medaillen-Thumbs, flex mit Umbruch, einheitliches Abstandsraster */
.pp-medaillen-box { flex: 1 1 auto; min-width: 0; }
.pp-medaillen-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: flex-start;
}
.pp-medaille {
    display: block;
    line-height: 0;
    border-radius: 8px;
    overflow: hidden;
    cursor: zoom-in;
    transition: transform .15s ease, box-shadow .15s ease;
}
.pp-medaille img {
    height: 187px;                 /* Desktop-Thumb-Höhe — 1/3 kleiner (war 280px) */
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
}
.pp-medaille:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.pp-empty { color: var(--muted); font-style: italic; margin: 0; }
/* Rechte Box: PDF-Urkunden als Buttons untereinander (auch Desktop) */
.pp-urkunden-box {
    flex: 0 0 auto;
    width: 280px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pp-urkunde-btn {
    display: block;
    background: var(--brand);              /* Grün (Brand) */
    border: 1px solid var(--brand-dark);   /* Grün dunkel (Hover) */
    border-radius: 10px;
    color: #fff !important;
    text-decoration: none !important;
    padding: 12px 18px;
    font-size: 0.95rem;
    font-weight: 500;
    text-align: center;
    transition: filter .15s ease;
}
.pp-urkunde-btn:hover {
    filter: brightness(1.12);
    color: #fff !important;
}
@media (max-width: 900px) {
    .premium-partner-2col { flex-direction: column; }
    .pp-urkunden-box { width: 100%; }
}
@media (max-width: 600px) {
    .pp-medaille img { height: 120px; }
    .pp-medaillen-flex { gap: 12px; }
}

/* Fancybox-Galerie im Frontend: Gold-Akzent (var(--accent)) statt Blau/Rot.
   Höhere Spezifität (html body …) schlägt das aic-fancybox.js-Theme-Override. */
html body .fancybox-button:hover,
html body .fancybox-navigation .fancybox-button:hover { color: var(--accent) !important; }
html body .fancybox-button--thumbs:hover,
html body .fancybox-show-thumbs .fancybox-button--thumbs { color: var(--accent) !important; }
html body .fancybox-progress { background: var(--accent) !important; }
html body .fancybox-thumbs__list a:before { border-color: var(--accent) !important; }
html body .fancybox-thumbs__list a.fancybox-thumbs-active:before { border-color: var(--accent) !important; }

/* ============================================================
   Anleitungen & Geschichten — Zebrastreifen-Raster
   ============================================================ */
.geschichten-container {
    margin: 24px 0;
}
.geschichten-eintrag {
    padding: 24px 28px;
    border-radius: 0;
    border: none;
    border-bottom: 2px solid var(--brand);
}
.geschichten-eintrag:nth-child(odd) {
    background-color: #fafaf7;
}
.geschichten-eintrag:nth-child(even) {
    background-color: #f0efe8;
}
.geschichten-eintrag:last-child {
    border-bottom: none;
    border-radius: 0 0 12px 12px;
}
.geschichten-eintrag:first-child {
    border-radius: 12px 12px 0 0;
}
.geschichten-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 16px;
}
.geschichten-nr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--brand);
    color: var(--accent);
    font-weight: bold;
    font-size: 0.9rem;
    border-radius: 50%;
    flex-shrink: 0;
}
.geschichten-header h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 1.2rem;
    color: var(--brand);
    margin: 0;
    padding: 0;
    border: none;
}
.geschichten-body {
    padding-left: 44px;
}
.geschichten-body p {
    font-size: 0.95rem;
    line-height: 1.55;
    margin-bottom: 10px;
    color: var(--text);
}
.geschichten-body strong {
    color: var(--brand);
}
.geschichten-body em {
    color: #666;
}
.geschichten-liste {
    list-style: decimal;
    padding-left: 24px;
    margin: 12px 0;
}
.geschichten-liste li {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 8px;
    padding-left: 4px;
    color: var(--text);
}
.geschichten-liste li::before {
    content: none;
}
.btn-pdf {
    display: inline-block;
    background: var(--accent);
    color: var(--text);
    padding: 10px 22px;
    border-radius: 8px;
    font-weight: 400;
    font-size: 0.93rem;
    transition: background 0.2s, transform 0.15s;
    box-shadow: 0 3px 10px rgba(255,215,0,0.3);
    text-decoration: none;
}
.btn-pdf:hover {
    background: var(--accent-dark);
    transform: translateY(-1px);
    color: var(--text);
}
.geschichten-pdf {
    margin-top: 16px;
}

.bewertung {
    background: #ffffff;
    border: 1px solid var(--muted);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    padding: 10px 16px;
    margin-bottom: 10px;
}
.bewertung p {
    margin-bottom: 0;
    font-size: 0.93rem;
}
.bewertung strong {
    color: var(--brand);
}

@media (max-width: 800px) {
    .geschichten-eintrag {
        padding: 18px 16px;
    }
    .geschichten-body {
        padding-left: 0;
    }
    .geschichten-header {
        flex-wrap: wrap;
    }
    .geschichten-header h2 {
        font-size: 1.05rem;
    }
}

/* Urkunden-Medaillen (Referenzen-Seite) */
.urkunden-medaillen {
            width: 284px;
    height: auto;
    max-width: 100%;
}

/* ========================================================================
   Gewerbeobjekte — Übersichts-Zeilen + Objekt-Detailseite (Slider/Eckdaten/Bloecke)
   ======================================================================== */

/* --- Übersicht: Objekt-Zeilen (klickbare Karten) --- */
.objekt-liste { display: flex; flex-direction: column; gap: 18px; margin-top: 8px; }
.objekt-row {
    display: flex; align-items: stretch; gap: 20px;
    background: #fff; border: 1px solid var(--muted, #e2e6ea); border-radius: 12px;
    padding: 16px 18px; text-decoration: none; color: inherit;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.objekt-row:hover { box-shadow: 0 6px 20px rgba(0,0,0,.09); border-color: var(--brand, #006600); transform: translateY(-2px); }
.objekt-row-bild { flex: 0 0 240px; max-width: 240px; }
.objekt-row-bild img { width: 100%; height: 160px; object-fit: cover; border-radius: 8px; display: block; }
.objekt-row-main { flex: 1 1 auto; min-width: 0; }
.objekt-row-nr { font-size: 0.8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--brand, #006600); font-weight: 600; margin: 0 0 2px; }
.objekt-row-titel { font-size: 1.15rem; margin: 0 0 4px; }
.objekt-row-sub { font-size: 0.92rem; color: #5a6b7b; margin: 0 0 10px; }
.objekt-row-fakten { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 26px; }
.objekt-row-fakten li { display: flex; flex-direction: column; }
.objekt-row-fakten .of-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .03em; color: #8a95a1; }
.objekt-row-fakten .of-wert { font-size: 0.98rem; font-weight: 600; color: var(--text, #333); }
.objekt-detail-btn {
    align-self: flex-start; flex: 0 0 auto; white-space: nowrap;
    background: var(--brand, #006600); color: #fff; border-radius: 10px;
    padding: 11px 22px; font-size: 0.95rem; font-weight: 500;
}
.objekt-row:hover .objekt-detail-btn { filter: brightness(1.08); }
.objekt-leer { color: #5a6b7b; }

/* --- Detailseite --- */
/* Zurück-Button = grüner Webstyle-Button (.ref-link-btn), dynamisch aus --btn-green-*.
   .content-subpage a färbt Links grün (Spezifität 0,1,1) und würde so den Button-Text
   grün-auf-grün setzen. a.ref-link-btn (gleiche Spezifität, danach im File) gewinnt:
   weisser Text, gelber Hover. */
a.ref-link-btn { color: var(--btn-green-fg, #ffffff); text-decoration: none; }
a.ref-link-btn:hover { color: var(--btn-green-fg-h, var(--accent)); }
/* .content-subpage p (0,1,1) setzt margin-bottom:14px → hier hoehere Spezifitaet, sonst greift der Abstand nicht. */
.objekt-detail .objekt-back-top { margin: 2px 0 36px; }
.objekt-detail .objekt-back-unten { margin-top: 34px; }
.objekt-kopf { margin: 10px 0 18px; }
.objekt-kopf-nr { font-size: 0.8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--brand, #006600); font-weight: 600; margin: 0 0 2px; }
.objekt-kopf h1 { margin: 0 0 6px; }
.objekt-kopf-sub { font-size: 1.02rem; color: #5a6b7b; margin: 0; }

/* Voller Bild-Slider (graue Outline wie der Index-Slider) */
.objekt-slider { position: relative; overflow: hidden; width: 100%; border: 2px solid var(--muted); border-radius: 16px; box-shadow: 0 6px 24px rgba(0,0,0,0.10); background: #fff; margin-bottom: 26px; }
.objekt-slider-track { display: flex; transition: transform .4s ease; }
.objekt-slide { flex: 0 0 100%; display: block; }
.objekt-slide img { width: 100%; height: clamp(260px, 46vw, 540px); object-fit: contain; background: #eef0f2; display: block; cursor: zoom-in; }
.objekt-slider-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border: none; border-radius: 50%;
    background: rgba(0,0,0,.45); color: #fff; font-size: 20px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: background .15s ease;
}
.objekt-slider-arrow:hover { background: rgba(0,0,0,.7); }
.objekt-slider-arrow.prev { left: 12px; }
.objekt-slider-arrow.next { right: 12px; }
.objekt-slider-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 8px; }
.objekt-slider-dot { width: 11px; height: 11px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: rgba(255,255,255,.35); cursor: pointer; box-shadow: 0 0 3px rgba(0,0,0,.4); }
.objekt-slider-dot.active { background: #fff; }
.objekt-slider-leer { background: #f3f5f7; border: 1px dashed #c8d0d8; border-radius: 12px; padding: 40px 20px; text-align: center; color: #7a8794; margin-bottom: 26px; }

/* Eckdaten */
.objekt-eckdaten { margin-bottom: 44px; }
.objekt-eckdaten h2 { margin: 0 0 12px; }
/* Tabellen-Look ueber 1px-Gap auf grauem Container (duenne Trennlinien). Die letzte Reihe wird per JS
   mit leeren Zellen (.is-filler) im selben Stil aufgefuellt → keine grauen Luecken, alles weiss + Raster. */
.objekt-eckdaten-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1px; background: var(--muted, #e2e6ea); border: 1px solid var(--muted, #e2e6ea); border-radius: 10px; overflow: hidden; margin: 0; }
.objekt-eck-item { background: #fff; padding: 10px 14px; }
.objekt-eck-item.is-filler { padding: 0; }
.objekt-eck-item dt { font-size: 0.74rem; text-transform: uppercase; letter-spacing: .03em; color: #8a95a1; margin: 0 0 2px; }
.objekt-eck-item dd { margin: 0; font-size: 0.98rem; font-weight: 600; color: var(--text, #333); }

/* Beschreibungs-Bloecke: Impressum-Muster (H2 vor .info-card, 2er-Raster via .subpage-two-col).
   Enger Abstand H2 zur Box (Zugehörigkeit); im Box-Text Absaetze/Listen luftig trennen. */
.objekt-bloecke { margin-top: 6px; }
.objekt-bloecke .subpage-col h2 { margin: 0 0 12px; }
.objekt-bloecke .info-card { margin: 0 0 26px; line-height: 1.6; }
.objekt-bloecke .info-card p { margin: 0 0 12px; }
.objekt-bloecke .info-card .objekt-lead { margin-bottom: 1.1em; }  /* Leerzeile nach Lead-Zeile vor der Liste */
.objekt-bloecke .info-card ul,
.objekt-bloecke .info-card ol { margin: 0 0 16px; }   /* beide Listenarten gleicher Abstand */

/* Zwischen-Überschriften in den Objekt-Blöcken: fett + Primärgrün — das ersetzt die
   Unterstreichungen aus der alten Website. Getroffen wird NUR Text, der die Markenfarbe
   ausdrücklich als Inline-Farbe trägt (so erzeugt es der Editor, wenn man Grün aus der
   Palette wählt und fett setzt). Damit bleibt normaler `<strong>`-Fließtext unverändert —
   sonst würden ganze Absätze mit vorhandener Hervorhebung plötzlich schwer fett.
   Warum überhaupt eine Regel: `.content-subpage strong` setzt zwar `font-weight: 500`,
   das bleibt aber wirkungslos, weil die Webstyle-Schriften je Schnitt eine EIGENE Familie
   sind ('ws-Roboto-Regular', 'ws-Roboto-Bold') und die Regular-Familie keinen 500er-Schnitt
   hat. Darum den Bold-Schnitt direkt ansprechen; `font-weight: 700` greift als Reserve,
   falls die Schriftdatei fehlt (dann verfettet der Browser selbst).
   Beide Farb-Schreibweisen abgedeckt, weil Editoren zwischen Hex und rgb() wechseln. */
.objekt-bloecke .info-card span[style*="006600"] strong,
.objekt-bloecke .info-card span[style*="0, 102, 0"] strong,
.objekt-bloecke .info-card strong span[style*="006600"],
.objekt-bloecke .info-card strong span[style*="0, 102, 0"] {
    font-family: 'ws-Roboto-Bold', var(--font-text), sans-serif;
    font-weight: 700;
    color: var(--brand);
}
.objekt-bloecke .info-card > :last-child { margin-bottom: 0; }

/* PDF-Anlagen (gelbe Buttons wie AGB-Seite) */
.objekt-pdfs { margin: 6px 0 8px; }
.objekt-pdfs h2 { margin: 0 0 12px; }

@media (max-width: 700px) {
    .objekt-row { flex-direction: column; gap: 12px; }
    .objekt-row-bild { flex-basis: auto; max-width: 100%; }
    .objekt-row-bild img { height: 200px; }
    .objekt-detail-btn { align-self: stretch; text-align: center; }
}

/* CMS-Objekt-Slider: Layout wie der Index-Baustein davor, nur mit breiterem Bild. */
.slider-cms .slider-wrapper {
    container-type: inline-size;
}
.slider-cms .slider-slide {
    display: flex;
    flex-direction: column;
    gap: 28px;
    align-items: stretch;
    padding: 24px 28px;
}
.slider-cms .slider-slide > img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    flex: 0 0 auto;
}
.slider-cms .slide-text {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    row-gap: 12px;
    align-items: start;
    margin-top: 0;
}
.slider-cms .slide-text .slide-label {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    justify-self: end;
}
.slider-cms .slide-text h3 {
    grid-column: 1;
    grid-row: 1;
    display: block;
    flex: none;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 1.3rem !important;
    line-height: 1.2 !important;
    color: var(--brand);
}
.slider-cms .slide-text h3 * {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}
.slider-cms .slide-text .slide-body {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
}
.slider-cms .slide-body p,
.slider-cms .slide-body div {
    margin: 0 0 8px;
}
.slider-cms .slide-body ul {
    list-style: none;
    padding-left: 0;
    margin: 12px 0 20px 0;
}
.slider-cms .slide-body ul li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 8px;
    line-height: 1.4;
    font-size: 0.95rem;
}
.slider-cms .slide-body ul li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: calc(0.7em - 4px);
    width: 8px;
    height: 8px;
    background: var(--brand);
    border-radius: 50%;
}
.slider-cms .slide-body ol {
    list-style: none;
    padding-left: 0;
    margin: 12px 0 20px 0;
    counter-reset: aic-liste;
}
.slider-cms .slide-body ol li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 8px;
    line-height: 1.4;
    font-size: 0.95rem;
    counter-increment: aic-liste;
}
.slider-cms .slide-body ol li::before {
    content: counter(aic-liste) '.';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--brand);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

/* Zentraler WYSIWYG-Textfluss: gilt für alle Frontend-Flächen, die HTML aus dem Editor rendern.
   Enter = neuer Absatz mit definiertem Abstand; Shift+Enter = normale neue Zeile ohne Zusatzabstand. */
.sommer-text,
.slider-cms .slide-body,
.content-subpage,
.content-page .info-card,
.objekt-bloecke .info-card,
.geschichten-body,
.premium-partner-text,
.paragraf-list {
    --wys-line-height: 1.45;
    --wys-paragraph-gap: .55em;
}
.sommer-text p,
.sommer-text div:not([style*="height"]),
.slider-cms .slide-body p,
.slider-cms .slide-body div:not([style*="height"]),
.content-subpage p,
.content-subpage div.info-card p,
.content-page .info-card p,
.objekt-bloecke .info-card p,
.objekt-bloecke .info-card div:not([style*="height"]),
.geschichten-body p,
.premium-partner-text p,
.paragraf-list p {
    line-height: var(--wys-line-height);
    margin-top: 0;
    margin-bottom: var(--wys-paragraph-gap);
}
.sommer-text li,
.slider-cms .slide-body li,
.content-subpage li,
.content-page .info-card li,
.objekt-bloecke .info-card li,
.geschichten-body li,
.premium-partner-text li,
.paragraf-list li {
    line-height: var(--wys-line-height);
    margin-bottom: .35em;
}
.sommer-text ul,
.sommer-text ol,
.slider-cms .slide-body ul,
.slider-cms .slide-body ol,
.content-subpage ul,
.content-subpage ol,
.content-page .info-card ul,
.content-page .info-card ol,
.objekt-bloecke .info-card ul,
.objekt-bloecke .info-card ol,
.geschichten-body ul,
.geschichten-body ol,
.premium-partner-text ul,
.premium-partner-text ol,
.paragraf-list ul,
.paragraf-list ol {
    line-height: var(--wys-line-height);
    margin-top: .65em;
    margin-bottom: .9em;
}
.sommer-text p:last-child,
.sommer-text div:not([style*="height"]):last-child,
.slider-cms .slide-body p:last-child,
.slider-cms .slide-body div:not([style*="height"]):last-child,
.content-subpage p:last-child,
.content-subpage div.info-card p:last-child,
.content-page .info-card p:last-child,
.objekt-bloecke .info-card p:last-child,
.objekt-bloecke .info-card div:not([style*="height"]):last-child,
.geschichten-body p:last-child,
.premium-partner-text p:last-child,
.paragraf-list p:last-child {
    margin-bottom: 0;
}
.sommer-text br,
.slider-cms .slide-body br,
.content-subpage br,
.content-page .info-card br,
.objekt-bloecke .info-card br,
.geschichten-body br,
.premium-partner-text br,
.paragraf-list br {
    line-height: inherit;
}

@container (min-width: 640px) {
    .slider-cms .slider-slide {
        flex-direction: row;
        align-items: flex-start;
    }
    .slider-cms .slider-slide > img {
        width: 346px;
        height: 260px;
        object-fit: cover;
    }
}

@media (max-width: 700px) {
    .slider-cms .slider-slide {
        gap: 18px;
        padding: 18px 16px;
    }
    .slider-cms .slider-slide > img {
        width: 100%;
        height: 240px;
        object-fit: cover;
    }
    .slider-cms .slide-text h3 {
        font-size: 1.2rem !important;
    }
}

@media (max-width: 480px) {
    .slider-cms .slider-slide > img {
        height: 215px;
    }
}