/* ============================================================
   RESPONSIVE & CONTRAST POLISH
   Stand: 2026-04-26
   Ziel: mobile Layout-Brüche, überlaufende Buttons/Texte und
   uneinheitliche Schriftfarben aus Claude-Code-Version beheben.
   ============================================================ */

/* 1) Globale Sicherheitsnetze gegen horizontales Scrollen */
html,
body {
    max-width: 100%;
    overflow-x: clip;
}

body {
    text-rendering: optimizeLegibility;
}

.site-main,
.site-header,
.site-footer,
section,
.container {
    min-width: 0;
}

/* Lange Wörter, E-Mails, URLs und Inline-Inhalte sauber umbrechen */
p,
li,
a,
span,
strong,
h1,
h2,
h3,
h4,
h5,
h6,
.kontakt-data-value,
.contact-method-value,
.footer-address,
.card-text,
.service-card-text,
.menu-card-text,
.event-type-card-desc {
    overflow-wrap: anywhere;
    word-break: normal;
}

/* 2) Farb-/Kontrast-Fixes: strong war global dunkel und auf dunklen Flächen kaum lesbar */
.section--dark strong,
.section--dark b,
.cta-section strong,
.cta-section b,
.kegelbahn-teaser-content strong,
.kegelbahn-teaser-content b,
.kegelbahn-reservierung strong,
.kegelbahn-reservierung b,
.site-footer strong,
.site-footer b,
.contact-method strong,
.contact-method b {
    color: inherit;
}

.section--gold p,
.section--gold li,
.section--gold strong,
.section--gold b {
    color: var(--color-dark);
}

/* Lesbarere Links im Fließtext */
.page-content a:not(.btn),
.card-body a:not(.btn),
.kontakt-data-value a,
.contact-form-wrap a:not(.btn) {
    color: var(--color-primary-dark);
    font-weight: 600;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

.page-content a:not(.btn):hover,
.card-body a:not(.btn):hover,
.kontakt-data-value a:hover,
.contact-form-wrap a:not(.btn):hover {
    text-decoration: underline;
}

/* 3) Buttons: auf kleinen Screens nicht über den Rand schießen */
.btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
    justify-content: center;
    line-height: 1.25;
}

/* 4) Header/Mobile-Menü robuster */
body.nav-open {
    overflow: hidden;
    touch-action: none;
}

@media (max-width: 1024px) {
    .site-header {
        z-index: 3000;
        isolation: isolate;
    }

    .header-inner {
        gap: var(--space-4);
    }

    .site-logo {
        min-width: 0;
    }

    .site-logo img {
        max-width: min(180px, 58vw);
        height: auto;
        max-height: 48px;
        object-fit: contain;
    }

    .site-nav {
        top: 0;
        right: 0;
        width: min(390px, 88vw);
        height: 100vh;
        height: 100dvh;
        transform: translateX(105%);
        transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 3100;
        pointer-events: auto;
        color: var(--color-dark);
        -webkit-overflow-scrolling: touch;
    }

    .site-nav.nav-open {
        right: 0;
        transform: translateX(0);
    }

    .nav-toggle {
        z-index: 3200;
        pointer-events: auto;
        flex-shrink: 0;
    }

    .nav-menu > .menu-item > a,
    .nav-menu .sub-menu .menu-item a {
        color: var(--color-dark);
        width: 100%;
    }

    .nav-menu .sub-menu {
        width: 100%;
        margin-bottom: var(--space-2);
    }

    .header-social a {
        color: var(--color-dark);
    }

    body.nav-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(41,49,51,0.56);
        z-index: 2500;
        pointer-events: auto;
    }
}

/* 5) Tablet: Karten/Sections lockerer und sauberer */
@media (max-width: 768px) {
    :root {
        --text-lg: 1rem;
        --text-xl: 1.125rem;
    }

    .container {
        padding-left: var(--space-5);
        padding-right: var(--space-5);
    }

    .section,
    .page-content,
    .footer-main,
    .cta-section {
        padding-top: var(--space-12);
        padding-bottom: var(--space-12);
    }

    .section-header {
        margin-bottom: var(--space-8);
    }

    p {
        font-size: var(--text-base);
        line-height: 1.7;
    }

    .hero--full {
        min-height: auto;
    }

    .hero {
        min-height: 460px;
        padding: var(--space-16) 0;
    }

    .hero-title {
        font-size: clamp(2rem, 10vw, 3rem);
        line-height: 1.08;
    }

    .hero-subtitle br,
    .hero-title br,
    .kegelbahn-teaser-content h2 br {
        display: none;
    }

    .btn-group {
        width: 100%;
        gap: var(--space-3);
    }

    .btn-group .btn,
    .hero .btn,
    .cta-section .btn {
        width: 100%;
    }

    .service-card,
    .menu-card,
    .feature-card,
    .menu-section-card,
    .contact-form-wrap,
    .kegelbahn-reservierung,
    .philosophy-item {
        padding: var(--space-6);
        border-radius: var(--radius-lg);
    }

    .event-type-card {
        min-height: 240px;
    }

    .footer-legal-links {
        flex-wrap: wrap;
        gap: var(--space-3) var(--space-5);
    }

    .hours-list li {
        gap: var(--space-3);
    }
}

