/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Version: 3.6.3
 * Text Domain: blocksy
 */

/* ===========================================================================
   IDAKERA STUDIO -- verspielte Gestaltung
   ---------------------------------------------------------------------------
   Fassung 3.4, 2026-10-03. Angelehnt an den Corkle-Entwurf: warmes Cremeweiss,
   kraeftige Bonbonfarben, runde Formen, Fredoka als Auszeichnungsschrift,
   Nunito als Lesetext.

   DREI STELLEN, AN DENEN BEWUSST ABGEWICHEN WURDE

   1. SCHRIFTEN WERDEN SELBST GEHOSTET, NICHT VON GOOGLE GELADEN.
      Die Vorlage bindet Fredoka und Nunito ueber fonts.googleapis.com ein.
      Abschnitt 4 der Datenschutzerklaerung sagt woertlich zu, dass Schriften
      vom eigenen Server kommen und NICHT von Google Fonts. Ein Google-Link
      wuerde die eigene Datenschutzerklaerung zur Falschaussage machen und in
      Deutschland abmahnfaehig die IP jedes Besuchers an Google uebertragen.
      Beide Schriften stehen unter der SIL Open Font License und duerfen
      selbst gehostet werden -- siehe @font-face unten.

   2. KEINE VERSPRECHEN AUS DER VORLAGE UEBERNOMMEN.
      Die Vorlage wirbt mit "Free shipping over EUR 30" und "30-day happy
      returns". Beides gilt hier nicht: Versandkosten werden nach Anschrift
      berechnet, und die Frist sind 14 Tage mit Ruecksendekosten beim Kunden.
      Diese Saetze stehen deshalb nirgends -- sie wuerden Widerrufsbelehrung
      und AGB widersprechen.

   3. PRODUKTBILDER STATT FARBKREISE.
      Die Vorlage zeigt zwoelf einfarbige Kreise. Hier sind es handgemalte
      Aquarelle -- die Bilder SIND das Produkt. Die Karten rahmen sie, statt
      sie durch Grafik zu ersetzen. Und die Untersetzer sind quadratisch
      (95 x 95 mm, abgerundete Ecken), nicht rund.

   RUECKGAENGIG MACHEN
   Alles ab dem ersten Kommentarblock loeschen stellt das unveraenderte
   Blocksy wieder her. Es werden keine Theme-Mods und keine Datenbankwerte
   angefasst.
   ======================================================================== */

/* ---------------------------------------------------------------------------
   Schriften -- selbst gehostet
   ---------------------------------------------------------------------------
   Die Dateien gehoeren nach blocksy-child/fonts/. Bezugsquelle und genaue
   Dateinamen stehen in der Anleitung, die mit dieser Datei kam.
   `font-display: swap` zeigt sofort die Systemschrift und tauscht nach dem
   Laden -- so steht nie eine Sekunde lang leerer Text da.
   ------------------------------------------------------------------------ */

@font-face {
	font-family: "Fredoka";
	src: url("fonts/fredoka-v14-latin-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Fredoka";
	src: url("fonts/fredoka-v14-latin-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Nunito";
	src: url("fonts/nunito-v26-latin-regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Nunito";
	src: url("fonts/nunito-v26-latin-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ---------------------------------------------------------------------------
   Gestaltungsvariablen
   ---------------------------------------------------------------------------
   `html:root` und nicht `:root`: Blocksy gibt seine eigene Palette als
   Inline-CSS NACH diesem Stylesheet aus, auf demselben Selektor `:root`. Bei
   gleicher Spezifitaet gewinnt das Spaetere. Ein Typselektor mehr dreht das
   um, ohne dass irgendwo !important noetig waere.
   ------------------------------------------------------------------------ */

html:root {
	/* --- Grundtoene --- */
	--ida-cream:       #FAF6E9;  /* Seitenhintergrund und Kopfbereich */
	--ida-card:        #FFFFFF;  /* Karten */
	/* Warenkorb- und Kassenkarten stehen einen Hauch waermer als reines Weiss
	   auf dem Creme -- sonst wirken sie wie ausgeschnitten. */
	--ida-card-soft:   #FFFDFA;
	--ida-border:      #ECE0CC;  /* Raender */
	--ida-ink:         #3F2D1E;  /* Schrift und dunkle Flaechen */
	--ida-ink-soft:    #6B5744;  /* Fliesstext, Sekundaeres */

	/* --- Bonbonfarben ---
	   Die Akzentfarbe ist bewusst etwas dunkler als ein reines Koralle:
	   Weiss auf #E8553F erreicht rund 3,7:1 und damit WCAG AA fuer grossen,
	   fetten Text, wie ihn die Buttons verwenden. Ein helleres Koralle saehe
	   frischer aus und waere auf Buttons nicht mehr lesbar. */
	--ida-coral:       #E8553F;
	--ida-coral-deep:  #C8402C;
	--ida-sunny:       #F8CE4B;
	--ida-bubblegum:   #FF93C4;
	--ida-teal:        #35C2C0;
	--ida-mint:        #6FDCA8;
	--ida-kiwi:        #93C83F;
	--ida-lilac:       #C2A6EF;
	--ida-sky:         #6FB9EF;
	--ida-grape:       #9A5BE0;
	--ida-cherry:      #E33A6E;
	--ida-cork:        #D8A96E;

	/* --- Schrift --- */
	--ida-font-display: "Fredoka", ui-rounded, "Segoe UI", system-ui, sans-serif;
	--ida-font-body:    "Nunito", ui-sans-serif, system-ui, "Segoe UI", sans-serif;

	/* --- Form --- */
	--ida-radius:       24px;
	--ida-radius-lg:    40px;
	--ida-radius-pill:  999px;
	--ida-shadow:       0 1px 2px rgba(63, 45, 30, .05),
	                    0 10px 26px -14px rgba(63, 45, 30, .22);
	--ida-shadow-lift:  0 2px 4px rgba(63, 45, 30, .07),
	                    0 24px 48px -18px rgba(63, 45, 30, .34);
	--ida-ease:         cubic-bezier(.2, .7, .3, 1);

	/* --- Blocksy-Variablen ueberschreiben --- */
	--theme-palette-color-1: var(--ida-coral);
	--theme-palette-color-2: var(--ida-coral-deep);
	--theme-palette-color-3: var(--ida-ink);
	--theme-palette-color-4: var(--ida-ink-soft);
	--theme-palette-color-5: var(--ida-border);
	/* NICHT das Sonnengelb hierhin legen. Blocksy benutzt Palettenfarbe 6 als
	   Flaechenfarbe fuer das Seitentitel-Band und die Footer-Zeile -- mit dem
	   kraeftigen Gelb wurde daraus eine riesige knallgelbe Flaeche statt eines
	   Akzents. Hier gehoert ein ruhiger Ton hin; das Gelb bleibt den Buttons,
	   dem Laufband und den Siegeln vorbehalten. */
	--theme-palette-color-6: #F7EDDB;
	--theme-palette-color-7: var(--ida-cream);
	--theme-palette-color-8: var(--ida-card);

	--theme-text-color:         var(--ida-ink-soft);
	--theme-headings-color:     var(--ida-ink);
	--theme-link-initial-color: var(--ida-coral);
	--theme-link-hover-color:   var(--ida-coral-deep);
	--theme-border-color:       var(--ida-border);

	--theme-font-family: var(--ida-font-body);
	--theme-font-weight: 400;
	--theme-line-height: 1.65;

	--theme-button-background-initial-color: var(--ida-coral);
	--theme-button-background-hover-color:   var(--ida-coral-deep);
	--theme-button-text-initial-color:       #FFFFFF;
	--theme-button-text-hover-color:         #FFFFFF;
	--theme-button-border-radius:            var(--ida-radius-pill);

	--theme-content-background-color: var(--ida-cream);
}

/* ---------------------------------------------------------------------------
   Grundlagen
   ------------------------------------------------------------------------ */

html body {
	background-color: var(--ida-cream);
	color: var(--ida-ink-soft);
	font-family: var(--ida-font-body);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.woocommerce-loop-product__title,
.ida-display {
	font-family: var(--ida-font-display);
	color: var(--ida-ink);
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1.1;
}

h1, .entry-title { font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4.2rem); }
h2              { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem); }
h3              { font-size: clamp(1.15rem, 1rem + .7vw, 1.45rem); }

a { text-underline-offset: .18em; }

/* Sanftes Scrollen zu den Sprungzielen im Hero -- aber nur, wenn der Besucher
   keine reduzierte Bewegung eingestellt hat. `scroll-margin-top` haelt das
   Ziel unter dem mitlaufenden Header frei, sonst landet die Ueberschrift
   darunter und wirkt uebersprungen. */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

#ida-produkte,
#ida-why {
	scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 110px);
}

/* Sichtbarer Fokus -- Blocksy bringt einen mit, er ist aber schwach. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.button:focus-visible {
	outline: 3px solid var(--ida-coral);
	outline-offset: 3px;
	border-radius: 6px;
}

/* ---------------------------------------------------------------------------
   Kopfbereich
   ------------------------------------------------------------------------ */

/* Wie beim Footer: `header[data-header]` trifft Blocksys Kopfbereich nicht
   zuverlaessig. Deshalb mehrere Schreibweisen. `body > header` ist bewusst
   eingegrenzt -- ein nacktes `header` wuerde auch `.entry-header` in Artikeln
   und den WooCommerce-Produktkopf erwischen.

   HIER LAG DER FEHLER, DER DAS BURGER-MENUE UNBRAUCHBAR MACHTE

   Blocksys Offcanvas-Panel heisst `<div id="offcanvas" class="ct-panel
   ct-header">`. Es traegt also selbst die Klasse `ct-header` und wurde von
   dieser Regel mitgenommen: `position: sticky` statt `fixed`, `top: 0` statt
   `inset: 0`, `z-index: 100` statt 999999. Das Panel klappte dadurch auf
   1 Pixel Hoehe zusammen. Es ging auf -- der Schliessen-Knopf war da -- aber
   die Menuepunkte lagen ausserhalb der sichtbaren Flaeche.

   `:not(.ct-panel)` haelt die Kopfbereichs-Regeln vom Panel fern. */
#header:not(.ct-panel),
.ct-header:not(.ct-panel),
body > header:not(.ct-panel),
header[data-header]:not(.ct-panel) {
	/* Seit der siebten Durchsicht traegt nicht mehr der Kopfbereich selbst die
	   Flaeche, sondern die Glasleiste darin (siehe unten). Hier also
	   durchsichtig -- sonst saesse ein cremefarbener Balken hinter dem Glas
	   und der ganze Effekt waere weg. */
	background-color: transparent;
	border-bottom: 0;
	padding: 10px clamp(12px, 2vw, 24px);
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}

#header:not(.ct-panel) [data-row="middle"],
.ct-header:not(.ct-panel) [data-row="middle"],
body > header:not(.ct-panel) [data-row="middle"] {
	padding-block: 14px;
	/* Hier stand bis zur achten Durchsicht `background-color: transparent`.
	   Das war richtig, solange der Kopfbereich selbst die Cremefarbe trug und
	   diese innere Zeile sie nur verdeckt haette.
	
	   Seit der Kopfbereich durchsichtig ist und die Zeile das Glas traegt, war
	   diese Zeile schaedlich -- und zwar schwer zu finden: der Selektor beginnt
	   mit `#header`, hat also eine ID. Eine ID schlaegt beliebig viele
	   Klassen, und damit gewann diese alte Regel gegen die komplette Glasregel
	   weiter unten. Ergebnis: gar kein Glas, nicht etwa zu wenig. */
}

.site-title,
.site-title a,
header[data-header] .site-title a {
	font-family: var(--ida-font-display);
	font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--ida-ink);
}

.site-title a:hover,
header[data-header] .site-title a:hover {
	color: var(--ida-coral);
}

header [data-id="menu"] .menu > li > a {
	font-family: var(--ida-font-body);
	font-size: .92rem;
	font-weight: 700;
	letter-spacing: .01em;
	text-transform: none;
	transition: color .2s var(--ida-ease);
}

header [data-id="menu"] .menu > li > a:hover,
header [data-id="menu"] .menu > li.current-menu-item > a {
	color: var(--ida-coral);
}

/* ---------------------------------------------------------------------------
   Laufband unter dem Header
   ---------------------------------------------------------------------------
   Markup kommt aus functions.php (Hook wp_body_open), nur auf Start- und
   Shop-Seite. Inhalt: ausschliesslich Aussagen, die durch AGB,
   Widerrufsbelehrung und Produktdaten gedeckt sind.
   ------------------------------------------------------------------------ */

.ida-marquee {
	overflow: hidden;
	background: var(--ida-sunny);
	border-bottom: 1px solid var(--ida-border);
	padding-block: 10px;
}

.ida-marquee__track {
	display: flex;
	width: max-content;
	animation: ida-marquee 38s linear infinite;
}

.ida-marquee__group {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 2.5rem;
	padding-right: 2.5rem;
	font-family: var(--ida-font-display);
	font-size: .82rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .2em;
	color: var(--ida-ink);
	white-space: nowrap;
}

@keyframes ida-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.ida-marquee:hover .ida-marquee__track {
	animation-play-state: paused;
}

/* ---------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------ */

.button,
button,
input[type="submit"],
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button.alt,
.ida-btn {
	font-family: var(--ida-font-display);
	font-weight: 600;
	font-size: 1rem;
	border-radius: var(--ida-radius-pill);
	padding: 14px 32px;
	border: 0;
	transition: transform .18s var(--ida-ease),
	            box-shadow .18s var(--ida-ease),
	            background-color .18s var(--ida-ease);
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.ida-btn:hover {
	transform: translateY(-3px) rotate(-1deg);
	box-shadow: var(--ida-shadow-lift);
}

.button:active,
button:active,
.woocommerce a.button:active {
	transform: translateY(0) rotate(0);
}

/* Zweitrangiger Button: Umriss statt Flaeche. */
.ida-btn--ghost {
	background: transparent;
	color: var(--ida-ink);
	border: 2px solid var(--ida-ink);
	padding: 12px 30px;
}

.ida-btn--ghost:hover {
	background: var(--ida-ink);
	color: var(--ida-cream);
}

/* ---------------------------------------------------------------------------
   Hero auf der Startseite
   ---------------------------------------------------------------------------
   Markup liegt als Inhalt auf der Shop-Seite (ID 7) und wird von WooCommerce
   oberhalb des Produktrasters ausgegeben. Die Klassen stehen im Block-Markup
   der Seite -- deshalb hier verlaesslich adressierbar.
   ------------------------------------------------------------------------ */

.ida-hero {
	position: relative;
	text-align: center;
	padding-block: clamp(20px, 3vw, 44px) clamp(12px, 2vw, 28px);
	overflow: visible;
}

/* Weiche Farbwolken im Hintergrund. Rein dekorativ, deshalb pointer-events
   aus -- sie duerfen keine Klicks abfangen. */
.ida-hero::before,
.ida-hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	pointer-events: none;
	z-index: 0;
}

.ida-hero::before {
	width: 20rem;
	height: 20rem;
	top: 0;
	left: -6rem;
	background: color-mix(in srgb, var(--ida-sunny) 55%, transparent);
}

.ida-hero::after {
	width: 22rem;
	height: 22rem;
	top: 6rem;
	right: -5rem;
	background: color-mix(in srgb, var(--ida-bubblegum) 45%, transparent);
}

.ida-hero > * {
	position: relative;
	z-index: 1;
}

.ida-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	border: 1px solid var(--ida-cork);
	background: var(--ida-card);
	border-radius: var(--ida-radius-pill);
	padding: 7px 18px;
	font-family: var(--ida-font-body);
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .22em;
	color: var(--ida-ink);
}

.ida-hero__title {
	max-width: 18ch;
	margin-inline: auto;
	margin-block: 1.2rem .9rem;
	font-size: clamp(2.4rem, 1.2rem + 5vw, 4.6rem);
	line-height: 1.05;
}

/* Die gewellte Unterstreichung aus der Vorlage. `text-decoration-style: wavy`
   kann der Browser selbst -- kein Bild noetig. */
.ida-hero__title em {
	font-style: normal;
	color: var(--ida-coral);
	text-decoration: underline wavy var(--ida-sunny);
	text-decoration-thickness: .1em;
	text-underline-offset: .18em;
}

.ida-hero__lead {
	max-width: 46ch;
	margin-inline: auto;
	font-size: clamp(1.02rem, .95rem + .4vw, 1.2rem);
	line-height: 1.6;
	color: var(--ida-ink-soft);
}

.ida-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin-top: 2rem;
}

.ida-hero__actions .ida-btn {
	display: inline-block;
	text-decoration: none;
}

.ida-hero__actions .ida-btn--primary {
	background: var(--ida-coral);
	color: #FFFFFF;
	box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--ida-coral) 70%, transparent);
}

