/*
Theme Name: FINNLIO
Theme URI: https://finnlio.de
Author: development4u
Description: Block-Theme für FINNLIO – hochwertiges Spielzeug, Kleidung und Möbel für Kinder. Skandinavisch-ruhige Gestaltung mit dem Sonnen- und Horizontmotiv der Bildmarke, lokal eingebundenen Schriften und WooCommerce-Unterstützung.
Version: 1.1.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: finnlio
Tags: e-commerce, block-theme, full-site-editing, accessibility-ready
*/

/* Farben, Typografie und Abstände stehen in theme.json – hier keine Hex-Werte
   doppeln. Diese Datei ergänzt, was theme.json nicht abbilden kann: Bewegung,
   das Horizontmotiv, WooCommerce-Feinschliff.

   FINNLIO ist bewusst einfarbig hell. Keine Dunkelfassung – die Marke steht auf
   Cream-Grund, eine Invertierung würde sie verfälschen. */

:root{
  --fl-kurve: cubic-bezier(.22,.8,.28,1);
  --fl-schnell: .22s;
  --fl-mittel: .4s;
  --fl-langsam: .7s;
  --fl-sperr: .22em;
  --fl-schatten: rgba(74,65,57,.09);
  --fl-schatten-tief: rgba(74,65,57,.14);
}

/* ══ Grundlagen ══ */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline: 3px solid var(--wp--preset--color--sonne);
  outline-offset: 3px;
  border-radius: 6px;
}

.finnlio-skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  padding:12px 20px;
  background:var(--wp--preset--color--ink-dunkel);
  color:var(--wp--preset--color--cream);
  text-decoration:none;
}
.finnlio-skip-link:focus{ left:8px; top:8px; }

/* ══ Sonnenmotiv ══
   Ein Lichtschein, der beim Scrollen gegenläufig über die Seite wandert.
   Wird von assets/js/finnlio.js eingesetzt und bewegt. */

/* Schneidet den Überstand der Sonne ab, ohne die Seite breiter zu machen. */
.finnlio-sonnenfeld{
  position:absolute; inset:0;
  overflow:hidden; pointer-events:none; z-index:0;
}
.finnlio-sonne{
  position:absolute; top:180px; right:-90px;
  width:min(38vw, 380px); aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(195,132,50,.20), rgba(195,132,50,.07) 46%, transparent 70%);
  pointer-events:none; z-index:0;
  will-change:transform;
}
/* Die Sonne darf seitlich hinausragen, ohne eine Querleiste zu erzeugen.
   „clip" statt „hidden", weil „hidden" am body sonst position:sticky im Kopf
   aushebelt – der body würde zum Scroll-Behälter. */
body{ position:relative; overflow-x:hidden; }
@supports (overflow-x:clip){
  body{ overflow-x:clip; }
}
.wp-site-blocks{ position:relative; z-index:1; }

/* Strahlen der Bildmarke drehen langsam – im Kopf, im Fuß, in Mustern */
.finnlio-strahlen{
  transform-origin:168px 34px;
  animation:finnlio-drehen var(--fl-strahlen-dauer, 72s) linear infinite;
}
@keyframes finnlio-drehen{ to{ transform:rotate(360deg); } }

/* ══ Horizont ══
   Die geschwungene Doppellinie der Bildmarke als Abschnittstrenner.
   Als Block-Muster „Horizontlinie" einsetzbar. */

.finnlio-horizont{
  display:block; width:100%; height:52px;
  color:var(--wp--preset--color--linie-stark);
}
.finnlio-horizont--sage{ color:#CDD3BE; }

/* Untere Kante als Horizontbogen – für Bühnenbilder und Kategoriekacheln */
.finnlio-bogen,
.finnlio-bogen img{
  border-radius:22px 22px 46% 46% / 22px 22px 13% 13%;
}
.finnlio-bogen{
  overflow:hidden;
  background:var(--wp--preset--color--stein);
  box-shadow:0 20px 54px var(--fl-schatten);
}

/* ══ Marke ══ */

.finnlio-wortmarke,
.wp-block-site-title{
  font-family:var(--wp--preset--font-family--heading);
  letter-spacing:var(--fl-sperr);
  text-transform:uppercase;
  font-weight:400;
}

.finnlio-eyebrow{
  font-family:var(--wp--preset--font-family--heading);
  font-size:var(--wp--preset--font-size--xs);
  letter-spacing:var(--fl-sperr);
  text-transform:uppercase;
  font-weight:500;
  color:var(--wp--preset--color--sonne-text);
  display:flex; align-items:center; gap:10px;
}
.finnlio-eyebrow::before{
  content:""; width:26px; height:1.5px; flex:none;
  background:currentColor;
}
.has-text-align-center.finnlio-eyebrow{ justify-content:center; }

/* ══ Vertrauensleiste ══ */

.finnlio-vertrauen{
  border-bottom:1px solid var(--wp--preset--color--linie);
}
.finnlio-trust{
  display:flex; flex-wrap:wrap; gap:0 4px; justify-content:center;
  margin:0;
  font-family:var(--wp--preset--font-family--heading);
  font-size:var(--wp--preset--font-size--xs);
  letter-spacing:.1em; text-transform:uppercase;
}
.finnlio-trust > *{ position:relative; padding:0 14px; }
.finnlio-trust > * + *::before{
  content:""; position:absolute; left:-2px; top:50%;
  width:3px; height:3px; border-radius:50%;
  background:var(--wp--preset--color--sonne);
  transform:translateY(-50%);
}

/* ══ Navigation ══ */

.wp-block-navigation .wp-block-navigation-item__content{
  position:relative; padding-bottom:4px; text-decoration:none;
}
.wp-block-navigation .wp-block-navigation-item__content::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
  background:var(--wp--preset--color--sonne);
  transition:right .32s var(--fl-kurve);
}
.wp-block-navigation .wp-block-navigation-item__content:hover::after,
.wp-block-navigation .current-menu-item .wp-block-navigation-item__content::after{ right:0; }

/* ══ Geöffnetes Hauptmenü ══
   WordPress legt dafür eine weiße Vollbildfläche mit einer schlichten Liste an.
   Hier wird daraus eine Markenfläche: Cremegrund, Sonnenschein oben rechts,
   Horizontlinie am Fuß, große Einträge in der Überschriftenschrift, die beim
   Öffnen nacheinander hereingleiten. */

.wp-block-navigation__responsive-container.is-menu-open{
  background-image:radial-gradient(circle at 88% 12%,
    rgba(195,132,50,.16), rgba(195,132,50,.05) 40%, transparent 66%);
  padding:0;
}
/* Horizontbogen als Abschluss – dasselbe Motiv wie zwischen den Abschnitten.
   Absolut zum Behälter, und der Behälter scrollt nicht: gescrollt wird eine
   Ebene tiefer. Fest positioniert ging schief, weil Safari auf dem iPhone
   feste Kinder eines scrollenden Kastens mitscrollen lässt – der Bogen lag
   dann quer über der Liste statt unten. */
.wp-block-navigation__responsive-container.is-menu-open::after{
  content:""; position:absolute; left:0; right:0; bottom:26px; height:52px;
  background:no-repeat center/100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 52' preserveAspectRatio='none'%3E%3Cpath d='M0 30 C 300 8, 900 8, 1200 30' fill='none' stroke='%23DDD5CD' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M120 44 C 400 26, 800 26, 1080 44' fill='none' stroke='%23DDD5CD' stroke-width='1.2' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E");
  pointer-events:none;
}

/* Bildmarke und Einträge zusammen in der Höhe mittig – sonst klebt die Liste
   oben und unter dem letzten Eintrag bleibt ein Viertel Bildschirm leer.

   „safe center" statt „center": sobald die Liste höher ist als der Schirm –
   mit den Untermenüs sind es zwanzig Einträge – würde echtes Zentrieren oben
   abschneiden, und das Abgeschnittene ist nicht mehr erreichbar. */
/* Gescrollt wird allein die Liste – Behälter, Schließer und Markenzeichen
   bleiben stehen. Deshalb reicht die Flächenaufteilung von außen bis zur
   Liste durch, und erst die bekommt overflow. */
