/* ---- Tokens (aus LogoNeu.png abgeleitet, WCAG-AA-geprüft) ---- */
:root{
  --color-primary: #0C683F;
  --color-primary-dark: #094C2E;
  --color-accent: #B6D97C;
  --color-bg: #F7F9F5;
  --color-surface: #FFFFFF;
  --color-text: #1B231F;
  --color-text-muted: #5B655F;
  --color-border: #C9D2C9;
  --color-line: #DDE3DC; /* feine 1px-Rahmen (Karten), heller als --color-border */

  /* RGB-Tripel für rgba()-Verläufe/Schatten – gleiche Werte wie oben, nur als Kanäle */
  --color-primary-rgb: 12,104,63;
  --color-primary-dark-rgb: 9,76,46;
  --color-text-rgb: 27,35,31;
  --color-bg-rgb: 247,249,245;

  --radius: 14px;       /* Bilder, Hinweisboxen */
  --radius-card: 4px;   /* Karten bewusst kantiger als Bilder */
  /* Geometrische Sans, an den Schriftzug "WORLD OF WELLNESS" im Logo angeglichen
     (breite Versalien, runde O's, spitze W's) — kein exaktes Match, da eine
     Schriftart aus Pixeln nicht extrahierbar ist, sondern die ähnlichste
     verfügbare Google Font. */
  --font-display: "Jost", "Century Gothic", sans-serif;
  --font-body: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Lokal gehostete Schriften statt Google-Fonts-CDN — keine Verbindung zu
   Google-Servern mehr beim Seitenaufruf, kein Datenschutz-Hinweis dafür
   nötig. Dateien liegen in fonts/, Original von fonts.google.com bezogen. */
@font-face{
  font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/jost-400.woff2") format("woff2");
}
@font-face{
  font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/jost-500.woff2") format("woff2");
}
@font-face{
  font-family:"Jost";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/jost-600.woff2") format("woff2");
}
@font-face{
  font-family:"Work Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/work-sans-400.woff2") format("woff2");
}
@font-face{
  font-family:"Work Sans";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/work-sans-500.woff2") format("woff2");
}
@font-face{
  font-family:"Work Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/work-sans-600.woff2") format("woff2");
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--color-text);
  background:var(--color-bg);
  line-height:1.5;
}
img{max-width:100%;display:block;}

/* Leichter Grauschleier auf allen Foto-Motiven (Angebote, Regionsfotos,
   Säulen-Banner, Hero-Sunburst) – deutlich dezenter als der Schleier im
   Hero-Sunburst, nur damit die Farben insgesamt weniger knallig wirken.
   Logo/Wordmark-Grafiken bleiben bewusst unberührt (eigene Markenfarben,
   kein Foto). Trick: eine sehr große Inset-Box-Shadow legt sich wie eine
   Tönung über das Bild, ohne zusätzliches Markup zu brauchen. */
.pillar-banner,
.offer-card-image,
.page-hero-image,
.sunburst-slice{
  box-shadow: inset 0 0 0 999px rgba(var(--color-bg-rgb), .08);
}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:.01em;margin:0 0 .4em;line-height:1.15;}
p{margin:0 0 1em;}

.section-inner{max-width:1180px;margin:0 auto;padding:0 20px;}

h2{position:relative;padding-bottom:16px;display:inline-block;}
h2::after{
  content:"";position:absolute;left:0;bottom:0;
  width:56px;height:3px;border-radius:0;
  background:var(--color-primary);
}
.pillars .section-inner h2::after{left:50%;transform:translateX(-50%);}

.eyebrow{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.75rem;
  color:var(--color-primary);
  font-weight:600;
  margin-bottom:.5em;
}

.skip-link{
  position:absolute;left:-999px;top:0;background:var(--color-primary);color:var(--color-surface);padding:10px 16px;z-index:200;
}
.skip-link:focus{left:10px;top:10px;}

.btn{
  display:inline-block;
  padding:12px 24px;
  border-radius:999px;
  font-weight:600;
  font-size:.92rem;
  transition:background-color .12s ease-out, color .12s ease-out;
}
.btn:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px;}
.btn-primary{background:var(--color-primary);color:var(--color-surface);}
.btn-primary:hover{background:var(--color-primary-dark);}
.btn-outline{border:1.5px solid var(--color-primary);color:var(--color-primary);padding:10px 20px;}
.btn-outline:hover{background:var(--color-primary);color:var(--color-surface);}
.btn-light{background:var(--color-surface);color:var(--color-primary-dark);}
.btn-light:hover{background:var(--color-bg);}