/* 6) Smartphone: einspaltig, kleinere Abstände, keine Oversized-Flächen */
@media (max-width: 560px) {
    .container {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .site-logo img {
        max-width: 150px;
        max-height: 42px;
    }

    .site-nav {
        width: min(340px, 92vw);
        padding: calc(var(--header-height) + var(--space-5)) var(--space-5) var(--space-6);
    }

    .hero {
        min-height: 430px;
        padding: var(--space-12) 0;
    }

    .hero-content {
        padding-left: 0;
        padding-right: 0;
    }

    .hero-label,
    .section-label {
        letter-spacing: 0.08em;
    }

    .services-grid,
    .menu-cards-grid,
    .grid-4,
    .galerie-grid {
        grid-template-columns: 1fr;
    }

    .section-title,
    .kegelbahn-teaser-content h2 {
        hyphens: auto;
    }

    .kegelbahn-teaser-img,
    .ueber-uns-intro-img {
        min-height: 220px;
    }

    .contact-method,
    .kontakt-data-item {
        align-items: flex-start;
        gap: var(--space-3);
    }

    .contact-method-value {
        font-size: var(--text-sm);
    }

    .oeffnungszeiten-table,
    .oeffnungszeiten-table tbody,
    .oeffnungszeiten-table tr,
    .oeffnungszeiten-table td {
        display: block;
        width: 100%;
    }

    .oeffnungszeiten-table tr {
        padding: var(--space-2) 0;
        border-bottom: 1px solid var(--color-border);
    }

    .oeffnungszeiten-table td {
        border-bottom: 0;
        padding: var(--space-1) 0;
    }
}

/* 7) Sehr kleine Geräte */
@media (max-width: 380px) {
    .btn,
    .btn--lg {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
        font-size: var(--text-base);
    }

    .hero-title {
        font-size: 2rem;
    }

    .service-card-icon,
    .menu-section-icon {
        font-size: 2.5rem;
    }
}

/* ============================================================
   STARTSEITE – KACHELN MIT HINTERGRUNDBILDERN STATT EMOJIS
   Bilder ablegen unter: assets/img/
   ============================================================ */

.home-image-card,
.home-menu-image-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: 320px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: var(--radius-xl, 20px) !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 18px 46px rgba(41, 49, 51, 0.18);
    display: flex;
    align-items: flex-end;
    text-align: left !important;
}

.home-menu-image-card {
    min-height: 300px;
}

.home-image-card::before,
.home-menu-image-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: rgba(41, 49, 51, 0.2);
}

.home-image-card::after,
.home-menu-image-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(
            180deg,
            rgba(41, 49, 51, 0.08) 0%,
            rgba(41, 49, 51, 0.34) 42%,
            rgba(41, 49, 51, 0.88) 100%
        );
}

.home-image-card:hover,
.home-menu-image-card:hover {
    border-color: transparent !important;
    box-shadow: 0 24px 70px rgba(41, 49, 51, 0.26) !important;
    transform: translateY(-5px);
}

.home-image-card__content {
    width: 100%;
    padding: var(--space-8, 2rem) var(--space-6, 1.5rem);
    color: #fff;
}

.home-image-card .service-card-title,
.home-image-card .service-card-text,
.home-menu-image-card .menu-card-title,
.home-menu-image-card .menu-card-text {
    color: #fff !important;
    text-align: left !important;
}

.home-image-card .service-card-title,
.home-menu-image-card .menu-card-title {
    margin-bottom: var(--space-3, 0.75rem);
    text-shadow: 0 2px 14px rgba(0,0,0,0.32);
}

.home-image-card .service-card-text,
.home-menu-image-card .menu-card-text {
    color: rgba(255,255,255,0.84) !important;
    margin-bottom: var(--space-5, 1.25rem);
    flex: 0 0 auto;
}

.home-image-card .btn,
.home-menu-image-card .btn {
    align-self: flex-start;
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-dark) !important;
}

.home-image-card .btn:hover,
.home-menu-image-card .btn:hover {
    background-color: #fff !important;
    border-color: #fff !important;
    color: var(--color-dark) !important;
    opacity: 1;
}

/* Bild-Zuordnung Startseiten-Angebote */
.home-image-card--veranstaltungen {
    background-image: url('../img/card-veranstaltungen.jpg');
}

.home-image-card--catering {
    background-image: url('../img/card-catering.jpg');
}

.home-image-card--kegelbahn {
    background-image: url('../img/card-kegelbahn.jpg');
}

.home-image-card--speisekarte {
    background-image: url('../img/card-speisekarte.jpg');
}

/* Bild-Zuordnung Speisekarten-Kacheln */
.home-menu-image-card--speisen {
    background-image: url('../img/card-speisen.jpg');
}

.home-menu-image-card--getraenke {
    background-image: url('../img/card-getraenke.jpg');
}

.home-menu-image-card--kinderkarte {
    background-image: url('../img/card-kinderkarte.jpg');
}

@media (max-width: 768px) {
    .home-image-card,
    .home-menu-image-card {
        min-height: 260px;
        border-radius: var(--radius-lg, 12px) !important;
    }

    .home-menu-image-card {
        min-height: 240px;
    }

    .home-image-card__content {
        padding: var(--space-6, 1.5rem);
    }
}

@media (max-width: 480px) {
    .home-image-card,
    .home-menu-image-card {
        min-height: 240px;
    }
}