/* --- Bildbuehne mit schwebenden Untersetzern --- */

/* Die Buehne bekommt die Bildbreite AUSDRUECKLICH, nicht `fit-content`.
   Mit fit-content und einem Bild, dessen width-Attribut 2000 lautet, wurde die
   Buehne so breit wie der Container -- und die absolut positionierten
   Untersetzer flogen dadurch in die Ecken der ganzen Seite statt um das Bild
   herum. Genau das war auf der Startseite zu sehen. */
.ida-hero__stage {
	position: relative;
	width: clamp(15rem, 34vw, 23rem);
	max-width: 100%;
	/* Feste Hoehe ueber das Seitenverhaeltnis. Damit kann nichts im Inneren die
	   Buehne mehr in die Laenge ziehen -- die unten verankerten Untersetzer
	   bleiben am Bild, egal was sonst noch im Kasten landet. */
	aspect-ratio: 1 / 1;
	margin: clamp(20px, 3vw, 36px) auto 0;
}

.ida-hero__photo {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 22%;
	border: 10px solid var(--ida-card);
	box-shadow: var(--ida-shadow-lift);
}

.ida-hero__chip {
	position: absolute;
	border-radius: 22%;
	border: 5px solid var(--ida-card);
	box-shadow: var(--ida-shadow);
}

.ida-hero__chip--1 {
	width: 5.5rem; height: 5.5rem;
	top: -1.5rem; left: -3rem;
	background: var(--ida-teal);
	animation: ida-float 7s ease-in-out infinite;
}

.ida-hero__chip--2 {
	width: 4.5rem; height: 4.5rem;
	bottom: -1rem; left: -2rem;
	background: var(--ida-kiwi);
	animation: ida-float 9s ease-in-out infinite .8s;
}

.ida-hero__chip--3 {
	width: 4rem; height: 4rem;
	bottom: 2rem; right: -2.5rem;
	background: var(--ida-lilac);
	animation: ida-float 8s ease-in-out infinite .4s;
}

@keyframes ida-float {
	0%, 100% { transform: translateY(0) rotate(-3deg); }
	50%      { transform: translateY(-14px) rotate(3deg); }
}

/* Rotierendes Siegel oben rechts. */
.ida-hero__seal {
	display: block;
	position: absolute;
	top: -2.5rem;
	right: -3rem;
	width: 8rem;
	height: 8rem;
	overflow: visible;
	animation: ida-spin 22s linear infinite;
}

@keyframes ida-spin {
	to { transform: rotate(360deg); }
}

@media (max-width: 782px) {
	.ida-hero__chip,
	.ida-hero__seal { display: none; }
}

/* ---------------------------------------------------------------------------
   Produktraster
   ------------------------------------------------------------------------ */

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background: var(--ida-card);
	border: 1px solid var(--ida-border);
	border-radius: var(--ida-radius);
	padding: 18px 18px 24px;
	text-align: center;
	box-shadow: var(--ida-shadow);
	transition: transform .3s var(--ida-ease), box-shadow .3s var(--ida-ease);
}

/* Abwechselnd leicht gekippt beim Hover -- der Trick aus der Vorlage, der die
   Karten lebendig macht, ohne dass etwas springt. */
.woocommerce ul.products li.product:hover {
	transform: translateY(-8px) rotate(-1.5deg);
	box-shadow: var(--ida-shadow-lift);
}

.woocommerce ul.products li.product:nth-child(even):hover {
	transform: translateY(-8px) rotate(1.5deg);
}

/* Quadrat mit runden Ecken -- die echte Form des Untersetzers. */
.woocommerce ul.products li.product img {
	border-radius: 20%;
	background: var(--ida-cream);
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform .4s var(--ida-ease);
}

.woocommerce ul.products li.product:hover img {
	transform: rotate(-6deg) scale(1.06);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--ida-font-display);
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.3;
	margin-top: 1rem;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 3.9em;
}

.woocommerce ul.products li.product .price {
	font-family: var(--ida-font-display);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--ida-ink);
}

/* "In den Warenkorb" als gelbe Pille, die beim Hover auf Koralle umschlaegt --
   wie in der Vorlage. */
/* Der Button sass links in der Karte, waehrend Titel, Preis und Kategorie
   mittig standen. Blocksy legt die Karte als Flex-Spalte an, deshalb greift
   `text-align` auf dem Button nicht. Beide Faelle sind hier abgedeckt:
   `align-self` fuer den Flex-Fall, `width: fit-content` plus auto-Rand fuer
   den Block-Fall. */
.woocommerce ul.products li.product .button {
	background: var(--ida-sunny);
	color: var(--ida-ink);
	font-size: .92rem;
	padding: 11px 24px;
	margin-top: .9rem;
	display: block;
	width: fit-content;
	margin-inline: auto;
	align-self: center;
}

.woocommerce ul.products li.product .button:hover {
	background: var(--ida-coral);
	color: #FFFFFF;
}

/* Kategoriezeile auf der Produktkarte.
   War ausgeblendet, solange ueberall "Uncategorized" stand -- seit dem Anlegen
   echter Kategorien traegt sie wieder Information und ist deshalb sichtbar.
   Bewusst zurueckhaltend: sie ordnet ein, sie konkurriert nicht mit Titel und
   Preis. */
.woocommerce ul.products li.product .woocommerce-loop-product__category,
.woocommerce ul.products li.product .ct-product-categories {
	display: block;
	margin-top: .35rem;
	font-family: var(--ida-font-body);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--ida-ink-soft) 70%, transparent);
}

.woocommerce ul.products li.product .ct-product-categories a {
	color: inherit;
	text-decoration: none;
}

.woocommerce ul.products li.product .ct-product-categories a:hover {
	color: var(--ida-coral);
}

.woocommerce span.onsale {
	background: var(--ida-cherry);
	color: #FFFFFF;
	border-radius: var(--ida-radius-pill);
	font-family: var(--ida-font-display);
	font-weight: 600;
}

/* KEIN ZWEITER KNOPF UNTER DEM ERSTEN.

   WooCommerce haengt nach dem Legen in den Warenkorb einen zweiten Link
   "Warenkorb anzeigen" unter "In den Warenkorb". Dadurch wird genau eine Karte
   im Raster hoeher als alle anderen, die Reihe verspringt, und es stehen zwei
   konkurrierende Handlungsaufforderungen uebereinander.

   Kein grosser Shop macht das. Die Rueckmeldung kommt stattdessen oben: der
   Zaehler am Warenkorbsymbol zaehlt hoch und der Mini-Warenkorb oeffnet sich.
   Der Link wird deshalb ausgeblendet -- nicht entfernt, damit Screenreader-
   Nutzerinnen den Weg zum Warenkorb weiterhin angeboten bekommen. */
.woocommerce ul.products li.product a.added_to_cart {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Beim Tastatur-Fokus wird er wieder sichtbar, sonst waere er eine Falle:
   anfokussierbar, aber unsichtbar. */
.woocommerce ul.products li.product a.added_to_cart:focus-visible {
	position: static;
	width: auto;
	height: auto;
	margin: .6rem 0 0;
	clip-path: none;
	white-space: normal;
}

/* ---------------------------------------------------------------------------
   Einzelprodukt
   ------------------------------------------------------------------------ */

.woocommerce div.product div.images img {
	border-radius: 16%;
	background: var(--ida-cream);
}

/* Der untere Teil der Produktseite -- Reiter, Beschreibung, aehnliche Produkte
   -- lief bis an die linke Fensterkante, waehrend das Bild darueber einen Rand
   hatte. Blocksy gibt diesen Bereich ohne eigenen Innenabstand aus. Hier kommt
   der Spaltenabstand dazu, damit kein Text die Kante beruehrt. */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells {
	padding-inline: clamp(16px, 4vw, 72px);
}

.woocommerce div.product .woocommerce-Tabs-panel--description {
	max-width: 72ch;
	margin-inline-end: auto;
	text-align: left;
}

.woocommerce div.product .woocommerce-Tabs-panel--description p {
	margin-bottom: 1.1em;
}

/* Sicherheitsnetz: falls Blocksy den Bereich anders benennt als oben
   angenommen, faengt diese Regel den Text trotzdem von der Kante weg. */
.single-product .woocommerce-Tabs-panel,
.single-product .related > h2,
.single-product .woocommerce-tabs ul.tabs {
	padding-inline-start: max(0px, clamp(16px, 4vw, 72px));
}

.woocommerce div.product p.price {
	font-family: var(--ida-font-display);
	font-size: 1.8rem;
	font-weight: 600;
	color: var(--ida-ink);
}

/* ---------------------------------------------------------------------------
   Argumente-Block unter dem Raster
   ---------------------------------------------------------------------------
   Markup aus functions.php (Hook woocommerce_after_shop_loop). Jede Aussage
   ist durch Produktdaten, AGB oder Widerrufsbelehrung gedeckt.
   ------------------------------------------------------------------------ */

.ida-why {
	margin-top: clamp(56px, 8vw, 96px);
	text-align: center;
}

.ida-why__title {
	font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem);
}

.ida-why__lead {
	margin-top: .6rem;
	color: var(--ida-ink-soft);
}

.ida-why__grid {
	display: grid;
	gap: 1.5rem;
	margin-top: 3rem;
	grid-template-columns: 1fr;
}

@media (min-width: 860px) {
	.ida-why__grid { grid-template-columns: repeat(3, 1fr); }
	/* Mittlere Karte angehoben, aeussere leicht gekippt -- die bewusste
	   Unordnung aus der Vorlage. */
	.ida-why__card:nth-child(1) { transform: rotate(-1deg); }
	.ida-why__card:nth-child(2) { transform: translateY(-18px) rotate(1deg); }
	.ida-why__card:nth-child(3) { transform: rotate(-1deg); }
}

.ida-why__card {
	background: var(--ida-card);
	border: 2px solid var(--ida-border);
	border-radius: var(--ida-radius-lg);
	padding: 2rem 1.75rem;
	box-shadow: var(--ida-shadow);
	transition: transform .3s var(--ida-ease), box-shadow .3s var(--ida-ease);
}

.ida-why__card:hover {
	transform: translateY(-6px) scale(1.02);
	box-shadow: var(--ida-shadow-lift);
}

.ida-why__icon {
	display: grid;
	place-items: center;
	width: 4rem;
	height: 4rem;
	margin: 0 auto 1.25rem;
	border-radius: 50%;
	background: var(--ida-sunny);
	color: var(--ida-ink);
}

.ida-why__icon svg { width: 1.75rem; height: 1.75rem; }

.ida-why__card h3 { margin-bottom: .5rem; }

.ida-why__card p {
	font-size: .95rem;
	color: var(--ida-ink-soft);
	margin: 0;
}

.ida-why__pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin-top: 3rem;
}

.ida-why__pill {
	border-radius: var(--ida-radius-pill);
	padding: 10px 22px;
	font-size: .9rem;
	font-weight: 700;
	color: var(--ida-ink);
	transition: transform .2s var(--ida-ease);
}

.ida-why__pill:nth-child(1) { background: var(--ida-mint); }
.ida-why__pill:nth-child(2) { background: var(--ida-lilac); }
.ida-why__pill:nth-child(3) { background: var(--ida-sky); }

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

/* ---------------------------------------------------------------------------
   Mini-Warenkorb und Hamburger-Panel
   ---------------------------------------------------------------------------
   In der Vorlage ist der Warenkorb eine helle Schublade mit korallenfarbenem
   Checkout-Knopf. Blocksy liefert ihn standardmaessig dunkelgrau.

   ACHTUNG, UNGEPRUEFT: Die Klassennamen unten sind Blocksys uebliche, aber ich
   konnte sie nicht am gerenderten Markup nachsehen -- der Shop steht auf
   Coming-soon, ausgeloggt kommt nur die Platzhalterseite. Greift eine Regel
   nicht, passiert nichts Schlimmes; sie faellt einfach aus. Mit einem
   Screenshot des geoeffneten Warenkorbs ziehe ich sie nach.

   NICHT uebernommen aus der Vorlage: der Fortschrittsbalken "EUR 30 away from
   free shipping". Dieser Shop hat keine Versandkostengrenze -- die Kosten
   werden nach Lieferanschrift berechnet (AGB Paragraf 5). Ein Balken, der etwas
   anderes verspricht, waere eine falsche Werbeaussage.
   ------------------------------------------------------------------------ */

/* Dieselbe Umkehrung wie beim Footer: die Schublade bekommt die Flaeche,
   alles darin wird transparent. So ist egal, welches Element Blocksy faerbt.
   Hier allerdings HELL -- die Vorlage zeigt eine cremefarbene Schublade. */
#offcanvas,
.ct-panel,
#offcanvas .ct-panel-inner,
.ct-panel .ct-panel-inner {
	background-color: transparent !important;
	color: var(--ida-ink-soft);
}

/* Die Flaeche traegt das Panel selbst, und zwar halbdurchsichtig mit Unschaerfe:
   die Seite bleibt dahinter erkennbar, der Text darauf trotzdem lesbar. */
#offcanvas.ct-panel {
	background-color: color-mix(in srgb, var(--ida-cream) 82%, transparent) !important;
	backdrop-filter: blur(16px) saturate(1.1);
	-webkit-backdrop-filter: blur(16px) saturate(1.1);
}

#offcanvas *:not(a):not(button):not(.button):not(svg):not(path):not(img),
.ct-panel *:not(a):not(button):not(.button):not(svg):not(path):not(img) {
	background-color: transparent !important;
}

#offcanvas,
.ct-cart-content {
	border-radius: var(--ida-radius-lg) 0 0 var(--ida-radius-lg);
}

#offcanvas a,
.ct-panel a,
.ct-cart-content a,
.ct-cart-content .ct-cart-total {
	color: var(--ida-ink);
}

#offcanvas a:hover,
.ct-panel a:hover,
.ct-cart-content a:hover {
	color: var(--ida-coral);
}

/* Das Schliessen-Kreuz muss auf hellem Grund sichtbar bleiben. */
#offcanvas .ct-toggle-close,
.ct-panel .ct-toggle-close {
	color: var(--ida-ink);
}

/* Der Weg zur Kasse ist der wichtigste Knopf im Panel -- Koralle, der Rest
   in Gelb, wie auf den Produktkarten. */
.ct-cart-content .button.checkout,
.ct-cart-actions .button.checkout,
#offcanvas .button.checkout {
	background: var(--ida-coral);
	color: #FFFFFF;
}

.ct-cart-content .button:not(.checkout),
.ct-cart-actions .button:not(.checkout),
#offcanvas .button:not(.checkout) {
	background: var(--ida-sunny);
	color: var(--ida-ink);
}

/* Das Menue im Hamburger-Panel gross und gut treffbar. */
#offcanvas .menu > li > a,
.ct-panel .menu > li > a {
	font-family: var(--ida-font-display);
	font-size: 1.25rem;
	font-weight: 600;
	padding-block: .55rem;
}

/* ---------------------------------------------------------------------------
   Warenkorb- und Kassenseite aus den WooCommerce-Bloecken
   ---------------------------------------------------------------------------
   Der grosse Knopf auf der Warenkorbseite war korallenrot mit UNSICHTBARER
   Beschriftung. Grund: das sind die neuen WooCommerce-Bloecke mit eigenen
   Klassen (`wc-block-*`), die meine bisherigen Button-Regeln nicht treffen.
   Die Flaeche kam ueber die Palette durch, die Textfarbe nicht -- und der
   Text sitzt zusaetzlich in einem eigenen `__text`-Element, das die Farbe
   nicht erbt, wenn man sie nur auf dem Knopf setzt.
   ------------------------------------------------------------------------ */

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button.contained,
.wp-block-woocommerce-cart .wc-block-components-button {
	background-color: var(--ida-coral) !important;
	color: #FFFFFF !important;
	border-radius: var(--ida-radius-pill) !important;
	font-family: var(--ida-font-display);
	font-weight: 600;
}

/* Das Textelement im Inneren muss die Farbe ausdruecklich erben, sonst bleibt
   es auf dem Wert der Bloecke stehen -- genau das machte es unsichtbar. */
.wc-block-cart__submit-button .wc-block-components-button__text,
.wc-block-components-checkout-place-order-button .wc-block-components-button__text,
.wc-block-components-button .wc-block-components-button__text {
	color: inherit !important;
}

.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background-color: var(--ida-coral-deep) !important;
}

/* Warenkorb, Kasse und Kundenkonto brauchen die volle Breite.

   Der Artikel-Container trug die Lesebreite aus dem Rechtstext-Abschnitt, also
   72ch. Damit stand die Kasse auf 691 Pixel und die zweispaltige Aufteilung
   aus Formular und Bestelluebersicht fiel untereinander. Hier wird die
   Begrenzung ausdruecklich aufgehoben, statt sich darauf zu verlassen, dass
   weiter oben niemand wieder eine setzt. */
