/* =====================================================================
   subpage.css — gemeinsamer Rahmen der Unterseiten im Look der Startseite
   (Farben, Kopfzeile, dunkles Seitenkopf-Band, Knöpfe, Footer).
   Markup dazu: assets/subpage.php. Eingeführt 17.09.2026.
   /assets wird ein Jahr "immutable" gecacht: nach jeder Änderung
   CZ_SUB_VERSION in assets/subpage.php hochzählen.
   ===================================================================== */

/* =================================================================
   FONT — Selbst-gehostet, kein Google-Fonts-Request, kein FOIT.
   font-display: swap → Fallback-Font sofort, Oswald wenn geladen.
================================================================= */
@font-face {
    font-family: 'Oswald';
    src: url('/fonts/oswald-bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
    font-style: normal;
}

/* =================================================================
   CUSTOM PROPERTIES — Farbwelt der Startseite (assets/home.css):
   Papier als Grund, Tinte für Schrift, Kopf- und Fußzeile,
   Gelb als Akzent. Auf Gelb steht immer Tinte, nie Weiß.
================================================================= */
:root {
    --ink:      #191c19;
    --paper:    #faf7ef;
    --yellow:   #f8c742;
    --yellow-h: #ffda69;
    --line:     #deddd3;
    --brand-a:  rgba(248,199,66,.24);
    --brand-b:  #dba825;
    /* Dunkles Bernstein: der Gelb-Ton, der auf Papier noch lesbar ist */
    --amber:    #7a5410;
    --focus:    #bc490c;
    --bg:       var(--paper);
    --surface:  #fffdf8;
    --elevated: #eeeadf;
    --border:   var(--line);
    --t1: #191c19;
    --t2: #33372f;
    --t3: #5d6159;
    --r-sm:  .3125rem;
    --r-md:  .5625rem;
    --r-lg:  .75rem;
    --shadow-soft: 0 10px 22px rgba(0,0,0,.08);
    /* Höhe der Kopfzeile; assets/subpage.js misst nach, das hier ist der Startwert */
    --hh: 93px;
    /* Mindest-Touch-Target WCAG 2.5.5 */
    --tap: 44px;
}
@media (max-width: 760px) { :root { --hh: 105px; } }

/* =================================================================
   RESET
================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-padding-top: calc(var(--hh) + 8px);
    scroll-behavior: smooth;
}
/* Kein Jitter für Motion-Reduce-Nutzer */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* =================================================================
   BASE — Mobile First (320 px aufwärts)
================================================================= */
body {
    background: var(--bg);
    color: var(--t2);
    /* System-Font-Stack: 0 KB Netzwerk, sofort gerendert */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Tap-Highlight entfernen, wir setzen eigene :active-States */
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
svg { display: block; }
a   { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
.icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.font-display { font-family: 'Oswald', Impact, system-ui, sans-serif; font-weight: 700; }

/* Fokusring wie auf der Startseite: Rostrot auf Papier, Gelb auf Tinte */
:where(a, button, summary):focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.site-header :focus-visible,
.page-hero :focus-visible,
.site-footer :focus-visible { outline-color: var(--yellow); }
.skip-link { position: fixed; top: -100px; left: 12px; padding: 12px 20px; background: #fff; color: #111; z-index: 200; }
.skip-link:focus { top: 12px; }

/* =================================================================
   LAYOUT
================================================================= */
.container {
    width: 100%;
    padding-inline: 1rem; /* 16px Gutter — bequem auf 320px */
    margin-inline: auto;
}
/* Progressive Enhancement: Desktop bekommt Max-Width */
@media (min-width: 768px) {
    .container { max-width: 896px; padding-inline: 1.5rem; }
}
/* Kopf- und Fußzeile laufen so breit wie auf der Startseite */
.wrap { width: min(1180px, calc(100% - 64px)); margin-inline: auto; }
@media (max-width: 760px) { .wrap { width: calc(100% - 36px); } }

/* =================================================================
   SITE HEADER — Sticky, übernommen aus assets/home.css
================================================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--ink);
    color: var(--paper);
    border-bottom: 1px solid #393e34;
    line-height: 1.65;
}
.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 28px;
    min-height: 92px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 62px; height: auto; border-radius: 4px; }
.brand > span {
    font-family: 'Oswald', Impact, sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: .04em;
}
.brand small {
    display: block;
    font: 600 .58rem/1.6 system-ui, sans-serif;
    letter-spacing: .09em;
    color: #d0d1c6;
}
.site-header nav { display: flex; gap: 26px; align-items: center; }
.site-header nav a {
    display: flex;
    align-items: center;
    min-height: 46px;
    font-size: .85rem;
    font-weight: 650;
}
.site-header nav a:hover,
.site-header nav a[aria-current="page"] { color: var(--yellow); }
.header-route {
    font-size: .85rem;
    font-weight: 750;
    padding: 10px 16px;
    border: 1px solid #777c71;
    border-radius: 4px;
    white-space: nowrap;
}
.header-route span { margin-left: 15px; }

@media (min-width: 761px) and (max-width: 1050px) {
    .brand small { display: none; }
    .brand > span { font-size: 1.15rem; }
    .site-header nav { gap: 16px; }
    .header-route { display: none; }
}
@media (max-width: 760px) {
    .header-inner { min-height: 76px; gap: 4px; flex-wrap: wrap; padding-top: 8px; }
    .brand img { width: 44px; }
    .brand > span { font-size: 1.15rem; }
    .brand small { font-size: .48rem; }
    .header-route { font-size: .76rem; padding: 8px 12px; min-height: 44px; display: flex; align-items: center; }
    .header-route span { margin-left: 8px; }
    .site-header nav {
        order: 3;
        justify-content: space-between;
        gap: 16px;
        width: 100%;
        border-top: 1px solid #393e34;
        margin-top: 7px;
    }
    .site-header nav a { font-size: .74rem; min-height: 40px; }
}
@media (max-width: 360px) {
    .brand small { display: none; }
    .brand img { width: 38px; }
    .brand > span { font-size: 1.1rem; }
}

/* =================================================================
   SEITENKOPF — dunkles Band wie der Hero der Startseite,
   inklusive Öffnungsstatus (assets/home.js hält ihn aktuell)
================================================================= */
.page-hero {
    background: var(--ink);
    color: var(--paper);
    padding-block: 2.5rem 2.75rem;
}
.eyebrow {
    font-size: .73rem;
    font-weight: 800;
    letter-spacing: .15em;
    margin-bottom: 14px;
    color: var(--yellow);
}
.page-title {
    font-size: clamp(2.6rem, 6vw, 4rem);
    line-height: 1.07;
    letter-spacing: -.02em;
    color: var(--paper);
    /* Lange Einzelwörter wie "Datenschutzerklärung" passen auf 320 px sonst
       nicht in die Zeile und schieben die Seite seitlich auf */
    hyphens: auto;
    overflow-wrap: break-word;
}
.page-intro {
    margin-top: 1rem;
    color: #e3e2d8;
    font-size: 1rem;
    line-height: 1.6;
    max-width: 46rem;
}
.page-intro a { color: var(--paper); font-weight: 650; text-decoration: underline; text-underline-offset: 4px; }
.page-intro a:hover { color: var(--yellow); }

.opening-summary { margin-top: 1.25rem; }
.opening-state { font-weight: 750; font-size: .94rem; line-height: 1.45; }
.opening-state::before {
    content: '';
    display: inline-block;
    width: 9px; height: 9px;
    margin-right: 9px;
    background: #f3c455;
    border-radius: 50%;
}
.opening-state[data-state="open"] { color: #b4e3b6; }
.opening-state[data-state="open"]::before { background: #b4e3b6; }
.opening-summary p:not(:first-child) { font-size: .83rem; color: #dadbd0; margin-top: 3px; }

.page-address { font-size: .88rem; color: #e3e2d8; margin-top: 14px; }
/* Route und Anrufen: an der Stelle, wo die Startseite ihre Hero-Knöpfe hat */
.page-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.5rem; }
.order-link { font-size: .83rem; color: #d0d1c6; margin-top: 17px; }
.order-link a { color: var(--paper); font-weight: 650; text-decoration: underline; text-underline-offset: 4px; }
.order-link a:hover { color: var(--yellow); }

@media (max-width: 760px) {
    .page-hero { padding-block: 1.75rem 2rem; }
    .eyebrow { font-size: .61rem; letter-spacing: .11em; margin-bottom: 10px; }
    .page-intro { font-size: .9rem; }
    .page-address { font-size: .78rem; margin-top: 12px; }
    .opening-state { font-size: .85rem; }
    .opening-summary p:not(:first-child) { font-size: .77rem; }
    .page-actions { flex-wrap: nowrap; gap: 9px; margin-top: 1.25rem; }
    .page-actions .btn { flex: 1; font-size: .8rem; padding: 12px 11px; gap: 8px; }
    .order-link { font-size: .78rem; margin-top: 13px; }
}

/* =================================================================
   BUTTONS — Alle Touch-Targets ≥ 44px per WCAG 2.5.5
================================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    min-height: var(--tap);
    min-width:  var(--tap);
    padding: 0 1.125rem;
    border-radius: var(--r-sm);
    font-weight: 750;
    font-size: .9375rem;
    cursor: pointer;
    border: none;
    text-decoration: none;
    /* Alle Transitions in EINER property → performance-freundlicher */
    transition: background-color .15s, transform .1s, border-color .15s, color .15s;
    touch-action: manipulation; /* Eliminiert 300ms-Tap-Delay */
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    white-space: nowrap;
}
.btn--lg { min-height: 52px; padding: 13px 23px; gap: 20px; }
/* Umrandeter Knopf auf dunklem Grund, wie .button-outline der Startseite */
.btn--outline { background: transparent; color: var(--paper); border: 2px solid #777c71; }
.btn--outline:hover { border-color: var(--yellow); color: var(--yellow); }
.btn--outline:active { transform: scale(.962); }
.btn--primary { background: var(--yellow); color: var(--ink); }
.btn--primary:hover  { background: var(--yellow-h); }
/* :active → simuliert physisches Drücken — "taktiles" Feedback < 50ms */
.btn--primary:active { transform: scale(.962); background: #eab52c; }

.btn--icon {
    padding: 0; width: var(--tap);
    background: var(--surface);
    color: var(--ink);
    border: 1px solid #b9b8ad;
}
.btn--icon:hover  { border-color: var(--ink); }
.btn--icon:active { transform: scale(.92); }

/* Pflichthinweis nach Art. 44 LMIV i. V. m. § 4 LMIDV: Angaben zu
   Allergenen und Zusatzstoffen muessen vor dem Kauf und ohne Umweg
   zugaenglich sein. */
.allergen-note {
    margin: 2rem auto 0;
    max-width: 62rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--elevated);
    border-left: 3px solid #a66d0e;
}
.allergen-note__text { flex: 1 1 20rem; margin: 0; color: #4d514a; font-size: .9375rem; line-height: 1.5; }
.allergen-note__text strong { color: var(--t1); }

/* =================================================================
   SITE FOOTER — übernommen aus assets/home.css
================================================================= */
.site-footer {
    background: var(--ink);
    color: var(--paper);
    /* unten Luft für den Cookie-Knopf (fest unten links, 15 px + 44 px) */
    padding-block: 44px calc(76px + env(safe-area-inset-bottom));
    line-height: 1.65;
}
.footer-top {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    padding-bottom: 30px;
    border-bottom: 1px solid #444b3e;
}
.footer-brand { font-family: 'Oswald', Impact, sans-serif; font-weight: 700; font-size: 1.6rem; }
.footer-brand span { display: block; font: 400 .84rem/1.8 system-ui, sans-serif; color: #d0d1c6; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 4px 26px; padding-block: 20px; }
.site-footer nav a,
.site-footer nav button {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: .77rem;
    text-decoration: underline;
    text-underline-offset: 4px;
}
/* "Chatbot fragen": Button im Link-Look, home.js blendet ihn ein */
.site-footer nav button { border: 0; padding: 0; background: none; cursor: pointer; }
.site-footer nav button[hidden] { display: none; }
.site-footer nav a:hover,
.site-footer nav a[aria-current="page"],
.site-footer nav button:hover { color: var(--yellow); }
.site-footer .small { font-size: .82rem; line-height: 1.6; color: #bfc3b5; }
@media (max-width: 760px) {
    .footer-top { flex-direction: column; align-items: flex-start; }
    .site-footer { padding-top: 35px; }
    .site-footer nav { gap: 2px 22px; }
}

/* Chatbot: schwebender "Hilfe"-Knopf aus, erreichbar über den Footer
   (wie auf der Startseite) */
#cb-toggle { display: none !important; }
#gemini-widget-root { z-index: 90; }