/*
 * PharmaCare Theme — ergänzende Regeln zu theme.json.
 * Keine Farb- oder Größenwerte hart eintragen, immer var(--wp--preset--…).
 */

/* Grundlagen */
body { -webkit-font-smoothing: antialiased; text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
img { height: auto; }

/* Vollbreite Abschnitte stoßen aneinander. Ohne das setzt WordPress den
   Blockabstand auch zwischen Kopf, Inhalt und Fuß und zwischen die Abschnitte
   der Startseite, und zwischen farbigen Flächen blitzt ein weißer Streifen auf.
   Die Abschnitte bringen ihren Innenabstand selbst mit. */
body .wp-site-blocks > * { margin-block-start: 0; }
main > .alignfull { margin-block-start: 0; }

/* Skip-Link: unsichtbar bis Fokus, dann oben links. */
.pharmacare-skip-link { position: absolute; left: -999px; top: 0; z-index: 1000; padding: 0.75rem 1rem; background: var(--wp--preset--color--primaer); color: var(--wp--preset--color--weiss); border-radius: 0 0 var(--wp--custom--radius) 0; }
.pharmacare-skip-link:focus { left: 0; }

/* Sichtbarer Fokus überall. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--wp--preset--color--primaer); outline-offset: 3px; border-radius: 2px; }
.has-primaer-background-color :where(a, button):focus-visible { outline-color: var(--wp--preset--color--weiss); }

/* Kopf */
.kopf { border-bottom: 1px solid var(--wp--preset--color--linie); background-color: var(--wp--preset--color--hintergrund); position: relative; z-index: 20; } /* vor dem Inhalt, damit die Aufklappliste nicht darunter liegt */
/* Aufgeklapptes Menü auf dem Handy im selben Grau wie Kopf und Seite. */
.hauptnavigation.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open { background-color: var(--wp--preset--color--hintergrund); }
.logo { display: inline-flex; line-height: 0; }
.logo img { height: 56px; width: auto; }
.logo--klein img { height: 32px; }
.hauptnavigation .wp-block-navigation-item__content { font-weight: 600; color: var(--wp--preset--color--schrift); min-height: var(--wp--custom--klickziel); display: inline-flex; align-items: center; }
.hauptnavigation .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--primaer); text-decoration: none; }
/* Strich unter dem Menüpunkt beim Überfahren (wie mutares.com), in Akzent-Magenta; wächst von
   der Mitte aus, bei „Bewegung reduzieren“ ohne Übergang. Nicht im aufgeklappten Handy-Menü. */
.hauptnavigation .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { position: relative; }
.hauptnavigation .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.45rem; height: 2px; border-radius: 1px; background: var(--wp--preset--color--akzent); transform: scaleX(0); transition: transform 200ms ease; }
.hauptnavigation .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover::after,
.hauptnavigation .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible::after,
.hauptnavigation .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"]::after { transform: scaleX(1); }
.hauptnavigation .is-menu-open .wp-block-navigation-item__content::after { display: none; }
/* Aufklappliste „Versorgungsbereiche“ (wie mutares.com): weiß, Strich oben in Akzent-Magenta,
   leichter Schatten. Im aufgeklappten Handy-Menü einfach eingerückt. */
.hauptnavigation.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container { background: var(--wp--preset--color--weiss); border: 0; border-top: 2px solid var(--wp--preset--color--akzent); border-radius: 0 0 var(--wp--custom--radius) var(--wp--custom--radius); box-shadow: var(--wp--custom--schatten); width: max-content; min-width: 16rem; padding: 0.4rem 0; }
.hauptnavigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-weight: 500; padding: 0.1rem 1.1rem; width: 100%; box-sizing: border-box; white-space: nowrap; }
.hauptnavigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--primaer); background: var(--wp--preset--color--primaer-hell); }
.hauptnavigation.wp-block-navigation .is-menu-open .wp-block-navigation__submenu-container { background: transparent; border: 0; box-shadow: none; padding: 0; min-width: 0; width: auto; align-items: flex-end; }
.hauptnavigation .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 0; white-space: normal; text-align: right; color: var(--wp--preset--color--schrift-gedaempft); }
.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { min-width: var(--wp--custom--klickziel); min-height: var(--wp--custom--klickziel); }
.kopf__telefon { margin: 0; }
.kopf__telefon a { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.2rem; color: var(--wp--preset--color--primaer); text-decoration: none; min-height: var(--wp--custom--klickziel); }
.kopf__telefon svg { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Deutschlandfahne hinter Anruf-Links auf englischen Seiten (Site-Plugin, pharmacare_flagge_de). */
.flagge { display: inline-flex; margin-inline-start: 0.4em; vertical-align: middle; line-height: 0; }
.flagge svg { width: 1.1em; height: auto; border-radius: 2px; box-shadow: 0 0 0 1px var(--wp--preset--color--linie); }
/* Symbol-Regeln der Umgebung (Kopf, Kontaktknöpfe) zeichnen sonst einen Strich über die Fahne. */
.flagge svg, .flagge svg rect { stroke: none !important; }
.flagge svg + svg { margin-inline-start: 0.25em; }
/* Sprachumschalter (Pattern pharmacare/sprache): kleiner runder Knopf rechts im Kopf. */
.sprache { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-width: var(--wp--custom--klickziel); min-height: var(--wp--custom--klickziel); padding: 0 0.8rem; box-sizing: border-box; border: 1px solid var(--wp--preset--color--linie); border-radius: 999px; color: var(--wp--preset--color--primaer); font-weight: 700; font-size: var(--wp--preset--font-size--klein); text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.sprache:hover { border-color: var(--wp--preset--color--akzent); color: var(--wp--preset--color--primaer); text-decoration: none; }
.sprache__lang { font-weight: 600; }
@media (max-width: 40rem) { .sprache__lang { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

/* Hauptnavigation: bis 1023 px als Burger-Menü, damit Logo, Links und Telefon
   dazwischen nicht umbrechen. WordPress selbst klappt erst unter 600 px um. */
@media (min-width: 600px) and (max-width: 1023px) {
	.hauptnavigation .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.hauptnavigation .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
}

/* Buttons: Mindesthöhe, kein Zeilenumbruch */
.wp-block-button__link { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; text-decoration: none; }

/* Textbausteine */
.kicker { font-size: var(--wp--preset--font-size--klein); letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--primaer); font-weight: 700; margin: 0; }
.kicker--hell { color: var(--wp--custom--auf-blau-leise); }
.text-hell { color: var(--wp--custom--auf-blau); }
.pfeillink { font-weight: 600; text-decoration: none; }
.pfeillink::after { content: " →"; }
.pfeillink:hover { text-decoration: underline; }
.foto img { border-radius: 12px; display: block; width: 100%; }
/* Bildunterschrift, u. a. der KI-Hinweis; Größe und Farbe stehen in theme.json (elements.caption). */
.wp-element-caption { margin-block: var(--wp--preset--spacing--10) 0; line-height: 1.4; }
/* KI-Hinweis klein im Bild statt darunter: dunkles Etikett unten rechts, weiße Schrift. */
.foto--hinweis { position: relative; }
.foto--hinweis .wp-element-caption { position: absolute; right: var(--wp--preset--spacing--10); bottom: var(--wp--preset--spacing--10); max-width: calc(100% - 2 * var(--wp--preset--spacing--10)); margin: 0; padding: 0.1em 0.45em; border-radius: 0.4em; background: var(--wp--custom--foto-hinweis); color: var(--wp--preset--color--weiss); font-size: var(--wp--custom--bildhinweis-groesse); line-height: 1.35; }
.kasten { border-radius: var(--wp--custom--radius); }
.kasten h3 + p { margin-block-start: var(--wp--preset--spacing--10); } /* Beschriftung und Wert gehören zusammen */

/* Rechtstexte und Inhaltsseiten: mehr Luft über jedem Abschnitt als zwischen Absätzen. */
.rechtstext > h2, .textseite > h2 { margin-block-start: var(--wp--preset--spacing--40); }
.textseite > h3 { margin-block-start: var(--wp--preset--spacing--30); }
.dateiinfo { color: var(--wp--preset--color--schrift-gedaempft); white-space: nowrap; }

/* Herstellerlogos in hellen Kacheln, einheitlich hoch. */
.marken figure { margin: 0; height: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; aspect-ratio: 5 / 2; padding: var(--wp--preset--spacing--20); background: var(--wp--preset--color--weiss); border: 1px solid var(--wp--preset--color--linie); border-radius: var(--wp--custom--radius); }
.marken img { width: auto; max-width: 100%; max-height: 44px; object-fit: contain; }

/* Bildschirmfotos der Bestell-App: nebeneinander, gerahmt wie ein Telefonbildschirm. */
.bildschirme figure { margin: 0; }
.bildschirme img { display: block; width: 100%; height: auto; border: 1px solid var(--wp--preset--color--linie); border-radius: var(--wp--custom--radius); box-shadow: var(--wp--custom--schatten); }
.bildschirme .wp-element-caption { text-align: center; }

/* Versorgungsbereiche (Baustein bereiche-karten): kompakte Karten, Symbol links, Titel und eine
   Zeile Text rechts; drei Spalten am Rechner, zwei auf dem Tablet, eine am Handy. */
.bereiche { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); gap: var(--wp--preset--spacing--20); }
/* Doppelte Klasse, weil .karte weiter unten steht und sonst Spalte und Innenabstand vorgibt. */
.karte.karte--kompakt { flex-direction: row; align-items: center; gap: 0.9rem; padding: 0.95rem 1.1rem; }
.karte--kompakt .ikon { flex: none; width: 40px; height: 40px; }
.karte__inhalt { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.karte--kompakt .karte__titel { font-size: var(--wp--preset--font-size--normal); }
.karte--kompakt .karte__text { font-size: var(--wp--preset--font-size--klein); line-height: 1.4; }
/* Bereichskarten mit demselben leichten Schatten wie die übrigen Karten. */
.bereiche .karte { border-color: transparent; box-shadow: var(--wp--custom--schatten-karte); }

/* Hersteller-Seite: Logos als Links auf die Suche, darunter alle Hersteller von A bis Z. */
.marken--verlinkt figure { padding: 0; }
.marken--verlinkt a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: var(--wp--preset--spacing--20); box-sizing: border-box; border-radius: var(--wp--custom--radius); }
.marken--verlinkt figure:hover { border-color: var(--wp--preset--color--akzent); }
/* Leichtes Abheben beim Überfahren wie im Shop: alle anklickbaren Kästen (Karten, Bereiche,
   Ratgeber, Herstellerlogos), nicht die Kontaktkarten ohne Link. Ohne Bewegung, wenn
   „Bewegung reduzieren“ eingestellt ist. */
@media (prefers-reduced-motion: no-preference) {
	a.karte, .ratgeber-karte, .marken--verlinkt figure { transition: transform 200ms ease, box-shadow 200ms ease, border-color 150ms ease; }
	a.karte:hover, a.karte:focus-visible, .ratgeber-karte:hover, .ratgeber-karte:focus-within,
	.marken--verlinkt figure:hover, .marken--verlinkt figure:focus-within { transform: translateY(-0.25rem); box-shadow: var(--wp--custom--schatten); }
}
.herstellerliste__liste { columns: 3 13rem; column-gap: var(--wp--preset--spacing--30); margin: 0; padding: 0; list-style: none; }
.herstellerliste__liste li { break-inside: avoid; padding: 0.3rem 0; }
.herstellerliste__anzahl { color: var(--wp--preset--color--schrift-gedaempft); font-size: var(--wp--preset--font-size--klein); }

/* Kartenliste in Inhaltsseiten (Produktübersicht). */
.kartenliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); gap: var(--wp--preset--spacing--30); }

