/* ============================================================
   Reisebüro Weiche – Design-System & Layout
   CI: Creme / Salbei / Terrakotta · Playfair Display + Inter
   ============================================================ */

:root {
  /* Flächen */
  --cream:        #f6f1e8;   /* Seitenhintergrund */
  --cream-card:   #fcf8f1;   /* Karten hell */
  --sand:         #ece3d3;   /* Wechsel-Abschnitte */
  --sand-card:    #f9f5ec;   /* Karten auf Sand */
  --tag:          #ece3d3;   /* Chips/Tags */
  /* Salbei */
  --sage:         #839486;   /* Band / Footer / Section */
  --sage-light:   #a1bca6;   /* Newsletter */
  --sage-accent:  #84aaab;   /* kleine Akzente */
  /* Terrakotta */
  --terra:        #cc6b45;   /* Primär-CTA */
  --terra-deep:   #b85c38;   /* Links / Alt-CTA */
  --terra-dark:   #b85c38;
  /* Text */
  --ink:          #23201b;   /* Überschriften / dunkler Text */
  --muted:        #6e655a;   /* Fließtext gedämpft */
  --gold:         #edd9b8;   /* Hero-Eyebrow */
  /* Linien */
  --border:       #dad0bf;
  --border-soft:  #ccc1af;

  --font-head: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --content: 1300px;   /* Content-Breite: Logo-Außenkante ↔ Termin-Button-Außenkante */
  --gutter: 22px;      /* Seitenabstand auf schmalen Screens */
  --radius: 12px;
  --shadow-card: 0 18px 46px rgba(35, 32, 27, .10);
  --header-h: 104px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 500; color: var(--ink); margin: 0; line-height: 1.1; }
p { margin: 0; }
button { font-family: inherit; }

/* Content-Spur: richtet sich exakt an Header (Logo ↔ Termin-Button) aus */
.wrap { width: 100%; padding-inline: max(var(--gutter), calc((100% - var(--content)) / 2)); }

/* ---------- Eyebrow / Section-Kopf ---------- */
.eyebrow {
  font-weight: 600; font-size: 13px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--sage); margin: 0;
}
.eyebrow--gold { color: var(--gold); }
.eyebrow--terra { color: var(--terra); }
.section-head { max-width: 760px; margin-bottom: 48px; }
.section-head h2 { font-size: clamp(30px, 4.4vw, 52px); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 15.5px; line-height: 1;
  padding: 16px 30px; border-radius: 100px; border: 1.4px solid transparent;
  cursor: pointer; transition: transform .18s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.btn .arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(4px); }
