/* =====================================================================
   Kursraum Oldenburg – Website-Design 2026 (öffentliche Seiten)
   Wird NACH styles.css geladen und greift nur unter <body class="site">.
   Buchungssystem (kalender.html, booking.html, Dashboards) lädt diese
   Datei nicht und bleibt unverändert.
   ===================================================================== */

:root {
    /* Farben */
    --ks-paper: #f3f5f2;      /* Seitenhintergrund, leicht salbeigrün */
    --ks-white: #ffffff;
    --ks-ink: #1b1a1c;        /* Text, dunkle Flächen */
    --ks-ink-2: #55584f;      /* Sekundärtext */
    --ks-line: #dfe3dc;
    --ks-wine: #79031d;       /* Markenfarbe: Hauptaktion, Akzente */
    --ks-wine-dark: #5c0216;
    --ks-wine-soft: #f5e6e9;
    --ks-sage: #c9d9c5;       /* aus Matten und Schaufensterplakat */
    --ks-sage-dark: #34503c;
    --ks-honey: #d9a467;      /* Holzboden; Fokus und kleine Akzente */
    --ks-honey-text: #8a5a1f;

    /* Schrift */
    --ks-display: 'Bricolage Grotesque', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
    --ks-body: 'Instrument Sans', 'Inter', 'Helvetica Neue', Arial, system-ui, sans-serif;
    --ks-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

    /* Maße */
    --ks-wrap: 1160px;
    --ks-gutter: 28px;
    --ks-nav-h: 72px;
    --ks-radius: 22px;
    --ks-radius-sm: 12px;
    --ks-section: 96px;
}

@media (max-width: 640px) {
    :root {
        --ks-gutter: 18px;
        --ks-section: 64px;
        --ks-radius: 18px;
    }
}

/* ---------- Basis ---------- */
body.site {
    background: var(--ks-paper);
    color: var(--ks-ink);
    font-family: var(--ks-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.site h1,
.site h2,
.site h3,
.site h4 {
    font-family: var(--ks-display);
    color: var(--ks-ink);
    text-wrap: balance;
    letter-spacing: -0.015em;
    overflow-wrap: break-word;
    hyphens: auto;
}

.site a {
    color: var(--ks-wine);
    text-underline-offset: 3px;
}

.site :focus-visible {
    outline: 3px solid var(--ks-honey);
    outline-offset: 2px;
}

.site .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ks-wrap {
    max-width: var(--ks-wrap);
    margin: 0 auto;
    padding-inline: var(--ks-gutter);
}

.ks-tag {
    display: inline-block;
    font: 500 0.72rem/1.2 var(--ks-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ks-wine);
}

/* ---------- Buttons (bestehende Klassen) ---------- */
.site .btn-booking-system,
.site .btn-contact-form,
.site .ks-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 999px;
    font: 600 0.95rem/1 var(--ks-body);
    letter-spacing: 0;
    text-decoration: none;
    border: 1.5px solid transparent;
    box-shadow: none;
    transform: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.site .btn-booking-system,
.site .ks-btn-primary {
    background: var(--ks-wine);
    color: #fff;
    border-color: var(--ks-wine);
}

.site .btn-booking-system:hover,
.site .ks-btn-primary:hover {
    background: var(--ks-wine-dark);
    border-color: var(--ks-wine-dark);
    color: #fff;
    transform: none;
    box-shadow: none;
}

.site .btn-contact-form,
.site .ks-btn-ghost {
    background: transparent;
    color: var(--ks-ink);
    border-color: var(--ks-ink);
}

.site .btn-contact-form:hover,
.site .ks-btn-ghost:hover {
    background: var(--ks-ink);
    color: #fff;
    border-color: var(--ks-ink);
    transform: none;
    box-shadow: none;
}

.site .btn-booking-system i,
.site .btn-contact-form i,
.site .ks-btn i {
    font-size: 0.95em;
}

/* DEV-Banner (nur index.php mit DEV_MODE): Navigation sitzt 40px tiefer,
   der Startbereich rechnet die Navigationshöhe selbst ein */
body.site:has(> .dev-banner) {
    padding-top: 40px !important;
}

/* ---------- Navigation ---------- */
.site .navbar {
    min-height: var(--ks-nav-h);
    background: rgba(243, 245, 242, 0.9);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: none;
    border-bottom: 1px solid var(--ks-line);
}

.site .nav-container {
    max-width: var(--ks-wrap);
    min-height: var(--ks-nav-h);
    padding: 0 var(--ks-gutter);
    gap: 28px;
}

.site .nav-logo {
    display: grid;
    grid-template-columns: 32px auto;
    align-items: center;
    column-gap: 10px;
}

.site .nav-logo::before {
    content: "";
    grid-row: span 2;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--ks-wine) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V9l8-5 8 5v11'/%3E%3Cpath d='M9 20v-6h6v6'/%3E%3C/svg%3E") center / 18px no-repeat;
}

.site .nav-logo h2 {
    font: 800 1.12rem/1.1 var(--ks-display);
    letter-spacing: -0.01em;
    color: var(--ks-ink);
    margin: 0;
}

.site .nav-slogan p {
    font: 500 0.7rem/1.3 var(--ks-body);
    font-style: normal;
    color: var(--ks-ink-2);
    margin-top: 2px;
}

.site .nav-menu {
    align-items: center;
    gap: 22px;
}

.site .nav-link {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--ks-ink-2);
    min-height: 24px;
}