/* ============================================================
   WARM COLOR FINAL – Footer & dunkle Kacheln harmonischer
   Ziel: Beige/Creme + warmes Taupe/Braun statt kühlem Anthrazit
   ============================================================ */
:root {
    --color-primary: #D1BC8A;
    --color-primary-dark: #B89D6A;
    --color-primary-light: #EFE2BD;
    --color-dark: #3B342E;
    --color-dark-soft: #5C534C;
    --color-bg: #FAF6F0;
    --color-bg-alt: #F3ECE3;
    --color-text: #2F2A26;
    --color-muted: #6F675F;
    --color-border: #E4D9C8;
}

/* Footer hell, warm und hochwertiger */
.site-footer {
    background: #F3ECE3 !important;
    color: #2F2A26 !important;
    border-top: 1px solid #E4D9C8;
}

.footer-main {
    background: #F3ECE3 !important;
}

.footer-bottom {
    background: #ECE4D8 !important;
    border-top: 1px solid #DED1BD !important;
}

.footer-heading,
.footer-subheading {
    color: #B89D6A !important;
}

.footer-logo-text,
.site-footer strong,
.site-footer b,
.footer-address strong {
    color: #2F2A26 !important;
}

.footer-slogan,
.footer-address p,
.footer-address a,
.footer-links a,
.footer-bottom p,
.footer-legal-links a,
.hours-list li,
.footer-hours-note {
    color: #6F675F !important;
}

.footer-links a:hover,
.footer-address a:hover,
.footer-legal-links a:hover {
    color: #B89D6A !important;
}

.footer-social a {
    border-color: #D8CBB9 !important;
    color: #6F675F !important;
    background: rgba(255,255,255,0.35);
}

.footer-social a:hover {
    border-color: #B89D6A !important;
    color: #B89D6A !important;
    background: #fff;
}

.hours-list li {
    border-bottom: 1px solid #DED1BD !important;
}

/* Kegelbahn-Teaser: helle Premium-Karte statt schwerem Anthrazit */
.kegelbahn-teaser-content {
    background: #F5EEE4 !important;
    color: #2F2A26 !important;
    border-left: 1px solid #E4D9C8;
}

.kegelbahn-teaser-content h2 {
    color: #2F2A26 !important;
}

.kegelbahn-teaser-content p {
    color: #6F675F !important;
}

.kegelbahn-teaser-content strong,
.kegelbahn-teaser-content b {
    color: #3B342E !important;
}

.kegelbahn-teaser-content .btn--primary {
    background: #D1BC8A !important;
    color: #2F2A26 !important;
    border-color: #D1BC8A !important;
}

.kegelbahn-teaser-content .btn--primary:hover {
    background: #B89D6A !important;
    border-color: #B89D6A !important;
    color: #fff !important;
}

/* Generelle warme Dunkelflächen, falls vorhanden */
.section--dark,
.kegelbahn-reservierung {
    background-color: #3B342E !important;
}

