/* Stockmann Espresso – Musterseite
   Tokens aus stilprofil.md („Kaffeeatelier, aber warm“), Farben: Braun #3a2620, Creme #FDFCF9, Taupe #e2d9d4.
   Wird später als assets/css/style.css ins Kirby-Projekt übernommen. */

/* ---------- Schriften (selbst gehostet, OFL) ---------- */
@font-face { font-family: "Josefin Sans"; font-weight: 600; font-display: swap;
  src: url("../fonts/josefin-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Josefin Sans"; font-weight: 700; font-display: swap;
  src: url("../fonts/josefin-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Josefin Sans"; font-weight: 700; font-display: swap;
  src: url("../fonts/josefin-sans-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap;
  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 300 700; font-display: swap;
  src: url("../fonts/space-grotesk-latin.woff2") format("woff2"); }
/* Erweiterte Lateinzeichen für Inter, u. a. das große ẞ in Versalzeilen */
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap;
  src: url("../fonts/inter-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap;
  src: url("../fonts/inter-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap;
  src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  /* Drei Hausfarben (seit 25.10.2026): Braun, Creme, Taupe */
  --brand: #3a2620;     /* Braun: Knöpfe, Überschriften, Leisten, Fußzeile */
  --accent: #3a2620;    /* gleiches Braun, eine Markenfarbe */
  --bg: #FDFCF9;        /* Creme: Seitenhintergrund; Produktfotos behalten ihr Weiß */
  --on-dark: #FDFCF9;   /* Creme auf Braun und auf Fotos: 14,6:1 */
  --bg-warm: #e2d9d4;   /* Taupe: jeder zweite Abschnitt */
  /* Daraus abgeleitet */
  --surface: #bcb0a9;   /* Fläche hinter Bildern */
  --line: #d6ccc6;      /* Linien und Ränder */
  --text: #2B211D;      /* Fließtext, etwas dunkler als das Braun */
  --text-soft: #5E4D45; /* Nebentext: 5,8:1 auf Taupe */
  --overlay: linear-gradient(to top, rgba(58, 38, 32, .78) 0%, rgba(58, 38, 32, .35) 55%, rgba(58, 38, 32, .15) 100%);

  --font-display: "Josefin Sans", system-ui, sans-serif;
  --font-text: "Inter", system-ui, sans-serif;
  --track-heading: .03em;
  --track-kicker: .2em;
  --track-nav: .14em;
  --track-button: .16em;

  --h1: clamp(2.4rem, 5vw + 1rem, 4.25rem);
  --h2: clamp(1.75rem, 2.2vw + 1rem, 2.6rem);
  --h3: clamp(1.25rem, 1vw + 1rem, 1.5rem);
  --kicker: .8125rem;
  --body: 1.0625rem;
  --lh-body: 1.6;

  --content: 1200px;
  --text-max: 64ch;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section-y: clamp(3.5rem, 7vw, 6.5rem);
  --radius: 2px;
  --shadow-soft: 0 2px 8px rgba(58, 38, 32, .08);
  --header-h: 76px;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 var(--body)/var(--lh-body) var(--font-text);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: .2em; }
a:hover { color: var(--brand); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
p { margin: 0 0 1em; max-width: var(--text-max); }
/* Fließtext: Silbentrennung (deutsch, nicht zu kurze Reste) und ausgewogene letzte Zeilen gegen einzelne Wörter */
p, li, dd, td, figcaption, summary { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; text-wrap: pretty; }
h2, h3 { text-wrap: balance; }
h1, h2, h3 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--track-heading); line-height: 1.12; margin: 0 0 .5em; color: var(--brand);
}
h1 { font-size: var(--h1); }
/* Lange Wörter wie „Siebträgermaschinen“ auf dem Handy trennen statt die Seite zu verbreitern */
h1, h2, h3 { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 12 5 5; overflow-wrap: break-word; }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--brand); color: #fff; padding: .75rem 1rem; }
.skip:focus { top: 1rem; }
.wrap { width: 100%; max-width: var(--content); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--warm { background: var(--bg-warm); }
.section--surface { background: var(--surface); }

/* Kicker: feine Linie + gesperrte Versalien */
.kicker {
  display: flex; align-items: center; gap: .9rem; margin: 0 0 1rem;
  font: 600 var(--kicker)/1.3 var(--font-text); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--accent);
}
.kicker::before { content: ""; width: 2.5rem; height: 1px; background: currentColor; flex: none; }
.kicker--light { color: var(--on-dark); }
.lead { font-size: clamp(1.125rem, .5vw + 1rem, 1.3rem); color: var(--text-soft); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 48px;
  padding: .8rem 1.6rem; border: 1.5px solid var(--brand); border-radius: var(--radius);
  font: 600 .875rem/1.2 var(--font-text); letter-spacing: var(--track-button); text-transform: uppercase; text-decoration: none;
  background: var(--brand); color: #fff; transition: background .2s, color .2s, border-color .2s;
}
.btn:hover { background: var(--text); border-color: var(--text); color: #fff; }
.btn--secondary { background: transparent; color: var(--brand); }
.btn--secondary:hover { background: var(--brand); color: #fff; }
.btn--ghost { background: transparent; border-color: #fff; color: #fff; }
.btn--ghost:hover { background: #fff; color: var(--brand); border-color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.course-list { list-style: none; margin: 1.25rem 0 0; padding: 0; border-top: 1px solid var(--line); max-width: 480px; }
.course-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.course-list span { color: var(--text-soft); white-space: nowrap; }

/* ---------- Info-Leiste oben ---------- */
.topbar { background: var(--brand); color: var(--on-dark); font-size: .875rem; }
.topbar .wrap { display: flex; flex-wrap: wrap; gap: .35rem 1.75rem; justify-content: flex-end; padding-block: .5rem; }
/* Status links (bündig mit dem Logo), Adresse und Telefon rechts */
.topbar .open-now { margin-right: auto; }
.topbar a { color: #fff; text-decoration: none; }
.topbar a:hover { text-decoration: underline; color: #fff; }
.topbar .open-now::before { content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: #9DBF8A; margin-right: .45rem; vertical-align: .05em; }
.topbar .open-now.is-closed::before { background: #C9A29A; }
.topbar .open-now { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: .2em; }
.topbar .open-now:hover { text-decoration-color: #fff; }
@media (max-width: 560px) {
  .topbar .wrap { justify-content: space-between; flex-wrap: nowrap; }
  .topbar .topbar__address { display: none; }
  /* Lange Hinweise (z. B. Urlaub) kürzen statt die Telefonnummer in eine zweite Zeile zu schieben */
  .topbar .open-now { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .wrap > a:last-child { flex-shrink: 0; }
}

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 97%, transparent); transition: box-shadow .2s; }
.site-header.is-scrolled { box-shadow: var(--shadow-soft); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--header-h); }
.logo img { width: 168px; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(1rem, 2vw, 2rem); }
.nav a {
  font: 600 .8125rem/1 var(--font-text); letter-spacing: var(--track-nav); text-transform: uppercase;
  color: var(--text); text-decoration: none; padding-block: .5rem; border-bottom: 1.5px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"], .nav a.is-aktiv { border-color: var(--accent); color: var(--brand); }
/* Am Rechner wächst die Linie der Hauptpunkte beim Überfahren von der Stelle aus, an der die Maus hineinkommt (wie beim reimpresso-Logo).
   Die aktuelle Seite behält ihre Linie fest. */
@media (min-width: 961px) {
  .nav > ul > li > a { position: relative; border-bottom-color: transparent !important; }
  .nav > ul > li > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1.5px; height: 1.5px; background: var(--accent); transform: scaleX(0); transform-origin: var(--ursprung, 50%) center; transition: transform .2s; }
  .nav > ul > li > a:hover::after, .nav > ul > li > a:focus-visible::after, .nav > ul > li > a[aria-current="page"]::after, .nav > ul > li > a.is-aktiv::after { transform: scaleX(1); }
}
/* „Laden“ mit Aufklappliste der Sortimentsseiten: öffnet bei Hover, Tastaturfokus oder Klick auf den Pfeil */
.nav__gruppe { position: relative; display: flex; align-items: center; gap: .3rem; }
.nav__auf { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; background: none; color: var(--text); cursor: pointer; border-radius: 4px; }
.nav__auf svg { transition: transform .2s; }
.nav__gruppe:hover .nav__auf svg, .nav__gruppe.is-open .nav__auf svg { transform: rotate(180deg); }
.nav__auf:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.nav .nav__unter {
  position: absolute; top: 100%; left: -1.1rem; z-index: 60; min-width: 13.5rem; display: block;
  padding: .55rem 0; margin-top: .6rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-soft); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s;
}
/* unsichtbare Brücke, damit die Liste beim Herunterfahren mit der Maus offen bleibt */
.nav .nav__unter::before { content: ""; position: absolute; left: 0; right: 0; top: -.8rem; height: .8rem; }
.nav__gruppe:hover .nav__unter, .nav__unter:focus-within, .nav__gruppe.is-open .nav__unter { opacity: 1; visibility: visible; transform: none; }
.nav .nav__unter a { display: block; padding: .7rem 1.1rem; border: 0; }
.nav .nav__unter a:hover, .nav .nav__unter a[aria-current="page"] { background: var(--bg-warm); }
.nav .nav__unter-ende { margin-top: .4rem; padding-top: .4rem; border-top: 1px solid var(--line); }
.nav .nav__unter-ende a, .nav .nav__unter-ende-2 a { color: var(--text-soft); }
.header-call { display: inline-flex; }
.menu-toggle { display: none; }

@media (max-width: 960px) {
  .nav, .header-call { display: none; }
  .menu-toggle {
    display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem .9rem;
    border: 1.5px solid var(--brand); border-radius: var(--radius); background: none; color: var(--brand);
    font: 600 .8125rem/1 var(--font-text); letter-spacing: var(--track-nav); text-transform: uppercase; cursor: pointer;
  }
  .nav.is-open { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); box-shadow: var(--shadow-soft); }
  .nav.is-open ul { flex-direction: column; gap: 0; padding: .5rem var(--gutter) 1.25rem; }
  .nav.is-open a { display: block; padding: .9rem 0; border-bottom: 1px solid var(--line); }
  /* Auf dem Handy stehen die Sortimentsseiten immer sichtbar eingerückt unter „Laden“ */
  .nav.is-open .nav__gruppe { display: block; }
  .nav.is-open .nav__auf { display: none; }
  .nav.is-open .nav__unter {
    position: static; opacity: 1; visibility: visible; transform: none; min-width: 0;
    margin: 0; padding: 0 0 0 1.1rem; border: 0; border-radius: 0; box-shadow: none; background: none;
  }
  .nav.is-open .nav__unter::before { display: none; }
  .nav.is-open .nav__unter a { padding: .8rem 0; border-bottom: 1px solid var(--line); font-weight: 500; }
  .nav.is-open .nav__unter a:hover { background: none; }
  .nav.is-open .nav__unter-uebersicht { display: none; }
  .logo img { width: 140px; }
}

/* ---------- Hero ---------- */
.hero { position: relative; min-height: min(86vh, 820px); display: grid; align-items: end; color: #fff; isolation: isolate; }
.hero--sub { min-height: min(62vh, 560px); }
/* Sortimentsseiten: niedriger, damit der Inhalt schneller kommt */
.hero--kompakt { min-height: min(42vh, 400px); }
.hero--kompakt .wrap { padding-block: clamp(2rem, 5vw, 3.5rem); }
.hero__img { position: absolute; inset: 0; z-index: -2; }
.hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 60%; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--overlay); }
.hero .wrap { padding-block: clamp(3rem, 8vw, 6rem); }
.hero h1 { color: #fff; max-width: 14ch; margin-bottom: .35em; }
.hero p { font-size: clamp(1.1rem, .6vw + 1rem, 1.35rem); max-width: 40ch; color: var(--on-dark); }
.hero .kicker { font-size: var(--kicker); max-width: none; }
.hero--sub h1 { font-size: clamp(2rem, 3vw + 1rem, 3.4rem); max-width: 22ch; }

/* ---------- Startseite: Hero geteilt ---------- */
/* Text links auf Creme, Ladenfoto rechts. Auf dem Handy das Foto oben, der Text darunter */
.hero-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); min-height: min(78vh, 680px); background: var(--bg-warm); }
.hero-split__img { position: relative; order: 2; background: var(--surface); }
.hero-split__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero-split__text { align-self: center; padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4.5rem) clamp(2.5rem, 6vw, 5rem) max(var(--gutter), calc((100vw - var(--content)) / 2 + var(--gutter))); }
/* Groß, aber so, dass „Espresso für Bremen“ höchstens einmal umbricht */
.hero-split h1 { font-size: clamp(2.2rem, 2.2vw + 1.2rem, 3.3rem); line-height: 1.05; margin-bottom: .4em; text-wrap: balance; }
.hero-split__lead { font-size: clamp(1.05rem, .5vw + .95rem, 1.25rem); max-width: 34ch; color: var(--text-soft); }
.hero-split__lead--gross { font: 600 clamp(1.5rem, 1.4vw + 1rem, 2.3rem)/1.3 var(--font-display); max-width: 22ch; color: var(--brand); margin-bottom: 1.25em; }
@media (max-width: 860px) {
  .hero-split { grid-template-columns: 1fr; min-height: 0; }
  .hero-split__img { order: 0; aspect-ratio: 3 / 2; }
  .hero-split__text { padding: 1.75rem var(--gutter) 2.25rem; }
}

/* ---------- Kicker + Text (zweispaltig) ---------- */
.split-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: start; }
.split-intro > .kicker { margin-top: .9rem; }
@media (max-width: 760px) { .split-intro { grid-template-columns: 1fr; gap: .5rem; } }

/* ---------- Fakten-Leiste ---------- */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-block: 1px solid var(--line); margin-top: 3rem; }
.facts > div { background: var(--bg); padding: 1.5rem 1.25rem; }
.facts strong { display: block; font: 700 clamp(1.6rem, 2vw + 1rem, 2.25rem)/1 var(--font-display); color: var(--brand); letter-spacing: var(--track-heading); margin-bottom: .4rem; }
.facts span { color: var(--text-soft); font-size: .9375rem; }
@media (max-width: 640px) { .facts { grid-template-columns: 1fr; } }

/* ---------- Kategorie-Kacheln ---------- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.75rem, 1.5vw, 1.25rem); margin-top: 2.5rem; }
@media (max-width: 960px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
.tile { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); color: #fff; text-decoration: none; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.tile:hover img { transform: scale(1.04); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(58, 38, 32, .8), rgba(58, 38, 32, 0) 55%); }
.tile__label { position: absolute; left: 1.1rem; right: 1.1rem; bottom: 1rem; z-index: 1; }
.tile__label strong { display: block; font: 700 1.3rem/1.1 var(--font-display); letter-spacing: var(--track-heading); text-transform: uppercase; }
.tile__label span { font-size: .875rem; color: var(--on-dark); }
.tile:hover { color: #fff; }
/* „Entdecken →“ zeigt, dass die Kachel ein Link ist */
.tile__label .tile__mehr { display: inline-flex; align-items: center; gap: .4rem; margin-top: .6rem; padding: .35rem .7rem; border: 1px solid rgba(255, 255, 255, .7); border-radius: 2px; font: 600 .6875rem/1 var(--font-text); letter-spacing: var(--track-button); text-transform: uppercase; color: #fff; transition: background .2s, color .2s; }
.tile__mehr::after { content: "→"; font-size: .875rem; transition: transform .2s; }
.tile:hover .tile__mehr, .tile:focus-visible .tile__mehr { background: #fff; color: var(--text); }
.tile:hover .tile__mehr::after, .tile:focus-visible .tile__mehr::after { transform: translateX(3px); }
.tile__label > span:not(.tile__mehr) { display: block; }
.tile--static:hover img { transform: none; }
.tiles--3 { grid-template-columns: repeat(3, 1fr); }
.tiles--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) {
  .tiles--3 { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .tiles--3 .tile__label { left: .6rem; right: .6rem; bottom: .6rem; }
  .tiles--3 .tile__label strong { font-size: .95rem; }
  .tiles--3 .tile__label span { display: none; }
  .tiles--3 .tile__label .tile__mehr { display: inline-flex; margin-top: .35rem; padding: .2rem .4rem; font-size: 0; gap: 0; }
}
/* Sortimentsseiten */
/* Fotoreihe: Flexbox statt Raster, damit eine unvollständige letzte Reihe mittig steht */
.gallery { --luecke: clamp(.75rem, 1.5vw, 1.25rem); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--luecke); list-style: none; margin: 0; padding: 0; }
.gallery li { flex: 0 0 calc((100% - (var(--spalten, 3) - 1) * var(--luecke)) / var(--spalten, 3)); aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.gallery[style*="--spalten: 1"] li { aspect-ratio: 21 / 9; }
@media (max-width: 760px) { .gallery li { flex-basis: calc((100% - var(--luecke)) / 2); } .gallery[style*="--spalten: 1"] li { flex-basis: 100%; } }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.sortiment__marken-text { margin-top: 1.75rem; text-align: center; color: var(--text-soft); }
.sortiment__adresse { margin-top: 1rem; color: var(--text-soft); }

/* ---------- Marken ---------- */
.brands { display: grid; grid-template-columns: repeat(var(--spalten, 6), 1fr); align-items: center; gap: 2rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }
.brands li { display: flex; justify-content: center; }
.brands img { max-width: 100%; width: auto; object-fit: contain; margin-inline: auto; filter: grayscale(1) contrast(1.1); opacity: .8; mix-blend-mode: multiply; }
@media (max-width: 860px) { .brands { grid-template-columns: repeat(min(var(--spalten, 6), 4), 1fr); } }
@media (max-width: 640px) { .brands { grid-template-columns: repeat(var(--spalten-mobil, 3), 1fr); gap: 1.5rem; } }
/* Gastro: Logos in einer halben Spalte, drei pro Reihe */
.brands.brands--kompakt { grid-template-columns: repeat(3, 1fr); gap: 1.75rem 1.5rem; margin-top: 1.25rem; }

/* ---------- Bild/Text-Split ---------- */
.media-split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.media-split--reverse .media-split__img { order: 2; }
.media-split__img { position: relative; min-height: 420px; background: var(--surface); }
.media-split__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-split__body { padding: var(--section-y) clamp(1.5rem, 6vw, 5.5rem); align-self: center; }
@media (max-width: 860px) {
  .media-split { grid-template-columns: 1fr; }
  .media-split--reverse .media-split__img { order: 0; }
  .media-split__img { min-height: 280px; }
  .media-split__body { padding: 2.75rem var(--gutter); }
}

/* Platzhalter für Fotos, die noch fehlen */
.placeholder {
  position: absolute; inset: 0; display: grid; place-content: center; gap: .5rem; text-align: center; padding: 2rem;
  background: repeating-linear-gradient(135deg, var(--surface) 0 18px, var(--bg-warm) 18px 36px); color: var(--text-soft);
  font-size: .9375rem;
}
.placeholder strong { font: 700 1rem/1.2 var(--font-display); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--brand); }

/* ---------- Textbox über Foto ---------- */
.feature { position: relative; isolation: isolate; padding-block: clamp(4rem, 10vw, 8rem); }
.feature__img { position: absolute; inset: 0; z-index: -1; }
.feature__img img { width: 100%; height: 100%; object-fit: cover; }
.feature__box { background: var(--brand); color: var(--on-dark); max-width: 560px; padding: clamp(2rem, 4vw, 3.25rem); }
.feature__box h2 { color: #fff; }
.feature__box ul { margin: 0 0 1.5rem; padding-left: 1.1rem; }
.feature__box li { margin-bottom: .35rem; }

/* ---------- Team ---------- */
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 2.5rem); margin: 2.5rem 0 0; padding: 0; list-style: none; }
@media (max-width: 760px) { .team { grid-template-columns: 1fr; } }
.team__photo { aspect-ratio: 1 / 1; position: relative; margin-bottom: 1rem; max-width: 320px; }
/* Ohne Foto: eine feine Linie oben hält die Karten trotzdem als Reihe zusammen */
.team__item--ohne-foto { padding-top: 1rem; border-top: 2px solid var(--brand); }
.team__name { font: 700 1.2rem/1.2 var(--font-display); letter-spacing: var(--track-heading); text-transform: uppercase; color: var(--brand); margin: 0; }
.team__role { color: var(--text-soft); margin: .25rem 0 0; }

/* ---------- Schritte ---------- */
.steps { counter-reset: step; list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--spalten, 4), 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 960px) { .steps:not([style]) { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps, .steps:not([style]), .steps[style] { grid-template-columns: 1fr; } }
.steps li { background: var(--bg); padding: 1.75rem 1.5rem; counter-increment: step; }
.steps li::before { content: "0" counter(step); display: block; font: 700 2.25rem/1 var(--font-display); color: var(--accent); margin-bottom: 1rem; }
.steps h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.steps p { font-size: .975rem; margin: 0; }

/* ---------- Preis-Tabelle ---------- */
.price-table { width: 100%; max-width: 640px; border-collapse: collapse; margin: 1.5rem 0; }
.price-table th, .price-table td { text-align: left; padding: .9rem 0; border-bottom: 1px solid var(--line); }
.price-table td:last-child, .price-table th:last-child { text-align: right; white-space: nowrap; }
.price-table td:last-child { font-weight: 600; }
.price-table thead th { font-size: .8125rem; letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--text-soft); font-weight: 600; }
.price-table caption { text-align: left; color: var(--text-soft); font-size: .875rem; caption-side: bottom; padding-top: .75rem; }

/* ---------- Hinweis-Kasten ---------- */
.note { border-left: 3px solid var(--accent); background: var(--bg-warm); padding: 1.25rem 1.5rem; margin: 2rem 0; max-width: 720px; }
.note p:last-child { margin-bottom: 0; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }

/* ---------- Anfahrt ---------- */
.visit { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
@media (max-width: 960px) { .visit { grid-template-columns: 1fr; } }
.visit figure { margin: 0; border: 1px solid var(--line); background: var(--bg-warm); }
.visit figcaption { font-size: .8125rem; color: var(--text-soft); padding: .6rem .9rem; border-top: 1px solid var(--line); }
.visit .visit__maps { margin-top: 1rem; }
.visit dl { margin: 0; }
.visit dt { font: 600 .8125rem/1.3 var(--font-text); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--accent); margin-top: 1.4rem; }
.visit dt:first-child { margin-top: 0; }
.visit dd { margin: .35rem 0 0; }

/* ---------- Öffnungszeiten ---------- */
.hours { border-collapse: collapse; font-variant-numeric: tabular-nums; } /* Ziffern gleich breit, damit die Zeiten untereinander stehen */
.hours th, .hours td { text-align: left; padding: .2rem 1.5rem .2rem 0; font-weight: 400; }
.hours tr.is-today th, .hours tr.is-today td { font-weight: 600; }
.site-footer .hours tr.is-today th, .site-footer .hours tr.is-today td { color: #fff; }

/* ---------- Footer ---------- */
.site-footer { background: var(--brand); color: var(--on-dark); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; font-size: .9375rem; }
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--on-dark); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2rem; }
@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h2 { font-size: .8125rem; letter-spacing: var(--track-kicker); color: #fff; font-family: var(--font-text); font-weight: 600; margin-bottom: 1rem; }
.site-footer .logo-light { width: 170px; margin-bottom: 1rem; }
.site-footer .hours td, .site-footer .hours th { color: var(--on-dark); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(253, 252, 249, .25); font-size: .8125rem; }
.footer-bottom ul { list-style: none; display: flex; gap: 1.25rem; margin: 0; padding: 0; }
/* Webdesign-Credit: Logo von reimpresso (Zeichen + Schriftzug in Space Grotesk, wie in der reimpresso-App) */
.footer-credit { display: inline-flex; align-items: baseline; gap: .45rem; color: rgba(253, 252, 249, .75); }
.footer-credit .reimpresso { color: var(--on-dark); font-size: 1.15em; } /* etwas größer, damit die Doppellinien des R klein noch lesbar sind */
/* Das R-Zeichen steht als Anfangsbuchstabe deutlich über Versalhöhe (0,9 em, Linien in Originalstärke) auf der Grundlinie, direkt vor „eimpresso“ in Space Grotesk Light (dünnste Stufe, passend zu den feinen Linien des R) */
.reimpresso { display: inline-block; white-space: nowrap; color: inherit; text-decoration: none; font: 300 1.1em/1 "Space Grotesk", var(--font-text); letter-spacing: -.035em; }
.reimpresso svg { width: auto; height: .9em; vertical-align: baseline; margin-right: .01em; fill: currentColor; }
/* Beim Hovern eine Linie unter dem ganzen Logo, R eingeschlossen, knapp unter den Unterlängen; sie wächst von der Stelle, an der die Maus hineinkommt (sonst von der Mitte), und zieht sich zur Austrittsstelle zurück */
.reimpresso { position: relative; }
.reimpresso::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.12em; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: var(--ursprung, 50%) center; transition: transform .2s; }
.reimpresso:hover::after, .reimpresso:focus-visible::after { transform: scaleX(1); }
.legal__credit { display: block; margin: .2rem 0 .1rem; font-size: 1.6rem; color: var(--brand); }

