/* TURNDOWN Magazine - Pop Art Design System */

/* ==================== SELF-HOSTED FONTS ==================== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/inter-900-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/inter-900-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter 500 / 600 — fuer wl-Refresh: Steckbrief-dd, Card-Titles,
   Login-Pill, Hero-Author, Buttons. Eine kombinierte latin+latin-ext
   Datei pro Schnitt (Google-Fonts-Helper Output). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-v20-latin_latin-ext-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-v20-latin_latin-ext-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Fraunces — variable display-Serif (5 Achsen: SOFT, WONK, opsz, wght
   + Italic). Subsetted in latin_basic + latin_ext fuer kleinere
   Download-Groesse (Browser laedt nur den Subset der gerade gebraucht
   wird). Bracket-Filenames bleiben als Fallback fuer den Fall, dass
   die Subset-Files mal nicht greifen. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Fraunces--latin_basic.woff2') format('woff2-variations'),
       url('fonts/Fraunces--latin_basic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Fraunces--latin_ext.woff2') format('woff2-variations'),
       url('fonts/Fraunces--latin_ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Fraunces-Italic--latin_basic.woff2') format('woff2-variations'),
       url('fonts/Fraunces-Italic--latin_basic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Fraunces-Italic--latin_ext.woff2') format('woff2-variations'),
       url('fonts/Fraunces-Italic--latin_ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* JetBrains Mono — 500 Regular, ein Schnitt (Eyebrows / Meta / TOC
   Numbering / Ticker-Chip). Latin + Latin-Ext kombiniert. */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/jetbrains-mono-v24-latin_latin-ext-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* JetBrains Mono — 400 (agentur.rocks --font-mono Code-Schnitt). Lokal, DSGVO. */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/jetbrains-mono-400-latin.woff2') format('woff2');
}

/* Space Grotesk — Display-Font fuer Tenant agentur.rocks (--font-display).
   Lokal selbst-gehostet (DSGVO, kein Google-CDN). Wird von td/wl nicht
   referenziert, stoert dort also nicht. */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/space-grotesk-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/space-grotesk-500-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/space-grotesk-700-latin.woff2') format('woff2');
}

/* ==================== ACCESSIBILITY ==================== */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--yellow);
  color: var(--ink);
  padding: 10px 20px;
  font-weight: 900;
  font-size: 14px;
  z-index: 10000;
  text-decoration: none;
}
.skip-link:focus { top: 0; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* Focus visible for all interactive elements */
a:focus-visible, button:focus-visible, select:focus-visible, [contenteditable]:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
  border-radius: 4px;
}
input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==================== DESIGN TOKENS ==================== */

:root {
  /* Brand */
  --ink: #111111;
  --yellow: #FFDC00;
  --pink: #FF3864;
  --blue: #2d4d28;
  --purple: #A537FD;
  --mint: #00D2BE;
  --orange: #FF8C00;
  --cream: #FFF8E6;
  --white: #FFFFFF;
  /* Neutrals */
  --gray-100: #F5F3EB;
  --gray-200: #E6E3DA;
  --gray-300: #C8C4BA;
  --gray-400: #969288;
  --gray-500: #6E6A60;
  --gray-600: #504C42;
  --gray-700: #37342C;
  --gray-800: #23211C;
  /* Semantic */
  --success: #00C853;
  --error: #FF1744;
  --warning: #FFC400;
  /* Links — WCAG AA contrast auf hellen Hintergründen (cream/sand/white/gray-100) */
  --link: #B71C4C;           /* tiefes brand-pink, ~5.8:1 auf weiß */
  --link-hover: #111111;     /* schwarz on hover */
  --link-on-dark: #FFDC00;   /* gelb auf dunklen Hintergründen (--ink) */
  --link-on-pink: #FFFFFF;   /* weiß auf pink */
  /* Radius */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-pill: 50px;
  /* Layout */
  --content-max: 1200px;
  --side-padding: 48px;
  --side-padding-mobile: 20px;
  /* Brand — definieren die Pop-Art-Signature. Andere Themes ueberschreiben
     diese Tokens via design_tokens-Tabelle (siehe View::renderTokenCss). */
  --brand-border-hair: 1.5px solid var(--ink);
  --brand-border-thin: 2px solid var(--ink);
  --brand-border: 3px solid var(--ink);
  --brand-shadow-sm: 3px 3px 0 var(--ink);
  --brand-shadow-md: 4px 4px 0 var(--ink);
  --brand-shadow-lg: 6px 6px 0 var(--ink);
  --brand-shadow-xl: 8px 8px 0 var(--ink);
  /* Typography-Familien (als Tokens, damit Themes Fonts austauschen koennen) */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: 'SF Mono', Monaco, Consolas, monospace;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* Antialiasing global für scharfe Schrift auf allen Elementen */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html { overflow-x: clip; }
body {
  font-family: var(--font-sans, 'Inter', -apple-system, sans-serif);
  background: var(--cream);
  color: var(--ink);
  overflow-x: clip;
}

a { color: inherit; text-decoration: none; }

/* Inline-Links im Content sollen sich vom Fließtext abheben */
.article-body a:not(.comment-invite__btn):not(.glossary-link),
.job-description a,
.event-detail-body a,
.glossary-body a,
.page-hero__desc a,
.auth-card a,
.flash a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}
.article-body a:hover,
.job-description a:hover,
.event-detail-body a:hover,
.glossary-body a:hover {
  color: var(--link-hover);
}
/* Auf dunklen Hintergründen */
.bg-ink a, .bg-dark a,
.hero a, .hero a:hover,
.people-spotlight a,
.home-events a { color: var(--link-on-dark); }
/* Auf pink/brand-Hintergründen */
.bg-pink a, .page-hero--pink a { color: var(--link-on-pink); }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; }

/* Content wrapper: max 1200px centered, bg goes full viewport */
.content-wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-left: var(--side-padding);
  padding-right: var(--side-padding);
}

/* ==================== HEADER ==================== */
.header {
  background: var(--ink);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 16px 0;
  display: flex;
  align-items: center;
}

.header__logo {
  font-weight: 900;
  font-size: 28px;
  letter-spacing: 4px;
  color: var(--yellow);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 0;
}
.header__logo--image { letter-spacing: 0; padding: 0; }
.header__logo--image img { height: 36px; width: auto; display: block; }
@media (max-width: 768px) {
  /* Mobile: gleich hoch wie Login-Button + Burger, damit das Logo nicht
     optisch verschwindet. Vorher 28px -> wirkte vs. 40px-Buttons winzig. */
  .header__logo--image img { height: 40px; }
  /* Text-Logo bei td (faellt zurueck wenn site_logo_path leer): groesser
     fuers Mobile-Header. */
  .header__logo { font-size: 26px; letter-spacing: 3px; }
}

.header__nav {
  display: flex;
  gap: 24px;
  margin-left: auto;
}

.header__nav a {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--white);
  transition: color 0.2s;
  white-space: nowrap;
}

.header__nav a:hover { color: var(--yellow); }

.header__nav-item { position: relative; display: inline-flex; align-items: center; }
.header__nav-item--has-children > .header__nav-link::after {
  content: '▾'; margin-left: 4px; font-size: 10px; opacity: 0.6;
  transition: transform 0.2s ease;
}
.header__nav-item--has-children:hover > .header__nav-link::after,
.header__nav-item--has-children:focus-within > .header__nav-link::after { transform: rotate(180deg); }

.header__flyout {
  position: absolute; top: 100%; left: -12px;
  margin-top: 18px;
  min-width: 240px;
  background: var(--white); color: var(--ink);
  border: var(--brand-border-thin); border-radius: 10px;
  box-shadow: var(--brand-shadow-md);
  padding: 8px; z-index: 100;
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
/* Invisible bridge so hover doesn't drop when crossing the gap */
.header__flyout::before {
  content: ''; position: absolute; top: -18px; left: 0; right: 0; height: 18px;
}
.header__nav-item--has-children:hover > .header__flyout,
.header__nav-item--has-children:focus-within > .header__flyout {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.header__flyout-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
  color: var(--ink) !important; text-transform: none;
  transition: background 0.15s ease;
}
.header__flyout-link:hover { background: var(--sand); color: var(--ink) !important; }
.header__flyout-link::after { display: none !important; content: none !important; }
.header__flyout-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}

@media (max-width: 1199px) {
  .header__nav { display: none; }
  .header__inner { padding-left: var(--side-padding); padding-right: var(--side-padding); }
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}

.header__login-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--ink);
  background: var(--yellow);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
}
.header__login-btn .header__login-icon { display: none; }

@media (max-width: 420px) {
  .header__login-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    color: var(--yellow);
  }
  .header__login-btn:hover { background: var(--yellow); color: var(--ink); }
  .header__login-btn .header__login-icon { display: block; }
  .header__login-btn .header__login-label { display: none; }
}
.header__user-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  font-weight: 900;
  font-size: 13px;
}

.header__search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  color: var(--yellow);
  cursor: pointer;
  background: transparent;
  border: none;
  transition: background 0.15s, color 0.15s;
}
.header__search-btn:hover { background: var(--yellow); color: var(--ink); }
.header__search-btn:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

.header__burger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}

.header__burger span {
  display: block;
  width: 24px;
  /* 2px (ganzzahlig) statt 2.5px: vorher rasterte der mittlere Balken durch
     den Gap-Offset auf einer Halb-Pixel-Position und sah dadurch weicher/
     duenner aus als Top und Bottom. */
  height: 2px;
  background: var(--yellow);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}

/* ==================== MOBILE NAV OVERLAY ==================== */
.mobile-nav {
  position: fixed;
  top: 0;
  right: -400px;
  width: 400px;
  max-width: 100vw;
  height: 100vh;
  background: var(--ink);
  z-index: 2000;
  transition: right 0.35s cubic-bezier(0.4,0,0.2,1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-shadow: -8px 0 32px rgba(0,0,0,0.3);
}

.mobile-nav.is-open { right: 0; }

/* Backdrop behind nav */
.mobile-nav-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(17,17,17,0.5);
  z-index: 1999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.mobile-nav-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-nav__header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  flex-shrink: 0;
}

.mobile-nav__logo {
  font-weight: 900;
  font-size: 20px;
  letter-spacing: 3px;
  color: var(--yellow);
}

.mobile-nav__close {
  margin-left: auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--yellow);
  border: none;
  font-weight: 900;
  font-size: 18px;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-nav__search {
  margin: 0 20px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--gray-800);
  padding: 12px 16px;
  border-radius: var(--radius-pill);
}

.mobile-nav__search-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--yellow);
  flex-shrink: 0;
}

.mobile-nav__search input {
  background: none;
  border: none;
  color: var(--white);
  font-size: 14px;
  font-family: inherit;
  width: 100%;
  outline: none;
}

.mobile-nav__search input::placeholder { color: var(--gray-400); }

.mobile-nav__links { flex: 1; }

.mobile-nav__link {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 16px 20px;
  color: var(--white);
  font-weight: 700;
  font-size: 17px;
  transition: padding-left 0.2s;
}

.mobile-nav__link:hover { padding-left: 28px; }
.mobile-nav__link--secondary { font-weight: 500; border-bottom: 1px solid rgba(255,255,255,0.06); }

.mobile-nav__link-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 12px;
  flex-shrink: 0;
}

.mobile-nav__link-arrow {
  color: var(--gray-400);
  font-size: 24px;
  transition: transform 0.2s;
  display: inline-block;
}

/* Accordion groups */
.mobile-nav__group {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mobile-nav__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.mobile-nav__group .mobile-nav__link { border-bottom: none; }
.mobile-nav__toggle {
  background: none;
  border: none;
  padding: 16px 20px;
  cursor: pointer;
  color: var(--gray-400);
  font-size: 20px;
  margin-left: auto;
}
.mobile-nav__group.is-open .mobile-nav__link-arrow { transform: rotate(90deg); color: var(--yellow); }
.mobile-nav__sublinks {
  flex-basis: 100%;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: rgba(255,255,255,0.04);
}
.mobile-nav__group.is-open > .mobile-nav__sublinks { max-height: 4000px; }

/* Burger-only-Modus: Desktop-Nav aus, Burger immer sichtbar. */
body.header-nav-burger-only .header__nav { display: none !important; }
body.header-nav-burger-only .header__burger { display: flex !important; }

/* ============================================================
   TENANT: weloveurlaub — reduzierte Palette, Soft-Gradient-Sections,
   kompakteres Figure-Layout. Alle Overrides sind unter body.site-
   weloveurlaub gescopt, damit andere Tenants unberuehrt bleiben.
============================================================ */
body.site-weloveurlaub {
  /* "Kuestenwaerme" — WCAG 2.2 AA/AAA Farbsystem (Claude-Design 2026-05-06)
     3 Farbfamilien: Tann-Gruen / Bernstein / Sand & Tinte
     60-30-10 Verteilung: 60% Sand-Neutrale, 30% Tann, 10% Bernstein. */

  /* PRIMARY · Tann (Gruen) */
  --green-50:  #f1f5f0;
  --green-100: #dde6da;
  --green-200: #b8cab2;
  --green-300: #8ba884;
  --green-400: #5d8455;
  --green-500: #3d6537;
  --green-600: #2d4d28;
  --green-700: #233d1f;
  --green-800: #1a2d17;
  --green-900: #0f1c0d;
  /* ACCENT · Bernstein */
  --amber-50:  #fdf6ec;
  --amber-100: #f9e6c8;
  --amber-200: #f1cb8d;
  --amber-300: #e6a955;
  --amber-400: #d18a2d;
  --amber-500: #b86f1c;
  --amber-600: #9a5614;
  --amber-700: #7a4210;
  --amber-800: #5a300c;
  --amber-900: #3d2008;
  /* NEUTRALS · Sand & Tinte */
  --sand-50:  #faf7f1;
  --sand-100: #f4eedf;
  --sand-200: #e8dfc9;
  --sand-300: #d4c8aa;
  --ink-400: #8a8478;
  --ink-500: #5c574d;
  --ink-600: #3d3934;
  --ink-700: #2a2724;
  --ink-800: #1a1916;
  --ink-900: #0d0c0b;

  /* SEMANTIC — in Komponenten NUR diese verwenden */
  --bg-page:        var(--sand-50);
  --bg-soft:        var(--sand-100);
  --bg-card:        #ffffff;
  --bg-inverse:     var(--ink-900);
  --bg-primary:     var(--green-600);
  --bg-accent:      var(--amber-500);
  --text-primary:   var(--ink-800);
  --text-secondary: var(--ink-500);
  --text-muted:     var(--ink-400);
  --text-on-dark:   var(--sand-50);
  --text-on-primary:#ffffff;
  --text-on-accent: #ffffff;
  --text-link:      var(--green-600);
  --text-link-hover:var(--green-700);
  --action-primary:        var(--green-600);
  --action-primary-hover:  var(--green-700);
  --action-primary-active: var(--green-800);
  --action-accent:         var(--amber-500);
  --action-accent-hover:   var(--amber-600);
  --focus-ring:            var(--amber-400);
  --border-subtle:  var(--sand-200);
  --border-default: var(--sand-300);
  --border-strong:  var(--ink-400);

  /* LEGACY-ALIAS — bestehende Komponenten (insider-quote, fact-card,
     activity-card etc.) nutzen diese Tokens; werden auf das neue System
     gemappt. Neue Komponenten sollen die SEMANTIC-Tokens oben verwenden. */
  --section-bg: linear-gradient(135deg, var(--sand-50) 0%, var(--sand-100) 100%);
  --blue:             var(--green-600);
  --wl-primary-dark:  var(--green-700);
  --wl-primary-mid:   var(--green-600);
  --wl-primary-light: var(--amber-300);
  --wl-yellow:        var(--amber-300);
  --wl-coral:         var(--amber-500);
  --cream:            var(--sand-50);

  /* Typografie — Fraunces (display, lokal nachladen) + Inter (body, da) +
     JetBrains Mono (meta, lokal nachladen). Fallbacks decken alles ab. */
  --font-display: 'Fraunces', 'Crimson Pro', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Monaco, Consolas, monospace;
}
body.site-weloveurlaub .hero,
body.site-weloveurlaub .page-hero,
body.site-weloveurlaub .page-hero--yellow,
body.site-weloveurlaub .bg-cream,
body.site-weloveurlaub .bg-sand,
body.site-weloveurlaub .bg-yellow,
body.site-weloveurlaub .article-hero-split-wrap {
  background: var(--section-bg) !important;
  color: var(--ink);
}
/* .article-hero-split ist nur der innere Grid-Container — nie eigener
   Background. */
body.site-weloveurlaub .article-hero-split { background: transparent !important; }
/* Tags/Chips bekommen in weloveurlaub einheitlich Primary-Blue, damit
   die Kategorie-Chips nicht in 8 verschiedenen Farben leuchten. */
body.site-weloveurlaub .tag,
body.site-weloveurlaub .hero__tag,
body.site-weloveurlaub .page-hero__badge {
  background: var(--blue) !important;
  color: #fff !important;
}
/* Quick-Link-Kacheln (Kategorie-Tiles auf der Homepage) in wl:
   helle Flaeche, dunkler Text, olive Icon-Bubble (button-style). */
body.site-weloveurlaub .quick-link {
  background: var(--cream) !important;
  color: var(--wl-primary-dark) !important;
  border: 1px solid rgba(45, 77, 40, 0.12);
}
body.site-weloveurlaub .quick-link__icon { color: #fff !important; background: var(--wl-primary-mid) !important; }
body.site-weloveurlaub .quick-link__label { color: var(--wl-primary-dark) !important; }
/* "ENTDECKE UNSERE THEMENWELTEN"-Slider: helle Card mit dunkler Schrift,
   Icon-Bubble in Olive (button-style). Info-Bar als heller Overlay. */
body.site-weloveurlaub .category-card { background: var(--cream) !important; border: 1px solid rgba(45, 77, 40, 0.12); }
body.site-weloveurlaub .category-card__info { background: linear-gradient(transparent, rgba(254, 250, 224, 0.96)) !important; }
body.site-weloveurlaub .category-card__name { color: var(--wl-primary-dark) !important; }
body.site-weloveurlaub .category-card__count { color: var(--gray-600) !important; }
body.site-weloveurlaub .category-card__icon { background: var(--wl-primary-mid) !important; color: #fff !important; }

/* ===== wl-Buttons: Olive (Primary-Mid) + weisse Schrift =====
   Ersetzt Pop-Art-Default (Ink-BG + Yellow-Schrift) fuer alle
   Primary-CTA-/Aktiv-Pill-/Tab-Varianten. Hover: Forest (Primary-Dark). */
body.site-weloveurlaub .btn--primary,
body.site-weloveurlaub .cmp-btn--primary,
body.site-weloveurlaub .cmp-btn--equal,
body.site-weloveurlaub .tab--active,
body.site-weloveurlaub .glossary-letter--active,
body.site-weloveurlaub .career-dept-tab--active,
body.site-weloveurlaub .filter-pill--active,
body.site-weloveurlaub .badge-starburst--ink,
body.site-weloveurlaub .trip-planner__btn,
body.site-weloveurlaub .profile-nav__item.is-active,
body.site-weloveurlaub .discussion-cat.is-active,
body.site-weloveurlaub .dm-msg--mine .dm-msg__bubble {
  background: var(--wl-primary-mid) !important;
  color: #fff !important;
  border-color: var(--wl-primary-mid) !important;
}
body.site-weloveurlaub .btn--primary:hover,
body.site-weloveurlaub .cmp-btn--primary:hover,
body.site-weloveurlaub .cmp-btn--equal:hover,
body.site-weloveurlaub .tab--active:hover,
body.site-weloveurlaub .filter-pill--active:hover,
body.site-weloveurlaub .trip-planner__btn:hover {
  background: var(--wl-primary-dark) !important;
  border-color: var(--wl-primary-dark) !important;
  color: #fff !important;
}
/* Content-Figures: max-breite, dezenter Abstand, Radius — nicht mehr
   Full-Width-Hero im Flieschart. */
/* Magazin-Style Figures mit alternierendem Layout:
   - Auf Desktop wechseln sich breite Full-Column-Figures mit
     umflossenen Half-Column-Figures ab (odd/even).
   - Collage-Feeling statt monoton "text-bild-text-bild".
   - Mobile bleibt single-column full-width.
   - Aspect-Ratio clamp auf 16/9 mit object-cover verhindert extreme
     Hoch- oder Querformat-Sprengung des Lesefluss. */
body.site-weloveurlaub .article-body figure {
  margin: 40px 0 44px;
  max-width: 100%;
}
body.site-weloveurlaub .article-body figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  border-radius: 14px;
  box-shadow: 0 10px 32px rgba(15, 42, 74, 0.12);
  display: block;
}
body.site-weloveurlaub .article-body figcaption { display: none; }
body.site-weloveurlaub .article-body h2 + figure { margin-top: 20px; }
body.site-weloveurlaub .article-body figure + p { margin-top: 18px; }

/* Alternierendes Layout ab Tablet-Breite:
   - Jede zweite Figure (nth-of-type(even)) wird rechts angefloat, schmaler,
     Text umfliesst links.
   - Jede dritte (nth-of-type(3n)) full-bleed (breiter als Content-Column,
     pull-out). */
@media (min-width: 820px) {
  body.site-weloveurlaub .article-body figure:nth-of-type(even) {
    float: right;
    width: 46%;
    margin: 6px 0 20px 32px;
    shape-outside: margin-box;
  }
  body.site-weloveurlaub .article-body figure:nth-of-type(even) img {
    aspect-ratio: 4 / 3;
  }
  body.site-weloveurlaub .article-body figure:nth-of-type(3n) {
    float: none;
    width: calc(100% + 160px);
    margin-left: -80px;
    margin-right: -80px;
  }
  body.site-weloveurlaub .article-body figure:nth-of-type(3n) img {
    aspect-ratio: 21 / 9;
    border-radius: 18px;
  }
  /* Paragraphs nach einer even-Figure den float nicht "ueberlaufen" lassen. */
  body.site-weloveurlaub .article-body h2 { clear: both; }
}

/* Affiliate-CTA-Block (GetYourGuide-Erlebnisse): auffaellig aber elegant,
   klar als Partner-Angebot ausgewiesen. */
.affiliate-cta {
  margin: 40px auto;
  max-width: 640px;
  background: linear-gradient(135deg, var(--ink) 0%, #2D1B4E 100%);
  color: #fff;
  border-radius: 16px;
  padding: 28px 32px;
  box-shadow: 0 12px 32px rgba(0, 86, 179, 0.25);
  text-align: center;
}
.affiliate-cta__badge {
  display: inline-block;
  background: rgba(255,255,255,0.2);
  color: #fff;
  font-size: 11px;
  letter-spacing: 1.5px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.affiliate-cta__title { font-size: 22px; font-weight: 800; margin: 0 0 12px; color: #fff; letter-spacing: -0.01em; }
.affiliate-cta__price { font-size: 16px; margin: 0 0 18px; color: rgba(255,255,255,0.95); }
.affiliate-cta__price strong { font-size: 28px; font-weight: 900; }
.affiliate-cta__price-note { font-size: 13px; opacity: 0.85; margin-left: 4px; }
.affiliate-cta__btn {
  display: inline-block;
  background: #fff;
  color: var(--blue);
  font-weight: 800;
  padding: 14px 32px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 15px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.affiliate-cta__btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,0.2); }
.affiliate-cta__disclaimer { font-size: 11px; opacity: 0.75; margin: 16px 0 0; line-height: 1.5; }
/* Header komplett weiss, Text-/Icon-Farbe wechselt auf Ink fuer Kontrast. */
body.site-weloveurlaub .header { background: #fff !important; border-bottom: 1px solid #e5e7eb; }
body.site-weloveurlaub .header__nav-link,
body.site-weloveurlaub .header__logo { color: var(--ink) !important; }
body.site-weloveurlaub .header__burger span { background: var(--ink) !important; }
body.site-weloveurlaub .favorites-link,
body.site-weloveurlaub .header__search-btn { color: var(--ink) !important; }
body.site-weloveurlaub .header__search-btn:hover { background: var(--cream) !important; color: var(--ink) !important; }
body.site-weloveurlaub .header__login-btn { background: var(--ink) !important; color: var(--blue) !important; }
body.site-weloveurlaub .header__user-btn { background: var(--ink) !important; color: var(--blue) !important; }
/* Breaking-Ticker: Primary-Blue als Hintergrund, Coral-Rot als Chip. */
body.site-weloveurlaub .ticker { background: var(--ink) !important; }
body.site-weloveurlaub .ticker__badge {
  background: var(--breaking-accent) !important;
  color: var(--ink) !important;
  box-shadow: 16px 0 0 var(--ink), -4px 0 0 var(--ink) !important;
}
body.site-weloveurlaub .ticker__item a { color: #fff !important; }
body.site-weloveurlaub .ticker__sep { color: rgba(255,255,255,0.5) !important; }
/* H1 / Buttons in Brand-Blau. */
body.site-weloveurlaub h1,
body.site-weloveurlaub .article-title,
body.site-weloveurlaub .page-hero__title { color: var(--ink) !important; }
body.site-weloveurlaub .btn,
body.site-weloveurlaub .btn-primary,
body.site-weloveurlaub .article-meta__share-btn,
/* Kontrast/Barrierefreiheit: --blue ist in der wl-Palette ein dunkles Gruen
   (#2d4d28); dunkler --ink-Text darauf war unlesbar. Weisse Schrift. */
body.site-weloveurlaub .comment-invite__btn { background: var(--blue) !important; color: #fff !important; border-color: var(--blue) !important; }
body.site-weloveurlaub .btn:hover,
body.site-weloveurlaub .btn-primary:hover { background: var(--ink) !important; color: var(--blue) !important; border-color: var(--ink) !important; }
/* Comment-Button-Hover: weiss auf Ink (statt dunkelgruen auf Ink). */
body.site-weloveurlaub .comment-invite__btn:hover { background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important; }
/* Quicklinks: Gold-Kreis mit dunklem Ink-Initial (Reference-Look). */
body.site-weloveurlaub .quick-link__icon {
  background: var(--blue) !important;
  color: var(--ink) !important;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}
/* News-Hero / Top-Story: Landscape-Bild fuellt Card-Hoehe komplett aus.
   aspect-ratio nur auf Container (nicht auf img), damit Bild auf 100 %
   des Containers wachsen darf, egal wie lang die Textspalte ist. */
body.site-weloveurlaub .news-hero__image {
  aspect-ratio: auto !important;
  height: 100%;
  min-height: 320px;
}
/* news-wide: feste 16/9-Landscape-Ratio erzwingen, sonst streckt ein
   Portrait-Quellbild die gesamte Zweispalten-Zeile in die Hoehe und die
   Kachel ragt als ein "zu hohes Portrait-Tile" aus der Kategorie-Liste heraus. */
body.site-weloveurlaub .news-wide__image {
  aspect-ratio: 16/9 !important;
  height: auto !important;
  min-height: 0 !important;
}
body.site-weloveurlaub .news-hero__image picture,
body.site-weloveurlaub .news-hero__image img,
body.site-weloveurlaub .news-wide__image picture,
body.site-weloveurlaub .news-wide__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center;
  max-height: none !important;
  aspect-ratio: auto !important;
}
/* gpt-image-2-Bilder sind 3:2 — ALLE Artikel-/Kategorie-Card-Bildflaechen auf
   3:2 vereinheitlichen, damit nichts mehr beschnitten wird (Container gibt die
   Ratio vor, Bild fuellt per object-fit:cover). Ueberschreibt die aelteren
   16/9- und auto-Regeln oben. */
body.site-weloveurlaub .card__image,
body.site-weloveurlaub .news-card__image,
body.site-weloveurlaub .news-featured__image,
body.site-weloveurlaub .news-wide__image,
body.site-weloveurlaub .news-row__image,
body.site-weloveurlaub .news-spotlight__image {
  aspect-ratio: 3/2 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden;
}
body.site-weloveurlaub .card__image img,
body.site-weloveurlaub .card__image picture,
body.site-weloveurlaub .news-card__image img,
body.site-weloveurlaub .news-card__image picture,
body.site-weloveurlaub .news-featured__image img,
body.site-weloveurlaub .news-featured__image picture,
body.site-weloveurlaub .news-wide__image img,
body.site-weloveurlaub .news-wide__image picture,
body.site-weloveurlaub .news-row__image img,
body.site-weloveurlaub .news-row__image picture,
body.site-weloveurlaub .news-spotlight__image img,
body.site-weloveurlaub .news-spotlight__image picture {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  aspect-ratio: auto !important;
  display: block;
}
/* Display-Font fuer Headlines bei wl (Fraunces Serif, fallback Georgia).
   Setzt sich ueber die global-body-Font hinweg. Token-gesteuert, der Wert
   kommt aus design_tokens.font-display. */
body.site-weloveurlaub h1,
body.site-weloveurlaub h2,
body.site-weloveurlaub h3,
body.site-weloveurlaub .article-title,
body.site-weloveurlaub .page-hero__title,
body.site-weloveurlaub .hero__title,
body.site-weloveurlaub .section-header__title {
  font-family: var(--font-display, var(--font-sans));
  font-weight: 700;
  letter-spacing: -0.015em;
}
/* Split-Hero-Tinted: category_color als inline-style ignorieren, Gradient
   durchziehen. */
body.site-weloveurlaub .article-hero-split-wrap,
body.site-weloveurlaub .article-hero-split-wrap--tinted {
  background: var(--section-bg) !important;
  color: var(--ink) !important;
}
body.site-weloveurlaub .article-hero-split-wrap .article-title,
body.site-weloveurlaub .article-hero-split-wrap .article-meta__author,
body.site-weloveurlaub .article-hero-split-wrap .article-subtitle,
body.site-weloveurlaub .article-hero-split-wrap .article-meta__details {
  color: var(--ink) !important;
}

@media (max-width: 768px) {
  /* wl: Mobile-Side-Padding 16px — schmaler als der globale 20px, aber
     nicht so eng wie 12px (das hatte bei manchen Modulen Overflow-Probleme
     produziert). Override schlaegt das globale :root --side-padding fuer wl. */
  body.site-weloveurlaub {
    --side-padding: 16px;
  }
}
/* Mobile: Split-Hero + Page-Hero padding runter auf 12px seitlich
   statt --side-padding (20px) damit mehr Platz fuer Content. */
@media (max-width: 768px) {
  body.site-weloveurlaub .article-hero-split { padding: 0 20px; gap: 16px; }
  body.site-weloveurlaub .article-hero-split-wrap { padding: 16px 0 24px; }
  /* wl laesst die globale --side-padding-Regel greifen — keine Override-Stacking-Falle mehr. */
}
.mobile-nav__sublink {
  display: flex;
  align-items: center;
  padding: 12px 20px 12px 44px;
  color: rgba(255,255,255,0.75);
  font-weight: 500;
  font-size: 15px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: color 0.15s;
}
.mobile-nav__sublink:hover { color: var(--yellow); }
.mobile-nav__link.is-active,
.mobile-nav__sublink.is-active {
  color: var(--yellow);
  font-weight: 900;
  background: rgba(255,220,0,0.08);
}
.mobile-nav__link.is-active .mobile-nav__link-dot,
.mobile-nav__sublink.is-active .mobile-nav__sublink-dot {
  box-shadow: 0 0 0 3px rgba(255,220,0,0.3);
}
.mobile-nav__sublink-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 10px;
  flex-shrink: 0;
}

.mobile-nav__bottom {
  padding: 20px;
  flex-shrink: 0;
}

.mobile-nav__login {
  display: block;
  width: 100%;
  padding: 14px;
  border-radius: var(--radius-pill);
  background: var(--yellow);
  color: var(--ink);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  text-align: center;
  border: none;
  margin-bottom: 16px;
}

.mobile-nav__login--logout {
  background: var(--ink);
  color: var(--yellow);
}

.mobile-nav__socials {
  display: flex;
  gap: 10px;
}

.mobile-nav__social {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-weight: 700;
  font-size: 12px;
}

/* ==================== SEARCH OVERLAY ==================== */
.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(17,17,17,0.85);
  backdrop-filter: blur(8px);
  z-index: 3000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 120px;
}

.search-overlay.is-open { display: flex; }

.search-box {
  width: 100%;
  max-width: 680px;
  margin: 0 20px;
}

.search-box__input-wrap {
  display: flex;
  align-items: center;
  background: var(--white);
  border-radius: var(--radius-pill);
  padding: 4px 4px 4px 24px;
  border: 3px solid var(--yellow);
  gap: 12px;
}

.search-box__input {
  flex: 1;
  border: none;
  font-size: 18px;
  font-family: inherit;
  font-weight: 500;
  outline: none;
  background: none;
  color: var(--ink);
}
.search-box__input:focus,
.search-box__input:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Newsletter Coming-Soon-Modus */
.newsletter__form-wrap { position: relative; display: inline-block; }
.newsletter--disabled .newsletter__form { opacity: 0.45; pointer-events: none; filter: grayscale(1); }
.newsletter--disabled .newsletter__input { cursor: not-allowed; }

/* ==================== CMP (Consent Management) ==================== */
.cmp-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
  background: var(--white); border-top: var(--brand-border);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
  padding: 20px;
}
.cmp-banner__inner { max-width: 1200px; margin: 0 auto; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.cmp-banner__content { flex: 1; min-width: 280px; }
.cmp-banner__title { font-weight: 900; font-size: 14px; letter-spacing: 1px; display: block; margin-bottom: 6px; }
.cmp-banner__text { font-size: 13px; line-height: 1.55; color: var(--gray-700); margin: 0 0 8px; }
.cmp-banner__links { font-size: 12px; }
.cmp-banner__links a { color: var(--link); text-decoration: underline; }
.cmp-banner__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.cmp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 20px; border-radius: 50px; border: var(--brand-border-thin);
  font-family: inherit; font-weight: 700; font-size: 12px; letter-spacing: 1px;
  text-transform: uppercase; cursor: pointer; background: var(--white); color: var(--ink);
  transition: transform 0.1s ease;
}
.cmp-btn:hover { transform: translateY(-1px); }
.cmp-btn--primary { background: var(--ink); color: var(--yellow); }
.cmp-btn--ghost { background: transparent; }
/* Equal-Choice: Ablehnen + Alles akzeptieren gleichgestellt (DSK/CNIL). */
.cmp-btn--equal { background: var(--ink); color: var(--yellow); border-color: var(--ink); }
.cmp-btn--equal:hover { background: var(--ink); color: var(--yellow); }

/* ==================== HUB-INTRO (Editorial-Einleitung auf Kategorie-Hubs) ==================== */
.hub-intro-section {
  margin: 48px 0 8px;
  padding: 32px 0;
  border-top: var(--brand-border);
  border-bottom: 1px solid var(--gray-200);
  position: relative;
}
/* Mit Header-Bild: Bild links, Editorial-Text rechts auf Desktop;
   auf Mobile stapelt es sich zu Bild-oben / Text-darunter. */
.hub-intro-section--with-image {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: 32px;
  align-items: start;
}
.hub-intro__image {
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--gray-200);
}
.hub-intro__image picture,
.hub-intro__image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (max-width: 768px) {
  .hub-intro-section--with-image { grid-template-columns: 1fr; gap: 20px; }
}
.hub-intro-section::before {
  content: "EDITORIAL";
  position: absolute;
  top: -11px;
  left: 0;
  background: var(--ink);
  color: var(--yellow);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
  padding: 4px 12px;
}
.hub-intro {
  /* Inherits Inter via global body font — keine eigene font-family. */
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
}
.hub-intro p { margin: 0 0 16px; }
.hub-intro p:last-child { margin-bottom: 0; }
.hub-intro p:first-child { color: var(--ink); }
.hub-intro p:first-child::first-letter {
  font-size: 44px;
  font-weight: 900;
  float: left;
  line-height: 0.9;
  margin: 4px 12px 0 0;
  color: var(--yellow);
  background: var(--ink);
  padding: 8px 12px;
}
.hub-intro a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 600; }
.hub-intro a:hover { background: var(--yellow); }
.hub-intro strong { font-weight: 700; }
@media (max-width: 720px) {
  .hub-intro { font-size: 15px; line-height: 1.65; }
  .hub-intro p:first-child::first-letter { font-size: 36px; padding: 6px 10px; margin: 2px 10px 0 0; }
}

/* ==================== TD-CHART (static Claude-generated, dash-form) ==================== */
/* Claude erzeugt in Artikeln Chart-Blocks als statisches HTML mit Dash-Klassen
   (td-chart-header/body/row) statt BEM (__). Hier die CSS-Rules, damit diese
   Blocks auch ohne JS-Render als horizontale Balken-Diagramme dargestellt werden. */
.td-chart:has(.td-chart-body) {
  margin: 28px 0;
  padding: 22px 24px;
  background: #fff;
  border: var(--brand-border);
  border-radius: 14px;
  box-shadow: 5px 5px 0 var(--ink);
}
.td-chart-header { margin-bottom: 18px; padding-bottom: 12px; border-bottom: 2px solid #eee; }
.td-chart-title { font-size: 17px; font-weight: 900; margin: 0 0 4px; color: var(--ink); }
.td-chart-subtitle { font-size: 13px; color: var(--gray-700); margin: 0; }
.td-chart-body { display: flex; flex-direction: column; gap: 12px; }
.td-chart-row { display: grid; grid-template-columns: minmax(140px, 28%) 1fr; align-items: center; gap: 14px; }
.td-chart-label { font-size: 13px; font-weight: 700; color: var(--ink); text-align: right; line-height: 1.3; }
.td-chart-bar {
  position: relative;
  height: 28px;
  background: #f5f2ea;
  border: var(--brand-border-thin);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.td-chart-bar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: var(--chart-value, 0%);
  background: var(--yellow);
  z-index: 1;
  transition: width 0.4s ease-out;
}
.td-chart-value { position: relative; z-index: 2; padding: 0 10px; font-size: 12px; font-weight: 700; color: var(--ink); }
@media (max-width: 640px) {
  .td-chart-row { grid-template-columns: 1fr; gap: 4px; }
  .td-chart-label { text-align: left; }
}

/* Related-Content-Block: ersetzt <!-- RELATED_CONTENT --> Platzhalter im Body */
.related-content {
  margin: 36px 0;
  padding: 22px 24px;
  background: var(--cream, #f5f2ea);
  border: var(--brand-border);
  border-radius: 14px;
  box-shadow: 5px 5px 0 var(--ink);
}
.related-content__title {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: var(--ink);
  display: inline-block;
  background: var(--yellow);
  padding: 6px 12px;
  border: var(--brand-border-thin);
  border-radius: 4px;
}
.related-content__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.related-content__list li { border-bottom: 1px dashed var(--gray-200); padding-bottom: 10px; }
.related-content__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.related-content__list a { color: var(--ink); font-weight: 700; text-decoration: none; font-size: 15px; line-height: 1.4; display: block; }
.related-content__list a:hover { color: var(--ink); background: var(--yellow); padding: 2px 4px; margin: -2px -4px; border-radius: 3px; }

/* Ad-Fallback: versteckte Content-Kachel, wird via JS eingeblendet wenn Ad leer */
.news-card__ad-fallback[hidden] { display: none; }
.news-card__ad-fallback { display: flex; flex-direction: column; text-decoration: none; color: inherit; height: 100%; }
.news-card__ad-fallback .news-card__image { display: block; }
.news-card__ad-fallback .news-card__image img { width: 100%; height: auto; display: block; }

/* Reduced-Motion: Transitions aus fuer User mit prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  .cmp-btn, .cmp-banner, .cmp-modal__dialog { transition: none; }
  .cmp-btn:hover { transform: none; }
}

.cmp-modal { position: fixed; inset: 0; z-index: 10000; }
.cmp-modal[hidden] { display: none; }
.cmp-modal__overlay { position: absolute; inset: 0; background: rgba(17,17,17,0.55); }
.cmp-modal__dialog {
  position: relative; max-width: 680px; width: calc(100% - 40px);
  max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); margin: 20px auto;
  background: var(--white); border: var(--brand-border);
  border-radius: var(--radius-lg); box-shadow: var(--brand-shadow-lg);
  display: flex; flex-direction: column; overflow: hidden;
}
.cmp-modal__close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(128,128,128,0.45);
  background: rgba(128,128,128,0.16); color: inherit; cursor: pointer; font-weight: 900; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.cmp-modal__close:hover { background: rgba(128,128,128,0.28); }
.cmp-modal__header { padding: 24px 24px 0; border-bottom: 1px solid var(--gray-200); }
.cmp-modal__title { font-weight: 900; font-size: 22px; margin: 0 0 10px; }
.cmp-modal__intro { font-size: 13px; color: var(--gray-700); line-height: 1.5; margin: 0 0 10px; }
.cmp-modal__links { font-size: 12px; margin-bottom: 16px; }
.cmp-modal__links a { color: var(--link); text-decoration: underline; margin-right: 12px; }
.cmp-modal__tabs { display: flex; gap: 0; border-bottom: 0; margin: 0 -24px; padding: 0 24px; }
.cmp-tab {
  flex: 1; padding: 14px 8px; background: none; border: 0; border-bottom: 3px solid transparent;
  font-family: inherit; font-weight: 700; font-size: 14px; cursor: pointer; color: var(--gray-500);
}
.cmp-tab.is-active { color: var(--ink); border-bottom-color: var(--ink); }

.cmp-modal__body { padding: 20px 24px; overflow-y: auto; flex: 1; }
.cmp-tabpanel { display: none; }
.cmp-tabpanel.is-active { display: block; }

.cmp-cat, .cmp-service {
  border: 2px solid var(--gray-200); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 10px; transition: border-color 0.15s;
}
.cmp-cat:hover, .cmp-service:hover { border-color: var(--gray-300); }
.cmp-cat__head, .cmp-service__head { display: flex; align-items: flex-start; gap: 16px; }
.cmp-cat__meta, .cmp-service__meta { flex: 1; min-width: 0; }
.cmp-cat__name, .cmp-service__name { font-weight: 900; font-size: 14px; display: block; margin-bottom: 4px; }
.cmp-cat__desc { font-size: 12px; color: var(--gray-700); line-height: 1.5; margin: 0; }
.cmp-service__cat { font-size: 11px; color: var(--gray-500); }
.cmp-cat__controls, .cmp-service__controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cmp-cat__services { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--gray-200); display: flex; flex-direction: column; gap: 8px; }
.cmp-cat__services[hidden], .cmp-service__detail[hidden] { display: none !important; }
.cmp-cat-service { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }

.cmp-switch { position: relative; display: inline-block; width: 40px; height: 22px; cursor: pointer; }
.cmp-switch--sm { width: 34px; height: 20px; }
.cmp-switch input { position: absolute; opacity: 0; pointer-events: none; }
.cmp-switch__track {
  position: absolute; inset: 0; background: #8b9099; border-radius: 22px; transition: background 0.2s;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.22);
}
.cmp-switch__track::before {
  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  background: #fff; border-radius: 50%; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.45);
}
.cmp-switch--sm .cmp-switch__track::before { width: 16px; height: 16px; }
/* AN = klar erkennbares Grün (statt --ink, das auf dunklen Themes mit weissem Knopf unsichtbar war) */
.cmp-switch input:checked ~ .cmp-switch__track { background: #1f9d57; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18); }
.cmp-switch input:checked ~ .cmp-switch__track::before { transform: translateX(18px); }
.cmp-switch--sm input:checked ~ .cmp-switch__track::before { transform: translateX(14px); }
.cmp-switch.is-locked { opacity: 0.5; cursor: not-allowed; }

.cmp-expand {
  background: none; border: 0; font-size: 16px; font-weight: 900;
  cursor: pointer; color: var(--ink); padding: 4px 6px;
  transition: transform 0.2s;
}

.cmp-service__detail { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--gray-200); font-size: 13px; }
.cmp-kv { margin-bottom: 14px; }
.cmp-kv__k { font-weight: 700; font-size: 12px; color: var(--gray-700); margin-bottom: 4px; }
.cmp-kv__v { font-size: 13px; line-height: 1.5; }
.cmp-kv__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cmp-chip {
  display: inline-block; padding: 4px 10px; border-radius: 6px;
  background: var(--gray-100); font-size: 11px; font-weight: 600; color: var(--gray-700);
}
.cmp-cookies { display: flex; flex-direction: column; gap: 8px; }
.cmp-cookie { padding: 10px 12px; border: 1px solid var(--gray-200); border-radius: 8px; background: var(--gray-100); }
.cmp-cookie__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.cmp-cookie__head strong { font-size: 13px; font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; }
.cmp-cookie__type { font-size: 10px; font-weight: 700; letter-spacing: 0.8px; color: var(--gray-500); text-transform: uppercase; }
.cmp-cookie__purpose { font-size: 12px; line-height: 1.4; color: var(--gray-700); }
.cmp-cookie__duration { font-size: 11px; color: var(--gray-500); margin-top: 2px; }

.cmp-filter { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.cmp-filter__btn {
  padding: 6px 14px; border-radius: 50px; border: 2px solid var(--gray-200);
  background: var(--white); font-family: inherit; font-weight: 600; font-size: 12px;
  cursor: pointer; color: var(--gray-700); transition: all 0.15s;
}
.cmp-filter__btn.is-active { border-color: var(--ink); color: var(--ink); background: var(--gray-100); }

.cmp-modal__footer {
  padding: 16px 24px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--gray-100); display: flex; flex-direction: column; gap: 10px;
  border-top: var(--brand-border-thin); flex-shrink: 0;
}
.cmp-modal__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cmp-modal__actions .cmp-btn { flex: 1; min-width: 120px; }
.cmp-modal__meta { font-size: 11px; color: var(--gray-600); text-align: center; font-family: ui-monospace, monospace; word-break: break-all; }
.cmp-modal__meta code { background: rgba(128,128,128,0.18); color: inherit; padding: 2px 6px; border-radius: 4px; }

@media (max-width: 640px) {
  .cmp-banner__inner { flex-direction: column; align-items: stretch; }
  /* Mobile: Buttons stapeln, primärer "Alles akzeptieren"-Button oben.
     HTML-Reihenfolge bleibt (für a11y/Tab-Order), CSS reverse'd nur visuell. */
  .cmp-banner__actions,
  .cmp-modal__actions { flex-direction: column-reverse; flex-wrap: nowrap; gap: 10px; }
  .cmp-banner__actions .cmp-btn,
  .cmp-modal__actions .cmp-btn { flex: 0 0 auto; width: 100%; min-width: 0; }
  .cmp-modal__dialog { margin: 0; width: 100%; max-height: 100vh; max-height: 100dvh; height: 100dvh; border-radius: 0; border-width: 0; box-shadow: none; }
}

/* Newsletter Landing-Page Coming-Soon */
.nl-form-wrap { position: relative; }
.nl-form-wrap--disabled .nl-form { opacity: 0.45; pointer-events: none; filter: grayscale(1); }
.nl-form__starburst {
  position: absolute;
  top: -44px; right: -40px; z-index: 2;
  pointer-events: none;
  animation: starburst-spin 14s linear infinite;
  filter: drop-shadow(var(--brand-shadow-md));
}
@media (max-width: 640px) {
  .nl-form__starburst { top: -30px; right: -20px; }
  .nl-form__starburst svg { width: 84px; height: 84px; }
}
.newsletter__starburst {
  position: absolute;
  top: -44px; right: -40px; z-index: 2;
  pointer-events: none;
  animation: starburst-spin 14s linear infinite;
  filter: drop-shadow(var(--brand-shadow-md));
}
@media (max-width: 640px) {
  .newsletter__starburst { top: -30px; right: -20px; }
  .newsletter__starburst svg { width: 84px; height: 84px; }
}
@keyframes starburst-spin { from { transform: rotate(-8deg); } to { transform: rotate(352deg); } }

.search-box__input::placeholder { color: var(--gray-400); }

.search-box__submit {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ink);
  border: none;
  color: var(--yellow);
  font-weight: 900;
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
}

.search-box__close {
  position: absolute;
  top: 32px;
  right: 32px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--yellow);
  border: none;
  font-size: 22px;
  font-weight: 900;
  color: var(--ink);
  cursor: pointer;
}

.search-results {
  background: var(--white);
  border-radius: var(--radius-lg);
  margin-top: 12px;
  padding: 8px 0;
  border: var(--brand-border-thin);
  display: none;
  max-height: 400px;
  overflow-y: auto;
}

.search-results.has-results { display: block; }

.search-results__category {
  padding: 12px 20px 6px;
  font-weight: 900;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gray-400);
}

.search-results__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background 0.15s;
}

.search-results__item:hover { background: var(--cream); }

.search-results__item-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 14px;
  flex-shrink: 0;
  color: var(--white);
}

.search-results__item-text { flex: 1; }

.search-results__item-title {
  font-weight: 600;
  font-size: 14px;
}

.search-results__item-meta {
  font-weight: 500;
  font-size: 12px;
  color: var(--gray-400);
}

.search-results__item-arrow {
  color: var(--gray-300);
  font-size: 16px;
}

/* ==================== BREADCRUMBS ==================== */
.breadcrumbs {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  scrollbar-width: none;
}

.breadcrumbs::-webkit-scrollbar { display: none; }

.breadcrumbs__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 12px var(--side-padding);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  /* nav>ol-Strukturen: list-styling neutralisieren */
  list-style: none;
}
.breadcrumbs__item-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.breadcrumbs__item {
  font-weight: 500;
  color: var(--gray-500);
  white-space: nowrap;
}

.breadcrumbs__item--active {
  font-weight: 700;
  color: var(--ink);
}

.breadcrumbs__sep { color: var(--gray-300); }

/* ==================== TICKER ==================== */
/* Hintergrund über volle Viewport-Breite, Inhalt max content-max
   damit BREAKING-Chip bündig zum Logo startet. */
.ticker {
  background: var(--pink);
  position: relative;
  /* body ist flex-column mit gap -> erzeugte ~10px Luft ueber/unter dem Ticker.
     Negative vertikale Margins heben den gap am Ticker auf (sitzt eng am Header
     und am Content). Gilt fuer alle Tenants. */
  margin-top: -12px;
  margin-bottom: -12px;
}
.ticker__inner {
  display: flex;
  align-items: center;
  height: 40px;
  max-width: var(--content-max);
  margin: 0 auto;
}

.ticker__badge {
  background: var(--ink);
  color: var(--yellow);
  font-weight: 900;
  font-size: 10px;
  letter-spacing: 2px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
  margin-left: 16px;
  z-index: 2;
  position: relative;
  box-shadow: 16px 0 0 var(--pink), -4px 0 0 var(--pink);
}

.ticker__scroll-wrap {
  flex: 1;
  overflow: hidden;
  margin-left: 16px;
  position: relative;
}

.ticker__scroll {
  display: flex;
  white-space: nowrap;
  width: max-content;
  animation: ticker-scroll 50s linear infinite;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ticker__scroll.is-paused { animation-play-state: paused; }

.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding-right: 24px;
  flex-shrink: 0;
  list-style: none;
}

.ticker__item a {
  color: var(--ink);
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.ticker__item a:hover { opacity: 0.7; text-decoration: underline; }

.ticker__sep { color: rgba(17,17,17,0.3); font-size: 13px; }

@keyframes ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ==================== HERO ==================== */
.hero {
  background: var(--yellow);
  min-height: 520px; /* fixed height prevents layout shift */
}

.hero__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 48px var(--side-padding);
  display: flex;
  align-items: center;
  gap: 40px;
  min-height: 520px;
}

.hero__content {
  flex: 1;
  min-width: 0;
}

.hero__image {
  width: 480px;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: var(--brand-border);
  aspect-ratio: 4/3;
}

.hero__image img { width: 100%; height: 100%; object-fit: cover; }

/* Foto-Credit als diskreter Badge unten rechts auf dem Hero-Bild */
.hero__image { position: relative; }
.hero__image-credit {
  position: absolute;
  bottom: 8px;
  right: 10px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 3px 8px;
  border-radius: 4px;
  pointer-events: none;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(3px);
}

.hero__tag {
  display: inline-block;
  background: var(--ink);
  color: var(--yellow);
  font-weight: 900;
  font-size: 10px;
  letter-spacing: 2px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 16px;
}

.hero__title {
  font-weight: 900;
  font-size: clamp(28px, 3.5vw, 48px);
  line-height: 1.05;
  letter-spacing: -2px;
  margin-bottom: 14px;
}

.hero__subtitle {
  font-weight: 500;
  font-size: 17px;
  line-height: 1.5;
  color: var(--gray-700);
  margin-bottom: 24px;
  max-width: 500px;
}

.hero__progress {
  height: 6px;
  display: flex;
  cursor: pointer;
}

.hero__progress-segment {
  flex: 1;
  position: relative;
  background: rgba(17,17,17,0.08);
}

.hero__progress-segment + .hero__progress-segment {
  border-left: 2px solid var(--yellow);
}

.hero__progress-segment::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: var(--pink);
  transition: width 0.3s;
}

.hero__progress-segment.is-done::after { width: 100%; }

.hero__progress-segment.is-active::after {
  animation: progress-fill 5s linear forwards;
}

@keyframes progress-fill {
  0% { width: 0; }
  100% { width: 100%; }
}

/* ==================== BUTTONS ==================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  padding: 14px 28px;
  border: none;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.btn:hover { transform: translateY(-2px); box-shadow: 0 4px 0 var(--ink); }
.btn--primary { background: var(--ink); color: var(--yellow); }
.btn--secondary { background: var(--yellow); color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); border: var(--brand-border-thin); }
.btn--sm { padding: 8px 16px; font-size: 12px; }
.btn--lg { padding: 16px 36px; font-size: 16px; }
.btn--block { width: 100%; }

/* ==================== SECTION HEADERS ==================== */
.section-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.section-header__title {
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex-shrink: 1;
}
@media (max-width: 768px) {
  .section-header__title { letter-spacing: 1.5px; font-size: 11px; }
}

.section-header__line {
  flex: 1;
  height: 2px;
  background-image: repeating-linear-gradient(90deg, var(--ink) 0, var(--ink) 6px, transparent 6px, transparent 10px);
}

.section-header__link {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--ink);
  white-space: nowrap;
}

/* ==================== TAGS ==================== */
.tag {
  display: inline-block;
  align-self: flex-start;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  color: #fff;
  background: var(--gray-400);
}

.tag--sm { font-size: 9px; padding: 3px 10px; letter-spacing: 1px; }
.tag--hotellerie { background: var(--pink); color: #fff; }
.tag--gastronomie { background: var(--orange); color: var(--ink); }
.tag--spa { background: var(--mint); color: var(--ink); }
.tag--karriere { background: var(--blue); color: #fff; }
.tag--tech { background: var(--purple); color: #fff; }
.tag--people { background: var(--yellow); color: var(--ink); }

/* ==================== QUICK LINKS ==================== */
.quick-links { background: var(--white); }

.quick-links__grid {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  /* padding-y für hover translateY(-6px) + rotate(-2deg) + shadow */
  padding: 18px 2px 24px;
  scroll-padding: 4px;
}
.quick-links__grid::-webkit-scrollbar { height: 6px; }
.quick-links__grid::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 3px; }
.quick-links__grid > .quick-link {
  flex: 0 0 calc((100% - 14px * 5) / 6); /* 6 items sichtbar bei content-max */
  scroll-snap-align: start;
  min-width: 130px;
}

.quick-link {
  border: var(--brand-border);
  border-radius: var(--radius-md);
  padding: 20px 12px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s;
  scroll-snap-align: start;
}

.quick-link:hover { transform: translateY(-4px); }

.quick-link__icon {
  width: 48px;
  height: 48px;
  background: var(--ink);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  font-weight: 900;
  font-size: 20px;
}

.quick-link__label {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink);
  position: relative;
  z-index: 1;
}
/* Dark-Variante: halbtransparenter schwarzer Overlay fuer WCAG-AA-Kontrast
   (4.5:1) bei mittel-hellen Branding-Farben wie Pink, Orange, Blau, Teal.
   Label und Icon zeigen weiss auf dunkleren Effektivfarben, ohne die
   Brand-Farben im CSS-Variablen-System anzupassen. */
.quick-link--dark { position: relative; overflow: hidden; }
.quick-link--dark::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.32);
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
}
.quick-link--dark > * { position: relative; z-index: 1; }
.quick-link--dark .quick-link__label {
  color: var(--white);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.quick-link--dark .quick-link__icon {
  background: var(--white);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Quick link colors */
.ql-hotel { background: var(--pink); }
.ql-hotel .quick-link__icon { color: var(--pink); }
.ql-hotel .quick-link__label { color: var(--ink); }

.ql-gastro { background: var(--orange); }
.ql-gastro .quick-link__icon { color: var(--orange); }
.ql-gastro .quick-link__label { color: var(--ink); }

.ql-spa { background: var(--mint); }
.ql-spa .quick-link__icon { color: var(--mint); }
.ql-spa .quick-link__label { color: var(--ink); }

.ql-karriere { background: var(--blue); }
.ql-karriere .quick-link__icon { color: var(--blue); }
.ql-karriere .quick-link__label { color: var(--ink); }

.ql-tech { background: var(--purple); }
.ql-tech .quick-link__icon { color: var(--purple); }
.ql-tech .quick-link__label { color: var(--ink); }

.ql-people { background: var(--yellow); }
.ql-people .quick-link__icon { color: var(--yellow); }
.ql-people .quick-link__label { color: var(--ink); }

/* ==================== CARDS ==================== */
.card {
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.2s;
  cursor: pointer;
  display: block;
}

.card:hover { transform: translateY(-4px); }

.card--featured { background: var(--pink); }
.card--featured .card__content { padding: 20px 22px 24px; }
.card--featured .card__tag { color: var(--white); font-weight: 900; font-size: 10px; letter-spacing: 2px; }
.card--featured .card__title { color: var(--white); font-weight: 900; font-size: 22px; line-height: 1.2; letter-spacing: -0.3px; }
.card--featured .card__meta { color: rgba(255,255,255,0.92); font-weight: 600; }

.card--standard { background: var(--white); border: var(--brand-border-thin); }

.card__image { overflow: hidden; }
.card__image img { width: 100%; aspect-ratio: 16/10; object-fit: cover; transition: transform 0.3s; }
.card:hover .card__image img { transform: scale(1.03); }

.card__content { padding: 14px 16px 18px; }
.card__title { font-weight: 700; font-size: 16px; line-height: 1.35; margin: 6px 0 8px; }
.card__meta { font-weight: 500; font-size: 12px; color: var(--gray-400); }

/* Side cards */
.card--side {
  display: flex;
  gap: 14px;
  padding: 14px;
  background: var(--white);
  border: var(--brand-border-thin);
  border-radius: var(--radius-md);
  align-items: center;
}

.card--side .card__image {
  width: 90px;
  height: 90px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  border: 2px dashed var(--ink);
}

.card--side .card__image img { aspect-ratio: 1; height: 100%; }
.card--side .card__content { padding: 0; }
.card--side .card__title { font-size: 14px; line-height: 1.3; margin: 4px 0 0; }

/* Featured grid */
.featured__grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 20px;
  align-items: stretch; /* side cards match main card height */
}

.featured__grid > .card--featured {
  display: flex;
  flex-direction: column;
}

.featured__grid > .card--featured .card__image { flex: 1; }
.featured__grid > .card--featured .card__image img { height: 100%; aspect-ratio: auto; }

.featured__side {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.featured__side .card--side { flex: 1; }

/* Card grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
/* In-Feed-Ad in card-grid: spannt alle Spalten, zentriert. */
.card-grid__ad {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  margin: 8px 0;
}
.card-grid__ad .admanager-slot,
.card-grid__ad .ad-gam-wrap { width: 100%; max-width: 920px; margin: 0 auto; }

/* ==================== TABS ==================== */
.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.tab {
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  border: var(--brand-border-thin);
  background: transparent;
  color: var(--ink);
  transition: all 0.15s;
}

.tab--active { background: var(--ink); color: var(--yellow); }
.tab:not(.tab--active):hover { background: var(--cream); }

/* ==================== AD ==================== */
.ad-section { padding: 20px 0; text-align: center; }
/* Ads-Placeholder (alle Varianten) ausblenden wenn im Admin deaktiviert.
   WICHTIG: .sidebar-ad--filled enthaelt echte Anzeigen und wird NICHT
   ausgeblendet — nur die leeren Placeholder. */
/* Einzelne Regeln statt einer Multi-Selektor-Liste: der CSS-Minifier
   konnte das ':has(.ad-section:empty)' im Multi-Selektor nicht zerlegen
   und schrieb ').ad-section:empty){display:none}' ins min-CSS — keine
   Regel matchte mehr, leere Ad-Section blieb sichtbar. */
body.no-ad-placeholders .ad-section:empty { display: none !important; }
body.no-ad-placeholders .ad-placeholder { display: none !important; }
body.no-ad-placeholders .sidebar-ad:not(.sidebar-ad--filled) { display: none !important; }
body.no-ad-placeholders .ad-label { display: none !important; }
body.no-ad-placeholders .news-card__ad-label { display: none !important; }
body.no-ad-placeholders .news-card--ad:has(.ad-section:empty) { display: none !important; }
/* .ad-horizontal: hat IMMER children (.ad-horizontal__label + __inner),
   greift :empty also nicht. Stattdessen via :has() pruefen ob __inner
   leer ist (= keine Ad geliefert) → komplettes Element ausblenden. */
body.no-ad-placeholders .ad-horizontal:has(.ad-horizontal__inner:empty) { display: none !important; }
/* Genauso fuer .ad-slot-Wrapper (Header/Footer/Sidebar). Wenn der Slot
   keine ausgelieferte Ad enthaelt, komplett verstecken. */
body.no-ad-placeholders .ad-slot:empty { display: none !important; }
body.no-ad-placeholders .ad-slot--header:not(:has(*)) { display: none !important; }
body.no-ad-placeholders .ad-slot--footer:not(:has(*)) { display: none !important; }
body.no-ad-placeholders .ad-section:empty::after,
body.no-ad-placeholders .ad-placeholder::after { content: none !important; }

.ad-label {
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--gray-500);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.ad-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  border: 2px dashed var(--ink);
  border-radius: var(--radius-sm);
  background: var(--cream);
  color: rgba(17,17,17,0.12);
  max-width: 100%;
}

.ad-placeholder--leaderboard { width: 728px; height: 90px; }
.ad-placeholder--billboard { width: 970px; height: 250px; }
.ad-placeholder__size { font-weight: 900; font-size: 16px; }
.ad-placeholder__text { font-weight: 500; font-size: 10px; }

/* Sidebar ads - responsive: show correct size per viewport */
.sidebar-ad {
  position: sticky;
  top: 80px;
}
/* Mit TOC: Sidebar-Container ist bereits sticky. Ad + TOC duerfen dann NICHT
   zusaetzlich je sticky sein — sonst kleben beide am selben Top und das Ad
   schiebt sich ueber den TOC. Sie stacken stattdessen statisch im Container
   (Ad oben = 300x250, TOC darunter), und die ganze Sidebar klebt als Einheit. */
.article-layout__sidebar:has(.article-toc--sidebar) .sidebar-ad,
.article-layout__sidebar:has(.article-toc--sidebar) .article-toc--sidebar {
  position: static;
  top: auto;
}

.ad-sidebar {
  border: 2px dashed var(--ink);
  border-radius: var(--radius-sm);
  background: var(--cream);
  color: rgba(17,17,17,0.12);
  display: none; /* hidden by default, shown per breakpoint */
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
}

/* Wide viewport: Half Page 300x600 */
.ad-sidebar--halfpage { width: 300px; height: 600px; }
/* MPU 300x250 — Sidebar-Ad-Platzhalter, wenn ein TOC vorhanden ist */
.ad-sidebar--mpu { width: 300px; height: 250px; }
@media (min-width: 920px) { .ad-sidebar--mpu { display: flex; } }
/* Medium: Skyscraper 160x600 */
.ad-sidebar--skyscraper { width: 160px; height: 600px; }
/* Narrow: Small Skyscraper 120x600 */
.ad-sidebar--small { width: 120px; height: 600px; }

/* Show appropriate size based on sidebar width */
@media (min-width: 1280px) {
  .ad-sidebar--halfpage { display: flex; }
}
@media (min-width: 1060px) and (max-width: 1279px) {
  .ad-sidebar--skyscraper { display: flex; }
}
@media (min-width: 920px) and (max-width: 1059px) {
  .ad-sidebar--small { display: flex; }
}
/* Below 920px: no sidebar ad at all (article goes full width) */

/* ==================== DIVIDER ==================== */
.divider-section { padding: 12px; display: flex; justify-content: center; gap: 14px; }

.divider__dot {
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
}

.divider__dot:nth-child(3n+1) { background: var(--yellow); }
.divider__dot:nth-child(3n+2) { background: var(--pink); }
.divider__dot:nth-child(3n) { background: var(--ink); }

/* ==================== NEWSLETTER ==================== */
.newsletter { background: var(--pink); }

.newsletter__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 48px var(--side-padding);
  text-align: center;
}

.newsletter__title {
  font-weight: 900;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.1;
  color: var(--white);
  margin-bottom: 10px;
}

.newsletter__subtitle {
  font-weight: 500;
  font-size: 15px;
  color: rgba(255,255,255,0.8);
  margin-bottom: 24px;
}

.newsletter__form {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}

.newsletter__input {
  width: 340px;
  max-width: 100%;
  padding: 14px 20px;
  border-radius: var(--radius-pill);
  border: none;
  font-size: 15px;
  font-family: inherit;
  outline: none;
}

.newsletter__hint {
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255,255,255,0.6);
  max-width: 560px;
  margin: 10px auto 0;
}

.newsletter__hint a { text-decoration: underline; }

/* ==================== MEISTGELESEN ==================== */
.most-read { background: var(--ink); }

.most-read__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 48px var(--side-padding);
}

.most-read__title {
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 3px;
  color: var(--yellow);
  margin-bottom: 16px;
}

.most-read__item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: padding-left 0.2s;
}

.most-read__item:hover { padding-left: 8px; }
.most-read__item:last-child { border: none; }
.most-read__num { font-weight: 900; font-size: 30px; color: var(--yellow); min-width: 44px; }
.most-read__headline { font-weight: 700; font-size: 16px; line-height: 1.35; color: var(--white); }
.most-read__meta { font-weight: 500; font-size: 12px; color: var(--gray-400); margin-top: 4px; }
.most-read__arrow { font-size: 18px; color: var(--yellow); opacity: 0; transition: opacity 0.2s; margin-left: auto; }
.most-read__item:hover .most-read__arrow { opacity: 1; }

/* ==================== PEOPLE SPOTLIGHT ==================== */
.people-spotlight { background: var(--ink); overflow: hidden; }

.people-spotlight__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 48px 0 48px var(--side-padding);
}

.people-spotlight__scroll {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-right: var(--side-padding);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}

.people-spotlight__scroll::-webkit-scrollbar { display: none; }

.people-card {
  min-width: 240px;
  height: 420px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  border: var(--brand-border);
  scroll-snap-align: start;
  cursor: pointer;
  flex-shrink: 0;
}

.people-card img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }

.people-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(transparent, rgba(0,0,0,0.9));
  padding-top: 60px;
}

.people-card__name { font-weight: 900; font-size: 20px; line-height: 1.1; color: var(--yellow); margin-bottom: 4px; }
.people-card__role { font-weight: 500; font-size: 12px; color: rgba(255,255,255,0.8); }

/* ==================== CATEGORY SLIDER ==================== */
.category-slider { background: var(--white); }

.category-slider__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 24px 0 16px var(--side-padding);
  overflow: visible;
}

.category-slider__scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  /* CSS-Quirk: overflow-y kann nicht 'visible' sein, wenn x scrollt — wird auto.
     Großzügiges padding-y, damit hover scale(1.04)+rotate+shadow Platz haben. */
  padding: 24px var(--side-padding) 28px 0;
  scroll-snap-type: x mandatory;
}

.category-slider__scroll::-webkit-scrollbar { display: none; }

.category-card {
  display: block;
  min-width: 260px;
  height: 240px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  border: var(--brand-border);
  scroll-snap-align: start;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
  color: inherit;
}

.category-card:hover { transform: scale(1.02); box-shadow: var(--brand-shadow-lg); }
.category-card:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.category-card img { width: 100%; height: 100%; object-fit: cover; }

.category-card__icon {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 40px;
  height: 40px;
  background: var(--ink);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 18px;
}

.category-card__info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px 18px 16px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
}

.category-card__name { font-weight: 900; font-size: 16px; letter-spacing: 1px; color: var(--white); }
.category-card__count { font-weight: 700; font-size: 11px; color: rgba(255,255,255,0.7); }

/* ==================== JOBS ==================== */
.jobs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

.job-card {
  display: flex;
  border: var(--brand-border-thin);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--white);
  transition: transform 0.2s;
  cursor: pointer;
}

.job-card:hover { transform: translateY(-2px); }
.job-card__image { width: 160px; flex-shrink: 0; overflow: hidden; }
.job-card__image img { width: 100%; height: 100%; object-fit: cover; }
.job-card__content { padding: 16px; flex: 1; }
.job-card__company { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.job-card__logo { width: 26px; height: 26px; border-radius: 6px; background: var(--cream); border: var(--brand-border-hair); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 9px; }
.job-card__company-name { font-weight: 700; font-size: 13px; }
.job-card__title { font-weight: 900; font-size: 16px; margin-bottom: 6px; }
.job-card__info { font-weight: 500; font-size: 12px; color: var(--gray-400); margin-bottom: 10px; }

/* ==================== COMMENTS ==================== */
.comments-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.comment-card {
  background: var(--cream);
  border: var(--brand-border-thin);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.comment-card__header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }

.comment-card__avatar {
  width: 34px; height: 34px; border-radius: 50%; border: var(--brand-border-thin);
  display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 13px;
  background: var(--yellow);
}

.comment-card__name { font-weight: 700; font-size: 14px; flex: 1; }
.comment-card__time { font-weight: 500; font-size: 11px; color: var(--gray-400); }
.comment-card__text { font-size: 13px; line-height: 1.6; margin-bottom: 10px; }

.comment-card__link {
  display: inline-block;
  background: var(--ink);
  color: var(--yellow);
  font-weight: 700;
  font-size: 11px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}

/* ==================== CTA BANNER ==================== */
.cta-banner {
  background: var(--blue);
  border: var(--brand-border);
  border-radius: var(--radius-lg);
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.cta-banner__title { font-weight: 900; font-size: 22px; color: var(--white); margin-bottom: 6px; }
.cta-banner__text { font-weight: 500; font-size: 15px; color: rgba(255,255,255,0.8); }

/* ==================== FOOTER ==================== */
.footer { background: var(--yellow); }

.footer__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 48px var(--side-padding) 28px;
}

.footer__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-bottom: 40px; }
.footer__col-title { font-weight: 900; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 14px; }
.footer__link { display: block; font-weight: 500; font-size: 14px; color: var(--gray-700); padding: 8px 0; min-height: 44px; display: flex; align-items: center; transition: color 0.2s; }
.footer__link:hover { color: var(--ink); }
.footer__divider { height: 2px; background: var(--ink); margin-bottom: 20px; }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; }
.footer__logo { font-weight: 900; font-size: 22px; letter-spacing: 3px; }
.footer__copyright { font-weight: 500; font-size: 13px; color: var(--gray-700); }

/* ==================== SECTION SPACING ==================== */
.section-pad {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 40px var(--side-padding);
}

.bg-cream { background: var(--cream); }
.bg-white { background: var(--white); }
.bg-ink { background: var(--ink); }
.bg-yellow { background: var(--yellow); }
.bg-pink { background: var(--pink); }
.bg-blue { background: var(--blue); }
.bg-mint { background: var(--mint); }
.no-mt { margin-top: -1px; }

/* ==================== PAGE HEROES ==================== */
.page-hero {
  padding: 56px 0;
  border-bottom: var(--brand-border);
}

.page-hero__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--side-padding);
}

.page-hero__label {
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.7);
  display: block;
  margin-bottom: 12px;
}

.page-hero__title {
  font-weight: 900;
  font-size: clamp(40px, 6vw, 80px);
  letter-spacing: -3px;
  line-height: 0.95;
}

.page-hero__title--white { color: var(--white); }
.page-hero__title--ink { color: var(--ink); }
.page-hero__title--yellow { color: var(--yellow); }

.page-hero__desc {
  font-weight: 500;
  font-size: 16px;
  margin-top: 12px;
}

.page-hero__count {
  background: var(--white);
  color: var(--ink);
  border: var(--brand-border);
  border-radius: var(--radius-pill);
  padding: 10px 24px;
  text-align: center;
}

.page-hero__count-num { font-weight: 900; font-size: 28px; line-height: 1; }
.page-hero__count-label { font-weight: 700; font-size: 11px; letter-spacing: 1.5px; color: var(--gray-500); }

.page-hero__flex {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.page-hero__filters {
  display: flex;
  gap: 10px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.page-hero__filter {
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  border: 2px solid rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.25);
  color: var(--white);
}

.page-hero__filter--active {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

/* ==================== ARTICLE PAGE ==================== */
.article-wrap { background: var(--white); }

.content-wrap--narrow {
  max-width: 760px;
  margin: 0 auto;
  padding-left: var(--side-padding);
  padding-right: var(--side-padding);
}

.article-header {
  max-width: var(--content-max);
  margin: 0 auto;
  /* Horizontales Padding kommt vom inneren .content-wrap--narrow; hier
     NICHT verdoppeln sonst stacken sich die Gutter auf 24px/48px. */
  padding: 24px 0 0;
}

.article-title {
  font-weight: 900;
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.08;
  letter-spacing: -1.5px;
  margin: 14px 0;
}

.article-subtitle {
  font-weight: 500;
  font-size: 17px;
  line-height: 1.6;
  color: var(--gray-600);
  max-width: 700px;
  margin-bottom: 16px;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.article-meta__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: var(--brand-border-thin);
  flex-shrink: 0;
}

.article-meta__name { font-weight: 700; font-size: 14px; }
.article-meta__date { font-weight: 500; font-size: 12px; color: var(--gray-400); }
.article-meta__info { display: flex; flex-direction: column; }
.article-meta__author { font-weight: 700; font-size: 14px; }
.article-meta__details { font-weight: 500; font-size: 12px; color: var(--gray-500); }

.article-meta__avatar-fallback {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--yellow);
  border: var(--brand-border-thin);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 12px;
  font-size: 14px;
  flex-shrink: 0;
}

.article-hero-image {
  max-width: var(--content-max);
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.article-hero-image figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 24px 14px 10px 14px;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.02em;
  pointer-events: none;
}
.article-hero-image__credit {
  display: inline-block;
  padding-left: 10px;
  opacity: 0.9;
}

/* Bild natürlich darstellen: volle Breite, proportionale Höhe, kein Crop,
   keine schwarzen Ränder. Portrait-Bilder laufen eh über article-hero-split. */
.article-hero-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==================== IMMERSIVE LANDSCAPE HERO (Reise-Magazin-Stil) ====
   Grosses 16:9-Bild mit rounded corners auf Desktop, edge-to-edge auf
   Mobile, Header (Tag/Titel/Subtitle/Meta) direkt darunter in serifen
   Display-Typo. Activated via site_article_hero_layout='landscape'. */
.article-hero-landscape {
  margin: 0 auto 32px;
  max-width: var(--content-max);
  padding: 32px var(--side-padding);
  background: var(--section-bg, var(--gray-100));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.article-hero-landscape__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--gray-100);
  grid-column: 2;
  order: 2;
}
.article-hero-landscape__media picture,
.article-hero-landscape__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.article-hero-landscape__credit {
  position: absolute;
  bottom: 8px;
  right: 10px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: 4px;
  pointer-events: none;
}
.article-hero-landscape__header {
  grid-column: 1;
  order: 1;
  margin: 0;
  max-width: none;
}
.article-hero-landscape__tag {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.article-hero-landscape__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 18px 0 14px;
  color: var(--ink);
  font-weight: 700;
}
.article-hero-landscape__subtitle {
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.5;
  color: var(--gray-700);
  margin: 0 0 22px;
  font-weight: 400;
}
.article-hero-landscape__header .article-meta {
  margin-top: 0;
}
@media (max-width: 768px) {
  /* Mobile: stack image first, header below — DOM-Reihenfolge greift bei
     display:block, Grid-Override aufheben. Bild edge-to-edge (padding 0
     horizontal), Header darunter mit eigenem side-padding, BG-Token aus
     :root vererbt für gleichen Look wie Desktop. */
  .article-hero-landscape {
    display: block;
    padding: 0 0 24px;
    margin: 0 0 28px;
    gap: 0;
  }
  .article-hero-landscape__media {
    border-radius: 0;
    aspect-ratio: 3 / 2;
    grid-column: auto;
  }
  .article-hero-landscape__header {
    padding: 0 var(--side-padding);
    margin-top: 22px;
    grid-column: auto;
  }
  .article-hero-landscape__title {
    font-size: 30px;
    margin: 14px 0 10px;
  }
  .article-hero-landscape__subtitle {
    font-size: 16px;
  }
}

/* ==================== SPLIT HERO (Portrait images) ==================== */
.article-hero-split-wrap {
  background: var(--ink);
  color: var(--white);
  margin-bottom: 32px;
  padding: 32px 0;
}

.article-hero-split-wrap .article-title,
.article-hero-split-wrap .article-meta__author {
  color: var(--white);
}

.article-hero-split-wrap .article-subtitle,
.article-hero-split-wrap .article-meta__details {
  color: rgba(255,255,255,0.75);
}

.article-hero-split-wrap .article-meta__share-btn {
  background: transparent;
  border-color: var(--white);
  color: var(--white);
}
.article-hero-split-wrap .article-meta__share-btn:hover {
  background: var(--white);
  color: var(--ink);
}

.article-hero-split-wrap .article-meta__avatar-fallback {
  background: var(--yellow);
  color: var(--ink);
}

/* Tinted-Variante: nutzt category_color als Background, Text erbt den
   per-inline-Style gesetzten Kontrast (Schwarz bei hellen Backgrounds). */
.article-hero-split-wrap--tinted { color: inherit; }
.article-hero-split-wrap--tinted .article-title,
.article-hero-split-wrap--tinted .article-meta__author { color: inherit; }
.article-hero-split-wrap--tinted .article-subtitle,
.article-hero-split-wrap--tinted .article-meta__details { color: inherit; opacity: 0.75; }
.article-hero-split-wrap--tinted .article-meta__share-btn {
  border-color: currentColor; color: inherit; background: transparent;
}
.article-hero-split-wrap--tinted .article-meta__share-btn:hover {
  background: currentColor; color: var(--ink);
}
.article-hero-split-wrap--tinted .article-meta__avatar-fallback {
  background: var(--ink); color: var(--yellow);
}

.article-hero-split {
  display: grid;
  grid-template-columns: 1fr;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--side-padding);
  gap: 24px;
}

.article-hero-split__image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 0;
  aspect-ratio: 3/4;
  position: relative;
}

.article-hero-split__image picture,
.article-hero-split__image img {
  width: 100%;
  height: 100%;
  display: block;
}

.article-hero-split__image img {
  object-fit: cover;
  object-position: center 20%;
}

/* === wl Landscape-Hero (article-hero-landscape) === Bild komplett zeigen.
   Vorher: object-fit:cover -> Crop links/rechts (Desktop) und oben/unten (Mobile).
   Jetzt: object-fit:contain, Hintergrund=Section-Tinte. Plus Mobile edge-to-edge. */
body.site-weloveurlaub .article-hero-landscape__media {
  background: transparent !important;
}
body.site-weloveurlaub .article-hero-landscape__media img,
body.site-weloveurlaub .article-hero-landscape__media picture {
  object-fit: contain !important;
  object-position: center !important;
}
/* article-hero-band__inner hat jetzt padding:0 (Hero edge-to-edge auf voller
   Container-Breite). Breadcrumbs + Hero-Header brauchen daher eigenes
   horizontales Padding fuer Text-Lesbarkeit. */
body.site-weloveurlaub .article-hero-band .breadcrumbs {
  padding-left: var(--container-pad, 32px);
  padding-right: var(--container-pad, 32px);
}
@media (max-width: 900px) {
  body.site-weloveurlaub .article-hero-band .breadcrumbs {
    padding-left: 16px;
    padding-right: 16px;
  }
  body.site-weloveurlaub .article-hero-landscape__media {
    aspect-ratio: auto !important;
    min-height: 0 !important;
  }
  body.site-weloveurlaub .article-hero-landscape__media img {
    width: 100% !important;
    height: auto !important;
  }
}

/* === Split-Hero Landscape-Modifier (Spezialfall fuer split-Layout-Tenants) === */
.article-hero-split__image--landscape,
body .article-hero-split__image--landscape {
  aspect-ratio: auto !important;
  background: transparent !important;
  overflow: hidden;
  display: block;
  max-height: none !important;
}
.article-hero-split__image--landscape picture,
.article-hero-split__image--landscape img,
body .article-hero-split__image--landscape picture,
body .article-hero-split__image--landscape img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
  max-height: none !important;
}
/* Mobile: Bild edge-to-edge ueber die Container-Padding hinaus ziehen.
   wl-mobile-Padding ist 20px (siehe body.site-weloveurlaub .article-hero-split
   Override), allgemein 24px — daher beide Werte abdecken via fixe 24px. */
@media (max-width: 899px) {
  .article-hero-split__image--landscape,
  body .article-hero-split__image--landscape {
    margin-left: -24px !important;
    margin-right: -24px !important;
    border-radius: 0 !important;
  }
}
/* Desktop: max-height-Cap damit Landscape-Bild nicht das Layout dominiert. */
@media (min-width: 900px) {
  .article-hero-split__image--landscape,
  body .article-hero-split__image--landscape {
    max-height: 480px !important;
  }
  .article-hero-split__image--landscape img,
  body .article-hero-split__image--landscape img {
    max-height: 480px !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
}

.article-hero-split__image figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
}

.article-header--split {
  padding: 24px 0;
}

.article-header--split .article-title {
  margin-top: 12px;
}

@media (min-width: 900px) {
  .article-hero-split {
    grid-template-columns: 1.3fr 1fr;
    gap: 48px;
    align-items: center;
    padding: 40px var(--side-padding);
  }
  .article-hero-split__content { order: 1; }
  .article-hero-split__image { order: 2; max-height: 640px; }
  .article-header--split { padding: 0; }
}

.article-hero-caption {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 8px var(--side-padding) 0;
  font-weight: 500;
  font-size: 12px;
  color: var(--gray-400);
}

.article-body {
  max-width: 760px;
  margin: 0 auto;
  padding: 0;
}

.article-body p {
  font-size: 17px;
  line-height: 1.75;
  margin-bottom: 24px;
}

.article-body h2 {
  font-weight: 900;
  font-size: 24px;
  margin: 32px 0 16px;
}

.article-body h3 {
  font-weight: 900;
  font-size: 20px;
  margin: 28px 0 12px;
}

.article-body figure {
  margin: 32px 0;
}

.article-body figure img {
  width: 100%;
  border-radius: var(--radius-md);
  border: var(--brand-border-thin);
}

.article-body figcaption {
  font-weight: 500;
  font-size: 12px;
  color: var(--gray-400);
  margin-top: 8px;
}

.article-body blockquote {
  background: var(--cream);
  border-radius: var(--radius-md);
  padding: 24px 24px 24px 28px;
  margin: 32px 0;
  border-left: 6px solid var(--yellow);
}

.article-body blockquote p {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  margin-bottom: 8px;
}

.article-body blockquote cite {
  font-weight: 500;
  font-size: 14px;
  color: var(--gray-400);
  font-style: normal;
}

/* Text + Image block */
.article-body .text-image {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
  margin: 28px 0;
}
.article-body .text-image--reversed {
  direction: rtl;
}
.article-body .text-image--reversed > * {
  direction: ltr;
}
.article-body .text-image__image img {
  width: 100%;
  border-radius: var(--radius-md);
  border: var(--brand-border);
}
.article-body .text-image__text p:first-child {
  margin-top: 0;
}

/* Infobox block */
.article-body .infobox {
  background: #F0F4FF;
  border-left: 6px solid #2d4d28;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 20px 24px;
  margin: 28px 0;
}
.article-body .infobox__title {
  display: block;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.article-body .infobox p {
  margin: 8px 0 0;
}
.article-body .infobox p:first-of-type {
  margin-top: 0;
}

@media (max-width: 768px) {
  .article-body .text-image {
    grid-template-columns: 1fr;
  }
}

/* Ad-Slot Container — vom Loader-Script (main.php) gefüllt. Zentrierte Darstellung
   für Header/Footer/After-Hero; Sidebar bleibt linksbündig (läuft in der Sidebar). */
.ad-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 16px auto;
  max-width: var(--content-max, 1200px);
  padding: 0 var(--side-padding, 20px);
}
.ad-slot:empty { display: none; }
.ad-slot img { display: block; max-width: 100%; height: auto; }

/* DSGVO/Telemediengesetz: jeder befuellte Werbe-Slot bekommt automatisch
   eine "Anzeige"-Deklaration. Greift fuer GAM-/JS-injected Banner; der
   server-side AdRenderer produziert seine eigene .ad-label-Plakette. */
.ad-slot:not(:empty),
.ad-section:not(:empty) {
  position: relative;
  padding-top: 18px;
}
.ad-slot:not(:empty)::before,
.ad-section:not(:empty)::before {
  content: 'Anzeige';
  position: absolute;
  top: 2px;
  left: var(--side-padding, 20px);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted, #8a8478);
  pointer-events: none;
}

/* Generischer ad-label class — wird in partner-page.css, footer-voucher
   etc. verwendet. Hier auch global definiert, falls partner-page.css
   nicht geladen ist. */
.ad-label {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted, #8a8478);
  margin-bottom: 4px;
}
.ad-slot--header { margin: 12px auto 20px; }
.ad-slot--footer { margin: 32px auto 16px; }
.ad-slot--after-hero { margin: 20px auto; }
.ad-slot--before-comments { margin: 28px auto; }
.ad-slot--sidebar {
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0 0 20px;
  max-width: none;
}

/* Mobile: kompaktere Abstände vor/nach Ad-Slots, Sidebar zentriert */
@media (max-width: 768px) {
  .ad-slot--footer { margin: 8px auto 6px; }
  .ad-slot--before-comments { margin: 12px auto; }
  .ad-slot--sidebar { margin: 0 auto 8px; justify-content: center; }
  .article-layout__sidebar { margin-top: 0; padding-top: 0; }
  .article-layout__sidebar > .sidebar-ad,
  .article-layout__sidebar > .ad-slot--sidebar { margin-top: 4px; }
  .comment-section { margin-top: 8px; }
  /* Newsletter-Form direkt vor Footer-Slot soll auch enger anschließen */
  .newsletter-section + .ad-slot--footer { margin-top: 0; }
}

/* Article Image Gallery — horizontal scroll-snap, modernes Kachel-Layout */
.article-body .article-gallery {
  margin: 40px 0;
  position: relative;
  /* Bricht aus article-body-container aus für breitere Darstellung */
  --gap: 20px;
}
.article-body .article-gallery__track {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 4px 4px 20px;
  margin: 0 -4px;
  -webkit-overflow-scrolling: touch;
}
.article-body .article-gallery__track::-webkit-scrollbar {
  display: none;
}
.article-body .article-gallery__item {
  flex: 0 0 min(72%, 480px);
  scroll-snap-align: center;
  margin: 0;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.article-body .article-gallery__item:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.18);
}
.article-body .article-gallery__item img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}
.article-body .article-gallery__item figcaption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%);
  padding: 24px 14px 10px;
  pointer-events: none;
}
.article-body .article-gallery__item { cursor: zoom-in; }
.article-body .article-gallery__hint {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 6px;
  padding-left: 4px;
}
.article-body .article-gallery__hint::before {
  content: '↔';
  font-size: 14px;
}
/* Progressbar unter der Gallery — im Hero-Stil (Segmente) */
.article-body .article-gallery__progress {
  height: 6px;
  display: flex;
  margin-top: 8px;
  gap: 2px;
}
.article-body .article-gallery__progress-segment {
  flex: 1;
  background: rgba(17,17,17,0.08);
  position: relative;
  cursor: pointer;
  border-radius: 3px;
  overflow: hidden;
  transition: background 0.2s;
}
.article-body .article-gallery__progress-segment::after {
  content: '';
  position: absolute;
  inset: 0 100% 0 0;
  background: var(--pink);
  transition: inset 0.3s ease;
}
.article-body .article-gallery__progress-segment.is-done::after,
.article-body .article-gallery__progress-segment.is-active::after {
  inset: 0 0 0 0;
}
.article-body .article-gallery__progress-segment.is-active {
  background: rgba(17,17,17,0.16);
}

/* Lightbox */
.article-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.article-lightbox.is-open {
  display: flex;
  opacity: 1;
}
.article-lightbox__figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.article-lightbox__figure img {
  max-width: 100%;
  max-height: calc(100vh - 160px);
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.article-lightbox__figure figcaption {
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.02em;
  opacity: 0.9;
  text-align: center;
  max-width: 700px;
}
.article-lightbox__close,
.article-lightbox__nav {
  position: absolute;
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.article-lightbox__close:hover,
.article-lightbox__nav:hover {
  background: rgba(255,255,255,0.2);
  border-color: #fff;
}
.article-lightbox__close {
  top: 20px;
  right: 20px;
}
.article-lightbox__nav--prev { left: 20px; top: 50%; transform: translateY(-50%); }
.article-lightbox__nav--next { right: 20px; top: 50%; transform: translateY(-50%); }
.article-lightbox__nav:hover { transform: translateY(-50%) scale(1.08); }
.article-lightbox__counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.08em;
  opacity: 0.7;
}
@media (max-width: 768px) {
  .article-lightbox { padding: 14px; }
  .article-lightbox__close, .article-lightbox__nav { width: 38px; height: 38px; font-size: 20px; }
  .article-lightbox__close { top: 14px; right: 14px; }
  .article-lightbox__nav--prev { left: 8px; }
  .article-lightbox__nav--next { right: 8px; }
}
@media (max-width: 768px) {
  .article-body .article-gallery__item {
    flex-basis: 84%;
  }
  .article-body .article-gallery__item img {
    aspect-ratio: 4/3;
  }
}

/* FAQ Section */
.faq-section {
  margin: 32px 0;
}
.faq-item {
  border: var(--brand-border-thin);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  overflow: hidden;
}
.faq-item[open] {
  border-color: var(--yellow);
}
.faq-item__q {
  padding: 16px 20px;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.faq-item__q::after {
  content: '+';
  font-size: 20px;
  font-weight: 900;
  color: var(--gray-400);
  transition: transform 0.2s;
}
.faq-item[open] .faq-item__q::after {
  content: '−';
  color: var(--pink);
}
.faq-item__q::-webkit-details-marker {
  display: none;
}
.faq-item__a {
  padding: 0 20px 16px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--gray-600);
}

/* Content Block — full width background */
.article-body .content-block {
  margin-left: -28px;
  margin-right: -28px;
  padding: 24px 28px;
  border-radius: 0;
}

/* Category Landing Tiles */
.landing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin: 16px 0 48px;
}
.landing-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 180px;
  padding: 22px 24px 20px;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--white);
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.landing-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--brand-shadow-lg);
  border-color: var(--ink);
}
.landing-tile__bar {
  position: absolute; top: 0; left: 0; right: 0;
  height: 6px; background: var(--tile-color, var(--ink));
}
.landing-tile__body { flex: 1; margin-top: 4px; }
.landing-tile__name {
  display: block;
  font-weight: 900;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--ink);
  margin-bottom: 6px;
}
.landing-tile__desc {
  font-size: 13px;
  line-height: 1.45;
  color: var(--gray-600);
  margin: 0;
}
.landing-tile__foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--gray-300);
}
.landing-tile__count {
  font-weight: 700; font-size: 11px; letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tile-color, var(--ink));
}
.landing-tile__arrow {
  font-size: 22px; font-weight: 900; color: var(--ink);
  transition: transform 0.2s;
}
.landing-tile:hover .landing-tile__arrow { transform: translateX(4px); }
/* Optionales Header-Bild fuer Subkategorie-Kacheln (wl). Ueberschreibt
   das Padding des Tiles im Bildbereich, damit das Bild randlos abschliesst. */
.landing-tile--with-image { padding: 0 0 20px; }
.landing-tile--with-image .landing-tile__bar { z-index: 2; }
.landing-tile--with-image .landing-tile__body { padding: 16px 24px 0; margin-top: 0; }
.landing-tile--with-image .landing-tile__foot { margin: 14px 24px 0; padding-top: 12px; }
.landing-tile__image {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--gray-200);
  margin: 0;
}
.landing-tile__image picture,
.landing-tile__image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.3s;
}
.landing-tile:hover .landing-tile__image img { transform: scale(1.03); }

@media (max-width: 768px) {
  .landing-grid { grid-template-columns: 1fr; gap: 12px; }
  .landing-tile { min-height: auto; padding: 20px 20px 16px; }
  .landing-tile--with-image { padding: 0 0 16px; }
  .landing-tile__name { font-size: 18px; }
}

/* Search Result Items (Careers/Glossary) */
.search-list { display: flex; flex-direction: column; gap: 6px; }
.search-result {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border: 2px solid var(--gray-200); border-radius: var(--radius-md);
  transition: border-color 0.15s;
}
.search-result:hover { border-color: var(--ink); }
.search-result > div { flex: 1; min-width: 0; }
.search-result strong { display: block; font-weight: 900; font-size: 15px; margin-bottom: 2px; }
.search-result span { font-size: 13px; color: var(--gray-500); }
.search-result__badge {
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  padding: 4px 10px; background: var(--cream); border-radius: 50px;
  color: var(--gray-600); flex-shrink: 0;
}

/* Article Sources */
.article-sources {
  margin: 24px 0;
  padding: 16px 0;
  border-top: 2px solid var(--gray-200);
}
.article-sources__label {
  display: block;
  font-weight: 900;
  font-size: 10px;
  letter-spacing: 2px;
  /* gray-400 (#969288) ergibt nur 3:1 auf weiss → WCAG AA Fail fuer 10px.
     gray-500 (#6E6A60) liefert ~5:1, sicher in der Komfortzone. */
  color: var(--gray-500);
  margin-bottom: 10px;
}
.article-sources__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.source-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
  transition: all 0.15s;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.source-chip:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: #F0F4FF;
}

/* Glossary auto-link */
.glossary-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px dotted var(--blue);
  transition: border-color 0.15s;
}
.glossary-link:hover {
  border-bottom-style: solid;
  color: var(--blue);
}

/* Article Summary */
.article-summary {
  background: var(--cream);
  border: var(--brand-border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin: 0 0 28px;
}
.article-summary__title {
  display: block;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: var(--ink);
}
.article-summary p {
  font-size: 15px;
  line-height: 1.6;
  margin: 6px 0 0;
}

/* ============================================================
   fact-card — "Auf einen Blick"-Modul für Reisefuehrer & Guides.
   Card-Look mit Brand-Border, responsives 2-3-Spalten-Grid,
   jedes Item ein Mini-Stat (Label klein/uppercase, Value gross/bold).

   HTML-Pattern (im Article-Body):
   <aside class="fact-card">
     <h2 class="fact-card__title">Auf einen Blick</h2>
     <dl class="fact-card__grid">
       <div class="fact-card__cell">
         <dt class="fact-card__label">Region</dt>
         <dd class="fact-card__value">Lübecker Bucht</dd>
       </div>
       ...
     </dl>
   </aside>
   ============================================================ */
.fact-card {
  margin: 36px 0;
  padding: 24px 28px 28px;
  border: var(--brand-border);
  border-left-width: 6px;
  border-radius: var(--radius-md);
  background: var(--cream);
  position: relative;
}
body.site-weloveurlaub .fact-card {
  border-color: rgba(45, 77, 40, 0.08);
  border-left-color: #233d1f;
  background: #faf7f1;
}
.fact-card__title {
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 16px;
  color: var(--ink);
}
body.site-weloveurlaub .fact-card__title { color: var(--wl-primary-dark); }
.fact-card__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 18px 24px;
  margin: 0;
  padding: 0;
}
.fact-card__cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fact-card__label {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gray-500);
  margin: 0;
}
.fact-card__value {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
}
body.site-weloveurlaub .fact-card__value { color: var(--wl-primary-dark); }
@media (max-width: 640px) {
  .fact-card { padding: 20px 18px; margin: 24px 0; }
  .fact-card__grid { gap: 14px 18px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .fact-card__value { font-size: 15px; }
}

/* ============================================================
   wl Content-Module — Reise-Magazin-Bausteine fuer Article-Bodys.
   Pattern-Doku siehe docs/CONTENT-MODULES.md.
   Alle Module sind tenant-neutral; wl-spezifisches Branding via
   body.site-weloveurlaub-Override am Ende dieses Blocks.
   ============================================================ */

/* --- Reisebericht-Modul (persoenlicher Bericht der Persona) --- */
.travel-report {
  margin: 40px 0;
  padding: 28px 32px;
  background: linear-gradient(135deg, #FFF7E5 0%, #FFEDC1 100%);
  border-radius: var(--radius-md);
  position: relative;
}
.travel-report__header {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 18px;
}
.travel-report__avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  flex-shrink: 0;
}
.travel-report__avatar--initials {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--yellow);
  font-weight: 900; font-size: 20px;
}
.travel-report__meta { display: flex; flex-direction: column; gap: 2px; }
.travel-report__label { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(0,0,0,0.55); }
.travel-report__byline { font-weight: 800; font-size: 16px; color: var(--ink); }
.travel-report__quote {
  font-size: 16px; line-height: 1.65; color: var(--ink);
  margin: 0; quotes: '\201E' '\201C';
}
.travel-report__quote::before { content: open-quote; font-size: 32px; line-height: 0; vertical-align: -8px; margin-right: 4px; color: rgba(0,0,0,0.3); }
.travel-report__quote::after { content: close-quote; font-size: 32px; line-height: 0; vertical-align: -16px; margin-left: 2px; color: rgba(0,0,0,0.3); }
@media (max-width: 640px) { .travel-report { padding: 22px 20px; } .travel-report__quote { font-size: 15px; } }

/* --- Aktivitaeten-Karten --- */
.activity-grid {
  display: grid;
  /* Mobile 1-Spalte, Tablet+/Desktop max 2-Spalten — bei mehr Spalten werden
     die Cards zu schmal und Texte schwer lesbar. */
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 32px 0;
}
@media (min-width: 720px) { .activity-grid { grid-template-columns: 1fr 1fr; } }
.activity-card {
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 18px 18px 20px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color 0.15s, transform 0.15s;
}
.activity-card:hover { border-color: var(--ink); transform: translateY(-2px); }
body.site-weloveurlaub .activity-card { border-color: rgba(45, 77, 40, 0.10); }
body.site-weloveurlaub .activity-card:hover { border-color: rgba(45, 77, 40, 0.30); box-shadow: 0 8px 20px rgba(45, 77, 40, 0.08); }
.activity-card__icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--cream);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink);
}
body.site-weloveurlaub .activity-card__icon { background: rgba(45, 77, 40, 0.08); color: var(--wl-primary-dark); }
.activity-card__title { font-weight: 800; font-size: 16px; color: var(--ink); margin: 0; line-height: 1.3; }
.activity-card__desc { font-size: 13px; line-height: 1.5; color: var(--gray-600); margin: 0; }
.activity-card__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.activity-card__badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  padding: 4px 8px; border-radius: 4px;
  background: var(--gray-100); color: var(--gray-700);
}
.activity-card__badge--season  { background: #DCF5E1; color: #1B6E2C; }
.activity-card__badge--price   { background: #FFE5D0; color: #8C3D00; }
.activity-card__badge--family  { background: #DDEAFE; color: #1E40AF; }
.activity-card__link {
  margin-top: auto; font-size: 13px; font-weight: 700; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px;
}

/* --- Hotel-Empfehlungs-Karten --- */
.hotel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin: 32px 0;
}
.hotel-card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s;
}
.hotel-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.hotel-card__image { aspect-ratio: 16/10; background: var(--gray-200); }
.hotel-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hotel-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.hotel-card__name { font-weight: 800; font-size: 17px; color: var(--ink); margin: 0; line-height: 1.25; }
.hotel-card__stars { color: var(--yellow); letter-spacing: 1px; font-size: 13px; }
.hotel-card__profile { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gray-500); }
.hotel-card__price { font-size: 14px; font-weight: 700; color: var(--ink); }
.hotel-card__highlight { font-size: 13px; line-height: 1.5; color: var(--gray-600); margin: 4px 0 0; }
.hotel-card__cta {
  margin-top: auto; padding-top: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  color: var(--ink); text-decoration: none;
}
body.site-weloveurlaub .hotel-card__cta { color: var(--wl-primary-dark); }
.hotel-card__cta:hover { text-decoration: underline; }

/* --- Pro/Contra-Block --- */
.pro-con {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin: 32px 0;
}
.pro-con__title { grid-column: 1 / -1; }
/* Beide Markup-Varianten unterstuetzen: mit ODER ohne .pro-con__cols
   Wrapper. display:contents loest den Wrapper aus dem Layout-Tree,
   damit die __col-Kinder direkt am .pro-con-Grid teilnehmen → gap
   wirkt korrekt zwischen den Boxen (horizontal + vertikal stacked). */
.pro-con__cols { display: contents; }
@media (max-width: 640px) { .pro-con { grid-template-columns: 1fr; gap: 20px; } }
.pro-con__col {
  padding: 22px 24px;
  border-radius: var(--radius-md);
  border: 2px solid;
}
.pro-con__col--pro { background: #ECFAF0; border-color: #B6E4C2; }
.pro-con__col--con { background: #FFF1EE; border-color: #F2C5BB; }
.pro-con__title {
  font-weight: 900; font-size: 14px; letter-spacing: 1px; text-transform: uppercase;
  margin: 0 0 12px; display: inline-flex; align-items: center; gap: 8px;
}
.pro-con__col--pro .pro-con__title { color: #1B6E2C; }
.pro-con__col--con .pro-con__title { color: #8C2A1A; }
.pro-con__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pro-con__item {
  position: relative; padding-left: 22px; font-size: 14px; line-height: 1.5; color: var(--ink);
}
.pro-con__col--pro .pro-con__item::before { content: '\2713'; position: absolute; left: 0; color: #1B6E2C; font-weight: 900; }
.pro-con__col--con .pro-con__item::before { content: '\2715'; position: absolute; left: 0; color: #8C2A1A; font-weight: 900; }

/* --- Insider-Quote-Box (E-E-A-T) --- */
.insider-quote {
  display: flex; gap: 18px;
  margin: 32px 0;
  padding: 22px 24px;
  background: var(--ink); color: #fff;
  border-left: 6px solid var(--yellow);
  border-radius: var(--radius-md);
}
body.site-weloveurlaub .insider-quote {
  background: var(--cream);
  color: var(--wl-primary-dark);
  border-left-color: var(--wl-primary-mid);
}
body.site-weloveurlaub .insider-quote__avatar { border-color: var(--wl-primary-mid); }
body.site-weloveurlaub .insider-quote__label { color: var(--wl-primary-mid); }
body.site-weloveurlaub .insider-quote__text { color: var(--wl-primary-dark); }
body.site-weloveurlaub .insider-quote__byline,
body.site-weloveurlaub .insider-quote__author,
body.site-weloveurlaub .insider-quote__name { color: var(--gray-600); }
.insider-quote__avatar {
  width: 56px; height: 56px; border-radius: 50%;
  object-fit: cover; border: 3px solid var(--yellow);
  flex-shrink: 0;
  overflow: hidden;
}
/* Wenn __avatar ein DIV-Wrapper ist (statt <img class="...">), muss das
   innere <img> selbst rund + cover sein, sonst zeigt es eckig im Kreis. */
.insider-quote__avatar > img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.insider-quote__body { display: flex; flex-direction: column; gap: 6px; }
.insider-quote__label { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--yellow); }
.insider-quote__text { font-size: 16px; line-height: 1.55; color: #fff; margin: 0; }
.insider-quote__byline,
.insider-quote__author,
.insider-quote__name { font-size: 12px; color: rgba(255,255,255,0.7); margin: 0; display: block; }
@media (max-width: 640px) { .insider-quote { flex-direction: column; padding: 20px 18px; } }

/* --- Saison-Kalender (12-Monats-Grid) --- */
.season-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px;
  margin: 28px 0;
}
@media (min-width: 720px) { .season-grid { grid-template-columns: repeat(12, 1fr); } }
.season-grid__cell {
  position: relative;
  padding: 14px 6px;
  text-align: center;
  border-radius: 8px;
  font-weight: 800; font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  cursor: help; transition: transform 0.1s;
}
.season-grid__cell:hover { transform: translateY(-2px); }
.season-grid__cell--peak    { background: #FFE3E3; color: #8C2A1A; }
.season-grid__cell--shoulder{ background: #FFF1D5; color: #8C5A00; }
.season-grid__cell--secret  { background: #DCF5E1; color: #1B6E2C; }
.season-grid__cell--off     { background: var(--gray-100); color: var(--gray-500); }
.season-grid__cell[data-tip]::after {
  content: attr(data-tip);
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-4px);
  background: var(--ink); color: #fff; font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0;
  padding: 6px 10px; border-radius: 4px; white-space: nowrap; max-width: 240px;
  pointer-events: none; opacity: 0; transition: opacity 0.15s;
  z-index: 10;
}
.season-grid__cell:hover[data-tip]::after { opacity: 1; }
.season-grid__legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 12px; color: var(--gray-600); }
.season-grid__legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }

/* --- Tagesablauf / Itinerary --- */
.itinerary {
  margin: 32px 0;
  padding: 24px 28px;
  background: var(--cream);
  border-radius: var(--radius-md);
  border-left: 6px solid var(--ink);
}
body.site-weloveurlaub .itinerary { background: var(--cream); border-left-color: var(--wl-primary-dark); }
.itinerary__title { font-weight: 900; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink); margin: 0 0 18px; }
.itinerary__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.itinerary__item { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: start; }
.itinerary__time {
  font-weight: 900; font-size: 13px; color: var(--ink);
  background: #fff; border: 2px solid var(--ink);
  padding: 6px 0; text-align: center; border-radius: 6px;
}
body.site-weloveurlaub .itinerary__time { color: var(--wl-primary-dark); border-color: var(--wl-primary-dark); }
.itinerary__content { font-size: 14px; line-height: 1.5; color: var(--ink); padding-top: 4px; }
.itinerary__content strong { font-weight: 800; }
.itinerary__content > h3 { font-size: 15px; font-weight: 900; margin: 0 0 6px; line-height: 1.2; }
.itinerary__content > p { margin: 0; }
@media (max-width: 640px) {
  .itinerary { padding: 20px 18px; }
  .itinerary__item { grid-template-columns: 1fr; gap: 6px; }
  .itinerary__time { justify-self: start; min-width: 72px; padding: 5px 14px; }
  .itinerary__content { padding-top: 0; }
}

/* --- Location-Map — statischer Kartenausschnitt, geladen via /api/map
   (serverseitiger OSM-Tile-Proxy). DSGVO-friendly: Browser sehen nur
   eigene Domain, keine OSM-Tile-Hits direkt. --- */
.location-map {
  margin: 28px 0;
  border: 2px solid var(--ink);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 4px 4px 0 var(--ink);
  position: relative;
}
body.site-weloveurlaub .location-map {
  border: 1px solid rgba(45, 77, 40, 0.12);
  box-shadow: 0 4px 12px rgba(45, 77, 40, 0.08);
}
.location-map__img {
  display: block; width: 100%; height: auto;
  background: #f0f0e8;
}
.location-map__attribution {
  position: absolute;
  bottom: 0; right: 0;
  background: rgba(255,255,255,0.92);
  padding: 4px 10px;
  font-size: 11px;
  color: var(--gray-700);
  border-top-left-radius: 6px;
}
.location-map__attribution a { color: inherit; text-decoration: underline; }

/* --- Section-Tinted — Sektion mit Hintergrundfarbe als visuelle Insel.
   Bricht "Textwueste"-Eindruck auf langen Reisefuehrer-Pages. Nicht
   auf jeder Sektion verwenden — gezielt fuer thematisch-zusammen-
   gehoerende Bloecke (Wetter, Praktische Tipps, Insider-Tipps). --- */
.section-tinted {
  margin: 48px 0;
  padding: 32px 32px 28px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #FFF8E6 0%, #FFE3A6 100%);
}
body.site-weloveurlaub .section-tinted {
  background: linear-gradient(135deg, #EEF5F6 0%, #C3DDE2 100%);
}
.section-tinted > :first-child { margin-top: 0; }
.section-tinted > :last-child { margin-bottom: 0; }

/* --- Section-Divider — visueller Trenner zwischen Standort-Modulen.
   Verhindert die "Textwueste" bei langen Reisefuehrer-Pages. --- */
.section-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 48px 0;
}
.section-divider::before, .section-divider::after {
  content: ''; flex: 1; height: 2px; background: var(--ink); opacity: 0.15;
}
.section-divider__dots {
  display: inline-flex; gap: 6px;
  font-size: 8px; color: var(--ink); opacity: 0.4;
  letter-spacing: 4px;
}
body.site-weloveurlaub .section-divider::before,
body.site-weloveurlaub .section-divider::after { background: var(--wl-primary-dark); opacity: 0.18; }
body.site-weloveurlaub .section-divider__dots { color: var(--wl-primary-dark); opacity: 0.5; }

/* --- Travel-Distances — Anreise-Strecken als visuelle Cards --- */
.travel-distances {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 24px 0;
}
.travel-distances__card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: 3px 3px 0 var(--ink);
}
body.site-weloveurlaub .travel-distances__card { border: 1px solid rgba(45, 77, 40, 0.12); box-shadow: 0 2px 8px rgba(45, 77, 40, 0.06); }
.travel-distances__city {
  font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--gray-600);
}
.travel-distances__primary {
  font-size: 18px; font-weight: 900; line-height: 1.1; color: var(--ink);
}
.travel-distances__secondary { font-size: 12px; color: var(--gray-600); }

/* --- Tips-List — Praktische Tipps mit Icon-Spalte statt Bullet --- */
.tips-list {
  display: grid; gap: 10px;
  list-style: none; margin: 24px 0; padding: 0;
}
.tips-list__item {
  display: grid; grid-template-columns: 36px 1fr; gap: 14px;
  align-items: start;
  padding: 14px 18px;
  background: #faf7f1;
  border-left: 4px solid var(--ink);
  border-radius: 4px;
}
body.site-weloveurlaub .tips-list__item { border-left-color: var(--wl-primary-dark); }
.tips-list__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: var(--ink); color: #fff;
  border-radius: 50%;
  font-size: 14px; font-weight: 900; line-height: 1;
}
body.site-weloveurlaub .tips-list__icon { background: var(--wl-primary-dark); }
.tips-list__content { font-size: 14px; line-height: 1.5; color: var(--ink); }
.tips-list__content strong { font-weight: 800; }

/* --- Best-Time — kompakte Beste-Reisezeit-Karten als Alternative zu season-grid --- */
.best-time {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 28px 0;
}
.best-time__card {
  padding: 20px;
  border-radius: var(--radius-md);
  border: 2px solid var(--ink);
  background: #fff;
  box-shadow: 4px 4px 0 var(--ink);
}
body.site-weloveurlaub .best-time__card { border: 1px solid rgba(45, 77, 40, 0.12); box-shadow: 0 4px 12px rgba(45, 77, 40, 0.08); }
.best-time__card--peak     { background: #FFE3E3; }
.best-time__card--shoulder { background: #DCF5E1; }
.best-time__card--off      { background: var(--gray-100); }
.best-time__label {
  font-size: 11px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--gray-600); margin: 0 0 6px;
}
.best-time__months { font-size: 22px; font-weight: 900; color: var(--ink); margin: 0 0 12px; line-height: 1.1; }
.best-time__details { display: grid; gap: 6px; font-size: 13px; line-height: 1.5; color: var(--ink); }
.best-time__row { display: grid; grid-template-columns: 90px 1fr; gap: 8px; }
.best-time__row strong { font-weight: 800; }

/* --- "Wenn dir X gefaellt"-Vorschlaege --- */
.related-likes {
  margin: 36px 0 16px;
  padding-top: 24px;
  border-top: 2px dashed var(--gray-200);
}
.related-likes__title { font-weight: 900; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink); margin: 0 0 16px; }
.related-likes__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px;
}
.related-likes__card {
  display: block; text-decoration: none;
  background: var(--white); border: 2px solid var(--gray-200);
  border-radius: var(--radius-md); overflow: hidden;
  transition: border-color 0.15s, transform 0.15s;
}
.related-likes__card:hover { border-color: var(--ink); transform: translateY(-2px); }
.related-likes__img { aspect-ratio: 16/10; background: var(--gray-200); }
.related-likes__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.related-likes__name { padding: 10px 12px 14px; font-weight: 800; font-size: 14px; color: var(--ink); margin: 0; }

/* --- Wetter-Widget (von js/weather.js befuellt) --- */
.weather-widget {
  margin: 32px 0;
  padding: 22px 24px;
  background: linear-gradient(135deg, #BFE3FF 0%, #87C2FF 100%);
  border-radius: var(--radius-md);
  color: #0F2D4A;
}
.weather-widget__head { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.weather-widget__title { font-weight: 900; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; margin: 0; opacity: 0.7; }
.weather-widget__current { display: flex; align-items: center; gap: 14px; }
.weather-widget__temp { font-weight: 900; font-size: 36px; line-height: 1; }
.weather-widget__icon { font-size: 36px; }
.weather-widget__forecast {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
  margin-top: 16px;
}
.weather-widget__day {
  background: rgba(255,255,255,0.55); border-radius: 6px; padding: 8px 4px;
  text-align: center; font-size: 11px;
}
.weather-widget__day-name { font-weight: 700; opacity: 0.7; }
.weather-widget__day-icon { font-size: 18px; margin: 4px 0; }
.weather-widget__day-temp { font-weight: 800; font-size: 12px; }

/* --- Mini-Karte (Leaflet) --- */
.map-card {
  margin: 32px 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid var(--gray-200);
}
.map-card__inner { height: 380px; width: 100%; }
.map-card__caption { padding: 10px 14px; font-size: 12px; color: var(--gray-500); background: var(--cream); }
@media (max-width: 640px) { .map-card__inner { height: 300px; } }

/* --- Anreise-Routenplaner (Trip-Planner) --- */
.trip-planner {
  margin: 32px 0;
  padding: 24px 26px;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--radius-md);
}
body.site-weloveurlaub .trip-planner { border-color: var(--wl-primary-dark); }
.trip-planner__title { font-weight: 900; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; margin: 0 0 14px; color: var(--ink); }
.trip-planner__form { display: flex; gap: 8px; flex-wrap: wrap; }
.trip-planner__input {
  flex: 1; min-width: 180px;
  padding: 10px 14px; border: 2px solid var(--gray-200); border-radius: 8px;
  font-family: inherit; font-size: 14px;
}
.trip-planner__btn {
  padding: 10px 20px; background: var(--ink); color: #fff;
  border: none; border-radius: 8px; cursor: pointer;
  font-weight: 800; font-size: 13px; letter-spacing: 1px; text-transform: uppercase;
}
body.site-weloveurlaub .trip-planner__btn { background: var(--wl-primary-dark); }
.trip-planner__results { margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.trip-planner__result { padding: 12px 14px; background: var(--cream); border-radius: 8px; }
.trip-planner__result-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gray-500); }
.trip-planner__result-value { font-weight: 800; font-size: 16px; color: var(--ink); margin-top: 2px; }
.trip-planner__result-link { font-size: 12px; color: var(--link); margin-top: 2px; display: block; }

/* ============================================================
   data-compare — Vergleichsmodul (N Spalten, hell + dunkel)
   Einfaches Flex + overflow-x:auto auf dem Container.
   ============================================================ */
.data-compare {
  background: #fff;
  border: var(--brand-border);
  border-radius: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--brand-shadow-lg);
  margin: 28px 0;
}
.data-compare__head {
  display: flex;
  background: var(--ink);
  color: #fff;
}
.data-compare__row {
  display: flex;
  border-top: var(--brand-border-thin);
}
.data-compare__row:last-of-type { border-bottom: var(--brand-border-thin); }
.data-compare__topic {
  width: 120px; min-width: 120px; flex-shrink: 0;
  padding: 14px 12px;
  font-weight: 900; font-size: 10px;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--yellow);
  background: var(--ink);
}
.data-compare__topic svg { width: 16px; height: 16px; flex-shrink: 0; }
.data-compare__col {
  flex: 1 1 0; min-width: 160px;
  padding: 14px 16px; overflow-wrap: anywhere; word-break: break-word;
  font-weight: 900; font-size: 13px; letter-spacing: 0.2px;
  display: flex; align-items: center; gap: 8px;
  border-left: 2px solid rgba(255,255,255,0.15);
  color: var(--col-color, #fff);
}
/* Automatische Farb-Rotation für Spalten-Labels */
.data-compare__col:nth-of-type(2) { --col-color: var(--yellow); }
.data-compare__col:nth-of-type(3) { --col-color: var(--mint); }
.data-compare__col:nth-of-type(4) { --col-color: var(--pink); }
.data-compare__col:nth-of-type(5) { --col-color: var(--blue); }
.data-compare__col:nth-of-type(6) { --col-color: var(--purple); }
/* Header-Row immer weiss — Spalten-Farben gelten nur fuer Body-Werte.
   Bei wl ist --blue auf dunkles Gruen ueberschrieben (siehe Zeile 707),
   das ist auf dem schwarzen Header-Hintergrund unlesbar. */
.data-compare__head .data-compare__col { color: #fff; }
.data-compare__metric {
  width: 120px; min-width: 120px; flex-shrink: 0;
  padding: 14px 12px;
  background: var(--cream);
  font-weight: 700; font-size: 12px;
  color: var(--ink);
  word-break: break-word;
}
/* Expand-Button — liegt auf dem Wrapper AUSSERHALB des Scroll-Containers */
.data-compare-wrap { position: relative; }
.data-compare-wrap > .data-compare { margin: 0; }
.data-compare-wrap > .data-compare__expand {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--ink); color: var(--yellow);
  border: 2px solid var(--yellow);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 5;
  transition: transform 0.15s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.data-compare-wrap > .data-compare__expand:hover { transform: scale(1.1); }
.data-compare-wrap > .data-compare__expand svg { width: 16px; height: 16px; }
/* Fullscreen Overlay */
.data-compare-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
}
.data-compare-overlay__inner {
  background: #fff; border-radius: 20px;
  max-width: 98vw; max-height: 94vh;
  overflow: auto; position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.data-compare-overlay__inner .data-compare {
  margin: 0; box-shadow: none; border: none; border-radius: 20px;
}
.data-compare-overlay__inner .data-compare__topic,
.data-compare-overlay__inner .data-compare__metric { width: 140px; min-width: 140px; }
.data-compare-overlay__inner .data-compare__col,
.data-compare-overlay__inner .data-compare__value { width: 180px; min-width: 180px; }
.data-compare-overlay__close {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--ink); color: #fff; border: none;
  font-size: 22px; cursor: pointer; z-index: 10;
  display: flex; align-items: center; justify-content: center;
}
/* Mobile landscape hint */
@media (max-width: 640px) and (orientation: portrait) {
  .data-compare-overlay::after {
    content: '↻ Für bessere Ansicht Gerät drehen';
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    background: var(--yellow); color: var(--ink);
    padding: 8px 16px; border-radius: 50px;
    font-weight: 900; font-size: 11px; letter-spacing: 1px;
    z-index: 100000; white-space: nowrap;
    animation: pulse 2s infinite;
  }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.6} }
}
.data-compare__metric-ico {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: var(--brand-border-thin); border-radius: 50%;
  color: var(--ink); vertical-align: middle; margin-right: 6px;
}
.data-compare__metric-ico svg { width: 14px; height: 14px; }
.data-compare__value {
  flex: 1 1 0; min-width: 160px;
  padding: 14px 16px; overflow-wrap: anywhere; word-break: break-word;
  border-left: var(--brand-border-thin);
  font-size: 14px;
  display: flex; flex-direction: column; gap: 4px; justify-content: center;
  position: relative;
  color: var(--ink);
}
.data-compare__value-num {
  font-weight: 900; font-size: 18px;
  letter-spacing: -0.5px; line-height: 1.15;
  overflow-wrap: anywhere; word-break: break-word;
}
.data-compare__value-desc {
  font-size: 12px; color: #969288; line-height: 1.4;
}
.data-compare__value--winner { background: #FFF8D6; }
.data-compare__value--winner::after {
  content: '★'; position: absolute; top: 10px; right: 12px;
  color: var(--pink); font-size: 14px; font-weight: 900;
}
.data-compare__source {
  padding: 12px 20px;
  background: #FFFDF5;
  font-size: 11px; color: #969288;
  font-style: italic;
}
.data-compare-wrap { margin-bottom: 28px; }
.data-compare-wrap + p,
.data-compare-wrap + h2,
.data-compare-wrap + h3 { margin-top: 28px; }

/* Dark-Variante */
.data-compare--dark {
  background: var(--ink);
  border-color: var(--yellow);
  box-shadow: 6px 6px 0 var(--yellow);
}
.data-compare--dark .data-compare__head {
  background: rgba(255,255,255,0.04);
  border-bottom: 2px solid var(--yellow);
}
.data-compare--dark .data-compare__col { border-left-color: rgba(255,255,255,0.1); }
.data-compare--dark .data-compare__row { border-top-color: rgba(255,255,255,0.12); }
.data-compare--dark .data-compare__metric { background: #151515; color: #fff; }
.data-compare--dark .data-compare__topic { background: #0d0d0d; }
.data-compare--dark .data-compare__row { border-top-color: rgba(255,255,255,0.12); }
.data-compare--dark .data-compare__metric-ico {
  background: var(--ink); border-color: var(--yellow); color: var(--yellow);
}
.data-compare--dark .data-compare__value {
  background: transparent;
  border-left-color: rgba(255,255,255,0.12);
  color: #fff;
}
.data-compare--dark .data-compare__value-num { color: #fff; }
.data-compare--dark .data-compare__value-desc { color: rgba(255,255,255,0.65); }
.data-compare--dark .data-compare__value--winner { background: rgba(255,220,0,0.08); }
.data-compare--dark .data-compare__value--winner::after { color: var(--yellow); }
.data-compare--dark .data-compare__source {
  background: rgba(255,255,255,0.02);
  border-top-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.55);
}

/* Mobile: horizontal scrollen statt stacken — Tabelle bleibt lesbar */
@media (max-width: 640px) {
  .data-compare__topic { padding: 14px 16px; font-size: 10px; }
  .data-compare__col { padding: 12px 14px; font-size: 11px; }
  .data-compare__metric { padding: 12px 14px; font-size: 12px; }
  .data-compare__value { padding: 12px 14px; }
  .data-compare__value-num { font-size: 15px; }
  .data-compare__value-desc { font-size: 11px; }
  .data-compare__value--winner::after { top: 8px; right: 8px; font-size: 11px; }
}

/* ============================================================
   fact-grid — Faktenkarten (hell + dunkel)
   ============================================================ */
.fact-grid {
  background: var(--ink);
  border: var(--brand-border);
  border-radius: 20px;
  padding: 24px 20px 20px;
  margin: 28px 0;
  box-shadow: 6px 6px 0 var(--yellow);
}
.fact-grid__head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px; flex-wrap: wrap;
}
.fact-grid__badge {
  background: var(--yellow); color: var(--ink);
  font-weight: 900; font-size: 10px; letter-spacing: 2.5px;
  padding: 4px 10px; border-radius: 50px;
  text-transform: uppercase;
}
.fact-grid__title {
  color: #fff; font-weight: 900;
  font-size: 17px; letter-spacing: -0.3px;
}
.fact-grid__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.fact-grid__item {
  background: #fff;
  border-radius: 14px;
  padding: 16px 16px 14px;
  position: relative; overflow: hidden;
}
.fact-grid__item::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: var(--accent, var(--yellow));
}
.fact-grid__ico {
  display: inline-flex; margin-bottom: 8px;
  width: 36px; height: 36px; border-radius: 10px;
  align-items: center; justify-content: center;
  background: var(--accent, var(--yellow)); color: var(--ink);
}
.fact-grid__ico svg { width: 20px; height: 20px; }
/* Fallback: wenn Claude versehentlich Emoji statt SVG einsetzt */
.fact-grid__ico:not(:has(svg)) {
  background: transparent !important;
  font-size: 30px; line-height: 1;
  width: auto; height: auto;
  margin-bottom: 4px;
}
.data-compare__metric-ico:not(:has(svg)) {
  background: transparent !important;
  border: none !important;
  font-size: 22px; line-height: 1;
  width: auto; height: auto;
  color: inherit;
}
.fact-grid__value {
  font-weight: 900; font-size: 30px; line-height: 1;
  letter-spacing: -1px; color: var(--ink);
  margin: 4px 0 2px;
}
.fact-grid__label {
  font-weight: 900; font-size: 10px; letter-spacing: 1.8px;
  color: #969288; text-transform: uppercase;
  margin-top: 6px;
}
.fact-grid__context {
  font-size: 12px; line-height: 1.4; color: var(--ink);
  margin-top: 8px; opacity: 0.85;
}
.fact-grid__trend {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 900; font-size: 11px;
  padding: 3px 8px; border-radius: 50px;
  background: var(--cream); color: var(--ink);
  margin-top: 8px;
}
.fact-grid__trend svg { width: 14px; height: 14px; }
.fact-grid__trend--up { background: #D8F5CC; color: #00713C; }
.fact-grid__trend--down { background: #FFD6DD; color: #B30032; }
.fact-grid__source {
  color: rgba(255,255,255,0.65);
  font-size: 10px; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-style: italic;
}

/* Light-Variante */
.fact-grid--light {
  background: #fff; box-shadow: var(--brand-shadow-lg);
}
.fact-grid--light .fact-grid__title { color: var(--ink); }
.fact-grid--light .fact-grid__badge { background: var(--pink); color: #fff; }
.fact-grid--light .fact-grid__item {
  background: var(--cream); border: var(--brand-border-thin);
}
.fact-grid--light .fact-grid__source {
  color: #969288; border-top-color: #E6E3DA;
}

/* ============================================================
   data-flow — Prozess-/Datenfluss-Modul
   ============================================================ */
.data-flow {
  background: #fff;
  border: var(--brand-border);
  border-radius: 20px;
  padding: 24px;
  box-shadow: var(--brand-shadow-lg);
  margin: 0 0 28px;
  overflow-x: auto;
}
.data-flow__head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap;
}
.data-flow__badge {
  background: var(--pink); color: #fff;
  font-weight: 900; font-size: 10px; letter-spacing: 2px;
  padding: 4px 10px; border-radius: 50px; text-transform: uppercase;
}
.data-flow__title {
  font-weight: 900; font-size: 17px; letter-spacing: -0.3px;
}
.data-flow__steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  min-width: max-content;
}
.data-flow__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 100px;
  max-width: 140px;
  flex-shrink: 0;
}
.data-flow__step-ico {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: var(--brand-border);
  display: flex; align-items: center; justify-content: center;
  background: var(--step-color, var(--yellow));
  color: var(--ink);
  box-shadow: var(--brand-shadow-sm);
  transition: transform 0.15s;
  flex-shrink: 0;
}
.data-flow__step-ico svg { width: 22px; height: 22px; }
.data-flow__step:hover .data-flow__step-ico { transform: scale(1.08) rotate(-3deg); }
.data-flow__step-label {
  font-weight: 900; font-size: 10px; letter-spacing: 1px;
  text-transform: uppercase; margin-top: 8px;
  line-height: 1.3; max-width: 120px;
}
.data-flow__step-desc {
  font-size: 11px; color: #6E6A60; margin-top: 4px;
  line-height: 1.4; max-width: 130px;
}
.data-flow__arrow {
  display: flex; align-items: center; justify-content: center;
  min-width: 40px;
  padding-top: 10px;
  flex-shrink: 0;
  color: var(--ink);
}
.data-flow__arrow svg { width: 28px; height: 28px; }
.data-flow__phases {
  display: flex; gap: 4px; align-items: flex-start;
  min-width: max-content;
}
.data-flow__phase {
  display: flex; flex-direction: column; align-items: center;
  border: 2px solid #E6E3DA; border-radius: 16px;
  padding: 14px 12px 16px;
  background: var(--paper);
}
.data-flow__phase-label {
  font-weight: 900; font-size: 9px; letter-spacing: 2px;
  text-transform: uppercase; color: #969288;
  margin-bottom: 10px;
}
.data-flow__phase .data-flow__steps { min-width: auto; }
.data-flow__phase-arrow {
  display: flex; align-items: center; justify-content: center;
  min-width: 28px; flex-shrink: 0;
  padding-top: 30px; color: var(--ink);
}
.data-flow__phase-arrow svg { width: 32px; height: 32px; }
.data-flow__source {
  font-size: 10px; color: #969288; margin-top: 16px;
  font-style: italic; padding-top: 12px;
  border-top: 1px solid #E6E3DA;
}
.data-flow--dark {
  background: var(--ink); border-color: var(--yellow);
  box-shadow: 6px 6px 0 var(--yellow);
}
.data-flow--dark .data-flow__title { color: #fff; }
.data-flow--dark .data-flow__badge { background: var(--yellow); color: var(--ink); }
.data-flow--dark .data-flow__step-label { color: #fff; }
.data-flow--dark .data-flow__step-desc { color: rgba(255,255,255,0.6); }
.data-flow--dark .data-flow__arrow { color: var(--yellow); }
.data-flow--dark .data-flow__step-ico { border-color: var(--yellow); box-shadow: 3px 3px 0 var(--yellow); }
.data-flow--dark .data-flow__phase { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); }
.data-flow--dark .data-flow__phase-label { color: rgba(255,255,255,0.5); }
.data-flow--dark .data-flow__phase-arrow { color: var(--yellow); }
.data-flow--dark .data-flow__source { color: rgba(255,255,255,0.5); border-top-color: rgba(255,255,255,0.12); }
@media (max-width: 600px) {
  .data-flow__steps, .data-flow__phases { flex-direction: column; align-items: center; min-width: auto; }
  .data-flow__step { flex-direction: row; text-align: left; max-width: none; min-width: auto; gap: 12px; }
  .data-flow__step-label { margin-top: 0; max-width: none; }
  .data-flow__step-desc { max-width: none; margin-top: 2px; }
  .data-flow__arrow { transform: rotate(90deg); min-width: auto; padding: 0; min-height: 24px; }
  .data-flow__phase { width: 100%; }
  .data-flow__phase-arrow { transform: rotate(90deg); padding: 0; min-height: 24px; }
}

/* ============================================================
   timeline — Zeitstrahl-Modul
   ============================================================ */
.timeline {
  background:#fff;
  border:var(--brand-border);
  border-radius:20px;
  padding:28px 24px 24px;
  box-shadow:var(--brand-shadow-lg);
  margin:28px 0;
}
.timeline__head {
  display:flex;align-items:center;gap:10px;margin-bottom:24px;flex-wrap:wrap;
}
.timeline__badge {
  background:var(--blue);color:#fff;
  font-weight:900;font-size:10px;letter-spacing:2px;
  padding:4px 10px;border-radius:50px;text-transform:uppercase;
}
.timeline__title { font-weight:900;font-size:17px;letter-spacing:-0.3px; }
.timeline__items { position:relative;padding-left:32px; }
.timeline__items::before {
  content:'';position:absolute;left:11px;top:8px;bottom:8px;
  width:3px;background:var(--ink);border-radius:2px;
}
.timeline__item {
  position:relative;padding:0 0 28px 0;
}
.timeline__item:last-child { padding-bottom:0; }
.timeline__dot {
  position:absolute;left:-32px;top:2px;
  width:24px;height:24px;border-radius:50%;
  background:var(--dot-color,var(--yellow));
  border:var(--brand-border);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--brand-shadow-sm);
  z-index:1;
}
.timeline__dot svg { width:12px;height:12px; }
.timeline__date {
  font-weight:900;font-size:11px;letter-spacing:1.5px;
  text-transform:uppercase;color:#969288;margin-bottom:4px;
}
.timeline__item-title {
  font-weight:900;font-size:15px;letter-spacing:-0.2px;margin-bottom:4px;
}
.timeline__item-desc {
  font-size:13px;line-height:1.5;color:#504C42;
}
.timeline__source {
  font-size:10px;color:#969288;margin-top:20px;padding-top:14px;
  border-top:1px solid #E6E3DA;font-style:italic;
}
.timeline--dark {
  background:var(--ink);border-color:var(--yellow);
  box-shadow:6px 6px 0 var(--yellow);
}
.timeline--dark .timeline__title { color:#fff; }
.timeline--dark .timeline__badge { background:var(--yellow);color:var(--ink); }
.timeline--dark .timeline__items::before { background:var(--yellow); }
.timeline--dark .timeline__dot { border-color:var(--yellow);box-shadow:2px 2px 0 var(--yellow); }
.timeline--dark .timeline__date { color:rgba(255,255,255,0.5); }
.timeline--dark .timeline__item-title { color:#fff; }
.timeline--dark .timeline__item-desc { color:rgba(255,255,255,0.7); }
.timeline--dark .timeline__source { color:rgba(255,255,255,0.45);border-top-color:rgba(255,255,255,0.12); }
@media (max-width: 600px) {
  .timeline { padding:20px 16px 16px; }
  .timeline__items { padding-left:28px; }
  .timeline__items::before { left:9px; }
  .timeline__dot { left:-28px;width:20px;height:20px; }
  .timeline__dot svg { width:10px;height:10px; }
  .timeline__item-title { font-size:14px; }
  .timeline__item-desc { font-size:12px; }
}

/* Lists with icons */
.article-body ul,
.article-body ol {
  margin: 16px 0;
  padding-left: 24px;
}
.article-body li {
  margin-bottom: 8px;
  line-height: 1.6;
}
.article-body ul.list--check {
  list-style: none;
  padding-left: 0;
}
.article-body ul.list--check li {
  padding-left: 28px;
  position: relative;
}
.article-body ul.list--check li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--mint);
  font-weight: 900;
  font-size: 16px;
}

/* In-Content Ad Slot */
.ad-slot-inline {
  margin: 28px 0;
  text-align: center;
  min-height: 90px;
}
.ad-slot-inline:empty { display: none; }

/* Related inline box */
.related-inline {
  background: var(--yellow);
  border: var(--brand-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin: 32px 0;
}

.related-inline__title {
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 2px;
  margin-bottom: 16px;
}

.related-inline__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(17,17,17,0.15);
}

.related-inline__item:last-child { border: none; }

.related-inline__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.related-inline__label { font-weight: 700; font-size: 14px; flex: 1; }
.related-inline__arrow { font-weight: 700; }

/* Article tags */
.article-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 32px 0;
  padding-top: 24px;
  border-top: var(--brand-border-thin);
}

.article-tag {
  display: inline-block;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  border: var(--brand-border-hair);
  font-weight: 600;
  font-size: 11px;
}

/* Author box */
.author-box {
  position: relative;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  padding: 28px 28px 28px 32px;
  background: var(--white);
  border: var(--brand-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--brand-shadow-lg);
  margin: 32px 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(17,17,17,0.04) 1px, transparent 0);
  background-size: 18px 18px;
  overflow: hidden;
}
.author-box__accent {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 8px;
  background: var(--yellow);
}
.author-box__avatar-col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.author-box__avatar {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  border: var(--brand-border);
  box-shadow: 4px 4px 0 var(--pink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 44px;
  background: var(--yellow);
  color: var(--ink);
  overflow: hidden;
  object-fit: cover;
}
.author-box__avatar--fallback { letter-spacing: -1px; }
.author-box__icon {
  position: absolute;
  top: -6px; right: -8px;
  width: 36px; height: 36px;
  background: var(--pink);
  color: var(--white);
  border: var(--brand-border);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 900;
  box-shadow: var(--brand-shadow-sm);
  animation: badge-spin 20s linear infinite;
}
.author-box__info { display: flex; flex-direction: column; gap: 6px; }
.author-box__label {
  font-weight: 900; font-size: 11px; letter-spacing: 2.5px;
  color: var(--pink); text-transform: uppercase;
}
.author-box__name {
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.5px;
  color: var(--ink);
  line-height: 1.15;
}
.author-box__bio {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.55;
  color: var(--gray-700);
  margin: 4px 0 0;
}
.author-box__actions {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 14px;
}
.author-box__link {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 900; font-size: 12px; letter-spacing: 1.5px;
  color: var(--ink);
  padding: 8px 14px;
  border: 2.5px solid var(--ink);
  border-radius: 50px;
  background: var(--white);
  text-transform: uppercase;
  transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
}
.author-box__link:hover {
  transform: translate(-1px, -1px);
  box-shadow: var(--brand-shadow-sm);
  background: var(--yellow);
}
.author-box__link--accent { background: var(--pink); color: var(--white); }
.author-box__link--accent:hover { background: var(--pink); color: var(--white); box-shadow: var(--brand-shadow-sm); }

@media (max-width: 640px) {
  .author-box {
    grid-template-columns: 1fr;
    padding: 24px 20px 24px 28px;
    gap: 16px;
  }
  .author-box__avatar-col { align-items: flex-start; }
  .author-box__avatar { width: 80px; height: 80px; font-size: 34px; }
  .author-box__name { font-size: 19px; }
}

/* Share bar */
.share-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 32px 0;
  flex-wrap: wrap;
}

.share-bar__label {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink, #111);
  flex: 1 1 100%;
}

@media (min-width: 600px) {
  .share-bar { flex-wrap: nowrap; }
  .share-bar__label { flex: 1 1 auto; font-size: 14px; }
}

/* Moderne Icon-Buttons für Share-Bar */
.share-icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 2px solid var(--ink, #111);
  border-radius: 999px;
  background: #fff;
  color: var(--ink, #111);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.15s;
  font-family: inherit;
}
.share-icon-btn:hover {
  background: var(--ink, #111);
  color: #fff;
  transform: translateY(-1px);
}
.share-icon-btn.is-copied {
  background: var(--mint, #00D2BE);
  color: var(--ink, #111);
  border-color: var(--mint, #00D2BE);
}
.share-icon-btn__label { font-size: 12px; }
@media (max-width: 599px) {
  .share-bar__buttons { width: 100%; justify-content: space-between; }
  .share-icon-btn { padding: 8px 10px; flex: 1; justify-content: center; }
  .share-icon-btn__label { display: none; }
}

.share-bar__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  color: var(--white);
}

/* Sticky share sidebar (desktop) */
.share-sticky {
  position: sticky;
  top: 100px;
  float: left;
  margin-left: -80px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

/* ==================== FORMS ==================== */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid--single { grid-template-columns: 1fr; }

.form-field { margin-bottom: 0; }

.form-label {
  display: block;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.form-input,
.form-select {
  width: 100%;
  padding: 14px 18px;
  border-radius: 14px;
  border: var(--brand-border-thin);
  font-size: 16px; /* min 16px prevents iOS auto-zoom on focus */
  font-family: inherit;
  background: var(--white);
  outline: none;
  transition: border-color 0.2s;
}

.form-input:focus,
.form-select:focus { border-color: var(--yellow); }

.form-textarea {
  width: 100%;
  padding: 14px 18px;
  border-radius: 14px;
  border: var(--brand-border-thin);
  font-size: 16px;
  font-family: inherit;
  height: 120px;
  resize: vertical;
  background: var(--white);
  outline: none;
}

.form-textarea:focus { border-color: var(--yellow); }

/* ==================== GLOSSARY ==================== */
.glossary-nav {
  margin: 32px 0 24px;
}
.glossary-search {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.glossary-search__input {
  flex: 1;
  padding: 14px 20px;
  border: var(--brand-border);
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  outline: none;
}
.glossary-search__input:focus { border-color: var(--yellow); }
.glossary-search__btn {
  padding: 14px 28px;
  background: var(--ink);
  color: var(--yellow);
  border: var(--brand-border);
  border-radius: var(--radius-pill);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 1px;
  cursor: pointer;
  font-family: inherit;
}
.glossary-search__btn:hover { background: var(--yellow); color: var(--ink); }

.glossary-alphabet {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.glossary-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  font-weight: 900;
  font-size: 13px;
  border: 2px solid var(--gray-200);
  color: var(--ink);
  transition: all 0.1s;
}
.glossary-letter:hover { background: var(--ink); color: var(--yellow); border-color: var(--ink); }
.glossary-letter--active { background: var(--ink); color: var(--yellow); border-color: var(--ink); }
.glossary-letter--disabled { opacity: 0.3; pointer-events: none; }

.glossary-results-info {
  font-size: 14px;
  color: var(--gray-500);
  margin-bottom: 20px;
  font-weight: 600;
}
.glossary-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--gray-400);
  font-size: 16px;
}

.glossary-group {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 0;
  margin-bottom: 8px;
  border-bottom: 2px solid var(--gray-200);
  padding-bottom: 8px;
}
.glossary-group__letter {
  font-weight: 900;
  font-size: 36px;
  color: var(--pink);
  padding-top: 12px;
  line-height: 1;
}
.glossary-group__list {
  display: flex;
  flex-direction: column;
}

.glossary-item {
  display: block;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  transition: background 0.1s;
}
.glossary-item:hover {
  background: var(--cream);
}
.glossary-item__term {
  font-weight: 900;
  font-size: 16px;
  margin-bottom: 2px;
}
.glossary-item__preview {
  font-size: 13px;
  color: var(--gray-500);
  line-height: 1.5;
}
.glossary-item__cat {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--gray-400);
  text-transform: uppercase;
  margin-top: 4px;
}

/* Glossary Detail */
.glossary-detail {
  padding: 40px 0;
}
.glossary-detail__header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
}
.glossary-detail__letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  background: var(--pink);
  color: var(--white);
  font-weight: 900;
  font-size: 32px;
  flex-shrink: 0;
}
.glossary-detail__term {
  font-weight: 900;
  font-size: 28px;
  line-height: 1.2;
  margin-bottom: 4px;
}
.glossary-detail__body {
  margin-bottom: 24px;
}
.glossary-detail__source {
  font-size: 12px;
  color: var(--gray-400);
  font-style: italic;
  margin-bottom: 32px;
}

.glossary-related {
  margin-top: 32px;
}
.glossary-related__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.glossary-related__item {
  display: block;
  padding: 14px;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-md);
  transition: border-color 0.1s;
}
.glossary-related__item:hover {
  border-color: var(--ink);
}
.glossary-related__item strong {
  display: block;
  font-size: 14px;
  margin-bottom: 2px;
}
.glossary-related__item span {
  font-size: 12px;
  color: var(--gray-500);
}

@media (max-width: 768px) {
  .glossary-group { grid-template-columns: 1fr; }
  .glossary-group__letter { font-size: 28px; margin-bottom: 4px; }
  .glossary-related__list { grid-template-columns: 1fr; }
  .glossary-letter { width: 32px; height: 32px; font-size: 11px; }
}

/* ==================== CAREERS / HOTELBERUFE-LEXIKON ==================== */

/* Department filter tabs */
.career-department-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.career-dept-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  border: 2px solid var(--gray-200);
  color: var(--ink);
  transition: all 0.15s;
  white-space: nowrap;
}

.career-dept-tab:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--yellow);
}

.career-dept-tab--active {
  background: var(--ink);
  color: var(--yellow);
  border-color: var(--ink);
}

.career-dept-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0,0,0,0.12);
  font-size: 10px;
  font-weight: 900;
}

.career-dept-tab--active .career-dept-tab__count {
  background: rgba(255,220,0,0.25);
}

.career-dept-tab--accent {
  background: var(--yellow);
  border-color: var(--ink);
  color: var(--ink);
  box-shadow: var(--brand-shadow-sm);
  transition: transform 0.15s cubic-bezier(.2,.8,.2,1), box-shadow 0.15s, background 0.15s, color 0.15s;
}
.career-dept-tab--accent:hover {
  background: var(--ink);
  color: var(--yellow);
  transform: translate(-2px,-2px);
  box-shadow: 5px 5px 0 rgba(0,0,0,0.25);
}
.career-dept-tab--accent svg { flex-shrink: 0; }

/* Career cards grid */
.career-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 40px;
}
@media (max-width: 1200px) { .career-cards-grid { grid-template-columns: repeat(3, 1fr); } }

/* Career card */
.career-card {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s;
  background: var(--white);
}

.career-card:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}

/* Image placeholder */
.career-card__img {
  width: 100%;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.career-card__img picture,
.career-card__img img {
  width: 100%;
  height: 100%;
  display: block;
}
.career-card__img img {
  object-fit: cover;
  object-position: center 25%;
}

/* Dept color variants */
.career-card__img--küche        { background: #FF3864; }
.career-card__img--service      { background: #2d4d28; }
.career-card__img--rezeption    { background: #FFDC00; }
.career-card__img--housekeeping { background: #00D2BE; }
.career-card__img--management   { background: #111111; }
.career-card__img--spa          { background: #A537FD; }
.career-card__img--f-und-b      { background: #FF8C00; }
.career-card__img--tech         { background: #2d4d28; }
.career-card__img--events       { background: #FF3864; }

.career-card__initial {
  font-weight: 900;
  font-size: 48px;
  color: rgba(255,255,255,0.9);
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.career-card__img--rezeption .career-card__initial { color: rgba(0,0,0,0.7); }

.career-card__body {
  padding: 12px 14px 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.career-card__dept-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gray-500);
}

.career-card__title {
  font-weight: 900;
  font-size: 14px;
  line-height: 1.2;
  color: var(--ink);
}

.career-card__alt {
  font-size: 11px;
  color: var(--gray-500);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.career-card .career-salary__label { font-size: 9px; }
.career-card .career-salary__range { font-size: 11px; }

/* Salary range display */
.career-salary {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}

.career-salary__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--gray-600);
  text-transform: uppercase;
  white-space: nowrap;
}

.career-salary__range {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.career-salary--lg { flex-direction: column; align-items: flex-start; gap: 4px; }
.career-salary--lg .career-salary__label { font-size: 11px; white-space: normal; }
.career-salary--lg .career-salary__range { font-size: 18px; }

/* Career detail page */
.career-detail {
  padding: 40px 0 60px;
}

.career-detail__image {
  width: 100%;
  aspect-ratio: 16/9;
  max-height: 480px;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
  gap: 8px;
  overflow: hidden;
}

.career-detail__image picture,
.career-detail__image img {
  width: 100%;
  height: 100%;
  display: block;
}
.career-detail__image img {
  object-fit: cover;
  object-position: center 25%;
}

.career-detail__initial {
  font-weight: 900;
  font-size: 96px;
  line-height: 1;
  opacity: 0.9;
}

.career-detail__dept-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.75;
}

.career-detail__header {
  margin-bottom: 24px;
}

.career-detail__title {
  font-weight: 900;
  font-size: 36px;
  line-height: 1.1;
  margin-top: 8px;
  margin-bottom: 12px;
}

/* Alternative title chips */
.career-alt-titles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.career-alt-titles__chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--gray-200);
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
  background: var(--white);
}

.career-detail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-md);
  margin-bottom: 28px;
}

.career-detail__edu {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.career-detail__edu-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gray-400);
}

.career-detail__edu-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}

.career-detail__body {
  margin-bottom: 32px;
}

/* Related careers */
.career-related {
  margin-top: 40px;
}

.career-related__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

/* Career section container */
.career-section {
  margin-bottom: 40px;
}

/* Department badge color variants for detail page */
.career-dept-badge--küche        { background: #FF3864; color: #fff; }
.career-dept-badge--service      { background: #2d4d28; color: #fff; }
.career-dept-badge--rezeption    { background: #FFDC00; color: #111; }
.career-dept-badge--housekeeping { background: #00D2BE; color: #fff; }
.career-dept-badge--management   { background: #111111; color: #FFDC00; }
.career-dept-badge--spa          { background: #A537FD; color: #fff; }
.career-dept-badge--f-und-b      { background: #FF8C00; color: #fff; }
.career-dept-badge--tech         { background: #2d4d28; color: #fff; }
.career-dept-badge--events       { background: #FF3864; color: #fff; }

@media (max-width: 900px) {
  .career-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

@media (max-width: 600px) {
  .career-cards-grid { grid-template-columns: 1fr; }
  .career-detail__title { font-size: 26px; }
  .career-detail__image { aspect-ratio: 4/3; max-height: 360px; }
  .career-detail__initial { font-size: 64px; }
  .career-related__list { grid-template-columns: 1fr; }
  .career-detail { padding: 24px 0 40px; }
  .career-detail__meta { flex-direction: column; gap: 16px; align-items: stretch; }
  .career-alt-titles { gap: 4px; }
  .career-dept-tab { font-size: 11px; padding: 6px 12px; }
}

/* ==================== COOKIE CONSENT ==================== */
.consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--ink);
  color: var(--white);
  padding: 20px var(--side-padding);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.3);
}
.consent-banner__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
}
.consent-banner__text {
  flex: 1;
  font-size: 13px;
  line-height: 1.5;
}
.consent-banner__text a { color: var(--yellow); text-decoration: underline; }
.consent-banner__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.consent-btn {
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  border: none;
  transition: all 0.15s;
}
.consent-btn--ghost {
  background: transparent;
  border: 2px solid rgba(255,255,255,0.4);
  color: #fff;
}
.consent-btn--ghost:hover {
  border-color: #fff;
  background: rgba(255,255,255,0.1);
}
.consent-btn--accept {
  background: var(--yellow);
  color: var(--ink);
}
.consent-btn--accept:hover {
  background: #fff;
}

.consent-details {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.consent-cat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.consent-cat label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
}
.consent-cat label input { width: auto; accent-color: var(--yellow); }
.consent-cat > span {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  padding-left: 26px;
}
.consent-vendors { margin-top: 6px; padding-left: 26px; }
.consent-vendors summary {
  font-size: 11px; color: rgba(255,255,255,0.4); cursor: pointer; font-weight: 600;
}
.consent-vendors summary:hover { color: rgba(255,255,255,0.7); }
.consent-vendor {
  font-size: 11px; color: rgba(255,255,255,0.5); padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08); line-height: 1.5;
}
.consent-vendor a { color: var(--yellow); }

@media (max-width: 768px) {
  .consent-banner__inner { flex-direction: column; text-align: center; }
  .consent-banner__actions { width: 100%; }
  .consent-banner__actions .btn { flex: 1; }
  .consent-cat span { padding-left: 0; }
}

/* ==================== AUTH PAGES ==================== */
.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 40px 20px;
}
.auth-card {
  background: var(--white);
  border: var(--brand-border);
  border-radius: var(--radius-lg);
  padding: 36px;
  width: 100%;
  max-width: 420px;
}
.auth-card__logo {
  font-weight: 900;
  font-size: 20px;
  letter-spacing: 4px;
  margin-bottom: 4px;
}
.auth-card__title {
  font-weight: 900;
  font-size: 22px;
  margin-bottom: 20px;
}
.auth-card .form-group { margin-bottom: 14px; }
.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"] {
  width: 100%;
  padding: 14px 18px;
  border: var(--brand-border-thin);
  border-radius: 14px;
  font-size: 16px; /* 16px prevents iOS zoom on focus */
  font-family: inherit;
  outline: none;
  background: var(--white);
  transition: border-color 0.2s;
}
.auth-card input:focus { border-color: var(--yellow); }
.auth-card .btn--block {
  width: 100%;
  margin-top: 8px;
  padding: 14px;
  font-size: 14px;
}
.auth-card__links {
  margin-top: 20px;
  text-align: center;
  font-size: 13px;
}
.auth-card__links a {
  color: var(--blue);
  font-weight: 600;
}
.auth-card__links a:hover {
  text-decoration: underline;
}
.auth-card__sep {
  margin: 0 8px;
  color: var(--gray-300);
}
.auth-card__hint {
  font-size: 12px;
  color: var(--gray-400);
  margin-top: 16px;
  text-align: center;
}
.auth-card__hint a {
  color: var(--blue);
}

/* ==================== COMMENTS SECTION ==================== */
.comment-login {
  background: var(--yellow);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
  margin-bottom: 24px;
}

.comment-login__title { font-weight: 700; font-size: 16px; margin-bottom: 14px; }

.comment-login__buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 auto 12px;
  max-width: 320px;
}

@media (min-width: 641px) {
  .comment-login__buttons { flex-direction: row; max-width: none; justify-content: center; }
  .comment-login__buttons .btn--login { width: auto; flex: 0 1 auto; }
}

.comment-login__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 13px;
}

.comment-login__hint { font-size: 11px; color: rgba(17,17,17,0.5); }

.comment-item {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(17,17,17,0.08);
}

.comment-item:last-child { border: none; }
.comment-item--reply { padding-left: 50px; }

.comment-item__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: var(--brand-border-thin);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 14px;
  flex-shrink: 0;
}

.comment-item__content { flex: 1; }

.comment-item__header {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 6px;
}

.comment-item__name { font-weight: 700; font-size: 14px; }
.comment-item__time { font-weight: 500; font-size: 12px; color: var(--gray-400); }
.comment-item__text { font-size: 15px; line-height: 1.5; margin-bottom: 8px; }

.comment-item__actions {
  display: flex;
  gap: 14px;
}

.comment-item__like { font-weight: 700; font-size: 12px; color: var(--pink); }
.comment-item__reply-btn { font-weight: 700; font-size: 11px; letter-spacing: 1px; color: var(--gray-400); }

/* ==================== NEWS MAGAZINE LAYOUT ==================== */

/* HERO STORY */
.news-hero {
  max-width: var(--content-max);
  margin: 0 auto 32px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
}
.news-hero:hover { transform: translateY(-3px); box-shadow: var(--brand-shadow-xl); }
.news-hero__link {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  color: inherit;
  min-height: 380px;
}
.news-hero__image {
  overflow: hidden;
  position: relative;
}
.news-hero__image picture,
.news-hero__image img {
  width: 100%; height: 100%; display: block;
  object-fit: cover;
}
.news-hero__content {
  padding: 40px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.news-hero__kicker { display: flex; gap: 10px; align-items: center; margin-bottom: 4px; }
.news-hero__label {
  font-weight: 900; font-size: 10px; letter-spacing: 2.5px;
  color: var(--yellow);
}
.news-hero__title {
  font-weight: 900;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--white);
  margin: 0;
}
.news-hero__excerpt {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
  margin: 0;
}
.news-hero__meta {
  display: flex; flex-wrap: wrap; gap: 6px;
  font-size: 12px; color: rgba(255,255,255,0.65);
  margin-top: 8px;
}

@media (max-width: 900px) {
  .news-hero__link { grid-template-columns: 1fr; min-height: auto; }
  .news-hero__image { aspect-ratio: 16/9; }
  .news-hero__content { padding: 24px; }
  .news-hero__title { font-size: 26px; }
}

/* 2-COL FEATURED */
.news-featured-grid {
  max-width: var(--content-max);
  margin: 0 auto 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.news-featured {
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.news-featured:hover {
  transform: translateY(-3px);
  box-shadow: var(--brand-shadow-lg);
  border-color: var(--ink);
}
.news-featured__image {
  aspect-ratio: 16/9;
  overflow: hidden;
}
.news-featured__image picture,
.news-featured__image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.news-featured__body { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.news-featured__title {
  font-weight: 900;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--ink);
  margin: 0;
}
.news-featured__excerpt {
  font-size: 13px; line-height: 1.5; color: var(--gray-600); margin: 0;
}
.news-featured__meta { font-size: 11px; color: var(--gray-500); font-weight: 600; }

@media (max-width: 768px) {
  .news-featured-grid { grid-template-columns: 1fr; }
}

/* 3-COL GRID */
.news-grid {
  max-width: var(--content-max);
  margin: 20px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.news-card {
  display: flex; flex-direction: column;
  transition: transform 0.15s;
}
.news-card:hover { transform: translateY(-2px); }
.news-card__image {
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--gray-200);
  display: block;
}
.news-card__image picture,
.news-card__image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.4s;
}
.news-card:hover .news-card__image img { transform: scale(1.04); }
.news-card__body { padding: 14px 0 4px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.news-card__title {
  font-weight: 900;
  font-size: 16px;
  line-height: 1.25;
  margin: 0;
}
.news-card__title a { color: var(--ink); }
.news-card__title a:hover { color: var(--pink); }
.news-card__meta { font-size: 11px; color: var(--gray-500); font-weight: 600; }

/* ==================== TD CHARTS (Pop-Art) ==================== */
.td-chart { margin: 32px 0; }
.td-chart__frame {
  position: relative;
  margin: 0;
  padding: 28px 28px 24px;
  background: var(--white);
  border: var(--brand-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--brand-shadow-lg);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(17,17,17,0.04) 1px, transparent 0);
  background-size: 16px 16px;
}
/* Dark variant */
.td-chart__frame--dark {
  background: var(--ink);
  color: var(--white);
  border-color: var(--yellow);
  box-shadow: 6px 6px 0 var(--yellow);
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1px, transparent 0);
}
.td-chart__frame--dark .td-chart__title { color: var(--white); }
.td-chart__frame--dark .td-chart__subtitle { color: rgba(255,255,255,0.7); }
.td-chart__frame--dark .td-chart__badge { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.td-chart__frame--dark .td-chart__axis { fill: rgba(255,255,255,0.65); }
.td-chart__frame--dark .td-chart__axis--bold { fill: var(--yellow); }
.td-chart__frame--dark .td-chart__value { fill: var(--white); }
.td-chart__frame--dark .td-chart__grid { stroke: rgba(255,255,255,0.25); }
.td-chart__frame--dark .td-chart__baseline { stroke: var(--yellow); }
.td-chart__frame--dark .td-chart__bar { stroke: rgba(0,0,0,0.5); }
.td-chart__frame--dark .td-chart__line--outline { stroke: #000; }
.td-chart__frame--dark .td-chart__dot { stroke: var(--ink); }
.td-chart__frame--dark .td-chart__slice { stroke: var(--ink); }
.td-chart__frame--dark .td-chart__donut-num { fill: var(--white); }
.td-chart__frame--dark .td-chart__donut-label { fill: rgba(255,255,255,0.6); }
.td-chart__frame--dark .td-chart__legend { color: var(--white); }
.td-chart__frame--dark .td-chart__legend-item { background: rgba(255,255,255,0.08); border-color: var(--yellow); color: var(--white); }
.td-chart__frame--dark .td-chart__legend-dot { border-color: var(--ink); }
.td-chart__frame--dark .td-chart__source { color: rgba(255,255,255,0.55); }
.td-chart__frame--dark .td-chart__stat { background: rgba(255,255,255,0.04); border-color: var(--yellow); box-shadow: 4px 4px 0 var(--stat-color, var(--yellow)); }
.td-chart__frame--dark .td-chart__stat-num { color: var(--white); }
.td-chart__frame--dark .td-chart__stat-label { color: rgba(255,255,255,0.65); }
.td-chart__frame--dark .td-chart__stat-change { background: var(--ink); border-color: var(--yellow); color: var(--white); }
.td-chart__head { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 20px; }
.td-chart__badge {
  display: inline-block;
  font-weight: 900; font-size: 10px; letter-spacing: 2.5px;
  padding: 3px 10px;
  background: var(--pink); color: var(--white);
  border: var(--brand-border-thin);
  border-radius: 50px;
  text-transform: uppercase;
}
.td-chart__title { font-weight: 900; font-size: 22px; letter-spacing: -0.5px; color: var(--ink); line-height: 1.15; }
.td-chart__subtitle { font-size: 13px; color: var(--gray-700); font-weight: 600; }
.td-chart__body { width: 100%; overflow-x: auto; }
.td-chart__svg { width: 100%; height: auto; max-width: 100%; }
.td-chart__grid { stroke: var(--gray-400); stroke-width: 1.5; stroke-dasharray: 4 6; opacity: 0.5; }
.td-chart__baseline { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.td-chart__axis { font-family: 'Inter', sans-serif; font-size: 11px; fill: var(--gray-600); font-weight: 700; }
.td-chart__axis--bold { font-weight: 900; fill: var(--ink); font-size: 12px; letter-spacing: 0.3px; }
.td-chart__value { font-family: 'Inter', sans-serif; font-size: 12px; fill: var(--ink); font-weight: 900; }
.td-chart__bar { cursor: pointer; transition: opacity 0.15s, filter 0.15s; }
.td-chart__bar:hover,
.td-chart__bar.td-chart__hover { opacity: 0.85; filter: brightness(1.1); }
.td-chart__dot { cursor: pointer; transition: r 0.2s; }
.td-chart__dot:hover,
.td-chart__dot.td-chart__hover { r: 8 !important; }
.td-chart__slice { cursor: pointer; transition: transform 0.25s, filter 0.2s; transform-origin: 120px 150px; }
.td-chart__slice:hover,
.td-chart__slice.td-chart__hover { transform: scale(1.04); filter: brightness(1.08); }

/* Tooltip */
.td-chart__tooltip {
  position: fixed;
  top: 0; left: 0;
  background: var(--ink);
  color: var(--white);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.35;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s, transform 0.15s;
  z-index: 9999;
  min-width: 140px;
  max-width: 240px;
}
.td-chart__tooltip.is-visible { opacity: 1; transform: translateY(0); }
.td-chart__tooltip::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: var(--ink);
  border-bottom: 0;
}
.td-chart__tip-label { font-weight: 900; font-size: 13px; margin-bottom: 2px; }
.td-chart__tip-series { font-size: 11px; color: rgba(255,255,255,0.65); font-weight: 600; margin-bottom: 4px; letter-spacing: 0.3px; }
.td-chart__tip-value { font-weight: 900; font-size: 16px; color: var(--yellow); }
.td-chart__tip-pct { font-size: 12px; color: rgba(255,220,0,0.7); font-weight: 700; }
.td-chart__donut-num { font-family: 'Inter', sans-serif; font-size: 32px; font-weight: 900; fill: var(--ink); }
.td-chart__donut-label { font-family: 'Inter', sans-serif; font-size: 11px; fill: var(--gray-500); font-weight: 700; letter-spacing: 1px; }
.td-chart__legend {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px;
  font-size: 11px; font-weight: 900; color: var(--ink);
  letter-spacing: 0.5px;
}
.td-chart__legend-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 6px;
  border: var(--brand-border-thin);
  border-radius: 50px;
  background: var(--white);
  text-transform: uppercase;
  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.15s, opacity 0.15s, background 0.15s;
}
.td-chart__legend-item:hover { transform: translateY(-1px); background: var(--yellow); }
.td-chart__legend-item.is-hidden {
  opacity: 0.45;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  background: var(--gray-200);
}
.td-chart__legend-item.is-hidden .td-chart__legend-dot { filter: grayscale(1); opacity: 0.5; }
.td-chart__legend-dot { width: 14px; height: 14px; border-radius: 50%; border: var(--brand-border-thin); }

/* Hidden series/slices (toggled via legend click) */
.td-chart__bar,
.td-chart__bar-dots,
.td-chart__line,
.td-chart__area,
.td-chart__dot,
.td-chart__slice {
  transition: opacity 0.35s ease, transform 0.25s;
}
.td-chart__series-hidden {
  opacity: 0 !important;
  pointer-events: none;
}
.td-chart__source {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 10px;
  background: var(--gray-200);
  color: var(--gray-700);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.td-chart__frame--dark .td-chart__source { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); }
.td-chart__foot { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.td-chart__error { padding: 16px; background: #FFE; color: var(--ink); font-size: 12px; }

.td-chart__stats {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.td-chart__stat {
  position: relative;
  padding: 22px 22px 18px;
  background: var(--white);
  border: var(--brand-border);
  border-radius: var(--radius-md);
  box-shadow: 4px 4px 0 var(--stat-color, var(--ink));
  overflow: hidden;
}
.td-chart__stat::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 8px;
  background: var(--stat-color, var(--ink));
}
.td-chart__stat-num { font-weight: 900; font-size: 36px; line-height: 1; color: var(--ink); letter-spacing: -1.2px; margin-top: 4px; word-break: break-word; overflow-wrap: anywhere; }
.td-chart__stat-label { font-weight: 900; font-size: 10px; letter-spacing: 1.5px; color: var(--gray-700); text-transform: uppercase; margin-top: 8px; word-break: break-word; overflow-wrap: anywhere; line-height: 1.5; }
.td-chart__stat-change { font-size: 12px; font-weight: 900; margin-top: 10px; display: inline-block; padding: 3px 8px; border-radius: 50px; border: var(--brand-border-thin); background: var(--white); }
.td-chart__stat-change.is-up { color: #00A86B; }
.td-chart__stat-change.is-down { color: var(--pink); }

/* ==================== ACCENT BADGES (Figma) ==================== */
/* Starburst — for "NEU", "TOP", "LIVE" markers */
.badge-starburst {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  font-weight: 900; font-size: 11px;
  letter-spacing: 1px;
  color: var(--ink);
  text-transform: uppercase;
  background: var(--yellow);
  clip-path: polygon(50% 0%, 61% 12%, 75% 6%, 81% 20%, 94% 20%, 94% 34%, 100% 50%, 94% 66%, 94% 80%, 81% 80%, 75% 94%, 61% 88%, 50% 100%, 39% 88%, 25% 94%, 19% 80%, 6% 80%, 6% 66%, 0% 50%, 6% 34%, 6% 20%, 19% 20%, 25% 6%, 39% 12%);
  animation: badge-spin 12s linear infinite;
}
.badge-starburst--pink { background: var(--pink); color: var(--white); }
.badge-starburst--ink  { background: var(--ink); color: var(--yellow); }
@keyframes badge-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .badge-starburst { animation: none; }
}

/* Speech bubble — for editor notes, highlighted quotes */
/* Editor's-Note-Card — moderne Variante des badge-speech.
   Asymmetrisches Layout: gelber Akzent links + Inhalt rechts, dezente Schatten. */
/* Editor's-Note-Card — kompakt, höhe folgt dem Inhalt */
.badge-speech {
  position: relative;
  padding: 14px 18px 14px 56px;
  background: #FFFCE8;
  border: 1.5px solid var(--ink, #111);
  border-left: 6px solid var(--yellow, #FFDC00);
  border-radius: 10px;
  margin: 24px 0;
  color: var(--ink, #111);
  font-size: 14.5px;
  line-height: 1.55;
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.badge-speech::before {
  content: 'TURNDOWN MEINT';
  display: inline-block;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: var(--ink, #111);
  background: var(--yellow, #FFDC00);
  padding: 3px 8px;
  border-radius: 999px;
  margin-bottom: 6px;
}
.badge-speech::after {
  content: '”';
  position: absolute;
  left: 16px;
  top: 6px;
  font-family: Georgia, serif;
  font-size: 44px;
  line-height: 1;
  color: var(--yellow, #FFDC00);
  font-weight: 900;
  pointer-events: none;
}
.badge-speech--pink {
  background: #FFEEF3;
  border-left-color: var(--pink, #FF3864);
}
.badge-speech--pink::before {
  background: var(--pink, #FF3864);
  color: #fff;
}
.badge-speech--pink::after { color: var(--pink, #FF3864); }

/* Comment-Invite am Artikelende — friedliche Aufforderung zur Diskussion */
.comment-invite {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  margin: 36px 0 24px;
  background: #FFFCE8;
  border: 1.5px solid var(--ink, #111);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.comment-invite__icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--yellow, #FFDC00);
  color: var(--ink, #111);
  border-radius: 50%;
  flex-shrink: 0;
}
.comment-invite__text { line-height: 1.5; font-size: 14.5px; }
.comment-invite__text strong { display: block; font-weight: 900; font-size: 16px; margin-bottom: 2px; }
.comment-invite__text span { color: var(--ink-soft, #6E6A60); }
.comment-invite__btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  background: var(--ink, #111);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.01em;
  border-radius: 999px;
  border: 2px solid var(--ink, #111);
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s, background 0.15s, color 0.15s;
}
/* Hover: gelber Hintergrund mit schwarzer Schrift (WCAG AAA, 18:1 Kontrast) */
.comment-invite__btn:hover {
  background: var(--yellow, #FFDC00);
  color: var(--ink, #111);
  transform: translateY(-1px);
}
/* Tastatur-Fokus: deutlich sichtbarer Outline-Ring */
.comment-invite__btn:focus-visible {
  outline: 3px solid var(--yellow, #FFDC00);
  outline-offset: 3px;
}
@media (max-width: 600px) {
  .comment-invite { grid-template-columns: 1fr; text-align: center; padding: 18px; }
  .comment-invite__icon { margin: 0 auto; }
  .comment-invite__btn { justify-content: center; }
}

/* Text highlight — marker-style yellow bg on inline text */
.text-highlight {
  background-image: linear-gradient(180deg, transparent 55%, var(--yellow) 55%, var(--yellow) 95%, transparent 95%);
  padding: 0 2px;
  font-weight: 900;
}
.text-highlight--pink {
  background-image: linear-gradient(180deg, transparent 55%, rgba(255,56,100,0.35) 55%, rgba(255,56,100,0.35) 95%, transparent 95%);
}

/* Starburst "NEU" badge overlay on news-cards */
.news-card__new-badge {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 2;
  width: 56px; height: 56px;
  font-size: 10px;
  pointer-events: none;
}

/* NATIVE MPU AD CARD (300x250 format, fits into news-grid) */
.news-card--ad {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: var(--cream);
  align-self: start;
}
.news-card__ad-label {
  font-weight: 900; font-size: 9px; letter-spacing: 2px;
  color: var(--gray-500); text-transform: uppercase;
  align-self: flex-start;
}
.news-card--ad .ad-section {
  width: 300px;
  max-width: 100%;
  height: 250px;
  margin: 0 auto;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--white);
  border-radius: 4px;
}
.news-card--ad .ad-section:empty::after {
  content: '300 × 250';
  font-weight: 700; font-size: 13px; letter-spacing: 1.5px;
  color: var(--gray-400);
}

/* Wide ad variant (800x250) — spans the full grid row */
.news-card--ad-wide {
  grid-column: 1 / -1;
}
.news-card--ad-wide .ad-section--wide {
  width: 800px;
  max-width: 100%;
  height: 250px;
}
.news-card--ad-wide .ad-section--wide:empty::after {
  content: '800 × 250';
}

/* WIDE HORIZONTAL CARD (spans full row) */
.news-wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  border: var(--brand-border-thin);
  transition: transform 0.2s, box-shadow 0.2s;
  min-height: 280px;
}
.news-wide:hover { transform: translateY(-3px); box-shadow: var(--brand-shadow-xl); }
.news-wide--dark { background: var(--ink); color: var(--white); border-color: var(--ink); }
.news-wide--dark .news-wide__title { color: var(--white); }
.news-wide--dark .news-wide__excerpt { color: rgba(255,255,255,0.8); }
.news-wide--dark .news-wide__meta { color: rgba(255,255,255,0.6); }
.news-wide__image { overflow: hidden; position: relative; }
.news-wide__image picture, .news-wide__image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.news-wide__content {
  padding: 32px 36px;
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
}
.news-wide__title {
  font-weight: 900;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin: 0;
  color: var(--ink);
}
.news-wide__excerpt { font-size: 14px; line-height: 1.55; color: var(--gray-600); margin: 0; }
.news-wide__meta {
  display: flex; flex-wrap: wrap; gap: 6px;
  font-size: 12px; color: var(--gray-500); margin-top: 6px;
}

/* QUOTE / EDITORIAL CARD (no image) */
.news-quote {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px;
  border-radius: var(--radius-lg);
  background: var(--accent, var(--yellow));
  color: var(--ink);
  min-height: 240px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.news-quote:hover { transform: translateY(-3px); box-shadow: var(--brand-shadow-lg); }
.news-quote::before {
  content: '"';
  position: absolute; top: -40px; right: -10px;
  font-size: 180px; font-weight: 900; line-height: 1;
  color: rgba(17,17,17,0.12); pointer-events: none;
}
.news-quote__label {
  font-weight: 900; font-size: 10px; letter-spacing: 2.5px;
  color: var(--ink); opacity: 0.7;
  position: relative; z-index: 1;
}
.news-quote__title {
  font-weight: 900;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin: 10px 0 0;
  color: var(--ink);
  position: relative; z-index: 1;
}
.news-quote__excerpt {
  font-size: 14px; line-height: 1.55; margin: 10px 0 0;
  font-style: italic; color: rgba(17,17,17,0.8);
  position: relative; z-index: 1;
}
.news-quote__cta {
  margin-top: 16px; font-weight: 900; font-size: 11px;
  letter-spacing: 2px; color: var(--ink);
  position: relative; z-index: 1;
}

/* CATEGORY ROW WITH STANDARD CARDS (Hotellerie-Stil) */
.news-category-row {
  max-width: var(--content-max);
  margin: 40px auto;
}
.news-category-row .section-header__title {
  color: var(--spot-color, var(--ink));
  font-size: 15px;
}
.news-category-row .section-header__line {
  background-image: repeating-linear-gradient(90deg, var(--spot-color, var(--ink)) 0, var(--spot-color, var(--ink)) 6px, transparent 6px, transparent 10px);
}

/* CATEGORY SPOTLIGHT ROW */
.news-spotlight {
  max-width: var(--content-max);
  margin: 40px auto;
  padding: 28px 28px 24px;
  border-radius: var(--radius-lg);
  background: var(--cream);
  border-top: 6px solid var(--spot-color, var(--ink));
  position: relative;
}
.news-spotlight__head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px; flex-wrap: wrap;
}
.news-spotlight__kicker {
  font-weight: 700; font-size: 10px; letter-spacing: 2.5px;
  color: var(--gray-500); text-transform: uppercase;
}
.news-spotlight__title {
  font-weight: 900; font-size: 22px; letter-spacing: -0.5px;
  color: var(--ink); margin: 0;
}
.news-spotlight__line { flex: 1; height: 2px; background: var(--spot-color, var(--ink)); opacity: 0.4; }
.news-spotlight__link {
  font-weight: 900; font-size: 11px; letter-spacing: 1.5px;
  color: var(--ink); white-space: nowrap;
}
.news-spotlight__link:hover { color: var(--spot-color, var(--pink)); }
.news-spotlight__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.news-spotlight__item { display: flex; flex-direction: column; gap: 10px; transition: transform 0.15s; }
.news-spotlight__item:hover { transform: translateY(-2px); }
.news-spotlight__image {
  aspect-ratio: 16/9; border-radius: var(--radius-md); overflow: hidden; background: var(--gray-200);
}
.news-spotlight__image picture, .news-spotlight__image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.4s;
}
.news-spotlight__item:hover .news-spotlight__image img { transform: scale(1.04); }
.news-spotlight__body { display: flex; flex-direction: column; gap: 6px; }
.news-spotlight__headline {
  font-weight: 900; font-size: 15px; line-height: 1.3;
  color: var(--ink); margin: 0;
}
.news-spotlight__item:hover .news-spotlight__headline { color: var(--spot-color, var(--pink)); }
.news-spotlight__meta { font-size: 11px; color: var(--gray-500); font-weight: 600; }

@media (max-width: 900px) {
  .news-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .news-wide { grid-template-columns: 1fr; min-height: auto; }
  .news-wide__image { aspect-ratio: 16/9; }
  .news-wide__content { padding: 22px 24px; }
  .news-wide__title { font-size: 22px; }
  .news-spotlight__row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .news-grid { grid-template-columns: 1fr; }
  .news-spotlight__row { grid-template-columns: 1fr; }
  .news-spotlight { padding: 22px 20px; }
}

/* ==================== GUIDE / PILLAR ARTIKEL ==================== */
/* Evergreen-Meta (Type-Badge + "Zuletzt aktualisiert") und TOC */

.article-evergreen-meta {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  padding: 12px 16px;
  margin: 0 0 20px;
  background: #F8F7F2;
  border-left: 4px solid var(--yellow);
  border-radius: 0 6px 6px 0;
  font-size: 13px;
}
.article-evergreen-meta__badge {
  display: inline-block;
  font-size: 10px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 50px; border: var(--brand-border-hair);
}
.article-evergreen-meta__badge--pillar { background: var(--ink); color: var(--yellow); }
.article-evergreen-meta__badge--guide { background: var(--yellow); color: var(--ink); }
.article-evergreen-meta__updated { color: #4A463A; }
.article-evergreen-meta__updated strong { font-weight: 900; color: var(--ink); }

.article-toc {
  margin: 0 0 32px;
  padding: 20px 24px;
  background: var(--white);
  border: var(--brand-border-thin);
  border-radius: 10px;
}
.article-toc__title {
  font-weight: 900; font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--ink);
  margin-bottom: 12px;
}
.article-toc__list {
  list-style: none; padding: 0; margin: 0;
  counter-reset: toc-counter;
}
.article-toc__item {
  counter-increment: toc-counter;
  padding: 6px 0;
  border-bottom: 1px dashed #E6E3DA;
  font-size: 14px; line-height: 1.45;
}
.article-toc__item:last-child { border-bottom: none; }
.article-toc__item--h2::before {
  content: counter(toc-counter, decimal-leading-zero) ' ';
  font-weight: 900; color: #6E6A60; margin-right: 8px;
  font-variant-numeric: tabular-nums;
}
.article-toc__item--h3 { padding-left: 24px; font-size: 13px; color: #4A463A; }
.article-toc__item--h3::before { content: '↳ '; color: #969288; }
.article-toc__item a {
  color: var(--ink); text-decoration: none;
  transition: color 0.15s;
}
.article-toc__item a:hover {
  background: var(--yellow);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* Sanftes Scroll-Offset für sticky-Header */
.article-body h2, .article-body h3 { scroll-margin-top: 100px; }

/* Smooth Scroll fuers gesamte Dokument (TOC-Anker-Spruenge weich animiert) */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* --- Scroll-Reveal-Animation fuer Article-Content --- */
/* Body-Sections + Module faden sanft ein wenn sie ins Viewport scrollen.
   reveal.is-visible wird vom JS gesetzt. prefers-reduced-motion wird
   respektiert (kein Animations-Overhead fuer betroffene User). */
.article-body > * {
  opacity: 1;
  transform: none;
}
.article-body .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.article-body .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .article-body .reveal { opacity: 1; transform: none; transition: none; }
}

/* --- TOC in Sidebar: sticky + Scroll-Spy-Highlight --- */
.article-toc--sidebar {
  position: sticky;
  top: 88px;
  margin: 0 0 24px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.article-toc--sidebar .article-toc__list { counter-reset: toc-counter; }
.article-toc--sidebar .article-toc__item {
  /* Flex statt default-Block: Nummer-Pseudo + Link-Text in einer Zeile */
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 8px;
  border: 0;
  border-bottom: none;
  border-left: 2px solid transparent;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.4;
  transition: background 0.15s, border-color 0.15s;
}
/* Nummer (h2) bzw. Pfeil (h3) als flex-item ohne margin */
.article-toc--sidebar .article-toc__item--h2::before { margin: 0; flex-shrink: 0; }
.article-toc--sidebar .article-toc__item--h3 { font-size: 12px; padding-left: 22px; }
.article-toc--sidebar .article-toc__item--h3::before { margin: 0; flex-shrink: 0; }
.article-toc--sidebar .article-toc__item a {
  display: block;
  flex: 1;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--gray-600);
  font-weight: 500;
  transition: color 0.15s;
}
.article-toc--sidebar .article-toc__item:hover { background: var(--cream); }
.article-toc--sidebar .article-toc__item:hover a { color: var(--ink); text-decoration: none; }
/* Scroll-Spy: aktiver Eintrag wird gefettet + farbig markiert */
.article-toc--sidebar .article-toc__item.is-active {
  background: var(--cream);
  border-left-color: var(--ink);
}
.article-toc--sidebar .article-toc__item.is-active a { color: var(--ink); font-weight: 800; }
body.site-weloveurlaub .article-toc--sidebar .article-toc__item.is-active { border-left-color: var(--wl-primary-dark); }
body.site-weloveurlaub .article-toc--sidebar .article-toc__item.is-active a { color: var(--wl-primary-dark); }
@media (max-width: 919px) {
  .article-toc--sidebar { display: none; } /* sidebar ist mobil eh weg */
}

@media (max-width: 640px) {
  .article-toc { padding: 16px 18px; }
  .article-toc__item { font-size: 13px; }
  .article-toc__item--h3 { padding-left: 18px; font-size: 12px; }
}

/* ==================== AUTHOR PAGES ==================== */
/* /autor/<slug> Profil-Hero + /redaktion Grid */

.author-hero {
  background: var(--yellow);
  border-bottom: var(--brand-border-thin);
  padding: 48px 0;
}
.author-hero__inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 40px;
  align-items: center;
}
.author-hero__avatar-col { display: flex; justify-content: center; }
.author-hero__avatar,
.author-hero__avatar--fallback {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: var(--brand-border);
  object-fit: cover;
  display: block;
  background: var(--white);
}
.author-hero__avatar--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 72px;
  color: var(--ink);
  line-height: 1;
}
.author-hero__label {
  display: inline-block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--ink);
  background: var(--white);
  border: var(--brand-border-hair);
  padding: 4px 10px;
  border-radius: 50px;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.author-hero__name {
  font-weight: 900;
  font-size: 40px;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 12px;
}
.author-hero__bio {
  font-size: 16px;
  line-height: 1.5;
  color: #2A2A2A;
  margin: 0 0 16px;
  max-width: 620px;
}
.author-hero__expertise {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 14px;
}
.author-hero__tag {
  font-size: 11px;
  font-weight: 700;
  background: var(--ink);
  color: var(--yellow);
  padding: 4px 10px;
  border-radius: 50px;
}
.author-hero__social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}
.author-hero__social-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  background: var(--white);
  border: var(--brand-border-hair);
  padding: 6px 12px;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.15s;
}
.author-hero__social-link:hover { background: var(--ink); color: var(--yellow); }
.author-hero__stats { margin-top: 16px; }
.author-hero__stat { font-size: 13px; color: var(--ink); }
.author-hero__stat strong { font-size: 18px; font-weight: 900; }

@media (max-width: 640px) {
  .author-hero { padding: 32px 0; }
  .author-hero__inner { grid-template-columns: 1fr; gap: 20px; text-align: left; }
  .author-hero__avatar,
  .author-hero__avatar--fallback { width: 140px; height: 140px; }
  .author-hero__avatar--fallback { font-size: 56px; }
  .author-hero__name { font-size: 30px; }
}

/* ==== /redaktion Team-Grid ==== */
.authors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 24px;
}
.author-card {
  display: flex;
  gap: 16px;
  padding: 20px;
  background: var(--white);
  border: var(--brand-border-thin);
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
  transition: all 0.15s;
}
.author-card:hover { background: var(--yellow); transform: translate(-2px, -2px); box-shadow: var(--brand-shadow-md); }
.author-card__avatar,
.author-card__avatar--fallback {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: var(--brand-border-thin);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--white);
}
.author-card__avatar--fallback {
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 32px; color: var(--ink); line-height: 1;
}
.author-card__body { flex: 1; min-width: 0; }
.author-card__role { font-size: 10px; font-weight: 900; letter-spacing: 1.5px; color: #6E6A60; text-transform: uppercase; display: block; margin-bottom: 4px; }
.author-card__name { font-weight: 900; font-size: 18px; line-height: 1.15; margin: 0 0 6px; color: var(--ink); }
.author-card__bio { font-size: 13px; line-height: 1.45; color: #4A463A; margin: 0 0 10px; }
.author-card__link { font-size: 11px; font-weight: 700; color: var(--ink); letter-spacing: 0.5px; }

/* ==== Author-Box in Artikel: Social-Links + Link auf Profil ==== */
.author-box__name a { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.author-box__name a:hover { background: var(--yellow); }
.author-box__social { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 6px; }
.author-box__social-link {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: var(--brand-border-hair);
  padding: 3px 8px;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.15s;
}
.author-box__social-link:hover { background: var(--ink); color: var(--yellow); }

/* ==================== INTERVIEW MODULES ==================== */
/* Profil-Card oben im Interview + Q&A-Blöcke. Antworten werden 1:1 eingesetzt
   (kein LLM-Rewrite serverseitig) — Quellentreue Pflicht. */

.interview-intro {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  padding: 24px;
  margin: 32px 0;
  background: var(--white);
  border: var(--brand-border-thin);
  border-radius: 12px;
  position: relative;
}
.interview-intro::before {
  content: 'INTERVIEW';
  position: absolute;
  top: -10px; left: 24px;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--font-heading, inherit);
  font-weight: 900;
  font-size: 10px;
  letter-spacing: 2px;
  padding: 3px 10px;
  border-radius: 50px;
  border: var(--brand-border-hair);
}
.interview-intro__photo {
  width: 220px;
  height: 260px;
  object-fit: cover;
  border-radius: 8px;
  border: var(--brand-border-thin);
  display: block;
}
.interview-intro__photo--placeholder {
  width: 220px; height: 260px;
  display: flex; align-items: center; justify-content: center;
  background: var(--yellow);
  color: var(--ink);
  font-weight: 900; font-size: 56px;
  border-radius: 8px; border: var(--brand-border-thin);
  line-height: 1;
}
.interview-intro__meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.interview-intro__name {
  font-weight: 900;
  font-size: 26px;
  line-height: 1.15;
  color: var(--ink);
}
.interview-intro__position { font-size: 14px; font-weight: 700; color: #4A463A; }
.interview-intro__company {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  width: fit-content;
}
.interview-intro__company:hover { background: var(--yellow); }
.interview-intro__bio {
  font-size: 14px; line-height: 1.55; color: #2A2A2A;
  margin-top: 8px;
}
.interview-intro__topic {
  font-size: 13px;
  padding: 10px 14px;
  background: #FFFCE8;
  border-left: 3px solid var(--yellow);
  border-radius: 4px;
  line-height: 1.5;
  margin-top: 4px;
}
.interview-intro__topic strong { display: block; font-size: 11px; letter-spacing: 1px; color: #6E6A60; margin-bottom: 2px; text-transform: uppercase; }
.interview-intro__credit { font-size: 10px; color: #969288; margin-top: 6px; letter-spacing: 0.5px; }
.interview-intro__photo-col { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.interview-intro__photo-col .interview-intro__credit { margin-top: 0; }
.article-hero-split__image figcaption { margin-top: 10px; font-size: 12px; color: rgba(255,255,255,0.75); line-height: 1.45; }
.article-hero-split__credit { display: inline-block; margin-left: 6px; font-size: 11px; color: rgba(255,255,255,0.6); letter-spacing: 0.5px; }
.article-hero-split__image figcaption:has(.article-hero-split__credit:only-child) .article-hero-split__credit { margin-left: 0; }

.interview-qa {
  margin: 28px 0;
  padding: 0;
  position: relative;
}
.interview-qa__question {
  font-weight: 900;
  font-size: 18px;
  line-height: 1.35;
  color: var(--ink);
  padding: 14px 18px 14px 46px;
  background: var(--yellow);
  border: var(--brand-border-thin);
  border-radius: 10px;
  position: relative;
}
.interview-qa__question::before {
  content: 'F';
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  background: var(--ink); color: var(--yellow);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 14px;
  font-family: var(--font-heading, inherit);
}
.interview-qa__answer {
  font-size: 16px;
  line-height: 1.65;
  color: #1A1A1A;
  padding: 16px 18px 16px 46px;
  background: var(--white);
  border: var(--brand-border-thin);
  border-top: none;
  border-radius: 0 0 10px 10px;
  margin: -2px 6px 0 6px;
  position: relative;
}
.interview-qa__answer::before {
  content: 'A';
  position: absolute;
  left: 12px; top: 18px;
  width: 26px; height: 26px;
  background: var(--yellow); color: var(--ink);
  border: var(--brand-border-thin);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 14px;
  font-family: var(--font-heading, inherit);
}
.interview-qa__answer p { margin: 0 0 10px 0; }
.interview-qa__answer p:last-child { margin-bottom: 0; }
.interview-qa__answer a { text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }

@media (max-width: 640px) {
  .interview-intro { grid-template-columns: 1fr; padding: 20px; gap: 18px; }
  .interview-intro__photo,
  .interview-intro__photo--placeholder { width: 100%; height: auto; aspect-ratio: 4/5; max-width: 260px; }
  .interview-intro__name { font-size: 22px; }
  /* Mobile: Q und A als verbundene Einheit — keine gestaffelten Ränder */
  .interview-qa__question {
    font-size: 16px; padding: 12px 14px 12px 42px;
    border-radius: 10px 10px 0 0;
  }
  .interview-qa__answer {
    font-size: 15px; padding: 14px 14px 14px 42px;
    margin: 0;
    border-radius: 0 0 10px 10px;
  }
  .interview-qa__answer::before { top: 16px; }
}

/* Dark-Variante (falls Artikel dark-theme setzt) */
.article-dark .interview-intro,
[data-theme="dark"] .interview-intro {
  background: #1A1A18;
  border-color: var(--yellow);
  color: var(--white);
}
.article-dark .interview-intro__name,
[data-theme="dark"] .interview-intro__name { color: var(--white); }
.article-dark .interview-intro__topic,
[data-theme="dark"] .interview-intro__topic { background: #2A2A26; color: #E8E4D8; }
.article-dark .interview-qa__answer,
[data-theme="dark"] .interview-qa__answer { background: #1A1A18; color: #E8E4D8; border-color: var(--yellow); }
.article-dark .interview-qa__question,
[data-theme="dark"] .interview-qa__question { border-color: var(--yellow); }

/* ==================== EVENTS KALENDER ==================== */
.events-hero {
  position: relative;
  background: var(--ink);
  color: var(--white);
  overflow: hidden;
  padding: 64px 0 56px;
  border-bottom: 4px solid var(--yellow);
}
.events-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 2px 2px, rgba(255,255,255,0.06) 1.5px, transparent 0);
  background-size: 22px 22px;
  pointer-events: none;
}
.events-hero__shapes { position: absolute; inset: 0; pointer-events: none; }
.events-hero__shape { position: absolute; opacity: 0.5; }
.events-hero__shape--1 { top: 18%; left: 8%; width: 70px; height: 70px; border-radius: 50%; background: var(--pink); animation: nl-float 11s ease-in-out infinite; }
.events-hero__shape--2 { top: 62%; left: 14%; width: 44px; height: 44px; background: var(--yellow); border: var(--brand-border); transform: rotate(15deg); animation: nl-float 13s ease-in-out infinite reverse; }
.events-hero__shape--3 { top: 28%; right: 12%; width: 110px; height: 110px; border: 4px solid var(--mint); border-radius: 50%; animation: nl-float 15s ease-in-out infinite; }
.events-hero__inner { position: relative; text-align: center; z-index: 2; }
.events-hero__kicker {
  display: inline-block; font-weight: 900; font-size: 11px; letter-spacing: 3px;
  color: var(--ink); background: var(--yellow); padding: 6px 16px; border-radius: 50px; margin-bottom: 20px;
}
.events-hero__title {
  font-weight: 900; font-size: clamp(28px, 5vw, 52px); line-height: 1.05;
  letter-spacing: -1.5px; color: var(--white); margin: 0 0 14px;
}
.events-hero__title .text-highlight { background: var(--yellow); color: var(--ink); padding: 2px 10px; border-radius: 4px; }
.events-hero__subtitle { font-size: 17px; color: rgba(255,255,255,0.8); font-weight: 500; max-width: 640px; margin: 0 auto 24px; line-height: 1.5; }
.events-hero__count-row {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 10px 20px; background: rgba(255,255,255,0.08);
  border: 2px dashed rgba(255,220,0,0.4); border-radius: 50px;
}
.events-hero__count-num { font-weight: 900; font-size: 28px; color: var(--yellow); line-height: 1; }
.events-hero__count-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: rgba(255,255,255,0.85); text-align: left; text-transform: uppercase; }

/* Featured */
.events-featured { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.event-feature {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 18px; align-items: center;
  padding: 20px 24px; background: var(--white);
  border: var(--brand-border); border-radius: var(--radius-lg);
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform 0.15s, box-shadow 0.15s;
}
.event-feature:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--type-color, var(--ink)); }
.event-feature__date {
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 0; background: var(--type-color, var(--ink));
  border-radius: var(--radius-md); color: var(--white); text-align: center;
  border: var(--brand-border-thin);
}
.event-feature__date-day { font-weight: 900; font-size: 34px; line-height: 1; }
.event-feature__date-mon { font-weight: 700; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; margin-top: 4px; }
.event-feature__body { min-width: 0; }
.event-feature__title { font-weight: 900; font-size: 18px; letter-spacing: -0.3px; line-height: 1.2; color: var(--ink); margin: 8px 0 6px; }
.event-feature__excerpt { font-size: 13px; line-height: 1.4; color: var(--gray-700); margin: 0 0 8px; }
.event-feature__meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11px; color: var(--gray-500); font-weight: 600; }
.event-feature__arrow { font-size: 22px; font-weight: 900; color: var(--ink); transition: transform 0.2s; flex-shrink: 0; }
.event-feature:hover .event-feature__arrow { transform: translateX(4px); }

/* Month group */
.events-month { margin-top: 28px; }
.events-month__head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.events-month__label { font-weight: 900; font-size: 22px; letter-spacing: -0.5px; color: var(--ink); margin: 0; white-space: nowrap; }
.events-month__line { flex: 1; height: 3px; background: repeating-linear-gradient(90deg, var(--ink) 0, var(--ink) 8px, transparent 8px, transparent 12px); }
.events-month__count { font-size: 11px; font-weight: 700; color: var(--gray-600); letter-spacing: 1px; text-transform: uppercase; }

.events-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.event-row {
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-left: 8px solid var(--type-color, var(--ink));
  border-radius: var(--radius-md);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.event-row:hover { transform: translateX(3px); box-shadow: var(--brand-shadow-md); border-color: var(--ink); border-left-color: var(--type-color, var(--ink)); }
.event-row__link { display: grid; grid-template-columns: 100px 1fr auto; gap: 18px; padding: 16px 20px; align-items: center; color: var(--ink); }
.event-row__date { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.event-row__date-num { font-weight: 900; font-size: 30px; line-height: 1; color: var(--type-color, var(--ink)); }
.event-row__date-range { font-size: 18px; color: var(--gray-600); }
.event-row__date-mon { font-weight: 900; font-size: 11px; letter-spacing: 1.5px; color: var(--ink); text-transform: uppercase; }
.event-row__date-day { font-size: 10px; color: var(--gray-500); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.event-row__content { min-width: 0; }
.event-row__tags { display: flex; gap: 6px; margin-bottom: 6px; }
.event-row__title { font-weight: 900; font-size: 16px; letter-spacing: -0.2px; line-height: 1.25; margin: 2px 0 6px; }
.event-row__excerpt { font-size: 13px; line-height: 1.45; color: var(--gray-700); margin: 0 0 6px; }
.event-row__meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px; color: var(--gray-500); font-weight: 600; }
.event-row__loc-detail { color: var(--gray-500); font-weight: 500; }
.event-row__cta { font-weight: 900; font-size: 11px; letter-spacing: 1.5px; color: var(--ink); }

/* Submit CTA */
.events-submit-cta { background: var(--yellow); border-top: 4px solid var(--ink); padding: 36px 0; }
.events-submit-cta__inner {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: center; text-align: left;
}
.events-submit-cta__title { font-weight: 900; font-size: 28px; letter-spacing: -0.8px; margin: 0 0 4px; line-height: 1; }
.events-submit-cta__text { font-size: 14px; color: var(--ink); font-weight: 600; margin: 0; }

/* Event Detail */
.event-detail-hero {
  background: var(--type-color, var(--ink));
  color: var(--white);
  padding: 56px 0 48px;
  border-bottom: 4px solid var(--ink);
}
.event-detail-hero__inner { text-align: left; max-width: var(--content-max); margin: 0 auto; padding: 0 var(--side-padding); }
.event-detail-hero__title { font-weight: 900; font-size: clamp(28px, 4vw, 40px); letter-spacing: -1px; margin: 12px 0 10px; line-height: 1.1; }
.event-detail-hero__subtitle { font-size: 16px; font-weight: 500; color: rgba(255,255,255,0.88); max-width: 640px; margin: 0; }
.event-detail-grid { display: grid; grid-template-columns: 320px 1fr; gap: 32px; align-items: start; }
.event-detail-meta { background: var(--white); padding: 24px; border: var(--brand-border); border-radius: var(--radius-lg); box-shadow: var(--brand-shadow-md); position: sticky; top: 80px; }
.event-detail-meta__date { text-align: center; padding-bottom: 16px; border-bottom: 2px dashed var(--gray-200); margin-bottom: 16px; }
.event-detail-meta__date-num { display: block; font-weight: 900; font-size: 48px; line-height: 1; letter-spacing: -1.5px; color: var(--ink); }
.event-detail-meta__date-mon { display: block; font-weight: 700; font-size: 13px; color: var(--gray-600); margin-top: 4px; }
.event-detail-meta__date-day { display: block; font-size: 11px; color: var(--gray-500); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }
.event-detail-meta__list { margin: 0; }
.event-detail-meta__list dt { font-weight: 900; font-size: 10px; letter-spacing: 1.5px; color: var(--gray-500); text-transform: uppercase; margin-top: 12px; }
.event-detail-meta__list dt:first-child { margin-top: 0; }
.event-detail-meta__list dd { font-size: 13px; color: var(--ink); line-height: 1.5; margin: 4px 0; }
.event-detail-body { background: var(--white); padding: 28px 32px; border-radius: var(--radius-lg); border: 2px solid var(--gray-200); }
.event-detail-body.article-body p,
.event-detail-body.article-body ul,
.event-detail-body.article-body ol { font-size: 15px; line-height: 1.6; }

/* Event detail action buttons */
.event-detail-meta__actions { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.event-detail-meta__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; white-space: nowrap; padding: 12px 16px;
  font-size: 13px; letter-spacing: 1px;
}
.event-detail-meta__maps { display: flex; gap: 6px; margin-top: 4px; }
.event-detail-meta__btn-half {
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 8px 10px; font-size: 11px; letter-spacing: 0.8px; border-width: 2px;
  white-space: nowrap;
}
.event-detail-meta__btn-half svg { flex-shrink: 0; }
.event-detail-meta__cal { position: relative; }
.event-detail-meta__cal > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; white-space: nowrap; padding: 12px 16px;
  font-size: 13px; letter-spacing: 1px;
}
.event-detail-meta__cal > summary svg { flex-shrink: 0; }
.event-detail-meta__cal > summary::-webkit-details-marker,
.event-detail-meta__cal > summary::marker { display: none; content: ''; }
.event-detail-meta__cal-chevron { transition: transform 0.2s ease; width: 12px; height: 12px; }
.event-detail-meta__cal[open] .event-detail-meta__cal-chevron { transform: rotate(180deg); }
.event-detail-meta__cal-menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 10;
  background: var(--white); border: var(--brand-border-thin);
  box-shadow: var(--brand-shadow-md);
  display: flex; flex-direction: column;
  animation: fadeInDown 0.15s ease-out;
}
.event-detail-meta__cal-menu a {
  padding: 12px 16px; font-size: 13px; font-weight: 700;
  color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(17, 17, 17, 0.1);
  transition: background 0.15s ease;
}
.event-detail-meta__cal-menu a:last-child { border-bottom: none; }
.event-detail-meta__cal-menu a:hover { background: var(--sand); }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* Homepage Events-Teaser */
.home-events {
  background: var(--white);
  padding: 48px 0 52px;
  border-top: var(--brand-border);
  border-bottom: var(--brand-border);
}
.home-events__head {
  display: flex; align-items: center; gap: 14px; margin-bottom: 24px;
}
.home-events__title {
  font-weight: 900; font-size: 28px; letter-spacing: -0.8px;
  color: var(--ink); margin: 0;
}
.home-events__title-sub {
  font-size: 13px; font-weight: 700; color: var(--gray-600);
  letter-spacing: 1.5px; text-transform: uppercase;
}
.home-events__cta { margin-left: auto; }
.home-events__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.home-event {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 16px;
  padding: 18px 20px;
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-left: 6px solid var(--type-color, var(--pink));
  border-radius: var(--radius-md);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.home-event:hover { transform: translateY(-2px); box-shadow: var(--brand-shadow-md); border-color: var(--ink); border-left-color: var(--type-color, var(--pink)); }
.home-event__date {
  background: var(--type-color, var(--pink));
  color: var(--white);
  border-radius: var(--radius-md);
  padding: 8px 6px;
  text-align: center;
  border: var(--brand-border-thin);
  position: relative;
  overflow: hidden;
}
/* Dunkle Overlay fuer WCAG-AA-Kontrast auf mittel-hellen Type-Colors. */
.home-event__date::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.35);
  border-radius: inherit;
  pointer-events: none;
}
.home-event__date-num, .home-event__date-mon {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.home-event__date-num { display: block; font-weight: 900; font-size: 24px; line-height: 1; }
.home-event__date-mon { display: block; font-weight: 700; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 2px; }
.home-event__body { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.home-event__type { font-weight: 900; font-size: 10px; letter-spacing: 2px; color: var(--ink); text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; }
.home-event__type::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--type-color, var(--pink)); }
.home-event__title { font-weight: 900; font-size: 14px; line-height: 1.2; color: var(--ink); margin: 0; }
.home-event__meta { font-size: 11px; color: var(--gray-600); font-weight: 600; margin-top: 2px; }

@media (max-width: 900px) { .home-events__grid { grid-template-columns: 1fr; gap: 12px; } }

@media (max-width: 900px) {
  .event-detail-grid { grid-template-columns: 1fr; }
  .event-detail-meta { position: static; }
  .event-feature { grid-template-columns: 72px 1fr; }
  .event-feature__arrow { display: none; }
  .event-row__link { grid-template-columns: 72px 1fr; gap: 12px; padding: 14px; }
  .event-row__date-num { font-size: 24px; }
  .event-row__cta { display: none; }
}

/* ==================== LEGACY NEWS LISTING ==================== */
.news-row {
  display: flex;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(17,17,17,0.08);
  align-items: center;
  transition: padding-left 0.2s;
}

.news-row:hover { padding-left: 4px; }
.news-row:last-child { border: none; }

.news-row__image {
  width: 100px;
  height: 72px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  border: var(--brand-border-thin);
}

.news-row__image img { width: 100%; height: 100%; object-fit: cover; }
.news-row__content { flex: 1; }
.news-row__tag { margin-bottom: 4px; }

.news-row__title {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  margin-bottom: 4px;
}

.news-row__meta {
  font-weight: 500;
  font-size: 12px;
  color: var(--gray-400);
}

/* ==================== PEOPLE PAGE ==================== */
.people-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 960px) {
  .people-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 560px) {
  .people-grid { grid-template-columns: 1fr; gap: 14px; }
  .people-grid-card__content { padding: 16px 18px; }
  .people-grid-card__image { aspect-ratio: 4 / 3; }
  .people-grid-card__image img { object-position: center top; }
}

.people-grid-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  border: var(--brand-border);
  background: var(--ink);
  color: var(--white);
  cursor: pointer;
  transition: transform 0.2s;
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.people-grid-card:hover { transform: translateY(-4px); }
.people-grid-card__image { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.people-grid-card__image img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.people-grid-card__overlay {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.35));
}

.people-grid-card__name { font-weight: 900; font-size: 20px; line-height: 1.15; color: var(--yellow); }
.people-grid-card__role { font-weight: 500; font-size: 13px; line-height: 1.4; color: rgba(255,255,255,0.8); }

/* ==================== STATS GRID ==================== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.stat-card {
  padding: 20px;
  border-radius: var(--radius-md);
  border: var(--brand-border);
  text-align: center;
}

.stat-card__num { font-weight: 900; font-size: 32px; line-height: 1; letter-spacing: -1px; }
.stat-card__label { font-weight: 700; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 4px; }

/* ==================== SEARCH RESULTS ==================== */
.search-result-row {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(17,17,17,0.08);
  align-items: center;
}

.search-result-row:last-child { border: none; }

/* ==================== PAGINATION ==================== */
.pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 24px 0;
}

.pagination__item {
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 13px;
  border: var(--brand-border-thin);
  transition: all 0.15s;
}

.pagination__item:hover { background: var(--cream); }
.pagination__item--active { background: var(--ink); color: var(--yellow); border-color: var(--ink); }
.pagination__dots { padding: 8px 14px; font-weight: 700; font-size: 13px; }

/* Mobile: Zurück/Weiter-Buttons nur als Pfeile (Text ausblenden), Pagination kompakt */
@media (max-width: 600px) {
  .pagination { gap: 4px; }
  .pagination__btn-label { display: none; }
  .pagination__btn { padding: 8px 12px; min-width: 36px; text-align: center; }
  .pagination__arrow { font-size: 18px; line-height: 1; }
}

/* ==================== INFO CARD (dark) ==================== */
.info-card {
  background: var(--ink);
  border-radius: var(--radius-lg);
  padding: 28px;
  color: var(--white);
}

.info-card__title { font-weight: 900; font-size: 18px; color: var(--yellow); margin-bottom: 16px; }
.info-card__item { font-weight: 400; font-size: 14px; color: rgba(255,255,255,0.8); margin-bottom: 8px; }

.info-card__socials {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.info-card__social {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  color: var(--white);
}

/* ==================== FILE UPLOAD ==================== */
.file-upload {
  border: 2px dashed var(--ink);
  border-radius: var(--radius-md);
  padding: 32px;
  text-align: center;
  background: var(--cream);
  cursor: pointer;
  transition: background 0.2s;
}

.file-upload:hover { background: var(--gray-100); }
.file-upload__icon { font-weight: 900; font-size: 28px; margin-bottom: 8px; }
.file-upload__text { font-weight: 600; font-size: 14px; }
.file-upload__hint { font-weight: 500; font-size: 12px; color: var(--gray-400); margin-top: 4px; }

/* ==================== ACCORDION ==================== */
.accordion-item {
  border-bottom: 1px solid rgba(17,17,17,0.1);
}

.accordion-item__header {
  display: flex;
  align-items: center;
  padding: 18px 0;
  cursor: pointer;
  gap: 16px;
}

.accordion-item__question {
  font-weight: 700;
  font-size: 16px;
  flex: 1;
}

.accordion-item__toggle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 18px;
  flex-shrink: 0;
  border: var(--brand-border-thin);
  background: var(--cream);
  transition: all 0.2s;
}

.accordion-item.is-open .accordion-item__toggle {
  background: var(--ink);
  color: var(--yellow);
}

.accordion-item__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion-item.is-open .accordion-item__body { max-height: 300px; }

.accordion-item__answer {
  padding-bottom: 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray-500);
}

/* ==================== LEGAL PAGES ==================== */
.legal-content {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 40px var(--side-padding);
}

.legal-section { margin-bottom: 32px; }
.legal-section__title { font-weight: 900; font-size: 18px; margin-bottom: 12px; }

.legal-section__text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--gray-600);
}

.legal-section__text p { margin-bottom: 12px; }

/* ==================== 404 PAGE ==================== */
.error-page {
  text-align: center;
  padding: 80px var(--side-padding) 60px;
}

.error-page__num { font-weight: 900; font-size: clamp(80px, 15vw, 140px); line-height: 1; }
.error-page__title { font-weight: 900; font-size: 24px; letter-spacing: 2px; margin: 16px 0; }
.error-page__text { font-weight: 500; font-size: 16px; color: var(--gray-600); margin-bottom: 24px; }

/* ==================== UTILITY ==================== */
.text-center { text-align: center; }
.text-white { color: var(--white); }
.text-ink { color: var(--ink); }
.text-yellow { color: var(--yellow); }
.text-gray { color: var(--gray-400); }
.mt-0 { margin-top: 0; }
.mt-md { margin-top: 16px; }
.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: 8px; }
.mb-md { margin-bottom: 16px; }
.mb-lg { margin-bottom: 24px; }
.mb-xl { margin-bottom: 32px; }
.pt-0 { padding-top: 0; }
.pb-0 { padding-bottom: 0; }
.gap-sm { gap: 8px; }
.gap-md { gap: 16px; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.w-full { width: 100%; }
.max-content { max-width: var(--content-max); margin-left: auto; margin-right: auto; }

/* ==================== PAGE HERO VARIANTS ==================== */
.page-hero--pink   { background: var(--pink);   color: var(--white); }
.page-hero--blue   { background: var(--blue);   color: var(--white); }
.page-hero--yellow { background: var(--yellow); color: var(--ink); }
.page-hero--dark   { background: var(--ink);    color: var(--white); }
.page-hero--mint   { background: var(--mint);   color: var(--ink); }

.page-hero__content {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 60px var(--side-padding);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.page-hero__subtitle {
  font-size: 18px;
  font-weight: 600;
  opacity: 0.85;
  margin: 0;
}

.page-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ink);
  color: var(--yellow);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: var(--brand-border-thin);
  width: fit-content;
}

.page-hero__icon {
  font-size: 48px;
  line-height: 1;
}

.page-hero__image {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: var(--brand-border);
  display: block;
}

.page-hero__search {
  display: flex;
  align-items: center;
  gap: 0;
  max-width: 520px;
  border: var(--brand-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--white);
}

.page-hero__search-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 12px 20px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
}

/* ==================== ARTICLE LAYOUT ==================== */
.article-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 40px var(--side-padding);
  align-items: start;
}

@media (min-width: 1060px) and (max-width: 1279px) {
  .article-layout { grid-template-columns: 1fr 180px; gap: 32px; }
}

@media (min-width: 920px) and (max-width: 1059px) {
  .article-layout { grid-template-columns: 1fr 140px; gap: 24px; }
}

@media (max-width: 919px) {
  .article-layout {
    grid-template-columns: 1fr;
    /* Mobile/Tablet: 40px vertikal bleibt, horizontal runter auf 12px
       damit Artikel-Content fast randlos ist (analog zu wl-Edge-Style). */
    padding: 32px 12px;
  }
  .article-layout__sidebar { display: none; }
}

.article-layout__main { min-width: 0; }

.article-layout__sidebar {
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.article-meta__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.article-meta__share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: var(--brand-border);
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.article-meta__share-btn:hover {
  background: var(--ink);
  color: var(--yellow);
}

/* ==================== ABOUT PAGE ==================== */
.about-content {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 40px var(--side-padding);
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 48px;
  align-items: start;
}

.about-content__main { min-width: 0; }

.about-content__sidebar {
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.about-content__heading {
  font-weight: 900;
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: -0.5px;
  margin-bottom: 16px;
}

.about-content__text {
  font-size: 16px;
  line-height: 1.75;
  color: var(--gray-600);
  margin-bottom: 20px;
}

.about-content__list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.about-content__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.about-content__list li::before {
  content: '→';
  color: var(--pink);
  font-weight: 900;
  flex-shrink: 0;
}

.about-team {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 40px var(--side-padding);
}

.about-team__title {
  font-weight: 900;
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: -0.5px;
  margin-bottom: 32px;
}

.about-team__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.about-team__member {
  border: var(--brand-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--cream);
  text-align: center;
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.about-team__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: var(--brand-border);
  object-fit: cover;
  background: var(--gray-100);
}

.about-team__name {
  font-weight: 900;
  font-size: 16px;
  color: var(--ink);
}

.about-team__role {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ==================== ACCORDION (new variant) ==================== */
.accordion {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.accordion__item {
  border: var(--brand-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--white);
}

.accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  font-family: inherit;
  font-weight: 800;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  background: var(--cream);
  border: none;
  width: 100%;
  text-align: left;
  transition: background 0.15s;
}

.accordion__summary::-webkit-details-marker { display: none; }
.accordion__summary::marker { display: none; }

.accordion__summary::after {
  content: '+';
  font-weight: 900;
  font-size: 20px;
  transition: transform 0.2s;
}

details[open] > .accordion__summary { background: var(--ink); color: var(--yellow); }
details[open] > .accordion__summary::after { content: '−'; }

.accordion__body {
  padding: 16px 20px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--gray-600);
  display: none;
}

details[open] > .accordion__body { display: block; }

/* ==================== BENEFITS GRID ==================== */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.benefit-card {
  border: var(--brand-border);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.benefit-card__icon {
  font-size: 36px;
  line-height: 1;
}

.benefit-card__title {
  font-weight: 900;
  font-size: 17px;
  color: var(--ink);
}

.benefit-card__text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--gray-600);
}

/* ==================== AUTH / LOGIN BUTTONS ==================== */
.btn--login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 20px;
  border: var(--brand-border);
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}

.btn--login:active { transform: translateY(2px); box-shadow: none !important; }

.btn--login-apple {
  background: var(--ink);
  color: var(--white);
  box-shadow: 3px 3px 0 var(--gray-700);
}
.btn--login-apple:hover { box-shadow: 5px 5px 0 var(--gray-700); transform: translate(-1px,-1px); }

.btn--login-google {
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--brand-shadow-sm);
}
.btn--login-google:hover { box-shadow: 5px 5px 0 var(--ink); transform: translate(-1px,-1px); }

/* E-Mail-Button: auf der gelben .comment-login-Flaeche war gelb-auf-gelb
   unlesbar. Jetzt inverted (ink-bg / yellow-text) — bleibt als starker
   Primary-CTA erkennbar und kontrastiert gegen beide Tenants. */
.btn--login-email {
  background: var(--ink);
  color: var(--yellow);
  box-shadow: var(--brand-shadow-sm);
}
.btn--login-email:hover { box-shadow: 5px 5px 0 var(--ink); transform: translate(-1px,-1px); }

.btn--outline {
  background: transparent;
  color: var(--ink);
  border: var(--brand-border);
  border-radius: var(--radius-pill);
  padding: 10px 22px;
  font-family: inherit;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s, color 0.15s;
}

.btn--outline:hover { background: var(--ink); color: var(--yellow); }

/* ==================== CARD EXTRAS ==================== */
.card__excerpt {
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray-600);
  margin: 6px 0 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-grid--related {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* ==================== COMMENT ENHANCEMENTS ==================== */
.comments-section {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 0;
}

.comment-form-wrap {
  border: var(--brand-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 32px;
  background: var(--cream);
}

.comment-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
}

.comment-form__textarea {
  width: 100%;
  border: var(--brand-border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  background: var(--white);
  resize: vertical;
  min-height: 120px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.comment-form__textarea:focus { border-color: var(--blue); }

.comment-form__textarea--sm { min-height: 72px; }

.comment-form__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.comment-form__hint {
  font-size: 12px;
  color: var(--gray-500);
  font-weight: 500;
}

.comment-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.comment-list--replies {
  margin-left: 48px;
  padding-left: 16px;
  border-left: 3px solid var(--gray-200);
  margin-top: 12px;
}

.comment-reply-form {
  margin-top: 12px;
  padding: 16px;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.comment-item__author {
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
}

.comment-item__avatar-letter {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--yellow);
  border: var(--brand-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 16px;
  color: var(--ink);
  flex-shrink: 0;
}

.comment-item__body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--gray-700);
}

.comment-item__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--gray-500);
  font-weight: 600;
}

.comment-login__text {
  font-size: 14px;
  color: var(--gray-600);
  font-weight: 500;
  text-align: center;
  padding: 20px;
}

.comments-empty {
  text-align: center;
  padding: 32px 20px;
  color: var(--gray-500);
  font-size: 14px;
  font-weight: 600;
}

/* ==================== CONTACT FORM ==================== */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 600px;
}

/* ==================== CTA BANNER DARK VARIANT ==================== */
.cta-banner--dark {
  background: var(--ink);
  color: var(--white);
}

.cta-banner--dark .cta-banner__title { color: var(--yellow); }

/* ==================== EMPTY STATE ==================== */
.empty-state {
  text-align: center;
  padding: 64px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.empty-state--dark {
  background: var(--ink);
  border-radius: var(--radius-md);
  color: var(--white);
}

.empty-state__text {
  font-weight: 800;
  font-size: 18px;
  color: var(--ink);
}

.empty-state--dark .empty-state__text { color: var(--yellow); }

.empty-state__hint {
  font-size: 14px;
  color: var(--gray-500);
  font-weight: 500;
  max-width: 360px;
}

.empty-state--dark .empty-state__hint { color: var(--gray-300); }

.empty-state__cats {
  font-size: 52px;
  line-height: 1;
}

/* ==================== ERROR PAGE EXTRAS ==================== */
.error-page__number {
  font-weight: 900;
  font-size: clamp(80px, 15vw, 160px);
  line-height: 1;
  color: var(--pink);
  letter-spacing: -4px;
}

.error-page__search {
  display: flex;
  align-items: center;
  gap: 0;
  max-width: 440px;
  margin: 0 auto;
  border: var(--brand-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--white);
}

.error-page__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

/* ==================== FILTER PILLS ==================== */
.filter-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 18px;
  border: var(--brand-border);
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  background: var(--white);
  cursor: default;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

a.filter-pill, button.filter-pill { cursor: pointer; }
a.filter-pill:hover, button.filter-pill:hover { background: var(--ink); color: var(--yellow); }

.filter-pill--active {
  background: var(--ink);
  color: var(--yellow);
}
.filter-pill--yellow {
  background: var(--yellow);
}
.filter-pill--mint {
  background: var(--mint);
}
.filter-pill--accent {
  background: var(--yellow);
  border-color: var(--ink);
  color: var(--ink);
  gap: 6px;
  box-shadow: var(--brand-shadow-sm);
  transition: transform 0.15s cubic-bezier(.2,.8,.2,1), box-shadow 0.15s;
}
a.filter-pill--accent:hover { background: var(--ink); color: var(--yellow); transform: translate(-2px,-2px); box-shadow: 5px 5px 0 rgba(0,0,0,0.25); }

/* ==================== FLASH MESSAGES ==================== */
.flash {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border: var(--brand-border);
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 20px;
}

.flash--success { background: var(--mint); color: var(--ink); }
.flash--error   { background: var(--pink); color: var(--white); }

/* ==================== FORM EXTRAS ==================== */
.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-row--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-grid__title {
  font-weight: 900;
  font-size: clamp(18px, 2.5vw, 24px);
  color: var(--ink);
  margin-bottom: 8px;
}

.form-grid__intro {
  font-size: 15px;
  color: var(--gray-600);
  line-height: 1.65;
  margin-bottom: 28px;
}

.form-grid__main {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-grid__sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 80px;
}

.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}

.form-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border: var(--brand-border-thin);
  border-radius: 4px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--white);
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  margin-top: 1px;
}

.form-checkbox input[type="checkbox"]:checked { background: var(--ink); }
.form-checkbox input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  color: var(--yellow);
  font-size: 12px;
  font-weight: 900;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ==================== INFO CARD EXTRAS ==================== */
.info-card--dark {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

.info-card--dark .info-card__label { color: var(--gray-400); }
.info-card--dark .info-card__value { color: var(--yellow); }

.info-card__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--gray-500);
}

.info-card__value {
  font-size: 22px;
  font-weight: 900;
  color: var(--ink);
  line-height: 1.2;
}

.info-card__divider {
  border: none;
  border-top: 2px solid var(--gray-200);
  margin: 12px 0;
}

.info-card--dark .info-card__divider { border-top-color: var(--gray-700); }

.info-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-card__list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}

.info-card__note {
  font-size: 12px;
  color: var(--gray-500);
  font-weight: 500;
  line-height: 1.5;
  margin-top: 8px;
}

/* ==================== JOB CARD EXTRAS ==================== */
.job-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.job-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.job-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.job-card__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray-600);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.job-card__cta {
  margin-top: auto;
  padding-top: 16px;
}

.job-card__info-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-600);
}

.job-card__logo-fallback {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--gray-200);
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 18px;
  color: var(--gray-500);
  flex-shrink: 0;
}

.job-card__company-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ==================== LEGAL EXTRAS ==================== */
.legal-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 32px;
  padding: 0;
  list-style: none;
}

.legal-nav__item a {
  display: inline-block;
  padding: 8px 18px;
  border: var(--brand-border);
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  background: var(--white);
  transition: background 0.15s, color 0.15s;
}

.legal-nav__item a:hover,
.legal-nav__item a[aria-current="page"] {
  background: var(--ink);
  color: var(--yellow);
}

.legal-list {
  padding-left: 20px;
  margin: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.legal-list li {
  font-size: 15px;
  line-height: 1.65;
  color: var(--gray-600);
}

/* ==================== NEWS EXTRAS ==================== */
.news-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.news-row__arrow {
  font-size: 20px;
  font-weight: 900;
  color: var(--gray-400);
  transition: color 0.15s, transform 0.15s;
  flex-shrink: 0;
}

.news-row:hover .news-row__arrow { color: var(--pink); transform: translateX(4px); }

.news-row__author {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.news-row__excerpt {
  font-size: 14px;
  color: var(--gray-600);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-row__read {
  font-size: 12px;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
  white-space: nowrap;
}

.news-row__read:hover { text-decoration: underline; }

/* ==================== NEWSLETTER HERO FORM ==================== */
/* ==================== NEWSLETTER LANDING (Pop-Art) ==================== */
.nl-hero {
  position: relative;
  background: var(--ink);
  color: var(--white);
  overflow: hidden;
  padding: 72px 0 64px;
  border-bottom: 4px solid var(--yellow);
}
.nl-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 2px 2px, rgba(255,255,255,0.07) 1.5px, transparent 0);
  background-size: 24px 24px;
  pointer-events: none;
}
.nl-hero__shapes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.nl-hero__shape { position: absolute; opacity: 0.55; }
.nl-hero__shape--1 { top: 10%; left: 6%; width: 68px; height: 68px; border-radius: 50%; background: var(--pink); animation: nl-float 9s ease-in-out infinite; }
.nl-hero__shape--2 { top: 68%; left: 12%; width: 90px; height: 90px; background: var(--yellow);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: nl-float 11s ease-in-out infinite reverse; }
.nl-hero__shape--3 { top: 20%; right: 10%; width: 110px; height: 110px; border: 4px solid var(--mint); border-radius: 50%; animation: nl-float 13s ease-in-out infinite; }
.nl-hero__shape--4 { top: 72%; right: 18%; width: 72px; height: 72px; background: var(--blue); transform: rotate(12deg); animation: nl-float 15s ease-in-out infinite reverse; }
@keyframes nl-float {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  50% { transform: translate(6px, -14px) rotate(10deg); }
}
@media (prefers-reduced-motion: reduce) { .nl-hero__shape { animation: none; } }

.nl-hero__inner {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--side-padding);
  text-align: center;
  z-index: 2;
}
.nl-hero__kicker {
  display: inline-block;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--ink);
  background: var(--yellow);
  padding: 6px 16px;
  border-radius: 50px;
  margin-bottom: 24px;
}
.nl-hero__title {
  font-weight: 900;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -1.5px;
  color: var(--white);
  margin: 0 0 16px;
}
.nl-hero__title .text-highlight {
  background-image: none;
  background-color: var(--yellow);
  color: var(--ink);
  padding: 2px 10px;
  border-radius: 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.nl-hero__subtitle {
  font-size: 17px;
  line-height: 1.5;
  color: rgba(255,255,255,0.8);
  font-weight: 500;
  margin: 0 auto 36px;
  max-width: 520px;
}

.nl-form {
  background: var(--white);
  color: var(--ink);
  border: 3px solid var(--yellow);
  border-radius: 24px;
  padding: 28px;
  max-width: 520px;
  margin: 0 auto;
  box-shadow: 8px 8px 0 var(--pink);
  text-align: left;
}
.nl-form__fields { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.nl-form__field { display: flex; flex-direction: column; gap: 6px; }
.nl-form__label {
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink);
}
.nl-form__optional { font-weight: 600; color: var(--gray-500); letter-spacing: 0.5px; text-transform: none; font-size: 11px; }
.nl-form__input {
  padding: 14px 16px;
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  background: var(--white);
  color: var(--ink);
  transition: box-shadow 0.15s, transform 0.1s;
  width: 100%;
}
.nl-form__input:focus {
  outline: none;
  box-shadow: var(--brand-shadow-md);
  transform: translate(-2px, -2px);
}
.nl-form__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 20px;
  background: var(--ink);
  color: var(--yellow);
  border: var(--brand-border);
  border-radius: 50px;
  font-family: inherit;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.nl-form__submit:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--pink);
  background: var(--pink);
  color: var(--white);
}
.nl-form__hint {
  margin: 14px 0 0;
  font-size: 11px;
  color: var(--gray-600);
  line-height: 1.5;
  text-align: center;
}
.nl-form__hint a { color: var(--ink); font-weight: 700; text-decoration: underline; }

.nl-hero__proof {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding: 10px 18px;
  background: rgba(255,255,255,0.08);
  border: 2px dashed rgba(255,220,0,0.4);
  border-radius: 50px;
  color: var(--white);
}
.nl-hero__proof-num { font-weight: 900; font-size: 22px; color: var(--yellow); letter-spacing: -0.5px; line-height: 1; }
.nl-hero__proof-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  background: var(--yellow);
  color: var(--ink);
  border-radius: 50%;
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
}
.nl-hero__proof-text { font-size: 11px; font-weight: 700; line-height: 1.3; text-align: left; color: rgba(255,255,255,0.85); text-transform: uppercase; letter-spacing: 1px; }

/* Benefits */
.nl-benefits { background: var(--cream); }
.nl-benefits__schedule {
  font-weight: 900; font-size: 11px; letter-spacing: 2px;
  color: var(--ink); background: var(--yellow);
  padding: 4px 12px; border: var(--brand-border-thin); border-radius: 50px;
  white-space: nowrap;
}
.nl-benefits__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.nl-benefit {
  position: relative;
  padding: 28px 24px 24px;
  border: var(--brand-border);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform 0.2s, box-shadow 0.2s;
  overflow: hidden;
}
.nl-benefit::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 8px;
  background: var(--nl-color, var(--pink));
}
.nl-benefit:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.nl-benefit--pink  { --nl-color: var(--pink); }
.nl-benefit--yellow { --nl-color: var(--yellow); }
.nl-benefit--blue  { --nl-color: var(--blue); }
.nl-benefit--mint  { --nl-color: var(--mint); }
.nl-benefit__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  background: var(--nl-color, var(--pink));
  color: var(--ink);
  border: var(--brand-border);
  border-radius: 16px;
  margin-bottom: 16px;
}
.nl-benefit--pink .nl-benefit__icon,
.nl-benefit--blue .nl-benefit__icon { color: var(--white); }
.nl-benefit__title {
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.3px;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.2;
}
.nl-benefit__text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-700);
  margin: 0;
  font-weight: 500;
}

@media (max-width: 1024px) {
  .nl-benefits__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .nl-benefits__grid { grid-template-columns: 1fr; }
}

/* CTA footer */
.nl-cta { background: var(--yellow); border-top: 4px solid var(--ink); }
.nl-cta__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: center;
  text-align: left;
}
.nl-cta__badge { flex-shrink: 0; }
.nl-cta__title { font-weight: 900; font-size: 32px; letter-spacing: -1px; color: var(--ink); margin: 0 0 4px; line-height: 1; }
.nl-cta__text { font-size: 15px; color: var(--ink); font-weight: 600; margin: 0; }
.nl-cta__btn { flex-shrink: 0; }

@media (max-width: 768px) {
  .nl-hero { padding: 48px 0 40px; }
  .nl-form { padding: 22px; }
  .nl-cta__inner { flex-direction: column; text-align: center; gap: 16px; }
  .nl-cta__title { font-size: 26px; }
  .nl-hero__shape { display: none; }
  .nl-hero__shape--1, .nl-hero__shape--3 { display: block; }
}

/* Legacy newsletter-hero-form (kept for backwards compat) */
.newsletter-hero-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 480px;
}

.newsletter-hero-form__row {
  display: flex;
  gap: 0;
  border: var(--brand-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--white);
}

.newsletter-hero-form__hint {
  font-size: 12px;
  font-weight: 600;
  color: inherit;
  opacity: 0.7;
  padding: 0 4px;
}

/* ==================== PAGINATION EXTRAS ==================== */
.pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border: var(--brand-border);
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
  background: var(--white);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.pagination__btn:hover { background: var(--ink); color: var(--yellow); }

/* Pfeile kommen aus dem HTML (.pagination__arrow), kein doppeltes Pseudo-Element */

.pagination__btn--disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
}

.pagination__pages {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: var(--brand-border);
  border-radius: 50%;
  font-family: inherit;
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
  background: var(--white);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.pagination__page:hover { background: var(--ink); color: var(--yellow); }

.pagination__page--active {
  background: var(--ink);
  color: var(--yellow);
}

.pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  font-weight: 700;
  color: var(--gray-400);
}

/* ==================== PEOPLE CARD EXTRAS ==================== */
.people-grid-card__content {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.people-grid-card__category {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--pink);
}

.people-grid-card__cta {
  margin-top: auto;
  padding-top: 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--yellow);
  text-transform: uppercase;
}

/* ==================== SEARCH RESULTS ==================== */
.search-results-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.search-results-header__count {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-500);
}

/* ==================== SHARE EXTRAS ==================== */
.share-bar__buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.share-sticky__label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--gray-400);
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.share-sticky__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: var(--brand-border);
  border-radius: 50%;
  text-decoration: none;
  font-size: 16px;
  font-weight: 900;
  color: var(--white);
  transition: transform 0.15s, box-shadow 0.15s;
  cursor: pointer;
  background: var(--ink);
}

.share-sticky__btn:hover { transform: translate(-2px, -2px); box-shadow: var(--brand-shadow-sm); }

.share-sticky__btn--li  { background: #0A66C2; border-color: #0A66C2; }
.share-sticky__btn--x   { background: var(--ink); border-color: var(--ink); }
.share-sticky__btn--wa  { background: #25D366; border-color: #25D366; }
.share-sticky__btn--copy { background: var(--gray-300); color: var(--ink); border-color: var(--gray-400); }

/* ==================== SOCIAL PROOF ==================== */
.social-proof {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.social-proof__number {
  font-weight: 900;
  font-size: 28px;
  color: var(--ink);
  letter-spacing: -0.5px;
}

.social-proof__text {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-600);
}

/* ==================== STAT CARD EXTRAS ==================== */
.stat-card__number {
  font-weight: 900;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -1px;
}

/* ==================== MOST-READ EXTRAS ==================== */
.most-read__content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1024px) {
  .featured__grid { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .cta-banner { flex-direction: column; text-align: center; }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .jobs-grid { grid-template-columns: 1fr; }
  .comments-grid { grid-template-columns: 1fr; }

  /* New layout overrides at tablet */
  .article-layout { grid-template-columns: 1fr; }
  .article-layout__sidebar { position: static; }
  .about-content { grid-template-columns: 1fr; }
  .about-content__sidebar { position: static; }
  .about-team__grid { grid-template-columns: repeat(2, 1fr); }
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid--related { grid-template-columns: repeat(2, 1fr); }
  .job-grid { grid-template-columns: 1fr; }
}

/* Tablet + Mobile: einheitlich 20px Gutter — klassisch lesbar, genug
   Content-Breite, konsistent zum wl-Stil. */
@media (max-width: 1199px) {
  :root { --side-padding: 20px; }
}

@media (max-width: 768px) {
  :root {
    --side-padding: 20px;
  }

  /* Vertikale Section-Paddings mobile tighter — 40px top+bottom pro
     Section waren zusammengerechnet fast 80px leerraum zwischen jeder
     Inhaltszeile. Alle grossen Section-Container runter auf 24px vertikal. */
  .section-pad { padding-top: 24px; padding-bottom: 24px; }
  .hero__inner { padding-top: 16px; padding-bottom: 16px; }
  .people-spotlight__inner { padding-top: 28px; padding-bottom: 28px; }
  .category-slider__inner { padding-top: 16px; padding-bottom: 12px; }
  .article-layout { padding-top: 24px; padding-bottom: 24px; }

  /* Header mobile: Logo flush-left, Actions flush-right, beides mit 16px
     Abstand zum Viewport-Rand. Padding explizit, weil die 1199px-Regel
     sonst tablet-48px schlagen koennte (safety net bei CSS-Reihenfolge). */
  .header__inner {
    padding: 12px 16px;
    justify-content: space-between;
  }
  .header__nav { display: none; }
  .header__logo { flex: 0 0 auto; }
  .header__actions { gap: 10px; margin-left: 0; flex-shrink: 0; }
  .header__search-btn { font-size: 10px; }

  .hero { min-height: 480px; height: 480px; }
  .hero__inner { flex-direction: column; padding: 20px var(--side-padding); min-height: 480px; height: 480px; gap: 16px; }
  .hero__image { width: 100%; height: 180px; order: -1; flex-shrink: 0; }
  .hero__image img { height: 180px; }
  /* Mobile: flex-column mit Button unten fixiert. Subtitle ist der einzige
     Item der schrumpfen darf (flex:1 + min-height:0 + line-clamp) — so bleibt
     die Hero-Hoehe pro Slide identisch, auch wenn der Text unterschiedlich
     lang ist. Der Button sitzt ueber margin-top:auto am unteren Rand. */
  .hero__content { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  /* flex-column streckt Kinder per default — Tag + CTA sollen nur so breit sein
     wie ihr Inhalt, nicht volle Content-Breite. */
  .hero__tag { flex-shrink: 0; align-self: flex-start; }
  .hero__content > a.btn { margin-top: auto; flex-shrink: 0; align-self: flex-start; }
  .hero__title {
    font-size: 22px; letter-spacing: -1px; flex-shrink: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin-bottom: 10px;
  }
  .hero__subtitle {
    font-size: 14px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin-bottom: 12px;
    flex: 1 1 auto;
    min-height: 0;
  }

  .quick-links__grid {
    display: flex;
    grid-template-columns: none;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
    padding: 4px 2px 10px;
    scrollbar-width: thin;
  }
  .quick-links__grid::-webkit-scrollbar { height: 4px; }
  .quick-links__grid::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 2px; }
  .quick-link { padding: 12px 10px; flex: 0 0 auto; min-width: 100px; }
  .quick-link__icon { width: 36px; height: 36px; font-size: 16px; }
  .quick-link__label { font-size: 9px; }

  .card-grid { grid-template-columns: 1fr; }
  .tabs { gap: 6px; }
  .tab { padding: 8px 14px; font-size: 10px; }

  .newsletter__form { flex-direction: column; align-items: stretch; }
  .newsletter__input { width: 100%; }

  .people-card { min-width: 200px; max-width: 240px; height: 340px; aspect-ratio: 2/3; }

  .job-card { flex-direction: column; }
  .job-card__image { width: 100%; height: 140px; }

  .footer__grid { grid-template-columns: 1fr; gap: 20px; }
  .footer__bottom { flex-direction: column; gap: 8px; text-align: center; }

  .category-card { min-width: 160px; max-width: calc(100vw - 80px); width: 70vw; height: 180px; }

  .breadcrumbs__inner { padding: 10px var(--side-padding); }

  /* New class mobile overrides */
  .page-hero__content { padding: 36px var(--side-padding); }
  .about-team__grid { grid-template-columns: 1fr; }
  .benefits-grid { grid-template-columns: 1fr; }
  .card-grid--related { grid-template-columns: 1fr; }
  .form-row--split { grid-template-columns: 1fr; gap: 16px; }
  .newsletter-hero-form { max-width: 100%; }
  .newsletter-hero-form__row { flex-direction: column; border-radius: var(--radius-md); }
  .filter-pills { gap: 6px; }
  .share-bar__buttons { gap: 6px; }
  .error-page__actions { flex-direction: column; align-items: center; }
}

/* ==================== ANIMATIONS ==================== */

/* Scroll-triggered fade-in-up */
.anim-fade-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1);
}

.anim-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children */
.anim-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1), transform 0.5s cubic-bezier(0.16,1,0.3,1);
}

.anim-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.anim-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; }
.anim-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }
.anim-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
.anim-stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; }
.anim-stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; }

.anim-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Scale-in for cards on hover */
.anim-scale-in {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16,1,0.3,1);
}

.anim-scale-in.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Slide-in from left */
.anim-slide-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1);
}

.anim-slide-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Slide-in from right */
.anim-slide-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1);
}

.anim-slide-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Hero text reveal */
.anim-hero-text {
  opacity: 0;
  transform: translateY(20px);
  animation: hero-text-in 0.8s cubic-bezier(0.16,1,0.3,1) forwards;
}

.anim-hero-text:nth-child(2) { animation-delay: 0.15s; }
.anim-hero-text:nth-child(3) { animation-delay: 0.3s; }
.anim-hero-text:nth-child(4) { animation-delay: 0.45s; }

@keyframes hero-text-in {
  to { opacity: 1; transform: translateY(0); }
}

/* Counter number animation */
.anim-counter {
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.anim-counter.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Bounce-in for badges/tags */
.anim-bounce-in {
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.anim-bounce-in.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Smooth underline grow on links */
.anim-underline {
  position: relative;
}

.anim-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--yellow);
  border-radius: 2px;
  transition: width 0.3s cubic-bezier(0.16,1,0.3,1);
}

.anim-underline:hover::after { width: 100%; }

/* Button press effect */
.btn {
  transition: transform 0.15s, box-shadow 0.15s;
}

.btn:active {
  transform: translateY(2px) !important;
  box-shadow: none !important;
}

/* Card tilt on hover (subtle) */
.card--standard:hover {
  transform: translateY(-6px) rotate(-0.5deg);
  box-shadow: 6px 8px 0 var(--ink);
}

/* People card zoom */
.people-card:hover img {
  transform: scale(1.08);
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}

.people-card img {
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}

/* Category card pop */
.category-card:hover {
  transform: scale(1.04) rotate(0.5deg);
  box-shadow: 4px 6px 0 var(--ink);
}

/* Quick link wiggle on hover */
.quick-link:hover {
  transform: translateY(-6px) rotate(-2deg);
  box-shadow: var(--brand-shadow-md);
}

/* Smooth section divider dots */
.divider__dot {
  transition: transform 0.3s ease;
}

.divider-section:hover .divider__dot:nth-child(odd) {
  transform: rotate(45deg) scale(1.3);
}

.divider-section:hover .divider__dot:nth-child(even) {
  transform: rotate(45deg) scale(0.8);
}

/* Header nav link hover */
.header__nav a {
  position: relative;
}

.header__nav a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--yellow);
  border-radius: 1px;
  transition: width 0.25s cubic-bezier(0.16,1,0.3,1);
}

.header__nav a:hover::after { width: 100%; }

/* Most-read number pop */
.most-read__num {
  transition: transform 0.2s ease, color 0.2s;
}

.most-read__item:hover .most-read__num {
  transform: scale(1.15);
}

/* Smooth scroll behavior */
html { scroll-behavior: smooth; }

/* Reduce motion for accessibility */
/* prefers-reduced-motion: all animations run by default.
   Users who want reduced motion can add ?reduced-motion=1 to URL */

/* ==================== FAVORITES ==================== */
.favorites-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--yellow);
  font-size: 18px;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
}

.favorites-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--pink);
  color: var(--white);
  font-weight: 900;
  font-size: 9px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

[data-save-job] {
  cursor: pointer;
  transition: transform 0.2s;
}

[data-save-job].is-saved .save-icon { color: var(--pink); }
[data-save-job].is-saved { border-color: var(--pink); }

/* ==================== TOAST ==================== */
.toast-notification {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: var(--yellow);
  font-weight: 700;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  z-index: 5000;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}

.toast-notification.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ==================== VIEW-SPECIFIC CLASSES ==================== */

/* Section subtitle / labels */
.section-label {
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 2px;
  margin-bottom: 14px;
  text-transform: uppercase;
}

.section-subtitle {
  font-weight: 500;
  font-size: 15px;
  color: var(--gray-700);
  margin-bottom: 20px;
}

/* List styles */
.check-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.check-list__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
}

.check-list__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.check-list__dot--pink { background: var(--pink); }
.check-list__dot--green { background: var(--success); }
.check-list__dot--blue { background: var(--blue); }

/* Job Detail CTA card */
.job-cta-card {
  background: var(--yellow);
  border: var(--brand-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  position: sticky;
  top: 80px;
}

.job-cta-card__title {
  font-weight: 900;
  font-size: 18px;
  margin-bottom: 12px;
}

.job-cta-card__text {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-700);
  margin-bottom: 16px;
}

.job-cta-card__divider {
  border-top: var(--brand-border-thin);
  margin-top: 20px;
  padding-top: 16px;
}

.job-cta-card__company-label {
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.job-cta-card__company-name {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
}

.job-cta-card__company-location {
  font-weight: 600;
  font-size: 13px;
  color: var(--gray-600);
}

/* Job meta row */
.job-meta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.job-logo--lg {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  font-size: 14px;
}

/* Job post CTA section */
.job-post-cta {
  background: var(--yellow);
  border: var(--brand-border);
  border-radius: var(--radius-lg);
  padding: 40px;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.job-post-cta__title {
  font-weight: 900;
  font-size: 24px;
  margin-bottom: 12px;
}

.job-post-cta__text {
  font-weight: 500;
  font-size: 15px;
  color: var(--gray-700);
  margin-bottom: 20px;
}

.job-post-cta__buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.job-post-cta__price {
  font-weight: 500;
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 12px;
}

/* Saved jobs empty state */
.saved-empty__icon {
  font-size: 48px;
  margin-bottom: 16px;
}

/* Jobs grid 3-col variant */
.jobs-grid--3col {
  grid-template-columns: repeat(3, 1fr);
}

/* Home sections padding helpers */
.section-pad--sm { padding-top: 32px; padding-bottom: 32px; }
.section-pad--flush-bottom { padding-bottom: 0; }

/* Hero search form */
.hero-search-form {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  max-width: 500px;
}

.hero-search-input {
  flex: 1;
  border-radius: var(--radius-pill);
  border: 2px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.15);
  color: var(--white);
  padding: 12px 20px;
  font-size: 15px;
  font-family: inherit;
  outline: none;
}

.hero-search-input::placeholder { color: rgba(255,255,255,0.6); }
.hero-search-input:focus { border-color: var(--yellow); }

/* People spotlight section header overrides */
.section-header--dark .section-header__line {
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.12) 0, rgba(255,255,255,0.12) 6px, transparent 6px, transparent 10px);
}

/* Job description block */
.job-description {
  font-size: 16px;
  line-height: 1.7;
  color: var(--gray-700);
}

/* Filter results count */
.filter-count {
  font-weight: 700;
  font-size: 13px;
  color: var(--gray-400);
  margin-top: 16px;
}

/* Color utilities for dynamic bg */
.bg-dynamic { /* applied via inline style="background:..." - only exception */ }

@media (max-width: 768px) {
  .jobs-grid--3col { grid-template-columns: 1fr; }
  .hero-search-form { flex-direction: column; }
  .job-post-cta { padding: 24px; }
  .job-post-cta__buttons { flex-direction: column; }
}

/* ===== CALCULATOR (article_type=calculator) ===== */
.td-calc {
  margin: 32px 0;
  border: 3px solid var(--ink, #111);
  border-radius: 10px;
  background: #fff;
  box-shadow: 6px 6px 0 0 var(--ink, #111);
  overflow: hidden;
}
.td-calc__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: var(--yellow, #FFDC00);
  border-bottom: 3px solid var(--ink, #111);
}
.td-calc__badge {
  display: inline-block;
  padding: 3px 10px;
  background: var(--ink, #111);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
  border-radius: 3px;
}
.td-calc__title {
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.3px;
}
.td-calc__body {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
}
.td-calc__fields {
  padding: 22px;
  border-right: 2px solid var(--ink, #111);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.td-calc__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.td-calc__field-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #504C42;
}
.td-calc__field-unit {
  color: #969288;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.td-calc__field-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 16px;
  font-weight: 700;
  border: 2px solid var(--ink, #111);
  border-radius: 6px;
  background: #faf7f1;
  font-variant-numeric: tabular-nums;
  transition: background 0.15s, box-shadow 0.15s;
}
.td-calc__field-input:focus {
  outline: none;
  background: #fff;
  box-shadow: 3px 3px 0 0 var(--ink, #111);
}
.td-calc__field-hint {
  font-size: 11px;
  color: #6E6A60;
  font-style: italic;
}
.td-calc__result {
  padding: 22px;
  background: var(--ink, #111);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.td-calc__result-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.td-calc__result-value {
  font-size: 44px;
  font-weight: 900;
  color: var(--yellow, #FFDC00);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  word-break: break-word;
}
.td-calc__result-explain {
  font-size: 12px;
  color: rgba(255,255,255,0.8);
  line-height: 1.5;
  margin-top: 6px;
}
.td-calc__result-hint {
  font-size: 11px;
  color: rgba(255,220,0,0.75);
  line-height: 1.4;
  margin-top: 10px;
  font-style: italic;
  border-top: 1px dashed rgba(255,220,0,0.3);
  padding-top: 8px;
}
@media (max-width: 640px) {
  .td-calc__body { grid-template-columns: 1fr; }
  .td-calc__fields { border-right: 0; border-bottom: 2px solid var(--ink, #111); }
  .td-calc__result-value { font-size: 36px; }
}

/* ===== SALARY REPORT ===== */
.td-salary { margin: 32px 0; border: 3px solid var(--ink, #111); border-radius: 10px; background: #fff; box-shadow: 6px 6px 0 0 var(--ink, #111); overflow: hidden; }
.td-salary__head { background: var(--yellow, #FFDC00); padding: 14px 20px; border-bottom: 3px solid var(--ink, #111); display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.td-salary__badge { font-weight: 900; font-size: 14px; letter-spacing: 2px; color: var(--ink, #111); }
.td-salary__source { font-size: 11px; color: #504C42; }
.td-salary__filters { display: flex; gap: 18px; padding: 16px 20px; border-bottom: 1px solid #E6E3DA; flex-wrap: wrap; background: #faf7f1; }
.td-salary__filters label { font-size: 11px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: #504C42; display: flex; flex-direction: column; gap: 4px; }
.td-salary__filters select { padding: 6px 10px; border: 2px solid var(--ink, #111); border-radius: 4px; background: #fff; font-size: 13px; font-weight: 700; }
.td-salary__table-wrap { overflow-x: auto; }
.td-salary__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.td-salary__table th { background: #111; color: #fff; font-size: 11px; font-weight: 900; letter-spacing: 1.5px; padding: 10px 12px; text-align: left; cursor: pointer; user-select: none; white-space: nowrap; }
.td-salary__table th:hover { background: #23211C; }
.td-salary__table th.num, .td-salary__table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.td-salary__table td { padding: 10px 12px; border-bottom: 1px solid #E6E3DA; }
.td-salary__table tr:hover td { background: #FFFCF2; }

/* ===== COMPARISON TABLE ===== */
.td-compare { margin: 32px 0; border: 3px solid var(--ink, #111); border-radius: 10px; background: #fff; box-shadow: 6px 6px 0 0 var(--ink, #111); overflow: hidden; }
.td-compare__head { background: #2d4d28; color: #fff; padding: 14px 20px; border-bottom: 3px solid var(--ink, #111); display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.td-compare__badge { font-weight: 900; font-size: 14px; letter-spacing: 2px; }
.td-compare__updated { font-size: 11px; opacity: 0.85; }
.td-compare__table-wrap { overflow-x: auto; }
.td-compare__table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 600px; }
.td-compare__table th { background: #111; color: #fff; font-size: 10px; font-weight: 900; letter-spacing: 1.5px; padding: 10px 12px; text-align: left; cursor: pointer; user-select: none; white-space: nowrap; }
.td-compare__table th.num { text-align: right; }
.td-compare__table th:hover { background: #23211C; }
.td-compare__table td { padding: 10px 12px; border-bottom: 1px solid #E6E3DA; }
.td-compare__table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.td-compare__table tr:hover td { background: #FFFCF2; }
.td-compare__yes { color: #00C853; font-weight: 900; font-size: 16px; }
.td-compare__no { color: #C8C4B8; }
.td-compare__stars { letter-spacing: 2px; color: #FFDC00; text-shadow: 0 0 0 #111; }

/* ===== CHECKLIST ===== */
.td-checklist { margin: 32px 0; border: 3px solid var(--ink, #111); border-radius: 10px; background: #fff; box-shadow: 6px 6px 0 0 var(--ink, #111); overflow: hidden; }
.td-checklist__head { background: #00D2BE; padding: 14px 20px; border-bottom: 3px solid var(--ink, #111); display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.td-checklist__badge { font-weight: 900; font-size: 14px; letter-spacing: 2px; color: var(--ink, #111); }
.td-checklist__progress { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 180px; }
.td-checklist__bar { flex: 1; height: 10px; background: rgba(0,0,0,0.15); border: 2px solid var(--ink, #111); border-radius: 50px; overflow: hidden; }
.td-checklist__fill { height: 100%; background: var(--ink, #111); width: 0%; transition: width 0.3s; }
.td-checklist__count { font-size: 13px; font-weight: 900; color: var(--ink, #111); font-variant-numeric: tabular-nums; }
.td-checklist__reset { background: #fff; border: 2px solid var(--ink, #111); border-radius: 4px; padding: 6px 12px; font-size: 11px; font-weight: 900; letter-spacing: 1px; cursor: pointer; }
.td-checklist__reset:hover { background: var(--ink, #111); color: #fff; }
.td-checklist__sections { padding: 8px 0; }
.td-checklist__section { padding: 16px 22px; border-bottom: 1px solid #E6E3DA; }
.td-checklist__section:last-child { border-bottom: 0; }
.td-checklist__section-title { font-size: 16px; font-weight: 900; margin-bottom: 8px; color: var(--ink, #111); }
.td-checklist__section-intro { font-size: 13px; color: #504C42; margin-bottom: 12px; }
.td-checklist__items { list-style: none; padding: 0; margin: 0; }
.td-checklist__item { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; }
.td-checklist__item input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--ink, #111); cursor: pointer; flex-shrink: 0; }
.td-checklist__item label { flex: 1; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.td-checklist__item input:checked ~ label .td-checklist__item-text { text-decoration: line-through; color: #969288; }
.td-checklist__item-text { font-size: 15px; color: var(--ink, #111); }
.td-checklist__item-hint { font-size: 12px; color: #6E6A60; font-style: italic; }

/* Success-Panel — eingeblendet, wenn alle Items abgehakt sind. */
.td-checklist__success {
  position: relative;
  margin: 20px 20px 24px;
  padding: 18px 22px;
  background: linear-gradient(135deg, #FFDC00 0%, #00D2BE 100%);
  border: 3px solid var(--ink, #111);
  border-radius: 10px;
  box-shadow: 6px 6px 0 0 var(--ink, #111);
  display: flex;
  align-items: center;
  gap: 16px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.td-checklist__success.is-open { opacity: 1; transform: translateY(0) scale(1); }
.td-checklist__success-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 8px;
  color: var(--ink, #111);
  background: #fff;
  border: 3px solid var(--ink, #111);
  border-radius: 50%;
  box-shadow: 3px 3px 0 0 var(--ink, #111);
}
.td-checklist__success.is-celebrating .td-checklist__success-icon {
  animation: tdChecklistPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.td-checklist__success-body { flex: 1; min-width: 0; }
.td-checklist__success-title {
  display: block;
  font-weight: 900;
  font-size: 17px;
  letter-spacing: 0.3px;
  color: var(--ink, #111);
  margin-bottom: 4px;
}
.td-checklist__success-msg {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink, #111);
}
/* Sparkle-Punkte, die beim Einblenden wegfliegen. */
.td-checklist__success-sparkle {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.td-checklist__success-sparkle span {
  position: absolute;
  left: 38px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink, #111);
  opacity: 0;
}
.td-checklist__success.is-celebrating .td-checklist__success-sparkle span {
  animation: tdChecklistSparkle 0.9s ease-out forwards;
}
.td-checklist__success-sparkle span:nth-child(1) { --dx:  60px; --dy: -40px; animation-delay: 0.05s; background: #FF3864; }
.td-checklist__success-sparkle span:nth-child(2) { --dx: 110px; --dy: -10px; animation-delay: 0.10s; background: var(--ink, #111); }
.td-checklist__success-sparkle span:nth-child(3) { --dx:  80px; --dy:  40px; animation-delay: 0.15s; background: #2d4d28; }
.td-checklist__success-sparkle span:nth-child(4) { --dx:  -20px; --dy: -55px; animation-delay: 0.08s; background: var(--ink, #111); }
.td-checklist__success-sparkle span:nth-child(5) { --dx:  140px; --dy: -30px; animation-delay: 0.18s; background: #FFDC00; }
.td-checklist__success-sparkle span:nth-child(6) { --dx:  30px; --dy:  55px; animation-delay: 0.12s; background: #FF3864; }

@keyframes tdChecklistPop {
  0%   { transform: scale(0.6)  rotate(-8deg); }
  55%  { transform: scale(1.25) rotate(6deg); }
  100% { transform: scale(1)    rotate(0deg); }
}
@keyframes tdChecklistSparkle {
  0%   { opacity: 0; transform: translate(0, 0)       scale(0.4); }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .td-checklist__success { transition: opacity 0.2s ease, transform 0s; }
  .td-checklist__success.is-celebrating .td-checklist__success-icon,
  .td-checklist__success.is-celebrating .td-checklist__success-sparkle span { animation: none; }
}
@media (max-width: 600px) {
  .td-checklist__success { margin: 16px 16px 20px; padding: 14px 16px; flex-direction: column; align-items: flex-start; text-align: left; }
}

/* Moderner Confirm-Dialog — ersetzt window.confirm().
   Fade + Scale-In, Blur-Backdrop, Focus-Trap, prefers-reduced-motion-aware. */
.td-confirm {
  position: fixed;
  inset: 0;
  background: rgba(17, 17, 17, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.td-confirm.is-open { opacity: 1; }
.td-confirm__panel {
  max-width: 440px;
  width: 100%;
  background: #fff;
  border: 3px solid var(--ink, #111);
  border-radius: 12px;
  box-shadow: 8px 8px 0 0 var(--ink, #111);
  padding: 28px 28px 22px;
  transform: translateY(24px) scale(0.92);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.td-confirm.is-open .td-confirm__panel { transform: translateY(0) scale(1); }
.td-confirm__title {
  display: block;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.2px;
  color: var(--ink, #111);
  margin-bottom: 10px;
}
.td-confirm__msg {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.5;
  color: #504C42;
}
.td-confirm__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.td-confirm__btn {
  padding: 11px 20px;
  border: 2px solid var(--ink, #111);
  border-radius: 8px;
  background: #fff;
  color: var(--ink, #111);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.td-confirm__btn:hover { transform: translateY(-1px); box-shadow: 3px 3px 0 0 var(--ink, #111); }
.td-confirm__btn:active { transform: translateY(0); box-shadow: 1px 1px 0 0 var(--ink, #111); }
.td-confirm__btn:focus-visible { outline: 3px solid var(--yellow, #FFDC00); outline-offset: 2px; }
.td-confirm__btn--cancel { background: #faf7f1; }
.td-confirm__btn--cancel:hover { background: #F2EFE6; }
.td-confirm__btn--primary { background: var(--ink, #111); color: #fff; }
.td-confirm__btn--primary:hover { background: #000; }
.td-confirm__btn--destructive { background: #FF3864; color: #fff; border-color: var(--ink, #111); }
.td-confirm__btn--destructive:hover { background: #E62F57; }

@media (prefers-reduced-motion: reduce) {
  .td-confirm,
  .td-confirm__panel { transition: opacity 0.1s ease, transform 0s; }
  .td-confirm__btn { transition: background-color 0.1s ease, color 0.1s ease; }
}
@media (max-width: 420px) {
  .td-confirm__panel { padding: 22px 20px 18px; }
  .td-confirm__actions { flex-direction: column-reverse; }
  .td-confirm__btn { width: 100%; }
}

/* CAREER-JOBS: passende Jobs auf Berufsseite */
.career-jobs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.career-job-card { display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border: 2px solid #E6E3DA; border-radius: 14px; background: #fff; text-decoration: none; color: inherit; transition: transform 0.15s cubic-bezier(.2,.8,.2,1), border-color 0.15s, box-shadow 0.15s; }
.career-job-card:hover { transform: translateY(-3px); border-color: #111; box-shadow: 5px 5px 0 #111; }
.career-job-card__logo { width: 48px; height: 48px; border-radius: 10px; background: #FFDC00; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 15px; color: #111; overflow: hidden; }
.career-job-card__logo img { width: 100%; height: 100%; object-fit: cover; }
.career-job-card__company { font-size: 10px; font-weight: 900; letter-spacing: 1.5px; color: #6E6A60; text-transform: uppercase; margin-bottom: 2px; }
.career-job-card__title { font-weight: 800; font-size: 14px; line-height: 1.25; color: #111; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.career-job-card__meta { font-size: 11px; color: #6E6A60; margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; font-weight: 600; }
.career-job-card__cta { color: #969288; transition: color 0.15s, transform 0.15s; }
.career-job-card:hover .career-job-card__cta { color: #111; transform: translate(2px,-2px); }
/* FAQ ALWAYS-OPEN VARIANT (SEO-safe, DOM-visible) */
/* FAQ Always-Open — <h3> statt <summary>, proportional zur Box */
.faq-item--open { padding: 16px 20px; }
.faq-item--open .faq-item__q {
  cursor: default; padding: 0 0 10px 0;
  font-weight: 900; font-size: 15px; line-height: 1.3;
  margin: 0; letter-spacing: -0.2px;
}
.faq-item--open .faq-item__q::after { content: none; }
.faq-item--open .faq-item__a {
  padding: 0; margin: 0;
  font-size: 14px; line-height: 1.65; color: #37342C;
}
.faq-item--open .faq-item__a > div { display: block; }
.faq-item--open .faq-item__a p { margin: 0 0 8px; }
.faq-item--open .faq-item__a p:last-child { margin-bottom: 0; }

/* Decision-Matrix: kein doppelter Rahmen, wenn sie in article-body steht */
.article-body .decision-matrix { margin: 32px 0; }
.article-body .decision-matrix .decision-matrix__cell { font-size: 13px; line-height: 1.4; }
@media (max-width: 720px) {
  /* Auf Mobile: horizontal scrollbar via Wrapper fallback via overflow am table */
  .decision-matrix { display: block; overflow-x: auto; }
  .decision-matrix__head, .decision-matrix__row { display: table; width: 100%; min-width: 540px; }
  .decision-matrix__cell { font-size: 12px; padding: 10px 12px; }
  .decision-matrix__value-num { font-size: 13px; }
  .decision-matrix__value-desc { font-size: 11px; }
}

/* AUSBILDUNG HUB SPOKES */
.ausbildung-spokes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.ausbildung-spoke-card {
  position: relative; background: #fff;
  border: var(--brand-border); border-radius: 16px;
  text-decoration: none; color: #111; overflow: hidden;
  transition: transform 0.18s cubic-bezier(.2,.8,.2,1), box-shadow 0.18s, background 0.15s;
  box-shadow: var(--brand-shadow-md);
  display: flex; flex-direction: column;
}
.ausbildung-spoke-card:hover { transform: translate(-3px,-3px); box-shadow: var(--brand-shadow-xl); background: #FFF9D5; }
.ausbildung-spoke-card__image { aspect-ratio: 16/9; overflow: hidden; background: #F5F2EA; border-bottom: var(--brand-border); }
.ausbildung-spoke-card__image img, .ausbildung-spoke-card__image picture { width: 100%; height: 100%; object-fit: cover; display: block; }
.ausbildung-spoke-card__body { padding: 18px 22px 52px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ausbildung-spoke-card h3 { font-weight: 900; font-size: 17px; line-height: 1.25; margin: 0; letter-spacing: -0.3px; }
.ausbildung-spoke-card p { font-size: 13px; line-height: 1.45; color: #504C42; margin: 0; }
.ausbildung-spoke-card__cta { position: absolute; bottom: 16px; right: 18px; color: #111; display: inline-flex; transition: transform 0.15s; }
.ausbildung-spoke-card:hover .ausbildung-spoke-card__cta { transform: translate(3px,-3px); }

/* Page-Hero mit Bild (Ausbildungs-Hub) */
.page-hero--with-image .page-hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.page-hero--with-image .page-hero__image { border: var(--brand-border); border-radius: 20px; overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--brand-shadow-lg); }
.page-hero--with-image .page-hero__image img, .page-hero--with-image .page-hero__image picture { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 768px) { .page-hero--with-image .page-hero__inner { grid-template-columns: 1fr; } }

/* AUSBILDUNG MODULE: Steckbrief, Lehrjahr-Timeline, Gehalts-Vergleich */
.steckbrief {
  background: #FFFCF2; border: 2.5px solid #111; border-radius: 14px;
  padding: 20px 24px; margin: 28px 0;
  box-shadow: var(--brand-shadow-md);
}
.steckbrief__title { font-weight: 900; font-size: 11px; letter-spacing: 2px; margin-bottom: 14px; display: block; }
.steckbrief dl { margin: 0; display: grid; grid-template-columns: minmax(140px, auto) 1fr; gap: 8px 18px; }
.steckbrief dt { font-weight: 700; font-size: 13px; color: #504C42; }
.steckbrief dd { margin: 0; font-weight: 800; font-size: 14px; color: #111; }

.lehrjahr-timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 28px 0; }
@media (max-width: 720px) { .lehrjahr-timeline { grid-template-columns: 1fr; } }
.lehrjahr-timeline__step {
  background: #fff; border: 2.5px solid #111; border-radius: 14px;
  padding: 18px 20px;
  box-shadow: var(--brand-shadow-sm);
}
.lehrjahr-timeline__year {
  display: inline-block; background: #111; color: #FFDC00;
  font-weight: 900; font-size: 11px; letter-spacing: 1.5px;
  padding: 4px 10px; border-radius: 100px; margin-bottom: 10px;
}
.lehrjahr-timeline__salary { font-weight: 900; font-size: 22px; letter-spacing: -1px; color: #111; margin-bottom: 8px; }
.lehrjahr-timeline__content { font-size: 13px; line-height: 1.55; color: #504C42; }
.lehrjahr-timeline__content ul { margin: 6px 0 0 0; padding-left: 18px; }
.lehrjahr-timeline__content li { margin-bottom: 3px; }

.decision-matrix {
  margin: 28px 0; background: transparent;
  display: table;
  width: 100%;
  border-collapse: collapse;
  border-top: var(--brand-border-thin);
  border-bottom: var(--brand-border-thin);
}
.decision-matrix__head, .decision-matrix__row { display: table-row; }
.decision-matrix__head { background: #111; color: #FFDC00; }
.decision-matrix__row + .decision-matrix__row .decision-matrix__cell { border-top: 1px solid #E6E3DA; }
.decision-matrix__cell {
  display: table-cell; vertical-align: top;
  padding: 14px 16px; border-left: 1px solid #E6E3DA;
  width: auto;
}
.decision-matrix__cell:first-child {
  border-left: 0;
  font-weight: 800; font-size: 13px;
  width: 28%;
}
.decision-matrix__head .decision-matrix__cell:first-child { background: #111; }
.decision-matrix__cell--head {
  font-weight: 900; font-size: 12px; letter-spacing: 1px; padding: 14px 16px;
  border-top: 0 !important;
}
.decision-matrix__value-num { display: block; font-weight: 900; font-size: 15px; margin-bottom: 2px; }
.decision-matrix__value-desc { display: block; font-size: 12px; color: #6E6A60; line-height: 1.4; }
.decision-matrix__score {
  display: inline-block; margin-top: 8px;
  font-size: 13px; letter-spacing: 2px; color: #FF3864;
  font-feature-settings: "tnum";
}
.decision-matrix__score[data-score="5"] { color: #00C853; }
.decision-matrix__score[data-score="4"] { color: #00C853; opacity: 0.85; }
.decision-matrix__score[data-score="3"] { color: #FFC400; }
.decision-matrix__score[data-score="2"] { color: #FF8C00; }
.decision-matrix__score[data-score="1"] { color: #FF1744; }
.decision-matrix__head .decision-matrix__cell { line-height: 1.3; }

/* ============================================================
   PROFIL-Bereich (Frontend, eingeloggter User)
   /profil, /profil/daten, /profil/passwort, /profil/avatar
   ============================================================ */
.profile-grid {
  display: grid; grid-template-columns: 240px 1fr; gap: 32px;
  max-width: 980px; margin: 0 auto;
}
@media (max-width: 720px) {
  .profile-grid { grid-template-columns: 1fr; gap: 16px; }
}
.profile-nav {
  display: flex; flex-direction: column; gap: 4px;
  border: 2px solid var(--ink); border-radius: 12px; overflow: hidden;
  height: fit-content;
  background: #fff;
}
.profile-nav__item {
  display: block; padding: 12px 16px;
  font-weight: 700; font-size: 13px; color: var(--ink);
  border-bottom: 1px solid var(--gray-200);
  text-decoration: none;
}
.profile-nav__item:last-child { border-bottom: 0; }
.profile-nav__item:hover { background: var(--gray-100); }
.profile-nav__item.is-active { background: var(--ink); color: var(--yellow); }
.profile-nav__item--logout { color: var(--error); }

.profile-main {
  background: #fff; border: 2px solid var(--ink); border-radius: 12px;
  padding: 28px;
}

.profile-card--head {
  display: flex; gap: 18px; align-items: center;
  padding-bottom: 24px; border-bottom: 2px solid var(--gray-200); margin-bottom: 24px;
}
.profile-card__avatar {
  width: 84px; height: 84px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--ink);
}
.profile-card__avatar--initials {
  display: flex; align-items: center; justify-content: center;
  background: var(--yellow); color: var(--ink);
  font-weight: 900; font-size: 32px;
}
.profile-card__name { font-weight: 900; font-size: 22px; color: var(--ink); }
.profile-card__meta { font-size: 14px; color: var(--gray-500); margin-top: 2px; }
.profile-card__chip {
  display: inline-block; margin-top: 8px;
  padding: 4px 12px; border-radius: 999px;
  background: var(--yellow); color: var(--ink);
  font-weight: 700; font-size: 12px; letter-spacing: 0.5px;
}

.profile-section-title {
  font-weight: 900; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--gray-500); margin: 24px 0 12px;
}

.stats-grid--compact { grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stats-grid--compact .stat-card { padding: 16px; text-align: center; }
.stats-grid--compact .stat-card__number { display: block; font-size: 28px; line-height: 1; margin-bottom: 8px; }
.stats-grid--compact .stat-card__label { display: block; font-weight: 700; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gray-500); }

.profile-quick {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px;
}
.profile-quick__item {
  display: block; padding: 14px 16px;
  background: var(--cream); border: 2px solid var(--ink); border-radius: 10px;
  font-weight: 700; font-size: 14px; color: var(--ink);
  text-decoration: none;
}
.profile-quick__item:hover { background: var(--yellow); }

.profile-form .form-group { margin-bottom: 18px; }
.profile-form label {
  display: block; font-weight: 700; font-size: 12px;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--ink); margin-bottom: 6px;
}
.profile-form .form-input {
  width: 100%; padding: 10px 14px;
  border: 2px solid var(--gray-200); border-radius: 8px;
  font-family: inherit; font-size: 14px; background: #fff;
}
.profile-form .form-input:focus { outline: none; border-color: var(--ink); }
.profile-form .form-hint { display: block; margin-top: 4px; font-size: 12px; color: var(--gray-500); }

.avatar-preview { text-align: center; margin-bottom: 24px; }
.avatar-preview__img {
  width: 160px; height: 160px; border-radius: 50%;
  border: 3px solid var(--ink); object-fit: cover;
  display: inline-block;
}
.avatar-preview__img--initials {
  background: var(--yellow); color: var(--ink);
  font-weight: 900; font-size: 64px;
  display: inline-flex; align-items: center; justify-content: center;
}

body.site-weloveurlaub .profile-nav,
body.site-weloveurlaub .profile-main { border-color: var(--wl-primary-dark); }
body.site-weloveurlaub .profile-nav__item.is-active { background: var(--wl-primary-dark); color: #fff; }
body.site-weloveurlaub .profile-card__chip { background: var(--wl-primary-mid); color: #fff; }
body.site-weloveurlaub .profile-quick__item:hover { background: var(--wl-primary-mid); color: #fff; }
body.site-weloveurlaub .profile-card__avatar--initials,
body.site-weloveurlaub .avatar-preview__img--initials { background: var(--wl-primary-mid); color: #fff; }

/* ============================================================
   Public-Profil /u/<slug>  (D1 — Community Phase 1)
   ============================================================ */
.public-profile {
  max-width: 880px; margin: 40px auto;
  background: #fff; border: 2px solid var(--ink); border-radius: 14px;
  padding: 32px;
}
.public-profile__head {
  display: flex; gap: 24px; align-items: center;
  padding-bottom: 24px; border-bottom: 2px solid var(--gray-200);
}
@media (max-width: 600px) { .public-profile__head { flex-direction: column; align-items: flex-start; } }
.public-profile__avatar {
  width: 120px; height: 120px; border-radius: 50%;
  border: 3px solid var(--ink); object-fit: cover; flex-shrink: 0;
}
.public-profile__avatar--initials {
  display: flex; align-items: center; justify-content: center;
  background: var(--yellow); color: var(--ink);
  font-weight: 900; font-size: 48px;
}
.public-profile__name { font-weight: 900; font-size: 30px; color: var(--ink); margin: 0; }
.public-profile__role { font-size: 15px; color: var(--gray-600); margin: 4px 0; }
.public-profile__chip {
  display: inline-block; margin: 6px 0 12px;
  padding: 4px 12px; border-radius: 999px;
  background: var(--yellow); color: var(--ink);
  font-weight: 700; font-size: 12px; letter-spacing: 0.5px;
}
.public-profile__stats {
  display: flex; gap: 24px; margin: 12px 0 16px;
  font-size: 14px; color: var(--gray-600);
}
.public-profile__stats strong { color: var(--ink); font-weight: 900; }
.public-profile__bio { padding: 24px 0; border-bottom: 2px solid var(--gray-200); font-size: 16px; line-height: 1.6; color: var(--gray-700); }
.public-profile__socials { display: flex; flex-wrap: wrap; gap: 12px; padding: 24px 0; border-bottom: 2px solid var(--gray-200); }
.public-profile__social {
  display: inline-block; padding: 8px 14px;
  background: var(--gray-100); color: var(--ink);
  border-radius: 8px; font-weight: 700; font-size: 13px;
  text-decoration: none;
}
.public-profile__social:hover { background: var(--yellow); }
.public-profile__activity { padding-top: 24px; }
.public-profile__activity-title {
  font-weight: 900; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--gray-500); margin: 0 0 16px;
}
.public-profile__activity-list { list-style: none; padding: 0; margin: 0; }
.public-profile__activity-list li {
  padding: 14px 0; border-bottom: 1px solid var(--gray-200);
}
.public-profile__activity-list li:last-child { border-bottom: 0; }
.public-profile__activity-link { font-weight: 700; color: var(--ink); text-decoration: none; }
.public-profile__activity-link:hover { color: var(--link); text-decoration: underline; }
.public-profile__activity-text { margin: 6px 0 4px; font-size: 14px; color: var(--gray-700); line-height: 1.5; }
.public-profile__activity-date { font-size: 12px; color: var(--gray-500); }

body.site-weloveurlaub .public-profile { border-color: var(--wl-primary-dark); }
body.site-weloveurlaub .public-profile__avatar--initials { background: var(--wl-primary-mid); color: #fff; }
body.site-weloveurlaub .public-profile__chip { background: var(--wl-primary-mid); color: #fff; }
body.site-weloveurlaub .public-profile__social:hover { background: var(--wl-primary-mid); color: #fff; }

/* ============================================================
   D2 — Diskussionen / Q&A
   ============================================================ */
.discussion-toolbar {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  margin-bottom: 24px;
}
.discussion-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.discussion-cat {
  padding: 6px 12px; border-radius: 999px;
  background: var(--gray-100); color: var(--ink);
  font-size: 12px; font-weight: 700; text-decoration: none;
  border: 1px solid transparent;
}
.discussion-cat:hover { background: var(--yellow); }
.discussion-cat.is-active { background: var(--ink); color: var(--yellow); border-color: var(--ink); }
.discussion-cat__n { opacity: 0.7; margin-left: 4px; font-weight: 500; }

.discussion-empty {
  text-align: center; padding: 60px 20px;
  background: var(--gray-100); border-radius: 14px;
  color: var(--gray-600);
}

.discussion-list { list-style: none; padding: 0; margin: 0; }
.discussion-list__item {
  display: flex; gap: 16px; align-items: center;
  padding: 16px 0; border-bottom: 1px solid var(--gray-200);
}
.discussion-list__avatar-link { flex-shrink: 0; }
.discussion-list__avatar {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--gray-200); display: block;
}
.discussion-list__avatar--initials {
  display: flex; align-items: center; justify-content: center;
  background: var(--yellow); color: var(--ink);
  font-weight: 800; font-size: 16px;
}
.discussion-list__main { flex: 1; min-width: 0; }
.discussion-list__title {
  display: block; font-weight: 700; font-size: 16px; color: var(--ink);
  text-decoration: none; line-height: 1.4;
}
.discussion-list__title:hover { color: var(--link); text-decoration: underline; }
.discussion-list__meta { font-size: 13px; color: var(--gray-500); margin-top: 4px; }
.discussion-list__meta a { color: var(--gray-700); }
.discussion-list__cat {
  display: inline-block; padding: 1px 8px; border-radius: 4px;
  background: var(--cream); color: var(--ink); font-weight: 700; font-size: 11px;
}
.discussion-list__stats {
  display: flex; gap: 16px; flex-shrink: 0;
}
.discussion-list__stats > div { text-align: center; min-width: 50px; }
.discussion-list__stats strong { display: block; font-weight: 900; font-size: 18px; color: var(--ink); }
.discussion-list__stats span { font-size: 11px; color: var(--gray-500); text-transform: uppercase; letter-spacing: 1px; }

/* Thread-Detail */
.discussion-thread {
  background: #fff; border: 2px solid var(--ink); border-radius: 14px;
  padding: 28px; margin-bottom: 32px;
}
.discussion-thread__head { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.discussion-thread__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.discussion-thread__avatar--initials {
  display: flex; align-items: center; justify-content: center;
  background: var(--yellow); color: var(--ink); font-weight: 900; font-size: 18px;
}
.discussion-thread__author { font-weight: 800; color: var(--ink); text-decoration: none; }
.discussion-thread__author-job { display: block; font-size: 13px; color: var(--gray-500); margin-top: 2px; }
.discussion-thread__date { display: block; font-size: 12px; color: var(--gray-500); margin-top: 2px; }
.discussion-thread__body {
  font-size: 16px; line-height: 1.6; color: var(--gray-800);
  white-space: pre-wrap; word-wrap: break-word;
}

.discussion-replies__title {
  font-weight: 900; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--gray-500); margin: 32px 0 16px;
}
.discussion-replies { list-style: none; padding: 0; margin: 0; }
.discussion-reply {
  display: flex; gap: 14px; padding: 18px 0;
  border-bottom: 1px solid var(--gray-200);
}
.discussion-reply__avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.discussion-reply__avatar--initials {
  display: flex; align-items: center; justify-content: center;
  background: var(--yellow); color: var(--ink); font-weight: 800; font-size: 14px;
}
.discussion-reply__main { flex: 1; min-width: 0; }
.discussion-reply__head { font-size: 13px; color: var(--gray-500); margin-bottom: 6px; }
.discussion-reply__author { font-weight: 800; color: var(--ink); text-decoration: none; }
.discussion-reply__job { color: var(--gray-600); margin-left: 6px; }
.discussion-reply__date { margin-left: 8px; }
.discussion-reply__body { font-size: 15px; line-height: 1.55; color: var(--gray-800); white-space: pre-wrap; }
.discussion-reply__foot { margin-top: 8px; }
.discussion-reply__like {
  background: none; border: 1px solid var(--gray-300); border-radius: 999px;
  padding: 4px 12px; font-size: 12px; font-weight: 700; color: var(--gray-700);
  cursor: pointer;
}
.discussion-reply__like:hover { background: var(--yellow); color: var(--ink); border-color: var(--ink); }
.discussion-reply__like--liked { background: var(--yellow); color: var(--ink); border-color: var(--ink); cursor: default; }

.discussion-form .form-input {
  width: 100%; padding: 12px 14px;
  border: 2px solid var(--gray-200); border-radius: 8px;
  font-family: inherit; font-size: 14px; background: #fff;
}
.discussion-form .form-input:focus { outline: none; border-color: var(--ink); }
.discussion-form .form-group { margin-bottom: 18px; }
.discussion-form label {
  display: block; font-weight: 700; font-size: 12px;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--ink); margin-bottom: 6px;
}
.discussion-form .form-hint { display: block; margin-top: 4px; font-size: 12px; color: var(--gray-500); }

body.site-weloveurlaub .discussion-thread { border-color: var(--wl-primary-dark); }
body.site-weloveurlaub .discussion-cat.is-active { background: var(--wl-primary-dark); color: #fff; border-color: var(--wl-primary-dark); }
body.site-weloveurlaub .discussion-cat:hover { background: var(--wl-primary-mid); color: #fff; }
body.site-weloveurlaub .discussion-list__avatar--initials,
body.site-weloveurlaub .discussion-thread__avatar--initials,
body.site-weloveurlaub .discussion-reply__avatar--initials { background: var(--wl-primary-mid); color: #fff; }
body.site-weloveurlaub .discussion-reply__like:hover,
body.site-weloveurlaub .discussion-reply__like--liked { background: var(--wl-primary-mid); color: #fff; border-color: var(--wl-primary-dark); }

/* ============================================================
   D3a — Direkt-Nachrichten
   ============================================================ */
.header__dm-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  color: #fff; margin-right: 8px;
}
.header__dm-btn:hover { color: var(--yellow); }
.header__dm-badge {
  position: absolute; top: 4px; right: 4px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--pink); color: #fff;
  border-radius: 999px;
  font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
}
body.site-weloveurlaub .header__dm-btn { color: var(--ink); }
body.site-weloveurlaub .header__dm-btn:hover { color: var(--wl-primary-mid); }

.dm-inbox { list-style: none; padding: 0; margin: 0; }
.dm-inbox__item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-bottom: 1px solid var(--gray-200);
  text-decoration: none; color: var(--ink);
}
.dm-inbox__item:hover { background: var(--gray-100); }
.dm-inbox__item.is-unread { background: #FFFBE5; }
.dm-inbox__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.dm-inbox__avatar--initials {
  display: flex; align-items: center; justify-content: center;
  background: var(--yellow); color: var(--ink);
  font-weight: 800; font-size: 16px;
}
.dm-inbox__main { flex: 1; min-width: 0; }
.dm-inbox__top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.dm-inbox__name { font-weight: 800; color: var(--ink); }
.dm-inbox__date { font-size: 12px; color: var(--gray-500); flex-shrink: 0; }
.dm-inbox__snippet { font-size: 13px; color: var(--gray-600); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-inbox__badge {
  flex-shrink: 0;
  min-width: 24px; height: 24px; padding: 0 8px;
  background: var(--pink); color: #fff;
  border-radius: 999px;
  font-size: 12px; font-weight: 800; line-height: 24px; text-align: center;
}

.dm-back {
  display: inline-block; margin-bottom: 16px;
  font-size: 13px; color: var(--gray-600); text-decoration: none;
}
.dm-back:hover { color: var(--ink); }

.dm-empty { padding: 40px 20px; text-align: center; color: var(--gray-500); }

.dm-thread { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 12px; }
.dm-msg { display: flex; gap: 10px; align-items: flex-end; }
.dm-msg--mine { flex-direction: row-reverse; }
.dm-msg__avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.dm-msg__avatar--initials {
  display: flex; align-items: center; justify-content: center;
  background: var(--yellow); color: var(--ink);
  font-weight: 800; font-size: 13px;
}
.dm-msg__bubble {
  max-width: 70%;
  background: var(--gray-100); color: var(--ink);
  padding: 10px 14px; border-radius: 16px;
}
.dm-msg--mine .dm-msg__bubble {
  background: var(--ink); color: var(--yellow);
  border-bottom-right-radius: 4px;
}
.dm-msg__bubble { border-bottom-left-radius: 4px; }
.dm-msg__body { font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.dm-msg__time { display: block; font-size: 11px; opacity: 0.6; margin-top: 4px; }

.dm-compose {
  display: flex; gap: 10px; align-items: flex-end;
  background: #fff; border: 2px solid var(--ink); border-radius: 12px;
  padding: 12px;
}
.dm-compose__input {
  flex: 1; min-height: 44px; resize: vertical;
  padding: 8px 12px; border: 1px solid var(--gray-200); border-radius: 8px;
  font-family: inherit; font-size: 14px;
}
.dm-compose__input:focus { outline: none; border-color: var(--ink); }

.public-profile__actions { display: flex; gap: 8px; flex-wrap: wrap; }

body.site-weloveurlaub .dm-msg--mine .dm-msg__bubble { background: var(--wl-primary-dark); color: #fff; }
body.site-weloveurlaub .dm-inbox__item.is-unread { background: #EEF3FF; }
body.site-weloveurlaub .dm-inbox__avatar--initials,
body.site-weloveurlaub .dm-msg__avatar--initials { background: var(--wl-primary-mid); color: #fff; }

/* ============================================================
   D3b — Companies-Pages
   ============================================================ */
.company-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px; max-width: 1080px; margin: 0 auto;
}
.company-card {
  display: flex; gap: 14px; align-items: center;
  padding: 16px; background: #fff;
  border: 2px solid var(--ink); border-radius: 12px;
  text-decoration: none; color: var(--ink);
  transition: transform 0.15s ease;
}
.company-card:hover { transform: translateY(-2px); }
.company-card__logo {
  width: 56px; height: 56px; border-radius: 10px; object-fit: contain;
  background: #fff; border: 1px solid var(--gray-200);
  flex-shrink: 0;
}
.company-card__logo--initials {
  display: flex; align-items: center; justify-content: center;
  background: var(--yellow); color: var(--ink);
  font-weight: 900; font-size: 18px;
  letter-spacing: 1px;
}
.company-card__body { min-width: 0; }
.company-card__name { font-weight: 800; font-size: 15px; color: var(--ink); }
.company-card__meta { font-size: 13px; color: var(--gray-500); margin-top: 2px; }
.company-card__stat { font-size: 12px; color: var(--gray-600); margin-top: 6px; font-weight: 600; }

.company-page {
  max-width: 880px; margin: 40px auto;
  background: #fff; border: 2px solid var(--ink); border-radius: 14px;
  padding: 32px;
}
.company-page__head {
  display: flex; gap: 24px; align-items: flex-start;
  padding-bottom: 24px; border-bottom: 2px solid var(--gray-200); margin-bottom: 24px;
}
@media (max-width: 640px) { .company-page__head { flex-direction: column; } }
.company-page__logo {
  width: 100px; height: 100px; border-radius: 14px; object-fit: contain;
  background: #fff; border: 2px solid var(--ink);
  flex-shrink: 0;
}
.company-page__logo--initials {
  display: flex; align-items: center; justify-content: center;
  background: var(--yellow); color: var(--ink);
  font-weight: 900; font-size: 36px; letter-spacing: 2px;
}
.company-page__name { font-weight: 900; font-size: 28px; color: var(--ink); margin: 0; }
.company-page__verified {
  display: inline-block; margin-left: 8px;
  background: #00C853; color: #fff;
  width: 24px; height: 24px; border-radius: 50%;
  text-align: center; line-height: 24px; font-size: 14px;
}
.company-page__meta { font-size: 14px; color: var(--gray-600); margin: 8px 0 16px; }
.company-page__chip {
  display: inline-block; padding: 6px 12px; border-radius: 999px;
  background: var(--gray-100); color: var(--gray-700);
  font-size: 13px; font-weight: 700;
}
.company-page__chip--ok { background: #DEF7E6; color: #065F46; }
.company-page__desc { padding: 16px 0 24px; border-bottom: 2px solid var(--gray-200); margin-bottom: 24px; line-height: 1.6; color: var(--gray-700); }
.company-page__section-title {
  font-weight: 900; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--gray-500); margin: 0 0 16px;
}

.company-claim-form { display: none; margin-top: 12px; padding: 12px; background: var(--gray-100); border-radius: 8px; }
.company-claim-form.is-open { display: block; }
.company-claim-form .form-input { width: 100%; padding: 8px 12px; border: 1px solid var(--gray-300); border-radius: 6px; margin-bottom: 8px; }

.company-employees {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px;
}
.company-employee__link {
  display: flex; gap: 12px; align-items: center;
  padding: 12px; background: var(--cream);
  border-radius: 8px; text-decoration: none; color: var(--ink);
}
.company-employee__link:hover { background: var(--yellow); }
.company-employee__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.company-employee__avatar--initials {
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--yellow);
  font-weight: 800; font-size: 16px;
}
.company-employee__name { font-weight: 800; }
.company-employee__role { font-size: 13px; color: var(--gray-600); margin-top: 2px; }

body.site-weloveurlaub .company-card,
body.site-weloveurlaub .company-page { border-color: var(--wl-primary-dark); }
body.site-weloveurlaub .company-card__logo--initials,
body.site-weloveurlaub .company-page__logo--initials { background: var(--wl-primary-mid); color: #fff; }
body.site-weloveurlaub .company-employee__avatar--initials { background: var(--wl-primary-dark); color: #fff; }
body.site-weloveurlaub .company-employee__link:hover { background: var(--wl-primary-mid); color: #fff; }

/* ============================================================
   wl-Refresh "Kuestenwaerme" — Claude-Design-Bundle 2026-05-06
   Filigrane Typo (Fraunces serif + JetBrains Mono eyebrows),
   subtile Borders, helle Surfaces, pill-Buttons.
   Komponenten-Overrides scoped auf body.site-weloveurlaub —
   stand-alone-block, hohe Specificity beats older rules.
============================================================ */

/* @font-face fuer Fraunces / JetBrains Mono — verschoben nach oben in den
   self-hosted-fonts-Block (Z. 50ff), damit alle Custom-Fonts an einem Ort
   stehen und Fonts beim Render-Critical-Path frueher geladen werden. */

/* === wl Globale Typo + Body === */
body.site-weloveurlaub {
  font-family: var(--font-sans);
  background: var(--bg-page);
  color: var(--text-primary);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Fraunces ist variable mit opsz-Axis (9-144). Browser soll automatisch
     den Display-Schnitt waehlen (groesserer opsz-Wert = praegnantere
     Serifen, fettere Buchstaben fuer Headings). Ohne dieses Statement
     bekommt Fraunces den default opsz-Wert (text-optimized) — Headlines
     wirken dadurch gestaucht/duenn. */
  font-optical-sizing: auto;
}
/* Fraunces-Display-Use mit explizitem opsz=144 fuer Hero/Section-h2.
   Belt-and-suspenders zu font-optical-sizing fuer Browser die das
   Property nicht honorieren. */
body.site-weloveurlaub h1,
body.site-weloveurlaub h2,
body.site-weloveurlaub h3,
body.site-weloveurlaub .article-hero-landscape__title,
body.site-weloveurlaub .article-title {
  font-variation-settings: 'opsz' 144, 'SOFT' 50, 'WONK' 0;
}
body.site-weloveurlaub :focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* === wl Headlines: Fraunces, mit pretty Wrapping === */
body.site-weloveurlaub h1,
body.site-weloveurlaub h2,
body.site-weloveurlaub h3,
body.site-weloveurlaub h4,
body.site-weloveurlaub h5,
body.site-weloveurlaub h6 {
  font-family: var(--font-display);
  color: var(--ink-900, #0d0c0b);
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
body.site-weloveurlaub .article-title,
body.site-weloveurlaub .article-hero-landscape__title,
body.site-weloveurlaub .hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

/* === wl Article-Body Section-Headlines === */
body.site-weloveurlaub .article-body h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink-900, #0d0c0b);
  margin: 48px 0 14px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ink-900, #0d0c0b);
}
body.site-weloveurlaub .article-body h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  margin: 28px 0 8px;
}
body.site-weloveurlaub .article-body p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-primary);
  margin-bottom: 14px;
}

/* === wl Eyebrow / Meta — JetBrains Mono, uppercase NUR fuer echte Eyebrows.
   WICHTIG: Personen-Namen, Beschreibungstexte und Section-h2 NICHT
   uppercased — sie behalten Body-/Display-Typo. */
body.site-weloveurlaub .breadcrumb,
body.site-weloveurlaub .breadcrumbs__inner,
body.site-weloveurlaub .insider-quote__label,
body.site-weloveurlaub .article-summary__title,
body.site-weloveurlaub .fact-card__title,
body.site-weloveurlaub .fact-card__label,
body.site-weloveurlaub .pro-con__title,
body.site-weloveurlaub .itinerary__title,
body.site-weloveurlaub .itinerary__time,
body.site-weloveurlaub .tag {
  font-family: var(--font-mono) !important;
  letter-spacing: var(--eyebrow-letterspace, 0.15em);
  text-transform: uppercase;
  font-weight: 500;
}
body.site-weloveurlaub .article-summary__title,
body.site-weloveurlaub .fact-card__title,
body.site-weloveurlaub .pro-con__title,
body.site-weloveurlaub .itinerary__title {
  font-size: var(--eyebrow-size, 11px);
  letter-spacing: 0.18em;
  color: var(--text-muted);
  font-weight: 500;
}

/* Datum/Lesezeit-Zeile: Mono, klein, kein uppercase (Datum lesbar lassen) */
body.site-weloveurlaub .article-meta__details {
  font-family: var(--font-mono) !important;
  font-size: var(--eyebrow-size, 11px);
  letter-spacing: var(--mono-letterspace, 0.05em);
  text-transform: none;
  color: var(--text-muted);
}

/* Personen-Namen: Display-Schrift, Title-Case — NICHT uppercase */
body.site-weloveurlaub .article-meta__author,
body.site-weloveurlaub .insider-quote__byline,
body.site-weloveurlaub .insider-quote__author,
body.site-weloveurlaub .insider-quote__name {
  font-family: var(--font-sans) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-900, #0d0c0b);
}
/* Beschreibung unter Aktivitaeten-Titel: Body-Schrift, kein uppercase */
body.site-weloveurlaub .activity-card__title + p {
  font-family: var(--font-sans);
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* === wl Cards: weisse Surfaces, subtile sand-200 Borders === */
body.site-weloveurlaub .article-summary,
body.site-weloveurlaub .fact-card,
body.site-weloveurlaub .activity-card,
body.site-weloveurlaub .insider-quote,
body.site-weloveurlaub .itinerary,
body.site-weloveurlaub .pro-con__col,
body.site-weloveurlaub .travel-distances__card,
body.site-weloveurlaub .best-time__card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: none !important;
}
body.site-weloveurlaub .article-summary {
  border-radius: 14px;
  padding: 24px 28px;
}
body.site-weloveurlaub .fact-card {
  border-radius: 14px;
  padding: 24px 26px;
  border-left-width: 1px !important;
  border-left-color: var(--border-subtle) !important;
}
body.site-weloveurlaub .fact-card__title {
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--border-default);
  margin-bottom: 18px;
  color: var(--text-muted);
  font-size: var(--eyebrow-size, 11px);
  letter-spacing: 0.18em;
}
body.site-weloveurlaub .fact-card__grid {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--steckbrief-row-gap, 14px) var(--steckbrief-col-gap, 28px);
  font-size: 14px;
}
@media (max-width: 640px) {
  body.site-weloveurlaub .fact-card__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
body.site-weloveurlaub .fact-card__label {
  font-size: var(--eyebrow-size, 11px);
  color: var(--text-muted);
  letter-spacing: var(--mono-letterspace, 0.05em);
  font-weight: 500;
  text-transform: none;
}
body.site-weloveurlaub .fact-card__value {
  font-family: var(--font-sans);
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-900, #0d0c0b);
  font-weight: 500;
  font-size: 14px;
}
body.site-weloveurlaub .activity-card { border-radius: 12px; padding: 20px 22px; }
body.site-weloveurlaub .activity-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink-900, #0d0c0b);
}
body.site-weloveurlaub .activity-card__icon {
  background: var(--sand-100) !important;
  color: var(--green-600) !important;
}

/* === wl Pro-Con: weisse Cards mit border-top color-Akzent === */
body.site-weloveurlaub .pro-con__col--pro {
  border-top: 4px solid var(--green-600) !important;
  background: var(--bg-card) !important;
}
body.site-weloveurlaub .pro-con__col--con {
  border-top: 4px solid var(--amber-500) !important;
  background: var(--bg-card) !important;
}
body.site-weloveurlaub .pro-con__col--pro .pro-con__title { color: var(--green-600); }
body.site-weloveurlaub .pro-con__col--con .pro-con__title { color: var(--amber-600); }
body.site-weloveurlaub .pro-con__item { font-size: 14px; padding-left: 22px; }
body.site-weloveurlaub .pro-con__col--pro .pro-con__item::before { content: '+'; color: var(--green-600); }
body.site-weloveurlaub .pro-con__col--con .pro-con__item::before { content: '−'; color: var(--amber-600); }

/* === wl Insider-Quote: cream-Surface + green border-left, klein === */
body.site-weloveurlaub .insider-quote {
  background: var(--bg-card) !important;
  border-left: 4px solid var(--green-600) !important;
  border-radius: 14px;
  padding: 22px 24px;
  color: var(--text-primary);
}
body.site-weloveurlaub .insider-quote__label { color: var(--green-600); }
body.site-weloveurlaub .insider-quote__text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-900, #0d0c0b);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
body.site-weloveurlaub .insider-quote__byline,
body.site-weloveurlaub .insider-quote__author,
body.site-weloveurlaub .insider-quote__name {
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: 0.10em;
}
body.site-weloveurlaub .insider-quote__avatar {
  border: 2px solid var(--bg-card);
  box-shadow: 0 0 0 1px var(--border-subtle);
}

/* === wl Itinerary: weiss + dezente Borders, time als kleines pill === */
body.site-weloveurlaub .itinerary {
  background: var(--bg-card) !important;
  border-left: 4px solid var(--green-600) !important;
  border-radius: 14px;
  padding: 24px 26px;
}
body.site-weloveurlaub .itinerary__time {
  background: var(--green-600);
  color: #fff;
  border: none;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  border-radius: 999px;
  padding: 5px 12px;
}
body.site-weloveurlaub .itinerary__content > h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
}

/* === wl Tips-List: Amber-Tipp-Cards (statt solider Forest-Streifen) === */
body.site-weloveurlaub .tips-list { gap: 10px; display: flex; flex-direction: column; list-style: none; padding: 0; margin: 14px 0; }
body.site-weloveurlaub .tips-list__item {
  background: var(--amber-50) !important;
  border: 1px solid var(--amber-200) !important;
  border-left: 1px solid var(--amber-200) !important;
  border-radius: 10px;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
}
body.site-weloveurlaub .tips-list__icon {
  background: var(--amber-100) !important;
  color: var(--amber-600);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
}

/* === wl Travel-Distances + Best-Time: stat-pills === */
body.site-weloveurlaub .travel-distances__card,
body.site-weloveurlaub .best-time__card {
  border-radius: 10px;
  padding: 14px 16px;
}
body.site-weloveurlaub .travel-distances__city,
body.site-weloveurlaub .best-time__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
}
body.site-weloveurlaub .travel-distances__primary,
body.site-weloveurlaub .best-time__months {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink-900, #0d0c0b);
  margin-top: 4px;
}
body.site-weloveurlaub .travel-distances__secondary,
body.site-weloveurlaub .best-time__details {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* === wl Section-Tinted: Sand-100 BG, dezent === */
body.site-weloveurlaub .section-tinted {
  background: var(--sand-100) !important;
  border-radius: 14px;
  padding: 32px 28px;
}

/* === wl Section-Divider: dashed sand statt dot-pattern === */
body.site-weloveurlaub .section-divider {
  border-top: 1px dashed var(--border-default);
  margin: 40px 0;
  height: 0;
  display: block;
}
body.site-weloveurlaub .section-divider::before,
body.site-weloveurlaub .section-divider::after,
body.site-weloveurlaub .section-divider__dots { display: none; }

/* === wl Buttons: pill, lighter weight 600, 14px === */
body.site-weloveurlaub .btn,
body.site-weloveurlaub .btn--primary {
  border-radius: 999px !important;
  padding: 14px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  border: none !important;
  background: var(--action-primary) !important;
  color: var(--text-on-primary) !important;
  text-transform: none;
  box-shadow: none !important;
}
body.site-weloveurlaub .btn:hover,
body.site-weloveurlaub .btn--primary:hover { background: var(--action-primary-hover) !important; }

/* === wl FAQ-Akkordeon: dezent, amber Plus/Minus === */
body.site-weloveurlaub details.faq,
body.site-weloveurlaub .faq__item {
  border-bottom: 1px solid var(--border-default);
  border-top: none;
  padding: 16px 0;
}
body.site-weloveurlaub details.faq:first-of-type,
body.site-weloveurlaub .faq__item:first-of-type { border-top: 1px solid var(--border-default); }
body.site-weloveurlaub details.faq summary,
body.site-weloveurlaub .faq__question {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-900, #0d0c0b);
}
body.site-weloveurlaub details.faq summary::after,
body.site-weloveurlaub .faq__question::after {
  content: '+';
  font-family: var(--font-mono);
  color: var(--amber-500);
  font-size: 22px;
  font-weight: 400;
}
body.site-weloveurlaub details.faq[open] summary::after,
body.site-weloveurlaub .faq__item.is-open .faq__question::after { content: '−'; }

/* === wl Hero-Banner: 2-col split, text-left / image edge-to-edge right.
   Spec: Artikel.html Z. 48-58. Container traegt rounded radius + overflow,
   Bild fuellt rechte Spalte vollflaechig (kein eigener radius/padding),
   Text-Header bekommt Padding 40px 44px. min-height 280px. === */
body.site-weloveurlaub .article-hero-landscape {
  background: transparent;
  border: none;
  border-radius: var(--hero-radius, 18px);
  overflow: hidden;
  padding: 0;
  margin: var(--hero-band-pad-y, 32px) auto;
  max-width: var(--container-max, 1240px);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 0;
  align-items: stretch;
  min-height: var(--hero-min-height, 280px);
}
body.site-weloveurlaub .article-hero-landscape__header {
  padding: var(--hero-pad-y, 40px) var(--hero-pad-x, 44px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  grid-column: 1;
  order: 1;
}
body.site-weloveurlaub .article-hero-landscape__media {
  border-radius: 0;
  aspect-ratio: auto;
  height: 100%;
  min-height: var(--hero-min-height, 280px);
  grid-column: 2;
  order: 2;
}
body.site-weloveurlaub .article-hero-landscape__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 4vw, 48px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 14px 0 0;
}
body.site-weloveurlaub .article-hero-landscape__subtitle {
  font-size: var(--intro-p-size, 17px);
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 14px 0 0;
}
body.site-weloveurlaub .article-hero-landscape__tag {
  align-self: flex-start;
  background: transparent !important;
  color: var(--amber-700) !important;
  font-family: var(--font-mono);
  font-size: var(--eyebrow-size, 11px);
  letter-spacing: var(--eyebrow-letterspace, 0.15em);
  text-transform: uppercase;
  font-weight: 500;
  padding: 0;
  border: none;
}
body.site-weloveurlaub .article-hero-landscape__header .article-meta {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: var(--eyebrow-size, 11px);
  letter-spacing: var(--mono-letterspace, 0.05em);
  color: var(--text-muted);
}
@media (max-width: 900px) {
  body.site-weloveurlaub .article-hero-landscape {
    display: block;
    border-radius: 0;
    border-left: none;
    border-right: none;
    margin-left: 0;
    margin-right: 0;
    min-height: 0;
  }
  body.site-weloveurlaub .article-hero-landscape__media {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
  body.site-weloveurlaub .article-hero-landscape__header {
    padding: 28px 20px;
  }
}

/* === wl Tag-Pills (Kategorie-Tags): klein, JetBrains Mono === */
body.site-weloveurlaub .tag {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--green-600) !important;
  color: var(--text-on-primary) !important;
}

/* === wl Newsletter — Bernstein-Vollflaeche (per CLAUDE.md-Regel
   nur hier eingesetzt) === */
body.site-weloveurlaub .newsletter,
body.site-weloveurlaub .newsletter-section {
  background: var(--bg-accent);
  color: var(--text-on-accent);
  padding: var(--newsletter-pad, 72px 0);
}
body.site-weloveurlaub .newsletter h2,
body.site-weloveurlaub .newsletter-section h2 {
  font-family: var(--font-display);
  font-size: var(--newsletter-h2-size, 48px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-on-accent);
}

/* === wl Article-Layout: 1fr + 264px Sidebar, 48px Gap, 1240px max.
   Spec: Artikel.html Z. 17/66/67. === */
body.site-weloveurlaub .article-layout {
  grid-template-columns: 1fr var(--sidebar-width, 264px);
  gap: var(--body-grid-gap, 48px);
  max-width: var(--container-max, 1240px);
  padding: var(--body-pad-top, 48px) var(--container-pad, 32px) var(--body-pad-bottom, 80px);
}
@media (min-width: 1060px) and (max-width: 1279px) {
  body.site-weloveurlaub .article-layout {
    grid-template-columns: 1fr var(--sidebar-width, 264px);
    gap: 36px;
  }
}
@media (max-width: 1024px) {
  body.site-weloveurlaub .article-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* === wl Article-Body Section-h2: 28px Fraunces, 2px ink-Underline.
   "Top-Sehenswuerdigkeiten" etc. NICHT mehr uppercased — der Mixed-Case
   Display-Look der Spec wird preserved. === */
body.site-weloveurlaub .article-body h2 {
  text-transform: none !important;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--section-h2-size, 28px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink-900, #0d0c0b);
  margin: var(--section-block-mt, 48px) 0 14px;
  padding-bottom: 12px;
  border-bottom: var(--section-h2-bb-width, 2px) solid var(--ink-900, #0d0c0b);
}
body.site-weloveurlaub .article-body h3 {
  text-transform: none !important;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--section-h3-size, 20px);
  line-height: 1.3;
  margin: 28px 0 8px;
  color: var(--ink-900, #0d0c0b);
}
body.site-weloveurlaub .article-body p {
  font-size: var(--section-p-size, 16px);
  line-height: 1.7;
  color: var(--text-primary);
  margin-bottom: 14px;
  text-transform: none;
}
/* Erster Absatz nach Hero / vor erster h2 = Intro-Groesse 17px */
body.site-weloveurlaub .article-body > p:first-of-type,
body.site-weloveurlaub .article-body .article-intro p {
  font-size: var(--intro-p-size, 17px);
}

/* === wl TOC-Sidebar: kein Card-Box, sticky Top 100px, Mono-Eyebrow,
   numerierte Items mit amber Akzent. Spec: Artikel.html Z. 222-232. === */
body.site-weloveurlaub .article-toc--sidebar {
  position: sticky;
  top: var(--toc-top-offset, 100px);
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
body.site-weloveurlaub .article-toc--sidebar .article-toc__title {
  font-family: var(--font-mono);
  font-size: var(--toc-eyebrow-size, 10px);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
}
body.site-weloveurlaub .article-toc--sidebar .article-toc__list {
  display: flex;
  flex-direction: column;
  gap: var(--toc-item-gap, 11px);
  counter-reset: toc-counter;
}
body.site-weloveurlaub .article-toc--sidebar .article-toc__item {
  counter-increment: toc-counter;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0;
  border: none;
  border-bottom: none;
  border-left: none;
  border-radius: 0;
  background: transparent;
  font-size: 13px;
  line-height: 1.4;
}
body.site-weloveurlaub .article-toc--sidebar .article-toc__item--h2::before {
  content: counter(toc-counter, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  margin-right: 0;
  flex-shrink: 0;
  padding-top: 1px;
}
body.site-weloveurlaub .article-toc--sidebar .article-toc__item--h3 {
  font-size: 12px;
  padding-left: 22px;
  /* Default: alle h3-Items verstecken. Werden nur sichtbar wenn ihr
     Eltern-h2-Item .is-active-section traegt (CSS-Sibling-Trick unten).
     User: "wenn man in einer sektion ist, sollte sich die jeweiligen
     unterpunkte ausfahren". */
  display: none !important;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.2s ease;
}
body.site-weloveurlaub .article-toc--sidebar .article-toc__item--h3::before {
  content: '↳';
  color: var(--text-muted);
  margin-right: 6px;
}
/* Sibling-Trick: zeige h3s die NACH dem aktiven h2 kommen — der zweite
   Selector versteckt sie wieder sobald ein NEUER h2 dazwischen kommt
   (haelt den Reveal-Bereich auf die aktive Sektion begrenzt). */
body.site-weloveurlaub .article-toc--sidebar .article-toc__item--h2.is-active-section ~ .article-toc__item--h3 {
  display: flex !important;
  max-height: 80px;
  opacity: 1;
}
body.site-weloveurlaub .article-toc--sidebar .article-toc__item--h2.is-active-section ~ .article-toc__item--h2 ~ .article-toc__item--h3 {
  display: none !important;
  max-height: 0;
  opacity: 0;
}
body.site-weloveurlaub .article-toc--sidebar .article-toc__item a {
  color: var(--text-secondary);
  font-weight: 400;
  background: transparent;
  padding: 0;
  border: none;
}
body.site-weloveurlaub .article-toc--sidebar .article-toc__item:hover {
  background: transparent;
}
body.site-weloveurlaub .article-toc--sidebar .article-toc__item:hover a {
  color: var(--text-primary);
  text-decoration: none;
}
body.site-weloveurlaub .article-toc--sidebar .article-toc__item.is-active {
  background: transparent;
  border: none;
}
body.site-weloveurlaub .article-toc--sidebar .article-toc__item.is-active a {
  color: var(--text-link);
  font-weight: 500;
}
body.site-weloveurlaub .article-toc--sidebar .article-toc__item.is-active::before {
  color: var(--amber-500);
}

/* === wl Article-Layout-Sidebar: Save-Button Pill (ink-900) === */
body.site-weloveurlaub .article-layout__sidebar .save-btn,
body.site-weloveurlaub .toc-rail .save-btn {
  margin-top: 22px;
  width: 100%;
  padding: var(--pill-pad-sm, 11px 16px);
  border-radius: var(--pill-radius, 999px);
  background: var(--ink-900, #0d0c0b);
  color: var(--text-on-dark);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
}
body.site-weloveurlaub .article-layout__sidebar .save-btn:hover,
body.site-weloveurlaub .toc-rail .save-btn:hover {
  background: var(--ink-700, #2a2724);
}

/* === wl Steckbrief-Box (article-summary): 2-col Grid, dezente sand-Border.
   Spec: Artikel.html Z. 73-83. === */
body.site-weloveurlaub .article-summary {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--card-radius-lg, 14px);
  padding: var(--steckbrief-pad, 24px 26px);
  margin: 36px 0;
}
body.site-weloveurlaub .article-summary__title {
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--border-default);
  font-family: var(--font-mono);
  font-size: var(--eyebrow-size, 11px);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body.site-weloveurlaub .article-summary__list,
body.site-weloveurlaub .article-summary dl,
body.site-weloveurlaub .article-summary__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--steckbrief-row-gap, 14px) var(--steckbrief-col-gap, 28px);
  font-size: 14px;
}
body.site-weloveurlaub .article-summary dt,
body.site-weloveurlaub .article-summary__label {
  font-family: var(--font-mono);
  font-size: var(--eyebrow-size, 11px);
  letter-spacing: var(--mono-letterspace, 0.05em);
  color: var(--text-muted);
  text-transform: none;
  font-weight: 500;
}
body.site-weloveurlaub .article-summary dd,
body.site-weloveurlaub .article-summary__value {
  color: var(--ink-900, #0d0c0b);
  font-weight: 500;
  font-family: var(--font-sans);
  margin: 0 0 6px;
}

/* === wl Login-Button (Header) === */
body.site-weloveurlaub .login-btn,
body.site-weloveurlaub .header__login-btn {
  padding: var(--pill-pad-xs, 9px 18px);
  border-radius: var(--pill-radius, 999px);
  background: var(--action-primary);
  color: var(--text-on-primary);
  font-size: 13px;
  font-weight: 600;
}
body.site-weloveurlaub .login-btn:hover,
body.site-weloveurlaub .header__login-btn:hover {
  background: var(--action-primary-hover);
}

/* === wl Intro = Plain-Text (kein Card-Box).
   Migration nutzt <p class="article-summary"> als Intro-Absatz —
   nicht als TLDR-Card. Deshalb fuer p.article-summary den Card-Look
   wegnehmen, nur fuer div.article-summary bleibt der Card. === */
body.site-weloveurlaub p.article-summary {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 14px;
  font-size: var(--intro-p-size, 17px);
  line-height: 1.7;
  color: var(--text-primary);
}
body.site-weloveurlaub p.article-summary + p,
body.site-weloveurlaub p.article-summary + p.article-summary {
  margin-top: 14px;
}

/* === wl Section-Numerierung: Auto-Prefix "01/02/03..." via CSS-Counter.
   Spec: Artikel.html Z. 113-119. Counter wird im article-body initialisiert
   und vor jeder h2 inkrementiert. Nummer als JetBrains Mono amber-500. === */
body.site-weloveurlaub .article-body {
  counter-reset: section-num;
}
body.site-weloveurlaub .article-body h2 {
  counter-increment: section-num;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
body.site-weloveurlaub .article-body h2::before {
  content: counter(section-num, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--amber-500);
  flex-shrink: 0;
}

/* === wl Steckbrief = filigraner — feinere Borders, keine Schwere.
   User: "steckbrief ist auch anders, feiner". === */
body.site-weloveurlaub .fact-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-left: 1px solid var(--border-subtle) !important;
  border-radius: var(--card-radius-lg, 14px);
  padding: var(--steckbrief-pad, 24px 26px) !important;
  box-shadow: none !important;
  margin: 36px 0;
}
body.site-weloveurlaub .fact-card__title {
  font-size: var(--eyebrow-size, 11px) !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  margin: 0 0 18px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px dashed var(--border-default) !important;
  font-family: var(--font-mono) !important;
}
body.site-weloveurlaub .fact-card__cell {
  flex-direction: column;
  gap: 4px;
}
body.site-weloveurlaub .fact-card__value {
  font-weight: 500 !important;
  font-size: 14px !important;
  color: var(--ink-900, #0d0c0b) !important;
}

/* === wl Hero-Band: Hero sitzt INSIDE Sand-Background-Strip, nicht
   freistehend. Spec: Z. 41 (.hero { background: var(--bg-soft); padding: 32px 0; }) === */
body.site-weloveurlaub .article-wrap--landscape {
  background: var(--bg-soft);
  padding: var(--hero-band-pad-y, 32px) 0;
  margin-bottom: 0;
}
body.site-weloveurlaub .article-wrap--landscape .article-hero-landscape {
  margin: 0 auto;
  padding: 0;
}

/* === wl Travel-Distances → Stat-Row 3-Col-Pills. Spec: Z. 130-135.
   Migration nutzt .travel-distances als Container. === */
body.site-weloveurlaub .travel-distances {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 18px 0;
  padding: 0;
  background: transparent;
  border: none;
}
@media (max-width: 640px) {
  body.site-weloveurlaub .travel-distances {
    grid-template-columns: 1fr;
  }
}
body.site-weloveurlaub .travel-distances__card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--card-radius-sm, 10px);
  padding: var(--stat-pad, 14px 16px);
  box-shadow: none;
}
body.site-weloveurlaub .travel-distances__city {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body.site-weloveurlaub .travel-distances__primary {
  font-family: var(--font-display);
  font-size: var(--stat-value-size, 22px);
  font-weight: 600;
  color: var(--ink-900, #0d0c0b);
  margin-top: 4px;
  text-transform: none;
  letter-spacing: 0;
}
body.site-weloveurlaub .travel-distances__secondary {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* === wl Activity-Grid → Fact-Cards 2-Col. Spec: Z. 137-141. === */
body.site-weloveurlaub .activity-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 18px;
  padding: 0;
  list-style: none;
}
@media (max-width: 640px) {
  body.site-weloveurlaub .activity-grid {
    grid-template-columns: 1fr;
  }
}
body.site-weloveurlaub .activity-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--card-radius-md, 12px);
  padding: 20px 22px !important;
  box-shadow: none !important;
}
body.site-weloveurlaub .activity-card__title {
  font-family: var(--font-display) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--ink-900, #0d0c0b) !important;
  margin: 0 0 10px !important;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
  text-transform: none !important;
}
body.site-weloveurlaub .activity-card__title + p {
  margin-top: 10px;
}

/* === wl Tips-List → Tipp-Cards mit num-badge in Kreis. Spec: Z. 191-195.
   !important auf list-style + display damit base ul/li-Regeln ueber-
   schrieben werden (User-Feedback: "praktische tipps sind auch nicht
   in dem neuen design"). === */
body.site-weloveurlaub .tips-list,
body.site-weloveurlaub ul.tips-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin: 14px 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
body.site-weloveurlaub .tips-list__item,
body.site-weloveurlaub li.tips-list__item {
  display: grid !important;
  grid-template-columns: 36px 1fr !important;
  gap: 14px !important;
  padding: var(--tipp-pad, 16px 18px) !important;
  background: var(--amber-50) !important;
  border: 1px solid var(--amber-200) !important;
  border-left: 1px solid var(--amber-200) !important;
  border-radius: var(--card-radius-sm, 10px) !important;
  align-items: start !important;
  list-style: none !important;
}
body.site-weloveurlaub .tips-list__item::before,
body.site-weloveurlaub .tips-list__item::marker {
  content: none !important;
  display: none !important;
}
body.site-weloveurlaub .tips-list__icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--amber-100) !important;
  color: var(--amber-600);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  display: grid;
  place-items: center;
  margin: 0;
}
body.site-weloveurlaub .tips-list__content > strong,
body.site-weloveurlaub .tips-list__content > h4 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-900, #0d0c0b);
  display: block;
  margin: 0 0 4px;
}
body.site-weloveurlaub .tips-list__content > p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

/* === wl Insider-Quote als Highlight-Box (green-700-Vollflaeche).
   "Empfehlung der Redaktion"-Pattern. Spec: Z. 175-188.
   ACHTUNG: scroll-reveal-CSS macht .article-body .reveal opacity:0
   bis JS .is-visible setzt. Wenn JS klemmt, bleibt die Box komplett
   unsichtbar — User: "der ganze persönliche reisebericht wird auf
   live nicht angezeigt". Defensive Fix: opacity:1 erzwingen. === */
body.site-weloveurlaub .insider-quote,
body.site-weloveurlaub .insider-quote.reveal {
  background: var(--green-700) !important;
  color: var(--text-on-primary);
  border-radius: var(--card-radius-lg, 14px);
  padding: var(--highlight-pad, 26px 28px) !important;
  border: none !important;
  border-left: none !important;
  margin: 24px 0;
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}
body.site-weloveurlaub .insider-quote__label {
  font-family: var(--font-mono);
  font-size: var(--eyebrow-size, 11px);
  letter-spacing: var(--eyebrow-letterspace, 0.15em);
  text-transform: uppercase;
  color: var(--amber-300) !important;
  margin-bottom: 10px;
  display: block;
}
body.site-weloveurlaub .insider-quote__text,
body.site-weloveurlaub .insider-quote p,
body.site-weloveurlaub .article-body .insider-quote p {
  font-family: var(--font-display);
  font-style: normal;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--text-on-primary) !important;
  text-transform: none;
  letter-spacing: 0;
  margin: 0 0 10px;
}
body.site-weloveurlaub .insider-quote__byline,
body.site-weloveurlaub .insider-quote__author,
body.site-weloveurlaub .insider-quote__name {
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: var(--font-sans) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 13px;
  font-weight: 500;
}
body.site-weloveurlaub .insider-quote__avatar {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* === wl Pro-Con: 2-col, weiss, mit border-top-Akzent (green/amber).
   Spec: Z. 149-160. === */
body.site-weloveurlaub .pro-con,
body.site-weloveurlaub .pro-con__cols {
  background: transparent;
  padding: 0;
  border: none;
  margin-top: 18px;
}
body.site-weloveurlaub .pro-con__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 640px) {
  body.site-weloveurlaub .pro-con__cols {
    grid-template-columns: 1fr;
  }
}
body.site-weloveurlaub .pro-con__col {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--card-radius-md, 12px);
  padding: 20px 22px !important;
  box-shadow: none !important;
}
body.site-weloveurlaub .pro-con__col--pro {
  border-top: 4px solid var(--green-600) !important;
}
body.site-weloveurlaub .pro-con__col--con {
  border-top: 4px solid var(--amber-500) !important;
}
body.site-weloveurlaub .pro-con__title {
  font-family: var(--font-mono) !important;
  font-size: var(--eyebrow-size, 11px) !important;
  font-weight: 500 !important;
  letter-spacing: var(--eyebrow-letterspace, 0.15em) !important;
  text-transform: uppercase !important;
  margin: 0 0 12px !important;
}
body.site-weloveurlaub .pro-con__col--pro .pro-con__title { color: var(--green-600) !important; }
body.site-weloveurlaub .pro-con__col--con .pro-con__title { color: var(--amber-600) !important; }

/* === wl Section-Tinted = Sand-100-Surface (subtil), kein Schwerer-BG ===
   "Events / Saisonkalender" als section-tinted */
body.site-weloveurlaub .section-tinted {
  background: var(--sand-100) !important;
  border-radius: var(--card-radius-lg, 14px);
  padding: 32px 28px !important;
  border: none !important;
  margin: 32px 0;
}

/* === wl Article-Sources: sand-100 box mit mono-eyebrow. Spec: Z. 215-219. === */
body.site-weloveurlaub .article-sources {
  margin-top: 24px;
  padding: 18px 20px;
  background: var(--sand-100);
  border-radius: var(--card-radius-md, 12px);
  border: none;
}
body.site-weloveurlaub .article-sources__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
  display: block;
  font-weight: 500;
}
body.site-weloveurlaub .article-sources__list {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
}
body.site-weloveurlaub .article-sources a {
  color: var(--text-link);
  text-decoration: underline;
}

/* === wl Section-Divider: dashed sand statt dot-pattern === */
body.site-weloveurlaub .section-divider {
  border: none;
  border-top: 1px dashed var(--border-default);
  margin: 40px 0;
  height: 0;
  display: block;
  background: transparent;
}
body.site-weloveurlaub .section-divider::before,
body.site-weloveurlaub .section-divider::after,
body.site-weloveurlaub .section-divider__dots {
  display: none;
}

/* === wl Best-Time + Season-Grid: dezent === */
body.site-weloveurlaub .best-time,
body.site-weloveurlaub .season-grid {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--card-radius-lg, 14px);
  padding: 22px 24px !important;
  box-shadow: none !important;
  margin: 18px 0;
}

/* === wl Article-Body & Header voll-breit (KEIN 760px-Cap mehr).
   User: "auch der contentbereich ist doch breiter".
   Design hat ~864px usable (1240 - 64 padding - 264 sidebar - 48 gap).
   Wir lassen das Body sich auf die volle Spaltenbreite ausdehnen. === */
body.site-weloveurlaub .article-body {
  max-width: none;
  margin: 0;
  padding: 0;
}
body.site-weloveurlaub .content-wrap--narrow {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
body.site-weloveurlaub .article-header {
  max-width: none;
  padding: 0;
}

/* ==========================================================================
   wl-Refresh PASS 2 — vollstaendige Design-1:1-Angleichung
   User-Feedback 2026-05-06: Header, Hero-Band, Body-BG, Kompakt-FAQ,
   Inline-Author, kompakte Sources, full-width Related, Section-Numerierung,
   Pro-Con / Tipps / Diagramm 1:1.
========================================================================== */

/* === HEADER === */
body.site-weloveurlaub .header {
  background: var(--bg-card) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}
/* Logo: Schrift ink-900, Herz amber-500. Site-Name "we love urlaub" wird
   per ::before/::after-Trick durch ::first-letter NICHT ersetzbar — also
   stylen wir bestehende color/Font und ueberlassen Heart der Settings. */
body.site-weloveurlaub .header__logo {
  color: var(--ink-900, #0d0c0b) !important;
  font-family: var(--font-display);
  font-weight: 700 !important;
  font-size: 22px !important;
  letter-spacing: -0.01em !important;
}
body.site-weloveurlaub .header__logo .heart,
body.site-weloveurlaub .header__logo--image + .heart { color: var(--amber-500); }

/* Header-Icons: filigran 40px round mit sand-100-Hover.
   ACHTUNG: header__burger NICHT in dieser Regel — der braucht
   display:flex flex-direction:column damit die 3 Spans stacken,
   nicht display:grid (sonst fallen sie in 1 grid-cell zusammen). */
body.site-weloveurlaub .header__search-btn,
body.site-weloveurlaub .header__user-btn,
body.site-weloveurlaub .header__dm-btn {
  width: 40px !important;
  height: 40px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: var(--pill-radius, 999px) !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  border: none !important;
  padding: 0 !important;
  transition: background 0.15s, color 0.15s;
}
/* Burger separat: flex-column damit die 3 Spans STACKED erscheinen. */
body.site-weloveurlaub .header__burger {
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  border-radius: var(--pill-radius, 999px) !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  border: none !important;
  padding: 0 !important;
  transition: background 0.15s, color 0.15s;
}
body.site-weloveurlaub .header__search-btn:hover,
body.site-weloveurlaub .header__burger:hover,
body.site-weloveurlaub .header__user-btn:hover,
body.site-weloveurlaub .header__dm-btn:hover {
  background: var(--sand-100) !important;
  color: var(--text-primary) !important;
}
body.site-weloveurlaub .header__burger span {
  background: currentColor !important;
  height: 2px;
}

/* Login-Btn = green pill "Login" (kompakt, statt Icon+Label-Block). */
body.site-weloveurlaub .header__login-btn {
  width: auto !important;
  height: auto !important;
  padding: var(--pill-pad-xs, 9px 18px) !important;
  border-radius: var(--pill-radius, 999px) !important;
  background: var(--action-primary) !important;
  color: var(--text-on-primary) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px;
  border: none !important;
}
body.site-weloveurlaub .header__login-btn:hover {
  background: var(--action-primary-hover) !important;
}
body.site-weloveurlaub .header__login-icon {
  width: 16px !important;
  height: 16px !important;
}
body.site-weloveurlaub .header__login-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* === BREAKING-TICKER === */
body.site-weloveurlaub .ticker {
  background: var(--amber-500) !important;
  color: #ffffff !important;
  height: 44px;
  border: none !important;
}
body.site-weloveurlaub .ticker__inner {
  height: 44px !important;
  align-items: center !important;
}
/* News-Badge box-shadow zeigt im base-CSS pink — fuer wl in amber-500
   uebersetzen, sonst entstehen pink-Streifen links/rechts vom Badge. */
body.site-weloveurlaub .ticker__badge {
  background: var(--amber-800) !important;
  color: #ffffff !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 5px 14px !important;
  border-radius: var(--pill-radius, 999px) !important;
  box-shadow: 16px 0 0 var(--amber-500), -4px 0 0 var(--amber-500) !important;
  display: inline-flex !important;
  align-items: center !important;
  /* letter-spacing 0.1em haengt nach dem letzten Buchstaben Tracking-Space
     dran, optisch wirkt der rechte Innenabstand groesser. text-indent
     verschiebt den Text um die gleiche Distanz nach rechts → optisch
     symmetrisch. */
  text-indent: 0.1em;
}
body.site-weloveurlaub .ticker__item a {
  color: #ffffff !important;
  text-decoration: none;
  font-weight: 400 !important;
  font-family: var(--font-sans) !important;
}
body.site-weloveurlaub .ticker__sep {
  color: rgba(255, 255, 255, 0.55) !important;
}
/* Scroll-Wrap-Container darf nicht durch box-shadow-Trick abgeschnitten
   werden — sicherheitshalber fluiden align-items center erzwingen. */
body.site-weloveurlaub .ticker__scroll-wrap,
body.site-weloveurlaub .ticker__scroll,
body.site-weloveurlaub .ticker__items {
  display: flex !important;
  align-items: center !important;
  height: 44px !important;
}

/* === HERO-BAND: Container-Section mit bg-soft, breadcrumb + hero-banner
   gemeinsam darin. === */
body.site-weloveurlaub .article-wrap--landscape {
  background: transparent !important;
  padding: 0;
  margin-bottom: 0;
}
body.site-weloveurlaub .article-hero-band {
  background: var(--bg-soft);
  padding: var(--hero-band-pad-y, 32px) 0;
  margin-bottom: 0;
}
body.site-weloveurlaub .article-hero-band__inner {
  max-width: var(--container-max, 1240px);
  margin: 0 auto;
  padding: 0;
}
body.site-weloveurlaub .article-hero-band .breadcrumbs,
body.site-weloveurlaub .article-hero-band__inner > .breadcrumbs {
  font-family: var(--font-mono);
  font-size: var(--eyebrow-size, 11px);
  letter-spacing: var(--mono-letterspace-tag, 0.1em);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 24px;
  padding: 0;
  background: transparent !important;
  border: none !important;
}
/* Breadcrumb-OL hat eigenes side-padding + max-width — innerhalb des
   hero-band__inner (das schon 32px Padding hat) doppelt sich das.
   User: "breadcrumbs nicht eingerueckt". OL auf 0/none zuruecksetzen. */
body.site-weloveurlaub .article-hero-band .breadcrumbs__inner {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.site-weloveurlaub .article-hero-band .breadcrumbs a {
  color: var(--text-secondary);
  text-decoration: none;
}
body.site-weloveurlaub .article-hero-band .breadcrumbs a:hover {
  color: var(--text-primary);
}
/* Hero-Banner sitzt jetzt INSIDE article-hero-band__inner — kein eigenes
   max-width oder margin mehr. */
body.site-weloveurlaub .article-hero-band .article-hero-landscape {
  margin: 0;
  max-width: none;
}

/* === BODY-CONTAINER: bg-page Sand-50 fuer den Article-Layout-Bereich.
   Section-Trennung allein durch h2-Underline — section-divider raus. === */
body.site-weloveurlaub .article-wrap {
  background: var(--bg-page) !important;
}
body.site-weloveurlaub .article-layout {
  background: var(--bg-page);
}
body.site-weloveurlaub .section-divider {
  display: none !important;
}
/* Keine Sektionen mehr mit BG-Color (User-Feedback "es gibt keine sektionen
   mehr mit hintergrundfarbe"). */
body.site-weloveurlaub .section-tinted {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* === FAQ kompakt ohne Card-Rahmen. === */
body.site-weloveurlaub .faq,
body.site-weloveurlaub .faq__list,
body.site-weloveurlaub .article-faq {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 14px 0 0 !important;
  box-shadow: none !important;
}
body.site-weloveurlaub .faq__item,
body.site-weloveurlaub details.faq {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--border-default) !important;
  border-radius: 0 !important;
  padding: 16px 0 !important;
  margin: 0 !important;
}
body.site-weloveurlaub .faq__item:first-of-type,
body.site-weloveurlaub details.faq:first-of-type {
  border-top: 1px solid var(--border-default) !important;
}
body.site-weloveurlaub .faq__question,
body.site-weloveurlaub details.faq summary {
  font-family: var(--font-display);
  font-size: var(--faq-summary-size, 17px);
  font-weight: 600;
  color: var(--ink-900, #0d0c0b);
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
body.site-weloveurlaub .faq__question::after,
body.site-weloveurlaub details.faq summary::after {
  content: '+';
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 400;
  color: var(--amber-500);
  flex-shrink: 0;
}
body.site-weloveurlaub .faq__item.is-open .faq__question::after,
body.site-weloveurlaub details.faq[open] summary::after {
  content: '−';
}
body.site-weloveurlaub .faq__answer,
body.site-weloveurlaub details.faq p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-top: 10px !important;
  padding: 0 !important;
}

/* === AUTHOR-BOX: compact horizontal pill. Spec: Z. 207-213. === */
body.site-weloveurlaub .author-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 18px 20px !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--card-radius-md, 12px);
  box-shadow: none !important;
  margin: 24px 0 !important;
}
body.site-weloveurlaub .author-box__accent { display: none; }
body.site-weloveurlaub .author-box__avatar-col {
  flex-shrink: 0;
}
body.site-weloveurlaub .author-box__avatar,
body.site-weloveurlaub .author-box__avatar img,
body.site-weloveurlaub .author-box__avatar--fallback {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
}
body.site-weloveurlaub .author-box__icon { display: none; }
body.site-weloveurlaub .author-box__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.site-weloveurlaub .author-box__label {
  display: none;
}
body.site-weloveurlaub .author-box__name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-900, #0d0c0b);
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
}
body.site-weloveurlaub .author-box__bio {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
  /* Lange Bio kuerzen (User: "zu viel info"). 1 Zeile max via line-clamp. */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.site-weloveurlaub .author-box__social,
body.site-weloveurlaub .author-box__actions {
  display: none !important;
}

/* === SOURCES: kompakter sand-100 inset, mono eyebrow. Spec: Z. 215-219. === */
body.site-weloveurlaub .article-sources {
  background: var(--sand-100) !important;
  border: none !important;
  border-radius: var(--card-radius-md, 12px) !important;
  padding: 18px 20px !important;
  margin: 24px 0 !important;
}
body.site-weloveurlaub .article-sources__label {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  margin-bottom: 10px !important;
  display: block !important;
  background: none !important;
  padding: 0 !important;
}
body.site-weloveurlaub .article-sources__list {
  font-size: 12px !important;
  color: var(--text-secondary) !important;
  line-height: 1.6 !important;
}
body.site-weloveurlaub .article-sources a {
  color: var(--text-link) !important;
  text-decoration: underline;
}

/* === PRO-CON list-items mit +/- bullets, mono titles. === */
body.site-weloveurlaub .pro-con__list,
body.site-weloveurlaub .pro-con__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
body.site-weloveurlaub .pro-con__heading {
  font-family: var(--font-mono) !important;
  font-size: var(--eyebrow-size, 11px) !important;
  font-weight: 500 !important;
  letter-spacing: var(--eyebrow-letterspace, 0.15em) !important;
  text-transform: uppercase !important;
  margin: 0 0 12px !important;
}
body.site-weloveurlaub .pro-con__col--pro .pro-con__heading { color: var(--green-600); }
body.site-weloveurlaub .pro-con__col--con .pro-con__heading { color: var(--amber-600); }
body.site-weloveurlaub .pro-con__list li,
body.site-weloveurlaub .pro-con__col li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
}
body.site-weloveurlaub .pro-con__list li::before,
body.site-weloveurlaub .pro-con__col li::before {
  position: absolute;
  left: 0;
  top: -1px;
  font-weight: 700;
}
body.site-weloveurlaub .pro-con__col--pro .pro-con__list li::before,
body.site-weloveurlaub .pro-con__col--pro li::before {
  content: '+';
  color: var(--green-600);
}
body.site-weloveurlaub .pro-con__col--con .pro-con__list li::before,
body.site-weloveurlaub .pro-con__col--con li::before {
  content: '−';
  color: var(--amber-600);
}

/* === TIPS-LIST: <strong> als block heading, content darunter sauber.
   Migration 318 hat "</strong>: " auf "</strong> " gesynced — der ":" ist weg. === */
body.site-weloveurlaub .tips-list__content {
  display: block;
}
body.site-weloveurlaub .tips-list__content > strong:first-child {
  display: block;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-900, #0d0c0b);
  margin: 0 0 4px;
}

/* === DIAGRAMM + Saison-Bars vereint (chart-card mit months-row darunter) === */
body.site-weloveurlaub .td-chart,
body.site-weloveurlaub .chart-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--card-radius-lg, 14px) !important;
  padding: 22px 24px !important;
  margin: 18px 0 !important;
  box-shadow: none !important;
}
body.site-weloveurlaub .season-grid {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}
body.site-weloveurlaub .season-grid__legend {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  gap: 14px;
  margin: 0 0 10px;
}
body.site-weloveurlaub .season-grid__legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

/* === RELATED FULL-WIDTH (wl/Landscape): sand-100 BG-Strip ueber ganze
   Container-Breite, Cards in 3-col-Grid mit groesseren Visuals. === */
body.site-weloveurlaub .article-related-full {
  background: var(--bg-soft);
  padding: 56px 0;
  margin-top: 0;
}
body.site-weloveurlaub .article-related-full__inner {
  max-width: var(--container-max, 1240px);
  margin: 0 auto;
  padding: 0 var(--container-pad, 32px);
}
body.site-weloveurlaub .article-related-full .section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 28px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--border-default);
}
body.site-weloveurlaub .article-related-full .section-header__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
body.site-weloveurlaub .article-related-full .section-header__link {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-link);
  font-weight: 500;
  text-decoration: none;
}
body.site-weloveurlaub .article-related-full .card-grid--related {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  background: transparent;
  padding: 0;
}
@media (max-width: 900px) {
  body.site-weloveurlaub .article-related-full .card-grid--related {
    grid-template-columns: 1fr;
  }
}

/* === FOOTER kompakter (statt 80px+ padding). === */
body.site-weloveurlaub .footer,
body.site-weloveurlaub .site-footer {
  padding: 48px 0 28px !important;
  background: var(--bg-inverse) !important;
  color: var(--text-on-dark) !important;
}
body.site-weloveurlaub .footer__inner {
  max-width: var(--container-max, 1240px) !important;
  margin: 0 auto;
  padding: 0 var(--container-pad, 32px);
}
body.site-weloveurlaub .footer__grid,
body.site-weloveurlaub .site-footer__grid {
  margin-bottom: 28px !important;
  gap: 36px !important;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
  body.site-weloveurlaub .footer__grid,
  body.site-weloveurlaub .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 24px !important;
  }
}
body.site-weloveurlaub .footer__col-title,
body.site-weloveurlaub .site-footer__col-title {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--amber-300) !important;
  margin-bottom: 14px !important;
}
body.site-weloveurlaub .footer__link {
  display: block;
  font-family: var(--font-sans);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78) !important;
  padding: 5px 0;
  text-decoration: none;
}
body.site-weloveurlaub .footer__link:hover {
  color: var(--amber-200) !important;
}
body.site-weloveurlaub .footer__divider {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin: 0 0 18px;
}
body.site-weloveurlaub .footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
}
body.site-weloveurlaub .footer__logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: -0.01em;
  text-transform: none;
}

/* ==========================================================================
   wl-Refresh PASS 3 — 2026-05-06 Punkte 2
   Logo-HTML, Hamburger-Filigran, TEILEN-weg, Diagramm/Chips,
   Pro-Con/Vergleich h2, FAQ continuous, Card-Animations, Section-Divider weg.
========================================================================== */

/* === LOGO mit Heart-Span. main.php injected nun strukturierte HTML
   "<span text>we</span><span heart>♥</span><span text>urlaub</span>"
   (nur wenn site_name "urlaub" enthaelt).
   ACHTUNG: Aelteres Statement Z. ~815 setzt
   ".header__logo { color: var(--ink) !important; }" — color vererbt sich
   ohne explizite !important an die Children, deshalb muessen text und
   heart hier !important nutzen (sonst wird das Herz auch ink). === */
body.site-weloveurlaub .header__logo {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 22px !important;
}
body.site-weloveurlaub .header__logo-text {
  color: var(--ink-900, #0d0c0b) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  line-height: 1;
}
body.site-weloveurlaub .header__logo-heart {
  color: var(--amber-500) !important;
  font-size: 26px !important;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  transform: translateY(-1px);
}

/* === HAMBURGER + ICON-Btns filigraner, Header-Actions tighter gap === */
body.site-weloveurlaub .header__actions {
  gap: 6px !important;
}
body.site-weloveurlaub .header__burger {
  width: 40px !important;
  height: 40px !important;
  flex-direction: column;
  gap: 3px !important;
  padding: 0 !important;
}
body.site-weloveurlaub .header__burger span {
  width: 18px !important;
  height: 1.5px !important;
  background: currentColor !important;
  border-radius: 2px;
}
body.site-weloveurlaub .header__search-btn svg,
body.site-weloveurlaub .header__login-icon {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2 !important;
}

/* === TEILEN-Button im wl-Hero raus (User: "teilen button raus") === */
body.site-weloveurlaub .article-hero-landscape .article-meta__share-btn,
body.site-weloveurlaub .article-hero-landscape .article-meta__actions,
body.site-weloveurlaub .article-hero-landscape .article-meta__avatar,
body.site-weloveurlaub .article-hero-landscape .article-meta__avatar-fallback {
  display: none !important;
}
/* Hero-Meta als 1-Zeiler im Mono — author + Datum + Lesezeit + aktualisiert. */
body.site-weloveurlaub .article-hero-landscape .article-meta {
  display: block !important;
  margin-top: 18px;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
body.site-weloveurlaub .article-hero-landscape .article-meta__details {
  font-family: var(--font-mono) !important;
  font-size: var(--eyebrow-size, 11px) !important;
  letter-spacing: var(--mono-letterspace, 0.05em) !important;
  text-transform: none !important;
  color: var(--text-muted) !important;
  display: inline !important;
}
body.site-weloveurlaub .article-hero-landscape .article-meta__author {
  font-family: var(--font-mono) !important;
  font-size: var(--eyebrow-size, 11px) !important;
  font-weight: 500 !important;
  letter-spacing: var(--mono-letterspace, 0.05em) !important;
  text-transform: none !important;
  color: var(--text-secondary) !important;
}

/* === SECTION-DIVIDER + Dots harte Abschaltung (Migration enthielt
   "<span class='section-divider__dots'>• • •</span>" — User: "die ----- müssen weg") === */
body.site-weloveurlaub .section-divider,
body.site-weloveurlaub .section-divider__dots,
body.site-weloveurlaub .section-divider *,
body.site-weloveurlaub hr {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* === Article-Evergreen-Meta (Zuletzt-aktualisiert-Box) raus —
   Datum steht nun im Hero-Meta-1-Zeiler. User: "Zuletzt aktualisiert:
   6. Mai 2026 sollte doch bei dem content raus." === */
body.site-weloveurlaub .article-evergreen-meta {
  display: none !important;
}

/* === PRO-CON / VERGLEICH: h2 wie normale Section-Headline (Fraunces 28px,
   ink-Underline, Counter-Prefix) — NICHT als kleines mono Eyebrow.
   User: "Der Vergleich muss wie pro und contra sein, 2 spaltig, darüber
   die normale h2-headline." === */
body.site-weloveurlaub .article-body h2.pro-con__title,
body.site-weloveurlaub h2.pro-con__title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: var(--section-h2-size, 28px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  color: var(--ink-900, #0d0c0b) !important;
  margin: var(--section-block-mt, 48px) 0 14px !important;
  padding: 0 0 12px !important;
  border: none !important;
  border-bottom: var(--section-h2-bb-width, 2px) solid var(--ink-900, #0d0c0b) !important;
  text-transform: none !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 12px;
}
/* Verhindert dass die alte mono-Eyebrow-Regel oben (Z. ~10498) fuer die
   Section-Headline greift. */
body.site-weloveurlaub h2.pro-con__title {
  background: transparent !important;
}

/* === FAQ: continuous solid underline statt dashed-dividers, kein BG.
   User: "der unterstrich durchgängig sein. die ----- müssen weg.
   die fragen unten sollen keinen box haben". === */
body.site-weloveurlaub .faq__item,
body.site-weloveurlaub details.faq {
  border-bottom: 1px solid var(--border-subtle) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 14px 0 !important;
}
body.site-weloveurlaub .faq__item:first-of-type,
body.site-weloveurlaub details.faq:first-of-type {
  border-top: 1px solid var(--border-subtle) !important;
}

/* === DIAGRAMM (td-chart) + SEASON-GRID + BEST-TIME im wl-Look === */
body.site-weloveurlaub .td-chart {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--card-radius-lg, 14px);
  padding: 22px 24px;
  margin: 18px 0;
  box-shadow: none;
}
/* td-chart wird per js/charts.js gerendert. Die wl-Palette wird im JS
   automatisch aktiviert (body.site-weloveurlaub-Detection). CSS hier
   eliminiert den Pop-Art-Double-Stroke (zu dick fuer wl-Aesthetik) und
   reduziert die schweren ink-Outlines auf filigrane subtle-Borders. */
body.site-weloveurlaub .td-chart {
  --chart-c1: var(--green-600);
  --chart-c2: var(--amber-500);
  --chart-grid: var(--border-subtle);
  --chart-axis: var(--text-muted);
}
/* Pop-Art Doppel-Outline-Linie unter den farbigen Linien-Pfaden raus. */
body.site-weloveurlaub .td-chart__line--outline {
  display: none !important;
}
/* Linien-Pfade duenner (statt 4px → 2.5px). */
body.site-weloveurlaub .td-chart__line {
  stroke-width: 2.5 !important;
}
/* Bars: 1px subtile Border statt 2.5px ink-Stroke. */
body.site-weloveurlaub .td-chart__bar,
body.site-weloveurlaub .td-chart__bar--h {
  stroke: rgba(0, 0, 0, 0.08) !important;
  stroke-width: 1 !important;
}
/* Pie-Slices: 2px white Trennlinie statt 3px ink. */
body.site-weloveurlaub .td-chart__slice {
  stroke: var(--bg-card) !important;
  stroke-width: 2 !important;
}
/* Datapoints: weisser Ring statt ink. */
body.site-weloveurlaub .td-chart__dot {
  stroke: var(--bg-card) !important;
  stroke-width: 1.5 !important;
}
/* Grid-Linien dezent — sand-200 dashed. */
body.site-weloveurlaub .td-chart__grid {
  stroke: var(--border-subtle) !important;
}
/* Chart-Head: prominent rendern. DATEN-Badge fuer wl ausblenden (td-Pop-
   Art-Element, passt nicht zur Reise-Magazin-Aesthetik). Title gross genug
   um als Diagramm-Ueberschrift zu funktionieren. */
body.site-weloveurlaub .td-chart__head {
  display: block !important;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
}
body.site-weloveurlaub .td-chart__badge {
  display: none !important;
}
body.site-weloveurlaub .td-chart__title {
  font-family: var(--font-display) !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  color: var(--ink-900, #0d0c0b) !important;
  letter-spacing: -0.01em;
  display: block;
  margin: 0 0 4px;
  text-transform: none !important;
}
body.site-weloveurlaub .td-chart__subtitle {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.05em;
  display: block;
}
/* Chart-Legende kompakt mit mono Eyebrow. */
body.site-weloveurlaub .td-chart__legend-item {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body.site-weloveurlaub .td-chart__legend-dot {
  width: 8px !important;
  height: 8px !important;
}
/* Chart-Source-Note (DWD/BSH etc.): kompakte Sand-Inset. */
body.site-weloveurlaub .td-chart__source {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

/* Season-Grid: 12 Monatschips, 4 Saison-Modi. Spec-Farben:
   peak  = amber-200 (Hauptsaison)
   secret= green-200 (Geheimtipp)
   shoulder= sand-200 (Nebensaison)
   off   = sand-100 (Off-Season) */
body.site-weloveurlaub .season-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
  margin: 14px 0 8px;
  padding: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
@media (max-width: 640px) {
  body.site-weloveurlaub .season-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}
body.site-weloveurlaub .season-grid__cell {
  aspect-ratio: 1.6 / 1;
  border-radius: 4px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--ink-800, #1a1916);
  cursor: default;
  transition: transform 0.15s, box-shadow 0.15s;
}
body.site-weloveurlaub .season-grid__cell--peak     { background: var(--amber-200) !important; color: var(--amber-900) !important; }
body.site-weloveurlaub .season-grid__cell--secret   { background: var(--green-200) !important; color: var(--green-900) !important; }
body.site-weloveurlaub .season-grid__cell--shoulder { background: var(--sand-200) !important; color: var(--ink-700, #2a2724) !important; }
body.site-weloveurlaub .season-grid__cell--off      { background: var(--sand-100) !important; color: var(--text-muted) !important; }
body.site-weloveurlaub .season-grid__cell:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Season-Grid-Legend: Mono Eyebrows mit kleinen Dots. Inline-styles in
   Migration ueberschreiben — wl-Tokenfarben nutzen. */
body.site-weloveurlaub .season-grid__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 4px 0 18px;
}
body.site-weloveurlaub .season-grid__legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body.site-weloveurlaub .season-grid__legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  vertical-align: middle;
}
/* Inline-styles auf den Dots (#FFE3E3 etc.) ueberschreiben. */
body.site-weloveurlaub .season-grid__legend > span:nth-child(1) .season-grid__legend-dot { background: var(--amber-200) !important; }
body.site-weloveurlaub .season-grid__legend > span:nth-child(2) .season-grid__legend-dot { background: var(--green-200) !important; }
body.site-weloveurlaub .season-grid__legend > span:nth-child(3) .season-grid__legend-dot { background: var(--sand-200) !important; }
body.site-weloveurlaub .season-grid__legend > span:nth-child(4) .season-grid__legend-dot { background: var(--sand-100) !important; border: 1px solid var(--border-default); }

/* ==========================================================================
   wl-HOMEPAGE — Anpassung an Kuestenwaerme-Design (screen-beispiele/wl-handoff
   /Startseite.html). Overrides der bestehenden home/index.php-Klassen
   (hero, quick-links, featured, card-grid, most-read, etc.) auf das wl-
   Reise-Magazin-Aussehen. Touchscreen-PHP-Templates bleiben unangetastet.
========================================================================== */

/* --- Hero --- Inline-Article-Hero mit Brand-Tag/Title/Subtitle */
body.site-weloveurlaub .hero {
  background: var(--bg-soft) !important;
  padding: 0 !important;
  position: relative;
  overflow: hidden;
  /* Fixe Hoehe verhindert CLS (Layout-Shift) bei langen Headlines.
     Bild + Text passen sich ueber line-clamp + clamp-font-size an. */
  min-height: 520px;
  max-height: 520px;
}
@media (max-width: 900px) {
  body.site-weloveurlaub .hero {
    min-height: 0;
    max-height: none;
    padding: 0 !important;
  }
}
body.site-weloveurlaub .hero__inner {
  max-width: var(--container-max, 1240px);
  margin: 0 auto;
  padding: 0 var(--container-pad, 32px);
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 900px) {
  body.site-weloveurlaub .hero__inner {
    grid-template-columns: 1fr;
    gap: 20px;
    /* Generische Mobile-Regel (.hero__inner) zwingt 480px height + 20px
       side-padding → bei wl mit grid layout schneidet das den CTA-Button
       unten ab. Hier explizit fluid height + duennes Padding fuer
       Edge-to-Edge-Look wie auf td. */
    min-height: 0 !important;
    height: auto !important;
    padding: 16px 16px 20px !important;
  }
  body.site-weloveurlaub .hero {
    /* Generische Regel setzt height:480px → bei wl per max-height:none
       aufgehoben, aber min-height:480px war im fluid-mode noch da. */
    height: auto !important;
  }
  body.site-weloveurlaub .hero__image {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 11 !important;
  }
  body.site-weloveurlaub .hero__image img {
    height: auto !important;
    aspect-ratio: 16 / 11;
  }
  body.site-weloveurlaub .hero__title {
    font-size: 22px !important;
    -webkit-line-clamp: 3 !important;
  }
  body.site-weloveurlaub .hero__subtitle {
    -webkit-line-clamp: 3 !important;
  }
  body.site-weloveurlaub .hero__progress {
    padding: 0 16px 16px !important;
  }
}
body.site-weloveurlaub .hero__tag {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--pill-radius, 999px);
  background: var(--green-600);
  color: var(--text-on-primary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
body.site-weloveurlaub .hero__title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  /* Skaliert dynamisch: kleinere Min-Werte fuer lange Headlines, grosse
     Max-Werte fuer kurze. Plus line-clamp 3 als hartes Limit gegen CLS. */
  font-size: clamp(28px, 3.6vw, 52px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink-900, #0d0c0b) !important;
  margin: 0 0 18px !important;
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.site-weloveurlaub .hero__subtitle {
  font-size: 17px !important;
  color: var(--text-secondary) !important;
  margin: 0 0 28px !important;
  max-width: 520px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.site-weloveurlaub .hero__content .btn,
body.site-weloveurlaub .hero__content .btn--primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px !important;
  border-radius: var(--pill-radius, 999px) !important;
  background: var(--action-primary) !important;
  color: var(--text-on-primary) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}
body.site-weloveurlaub .hero__content .btn:hover {
  background: var(--action-primary-hover) !important;
}
body.site-weloveurlaub .hero__image {
  border-radius: 20px !important;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(15, 28, 13, 0.18);
  aspect-ratio: 16 / 11;
}
body.site-weloveurlaub .hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Hero-Progress-Bar bleibt sichtbar (Slider hat 3 Indicator-Segmente). */
body.site-weloveurlaub .hero__progress {
  display: flex !important;
  justify-content: center;
  gap: 6px;
  padding: 0 var(--container-pad, 32px) 24px;
  background: var(--bg-soft);
  margin: 0;
}
body.site-weloveurlaub .hero__progress-segment {
  height: 3px;
  width: 60px;
  background: var(--border-default);
  border-radius: 999px;
}
body.site-weloveurlaub .hero__progress-segment.is-active {
  background: var(--green-600);
}

/* --- Quick-Links → horizontaler 1-Zeilen-Slider (analog td).
   User: "kacheln sollen einzeilig sein, horizontal slidebar, wie bei
   td jetzt ja auch ist". Plus weniger padding oben/unten. --- */
body.site-weloveurlaub .quick-links {
  background: var(--bg-card) !important;
  padding: 24px 0 !important;
  border-bottom: 1px solid var(--border-subtle);
}
body.site-weloveurlaub .quick-links .content-wrap,
body.site-weloveurlaub .quick-links .section-pad,
body.site-weloveurlaub .quick-links .section-pad--sm {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body.site-weloveurlaub .quick-links__grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  gap: 14px !important;
  padding: 4px 0 12px !important;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
body.site-weloveurlaub .quick-links__grid::-webkit-scrollbar { height: 4px; }
body.site-weloveurlaub .quick-links__grid::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: 999px;
}
body.site-weloveurlaub .quick-link {
  flex: 0 0 auto !important;
  width: 130px !important;
  aspect-ratio: auto !important;
  height: auto !important;
  border-radius: 14px !important;
  background: var(--green-600) !important;
  color: var(--text-on-primary) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 18px 14px !important;
  transition: transform 0.2s, background 0.2s !important;
  scroll-snap-align: start;
  text-decoration: none;
}
body.site-weloveurlaub .quick-link:hover {
  background: var(--green-700) !important;
  transform: translateY(-2px);
}
/* Alternierende Akzentfarben fuer die Tile-Reihe */
body.site-weloveurlaub .quick-link:nth-child(3n+2) { background: var(--ink-800, #1a1916) !important; }
body.site-weloveurlaub .quick-link:nth-child(3n+2):hover { background: var(--ink-700, #2a2724) !important; }
body.site-weloveurlaub .quick-link:nth-child(3n+3) { background: var(--amber-700) !important; }
body.site-weloveurlaub .quick-link:nth-child(3n+3):hover { background: var(--amber-800) !important; }
body.site-weloveurlaub .quick-link__icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  display: grid !important;
  place-items: center !important;
  color: rgba(255, 255, 255, 0.95) !important;
}
body.site-weloveurlaub .quick-link__icon svg {
  width: 18px !important;
  height: 18px !important;
}
body.site-weloveurlaub .quick-link__label {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.95) !important;
  text-align: center;
  line-height: 1.25;
}

/* People-Spotlight bei wl ausblenden — User: "haben wir bei wl ja nicht". */
body.site-weloveurlaub .people-spotlight {
  display: none !important;
}

/* Newsletter — Pill-Form mit Button INNERHALB des Input-Felds (Spec
   Startseite.html Z. 600-606). Greift fuer alle wl-Seiten. */
body.site-weloveurlaub .newsletter__form,
body.site-weloveurlaub .newsletter-form {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--bg-card) !important;
  padding: 6px !important;
  border-radius: var(--pill-radius, 999px) !important;
  box-shadow: 0 14px 30px rgba(58, 28, 8, 0.18) !important;
  max-width: 540px;
  margin: 0 auto;
}
body.site-weloveurlaub .newsletter__input,
body.site-weloveurlaub .newsletter-form input[type="email"] {
  flex: 1 !important;
  padding: 14px 22px !important;
  border: none !important;
  background: transparent !important;
  font-size: 15px !important;
  color: var(--text-primary) !important;
  outline: none !important;
  font-family: var(--font-sans) !important;
  margin: 0 !important;
}
body.site-weloveurlaub .newsletter__form .btn,
body.site-weloveurlaub .newsletter__form button[type="submit"],
body.site-weloveurlaub .newsletter-form button[type="submit"] {
  padding: 12px 28px !important;
  border-radius: var(--pill-radius, 999px) !important;
  background: var(--action-primary) !important;
  color: var(--text-on-primary) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  border: none !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
  cursor: pointer;
}
body.site-weloveurlaub .newsletter__form button:hover,
body.site-weloveurlaub .newsletter-form button:hover {
  background: var(--action-primary-hover) !important;
}

/* --- Section-Header — eyebrow + dashed line + arrow-link --- */
body.site-weloveurlaub .section-header {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  margin-bottom: 28px !important;
  border-bottom: 1px dashed var(--border-default) !important;
  padding-bottom: 16px !important;
  background: transparent !important;
}
body.site-weloveurlaub .section-header__title {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--text-secondary) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  display: inline !important;
}
body.site-weloveurlaub .section-header__line {
  display: none !important;
}
body.site-weloveurlaub .section-header__link {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--text-link) !important;
}
body.site-weloveurlaub .section-header__link:hover {
  color: var(--text-link-hover) !important;
}
/* Dark-Variante (most-read on bg-inverse) */
body.site-weloveurlaub .section-header--dark {
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}
body.site-weloveurlaub .section-header--dark .section-header__title { color: var(--amber-300) !important; }
body.site-weloveurlaub .section-header--dark .section-header__link { color: var(--amber-300) !important; }

/* --- Featured (bg-cream → bg-soft, Fraunces-Titles) --- */
body.site-weloveurlaub .bg-cream {
  background: var(--bg-soft) !important;
}
body.site-weloveurlaub .featured__grid {
  display: grid !important;
  grid-template-columns: 1.5fr 1fr !important;
  gap: 24px !important;
}
@media (max-width: 900px) {
  body.site-weloveurlaub .featured__grid {
    grid-template-columns: 1fr !important;
  }
}
body.site-weloveurlaub .card--featured {
  background: var(--bg-card) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  border: 1px solid var(--border-subtle) !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
}
body.site-weloveurlaub .card--featured:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(15, 28, 13, 0.08);
}
body.site-weloveurlaub .card--featured .card__image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
body.site-weloveurlaub .card--featured .card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.site-weloveurlaub .card--featured .card__content {
  padding: 28px 32px 32px !important;
}
body.site-weloveurlaub .card--featured .card__title {
  font-family: var(--font-display) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
  color: var(--ink-900, #0d0c0b) !important;
  margin: 16px 0 12px !important;
  text-wrap: pretty;
}
body.site-weloveurlaub .card--featured .card__tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--pill-radius, 999px);
  background: var(--amber-100);
  color: var(--amber-800);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
body.site-weloveurlaub .card--featured .card__meta {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
}
/* Side-Cards (kompakter Listenstil rechts) */
body.site-weloveurlaub .featured__side {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
body.site-weloveurlaub .card--side {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 14px !important;
  padding: 14px !important;
  display: grid !important;
  grid-template-columns: 88px 1fr !important;
  gap: 14px !important;
  align-items: center !important;
  transition: border-color 0.15s, transform 0.15s;
  text-decoration: none;
}
body.site-weloveurlaub .card--side:hover {
  border-color: var(--green-400) !important;
  transform: translateX(2px);
}
body.site-weloveurlaub .card--side .card__image {
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
}
body.site-weloveurlaub .card--side .card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.site-weloveurlaub .card--side .card__title {
  font-family: var(--font-display) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--ink-900, #0d0c0b) !important;
  line-height: 1.3 !important;
  margin: 0 0 4px !important;
}
body.site-weloveurlaub .card--side .card__meta {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* --- Article-Grid (bg-white → bg-page, 3-col) --- */
body.site-weloveurlaub .bg-white {
  background: var(--bg-page) !important;
}
body.site-weloveurlaub .card-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
}
@media (max-width: 900px) {
  body.site-weloveurlaub .card-grid {
    grid-template-columns: 1fr !important;
  }
}
body.site-weloveurlaub .card-grid .card {
  background: var(--bg-card) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid var(--border-subtle) !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
  text-decoration: none;
}
body.site-weloveurlaub .card-grid .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(15, 28, 13, 0.08);
}
body.site-weloveurlaub .card-grid .card__image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
body.site-weloveurlaub .card-grid .card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.site-weloveurlaub .card-grid .card__content {
  padding: 18px 20px 22px !important;
}
body.site-weloveurlaub .card-grid .card__title {
  font-family: var(--font-display) !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: var(--ink-900, #0d0c0b) !important;
  margin: 12px 0 10px !important;
  text-wrap: pretty;
}
body.site-weloveurlaub .card-grid .card__meta {
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
body.site-weloveurlaub .card-grid .card__tag,
body.site-weloveurlaub .card-grid .card .tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--pill-radius, 999px);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* --- Most-Read — bg-inverse, ranked list --- */
body.site-weloveurlaub .most-read {
  background: var(--bg-inverse) !important;
  color: var(--text-on-dark) !important;
  padding: 80px 0 !important;
}
body.site-weloveurlaub .most-read .card-grid,
body.site-weloveurlaub .most-read .read-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px 56px !important;
  background: transparent !important;
}
body.site-weloveurlaub .most-read .card,
body.site-weloveurlaub .most-read .read-item {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0 !important;
  padding: 20px 0 !important;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  align-items: start;
}
body.site-weloveurlaub .most-read .card:hover {
  transform: none !important;
  box-shadow: none !important;
}
body.site-weloveurlaub .most-read .card__title {
  font-family: var(--font-display) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--text-on-dark) !important;
  line-height: 1.3 !important;
  margin: 0 0 6px !important;
}
body.site-weloveurlaub .most-read .card:hover .card__title {
  color: var(--amber-200) !important;
}
body.site-weloveurlaub .most-read .card__meta {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
}

/* --- Section-Pad fuer wl: ueber Container-Layout normalisieren --- */
body.site-weloveurlaub .section-pad,
body.site-weloveurlaub .section-pad--sm {
  max-width: var(--container-max, 1240px);
  margin: 0 auto;
  padding: 72px var(--container-pad, 32px) !important;
}
body.site-weloveurlaub .section-pad--sm {
  padding: 56px var(--container-pad, 32px) !important;
}
body.site-weloveurlaub .content-wrap {
  max-width: var(--container-max, 1240px);
  margin: 0 auto;
}

/* --- People-Spotlight: weniger schwer als td-Variante --- */
body.site-weloveurlaub .people-spotlight {
  background: var(--bg-inverse) !important;
  color: var(--text-on-dark) !important;
  padding: 80px 0 !important;
}

/* --- Category-Slider: dezenter Container --- */
body.site-weloveurlaub .category-slider {
  background: var(--bg-soft) !important;
  padding: 72px 0 !important;
}
/* Slider bleibt horizontal scrollbar (User-Wunsch), nur Card-Styling
   und Hover auf wl-Spec. Cards behalten min-width + scroll-snap. */
body.site-weloveurlaub .category-slider .category-card {
  border-radius: 18px !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.15s ease, box-shadow 0.2s ease !important;
}
body.site-weloveurlaub .category-slider .category-card:hover {
  transform: translateY(-4px) !important;
  border-color: var(--green-400) !important;
  box-shadow: 0 12px 28px rgba(58, 28, 8, 0.12) !important;
}
body.site-weloveurlaub .category-slider .category-card__icon {
  background: var(--bg-card) !important;
  color: var(--green-600) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10) !important;
  border-radius: 12px !important;
  width: 44px !important;
  height: 44px !important;
}
body.site-weloveurlaub .category-slider .category-card__info {
  background: linear-gradient(transparent, rgba(247, 240, 226, 0.96)) !important;
}
body.site-weloveurlaub .category-slider .category-card__name {
  color: var(--ink-900, #0d0c0b) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}
body.site-weloveurlaub .category-slider .category-card__count {
  color: var(--text-muted) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
}

/* === FALLBACK fuer plain <ul> direkt nach <h2 id="praktische-tipps">.
   Production-State von einigen Artikeln (z.B. scharbeutz) hat NUR <ul>
   ohne tips-list-Klasse, andere (braunlage) haben die Klasse.
   Diese Defensiv-Regel stylet beide Varianten gleich. === */
body.site-weloveurlaub h2[id="praktische-tipps"] + ul:not(.tips-list),
body.site-weloveurlaub h2[id="praktische-tipps"] + p + ul:not(.tips-list) {
  list-style: none !important;
  padding: 0 !important;
  margin: 14px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
body.site-weloveurlaub h2[id="praktische-tipps"] + ul:not(.tips-list) > li,
body.site-weloveurlaub h2[id="praktische-tipps"] + p + ul:not(.tips-list) > li {
  background: var(--amber-50) !important;
  border: 1px solid var(--amber-200) !important;
  border-radius: var(--card-radius-sm, 10px) !important;
  padding: 14px 18px !important;
  list-style: none !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
}
body.site-weloveurlaub h2[id="praktische-tipps"] + ul:not(.tips-list) > li::marker,
body.site-weloveurlaub h2[id="praktische-tipps"] + p + ul:not(.tips-list) > li::marker {
  display: none !important;
  content: none !important;
}
body.site-weloveurlaub h2[id="praktische-tipps"] + ul:not(.tips-list) > li > strong:first-child,
body.site-weloveurlaub h2[id="praktische-tipps"] + p + ul:not(.tips-list) > li > strong:first-child {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink-900, #0d0c0b);
}

/* === SEASON-GRID neue Variante mit .season-card als Children
   (statt .season-grid__cell). Production-HTML hat 6 Cards (Mai, Juni,
   Juli-August, September, Oktober, November-Februar) mit h3 + p.
   3-spaltig auf Desktop, 1-col mobile. Vorerst transparent ohne BG —
   wenn an Chart angeklebt, kommt das visuelle ueber Chart-Attach. */
body.site-weloveurlaub .season-grid:has(.season-card) {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
  margin: 18px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
@media (max-width: 900px) {
  body.site-weloveurlaub .season-grid:has(.season-card) {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 640px) {
  body.site-weloveurlaub .season-grid:has(.season-card) {
    grid-template-columns: 1fr !important;
  }
}
body.site-weloveurlaub .season-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--card-radius-md, 12px) !important;
  padding: 18px 20px !important;
  box-shadow: none !important;
  margin: 0 !important;
}
body.site-weloveurlaub .season-card__title {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--ink-900, #0d0c0b) !important;
  margin: 0 0 10px !important;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
  text-transform: none !important;
  letter-spacing: 0 !important;
}
body.site-weloveurlaub .season-card p {
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: var(--text-secondary) !important;
  margin: 0 !important;
}
body.site-weloveurlaub .season-card p strong {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-700, #2a2724);
  font-weight: 500;
}

/* === ITINERARY neue Variante mit .itinerary__day (h3) statt
   .itinerary__time. Production-HTML: <ol.itinerary__list> mit
   <li.itinerary__item> die h3.itinerary__day + p enthalten. */
body.site-weloveurlaub .itinerary {
  background: transparent !important;
  border: none !important;
  border-left: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  margin: var(--section-block-mt, 48px) 0 0 !important;
}
body.site-weloveurlaub .itinerary__list {
  list-style: none !important;
  padding: 0 !important;
  margin: 14px 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
body.site-weloveurlaub .itinerary__item {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-left: 4px solid var(--green-600) !important;
  border-radius: var(--card-radius-md, 12px) !important;
  padding: 18px 22px !important;
  margin-bottom: 12px !important;
  list-style: none !important;
}
body.site-weloveurlaub .itinerary__item::before,
body.site-weloveurlaub .itinerary__item::marker {
  content: none !important;
  display: none !important;
}
body.site-weloveurlaub .itinerary__day {
  font-family: var(--font-display) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--ink-900, #0d0c0b) !important;
  margin: 0 0 8px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  display: block !important;
}
body.site-weloveurlaub .itinerary__item p {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--text-secondary) !important;
  margin: 0 !important;
}
/* Itinerary-h2 (Title) wie normale Section-h2 (mit Counter-Prefix). */
body.site-weloveurlaub .article-body h2.itinerary__title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: var(--section-h2-size, 28px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  color: var(--ink-900, #0d0c0b) !important;
  margin: 0 0 14px !important;
  padding: 0 0 12px !important;
  border: none !important;
  border-bottom: var(--section-h2-bb-width, 2px) solid var(--ink-900, #0d0c0b) !important;
  text-transform: none !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 12px;
}

/* === BEST-TIME-Cards (3-Cols, kompakte Pills mit Saison-Akzent oben).
   ACHTUNG: Base-CSS (Z. 3893) hat repeat(auto-fit, minmax(220px, 1fr))
   was bei breitem Viewport mehr als 3 Spalten erzeugen kann wenn die
   wl-Override aus dem Cache nicht greift. !important erzwingt 3-col. */
body.site-weloveurlaub .best-time {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
  margin: 18px 0;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
@media (max-width: 900px) {
  body.site-weloveurlaub .best-time {
    grid-template-columns: 1fr;
  }
}
body.site-weloveurlaub .best-time__card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--card-radius-md, 12px);
  padding: 18px 20px !important;
  box-shadow: none !important;
}
body.site-weloveurlaub .best-time__card--secret { border-top: 4px solid var(--green-600) !important; }
body.site-weloveurlaub .best-time__card--peak   { border-top: 4px solid var(--amber-500) !important; }
body.site-weloveurlaub .best-time__card--off    { border-top: 4px solid var(--ink-400, #8a8478) !important; }
body.site-weloveurlaub .best-time__label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 4px;
}
body.site-weloveurlaub .best-time__months {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-900, #0d0c0b);
  margin: 0 0 12px;
  text-transform: none;
  letter-spacing: 0;
}
body.site-weloveurlaub .best-time__details {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.site-weloveurlaub .best-time__row {
  display: grid;
  grid-template-columns: 70px 1fr;
  font-size: 12px;
  line-height: 1.4;
}
body.site-weloveurlaub .best-time__row strong {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
}
body.site-weloveurlaub .best-time__row span {
  color: var(--ink-900, #0d0c0b);
}

/* === PASS 5 — Pro-Con-Block-Layout, FAQ-Section, Chart+Saison-Verbund,
   Logo-Gap, Hamburger-Exact-Spec === */

/* Pro-Con / Vergleich: aside.pro-con war im Base-CSS schon ein 2-col-grid
   (display:grid, 1fr 1fr). Dadurch sass h2 + cols nebeneinander statt
   uebereinander. Fuer wl muss aside.pro-con WIEDER block-Layout werden,
   damit die h2 ueber den .pro-con__cols liegt. */
body.site-weloveurlaub .pro-con,
body.site-weloveurlaub aside.pro-con {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}

/* Hamburger jetzt 1:1 Design: 18px x 2px stripes, 4px gap */
body.site-weloveurlaub .header__burger {
  gap: 4px !important;
}
body.site-weloveurlaub .header__burger span {
  width: 18px !important;
  height: 2px !important;
}

/* Logo-Gap groesser fuer mehr Atmen */
body.site-weloveurlaub .header__logo {
  gap: 8px !important;
}

/* FAQ-Section komplett umbauen — kein Card-Box, kein -----,
   continuous solid border zwischen den Items, h2 wie normale Section. */
body.site-weloveurlaub .faq-section {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: var(--section-block-mt, 48px) 0 0 !important;
}
/* section-header in FAQ-Section: h2 als Section-Headline (Fraunces 28px
   + ink-Underline + Counter-Prefix). Kein "------" Line. */
body.site-weloveurlaub .faq-section .section-header {
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}
body.site-weloveurlaub .faq-section .section-header__title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: var(--section-h2-size, 28px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  color: var(--ink-900, #0d0c0b) !important;
  text-transform: none !important;
  margin: 0 0 14px !important;
  padding-bottom: 12px !important;
  border-bottom: var(--section-h2-bb-width, 2px) solid var(--ink-900, #0d0c0b) !important;
  background: none !important;
}
/* Counter increment fuer "HÄUFIGE FRAGEN" h2 in faq-section. */
body.site-weloveurlaub .article-body .faq-section .section-header__title {
  counter-increment: section-num;
}
body.site-weloveurlaub .article-body .faq-section .section-header__title::before {
  content: counter(section-num, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--amber-500);
  flex-shrink: 0;
  text-transform: none;
}
/* Section-Header-Line ("----") in FAQ raus. */
body.site-weloveurlaub .faq-section .section-header__line,
body.site-weloveurlaub .section-header__line {
  display: none !important;
}

/* FAQ-Items: kein Card-Box, einzeln mit continuous solid Border-Bottom,
   erstes Item bekommt Border-Top fuer durchgaengigen Trenn-Strich. */
body.site-weloveurlaub .faq-item {
  border: none !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  border-radius: 0 !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 14px 0 !important;
  overflow: visible !important;
}
body.site-weloveurlaub .faq-item:first-of-type {
  border-top: 1px solid var(--border-subtle) !important;
}
body.site-weloveurlaub .faq-item__q {
  font-family: var(--font-display) !important;
  font-size: var(--faq-summary-size, 17px) !important;
  font-weight: 600 !important;
  color: var(--ink-900, #0d0c0b) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
body.site-weloveurlaub .faq-item__q::after {
  content: '+';
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 400;
  color: var(--amber-500);
  flex-shrink: 0;
}
body.site-weloveurlaub .faq-item--open .faq-item__q::after,
body.site-weloveurlaub .faq-item[open] .faq-item__q::after {
  content: '−';
}
body.site-weloveurlaub .faq-item__a {
  padding: 10px 0 0 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--text-secondary) !important;
}

/* Chart + Saison-Grid + Legend visuell als EIN Card.
   ROOT-CAUSE der bisher nicht funktionierenden Attach-Logik: charts.js
   rendert das eigentliche Card als <figure class="td-chart__frame"> INSIDE
   des wrapping <div class="td-chart">. Ich muss daher .td-chart__frame
   mit der border-radius/border-bottom-Logik treffen, NICHT .td-chart
   (das ist nur ein margin-Wrapper). === */
body.site-weloveurlaub .td-chart {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  margin: 18px 0 0 !important;
}
body.site-weloveurlaub .td-chart__frame {
  background: var(--bg-card) !important;
  background-image: none !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--card-radius-lg, 14px) var(--card-radius-lg, 14px) 0 0 !important;
  border-bottom: none !important;
  box-shadow: none !important;
  padding: 22px 24px 16px !important;
  margin: 0 !important;
}
body.site-weloveurlaub .td-chart + .season-grid {
  background: var(--bg-card) !important;
  border-left: 1px solid var(--border-subtle) !important;
  border-right: 1px solid var(--border-subtle) !important;
  border-top: 1px solid var(--border-subtle) !important;
  border-radius: 0 !important;
  padding: 14px 24px 8px !important;
  margin: 0 !important;
}
body.site-weloveurlaub .season-grid + .season-grid__legend {
  background: var(--bg-card) !important;
  border-left: 1px solid var(--border-subtle) !important;
  border-right: 1px solid var(--border-subtle) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  border-top: none !important;
  border-radius: 0 0 var(--card-radius-lg, 14px) var(--card-radius-lg, 14px) !important;
  padding: 10px 24px 16px !important;
  margin: 0 0 18px !important;
}
/* Saison-Chips kleiner + filigraner (im Chart-Card-Verbund). */
body.site-weloveurlaub .td-chart + .season-grid .season-grid__cell {
  aspect-ratio: 2 / 1 !important;
  font-size: 9px !important;
  letter-spacing: 0.05em !important;
  padding: 0 !important;
}

/* === CARD-HOVER-ANIMATION (filigran fuer wl) ===
   User: "Animationen müssen auch übernommen werden bei den cards, nicht so
   doll wie bei td, filigraner beim mouse over". 1px lift + sanfter shadow. */
body.site-weloveurlaub .activity-card,
body.site-weloveurlaub .fact-card,
body.site-weloveurlaub .best-time__card,
body.site-weloveurlaub .pro-con__col,
body.site-weloveurlaub .travel-distances__card,
body.site-weloveurlaub .article-related-full .news-card,
body.site-weloveurlaub .article-related-full .card,
body.site-weloveurlaub .author-box {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
body.site-weloveurlaub .activity-card:hover,
body.site-weloveurlaub .best-time__card:hover,
body.site-weloveurlaub .pro-con__col:hover,
body.site-weloveurlaub .travel-distances__card:hover,
body.site-weloveurlaub .article-related-full .news-card:hover,
body.site-weloveurlaub .article-related-full .card:hover,
body.site-weloveurlaub .author-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(45, 77, 40, 0.06);
  border-color: var(--border-default);
}
@media (prefers-reduced-motion: reduce) {
  body.site-weloveurlaub .activity-card,
  body.site-weloveurlaub .fact-card,
  body.site-weloveurlaub .best-time__card,
  body.site-weloveurlaub .pro-con__col,
  body.site-weloveurlaub .travel-distances__card,
  body.site-weloveurlaub .article-related-full .news-card,
  body.site-weloveurlaub .article-related-full .card,
  body.site-weloveurlaub .author-box {
    transition: none;
  }
}

/* ==========================================================================
   WL KATEGORIE-PASS — Kategorie.html-Spec aus screen-beispiele/wl-handoff
   Hero (cat-hero) mit grossem Serif-Title + Stat-Pill, Subkategorie-Brand-
   Grid, Top-Story-Card, Twin, More-News-Cards (3 + Slider), Pagination-Pills.
   ========================================================================== */

/* CAT-HERO: helles Sand-BG (kein category.color), grosse Fraunces-H1
   uppercase, dezente Lede, Stat als Pill rechts. ACHTUNG: View setzt
   inline style="background:..." und style="color:rgba(255,255,255,0.8)" auf
   __desc — beides muss mit !important ueberschrieben werden. */
body.site-weloveurlaub .page-hero,
body.site-weloveurlaub section.page-hero[style] {
  background: var(--bg-soft) !important;
  color: var(--ink-900) !important;
  padding: 56px 0 48px !important;
  border-bottom: 1px solid var(--border-subtle);
}
body.site-weloveurlaub .page-hero__inner {
  padding: 0 var(--side-padding) !important;
  max-width: var(--content-max);
  margin: 0 auto;
}
body.site-weloveurlaub .page-hero h1.page-hero__title,
body.site-weloveurlaub .page-hero h1.page-hero__title--white,
body.site-weloveurlaub .page-hero h1[style] {
  font-family: var(--font-display, var(--font-sans)) !important;
  font-weight: 700 !important;
  font-size: clamp(48px, 8vw, 96px) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.025em !important;
  color: var(--ink-900) !important;
  text-transform: uppercase !important;
}
body.site-weloveurlaub .page-hero__desc {
  font-size: 17px !important;
  color: var(--text-secondary) !important;
  max-width: 560px !important;
  margin-top: 18px !important;
  line-height: 1.55 !important;
}
body.site-weloveurlaub .page-hero__flex {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: end !important;
  gap: 24px !important;
}
body.site-weloveurlaub .page-hero__count {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;       /* Zahl + Label zentriert (war flex-end) */
  justify-content: center !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  padding: 12px 20px !important;
  border-radius: 999px !important;
  text-align: center !important;        /* war right -> wirkte unbalanciert/zu breit */
  width: -moz-fit-content !important;
  width: fit-content !important;        /* Chip sitzt eng um den Inhalt */
}
body.site-weloveurlaub .page-hero__count-num {
  font-family: var(--font-display, var(--font-sans)) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--ink-900) !important;
  line-height: 1 !important;
}
body.site-weloveurlaub .page-hero__count-label {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  margin-top: 4px !important;
}

/* SUBKAT-BRAND-GRID: 4-col-Grid (auto-fill min 240px). Cards weiss mit
   Border, oben farbiger Visual-Block, unten Body. Hover: translateY -3px
   + green-400 Border. Erkennt landing-grid (burger_only-Branch der View). */
body.site-weloveurlaub .landing-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  margin: 16px 0 48px !important;
}
@media (max-width: 1024px) {
  body.site-weloveurlaub .landing-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 768px) {
  body.site-weloveurlaub .landing-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  body.site-weloveurlaub .landing-grid {
    grid-template-columns: 1fr !important;
  }
}
body.site-weloveurlaub .landing-tile {
  position: relative;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform 0.2s, border-color 0.15s, box-shadow 0.2s !important;
  min-height: 0 !important;
}
body.site-weloveurlaub .landing-tile:hover {
  transform: translateY(-3px) !important;
  border-color: var(--green-400) !important;
  box-shadow: 0 8px 22px rgba(15, 28, 13, 0.08) !important;
}
/* Visual-Block: Bild oder Stripe-Pattern als Top, ratio 16:10. */
body.site-weloveurlaub .landing-tile__image {
  aspect-ratio: 16/10 !important;
  position: relative !important;
  overflow: hidden !important;
  border-bottom: 4px solid var(--green-600);
}
body.site-weloveurlaub .landing-tile__image img,
body.site-weloveurlaub .landing-tile__image picture {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
/* Wenn kein Bild vorhanden: synthetisches Diagonal-Streifen-Visual via __bar */
body.site-weloveurlaub .landing-tile:not(.landing-tile--with-image) .landing-tile__bar {
  position: relative !important;
  inset: auto !important;
  width: auto !important;
  aspect-ratio: 16/10 !important;
  height: auto !important;
  background: repeating-linear-gradient(135deg, var(--sand-300) 0 14px, var(--sand-200) 14px 15px) !important;
  border-bottom: 4px solid var(--green-600);
  flex-shrink: 0;
}
/* Falls Bild vorhanden, alten 6px-Top-Bar verstecken. */
body.site-weloveurlaub .landing-tile--with-image .landing-tile__bar {
  display: none !important;
}
/* Alternierende Stripe-Farben fuer das 4er-Grid (analog wl-spec). */
body.site-weloveurlaub .landing-tile:nth-child(4n+2):not(.landing-tile--with-image) .landing-tile__bar {
  background: repeating-linear-gradient(135deg, var(--green-300) 0 14px, var(--green-200) 14px 15px) !important;
}
body.site-weloveurlaub .landing-tile:nth-child(4n+3):not(.landing-tile--with-image) .landing-tile__bar {
  background: repeating-linear-gradient(135deg, var(--amber-300) 0 14px, var(--amber-200) 14px 15px) !important;
}
body.site-weloveurlaub .landing-tile:nth-child(4n+4):not(.landing-tile--with-image) .landing-tile__bar {
  background: repeating-linear-gradient(135deg, var(--ink-500) 0 14px, var(--ink-400) 14px 15px) !important;
}
body.site-weloveurlaub .landing-tile__body {
  padding: 18px 20px 16px !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
body.site-weloveurlaub .landing-tile__name {
  font-family: var(--font-display, var(--font-sans)) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--ink-900) !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  text-transform: none !important;
}
body.site-weloveurlaub .landing-tile__desc {
  font-size: 13px !important;
  color: var(--text-secondary) !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  flex: 1;
}
body.site-weloveurlaub .landing-tile__foot {
  margin: 14px 20px 16px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--border-subtle) !important;
  border-color: var(--border-subtle) !important;
}
body.site-weloveurlaub .landing-tile__count {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--text-link) !important;
}
body.site-weloveurlaub .landing-tile__arrow {
  color: var(--text-muted) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* TOP-STORY: news-hero mit Bild links + dunkler Body rechts (Spec-Like).
   Dark inverse-BG, Amber-Meta, Fraunces-Headline. */
body.site-weloveurlaub .news-hero {
  border-radius: 20px !important;
  overflow: hidden !important;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card) !important;
  margin: 0 0 48px;
}
body.site-weloveurlaub .news-hero__link {
  display: grid !important;
  grid-template-columns: 1.3fr 1fr;
  align-items: stretch;
  min-height: 360px;
  text-decoration: none;
}
@media (max-width: 900px) {
  body.site-weloveurlaub .news-hero__link {
    grid-template-columns: 1fr;
  }
  /* Lange deutsche Komposita ("Doppelbesteuerungsabkommen") brechen sonst
     nicht um; ohne min-width:0 zwingt der Grid-Child die Card breiter als den
     Viewport (Overflow rechts). min-width:0 + Wortumbruch + kleineres Padding. */
  body.site-weloveurlaub .news-hero__content {
    min-width: 0 !important;
  }
  body.site-weloveurlaub .news-hero__title,
  body.site-weloveurlaub .news-hero__excerpt {
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }
}
body.site-weloveurlaub .news-hero__content {
  background: var(--ink-900) !important;
  color: var(--text-on-dark) !important;
  padding: 48px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
body.site-weloveurlaub .news-hero__title {
  font-family: var(--font-display, var(--font-sans)) !important;
  font-size: clamp(28px, 3vw, 38px) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
  color: var(--text-on-dark) !important;
  margin-bottom: 14px !important;
}
body.site-weloveurlaub .news-hero__excerpt {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  margin-bottom: 24px !important;
  max-width: 480px;
}
body.site-weloveurlaub .news-hero__meta {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--amber-300) !important;
  letter-spacing: 0.05em !important;
}
body.site-weloveurlaub .news-hero__kicker {
  margin-bottom: 20px !important;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
body.site-weloveurlaub .news-hero__label {
  display: inline-block !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  background: var(--amber-500) !important;
  color: var(--text-on-accent) !important;
}
body.site-weloveurlaub .news-hero .tag {
  border-radius: 999px !important;
  padding: 5px 12px !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  background: var(--green-600) !important;
  color: var(--text-on-primary) !important;
  border: none !important;
}

/* TWIN-Grid (.news-featured-grid): 2-col, white card with border,
   simpler body. */
body.site-weloveurlaub .news-featured-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
  margin: 0 0 48px !important;
}
@media (max-width: 900px) {
  body.site-weloveurlaub .news-featured-grid {
    grid-template-columns: 1fr !important;
  }
}
body.site-weloveurlaub .news-featured {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform 0.2s, border-color 0.15s, box-shadow 0.2s !important;
}
body.site-weloveurlaub .news-featured:hover {
  transform: translateY(-3px) !important;
  border-color: var(--green-400) !important;
  box-shadow: 0 8px 22px rgba(15, 28, 13, 0.08) !important;
}
body.site-weloveurlaub .news-featured__image {
  aspect-ratio: 16/9 !important;
  overflow: hidden;
}
body.site-weloveurlaub .news-featured__image img,
body.site-weloveurlaub .news-featured__image picture {
  width: 100%; height: 100%; object-fit: cover;
}
body.site-weloveurlaub .news-featured__body {
  padding: 22px 24px 26px !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.site-weloveurlaub .news-featured__title {
  font-family: var(--font-display, var(--font-sans)) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--ink-900) !important;
  line-height: 1.25 !important;
  margin: 0 !important;
}
body.site-weloveurlaub .news-featured__excerpt {
  color: var(--text-secondary) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}
body.site-weloveurlaub .news-featured__meta {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.05em !important;
}

/* MORE-NEWS / NEWS-CARD: 3-col Grid mit weisser Card, 14px-Radius,
   subtile Border, Hover translateY -3px. */
body.site-weloveurlaub .news-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}
@media (max-width: 900px) {
  body.site-weloveurlaub .news-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 600px) {
  body.site-weloveurlaub .news-grid {
    grid-template-columns: 1fr !important;
  }
}
body.site-weloveurlaub .news-grid .news-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  transition: transform 0.2s, border-color 0.15s, box-shadow 0.2s !important;
}
body.site-weloveurlaub .news-grid .news-card:hover {
  transform: translateY(-3px) !important;
  border-color: var(--green-400) !important;
  box-shadow: 0 8px 22px rgba(15, 28, 13, 0.06) !important;
}
body.site-weloveurlaub .news-grid .news-card__image {
  aspect-ratio: 5/3 !important;
  overflow: hidden;
}
body.site-weloveurlaub .news-grid .news-card__body {
  padding: 18px 20px 22px !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
body.site-weloveurlaub .news-grid .news-card__title {
  font-family: var(--font-display, var(--font-sans)) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--ink-900) !important;
  line-height: 1.25 !important;
  margin: 0 !important;
}
body.site-weloveurlaub .news-grid .news-card__title a {
  color: var(--ink-900) !important;
}
body.site-weloveurlaub .news-grid .news-card__title a:hover {
  color: var(--text-link) !important;
}
body.site-weloveurlaub .news-grid .news-card__meta {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.05em !important;
  font-weight: 400 !important;
}
/* Subline / Excerpt unter dem Titel — User-Wunsch: News-Cards sollen
   Subtitle als Subline tragen. */
body.site-weloveurlaub .news-grid .news-card__excerpt {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

/* News-Wide (Pattern-Index 3) und News-Quote (Pattern-Index 6): an wl
   anpassen. News-Wide: weisses Card mit gruener Akzent-Border. */
body.site-weloveurlaub .news-wide {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 18px !important;
}
body.site-weloveurlaub .news-wide:hover {
  border-color: var(--green-400) !important;
}
body.site-weloveurlaub .news-wide__title {
  font-family: var(--font-display, var(--font-sans)) !important;
  color: var(--ink-900) !important;
}
body.site-weloveurlaub .news-quote {
  background: var(--green-700) !important;
  color: var(--text-on-primary) !important;
  border-radius: 18px !important;
  padding: 28px !important;
  border: none !important;
}
body.site-weloveurlaub .news-quote__title {
  font-family: var(--font-display, var(--font-sans)) !important;
  color: var(--text-on-primary) !important;
}
body.site-weloveurlaub .news-quote__excerpt {
  color: rgba(255, 255, 255, 0.85) !important;
}
body.site-weloveurlaub .news-quote__cta {
  font-family: var(--font-mono) !important;
  color: var(--amber-200) !important;
  letter-spacing: 0.1em;
}
body.site-weloveurlaub .news-quote__label {
  background: var(--amber-500) !important;
  color: var(--text-on-accent) !important;
  border-radius: 999px !important;
  padding: 5px 12px !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
}

/* PAGINATION: Pill-Buttons, active=ink-900. */
body.site-weloveurlaub .pagination {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 48px 0 !important;
}
body.site-weloveurlaub .pagination__item,
body.site-weloveurlaub .pagination__btn {
  padding: 10px 16px !important;
  border-radius: 999px !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  min-width: 44px !important;
  text-align: center !important;
  transition: all 0.15s !important;
}
body.site-weloveurlaub .pagination__item:hover,
body.site-weloveurlaub .pagination__btn:hover {
  background: var(--bg-card) !important;
  border-color: var(--border-default) !important;
  color: var(--text-primary) !important;
}
body.site-weloveurlaub .pagination__item--active {
  background: var(--ink-900) !important;
  color: var(--text-on-dark) !important;
  border-color: var(--ink-900) !important;
}
body.site-weloveurlaub .pagination__item--active:hover {
  background: var(--ink-800) !important;
  color: var(--text-on-dark) !important;
}
body.site-weloveurlaub .pagination__dots {
  color: var(--text-muted) !important;
  padding: 10px 4px !important;
}

/* SECTION-HEADER auf Kategorie-Seite (Weitere Meldungen): dashed line
   trennt zur Card-Reihe. */
body.site-weloveurlaub .news-spotlight__head,
body.site-weloveurlaub .news-category-row .section-header {
  border-bottom: 1px dashed var(--border-default);
  padding-bottom: 16px;
  margin-bottom: 32px !important;
}

/* Section-Pad / bg-cream: bei wl die Hub-Body-Section auf bg-soft, damit
   die weissen Cards (var(--bg-card)) gegen den Hintergrund klare Kontraste
   bekommen. User-Feedback: "die cards haben keinen eigenen hintergrund mehr". */
body.site-weloveurlaub #ergebnisse.bg-cream,
body.site-weloveurlaub section.bg-cream {
  background: var(--bg-soft) !important;
}

/* ============ KATEGORIE-PASS-2 — User-Feedback-Fixes ============ */

/* Page-Hero-Description: View setzt inline style="color:rgba(255,255,255,0.8)" —
   muss mit !important ueberschrieben werden (auf wl ist BG hell, also Text dunkel). */
body.site-weloveurlaub .page-hero__desc[style],
body.site-weloveurlaub .page-hero p.page-hero__desc {
  color: var(--text-secondary) !important;
}

/* Page-Hero auf Mobile: Stat-Pill stapelt unter den Titel. */
@media (max-width: 720px) {
  body.site-weloveurlaub .page-hero__flex {
    grid-template-columns: 1fr !important;
    align-items: flex-start !important;
  }
  body.site-weloveurlaub .page-hero__count {
    align-self: flex-start;
    /* Im 1-Spalten-Grid streckt der Count sonst auf volle Breite (weisser
       Balken statt Pille). Auf Inhaltsbreite begrenzen. */
    justify-self: start !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
  }
}

/* CARD-IMAGES: bei Cards mit weisser Body-Flaeche darunter, duerfen die
   Bilder unten KEINE abgerundeten Ecken haben. Bilder erben ueblicherweise
   die border-radius via overflow:hidden vom Parent. Wir clippen sie hier
   explizit nur oben. User-Feedback: "bilder unten keine abgerundeten ecken
   haben, wenn darunter ja eine weisse flaeche ist". */
body.site-weloveurlaub .news-card__image,
body.site-weloveurlaub .news-card__image picture,
body.site-weloveurlaub .news-card__image img,
body.site-weloveurlaub .news-featured__image,
body.site-weloveurlaub .news-featured__image picture,
body.site-weloveurlaub .news-featured__image img,
body.site-weloveurlaub .landing-tile__image,
body.site-weloveurlaub .landing-tile__image picture,
body.site-weloveurlaub .landing-tile__image img,
body.site-weloveurlaub .landing-tile__bar,
body.site-weloveurlaub .twin-card .visual,
body.site-weloveurlaub .news-spotlight__image,
body.site-weloveurlaub .news-spotlight__image img {
  border-radius: 0 !important;
}

/* HUB-INTRO (Editorial): View hat jetzt struktur:
     <aside class="hub-intro__side">
       <div class="hub-intro__image">..</div>
       <div class="hub-intro__label">Editorial</div>
     </aside>
     <div class="hub-intro article-body">..</div>
   Bisherige globale CSS-Regeln (1153+) injizieren ::before-EDITORIAL-Bar
   und stylen den Dropcap mit ink-BG + yellow Schrift. Beides fuer wl
   neutralisieren und durch Fraunces-Dropcap in Amber ersetzen. */
body.site-weloveurlaub .hub-intro-section {
  border-top: none !important;
  border-bottom: none !important;
  margin: 48px 0 !important;
  padding: 0 !important;
}
body.site-weloveurlaub .hub-intro-section::before {
  content: none !important;
  display: none !important;
}
body.site-weloveurlaub .hub-intro-section--with-image {
  display: grid !important;
  grid-template-columns: 1fr 1.6fr !important;
  gap: 56px !important;
  align-items: start !important;
}
@media (max-width: 900px) {
  body.site-weloveurlaub .hub-intro-section--with-image {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  /* Mobile: einspaltig -> sticky abschalten, sonst klebt das Bild oben und
     der Kategorietext scrollt dahinter (Bild ueberlappt Text). */
  body.site-weloveurlaub .hub-intro__side {
    position: static !important;
    top: auto !important;
  }
}
body.site-weloveurlaub .hub-intro__side {
  position: sticky;
  top: 100px;
}
body.site-weloveurlaub .hub-intro__image {
  aspect-ratio: 3/2 !important; /* passend zu gpt-image-2 (1536x1024) */
  border-radius: 16px !important;
  overflow: hidden;
  margin-bottom: 16px;
  background: var(--bg-soft);
}
body.site-weloveurlaub .hub-intro__image img,
body.site-weloveurlaub .hub-intro__image picture {
  border-radius: 16px !important;
}
body.site-weloveurlaub .hub-intro__label {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}
body.site-weloveurlaub .hub-intro {
  font-family: var(--font-sans) !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: var(--text-primary) !important;
  max-width: 640px;
}
body.site-weloveurlaub .hub-intro p:first-child {
  font-size: var(--section-p-size, 16px) !important;
  font-weight: 400 !important;
  color: var(--text-primary) !important;
}
body.site-weloveurlaub .hub-intro p:first-child::first-letter {
  font-family: var(--font-display, serif) !important;
  font-size: 76px !important;
  font-weight: 700 !important;
  line-height: 0.9 !important;
  float: left !important;
  margin: 8px 14px 0 0 !important;
  padding: 0 !important;
  color: var(--amber-500) !important;
  background: transparent !important;
}
body.site-weloveurlaub .hub-intro a {
  color: var(--text-link) !important;
  text-decoration-thickness: 1px !important;
  text-decoration-color: var(--green-400) !important;
}
body.site-weloveurlaub .hub-intro a:hover {
  background: transparent !important;
  color: var(--text-link-hover) !important;
}

/* WEITERE MELDUNGEN: 3 Cards sichtbar + Rest als Slider.
   User: "weitere meldungen auf desktop nur 3 cards, der rest als slider".
   .news-grid wird auf wl zur Flex-Scroll-Container. Cards bekommen feste
   33%-Breite, scroll-snap. news-wide/news-quote als reine Card behandeln. */
@media (min-width: 901px) {
  body.site-weloveurlaub .news-grid {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    gap: 24px !important;
    padding: 4px 0 16px !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  body.site-weloveurlaub .news-grid::-webkit-scrollbar { height: 6px; }
  body.site-weloveurlaub .news-grid::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border-radius: 999px;
  }
  body.site-weloveurlaub .news-grid > .news-card,
  body.site-weloveurlaub .news-grid > .news-wide,
  body.site-weloveurlaub .news-grid > .news-quote {
    flex: 0 0 calc((100% - 48px) / 3) !important;
    min-width: 0 !important;
    max-width: calc((100% - 48px) / 3) !important;
    grid-column: auto !important;
    scroll-snap-align: start;
  }
  /* news-wide im Slider: stack image-on-top statt 2-col-Grid (zu schmal) */
  body.site-weloveurlaub .news-grid > .news-wide {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }
  body.site-weloveurlaub .news-grid > .news-wide .news-wide__image {
    aspect-ratio: 5/3 !important;
    width: 100% !important;
  }
  body.site-weloveurlaub .news-grid > .news-wide .news-wide__content {
    padding: 18px 20px 22px !important;
  }
}

/* News-Wide: weisser BG mit dunklem Text (war: --dark Variante mit weissem
   Text der bei wl-Override mit weissem BG zu unsichtbar wurde).
   Alle Variants normalisieren auf wl-Light-Look. */
body.site-weloveurlaub .news-wide,
body.site-weloveurlaub .news-wide--light,
body.site-weloveurlaub .news-wide--dark {
  background: var(--bg-card) !important;
  color: var(--ink-900) !important;
  border: 1px solid var(--border-subtle) !important;
}
body.site-weloveurlaub .news-wide--dark .news-wide__title,
body.site-weloveurlaub .news-wide__title {
  color: var(--ink-900) !important;
}
body.site-weloveurlaub .news-wide--dark .news-wide__excerpt,
body.site-weloveurlaub .news-wide__excerpt {
  color: var(--text-secondary) !important;
}
body.site-weloveurlaub .news-wide--dark .news-wide__meta,
body.site-weloveurlaub .news-wide__meta {
  color: var(--text-muted) !important;
  font-family: var(--font-mono) !important;
}

/* News-Quote: das Pseudo-Element ::before mit grossem Anfuehrungszeichen
   (rgba ink-Tint) raus auf wl, da BG jetzt gruen statt yellow. */
body.site-weloveurlaub .news-quote::before {
  display: none !important;
}

/* AUS DER KATEGORIE — news-spotlight + news-category-row.
   Spec: weisses Card-Container mit Amber-Bottom-Border auf dem Header,
   3-col-Grid darunter, einfache Cards mit Mono-Meta. */
body.site-weloveurlaub .news-spotlight {
  background: var(--bg-soft) !important;
  border: none !important;
  border-top: none !important;
  border-radius: 14px !important;
  padding: 0 !important;
  margin: 40px auto !important;
  max-width: var(--content-max);
}
body.site-weloveurlaub .news-spotlight__head {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-bottom: 4px solid var(--amber-500) !important;
  border-radius: 14px 14px 0 0 !important;
  padding: 16px 22px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 12px;
  flex-wrap: wrap;
}
body.site-weloveurlaub .news-spotlight__kicker {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  font-weight: 500 !important;
  order: 1;
}
body.site-weloveurlaub .news-spotlight__title {
  font-family: var(--font-display, var(--font-sans)) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--ink-900) !important;
  letter-spacing: 0 !important;
  order: 2;
}
body.site-weloveurlaub .news-spotlight__line {
  display: none !important;
}
body.site-weloveurlaub .news-spotlight__link {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--text-link) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  order: 3;
  margin-left: auto;
}
body.site-weloveurlaub .news-spotlight__row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-top: none !important;
  border-radius: 0 0 14px 14px !important;
  padding: 24px !important;
}
@media (max-width: 768px) {
  body.site-weloveurlaub .news-spotlight__row {
    grid-template-columns: 1fr !important;
  }
}
body.site-weloveurlaub .news-spotlight__item {
  gap: 12px !important;
}
body.site-weloveurlaub .news-spotlight__image {
  aspect-ratio: 16/9 !important;
  border-radius: 10px !important;
  overflow: hidden;
}
body.site-weloveurlaub .news-spotlight__headline {
  font-family: var(--font-display, var(--font-sans)) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--ink-900) !important;
  line-height: 1.3 !important;
}
body.site-weloveurlaub .news-spotlight__meta {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.05em !important;
  font-weight: 400 !important;
}
body.site-weloveurlaub .news-category-row {
  background: var(--bg-soft) !important;
  border-radius: 14px !important;
  padding: 0 !important;
  max-width: var(--content-max);
}
body.site-weloveurlaub .news-category-row .section-header {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-bottom: 4px solid var(--amber-500) !important;
  border-radius: 14px 14px 0 0 !important;
  padding: 16px 22px !important;
  margin: 0 !important;
}
body.site-weloveurlaub .news-category-row .section-header__title {
  font-family: var(--font-display, var(--font-sans)) !important;
  font-size: 18px !important;
  color: var(--ink-900) !important;
}
body.site-weloveurlaub .news-category-row .section-header__line {
  display: none !important;
}
body.site-weloveurlaub .news-category-row .card-grid {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-top: none !important;
  border-radius: 0 0 14px 14px !important;
  padding: 24px !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}

/* PAGINATION-FIX: korrekte Selektoren aus partials/pagination.php sind
   .pagination__page / .pagination__btn / .pagination__pages /
   .pagination__page--active / .pagination__ellipsis. */
body.site-weloveurlaub nav.pagination {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 48px 0 80px !important;
  background: transparent !important;
}
body.site-weloveurlaub .pagination__pages {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
body.site-weloveurlaub .pagination__page,
body.site-weloveurlaub .pagination__btn {
  padding: 10px 16px !important;
  border-radius: 999px !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  min-width: 44px !important;
  text-align: center !important;
  transition: all 0.15s !important;
  letter-spacing: 0.05em !important;
  text-transform: none !important;
}
body.site-weloveurlaub .pagination__page:hover,
body.site-weloveurlaub .pagination__btn:hover {
  background: var(--bg-card) !important;
  border-color: var(--border-default) !important;
  color: var(--text-primary) !important;
}
body.site-weloveurlaub .pagination__page--active {
  background: var(--ink-900) !important;
  color: var(--text-on-dark) !important;
  border-color: var(--ink-900) !important;
}
body.site-weloveurlaub .pagination__page--active:hover {
  background: var(--ink-800) !important;
  color: var(--text-on-dark) !important;
}
body.site-weloveurlaub .pagination__btn--disabled {
  color: var(--text-muted) !important;
  cursor: not-allowed;
  opacity: 0.5;
}
body.site-weloveurlaub .pagination__ellipsis {
  color: var(--text-muted) !important;
  padding: 10px 4px !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
}
body.site-weloveurlaub .pagination__btn-label {
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
}
body.site-weloveurlaub .pagination__arrow {
  font-weight: 500 !important;
}

/* ============ KATEGORIE-SPEC-MARKUP (cat-hero + brand-section) ============
   View rendert fuer burger_only-Tenants (= wl) jetzt eigenen Markup, der
   1:1 dem screen-beispiele/wl-handoff/Kategorie.html-Spec entspricht.
   Diese Regeln greifen NUR auf den neuen Markup, sind also automatisch
   wl-only. */

.cat-hero {
  background: var(--bg-soft);
  padding: 56px 0 48px;
}
.cat-hero__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--side-padding);
}
.cat-hero__crumbs {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}
.cat-hero__crumb {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.15s;
}
.cat-hero__crumb:hover { color: var(--text-primary); }
.cat-hero__crumb--current { color: var(--text-primary); }
.cat-hero__crumb-sep {
  margin: 0 10px;
  opacity: 0.5;
}
.cat-hero__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 24px;
}
.cat-hero__title {
  font-family: var(--font-display, serif);
  font-weight: 700;
  font-size: clamp(56px, 8vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--ink-900);
  text-transform: uppercase;
  margin: 0;
}
.cat-hero__lede {
  font-size: 17px;
  color: var(--text-secondary);
  max-width: 560px;
  margin: 18px 0 0;
  line-height: 1.55;
}
.cat-hero__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  padding: 14px 22px;
  border-radius: 999px;
  text-align: right;
}
.cat-hero__stat-num {
  font-family: var(--font-display, serif);
  font-size: 28px;
  font-weight: 700;
  color: var(--ink-900);
  line-height: 1;
}
.cat-hero__stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 4px;
}
@media (max-width: 720px) {
  .cat-hero__grid {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }
  /* Stat-Pill nicht ueber die ganze Grid-Zelle ziehen (Default
     justify-self:stretch → 100%-Pille). User: "135 Artikel ist zu breit". */
  .cat-hero__stat {
    align-self: flex-start;
    justify-self: start;
    width: max-content;
  }
}

/* BRAND-SECTION (1. Sektion: Sub-Kategorien als Brand-Cards) */
.brand-section {
  background: var(--bg-soft);
  padding: 16px 0 80px;
}
.brand-section__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--side-padding);
}
.brand-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 1024px) { .brand-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .brand-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .brand-grid { grid-template-columns: 1fr; } }

.brand-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.2s, border-color 0.15s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.brand-card:hover {
  transform: translateY(-3px);
  border-color: var(--green-400);
  box-shadow: 0 8px 22px rgba(15, 28, 13, 0.08);
}
.brand-visual {
  aspect-ratio: 3/2; /* passend zu gpt-image-2 (1536x1024) — kein Crop */
  position: relative;
  overflow: hidden;
  border-bottom: 4px solid var(--green-600);
  background: repeating-linear-gradient(135deg, var(--sand-300) 0 14px, var(--sand-200) 14px 15px);
}
.brand-visual picture,
.brand-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
/* Alternierende Stripe-Farben + Bottom-Border-Akzent fuer Cards ohne Bild */
.brand-card[data-brand-i="2"] .brand-visual:not(:has(img)) {
  background: repeating-linear-gradient(135deg, var(--green-300) 0 14px, var(--green-200) 14px 15px);
  border-bottom-color: var(--amber-500);
}
.brand-card[data-brand-i="3"] .brand-visual:not(:has(img)) {
  background: repeating-linear-gradient(135deg, var(--amber-300) 0 14px, var(--amber-200) 14px 15px);
  border-bottom-color: var(--ink-700);
}
.brand-card[data-brand-i="4"] .brand-visual:not(:has(img)) {
  background: repeating-linear-gradient(135deg, var(--ink-500) 0 14px, var(--ink-400) 14px 15px);
  border-bottom-color: var(--green-600);
}
.brand-card[data-brand-i="6"] .brand-visual:not(:has(img)) {
  background: repeating-linear-gradient(135deg, var(--green-700) 0 14px, var(--green-600) 14px 15px);
  border-bottom-color: var(--amber-500);
}
.brand-card[data-brand-i="7"] .brand-visual:not(:has(img)) {
  background: repeating-linear-gradient(135deg, var(--amber-500) 0 14px, var(--amber-400) 14px 15px);
  border-bottom-color: var(--green-700);
}
.brand-card[data-brand-i="8"] .brand-visual:not(:has(img)) {
  background: repeating-linear-gradient(135deg, var(--ink-700) 0 14px, var(--ink-800) 14px 15px);
  border-bottom-color: var(--amber-500);
}
.brand-body {
  padding: 18px 20px 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.brand-card__name {
  font-family: var(--font-display, serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.25;
  margin: 0 0 8px;
}
.brand-card__desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
  flex: 1;
  margin: 0;
}
.brand-link {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-link);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand-link__arrow {
  color: var(--text-muted);
}

/* ============ SONDERSEITEN-WIDGETS — wl-Refresh ============
   sunset-widget + random-globe haben hartcodierte td-Farben in inline
   <style>-Blocks. Diese Overrides ueberschreiben sie auf wl mit dem
   Kuestenwaerme-Palette. */

/* SUNSET-WIDGET */
body.site-weloveurlaub .sunset-widget {
  border-radius: 20px !important;
  border: 1px solid var(--border-subtle);
  box-shadow: 0 12px 30px rgba(15, 28, 13, 0.08) !important;
}
body.site-weloveurlaub .sunset-widget__sky {
  /* Sand → Amber → Green-700 (Daemmerung statt td-Pink/Purple). */
  background: linear-gradient(to bottom, var(--amber-200) 0%, var(--amber-400) 45%, var(--green-700) 80%, var(--ink-900) 100%) !important;
}
body.site-weloveurlaub .sunset-widget__sky.is-day {
  background: linear-gradient(to bottom, var(--sand-100) 0%, var(--green-200) 60%, var(--green-400) 100%) !important;
}
body.site-weloveurlaub .sunset-widget__sky.is-night {
  background: linear-gradient(to bottom, var(--ink-900) 0%, var(--green-900) 60%, var(--ink-800) 100%) !important;
}
body.site-weloveurlaub .sunset-widget__sun {
  background: radial-gradient(circle at 30% 30%, var(--amber-100), var(--amber-300) 55%, var(--amber-500) 100%) !important;
  box-shadow: 0 0 80px 20px rgba(184, 111, 28, 0.45), 0 0 30px 8px rgba(230, 169, 85, 0.6) !important;
}
body.site-weloveurlaub .sunset-widget__hero {
  background: linear-gradient(135deg, var(--amber-200) 0%, var(--amber-400) 100%) !important;
  color: var(--ink-900) !important;
  border-radius: 16px !important;
}
body.site-weloveurlaub .sunset-widget__hero * { color: inherit; }
body.site-weloveurlaub .sunset-widget__hero-icon {
  background: rgba(255, 255, 255, 0.4) !important;
  color: var(--amber-800) !important;
}
body.site-weloveurlaub .sunset-widget__hero-label {
  font-family: var(--font-mono) !important;
  letter-spacing: 0.15em !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  opacity: 0.7;
}
body.site-weloveurlaub .sunset-widget__hero-time {
  font-family: var(--font-display, serif) !important;
  font-weight: 700 !important;
  font-size: 42px !important;
  letter-spacing: -0.02em !important;
  color: var(--ink-900) !important;
}
body.site-weloveurlaub .sunset-widget__hero-sub {
  font-size: 13px;
  opacity: 0.85;
}
body.site-weloveurlaub .sunset-card {
  background: var(--bg-soft) !important;
  border: 1px solid var(--border-subtle);
  border-radius: 12px !important;
}
body.site-weloveurlaub .sunset-card__icon {
  background: var(--green-600) !important;
  color: var(--text-on-primary) !important;
}
body.site-weloveurlaub .sunset-card__name {
  font-family: var(--font-display, serif) !important;
  font-weight: 600 !important;
  color: var(--ink-900) !important;
  font-size: 14px !important;
}
body.site-weloveurlaub .sunset-card__times {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--text-muted) !important;
}
body.site-weloveurlaub .sunset-card__times strong {
  color: var(--ink-900) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}
body.site-weloveurlaub .sunset-widget__note {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.05em;
}

/* RANDOM-DESTINATION (Globe) */
body.site-weloveurlaub .random-globe__inner {
  background: linear-gradient(135deg, var(--green-700) 0%, var(--ink-900) 70%) !important;
  color: var(--text-on-primary) !important;
  border-radius: 24px !important;
  box-shadow: 0 24px 56px rgba(15, 28, 13, 0.25) !important;
}
body.site-weloveurlaub .random-globe__inner * { color: inherit; }
body.site-weloveurlaub .random-globe__headline {
  font-family: var(--font-display, serif) !important;
  font-weight: 700 !important;
  font-size: 32px !important;
  letter-spacing: -0.015em !important;
  color: var(--text-on-primary) !important;
}
body.site-weloveurlaub .random-globe__sub {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85) !important;
}
body.site-weloveurlaub .random-globe__btn {
  background: var(--amber-500) !important;
  color: var(--text-on-accent) !important;
  font-family: var(--font-mono) !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  font-size: 13px !important;
  padding: 16px 42px !important;
  border-radius: 999px !important;
  text-transform: uppercase !important;
  border: none;
}
body.site-weloveurlaub .random-globe__btn:hover {
  background: var(--amber-600) !important;
  box-shadow: 0 10px 24px rgba(184, 111, 28, 0.4) !important;
}
body.site-weloveurlaub .random-globe__result img {
  border: 3px solid var(--amber-500) !important;
  border-radius: 16px !important;
}
body.site-weloveurlaub .random-globe__result-name {
  font-family: var(--font-display, serif) !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  letter-spacing: -0.01em !important;
}
body.site-weloveurlaub .random-globe__result-cta {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
  color: var(--amber-300) !important;
  text-transform: uppercase !important;
}

/* ============ ERLEBNIS-TEMPLATE (wl, article_type=erlebnis) ============
   Spec: screen-beispiele/wl-handoff (1)/wl/project/Romantische Gondelfahrt
   auf der Alster — we love urlaub.html. Hero mit Stats, Hero-Media,
   Body-Grid mit Booking-Sidebar (sticky), Related-Section.
   Alle Klassen mit erlebnis-Prefix, kollidiert nicht mit anderen Templates. */

.erlebnis-hero {
  background: var(--bg-soft);
  padding: 32px 0;
}
.erlebnis-hero__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--side-padding);
}
.erlebnis-hero__crumbs {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 20px;
}
.erlebnis-hero__crumb { color: var(--text-secondary); text-decoration: none; }
.erlebnis-hero__crumb:hover { color: var(--text-primary); }
.erlebnis-hero__crumb--current { color: var(--text-primary); }
.erlebnis-hero__crumb-sep { margin: 0 10px; opacity: 0.5; }

.erlebnis-hero__meta-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
}
.erlebnis-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.erlebnis-badge--green { background: var(--green-600); color: var(--text-on-primary); }
.erlebnis-badge--amber { background: var(--amber-100); color: var(--amber-800); }
.erlebnis-badge--outline { background: var(--bg-card); border: 1px solid var(--border-default); color: var(--text-secondary); }

.erlebnis-hero__title {
  font-family: var(--font-display, serif);
  font-weight: 700;
  font-size: clamp(40px, 5.5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  max-width: 880px;
  margin: 0;
}
.erlebnis-hero__lede {
  font-size: 18px;
  color: var(--text-secondary);
  max-width: 720px;
  line-height: 1.55;
  margin: 18px 0 0;
}
.erlebnis-hero__stats {
  display: flex;
  gap: 24px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.erlebnis-hero__stats .item {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  color: var(--text-secondary);
}
.erlebnis-hero__stats svg { color: var(--green-600); flex-shrink: 0; }
.erlebnis-hero__stats strong { color: var(--ink-900); font-weight: 600; }

/* Hero-Media: 3:2 Landscape mit Shadow (gpt-image-2-/Site-Standard; 21:9 schnitt
   die 4:3-/3:2-Bilder zu stark oben/unten ab). */
.erlebnis-hero-media {
  background: var(--bg-soft);
  padding: 0 0 32px;
}
.erlebnis-hero-media__wrap {
  aspect-ratio: 3/2;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 22px 50px rgba(15, 28, 13, 0.18);
  background: var(--green-700);
}
.erlebnis-hero-media__wrap img,
.erlebnis-hero-media__wrap picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

/* Body Grid: 1fr / 380px Sidebar */
.erlebnis-body {
  background: var(--bg-page);
  padding: 56px 0 80px;
}
.erlebnis-body__grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 56px;
  align-items: start;
}
@media (max-width: 900px) {
  .erlebnis-body__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Partner-Strip Banner */
.erlebnis-partner-strip {
  margin-bottom: 40px;
  padding: 14px 18px;
  background: var(--sand-100);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: var(--text-secondary);
  border-left: 3px solid var(--amber-500);
}
.erlebnis-partner-strip .label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--amber-600);
  flex-shrink: 0;
}
.erlebnis-partner-strip .body { flex: 1; line-height: 1.5; }
.erlebnis-partner-strip strong { color: var(--ink-900); }

/* Article-Body Content im Erlebnis-Layout */
.erlebnis-content {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-primary);
}
.erlebnis-content h2 {
  font-family: var(--font-display, serif);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  margin: 40px 0 14px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ink-900);
  color: var(--ink-900);
}
.erlebnis-content h2:first-child { margin-top: 0; }
.erlebnis-content h3 {
  font-family: var(--font-display, serif);
  font-size: 20px;
  font-weight: 600;
  margin: 28px 0 12px;
  color: var(--ink-900);
}
.erlebnis-content p { margin: 0 0 14px; }
/* Dropcap auf den ersten Buchstaben des ersten Absatzes — sowohl unter
   .erlebnis-block .erlebnis-content (Block 01) als auch standalone. */
.erlebnis-block .erlebnis-content > p:first-child::first-letter,
.erlebnis-content > p:first-child::first-letter,
.erlebnis-content > p:first-of-type::first-letter {
  font-family: var(--font-display, serif);
  font-size: 76px;
  line-height: 0.9;
  margin: 8px 14px 0 0;
  color: var(--amber-500);
  font-weight: 700;
  float: left;
  background: transparent;
  padding: 0;
}
.erlebnis-content ul {
  list-style: none;
  padding: 0;
  margin: 16px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
}
.erlebnis-content ul li {
  padding-left: 30px;
  position: relative;
  font-size: 15px;
  line-height: 1.5;
}
.erlebnis-content ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--green-100);
}
.erlebnis-content ul li::after {
  content: '✓';
  position: absolute;
  left: 4px;
  top: 1px;
  color: var(--green-600);
  font-size: 14px;
  font-weight: 700;
}
@media (max-width: 600px) {
  .erlebnis-content ul { grid-template-columns: 1fr; }
}

/* HIGHLIGHTS-Band — gruener BG, weisse Schrift. !important schuetzt
   gegen ueberraschende Cascade-Hits aus Article-Layout-CSS. */
.erlebnis-highlights {
  background: var(--green-700);
  color: var(--text-on-primary) !important;
  border-radius: 16px;
  padding: 32px 36px;
  margin: 0 0 40px;
}
.erlebnis-highlights * { color: inherit; }
.erlebnis-highlights__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.erlebnis-highlights__head h2,
.erlebnis-highlights .erlebnis-highlights__head h2 {
  font-family: var(--font-display, serif) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--text-on-primary) !important;
  margin: 0 !important;
}
.erlebnis-highlights__head .num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--amber-300) !important;
}
.erlebnis-highlights p,
.erlebnis-hl p {
  color: rgba(255, 255, 255, 0.9) !important;
}
.erlebnis-highlights__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 768px) {
  .erlebnis-highlights__grid { grid-template-columns: 1fr; }
}
.erlebnis-hl {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.erlebnis-hl .icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--amber-500);
  color: var(--ink-900);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.erlebnis-hl p {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

/* Block-Sektionen mit nummeriertem h2 */
.erlebnis-block { margin-bottom: 48px; }
.erlebnis-block > h2 {
  font-family: var(--font-display, serif);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ink-900);
  color: var(--ink-900);
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.erlebnis-block > h2 .num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--amber-500);
}
.erlebnis-block p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-primary);
  margin: 0 0 14px;
}
.erlebnis-block p + p { margin-top: 14px; }

/* Inbegriffen — Checkmark-Liste */
.erlebnis-included {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.erlebnis-included li {
  padding-left: 30px;
  position: relative;
  font-size: 15px;
  line-height: 1.5;
  list-style: none;
}
.erlebnis-included li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--green-100);
}
.erlebnis-included li::after {
  content: '✓';
  position: absolute;
  left: 4px;
  top: 1px;
  color: var(--green-600);
  font-size: 14px;
  font-weight: 700;
}
@media (max-width: 600px) {
  .erlebnis-included { grid-template-columns: 1fr; }
}

/* Info-Pills */
.erlebnis-info-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
}
@media (max-width: 768px) {
  .erlebnis-info-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .erlebnis-info-row { grid-template-columns: 1fr; }
}
.erlebnis-info-pill {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: start;
}
.erlebnis-info-pill .ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--sand-100);
  color: var(--green-700);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.erlebnis-info-pill .k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.erlebnis-info-pill .v {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-900);
  margin-top: 2px;
}

/* Treffpunkt mit Karten-Skizze */
.erlebnis-meet {
  margin-top: 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 240px;
  align-items: stretch;
}
@media (max-width: 768px) {
  .erlebnis-meet { grid-template-columns: 1fr; }
}
.erlebnis-meet .info { padding: 22px 24px; }
.erlebnis-meet .label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.erlebnis-meet h3 {
  font-family: var(--font-display, serif);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 14px;
  color: var(--ink-900);
  line-height: 1.3;
}
.erlebnis-meet .map-link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-link);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.erlebnis-meet .map-link:hover { color: var(--text-link-hover); }
.erlebnis-meet .map {
  position: relative;
  background:
    radial-gradient(circle at 60% 50%, var(--sand-200) 0 22%, transparent 24%),
    linear-gradient(135deg, var(--green-100) 0 65%, var(--sand-100) 65% 100%);
  min-height: 160px;
}
.erlebnis-meet .map::before {
  content: '';
  position: absolute;
  top: 35%;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent 32%, var(--green-200) 32% 34%, transparent 34%);
}
/* Echte OSM-Karte (DSGVO-Proxy) statt Deko-Platzhalter */
.erlebnis-meet .map__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}
.erlebnis-meet .map--osm::before { display: none; }
.erlebnis-meet .map--osm .pin {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.erlebnis-meet .map .pin {
  position: absolute;
  top: 52%;
  left: 60%;
  width: 22px;
  height: 22px;
  background: var(--amber-500);
  border: 3px solid var(--bg-card);
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(184, 111, 28, 0.5);
  transform: translate(-50%, -100%);
}
.erlebnis-meet .map .pin::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid var(--amber-500);
}

/* Hinweis-Box (Tipp der Redaktion) */
.erlebnis-hint {
  margin-top: 18px;
  padding: 18px 22px;
  background: var(--amber-50);
  border: 1px solid var(--amber-200);
  border-left: 4px solid var(--amber-500);
  border-radius: 10px;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 14px;
  align-items: start;
}
.erlebnis-hint .ico { color: var(--amber-600); margin-top: 2px; }
.erlebnis-hint h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--amber-700);
  margin: 0 0 6px;
}
.erlebnis-hint p {
  font-size: 14px;
  color: var(--ink-800);
  line-height: 1.55;
  margin: 0 0 6px;
}
.erlebnis-hint p:last-child { margin-bottom: 0; }

/* Booking-Card Specs (Mini-Pills im Sidebar) */
.erlebnis-booking-card__specs { padding: 0 22px; }
.erlebnis-booking-card__specs .spec {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--border-default);
  font-size: 14px;
  align-items: center;
}
.erlebnis-booking-card__specs .spec:last-child { border-bottom: none; }
.erlebnis-booking-card__specs .spec .ico { color: var(--green-600); }
.erlebnis-booking-card__specs .spec .k { color: var(--text-secondary); }
.erlebnis-booking-card__specs .spec .v { color: var(--ink-900); font-weight: 500; }
.erlebnis-booking-card__price-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  margin-top: 4px;
  text-align: right;
}

/* Weitere Partnerangebote — Stack mit kompakten Card-Rows */
.erlebnis-partner-stack {
  margin-top: 24px;
}
.erlebnis-partner-stack h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border-default);
  font-weight: 500;
}
.erlebnis-partner-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 14px;
  padding: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  align-items: center;
  margin-bottom: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.erlebnis-partner-row:hover {
  border-color: var(--green-400);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(15, 28, 13, 0.06);
}
.erlebnis-partner-row .vis {
  aspect-ratio: 1/1;
  border-radius: 8px;
  overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--green-300) 0 10px, var(--green-200) 10px 11px);
}
.erlebnis-partner-row:nth-child(odd) .vis {
  background: repeating-linear-gradient(135deg, var(--amber-300) 0 10px, var(--amber-200) 10px 11px);
}
.erlebnis-partner-row:nth-child(3n) .vis {
  background: repeating-linear-gradient(135deg, var(--sand-300) 0 10px, var(--sand-200) 10px 11px);
}
.erlebnis-partner-row .vis img,
.erlebnis-partner-row .vis picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
.erlebnis-partner-row .brand {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber-600);
}
.erlebnis-partner-row h4 {
  font-family: var(--font-display, serif);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  margin: 4px 0 0;
  color: var(--ink-900);
}
.erlebnis-partner-row p {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 4px 0 0;
  line-height: 1.4;
}
.erlebnis-partner-row .arrow {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--green-600);
  color: var(--text-on-primary);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.erlebnis-partner-row:hover .arrow { background: var(--green-700); }

/* Author-Inline */
.erlebnis-author-inline {
  margin-top: 32px;
  padding: 18px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  display: flex;
  gap: 14px;
  align-items: center;
}
.erlebnis-author-inline .avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--amber-300), var(--amber-600));
}
.erlebnis-author-inline .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.erlebnis-author-inline .name { font-weight: 600; font-size: 14px; color: var(--ink-900); }
.erlebnis-author-inline .role { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.erlebnis-author-inline .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  margin-top: 2px;
}

/* Booking Sidebar */
.erlebnis-booking-rail {
  position: sticky;
  top: 100px;
}
@media (max-width: 900px) {
  .erlebnis-booking-rail { position: static; }
}
.erlebnis-booking-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(15, 28, 13, 0.06);
}
.erlebnis-booking-card__top {
  background: var(--ink-900);
  color: var(--text-on-dark) !important;
  padding: 18px 22px 16px;
}
.erlebnis-booking-card__top * { color: inherit; }
.erlebnis-booking-card__partner-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--amber-300) !important;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.erlebnis-booking-card .erlebnis-booking-card__top h3,
.erlebnis-booking-card__top h3 {
  font-family: var(--font-display, serif) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: var(--text-on-dark) !important;
  margin: 0 !important;
}
.erlebnis-booking-card__price-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  padding: 18px 22px 14px;
}
.erlebnis-booking-card__price-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.erlebnis-booking-card__price {
  font-family: var(--font-display, serif);
  font-size: 38px;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.02em;
  line-height: 1;
}
.erlebnis-booking-card__price .currency {
  font-size: 18px;
  color: var(--text-secondary);
  margin-left: 4px;
  font-weight: 500;
}
.erlebnis-booking-card__price-fallback {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
  font-style: italic;
}
.erlebnis-booking-card__cta-section { padding: 4px 22px 22px; }
.erlebnis-booking-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  background: var(--action-primary);
  color: var(--text-on-primary);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.15s;
}
.erlebnis-booking-card__cta:hover { background: var(--action-primary-hover); }
.erlebnis-booking-card__footnote {
  padding: 0 22px 18px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
  text-align: center;
}

.erlebnis-provider-card {
  margin-top: 18px;
  padding: 18px 22px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
}
.erlebnis-provider-card .label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.erlebnis-provider-card .row { display: flex; gap: 14px; align-items: center; }
.erlebnis-provider-card .logo {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--green-500), var(--green-700));
  color: var(--text-on-primary);
  display: grid;
  place-items: center;
  font-family: var(--font-display, serif);
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
}
.erlebnis-provider-card .name { font-weight: 600; font-size: 14px; color: var(--ink-900); }
.erlebnis-provider-card .meta { font-size: 12px; color: var(--text-secondary); margin-top: 1px; }

.erlebnis-share-card {
  margin-top: 18px;
  padding: 18px 22px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.erlebnis-share-card .label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.erlebnis-share-card .icons { display: flex; gap: 8px; }
.erlebnis-share-card .icons a {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  display: grid;
  place-items: center;
  color: var(--text-secondary);
  transition: all 0.15s;
  text-decoration: none;
}
.erlebnis-share-card .icons a:hover {
  background: var(--green-600);
  color: var(--text-on-primary);
  border-color: var(--green-600);
}

/* Related Section */
.erlebnis-related {
  padding: 56px 0;
  background: var(--bg-soft);
}
.erlebnis-related__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 32px;
  border-bottom: 1px dashed var(--border-default);
  padding-bottom: 16px;
}
.erlebnis-related__head .eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.erlebnis-related__head a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-link);
  font-weight: 500;
  text-decoration: none;
}
.erlebnis-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 768px) {
  .erlebnis-related__grid { grid-template-columns: 1fr; }
}
.erlebnis-related-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.2s, border-color 0.15s, box-shadow 0.2s;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}
.erlebnis-related-card:hover {
  transform: translateY(-3px);
  border-color: var(--green-400);
  box-shadow: 0 8px 22px rgba(15, 28, 13, 0.06);
}
.erlebnis-related-card .visual {
  aspect-ratio: 4/3;
  position: relative;
  overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--sand-300) 0 14px, var(--sand-200) 14px 15px);
}
.erlebnis-related-card .visual img,
.erlebnis-related-card .visual picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
.erlebnis-related-card .visual .price-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--bg-card);
  padding: 5px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-900);
  letter-spacing: 0.05em;
}
.erlebnis-related-card .body { padding: 16px 20px 20px; }
.erlebnis-related-card h3 {
  font-family: var(--font-display, serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 8px;
  color: var(--ink-900);
}
.erlebnis-related-card .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

/* === ADMANAGER CARDS — token-driven, tenant-aware =========================
   Komplett ueber CSS-Variablen gesteuert. td-Defaults = Pop-Art-Brutalist
   (3px Rahmen, harter Schatten, Pill-CTA). wl-Overrides via
   body.site-weloveurlaub setzen weichere Tokens (Serif-Headline, 1px Rahmen,
   Soft-Shadow, leichter Pill-Radius).
   Neue Tenants koennen ein Set Tokens per body.site-XXX ueberschreiben —
   das CSS muss nicht angefasst werden. */

.admanager-slot--article-end { margin: 32px auto; max-width: 920px; }
.admanager-slot--sidebar { margin: 0 auto 18px; }

/* Intro-Top Ad: ueber dem Article-Body, nur Desktop. Mobile hidden weil
   da schon der Hero + Breaking-News oben sind — Slot waere too crowded. */
.ad-intro-top {
  max-width: 920px;
  margin: 0 auto 24px;
}
@media (max-width: 899px) {
  .ad-intro-top { display: none; }
}

/* In-Content Ad: vor jedem 2./4./6. h2. Auf Mobile wegblenden — dort
   sind Ad-Frequency-Limits strenger und der Sticky-Footer reicht.
   Wenn mehrere h2 sehr eng aufeinander folgen (wl-Rewrites haben oft
   8-10 h2), produziert das Pattern bis zu 4 Ads pro Artikel — das ist OK
   weil zwischen den Ads immer min. 2 h2-Sektionen liegen. */
/* Horizontaler Banner-Slot mit FESTER Hoehe — reserviert Platz im HTML,
   damit gpt.js (async) keinen Layout-Shift verursacht. Breite fluid bis
   970px, Banner zentriert. Desktop 90px, Mobile 100px Slot-Hoehe. */
.ad-horizontal {
  position: relative;
  width: 100%;
  max-width: 970px;
  margin: 28px auto;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ad-horizontal__label {
  position: absolute;
  top: 4px;
  left: 8px;
  font-size: 9px;
  color: #595550; /* WCAG: #9A9690 war nur 2.8:1 -> 7:1 (AAA), Werbe-Label lesbar */
  font-weight: 600;
  letter-spacing: 0.04em;
  pointer-events: none;
  z-index: 1;
}
.ad-horizontal__inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ad-horizontal__inner .admanager-slot,
.ad-horizontal__inner .ad-gam-wrap { margin: 0; width: 100%; }
.ad-horizontal__inner img { max-height: 90px; width: auto; height: auto; }
@media (max-width: 767px) {
  .ad-horizontal { min-height: 100px; margin: 20px auto; }
  .ad-horizontal__inner img { max-height: 100px; }
}

.ad-in-content {
  margin: 36px 0;
  /* Reveal-Animation (siehe show.php) setzt .reveal-Klasse auf alle
     direct-children der article-body und startet bei opacity:0. Bei
     wl ist das auf manchen Devices haengengeblieben, weil der
     IntersectionObserver durch sticky-Elemente im Layout nicht
     korrekt feuerte. Hier explizit auf 1 ueberschreiben — fuer Ads
     wollen wir keine Fade-in-Animation, sie sollen direkt sichtbar
     sein wenn der User vorbeiscrollt. */
  opacity: 1 !important;
  transform: none !important;
}
@media (max-width: 899px) {
  .ad-in-content { display: none; }
}

/* Sticky Footer Ad: Mobile only. Desktop hat schon Sidebar-Ads,
   da ist ein Footer-Sticky overkill.
   iOS Chrome Bug: Bottom-Toolbar ueberlagert fixed:bottom:0 — JS in
   AdRenderer::renderStickyFooter trackt visualViewport + translatiert
   den Banner an die richtige Visual-Bottom-Position. */
.admanager-slot--sticky-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: #fff;
  border-top: 1px solid #DCD8CE;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  will-change: transform;
  /* GPU-Layer fuer smoothe Translation-Updates */
  transform: translateZ(0);
}
@media (min-width: 768px) {
  .admanager-slot--sticky-footer { display: none !important; }
}
@media (max-width: 767px) {
  /* Padding am Body damit der letzte Content nicht vom Sticky-Footer
     verdeckt wird. 64px = max Brand-Card-Hoehe (60px) + Border (2px).
     + iOS safe-area damit's nicht mit der Home-Indicator-Bar kollidiert. */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  /* Sticky-Footer auf hoeherer z-index als normaler Content, aber
     niedriger als CMP-Banner (CMP hat z-index 99999). */
  .admanager-slot--sticky-footer { z-index: 90 !important; }
}

/* Sicherheitsnetz NUR Mobile (<=919px): kein In-Content-Ad-Creative darf den
   schmalen Content-Container sprengen (zusaetzlich zum Size-Mapping im GAM-JS).
   Bewusst NICHT auf Desktop — dort ist das Sidebar-Ad 300px breit und wuerde
   sonst auf die 264px-Spalte geklippt (Button abgeschnitten). Sticky-Footer
   ausgenommen (fixed, volle Breite). Sidebar ist auf Mobile ohnehin ausgeblendet. */
@media (max-width: 919px) {
  .ad-gam-wrap:not(.admanager-slot--sticky-footer),
  .admanager-slot:not(.admanager-slot--sticky-footer) {
    max-width: 100%;
    overflow: hidden;
  }
  .ad-gam-wrap iframe,
  .admanager-slot iframe {
    max-width: 100%;
  }
}

/* Ad-Label (kleiner "Anzeige"-Pin) — token-driven */
.adm-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  background: var(--adm-label-bg, #111);
  color: var(--adm-label-fg, #FFDC00);
  padding: 3px 8px;
  border-radius: var(--adm-label-radius, 3px);
  display: inline-block;
  margin-bottom: 8px;
}
body.site-weloveurlaub .adm-label {
  --adm-label-bg: var(--wl-primary-dark, #2E4129);
  --adm-label-fg: #fff;
}

/* ============================================================
   Native Card (article-end)
   ============================================================ */
.adm-native-card {
  /* td-Defaults — Pop-Art-Brutalist */
  --adm-bg:           #fff;
  --adm-border:       var(--ink, #111);
  --adm-border-w:     3px;
  --adm-radius:       14px;
  --adm-shadow:       4px 4px 0 var(--adm-border);
  --adm-shadow-cta:   3px 3px 0 var(--adm-border);
  --adm-pad:          22px 26px;
  --adm-font:         Inter, -apple-system, sans-serif;
  --adm-headline-font: var(--adm-font);
  --adm-headline-weight: 900;
  --adm-headline-tracking: -0.01em;
  --adm-cta-radius:   99px;

  --adm-badge-bg:     #FF3864;
  --adm-badge-fg:     #fff;
  --adm-headline:     #B71C4C;
  --adm-text:         #3A3833;
  --adm-meta:         #6E6A60;
  --adm-cta-bg:       #FFDC00;
  --adm-cta-fg:       #111;
  --adm-logo-radius:  8px;
  --adm-logo-bg:      #fff;

  background: var(--adm-bg);
  border: var(--adm-border-w) solid var(--adm-border);
  border-radius: var(--adm-radius);
  box-shadow: var(--adm-shadow);
  padding: var(--adm-pad);
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 22px;
  align-items: center;
  position: relative;
  font-family: var(--adm-font);
}
.adm-native-card__badge {
  position: absolute;
  top: -12px;
  right: 24px;
  background: var(--adm-badge-bg);
  color: var(--adm-badge-fg);
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 2px solid var(--adm-border);
  box-shadow: 2px 2px 0 var(--adm-border);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.adm-native-card__logo {
  width: 80px;
  height: 80px;
  border-radius: var(--adm-logo-radius);
  border: 2px solid var(--adm-border);
  background: var(--adm-logo-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 6px;
}
.adm-native-card__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.adm-native-card__body { min-width: 0; }
.adm-native-card__brand {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--adm-meta);
  margin-bottom: 4px;
  font-family: var(--adm-font);
}
.adm-native-card__headline {
  font-family: var(--adm-headline-font);
  font-size: 18px;
  font-weight: var(--adm-headline-weight);
  line-height: 1.25;
  margin: 0 0 6px;
  letter-spacing: var(--adm-headline-tracking);
  color: var(--adm-headline);
}
.adm-native-card__sub {
  font-size: 13px;
  color: var(--adm-text);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.adm-native-card__cta {
  background: var(--adm-cta-bg);
  color: var(--adm-cta-fg);
  padding: 14px 22px;
  border-radius: var(--adm-cta-radius);
  font-weight: 800;
  font-size: 13px;
  border: 2px solid var(--adm-border);
  box-shadow: var(--adm-shadow-cta);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Mobile (≤640px) */
@media (max-width: 640px) {
  .adm-native-card { grid-template-columns: 1fr; padding: 18px 16px 16px; gap: 12px; margin-top: 28px; }
  .adm-native-card__badge { top: -12px; right: 12px; font-size: 10px; padding: 5px 10px; }
  .adm-native-card__logo { width: 56px; height: 56px; margin: 4px 0 0; }
  .adm-native-card__headline { font-size: 16px; }
  .adm-native-card__sub { -webkit-line-clamp: 3; }
  .adm-native-card__cta { width: 100%; justify-content: center; padding: 12px 18px; }
}

/* ============================================================
   Half-Page Card (sidebar)
   ============================================================ */
.adm-halfpage-card {
  --adm-bg:           #fff;
  --adm-border:       var(--ink, #111);
  --adm-border-w:     3px;
  --adm-radius:       14px;
  --adm-shadow:       6px 6px 0 var(--adm-border);
  --adm-font:         Inter, -apple-system, sans-serif;
  --adm-headline-font: var(--adm-font);
  --adm-headline-weight: 900;
  --adm-headline-tracking: -0.01em;
  --adm-headline:     var(--ink, #111);
  --adm-brand-color:  #B71C4C;
  --adm-text:         #3A3833;
  --adm-cta-bg:       #FFDC00;
  --adm-cta-fg:       #111;
  --adm-cta-radius:   99px;
  --adm-cta-shadow:   3px 3px 0 var(--adm-border);
  --adm-media-bg:     #F4F2EC;
  --adm-fallback-bg:  #FFDC00;

  background: var(--adm-bg);
  border: var(--adm-border-w) solid var(--adm-border);
  border-radius: var(--adm-radius);
  box-shadow: var(--adm-shadow);
  width: 300px;
  height: 600px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: var(--adm-font);
}
.adm-halfpage-card__media { height: 280px; overflow: hidden; flex-shrink: 0; background: var(--adm-media-bg); }
.adm-halfpage-card__media-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adm-halfpage-card__media-fallback {
  width: 100%;
  height: 100%;
  background: var(--adm-fallback-bg);
  background-image: radial-gradient(circle at center, var(--ink, #111) 1.2px, transparent 1.4px);
  background-size: 14px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.adm-halfpage-card__logo-wrap {
  background: #fff;
  border: 2px solid var(--adm-border);
  border-radius: 8px;
  padding: 8px;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.adm-halfpage-card__logo-wrap img { max-width: 100%; max-height: 100%; object-fit: contain; }
.adm-halfpage-card__body { padding: 16px 18px 18px; flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: hidden; }
.adm-halfpage-card__brand {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--adm-brand-color);
  font-family: var(--adm-font);
}
.adm-halfpage-card__headline {
  font-family: var(--adm-headline-font);
  font-size: 19px;
  font-weight: var(--adm-headline-weight);
  line-height: 1.2;
  margin: 0;
  letter-spacing: var(--adm-headline-tracking);
  color: var(--adm-headline);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.adm-halfpage-card__sub {
  font-size: 12px;
  color: var(--adm-text);
  margin: 0;
  line-height: 1.45;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.adm-halfpage-card__cta {
  background: var(--adm-cta-bg);
  color: var(--adm-cta-fg);
  padding: 12px 16px;
  border-radius: var(--adm-cta-radius);
  font-weight: 800;
  font-size: 13px;
  text-align: center;
  border: 2px solid var(--adm-border);
  box-shadow: var(--adm-cta-shadow);
}

/* ============================================================
   wl-Tenant: weicher Reise-Magazin-Look
   ============================================================ */
body.site-weloveurlaub .adm-native-card,
body.site-weloveurlaub .adm-halfpage-card {
  --adm-bg:           var(--bg-card, #fff);
  --adm-border:       var(--border-default, #D9D2BD);
  --adm-border-w:     1px;
  --adm-radius:       var(--radius-md, 16px);
  --adm-shadow:       0 6px 24px rgba(45, 45, 35, 0.08);
  --adm-shadow-cta:   none;
  --adm-cta-shadow:   none;
  --adm-font:         var(--font-sans, Inter, sans-serif);
  --adm-headline-font: var(--font-display, Georgia, serif);
  --adm-headline-weight: 700;
  --adm-headline-tracking: -0.005em;
  --adm-cta-radius:   var(--radius-pill, 50px);

  --adm-badge-bg:     var(--wl-primary-mid, #5C7857);
  --adm-badge-fg:     #fff;
  --adm-headline:     var(--wl-primary-dark, #2E4129);
  --adm-brand-color:  var(--wl-primary-mid, #5C7857);
  --adm-text:         var(--text-secondary, #4A4A40);
  --adm-meta:         var(--text-muted, #6E6A60);
  --adm-cta-bg:       var(--wl-primary-mid, #5C7857);
  --adm-cta-fg:       #fff;
  --adm-logo-radius:  var(--radius-sm, 12px);
  --adm-logo-bg:      var(--bg-soft, #F8F4E9);
  --adm-media-bg:     var(--bg-soft, #F8F4E9);
  --adm-fallback-bg:  var(--bg-soft, #F8F4E9);
}
/* wl-Native: Logo-Border duenner + dezenter */
body.site-weloveurlaub .adm-native-card__logo {
  border-width: 1px;
  border-color: var(--border-subtle, #E8E0CB);
}
body.site-weloveurlaub .adm-native-card__badge {
  border-width: 0;
  box-shadow: none;
  font-weight: 700;
}
body.site-weloveurlaub .adm-native-card__cta {
  border-width: 0;
}
body.site-weloveurlaub .adm-halfpage-card__cta {
  border-width: 0;
}
body.site-weloveurlaub .adm-halfpage-card__logo-wrap {
  border-width: 1px;
  border-color: var(--border-subtle, #E8E0CB);
  background: #fff;
}

/* v1776328499 */

/* ===================================================================
   agentur.rocks (Tenant ar) — gezielte Farb-Overrides zum Abgleich
   mit dem freigegebenen claude-Design. Lime NUR fuer Ticker, Newsletter
   und Meistgelesen-Zahlen; Header/Login/Buttons laufen ueber Indigo
   (--yellow ist fuer ar auf Indigo gesetzt).
   =================================================================== */
body.site-agenturrocks .newsletter { background: var(--amber-500); }
body.site-agenturrocks .newsletter__title { color: var(--ink-900); }
body.site-agenturrocks .newsletter__subtitle { color: rgba(2, 6, 23, 0.72); }
body.site-agenturrocks .newsletter__disclaimer,
body.site-agenturrocks .newsletter__inner small { color: rgba(2, 6, 23, 0.6); }
body.site-agenturrocks .newsletter__form .btn,
body.site-agenturrocks .newsletter__form button { background: var(--green-700); color: #fff; }
body.site-agenturrocks .newsletter__form .btn:hover,
body.site-agenturrocks .newsletter__form button:hover { background: var(--green-800); }
/* Meistgelesen-Zahlen + Pfeil bleiben Lime (yellow ist jetzt Indigo) */
body.site-agenturrocks .most-read__num,
body.site-agenturrocks .most-read__arrow { color: var(--amber-500); }

/* Hero-Band hell (--yellow ist jetzt Indigo → sonst dunkles Band, Text
   unsichtbar). Text ist per Default dunkel → passt auf hellem Band. */
body.site-agenturrocks .hero { background: var(--bg-soft); }
body.site-agenturrocks .hero__tag { background: var(--green-700); color: #fff; }

/* Ticker dunkel + helle Schrift + Lime-Badge (statt Indigo via --pink).
   box-shadow im Default-Badge erzeugte die "Indigo-Fluegel" links/rechts
   (16px 0 0 var(--pink), -4px 0 0 var(--pink)) → fuer ar entfernen. */
body.site-agenturrocks .ticker { background: var(--ink-900); }
body.site-agenturrocks .ticker__badge { background: var(--amber-500); color: var(--ink-900); box-shadow: none; }
body.site-agenturrocks .ticker a,
body.site-agenturrocks .ticker__headline,
body.site-agenturrocks .ticker__link { color: var(--sand-50); }

/* Header weiss (Default `.header { background: var(--ink) }` ist dunkel),
   Nav-Text dunkel mit Indigo-Hover statt weiss/yellow. */
body.site-agenturrocks .header { background: #fff; border-bottom: 1px solid var(--border-subtle); }
body.site-agenturrocks .header__nav a { color: var(--ink-800); }
body.site-agenturrocks .header__nav a:hover { color: var(--green-700); }
body.site-agenturrocks .header__search-btn { color: var(--ink-700); background: transparent; }
body.site-agenturrocks .header__search-btn:hover { background: var(--sand-100); color: var(--ink-900); }
body.site-agenturrocks .header__burger span { background: var(--ink-800); }
/* Login-Button: weisser Text auf Indigo. */
body.site-agenturrocks .header__login-btn { color: #fff; background: var(--green-700); }
body.site-agenturrocks .header__login-btn:hover { background: var(--green-800); color: #fff; }

/* Logo-Wordmark "agentur.rocks" (Space Grotesk, .rocks gedaempft) */
body.site-agenturrocks .header__logo { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; font-size: 24px; }
body.site-agenturrocks .header__logo-word { color: var(--ink-900); }
body.site-agenturrocks .header__logo-tld { color: var(--amber-500); }

/* "Weitere Beitraege" (.article-related-full) hatte NUR wl-Regeln → fuer
   andere Tenants fehlte die Breitenbegrenzung (lief ueber volle Breite).
   Generische Basis fuer alle Tenants; wl-Regeln bleiben spezifischer. */
.article-related-full { background: var(--bg-soft); padding: 56px 0; margin-top: 0; }
.article-related-full__inner { max-width: var(--container-max, 1240px); margin: 0 auto; padding: 0 var(--container-pad, 32px); }
.article-related-full .section-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 28px; padding-bottom: 14px; border-bottom: 1px dashed var(--border-default); }
.article-related-full .section-header__eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-secondary); }
.article-related-full .section-header__link { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-link); font-weight: 500; text-decoration: none; }

/* === Generische Basis fuer .article-hero-band (war nur wl-scoped) ===
   article-hero-band ist die helle Sektion-Bar oben am Artikel mit
   Breadcrumb + Hero-Bild. Ohne diese Basis hatte das Band fuer ar (und
   jeden Nicht-wl-Tenant) keine Hintergrundfarbe — wirkte als ob das
   Hero in der Mitte schwebt statt eine Sektion zu sein. */
.article-hero-band {
  background: var(--bg-soft);
  padding: var(--hero-band-pad-y, 32px) 0;
  margin-bottom: 0;
}
.article-hero-band__inner {
  max-width: var(--container-max, 1240px);
  margin: 0 auto;
  padding: 0 var(--container-pad, 32px);
}

/* === data-compare: Header-Dunkelband muss ueber die volle Breite des
   scrollbaren Inhalts gehen, nicht nur ueber die Header-Cells. Fix:
   sticky am linken Rand mit min-width=100%, so dass die dunkle BG
   beim Horizontal-Scroll im Viewport bleibt UND mit-scrollt. */
.data-compare__head {
  position: sticky;
  top: 0;
  z-index: 1;
  min-width: 100%;
  width: max-content;
}

/* === Hero: Verlauf auf die Sektion legen, .article-hero-landscape transparent ===
   article-hero-landscape hatte den Verlauf als eigenen Hintergrund, die
   Sektion (.article-hero-band) war flach var(--bg-soft) → optisch zwei
   verschiedene Hintergruende. User-Wunsch: Verlauf NUR auf der Sektion,
   landscape transparent → ein durchgehendes Band ueber den ganzen Viewport. */
.article-hero-band {
  background: var(--section-bg, var(--bg-soft));
}
.article-hero-landscape {
  background: transparent;
}

/* === Hero-Bild-Format für ar: 3:2 entsprechend gpt-image-2 (1536x1024).
   Default-Container ist 4:3 mit object-fit:cover → schneidet ar-Bilder
   oben/unten ab. Wl umgeht's mit object-fit:contain (Letterboxing),
   fuer ar passt 3:2-Container besser: Bild fuellt komplett ohne Crop. */
body.site-agenturrocks .article-hero-landscape__media {
  aspect-ratio: 3 / 2;
}

/* === Hub-Intro fuer ar: kein Lead-Paragraph-Stil (kein Bold-1.-Absatz,
   kein Dropcap). Der Default ist fuer Magazin-Look gemacht, fuer ein
   Fach/Marketing-Magazin wirkt der Stil-Bruch zwischen 1. und 2. Absatz
   ungewollt. Alle Absaetze gleicher Stil. */
body.site-agenturrocks .hub-intro p:first-child {
  font-size: inherit;
  font-weight: 400;
}
body.site-agenturrocks .hub-intro p:first-child::first-letter {
  font-size: inherit;
  font-weight: inherit;
  float: none;
  margin: 0;
  padding: 0;
  line-height: inherit;
  color: inherit;
}

/* === ar: Lesbarkeits-/Branding-Fixes (Sweep) ============================ */

/* 1) Hub-Intro Dropcap: vorher uebersehen, Hintergrund auf transparent.
   War: bg=--ink (dunkel) + color geerbt (dunkel) → unlesbar. */
body.site-agenturrocks .hub-intro p:first-child::first-letter {
  background: transparent !important;
}

/* 2) badge-speech ('Editor's Note'): Label 'TURNDOWN MEINT' war hardcoded
   im CSS-content + Pill-Farben dunkel-auf-dunkel-lila bei ar
   (bg=yellow=indigo + color=ink=dunkel). Label tenant-aware + Kontrast. */
body.site-agenturrocks .badge-speech::before { content: 'REDAKTION MEINT'; color: #fff; background: var(--green-700); }
body.site-weloveurlaub .badge-speech::before { content: 'WELOVEURLAUB MEINT'; }
/* wz/lt erben .site-weloveurlaub -> eigenen Chip-Text setzen (spaeter im File
   => gewinnt bei gleicher Spezifitaet). */
body.site-welovezypern .badge-speech::before { content: 'WELOVEZYPERN MEINT'; }
body.site-liveoftea .badge-speech::before { content: 'LIVEOFTEA MEINT'; }

/* 3) Insider-Quote: Default bg=ink (dunkel) + color=#fff (hell) ist OK,
   aber border-left=yellow=indigo verschmilzt mit ar-Indigo-Akzenten →
   Lime-Akzent setzen, damit der linke Streifen sichtbar bleibt. */
body.site-agenturrocks .insider-quote { border-left-color: var(--amber-500); }
body.site-agenturrocks .insider-quote__avatar { border-color: var(--amber-500); }
body.site-agenturrocks .insider-quote__label { color: var(--amber-400); }

/* 4) Article-Blockquote: border-left=yellow=indigo unsichtbar gegen
   helles bg=cream=sand-50. Lime-Akzent als deutlicher Marker. */
body.site-agenturrocks .article-body blockquote { border-left-color: var(--amber-500); }

/* === ar: Lesbarkeits-Sweep für yellow(=Indigo)-bg + ink(=dunkel)-color =====
   Alle Stellen im Default-CSS, die bg=yellow + color=ink kombinieren,
   sind bei ar dunkel-auf-dunkel-lila. Hier alle bekannten Selektoren
   gebuendelt auf weisse Schrift (Pille/Card auf Indigo). */
body.site-agenturrocks .btn--secondary,
body.site-agenturrocks .fact-grid__badge,
body.site-agenturrocks .page-hero--yellow,
body.site-agenturrocks .article-evergreen-meta__badge--guide,
body.site-agenturrocks .tag--people,
body.site-agenturrocks .ql-people .quick-link__label,
body.site-agenturrocks .ticker__badge,
body.site-agenturrocks .header__login-btn,
body.site-agenturrocks .header__search-btn:hover {
  color: #fff !important;
}
body.site-agenturrocks .page-hero--yellow .page-hero__title,
body.site-agenturrocks .page-hero--yellow .page-hero__subtitle,
body.site-agenturrocks .page-hero--yellow * { color: #fff; }

/* comment-login: Hintergrund yellow=Indigo, comment-login__text war
   gray-600 (mittel-dunkel) → unlesbar auf Indigo. */
body.site-agenturrocks .comment-login { color: #fff; }
body.site-agenturrocks .comment-login__text,
body.site-agenturrocks .comment-login__title { color: #fff !important; }
body.site-agenturrocks .comment-login__hint { color: rgba(255,255,255,0.7); }

/* === data-compare__topic ('Pin-Typ' o.ae., 1. Zelle in __head): Default
   bg=ink + color=yellow → bei ar Indigo-auf-Slate = dunkel-auf-dunkel.
   Auf Lime-Akzent (amber-400) setzen, gleich wie der Header-Pille-Stil. */
body.site-agenturrocks .data-compare__topic { color: var(--amber-400); }

/* === Footer fuer ar: bg=yellow=Indigo → alle dunklen Schriftfarben auf
   weiss umstellen. Default war fuer hellen Footer-Hintergrund (td-yellow)
   ausgelegt. */
body.site-agenturrocks .footer { color: rgba(255,255,255,0.85); }
body.site-agenturrocks .footer__col-title,
body.site-agenturrocks .footer__logo { color: #fff; }
body.site-agenturrocks .footer__link { color: rgba(255,255,255,0.72); }
body.site-agenturrocks .footer__link:hover { color: #fff; }
body.site-agenturrocks .footer__copyright { color: rgba(255,255,255,0.6); }
body.site-agenturrocks .footer__divider { background: rgba(255,255,255,0.18); }
body.site-agenturrocks .footer a { color: rgba(255,255,255,0.72); }
body.site-agenturrocks .footer a:hover { color: #fff; }

/* Newsletter-Hint (Consent-Text): default color rgba(255,255,255,0.6),
   passt zur td-Pink-Bg. ar hat Lime-Bg → Hint muss dunkel sein. */
body.site-agenturrocks .newsletter__hint { color: rgba(2, 6, 23, 0.72); }
body.site-agenturrocks .newsletter__hint a { color: var(--green-800); }

/* === Startseiten-Hero-Slider Bild bei ar 3:2 statt 4:3 (gpt-image-2 liefert
   1536x1024 = 3:2, mit Default 4:3 + object-fit:cover wurde oben/unten
   abgeschnitten — analog .article-hero-landscape__media-Fix). */
body.site-agenturrocks .hero__image { aspect-ratio: 3 / 2; }

/* === ar Mobile-Padding tighter als Default (User: "kategorie+hero-content
   ist zu schmal, breadcrumb zu weit eingerueckt"). td nutzt 20px Default,
   ar bekommt 12px für mehr Content-Breite und linksbuendigere Breadcrumbs.
   Schlaegt globalen :root --side-padding:20px (mobile-Breakpoint 1199px). */
@media (max-width: 1199px) {
  body.site-agenturrocks { --side-padding: 12px; }
}

/* === CMP-Buttons fuer ar: Default .cmp-btn--primary/--equal nutzen
   bg=--ink + color=--yellow. Bei ar ist ink=#0f172a (fast schwarz) und
   yellow=#4338ca (indigo) → indigo-auf-schwarz = unlesbar (User:
   "consent buttons sind dunkel lila schrift auf schwarzem hintergrund").
   Fix: bg=green-700 + Text weiss, analog zu Newsletter-Button. */
body.site-agenturrocks .cmp-btn--primary,
body.site-agenturrocks .cmp-btn--equal {
  background: var(--green-700) !important;
  color: #fff !important;
  border-color: var(--green-700) !important;
}
body.site-agenturrocks .cmp-btn--primary:hover,
body.site-agenturrocks .cmp-btn--equal:hover {
  background: var(--green-800) !important;
  border-color: var(--green-800) !important;
  color: #fff !important;
}
/* Breadcrumbs nach page-hero: noch enger an den Rand, ohne 12px-Container.
   .breadcrumbs__inner hat padding 12px var(--side-padding) — mit 12px
   side-padding sind das 12px horizontal. Reicht. Aber sicherstellen, dass
   kein zusaetzliches max-width-Center die Bar wegschiebt. */
@media (max-width: 1199px) {
  body.site-agenturrocks .breadcrumbs__inner { padding-left: 12px; padding-right: 12px; }
}

/* ===================================================================== */
/* welovezypern (wz) — eigene Feinheiten zusaetzlich zum geerbten        */
/* wl-Layout (.site-weloveurlaub). Spaeter im File => gewinnt bei        */
/* gleicher Spezifitaet.                                                  */
/* ===================================================================== */

/* Das Magazin-Listing (.section-pad nutzt --container-max/-pad) war
   schmaler als die Kategorie-Cards darueber (.brand-section__inner nutzt
   --content-max/--side-padding). Auf dieselbe Breite + Side-Padding ziehen,
   damit Kategorie-Cards und Artikel-Listing buendig sind. */
body.site-welovezypern .section-pad {
  max-width: var(--content-max) !important;
  padding-left: var(--side-padding) !important;
  padding-right: var(--side-padding) !important;
}

/* Card-Bilder: die geerbten Container rendern 16/9 bzw. 5/3 (breiter als
   hoch), die gpt-image-2-Batch-Motive sind aber 3:2 (1.5) -> object-fit:cover
   schnitt oben/unten ab. Alle Card-Bild-Container fuer wz auf 3/2 = Bild-Ratio
   -> Motive vollstaendig. (.brand-visual ist bereits 3/2.) */
body.site-welovezypern .card__image,
body.site-welovezypern .news-featured__image,
body.site-welovezypern .news-card__image,
body.site-welovezypern .news-spotlight__image,
body.site-welovezypern .news-wide__image,
body.site-welovezypern .news-row__image,
body.site-welovezypern .brand-visual {
  aspect-ratio: 3 / 2 !important;
  height: auto !important;
}
/* .news-grid .news-card__image hat Spezifitaet (0,3,0) und setzt 5/3 ->
   muss mit gleicher Spezifitaet ueberschrieben werden, sonst gewinnt 5/3. */
body.site-welovezypern .news-grid .news-card__image {
  aspect-ratio: 3 / 2 !important;
  height: auto !important;
}

/* ===================================================================== */
/* TENANT-UEBERGREIFEND: gpt-image-2-Bilder sind 3:2 (Site-Standard).      */
/* Alle Card-/Listing-Bildflaechen auf 3:2 vereinheitlichen, damit nichts */
/* oben/unten beschnitten wird. Final am Datei-Ende -> schlaegt die       */
/* aelteren 16/9-, 4/3- und 5/3-Regeln (base = td/ar, .site-weloveurlaub  */
/* = wl/wz). Betrifft bewusst ALLE Tenants (User: "Bug auch bei anderen").*/
/* ===================================================================== */
.news-featured__image,
.news-card__image,
.news-spotlight__image,
.brand-visual,
.news-grid .news-card__image,
body.site-weloveurlaub .news-featured__image,
body.site-weloveurlaub .news-card__image,
body.site-weloveurlaub .news-spotlight__image,
body.site-weloveurlaub .news-grid .news-card__image {
  aspect-ratio: 3 / 2 !important;
  height: auto !important;
  min-height: 0 !important;
}
@media (max-width: 900px) {
  /* news-hero (erster Artikel) gestapelt: Link 1-spaltig ohne min-height,
     Bild auf volle Spaltenbreite + 3/2. Ohne width:100%/min-height:0/
     max-height:none trieb eine Rest-Hoehe (height:100% + min-height:360)
     die Breite via aspect-ratio auf 480px -> Overflow + Crop. */
  .news-hero__link,
  body.site-weloveurlaub .news-hero__link {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
  .news-hero__image,
  body.site-weloveurlaub .news-hero__image {
    aspect-ratio: 3 / 2 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  .news-hero__image img,
  .news-hero__image picture,
  body.site-weloveurlaub .news-hero__image img,
  body.site-weloveurlaub .news-hero__image picture {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }
}

@media (max-width: 900px) {
  /* Zu grosser Abstand zwischen Kategorie-Cards und erstem Artikel. */
  body.site-welovezypern .brand-section { padding-bottom: 28px !important; }
  body.site-welovezypern .section-pad { padding-top: 28px !important; }
  /* ZENTRAL fuer alle wl-Layout-Tenants (wl/wz/lt): die Basis-Regel
     .site-weloveurlaub .news-hero__content{padding:48px} steht frueher im File
     und gewann auf Mobile -> 48px fraßen die Inhaltsbreite ("zu schmal in der
     Kachel"). Hier am Datei-Ende sicher auf 24px ueberschreiben. */
  body.site-weloveurlaub .news-hero__content { padding: 24px !important; }
  /* news-hero-Bild (erster Artikel) mobil ebenfalls 3/2 (war auto ~1.1).
     Desktop bleibt Bild-links/Text-rechts unangetastet. */
  body.site-welovezypern .news-hero__image {
    aspect-ratio: 3 / 2 !important;
    height: auto !important;
  }
  /* Lange Komposita in Featured-Cards umbrechen (analog news-hero). */
  body.site-welovezypern .news-featured__title,
  body.site-welovezypern .news-featured__excerpt,
  body.site-welovezypern .news-spotlight__headline {
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }
  body.site-welovezypern .news-featured__body { min-width: 0 !important; }
}

/* Hinweis: Die gpt-image-2-Batch-Bilder sind 3:2 (1280x853 / 1536x1024) —
   sie passen exakt zum geerbten 3/2-Card-Layout. Kein Aspect-Ratio-Override
   noetig (ein frueherer 1:1-Versuch beruhte auf alten CDN-Bildern und ist
   bewusst entfernt). */

/* ===== Mobile-Fixes 2026-06 (alle .site-weloveurlaub-Tenants) =====
   (1) Standard-Artikel-Header OHNE Bild hatte auf Mobile kein seitliches
       Padding -> Titel/Subtitle/Breadcrumb klebten am Rand.
   (2) Newsletter-Pill-Form hatte keinen Mobile-Breakpoint -> wurde zur
       schmalen, hohen 999px-Lozenge. Jetzt gestapelte Karte voller Breite. */
@media (max-width: 768px) {
  body.site-weloveurlaub .article-header .content-wrap,
  body.site-weloveurlaub .article-wrap > .breadcrumbs {
    padding-left: var(--side-padding) !important;
    padding-right: var(--side-padding) !important;
  }
  body.site-weloveurlaub .newsletter__form,
  body.site-weloveurlaub .newsletter-form {
    flex-direction: column !important;
    align-items: stretch !important;
    border-radius: 22px !important;
    gap: 8px !important;
    width: 100%;
    max-width: 340px;
  }
  body.site-weloveurlaub .newsletter__form .btn,
  body.site-weloveurlaub .newsletter__form button[type="submit"],
  body.site-weloveurlaub .newsletter-form button[type="submit"] {
    width: 100% !important;
  }
}

/* Standard-Artikel-Header (ohne Bild) braucht Abstand nach oben zum Header/
   Ticker — analog zum seitlichen Padding. Split-Hero hat eigene Abstaende. */
body.site-weloveurlaub .article-header:not(.article-header--split) {
  padding-top: 32px;
}
@media (max-width: 768px) {
  body.site-weloveurlaub .article-header:not(.article-header--split) { padding-top: 24px; }
}

/* Kategorieseite: zu großer Abstand zwischen Unterkategorie-Listing
   (.brand-section) und der ersten Artikel-Sektion verkleinern.
   Die Artikel-Sektion (#ergebnisse.bg-cream > .section-pad) hat 72px
   padding-top — nach dem Listing reicht deutlich weniger. */
.brand-section + .bg-cream > .section-pad,
.brand-section + #ergebnisse > .section-pad,
body.site-weloveurlaub .brand-section + #ergebnisse > .section-pad,
body.site-weloveurlaub .brand-section + .bg-cream > .section-pad { padding-top: 28px !important; }

/* Suchergebnis-Kategorie: dezentes Text-Label statt kräftigem Hintergrund-Chip
   (gilt für alle Tenants; Farbe kommt als inline color, Fallback muted). */
.search-cat {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin: 0 0 7px;
  color: var(--text-muted, #6E6A60);
  line-height: 1.2;
}

/* Rechtsseiten (Datenschutz/Impressum): Aufzählungen wieder einrücken + Marker.
   .legal-content hatte keine ul/ol-Regel -> Listen erschienen ohne Einzug. */
.legal-content ul, .legal-content ol { margin: 12px 0; padding-left: 26px; }
.legal-content ul { list-style: disc; }
.legal-content ol { list-style: decimal; }
.legal-content li { margin-bottom: 8px; line-height: 1.7; }