/* ==========================================================================
   Schriften — lokal ausgeliefert.
   Kein Aufruf an fonts.googleapis.com oder fonts.gstatic.com: das spart zwei
   Verbindungen im kritischen Pfad und vermeidet die Übertragung der
   IP-Adresse an Google (siehe datenschutz.html).
   Variable Fonts — eine Datei deckt alle verwendeten Schnitte ab.
   Aktualisiert am 18.08.2026.
   ========================================================================== */

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/jost-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: 'Jost';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/jost-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/newsreader-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: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/newsreader-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/newsreader-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/newsreader-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   MAGUBO — Möbel nach Maß
   Implementation of "Magubo Website.dc.html" (Claude Design)
   Tokens, layout and components. No build step, no dependencies.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --paper:        #F7F4EF;
  --paper-warm:   #F1ECE3;
  --surface:      #FFFDFA;

  /* Ink */
  --ink:          #26211C;
  --ink-soft:     #5F564B;
  --ink-mute:     #8D8272;
  --ink-faint:    #95897A;

  /* Accent */
  --brass:        #A9743F;
  --brass-light:  #D8A45F;
  --sand:         #C9B79C;

  /* Lines */
  --line:         #E2DBD1;
  --line-strong:  #D8D0C4;

  /* Dark sections */
  --dark:         #26211C;
  --dark-2:       #2A241E;
  --dark-3:       #332C25;
  --dark-4:       #3A322A;
  --dark-deep:    #1F1B17;
  --dark-line:    #4A4036;
  --dark-line-2:  #3A332B;
  --on-dark:      #F2EBE0;
  --on-dark-soft: #C6BAA9;
  --on-dark-mute: #B9A98F;

  /* WhatsApp */
  --wa:           #25D366;
  --wa-hover:     #1FBA59;
  --on-wa:        #07290F;

  /* Status */
  --ok-bg:        #E3EFE3;
  --ok-fg:        #2C4B2E;
  --draft-bg:     #F0EAD9;
  --draft-fg:     #7A6428;
  --danger:       #B0432F;

  /* Type */
  --sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Rhythm */
  --gutter: 40px;
  --maxw: 1240px;
  --radius: 2px;

  /* Placeholder hatch — replace these blocks with real photography */
  --hatch: repeating-linear-gradient(135deg, #EAE2D6 0 12px, #F1EBE1 12px 24px);
  --hatch-dark: repeating-linear-gradient(135deg, #332C25 0 12px, #3C342B 12px 24px);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* Muss vor allen Komponenten stehen: jedes display: flex/block/grid weiter
   unten würde das hidden-Attribut sonst aushebeln. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

/* Sicherheitsnetz gegen seitliches Verrutschen auf schmalen Bildschirmen.
   `clip` statt `hidden`, weil hidden einen Scroll-Container erzeugt und
   damit position: sticky im Kopfbereich aushebeln würde. Das ersetzt keine
   Ursachensuche — es verhindert nur, dass ein einzelnes zu breites Element
   die ganze Seite verschiebt. */
html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
}

body {
  color: var(--ink);
  font: 400 17px/1.65 var(--sans);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--brass); text-decoration: none; }
a:hover { color: var(--ink); }

img { max-width: 100%; display: block; }

input, select, textarea, button { font-family: var(--sans); }
::placeholder { color: #A79C8D; }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 14px 20px;
  background: var(--ink);
  color: var(--paper);
  font: 500 14px/1 var(--sans);
}
.skip-link:focus { left: 12px; top: 12px; color: var(--paper); }

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

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.wrap--narrow { max-width: 1000px; }