.wp-block-navigation__responsive-container.is-menu-open{ overflow:hidden; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close{
  max-width:none; flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column;
  padding:20px 22px calc(58px + env(safe-area-inset-bottom));
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column;
}

/* Bildmarke oben links, damit das Menü nicht heimatlos wirkt */
.is-menu-open .wp-block-navigation__responsive-dialog::before{
  content:""; display:block; width:74px; height:40px; margin-bottom:34px;
  background:no-repeat left center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='20 0 200 130'%3E%3Cg fill='none' stroke='%236C5E56' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%23C38432'%3E%3Cg stroke-width='2.6'%3E%3Cpath d='M168 12.5v-7'/%3E%3Cpath d='M168 62.5v7'/%3E%3Cpath d='M190.5 34h7'/%3E%3Cpath d='M138.5 34h7'/%3E%3Cpath d='M183.9 18.1l4.9-4.9'/%3E%3Cpath d='M147.2 54.8l4.9-4.9'/%3E%3Cpath d='M183.9 49.9l4.9 4.9'/%3E%3Cpath d='M147.2 13.2l4.9 4.9'/%3E%3C/g%3E%3Ccircle cx='168' cy='34' r='12.5' fill='%23C38432' stroke='none'/%3E%3C/g%3E%3Cpath d='M126 96 L163 50 L200 96' fill='%23F2EEE4'/%3E%3Cpath d='M74 96 L112 44 L150 96' fill='%23F6EFE6'/%3E%3Cpath d='M52 24 L60 42 L56 42 L65 58 L61 58 L70 76 L34 76 L43 58 L39 58 L48 42 L44 42 Z' fill='%23F6EFE6'/%3E%3Cpath d='M52 76 V96'/%3E%3Cpath d='M30 99 C 82 93, 158 93, 210 99'/%3E%3Cpath d='M54 109 C 96 104, 146 104, 188 109' stroke-width='2.8'/%3E%3C/g%3E%3C/svg%3E");
}

/* Fest oben rechts am Bildschirm. Mit position:absolute haengt der Knopf am
   Dialog, und der sitzt seit dem mittigen Ausrichten auf halber Hoehe. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{
  position:absolute; top:16px; right:16px;
  width:44px; height:44px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--wp--preset--color--weiss);
  color:var(--wp--preset--color--ink-dunkel);
  box-shadow:0 3px 14px var(--fl-schatten);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
  padding-top:0; width:100%;
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column; justify-content:safe center;
  /* Kurzform mit zwei Werten: senkrecht rollen, waagerecht nicht. Allein
     "overflow-y:auto" macht aus dem waagerechten "visible" stillschweigend
     ein "auto" – die Liste ließ sich dann um wenige Pixel seitlich ziehen. */
  overflow:hidden auto; -webkit-overflow-scrolling:touch;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
  width:100%; gap:0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item{
  width:100%;
  border-bottom:1px solid var(--wp--preset--color--linie);
  animation:finnlio-menue-rein .45s var(--fl-kurve) both;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(1){ animation-delay:.02s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(2){ animation-delay:.06s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(3){ animation-delay:.10s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4){ animation-delay:.14s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(5){ animation-delay:.18s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(6){ animation-delay:.22s; }
@keyframes finnlio-menue-rein{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:none; }
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item .wp-block-navigation-item__content{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:17px 2px 18px;
  font-size:clamp(1.45rem, 6.4vw, 2rem);
  font-weight:200; letter-spacing:.01em; line-height:1.15;
  color:var(--wp--preset--color--ink-dunkel);
}
/* Der Unterstrich aus der Kopfzeile ergäbe hier einen Strich quer über die
   Fläche – im Menü stattdessen ein Winkel am rechten Rand. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item .wp-block-navigation-item__content::after{
  content:""; position:static;
  width:9px; height:9px; flex:none; margin-right:6px;
  border:0; border-right:1.6px solid var(--wp--preset--color--sonne);
  border-bottom:1.6px solid var(--wp--preset--color--sonne);
  background:none;
  transform:rotate(-45deg);
  transition:transform var(--fl-schnell) var(--fl-kurve);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item .wp-block-navigation-item__content:active::after{
  transform:rotate(-45deg) translate(2px,2px);
}

/* ── Untermenüs ──
   Auf breiten Schirmen ein aufklappendes Feld, im Handymenü eingerückt unter
   dem Hauptpunkt. WordPress bringt dafür einen weißen Kasten mit grauem
   Rahmen mit — hier stattdessen die Cremefläche der Marke. */

.wp-block-navigation .wp-block-navigation__submenu-container{
  background-color:var(--wp--preset--color--cream);
  border:1px solid var(--wp--preset--color--linie);
  border-radius:16px;
  padding:9px;
  min-width:238px;
  box-shadow:0 18px 46px var(--fl-schatten);
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
  padding:9px 13px;
  border-radius:10px;
  white-space:nowrap;
  transition:background-color var(--fl-schnell);
}
/* Der Unterstrich aus der Kopfzeile ergäbe im Klappfeld einen Strich quer
   über die Zeile – dort reicht ein ruhiger Hintergrund. */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after{
  content:none;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover{
  background-color:var(--wp--preset--color--cream-tief);
}

/* „Alles aus …" schließt die Liste ab und steht abgesetzt. */
.wp-block-navigation__submenu-container .finnlio-nav-alles{
  margin-top:5px; padding-top:6px;
  border-top:1px solid var(--wp--preset--color--linie);
}
.wp-block-navigation__submenu-container .finnlio-nav-alles .wp-block-navigation-item__content{
  color:var(--wp--preset--color--sonne-text);
}

/* Im geöffneten Handymenü: eingerückt, kleiner, ohne eigenen Kasten. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{
  background:none; border:0; box-shadow:none;
  padding:0 0 12px; min-width:0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item{
  border:0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
  padding:8px 2px 8px 17px;
  font-size:var(--wp--preset--font-size--base);
  font-weight:400;
  color:var(--wp--preset--color--taupe);
  white-space:normal;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after{
  content:none;
}

/* ══ Knöpfe ══ */

.wp-element-button:not(.wp-block-search__button), .wp-block-button__link{
  transition:transform var(--fl-schnell) var(--fl-kurve),
             background-color var(--fl-schnell),
             color var(--fl-schnell),
             border-color var(--fl-schnell),
             box-shadow var(--fl-schnell);
  box-shadow:0 4px 14px var(--fl-schatten);
}
.wp-element-button:not(.wp-block-search__button):hover, .wp-block-button__link:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 22px var(--fl-schatten-tief);
}
.is-style-outline .wp-block-button__link{ box-shadow:none; }
.is-style-outline .wp-block-button__link:hover{ box-shadow:0 4px 14px var(--fl-schatten); }

/* ══ WooCommerce: Produktkacheln ══ */

.woocommerce ul.products li.product,
.wc-block-product-template__responsive li,
.wc-block-grid__product{ text-align:left; }

.woocommerce ul.products li.product a img,
.wc-block-grid__product-image img,
.wc-block-components-product-image img{
  border-radius:14px;
  background:var(--wp--preset--color--stein);
  transition:transform .65s var(--fl-kurve);
}
.woocommerce ul.products li.product:hover a img,
.wc-block-grid__product:hover .wc-block-grid__product-image img{ transform:scale(1.055); }

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title{
  font-family:var(--wp--preset--font-family--body);
  font-size:var(--wp--preset--font-size--base);
  font-weight:400;
  color:var(--wp--preset--color--ink-dunkel);
  position:relative; display:inline-block; width:fit-content;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title::after,
.wc-block-grid__product-title::after{
  content:""; position:absolute; left:0; right:100%; bottom:-3px; height:1.5px;
  background:var(--wp--preset--color--sonne);
  transition:right .38s var(--fl-kurve);
}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title::after,
.wc-block-grid__product:hover .wc-block-grid__product-title::after{ right:0; }

.woocommerce ul.products li.product .price,
.wc-block-grid__product-price,
.wc-block-components-product-price{
  font-family:var(--wp--preset--font-family--heading);
  font-weight:500;
  font-variant-numeric:tabular-nums;
  color:var(--wp--preset--color--ink-dunkel);
}
.woocommerce ul.products li.product .price del{
  opacity:.6; font-weight:300; font-size:.88em;
}
.woocommerce ul.products li.product .price ins{
  text-decoration:none; color:var(--wp--preset--color--sonne-text);
}

/* Marke über dem Titel (von functions.php ausgegeben) */
.finnlio-loop-marke{
  display:block;
  font-family:var(--wp--preset--font-family--heading);
  font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--wp--preset--color--sonne-text);
  margin-top:14px;
}

/* Abzeichen */
.woocommerce span.onsale,
.wc-block-grid__product-onsale{
  position:absolute; top:12px; left:12px; right:auto;
  min-width:0; min-height:0; line-height:1; padding:6px 12px;
  border-radius:999px;
  font-family:var(--wp--preset--font-family--heading);
  font-size:10px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  background:var(--wp--preset--color--sonne-hell);
  color:var(--wp--preset--color--sonne-text);
  backdrop-filter:blur(4px);
}

/* Pflichtangaben zum Preis (PAngV) – nie ausblenden */
.finnlio-preisangaben{
  font-size:var(--wp--preset--font-size--xs);
  color:var(--wp--preset--color--taupe);
  line-height:1.5;
  margin-top:3px;
}
.finnlio-preisangaben a{
  color:inherit;
  text-decoration-color:var(--wp--preset--color--linie-stark);
  text-underline-offset:2px;
}
.finnlio-preisangaben--lager b{
  color:var(--wp--preset--color--sage-text); font-weight:600;
  display:inline-flex; align-items:center; gap:6px;
}
.finnlio-preisangaben--lager b::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--wp--preset--color--sage);
}

/* ══ Produktseite ══ */

/* Angaben unter dem Kaufknopf. WooCommerce setzt Artikelnummer, Kategorien,
   Schlagwörter und Marke in eine durchlaufende Zeile — untereinander mit
   abgesetzter Beschriftung ist das lesbar. */
.finnlio-produktmeta{
  display:grid; gap:7px;
  margin-top:var(--wp--preset--spacing--30);
  padding-top:var(--wp--preset--spacing--20);
  border-top:1px solid var(--wp--preset--color--linie);
  font-size:var(--wp--preset--font-size--sm);
  line-height:1.5;
  color:var(--wp--preset--color--taupe);
}
.finnlio-produktmeta > span{ display:block; }
.finnlio-produktmeta a{
  color:var(--wp--preset--color--ink-dunkel);
  text-decoration-color:var(--wp--preset--color--linie-stark);
  text-underline-offset:2px;
}
.finnlio-produktmeta a:hover{ text-decoration-color:var(--wp--preset--color--sonne); }
.finnlio-produktmeta .sku{
  font-variant-numeric:tabular-nums;
  color:var(--wp--preset--color--ink-dunkel);
}

.finnlio-warnhinweis{
  background:var(--wp--preset--color--sonne-hell);
  border-left:3px solid var(--wp--preset--color--sonne);
  border-radius:0 11px 11px 0;
  padding:15px 19px;
  margin:var(--wp--preset--spacing--30) 0;
  font-size:var(--wp--preset--font-size--sm);
}
.finnlio-warnhinweis strong{
  color:var(--wp--preset--color--sonne-text);
  display:block; margin-bottom:4px;
}

.finnlio-produktdetails{
  border-top:1px solid var(--wp--preset--color--linie);
  margin-top:var(--wp--preset--spacing--30);
  padding-top:var(--wp--preset--spacing--30);
}
.finnlio-produktdetails dl{
  display:grid; grid-template-columns:minmax(9.5rem,auto) 1fr;
  gap:12px 28px; margin:0;
}
.finnlio-produktdetails dt{ font-weight:600; color:var(--wp--preset--color--ink-dunkel); }
.finnlio-produktdetails dd{ margin:0; }

.finnlio-gpsr{
  margin-top:var(--wp--preset--spacing--30);
  background:var(--wp--preset--color--cream-tief);
  border:1px solid var(--wp--preset--color--linie);
  border-radius:12px;
  padding:16px 19px;
  font-size:var(--wp--preset--font-size--sm);
  color:var(--wp--preset--color--taupe);
}
.finnlio-gpsr strong{
  display:block; color:var(--wp--preset--color--ink-dunkel); margin-bottom:5px;
}

/* Galerie */
.woocommerce div.product div.images img{
  border-radius:18px;
  box-shadow:0 14px 40px var(--fl-schatten);
}
.woocommerce div.product div.images .flex-control-thumbs li img{
  border-radius:11px; box-shadow:none;
  border:1.5px solid var(--wp--preset--color--linie);
  transition:border-color var(--fl-schnell), transform var(--fl-schnell) var(--fl-kurve);
}
.woocommerce div.product div.images .flex-control-thumbs li img:hover{ transform:translateY(-2px); }
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active{
  border-color:var(--wp--preset--color--sonne);
}

/* ══ Ziehbares Regal ══
   Klasse „finnlio-rail" im Block-Editor unter „Zusätzliche CSS-Klasse" an eine
   Produktliste vergeben. assets/js/finnlio.js macht sie mit der Maus ziehbar. */

.finnlio-rail ul.products,
.finnlio-rail .wp-block-post-template,
.finnlio-rail .wc-block-product-template,
.finnlio-rail .wc-block-grid__products{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:22px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:14px;
  cursor:grab;
  scrollbar-width:thin;
  scrollbar-color:var(--wp--preset--color--linie-stark) transparent;
}
.finnlio-rail ul.products::-webkit-scrollbar,
.finnlio-rail .wc-block-grid__products::-webkit-scrollbar,
.finnlio-rail .wp-block-post-template::-webkit-scrollbar{ height:5px; }
.finnlio-rail ul.products::-webkit-scrollbar-thumb,
.finnlio-rail .wc-block-grid__products::-webkit-scrollbar-thumb,
.finnlio-rail .wp-block-post-template::-webkit-scrollbar-thumb{
  background:var(--wp--preset--color--linie-stark); border-radius:9px;
}
.finnlio-rail li,
.finnlio-rail .wc-block-grid__product{
  flex:0 0 252px !important; scroll-snap-align:start; margin:0 !important;
}
.finnlio-rail.finnlio-zieht ul.products,
.finnlio-rail.finnlio-zieht .wc-block-grid__products,
.finnlio-rail.finnlio-zieht .wp-block-post-template{ cursor:grabbing; scroll-snap-type:none; }
.finnlio-rail.finnlio-zieht img{ pointer-events:none; }

/* ══ Produktfilter (Markup aus dem Plugin FINNLIO Core) ══
   Auf dem Handy hinter einem Schalter, ab 900 px offen als Zeile über dem
   Raster. Ohne JavaScript ist der Inhalt immer offen und der Absenden-Knopf
   sichtbar — der Filter funktioniert dann wie jedes andere Formular. */

.finnlio-filter{
  margin:0 0 var(--wp--preset--spacing--30);
  padding-bottom:var(--wp--preset--spacing--20);
  border-bottom:1px solid var(--wp--preset--color--linie);
}

.finnlio-filter__schalter{
  display:none;
  align-items:center; gap:9px;
  min-height:44px; padding:0 18px;
  font-family:var(--wp--preset--font-family--heading);
  font-size:14px; letter-spacing:.02em;
  color:var(--wp--preset--color--ink-dunkel);
  background:var(--wp--preset--color--weiss);
  border:1px solid var(--wp--preset--color--linie-stark);
  border-radius:999px; cursor:pointer;
  transition:border-color var(--fl-schnell);
}
.finnlio-filter__schalter:hover{ border-color:var(--wp--preset--color--taupe); }
/* Nur dort, wo der Filter auch eingeklappt wird. Auf breiten Schirmen steht
   er offen, ein Schalter daneben wäre eine Taste ohne Wirkung. */
@media (max-width:900px){
  .finnlio-hat-js .finnlio-filter__schalter{ display:inline-flex; }
}

/* Der Punkt sagt: hier ist etwas eingestellt. */
.finnlio-filter__punkt{
  width:7px; height:7px; border-radius:50%;
  background:var(--wp--preset--color--sonne);
}

.finnlio-filter__inhalt{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap:var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
  align-items:start;
}
.finnlio-hat-js .finnlio-filter__inhalt[hidden]{ display:none; }

.finnlio-filter__gruppe{
  margin:0; padding:0; border:0; min-width:0;
}
.finnlio-filter__gruppe legend{
  padding:0 0 9px;
  font-family:var(--wp--preset--font-family--heading);
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--wp--preset--color--taupe);
}
.finnlio-filter__gruppe label{
  display:grid; grid-template-columns:auto 1fr auto; gap:9px;
  align-items:center;
  padding:5px 0;
  font-size:var(--wp--preset--font-size--sm);
  color:var(--wp--preset--color--ink-dunkel);
  cursor:pointer;
}
.finnlio-filter__gruppe input[type=checkbox]{
  width:17px; height:17px; margin:0;
  accent-color:var(--wp--preset--color--sonne);
  cursor:pointer;
}
.finnlio-filter__gruppe label b{
  font-weight:400; font-variant-numeric:tabular-nums;
  font-size:12.5px; color:var(--wp--preset--color--taupe);
}

/* Preis */
.finnlio-filter__spanne{
  display:flex; align-items:center; gap:8px;
}
.finnlio-filter__spanne label{ display:block; padding:0; }
.finnlio-filter__spanne input{
  box-sizing:border-box;
  width:100%; min-width:0; max-width:88px;
  height:38px; padding:0 10px;
  font-family:inherit; font-size:14px;
  font-variant-numeric:tabular-nums;
  color:var(--wp--preset--color--ink-dunkel);
  background:var(--wp--preset--color--weiss);
  border:1px solid var(--wp--preset--color--linie-stark);
  border-radius:999px;
}
.finnlio-filter__waehrung{
  font-size:14px; color:var(--wp--preset--color--taupe);
}

.finnlio-filter__fuss{
  display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center;
  grid-column:1 / -1;
}
.finnlio-filter__anwenden{
  min-height:42px; padding:0 22px;
  font-family:var(--wp--preset--font-family--heading);
  font-size:14.5px; letter-spacing:.02em;
  color:var(--wp--preset--color--cream);
  background:var(--wp--preset--color--ink-dunkel);
  border:none; border-radius:999px; cursor:pointer;
}
/* Mit JavaScript wird beim Ankreuzen sofort abgeschickt – der Knopf ist
   dann nur noch für Tastaturbedienung da und darf Platz sparen. */
.finnlio-hat-js .finnlio-filter__anwenden{
  position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
}
.finnlio-hat-js .finnlio-filter__anwenden:focus-visible{
  position:static; width:auto; height:auto; clip-path:none;
}
.finnlio-filter__zuruecksetzen{
  font-size:var(--wp--preset--font-size--sm);
  color:var(--wp--preset--color--taupe);
  text-underline-offset:3px;
}

@media (max-width:900px){
  .finnlio-filter__inhalt{
    grid-template-columns:repeat(auto-fit, minmax(min(150px, 45%), 1fr));
    padding-top:var(--wp--preset--spacing--20);
  }
  .finnlio-hat-js .finnlio-filter__inhalt{ padding-top:14px; }
}

/* ══ Altersfilter (Markup aus dem Plugin FINNLIO Core) ══ */

.finnlio-altersfilter{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:var(--wp--preset--spacing--20) 0;
  border-top:1px solid var(--wp--preset--color--linie);
  border-bottom:1px solid var(--wp--preset--color--linie);
  margin-bottom:var(--wp--preset--spacing--40);
}
.finnlio-altersfilter label{
  font-family:var(--wp--preset--font-family--heading);
  font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--wp--preset--color--taupe); white-space:nowrap;
}
.finnlio-altersfilter output{
  font-family:var(--wp--preset--font-family--heading);
  font-weight:500; font-size:13.5px; white-space:nowrap;
  color:var(--wp--preset--color--sonne-text);
  font-variant-numeric:tabular-nums;
}
.finnlio-altersfilter input[type=range]{
  -webkit-appearance:none; appearance:none; background:none;
  flex:1; min-width:130px; max-width:260px; height:22px; cursor:pointer;
}
.finnlio-altersfilter input[type=range]::-webkit-slider-runnable-track{
  height:3px; border-radius:9px; background:var(--wp--preset--color--linie-stark);
}
.finnlio-altersfilter input[type=range]::-moz-range-track{
  height:3px; border-radius:9px; background:var(--wp--preset--color--linie-stark);
}
.finnlio-altersfilter input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:17px; height:17px; border-radius:50%;
  background:var(--wp--preset--color--sonne); margin-top:-7px;
  border:2.5px solid var(--wp--preset--color--cream);
  box-shadow:0 1px 5px rgba(195,132,50,.5);
  transition:transform .18s var(--fl-kurve);
}
.finnlio-altersfilter input[type=range]:hover::-webkit-slider-thumb{ transform:scale(1.16); }
.finnlio-altersfilter input[type=range]::-moz-range-thumb{
  width:17px; height:17px; border-radius:50%;
  background:var(--wp--preset--color--sonne);
  border:2.5px solid var(--wp--preset--color--cream);
  box-shadow:0 1px 5px rgba(195,132,50,.5);
}
/* Ohne JavaScript bleibt der Absenden-Knopf sichtbar und der Filter benutzbar */
.finnlio-altersfilter button[type=submit]{
  font-family:var(--wp--preset--font-family--heading);
  font-size:13px; letter-spacing:.04em;
  border:1px solid var(--wp--preset--color--linie-stark);
  background:var(--wp--preset--color--weiss);
  color:var(--wp--preset--color--ink);
  border-radius:999px; padding:9px 18px; cursor:pointer;
  transition:border-color var(--fl-schnell), transform var(--fl-schnell) var(--fl-kurve);
}
.finnlio-altersfilter button[type=submit]:hover{
  border-color:var(--wp--preset--color--taupe); transform:translateY(-1px);
}
.finnlio-hat-js .finnlio-altersfilter button[type=submit]{ display:none; }
.finnlio-altersfilter .finnlio-treffer{
  margin-left:auto; font-size:12.5px; color:var(--wp--preset--color--taupe);
  font-variant-numeric:tabular-nums;
}
li.finnlio-ausgefiltert{ display:none !important; }
li.finnlio-eingeblendet{ animation:finnlio-rein .42s var(--fl-kurve) both; }
@keyframes finnlio-rein{
  from{ opacity:.45; transform:translateY(9px); }
  to{ opacity:1; transform:none; }
}

/* ══ Fuß ══ */

.wp-block-site-title a{ text-decoration:none; }

/* ══ Kategoriekacheln (Muster „Kategoriekacheln") ══
   Ersetzen die Kategorieliste von WooCommerce. Kein Beitragsbild nötig, damit
   nie ein grauer WooCommerce-Platzhalter erscheint. */

.finnlio-kacheln{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(152px, 100%), 1fr));
  gap:clamp(10px, 2vw, 18px);
}
.finnlio-kachel{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:clamp(168px, 27vw, 250px);
  padding:16px 17px;
  border-radius:20px 20px 34% 34% / 20px 20px 11% 11%;
  background:var(--wp--preset--color--cream-tief);
  color:var(--wp--preset--color--ink-dunkel);
  text-decoration:none; overflow:hidden; isolation:isolate;
  transition:transform var(--fl-mittel) var(--fl-kurve),
             box-shadow var(--fl-mittel) var(--fl-kurve),
             background-color var(--fl-mittel);
}
.finnlio-kachel:nth-child(2n){ background:var(--wp--preset--color--stein); }
.finnlio-kachel:nth-child(4n){ background:var(--wp--preset--color--sage-hell); }
.finnlio-kachel:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 38px var(--fl-schatten);
}
.finnlio-kachel__motiv{
  position:absolute; top:-6%; right:-4%; width:60%; height:auto; z-index:-1;
  color:var(--wp--preset--color--taupe); opacity:.28;
  transition:transform var(--fl-langsam) var(--fl-kurve), opacity var(--fl-mittel);
}
.finnlio-kachel:hover .finnlio-kachel__motiv{ transform:scale(1.09) rotate(-3deg); opacity:.42; }
.finnlio-kachel__text{ display:block; }
.finnlio-kachel__titel{
  display:block;
  font-family:var(--wp--preset--font-family--heading);
  font-size:clamp(1.05rem, 2.6vw, 1.4rem);
  font-weight:400; line-height:1.2;
}
.finnlio-kachel__unter{
  display:block; margin-top:3px;
  font-size:var(--wp--preset--font-size--xs);
  color:var(--wp--preset--color--taupe);
}
.finnlio-kachel__pfeil{
  position:absolute; top:15px; right:15px;
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--wp--preset--color--weiss);
  color:var(--wp--preset--color--sonne-text);
  box-shadow:0 2px 8px var(--fl-schatten);
  transition:transform var(--fl-mittel) var(--fl-kurve);
}
.finnlio-kachel__pfeil svg{ width:16px; height:16px; }
.finnlio-kachel:hover .finnlio-kachel__pfeil{ transform:translateX(3px); }

