/* =========================================================
   VITAMED MALLORCA — HEALTH & WELLBEING TRAVEL
   Designprinzip: LUXURY THROUGH RESTRAINT.
   Grundwelt: Warm White / Ivory · Sand · Charcoal · Mediterranean Green
   Health-Akzent: Sage / Eucalyptus   ·   Wellbeing-Akzent: Sand / Terracotta
   ========================================================= */

/* Aufgabenblatt 11.09.2026, 1.7: Seitenhintergrund ist Weiss. Die Waerme
   kommt aus den Bildern, nicht aus dem Papierton. --ivory ist deshalb reines
   Weiss und dient zugleich als helle Schriftfarbe auf den dunklen Baendern;
   --ivory-2 bleibt als sehr leichter Absetzton fuer das Programm-Band.
   1.4: --muted war #7C7C72 und erreichte auf Weiss nur 4,2:1. Jetzt #6B665E
   (5,7:1), der Richtwert aus 1.3. --charcoal-label ist der Wert aus 1.1. */
:root{
  --ivory:#FFFFFF;
  --ivory-2:#F7F5F1;
  --sand:#E7DCCB;
  --sand-deep:#D8C9B2;
  --charcoal:#23241F;
  --charcoal-soft:#4A4B44;
  --charcoal-label:#2A2A26;
  --muted:#6B665E;
  --key:#5C574F;
  --line:rgba(35,36,31,.16);
  --sage:#7E9184;          /* Health */
  --sage-deep:#5C6E62;
  --terracotta:#C08A6B;    /* Wellbeing, nur als Flaeche und Linie */
  --terracotta-text:#8A5630;  /* dieselbe Familie, aber 6,1:1 auf Weiss */
  --med-green:#2F4034;

  --f-display:"Cormorant Garamond", "Times New Roman", Georgia, serif;
  --f-text:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --pad:clamp(22px, 5vw, 90px);
  --maxw:1440px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ivory);
  color:var(--charcoal);
  font-family:var(--f-text);
  font-weight:300;
  font-size:17px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ---------- Typo-System ---------- */
.display{
  font-family:var(--f-display);
  font-weight:300;
  line-height:1.02;
  letter-spacing:-0.015em;
}
h1.display{font-size:clamp(26px, min(7.4vw, 12.5vh), 116px);text-wrap:balance}
h2.display{font-size:clamp(34px, 5.1vw, 78px)}
h3.display{font-size:clamp(27px, 3.1vw, 46px)}
/* 1.3 Sektionslabels: Versalien bleiben, Buchstabenabstand halbiert,
   mindestens 12px, Grauwert dunkler (Richtwerte des Aufgabenblatts). */
.eyebrow{
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--muted);
}
.eyebrow + h2.display,.eyebrow + h1.display{margin-top:clamp(18px,2.2vh,30px)}
.lead{font-size:clamp(18px,1.55vw,22px);line-height:1.62;color:var(--charcoal-soft);font-weight:300}
.small{font-size:14.5px;line-height:1.7;color:var(--muted)}
/* 1.2 Schlagwortketten: normale Schreibweise, kein Buchstabenabstand,
   groesser und dunkler. Betrifft die Ketten unter jeder Saeule, unter jedem
   Programm, im Bildband, im Aktiv-Streifen und im Zitatband. */
.keyline{font-size:15px;letter-spacing:0;text-transform:none;line-height:1.65;color:var(--key)}
/* 1.5 Zentrierte Absaetze laufen auf dem Desktop sonst sehr breit.
   1.6 Absaetze ab drei Zeilen linksbuendig; kurze Claims und Zitatflaechen
   duerfen zentriert bleiben, die stehen in .divider-quote und .quote-inner. */
