/*
Theme Name: Schneefux
Description: Schlankes Block-Theme für schneefux.com nach dem apple-design-Skill. Gebaut von Jarvis aus scripts/neubau/.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 7.4
Author: Schneefux
Text Domain: schneefux
*/

/* Schneefux — Neubau nach dem apple-design-Skill.
   Ein Stylesheet fuer alle Seiten. Kein Theme, kein Baukasten darunter.

   Aufbau: 1 Farben  2 Schrift  3 Grundlagen  4 Knoepfe  5 Kopfleiste und Menue
           6 Buehne und Seitenkopf  7 Bloecke  8 Fuss  9 Bewegung  10 Barrierefreiheit */

/* ───── 1 Farben ─────
   Alle Farben als Variablen. Hell ist Standard, dunkel folgt der Systemeinstellung.
   Das Schneefux-Blau (#009ed9) ist auf Weiss als Schrift zu blass (Kontrast 3:1),
   deshalb gibt es eine dunklere Stufe fuer Text und Knoepfe. */
:root {
  --grund: #ffffff;
  --flaeche: #f5f5f7;
  --flaeche-tief: #e8e8ed;
  --text: #1d1d1f;
  --text2: #6e6e73;
  --linie: rgba(0, 0, 0, .1);
  --marke: #009ed9;
  --akzent: #0071a8;
  --akzent-druck: #005f8d;
  --akzent-zart: #e6f4fb;
  /* Knoepfe tragen weisse Schrift und bleiben deshalb in beiden Modi kraeftig blau. */
  --knopf: #0071a8;
  --knopf-druck: #005f8d;
  --band: #000000;
  --band-text: #f5f5f7;
  --band-text2: #a1a1a6;
  --leiste: rgba(255, 255, 255, .72);
  --blatt: rgba(255, 255, 255, .97);
  --schatten: 0 10px 40px rgba(0, 0, 0, .08);
  --logo-filter: none;
  --markenlogo: brightness(0);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grund: #000000;
    --flaeche: #1c1c1e;
    --flaeche-tief: #2c2c2e;
    --text: #f5f5f7;
    --text2: #a1a1a6;
    --linie: rgba(255, 255, 255, .14);
    --akzent: #2fb4ec;
    --akzent-druck: #5cc6f1;
    --akzent-zart: #0b2a38;
    --band: #161617;
    --leiste: rgba(22, 22, 23, .72);
    --blatt: rgba(30, 30, 32, .97);
    --schatten: 0 10px 40px rgba(0, 0, 0, .5);
    --logo-filter: invert(1);
    --markenlogo: brightness(0) invert(1);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --grund: #000000; --flaeche: #1c1c1e; --flaeche-tief: #2c2c2e; --text: #f5f5f7;
  --text2: #a1a1a6; --linie: rgba(255, 255, 255, .14); --akzent: #2fb4ec;
  --akzent-druck: #5cc6f1; --akzent-zart: #0b2a38; --band: #161617;
  --leiste: rgba(22, 22, 23, .72); --blatt: rgba(30, 30, 32, .97);
  --schatten: 0 10px 40px rgba(0, 0, 0, .5); --logo-filter: invert(1);
  --markenlogo: brightness(0) invert(1); color-scheme: dark;
}

/* ───── 2 Schrift ─────
   Raleway bleibt die Hausschrift, aber nur fuer Ueberschriften und grosse Zahlen.
   Fliesstext und Preise laufen in der Systemschrift (auf Apple-Geraeten SF Pro):
   Raleway hat Ziffern mit Ober- und Unterlaengen, bei Preisen tanzen die Zahlen. */
