/* Indie Wandern – Theme-CSS (Signatur-Devices + Header/Menü/Footer).
   theme.json deckt Tokens ab; hier: kontrastsicheres Signal-Rot, Header-Bar,
   Split-Screen-Overlay-Menü, Halbton-Textur, Footer-Feinschliff. */

:root {
  --iw-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Kontrastsicheres Rot für KLEINTEXT auf Papier (AA ≥4.5): #CF3329 wäre nur 4.42:1 */
  --iw-red-text: #B0271D;
  --iw-halftone: url('../img/halftone.jpg');
}

/* ---------- Eyebrow / kleine rote Labels (AA-sicher) ---------- */
.iw-eyebrow,
.iw-red-label {
  font-family: hoss-sharp, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.875rem;
  color: var(--iw-red-text);
}

/* ---------- Header-Bar (transparent über Hero → solide beim Scrollen) ---------- */
:root { --iw-header-h: 104px; }
.iw-header {
  position: sticky; top: 0; z-index: 50;
  border-top: 9px solid var(--wp--preset--color--brand-red);   /* Design: kräftige rote Top-Bar */
  background: transparent;
  transition: background .3s var(--iw-ease), box-shadow .3s var(--iw-ease);
}
/* Rot-auf-hell (Design-treu): rotes Logo/Claim/Menü durchgehend, großes Logo */
.iw-header .iw-logo { display: inline-flex; line-height: 0; }
.iw-header .iw-logo img { width: clamp(220px, 22vw, 340px); height: auto; }
.iw-header .iw-claim     { font-family: hoss-sharp, sans-serif; font-weight: 400; font-style: italic; font-size: clamp(1.05rem, 1.3vw, 1.35rem); color: var(--iw-red-text); margin: 0; }
.iw-header .iw-menu-label{ font-family: hoss-sharp, sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; font-size: clamp(0.95rem, 1.1vw, 1.1rem); color: var(--iw-red-text); margin: 0; }
.iw-header .wp-block-navigation__responsive-container-open svg,
.iw-header .wp-block-navigation__toggle-icon { fill: var(--wp--preset--color--brand-red); color: var(--wp--preset--color--brand-red); }

/* Solid beim Scrollen: heller Papier-Hintergrund (Schrift bleibt rot) */
.iw-header.is-solid {
  background: var(--wp--preset--color--paper);
  box-shadow: 0 1px 0 rgba(138,128,118,.30);
}

/* Home: Hero unter den transparenten Header ziehen (Overlay-Effekt) */
.home .wp-site-blocks > main { margin-top: calc(-1 * var(--iw-header-h)); }

/* ---------- Split-Screen Overlay-Menü (core Navigation overlay) ---------- */
:root { --iw-menu-photo: url('../img/menu-photo.jpg'); }

.wp-block-navigation__responsive-container.is-menu-open {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100dvh !important;
  z-index: 100 !important;
  background-color: var(--wp--preset--color--bordeaux) !important;
  background-image: var(--iw-halftone);
  background-size: 460px;
  background-blend-mode: multiply;
  display: block !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  height: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(0.3rem, 1.2vw, 0.9rem);
  padding: clamp(2rem, 7vw, 6rem);
  max-width: 60%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { flex-direction: column; align-items: flex-start; gap: clamp(0.4rem, 1.4vw, 1rem); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-family: hoss-sharp, sans-serif;
  font-weight: 700;                       /* Design CharStyle H1 = Hoss Sharp Bold 72pt */
  text-transform: uppercase;
  letter-spacing: 0.075em;
  font-size: clamp(2.2rem, 7.2vw, 4.5rem);
  color: var(--wp--preset--color--paper);
  line-height: 1.04;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item .wp-block-navigation-item__content {
  color: var(--wp--preset--color--brand-red);
}
.wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--paper) !important; z-index: 3; }
.wp-block-navigation__responsive-container-open .wp-block-navigation__toggle-icon { color: var(--wp--preset--color--ink); }

/* Foto-Split: Nav links (60%), Foto rechts (40%) — Design-Layout */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { position: relative; z-index: 2; }
.wp-block-navigation__responsive-container.is-menu-open::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 40%;
  background: var(--iw-menu-photo) center/cover no-repeat; z-index: 1; pointer-events: none;
}
@media (max-width: 781px) {
  .wp-block-navigation__responsive-container.is-menu-open::after { display: none; }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { max-width: 100%; }
}

/* ---------- Footer Halbton ---------- */
.iw-footer { background-image: var(--iw-halftone); background-size: 520px; background-blend-mode: multiply; }
.iw-footer a { text-decoration: none; color: var(--wp--preset--color--brand-red); }
.iw-footer a:hover { text-decoration: underline; }
/* Footer-Typo an Design (rot auf Bordeaux): Claim Hoss 29pt · Verein/Mail 30pt · Legal Tosh A 22.5pt */
.iw-footer-claim   { font-family: hoss-sharp, sans-serif; font-size: clamp(1.3rem, 2.2vw, 1.75rem); margin: 0; }
.iw-footer-verein  { font-size: clamp(1.15rem, 2vw, 1.55rem); margin: 0; }
.iw-footer-mail    { font-size: clamp(1.15rem, 2vw, 1.55rem); margin: 0.4rem 0 0; }
.iw-footer-legal   { font-size: clamp(0.95rem, 1.4vw, 1.15rem); letter-spacing: 0.01em; }
.iw-footer-legal p { margin: 0; }
.iw-footer-social .wp-social-link svg { fill: var(--wp--preset--color--brand-red); }