.manifest .lead,.worlds-head .lead,.sys-head .lead{max-width:68ch;text-align:left}
em{font-style:italic}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
section{position:relative}
.rule{height:1px;background:var(--line);border:0}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.7em;
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;
  padding:17px 30px;border:1px solid currentColor;border-radius:0;
  transition:background .45s ease,color .45s ease,border-color .45s ease;
  cursor:pointer;background:transparent;font-family:var(--f-text);
}
.btn:hover{background:var(--charcoal);color:var(--ivory);border-color:var(--charcoal)}
.btn--light{color:#fff;border-color:rgba(255,255,255,.65)}
.btn--light:hover{background:#fff;color:var(--charcoal);border-color:#fff}
.btn--solid{background:var(--charcoal);color:var(--ivory);border-color:var(--charcoal)}
.btn--solid:hover{background:transparent;color:var(--charcoal)}
/* 2.4 Nur noch ein Hauptbutton im Hero, und der ist gefuellt:
   dunkler Grund, helle Schrift, damit er auf dem Foto traegt. */
.btn--hero{background:rgba(18,20,16,.86);color:#fff;border-color:rgba(255,255,255,.28)}
.btn--hero:hover{background:#fff;color:var(--charcoal);border-color:#fff}
.link-arrow{
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;
  border-bottom:1px solid var(--line);padding-bottom:6px;display:inline-block;
  transition:border-color .4s ease;
}
.link-arrow:hover{border-color:var(--charcoal)}

/* ---------- Navigation ----------
   Seit dem Rebriefing (26.08.2026) traegt die Kopfzeile das Kombi-Logo
   VitaMed + Deutsche Facharztzentren. Das Logo verlangt einen ruhigen, hellen
   Grund (Vorgabe des Kunden), deshalb ist die Kopfzeile immer hell und liegt
   nie transparent ueber dem Hero-Foto. Unter 700 px steht nur die Wortmarke;
   das Siegel folgt dort gross im Absender-Block direkt unter dem Hero
   (Variante fuer Mobil, vom Markeninhaber freizugeben). */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:14px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:rgba(252,250,246,.96);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line);
  transition:padding .5s ease;
}
header.scrolled{padding:9px var(--pad)}
.brand{display:flex;align-items:center;color:var(--charcoal)}
.brand{gap:14px}
.brand img{display:block;width:auto;height:62px;transition:height .5s ease}
header.scrolled .brand img{height:52px}
.brand .brand-mobil,.brand .brand-siegel{display:none}
nav{display:flex;align-items:center;gap:26px}
nav a.navlink{
  font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:400;
  color:var(--charcoal);opacity:.92;transition:opacity .3s ease;white-space:nowrap;
}
nav a.navlink:hover{opacity:1}
.lang{display:flex;align-items:center;gap:7px;font-size:11.5px;letter-spacing:.14em;color:var(--charcoal)}
.lang button{
  background:none;border:0;cursor:pointer;color:inherit;font-family:var(--f-text);
  font-size:11.5px;letter-spacing:.14em;opacity:.5;padding:2px 1px;transition:opacity .3s ease;
  border-bottom:1px solid transparent;
}
.lang button.active{opacity:1;border-bottom-color:currentColor}
.lang i{opacity:.35;font-style:normal}
.menu-toggle{display:none;background:none;border:0;cursor:pointer;color:var(--charcoal);padding:6px}
.menu-toggle span{display:block;width:24px;height:1px;background:currentColor;margin:6px 0}
/* 2.1 Wichtigste Einzelaufgabe des Aufgabenblatts: Auf dem Desktop steht das
   Rundsiegel der German Medical Centres links im Kombi-Logo, mobil fehlte es
   ganz — also genau dort, wo die Mehrheit der Zielgruppe einsteigt. Unter
   700 px steht das Siegel jetzt als eigene Bildmarke neben der Wortmarke. */
@media (max-width:700px){
  .brand .brand-desk{display:none}
  .brand .brand-mobil{display:block;height:32px}
  /* Siegel links neben die Wortmarke, genau wie im Kombi-Logo auf dem Desktop. */
  .brand .brand-siegel{display:block;height:44px;flex:0 0 auto;order:-1}
  header.scrolled .brand .brand-mobil{height:28px}
  header.scrolled .brand .brand-siegel{height:38px}
  .brand{gap:11px}
}
@media (max-width:380px){
  .brand .brand-mobil{height:27px}
  .brand .brand-siegel{height:38px}
}

/* ---------- HERO ---------- */
.hero{min-height:max(620px,100svh);position:relative;display:flex;align-items:flex-end;overflow:hidden;padding-top:calc(94px + 6vh)}
.hero-img{position:absolute;inset:0;background-size:cover;background-position:center 42%;transform:scale(1.06);animation:heroZoom 18s ease-out forwards}
@keyframes heroZoom{to{transform:scale(1)}}
/* 2.3 (b) Dunkler Verlauf hinter der Ueberschrift. Der Hero steht mit
   align-items:flex-end, der Textblock liegt also immer unten. Der untere
   Verlauf traegt deshalb die Schrift: ab 0,45 Schwarz unter der Ueberschrift,
   nach oben auf null. Der obere Hauch haelt nur die Kopfzeilenkante ruhig. */
.hero::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.68) 34%, rgba(0,0,0,.65) 58%, rgba(0,0,0,.63) 76%, rgba(0,0,0,.28) 90%, rgba(0,0,0,0) 100%),
    linear-gradient(to bottom, rgba(20,22,18,.20) 0%, rgba(20,22,18,0) 26%);
}
.hero-kicker{display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:#fff;margin-bottom:clamp(16px,2.4vh,28px)}
.hero-kicker::before{content:"";width:38px;height:1px;background:rgba(255,255,255,.7);flex:0 0 auto}
.hero-inner{position:relative;z-index:2;width:100%;padding:0 var(--pad) clamp(52px,7vh,96px);max-width:var(--maxw);margin:0 auto;color:#fff}
.hero h1{color:#fff;max-width:19ch;text-shadow:0 2px 40px rgba(0,0,0,.28)}
@media (max-width:760px){ .hero h1{max-width:none} }
.hero .hero-sub{color:rgba(255,255,255,.96);font-size:clamp(16px,1.35vw,20px);max-width:46ch;margin-top:26px;line-height:1.55;font-weight:300}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}
.scroll-hint{
  position:absolute;bottom:26px;right:var(--pad);z-index:3;color:rgba(255,255,255,.9);
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;gap:12px;
}
.scroll-hint::after{content:"";width:52px;height:1px;background:currentColor;animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}

/* ---------- Manifest ---------- */
.manifest{padding:clamp(90px,13vh,170px) 0 clamp(70px,10vh,120px);text-align:center}
.manifest .eyebrow{margin-bottom:34px}
.manifest h2{max-width:19ch;margin:0 auto}
.manifest p{max-width:60ch;margin:38px auto 0}
.pillars{
  display:flex;flex-wrap:wrap;justify-content:center;gap:0;
  margin-top:64px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.pillars div{
  flex:1 1 150px;padding:26px 14px;text-align:center;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--charcoal-label);
  border-right:1px solid var(--line);
}
.pillars div:last-child{border-right:0}
/* Medizinischer Absender: das DFZ-Siegel in lesbarer Groesse, direkt nach dem Hero. */
.absender{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;margin-top:clamp(40px,6vh,64px)}
.absender img{height:clamp(96px,10vw,124px);width:auto}
.absender p{font-size:12px;letter-spacing:.06em;text-transform:uppercase;line-height:1.9;color:var(--charcoal-label);max-width:34ch;text-align:left}
.absender p b{display:block;font-weight:500;color:var(--charcoal)}

/* ---------- Full-bleed Bild-Band ---------- */
.band{position:relative;min-height:clamp(480px,78vh,760px);padding:clamp(56px,8vh,90px) 0;display:flex;align-items:center;overflow:hidden}
.band-img{position:absolute;inset:0;background-size:cover;background-position:center}
/* Schleier nach dem Aufhellen der Motive (22.09.2026) etwas kraeftiger, sonst
   faellt weisse Schrift unter 4,5:1. Gemessen mit tools/abnahme.py kontrast. */
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg, rgba(14,16,12,.80) 0%, rgba(14,16,12,.66) 52%, rgba(14,16,12,.56) 100%)}
.band-inner{position:relative;z-index:2;color:#fff;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);width:100%}
.band h2{color:#fff;max-width:16ch}
.band p{color:rgba(255,255,255,.95);max-width:62ch;margin-top:26px}
.band .eyebrow{color:rgba(255,255,255,.92);margin-bottom:26px}
.band-tags{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:40px;max-width:60ch}
.band-tags span{font-size:15px;letter-spacing:0;text-transform:none;line-height:1.65;color:rgba(255,255,255,.96);position:relative;padding-right:26px}
.band-tags span:not(:last-child)::after{content:"";position:absolute;right:0;top:50%;width:6px;height:1px;background:rgba(255,255,255,.6)}

/* ---------- Vier Saeulen (Rebriefing 26.08.2026) ----------
   Gewichtung laut Kunde: Health 35, Wellbeing 35, Golf 15, Leisure 15.
   Deshalb zwei grosse Karten oben, zwei kompakte darunter, dazu der
   Aktiv-Streifen als verbindendes Prinzip. */
.worlds{padding:clamp(90px,13vh,170px) 0}
.worlds-head{text-align:center;margin-bottom:clamp(48px,7vh,80px)}
.worlds-head .lead{max-width:64ch;margin:28px auto 0}
.worlds-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,56px)}
.world{position:relative}
.world figure{overflow:hidden;background:var(--sand)}
.world img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform 1.5s cubic-bezier(.16,1,.3,1)}
.world:hover img{transform:scale(1.045)}
.world-body{padding:32px 0 0}
.world .tagline{font-family:var(--f-display);font-size:clamp(22px,2.1vw,32px);font-weight:400;margin-top:10px;line-height:1.2}
.world p{margin-top:18px;max-width:44ch}
.world .keys{margin-top:24px;font-size:15px;letter-spacing:0;text-transform:none;line-height:1.65;color:var(--key)}
.accent-sage{color:var(--sage-deep)}
.accent-terra{color:var(--terracotta-text)}
.accent-golf{color:#5E7A4C}
.accent-sea{color:#4E6E7C}
.world-mark{display:inline-block;width:26px;height:1px;background:currentColor;margin-bottom:18px}
.worlds-grid--klein{margin-top:clamp(32px,4vw,64px)}
.world--klein{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(18px,2.4vw,34px);align-items:center;border-top:1px solid var(--line);padding-top:clamp(22px,3vw,40px)}
.world--klein img{aspect-ratio:4/3}
.world--klein .world-body{padding:0}
.world--klein .tagline{font-size:clamp(20px,1.7vw,26px)}
.world--klein p{font-size:15px;max-width:38ch;margin-top:14px}
.world--klein .keys{margin-top:16px}
.badge--dev{border-color:#A9713F;color:#8C5A2E;background:transparent;margin-left:12px;vertical-align:middle;letter-spacing:.06em}
.aktiv{margin-top:clamp(60px,8vh,100px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(34px,4.5vh,54px) 0;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,72px);align-items:center}
.aktiv h3{margin-top:14px;max-width:16ch}
.aktiv p{margin-top:16px;max-width:46ch}
.aktiv-chips{display:flex;flex-wrap:wrap;gap:14px 26px}
.aktiv-chips span{font-size:15px;letter-spacing:0;text-transform:none;color:var(--key);position:relative;padding-right:26px;line-height:1.7}
.aktiv-chips span:not(:last-child)::after{content:"";position:absolute;right:0;top:50%;width:6px;height:1px;background:var(--muted)}

.divider-quote{
  margin:clamp(70px,9vh,110px) auto 0;max-width:68ch;text-align:center;
  font-family:var(--f-display);font-size:clamp(20px,2vw,29px);line-height:1.45;font-weight:300;
  color:var(--charcoal-soft);
}
.divider-quote em{display:block}

/* ---------- Journeys ---------- */
.journeys{padding:clamp(80px,11vh,150px) 0 clamp(90px,13vh,170px);background:var(--ivory-2)}
.journeys-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:clamp(44px,6vh,72px)}
.journeys-head h2{max-width:14ch}
.journeys-head .lead{max-width:38ch}
/* 1.3: kurze Sektionslabels behalten die Versalien, nur enger und dunkler. */
.badge{
  display:inline-block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--line);padding:6px 13px;color:var(--charcoal-label);background:#fff;
}
.j-list{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,34px)}
.j{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  background:var(--ivory);border:1px solid var(--line);
  transition:box-shadow .6s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
.j:hover{box-shadow:0 26px 60px -32px rgba(35,36,31,.34);transform:translateY(-3px)}
.j:nth-child(even){direction:rtl}
.j:nth-child(even) > *{direction:ltr}
.j figure{overflow:hidden;background:var(--sand);min-height:100%}
.j figure img{width:100%;height:100%;min-height:340px;object-fit:cover;transition:transform 1.6s cubic-bezier(.16,1,.3,1)}
.j:hover figure img{transform:scale(1.04)}
.j-body{padding:clamp(30px,3.4vw,58px)}
.j-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.j-body h3{margin-bottom:12px}
/* 1.2 Die Schlagwortzeile unter jedem Programm, normale Schreibweise. */
.j-claim{font-size:16px;letter-spacing:0;text-transform:none;font-weight:500;color:var(--sage-deep);margin-bottom:22px}
.j-body > p{max-width:48ch}
.j-meta{margin-top:28px;border-top:1px solid var(--line)}
/* 1.1 Tabellen-Labels: normale Schreibweise statt Versalien, Buchstabenabstand
   null, dafuer halbfett und dunkler.
   2.5 „INDIVIDUALISIE-RUNG" brach mitten im Wort um. Ursache war nicht die
   Schriftgroesse, sondern word-break:break-word in einer 148-px-Spalte. Beides
   ist behoben: Spalte breiter, Umbruch nur noch an Wortgrenzen. */
.j-row{display:grid;grid-template-columns:172px 1fr;gap:22px;padding:13px 0;border-bottom:1px solid var(--line)}
.j-row dt{font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--charcoal-label);padding-top:2px;line-height:1.5;word-break:normal;overflow-wrap:normal;hyphens:none}
.j-row dd{font-size:15px;line-height:1.6;color:var(--charcoal-soft)}
.j-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;margin-top:28px}
.j-price{font-family:var(--f-display);font-size:20px;color:var(--charcoal)}