/* Karten; beim Überfahren Rand in Akzent-Magenta (Farbe der alten Website). */
.karte { display: flex; flex-direction: column; gap: 0.6rem; background: var(--wp--preset--color--weiss); border: 1px solid var(--wp--preset--color--linie); border-radius: var(--wp--custom--radius); padding: 1.6rem 1.6rem 1.5rem; color: var(--wp--preset--color--schrift); text-decoration: none; height: 100%; box-sizing: border-box; transition: box-shadow 150ms ease, border-color 150ms ease; }
.karte:hover { border-color: var(--wp--preset--color--akzent); box-shadow: var(--wp--custom--schatten); text-decoration: none; color: var(--wp--preset--color--schrift); }
.karte--flach { border-color: transparent; }
.karte--schatten { border-color: transparent; box-shadow: var(--wp--custom--schatten-karte); }
.karte__titel { font-size: var(--wp--preset--font-size--ueberschrift-3); font-weight: 700; line-height: 1.2; }
.karte__text { color: var(--wp--preset--color--schrift-gedaempft); }
.karte__mehr { font-weight: 600; color: var(--wp--preset--color--primaer); margin-top: auto; }
.karte__mehr::after { content: " →"; }
.ikon { width: 46px; height: 46px; border-radius: 50%; background: var(--wp--preset--color--primaer-hell); display: inline-flex; align-items: center; justify-content: center; color: var(--wp--preset--color--primaer); }
.ikon svg { stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Kontaktkarte: kein Link um die ganze Karte, sondern je Kontaktweg ein Knopf
   (Telefon oben, darunter WhatsApp und Threema). Die Karte selbst reagiert
   deshalb nicht auf Überfahren. */
.karte--kontakt:hover { border-color: transparent; box-shadow: var(--wp--custom--schatten-karte); }
.kanaele { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: var(--wp--preset--spacing--10); }
.kanaele__messenger { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--10); }
.kanal { display: inline-flex; align-items: center; gap: 0.45rem; min-height: var(--wp--custom--klickziel); padding: 0 0.9rem; border: 1px solid var(--wp--preset--color--linie); border-radius: 999px; background: var(--wp--preset--color--weiss); color: var(--wp--preset--color--primaer); font-weight: 600; font-size: var(--wp--preset--font-size--klein); text-decoration: none; white-space: nowrap; }
.kanal[aria-busy="true"] { cursor: progress; opacity: 0.7; } /* Live-Chat lädt */
.kanal:hover { border-color: var(--wp--preset--color--akzent); color: var(--wp--preset--color--primaer); text-decoration: none; }

/* Rezeptservice: drei Wege für das Rezeptfoto, darunter Freiumschlag und Adresse. */
/* Breiter als die Textspalte, damit drei Karten nebeneinander Platz haben. */
.textseite > .rezeptwege, .textseite > .rezeptpost { max-width: var(--wp--style--global--wide-size); }
.rezeptwege { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); gap: var(--wp--preset--spacing--30); }
.rezeptpost { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); gap: var(--wp--preset--spacing--20); }
.rezeptwege .kanal { white-space: normal; }
/* QR-Codes: je ein Kasten unter der passenden Karte (gleiches Raster wie .rezeptwege), als
   Alternative für alle, die am Rechner sitzen. Auf Handy und Tablet ausgeblendet – dort öffnen
   die Knöpfe die Apps direkt, und untereinander stünde der Code nicht mehr unter seiner Karte. */
.qr-reihe { margin-top: var(--wp--preset--spacing--20) !important; }
.qr-box { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; background: var(--wp--preset--color--weiss); border-radius: var(--wp--custom--radius); box-shadow: var(--wp--custom--schatten-karte); }
.qr-box strong { color: var(--wp--preset--color--schrift); }
.qr-box p { margin: 0; font-size: var(--wp--preset--font-size--klein); color: var(--wp--preset--color--schrift-gedaempft); line-height: 1.45; }
.qr-code { margin: 0; flex: none; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; font-size: var(--wp--preset--font-size--klein); font-weight: 600; }
.qr-code img { width: 104px; height: 104px; border: 1px solid var(--wp--preset--color--linie); border-radius: 4px; background: var(--wp--preset--color--weiss); }
@media (max-width: 781px), (pointer: coarse) { .qr-reihe { display: none !important; } }
/* Große Nummer in einer Karte (Faxnummer auf /verordner/). */
.karte__nummer { font-size: var(--wp--preset--font-size--ueberschrift-3); font-weight: 700; color: var(--wp--preset--color--primaer); white-space: nowrap; }
.ikon--sicher { background: var(--wp--preset--color--erfolg-hell); color: var(--wp--preset--color--erfolg); }
.abzeichen { display: inline-flex; align-items: center; gap: 0.35rem; align-self: flex-start; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: var(--wp--preset--font-size--klein); font-weight: 600; }
.abzeichen svg { width: 16px; height: 16px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.abzeichen--sicher { background: var(--wp--preset--color--erfolg-hell); color: var(--wp--preset--color--erfolg-dunkel); } /* dunkler als „erfolg“, damit der Kontrast auf Hellgrün reicht */
.kanal--inaktiv { color: var(--wp--preset--color--schrift-gedaempft); background: var(--wp--preset--color--flaeche); border-style: dashed; cursor: default; }

/* Social-Media-Links im Fuß: runde Knöpfe wie die Kontaktwege, Zeichen in Primärblau. */
.sozial { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--10); margin: var(--wp--preset--spacing--20) 0 0; padding: 0; list-style: none; }
.sozial__link { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: var(--wp--custom--klickziel); height: var(--wp--custom--klickziel); border: 1px solid var(--wp--preset--color--linie); border-radius: 50%; background: var(--wp--preset--color--weiss); color: var(--wp--preset--color--primaer); }
.sozial__link:hover { border-color: var(--wp--preset--color--akzent); }
.sozial__link svg { fill: currentColor; }
.kanal svg { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Kennzahlen */
.kennzahl { display: flex; flex-direction: column; }
.kennzahl__wert { font-size: 1.75rem; font-weight: 700; color: var(--wp--preset--color--primaer); line-height: 1.1; white-space: nowrap; }
.kennzahl__text { color: var(--wp--preset--color--schrift-gedaempft); font-size: var(--wp--preset--font-size--klein); }

/* Telefon */
.telefon-gross { display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: 0.35em; font-size: 1.35rem; font-weight: 700; text-decoration: none; } /* bei großer Schrift darf die Nummer an den Leerzeichen und die Fahne darunter umbrechen */
.telefon-riesig { font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; text-decoration: none; color: var(--wp--preset--color--weiss); }
.cta-telefon a { color: var(--wp--preset--color--weiss); }
.cta-telefon p a:not(.telefon-riesig) { text-decoration: underline; }

/* Fuß */
.fussnavigation .wp-block-navigation-item__content { color: var(--wp--preset--color--schrift); text-decoration: none; }
.fussnavigation .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--primaer); text-decoration: underline; }
.fusszeile p { margin: 0; }

