/* =====================================================================
   Doublepawsadventures – Website-Stylesheet
   Tokens 1:1 aus Designsystem/index.html (:root), Komponenten aus design.md
   ===================================================================== */

:root{
  /* ---- Farben: Primär (Orange = einziger CTA-Akzent) ---- */
  --color-primary:        #D76B26;
  --color-primary-hover:  #BB5A1E;
  --color-primary-soft:   #F7E3D4;
  --color-primary-deep:   #8F4414;  /* kleine orange Schrift auf der Sunrise-Fläche (≥ 4.5:1) */
  --color-primary-light:  #F7B98A;  /* betontes Wort auf grünen Flächen (≥ 4:1) */

  /* ---- Farben: Sekundärakzent (Waldgrün) ---- */
  --color-forest:         #18442A;
  --color-forest-hover:   #123522;
  --color-forest-soft:    #DCE6DF;
  --color-forest-light:   #2A6440;  /* helles Waldgrün: Verlaufsbeginn, Bergkante im Blog */

  /* ---- Farben: Dunkle Flächen ---- */
  --color-petrol:         #18442A;
  --color-petrol-700:     #1E5335;
  --color-ink:            #000000;
  --color-heading:        #10201F;

  /* ---- Farben: Status ---- */
  --color-success:        #2D8A4E;

  /* ---- Farben: Neutrale ---- */
  --color-muted:          #5C6E6D;
  --color-line:           rgba(14, 58, 60, 0.12);
  --color-line-strong:    rgba(14, 58, 60, 0.22);

  /* ---- Farben: Flächen ---- */
  --color-surface:        #FFFFFF;
  --color-surface-cream:  #FFE4B8;
  --color-surface-sand:   #FBF9F3;
  --color-nav:            rgba(24, 68, 42, 0.92);
  --color-sage:           #7E9772;

  /* ---- Farben: auf Dunkel ---- */
  --color-on-dark:        #F7F4EC;
  --color-on-dark-muted:  rgba(247, 244, 236, 0.66);
  --color-on-dark-line:   rgba(247, 244, 236, 0.16);
  --color-white:          #FFFFFF;
  --color-black:          #000000;

  /* ---- Typografie ---- */
  --font-display: "Anton", "Inter Tight", Impact, "Arial Narrow", sans-serif;
  --font-accent:  "Starlight Alaska", "Anton", "Inter Tight", sans-serif;
  --font-sans:    "Inter Tight", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Sonnenaufgang am Berg – warme Sektionsfläche */
  --gradient-sunrise: linear-gradient(180deg, #FFF6EA 0%, #FFE4B8 28%, #FFC48E 62%, #FF9D6C 100%);
  /* Wald – dunkle Break-Sektion */
  --gradient-forest:  linear-gradient(180deg, #2A6440 0%, #1E5335 35%, #18442A 100%);

  --fs-display: clamp(2.75rem, 6.4vw, 5.25rem);  /* 23.09.2026 mutiger: war 2.5rem/6vw/4.5rem */
  --fs-h1:      clamp(2.5rem, 5.6vw, 4.5rem);    /* war 2.25rem/5vw/3.75rem */
  --fs-h2:      clamp(2.25rem, 4.4vw, 3.5rem);   /* war 1.875rem/3.5vw/2.75rem – Artikel behalten die alte Größe */
  --fs-h3:      clamp(1.375rem, 2vw, 1.75rem);
  --fs-lead:    clamp(1.125rem, 1.5vw, 1.3125rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.8125rem;

  /* ---- Abstände ---- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;  --space-10: 128px;
  --container: 1240px;
  --gutter: 24px;

  /* ---- Radien ---- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ---- Schatten (Petrol-Tint) ---- */
  --shadow-xs: 0 1px 4px rgba(14, 58, 60, 0.05);
  --shadow-sm: 0 2px 20px rgba(14, 58, 60, 0.06);
  --shadow-md: 0 8px 24px rgba(14, 58, 60, 0.08), 0 1px 4px rgba(14, 58, 60, 0.04);
  --shadow-lg: 0 16px 44px rgba(14, 58, 60, 0.10), 0 1px 4px rgba(14, 58, 60, 0.05);
  --shadow-xl: 0 30px 70px -34px rgba(14, 58, 60, 0.28);
  --shadow-glow: 0 4px 20px rgba(215, 107, 38, 0.35);

  /* ---- Bewegung ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);        /* kräftig: Hover, Einblenden, Menüs */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);    /* Formwechsel auf der Stelle (Burger → X) */
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 1s;

  --header-h: 96px;
}

/* ---------- Basis ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.7;
  letter-spacing:-0.2px;
  color:var(--color-ink);
  background:var(--color-surface);
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:400;
  color:var(--color-heading);
  margin:0 0 var(--space-4);
}
h1{ font-size:var(--fs-h1); line-height:1.05; letter-spacing:0.005em; }
h2{ font-size:var(--fs-h2); line-height:1.12; letter-spacing:0.005em; }
h3{ font-size:var(--fs-h3); line-height:1.25; letter-spacing:0.01em; }
p{ margin:0 0 var(--space-4); }
a{ color:var(--color-primary-hover); }
@media (hover:hover) and (pointer:fine){ a:hover{ color:var(--color-primary); } }
ul{ margin:0 0 var(--space-4); padding-left:1.2em; }
li{ margin-bottom:var(--space-2); }
strong{ font-weight:700; }
:focus-visible{
  outline:2px solid var(--color-primary);
  outline-offset:3px;
  border-radius:var(--radius-sm);
}

/* ---------- Layout ---------- */
.wrap{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{ padding-block:var(--space-9); }
.section--cream{ background:var(--gradient-sunrise); }
.section--sand{ background:var(--color-surface-sand); }
.section--petrol{
  background:var(--gradient-forest);
  color:var(--color-on-dark);
}
.section--petrol h2,.section--petrol h3{ color:var(--color-on-dark); }
.section--tight{ padding-block:var(--space-8); }
.section-head{ max-width:640px; margin:0 auto var(--space-7); text-align:center; }
.section-head p{ font-size:var(--fs-lead); line-height:1.6; color:var(--color-muted); }
.eyebrow{
  display:block;
  font-size:var(--fs-eyebrow);
  font-weight:800;
  letter-spacing:0.14em;
  line-height:1.4;
  text-transform:uppercase;
  color:var(--color-primary-hover);
  margin-bottom:var(--space-3);
}
.eyebrow a{ color:inherit; }
/* Zurück-Link über dem Seitentitel – ruhig, in normaler Schrift, kein Label */
.zurueck{
  display:inline-flex; align-items:center; gap:6px;
  min-height:44px; margin-bottom:var(--space-2);
  font-size:15px; font-weight:600;
  color:var(--color-heading); text-decoration:none;
}
.zurueck span{ transition:transform var(--dur) var(--ease-out); }
@media (hover:hover) and (pointer:fine){ .zurueck:hover{ color:var(--color-heading); text-decoration:underline; text-underline-offset:3px; } }
@media (hover:hover) and (pointer:fine){ .zurueck:hover span{ transform:translateX(-3px); } }
.section--petrol .eyebrow{ color:var(--color-on-dark-muted); }
.section--cream .eyebrow{ color:var(--color-primary-deep); }
.section--petrol em.accent{ color:var(--color-primary-light); }
/* Auf dem Sonnenaufgang-Verlauf ist das helle Orange zu blass (2,3:1) –
   dort steht das betonte Wort im dunkleren Orange des Designsystems. */
.hero--sub em.accent, .section--cream em.accent{ color:var(--color-primary-hover); }
.lead{ font-size:var(--fs-lead); line-height:1.6; font-weight:500; letter-spacing:-0.01em; }
.muted{ color:var(--color-muted); }
.small{ font-size:var(--fs-small); line-height:1.5; font-weight:500; }
em.accent{
  font-family:var(--font-accent);
  font-style:normal;
  font-weight:400;
  font-size:1.15em;
  line-height:1;
  letter-spacing:0.01em;
  display:inline-block;
  padding:0.06em 0.16em;
  /* feine schwarze Umrandung AUSSEN um die Buchstaben – frisst die Schwünge nicht an */
  filter:
    drop-shadow(0 0 0.6px rgba(0, 0, 0, 0.95))
    drop-shadow(0 0 0.6px rgba(0, 0, 0, 0.75))
    drop-shadow(0 1px 1.5px rgba(14, 58, 60, 0.22));
  color:var(--color-primary);
}
.prose{ max-width:70ch; }
.prose--center{ margin-inline:auto; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:2px;
  font-family:var(--font-sans);
  font-weight:800;
  font-size:15px;
  letter-spacing:-0.2px;
  line-height:1.2;
  text-decoration:none;
  padding:14px 28px;
  border-radius:var(--radius-pill);
  border:1.5px solid transparent;
  cursor:pointer;
  transition:background var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
             box-shadow var(--dur) var(--ease-out), transform 160ms var(--ease-out);
  text-align:center;
}
.btn--primary{ background:var(--color-primary); color:var(--color-white); }
@media (hover:hover) and (pointer:fine){ .btn--primary:hover{ background:var(--color-primary-hover); color:var(--color-white); box-shadow:var(--shadow-glow); transform:translateY(-1px); } }
.btn--forest{ background:var(--color-forest); color:var(--color-on-dark); }
@media (hover:hover) and (pointer:fine){ .btn--forest:hover{ background:var(--color-forest-hover); color:var(--color-on-dark); transform:translateY(-1px); } }
.btn--outline{ background:transparent; border-color:var(--color-forest); color:var(--color-forest); }
@media (hover:hover) and (pointer:fine){ .btn--outline:hover{ background:var(--color-forest-soft); color:var(--color-forest); } }
.btn--ghost{ background:rgba(247,244,236,0.10); border-color:var(--color-on-dark-line); color:var(--color-on-dark); }
@media (hover:hover) and (pointer:fine){ .btn--ghost:hover{ background:rgba(247,244,236,0.18); color:var(--color-on-dark); } }
.btn--sm{ padding:10px 20px; font-size:14px; }
/* 19px Bold = "große Schrift" nach WCAG → Weiß auf Orange (3.5:1) ist damit zulässig */
.btn--lg{ padding:17px 36px; font-size:19px; }
.btn__sub{ font-size:12px; font-weight:500; color:rgba(255,255,255,0.8); letter-spacing:0; }
.btn--arrow{ flex-direction:row; gap:12px; }
.btn--arrow span{ transition:transform var(--dur) var(--ease); }
@media (hover:hover) and (pointer:fine){ .btn--arrow:hover span{ transform:translateX(6px); } }
/* Drück-Feedback: der Button gibt sofort nach (auch am Handy) */
.btn:active, .btn:hover:active{ transform:scale(0.97); transition-duration:100ms; }
.btn-row{ display:flex; flex-wrap:wrap; gap:var(--space-4); }
.btn-row--center{ justify-content:center; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:var(--color-nav);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--color-line);
}
.site-header__inner{
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-5);
}
.brand{ display:flex; align-items:center; gap:var(--space-3); min-height:44px; text-decoration:none; color:var(--color-on-dark); }
.brand img{ height:40px; width:40px; border-radius:var(--radius-pill); object-fit:cover; }
.brand span{ font-weight:800; letter-spacing:-0.02em; font-size:17px; }
.nav{ display:flex; align-items:center; gap:var(--space-2); }
.nav a{ color:var(--color-on-dark); text-decoration:none; font-weight:600; font-size:15px; }
.nav > a, .nav__toggle{
  padding:9px 16px;
  border-radius:var(--radius-pill);
  background:transparent;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
@media (hover:hover) and (pointer:fine){ .nav > a:hover, .nav__toggle:hover{ background:rgba(126, 151, 114, 0.45); color:var(--color-on-dark); } }
.nav a[aria-current="page"]{ background:rgba(126, 151, 114, 0.45); color:var(--color-on-dark); }
.nav__item{ position:relative; }
.nav__toggle{
  font:inherit; font-weight:600; font-size:15px; color:var(--color-on-dark);
  border:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
}
.nav__toggle::after{ content:"\25BE"; font-size:12px; transition:transform 0.2s ease; }
/* Pfeil zeigt nach oben, solange das Blog-Untermenue offen ist. */
.nav__toggle[aria-expanded="true"]::after{ transform:rotate(180deg); }
.nav__panel{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%);
  min-width:290px; padding:var(--space-4);
  background:var(--color-surface); border:1px solid var(--color-line);
  border-radius:var(--radius-md); box-shadow:var(--shadow-lg);
  display:none; flex-direction:column; gap:2px;
  transform-origin:top center;
}
/* Dropdown wächst aus dem Menüpunkt: kurz, damit es nicht bremst */
.nav__panel.is-open{
  display:flex;
  transition:opacity 150ms var(--ease-out), transform 150ms var(--ease-out);
}
@starting-style{
  .nav__panel.is-open{ opacity:0; transform:translateX(-50%) scale(0.97); }
}
.nav__panel a{ padding:8px 12px; border-radius:var(--radius-sm); font-weight:500; color:var(--color-ink); background:transparent; }
@media (hover:hover) and (pointer:fine){ .nav__panel a:hover{ background:var(--color-forest-soft); color:var(--color-forest); } }
.nav__panel a[aria-current="page"]{ background:var(--color-forest-soft); color:var(--color-forest); }
.nav__panel hr{ border:0; border-top:1px solid var(--color-line); margin:var(--space-2) 0; }
.header-cta{ display:inline-flex; }
.burger{
  display:none; width:44px; height:44px; border:1px solid var(--color-on-dark-line);
  background:rgba(247,244,236,0.10); border-radius:var(--radius-pill);
  cursor:pointer; align-items:center; justify-content:center;
}
.burger span, .burger span::before, .burger span::after{
  content:""; display:block; width:18px; height:2px; background:var(--color-on-dark); border-radius:2px;
}
.burger span{ position:relative; transition:background 120ms linear; }
.burger span::before{ position:absolute; top:-6px; }
.burger span::after{ position:absolute; top:6px; }
.burger span::before, .burger span::after{ transition:transform 200ms var(--ease-in-out); }
/* Offen: die drei Striche werden zum X – man sieht sofort, wie es zugeht */
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg); }
.burger:active{ transform:scale(0.95); }

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; background:var(--gradient-sunrise); }
.hero__bg{ position:absolute; inset:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; }
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,251,245,0.92) 0%, rgba(255,251,245,0.55) 55%, rgba(255,251,245,0.15) 100%);
}
.hero__inner{
  position:relative;
  z-index:3;
  padding-block:var(--space-9) calc(var(--space-8) + clamp(56px, 8vw, 130px));
}
.hero__content{ max-width:720px; }