/* ---------- Mobile Aktionsleiste ---------- */
.action-bar { display: none; }
@media (max-width: 760px) {
  body { padding-bottom: 64px; }
  .action-bar {
    display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--brand); border-top: 1px solid rgba(255, 255, 255, .15);
  }
  .action-bar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; min-height: 64px;
    color: #fff; text-decoration: none; font: 600 .75rem/1 var(--font-text); letter-spacing: .08em; text-transform: uppercase;
  }
  .action-bar a + a { border-left: 1px solid rgba(255, 255, 255, .15); }
  .action-bar svg { width: 20px; height: 20px; }
}

/* Öffnungszeiten-Blatt */
.sheet { width: min(100%, 28rem); max-width: 100%; margin: auto auto 0; padding: 1.25rem var(--gutter) 1.5rem; border: 0; border-radius: 16px 16px 0 0; background: var(--bg); color: var(--text); }
.sheet::backdrop { background: rgba(58, 38, 32, .55); }
.sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.sheet__head h2 { margin: 0; font-size: 1.5rem; }
.sheet__close { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; color: var(--brand); cursor: pointer; }
.sheet__close svg { width: 22px; height: 22px; }
.sheet .open-now { margin: 0 0 1rem; font-weight: 600; color: var(--brand); }
.sheet .open-now::before { content: ""; display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: #5E8A48; margin-right: .5rem; vertical-align: .05em; }
.sheet .open-now.is-closed::before { background: #B5705F; }
.hours-special { margin-top: 1rem; font-size: .9375rem; }
.hours-special__title { margin: 0 0 .35rem; font: 600 .8125rem/1.3 var(--font-text); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--accent); }
.hours-special ul { list-style: none; margin: 0; padding: 0; }
.hours-special li { padding: .15rem 0; }
.hours-special li.is-today { font-weight: 600; }
.site-footer .hours-special__title { color: var(--on-dark); opacity: .8; }
.sheet .hours-special { margin: -.25rem 0 1rem; }
.sheet .hours { width: 100%; margin-bottom: 1rem; }
.sheet .hours th, .sheet .hours td { padding-block: .45rem; border-bottom: 1px solid var(--line); }
.sheet__address { margin: 0 0 1rem; color: var(--text-soft); }
.sheet .btn-row { margin-top: 0; }
@media (min-width: 761px) { .sheet { margin: auto; border-radius: 16px; } }

/* Musterseiten-Hinweis */
.mock-note { background: #FFF6D8; color: #5A4500; font-size: .8125rem; text-align: center; padding: .4rem 1rem; }

/* ---------- Kurse ---------- */
.courses { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); margin-top: 2.5rem; }
@media (max-width: 1024px) { .courses { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .courses { grid-template-columns: 1fr; } }
.course { display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--bg); padding: clamp(1.5rem, 3vw, 2rem); }
.course h3 { margin-bottom: .4rem; }
.course__meta { color: var(--text-soft); font-size: .9375rem; margin-bottom: .6rem; }
.course__price { font: 700 1.75rem/1 var(--font-display); color: var(--brand); margin-bottom: 1.1rem; }
.course__price span { font: 400 .875rem/1 var(--font-text); color: var(--text-soft); }
.course__dates-title { font: 600 .8125rem/1.3 var(--font-text); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--accent); margin: .75rem 0 .5rem; }
.course__dates { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.course__dates li { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.course__dates li span:last-child { color: var(--text-soft); }
.course__dates li.is-ausgebucht { color: var(--text-soft); text-decoration: line-through; }
.course__dates li.is-ausgebucht span:last-child { text-decoration: none; }
.course__dates li.is-wenige span:last-child { color: var(--accent); font-weight: 600; }
.course__none { color: var(--text-soft); font-size: .9375rem; }
.course .btn-row { margin-top: auto; padding-top: 1.5rem; }
/* Titel, Eckdaten, Preis, Text, Termine und Buttons stehen in allen Kurskarten auf einer Höhe (7 Zeilen pro Karte) */
@supports (grid-template-rows: subgrid) {
  .course { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; }
  .course .btn-row { margin-top: 0; align-self: end; }
}

/* Leistungen ohne Nummern */
.steps--plain li::before { content: none; }
/* Ein Produktfoto oben im Info-Kasten, randlos über die ganze Breite */
.punkt__bild { margin: -1.75rem -1.5rem 1.5rem; padding: 1.75rem 1.5rem 1.25rem; height: 240px; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: flex-end; justify-content: center; }
.punkt__bild img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
@media (max-width: 560px) { .punkt__bild { height: 210px; } }

/* Team-Text */
.team__text { margin: .5rem 0 0; font-size: .9375rem; }

/* Listen in Gruppenkurs-Text */
.two-col ul:not(.brands) { padding-left: 1.1rem; }
.two-col li { margin-bottom: .35rem; }

.course .btn { padding: .7rem 1.1rem; letter-spacing: .1em; }

/* ---------- Rechtstexte ---------- */
.legal { max-width: 820px; }
.legal h1 { font-size: var(--h2); margin-bottom: 1.5rem; }
.legal h2 { font-size: 1.25rem; margin: 2.25rem 0 .6rem; }
.legal h3 { font-size: 1.05rem; margin: 1.5rem 0 .4rem; }
.legal ul { padding-left: 1.2rem; max-width: var(--text-max); }
.legal li { margin-bottom: .3rem; }
.legal__stand { margin-top: 2.5rem; color: var(--text-soft); font-size: .9375rem; }
.legal mark { background: #FFF1C2; color: var(--text); padding: 0 .2em; }

/* ---------- Fehlerseite ---------- */
.error-page { min-height: 60vh; display: grid; align-items: center; }
.error-page__inner { display: grid; grid-template-columns: minmax(180px, 360px) 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.error-page__figure { color: var(--brand); }
.error-page__figure svg { width: 100%; height: auto; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .error-page__figure svg { animation: stockmann-lauf 0.9s ease-in-out infinite alternate; transform-origin: 50% 80%; }
  @keyframes stockmann-lauf { from { transform: translateX(-4px) rotate(-2deg); } to { transform: translateX(6px) rotate(2deg); } }
}
@media (max-width: 680px) {
  .error-page__inner { grid-template-columns: 1fr; text-align: left; }
  .error-page__figure { max-width: 220px; }
}

/* Statistik (/statistik, nur für Panel-Nutzer) */
/* Linienfarben: Slots 1–5 der geprüften Standardpalette (blau, orange, türkis, gelb, magenta). Das Markenbraun ist
   für mehrere Linien zu grau, es bleibt für die einfarbigen Säulen. Türkis, Gelb und Magenta liegen unter 3:1, deshalb
   gibt es immer Legende, Endbeschriftung oder Tooltip und die Tabelle. */
.stats { --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100; --series-5: #e87ba4; }
.stats h1 { color: var(--brand); margin-bottom: .5rem; }
.stats__note { color: var(--text-soft); max-width: 70ch; }
.stats__range { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 2rem; }
.stats__tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; list-style: none; margin: 0 0 2.5rem; padding: 0; }
@media (max-width: 860px) { .stats__tiles { grid-template-columns: repeat(2, 1fr); } }
.stats__tiles li { display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem 1.2rem; border: 1px solid var(--line); background: var(--bg); }
.stats__value { font: 700 1.75rem/1.1 var(--font-display); color: var(--text); }
.stats__label { font-size: .875rem; color: var(--text-soft); }
.stats__block { margin-bottom: 2.75rem; }
.stats__block h2 { font-size: 1.35rem; margin-bottom: .35rem; }
.stats__sub { margin: 0 0 1rem; font-size: .875rem; color: var(--text-soft); max-width: 70ch; }
.stats__two { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
@media (max-width: 860px) { .stats__two { grid-template-columns: 1fr; gap: 0; } }
.stats__columns { display: flex; align-items: flex-end; gap: 2px; height: 180px; padding-top: 1rem; border-bottom: 1px solid var(--line); }
.stats__col { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; outline: none; }
.stats__col span { display: block; width: 100%; min-height: 2px; background: var(--brand); border-radius: 4px 4px 0 0; }
.stats__columns--dicht .stats__col span { border-radius: 0; }
.stats__col:hover span, .stats__col:focus-visible span { background: var(--text); }
.stats__col:hover::after, .stats__col:focus-visible::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 5;
  padding: .35rem .6rem; border-radius: 4px; background: var(--text); color: #fff; font-size: .8125rem; white-space: nowrap; pointer-events: none;
}
.stats__col:first-child:hover::after, .stats__col:first-child:focus-visible::after { left: 0; transform: none; }
.stats__col:last-child:hover::after, .stats__col:last-child:focus-visible::after { left: auto; right: 0; transform: none; }
.stats__axis { display: flex; justify-content: space-between; margin-top: .35rem; font-size: .8125rem; color: var(--text-soft); }
.stats__table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.stats__table th, .stats__table td { padding: .5rem .75rem .5rem 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.stats__table thead th { font: 600 .75rem/1.3 var(--font-text); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--text-soft); }
.stats__table tbody th { font-weight: 600; }
.stats__table td:last-child, .stats__table th:last-child { text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; }
.stats__table--bars .stats__bar { width: 45%; }
.stats__bar span { display: block; height: 10px; min-width: 2px; background: var(--brand); border-radius: 0 4px 4px 0; }
.stats__scroll { overflow-x: auto; }
.stats__scroll .stats__table { min-width: 720px; }
.stats__table-toggle { margin-top: 1rem; }
.stats__block h3 { margin-top: 1.75rem; font-size: 1.05rem; }
.stats__table-toggle summary { cursor: pointer; color: var(--brand); font-weight: 600; font-size: .9375rem; }

.stats__filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 2rem; margin: 1.5rem 0 .5rem; }
.stats__filters .stats__range { margin: 0; }
.stats__custom { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; }
.stats__custom label { display: flex; flex-direction: column; gap: .2rem; font-size: .8125rem; color: var(--text-soft); }
.stats__custom input { font: inherit; font-size: .9375rem; color: var(--text); padding: .55rem .6rem; border: 1px solid var(--line); border-radius: 2px; background: var(--bg); }
.stats__period { margin: 0 0 2rem; font-size: .875rem; color: var(--text-soft); }

.stats__tiles li { justify-content: flex-start; }
.stats__dist { margin-top: .75rem; padding-top: .65rem; border-top: 1px solid var(--line); display: grid; gap: .3rem; }
.stats__dist-title { margin: 0 0 .15rem; font-size: .75rem; color: var(--text-soft); }
.stats__dist-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 2.6rem; align-items: center; gap: .5rem; font-size: .75rem; }
.stats__dist-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.stats__dist-bar { height: 6px; background: var(--bg-warm); border-radius: 3px; overflow: hidden; }
.stats__dist-bar span { display: block; height: 100%; min-width: 2px; background: var(--brand); border-radius: 3px; }
.stats__dist-value { text-align: right; color: var(--text-soft); font-variant-numeric: tabular-nums; }

.stats__line { position: relative; }
.stats__legend { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; list-style: none; margin: 0 0 .5rem; padding: 0; font-size: .875rem; color: var(--text); }
.stats__legend li { display: inline-flex; align-items: center; gap: .45rem; }
.stats__key { display: inline-block; width: 16px; height: 2px; border-radius: 1px; background: var(--series-1); flex: none; }
.stats__key--2 { background: var(--series-2); } .stats__key--3 { background: var(--series-3); }
.stats__key--4 { background: var(--series-4); } .stats__key--5 { background: var(--series-5); }
.stats__line-canvas { min-height: 220px; outline: none; }
.stats__line-canvas:focus-visible { box-shadow: 0 0 0 2px var(--brand); border-radius: 2px; }
.stats__line-canvas svg { display: block; overflow: visible; }
.stats__line-canvas .raster { stroke: var(--line); stroke-width: 1; }
.stats__line-canvas .achse { stroke: var(--line); stroke-width: 1; }
.stats__line-canvas .beschriftung { fill: var(--text-soft); font-size: 12px; font-family: var(--font-text); }
.stats__line-canvas .endwert { fill: var(--text); font-size: 12px; font-family: var(--font-text); }
.stats__line-canvas .linie { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.stats__line-canvas .kreuz { stroke: var(--text-soft); stroke-width: 1; }
.stats__line-canvas .punkt { stroke: #fff; stroke-width: 2; }
.linie--1 { stroke: var(--series-1); } .punkt--1 { fill: var(--series-1); }
.linie--2 { stroke: var(--series-2); } .punkt--2 { fill: var(--series-2); }
.linie--3 { stroke: var(--series-3); } .punkt--3 { fill: var(--series-3); }
.linie--4 { stroke: var(--series-4); } .punkt--4 { fill: var(--series-4); }
.linie--5 { stroke: var(--series-5); } .punkt--5 { fill: var(--series-5); }
.stats__tooltip { position: absolute; z-index: 5; min-width: 11rem; padding: .55rem .75rem; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 4px 16px rgba(58, 38, 32, .12); pointer-events: none; font-size: .8125rem; }
.stats__tooltip p { margin: 0; display: flex; align-items: center; gap: .45rem; line-height: 1.6; }
.stats__tooltip strong { font-variant-numeric: tabular-nums; color: var(--text); }
.stats__tooltip span:not(.stats__key) { color: var(--text-soft); }
.stats__tooltip-title { font-weight: 600; color: var(--text); margin-bottom: .2rem !important; }

.stats__toggles { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; }
.stats__chip { font: 600 .8125rem/1 var(--font-text); padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--text); cursor: pointer; }
.stats__chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.stats__chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.stats__hours .stats__sub { margin-top: .5rem; }

.stats__two--flush { align-items: start; }
.stats__three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-bottom: 1rem; }
@media (max-width: 860px) { .stats__three { grid-template-columns: 1fr; gap: 0; } }
.stats__three h3 { margin-top: .5rem; }

.stats__sortbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0 0 .75rem; font-size: .875rem; color: var(--text-soft); }
.stats__sort { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; }
.stats__sort:hover { color: var(--brand); }
.stats__sort:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.stats__sort-mark { color: var(--brand); font-size: .75rem; letter-spacing: 0; }
.stats__table th[aria-sort], .stats__table th:has(.stats__sort-mark:not(:empty)) { color: var(--brand); }
.stats__sortbar[hidden] { display: none; }
.stats__table td[data-wert], .stats__table th[data-sort="zahl"] { text-align: right; }
.stats__table th[data-sort="zahl"] .stats__sort { flex-direction: row-reverse; }
.stats__dist-row { align-items: start; }
.stats__dist-label { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }
.stats__dist-bar { margin-top: .3rem; }
@media (max-width: 560px) { .stats__tiles { grid-template-columns: 1fr; } }

/* Kaffee: Röstereien mit ihren Sorten */
.roesterei { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.roesterei:first-of-type { border-top: 0; padding-top: 0; }
.roesterei__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2rem; margin-bottom: 1.25rem; }
.roesterei__kopf h3 { margin: 0 0 .2rem; }
.roesterei__kopf p { margin: 0; color: var(--text-soft); }
/* Anzahl der Modelle bzw. Sorten einer Marke, als kleine Zeile über dem Satz zur Marke */
.roesterei__kopf .roesterei__anzahl { margin: 0 0 .2rem; font: 600 .75rem/1.3 var(--font-text); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--accent); }
.roesterei__logo { width: auto; max-width: 260px; filter: grayscale(1) contrast(1.1); opacity: .85; mix-blend-mode: multiply; }
.kaffees { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; list-style: none; margin: 0; padding: 0; }
.kaffee { display: flex; flex-direction: column; }
.kaffee__bild { position: relative; aspect-ratio: 4 / 5; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.kaffee__bild img { position: absolute; inset: .75rem; width: calc(100% - 1.5rem); height: calc(100% - 1.5rem); object-fit: contain; }
.kaffee__bild--dunkel { background: #000; border-color: #000; }
.kaffee__bild--dunkel img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kaffee__name { margin: .6rem 0 0; font-weight: 600; line-height: 1.3; }
.kaffee__hinweis { margin: .15rem 0 0; font-size: .8125rem; color: var(--text-soft); }
.kaffee__text { margin: .45rem 0 0; font-size: .8125rem; line-height: 1.5; color: var(--text-soft); hyphens: auto; }
/* Persönlicher Satz in der Lieblingsreihe: mit Strich links abgesetzt */
.kaffee__text--warum { padding-left: .6rem; border-left: 2px solid var(--brand); color: var(--text); }
.kaffee--ohne-bild { justify-content: center; min-height: 5.5rem; padding: 1rem; background: var(--bg); border: 1px solid var(--line); }
.kaffee--ohne-bild .kaffee__name { margin: 0; }
.roestereien__mehr { margin-top: 2.5rem; font-weight: 600; color: var(--brand); }
@media (min-width: 900px) { .kaffees--reihen { grid-template-columns: repeat(var(--spalten), 1fr); } }
@media (max-width: 560px) { .kaffees { grid-template-columns: repeat(2, 1fr); } }

/* Häufige Fragen (Werkstatt) */
.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; gap: 1.5rem; } }
.faq__liste { border-top: 1px solid var(--line); }
.faq__eintrag { border-bottom: 1px solid var(--line); }
.faq__eintrag summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.05rem 0; cursor: pointer; list-style: none; font-weight: 600; color: var(--text); }
.faq__eintrag summary::-webkit-details-marker { display: none; }
.faq__eintrag summary::after { content: "+"; flex: none; font: 400 1.5rem/1 var(--font-text); color: var(--brand); transition: transform .2s; }
.faq__eintrag[open] summary::after { transform: rotate(45deg); }
.faq__eintrag summary:hover, .faq__eintrag summary:focus-visible { color: var(--brand); }
.faq__eintrag summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.faq__antwort { padding: 0 0 1.1rem; color: var(--text-soft); max-width: 62ch; }
/* Seite „Häufige Fragen“ */
.faq-kopf { padding-block: clamp(2.5rem, 6vw, 4rem); }
.faq-kopf .lead { max-width: 62ch; margin-bottom: 0; }
.faq-ende { text-align: center; }
.faq-ende .btn-row { justify-content: center; }
.faq__antwort .hours { margin-top: .25rem; }
.faq__antwort p { margin: 0 0 .6rem; }