/* ---------- Journey-Systematik ---------- */
.systematik{padding:clamp(90px,13vh,170px) 0}
.sys-head{text-align:center;max-width:60ch;margin:0 auto clamp(52px,7vh,84px)}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid var(--line)}
.step{padding:34px 26px 40px 0;border-right:1px solid var(--line);position:relative}
.step:last-child{border-right:0;padding-right:0}
.step:not(:first-child){padding-left:26px}
/* 2.6 Mobil standen die fuenf Schritte untereinander und lasen sich wie eine
   Liste. Die Ziffern sind jetzt deutlich groesser und farbig; mobil stehen sie
   neben der Ueberschrift, sodass der Ablauf 01 bis 05 auf einen Blick da ist. */
.step-num{font-family:var(--f-display);font-size:38px;line-height:1;color:var(--sage-deep);display:block;margin-bottom:16px}
.step h4{font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;margin-bottom:18px;color:var(--charcoal-label)}
.step ul{list-style:none}
.step li{font-size:14.5px;color:var(--charcoal-soft);padding:5px 0;line-height:1.5}
.step::before{
  content:"";position:absolute;top:-1px;left:0;height:1px;width:0;background:var(--charcoal);
  transition:width 1.2s cubic-bezier(.16,1,.3,1);
}
.step.in::before{width:100%}