/* Startseite: Foto vollständig sichtbar, Text darüber */
.hero--home{ display:grid; }
.hero--home > .hero__bg{ position:relative; grid-column:1; grid-row:1; }
.hero--home > .hero__bg img{ width:100%; height:auto; object-fit:contain; }
.hero--home > .hero__inner{ grid-column:1; grid-row:1; align-self:end; }
.hero--home > .hero__curve{ grid-column:1; grid-row:1; align-self:end; margin-top:0; }
/* Deckt die Pixelkante des Fotos ab, die sonst unter der Bergkante als Linie durchblitzt */
.hero--home + .section{ position:relative; margin-top:-2px; background:var(--color-surface); }
.hero--home .hero__bg::after{
  background:linear-gradient(180deg, rgba(255,251,245,0.10) 0%, rgba(255,251,245,0.45) 48%, rgba(255,251,245,0.88) 100%);
}
.hero h1{ font-size:var(--fs-display); line-height:0.95; margin-bottom:var(--space-5); }
.hero .lead{ max-width:34em; color:var(--color-heading); }
.hero__curve{
  position:relative;
  height:clamp(56px, 8vw, 130px);
  margin-top:calc(-1 * clamp(56px, 8vw, 130px));
  line-height:0;
  pointer-events:none;
  z-index:1;
}
/* weiße Fläche unter der Bergkante, damit beim Scrollen keine Lücke entsteht */
.hero__curve::after{
  content:"";
  position:absolute; left:0; right:0; top:99%;
  height:420px;
  background:var(--color-surface);
}
.hero--sub .hero__inner{
  padding-block:var(--space-8) calc(var(--space-9) + clamp(56px, 8vw, 130px));
}
/* Betontes Wort im Seitentitel immer auf eigener Zeile – überall gleich gesetzt */
.hero h1 em.accent{ display:block; margin-top:0.06em; font-size:1.28em; }

/* ---------- Karten ---------- */
.grid{ display:grid; gap:var(--space-6); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.card{
  background:var(--color-surface);
  border:1px solid var(--color-line);
  border-top:4px solid var(--color-forest);
  border-radius:3px;
  padding:var(--space-6);
  box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column;
}
.card > :last-child{ margin-bottom:0; }
.card:not(.card--tour) > .badge + h3, .card:not(.card--tour) > .badge-row + h3{ margin-top:var(--space-4); }
a.card{ text-decoration:none; color:inherit; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
@media (hover:hover) and (pointer:fine){ a.card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); color:inherit; } }
.card__img{ width:100%; height:auto; margin-bottom:var(--space-5); }

/* ---------- Polaroid-Rahmen für Fotos ---------- */
.media__img, .card__img, .article__figure img{
  background:var(--color-white);
  border:13px solid var(--color-white);
  border-bottom-width:50px;
  border-radius:2px;
  box-shadow:var(--shadow-lg);
}
/* Große Fotos: vollständig sichtbar, aber gedeckelt – der Text bleibt der Hauptdarsteller */
.media__img, .article__figure img{
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
  max-height:clamp(300px, 44vh, 460px);
  object-fit:contain;
  margin-inline:auto;
}
/* Karten-Fotos: alle exakt gleich groß */
.card__img{
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
  object-position:center;
}
.card__foot{ margin-top:auto; padding-top:var(--space-5); }

/* ---------- Kategorie-Kachel ---------- */
.card--cat{
  position:relative;
  overflow:hidden;
  padding-top:var(--space-7);
  isolation:isolate;
}
.card--cat::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:5px;
  background:linear-gradient(90deg, var(--color-forest) 0%, var(--color-primary) 100%);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-slow) var(--ease);
}
.card--cat::after{
  content:"";
  position:absolute; z-index:-1; right:-70px; top:-70px;
  width:190px; height:190px; border-radius:var(--radius-pill);
  background:var(--color-forest-soft);
  opacity:0; transform:scale(0.6);
  transition:opacity var(--dur) var(--ease), transform var(--dur-slow) var(--ease);
}
@media (hover:hover) and (pointer:fine){ .card--cat:hover::before{ transform:scaleX(1); } }
.card--cat:focus-visible::before{ transform:scaleX(1); }
@media (hover:hover) and (pointer:fine){ .card--cat:hover::after{ opacity:1; transform:scale(1); } }
.card--cat:focus-visible::after{ opacity:1; transform:scale(1); }
.card__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; margin-bottom:var(--space-4);
  border-radius:var(--radius-pill);
  background:var(--color-forest-soft);
  font-size:26px; line-height:1;
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
@media (hover:hover) and (pointer:fine){ .card--cat:hover .card__icon{ transform:translateY(-3px) rotate(-6deg); background:var(--color-primary-soft); } }
.card__arrow{
  margin-top:var(--space-5);
  display:inline-flex; align-items:center; gap:8px;
  font-size:var(--fs-small); font-weight:800; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--color-forest);
}
.card__arrow span{ transition:transform var(--dur) var(--ease); }
@media (hover:hover) and (pointer:fine){ .card--cat:hover .card__arrow span{ transform:translateX(6px); } }

/* ---------- Reichweite: Zähler + Europakarte ---------- */
.zahlen{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:var(--space-6);
  margin:var(--space-6) 0;
  text-align:center;
}
.zahl{
  background:var(--color-white);
  border:1px solid var(--color-line);
  border-top:4px solid var(--color-forest);
  border-radius:3px;
  padding:var(--space-6) var(--space-4);
  box-shadow:var(--shadow-sm);
}
.zahl__wert{
  font-family:var(--font-display);
  font-size:clamp(2.25rem, 6vw, 3.5rem);
  line-height:1.05;
  color:var(--color-forest);
  font-variant-numeric:tabular-nums;
}
.zahl__label{
  font-size:var(--fs-small);
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--color-muted);
  margin-top:var(--space-2);
}
.karte{
  background:var(--color-white);
  border:1px solid var(--color-line);
  border-radius:3px;
  padding:var(--space-4);
  box-shadow:var(--shadow-sm);
  overflow-x:auto;
}
.karte__svg{ width:100%; min-width:420px; height:auto; display:block; }
.land{
  fill:#FFFCF6;
  stroke:rgba(24, 68, 42, 0.28);
  stroke-width:0.9;
  stroke-linejoin:round;
}
.land--top{ fill:var(--color-forest-soft); stroke:rgba(24, 68, 42, 0.55); stroke-width:1.1; }
.land--de{ fill:var(--color-primary-soft); stroke:rgba(215, 107, 38, 0.8); stroke-width:1.4; }
.pin__land{
  font-family:var(--font-sans);
  font-size:15px; font-weight:800;
  fill:var(--color-heading);
  paint-order:stroke;
  stroke:#FFFFFF; stroke-width:3.5px; stroke-linejoin:round;
}
.pin__wert{
  font-family:var(--font-display);
  font-size:20px;
  fill:var(--color-primary-hover);
  paint-order:stroke;
  stroke:#FFFFFF; stroke-width:3.5px; stroke-linejoin:round;
}
.js-anim .pin{
  opacity:0;
  transform-box:fill-box;
  transform-origin:50% 100%;
  animation:pinRein 0.6s var(--ease) forwards;
  animation-play-state:paused;
}
.js-anim .karte.sichtbar .pin{ animation-play-state:running; }
.js-anim .pin--1{ animation-delay:0.15s; }
.js-anim .pin--2{ animation-delay:0.4s; }
.js-anim .pin--3{ animation-delay:0.65s; }
.js-anim .pin--4{ animation-delay:0.9s; }
@keyframes pinRein{
  0%{ opacity:0; transform:translateY(-18px) scale(0.85); }
  70%{ opacity:1; transform:translateY(2px) scale(1.02); }
  100%{ opacity:1; transform:none; }
}
@media (max-width:768px){
  .zahlen{ grid-template-columns:1fr; }
}

/* ---------- Länder-Kachel: Flagge + Flaggenfarben (60 % transparent) ---------- */
.card__icon--flag{
  width:64px; height:44px;
  border-radius:var(--radius-sm);
  background:var(--color-white);
  border:1px solid var(--color-line);
  padding:0; overflow:hidden;
  box-shadow:var(--shadow-xs);
}
.card__icon--flag svg{ width:100%; height:100%; display:block; }
@media (hover:hover) and (pointer:fine){ .card--flag:hover .card__icon{ background:var(--color-white); } }
.card--flag::after{ display:none; }
.card--flag h3, .card--flag p{ color:var(--color-heading); }
.card--flag .card__arrow{
  align-self:flex-start;
  background:rgba(255,255,255,0.88);
  padding:6px 14px;
  border-radius:var(--radius-pill);
  color:var(--color-forest);
}
.cat--de{ background-image:linear-gradient(135deg, rgba(255,206,0,0.6) 0%, rgba(221,0,0,0.6) 62%, rgba(0,0,0,0.6) 100%); }
.cat--at{ background-image:linear-gradient(135deg, rgba(237,41,57,0.6) 0%, rgba(255,255,255,0.6) 50%, rgba(237,41,57,0.6) 100%); }
.cat--it{ background-image:linear-gradient(135deg, rgba(0,140,69,0.6) 0%, rgba(244,245,240,0.6) 50%, rgba(205,33,42,0.6) 100%); }
.cat--hr{ background-image:linear-gradient(135deg, rgba(255,0,0,0.6) 0%, rgba(255,255,255,0.6) 50%, rgba(23,23,150,0.6) 100%); }
.cat--nl{ background-image:linear-gradient(135deg, rgba(174,28,40,0.6) 0%, rgba(255,255,255,0.6) 50%, rgba(33,70,139,0.6) 100%); }

/* ---------- Animationen (nur mit JS, respektiert reduzierte Bewegung) ---------- */
.js-anim .reveal{
  opacity:0;
  transform:translateY(12px);
  transition:opacity 450ms var(--ease-out), transform 450ms var(--ease-out);
}
.js-anim .reveal.is-visible{ opacity:1; transform:none; }
.js-anim .hero__content > *{
  opacity:0; transform:translateY(24px);
  animation:heroIn 0.8s var(--ease) forwards;
}
.js-anim .hero__content > *:nth-child(1){ animation-delay:0.05s; }
.js-anim .hero__content > *:nth-child(2){ animation-delay:0.18s; }
.js-anim .hero__content > *:nth-child(3){ animation-delay:0.31s; }
.js-anim .hero__content > *:nth-child(4){ animation-delay:0.44s; }
.js-anim .hero__content > *:nth-child(5){ animation-delay:0.57s; }
@keyframes heroIn{ to{ opacity:1; transform:none; } }

/* Auftritt Startseite: Schriftzug steigt auf wie Gipfel im Morgenlicht */
.js-anim .hero--home h1{ animation:none; opacity:1; transform:none; }
/* Lead und Buttons kommen früh, damit man nicht auf den Schriftzug warten muss */
.js-anim .hero--home .hero__content > *:nth-child(2){ animation-delay:0.7s; animation-duration:1s; }
.js-anim .hero--home .hero__content > *:nth-child(3){ animation-delay:0.95s; animation-duration:1s; }
.hero--home h1 .letter{
  display:inline-block;
  white-space:pre;
  opacity:0;
  transform:translateY(0.38em) scale(0.96);
  filter:blur(4px);
  animation:buchstabeAuf 900ms cubic-bezier(0.16, 0.84, 0.28, 1) forwards;
}
@keyframes buchstabeAuf{
  55%{ filter:blur(1px); }
  100%{ opacity:1; transform:none; filter:blur(0); }
}
.hero--home h1.leuchtet{ animation:sonnenglanz 1.2s var(--ease) 1; }
@keyframes sonnenglanz{
  0%{ text-shadow:none; }
  40%{ text-shadow:0 0 28px rgba(215, 107, 38, 0.7), 0 0 8px rgba(255, 206, 140, 0.65); }
  100%{ text-shadow:none; }
}
.js-anim .hero__content > .pawtrail{ animation:none; opacity:1; transform:none; }
.pawtrail{ display:flex; gap:16px; margin-top:var(--space-6); }
.pawtrail span{
  opacity:0;
  font-size:22px; line-height:1;
  animation:pfoteAuf 400ms var(--ease-out) forwards;
}
.pawtrail span:nth-child(odd){ transform:rotate(-8deg); }
.pawtrail span:nth-child(even){ transform:translateY(11px) rotate(14deg); }
@keyframes pfoteAuf{ to{ opacity:0.5; } }
.js-anim .hero__bg img{ animation:heroZoom 22s var(--ease) forwards; }
@keyframes heroZoom{ from{ transform:scale(1.08); } to{ transform:scale(1); } }
/* Startseite: Foto bleibt vollständig sichtbar – kein Zoom, der den Rand abschneidet */
.js-anim .hero--home .hero__bg img{ animation:none; }
.media__img{ transition:transform 400ms var(--ease-out), box-shadow var(--dur) var(--ease-out); }
/* Polaroid dreht sich nur bei echter Maus gerade – am Handy würde der Zustand "kleben" */
@media (hover:hover) and (pointer:fine){
  .media:hover .media__img{ transform:rotate(0deg) scale(1.02); box-shadow:var(--shadow-xl); }
}
/* ---------- Handy: fühlt sich an wie eine App, nicht wie eine Webseite ----------
   Alle :hover-Regeln stehen in @media (hover:hover) and (pointer:fine) –
   am Handy bleibt nach dem Tippen sonst der Hover-Zustand "kleben". */
html{ -webkit-tap-highlight-color:transparent; } /* kein grauer Blitz beim Antippen */
a, button, label, summary, input[type="range"]{ touch-action:manipulation; } /* kein Warten auf Doppeltipp */
/* Beschriftung von Bedienelementen nicht per langem Drücken markieren */
.btn, .burger, .nav__toggle, .zurueck, a.badge, .cookie-link{
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}
/* Sofortige Rückmeldung beim Antippen – ersetzt den Hover am Handy */
a.card:active{ transform:scale(0.985); transition-duration:100ms; }
.nav > a:active, .nav__toggle:active, .nav__panel a:active{ background:rgba(126, 151, 114, 0.45); }
.nav__panel a:active{ background:var(--color-forest-soft); }
a.badge:active{ background:var(--color-forest); color:var(--color-on-dark); }
.zurueck:active span{ transform:translateX(-3px); }
/* Scrollen in Menü, Ortsvorschlägen und Karten schiebt nicht die Seite dahinter mit */
.nav, .kompass__vorschlaege{ overscroll-behavior:contain; }
.karte, .kompass__karte{ overscroll-behavior-x:contain; }
.badge{ transition:background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); }
@media (hover:hover) and (pointer:fine){ a.badge:hover{ transform:translateY(-2px); } }
.checklist li::before{ transition:transform var(--dur) var(--ease); }
@media (hover:hover) and (pointer:fine){ .checklist li:hover::before{ transform:scale(1.15); } }

/* ---------- Media-Block (Bild + Text) ---------- */
.media{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:var(--space-8); align-items:center; }
.media + .media{ margin-top:var(--space-9); }
.media__img{ transform:rotate(-1.4deg); }
.media--flip .media__img{ transform:rotate(1.4deg); }
.media--flip{ grid-template-columns:1.15fr 0.85fr; }
.media--flip .media__text{ order:-1; }
.media__text > :last-child{ margin-bottom:0; }