body.woocommerce-cart .hentry,
body.woocommerce-checkout .hentry,
body.woocommerce-account .hentry,
body.woocommerce-cart .entry-content,
body.woocommerce-checkout .entry-content,
body.woocommerce-account .entry-content {
	max-width: none;
}

/* --- Warenkorb: Zeilen werden Karten ---------------------------------------

   Die Zeilen sind bei WooCommerce bereits `display: grid`, also laesst sich
   eine Zeile ohne Umbau zur Karte machen. Tabelle und tbody muessen aber auf
   `block`, sonst greifen die Abstaende zwischen den Karten nicht: in einem
   Tabellen-Layout haben Zeilenboxen keine Aussenabstaende. */

.wc-block-cart-items,
.wc-block-cart-items > thead,
.wc-block-cart-items > tbody {
	display: block;
	width: 100%;
}

/* Die Spaltenueberschriften sind in einer Kartenansicht sinnlos -- die Karte
   sagt selbst, was was ist. Nur optisch entfernen, nicht aus dem Dokument:
   Screenreader lesen die Tabelle weiter mit Struktur. */
.wc-block-cart-items__header {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.wc-block-cart-items__row {
	background: var(--ida-card);
	border: 1px solid var(--ida-border);
	box-shadow: var(--ida-shadow);
	align-items: center;
}

.wc-block-cart-items__row:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: no-preference) {
	.wc-block-cart-items__row {
		transition: box-shadow .25s var(--ida-ease), transform .25s var(--ida-ease);
	}

	.wc-block-cart-items__row:hover {
		box-shadow: var(--ida-shadow-lift);
		transform: translateY(-2px);
	}
}

/* Das Produktbild IST das Produkt -- also gross genug und mit derselben
   Eckenrundung wie die Untersetzer selbst. */

.wc-block-cart-item__product .wc-block-components-product-name {
	font-family: var(--ida-font-display);
	font-weight: 600;
	color: var(--ida-ink);
	text-decoration: none;
}

.wc-block-cart-item__product .wc-block-components-product-name:hover { color: var(--ida-coral); }

.wc-block-components-product-metadata__description {
	color: var(--ida-ink-soft);
}


/* Mengenwaehler als Pille, wie in der Vorlage: Minus, Zahl, Plus. */
.wc-block-components-quantity-selector {
	border-radius: var(--ida-radius-pill);
	overflow: hidden;
}

.wc-block-components-quantity-selector::after { display: none; }

.wc-block-components-quantity-selector__input {
	background: transparent;
	font-family: var(--ida-font-display);
	color: var(--ida-ink);
}

.wc-block-components-quantity-selector__button {
	font-weight: 700;
	opacity: 1;
}

.wc-block-components-quantity-selector__button:hover:not(:disabled) {
	color: var(--ida-ink);
}

.wc-block-cart-item__remove-link {
	color: var(--ida-ink-soft);
	text-decoration-color: color-mix(in srgb, var(--ida-ink-soft) 40%, transparent);
	font-size: .8rem;
}


.wc-block-cart-item__total .wc-block-components-product-price__value {
	font-family: var(--ida-font-display);
	font-weight: 600;
	color: var(--ida-ink);
}

/* --- Die Zusammenfassung rechts, auf beiden Seiten gleich ------------------ */

.wc-block-cart__sidebar .wc-block-components-sidebar,
.wc-block-checkout__sidebar .wc-block-components-sidebar,
.wp-block-woocommerce-cart .wc-block-components-sidebar,
.wp-block-woocommerce-checkout .wc-block-components-sidebar {
	background: var(--ida-card);
	border: 1px solid var(--ida-border);
	border-radius: var(--ida-radius);
	box-shadow: var(--ida-shadow);
	padding: 1.5rem;
}

/* Die Ueberschrift wird von WooCommerce in Versalien gesetzt. Dass hier der
   Elementname mit im Selektor steht, ist Absicht: ohne ihn gewinnt die
   WooCommerce-Regel und die Ueberschrift bleibt GROSSGESCHRIEBEN. */
.wp-block-woocommerce-cart h2.wc-block-cart__totals-title,
.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title {
	font-family: var(--ida-font-display);
	font-weight: 600;
	color: var(--ida-ink);
	text-transform: none;
	letter-spacing: 0;
}

.wc-block-components-totals-item__label { color: var(--ida-ink-soft); }
.wc-block-components-totals-item__value { color: var(--ida-ink); font-weight: 700; }

.wc-block-components-totals-wrapper {
	border-top-color: var(--ida-border);
}

/* Gesamtsumme: Schriftart, -schnitt und Farbe. Die GROESSE steht bewusst
   nicht hier, sondern ganz unten in der sechsten Durchsicht -- WooCommerce
   setzt sie im Seitenleisten-Layout mit einem Selektor aus drei Klassen auf
   `initial` zurueck, wogegen eine Regel mit zwei Klassen nicht ankommt. */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-family: var(--ida-font-display);
	font-weight: 600;
	color: var(--ida-ink);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--ida-font-display);
	font-weight: 600;
	color: var(--ida-ink);
}

/* --- Eingabefelder, Gutschein, Auswahl ------------------------------------- */

.wc-block-components-text-input input,
.wc-blocks-components-select__select,
.wc-block-components-totals-coupon__input input {
	border: 1px solid var(--ida-border);
	border-radius: 14px;
	background: var(--ida-cream);
	font-family: var(--ida-font-body);
	color: var(--ida-ink);
}

.wc-block-components-text-input input:focus,
.wc-blocks-components-select__select:focus,
.wc-block-components-totals-coupon__input input:focus {
	border-color: var(--ida-coral);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ida-coral) 25%, transparent);
	outline: none;
}

.wc-block-components-totals-coupon .wc-block-components-button {
	border-radius: var(--ida-radius-pill) !important;
	font-family: var(--ida-font-display);
}

.wc-block-components-panel__button {
	font-family: var(--ida-font-display);
	font-weight: 600;
	color: var(--ida-ink);
}

/* --- Kasse: jeder Schritt eine eigene Karte -------------------------------- */

.wp-block-woocommerce-checkout .wc-block-components-checkout-step {
	background: var(--ida-card);
	border: 1px solid var(--ida-border);
	border-radius: var(--ida-radius);
	box-shadow: var(--ida-shadow);
	padding: 1.4rem 1.5rem;
	margin-bottom: 1.1rem;
}

.wc-block-components-checkout-step__title {
	font-family: var(--ida-font-display);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--ida-ink);
}

/* Versandart und Zahlungsart als anklickbare Karten, die ausgewaehlte traegt
   die Akzentfarbe -- so sieht man ohne Hinsehen, was gewaehlt ist. */
.wc-block-components-radio-control__option {
	border: 1px solid var(--ida-border);
	border-radius: 16px;
	background: var(--ida-cream);
	margin-bottom: .6rem;
	padding: .9rem 1rem;
}

.wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control__option--checked-option-highlighted {
	border-color: var(--ida-coral);
	background: color-mix(in srgb, var(--ida-coral) 7%, var(--ida-card));
	box-shadow: 0 0 0 1px var(--ida-coral);
}

.wc-block-components-radio-control__label {
	font-weight: 600;
	color: var(--ida-ink);
}

.wc-block-components-address-card {
	border: 1px solid var(--ida-border);
	border-radius: 16px;
	background: var(--ida-cream);
	padding: 1rem;
}

.wc-block-components-order-summary-item__image img {
	border-radius: 12px;
	border: 1px solid var(--ida-border);
}

/* Auf schmalen Schirmen bleibt die Zusammenfassung nicht klebrig -- sonst
   verdeckt sie auf kleinen Geraeten die halbe Liste. */
@media (min-width: 1000px) {
	.wc-block-cart__sidebar .wc-block-components-sidebar {
		position: sticky;
		top: 1.5rem;
	}
}

/* ---------------------------------------------------------------------------
   Rechtstexte lesbar halten
   ---------------------------------------------------------------------------
   Hier zaehlt Lesbarkeit, nicht Verspieltheit. Begrenzte Zeilenlaenge, ruhiger
   Rhythmus, klar abgesetzte Zwischenueberschriften -- und der Text bleibt
   linksbuendig.

   HIER LAG EIN FEHLER, DER DEN WARENKORB EINGEQUETSCHT HAT

   Diese Regeln standen auf `.page` -- und `.page` haengt am body, also auch
   bei Warenkorb, Kasse und Kundenkonto. Die Rechtstext-Begrenzung von 72ch
   hat damit auch die Kasse auf 691 Pixel zusammengezogen, obwohl die
   WooCommerce-Bloecke zwei Spalten brauchen. Die Auswahl schliesst diese drei
   Seiten jetzt ausdruecklich aus.

   Ausserdem bekommen die Rechtstexte dieselbe Kartensprache wie der Rest der
   Seite: weisse Flaeche, runde Ecken, weicher Schatten. Vorher standen sie
   nackt auf dem Cremehintergrund und wirkten wie von einer anderen Website.
   Dazu sind sie jetzt zentriert statt linksbuendig -- eine freistehende Karte
   am linken Rand sieht nach Versehen aus.

   SCHALTER: Fuer linksbuendig `margin-inline: auto` durch
   `margin-inline-end: auto` ersetzen.
   ------------------------------------------------------------------------ */

body.page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .entry-content {
	max-width: 76ch;
	margin-inline: auto;
	text-align: left;
	background: var(--ida-card);
	border: 1px solid var(--ida-border);
	border-radius: var(--ida-radius-lg);
	box-shadow: var(--ida-shadow);
	padding: clamp(1.5rem, 1rem + 2.5vw, 3.25rem);
}

/* Die Widerrufsseite traegt ein Formular, keinen Fliesstext -- die Karte darf
   dort etwas breiter sein, damit die Felder nicht gequetscht wirken. */
body.page-id-128 .entry-content { max-width: 60rem; }

body.page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .entry-content h2 {
	font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
	margin-top: 2.4em;
	padding-top: 1.2em;
	border-top: 1px solid var(--ida-border);
}

body.page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .entry-content h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

body.page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .entry-content hr.wp-block-separator {
	border: 0;
	height: 1px;
	background: var(--ida-border);
	margin: 2.6em 0;
}

body.page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .entry-content a {
	color: var(--ida-coral);
	text-decoration-thickness: .08em;
}

body.page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .entry-content a:hover { color: var(--ida-coral-deep); }

/* ---------------------------------------------------------------------------
   Fusszeile
   ---------------------------------------------------------------------------
   Dunkel mit grosser runder Oberkante, wie in der Vorlage.
   ------------------------------------------------------------------------ */

/* HIER STAND EIN FEHLER, DER DIE RECHTSLINKS UNLESBAR GEMACHT HAT

   Die Vorlage hat eine dunkle Fusszeile, also war hier zunaechst
   `background: var(--ida-ink)` gesetzt und die Links in hellem Creme. Der
   dunkle Grund kam im Frontend aber nie an: Blocksy faerbt nicht das
   footer-Element, sondern die einzelnen Footer-ZEILEN, und deren Hintergrund
   liegt darueber. Ergebnis war fast weisse Schrift auf hellem Grund -- die
   Rechtslinks waren nur im Hover sichtbar.

   Jetzt wird der Hintergrund gar nicht mehr angefasst. Die Schriftfarben sind
   auf den hellen Grund ausgelegt, den Blocksy tatsaechlich zeichnet: Tinte auf
   Creme erreicht rund 12:1, der Hover in Ton rund 5:1.

   Wer die dunkle Fusszeile doch moechte, stellt sie im Customizer unter
   Footer am jeweiligen Zeilen-Hintergrund ein -- dann muessen die beiden
   Farbwerte unten wieder auf Creme gedreht werden. Nicht umgekehrt
   vorgehen. */
footer[data-footer] {
	margin-top: clamp(48px, 7vw, 80px);
	border-top: 0;
	border-radius: var(--ida-radius-lg) var(--ida-radius-lg) 0 0;
	overflow: hidden;
	color: color-mix(in srgb, var(--ida-cream) 85%, transparent);
}

/* DER FEHLER, DER DIESE FUSSZEILE ZWEIMAL ZERLEGT HAT

   Alle Footer-Regeln waren mit `footer[data-footer]` qualifiziert. Blocksys
   Footer-Element traegt dieses Attribut nicht -- es hiess also nie etwas
   davon. Die EINE Regel, die wirkte, war `footer [data-id="menu"] ...` ohne
   Attribut: die Linkfarbe kam durch, der Hintergrund nicht. Ergebnis beim
   zweiten Anlauf: fast weisse Schrift auf unveraendert hellem Grund.

   Jetzt steht das Element ueber mehrere Schreibweisen da -- `#footer`,
   `.ct-footer` und das direkte Kind von body. Mindestens eine trifft.

   Und die Richtung ist umgedreht: statt jede Huelle dunkel zu faerben, wird
   der Footer dunkel und ALLES darin transparent. Damit ist es egal, welches
   Element Blocksy faerbt -- es wird durchsichtig und der dunkle Grund kommt
   durch. Ausgenommen sind Elemente, die ihren eigenen Hintergrund brauchen. */
#footer,
.ct-footer,
body > footer,
footer[data-footer] {
	background-color: var(--ida-ink) !important;
}

#footer *:not(a):not(button):not(.button):not(svg):not(path):not(img),
.ct-footer *:not(a):not(button):not(.button):not(svg):not(path):not(img),
body > footer *:not(a):not(button):not(.button):not(svg):not(path):not(img) {
	background-color: transparent !important;
}

/* Alles mittig, wie in der Vorlage. */
#footer [data-row],
#footer [data-column],
.ct-footer [data-row],
.ct-footer [data-column],
body > footer [data-row],
body > footer [data-column] {
	text-align: center;
}

footer [data-id="menu"] .menu {
	justify-content: center;
	flex-wrap: wrap;
	gap: .4rem 1.6rem;
}

/* Schriftfarben: hier bewusst OHNE `[data-footer]`, denn genau diese
   Qualifizierung war der Fehler. Die Farben gehoeren zum dunklen Grund oben --
   greift der nicht, sind sie unlesbar. Beides steht und faellt zusammen. */
#footer,
.ct-footer,
body > footer {
	color: color-mix(in srgb, var(--ida-cream) 85%, transparent);
}

#footer a,
.ct-footer a,
body > footer a,
footer [data-id="menu"] .menu > li > a {
	color: color-mix(in srgb, var(--ida-cream) 92%, transparent);
	font-family: var(--ida-font-body);
	font-size: .9rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: none;
}

#footer a:hover,
.ct-footer a:hover,
body > footer a:hover,
footer [data-id="menu"] .menu > li > a:hover {
	color: var(--ida-sunny);
}

/* Die Copyright-Zeile tritt bewusst zurueck. */
#footer [data-id="copyright"],
.ct-footer [data-id="copyright"],
body > footer [data-id="copyright"] {
	font-size: .8rem;
	color: color-mix(in srgb, var(--ida-cream) 60%, transparent);
}

/* ---------------------------------------------------------------------------
   Mobil zuerst: Burger, Panel, Konto
   ---------------------------------------------------------------------------
   Alles in diesem Abschnitt ist fuer den Daumen gebaut und waechst nach oben,
   nicht umgekehrt. Die Mediaabfragen sind deshalb `min-width`: der schmale
   Fall ist der Normalfall, die Breite ist die Ausnahme.
   ------------------------------------------------------------------------ */

/* Die Trefferflaeche des Burgers war 18 x 18 Pixel. Das ist weniger als die
   Haelfte dessen, was ein Daumen zuverlaessig trifft; WCAG 2.2 nennt 24 als
   Minimum, die Praxis 44. Das Symbol bleibt klein, die Flaeche waechst. */
.ct-header-trigger,
.ct-header-cart > a,
.ct-header-search {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* --- Das Offcanvas-Panel ---------------------------------------------------

   Die Menuepunkte sind jetzt Pillen, keine Textzeilen: gross, rund, mit
   eigener Flaeche und genug Abstand, dass man sie im Gehen trifft. */


#offcanvas .mobile-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#offcanvas .mobile-menu .ct-menu-link {
	font-family: var(--ida-font-display);
	font-weight: 600;
	line-height: 1.2;
	border-radius: var(--ida-radius);
	border: 1px solid transparent;
	text-decoration: none;
}

#offcanvas .mobile-menu .ct-menu-link:hover,
#offcanvas .mobile-menu .ct-menu-link:focus-visible {
	background-color: var(--ida-sunny);
	border-color: var(--ida-ink);
	color: var(--ida-ink);
}

#offcanvas .mobile-menu .current-menu-item > .ct-menu-link,
#offcanvas .mobile-menu .current_page_item > .ct-menu-link {
	background-color: var(--ida-coral);
	color: #FFFFFF;
}