.section { padding-top: 96px; padding-bottom: 96px; }
.section--tight { padding-top: 88px; padding-bottom: 40px; }
.section--flush-bottom { padding-bottom: 40px; }
.section--warm { background: var(--paper-warm); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section--surface { background: var(--surface); border-top: 1px solid var(--line); }
.section--dark { background: var(--dark-2); color: var(--on-dark); }

.eyebrow {
  margin: 0 0 16px;
  font: 400 12px/1 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.eyebrow--on-dark { color: var(--on-dark-mute); }

.display {
  margin: 0;
  font-family: var(--serif);
  font-weight: 200;
  letter-spacing: -.02em;
  line-height: 1.1;
  text-wrap: balance;
}
.display--xl { font-size: clamp(42px, 6.4vw, 76px); line-height: 1.02; }
.display--lg { font-size: clamp(36px, 5.2vw, 62px); line-height: 1.06; }
.display--md { font-size: clamp(30px, 4.2vw, 52px); }
.display--sm { font-size: clamp(27px, 3.4vw, 44px); line-height: 1.12; }
.display--xs { font-size: clamp(25px, 3vw, 38px); line-height: 1.15; }

.lead {
  font-size: 19px;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.prose p {
  margin: 0 0 18px;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 500; color: var(--ink); }

.accent-em {
  font-style: italic;
  font-weight: 300;
  color: var(--brass);
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 30px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: 500 14px/1 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn--sm { padding: 12px 20px; font-size: 13px; letter-spacing: .06em; }
.btn--md { padding: 17px 28px; }

.btn--dark { background: var(--ink); color: var(--paper); }
.btn--dark:hover { background: var(--brass); color: #FFF; }

.btn--light { background: var(--on-dark); color: var(--ink); }
.btn--light:hover { background: var(--brass); color: #FFF; }

.btn--wa { background: var(--wa); color: var(--on-wa); }
.btn--wa:hover { background: var(--wa-hover); color: var(--on-wa); }

.btn--wa-quiet {
  padding: 11px 16px;
  border-color: #CFE8D6;
  background: #EFF9F2;
  color: #1B6B3A;
  font-size: 13px;
  letter-spacing: .06em;
}
.btn--wa-quiet:hover { background: var(--wa); color: var(--on-wa); border-color: var(--wa); }

.btn--ghost {
  border-color: var(--line-strong);
  color: var(--ink);
  background: none;
  padding: 14px 22px;
  font-size: 13px;
}
.btn--ghost:hover { border-color: var(--brass); color: var(--brass); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.arrow-link {
  font: 500 12px/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass);
}

/* --------------------------------------------------------------------------
   5. Image placeholders
   Every .ph is a slot waiting for real photography — see README.
   -------------------------------------------------------------------------- */
.ph {
  background: var(--hatch);
  display: flex;
  align-items: flex-end;
  padding: 16px;
  position: relative;
  overflow: hidden;
}
.ph--center { align-items: center; justify-content: center; text-align: center; }
.ph--dark { background: var(--hatch-dark); border: 1px solid var(--dark-line); }

.ph__cap {
  font: 400 10px/1.5 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--paper);
  padding: 6px 9px;
}
.ph__cap--lg { font-size: 11px; padding: 8px 12px; }
.ph__cap--on-surface { background: var(--surface); }
.ph__cap--on-dark { background: none; color: var(--on-dark-mute); line-height: 1.6; letter-spacing: .1em; }

.ph--fill { position: absolute; inset: 0; }

/* Platzhalter, in dem ein echtes Foto steckt: kein Innenabstand, das Bild
   füllt den Rahmen im vorgegebenen Seitenverhältnis. */
.ph--photo { padding: 0; }
.ph--photo img { width: 100%; height: 100%; object-fit: cover; }

/* Parallax frames: the inner layer is oversized so it can travel without gaps */
.parallax-frame {
  position: relative;
  overflow: hidden;
}
.parallax-frame__layer {
  position: absolute;
  left: 0;
  right: 0;
  background: var(--hatch);
  will-change: transform;
}

/* Echtes Foto im Parallax-Rahmen. Die Höhe ist bewusst größer als der
   Ausschnitt, damit beim Scrollen oben und unten kein Spalt entsteht. */
.parallax-frame__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}
.parallax-frame__cap {
  position: absolute;
  left: 28px;
  bottom: 28px;
}

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 18px var(--gutter);
  background: rgba(247, 244, 239, .92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.site-header__logo { display: flex; align-items: center; }
.site-header__logo img { height: 26px; width: auto; mix-blend-mode: multiply; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font: 400 14px/1 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* Wie beim Footer: .site-nav a ist spezifischer als die Button-Klassen. Ohne
   die Ausnahme bekäme der WhatsApp-Button im Menü beim Überfahren Messingtext
   auf Grün — 2,01:1 und damit unlesbar. */
.site-nav a:not(.btn) { color: var(--ink); }
.site-nav a:not(.btn):hover { color: var(--brass); }
.site-nav a[aria-current="page"] {
  color: var(--brass);
  box-shadow: inset 0 -1px 0 0 currentColor;
}

.site-header__actions { display: flex; align-items: center; gap: 12px; }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  margin: 0 auto;
  transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
}
.hero__body {
  padding: 110px 64px 96px var(--gutter);
  max-width: 720px;
  margin-left: auto;
  width: 100%;
}
.hero__title { margin: 0 0 26px; }
.hero__lead { margin: 0 0 34px; max-width: 520px; }
.hero__ctas { margin-bottom: 38px; }
.hero__media {
  position: relative;
  min-height: 620px;
  border-left: 1px solid var(--line);
}
.hero__media .parallax-frame__layer { top: -100px; bottom: -100px; }
.hero__media .parallax-frame__img { top: -100px; height: calc(100% + 200px); }

.trust {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.trust__stars {
  font: 400 22px/1 var(--serif);
  color: var(--brass);
  letter-spacing: .14em;
}
.trust__text { font-size: 15px; color: var(--ink-soft); }
.trust__text strong { font-weight: 500; color: var(--ink); }

/* --------------------------------------------------------------------------
   8. Review slider
   -------------------------------------------------------------------------- */
.reviews {
  background: var(--dark-2);
  color: var(--on-dark);
  padding: 84px var(--gutter);
}
.reviews__grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 64px;
  align-items: center;
}
/* Ohne Profilkarte darf der Slider die ganze Breite nehmen */
.reviews__grid.is-single { grid-template-columns: 1fr; }
.reviews__stars {
  margin: 0 0 26px;
  font: 400 20px/1 var(--serif);
  color: var(--brass-light);
  letter-spacing: .16em;
}
.reviews__quote {
  margin: 0 0 30px;
  font: 200 clamp(24px, 3vw, 36px)/1.35 var(--serif);
  letter-spacing: -.01em;
  text-wrap: pretty;
  min-height: 150px;
}
.reviews__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.reviews__name { margin: 0; font: 500 16px/1.4 var(--sans); }
.reviews__place { margin: 0; font-size: 14px; color: var(--on-dark-mute); }
.reviews__controls { display: flex; align-items: center; gap: 10px; }

.slider-btn {
  width: 44px;
  height: 44px;
  border: 1px solid #564C3F;
  background: none;
  color: var(--on-dark);
  cursor: pointer;
  border-radius: var(--radius);
  font-size: 16px;
  transition: background-color .2s ease;
}
.slider-btn:hover { background: var(--dark-4); }

/* flex-wrap ist der Rückfall: Selbst wenn irgendwann doch viele Punkte
   gerendert werden, brechen sie um, statt die Seite breiter zu machen. */
.slider-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: 4px;
  min-width: 0;
}

/* Ab vielen Bewertungen: Zählerstand statt Punktereihe */
.slider-dots--count {
  align-items: center;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--on-dark-mute);
  font-variant-numeric: tabular-nums;
}
.slider-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: #5A5044;
  transition: background-color .2s ease;
}
.slider-dot[aria-current="true"] { background: var(--brass-light); }

.reviews__aside {
  border: 1px solid var(--dark-line);
  padding: 30px;
  background: var(--dark-3);
}
.reviews__aside a { color: var(--brass-light); font: 500 13px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.reviews__aside a:hover { color: #FFF; }

/* Profilkarte (Instagram) neben dem Bewertungs-Slider */
.profile-card__handle {
  margin: 0 0 14px;
  font: 200 clamp(26px, 2.4vw, 32px)/1.15 var(--serif);
  letter-spacing: -.01em;
  color: var(--on-dark);
  overflow-wrap: anywhere;
}
.profile-card__text {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--on-dark-soft);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   9. Section headers, service + location cards
   -------------------------------------------------------------------------- */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 52px;
  flex-wrap: wrap;
}
.section-head p.note { margin: 0; max-width: 380px; color: var(--ink-soft); }

.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.service-card {
  display: block;
  color: var(--ink);
  transition: transform .35s ease, color .25s ease;
}
.service-card:hover { color: var(--brass); transform: translateY(-8px); }
.service-card .ph { aspect-ratio: 3/4; margin-bottom: 18px; }
.service-card h3 { margin: 0 0 8px; font: 300 27px/1.2 var(--serif); }
.service-card p { margin: 0; font-size: 15px; color: var(--ink-soft); }

.place-card {
  display: block;
  padding: 30px 26px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  transition: transform .35s ease, border-color .25s ease;
}
.place-card:hover { border-color: var(--brass); transform: translateY(-6px); color: var(--ink); }
.place-card h3 { margin: 0 0 12px; font: 300 26px/1.2 var(--serif); }
.place-card p { margin: 0 0 16px; font-size: 15px; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   10. Process + stats
   -------------------------------------------------------------------------- */
.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-strong);
  margin: 0;
  padding: 0;
  list-style: none;
}
.process__step {
  padding: 32px 28px 36px;
  border-right: 1px solid var(--line-strong);
}
.process__step:first-child { padding-left: 0; }
.process__step:last-child { padding-right: 0; border-right: none; }
.process__num { margin: 0 0 20px; font: 300 40px/1 var(--serif); color: var(--sand); }
.process__step h3 { margin: 0 0 10px; font: 500 17px/1.3 var(--sans); }
.process__step p { margin: 0; font-size: 15px; color: var(--ink-soft); }

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding-top: 80px;
  padding-bottom: 80px;
}
.stats__num { margin: 0 0 8px; font: 200 54px/1 var(--serif); color: var(--brass); }
.stats p:last-child { margin: 0; font-size: 15px; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   11. SEO / editorial split
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 72px;
  padding-top: 100px;
  padding-bottom: 100px;
}
.split--even { grid-template-columns: 1fr 1fr; gap: 64px; }
.split--center { align-items: center; }
.split--flush { padding-top: 0; padding-bottom: 0; }
.split__title { margin: 0 0 26px; }
.split__points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 36px;
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
}
.split__points h3 { margin: 0 0 10px; font: 400 22px/1.25 var(--serif); }
.split__points p { margin: 0; font-size: 15px; color: var(--ink-soft); }
.split__media { position: relative; min-height: 560px; overflow: hidden; }

