/*
 * Philli's CaféLädchen — Design Tokens v2
 * Art Direction: „Sonnenhaus"
 * ─────────────────────────────────────────────
 * Ein sonnendurchflutetes Altbauzimmer von 1890:
 * Kalkweiß, Dielenlicht, Eukalyptus, Backstein.
 *
 * EIN helles Thema. Kein Dunkelmodus, kein
 * Umschalter, kein prefers-color-scheme.
 * Siehe ART-DIRECTION-V2.md, Entscheidung 1.
 */

:root {

  /* ── Flächen ──────────────────────────────── */
  --color-bg:               #faf6ef;  /* Kalkweiß — Seitenhintergrund       */
  --color-surface:          #fffcf7;  /* Papier — Karten, Panels            */
  --color-surface-offset:   #f3ede3;  /* Leinen — Abschnittswechsel         */
  --color-surface-offset-2: #eae1d3;  /* Sandstein — Footer, Zitatflächen   */
  --color-divider:          #e2d9cb;  /* Haarlinie — ersetzt Schatten       */
  --color-border:           #d6cbb9;  /* Rahmen — Inputs, Ghost-Buttons     */

  /* ── Schrift ──────────────────────────────── */
  --color-text:             #221f1b;  /* Diele — 15,3:1 auf Kalkweiß        */
  --color-text-muted:       #6e675f;  /* Rauch — 4,7:1                      */
  --color-text-faint:       #a79e93;  /* Nebel — Deko, Disabled             */
  --color-text-inverse:     #fdfbf7;  /* Text auf Salbei                    */

  /* ── Marke: Salbei (unverändert aus Bestand) ─ */
  --color-primary:          #567269;
  --color-primary-hover:    #486057;  /* Button-Hover                       */
  --color-primary-deep:     #3d544b;  /* Salbei als Text — 7,4:1            */
  --color-primary-light:    #a9beb4;  /* Eukalyptus — Linien, Icons         */
  --color-primary-wash:     #e6efe9;  /* Mintwäsche — aktive Pille          */

  /* ── Akzent: Backstein ────────────────────────
     Aus der freigelegten Backsteinwand von 1890.
     MAXIMAL EIN Element pro Bildschirm.        */
  --color-accent:           #b0553a;
  --color-accent-hover:     #94452e;
  --color-accent-wash:      #f5e4dc;

  /* ── Licht: Sonnenlicht ───────────────────────
     Nur als Verlauf/Wäsche ≤35 % Deckkraft.
     Nie als Fläche, nie als Text.             */
  --color-sun:              #f0ce93;
  --wash-sun: linear-gradient(180deg,
                rgb(240 206 147 / 0.22) 0%,
                rgb(240 206 147 / 0.17) 22%,
                rgb(240 206 147 / 0.11) 44%,
                rgb(240 206 147 / 0.06) 66%,
                rgb(240 206 147 / 0.02) 84%,
                rgb(240 206 147 / 0) 100%);

  /* ── Semantik ─────────────────────────────────
     Jeweils Linien-/Textfarbe plus eine Wäsche für
     Flächen. Kontrast auf Kalkweiß je ≥ 4,5 : 1.  */
  --color-success:          #4a7c59;  /* Flächen, Punkte, Rahmen           */
  --color-success-deep:     #3a6246;  /* Erfolg als TEXT — 5,9:1 auf Wäsche */
  --color-success-wash:     #e6efe4;
  --color-warning:          #a8762c;  /* Flächen, Rahmen                    */
  --color-warning-deep:     #845b22;  /* Warnung als TEXT — 5,1:1           */
  --color-warning-wash:     #f7ecd8;
  --color-error:            #9d3a2c;  /* Text und Rahmen — 5,5:1            */
  --color-error-wash:       #f7e3df;

  /* ── Fokus ────────────────────────────────────
     Auf hellen Flächen Salbei, auf Salbei- und
     dunklen Flächen Kalkweiß — sonst unsichtbar. */
  --focus-ring:         var(--color-primary);
  --focus-ring-inverse: var(--color-text-inverse);
  --focus-width:        2px;
  --focus-offset:       3px;

  /* ── Schriften ────────────────────────────── */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;

  /* Fraunces-Achsen: weiche, leicht schiefe Schnitte für Headlines */
  --display-axes:      'SOFT' 40, 'WONK' 1, 'opsz' 96;
  --display-axes-small:'SOFT' 20, 'WONK' 0, 'opsz' 14;

  /* ── Typo-Skala — maximal 6 Größen ────────── */
  --text-xs:   0.75rem;                                        /* 12px      */
  --text-sm:   0.9375rem;                                      /* 15px      */
  --text-base: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);       /* 17→18px   */
  --text-lg:   clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);     /* 18→22px   */
  --text-xl:   clamp(1.375rem, 1.15rem + 1vw, 1.875rem);       /* 22→30px   */
  --text-2xl:  clamp(1.875rem, 1.35rem + 2.2vw, 2.75rem);      /* 30→44px   */
  --text-3xl:  clamp(2.5rem, 1.4rem + 4.4vw, 4.75rem);         /* 40→76px   */
  --text-hero: clamp(3.5rem, 1.4rem + 7.4vw, 8.25rem);         /* 56→132px  */

  /* ── Zeilenhöhen & Tracking ───────────────── */
  --leading-hero:  0.98;
  --leading-tight: 1.06;
  --leading-snug:  1.3;
  --leading-body:  1.65;
  --tracking-hero: -0.028em;
  --tracking-head: -0.018em;
  --tracking-label: 0.18em;

  /* ── Maße ─────────────────────────────────── */
  --content-narrow:  640px;   /* Lesetext                                   */
  --content-default: 960px;
  --content-wide:   1240px;   /* Seitenmaximum                              */
  --gutter:          1.5rem;  /* mobil                                      */
  --gutter-lg:       5rem;    /* Desktop — großzügiger Rand                 */

  /* ── Raster (asymmetrisches Editorial) ────── */
  --grid-columns: 12;

  /* ── Abstände (4px-Basis) ─────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;

  /* Abschnittsrhythmus — Weißraum ist das teuerste Material */
  --section-y:    clamp(4rem, 9vw, 10rem);
  --section-y-sm: clamp(3rem, 6vw, 6rem);

  /* ── Radien — Kanten sind scharf ──────────── */
  --radius-xs:   2px;
  --radius-sm:   4px;   /* Panels, Bilder — Maximum für Flächen             */
  --radius-full: 999px; /* nur Buttons und Tags                             */

  /* ── Linien statt Schatten ────────────────── */
  --hairline: 1px solid var(--color-divider);
  --frame:    1px solid var(--color-divider); /* Passepartout um Fotos      */

  /* Schatten: Ausnahme, nur Dropdown/Overlay — warm und weich */
  --shadow-pop:     0 18px 48px rgb(34 31 27 / 0.10);
  --shadow-overlay: 0 24px 70px rgb(34 31 27 / 0.16);

  /* ── Bewegung ─────────────────────────────── */
  --ease:              cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast:        160ms var(--ease);
  --transition-interactive: 220ms var(--ease);
  --transition-slow:        420ms var(--ease);
  --reveal:            600ms var(--ease);
  --reveal-image:      800ms var(--ease);

  /* ── Ebenen ───────────────────────────────── */
  --z-header:  100;
  --z-drawer:  150;
  --z-consent: 180;   /* Zustimmungsleiste — über Inhalt und Drawer,
                         unter der Sprungmarke (Schritt 07)            */
  --z-skip:    200;

  /* Höhe der eingeblendeten Zustimmungsleiste. consent.js misst sie und
     schreibt den Wert hierher; der Body bekommt ihn als Innenabstand,
     damit die Leiste nie einen Footer-Link verdeckt. */
  --consent-h: 0px;
}