/* Formulare (Rückruf). Feldränder in gedämpfter Schrift statt „linie“: Ränder von
   Eingabefeldern brauchen mindestens 3:1 Kontrast zum Hintergrund. */
.formular { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); background: var(--wp--preset--color--flaeche); border-radius: var(--wp--custom--radius); padding: var(--wp--preset--spacing--40); }
.feldgruppe { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--10); border: 0; margin: 0; padding: 0; min-width: 0; }
.feldgruppe > label, .feldgruppe > legend { font-weight: 700; padding: 0; }
.feldgruppe > label.wahl { font-weight: 400; }
.optional { font-weight: 400; color: var(--wp--preset--color--schrift-gedaempft); }
.formular input[type="text"], .formular input[type="tel"], .formular select { min-height: 52px; padding: 0 0.9rem; font: inherit; color: var(--wp--preset--color--schrift); background: var(--wp--preset--color--weiss); border: 1px solid var(--wp--preset--color--schrift-gedaempft); border-radius: 8px; }
.wahl { display: flex; align-items: center; gap: 0.6rem; min-height: var(--wp--custom--klickziel); }
.wahl input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--wp--preset--color--primaer); }
.feldgruppe--fehler input, .feldgruppe--fehler select { border: 2px solid var(--wp--preset--color--fehler); }
.feld__fehler { margin: 0; color: var(--wp--preset--color--fehler); font-weight: 600; }

/* Einblenden beim Scrollen wie im Shop (Dawn „Reveal sections on scroll“): gleiche Werte,
   2rem hoch, 600 ms, cubic-bezier(0, 0, 0.3, 1), gemeinsam Sichtbares je 75 ms versetzt.
   assets/js/einblenden.js markiert nur, was beim Laden unterhalb des Bildes liegt. */
@media (prefers-reduced-motion: no-preference) {
	.einblenden--wartet { opacity: 0.01; transform: translateY(2rem); }
	.einblenden:not(.einblenden--wartet) { animation: pharmacare-einblenden 600ms cubic-bezier(0, 0, 0.3, 1) calc(var(--einblenden-reihe, 0) * 75ms) backwards; }
}
@keyframes pharmacare-einblenden {
	from { opacity: 0.01; transform: translateY(2rem); }
	to { opacity: 1; transform: none; }
}
@media print {
	.einblenden--wartet { opacity: 1; transform: none; }
}

/* Artikelsuche auf /produkte/ (Site-Plugin, includes/artikel.php): weißer Kasten mit blauer
   Oberkante, damit sie sich von der Seite abhebt; Felder auf Hellblau, Treffer als Liste mit
   Trennlinien, Status rechts, am Handy darunter. */
.artikelsuche { margin-block-start: var(--wp--preset--spacing--40); padding: var(--wp--preset--spacing--40); background: var(--wp--preset--color--weiss); border-top: 6px solid var(--wp--preset--color--primaer); border-radius: var(--wp--custom--radius); box-shadow: var(--wp--custom--schatten-karte); }
.artikelsuche > h2 { display: flex; align-items: center; gap: 0.5rem; color: var(--wp--preset--color--primaer); }
.artikelsuche > h2 svg { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (max-width: 599px) {
	.artikelsuche { padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20); }
}
.artikelsuche > * { margin-block: 0; }
.artikelsuche > * + * { margin-block-start: var(--wp--preset--spacing--20); }
.artikelsuche__formular { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--10); padding: var(--wp--preset--spacing--30); background: var(--wp--preset--color--primaer-hell); border-radius: var(--wp--custom--radius); }
.artikelsuche__felder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(11rem, 15rem) auto; gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20); align-items: end; }
.artikelsuche__feld { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.artikelsuche__feld label { font-weight: 700; }
.artikelsuche__feld input, .artikelsuche__feld select { min-height: 52px; padding: 0 0.9rem; font: inherit; color: var(--wp--preset--color--schrift); background: var(--wp--preset--color--weiss); border: 1px solid var(--wp--preset--color--schrift-gedaempft); border-radius: 8px; }
.artikelsuche__felder .wp-element-button { min-height: 52px; border: 0; cursor: pointer; }
@media (max-width: 599px) {
	.artikelsuche__felder { grid-template-columns: minmax(0, 1fr); }
	.artikelsuche__felder .wp-element-button { justify-self: start; }
}
/* Herstellerfilter aus dem Link eines Logos; „hidden“ setzt das Skript beim Aufheben. */
.artikelsuche__filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--wp--preset--spacing--20); }
.artikelsuche__filter[hidden] { display: none; }
.artikelsuche__aufheben { display: inline-flex; align-items: center; min-height: 44px; }
.artikelsuche__beispiel, .artikelsuche__stand { font-size: var(--wp--preset--font-size--klein); color: var(--wp--preset--color--schrift-gedaempft); }
.artikelsuche__status { font-weight: 600; }
.artikelsuche__status:empty { display: none; }
.artikelliste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--wp--preset--color--linie); }
.artikel { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem var(--wp--preset--spacing--20); align-items: center; padding: var(--wp--preset--spacing--20) 0; border-bottom: 1px solid var(--wp--preset--color--linie); }
.artikel__name { font-weight: 600; overflow-wrap: anywhere; }
.artikel__angaben { font-size: var(--wp--preset--font-size--klein); color: var(--wp--preset--color--schrift-gedaempft); }
.artikel__status { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--wp--preset--font-size--klein); font-weight: 600; white-space: nowrap; }
.artikel__status svg { flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.artikel__status--da { color: var(--wp--preset--color--erfolg); }
.artikel__status--anfrage { color: var(--wp--preset--color--schrift-gedaempft); }
/* Ganze Liste eines Bereichs, aufklappbar wie .wp-block-details; für Menschen zum Stöbern,
   für Suchmaschinen und KI-Crawler der lesbare Text zur Suche. Die Zeile zum Aufklappen ist
   ein hellblaues Band mit Balken links und Pfeil statt „+“, damit man sie nicht übersieht. */
.wp-block-details.artikelsuche__alle > summary { padding: 0.75rem 1.25rem; background: var(--wp--preset--color--primaer-hell); border-left: 5px solid var(--wp--preset--color--primaer); border-radius: var(--wp--custom--radius); color: var(--wp--preset--color--primaer-dunkel); font-weight: 700; }
.wp-block-details.artikelsuche__alle > summary::after, .wp-block-details.artikelsuche__alle[open] > summary::after { content: ""; flex: none; width: 0.6rem; height: 0.6rem; margin: -0.3rem 0.25rem 0 0; border: solid var(--wp--preset--color--primaer); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.wp-block-details.artikelsuche__alle[open] > summary::after { margin-top: 0.3rem; transform: rotate(-135deg); }
.wp-block-details.artikelsuche__alle > summary + * { margin-top: var(--wp--preset--spacing--20); }
@media (max-width: 599px) {
	.artikel { grid-template-columns: 1fr; }
	.artikel__status { grid-column: 1; grid-row: auto; }
}
.formular__meldung { border-left: 4px solid var(--wp--preset--color--fehler); background: var(--wp--preset--color--weiss); padding: var(--wp--preset--spacing--20); border-radius: 0 8px 8px 0; }
.formular__meldung p, .formular__meldung ul { margin: 0; }
.formular__meldung ul { margin-top: var(--wp--preset--spacing--10); padding-left: 1.2rem; }
.formular--danke { border-left: 4px solid var(--wp--preset--color--erfolg); }
.formular__titel { margin: 0; font-weight: 700; font-size: var(--wp--preset--font-size--gross); }
.formular--danke p { margin: 0; }
.formular__hinweis { margin: 0; font-size: var(--wp--preset--font-size--klein); color: var(--wp--preset--color--schrift-gedaempft); }
.formular .wp-element-button { align-self: flex-start; min-height: 52px; border: 0; cursor: pointer; }
.formular__falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Akkordeon auf Basis des Details-Blocks. */
.wp-block-details > summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; min-height: var(--wp--custom--klickziel); align-items: center; }
.wp-block-details > summary::-webkit-details-marker { display: none; }
.wp-block-details > summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--wp--preset--color--primaer); }
.wp-block-details[open] > summary::after { content: "–"; }

/* ---------- Startseite ---------- */
/* Hero: Text auf Blau, daneben bzw. darüber das Beratungsfoto. Beide Gesichter
   liegen zwischen 38 und 70 % der Bildbreite; der Ausschnitt bleibt auf ihrer Mitte. */