/* Der Schliessen-Knopf war ein 12-Pixel-Kreuz in der Ecke. Als runder Knopf
   mit eigener Flaeche ist er sichtbar und treffbar. */
#offcanvas .ct-toggle-close {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: var(--ida-card) !important;
	border: 1px solid var(--ida-border);
	color: var(--ida-ink);
}

#offcanvas .ct-toggle-close:hover {
	background-color: var(--ida-coral) !important;
	border-color: var(--ida-coral);
	color: #FFFFFF;
}

/* --- Warenkorb auf schmalen Schirmen --------------------------------------

   Unter 600 Pixeln wird das Produktbild kleiner und die Karte schmaler
   gepolstert, damit Titel und Preis nicht in zwei Zeichen pro Zeile
   zerfallen. */
@media (max-width: 599px) {
	.wc-block-cart-items__row {
		padding: .9rem 1rem;
		column-gap: .85rem;
	}

	.wc-block-cart-item__image img {
		width: 64px;
		height: 64px;
		border-radius: 14px;
	}


	.wp-block-woocommerce-cart .wc-block-components-sidebar,
	.wp-block-woocommerce-checkout .wc-block-components-sidebar {
		padding: 1.15rem;
	}

}

/* --- Kundenkonto ----------------------------------------------------------

   Die Kontoseite ist noch das klassische WooCommerce-Markup, keine Bloecke.
   Sie bekommt dieselbe Kartensprache wie Warenkorb und Kasse. */

.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-form-register {
	background: var(--ida-card);
	border: 1px solid var(--ida-border);
	border-radius: var(--ida-radius);
	box-shadow: var(--ida-shadow);
	padding: clamp(1.25rem, 1rem + 2vw, 2rem);
}

.woocommerce-account .woocommerce-form-login .woocommerce-form-row {
	margin-bottom: 1.1rem;
}

.woocommerce-account .woocommerce-Input,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"] {
	width: 100%;
	padding: .75rem .9rem;
	border: 1px solid var(--ida-border);
	border-radius: 14px;
	background: var(--ida-cream);
	font: inherit;
	color: var(--ida-ink);
}

.woocommerce-account .woocommerce-Input:focus,
.woocommerce-account input[type="text"]:focus,
.woocommerce-account input[type="email"]:focus,
.woocommerce-account input[type="password"]:focus {
	border-color: var(--ida-coral);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ida-coral) 25%, transparent);
	outline: none;
}

.woocommerce-account .woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}

/* Die Kontonavigation als Pillenreihe statt als Linkliste. Auf dem Telefon
   laeuft sie um, auf dem Schreibtisch steht sie als Spalte daneben. */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	padding: .6rem 1.1rem;
	border-radius: var(--ida-radius-pill);
	background: var(--ida-card);
	border: 1px solid var(--ida-border);
	font-family: var(--ida-font-display);
	font-weight: 600;
	font-size: .95rem;
	color: var(--ida-ink);
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--ida-sunny);
	border-color: var(--ida-ink);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--ida-coral);
	border-color: var(--ida-coral);
	color: #FFFFFF;
}

@media (min-width: 900px) {
	.woocommerce-account .woocommerce-MyAccount-navigation {
		float: none;
		width: auto;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		flex-direction: column;
		flex-wrap: nowrap;
	}
}

.woocommerce-account .woocommerce-orders-table,
.woocommerce-account table.shop_table {
	border: 1px solid var(--ida-border);
	border-radius: var(--ida-radius);
	background: var(--ida-card);
}

.woocommerce-account table.shop_table th {
	font-family: var(--ida-font-display);
	font-weight: 600;
	color: var(--ida-ink);
	background: var(--ida-cream);
}

/* ---------------------------------------------------------------------------
   Warenkorb und Kasse nach den Massen der Vorlage
   ---------------------------------------------------------------------------
   Die Vorlage liegt als Tailwind-Markup vor. Die Klassen lassen sich in feste
   Werte uebersetzen, und genau das steht hier -- jeweils mit dem Original in
   Klammern, damit spaeter nachvollziehbar bleibt, woher eine Zahl kommt.

   DREI DINGE AUS DER VORLAGE FEHLEN HIER ABSICHTLICH

   1. Der Balken "EUR 14.00 away from free shipping". Dieser Shop hat keine
      Versandkostengrenze; die Kosten werden nach Lieferanschrift berechnet
      (AGB Paragraf 5). Ein Balken, der eine Grenze suggeriert, waere eine
      falsche Werbeaussage.
   2. "30-day happy returns" unter dem Kassenknopf. Es sind vierzehn Tage, und
      die Ruecksendekosten traegt die Kundin (Widerrufsbelehrung).
   3. "Gift-ready packaging included". Ob Printful so verpackt, weiss ich
      nicht -- und was ich nicht weiss, verspreche ich nicht.

   Was stattdessen dort steht, ist belegbar: die Zahlungsarten, die wirklich
   angeboten werden, und der Hinweis auf die gesetzliche Gewaehrleistung.
   ------------------------------------------------------------------------ */

/* Spaltenverhaeltnis der Vorlage: lg:grid-cols-[minmax(0,1.35fr)_minmax(340px,0.65fr)]
   mit gap-8. WooCommerce baut die beiden Spalten als Flexbox, also wird das
   Verhaeltnis ueber flex-basis gesetzt. */
@media (min-width: 1000px) {
	.wc-block-components-sidebar-layout {
		gap: 2rem;                      /* gap-8 */
		align-items: flex-start;
	}

	.wc-block-components-sidebar-layout .wc-block-components-main {
		flex: 1.35 1 0;
	}

	.wc-block-components-sidebar-layout .wc-block-components-sidebar {
		flex: .65 1 340px;
		min-width: 340px;               /* minmax(340px, …) */
	}
}

/* --- Die Produktkarte ----------------------------------------------------- */

.wc-block-cart-items__row {
	border-radius: 1.5rem;              /* rounded-3xl */
	padding: 1.25rem;                   /* sm:p-5 */
	margin-bottom: 1rem;                /* space-y-4 */
	column-gap: 1rem;
}

/* Bildkachel: in der Vorlage ein gerundetes Quadrat mit zartem Sonnengelb
   dahinter (bg-pop-sunny/35). Die Kachel ist 104 Pixel (sm:grid-cols-[104px…]),
   das Motiv darin etwas kleiner. */
.wc-block-cart-item__image img {
	width: 104px;
	height: 104px;
	border-radius: 1.5rem;              /* rounded-3xl */
	background: color-mix(in srgb, var(--ida-sunny) 35%, transparent);
	border: 0;
	padding: 6px;
	object-fit: contain;
}

.wc-block-cart-item__product .wc-block-components-product-name {                 /* text-xl */
	line-height: 1.25;
}

/* "8,90 EUR" als Stueckpreis -- in der Vorlage fett, nicht grau. */
.wc-block-cart-item__prices .wc-block-components-product-price__value {
	font-weight: 700;
	color: var(--ida-ink);
}

/* Mengenwaehler: h-11 (2.75rem), rounded-full, Rand, heller Grund, p-1;
   die Knoepfe size-9 (2.25rem) und rund. */
.wc-block-components-quantity-selector {
	height: 2.75rem;
	padding: .25rem;
	border: 1px solid var(--ida-border);
	max-width: 8.5rem;
	display: inline-flex;
	align-items: center;
}

.wc-block-components-quantity-selector__button {
	width: 2.25rem;
	height: 2.25rem;
	min-width: 2.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.wc-block-components-quantity-selector__input {
	width: 2rem;                        /* w-8 */
	text-align: center;
	min-width: 0;
	padding: 0;
}

/* Zeilensumme: font-display text-lg, rechtsbuendig. */
.wc-block-cart-item__total .wc-block-components-product-price__value {                /* text-lg */
	text-align: right;
}

/* Der Entfernen-Knopf ist in der Vorlage ein rundes Geisterfeld, das erst beim
   Ueberfahren rot wird. */
.wc-block-cart-item__remove-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	min-height: 2.25rem;
	border-radius: 50%;
	text-decoration: none;
}

.wc-block-cart-item__remove-link:hover {
	background: color-mix(in srgb, var(--ida-cherry) 12%, transparent);
	color: var(--ida-cherry);
}

/* --- Die Zusammenfassung --------------------------------------------------

   rounded-3xl, p-6, und ein Schatten mit einem Hauch der Akzentfarbe
   (shadow-lg shadow-primary/10). */
.wp-block-woocommerce-cart .wc-block-components-sidebar,
.wp-block-woocommerce-checkout .wc-block-components-sidebar {
	border-radius: 1.5rem;
	padding: 1.5rem;
	box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--ida-coral) 10%, transparent),
	            0 4px 6px -4px color-mix(in srgb, var(--ida-coral) 10%, transparent);
}

.wp-block-woocommerce-cart h2.wc-block-cart__totals-title,
.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title {
	font-size: 1.5rem;                  /* text-2xl */
}

/* Der Steuerhinweis darunter klein, grau, rechts -- wie "Taxes included".

   ACHTUNG: die Klasse `...-footer-item-tax-value` gehoert hier NICHT hinein.
   Sie sitzt am BETRAG, nicht am Hinweis -- siehe die Berichtigung am Ende
   dieser Datei. */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__description {
	display: block;
	text-align: right;
	font-size: .75rem;                  /* text-xs */
	color: var(--ida-ink-soft);
}

/* --- Gutscheinfeld --------------------------------------------------------

   In der Vorlage: rundes Eingabefeld mit Etiketten-Symbol links (pl-9) und
   gelbem "Apply" daneben. Das Symbol ist ein eingebettetes SVG, damit dafuer
   keine zusaetzliche Datei geladen werden muss. */
.wc-block-components-totals-coupon__form {
	display: flex;
	gap: .5rem;
	align-items: flex-start;
}

.wc-block-components-totals-coupon__input input {
	height: 2.75rem;                    /* h-11 */
	border-radius: var(--ida-radius-pill);
	padding-left: 2.25rem;              /* pl-9 */
	background-color: var(--ida-card);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B5744' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z'/%3E%3Ccircle cx='7.5' cy='7.5' r='.5' fill='%236B5744'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: .85rem center;
}

/* "Apply" ist in der Vorlage der Zweitknopf: Sonnengelb mit dunkler Schrift,
   nicht korallenrot. Das haelt die Hierarchie -- Koralle bleibt dem einen
   wichtigen Knopf vorbehalten. */
.wc-block-components-totals-coupon .wc-block-components-button {
	height: 2.75rem;
	padding-inline: 1.25rem;            /* px-5 */
	background-color: var(--ida-sunny) !important;
	color: var(--ida-ink) !important;
	border: 0;
	font-weight: 700;
}

.wc-block-components-totals-coupon .wc-block-components-button:hover {
	background-color: color-mix(in srgb, var(--ida-sunny) 80%, var(--ida-ink)) !important;
}

/* --- Die Knoepfe ----------------------------------------------------------

   Kassenknopf: h-14, rounded-full, font-display text-lg, und beim Ueberfahren
   hebt er sich einen halben Schritt (hover:-translate-y-0.5). */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	height: 3.5rem;                     /* h-14 */
	font-size: 1.125rem;                /* text-lg */
	width: 100%;
}

/* Express-Zahlarten: zwei gleich breite, umrandete Pillen mit h-12. */
.wc-block-components-express-payment__event-buttons > li,
.wc-block-components-express-payment__event-buttons button {
	border-radius: var(--ida-radius-pill) !important;
	min-height: 3rem;                   /* h-12 */
}

.wc-block-components-express-payment {
	border-radius: 1.25rem;
	border-color: var(--ida-border);
}

/* Die Trennzeile "ODER" zwischen Express und Kasse. */
.wc-block-components-express-payment-continue-rule {
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--ida-ink-soft);
}

/* --- Die Ueberschrift der Warenkorbseite ----------------------------------

   Die Vorlage setzt eine grosse Fredoka-Zeile ueber den Warenkorb. Der
   Seitentitel kommt vom Theme; hier bekommt er nur die Groesse der Vorlage
   (text-5xl, ab mittlerer Breite text-6xl). */
body.woocommerce-cart .entry-header .page-title,
body.woocommerce-checkout .entry-header .page-title,
body.woocommerce-account .entry-header .page-title {
	font-family: var(--ida-font-display);
	font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
	font-weight: 600;
	letter-spacing: -.02em;
}

/* --- Schmale Schirme ------------------------------------------------------

   Die Vorlage stapelt unter sm: Bild und Text nebeneinander, Menge und Preis
   in einer eigenen Zeile darunter (col-span-2). Genau das macht WooCommerce
   von sich aus; hier werden nur die Groessen nachgezogen. */
@media (max-width: 599px) {
	/* Dieselbe Spezifitaet wie oben, sonst greift die Mobilfassung nicht. */
	.wp-block-woocommerce-cart .wc-block-cart-items__row {
		padding: 1rem;                  /* p-4 */
		column-gap: 1rem;
	}

	.wp-block-woocommerce-cart .wc-block-cart-item__image,
	.wp-block-woocommerce-cart .wc-block-cart-item__image img {
		width: 88px;                    /* grid-cols-[88px_1fr] */
	}

	.wp-block-woocommerce-cart .wc-block-cart-item__image img {
		height: 88px;
		border-radius: 1.25rem;
	}

	/* Menge und Preis ruecken unter Bild und Text, wie in der Vorlage
	   (col-span-2). */

	.wc-block-cart-item__product .wc-block-components-product-name {
		font-size: 1.0625rem;
	}


	.wc-block-components-totals-coupon__form {
		flex-wrap: wrap;
	}

	.wc-block-components-totals-coupon__input {
		flex: 1 1 100%;
	}
}

/* ---------------------------------------------------------------------------
   Nachbesserungen aus der Durchsicht am Live-Shop
   ---------------------------------------------------------------------------
   Punkt fuer Punkt aus den markierten Screenshots. Dieser Abschnitt steht
   bewusst am Ende: bei gleicher Spezifitaet gewinnt die spaetere Regel, also
   laesst sich hier nachjustieren, ohne weiter oben etwas umzubauen.
   ------------------------------------------------------------------------ */

/* 1. und 2. Karte, Bild und Abstaende.

   Diese vier Regeln tragen den Blockwrapper im Selektor. Das ist Absicht:
   ohne ihn gewinnen WooCommerces eigene Regeln, das Bild blieb schmal und der
   Zeilenpreis klebte auf einen Pixel genau am Kartenrand. Nachgemessen am
   Live-Shop -- mit Wrapper bleiben jetzt 29 Pixel Luft.

   Das Raster wird hier ausdruecklich gesetzt statt WooCommerce zu vertrauen:
   Bildspalte fest, Textspalte flexibel, Preisspalte so breit wie noetig. */
.wp-block-woocommerce-cart .wc-block-cart-items__row {
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr) auto;
	align-items: center;
	background: var(--ida-card-soft);
	border-radius: 1.75rem;
	padding: 1.5rem 1.75rem;
	column-gap: 1.5rem;
}

.wp-block-woocommerce-cart .wc-block-cart-item__image {
	width: 104px;
}

/* Kein gelber Rahmen mehr. Der kam aus der Vorlage (bg-pop-sunny/35), wo
   gezeichnete Kreise darin sitzen. Hier sind es Aquarelle mit eigenem Weiss --
   der Rahmen hat sie eingesperrt. */
.wp-block-woocommerce-cart .wc-block-cart-item__image img {
	width: 104px;
	height: 104px;
	max-width: none;
	border-radius: 1.5rem;
	background: #FFFFFF;
	padding: 0;
	border: 1px solid var(--ida-border);
	object-fit: cover;
}

.wp-block-woocommerce-cart .wc-block-cart-item__total {
	padding-left: 1.25rem;
	justify-self: end;
	text-align: right;
}

/* 3. Mengenwaehler: die Knopfflaechen in der Seitenfarbe, die Zahl kraeftiger.
      Der Rahmen bleibt hell, damit die Pille nicht zu schwer wird. */
.wc-block-components-quantity-selector {
	background: #FFFFFF;
}

.wc-block-components-quantity-selector__button {
	background: var(--ida-cream);
	border-radius: 50%;
	color: var(--ida-ink);
	font-size: 1.25rem;
	line-height: 1;
}

.wc-block-components-quantity-selector__button:hover:not(:disabled) {
	background: var(--ida-sunny);
}

.wc-block-components-quantity-selector__input {
	font-size: 1.0625rem;
	font-weight: 700;
}

/* 4. Insgesamt etwas groesser -- die Karte hatte viel Flaeche und kleine
      Schrift, das wirkte verloren. */
.wc-block-cart-item__product .wc-block-components-product-name {
	font-size: 1.3125rem;
}

.wc-block-components-product-metadata__description {
	font-size: .9375rem;
	line-height: 1.55;
}

