/* ===== theme.css ===== */ /* =========================================================================== ZWEI THEMES - eine Quelle fuer Startseite und Unterseiten. Reihenfolge der Entscheidung, bewusst in dieser Folge: 1. Hat der Besucher auf dieser Seite selbst gewaehlt? -> seine Wahl 2. Sonst: was sagt die Geraeteeinstellung? -> prefers-color-scheme 3. Sonst: dunkel -> der Auftritt der Marke JEDES Farbpaar wurde gemessen, nicht geschaetzt. Die Werte stehen als Kommentar daneben. Der Grund fuer einen EIGENEN Akzentton im hellen Theme: #a96aff erreicht auf Weiss nur 3.39 und ist als Text unzulaessig (WCAG verlangt 4.5). #7d3ad9 hat denselben Farbton (265 Grad), ist dunkler und kommt auf 6.04 - gleiche Marke, zulaessiger Kontrast. =========================================================================== */ /* ---- HARD: Reihenfolge beim Ausliefern --------------------------------- stil.css MUSS vor den HTML-Dateien auf den Server, und zwar aus dem FERTIGEN Bau. Am 06.11.2026 lief es andersherum: stil.css ging hoch, danach wurde noch einmal gebaut, und die Seiten verwiesen auf eine neue Version, die der Server noch gar nicht hatte. Der erste Abruf holte unter der NEUEN Adresse den ALTEN Inhalt - und Cloudflare hat genau das fuer eine Woche festgehalten (Age 3827, cf-cache-status HIT, waehrend derselbe Pfad mit beliebigem anderen ?v= sofort die neue Datei lieferte). Der Versionsschluessel schuetzt also nur, wenn die Datei VOR der ersten Anfrage stimmt. Purge ist kein Ausweg: der API-Token darf es nicht (gemessen, Authentication error). Dauerhaft richtig waere der Hash im DATEINAMEN statt in der Abfrage - dann kann eine alte Antwort einen neuen Bau gar nicht erst verdecken. NACHTRAG, dieselbe Stunde: beim Nachmessen habe ich es gleich noch einmal ausgeloest. Ein blosses `curl` auf die NEUE Adresse, bevor die Datei oben lag, hat den alten Stand dort festgeschrieben - die Pruefung selbst war der Schaden. Also: eine neue Versionsadresse NIE abrufen, bevor die Datei auf dem Server liegt. Erst hochladen, dann messen. DRITTER NACHTRAG, und der eigentliche Punkt: Vorsatz reicht nicht. Der Abgleich "was weicht von live ab" liest die Version aus dem frisch gebauten HTML und ruft genau diese Adresse ab - er LOEST den Fehler aus, jedes Mal, von selbst, Minuten vor dem Upload. Darum die Regel fuer das Werkzeug, nicht fuer die Aufmerksamkeit: stil.css beim Abgleich IMMER mit einer ZUFALLSABFRAGE holen curl ".../stil.css?x=$RANDOM$RANDOM" niemals mit ?v=. Die Zufallsabfrage geht am Rand vorbei und zeigt, was der Server wirklich hat; die Versionsadresse zeigt, was der Rand sich gemerkt hat - und merkt sich dabei das Falsche. */ /* ---- Tamil, selbst ausgeliefert --------------------------------------- Noto Sans Tamil, SIL Open Font License 1.1 - Selbsthosten erlaubt. WARUM hier und nicht in schriften.css: diese Datei laeuft im versionierten Buendel (STIL_TEILE in bauen.py), schriften.css nicht. Eine Aenderung dort bliebe bis zu einer Woche hinter dem Cache stehen. WARUM ueberhaupt: Montserrat hat keine Tamil-Zeichen. Bisher fiel die Tamil-Seite auf irgendeine Systemschrift zurueck - auf jedem Geraet eine andere, in Groesse und Strichstaerke voellig verschieden. In schriften.css stand dafuer eine Ersatzliste auf `.ta` und `[lang="ta"]`, aber am 06.11.2026 gemessen: NULL Elemente auf der Seite tragen eine dieser Markierungen. Die Regel bewachte nichts. `unicode-range` erledigt das ohne jede Markierung im HTML und laedt die 50 KB nur dort, wo wirklich Tamil steht - also auf genau einer Seite. Der Bereich ist der von Google Fonts ausgelieferte Tamil-Teilsatz; U+200C/200D sind die unsichtbaren Verbinder, ohne die Tamil falsch zusammengesetzt wird. */ @font-face{ font-family:"Noto Sans Tamil"; font-style:normal; font-weight:400 700; font-display:swap; src:url(/schriften/noto-sans-tamil.woff2) format("woff2"); unicode-range:U+0964-0965, U+0B82-0BFA, U+200C-200D, U+20B9, U+25CC; } :root{ /* ---- DUNKEL (Vorgabe) ------------------------------------------------ */ --bg:#050505; --bg-2:#0c0c0c; --fg:#f4f2ef; /* 18.24 auf bg */ --muted:#a6a6a6; /* 8.37 auf bg */ --dim:#8f8f8f; /* 6.30 auf bg */ --line:rgba(255,255,255,.12); --line-stark:rgba(255,255,255,.22); --accent:#a96aff; /* 6.01 auf bg */ --accent-hover:#b982ff; --accent-ink:#120d1b; /* 5.63 auf accent */ --schatten:0 4px 24px rgba(0,0,0,.5); /* ---- WhatsApp ------------------------------------------------------- Eine FREMDE Markenfarbe, darum in beiden Themes derselbe Wert - genau darin liegt der Wiedererkennungswert. Sie wird nicht an das Theme angepasst, sondern die Schrift darauf. Weisse Schrift auf diesem Gruen haelt nur 1,98:1 und ist unzulaessig; WhatsApp selbst setzt sie trotzdem. Der dunkle Ton haelt 8,59:1 und sieht der Marke nicht weniger aehnlich. Gemessen 06.11.2026. */ --whatsapp:#25d366; --whatsapp-tief:#1fbb59; --whatsapp-ink:#0b2016; --leiste:rgba(5,5,5,.86); --knopf-rand-aussen:#050505; --knopf-rand-innen:rgba(255,255,255,.6); /* Der Ladeschirm und das Menue decken die ganze Flaeche ab. Sie brauchen ein eigenes Token: im hellen Theme blieben sie sonst dunkel, waehrend das Logo darauf invertiert wird - dunkel auf dunkel, also unsichtbar. */ --schleier:rgba(5,5,5,.74); --schleier-dicht:rgba(5,5,5,.98); --auf-schleier:rgba(255,255,255,.16); /* Zeichnungen (Lageschema). Vorher standen hier feste weisse rgba-Werte - im hellen Theme war die ganze Zeichnung unsichtbar, weiss auf weiss. Die hellen Werte sind etwas kraeftiger: Schwarz auf Weiss wirkt bei gleicher Deckung schwaecher als Weiss auf Schwarz. */ --zeichnung-flaeche:rgba(255,255,255,.035); --zeichnung-flaeche-2:rgba(255,255,255,.015); --zeichnung-linie:rgba(255,255,255,.12); --zeichnung-linie-stark:rgba(255,255,255,.3); /* Durchscheinender Knopfgrund. */ --glas:rgba(5,5,5,.35); --glas-dicht:rgba(5,5,5,.6); /* Die Scheibe hinter dem Siegel. Das Logo ist weiss mit violett und braucht IMMER einen dunklen Grund - in beiden Themes derselbe. Das ersetzt die fruehere Farbumkehr, die das Zeichen im hellen Theme verfaelschte: ein invertiertes Logo ist nicht dasselbe Logo. */ --siegel-grund:#0c0c0c; color-scheme:dark; } /* ---- HELL, wenn das Geraet es so will und nichts gewaehlt wurde -------- */ @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ --bg:#ffffff; --bg-2:#f2f1f4; --fg:#16141a; /* 18.28 auf bg */ --muted:#55525c; /* 7.64 auf bg */ --dim:#6e6b76; /* 5.21 auf bg */ --line:rgba(0,0,0,.12); --line-stark:rgba(0,0,0,.22); --accent:#7d3ad9; /* 6.04 auf bg */ --accent-hover:#6b2fc0; --accent-ink:#ffffff;/* 6.04 auf accent */ --schatten:0 4px 24px rgba(20,16,30,.12); --leiste:rgba(255,255,255,.88); --knopf-rand-aussen:rgba(0,0,0,.18); --knopf-rand-innen:rgba(255,255,255,.35); --schleier:rgba(255,255,255,.80); --schleier-dicht:rgba(255,255,255,.98); --auf-schleier:rgba(0,0,0,.16); --zeichnung-flaeche:rgba(0,0,0,.05); --zeichnung-flaeche-2:rgba(0,0,0,.025); --zeichnung-linie:rgba(0,0,0,.16); --zeichnung-linie-stark:rgba(0,0,0,.38); --glas:rgba(255,255,255,.55); --glas-dicht:rgba(255,255,255,.8); --siegel-grund:#16141a; color-scheme:light; } } /* ---- HELL, weil der Besucher es gewaehlt hat --------------------------- */ :root[data-theme="light"]{ --bg:#ffffff; --bg-2:#f2f1f4; --fg:#16141a; --muted:#55525c; --dim:#6e6b76; --line:rgba(0,0,0,.12); --line-stark:rgba(0,0,0,.22); --accent:#7d3ad9; --accent-hover:#6b2fc0; --accent-ink:#ffffff; --schatten:0 4px 24px rgba(20,16,30,.12); --leiste:rgba(255,255,255,.88); --knopf-rand-aussen:rgba(0,0,0,.18); --knopf-rand-innen:rgba(255,255,255,.35); --schleier:rgba(255,255,255,.80); --schleier-dicht:rgba(255,255,255,.98); --auf-schleier:rgba(0,0,0,.16); --zeichnung-flaeche:rgba(0,0,0,.05); --zeichnung-flaeche-2:rgba(0,0,0,.025); --zeichnung-linie:rgba(0,0,0,.16); --zeichnung-linie-stark:rgba(0,0,0,.38); --glas:rgba(255,255,255,.55); --glas-dicht:rgba(255,255,255,.8); --siegel-grund:#16141a; color-scheme:light; } /* Beim Umschalten weich ueberblenden - aber nur dann, nicht beim Laden. Die Klasse setzt das Skript erst nach dem ersten Bild. */ html.theme-weich, html.theme-weich body, html.theme-weich .kopf, html.theme-weich .tabbar, html.theme-weich .karten a, html.theme-weich .tabwrap{ transition:background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); } /* ---- Der Umschalter ---------------------------------------------------- Zwei Symbole in einem Knopf; sichtbar ist immer das, WOHIN der Klick fuehrt - nicht der aktuelle Zustand. Das ist die Lesart, die Leute erwarten: der Knopf zeigt, was passiert. */ .theme-knopf{ display:inline-flex;align-items:center;justify-content:center; width:44px;min-width:44px;height:44px; /* volle Zielflaeche */ border:0;border-radius:999px;padding:0; background:transparent;color:var(--muted); cursor:pointer;flex:none; box-shadow:inset 0 0 0 1px var(--line); transition:color .3s var(--ease), box-shadow .3s var(--ease); } .theme-knopf:hover{color:var(--fg);box-shadow:inset 0 0 0 1px var(--accent)} .theme-knopf svg{width:18px;height:18px;flex:none} .theme-knopf .zu-hell{display:block} .theme-knopf .zu-dunkel{display:none} /* Im hellen Theme zeigt er den Weg zurueck ins Dunkle. */ :root[data-theme="light"] .theme-knopf .zu-hell{display:none} :root[data-theme="light"] .theme-knopf .zu-dunkel{display:block} @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .theme-knopf .zu-hell{display:none} :root:not([data-theme="dark"]) .theme-knopf .zu-dunkel{display:block} } /* ---- Das Siegel sitzt auf einer Scheibe -------------------------------- Das Logo ist weiss mit violett und braucht einen dunklen Grund. Frueher wurde es im hellen Theme per filter:invert umgekehrt - das machte aus dem Weiss ein Schwarz und verschob das Violett, also ein ANDERES Zeichen. Eine Marke dreht man nicht um. Stattdessen bekommt es eine eigene Scheibe, in beiden Themes dieselbe. Am Logo gemessen: der Inhalt fuellt die Zeichenflaeche zu 102 Prozent und liegt mittig (495/513 bei 512), ein Kreis mit 50% Radius sitzt also genau im Siegelrand. Die Polsterung haelt den Rand des Zeichens frei. */ .marke img, .mark, .loader-mark, .tabbar .marke img, .lockup{ background:var(--siegel-grund); border-radius:50%; /* em statt Prozent: ein Prozentwert bezieht sich auf die BREITE des ELTERNelements, nicht auf das Bild - gemessen ergab padding:4% im Ladeschirm 51px und schrumpfte das Siegel sichtbar. em haengt an der Schriftgroesse des Elements und bleibt in jeder Groesse gleich proportional. */ padding:.18em; box-shadow:0 0 0 1px var(--line); } /* Im Ladeschirm ist das Siegel gross; dort traegt eine schmalere Fassung. */ .loader-mark{padding:.12em} /* `.lockup` ist am 07.11.2026 dazugekommen, und es war ein echter Fehler: die Regel oben zaehlte VIER Selektoren auf und uebersah den fuenften Ort, an dem dasselbe Siegel steht - den Abspann. Dort stand es also ohne Scheibe, und im hellen Theme war vom weissen Zeichen nur noch der violette Ring zu sehen; der Rest war weiss auf weiss. Gemessen vor der Korrektur: Seitengrund `rgb(255,255,255)`, `.lockup` background `rgba(0,0,0,0)`, waehrend `.mark` `rgb(22,20,26)` trug. Eigene Polsterung, weil `em` NICHT proportional zur Bildgroesse ist - es haengt an der Schriftgroesse. Dieselben .18em sind beim 46px-Kopfzeichen 6,3 % der Breite, beim 170 bis 300px grossen Abspann-Siegel aber nur 1,7 bis 1,0 %. Der Zeicheninhalt fuellt die Flaeche zu 102 %, braucht also mindestens 1 % je Seite - bei 300px waere .18em knapp darunter gelegen und der aeussere weisse Ring haette auf dem Seitengrund statt auf der Scheibe gesessen. Auf weiss heisst das: unsichtbare Kante. */ .lockup{padding:.3em} /* Fotos und das Hero-Video bleiben unberuehrt - ein invertiertes Foto waere unbrauchbar. Stattdessen wird der Abdunkler im hellen Theme schwaecher, damit die Bilder nicht gegen einen hellen Rahmen kaempfen. */ /* Die Vignette ist eine dunkle Abschattung zum Rand hin - auf einer hellen Seite legt sie einen grauen Rahmen ueber alles. Sie muss darum in BEIDEN Wegen ins helle Theme gedaempft werden, ueber das Attribut UND ueber die Geraeteeinstellung. Beim ersten Versuch stand nur die Attribut-Regel da; wer sein Geraet auf hell stellt und nichts waehlt, sah den Rahmen trotzdem mit voller Deckung. Eine Theme-Regel ist erst vollstaendig, wenn beide Wege sie treffen. */ :root[data-theme="light"] .vignette{opacity:.14} :root[data-theme="light"] .grain{opacity:.018} @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .vignette{opacity:.14} :root:not([data-theme="dark"]) .grain{opacity:.018} } /* ---- Der Hero folgt dem Theme NICHT ------------------------------------- Hinter ihm liegt ein dunkles Video, nicht die Seitenfarbe. Wuerde der Text dort dem hellen Theme folgen, stuende dunkle Schrift auf dunklem Bild - am 06.11.2026 im hellen Theme gesehen: die Ueberschrift war praktisch unlesbar. Der Hero behaelt darum seine eigenen, hellen Farben, in BEIDEN Themes. Das ist keine Ausnahme von der Token-Regel, sondern ihre Anwendung: der Hintergrund ist hier das Video, nicht --bg. */ .hero, .hero *:not(.hero-button-primary):not(.hero-button-primary *){ --fg:#f4f2ef; --muted:#cfccc7; /* auf abgedunkeltem Video gemessen, haelt 4.5:1 */ --dim:#b9b5b0; --line:rgba(255,255,255,.22); --accent:#a96aff; /* der helle Markenton, nicht der dunkle */ --accent-ink:#120d1b; --knopf-rand-aussen:#050505; --knopf-rand-innen:rgba(255,255,255,.6); /* Auch der Glasgrund bleibt hier dunkel: ein heller durchscheinender Knopf ueber dem dunklen Video waere ein milchiger Fleck. */ --glas:rgba(5,5,5,.35); --glas-dicht:rgba(5,5,5,.6); color:#f4f2ef; } /* Das Laufband liegt auf der Seitenfarbe, nicht auf dem Video. Hier standen feste helle Toene, weil die Seite anfangs nur dunkel war - im hellen Theme ergaben sie 1,6:1. Es folgt jetzt den Seitentokens und haelt damit in beiden Themes 8,4:1. */ /* Das Logo im Ladeschirm und in der Kopfzeile WIRD invertiert - dort ist der Grund die Seitenfarbe. Im Hero dagegen liegt es auf dem Video und bleibt, wie es ist. */ :root[data-theme="light"] .hero img, :root[data-theme="light"] .hero svg{filter:none} @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .hero img, :root:not([data-theme="dark"]) .hero svg{filter:none} } /* ---- Schriftgewicht im hellen Theme ----------------------------------- Eine duenne dunkle Linie auf hellem Grund wirkt schwaecher als eine duenne helle auf dunklem: der helle Hintergrund frisst sie optisch an. Darum traegt die Ueberschrift im hellen Theme eine Stufe mehr. Das ist kein Stilbruch, sondern gleicht den Eindruck zwischen beiden Themes an. */ :root[data-theme="light"] h1, :root[data-theme="light"] .display{font-weight:400} @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) h1, :root:not([data-theme="dark"]) .display{font-weight:400} } /* ===== stil.css ===== */ /* Unterseiten von Fahrzeugtechnik Balan. Dieselben Tokens wie die Startseite, aber ein ruhigeres Layout: die Startseite ist ein Schaufenster, diese Seiten sind Lesetexte. */ /* Die FARB-Tokens stehen in theme.css, einmal fuer beide Themes. Hier standen sie frueher ein zweites Mal, nur in der dunklen Fassung - ein stiller Widerspruch, sobald das helle Theme dazukam. Hier bleiben nur die Werte, die vom Theme unabhaengig sind. */ :root{ /* "Noto Sans Tamil" steht hinter Montserrat: dank unicode-range im @font-face (theme.css) greift es NUR fuer Tamil-Zeichen, alles andere bleibt Montserrat. Ohne den Namen im Stapel wuerde die Schrift gar nicht erst angefragt. */ --sans:"Montserrat","Noto Sans Tamil","Helvetica Neue",Arial,sans-serif; --pad:clamp(20px,4vw,64px); --ease:cubic-bezier(.22,.61,.36,1); --mw:760px; } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth} body{background:var(--bg);color:var(--fg);font-family:var(--sans); font-weight:300;line-height:1.65;overflow-x:hidden; -moz-osx-font-smoothing:grayscale} a{color:inherit;text-decoration:none} img{max-width:100%;height:auto;display:block} /* Tastaturfokus: 2px Violett auf Schwarz, 6:1 */ :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px} .skip{position:absolute;left:-9999px;top:0;z-index:1100;background:var(--accent); color:var(--accent-ink);padding:0 20px;min-height:44px;display:inline-flex; align-items:center;font-size:12px;letter-spacing:.12em;text-transform:uppercase; font-weight:600} .skip:focus{left:var(--pad);top:12px} /* ------------------------------------------------------------------- Kopf */ /* Marke links, Navigation UND Umschalter als eine Gruppe rechts. Vorher schob space-between den Umschalter allein an den Bildrand, mit einer Luecke zur Navigation - er wirkte wie ein verirrtes Element. */ .kopf nav{margin-left:auto} .kopf{display:flex;align-items:center;justify-content:flex-start;gap:12px; padding:14px var(--pad);border-bottom:1px solid var(--line); position:sticky;top:0;z-index:100; /* var(--leiste) statt eines festen Werts: im hellen Theme blieb die Kopfzeile sonst dunkel, waehrend der Rest der Seite hell wurde. */ background:var(--leiste);backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px)} .marke{display:flex;align-items:center;gap:12px;font-size:13px; letter-spacing:.1em;text-transform:uppercase;font-weight:500} .marke img{width:40px;height:40px} .kopf nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap} /* Form, Schrift und Farbe der Kopfzeilen-Knoepfe stehen in knoepfe.css, gemeinsam mit denen der Startseite. Hier stand frueher eine eigene Fassung mit .14em Sperrung und zwei !important - sie war spezifischer als das gemeinsame System und hat es ausgehebelt, sodass derselbe Knopf auf Start- und Unterseite verschieden aussah. */ /* ----------------------------------------------------------------- Inhalt */ main{padding:clamp(40px,7vw,96px) var(--pad) 0} article{max-width:var(--mw);margin:0 auto} .eyebrow{font-size:12px;letter-spacing:.24em;text-transform:uppercase; color:var(--accent);font-weight:500;margin-bottom:18px} /* 300 statt 200: bei 200 verlor die Ueberschrift gegen die kraeftigere H2 darunter und gegen den violetten Knopf - die wichtigste Zeile der Seite war die schwaechste. Die Anmutung bleibt leicht, traegt aber. */ h1{font-size:clamp(30px,5.4vw,52px);font-weight:300;line-height:1.08; letter-spacing:-.03em;text-wrap:balance;margin-bottom:28px} h2{font-size:clamp(19px,2.4vw,25px);font-weight:400;line-height:1.25; letter-spacing:-.018em;margin:0 0 16px;text-wrap:balance} /* Der Antwortblock unter der Ueberschrift. 30 bis 90 Woerter, in sich verstaendlich - er muss ohne den Rest der Seite eine Antwort sein. */ .kapsel{font-size:clamp(16px,1.9vw,19px);font-weight:300;line-height:1.55; color:var(--fg);border-left:2px solid var(--accent);padding-left:20px; margin-bottom:clamp(36px,5vw,60px)} .abschnitt{margin-bottom:clamp(36px,5vw,60px)} .abschnitt p{color:var(--muted);margin-bottom:14px;max-width:66ch} .abschnitt p:last-child{margin-bottom:0} /* ---------------------------------------------------------------- Tabelle */ .tabwrap{overflow-x:auto;border:1px solid var(--line);border-radius:3px} table{width:100%;border-collapse:collapse;font-size:14px;min-width:420px} th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line); vertical-align:top} th{font-size:12px;letter-spacing:.14em;text-transform:uppercase; color:var(--accent);font-weight:600;background:var(--bg-2);white-space:nowrap} td{color:var(--muted)} td:first-child{color:var(--fg);font-weight:400} tbody tr:last-child td{border-bottom:none} /* ------------------------------------------------------------------- Karten */ /* 12px Abstand statt 2px: mit 2px stiessen die Kacheln zu einer Gittertabelle zusammen und lasen sich wie ein Formular, nicht wie einzelne Angebote. */ .karten{list-style:none;display:grid;gap:12px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} .karten a{display:flex;flex-direction:column;padding:20px 20px 16px; background:var(--bg-2);height:100%;border:1px solid var(--line); border-radius:4px; transition:border-color .3s var(--ease), transform .3s var(--ease)} .karten a:hover{border-color:var(--accent);transform:translateY(-2px)} .karten strong{display:block;font-weight:500;font-size:16px;margin-bottom:8px} /* 14px und --muted statt 13px und --dim: bei dieser Groesse war der schwaechere Ton fuer aeltere Augen muehsam. --muted haelt 8,4:1. */ .karten span{display:block;font-size:14px;color:var(--muted);line-height:1.55} /* Der Pfeil zeigt, dass die Kachel ein Link ist - vorher war das an nichts zu erkennen. */ .karten em{display:block;margin-top:auto;padding-top:12px;font-style:normal; color:var(--accent);font-size:15px;line-height:1; transition:transform .3s var(--ease)} .karten a:hover em{transform:translateX(4px)} /* ---------------------------------------------------------------------- FAQ */ .faq details{border-bottom:1px solid var(--line)} .faq summary{cursor:pointer;padding:16px 36px 16px 0;position:relative; font-size:15px;font-weight:400;list-style:none;min-height:44px; display:flex;align-items:center} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";position:absolute;right:8px;top:50%; transform:translateY(-50%);color:var(--accent);font-size:20px;font-weight:200} .faq details[open] summary::after{content:"−"} .faq details>div{padding:0 0 18px} .faq details p{color:var(--muted);font-size:15px;max-width:66ch;margin:0} /* ------------------------------------------------------------------ Weiter */ .verwandt{border-top:1px solid var(--line);padding-top:28px; margin-bottom:clamp(36px,5vw,60px)} .verwandt ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px; margin-bottom:16px} .verwandt li a{display:inline-flex;align-items:center;min-height:44px; padding:0 16px;border:1px solid var(--line);font-size:13px; color:var(--muted);transition:border-color .3s var(--ease),color .3s var(--ease)} .verwandt li a:hover{border-color:var(--accent);color:var(--fg)} /* 44px Zielflaeche, auch hier: am Telefon gemessen war dieser Link nur 19px hoch und damit schwer zu treffen. */ .verwandt>p a{font-size:13px;color:var(--accent); border-bottom:1px solid var(--accent); display:inline-flex;align-items:center;min-height:44px} .marke{min-height:44px} /* ----------------------------------------------------------------- Anfrage */ .anfrage{border-top:1px solid var(--line);margin-top:clamp(40px,6vw,80px); padding:clamp(40px,6vw,72px) var(--pad);background:var(--bg-2);text-align:center} .anfrage h2{margin-bottom:12px} .anfrage>p{color:var(--muted);max-width:52ch;margin:0 auto 28px} .wege{display:flex;flex-wrap:wrap;gap:10px;justify-content:center; margin-bottom:28px} /* .weg und .weg.haupt stehen ebenfalls in knoepfe.css - dieselben Werte wie die Knoepfe der Startseite. */ address{font-style:normal;font-size:13px;color:var(--dim);line-height:1.8} /* ------------------------------------------------------------------ Fusszeile */ footer{padding:22px var(--pad);border-top:1px solid var(--line);text-align:center; display:flex;flex-direction:column;align-items:center;gap:12px} footer nav{display:flex;gap:4px;flex-wrap:wrap;justify-content:center} /* 44px Zielflaeche: die Pflichtseiten muessen auch auf dem Telefon zuverlaessig treffbar sein, sonst sind sie faktisch nicht erreichbar. */ footer nav a{font-size:11px;letter-spacing:.1em;color:var(--muted); min-height:44px;display:inline-flex;align-items:center;padding:0 12px; transition:color .3s var(--ease)} footer nav a:hover{color:var(--fg)} footer span{font-size:12px;letter-spacing:.14em;text-transform:uppercase; color:var(--dim)} /* Schmale Geraete: der Markenname bricht sonst zweizeilig um und die Navigation schiebt sich darueber. Auf dem Telefon traegt das Zeichen die Marke allein - der Name steht ohnehin in der Ueberschrift darunter. */ @media (max-width:620px){ .kopf{padding:10px 16px;gap:10px} .marke span{ position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap; /* fuer Screenreader da, sichtbar weg */ } .marke img{width:34px;height:34px} .kopf nav{gap:2px} .kopf nav a{padding:10px 8px;font-size:12px;letter-spacing:.1em} /* Kopf-CTA: Masse stehen in knoepfe.css */ } /* Sehr schmal: die zwei Textlinks weichen, der Anrufknopf bleibt - er ist der einzige, den jemand auf dem Telefon wirklich braucht. */ @media (max-width:400px){ .kopf nav a:not(.kopf-cta){display:none} } @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} html{scroll-behavior:auto} } /* ---- Antippbare Kontaktwege (nur Kontaktseite) -------------------------- Vier Kacheln statt Fliesstext. Jede ist ein eigener Weg und mit einem Daumentipp erreichbar - vorher stand die Telefonnummer erst weit unten im Anfrageblock, hinter zwei Textabschnitten. */ .kontaktwege{display:grid;gap:10px;margin-bottom:clamp(36px,5vw,60px); grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} .kw{display:flex;flex-direction:column;gap:4px;justify-content:center; min-height:68px;padding:12px 18px;border-radius:4px; background:var(--bg-2);border:1px solid var(--line); transition:border-color .3s var(--ease), transform .3s var(--ease)} .kw:hover{border-color:var(--accent);transform:translateY(-2px)} .kw-l{font-size:12px;letter-spacing:.16em;text-transform:uppercase; color:var(--accent);font-weight:600} .kw-w{font-size:15px;color:var(--fg);font-weight:400;line-height:1.3} /* Die WhatsApp-Kachel traegt den Gruenton, wie jeder WhatsApp-Knopf der Seite. Sie steht zuerst, weil WhatsApp die bevorzugte Kontaktmethode ist. Der Rand bleibt, damit die Flaeche auf hellem Grund eine Kante hat - #25d366 auf Weiss haelt als Flaeche nur 1,98:1. */ .kw-wa{background:var(--whatsapp);border-color:var(--whatsapp-tief)} .kw-wa .kw-l, .kw-wa .kw-w{color:var(--whatsapp-ink)} .kw-wa:hover{background:var(--whatsapp-tief);border-color:var(--whatsapp)} /* ---- Tamil-Seite: groesser gesetzt -------------------------------------- Zwei Gruende, die zusammenfallen. (1) Das Publikum. Diese Seite richtet sich ausdruecklich auch an aeltere Leserinnen und Leser. 16px Fliesstext ist die untere Grenze, nicht ein guter Wert. (2) Die Schrift. Tamil traegt Zeichen UNTER und UEBER der Grundlinie und setzt Silben aus mehreren Teilen zusammen. Bei gleicher Punktgroesse wie Latein wirkt es kleiner und laeuft bei enger Zeilenhoehe ineinander. Darum hier eine Stufe groesser UND mehr Durchschuss - nicht nur fuer das Tamil, sondern fuer beide Sprachen, sonst stehen die zwei Spalten der Tabelle unterschiedlich hoch. Seitenweit ueber data-seite, damit der Rest der Seiten unberuehrt bleibt. */ body[data-seite="tamil-garage-schweiz"]{line-height:1.8} body[data-seite="tamil-garage-schweiz"] .kapsel{ font-size:clamp(18px,2.1vw,21px);line-height:1.6} body[data-seite="tamil-garage-schweiz"] .abschnitt p{font-size:18px} body[data-seite="tamil-garage-schweiz"] table{font-size:17px} body[data-seite="tamil-garage-schweiz"] th{font-size:12px} body[data-seite="tamil-garage-schweiz"] th, body[data-seite="tamil-garage-schweiz"] td{padding:15px 18px} body[data-seite="tamil-garage-schweiz"] .faq summary{font-size:17px} body[data-seite="tamil-garage-schweiz"] .faq details p{font-size:17px} body[data-seite="tamil-garage-schweiz"] .verwandt li a{font-size:15px} /* Fliesstext hier in --fg statt --muted. --muted haelt 7,29:1 und ist NICHT unzulaessig - das ist nachgemessen, nicht geschaetzt. Aber fuer Augen ab 55 ist der Unterschied zwischen "zulaessig" und "muehelos" genau dieser Schritt, und auf dieser einen Seite wiegt Lesbarkeit mehr als die feine Abstufung zwischen Ueberschrift und Text. */ body[data-seite="tamil-garage-schweiz"] .abschnitt p, body[data-seite="tamil-garage-schweiz"] .faq details p, body[data-seite="tamil-garage-schweiz"] td{color:var(--fg)} /* ---- HARD: keine Sperrung auf Tamil ------------------------------------- Die kleinen Etiketten der Seite (Rubrik, Tabellenkopf, Kontaktkachel) waren fuer deutsche Versalien gebaut: 10px, VERSALIEN, 0.14 bis 0.24em Sperrung. Auf Tamil ist das falsch, nicht nur haesslich - eine Silbe besteht dort aus mehreren zusammengesetzten Teilen, und Sperrung reisst genau diese Teile auseinander. Bei 10px verschmolzen sie am Bildschirm zu einem violetten Streifen (Bildurteil 06.11.2026, am Quelltext bestaetigt: alle drei Selektoren tragen die Sperrung, und alle drei enthalten auf dieser Seite Tamil). Versalien sind fuer Tamil ohnehin wirkungslos - die Schrift kennt keine Grossbuchstaben. Hier also beides weg und deutlich groesser. */ body[data-seite="tamil-garage-schweiz"] .eyebrow, body[data-seite="tamil-garage-schweiz"] th, body[data-seite="tamil-garage-schweiz"] .kopf-cta, body[data-seite="tamil-garage-schweiz"] .kw-l{ letter-spacing:normal;text-transform:none} /* Der Knopf in der Kopfzeile traegt seit der Umstellung auf Tamil nur noch "அழைக்க" - bei 11px mit 1px Sperrung war ausgerechnet der wichtigste Knopf der Seite der am schlechtesten lesbare. Gemessen, nicht geschaetzt. */ body[data-seite="tamil-garage-schweiz"] .kopf-cta{font-size:14px} body[data-seite="tamil-garage-schweiz"] .eyebrow{font-size:14px} body[data-seite="tamil-garage-schweiz"] th{font-size:14px} body[data-seite="tamil-garage-schweiz"] .kw-l{font-size:15px} /* Die Kontaktkacheln sind auf dieser Seite der Hauptweg, nicht eine Nebenangabe: wer die Sprache sucht, will anrufen, nicht lesen. Deshalb groesser, und die erste traegt den Akzentrand - das Auge soll zuerst auf "Anrufen" landen. */ /* Zwei mal zwei statt drei plus eine: bei 200px Mindestbreite passten drei Kacheln in die Zeile und die vierte stand allein darunter, und die E-Mail-Adresse brach mitten im Wort um. Mit 300px sind es zwei Reihen zu zwei - ruhiger, und jede Kachel ist breit genug fuer ihren Inhalt. */ body[data-seite="tamil-garage-schweiz"] .kontaktwege{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} body[data-seite="tamil-garage-schweiz"] .kw{min-height:84px;padding:16px 20px} body[data-seite="tamil-garage-schweiz"] .kw-w{overflow-wrap:anywhere;font-size:18px} /* Die erste Kachel ist gefuellt, nicht nur umrandet. Mit duennem Rand sah sie aus wie die drei Infokaesten daneben; wer die Seite ueberfliegt, soll genau hier zuerst haengenbleiben. Seit dem 06.11.2026 ist das die WhatsApp-Kachel, nicht mehr die Anruf-Kachel - WhatsApp ist die bevorzugte Kontaktmethode. Die Farbe kommt aus .kw-wa, hier wird nur die Nummer groesser gesetzt. */ body[data-seite="tamil-garage-schweiz"] .kw:first-child .kw-w{ font-size:21px;font-weight:500} /* ===== knoepfe.css ===== */ /* =========================================================================== KNOPFSYSTEM - eine Quelle fuer die Startseite UND alle Unterseiten. WARUM diese Datei existiert: die Startseite traegt ihr CSS inline, die Unterseiten laden stil.css. Dieselben Knoepfe waren dadurch an zwei Orten definiert und liefen auseinander. Am 06.11.2026 gemessen: Radius 999px (Start) gegen 0px (Unterseiten) Hoehen 44 / 84 / 66 / 44 / 48 gegen 44 / 94 / 48 / 66 / 44 / 0 Schriftgrade 9 / 11 / 12 gegen 10 / 11 / 13 / 14 / 16 Gewichte 300 / 500 / 600 gegen 300 / 600 Versalien teils ja, teils nein gegen teils ja, teils nein Runde Pillen neben eckigen Kaesten lesen sich wie zwei verschiedene Websites. Diese Datei wird von bauen.py in stil.css gehaengt UND von startseite.py in die Startseite eingesetzt - damit gibt es die Werte nur noch einmal. Die FARBEN waren bereits ueberall gleich (#a96aff auf #120d1b) und bleiben unangetastet; abgeglichen werden Form, Groesse und Schrift. =========================================================================== */ :root{ --k-radius: 999px; /* Pillenform - der Auftritt der Startseite gibt sie vor */ --k-hoehe: 48px; /* Standard, deutlich ueber den 44px Mindestzielflaeche */ --k-hoehe-klein: 44px; /* Kopfzeile und Navigation, wo der Platz knapp ist */ --k-schrift: 12px; --k-sperrung: .09em; --k-pad: 24px; --k-pad-klein: 16px; } /* --- Gemeinsame Grundform ------------------------------------------------ Alle Knopfklassen beider Seitentypen in EINER Regel. Die Namen sind historisch verschieden (hdr-cta hier, kopf-cta dort) - zusammengefuehrt wird ueber diese Liste, nicht durch Umbenennen im HTML, weil die Startseite abgenommen ist und ihr Markup nicht angefasst werden soll. */ .hdr-cta, .kopf-cta, .hero-button, .hero-button-primary, .hero-button-secondary, .weg, .f button, .skip{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:var(--k-hoehe); padding:0 var(--k-pad); border:0; border-radius:var(--k-radius); font-family:var(--sans); font-size:var(--k-schrift); font-weight:600; letter-spacing:var(--k-sperrung); text-transform:uppercase; text-align:center; line-height:1; white-space:nowrap; cursor:pointer; text-decoration:none; transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); } /* --- Primaer: violetter Grund ------------------------------------------- Der zweitonige Rand ist nicht Zierde. Die Knoepfe liegen teils ueber dem Hero-Video; eine einzelne Haarlinie haelt die 3:1 nach WCAG 1.4.11 nicht gegen jeden Bildinhalt. Dunkel aussen plus hell innen haelt gegen beides. */ .hdr-cta, .kopf-cta, .hero-button-primary, .weg.haupt, .f button, .skip{ background:var(--accent); color:var(--accent-ink); box-shadow:0 0 0 1px #050505, inset 0 0 0 1px rgba(255,255,255,.6); } .hdr-cta:hover, .kopf-cta:hover, .hero-button-primary:hover, .weg.haupt:hover, .f button:hover{ background:#b982ff; transform:translateY(-1px); } /* --- WhatsApp: eigener Grund, ueberall gleich --------------------------- Prash-Entscheid 06.11.2026: WhatsApp traegt immer den WhatsApp-Gruenton, damit der Knopf auf jeder Seite sofort als derselbe erkannt wird, und ist die bevorzugte Kontaktmethode. Die Klasse haengt sich an die bestehenden Knopfklassen, statt sie zu ersetzen - Form, Hoehe und der zweitonige Rand bleiben damit identisch zum Rest, nur die Flaeche wechselt. Doppelte Klassen im Selektor, weil .hdr-cta und .weg.haupt ihre Farbe selbst setzen und sonst gewinnen. */ .wa, .hdr-cta.wa, .kopf-cta.wa, .hero-button-primary.wa, .weg.wa{ background:var(--whatsapp); color:var(--whatsapp-ink); } .wa:hover, .hdr-cta.wa:hover, .kopf-cta.wa:hover, .hero-button-primary.wa:hover, .weg.wa:hover{ background:var(--whatsapp-tief); color:var(--whatsapp-ink); transform:translateY(-1px); } /* --- Sekundaer: durchscheinend mit Rand --------------------------------- */ .hero-button-secondary, .weg:not(.haupt){ background:var(--glas); color:var(--fg); box-shadow:inset 0 0 0 1px var(--line); backdrop-filter:blur(6px); } .hero-button-secondary:hover, .weg:not(.haupt):hover{ background:var(--glas-dicht); box-shadow:inset 0 0 0 1px var(--accent); transform:translateY(-1px); } /* --- Kleine Form fuer die Kopfzeile ------------------------------------- */ .hdr-cta, .kopf-cta{ min-height:var(--k-hoehe-klein); padding:0 var(--k-pad-klein); font-size:11px; } /* --- Textlinks in Kopf, Fuss und Weiterfuehrung -------------------------- Keine Flaeche, aber dieselbe Schrift und IMMER 44px Zielflaeche. Eine der Navigationszeilen war gemessen 0px hoch und damit nicht treffbar. */ .kopf nav a:not(.kopf-cta), #main-nav a, footer nav a, .verwandt li a{ display:inline-flex; align-items:center; min-height:44px; padding:0 12px; font-size:11px; letter-spacing:var(--k-sperrung); text-transform:uppercase; font-weight:400; color:var(--muted); text-decoration:none; transition:color .3s var(--ease); } .kopf nav a:not(.kopf-cta):hover, #main-nav a:hover, footer nav a:hover, .verwandt li a:hover{color:var(--fg)} /* Die Weiterfuehrung behaelt ihren Rahmen, bekommt aber dieselbe Pillenform. */ .verwandt li a{ box-shadow:inset 0 0 0 1px var(--line); border:0; border-radius:var(--k-radius); padding:0 18px; } .verwandt li a:hover{box-shadow:inset 0 0 0 1px var(--accent)} /* Sprungmarke: liegt ueber allem, darf nicht wie ein Inhaltsknopf wirken. */ .skip{min-height:44px;font-size:11px} @media (prefers-reduced-motion:reduce){ .hdr-cta, .kopf-cta, .hero-button, .weg, .f button{transition:none} .hdr-cta:hover, .kopf-cta:hover, .hero-button-primary:hover, .weg.haupt:hover, .weg:not(.haupt):hover{transform:none} } /* ===== mobil.css ===== */ /* =========================================================================== MOBILE KOPFZEILE UND TAB-LEISTE Nachgebaut nach dem Muster der Schwesterseite, dort am 06.11.2026 gemessen: Kopfzeile 61px, fest, Logo zentriert, Rand unten 1px Tab-Leiste 61px, fest am unteren Rand, 4 Eintraege Eintrag 48px hoch, Spalte, Luecke 5px, Schrift 9px/600, Icon 22px ZWEI Dinge mache ich anders, beide absichtlich: 1. Der Body bekommt unten Platz in Hoehe der Leiste. Im Vorbild ist padding-bottom 0 - die feste Leiste legt sich dort ueber den letzten Inhalt. Bei einer Seite, deren letzte Zeile die Adresse ist, verdeckt das genau die wichtigste Angabe. 2. Schrift 10px statt 9px. Neun Pixel liegen unter dem, was auf einem Telefon zuverlaessig lesbar ist; die Zielflaeche bleibt bei 48px. Die Leiste erscheint NUR auf Telefonbreite. Am Rechner gibt es die normale Kopfnavigation - eine Tab-Leiste waere dort fehl am Platz. =========================================================================== */ /* Auf dem Rechner: nicht da. */ .tabbar{display:none} @media (max-width:760px){ /* ---- Kopfzeile: Logo mittig, Umschalter rechts --------------------- */ .kopf, #hdr{ display:grid; grid-template-columns:44px 1fr 44px; /* links Platz, Mitte Logo, rechts Knopf */ align-items:center; gap:8px; padding:11px 12px; min-height:68px; } .kopf .marke, #hdr > a:first-of-type{ grid-column:2; justify-self:center; justify-content:center; } /* Der Markenname steht in der Ueberschrift darunter - auf dem Telefon traegt das Zeichen allein, sonst bricht die Zeile um. */ .kopf .marke span{ position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap; } /* 46px, nicht 38. Das Siegel traegt Schrift AUF DEM RAND ("Fahrzeugtechnik" oben, "Switzerland" unten) und daneben steht ein 44px-Umschalter: bei 38px war die Marke das KLEINSTE Element der Kopfzeile und der Randtext eine graue Spur. 46px ist derselbe Wert, den der Rechner am oberen Ende seiner clamp() schon nimmt - also keine neue Groesse, sondern dieselbe. Dass der Randtext auch dann nicht zu LESEN ist, bleibt wahr; dafuer braeuchte es eine reduzierte Fassung des Zeichens ohne Randschrift. */ .kopf .marke img, #hdr .mark{width:46px;height:46px} .theme-knopf{grid-column:3;justify-self:end} /* Die Textnavigation der Kopfzeile weicht der Leiste unten. WICHTIG: das nav-Element selbst ausblenden, nicht nur seine Verweise. Ein leeres nav bleibt sonst ein Gitterkind ohne zugewiesene Spalte und wird in eine ZWEITE Zeile gesetzt - gemessen: der Umschalter stand dadurch unter dem Logo statt daneben. DIESELBE Falle hat am 07.11.2026 den Menue-Knopf erwischt, weil diese Liste ihn nicht enthielt. Er steht NUR auf der Startseite (die Unterseiten haben keinen), darum fiel es beim Bauen der Unterseiten nicht auf. Gemessen auf dem Telefon: Kopfzeile 113px statt 60px, der Knopf bei y=60 ohne zugewiesene Spalte, Kasten 44px bei 57px Inhalt - "Menue" quoll also 13px aus seinem runden Rahmen heraus. Er wird hier nicht repariert, sondern ABGESCHALTET: auf Telefonbreite traegt die Leiste unten die Navigation (Start, Leistungen, Anrufen, WhatsApp, Anfahrt), und /leistungen/ ist die Tuer zu allen Unterseiten. Zwei Navigationen auf einem Schirm sind eine zu viel. Die Sprungmarken der Startseite (Arbeiten, Ablauf, Anfrage) bleiben ueber die Fusszeile und ueber das Scrollen erreichbar. Die Regel ist bewusst nach GITTERKIND formuliert und nicht nach Einzelnamen: wer dem Kopf ein weiteres Element gibt, soll es hier eintragen muessen und nicht in einer zweiten Zeile wiederfinden. */ .kopf nav:not(.tabbar), #main-nav{display:none} .kopf .kopf-cta, #hdr .hdr-cta{display:none} #hdr .menu-toggle{display:none} /* Die Fusszeilen-Navigation bleibt sichtbar, sie ist kein Kopfelement. */ footer nav{display:flex} /* ---- Platz fuer die feste Leiste ------------------------------------ Hoehe der Leiste plus die Home-Linie auf randlosen Telefonen. Ohne env() schiebt sich die Leiste dort unter die Systemgeste. */ body{ padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px)); } /* ---- Die Leiste ------------------------------------------------------ */ .tabbar{ display:grid; /* minmax(0,1fr), nicht 1fr. `1fr` ist `minmax(auto,1fr)` - die Zelle kann also vom Inhalt AUFGEZOGEN werden, und dann sind die fuenf Spalten nicht mehr gleich breit. Am 07.11.2026 gemessen, als die Beschriftung versuchsweise auf 12px stand: Zellen 68, 89, 70, 81, 68 statt fuenfmal 75, Summe 376 bei 375 Pixeln Breite. Mit minmax(0,1fr) bleiben die Spalten gleich und der Text wird abgeschnitten statt die Leiste zu sprengen - ein sichtbarer Fehler ist besser als ein stiller Ueberlauf. */ grid-template-columns:repeat(5,minmax(0,1fr)); position:fixed; left:0;right:0;bottom:0; z-index:1000; background:var(--leiste); backdrop-filter:saturate(1.6) blur(18px); -webkit-backdrop-filter:saturate(1.6) blur(18px); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom, 0px); } .tabbar a{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:64px; /* deutlich ueber den 44px Minimum */ padding:8px 2px; color:var(--muted); text-decoration:none; /* 10px, und das ist AUSGEMESSEN, nicht Geschmack. Die uebrigen Kleinschriften der Seite stehen seit dem 07.11.2026 auf 12px; die Tab-Leiste ist davon ausgenommen, weil sie fuenf feste Zellen auf der Geraetebreite teilt. Bei 375px sind das 75px je Zelle, abzueglich Polsterung 71px nutzbar. Gemessen: "LEISTUNGEN" braucht bei 12px 85px, bei 11px rund 78px, bei 10px 71px. 12px passt also nicht knapp, sondern um 14 Pixel nicht. Wer das aendern will, muss die Beschriftung kuerzen, nicht die Schrift vergroessern. */ font-size:10px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; line-height:1; -webkit-tap-highlight-color:transparent; transition:color .2s var(--ease), background-color .2s var(--ease); } .tabbar a svg{width:21px;height:21px;flex:none;stroke-width:1.7} .tabbar a:active{background:var(--line)} .tabbar a:hover{color:var(--fg)} /* Die aktuelle Seite wird NICHT nur durch Farbe markiert - dazu kommt ein Strich oben. Farbe allein scheitert an Farbsehschwaeche. */ .tabbar a[aria-current="page"]{ color:var(--accent); box-shadow:inset 0 2px 0 0 var(--accent); } /* Anrufen ist der Hauptweg zu einer Werkstatt und wird hervorgehoben. */ .tabbar a.tab-ruf{color:var(--accent)} .tabbar a.tab-ruf svg{stroke-width:2} /* WhatsApp traegt die Markenfarbe des Dienstes, damit es wiedererkannt wird - auf beiden Themes geprueft. */ /* WhatsApp traegt auch hier den Gruenton als FLAECHE, nicht nur als Schriftfarbe. Zwei Gruende: der Wiedererkennungswert ist der Zweck der Farbe, und #25d366 als Schrift auf hellem Grund hielt nur 1,98:1 - im hellen Theme war dieser Eintrag faktisch unlesbar (gemessen 06.11.2026). Auf der Flaeche haelt der dunkle Ton 8,59:1. */ .tabbar a.tab-wa{background:var(--whatsapp);color:var(--whatsapp-ink)} .tabbar a.tab-wa:active{background:var(--whatsapp-tief)} } /* Sehr schmale Geraete: Beschriftung kleiner, Zielflaeche unveraendert. */ @media (max-width:360px){ /* Bleibt bei 9px. Hier stand kurzzeitig 11px, weil die Leiste oben versuchsweise auf 12px gehoben wurde - das ist zurueckgenommen, die Begruendung steht bei der 10px-Regel. Unter 361px bleiben je Zelle rund 72px, und selbst 10px waeren dort schon an der Kante. */ .tabbar a{font-size:9px;gap:3px} .tabbar a svg{width:19px;height:19px} } @media (prefers-reduced-motion:reduce){ .tabbar a{transition:none} }