/* Mein Fest — Portal-Theme (Karnbachs-CI)
 * Tokens 1:1 aus dem bestehenden Sitzplan-Gast-Portal (client-public/index.html),
 * damit sich das Kundenportal wie dessen „großer Bruder" anfühlt.
 * Light = :root, Dark = [data-theme="dark"] ODER System-Dark ohne explizite Wahl. */

/* Schriften selbst gehostet (Review A1 #23 — keine IP-Übermittlung an Google).
 * Quelle: Google Fonts CSS2 (Chrome-UA, 25.08.2026), nur latin + latin-ext.
 * Cinzel v26 ist variabel (wght 400–600 in einer Datei), EB Garamond v33 je Stil. */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../assets/fonts/cinzel-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../assets/fonts/cinzel-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../assets/fonts/ebgaramond-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../assets/fonts/ebgaramond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('../assets/fonts/ebgaramond-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('../assets/fonts/ebgaramond-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #f6f2ea;
  --surface: #ffffff;
  --surface-2: #f1ebe0;
  --text: #272726;
  --text-2: #6b665c;
  --text-3: #9c9588;
  --line: #e9e2d4;
  --line-strong: #d8cfbd;
  --accent: #a8780a;
  --accent-soft: #f6ead0;
  --accent-strong: #87600a;
  --on-accent: #fffdf8;
  --danger: #c0392b;
  --success: #1f7a3d;
  --warning: #c87f0a;
  --warning-soft: #fbf1dd;
  --info: #3b5b8c;
  --info-soft: #e6ecf5;
  --brand-green: #104f2a;
  --backdrop: rgba(39, 39, 38, 0.45);

  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 14px 38px rgba(0, 0, 0, 0.16);
  --touch: 44px;
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);

  --font-display: 'Cinzel', Georgia, 'Times New Roman', serif;
  --font-name: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --logo: url('../assets/karnbachs-logo.png');
  color-scheme: light;
}

[data-theme='dark'] {
  --bg: #1a1917;
  --surface: #272726;
  --surface-2: #34322e;
  --text: #f5f1e7;
  --text-2: #b3ab9b;
  --text-3: #7d766a;
  --line: #3b3935;
  --line-strong: #4d4a44;
  --accent: #d39902;
  --accent-soft: rgba(211, 153, 2, 0.22);
  --accent-strong: #e8ad1a;
  --on-accent: #1a1917;
  --success: #2c9d54;
  --warning-soft: rgba(200, 127, 10, 0.18);
  --info: #8fb0e0;
  --info-soft: rgba(143, 176, 224, 0.16);
  --brand-green: #2c9d54;
  --backdrop: rgba(0, 0, 0, 0.6);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 14px 38px rgba(0, 0, 0, 0.6);
  --logo: url('../assets/karnbachs-logo-dark.png');
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #1a1917;
    --surface: #272726;
    --surface-2: #34322e;
    --text: #f5f1e7;
    --text-2: #b3ab9b;
    --text-3: #7d766a;
    --line: #3b3935;
    --line-strong: #4d4a44;
    --accent: #d39902;
    --accent-soft: rgba(211, 153, 2, 0.22);
    --accent-strong: #e8ad1a;
    --on-accent: #1a1917;
    --success: #2c9d54;
    --warning-soft: rgba(200, 127, 10, 0.18);
    --info: #8fb0e0;
    --info-soft: rgba(143, 176, 224, 0.16);
    --brand-green: #2c9d54;
    --backdrop: rgba(0, 0, 0, 0.6);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 14px 38px rgba(0, 0, 0, 0.6);
    --logo: url('../assets/karnbachs-logo-dark.png');
    color-scheme: dark;
  }
}

/* Basis */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
a {
  color: var(--accent);
}
a:hover {
  color: var(--accent-strong);
}
button,
input,
textarea {
  font: inherit;
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
img {
  max-width: 100%;
  display: block;
}

/* Typografie-Skala (§4) */
.pf-hero-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 34px;
  line-height: 40px;
  letter-spacing: 0.02em;
  margin: 0;
}
.pf-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  line-height: 32px;
  letter-spacing: 0.02em;
  margin: 0;
}
.pf-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0.02em;
  margin: 0;
}
.pf-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 44px;
  line-height: 48px;
}
.pf-name {
  font-family: var(--font-name);
  font-size: 17px;
  line-height: 24px;
}
.pf-quote {
  font-family: var(--font-name);
  font-style: italic;
  font-size: 18px;
  line-height: 26px;
}
.pf-body {
  font-size: 16px;
  line-height: 24px;
}
.pf-small {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-2);
}
.pf-eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  overflow-wrap: anywhere;
}
.pf-muted {
  color: var(--text-2);
}
.pf-faint {
  color: var(--text-3);
}

/* Seiten-Container */
.pf-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 16px calc(48px + var(--safe-bottom));
}
@media (min-width: 640px) {
  .pf-page {
    padding: 24px 24px 64px;
  }
}
@media (min-width: 1024px) {
  .pf-page {
    padding: 32px 24px 80px;
  }
}

/* Wortmarke
   Drei Zeilen, EINE Achse: „Karnbachs" (Signatur), darunter „RESTAURANT" — beide
   stecken in der Bilddatei — und darunter der Zusatz („MEIN FEST").
   Das Bild ist 1024x281 und in sich mittig gesetzt: Die Signatur beginnt bei 0,7 %,
   „RESTAURANT" ist mit 28,5 % darunter ZENTRIERT. Ein linksbuendiger Zusatz stand
   deshalb unter beidem, aber unter keinem von beiden ausgerichtet — sichtbar schief
   (Befund Maik 26.08.).
   Der Zusatz wird jetzt ueber dem Logokasten zentriert, folgt also derselben Achse
   wie „RESTAURANT". Der Kasten selbst ist exakt so breit wie das Bild bei 28 px
   Hoehe (1024/281*28 = 102 px) — vorher 120 px, also 18 px Luft rechts, die die
   Zentrierung des Zusatzes zusaetzlich verzogen haetten. */
.pf-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-decoration: none;
  color: inherit;
}
.pf-brand__logo {
  width: 102px;
  height: 28px;
  background: var(--logo) center center / contain no-repeat;
}
.pf-brand__sub {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  /* Sperrsatz haengt rechts einen Buchstabenabstand an — ohne Ausgleich waere der
     Text um genau diesen halben Abstand nach links verschoben. */
  text-indent: 0.16em;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}