/* =============================================================
   DWP — Deutsche Wohlstandsplanung AG · Design System v1.0
   -------------------------------------------------------------
   Verwendung:
     <link rel="stylesheet" href="design-system/dwp.css">
     <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet">
   ============================================================= */

/* -------------------------------------------------------------
   1 · Design Tokens
   ------------------------------------------------------------- */
:root{
  /* — Farben · Papier & Tinte — */
  --bg:           #faf6ef;   /* Haupt-Hintergrund (warmes Off-White) */
  --paper:        #f5efe4;   /* Paper-Beige · Karten, Editorial */
  --paper-2:      #ece4d3;   /* Paper-Beige dunkler · Hover, Akzentflächen */
  --ink:          #1f1d1a;   /* Schrift · Headlines */
  --ink-soft:     #4a4640;   /* Schrift · Fließtext */
  --ink-muted:    #5f594d;   /* Schrift · Meta, Captions  (WCAG AA: 5.2:1 auf --bg) */
  --line:         #d9cfb9;   /* Trennlinien · prominent */
  --line-field:   #8a8071;   /* Rahmen von Formularfeldern (WCAG 1.4.11: 3.4:1 auf --bg) */
  --line-soft:    #e6dec9;   /* Trennlinien · subtil */

  /* — Akzente — */
  --accent:       oklch(0.50 0.06 128);  /* gedämpftes Olivgrün · Primary */
  --accent-2:     oklch(0.42 0.05 128);  /* Olivgrün dunkel · Hover */
  --accent-soft:  oklch(0.94 0.03 100);  /* Olivgrün hell · Flächen */
  --gold:         oklch(0.68 0.09 80);   /* Warm-Gold · für dunkle Flächen */

  /* — Dunkle Flächen (Footer, Hero) — */
  --dark:         #1a1816;
  --dark-2:       #2c2925;
  --dark-text:    #cfc6b4;
  --dark-text-2:  #9b9281;
  --dark-text-3:  #a59c8a;   /* WCAG AA: 5.4:1 auf --dark */
  --dark-text-hi: #f0e7d3;
  --gold-text:    #e7d9b8;   /* Eyebrow auf dunklen Flächen */
  --gold-em:      #f0e1bb;   /* Hervorhebung in Headlines auf dunkel */

  /* — Typografie — */
  --font-serif:   'Cormorant Garamond', Georgia, serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Type-Scale */
  --t-display:    clamp(36px, 4.6vw, 60px);  /* Hero Headlines (Serif) */
  --t-h1:         clamp(34px, 3.4vw, 48px);  /* Section Titles (Serif) */
  --t-h2:         30px;                       /* Card Headlines (Serif) */
  --t-h3:         22px;                       /* Lead-Text (Serif) */
  --t-quote:      30px;                       /* Quote-Text (Serif) */
  --t-num-xl:     42px;                       /* Hero-Zahlen (Serif) */
  --t-num-lg:     38px;                       /* Trust-Zahlen (Serif) */
  --t-body:       16px;                       /* Fließtext */
  --t-body-sm:    15px;                       /* Karten-Fließtext */
  --t-meta:       14px;
  --t-caption:    13px;
  --t-eyebrow:    12px;                       /* Mono Eyebrow */
  --t-eyebrow-sm: 11px;
  --t-utility:    12px;                       /* Utility Bar */

  /* Letter-Spacing */
  --ls-tight:     -.005em;  /* Headlines */
  --ls-default:   0;
  --ls-wide:      .04em;    /* Buttons, Caps */
  --ls-wider:     .12em;    /* Labels */
  --ls-widest:    .18em;    /* Eyebrow */
  --ls-mono:      .24em;    /* Mono-Eyebrow */
  --ls-hero:      .32em;    /* Hero-Eyebrow */

  /* — Layout — */
  --wrap-max:     1240px;
  --wrap-pad:     32px;

  /* Spacing-Skala */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-30: 120px;
  --sp-35: 140px;

  /* — Radien / Borders — */
  --radius-xs:    2px;       /* Buttons (sehr dezent) */
  --radius-pill:  999px;
  --border:       1px solid var(--line);
  --border-soft:  1px solid var(--line-soft);

  /* — Motion — */
  --ease:         cubic-bezier(.2,.6,.2,1);
  --t-fast:       .2s ease;
  --t-med:        .3s ease;
}