/* ---------- Platzhalter Überdruck-Headline (M3) ---------- */
.iw-overprint { color: #fff; opacity: 0.92; mix-blend-mode: screen; }

/* ============================================================
   STARTSEITE — Sticky Footer, Hero (Überdruck), Bänder, Cards
   ============================================================ */

/* ---- Sticky Footer (vom Kunden vorgegeben) ---- */
html, body { height: 100%; }
.wp-site-blocks { display: flex; flex-direction: column; min-height: 100dvh; }
.wp-site-blocks > main { flex-grow: 1; }

/* ---- Standardisierte Spacing-Skala (gemessen aus den Comps, Design-px) ---- */
:root {
  --iw-space-xs: clamp(1.25rem, 3.6vw, 3.25rem);  /* ~52 */
  --iw-space-s:  clamp(1.75rem, 5vw,  4.5rem);    /* ~72 */
  --iw-space-m:  clamp(2.5rem, 7vw,  6.5rem);     /* ~104 */
  --iw-space-l:  clamp(3rem,  9vw,   8.5rem);     /* ~136 */
  --iw-space-xl: clamp(4rem, 12vw,  11.5rem);     /* ~184 */
  --iw-space-2xl:clamp(5rem, 16vw,  15.5rem);     /* ~248 */
}
/* ---- Section-Rhythmus: Padding = ~halbes 2XL → zwischen Bändern ~design (248); Rand-Margins strippen
        (sonst stapeln padding + Block-Margins zu 273–331px statt ~240) ---- */
.iw-band { width: 100%; padding-block: clamp(3.5rem, 7vw, 7rem) !important; margin-block: 0 !important; }
.iw-band > :first-child { margin-top: 0 !important; }
.iw-band > :last-child  { margin-bottom: 0 !important; }
.iw-hero { padding-block: 0 !important; }
.iw-band.iw-band--quote { padding-block: clamp(3rem, 5vw, 5rem) !important; }
.iw-band--paper    { background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); }
.iw-band--forest   { background: var(--wp--preset--color--forest); color: var(--wp--preset--color--paper); }
.iw-band--bordeaux { background: var(--wp--preset--color--bordeaux); color: var(--wp--preset--color--paper);
                     background-image: var(--iw-halftone); background-size: 520px; background-blend-mode: multiply; }