/* ---------- Badge / Pille ---------- */
.badge{
  display:inline-block;
  background:var(--color-forest-soft); color:var(--color-forest);
  border-radius:var(--radius-pill); padding:6px 14px;
  font-size:13px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  text-decoration:none;
}
@media (hover:hover) and (pointer:fine){ a.badge:hover{ background:var(--color-forest); color:var(--color-on-dark); } }
.badge--primary{ background:var(--color-primary-soft); color:var(--color-primary-hover); }
.badge--neutral{ background:rgba(14,58,60,0.06); color:var(--color-muted); }
.badge--on-dark{ background:rgba(247,244,236,0.12); color:var(--color-on-dark); }
.badge-row{ display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; }

/* ---------- Häkchen-Liste ---------- */
.checklist{ list-style:none; padding:0; margin:0 0 var(--space-5); }
.checklist li{ display:flex; gap:12px; margin-bottom:12px; align-items:flex-start; }
.checklist li::before{
  content:"\2713";
  flex:0 0 20px; width:20px; height:20px; margin-top:4px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--color-forest-soft); color:var(--color-forest);
  border-radius:var(--radius-pill); font-size:12px; font-weight:800;
}

/* ---------- Platzhalter (spätere Kurs-Schritte) ---------- */
.placeholder{
  border:2px dashed var(--color-primary);
  background:var(--color-primary-soft);
  border-radius:var(--radius-md);
  padding:var(--space-6);
  color:var(--color-heading);
}
.placeholder > :last-child{ margin-bottom:0; }
.placeholder__title{
  display:block; font-size:var(--fs-eyebrow); font-weight:800; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--color-primary-hover); margin-bottom:var(--space-3);
}
.placeholder--inline{ padding:var(--space-4); font-size:var(--fs-small); line-height:1.5; }
.placeholder--footer{
  border-color:var(--color-on-dark-line); background:rgba(247,244,236,0.08);
  color:var(--color-on-dark); padding:var(--space-2) var(--space-4);
  font-size:var(--fs-small); border-radius:var(--radius-sm); display:inline-block;
}

/* ---------- Artikel ---------- */
.article{ max-width:70ch; margin-inline:auto; }
.article h2{ margin-top:var(--space-8); }
.article h3{ margin-top:var(--space-6); }
.article__meta{ display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:center; margin-bottom:var(--space-5); }
.article__lead{ font-size:var(--fs-lead); line-height:1.6; font-weight:500; color:var(--color-muted); }
.article__figure{ margin:var(--space-6) 0; }
.article__figure img{ border-radius:var(--radius-lg); width:100%; object-fit:cover; }
.article__figure figcaption{ font-size:var(--fs-small); color:var(--color-muted); margin-top:var(--space-2); }
.factbox{
  background:var(--color-forest-soft); border-radius:var(--radius-md);
  padding:var(--space-5) var(--space-6); margin:var(--space-6) 0;
}
.factbox > :last-child{ margin-bottom:0; }

/* ---------- Footer ---------- */
.site-footer{
  background:linear-gradient(180deg, var(--color-forest-light) 0%, var(--color-petrol-700) 30%, var(--color-forest) 62%, #0E2A1A 100%);
  color:var(--color-on-dark);
  padding-block:var(--space-8) var(--space-6);
}
.site-footer a{ color:var(--color-on-dark); text-decoration:none; }
@media (hover:hover) and (pointer:fine){ .site-footer a:hover{ color:var(--color-primary-light); } }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--space-7); }
.footer__brand img{ height:clamp(90px, 9vw, 130px); width:auto; margin-bottom:var(--space-5); }
.footer__claim{ color:var(--color-on-dark-muted); max-width:34ch; }
.footer__col h3{ font-size:var(--fs-eyebrow); font-weight:800; letter-spacing:0.14em; text-transform:uppercase; color:var(--color-on-dark-muted); margin-bottom:var(--space-4); }
.footer__col ul{ list-style:none; margin:0; padding:0; }
.footer__col li{ margin-bottom:var(--space-3); }
.footer__bottom{
  margin-top:var(--space-7); padding-top:var(--space-5);
  border-top:1px solid var(--color-on-dark-line);
  display:flex; flex-wrap:wrap; gap:var(--space-4); justify-content:space-between; align-items:center;
  font-size:var(--fs-small); color:var(--color-on-dark-muted);
}

/* ---------- Skip-Link ---------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--color-forest); color:var(--color-on-dark);
  padding:12px 20px; border-radius:0 0 var(--radius-sm) 0;
}
.skip:focus{ left:0; }

/* ---------- Tablet ---------- */
@media (max-width:1024px){
  .grid--3{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- Mobile ---------- */
@media (max-width:768px){
  :root{ --gutter:16px; --header-h:64px; }
  .section{ padding-block:var(--space-8); }
  .section--tight{ padding-block:var(--space-7); }
  .grid--2,.grid--3{ grid-template-columns:1fr; }
  .media{ grid-template-columns:1fr; gap:var(--space-5); }
  .media--flip .media__text{ order:0; }
  .burger{ display:inline-flex; }
  .header-cta{ display:none; }
  .nav{
    display:none;
    /* Achtung: .site-header hat backdrop-filter. Dadurch wird der Header zum
       Bezugsrahmen für position:fixed – "bottom:0" würde sich auf den 64px
       hohen Header beziehen statt auf den Bildschirm. Deshalb feste Höhe. */
    position:fixed; top:var(--header-h); right:0; left:0; bottom:auto;
    height:calc(100vh - var(--header-h));
    height:calc(100dvh - var(--header-h));
    flex-direction:column; align-items:flex-start; gap:var(--space-4);
    background:rgba(24, 68, 42, 0.98);
    padding:var(--space-6) var(--gutter) var(--space-9);
    overflow-y:auto;
    /* Schließen: schnell (150ms) – wer schließt, will weg */
    opacity:0; transform:translateY(-8px);
    transition:opacity 150ms var(--ease-out), transform 150ms var(--ease-out), display 150ms allow-discrete;
  }
  /* Öffnen: 200ms sanft von oben */
  .nav.is-open{ display:flex; opacity:1; transform:none; transition-duration:200ms; }
  @starting-style{
    .nav.is-open{ opacity:0; transform:translateY(-8px); }
  }
  @starting-style{
    .nav__panel.is-open{ opacity:0; transform:translateY(-4px); }
  }
  .nav > *{ width:100%; }
  .nav > a, .nav__toggle{ font-size:var(--fs-h3); font-weight:800; letter-spacing:-0.015em; }
  .nav__panel{
    position:static; transform:none; display:none; min-width:0; width:100%;
    box-shadow:none; margin-top:var(--space-3);
  }
  .nav__panel a{ font-size:var(--fs-body); }
  .nav .btn{ width:100%; }
  .media__img, .card__img, .article__figure img{ border-width:9px; border-bottom-width:34px; }
  .hero--home{ display:block; }
  .hero--home > .hero__bg{ position:relative; }
  .hero--home > .hero__bg::after{ display:none; }
  .hero--home > .hero__curve{ margin-top:calc(-1 * clamp(56px, 8vw, 130px)); }
  /* "Doublepawsadventures" ist ein sehr langes Wort ohne echte Trennstelle.
     anim.js zerlegt diese eine Überschrift in einzelne Buchstaben-Spans –
     dadurch darf der Browser mitten im Wort umbrechen und das weiche
     Trennzeichen (­) greift nicht. Unter rund 445px Bildschirmbreite
     wird die Schrift deshalb so weit verkleinert, dass das Wort in eine
     Zeile passt. Auf breiteren Schirmen bleibt --fs-display unverändert. */
  .hero--home h1{ font-size:min(var(--fs-display), 9vw); }
  .hero__inner{ padding-block:var(--space-7) calc(var(--space-6) + clamp(56px, 8vw, 130px)); text-align:center; }
  .hero__content{ margin-inline:auto; }
  .pawtrail{ justify-content:center; gap:13px; }
  .hero .lead{ margin-inline:auto; }
  .btn-row{ justify-content:center; }
  .btn-row .btn{ width:100%; }
  .footer__top{ grid-template-columns:1fr; gap:var(--space-6); }
  /* Footer-Links: groß genug für den Daumen (44px), Abstand steckt jetzt im Link */
  .footer__col li{ margin-bottom:0; }
  .footer__col a{ display:inline-flex; align-items:center; min-height:44px; }
  .footer__recht{ flex-wrap:wrap; gap:0 var(--space-5); }
  .footer__recht a, .footer__recht .cookie-link{ display:inline-flex; align-items:center; min-height:44px; }
}

/* Reduzierte Bewegung: keine Bewegung, aber sanftes Ein-/Ausblenden bleibt als Rückmeldung */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-property:opacity, color, background-color, border-color, box-shadow !important;
    transition-duration:200ms !important;
  }
}

/* Bildunterschrift der Reichweiten-Karte */
.karte__bu{ margin:var(--space-3) 0 0; text-align:center; }

/* ---------- Schnüffel-Kompass (Tourenfilter) ---------- */
.kompass{
  background:var(--color-white);
  border:1px solid var(--color-line);
  border-top:4px solid var(--color-forest);
  border-radius:3px;
  box-shadow:var(--shadow-sm);
  padding:var(--space-6);
  margin-bottom:var(--space-7);
}
.kompass__raster{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--space-6);
}
.kompass__gruppe{
  border:0;
  border-top:1px solid var(--color-line);
  margin:0;
  padding:var(--space-5) 0 0;
  min-width:0;
}
.kompass__gruppe--breit{ grid-column:1 / -1; }
.kompass__gruppe legend{
  font-size:var(--fs-eyebrow);
  font-weight:800;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--color-forest);
  padding:0 0 var(--space-3);
}
.kompass__label{
  display:block;
  font-size:var(--fs-small);
  font-weight:700;
  color:var(--color-heading);
  margin-bottom:var(--space-2);
}
.kompass__label output{ font-weight:800; color:var(--color-primary-hover); }
.kompass__ortzeile{ display:flex; gap:var(--space-2); margin-bottom:var(--space-4); }
.kompass__ortzeile input{
  flex:1 1 auto; min-width:0;
  padding:12px 16px;
  font:inherit; font-size:var(--fs-body);
  border:1px solid var(--color-line);
  border-radius:var(--radius-sm);
  background:var(--color-white);
}
.kompass__ortzeile input:focus{
  outline:none;
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px rgba(215, 107, 38, 0.18);
}
.kompass__ortzeile .btn{ flex:0 0 auto; }
.kompass__hinweis{ font-size:var(--fs-small); line-height:1.5; color:var(--color-muted); margin:var(--space-3) 0 0; }
.kompass__skala{
  display:flex; justify-content:space-between;
  font-size:12px; color:var(--color-muted); margin:var(--space-1) 0 0;
}
.kompass input[type="range"]{
  width:100%;
  accent-color:var(--color-forest);
  margin:0;
}
.haken{
  display:flex; align-items:flex-start; gap:10px;
  font-size:var(--fs-body); line-height:1.4;
  padding:7px 0;
  cursor:pointer;
}
.haken input{
  flex:0 0 auto;
  width:20px; height:20px;
  margin:0;
  accent-color:var(--color-forest);
  cursor:pointer;
}
.kompass__extras{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0 var(--space-6);
}
.kompass__fuss{
  display:flex; flex-wrap:wrap; gap:var(--space-4);
  align-items:center; justify-content:space-between;
  margin-top:var(--space-6);
  padding-top:var(--space-5);
  border-top:1px solid var(--color-line);
}
.kompass__treffer{
  margin:0;
  font-family:var(--font-display);
  font-size:var(--fs-h3);
  color:var(--color-forest);
}
.card--tour h3{ margin-top:var(--space-3); }
.tour__werte{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  font-weight:800; color:var(--color-heading);
  margin:var(--space-3) 0;
}
.tour__werte span{ color:var(--color-line-strong); font-weight:400; }
.tour__extras{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:6px;
}
.tour__extras li{
  margin:0;
  font-size:12px; font-weight:600;
  background:var(--color-forest-soft); color:var(--color-forest);
  border-radius:var(--radius-pill);
  padding:4px 10px;
}
#k-ergebnisse:empty{ display:none; }

@media (max-width:1024px){
  .kompass__raster{ grid-template-columns:repeat(2, 1fr); }
  .kompass__extras{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:768px){
  .kompass{ padding:var(--space-5); }
  .kompass__raster{ grid-template-columns:1fr; gap:var(--space-5); }
  .kompass__extras{ grid-template-columns:1fr; }
  .kompass__ortzeile{ flex-wrap:wrap; }
  .kompass__ortzeile .btn{ width:100%; }
  .kompass__fuss{ flex-direction:column; align-items:stretch; }
  .kompass__fuss .btn{ width:100%; }
}

/* Ortsvorschläge im Schnüffel-Kompass */
.kompass__ortfeld{ position:relative; flex:1 1 auto; min-width:0; }
.kompass__ortfeld input{ width:100%; }
.kompass__vorschlaege{
  position:absolute; z-index:40; top:calc(100% + 6px); left:0; right:0;
  margin:0; padding:6px;
  list-style:none;
  background:var(--color-white);
  border:1px solid var(--color-line);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg);
  max-height:280px; overflow-y:auto;
}
.kompass__vorschlaege li{
  margin:0; padding:9px 12px;
  border-radius:var(--radius-sm);
  cursor:pointer;
  line-height:1.35;
}
.kompass__vorschlaege li:hover,
.kompass__vorschlaege li.ist-markiert{ background:var(--color-forest-soft); }
.kompass__vorschlaege strong{ display:block; font-weight:700; color:var(--color-heading); }
.kompass__vorschlaege span{ display:block; font-size:var(--fs-small); color:var(--color-muted); }

/* Kein Treffer im Schnüffel-Kompass */
.leerfund{
  background:var(--color-forest-soft);
  border:2px dashed var(--color-forest);
  border-radius:3px;
  padding:var(--space-8) var(--space-6);
  text-align:center;
  max-width:720px;
  margin-inline:auto;
}
.leerfund__pfote{
  display:block;
  font-size:44px; line-height:1;
  margin-bottom:var(--space-4);
}
.leerfund h3, .leerfund__titel{ color:var(--color-forest); }
.leerfund__titel{ font-size:var(--fs-h3); line-height:1.25; }
.leerfund > p{ max-width:52ch; margin-inline:auto; }
.leerfund__wege{
  max-width:52ch;
  margin:var(--space-5) auto var(--space-6);
  text-align:left;
}
.leerfund__wege li::before{ background:var(--color-white); }
.kompass__treffer{ transition:color var(--dur) var(--ease); }