/* -------------------------------------------------------------
   2 · Reset & Basis
   ------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{ scroll-padding-top:104px; }
html,body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:var(--t-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

/* — Fokus-Indikator (WCAG 2.1 AA · 2.4.7 Focus Visible · 1.4.11 Non-Text Contrast 3:1) — */
:focus{outline:none}
:focus-visible{
  outline:2px solid var(--accent-2);
  outline-offset:3px;
  border-radius:2px;
}
/* Auf dunklen Flächen heller Fokusring */
.hero :focus-visible,
.lh-hero :focus-visible,
.lp-hero :focus-visible,
.booking-sec :focus-visible,
.lp-foot :focus-visible,
footer :focus-visible,
.booking :focus-visible,
.tools-card :focus-visible,
.contact-grid .r :focus-visible{
  outline-color:var(--gold-em);
}

/* — Skip-Link (WCAG 2.4.1 Bypass Blocks) — */
.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--ink); color:#fff;
  padding:12px 18px; font-size:14px; font-weight:500;
  z-index:1000;
  text-decoration:underline;
}
.skip-link:focus{ left:8px; top:8px; outline:2px solid var(--gold-em); outline-offset:2px; }

/* — Screenreader-only (WCAG 1.1.1, 2.4.4, 4.1.2) — */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* -------------------------------------------------------------
   3 · Layout-Container
   ------------------------------------------------------------- */
.wrap{
  max-width:var(--wrap-max);
  margin:0 auto;
  padding:0 var(--wrap-pad);
}

/* Section-Padding-Varianten */
.section          { padding: var(--sp-30) 0 100px; }
.section--lg      { padding: var(--sp-35) 0 var(--sp-30); }
.section--sm      { padding: var(--sp-12) 0; }
.section--paper   { background:var(--paper); border-top:var(--border-soft); border-bottom:var(--border-soft); }
.section--bg      { background:var(--bg); }

/* -------------------------------------------------------------
   4 · Typografie-Klassen
   ------------------------------------------------------------- */
.serif        { font-family:var(--font-serif); font-weight:400; }
.sans         { font-family:var(--font-sans); }
.mono         { font-family:var(--font-mono); }

.t-display{
  font-family:var(--font-serif); font-weight:400;
  font-size:var(--t-display); line-height:1.12;
  letter-spacing:var(--ls-tight); text-wrap:pretty;
}
.t-h1{
  font-family:var(--font-serif); font-weight:400;
  font-size:var(--t-h1); line-height:1.1;
  letter-spacing:var(--ls-tight);
}
.t-h1 em, .t-display em{
  font-style:italic; color:var(--accent-2); font-weight:500;
}
.t-h2{
  font-family:var(--font-serif); font-weight:500;
  font-size:var(--t-h2); line-height:1.1;
}
.t-lead{
  font-family:var(--font-serif); font-weight:500;
  font-size:var(--t-h3); line-height:1.4; color:var(--ink);
}
.t-body       { font-size:var(--t-body); line-height:1.65; color:var(--ink-soft); text-wrap:pretty; }
.t-body-sm    { font-size:var(--t-body-sm); line-height:1.6; color:var(--ink-soft); }
.t-meta       { font-size:var(--t-meta); color:var(--ink-soft); }
.t-caption    { font-size:var(--t-caption); color:var(--ink-muted); letter-spacing:var(--ls-wide); }

/* Eyebrow (Mono, Caps) */
.eyebrow{
  font-family:var(--font-mono);
  font-size:var(--t-eyebrow-sm);
  color:var(--accent-2);
  letter-spacing:var(--ls-mono);
  text-transform:uppercase;
  display:flex; align-items:center; gap:12px;
  margin-bottom:18px;
}
.eyebrow .num{ color:var(--ink-muted); }
.eyebrow--light{ color:var(--gold-text); font-size:var(--t-eyebrow); letter-spacing:var(--ls-hero); }
.eyebrow--light .ln{ height:1px; width:48px; background:var(--gold-text); display:inline-block; }

