/* ===========================================================================
 * layout.css -- Seitengeruest.
 *
 * DIE FUSSZEILE BLEIBT UNTEN
 *
 * Flatsome baut die Seite so:
 *
 *   div#wrapper
 *     header#header
 *     main#main
 *     footer#footer.footer-wrapper
 *
 * Reicht der Inhalt nicht bis zum unteren Rand -- Konto-Unterseiten, eine
 * leere Suche, eine kurze Bestaetigungsseite --, endet die Fusszeile mitten
 * im Bild und darunter steht eine weisse Flaeche. Das sieht nach Fehler aus.
 *
 * WARUM NICHT calc(100vh - Kopfhoehe)
 *
 * Das waere der naheliegende Weg und der schlechtere: Die Kopfhoehe ist keine
 * feste Groesse. Sie unterscheidet sich zwischen Normal- und Sticky-Zustand,
 * zwischen Desktop und mobil, und die Admin-Leiste kommt bei angemeldeten
 * Benutzern obendrauf. Jede Aenderung im Customizer -- header_height steht
 * derzeit auf 120 -- muesste hier nachgezogen werden, und wenn das jemand
 * vergisst, ist der Fehler ein paar Pixel gross und faellt monatelang nicht
 * auf.
 *
 * Der Flexbox-Weg braucht die Kopfhoehe gar nicht: #wrapper ist mindestens
 * bildschirmhoch, #main nimmt allen uebrigen Platz. Was Kopf und Fuss
 * tatsaechlich brauchen, rechnet der Browser aus.
 * ======================================================================== */

#wrapper {
	display: flex;
	flex-direction: column;
	/* vh zuerst als Rueckfallebene, dvh gewinnt wo es unterstuetzt wird.
	   Auf Mobilgeraeten zaehlt 100vh die ein- und ausblendende Browserleiste
	   mit -- damit waere die Seite dort dauerhaft ein Stueck zu hoch und
	   liesse sich sinnlos scrollen. */
	min-height: 100vh;
	min-height: 100dvh;
}

/*
 * 1 0 auto statt nur flex-grow: Der mittlere Teil soll wachsen, aber NIEMALS
 * schrumpfen. Ohne die 0 beim Schrumpffaktor presst ein langer Inhalt sich
 * zusammen, sobald Kopf und Fuss zusammen hoeher werden als gedacht.
 */
#main {
	flex: 1 0 auto;
}

/*
 * ANGEMELDETE BENUTZER
 *
 * Die Admin-Leiste liegt ueber der Seite und schiebt das html-Element per
 * margin-top nach unten. Ohne Abzug waere die Seite genau um deren Hoehe zu
 * hoch -- sichtbar als schmaler Scrollbalken auf jeder Seite, die eigentlich
 * genau passt. Betrifft nur die Redaktion, faellt Besuchern nie auf, und
 * genau deshalb bleibt es sonst lange unbemerkt.
 *
 * 32px ab 783px Breite, darunter 46px -- so setzt es WordPress selbst.
 */
body.admin-bar #wrapper {
	min-height: calc(100vh - 32px);
	min-height: calc(100dvh - 32px);
}

@media screen and (max-width: 782px) {
	body.admin-bar #wrapper {
		min-height: calc(100vh - 46px);
		min-height: calc(100dvh - 46px);
	}
}

/* ===========================================================================
 * SEITENMOEBLIERUNG
 * ======================================================================== */

/*
 * Brotkrumenpfad.
 *
 * Flatsome gibt .breadcrumbs keine eigene Groesse -- der Pfad erbt damit die
 * volle Fliesstextgroesse und war groesser als die Navigation darueber. Das
 * stellt die Rangfolge auf den Kopf: Der Pfad sagt, wo man ist, die Navigation
 * sagt, wohin man kann. Das Zweite ist wichtiger.
 *
 * Seit dem 14.08.2026 also andersherum -- Navigation auf 1em (header.css),
 * Pfad auf .85em. Das ist derselbe Wert, den Flatsome auf der Produktseite
 * ohnehin schon verwendet (.product-info .breadcrumbs); der Pfad ist damit
 * ueberall gleich gross statt nur dort kleiner.
 */
body .breadcrumbs {
	font-size: .85em;
}

/* ---------------------------------------------------------------------------
 * FUSSZEILE
 *
 * Seit dem 14.08.2026 vier Spalten mit Ueberschrift statt einer langen Reihe
 * aus acht Rechtsseiten (Kunde, nach dem Vorbild eines anderen Shops -- "nicht
 * 1:1, aber in der Richtung").
 *
 * Die Verweise stehen jetzt im WIDGET-Bereich "Fusszeile 1"; die schmale
 * Leiste ganz unten traegt nur noch die Copyright-Zeile. Beides doppelt zu
 * fuehren waere Ballast: Impressum und Datenschutz sind ueber die Spalte
 * "Recht" von jeder Seite erreichbar, und mehr verlangt das Gesetz nicht.
 * ------------------------------------------------------------------------ */