/* ══ Produktraster ══
   WooCommerce rechnet Spaltenbreiten in Prozent mit Float aus und fällt auf dem
   Handy auf eine Spalte mit übergroßen Bildern zurück. Stattdessen ein Gitter,
   das sich an der Kachelbreite orientiert – zwei Spalten auf dem Handy. */

.woocommerce ul.products,
.wc-block-grid__products{
  /* !important, weil WooCommerce seine Blockstile erst beim Rendern des Blocks
     einreiht - also weiter unten im Dokument als dieses Stylesheet. Ohne das
     gewinnt dort display:flex und die Kacheln stehen wieder einspaltig. */
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(min(212px, 47%), 1fr));
  gap:clamp(16px, 2.4vw, 30px) clamp(11px, 2vw, 26px);
  margin:0; padding:0; list-style:none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after{ content:none; display:none; }
.woocommerce ul.products li.product,
.wc-block-grid__products .wc-block-grid__product{
  float:none !important; clear:none !important;
  width:auto !important; max-width:none !important; min-width:0;
  margin:0 !important; padding:0;
}
.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after{ content:none; }
.woocommerce ul.products li.product a img,
.wc-block-grid__product-image img{
  width:100%; height:auto; margin:0;
  aspect-ratio:1; object-fit:cover;
}