/* ---------- Tour-Steckbrief im Blogartikel (kompakt) ---------- */
.steckbrief{
  background:var(--color-forest-soft);
  border-left:5px solid var(--color-forest);
  border-radius:3px;
  padding:var(--space-5);
  margin:var(--space-5) 0 var(--space-6);
}
.steckbrief__drucktitel{ display:none; }
.steckbrief__titel{
  display:block;
  font-size:var(--fs-eyebrow);
  font-weight:800;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--color-forest);
  margin-bottom:var(--space-4);
}
.steckbrief__liste{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-3) var(--space-6);
  margin:0 0 var(--space-4);
}
.steckbrief__liste > div{ min-width:0; }
.steckbrief__liste dt{
  font-size:11px;
  font-weight:800;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--color-muted);
  line-height:1.3;
}
.steckbrief__liste dd{
  margin:0;
  font-family:var(--font-display);
  font-size:1.15rem;
  line-height:1.2;
  color:var(--color-heading);
}
.steckbrief__extras{
  list-style:none; margin:0 0 var(--space-4); padding:0;
  display:flex; flex-wrap:wrap; gap:6px;
}
.steckbrief__extras li{
  margin:0;
  font-size:12px; font-weight:700;
  background:var(--color-white); color:var(--color-forest);
  border-radius:var(--radius-pill);
  padding:4px 11px;
}
.steckbrief__park{ font-size:var(--fs-small); line-height:1.5; margin:0 0 var(--space-4); }
.steckbrief__aktionen{
  display:flex; flex-wrap:wrap; gap:var(--space-3);
  margin:0;
}
.aehnlich h2{ text-align:center; margin-bottom:var(--space-7); }

/* Warnhinweis unter Wanderbeiträgen */
.warnhinweis{
  margin:var(--space-7) 0 0;
  padding:var(--space-5);
  background:var(--color-primary-soft);
  border-left:5px solid var(--color-primary);
  border-radius:3px;
  font-size:var(--fs-small);
  line-height:1.6;
  color:var(--color-heading);
}

/* Trefferkarte im Kompass */
.kompass__karte{
  background:var(--color-white);
  border:1px solid var(--color-line);
  border-radius:3px;
  padding:var(--space-4);
  box-shadow:var(--shadow-sm);
  margin-bottom:var(--space-7);
  overflow-x:auto;
}
.trefferkarte{ width:100%; min-width:380px; max-width:620px; height:auto; display:block; margin-inline:auto; }
.kartenpin{ cursor:pointer; }
.kartenpin path{ transition:transform var(--dur) var(--ease); transform-box:fill-box; transform-origin:50% 100%; }
@media (hover:hover) and (pointer:fine){ .kartenpin:hover path{ transform:scale(1.15); } }
.kartenpin__nr{
  font-family:var(--font-sans); font-size:11px; font-weight:800;
  fill:var(--color-forest);
}
.card__nr{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; margin-bottom:var(--space-3);
  border-radius:var(--radius-pill);
  background:var(--color-primary); color:var(--color-white);
  font-family:var(--font-display); font-size:14px;
}
.kompass__werkzeuge{ display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:center; }
.kompass__sortierung{
  display:flex; align-items:center; gap:8px;
  font-size:var(--fs-small); font-weight:700; color:var(--color-heading);
}
.kompass__sortierung select{
  font:inherit; font-size:var(--fs-small);
  padding:9px 12px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-sm);
  background:var(--color-white);
}

@media (max-width:768px){
  .steckbrief__liste{ gap:var(--space-3) var(--space-5); }
  .steckbrief__aktionen .btn{ width:100%; }
  .kompass__werkzeuge{ flex-direction:column; align-items:stretch; }
  .kompass__sortierung{ justify-content:space-between; }
  /* unter 16px zoomt das iPhone beim Antippen in die Seite */
  .kompass__sortierung select{ font-size:16px; }
}

/* Nur den Steckbrief drucken */
@media print{
  body.nur-steckbrief > *{ display:none !important; }
  body.nur-steckbrief main{ display:block !important; }
  body.nur-steckbrief main > *{ display:none !important; }
  body.nur-steckbrief main section:has(.steckbrief){ display:block !important; }
  body.nur-steckbrief main section:has(.steckbrief) > *{ display:block !important; }
  body.nur-steckbrief .article > *{ display:none !important; }
  body.nur-steckbrief .steckbrief{
    display:block !important;
    background:#fff; border:1px solid #333;
    padding:16px; margin:0;
  }
  body.nur-steckbrief .steckbrief__drucktitel{
    display:block; font-size:18px; font-weight:800; margin:0 0 12px;
  }
  body.nur-steckbrief .steckbrief__aktionen{ display:none !important; }
}


/* Filter-Anordnung: Ort über volle Breite, dann drei Regler, dann drei Häkchen-Gruppen */
.kompass__gruppe{ display:flex; flex-direction:column; }
.kompass__gruppe > .haken:last-child{ margin-bottom:0; }
.kompass__ortraster{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:var(--space-5) var(--space-6);
  align-items:start;
}
.kompass__ortraster > div{ min-width:0; }
.kompass__gruppe--breit legend{ border-bottom:0; }
.kompass__raster > .kompass__gruppe{ align-self:stretch; }
@media (max-width:768px){
  .kompass__ortraster{ grid-template-columns:1fr; gap:var(--space-4); }
}

/* Bildergalerie im Blogartikel */
.bildergalerie{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--space-4);
  margin:var(--space-6) 0;
}
.bildergalerie img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  background:var(--color-white);
  border:9px solid var(--color-white);
  border-bottom-width:26px;
  border-radius:2px;
  box-shadow:var(--shadow-sm);
}
@media (max-width:768px){
  .bildergalerie{ grid-template-columns:1fr 1fr; gap:var(--space-3); }
  .bildergalerie img{ border-width:7px; border-bottom-width:18px; }
}

/* ---------- Blogartikel: Bilder groß, Text daneben ---------- */
.article{ max-width:1060px; }
.article > p,
.article > h2,
.article > h3,
.article > ul,
.article > ol,
.article > .factbox,
.article > .steckbrief,
.article > .warnhinweis,
.article > .placeholder{ max-width:68ch; }
.article::after{ content:""; display:block; clear:both; }

.article__figure{
  float:right;
  width:min(46%, 460px);
  margin:var(--space-2) 0 var(--space-6) var(--space-7);
}
.article__figure:nth-of-type(even){
  float:left;
  margin:var(--space-2) var(--space-7) var(--space-6) 0;
}
.article__figure img{
  width:100%;
  max-height:none;
  margin-inline:0;
}
.article h2{ clear:both; }
.bildergalerie{ clear:both; }

@media (max-width:900px){
  .article__figure,
  .article__figure:nth-of-type(even){
    float:none;
    width:100%;
    margin:var(--space-6) 0;
  }
  .article__figure img{ margin-inline:auto; }
}

/* Video im Blogartikel – wie ein Polaroid gerahmt */
.article__figure--video video{
  width:100%;
  height:auto;
  display:block;
  background:var(--color-black);
  border:13px solid var(--color-white);
  border-bottom-width:50px;
  border-radius:2px;
  box-shadow:var(--shadow-lg);
}
.article__figure--video figcaption{
  font-size:var(--fs-small);
  color:var(--color-muted);
  margin-top:var(--space-2);
}
@media (max-width:768px){
  .article__figure--video video{ border-width:9px; border-bottom-width:34px; }
}

/* Hochformate im Artikel begrenzen, damit neben kurzen Absätzen keine Lücke entsteht */
.article__figure{
  width:fit-content;
  max-width:min(46%, 460px);
}
.article__figure img,
.article__figure--video video{
  width:auto;
  max-width:100%;
  max-height:min(56vh, 520px);
}
@media (max-width:900px){
  .article__figure,
  .article__figure:nth-of-type(even){ width:auto; max-width:100%; }
  .article__figure img,
  .article__figure--video video{ max-height:none; width:100%; }
}

/* =====================================================================
   Blogartikel: festes Raster statt umfließender Bilder
   Text und Bild stehen nebeneinander, abwechselnd links und rechts.
   (ersetzt die früheren float-Regeln)
   ===================================================================== */
.article__figure{
  float:none;
  width:auto;
  max-width:none;
  margin:0;
}
.article__figure:nth-of-type(even){ float:none; margin:0; }

.abschnitt{
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr);
  gap:var(--space-6) var(--space-8);
  align-items:start;
  margin-block:var(--space-8);
}
.abschnitt__text > :first-child{ margin-top:0; }
.abschnitt__text > :last-child{ margin-bottom:0; }
.abschnitt__text h2{ margin-top:0; }
.abschnitt--links .abschnitt__text{ order:2; }
.abschnitt__bilder{ display:flex; flex-direction:column; gap:var(--space-5); }
.abschnitt__bilder .article__figure img,
.abschnitt__bilder .article__figure video{
  width:100%;
  max-height:none;
  margin:0;
}
/* Text mittig neben dem Bild statt oben, wenn die Bildspalte höher ist */
.abschnitt--mittig{ align-items:center; }
/* Zwei Hochformate nebeneinander statt untereinander – hält die Bildspalte so hoch wie den Text */
.abschnitt__bilder--paar{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); align-items:start; }

/* Bilder, die allein über die volle Breite stehen (Einstieg, Galerie-Abschnitte) */
.article__figure--breit{
  margin:var(--space-7) auto;
  max-width:760px;
}
.article__figure--breit img{
  width:100%;
  max-height:none;
  margin-inline:auto;
}

@media (max-width:900px){
  .abschnitt{ grid-template-columns:1fr; gap:var(--space-5); margin-block:var(--space-7); }
  .abschnitt--links .abschnitt__text{ order:0; }
  .article__figure--breit{ margin-block:var(--space-6); }
}

/* ---------- Kontaktformular (Tally-Einbettung) ---------- */
.formular{
  max-width:560px;
  margin-inline:auto;
  background:var(--color-surface);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  padding:var(--space-4);
}
.formular iframe{
  display:block;
  width:100%;
  min-height:480px;
  border:0;
}
.formular__fallback{
  max-width:560px;
  margin:var(--space-5) auto 0;
  text-align:center;
  font-size:var(--fs-small);
  color:var(--color-muted);
}
@media (max-width:600px){
  .formular{
    padding:var(--space-3);
    border-radius:var(--radius-md);
  }
}

/* ---------- Rechtstexte (Impressum, Datenschutz) ---------- */
.rechtstext{
  max-width:74ch;
  margin-inline:auto;
}
.rechtstext h2{
  margin-top:var(--space-8);
  padding-top:var(--space-5);
  border-top:2px solid var(--color-forest);
}
.rechtstext h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.rechtstext h3{
  margin-top:var(--space-6);
  font-size:1.15rem;
}
.rechtstext p{ font-size:var(--fs-body); }
.rechtstext a{ word-break:break-word; }
.footer__recht{ display:flex; gap:var(--space-5); }

/* =====================================================================
   Bewegung (23.09.2026) – nur transform und opacity, eigene Kurven
   ===================================================================== */

/* 1) Seitenwechsel: weiche Überblendung statt weißem Blitz.
      Der Header bleibt stehen, nur der Inhalt blendet über.
      Browser ohne Unterstützung wechseln einfach wie bisher. */
@view-transition{ navigation:auto; }
.site-header{ view-transition-name:kopf; }
::view-transition-old(kopf), ::view-transition-new(kopf){ animation:none; }
::view-transition-old(root){ animation:160ms var(--ease-out) both seiteAus; }
::view-transition-new(root){ animation:220ms var(--ease-out) both seiteEin; }
@keyframes seiteAus{ to{ opacity:0; } }
@keyframes seiteEin{ from{ opacity:0; } }

/* 4) Leere Kategorie: die Pfote schnuppert einmal */
.leerfund__pfote{ display:inline-block; transform-origin:50% 80%; }
.js-anim .leerfund.ist-sichtbar .leerfund__pfote{ animation:schnuppern 900ms var(--ease-in-out) 300ms 1 both; }
@keyframes schnuppern{
  0%{ transform:none; }
  25%{ transform:translateY(-2px) rotate(-8deg); }
  55%{ transform:rotate(6deg); }
  80%{ transform:rotate(-2deg); }
  100%{ transform:none; }
}

/* 5) Kompass-Trefferkarte klappt sanft auf (zu geht sofort) */
.kompass__karte{ transition:opacity 220ms var(--ease-out), transform 220ms var(--ease-out); }
@starting-style{
  .kompass__karte:not([hidden]){ opacity:0; transform:translateY(-6px); }
}

/* 6) Ortsvorschläge wachsen aus dem Eingabefeld (zu geht sofort) */
.kompass__vorschlaege{
  transform-origin:top center;
  transition:opacity 150ms var(--ease-out), transform 150ms var(--ease-out);
}
@starting-style{
  .kompass__vorschlaege:not([hidden]){ opacity:0; transform:scale(0.97); }
}

/* =====================================================================
   MUTIGER (23.09.2026) – gleicher Look, mehr Überzeugung:
   Foto ohne Schleier, große Schrift, Polaroid-Wand, kräftiges Grün
   ===================================================================== */

::selection{ background:var(--color-primary-soft); color:var(--color-heading); }

/* Gezeichnete Pfote statt Emoji – färbt sich mit currentColor */
.pfote{
  display:inline-block; width:1em; height:1em; vertical-align:-0.1em;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='16.4' rx='5.3' ry='4.5'/%3E%3Cellipse cx='5.1' cy='10.6' rx='2.1' ry='2.7' transform='rotate(-22 5.1 10.6)'/%3E%3Cellipse cx='9.2' cy='6.1' rx='2.2' ry='2.9' transform='rotate(-7 9.2 6.1)'/%3E%3Cellipse cx='14.8' cy='6.1' rx='2.2' ry='2.9' transform='rotate(7 14.8 6.1)'/%3E%3Cellipse cx='18.9' cy='10.6' rx='2.1' ry='2.7' transform='rotate(22 18.9 10.6)'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='16.4' rx='5.3' ry='4.5'/%3E%3Cellipse cx='5.1' cy='10.6' rx='2.1' ry='2.7' transform='rotate(-22 5.1 10.6)'/%3E%3Cellipse cx='9.2' cy='6.1' rx='2.2' ry='2.9' transform='rotate(-7 9.2 6.1)'/%3E%3Cellipse cx='14.8' cy='6.1' rx='2.2' ry='2.9' transform='rotate(7 14.8 6.1)'/%3E%3Cellipse cx='18.9' cy='10.6' rx='2.1' ry='2.7' transform='rotate(22 18.9 10.6)'/%3E%3C/svg%3E") center/contain no-repeat;
}
.leerfund__pfote.pfote{ color:var(--color-forest); width:44px; height:44px; }

/* ---------- Startseite: Foto ohne Schleier, Titel groß in Weiß ---------- */
.hero--home{
  display:grid;
  min-height:min(calc(100svh - var(--header-h)), 940px);
  background:var(--color-forest);
}
.hero--home > .hero__bg{ position:absolute; inset:0; grid-area:auto; }
.hero--home > .hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 36%; }
.hero--home > .hero__bg::after,
.hero--home .hero__bg::after{
  display:block;
  background:
    linear-gradient(0deg, rgba(10, 28, 17, 0.88) 0%, rgba(10, 28, 17, 0.5) 30%, rgba(10, 28, 17, 0) 60%),
    linear-gradient(90deg, rgba(10, 28, 17, 0.45) 0%, rgba(10, 28, 17, 0) 55%);
}
.hero--home > .hero__inner{
  grid-area:1 / 1; align-self:end;
  padding-block:var(--space-10) calc(var(--space-7) + clamp(56px, 8vw, 130px));
}
.hero--home > .hero__curve{ grid-area:1 / 1; align-self:end; margin-top:0; }
.hero--home h1{
  color:var(--color-white);
  font-size:clamp(3rem, 8.4vw, 6rem);
  line-height:0.92;
  text-shadow:0 2px 24px rgba(10, 28, 17, 0.35);
}
.hero--home .lead{
  color:var(--color-on-dark);
  font-size:clamp(1.125rem, 1.6vw, 1.375rem);
  max-width:30em;
}
.hero--home .pawtrail{ color:var(--color-on-dark); }
.pawtrail .pfote{ width:20px; height:20px; }
/* langsamer Kamera-Zoom – das Foto füllt jetzt die Fläche, da schneidet nichts ab */
.js-anim .hero--home .hero__bg img{ animation:heroZoom 22s var(--ease) forwards; }
/* Trennstelle im Titel: nur am Handy sichtbar (siehe anim.js) */
.hero--home h1 .trenn, .hero--home h1 .trenn-br{ display:none; }