/*
 * Die Ueberschriften der Spalten.
 *
 * Das Vorbild legt sie auf eine farbige Flaeche. Das waere hier zu laut: Der
 * Shop trennt Bereiche ueber Weissraum, nicht ueber Farbflaechen, und vier
 * gefuellte Balken im Fuss zoegen mehr Aufmerksamkeit auf sich als der Inhalt
 * darueber. Stattdessen Gewicht und Abstand.
 */
.footer-widgets .widget-title {
	display: block;
	margin-bottom: var(--shop-space-2);
	color: var(--shop-text);
	font-size: 1em;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

/*
 * Flatsome haengt unter jede Widget-Ueberschrift eine kurze Linie. Dieselbe
 * Erscheinung, die bei den Seitentiteln stoerte -- hier faellt sie sogar mehr
 * auf, weil vier davon nebeneinander stehen.
 */
.footer-widgets .widget-title + .is-divider,
.footer-widgets .is-divider {
	display: none;
}

/* Luft zwischen den Verweisen: Eine Fussliste wird ueberflogen, nicht
   gelesen -- gedraengte Zeilen kosten dabei mehr als Platz. */
.footer-widgets .widget_nav_menu li {
	margin-bottom: 10px;
}

.footer-widgets .widget_nav_menu li:last-child {
	margin-bottom: 0;
}

.footer-widgets .widget_nav_menu a {
	color: var(--shop-text-muted);
}

.footer-widgets .widget_nav_menu a:hover {
	color: var(--fs-color-primary, #325645);
}

/* ---------------------------------------------------------------------------
 * POPUPS UND AUFKLAPPBARES
 *
 * Der Shop rundet alles: Karten 12 px, Eingaben 8 px, Knoepfe vollrund. Die
 * Overlays von Flatsome fielen aus der Reihe -- sie haben ab Werk gar keinen
 * Radius (nachgesehen 14.08.2026: weder .nav-dropdown noch .mfp-content-inner
 * setzen einen).
 * ------------------------------------------------------------------------ */

/* Aufklappmenue der Hauptnavigation. */
.nav-dropdown {
	border-radius: var(--shop-radius-card);
	overflow: hidden;
}

/*
 * Der Innenkasten der Popups -- Bildergalerie, mobile Seitenleiste, alles was
 * ueber Magnific Popup laeuft. Der aeussere Behaelter bleibt unberuehrt: Er
 * fuellt das Fenster, ein Radius daran waere unsichtbar.
 */
.mfp-content-inner,
.mfp-content .lightbox-content {
	border-radius: var(--shop-radius-card);
	overflow: hidden;
}

/*
 * AKKORDEON auf "Haeufige Fragen".
 *
 * Das Auf- und Zufahren selbst kann CSS hier NICHT beeinflussen: Flatsome
 * oeffnet die Tafeln mit jQuery (slideDown/slideUp in flatsome.js, geprueft
 * am 14.08.2026), und die Hoehe wird waehrenddessen als Inline-Stil gesetzt.
 * Eine CSS-Transition darauf liefe ins Leere.
 *
 * Was sich glaetten laesst, ist der Zustand des Titels -- Rahmen, Hintergrund
 * und der Pfeil. Der Wechsel war mit .2s haerter als der Rest der Seite.
 */
.accordion-title {
	transition:
		border-color var(--shop-transition-sanft),
		background-color var(--shop-transition-sanft),
		color var(--shop-transition-sanft);
}

.accordion-title .toggle {
	transition: transform var(--shop-transition-sanft), opacity var(--shop-transition-sanft);
}

/* ---------------------------------------------------------------------------
 * LESBARKEIT VON FLIESSTEXT
 *
 * WAS DAS PROBLEM WAR
 *
 * Die Textspalten stehen seit dem 14.08.2026 auf voller Breite. Bei 1410 px
 * sind das rund 200 Zeichen je Zeile; als gut lesbar gelten 45 bis 75. Sichtbar
 * wurde es an schlechten Umbruechen: Ein neuer Satz begann mit zwei Woertern am
 * Zeilenende und brach sofort um, oder nach einem Komma hingen noch drei
 * Woerter auf der Zeile.
 *
 * WAS CSS DAFUER NICHT KENNT
 *
 * Es gibt keine Eigenschaft "beginne keinen neuen Satz in den letzten Prozenten
 * einer Zeile". Das liesse sich nur mit Skript erzwingen, das feste Leerzeichen
 * einfuegt -- und das braeche bei jeder Textaenderung. Die Ursache ist ohnehin
 * eine andere: Bei 70 Zeichen faellt so ein Rest kaum noch auf, bei 200 immer.
 *
 * DREI MASSNAHMEN
 * ------------------------------------------------------------------------ */

/*
 * 1. Zeilenlaenge begrenzen.
 *
 * Die SPALTE bleibt in voller Breite -- nur der laufende Text darin wird
 * schmaler. Ueberschriften, Bilder und Kaesten laufen weiter durch.
 *
 * ZUR EINHEIT: Hier stand zuerst 70ch, also eine Messung in Zeichenbreiten.
 * Der Vorteil waere, dass die Zeile beim Verstellen der Grundschriftgroesse
 * gleich viele ZEICHEN behaelt -- und darauf kommt es beim Lesen an. Der Kunde
 * hat am 14.08.2026 einen festen Wert von 1200 px gewaehlt, weil ihm die
 * Textspalte sonst zu schmal steht.
 *
 * Damit ist die Einheit px die ehrlichere: Wer eine Pixelzahl nennt, meint
 * Pixel. Der Preis ist bekannt und klein -- wird type_size je von 110 auf
 * 120 Prozent gestellt, passen weniger Zeichen in dieselbe Breite.
 *
 * 1200 px sind bei Source Sans 3 rund 135 Zeichen. Das liegt ueber den 45 bis
 * 75, die als gut lesbar gelten; es ist eine bewusste Entscheidung des Kunden
 * und keine Nachlaessigkeit.
 */
#main .col-inner > .text,
#main .col-inner > p,
#main .entry-content > p,
#main .entry-content > ul,
#main .entry-content > ol {
	max-width: 1200px;
}

/*
 * 2. Besser umbrechen.
 *
 * text-wrap: pretty laesst den Browser die letzten Zeilen eines Absatzes
 * gemeinsam betrachten, statt stur von oben nach unten zu fuellen. Damit
 * verschwinden einzelne Woerter auf der letzten Zeile.
 *
 * hyphens: auto braucht die Sprachangabe im html-Element -- die steht hier auf
 * "de", geprueft am 14.08.2026. Ohne sie passiert schlicht nichts. Im Deutschen
 * ist die Trennung wichtiger als in vielen anderen Sprachen: Woerter wie
 * "Widerrufsbelehrung" reissen sonst grosse Luecken in den Blocksatz.
 *
 * Beides ist eine Verbesserung, kein Fundament: Aeltere Browser ignorieren
 * text-wrap und zeigen den Text wie bisher. Nichts bricht.
 */
#main p,
#main li,
#main .text {
	text-wrap: pretty;
	hyphens: auto;
}