.hero { position: relative; overflow: hidden; --hero-streifen: clamp(13rem, 52vw, 20rem); }
.hero > .wp-block-group { position: relative; z-index: 2; }
.hero > .hero__foto { margin: 0; } /* sonst schiebt der Blockabstand das Foto nach unten */
.hero__foto { position: absolute; z-index: 1; }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__foto::after { content: ""; position: absolute; inset: 0; }
/* Ab 1024 px rechts am Rand. Ins Blau geht nur eine weiche Kante über; ein breiter
   Verlauf würde die Beraterin links verdecken. */
@media (min-width: 1024px) {
	/* Der Textblock bleibt im Inhaltsraster (75rem, zentriert); nur seine Kinder
	   sind linksbündig und schmal genug, um nie unter das Foto zu laufen.
	   Das erledigt WordPress' Layout selbst, hier nur die Breite. */
	.hero .hero__inhalt > * { max-width: min(44rem, 56%); }
	.hero__foto { inset: 0 0 0 auto; width: 40%; max-width: 620px; }
	.hero__foto img { object-position: 57% 30%; }
	.hero__foto::after { background: linear-gradient(to right, var(--wp--preset--color--primaer) 0%, transparent 18%); }
}
/* Darunter als Streifen oben im Hero, unten weich ins Blau. */
@media (max-width: 1023px) {
	.hero { padding-top: calc(var(--hero-streifen) + var(--wp--preset--spacing--40)) !important; }
	.hero__foto { inset: 0 0 auto; height: var(--hero-streifen); }
	.hero__foto img { object-position: 57% 38%; }
	.hero__foto::after { background: linear-gradient(to bottom, transparent 55%, var(--wp--preset--color--primaer) 100%); }
}
/* Die drei Einstiegskarten überlappen den unteren Rand des Hero. */
.wege { margin-top: -5.5rem !important; position: relative; z-index: 1; }

/* Ratgeber: Karten der Übersicht und unter „Mehr im Ratgeber“ ([pharmacare_ratgeber], Site-Plugin).
   Die ganze Karte ist klickbar; der Link liegt auf dem Titel, damit Screenreader nur ihn vorlesen. */
.ratgeber-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); gap: var(--wp--preset--spacing--30); }
.textseite > .ratgeber-liste, .textseite > h2 + .ratgeber-liste { margin-block-start: var(--wp--preset--spacing--20); }
.ratgeber-karte { position: relative; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--10); padding-bottom: var(--wp--preset--spacing--20); background: var(--wp--preset--color--weiss); border: 1px solid var(--wp--preset--color--linie); border-radius: var(--wp--custom--radius); overflow: hidden; }
.ratgeber-karte:hover { border-color: var(--wp--preset--color--akzent); }
.ratgeber-karte:focus-within { outline: 3px solid var(--wp--preset--color--primaer); outline-offset: 2px; }
.ratgeber-karte__bild { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.ratgeber-karte__titel { margin: 0; padding: 0 var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--normal); line-height: 1.3; }
.ratgeber-karte__titel a { color: var(--wp--preset--color--schrift); text-decoration: none; }
.ratgeber-karte__titel a:focus-visible { outline: none; }
.ratgeber-karte__titel a::after { content: ""; position: absolute; inset: 0; }
.ratgeber-karte:hover .ratgeber-karte__titel a { color: var(--wp--preset--color--primaer); text-decoration: underline; }
.ratgeber-karte__kennung { margin: 0; padding: 0 var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--klein); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wp--preset--color--schrift-gedaempft); }
.ratgeber-karte__text { margin: 0; padding: 0 var(--wp--preset--spacing--20); color: var(--wp--preset--color--schrift-gedaempft); }
.ratgeber-karte__ki { margin: auto 0 0; padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20) 0; font-size: 0.75rem; color: var(--wp--preset--color--schrift-gedaempft); } /* unten in der Karte, wie im Ratgeber des Shops */
/* Ratgeber-Beiträge: Kasten, Tabellen, Gesetzeszitate, Quellen. */
.kasten > h2:first-child { margin-block-start: 0; }
.ratgeber-artikel .wp-block-table { margin-inline: 0; overflow-x: auto; max-width: 100%; box-sizing: border-box; } /* breite Tabellen scrollen im eigenen Kasten, nicht die Seite */
.ratgeber-artikel .wp-block-table table { width: 100%; border-collapse: collapse; }
.ratgeber-artikel .wp-block-table th, .ratgeber-artikel .wp-block-table td { padding: 0.6em 0.75em; text-align: left; vertical-align: top; border: 1px solid var(--wp--preset--color--linie); }
.ratgeber-artikel .wp-block-table thead th { background: var(--wp--preset--color--flaeche); }
.ratgeber-artikel .wp-block-quote { margin-inline: 0; padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); background: var(--wp--preset--color--flaeche); border-left: 4px solid var(--wp--preset--color--primaer); border-radius: 0 var(--wp--custom--radius) var(--wp--custom--radius) 0; }
.ratgeber-artikel .wp-block-quote cite { display: block; margin-top: var(--wp--preset--spacing--10); font-size: var(--wp--preset--font-size--klein); font-style: normal; color: var(--wp--preset--color--schrift-gedaempft); }
.quellen { font-size: var(--wp--preset--font-size--klein); overflow-wrap: anywhere; }
.quellen li + li { margin-top: 0.4em; }

/* Hersteller-Seiten: Logo oben, Sortiment nach Bereichen ([pharmacare_hersteller_sortiment]). */
.hersteller-logo { display: inline-flex; padding: var(--wp--preset--spacing--20); background: var(--wp--preset--color--weiss); border: 1px solid var(--wp--preset--color--linie); border-radius: var(--wp--custom--radius); }
.hersteller-logo img { width: auto; max-width: 14rem; max-height: 4rem; object-fit: contain; }
.hersteller-sortiment > * { margin-block: 0; }
.hersteller-sortiment > * + * { margin-block-start: var(--wp--preset--spacing--20); }
.hersteller-sortiment > h2 { margin-block-start: var(--wp--preset--spacing--40); }
.hersteller-sortiment__anzahl { font-weight: 400; color: var(--wp--preset--color--schrift-gedaempft); }
/* Produktlinien eines Herstellers (Links auf seiner Seite) */
.produktlinien { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--wp--preset--spacing--20); }
.produktlinien a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.hersteller-sortiment > .produktlinien { margin-block-start: 0; }
.produktlinien--bereich { gap: 0 var(--wp--preset--spacing--30); }
.produktlinien--bereich li { display: inline-flex; align-items: baseline; gap: 0.4em; }
.produktlinien__hersteller { font-size: var(--wp--preset--font-size--klein); color: var(--wp--preset--color--schrift-gedaempft); }
/* Videos des PharmaCare-Kanals ([pharmacare_videos]): Vorschaubild, YouTube erst auf Klick. */
.videos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); gap: var(--wp--preset--spacing--30); }
.video { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--10); }
.video__vorschau { position: relative; display: block; border-radius: var(--wp--custom--radius); }
.video__vorschau img, .video__player { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: 0; border-radius: var(--wp--custom--radius); background: var(--wp--preset--color--flaeche); }
.video__abspielen { position: absolute; inset: 0; display: grid; place-items: center; }
.video__abspielen svg { box-sizing: content-box; padding: 0.9rem 0.8rem 0.9rem 1rem; border-radius: 50%; background: var(--wp--preset--color--primaer); fill: var(--wp--preset--color--weiss); }
.video__vorschau:hover .video__abspielen svg, .video__vorschau:focus-visible .video__abspielen svg { background: var(--wp--preset--color--primaer-dunkel); }
.video__titel { margin: 0; font-weight: 600; }
.videos__hinweis { font-size: var(--wp--preset--font-size--klein); color: var(--wp--preset--color--schrift-gedaempft); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Klein */
@media (max-width: 781px) {
	.nur-desktop { display: none !important; }
	.logo img { height: 46px; }
	.wege { margin-top: -3.5rem !important; }
	.hero { padding-bottom: 6.5rem !important; }
}

/* Bewegung respektieren. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Druck */
@media print {
	.wp-block-navigation, .wp-block-button, .pharmacare-skip-link { display: none; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}

/* Sprungziele (z. B. /produkte/#versorgungsbereiche): Überschrift nicht direkt an der Fensterkante. */
h2[id], h3[id] { scroll-margin-top: var(--wp--preset--spacing--30); }

/* Schwebender Chat-Knopf unten rechts (Site-Plugin, includes/assistent.php): öffnet den PharmaCare-Assistenten. */
.chat-blase { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 30; display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--wp--preset--color--primaer); color: var(--wp--preset--color--weiss); box-shadow: var(--wp--custom--schatten); border: 2px solid var(--wp--preset--color--weiss); text-decoration: none; }
.chat-blase svg { stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chat-blase:hover, .chat-blase:focus-visible { background: var(--wp--preset--color--primaer-dunkel); border-color: var(--wp--preset--color--akzent); color: var(--wp--preset--color--weiss); }
.chat-blase:focus-visible { outline: 3px solid var(--wp--preset--color--primaer-dunkel); outline-offset: 3px; }
.chat-blase[aria-busy="true"] { cursor: progress; opacity: 0.8; }
.chat-blase__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
	.chat-blase { transition: transform 200ms ease, background-color 150ms ease; }
	.chat-blase:hover { transform: translateY(-0.25rem); }
}
@media print { .chat-blase { display: none; } }

/* Logos der Partnerversicherungen auf /vkb/, /ukv/ und deren Angebotsseiten. */
.partnerlogo { margin: 0 0 var(--wp--preset--spacing--20); }
.partnerlogo img { height: 56px; width: auto; box-sizing: content-box; padding: 0.75rem 1.25rem; background: var(--wp--preset--color--weiss); border-radius: var(--wp--custom--radius); box-shadow: var(--wp--custom--schatten-karte); } /* Logos haben weißen Grund: als kleine weiße Karte auf dem grauen Hintergrund */
.partnerlogos { gap: var(--wp--preset--spacing--40); align-items: center; }
.partnerlogos .partnerlogo { margin: 0; }

/* Pakete und Boxen (VKB/UKV): je eine Karte mit Inhalt und Menge, die individuelle gestrichelt. */
.textseite > .paketkarten { max-width: var(--wp--style--global--wide-size); }
.paketkarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); gap: var(--wp--preset--spacing--20); }
.paket { min-width: 0; display: flex; flex-direction: column; gap: 0.6rem; padding: 1.25rem 1.25rem 1rem; background: var(--wp--preset--color--weiss); border-radius: var(--wp--custom--radius); box-shadow: var(--wp--custom--schatten-karte); }
.paket p { margin: 0; }
.paket__titel { font-size: var(--wp--preset--font-size--ueberschrift-3); font-weight: 700; color: var(--wp--preset--color--primaer); line-height: 1.2; }
.paket__text { font-size: var(--wp--preset--font-size--klein); color: var(--wp--preset--color--schrift-gedaempft); line-height: 1.45; }
.paket__liste { list-style: none; margin: 0; padding: 0; font-size: var(--wp--preset--font-size--klein); }
.paket__liste li { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.45rem 0.6rem; border-radius: 4px; }
.paket__liste li:nth-child(odd) { background: var(--wp--preset--color--primaer-hell); }
.paket__liste li > span:first-child { flex: 1; min-width: 0; }
.paket__menge { font-weight: 700; white-space: nowrap; text-align: right; }
.paket--individuell { background: transparent; box-shadow: none; border: 2px dashed var(--wp--preset--color--primaer); }
.paketkarten__hinweis { margin-top: var(--wp--preset--spacing--10); font-size: var(--wp--preset--font-size--klein); color: var(--wp--preset--color--schrift-gedaempft); }
.ratgeber-karte > .ratgeber-karte__kennung:first-child { padding-top: var(--wp--preset--spacing--20); }
.produktneuheiten .ratgeber-liste { margin-top: var(--wp--preset--spacing--30); grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: var(--wp--preset--spacing--30); } /* drei Karten über die volle Breite wie die Einstiegskarten */
.produktneuheiten .ratgeber-karte { border-color: transparent; box-shadow: var(--wp--custom--schatten-karte); }