@font-face {
  font-family: "Raleway"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("assets/schrift/raleway-normal-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: "Raleway"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("assets/schrift/raleway-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  --schrift: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --titelschrift: "Raleway", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

/* ───── 3 Grundlagen ───── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 72px; }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font: 400 1.0625rem/1.5 var(--schrift); letter-spacing: -.012em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-kerning: normal; overflow-x: hidden;
  /* Stellt jemand am Geraet zwischen hell und dunkel um, blendet die Seite weich ueber
     statt hart umzuspringen. Bei "Bewegung reduzieren" faellt das weg (Abschnitt 9). */
  transition: background-color .4s ease, color .4s ease;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .18em; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 600; }
h1, h2, h3 { font-family: var(--titelschrift); color: var(--text); margin: 0; text-wrap: balance;
  font-optical-sizing: auto; }
h1 { font-size: clamp(2.5rem, 6.4vw, 4.75rem); line-height: 1.04; letter-spacing: -.035em; font-weight: 800; }
h2 { font-size: clamp(1.875rem, 4.2vw, 3rem); line-height: 1.08; letter-spacing: -.028em; font-weight: 800; }
h3 { font-size: 1.1875rem; line-height: 1.25; letter-spacing: -.012em; font-weight: 700; }
/* Lange deutsche Woerter wie "Verleihbedingungen" passen am Handy nicht in eine Zeile.
   Dort darf getrennt werden, am Rechner nicht. */
@media (max-width: 599px) { h2 { -webkit-hyphens: auto; hyphens: auto; }
  h1 { -webkit-hyphens: manual; hyphens: manual; } }
.lead { font-size: clamp(1.1875rem, 2vw, 1.375rem); line-height: 1.42; color: var(--text2);
  letter-spacing: -.016em; max-width: 42em; margin-top: 16px; text-wrap: pretty; }

.w { width: 100%; max-width: 1068px; margin: 0 auto;
  padding-left: max(22px, env(safe-area-inset-left)); padding-right: max(22px, env(safe-area-inset-right)); }
.w.breit { max-width: none; padding: 0; }

/* Abstaende: ein Abschnitt setzt einen grossen Absatz, alles darunter haengt eng an ihm. */
main, .inhalt { display: flow-root; margin: 0; }
.b { margin-top: 28px; }
.b-abschnitt, .b-band, .b-bildband, .b-split, .b-neu, .b-wege { margin-top: clamp(80px, 11vw, 128px); }
.b-abschnitt + .b { margin-top: 36px; }
.b-abschnitt.nur-titel + .b { margin-top: 28px; }
.b-kopf + .b, .b-buehne + .b { margin-top: 28px; }
.b-kopf + .b-abschnitt { margin-top: clamp(64px, 8vw, 96px); }
.b-split + .b-split { margin-top: 28px; }
main > .b:last-child { margin-bottom: clamp(80px, 10vw, 120px); }

.raster { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
@media (min-width: 900px) {
  .raster.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .karten-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .karten-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .karten-5 > * { grid-column: span 2; }
  .karten-5 > :nth-child(4) { grid-column: 2 / span 2; }
}


/* WordPress-Bloecke auf null stellen: Abstaende und Raender kommen von hier, nicht von WordPress. */
.wp-block-image, .wp-block-table, .wp-block-gallery, .wp-block-embed, figure { margin: 0; }
.wp-block-image img { height: auto; }
.wp-block-list { margin: 0; padding: 0; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.wp-block-group:empty { display: none; }

/* ───── 4 Knoepfe ─────
   Ein Knopf ist entweder unser eigener (.knopf, in Kopfleiste und Menue) oder ein
   WordPress-Knopf aus dem Editor (.wp-block-button__link). Beide sehen gleich aus.
   Rueckmeldung im Moment des Drueckens, Trefferflaeche mindestens 44 Pixel hoch. */
.knopf, .wp-block-button__link, .wpcf7-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border-radius: 980px; border: 0;
  background: var(--knopf); color: #fff; font: 600 1.0625rem/1 var(--schrift);
  letter-spacing: -.01em; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s ease, transform .12s ease-out;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.knopf:hover, .wp-block-button__link:hover, .wpcf7-submit:hover { background: var(--knopf-druck); color: #fff;
  text-decoration: none; }
.knopf:active, .wp-block-button__link:active, .wpcf7-submit:active { transform: scale(.97); transition-duration: .06s; }
.knopf.zweit, .zweit > .wp-block-button__link { background: var(--akzent-zart); color: var(--akzent); }
.knopf.zweit:hover, .zweit > .wp-block-button__link:hover { background: color-mix(in srgb, var(--akzent-zart) 80%, var(--akzent));
  color: var(--akzent); }
.hell > .wp-block-button__link { background: #fff; color: #1d1d1f; }
.hell > .wp-block-button__link:hover { background: #e8e8ed; color: #1d1d1f; }
.glas > .wp-block-button__link { background: rgba(255, 255, 255, .16); color: #fff;
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.glas > .wp-block-button__link:hover { background: rgba(255, 255, 255, .26); }
.knopf.klein, .klein > .wp-block-button__link { min-height: 34px; padding: 0 16px; font-size: .875rem; }
.knoepfe, .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.wp-block-button { margin: 0; }

/* ───── 5 Kopfleiste und Menue ───── */
.kopfbereich { display: contents; }
.leiste { position: sticky; top: 0; z-index: 50; }
.admin-bar .leiste { top: var(--wp-admin--admin-bar--height, 32px); }
.leiste-innen {
  position: relative; z-index: 2; display: flex; align-items: center; gap: 24px;
  height: 60px; padding: 0 max(22px, env(safe-area-inset-left));
  background: var(--leiste);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 1px 0 transparent; transition: box-shadow .3s ease;
}
/* Trennlinie erst, wenn Inhalt unter der Leiste liegt. */
.gescrollt .leiste-innen { box-shadow: 0 1px 0 var(--linie); }
.logo { display: block; flex: 0 0 auto; border-radius: 8px; }
.logo img { height: 46px; width: auto; }
/* Echtes Markenlogo als Vektorgrafik: farbig im hellen Modus, weiss im dunklen. */
.logo .logo-dunkel { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo .logo-hell { display: none; }
  :root:not([data-theme="light"]) .logo .logo-dunkel { display: block; } }
:root[data-theme="dark"] .logo .logo-hell { display: none; }
:root[data-theme="dark"] .logo .logo-dunkel { display: block; }
.hauptmenue { margin: 0 auto; }
.hauptmenue > ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.hauptmenue li { position: relative; }
.hauptmenue a { display: block; padding: 8px 12px; border-radius: 10px; color: var(--text);
  font-size: .9375rem; font-weight: 500; letter-spacing: -.01em; }
.hauptmenue a:hover { text-decoration: none; background: var(--flaeche); }
.hauptmenue a[aria-current] { color: var(--akzent); }
/* Untermenue: waechst aus dem Menuepunkt heraus, nicht aus der Bildschirmmitte. */
.hauptmenue .unter {
  position: absolute; top: calc(100% + 8px); left: 50%; min-width: 230px; list-style: none;
  margin: 0; padding: 8px; border-radius: 16px; background: var(--blatt);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  box-shadow: var(--schatten), 0 0 0 1px var(--linie);
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px) scale(.97);
  transform-origin: top center;
  transition: opacity .18s ease, transform .3s cubic-bezier(.32, .72, 0, 1), visibility 0s .3s;
}
.hauptmenue .unter::before { content: ""; position: absolute; inset: -12px 0 auto; height: 12px; }
.hauptmenue .mit-unter:hover .unter, .hauptmenue .mit-unter:focus-within .unter {
  opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1);
  transition: opacity .18s ease, transform .3s cubic-bezier(.32, .72, 0, 1), visibility 0s;
}
.hauptmenue .unter a { padding: 10px 12px; white-space: nowrap; }
.termin { flex: 0 0 auto; }

.menueknopf {
  display: none; position: relative; width: 44px; height: 44px; margin-right: -10px;
  border: 0; background: none; cursor: pointer; border-radius: 12px;
  -webkit-tap-highlight-color: transparent;
}
.menueknopf span { position: absolute; left: 13px; width: 18px; height: 1.5px; border-radius: 2px;
  background: var(--text); transition: transform .35s cubic-bezier(.32, .72, 0, 1); }
.menueknopf span:first-child { top: 18px; }
.menueknopf span:last-child { top: 25px; }
.menueknopf[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menueknopf[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.menueknopf:active { background: var(--flaeche); }

/* Das Menueblatt am Handy faehrt aus der Leiste heraus nach unten und auf demselben Weg
   wieder zurueck. Die Kurve ist die der iOS-Blaetter: schnell los, weich aus. */
/* Das Blatt deckt den ganzen Bildschirm, deshalb ist es deckend statt durchscheinend:
   Unter einer Vollflaeche bringt Glas nichts, und schimmert Text durch, leidet die
   Lesbarkeit (Skill: Material nur, wo es Hierarchie zeigt). So macht es auch apple.com. */
.blatt {
  position: fixed; inset: 0; z-index: 1; padding: 76px max(22px, env(safe-area-inset-left)) 32px;
  background: var(--grund);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transform: translateY(-12px);
  transition: opacity .25s ease, transform .45s cubic-bezier(.32, .72, 0, 1);
}
.blatt.offen { opacity: 1; transform: none; }
.blatt ul { list-style: none; margin: 0; padding: 0; }
.blatt nav > ul > li { border-bottom: 1px solid var(--linie); padding: 6px 0 10px; }
.blatt a.haupt { display: block; padding: 12px 0 4px; color: var(--text); font: 700 1.75rem/1.2 var(--titelschrift);
  letter-spacing: -.025em; }
.blatt li li a { display: block; padding: 8px 0; color: var(--text2); font-size: 1.0625rem; }
.blatt a:hover { text-decoration: none; color: var(--akzent); }
.blatt .knoepfe { flex-direction: column; }
.blatt-offen { overflow: hidden; }

@media (max-width: 899px) {
  .hauptmenue { display: none; }
  .leiste-innen { gap: 12px; height: 56px; }
  .termin { margin-left: auto; }
  .menueknopf { display: block; }
  .logo img { height: 40px; }
}
@media (min-width: 900px) { .blatt { display: none !important; } }

/* ───── 6 Buehne (Startseite) und Seitenkopf ───── */
.b-buehne { position: relative; margin-top: 0; min-height: min(86svh, 860px); display: flex;
  align-items: flex-end; overflow: hidden; background: #0b0d10; color: #fff; isolation: isolate; }
.b-buehne > .buehnenbild { position: absolute; inset: 0; z-index: -2; }
.b-buehne > .buehnenbild img { width: 100%; height: 100%; object-fit: cover; }
.b-buehne::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.12) 75%),
              linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 65%); }
.buehnentext { padding-top: 120px; padding-bottom: clamp(48px, 8vw, 96px); }
.b-buehne .oben { font-size: 1.0625rem; font-weight: 600; color: rgba(255,255,255,.82); margin-bottom: 14px;
  letter-spacing: -.01em; }
.b-buehne h1 { color: #fff; font-size: clamp(2.75rem, 7.6vw, 5.75rem); line-height: 1.0;
  letter-spacing: -.04em; max-width: 13ch; }
.b-buehne h1 em { display: block; font-style: normal; color: rgba(255,255,255,.62); }
.b-buehne .satz { font-size: clamp(1.1875rem, 2.1vw, 1.5rem); line-height: 1.4; max-width: 34em;
  margin-top: 22px; color: rgba(255,255,255,.9); letter-spacing: -.016em; }
.b-buehne .beleg { margin-top: 28px; font-size: .875rem; color: rgba(255,255,255,.66); }

.b-kopf { margin-top: 0; padding-top: clamp(40px, 6vw, 72px); }
.kopftext { text-align: center; max-width: 820px; margin: 0 auto; }
.kopftext .unter { font-size: clamp(1.1875rem, 2.2vw, 1.5rem); line-height: 1.4; color: var(--text2);
  margin: 18px auto 0; max-width: 34em; letter-spacing: -.016em; }
.kopftext .wp-block-buttons { justify-content: center; }
.weg { font-size: .875rem; color: var(--text2); margin-bottom: 18px; }
.weg a { color: var(--text2); padding: 10px 2px; margin: -10px -2px; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none;
  padding: 0; margin: 22px 0 0; }
.chips li { font-size: .8125rem; font-weight: 500; padding: 6px 12px; border-radius: 980px;
  background: var(--flaeche); color: var(--text2); letter-spacing: 0; }
.kopfrahmen { margin-top: clamp(40px, 6vw, 64px) !important; border-radius: 28px; overflow: hidden;
  aspect-ratio: 16 / 8; background: var(--flaeche); }
.kopfrahmen img { width: 100%; height: 100%; object-fit: cover; }
.b-kopf.ohne-bild .kopftext { text-align: left; margin: 0; }
.b-kopf.ohne-bild .chips, .b-kopf.ohne-bild .wp-block-buttons { justify-content: flex-start; }
.b-kopf.ohne-bild .unter { margin-left: 0; }
.b-kopf .wp-block-post-title { font-size: clamp(2.25rem, 5vw, 3.75rem); }
@media (max-width: 699px) {
  .kopfrahmen { aspect-ratio: 4 / 3; border-radius: 22px; }
  .kopftext .wp-block-button { flex: 1 1 100%; }
  .kopftext .wp-block-button__link { width: 100%; }
}

/* ───── 7 Bloecke ───── */
.fliess { margin-top: 24px; max-width: 42em; font-size: 1.0625rem; line-height: 1.6; }
.fliess > .wp-block-buttons { margin-top: 28px; }

/* Belege unter der Buehne */
.belegreihe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--linie); }
.belegreihe .beleg { padding: 28px 20px 28px 0; }
.belegreihe .wert { font: 800 clamp(1.625rem, 4vw, 2.5rem)/1.05 var(--titelschrift); letter-spacing: -.035em;
  color: var(--text); margin: 0; }
.belegreihe .was { margin-top: 8px; font-size: .9375rem; color: var(--text2); line-height: 1.35; }
@media (max-width: 699px) { .belegreihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .belegreihe .beleg { padding: 22px 12px 22px 0; } }

/* Karten */
.karte { background: var(--flaeche); border-radius: 20px; padding: 26px 26px 28px; }
.karte h3 { margin-bottom: 8px; }
.karte p { color: var(--text2); font-size: 1rem; line-height: 1.5; margin: 0; }

/* Kacheln: ganze Flaeche klickbar, Druck gibt sofort nach */
@media (min-width: 900px) { .kachelraster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kachel { position: relative; display: flex; flex-direction: column; background: var(--flaeche);
  border-radius: 22px; padding: 28px; min-height: 210px;
  transition: transform .35s cubic-bezier(.32, .72, 0, 1), background-color .2s ease; }
.kachel h3 { font-size: 1.5rem; letter-spacing: -.022em; }
.kachel p { color: var(--text2); margin: 10px 0 18px; flex: 1; }
.kachel .mehr { flex: 0; margin: 0; font-weight: 600; font-size: 1rem; }
.kachel .mehr a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.kachel .mehr a:hover { text-decoration: none; }
@media (hover: hover) { .kachel:hover { background: var(--flaeche-tief); transform: translateY(-2px); } }
.kachel:active { transform: scale(.98); transition-duration: .08s; }
.kachel:focus-within { outline: 3px solid var(--akzent); outline-offset: 4px; }
.kachel .mehr a:focus-visible { outline: none; }

/* Preise und Oeffnungszeiten: Tabellen, im Editor Zelle fuer Zelle aenderbar.
   Kursiv gesetzter Text in einer Zelle wird zur grauen Zusatzzeile darunter. */
.tafeln { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.tafeln-1 { grid-template-columns: minmax(0, 560px); }
.tafel { background: var(--flaeche); border-radius: 22px; padding: 26px 28px 14px; }
.tafel h3 { font-size: 1.1875rem; padding-bottom: 14px; }
.tafel > p { color: var(--text2); margin: 12px 0; }
.tafel .klein { font-size: .9375rem; padding-bottom: 12px; }
.tafel .wp-block-buttons { margin: 8px 0 14px; }
.preisliste table, .zeiten table { width: 100%; border-collapse: collapse; border: 0; table-layout: auto; }
.preisliste td, .zeiten td { border: 0; border-top: 1px solid var(--linie); padding: 14px 0;
  vertical-align: baseline; text-align: left; font-size: 1rem; line-height: 1.4; }
.preisliste td:last-child, .zeiten td:last-child { text-align: right; white-space: nowrap; font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em; padding-left: 18px; }
.preisliste em { display: block; margin-top: 3px; font-style: normal; font-size: .875rem; color: var(--text2); }
.preisliste br:has(+ em) { display: none; }
.wp-block-table thead, .wp-block-table tfoot { border: 0; }

/* Aktionsbanner (Saison-Opening). Dunkle Flaeche, eine grosse Zahl, zwei Wege.
   Verschwindet nach dem Ablaufdatum von selbst (functions.php). */
.b-buehne + .b-aktion { margin-top: 28px; }
.aktion { position: relative; overflow: hidden; border-radius: 28px; color: #fff; isolation: isolate;
  padding: clamp(32px, 6vw, 64px); text-align: center;
  background: radial-gradient(120% 140% at 50% 0%, #0a4f75 0%, #06263a 45%, #000 100%); }
.aktion .oben { font-size: 1.0625rem; font-weight: 600; color: rgba(255,255,255,.78); margin: 0;
  letter-spacing: -.01em; }
.aktion .aktionszahl { color: #fff; font-size: clamp(3.25rem, 11vw, 7.5rem); line-height: .95;
  letter-spacing: -.045em; margin-top: 12px; }
.aktion .aktionstext { margin: 18px auto 0; max-width: 30em; color: rgba(255,255,255,.82);
  font-size: clamp(1.0625rem, 1.8vw, 1.25rem); }
.aktion .wp-block-buttons { justify-content: center; }

/* Hinweis */
.hinweis { background: var(--akzent-zart); border-radius: 18px; padding: 20px 24px; font-size: 1.0625rem;
  line-height: 1.5; }
.hinweis a { font-weight: 600; }

/* Ankuendigung */
.neu { position: relative; overflow: hidden; border-radius: 28px; padding: clamp(32px, 5vw, 56px);
  background: linear-gradient(140deg, var(--akzent-zart) 0%, var(--flaeche) 70%); }
.neu .marke { display: inline-block; font-size: .8125rem; font-weight: 600; color: #fff;
  background: var(--knopf); padding: 6px 12px; border-radius: 980px; margin: 0 0 18px; }
.neu h2 { max-width: 16ch; }
.neu p:not(.marke) { margin-top: 16px; font-size: clamp(1.0625rem, 1.8vw, 1.25rem); line-height: 1.5;
  color: var(--text2); max-width: 40em; }

/* Bild und Text nebeneinander */
.split { display: grid; grid-template-columns: 1fr 1fr; border-radius: 28px; overflow: hidden;
  background: var(--flaeche); }
.split.gedreht .splitbild { order: 2; }
.splitbild { min-height: 420px; }
.splitbild img { width: 100%; height: 100%; object-fit: cover; }
.splittext { padding: clamp(32px, 5vw, 64px); align-self: center; }
.splittext h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
.splittext p { margin-top: 16px; color: var(--text2); font-size: 1.0625rem; line-height: 1.55; }
@media (max-width: 799px) {
  .split { grid-template-columns: 1fr; }
  .split.gedreht .splitbild { order: 0; }
  .splitbild { min-height: 0; aspect-ratio: 4 / 3; }
}

/* Dunkles Band mit Zahlen */
.b-band.dunkel { background: var(--band); color: var(--band-text); padding: clamp(72px, 10vw, 120px) 0; }
.b-band h2 { color: var(--band-text); }
.b-band .lead { color: var(--band-text2); }
.zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; margin-top: 48px; }
.zahl .wert { font: 800 clamp(2.25rem, 5vw, 3.5rem)/1 var(--titelschrift); letter-spacing: -.04em;
  color: var(--band-text); margin: 0; }
.zahl .was { margin-top: 10px; color: var(--band-text2); font-size: 1rem; }

/* Band mit Foto */
.bildband { position: relative; border-radius: 28px; overflow: hidden; min-height: clamp(420px, 52vw, 580px);
  display: flex; align-items: flex-end; background: linear-gradient(160deg, #1d1d1f, #000); color: #fff;
  isolation: isolate; }
.bildband > .bandbild { position: absolute; inset: 0; z-index: -2; }
.bildband > .bandbild img { width: 100%; height: 100%; object-fit: cover; }
.bildband.mit-bild::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.05) 100%); }
.bandtext { padding: clamp(28px, 5vw, 56px); max-width: 640px; }
.bandtext h2 { color: #fff; }
.bandtext p { margin-top: 14px; color: rgba(255,255,255,.86); font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
  line-height: 1.5; }

/* Markenkacheln (Van Deer, DPS) */
.reihe { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.marke-gross { position: relative; border-radius: 28px; overflow: hidden; min-height: 560px; display: flex;
  align-items: flex-end; background: #111; color: #fff; isolation: isolate; }
.marke-gross > .markenbild { position: absolute; inset: 0; z-index: -2; }
.marke-gross > .markenbild img { width: 100%; height: 100%; object-fit: cover; }
.marke-gross.mit-bild::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.1) 100%); }
.markentext { padding: 32px; }
.schild { display: inline-block; font-size: .8125rem; font-weight: 600; padding: 6px 12px; margin: 0 0 14px;
  border-radius: 980px; background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px); }
.marke-gross h3 { color: #fff; font: 800 clamp(1.625rem, 3vw, 2.125rem)/1.1 var(--titelschrift);
  letter-spacing: -.028em; }
.marke-gross p:not(.schild) { margin-top: 12px; color: rgba(255,255,255,.84); line-height: 1.55; }
.marke-gross .wp-block-buttons { margin-top: 22px; }

/* Video und Terminkalender */
.wp-block-embed { border-radius: 22px; overflow: hidden; background: #000; }
.wp-block-embed iframe { display: block; border: 0; }
/* Der Kalender von eTermin ist immer weiss, seine Farben lassen sich von aussen nicht aendern.
   Ein Rahmen in Flaechenfarbe macht daraus ein eingelegtes Blatt. Im Dunkelmodus vermeidet das
   den harten Sprung von Schwarz auf Weiss, den der Skill ausdruecklich vermeiden will. */
.sfx-etermin { background: var(--flaeche); border-radius: 28px; padding: 12px; }
.sfx-etermin iframe { display: block; width: 100%; border: 0; min-height: 820px; border-radius: 18px;
  background: #fff; }
@media (max-width: 599px) { .sfx-etermin { padding: 6px; border-radius: 22px; } }

/* Marken als durchlaufendes Band. Langsam, an den Raendern weich ausgeblendet, haelt an,
   sobald man mit der Maus darauf zeigt oder es antippt. Bei "Bewegung reduzieren" oder ohne
   Skript stehen die Logos ruhig in einer Reihe. */
.markenband { position: relative; overflow: hidden; padding: 28px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
.markenband:not(.laeuft) { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 48px;
  padding-left: 22px; padding-right: 22px; -webkit-mask-image: none; mask-image: none; }
.lauf-spur { display: flex; align-items: center; gap: 64px; width: max-content;
  animation: markenlauf var(--laufzeit, 45s) linear infinite; }
.markenband.angehalten .lauf-spur { animation-play-state: paused; }
@media (hover: hover) { .markenband:hover .lauf-spur { animation-play-state: paused; } }
@keyframes markenlauf { to { transform: translateX(-50%); } }
.markenband .logo-marke, .markenband .nur-name { flex: 0 0 auto; margin: 0; }
.markenband img { height: 36px; width: auto; max-width: 160px; object-fit: contain;
  filter: var(--markenlogo); opacity: .62; transition: opacity .3s ease; }
@media (hover: hover) { .markenband img:hover { opacity: 1; } }
.markenband .nur-name { font: 700 1.0625rem/1 var(--titelschrift); color: var(--text2); white-space: nowrap;
  letter-spacing: -.01em; }
@media (max-width: 699px) { .lauf-spur { gap: 44px; } .markenband img { height: 28px; } }

/* Streifen zum Wischen: Galerie und Kundenstimmen. Die Galerie ist eine normale
   WordPress-Galerie; erst hier wird sie zum seitlichen Streifen mit Einrasten. */
.spur, .wp-block-gallery.has-nested-images.spur {
  display: flex; flex-wrap: nowrap; gap: 20px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  --rand: max(22px, calc((100vw - 1024px) / 2));
  padding: 4px var(--rand) 8px; scroll-padding-inline: var(--rand); margin: 0; }
.spur::-webkit-scrollbar { display: none; }
.spur > * { flex: 0 0 auto; scroll-snap-align: start; margin: 0; }
.spur:focus-visible { outline-offset: -4px; }
.wp-block-gallery.has-nested-images.spur figure.wp-block-image:not(#einzelbild) {
  flex: 0 0 auto; width: clamp(272px, 42vw, 560px); aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden;
  background: var(--flaeche); margin: 0; }
.wp-block-gallery.has-nested-images.spur figure.wp-block-image:not(#einzelbild) img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.stimme { width: clamp(280px, 34vw, 420px); background: var(--flaeche); border-radius: 22px; padding: 28px;
  display: flex; flex-direction: column; }
.stimme .sterne { color: #ff9f0a; letter-spacing: .12em; font-size: .9375rem; margin: 0; }
.stimme .zitat { margin: 14px 0 18px; font-size: 1.0625rem; line-height: 1.5; flex: 1; }
.stimme .wer { font-size: .875rem; color: var(--text2); margin: 0; }
.pfeile { display: flex; justify-content: flex-end; gap: 12px; margin: 18px auto 0; max-width: 1068px;
  padding: 0 max(22px, env(safe-area-inset-right)); }
.pfeil { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--flaeche);
  color: var(--text); cursor: pointer; display: grid; place-items: center;
  transition: background-color .2s ease, transform .12s ease-out, opacity .2s ease;
  -webkit-tap-highlight-color: transparent; }
.pfeil svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; }
.pfeil:hover { background: var(--flaeche-tief); }
.pfeil:active { transform: scale(.92); }
.pfeil:disabled { opacity: .35; cursor: default; transform: none; }

/* Bilder einzeln */
.bildrahmen { border-radius: 28px; overflow: hidden; }
.bildrahmen img { width: 100%; }
.bildrahmen.hoch img { aspect-ratio: 16 / 9; object-fit: cover; }

/* Haeufige Fragen zum Aufklappen (WordPress-Block "Details"). Die Hoehe faehrt weich auf,
   wo der Browser das kann. Der Pfeil dreht sich in Richtung des Inhalts. */
.fragenliste { border-top: 1px solid var(--linie); max-width: 820px; }
.wp-block-details { border-bottom: 1px solid var(--linie); interpolate-size: allow-keywords; }
.wp-block-details summary { position: relative; display: block; padding: 20px 40px 20px 0; cursor: pointer;
  list-style: none; font: 700 1.1875rem/1.3 var(--titelschrift); letter-spacing: -.015em;
  -webkit-tap-highlight-color: transparent; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px;
  margin-top: -7px; border-right: 2px solid var(--text2); border-bottom: 2px solid var(--text2);
  transform: rotate(45deg); transition: transform .4s cubic-bezier(.32, .72, 0, 1), margin-top .4s; }
.wp-block-details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.wp-block-details summary:active { opacity: .6; }
.wp-block-details > p { margin: 0; padding: 0 40px 22px 0; color: var(--text2); font-size: 1.0625rem; line-height: 1.55; }
.wp-block-details::details-content { block-size: 0; overflow: hidden;
  transition: block-size .45s cubic-bezier(.32, .72, 0, 1), content-visibility .45s allow-discrete; }
.wp-block-details[open]::details-content { block-size: auto; }

/* Weiter bei uns */
.b-wege h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 18px; }
.wegeraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); column-gap: 32px; }
.weglink { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px;
  padding: 16px 0; border-top: 1px solid var(--linie); color: var(--text); text-decoration: none;
  -webkit-tap-highlight-color: transparent; }