/* Numerische Zahlen-Anzeige */
.num-xl{
  font-family:var(--font-serif); font-weight:500;
  font-size:var(--t-num-xl); line-height:1; color:var(--ink);
}
.num-lg{
  font-family:var(--font-serif); font-weight:500;
  font-size:var(--t-num-lg); line-height:1; color:var(--ink);
}
.num-label{
  font-size:var(--t-eyebrow); color:var(--ink-muted);
  letter-spacing:var(--ls-wider); text-transform:uppercase; margin-top:var(--sp-2);
}

/* -------------------------------------------------------------
   5 · Utility Bar
   ------------------------------------------------------------- */
.util{
  border-bottom:var(--border-soft);
  background:var(--bg);
  font-size:var(--t-utility);
  color:var(--ink-muted);
  letter-spacing:var(--ls-wide);
}
.util .wrap{ display:flex; justify-content:space-between; align-items:center; height:36px; }
.util .left{ display:flex; gap:24px; }
.util .right{ display:flex; gap:20px; align-items:center; }
.util .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--accent); display:inline-block;
  margin-right:8px; vertical-align:middle;
}

/* -------------------------------------------------------------
   6 · Header / Navigation
   ------------------------------------------------------------- */
header.nav{
  position:sticky; top:0; z-index:30;
  background: rgba(250,246,239,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom:var(--border-soft);
}
header.nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:88px; position:relative; }

/* Mobile-Menü-Button (nur unter 1000px sichtbar) */
.nav-toggle{
  display:none; background:transparent;
  border:1px solid var(--line-field); color:var(--ink);
  width:44px; height:44px; align-items:center; justify-content:center;
  border-radius:var(--radius-xs); padding:0; cursor:pointer;
  transition:border-color var(--t-fast);
}
.nav-toggle:hover{ border-color:var(--ink); }
.nav-toggle .bars{ display:block; width:20px; height:14px; position:relative; }
.nav-toggle .bars::before,.nav-toggle .bars::after,.nav-toggle .bars span{
  content:''; position:absolute; left:0; right:0; height:1.5px; background:var(--ink);
  transition:transform var(--t-fast),opacity var(--t-fast),top var(--t-fast);
}
.nav-toggle .bars::before{ top:0; }
.nav-toggle .bars span{ top:6px; display:block; }
.nav-toggle .bars::after{ top:12px; }
.nav-toggle[aria-expanded="true"] .bars::before{ top:6px; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after{ top:6px; transform:rotate(-45deg); }
.nav-toggle[aria-expanded="true"] .bars span{ opacity:0; }
.brand{ display:flex; align-items:center; gap:14px; }
.brand img.logo{ height:52px; width:auto; display:block; }
nav.primary{ display:flex; gap:36px; align-items:center; }
nav.primary a{
  font-size:var(--t-meta); font-weight:500; color:var(--ink-soft);
  position:relative; padding:6px 0; letter-spacing:.02em;
  transition: color var(--t-fast);
}
nav.primary a:hover{ color:var(--ink); }
nav.primary a.active{ color:var(--ink); }
nav.primary a.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px;
  height:1px; background:var(--accent);
}
nav.primary a.ext{
  display:inline-flex; align-items:center; gap:6px;
}
nav.primary a.ext::after{
  content:''; width:8px; height:8px;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
  transform: rotate(45deg) translateY(1px);
  opacity:.55;
}
nav.primary a.ext:hover::after{ opacity:1; }

/* -------------------------------------------------------------
   7 · Buttons
   ------------------------------------------------------------- */
/* Outline / Ink */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  font-size:var(--t-caption); padding:10px 18px;
  border:1px solid var(--ink); color:var(--ink);
  border-radius:var(--radius-xs);
  letter-spacing:var(--ls-wide);
  cursor:pointer; background:transparent;
  transition: all var(--t-fast);
}
.btn:hover{ background:var(--ink); color:var(--bg); }