/* Bereichsseiten: Produktarten als Schnellwahl (Symbol-Karten mit Sprung), kurzer Beratungsstreifen,
   dann je Produktart eine weiße Karte im Raster; „Wir versorgen Sie bei“ als Häkchenliste. */
.textseite > .produktart-wahl, .textseite > .produktarten, .textseite > .kurzkontakt { max-width: var(--wp--style--global--wide-size); }
.produktart-wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: var(--wp--preset--spacing--20); }
.produktart-wahl .karte { border-color: transparent; box-shadow: var(--wp--custom--schatten-karte); }
.kurzkontakt { gap: var(--wp--preset--spacing--20); padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); background: var(--wp--preset--color--primaer-hell); border-radius: var(--wp--custom--radius); }
.kurzkontakt p { margin: 0; flex: 1 1 22rem; }
.produktarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr)); gap: var(--wp--preset--spacing--30); }
.produktart { padding: var(--wp--preset--spacing--30); background: var(--wp--preset--color--weiss); border-radius: var(--wp--custom--radius); box-shadow: var(--wp--custom--schatten-karte); }
.produktart > :first-child { margin-top: 0; }
.produktart h3 { color: var(--wp--preset--color--primaer); }
.haekchen-liste { list-style: none; padding: 0; columns: 2 16rem; column-gap: var(--wp--preset--spacing--40); }
.haekchen-liste li { position: relative; padding-left: 1.9rem; margin-bottom: 0.5rem; break-inside: avoid; }
.haekchen-liste li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--wp--preset--color--primaer-hell); }
.haekchen-liste li::after { content: ""; position: absolute; left: 0.46rem; top: calc(0.2em + 0.27rem); width: 0.3rem; height: 0.55rem; border: solid var(--wp--preset--color--primaer); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.produktarten > .produktart { margin: 0 !important; } /* Blockabstand von WordPress würde die zweite Karte nach unten schieben */

/* Produktarten als Kacheln (Bereiche ohne eigene Beschreibungen je Produktart, Arten von Stomata). */
.textseite > .kachel-liste { max-width: var(--wp--style--global--wide-size); }
.kachel-liste { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: var(--wp--preset--spacing--20); }
.kachel-liste li { margin: 0; padding: 1rem 1.1rem 1rem 1.1rem; background: var(--wp--preset--color--weiss); border-radius: var(--wp--custom--radius); box-shadow: var(--wp--custom--schatten-karte); border-left: 4px solid var(--wp--preset--color--primaer); }

/* Produkt- und Bereichsseiten: Raster, Suche, Herstellerlogos und Kästen so breit wie auf den
   Startseite (volle Inhaltsbreite); Fließtext bleibt für die Lesbarkeit schmal. */
.textseite > .bereiche, .textseite > .marken, .textseite > .artikelsuche, .textseite > .kasten, .textseite > .ratgeber-liste { max-width: var(--wp--style--global--wide-size); }
.textseite > .bereiche { grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); }

/* Schnellwahl mit Kreisbildern der alten Website (Name steht im Bild, für Screenreader im Text). */
.produktart-wahl .produktart-bild { align-items: center; text-align: center; gap: 0.4rem; padding: 1rem 1rem 1.1rem; }
.produktart-bild img { width: 160px; height: 160px; object-fit: contain; }
.produktart-bild .karte__text { font-size: var(--wp--preset--font-size--klein); line-height: 1.4; }
.kachel-liste li.mit-bild { display: block; }
.kachel-liste li.mit-bild img { display: block; width: 96px; height: 96px; object-fit: contain; margin: 0 0 0.6rem; }
.kugelreihe { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--wp--preset--spacing--20); }
.textseite > .kugelreihe { max-width: var(--wp--style--global--wide-size); }
.kugelreihe li { margin: 0; display: flex; justify-content: center; padding: 0.75rem; background: var(--wp--preset--color--weiss); border-radius: var(--wp--custom--radius); box-shadow: var(--wp--custom--schatten-karte); }
.kugelreihe img { width: 140px; height: 140px; object-fit: contain; }
/* Weitere Raster und Kästen in Inhaltsseiten ebenfalls in voller Breite. */
.textseite > .wp-block-table, .textseite > .videos, .textseite > .herstellerliste, .textseite > .formular, .textseite > .rezeptwege.qr-reihe { max-width: var(--wp--style--global--wide-size); }

/* Logo-Raster: Kachel mit Namen, wenn das Logo nicht gezeigt werden darf oder kann. */
.marken .marke-text span { font-weight: 700; color: var(--wp--preset--color--schrift); text-align: center; line-height: 1.25; }

/* Kostenträger: Logo in der weißen Box, Name darunter außerhalb der Box. */
.marken--kassen figure.kasse { aspect-ratio: auto; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0.45rem; padding: 0; background: none; border: 0; }
.marken--kassen .kasse img, .marken--kassen .kasse__ohne-logo { box-sizing: border-box; width: 100%; aspect-ratio: 2 / 1; height: auto; max-height: none; max-width: 100%; object-fit: contain; padding: 0.45rem 0.6rem; background: var(--wp--preset--color--weiss); border: 1px solid var(--wp--preset--color--linie); border-radius: var(--wp--custom--radius); }
.marken--kassen .kasse figcaption { margin: 0; font-size: var(--wp--preset--font-size--klein); line-height: 1.3; text-align: center; color: var(--wp--preset--color--schrift); }
.marken--kassen .kasse__ohne-logo { display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 700; font-size: 0.95rem; line-height: 1.2; color: var(--wp--preset--color--primaer); }
.marken--kassen.is-layout-grid { grid-template-columns: repeat(auto-fill, minmax(min(10.5rem, 100%), 1fr)); } /* etwas größere Kacheln */