/*
 * 3. Ueberschriften ausbalancieren -- aber NICHT trennen.
 *
 * balance verteilt die Woerter gleichmaessig auf die Zeilen, statt die letzte
 * mit einem Wort enden zu lassen. Es wirkt nur bei wenigen Zeilen, was fuer
 * Ueberschriften genau passt.
 *
 * Silbentrennung wird hier ausdruecklich abgeschaltet: Eine getrennte
 * Ueberschrift sieht nach Fehler aus.
 */
#main h1,
#main h2,
#main h3,
#main .section-title-main {
	text-wrap: balance;
	hyphens: manual;
}

/*
 * Ueberschriften: eine Linie, nicht zwei.
 *
 * Der [title]-Kurzcode von Flatsome zieht im Stil "normal" ZWEI Linien:
 *
 *   .section-title-normal      { border-bottom: 2px solid #ececec }
 *   .section-title-normal span { border-bottom: 2px solid rgba(0,0,0,.1) }
 *
 * Die erste laeuft ueber die volle Breite, die zweite nur unter dem Wort --
 * und weil beide auf derselben Hoehe liegen, sieht es unter der Ueberschrift
 * doppelt gemoppelt aus. Die durchgezogene genuegt (Kunde, 14.08.2026).
 *
 * Der negative Aussenabstand muss mit weg: Er zog das span um genau die
 * 2 px nach unten, die seine eigene Linie brauchte. Die Innenpolsterung
 * bleibt -- sie haelt den Text von der Linie fern.
 */
.section-title.section-title-normal span {
	border-bottom: 0;
	margin-bottom: 0;
}