.iw-band--red      { background: linear-gradient(160deg,#D16846 0%,#CF3329 42%,#7E252A 100%); color: var(--wp--preset--color--paper); }
.iw-band--forest a, .iw-band--bordeaux a, .iw-band--red a { color: var(--wp--preset--color--paper); }

/* Eyebrow auf dunklen Bändern (hell) */
.iw-band--forest .iw-eyebrow, .iw-band--bordeaux .iw-eyebrow, .iw-band--red .iw-eyebrow { color: var(--wp--preset--color--paper); }

/* ---- Torn-Edge / Bergkamm-Übergang (dezent) ---- */
.iw-torn-top { -webkit-mask: var(--iw-ridge) top center / 100% 28px no-repeat, linear-gradient(#000,#000) 0 28px / 100% 100% no-repeat; mask: var(--iw-ridge) top center / 100% 28px no-repeat, linear-gradient(#000,#000) 0 28px / 100% 100% no-repeat; }
:root { --iw-ridge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='28' preserveAspectRatio='none'%3E%3Cpath d='M0 28 L0 14 L80 6 L180 18 L300 4 L420 16 L560 6 L700 18 L840 8 L980 18 L1120 6 L1200 14 L1200 28 Z' fill='%23000'/%3E%3C/svg%3E"); }

/* ---- HERO (Überdruck) ---- */
.iw-hero { position: relative; min-height: 94dvh; display: flex; align-items: stretch; overflow: clip; }
.iw-hero .wp-block-cover__image-background { object-fit: cover; }
/* Scrim: oben HELL (roter Header liest, Design-treu) + unten dunkel (Highlights), Mitte frei fürs Foto */
.iw-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(245,239,231,.92) 0%, rgba(245,239,231,.45) 8%, rgba(245,239,231,0) 15%, rgba(20,22,18,0) 50%, rgba(20,22,18,.55) 100%);
}
.iw-hero .wp-block-cover__inner-container {
  position: relative; z-index: 2; width: 100%;
  display: flex; flex-direction: column; justify-content: space-between; min-height: inherit;
  padding-top: clamp(6rem, 13vw, 13rem); padding-bottom: clamp(2rem, 4vw, 3.5rem);   /* Headline sitzt ~20% v.o. wie Design (war 11.8%) */
}
.iw-hero__title, .iw-hero h1 {
  font-family: tosh-a, "Helvetica Neue", Arial, sans-serif;   /* Design: CharacterStyle H2 = "Tosh A" Bold (NICHT Archivo Black) */
  font-weight: 700;
  font-size: clamp(3rem, 11.7vw, 10.5rem);  /* Design 225pt -> 168,75px @1440 (IDML-Anker) */
  line-height: 0.87;                        /* Design Leading 195/225 = 0.87 */
  letter-spacing: 0.075em;                  /* Design Tracking 75 (war 0.02em) */
  text-transform: uppercase;
  text-align: center;
  color: #F5EFE7;                           /* Design Off-White (war #ffffff) */
  mix-blend-mode: normal;     /* Überdruck raus → schlichtes halbtransparentes Weiß */
  opacity: 0.5;
  margin: 0;
}
/* Highlights 01/02/03 unten im Hero — Spalten an Design (breiter: ratio Spalte/Headline ~0.24) */
.iw-hero__hl { margin-top: auto; max-width: min(1400px, 94vw); margin-inline: auto; width: 100%; }
/* Highlight-Text auf Design-Größe (~24px @1920) */
.iw-hero__hl .wp-block-column > p:first-of-type { font-size: clamp(1.05rem, 1.45vw, 1.5rem); line-height: 1.35; }
.iw-hl__num { font-family: hoss-sharp, sans-serif; font-weight: 600; color: var(--wp--preset--color--brand-red); font-size: 1em; }
.iw-more, .iw-eyebrow a { font-family: hoss-sharp, sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; color: var(--iw-red-text); }
.iw-more::after { content: " ▸"; }
/* Auf dunklen Bändern + Hero: helle Links/More (Kontrast) */
.iw-band--forest .iw-more, .iw-band--bordeaux .iw-more, .iw-band--red .iw-more,
.iw-band--forest .iw-eyebrow a, .iw-band--bordeaux .iw-eyebrow a, .iw-band--red .iw-eyebrow a,
.iw-hero .iw-more { color: var(--wp--preset--color--paper); }
/* Outline-Button auf dunklen Bändern: weiß */
.iw-band--red .is-style-outline .wp-block-button__link,
.iw-band--forest .is-style-outline .wp-block-button__link { color:#fff; border-color:#fff; }

/* ---- Cards ---- */
.iw-card { background: var(--wp--preset--color--card); color: var(--wp--preset--color--ink); }
.iw-card--ghost { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); }

/* ---- Riesen-Divider „GET IN THE LOOP" ---- */
.iw-loop { font-family: hoss-sharp, sans-serif; font-weight: 600; text-transform: uppercase; line-height: 0.9;
           font-size: clamp(2.4rem, 9vw, 8rem); text-align: center; }

/* ---- Zitat ---- */
.iw-quote { font-family: tosh-a, serif; font-weight: 300; font-style: italic; font-size: clamp(1.4rem, 3.4vw, 2.4rem); line-height: 1.3; text-align: center; }
.iw-quote__author { font-family: hoss-sharp, sans-serif; font-style: normal; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.85rem; opacity: 0.85; }

/* ---- FAQ Akkordeon (native details) ---- */
.iw-faq details { border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent); padding: 1rem 0; }
.iw-faq summary { font-family: hoss-sharp, sans-serif; font-weight: 500; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.iw-faq summary::-webkit-details-marker { display: none; }
.iw-faq summary::after { content: "⌄"; transition: transform .2s var(--iw-ease); }
.iw-faq details[open] summary::after { transform: rotate(180deg); }

/* ============================================================
   12-COLUMN GRID-SYSTEM (aus dem PDF abgeleitet)
   - Container 1240 · 12 Spalten · fluider Gutter
   - 2-up = 6+6 · 3-up = 4+4+4 · Text zentriert 6–8 · Asymmetrie via Spans
   ============================================================ */
:root {
  --iw-cols: 12;
  /* gemessen aus den Comps: Gutter ~1.4% (~20px@1440), Content ~75% (Rand ~12.5%) */
  --iw-gutter: clamp(14px, 1.4vw, 22px);
  --iw-container: 1100px;
}
.iw-grid {
  display: grid;
  grid-template-columns: repeat(var(--iw-cols), 1fr);
  gap: var(--iw-gutter);
  max-width: var(--iw-container);
  margin-inline: auto;
}
/* Mobile: alles volle Breite, ab 782px echte Spalten-Spans */
.iw-grid > * { grid-column: 1 / -1; }
@media (min-width: 782px) {
  .iw-col-3  { grid-column: span 3 }
  .iw-col-4  { grid-column: span 4 }
  .iw-col-5  { grid-column: span 5 }
  .iw-col-6  { grid-column: span 6 }
  .iw-col-7  { grid-column: span 7 }
  .iw-col-8  { grid-column: span 8 }
  .iw-col-12 { grid-column: span 12 }
}
/* Bestehende Columns-Reihen auf den Grid-Gutter vereinheitlichen (Konsistenz mit dem 12er-System) */
.iw-band .wp-block-columns { gap: var(--iw-gutter); max-width: var(--iw-container); margin-inline: auto; }

/* ---- Fade-in beim Scrollen (Klasse wird per JS gesetzt → no-JS = sichtbar) ---- */
.iw-fade { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--iw-ease), transform .8s var(--iw-ease); }
.iw-fade.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .iw-fade, .iw-fade.is-in { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* ============================================================
   M5 — DETAIL-/ARCHIV-KOMPONENTEN (Trails, Hotels, Angebote)
   ============================================================ */

/* ---- gemeinsamer Inhalts-Container ---- */
.iw-detail-wrap { max-width: var(--iw-container); margin-inline: auto; padding-inline: clamp(1rem, 5vw, 2rem); }
.iw-richtext { max-width: 680px; }
.iw-richtext--invert, .iw-band--forest .iw-richtext, .iw-band--bordeaux .iw-richtext { color: var(--wp--preset--color--paper); }

/* ---- Detail-Hero (Single Trail/Hotel/Angebot) ---- */
.iw-detail-hero { position: relative; min-height: 56dvh; display: flex; align-items: flex-end;
  background-size: cover; background-position: center; color: #fff; }
.iw-detail-hero--plain { background: linear-gradient(160deg,#2F322A 0%,#7A1F1A 100%); }
.iw-detail-hero__inner { max-width: var(--iw-container); margin-inline: auto; width: 100%;
  padding: clamp(2rem,6vw,5rem) clamp(1rem,5vw,2rem); }
.iw-detail-hero__title { font-family: tosh-a, "Helvetica Neue", Arial, sans-serif; font-weight: 700;
  text-transform: uppercase; line-height: 0.9; letter-spacing: .075em; color: #F5EFE7; margin: 0;
  font-size: clamp(2.4rem, 8vw, 6.5rem); overflow-wrap: break-word; max-width: 100%; }
.iw-detail-hero__sub { font-family: tosh-a, serif; font-style: italic; font-size: clamp(1.1rem,2.4vw,1.6rem); margin: .6rem 0 0; max-width: 40ch; }
.iw-hero-credit { position: absolute; right: clamp(.5rem,2vw,1rem); bottom: clamp(.4rem,1.5vw,.8rem);
  font-family: tosh-a, sans-serif; font-size: .72rem; letter-spacing: .02em; color: rgba(255,255,255,.78);
  background: rgba(26,26,26,.32); padding: .2rem .5rem; border-radius: 4px; max-width: 70%; text-align: right; }

/* ---- Statbar ---- */
.iw-statbar { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-wrap: wrap; gap: clamp(1.5rem,5vw,4rem); }
.iw-statbar li { display: flex; flex-direction: column; }
.iw-statbar strong { font-family: hoss-sharp, sans-serif; font-size: clamp(1.8rem,4vw,2.8rem); line-height: 1; }
.iw-statbar span { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--iw-red-text); }
.iw-stars { color: var(--wp--preset--color--brand-red); letter-spacing: .05em; }

/* ---- Highlights ---- */
.iw-highlights { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .5rem; }
.iw-highlights li { position: relative; padding-left: 1.6rem; }
.iw-highlights li::before { content: "∞"; position: absolute; left: 0; color: var(--wp--preset--color--brand-red); font-weight: 700; }

/* ---- Etappen + Varianten-Umschalter ---- */
.iw-etappen-band h2 { font-size: clamp(1.8rem,4vw,3rem); text-transform: uppercase; }
.iw-variant-switch { display: inline-flex; gap: 4px; background: rgba(255,255,255,.12); padding: 4px; border-radius: 999px; margin: 1rem 0 2rem; }
.iw-variant-btn { font-family: tosh-a, "Helvetica Neue", Arial, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .82rem;
  border: 0; background: transparent; color: var(--wp--preset--color--paper); padding: .55rem 1.1rem; border-radius: 999px; cursor: pointer;
  min-height: 40px; display: inline-flex; align-items: center; gap: .5rem; transition: background .2s var(--iw-ease), color .2s var(--iw-ease); }
/* Schwierigkeits-Icon (Material speed 1-3) — ink-SVG zu Paper invertiert (Forest-Band) */
.iw-vbtn-icon { width: 1.25em; height: 1.25em; filter: brightness(0) invert(1); }
.iw-variant-btn:hover { background: rgba(255,255,255,.18); }
.iw-variant-btn.is-active { background: var(--wp--preset--color--brand-red); color: #fff; }
.iw-variant-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.iw-etappen { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: rgba(255,255,255,.14); border-radius: 14px; overflow: hidden; }
.iw-etappe { display: grid; grid-template-columns: 64px 1fr; gap: 1rem; padding: 1.4rem clamp(1rem,3vw,2rem); background: rgba(0,0,0,.12); align-items: start; }
/* heller Terracotta-Ton: brand-red wäre auf dem Forest-Band nur 1.9:1 (AA large braucht 3:1) */
.iw-etappe__nr { font-family: tosh-a, "Helvetica Neue", Arial, sans-serif; font-weight: 700; font-size: 2rem; line-height: 1; color: #F4845E; }
.iw-etappe__title { margin: 0 0 .5rem; font-size: clamp(1.3rem, 2.4vw, 1.9rem); }
/* nur die aktive Variante zeigen */
.iw-etappe__variant { display: none; }
.iw-etappen[data-variant="leicht"]  .iw-etappe__variant[data-variant="leicht"],
.iw-etappen[data-variant="classic"] .iw-etappe__variant[data-variant="classic"],
.iw-etappen[data-variant="schwer"]  .iw-etappe__variant[data-variant="schwer"] { display: block; }
.iw-etappe__stats { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: 0 0 .4rem; padding: 0; font-family: hoss-sharp, sans-serif; font-size: .95rem; }
/* Kleintext auf dunklem Band → helle Farbe (rot wäre nur 1.9:1, AA braucht 4.5:1) */
.iw-etappe__diff { text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; color: var(--wp--preset--color--paper); font-weight: 600; }
.iw-etappe p { margin: 0; opacity: .92; }

/* ---- Hotel-Teaser (im Trail) ---- */
.iw-hotel-teaser { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,3rem); align-items: center; }
.iw-hotel-teaser__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; aspect-ratio: 4/3; }
.iw-hotel-teaser h2 { font-size: clamp(1.5rem,3vw,2.2rem); }

/* ---- Quick-Infos ---- */
.iw-quickinfos { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 1rem 2rem; margin: 2rem 0 0; }
.iw-quickinfos div { border-top: 2px solid var(--wp--preset--color--brand-red); padding-top: .6rem; }
.iw-quickinfos dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--iw-red-text); }
.iw-quickinfos dd { margin: .2rem 0 0; font-weight: 600; }

/* ---- Archiv: Trail-Zeilen (Großnummern) ---- */
.iw-archive-head { padding-top: calc(var(--iw-header-h) + clamp(2rem,5vw,4rem)) !important; }
.iw-archive-intro { max-width: 60ch; margin-inline: auto; }
.iw-trail-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2rem,5vw,3.5rem); }
/* Design-Device: 10px rote Trennlinie zwischen den Trail-Zeilen */
.iw-trail-row + .iw-trail-row { border-top: 10px solid var(--wp--preset--color--brand-red); padding-top: clamp(2rem,5vw,3.5rem); }
.iw-trail-row { display: grid; grid-template-columns: auto minmax(0,1.1fr) minmax(0,1.4fr); gap: clamp(1rem,3vw,2.5rem); align-items: center; }
.iw-trail-row__nr { font-family: tosh-a, "Helvetica Neue", Arial, sans-serif; font-weight: 700; font-size: clamp(2.5rem,6vw,4.5rem); line-height: .9; color: var(--wp--preset--color--brand-red); }
.iw-trail-row__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 14px; }
/* Entity-Namen = Hoss Sharp Bold (Design CharStyle H1, 72pt) — NICHT Tosh (das ist nur Page-Display/Picker) */
.iw-trail-row__body h2 { font-family: hoss-sharp, sans-serif; font-weight: 700; font-size: clamp(1.9rem,4.4vw,3.3rem); letter-spacing: 0; text-transform: uppercase; line-height: 1.02; margin: .2rem 0; }
/* Hand-Lettering-Schriftzug (Design-SVG) statt Font für die 4 Pilot-Namen.
   schwarz-Variante auf hellen Bändern (Design-treu); height:auto behält Proportion. */
