/* =========================================================================
   Malla & Hossny GbR – Stylesheet
   Aus index.html ausgelagert. Zusammen mit index.html + assets/ hochladen.
   ========================================================================= */

/* =========================================================================
   Schriften – selbst gehostet (DSGVO: kein Google-Server-Kontakt)
   Dateien in assets/fonts/. „latin" deckt Deutsch inkl. ä ö ü ß ab,
   „latin-ext" lädt nur bei Bedarf nach.
   ========================================================================= */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/inter-400-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:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/inter-400-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:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/inter-500-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:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/inter-500-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:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/inter-600-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:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/inter-600-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:'Inter';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/inter-700-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:'Inter';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/inter-700-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:'Manrope';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/manrope-600-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:'Manrope';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/manrope-600-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:'Manrope';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/manrope-700-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:'Manrope';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/manrope-700-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:'Manrope';font-style:normal;font-weight:800;font-display:swap;
  src:url('fonts/manrope-800-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:'Manrope';font-style:normal;font-weight:800;font-display:swap;
  src:url('fonts/manrope-800-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;
}

/* =========================================================================
   Design-Tokens (aus dem Handoff)
   ========================================================================= */
:root {
  --bg:#FBFAF7; --surface:#FFFFFF;
  --ink:#22262B; --ink-muted:#5C5952; --ink-subtle:#77716A; --ink-faint:#A09A92;
  --placeholder:#ADA79F;
  --line:#ECE8E0; --line-card:#EFEBE3; --line-input:#EAE5DC; --line-hairline:#F3EFE8;
  --primary:#16325C; --primary-hover:#0E2440; --primary-soft:#EEF1F7;
  --accent:#B8862F; --accent-hover:#A0741F; --accent-light:#E0B85F; --accent-pale:#F0D79B;
  --accent-soft:#F7F0DF; --accent-ink:#8A6420;
  --dark:#12233D; --dark-surface:#F2EFE9; --star:#B8862F;
  --whatsapp:#1FA855; --whatsapp-hover:#178040;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Inter, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3 { font-family:Manrope, system-ui, sans-serif; font-weight:800; letter-spacing:-.03em; }
a { color:var(--primary); text-decoration:none; }
a:hover { color:var(--primary-hover); }
img { max-width:100%; }
input, select, textarea, button { font:inherit; color:inherit; }
::placeholder { color:var(--placeholder); }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline:2px solid rgba(22,50,92,.35); outline-offset:1px;
}
::-webkit-scrollbar { height:0; width:0; }

.wrap { max-width:1180px; margin:0 auto; }
.section { padding:clamp(52px,9vw,96px) clamp(16px,4vw,28px) 0; scroll-margin-top:112px; }
.eyebrow { font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.h2 { font-size:clamp(28px,4.8vw,42px); line-height:1.06; margin:12px 0 0; color:var(--primary); }
.h2--dark { color:#fff; }
.full-bleed { width:100vw; margin-left:calc(50% - 50vw); }

@keyframes rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

/* =========================================================================
   Header
   ========================================================================= */
.header {
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:7px clamp(16px,4vw,28px);
  background:rgba(251,250,247,.84);
  backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(236,232,224,.9);
}
.header__logo { height:82px; width:auto; display:block; flex:none; }
@media (max-width:560px) { .header__logo { height:64px; } }
.nav { display:flex; align-items:center; gap:clamp(14px,2.2vw,30px); margin-left:auto; }
.nav a {
  font-size:14.5px; font-weight:500; color:#45423D; white-space:nowrap;
  padding:6px 0; border-bottom:1.5px solid transparent;
}
.nav a:hover { color:var(--primary); border-bottom-color:var(--accent); }
.header__actions { display:flex; align-items:center; gap:8px; flex:none; }
.btn-call {
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 17px; border-radius:999px; background:var(--primary); color:#fff;
  font-weight:600; font-size:14px; white-space:nowrap;
}
.btn-call:hover { background:var(--primary-hover); color:#fff; }
.btn-call svg { width:15px; height:15px; flex:none; }
.burger {
  display:none; flex-direction:column; justify-content:center; gap:4.5px;
  width:42px; height:42px; padding:0 11px; border-radius:13px;
  border:1px solid var(--line); background:#fff; cursor:pointer;
}
.burger:hover { border-color:#D8CFBE; }
.burger span { display:block; height:1.8px; border-radius:2px; background:var(--primary); transition:transform .22s ease, opacity .18s ease; }
.burger.is-open span:nth-child(1) { transform:translateY(6.3px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity:0; }
.burger.is-open span:nth-child(3) { transform:translateY(-6.3px) rotate(-45deg); }

.mobile-menu { display:none; position:sticky; top:82px; z-index:39; margin:0 clamp(8px,2vw,14px); }
.mobile-menu.is-open { display:block; }
.mobile-menu__inner {
  background:#fff; border:1px solid var(--line); border-radius:22px; padding:10px;
  box-shadow:0 18px 44px rgba(34,38,43,.12);
  display:flex; flex-direction:column; gap:2px; animation:rise .22s ease both;
}
.mobile-menu a {
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 16px; border-radius:14px; font-size:16px; font-weight:600; color:var(--ink);
}
.mobile-menu a:hover { background:var(--accent-soft); color:var(--ink); }
.mobile-menu a .arw { color:var(--accent); font-size:15px; }
.mobile-menu .cta {
  margin-top:6px; text-align:center; justify-content:center;
  background:var(--accent); color:#fff; font-size:15.5px;
}
.mobile-menu .cta:hover { background:var(--accent-hover); color:#fff; }

/* =========================================================================
   Hero
   ========================================================================= */
.hero-bleed {
  position:relative; overflow:hidden;
  background-color:var(--dark);
  box-shadow:0 22px 54px rgba(18,35,61,.20);
}
/* Hintergrundfoto */
.hero-bleed__img {
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; object-position:68% 50%;
}
/* Abdunkelung: links kräftig (weißer Text), rechts offener; + leichte Vignette oben/unten */
.hero-bleed::after {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(103deg, rgba(18,35,61,.94) 0%, rgba(18,35,61,.80) 36%, rgba(18,35,61,.48) 60%, rgba(18,35,61,.20) 100%),
    linear-gradient(180deg, rgba(18,35,61,.30) 0%, rgba(18,35,61,0) 26%, rgba(18,35,61,.10) 70%, rgba(18,35,61,.45) 100%);
}
.hero {
  position:relative; z-index:2; max-width:1180px; margin:0 auto;
  display:flex; flex-wrap:wrap; gap:clamp(20px,3vw,36px); align-items:flex-start;
  padding:clamp(24px,4vw,48px) clamp(16px,4vw,32px) clamp(48px,5vw,58px);
}
.hero__text { flex:1 1 380px; min-width:300px; animation:rise .5s ease both; }
.hero__badge {
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 14px 7px 9px; border-radius:999px;
  background:rgba(224,184,95,.16); color:var(--accent-pale);
  font-size:12.5px; font-weight:600;
}
.hero__badge .marker { width:16px; height:16px; border-radius:50%; background:var(--accent); flex:none; }
.hero h1 { font-size:clamp(34px,6.6vw,56px); line-height:1.04; letter-spacing:-.04em; margin:20px 0 0; color:#fff; }
.hero h1 span { color:var(--accent-light); }
.hero__lead { font-size:clamp(16px,2.2vw,18.5px); line-height:1.6; color:rgba(255,255,255,.74); max-width:35ch; margin:18px 0 0; text-wrap:pretty; }
.hero__buttons { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.btn {
  display:inline-block; text-align:center; padding:16px 22px; border-radius:16px;
  font-weight:600; font-size:15.5px; border:none; cursor:pointer;
}
.btn--gold { background:var(--accent); color:#fff; box-shadow:0 10px 24px rgba(184,134,47,.32); flex:1 1 160px; }
.btn--gold:hover { background:var(--accent-hover); color:#fff; }
.btn--glass { background:rgba(255,255,255,.10); color:#fff; border:1px solid rgba(255,255,255,.26); flex:1 1 160px; }
.btn--glass:hover { background:rgba(255,255,255,.18); color:#fff; }
.hero__trust { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin-top:28px; }
.trust-tile { background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16); border-radius:16px; padding:13px 15px; }
.trust-tile b { font-family:Manrope,system-ui,sans-serif; font-weight:800; font-size:20px; letter-spacing:-.02em; color:#fff; display:block; }
.trust-tile span { font-size:12.5px; color:rgba(255,255,255,.6); margin-top:1px; display:block; }

/* =========================================================================
   Buchungsformular
   ========================================================================= */
.booking { flex:1 1 360px; min-width:300px; scroll-margin-top:120px; }
.card {
  background:#fff; border:1px solid var(--line-card); border-radius:26px;
  padding:clamp(20px,3vw,28px);
  box-shadow:0 1px 2px rgba(34,38,43,.04), 0 18px 44px rgba(34,38,43,.07);
}
.booking h2 { font-size:21px; margin:0; color:var(--primary); }
.booking__sub { font-size:13.5px; color:var(--ink-subtle); margin:7px 0 20px; line-height:1.5; }
.field-stack { display:flex; flex-direction:column; gap:15px; }
.field-label { font-size:12.5px; font-weight:600; color:var(--ink-subtle); display:block; margin-bottom:8px; }
.ridetypes { display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:8px; }
.ridetype {
  padding:13px 10px; border-radius:14px; cursor:pointer; text-align:center;
  font-size:13.5px; font-weight:600;
  border:1px solid var(--line-input); background:var(--bg); color:#45423D;
  transition:all .18s ease;
}
.ridetype[aria-pressed="true"] { background:var(--primary-soft); border-color:var(--primary); color:var(--primary); }

.input, .select, .textarea {
  width:100%; padding:15px; border-radius:14px; border:1px solid var(--line-input);
  background:var(--bg); font-size:16px; font-family:inherit;
}
.textarea { font-size:15.5px; resize:vertical; }
.select { appearance:none; -webkit-appearance:none;
  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 d='M1 1l5 5 5-5' stroke='%2377716A' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; padding-right:38px;
}
.field > .field-label { margin-bottom:7px; }
.field { display:block; }

.btn-submit {
  width:100%; padding:16px 20px; border-radius:15px; border:none; background:var(--primary); color:#fff;
  font-weight:600; font-size:16px; cursor:pointer; box-shadow:0 8px 20px rgba(22,50,92,.22);
}
.btn-submit:hover { background:var(--primary-hover); }
.legal { font-size:11.5px; color:var(--ink-faint); line-height:1.5; margin:0; text-align:center; }
.form-error {
  font-size:12.5px; color:#B4232B; background:#FBEDEC; border:1px solid #F0CFCE;
  border-radius:12px; padding:10px 12px; margin:0;
}
.form-error[hidden] { display:none; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.or-contact { margin-top:6px; padding-top:16px; border-top:1px solid var(--line-hairline); text-align:center; }
.or-contact > span { font-size:12px; color:var(--ink-subtle); }
.or-contact__btns { display:flex; gap:10px; margin-top:10px; }
.or-btn {
  flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:12px 8px; border-radius:14px; border:1px solid transparent;
  transition:background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.or-btn b { font-size:14.5px; font-weight:700; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.or-btn span { font-size:11.5px; font-weight:500; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Anrufen – gefüllt (primäre Alternative, wie in den dunklen Sektionen) */
.or-btn--call { background:var(--accent); box-shadow:0 8px 18px rgba(184,134,47,.26); }
.or-btn--call:hover { background:var(--accent-hover); }
.or-btn--call b { color:#fff; }
.or-btn--call span { color:rgba(255,255,255,.82); }
/* E-Mail – Umriss (sekundär) */
.or-btn--mail { background:#fff; border-color:var(--line-input); }
.or-btn--mail:hover { border-color:var(--primary); }
.or-btn--mail b { color:var(--primary); font-size:13px; letter-spacing:-.01em; }
.or-btn--mail span { color:var(--ink-subtle); }

.success { text-align:center; padding:24px 6px 14px; }
.success__icon { width:62px; height:62px; border-radius:50%; background:var(--accent-soft); margin:0 auto; display:grid; place-items:center; }
.success__icon i { width:22px; height:22px; border-radius:50%; background:var(--accent); display:block; }
.success h3 { font-size:21px; margin:18px 0 8px; color:var(--primary); }
.success p { font-size:14.5px; color:var(--ink-subtle); line-height:1.6; margin:0 auto; max-width:32ch; }
.btn-outline { margin-top:22px; padding:13px 20px; border-radius:14px; border:1px solid var(--line); background:#fff; font-weight:600; font-size:14.5px; cursor:pointer; }

/* =========================================================================
   Leistungen
   ========================================================================= */
.section-lead { font-size:16px; line-height:1.65; color:var(--ink-muted); margin:14px 0 0; max-width:52ch; text-wrap:pretty; }
.cards-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; margin-top:32px; }
.svc-card {
  background:#fff; border:1px solid var(--line-card); border-radius:22px; padding:26px 24px;
  display:flex; flex-direction:column; gap:12px;
  transition:box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.svc-card:hover { box-shadow:0 16px 38px rgba(34,38,43,.09); border-color:#E3DCCF; transform:translateY(-2px); }
.svc-card__ico {
  width:46px; height:46px; flex:none; border-radius:14px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-ink); border:1px solid rgba(184,134,47,.18);
}
.svc-card__ico svg { width:23px; height:23px; }
.svc-card h3 { font-size:18.5px; margin:2px 0 0; color:var(--primary); }
.svc-card p { font-size:14px; line-height:1.6; color:var(--ink-muted); margin:0; }
.svc-card__tags {
  margin-top:auto; padding-top:13px; border-top:1px solid var(--line-hairline);
  font-size:12px; font-weight:600; color:var(--accent-ink); letter-spacing:.01em;
}

/* =========================================================================
   Ablauf
   ========================================================================= */
.panel { background:var(--dark); border-radius:28px; padding:clamp(24px,5vw,48px); color:#fff; }
.panel .h2 { font-size:clamp(26px,4.4vw,38px); max-width:20ch; }
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:34px 20px; margin-top:52px; }
.step { position:relative; border-top:1px solid rgba(255,255,255,.22); padding-top:30px; }
.step__no {
  position:absolute; top:-20px; left:0;
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent); color:#fff;
  font-family:Manrope, system-ui, sans-serif; font-weight:800; font-size:16px; letter-spacing:-.01em;
  box-shadow:0 0 0 5px var(--dark), 0 8px 18px rgba(0,0,0,.32);
}
.step h3 { font-size:18.5px; margin:0 0 8px; }
.step p { font-size:14px; line-height:1.65; color:rgba(255,255,255,.64); margin:0; }

/* Scroll-Reveal – dezent, nur wenn JS aktiv (Animation statt transition, damit Hover-Effekte unberührt bleiben) */
@keyframes revealIn { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
.js .reveal { opacity:0; }
.js .reveal.is-visible { animation:revealIn .6s cubic-bezier(.2,.7,.2,1) both; }

/* =========================================================================
   Über uns
   ========================================================================= */
.about { display:flex; flex-wrap:wrap; gap:clamp(20px,3vw,40px); align-items:center; }
.about__img {
  flex:1 1 300px; min-width:280px; aspect-ratio:4/3;
  width:100%; height:100%; object-fit:cover; display:block;
  border-radius:24px; border:1px solid var(--line-card);
}
.about__body { flex:1 1 340px; min-width:290px; }
.about__body p { font-size:16px; line-height:1.7; color:var(--ink-muted); margin:18px 0 0; text-wrap:pretty; }
.facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-top:28px; }
.fact { background:#fff; border:1px solid var(--line-card); border-radius:16px; padding:16px 16px 15px; }
.fact b { font-weight:700; font-size:14.5px; color:var(--primary); display:block; letter-spacing:-.01em; }
.fact span { font-size:12.5px; color:var(--ink-subtle); margin-top:4px; line-height:1.45; display:block; }

/* =========================================================================
   Rezensionen
   ========================================================================= */
.rev-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:12px; padding:0 clamp(16px,4vw,28px); }
.score { display:flex; align-items:center; gap:11px; background:#fff; border:1px solid var(--line-card); border-radius:16px; padding:12px 17px; }
.score b { font-family:Manrope,system-ui,sans-serif; font-weight:800; letter-spacing:-.03em; font-size:26px; color:var(--primary); }
.score .stars { color:var(--star); font-size:13px; letter-spacing:1px; }
.score small { font-size:12px; color:var(--ink-subtle); display:block; }
.rev-track { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:28px clamp(16px,4vw,28px) 6px; }
.rev { flex:0 0 min(84vw,340px); scroll-snap-align:start; background:#fff; border:1px solid var(--line-card); border-radius:22px; padding:24px; }
.rev .stars { color:var(--star); font-size:13px; letter-spacing:1.5px; }
.rev p { font-size:15px; line-height:1.65; color:#3A3833; margin:14px 0 0; text-wrap:pretty; }
.rev__foot { display:flex; align-items:center; gap:11px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line-hairline); }
.rev__av { width:34px; height:34px; border-radius:50%; background:var(--primary-soft); color:var(--primary); display:grid; place-items:center; font-weight:600; font-size:13px; flex:none; }
.rev__foot b { font-size:13.5px; font-weight:600; display:block; }
.rev__foot span { font-size:12px; color:var(--ink-subtle); display:block; }

/* =========================================================================
   CTA
   ========================================================================= */
.cta-panel {
  position:relative; overflow:hidden; border-radius:28px;
  background-color:var(--dark);
  background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.055) 0 10px, transparent 10px 20px);
  box-shadow:0 22px 54px rgba(18,35,61,.18);
  display:flex; flex-wrap:wrap; align-items:center; gap:clamp(20px,3vw,40px); padding:clamp(24px,4vw,46px);
}
.cta-panel .col { flex:1 1 320px; min-width:280px; }
.cta-panel .eyebrow { color:var(--accent-light); }
.cta-panel h2 { font-size:clamp(26px,4.4vw,38px); line-height:1.08; margin:12px 0 0; color:#fff; }
.cta-panel p { font-size:15.5px; line-height:1.65; color:rgba(255,255,255,.74); margin:14px 0 24px; max-width:40ch; }
.cta-panel .btns { display:flex; flex-wrap:wrap; gap:10px; }
.cta-panel .btn { flex:1 1 170px; }
.cta-panel__img {
  flex:1 1 300px; min-width:250px; max-width:520px;
  align-self:center; margin-inline:auto;
  height:clamp(220px, 24vw, 320px); object-fit:cover; display:block;
  border-radius:22px; border:1px solid rgba(255,255,255,.18);
}

/* =========================================================================
   FAQ
   ========================================================================= */
.faq { display:flex; flex-wrap:wrap; gap:clamp(20px,3vw,44px); }
.faq__intro { flex:1 1 260px; min-width:260px; }
.faq__intro p { font-size:15px; line-height:1.65; color:var(--ink-subtle); margin:16px 0 0; }
.faq__list { flex:2 1 420px; min-width:300px; display:flex; flex-direction:column; gap:10px; }
.faq-item { background:#fff; border:1px solid var(--line-card); border-radius:18px; overflow:hidden; }
.faq-item__q {
  display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%;
  padding:18px 20px; background:none; border:none; cursor:pointer; text-align:left;
  font-weight:600; font-size:15.5px; color:var(--ink);
}
.faq-item__q .plus {
  flex:none; width:26px; height:26px; border-radius:50%; background:#F4F1EB; color:#45423D;
  display:grid; place-items:center; font-size:16px; line-height:1; transition:transform .22s ease;
}
.faq-item[open] .plus, .faq-item.is-open .plus { transform:rotate(45deg); }
.faq-item__a { font-size:14.5px; line-height:1.7; color:var(--ink-muted); margin:0; padding:0 20px 20px; max-width:62ch; }

/* =========================================================================
   Kontakt
   ========================================================================= */
.contact-card {
  background:#fff; border:1px solid var(--line-card); border-radius:28px; padding:clamp(22px,4vw,44px);
  box-shadow:0 1px 2px rgba(34,38,43,.04), 0 18px 44px rgba(34,38,43,.06);
  display:flex; flex-wrap:wrap; gap:clamp(20px,3vw,44px);
}
.contact-card h2 { font-size:clamp(26px,4.4vw,38px); line-height:1.06; margin:0; color:var(--primary); }
.contact-card > div { flex:1 1 300px; min-width:280px; }
.contact-card p { font-size:15.5px; line-height:1.65; color:var(--ink-muted); margin:14px 0 24px; }
.contact-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:17px 18px; border-radius:16px; font-weight:600; }
.contact-row--navy { background:var(--primary); color:#fff; font-size:16px; }
.contact-row--navy:hover { background:var(--primary-hover); color:#fff; }
.contact-row--navy span:last-child { font-size:13px; opacity:.75; }
.contact-row--grey { background:#F4F1EB; color:var(--ink); font-size:15.5px; }
.contact-row--grey:hover { background:#EDE8DF; color:var(--ink); }
.contact-row--grey span:last-child { font-size:13px; color:var(--ink-subtle); }
.contact-links { display:flex; flex-direction:column; gap:10px; }
.contact-side { display:flex; flex-direction:column; gap:14px; }
.map {
  position:relative; flex:1 1 200px; min-height:220px; border-radius:20px; overflow:hidden;
  border:1px solid var(--line-card); background-color:var(--dark-surface);
  background-image:repeating-linear-gradient(135deg, rgba(34,38,43,.05) 0 8px, transparent 8px 16px);
}
.map iframe { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.map__consent {
  position:absolute; inset:0; width:100%; border:0; background:transparent; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  padding:22px; text-align:center; font-family:inherit; color:var(--ink-muted);
}
.map__consent svg { width:28px; height:28px; color:var(--accent); }
.map__consent b { color:var(--primary); font-weight:700; font-size:13.5px; }
.map__consent-note { font-size:11.5px; line-height:1.5; color:var(--ink-subtle); max-width:32ch; }
.map__consent-btn { margin-top:5px; font-size:12.5px; font-weight:700; color:#fff; background:var(--primary); padding:9px 16px; border-radius:999px; }
.map__consent:hover .map__consent-btn { background:var(--primary-hover); }
.map__route { align-self:flex-start; display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--primary); }
.map__route:hover { color:var(--accent); }
.dl { display:flex; flex-direction:column; gap:12px; }
.dl > div { display:flex; justify-content:space-between; gap:12px; font-size:14px; padding-bottom:12px; border-bottom:1px solid var(--line-hairline); }
.dl span:first-child { color:var(--ink-subtle); }
.dl span:last-child { font-weight:600; text-align:right; }

/* =========================================================================
   Footer
   ========================================================================= */
.footer {
  margin-top:clamp(52px,9vw,96px);
  background-color:var(--dark);
  background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 10px, transparent 10px 20px);
  border-top:1px solid rgba(224,184,95,.30);
  color:rgba(255,255,255,.72);
}
.footer__inner { max-width:1180px; margin:0 auto; padding:clamp(40px,6vw,66px) clamp(16px,4vw,28px) 0; }
.footer a { color:rgba(255,255,255,.72); }
.footer a:hover { color:var(--accent-light); }

.footer__top {
  display:grid; grid-template-columns:1.7fr 1fr 1fr 1.5fr; gap:clamp(28px,3.4vw,52px);
}
@media (max-width:920px) { .footer__top { grid-template-columns:1fr 1fr; gap:34px 28px; } }
@media (max-width:540px) { .footer__top { grid-template-columns:1fr; gap:30px; } }

.footer__logo { height:66px; width:auto; display:block; }
.footer__brand p { font-size:13.5px; line-height:1.7; color:rgba(255,255,255,.58); margin:18px 0 20px; max-width:36ch; }
.footer__phone {
  display:inline-flex; align-items:center; gap:13px;
  padding:11px 18px 11px 14px; border-radius:14px;
  background:var(--accent); color:#fff !important;
  box-shadow:0 10px 24px rgba(184,134,47,.28); transition:background .16s ease, transform .16s ease;
}
.footer__phone:hover { background:var(--accent-hover); color:#fff !important; transform:translateY(-1px); }
.footer__phone svg { width:20px; height:20px; flex:none; }
.footer__phone small { display:block; font-size:10.5px; font-weight:700; letter-spacing:.10em; text-transform:uppercase; opacity:.78; }
.footer__phone b { display:block; font-family:Manrope,system-ui,sans-serif; font-weight:800; font-size:17px; letter-spacing:-.01em; }

.footer__col { display:flex; flex-direction:column; gap:12px; }
.footer__col h4 {
  font-family:Manrope,system-ui,sans-serif; font-weight:700; font-size:12px;
  letter-spacing:.10em; text-transform:uppercase; color:rgba(255,255,255,.45); margin:0 0 5px;
}
.footer__col a { font-size:13.5px; }
.footer__contact-row { display:flex; gap:10px; font-size:13px; line-height:1.6; color:rgba(255,255,255,.62); }
.footer__contact-row svg { width:17px; height:17px; flex:none; color:var(--accent-light); margin-top:2px; }
.footer__contact-row address { font-style:normal; }
a.footer__contact-row:hover { color:var(--accent-light); }
a.footer__contact-row:hover svg { color:var(--accent-light); }

.footer__bar {
  margin-top:clamp(34px,4vw,52px); padding:22px 0 28px;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; justify-content:space-between;
}
.footer__bar > span { font-size:12px; color:rgba(255,255,255,.42); }
.footer__bar nav { display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center; font-size:12.5px; }
.footer__bar nav a { color:rgba(255,255,255,.58); }
@media (max-width:899px) { .footer__bar { padding-bottom:calc(28px + 76px); } }

/* =========================================================================
   Sticky Bottom-CTA
   ========================================================================= */
.sticky-cta {
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  padding:10px clamp(12px,4vw,20px) calc(10px + env(safe-area-inset-bottom));
  background:rgba(251,250,247,.92);
  backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid var(--line);
  transform:translateY(120%); transition:transform .28s ease;
}
.sticky-cta.is-visible { transform:translateY(0); }
.sticky-cta__inner { max-width:560px; margin:0 auto; display:flex; gap:10px; }
.sticky-cta a { flex:1 1 0; text-align:center; padding:16px 12px; border-radius:16px; font-weight:600; font-size:15.5px; color:#fff; }
.sticky-cta .call { background:var(--primary); }
.sticky-cta .book { background:var(--accent); }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width:899px) {
  .nav { display:none; }
  .burger { display:flex; }
}
@media (max-width:760px) {
  /* Text steht jetzt über dem Formular – gleichmäßiger abdunkeln */
  .hero-bleed__img { object-position:58% 50%; }
  .hero-bleed::after {
    background:linear-gradient(180deg, rgba(18,35,61,.78) 0%, rgba(18,35,61,.62) 42%, rgba(18,35,61,.82) 100%);
  }
}
@media (prefers-reduced-motion:reduce) {
  * { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .js .reveal { opacity:1 !important; transform:none !important; }
}

/* =========================================================================
   Cookie-Consent (DSGVO)
   ========================================================================= */
.cc { position:fixed; left:0; right:0; bottom:0; z-index:70; padding:16px clamp(12px,4vw,22px) calc(16px + env(safe-area-inset-bottom)); display:flex; justify-content:center; }
.cc[hidden] { display:none; }
.cc__box {
  width:min(680px,100%); background:var(--dark); color:rgba(255,255,255,.82);
  border:1px solid rgba(224,184,95,.28); border-radius:20px;
  box-shadow:0 24px 60px rgba(0,0,0,.45); padding:20px clamp(16px,3vw,24px);
  animation:ccUp .32s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes ccUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
.cc__title { font-family:Manrope, system-ui, sans-serif; font-weight:800; font-size:16px; color:#fff; margin:0 0 6px; letter-spacing:-.01em; }
.cc__text { font-size:13px; line-height:1.6; margin:0; }
.cc__text a { color:var(--accent-light); text-decoration:underline; }
.cc__actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.cc__btn {
  flex:1 1 150px; padding:12px 16px; border-radius:12px; border:1px solid transparent;
  font-family:inherit; font-weight:700; font-size:13.5px; cursor:pointer; text-align:center;
}
.cc__btn--accept { background:var(--accent); color:#fff; }
.cc__btn--accept:hover { background:var(--accent-hover); }
.cc__btn--reject { background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.22); }
.cc__btn--reject:hover { background:rgba(255,255,255,.2); }
.cc__btn--settings { flex:1 1 100%; background:transparent; color:rgba(255,255,255,.7); font-weight:600; text-decoration:underline; padding:4px; border:0; }
.cc__btn--settings:hover { color:#fff; }

.cc__panel { margin-top:14px; border-top:1px solid rgba(255,255,255,.14); padding-top:14px; display:flex; flex-direction:column; gap:12px; }
.cc__panel[hidden] { display:none; }
.cc__opt { display:flex; gap:12px; align-items:flex-start; }
.cc__opt-main { flex:1; }
.cc__opt b { display:block; font-size:13.5px; color:#fff; font-weight:700; }
.cc__opt span { display:block; font-size:12px; line-height:1.5; color:rgba(255,255,255,.6); margin-top:2px; }
.cc__sw { position:relative; width:44px; height:26px; flex:none; margin-top:2px; }
.cc__sw input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.cc__sw i { position:absolute; inset:0; border-radius:999px; background:rgba(255,255,255,.2); transition:background .18s ease; }
.cc__sw i::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform .18s ease; }
.cc__sw input:checked + i { background:var(--accent); }
.cc__sw input:checked + i::after { transform:translateX(18px); }
.cc__sw input:disabled + i { background:rgba(255,255,255,.28); }
.cc__sw input:disabled { cursor:default; }

.cc-reopen { background:none; border:0; padding:0; font:inherit; font-size:12.5px; color:rgba(255,255,255,.68); cursor:pointer; }
.cc-reopen:hover { color:var(--accent-light); }

/* eingeklappter Button: nach der Auswahl dauerhaft erreichbar */
.cc-fab {
  position:fixed; left:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:65;
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:var(--dark); color:#fff; border:1px solid rgba(255,255,255,.18);
  box-shadow:0 8px 22px rgba(0,0,0,.30); cursor:pointer;
  transition:background .16s ease, transform .16s ease;
}
.cc-fab[hidden] { display:none; }
.cc-fab:hover { background:var(--primary-hover); transform:translateY(-1px); }
.cc-fab svg { width:20px; height:20px; }
@media (max-width:899px) { .cc-fab { bottom:calc(80px + env(safe-area-inset-bottom)); } }

@media (max-width:520px) {
  .cc__btn--accept, .cc__btn--reject { flex:1 1 100%; }
}