/* ---------- Großes Versprechen ---------- */
.versprechen__raster{
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr);
  gap:var(--space-6) var(--space-8);
  align-items:end;
}
.versprechen__titel{
  font-size:clamp(2.75rem, 6.2vw, 6rem);
  line-height:0.95;
  margin:0;
  text-wrap:balance;
}
.versprechen__titel em.accent{ display:block; font-size:1.05em; margin-top:0.1em; }
.versprechen__text{ font-size:var(--fs-lead); line-height:1.6; margin:0; max-width:38ch; }

/* ---------- Polaroid-Wand ---------- */
.fotowand{ overflow:hidden; }
.fotowand__kopf{
  display:flex; flex-wrap:wrap; gap:var(--space-4) var(--space-6);
  justify-content:space-between; align-items:flex-end;
  margin-bottom:var(--space-7);
}
.fotowand__kopf h2{ font-size:clamp(2.25rem, 5vw, 4rem); line-height:1; margin:0; }
.fotowand__alle{
  display:inline-flex; align-items:center; gap:8px; min-height:44px;
  font-weight:700; color:var(--color-forest); text-decoration:none;
}
.fotowand__alle span{ transition:transform var(--dur) var(--ease-out); }
@media (hover:hover) and (pointer:fine){
  .fotowand__alle:hover{ color:var(--color-forest); text-decoration:underline; text-underline-offset:4px; }
  .fotowand__alle:hover span{ transform:translateX(5px); }
}
.fotowand__liste{
  list-style:none; margin:0 auto; padding:var(--space-4) var(--gutter) var(--space-7);
  max-width:1360px;
  display:grid; grid-template-columns:repeat(6, minmax(0, 1fr));
  align-items:start;
}
.polaroid{ position:relative; margin:0; }
.polaroid + .polaroid{ margin-left:-26px; }
.polaroid a{
  display:block;
  background:var(--color-white);
  padding:12px 12px 0;
  border-radius:2px;
  box-shadow:var(--shadow-lg);
  color:var(--color-heading);
  text-decoration:none;
  transform:translateY(var(--y)) rotate(var(--r));
  transition:transform 400ms var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.polaroid img{ width:100%; aspect-ratio:4 / 5; object-fit:cover; display:block; background:var(--color-surface-sand); }
.polaroid__notiz{
  display:block;
  font-family:var(--font-accent);
  font-size:clamp(1.3rem, 1.7vw, 1.7rem);
  line-height:1.05;
  text-align:center;
  padding:14px 4px 18px;
}
.polaroid--1{ --r:-5deg;  --y:22px; }
.polaroid--2{ --r:3.5deg; --y:-8px; }
.polaroid--3{ --r:-2deg;  --y:34px; }
.polaroid--4{ --r:4deg;   --y:2px; }
.polaroid--5{ --r:-3.5deg;--y:26px; }
.polaroid--6{ --r:2.5deg; --y:-4px; }
@media (hover:hover) and (pointer:fine){
  .polaroid:hover{ z-index:5; }
  .polaroid a:hover{
    transform:translateY(calc(var(--y) - 12px)) rotate(0deg) scale(1.05);
    box-shadow:var(--shadow-xl), var(--shadow-lg);
    color:var(--color-heading);
  }
}
.polaroid a:focus-visible{ outline-offset:6px; }
.polaroid a:active{ transform:translateY(var(--y)) rotate(var(--r)) scale(0.98); transition-duration:100ms; }

/* Auftritt: die Fotos fallen einmal auf den Tisch */
.js-anim .fotowand--anim .polaroid a{
  opacity:0;
  transform:translateY(calc(var(--y) - 48px)) rotate(calc(var(--r) * -2.2)) scale(1.06);
  transition:opacity 500ms var(--ease-out), transform 750ms var(--ease-out);
}
.js-anim .fotowand--anim.ist-sichtbar .polaroid a{ opacity:1; transform:translateY(var(--y)) rotate(var(--r)); }
.js-anim .fotowand--anim.ist-sichtbar .polaroid--2 a{ transition-delay:70ms; }
.js-anim .fotowand--anim.ist-sichtbar .polaroid--3 a{ transition-delay:140ms; }
.js-anim .fotowand--anim.ist-sichtbar .polaroid--4 a{ transition-delay:210ms; }
.js-anim .fotowand--anim.ist-sichtbar .polaroid--5 a{ transition-delay:280ms; }
.js-anim .fotowand--anim.ist-sichtbar .polaroid--6 a{ transition-delay:350ms; }

/* Tablet und Handy: Fotos zum Durchwischen, wie eine Story */
@media (max-width:1024px){
  .fotowand__liste{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    padding:var(--space-5) var(--gutter) var(--space-7);
    scroll-padding-inline:var(--gutter);
  }
  .fotowand__liste::-webkit-scrollbar{ display:none; }
  .polaroid{ flex:0 0 min(68vw, 320px); scroll-snap-align:center; }
  .polaroid + .polaroid{ margin-left:-14px; }
  .polaroid--1{ --y:10px; } .polaroid--2{ --y:-2px; } .polaroid--3{ --y:14px; }
  .polaroid--4{ --y:0px; }  .polaroid--5{ --y:12px; } .polaroid--6{ --y:-2px; }
}

/* ---------- Größere Fotos in den Bild-Text-Abschnitten ---------- */
.media--gross{ grid-template-columns:minmax(0, 1.2fr) minmax(0, 0.8fr); }
.media--gross.media--flip{ grid-template-columns:minmax(0, 0.8fr) minmax(0, 1.2fr); }
.media--gross .media__img{ max-height:clamp(340px, 62vh, 600px); }
.media--gross h2{ font-size:clamp(2.25rem, 4.2vw, 3.5rem); line-height:1.02; }

/* ---------- Die Waage: 3,3 kg gegen 33 kg ---------- */
.waage__titel{ font-size:clamp(2.25rem, 5vw, 4.25rem); line-height:1; max-width:15ch; }
.waage__vergleich{
  display:flex; flex-wrap:wrap; align-items:flex-end;
  gap:var(--space-4) clamp(16px, 4vw, 56px);
  margin:var(--space-7) 0 var(--space-6);
}
.waage__zahl{
  display:block;
  font-family:var(--font-display);
  line-height:0.85;
  color:var(--color-on-dark);
  font-size:clamp(2.75rem, 5.5vw, 4rem);
}
.waage__hund--gross .waage__zahl{ font-size:clamp(5rem, 14vw, 9rem); color:var(--color-primary-light); }
.waage__zahl small{ font-size:0.36em; letter-spacing:0.02em; }
.waage__name{ display:block; margin-top:12px; font-size:var(--fs-small); font-weight:600; color:var(--color-on-dark-muted); }
.waage__mal{
  align-self:center;
  font-family:var(--font-accent);
  font-size:clamp(2rem, 4vw, 3rem);
  color:var(--color-on-dark);
  line-height:1;
}
.waage__text{ max-width:62ch; margin:0; }
/* Auftritt: Sarabis Zahl wächst auf zehnfache Größe */
.js-anim .waage--anim .waage__hund--gross .waage__zahl{
  transform:scale(0.18); transform-origin:0 100%; opacity:0;
  transition:transform 1000ms var(--ease-out) 250ms, opacity 300ms var(--ease-out) 250ms;
}
.js-anim .waage--anim.ist-sichtbar .waage__hund--gross .waage__zahl{ transform:none; opacity:1; }
.js-anim .waage--anim .waage__mal{ opacity:0; transition:opacity 400ms var(--ease-out) 900ms; }
.js-anim .waage--anim.ist-sichtbar .waage__mal{ opacity:1; }

/* ---------- Finale in Waldgrün, mit Bergkante nach oben ---------- */
.finale{
  position:relative;
  margin-top:clamp(56px, 8vw, 130px);
  background:linear-gradient(180deg, var(--color-forest) 0%, var(--color-petrol-700) 55%, var(--color-forest-light) 100%);
  text-align:center;
  padding-block:var(--space-8) var(--space-10);
}
.finale__inner{ max-width:900px; }
.finale__titel{ font-size:clamp(2.5rem, 6vw, 5rem); line-height:0.98; margin-inline:auto; max-width:16ch; text-wrap:balance; }
.finale p{ color:var(--color-on-dark); max-width:52ch; margin-inline:auto; }
.finale__knopf{ margin-top:var(--space-6); }

/* ---------- Handy ---------- */
@media (max-width:768px){
  .hero--home{ display:grid; min-height:calc(86svh - var(--header-h)); }
  .hero--home > .hero__bg{ position:absolute; }
  .hero--home > .hero__bg img{ object-position:48% 30%; }
  .hero--home > .hero__inner{ padding-block:var(--space-9) calc(var(--space-5) + clamp(56px, 8vw, 130px)); }
  /* zwei Zeilen statt winziger Schrift: „Doublepaws- / adventures" */
  .hero--home h1{ font-size:clamp(2.6rem, 14.5vw, 4.25rem); }
  .hero--home h1 .trenn{ display:inline-block; }
  .hero--home h1 .trenn-br{ display:inline; }
  .versprechen__raster{ grid-template-columns:1fr; }
  .media--gross, .media--gross.media--flip{ grid-template-columns:1fr; }
  .waage__vergleich{ gap:var(--space-3) var(--space-5); }
  .finale{ padding-block:var(--space-7) var(--space-9); }
}

/* Titel am Computer immer in einer Zeile – das Wort ist lang und darf nicht mittendrin brechen */
@media (min-width:769px){
  .hero--home .hero__content{ max-width:none; }
  .hero--home h1{ white-space:nowrap; }
  .hero--home .lead, .hero--home .btn-row{ max-width:720px; }
}

/* Waage: Text links, Nala-Polaroid rechts */
.waage__raster{
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap:var(--space-7) var(--space-8);
  align-items:center;
}
.waage__foto{ transform:rotate(2deg); }
@media (max-width:768px){
  .waage__raster{ grid-template-columns:1fr; }
}

/* =====================================================================
   Titelbild Wald (23.09.2026): Miri, Sarabi und Nala sitzen rechts,
   links ist der freie Waldweg – dort steht der Titel.
   ===================================================================== */
.hero--home > .hero__bg img{ object-position:60% 45%; }
.hero--home > .hero__bg::after,
.hero--home .hero__bg::after{
  background:
    linear-gradient(90deg, rgba(10, 28, 17, 0.82) 0%, rgba(10, 28, 17, 0.5) 32%, rgba(10, 28, 17, 0) 58%),
    linear-gradient(0deg, rgba(10, 28, 17, 0.55) 0%, rgba(10, 28, 17, 0) 38%);
}
/* Titel zweizeilig „Doublepaws- / adventures“ – passt in die linke, freie Bildhälfte */
.hero--home h1 .trenn{ display:inline-block; }
.hero--home h1 .trenn-br{ display:inline; }
@media (min-width:769px){
  .hero--home > .hero__inner{ align-self:center; padding-block:var(--space-9) calc(var(--space-8) + clamp(56px, 8vw, 130px)); }
  .hero--home .hero__content{ max-width:min(46%, 600px); }
  .hero--home h1{ white-space:normal; font-size:clamp(3.25rem, 7vw, 6rem); }
  .hero--home .lead, .hero--home .btn-row{ max-width:none; }
}

/* Handy: Foto oben ganz sichtbar, Text darunter auf Waldgrün */
@media (max-width:768px){
  .hero--home{ display:block; min-height:0; }
  .hero--home > .hero__bg{ position:relative; height:min(58svh, 460px); }
  .hero--home > .hero__bg img{ object-position:61% 40%; }
  .hero--home > .hero__bg::after,
  .hero--home .hero__bg::after{
    background:linear-gradient(0deg, var(--color-forest) 0%, rgba(24, 68, 42, 0) 42%);
  }
  .hero--home > .hero__inner{
    position:relative; z-index:3;
    margin-top:calc(-1 * var(--space-8));
    padding-block:0 calc(var(--space-6) + clamp(56px, 8vw, 130px));
  }
  .hero--home > .hero__curve{ margin-top:calc(-1 * clamp(56px, 8vw, 130px)); }
}
@media (min-width:769px){
  .hero--home > .hero__bg img{ object-position:72% 45%; }
  .hero--home .hero__content{ max-width:min(40%, 540px); }
  .hero--home h1{ font-size:clamp(3rem, 6.4vw, 6rem); }
}
@media (max-width:768px){
  /* der langsame Zoom darf nicht über den Fotorahmen hinaus in den grünen Bereich ragen */
  .hero--home > .hero__bg{ overflow:hidden; }
}

/* =====================================================================
   Polaroid-Laufband (23.09.2026): zieht langsam und endlos von links
   nach rechts. anim.js verdoppelt die Fotos, damit die Schleife nahtlos ist.
   Ohne JS oder bei „Bewegung reduzieren“ bleibt die normale Fotowand.
   ===================================================================== */
.fotowand__aktionen{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2) var(--space-5); }
.fotowand__pause{
  display:inline-flex; align-items:center; gap:8px; min-height:44px;
  padding:0 16px;
  font:inherit; font-size:15px; font-weight:700;
  color:var(--color-forest);
  background:transparent;
  border:1.5px solid var(--color-line-strong);
  border-radius:var(--radius-pill);
  cursor:pointer;
  transition:background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.fotowand__pause::before{
  content:""; width:10px; height:12px;
  border-left:3px solid currentColor; border-right:3px solid currentColor;
}
.fotowand__pause[aria-pressed="true"]::before{
  width:0; height:0; border-right:0;
  border-left:11px solid currentColor;
  border-top:7px solid transparent; border-bottom:7px solid transparent;
}
@media (hover:hover) and (pointer:fine){
  .fotowand__pause:hover{ background:var(--color-forest-soft); border-color:var(--color-forest); }
}
.fotowand__pause:active{ transform:scale(0.97); }

.fotowand--laufband .fotowand__bahn{
  overflow:hidden;
  /* Fotos tauchen weich am Rand auf und verschwinden weich */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.fotowand--laufband .fotowand__liste{
  display:flex;
  width:max-content;
  max-width:none;
  margin:0;
  overflow:visible;
  scroll-snap-type:none;
  padding:var(--space-5) 0 var(--space-7);
  animation:laufband var(--laufzeit, 60s) linear infinite;
}
/* jedes Foto bekommt denselben Abstand, sonst ruckelt die Nahtstelle */
.fotowand--laufband .polaroid,
.fotowand--laufband .polaroid + .polaroid{
  flex:0 0 clamp(210px, 21vw, 290px);
  margin:0 -14px 0 0;
  scroll-snap-align:none;
}
@keyframes laufband{
  from{ transform:translateX(-50%); }
  to{ transform:translateX(0); }
}
/* Anhalten: Maus drüber, Tastatur-Fokus drin, Pause-Knopf, oder außer Sicht */
@media (hover:hover) and (pointer:fine){
  .fotowand--laufband .fotowand__bahn:hover .fotowand__liste{ animation-play-state:paused; }
}
.fotowand--laufband .fotowand__bahn:focus-within .fotowand__liste,
.fotowand--laufband.ist-pausiert .fotowand__liste,
.fotowand--laufband.ausser-sicht .fotowand__liste{ animation-play-state:paused; }
@media (max-width:768px){
  .fotowand--laufband .polaroid,
  .fotowand--laufband .polaroid + .polaroid{ flex-basis:min(62vw, 250px); margin-right:-10px; }
}

/* =====================================================================
   UNTERSEITEN MUTIGER (23.09.2026): Titel links, großes Polaroid rechts
   ===================================================================== */
/* Lesetexte behalten die ruhigere Überschriftengröße */
.article h2{ font-size:clamp(1.875rem, 3.5vw, 2.75rem); }
.rechtstext h2{ font-size:clamp(1.5rem, 2.6vw, 2rem); }

.hero__foto{
  margin:0;
  justify-self:center;
  width:100%;
  max-width:480px;
  background:var(--color-white);
  padding:14px 14px 56px;
  border-radius:2px;
  box-shadow:var(--shadow-xl), var(--shadow-lg);
  transform:rotate(2.5deg);
}
.hero__foto img{
  width:100%; height:auto;
  max-height:min(58vh, 540px);
  object-fit:cover;
}
.hero--foto h1{ font-size:clamp(2.5rem, 4.8vw, 4.5rem); line-height:0.98; text-wrap:balance; }
@media (min-width:769px){
  .hero--foto .hero__inner{
    display:grid;
    grid-template-columns:minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap:var(--space-6) var(--space-8);
    align-items:center;
  }
  .hero--foto .hero__content{ max-width:none; }
}
@media (max-width:768px){
  .hero__foto{ max-width:min(86%, 400px); margin:var(--space-6) auto 0; transform:rotate(2deg); padding:10px 10px 40px; }
  .hero__foto img{ max-height:52vh; }
}
/* Auftritt: das Polaroid wird einmal auf den Tisch gelegt */
.js-anim .hero--foto .hero__foto{ animation:polaroidRein 800ms var(--ease-out) 250ms both; }
@keyframes polaroidRein{
  from{ opacity:0; transform:translateY(-28px) rotate(-5deg) scale(1.04); }
  to{ opacity:1; transform:rotate(2.5deg); }
}
@media (max-width:768px){
  @keyframes polaroidRein{
    from{ opacity:0; transform:translateY(-20px) rotate(-4deg) scale(1.03); }
    to{ opacity:1; transform:rotate(2deg); }
  }
}

/* Gezeichnete Themen-Icons statt Emojis */
.card__icon svg{ width:28px; height:28px; color:var(--color-forest); }
.card--cat .card__icon{ font-size:0; }

/* Finale auch innerhalb eines .wrap mittig */
.finale__inner{ margin-inline:auto; }

/* Finale: die Bergkante ragt in den Abschnitt davor (weiß oder Sonnenaufgang) –
   so entsteht keine weiße Lücke. Der Abschnitt davor bekommt dafür unten mehr Luft. */
.finale{ margin-top:0; }
.section:has(+ .finale){ padding-bottom:calc(var(--space-9) + clamp(56px, 8vw, 130px)); }
@media (max-width:768px){
  .section:has(+ .finale){ padding-bottom:calc(var(--space-8) + clamp(56px, 8vw, 130px)); }
}

/* =====================================================================
   MEINE SCHÄTZE + BLOG (23.09.2026): Packliste zum Abhaken, Gutscheine,
   „Frisch aus dem Rucksack“ und der Schnüffel-Kompass als Werkzeug
   ===================================================================== */

/* ---------- Packliste: ein echter Zettel mit Klebeband ---------- */
.packliste__raster{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:var(--space-8);
  align-items:center;
}
.zettel{
  position:relative;
  justify-self:center;
  width:100%;
  max-width:460px;
  padding:var(--space-7) var(--space-6) var(--space-6);
  background:
    repeating-linear-gradient(180deg, transparent 0 35px, rgba(24, 68, 42, 0.07) 35px 36px),
    var(--color-surface-sand);
  border-radius:3px;
  box-shadow:var(--shadow-xl), var(--shadow-lg);
  transform:rotate(-2deg);
}
/* Klebestreifen oben */
.zettel::before{
  content:"";
  position:absolute; top:-14px; left:50%;
  width:120px; height:30px;
  transform:translateX(-50%) rotate(3deg);
  background:rgba(255, 228, 184, 0.85);
  box-shadow:0 1px 3px rgba(14, 58, 60, 0.12);
}
.zettel__kopf{
  margin:0 0 var(--space-2);
  font-family:var(--font-display);
  font-size:clamp(2rem, 3.4vw, 2.6rem);
  line-height:0.95;
  color:var(--color-heading);
  text-align:center;
}
.zettel__kopf span{
  display:block;
  font-family:var(--font-accent);
  font-size:1.35em;
  color:var(--color-primary-hover);
}
.zettel__hinweis{ text-align:center; font-size:var(--fs-small); color:var(--color-muted); margin:0 0 var(--space-4); }
.zettel__liste{ list-style:none; margin:0; padding:0; }
.zettel__liste li{ margin:0; }
.zettel__liste label{
  position:relative;
  display:flex; align-items:center; gap:14px;
  min-height:44px;
  font-size:1.0625rem; line-height:1.3;
  cursor:pointer;
  -webkit-user-select:none; user-select:none;
  transition:color var(--dur) var(--ease-out);
}
.zettel__liste input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; }
.zettel__kasten{
  position:relative;
  flex:0 0 24px; width:24px; height:24px;
  border:2px solid rgba(24, 68, 42, 0.45);
  border-radius:6px;
  background:var(--color-white);
}
/* der Haken: wie mit Stift gesetzt, springt kurz über das Kästchen hinaus */
.zettel__kasten::after{
  content:"";
  position:absolute; left:6px; top:-3px;
  width:9px; height:17px;
  border-right:3.5px solid var(--color-primary);
  border-bottom:3.5px solid var(--color-primary);
  border-radius:0 0 2px 0;
  transform:rotate(40deg) scale(0);
  transform-origin:60% 80%;
  transition:transform 260ms var(--ease-out);
}
.zettel__liste input:checked + .zettel__kasten::after{ transform:rotate(40deg) scale(1); }
.zettel__liste label:has(input:checked){
  color:var(--color-muted);
  text-decoration:line-through;
  text-decoration-color:var(--color-primary);
  text-decoration-thickness:2px;
}
.zettel__liste label:has(input:focus-visible) .zettel__kasten{ outline:2px solid var(--color-primary); outline-offset:3px; }
.zettel__liste label:active .zettel__kasten{ transform:scale(0.92); }
.zettel__fuss{
  margin:var(--space-5) 0 0;
  text-align:center;
  font-family:var(--font-accent);
  font-size:clamp(1.3rem, 2vw, 1.6rem);
  line-height:1.1;
  color:var(--color-primary-hover);
}

/* ---------- Rätsel-Rundgang + Amazon ---------- */
.schatz-paar{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:var(--space-6);
  align-items:stretch;
}
.schatz{
  position:relative;
  display:flex; flex-direction:column;
  padding:var(--space-7) var(--space-6) var(--space-6);
  background:var(--color-white);
  border-radius:3px;
  box-shadow:var(--shadow-lg);
}
.schatz h3{ font-size:clamp(1.75rem, 2.8vw, 2.4rem); line-height:1.02; }
.schatz > :last-child{ margin-bottom:0; }
.schatz--bald{
  background:var(--gradient-forest);
  color:var(--color-on-dark);
}
.schatz--bald h3{ color:var(--color-white); max-width:12ch; }
.schatz__stempel{
  position:absolute; top:var(--space-5); right:var(--space-5);
  padding:4px 14px 6px;
  font-family:var(--font-accent);
  font-size:1.6rem; line-height:1;
  color:var(--color-primary-light);
  border:2px solid currentColor;
  border-radius:10px;
  transform:rotate(-9deg);
}

/* ---------- Partner: Rabattcode als Gutschein ---------- */
.gutschein{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:2px var(--space-3);
  margin:var(--space-2) 0 var(--space-5);
  padding:var(--space-3) var(--space-4) var(--space-3) var(--space-5);
  background:var(--color-primary-soft);
  border:2px dashed rgba(187, 90, 30, 0.45);
  border-radius:12px;
}
/* ausgestanzte Halbkreise links und rechts, wie bei einem Ticket */
.gutschein::before, .gutschein::after{
  content:"";
  position:absolute; top:50%;
  width:18px; height:18px;
  border-radius:50%;
  background:var(--color-surface);
  transform:translateY(-50%);
}
.gutschein::before{ left:-11px; }
.gutschein::after{ right:-11px; }
.gutschein__label{ grid-column:1; font-size:var(--fs-small); font-weight:600; color:var(--color-primary-deep); }
.gutschein__code{
  grid-column:1;
  font-family:var(--font-display);
  font-size:clamp(1.4rem, 2.2vw, 1.75rem);
  line-height:1.05;
  letter-spacing:0.02em;
  color:var(--color-heading);
  overflow-wrap:anywhere;
  -webkit-user-select:all; user-select:all;
}
.gutschein__knopf{
  grid-column:2; grid-row:1 / span 2;
  min-height:44px;
  padding:0 16px;
  font:inherit; font-size:14px; font-weight:700;
  color:var(--color-on-dark);
  background:var(--color-forest);
  border:0;
  border-radius:var(--radius-pill);
  cursor:pointer;
  transition:background var(--dur) var(--ease-out), transform 100ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .gutschein__knopf:hover{ background:var(--color-forest-hover); }
}
.gutschein__knopf:active{ transform:scale(0.96); }
.gutschein__knopf.ist-kopiert{ background:var(--color-success); }
.partner__karte h3{ margin-bottom:var(--space-2); }

/* ---------- Partner-Pop-up (assets/js/partner-popup.js) ---------- */
.partner-popup{
  position:fixed;
  right:var(--space-5);
  bottom:calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  z-index:900;
  width:min(360px, calc(100vw - 32px));
  padding:var(--space-5) var(--space-5) var(--space-4);
  background:var(--color-surface);
  border-top:5px solid var(--color-primary);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg), var(--shadow-xl);
  opacity:0;
  transform:translateY(24px);
  transition:opacity 320ms var(--ease-out), transform 420ms var(--ease-out);
}
.partner-popup.ist-da{ opacity:1; transform:none; }
.partner-popup.ist-weg{ opacity:0; transform:translateY(16px); transition-duration:200ms; }
.partner-popup__zu{
  position:absolute; top:6px; right:6px;
  display:grid; place-items:center;
  width:44px; height:44px;
  color:var(--color-muted);
  background:transparent;
  border:0; border-radius:50%;
  cursor:pointer;
  transition:background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .partner-popup__zu:hover{ background:var(--color-surface-sand); color:var(--color-heading); }
}
.partner-popup__titel{
  margin:0 40px var(--space-2) 0;
  font-family:var(--font-display);
  font-weight:400;
  font-size:1.625rem;
  line-height:1.1;
  color:var(--color-heading);
}
.partner-popup__text{ margin:0 0 var(--space-4); font-size:0.9375rem; line-height:1.5; color:var(--color-heading); }
.partner-popup__gutschein{ margin:0 0 var(--space-4); }
.partner-popup__link{ width:100%; }
.partner-popup__hinweis{ margin:var(--space-3) 0 0; font-size:0.75rem; color:var(--color-muted); text-align:center; }
@media (max-width:560px){
  .partner-popup{ right:16px; left:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); width:auto; }
}
@media (prefers-reduced-motion:reduce){
  .partner-popup, .partner-popup.ist-weg{ transform:none; transition:opacity 200ms linear; }
}
@media print{ .partner-popup{ display:none; } }