.iw-lettering { display: inline-block; vertical-align: middle; width: clamp(220px, 32vw, 440px); max-width: 100%; height: auto; }
h2.has-lettering { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; }
h2.has-lettering a { display: inline-flex; text-decoration: none; }
.iw-loop-glyph { font-family: hoss-sharp, sans-serif; }
.iw-trail-row__body h2 a { text-decoration: none; color: inherit; }

/* ---- Archiv: Hotel-Zeilen ---- */
.iw-hotel-rows { display: grid; gap: clamp(1.5rem,4vw,2.5rem); }
.iw-hotel-rowcard { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(1rem,3vw,2.5rem); align-items: center; }
.iw-hotel-rowcard__media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 14px; }
.iw-hotel-rowcard h2 { font-family: hoss-sharp, sans-serif; font-weight: 700; font-size: clamp(1.9rem,4.4vw,3.3rem); letter-spacing: 0; text-transform: uppercase; line-height: 1.02; }

/* ---- Archiv/Home: Offer-Cards + Badge ---- */
.iw-offer-grid { gap: clamp(1.5rem,3vw,2rem); }
.iw-offer-card { background: var(--wp--preset--color--card); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 0 rgba(138,128,118,.25); }
.iw-offer-card__media { position: relative; display: block; }
.iw-offer-card__media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.iw-offer-card__body { padding: clamp(1rem,2.5vw,1.6rem); display: flex; flex-direction: column; gap: .6rem; }
.iw-badge { display: inline-block; background: var(--wp--preset--color--brand-red); color: #fff; font-family: hoss-sharp, sans-serif;
  text-transform: uppercase; letter-spacing: .04em; font-size: .82rem; font-weight: 600; padding: .4rem .8rem; border-radius: 999px; }