.site .nav-link:hover,
.site .nav-link.active {
    color: var(--ks-ink);
}

.site .nav-link.active {
    text-decoration: underline;
    text-decoration-color: var(--ks-wine);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

.site .nav-auth-links {
    gap: 12px;
}

.site #navLoginBtn,
.site #navLogoutBtn {
    color: var(--ks-ink-2) !important;
    font-family: var(--ks-body);
}

/* display setzt script.js inline (inline-block !important) – daher Zentrierung über line-height */
.site .nav-link.nav-cta {
    background: var(--ks-wine);
    color: #fff;
    padding: 0 18px;
    height: 40px;
    line-height: 40px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
}

.site .nav-link.nav-cta:hover,
.site .nav-link.nav-cta.active {
    background: var(--ks-wine-dark);
    color: #fff;
    text-decoration: none;
}

.site .hamburger {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid var(--ks-line);
    background: var(--ks-white);
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.site .hamburger .bar {
    width: 18px;
    height: 2px;
    margin: 0;
    background: var(--ks-ink);
}

@media (max-width: 1024px) {
    .site .nav-menu {
        background: var(--ks-paper);
        border-bottom: 1px solid var(--ks-line);
        box-shadow: 0 24px 40px -24px rgba(27, 26, 28, 0.35);
    }

    .site .nav-menu .nav-link {
        font-size: 1.05rem;
        color: var(--ks-ink);
    }

    .site .nav-menu .nav-link.nav-cta {
        height: 48px;
        line-height: 48px;
        text-align: center;
        color: #fff;
    }
}

/* Handy-Menü: kompakt, damit „Anfragen“ nicht unter der Safari-Leiste liegt */
@media (max-width: 768px) {
    .site .nav-menu {
        top: var(--ks-nav-h);
        gap: 0;
        padding: 8px 0 calc(24px + env(safe-area-inset-bottom, 0px));
        max-height: calc(100dvh - var(--ks-nav-h));
    }

    body.site:has(> .dev-banner) .nav-menu {
        top: calc(var(--ks-nav-h) + 40px);
        max-height: calc(100dvh - var(--ks-nav-h) - 40px);
    }

    .site .nav-menu .nav-link {
        padding: 12px 16px;
    }

    .site .nav-auth-links {
        padding: 4px 16px;
    }

    .site .nav-menu .nav-link.nav-cta {
        margin: 12px auto 0;
        padding: 0 28px;
        color: #fff !important;
        -webkit-text-fill-color: #fff;
        -webkit-tap-highlight-color: transparent;
    }
}

/* ---------- Footer (alle öffentlichen Seiten) ---------- */
.site .footer {
    background: var(--ks-ink);
    color: #c9cbc5;
    margin: 0;
    padding: 64px 0 28px;
    border-top: 0;
}

.site .footer .container {
    max-width: var(--ks-wrap);
    padding-inline: var(--ks-gutter);
}

.site .footer-content {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 40px;
    margin-bottom: 36px;
}

.site .footer-info h3 {
    font: 800 1.5rem/1.15 var(--ks-display);
    color: #fff;
    margin-bottom: 12px;
}

.site .footer-info h3::after {
    content: "Wir haben die Räume. Du die Ideen.";
    display: block;
    margin-top: 6px;
    font: 500 0.95rem/1.4 var(--ks-body);
    letter-spacing: 0;
    color: var(--ks-honey);
}

.site .footer-info p {
    color: #c9cbc5;
    margin-bottom: 4px;
}

.site .footer-info a {
    margin: 18px 10px 0 0;
}

.site .footer-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 24px;
    align-content: start;
}

.site .footer-links a {
    color: #c9cbc5;
    font-size: 0.92rem;
    text-decoration: none;
}

.site .footer-links a:hover {
    color: #fff;
}

.site .footer-bottom {
    border-top: 1px solid #3a393c;
    padding-top: 22px;
    color: #9a9c96;
    font-size: 0.82rem;
    text-align: left;
}

.site .footer-bottom a {
    color: #c9cbc5;
}

/* Kontakt-Buttons im Footer: ruhig, einheitlich */
.site .email-button-footer,
.site .whatsapp-button-footer,
.site .instagram-button-footer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid #4a494c;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    box-shadow: none;
    text-decoration: none;
}

.site .email-button-footer:hover,
.site .whatsapp-button-footer:hover,
.site .instagram-button-footer:hover {
    background: #fff;
    color: var(--ks-ink);
    border-color: #fff;
    transform: none;
}

