/* ============================================================
   INSELNAUTEN WELT — brand.css
   Zentrale, geteilte Stylesheet-Basis für alle 5 Seiten.
   Jede Seite lädt nur diese Datei + ihre eigene page-*.css (optional).
   Schriften: Fraunces + DM Sans (Google, self-hostbar, siehe /fonts).
   ============================================================ */

/* ---------- SELF-HOSTED FONTS ----------
   Variable woff2 liegen in /public/fonts/ (aus Google Fonts, OFL, Latin-Subset).
   Kein Google-CDN mehr -> DSGVO-konform. preload der Hauptschriften im BaseLayout. */
@font-face{
  font-family:'Fraunces';
  src:url('../fonts/fraunces-var.woff2') format('woff2');
  font-weight:400 600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Fraunces';
  src:url('../fonts/fraunces-italic-var.woff2') format('woff2');
  font-weight:400 500; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'DM Sans';
  src:url('../fonts/dmsans-var.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
}

/* ============================================================
   DESIGN TOKENS — semantisch benannt, feste Hex-Werte
   ============================================================ */
:root{
  /* Marken-Kern (Abundance Petrol-Aqua), gilt überall */
  --color-heading:      #035576;
  --color-heading-deep: #023A52;  /* fest, für Hero-BG / Nav */
  --color-text:         #003C44;
  --color-text-soft:    #4A6266;
  --color-quote:        #007789;
  --color-primary:      #047FB1;  /* Button primär */
  --color-primary-hov:  #0A6F9B;  /* fest */
  --color-primary-deep: #004C51;  /* Button dunkel */
  --color-primary-deep-hov:#016066; /* fest */
  --color-bar:          #5DB3B9;
  --color-bar-deep:     #035576;

  /* Geteilter Akzent (Sandgold) — die warme Brücke über alle Seiten */
  --color-accent:       #C5AD6E;
  --color-accent-deep:  #A8915A;  /* fest */
  --color-accent-ink:   #6D5B2C;  /* fest, Text/Icons auf hellem Grund (AA-Kontrast) */

  /* Coral Doctors — nur auf der Charity-Seite verwenden */
  --cd-yellow:          #F3DD02;
  --cd-blue:            #3571B2;
  --cd-gold:            #C5AD6E;

  /* Flächen / Neutral */
  --color-bg:           #FCFCFC;
  --color-surface:      #FFFFFF;
  --color-surface-cool: #E3F1F2;  /* helle Aqua-Fläche */
  --color-line:         #E6E6E6;
  --color-line-cool:    #C5DEE0;
  --color-white:        #FFFFFF;

  /* Status */
  --color-ok:           #007789;
  --color-warn:         #A8915A;
  --color-full:         #004C51;

  /* Typografie */
  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-text:'DM Sans', system-ui, -apple-system, sans-serif;

  --fs-xs:.78rem; --fs-sm:.9rem; --fs-base:1.05rem; --fs-md:1.25rem;
  --fs-lg:1.6rem; --fs-xl:2.2rem; --fs-2xl:3.2rem; --fs-3xl:4.4rem;

  /* Radius / Schatten / Maße */
  --r-sm:6px; --r-md:14px; --r-lg:24px; --r-pill:999px;
  --shadow-card:0 4px 24px -8px rgba(3,60,68,.16);
  --shadow-soft:0 12px 44px -14px rgba(3,60,68,.30);
  --maxw:1140px;
  --gutter:24px;
}

/* ============================================================
   RESET / BASIS
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-text);
  color:var(--color-text);
  background:var(--color-bg);
  line-height:1.65;
  font-size:var(--fs-base);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;line-height:1.1;color:var(--color-heading)}
h1{font-size:var(--fs-3xl);letter-spacing:-.02em}
h2{font-size:var(--fs-2xl);letter-spacing:-.01em}
h3{font-size:var(--fs-xl)}
h4{font-size:var(--fs-md)}
p{margin:0 0 1em}
a{color:var(--color-primary);text-decoration:none;transition:color .15s}
a:hover{color:var(--color-primary-hov)}

/* ============================================================
   LAYOUT-HILFEN
   ============================================================ */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.section{padding:72px 0}
.section--cool{background:var(--color-surface-cool);position:relative;overflow:hidden}
.section--cool::after{content:"";position:absolute;left:-60px;bottom:-40px;width:280px;height:280px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 709 709'><path fill='%23035576' d='m349.2 168.8c-54.1-6.5-65 94.5-26.8 120 24.1 16.1 50.5 10.9 67.1 43.3 36.9 71.6-78.2 120.7-131.8 142.4-57.3 23.3-117.5 29.9-126 95.4-8.5 65.3 49.7 116.6 110.9 95.7 50.6-17.3 62.2-60.7 85.9-99.5 52.3-85.8 172.2-117.7 206.4-200.2 8.1-30.9 8.6-60.8-5.5-88.6-11.1-27.7-26.4-46.8-52.5-71.1-36.3-33.8-69.4-12.3-79.2-11.7-16.2 1-22.1-22.6-48.6-25.7z'/><path fill='%23035576' d='m411.6 40c-23.7 7.7-40.4 32.8-45.5 57.9-7.9 58.9 36.2 76.3 74.2 40 17.8-17.4 26.9-44.8 21.9-69.6C457 44.5 438.1 29.9 411.6 40z'/><path fill='%23035576' d='M533 93.4c-2-27.1-19.8-34.5-36.8-26.8-24.5 11-35.2 70.1-19.5 86.2 14.2 14.5 60.7-30.5 56.3-59.4z'/><path fill='%23035576' d='m584.9 148.9c4.1-24.7-10.5-36.5-27.7-34.7-24.8 2.5-47.5 52-36.7 71 9.8 17.1 62.1-9.2 64.4-36.2z'/><path fill='%23035576' d='m604 219.1c7.1-21.2-2.4-35.3-16.1-37.9-19.7-3.7-45.2 35.3-39.8 54.9 4.9 17.8 49.8 6.7 55.9-17z'/><path fill='%23035576' d='m574.5 302.1c29.4 5 37.5-42.7 16.6-45.7-13.7-1.6-21.4 2.8-27.8 12-9 13-7.4 26.9 11.1 33.7z'/></svg>") center/contain no-repeat;
  opacity:.06;transform:rotate(20deg);pointer-events:none}
.section--cool .wrap{position:relative;z-index:1}
.section--deep{background:var(--color-heading-deep);color:#eaf6f7}
.section--deep h2,.section--deep h3{color:#fff}
.kicker{text-transform:uppercase;letter-spacing:.22em;font-size:var(--fs-xs);
  color:var(--color-quote);font-weight:600;display:block;margin-bottom:10px}
/* Sandgold-Kicker auf Fotos (Portfolio-Karten, Coral-Block, Hero): Kontrast
   schwankt zu stark mit dem Bild darunter (auf hellem Sand kaum lesbar). Statt
   reinem Text bekommt der Kicker hier eine kleine dunkle Chip-Fläche als
   Untergrund, das sichert Lesbarkeit unabhängig vom Bildinhalt. break-word,
   weil einzelne Kicker (z.B. "Korallenschutz") ein langes, unteilbares Wort
   ohne Leerzeichen sind und sonst über den schmalen Karten-Rand hinauslaufen
   (wurde vom Karten-`overflow:hidden` abgeschnitten). display:inline statt
   inline-block + box-decoration-break:clone, damit bei zweizeiligen Kickern
   ("Blog & Podcast", "Safaris & Charter", "Korallen­schutz") JEDE Zeile ihre
   eigene eng anliegende Pille bekommt, statt einer großen Box um beide Zeilen
   mit viel Leerraum um die kürzere Zeile. */
.kicker--chip{display:inline;color:var(--color-accent);
  background:rgba(2,29,41,.6);padding:.35em .8em;border-radius:var(--r-pill);
  overflow-wrap:break-word;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* display:inline killt den margin-bottom der Basis-.kicker-Regel (Margin
   wirkt vertikal nicht auf Inline-Elemente) -> Abstand stattdessen über
   margin-top der nachfolgenden Überschrift herstellen. */
.kicker--chip + h1, .kicker--chip + h2, .kicker--chip + h3{margin-top:10px}
.lead{color:var(--color-text-soft);max-width:64ch;font-size:var(--fs-md)}
.center{text-align:center}.center .lead{margin-inline:auto}

/* Spacing-Utilities: ersetzen vereinzelte Inline-Styles auf der Startseite. */
.mb-md{margin-bottom:24px}
.mb-lg{margin-bottom:36px}
.mt-md{margin-top:18px}
.mt-sm{margin-top:6px}

/* Sichtbarer Fokusring für Tastaturnutzung (WCAG AA). Der Standard-Browser-
   Outline war auf den dunklen Flächen (Header/Hero/Footer) kaum sichtbar. */
:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;border-radius:2px}

/* Skip-Link: erstes fokussierbares Element im Body, unsichtbar bis Fokus. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;
  background:var(--color-heading-deep);color:#fff;font-weight:600;
  padding:.75em 1.25em;border-radius:0 0 var(--r-sm) 0}
.skip-link:focus{left:0}

/* ============================================================
   HEADER / NAV  (identisch auf allen Seiten)
   ============================================================ */
.site-header{background:var(--color-heading-deep);position:sticky;top:0;z-index:50}
.site-header .wrap{display:flex;align-items:center;gap:20px;padding-block:14px}
.brand-logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);
  font-size:var(--fs-md);color:#fff;font-weight:600}
.brand-logo svg{width:30px;height:30px}
.site-nav{margin-left:auto;display:flex;gap:24px;flex-wrap:wrap;align-items:center}
.site-nav a{color:rgba(255,255,255,.82);font-size:var(--fs-sm);font-weight:500}
/* .nav-link--coming-soon ist ein <span>, kein <a> -> ohne diese Regel fällt
   "Guide" auf Basis-Schriftgröße/-gewicht zurück und wirkt neben den echten
   Links wie eine andere Schriftart. */
.site-nav .nav-link--coming-soon{font-size:var(--fs-sm);font-weight:500}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--color-accent)}
.nav-link--coming-soon{color:rgba(255,255,255,.82);opacity:.45;cursor:default;pointer-events:none}
.nav-coming-soon-badge{font-size:.65rem;font-family:var(--font-text);letter-spacing:.05em;
  text-transform:uppercase;background:var(--color-accent);color:var(--color-heading-deep);
  padding:.1em .4em;border-radius:3px;margin-left:.35em;vertical-align:middle}