/* Grafiken mit eingebauter Beschriftung (z. B. die Karte) dürfen nicht
   beschnitten werden — sie stehen ohne Parallax in voller Höhe. */
.split__media--plain {
  min-height: 0;
  align-self: start;
  overflow: visible;
}
.split__media--plain img { width: 100%; height: auto; }
.split__media .parallax-frame__layer { top: -60px; bottom: -60px; }
/* Reserve über den gesamten Klemmbereich der SEO-Kurve (-60 … +70),
   damit an keiner Scrollposition ein Rand frei wird. */
.split__media .parallax-frame__img { top: -80px; height: calc(100% + 160px); }
.split__media .parallax-frame__cap { left: 20px; bottom: 20px; }

/* --------------------------------------------------------------------------
   12. Instagram strip
   -------------------------------------------------------------------------- */
.ig-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.ig-tile {
  display: block;
  aspect-ratio: 1/1;
  background: var(--hatch);
  position: relative;
  transition: opacity .3s ease;
  will-change: transform;
}
.ig-tile:hover { opacity: .75; }
.ig-tile .ph__cap {
  position: absolute;
  left: 10px;
  bottom: 10px;
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: .1em;
  padding: 5px 7px;
}
.ig-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid currentColor;
  border-radius: 6px;
  font: 500 10px/1 var(--sans);
}

/* --------------------------------------------------------------------------
   13. FAQ
   -------------------------------------------------------------------------- */
.faq__item { border-bottom: 1px solid var(--line-strong); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 26px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font: 400 21px/1.4 var(--serif);
  color: var(--ink);
  transition: color .2s ease;
}
.faq__q:hover { color: var(--brass); }
.faq__sign { font: 300 26px/1 var(--sans); color: var(--brass); }
.faq__a {
  margin: 0;
  padding: 0 60px 28px 0;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.faq__a[hidden] { display: none; }

/* --------------------------------------------------------------------------
   14. Contact
   -------------------------------------------------------------------------- */
.contact {
  background: var(--dark);
  color: var(--on-dark);
  padding: 100px var(--gutter);
}
.contact__grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 80px;
}
.contact__intro { margin: 0 0 40px; max-width: 440px; color: var(--on-dark-soft); }

.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.form__field {
  display: block;
  font: 400 12px/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
}
.form__field--wide { grid-column: 1 / -1; }
.form__field input,
.form__field select,
.form__field textarea {
  display: block;
  width: 100%;
  margin-top: 9px;
  padding: 14px;
  background: var(--dark-3);
  border: 1px solid var(--dark-line);
  color: var(--on-dark);
  font-size: 16px;
  border-radius: var(--radius);
  text-transform: none;
  letter-spacing: normal;
}
.form__field textarea { resize: vertical; line-height: 1.6; }
.form__field input[type="date"] { padding: 13px 14px; color-scheme: dark; }
.form__field input:focus,
.form__field select:focus,
.form__field textarea:focus { border-color: var(--brass); outline: none; }

.form__consent {
  display: flex;
  gap: 12px;
  grid-column: 1 / -1;
  align-items: flex-start;
  font-size: 14px;
  color: var(--on-dark-soft);
  line-height: 1.5;
}
.form__consent input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--brass); flex: none; }
.form__consent a { color: var(--brass-light); text-decoration: underline; }

.form__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 6px;
}
.form__error {
  grid-column: 1 / -1;
  margin: 0;
  color: #F0A99A;
  font-size: 15px;
}