@media (max-width: 768px) {
    .site .footer-content {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Schwebende Elemente ---------- */
.site .booking-sticky-bar {
    background: var(--ks-ink);
    border-top: 0;
    box-shadow: 0 -12px 30px -18px rgba(0, 0, 0, 0.5);
}

.site .booking-sticky-cta {
    background: var(--ks-wine);
    color: #fff;
    border-radius: 999px;
}

.site .floating-availability-btn {
    background: var(--ks-ink);
    color: #fff;
}

.site .scroll-to-top {
    background: var(--ks-white);
    color: var(--ks-ink);
    border: 1px solid var(--ks-line);
}

/* ---------- Cookie-Banner: kompakte Karte ---------- */
.site .cookie-banner {
    left: auto;
    right: 16px;
    bottom: 16px;
    width: min(440px, calc(100% - 32px));
    background: var(--ks-white);
    color: var(--ks-ink);
    border-radius: 18px;
    border: 1px solid var(--ks-line);
    box-shadow: 0 24px 60px -24px rgba(27, 26, 28, 0.45);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 20px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.site .cookie-banner-toggle-slider {
    background-color: #b9bdb5;
}

.site .cookie-banner-category-toggle input:checked + .cookie-banner-toggle-slider {
    background-color: var(--ks-wine);
}

.site .cookie-banner-content {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
}

.site .cookie-banner-title,
.site .cookie-banner-text,
.site .cookie-banner-text a,
.site .cookie-banner-category-item,
.site .cookie-banner-category-item label,
.site .cookie-banner-category-label {
    color: var(--ks-ink);
}

.site .cookie-banner-title {
    font: 700 1.05rem/1.2 var(--ks-display);
}

.site .cookie-banner-text {
    color: var(--ks-ink-2);
    font-size: 0.86rem;
}

.site .cookie-banner-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 14px;
}

.site .cookie-banner-actions button {
    min-height: 44px;
    border-radius: 999px;
    font: 600 0.86rem/1.1 var(--ks-body);
    background: transparent;
    color: var(--ks-ink);
    border: 1.5px solid var(--ks-ink);
    box-shadow: none;
}

.site .cookie-banner-actions button:hover {
    background: var(--ks-ink);
    color: #fff;
}

.site .cookie-banner-actions .cookie-banner-allow-all {
    order: 1;
}

.site .cookie-banner-actions .cookie-banner-reject-all {
    order: 2;
}

.site .cookie-banner-actions .cookie-banner-allow-selection {
    order: 3;
    grid-column: 1 / -1;
    min-height: 0;
    border: 0;
    padding: 4px 0 0;
    font-weight: 500;
    color: var(--ks-ink-2);
    text-decoration: underline;
    justify-self: start;
}

.site .cookie-banner-actions .cookie-banner-allow-selection:hover {
    background: transparent;
    color: var(--ks-ink);
}

.site .cookie-banner-categories {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
}

.site .cookie-banner-show-details {
    background: none;
    border: 0;
    padding: 0;
    color: var(--ks-ink-2);
    font: 500 0.84rem/1.2 var(--ks-body);
    text-decoration: underline;
    cursor: pointer;
}

/* ---------- Unterseiten: FAQ, Landingpages, Rechtliches ---------- */
.site .faq-main,
.site .legal-page {
    padding-top: calc(var(--ks-nav-h) + 48px);
}

.site .faq-hero {
    max-width: var(--ks-wrap);
    margin: 0 auto;
    padding: 24px var(--ks-gutter) 16px;
    text-align: left;
    background: transparent;
}

.site .faq-hero .eyebrow {
    font: 500 0.72rem/1.2 var(--ks-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ks-wine);
}

.site .faq-hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin: 14px 0 16px;
}

.site .faq-hero p {
    max-width: 60ch;
    color: var(--ks-ink-2);
    font-size: 1.1rem;
    margin-inline: 0;
}

.site .faq-hero .landing-cta-row {
    justify-content: flex-start;
}

.site .faq-section {
    padding: 8px 0 var(--ks-section);
}

.site .faq-section .container {
    max-width: var(--ks-wrap);
    padding-inline: var(--ks-gutter);
}

.site .landing-figure img {
    border-radius: var(--ks-radius);
}

.site .landing-block h2 {
    color: var(--ks-ink);
    font-size: 1.6rem;
    font-weight: 800;
}

.site .faq-item {
    background: var(--ks-white);
    border: 1px solid var(--ks-line);
    border-radius: var(--ks-radius-sm);
    box-shadow: none;
}

.site .faq-item summary {
    font-family: var(--ks-body);
    font-weight: 600;
    color: var(--ks-ink);
}

.site .legal-page h1 {
    font-weight: 800;
    letter-spacing: -0.03em;
}

.site .legal-page h2,
.site .legal-page h3 {
    color: var(--ks-ink);
}

/* =====================================================================
   STARTSEITE
   ===================================================================== */

.site main > section {
    scroll-margin-top: calc(var(--ks-nav-h) + 12px);
}

.ks-section {
    padding-block: var(--ks-section);
}

.ks-section--white {
    background: var(--ks-white);
}

.ks-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px 32px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.ks-head h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin: 12px 0 0;
}