/* ---- Header ---- */
.site-header{
  position:sticky;top:0;z-index:100;
  /* Deckendes Hintergrundfarbe statt rgba+blur: die Kombination aus
     position:sticky + backdrop-filter lässt iOS Safari beim Scrollen
     Seiteninhalt sichtbar über dem Header aufblitzen (Rendering-Bug in
     WebKit, tritt v.a. während der Adressleisten-Einblend-Animation auf).
     Mit einer voll deckenden Farbe entfällt der Blur-Effekt und damit
     der Auslöser komplett. */
  background:var(--color-bg);
  border-bottom:1px solid rgba(var(--color-primary-rgb),.12);
  transition:border-color .12s ease-out;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
}
.site-header.is-scrolled{
  border-bottom-color:var(--color-border);
}
.header-inner{
  max-width:1180px;margin:0 auto;padding:14px 20px;
  display:flex;align-items:center;gap:24px;
}
.logo{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-display);font-weight:600;font-size:1.3rem;
  letter-spacing:.01em;color:var(--color-primary-dark);
}
.logo-icon{height:28px;width:auto;}
.logo-wordmark{height:24px;width:auto;}
.main-nav{margin-left:auto;}
.main-nav ul{list-style:none;display:flex;gap:28px;margin:0;padding:0;}
.main-nav a{font-weight:500;font-size:.95rem;white-space:nowrap;}
.main-nav a:hover{color:var(--color-primary);}
.header-cta{margin-left:8px;}
.nav-toggle{
  display:none;background:none;border:0;padding:8px;margin-left:8px;cursor:pointer;
}
.nav-toggle span{
  display:block;width:22px;height:2px;background:var(--color-text);margin:5px 0;transition:transform .2s ease, opacity .2s ease;
}
.mobile-nav{display:none;}

/* 980px statt 860px: seit „Regionale Partner“ (5 Menüpunkte) passt das
   Desktop-Menü darunter nicht mehr in eine Zeile */
@media (max-width:980px){
  .main-nav, .header-cta{display:none;}
  .nav-toggle{display:block;}
  .mobile-nav{
    display:block;max-height:0;overflow:hidden;transition:max-height .25s ease;
    background:var(--color-bg);border-top:1px solid rgba(var(--color-primary-rgb),.12);
  }
  .mobile-nav.is-open{max-height:340px;}
  .mobile-nav ul{list-style:none;margin:0;padding:12px 20px;display:flex;flex-direction:column;gap:14px;}
  .mobile-nav a{font-weight:500;}
}

/* ---- Hero: großes Logo auf hellem Grund ----
   Die Logo-Datei hat dunkelgrünen Text ohne Weißvariante — auf dunklem Grund
   (die frühere Verlaufs-Version) wäre sie kaum lesbar. Deshalb hier bewusst
   heller Hintergrund, identisch zur Bild-Freistellung, damit keine Kante
   sichtbar ist. */
.hero{
  position:relative;
  padding:90px 20px 20px;
  background:var(--color-bg);
  display:flex;align-items:center;justify-content:center;
  text-align:center;
}
.hero-inner{position:relative;z-index:1;padding:0 20px;max-width:780px;}
.hero-logo{
  width:min(85%, 520px, 58vw); /* 58vw: bleibt im Verhältnis zum Halbkreis (94vw) */
  height:auto;
  margin:0 auto 22px;
}
.hero h1{
  font-size:clamp(1.7rem, 3.4vw, 2.4rem);
  margin:0 0 .4em;
  color:var(--color-text);
}
.hero p{
  font-size:clamp(1.05rem, 2vw, 1.25rem);
  color:var(--color-text-muted);
  margin:0 0 1.4em;
  font-weight:500;
}