.steps--plain li:has(.steps__link) { display: flex; flex-direction: column; }
.steps .steps__link { margin-top: auto; padding-top: .75rem; font-weight: 600; }
.steps__link a { color: var(--brand); }

/* Sortimentsseiten: Sprungleiste unter dem Foto */
.sprungleiste { border-bottom: 1px solid var(--line); background: var(--bg); }
.sprungleiste .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; padding-block: .9rem; }
.sprungleiste__titel { font: 600 .75rem/1.3 var(--font-text); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--text-soft); }
.sprungleiste ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.sprungleiste a, .marken-schnell a { display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; padding: .55rem 1rem; border: 1.5px solid var(--brand); border-radius: var(--radius); background: transparent; font: 600 .75rem/1.2 var(--font-text); letter-spacing: var(--track-button); text-transform: uppercase; color: var(--brand); text-decoration: none; transition: background .2s, color .2s; }
.sprungleiste a:hover, .sprungleiste a:focus-visible, .marken-schnell a:hover, .marken-schnell a:focus-visible { background: var(--brand); color: #fff; }
/* Sprungziele: Abschnitte beginnen direkt unter der Kopfleiste, einzelne Elemente mit etwas Luft */
main [id] { scroll-margin-top: 1rem; }
main section[id] { scroll-margin-top: 0; }
/* Schnellwahl der Marken im Block „Marken & Modelle“ */
.marken-schnell { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 1.25rem 0 0; padding: 0; }
.marken-schnell a span { letter-spacing: 0; opacity: .7; }
/* Gut zu wissen: Erklärkarten */
.wissen__intro { max-width: 62ch; }
.wissen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 2rem 0 0; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 960px) { .wissen { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .wissen { grid-template-columns: 1fr; } }
.wissen__eintrag { background: var(--bg); padding: 1.4rem 1.4rem 1.2rem; }
.section--warm .wissen__eintrag { background: var(--bg); }
.wissen dt { font: 700 1.05rem/1.25 var(--font-display); letter-spacing: var(--track-heading); text-transform: uppercase; color: var(--brand); margin-bottom: .5rem; }
.wissen dd { margin: 0; font-size: .9375rem; color: var(--text-soft); }
.wissen dd p { margin: 0 0 .5rem; }
.wissen dd p:last-child { margin-bottom: 0; }

/* Marken als Logo-Quadrate (z. B. Kaffee) */
.marken-kacheln { display: grid; grid-template-columns: repeat(var(--spalten, 7), minmax(0, 1fr)); gap: .75rem; list-style: none; margin: 1.75rem 0 0; padding: 0; }
.marken-kachel { position: relative; display: flex; flex-direction: column; aspect-ratio: 1; background: var(--bg); border: 1px solid var(--line); color: var(--text); text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.marken-kachel__logo { flex: 1; display: grid; place-items: center; padding: 1rem; min-height: 0; }
.marken-kachel__logo img { max-width: 100%; width: auto; object-fit: contain; filter: grayscale(1) contrast(1.1); opacity: .85; mix-blend-mode: multiply; transition: filter .2s, opacity .2s; }
.marken-kachel__name { font: 700 1.05rem/1.1 var(--font-display); letter-spacing: var(--track-heading); text-transform: uppercase; color: var(--brand); text-align: center; }
.marken-kachel__zahl { padding: .45rem .5rem; border-top: 1px solid var(--line); font-size: .75rem; color: var(--text-soft); text-align: center; }
.marken-auswahl__hinweis { margin: 1rem 0 0; font-size: .875rem; color: var(--text-soft); }
/* Kacheln sollen nach Klick aussehen: Pfeil im Zähler, beim Überfahren leicht anheben */
.marken-kachel { cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; }
.marken-kachel__zahl::after { content: " →"; color: var(--brand); }
.marken-kachel:hover, .marken-kachel:focus-visible { border-color: var(--brand); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(58, 38, 32, .12); }
.marken-kachel.is-aktiv .marken-kachel__zahl::after { content: " ▾"; color: inherit; }
/* Kachel „Unsere Lieblinge“: unser Logo hell auf Braun */
.marken-kachel--lieblinge { background: var(--brand); border-color: var(--brand); }
.marken-kachel--lieblinge .marken-kachel__logo { color: var(--on-dark); }
.marken-kachel--lieblinge .marken-kachel__logo svg { width: 62%; height: auto; max-height: 72px; transition: transform .2s; }
.marken-kachel--lieblinge .marken-kachel__logo img.stockmann-figur--logo { width: 82%; height: auto; mix-blend-mode: normal; opacity: 1; filter: brightness(0) invert(1); } /* weiß auf Braun; ohne „multiply“ der Markenlogos */
.error-page__figure .stockmann-figur--logo { width: 100%; height: auto; display: block; }
.marken-kachel--lieblinge:hover .marken-kachel__logo svg { transform: translateX(3px); }
.marken-kachel--lieblinge .marken-kachel__zahl { border-top-color: rgba(253, 252, 249, .35); color: var(--on-dark); font-weight: 600; }
.marken-kachel--lieblinge .marken-kachel__zahl::after { color: var(--on-dark); }
.marken-kachel--lieblinge.is-aktiv { box-shadow: inset 0 0 0 2px var(--on-dark), 0 0 0 2px var(--brand); }
.marken-kachel--lieblinge.is-aktiv .marken-kachel__zahl { background: var(--brand); color: var(--on-dark); }
@media (max-width: 560px) { .marken-kachel--lieblinge .marken-kachel__logo svg { max-height: 42px; } }
.marken-kachel:hover img, .marken-kachel:focus-visible img, .marken-kachel.is-aktiv img { filter: none; opacity: 1; }
.marken-kachel:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.marken-kachel.is-aktiv { border-color: var(--brand); box-shadow: inset 0 0 0 2px var(--brand); }
.marken-kachel.is-aktiv .marken-kachel__zahl { background: var(--brand); border-color: var(--brand); color: #fff; }
@media (max-width: 560px) { .marken-kachel__logo { padding: .6rem; } .marken-kachel__logo img { max-height: 44px; } .marken-kachel__name { font-size: .85rem; } }
.marken-auswahl__lieblinge { margin-top: 2.5rem; }
.marken-auswahl__lieblinge[hidden] { display: none; }
.marken-auswahl__titel { margin: 0 0 1.25rem; }
.marken-auswahl__text { margin: -.75rem 0 1.25rem; max-width: 62ch; color: var(--text-soft); }
.kaffee__marke { margin: .6rem 0 0; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); }
.kaffee__marke + .kaffee__name { margin-top: .1rem; }
.marken-auswahl__zurueck { margin-left: auto; padding: .5rem .9rem; border: 1px solid var(--brand); border-radius: 2px; background: none; color: var(--brand); font: 600 .8125rem/1 var(--font-text); cursor: pointer; }
.marken-auswahl__zurueck[hidden] { display: none; }
.marken-auswahl__zurueck:hover, .marken-auswahl__zurueck:focus-visible { background: var(--brand); color: #fff; }
/* Mit JavaScript ist immer nur eine Marke (oder die Lieblingsreihe) zu sehen */
.marken-auswahl.is-js [data-marken-panel] { display: none; }
.marken-auswahl.is-js [data-marken-panel].is-aktiv { display: block; margin-top: 2.5rem; padding-top: 0; border-top: 0; }
.marken-auswahl .roesterei:first-of-type { border-top: 1px solid var(--line); padding-top: 2rem; }
.kaffee__bild--leer { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; padding: 1rem; text-align: center; background: var(--bg-warm); }
.section--warm .kaffee__bild--leer { background: #fff; }
.kaffee__bild--leer span:first-child { font: 700 1.1rem/1.1 var(--font-display); letter-spacing: var(--track-heading); text-transform: uppercase; color: var(--brand); }
.kaffee__bild--leer span:last-child { font-size: .875rem; color: var(--text-soft); }
@media (max-width: 960px) { .marken-kacheln { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); } }
@media (max-width: 560px) { .marken-kacheln { grid-template-columns: repeat(var(--spalten-mobil, 4), 1fr); gap: .4rem; } .marken-kachel__logo { padding: .4rem; } .marken-kachel__logo img { max-height: 34px; } .marken-kachel__zahl { padding: .3rem .2rem; font-size: .6875rem; } .marken-kachel__name { font-size: .7rem; } }

/* Passende Modelle in den Info-Kästen */

/* Überschriften, auf die ein Sprunglink den Fokus setzt, ohne Rahmen */
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus, h3[tabindex="-1"]:focus { outline: none; }