/* ============================================================
   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;
}
/* „* Pflichtfeld" — erklärt die Sternchen an Name, E-Mail, Nachricht und am
   Datenschutz-Haken. Farbgebung wie beim Untertitel, weil dasselbe Formular auf
   hellem UND auf dunklem Grund steht (Spalte 2 bzw. volle Breite). */
.contact-form-section .form-pflicht {
    color: #666;
    font-size: 0.85rem;   /* wie der Datenschutz-Text darüber, den er erklärt */
    font-weight: 400;
    margin: 2px 0 10px;
}
.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;
}
/* ---------- Sicherheitscode (Captcha) ----------
   Bild und Eingabefeld nebeneinander, auf schmalen Geräten untereinander. Das Bild kommt vom
   eigenen Server (captcha.php) und hat feste 190×60 Pixel — es wird NICHT skaliert, verzerrte
   Zeichen werden durch Skalieren nur schlechter lesbar. */
.captcha-zeile {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.captcha-zeile img {
    flex: 0 0 auto;
    border: 2px solid #e0ddd5;
    border-radius: 10px;
    background: #fff;
    display: block;
}
.captcha-zeile input {
    flex: 1 1 160px;
    max-width: 220px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-size: 1.1rem;
}
.captcha-hinweis {
    color: #666;
    font-size: 0.85rem;
    font-weight: 400;
    margin: 8px 0 0;
    line-height: 1.45;
}
/* Welches Feld die Meldung meint — Text allein zwingt zum Suchen, gerade wenn das Formular
   länger ist als das Sichtfeld. Gilt in beiden Fassungen (heller und dunkler Grund). */
.form-group.fehlt input,
.form-group.fehlt textarea,
.form-group.fehlt .captcha-zeile input {
    border-color: #e57373;
    background: rgba(229, 115, 115, .08);
}

.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,
#main-content .contact-form-section .form-pflicht,
#main-content .contact-form-section .captcha-hinweis {
    color: #ccc;
}
/* Der Rahmen des Captcha-Bildes folgt den Feldern daneben — auf dunklem Grund also grau
   statt beige. Das Bild selbst bleibt weiss; dunkle Zeichen auf hellem Grund sind der
   Grund, warum es überhaupt lesbar ist. */
#main-content .contact-form-section .captcha-zeile img {
    border-color: #555;
}
#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,
.contact-form-fullwidth .contact-form-section .form-pflicht,
.contact-form-fullwidth .contact-form-section .captcha-hinweis {
    color: #ccc;
}
.contact-form-fullwidth .contact-form-section .captcha-zeile img {
    border-color: #555;
}
.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; }

/* ---------- Rückmeldung des Kontaktformulars ----------
   Erscheint nach dem Absenden über dem Formular. Das Formular steht auf der Startseite in
   zwei Fassungen (Spalte 2 und volle Breite) — die Regeln gelten deshalb für beide. */
.form-hinweis {
    margin: 0 0 16px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.95rem;
    line-height: 1.5;
}
/* Erfolg ist GRÜN, nicht Gold. Gold ist die Hervorhebungsfarbe der Seite und
   steht an vielen Stellen — eine Erfolgsmeldung in derselben Farbe liest sich
   wie ein weiteres Gestaltungselement. Wer gerade abgeschickt hat, soll auf
   einen Blick sehen, dass es geklappt hat, ohne den Text lesen zu müssen. */
.form-hinweis-gut {
    background: rgba(40, 167, 69, .14);
    border: 1px solid #35c25a;
    color: #7ee29a;
    font-weight: 600;
}
.form-hinweis-fehl {
    background: rgba(198, 40, 40, .15);
    border: 1px solid #e57373;
    color: #ffb4b4;
}

