/*
 Theme Name: Twenty Twenty-Five Child
 Template: twentytwentyfive
 Version: 1.4.0 (cleaned)
*/

/* -----------------------------
   1) Fonts (Variante A: lokale @font-face)
   ----------------------------- */
@font-face{font-family:"Inter 28";src:url("./assets/fonts/Inter28-ExtraLight.woff2") format("woff2");font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:"Abril Fatface";src:url("./assets/fonts/AbrilFatface-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Cloud Loop";src:url("./assets/fonts/CloudLoop-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* -----------------------------
   2) Typo-Scale (Familien via theme.json)
   ----------------------------- */
:root{
  --fz-body-min:1.125rem; --fz-body-max:1.4rem;
  --fz-h1-max:5.5rem; --fz-h2-max:4rem; --fz-h3-max:3rem; --fz-h4-max:2.5rem; --fz-h5-max:1.75rem; --fz-h6-max:1.4rem;

  /* x-Höhen-Angleichung Cloud Loop → Abril */
  --alt-scale-cloud:.90; /* bei Bedarf in 0.01-Schritten feinjustieren */
}

/* Nur Größen/Spacing, KEINE Font-Families hier */
body{ line-height:1.6; font-size:1rem }
h1,h2,h3,h4,h5,h6{ line-height:1.1; margin-block:0 .6em }
h1{ font-size:clamp(2.6rem,1.6rem + 4vw,var(--fz-h1-max)) }
h2{ font-size:clamp(2.2rem,1.4rem + 2.6vw,var(--fz-h2-max)) }
h3{ font-size:clamp(1.9rem,1.25rem + 2.0vw,var(--fz-h3-max)) }
h4{ font-size:clamp(1.5rem,1.15rem + 1.1vw,var(--fz-h4-max)) }
h5{ font-size:clamp(1.25rem,1.05rem + 0.6vw,var(--fz-h5-max)) }
h6{ font-size:clamp(1.05rem,0.95rem + 0.35vw,var(--fz-h6-max)) }

/* -----------------------------
   3) Headline Alt-Schrift (ohne Extraklassen)
   Kursiv in h1..h6 ⇒ Cloud Loop mit x-Höhen-Scaling
   ----------------------------- */
:where(h1,h2,h3,h4,h5,h6) em{
  font-family:"Cloud Loop",cursive !important;
  font-style:normal; /* Kursiv ist nur der Trigger */
  font-size:calc(1em * var(--alt-scale-cloud));
}
/* Editor-Ansicht mit abdecken */
.editor-styles-wrapper :where(h1,h2,h3,h4,h5,h6) em{
  font-family:"Cloud Loop",cursive !important;
  font-style:normal;
  font-size:calc(1em * var(--alt-scale-cloud));
}

/* -----------------------------
   4) Utilities
   ----------------------------- */
.measure{max-width:65ch} .measure-narrow{max-width:52ch} .center{margin-inline:auto}
.section-pad{padding-block:clamp(3rem,5vw,6rem)}
.h-wrap{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.h-balance{text-wrap:balance}


/* -----------------------------
   7) Stack / z-index
   ----------------------------- */
.stack{position:relative;isolation:isolate;--wp--style--block-gap:0}
.z-top{position:relative;z-index:3}.z-mid{position:relative;z-index:2}.z-back{position:relative;z-index:1}

/* Gleich hohe, quadratische Kacheln */
.grid-4{
  display: flex; flex-wrap: nowrap; gap: 0;
}
.grid-4 > *{
  flex: 0 0 25%; min-width: 0;
  position: relative;
  aspect-ratio: 1 / 1;   /* 1:1 Kachel – anpassbar (z.B. 3/2) */
  overflow: hidden;
}
.grid-4 img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;     /* schöner Zuschnitt */
}

/* -----------------------------
   9) Details – kompakt + Body=1rem bei geöffnet
   ----------------------------- */
:root{
  /* kompakte Summary-Schrift (geschlossen & geöffnet) */
 --details-fz-summary: clamp(1.05rem, 1rem + .25vw, 1.2rem);
  --details-gap-left: 1.2em; /* Platz für +/– Symbol */
}

/* Summary: klein & klickbar */
body .wp-block-details > summary{
  position:relative!important; display:block!important; list-style:none!important;
  padding:0 0 0 var(--details-gap-left)!important; margin:0!important; border:0!important; background:none!important; box-shadow:none!important;
  cursor:pointer; outline:0;
  font-size: var(--details-fz-summary); line-height:1.25; font-weight:400; /* Familie via theme.json */
}

/* Marker ausblenden + eigenes Symbol */
body .wp-block-details > summary::-webkit-details-marker{ display:none!important }
body .wp-block-details > summary::marker{ content:""!important; font-size:0!important }
body .wp-block-details > summary::after{ content:none!important }
body .wp-block-details > summary::before{
  content:"+"; position:absolute; left:0; top:.05em; width:1em; text-align:center;
}
body .wp-block-details[open] > summary::before{ content:"–" }

/* Inhalt: Inter 28 Extra Light, fix 1rem, Einzug passend zum Symbol */
body .wp-block-details .wp-block-details__content{
  font-family:"Inter 28",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:200;
  font-size:1rem;              /* <— fix auf 1rem */
  line-height:1.6;
  margin:.5rem 0 0 var(--details-gap-left);
}

/* Standardmäßig Inhalt nur im offenen Zustand zeigen */
body .wp-block-details > *:not(summary){ display:none }
@media (hover:hover) and (pointer:fine){
  body .wp-block-details.details-hover:hover > *:not(summary){ display:block!important }
  body .wp-block-details.details-hover:hover > summary::before{ content:"–" }
  body .wp-block-details.details-hover.no-click > summary{ pointer-events:none }
}
@media (hover:none),(pointer:coarse){
  body .wp-block-details[open] > *:not(summary){ display:block }
  body .wp-block-details[open] > summary::before{ content:"–" }
}

/* Optional: Animation (falls .details-anim am Block) */
body .wp-block-details.details-anim > *:not(summary){
  display:block; max-height:0; opacity:0; overflow:hidden; transform:translateY(-.25rem);
  transition:max-height .3s ease, opacity .2s ease, transform .2s ease;
}
@media (hover:hover) and (pointer:fine){
  body .wp-block-details.details-anim.details-hover:hover > *:not(summary){ max-height:60rem; opacity:1; transform:none }
}
@media (hover:none),(pointer:coarse){
  body .wp-block-details.details-anim[open] > *:not(summary){ max-height:60rem; opacity:1; transform:none }
}

/* -----------------------------
   10) Reveal (IntersectionObserver) – keyframes
   ----------------------------- */
.js .reveal{opacity:0;transform:translateY(24px);will-change:opacity,transform}
.js .reveal.in{animation:kl-fade-up .6s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes kl-fade-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.js .reveal.left{transform:translateX(-24px)}.js .reveal.left.in{animation:kl-fade-left .6s cubic-bezier(.22,.61,.36,1) forwards}
.js .reveal.right{transform:translateX(24px)}.js .reveal.right.in{animation:kl-fade-right .6s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes kl-fade-left{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@keyframes kl-fade-right{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.delay-100{animation-delay:.1s!important}.delay-200{animation-delay:.2s!important}.delay-300{animation-delay:.3s!important}.delay-400{animation-delay:.4s!important}
@media (prefers-reduced-motion:reduce){.js .reveal,.js .reveal.in{opacity:1!important;transform:none!important;animation:none!important}}

/* -----------------------------
   11) Outdoor-Section
   ----------------------------- */
.outdoor{--pad-x:clamp(16px,5vw,40px)}
.outdoor{padding-left:var(--pad-x)!important;padding-right:var(--pad-x)!important}
.outdoor .wp-block-group{padding-left:0!important;padding-right:0!important}
.outdoor h2.alignfull.no-pad-x{padding-left:0!important;padding-right:0!important}
.outdoor.compact-pad{--pad-x:16px}
.outdoor p,.outdoor h2{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere;text-wrap:pretty}



/* -----------------------------
   15) Hashtag-Ticker (Band grün)
   ----------------------------- */
.ticker{
  position:relative; overflow:hidden; white-space:nowrap;
  padding-block:.65rem; font-size:clamp(.95rem,.8rem + .4vw,1.1rem); line-height:1.4;
  --ticker-gap: .75rem;       /* Abstand zwischen Hashtags */
}
.ticker--band{
  background: var(--wp--preset--color--custom-kl-gruen,#DBF305);
  color: var(--wp--preset--color--black,#000);
  text-shadow:0 0 1px color-mix(in oklab,currentColor 20%,transparent);
}
.ticker__track{
  display:inline-block; white-space:nowrap; will-change:transform;
  animation:kl-ticker var(--ticker-duration,22s) linear infinite;
}
.ticker span{
  display:inline-block; padding-inline:var(--ticker-gap);
  font-weight:200; letter-spacing:.02em;
}
.ticker:hover .ticker__track, .ticker:focus-within .ticker__track{ animation-play-state:paused }
@media (prefers-reduced-motion:reduce){ .ticker__track{ animation:none } }
@keyframes kl-ticker{ from{transform:translateX(0)} to{transform:translateX(calc(-1 * var(--ticker-loop,50%)))} }
/* Optional: für 3x/4x Inhalt */
.ticker--x3{ --ticker-loop:33.333% } .ticker--x4{ --ticker-loop:25% }
@media (min-width:1600px){ .ticker{ --ticker-duration:28s } }


/* Scroll-Up Button (fix rechts, smooth) */
html{ scroll-behavior: smooth; }

.scroll-up{
  position: fixed; right: clamp(12px, 2vw, 24px); bottom: clamp(12px, 2vw, 24px);
  inline-size: 44px; block-size: 44px; border-radius: 999px;
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--wp--preset--color--foreground,#000) 8%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid color-mix(in oklab, var(--wp--preset--color--foreground,#000) 20%, transparent);
  color: var(--wp--preset--color--foreground,#000);
  text-decoration: none; box-shadow: 0 4px 14px rgba(0,0,0,.08);
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
  z-index: 9999;
}
.scroll-up.is-visible{ opacity: 1; pointer-events: auto; transform:none; }
.scroll-up svg{ width:20px; height:20px; }

/* Mobil: in offer-swap-mobile kommt immer die Bild-Spalte zuerst */
@media (max-width: 782px){
  /* Standard: beide Spalten zunächst „zweite“ */
  .offer-swap-mobile > .wp-block-column{ order: 2 }

  /* Die Spalte, die ein Bild enthält, wird nach vorne gezogen */
  .offer-swap-mobile > .wp-block-column:has(figure.wp-block-image),
  .offer-swap-mobile > .wp-block-column:has(img){
    order: 1;
  }

  /* (Optional) etwas Luft unter dem Bild, damit Text/Buttons nicht kleben */
  .offer-swap-mobile > .wp-block-column:has(figure.wp-block-image) { margin-bottom: .75rem; }
}

/* Extra robust: falls ein übergeordneter Group-Block die Klasse trägt */
@media (max-width: 782px){
  .offer-swap-mobile .wp-block-columns > .wp-block-column{ order: 2 }
  .offer-swap-mobile .wp-block-columns > .wp-block-column:has(figure.wp-block-image),
  .offer-swap-mobile .wp-block-columns > .wp-block-column:has(img){ order: 1 }
}
/* =============================
   Cover „Hover-Swap“ (final, single source of truth)
   Vorderseite = schmaler Band,
   bei Hover/Fokus voll ausklappen
   ============================= */
.wp-block-cover.hover-swap{
  /* Variablen – pro Block auch inline überschreibbar */
  --band-pad: 1rem 1.25rem;   /* Innenabstand im Band */
  --band-collapsed: 20rem;    /* Höhe Vorderseite (Desktop/Tablet) */
  --hover-max: 90rem;         /* maximale Höhe beim Aufklappen */

  position: relative;
  overflow: visible;          /* nichts abschneiden */
  border-radius: .5rem;       /* wie bisher */
  /* aspect-ratio kann gesetzt sein; wird beim Hover gelöst */
}

/* Innerer Container darf wachsen; Layout: Bild (1fr) + Band unten */
.wp-block-cover.hover-swap .wp-block-cover__inner-container{
  height: auto;
  display: grid;
  grid-template-rows: 1fr auto;  /* Bild oben, Band unten */
  align-content: end;
  justify-items: start;
  text-align: left;
  padding: 0 !important;
}

/* Beide Overlays belegen die untere Zeile */
.hover-swap .overlay-default,
.hover-swap .overlay-hover{
  grid-row: 2;
  grid-column: 1;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  --wp--style--block-gap: 0;
  padding: var(--band-pad);
}

/* Vorderseite: schmal (Band), Text ggf. abgeschnitten */
.hover-swap .overlay-default{
  max-height: var(--band-collapsed);
  overflow: hidden;
  opacity: 1;
  transition: opacity .2s ease;
}

/* Rückseite: im Normalzustand kollabiert (trägt keine Höhe bei) */
.hover-swap .overlay-hover{
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity .2s ease, max-height .4s ease;
}

/* Hover/Fokus: Karte darf wachsen, Rückseite groß */
.wp-block-cover.hover-swap:hover,
.wp-block-cover.hover-swap:focus-within{
  aspect-ratio: auto;              /* Ratio lösen */
  height: auto !important;         /* Wachstum erlauben */
  min-height: unset !important;    /* evtl. Inline-Min-Höhe neutralisieren */
}
.wp-block-cover.hover-swap:hover .overlay-default,
.wp-block-cover.hover-swap:focus-within .overlay-default{
  opacity: 0;
}
.wp-block-cover.hover-swap:hover .overlay-hover,
.wp-block-cover.hover-swap:focus-within .overlay-hover{
  opacity: 1;
  max-height: var(--hover-max);
  overflow: visible;
}

/* Medien: Bild/Video sauber beschneiden */
.wp-block-cover.hover-swap img,
.wp-block-cover.hover-swap video{
  object-fit: cover;
}

/* Reduced Motion: ohne Animationssprung */
@media (prefers-reduced-motion: reduce){
  .hover-swap .overlay-default,
  .hover-swap .overlay-hover{ transition: none; }
}

/* Mobil: Band höher, damit lange Zeilen nicht abgeschnitten werden */
@media (max-width: 782px){
  .wp-block-cover.hover-swap{
    --band-collapsed: 24rem;   /* bei Bedarf 26–28rem */
    /* Optional:
    --band-pad: 1rem 1rem;
    */
  }
}
/* Unterstrich-Höhe: 45% transparent => ~55% farbig (anpassbar) */
:root{ --marker-cut: 45%; }

/* Opt-in: Nur in Bereichen mit marker-underline-scope wird der Unterstrich aktiv */
.marker-underline-scope :is(
  mark,
  span.has-inline-background-color,
  mark[style*="background-color" i],
  span[style*="background-color" i]
){
  /* Vollfläche aus, stattdessen Unterstrich-Verlauf */
  background-color: transparent !important;
  background-image: linear-gradient(transparent var(--marker-cut), var(--marker-color, currentColor) 0);
  padding-inline: .08em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* Farbzuordnung – Palette (bitte Slugs anpassen, falls bei dir anders) */
.marker-underline-scope :is(mark, span).has-custom-kl-gruen-background-color{   --marker-color:#DBF305 }
.marker-underline-scope :is(mark, span).has-custom-kl-blau-background-color{    --marker-color:#1408BA }
.marker-underline-scope :is(mark, span).has-custom-kl-koralle-background-color{ --marker-color:#FF5657 }

/* Fallback: inline Hex (Safari-fest, case-insensitive) */
.marker-underline-scope :is(mark, span)[style*="background-color:#DBF305" i]{ --marker-color:#DBF305 }
.marker-underline-scope :is(mark, span)[style*="background-color:#1408BA" i]{ --marker-color:#1408BA }
.marker-underline-scope :is(mark, span)[style*="background-color:#FF5657" i]{ --marker-color:#FF5657 }

/* Optional: Presets für die Höhe – lokal zusätzlich als Klasse an den Eltern setzen */
.marker-underline-scope--55{ --marker-cut: 45% } /* ~55% farbig */
.marker-underline-scope--60{ --marker-cut: 40% } /* ~60% farbig */

/* Standard: Band überlappt nach oben */
.band-overlap{
  position: relative;        /* für z-index-Kontext und sauberes Layout */
  margin-top: -100px;
}

/* Bild sicher über dem Band */
.z-top{ position: relative; z-index: 3; }
.z-back{ position: relative; z-index: 1; }

/* Ab 1100px abwärts: Überlappung aus */
@media (max-width: 1100px){
  .band-overlap{
    margin-top: 0 !important;
  }
}

/* EN ausblenden, wenn DE aktiv */
html:lang(de) .nav--en,
html:lang(de) .footer--en {
  display: none !important;
}

/* DE ausblenden, wenn EN aktiv */
html:lang(en) .nav--de,
html:lang(en) .footer--de {
  display: none !important;
}