/* Solid Accent */
.btn--accent{
  background:var(--accent); color:#fff; border-color:var(--accent);
  padding:14px 22px; font-size:var(--t-meta);
}
.btn--accent:hover{ background:var(--accent-2); border-color:var(--accent-2); color:#fff; }

/* Ghost auf Dunkel */
.btn--on-dark{ border-color:#fff; color:#fff; }
.btn--on-dark:hover{ background:#fff; color:var(--ink); }

/* Pfeil-CTA (inline-link mit Kreis-Pfeil) */
.cta-arrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:var(--t-caption); font-weight:500; color:var(--ink);
  letter-spacing:var(--ls-wide);
  transition: gap var(--t-fast);
}
.cta-arrow:hover{ gap:16px; }
.cta-arrow .arr{
  width:28px; height:28px; border-radius:50%;
  background:var(--accent); color:#fff;
  display:grid; place-items:center; font-size:13px;
}

/* Linien-Pfeil (für dunkle Buttons) */
.btn-arr{ width:24px; height:1px; background:currentColor; position:relative; }
.btn-arr::after{
  content:''; position:absolute; right:0; top:-3px; width:7px; height:7px;
  border-top:1px solid currentColor; border-right:1px solid currentColor;
  transform:rotate(45deg);
}

/* -------------------------------------------------------------
   8 · Section Head (Eyebrow + Titel + Aside)
   ------------------------------------------------------------- */
.section-head{
  display:flex; justify-content:space-between; align-items:end;
  margin-bottom:var(--sp-14); gap:var(--sp-12);
}
.section-title{
  font-family:var(--font-serif); font-weight:400;
  font-size:var(--t-h1); line-height:1.1;
  color:var(--ink); max-width:680px;
  letter-spacing:var(--ls-tight);
}
.section-title em{ font-style:italic; color:var(--accent-2); }
.section-aside{ max-width:340px; color:var(--ink-soft); font-size:var(--t-body-sm); }

/* -------------------------------------------------------------
   9 · Karten
   ------------------------------------------------------------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.cards--2{ grid-template-columns:repeat(2,1fr); }
.cards--4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:var(--paper);
  border:var(--border-soft);
  padding:36px 32px 32px;
  display:flex; flex-direction:column;
  min-height:340px; position:relative;
  transition: all var(--t-med);
}
.card:hover{
  background:#fff; border-color:var(--line);
  transform:translateY(-2px);
}
.card .num{
  font-family:var(--font-mono); font-size:var(--t-eyebrow-sm);
  color:var(--ink-muted); letter-spacing:var(--ls-widest);
}
.card h3{
  font-family:var(--font-serif); font-weight:500;
  font-size:var(--t-h2); color:var(--ink);
  margin-top:54px; line-height:1.1;
}
.card p{
  margin-top:14px; color:var(--ink-soft);
  font-size:var(--t-body-sm); line-height:1.6; flex:1;
}
.card .cta{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:28px; padding-top:18px;
  border-top:var(--border-soft);
  font-size:var(--t-caption); font-weight:500; color:var(--ink);
  letter-spacing:var(--ls-wide); transition: gap var(--t-fast);
}
.card .cta:hover{ gap:16px; }
.card .cta .arr{
  width:28px; height:28px; border-radius:50%;
  background:var(--accent); color:#fff;
  display:grid; place-items:center; font-size:13px;
}
.card .glyph{
  position:absolute; top:32px; right:32px;
  font-family:var(--font-serif); font-style:italic;
  font-size:36px; color:var(--accent); font-weight:500;
}

/* -------------------------------------------------------------
   10 · Hero
   ------------------------------------------------------------- */
.hero{
  position:relative; height:680px; overflow:hidden;
  background:#0e1418;
}
.hero-img{
  position:absolute; inset:0;
  background-size:cover; background-position:center 35%;
}
.hero-img--default{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.15) 35%, rgba(0,0,0,.65) 95%),
    var(--hero-img, none);
}
.hero-content{
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-bottom:96px;
}
.hero-headline{
  font-family:var(--font-serif); font-weight:400;
  color:#fff; font-size:var(--t-display);
  line-height:1.12; letter-spacing:var(--ls-tight);
  max-width:1000px; text-wrap:pretty;
}
.hero-headline em{ font-style:italic; color:var(--gold-em); font-weight:500; }
.hero-meta{
  display:flex; gap:48px; margin-top:48px; align-items:flex-end;
  border-top:1px solid rgba(255,255,255,.18);
  padding-top:28px; max-width:880px;
}
.hero-meta .item .num{
  font-family:var(--font-serif); font-size:var(--t-num-xl);
  color:var(--gold-em); font-weight:500; line-height:1;
}
.hero-meta .item .lbl{
  font-size:var(--t-utility); color:rgba(255,255,255,.7);
  letter-spacing:var(--ls-wider); text-transform:uppercase; margin-top:8px;
}
.hero-scroll{
  position:absolute; right:32px; bottom:32px; z-index:3;
  color:rgba(255,255,255,.7); font-family:var(--font-mono);
  font-size:11px; letter-spacing:.2em;
  writing-mode:vertical-rl; transform:rotate(180deg);
  display:flex; align-items:center; gap:14px;
}
.hero-scroll::before{ content:''; width:1px; height:48px; background:rgba(255,255,255,.4); }