.ks-head > p {
    max-width: 48ch;
    color: var(--ks-ink-2);
    margin: 0;
}

/* ---------- Hero ---------- */
.ks-hero {
    padding: calc(var(--ks-nav-h) + 48px) 0 40px;
}

.ks-hero .ks-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: 48px;
    align-items: center;
}

.site .ks-hero-kicker {
    font: 500 0.78rem/1.4 var(--ks-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ks-wine);
    margin: 0;
}

.ks-claim {
    font: 800 clamp(2.6rem, 6vw, 4.6rem)/1.02 var(--ks-display);
    letter-spacing: -0.035em;
    color: var(--ks-ink);
    margin: 16px 0 22px;
    text-wrap: balance;
}

.ks-claim span {
    display: inline-block;
}

.ks-claim em {
    font-style: normal;
    color: var(--ks-wine);
}

.ks-hero-lead {
    max-width: 46ch;
    font-size: 1.13rem;
    color: var(--ks-ink-2);
    margin: 0;
}

.ks-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.ks-hero-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
}

.ks-hero-more:hover {
    text-decoration: underline;
}

.ks-facts {
    /* Drei gleich breite Spalten: gleiche Abstände, unabhängig von der Textlänge */
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 24px;
    list-style: none;
    margin: 30px 0 0;
    padding: 22px 0 0;
    border-top: 1px solid var(--ks-line);
}

.ks-facts li {
    display: grid;
    gap: 2px;
    align-content: start;
}

.ks-facts b {
    font: 800 clamp(1.05rem, 4.4vw, 1.3rem)/1.1 var(--ks-display);
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.ks-facts span {
    font-size: 0.84rem;
    color: var(--ks-ink-2);
}

.ks-hero-media {
    position: relative;
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    aspect-ratio: 5 / 4.2;
    max-width: 100%;
    margin: 0;
}

.ks-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 18px;
    display: block;
}

.ks-hero-media img:first-child {
    grid-row: span 2;
}

.ks-plate {
    /* Kompakt und ganz im Hauptfoto (linke Spalte = 1.6 / 2.6 der Breite) */
    position: absolute;
    left: 14px;
    bottom: 14px;
    display: grid;
    gap: 2px;
    width: max-content;
    max-width: calc(61% - 28px);
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: 12px;
    box-shadow: 0 12px 28px -16px rgba(27, 26, 28, 0.45);
    font-size: 0.78rem;
}

.ks-plate strong {
    font: 700 0.9rem/1.2 var(--ks-display);
    margin-bottom: 2px;
}

.ks-plate dl {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    gap: 0 14px;
    margin: 0;
    font: 500 0.72rem/1.5 var(--ks-mono);
}

.ks-plate dt {
    color: var(--ks-ink-2);
}

.ks-plate dd {
    margin: 0;
    text-align: right;
}

/* Sanfter Einstieg beim Laden (Inhalt ist auch ohne Animation sichtbar) */
@media (prefers-reduced-motion: no-preference) {
    .ks-claim span {
        animation: ks-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }

    .ks-claim span:nth-child(2) {
        animation-delay: 0.18s;
    }

    @keyframes ks-rise {
        from {
            opacity: 0.001;
            transform: translateY(14px);
        }
    }
}

/* ---------- Anlässe ---------- */
.ks-uses {
    padding: 8px 0 56px;
}

.ks-uses .ks-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.ks-uses-label {
    font-size: 0.86rem;
    color: var(--ks-ink-2);
    margin: 0 6px 0 0;
}

.ks-chip {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--ks-white);
    border: 1px solid var(--ks-line);
    color: var(--ks-ink);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: border-color 0.2s ease;
}

.ks-chip:hover {
    border-color: var(--ks-ink);
}