/* Kacheln einer Zeile gleich hoch, Kaufknopf immer unten. Ohne das stehen die
   Knöpfe je nach Titellänge auf drei verschiedenen Höhen nebeneinander. */
.woocommerce ul.products li.product,
.wc-block-grid__products .wc-block-grid__product{
  display:flex; flex-direction:column; align-items:stretch;
}
.woocommerce ul.products li.product .button,
.wc-block-grid__product-add-to-cart{
  /* !important gegen die spät eingereihten Blockstile von WooCommerce, die
     hier margin:0 setzen – sonst steht der Knopf wieder direkt unter dem Preis
     statt am unteren Kachelrand. */
  margin-top:auto !important;
}
.wc-block-grid__product-price,
.wc-block-grid__product-title{
  justify-content:flex-start !important;
  text-align:left !important;
}
.woocommerce ul.products li.product .button,
.wc-block-grid__product-add-to-cart .wp-block-button__link{
  /* WooCommerce rechnet seine Knöpfe mit content-box – width:100% plus Polster
     ergibt sonst eine Kachel, die 30 px über ihre Gitterzelle hinausragt. */
  box-sizing:border-box;
  display:block; width:100%; text-align:center;
  margin-bottom:0; padding:11px 14px;
  font-family:var(--wp--preset--font-family--heading);
  font-size:14px; letter-spacing:.02em; line-height:1.25;
  border-radius:999px;
}
.wc-block-grid__product-add-to-cart{ width:100%; }