.weglink b { font-weight: 600; font-size: 1.0625rem; }
.weglink span:not(.pfeilchen) { grid-column: 1; color: var(--text2); font-size: .9375rem; }
.weglink .pfeilchen { grid-column: 2; grid-row: 1 / span 2; color: var(--akzent); font-size: 1.5rem;
  transition: transform .3s cubic-bezier(.32, .72, 0, 1); }
.weglink:hover { text-decoration: none; }
.weglink:hover b { color: var(--akzent); }
@media (hover: hover) { .weglink:hover .pfeilchen { transform: translateX(3px); } }
.weglink:active { opacity: .6; }

/* Kontaktformular (Contact Form 7, Felder unveraendert) */
.wpcf7 { margin-top: 8px; }
.wpcf7 .screen-reader-response { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); }
.wpcf7 .hidden-fields-container { display: none; border: 0; padding: 0; margin: 0; }
.wpcf7 p { margin: 0; }
.wpcf7 .col-container { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wpcf7 .col-1-1 { grid-column: 1 / -1; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea {
  width: 100%; font: 400 1.0625rem/1.4 var(--schrift); color: var(--text); background: var(--grund);
  border: 1px solid var(--linie); border-radius: 12px; padding: 12px 14px;
  transition: border-color .2s ease, box-shadow .2s ease; }
.wpcf7 input:focus, .wpcf7 textarea:focus { outline: none; border-color: var(--akzent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--akzent) 22%, transparent); }
.wpcf7 ::placeholder { color: var(--text2); }
.wpcf7-submit { margin-top: 4px; }
.wpcf7-response-output { margin: 16px 0 0 !important; border-radius: 12px; padding: 12px 16px !important; }
@media (max-width: 599px) { .wpcf7 .col-container { grid-template-columns: 1fr; } }

/* Social */
.socials { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.socials .wp-social-link { margin: 0; padding: 0; background: var(--flaeche-tief) !important;
  color: var(--text) !important; border-radius: 50%; transition: background-color .2s ease, transform .12s ease-out; }
.socials .wp-social-link a { display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  color: inherit !important; }
.socials .wp-social-link svg { width: 20px; height: 20px; fill: currentColor; }
.socials .wp-social-link:hover { background: var(--knopf) !important; color: #fff !important; }
.socials .wp-social-link:active { transform: scale(.92); }
.socialzeile { display: flex; align-items: center; gap: 16px; }

/* Rechtstexte: lesbar setzen, ohne am Wortlaut etwas zu aendern */
.recht { max-width: 72ch; line-height: 1.65; overflow-wrap: anywhere; }
.recht p { margin: 0 0 1em; }
.recht h2, .recht h3, .recht h4 { font-family: var(--schrift); letter-spacing: -.015em; margin: 36px 0 10px; }
.recht h2 { font-size: 1.5rem; font-weight: 700; }
.recht h3 { font-size: 1.1875rem; }
.recht h4 { font-size: 1.0625rem; }
.recht ul, .recht ol { padding-left: 1.25em; margin: 0 0 1em; }
.recht li { margin-bottom: 6px; }
.recht table { width: 100%; border-collapse: collapse; margin: 12px 0 24px; font-size: .9375rem; }
.recht td, .recht th { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--linie);
  vertical-align: top; }
.recht details { border-top: 1px solid var(--linie); padding: 12px 0; }
.recht summary { cursor: pointer; font-weight: 600; }

/* Suchergebnisse und Listen */
.trefferliste .wp-block-post-template { list-style: none; margin: 0; padding: 0; }
.trefferliste .wp-block-post-template > li { padding: 24px 0; border-top: 1px solid var(--linie); }
.trefferliste .wp-block-post-title { font-size: 1.5rem; }
.trefferliste .wp-block-post-title a { color: var(--text); }
.trefferliste .wp-block-post-excerpt { color: var(--text2); margin-top: 8px; }

/* Fehlerseite */
.b-fehler { padding: clamp(80px, 14vw, 160px) 0; text-align: center; }
.b-fehler .wp-block-buttons { justify-content: center; }

/* ───── 8 Fuss ───── */
.fussbereich { margin: 0; }
.fuss { background: var(--flaeche); color: var(--text2); font-size: .875rem; line-height: 1.55;
  padding: 56px 0 calc(28px + env(safe-area-inset-bottom)); }
.fuss h3 { font: 600 .875rem/1.3 var(--schrift); color: var(--text); letter-spacing: -.005em; margin: 0 0 12px; }
.fuss .fussteil > * + h3 { margin-top: 24px; }
.fuss p { margin: 0 0 12px; }
.fussraster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss a { color: var(--text2); }
.fuss a:hover { color: var(--text); }
.fuss .wp-block-button__link { color: #fff; }
.fuss .wp-block-buttons { margin: 0; }
.fuss .zeiten td { padding: 5px 0; font-size: .875rem; border-top: 0; border-bottom: 1px solid var(--linie);
  color: var(--text2); }
.fuss .zeiten td:last-child { color: var(--text); font-weight: 500; }
.fussliste li { padding: 5px 0; }
.fussunten { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 32px;
  margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--linie); font-size: .8125rem; }
.fussunten p { margin: 0; }
.rechtliches { display: flex !important; flex-wrap: wrap; gap: 6px 22px; }
@media (max-width: 899px) { .fussraster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 559px) { .fussraster { grid-template-columns: 1fr; gap: 28px; } }

/* ───── 9 Bewegung ───── */
/* Weicher Uebergang zwischen den Seiten: Die Leiste bleibt stehen, der Inhalt blendet
   kurz ueber. Browser ohne diese Faehigkeit wechseln einfach wie gewohnt. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .leiste { view-transition-name: leiste; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s;
    animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
}
/* Bloecke blenden beim Hereinscrollen kurz ein: ein kurzer Weg, weich auslaufend.
   Nur mit Skript (sonst ist alles sofort sichtbar) und nie bei reduzierter Bewegung. */
@media (prefers-reduced-motion: no-preference) {
  .js .einblenden { opacity: 0; transform: translateY(18px);
    transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .9s cubic-bezier(.2, .8, .2, 1); }
  .js .einblenden.sichtbar { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important;
    scroll-behavior: auto !important; }
  .blatt { transition: opacity .2s ease !important; transform: none !important; }
}

/* ───── 10 Barrierefreiheit ───── */
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; border-radius: 6px; }
.knopf:focus-visible, .wp-block-button__link:focus-visible { outline-offset: 4px; }
.sprung { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--knopf); color: #fff;
  padding: 10px 16px; border-radius: 10px; font-weight: 600; }
.sprung:focus { top: 12px; text-decoration: none; }
@media (prefers-reduced-transparency: reduce) {
  :root { --leiste: var(--grund); --blatt: var(--grund); }
  .glas > .wp-block-button__link { background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --text2: var(--text); --linie: currentColor; }
  .karte, .tafel, .kachel, .stimme { box-shadow: inset 0 0 0 1px var(--text); }
}