.nav-toggle{display:none;margin-left:auto;background:none;border:0;color:#fff;padding:0;
  cursor:pointer;align-items:center;justify-content:center}
.nav-toggle__icon--close{display:none}
.nav-toggle.is-open .nav-toggle__icon--open{display:none}
.nav-toggle.is-open .nav-toggle__icon--close{display:flex}

/* Anruf-Icon + CTA-Pille: geteilt zwischen der Desktop-Nav (rechts, klassisch)
   und der schwebenden Mobil-Kapsel (siehe @media unten), Vorbild war eine
   fremde Reiseseite mit fixierter Hover-Leiste im Mobilbereich. */
.header-actions{display:flex;align-items:center;gap:10px;margin-left:16px}
.header-call{width:40px;height:40px;border-radius:999px;display:flex;align-items:center;
  justify-content:center;color:#fff;background:rgba(255,255,255,.22);flex:0 0 auto}
.header-call svg{stroke-width:2.25}
.header-call:hover{background:rgba(255,255,255,.32);color:var(--color-accent)}
.header-cta{background:var(--color-accent);color:var(--color-heading-deep);font-weight:600;
  font-size:var(--fs-sm);padding:.6em 1.2em;border-radius:999px;white-space:nowrap}
.header-cta:hover{background:var(--color-accent-deep);color:#fff}

@media(max-width:820px){
  /* Header löst sich vom oberen Rand: schwebende Kapsel statt volle Leiste,
     Logo tritt dafür zurück (taucht stattdessen im aufgeklappten Menü wieder auf). */
  .site-header{position:fixed;top:12px;left:12px;right:12px;background:none;z-index:60}
  .site-header .wrap{background:rgba(2,58,82,.92);backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);border-radius:999px;padding:8px 8px 8px 18px;
    gap:8px;box-shadow:0 8px 24px rgba(2,20,28,.28)}
  /* Füllt die sonst leere blaue Fläche zwischen Hamburger und Anruf/CTA statt
     das Logo ganz auszublenden. flex:1 + justify-content:center zentriert es
     in genau diesem Freiraum, clamp() hält den Text auf sehr schmalen Screens
     klein genug. min-width:0 ist Pflicht: ohne das verweigert der Flex-Item
     das Schrumpfen unter seine Inhaltsbreite, wodurch Icon+Text (zentriert)
     auf beiden Seiten symmetrisch abgeschnitten würden statt sauber zu
     schrumpfen. Das Icon bleibt dank flex:0 0 auto immer in voller Größe
     sichtbar, nur der Schriftzug bekommt bei Platznot "…" (siehe __text). */
  .brand-logo{display:flex;flex:1;min-width:0;justify-content:center;gap:6px;
    font-size:clamp(.8rem,3.6vw,1rem)}
  .brand-logo svg{width:22px;height:22px;flex:0 0 auto}
  .brand-logo__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .nav-toggle{display:flex;margin-left:0}
  .header-actions{margin-left:auto}
  .header-cta{padding:.6em 1em}
  .site-nav{display:none;position:fixed;top:76px;left:12px;right:12px;margin-left:0;
    background:var(--color-heading-deep);border-radius:20px;padding:22px;
    flex-direction:column;align-items:flex-start;gap:16px;
    box-shadow:0 8px 24px rgba(2,20,28,.28);max-height:calc(100vh - 96px);overflow-y:auto}
  .site-nav.open{display:flex}
  /* Die meisten ersten Sektionen sind Bild-/Verlaufs-Hero und sollen bis ganz nach
     oben reichen, damit die Kapsel darüber schwebt (kein weißer Balken). Nur die
     paar Fälle mit knapper Kopf-Polsterung bekommen etwas mehr Luft, damit ihr
     Text nicht unter der Kapsel verschwindet. */
  main > .section:first-child{padding-top:84px}
  .blog-hero{padding-top:84px}
  .faqpost-hero__inner{padding-top:84px}
}

/* ============================================================
   LOGO (Fußabdruck) — Form/Farbe in src/components/Logo.astro.
   Wunsch: die fünf Zehen poppen dauerhaft nacheinander, ganz ohne Hover.
   ============================================================ */
@keyframes toe-pop{
  0%   { transform:scale(1) }
  8%   { transform:scale(1.28) }
  16%  { transform:scale(.95) }
  24%  { transform:scale(1) }
  100% { transform:scale(1) }
}
/* Jeder Zeh skaliert um seine eigene Mitte (fill-box), die Sohle bleibt ruhig. */
.logo-print .toe{
  transform-box:fill-box; transform-origin:center;
  animation:toe-pop 2.4s ease-in-out infinite;
}
/* Versatz erzeugt die Welle entlang der Zehenreihe.
   Pfad-Reihenfolge im SVG: 1 = Sohle, 2..6 = Zehen. */
.logo-print path:nth-of-type(2){ animation-delay:0s }
.logo-print path:nth-of-type(3){ animation-delay:.16s }
.logo-print path:nth-of-type(4){ animation-delay:.32s }
.logo-print path:nth-of-type(5){ animation-delay:.48s }
.logo-print path:nth-of-type(6){ animation-delay:.64s }

/* Barrierefreiheit: Wer "Bewegung reduzieren" wählt, bekommt keine Dauer-Animation. */
@media(prefers-reduced-motion:reduce){
  .logo-print .toe{ animation:none }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{background:linear-gradient(155deg,var(--color-heading-deep),var(--color-heading) 55%,var(--color-quote));
  color:#fff;padding:96px 0 84px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-40px;bottom:-60px;width:360px;height:360px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 709 709'><path fill='white' d='m349.2 168.8c-54.1-6.5-65 94.5-26.8 120 24.1 16.1 50.5 10.9 67.1 43.3 36.9 71.6-78.2 120.7-131.8 142.4-57.3 23.3-117.5 29.9-126 95.4-8.5 65.3 49.7 116.6 110.9 95.7 50.6-17.3 62.2-60.7 85.9-99.5 52.3-85.8 172.2-117.7 206.4-200.2 8.1-30.9 8.6-60.8-5.5-88.6-11.1-27.7-26.4-46.8-52.5-71.1-36.3-33.8-69.4-12.3-79.2-11.7-16.2 1-22.1-22.6-48.6-25.7z'/><path fill='white' d='m411.6 40c-23.7 7.7-40.4 32.8-45.5 57.9-7.9 58.9 36.2 76.3 74.2 40 17.8-17.4 26.9-44.8 21.9-69.6C457 44.5 438.1 29.9 411.6 40z'/><path fill='white' d='M533 93.4c-2-27.1-19.8-34.5-36.8-26.8-24.5 11-35.2 70.1-19.5 86.2 14.2 14.5 60.7-30.5 56.3-59.4z'/><path fill='white' d='m584.9 148.9c4.1-24.7-10.5-36.5-27.7-34.7-24.8 2.5-47.5 52-36.7 71 9.8 17.1 62.1-9.2 64.4-36.2z'/><path fill='white' d='m604 219.1c7.1-21.2-2.4-35.3-16.1-37.9-19.7-3.7-45.2 35.3-39.8 54.9 4.9 17.8 49.8 6.7 55.9-17z'/><path fill='white' d='m574.5 302.1c29.4 5 37.5-42.7 16.6-45.7-13.7-1.6-21.4 2.8-27.8 12-9 13-7.4 26.9 11.1 33.7z'/></svg>") center/contain no-repeat;
  opacity:.07;transform:rotate(12deg)}
.hero .wrap{position:relative;z-index:1}
.hero h1{color:#fff;max-width:18ch;margin-bottom:18px}
.hero .kicker{color:var(--color-accent)}
.hero p{color:rgba(255,255,255,.86);max-width:54ch;font-size:var(--fs-md);margin-bottom:28px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}

/* HERO — Hub-Variante der Startseite: Vollbild-Medium (Bild/Video) + Overlay.
   Lässt die Gradient-.hero der Unterseiten unangetastet. */
.hero--home{padding:0;min-height:84vh;display:flex;align-items:flex-end;
  background:var(--color-heading-deep)}
.hero--home::after{display:none} /* dekorativen Fußabdruck hier ausblenden */
.hero__media{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0}
.hero__overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(
  to top, rgba(2,29,41,.85) 0%, rgba(2,29,41,.45) 42%, rgba(2,29,41,.12) 100%)}
.hero--home .hero__inner{position:relative;z-index:2;padding-block:52px;width:100%;
  text-shadow:0 1px 14px rgba(2,29,41,.35)}
.hero--home h1{color:#fff;max-width:15ch;margin-bottom:14px}
.hero--home .kicker{color:var(--color-accent)}
.hero__sub{color:rgba(255,255,255,.94);font-size:var(--fs-md);font-weight:500;
  max-width:34ch;margin-bottom:30px}
@media(min-width:760px){
  .hero--home{min-height:78vh}
  .hero--home .hero__inner{padding-block:72px}
}

/* ============================================================
   TRUST-LEISTE (Sektion 2) — 4 Kennzahlen, 2x2 mobil, 4 nebeneinander ab 760px
   ============================================================ */
/* minmax(0,1fr) statt 1fr: sonst bläht ein langes Wort wie "KORALLENGÄRTNER"
   eine Spalte auf und schiebt die rechten Kacheln über den Rand. */
.trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.trust__item{min-width:0;background:var(--color-surface);border:1px solid var(--color-line);
  border-radius:var(--r-md);padding:28px 14px;text-align:center}
.trust__num{font-family:var(--font-display);font-size:var(--fs-2xl);
  color:var(--color-heading);line-height:1;font-weight:500}
.trust__foot{width:1em;height:1em;vertical-align:-.1em;margin-right:.15em;color:var(--color-accent-ink);display:inline-block}
@media(max-width:599px){.trust__foot{display:none}}
.trust__label{display:block;margin-top:10px;font-size:var(--fs-sm);
  color:var(--color-text-soft);text-transform:uppercase;letter-spacing:.1em;
  overflow-wrap:break-word;hyphens:auto}
@media(min-width:760px){.trust{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-text);
  font-weight:600;font-size:var(--fs-sm);padding:.85em 1.6em;border-radius:var(--r-pill);
  border:1.5px solid transparent;cursor:pointer;text-decoration:none;
  transition:transform .15s,box-shadow .2s,background .2s,color .2s}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--color-primary);color:#fff;box-shadow:var(--shadow-card)}
.btn--primary:hover{background:var(--color-primary-hov);color:#fff;box-shadow:var(--shadow-soft)}
.btn--deep{background:var(--color-primary-deep);color:#fff}
.btn--deep:hover{background:var(--color-primary-deep-hov);color:#fff}
.btn--ghost{background:transparent;color:var(--color-primary);border-color:var(--color-primary)}
.btn--ghost:hover{background:var(--color-primary);color:#fff}
.btn--accent{background:var(--color-accent);color:var(--color-text)}
.btn--accent:hover{background:var(--color-accent-deep);color:#fff}
.btn--light{background:#fff;color:var(--color-heading)}
.btn--light:hover{color:var(--color-heading)}

/* ============================================================
   BADGES (Verfügbarkeit etc.)
   ============================================================ */
.badge{display:inline-flex;align-items:center;gap:.45em;font-size:var(--fs-xs);
  font-weight:600;padding:.4em .9em;border-radius:var(--r-pill)}
.badge .dot{width:8px;height:8px;border-radius:50%}
.badge--eco{background:rgba(0,119,137,.12);color:var(--color-quote)} .badge--eco .dot{background:var(--color-quote)}
.badge--free{background:rgba(197,173,110,.22);color:var(--color-accent-deep)} .badge--free .dot{background:var(--color-accent)}
.badge--full{background:rgba(0,76,81,.12);color:var(--color-primary-deep)} .badge--full .dot{background:var(--color-primary-deep)}

/* ============================================================
   KARTEN + GRID
   ============================================================ */
.grid{display:grid;gap:22px}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.card{background:var(--color-surface);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-card);border:1px solid var(--color-line);
  transition:transform .2s,box-shadow .25s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}
.card__media{height:180px;background:linear-gradient(135deg,var(--color-heading),var(--color-quote));background-size:cover;background-position:center}
.card__media--gold{background:linear-gradient(135deg,var(--color-accent),var(--color-bar))}
.card__media--aqua{background:linear-gradient(135deg,var(--color-bar),var(--color-primary))}
.card__body{padding:24px;flex:1;display:flex;flex-direction:column;gap:10px}
.card__body p{color:var(--color-text-soft);font-size:var(--fs-sm);margin:0}
.card .btn{align-self:flex-start;margin-top:6px}

/* ============================================================
   QUOTE / TESTIMONIAL
   ============================================================ */
.quote{font-family:var(--font-display);font-style:italic;font-size:var(--fs-lg);
  color:var(--color-quote);border-left:3px solid var(--color-accent);
  padding-left:20px;max-width:60ch}

/* ============================================================
   INSELFINDER-CTA (Sektion 3)
   ============================================================ */
.finder{text-align:center}
.finder .lead{margin-inline:auto;margin-bottom:24px}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:28px}
.chip{display:inline-flex;align-items:center;gap:.4em;padding:.6em 1.2em;
  border-radius:var(--r-pill);background:var(--color-surface);
  border:1px solid var(--color-line-cool);font-size:var(--fs-sm);
  font-weight:500;color:var(--color-heading)}

/* ============================================================
   PORTFOLIO (Sektion 4) — 2 Spalten mobil, 3 ab 760px, Coral volle Breite
   ============================================================ */
.portfolio{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.pcard{position:relative;overflow:hidden;border-radius:var(--r-lg);
  min-height:240px;display:flex;align-items:flex-end;color:#fff;
  background:var(--color-heading-deep);
  text-decoration:none;transition:transform .2s,box-shadow .25s}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}
.pcard__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.pcard__overlay{position:absolute;inset:0;background:linear-gradient(
  to top,rgba(2,29,41,.88),rgba(2,29,41,.25))}
.pcard__body{position:relative;z-index:1;padding:22px}
.pcard__body h3{color:#fff;font-size:var(--fs-md);margin-bottom:6px}
.pcard__body p{color:rgba(255,255,255,.9);font-size:var(--fs-sm);margin-bottom:10px}
.pcard__cta{font-size:var(--fs-sm);font-weight:600;color:var(--color-accent)}
@media(min-width:820px){.portfolio{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* ============================================================
   PULLQUOTE-SEKTION (zwischen Portfolio und Featured)
   ============================================================ */
.pullquote-section{background:var(--color-heading-deep);color:#fff;position:relative}
.pullquote-parallax{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.pullquote__foot{position:absolute;color:rgba(255,255,255,.04)}
.pullquote__foot--1{width:70px;height:70px;left:5%;top:8px;transform:rotate(-15deg)}
.pullquote__foot--2{width:50px;height:50px;right:10%;bottom:4px;transform:rotate(25deg)}
.pullquote__foot--3{width:35px;height:35px;left:52%;top:2px;transform:rotate(-40deg);opacity:.6}
.pullquote__foot--4{width:40px;height:40px;left:28%;bottom:6px;transform:rotate(55deg);opacity:.5}
.pullquote__foot--5{width:55px;height:55px;right:30%;top:4px;transform:rotate(-8deg);opacity:.7}
.pullquote__foot--6{width:30px;height:30px;left:75%;bottom:2px;transform:rotate(38deg);opacity:.4}
.pullquote__foot--7{width:45px;height:45px;right:4%;top:50%;transform:rotate(-30deg);opacity:.5}
@media(min-width:760px){
  .pullquote__foot--1{width:100px;height:100px;left:4%}
  .pullquote__foot--2{width:75px;height:75px;right:6%}
  .pullquote__foot--3{width:50px;height:50px}
  .pullquote__foot--4{width:60px;height:60px}
  .pullquote__foot--5{width:80px;height:80px}
  .pullquote__foot--6{width:40px;height:40px}
  .pullquote__foot--7{width:55px;height:55px}
}
.pullquote-wrap{position:relative;z-index:1;text-align:center;padding-block:14px}
.pullquote{max-width:38ch;margin:0 auto}
.pullquote p{font-family:var(--font-display);font-size:clamp(1rem,2.2vw,var(--fs-md));
  font-style:italic;line-height:1.55;color:#fff;margin-bottom:6px}
.pullquote cite{font-style:normal;font-size:var(--fs-xs);color:var(--color-accent);
  font-weight:600;letter-spacing:.05em}
@supports(animation-timeline:scroll()){
  .pullquote__foot--1{animation:pqD1 1s linear both;animation-timeline:scroll();animation-range:entry 0% exit 100%}
  .pullquote__foot--2{animation:pqD2 1s linear both;animation-timeline:scroll();animation-range:entry 0% exit 100%}
  .pullquote__foot--3{animation:pqD3 1s linear both;animation-timeline:scroll();animation-range:entry 0% exit 100%}
  .pullquote__foot--4{animation:pqD4 1s linear both;animation-timeline:scroll();animation-range:entry 0% exit 100%}
  .pullquote__foot--5{animation:pqD5 1s linear both;animation-timeline:scroll();animation-range:entry 0% exit 100%}
  .pullquote__foot--6{animation:pqD6 1s linear both;animation-timeline:scroll();animation-range:entry 0% exit 100%}
  .pullquote__foot--7{animation:pqD7 1s linear both;animation-timeline:scroll();animation-range:entry 0% exit 100%}
  @keyframes pqD1{from{translate:0 18px;rotate:-15deg}to{translate:0 -18px;rotate:5deg}}
  @keyframes pqD2{from{translate:0 14px;rotate:25deg}to{translate:0 -14px;rotate:10deg}}
  @keyframes pqD3{from{translate:0 10px;rotate:-40deg}to{translate:0 -10px;rotate:-20deg}}
  @keyframes pqD4{from{translate:0 12px;rotate:55deg}to{translate:0 -12px;rotate:35deg}}
  @keyframes pqD5{from{translate:0 16px;rotate:-8deg}to{translate:0 -16px;rotate:12deg}}
  @keyframes pqD6{from{translate:0 8px;rotate:38deg}to{translate:0 -8px;rotate:20deg}}
  @keyframes pqD7{from{translate:0 14px;rotate:-30deg}to{translate:0 -14px;rotate:-10deg}}
}

/* ============================================================
   FEATURED-STRIP (Sektion 5) — natives scroll-snap, kein JS
   ============================================================ */
.fstrip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 0 16px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.fcard{flex:0 0 230px;scroll-snap-align:start;background:var(--color-surface);
  border:1px solid var(--color-line);border-radius:var(--r-md);overflow:hidden;
  display:flex;flex-direction:column;text-decoration:none}
.fcard:hover{box-shadow:var(--shadow-card)}
.fcard__media{height:130px;overflow:hidden;background:linear-gradient(135deg,var(--color-bar),var(--color-primary))}
.fcard__media img{width:100%;height:100%;object-fit:cover;display:block}
.fcard__body{padding:14px}
.fcard__label{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.12em;
  color:var(--color-quote);font-weight:600}
.fcard__title{display:block;font-family:var(--font-display);font-size:var(--fs-md);
  color:var(--color-heading);margin-top:6px;line-height:1.2}

/* ============================================================
   BLOG-LISTE (Sektion 6) — Thumbnail links, Titel rechts
   ============================================================ */
.bloglist{display:flex;flex-direction:column;gap:14px;max-width:680px}
.blogitem{display:flex;gap:16px;align-items:center;background:var(--color-surface);
  border:1px solid var(--color-line);border-radius:var(--r-md);padding:12px;text-decoration:none}
.blogitem:hover{box-shadow:var(--shadow-card)}
.blogitem__thumb{flex:0 0 64px;width:64px;height:64px;border-radius:var(--r-sm);
  background:linear-gradient(135deg,var(--color-heading),var(--color-quote)) center/cover;
  display:flex;align-items:center;justify-content:center;color:#fff;
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.05em}
.blogitem__title{color:var(--color-heading);font-weight:600;font-size:var(--fs-base);line-height:1.3}
.blogitem__meta{font-size:var(--fs-xs);color:var(--color-text-soft);
  text-transform:uppercase;letter-spacing:.08em;margin-top:4px}

/* ============================================================
   GOOGLE-BEWERTUNGEN (Sektion 7) — echte Zitate, kein Widget
   ============================================================ */
.reviews{display:grid;gap:18px}
.review{background:var(--color-surface);border:1px solid var(--color-line);
  border-radius:var(--r-lg);padding:28px;box-shadow:var(--shadow-card)}
.review__stars{color:var(--color-accent-ink);letter-spacing:.12em;margin-bottom:12px}
.review__text{font-family:var(--font-display);font-style:italic;font-size:var(--fs-md);
  color:var(--color-quote);margin-bottom:14px}
.review__cite{font-size:var(--fs-sm);color:var(--color-text-soft)}
@media(min-width:760px){.reviews{grid-template-columns:1fr 1fr}}

/* ============================================================
   CORAL-DOCTORS-BLOCK (Sektion 8) — emotional, kein Gelb hier
   ============================================================ */
.coralblock{position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:var(--color-heading-deep);color:#fff;
  padding:0;display:flex;align-items:center;min-height:300px}
.coralblock__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.coralblock__overlay{position:absolute;inset:0;background:linear-gradient(
  120deg,rgba(2,29,41,.9) 0%,rgba(2,29,41,.55) 70%,rgba(2,29,41,.3) 100%)}
.coralblock__body{position:relative;z-index:1;padding:40px;max-width:60ch}
.coralblock__body h2{color:#fff;margin-bottom:14px}
.coralblock__body p{color:rgba(255,255,255,.9)}

/* ============================================================
   NEWSLETTER (Sektion 9) — Quentn-Platzhalter im ersten Build
   ============================================================ */
.nl-form{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
  max-width:480px;margin:20px auto 12px}
.nl-form input{flex:1;min-width:220px;padding:.9em 1.3em;border-radius:var(--r-pill);
  border:1px solid var(--color-line-cool);font-family:inherit;font-size:var(--fs-sm);color:var(--color-text)}
.nl-hint{font-size:var(--fs-xs);color:var(--color-text-soft)}

/* ============================================================
   KONTAKT-FORMULAR
   ============================================================ */
.contact-form{max-width:620px;margin:0 auto}
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:20px}
.form-group label{font-family:var(--font-text);font-size:var(--fs-sm);
  font-weight:600;color:var(--color-heading)}
.form-group .optional{font-weight:400;color:var(--color-text-soft)}
.form-group input,
.form-group select,
.form-group textarea{padding:.85em 1.1em;border-radius:var(--r-sm);
  border:1px solid var(--color-line-cool);font-family:inherit;
  font-size:var(--fs-base);color:var(--color-text);background:var(--color-surface);
  transition:border-color .2s,box-shadow .2s}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{outline:none;border-color:var(--color-primary);
  box-shadow:0 0 0 3px rgba(4,127,177,.15)}
.form-group textarea{resize:vertical;min-height:140px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:600px){.form-row{grid-template-columns:1fr}}
.contact-form .btn{margin-top:4px}
.form-hint{font-size:var(--fs-xs);color:var(--color-text-soft);margin-top:14px}

/* Zweispaltiges Kontakt-Layout: Formular-Karte + Karte mit direkten Kontaktwegen
   (WhatsApp/Anruf/E-Mail), Vorbild war eine fremde Beratungsseite. */
.contact-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:28px;align-items:start;max-width:960px;margin:0 auto}
@media(max-width:820px){.contact-layout{grid-template-columns:minmax(0,1fr)}}
.contact-panel{background:var(--color-surface);border:1px solid var(--color-line);
  border-radius:var(--r-lg);padding:32px;box-shadow:var(--shadow-card)}
.contact-panel .contact-form{max-width:none;margin:0}
.contact-direct{background:var(--color-heading-deep);color:#fff;border-radius:var(--r-lg);
  padding:32px;box-shadow:var(--shadow-card)}
.contact-direct h2{color:#fff;font-size:var(--fs-md);margin:0 0 18px}
.contact-tile{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.1);
  border-radius:var(--r-md);padding:14px 16px;margin-bottom:12px;color:#fff}
.contact-tile:hover{background:rgba(255,255,255,.18);color:var(--color-accent)}
.contact-tile:last-child{margin-bottom:0}
.contact-tile__icon{width:40px;height:40px;border-radius:999px;background:rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:inherit}
.contact-tile__label{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;
  color:rgba(255,255,255,.65);margin-bottom:2px}
.contact-tile__value{font-weight:600;font-size:var(--fs-sm);color:inherit}

/* ============================================================
   B2B-EINSTIEG (Sektion 10) — dezent, gestrichelte Border
   ============================================================ */
.b2b{border:1.5px dashed var(--color-line-cool);border-radius:var(--r-lg);
  padding:34px 28px;text-align:center;max-width:680px;margin:0 auto}
.b2b .kicker{margin-bottom:6px}
.b2b h3{font-size:var(--fs-lg);margin-bottom:8px}
.b2b p{color:var(--color-text-soft);margin-bottom:18px}

/* ============================================================
   FOOTER  (identisch auf allen Seiten)
   ============================================================ */
.site-footer{background:var(--color-heading-deep);color:rgba(255,255,255,.72);padding:56px 0 40px;position:relative;overflow:hidden}
.site-footer::before{content:"";position:absolute;right:-60px;top:50%;width:420px;height:420px;
  transform:translateY(-50%) rotate(-15deg);
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 709 709'><path fill='white' d='m349.2 168.8c-54.1-6.5-65 94.5-26.8 120 24.1 16.1 50.5 10.9 67.1 43.3 36.9 71.6-78.2 120.7-131.8 142.4-57.3 23.3-117.5 29.9-126 95.4-8.5 65.3 49.7 116.6 110.9 95.7 50.6-17.3 62.2-60.7 85.9-99.5 52.3-85.8 172.2-117.7 206.4-200.2 8.1-30.9 8.6-60.8-5.5-88.6-11.1-27.7-26.4-46.8-52.5-71.1-36.3-33.8-69.4-12.3-79.2-11.7-16.2 1-22.1-22.6-48.6-25.7z'/><path fill='white' d='m411.6 40c-23.7 7.7-40.4 32.8-45.5 57.9-7.9 58.9 36.2 76.3 74.2 40 17.8-17.4 26.9-44.8 21.9-69.6C457 44.5 438.1 29.9 411.6 40z'/><path fill='white' d='M533 93.4c-2-27.1-19.8-34.5-36.8-26.8-24.5 11-35.2 70.1-19.5 86.2 14.2 14.5 60.7-30.5 56.3-59.4z'/><path fill='white' d='m584.9 148.9c4.1-24.7-10.5-36.5-27.7-34.7-24.8 2.5-47.5 52-36.7 71 9.8 17.1 62.1-9.2 64.4-36.2z'/><path fill='white' d='m604 219.1c7.1-21.2-2.4-35.3-16.1-37.9-19.7-3.7-45.2 35.3-39.8 54.9 4.9 17.8 49.8 6.7 55.9-17z'/><path fill='white' d='m574.5 302.1c29.4 5 37.5-42.7 16.6-45.7-13.7-1.6-21.4 2.8-27.8 12-9 13-7.4 26.9 11.1 33.7z'/></svg>") center/contain no-repeat;
  opacity:.05;pointer-events:none}
.site-footer .wrap{position:relative;z-index:1}
.site-footer a{color:rgba(255,255,255,.78)}
.site-footer a:hover{color:var(--color-accent)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:32px;margin-bottom:32px}
.footer-grid h4{color:#fff;font-family:var(--font-text);font-weight:700;font-size:var(--fs-sm);
  text-transform:uppercase;letter-spacing:.12em;margin-bottom:14px}
.footer-grid ul{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:var(--fs-sm)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.15);padding-top:20px;
  font-size:var(--fs-xs);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr}h1{font-size:2.6rem}h2{font-size:2.1rem}}

/* Footer Hub-Variante: 5 Marken als Mini-Karten + Podcast + Social */
.foot-brands{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:24px}
.foot-brand{display:block;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-md);padding:14px 16px;text-decoration:none}
.foot-brand:hover{background:rgba(255,255,255,.1)}
.foot-brand strong{display:block;color:#fff;font-weight:600;font-size:var(--fs-sm)}
.foot-brand span{display:block;color:rgba(255,255,255,.6);font-size:var(--fs-xs);margin-top:3px}
.foot-columns{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px;font-size:var(--fs-sm)}
.foot-col{display:flex;flex-direction:column;gap:8px}
.foot-col a{color:rgba(255,255,255,.8)}
.foot-col a:hover{color:#fff}
.foot-social{display:flex;align-items:center;gap:10px}
.foot-social__icon{flex:0 0 auto;color:rgba(255,255,255,.6)}
.foot-social:hover .foot-social__icon{color:var(--color-accent)}
@media(min-width:760px){.foot-brands{grid-template-columns:repeat(3,1fr)}}

/* ============================================================
   PER-SEITE-AKZENT (Theming-Hook)
   Jede Seite kann --color-accent / Hero-Verlauf via data-brand
   überschreiben, ohne brand.css zu ändern. Beispiel:
   <body data-brand="coral"> nutzt die Coral-Doctors-Palette.
   ============================================================ */
body[data-brand="coral"]{--color-accent:#F3DD02;--color-accent-deep:#c9b702}
body[data-brand="coral"] .hero{background:linear-gradient(155deg,#1d3a5f,var(--cd-blue) 70%)}
body[data-brand="strandhaus"] .hero{background:linear-gradient(155deg,var(--color-heading-deep),var(--color-accent-deep))}

/* === Expertise-Strip (Startseite) === */
/* Token-Anpassung: --font-heading -> --font-display, --font-body -> --font-text
   (so heißen die Schrift-Variablen in dieser brand.css). */
.expertise { padding: clamp(2.5rem, 6vw, 4.5rem) 1rem; }
.expertise__inner { max-width: 72rem; margin: 0 auto; }
.expertise__heading {
  font-family: var(--font-display);
  color: var(--color-heading);
  text-align: center;
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
}
.expertise__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1.5rem, 4vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.expertise__item { text-align: center; }
.expertise__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 4rem; height: 4rem; border-radius: 50%;
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  margin-bottom: 1rem;
}
.expertise__title {
  font-family: var(--font-display);
  color: var(--color-heading);
  font-size: 1.15rem; margin: 0 0 .4rem;
}
.expertise__text {
  font-family: var(--font-text);
  color: var(--color-text);
  line-height: 1.55; font-size: .95rem; margin: 0;
}

/* ============================================================
   BLOG-ARTIKEL (Einzelansicht)
   ============================================================ */

/* Hero-Bereich: Standard (ohne Titelbild) */
.blog-hero{background:linear-gradient(155deg,var(--color-heading-deep),var(--color-heading) 55%,var(--color-quote));
  color:#fff;padding:72px 0 48px;position:relative;overflow:hidden}
.blog-hero__inner{max-width:740px;margin:0 auto;position:relative;z-index:2}
.blog-hero h1{color:#fff;font-size:clamp(1.8rem,4.5vw,var(--fs-2xl));max-width:22ch;margin-bottom:14px}
.blog-meta{display:flex;gap:18px;font-size:var(--fs-sm);color:rgba(255,255,255,.78);
  margin-bottom:18px;flex-wrap:wrap}
.blog-desc{background:rgba(255,255,255,.12);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-md);padding:16px 20px;
  font-size:var(--fs-sm);color:rgba(255,255,255,.95);max-width:64ch;line-height:1.55}

/* Kicker (Eyebrow) im Fallback-Hero ohne Titelbild */
.blog-hero__kicker{display:inline-block;font-size:var(--fs-xs);
  text-transform:uppercase;letter-spacing:.22em;font-weight:700;
  color:var(--color-accent);margin-bottom:14px}
.blog-hero__kicker::before{content:"";display:inline-block;width:32px;height:1.5px;
  background:var(--color-accent);vertical-align:middle;margin-right:12px;
  margin-bottom:2px}

/* "Wer wir sind"-Hero (ueber-uns.astro): Portraitfoto + Fließtext statt der
   geframten .blog-desc-Box, damit Besucher:innen sofort Yami & Toddy sehen. */
.about-hero{display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center}
.about-hero__media{width:100%;max-width:280px;flex:0 0 auto}
.about-hero__media img{width:100%;aspect-ratio:4/5;object-fit:cover;
  object-position:center 20%;border-radius:var(--r-lg);box-shadow:var(--shadow-soft);display:block}
.about-hero__body{max-width:640px}
.about-hero__lead{font-size:var(--fs-md);line-height:1.65;color:rgba(255,255,255,.92);margin-top:2px}

@media(min-width:860px){
  .about-hero{flex-direction:row;align-items:center;text-align:left;gap:48px}
  .about-hero__media{flex:0 0 300px;max-width:300px}
  .about-hero__body{flex:1}
}

/* Mobile Inhaltsverzeichnis (aufklappbar) */
.toc-mobile{max-width:740px;margin:0 auto;padding:24px var(--gutter) 0}
.toc-mobile__details{background:var(--color-surface);border:1px solid var(--color-line);
  border-radius:var(--r-md);overflow:hidden}
.toc-mobile__details[open]{box-shadow:var(--shadow-card)}
.toc-mobile__details summary{display:flex;align-items:center;gap:12px;padding:16px 20px;
  cursor:pointer;list-style:none;font-weight:600;color:var(--color-heading);
  font-size:var(--fs-sm);user-select:none}
.toc-mobile__details summary::-webkit-details-marker{display:none}
.toc-mobile__icon{display:inline-flex;width:30px;height:30px;border-radius:50%;
  align-items:center;justify-content:center;flex:0 0 auto;
  color:var(--color-quote);background:color-mix(in srgb,var(--color-quote) 12%,transparent)}
.toc-mobile__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toc-mobile__chevron{display:inline-flex;color:var(--color-text-soft);transition:transform .2s;flex:0 0 auto}
.toc-mobile__details[open] .toc-mobile__chevron{transform:rotate(180deg)}
.toc-mobile__details ol{padding:4px 12px 16px}

/* Gemeinsame TOC-Liste (mobil und Sidebar) */
.toc-list{list-style:none;padding:0;margin:0;counter-reset:tocnum}
.toc-list li{margin:0}
.toc-list a{display:flex;gap:14px;align-items:flex-start;padding:10px 12px;
  text-decoration:none;color:var(--color-text);font-size:var(--fs-sm);
  line-height:1.4;border-radius:var(--r-sm);transition:all .15s}
.toc-list a:hover{background:rgba(4,127,177,.05);color:var(--color-primary)}
.toc-list__num{flex:0 0 auto;font-family:var(--font-display);font-size:var(--fs-sm);
  font-weight:600;color:var(--color-quote);min-width:28px;
  padding-top:1px;letter-spacing:.02em}
.toc-list__text{flex:1;font-weight:500}

/* Sidebar-Variante: kompakter, mit aktivem Highlight */
.toc-list--sidebar a{padding:9px 10px;border-left:2px solid transparent}
.toc-list--sidebar a.active{background:rgba(4,127,177,.07);border-left-color:var(--color-primary);
  color:var(--color-heading)}
.toc-list--sidebar a.active .toc-list__num{color:var(--color-primary)}
.toc-list--sidebar .toc-list__text{font-size:var(--fs-sm);line-height:1.35}

/* Artikel-Layout: Content + Sidebar */
.blog-layout{display:block;padding-top:32px;padding-bottom:48px}
.blog-content{max-width:740px}
.blog-content h2{font-size:clamp(1.4rem,3vw,var(--fs-xl));margin:2.5em 0 .6em;
  padding-bottom:.3em;border-bottom:2px solid var(--color-line);scroll-margin-top:80px}
.blog-content h3{font-size:var(--fs-md);margin:1.8em 0 .5em;scroll-margin-top:80px}
.blog-content p{max-width:68ch;line-height:1.7}
.blog-content ul,.blog-content ol{padding-left:1.4em;margin-bottom:1.2em}
.blog-content li{margin-bottom:.5em;line-height:1.6}
.blog-content li::marker{color:var(--color-accent-ink)}
.blog-content img{margin:2em 0;box-shadow:var(--shadow-card)}
.blog-content a{color:var(--color-primary);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:rgba(4,127,177,.3)}
.blog-content a:hover{text-decoration-color:var(--color-primary)}
.blog-content strong{color:var(--color-heading)}
.blog-content blockquote{font-family:var(--font-display);font-style:italic;
  font-size:var(--fs-md);color:var(--color-quote);border-left:3px solid var(--color-accent);
  padding:12px 20px;margin:2em 0;background:rgba(197,173,110,.06);border-radius:0 var(--r-sm) var(--r-sm) 0}

/* --- Reiche Blog-Bausteine (aus migrierten WordPress-Shortcodes) --- */

/* Video-Embed: responsiv 16:9 (ersetzt [su_youtube] + nackte YouTube-Links) */
.blog-content .embed{margin:2em 0}
.blog-content .embed--video{position:relative;aspect-ratio:16/9;border-radius:var(--r-md);
  overflow:hidden;box-shadow:var(--shadow-card);background:#000}
.blog-content .embed--video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Facebook-Embeds haben feste Maße -> zentriert, nie breiter als der Text */
.blog-content .embed--fb{display:flex;justify-content:center}
.blog-content .embed--fb iframe{max-width:100%}

/* Hinweis-/Warnbox (ersetzt [su_note]) */
.blog-content .note{margin:2em 0;padding:18px 20px;border-radius:var(--r-md);
  background:var(--color-surface-cool);border-left:4px solid var(--color-quote)}
.blog-content .note p{margin:0}
.blog-content .note--warn{background:#FDECEA;border-left-color:#D7402B}
.blog-content .note--warn strong{color:#A3271A}

/* Bildunterschrift + Galerie (ersetzt [caption] / [gallery]) */
.blog-content figure{margin:2em 0}
.blog-content figure img{border-radius:var(--r-md);box-shadow:var(--shadow-card)}
.blog-content figcaption{margin-top:8px;font-size:var(--fs-sm);color:var(--color-text-soft);
  font-style:italic;text-align:center}
.blog-content .figgrid{display:grid;gap:18px;margin:2em 0;
  grid-template-columns:minmax(0,1fr)}
.blog-content .figgrid figure{margin:0}
.blog-content .figgrid img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media(min-width:620px){.blog-content .figgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:920px){.blog-content .figgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Aufklappbares Transkript (für GEO/SEO im HTML, optisch eingeklappt). */
.blog-content .podcast-transcript{margin:2.5em 0;padding:18px 20px;border-radius:var(--r-md);
  background:var(--color-surface-cool)}
.blog-content .podcast-transcript summary{cursor:pointer;font-family:var(--font-text);
  font-weight:600;color:var(--color-heading);list-style:revert}
.blog-content .podcast-transcript__body{margin-top:14px}
.blog-content .podcast-transcript__body p{max-width:none;font-size:var(--fs-sm);
  color:var(--color-text-soft)}
.blog-content .podcast-transcript-placeholder{margin:2.5em 0;padding:16px 20px;
  border-radius:var(--r-md);background:var(--color-surface-cool);color:var(--color-text-soft);
  font-size:var(--fs-sm);font-style:italic;max-width:none}

/* Aufklappbares Kommentar-Archiv (alte WordPress-Kommentare, keine neuen
   mehr möglich). Gleiches Prinzip wie .podcast-transcript: optisch
   eingeklappt, aber immer im HTML für Google. */
.comments-section{padding:8px 0 56px}
.comments{background:var(--color-surface);border:1px solid var(--color-line);
  border-radius:var(--r-lg);max-width:740px;margin:0 auto}
.comments summary{display:flex;align-items:center;gap:12px;padding:18px 22px;
  cursor:pointer;list-style:none;font-family:var(--font-display);
  font-size:var(--fs-md);color:var(--color-heading)}
.comments summary::-webkit-details-marker{display:none}
.comments summary::after{content:"";width:10px;height:10px;flex:0 0 auto;margin-left:auto;
  border-right:2px solid var(--color-text-soft);border-bottom:2px solid var(--color-text-soft);
  transform:rotate(45deg);transition:transform .2s}
.comments[open] summary::after{transform:rotate(225deg)}
.comments__intro{margin:0;padding:0 22px 18px;color:var(--color-text-soft);
  font-size:var(--fs-sm);max-width:none}
.comments__list,.comment__replies{list-style:none;margin:0;padding:0}
.comments__list{padding:0 22px 22px;display:flex;flex-direction:column;gap:18px}
.comment{border-top:1px solid var(--color-line);padding-top:18px}
.comments__list > .comment:first-child{border-top:1px solid var(--color-line)}
.comment__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:6px}
.comment__author{font-family:var(--font-text);font-weight:600;color:var(--color-heading)}
.comment__date{font-size:var(--fs-sm);color:var(--color-text-soft)}
.comment__body{font-size:var(--fs-sm);line-height:1.65;color:var(--color-text);max-width:none}
.comment__body a{word-break:break-word}
.comment__replies{margin-top:16px;padding-left:18px;border-left:2px solid var(--color-line-cool);
  display:flex;flex-direction:column;gap:16px}
.comment__replies .comment{border-top:none;padding-top:0}

/* 3-Spalten-CTA am Artikelende (ersetzt [su_row]/[su_column]) */
.blog-content .cta3{display:grid;gap:16px;margin:2.4em 0;grid-template-columns:minmax(0,1fr)}
.blog-content .cta3__item{display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:22px 18px;border:1px solid var(--color-line);border-radius:var(--r-lg);
  background:var(--color-surface);text-decoration:none;color:var(--color-heading);
  font-family:var(--font-display);font-size:var(--fs-md);text-align:center;
  transition:transform .2s,box-shadow .2s,border-color .2s}
.blog-content .cta3__item:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft);
  border-color:var(--color-accent-ink)}
.blog-content .cta3__item img{width:56px;height:56px;object-fit:contain;margin:0;box-shadow:none}
@media(min-width:620px){.blog-content .cta3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* CTA-/Einladungs-Box am Artikelende (ersetzt WordPress-CTA-Shortcode).
   Premium Petrol, hebt sich klar vom Fließtext ab. */
.blog-content .cta-box{margin:2.8em 0;padding:30px 28px 32px;border-radius:var(--r-lg);
  background:var(--color-heading-deep);color:#eaf6f7;box-shadow:var(--shadow-soft)}
.blog-content .cta-box h2{color:#fff;margin:0 0 12px;font-size:var(--fs-xl)}
.blog-content .cta-box p{color:rgba(234,246,247,.85);max-width:none;margin:0 0 1em}
.blog-content .cta-box p:last-child{margin-bottom:0}
.blog-content .cta-box strong{color:#fff}
/* Der Link in der Box wird zum Button */
.blog-content .cta-box a{display:inline-block;margin-top:6px;background:var(--color-accent);
  color:var(--color-heading-deep);font-family:var(--font-text);font-weight:600;
  text-decoration:none;padding:13px 24px;border-radius:var(--r-pill);
  transition:background .15s,transform .15s}
.blog-content .cta-box a:hover{background:#fff;transform:translateY(-2px)}
@media(min-width:760px){.blog-content .cta-box{padding:36px 36px 38px}}

/* Einladungs-/Expeditions-Box mit Yacht-Bild (premium Petrol). */
.blog-content .expedition{margin:2.8em 0;border-radius:var(--r-lg);overflow:hidden;
  background:var(--color-heading-deep);color:#eaf6f7;box-shadow:var(--shadow-soft)}
.blog-content .expedition__media{position:relative;aspect-ratio:16/9;
  background:linear-gradient(135deg,var(--color-heading),var(--color-quote))}
.blog-content .expedition__media img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;margin:0;border-radius:0;box-shadow:none}
.blog-content .expedition__body{padding:26px 24px 28px}
.blog-content .expedition__kicker{text-transform:uppercase;letter-spacing:.18em;
  font-size:var(--fs-xs);font-weight:600;color:var(--color-accent);margin:0 0 6px}
.blog-content .expedition h3{color:#fff;margin:0 0 14px;font-size:var(--fs-xl)}
.blog-content .expedition p{color:rgba(234,246,247,.85);max-width:none;margin:0 0 .9em}
.blog-content .expedition strong{color:#fff}
.blog-content .expedition .btn{margin-top:8px}
@media(min-width:760px){
  .blog-content .expedition{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);align-items:stretch}
  .blog-content .expedition__media{aspect-ratio:auto;height:100%;min-height:300px}
  .blog-content .expedition__body{padding:32px 32px 34px}
}

/* Podcast-Player: sitzt direkt unter dem Hero, vor dem Show-Notes-Text. */
.podcast-player{background:var(--color-surface-cool)}
.podcast-player__inner{display:flex;flex-direction:column;gap:10px;padding:20px 0}
.podcast-player__label{display:flex;align-items:center;gap:8px;font-family:var(--font-text);
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--color-heading)}
.podcast-player__label svg{color:var(--color-accent-deep);flex:0 0 auto}
.podcast-player audio{width:100%;display:block}
.podcast-player__transcript-link{align-self:flex-start;font-family:var(--font-text);
  font-size:var(--fs-sm);font-weight:600;color:var(--color-primary);text-decoration:underline;
  text-decoration-color:rgba(4,127,177,.35)}

/* Alters-Hinweis direkt unter dem Player: alle Folgen sind Jahre alt,
   Inseln können sich seither stark verändert haben (Bauboom, Überlastung). */
.podcast-disclaimer{padding:18px 0 26px}
.podcast-disclaimer__box{display:flex;gap:12px;padding:16px 20px;border-radius:var(--r-md);
  background:#fff;border-left:4px solid var(--color-accent-deep)}
.podcast-disclaimer__icon{flex:0 0 auto;color:var(--color-accent-deep);margin-top:2px}
.podcast-disclaimer p{margin:0;font-size:var(--fs-sm);line-height:1.6;color:var(--color-text-soft)}
.podcast-disclaimer strong{color:var(--color-heading)}
.podcast-disclaimer a{color:var(--color-primary);text-decoration:underline;
  text-decoration-color:rgba(4,127,177,.35)}

/* Podcast-Übersicht (/podcast/): Kopf, Insel-Sprungleiste, Gruppen-Raster. */
.podcastindex-head{padding-bottom:32px}
.podcastindex-head h1{font-size:clamp(2rem,5vw,var(--fs-2xl));margin:6px 0 14px}
.podcastindex{padding-top:36px;padding-bottom:72px}
.podcastindex__empty{color:var(--color-text-soft);font-size:var(--fs-md);text-align:center;padding:40px 0}

/* top:61px = Höhe von .site-header (padding-block:14px + Inhalt). Ohne diesen
   Versatz würde die Leiste unter dem gleich-sticky Header verschwinden statt
   sichtbar darunter zu bleiben. */
.podcastpins{position:sticky;top:61px;z-index:20;background:var(--color-bg);
  border-bottom:1px solid var(--color-line)}
.podcastpins__track{display:flex;gap:8px;overflow-x:auto;padding:11px var(--gutter);
  scrollbar-width:none}
.podcastpins__track::-webkit-scrollbar{display:none}
.podcastpin{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:7px 13px;
  border-radius:var(--r-pill);background:var(--color-surface);
  border:1px solid var(--color-line);color:var(--color-heading);
  font-family:var(--font-text);font-size:var(--fs-sm);font-weight:600;
  line-height:1.1;text-decoration:none;white-space:nowrap;
  transition:border-color .15s,box-shadow .15s}
.podcastpin:hover{border-color:var(--color-accent-ink);box-shadow:var(--shadow-card)}
.podcastpin__icon{display:flex;color:var(--color-accent-ink)}

/* scroll-margin-top haelt Sprungziele frei von Header + Sprungleiste. */
.podcastgroup{padding-top:40px;scroll-margin-top:126px}
.podcastgroup:first-child{padding-top:0}
.podcastgroup__title{display:flex;align-items:center;gap:10px;font-size:var(--fs-lg);
  color:var(--color-heading);margin-bottom:18px;padding-bottom:12px;
  border-bottom:1px solid var(--color-line)}
.podcastgroup__icon{display:flex;color:var(--color-accent-ink);flex:0 0 auto}

.podcastgrid{display:grid;gap:24px;grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){.podcastgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:980px){.podcastgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}

.podcastcard{display:flex;flex-direction:column;height:100%;border-radius:var(--r-lg);
  overflow:hidden;background:var(--color-surface);box-shadow:var(--shadow-card);
  text-decoration:none;transition:transform .2s,box-shadow .2s}
.podcastcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}
.podcastcard__media{position:relative;aspect-ratio:16/9;overflow:hidden}
.podcastcard__media img{width:100%;height:100%;object-fit:cover;display:block}
.podcastcard__scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(2,58,82,0) 0%,rgba(2,58,82,.65) 35%,rgba(2,58,82,.95) 60%,rgba(2,58,82,.98) 100%)}
.podcastcard__meta{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;color:#fff}
.podcastcard__episode{display:block;font-family:var(--font-text);font-size:var(--fs-xs);
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent);
  margin-bottom:4px}
.podcastcard__title{font-family:var(--font-display);font-size:var(--fs-md);line-height:1.25;
  margin:0;color:#fff;overflow-wrap:break-word;hyphens:auto;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.podcastcard__body{padding:16px 16px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.podcastcard__body p{margin:0;color:var(--color-text-soft);font-size:var(--fs-sm);line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.podcastcard__date{margin-top:auto;font-size:var(--fs-xs);color:var(--color-text-soft)}

/* Desktop-Sidebar (versteckt auf Mobile) */
.blog-sidebar{display:none}
.blog-sidebar__inner{display:flex;flex-direction:column;gap:28px}

/* Gemeinsamer Block-Stil in der Sidebar */
.sidebar-block{padding:0}
.sidebar-block + .sidebar-block{padding-top:24px;border-top:1px solid var(--color-line)}
.sidebar-block__title{font-family:var(--font-text);font-size:var(--fs-xs);
  text-transform:uppercase;letter-spacing:.14em;color:var(--color-text-soft);
  font-weight:700;margin-bottom:14px}

/* Sidebar: Über uns */
.sidebar-about{text-align:center}
.sidebar-avatar{display:inline-block;margin-bottom:12px;border-radius:50%;
  box-shadow:var(--shadow-card)}
.sidebar-avatar svg,.sidebar-avatar img{display:block;border-radius:50%;object-fit:cover}
.sidebar-about .sidebar-block__title{margin-bottom:8px;color:var(--color-heading);
  font-family:var(--font-display);font-size:var(--fs-md);font-weight:500;
  text-transform:none;letter-spacing:0}
.sidebar-about p{font-size:var(--fs-sm);color:var(--color-text-soft);
  line-height:1.55;margin-bottom:14px;text-align:left}
.sidebar-about__link{font-size:var(--fs-sm);font-weight:600;
  color:var(--color-primary);text-decoration:none;
  display:inline-block;padding:8px 16px;border-radius:var(--r-pill);
  border:1.5px solid var(--color-primary);transition:all .2s}
.sidebar-about__link:hover{background:var(--color-primary);color:#fff}

/* Sidebar: Schnelllinks */
.sidebar-links__list{list-style:none;padding:0;margin:0;display:flex;
  flex-direction:column;gap:2px}
.sidebar-links__list a{display:flex;align-items:center;gap:12px;
  padding:8px 10px;border-radius:var(--r-sm);text-decoration:none;
  color:var(--color-text);font-size:var(--fs-sm);font-weight:500;
  transition:all .15s}
.sidebar-links__list a:hover{background:rgba(4,127,177,.05);color:var(--color-primary)}
.sidebar-links__icon{display:inline-flex;width:32px;height:32px;
  align-items:center;justify-content:center;border-radius:50%;
  color:var(--color-accent-ink);
  background:color-mix(in srgb,var(--color-accent) 14%,transparent)}

/* Desktop: 2-Spalten-Layout mit Sticky-Sidebar */
@media(min-width:1024px){
  .toc-mobile{display:none}
  .blog-layout{display:grid;grid-template-columns:minmax(0,740px) 260px;gap:56px;
    justify-content:center;align-items:start}
  .blog-sidebar{display:block;position:sticky;top:90px;align-self:start;
    max-height:calc(100vh - 110px);overflow-y:auto;
    scrollbar-width:thin;scrollbar-color:var(--color-line-cool) transparent}
  .blog-sidebar::-webkit-scrollbar{width:6px}
  .blog-sidebar::-webkit-scrollbar-thumb{background:var(--color-line-cool);border-radius:3px}
}

/* Guide-Teaser am Artikelende */
.blog-guide-box{padding:48px 0 0}
.blog-guide-box__inner{position:relative;background:
  linear-gradient(135deg,var(--color-heading-deep) 0%,var(--color-primary) 100%);
  border-radius:var(--r-lg);padding:40px 36px 36px;overflow:hidden}
.blog-guide-box__inner::before{content:"";position:absolute;top:-40px;right:-40px;
  width:200px;height:200px;border-radius:50%;
  background:rgba(255,255,255,.04)}
.blog-guide-box__inner::after{content:"";position:absolute;bottom:-60px;left:-30px;
  width:160px;height:160px;border-radius:50%;
  background:rgba(255,255,255,.03)}
.blog-guide-box__icon{display:flex;align-items:center;justify-content:center;
  width:72px;height:72px;border-radius:50%;
  background:rgba(255,255,255,.1);color:var(--color-accent);margin-bottom:8px}
.blog-guide-box .guide-teaser{background:transparent;border:none;border-left:none;
  box-shadow:none;padding:0;margin:0;border-radius:0}
.blog-guide-box .guide-teaser__kicker{color:var(--color-accent)}
.blog-guide-box .guide-teaser__text{color:rgba(255,255,255,.88)}
.blog-guide-box .guide-teaser__headline{color:#fff}
.blog-guide-box .guide-teaser__sub{color:rgba(255,255,255,.7)}
.blog-guide-box .guide-teaser__input{background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.2);color:#fff}
.blog-guide-box .guide-teaser__input::placeholder{color:rgba(255,255,255,.5)}
.blog-guide-box .guide-teaser__input:focus{border-color:var(--color-accent);
  box-shadow:0 0 0 3px rgba(197,173,110,.25)}
.blog-guide-box .guide-teaser__msg--ok{color:var(--color-accent)}
.blog-guide-box .guide-teaser__msg--err{color:#f0c4a0}
@media(max-width:600px){
  .blog-guide-box__inner{padding:32px 22px 28px}
  .blog-guide-box__icon{width:56px;height:56px}
  .blog-guide-box__icon svg{width:36px;height:36px}
}

/* Kern-Säulen-Karten */
.blog-pillars{background:var(--color-surface-cool)}
.blog-pillars__heading{text-align:center;margin-bottom:32px;font-size:var(--fs-xl)}
.pillars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pillar{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:24px 16px;background:var(--color-surface);border:1px solid var(--color-line);
  border-radius:var(--r-lg);text-decoration:none;transition:transform .2s,box-shadow .2s}
.pillar:hover{transform:translateY(-3px);box-shadow:var(--shadow-card)}
.pillar__icon{display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;margin-bottom:12px;
  color:var(--color-accent-ink);background:color-mix(in srgb,var(--color-accent) 14%,transparent)}
.pillar__title{font-family:var(--font-display);font-size:var(--fs-sm);
  color:var(--color-heading);font-weight:500;margin-bottom:8px;line-height:1.2}
.pillar__arrow{color:var(--color-primary);font-weight:600}
@media(min-width:760px){.pillars{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}}

/* Autoren-Box am Artikelende ("Wer wir sind") */
.authorbox{background:var(--color-surface-cool);border-top:1px solid var(--color-line-cool)}
.authorbox__inner{max-width:760px;margin:0 auto;padding:44px var(--gutter);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.authorbox__avatar{flex:0 0 auto;width:104px;height:104px;border-radius:50%;
  overflow:hidden;box-shadow:var(--shadow-card);border:3px solid var(--color-surface)}
.authorbox__avatar img,.authorbox__avatar svg{width:100%;height:100%;
  object-fit:cover;display:block;border-radius:50%}
.authorbox__kicker{display:block;font-size:var(--fs-xs);text-transform:uppercase;
  letter-spacing:.14em;font-weight:700;color:var(--color-text-soft);margin-bottom:6px}
.authorbox__name{font-family:var(--font-display);font-size:var(--fs-lg);
  color:var(--color-heading);margin:0 0 10px;line-height:1.15}
.authorbox__bio{color:var(--color-text-soft);font-size:var(--fs-sm);line-height:1.6;
  max-width:56ch;margin:0 0 14px}
.authorbox__link{display:inline-block;font-size:var(--fs-sm);font-weight:600;
  color:var(--color-primary);text-decoration:none;padding:8px 18px;
  border-radius:var(--r-pill);border:1.5px solid var(--color-primary);transition:all .2s}
.authorbox__link:hover{background:var(--color-primary);color:#fff}
@media(min-width:680px){
  .authorbox__inner{flex-direction:row;text-align:left;gap:28px;align-items:center}
  .authorbox__avatar{width:120px;height:120px}
  .authorbox__bio{margin-bottom:12px}
}

/* CTA-Block */
.blog-cta h2{margin-bottom:12px}
.blog-cta .lead{margin-bottom:24px}

/* Trust-Leiste */
.blog-trust{border-top:1px solid var(--color-line);padding:20px 0}
.blog-trust__inner{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;
  font-size:var(--fs-xs);color:var(--color-text-soft);text-transform:uppercase;
  letter-spacing:.1em;font-weight:600}
@media(max-width:600px){.blog-trust__inner{flex-direction:column;align-items:center;gap:10px}}

/* ============================================================
   Blogübersicht (/blog/) — skaliert für 100+ Artikel
   Desktop: kompakte Themen-Pills (Filter) + 4er-Raster, gleich hohe Kacheln.
   Mobil:   pro Thema eine Reihe mit horizontalem Slider (kein Endlos-Scrollen).
   Kacheln: Titel max. 3 Zeilen, Anriss max. 4 Zeilen -> alle gleich hoch,
            "Zum Inhalt" sitzt immer bündig unten, keine Verschiebungen.
   ============================================================ */
.blogindex-head{padding-bottom:40px}
.blogindex-head h1{font-size:clamp(2rem,5vw,var(--fs-2xl));margin:6px 0 14px}
.blogindex{padding-top:40px;padding-bottom:72px}
.blogindex__empty{color:var(--color-text-soft);font-size:var(--fs-md);text-align:center;padding:40px 0}
.blogindex__none{color:var(--color-text-soft);font-size:var(--fs-md);text-align:center;padding:32px 0}

/* --- Geteilte Kachel (Raster + Slider) --- */
.postcard{display:flex;flex-direction:column;height:100%;background:var(--color-surface);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card);
  text-decoration:none;transition:transform .2s,box-shadow .2s}
.postcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}
.postcard__media{position:relative;aspect-ratio:16/9;overflow:hidden;
  background:linear-gradient(135deg,var(--color-heading),var(--color-quote))}
.postcard__media img{width:100%;height:100%;object-fit:cover;display:block}
.postcard__media--ph::after{content:"Inselnauten";position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5);
  font-family:var(--font-display);letter-spacing:.1em;font-size:var(--fs-sm)}
.postcard__body{padding:20px 20px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.postcard__body .kicker{margin-bottom:0}
/* Titel: genau 3 Zeilen Platz, gekürzt bei Überlänge -> keine Höhensprünge */
.postcard__body h3{font-size:var(--fs-md);color:var(--color-heading);line-height:1.25;
  overflow-wrap:break-word;hyphens:auto;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  min-height:3.75em}
/* Anriss: max. 4 Zeilen */
.postcard__body p{color:var(--color-text-soft);font-size:var(--fs-sm);line-height:1.55;margin:0;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.postcard__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:12px;font-size:var(--fs-xs);color:var(--color-text-soft)}
.postcard__more{color:var(--color-primary);font-weight:600;white-space:nowrap;font-size:var(--fs-sm)}

/* --- Desktop: kompakte Themen-Pills (Filter) --- */
.themen{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:30px}
.thema{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;
  border-radius:var(--r-pill);background:var(--color-surface);
  border:1px solid var(--color-line);color:var(--color-heading);
  font-family:var(--font-text);font-size:var(--fs-sm);font-weight:600;
  line-height:1.1;cursor:pointer;text-decoration:none;
  transition:border-color .15s,background .15s,color .15s,box-shadow .15s}
.thema:hover{border-color:var(--color-accent-ink);box-shadow:var(--shadow-card)}
.thema.is-active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.thema__icon{display:flex;align-items:center;justify-content:center;color:var(--color-accent-ink)}
.thema.is-active .thema__icon{color:#fff}

/* --- Desktop: Kachelraster --- */
.postgrid{display:grid;gap:24px;grid-template-columns:minmax(0,1fr)}

/* --- Mobil: Themen-Reihen mit horizontalem Slider --- */
.blog-mobile{padding-top:30px;padding-bottom:60px}
.theme-row{margin-bottom:34px}
.theme-row__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.theme-row__head h2{display:flex;align-items:center;gap:9px;font-size:var(--fs-lg);
  color:var(--color-heading);line-height:1.15}
.theme-row__head .thema__icon{color:var(--color-accent-ink);flex:0 0 auto}
.theme-row__all{font-size:var(--fs-sm);font-weight:600;color:var(--color-primary);
  white-space:nowrap;flex:0 0 auto;text-decoration:none}
.theme-row__slider{position:relative}
.theme-row__track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;padding:4px var(--gutter) 10px;scrollbar-width:none}
.theme-row__track::-webkit-scrollbar{display:none}
/* Schmaler als die Reihe -> die nächste Kachel lugt immer hervor (Wisch-Hinweis) */
.theme-row__track .postcard{flex:0 0 72%;max-width:290px;scroll-snap-align:start}
/* Rand-Verläufe + Chevron, per JS nur sichtbar wenn die Reihe scrollbar ist */
.theme-row__fade{position:absolute;top:0;bottom:10px;width:54px;pointer-events:none;
  display:flex;align-items:center;opacity:0;transition:opacity .2s;z-index:2}
.theme-row__fade--l{left:0;justify-content:flex-start;
  background:linear-gradient(to right,var(--color-bg) 35%,transparent)}
.theme-row__fade--r{right:0;justify-content:flex-end;
  background:linear-gradient(to left,var(--color-bg) 35%,transparent)}
.theme-row__fade--r svg{color:var(--color-primary);
  background:var(--color-surface);border-radius:50%;padding:5px;width:30px;height:30px;
  box-shadow:var(--shadow-card)}
.theme-row.can-left .theme-row__fade--l{opacity:1}
.theme-row.can-right .theme-row__fade--r{opacity:1}

/* --- Umschaltung: mobil zeigt Slider, Desktop zeigt Filter+Raster --- */
.blog-desktop{display:none}
@media(min-width:760px){
  .blog-mobile{display:none}
  .blog-desktop{display:block}
}
@media(min-width:760px){.postgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:980px){.postgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ============================================================
   FAQ-ÜBERSICHT  (/faqconc/)
   Bewusst ANDERS als der Blog: warm statt petrol-kühl, Accordion
   statt Bildkarten, Live-Suche als Einstieg. Desktop = Themen-
   Sidebar links, Mobil = sticky Themen-Chips oben.
   ============================================================ */

/* --- Hero: warmer Sandgold-Block (kühles Petrol nur in der Schrift) --- */
.faqhero{display:block}
/* Bild voll und UNGESCHNITTEN: Titel/Logo sind eingebrannt -> niemals croppen
   oder mit Overlay/clip-path bearbeiten. Natürliches Seitenverhältnis. */
.faqhero__media{width:100%;line-height:0;
  background:linear-gradient(135deg,var(--color-accent),var(--color-accent-deep))}
.faqhero__media img{display:block;width:100%;height:auto}
.faqhero__bar{background:linear-gradient(135deg,var(--color-accent),var(--color-accent-deep))}
.faqhero__inner{max-width:860px;margin:0 auto;padding:1.6rem 1.25rem 1.8rem}
.faqhero__title{font-family:var(--font-display);font-weight:700;line-height:1.18;
  font-size:clamp(1.35rem,2.6vw,1.9rem);letter-spacing:-.01em;color:var(--color-heading-deep);
  margin:0 0 .5rem;max-width:30ch;overflow-wrap:break-word}
.faqhero__lead{font-family:var(--font-text);color:var(--color-text);
  font-size:clamp(1rem,1.5vw,1.12rem);line-height:1.6;max-width:56ch;margin:0 0 1.2rem}

/* nur für Screenreader/Google sichtbar (Titel steht visuell im Bild) */
.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}

/* --- Suchfeld (die FAQ-typische Geste) --- */
.faqsearch{position:relative;max-width:540px}
.faqsearch__icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);
  color:var(--color-text-soft);pointer-events:none}
.faqsearch input{width:100%;box-sizing:border-box;padding:15px 44px 15px 46px;
  border:1px solid var(--color-line);border-radius:var(--r-pill);background:var(--color-surface);
  font-family:var(--font-text);font-size:var(--fs-base);color:var(--color-text);
  box-shadow:var(--shadow-card);transition:box-shadow .2s,border-color .2s}
.faqsearch input::placeholder{color:var(--color-text-soft)}
.faqsearch input:focus{outline:none;border-color:var(--color-heading);box-shadow:var(--shadow-soft)}
.faqsearch input::-webkit-search-cancel-button{display:none}
.faqsearch__clear{position:absolute;right:10px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border:none;border-radius:50%;background:var(--color-surface-cool);
  color:var(--color-heading);font-size:1.2rem;line-height:1;cursor:pointer}
.faqsearch__clear:hover{background:var(--color-line-cool)}

/* --- Mobil: sticky Themen-Chips --- */
.faqchips{position:sticky;top:0;z-index:20;background:var(--color-bg);
  border-bottom:1px solid var(--color-line)}
.faqchips__track{display:flex;gap:8px;overflow-x:auto;padding:11px var(--gutter);
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.faqchips__track::-webkit-scrollbar{display:none}
.faqchip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:7px 13px;
  border-radius:var(--r-pill);background:var(--color-surface);border:1px solid var(--color-line);
  color:var(--color-heading);font-family:var(--font-text);font-size:var(--fs-sm);font-weight:600;
  text-decoration:none;white-space:nowrap}
.faqchip__icon{display:flex;color:var(--color-accent-ink)}
.faqchip.is-active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.faqchip.is-active .faqchip__icon{color:#fff}

/* --- Layout: Mobil einspaltig, Desktop Sidebar + Inhalt --- */
.faqlayout{padding-top:34px;padding-bottom:72px;display:grid;gap:32px;
  grid-template-columns:minmax(0,1fr)}
.faqnav{display:none}

/* --- Accordion-Gruppen --- */
.faqgroup{scroll-margin-top:110px;margin-bottom:34px}
.faqgroup:last-of-type{margin-bottom:0}
.faqgroup__title{display:flex;align-items:center;gap:10px;font-family:var(--font-display);
  font-size:var(--fs-lg);color:var(--color-heading);line-height:1.15;margin:0 0 14px;
  padding-bottom:12px;border-bottom:1px solid var(--color-line)}
.faqgroup__icon{display:flex;color:var(--color-accent-ink);flex:0 0 auto}
.faqgroup__list{display:flex;flex-direction:column}

.faqitem{border-bottom:1px solid var(--color-line)}
.faqitem__q{display:flex;align-items:center;justify-content:space-between;gap:14px;
  cursor:pointer;list-style:none;padding:17px 4px;
  font-family:var(--font-text);font-weight:600;font-size:var(--fs-base);
  color:var(--color-heading);line-height:1.4}
.faqitem__q::-webkit-details-marker{display:none}
.faqitem__q:hover{color:var(--color-primary)}
.faqitem__chev{flex:0 0 auto;color:var(--color-accent-ink);transition:transform .2s}
.faqitem[open] .faqitem__q{color:var(--color-primary)}
.faqitem[open] .faqitem__chev{transform:rotate(180deg)}
.faqitem__a{padding:0 4px 22px;color:var(--color-text);font-size:var(--fs-base);line-height:1.7;
  max-width:68ch}
.faqitem__a :first-child{margin-top:0}
.faqitem__a h2,.faqitem__a h3{font-family:var(--font-display);color:var(--color-heading);
  font-size:var(--fs-md);line-height:1.25;margin:1.4em 0 .5em}
.faqitem__a p{margin:0 0 1em}
.faqitem__a ul,.faqitem__a ol{margin:0 0 1em;padding-left:1.3em}
.faqitem__a li{margin:.3em 0}
.faqitem__a a{color:var(--color-primary);font-weight:600;text-decoration:underline;
  text-underline-offset:2px}
.faqitem__a img{max-width:100%;height:auto;border-radius:var(--r-md);margin:.4em 0}
.faqitem__more{display:inline-block;margin-top:.4em;font-weight:600;color:var(--color-primary);
  text-decoration:none}
.faqmain__none{color:var(--color-text-soft);font-size:var(--fs-md);text-align:center;padding:48px 0}

/* --- Ab 880px: Chips weg, Sidebar erscheint --- */
@media(min-width:880px){
  .faqchips{display:none}
  .faqlayout{grid-template-columns:230px minmax(0,1fr);gap:48px;padding-top:44px}
  .faqnav{display:block;align-self:start;position:sticky;top:24px}
  .faqnav__head{font-family:var(--font-text);font-size:var(--fs-xs);font-weight:600;
    text-transform:uppercase;letter-spacing:.14em;color:var(--color-text-soft);margin:0 0 12px}
  .faqnav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
  .faqnav a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--r-md);
    text-decoration:none;color:var(--color-heading);font-family:var(--font-text);
    font-size:var(--fs-sm);font-weight:600;line-height:1.2;
    border-left:3px solid transparent;transition:background .15s,border-color .15s}
  .faqnav a:hover{background:var(--color-surface-cool)}
  .faqnav a.is-active{background:var(--color-surface-cool);border-left-color:var(--color-accent-ink)}
  .faqnav__icon{display:flex;color:var(--color-accent-ink);flex:0 0 auto}
  .faqnav__label{flex:1}
  .faqnav__count{font-size:var(--fs-xs);color:var(--color-text-soft);font-weight:600}
  .faqhero__inner{padding:1.8rem 2rem 2rem}
}

/* --- FAQ-Einzelseite (/faqconc/<slug>/) --- */
.faqpost-hero{background:linear-gradient(135deg,var(--color-accent),var(--color-accent-deep))}
.faqpost-hero__inner{padding-top:30px;padding-bottom:34px}
.faqpost-hero .kicker{color:var(--color-heading-deep)}
.faqpost-hero h1{font-family:var(--font-display);font-weight:700;line-height:1.12;
  font-size:clamp(1.7rem,4vw,2.6rem);letter-spacing:-.02em;color:var(--color-heading-deep);
  margin:0;max-width:24ch;overflow-wrap:break-word}
.faqpost-back{display:inline-block;font-family:var(--font-text);font-size:var(--fs-sm);
  font-weight:600;color:var(--color-heading-deep);text-decoration:none;margin-bottom:12px}
.faqpost-back:hover{text-decoration:underline}
.faqpost-body{padding-top:40px;padding-bottom:64px}

.faqpost-foot{margin-top:34px}

@media(prefers-reduced-motion:reduce){
  .faqitem__chev{transition:none}
}
/* Smooth-Scroll nur, wenn der Nutzer keine reduzierte Bewegung wünscht. Vorher
   stand hier zusätzlich ein ungebundenes html{scroll-behavior:smooth} nach dem
   reduced-motion-Block -> das hat die Ausnahme oben in der Kaskade wieder
   überschrieben (gleiche Selektor-Spezifität, späterer Quelltext gewinnt). */
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}