/* Abzeichen gehört nach links oben – WooCommerce setzt es rechts, und zwar
   aus einem Stylesheet, das erst beim Rendern des Blocks eingereiht wird. */
.woocommerce span.onsale,
.wc-block-grid__product-onsale{
  left:12px !important; right:auto !important;
  top:12px !important; margin:0 !important;
}

/* ══ Ziehbares Regal auf dem Handy ══ */

@media (max-width:781px){
  .finnlio-rail li,
  .finnlio-rail .wc-block-grid__product{ flex:0 0 68vw !important; }
}

/* ══ Kopf ══
   Bleibt beim Scrollen oben stehen und schrumpft dabei. Das gibt auf dem Handy
   den Warenkorb zurück, ohne dass man nach oben scrollen muss. */

/* Der Blockeditor legt um jedes Vorlagenteil ein eigenes <div>. Das ist genau
   so hoch wie der Kopf, deshalb hat position:sticky am Kopf selbst keinen Weg
   zum Kleben – der Wert gehört an dieses <div>, dessen umgebender Block
   .wp-site-blocks über die ganze Seite reicht. */
.wp-block-template-part:has(> .finnlio-kopf-huelle){
  position:sticky; top:0; z-index:90;
}
.finnlio-kopf-huelle{ position:relative; }
/* Die Hülle ist eine Fluss-Gruppe: WordPress setzt zwischen ihren Kindern
   einen Blockabstand. Der schob den Kopf 18 px nach unten, und beim Scrollen
   klaffte über der klebenden Leiste ein Spalt, durch den die Seite lief. */
.finnlio-kopf-huelle > * + *{ margin-block-start:0; }

.finnlio-kopf-huelle > header{
  /* Bewusst hier und nicht im Blockmarkup: ein Inline-Polster würde die
     Schrumpfregel überstimmen, der Kopf bliebe beim Scrollen gleich hoch. */
  padding-top:14px; padding-bottom:14px;
  transition:padding-top var(--fl-mittel) var(--fl-kurve),
             padding-bottom var(--fl-mittel) var(--fl-kurve),
             box-shadow var(--fl-mittel);
}
.finnlio-kopf-huelle.finnlio-geschrumpft > header{
  padding-top:7px; padding-bottom:7px;
  box-shadow:0 6px 24px var(--fl-schatten);
}
.finnlio-kopf-huelle.finnlio-geschrumpft .finnlio-logo svg{ height:27px; }
.finnlio-logo svg{ transition:height var(--fl-mittel) var(--fl-kurve); }

/* Die Vertrauensleiste rollt beim Scrollen weg, damit der Kopf flach wird. */
.finnlio-vertrauen{
  transition:max-height var(--fl-mittel) var(--fl-kurve),
             opacity var(--fl-schnell),
             padding var(--fl-mittel) var(--fl-kurve);
  max-height:4rem; overflow:hidden;
}
.finnlio-geschrumpft .finnlio-vertrauen{
  /* Die Polsterwerte stehen inline im Blockmarkup – daher hier !important.
     Der Rahmen muss mit weg, sonst bleibt eine 1-px-Zeile stehen. */
  max-height:0; opacity:0; border-bottom-width:0;
  padding-top:0 !important; padding-bottom:0 !important;
}

/* Tippziele im Kopf mindestens 44 px – Suchknopf, Konto, Warenkorb */
.finnlio-kopf-icons .wp-block-search__button,
.finnlio-kopf-icons .wc-block-mini-cart__button,
.finnlio-kopf-icons .wp-block-woocommerce-customer-account a{
  min-width:44px; min-height:44px;
  display:inline-flex; align-items:center; justify-content:center;
}
.finnlio-kopf-icons .wp-block-search__button{
  background:none; border:none; padding:0;
  color:var(--wp--preset--color--ink-dunkel);
  box-shadow:none;
}

/* Das Suchfeld in Markenform. Ohne das steht dort der Systemkasten des
   Browsers: eckiger grauer Rahmen, eigene Schrift. */
.finnlio-kopf-icons .wp-block-search__input{
  box-sizing:border-box;
  height:40px; padding:0 16px; margin:0;
  font-family:inherit; font-size:15px;
  color:var(--wp--preset--color--ink-dunkel);
  background:var(--wp--preset--color--weiss);
  border:1px solid var(--wp--preset--color--linie-stark);
  border-radius:999px;
}
.finnlio-kopf-icons .wp-block-search__input::placeholder{
  color:var(--wp--preset--color--taupe); opacity:.75;
}
.finnlio-kopf-icons .wp-block-search__input:focus-visible{
  outline-width:2px; outline-offset:2px;
  border-color:var(--wp--preset--color--taupe);
}

/* ══ Bühne ══
   Sechs Aufnahmen im Wechsel. Sie liegen übereinander, nur die oberste ist
   sichtbar – so gibt es beim Übergang kein Springen und keine Lücke. */

.finnlio-buehne__bild figure{ margin:0; }

.finnlio-buehne__wechsel{
  position:relative; display:block;
  aspect-ratio:16/9; overflow:hidden;
  background:var(--wp--preset--color--stein);
}
.finnlio-buehne__platte{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1.1s var(--fl-kurve);
}
.finnlio-buehne__platte--da{ opacity:1; }
/* Ohne JavaScript trägt nur die erste Platte die Klasse – und die steht. */

/* ══ Tabellen in den Rechtstexten ══
   Dürfen schmal scrollen, statt die ganze Seite breiter zu machen. */