/* -------------------------------------------------------------
   11 · Editorial / Quote / Portrait
   ------------------------------------------------------------- */
.editorial-grid{ display:grid; grid-template-columns:1fr 1fr; gap:96px; align-items:start; }

.lead-line{
  font-family:var(--font-serif); font-style:italic; font-weight:500;
  font-size:34px; color:var(--ink); margin-bottom:36px; line-height:1.1;
}
.lead-line::after{
  content:''; display:block; width:48px; height:1px;
  background:var(--accent); margin-top:18px;
}
.copy-list{ display:flex; flex-direction:column; gap:22px; }
.copy-list p{ font-size:var(--t-body); line-height:1.65; color:var(--ink-soft); text-wrap:pretty; }
.copy-list p.lead{
  font-family:var(--font-serif); font-size:var(--t-h3);
  color:var(--ink); font-weight:500; line-height:1.4;
}
.copy-list p.q{
  border-left:2px solid var(--accent); padding-left:20px;
  color:var(--ink); font-style:italic;
}

/* Signatur */
.signature{ margin-top:36px; display:flex; flex-direction:column; gap:14px; }
.signature .grade{ font-family:var(--font-serif); font-style:italic; font-size:20px; color:var(--ink); }
.sig-mark{
  font-family:var(--font-serif); font-style:italic;
  font-size:34px; color:var(--ink); letter-spacing:-.01em;
  border-bottom:var(--border); padding-bottom:14px; width:max-content;
}
.sig-meta{ font-size:var(--t-caption); color:var(--ink-muted); letter-spacing:.06em; }

/* Quote-Block */
.quote-block{
  background:var(--bg); border:var(--border-soft);
  padding:36px 36px 32px; position:relative;
}
.quote-block .qmark{
  font-family:var(--font-serif); font-style:italic;
  font-size:80px; color:var(--accent); line-height:.6;
  position:absolute; top:24px; left:32px;
}
.quote-text{
  font-family:var(--font-serif); font-weight:400;
  font-size:var(--t-quote); line-height:1.2; color:var(--ink);
  padding-left:48px; text-wrap:pretty;
}
.quote-author{
  margin-top:24px; padding-left:48px;
  font-size:var(--t-utility); color:var(--ink-muted);
  letter-spacing:var(--ls-widest); text-transform:uppercase;
}