/* ---------- Räume ---------- */
.ks-rooms {
    display: grid;
    /* Gleich breite Karten: Fotos gleich hoch, Texte beginnen auf einer Linie */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.ks-room {
    display: grid;
    grid-template-rows: auto 1fr;
    background: var(--ks-paper);
    border-radius: var(--ks-radius);
    overflow: hidden;
}

.ks-room .room-card-interactive {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    max-width: 100%;
    cursor: zoom-in;
    overflow: hidden;
}

.ks-room .room-card-interactive img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.ks-room .room-card-interactive:hover img {
    transform: scale(1.03);
}

/* Alten Karten-Hover aus styles.css aufheben: Foto nicht anheben, keine eigenen
   Ecken/Schatten – es bleibt bündig in der Karte. */
.ks-room .room-card-interactive,
.ks-room .room-card-interactive:hover,
.ks-room .room-card-interactive:focus {
    border-radius: 0;
    box-shadow: none;
    transform: none;
}

.ks-room .room-card-interactive:focus-visible {
    outline: 3px solid var(--ks-wine);
    outline-offset: -3px;
}

.ks-room-size {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 7px 11px;
    border-radius: 999px;
    background: var(--ks-white);
    font: 500 0.8rem/1 var(--ks-mono);
}

.ks-room-photos {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(27, 26, 28, 0.8);
    color: #fff;
    font-size: 0.84rem;
    font-weight: 600;
}

.ks-room-body {
    display: grid;
    gap: 16px;
    align-content: start;
    /* letzte Zeile (Preis + Button) füllt den Rest: in beiden Karten unten bündig */
    grid-template-rows: auto auto auto 1fr;
    padding: 26px 26px 28px;
}

.ks-room-body > .ks-room-foot {
    align-self: end;
}

.ks-room-body h3 {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
}

.ks-room-body > p {
    color: var(--ks-ink-2);
    margin: 0;
}

.ks-room-body > p a {
    font-weight: 600;
}

.ks-feat {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ks-feat li {
    padding: 6px 11px;
    border-radius: 8px;
    background: var(--ks-white);
    border: 1px solid var(--ks-line);
    font-size: 0.85rem;
}

.ks-room-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 4px;
    padding-top: 18px;
    border-top: 1px solid var(--ks-line);
}

.ks-price {
    display: grid;
}

.ks-price b {
    font: 800 1.6rem/1 var(--ks-display);
    letter-spacing: -0.02em;
}

.ks-price span {
    margin-top: 4px;
    font-size: 0.82rem;
    color: var(--ks-ink-2);
}

.ks-extras {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 22px;
    margin-top: 22px;
}

.ks-extra {
    display: grid;
    gap: 14px;
    align-content: start;
    padding: 30px;
    border-radius: var(--ks-radius);
    background: var(--ks-sage);
}

.ks-extra .ks-tag {
    color: var(--ks-sage-dark);
}

.ks-extra h3 {
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0;
}

.ks-extra ul {
    display: grid;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ks-extra li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    color: var(--ks-sage-dark);
    font-weight: 500;
}

.ks-extra li::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--ks-sage-dark);
    transform: translateY(-1px);
}

.ks-plan {
    margin: 0;
    border-radius: var(--ks-radius);
    overflow: hidden;
    background: #ececec;
}

.ks-plan img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------- Ablauf ---------- */
.ks-paths {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.ks-path {
    display: grid;
    gap: 20px;
    align-content: start;
    padding: 34px;
    border-radius: var(--ks-radius);
    background: var(--ks-white);
    border: 1px solid var(--ks-line);
}

.ks-path h3 {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
}

.ks-path > p {
    margin: 0;
    color: var(--ks-ink-2);
}

.ks-steps {
    display: grid;
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: ks-step;
}

.ks-steps li {
    counter-increment: ks-step;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    font-weight: 600;
}

.ks-steps li::before {
    content: counter(ks-step);
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ks-ink);
    color: #fff;
    font: 500 0.82rem/1 var(--ks-mono);
}

.ks-steps small {
    display: block;
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--ks-ink-2);
}

.ks-cost {
    margin: 0;
    padding: 14px 16px;
    border-radius: var(--ks-radius-sm);
    background: var(--ks-paper);
    font: 500 0.85rem/1.5 var(--ks-mono);
}

.ks-path .ks-btn,
.ks-path .btn-contact-form {
    justify-self: start;
}

.ks-path--dark {
    background: var(--ks-ink);
    border-color: var(--ks-ink);
    color: #f1f1ee;
}

.ks-path--dark h3 {
    color: #fff;
}

.ks-path--dark .ks-tag {
    color: var(--ks-honey);
}

.ks-path--dark > p,
.ks-path--dark .ks-steps small {
    color: #b9bbb4;
}

.ks-path--dark .ks-steps li::before {
    background: #fff;
    color: var(--ks-ink);
}

.ks-path--dark .ks-cost {
    background: #2c2b2e;
}

.site .ks-path--dark .btn-contact-form {
    color: #fff;
    border-color: #fff;
}

.site .ks-path--dark .btn-contact-form:hover {
    background: #fff;
    color: var(--ks-ink);
}

/* ---------- Preise ---------- */
.ks-pricing {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 22px;
    align-items: start;
}

.ks-ptable {
    padding: 10px 28px 22px;
    border-radius: var(--ks-radius);
    background: var(--ks-paper);
    overflow-x: auto;
}

.ks-ptable table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.ks-ptable th {
    padding: 18px 0 12px;
    border-bottom: 1px solid var(--ks-line);
    text-align: left;
    font: 500 0.7rem/1 var(--ks-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ks-ink-2);
}

.ks-ptable td {
    padding: 15px 0;
    border-bottom: 1px solid var(--ks-line);
    vertical-align: top;
}

.ks-ptable th + th,
.ks-ptable td + td {
    text-align: right;
    padding-left: 16px;
    white-space: nowrap;
}

.ks-ptable td small {
    display: block;
    font-size: 0.8rem;
    color: var(--ks-ink-2);
}