.cta-section:not(.home-freuen-section) {
    background: linear-gradient(135deg, #3B342E 0%, #5C534C 100%) !important;
}

/* Buttons etwas weicher */
.btn--primary {
    background-color: #D1BC8A;
    border-color: #D1BC8A;
    color: #2F2A26;
}

.btn--primary:hover {
    background-color: #B89D6A;
    border-color: #B89D6A;
    color: #fff;
}

@media (max-width: 1024px) {
    .kegelbahn-teaser-content {
        border-left: 0;
        border-top: 1px solid #E4D9C8;
    }
}

/* ============================================================
   TEXTFLOW FINAL – Startseite ohne unschöne 1–2-Wort-Umbrüche
   ============================================================ */
.hero-title,
.hero-subtitle,
.section-title,
.section-intro,
.service-card-title,
.service-card-text,
.menu-card-title,
.menu-card-text,
.kegelbahn-teaser-content h2,
.kegelbahn-teaser-content p,
.cta-section h2,
.cta-section p {
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

.hero-title,
.section-title,
.kegelbahn-teaser-content h2,
.cta-section h2 {
    text-wrap: balance;
}

.hero-subtitle,
.section-intro,
.service-card-text,
.menu-card-text,
.kegelbahn-teaser-content p,
.cta-section p {
    text-wrap: pretty;
}

/* Hero: große Headline, aber nicht so breit/eng, dass einzelne Wörter allein umbrechen */
.hero-content {
    max-width: 920px;
}

.hero-title {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(2.35rem, 4.7vw, 4.6rem) !important;
    line-height: 1.06 !important;
}

.hero-subtitle {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

/* Section-Header: bessere Lesebreite */
.section-header--center .section-title {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
}

.section-header--center .section-intro {
    max-width: 760px;
}

/* Karten: Text kompakter, damit nicht nur 1–2 Wörter in der letzten Zeile stehen */
.home-image-card__content {
    padding: clamp(1.35rem, 2.2vw, 2rem) !important;
}

.home-image-card .service-card-title,
.home-menu-image-card .menu-card-title {
    font-size: clamp(1.32rem, 1.7vw, 1.62rem) !important;
    line-height: 1.18 !important;
    margin-bottom: 0.7rem !important;
}

.home-image-card .service-card-text,
.home-menu-image-card .menu-card-text {
    font-size: clamp(0.95rem, 1.05vw, 1rem) !important;
    line-height: 1.55 !important;
}

/* Buttons sollen nicht unschön umbrechen */
.hero .btn,
.cta-section .btn {
    white-space: normal !important;
    min-width: fit-content;
}

/* Kegelbahn: Textblock etwas luftiger, aber nicht zu schmal */
.kegelbahn-teaser-content h2 {
    font-size: clamp(1.8rem, 3vw, 2.7rem) !important;
    line-height: 1.12 !important;
}

.kegelbahn-teaser-content p {
    font-size: clamp(1rem, 1.1vw, 1.08rem) !important;
    line-height: 1.7 !important;
}

/* Footer: Kontakt/Öffnungszeiten sauber lesbar, nicht unterschiedlich fett */
.site-footer .footer-address,
.site-footer .footer-address p,
.site-footer .footer-address a,
.site-footer .footer-address strong,
.site-footer .footer-address b,
.site-footer .footer-contact,
.site-footer .footer-contact p,
.site-footer .footer-contact a,
.site-footer .footer-contact strong,
.site-footer .footer-contact b {
    color: #2F2A26 !important;
    font-weight: 400 !important;
}

/* Mobile: bewusst etwas kleiner, damit keine einzelnen Wörter allein stehen */
@media (max-width: 768px) {
    .hero-title {
        font-size: clamp(2rem, 8.5vw, 3rem) !important;
        max-width: 680px;
    }

    .hero-subtitle {
        font-size: 1.05rem !important;
        max-width: 560px;
    }

    .section-title {
        font-size: clamp(1.75rem, 7vw, 2.35rem) !important;
        line-height: 1.14 !important;
    }

    .section-intro {
        font-size: 1rem !important;
        line-height: 1.65 !important;
    }

    .home-image-card,
    .home-menu-image-card {
        min-height: 250px !important;
    }

    .home-image-card__content {
        padding: 1.35rem !important;
    }

    .home-image-card .service-card-title,
    .home-menu-image-card .menu-card-title {
        font-size: 1.35rem !important;
    }

    .home-image-card .service-card-text,
    .home-menu-image-card .menu-card-text {
        font-size: 0.95rem !important;
        line-height: 1.55 !important;
    }

    .kegelbahn-teaser-content h2,
    .cta-section h2 {
        font-size: clamp(1.7rem, 7vw, 2.2rem) !important;
        line-height: 1.16 !important;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: clamp(1.9rem, 9vw, 2.45rem) !important;
    }

    .btn,
    .btn--lg {
        font-size: 0.98rem !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .hero .btn,
    .cta-section .btn {
        width: 100%;
        min-width: 0;
    }
}

/* ============================================================
   STARTSEITE STRUKTUR FINAL – Trust, Anlass, Karten-Streifen,
   Galerie & Anfrage-Ablauf
   ============================================================ */

.home-trust-section {
    background: #FAF6F0;
}

.home-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
}

.home-trust-card {
    background: #fff;
    border: 1px solid #E4D9C8;
    border-radius: var(--radius-xl);
    padding: var(--space-7, 1.75rem);
    box-shadow: 0 14px 38px rgba(59, 52, 46, 0.08);
}

.home-trust-card__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: var(--space-4);
    border-radius: 999px;
    background: #F3ECE3;
    color: #B89D6A;
    font-weight: 800;
    font-size: 0.85rem;
}

.home-trust-card h3 {
    font-size: clamp(1.15rem, 1.5vw, 1.35rem) !important;
    line-height: 1.2 !important;
    margin-bottom: var(--space-3);
    color: #2F2A26;
}

.home-trust-card p {
    font-size: 0.98rem !important;
    line-height: 1.65 !important;
    color: #6F675F;
    margin: 0;
}

.home-occasion-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-4);
}

.home-occasion-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 150px;
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    background: #fff;
    border: 1px solid #E4D9C8;
    box-shadow: 0 10px 28px rgba(59, 52, 46, 0.07);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.home-occasion-card:hover {
    opacity: 1;
    transform: translateY(-4px);
    border-color: #D1BC8A;
    box-shadow: 0 18px 44px rgba(59, 52, 46, 0.14);
}

.home-occasion-card span {
    color: #2F2A26;
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.2;
}

.home-occasion-card small {
    color: #6F675F;
    font-size: 0.9rem;
    line-height: 1.35;
    margin-top: var(--space-3);
}

.home-menu-strip {
    background: #FAF6F0;
}

.home-menu-strip__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
    gap: var(--space-8);
    align-items: center;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border-radius: var(--radius-xl);
    background: #fff;
    border: 1px solid #E4D9C8;
    box-shadow: 0 18px 50px rgba(59, 52, 46, 0.08);
}

.home-menu-strip .section-title {
    margin-bottom: var(--space-3) !important;
    font-size: clamp(1.7rem, 3vw, 2.8rem) !important;
}

.home-menu-strip p {
    margin: 0;
    color: #6F675F;
    font-size: 1.05rem !important;
    line-height: 1.65 !important;
}

.home-menu-strip__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: stretch;
}

.home-menu-strip__actions .btn {
    width: 100%;
}

.home-gallery-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-3);
}

.home-gallery-item {
    position: relative;
    min-height: 190px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    box-shadow: 0 10px 30px rgba(59, 52, 46, 0.12);
    isolation: isolate;
}

.home-gallery-item:nth-child(1),
.home-gallery-item:nth-child(2) {
    grid-column: span 2;
}