/* ---------- Blog: Frisch aus dem Rucksack ---------- */
.frisch__titel{ margin-bottom:var(--space-7); }
.frisch__raster{
  display:grid;
  grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr);
  gap:var(--space-7) var(--space-8);
  align-items:center;
}
.frisch__gross{
  display:grid;
  grid-template-columns:minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap:var(--space-6);
  align-items:center;
  color:inherit;
  text-decoration:none;
}
.frisch__foto{
  display:block;
  background:var(--color-white);
  padding:12px 12px 44px;
  border-radius:2px;
  box-shadow:var(--shadow-xl), var(--shadow-lg);
  transform:rotate(-2.5deg);
  transition:transform 400ms var(--ease-out);
}
.frisch__foto img{ width:100%; aspect-ratio:4 / 5; object-fit:cover; }
.frisch__text{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-3); }
.frisch__h{
  display:block;
  font-family:var(--font-display);
  font-size:1.3rem;
  line-height:1.08;
  color:var(--color-heading);
}
.frisch__gross .frisch__h{ font-size:clamp(1.9rem, 3.2vw, 2.75rem); line-height:1; }
.frisch__teaser{ display:block; line-height:1.6; }
.frisch__datum{ display:block; font-size:var(--fs-small); color:var(--color-muted); margin-top:4px; }
.frisch__liste{ display:flex; flex-direction:column; gap:var(--space-4); }
.frisch__klein{
  display:grid;
  grid-template-columns:96px minmax(0, 1fr);
  gap:var(--space-4);
  align-items:center;
  padding:var(--space-3);
  background:var(--color-white);
  border:1px solid var(--color-line);
  border-radius:3px;
  box-shadow:var(--shadow-sm);
  color:inherit;
  text-decoration:none;
  transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.frisch__klein img{
  width:96px; height:120px;
  object-fit:cover;
  border:5px solid var(--color-white);
  box-shadow:var(--shadow-sm);
  transform:rotate(-2deg);
}
.frisch__klein--gruen{
  grid-template-columns:1fr;
  gap:var(--space-3);
  padding:var(--space-5);
  background:var(--gradient-forest);
  border-color:transparent;
  color:var(--color-on-dark);
}
.frisch__klein--gruen .badge{ justify-self:start; }
.frisch__klein--gruen .frisch__h{ color:var(--color-white); font-size:1.55rem; }
.frisch__klein--gruen .frisch__datum{ color:var(--color-on-dark-muted); }
@media (hover:hover) and (pointer:fine){
  .frisch__gross:hover .frisch__foto{ transform:rotate(0deg) scale(1.02); }
  .frisch__gross:hover .frisch__h, .frisch__klein:hover .frisch__h{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; }
  .frisch__klein:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }
}
.frisch__klein:active, .frisch__gross:active .frisch__foto{ transform:scale(0.985); transition-duration:100ms; }