/* ---- Hero-Sunburst: 5 Fotos im Halbkreis hinter dem Logo, wie eine
   aufgehende Sonne, in 5 gleiche Segmente geteilt (wie eine Pizza).
   Grauer Schleier drüber, damit es dezent im Hintergrund bleibt und nicht
   von Logo/Text ablenkt. Auf schmalen Screens ausgeblendet, da dort kein
   Platzproblem besteht und der Halbkreis zu gedrängt wirken würde. */
.hero-sunburst{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:min(94vw, 900px);
  aspect-ratio:2/1;
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  overflow:hidden;
  z-index:0;
  pointer-events:none;
}
.hero-sunburst::after{
  content:"";
  position:absolute;inset:0;
  background:rgba(var(--color-bg-rgb),.82);
}
.sunburst-slice{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
}
/* Zwischen den Segmenten liegt bewusst eine kleine Winkel-Lücke (statt exakt
   36°-Grenzen), durch die der Hero-Hintergrund durchscheint – wirkt wie ein
   dünner Rand in Hintergrundfarbe, damit die Segmente nicht aneinandergeklatscht
   wirken. */
.sunburst-slice:nth-child(1){clip-path:polygon(50% 100%, 8.55% 44.08%, 5.06% 56.16%, 2.45% 69.10%, 0.76% 82.64%, 0.03% 96.51%);}
.sunburst-slice:nth-child(2){clip-path:polygon(50% 100%, 32.90% 6.03%, 26.53% 11.71%, 20.61% 19.10%, 15.27% 28.07%, 10.60% 38.43%);}
.sunburst-slice:nth-child(3){clip-path:polygon(50% 100%, 63.78% 3.87%, 56.96% 0.97%, 50.00% 0%, 43.04% 0.97%, 36.22% 3.87%);}
.sunburst-slice:nth-child(4){clip-path:polygon(50% 100%, 89.40% 38.43%, 84.74% 28.07%, 79.39% 19.10%, 73.48% 11.71%, 67.10% 6.03%);}
.sunburst-slice:nth-child(5){clip-path:polygon(50% 100%, 99.97% 96.51%, 99.24% 82.64%, 97.55% 69.10%, 94.94% 56.16%, 91.45% 44.08%);}

@media (max-width:640px){
  .hero-sunburst{display:none;}
  .hero{padding:48px 20px 20px;}
  .hero-logo{width:min(85%, 380px);}
}

/* ---- Pillars (Wellnessreisen / Beauty & Pflege) ---- */
.pillars{padding:30px 0 76px;text-align:center;}
.pillar-grid{
  display:grid;grid-template-columns:repeat(2, 1fr);gap:28px;margin-top:36px;text-align:left;
}
.pillar-card{
  display:block;
  background:var(--color-surface);
  border-radius:var(--radius-card);
  overflow:hidden;
  border:1px solid var(--color-line);
  box-shadow:0 1px 3px rgba(var(--color-text-rgb),.06);
  transition:border-color .15s ease-out, box-shadow .15s ease-out, transform .15s ease-out;
}
.pillar-card:hover{border-color:var(--color-primary);transform:translateY(-2px);box-shadow:0 6px 16px rgba(var(--color-text-rgb),.09);}
.pillar-card h3{transition:color .12s ease-out;}
.pillar-card:hover h3{color:var(--color-primary);}
.pillar-banner{width:100%;height:190px;object-fit:cover;display:block;}
.pillar-card-body{padding:26px 28px 30px;}
.pillar-card .eyebrow{margin-bottom:.4em;}
.pillar-card p{color:var(--color-text-muted);}

@media (max-width:700px){
  .pillar-grid{grid-template-columns:1fr;}
}

/* ---- Regions-Kacheln (Wellnessreisen-Hub) ---- */
.region-grid{
  display:grid;grid-template-columns:repeat(3, 1fr);gap:28px;margin-top:36px;text-align:left;
}