.home-gallery-item:nth-child(3),
.home-gallery-item:nth-child(4),
.home-gallery-item:nth-child(5),
.home-gallery-item:nth-child(6) {
    grid-column: span 1;
}

.home-gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(59,52,46,0.06) 0%, rgba(59,52,46,0.70) 100%);
    z-index: -1;
}

.home-gallery-item span {
    position: absolute;
    left: var(--space-4);
    bottom: var(--space-4);
    color: #fff;
    font-weight: 800;
    font-size: .95rem;
    text-shadow: 0 2px 12px rgba(0,0,0,.45);
}

.home-process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.home-process-step {
    position: relative;
    padding: var(--space-8);
    background: #fff;
    border: 1px solid #E4D9C8;
    border-radius: var(--radius-xl);
    box-shadow: 0 14px 38px rgba(59, 52, 46, 0.08);
}

.home-process-step span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: var(--space-4);
    border-radius: 999px;
    background: #D1BC8A;
    color: #2F2A26;
    font-weight: 900;
}

.home-process-step h3 {
    color: #2F2A26;
    font-size: clamp(1.2rem, 1.8vw, 1.55rem) !important;
    margin-bottom: var(--space-3);
}

.home-process-step p {
    margin: 0;
    color: #6F675F;
    font-size: 1rem !important;
    line-height: 1.65 !important;
}

/* Final CTA: doppelte Telefonzeile wurde im PHP entfernt; Buttons kompakt halten */
.home-freuen-section .btn-group {
    margin-top: var(--space-6);
}

@media (max-width: 1180px) {
    .home-trust-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .home-occasion-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .home-gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .home-gallery-item,
    .home-gallery-item:nth-child(1),
    .home-gallery-item:nth-child(2),
    .home-gallery-item:nth-child(3),
    .home-gallery-item:nth-child(4),
    .home-gallery-item:nth-child(5),
    .home-gallery-item:nth-child(6) {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    .home-trust-grid,
    .home-process-grid {
        grid-template-columns: 1fr;
    }

    .home-occasion-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .home-menu-strip__inner {
        grid-template-columns: 1fr;
        gap: var(--space-5);
        padding: var(--space-6);
    }

    .home-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .home-gallery-item {
        min-height: 150px;
    }

    .home-process-step,
    .home-trust-card {
        padding: var(--space-6);
    }
}

@media (max-width: 480px) {
    .home-occasion-grid,
    .home-gallery-grid {
        grid-template-columns: 1fr;
    }

    .home-occasion-card {
        min-height: auto;
        padding: var(--space-5);
    }

    .home-gallery-item {
        min-height: 190px;
    }

    .home-menu-strip__actions .btn {
        width: 100% !important;
    }
}

/* ============================================================
   STARTSEITE REPAIR FINAL – sauberer Umbau ohne Layoutbruch
   Basis: Struktur-Final CSS + gezielte Anpassungen
   ============================================================ */

/* Entfernt alte Dopplungsblöcke zuverlässig, falls sie in einer älteren PHP noch vorhanden sind */
.home-menu-strip,
.home-process-section {
    display: none !important;
}

/* Anlass-Kacheln: Bildkarten mit stabiler Grid-Darstellung */
.home-occasion-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(1rem, 2vw, 1.5rem) !important;
}

.home-occasion-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    min-height: 235px !important;
    padding: clamp(1.25rem, 2vw, 1.7rem) !important;
    overflow: hidden !important;
    isolation: isolate !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border: 0 !important;
    border-radius: var(--radius-xl, 20px) !important;
    box-shadow: 0 18px 48px rgba(59, 52, 46, 0.18) !important;
    transition: transform .22s ease, box-shadow .22s ease !important;
}

.home-occasion-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: #3B342E;
}

.home-occasion-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        180deg,
        rgba(59, 52, 46, 0.10) 0%,
        rgba(59, 52, 46, 0.38) 42%,
        rgba(59, 52, 46, 0.88) 100%
    );
}

.home-occasion-card:hover {
    opacity: 1 !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 26px 70px rgba(59, 52, 46, 0.26) !important;
}

.home-occasion-card span,
.home-occasion-card small {
    position: relative;
    z-index: 2;
    color: #fff !important;
    text-align: left !important;
    text-shadow: 0 2px 14px rgba(0,0,0,.42);
}

.home-occasion-card span {
    display: block;
    font-size: clamp(1.35rem, 2vw, 1.75rem) !important;
    line-height: 1.1 !important;
    font-weight: 850 !important;
    margin: 0 !important;
}

.home-occasion-card small {
    display: block;
    color: rgba(255,255,255,.86) !important;
    font-size: 0.98rem !important;
    line-height: 1.35 !important;
    margin-top: .55rem !important;
}

/* Anlass-Bilder mit Fallback-Bildern, falls occasion-*.jpg noch nicht hochgeladen ist */
.home-occasion-card--hochzeit {
    background-image: url('../img/occasion-hochzeit.jpg'), url('../img/card-veranstaltungen.jpg') !important;
}

.home-occasion-card--geburtstag {
    background-image: url('../img/occasion-geburtstag.jpg'), url('../img/home-wir-freuen-uns.jpg') !important;
}

.home-occasion-card--trauerkaffee {
    background-image: url('../img/occasion-trauerkaffee.jpg'), url('../img/card-veranstaltungen.jpg') !important;
}