/* ---------- Rechtstext-Popup (Datenschutz-Link im Kontaktformular) ----------
   Eigenes Popup, bewusst OHNE Fancybox. Fancybox ist eine Bilder-Galerie und fängt Mausrad
   und Wischen ab, um zu blättern — beim langen Rechtstext liess sich die Bildlaufleiste
   dadurch nur noch ziehen, Rad und Wischen taten nichts. In den Slidern arbeitet Fancybox
   richtig und bleibt deshalb unangetastet. Hier scrollt schlicht der Browser: ein Kasten mit
   `overflow-y: auto`, sonst nichts. */
.seiten-popup {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0, 0, 0, .62);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 12px;
}
.seiten-popup-karte {
    position: relative;
    background: #fff;
    border-radius: 12px;
    padding: 26px 26px 26px 24px;
    width: 100%;
    max-width: 860px;
    max-height: 100%;
    overflow-y: auto;
    /* Schwung beim Wischen auf älteren iOS-Geräten — ohne das ruckelt es im Kasten. */
    -webkit-overflow-scrolling: touch;
    /* Am Ende des Textes soll NICHT die Seite dahinter weiterlaufen. Ohne diese Zeile
       reicht der Browser den Rest der Bewegung nach außen weiter (Scroll-Verkettung) —
       man landet unversehens wieder in der Seite, obwohl das Popup offen ist. */
    overscroll-behavior: contain;
    text-align: left;
    color: var(--text);
}
.seiten-popup-karte:focus { outline: none; }
.seiten-popup-karte > h1 { margin-top: 0; padding-right: 44px; }
/* Der Rechtstext bringt das zweispaltige Raster der Unterseite mit. Im Popup ist dafür
   kein Platz — eine Spalte liest sich dort besser, auf jeder Fenstergröße. */
.seiten-popup-karte .subpage-two-col,
.seiten-popup-karte .subpage-split { column-count: 1; columns: auto; }
.seiten-popup-zu {
    position: sticky;          /* bleibt beim Scrollen erreichbar */
    top: 0;
    float: right;
    margin: -8px -8px 0 12px;
    width: 38px; height: 38px;
    border: 1px solid var(--muted, #ddd);
    border-radius: 8px;
    background: #fff;
    color: var(--brand);
    font-size: 26px; line-height: 1;
    cursor: pointer;
    transition: background .18s ease;
}
.seiten-popup-zu:hover { background: rgba(0, 0, 0, .07); }
/* Seite dahinter stillstellen, solange das Popup offen ist */
body.popup-offen { overflow: hidden; }
@media (max-width: 700px) {
    .seiten-popup { padding: 16px 8px; }
    .seiten-popup-karte { padding: 20px 16px; }
}

/* ============================================================
   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;
    /* Alle Slides sind gleich hoch, der Text ist es nicht. Der uebrige Platz muss NACH UNTEN
       fallen. Ohne diese Zeile verteilt CSS ihn gleichmaessig auf beide Rasterzeilen, also zur
       Haelfte zwischen Ueberschrift und Text — bei kurzen Texten klaffte dort eine Luecke von
       bis zu 72px, bei langen fast keine. Genau das sah nach einem "zufaelligen" Fehler aus. */
    align-content: 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;
}
/* WICHTIG: Jeder Textbehälter braucht BEIDE Varianten — `p` UND `div`. Der Editor liefert je nach
   Eingabe mal Absätze, mal div-Blöcke (z. B. bei eingefügtem Text). Fehlte die div-Variante, bekam
   der Block keinen Abstand: im Editor sah es getrennt aus, auf der Website klebte der Text am
   vorherigen. Genau diese Lücke gab es bei content-page/.info-card, geschichten-body,
   premium-partner-text und paragraf-list.
   `.content-subpage` bekommt BEWUSST keine allgemeine div-Regel — das ist die Seiten-Hülle, dort
   liegen Struktur-Wrapper (Spalten, Karten). Sein Editor-Inhalt steckt in `.info-card`
   bzw. `.paragraf-list`, die beide unten aufgeführt sind.
   Prüfseite dazu: AIC-Workspace/Temp/probe_container_abdeckung.php */