@media (max-width:900px){
  .region-grid{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:560px){
  .region-grid{grid-template-columns:1fr;}
}

/* ---- Zurück-Link auf Regions-Unterseiten ---- */
.back-link{margin-bottom:1.6em;}
.back-link a{font-size:.92rem;color:var(--color-text-muted);}
.back-link a:hover{color:var(--color-primary-dark);}

/* ---- Footer ---- */
.site-footer{background:var(--color-primary-dark);color:var(--color-bg);padding:44px 0;}
.footer-inner{
  display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;
}
.footer-brand{height:22px;width:auto;display:block;}
.footer-nav{display:flex;gap:18px;}
.footer-nav a{font-size:.85rem;opacity:.85;}
.footer-nav a:hover{opacity:1;text-decoration:underline;}
.copyright{font-size:.78rem;opacity:.6;margin:0;width:100%;text-align:center;order:99;}

@media (max-width:620px){
  .footer-inner{flex-direction:column;text-align:center;}
}

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

/* ---- Werbekennzeichnung (§ 5a UWG) ----
   Bei jedem Affiliate-Link direkt anzubringen, nicht nur als
   allgemeiner Hinweis irgendwo auf der Seite. */
.ad-label{
  display:inline-block;
  font-family:var(--font-display);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--color-primary-dark);
  background:rgba(var(--color-primary-rgb),.14);
  border-radius:3px;
  padding:3px 9px;
}

/* ---- Über uns ---- */
.about{padding:64px 0 88px;}
.about h1{font-size:clamp(2rem, 4vw, 2.6rem);margin-bottom:.3em;}
.about-intro{max-width:64ch;font-size:1.1rem;color:var(--color-text);font-weight:500;}
.about p{max-width:64ch;}
.partner-heading{margin-top:2em;}
/* Links im Fließtext erkennbar machen (Über uns, Regionale Partner) */
.about p a{color:var(--color-primary);text-decoration:underline;text-underline-offset:3px;}
.about p a:hover{color:var(--color-primary-dark);}

/* ---- Regionale Partner ---- */
.regional h2{font-size:1.35rem;margin:1.8em 0 .5em;}
.regional .offers-notice{margin:1.4em 0 0;}
.partner-grid{display:flex;flex-wrap:wrap;gap:14px;}
.partner-badge{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  padding:14px 26px;
  height:60px;
}
.partner-badge img{max-height:100%;max-width:160px;width:auto;object-fit:contain;}

/* ---- Seiten-Hero-Bilder (Wellnessreisen, Beauty & Pflege, Über uns) ---- */
.page-hero-image{
  width:100%;
  max-height:320px;
  object-fit:cover;
  border-radius:var(--radius);
  margin:28px 0 40px;
  display:block;
}
.page-hero-image--low{object-position:center 70%;}

/* ---- Angebots-Karten (Wellnessreisen, Beauty & Pflege) ---- */
.offers{padding:64px 0 88px;}
.offers h1{font-size:clamp(2rem, 4vw, 2.6rem);margin-bottom:.3em;}
.offers-intro{max-width:64ch;color:var(--color-text-muted);margin-bottom:2.4em;}

.offer-grid{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));gap:24px;
}
.offer-card{
  display:block;
  background:var(--color-surface);
  border-radius:var(--radius-card);
  overflow:hidden;
  border:1px solid var(--color-line);
  box-shadow:0 1px 3px rgba(var(--color-text-rgb),.06);
  transition:border-color .15s ease-out, box-shadow .15s ease-out, transform .15s ease-out;
}
.offer-card:hover{border-color:var(--color-primary);transform:translateY(-2px);box-shadow:0 6px 16px rgba(var(--color-text-rgb),.09);}
.offer-card h3{transition:color .12s ease-out;}
.offer-card:hover h3{color:var(--color-primary);}
.offer-card-image{
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
}
.offer-card-body{padding:28px 26px;}
.offer-card .ad-label{margin-bottom:.9em;}
.offer-card .eyebrow{margin-top:0;margin-bottom:.2em;}
.offer-card h3{margin-bottom:.4em;}
.offer-card p:last-child{color:var(--color-text-muted);margin-bottom:0;}

/* Pausierte Karten (Partner-Shop derzeit nicht lieferfähig, s. beauty-pflege.html) */
.offer-card--paused{opacity:.6;cursor:default;}
.offer-card--paused:hover{border-color:var(--color-line);transform:none;box-shadow:0 1px 3px rgba(var(--color-text-rgb),.06);}
.offer-card--paused:hover h3{color:inherit;}
.offer-card .status-label{
  display:inline-block;margin-bottom:.9em;
  font-family:var(--font-display);font-size:.68rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--color-text-muted);background:rgba(var(--color-text-rgb),.08);
  border-radius:3px;padding:3px 9px;
}
.offers-notice{
  max-width:64ch;margin:-1.2em 0 2.4em;padding:14px 18px;
  border-left:3px solid var(--color-primary);background:rgba(var(--color-primary-rgb),.08);
  border-radius:0 var(--radius-card) var(--radius-card) 0;font-weight:500;
}