.wp-block-table{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.wp-block-table table{ min-width:26rem; }

/* ══ Archivkopf: Trefferzahl und Sortierung ══
   WooCommerce liefert eine nackte <select>. Die sieht auf jedem
   Betriebssystem anders aus und passt zu keiner Marke. Eigener Rahmen plus
   eigener Pfeil, das Auswahlfeld selbst bleibt ein natives <select> – damit
   bleibt die Bedienung auf dem Handy die gewohnte Rollenliste. */

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{
  margin:0;
}
.woocommerce-products-header + .woocommerce-notices-wrapper + .woocommerce-result-count,
.woocommerce .woocommerce-result-count{
  font-size:var(--wp--preset--font-size--sm);
  color:var(--wp--preset--color--taupe);
}
.woocommerce .woocommerce-ordering{
  position:relative; float:none;
}
.woocommerce .woocommerce-ordering select{
  -webkit-appearance:none; appearance:none;
  box-sizing:border-box;
  width:100%; max-width:100%;
  padding:10px 40px 10px 16px;
  font-family:var(--wp--preset--font-family--heading);
  font-size:14px; letter-spacing:.02em;
  color:var(--wp--preset--color--ink-dunkel);
  background:var(--wp--preset--color--weiss);
  border:1px solid var(--wp--preset--color--linie-stark);
  border-radius:999px;
  cursor:pointer;
  transition:border-color var(--fl-schnell), box-shadow var(--fl-schnell);
}
.woocommerce .woocommerce-ordering select:hover{
  border-color:var(--wp--preset--color--taupe);
}
.woocommerce .woocommerce-ordering::after{
  content:""; position:absolute; right:17px; top:50%;
  width:8px; height:8px; margin-top:-6px;
  border-right:1.6px solid var(--wp--preset--color--taupe);
  border-bottom:1.6px solid var(--wp--preset--color--taupe);
  transform:rotate(45deg);
  pointer-events:none;
}

/* Trefferzahl und Sortierung in einer Zeile, mit Linie darunter */
.woocommerce .woocommerce-result-count{
  float:none; display:block;
}
.woocommerce-page .woocommerce-result-count + .woocommerce-ordering{ margin-top:10px; }

/* Sortierung und Raster standen auf Kante (beide bei y=327 gemessen). */
.woocommerce .woocommerce-ordering{ margin-bottom:var(--wp--preset--spacing--30); }
.woocommerce .woocommerce-result-count{ margin-bottom:var(--wp--preset--spacing--10); }

@media (min-width:601px){
  .woocommerce .woocommerce-result-count{ display:inline-block; }
  .woocommerce .woocommerce-ordering{
    float:right; width:auto; margin-top:-6px;
  }
  .woocommerce .woocommerce-ordering select{ width:auto; }
}

/* ══ Reiter auf der Produktseite ══
   WooCommerce zeichnet Karteikartenreiter mit Rahmen, Rundungen und
   Pseudo-Ecken. Das stammt aus dem Storefront-Erbe und passt nicht. Hier
   stattdessen eine Zeile mit Unterstrich, auf dem Handy seitlich schiebbar. */

.woocommerce div.product .woocommerce-tabs ul.tabs{
  display:flex; flex-wrap:nowrap; gap:4px;
  margin:0 0 var(--wp--preset--spacing--30);
  padding:0 0 1px;
  overflow-x:auto; scrollbar-width:none;
  border-bottom:1px solid var(--wp--preset--color--linie);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar{ display:none; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after{ content:none; display:none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  margin:0; padding:0;
  background:none; border:none; border-radius:0;
  box-shadow:none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{ content:none; display:none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  display:block; white-space:nowrap;
  padding:11px 16px 12px;
  font-family:var(--wp--preset--font-family--heading);
  font-size:14.5px; font-weight:400; letter-spacing:.02em;
  color:var(--wp--preset--color--taupe);
  text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color var(--fl-schnell), border-color var(--fl-schnell);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover{
  color:var(--wp--preset--color--ink-dunkel);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{
  color:var(--wp--preset--color--ink-dunkel);
  border-bottom-color:var(--wp--preset--color--sonne);
}
.woocommerce div.product .woocommerce-tabs .panel{
  margin-bottom:0; padding-top:0;
}
.woocommerce div.product .woocommerce-tabs .panel > h2:first-child{
  /* Die Überschrift wiederholt nur den Reiter darüber. */
  position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
}

/* ══ Newsletter (Formular aus dem Plugin FINNLIO Core) ══ */

.finnlio-newsletter__zeile{
  display:flex; gap:8px; align-items:stretch;
  margin-top:12px;
}
.finnlio-newsletter__zeile input[type=email]{
  flex:1; min-width:0; box-sizing:border-box;
  padding:11px 16px;
  font-family:inherit; font-size:15px;
  color:var(--wp--preset--color--ink-dunkel);
  background:var(--wp--preset--color--weiss);
  border:1px solid var(--wp--preset--color--linie-stark);
  border-radius:999px;
  transition:border-color var(--fl-schnell);
}
.finnlio-newsletter__zeile input[type=email]::placeholder{
  color:var(--wp--preset--color--taupe); opacity:.75;
}
.finnlio-newsletter__zeile input[type=email]:hover,
.finnlio-newsletter__zeile input[type=email]:focus{
  border-color:var(--wp--preset--color--taupe);
}
.finnlio-newsletter__zeile button{
  flex:none; min-height:44px; padding:0 20px;
  font-family:var(--wp--preset--font-family--heading);
  font-size:14.5px; letter-spacing:.03em;
  color:var(--wp--preset--color--cream);
  background:var(--wp--preset--color--ink-dunkel);
  border:none; border-radius:999px; cursor:pointer;
  transition:transform var(--fl-schnell) var(--fl-kurve), box-shadow var(--fl-schnell);
}
.finnlio-newsletter__zeile button:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px var(--fl-schatten-tief);
}
.finnlio-newsletter__hinweis{
  margin:10px 0 0;
  font-size:12.5px; line-height:1.5;
  color:var(--wp--preset--color--taupe);
}
.finnlio-newsletter__hinweis a{ color:inherit; text-underline-offset:2px; }

/* Honigtopf gegen Bots – für Menschen unsichtbar, aber im Baum vorhanden.
   Kein display:none, das füllen manche Bots gerade deshalb aus. */
.finnlio-newsletter__topf{
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}

.finnlio-newsletter__meldung{
  margin:12px 0 0; padding:11px 15px;
  border-radius:12px;
  font-size:var(--wp--preset--font-size--sm); line-height:1.5;
}
.finnlio-newsletter__meldung--gut{
  background:var(--wp--preset--color--sage-hell);
  color:var(--wp--preset--color--sage-text);
}
.finnlio-newsletter__meldung--fehler{
  background:var(--wp--preset--color--sonne-hell);
  color:var(--wp--preset--color--sonne-text);
}

/* ══ Einwilligung ══
   Markup aus dem Plugin FINNLIO Core, Bedienung in assets/js/finnlio.js.
   Bewusst kein Riegel über die ganze Seite: das Banner darf den Laden nicht
   sperren, sonst wäre die Einwilligung nicht freiwillig. */

.finnlio-consent{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  padding:0 12px calc(12px + env(safe-area-inset-bottom));
  pointer-events:none;
  opacity:0; transform:translateY(18px);
  transition:opacity var(--fl-mittel) var(--fl-kurve),
             transform var(--fl-mittel) var(--fl-kurve);
}
.finnlio-consent--da{ opacity:1; transform:none; }

.finnlio-consent__kasten{
  pointer-events:auto;
  max-width:660px; margin:0 auto;
  padding:20px 22px 22px;
  background:var(--wp--preset--color--weiss);
  border:1px solid var(--wp--preset--color--linie);
  border-radius:20px;
  box-shadow:0 18px 50px var(--fl-schatten-tief);
}

.finnlio-consent__titel{
  margin:0 0 8px;
  font-family:var(--wp--preset--font-family--heading);
  font-size:19px; font-weight:400; letter-spacing:.01em;
  color:var(--wp--preset--color--ink-dunkel);
}
.finnlio-consent__text{
  margin:0;
  font-size:14px; line-height:1.55;
  color:var(--wp--preset--color--taupe);
}
.finnlio-consent__text a{
  color:inherit; text-underline-offset:2px;
}

/* Einzelauswahl */
.finnlio-consent__wahl{
  margin-top:16px; padding-top:14px;
  border-top:1px solid var(--wp--preset--color--linie);
  display:grid; gap:12px;
}
.finnlio-consent__zeile{
  display:grid; grid-template-columns:auto 1fr; gap:11px;
  align-items:start;
  font-size:13.5px; line-height:1.5;
  color:var(--wp--preset--color--taupe);
  cursor:pointer;
}
.finnlio-consent__zeile input[type=checkbox]{
  width:19px; height:19px; margin:2px 0 0;
  accent-color:var(--wp--preset--color--sonne);
  cursor:pointer;
}
.finnlio-consent__zeile input[type=checkbox]:disabled{ cursor:default; opacity:.55; }
.finnlio-consent__zeile b{
  display:block; font-weight:600;
  color:var(--wp--preset--color--ink-dunkel);
}

/* Annehmen und Ablehnen sehen gleich aus – Ablehnen darf nicht schwerer
   fallen als Annehmen (Beschluss der Datenschutzkonferenz, 2021). */
.finnlio-consent__knoepfe{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  margin-top:18px;
}
.finnlio-consent__knoepfe button{
  min-height:46px; padding:0 16px;
  font-family:var(--wp--preset--font-family--heading);
  font-size:15px; letter-spacing:.02em;
  color:var(--wp--preset--color--cream);
  background:var(--wp--preset--color--ink-dunkel);
  border:1px solid var(--wp--preset--color--ink-dunkel);
  border-radius:999px; cursor:pointer;
  transition:transform var(--fl-schnell) var(--fl-kurve),
             box-shadow var(--fl-schnell);
}
.finnlio-consent__knoepfe button:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px var(--fl-schatten-tief);
}

.finnlio-consent__feinweg{
  display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center;
  margin-top:14px;
}
.finnlio-consent__mehr,
.finnlio-consent-oeffnen{
  padding:0; border:0; background:none; cursor:pointer;
  font-family:inherit; font-size:13.5px;
  color:var(--wp--preset--color--taupe);
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--wp--preset--color--linie-stark);
}
.finnlio-consent__mehr:hover,
.finnlio-consent-oeffnen:hover{ color:var(--wp--preset--color--ink-dunkel); }

.finnlio-consent__speichern{
  margin-left:auto;
  min-height:40px; padding:0 18px;
  font-family:var(--wp--preset--font-family--heading);
  font-size:14px;
  color:var(--wp--preset--color--ink-dunkel);
  background:none;
  border:1px solid var(--wp--preset--color--linie-stark);
  border-radius:999px; cursor:pointer;
  transition:border-color var(--fl-schnell);
}
.finnlio-consent__speichern:hover{ border-color:var(--wp--preset--color--taupe); }

/* Der Widerrufslink im Fuß steht in einer Navigationsliste. */
footer .finnlio-consent-oeffnen{
  font-size:var(--wp--preset--font-size--sm);
  text-decoration:none;
  color:var(--wp--preset--color--taupe);
}
footer .finnlio-consent-oeffnen:hover{ text-decoration:underline; }

@media (max-width:480px){
  .finnlio-consent__kasten{ padding:17px 17px 19px; border-radius:17px; }
  .finnlio-consent__knoepfe{ grid-template-columns:1fr; }
  .finnlio-consent__speichern{ margin-left:0; width:100%; }
}

/* ══ Markenkacheln (Shortcode aus dem Plugin FINNLIO Core) ══ */

.finnlio-marken__titel{
  margin:var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--20);
}
.finnlio-marken__titel:first-child{ margin-top:0; }

.finnlio-marken{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(248px, 100%), 1fr));
  gap:clamp(12px, 2vw, 20px);
}

