/* Suchleiste am Seitenanfang - EIGENES, in sich vollstaendiges Stylesheet. Warum nicht in home-v2.css: die zehn statischen Wissensseiten laden weder global.css noch home-v2.css - beide Welten laden DIESE Datei, damit die Suche ueberall identisch aussieht. Farben stehen deshalb als Werte hier, nicht als var()-Referenzen auf Variablen, die nur eine Welt definiert. */ /* Das Feld sitzt IN der Kopfzeile, als Flex-Element neben Navigation und Sprachumschalter (Hermann 10.08.2026: "im header ist perfekt wenn moeglich"). Vorher war es eine Leiste ueber die volle Breite unter dem Header. Kompakt, damit es die Kopfzeile nicht dominiert - der Anlass (Mundpropaganda) steht im Kommentar, nicht auf der Seite. */ .vi-search { position: relative; flex: 0 0 auto; min-width: 0; } /* Ruhezustand ist eine Lupe, 44x44. Gemessen 10.08.2026, warum kein dauerhaft offenes Feld: in der vollen Kopfzeile blieben bei 1440 px nur 105 px uebrig, bei 1280 px sogar 62 px - unbrauchbar. Am Handy wuchs die Kopfzeile von 71 auf 125 px, weil das Feld in eine zweite Zeile umbrach; bei klebendem Header kostet das dauerhaft ein Sechstel der Schirmhoehe. Deshalb: geschlossen nimmt die Suche nur die Lupe ein, geoeffnet legt sie sich ueber die Kopfzeile, statt sie auseinanderzuschieben. */ .vi-search form { width: 46px; transition: width .18s ease; } .vi-search input[type="search"] { width: 0; padding-left: 0; padding-right: 0; opacity: 0; transition: width .18s ease, opacity .12s ease; } .vi-search:focus-within form, .vi-search.vi-search-offen form { padding: 2px 4px 2px 14px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: min(320px, calc(100vw - 120px)); z-index: 2; /* DECKEND, nicht durchscheinend: geoeffnet legt sich das Feld ueber die Navigation. Mit der 10-Prozent-Transparenz des Ruhezustands las man "Produkte", "Kataloge" und "Leistungen" durch die eigene Eingabe hindurch - am gerenderten Bild gesehen, 10.08.2026. */ background: #22252a; border-color: rgba(0, 167, 142, .85); } .vi-search:focus-within input[type="search"], .vi-search.vi-search-offen input[type="search"] { width: auto; flex: 1; padding-left: 2px; padding-right: 2px; opacity: 1; } /* .sr-only wird hier BEWUSST nicht definiert: die Partnersession hat nachgemessen, dass alle zehn Wissensseiten-Stylesheets die Regel bereits tragen (zwoelf Verwendungen im Markup). Eine zweite Definition stuende dort doppelt. */ /* Dunkle Kopfzeile: das Feld ist eine helle Aussparung darin, kein weisser Block. Werte statt var(), weil dieses Stylesheet auch in der statischen Welt ohne die Variablen der Astro-Welt tragen muss. */ /* Hermann 12.08.2026 am Z Fold7: "der Suchkreis und Lupe sind nicht ganz mittig". Zwei Ursachen, beide gemessen: 1. Der Kasten war 44 breit und 46 hoch - also eine Ellipse, kein Kreis. Die Breite 44 ist border-box, die Hoehe wuchs frei: 44er Knopf plus zweimal 1 px Rahmen. Jetzt 46 breit, damit beide Seiten 46 sind. 2. Die Mittigkeit im Kopf steht weiter unten. */ .vi-search form { display: flex; align-items: center; gap: 4px; background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; /* Eingeklappt OHNE Innenabstand. Mit `padding: 2px 4px 2px 14px` blieben von den 44 px Kastenbreite nur 26 px Inhaltsflaeche, der 44-px-Knopf ragte rechts heraus, und die Lupe stand 23 px rechts der Kastenmitte - genau der Versatz, den Hermann am 11.08.2026 gesehen hat. Gemessen: Kasten 997-1041, Knopf 1020-1064. Der Abstand wird erst gebraucht, wenn das Feld offen ist und Text darin steht. */ padding: 0; } /* Die Beschriftung ist IMMER optisch verborgen, aber fuer Hilfsmittel da. Kimi hatte am Barrierefreiheitsbaum nachgemessen, dass display:none dem Feld den zugaenglichen Namen komplett nahm. Ausgeschrieben statt .sr-only, damit das Stylesheet in beiden Welten ohne Fremdabhaengigkeit traegt. */ .vi-search label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .vi-search input[type="search"] { flex: 1; min-width: 0; border: 0; background: transparent; padding: 9px 2px; font: inherit; font-size: .84rem; outline: 0; color: #fff; } .vi-search input[type="search"]::placeholder { color: rgba(255, 255, 255, .55); } .vi-search input[type="search"]:focus-visible { outline: 0; } /* DECKEND, nicht durchscheinend: geoeffnet legt sich das Feld ueber die Navigation. Mit einer halbtransparenten Flaeche las man "Produkte", "Kataloge" und "Leistungen" durch die eigene Eingabe hindurch - am gerenderten Bild gesehen und mit getComputedStyle nachgewiesen (10.08.2026). Diese Regel steht bewusst NACH der Aufklapp-Regel: beide haben dieselbe Spezifitaet, die spaetere gewinnt. */ .vi-search form:focus-within { /* Geoeffnet braucht der Text links Luft, eingeklappt nicht. */ padding: 2px 4px 2px 14px; background: #22252a; border-color: rgba(0, 167, 142, .85); box-shadow: 0 0 0 3px rgba(0, 167, 142, .22); } /* Lupe statt Wortknopf, 44x44 als Tippziel (Kimis 44-px-Regel). */ .vi-search button[type="submit"] { flex-shrink: 0; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 999px; cursor: pointer; background: transparent; color: rgba(255, 255, 255, .78); padding: 0; } .vi-search button[type="submit"]:hover { color: #fff; } .vi-search button[type="submit"]:focus-visible { outline: 3px solid rgba(0, 167, 142, .55); outline-offset: 2px; } /* z-index 55 und nicht 70 (Fable 5, 10.08.2026, im Browser mit elementFromPoint nachgewiesen): der klebende Header traegt z-index 60 (global.css), .vi-search selbst hat position:relative OHNE z-index und bildet damit keinen eigenen Stapelkontext - die Liste konkurrierte also direkt mit dem Header und gewann. Wer mit offener Liste scrollte, sah die Trefferliste ueber dem Kopf liegen. 55 bleibt ueber allem normalen Inhalt und unter dem Header. */ .vi-search-ergebnisse { position: absolute; z-index: 55; left: auto; right: 0; top: calc(100% + 10px); width: min(420px, calc(100vw - 32px)); margin: 0; padding: 8px; list-style: none; background: #fff; border: 1px solid rgba(23, 25, 27, .14); border-radius: 16px; box-shadow: 0 24px 60px rgba(20, 24, 23, .16); max-height: min(430px, 60vh); overflow-y: auto; } .vi-search-gruppe { padding: 10px 12px 4px; color: #6a6f75; font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .vi-search-treffer a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; color: #17191b; text-decoration: none; } .vi-search-treffer a:hover, .vi-search-treffer a:focus-visible { background: #ece7de; outline: 0; } .vi-search-treffer strong { font-size: .95rem; } .vi-search-treffer span { color: #5a6067; font-size: .78rem; } .vi-search-meinten em { font-style: normal; color: #007a68; font-size: .85rem; } /* Unter 1080 px ist die Navigation ausgeblendet - mit ihr faellt deren `margin-left:auto` weg, und die Lupe rutschte direkt neben das Logo. Gemessen bei 390 px: das geoeffnete Feld begann bei -156 px, ragte also aus dem Bild und deckte die Marke zu. Die Lupe gehoert nach rechts, neben den Menueknopf. */ @media (max-width: 1100px) { .vi-search { margin-left: auto; } /* Hermann 12.08.2026 am Z Fold7: "der Suchkreis und Lupe sind nicht ganz mittig". Gemessen bei 390, 904 und 1080 px: der Kreis stand 21 bis 22 px rechts der Kopfmitte. Ursache: unterhalb der Navigationsschwelle steht im Kopf links die Marke (88 px) und rechts der Menueknopf (44 px). `margin-left:auto` schiebt den Kreis in die Mitte ZWISCHEN beiden - und die liegt bei ungleichen Nachbarbreiten nicht in der Mitte des Kopfes. Deshalb wird er hier absolut auf die Kopfmitte gesetzt, unabhaengig von den Nachbarn. Nur im geschlossenen Zustand: offen waechst das Feld auf bis zu 796 px und wuerde von der Mitte aus in den Menueknopf laufen. Sobald der Fokus im Feld ist, geht es in den Fluss zurueck und oeffnet wie bisher nach links. */ @media (max-width: 1100px) { .vi-header-inner { position: relative; } .vi-search { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; } .vi-search:focus-within { position: static; transform: none; margin-left: auto; } } /* Unter 1080 px spannt sich das geoeffnete Feld ueber die Kopfzeile statt an der 44-px-Lupe zu haengen. Gemessen bei 390 px: rechtsbuendig an der Lupe begann es bei -31 px und deckte die Marke zu. Die Reserve rechts ist NICHT fest. Der rechte Rand der Kopfzeile ist clamp(16px, 4vw, 64px) - die halbe Randformel von .vi-header-inner - und waechst mit dem Fenster; eine feste Zahl stimmt dann genau bei einer Breite. Sol hat das am 11.08.2026 aus dem CSS hergeleitet, noch bevor jemand gemessen hatte: Ueberdeckung = 0,04 x Breite - 20 px. Nachgemessen an /de/produkte/ mit geoeffneter Suche, chromium, wie viele von 15 Punkten der 44x44-Flaeche den Knopf treffen: 700 px -4 px 15/15 (Rand ist hier 16 px, alte Regel passte) 761 px 10 px 12/15 1000 px 20 px 9/15 1080 px 23 px 7/15, Mittelpunkt verdeckt, KLICK SCHLAEGT FEHL Die Mitte blieb also bis 1051 px frei - wer nur sie prueft, sieht drei Viertel des Schadens nicht. Deshalb Rand + 44 px Knopf + 12 px Luft. */ .vi-search:focus-within form, .vi-search.vi-search-offen form { position: fixed; left: 16px; width: auto; top: 12px; transform: none; right: calc(clamp(16px, 4vw, 64px) + 56px); } } @media (max-width: 800px) { /* Gemessen 10.08.2026 bei 390 px: rechtsbuendig an einem 44 px schmalen Element haengend ragte die Trefferliste 24 px links aus dem Bild, der erste Treffer war am Klickpunkt nicht erreichbar (elementFromPoint gab null). Auf schmalen Schirmen haengt sie deshalb am Bildschirm, nicht am Feld. Der Header ist dort 71 px hoch und klebt, 79 px setzen die Liste mit 8 px Luft darunter. Schwelle am selben Abend von 720 auf 800 px angehoben. 720 war an die Astro-Kopfzeile angepasst, in der der Sprachumschalter unter 1080 px ausblendet. Die zehn statischen Wissensseiten tragen stattdessen .vi-lang, das sichtbar bleibt und die Lupe rund 100 px weiter nach links schiebt. Gemessen an /de/wissen/metallbearbeitung/ lag die Trefferliste dadurch bei 740 px auf -99 und bei 760 px auf -89, also links ausserhalb des Bildes; bei 780 px war sie wieder drin. Das Band ist schmal, aber es ist genau die Breite kleiner Tablets im Hochformat. Die Verankerung am Bildschirm ist derselbe Mechanismus, der unter 720 px bereits belegt ist, und sie kann die 110 Astro-Seiten nicht verschlechtern: dort lag die Liste in diesem Band bei 4 bis 34 px, also ohnehin schon am linken Rand. */ .vi-search-ergebnisse { position: fixed; left: 16px; right: 16px; top: 79px; width: auto; max-height: min(60vh, calc(100vh - 95px)); } /* Kimi B2: unter 16px zoomt iOS Safari die Seite beim Antippen des Feldes und der Besucher landet in einer verschobenen Ansicht. .95rem sind 15,2px, gemessen. Auf dem Schirm, auf dem es zaehlt, also volle 16px. */ .vi-search input[type="search"] { font-size: 1rem; } /* Nur im geoeffneten Zustand: eingeklappt schob dieser Abstand den 44-px-Knopf aus dem 44-px-Kasten und die Lupe 23 px nach rechts. */ .vi-search:focus-within form, .vi-search.vi-search-offen form { padding-left: 14px; } } /* Stoerungshinweis: gleiche Anmutung wie der Nullzustand, aber als Aussage ueber die Suche, nicht ueber das Ergebnis. Gemessen 11.08.2026 bei Index 500 und bei Soft-200 mit HTML - beide Male sichtbar, im Bild und vom Screenreader angesagt. */ .vi-search-hinweis { padding: 12px 14px; color: #5a6067; font-size: .86rem; line-height: 1.4; /* NICHT #c9cdc9. Der Hinweis landet im WEISSEN Trefferkasten, nicht auf der dunklen Kopfzeile - dort mass die Parallelsitzung 1,61:1, WCAG AA verlangt 4,5:1. #5a6067 kommt auf 6,36:1 und ist die Farbe, die im selben Kasten schon fuer die Zweitzeile der Treffer steht. Rot waere lauter, als die Sache ist. */ } .vi-search-hinweis a { color: #007a68; text-decoration: underline; } .vi-search-hinweis a:focus-visible { outline: 3px solid rgba(0,167,142,.55); outline-offset: 2px; } /* ---------- Eingeklappt ist die Lupe der ganze Kasten ---------- Hermann, 11.08.2026: "die Lupe muss noch etwas nach links um mittig im runden Kasten zu sein". Gemessen war der Versatz +23 px, aus drei Quellen zugleich: 14 px Innenabstand links, 4 px Luecke zwischen Feld und Knopf, und ein Eingabefeld, das trotz Breite 0 noch 4 px Innenabstand behielt. Jede einzeln sah harmlos aus. Diese Regeln stehen bewusst am DATEIENDE: sie muessen die frueheren gewinnen, ohne dass an fuenf Stellen nachgezogen werden muss. Im geoeffneten Zustand gelten die Abstaende weiter - dort steht Text im Feld und braucht Luft. */ .vi-search form { gap: 0; } .vi-search input[type="search"] { padding: 9px 0; } .vi-search:focus-within form, .vi-search.vi-search-offen form { gap: 4px; } .vi-search:focus-within input[type="search"], .vi-search.vi-search-offen input[type="search"] { padding: 9px 2px; }