.iw-offer-card__media .iw-badge { position: absolute; top: 12px; left: 12px; }

/* ---- generische Cards ---- */
.iw-cards { gap: clamp(1rem,3vw,2rem); }
.iw-card { background: var(--wp--preset--color--card); border-radius: 14px; padding: clamp(1rem,2.5vw,1.6rem); text-decoration: none; color: inherit; display: block; transition: transform .2s var(--iw-ease); }
.iw-card:hover { transform: translateY(-3px); }

/* ---- Button-/Link-System inkl. States + 44px Touch ---- */
.iw-btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .7rem 1.4rem;
  background: var(--wp--preset--color--brand-red); color: #fff !important; text-decoration: none;
  font-family: tosh-a, "Helvetica Neue", Arial, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .85rem; font-weight: 600;
  border-radius: 999px; border: 2px solid var(--wp--preset--color--brand-red); cursor: pointer;
  transition: background .2s var(--iw-ease), transform .15s var(--iw-ease), box-shadow .2s var(--iw-ease); }
.iw-btn:hover { background: var(--wp--preset--color--bordeaux); border-color: var(--wp--preset--color--bordeaux); }
.iw-btn:active { transform: translateY(1px); }
.iw-btn:focus-visible { outline: 3px solid var(--wp--preset--color--ink); outline-offset: 3px; }
.iw-btn--light { background: #fff; color: var(--wp--preset--color--bordeaux) !important; border-color: #fff; }
.iw-btn--light:hover { background: var(--wp--preset--color--paper); border-color: var(--wp--preset--color--paper); }

.iw-link, .iw-more { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px;
  font-family: tosh-a, "Helvetica Neue", Arial, sans-serif; text-transform: uppercase; letter-spacing: .05em; font-size: .9rem; font-weight: 700;
  color: var(--iw-red-text); text-decoration: none; }
.iw-band--forest .iw-link, .iw-band--bordeaux .iw-link, .iw-band--red .iw-link { color: #fff; }
.iw-link:hover, .iw-more:hover { text-decoration: underline; text-underline-offset: 4px; }
.iw-link:focus-visible, .iw-more:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

/* ---- CTA-Band ---- */
.iw-cta-band h2 { font-size: clamp(1.8rem,4vw,3rem); text-transform: uppercase; margin: 0 0 1.2rem; color: #fff; }

/* ---- FAQ ---- */
.iw-faq { max-width: var(--iw-container); margin-inline: auto; }  /* volle Breite (war 760px-Box) */
.iw-faq details { border-top: 1px solid rgba(138,128,118,.4); padding: .2rem 0; }
.iw-faq summary { cursor: pointer; list-style: none; padding: 1rem 0; font-family: hoss-sharp, sans-serif; font-size: 1.1rem; display: flex; justify-content: space-between; gap: 1rem; min-height: 44px; align-items: center; }
.iw-faq summary::-webkit-details-marker { display: none; }
.iw-faq summary::after { content: "+"; color: var(--wp--preset--color--brand-red); font-size: 1.5rem; }
.iw-faq details[open] summary::after { content: "–"; }
.iw-faq__a { padding: 0 0 1.2rem; max-width: 68ch; }
/* FAQ 2-Spalten-Layout (Design): Headline+Intro+Bäume links, Accordion rechts */
.iw-faq-grid { display: grid; grid-template-columns: minmax(260px, 0.85fr) 1.4fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.iw-faq-grid .iw-faq-list { max-width: none; }
.iw-faq-title { font-family: hoss-sharp, sans-serif; font-weight: 700; text-transform: uppercase; line-height: 1.0; letter-spacing: 0; font-size: clamp(2rem, 4vw, 3.2rem); color: var(--wp--preset--color--brand-red); margin: 0 0 1rem; }
.iw-faq-intro { max-width: 36ch; margin: 0 0 2rem; }
.iw-faq-trees { display: flex; align-items: flex-end; gap: 1.2rem; }
.iw-faq-trees img { width: clamp(40px, 6vw, 70px); height: auto; opacity: .9; }

/* ---- Responsive ---- */
@media (max-width: 781px) {
  .iw-faq-grid { grid-template-columns: 1fr; gap: 2rem; }
  .iw-faq-trees { margin-bottom: 1rem; }
}
@media (max-width: 781px) {
  .iw-trail-row { grid-template-columns: auto 1fr; }
  .iw-trail-row__media { grid-column: 1 / -1; order: 3; }
  .iw-hotel-rowcard, .iw-hotel-teaser { grid-template-columns: 1fr; }
  .iw-hotel-rowcard__media { order: -1; }
  .iw-offer-card.iw-col-6 { grid-column: span 12; }
}

/* ---- Inner-/Detail-Seiten: Header immer solid auf Papier (Schrift bleibt rot, JS-unabhängig) ---- */
body:not(.home) .iw-header { background: var(--wp--preset--color--paper); box-shadow: 0 1px 0 rgba(138,128,118,.30); }

/* ---- Trail-Karte (Leaflet) + Höhenprofil ---- */
.iw-map { height: clamp(280px, 45vw, 480px); width: 100%; border-radius: 14px; margin-top: 1rem; background: #e9e4da; z-index: 0; }
.iw-map-band .leaflet-container { font-family: tosh-a, sans-serif; }
.iw-elevation { margin-top: 1rem; }
.iw-elev-stats { display: flex; gap: clamp(1.5rem,5vw,3rem); margin-bottom: .5rem; }
.iw-elev-stats strong { font-family: hoss-sharp, sans-serif; font-size: 1.4rem; }
.iw-elev-stats span { display: flex; flex-direction: column; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--iw-red-text); }
.iw-elev-svg { width: 100%; height: 120px; display: block; }

/* ============================================================
   M6/M7 — Formulare, Consent-Banner, Journal, Post
   ============================================================ */

/* ---- Formulare ---- */
.iw-form { max-width: 680px; display: flex; flex-direction: column; gap: 1rem; }
.iw-form label { display: flex; flex-direction: column; gap: .35rem; font-family: hoss-sharp, sans-serif; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; }
.iw-form input[type="text"], .iw-form input[type="email"], .iw-form textarea {
  font-family: tosh-a, sans-serif; font-size: 1rem; text-transform: none; letter-spacing: normal;
  padding: .75rem .9rem; border: 1.5px solid rgba(138,128,118,.5); border-radius: 10px; background: #fff; color: var(--wp--preset--color--ink); }
.iw-form input:focus, .iw-form textarea:focus { outline: 3px solid var(--wp--preset--color--brand-red); outline-offset: 1px; border-color: var(--wp--preset--color--brand-red); }
.iw-form__row { display: flex; gap: 1rem; flex-wrap: wrap; }
.iw-form__row > label { flex: 1 1 220px; }
.iw-form__grow { flex: 1 1 260px; }
.iw-form__consent { flex-direction: row; align-items: flex-start; gap: .5rem; text-transform: none; letter-spacing: normal; font-family: tosh-a, sans-serif; font-size: .9rem; }
.iw-form__consent input { margin-top: .2rem; min-width: 18px; min-height: 18px; }
.iw-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.iw-form__status { font-family: hoss-sharp, sans-serif; font-size: .9rem; margin: 0; min-height: 1.2em; }
.iw-form__status.is-success { color: #2F7A3E; }
.iw-form__status.is-error { color: var(--iw-red-text); }
.iw-form__status.is-pending { color: var(--wp--preset--color--muted); }
.iw-band--red .iw-form input, .iw-band--red .iw-form textarea, .iw-band--forest .iw-form input { color: var(--wp--preset--color--ink); }
.iw-band--red .iw-form label, .iw-band--forest .iw-form label, .iw-band--red .iw-form__consent a { color: #fff; }
.iw-newsletter-form { max-width: 560px; }

/* ---- Consent-Banner ---- */
.iw-consent { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 200;
  width: min(680px, calc(100% - 24px)); background: var(--wp--preset--color--ink); color: #fff;
  padding: 1rem 1.2rem; border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.3);
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.iw-consent[hidden] { display: none; }
.iw-consent p { margin: 0; flex: 1 1 280px; font-size: .9rem; }
.iw-consent a { color: #fff; text-decoration: underline; }
.iw-consent__btns { display: flex; gap: .5rem; flex-wrap: wrap; }
.iw-consent .iw-btn { min-height: 40px; padding: .5rem 1rem; font-size: .78rem; }

/* ---- Journal-Grid (Query Loop) ---- */
.iw-journal-grid { gap: clamp(1.5rem,3vw,2.5rem) !important; }
.iw-journal-grid > li { background: var(--wp--preset--color--card); border-radius: 14px; overflow: hidden; padding-bottom: 1rem; }
.iw-journal-grid img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.iw-journal-grid .wp-block-post-title { padding: 0 1rem; font-size: 1.25rem; }
.iw-journal-grid .wp-block-post-title a { text-decoration: none; color: inherit; }
.iw-journal-grid .wp-block-post-terms { padding: .8rem 1rem 0; }
.iw-journal-grid .wp-block-post-excerpt { padding: .3rem 1rem 0; }

/* ---- Journal-Single ---- */
.iw-post-hero img { width: 100%; max-height: 480px; object-fit: cover; border-radius: 14px; margin-bottom: 1.5rem; }
.iw-post-meta { color: var(--wp--preset--color--muted); font-size: .85rem; }

/* ---- Custom-Hamburger (gestaffelte Linien) + Lines→X-Morph (Design-treu) ---- */
/* WP-Default-Toggle visuell ausblenden (bleibt für programmatischen Klick erreichbar) */
.iw-header .wp-block-navigation__responsive-container-open.iw-wp-toggle-hidden {
  position: absolute !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden;
}
.iw-burger {
  --iw-burger-w: 30px;            /* Strecke der längsten Linie */
  appearance: none; border: 0; background: none; cursor: pointer; padding: 8px;
  width: calc(var(--iw-burger-w) + 16px); height: 34px;
  position: relative; z-index: 101;   /* > Overlay (100) im Header-Stacking-Context → X bleibt AM PLATZ, kein fixed */
  display: inline-block; vertical-align: middle;
}
.iw-burger span {
  position: absolute; left: 8px; height: 2px; border-radius: 2px;
  background: var(--wp--preset--color--brand-red);
  transition: transform .3s var(--iw-ease), width .3s var(--iw-ease), opacity .2s var(--iw-ease), top .3s var(--iw-ease), background .2s var(--iw-ease);
}
/* Design: linksbündig, oben+Mitte ~voll, unten ~55 %, gleichmäßige Gaps */
.iw-burger span:nth-child(1) { top: 10px; width: var(--iw-burger-w); }
.iw-burger span:nth-child(2) { top: 16px; width: calc(var(--iw-burger-w) * 0.88); }
.iw-burger span:nth-child(3) { top: 22px; width: calc(var(--iw-burger-w) * 0.55); }
/* Morph zu X — beide Diagonalen voll + zentriert, mittlere fadet; X sitzt exakt auf den Linien */
.iw-burger.is-x span { background: var(--wp--preset--color--paper); width: var(--iw-burger-w); }
.iw-burger.is-x span:nth-child(1) { top: 16px; transform: rotate(45deg); }
.iw-burger.is-x span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.iw-burger.is-x span:nth-child(3) { top: 16px; transform: rotate(-45deg); }
.iw-burger:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .iw-burger span { transition: background .2s; } }
/* WP-eigenes Close-X ausblenden — unser Burger schließt jetzt auch (programmatischer Klick) */
/* WP-Close-Button visuell ausblenden, ABER klickbar lassen (display:none killt den Interactivity-Klick).
   sr-only-Treatment wie beim Open-Toggle → unser Burger-Proxy kann ihn programmatisch klicken. */
.wp-block-navigation__responsive-container-close {
  position: absolute !important; width: 1px !important; height: 1px !important;
  opacity: 0 !important; pointer-events: none !important; overflow: hidden !important; padding: 0 !important;
}

/* ===== Design-Neuversion: Wanderhotels (Pilot, IDML-Zielwerte ×0,75) ===== */
.iw-wh-hero { color: var(--wp--preset--color--paper); }
.iw-wh-hero__title { font-family: hoss-sharp, sans-serif; font-weight: 700; text-transform: uppercase;
  line-height: .9; letter-spacing: .02em; margin: .2rem 0 0;
  font-size: clamp(3rem, 11.7vw, 10.5rem);  /* Design 225pt → 168,75px @1440 */ }
.iw-wh-hero__intro { font-family: hoss-sharp, sans-serif; font-size: clamp(1.1rem, 1.56vw, 1.4rem); max-width: 46ch; margin-top: 1.4rem; opacity: .95; }
.iw-wh-hero__photos { display: flex; gap: 1.2rem; margin-top: clamp(1.5rem,4vw,3rem); }
.iw-wh-hero__photo { width: 32%; aspect-ratio: 4/3; object-fit: cover; border-radius: 4px; }
.iw-wh-hero__photo--0 { transform: rotate(-2deg); } .iw-wh-hero__photo--2 { transform: rotate(2deg); }
@media(max-width:782px){ .iw-wh-hero__photos{flex-wrap:wrap}.iw-wh-hero__photo{width:100%} }

.iw-benefits { color: var(--wp--preset--color--paper); }
.iw-benefits__title { font-family: hoss-sharp, sans-serif; font-size: clamp(1.6rem,2.7vw,2.4rem); }
.iw-benefits__list { list-style: none; margin: 1.5rem auto 0; padding: 0; max-width: 640px; }
.iw-benefits__list li { padding: .85rem 0; border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); font-family: hoss-sharp, sans-serif; }

.iw-choose-band { text-align: center; }
.iw-choose__arrow { color: var(--wp--preset--color--brand-red); font-size: 2.4rem; margin: 0 0 .3rem; }
.iw-choose { font-family: tosh-a, sans-serif; font-weight: 700; text-transform: uppercase; text-align: center;
  color: var(--wp--preset--color--brand-red); margin: 0;
  font-size: clamp(2.2rem, 4.6vw, 4.12rem);  /* Design 87,94pt → 65,96px @1440 */ }

.iw-chooser__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,3rem); }
.iw-chooser__card { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.iw-chooser__media { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 4px; }
.iw-chooser__name { color: var(--wp--preset--color--paper); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.iw-chooser__name .iw-lettering { width: clamp(180px,22vw,300px); }
@media(max-width:782px){ .iw-chooser__grid{grid-template-columns:1fr} }

.iw-btn--neu { background: var(--wp--preset--color--brand-red); color:#fff; font-family: tosh-a, sans-serif; font-weight:700;
  text-transform: uppercase; letter-spacing:.04em; font-size: clamp(.95rem,1.1vw,1.05rem); padding:.6rem 1.1rem; border-radius:3px; text-decoration:none; display:inline-block; }

.iw-whd__title { font-family: hoss-sharp, sans-serif; font-weight:700; text-transform:uppercase; text-align:center;
  font-size: clamp(2rem, 3.75vw, 3.375rem);  /* Design 72pt → 54px @1440 */ margin:.4rem 0 1.6rem; }
.iw-whd__grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,3rem); align-items:start; }
.iw-whd__media { display:grid; gap:1rem; }
.iw-whd__media img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:4px; }
.iw-quickinfo { list-style:none; margin:0 0 1.4rem; padding:0; display:grid; gap:.6rem; }
.iw-quickinfo li { display:flex; gap:.6rem; align-items:flex-start; }
.iw-quickinfo__dot { color: var(--wp--preset--color--brand-red); font-weight:700; }
.iw-whd__more { border-top:1px solid rgba(0,0,0,.15); margin-top:1.5rem; padding-top:1rem; }
.iw-whd__more summary { font-family: hoss-sharp, sans-serif; cursor:pointer; list-style:none; display:flex; justify-content:space-between; }
.iw-whd__more summary::after { content:"⌄"; color:var(--wp--preset--color--brand-red); }
.iw-infdiv { text-align:center; padding-block: clamp(1rem,2vw,2rem) !important; font-size:2rem; color:var(--wp--preset--color--brand-red); }
@media(max-width:782px){ .iw-whd__grid{grid-template-columns:1fr} }

/* Konvergenz-Fixes Wanderhotels-neu: Eyebrow-Farbe Hero + Eyebrow-Größe Hotel-Detail (Design 30pt→22,5px) */
.iw-wh-hero .iw-eyebrow { color: var(--wp--preset--color--brand-red); }
.iw-whd .iw-eyebrow { font-size: clamp(1.1rem, 1.56vw, 1.4rem); }

/* Startseite-neu: Mehrwert 1/2/3 (Design 72pt→54px, brand-red, Hoss Sharp) */
.iw-mehrwert__num { font-family: hoss-sharp, sans-serif; font-weight: 700; line-height: 1;
  color: var(--wp--preset--color--brand-red); margin: 0 0 .4rem;
  font-size: clamp(2.2rem, 3.75vw, 3.375rem); }
.iw-mehrwert__cols .wp-block-column { border-top: 3px solid var(--wp--preset--color--brand-red); padding-top: 1rem; }

/* Loop-Iteration 1: GET IN THE L∞P (Design: schwarz auf Papier, ∞ statt OO) */
.iw-loop__inf { font-family: inherit; letter-spacing: -0.04em; }

/* Loop-Iteration 3: FAQ auf rotem Band (Design) — Title + Fragen in Papier */
.iw-faq--onred .iw-faq-title { color: var(--wp--preset--color--paper); }
.iw-faq--onred, .iw-faq--onred .iw-faq-intro, .iw-faq--onred summary, .iw-faq--onred .iw-faq__a { color: var(--wp--preset--color--paper); }
.iw-faq--onred summary::after { color: var(--wp--preset--color--paper); }
.iw-faq--onred details { border-top-color: rgba(245,239,231,.35) !important; }
.iw-faq--onred .iw-faq-trees img { filter: brightness(0) invert(1); opacity: .85; }