/* Produktseite (Cranberry): Foto links neben der Einleitung, so breit wie die Raster. */
.textseite > .produkt-kopf { max-width: var(--wp--style--global--wide-size); }
.produktbild img { width: 100%; height: auto; border-radius: var(--wp--custom--radius); background: var(--wp--preset--color--weiss); }

/* Werbebanner (Cranberry auf /produkte/): Foto über die volle Inhaltsbreite, Text links auf hellem Verlauf. */
.textseite > .produkt-banner { max-width: var(--wp--style--global--wide-size); }
.produkt-banner { position: relative; display: flex; align-items: center; min-height: 19rem; padding: var(--wp--preset--spacing--40); border-radius: var(--wp--custom--radius); overflow: hidden; background-color: var(--wp--preset--color--weiss); background-size: cover; background-position: right center; box-shadow: var(--wp--custom--schatten-karte); color: var(--wp--preset--color--schrift); text-decoration: none; }
.produkt-banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--wp--preset--color--weiss) 0%, var(--wp--preset--color--weiss) 30%, transparent 65%); opacity: 0.92; }
.produkt-banner:hover { color: var(--wp--preset--color--schrift); text-decoration: none; }
.produkt-banner__inhalt { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; max-width: 26rem; }
.produkt-banner__kicker { font-size: var(--wp--preset--font-size--klein); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--akzent); }
.produkt-banner__titel { font-size: var(--wp--preset--font-size--ueberschrift-2); font-weight: 700; line-height: 1.15; color: var(--wp--preset--color--primaer); }
.produkt-banner__text { font-size: var(--wp--preset--font-size--gross); }
.produkt-banner__knopf { margin-top: 0.4rem; display: inline-flex; align-items: center; min-height: var(--wp--custom--klickziel); padding: 0 1.3rem; border-radius: 999px; background: var(--wp--preset--color--primaer); color: var(--wp--preset--color--weiss); font-weight: 700; }
.produkt-banner:hover .produkt-banner__knopf, .produkt-banner:focus-visible .produkt-banner__knopf { background: var(--wp--preset--color--primaer-dunkel); }
.produkt-banner__hinweis { position: absolute; right: 0.6rem; bottom: 0.5rem; padding: 0.1rem 0.4rem; border-radius: 4px; background: rgb(0 0 0 / 0.55); color: var(--wp--preset--color--weiss); font-size: 0.7rem; }
@media (max-width: 781px) {
	.produkt-banner { min-height: 0; padding-top: 12rem; background-size: auto 13rem; background-repeat: no-repeat; background-position: right top; }
	.produkt-banner::before { background: linear-gradient(180deg, transparent 0, transparent 9rem, var(--wp--preset--color--weiss) 12.5rem); opacity: 1; }
	.produkt-banner__hinweis { top: 0.5rem; bottom: auto; }
}
@media (prefers-reduced-motion: no-preference) { .produkt-banner { transition: transform 200ms ease, box-shadow 200ms ease; } .produkt-banner:hover { transform: translateY(-0.25rem); box-shadow: var(--wp--custom--schatten); } }