.home-occasion-card--vereinsevent {
    background-image: url('../img/occasion-vereinsevent.jpg'), url('../img/hero-startseite.jpg') !important;
}

.home-occasion-card--business {
    background-image: url('../img/occasion-business-event.jpg'), url('../img/card-catering.jpg') !important;
}

.home-occasion-card--kegelabend {
    background-image: url('../img/occasion-kegelabend.jpg'), url('../img/home-kegelbahn.jpg') !important;
}

/* Galerie: immer volle 6er-Darstellung ohne kaputte Reihen */
.home-gallery-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(.8rem, 1.5vw, 1rem) !important;
}

.home-gallery-item,
.home-gallery-item:nth-child(1),
.home-gallery-item:nth-child(2),
.home-gallery-item:nth-child(3),
.home-gallery-item:nth-child(4),
.home-gallery-item:nth-child(5),
.home-gallery-item:nth-child(6) {
    grid-column: auto !important;
    min-height: clamp(190px, 18vw, 260px) !important;
}

.home-gallery-item {
    position: relative !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center !important;
    box-shadow: 0 14px 38px rgba(59, 52, 46, 0.14) !important;
}

.home-gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(59,52,46,0.06) 0%, rgba(59,52,46,0.70) 100%);
}

.home-gallery-item span {
    position: absolute;
    left: var(--space-4);
    bottom: var(--space-4);
    z-index: 2;
    color: #fff !important;
    font-weight: 800;
    font-size: .95rem;
    text-shadow: 0 2px 12px rgba(0,0,0,.45);
}

@media (max-width: 768px) {
    .home-occasion-grid,
    .home-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .home-occasion-card {
        min-height: 210px !important;
    }

    .home-gallery-item,
    .home-gallery-item:nth-child(1),
    .home-gallery-item:nth-child(2),
    .home-gallery-item:nth-child(3),
    .home-gallery-item:nth-child(4),
    .home-gallery-item:nth-child(5),
    .home-gallery-item:nth-child(6) {
        min-height: 170px !important;
    }
}

@media (max-width: 480px) {
    .home-occasion-grid,
    .home-gallery-grid {
        grid-template-columns: 1fr !important;
    }

    .home-occasion-card {
        min-height: 210px !important;
    }

    .home-gallery-item,
    .home-gallery-item:nth-child(1),
    .home-gallery-item:nth-child(2),
    .home-gallery-item:nth-child(3),
    .home-gallery-item:nth-child(4),
    .home-gallery-item:nth-child(5),
    .home-gallery-item:nth-child(6) {
        min-height: 210px !important;
    }
}

/* ============================================================
   ANLASS-KACHELN – Hintergrundbilder erzwingen
   ============================================================ */

.occasion-card,
.home-occasion-card {
    position: relative !important;
    overflow: hidden !important;
    min-height: 235px !important;
    border-radius: 20px !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    color: #fff !important;
    isolation: isolate !important;
}

.occasion-card::before,
.home-occasion-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
        180deg,
        rgba(47, 42, 38, 0.18) 0%,
        rgba(47, 42, 38, 0.48) 45%,
        rgba(47, 42, 38, 0.88) 100%
    ) !important;
    z-index: 1 !important;
}

.occasion-card > *,
.home-occasion-card > * {
    position: relative !important;
    z-index: 2 !important;
}

.occasion-card h3,
.occasion-card p,
.home-occasion-card h3,
.home-occasion-card p {
    color: #fff !important;
}

/* Bild-Zuordnung */
.occasion-card--hochzeit,
.home-occasion-card--hochzeit {
    background-image: url("../img/occasion-hochzeit.jpg") !important;
}

.occasion-card--geburtstag,
.home-occasion-card--geburtstag {
    background-image: url("../img/occasion-geburtstag.jpg") !important;
}

.occasion-card--trauerkaffee,
.home-occasion-card--trauerkaffee {
    background-image: url("../img/occasion-trauerkaffee.jpg") !important;
}

.occasion-card--vereinsevent,
.home-occasion-card--vereinsevent {
    background-image: url("../img/occasion-vereinsevent.jpg") !important;
}

.occasion-card--business-event,
.home-occasion-card--business-event {
    background-image: url("../img/occasion-business-event.jpg") !important;
}

.occasion-card--kegelabend,
.home-occasion-card--kegelabend {
    background-image: url("../img/occasion-kegelabend.jpg") !important;
}

@media (max-width: 768px) {
    .occasion-card,
    .home-occasion-card {
        min-height: 220px !important;
    }
}

/* ============================================================
   TYPOGRAFIE FINAL – einheitliche moderne Schrift überall
   Ziel: keine Mischung aus Serif + Sans, sondern ein konsistenter Look
   ============================================================ */