.wc-block-cart-item__prices .wc-block-components-product-price__value {
	font-size: 1.0625rem;
}

.wc-block-cart-item__total .wc-block-components-product-price__value {
	font-size: 1.25rem;
}

/* Dieselbe Kartensprache fuer die Bestelluebersicht an der Kasse. */
.wp-block-woocommerce-cart .wc-block-components-sidebar,
.wp-block-woocommerce-checkout .wc-block-components-sidebar,
.wp-block-woocommerce-checkout .wc-block-components-checkout-step {
	background: var(--ida-card-soft);
	border-radius: 1.75rem;
}

/* --- 5. Das mobile Panel --------------------------------------------------

   Schmaler, rundum gefasst, und die Seite bleibt links daneben sichtbar.
   Blocksy setzt das Panel auf `inset: 0`, also ueber die volle Breite; hier
   wird daraus eine Schublade am rechten Rand. */
#offcanvas.ct-panel {
	inset: var(--admin-bar, 0px) 0 0 auto;
	width: min(82vw, 310px);
	border-radius: var(--ida-radius-lg) 0 0 var(--ida-radius-lg);
}

@media (min-width: 480px) {
	#offcanvas.ct-panel {
		width: 320px;
	}
}

#offcanvas .ct-panel-content-inner {
	padding: .5rem 1rem 2rem;
}

/* Der markierte Punkt soll den Text umschliessen, nicht die ganze Breite.
   Deshalb inline-flex statt block. */
#offcanvas .mobile-menu .ct-menu-link {
	display: inline-flex;
	align-items: center;
	width: auto;
	max-width: 100%;
	font-size: 1.2rem;
	padding: .7rem 1.15rem;
	margin-bottom: .25rem;
}

#offcanvas .mobile-menu li {
	display: block;
}

/* Der Schliessen-Knopf rund und ruhig -- vorher ein rotes Quadrat in der Ecke. */
#offcanvas .ct-toggle-close,
#offcanvas button.ct-toggle-close {
	width: 42px;
	height: 42px;
	border-radius: 50% !important;
	background-color: #FFFFFF !important;
	border: 1px solid var(--ida-border);
	color: var(--ida-ink) !important;
	margin: .75rem .75rem 0 auto;
}

#offcanvas button.ct-toggle-close:hover {
	background-color: var(--ida-sunny) !important;
	border-color: var(--ida-ink);
}

/* Das Kreuz selbst ist ein SVG mit eigener Fuellfarbe. Ohne diese Regel bleibt
   es weiss auf weiss -- der Knopf sah aus wie ein leerer Kreis. */
#offcanvas button.ct-toggle-close svg,
#offcanvas button.ct-toggle-close svg path {
	fill: currentColor;
	stroke: currentColor;
}

/* ---------------------------------------------------------------------------
   Zweite Durchsicht: Konto, Meldungen, Fusszeile
   ------------------------------------------------------------------------ */

html:root {
	/* Pastellfliedertoene, abgeleitet aus dem vorhandenen Flieder. Als eigene
	   Variablen, damit sich der Ton an einer Stelle aendern laesst. */
	--ida-lilac-pastell:  color-mix(in srgb, var(--ida-lilac) 26%, #FFFFFF);
	--ida-lilac-rand:     color-mix(in srgb, var(--ida-lilac) 55%, #FFFFFF);
}

/* 1. Die Kontonavigation stand in einer eigenen weissen Karte -- Karte in der
      Karte. Die Pillen tragen sich selbst, der Kasten darum kann weg. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	list-style: none;
	margin: 0;
}

/* 2. Hinweismeldungen: statt grauem Band ueber die ganze Breite ein kompakter
      Fliederblock, der nur so breit ist wie noetig -- Text und Schaltflaeche
      zusammen auf einer Flaeche. */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-notices-wrapper > div,
.woocommerce-account .woocommerce-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	width: fit-content;
	max-width: 100%;
	background: var(--ida-lilac-pastell);
	border: 1px solid var(--ida-lilac-rand);
	border-top: 1px solid var(--ida-lilac-rand);
	border-radius: var(--ida-radius);
	color: var(--ida-ink);
	padding: 1rem 1.25rem;
	margin: 0 0 1.25rem;
	box-shadow: none;
}

/* Die Schaltflaechen sitzen in WooCommerce rechts im Meldungskasten. Sie
   duerfen nicht ausbrechen, sonst steht der Knopf wieder auf Creme. */
.woocommerce-info .button,
.woocommerce-message .button,
.woocommerce-notices-wrapper .button {
	float: none;
	margin: 0;
	flex: 0 0 auto;
}

/* Fehlermeldungen behalten ihr Rot -- eine abgelehnte Anmeldung darf nicht
   aussehen wie ein freundlicher Hinweis. */
.woocommerce-error {
	background: color-mix(in srgb, var(--ida-cherry) 14%, #FFFFFF);
	border-color: color-mix(in srgb, var(--ida-cherry) 45%, #FFFFFF);
}

/* 3. Fusszeile mit runder Oberkante. Blocksy setzt die Flaeche auf eine innere
      Zeile, deshalb beide Ebenen -- und `overflow: hidden`, damit die Rundung
      auch wirklich schneidet. */
footer.ct-footer,
.ct-footer,
footer[data-footer] {
	border-radius: var(--ida-radius-lg) var(--ida-radius-lg) 0 0;
	overflow: hidden;
}

footer.ct-footer [data-row],
.ct-footer [data-row] {
	border-radius: inherit;
}

/* 4. Tabellen im Konto: der Text wurde unten abgeschnitten. Ursache war das
      `overflow: hidden`, mit dem die Rundung erzwungen wurde. Jetzt tragen die
      Zellen die Rundung an den Ecken selbst, und nichts wird mehr beschnitten. */
.woocommerce-account .woocommerce-orders-table,
.woocommerce-account table.shop_table {
	overflow: visible;
	border-collapse: separate;
	border-spacing: 0;
}

.woocommerce-account table.shop_table th,
.woocommerce-account table.shop_table td {
	padding: 1rem 1.25rem;
	line-height: 1.5;
	vertical-align: middle;
	white-space: normal;
}

.woocommerce-account table.shop_table tr:first-child th:first-child { border-top-left-radius: var(--ida-radius); }
.woocommerce-account table.shop_table tr:first-child th:last-child  { border-top-right-radius: var(--ida-radius); }
.woocommerce-account table.shop_table tr:last-child td:first-child  { border-bottom-left-radius: var(--ida-radius); }
.woocommerce-account table.shop_table tr:last-child td:last-child   { border-bottom-right-radius: var(--ida-radius); }

/* 5. Bestelluebersicht farblich abgesetzt. Sie ist der Ort, an dem man die
      Zahlen nachrechnet -- ein eigener Ton hebt sie aus der Reihe der weissen
      Karten heraus, ohne laut zu werden. */
.wp-block-woocommerce-checkout .wc-block-components-sidebar,
.wp-block-woocommerce-cart .wc-block-components-sidebar {
	background: var(--ida-lilac-pastell);
	border-color: var(--ida-lilac-rand);
}

/* Die Zeilen darin bleiben hell, sonst verschwimmt alles zu einer Flaeche. */
.wc-block-components-order-summary-item {
	background: #FFFFFF;
	border-radius: 1rem;
	padding: .75rem;
	margin-bottom: .5rem;
}

/* 6. Auf dem Telefon wurde der Preis in der Bestelluebersicht abgeschnitten.
      Die Zeile ist ein Raster mit fester Bildspalte; der Preis bekam keinen
      eigenen Platz und lief aus der Karte heraus. */
@media (max-width: 599px) {
	.wc-block-components-order-summary-item {
		display: grid;
		grid-template-columns: 48px minmax(0, 1fr);
		grid-template-areas:
			"bild beschreibung"
			"preis preis";
		column-gap: .75rem;
		row-gap: .35rem;
		align-items: start;
	}

	.wc-block-components-order-summary-item__image { grid-area: bild; }
	.wc-block-components-order-summary-item__description { grid-area: beschreibung; }

	.wc-block-components-order-summary-item__total-price {
		grid-area: preis;
		justify-self: end;
		text-align: right;
		white-space: nowrap;
		font-weight: 700;
	}
}

/* ---------------------------------------------------------------------------
   Produktseite: die Geschichte als Karte, dazu Pastellkreise
   ---------------------------------------------------------------------------
   Die Umsortierung passiert in functions.php (idakera_geschichte_als_karte).
   Hier steht nur das Aussehen.
   ------------------------------------------------------------------------ */

/* Das Beschreibungsfeld stand auf 691 Pixel -- der Lesebreite von 72 Zeichen.
   Nachgemessen: der Reiter selbst ist 1425 Pixel breit, der Inhalt darin war
   auf die Haelfte begrenzt. Genau das war die leere rechte Seite. Fuer den
   Fliesstext bleibt die Lesebreite erhalten, sie sitzt jetzt auf der linken
   Spalte statt auf dem ganzen Feld. */
@media (min-width: 1000px) {
	/* Dieselbe Spezifitaet wie die Regel weiter oben im Abschnitt
	   "Einzelprodukt", die hier 72ch setzt -- mit einem schwaecheren Selektor
	   bleibt das Feld stur auf 691 Pixel stehen. Nachgemessen. */
	.woocommerce div.product .woocommerce-Tabs-panel--description {
		max-width: none;
	}

	.ida-produkt-text__haupt {
		max-width: 68ch;
	}
}

.ida-produkt-text {
	display: grid;
	gap: 2rem;
	align-items: start;
}

@media (min-width: 1000px) {
	.ida-produkt-text {
		grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
		gap: 3rem;
	}

	/* Die Karte laeuft beim Scrollen ein Stueck mit -- der Text links ist lang,
	   die Geschichte soll nicht nach drei Zeilen oben verschwinden. */
	.ida-produkt-text__geschichte {
		position: sticky;
		top: 6rem;
	}
}

.ida-produkt-text__geschichte {
	position: relative;
	background: var(--ida-lilac-pastell);
	border: 1px solid var(--ida-lilac-rand);
	border-radius: var(--ida-radius-lg);
	padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
	box-shadow: var(--ida-shadow);
}

.ida-produkt-text__geschichte h3 {
	font-family: var(--ida-font-display);
	font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem);
	font-weight: 600;
	color: var(--ida-ink);
	margin: 0 0 .75rem;
	line-height: 1.2;
}

.ida-produkt-text__geschichte p {
	margin: 0;
	color: var(--ida-ink);
	font-size: 1.0625rem;
	line-height: 1.7;
}

/* Die Karte enthielt frueher einen einzigen Absatz. Seit der Filter die
   Erzaehlung ueber mehrere <p> hinweg einsammelt, koennen es mehrere sein --
   ohne Abstand klebten sie aneinander. */
.ida-produkt-text__geschichte p + p {
	margin-top: 1.1rem;
}

/* Ein Anfuehrungszeichen als stilles Signal, dass hier jemand erzaehlt. */
.ida-produkt-text__geschichte::before {
	content: "";
	position: absolute;
	top: -18px;
	left: 28px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--ida-sunny);
	border: 1px solid var(--ida-ink);
}

.ida-produkt-text__geschichte::after {
	content: "\201C";
	position: absolute;
	top: -26px;
	left: 38px;
	font-family: var(--ida-font-display);
	font-size: 3rem;
	line-height: 1;
	color: var(--ida-ink);
}

/* --- Pastellkreise auf der Produktseite -----------------------------------

   Dasselbe Spiel wie auf der Startseite, nur ruhiger: zwei weiche Kreise
   hinter dem Inhalt. Sie sind rein dekorativ, liegen hinter allem und fangen
   keine Klicks ab. Unter 1000 Pixeln entfallen sie -- auf dem Telefon ist
   kein Platz fuer Dekoration, die den Text anschiebt. */
@media (min-width: 1000px) {
	.single-product .site-main {
		position: relative;
		isolation: isolate;
	}

	.single-product .site-main::before,
	.single-product .site-main::after {
		content: "";
		position: absolute;
		z-index: -1;
		border-radius: 50%;
		pointer-events: none;
		filter: blur(2px);
	}

	.single-product .site-main::before {
		width: 320px;
		height: 320px;
		top: 4%;
		right: -120px;
		background: radial-gradient(circle at 35% 35%,
		            color-mix(in srgb, var(--ida-mint) 55%, #FFFFFF),
		            color-mix(in srgb, var(--ida-mint) 18%, transparent));
	}

	.single-product .site-main::after {
		width: 240px;
		height: 240px;
		bottom: 12%;
		left: -100px;
		background: radial-gradient(circle at 60% 40%,
		            color-mix(in srgb, var(--ida-bubblegum) 48%, #FFFFFF),
		            color-mix(in srgb, var(--ida-bubblegum) 15%, transparent));
	}
}

/* Ein dritter Kreis in Flieder hinter der Geschichte -- so greifen Karte und
   Hintergrund denselben Ton auf. */
@media (min-width: 1000px) {
	.ida-produkt-text {
		position: relative;
	}

	.ida-produkt-text::after {
		content: "";
		position: absolute;
		z-index: -1;
		width: 180px;
		height: 180px;
		right: -60px;
		bottom: -70px;
		border-radius: 50%;
		pointer-events: none;
		background: radial-gradient(circle at 40% 40%,
		            color-mix(in srgb, var(--ida-sky) 45%, #FFFFFF),
		            color-mix(in srgb, var(--ida-sky) 12%, transparent));
	}
}

/* --- Der Warenkorbpreis im Hamburger-Menue --------------------------------

   In der Vorlage steht die Summe unten in der Schublade, durch eine Linie vom
   Menue getrennt und farblich abgesetzt. Genau das hier -- nur ohne den
   Fortschrittsbalken, den dieser Shop nicht ehrlich fuellen kann. */
/* Die Klasse steht zweimal im Selektor. Das ist kein Versehen: weiter oben
   macht `#offcanvas *:not(a):not(button)…` alles im Panel durchsichtig, und
   zwar mit !important. Diese Regel braucht deshalb eine Klasse mehr, sonst
   bleibt der Block farblos -- nachgemessen, der Hintergrund kam nicht durch. */
#offcanvas .ct-header-cart.ct-header-cart {
	display: block;
	margin-top: 1.5rem;
	padding: 1.1rem 1.25rem;
	border-top: 2px solid var(--ida-lilac-rand);
	border-radius: var(--ida-radius);
	background: var(--ida-lilac-pastell) !important;
}

#offcanvas .ct-header-cart a,
#offcanvas .ct-header-cart .ct-cart-total,
#offcanvas .ct-header-cart .ct-cart-price {
	font-family: var(--ida-font-display);
	font-size: 1.35rem;
	font-weight: 600;
	color: var(--ida-ink);
	display: inline-flex;
	align-items: center;
	gap: .6rem;
}


/* ---------------------------------------------------------------------------
   Dritte Durchsicht: Preise, Konto, mobiler Warenkorb
   ------------------------------------------------------------------------ */

/* 1. Der Preis lag auf dem Text.

   Nachgemessen am Telefon: `.wc-block-cart-item__total` hatte zwar
   `grid-column: 1 / -1`, aber `grid-row: 1` -- also dieselbe Zeile wie Bild und
   Beschreibung. Deshalb stand der Betrag mitten im Text. Eine Spaltenangabe
   ohne Zeilenangabe reicht bei automatischer Platzierung nicht; alle drei
   Felder werden jetzt ausdruecklich gesetzt. */
@media (max-width: 599px) {
	.wp-block-woocommerce-cart .wc-block-cart-items__row {
		grid-template-columns: 88px minmax(0, 1fr);
		row-gap: .75rem;
	}

	/* Die drei Platzierungen tragen !important, und das ist keine Bequemlichkeit.
	   Nachgemessen: ohne !important blieb `grid-row` auf 1 stehen, obwohl in
	   allen geladenen Stylesheets keine konkurrierende Regel zu finden war --
	   erst eine erzwungene Angabe am Element selbst hat den Preis nach unten
	   gesetzt (geprueft: Zeilenhoehe wuchs von 213 auf 254 Pixel, der Betrag
	   sass danach unter der Beschreibung statt darauf). Ein Preis, der quer
	   ueber dem Produkttext liegt, ist kein Schoenheitsfehler. */
	.wp-block-woocommerce-cart .wc-block-cart-item__image {
		grid-column: 1 !important;
		grid-row: 1 !important;
	}

	.wp-block-woocommerce-cart .wc-block-cart-item__product {
		grid-column: 2 !important;
		grid-row: 1 !important;
	}

	.wp-block-woocommerce-cart .wc-block-cart-item__total {
		grid-column: 1 / -1 !important;
		grid-row: 2 !important;
		justify-self: end;
		align-self: center;
		margin-top: 0;
		padding-left: 0;
	}
}

/* 2. Preise deutlich groesser -- auf allen Breiten.

   Die Gesamtsumme ist die Zahl, wegen der die Seite ueberhaupt aufgerufen
   wird. Sie stand kleiner da als die Produkttitel.

   ACHTUNG, diese beiden Regeln wirken NICHT auf Warenkorb und Kasse: dort
   gewinnt WooCommerces eigene Ruecksetzung, und dagegen steht die Regel mit
   vier Klassen am Ende der Datei. Stehenbleiben muessen sie trotzdem -- sie
   sind die Vorgabe fuer jeden anderen Ort, an dem dieser Block auftaucht,
   etwa im Mini-Warenkorb, wo es kein Seitenleisten-Layout gibt. */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 2.25rem;
	line-height: 1.1;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-size: 1.35rem;
}

.wc-block-components-totals-item__value {
	font-size: 1.0625rem;
}

.wp-block-woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price__value {
	font-size: 1.45rem;
}

.wc-block-components-order-summary-item__total-price {
	font-size: 1.125rem;
	font-weight: 700;
}

@media (max-width: 599px) {
	.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
		font-size: 1.9rem;
	}

	.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
		font-size: 1.2rem;
	}

	.wp-block-woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price__value {
		font-size: 1.35rem;
	}
}