.ks-ptable td b {
    font: 800 1.1rem/1.3 var(--ks-display);
}

.ks-ptable-note {
    margin: 14px 0 0;
    font-size: 0.84rem;
    color: var(--ks-ink-2);
}

/* Preisrechner: bestehendes Markup (IDs unverändert), neues Aussehen */
.site .price-calculator {
    margin: 0;
    max-width: none;
    padding: 30px;
    border-radius: var(--ks-radius);
    background: var(--ks-white);
    border: 2px solid var(--ks-wine);
    box-shadow: none;
}

.site .price-calculator h3 {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--ks-ink);
}

.site .price-calculator h3 i {
    color: var(--ks-wine);
}

.site .price-calculator-intro {
    color: var(--ks-ink-2);
}

.site .price-calculator-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.site .price-calculator .form-group label {
    font: 500 0.72rem/1.2 var(--ks-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ks-ink-2);
}

.site .price-calculator select {
    min-height: 48px;
    border-radius: var(--ks-radius-sm);
    border: 1px solid var(--ks-line);
    background-color: var(--ks-paper);
    font: 500 1rem/1.2 var(--ks-body);
    color: var(--ks-ink);
}

.site .price-calculator-result {
    border-radius: 16px;
    border: 0;
    border-left: 0;
    background: var(--ks-wine);
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.site .price-calculator-result #calcResultLabel,
.site .price-calculator-result .price-gross,
.site .price-calculator-result .price-calculator-per-session,
.site .price-calculator-result .price-line-detail,
.site .price-calculator-result .price-calculator-switch-hint {
    color: rgba(255, 255, 255, 0.82) !important;
}

.site .price-calculator-result .price-net {
    font: 800 2.3rem/1.05 var(--ks-display);
    letter-spacing: -0.02em;
    color: #fff;
}

.site .price-calculator-result .price-line-label,
.site .price-calculator-result .price-line-amount,
.site .price-calculator-result .price-calculator-abo-benefits li {
    color: #fff;
}

.site .price-calculator-breakdown li {
    border-color: rgba(255, 255, 255, 0.2);
}

.site .price-calculator-abo-benefits i {
    color: var(--ks-honey);
}

.site .price-example-box {
    border-radius: var(--ks-radius-sm);
    background: var(--ks-paper);
    color: var(--ks-ink-2);
    border: 0;
}

.site .price-compare-card {
    border-radius: var(--ks-radius-sm);
}

/* ---------- Besichtigung ---------- */
.ks-visit {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    overflow: hidden;
    border-radius: 28px;
    background: var(--ks-sage);
}

.ks-visit-text {
    display: grid;
    gap: 18px;
    align-content: center;
    padding: 52px;
}

.ks-visit-text .ks-tag {
    color: var(--ks-sage-dark);
}

.ks-visit h2 {
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.08;
    margin: 0;
}

.ks-visit p {
    max-width: 44ch;
    margin: 0;
    color: var(--ks-sage-dark);
}

.ks-visit .btn-booking-system {
    justify-self: start;
}

.ks-visit-poster {
    display: grid;
    place-items: center;
    margin: 0;
    padding: 28px;
}

/* Plakat enthält Text: nie beschneiden, nur einpassen */
.ks-visit-poster img {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 14px;
    box-shadow: 0 18px 40px -22px rgba(27, 26, 28, 0.45);
}

/* ---------- Standort ---------- */
.ks-location {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 40px;
    align-items: start;
}

.ks-address {
    font: 800 1.6rem/1.2 var(--ks-display);
    letter-spacing: -0.02em;
    margin: 0 0 8px;
    font-style: normal;
}

.ks-loc-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-top: 28px;
}

.ks-loc-facts div {
    display: grid;
    gap: 6px;
    align-content: start;
    padding-top: 16px;
    border-top: 2px solid var(--ks-ink);
}

.ks-loc-facts h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}

.ks-loc-facts p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--ks-ink-2);
}

.ks-route {
    font-weight: 600;
}

.ks-map {
    height: 440px;
    border-radius: var(--ks-radius);
    overflow: hidden;
    background: var(--ks-paper);
}

.site .ks-map .map-consent {
    height: 100%;
    background: var(--ks-paper);
}

/* ---------- FAQ-Auszug ---------- */
.ks-faq {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 48px;
    align-items: start;
}

.ks-faq-list details {
    border-bottom: 1px solid var(--ks-line);
}

.ks-faq-list summary {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0;
    list-style: none;
    font-weight: 600;
    font-size: 1.05rem;
    cursor: pointer;
}

.ks-faq-list summary::-webkit-details-marker {
    display: none;
}

.ks-faq-list summary::after {
    content: "+";
    flex: none;
    font: 500 1.3rem/1 var(--ks-mono);
    color: var(--ks-wine);
}

.ks-faq-list details[open] summary::after {
    content: "–";
}

.ks-faq-list details p {
    margin: 0;
    padding: 0 0 18px;
    color: var(--ks-ink-2);
    max-width: 62ch;
}