.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 .info-card div:not([style*="height"]),
.content-page .info-card p,
.content-page .info-card div:not([style*="height"]),
.objekt-bloecke .info-card p,
.objekt-bloecke .info-card div:not([style*="height"]),
.geschichten-body p,
.geschichten-body div:not([style*="height"]),
.premium-partner-text p,
.premium-partner-text div:not([style*="height"]),
.paragraf-list p,
.paragraf-list div:not([style*="height"]) {
    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;
}
/* Letzter Block ohne Nachlauf — dieselbe Liste wie oben, sonst entsteht unten ein toter Rand. */
.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 .info-card div:not([style*="height"]):last-child,
.content-page .info-card p:last-child,
.content-page .info-card div:not([style*="height"]):last-child,
.objekt-bloecke .info-card p:last-child,
.objekt-bloecke .info-card div:not([style*="height"]):last-child,
.geschichten-body p:last-child,
.geschichten-body div:not([style*="height"]):last-child,
.premium-partner-text p:last-child,
.premium-partner-text div:not([style*="height"]):last-child,
.paragraf-list p:last-child,
.paragraf-list div:not([style*="height"]):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;
}
/* HINWEIS für später: Eine Leerzeile aus zwei Umbrüchen (<br><br>) lässt sich per CSS NICHT
   höher machen. Ihre Höhe kommt vom Strut des Absatzes (Schriftgrösse x Zeilenhöhe), nicht vom
   <br>. Gemessen und verworfen wurden: line-height auf `br + br`, `display:block` mit height,
   `display:block` mit margin-top und `::after` mit Leerzeichen — alle vier ohne jede Wirkung
   (Testseite: AIC-Workspace/Temp/probe_leerzeile_varianten.php).
   Wer mehr Luft will, nimmt einen echten leeren Absatz oder den Spacer im Editor. */