.form-success {
  border: 1px solid #4A6B4E;
  background: #2E3A2C;
  padding: 34px;
}
.form-success h3 { margin: 0 0 10px; font: 300 30px/1.2 var(--serif); color: #A8D3AC; }
.form-success p { margin: 0 0 20px; color: var(--on-dark-soft); }
.form-success button {
  padding: 12px 20px;
  background: none;
  border: 1px solid #6B7C67;
  color: #E7E0D4;
  cursor: pointer;
  font: 500 13px/1 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.form-success button:hover { background: #35422F; }

.contact__aside { display: flex; flex-direction: column; gap: 28px; }
.contact__card {
  border: 1px solid var(--dark-line);
  padding: 28px;
  background: var(--dark-3);
}
.contact__card .label {
  margin: 0 0 14px;
  font: 400 11px/1 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
}
.contact__phone { margin: 0 0 6px; font: 300 26px/1.3 var(--serif); }
.contact__phone a { color: inherit; }
.contact__phone a:hover { color: var(--brass-light); }
.contact__card p { color: var(--on-dark-soft); font-size: 15px; }
.contact__card p.hours { margin: 0 0 18px; }
.contact__card p.addr { margin: 0; }
.contact__card a { color: var(--on-dark-soft); }
.contact__card a:hover { color: #FFF; }
.contact__map { flex: 1; min-height: 220px; }

/* Mit echter Karte: eigenes Seitenverhältnis, damit nichts vom Bild
   weggeschnitten wird — die Beschriftungen stecken in der Grafik. */
.contact__map--image {
  flex: none;
  min-height: 0;
  aspect-ratio: 1122 / 1402;
  overflow: hidden;
}
.contact__map--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--dark-deep);
  color: #B9AF9F;
  padding: 72px var(--gutter) 40px;
}
.site-footer__grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--dark-line-2);
}
.site-footer__word { margin: 0 0 16px; font: 300 26px/1 var(--sans); letter-spacing: .02em; color: var(--on-dark); }
.site-footer__blurb { margin: 0 0 20px; max-width: 280px; font-size: 15px; }
.site-footer h2 {
  margin: 0 0 16px;
  font: 500 11px/1 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.site-footer__links { display: grid; gap: 10px; font-size: 15px; }
/* Buttons ausgenommen: .site-footer a ist spezifischer als .btn--wa und würde
   dessen Textfarbe überschreiben. Der WhatsApp-Button stand dadurch mit
   beigem Text auf grünem Grund — ein Kontrast von 1,09:1, praktisch unlesbar. */
.site-footer a:not(.btn) { color: #B9AF9F; }
.site-footer a:not(.btn):hover { color: #FFF; }
.site-footer p { font-size: 15px; }

.social { display: flex; gap: 10px; margin-top: 20px; }
.social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--dark-line-2);
  border-radius: 10px;
  font: 500 11px/1 var(--sans);
  letter-spacing: .04em;
}
.social a:hover { border-color: var(--brass-light); color: #FFF; }

.site-footer__bottom {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-top: 26px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 14px;
}
.site-footer__legal { display: flex; gap: 24px; }

/* --------------------------------------------------------------------------
   16. Floating actions
   -------------------------------------------------------------------------- */
.wa-fab {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 22px 15px 18px;
  background: var(--wa);
  color: var(--on-wa);
  border-radius: 40px;
  box-shadow: 0 10px 30px rgba(7, 41, 15, .28);
  font: 500 14px/1 var(--sans);
  letter-spacing: .04em;
  transition: background-color .25s ease;
}
.wa-fab:hover { background: var(--wa-hover); color: var(--on-wa); }
.wa-fab__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--on-wa);
  color: var(--wa);
  font: 600 13px/1 var(--sans);
}

.sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  display: flex;
  background: var(--dark);
  border-top: 1px solid var(--dark-line-2);
}
.sticky-bar a {
  flex: 1;
  padding: 16px;
  text-align: center;
  color: var(--on-dark);
  font: 500 13px/1 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sticky-bar a.is-wa { background: var(--wa); color: var(--on-wa); }
.sticky-bar a.is-book { background: var(--brass); color: #FFF; }
.sticky-bar[hidden] { display: none; }

/* Lift the floating button so it never sits on top of the sticky bar */
body.has-sticky-bar .wa-fab { bottom: 74px; }
body.has-sticky-bar .site-footer { padding-bottom: 80px; }

/* --------------------------------------------------------------------------
   17. Breadcrumb, gallery, material cards
   -------------------------------------------------------------------------- */
.crumbs {
  margin: 0 0 22px;
  font: 400 13px/1 var(--sans);
  color: var(--ink-mute);
}
.crumbs a { color: var(--brass); }

/* --------------------------------------------------------------------------
   Rechtstexte: Impressum und Datenschutz
   -------------------------------------------------------------------------- */
.legal-heading { margin: 44px 0 14px; }
.legal-heading:first-of-type { margin-top: 0; }

.legal-list {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(150px, 210px) 1fr;
  gap: 2px 28px;
}
.legal-list dt {
  padding: 12px 0;
  font: 500 12px/1.5 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border-top: 1px solid var(--line);
}
.legal-list dd {
  margin: 0;
  padding: 12px 0;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
}
.legal-list dd a { color: var(--brass); }

/* Unmissverständlich als Lücke erkennbar — niemals wie ein echter Wert aussehen */
.todo {
  display: inline-block;
  padding: 2px 9px;
  border: 1px dashed #C9A24A;
  border-radius: 2px;
  background: #FBF3DE;
  color: #7A6428;
  font: 500 13px/1.5 var(--sans);
}

.legal-note {
  display: block;
  margin-top: 8px;
  padding-left: 14px;
  border-left: 2px solid var(--line-strong);
  font-size: 14px;
  color: var(--ink-mute);
}
p.legal-note { margin-top: 12px; }

@media (max-width: 620px) {
  .legal-list { grid-template-columns: 1fr; gap: 0; }
  .legal-list dt { padding-bottom: 0; border-top: 1px solid var(--line); }
  .legal-list dd { padding-top: 4px; border-top: none; }
}

.material-card {
  border: 1px solid var(--line-strong);
  padding: 30px;
  background: var(--surface);
}
.material-card__brand {
  margin: 0 0 12px;
  font: 500 13px/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass);
}
.material-card p { margin: 0; color: var(--ink-soft); font-size: 15px; }

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gallery .ph { aspect-ratio: 1/1; }

.facts {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 32px;
  padding: 24px 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
.facts__value { margin: 0; font: 300 30px/1 var(--serif); color: var(--brass); }
.facts__label { margin: 6px 0 0; font-size: 14px; color: var(--ink-mute); }

.checklist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
  font-size: 16px;
  color: var(--ink);
}
.checklist li { padding-left: 22px; border-left: 2px solid var(--brass); }

.quote-card {
  border: 1px solid var(--dark-line);
  padding: 28px;
  background: var(--dark-3);
}
.quote-card__stars { margin: 0 0 16px; font: 400 15px/1 var(--serif); color: var(--brass-light); letter-spacing: .14em; }
.quote-card__text { margin: 0 0 20px; font: 300 19px/1.5 var(--serif); }
.quote-card__name { margin: 0; font: 500 15px/1.4 var(--sans); }
.quote-card__place { margin: 0; font-size: 14px; color: var(--on-dark-mute); }

/* --------------------------------------------------------------------------
   18. Blog
   -------------------------------------------------------------------------- */
.post-featured {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 40px;
  align-items: center;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  padding: 40px 0;
  color: var(--ink);
  transition: color .25s ease;
}
.post-featured:hover { color: var(--brass); }
.post-featured .ph { aspect-ratio: 16/10; }
.post-featured h2 { margin: 0 0 14px; font: 200 clamp(28px, 3.4vw, 40px)/1.15 var(--serif); }
.post-featured p.excerpt { margin: 0; color: var(--ink-soft); }

.post-meta {
  margin: 0 0 14px;
  font: 500 12px/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass);
}

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.post-card {
  display: block;
  color: var(--ink);
  transition: transform .35s ease, color .25s ease;
}
.post-card:hover { color: var(--brass); transform: translateY(-8px); }
.post-card .ph { aspect-ratio: 16/11; margin-bottom: 18px; padding: 14px; }