/* 3. Der weisse Kasten hinter der Kontonavigation.

   Die Regel aus der zweiten Durchsicht hat ihn nicht erwischt. Deshalb hier
   mit `!important` und allen Schreibweisen -- der Kasten kommt entweder vom
   Theme oder von WooCommerce, und ohne eingeloggte Ansicht laesst sich nicht
   nachsehen, welcher von beiden es ist. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account nav.woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-navigation > ul,
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	background: none !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* 4. Adressen auf dem Telefon: "Rechnungsadresse bearbeiten" lag ueber der
      Ueberschrift. Beides steht in derselben Zeile, die auf schmalen Schirmen
      nicht umbrechen konnte. */
.woocommerce-account .woocommerce-Addresses {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.woocommerce-account .woocommerce-Addresses {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.woocommerce-account .woocommerce-Address {
	width: auto;
	float: none;
	background: var(--ida-card-soft);
	border: 1px solid var(--ida-border);
	border-radius: var(--ida-radius);
	padding: 1.25rem;
}

.woocommerce-account .woocommerce-Address-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem 1rem;
	margin-bottom: .75rem;
}

.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
	margin: 0;
	font-size: 1.15rem;
}

.woocommerce-account .woocommerce-Address-title .edit {
	position: static;
	white-space: nowrap;
	font-size: .9rem;
}

.woocommerce-account .woocommerce-Address address {
	font-style: normal;
	line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   Bewegung mit Federung
   ---------------------------------------------------------------------------
   Die Vorlage lebt von kleinen Federungen. Zwei Regeln gelten dabei durchweg:

   1. Bewegt wird nur `transform` und `opacity`. Beides laeuft auf der
      Grafikkarte; Layout-Eigenschaften wie `width` oder `top` zu animieren
      laesst auf dem Telefon die Bilder ruckeln.
   2. Keine Bewegung ohne Abschaltung. Alles hier steht in
      `prefers-reduced-motion: no-preference` -- wer im Betriebssystem
      reduzierte Bewegung eingestellt hat, bekommt gar nichts davon zu sehen.
      Der Abschnitt darunter raeumt zusaetzlich auf.
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
	/* Knoepfe federn beim Druecken ein. Die Kurve ueberschwingt leicht
	   (1.56), das ist das "bouncy" aus der Vorlage. */
	.button,
	button,
	.ida-btn,
	.wc-block-components-button,
	#offcanvas .mobile-menu .ct-menu-link {
		transition: transform .24s cubic-bezier(.34, 1.56, .64, 1),
		            background-color .2s var(--ida-ease),
		            color .2s var(--ida-ease),
		            border-color .2s var(--ida-ease);
	}

	.button:active,
	button:active,
	.ida-btn:active,
	.wc-block-components-button:active {
		transform: scale(.95);
	}

	#offcanvas .mobile-menu .ct-menu-link:hover {
		transform: translateX(6px);
	}

	/* Die Menuepunkte kommen nacheinander herein, nicht alle auf einmal.
	   Gestaffelt wirkt es erzaehlt statt ruckartig. */
	body[data-panel*="in"] #offcanvas .mobile-menu > ul > li {
		animation: ida-panel-rein .42s cubic-bezier(.22, 1, .36, 1) backwards;
	}

	body[data-panel*="in"] #offcanvas .mobile-menu > ul > li:nth-child(1) { animation-delay: .06s; }
	body[data-panel*="in"] #offcanvas .mobile-menu > ul > li:nth-child(2) { animation-delay: .12s; }
	body[data-panel*="in"] #offcanvas .mobile-menu > ul > li:nth-child(3) { animation-delay: .18s; }
	body[data-panel*="in"] #offcanvas .mobile-menu > ul > li:nth-child(4) { animation-delay: .24s; }
	body[data-panel*="in"] #offcanvas .mobile-menu > ul > li:nth-child(5) { animation-delay: .30s; }
	body[data-panel*="in"] #offcanvas .mobile-menu > ul > li:nth-child(n+6) { animation-delay: .36s; }

	/* Eine neue Warenkorbzeile hupft einmal kurz -- die Rueckmeldung, dass
	   wirklich etwas angekommen ist. */
	.wc-block-cart-items__row {
		animation: ida-karte-rein .45s cubic-bezier(.34, 1.56, .64, 1) backwards;
	}
}

@keyframes ida-panel-rein {
	from { opacity: 0; transform: translateX(24px); }
	to   { opacity: 1; transform: none; }
}

@keyframes ida-karte-rein {
	from { opacity: 0; transform: translateY(10px) scale(.985); }
	to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   Bewegung zurueckhaltend halten
   ---------------------------------------------------------------------------
   Diese Gestaltung bewegt viel: Laufband, schwebende Untersetzer, rotierendes
   Siegel, kippende Karten. Wer im Betriebssystem reduzierte Bewegung
   eingestellt hat, bekommt nichts davon -- fuer Menschen mit vestibulaeren
   Beschwerden ist genau das koerperlich unangenehm.
   ------------------------------------------------------------------------ */

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

	.ida-marquee__track,
	.ida-hero__chip,
	.ida-hero__seal,
	body[data-panel*="in"] #offcanvas .mobile-menu > ul > li,
	.wc-block-cart-items__row {
		animation: none !important;
	}

	.ida-hero__seal { display: none; }

	.woocommerce ul.products li.product:hover,
	.woocommerce ul.products li.product:nth-child(even):hover,
	.woocommerce ul.products li.product:hover img,
	.ida-why__card:hover,
	.ida-why__pill:hover,
	.button:hover,
	button:hover,
	.ida-btn:hover,
	.button:active,
	button:active,
	.ida-btn:active,
	.wc-block-components-button:active,
	.wc-block-cart-items__row:hover,
	#offcanvas .mobile-menu .ct-menu-link:hover {
		transform: none;
	}
}

/* ===========================================================================
   VIERTE DURCHSICHT, 2026-10-02
   ---------------------------------------------------------------------------
   Vier Beanstandungen, zwei davon mit mitgelieferter Diagnose. Beide Male lag
   die Diagnose richtig und meine vorherige Vermutung falsch -- das ist unten
   jeweils vermerkt, damit niemand den alten Irrweg noch einmal geht.
   ======================================================================== */

/* --- 1. Der weisse Kasten hinter der Kontonavigation -----------------------

   Die Klasse heisst `.ct-acount-nav`. Mit EINEM c -- ein Tippfehler in
   Blocksy, der seit Jahren so im Theme steht. Alle bisherigen Regeln zielten
   auf `.woocommerce-MyAccount-navigation`, also auf das WooCommerce-Element
   DARIN. Gefaerbt war aber der Blocksy-Rahmen aussen herum:

       background: var(--account-nav-background-initial-color,
                       var(--theme-palette-color-8));

   Weil die Variable nicht gesetzt ist, greift der Vorgabewert -- Palette 8,
   und das ist Weiss. Hier wird sie deshalb direkt belegt, zusaetzlich zum
   `background: none`. So faellt der Kasten auch dann weg, wenn Blocksy die
   Eigenschaft spaeter an einer anderen Stelle noch einmal setzt. */
.woocommerce-account .ct-acount-nav,
.woocommerce-account .ct-acount-nav > ul,
.ct-acount-nav {
	--account-nav-background-initial-color: transparent;
	--account-nav-background-hover-color: transparent;
	background: none !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	/* `overflow: hidden` und `border-radius: 5px` kamen vom selben Kasten.
	   Ohne Flaeche ergeben beide keinen Sinn mehr, und `overflow: hidden`
	   wuerde die aufgehellten Hover-Pillen an den Raendern abschneiden. */
	overflow: visible !important;
	border-radius: 0 !important;
	padding: 0 !important;
}

/* Die Breitenangaben des Kastens bleiben sinnvoll -- sie machen aus der
   Navigation die linke Spalte. Nur etwas luftiger, weil ohne Kastenrand der
   Abstand zur Inhaltsspalte optisch kleiner wirkt. */
@media (min-width: 690px) {
	.woocommerce-account .ct-acount-nav {
		margin-inline-end: 44px;
	}
}

/* --- 2. Die eckige Ecke am Menue ------------------------------------------

   Nachgemessen am offenen Panel: der Schatten sitzt nicht auf `#offcanvas`,
   sondern auf `.ct-panel-inner` -- und dieses Element hat `border-radius: 0`.
   Ein eckiger Kasten mit `0 0 70px`-Schatten in einem runden Panel: an der
   abgerundeten Ecke stand der Schatten als rechter Winkel heraus, und genau
   das liess die Ecke spitz aussehen.

   Der Schatten wandert deshalb nicht weg, er wird rund gemacht. `inherit`
   uebernimmt den Radius des Panels, damit beide Werte nicht auseinander
   laufen koennen, wenn oben einer geaendert wird. Die Farbe wird von Schwarz
   auf denselben warmen Braunton umgestellt wie ueberall sonst. */
#offcanvas.ct-panel {
	--theme-box-shadow: -18px 0 60px -18px rgba(63, 45, 30, .34);
	/* Der eigene Schatten faellt weg: er saesse jetzt doppelt auf derselben
	   Kante, und zwei uebereinander gelegte Schatten werden sichtbar dunkler
	   als einer. Geworfen wird er von `.ct-panel-inner` darunter. */
	box-shadow: none;
}

#offcanvas .ct-panel-inner {
	border-radius: inherit;
	box-shadow: var(--theme-box-shadow);
}

/* --- 3. Der Warenkorbpreis im Menue ---------------------------------------

   Die Regel aus der dritten Durchsicht zielte auf `.ct-cart-total` und
   `.ct-cart-price`. Beide Klassen vergibt Blocksy im Panel nicht. Das Markup
   lautet:

       a.ct-cart-item > span.ct-label[data-price] > span.ct-amount > …

   Die 1,35rem landeten auf dem `<a>`, der Preis-Span setzte seine eigenen
   12px dagegen und gewann. Hier steht die Groesse jetzt dort, wo der Betrag
   tatsaechlich steht. */
#offcanvas .ct-header-cart .ct-label,
#offcanvas .ct-header-cart .ct-amount,
#offcanvas .ct-header-cart .ct-label .woocommerce-Price-amount,
#offcanvas .ct-header-cart .ct-label bdi {
	font-family: var(--ida-font-display);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--ida-ink);
}

/* Das Waehrungszeichen eine Spur kleiner, sonst drueckt es die Zahl optisch
   nach unten. */
#offcanvas .ct-header-cart .woocommerce-Price-currencySymbol {
	font-size: .78em;
	font-weight: 700;
}

#offcanvas .ct-header-cart svg {
	width: 26px;
	height: 26px;
}

/* Die farbige Trennung oberhalb des Betrags kraeftiger: eine eigene Zeile mit
   Beschriftung, wie in der Vorlage. Der Text kommt aus dem Stylesheet, weil
   Blocksy im Panel keine Beschriftung ausgibt. */
#offcanvas .ct-header-cart.ct-header-cart::before {
	content: "Warenkorb gesamt";
	display: block;
	margin-bottom: .35rem;
	font-family: var(--ida-font-text);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--ida-ink) 62%, transparent);
}

/* --- 4. Zurueck aus einer Kategorie ---------------------------------------

   Wer ueber eine Kategorie in den Shop kam, sass dort fest: das Raster zeigte
   nur noch diese eine Kategorie, und nichts fuehrte zurueck zur vollen
   Auswahl. Der Link wird in functions.php ausgegeben. */
.ida-zurueck-leiste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	margin: 0 0 1.5rem;
}

.ida-zurueck-leiste__link {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .6rem 1.2rem;
	border: 2px solid var(--ida-lilac-rand);
	border-radius: var(--ida-radius-pill);
	background: var(--ida-lilac-pastell);
	font-family: var(--ida-font-display);
	font-size: 1rem;
	font-weight: 600;
	color: var(--ida-ink);
	text-decoration: none;
	transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), background-color .18s ease;
}

.ida-zurueck-leiste__link:hover,
.ida-zurueck-leiste__link:focus-visible {
	background: color-mix(in srgb, var(--ida-lilac) 38%, #FFFFFF);
	transform: translateX(-3px);
	color: var(--ida-ink);
}

.ida-zurueck-leiste__pfeil {
	transition: transform .18s cubic-bezier(.34, 1.56, .64, 1);
}

.ida-zurueck-leiste__link:hover .ida-zurueck-leiste__pfeil {
	transform: translateX(-3px);
}

/* Der Name der Kategorie daneben, damit klar ist, wo man gerade steht. */
.ida-zurueck-leiste__hier {
	font-size: .95rem;
	color: color-mix(in srgb, var(--ida-ink) 65%, transparent);
}

/* --- 5. Aus dem Hero-Bild wird eine Spur ----------------------------------

   Bisher stand dort ein einziges Foto, fest verdrahtet auf Anhang 50. Jetzt
   laufen mehrere Motive durch, und jedes ist ein Link auf sein Produkt.

   WARUM SCROLL-SNAP UND NICHT EIN KARUSSELL-SKRIPT

   Die Spur ist ein ganz gewoehnlicher waagerechter Scroll-Container mit
   Schnapppunkten. Das hat drei Folgen, die ein selbstgebautes Karussell alle
   einzeln nachbauen muesste:

     - Wischen auf dem Telefon funktioniert ohne eine Zeile JavaScript, mit
       dem Schwung und dem Gummiband des Betriebssystems.
     - Faellt JavaScript aus, bleibt eine scrollbare Bilderreihe. Kein leerer
       Kasten, kein eingefrorenes erstes Bild.
     - Die Tastatur erreicht jedes Bild, weil es echte Links sind.

   Das Skript macht nur zwei Dinge: es scrollt von selbst weiter und haelt die
   Punkte unten im Takt. */
.ida-hero__slider {
	position: relative;
	width: 100%;
	height: 100%;
}

/* Die Fassung -- Rahmen, Rundung und Schatten sassen vorher am Bild selbst.
   Sie gehoeren jetzt an die Spur, sonst bekaeme jedes einzelne Motiv einen
   eigenen Rahmen und man saehe beim Wischen vier weisse Kanten wandern. */
.ida-hero__track {
	display: flex;
	width: 100%;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	border-radius: 22%;
	border: 10px solid var(--ida-card);
	box-shadow: var(--ida-shadow-lift);
	background: var(--ida-card);
	/* Die Leiste wird ausgeblendet, nicht abgeschaltet: gescrollt wird
	   weiterhin, sie sieht hier nur nicht gut aus. */
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* Verhindert, dass eine waagerechte Wischgeste die ganze Seite mitzieht. */
	overscroll-behavior-x: contain;
}

.ida-hero__track::-webkit-scrollbar {
	display: none;
}

.ida-hero__slide {
	flex: 0 0 100%;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	line-height: 0;
}

/* Der Rahmen ist an die Spur gewandert, deshalb hier ausdruecklich keiner.
   Die alte Regel weiter oben im Stylesheet gilt weiter fuer den Fall, dass
   gar kein Produkt mit Bild gefunden wird -- dann steht wieder ein einzelnes
   Foto ohne Spur da. */
.ida-hero__track .ida-hero__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}

.ida-hero__slide:hover .ida-hero__photo,
.ida-hero__slide:focus-visible .ida-hero__photo {
	transform: scale(1.04);
}

