/*
 * Theme-Anpassungen für das öffentliche Frontend (Startseite, Leistungen,
 * Kontakt, Anfrage-Konfigurator, Impressum, Datenschutz).
 *
 * Reine CSS-Overrides auf Basis der Bootstrap-5.3-CSS-Variablen (--bs-*,
 * siehe Bootstrap-Dokumentation "CSS variables") - kein Sass-Build, keine
 * Änderung an der vendorten Bootstrap-Datei selbst nötig (Architecture.md
 * - Bootstrap: "Eigenes CSS nur bei Bedarf", "Kein zusätzliches CSS
 * Framework"). Wird ausschließlich von layouts/main.php eingebunden -
 * das Backend (layouts/admin.php, layouts/guest.php, layouts/print.php)
 * bleibt bewusst unverändert.
 *
 * Farb-/Schrift-Tokens stammen aus der vom Auftraggeber vorgegebenen
 * Referenzgestaltung (warmes Creme, Anthrazit, Gold-Akzent; Playfair
 * Display für Überschriften, Open Sans als Fließtext).
 */

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('/assets/fonts/open-sans-var.woff2') format('woff2');
}

@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/playfair-display-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Playfair Display';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/playfair-display-700italic.woff2') format('woff2');
}

:root {
    --brand-cream: #f9f8f6;
    --brand-ink: #212121;
    --brand-gold: #c6a249;
    --brand-gold-dark: #af8d3d;
    --brand-beige: #ede8de;
    --brand-border: #e7e2da;
    --brand-heading-font: 'Playfair Display', Georgia, serif;
    --brand-body-font: 'Open Sans', system-ui, -apple-system, sans-serif;

    --bs-body-bg: var(--brand-cream);
    --bs-body-color: var(--brand-ink);
    --bs-body-font-family: var(--brand-body-font);
    --bs-border-color: var(--brand-border);
    --bs-border-radius: 0.6rem;
    --bs-border-radius-lg: 0.85rem;
    --bs-border-radius-sm: 0.4rem;
    --bs-link-color: var(--brand-ink);
    --bs-link-color-rgb: 33, 33, 33;
    --bs-link-hover-color: var(--brand-gold-dark);
    --bs-link-hover-color-rgb: 175, 141, 61;
    --bs-primary: var(--brand-ink);
    --bs-primary-rgb: 33, 33, 33;
}

body {
    font-family: var(--brand-body-font);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--brand-heading-font);
    font-weight: 700;
}

.btn {
    --bs-btn-border-radius: 50rem;
    --bs-btn-font-weight: 600;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-ink);
    --bs-btn-border-color: var(--brand-ink);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #000;
    --bs-btn-hover-border-color: #000;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #000;
    --bs-btn-active-border-color: #000;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--brand-ink);
    --bs-btn-disabled-border-color: var(--brand-ink);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-ink);
    --bs-btn-border-color: var(--brand-ink);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-ink);
    --bs-btn-hover-border-color: var(--brand-ink);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-ink);
    --bs-btn-active-border-color: var(--brand-ink);
}

.btn-outline-secondary {
    --bs-btn-border-color: var(--brand-border);
    --bs-btn-color: var(--brand-ink);
    --bs-btn-hover-bg: var(--brand-beige);
    --bs-btn-hover-color: var(--brand-ink);
    --bs-btn-hover-border-color: var(--brand-border);
}

/* Einzige Akzentfarbe: bislang für den Haupt-CTA "Catering anfragen"
   genutzt (layouts/main.php) - Gold statt Bootstrap-Standardgelb. */
.btn-warning {
    --bs-btn-color: var(--brand-ink);
    --bs-btn-bg: var(--brand-gold);
    --bs-btn-border-color: var(--brand-gold);
    --bs-btn-hover-color: var(--brand-ink);
    --bs-btn-hover-bg: var(--brand-gold-dark);
    --bs-btn-hover-border-color: var(--brand-gold-dark);
    --bs-btn-active-color: var(--brand-ink);
    --bs-btn-active-bg: var(--brand-gold-dark);
    --bs-btn-active-border-color: var(--brand-gold-dark);
}

.card {
    --bs-card-border-color: var(--brand-border);
    --bs-card-border-radius: 1rem;
}

.navbar-brand {
    font-family: var(--brand-heading-font);
    font-weight: 700;
    color: var(--brand-ink) !important;
}

.badge {
    --bs-badge-border-radius: 50rem;
    --bs-badge-font-weight: 600;
}

/* Heller statt dunkler Footer-Hintergrund, damit das (dunkel gezeichnete)
   Logo lesbar bleibt - siehe partials/footer.php. */
.site-footer {
    background-color: var(--brand-beige);
}

/* Startseiten-Hero (home/index.php) */
.hero-section {
    background-color: var(--brand-beige);
    border-color: var(--brand-border) !important;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #6b6558;
    margin-bottom: 1rem;
}

.hero-eyebrow-line {
    display: inline-block;
    width: 2rem;
    height: 1px;
    background-color: var(--brand-gold);
}

.text-gold {
    color: var(--brand-gold-dark);
}

.hero-image-wrap {
    position: relative;
}

.hero-image-decoration {
    position: absolute;
    inset: -1rem;
    background-color: rgba(198, 162, 73, 0.12);
    border-radius: 2rem;
    transform: rotate(-2deg);
}

.hero-image {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 1.5rem;
    box-shadow: 0 1.5rem 3rem rgba(33, 33, 33, 0.18);
}

@media (min-width: 992px) {
    .py-lg-6 {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }
}

/* Zusammenfassung (Anfrage-Konfigurator): `max-width` allein auf einer
   `<td>` wirkt bei Standard-Tabellenlayout (`table-layout: auto`) nicht
   zuverlässig — der Browser bemisst Spaltenbreiten anhand des Inhalts
   aller Zeilen und ignoriert dabei `max-width` einzelner Zellen, wodurch
   die Anzahl-Spalte in den Tabellen "Catering"/"Ausstattung"/"Personal"
   je nach Inhalt unterschiedlich breit ausfiel. `table-layout: fixed`
   erzwingt stattdessen die in der ersten Zeile (hier: `<colgroup>`)
   festgelegten Spaltenbreiten für die gesamte Tabelle, unabhängig vom
   Inhalt nachfolgender Zeilen (auch bei `colspan`, z.B. den
   "Summe ..."-Fußzeilen). */
.summary-table {
    table-layout: fixed;
}