/* Steckt ein echtes Foto im Rahmen, darf kein Innenabstand bleiben — sonst
   schaut das gestreifte Platzhaltermuster ringsum hervor. Die Regel steht
   hier und nicht oben bei .ph--photo, weil `.post-card .ph` dieselbe
   Spezifität hat und weiter unten im Stylesheet sonst gewinnen würde. */
.post-card .ph--photo,
.post-featured .ph--photo { padding: 0; }
.post-card .post-meta { margin: 0 0 10px; font-size: 11px; }
.post-card h3 { margin: 0 0 10px; font: 300 24px/1.25 var(--serif); }
.post-card p { margin: 0; font-size: 15px; color: var(--ink-soft); }

.pager {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 64px;
}
.pager span, .pager a {
  padding: 12px 18px;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font: 500 13px/1 var(--sans);
}
.pager [aria-current="page"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }

/* --------------------------------------------------------------------------
   19. Redaktion (admin panel)
   -------------------------------------------------------------------------- */
.admin {
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
  background: #F2F0EC;
}
.admin__aside {
  background: var(--dark);
  color: #E7E0D4;
  padding: 26px 20px;
  display: flex;
  flex-direction: column;
  gap: 34px;
}
.admin__word { margin: 0 0 4px; font: 300 22px/1 var(--sans); letter-spacing: .02em; color: #FFF; }
.admin__role { margin: 0; font: 400 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #9B8F7E; }
.admin__nav { display: grid; gap: 2px; font: 400 15px/1 var(--sans); }
.admin__nav button {
  padding: 12px 14px;
  text-align: left;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  color: var(--on-dark-mute);
  cursor: pointer;
  font: inherit;
}
.admin__nav button[aria-selected="true"] {
  background: var(--dark-4);
  color: #FFF;
  border-left-color: var(--brass);
}
.admin__nav span { padding: 12px 14px; color: var(--on-dark-mute); opacity: .65; }
.admin__back { margin-top: auto; font: 400 13px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--brass-light); }
.admin__main { padding: 34px 40px 80px; min-width: 0; }

.admin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.admin-head h1 { margin: 0 0 6px; font: 300 34px/1.1 var(--serif); color: var(--ink); }
.admin-head p { margin: 0; font-size: 15px; color: #6E6459; }

.toast {
  margin-bottom: 24px;
  padding: 16px 20px;
  background: #E8F2E8;
  border: 1px solid #B7D3B8;
  color: var(--ok-fg);
  font-size: 15px;
}
.toast[hidden] { display: none; }

.editor {
  background: var(--surface);
  border: 1px solid #DDD8D0;
  margin-bottom: 34px;
  display: grid;
  grid-template-columns: 1.55fr .95fr;
}
.editor[hidden] { display: none; }
.editor__main { padding: 30px; border-right: 1px solid #E6E1D9; min-width: 0; }
.editor__side { padding: 30px; background: #FAF8F4; }

.field {
  display: block;
  margin-bottom: 20px;
  font: 500 11px/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.field input,
.field select,
.field textarea {
  display: block;
  width: 100%;
  margin-top: 9px;
  padding: 13px 14px;
  border: 1px solid #DDD8D0;
  background: #FFF;
  color: var(--ink);
  font-size: 15px;
  border-radius: var(--radius);
  text-transform: none;
  letter-spacing: normal;
}
.field textarea { resize: vertical; line-height: 1.6; font-size: 16px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brass); outline: none; }
.field--title input { padding: 14px; font: 300 24px/1.3 var(--serif); }
.field--slug input { font: 400 15px/1 var(--mono); }
.field__counter { display: block; margin-top: 6px; font: 400 12px/1 var(--mono); color: #9B9184; }
.field__counter.is-over { color: var(--danger); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field-row .field { margin-bottom: 20px; }

/* Kopfzeile des Editors: zeigt an, ob ein neuer Beitrag entsteht oder ein
   bestehender bearbeitet wird */
.editor__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid #E6E1D9;
}
.editor__mode {
  margin: 0;
  font: 500 11px/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.editor__mode.is-editing { color: var(--brass); }
.editor__cancel {
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font: 400 13px/1 var(--sans);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #9B9184;
}
.editor__cancel:hover { color: var(--ink); }
.editor__cancel[hidden] { display: none; }

/* Der Editor hebt sich ab, solange ein bestehender Beitrag offen ist */
.editor.is-editing { border-color: var(--brass); }

.editor__label {
  margin: 0 0 9px;
  font: 500 11px/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.editor__toolbar {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  border: 1px solid #DDD8D0;
  border-bottom: none;
  background: #F6F3EE;
  padding: 8px;
}
.editor__toolbar button {
  padding: 7px 11px;
  background: none;
  border: none;
  color: #4A423A;
  cursor: pointer;
  font: 400 13px/1 var(--sans);
  border-radius: var(--radius);
}
.editor__toolbar button:hover { background: #EAE4DA; }
.editor__toolbar button.is-b { font: 600 14px/1 var(--serif); }
.editor__toolbar button.is-i { font: italic 400 14px/1 var(--serif); }
.editor__body {
  display: block;
  width: 100%;
  padding: 16px;
  border: 1px solid #DDD8D0;
  background: #FFF;
  /* Feste Laufweite: der Text ist HTML, da hilft eine Code-Schrift beim
     Auffinden nicht geschlossener Tags. */
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink);
  resize: vertical;
  border-radius: 0 0 var(--radius) var(--radius);
  tab-size: 2;
}
.editor__drop {
  height: 130px;
  border: 1px dashed #C9C2B7;
  background: repeating-linear-gradient(135deg, #F1EDE6 0 12px, #F7F4EF 12px 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 24px;
  cursor: pointer;
  font: 400 11px/1.6 var(--mono);
  letter-spacing: .08em;
  color: var(--ink-faint);
  width: 100%;
}
.editor__actions { display: grid; gap: 10px; }
.editor__actions button {
  padding: 15px;
  border-radius: var(--radius);
  cursor: pointer;
  font: 500 13px/1 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.editor__actions .is-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.editor__actions .is-primary:hover { background: var(--brass); border-color: var(--brass); }
.editor__actions .is-secondary { background: none; color: var(--ink); border-color: #C9C2B7; }
.editor__actions .is-secondary:hover { background: #EFEBE4; }
.editor__hint { margin: 18px 0 0; font-size: 13px; color: var(--ink-mute); }

.table { background: var(--surface); border: 1px solid #DDD8D0; }
.table__head,
.table__row {
  display: grid;
  grid-template-columns: 2.2fr .9fr .9fr .8fr 1.5fr;
  gap: 16px;
  padding: 14px 24px;
}
.table__head {
  border-bottom: 1px solid #E6E1D9;
  background: #F6F3EE;
  font: 500 11px/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.table__row {
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid #EFEBE4;
}
.table__row:last-child { border-bottom: none; }
.table__row.is-editing {
  background: #FBF6EC;
  box-shadow: inset 3px 0 0 0 var(--brass);
}
.table__title { margin: 0 0 3px; font: 400 17px/1.3 var(--serif); color: var(--ink); }
.table__slug { margin: 0; font: 400 12px/1 var(--mono); color: #9B9184; word-break: break-all; }
.table__cell { font-size: 15px; color: var(--ink-soft); }
.table__empty { padding: 40px 24px; color: var(--ink-mute); font-size: 15px; }

.badge {
  justify-self: start;
  padding: 6px 11px;
  border-radius: var(--radius);
  font: 500 11px/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--draft-bg);
  color: var(--draft-fg);
}
.badge.is-live { background: var(--ok-bg); color: var(--ok-fg); }

.row-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font: 400 13px/1 var(--sans);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.row-actions button { padding: 0; background: none; border: none; cursor: pointer; font: inherit; }
.row-actions .is-edit { color: var(--ink); font-weight: 500; }
.row-actions .is-edit:hover { color: var(--brass); }
.row-actions .is-edit:disabled { color: var(--brass); cursor: default; }
.row-actions .is-toggle { color: var(--brass); }
.row-actions .is-delete { color: #9B9184; }
.row-actions .is-delete:hover { color: var(--danger); }

.admin-split {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 26px;
  align-items: start;
}
.panel { background: var(--surface); border: 1px solid #DDD8D0; padding: 30px; }
.panel__label {
  margin: 0 0 22px;
  font: 500 11px/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.panel .stack { display: grid; gap: 18px; }
.panel .stack .field { margin-bottom: 0; }
.panel__hint { margin: 0; font-size: 13px; color: var(--ink-mute); }

/* Vorschau der Social-Media-Links im Panel */
.social-preview__handle {
  margin: 0 0 6px;
  font: 300 26px/1.2 var(--serif);
  color: var(--ink);
  word-break: break-all;
}
.social-preview__meta {
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--ink-mute);
}
.social-preview__row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid #EFEBE4;
  align-items: baseline;
}
.social-preview__name {
  font: 500 11px/1.4 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.social-preview__value { font-size: 14px; color: var(--ink-soft); word-break: break-all; }
.social-preview__value.is-empty { color: #9B9184; font-style: italic; }
.social-preview__value.is-warn { color: var(--draft-fg); }

.review-row { background: var(--surface); border: 1px solid #DDD8D0; padding: 24px 26px; }
.review-row__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.review-row__stars { font: 400 15px/1 var(--serif); color: var(--brass); letter-spacing: .14em; }
.review-row__text { margin: 0 0 16px; font: 300 19px/1.5 var(--serif); color: var(--ink); }
.review-row__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.review-row__name { margin: 0; font: 500 15px/1.4 var(--sans); color: var(--ink); }
.review-row__meta { margin: 0; font-size: 14px; color: var(--ink-mute); }

/* --------------------------------------------------------------------------
   20. Bewegung: Einblenden beim Scrollen
   Die Klasse .reveal setzt erst JavaScript — ohne JS bleibt alles sichtbar.
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
              transform .7s cubic-bezier(.22, .61, .36, 1);
}
.reveal--in {
  opacity: 1;
  transform: none;
}

/* Kopfzeile hebt sich beim Scrollen etwas ab */
.site-header.is-scrolled {
  box-shadow: 0 1px 14px rgba(38, 33, 28, .07);
}

/* --------------------------------------------------------------------------
   21. Instagram: echte Beiträge
   -------------------------------------------------------------------------- */
.ig-tile--live { background: var(--paper-warm); }
.ig-tile--live img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ig-tile--live .ph__cap {
  z-index: 1;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ig-tile.is-video::before {
  content: "▶";
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(38, 33, 28, .72);
  color: #FFF;
  font-size: 9px;
}

/* --------------------------------------------------------------------------
   22. Formular: Honeypot, Rechtshinweis, reCAPTCHA-Badge
   -------------------------------------------------------------------------- */

/* Für Menschen unsichtbar, für Bots ein einladendes Feld.
   Bewusst kein display:none — das erkennen viele Bots. */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__legal {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--on-dark-mute);
}
.form__legal a { color: var(--on-dark-soft); text-decoration: underline; }
.form__legal a:hover { color: #FFF; }
.form__legal[hidden] { display: none; }

/* Der Badge wird ausgeblendet — dafür steht der Hinweis oben im Formular,
   so verlangt es Google. */
.grecaptcha-badge { visibility: hidden; }

/* --------------------------------------------------------------------------
   23. Anmeldung
   -------------------------------------------------------------------------- */
.login-page { background: var(--dark); }

.login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.login__card {
  width: 100%;
  max-width: 400px;
  padding: 44px 40px 36px;
  background: var(--dark-3);
  border: 1px solid var(--dark-line);
  color: var(--on-dark);
}
.login__word { margin: 0 0 4px; font: 300 24px/1 var(--sans); letter-spacing: .02em; color: #FFF; }
.login__role {
  margin: 0 0 32px;
  font: 400 11px/1 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
}
.login__title { margin: 0 0 24px; font: 200 34px/1.1 var(--serif); letter-spacing: -.02em; }

.login__note {
  margin: 0 0 22px;
  padding: 14px 16px;
  border: 1px solid var(--dark-line);
  background: #2C2620;
  font-size: 14px;
  line-height: 1.55;
  color: var(--on-dark-soft);
}
.login__note.is-warn { border-color: #6E5A2E; background: #322A1D; color: #E4D5B4; }
.login__note[hidden] { display: none; }

.login__preview-link { margin: -8px 0 26px; font-size: 14px; }
.login__preview-link a { color: var(--brass-light); }
.login__preview-link a:hover { color: #FFF; }

.login__submit { width: 100%; margin-top: 24px; }
.login .form__error { margin-top: 16px; }
.login__back { margin: 24px 0 0; font-size: 14px; }
.login__back a { color: var(--brass-light); }
.login__back a:hover { color: #FFF; }

/* --------------------------------------------------------------------------
   24. Panel: Sitzung, Vorschaumodus, Fehlermeldungen
   -------------------------------------------------------------------------- */
.admin[hidden] { display: none; }

.admin__user {
  margin: 8px 0 0;
  font: 400 13px/1 var(--sans);
  color: var(--brass-light);
}
.admin__user:empty { display: none; }

.admin__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.admin__back { margin-top: 0; }
.admin__logout {
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font: 400 13px/1 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
}
.admin__logout:hover { color: #FFF; }
.admin__logout[hidden] { display: none; }

.admin__preview {
  margin: 0 0 24px;
  padding: 16px 20px;
  background: #F5EEDC;
  border: 1px solid #DEC98F;
  color: #6B5620;
  font-size: 15px;
}
.admin__preview[hidden] { display: none; }

.toast.is-error {
  background: #F8E9E5;
  border-color: #E0B4A8;
  color: #8A3421;
}

/* --------------------------------------------------------------------------
   25. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .site-nav { gap: 22px; }
  .split { gap: 48px; }
  .contact__grid { gap: 48px; }
}

@media (max-width: 1080px) {
  :root { --gutter: 28px; }

  .hero { grid-template-columns: 1fr; }
  .hero__body { padding: 72px var(--gutter) 56px; max-width: none; margin: 0; }
  .hero__media { min-height: 380px; border-left: none; border-top: 1px solid var(--line); }
  /* Einspaltig sitzt das Bild weiter unten auf der Seite; die Kurve aus dem
     Entwurf würde es aus dem Rahmen schieben. Hier bleibt es ruhig stehen. */
  .hero__media .parallax-frame__img {
    top: 0;
    height: 100%;
    transform: none !important;
  }

  .reviews__grid { grid-template-columns: 1fr; gap: 40px; }
  .reviews__quote { min-height: 0; }

  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .process { grid-template-columns: repeat(2, 1fr); }
  .process__step { padding: 28px 24px 32px; }
  .process__step:nth-child(odd) { padding-left: 0; }
  .process__step:nth-child(even) { padding-right: 0; border-right: none; }
  .process__step:nth-child(-n+2) { border-bottom: 1px solid var(--line-strong); }

  .stats { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }

  .split { grid-template-columns: 1fr; padding-top: 72px; padding-bottom: 72px; }
  .split__media { min-height: 340px; order: -1; }
  .split__media .parallax-frame__img { top: 0; height: 100%; transform: none !important; }

  .ig-grid { grid-template-columns: repeat(3, 1fr); }
  .ig-tile { transform: none !important; }

  .contact__grid { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .post-featured { grid-template-columns: 1fr; }

  .admin { grid-template-columns: 1fr; }
  .admin__aside { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 20px; padding: 20px var(--gutter); }
  .admin__nav { grid-auto-flow: column; grid-auto-columns: max-content; align-items: center; }
  .admin__nav span { display: none; }
  .admin__foot { margin-top: 0; margin-left: auto; width: auto; gap: 20px; }
  .admin__main { padding: 28px var(--gutter) 72px; }
  .editor { grid-template-columns: 1fr; }
  .editor__main { border-right: none; border-bottom: 1px solid #E6E1D9; }
  .admin-split { grid-template-columns: 1fr; }

  .table__head { display: none; }
  .table__row { grid-template-columns: 1fr; gap: 10px; }
  .badge { justify-self: start; }
}

@media (max-width: 860px) {
  .site-header { gap: 16px; }
  .nav-toggle { display: block; order: 3; }
  .site-header__actions { order: 2; }
  .site-header__actions .btn--wa-quiet { display: none; }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 20px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    font-size: 16px;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 16px 0; border-bottom: 1px solid var(--line); }
  .site-nav a[aria-current="page"] { box-shadow: none; }

  .gallery { grid-template-columns: repeat(2, 1fr); }
  .split__points { grid-template-columns: 1fr; gap: 26px; }
  .facts { gap: 28px; }
}

@media (max-width: 620px) {
  :root { --gutter: 20px; }

  .section { padding-top: 64px; padding-bottom: 64px; }
  .reviews { padding: 56px var(--gutter); }
  .contact { padding: 64px var(--gutter); }

  .grid-4, .grid-3, .post-grid, .gallery { grid-template-columns: 1fr; }
  .process { grid-template-columns: 1fr; }
  .process__step { padding: 26px 0 30px; border-right: none; border-bottom: 1px solid var(--line-strong); }
  .process__step:last-child { border-bottom: none; }
  .stats { grid-template-columns: 1fr; gap: 26px; }
  .ig-grid { grid-template-columns: repeat(2, 1fr); }

  .form { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }

  .site-footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .site-footer__bottom { flex-direction: column; gap: 12px; }

  .faq__a { padding-right: 0; }

  /* Header CTA shortens to "Kontakt" so it stays on one line */
  .cta-rest { display: none; }

  .wa-fab { right: 16px; bottom: 16px; padding: 13px 18px 13px 15px; }
  body.has-sticky-bar .wa-fab { bottom: 74px; }

  .section-head { margin-bottom: 36px; }
}

/* Motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .parallax-frame__layer, .ig-tile { transform: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   Einzelner Ratgeber-Beitrag (blog.php)
   ========================================================================== */

.article__head {
  max-width: 820px;
  padding-top: 64px;
  padding-bottom: 30px;
}
.article__head .crumbs { margin-bottom: 26px; }
.article__head h1 { margin: 0 0 20px; }

.article__standfirst { margin: 0 0 24px; max-width: 640px; }

.article__meta {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Lesespalte: bewusst schmaler als der Rest der Seite */
.article {
  max-width: 720px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-soft);
}
.article > *:first-child { margin-top: 0; }
.article p { margin: 0 0 22px; text-wrap: pretty; }
.article strong { font-weight: 500; color: var(--ink); }
.article em { font-style: italic; }

.article h2 {
  margin: 48px 0 18px;
  font: 300 clamp(26px, 3vw, 34px)/1.2 var(--serif);
  color: var(--ink);
}
.article h3 {
  margin: 36px 0 14px;
  font: 400 20px/1.35 var(--sans);
  letter-spacing: -.01em;
  color: var(--ink);
}

.article ul { margin: 0 0 24px; padding-left: 22px; }
.article li { margin-bottom: 10px; text-wrap: pretty; }

.article a { color: var(--brass); text-underline-offset: 3px; }
.article a:hover { color: var(--ink); }

.article blockquote {
  margin: 32px 0;
  padding: 4px 0 4px 24px;
  border-left: 2px solid var(--brass);
  font: 300 21px/1.55 var(--serif);
  color: var(--ink);
}
.article blockquote p:last-child { margin-bottom: 0; }

.article figure { margin: 36px 0; }
.article img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.article figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-mute);
}

.article__cta {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 48px;
  border-radius: 6px;
  background: var(--dark);
  color: var(--on-dark);
}
.article__cta h2 {
  margin: 0 0 14px;
  font: 200 clamp(26px, 3vw, 34px)/1.2 var(--serif);
  color: var(--on-dark);
}
.article__cta p { margin: 0; color: var(--on-dark-soft); }
.article__cta-actions { display: flex; flex-direction: column; gap: 12px; }

.notice {
  margin: 0;
  padding: 14px 18px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.55;
}
.notice--draft { background: var(--draft-bg); color: var(--draft-fg); }

@media (max-width: 860px) {
  .article__head { padding-top: 44px; }
  .article__cta { grid-template-columns: 1fr; gap: 28px; padding: 32px; }
}

/* ==========================================================================
   Einwilligungsbanner
   Sitzt unten und überdeckt nie den ganzen Bildschirm — wer die Seite lesen
   will, soll das können, ohne vorher irgendetwas wegklicken zu müssen.
   ========================================================================== */

.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--dark);
  color: var(--on-dark);
  border-top: 1px solid var(--dark-line);
  box-shadow: 0 -12px 40px rgba(31, 27, 23, .28);
  animation: consent-in .28s ease-out both;
}

@keyframes consent-in {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .consent { animation: none; }
}

.consent__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px var(--gutter);
  display: flex;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
}

.consent__title {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
}
.consent__text p {
  margin: 0;
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--on-dark-soft);
}
.consent__text a { color: var(--on-dark); text-underline-offset: 3px; }

.consent__actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.btn--ghost-light {
  background: transparent;
  color: var(--on-dark);
  border: 1px solid var(--dark-line);
}
.btn--ghost-light:hover {
  border-color: var(--on-dark-mute);
  background: rgba(255, 255, 255, .05);
  color: var(--on-dark);
}

@media (max-width: 860px) {
  .consent__inner { flex-direction: column; align-items: stretch; gap: 18px; }
  .consent__actions { flex-direction: column-reverse; }
  .consent__actions .btn { width: 100%; text-align: center; }
}

/* ==========================================================================
   Logo
   Die Logodatei hat keinen Alphakanal: Sie bringt einen deckenden, kühlen
   Hintergrund (rgb 247,247,247) mit, der auf dem warmen Papierton der Seite
   (rgb 247,244,239) als sichtbares Rechteck steht.

   `darken` nimmt je Kanal den dunkleren Wert. Für den Logohintergrund ist das
   überall der Seitenton — das Rechteck verschwindet. Die dunkle Schrift bleibt
   dunkel, weil sie ohnehin der dunklere Wert ist.

   Das ist ein Behelf. Sauber wäre eine Logodatei mit Transparenz (am besten
   SVG); dann kann diese Regel ersatzlos weg.
   ========================================================================== */

.site-header__logo img {
  mix-blend-mode: darken;
}

/* ==========================================================================
   Dateianhänge im Kontaktformular
   ========================================================================== */

/* Die Beschriftung des nativen Dateifelds kommt vom Browser, nicht von uns —
   sie folgt der Sprache des Systems. Ein deutscher Besucher liest dort
   "Datei auswählen", ein polnischer "Wybierz pliki". Damit die Seite in
   jedem Fall deutsch bleibt, blenden wir das native Feld aus und beschriften
   selbst. Das Feld bleibt bedienbar: Es liegt im Label, ist per Tastatur
   erreichbar und meldet den Fokus an die sichtbare Schaltfläche weiter. */

.filepick {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px dashed rgba(242, 235, 224, .35);
  border-radius: 4px;
  background: rgba(255, 255, 255, .04);
  cursor: pointer;
}
.filepick:hover { border-color: rgba(242, 235, 224, .6); }
.filepick:focus-within { border-color: var(--on-dark); border-style: solid; }

.filepick input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.filepick__btn {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--on-dark);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  white-space: nowrap;
}

.filepick__state {
  font-size: 13px;
  line-height: 1.5;
  color: var(--on-dark-mute);
  text-transform: none;
  letter-spacing: 0;
  word-break: break-word;
}
.filepick__state.has-files { color: var(--on-dark-soft); }

/* „optional" neben der Feldbeschriftung — leiser als das Label selbst,
   damit auf einen Blick klar ist, was Pflicht ist und was nicht. */
.form__optional {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--on-dark-mute);
}

.form__hint {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--on-dark-mute);
  text-transform: none;
  letter-spacing: 0;
}

/* ==========================================================================
   Beitragsbild: Ablagefläche im Panel und Darstellung im Beitrag
   ========================================================================== */

.editor__drop { position: relative; overflow: hidden; padding: 0; }
.editor__drop img { display: block; width: 100%; height: 100%; object-fit: cover; }
.editor__drop.is-over { border-color: var(--brass); background: var(--paper-warm); }
.editor__drop.is-busy { opacity: .55; pointer-events: none; }
.editor__drop.has-image { border-style: solid; border-color: var(--line); }

.editor__hint {
  /* Sitzt direkt unter der Ablagefläche, braucht aber vollen Abstand nach
     unten — sonst rutscht die nächste Beschriftung darunter. */
  margin: -14px 0 24px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-faint);
}
.editor__drop { margin-bottom: 20px; }

.editor__image-meta { margin-bottom: 18px; }
.editor__image-remove {
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  color: var(--danger);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Aufmacher über dem Beitragstext */
.article__hero {
  max-width: 1000px;
  margin: 0 auto;
  padding-top: 8px;
  padding-bottom: 40px;
}
.article__hero img {
  display: block;
  /* Die Beitragsbilder sind quadratisch. In voller Spaltenbreite stünde am
     Seitenanfang ein 1000 px hoher Block und der Text begänne erst unterhalb
     des Bildschirms. Statt zu beschneiden — dabei ginge bei Dachschrägen und
     Beschlägen genau das Motiv verloren — wird die Höhe begrenzt und das Bild
     mittig gestellt. Liegende Formate laufen weiterhin über die volle Breite. */
  max-height: 560px;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 4px;
}

/* Print */
@media print {
  .site-header, .wa-fab, .sticky-bar, .site-footer, .nav-toggle { display: none !important; }
  body { background: #FFF; }
}