/* ═══════════════════════════════════════════════
   RESET + BASE
   ═══════════════════════════════════════════════ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h, 4.5rem) + 1rem);
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img, svg, video, picture { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }

/* ── Display-Typografie ────────────────────── */
h1, h2, h3 {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-head);
  color: var(--color-text);
  text-wrap: balance;
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); font-weight: 600; }

h4 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0;
}

p { text-wrap: pretty; max-width: 68ch; }

a {
  color: var(--color-primary-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--color-primary-light);
  padding-bottom: 1px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
a:hover { color: var(--color-text); border-color: var(--color-text); }

ul, ol { padding-left: 1.15rem; }
li::marker { color: var(--color-primary-light); }
strong { font-weight: 600; }
hr { border: none; border-top: var(--hairline); }

/* ── Fokus ─────────────────────────────────────
   Ein einziger, konsistenter Ring auf der ganzen
   Seite. Auf Salbeiflächen kippt er auf Kalkweiß,
   weil ein salbeifarbener Ring dort verschwindet. */
:focus { outline: none; }
:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-xs);
}
.on-sage :focus-visible,
.section--sage :focus-visible,
.nav-entry:focus-visible,
.btn--primary:focus-visible,
.btn--brick:focus-visible,
.skip-link:focus-visible {
  outline-color: var(--focus-ring-inverse);
  outline-offset: var(--focus-offset);
}
.btn--primary:focus-visible,
.btn--brick:focus-visible,
.nav-entry:focus-visible {
  /* Auf gefüllten Buttons sitzt der helle Ring innen und ein
     zweiter, dunkler außen — beide Untergründe sind abgedeckt. */
  outline-offset: -4px;
  box-shadow: 0 0 0 2px var(--color-primary-deep);
}