/* ---------- Warum VitaMed ---------- */
/* 13: Abschnitt nicht mehr schwarz, sondern hell mit dunkler Schrift
   (Aenderungsdokument 22.09.2026). */
.why{background:var(--ivory-2);color:var(--charcoal);padding:clamp(90px,13vh,170px) 0}
.why h2{color:var(--charcoal);max-width:15ch}
.why .eyebrow{color:var(--muted)}
.why-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,100px);align-items:center}
.why p{color:var(--charcoal-soft);max-width:46ch;margin-top:26px}
.why-list{margin-top:44px;border-top:1px solid var(--line)}
.why-list div{
  padding:15px 0;border-bottom:1px solid var(--line);
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--charcoal-label);
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.why-list div span:last-child{font-size:12px;color:var(--muted);letter-spacing:.06em}
.why figure img{width:100%;aspect-ratio:16/10;object-fit:cover}
.why figure figcaption{margin-top:12px;font-size:13px;line-height:1.6;color:var(--muted)}
.why-orte{margin-top:30px;display:flex;flex-wrap:wrap;gap:10px 28px;font-size:15px;letter-spacing:0;text-transform:none;color:var(--charcoal-soft)}
.why-foot{margin-top:44px;font-family:var(--f-display);font-size:clamp(22px,2.3vw,34px);line-height:1.3;color:var(--charcoal)}

