/*
 * Suchsymbol im Kopfbereich — Baustein core/search mit der Klasse
 * .hh-kopf-suche in parts/header.html.
 *
 * WARUM core/search UND NICHT EIN EIGENES SVG
 * Der Entwurf zeigt im Kopf drei Symbole: Lupe, Konto, Warenkorb. Fuer die
 * Lupe gibt es — anders als bei den zwei anderen — keinen WooCommerce-
 * Baustein. Ein reines Bild waere zwar schneller gebaut, aber tot: es koennte
 * nichts suchen. core/search mit buttonPosition "button-only" rendert genau
 * die Lupe und klappt bei Klick das Suchfeld aus (Interactivity-API des
 * Kerns, wp-includes/blocks/search.php).
 *
 * WAS HIER STEHT UND WARUM ES NOETIG IST
 * Der Suchknopf traegt die Klasse `wp-element-button` — der Kern haengt sie
 * fest an (search.php: wp_theme_get_element_class_name('button')). Damit
 * greifen die globalen Knopfstile aus theme.json. GEMESSEN am gebauten Kopf,
 * bevor diese Datei existierte:
 *     Groesse   60 x 43,5 px       (statt eines 18px-Symbols)
 *     Grund     rgb(128,0,139)     = primary
 *     Farbe     rgb(251,251,164)   = base
 *     Polster   9px 18px
 *     Radius    30px
 * Das ist eine vollstaendige Knopf-Pille. Sie faellt im Kopf nur deshalb
 * nicht auf, weil ihr Grund dieselbe Farbe hat wie der Kopf selbst — auf
 * jedem anderen Grund waere sie sofort sichtbar. Ein Blockattribut hilft
 * nicht: color und border tragen in der block.json des Suchbausteins
 * __experimentalSkipSerialization, ein am Block gesetzter Wert wird also gar
 * nicht erst ins Markup geschrieben.
 *
 * KEIN eigener :hover-Block noetig: die globale Hover-Regel des Kerns ist
 * `:root :where(.wp-element-button:hover, …)` und damit einklassig; die Regel
 * unten ist dreiklassig und gewinnt in JEDEM Zustand. Nachgemessen, nicht
 * angenommen.
 *
 * min-width UND min-height MUESSEN mitgesetzt werden. Der Kern klemmt das
 * Symbol ueber `min-width: 24px; min-height: 24px` fest; eine blosse
 * `width`-Angabe wird davon abgefangen und bleibt wirkungslos. Gemessen:
 * mit nur width/height blieb das gerenderte Symbol bei 24x24 statt 18x18,
 * obwohl die Regel nachweislich geladen war. Dieselbe Fehlerklasse wie bei
 * der Mengenblase des Mini-Warenkorbs (dort min-width + padding).
 *
 * ⚠️ Wie schon beim Warenkorb: Der Entwurf zeichnet die Lupe als
 * STRICHZEICHNUNG (fill:none, stroke, stroke-width 1.7). Das Symbol des Kerns
 * ist eine FLAECHE (ein einzelner path, fill). Angeglichen ist die GROESSE
 * und die FARBE, nicht die Zeichenart — dafuer muesste man das SVG des Kerns
 * ersetzen, und das ist eine andere Entscheidung.
 *
 *
 * ⚠️ align-items: center IST PFLICHT, sonst haengt die Lupe zu hoch.
 * Gemessene Ursachenkette (23.08./24.08.2026, im laufenden Kopf):
 *   1. Das versteckte Suchfeld behaelt seine Hoehe (padding 8px 0 +
 *      line-height) und ist damit 36,7px hoch, obwohl es 0px BREIT ist.
 *   2. .wp-block-search__inside-wrapper ist display:flex mit align-items
 *      normal (= stretch); der Knopf hat keine eigene Hoehe und wird
 *      deshalb auf dieselben 36,7px gestreckt.
 *   3. Der Knopf ist selbst display:flex, ebenfalls align-items normal.
 *      Das SVG hat eine FESTE Hoehe (18px + min-height 18px), kann also
 *      nicht mitstrecken -- und ein Flex-Kind mit fester Quergroesse
 *      landet am Anfang der Querachse, also OBEN.
 * Gemessen: Symbolmitte y=28,7 statt y=38, die Lupe sass 9,3px ueber
 * Konto und Warenkorb. Mit align-items:center steht sie auf y=38, exakt
 * auf der Mitte der beiden anderen. Rot-vor-Gruen im laufenden Bild
 * belegt: Regel setzen -> 38, Regel entfernen -> 28,7.
 * Die Regel greift in BEIDEN Zustaenden (Feld zu wie offen) und haengt
 * nicht davon ab, wie hoch das versteckte Feld gerade ist.
 * Ausschliesslich Token, keine Hexfarbe, keine absolute Laenge (P2).
 */

.wp-block-search.hh-kopf-suche .wp-block-search__button {
	align-items: center;
	min-width: 0;
	/* Seitliches Polster = halbe Symbolluecke, siehe kopf-symbolgruppe.css. */
	padding: 0 calc(var(--wp--custom--abstand--symbolgruppe) / 2);
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--wp--preset--color--accent-4);
}

.wp-block-search.hh-kopf-suche .search-icon {
	width: var(--wp--custom--abmessung--symbol-suche);
	min-width: var(--wp--custom--abmessung--symbol-suche);
	height: var(--wp--custom--abmessung--symbol-suche);
	min-height: var(--wp--custom--abmessung--symbol-suche);
	fill: currentColor;
}

/*
 * Das ausgeklappte Suchfeld.
 *
 * ENTSCHEIDUNG, nicht Entwurf: Der Entwurf zeigt im Kopf nur die Lupe, das
 * ausgeklappte Feld kommt darin gar nicht vor. Ohne diese Regeln uebernimmt
 * der Browser seinen Standard - gemessen: weisser Grund, SCHWARZER Text,
 * 1px grauer Rahmen, eckige Ecken. Das gehoert sichtbar nicht zu dieser
 * Seite. Uebernommen sind deshalb ausschliesslich Werte, die im Theme
 * ohnehin schon entschieden sind: der Seitengrund, die Fliesstextfarbe, die
 * Fliesstextschrift, die kleinste Schriftstufe und der Eingabe-Radius, den
 * theme.json seit Etappe A fuehrt (custom.radius.eingabe) und der bis hierher
 * nirgends benutzt wurde.
 *
 * Keine eigene Farbe erfunden - faellt in der Abnahme etwas anders aus, ist
 * es eine Entscheidung ueber Token, nicht ueber diese Datei.
 */

.wp-block-search.hh-kopf-suche .wp-block-search__input {
	border: var(--wp--custom--rand--breite) solid var(--wp--preset--color--accent-4);
	border-radius: var(--wp--custom--radius--eingabe);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
}