::selection { background: var(--color-primary-wash); color: var(--color-text); }

/* ── Reveal (Fade + 12px, einmalig) ────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--reveal), transform var(--reveal);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Clip auf dem INNEREN Bild, nicht auf dem beobachteten Element:
   ein clip-path auf dem Ziel selbst setzt die Intersection-Ratio auf 0,
   dann feuert der Observer nie. */
[data-reveal-image] > img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--reveal-image);
}
[data-reveal-image].is-in > img { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  [data-reveal-image] > img { clip-path: none; }
}

/* ── Utilities ─────────────────────────────── */

/* Das `hidden`-Attribut kommt aus dem Browser-Stylesheet und hat damit
   die schwächste Spezifität überhaupt. Jede eigene Regel mit `display`
   sticht es aus — `.consent__settings { display: grid }` hat in Schritt 07
   genau so das eingeklappte Einstellungsfeld dauerhaft aufgeklappt und die
   Zustimmungsleiste auf 792 px aufgeblasen. Einmal global geradeziehen,
   statt es an jeder Komponente einzeln zu reparieren. */
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -110%);
  z-index: var(--z-skip);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: var(--space-3) var(--space-6);
  border: none;
  font-size: var(--text-sm);
  font-weight: 600;
  transition: transform var(--transition-interactive);
}
.skip-link:focus-visible { transform: translate(-50%, 0); color: var(--color-text-inverse); }

/* Sichtbar nur für Tastatur-Fokus — wird für Sprungmarken genutzt */
.only-focus:not(:focus-visible) {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
}

/* Papierkorn — 3 %, nimmt dem Digitalen die Sterilität */
.grain::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════
   DRUCK
   Rechtsseiten und Speisekarte werden gedruckt.
   Navigation, Verläufe und Korn fallen weg.
   ═══════════════════════════════════════════════ */

@media print {
  :root { --color-bg: #fff; --color-surface: #fff; }
  body { background: #fff; color: #000; font-size: 11pt; line-height: 1.5; }
  .site-header, .header-hero, .nav-mobile, .skip-link,
  .header-actions, .legal-nav, .embed-slot, .grain::after, .consent,
  .haeuschen-watermark, .hero::before, .page-head::before { display: none !important; }
  .site-footer { background: none; border-top: 1px solid #999; padding-block: 1rem; }
  .footer-grid, .footer-brand, .consent-reopen { display: none !important; }
  .section { padding-block: 1rem; }
  h1, h2, h3 { break-after: avoid; }
  p, li, tr, figure { break-inside: avoid; }
  a { color: #000; border: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  [data-reveal], [data-reveal-image] > img { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}