/* Der Produktname blendet sich unten ein. Nur auf dem aktiven Bild, damit
   beim Wischen nicht drei Beschriftungen gleichzeitig vorbeiziehen.

   WARUM EINE HELLE PILLE UND KEIN DUNKLER VERLAUF

   Der erste Entwurf legte einen dunklen Verlauf ueber den unteren Bildrand,
   wie man es von Bildunterschriften kennt. Am lebenden Shop faellt der aber
   durch: die Produktfotos sind Printful-Mockups, auf denen der Untersetzer
   auf WEISSEM Grund liegt. Ein dunkler Verlauf ueber Weiss ergibt einen
   grauen Balken, der aussieht wie ein Darstellungsfehler.

   Eine Pille mit eigener Flaeche liest dagegen auf hellem wie auf dunklem
   Motiv -- und sie bleibt lesbar, wenn spaeter einmal ein freigestelltes
   Motiv dazukommt. */
.ida-hero__name {
	position: absolute;
	left: 50%;
	bottom: 3.4rem;
	transform: translate(-50%, 8px);
	max-width: min(80%, 17rem);
	padding: .45rem 1rem;
	border-radius: var(--ida-radius-pill);
	background: rgba(255, 253, 250, .93);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: var(--ida-shadow);
	font-family: var(--ida-font-display);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ida-ink);
	text-align: center;
	/* Eine Zeile. Gekuerzt wird schon in functions.php; das hier faengt den
	   Fall ab, dass ein Name auch ohne Zusaetze noch zu lang ist. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0;
	transition: opacity .3s ease, transform .3s ease;
	pointer-events: none;
}

.ida-hero__slide[data-aktiv="ja"] .ida-hero__name {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* --- Die Punkte ----------------------------------------------------------

   Sie liegen auf dem unteren Bildrand und nicht darunter: unter der Buehne
   schwebt der gruene Untersetzer, und zwei uebereinander stehende Reihen
   runder Dinge liest niemand mehr auseinander. */
.ida-hero__dots {
	position: absolute;
	left: 50%;
	bottom: 1.4rem;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	align-items: center;
	gap: .45rem;
	padding: .45rem .7rem;
	border-radius: var(--ida-radius-pill);
	background: rgba(255, 253, 250, .82);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: var(--ida-shadow);
}

.ida-hero__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--ida-ink) 26%, transparent);
	cursor: pointer;
	transition: width .25s cubic-bezier(.34, 1.56, .64, 1), background-color .25s ease;
}

.ida-hero__dot:hover {
	background: color-mix(in srgb, var(--ida-ink) 45%, transparent);
}

/* Der aktive Punkt wird zum Strich. Das unterscheidet ihn auch dann, wenn
   jemand Farben nicht auseinanderhalten kann. */
.ida-hero__dot[aria-current="true"] {
	width: 26px;
	border-radius: var(--ida-radius-pill);
	background: var(--ida-coral);
}

.ida-hero__dot:focus-visible {
	outline: 2px solid var(--ida-ink);
	outline-offset: 2px;
}

/* Ohne JavaScript gibt es nichts zu bedienen -- dann ist die Punktreihe nur
   eine irrefuehrende Verzierung. Das Skript nimmt das Attribut weg. */
.ida-hero__dots[hidden] {
	display: none;
}

@media (max-width: 782px) {
	.ida-hero__dots {
		bottom: 1rem;
	}
}

/* Wer Bewegung abbestellt hat, bekommt keine. Das Skript schaltet das
   Weiterlaufen ab; hier faellt zusaetzlich das weiche Scrollen weg, sonst
   gleitet die Spur beim Antippen eines Punktes immer noch. */
@media (prefers-reduced-motion: reduce) {
	.ida-hero__track {
		scroll-behavior: auto;
	}

	.ida-hero__track .ida-hero__photo,
	.ida-hero__name {
		transition: none;
	}

	.ida-hero__slide:hover .ida-hero__photo {
		transform: none;
	}
}

/* ===========================================================================
   FUENFTE DURCHSICHT, 2026-10-03 -- Telefon und Tablet
   ======================================================================== */

/* --- 1. Der fliederfarbene Fleck ueber der Ueberschrift -------------------

   Auf jeder Seite stand links oben ein kleiner Fliederkasten, der aussah wie
   eine Verzierung. Er war keine. Nachgemessen auf /vertrag-widerrufen/:

       <div class="woocommerce-notices-wrapper">
           <div class="woocommerce"></div>     <-- leer
       </div>

   WooCommerce gibt diesen Meldungsbereich auf jeder Seite aus, auch wenn es
   nichts zu melden gibt. Meine Regel aus der dritten Durchsicht faerbt
   `.woocommerce-notices-wrapper > div` fliederfarben und rundet ihn -- ein
   leerer Kasten bekam damit Flaeche, Rand und Polsterung, ohne Inhalt.

   Leere Meldungskaesten verschwinden deshalb. `:empty` trifft nur Elemente
   ganz ohne Kindknoten und ohne Text; sobald WooCommerce etwas hineinschreibt,
   greift die Regel nicht mehr und die Meldung erscheint wie vorgesehen. */
.woocommerce-notices-wrapper:empty,
.woocommerce-notices-wrapper > div:empty,
.woocommerce-notices-wrapper > .woocommerce:empty {
	display: none !important;
}

/* --- 2. Symbole lagen auf dem Text ----------------------------------------

   WooCommerce setzt das Symbol einer Meldung als `::before` mit
   `position: absolute` an den linken Rand. Mein Meldungskasten ist aber ein
   Flex-Kasten mit eigener Polsterung -- das absolut gesetzte Symbol wusste
   davon nichts und landete auf dem ersten Wort ("Bestaetigen Sie Ihre
   E-Mail-Adresse" mit einem Zeichen quer ueber dem B).

   Statt das Symbol zu verstecken, wird es ein normales Flex-Element. Dann
   ordnet es sich links ein, der `gap` des Kastens haelt den Abstand, und das
   Symbol bleibt erhalten. */
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-notices-wrapper > div::before {
	position: static;
	flex: 0 0 auto;
	top: auto;
	left: auto;
	right: auto;
	margin: 0;
	padding: 0;
	font-size: 1.15em;
	line-height: 1;
	align-self: flex-start;
}

/* Dieselbe Ursache im Kundenkonto: Blocksy stellt den Eintraegen ein Symbol
   voran. Ohne Flex-Ausrichtung sass es auf der Beschriftung. */
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	gap: .6rem;
	line-height: 1.3;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a svg,
.woocommerce-account .woocommerce-MyAccount-navigation li a img,
.woocommerce-account .woocommerce-MyAccount-navigation li a .ct-icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

/* --- 3. Der Freiraum ueber dem Kopfbereich --------------------------------

   Nur in der angemeldeten Ansicht zu sehen, also bei Ihnen, nicht bei
   Kundinnen. Der Kopfbereich klebt mit

       top: var(--wp-admin--admin-bar--height, 0px)

   unter der Administrationsleiste. Das stimmt am Schreibtisch, wo die Leiste
   fest oben steht. Unterhalb von 783 Pixeln setzt WordPress sie aber selbst
   auf `position: absolute` -- sie scrollt dann weg, und der Kopfbereich bleibt
   mit 46 Pixeln Abstand zu nichts stehen. Genau der Streifen war zu sehen.

   Unterhalb derselben Grenze also kein Versatz. Die 782 Pixel sind nicht
   gewaehlt, sondern die Grenze, die WordPress selbst benutzt. */
@media (max-width: 782px) {
	#header:not(.ct-panel),
	.ct-header:not(.ct-panel),
	body > header:not(.ct-panel),
	header[data-header]:not(.ct-panel) {
		top: 0;
	}
}

/* --- 4. Die Kontonavigation auf dem Telefon -------------------------------

   Ab 690 Pixeln ist die Navigation eine schmale Spalte neben dem Inhalt, dort
   steht jede Pille ohnehin auf einer eigenen Zeile und sieht ordentlich aus.
   Darunter lief sie als Flex-Reihe um -- acht Pillen unterschiedlicher Breite,
   mittig gesetzt, ergaben eine ausgefranste Treppe.

   Hier stattdessen ein Raster. `auto-fit` mit 150 Pixeln Mindestbreite ergibt
   auf dem Telefon zwei gleich breite Spalten; die Pillen einer Zeile sind
   gleich hoch, auch wenn eine Beschriftung umbricht. */
@media (max-width: 689px) {
	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		gap: .6rem;
		margin-bottom: 2rem;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation li {
		display: flex;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation li a {
		width: 100%;
		height: 100%;
		justify-content: flex-start;
		padding: .7rem 1rem;
		font-size: .9rem;
	}

	/* "Vertrag widerrufen" und "Zahlungsarten" sind die laengsten Eintraege.
	   Ohne Umbruchmoeglichkeit sprengten sie ihre Zelle. */
	.woocommerce-account .woocommerce-MyAccount-navigation li a {
		overflow-wrap: anywhere;
	}
}

/* --- 5. Meldungskasten auf schmalen Schirmen ------------------------------

   `width: fit-content` ist auf dem Schreibtisch richtig -- ein Hinweis soll
   nicht ueber die ganze Breite laufen. Auf dem Telefon fuehrt es dazu, dass
   der Kasten so breit wird wie das laengste Wort erlaubt und der Knopf
   darunter an der falschen Kante klebt. Dort also volle Breite. */
@media (max-width: 599px) {
	.woocommerce-info,
	.woocommerce-message,
	.woocommerce-error,
	.woocommerce-notices-wrapper > div:not(:empty) {
		width: 100%;
		align-items: flex-start;
		gap: .75rem;
	}

	.woocommerce-info .button,
	.woocommerce-message .button,
	.woocommerce-notices-wrapper .button {
		width: 100%;
		text-align: center;
	}
}

/* ===========================================================================
   SECHSTE DURCHSICHT, 2026-10-03 -- Lesbarkeit und Erreichbarkeit
   ======================================================================== */

/* --- 1. Die unsichtbare Zahl am Warenkorb im Menue ------------------------

   Im Panel stand die Artikelzahl weiss auf hellem Grund, also gar nicht.

   Ursache ist eine eigene Regel weiter oben: `#offcanvas *:not(a):not(button)
   …` macht alles im Panel durchsichtig, damit die Schublade ihre Flaeche
   selbst traegt. Das Abzeichen ist ein <span> -- es verlor damit sein Korall,
   behielt aber seine weisse Schrift. Hier bekommt es beides ausdruecklich
   zurueck, und gleich etwas groesser: 10 Pixel waren auch im Kopfbereich
   schon an der Grenze. */
#offcanvas .ct-header-cart .ct-dynamic-count-cart,
.ct-header .ct-dynamic-count-cart,
.ct-dynamic-count-cart {
	background-color: var(--ida-coral) !important;
	color: #FFFFFF !important;
	font-family: var(--ida-font-text);
	font-size: .75rem;
	font-weight: 700;
	line-height: 1;
	min-width: 1.35rem;
	height: 1.35rem;
	padding: 0 .3rem;
	border-radius: var(--ida-radius-pill);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 6px rgba(63, 45, 30, .25);
}

/* --- 2. Das Kopfmenue war zu klein ----------------------------------------

   Nachgemessen: 14,72 Pixel. Das ist unterhalb dessen, was man auf einem
   hellen, warmen Grund noch beilaeufig liest -- und der Kopfbereich ist die
   einzige Navigation, die auf dem Schreibtisch dauerhaft sichtbar ist. */
.ct-header:not(.ct-panel) .menu > li > a,
.ct-header:not(.ct-panel) .ct-menu-link,
#header:not(.ct-panel) .menu > li > a,
#header:not(.ct-panel) .ct-menu-link {
	font-size: 1.0625rem;
	letter-spacing: .005em;
}

/* Das Warenkorbsymbol im Kopfbereich mitwachsen lassen, sonst steht ein
   groesseres Menue neben einem zu kleinen Symbol. */
.ct-header:not(.ct-panel) .ct-header-cart svg,
#header:not(.ct-panel) .ct-header-cart svg {
	width: 26px;
	height: 26px;
}

.ct-header:not(.ct-panel) .ct-header-cart .ct-label,
.ct-header:not(.ct-panel) .ct-header-cart .ct-amount {
	font-size: 1.0625rem;
	font-weight: 700;
}

/* --- 3. Die schwebenden Knoepfe unten rechts ------------------------------

   Weiches Scrollen fuer den Sprung nach oben -- und fuer die Sprungziele im
   Hero gleich mit. Wer Bewegung abbestellt hat, bekommt den harten Sprung;
   das ist hier die freundlichere Fassung, nicht die aermere. */
html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

.ida-schwebe {
	position: fixed;
	right: clamp(12px, 3vw, 28px);
	bottom: clamp(12px, 3vw, 28px);
	/* Unter dem Panel (100) und unter einem Einwilligungsbanner, aber ueber
	   dem Seiteninhalt. */
	z-index: 90;
	display: grid;
	gap: .6rem;
	justify-items: center;
}

.ida-schwebe__knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	border: 2px solid var(--ida-border);
	background: var(--ida-card);
	color: var(--ida-ink);
	text-decoration: none;
	box-shadow: var(--ida-shadow-lift);
	transition: transform .18s cubic-bezier(.34, 1.56, .64, 1),
	            background-color .18s ease, opacity .25s ease, visibility .25s ease;
}

.ida-schwebe__knopf:hover,
.ida-schwebe__knopf:focus-visible {
	transform: translateY(-3px);
	color: var(--ida-ink);
}

.ida-schwebe__knopf:focus-visible {
	outline: 3px solid var(--ida-ink);
	outline-offset: 3px;
}

/* Der Warenkorb ist die Handlung, auf die es ankommt -- also in der
   Hauptfarbe, nicht in Creme wie der Nach-oben-Knopf. */
.ida-schwebe__warenkorb {
	background: var(--ida-coral);
	border-color: var(--ida-coral);
	color: #FFFFFF;
	width: 3.6rem;
	height: 3.6rem;
}

.ida-schwebe__warenkorb:hover,
.ida-schwebe__warenkorb:focus-visible {
	background: color-mix(in srgb, var(--ida-coral) 85%, #000000);
	color: #FFFFFF;
}

.ida-schwebe__warenkorb svg {
	width: 26px;
	height: 26px;
}

/* Ein leerer Warenkorb braucht keinen eigenen Knopf. Die Klasse bleibt im
   Markup, damit WooCommerce das Element nach dem Hinzufuegen austauschen
   kann -- entfernt werden darf es nicht. */
.ida-schwebe__knopf--leer {
	display: none;
}

.ida-schwebe__zahl {
	position: absolute;
	top: -.3rem;
	right: -.3rem;
	min-width: 1.4rem;
	height: 1.4rem;
	padding: 0 .3rem;
	border-radius: var(--ida-radius-pill);
	background: var(--ida-sunny);
	border: 2px solid var(--ida-card);
	color: var(--ida-ink);
	font-family: var(--ida-font-text);
	font-size: .75rem;
	font-weight: 700;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Ohne JavaScript bleibt der Nach-oben-Knopf dauerhaft sichtbar -- er
   funktioniert ja auch dann. Erst das Skript setzt `ida-js` auf den Body und
   uebernimmt damit die Sichtbarkeit. */
body.ida-js .ida-schwebe__hoch {
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	pointer-events: none;
}

body.ida-js .ida-schwebe__hoch.ist-sichtbar {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
}

@media (max-width: 599px) {
	.ida-schwebe__knopf {
		width: 3rem;
		height: 3rem;
	}

	.ida-schwebe__warenkorb {
		width: 3.3rem;
		height: 3.3rem;
	}
}

/* Beim Drucken hat eine schwebende Bedienleiste nichts zu suchen. */
@media print {
	.ida-schwebe {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ida-schwebe__knopf,
	.ida-schwebe__knopf:hover {
		transition: opacity .25s ease, visibility .25s ease;
		transform: none;
	}
}

/* --- 4. Die Gesamtsumme an der Kasse --------------------------------------

   Sie war mit 16 Pixeln die KLEINSTE Zahl der Seite -- kleiner als die
   Zwischensumme und kleiner als der Versand darueber, die beide 17 Pixel
   hatten. Die Zahl, auf die es ankommt, stand ganz unten in der Rangfolge.

   WARUM MEINE BISHERIGEN REGELN NICHTS AUSRICHTETEN

   Ausgelesen, welche Regeln auf das Element passen: WooCommerce setzt in
   `woocommerce-cart-checkout-blocks.min.css`

       .wc-block-components-sidebar-layout
       .wc-block-components-totals-footer-item
       :is(.wc-block-components-totals-item__value, …) { font-size: initial }

   Das sind drei Klassen. Alle meine bisherigen Regeln auf
   `.wc-block-components-totals-footer-item .wc-block-components-totals-item__value`
   haben nur zwei und verlieren deshalb -- und zwar ausschliesslich bei der
   Schriftgroesse. Schriftart, -schnitt und Farbe kamen durch, was das Ganze
   so schwer zu sehen machte: der Betrag stand in Fredoka 600, nur eben winzig.
   `initial` heisst hier schlicht 16 Pixel.

   Dagegen hilft kein `!important`, sondern eine Klasse mehr. Der Blockname
   (`.wp-block-woocommerce-checkout` bzw. `-cart`) steht ohnehin darueber und
   macht aus zwei Klassen vier. Damit ist die Rangfolge eindeutig, ohne dass
   irgendwo ein Ausrufezeichen steht, das spaeter jemanden aufhaelt. */
.wp-block-woocommerce-checkout .wc-block-components-sidebar-layout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wp-block-woocommerce-cart .wc-block-components-sidebar-layout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--ida-font-display);
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.05;
	color: var(--ida-ink);
}

.wp-block-woocommerce-checkout .wc-block-components-sidebar-layout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wp-block-woocommerce-cart .wc-block-components-sidebar-layout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-family: var(--ida-font-display);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--ida-ink);
}