.ks-faq-more {
    display: inline-block;
    margin-top: 20px;
    font-weight: 600;
}

/* ---------- Kontaktformular: bestehendes Markup, neues Aussehen ---------- */
.site .contact-form-section {
    padding: var(--ks-section) var(--ks-gutter);
    background: var(--ks-white);
}

.site .contact-form-container {
    max-width: 820px;
}

.site .contact-form-container h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    text-align: left;
}

.site .contact-form-container > p {
    text-align: left;
    color: var(--ks-ink-2);
}

.site .contact-form {
    padding: 32px;
    border-radius: var(--ks-radius);
    background: var(--ks-paper);
    border: 0;
    box-shadow: none;
}

.site .contact-form input[type="text"],
.site .contact-form input[type="email"],
.site .contact-form input[type="tel"],
.site .contact-form input[type="date"],
.site .contact-form input[type="time"],
.site .contact-form input[type="number"],
.site .contact-form select,
.site .contact-form textarea {
    min-height: 48px;
    border-radius: var(--ks-radius-sm);
    border: 1px solid var(--ks-line);
    background-color: var(--ks-white);
    color: var(--ks-ink);
    font-family: var(--ks-body);
    font-size: 1rem;
}

.site .contact-form input:focus,
.site .contact-form select:focus,
.site .contact-form textarea:focus {
    outline: 2px solid var(--ks-wine);
    outline-offset: 0;
    border-color: transparent;
    box-shadow: none;
}

.site .contact-form .form-group label {
    font-weight: 600;
    color: var(--ks-ink);
}

.site .form-section-bordered {
    border-radius: var(--ks-radius-sm);
    border-color: var(--ks-line);
    background: var(--ks-white);
}

.site .form-section-header i,
.site .booking-details-section .form-section-header i {
    color: var(--ks-wine);
}

.site .submit-btn {
    min-height: 52px;
    border-radius: 999px;
    background: var(--ks-wine);
    font: 600 1rem/1 var(--ks-body);
    box-shadow: none;
}

.site .submit-btn:hover {
    background: var(--ks-wine-dark);
    transform: none;
}

/* Abstände: Zeilen-Gap und Feld-Margin addierten sich (bis 48px) */
.site .contact-form .form-group {
    margin-bottom: 20px;
}

.site .contact-form .form-row {
    gap: 16px 20px;
    margin-bottom: 20px;
}

.site .contact-form .form-row > .form-group,
.site .contact-form .form-group > .form-row:last-child,
.site .contact-form .form-section-bordered > :last-child {
    margin-bottom: 0;
}

.site .contact-form .form-section-bordered {
    padding: 22px;
    margin-bottom: 20px;
}

.site .contact-form .form-section-header {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.site .contact-form .form-section-header h3 {
    font-size: 1.2rem;
    margin: 0;
    text-align: left;
}

.site .contact-form .form-section-description {
    margin-bottom: 16px;
    font-size: 0.95rem;
}

/* Felder füllen die Spalte; iOS-Datumsfeld nicht breiter als der Container */
.site .contact-form input,
.site .contact-form select,
.site .contact-form textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.site .contact-form input[type="checkbox"],
.site .contact-form input[type="radio"] {
    display: inline-block;
    width: auto;
}

.site .contact-form input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    text-align: left;
}

.site .contact-form input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
}

.site .contact-form input:disabled,
.site .contact-form select:disabled {
    background-color: var(--ks-paper);
    color: var(--ks-ink-2);
    opacity: 0.7;
    cursor: not-allowed;
}

.site .contact-date-room-hint {
    font-size: 0.86rem;
    color: var(--ks-wine);
}

/* Safari: <select> ist mindestens so breit wie seine längste Option.
   Raster-Spalten mit 1fr (= minmax(auto, 1fr)) wachsen dann über den
   Bildschirm hinaus. minmax(0, …) + min-width: 0 begrenzt das. */
.site .contact-form .form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.site .contact-form .form-row > *,
.site .contact-form .form-group,
.site .contact-form .form-section-bordered {
    min-width: 0;
    max-width: 100%;
}

.site .contact-form select {
    text-overflow: ellipsis;
}

.site .contact-form-section,
.site .contact-form {
    max-width: 100%;
    overflow-x: clip;
}

