/*
 * Symbolgruppe im Kopfbereich — der Behaelter um Konto- und Warenkorbsymbol
 * (Baustein core/group mit der Klasse .hh-kopf-symbole in parts/header.html).
 *
 * WARUM DIE GRUPPE UEBERHAUPT IN DER KOPFDATEI STEHT
 * WooCommerce haengt beide Symbole ueber Block Hooks HINTER die Navigation.
 * Als zwei einzelne Kinder der `space-between`-Reihe wurden sie mit
 * auseinandergezogen: gemessen bei 1920 Luecken von 99 / 98 / 99 px, waehrend
 * der Entwurf sie als EINE Gruppe ganz rechts mit 13 px Abstand fuehrt.
 * Deshalb sind die zwei Bausteine jetzt in parts/header.html ausgeschrieben.
 * Ein zweites Einhaengen verhindert WooCommerce selbst: `has_block_in_content()`
 * in src/Blocks/Utils/BlockHooksTrait.php sucht die Zeichenfolge
 * "wp:woocommerce/mini-cart" bzw. "wp:woocommerce/customer-account" im Inhalt
 * des Template-Parts und ueberspringt die Platzierung dann (beide Platzierungen
 * tragen `area => header`, nur dort greift diese Pruefung). Im Kern gaebe es
 * dafuer zusaetzlich `metadata.ignoredHookedBlocks` am Ankerblock — das ist
 * hier bewusst NICHT gesetzt, siehe Abnahmeblatt.
 *
 * WARUM DIE ZWEI REGELN NICHT IN theme.json STEHEN KOENNEN
 *
 * 1) `gap: 13px`. Ein blockGap kann KEIN custom-Token tragen. Zwei Gruende,
 *    beide im Kern nachgesehen (wp-includes/block-supports/layout.php):
 *      - `wp_sanitize_block_gap_value()` verwirft jeden Wert, der eines der
 *        Zeichen \ ( & = } oder /* enthaelt. Die rohe Form
 *        `var(--wp--custom--...)` faellt damit heraus.
 *      - Umgesetzt wird ausschliesslich das Praefix `var:preset|spacing|`;
 *        ein `var:custom|...` bliebe woertlich stehen und waere ungueltiges
 *        CSS, das der Browser LAUTLOS verwirft.
 *    Die Abstandsstufen des Themes kennen kein 13px (spacing|30 = 9px,
 *    spacing|40 = 14px), also fuehrt kein Weg an dieser Datei vorbei.
 *
 * 2) `flex: none`. Der Entwurf setzt es an der Symbolgruppe, damit sie nie
 *    schrumpft. Das Blocksystem kennt dafuer nur `layout.selfStretch` mit den
 *    Werten fit / fill / fixed / fixedNoShrink — und `flex-shrink: 0` gibt es
 *    dort ausschliesslich zusammen mit einer FESTEN `flex-basis`
 *    (`flexSize`), die hier falsch waere: die Gruppe soll sich nach ihrem
 *    Inhalt richten. Nachgesehen in wp-includes/block-supports/layout.php.
 *
 * SELEKTOR MIT ZWEI KLASSEN, nicht mit einer: Der Layout-Support des Kerns
 * erzeugt fuer die Gruppe eine eigene Regel `.wp-container-...{gap:...}` mit
 * derselben Spezifitaet, die eine einklassige Regel je nach Ladereihenfolge
 * schlagen koennte. `.wp-block-group.hh-kopf-symbole` liegt darueber und
 * gewinnt unabhaengig von der Reihenfolge — dasselbe Muster wie in logo.css.
 *
 * Ausschliesslich Token, keine Hexfarbe, keine absolute Laenge (P2).
 */


/*
 * WARUM gap: 0 UND NICHT DIE 13px DES ENTWURFS
 * Der Entwurf setzt die drei Symbole als NACKTE SVGs nebeneinander
 * (18/18/20px, kein Innenpolster) und traegt die 13px als Luecke des
 * Behaelters. Die zwei WooCommerce-Bausteine bringen aber je ein eigenes
 * Polster mit (gemessen 7,5px ringsum am a.wc-block-customer-account__link
 * bzw. am button.wc-block-mini-cart__button) - eine Luecke von 13px kaeme
 * darauf OBEN DRAUF. Gemessen waren die sichtbaren Abstaende deshalb
 * 20,5px (Lupe-Konto) und 28px (Konto-Warenkorb) statt 13/13.
 *
 * Statt den Bausteinen das Polster zu nehmen (dann waere das Tippziel nur
 * 18x18px gross und laege unter den 24x24px aus WCAG 2.2, 2.5.8), traegt
 * jedes der drei Symbole jetzt das GLEICHE seitliche Polster von einer
 * halben Symbolluecke - und die Luecke der Gruppe ist 0. Sichtbar ergibt
 * das exakt die 13px des Entwurfs (6,5 + 6,5), das Tippziel wird 31px
 * breit. Entschieden von Moritz am 24.08.2026.
 *
 * Die Polster stehen in den Stilblaettern der jeweiligen Bausteine, nicht
 * hier: kopf-suche.css, kopf-symbol-konto.css, kopf-symbol-warenkorb.css.
 * Sie alle rechnen aus DEMSELBEN Token, damit es eine einzige Stelle mit
 * dem Entwurfswert 13px gibt.
 */
.wp-block-group.hh-kopf-symbole {
	gap: 0;
	flex: none;
}