.finnlio-marke{
  display:flex; flex-direction:column;
  padding:20px 21px 18px;
  background:var(--wp--preset--color--weiss);
  border:1px solid var(--wp--preset--color--linie);
  border-radius:17px;
  transition:border-color var(--fl-schnell), transform var(--fl-schnell) var(--fl-kurve);
}
.finnlio-marke:hover{
  border-color:var(--wp--preset--color--linie-stark);
  transform:translateY(-2px);
}
.finnlio-marke__name{
  margin:0;
  font-family:var(--wp--preset--font-family--heading);
  font-size:var(--wp--preset--font-size--lg);
  font-weight:400; line-height:1.2;
  color:var(--wp--preset--color--ink-dunkel);
}
.finnlio-marke__land{
  margin:5px 0 0;
  font-family:var(--wp--preset--font-family--heading);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--wp--preset--color--sonne-text);
}
.finnlio-marke__text{
  margin:12px 0 0;
  font-size:var(--wp--preset--font-size--sm);
  line-height:1.55;
  color:var(--wp--preset--color--taupe);
}
.finnlio-marke__link{
  margin-top:auto; padding-top:16px;
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--wp--preset--font-family--heading);
  font-size:13.5px; letter-spacing:.02em;
  color:var(--wp--preset--color--ink-dunkel);
  text-decoration:none;
}
.finnlio-marke__link::after{
  content:""; width:7px; height:7px;
  border-right:1.5px solid var(--wp--preset--color--sonne);
  border-bottom:1.5px solid var(--wp--preset--color--sonne);
  transform:rotate(-45deg);
  transition:transform var(--fl-schnell) var(--fl-kurve);
}
.finnlio-marke__link:hover::after{ transform:rotate(-45deg) translate(2px,2px); }

/* ══ Aufklappbare Abschnitte ══
   Der Details-Block von WordPress, in der Formensprache der Marke. Er klappt
   ohne eine Zeile JavaScript auf und bleibt über die Tastatur bedienbar. */

.wp-block-details{
  border-bottom:1px solid var(--wp--preset--color--linie);
  padding:0;
}
.wp-block-details + .wp-block-details{ margin-top:0; }

.wp-block-details summary{
  position:relative;
  display:block;
  padding:17px 42px 17px 0;
  font-family:var(--wp--preset--font-family--heading);
  font-size:var(--wp--preset--font-size--lg);
  font-weight:400; line-height:1.35;
  color:var(--wp--preset--color--ink-dunkel);
  cursor:pointer;
  list-style:none;
}
.wp-block-details summary::-webkit-details-marker{ display:none; }
.wp-block-details summary::marker{ content:""; }

/* Das Plus wird beim Öffnen zum Minus. */
.wp-block-details summary::after{
  content:""; position:absolute; right:6px; top:50%;
  width:13px; height:13px; margin-top:-6px;
  background:
    linear-gradient(var(--wp--preset--color--sonne) 0 0) center/13px 1.6px no-repeat,
    linear-gradient(var(--wp--preset--color--sonne) 0 0) center/1.6px 13px no-repeat;
  transition:transform var(--fl-mittel) var(--fl-kurve);
}
.wp-block-details[open] summary::after{
  background:linear-gradient(var(--wp--preset--color--sonne) 0 0) center/13px 1.6px no-repeat;
  transform:rotate(180deg);
}
.wp-block-details summary:hover{ color:var(--wp--preset--color--sonne-text); }

.wp-block-details > *:not(summary){
  margin-top:0; margin-bottom:14px;
  color:var(--wp--preset--color--taupe);
}
.wp-block-details > *:not(summary):last-child{ margin-bottom:20px; }

/* ══ Reaktionsfähig ══ */

/* Der Navigationsblock schaltet von Haus aus erst unter 600 px auf die
   Menütaste um. Sechs Einträge, Wortmarke und drei Icons passen aber bis
   ungefähr 900 px nicht in eine Zeile — bei 768 px rutschte „Über uns" in
   eine zweite Zeile und der Kopf wurde doppelt so hoch. Deshalb gilt die
   Menütaste hier bis 900 px. */
@media (max-width:900px){
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){
    display:none;
  }
  .wp-block-navigation__responsive-container-open:not(.always-shown){ display:flex; }
  .wp-block-navigation__responsive-container-close:not(.always-shown){ display:flex; }

  /* Reihenfolge im Kopf: Menütaste ganz links, dann die Bildmarke, die Icons
     rechts. Mit dem voreingestellten space-between säße die Menütaste als
     mittleres von drei Elementen mitten im Kopf. */
  .finnlio-kopf-huelle header > .wp-block-group{
    justify-content:flex-start;
    gap:12px;
  }
  .finnlio-kopf-huelle header > .wp-block-group > nav.wp-block-navigation{ order:-1; }
  .finnlio-kopf-huelle header > .wp-block-group > .finnlio-kopf-icons{ margin-left:auto; }
  .finnlio-kopf-huelle .wp-block-navigation__responsive-container-open{
    align-items:center; justify-content:center;
    min-width:44px; min-height:44px; margin-left:-10px; padding:0;
  }
}

@media (max-width:600px){
  /* Das geöffnete Suchfeld legt sich über die Kopfzeile. Inline nebeneinander
     schiebt es bei 390 px den Warenkorb aus dem Bild. */
  .finnlio-kopf-huelle header > .wp-block-group{ position:relative; }
  .finnlio-kopf-icons .wp-block-search:not(.wp-block-search__searchfield-hidden){
    position:absolute; left:0; right:0; top:50%;
    transform:translateY(-50%);
    z-index:3;
    /* Deckt Bildmarke und Menütaste ab, solange gesucht wird – ohne Grund
       schimmern sie zwischen Feld und Knopf durch. */
    background:var(--wp--preset--color--cream);
  }
  .finnlio-kopf-icons .wp-block-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper{
    width:100% !important; gap:6px;
  }
  .finnlio-kopf-icons .wp-block-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__input{
    flex:1 1 auto; width:auto !important;
  }

  .finnlio-logo .finnlio-wortmarke{
    position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
  }
  .finnlio-kopf-icons{ gap:0 !important; }
}