/* ---------- Hotels ---------- */
.hotels{padding:clamp(90px,13vh,170px) 0}
.hotels-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(36px,6vw,90px);align-items:center}
.hotel-figs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hotel-figs figure{overflow:hidden;background:var(--sand)}
.hotel-figs img{width:100%;aspect-ratio:4/5;object-fit:cover}
.cat-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}

/* ---------- Zitat-Band ---------- */
.quote-band{position:relative;padding:clamp(152px,calc(19.2vh + 26px),254px) 0;overflow:hidden;text-align:center}
.quote-img{position:absolute;inset:0;background-size:cover;background-position:center}
.quote-band::after{content:"";position:absolute;inset:0;background:rgba(14,16,12,.62)}
.quote-liquid{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.4s ease;pointer-events:none}
.quote-band--liquid .quote-liquid{opacity:1}
.quote-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.quote-inner p{
  font-family:var(--f-display);color:#fff;font-weight:300;
  font-size:clamp(26px,3.4vw,52px);line-height:1.18;letter-spacing:-.01em;
  max-width:26ch;margin-left:auto;margin-right:auto;text-wrap:balance;
}
.quote-inner span{display:block;margin-top:30px;font-size:15px;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.92)}

/* ---------- B2B ---------- */
.b2b{background:var(--sand);padding:clamp(90px,13vh,170px) 0}
.b2b-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,100px)}
.b2b h2{max-width:16ch}
.b2b .lead{max-width:44ch;margin-top:26px}
.toolkit{margin-top:8px}
.toolkit h4{font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin:30px 0 16px;color:var(--charcoal)}
.toolkit ul{list-style:none;columns:2;column-gap:34px}
.toolkit li{font-size:14.5px;color:var(--charcoal-soft);padding:5px 0;break-inside:avoid}
.toolkit li::before{content:"";display:inline-block;width:.9em;height:1px;background:var(--muted);margin-right:10px;vertical-align:middle}
.b2b-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}