/*
 * Knopfschrift.
 *
 * Flatsome setzt auf .button GAR KEINE eigene Schriftgroesse -- die Knoepfe
 * erben damit die Fliesstextgroesse. Die steht hier auf 110 Prozent, also rund
 * 17,6 px, und Knopftexte laufen in Versalien. Das ist fuer eine Beschriftung
 * viel; im schmalen Warenkorb-Auszug ("Warenkorb anzeigen", "Kasse") fiel es
 * zuerst auf (Kunde, 14.08.2026).
 *
 * :where() UND DAMIT SPEZIFITAET NULL -- das ist hier der ganze Trick. Wer
 * einem Knopf ausdruecklich eine Groesse gibt, etwa size="large" auf den
 * Handlungsknoepfen der Seiten, setzt .is-large mit (0,1,0) und gewinnt damit
 * gegen diese Regel. Ohne :where() waere es umgekehrt: Unsere Datei laedt
 * spaeter, bei Gleichstand haetten wir gewonnen und die bewusst grossen
 * Knoepfe waeren mit geschrumpft.
 */
:where(.button, button.button, input[type="submit"], input[type="button"]) {
	font-size: .9em;
}

/*
 * Im Warenkorb-Auszug noch eine Spur kleiner: Der Streifen ist schmal, und
 * zwei Knoepfe stehen dort untereinander. Was auf einer Seite angemessen
 * wirkt, draengt sich in einer 360 px breiten Schublade.
 */
:where(.off-canvas-cart, .cart-popup, .cart-popup-inner, .widget_shopping_cart, .widget_shopping_cart_content) .button {
	font-size: .85em;
}

/*
 * Eingabefelder und Auswahllisten.
 *
 * Der Radius steht seit Beginn in den Tokens, wurde aber nur an einzelnen
 * Stellen benutzt. Hier greift er fuer alles -- Personalisierungsfelder auf der
 * Produktseite, Kontaktformular, Kasse.
 *
 * Bewusst mit Elementselektoren und damit sehr schwach: Das Suchfeld im Kopf
 * ist vollrund und behaelt seine eigene Regel (.header .searchform-wrapper
 * .search-field), weil die spezifischer ist. Eine staerkere Regel hier haette
 * die Pille wieder eckig gemacht.
 */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="date"],
select,
textarea {
	border-radius: var(--shop-radius-input);
}

/* ---------------------------------------------------------------------------
 * KONTAKTFORMULAR
 *
 * Das Markup erzeugt das Plugin (includes/kontaktformular.php); hier steht nur
 * das Aussehen. Angelehnt an die Kasse: Beschriftung ueber dem Feld, Felder
 * ueber die volle Breite, ein Knopf in der Primaerfarbe.
 *
 * Bewusst NICHT die schwebenden Beschriftungen der Block-Kasse nachgebaut. Die
 * kommen dort aus React und brauchen Skript; sie hier nachzuahmen hiesse, ein
 * Verhalten mit CSS zu faelschen, das bei jedem Sonderfall -- vorausgefuellte
 * Felder, Autovervollstaendigung -- auseinanderfaellt.
 * ------------------------------------------------------------------------ */

/*
 * Keine Maximalbreite mehr (Kunde, 14.08.2026): Die Seite soll die volle
 * Breite nutzen. Die Felder stehen dafuer in Zeilen nebeneinander, sonst
 * waeren einzeilige Eingaben ueber 1400 px albern breit.
 */

.ams-kontakt__reihe {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--shop-space-3);
}

/*
 * flex-basis in rem statt Prozent, und wrap erlaubt: Damit bricht die Zeile
 * von selbst um, sobald ein Feld unter etwa 14 rem fiele -- ohne dass hier
 * Haltepunkte gepflegt werden muessen. Drei Felder nebeneinander werden auf
 * dem Handy zu drei Zeilen, ohne eine einzige Media Query.
 */
.ams-kontakt__reihe .ams-kontakt__feld {
	flex: 1 1 14rem;
	min-width: 0;
}

/* Die Anrede braucht nie die Breite eines Namens. */
.ams-kontakt__reihe .ams-kontakt__feld--schmal {
	flex: 0 1 11rem;
}

.ams-kontakt__feld {
	margin-bottom: var(--shop-space-3);
}

.ams-kontakt__feld label {
	display: block;
	margin-bottom: 6px;
	color: var(--shop-text);
	font-weight: 700;
}