/* Schmale Fassung des Werbebanners (Startseite): niedriger, Text in einer Zeile mit dem Knopf. */
.produkt-banner--schmal { min-height: 0; padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); background-position: right 30%; }
.produkt-banner--schmal .produkt-banner__inhalt { max-width: 34rem; display: grid; grid-template-columns: 1fr auto; column-gap: var(--wp--preset--spacing--30); row-gap: 0.25rem; align-items: center; }
.produkt-banner--schmal .produkt-banner__kicker, .produkt-banner--schmal .produkt-banner__titel, .produkt-banner--schmal .produkt-banner__text { grid-column: 1; }
.produkt-banner--schmal .produkt-banner__titel { font-size: var(--wp--preset--font-size--ueberschrift-3); }
.produkt-banner--schmal .produkt-banner__text { font-size: var(--wp--preset--font-size--normal); }
.produkt-banner--schmal .produkt-banner__knopf { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
.produkt-banner--schmal::before { background: linear-gradient(90deg, var(--wp--preset--color--weiss) 0%, var(--wp--preset--color--weiss) 45%, transparent 75%); }
@media (max-width: 781px) {
	.produkt-banner--schmal { padding-top: 9rem; background-size: auto 10rem; }
	.produkt-banner--schmal::before { background: linear-gradient(180deg, transparent 0, transparent 6.5rem, var(--wp--preset--color--weiss) 9.5rem); }
	.produkt-banner--schmal .produkt-banner__inhalt { display: flex; }
}
/* Startseiten-Banner: so breit wie die Karten darüber, Foto ganz zeigen (rechts, volle Höhe). */
.startseite-banner > .produkt-banner { box-sizing: border-box; max-width: var(--wp--style--global--content-size); margin-inline: auto !important; width: 100%; }
.produkt-banner--schmal { background-size: auto 100%; background-position: right center; background-repeat: no-repeat; text-align: left; }
@media (max-width: 781px) {
	.produkt-banner--schmal { background-size: 100% auto; background-position: center top; padding-top: calc(42vw + 0.5rem); }
	.produkt-banner--schmal::before { background: linear-gradient(180deg, transparent 0, transparent calc(42vw - 3rem), var(--wp--preset--color--weiss) calc(42vw + 0.5rem)); }
	.produkt-banner--schmal .produkt-banner__inhalt { align-items: flex-start; text-align: left; }
}
@media (min-width: 782px) { .produkt-banner--schmal::before { opacity: 1; background: linear-gradient(90deg, var(--wp--preset--color--weiss) 0%, var(--wp--preset--color--weiss) 68%, transparent 88%); } }
/* Startseiten-Banner: Packung größer, weniger Weißraum – Foto vergrößert und auf die Dose ausgerichtet. */
@media (min-width: 782px) {
	.produkt-banner--schmal { min-height: 12rem; background-size: auto 155%; background-position: right 54%; }
	.produkt-banner--schmal::before { background: linear-gradient(90deg, var(--wp--preset--color--weiss) 0%, var(--wp--preset--color--weiss) 38%, transparent 56%); }
}
@media (min-width: 782px) {
	.produkt-banner--schmal { background-position: right 62%; }
	.produkt-banner--schmal::before { background: linear-gradient(90deg, var(--wp--preset--color--weiss) 0%, var(--wp--preset--color--weiss) 47%, transparent 68%); }
}

/* Banner als Kopf der Cranberry-Seite (kein Link als Ganzes, Knopf springt zur Bestellung). */
.produkt-banner--kopf { cursor: default; }
.produkt-banner--kopf:hover { transform: none; box-shadow: var(--wp--custom--schatten-karte); }
.produkt-banner--kopf .produkt-banner__knopf { text-decoration: none; }
.produkt-banner--kopf .produkt-banner__knopf:hover, .produkt-banner--kopf .produkt-banner__knopf:focus-visible { background: var(--wp--preset--color--primaer-dunkel); color: var(--wp--preset--color--weiss); }
.textseite > .produkt-banner--kopf { margin-bottom: var(--wp--preset--spacing--30); }

/* KI-Hinweis im Startseitenfoto: klein, dunkle Schrift, unten rechts, ohne Kasten. */
.hero__hinweis { position: absolute; z-index: 2; right: 0.75rem; bottom: 0.5rem; margin: 0; font-size: 0.72rem; line-height: 1.2; color: var(--wp--preset--color--schrift); opacity: 0.8; text-shadow: 0 0 6px rgb(255 255 255 / 0.6); }

/* Krankenkassen-Suche im Hero (Plugin includes/kassen.php, assets/kassensuche.js) */
.kassen-suche { max-width: 34rem; margin-top: var(--wp--preset--spacing--30); padding: var(--wp--preset--spacing--30); border-radius: 8px; background: var(--wp--preset--color--weiss); color: var(--wp--preset--color--schrift); box-shadow: 0 6px 24px rgb(0 0 0 / 0.18); }
.kassen-suche[hidden] { display: none; }
.kassen-suche__frage { display: block; margin-bottom: 0.4rem; font-weight: 700; }
.kassen-suche__eingabe { box-sizing: border-box; width: 100%; min-height: var(--wp--custom--klickziel); padding: 0.5rem 0.8rem; border: 2px solid var(--wp--preset--color--linie); border-radius: 8px; font: inherit; color: inherit; background: var(--wp--preset--color--weiss); }
.kassen-suche__eingabe:focus { outline: 3px solid var(--wp--preset--color--primaer); outline-offset: 1px; border-color: var(--wp--preset--color--primaer); }
.kassen-suche__hilfe { margin: 0.4rem 0 0; font-size: var(--wp--preset--font-size--klein); color: var(--wp--preset--color--schrift-gedaempft); }
.kassen-suche__liste { list-style: none; margin: 0.5rem 0 0; padding: 0; border: 1px solid var(--wp--preset--color--linie); border-radius: 8px; overflow: hidden; }
.kassen-suche__liste[hidden] { display: none; }
.kassen-suche__liste li + li { border-top: 1px solid var(--wp--preset--color--linie); }
.kassen-suche__vorschlag { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; width: 100%; min-height: var(--wp--custom--klickziel); padding: 0.4rem 0.8rem; border: 0; background: var(--wp--preset--color--weiss); color: var(--wp--preset--color--schrift); font: inherit; text-align: left; cursor: pointer; }
.kassen-suche__vorschlag:hover, .kassen-suche__vorschlag:focus { background: var(--wp--preset--color--primaer-hell); outline: none; box-shadow: inset 3px 0 0 var(--wp--preset--color--akzent); }
.kassen-suche__marke { flex: none; padding: 0.05rem 0.5rem; border-radius: 999px; background: var(--wp--preset--color--hintergrund); color: var(--wp--preset--color--schrift-gedaempft); font-size: var(--wp--preset--font-size--klein); }
.kassen-suche__ergebnis:empty { display: none; }
.kassen-suche__ergebnis { margin-top: 0.75rem; padding: 0.75rem 0.9rem; border-radius: 8px; background: var(--wp--preset--color--hintergrund); }
.kassen-suche__ergebnis p { margin: 0; }
.kassen-suche__ergebnis--kasse { background: var(--wp--preset--color--erfolg-hell); color: var(--wp--preset--color--erfolg-dunkel); }
.kassen-suche__ergebnis--kasse p::before { content: "✓ "; font-weight: 700; }
.kassen-suche__wege { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; margin-top: 0.75rem; }
.kassen-suche__wege[hidden] { display: none; }
.kassen-suche__knopf { display: inline-flex; align-items: center; min-height: var(--wp--custom--klickziel); padding: 0 1.1rem; border-radius: 999px; background: var(--wp--preset--color--primaer); color: var(--wp--preset--color--weiss); font-weight: 600; text-decoration: none; }
.kassen-suche__knopf[hidden] { display: none; }
.kassen-suche__knopf:hover { background: var(--wp--preset--color--primaer-dunkel); color: var(--wp--preset--color--weiss); }
.kassen-suche__kanaele { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* Drei Knöpfe im Hero: ab 1024 px in einer Zeile, ohne unter das Foto zu laufen (Foto: rechte 40 %). */
@media (min-width: 1024px) {
	.hero .hero__inhalt > .wp-block-buttons { max-width: min(48rem, 60%); }
	.hero .wp-block-buttons .wp-block-button__link { padding-left: 1.3rem; padding-right: 1.3rem; }
}
.kassen-suche__ergebnis--sonder { background: var(--wp--preset--color--primaer-hell); color: var(--wp--preset--color--schrift); }
/* Knopf „Kasse prüfen“ im Hero in der Akzentfarbe (Magenta), hebt sich von den beiden anderen ab. */
.hero .kassen-knopf .wp-block-button__link { background: var(--wp--preset--color--akzent); border-color: var(--wp--preset--color--akzent); color: var(--wp--preset--color--weiss); }
.hero .kassen-knopf .wp-block-button__link:hover,
.hero .kassen-knopf .wp-block-button__link[aria-expanded="true"] { background: var(--wp--preset--color--weiss); border-color: var(--wp--preset--color--weiss); color: var(--wp--preset--color--akzent); }

/* Kopf bei großer Schrift (200 %): Zeile darf umbrechen, die Telefonnummer bleibt zusammen. */
.kopf__telefon a, .sprache { white-space: nowrap; }
.wp-block-table[tabindex]:focus-visible { outline: 3px solid var(--wp--preset--color--primaer); outline-offset: 2px; }
/* Knopf „Beitrag vorlesen“ in Ratgeber-Beiträgen (Plugin includes/vorlesen.php): Stil der Kontaktwege (.kanal). */
.vorlesen { margin: 0 0 var(--wp--preset--spacing--20); }
.vorlesen__knopf { font-family: inherit; cursor: pointer; }
.vorlesen__knopf[hidden] { display: none; }
.vorlesen__knopf[aria-pressed="true"] { border-color: var(--wp--preset--color--akzent); }
/* PharmaCare-Assistent: Chatfenster unten rechts (Plugin includes/assistent.php, assets/assistent.js) */
.chat-blase-bereich[hidden] { display: none; }
.assistent { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40; display: flex; flex-direction: column; width: min(25rem, calc(100vw - 1.5rem)); height: min(38rem, calc(100vh - 2.5rem)); background: var(--wp--preset--color--weiss); color: var(--wp--preset--color--schrift); border-radius: 0.5rem; box-shadow: 0 12px 40px rgb(0 0 0 / 0.22); overflow: hidden; }
.assistent[hidden] { display: none; }
.assistent__kopf { display: flex; align-items: center; gap: 0.7rem; padding: 0.8rem 0.6rem 0.8rem 1rem; background: var(--wp--preset--color--primaer); color: var(--wp--preset--color--weiss); }
.assistent__logo { flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--wp--preset--color--weiss); box-shadow: 0 0 0 2px var(--wp--preset--color--akzent); }
.assistent__kopftext { min-width: 0; }
.assistent__titel { margin: 0; font-size: 1.05rem; line-height: 1.2; color: inherit; }
.assistent__unter { margin: 0.1rem 0 0; font-size: 0.8rem; opacity: 0.9; }
.assistent__neu { margin-left: auto; flex: none; width: var(--wp--custom--klickziel); height: var(--wp--custom--klickziel); border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.assistent__neu svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.assistent__neu:hover, .assistent__neu:focus-visible { background: rgb(255 255 255 / 0.15); outline: 2px solid var(--wp--preset--color--weiss); }
.assistent__zu { flex: none; width: var(--wp--custom--klickziel); height: var(--wp--custom--klickziel); border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 1.7rem; line-height: 1; cursor: pointer; }
.assistent__zu:hover, .assistent__zu:focus-visible { background: rgb(255 255 255 / 0.15); outline: 2px solid var(--wp--preset--color--weiss); }
.assistent__verlauf { flex: 1; overflow-y: auto; padding: 1rem 0.9rem 0.5rem; display: flex; flex-direction: column; gap: 0.75rem; background: var(--wp--preset--color--hintergrund); }
.assistent__nachricht { max-width: 85%; padding: 0.6rem 0.85rem; border-radius: 0.5rem; background: var(--wp--preset--color--weiss); box-shadow: 0 1px 2px rgb(0 0 0 / 0.08); font-size: 0.95rem; line-height: 1.45; }
.assistent__nachricht p { margin: 0; }
.assistent__nachricht--ki, .assistent__nachricht--mensch { align-self: flex-start; border-bottom-left-radius: 0.3rem; }
.assistent__nachricht--kunde { align-self: flex-end; border-bottom-right-radius: 0.3rem; background: var(--wp--preset--color--primaer); color: var(--wp--preset--color--weiss); }
.assistent__nachricht--mensch { box-shadow: inset 3px 0 0 var(--wp--preset--color--akzent), 0 1px 2px rgb(0 0 0 / 0.08); }
.assistent__nachricht--system { align-self: stretch; max-width: none; padding: 0.4rem 0.8rem; background: var(--wp--preset--color--primaer-hell); box-shadow: none; font-size: 0.85rem; text-align: center; }
.assistent__nachricht--hinweis { background: transparent; color: var(--wp--preset--color--schrift-gedaempft); font-size: 0.78rem; padding: 0 0.5rem; }
.assistent__wer { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.2rem; font-size: 0.75rem; font-weight: 700; color: var(--wp--preset--color--primaer); }
.assistent__nachricht--kunde .assistent__wer { display: none; }
.assistent__mini { width: 1.15rem; height: 1.15rem; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--wp--preset--color--akzent); }
.assistent__nachricht a { color: inherit; font-weight: 600; text-decoration: underline; }
.assistent__schnell { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 0.9rem 0.6rem; background: var(--wp--preset--color--hintergrund); }
.assistent__schnell[hidden] { display: none; }
.assistent__vorschlag { min-height: 2.5rem; padding: 0.35rem 0.85rem; border: 1px solid var(--wp--preset--color--primaer); border-radius: 0.5rem; background: var(--wp--preset--color--weiss); color: var(--wp--preset--color--primaer); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; text-align: left; }
.assistent__vorschlag:hover, .assistent__vorschlag:focus-visible { border-color: var(--wp--preset--color--akzent); background: var(--wp--preset--color--primaer-hell); }
.assistent__vorschlag--mensch { border-color: var(--wp--preset--color--akzent); color: var(--wp--preset--color--akzent); }
.assistent__tippt { display: flex; gap: 0.25rem; margin: 0; padding: 0 1.2rem 0.6rem; background: var(--wp--preset--color--hintergrund); }
.assistent__tippt[hidden] { display: none; }
.assistent__tippt span { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--wp--preset--color--schrift-gedaempft); animation: assistent-tippt 1s infinite ease-in-out; }
.assistent__tippt span:nth-child(2) { animation-delay: 0.15s; }
.assistent__tippt span:nth-child(3) { animation-delay: 0.3s; }
@keyframes assistent-tippt { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .assistent__tippt span { animation: none; opacity: 0.6; } }
/* KI denkt nach: kleines drehendes Logo mit Wartezeit (wie „Thinking …“ in Claude Code) */
.assistent__denkt { display: flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0 1.2rem 0.6rem; background: var(--wp--preset--color--hintergrund); color: var(--wp--preset--color--schrift-gedaempft); font-size: 0.85rem; }
.assistent__denkt[hidden] { display: none; }
.assistent__denkt-logo { width: 1.25rem; height: 1.25rem; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--wp--preset--color--akzent); animation: assistent-denkt 1.6s linear infinite; }
@keyframes assistent-denkt { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(0.88); } 100% { transform: rotate(360deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .assistent__denkt-logo { animation: none; } }
.assistent__rueckruf { display: grid; gap: 0.5rem; padding: 0.8rem 0.9rem; border-top: 1px solid var(--wp--preset--color--linie); background: var(--wp--preset--color--weiss); }
.assistent__rueckruf[hidden] { display: none; }
.assistent__rueckruf-titel { margin: 0; font-weight: 700; }
.assistent__rueckruf label { display: grid; gap: 0.2rem; font-size: 0.85rem; font-weight: 600; }
.assistent__rueckruf input { box-sizing: border-box; width: 100%; min-height: var(--wp--custom--klickziel); padding: 0.45rem 0.7rem; border: 1px solid var(--wp--preset--color--linie); border-radius: 0.5rem; font: inherit; }
.assistent__knopf { min-height: var(--wp--custom--klickziel); border: 0; border-radius: 0.5rem; background: var(--wp--preset--color--primaer); color: var(--wp--preset--color--weiss); font: inherit; font-weight: 700; cursor: pointer; }
.assistent__knopf:hover { background: var(--wp--preset--color--primaer-dunkel); }
.assistent__eingabe { display: flex; align-items: flex-end; gap: 0.5rem; margin: 0; padding: 0.7rem 0.75rem 0.4rem; border-top: 1px solid var(--wp--preset--color--linie); background: var(--wp--preset--color--weiss); }
.assistent__eingabe[hidden] { display: none; }
.assistent__eingabe textarea { flex: 1; box-sizing: border-box; min-height: var(--wp--custom--klickziel); max-height: 7.5rem; padding: 0.6rem 0.9rem; border: 1px solid var(--wp--preset--color--linie); border-radius: 0.5rem; background: var(--wp--preset--color--hintergrund); font: inherit; line-height: 1.4; resize: none; overflow-y: hidden; }
.assistent__senden { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--wp--custom--klickziel); height: var(--wp--custom--klickziel); border: 0; border-radius: 50%; background: var(--wp--preset--color--primaer); color: var(--wp--preset--color--weiss); cursor: pointer; }
.assistent__senden svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.assistent__senden:hover { background: var(--wp--preset--color--primaer-dunkel); }
.assistent__aktionen { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0 1rem 0.55rem; background: var(--wp--preset--color--weiss); }
.assistent__aktionen button { min-height: 1.9rem; padding: 0; border: 0; background: none; color: var(--wp--preset--color--schrift-gedaempft); font: inherit; font-size: 0.8rem; text-decoration: underline; cursor: pointer; }
.assistent__aktionen .assistent__mensch { color: var(--wp--preset--color--akzent); font-weight: 600; }
.assistent__aktionen button[hidden] { display: none; }
.assistent button:focus-visible, .assistent textarea:focus-visible, .assistent input:focus-visible { outline: 3px solid var(--wp--preset--color--primaer); outline-offset: 2px; }
/* Griff zum Größe-Ändern oben links (Fenster hängt unten rechts) */
.assistent__groesse { position: absolute; top: 0; left: 0; z-index: 2; width: 1.5rem; height: 1.5rem; padding: 0; border: 0; background: transparent; cursor: nwse-resize; touch-action: none; }
.assistent__groesse span { position: absolute; top: 0.3rem; left: 0.3rem; width: 0.6rem; height: 0.6rem; border-top: 2px solid var(--wp--preset--color--weiss); border-left: 2px solid var(--wp--preset--color--weiss); opacity: 0.7; }
.assistent__groesse:hover span, .assistent__groesse:focus-visible span { opacity: 1; }
@media (max-width: 480px) { .assistent { right: 0; bottom: 0; width: 100vw !important; height: 100dvh !important; border-radius: 0; } .assistent__groesse { display: none; } }
/* Ein- und Ausgleiten: auf dem Smartphone von rechts über den ganzen Bildschirm, sonst leicht von unten */
.assistent { transform: translateY(1rem); opacity: 0; transition: transform 0.25s ease, opacity 0.25s ease; }
.assistent.assistent--offen { transform: none; opacity: 1; }
.assistent:focus { outline: none; }
@media (max-width: 480px) {
	.assistent { transform: translateX(100%); opacity: 1; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
	.assistent.assistent--offen { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .assistent { transition: none; } }
.assistent__falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } /* Fallen-Feld gegen Bots */
.assistent__nein { min-height: 2.25rem; border: 0; background: none; color: var(--wp--preset--color--schrift-gedaempft); font: inherit; font-size: 0.85rem; text-decoration: underline; cursor: pointer; }
.assistent__warten { margin: 0; padding: 0.7rem 0.9rem; border-top: 1px solid var(--wp--preset--color--linie); background: var(--wp--preset--color--primaer-hell); text-align: center; }
.assistent__warten[hidden] { display: none; }
.assistent__warten-text { margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--wp--preset--color--primaer); }
.assistent__uhr { margin: 0.15rem 0 0.4rem; font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--wp--preset--color--primaer); }
.assistent__balken { height: 0.35rem; border-radius: 0.5rem; background: var(--wp--preset--color--weiss); overflow: hidden; }
.assistent__balken span { display: block; height: 100%; width: 100%; background: var(--wp--preset--color--akzent); transition: width 1s linear; }
@media (prefers-reduced-motion: reduce) { .assistent__balken span { transition: none; } }
.assistent__verlauf .assistent__rueckruf { flex: none; gap: 0.4rem; margin: 0; padding: 0.75rem 0.85rem; border: 1px solid var(--wp--preset--color--linie); border-left: 3px solid var(--wp--preset--color--akzent); border-radius: 0.5rem; background: var(--wp--preset--color--weiss); }
.assistent__verlauf .assistent__rueckruf input { min-height: 2.5rem; padding: 0.35rem 0.6rem; }
.assistent__verlauf .assistent__rueckruf-titel { font-size: 0.95rem; }
.assistent__absatz { display: block; }
/* Name vor der Übergabe an den Kundenservice (freiwillig, sonst anonym) */
.assistent__namen { flex: none; display: grid; gap: 0.5rem; margin: 0; padding: 0.75rem 0.85rem; border: 1px solid var(--wp--preset--color--linie); border-left: 3px solid var(--wp--preset--color--akzent); border-radius: 0.5rem; background: var(--wp--preset--color--weiss); }
.assistent__namen[hidden] { display: none; }
.assistent__namen label { display: grid; gap: 0.2rem; font-size: 0.85rem; font-weight: 600; }
.assistent__namen input { box-sizing: border-box; width: 100%; min-height: 2.5rem; padding: 0.35rem 0.6rem; border: 1px solid var(--wp--preset--color--linie); border-radius: 0.5rem; font: inherit; }
.assistent__namen-knoepfe { display: flex; gap: 0.5rem; }
.assistent__namen-knoepfe button { flex: 1; }
.assistent__anonym { min-height: var(--wp--custom--klickziel); border: 1px solid var(--wp--preset--color--primaer); border-radius: 0.5rem; background: var(--wp--preset--color--weiss); color: var(--wp--preset--color--primaer); font: inherit; font-weight: 700; cursor: pointer; }
.assistent__anonym:hover { background: var(--wp--preset--color--primaer-hell); }
.assistent__absatz + .assistent__absatz, .assistent__nachricht ul + .assistent__absatz, .assistent__absatz + ul { margin-top: 0.5rem; }
.assistent__nachricht ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.assistent__nachricht li + li { margin-top: 0.25rem; }
.assistent__nachricht ul:has(.assistent__artikel) { padding-left: 0; list-style: none; }
.assistent__artikel { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 0.6rem; padding: 0.35rem 0; border-bottom: 1px solid var(--wp--preset--color--linie); }
.assistent__artikel:last-child { border-bottom: 0; }
.assistent__status { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; font-size: 0.85rem; font-weight: 700; }
.assistent__status--da { color: var(--wp--preset--color--erfolg-dunkel); background: var(--wp--preset--color--erfolg-hell); }
.assistent__status--da::before { content: "✓"; }
.assistent__status--anfrage { color: var(--wp--preset--color--schrift-gedaempft); background: var(--wp--preset--color--hintergrund); }
.assistent__status--anfrage::before { content: "◷"; }
.assistent__nachricht a.assistent__tel { font-weight: 700; white-space: nowrap; color: var(--wp--preset--color--primaer); text-decoration: none; }
.assistent__nachricht--kunde a.assistent__tel { color: inherit; }
.assistent__nachricht a.assistent__tel:hover { text-decoration: underline; }