/* ---------- 2.11 Unterseite „Fuer Partner" ----------
   Der gesamte Block mit Product Toolkit, B2B-Konditionen und Provisionen hat
   die Startseite verlassen (Entscheidung von Per, Option A). Die Kopfzeile ist
   fest und hell, deshalb braucht die Seite oben Luft statt eines Heros. */
.seiten-kopf{padding:calc(104px + clamp(48px,9vh,110px)) 0 clamp(24px,4vh,48px)}
.seiten-kopf h1{max-width:16ch;margin-top:clamp(18px,2.2vh,30px)}
.seiten-kopf .lead{max-width:68ch;margin-top:28px;text-align:left}
.b2b--seite{padding-top:clamp(40px,6vh,70px)}
/* 18: Toolkit-Spalte ist entfallen, der Block steht jetzt einspaltig und die
   Ueberschrift gross, der Knopf direkt darunter (Aenderungsdokument 22.09.2026). */
.b2b--seite .b2b-grid{grid-template-columns:minmax(0,1fr);align-items:start;max-width:62ch}
.b2b--seite .b2b-grid h2{font-size:clamp(30px,4.4vw,58px)}
.partner-cta{padding:clamp(70px,10vh,130px) 0 clamp(90px,13vh,170px);border-top:1px solid var(--line)}
.partner-cta h2{max-width:16ch}
.partner-cta .lead{max-width:62ch;margin-top:24px;text-align:left}
nav a.navlink[aria-current="page"]{opacity:1;font-weight:600}

/* ---------- Anfrage ---------- */
.contact{padding:clamp(90px,13vh,170px) 0}
/* 2.7 Mobil standen die Kontaktdaten ueber dem Formular, auf dem Desktop
   darunter. Jetzt sind Einleitung, Formular und Kontaktdaten drei eigene
   Rasterfelder: auf dem Desktop liegt das Formular rechts ueber beide Zeilen,
   mobil stapeln sie in der Reihenfolge Einleitung, Formular, Kontaktdaten. */
.contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(30px,4vw,100px) clamp(36px,6vw,100px);align-items:start}
.contact-intro{grid-column:1;grid-row:1}
.contact-grid > form{grid-column:2;grid-row:1 / span 2}
.contact-grid > .contact-aside{grid-column:1;grid-row:2}
.contact h2{max-width:13ch}
form{margin-top:6px}
.field{margin-bottom:26px}
.field label{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.field input,.field select,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:11px 0;font-family:var(--f-text);font-size:16px;font-weight:300;color:var(--charcoal);
  transition:border-color .4s ease;border-radius:0;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-bottom-color:var(--charcoal)}