/* ---------- Schnüffel-Kompass: grünes Werkzeug statt Formular ---------- */
.kompass-bereich .section-head p{ color:var(--color-on-dark-muted); }
.kompass-bereich .kompass{
  color:var(--color-ink);
  background:var(--color-surface-sand);
  border:0;
  border-radius:var(--radius-md);
  box-shadow:0 30px 60px -24px rgba(0, 0, 0, 0.45);
}
/* weiße Karten, Leerfund und Karte auf Grün: dunkle Schrift behalten */
.kompass-bereich .card,
.kompass-bereich .leerfund,
.kompass-bereich .kompass__karte{ color:var(--color-ink); }
.kompass-bereich .card h3, .kompass-bereich .leerfund h3{ color:var(--color-heading); }
.kompass-bereich .kompass__karte .karte__bu{ color:var(--color-muted); }

/* Gruppentitel: ruhig und groß statt kleinem Großbuchstaben-Label */
.kompass__gruppe legend{
  font-family:var(--font-display);
  font-size:1.3rem;
  font-weight:400;
  letter-spacing:0.01em;
  text-transform:none;
  color:var(--color-heading);
}

/* Häkchen werden antippbare Schildchen */
.kompass__gruppe:has(.haken){ flex-direction:row; flex-wrap:wrap; align-content:flex-start; gap:var(--space-2); }
.kompass__extras{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.kompass .haken{
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px;
  margin:0;
  padding:8px 16px 8px 12px;
  font-size:15px; font-weight:600; line-height:1.2;
  color:var(--color-heading);
  background:var(--color-white);
  border:1.5px solid var(--color-line-strong);
  border-radius:var(--radius-pill);
  cursor:pointer;
  -webkit-user-select:none; user-select:none;
  transition:background 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out), transform 100ms var(--ease-out);
}
.kompass .haken input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; }
.kompass .haken::before{
  content:"";
  flex:0 0 16px; width:16px; height:16px;
  border-radius:50%;
  border:1.5px solid rgba(24, 68, 42, 0.4);
  transition:background 160ms var(--ease-out), border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.kompass .haken:has(input:checked){
  color:var(--color-on-dark);
  background:var(--color-forest);
  border-color:var(--color-forest);
}
.kompass .haken:has(input:checked)::before{
  background:var(--color-primary-light);
  border-color:var(--color-primary-light);
  box-shadow:inset 0 0 0 3px var(--color-forest);
}
.kompass .haken:has(input:focus-visible){ outline:2px solid var(--color-primary); outline-offset:3px; }
.kompass .haken:active{ transform:scale(0.97); }
@media (hover:hover) and (pointer:fine){
  .kompass .haken:hover{ border-color:var(--color-forest); }
}

/* Regler in deinem Orange, der Weg bis zum Knopf ist gefüllt (--wert setzt nav.js) */
.kompass input[type="range"]{
  -webkit-appearance:none; appearance:none;
  height:32px;
  background:transparent;
  cursor:pointer;
}
.kompass input[type="range"]::-webkit-slider-runnable-track{
  height:6px;
  border-radius:var(--radius-pill);
  background:linear-gradient(90deg, var(--color-primary) 0 var(--wert, 50%), rgba(24, 68, 42, 0.15) var(--wert, 50%) 100%);
}
.kompass input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:26px; height:26px;
  margin-top:-10px;
  border-radius:50%;
  background:var(--color-white);
  border:3px solid var(--color-primary);
  box-shadow:0 2px 8px rgba(14, 58, 60, 0.25);
  transition:transform 120ms var(--ease-out);
}
.kompass input[type="range"]:active::-webkit-slider-thumb{ transform:scale(1.15); }
.kompass input[type="range"]::-moz-range-track{ height:6px; border-radius:var(--radius-pill); background:rgba(24, 68, 42, 0.15); }
.kompass input[type="range"]::-moz-range-progress{ height:6px; border-radius:var(--radius-pill); background:var(--color-primary); }
.kompass input[type="range"]::-moz-range-thumb{
  width:20px; height:20px;
  border-radius:50%;
  background:var(--color-white);
  border:3px solid var(--color-primary);
  box-shadow:0 2px 8px rgba(14, 58, 60, 0.25);
}
.kompass input[type="range"]:focus-visible{ outline:2px solid var(--color-primary); outline-offset:4px; border-radius:var(--radius-sm); }

/* „Mehr Filter“ zum Aufklappen */
.kompass__mehr{
  grid-column:1 / -1;
  border-top:1px solid var(--color-line);
  padding-top:var(--space-4);
}
.kompass__mehr summary{
  display:inline-flex; align-items:center; gap:10px;
  min-height:44px;
  font-weight:700;
  color:var(--color-forest);
  cursor:pointer;
  list-style:none;
  -webkit-user-select:none; user-select:none;
}
.kompass__mehr summary::-webkit-details-marker{ display:none; }
.kompass__mehr summary::before{
  content:"+";
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px;
  border-radius:50%;
  background:var(--color-forest);
  color:var(--color-on-dark);
  font-size:20px; line-height:1;
  transition:transform 200ms var(--ease-out);
}
.kompass__mehr[open] summary::before{ transform:rotate(45deg); }
.kompass__mehr-inhalt{ display:grid; gap:var(--space-5); padding-top:var(--space-4); }
.kompass__mehr-inhalt .kompass__gruppe{ border-top:0; padding-top:0; }

/* Trefferzahl groß */
.kompass__treffer{ font-size:clamp(1.75rem, 3vw, 2.5rem); line-height:1; }
#k-ergebnisse{ margin-top:var(--space-6); }

/* ---------- Handy ---------- */
@media (max-width:900px){
  .packliste__raster, .frisch__raster{ grid-template-columns:1fr; }
  .zettel{ max-width:420px; }
}
@media (max-width:768px){
  .schatz-paar{ grid-template-columns:1fr; }
  .frisch__gross{ grid-template-columns:1fr; }
  .frisch__foto{ max-width:340px; margin-inline:auto; }
  .zettel{ padding:var(--space-6) var(--space-5) var(--space-5); transform:rotate(-1.5deg); }
  .schatz__stempel{ font-size:1.35rem; }
}
/* auf Grün: beim Drüberfahren nicht die helle Abschnittsfarbe erben */
.kompass-bereich a.card:hover{ color:var(--color-ink); }
/* Artikel-Leiste: beim Drüberfahren nicht den ganzen Text orange färben – nur Unterstreichung am Titel */
.frisch__gross:hover, .frisch__klein:hover{ color:inherit; }
.frisch__klein--gruen:hover{ color:var(--color-on-dark); }
/* Zettel: zweizeilige Punkte bekommen Luft */
.zettel__liste label{ padding-block:6px; }
/* Blog: Kompass direkt unter dem Kopf – die Bergkante wächst grün in den Kompass hinein */
.hero:has(+ .kompass-bereich) .hero__curve::after{ background:var(--color-forest-light); }
.hero + .kompass-bereich{ margin-top:-2px; }

/* =====================================================================
   ZUSAMMENARBEIT: Wegweiser (23.09.2026) – Pfosten in der Mitte,
   drei Pfeilschilder abwechselnd rechts/links, unten das Ziel
   ===================================================================== */
.wegweiser{
  position:relative;
  display:grid;
  gap:var(--space-7);
  padding-top:var(--space-7);
}
.wegweiser__pfosten{
  position:absolute;
  top:0; bottom:88px; left:50%;
  width:20px; margin-left:-10px;
  border-radius:4px;
  background:linear-gradient(90deg, var(--color-forest-hover) 0%, var(--color-petrol-700) 45%, var(--color-forest) 60%, var(--color-forest-hover) 100%);
  box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.wegweiser__kappe{
  position:absolute; top:-26px; left:50%;
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; margin-left:-26px;
  border-radius:50%;
  background:var(--color-forest);
  border:4px solid var(--color-surface-cream);
  color:var(--color-on-dark);
  box-shadow:var(--shadow-md);
}
.wegweiser__kappe .pfote{ width:24px; height:24px; }

.wegweiser__weg{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, 1fr) 20px minmax(0, 1fr);
  column-gap:0;
  align-items:center;
}
/* Schild: Pfeil aus Holz, am Pfosten festgeschraubt */
.wegweiser__schild{
  --kipp:-2deg;
  filter:drop-shadow(0 12px 14px rgba(14, 58, 60, 0.28));
  transform:rotate(var(--kipp));
}
.wegweiser__brett{
  position:relative;
  padding:var(--space-5) 64px var(--space-5) 40px;
  color:var(--color-on-dark);
  background:
    radial-gradient(circle at 18px 30%, rgba(0, 0, 0, 0.35) 0 3px, transparent 3.5px),
    radial-gradient(circle at 18px 70%, rgba(0, 0, 0, 0.35) 0 3px, transparent 3.5px),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0 3px, transparent 3px 9px),
    var(--gradient-forest);
  clip-path:polygon(0 0, calc(100% - 34px) 0, 100% 50%, calc(100% - 34px) 100%, 0 100%);
}
.wegweiser__brett h3{
  margin:0 0 6px;
  color:var(--color-white);
  font-size:clamp(1.6rem, 2.6vw, 2.2rem);
  line-height:1.02;
}
.wegweiser__brett p{
  margin:0;
  font-weight:600;
  color:var(--color-primary-light);
}
.wegweiser__info{
  background:var(--color-white);
  border-radius:3px;
  padding:var(--space-5) var(--space-5) var(--space-5);
  box-shadow:var(--shadow-md);
}
.wegweiser__info .checklist{ margin-bottom:var(--space-4); }

/* rechts zeigendes Schild: Schild rechts vom Pfosten, Info links */
.wegweiser__weg--rechts .wegweiser__schild{ grid-column:3; grid-row:1; justify-self:start; width:min(100%, 440px); margin-left:-6px; transform-origin:0 50%; }
.wegweiser__weg--rechts .wegweiser__info{ grid-column:1; grid-row:1; justify-self:end; width:min(100% - 40px, 440px); margin-right:40px; }
/* links zeigendes Schild: gespiegelt */
.wegweiser__weg--links .wegweiser__schild{ --kipp:2deg; grid-column:1; grid-row:1; justify-self:end; width:min(100%, 440px); margin-right:-6px; transform-origin:100% 50%; }
.wegweiser__weg--links .wegweiser__info{ grid-column:3; grid-row:1; justify-self:start; width:min(100% - 40px, 440px); margin-left:40px; }
.wegweiser__weg--links .wegweiser__brett{
  padding:var(--space-5) 40px var(--space-5) 64px;
  text-align:right;
  background:
    radial-gradient(circle at calc(100% - 18px) 30%, rgba(0, 0, 0, 0.35) 0 3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 18px) 70%, rgba(0, 0, 0, 0.35) 0 3px, transparent 3.5px),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0 3px, transparent 3px 9px),
    var(--gradient-forest);
  clip-path:polygon(34px 0, 100% 0, 100% 100%, 34px 100%, 0 50%);
}

/* Ziel am Fuß des Pfostens */
.wegweiser__ziel{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  padding-top:var(--space-4);
}
.wegweiser__boden{
  display:block;
  width:220px; height:26px;
  margin-bottom:var(--space-5);
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(24, 68, 42, 0.35) 0%, rgba(24, 68, 42, 0.12) 55%, transparent 72%);
}


/* Handy: Pfosten am linken Rand, alle Schilder zeigen nach rechts, Info darunter */
@media (max-width:860px){
  .wegweiser{ padding-left:34px; gap:var(--space-6); }
  .wegweiser__pfosten{ left:10px; margin-left:0; width:14px; bottom:110px; }
  .wegweiser__kappe{ width:44px; height:44px; margin-left:-22px; left:7px; top:-22px; }
  .wegweiser__kappe .pfote{ width:20px; height:20px; }
  .wegweiser__weg{ grid-template-columns:1fr; row-gap:var(--space-4); }
  .wegweiser__weg .wegweiser__schild,
  .wegweiser__weg--links .wegweiser__schild{
    --kipp:-1.5deg;
    grid-column:1; grid-row:1;
    justify-self:start; width:100%;
    margin:0 0 0 -24px;
    transform-origin:0 50%;
  }
  .wegweiser__weg .wegweiser__info,
  .wegweiser__weg--links .wegweiser__info{ grid-column:1; grid-row:2; justify-self:stretch; width:auto; margin:0; }
  .wegweiser__weg--links .wegweiser__brett{
    padding:var(--space-5) 56px var(--space-5) 36px;
    text-align:left;
    background:
      radial-gradient(circle at 18px 30%, rgba(0, 0, 0, 0.35) 0 3px, transparent 3.5px),
      radial-gradient(circle at 18px 70%, rgba(0, 0, 0, 0.35) 0 3px, transparent 3.5px),
      repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0 3px, transparent 3px 9px),
      var(--gradient-forest);
    clip-path:polygon(0 0, calc(100% - 30px) 0, 100% 50%, calc(100% - 30px) 100%, 0 100%);
  }
  .wegweiser__brett{ padding:var(--space-5) 56px var(--space-5) 36px; }
  .wegweiser__ziel{ align-items:flex-start; margin-left:-34px; padding-left:0; }
  .wegweiser__boden{ width:120px; margin-left:-40px; }
  .wegweiser__ziel .btn{ width:100%; }
}

/* =====================================================================
   Wegweiser – mehr Leben (23.09.2026)
   Alle Auftritte mit fill-mode „backwards“: vorher unsichtbar, danach
   gilt wieder der normale Stil (so bleibt der Hover-Wackler möglich).
   ===================================================================== */
/* Pfotenspur zum Ziel */
.wegweiser__spur{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  margin-bottom:var(--space-3);
  color:var(--color-forest);
}
.wegweiser__spur .pfote{ width:18px; height:18px; opacity:0.45; }
.wegweiser__spur .pfote:nth-child(odd){ transform:translateX(-9px) rotate(170deg); }
.wegweiser__spur .pfote:nth-child(even){ transform:translateX(9px) rotate(190deg); }

/* vor dem Auftritt: versteckt */
.js-anim .wegweiser--anim:not(.ist-da) .wegweiser__pfosten{ transform:scaleY(0); }
.js-anim .wegweiser--anim .wegweiser__weg:not(.ist-da) .wegweiser__schild,
.js-anim .wegweiser--anim .wegweiser__weg:not(.ist-da) .wegweiser__info,
.js-anim .wegweiser--anim .wegweiser__ziel:not(.ist-da) .pfote,
.js-anim .wegweiser--anim .wegweiser__ziel:not(.ist-da) .btn{ opacity:0; }

/* 1) Pfosten wächst aus dem Boden, Kappe ploppt auf */
.js-anim .wegweiser--anim.ist-da .wegweiser__pfosten{
  transform-origin:50% 100%;
  animation:pfostenWachsen 800ms var(--ease-out) backwards;
}
@keyframes pfostenWachsen{ from{ transform:scaleY(0); } to{ transform:none; } }
.js-anim .wegweiser--anim.ist-da .wegweiser__kappe{ animation:kappePlopp 520ms var(--ease-out) 650ms backwards; }
@keyframes kappePlopp{
  0%{ transform:scale(0); }
  65%{ transform:scale(1.18); }
  100%{ transform:none; }
}