/* Beschriftung und Betrag auf dieselbe Grundlinie, sonst schwimmt das Wort
   "Gesamtsumme" neben einer doppelt so hohen Zahl. */
.wc-block-components-totals-footer-item {
	align-items: baseline;
}

/* BERICHTIGUNG -- der Name dieser Klasse luegt.

   `wc-block-components-totals-footer-item-tax-value` klingt nach dem
   Steuerhinweis "inkl. MwSt.". Das ist sie nicht. WooCommerce haengt sie an
   den BETRAG selbst. Der Aufbau im Warenkorb lautet:

       <span class="...totals-item__label">Veranschlagte Gesamtsumme</span>
       <div  class="...totals-item__value">              <-- leer
         <span class="... totals-footer-item-tax-value">32,39 EUR</span>
       </div>
       <div  class="...totals-item__description"></div>  <-- hier stuende der Hinweis

   Ich hatte die Klasse fuer den Hinweis gehalten und klein gesetzt. Damit war
   der Behaelter 40 Pixel gross und die Zahl darin 12,8 -- also genau das
   Gegenteil dessen, was die Regel darueber erreichen soll.

   Der Betrag erbt deshalb ausdruecklich wieder von seinem Behaelter. Drei
   Klassen, damit die aeltere falsche Regel weiter oben nicht wieder greift.

   ZUM NACHMESSEN: die Groesse an `...totals-item__value` abzulesen fuehrt in
   die Irre, das ist das leere div. Gemessen werden muss der <span> darin,
   der den Text traegt. */
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-footer-item-tax-value,
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-footer-item-tax-value {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}

@media (max-width: 599px) {
	.wp-block-woocommerce-checkout .wc-block-components-sidebar-layout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
	.wp-block-woocommerce-cart .wc-block-components-sidebar-layout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
		font-size: 2rem;
	}

	.wp-block-woocommerce-checkout .wc-block-components-sidebar-layout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
	.wp-block-woocommerce-cart .wc-block-components-sidebar-layout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
		font-size: 1.1rem;
	}
}

/* ===========================================================================
   SIEBTE DURCHSICHT, 2026-10-03 -- die fliessende Farbschicht
   ---------------------------------------------------------------------------
   Nach einer Vorlage von CodePen ("Liquid Gradient"), aber an drei Stellen
   bewusst anders:

   1. DIE VORLAGE IST FUER SCHWARZ GEBAUT, WIR SIND CREME.
      Dort liegen gesaettigte Farben mit `mix-blend-mode: hard-light` auf
      #080a0f -- das leuchtet. Dieselbe Mischung auf #FAF6E9 ergibt grelle
      Neonflecken. Hier wird deshalb `multiply` verwendet: die Farbe LEGT SICH
      UEBER die Creme statt zu leuchten, so wie Aquarell auf Papier. Das passt
      auch inhaltlich besser zu einem Laden, der handgemalte Aquarelle verkauft.

   2. KEIN "GOO"-FILTER.
      Die Vorlage schickt die Flecken durch einen SVG-Filter, der sie wie
      Quecksilber verschmelzen laesst. Auf dunklem Grund ist das der halbe
      Effekt; auf hellem Grund mit `multiply` verschmelzen die Flecken ohnehin,
      und der Filter kostet bei jedem Bild eine komplette Neuberechnung der
      ganzen Flaeche. Gestrichen -- es bleibt die Unschaerfe.

   3. ANDERE FARBEN.
      Statt Blau/Magenta/Cyan der Vorlage die Hausfarben. Sonst haette die
      Startseite einen Hintergrund, der mit nichts sonst auf der Seite
      zusammenhaengt.

   ZUR SICHTBARKEIT: die Ebene liegt mit `z-index: -1` hinter allem. Nachgesehen
   am Shop -- `body` traegt die Cremefarbe und gibt sie an die Leinwand weiter,
   die Inhaltscontainer sind durchsichtig. Die Ebene malt also ueber die
   Leinwand und unter jeden Text, ohne dass ein Container angefasst werden muss.
   ======================================================================== */

.ida-fluid {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
	/* Die Staerke steuert das Skript je nach Abschnitt. Ohne Skript bleibt es
	   bei diesem Wert -- dann ist der Effekt eben gleichmaessig da. */
	--ida-fluid-staerke: .55;
	opacity: var(--ida-fluid-staerke);
	transition: opacity 1.1s cubic-bezier(.22, .61, .36, 1);
	/* Nur die Deckkraft wird bewegt, und die kann der Compositor allein. */
	will-change: opacity;
	contain: strict;
}

.ida-fluid__topf {
	position: absolute;
	inset: -10%;
	filter: blur(70px);
}

.ida-fluid__fleck {
	position: absolute;
	width: 70%;
	height: 70%;
	top: 15%;
	left: 15%;
	border-radius: 50%;
	mix-blend-mode: multiply;
	transform-origin: center center;
}

.ida-fluid__fleck--1 {
	background: radial-gradient(circle at center,
	            color-mix(in srgb, var(--ida-sunny) 85%, transparent) 0,
	            transparent 55%) no-repeat;
	animation: ida-fluid-hoch 34s ease-in-out infinite;
}

.ida-fluid__fleck--2 {
	background: radial-gradient(circle at center,
	            color-mix(in srgb, var(--ida-bubblegum) 70%, transparent) 0,
	            transparent 55%) no-repeat;
	animation: ida-fluid-kreis 26s linear infinite reverse;
}

.ida-fluid__fleck--3 {
	top: 30%;
	left: -10%;
	background: radial-gradient(circle at center,
	            color-mix(in srgb, var(--ida-sky) 70%, transparent) 0,
	            transparent 55%) no-repeat;
	animation: ida-fluid-kreis 44s linear infinite;
}

.ida-fluid__fleck--4 {
	background: radial-gradient(circle at center,
	            color-mix(in srgb, var(--ida-mint) 65%, transparent) 0,
	            transparent 55%) no-repeat;
	animation: ida-fluid-quer 38s ease-in-out infinite;
}

.ida-fluid__fleck--5 {
	width: 110%;
	height: 110%;
	top: -5%;
	left: -5%;
	transform-origin: 30% 70%;
	background: radial-gradient(circle at center,
	            color-mix(in srgb, var(--ida-lilac) 65%, transparent) 0,
	            transparent 50%) no-repeat;
	animation: ida-fluid-kreis 30s ease-in-out infinite;
}

/* Der Fleck, der dem Zeiger folgt. Das Skript setzt nur `translate` -- eine
   Eigenschaft, die der Compositor ohne Neuberechnung des Layouts bewegt. */
.ida-fluid__fleck--zeiger {
	width: 55%;
	height: 55%;
	top: 22.5%;
	left: 22.5%;
	opacity: .75;
	background: radial-gradient(circle at center,
	            color-mix(in srgb, var(--ida-coral) 45%, transparent) 0,
	            transparent 55%) no-repeat;
}

@keyframes ida-fluid-kreis {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes ida-fluid-hoch {
	0%, 100% { transform: translateY(-22%); }
	50%      { transform: translateY(22%); }
}

@keyframes ida-fluid-quer {
	0%, 100% { transform: translateX(-24%) translateY(-8%); }
	50%      { transform: translateX(24%) translateY(8%); }
}

/* Auf der Startseite loeschen sich die beiden alten Wolken im Hero -- sonst
   liegen zwei Nebel uebereinander und die Farben werden matschig. */
.ida-hat-fluid .ida-hero::before,
.ida-hat-fluid .ida-hero::after {
	display: none;
}

/* --- Telefon ---------------------------------------------------------------

   Die Unschaerfe ist der teure Teil: der Browser rechnet bei jedem Bild die
   ganze Flaeche neu. Auf kleinen Geraeten deshalb ein kleinerer Radius, zwei
   Flecken weniger und etwas blasser. Der Effekt bleibt erkennbar, kostet aber
   einen Bruchteil. */
@media (max-width: 782px) {
	.ida-fluid {
		--ida-fluid-staerke: .4;
	}

	.ida-fluid__topf {
		filter: blur(45px);
	}

	.ida-fluid__fleck--4,
	.ida-fluid__fleck--zeiger {
		display: none;
	}
}

/* Wer Bewegung abbestellt hat, bekommt die Farbflaeche ohne Bewegung. Sie
   verschwindet nicht -- sie ist Gestaltung, nicht Animation. */
@media (prefers-reduced-motion: reduce) {
	.ida-fluid__fleck {
		animation: none !important;
	}

	.ida-fluid {
		transition: none;
	}
}

/* ===========================================================================
   ACHTE DURCHSICHT, 2026-10-03 -- Milchglas
   ---------------------------------------------------------------------------
   Nach einer Vorlage von CodePen ("Liquid glass header"), wieder mit einem
   grundsaetzlichen Unterschied: die Vorlage ist WEISSES Glas auf fast
   schwarzem Grund -- `rgba(255,255,255,.07)`, also sieben Prozent Weiss, der
   Rest kommt vom dunklen Hintergrund. Auf unserer Creme waere das unsichtbar.

   Hier ist es umgekehrt: helles Glas auf hellem Grund. Die Flaeche muss
   deshalb deutlich dichter sein, und was den Effekt traegt, ist nicht die
   Farbe, sondern die UNSCHAERFE und die Saettigung dahinter -- die
   Farbschicht aus der siebten Durchsicht liefert genau das.

   OHNE FARBE KEIN GLAS: auf Seiten ohne die Farbschicht (Rechtstexte,
   Warenkorb, Kasse) wirkt dieselbe Leiste schlicht wie mattes Creme. Das ist
   kein Fehler, sondern der Grund, warum Glas nur dort auffaellt, wo auch
   etwas dahinterliegt. */

:root {
	--ida-glas:          rgba(255, 253, 250, .42);
	--ida-glas-dicht:    rgba(255, 253, 250, .58);
	--ida-glas-leicht:   rgba(255, 253, 250, .4);
	--ida-glas-rand:     rgba(255, 255, 255, .7);
	--ida-glas-schatten: 0 10px 34px rgba(63, 45, 30, .15);
	--ida-glas-unschaerfe: blur(44px) saturate(200%);
	--ida-glas-unschaerfe-dicht: blur(52px) saturate(210%);
}

/* --- 1. Die Kopfzeile als schwebende Glasleiste ---------------------------

   Die Leiste ist die innere Zeile, nicht der Kopfbereich selbst. Der
   Kopfbereich liefert nur den Abstand zum Fensterrand -- dadurch schwebt die
   Leiste, statt am Rand zu kleben. */
#header:not(.ct-panel) [data-row="middle"],
.ct-header:not(.ct-panel) [data-row="middle"],
body > header:not(.ct-panel) [data-row="middle"] {
	background-color: var(--ida-glas);
	backdrop-filter: var(--ida-glas-unschaerfe);
	-webkit-backdrop-filter: var(--ida-glas-unschaerfe);
	border: 1px solid var(--ida-glas-rand);
	border-radius: 22px;
	box-shadow: var(--ida-glas-schatten), inset 0 1px 0 rgba(255, 255, 255, .85);
	position: relative;
	transition: background-color .35s ease, box-shadow .35s ease;
}

/* Gescrollt wird die Leiste dichter. Das ist kein Schmuck, sondern noetig:
   nachgesehen am Shop lief die Hero-Ueberschrift hinter der Leiste durch und
   kollidierte mit den Menuepunkten. Bei 95 Prozent bleibt der Glascharakter
   erhalten, der Text darunter verschwindet. Die Klasse setzt ida-ui.js. */
body.ist-gescrollt #header:not(.ct-panel) [data-row="middle"],
body.ist-gescrollt .ct-header:not(.ct-panel) [data-row="middle"] {
	background-color: var(--ida-glas-dicht);
	backdrop-filter: var(--ida-glas-unschaerfe-dicht);
	-webkit-backdrop-filter: var(--ida-glas-unschaerfe-dicht);
	box-shadow: 0 14px 40px rgba(63, 45, 30, .2), inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* --- 2. Der Lichtschimmer -------------------------------------------------

   Die Vorlage schiebt dafuer ein Element von -100% auf 130% und braucht
   deshalb `overflow: hidden` am Elternteil. Das waere hier gefaehrlich: in
   der Kopfzeile sitzen Ausklappmenues und der Warenkorb, die abgeschnitten
   wuerden, sobald jemand ein Untermenue anlegt.

   Hier wandert stattdessen die HINTERGRUNDPOSITION eines Verlaufs. Der bleibt
   immer innerhalb des Elements, also braucht niemand etwas abzuschneiden. */
#header:not(.ct-panel) [data-row="middle"]::before,
.ct-header:not(.ct-panel) [data-row="middle"]::before,
.hero-section .page-title::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background: linear-gradient(100deg,
	            transparent 36%,
	            rgba(255, 255, 255, .6) 50%,
	            transparent 64%);
	background-size: 300% 100%;
	animation: ida-glas-schimmer 7s ease-in-out infinite;
}

@keyframes ida-glas-schimmer {
	0%        { background-position: 150% 0; }
	60%, 100% { background-position: -60% 0; }
}

/* --- 3. Das Band hinter der Seitenueberschrift ----------------------------

   Blocksy legt dort ein `div.hero-section` mit eigener Flaeche (#F7EDDB) --
   ein zweites Creme, das die Farbschicht verdeckte. Durchsichtig, damit die
   Farben bis unter die Kopfzeile durchlaufen. */
.hero-section,
#main .hero-section,
[data-prefix] .hero-section[data-type] {
	/* Blocksy faerbt dieses Band ueber
	       [data-prefix="woo_categories"] .hero-section[data-type="type-2"]
	   -- drei Attribute bzw. Klassen, also Staerke (0,3,0).

	   Mein erster Versuch mit genau derselben Staerke ging daneben: Blocksy
	   gibt diese Regel als Inline-Block im Kopf der Seite aus, und der steht
	   NACH dem Stylesheet des Child-Themes. Bei Gleichstand entscheidet die
	   Reihenfolge, also gewann Blocksy -- nachgemessen, das Band stand weiter
	   auf #F7EDDB.

	   `#main .hero-section` hat eine ID und damit (1,1,0). Das schlaegt
	   (0,3,0) unabhaengig von der Reihenfolge. */
	background-color: transparent;
}

/* --- 4. Die Ueberschrift in einer Glaspille -------------------------------

   `width: fit-content` statt `display: inline-block`: die Ueberschrift ist
   per Theme ein Blockelement, und eine Regel mit mehr Gewicht setzte das
   `inline-block` zurueck -- nachgemessen war die Pille dadurch 750 Pixel
   breit bei 148 Pixeln Text. `fit-content` erreicht dasselbe, ohne sich mit
   dem Theme um die Anzeigeart zu streiten. */
.hero-section .page-title {
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
	/* Polsterung in em, damit die Pille mit der Ueberschrift mitwaechst --
	   die Schriftgroesse ist eine clamp()-Angabe und aendert sich mit der
	   Fensterbreite. */
	padding: .32em 3rem .42em;
	border-radius: var(--ida-radius-pill);
	background-color: var(--ida-glas-leicht);
	backdrop-filter: var(--ida-glas-unschaerfe);
	-webkit-backdrop-filter: var(--ida-glas-unschaerfe);
	border: 2px solid var(--ida-glas-rand);
	box-shadow: var(--ida-glas-schatten), inset 0 1px 0 rgba(255, 255, 255, .85);
	position: relative;
}

@media (max-width: 599px) {
	.ct-header:not(.ct-panel) [data-row="middle"] {
		border-radius: 18px;
	}

	.hero-section .page-title {
		padding-inline: 1.5rem;
	}
}

/* Ohne Unterstuetzung fuer `backdrop-filter` bliebe durchsichtiges Glas ueber
   buntem Grund unlesbar. Dann lieber deckend. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.ct-header:not(.ct-panel) [data-row="middle"],
	.hero-section .page-title {
		background-color: var(--ida-card-soft);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ct-header:not(.ct-panel) [data-row="middle"]::before,
	.hero-section .page-title::before {
		animation: none;
	}
}