.field textarea{resize:vertical;min-height:92px}
.field-2{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
.consent{display:flex;gap:12px;align-items:flex-start;margin:26px 0 30px}
.consent input{width:15px;height:15px;margin-top:4px;flex:0 0 auto;accent-color:var(--sage-deep)}
.consent label{font-size:12.5px;color:var(--muted);line-height:1.6;letter-spacing:0;text-transform:none}
.form-note{margin-top:22px;font-size:12.5px;color:var(--muted)}
.partner-only{display:none}
.partner-only.on{display:grid}
.contact-aside div{padding:17px 0;border-bottom:1px solid var(--line)}
.contact-aside .k{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.contact-aside .v{font-size:16px;color:var(--charcoal-soft)}

/* ---------- Footer ---------- */
/* 17: Fuss nicht mehr schwarz, sondern Sand mit dunkler Schrift
   (Aenderungsdokument 22.09.2026). */
footer{background:var(--sand);color:var(--charcoal-soft);padding:clamp(64px,8vh,100px) 0 40px;font-size:14px}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:44px;padding-bottom:52px;border-bottom:1px solid rgba(35,36,31,.18)}
/* Kombi-Logo im Fuss auf weissem Kasten, weil der Fuss dunkel ist und das Logo
   laut Kunde nur auf ruhigem, hellem Grund stehen darf (keine Farbaenderung). */
.f-logo{display:inline-block;background:#fff;border:1px solid #d1d3d4;border-radius:14px;padding:14px 20px;margin-bottom:22px}
.f-logo img{display:block;width:min(100%,380px);height:auto}
.f-legal{margin-top:22px;font-size:13px;line-height:1.75;color:var(--key);max-width:60ch}
footer h5{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--key);margin-bottom:20px;font-weight:500}
footer ul{list-style:none}
footer li{padding:5px 0}
footer a{color:var(--charcoal-soft)}
footer a:hover{color:var(--charcoal)}
/* 2.8 Newsletter war nur ein Link. Jetzt Eingabefeld und Knopf direkt im Fuss. */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  flex:1 1 150px;min-width:0;background:rgba(255,255,255,.07);color:#fff;
  border:1px solid rgba(255,255,255,.34);border-radius:0;padding:12px 14px;
  font-family:var(--f-text);font-size:15px;font-weight:300;transition:border-color .4s ease;
}
  flex:0 0 auto;cursor:pointer;background:#fff;color:var(--charcoal);border:1px solid #fff;
  font-family:var(--f-text);font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:500;padding:12px 22px;transition:background .4s ease,color .4s ease;
}
.f-arch{margin-top:6px;font-size:13.5px;line-height:1.75;color:var(--charcoal-soft);max-width:44ch}
.f-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-top:26px;font-size:13px;color:var(--charcoal-soft)}
.f-bottom nav{gap:24px}
.f-bottom a{font-size:12.5px;letter-spacing:0;text-transform:none}

/* ---------- 2.2 Mitlaufender Anfrage-Knopf, nur Mobil ----------
   Erscheint nach dem ersten Scrollen, verschwindet im Formularbereich und im
   Fuss, damit er dort nichts verdeckt. Unten ein Sicherheitsabstand fuer die
   Browserleiste auf dem Telefon. */
.cta-sticky{
  position:fixed;left:var(--pad);right:var(--pad);z-index:98;
  bottom:calc(14px + env(safe-area-inset-bottom));
  display:none;justify-content:center;text-align:center;
  background:var(--charcoal);color:#fff;border:1px solid var(--charcoal);
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;
  font-family:var(--f-text);padding:16px 22px;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.5);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .35s ease,transform .35s ease;
}
.cta-sticky.on{opacity:1;transform:none;pointer-events:auto}
@media (max-width:900px){ .cta-sticky{display:flex} }
@media (prefers-reduced-motion:reduce){ .cta-sticky{transition:none} }

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity 1.1s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .hero-img{animation:none;transform:none}
}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .step{border-bottom:1px solid var(--line);padding-left:0!important;padding-right:26px}
  .step:nth-child(2n){border-right:0;padding-left:26px!important}
  .toolkit ul{columns:1}
  .f-grid{grid-template-columns:1fr 1fr}
}
/* Gemessen 04.09.2026: Logo 257 px + Navigation 843 px (DE) brauchen ab 1250 px Platz,
   darunter uebernimmt der Burger. Englisch ist 51 px schmaler, Deutsch ist der Massstab. */