.offer-why{
  font-size:.88rem;
  color:var(--color-primary-dark);
  background:rgba(var(--color-primary-rgb),.08);
  border-radius:8px;
  padding:9px 13px;
  margin:.9em 0 0 !important;
}
.offer-why strong{font-weight:600;}

/* ---- Beauty & Pflege: Zwei Spalten (Für Sie / Für Ihn) ---- */
.beauty-columns{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;
}
.beauty-column h2{font-size:1.3rem;margin-bottom:1em;}
.beauty-grid{display:flex;flex-direction:column;gap:20px;}

@media (max-width:820px){
  .beauty-columns{grid-template-columns:1fr;gap:56px;}
}

/* ---- Cookie-Banner ---- */
.cookie-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:300;
  background:var(--color-surface);
  border-top:1px solid var(--color-border);
  box-shadow:0 -2px 6px rgba(var(--color-text-rgb),.05);
  padding:20px;
}
.cookie-banner[hidden]{display:none;}
.cookie-banner-inner{
  max-width:1180px;margin:0 auto;
  display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;
}
.cookie-banner-inner p{margin:0;max-width:60ch;font-size:.92rem;color:var(--color-text-muted);}
.cookie-banner-actions{display:flex;gap:12px;flex-shrink:0;}

@media (max-width:620px){
  .cookie-banner-inner{flex-direction:column;align-items:stretch;text-align:left;}
  .cookie-banner-actions{justify-content:flex-end;}
}

/* ---- Legal- / Platzhalterseiten ---- */
.legal{padding:64px 0 88px;}
.legal h1{font-size:clamp(2rem, 4vw, 2.6rem);margin-bottom:.6em;}
.legal p{max-width:70ch;}
.legal .todo-note{
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:18px 22px;
  font-size:.92rem;color:var(--color-text-muted);margin-bottom:2em;
}

/* ---- Feinschliff 28.09. ----
   Hauchfeine Papierstruktur über der ganzen Seite (ca. 3 %), klickt nicht mit. */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:400;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{transition:color .12s ease-out;}

/* ---- Startseite: Inhalte unter dem Hero (29.09.) ---- */
.hero-actions{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;justify-content:center;}
.text-link{color:var(--color-primary);font-weight:500;text-decoration:underline;text-underline-offset:3px;}
.text-link:hover{color:var(--color-primary-dark);}

.home-intro{max-width:66ch;margin:18px auto 0;text-align:left;color:var(--color-text);}
.home-intro p{margin-bottom:.9em;}

.regional-teaser{padding:0 0 10px;}
.regional-teaser .section-inner > p{
  margin:0;padding:18px 0;border-top:1px solid var(--color-line);border-bottom:1px solid var(--color-line);
  max-width:none;
}
.regional-teaser a,.contact-cta a{color:var(--color-primary);font-weight:500;text-decoration:underline;text-underline-offset:3px;}
.regional-teaser a:hover,.contact-cta a:hover{color:var(--color-primary-dark);}

.faq{padding:54px 0 30px;}
.faq-item{max-width:70ch;padding:16px 0 6px;border-top:1px solid var(--color-line);}
.faq-item:first-of-type{margin-top:22px;}
.faq-item h3{font-size:1.08rem;margin-bottom:.35em;}
.faq-item p{color:var(--color-text-muted);}

.contact-cta{padding:10px 0 66px;}
.contact-cta p{margin:0;padding:6px 0 6px 16px;border-left:3px solid var(--color-primary);max-width:70ch;}

/* Überschrift nur für Screenreader/Suchmaschinen (Gliederung), nicht sichtbar */
.visually-hidden{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* E-Mail-Adressen nie am Bindestrich umbrechen */
a[href^="mailto:"]{white-space:nowrap;}

/* Sprungziele (z. B. impressum.html#kontakt) nicht unter dem festen Header verstecken */
[id]{scroll-margin-top:90px;}