/*
 * DIE HOEHE MUSS ZURUECKGESETZT WERDEN, sonst hilft mehr Polsterung nichts.
 *
 * Flatsome setzt auf alle Eingaben:
 *
 *   height: 2.507em; padding: 0 .75em; box-sizing: border-box
 *
 * Feste Hoehe, keine senkrechte Polsterung. Legt man welche nach, wird sie bei
 * border-box von dieser Hoehe ABGEZOGEN -- beim Auswahlfeld blieb dadurch zu
 * wenig fuer den Text uebrig und die Anrede war angeschnitten (14.08.2026).
 *
 * Deshalb height:auto und stattdessen eine Mindesthoehe. 3 rem sind rund
 * 48 px und damit auch auf dem Handy eine bequem treffbare Flaeche.
 */
.ams-kontakt__feld input,
.ams-kontakt__feld select,
.ams-kontakt__feld textarea {
	width: 100%;
	height: auto;
	min-height: 3rem;
	margin: 0;
	padding: 14px var(--shop-space-2);
	border: 1px solid var(--shop-border);
	background: var(--shop-surface);
	color: var(--shop-text);
	box-shadow: none;
	transition: border-color var(--shop-transition);
}

.ams-kontakt__feld input:focus,
.ams-kontakt__feld select:focus,
.ams-kontakt__feld textarea:focus {
	border-color: var(--fs-color-primary, #325645);
}

.ams-kontakt__feld textarea {
	resize: vertical;
}

/* Das Sternchen ist Zier -- die Pflicht steht im required-Attribut und im
   Hinweis darunter. Deshalb aria-hidden im Markup und hier nur Farbe. */
.ams-kontakt__pflicht {
	color: var(--shop-text-muted);
	font-weight: 400;
}

/*
 * Der Honigtopf.
 *
 * NICHT display:none und NICHT visibility:hidden -- beides erkennen Skripte
 * zuverlaessig und lassen das Feld dann leer. Stattdessen aus dem Sichtfeld
 * geschoben: fuer Augen unsichtbar, im Dokument aber ein normales Feld.
 */
.ams-kontakt__topf {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ams-kontakt__aktion {
	margin-bottom: var(--shop-space-2);
}

.ams-kontakt__aktion .button {
	margin: 0;
	padding-left: var(--shop-space-6);
	padding-right: var(--shop-space-6);
}

.ams-kontakt__hinweis {
	margin: 0;
	color: var(--shop-text-muted);
	font-size: .85em;
	line-height: 1.6;
}

/* -- Meldung nach dem Absenden ------------------------------------------- */

.ams-kontakt__meldung {
	margin-bottom: var(--shop-space-3);
	padding: var(--shop-space-2) var(--shop-space-3);
	border-radius: var(--shop-radius-card);
	border-left: 4px solid;
}

/*
 * Erfolg in der Primaerfarbe, nicht in einem zweiten Gruen: Der Shop kennt
 * eine Aktionsfarbe, und eine bestandene Handlung ist kein eigener Anlass fuer
 * einen neuen Ton.
 */
.ams-kontakt__meldung--erfolg {
	border-color: var(--fs-color-primary, #325645);
	background: var(--shop-surface-alt);
	color: var(--shop-text);
}

.ams-kontakt__meldung--fehler {
	border-color: #b20000;
	background: var(--shop-surface-alt);
	color: var(--shop-text);
}

/*
 * Seitenleiste der Kategorieseite.
 *
 * Die Vorlage vergibt "col large-3" neben "col large-9" -- 25 und 75 Prozent.
 * Nachgemessen am 31.08.2026: Der laengste Rubrikname, "Glueck und
 * Glueckseligkeit", ist samt Zaehler rund 152 px breit (Arial bei 12,24 px --
 * Flatsome setzt html auf .85em, Unterpunkte auf .9em, und eine Schriftart
 * ist im Customizer nicht gewaehlt). Bei 16 Prozent von 1440 px Seitenbreite
 * bleiben nach Spaltenpolster und Einzug rund 180 px -- knapp 30 px Luft.
 *
 * WEITER HERUNTER NICHT OHNE NACHMESSEN: Bricht dieser Name um, steht die
 * Liste unruhig, und das faellt erst auf, wenn jemand die Kategorieseite
 * tatsaechlich ansieht.
 *
 * Die zweite Regel gehoert dazu: Ohne sie bliebe die Inhaltsspalte auf 75
 * Prozent stehen, und der gewonnene Platz waere ein Loch in der Zeile statt
 * Raum fuer die vierte Karte je Reihe.
 *
 * Der Haltepunkt 850 px ist der von Flatsome; darunter traegt die Spalte
 * ohnehin "hide-for-medium" und ist ausgeblendet.
 */
@media screen and (min-width: 850px) {
	.category-page-row > .col.large-3 {
		flex-basis: 16%;
		max-width: 16%;
	}

	.category-page-row > .col.large-9 {
		flex-basis: 84%;
		max-width: 84%;
	}
}

/*
 * Anzahl hinter den Rubriken.
 *
 * Eingeschaltet wird sie am Widget selbst (WooCommerce, "count"), nicht per
 * Code -- die Zahlen kommen damit aus dem Zaehlstand des Terms und sind
 * kumulativ: "Karten" zeigt die Summe aller Rubriken darunter.
 *
 * ZWEI FLATSOME-REGELN STEHEN DEM IM WEG:
 *
 *   .widget_product_categories > ul > li ul span.count { display: none }
 *
 * blendet die Zahl bei UNTERKATEGORIEN aus. Ohne Gegenregel haette allein
 * "Karten" eine Zahl und die elf Rubriken keine -- also genau das Gegenteil
 * des Gewuenschten, und ohne jeden Hinweis darauf, dass eine Themeregel das
 * verhindert.
 *
 *   .widget > ul > li .count { font-size: .7em; line-height: 3em; opacity: .8 }
 *
 * macht sie klein, blass und setzt sie ueber eine Zeilenhoehe von 3em schief
 * auf die Grundlinie.
 *
 * Die Selektoren unten sind deshalb bewusst dreiteilig: (0,3,4) gegen (0,2,4)
 * und (0,3,2) gegen (0,2,2). Bei Gleichstand entschiede allein die
 * Ladereihenfolge, und die soll hier nicht das tragende Argument sein.
 */

.widget.widget_product_categories > ul > li ul span.count {
	display: inline;
}

.widget.widget_product_categories > ul > li .count {
	color: var(--shop-text-muted);
	font-size: .8em;
	line-height: inherit;
	opacity: 1;
}

/* -- Brotkrumen auf den Kontoseiten -------------------------------------- */
/*
 * Das Markup kommt aus dem Plugin (ams_kurschat24_konto_brotkrumen), weil es
 * an einem WooCommerce-Haken haengt und einen Theme-Wechsel ueberleben muss.
 * Hier steht nur die Gestaltung.
 *
 * Das Trennzeichen ist ein Pseudoelement und steht damit nicht im Textbaum --
 * Screenreader lesen die Liste, nicht die Winkel.
 */
.ams-brotkrumen ol {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0;
	margin: 0 0 var(--shop-space-3);
	padding: 0;
	list-style: none;
	font-size: .875em;
	color: var(--shop-text-muted);
}

.ams-brotkrumen li + li::before {
	content: "\203A";
	/* Gleicher Abstand links UND rechts. Ueber die Flex-Luecke plus eine
	   einseitige Aussenkante war der Winkel es nicht -- er klebte am
	   folgenden Eintrag. Jetzt tragen beide Seiten dieselbe Aussenkante,
	   die Luecke ist 0. */
	margin: 0 .5em;
	color: var(--shop-border-hover);
}

.ams-brotkrumen a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: .18em;
	transition: color var(--shop-transition);
}

.ams-brotkrumen a:hover {
	color: var(--fs-color-primary, #325645);
}

.ams-brotkrumen [aria-current="page"] {
	color: var(--shop-text);
}

/* -- "Adresse bearbeiten" als Schaltflaeche ------------------------------- */
/*
 * Markup von WooCommerce (myaccount/my-address.php), keine Ueberschreibung:
 *
 *   header.woocommerce-Address-title.title
 *     h2          <- "Rechnungsadresse"
 *     a.edit      <- "Rechnungsadresse bearbeiten"
 *   address
 *
 * Der Link stand als nackter Text zwischen Ueberschrift und Anschrift und war
 * als Aktion nicht zu erkennen -- optisch nicht von der Adresse zu trennen.
 *
 * Gestaltet wie die uebrigen Schaltflaechen des Shops: Pille, Primaerfarbe,
 * 700er Schnitt (nur Regular und 700 sind geladen). Der Hoverton wird per
 * filter aus derselben Farbe abgeleitet und nicht als zweiter Hexwert
 * danebengelegt -- sonst bliebe er stehen, wenn jemand die Farbe im Customizer
 * aendert. (18.08.2026)
 */
.woocommerce-Address-title a.edit {
	--ams-symbol-stift: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");

	display: inline-flex;
	align-items: center;
	gap: .45em;
	margin: var(--shop-space-2) 0;
	padding: .55em 1.15em;
	border-radius: var(--shop-radius-pill);
	background-color: var(--fs-color-primary, #325645);
	color: #fff;
	font-size: .8125em;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
	transition: filter var(--shop-transition);
}

.woocommerce-Address-title a.edit:hover,
.woocommerce-Address-title a.edit:focus {
	color: #fff;
	filter: brightness(0.88);
}

/*
 * Der Stift als Maske, nicht als Hintergrundbild -- wie die Menuesymbole:
 * currentColor faerbt die Flaeche, das Symbol folgt der Schriftfarbe von
 * selbst. Als Pseudoelement steht es nicht im Textbaum, Screenreader lesen
 * allein die Beschriftung.
 */
.woocommerce-Address-title a.edit::before {
	content: "";
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: var(--ams-symbol-stift) center / contain no-repeat;
	mask: var(--ams-symbol-stift) center / contain no-repeat;
}

/*
 * DER EINZUG KAM VOM li, NICHT VOM ol
 *
 * Flatsome setzt:
 *
 *   .col-inner ol li, .col-inner ul li, .entry-content ol li, …
 *       { margin-left: 1.3em }
 *
 * Die Kontoseite steckt in div.col-inner. 1,3 em sind rund 20 px -- genau der
 * Versatz, um den der Pfad gegen den Inhalt stand.
 *
 * WARUM ".ams-brotkrumen li { margin: 0 }" NICHTS BEWIRKT HAT
 *
 * Spezifitaet (0,1,1) gegen Flatsomes (0,1,2). Die Ladereihenfolge entscheidet
 * erst bei Gleichstand; hier gewann Flatsome unabhaengig davon. Der Selektor
 * unten liegt mit (0,1,3) darueber -- ohne !important.
 *
 * GESUCHT HATTE ICH AN DER FALSCHEN STELLE: nach Regeln auf ol und ul, in 97
 * eingebundenen Stylesheets, ohne Treffer. Die Regel haengt am li. Wer das
 * naechste Mal einen unerklaerlichen Listeneinzug sucht, faengt beim Kind an.
 * (19.08.2026)
 */
nav.ams-brotkrumen ol li {
	margin: 0;
}

/* -- Kachelnavigation auf der Kontouebersicht ----------------------------- */
/*
 * Markup von Flatsome (ul.dashboard-links, gefuellt aus
 * wc_get_account_menu_items). Flatsome gestaltet sie selbst:
 *
 *   .dashboard-links{font-size:1.3em}
 *   .dashboard-links a{border:1px solid #ddd;border-radius:5px;padding:20px 0}
 *   .dashboard-links a:hover{background-color:#333;color:#fff}
 *   .dashboard-links li{width:33.333%}
 *
 * Das passt an drei Stellen nicht zum Shop: fester Grauton statt Token,
 * 5-px-Radius statt --shop-radius-card, und ein fast schwarzer Hoverblock,
 * den es sonst nirgends gibt. Ausserdem 1.3em -- fuer eine Kachelbeschriftung
 * zu gross.
 *
 * .dashboard-links .active{display:none} bleibt unangetastet: Flatsome
 * versteckt den Punkt, auf dem man schon steht. Das ist richtig, deshalb sind
 * es auf der Uebersicht vier Kacheln und nicht fuenf.
 */
.dashboard-links {
	gap: var(--shop-space-2);
	margin: var(--shop-space-3) 0 0;
	padding: 0;
	font-size: 1em;
}

/* ul. davor: dieselbe Flatsome-Regel .col-inner ul li{margin-left:1.3em}
   trifft auch diese Kacheln -- (0,1,2) gegen (0,1,2), unser Stylesheet
   laedt spaeter und gewinnt damit. Ohne das Zuruecksetzen stuende links
   jeder Kachel ein zusaetzlicher Einzug neben dem gap. */
ul.dashboard-links li {
	margin: 0;
	/* Statt starrer 33,333 Prozent: waechst und schrumpft, bricht ab etwa
	   12 rem um. Bei vier Kacheln sonst 3 + 1 mit halber Zeile. */
	width: auto;
	flex: 1 1 12rem;
}

.dashboard-links a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .6em;
	height: 100%;
	margin-right: 0;
	padding: var(--shop-space-3) var(--shop-space-2);
	border: 1px solid var(--shop-border);
	border-radius: var(--shop-radius-card);
	color: var(--shop-text);
	font-weight: 700;
	transition: border-color var(--shop-transition), color var(--shop-transition), box-shadow var(--shop-transition);
}

.dashboard-links a:hover,
.dashboard-links a:focus-visible {
	/* Flatsome faerbt hier auf #333 mit weisser Schrift. Der Shop hebt
	   Kacheln sonst ueber Rahmen und Schatten hervor -- siehe Produktkachel. */
	background-color: transparent;
	border-color: var(--shop-border-hover);
	color: var(--fs-color-primary, #325645);
	box-shadow: var(--shop-shadow-hover);
}

/*
 * Symbole als Maske, wie im Kopfmenue: currentColor faerbt die Flaeche, das
 * Symbol folgt damit der Schriftfarbe und wechselt beim Hover von selbst mit.
 * Die Variable haengt am li, gesetzt wird sie ueber die Endpunkt-Klasse, die
 * WooCommerce ohnehin vergibt.
 */
.dashboard-links a::before {
	content: "";
	flex: 0 0 auto;
	width: 1.75em;
	height: 1.75em;
	background-color: currentColor;
	-webkit-mask: var(--ams-konto-symbol) center / contain no-repeat;
	mask: var(--ams-konto-symbol) center / contain no-repeat;
}

/* Vier Felder -- die Uebersicht. */
.woocommerce-MyAccount-navigation-link--dashboard {
	--ams-konto-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E");
}

/* Ein Paket -- die Bestellungen. Bewusst nicht wieder eine Liste, die traegt
   im Kopfmenue schon "So bestellen Sie". */
.woocommerce-MyAccount-navigation-link--orders {
	--ams-konto-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8v8a2 2 0 0 1-1 1.73l-7 4a2 2 0 0 1-2 0l-7-4A2 2 0 0 1 3 16V8a2 2 0 0 1 1-1.73l7-4a2 2 0 0 1 2 0l7 4A2 2 0 0 1 21 8z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5M12 22V12'/%3E%3C/svg%3E");
}

/* Pfeil in eine Ablage -- Downloads. */
.woocommerce-MyAccount-navigation-link--downloads {
	--ams-konto-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E");
}

/* Kartennadel -- die Adressen. */
.woocommerce-MyAccount-navigation-link--edit-address {
	--ams-konto-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

/* Person -- die Kontodetails. */
.woocommerce-MyAccount-navigation-link--edit-account {
	--ams-konto-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

/* Tuer mit Pfeil -- Abmelden. Steht derzeit nicht im Menue, kostet aber
   nichts und faengt den Fall ab, dass der Punkt wieder auftaucht. */
.woocommerce-MyAccount-navigation-link--customer-logout {
	--ams-konto-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='m16 17 5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E");
}

/* ===========================================================================
 * PORTRAET AUF "UEBER UNS"  (21.08.2026)
 *
 * Die Breite kommt aus dem Shortcode (ux_image width="50"), nicht von hier --
 * Flatsome setzt sie als Inline-Stil, und dagegen anzuschreiben hiesse,
 * !important zu brauchen. Hier steht nur, was der Shortcode nicht kann.
 *
 * ZENTRIERT, WEIL DIE SPALTE BREITER IST ALS DAS BILD. Bei 50 % bliebe links
 * das Bild und rechts eine ebenso grosse Luecke stehen; das saehe nach einem
 * Fehler aus statt nach Absicht.
 *
 * Der Radius ist derselbe wie beim Aufmacher-Video (--shop-radius-image).
 * Ein zweiter Wert fuer dieselbe Sache waere genau die "zweite Wahrheit",
 * die tokens.css vermeiden soll.
 * ======================================================================== */

.portraet-betreiber {
	margin-inline: auto;
}

.portraet-betreiber img {
	display: block;
	border-radius: var(--shop-radius-image);
}

/* ---------------------------------------------------------------------------
 * AUFTEILUNG 40/60 IM KOPF VON "UEBER UNS"  (21.08.2026, Betreiber)
 *
 * WARUM DAS UEBERHAUPT CSS BRAUCHT: Flatsomes Raster rechnet in ZWOELFTELN.
 * 40 % waeren 4,8 Spalten -- die gibt es nicht. Am naechsten liegt span 5/7,
 * also 41,67 / 58,33. Das steht im Markup, damit dort die Absicht ablesbar
 * bleibt und Tablet und Telefon ohne Zusatzregel richtig umbrechen.
 *
 * Diese Regel schneidet die letzten 1,7 Punkte nach, und nur dort, wo das
 * Raster ueberhaupt zweispaltig ist -- dieselbe Media-Query wie Flatsomes
 * .large-*, naemlich min-width 850px. Darunter liegen die Spalten
 * untereinander (span__sm="12"), eine Aufteilung gibt es dann gar nicht.
 *
 * Kein !important noetig: (0,3,1) gegen Flatsomes (0,1,0).
 * ------------------------------------------------------------------------ */

@media screen and (min-width: 850px) {
	.ueber-uns-kopf > .col.large-5 {
		flex-basis: 40%;
		max-width: 40%;
	}

	.ueber-uns-kopf > .col.large-7 {
		flex-basis: 60%;
		max-width: 60%;
	}
}