@media (max-width: 768px) {
    .site .contact-form .form-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* „Weiteres Wunschdatum“ / „Entfernen“: ruhige Nebenaktionen statt Grün/Rot */
.site .btn-add-viewing,
.site .btn-remove-viewing {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    margin-top: 12px;
    padding: 0 16px !important;
    border-radius: 999px !important;
    border: 1.5px solid var(--ks-ink) !important;
    background: transparent !important;
    color: var(--ks-ink) !important;
    font: 600 0.88rem/1 var(--ks-body);
    width: auto;
    max-width: 100%;
    padding-block: 10px !important;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
}

.site .btn-add-viewing:hover,
.site .btn-remove-viewing:hover {
    background: var(--ks-ink) !important;
    color: #fff !important;
}

/* ---------- Raum-Modal: Farben angleichen ---------- */
.site .room-modal-title {
    font-family: var(--ks-display);
    font-weight: 800;
    color: var(--ks-ink);
}

.site .room-modal-container {
    border-radius: var(--ks-radius);
}

/* ---------- Responsiv ---------- */
@media (max-width: 960px) {
    .ks-hero .ks-wrap,
    .ks-rooms,
    .ks-extras,
    .ks-paths,
    .ks-pricing,
    .ks-visit,
    .ks-location,
    .ks-faq {
        grid-template-columns: minmax(0, 1fr);
    }

    .ks-plate {
        left: 12px;
    }

    .ks-visit-poster {
        padding: 0 24px 28px;
    }

    .ks-faq {
        gap: 8px;
    }
}

@media (max-width: 640px) {
    .ks-hero {
        padding: calc(var(--ks-nav-h) + 24px) 0 24px;
    }

    .ks-hero-media {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        aspect-ratio: 4 / 3;
    }

    .ks-hero-media img:not(:first-child) {
        display: none;
    }

    .ks-hero-media img:first-child {
        grid-row: auto;
    }

    .ks-plate {
        left: 10px;
        bottom: 10px;
        max-width: calc(100% - 20px);
    }

    .ks-hero-ctas > a {
        flex: 1 1 100%;
    }

    .ks-path,
    .site .price-calculator,
    .site .contact-form {
        padding: 22px;
    }

    .ks-ptable {
        padding-inline: 16px;
    }

    .ks-ptable table {
        font-size: 0.92rem;
    }

    .ks-ptable th + th,
    .ks-ptable td + td {
        padding-left: 10px;
    }

    .ks-ptable td:first-child {
        hyphens: auto;
        overflow-wrap: anywhere;
    }

    .site .footer,
    .site .footer-info,
    .site .footer-links,
    .site .footer-bottom {
        text-align: left;
        justify-items: start;
    }

    .ks-visit-text {
        padding: 30px 24px;
    }

    .ks-loc-facts,
    .site .price-calculator-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ks-map {
        height: 320px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site *,
    .site *::before,
    .site *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* ---------- Hilfe für Kursanbieter (hilfe.html) ---------- */
.site .help-search {
    margin: 0 0 24px;
}

.site .help-search-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--ks-ink);
}

.site .help-search-input {
    width: 100%;
    max-width: 640px;
    padding: 12px 16px;
    border: 1px solid var(--ks-line);
    border-radius: var(--ks-radius-sm);
    background: var(--ks-white);
    font: inherit;
    color: var(--ks-ink);
}

.site .help-search-input:focus-visible {
    outline: 2px solid var(--ks-wine);
    outline-offset: 2px;
}

.site .help-search-status {
    min-height: 1.4em;
    margin: 6px 0 0;
    font-size: 0.9rem;
    color: var(--ks-ink-2);
}

.site .help-toc {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 40px;
}

.site .help-toc[hidden],
.site .help-group[hidden],
.site .help-no-results[hidden],
.site .faq-item[hidden],
.site .help-table tr[hidden] {
    display: none;
}

.site .help-toc a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--ks-white);
    border: 1px solid var(--ks-line);
    border-radius: var(--ks-radius-sm);
    color: var(--ks-ink);
    font-weight: 600;
    text-decoration: none;
}

.site .help-toc a:hover,
.site .help-toc a:focus-visible {
    border-color: var(--ks-wine);
    color: var(--ks-wine);
}

.site .help-toc i {
    width: 1.2em;
    text-align: center;
    color: var(--ks-wine);
}

.site .help-group {
    margin-bottom: 48px;
    scroll-margin-top: calc(var(--ks-nav-h) + 12px);
}

.site .help-group h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
}

.site .help-lead {
    max-width: 62ch;
    margin: 0 0 20px;
    color: var(--ks-ink-2);
}

.site .faq-answer ul,
.site .faq-answer ol {
    margin: 0.75rem 0;
    padding-left: 1.5rem;
    line-height: 1.7;
}

.site .help-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--ks-line);
    border-radius: var(--ks-radius-sm);
    background: var(--ks-white);
}

.site .help-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.site .help-table th,
.site .help-table td {
    padding: 12px 16px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--ks-line);
}

.site .help-table tbody tr:last-child td {
    border-bottom: 0;
}

.site .help-table th {
    font-weight: 700;
    color: var(--ks-ink);
}

.site .help-table td:first-child {
    font-weight: 600;
    color: var(--ks-ink);
}

.site .help-contact {
    padding: 20px 24px;
    background: var(--ks-white);
    border: 1px solid var(--ks-line);
    border-radius: var(--ks-radius-sm);
}

.site .help-contact-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
}

.site .help-contact-list i {
    margin-right: 6px;
    color: var(--ks-wine);
}

.site .help-no-results {
    padding: 16px 0;
    color: var(--ks-ink-2);
}

.site .faq-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}