@media (max-width:781px){
  .finnlio-horizont{ height:30px; }
  .finnlio-sonne{ width:230px; right:-70px; top:90px; }
  .finnlio-produktdetails dl{ grid-template-columns:1fr; gap:3px 0; }
  .finnlio-produktdetails dd{ margin-bottom:13px; }
  .finnlio-altersfilter .finnlio-treffer{ margin-left:0; width:100%; }

  /* Bühne: erst Text, dann Bild – und das Bild flach halten, damit die
     Überschrift und die Knöpfe ohne Scrollen sichtbar sind. */
  .finnlio-buehne .wp-block-columns{ gap:var(--wp--preset--spacing--30); }
  .finnlio-buehne__bild{ order:2; }
  .finnlio-buehne__wechsel{ aspect-ratio:16/9; }

  /* Vertrauensleiste: eine Zeile, notfalls seitlich schiebbar */
  .finnlio-trust{
    flex-wrap:nowrap; justify-content:flex-start;
    overflow-x:auto; scrollbar-width:none;
    font-size:11px; letter-spacing:.07em;
    margin:0; padding-bottom:1px;
  }
  .finnlio-trust::-webkit-scrollbar{ display:none; }
  .finnlio-trust > *{ padding:0 11px; white-space:nowrap; }
  .finnlio-trust > *:first-child{ padding-left:0; }

  /* Fuß: Service und Rechtliches nebeneinander statt vier Blöcke untereinander */
  footer.wp-block-group > .wp-block-columns{
    display:grid; grid-template-columns:1fr 1fr;
    gap:var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
  }
  footer.wp-block-group > .wp-block-columns > .wp-block-column{
    flex-basis:auto !important; min-width:0;
  }
  footer.wp-block-group > .wp-block-columns > .wp-block-column:first-child,
  footer.wp-block-group > .wp-block-columns > .wp-block-column:last-child{
    grid-column:1 / -1;
  }
  /* Fußlinks mit genug Luft zum Antippen */
  footer .wp-block-navigation__container{ gap:2px; }
  footer .wp-block-navigation-item__content{
    display:block; padding:8px 0 7px;
  }

  /* Knöpfe füllen die Zeile – auf dem Handy leichter zu treffen */
  .finnlio-buehne .wp-block-buttons{ gap:10px; }
  .finnlio-buehne .wp-block-button{ flex:1 1 46%; }
  .finnlio-buehne .wp-block-button__link{ width:100%; text-align:center; }

  /* Warenkorb-Schublade über die ganze Breite */
  .wc-block-components-drawer{ max-width:100%; }
  .wc-block-mini-cart__drawer .wc-block-components-drawer__screen-overlay{ backdrop-filter:blur(2px); }

  /* Produktseite: Galerie und Angaben ohne Seitenrand-Verlust */
  .woocommerce div.product div.images,
  .woocommerce div.product div.summary{ float:none; width:100%; margin-bottom:var(--wp--preset--spacing--30); }
}

@media (max-width:480px){
  /* Drei Angaben passen nicht mehr in eine Zeile. Die Versandkosten sind die
     wichtigste Angabe, die Herkunft steht auch im Fuß. */
  .finnlio-trust > *:first-child{ display:none; }
  .finnlio-trust > *:nth-child(2)::before{ content:none; }

  /* Beide Knöpfe der Bühne über die volle Breite – „Bestseller ansehen"
     brach sonst um und die Knöpfe standen unterschiedlich hoch. */
  .finnlio-buehne .wp-block-button{ flex:1 1 100%; }

  /* Zwei Spalten bleiben, aber die Kachelinnereien werden kompakter */
  .woocommerce ul.products,
  .wc-block-grid__products{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .wc-block-grid__product-title{ font-size:var(--wp--preset--font-size--sm); }
  .finnlio-loop-marke{ margin-top:10px; font-size:10px; }
  .finnlio-preisangaben{ font-size:11.5px; }
  .woocommerce ul.products li.product .button,
  .wc-block-grid__product-add-to-cart .wp-block-button__link{
    font-size:13px; padding:10px 12px;
  }
  .finnlio-bogen,
  .finnlio-bogen img{ border-radius:16px 16px 34% 34% / 16px 16px 9% 9%; }
  .finnlio-kachel{ padding:13px 14px; border-radius:16px 16px 30% 30% / 16px 16px 9% 9%; }
}

/* ══ Einblenden beim Scrollen ══
   Wird von assets/js/finnlio.js gesetzt. Ohne JavaScript bleibt alles sichtbar. */

.finnlio-hat-js .finnlio-aufdecken{
  opacity:0; transform:translateY(18px);
  transition:opacity var(--fl-langsam) var(--fl-kurve),
             transform var(--fl-langsam) var(--fl-kurve);
}
.finnlio-hat-js .finnlio-aufdecken.finnlio-sichtbar{ opacity:1; transform:none; }

/* ══ Klebender Kaufknopf auf der Produktseite (nur Handy) ══ */

.finnlio-kaufleiste{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  display:none; align-items:center; gap:12px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--wp--preset--color--weiss) 94%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--wp--preset--color--linie);
  transform:translateY(105%);
  transition:transform var(--fl-mittel) var(--fl-kurve);
}
.finnlio-kaufleiste.finnlio-sichtbar{ transform:none; }
.finnlio-kaufleiste__preis{
  font-family:var(--wp--preset--font-family--heading);
  font-weight:500; font-variant-numeric:tabular-nums;
  line-height:1.2; white-space:nowrap;
}
.finnlio-kaufleiste__preis small{
  display:block; font-size:10.5px; font-weight:400;
  letter-spacing:.02em; color:var(--wp--preset--color--taupe);
}
.finnlio-kaufleiste button{
  flex:1; min-height:46px;
  font-family:var(--wp--preset--font-family--heading);
  font-size:15px; letter-spacing:.03em;
  border:none; border-radius:999px; cursor:pointer;
  background:var(--wp--preset--color--ink-dunkel);
  color:var(--wp--preset--color--cream);
}
@media (max-width:781px){
  .woocommerce-page.single-product .finnlio-kaufleiste{ display:flex; }
  /* Platz, damit die Leiste den Fuß nicht verdeckt */
  .single-product footer.wp-block-group{ padding-bottom:82px; }
}

/* ── Kärtchen und Kästen in Textseiten ──
   Aus ":::karten" beziehungsweise ":::kasten" im Markdown. Sie brechen die
   langen Fließtextseiten auf, ohne dass im Editor etwas von Hand gebaut
   werden muss. */
.finnlio-karten{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr));
  /* Ohne diese Zeile zentriert das Blocklayout die Kärtchen in der Reihe
     senkrecht – dann stehen ungleich hohe Kärtchen versetzt. */
  align-items:stretch;
  margin-block:28px;
}
/* Das Flusslayout der Blockvorlage setzt jedem Kärtchen ab dem zweiten einen
   oberen Abstand. Im Gitter schiebt der die Kärtchen einer Reihe gegeneinander,
   deshalb hier weg. Drei Klassen, damit die Regel gewinnt. */
.wp-block-group.finnlio-karten > *{ margin-block:0; }
/* Die Breitstellung der Blockvorlage geht bis 1400 Pixel – für Kärtchen ist
   das zu viel. Drei Klassen schlagen die Regel des Blocklayouts. */
.wp-block-group.finnlio-karten.alignwide{ max-width:62rem; }
.wp-block-group.finnlio-karten--schritte.alignwide{ max-width:72rem; }
.finnlio-karten--schritte{ grid-template-columns:repeat(auto-fit, minmax(13rem, 1fr)); }
.finnlio-karte{
  padding:26px 24px 24px;
  border:1px solid var(--wp--preset--color--linie);
  border-radius:18px;
  background:var(--wp--preset--color--weiss);
  box-shadow:0 6px 20px var(--fl-schatten);
}
.finnlio-karte > *{ margin-block:0; }
.finnlio-karte > * + *{ margin-block-start:10px; }
.finnlio-karte__titel{
  font-size:1.15rem; line-height:1.25; letter-spacing:.01em;
  color:var(--wp--preset--color--ink-dunkel);
}
.finnlio-karte p{ font-size:.94rem; line-height:1.65; color:var(--wp--preset--color--ink); }
.finnlio-karte ul, .finnlio-karte ol{ font-size:.94rem; line-height:1.6; padding-left:1.1em; }
.finnlio-karte li + li{ margin-top:6px; }
.finnlio-karte a{ color:var(--wp--preset--color--sonne-text); }

/* Durchgezählte Kärtchen: die Zahl steckt in der Überschrift, nicht im Text,
   damit Vorlesewerkzeuge sie nicht mitlesen. */
.finnlio-karten--schritte{ counter-reset:finnlio-schritt; }
.finnlio-karten--schritte .finnlio-karte{ counter-increment:finnlio-schritt; padding-top:22px; }
.finnlio-karten--schritte .finnlio-karte__titel::before{
  content:counter(finnlio-schritt);
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; margin-bottom:12px;
  border-radius:999px;
  background:var(--wp--preset--color--sonne-hell);
  color:var(--wp--preset--color--sonne-text);
  font-size:.85rem; font-weight:600; font-variant-numeric:tabular-nums;
}

.finnlio-kasten{
  margin-block:28px; padding:24px 26px;
  border-radius:18px;
  border-left:3px solid var(--wp--preset--color--sonne);
  background:var(--wp--preset--color--sage-hell);
}
.finnlio-kasten > *{ margin-block:0; }
.finnlio-kasten > * + *{ margin-block-start:12px; }
.finnlio-kasten p{ font-size:.97rem; line-height:1.7; }
.finnlio-kasten h2, .finnlio-kasten h3{ font-size:1.1rem; }
.finnlio-kasten ul{ padding-left:1.1em; font-size:.97rem; }

.finnlio-seitenbild{ margin-block:32px; }
.finnlio-seitenbild img{ width:100%; height:auto; display:block; }
.finnlio-seitenbild figcaption{
  margin-top:10px; font-size:.85rem; color:var(--wp--preset--color--taupe);
}

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .finnlio-sonne{ transform:none !important; }
}