@media (max-width:1249px){
  nav .navlink{display:none}
  .menu-toggle{display:block}
}
@media (max-width:900px){
  .worlds-grid,.why-grid,.hotels-grid,.b2b-grid,.contact-grid,.world--klein,.aktiv{grid-template-columns:1fr}
  /* 2.7 Einspaltig gilt die Reihenfolge Einleitung, Formular, Kontaktdaten. */
  .contact-intro,.contact-grid > form,.contact-grid > .contact-aside{grid-column:1;grid-row:auto}
  .contact-intro{order:1} .contact-grid > form{order:2} .contact-grid > .contact-aside{order:3}
  .contact-aside{margin-top:6px!important}
  .j,.j:nth-child(even){grid-template-columns:1fr;direction:ltr}
  /* Seitenverhaeltnis zusammen mit Mindesthoehe ergab eine Mindestbreite von
     ueber 400px und damit Querueberlauf auf schmalen Handys (gemessen 22.09.2026). */
  .j figure{min-width:0}
  .j figure img{min-height:0;height:auto;aspect-ratio:16/10}
  .j-row{grid-template-columns:150px 1fr;gap:16px}
  .pillars div{flex:1 1 46%;border-bottom:1px solid var(--line)}
  .band{height:auto;padding:clamp(90px,16vh,140px) 0}
}
@media (max-width:600px){
  body{font-size:16px}
  /* Zweispaltige Angaben (Dauer, Ideal fuer, ...) zwangen die Programmkarte auf
     ueber 370px Mindestbreite und schoben die Seite auf schmalen Handys quer.
     Unter 600px steht der Begriff jetzt ueber der Angabe. Gemessen 22.09.2026. */
  .j,.j-body,.j figure{min-width:0}
  .j-row{grid-template-columns:1fr;gap:4px;padding:12px 0}
  .j-row dt{font-size:13px;letter-spacing:.02em}
  /* 2.6 Ziffer neben die Ueberschrift, damit 01 bis 05 als Ablauf lesbar sind. */
  .step{display:grid;grid-template-columns:auto 1fr;column-gap:18px;padding:24px 0 28px}
  .step-num{grid-row:1 / span 2;font-size:46px;margin:0;line-height:.86;align-self:start}
  .step h4{grid-column:2;align-self:center;margin-bottom:10px}
  .step ul{grid-column:2}
  .hero-img{background-position:64% 40%}
  .absender p{text-align:center}
  .hotel-figs{grid-template-columns:1fr 1fr;gap:10px}
  .steps{grid-template-columns:1fr}
  .step,.step:nth-child(2n){border-right:0;padding-left:0!important;padding-right:0}
  .field-2{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr;gap:34px}
  .hero-ctas .btn,.b2b-ctas .btn{width:100%;justify-content:center}
  .scroll-hint{display:none}
}
/* Mobile-Menü */
.mobile-nav{
  position:fixed;inset:0;z-index:99;background:var(--ivory);
  display:flex;flex-direction:column;justify-content:center;justify-content:safe center;
  gap:clamp(2px,0.8vh,8px);
  padding:clamp(92px,12vh,104px) var(--pad) clamp(18px,4vh,40px);
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;pointer-events:none;transition:opacity .45s ease;
}
.mobile-nav.open{opacity:1;pointer-events:auto}
.mobile-nav a{font-family:var(--f-display);font-size:clamp(30px,min(7vw,5.6vh),46px);font-weight:300;line-height:1.2;padding:clamp(2px,0.9vh,9px) 0}

/* ---------- Programme nach Saeulen (Aenderungsdokument 22.09.2026) ---------- */
.j-gruppe{margin-top:clamp(48px,6vw,86px)}
.j-gruppe:first-of-type{margin-top:clamp(34px,4vw,56px)}
.j-gruppe-titel{
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--key);
  padding-bottom:14px;margin-bottom:clamp(22px,3vw,38px);border-bottom:1px solid var(--line);
}

/* ---------- Rechtstexte (Impressum, Datenschutz) ---------- */
.rechtstext{padding:clamp(120px,16vh,190px) 0 clamp(70px,9vh,120px);background:var(--ivory)}
.rechtstext .wrap{max-width:74ch}
.rechtstext h1{margin-bottom:12px}
.rechtstext h2{
  font-family:var(--f-text);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--key);margin:42px 0 14px;font-weight:500;
}
.rechtstext p{font-size:16px;line-height:1.8;color:var(--charcoal-soft);margin-bottom:14px}
.rechtstext a{text-decoration:underline;text-underline-offset:3px}