/* ==========================================================================
   pottery art café — main.css
   Statischer Neubau, Design 1:1 nach The7-Child-Theme.
   Alle Gestaltungswerte als CSS-Variablen in :root.
   ========================================================================== */

/* ---- Fonts (lokal) ------------------------------------------------------ */
@font-face {
  font-family: "Quicksand";
  src: url("../fonts/quicksand-regular.woff2") format("woff2"),
       url("../fonts/quicksand-regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Quicksand";
  src: url("../fonts/quicksand-500.woff2") format("woff2"),
       url("../fonts/quicksand-500.woff") format("woff");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Quicksand";
  src: url("../fonts/quicksand-600.woff2") format("woff2"),
       url("../fonts/quicksand-600.woff") format("woff");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Quicksand";
  src: url("../fonts/quicksand-700.woff2") format("woff2"),
       url("../fonts/quicksand-700.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/roboto-regular.woff2") format("woff2"),
       url("../fonts/roboto-regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/roboto-700.woff2") format("woff2"),
       url("../fonts/roboto-700.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---- Design-Tokens ------------------------------------------------------ */
:root {
  /* Farben */
  --color-accent: #aba0e7;        /* Flieder: Buttons, Links, Akzente   */
  --color-accent-hover: #9489d0;
  --color-pink: #ec0e6a;          /* Menü aktiv/hover, Akzent pink      */
  --color-green: #89b535;         /* Überschriften                      */
  --color-green-btn: #abd460;     /* Shop-Button                        */
  --color-green-btn-hover: #8db447;
  --color-reserve-btn: #ec0e6b;   /* Reservierungs-Button im Menü       */
  --color-reserve-btn-hover: #c60a58;
  --color-text: #696969;
  --color-heading-alt: #222222;   /* h3                                 */
  --color-bg: #ffffff;
  --color-border: #bcbcbc;
  --color-divider: rgba(170, 170, 170, 0.25);
  --color-box-lilac: #eeebfb;
  --color-box-pink: #fde4ef;
  --color-box-green: #ecf6da;

  /* Typografie */
  --font-base: "Quicksand", Helvetica, Arial, Verdana, sans-serif;
  --font-alt: "Roboto", Helvetica, Arial, Verdana, sans-serif;
  --font-size-base: 16px;
  --line-height-base: 26px;
  --h1-size: 52px; --h1-line: 62px;
  --h2-size: 32px; --h2-line: 42px;
  --h3-size: 28px; --h3-line: 34px;
  --h4-size: 20px; --h4-line: 30px;
  --heading-weight: 500;

  /* Layout */
  --header-side-width: 300px;
  --header-pad: 50px;
  --content-max: 1440px;
  --wrap-pad: 50px;
  --page-pad-v: 70px;
  --mobile-header-height: 80px;
  --mobile-wrap-pad: 20px;
  --mobile-page-pad-v: 40px;

  /* Versatz des Inhaltsbereichs (Side-Header); mobil 0 */
  --content-offset: var(--header-side-width);

  /* Radien & Abstände */
  --radius-base: 4px;
  --radius-pill: 18px;
  --gap-row: 50px;
  --gap-col: 30px;
  --btn-height: 36px;
  --btn-pad-x: 26px;
}

/* ---- Reset & Basis ------------------------------------------------------ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font: 400 var(--font-size-base) / var(--line-height-base) var(--font-base);
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; border: 0; }
a { color: var(--color-accent); transition: color .3s; }
a:hover { color: var(--color-pink); }
p, ul, ol { margin-bottom: 10px; }
p:last-child { margin-bottom: 0; }
main ul:not([class]), main ol:not([class]) { padding-left: 20px; }
hr { border: 0; border-top: 1px solid var(--color-divider); margin: 20px 0; }
em { font-style: italic; }
strong { font-weight: 700; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-base);
  font-weight: var(--heading-weight);
  color: var(--color-green);
}
h1 { font-size: var(--h1-size); line-height: var(--h1-line); max-width: 900px; margin-bottom: 10px; }
h1 + p { margin-top: 40px; }   /* Fließtext direkt unter der Hauptüberschrift absetzen */
h2 { font-size: var(--h2-size); line-height: var(--h2-line); margin-bottom: 20px; }
h3 { font-size: var(--h3-size); line-height: var(--h3-line); margin-bottom: 20px; color: var(--color-heading-alt); }
h4 { font-size: var(--h4-size); line-height: var(--h4-line); margin-bottom: 10px; }

/* Stilklassen: semantische Ebene normalisiert, Optik der Original-Ebene erhalten */
.hs-1 { font-size: var(--h1-size); line-height: var(--h1-line); color: var(--color-green); }
.hs-2 { font-size: var(--h2-size); line-height: var(--h2-line); color: var(--color-green); }
.hs-3 { font-size: var(--h3-size); line-height: var(--h3-line); color: var(--color-heading-alt); }
.hs-4 { font-size: var(--h4-size); line-height: var(--h4-line); color: var(--color-heading-alt); }
.hs-5 { font-size: 16px; line-height: 26px; color: var(--color-heading-alt); }
.hs-6 { font-size: 14px; line-height: 24px; color: var(--color-heading-alt); }

/* Vorspann über der h1 („Willkommen im pottery art café!") */
.kicker { font-size: var(--h2-size); line-height: var(--h2-line); font-weight: 400; color: var(--color-text); margin-bottom: 20px; }
.subheading { font-size: 21px; line-height: 31px; }

/* Farbvarianten für Überschriften (statt Inline-Styles) */
.c-accent { color: var(--color-accent); }
.c-pink { color: var(--color-pink); }
.c-green { color: var(--color-green); }
.c-white { color: #ffffff; }
.align-center { text-align: center; }
.align-right { text-align: right; }


.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link:focus {
  position: fixed; top: 10px; left: 10px; z-index: 10000;
  width: auto; height: auto; clip: auto; clip-path: none;
  background: #fff; color: var(--color-pink); padding: 10px 16px;
  border-radius: var(--radius-base); box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

/* ---- Buttons ------------------------------------------------------------ */
.btn, .btn-green {
  display: inline-block;
  height: var(--btn-height);
  margin-top: 35px;
  padding: 0 var(--btn-pad-x);
  font-size: 16px;
  line-height: var(--btn-height);
  border-radius: var(--radius-pill);
  color: #ffffff;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 1px;
  transition: all .3s;
  background-color: var(--color-accent);
}
.btn:hover { color: #ffffff; background-color: var(--color-accent-hover); }
.btn-green { background-color: var(--color-green-btn); }
.btn-green:hover { color: #ffffff; background-color: var(--color-green-btn-hover); }

/* ---- Seitengerüst ------------------------------------------------------- */
.site { position: relative; overflow: clip; }

/* Aquarell-Dekorationen (bg.jpg) */
.site::after {
  content: ""; position: absolute; top: 0; left: -100%; right: 0; display: block;
  background-image: url(../img/bg.webp); background-repeat: no-repeat;
  background-position: center bottom; z-index: -1;
}
main { position: relative; }
/* Aquarell-Wash in der Seitenmitte — nur auf Seiten ohne Voll­breiten-Band
   (Original: Child-Theme-JS setzt "no-bg", sobald ein Band existiert) */
body.no-bg main::after { content: none; }
main::after {
  content: ""; position: absolute; top: 50%; left: -100%; right: 0; display: block;
  height: 75%; background-image: url(../img/bg.webp); background-repeat: no-repeat;
  background-size: auto 100%; background-position: center center;
  z-index: -1; opacity: 0.5; transform: translateY(-50%);
}
@media screen and (min-width: 1025px) {
  .site::after { height: 235px; margin-right: -100px; background-size: auto 1000px; }
}
@media screen and (max-width: 1024px) and (min-width: 769px) {
  .site::after { height: 110px; margin-right: -50px; background-size: auto 750px; }
}
@media screen and (max-width: 768px) {
  .site::after { height: 90px; margin-right: -25px; background-size: auto 500px; }
}

.wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--wrap-pad); }

/* ---- Header (Desktop: Side-Header links) -------------------------------- */
.site-header {
  position: fixed; top: 0; left: 0; z-index: 101;
  display: flex; flex-flow: column nowrap;
  width: var(--header-side-width); height: 100%;
  padding: var(--header-pad) 0 var(--header-pad) var(--header-pad);
  background: #ffffff;
  overflow-y: auto;
}
.branding { margin-bottom: 50px; }
.branding img { display: block; width: 210px; height: 110px; }

.main-nav { flex: 10 1 auto; }
.main-nav ul { list-style: none; }
.main-nav > ul > li { margin: 12px 0; }
.main-nav a {
  display: inline-flex; align-items: flex-start;
  font-size: 16px; line-height: 20px; font-weight: 500;
  text-transform: uppercase; text-decoration: none;
  color: var(--color-text);
}
.main-nav a:hover, .main-nav .current > a { color: var(--color-pink); }
.main-nav .has-sub > a::after {
  content: ""; align-self: center; margin-left: 6px;
  width: 9px; height: 9px; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .55;
}
/* Unterpunkte: im Side-Header nach unten aufklappend.
   max-height liegt dicht an der tatsächlichen Höhe (2 Einträge = 64px) – mit dem
   früheren Wert von 200px lief der Großteil der Transition ins Leere und das
   Aufklappen wirkte sprunghaft. Opacity und ein leichter Versatz nehmen der
   Bewegung zusätzlich die Härte; Schließen läuft etwas kürzer als Öffnen. */
.main-nav li ul {
  max-height: 0; overflow: hidden; margin: 0 0 0 14px;
  opacity: 0; transform: translateY(-4px);
  transition: max-height .22s cubic-bezier(.4, 0, .2, 1),
              margin-bottom .22s cubic-bezier(.4, 0, .2, 1),
              opacity .16s ease,
              transform .22s cubic-bezier(.4, 0, .2, 1);
}
.main-nav li:hover > ul,
.main-nav li:focus-within > ul,
.main-nav li.current > ul {
  max-height: 90px; margin-bottom: 12px;
  opacity: 1; transform: translateY(0);
  transition: max-height .3s cubic-bezier(.22, .61, .36, 1),
              margin-bottom .3s cubic-bezier(.22, .61, .36, 1),
              opacity .26s ease .04s,
              transform .3s cubic-bezier(.22, .61, .36, 1);
}
/* Das Plus dreht beim Aufklappen zum Kreuz */
.main-nav .has-sub > a::after {
  transition: transform .3s cubic-bezier(.22, .61, .36, 1), opacity .2s ease;
}
.main-nav .has-sub:hover > a::after,
.main-nav .has-sub:focus-within > a::after,
.main-nav .has-sub.current > a::after { transform: rotate(135deg); opacity: .8; }
@media (prefers-reduced-motion: reduce) {
  .main-nav li ul,
  .main-nav li:hover > ul,
  .main-nav li:focus-within > ul,
  .main-nav li.current > ul,
  .main-nav .has-sub > a::after { transition: none; }
}
.main-nav li ul a {
  font-size: 15px; text-transform: none; font-weight: 500;
  margin: 6px 0; display: inline-block; line-height: 20px;
}
/* Reservierungs-Button ganz oben im Menü – Maße wie der Shop-Button */
.main-nav .nav-reserve { margin: 0 0 22px; }
.main-nav .nav-reserve a {
  height: var(--btn-height); padding: 0 var(--btn-pad-x);
  line-height: var(--btn-height); border-radius: var(--radius-pill);
  color: #ffffff; letter-spacing: 1px;
  background-color: var(--color-reserve-btn); transition: all .3s;
}
.main-nav .nav-reserve a:hover,
.main-nav .nav-reserve.current > a {
  color: #ffffff; background-color: var(--color-reserve-btn-hover);
}
/* Shop-Button im Menü — vom Menü abgesetzt wie die Sprachflagge (22px) */
.main-nav .nav-shop { margin-top: 22px; }
.main-nav .nav-shop a {
  height: var(--btn-height); padding: 0 var(--btn-pad-x);
  line-height: var(--btn-height); border-radius: var(--radius-pill);
  color: #ffffff; letter-spacing: 1px;
  background-color: var(--color-green-btn); transition: all .3s;
}
.main-nav .nav-shop a:hover { color: #ffffff; background-color: var(--color-green-btn-hover); }

/* Social-Icons */
.social { display: flex; gap: 4px; margin-top: 30px; }
/* Die Kopie im Mobil-Drawer ist nur dort sichtbar */
.social--drawer { display: none; }
.social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 100px;
  border: 2px solid var(--color-pink); color: var(--color-pink);
  transition: all .3s;
}
.social a:hover { background: var(--color-pink); color: #ffffff; }
.social svg { width: 14px; height: 14px; fill: currentColor; display: block; }

/* Menü-Schalter + Mobilmenü: auf Desktop verborgen */
.menu-toggle { display: none; }
.mobile-nav { display: none; }

/* ---- Content-Bereich ---------------------------------------------------- */
.layout {
  margin-left: var(--header-side-width);
  display: flex; flex-direction: column; min-height: 100vh;
}
.layout main { flex: 1 0 auto; }
main { padding: var(--page-pad-v) 0; }

/* Abstände der Inhaltsabschnitte (wie Original-Rows) */
@media screen and (min-width: 769px) {
  .section:not(.band):not(:first-child) { padding-top: var(--gap-row); }
  .band { margin-top: var(--gap-row); }
  /* Direkt unter der Hauptüberschrift: 40px bis zum folgenden Inhalt
     (h1 bringt 10px Eigenabstand mit). */
  .section:has(> h1) + .section:not(.band) { padding-top: 30px; }
  .section:has(> h1) + .band { margin-top: 40px; }
  .section > h1 + p { margin-top: 40px; }
}
@media screen and (max-width: 768px) {
  .section:not(.band):not(:first-child) { padding-top: 20px; }
  .band { margin-top: 20px; }
}

/* Zweispaltige Inhalts-Reihen */
.row { display: flex; flex-wrap: wrap; gap: 0 var(--gap-col); align-items: flex-start; }
.row > * { min-width: 0; }
.row.middle { align-items: center; }
/* Aufeinanderfolgende Raster-Reihen (z. B. Preisübersicht) vertikal trennen */
.row + .row { margin-top: 45px; }
.col-half { width: calc(50% - var(--gap-col) / 2); }
.col-third { width: calc(33.3333% - var(--gap-col) * 2 / 3); }
.col-two-thirds { width: calc(66.6667% - var(--gap-col) / 3); }
.img-center { display: block; margin-left: auto; margin-right: auto; }
.img-right { display: block; margin-left: auto; }

/* Deko-Motive (Blätter, Tasse) */
@media screen and (min-width: 769px) {
  .motiv-1 { margin-top: -150px; }
  .motiv-2 { margin-top: -100px; }
  .motiv-3 { margin-bottom: -150px !important; }
  /* Die Band-Fotos sind absolut positioniert und würden die Aquarell-Motive
     sonst teilweise verdecken — Motive darüber legen. */
  .motiv-1, .motiv-2, .motiv-3,
  p:has(> .motiv-1), p:has(> .motiv-2), p:has(> .motiv-3) {
    position: relative; z-index: 3;
  }
}

/* ---- Band: volle Breite, Bild + überlappende weiße Karte ----------------- */
/* Band: bricht aus dem zentrierten Wrap aus und füllt den Inhaltsbereich
   in voller Breite (100vw minus Side-Header); Inhalt bleibt im Wrap-Maß.
   Bewusst ohne transform — sonst entstünde ein Stacking-Context und die
   Aquarell-Deko (z-index: -1) läge über dem Text benachbarter Abschnitte. */
.band {
  position: relative;
  width: calc(100vw - var(--content-offset));
  margin-left: calc((100% - (100vw - var(--content-offset))) / 2);
}
.band::after {
  content: ""; position: absolute; left: 0; right: 0; display: block;
  background-image: url(../img/bg.webp); background-repeat: no-repeat;
  background-size: auto 100%; background-position: center center; z-index: -1;
}
.band__media {
  background-size: cover; background-position: center center; background-repeat: no-repeat;
}
.band__card { background: #ffffff; z-index: 1; }

@media screen and (min-width: 769px) {
  .band { min-height: 720px; }
  .band::after { top: -25%; bottom: -15%; }
  .band__media { position: absolute; top: 0; bottom: 0; width: 66.6667%; }
  .band--media-left .band__media { left: 0; }
  .band--media-right .band__media { right: 0; }
  .band__card {
    position: absolute; top: 50%; transform: translateY(-50%);
  }
  .band--media-left .band__card { left: 53.2%; right: 0; padding: 4.5% var(--wrap-pad) 4.5% 4.5%; }
  .band--media-right .band__card { left: 0; right: 53.2%; padding: 4.5% 4.5% 4.5% var(--wrap-pad); }
  .band--media-right .band__card > .band__card-inner { float: right; }
  .band__card-inner { max-width: 655px; }
}
@media screen and (max-width: 768px) {
  .band { padding-top: 250px; }
  .band::after { top: 0; bottom: 0; }
  .band__media { position: absolute; top: 0; left: 0; right: 0; height: 250px; }
  .band__card {
    position: relative; z-index: 1;
    margin-top: -40px; padding: 20px;
    margin-left: var(--mobile-wrap-pad); margin-right: var(--mobile-wrap-pad);
  }
  .band__card p { font-size: 17px; line-height: 27px; }
}

/* ---- Teaser-Karten (strukturgleiche Geschwister) ------------------------- */
.cards { list-style: none; display: flex; flex-wrap: wrap; gap: var(--gap-col); }
.card { width: calc(33.3333% - var(--gap-col) * 2 / 3); }
.card img { display: block; width: 100%; height: auto; }
.card h3 { margin: 20px 0; }
.card .btn { margin-top: 20px; }

/* Bilderleisten (z. B. 5 Thumbnails nebeneinander) */
.thumbs { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.thumbs li { flex: 1 1 150px; }
.thumbs img { display: block; width: 100%; height: auto; }

/* ---- Farbige Info-Boxen -------------------------------------------------- */
.boxes { list-style: none; display: flex; flex-wrap: wrap; flex-direction: row; align-items: stretch; }
.box { min-height: 270px; padding: 40px; }
.boxes > :nth-child(3n+1) { background-color: var(--color-box-lilac); }
.boxes > :nth-child(3n+2) { background-color: var(--color-box-pink); }
.boxes > :nth-child(3n+3) { background-color: var(--color-box-green); }
@media screen and (min-width: 1121px) {
  .boxes { margin-left: calc(-1 * var(--gap-col)); }
  .boxes > * { width: calc(33.3333% - var(--gap-col)); margin-left: var(--gap-col); }
}
@media screen and (max-width: 1120px) and (min-width: 769px) {
  .boxes { margin-left: calc(-1 * var(--gap-col)); }
  .boxes > * { width: calc(50% - var(--gap-col)); margin-left: var(--gap-col); }
  .boxes > :last-child { margin-top: var(--gap-col); }
}
@media screen and (max-width: 768px) {
  .box { min-height: auto; padding: 20px; }
  .boxes > * { width: 100%; }
  .boxes > :not(:last-child) { margin-bottom: var(--gap-col); }
}

/* ---- Merklisten mit pinkem Punkt ---------------------------------------- */
.check { margin: 0 0 12px; padding: 0; list-style-type: none; }
.check::after { content: ""; display: block; clear: both; }
.check li {
  position: relative; display: inline-block; float: left;
  padding: 0 10px 5px 20px; vertical-align: top;
}
.check li::after {
  content: ""; position: absolute; top: 12px; left: 0;
  width: 6px; height: 6px; border-radius: 3px;
  background-color: var(--color-pink);
}
/* einspaltig: jeder Punkt in eigener Zeile (kurze Einträge sonst nebeneinander) */
.check.cols-1 > li { float: none; display: block; width: 100%; }
@media screen and (min-width: 1025px) {
  .check.cols-3 > li { width: calc(33.3333% - 4px); }
  .check.cols-2 > li { width: calc(50% - 4px); }
}
@media screen and (max-width: 1024px) and (min-width: 769px) {
  .check.cols-3 > li { width: calc(50% - 4px); }
  .check.cols-2 > li { width: 100%; }
}
@media screen and (max-width: 768px) {
  .check.cols-3 > li, .check.cols-2 > li { width: 100%; }
}

/* ---- Preise -------------------------------------------------------------- */
.price-grid { list-style: none; display: flex; flex-wrap: wrap; gap: var(--gap-col); }
.price-box { width: calc(33.3333% - var(--gap-col) * 2 / 3); }
.price-box img { display: block; margin-top: 6px; margin-bottom: 6px; }

/* ---- Galerie (Kategorien per :target, Raster als ul/li) ------------------ */
.gallery-tabs { list-style: none; margin-bottom: 30px; }
.gallery-tabs li { display: inline-block; }
.gallery-tab {
  display: inline-block; margin-right: 24px; color: var(--color-text);
  font-size: 19px; line-height: 30px;
  text-decoration: none; border-bottom: 1px solid transparent; transition: all .3s;
}
.gallery-tab:hover { color: var(--color-text); border-bottom-color: var(--color-pink); }
.gallery-group { scroll-margin-top: 20px; }
/* Masonry-Raster mit natürlichen Bildproportionen (wie The7-Galerie) */
.gallery-grid { list-style: none; columns: 3; column-gap: 18px; }
.gallery-grid li { break-inside: avoid; margin-bottom: 18px; }
.gallery-grid a { display: block; position: relative; }
.gallery-grid a::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(171, 160, 231, 0.6); opacity: 0; transition: opacity .3s;
}
.gallery-grid a:hover::after { opacity: 1; }
.gallery-grid img { display: block; width: 100%; height: auto; }
/* Standard: erste Gruppe sichtbar; per :target umschalten */
.gallery-group { display: none; }
.gallery-group:target { display: block; }
.gallery:not(:has(.gallery-group:target)) .gallery-group:first-of-type { display: block; }
.gallery:has(.gallery-group:target) .gallery-group:not(:target) { display: none; }
.gallery:has(.gallery-group:target) .gallery-group:target { display: block; }
/* Aktiver Tab (pink unterstrichen) — ohne JS über :target bzw. Standardzustand */
.gallery:not(:has(.gallery-group:target)) .gallery-tabs li:first-child .gallery-tab,
.gallery:has(#gal-1:target) .gallery-tab[href="#gal-1"],
.gallery:has(#gal-2:target) .gallery-tab[href="#gal-2"],
.gallery:has(#gal-3:target) .gallery-tab[href="#gal-3"],
.gallery:has(#gal-4:target) .gallery-tab[href="#gal-4"],
.gallery:has(#gal-5:target) .gallery-tab[href="#gal-5"],
.gallery:has(#gal-6:target) .gallery-tab[href="#gal-6"] {
  color: var(--color-pink);
  border-bottom-color: var(--color-pink);
}
/* Pressespiegel: feineres Raster (Desktop 6, Tablet 4 Spalten) */
.gallery-grid--six { columns: 6; column-gap: 14px; }
.gallery-grid--six li { margin-bottom: 14px; }
@media screen and (max-width: 1024px) and (min-width: 769px) {
  .gallery-grid--six { columns: 4; }
}
@media screen and (max-width: 768px) {
  .gallery-grid { columns: 2; column-gap: 10px; }
  .gallery-grid li { margin-bottom: 10px; }
  .gallery-grid--six { columns: 2; column-gap: 10px; }
  .gallery-grid--six li { margin-bottom: 10px; }
}

/* ---- Lightbox (CSS-:target, ohne JS) ------------------------------------- */
.lb-thumb { cursor: zoom-in; }
.lightbox {
  display: none; position: fixed; inset: 0; z-index: 10000;
  background: rgba(24, 18, 34, 0.92);
}
.lightbox:target { display: flex; align-items: center; justify-content: center; }
.lightbox figure { margin: 0; position: relative; z-index: 1; pointer-events: none; }
.lightbox img {
  display: block; width: auto; height: auto;
  max-width: min(92vw, 1200px); max-height: 88vh;
  box-shadow: 0 10px 60px rgba(0, 0, 0, 0.5);
}
/* Schließen: gesamte Fläche klickbar, sichtbares X oben rechts */
.lightbox__close, .lightbox__close:hover { position: absolute; inset: 0; color: #ffffff; }
.lightbox__close svg {
  position: absolute; top: 22px; right: 26px;
  width: 22px; height: 22px; opacity: .85; transition: opacity .2s;
}
.lightbox__close:hover svg { opacity: 1; }
.lightbox__prev, .lightbox__next {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 100px;
  color: #ffffff; background: rgba(255, 255, 255, 0.12);
  transition: background .2s;
}
.lightbox__prev:hover, .lightbox__next:hover { color: #ffffff; background: rgba(255, 255, 255, 0.28); }
.lightbox__prev, .lightbox__next { color: #ffffff; }
.lightbox__prev { left: 22px; }
.lightbox__next { right: 22px; }
.lightbox__prev svg, .lightbox__next svg { width: 22px; height: 22px; }
@media screen and (max-width: 768px) {
  .lightbox img { max-width: 96vw; max-height: 82vh; }
  .lightbox__prev { left: 8px; }
  .lightbox__next { right: 8px; }
  .lightbox__prev, .lightbox__next { width: 40px; height: 40px; }
}

/* ---- Akkordeon (Q&A) ----------------------------------------------------- */
.accordion { margin-top: 20px; }
.accordion details {
  /* transparent (75 % Weiß), der Aquarell-Hintergrund scheint weichgezeichnet durch */
  background: rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-base); margin-bottom: 10px;
}
.accordion summary {
  cursor: pointer; padding: 14px 40px 14px 20px; position: relative;
  list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary h2, .accordion summary h3 {
  display: inline; font-size: var(--h4-size); line-height: var(--h4-line);
  color: var(--color-heading-alt); margin: 0;
}
.accordion summary::after {
  content: ""; position: absolute; right: 16px; top: 50%;
  width: 12px; height: 12px; transform: translateY(-50%);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .2s;
}
.accordion details[open] summary::after { transform: translateY(-50%) rotate(180deg); }
.accordion .panel { padding: 0 20px 16px; }

/* ---- Wegweiser-Karten (404) --------------------------------------------- */
.linkcards { list-style: none; display: flex; flex-wrap: wrap; gap: var(--gap-col); }
.linkcard {
  width: calc(33.3333% - var(--gap-col) * 2 / 3);
  padding: 20px; border: 1px solid var(--color-divider);
  border-radius: var(--radius-base);
  background: rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.linkcard h3 { font-size: var(--h4-size); line-height: var(--h4-line); margin-bottom: 6px; }
.linkcard h3 a { color: var(--color-green); text-decoration: none; }
.linkcard h3 a:hover { color: var(--color-pink); }
.linkcard p { margin-bottom: 0; font-size: 15px; }
@media screen and (max-width: 1024px) and (min-width: 769px) {
  .linkcard { width: calc(50% - var(--gap-col) / 2); }
}
@media screen and (max-width: 768px) {
  .linkcard { width: 100%; }
}

/* ---- Einblend-Animationen ------------------------------------------------
   Wie auf der Original-Seite: Ein Block wird einmalig animiert, sobald er in
   den Sichtbereich kommt. Ausgelöst von js/anim.js, das dafür die Klasse
   "anim-js" am <html>-Element setzt und "is-in" am jeweiligen Block.
   Die Bewegungskurven entsprechen bounceIn* aus animate.css (Anflug aus der
   Richtung, kurzes Über- und Zurückschwingen).
   Ohne das Skript (oder bei "Bewegung reduzieren") greift keine dieser
   Regeln — dann ist alles ganz normal sichtbar. */
.anim-js .anim { opacity: 0; }
.anim-js .anim.is-in {
  animation-duration: .75s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(.215, .61, .355, 1);
}
.anim-js .anim-fade.is-in  { animation-name: anim-fade; }
.anim-js .anim-right.is-in { animation-name: anim-right; }
.anim-js .anim-left.is-in  { animation-name: anim-left; }
.anim-js .anim-up.is-in    { animation-name: anim-up; }
.anim-js .anim-down.is-in  { animation-name: anim-down; }

/* Anflugweite; das Bild fliegt sichtbar über eine längere Strecke ein. */
.anim { --anim-shift: 800px; --anim-shift-y: 420px; }

@keyframes anim-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes anim-right {
  from { opacity: 0; transform: translateX(var(--anim-shift)); }
  60%  { opacity: 1; transform: translateX(-26px); }
  75%  {              transform: translateX(12px); }
  90%  {              transform: translateX(-5px); }
  to   { opacity: 1; transform: none; }
}
@keyframes anim-left {
  from { opacity: 0; transform: translateX(calc(-1 * var(--anim-shift))); }
  60%  { opacity: 1; transform: translateX(26px); }
  75%  {              transform: translateX(-12px); }
  90%  {              transform: translateX(5px); }
  to   { opacity: 1; transform: none; }
}
@keyframes anim-up {
  from { opacity: 0; transform: translateY(var(--anim-shift-y)); }
  60%  { opacity: 1; transform: translateY(-20px); }
  75%  {              transform: translateY(10px); }
  90%  {              transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@keyframes anim-down {
  from { opacity: 0; transform: translateY(calc(-1 * var(--anim-shift-y))); }
  60%  { opacity: 1; transform: translateY(20px); }
  75%  {              transform: translateY(-10px); }
  90%  {              transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Video-Raster -------------------------------------------------------- */
.videos { list-style: none; display: flex; flex-wrap: wrap; gap: var(--gap-col); }
.videos li { width: calc(33.3333% - var(--gap-col) * 2 / 3); }
.videos iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.videos .video-title { margin-top: 8px; font-size: 15px; }
@media screen and (max-width: 1024px) and (min-width: 769px) {
  .videos li { width: calc(50% - var(--gap-col) / 2); }
}

/* Eingebettete Videos / Reservierungs-Widgets */
iframe.video { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* ---- Video-Vorschau (Klick zum Abspielen) --------------------------------
   Statt des YouTube-Players steht zunächst nur das Cover mit Abspielknopf.
   Der Player wird erst beim Klick geladen (js/anim.js) — ohne JavaScript
   öffnet der Link das Video bei YouTube. */
.video-cover {
  display: block; position: relative; width: 100%; aspect-ratio: 16 / 9;
  overflow: hidden; border-radius: var(--radius-base); cursor: pointer;
  background: linear-gradient(135deg, var(--color-box-lilac), var(--color-box-pink));
}
.video-cover img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease;
}
.video-cover:hover img, .video-cover:focus-visible img { transform: scale(1.04); }
.video-cover__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 68px; height: 48px; pointer-events: none;
}
.video-cover__play svg { display: block; width: 100%; height: 100%; }
.video-cover__bg { fill: rgba(35, 35, 35, .55); transition: fill .3s; }
.video-cover:hover .video-cover__bg,
.video-cover:focus-visible .video-cover__bg { fill: var(--color-pink); }
iframe.widget-embed {
  display: block; width: 100%;
  border: 1px solid var(--color-divider); border-radius: var(--radius-base);
}
/* Reihe mit Reservierungs-Widgets vom Text darüber absetzen */
.row:has(.widget-embed) { margin-top: var(--gap-row); }

/* ---- Reservierung: Rahmen um jedes Widget ------------------------------- */
/* Ueberschrift, Direktlink und Kontaktdaten stehen AUSSERHALB des Embeds und
   bleiben damit sichtbar, auch wenn das Widget (noch) nicht geladen ist. */
.booking-note { margin-top: var(--gap-row); margin-bottom: 0; font-size: 15px;
  padding: 14px 16px; background: var(--color-box-lilac); border-radius: var(--radius-base); }
.row:has(.booking) { margin-top: 18px; }
.booking-embed { min-height: 400px; }
.booking { display: flex; flex-direction: column; }
.booking-head { margin-bottom: 14px; }
.booking .btn { margin-top: 0; }
.booking-alt { margin-top: 18px; margin-bottom: 0; font-size: 15px; }
.booking-alt + .booking-alt { margin-top: 12px; }

/* ---- Aktuelles: Artikel-Liste ------------------------------------------- */
.articles { list-style: none; }
.article-card { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 50px; }
.article-card .article-media { width: 50%; }
.article-card .article-media img { display: block; width: 100%; height: auto; }
.article-card .article-body { width: 50%; padding: 0 0 0 40px; }
/* Beitragstitel wie im Original: grün, 20/30 */
.article-card h2, .article-card h3 {
  font-size: var(--h4-size); line-height: var(--h4-line); color: var(--color-green);
}
.article-card h2 a, .article-card h3 a { color: inherit; text-decoration: none; }
.article-card h2 a:hover, .article-card h3 a:hover { color: var(--color-pink); }
.article-meta { font-size: 13px; color: var(--color-text); margin-bottom: 10px; }
@media screen and (max-width: 768px) {
  .article-card .article-media, .article-card .article-body { width: 100%; }
  .article-card .article-body { padding: 20px 0 0; }
}

/* ---- Einzelbeitrag ------------------------------------------------------- */
.post-header { margin-bottom: 20px; }
.post-thumbnail img { display: block; width: 100%; height: auto; margin-bottom: 30px; }
.post-content img { height: auto; }
.post-nav { display: flex; justify-content: space-between; gap: 20px; margin-top: 50px; padding-top: 20px; border-top: 1px solid var(--color-divider); }
.post-nav a { text-decoration: none; color: var(--color-text); max-width: 45%; }
.post-nav a:hover { color: var(--color-pink); }

/* ---- Abstandshalter (im Original leere Absätze) --------------------------- */
.spaced { margin-top: 46px; }  /* Rand kollabiert mit dem 10px-Abstand davor -> 36px Zusatz */

/* ---- Kontaktdaten mit Symbolen ------------------------------------------- */
.ci { position: relative; padding-left: 24px; }
.ci::before {
  content: "";
  position: absolute; left: 0; top: 6px;
  width: 15px; height: 15px;
  background: var(--color-pink);
}
.ci-pin::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 00-7 7c0 5.3 7 13 7 13s7-7.7 7-13a7 7 0 00-7-7zm0 9.5A2.5 2.5 0 1112 6.5a2.5 2.5 0 010 5z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 00-7 7c0 5.3 7 13 7 13s7-7.7 7-13a7 7 0 00-7-7zm0 9.5A2.5 2.5 0 1112 6.5a2.5 2.5 0 010 5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ci-phone::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.3 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.3 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ci-mail::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ci-route::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c-4 0-8 .5-8 4v9.5A3.5 3.5 0 007.5 19L6 20.5v.5h12v-.5L16.5 19a3.5 3.5 0 003.5-3.5V6c0-3.5-3.6-4-8-4zM7.5 17A1.5 1.5 0 119 15.5 1.5 1.5 0 017.5 17zm3.5-7H6V6h5zm2 0V6h5v4zm3.5 7a1.5 1.5 0 111.5-1.5 1.5 1.5 0 01-1.5 1.5z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c-4 0-8 .5-8 4v9.5A3.5 3.5 0 007.5 19L6 20.5v.5h12v-.5L16.5 19a3.5 3.5 0 003.5-3.5V6c0-3.5-3.6-4-8-4zM7.5 17A1.5 1.5 0 119 15.5 1.5 1.5 0 017.5 17zm3.5-7H6V6h5zm2 0V6h5v4zm3.5 7a1.5 1.5 0 111.5-1.5 1.5 1.5 0 01-1.5 1.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- Weitere Beiträge (Related Posts) ------------------------------------ */
.related-posts { margin-top: 40px; }
.related-posts h2 { font-size: var(--h3-size); line-height: var(--h3-line); color: var(--color-heading-alt); }
.related-grid { list-style: none; display: flex; flex-wrap: wrap; gap: 20px 30px; }
.related-item { display: flex; gap: 14px; align-items: flex-start; width: calc(50% - 15px); }
.related-media { flex: none; }
.related-media img { display: block; width: 110px; height: 80px; object-fit: cover; }
.related-item h3 { font-size: 16px; line-height: 24px; margin-bottom: 2px; }
.related-item h3 a { color: var(--color-heading-alt); text-decoration: none; }
.related-item h3 a:hover { color: var(--color-pink); }
.related-item .article-meta { margin-bottom: 0; }
@media screen and (max-width: 768px) {
  .related-item { width: 100%; }
}

/* ---- Footer -------------------------------------------------------------- */
.site-footer { position: relative; margin-top: 60px; }
@media screen and (max-width: 768px) {
  .site-footer { margin-top: 40px; }
}
.site-footer::after {
  content: ""; position: absolute; left: 0; right: -100%; bottom: 0; display: block;
  height: 240px; background-image: url(../img/bg.webp); background-repeat: no-repeat;
  background-position: center bottom; z-index: -1; transform: rotate(180deg);
}
@media screen and (min-width: 769px) {
  .site-footer::after { margin-right: -200px; background-size: auto 1000px; }
}
@media screen and (max-width: 768px) {
  .site-footer::after { margin-right: -100px; background-size: auto 500px; }
}
.footer-grid { padding-bottom: 25px; }
.footer-col { display: inline-block; vertical-align: top; width: calc(50% - 4px); padding: 0 12px; margin-bottom: 30px; }
.footer-col > *:not(:first-child) { margin-top: 10px; }
.site-footer a { color: var(--color-text); text-decoration: none; }
.site-footer a:hover { color: var(--color-pink); }
/* Kontaktdaten mit Icons (per CSS-Maske, kein Markup-Umbau):
   Telefon- und E-Mail-Einträge im Footer erhalten ein passendes Symbol */
.footer-col li:has(> a[href^="tel:"])::before,
.footer-col li:has(> a[href^="mailto:"])::before {
  content: "";
  display: inline-block;
  width: 15px; height: 15px;
  margin-right: 6px;
  vertical-align: -2px;
  background: var(--color-pink);
}
.footer-col li:has(> a[href^="tel:"])::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.3 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.3 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.footer-col li:has(> a[href^="mailto:"])::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.multicol { width: 100%; margin: 0; padding: 0; list-style-type: none; }
@media screen and (min-width: 769px) {
  .multicol li { display: inline-block; }
  .multicol > li:not(:last-child) {
    margin-right: 10px; padding-right: 10px;
    border-right: 1px solid var(--color-border);
  }
  /* Kontaktspalte (rechts): Telefon und E-Mail ohne Trennstrich */
  .footer-col + .footer-col .multicol > li:not(:last-child) {
    border-right: 0;
  }
}
@media screen and (max-width: 768px) {
  .multicol li { display: block; }
  .footer-col { width: 100%; padding: 0; }
}

/* ---- Sprachumschalter (Flagge, Text nur für Screenreader) ---------------- */
.lang-switch { margin: 0 0 22px; }
.lang-switch a {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--color-text); text-decoration: none;
  transition: transform .3s, color .3s;
}
.lang-switch a:hover, .lang-switch a:focus-visible { transform: translateY(-2px); }
.lang-switch a:hover, .lang-switch a:focus-visible { color: var(--color-pink); }
/* Der Kreis sitzt jetzt am Wrapper, damit das Kürzel daneben stehen kann */
.lang-flag {
  display: block; width: 26px; height: 26px; flex: none;
  border-radius: 100px; overflow: hidden;
}
/* Sprachkürzel der Zielsprache – für Screenreader ausgeblendet, weil der
   screen-reader-text daneben die volle Sprachbezeichnung nennt */
.lang-code {
  font-size: 14px; line-height: 1; font-weight: 500;
  letter-spacing: 1px; text-transform: uppercase;
}
/* Flagge formatfüllend im Kreis (Zuschnitt über preserveAspectRatio="slice") */
.lang-switch svg { display: block; width: 100%; height: 100%; }
/* Abstand zum Logo, enger an die Navigation */
.branding:has(+ .lang-switch) { margin-bottom: 34px; }

/* ==========================================================================
   Responsive: Mobile Header & einspaltiges Layout
   ========================================================================== */
@media screen and (max-width: 1024px) {
  :root {
    --content-offset: 0px;
    --h1-size: 42px; --h1-line: 52px;
    --h2-size: 27px; --h2-line: 37px;
    --h3-size: 24px; --h3-line: 30px;
  }
  body { font-size: 15px; line-height: 25px; }
  h2 { margin-bottom: 15px; }
  h3 { margin-bottom: 15px; }
  .kicker { font-size: var(--h2-size); line-height: var(--h2-line); margin-bottom: 15px; }

  /* Header wird zur Top-Bar */
  .site-header {
    position: relative; width: 100%; height: var(--mobile-header-height);
    flex-flow: row nowrap; align-items: center;
    padding: 0 var(--mobile-wrap-pad);
    background: transparent;
    overflow: visible;
  }
  /* Logo links, Sprachwahl + Social rechts direkt am Menü-Schalter */
  .branding { margin: 0 auto 0 0; flex: none; }
  .branding img { width: 92px; height: auto; }
  .site-header .main-nav { display: none; }
  /* Social-Icons wandern in den Drawer – die Kopfzeile wird dadurch spürbar
     entlastet (vorher lief sie auf schmalen Geräten über den Rand hinaus). */
  .site-header > .social { display: none; }
  .mobile-nav .social--drawer {
    display: flex; margin-top: 34px; padding-top: 24px;
    border-top: 1px solid var(--color-divider);
  }
  /* Sprachwahl und Menü-Schalter exakt auf die Mittelachse der Kopfzeile.
     Das <p> der Sprachwahl war zwar zentriert, der inline-flex-Link darin saß
     durch die Zeilenbox (Unterlänge) aber rund 3px zu hoch – deshalb wird das
     <p> hier selbst zum Flex-Container. */
  .site-header .lang-switch {
    display: flex; align-items: center; align-self: center;
    margin: 0 12px 0 6px; flex: none;
  }
  .site-header .lang-switch a { gap: 6px; }
  .site-header .lang-code { font-size: 13px; letter-spacing: .5px; }
  .site-header .menu-toggle { align-self: center; }
}
@media screen and (max-width: 1024px) {
  .branding:has(+ .lang-switch) { margin-bottom: 0; }
  .layout { margin-left: 0; }
  main { padding: var(--mobile-page-pad-v) 0; }
  .wrap { padding: 0 var(--mobile-wrap-pad); }

  /* Menü-Schalter (Pill mit Punkten) */
  .menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    height: var(--btn-height); padding: 8px 16px;
    border: 0; border-radius: var(--radius-pill);
    background: var(--color-accent); color: #ffffff;
    font: 400 16px/20px var(--font-base); text-transform: uppercase;
    letter-spacing: 1px; cursor: pointer; transition: background .3s;
    text-decoration: none;
  }
  .menu-toggle:hover, .menu-toggle:focus { background: var(--color-accent-hover); color: #ffffff; }
  .menu-toggle svg { width: 18px; height: 18px; margin-right: 10px; fill: currentColor; }

  /* Mobilmenü: Drawer von rechts wie im Original,
     geöffnet über aria-expanded (Runtime) bzw. :target (ohne JS) */
  .mobile-nav {
    display: block; position: fixed; top: 0; right: 0; z-index: 9602;
    width: 300px; max-width: 100%; height: 100%;
    padding: 50px 15px 50px 30px;
    background: #ffffff; overflow-y: auto;
    transform: translateX(100%); visibility: hidden;
    transition: transform .5s ease, visibility .5s;
  }
  .menu-toggle[aria-expanded="true"] + .mobile-nav,
  .mobile-nav:target { transform: translateX(0); visibility: visible; }
  /* Abdunklung der Seite hinter dem Drawer */
  .site-header:has(.menu-toggle[aria-expanded="true"])::before,
  .site-header:has(.mobile-nav:target)::before {
    content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    z-index: 9601; background: rgba(0, 0, 0, 0.5);
  }
  /* Menüpunkte: identisch zum Desktop-Menü, Unterpunkte dauerhaft aufgeklappt */
  .mobile-nav ul { list-style: none; }
  .mobile-nav > ul > li { margin: 12px 0; }
  .mobile-nav a {
    display: inline-flex; align-items: flex-start;
    font-size: 16px; line-height: 20px; font-weight: 500;
    text-transform: uppercase; text-decoration: none; color: var(--color-text);
  }
  .mobile-nav a:hover, .mobile-nav .current > a { color: var(--color-pink); }
  .mobile-nav .has-sub > a::after {
    content: ""; align-self: center; margin-left: 6px;
    width: 9px; height: 9px; flex: none;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: .55;
  }
  .mobile-nav li ul { margin: 0 0 12px 14px; }
  .mobile-nav li ul a {
    font-size: 15px; text-transform: none; font-weight: 500;
    margin: 6px 0; display: inline-block; line-height: 20px;
  }
  /* Reservierungs-Button ganz oben – Maße wie der Shop-Button */
  .mobile-nav .nav-reserve { margin: 0 0 22px; }
  .mobile-nav .nav-reserve a {
    height: var(--btn-height); padding: 0 var(--btn-pad-x);
    line-height: var(--btn-height); border-radius: var(--radius-pill);
    color: #ffffff; letter-spacing: 1px;
    background-color: var(--color-reserve-btn); transition: all .3s;
  }
  .mobile-nav .nav-reserve a:hover,
  .mobile-nav .nav-reserve.current > a {
    color: #ffffff; background-color: var(--color-reserve-btn-hover);
  }
  .mobile-nav .nav-shop a {
    height: var(--btn-height); padding: 0 var(--btn-pad-x);
    line-height: var(--btn-height); border-radius: var(--radius-pill);
    color: #ffffff; letter-spacing: 1px;
    background-color: var(--color-green-btn); transition: all .3s;
  }
  .mobile-nav .nav-shop a:hover { color: #ffffff; background-color: var(--color-green-btn-hover); }
  .mobile-nav a.mobile-nav-close {
    position: absolute; top: 14px; right: 13px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border: 0; border-radius: var(--radius-pill);
    background: var(--color-accent); color: #ffffff; cursor: pointer;
    text-decoration: none; transition: background .3s;
  }
  .mobile-nav a.mobile-nav-close:hover { background: var(--color-accent-hover); color: #ffffff; }
  .mobile-nav-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; }
}

@media screen and (max-width: 768px) {
  :root {
    --h1-size: 26px; --h1-line: 36px;
    --h2-size: 22px; --h2-line: 32px;
    --h3-size: 20px; --h3-line: 30px;
  }
  body { font-size: 15px; line-height: 25px; }
  h2 { margin-bottom: 10px; }
  h3 { margin-bottom: 10px; }
  .kicker { font-size: var(--h2-size); line-height: var(--h2-line); margin-bottom: 10px; }
  .subheading { font-size: 17px; line-height: 27px; }

  .row { display: block; }
  .col-half, .col-third, .col-two-thirds { width: 100%; }
  .row > * + * { margin-top: 20px; }
  .cards { display: block; }
  .card { width: 100%; }
  .card + .card { margin-top: 40px; }
  .price-grid { display: block; }
  .price-box { width: 100%; }
  .price-box + .price-box { margin-top: 30px; }
  .videos li { width: 100%; }
  .thumbs li { flex-basis: calc(50% - 5px); }
}

/* ---- Druck --------------------------------------------------------------- */
@media print {
  .site-header, .mobile-nav, .menu-toggle { display: none; }
  .layout { margin-left: 0; }
}