.btn--terra { background: var(--terra); color: #fff; }
.btn--terra:hover { background: #bd5c38; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(204,107,69,.32); }
.btn--outline { border-color: rgba(255,255,255,.85); color: #fff; }
.btn--outline:hover { background: rgba(255,255,255,.12); }
.btn--ink { border-color: var(--ink); color: var(--ink); }
.btn--ink:hover { background: var(--ink); color: #fff; }
.btn--sm { padding: 12px 22px; font-size: 14px; }

.textlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--sage); font-size: 14px; }
.textlink .arrow { transition: transform .2s ease; }
.textlink:hover { color: var(--terra-deep); }
.textlink:hover .arrow { transform: translateX(4px); }
.textlink--terra { color: var(--terra-deep); }

/* ============================================================
   HEADER / NAVIGATION
   ============================================================ */
.header {
  position: sticky; top: 0; z-index: 900;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 24px; height: var(--header-h);
  padding: 0; padding-inline: max(var(--gutter), calc((100% - var(--content)) / 2));
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease, height .3s ease;
  border-bottom: 1px solid transparent;
}
/* Sticky-Header verkleinert sich beim Scrollen */
.header--over.scrolled { height: 78px; }
.header--over.scrolled .brand img { height: 60px; width: 60px; }
/* Über Hero liegend (transparent, weiße Schrift) */
.header--over {
  position: fixed; left: 0; right: 0;
  background: transparent; color: #fff;
}
.header--over .nav-link, .header--over .brand-text { color: #fff; }
/* Solid (helle Seiten oder gescrollt) */
.header--solid,
.header--over.scrolled {
  background: rgba(246,241,232,.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom-color: var(--border);
  box-shadow: 0 6px 22px rgba(35,32,27,.06);
  color: var(--ink);
}
.header--over.scrolled .nav-link { color: var(--ink); }

.brand { display: flex; align-items: center; gap: 12px; grid-column: 1; justify-self: start; }
.brand img { height: 88px; width: 88px; object-fit: contain; transition: height .3s ease, width .3s ease; }
.brand-text { font-family: var(--font-head); font-weight: 600; font-size: 18px; color: var(--ink); letter-spacing: .2px; }

/* Menü-Links mittig, Termin-Button rechts (per Grid-Spalten) */
.nav { display: contents; }
.nav-links { display: flex; align-items: center; gap: 34px; grid-column: 2; justify-self: center; }
.nav-link {
  font-weight: 500; font-size: 15px; color: var(--ink);
  position: relative; padding: 6px 0; transition: color .2s ease;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--terra); transition: width .25s ease;
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.nav-link:hover { color: var(--terra-deep); }
.header--over:not(.scrolled) .nav-link:hover { color: #fff; opacity: .8; }

.nav-cta {
  background: var(--terra); color: #fff !important; border-radius: 100px;
  padding: 12px 24px; font-weight: 600; font-size: 14.5px; line-height: 1;
  display: inline-flex; align-items: center; gap: 8px;
  grid-column: 3; justify-self: end;
  transition: transform .18s ease, box-shadow .2s ease, background .2s ease;
}
.nav-cta::after { display: none; }
.nav-cta:hover { background: #bd5c38; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(204,107,69,.34); color: #fff !important; }


/* ---------- Sprachwechsel per Flagge (zwei eigenstaendige Domains) ---------- */
.nav-actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 18px; }
.lang-switch {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500; font-size: 14.5px; color: var(--ink);
  transition: opacity .2s ease;
}
.lang-switch:hover { opacity: .7; }
.flag {
  width: 24px; height: auto; display: block; border-radius: 2px; flex: none;
  box-shadow: 0 0 0 1px rgba(35,32,27,.22);
}
.header--over .lang-switch { color: #fff; }
.header--over .flag { box-shadow: 0 0 0 1px rgba(255,255,255,.5); }
.header--over.scrolled .lang-switch { color: var(--ink); }
.header--over.scrolled .flag { box-shadow: 0 0 0 1px rgba(35,32,27,.22); }
/* Kompakte Variante fuer Handy – bleibt neben dem Burger sichtbar */
.lang-switch--kompakt { display: none; }

.burger {
  display: none; width: 44px; height: 44px; border: 0; background: none;
  cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; padding: 0;
  grid-column: 3; justify-self: end;
  color: inherit; /* folgt der Header-Farbe: weiß über Hero, dunkel wenn solide/offen */
}
.burger span { display: block; height: 2px; width: 24px; margin: 0 auto; background: currentColor; border-radius: 2px; transition: transform .28s ease, opacity .2s ease; }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO (Startseite)
   ============================================================ */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; text-align: center; color: #fff; }
.hero-slides { position: absolute; inset: 0; }
.hero-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.1s ease; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-slide.active { opacity: 1; }
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,15,13,.62) 0%, rgba(10,15,13,.42) 50%, rgba(10,15,13,.68) 100%);
}
.hero-content {
  position: relative; z-index: 2; max-width: 960px; padding: 140px var(--gutter) 90px;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.hero-content h1 { color: #fff; font-size: clamp(40px, 7vw, 90px); line-height: 1.04; font-weight: 500; }
/* Längere Headline (z. B. dänische Fassung): kleinere Schrift, damit der Hero nicht überläuft */
.hero-content--lang h1 { font-size: clamp(34px, 5vw, 64px); }
.hero-content--lang .hero-sub { max-width: 720px; }
.hero-sub { max-width: 660px; font-size: clamp(16px, 2vw, 19px); line-height: 1.6; color: rgba(255,255,255,.92); }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; padding-top: 8px; }
.hero-rating { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; padding-top: 14px; font-size: 14.5px; }
.hero-stars { color: var(--gold); letter-spacing: 1.7px; font-weight: 600; font-size: 14px; }
.hero-rating span { color: rgba(255,255,255,.85); }

/* Slider-Dots */
.hero-ui { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 18px; }
.hero-dots { display: flex; gap: 10px; }
.hero-dots button { width: 30px; height: 4px; border: 0; border-radius: 3px; background: rgba(255,255,255,.4); cursor: pointer; padding: 0; transition: background .25s ease; }
.hero-dots button.active { background: #fff; }
.hero-counter { color: rgba(255,255,255,.85); font-size: 13px; letter-spacing: 1px; }
.hero-counter strong { color: #fff; }
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4);
  background: rgba(0,0,0,.18); color: #fff; font-size: 24px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .2s ease;
}
.hero-arrow:hover { background: rgba(0,0,0,.4); }
.hero-arrow--left { left: 24px; }
.hero-arrow--right { right: 24px; }

/* ============================================================
   ABSCHNITTE – generisch
   ============================================================ */
.section { padding: 100px 0; }
.section--cream { background: var(--cream); }
.section--sand { background: var(--sand); }
.section--mist { background: #dfe7e0; }
.section--sage { background: var(--sage); color: #fff; }

/* ---------- USP-Band ---------- */
.usp-band { background: var(--sage); color: #fff; padding: 100px 0; }
.usp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.usp { padding: 4px 34px; position: relative; }
.usp + .usp::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: rgba(35,32,27,.15); }
.usp-num { font-family: var(--font-head); font-size: 26px; color: var(--sage-light); margin-bottom: 12px; }
.usp h3 { color: #fff; font-family: var(--font-body); font-weight: 600; font-size: 18px; margin-bottom: 10px; }
.usp p { font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.92); }

/* ---------- Section-Head mit Intro rechts ---------- */
.head-split { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; margin-bottom: 48px; flex-wrap: wrap; }
.head-split h2 { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.08; }
.head-split .eyebrow { margin-bottom: 16px; }
.head-split .lead { max-width: 440px; font-size: 17px; line-height: 1.65; color: var(--muted); }

/* ---------- Team-Karten ---------- */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.person {
  background: var(--cream-card); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease;
}
.person:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.person-photo { aspect-ratio: 4 / 4.4; overflow: hidden; }
.person-photo img { width: 100%; height: 100%; object-fit: cover; }
.person-body { padding: 34px 40px 40px; display: flex; flex-direction: column; gap: 15px; flex: 1; }
.person-body h3 { font-size: 30px; }
.person-role { font-weight: 600; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--sage-accent); }
/* bio füllt den Rest -> Tags beginnen in allen Karten auf gleicher Höhe */
.person-body p.bio { font-size: 15.5px; line-height: 1.66; color: var(--muted); flex: 1; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; }
/* Team-Karten (Start): Tags reservieren gleiche Höhe -> beginnen auf einer Linie */
.person-body .tags { align-content: flex-start; min-height: 84px; }
.tag { background: var(--tag); color: var(--ink); border-radius: 100px; padding: 7px 13px; font-size: 13px; font-weight: 500; }

/* ---------- Expertise ---------- */
.expertise-grid { display: grid; grid-template-columns: 620px 1fr; gap: 90px; align-items: start; }
.expertise-media { position: relative; min-height: 520px; border-radius: 10px; overflow: hidden; display: flex; align-items: flex-end; padding: 28px; }
.expertise-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.badge-pill { position: relative; z-index: 1; background: rgba(255,255,255,.92); color: var(--ink); border-radius: 100px; padding: 9px 16px; font-size: 13.5px; font-weight: 500; }
.expertise-content h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.1; margin: 4px 0; }
.expertise-content > p.lead { font-size: 17px; line-height: 1.65; color: var(--muted); }
.expertise-list { margin-top: 6px; }
.expertise-item { padding: 22px 0; border-top: 1px solid var(--border-soft); }
.expertise-item:first-child { border-top: 0; }
.expertise-item-head { display: flex; align-items: center; gap: 14px; }
.expertise-item-head h3 { flex: 1; font-size: 23px; }
.expertise-item-head .arrow { color: var(--terra-deep); font-weight: 600; font-size: 20px; }
.expertise-item p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--muted); }

/* ---------- CTA-Band (Bild-Hintergrund) ---------- */
.cta-band { position: relative; overflow: hidden; text-align: center; color: #fff; padding: 120px 0; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: var(--sage); z-index: 0; }
.cta-band img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .22; z-index: 0; }
.cta-band .inner { position: relative; z-index: 1; max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 0 var(--gutter); }
.cta-band .inner .eyebrow { color: var(--terra); margin-bottom: -10px; }
.cta-band h2 { color: #fff; font-size: clamp(34px, 5.5vw, 58px); }
.cta-band p { font-size: 18px; line-height: 1.65; color: rgba(255,255,255,.94); }

/* ---------- Impressionen (Mosaik) ---------- */
.mosaic { display: flex; flex-direction: column; gap: 24px; }
.mosaic-row { display: grid; gap: 24px; }
.mosaic-row--split { grid-template-columns: 1fr 500px; }
.mosaic-row--thirds { grid-template-columns: repeat(3, 1fr); }
.mosaic-row--halves { grid-template-columns: repeat(2, 1fr); }
.mosaic-col { display: grid; grid-template-rows: 1fr 1fr; gap: 24px; }
.tile { position: relative; border-radius: 8px; overflow: hidden; display: flex; align-items: flex-end; padding: 20px; min-height: 240px; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.tile:hover img { transform: scale(1.05); }
.tile .badge-pill { padding: 8px 14px; font-size: 13px; }
.tile--tall { min-height: 536px; }
.tile--half { min-height: 256px; }
.tile--mid { min-height: 340px; }

/* ---------- Kundenstimmen ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.quote-card { background: var(--sand-card); border: 1px solid var(--border-soft); border-radius: 10px; padding: 32px; display: flex; flex-direction: column; gap: 22px; }
.section--sand .quote-card { background: var(--cream-card); }
.quote-stars { color: var(--terra-deep); letter-spacing: 1.5px; font-weight: 600; }
/* blockquote füllt den Rest -> Trennstrich + Autor sitzen in allen Karten auf gleicher Höhe */
.quote-card blockquote { margin: 0; flex: 1; font-family: var(--font-head); font-weight: 400; font-size: 20px; line-height: 1.5; color: var(--ink); }
.quote-rule { height: 1px; background: var(--border-soft); }
.quote-author { display: flex; align-items: center; gap: 14px; }
.quote-author img, .quote-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.quote-avatar { background: #c7c0b4; } /* grauer Platzhalter (Avatar folgt später) */
.quote-author .name { font-weight: 600; font-size: 15px; }
.quote-author .meta { font-size: 13px; color: var(--muted); }

/* ---------- Kontakt-Karte + Formular ---------- */
.contact-card { background: var(--cream-card); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; display: grid; grid-template-columns: 1fr 1.4fr; }
.contact-photo { position: relative; min-height: 520px; }
.contact-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.contact-form { padding: 54px 54px 54px 44px; display: flex; flex-direction: column; gap: 16px; }
/* DSGVO-Einwilligung */
.consent-check { display: flex; align-items: flex-start; gap: 10px; }
.consent-check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--terra); flex: 0 0 auto; }
.consent-check label { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.consent-check a { color: var(--terra-deep); text-decoration: underline; }
.contact-form h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; }
.contact-form > p.lead { font-size: 16px; line-height: 1.62; color: var(--muted); margin-bottom: 6px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field label { font-weight: 600; font-size: 12.5px; letter-spacing: .4px; text-transform: uppercase; color: var(--ink); }
.field-hint { font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 2px; }
.field input, .field textarea, .field select {
  font-family: inherit; font-size: 15px; color: var(--ink);
  background: #fff; border: 1px solid var(--border-soft); border-radius: 8px;
  padding: 14px 16px; width: 100%; transition: border-color .2s ease, box-shadow .2s ease;
}
/* Dropdowns exakt wie die übrigen Formularfelder (Browser rendert select sonst
   eigenständig: andere Höhe, eigener Pfeil). Pfeil als SVG-Hintergrund. */
.field select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  height: 48px; padding-right: 44px; line-height: 1.2; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236e655a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.field input { height: 48px; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--terra); box-shadow: 0 0 0 3px rgba(204,107,69,.14); }
.field input::placeholder, .field textarea::placeholder { color: #a79e90; }
.form-foot { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 6px; }
.form-foot .note { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
/* Erfolgsmeldung nach dem Absenden */
.form-status { display: flex; align-items: flex-start; gap: 10px; background: #edf3ee; border: 1px solid #cbdccd; border-radius: 10px; padding: 13px 16px; font-size: 14.5px; font-weight: 500; color: #3d5a44; line-height: 1.5; }
.form-status::before { content: "✓"; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: #4f8a5b; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; margin-top: 1px; }
.form-status[hidden] { display: none; }
/* Fehlerfall (z. B. Pflichtfeld fehlt oder Versand klemmt) */
.form-status.is-error { background: #fbeceb; border-color: #e6bdb9; color: #8d2b22; }
.form-status.is-error::before { content: "!"; background: #c0392b; }

/* Honeypot: fuer Menschen unsichtbar, Bots fuellen es aus */
.hp-feld { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- News / Artikel-Karten ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card {
  background: var(--cream-card); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease;
}
.section--sand .card { background: var(--sand-card); border-color: var(--border-soft); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.card-img { aspect-ratio: 16 / 11; overflow: hidden; background: #b2a38c; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .card-img img { transform: scale(1.05); }
.card-body { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.card-meta { font-weight: 600; font-size: 12px; letter-spacing: .7px; color: var(--muted); text-transform: uppercase; }
.card-body h3 { font-size: 23px; line-height: 1.26; }
.card-body h3 a:hover { color: var(--terra-deep); }
.card-excerpt { font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.card-body .textlink { margin-top: auto; }

/* ---------- Newsletter ---------- */
.newsletter { background: var(--sage-light); text-align: center; padding: 100px 0; }
.newsletter .inner { max-width: 660px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 0 var(--gutter); }
.newsletter .eyebrow { color: var(--terra); }
.newsletter h2 { font-size: clamp(30px, 4.5vw, 44px); }
.newsletter p { font-size: 16.5px; line-height: 1.65; color: rgba(35,32,27,.8); }
.newsletter-form { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; padding-top: 12px; width: 100%; }
.newsletter-form input {
  flex: 1; min-width: 240px; max-width: 400px; font-family: inherit; font-size: 15.5px;
  background: #fff; border: 0; border-radius: 100px; padding: 16px 24px; color: var(--ink);
}
.newsletter-form input:focus { outline: none; box-shadow: 0 0 0 3px rgba(204,107,69,.25); }
/* Double-Opt-in-Bestätigung (nach Absenden) */
.nl-confirm { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 640px; margin: 0 auto; }
.nl-check { width: 58px; height: 58px; border-radius: 50%; background: var(--terra); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 28px; line-height: 1; box-shadow: 0 8px 22px rgba(204,107,69,.3); }
.nl-confirm h2 { font-size: clamp(26px, 4vw, 40px); }
.nl-confirm p { font-size: 16.5px; line-height: 1.65; color: rgba(35,32,27,.82); }
.nl-confirm p strong { color: var(--ink); }
.nl-confirm .nl-note { font-size: 14px; color: rgba(35,32,27,.6); }
.nl-confirm .nl-note a { color: var(--terra-deep); font-weight: 600; text-decoration: underline; cursor: pointer; }

/* ============================================================
   REISE BUCHEN – Buchungs-iFrames (IBE)
   ============================================================ */
.ibe-wrap { margin-top: 40px; }
.ibe-frame { width: 100%; border: 0; border-radius: var(--radius); background: #fff; display: block; box-shadow: var(--shadow-card); }
.booking-note { font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 12px; }
.chips a.chip { text-decoration: none; }
/* Anker-Sprünge: Überschrift nicht hinter Header + Sticky-Auswahlzeile (≈155px) verstecken */
#pauschalreisen, #versicherung, #sprachreisen { scroll-margin-top: 160px; }
@media (max-width: 900px) { #pauschalreisen, #versicherung, #sprachreisen { scroll-margin-top: 220px; } }
/* Großer, fetter roter Hinweis, wo die iFrame-Einbettung vom Anbieter blockiert wird */
.embed-alert { background: #fdecea; border: 3px solid #d0211a; border-radius: 14px; padding: 30px 32px; margin-top: 36px; box-shadow: 0 10px 30px rgba(208,33,26,.14); }
.embed-alert h3 { display: flex; align-items: center; gap: 12px; font-family: var(--font-body); font-weight: 800; font-size: clamp(19px, 2.4vw, 24px); text-transform: uppercase; letter-spacing: .3px; color: #c0121a; margin-bottom: 16px; }
.embed-alert .alert-ico { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: #d0211a; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; }
.embed-alert .alert-big { font-family: var(--font-head); font-weight: 700; font-size: clamp(22px, 3.4vw, 30px); line-height: 1.25; color: #b01018; margin-bottom: 16px; }
.embed-alert p { font-size: 15px; line-height: 1.6; color: #7c2b21; margin-bottom: 10px; }
.embed-alert p:last-of-type { margin-bottom: 0; }
.embed-alert strong { color: #a01f12; }
.embed-alert .btn { margin-top: 20px; }

/* ============================================================
   FERIEN-HINWEIS
   ============================================================ */
/* ---------- Google-Bewertungen (Layout wie Referenz: 25% Summary + slidende Karten) ---------- */
.greviews { display: grid; grid-template-columns: 25% 1fr; gap: 32px; align-items: center; }

/* Linke Spalte: Gesamtbewertung */
.gr-summary { text-align: center; }
.gr-word { font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: .6px; font-size: 17px; color: var(--ink); margin-bottom: 10px; }
.gr-score { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 8px; }
.gr-score .num { font-family: var(--font-head); font-weight: 600; font-size: 34px; line-height: 1; color: var(--ink); }
.gr-stars { color: #fbbc05; letter-spacing: 2px; font-weight: 600; white-space: nowrap; }
.gr-summary .gr-stars { font-size: 22px; }
.gr-count { font-size: 14px; color: var(--muted); margin-bottom: 16px; }
.gr-glogo { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; font-family: var(--font-body); font-weight: 700; font-size: 20px; letter-spacing: -.4px; text-decoration: none; }
.gr-glogo:hover { opacity: .78; }
.gr-glogo .g-b { color: #4285f4; } .gr-glogo .g-r { color: #ea4335; } .gr-glogo .g-y { color: #fbbc05; } .gr-glogo .g-g { color: #34a853; }
.gr-glogo .gr-glabel { display: block; color: var(--muted); font-weight: 500; font-size: 13.5px; letter-spacing: 0; }

/* Rechte Spalte: Slider */
.gr-slider { position: relative; min-width: 0; }
.gr-track {
  display: flex; flex-wrap: nowrap; align-items: stretch; gap: 24px;
  overflow-x: auto; overflow-y: hidden; scroll-behavior: auto;
  scroll-snap-type: x proximity; -ms-overflow-style: none; scrollbar-width: none;
}
.gr-track::-webkit-scrollbar { display: none; }
.gr-card {
  flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start;
  background: var(--cream-card); border: 1px solid var(--border-soft); border-radius: 10px;
  padding: 26px; display: flex; flex-direction: column; gap: 14px;
}
.gr-card-head { display: flex; align-items: center; gap: 12px; }
.gr-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: #b8a890; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; font-size: 17px; }
.gr-card-head .name { font-weight: 600; font-size: 15px; line-height: 1.3; }
.gr-card-head .when { font-size: 12.5px; color: var(--muted); }
.gr-card .gr-stars { font-size: 15px; }
.gr-text { margin: 0; flex: 1; font-size: 15px; line-height: 1.6; color: var(--ink); }
.gr-text.is-clamped { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.gr-more { margin-top: auto; align-self: flex-start; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--terra-deep); text-decoration: underline; }
.gr-more:hover { opacity: .75; }

/* Pfeile */
.gr-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  background: #fff; border: 1px solid var(--border-soft); box-shadow: var(--shadow-card);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; color: var(--ink); transition: opacity .2s ease;
}
.gr-nav:hover { background: var(--cream-card); }
.gr-prev { left: -21px; } .gr-next { right: -21px; }
.gr-nav.is-off { opacity: 0; pointer-events: none; }

@media (max-width: 1080px) {
  .greviews { grid-template-columns: 1fr; gap: 26px; }
  .gr-card { flex-basis: calc((100% - 24px) / 2); }
  .gr-prev { left: 2px; } .gr-next { right: 2px; }
}
@media (max-width: 760px) {
  .gr-card { flex-basis: 86%; padding: 22px; }
  .gr-nav { width: 38px; height: 38px; }
}

/* ---------- Platzhalter (Bild / Video) ---------- */
.ph-media {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; text-align: center;
  background: repeating-linear-gradient(45deg, #d8d8d8 0 18px, #cfcfcf 18px 36px);
  border: 6px solid #d0211a; border-radius: 12px; padding: 40px 26px; min-height: 320px;
}
.ph-media .ph-ico { font-size: 40px; line-height: 1; }
.ph-media .ph-title {
  font-family: var(--font-body); font-weight: 800; text-transform: uppercase;
  letter-spacing: .5px; font-size: clamp(20px, 2.6vw, 30px); color: #c0121a; margin: 0;
}
.ph-media .ph-note { font-size: 14.5px; line-height: 1.55; color: #7c2b21; max-width: 46ch; margin: 0; }
.contact-photo.ph-media { min-height: 520px; border-radius: 0; }
.ph-media--video { aspect-ratio: 16 / 9; min-height: 0; padding: 28px 22px; }

/* Video-Sektion: Text und Reel liegen in einer gemeinsamen Karte.
   Ein 9:16-Video ist zwangsläufig hoch; steht es frei neben kurzem Text,
   entsteht oben und unten Leerraum. Deshalb bestimmt das Video die Höhe der
   Karte, sitzt bündig an deren Kanten, und der Text wird darin mittig gesetzt –
   der Raum um den Text ist damit Innenabstand einer Fläche statt Leere. */
/* Beiges Band ueber die volle Breite. Der Text laeuft dadurch in der normalen
   Content-Spur (.wrap) und schliesst links buendig mit allen anderen Sektionen ab. */
/* Eigener heller Ton fuer den Streifen: nur so entsteht eine Kante, ueber die
   das Reel oben und unten sichtbar hinausragen kann. Die Sektion drumherum
   bleibt der normale Seitenhintergrund. */
.video-band { background: var(--cream); border-block: 1px solid var(--border); }
.video-split {
  display: grid; grid-template-columns: 1fr 345px; gap: 56px; align-items: center;
  padding-block: 44px;
}
.video-content { padding: 0; }
.video-content h2 { margin-bottom: 18px; }
.video-section { padding-block: 100px; background: var(--cream-card); }

.video-points { list-style: none; margin: 22px 0 28px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.video-points li {
  position: relative; padding-left: 30px; font-size: 15.5px; line-height: 1.55; color: var(--muted);
}
.video-points li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--terra);
}

/* Das Reel ragt oben und unten aus der beigen Flaeche heraus – dadurch hebt es
   sich ab und die Sektion wirkt nicht wie ein hoher, leerer Kasten. */
.video-frame {
  position: relative; aspect-ratio: 9 / 16; width: 100%;
  margin-block: -80px; border-radius: 18px; overflow: hidden;
  background: #14100c; box-shadow: 0 26px 60px rgba(35, 32, 27, .30);
}
.video-frame .video-poster,
.video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-frame video { background: #14100c; }
.video-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 78px; height: 78px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.94); box-shadow: 0 10px 30px rgba(0,0,0,.3);
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease, background .2s ease;
}
.video-play span {
  width: 0; height: 0; margin-left: 5px;
  border-left: 22px solid var(--terra); border-top: 14px solid transparent; border-bottom: 14px solid transparent;
}
.video-play:hover { background: #fff; transform: translate(-50%, -50%) scale(1.07); }
.video-frame.is-playing .video-poster, .video-frame.is-playing .video-play { display: none; }
.video-content h2 { font-size: clamp(30px, 3.6vw, 46px); margin: 14px 0 20px; }
.video-content .lead { font-size: 17px; line-height: 1.65; color: var(--muted); margin-bottom: 14px; }
.video-content > p:last-child { font-size: 16px; line-height: 1.65; color: var(--muted); }
@media (max-width: 900px) {
  .video-split { grid-template-columns: 1fr; gap: 30px; padding-block: 40px; }
  /* Auf schmalen Screens kein Ueberstand – das Reel sitzt sauber in der Flaeche. */
  .video-frame { max-width: 300px; margin-inline: auto; margin-block: 0; border-radius: 14px; }
}

.holiday-notice { background: var(--sand-card); border: 1px solid var(--border-soft); border-left: 4px solid var(--terra); border-radius: 12px; padding: 22px 26px; display: flex; gap: 16px; align-items: flex-start; }
.holiday-notice .hn-ico { flex: 0 0 auto; font-size: 22px; line-height: 1.35; }
.holiday-notice h3 { font-family: var(--font-body); font-weight: 700; font-size: 16px; color: var(--ink); margin-bottom: 10px; }
.holiday-notice ul { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.holiday-notice li { font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.holiday-notice li strong { color: var(--ink); }
.holiday-notice .hn-flex { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0; }

/* ============================================================
   AKKORDEON (Über uns – Leistungen)
   ============================================================ */
.accordion { max-width: 880px; }
/* Als abgesetzte Karte (hebt sich von der nächsten Sektion ab) */
.accordion--panel { background: var(--cream-card); border: 1px solid var(--border); border-radius: 16px; padding: 6px 34px; box-shadow: var(--shadow-card); }
.accordion--panel .acc-item:first-child { border-top: 0; }
.accordion--panel .acc-item:last-child { border-bottom: 0; }
.acc-item { border-bottom: 1px solid var(--border); }
.acc-item:first-child { border-top: 1px solid var(--border); }
.acc-head { width: 100%; background: none; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; text-align: left; font-family: var(--font-head); font-weight: 500; font-size: clamp(19px, 2.4vw, 23px); color: var(--ink); }
.acc-head:hover { color: var(--terra-deep); }
.acc-ico { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--border-soft); display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; color: var(--terra-deep); transition: transform .28s ease, background .2s ease, color .2s ease; }
.acc-item.open .acc-ico { transform: rotate(45deg); background: var(--terra); border-color: var(--terra); color: #fff; }
.acc-body { overflow: hidden; max-height: 0; transition: max-height .32s ease; }
.acc-body p { padding: 0 60px 26px 0; font-size: 15.5px; line-height: 1.7; color: var(--muted); }
.acc-body a { color: var(--terra-deep); text-decoration: underline; }
.acc-item.open .acc-body { max-height: 320px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--sage); color: #fff; padding: 96px 0 40px; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; align-items: start; }
.footer-brand { display: flex; flex-direction: column; gap: 18px; }
.footer-brand h3 { font-family: var(--font-head); font-weight: 600; color: #fff; font-size: 28px; margin: 0; line-height: 1; }
.footer-brand p { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.9); margin: 0; }
.footer-brand .phone { font-weight: 600; font-size: 17px; }
.footer-brand a { color: #fff; }
.footer-brand a:hover { text-decoration: underline; }
.footer-col h4 { font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: #fff; margin-bottom: 18px; }
.footer-col a, .footer-col p { display: block; font-size: 15px; color: rgba(255,255,255,.9); margin-bottom: 12px; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-rule { height: 1px; background: rgba(255,255,255,.14); margin: 56px 0 32px; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13.5px; color: rgba(255,255,255,.92); }
.footer-bottom nav { display: flex; gap: 28px; flex-wrap: wrap; }
.footer-bottom a:hover { text-decoration: underline; }

/* ============================================================
   SUBPAGE PAGE-HEADER (Hero mit Bild)
   ============================================================ */
.page-header { position: relative; min-height: 520px; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; overflow: hidden; padding: 140px var(--gutter) 60px; }
.page-header img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-header::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,18,15,.68), rgba(13,18,15,.52)); }
.page-header .inner { position: relative; z-index: 1; max-width: 920px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.page-header h1 { color: #fff; font-size: clamp(38px, 6vw, 68px); }
.page-header p { font-size: 18px; line-height: 1.58; color: rgba(255,255,255,.92); max-width: 720px; }
.page-header .eyebrow { color: var(--gold); }

/* ============================================================
   BLOG-ÜBERSICHT
   ============================================================ */
.filter-bar { background: var(--cream); border-bottom: 1px solid var(--border); padding: 16px 0; position: sticky; top: 78px; z-index: 500; }
.filter-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { border: 1px solid var(--border); background: none; color: var(--ink); border-radius: 100px; padding: 10px 18px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all .2s ease; }
.chip:hover { border-color: var(--ink); }
.chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.search { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--border); border-radius: 100px; padding: 12px 20px; width: 360px; max-width: 100%; }
.search img { width: 18px; height: 18px; opacity: .6; }
.search input { border: 0; background: none; font-family: inherit; font-size: 15px; color: var(--ink); width: 100%; }
.search input:focus { outline: none; }

/* Featured Beiträge (abwechselnd) */
.featured-list { display: flex; flex-direction: column; }
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; padding: 72px 0; border-top: 1px solid var(--border); }
.feature:first-child { border-top: 0; padding-top: 0; }
.feature--rev .feature-media { order: 2; }
.feature-media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; }
.feature-media img { width: 100%; height: 100%; object-fit: cover; }
.feature-body { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.feature-badge { background: var(--sage); color: var(--ink); border-radius: 100px; padding: 7px 14px; font-size: 11.5px; font-weight: 600; letter-spacing: .9px; }
.feature-meta { font-weight: 600; font-size: 12px; letter-spacing: .7px; color: var(--muted); text-transform: uppercase; }
.feature-body h2 { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.18; }
.feature-body h2 a:hover { color: var(--terra-deep); }
.feature-body p { font-size: 17px; line-height: 1.72; color: var(--muted); }
.byline { display: flex; align-items: center; gap: 14px; padding-top: 6px; }
.byline img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.byline .name { font-weight: 600; font-size: 15px; }
.byline .role { font-size: 13px; color: var(--muted); }

.load-more-wrap { display: flex; justify-content: center; padding-top: 48px; }
#loadMore.is-done { opacity: .5; pointer-events: none; }
/* Sanftes Einblenden nachgeladener Beiträge */
@keyframes cardIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.card--enter { animation: cardIn .5s cubic-bezier(.16,.84,.44,1) both; }
@media (prefers-reduced-motion: reduce) { .card--enter { animation: none; } }

/* ============================================================
   BLOG-ARTIKEL (Einzelansicht)
   ============================================================ */
.article-head { text-align: center; padding: 80px 40px 52px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.breadcrumb { font-size: 14px; font-weight: 500; color: var(--muted); }
.breadcrumb a:hover { color: var(--terra-deep); }
.article-badge { background: var(--sage); color: var(--ink); border-radius: 100px; padding: 7px 14px; font-size: 11.5px; font-weight: 600; letter-spacing: .9px; }
.article-head h1 { font-size: clamp(34px, 5vw, 58px); line-height: 1.14; max-width: 1000px; }
.article-head .dek { font-size: 20px; line-height: 1.65; color: var(--muted); max-width: 820px; }
.article-byline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; padding-top: 8px; font-size: 14.5px; }
.article-byline img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.article-byline .name { font-weight: 600; }
.article-byline .meta { color: var(--muted); }
.article-hero-img { max-width: 1240px; margin: 0 auto; padding: 0 40px; }
.article-hero-img figure { margin: 0; }
.article-hero-img img { width: 100%; height: auto; max-height: 680px; object-fit: cover; border-radius: 14px; }
.article-hero-img figcaption, .figc { font-size: 13.5px; color: var(--muted); text-align: center; margin-top: 14px; }
.prose { max-width: 800px; margin: 0 auto; padding: 80px 40px 40px; }
.prose > * { margin-bottom: 26px; }
.prose > *:last-child { margin-bottom: 0; }
.prose p { font-size: 17.5px; line-height: 1.85; color: var(--muted); }
.prose p.intro { font-size: 19.5px; line-height: 1.78; color: var(--ink); }
/* mehr Luft über Zwischenüberschriften, Bildern und Zitaten */
.prose h2 { font-size: clamp(26px, 3vw, 32px); line-height: 1.26; margin-top: 46px; }
.prose blockquote { margin: 20px 0; border-left: 3px solid var(--sage); padding: 10px 0 10px 26px; }
.prose .article-cta { margin-top: 24px; }
.prose blockquote p { font-family: var(--font-head); font-weight: 400; font-size: 27px; line-height: 1.45; color: var(--ink); }
.prose figure { margin: 34px 0 26px; }
.prose figure img { width: 100%; border-radius: var(--radius); }
.prose ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.prose ul li { position: relative; padding-left: 22px; font-size: 17px; line-height: 1.75; color: var(--muted); }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--sage); }
.article-cta { background: var(--sand); border: 1px solid var(--border-soft); border-radius: 14px; padding: 36px 40px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.article-cta h3 { font-size: 26px; }
.article-cta p { font-size: 16px; line-height: 1.7; color: var(--muted); }

.share-author { max-width: 800px; margin: 0 auto; padding: 48px 40px 100px; display: flex; flex-direction: column; gap: 40px; }
.share { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 32px; }
.share .label { font-weight: 600; font-size: 12px; letter-spacing: 1px; color: var(--muted); text-transform: uppercase; margin-right: 4px; }
.share a { border: 1px solid var(--border); border-radius: 100px; padding: 9px 16px; font-size: 13.5px; font-weight: 500; transition: all .2s ease; }
.share a:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.author-box { background: var(--cream-card); border: 1px solid var(--border); border-radius: 14px; padding: 32px 36px; display: flex; gap: 28px; align-items: center; }
.author-box img { width: 140px; height: 140px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.author-box .eyebrow { color: var(--sage); font-size: 11.5px; margin-bottom: 10px; }
.author-box h3 { font-size: 26px; margin-bottom: 10px; }
.author-box p { font-size: 15.5px; line-height: 1.68; color: var(--muted); margin-bottom: 10px; }

/* ============================================================
   TERMIN-SEITE
   ============================================================ */
.termin-intro { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.termin-intro h2 { font-size: clamp(30px, 4.4vw, 48px); margin: 14px 0; }
.termin-intro p { font-size: 17px; line-height: 1.65; color: var(--muted); }
/* 3 Schritte in 3 Spalten – offen, ohne weißen Kasten */
.steps-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-bottom: 64px; }
.step-card { background: transparent; border: 0; border-radius: 0; padding: 0; }
.step-card .step-n { width: 46px; height: 46px; border-radius: 50%; background: var(--terra); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-size: 20px; margin-bottom: 18px; }
.step-card h3 { font-size: 21px; margin-bottom: 8px; }
.step-card p { font-size: 15px; line-height: 1.6; color: var(--muted); }
/* Formular mittig, mittlere Breite – behält Hintergrund-Karte */
/* Termin-Seite insgesamt auf schmalere Spur (überschreibt die Content-Breite
   nur für diesen Bereich – Schritte, Formular und Kontakte laufen bündig). */
.termin-narrow { --content: 1040px; }

.termin-form-card { background: var(--cream-card); border: 1px solid var(--border); border-radius: 18px; padding: 48px; max-width: 780px; margin: 0 auto; }
.termin-form-card h3 { font-size: 26px; margin-bottom: 6px; }
.termin-form-card > p.lead { color: var(--muted); font-size: 15.5px; margin-bottom: 24px; }
.termin-form { display: flex; flex-direction: column; gap: 18px; }
/* Kontakt-Infos unter dem Formular */
.termin-contacts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 780px; margin: 44px auto 0; }
.termin-contacts .tc { text-align: center; }
.termin-contacts .k { font-weight: 600; font-size: 12px; letter-spacing: .7px; text-transform: uppercase; color: var(--sage); margin-bottom: 6px; }
.termin-contacts p { font-size: 15px; color: var(--ink); line-height: 1.5; }
.termin-contacts a { color: var(--terra-deep); }
.termin-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.termin-chip { position: relative; }
.termin-chip input { position: absolute; opacity: 0; }
.termin-chip span { display: block; border: 1px solid var(--border-soft); border-radius: 100px; padding: 10px 18px; font-size: 14px; cursor: pointer; transition: all .2s ease; }
.termin-chip input:checked + span { background: var(--terra); border-color: var(--terra); color: #fff; }

/* ============================================================
   RECHTLICHE SEITEN / 404
   ============================================================ */
.legal { max-width: 820px; margin: 0 auto; padding: clamp(56px, 8vw, 100px) 40px; }
.legal h1 { font-size: clamp(32px, 5vw, 48px); margin-bottom: 12px; }
.legal .eyebrow { margin-bottom: 16px; }
.legal h2 { font-size: 24px; margin: 40px 0 12px; }
.legal h3 { font-family: var(--font-body); font-weight: 600; font-size: 17px; margin: 24px 0 8px; }
.legal p, .legal li { font-size: 16px; line-height: 1.7; color: var(--muted); margin-bottom: 14px; }
.legal a { color: var(--terra-deep); }
.legal a:hover { text-decoration: underline; }
.legal-lead { font-size: 17.5px; line-height: 1.6; color: var(--ink); margin-bottom: 28px; }
.legal-note { background: var(--sand); border-left: 3px solid var(--terra); border-radius: 0 8px 8px 0;
  padding: 12px 18px; font-size: 15px; margin-bottom: 26px; }
.legal-stand { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 15px; }
.legal .placeholder-note { background: var(--sand); border: 1px solid var(--border-soft); border-radius: 10px; padding: 16px 20px; font-size: 14.5px; color: var(--ink); }

.notfound { min-height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 100px var(--gutter); }
.notfound .inner { max-width: 560px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.notfound .code { font-family: var(--font-head); font-size: clamp(90px, 18vw, 160px); line-height: 1; color: var(--sage-light); }
.notfound h1 { font-size: clamp(28px, 4vw, 40px); }
.notfound p { font-size: 17px; color: var(--muted); line-height: 1.6; }
.notfound .btn-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; padding-top: 8px; }

/* ============================================================
   ÜBER UNS – spezifische Abschnitte
   ============================================================ */
/* Geschichte: Text links (inkl. Zitat), sauberes Bild rechts mit kleinem Badge */
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.story-text h2 { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.06; margin: 14px 0 22px; }
.story-text p { font-size: 16.5px; line-height: 1.72; color: var(--muted); margin-bottom: 16px; }
.story-quote-inline { margin: 26px 0 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--sage); }
.story-quote-inline p { font-family: var(--font-head); font-weight: 400; font-size: 24px; line-height: 1.4; color: var(--ink); margin: 0; }
.story-media { position: relative; }
.story-media img { width: 100%; border-radius: var(--radius); aspect-ratio: 11 / 10; object-fit: cover; }
.story-media .badge-pill { position: absolute; left: 20px; bottom: 20px; }

/* Zahlen-Band */
.stats-band { background: var(--sage); color: #fff; padding: 100px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.stat { padding-right: 24px; }
.stat .num { font-family: var(--font-head); font-size: clamp(40px, 5vw, 56px); line-height: 1; color: var(--sage-light); margin-bottom: 8px; }
.stat h3 { color: #fff; font-family: var(--font-body); font-weight: 600; font-size: 16px; margin-bottom: 10px; }
.stat p { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.9); }

/* Unser Büro: Überschrift + Fließtext oben, Bild-Mosaik, Infos + Button unten */
.office-media { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin: 52px 0 44px; }
.office-media .office-big, .office-stack { height: 520px; }
.office-media .office-big { position: relative; border-radius: var(--radius); overflow: hidden; }
.office-media .office-big img { width: 100%; height: 100%; object-fit: cover; }
.office-stack { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; }
.office-tile { position: relative; border-radius: var(--radius); overflow: hidden; }
.office-tile img { width: 100%; height: 100%; object-fit: cover; }
.office-media .badge-pill { position: absolute; left: 16px; bottom: 16px; }
.office-foot { border-top: 1px solid var(--border); padding-top: 40px; display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.office-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; flex: 1; }
.office-info .k { font-weight: 600; font-size: 12px; letter-spacing: .7px; text-transform: uppercase; color: var(--sage); margin-bottom: 8px; }
.office-info p { font-size: 15.5px; line-height: 1.55; color: var(--ink); }

/* Werte */
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.value-card { background: var(--sand-card); border: 1px solid var(--border-soft); border-radius: 12px; padding: 34px 32px; }
.value-card .num { font-family: var(--font-head); font-size: 26px; color: var(--terra); margin-bottom: 14px; }
.value-card h3 { font-size: 24px; margin-bottom: 10px; }
.value-card p { font-size: 15px; line-height: 1.6; color: var(--muted); }

/* Team – alternierende Reihen */
.team-alt { display: flex; flex-direction: column; gap: 90px; }
.person-row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.person-row--rev .person-row-media { order: 2; }
.person-row-media img { width: 100%; border-radius: var(--radius); aspect-ratio: 4 / 4.6; object-fit: cover; }
.person-row-body h3 { font-size: clamp(28px, 3.4vw, 34px); margin: 6px 0 6px; }
.person-row-body .person-role { margin-bottom: 16px; }
.person-row-body p.bio { font-size: 16px; line-height: 1.72; color: var(--muted); margin-bottom: 14px; }
.person-row-quote { font-family: var(--font-head); font-size: 22px; line-height: 1.4; color: var(--ink); margin: 20px 0; }
.person-row-body .k { font-weight: 600; font-size: 12px; letter-spacing: .8px; text-transform: uppercase; color: var(--sage); margin: 20px 0 10px; }

/* ============================================================
   MOBILE / RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .expertise-grid { grid-template-columns: 1fr; gap: 40px; }
  .expertise-media { min-height: 420px; }
  .contact-card { grid-template-columns: 1fr; }
  .contact-photo { min-height: 320px; }
  .footer-top { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .person-body .tags { min-height: 0; }
}

@media (max-width: 900px) {
  :root { --header-h: 80px; }
  .header { display: flex; justify-content: space-between; }
  .brand img { height: 64px; width: 64px; }
  /* Burger 10px nach rechts ziehen -> sichtbare Striche bündig mit Content-Kante */
  .burger { display: flex; margin-right: -10px; }
  /* Mobiles Menü: Dropdown unter dem Sticky-Header (Umsetzung nach Dr. Achenbach) */
  .nav {
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--cream);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px clamp(20px, 5vw, 40px) 22px;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 20px 44px rgba(35, 37, 27, .16);
    opacity: 0;
    transform: translateY(-8px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
    z-index: 99;
  }
  .nav.open {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
  .nav-links { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav-link { color: var(--ink) !important; font-size: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); }
  .nav-link::after { display: none; }
  .nav-links .nav-link:last-child { border-bottom: 0; }
  .header--over:not(.scrolled) .nav-link { color: var(--ink) !important; }
  /* Sprachwechsel: im Menue die Textvariante aus, dafuer die Flagge neben dem Burger */
  .nav-actions { width: 100%; flex-direction: column; align-items: stretch; gap: 0; }
  .nav-actions .lang-switch { display: none; }
  .lang-switch--kompakt { display: inline-flex; margin-left: auto; margin-right: 16px; }
  .lang-switch--kompakt .flag { width: 28px; }
  body.nav-open .header--over .flag { box-shadow: 0 0 0 1px rgba(35,32,27,.22); }
  .nav-cta { display: inline-flex; margin-top: 12px; justify-content: center; padding: 14px 24px; font-size: 16px; }
  /* Header wird solide, sobald das Menü offen ist – Bar + Dropdown wirken verbunden */
  body.nav-open .header--over { background: var(--cream); color: var(--ink); border-bottom-color: var(--border); box-shadow: 0 6px 22px rgba(35,32,27,.06); }
  body.nav-open .header--over .brand img { filter: none; }
  .head-split { flex-direction: column; align-items: flex-start; gap: 16px; }
  .team-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .quotes { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
  .usp-grid { grid-template-columns: 1fr 1fr; gap: 32px 0; }
  .usp { padding: 4px 24px; }
  .usp:nth-child(3)::before, .usp-grid .usp:nth-child(odd)::before { display: none; }
  .mosaic-row--split, .mosaic-row--thirds, .mosaic-row--halves { grid-template-columns: 1fr; }
  .mosaic-col { grid-template-rows: none; }
  .tile--tall { min-height: 320px; }
  .feature { grid-template-columns: 1fr; gap: 28px; }
  .feature--rev .feature-media { order: 0; }
  .contact-form { padding: 40px 28px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .story-grid { grid-template-columns: 1fr; gap: 40px; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .office-media { grid-template-columns: 1fr; }
  .office-media .office-big, .office-stack { height: auto; }
  .office-media .office-big, .office-tile { aspect-ratio: 16 / 10; }
  .office-foot { flex-direction: column; align-items: stretch; }
  .office-info { grid-template-columns: 1fr 1fr; width: 100%; }
  .values-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .steps-3 { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto 48px; }
  .termin-contacts { grid-template-columns: 1fr 1fr; }
  .person-row { grid-template-columns: 1fr; gap: 28px; }
  .person-row--rev .person-row-media { order: 0; }
  .person-row-media { max-width: 460px; }
}

@media (max-width: 560px) {
  .hero-content { padding: 120px var(--gutter) 80px; }
  .legal { padding-inline: var(--gutter); }
  .hero-arrow { display: none; }
  .field-row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .author-box { flex-direction: column; align-items: flex-start; text-align: left; }
  .prose { padding: 48px 22px 32px; }
  .article-head { padding: 60px 22px 40px; }
  .article-hero-img { padding: 0 22px; }
  .share-author { padding: 40px 22px 80px; }
  .article-cta { padding: 28px 24px; }
  .termin-form-card, .termin-aside { padding: 32px 26px; }
  .usp-grid { grid-template-columns: 1fr; }
  .usp + .usp::before { display: none; }
  .usp { padding: 16px 0; border-top: 1px solid rgba(35,32,27,.15); }
  .usp:first-child { border-top: 0; }
  .stats-grid { grid-template-columns: 1fr; gap: 26px; }
  .office-info { grid-template-columns: 1fr; }
  .termin-contacts { grid-template-columns: 1fr; }
  .termin-form-card { padding: 32px 26px; }
}

/* Vertikale Rhythmik auf Mobile – Werte nach Dr. Achenbach */
@media (max-width: 900px) {
  .section, .usp-band, .stats-band, .newsletter { padding-top: 32px; padding-bottom: 32px; }
  .cta-band { padding-top: 40px; padding-bottom: 40px; }
  .footer { padding-top: 48px; }
  .head-split { margin-bottom: 24px; }
  .section-head { margin-bottom: 24px; }
  .team-alt { gap: 40px; }
  .feature { padding: 32px 0; }
  .feature:first-child { padding-top: 0; }
  .featured-list .feature:last-child { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .hero-slide { transition: none; }
}

/* ---------- ALTCHA-Spamschutz (Statuszeile im Formular) ---------- */
.altcha-hinweis {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; line-height: 1.45; color: var(--muted);
  padding: 10px 0 2px;
}
.altcha-ico {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid var(--border-soft); position: relative;
  transition: background .25s ease, border-color .25s ease;
}
.altcha-hinweis[data-zustand="warte"] .altcha-ico {
  border-color: var(--sage); border-right-color: transparent;
  border-radius: 50%; animation: altcha-dreh .7s linear infinite;
}
@keyframes altcha-dreh { to { transform: rotate(360deg); } }
.altcha-hinweis[data-zustand="ok"] .altcha-ico { background: var(--sage); border-color: var(--sage); }
.altcha-hinweis[data-zustand="ok"] .altcha-ico::after {
  content: ""; position: absolute; left: 5px; top: 1.5px;
  width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.altcha-hinweis[data-zustand="fehler"] .altcha-ico { border-color: #c0392b; }
@media (prefers-reduced-motion: reduce) { .altcha-hinweis .altcha-ico { animation: none; } }

/* ---------- Externe Buchungsstrecke (Anbieter verbietet Einbettung) ---------- */
.ibe-extern {
  background: var(--cream-card); border: 1px solid var(--border); border-radius: 16px;
  padding: 44px 48px; display: grid; grid-template-columns: 1fr auto;
  gap: 40px; align-items: center;
}
.ibe-extern h3 { font-size: 26px; margin-bottom: 12px; }
.ibe-extern p { color: var(--muted); font-size: 16px; line-height: 1.65; max-width: 62ch; }
.ibe-extern-punkte { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ibe-extern-punkte li {
  background: var(--tag); border-radius: 100px; padding: 7px 15px;
  font-size: 13.5px; font-weight: 500; color: var(--ink);
}
.ibe-extern-aktion { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ibe-extern-note { font-size: 13px; color: var(--muted); max-width: 24ch; line-height: 1.45; }
@media (max-width: 900px) {
  .ibe-extern { grid-template-columns: 1fr; padding: 32px 26px; gap: 26px; }
  .ibe-extern-note { max-width: none; }
}

/* Hinweis unter den Öffnungszeiten */
.oz-hinweis { font-size: 13px; line-height: 1.5; opacity: .78; margin-top: 8px; }

/* ---------- Sprachhinweis + Direktmail im Team (nur DA-Seite genutzt) ---------- */
.person-lang { font-family: var(--font-body); font-weight: 500; font-size: .62em; color: var(--terra-deep); white-space: nowrap; }
.person-mail { font-size: 15px; margin: -4px 0 10px; }
.person-mail a { color: var(--terra-deep); }
.person-mail a:hover { text-decoration: underline; }