:root {
    --font-heading: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

body,
button,
input,
textarea,
select,
a,
p,
li,
span,
small,
strong,
b,
label,
.site-header,
.site-footer,
.nav-menu,
.btn,
.card,
.service-card,
.home-image-card,
.home-trust-card,
.home-occasion-card,
.home-gallery-item,
.kegelbahn-teaser,
.cta-section {
    font-family: var(--font-body) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.hero-title,
.section-title,
.service-card-title,
.menu-card-title,
.home-trust-card h3,
.home-occasion-card span,
.kegelbahn-teaser-content h2,
.cta-section h2,
.logo-text,
.footer-logo-text {
    font-family: var(--font-heading) !important;
    font-weight: 750 !important;
    letter-spacing: -0.025em;
}

body {
    font-size: 1.03rem;
    line-height: 1.7;
}

p,
li,
.service-card-text,
.card-text,
.menu-card-text,
.section-intro,
.footer-slogan,
.footer-address p,
.footer-address a,
.footer-links a,
.hours-list li {
    font-size: clamp(0.98rem, 0.95vw, 1.05rem) !important;
    line-height: 1.7 !important;
}

.nav-menu > .menu-item > a,
.nav-menu .sub-menu .menu-item a {
    font-size: 0.95rem !important;
}

.btn {
    font-size: 1rem !important;
    font-weight: 700 !important;
}

@media (max-width: 768px) {
    body {
        font-size: 1rem;
    }

    p,
    li,
    .service-card-text,
    .card-text,
    .menu-card-text,
    .section-intro {
        font-size: 0.98rem !important;
        line-height: 1.65 !important;
    }

    .btn {
        font-size: 0.98rem !important;
    }
}

/* ============================================================
   FINAL PATCH – CTA-Ausrichtung Angebot + Anlass-CTAs
   Stand: 2026-04-28
   Ziel: Alle Buttons auf gleicher Höhe, Anlass-Kacheln mit CTA
   ============================================================ */

/* Unser Angebot: Inhalte gleichmäßig aufziehen, CTA immer unten */
.services-grid .home-image-card {
    min-height: 340px !important;
    align-items: stretch !important;
}

.services-grid .home-image-card__content {
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.services-grid .home-image-card .service-card-text {
    flex: 1 1 auto !important;
    margin-bottom: 1.25rem !important;
}

.services-grid .home-image-card .btn {
    margin-top: auto !important;
    align-self: flex-start !important;
}

/* Anlass-Kacheln: CTA wie bei Angebot unten links */
.home-occasion-card {
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    min-height: 250px !important;
    padding: 0 !important;
}

.home-occasion-card__content {
    position: relative !important;
    z-index: 3 !important;
    width: 100% !important;
    min-height: 100% !important;
    padding: clamp(1.25rem, 2vw, 1.7rem) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
}

.home-occasion-card__title,
.home-occasion-card__text,
.home-occasion-card__cta {
    position: relative !important;
    z-index: 4 !important;
    color: #fff !important;
    text-align: left !important;
    text-shadow: 0 2px 14px rgba(0,0,0,.45) !important;
}

.home-occasion-card__title {
    display: block !important;
    font-family: var(--font-heading) !important;
    font-size: clamp(1.35rem, 2vw, 1.75rem) !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    margin: 0 !important;
}

.home-occasion-card__text {
    display: block !important;
    color: rgba(255,255,255,.88) !important;
    font-size: 0.98rem !important;
    line-height: 1.35 !important;
    margin-top: .55rem !important;
    margin-bottom: 1.15rem !important;
}

.home-occasion-card__cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .45rem !important;
    margin-top: auto !important;
    padding: .78rem 1.05rem !important;
    border-radius: var(--radius-sm, 4px) !important;
    background: var(--color-primary, #D1BC8A) !important;
    color: var(--color-dark, #3B342E) !important;
    text-shadow: none !important;
    font-size: .92rem !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
    transition: background-color .22s ease, color .22s ease, transform .22s ease !important;
}

.home-occasion-card__cta::after {
    content: "→";
    font-weight: 800;
}

.home-occasion-card:hover .home-occasion-card__cta {
    background: #fff !important;
    color: var(--color-dark, #3B342E) !important;
    transform: translateY(-1px) !important;
}

/* Alte Regeln für direkte span/small bleiben kompatibel, aber neue Klassen gewinnen */
.home-occasion-card > span,
.home-occasion-card > small {
    display: none !important;
}

/* Business Event: beide Klassennamen absichern */
.home-occasion-card--business,
.home-occasion-card--business-event {
    background-image: url('../img/occasion-business-event.jpg') !important;
}

@media (max-width: 768px) {
    .services-grid .home-image-card {
        min-height: 270px !important;
    }

    .home-occasion-card {
        min-height: 230px !important;
    }

    .home-occasion-card__content {
        padding: 1.35rem !important;
    }

    .home-occasion-card__title {
        font-size: 1.35rem !important;
    }

    .home-occasion-card__text {
        font-size: .95rem !important;
    }

    .home-occasion-card__cta {
        width: auto !important;
        padding: .72rem 1rem !important;
        font-size: .9rem !important;
    }
}

@media (max-width: 480px) {
    .services-grid .home-image-card,
    .home-occasion-card {
        min-height: 240px !important;
    }

    .home-occasion-card__cta {
        width: 100% !important;
    }
}

/* ============================================================
   FINAL: Anlass-Kacheln optisch wie "Unser Angebot"
   - CTA-Größe, Position und Typografie an Angebots-Kacheln angepasst
   ============================================================ */
.home-occasion-grid {
    align-items: stretch !important;
}

.home-occasion-grid .home-occasion-card {
    min-height: 235px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
}

.home-occasion-grid .home-occasion-card__content {
    width: 100% !important;
    min-height: 100% !important;
    padding: clamp(1.35rem, 2.2vw, 2rem) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
}

.home-occasion-grid .home-occasion-card__title {
    display: block !important;
    font-family: var(--font-heading) !important;
    font-size: clamp(1.32rem, 1.7vw, 1.62rem) !important;
    line-height: 1.18 !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    color: #fff !important;
    margin: 0 0 .45rem 0 !important;
    text-shadow: 0 2px 14px rgba(0,0,0,.42) !important;
}

.home-occasion-grid .home-occasion-card__text {
    display: block !important;
    font-family: var(--font-body) !important;
    font-size: clamp(.95rem, 1.05vw, 1rem) !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
    color: rgba(255,255,255,.88) !important;
    margin: 0 0 var(--space-5, 1.25rem) 0 !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.34) !important;
}

.home-occasion-grid .home-occasion-card__cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: flex-start !important;
    width: auto !important;
    min-width: 170px !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    padding: 12px 18px !important;
    border-radius: var(--radius-sm, 4px) !important;
    background-color: var(--color-primary, #D1BC8A) !important;
    border: 2px solid var(--color-primary, #D1BC8A) !important;
    color: var(--color-dark, #3B342E) !important;
    font-family: var(--font-body) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: .01em !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

.home-occasion-grid .home-occasion-card__cta::after {
    content: " →" !important;
    margin-left: .25rem !important;
    font-weight: 800 !important;
}

.home-occasion-grid .home-occasion-card:hover .home-occasion-card__cta {
    background-color: #fff !important;
    border-color: #fff !important;
    color: var(--color-dark, #3B342E) !important;
    transform: none !important;
}

@media (max-width: 768px) {
    .home-occasion-grid .home-occasion-card {
        min-height: 250px !important;
    }

    .home-occasion-grid .home-occasion-card__content {
        padding: 1.35rem !important;
    }

    .home-occasion-grid .home-occasion-card__title {
        font-size: 1.35rem !important;
    }

    .home-occasion-grid .home-occasion-card__text {
        font-size: .95rem !important;
        line-height: 1.55 !important;
    }

    .home-occasion-grid .home-occasion-card__cta {
        width: auto !important;
        min-width: 165px !important;
        padding: .72rem 1rem !important;
        font-size: .95rem !important;
    }
}

@media (max-width: 480px) {
    .home-occasion-grid .home-occasion-card {
        min-height: 240px !important;
    }

    .home-occasion-grid .home-occasion-card__cta {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* ============================================================
   HEADER-ACTIONS: Reservieren-CTA + Telefon-Link
   ============================================================ */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.header-tel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-dark);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    transition: color var(--transition), background-color var(--transition);
    min-width: 40px;
    min-height: 40px;
}

.header-tel:hover {
    color: var(--color-primary-dark);
    background-color: rgba(209,188,138,0.12);
    opacity: 1;
}

.header-tel svg {
    flex-shrink: 0;
}

/* Tel-Icon nur auf Mobile (auf Desktop steht die Nummer im Footer) */
.header-tel--mobile-only {
    display: none;
}

@media (max-width: 1024px) {
    .header-tel--mobile-only {
        display: inline-flex;
    }
}

/* ============================================================
   GALERIE: echte Bilder statt Platzhalter
   ============================================================ */
.galerie-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    margin: 0;
    aspect-ratio: 3 / 2;
    background-color: var(--color-bg-alt);
}

.galerie-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}

.galerie-item:hover img {
    transform: scale(1.04);
}

.galerie-item-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--space-3) var(--space-4);
    background: linear-gradient(to top, rgba(20,20,20,0.78), rgba(20,20,20,0));
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 500;
    pointer-events: none;
}

/* ============================================================
   HEADER-FIXES (v3): Logo-Sichtbarkeit Desktop, Mobile-Trennlinien
   ============================================================ */

/* Logo darf nie geschrumpft werden – Bug: auf Desktop unsichtbar, weil
   .header-actions + .site-nav zusammen das Logo aus dem Flex-Container drücken */
.site-logo {
    flex-shrink: 0;
}

.site-logo a {
    display: inline-flex !important;
    align-items: center;
}

.site-logo img {
    display: block;
    max-width: 100%;
    height: 48px;
    width: auto;
}

/* header-actions soll nie schrumpfen, damit Logo + Nav den Platz teilen */
.header-actions {
    flex-shrink: 0;
}

/* .site-nav darf schrumpfen, damit auf engeren Desktop-Breiten zuerst die
   Nav-Gaps kleiner werden, bevor Logo oder CTA verschwinden */
.site-nav {
    min-width: 0;
}

/* Mobile-Burgermenü: doppelte Trennlinie entfernen.
   Bug: letztes .menu-item hat border-bottom UND .header-social hat
   border-top + margin/padding → wirkt wie leerer Eintrag vor den Socials. */
@media (max-width: 1024px) {
    .nav-menu > .menu-item:last-child {
        border-bottom: none;
    }

    .header-social {
        border-top: none !important;
        margin-top: var(--space-4) !important;
        padding-top: var(--space-4) !important;
    }
}

/* ============================================================
   FOOTER-CREDIT (v4): "Website by CompleteOne" zentriert, dünn
   ============================================================ */
.footer-credit {
    text-align: center;
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}

.footer-credit a {
    color: #00B8C9;
    font-weight: 300;
    font-size: var(--text-xs);
    letter-spacing: 0.02em;
    transition: opacity var(--transition);
}

.footer-credit a:hover {
    opacity: 0.75;
}