@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;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE + TABLET — Bedienbarkeit mit dem Finger (≤1023px)
   Desktop bleibt unverändert: alles hier steht ausschließlich in dieser Query.
   1023px ist die im Projekt etablierte Nicht-Desktop-Linie (ab hier greift auch
   das Burger-Menü) — kein neuer Breakpoint.
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {

    /* — Maklerin-Box: Daten brauchen Platz, Foto bleibt rechts —
       `#right-sidebar` ist hier ein Grid. Die Foto-Spalte hatte eine MINDESTbreite
       von 120px, die Daten-Spalte nur `minmax(0,1fr)` — also den Rest. Gemessen auf
       390px: 90px für die Daten, dadurch brachen alle vier Kontaktzeilen um und
       Telefonnummern zerrissen mitten in der Zahl. Foto jetzt schmaler und
       rechtsbündig; Nummern und Adresse dürfen nicht mehr umbrechen. */
    #right-sidebar {
        grid-template-columns: minmax(0, 1fr) minmax(84px, 28%);
    }
    /* KEIN `justify-self: end` — das nimmt dem Grid-Element das Strecken und lässt es auf
       Inhaltsbreite schrumpfen (Foto war dann 46px statt 88px). Die Spalte ist ohnehin die
       rechte, das Foto steht damit schon rechtsbündig. */
    .sidebar-col-right {
        width: 100%;
        max-width: none;
    }
    .sidebar-col-right .responsive-img {
        width: 100%;
    }
    .sidebar-col-left address,
    .sidebar-col-left .contact-list li {
        overflow-wrap: normal;
    }
    .sidebar-col-left .phone-reveal {
        white-space: nowrap;
    }

    /* — Angebots-Übersicht: Objektnummer klebte an der Headline (2px) — */
    .objekt-row-nr {
        margin-bottom: 10px;
    }

    /* — Objekt-Slider: Punkte weg, dafür Wischen —
       Bei 30–40 Fotos sind 40 Punkte auf einem Telefon weder treffbar noch lesbar;
       im Flex-Container ohne `flex-shrink:0` werden sie außerdem zu senkrechten
       Ellipsen gequetscht. Auf Touch führt Wischen (scripts/main.js), die Pfeile
       bleiben zusätzlich sichtbar. */
    .objekt-slider-dots {
        display: none;
    }

    /* — Angebots-Slider der Startseite: Punkte ebenfalls weg —
       Gleicher Grund, andere Bauart: dieser Slider läuft über Radio-Schalter, die Punkte
       sind deren Beschriftungen. Auf dem Telefon wird gewischt, und der Slider schaltet
       ohnehin allein weiter — die Punkte kosten dort nur Platz unter dem Bild. */
    .slider-nav {
        display: none;
    }

    /* — Objekt-Detailseite: Abstand zwischen den Boxen —
       Ursprünglich 94px zwischen zwei Karten; auf einem Telefon scrollt man dadurch durch
       Leerraum statt durch Inhalt. Der Abstand setzt sich aus vier Teilen zusammen (jede Box
       sitzt in einem eigenen `.subpage-col` aus Überschrift + Karte):
           Karte unten + Spalte unten + Überschrift-Höhe + Überschrift unten
       Entscheidend ist der LEERRAUM ÜBER der Überschrift (Karte unten + Spalte unten) — er
       trennt die Überschrift von der Box darüber. Zu wenig davon, und beide kleben zusammen:
           vorher   26 + 36 = 62   (gesamt 94 — zu viel Scrollen)
           zu eng   10 + 10 = 20   (gesamt 52 — Überschrift klebte an der Box darüber)
           jetzt    12 + 18 = 30   (gesamt 62)
       `margin-top` der Überschrift wird bewusst nicht angefasst: die erste je Spalte hält
       ohnehin `:first-child { margin-top: 0 }`, eine Regel dafür wäre toter Code.
       `margin-bottom` der Überschrift bleibt ebenfalls — der kurze Abstand zur EIGENEN Box
       ist gewollt, er zeigt die Zusammengehörigkeit. */
    .objekt-bloecke .subpage-col {
        margin-bottom: 18px;
    }
    .objekt-bloecke .info-card {
        margin-bottom: 12px;
    }

    /* — Footer-Navigation als Umriss-Schaltflächen —
       Die Links waren 14px hoch und lagen bei Umbruch direkt aufeinander. Ein bloßes
       Aufblähen der Zeilenhöhe riss die Zeilen unschön weit auseinander, ohne dass man
       sah, wo ein Ziel anfängt und aufhört. Ein sichtbarer Rahmen löst beides: klare
       Tippfläche UND klare Trennung, bei kleiner Zeilenhöhe.
       Gold-Umriss + leicht aufgehelltes Weiss = Webstyle-Akzent auf dem grünen Footer.
       Die `|`-Trenner im Markup sind reine Textknoten; `font-size: 0` am Container blendet
       sie aus, ohne das Markup anzufassen — der Desktop behält sie unverändert. */
    .footer-legal {
        font-size: 0;
        line-height: 0;
        margin-top: 10px;
    }
    .footer-legal a {
        display: inline-block;
        margin: 0 6px 8px 0;
        padding: 8px 12px;
        border: 1px solid var(--accent);
        border-radius: 7px;
        background: rgba(255, 255, 255, .08);
        font-size: 0.85rem;
        line-height: 1.3;
        transition: background .18s ease;
    }
    /* Die ganze Fläche reagiert, nicht der Text: eine Schaltfläche unterstreicht nicht.
       Das globale `.footer-legal a:hover { text-decoration: underline }` wird hier bewusst
       zurückgenommen — auf dem Desktop bleibt es unverändert. */
    .footer-legal a:hover,
    .footer-legal a:focus,
    .footer-legal a:active {
        text-decoration: none;
        background: rgba(255, 255, 255, .20);
    }
}