/* 2) Schild schwingt aus wie ein Pendel und bleibt schief hängen */
.js-anim .wegweiser--anim .wegweiser__weg.ist-da .wegweiser__schild{
  animation:schildSchwingen 1300ms cubic-bezier(0.3, 0.7, 0.4, 1) backwards;
}
@keyframes schildSchwingen{
  0%{   opacity:0; transform:rotate(calc(var(--kipp) * -10)); }
  12%{  opacity:1; }
  40%{  transform:rotate(calc(var(--kipp) * 3.5)); }
  62%{  transform:rotate(calc(var(--kipp) * -1.4)); }
  80%{  transform:rotate(calc(var(--kipp) * 1.6)); }
  100%{ transform:rotate(var(--kipp)); }
}

/* 3) Info-Karte gleitet von ihrer Seite herein, Punkte nacheinander */
.js-anim .wegweiser--anim .wegweiser__weg.ist-da .wegweiser__info{ animation:infoVonLinks 600ms var(--ease-out) 380ms backwards; }
.js-anim .wegweiser--anim .wegweiser__weg--links.ist-da .wegweiser__info{ animation-name:infoVonRechts; }
@keyframes infoVonLinks{ from{ opacity:0; transform:translateX(-32px); } to{ opacity:1; transform:none; } }
@keyframes infoVonRechts{ from{ opacity:0; transform:translateX(32px); } to{ opacity:1; transform:none; } }
.js-anim .wegweiser--anim .wegweiser__weg.ist-da .wegweiser__info li{ animation:punktRein 420ms var(--ease-out) backwards; }
.js-anim .wegweiser--anim .wegweiser__weg.ist-da .wegweiser__info li:nth-child(1){ animation-delay:620ms; }
.js-anim .wegweiser--anim .wegweiser__weg.ist-da .wegweiser__info li:nth-child(2){ animation-delay:720ms; }
.js-anim .wegweiser--anim .wegweiser__weg.ist-da .wegweiser__info li:nth-child(3){ animation-delay:820ms; }
@keyframes punktRein{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* 4) Pfotenspur läuft zum Ziel, dann ploppt der Knopf */
.js-anim .wegweiser--anim .wegweiser__ziel.ist-da .pfote{ animation:pfoteTapst 350ms var(--ease-out) backwards; }
.js-anim .wegweiser--anim .wegweiser__ziel.ist-da .pfote:nth-child(1){ animation-delay:0ms; }
.js-anim .wegweiser--anim .wegweiser__ziel.ist-da .pfote:nth-child(2){ animation-delay:180ms; }
.js-anim .wegweiser--anim .wegweiser__ziel.ist-da .pfote:nth-child(3){ animation-delay:360ms; }
.js-anim .wegweiser--anim .wegweiser__ziel.ist-da .pfote:nth-child(4){ animation-delay:540ms; }
@keyframes pfoteTapst{ from{ opacity:0; scale:0.4; } to{ opacity:0.45; scale:1; } }
.js-anim .wegweiser--anim .wegweiser__ziel.ist-da .btn{ animation:knopfPlopp 520ms var(--ease-out) 800ms backwards; }
@keyframes knopfPlopp{
  0%{ opacity:0; transform:scale(0.85); }
  60%{ opacity:1; transform:scale(1.05); }
  100%{ transform:none; }
}

/* 5) Mit der Maus drüber: das Schild wackelt kurz am Pfosten */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .wegweiser__schild:hover{ animation:schildWackeln 700ms ease-in-out; }
}
@keyframes schildWackeln{
  0%, 100%{ transform:rotate(var(--kipp)); }
  25%{ transform:rotate(calc(var(--kipp) * -1.5)); }
  55%{ transform:rotate(calc(var(--kipp) * 2)); }
  80%{ transform:rotate(calc(var(--kipp) * 0.6)); }
}

/* =====================================================================
   MEHR LEBEN AUF ALLEN SEITEN (23.09.2026) – gesteuert von anim.js
   Alles nur mit .js-anim (also nicht bei „Bewegung reduzieren“).
   ===================================================================== */

/* 1) Schreibschrift schreibt sich: betontes Wort wird von links freigelegt.
      Negative Ränder, damit Schwünge der Schrift nicht abgeschnitten werden. */
.js-anim .schrift-anim em.accent{ clip-path:inset(-40% 100% -40% -12%); }
.js-anim .schrift-anim.ist-da em.accent{ animation:schreiben 1100ms cubic-bezier(0.55, 0.1, 0.3, 1) both; }
@keyframes schreiben{
  from{ clip-path:inset(-40% 100% -40% -12%); }
  to{ clip-path:inset(-40% -12% -40% -12%); }
}

/* 2) Polaroid entwickelt sich: erst hell und blass, dann kommt die Farbe */
.js-anim img.entwickeln:not(.entwickelt){ filter:brightness(1.7) contrast(0.55) saturate(0) sepia(0.25); }
.js-anim img.entwickelt{ animation:entwickeln 1800ms ease-out 200ms backwards; }
@keyframes entwickeln{
  0%{ filter:brightness(1.7) contrast(0.55) saturate(0) sepia(0.25); }
  55%{ filter:brightness(1.15) contrast(0.9) saturate(0.6) sepia(0.12); }
  100%{ filter:none; }
}

/* 3) Kompassnadel */
.kompass-nadel{
  display:block;
  width:72px; height:72px;
  margin:0 auto var(--space-4);
  color:var(--color-on-dark);
}
.kompass-nadel svg{ width:100%; height:100%; display:block; overflow:visible; }
.kompass-nadel__zeiger{ transform-box:view-box; transform-origin:32px 32px; transform:rotate(18deg); }
.js-anim .kompass-nadel:not(.ist-da) .kompass-nadel__zeiger{ transform:rotate(-150deg); }
.js-anim .kompass-nadel.ist-da .kompass-nadel__zeiger{ animation:nadelPendeln 1800ms cubic-bezier(0.25, 0.8, 0.3, 1) backwards; }
@keyframes nadelPendeln{
  0%{ transform:rotate(-150deg); }
  35%{ transform:rotate(60deg); }
  55%{ transform:rotate(-8deg); }
  72%{ transform:rotate(34deg); }
  86%{ transform:rotate(12deg); }
  100%{ transform:rotate(18deg); }
}
.js-anim .kompass-nadel.zuckt .kompass-nadel__zeiger{ animation:nadelZucken 480ms ease-in-out; }
@keyframes nadelZucken{
  0%, 100%{ transform:rotate(18deg); }
  30%{ transform:rotate(-12deg); }
  65%{ transform:rotate(34deg); }
}

/* 4) Meine Schätze: Zettel segelt auf den Tisch, dann kommt das Klebeband */
.js-anim .zettel:not(.ist-da){ opacity:0; }
.js-anim .zettel.ist-da{ animation:zettelLanden 900ms cubic-bezier(0.3, 0.9, 0.35, 1) backwards; }
@keyframes zettelLanden{
  0%{ opacity:0; transform:translate(40px, -60px) rotate(10deg); }
  60%{ opacity:1; transform:translate(-4px, 4px) rotate(-3.5deg); }
  100%{ transform:rotate(-2deg); }
}
.js-anim .zettel:not(.ist-da)::before{ opacity:0; }
.js-anim .zettel.ist-da::before{ animation:klebebandDrauf 380ms var(--ease-out) 850ms backwards; }
@keyframes klebebandDrauf{
  from{ opacity:0; transform:translateX(-50%) rotate(3deg) scale(1.35); }
  to{ opacity:1; transform:translateX(-50%) rotate(3deg); }
}
@media (max-width:768px){
  @keyframes zettelLanden{
    0%{ opacity:0; transform:translate(20px, -50px) rotate(8deg); }
    60%{ opacity:1; transform:translate(-2px, 3px) rotate(-2.5deg); }
    100%{ transform:rotate(-1.5deg); }
  }
}
/* Stempel knallt auf den Passau-Kasten */
.js-anim .schatz--bald:not(.ist-da) .schatz__stempel{ opacity:0; }
.js-anim .schatz--bald.ist-da .schatz__stempel{ animation:stempeln 520ms cubic-bezier(0.2, 0.9, 0.3, 1.2) 250ms backwards; }
@keyframes stempeln{
  0%{ opacity:0; transform:scale(2.4) rotate(-22deg); }
  55%{ opacity:1; transform:scale(0.9) rotate(-8deg); }
  100%{ transform:rotate(-9deg); }
}
.js-anim .schatz--bald.ist-da{ animation:stempelStoss 300ms ease-out 480ms; }
@keyframes stempelStoss{
  0%, 100%{ transform:none; }
  40%{ transform:translateY(3px); }
}

/* 5) Finale: die grüne Bergkante steigt auf */
@keyframes bergeSteigen{ from{ transform:translateY(70%); } to{ transform:none; } }

/* Reichweite: vier Zahlen – am Handy zwei nebeneinander statt vier untereinander */
@media (max-width:768px){
  .zahlen{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-3); }
  .zahl{ padding:var(--space-5) var(--space-3); }
  .zahl__wert{ font-size:clamp(1.8rem, 8vw, 2.6rem); }
  .zahl__label{ font-size:12px; letter-spacing:0.04em; }
}

/* =====================================================================
   FEINSCHLIFF (23.09.2026)
   ===================================================================== */
/* nur für Screenreader: Gliederung ohne sichtbare Überschrift */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; border:0;
}
/* kleine Knöpfe: trotzdem daumengroß */
.btn--sm{ min-height:44px; }
/* Schildchen-Links: sichtbar klein, aber die Tippfläche reicht auf 44px */
a.badge{ position:relative; }
a.badge::after{ content:""; position:absolute; inset:-6px -2px; }
/* Tour-Steckbrief: ruhiger Titel statt kleinem Großbuchstaben-Label */
.steckbrief__titel{
  font-family:var(--font-display);
  font-size:1.35rem;
  font-weight:400;
  letter-spacing:0.01em;
  text-transform:none;
  color:var(--color-forest);
}

/* =====================================================================
   BERGE (23.09.2026): drei echte Bergketten statt Zickzack-Linie.
   Hinten hohe Gipfel im Dunst, Mitte, vorne volle Kette in der Farbe
   des nächsten Abschnitts. --p (−0.5 … 0.5) setzt anim.js beim Scrollen:
   die hinteren Ketten bleiben zurück und versinken hinter der vorderen.
   ===================================================================== */
.berge{ color:var(--color-surface); }
.berge--gruen{ color:var(--color-forest-light); }
.berge--wald{ color:var(--color-forest); }
.berge__kette{
  position:absolute; left:0; right:0; bottom:0;
  height:100%;
  background:currentColor;
  -webkit-mask:url("../img/berge-vorne.svg") center bottom / 100% 100% no-repeat;
          mask:url("../img/berge-vorne.svg") center bottom / 100% 100% no-repeat;
}
.berge__kette--hinten{
  height:135%;
  opacity:0.38;
  -webkit-mask-image:url("../img/berge-hinten.svg");
          mask-image:url("../img/berge-hinten.svg");
  transform:translateY(calc(var(--p, 0) * 70px));
}
.berge__kette--mitte{
  height:118%;
  opacity:0.62;
  -webkit-mask-image:url("../img/berge-mitte.svg");
          mask-image:url("../img/berge-mitte.svg");
  transform:translateY(calc(var(--p, 0) * 34px));
}
/* Kopfbereich: Ketten sitzen in der bisherigen Kante, die alte SVG-Regel greift nicht mehr */
.hero__curve.berge{ overflow:visible; }

/* Finale: Ketten ragen nach oben in den Abschnitt davor (ersetzt die alte Einzelkante) */
.finale__berge{
  position:absolute; left:0; right:0; bottom:calc(100% - 1px);
  height:clamp(56px, 8vw, 130px);
  pointer-events:none;
}
.js-anim .finale--anim:not(.ist-da) .finale__berge{ transform:translateY(60%); }
.js-anim .finale--anim.ist-da .finale__berge{ animation:bergeSteigen 1100ms var(--ease-out) backwards; }

/* Handy: nur einen Ausschnitt der Kette zeigen, sonst werden die Gipfel zu spitzen Nadeln */
@media (max-width:768px){
  .berge__kette{ -webkit-mask-size:160% 100%; mask-size:160% 100%; -webkit-mask-position:45% 100%; mask-position:45% 100%; }
  .berge__kette--hinten{ -webkit-mask-position:22% 100%; mask-position:22% 100%; }
  .berge__kette--mitte{ -webkit-mask-position:68% 100%; mask-position:68% 100%; }
}

/* Hintere Ketten bekommen nach unten einen massiven Sockel (60px), damit beim
   Verschieben durch --p nie eine Lücke unter einem Tal der vorderen Kette entsteht.
   Maske: oben die Bergform, unten eine volle Fläche. */
.berge__kette--hinten,
.berge__kette--mitte{
  bottom:-60px;
  -webkit-mask-position:center top, center bottom;
          mask-position:center top, center bottom;
  -webkit-mask-repeat:no-repeat, no-repeat;
          mask-repeat:no-repeat, no-repeat;
}
.berge__kette--hinten{
  height:calc(135% + 60px);
  -webkit-mask-image:url("../img/berge-hinten.svg"), linear-gradient(#000 0 0);
          mask-image:url("../img/berge-hinten.svg"), linear-gradient(#000 0 0);
  -webkit-mask-size:100% calc(100% - 60px), 100% 61px;
          mask-size:100% calc(100% - 60px), 100% 61px;
}
.berge__kette--mitte{
  height:calc(118% + 60px);
  -webkit-mask-image:url("../img/berge-mitte.svg"), linear-gradient(#000 0 0);
          mask-image:url("../img/berge-mitte.svg"), linear-gradient(#000 0 0);
  -webkit-mask-size:100% calc(100% - 60px), 100% 61px;
          mask-size:100% calc(100% - 60px), 100% 61px;
}
@media (max-width:768px){
  .berge__kette--hinten{
    -webkit-mask-size:160% calc(100% - 60px), 100% 61px; mask-size:160% calc(100% - 60px), 100% 61px;
    -webkit-mask-position:22% 0, center bottom; mask-position:22% 0, center bottom;
  }
  .berge__kette--mitte{
    -webkit-mask-size:160% calc(100% - 60px), 100% 61px; mask-size:160% calc(100% - 60px), 100% 61px;
    -webkit-mask-position:68% 0, center bottom; mask-position:68% 0, center bottom;
  }
}

/* =====================================================================
   AUDIT 2 (23.09.2026 abends)
   ===================================================================== */
/* Kompass-Einleitung: volles Weiß statt halbtransparent (vorher 3,4:1 auf hellem Grün) */
.kompass-bereich .section-head p{ color:var(--color-on-dark); }
/* Betontes Wort in Sunrise-Abschnitten: dunkles Orange (vorher 2,95:1 auf der Mitte des Verlaufs, jetzt über 4,5:1) */
.section--cream em.accent{ color:var(--color-primary-deep); }