/* Portrait-Karte */
.portrait{
  aspect-ratio: 4/5;
  background:#2a2825 center/cover no-repeat;
  border:var(--border); position:relative; overflow:hidden;
}
.portrait::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
  pointer-events:none;
}
.portrait .pname{ position:absolute; left:24px; bottom:24px; color:#fff; z-index:2; }
.portrait .pname .n{ font-family:var(--font-serif); font-size:24px; font-weight:500; }
.portrait .pname .r{ font-size:var(--t-utility); letter-spacing:var(--ls-widest); text-transform:uppercase; opacity:.85; margin-top:4px; }

/* Booking-Bar (Dunkler CTA-Block) */
.booking{
  display:flex; align-items:center; gap:20px; justify-content:space-between;
  background:var(--ink); color:#fff; padding:20px 24px;
}
.booking .lbl{ font-size:var(--t-caption); letter-spacing:.06em; color:var(--dark-text); }
.booking .lbl strong{
  display:block; color:#fff;
  font-family:var(--font-serif); font-size:20px; font-weight:500;
  letter-spacing:0; margin-top:4px;
}

/* -------------------------------------------------------------
   12 · Trust-Strip
   ------------------------------------------------------------- */
.trust{ padding:48px 0; border-top:var(--border-soft); background:var(--bg); }
.trust .row{ display:grid; grid-template-columns:repeat(4,1fr); gap:48px; align-items:center; }
.trust .item{ display:flex; flex-direction:column; gap:6px; }
.trust .item .n{
  font-family:var(--font-serif); font-size:var(--t-num-lg);
  color:var(--ink); font-weight:500; line-height:1;
}
.trust .item .l{
  font-size:var(--t-utility); color:var(--ink-muted);
  letter-spacing:var(--ls-wider); text-transform:uppercase;
}

/* -------------------------------------------------------------
   13 · Footer
   ------------------------------------------------------------- */
footer{
  background:var(--dark); color:var(--dark-text);
  padding:80px 0 32px;
}
.foot-grid{
  display:grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap:48px; padding-bottom:56px; border-bottom:1px solid var(--dark-2);
}
.foot-brand img.logo{ height:48px; width:auto; display:block; filter:brightness(1.05); }
.foot-tag{ margin-top:24px; font-size:var(--t-meta); color:var(--dark-text-2); max-width:320px; line-height:1.6; }
.foot-col h5,
.foot-col .foot-h{
  font-family:var(--font-serif); font-size:18px; color:var(--dark-text-hi);
  font-weight:500; margin-bottom:18px;
}
.foot-col a{
  display:block; font-size:var(--t-meta); color:var(--dark-text-2);
  padding:6px 0; transition: color var(--t-fast);
}
.foot-col a:hover{ color:var(--dark-text-hi); }
.foot-bot{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:32px; font-size:var(--t-utility);
  color:var(--dark-text-3); letter-spacing:var(--ls-wide);
}
.foot-bot .legal{ display:flex; flex-wrap:wrap; gap:4px 32px; }
.foot-bot .legal a{ display:inline-block; padding:6px 0; }
.foot-bot .legal a:hover{ color:var(--dark-text-hi); }

/* -------------------------------------------------------------
   14 · Helfer / Utilities
   ------------------------------------------------------------- */
.hr-accent{ height:1px; background:var(--accent); width:48px; }
.hr-line{ height:1px; background:var(--line-soft); width:100%; }
.divider-vert{ width:1px; background:var(--line-soft); align-self:stretch; }

/* Sticky-Element (z.B. Portrait in Editorial) */
.sticky{ position:sticky; top:120px; }

/* -------------------------------------------------------------
   15 · Responsive
   ------------------------------------------------------------- */
@media (max-width:1000px){
  .cards{ grid-template-columns:1fr; }
  .editorial-grid{ grid-template-columns:1fr; gap:64px; }
  .sticky{ position:static; }
  .trust .row{ grid-template-columns:repeat(2,1fr); gap:32px; }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:32px; }
  .nav-toggle{ display:inline-flex; }
  nav.primary{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:0; align-items:stretch;
    background:var(--bg); border-bottom:var(--border);
    box-shadow:0 18px 40px rgba(0,0,0,.10); padding:8px 0;
  }
  nav.primary.open{ display:flex; }
  nav.primary a{ padding:14px 32px; font-size:16px; border-bottom:1px solid var(--line-soft); }
  nav.primary a:last-child{ border-bottom:none; }
  nav.primary a.active::after{ display:none; }
  .hero{ height:560px; }
  .hero-meta{ flex-wrap:wrap; gap:24px; }
  .section-head{ flex-direction:column; align-items:flex-start; }
}

@media (max-width:600px){
  .foot-grid{ grid-template-columns:minmax(0,1fr); gap:28px; }
  .foot-col,.foot-brand{ min-width:0; }
  main *{ overflow-wrap:break-word; }
  .booking{ flex-direction:column; align-items:stretch; gap:18px; padding:20px 16px; }
  .booking .btn,.booking a.btn{ width:100%; justify-content:center; flex-wrap:wrap; text-align:center; min-width:0; }
  .tools-card{ padding:28px 20px; }
  .cards{ grid-template-columns:minmax(0,1fr); }
  .card{ min-width:0; padding:28px 22px; }
  img,iframe{ max-width:100%; }
  .trust .row{ grid-template-columns:1fr; }
  .foot-bot{ flex-direction:column; align-items:flex-start; gap:12px; }
  h1,h2,h3{ overflow-wrap:break-word; }
}