/* ===================================================================== Ausbildungszentrum AGV Bau Saar - Gestaltung der Website --------------------------------------------------------------------- ALLE FARBEN UND GROESSEN STEHEN IM BLOCK ":root" DIREKT DARUNTER. Wer die Farbe der ganzen Website aendern moechte, aendert dort nur eine einzige Zeile - der Rest passt sich automatisch an. ===================================================================== */ :root { /* --- Farben (hier aendern) ------------------------------------- */ --blau: #2D438F; /* Hausfarbe aus dem Logo */ --blau-dunkel: #22336E; /* fuer Fussbereich und Mouseover */ --blau-sehrhell: #EEF1F9; /* zarte Hinterlegung von Infokaesten */ /* Orange des AGV Bau Saar - zeigt die Zusammengehoerigkeit von Verband und Ausbildungszentrum. Bewusst sparsam eingesetzt: vor allem dort, wo der Mauszeiger darueber faehrt. */ --orange: #FF6200; /* Originalton des Verbandes */ --orange-dunkel: #C24A00; /* fuer Schrift auf Weiss (gut lesbar) */ --orange-hell: #FF8A3D; /* fuer Schrift auf dunklem Grund */ --orange-zart: #FFF4EC; /* zarte Hinterlegung beim Darueberfahren */ --orange-mittel: #FFD2B0; /* kraeftigere Hinterlegung, z. B. Tabellenzeile */ /* Nur fuer fehlende Pflichtangaben in Formularen - sonst kommt Rot auf dieser Website nicht vor (ausser als Schriftfarbe, die jemand in der Verwaltung selbst setzt - siehe --farbe-rot). */ --rot: #C0392B; /* Rahmen eines fehlenden Pflichtfeldes */ --rot-zart: #FDEDEC; /* zarte Hinterlegung dazu */ /* Schriftfarben aus der Schreibleiste (03.10.2026, sein Wunsch: "ein paar Standardfarben wie Rot, Gruen, Gelb, Blau"). Vier feste Toene, jeder auf Weiss und auf den hellen Flaechen (grau, zartblau, zartorange) mindestens 4,7 : 1. Im Inhalt steht nur der Name (class="farbe-rot") - wer einen Ton aendern will, aendert ihn hier. */ --farbe-rot: #C0392B; --farbe-gruen: #1E7B3A; --farbe-gelb: #8A6500; /* dunkel - helles Gelb ist auf Weiss nicht lesbar */ /* Blau: ein Azurblau, deutlich weg vom Blau der Verweise (Punkt 34, 04.10.2026). Befund vom Geraetecheck: Blau geschriebener Text aehnelte einem Verweis. Bis dahin #1565C0 - im Farbkreis 15 Grad neben dem Verweis-Blau, jetzt 26 Grad. Auf Weiss 5,5 : 1, auf Zartblau 4,9 : 1. */ --farbe-blau: #0B6FA4; --schrift: #1A1A1A; /* normale Textfarbe (schwarz) */ --schrift-grau: #5A5F6B; /* Nebentexte, Datumsangaben */ --hintergrund: #FFFFFF; /* Seitenhintergrund (weiss) */ --flaeche-grau: #F6F7F9; /* abgesetzte Abschnitte */ --linie: #E3E6EC; /* Trennlinien und Rahmen */ --feldrand: #8A8F9C; /* Rand der Eingabefelder - 3,2 : 1 gegen Weiss */ /* --- Groessen --------------------------------------------------- */ --breite: 1180px; /* maximale Inhaltsbreite */ /* Der Rand links und rechts neben dem Inhalt. Er waechst mit der Fensterbreite mit, damit Inhalte nicht am Rand kleben. EINE Angabe fuer alles, was sich danach richtet (10.10.2026): `.bereich`, die Punkte im Kopfstreifen und in der Bearbeitung der Stift am Hauptmenue (verwaltung/gestaltung.css, `.navi-zusatz`). */ --rand: clamp(1.25rem, 5vw, 3.75rem); --radius: 10px; /* Eckenrundung */ --abstand: clamp(3rem, 7vw, 5.5rem); /* Abstand je Abschnitt */ /* --- Schrift ---------------------------------------------------- */ /* Inter zuerst (29.10.2026, Punkt 86 - die Dateien stehen im Block "@font-face" direkt unter diesem). Die Geraeteschriften dahinter bleiben als Rueckfall: falls die Datei nicht kommt, und fuer Zeichen, die in Inter fehlen. */ --schriftart: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* --- Die Schrift Inter, vom eigenen Server (29.10.2026, Punkt 86) ----- Seine Wahl nach dem Vergleich an Startseite und Kursseite, am PC und am Handy: "Wir nehmen dann Inter". Bis dahin stand hier nur die Geraeteschrift - auf jedem Geraet eine andere (Mac und iPhone San Francisco, Windows Segoe UI, Android Roboto). Inter kommt der Apple-Schrift am naechsten. Quelle: Paket @fontsource-variable/inter 5.3.0 (cdn.jsdelivr.net), die Dateien unveraendert in schriften/. Lizenz: SIL Open Font License 1.1, der Text liegt daneben (schriften/inter-lizenz.txt). Vom eigenen Server, nie von einem fremden (kein Google Fonts): So erfaehrt niemand sonst von einem Besuch. Die opsz-Dateien sind Absicht: Neben der Strichstaerke tragen sie die optische Groesse - grosse Ueberschriften stehen damit enger, wie bei Apple, und so hat er Inter im Vergleich gesehen. `font-optical-sizing` deshalb nicht abschalten. Die Laufweiten (`letter-spacing`) bleiben, wie sie sind - auch die hat er mit Inter gesehen. Zwei Dateien: lateinisch (alle deutschen Texte) und lateinisch erweitert (etwa polnische oder tuerkische Namen). Die zweite laedt der Browser nur, wenn ein solches Zeichen auf der Seite steht. Die Bereiche (`unicode-range`) stammen aus opsz.css des Pakets. Aendert sich eine Datei je, bekommt sie einen neuen Namen: Sie wird ein Jahr zwischengespeichert (.htaccess). Der Name steht dann auch in verwaltung/baukasten/rahmen.php und verwaltung/kern/seite.php (Vorladen) und in verwaltung/umfrage-blatt.php (eigenes @font-face fuer das Druckblatt) - alle mitziehen. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("schriften/inter-latin-opsz-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("schriften/inter-latin-ext-opsz-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ===================================================================== Grundlagen ===================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* --- Der Scrollbalken am rechten Rand --------------------------------- Der Browser malt dort von Haus aus einen 15 Bildpunkte breiten Streifen mit eigener grauer Rinne. Auf einem schmalen Bildschirm nimmt der spuerbar Platz weg - und er sieht aus wie ein Bedienelement, obwohl er nur anzeigt, wie weit man schon unten ist. 31.08.2026: schmal, ohne Rinne, halb durchsichtig. 17.09.2026: DAS REICHTE NICHT. Die Rinne war nur durchsichtig, nicht weg - der Browser hielt am rechten Rand weiter 11 Bildpunkte frei (gemessen: Fenster 1.512, Seite 1.501). Dort schien das Weiss durch, neben dem blauen Fussbereich als eigener heller Streifen. Der Nutzer: „nicht seine eigene Linie ganz rechts, wo alles weiss ist, nur damit der Balken da langgehen kann", dazu „viel kuerzer" und „leicht dunkler, durchsichtiger". Mit CSS allein geht das nicht: Kein Browser legt den Balken der ganzen Seite ueber den Inhalt, solange er ihn selbst zeichnet. Deshalb am PC: den eigenen Balken der Seite ausblenden, und `script.js` zeichnet einen kurzen, der ueber dem Rand mitgleitet (Block „Der Rollbalken am PC"). Die Seite wird dadurch so breit wie das Fenster. 18.09.2026: JETZT AUF JEDEM GERAET. Der Nutzer: „Beim Rollbalken wollte ich die Veraenderung eigentlich mehr auf dem Handy haben, das war der wichtige Part." Bis dahin war er auf Maus und Trackpad beschraenkt. Er waehlte Fassung B von `rollbalken-probe.html`: klare Kanten, kein Ausbleichen an den Enden - und er verschwindet, solange niemand scrollt. AUF DEM HANDY ZEIGT ER NUR AN (`pointer-events: none`). Ein Finger, der ihn trifft, soll die Seite scrollen und ihn nicht aus Versehen verziehen. Mit Maus bleibt er greifbar. NUR FUER DIE GANZE SEITE (`html`). Breite Tabellen und Fenster, die in sich scrollen, behalten ihren schmalen Balken von unten. Steht bewusst HIER und nicht in der Gestaltung der Verwaltung: Diese Datei liegt in jeder Seite der Website, die Verwaltungsdatei nur im Bearbeitungsmodus. Sonst saehe der Balken beim Bearbeiten anders aus als auf der fertigen Seite. */ html { scrollbar-width: thin; /* Firefox */ scrollbar-color: rgba(26, 26, 26, .28) transparent; } ::-webkit-scrollbar { width: 8px; height: 8px; } /* Chrome, Safari, Edge */ ::-webkit-scrollbar-track { background: transparent; border: 0; } ::-webkit-scrollbar-corner { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(26, 26, 26, .28); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: rgba(26, 26, 26, .45); } @media (max-width: 700px) { ::-webkit-scrollbar { width: 4px; height: 4px; } } /* Erst wenn das Skript seinen Balken wirklich gebaut hat, setzt es `rollbalken-eigen` auf . Ohne Skript bleibt also der schmale Balken von oben - nie steht eine Seite ganz ohne da. */ html.rollbalken-eigen { scrollbar-width: none; } html.rollbalken-eigen::-webkit-scrollbar { width: 0; height: 0; display: none; } /* Der Balken selbst - Fassung B, vom Nutzer am 18.09.2026 gewaehlt. 4 Bildpunkte breit, 48 hoch, 4 vom Rand weg. Dort steht nie Text: Jede Seite laesst seitlich mindestens 20 Bildpunkte frei (`.bereich`). DER HELLE RING IST NICHT SCHMUCK, ER TRAEGT IHN. Nachgerechnet: Die Fuellung allein steht auf dem blauen Fussbereich bei 1,2 : 1 - man sieht sie schlicht nicht. Der Ring bei 55 % bringt sie dort auf 4,7 : 1 und auf dem dunklen Kopfstreifen auf 5,8 : 1. Auf Weiss traegt umgekehrt die Fuellung (3,7 : 1), und der Ring faellt nicht auf. Jeder Grund kommt so ueber die 3 : 1 aus WCAG 1.4.11. DREI SCHICHTEN STATT EINER (24.09.2026) --------------------------------------------------------------------- Sein Befund, zum zweiten Mal: Auf dem iPhone laeuft der Balken "abgehackt und unfluessig", am MacBook einwandfrei. Die Ursache liegt nicht in unserer Rechnung, sondern im iPhone selbst: Dort schiebt ein eigener Teil des Systems die Seite, und das Skript erfaehrt davon erst hinterher. Jede Position, die das Skript setzt, kommt also ein bis zwei Bilder zu spaet an - beim schnellen Wischen sieht man das als Ruckeln. Kein Skript kann das aufholen. Seit iOS 26.4 (Safari 26.4) kann der Browser einen Balken SELBST mitfuehren, im selben Takt wie die Seite (`animation-timeline: scroll()`, laut webkit.org "on the compositor thread"). Dafuer braucht es drei Schichten: .rollbalken-bahn die Strecke, auf der er laeuft - vom oberen Rand (plus 6 Luft) bis 54 ueber dem unteren (6 Luft + 48 Balkenhoehe). Steht still. Seit 24.09.2026 ueber `svh` - siehe dort. .rollbalken-laeufer genau so hoch wie die Bahn. Wird um 0 bis 100 % seiner EIGENEN Hoehe verschoben - also genau um die Bahnlaenge, ohne dass jemand misst. .rollbalken der sichtbare Balken, oben am Laeufer. Wer das nicht kann (aeltere iPhones, Firefox), bekommt dieselben drei Schichten, und `script.js` schiebt den Laeufer wie bisher. Aussehen und Mass sind in beiden Faellen gleich. */ .rollbalken-bahn { position: fixed; top: calc(var(--rollbalken-oben, 0px) + 6px); /* 24.09.2026: HOEHE STATT UNTERKANTE. Vorher `bottom: 54px` - damit hing die Laenge der Bahn an der sichtbaren Fensterhoehe, und die aendert sich auf dem iPhone jedes Mal, wenn Safaris Leisten beim Scrollen ein- oder ausfahren. Dann musste die Seite die Bahn neu vermessen, waehrend der Balken schon lief. `svh` ist die Hoehe MIT eingeblendeten Leisten und bleibt beim Scrollen gleich. Folge: Bei eingefahrenen Leisten endet die Bahn ein Stueck ueber dem unteren Rand - dort, wo sonst die Leiste liegt. Am PC sind `svh` und `vh` gleich; die erste Zeile gilt fuer Browser, die `svh` nicht kennen. */ height: calc(100vh - var(--rollbalken-oben, 0px) - 60px); height: calc(100svh - var(--rollbalken-oben, 0px) - 60px); right: 4px; width: 4px; /* Ueber der stehenbleibenden Kopfleiste (100) - am Seitenanfang liegt er sonst darunter und laesst sich nicht greifen. Unter dem grossen Bild (200) und den Fenstern der Verwaltung (ab 900). */ z-index: 150; /* Die Bahn ist so hoch wie das Fenster - sie darf nie einen Klick auf die Seite darunter abfangen. Nur der Balken selbst nimmt ihn. */ pointer-events: none; } .rollbalken-laeufer { height: 100%; will-change: transform; } html.rollbalken-selbst .rollbalken-laeufer { /* Die Reihenfolge ist Pflicht: Die Kurzschreibweise `animation` setzt `animation-timeline` zurueck. */ animation: rollbalken-lauf linear both; animation-timeline: scroll(root block); } @keyframes rollbalken-lauf { from { transform: translateY(0); } to { transform: translateY(100%); } } .rollbalken { position: absolute; top: 0; right: 0; pointer-events: auto; width: 4px; height: 48px; border-radius: 999px; /* 23.09.2026, sein Wunsch: "kann gerne noch ein kleines bisschen dunkelgrauer werden". Von 0,55 auf 0,72. Das verbessert nur - auf Weiss steigt die Fuellung von 3,7 : 1 auf 6,0 : 1, und auf dunklem Grund traegt ohnehin der helle Ring, der unveraendert bleibt. Die Untergrenze aus WCAG 1.4.11 ist 3 : 1. */ background: rgba(30, 33, 41, 0.72); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55); opacity: 1; transition: opacity 0.3s ease, width 0.15s ease-out, background-color 0.15s ease-out; } .rollbalken-bahn[hidden] { display: none; } /* ER VERSCHWINDET, SOLANGE NIEMAND SCROLLT (18.09.2026, seine Wahl). So machen es Handys von Haus aus. `script.js` setzt `ruht` knapp eine Sekunde nach der letzten Bewegung. */ .rollbalken.ruht { opacity: 0; } /* Nur mit Maus oder Trackpad laesst er sich greifen. Zum Treffen ist die Flaeche unsichtbar erweitert - 4 Bildpunkte trifft man sonst kaum; so sind es 24, die Untergrenze aus WCAG 2.5.8. */ @media (hover: hover) and (pointer: fine) { .rollbalken::before { content: ""; position: absolute; top: -8px; bottom: -8px; right: -6px; left: -14px; } .rollbalken:hover, .rollbalken.wird-gezogen { width: 7px; background: rgba(30, 33, 41, 0.88); } } /* Auf dem Handy zeigt er nur an: Ein Finger, der ihn trifft, soll die Seite scrollen. */ @media (hover: none) { .rollbalken { pointer-events: none; } } /* Waehrend des Ziehens wird auf der Seite nichts markiert. */ html.rollbalken-zieht, html.rollbalken-zieht * { user-select: none !important; } @media (prefers-reduced-motion: reduce) { .rollbalken { transition: none; } /* Ohne Uebergang wuerde er hart wegspringen - dann bleibt er lieber stehen. */ .rollbalken.ruht { opacity: 1; } } @media print { .rollbalken-bahn { display: none !important; } } /* UEBERZIEHEN AM SEITENRAND BLEIBT BLAU (23.09.2026) --------------------------------------------------------------------- Auf dem Handy laesst sich eine Seite ueber ihr Ende hinausziehen ("Gummiband"). Dabei wird die Flaeche HINTER der Seite sichtbar - und die war weiss. Am blauen Fussbereich schlug es dadurch in Weiss um; man sah, dass der Fuss nur ein Kasten ist. Diese Flaeche heisst in der Fachsprache "Canvas". Sie nimmt die Farbe von ; hat keine, nimmt sie die von . Bisher hatte nur eine - deshalb weiss. Jetzt bekommt das Dunkelblau des Fussbereichs, und behaelt sein Weiss fuer die Seite selbst. Es gibt bewusst nur EINE Farbe fuer oben und unten: Der Browser kennt fuer das Gummiband keine zwei. Dunkelblau ist die richtige Wahl - am Fuss trifft es die Farbe genau, und oben nimmt es dem weissen Kopfbereich die Blendwirkung, ueber die er sich beschwert hat. `min-height: 100vh` ist die Absicherung fuer sehr kurze Seiten: Waere kuerzer als der Bildschirm, stuende sonst unter dem Inhalt ein blauer Rest. */ html { background: var(--blau-dunkel); } body { margin: 0; min-height: 100vh; background: var(--hintergrund); color: var(--schrift); font-family: var(--schriftart); font-size: 1.0625rem; /* 17px */ line-height: 1.65; overflow-wrap: break-word; } img { max-width: 100%; height: auto; display: block; } /* Verweise sind blau. Faehrt der Mauszeiger darueber, werden sie orange - dasselbe Prinzip wie auf der Website des AGV Bau Saar. */ a { color: var(--blau); text-decoration: none; transition: color 0.25s ease-out, border-color 0.25s ease-out, background-color 0.25s ease-out; } /* NUR MIT MAUSZEIGER (24.09.2026) - gilt fuer alle Stellen mit diesem Vermerk. Das iPhone laesst den Zustand „Maus darueber" nach einer Beruehrung einfach stehen, bis man woanders hintippt. Sein Befund bei den Meldungen: „der Titel bleibt blau, bis ich woanders draufdruecke". Dasselbe traf verdeckt auch Verweise im Text, den Fussbereich, den Pfad oben, die Punkte am Startbild, „nach oben" und die Pfeile im Bildfenster. Am Handy antworten diese Stellen beim Antippen wie bisher (eigenes Orange oder der Tipp-Kasten des Browsers), nur kleben bleibt nichts mehr. Die Klappmenues oben (.navi) sind bewusst NICHT dabei: Auf einem Tablet oeffnen sie sich nur ueber genau diesen Zustand. */ @media (hover: hover) { a:hover { color: var(--orange-dunkel); text-decoration: underline; } } @media (prefers-reduced-motion: reduce) { /* `.termin` und sein Knopf sind am 20.09.2026 dazugekommen: Sie haben seitdem denselben weichen Uebergang wie die Kacheln - und gehoeren deshalb auch hierher. Wer im Geraet "Bewegung reduzieren" eingestellt hat, bekaeme sonst ausgerechnet bei den Terminen die einzige Bewegung der Seite. */ a, .knopf, .kachel, .karte, .termin, .termin__mehr, .partnerliste a, .sozial a, .burger span { transition: none; } .termin__mehr::before { transition: none; } } :focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; border-radius: 3px; } /* Springt man ueber einen Verweis wie "#anfahrt" an eine Stelle weiter unten, soll die Ueberschrift nicht unter der stehenbleibenden Kopfleiste verschwinden. Dieser Abstand haelt sie frei. */ /* Springt man auf eine Sprungmarke, soll sie nicht unter der Kopfleiste landen. `--balken-hoehe` setzt die Bearbeitungsoberflaeche auf die gemessene Hoehe ihres blauen Balkens; auf der fertigen Website gibt es ihn nicht, dort bleibt es bei den 6 rem wie bisher. */ [id] { scroll-margin-top: calc(var(--balken-hoehe, 0px) + 6rem); } h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 0.6em; font-weight: 700; } h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); } h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); } h3 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); } h4 { font-size: 1.1rem; } p { margin: 0 0 1.1em; } ul, ol { margin: 0 0 1.2em; padding-left: 1.3em; } li { margin-bottom: 0.35em; } hr { border: 0; border-top: 1px solid var(--linie); margin: 2.5rem 0; } /* Sprunglink fuer Tastatur- und Screenreader-Nutzung */ .sprunglink { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--blau); color: #fff; padding: 0.8rem 1.2rem; } .sprunglink:focus { left: 0; } /* ===================================================================== Raster / Container ===================================================================== */ .bereich { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); } .abschnitt { padding: var(--abstand) 0; } .abschnitt--grau { background: var(--flaeche-grau); } .abschnitt--schmal{ padding: calc(var(--abstand) * 0.6) 0; } /* Ueberschrift eines Abschnitts mit farbigem Strich darueber. Der Strich ist blau mit einem kurzen orangen Ende - ein leiser Hinweis auf die Zusammengehoerigkeit mit dem AGV Bau Saar. */ .titel-strich::before { content: ""; display: block; width: 56px; height: 4px; background: linear-gradient(90deg, var(--blau) 0 38px, var(--orange) 38px); border-radius: 2px; margin-bottom: 1.1rem; } .titel-strich--mitte { text-align: center; } .titel-strich--mitte::before { margin-left: auto; margin-right: auto; } .vorspann { font-size: 1.15rem; color: var(--schrift-grau); max-width: 62ch; margin-bottom: 2.5rem; } /* ===================================================================== Kopfbereich mit Navigation ===================================================================== */ .kopf { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.97); backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--linie); } .kopf__innen { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 76px; } .kopf__logo img { height: 52px; width: auto; } /* --- Hauptnavigation (ab Tablet sichtbar) ------------------------- */ .navi { display: none; } .navi ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.35rem; } .navi > ul > li { position: relative; } .navi a { display: block; padding: 0.6rem 0.85rem; color: var(--schrift); font-weight: 600; font-size: 0.98rem; border-radius: 6px; white-space: nowrap; } /* Grundsatz: Wo der Hintergrund orange wird, bleibt die Schrift schwarz. */ .navi a:hover { background: var(--orange-zart); color: var(--schrift); text-decoration: none; box-shadow: inset 0 -3px 0 var(--orange); border-radius: 6px 6px 0 0; } /* Die aktuell geoeffnete Seite bleibt blau markiert. */ .navi a[aria-current="page"] { color: var(--blau); box-shadow: inset 0 -3px 0 var(--blau); border-radius: 6px 6px 0 0; } .navi a[aria-current="page"]:hover { color: var(--blau); background: var(--blau-sehrhell); box-shadow: inset 0 -3px 0 var(--blau); } /* Untermenue als Klappliste */ .navi__unter { position: absolute; left: 0; top: 100%; min-width: 270px; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: 0 14px 34px rgba(20, 30, 60, 0.13); padding: 0.4rem; display: none !important; flex-direction: column; gap: 0; } .navi li:hover > .navi__unter, .navi li:focus-within > .navi__unter { display: flex !important; } .navi__unter a { font-weight: 500; font-size: 0.94rem; white-space: normal; } /* --- Burger-Schaltflaeche (nur auf kleinen Bildschirmen) ---------- 18.09.2026, Fassung C, vom Nutzer gewaehlt („am schoensten“): kein Rahmen mehr, drei blaue Striche, nach unten kuerzer, der letzte orange - der blau-orange Strich der Kacheln im Kleinen. Vorher ein heller Rahmen mit drei schwarzen Strichen, 46 x 42 px. Die Tippflaeche bleibt 48 x 48, auch ohne sichtbaren Rahmen. Geoeffnet werden alle drei gleich lang und blau und bilden ein Kreuz. */ .burger { display: inline-flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 5px; width: 48px; height: 48px; padding: 0 10px; background: none; border: 0; border-radius: 8px; cursor: pointer; } .burger:active { background: var(--orange-zart); } .burger span { display: block; width: 26px; height: 3px; border-radius: 2px; background: var(--blau-dunkel); transition: transform 0.15s ease-out, opacity 0.15s ease-out; } .burger span:nth-child(2) { width: 20px; } .burger span:nth-child(3) { width: 14px; background: var(--orange); } .burger[aria-expanded="true"] span { width: 26px; background: var(--blau-dunkel); } /* 8 px = Strichdicke 3 + Abstand 5: So treffen sich die Striche mittig */ .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* --- Ausklappmenue auf dem Handy ---------------------------------- */ /* DAS MENUE DECKT DIE SEITE ZU (23.09.2026) --------------------------------------------------------------------- Sein Befund: "Wenn ich auf den Navigationsbereich draufdruecke, werden mir zwar die Navigationsmoeglichkeiten angezeigt, aber der Bereich darunter ist immer noch die Seite, auf der ich gerade war. Ich kann dort dann quasi immer noch so halbseitig scrollen. Das soll bitte weg." Bisher war das Menue ein Kasten unter der Kopfleiste, hoechstens 72 % der Bildschirmhoehe hoch - darunter blieb die alte Seite stehen und liess sich weiterschieben. Jetzt reicht es bis zum unteren Rand und ist weiss hinterlegt; von der Seite darunter ist nichts mehr zu sehen. Dass sie sich auch nicht mehr schieben laesst, macht `script.js` (`menue-offen` auf ). `100dvh` statt `100vh`: Auf dem iPhone waechst und schrumpft die sichtbare Hoehe, wenn Safaris Leisten ein- und ausfahren. `vh` rechnet mit der GROESSTEN Hoehe - das Menue waere unten abgeschnitten. `dvh` rechnet mit der gerade wirklich sichtbaren. Aeltere Browser kennen es nicht und nehmen dann die Zeile darueber. */ .mobilnavi { display: none; border-top: 1px solid var(--linie); background: #fff; max-height: calc(100vh - 77px); max-height: calc(100dvh - 77px); min-height: calc(100vh - 77px); min-height: calc(100dvh - 77px); overflow-y: auto; overscroll-behavior: contain; padding: 0.75rem 0 1.5rem; } .mobilnavi.offen { display: block; } /* Die Seite hinter dem offenen Menue steht still. */ body.menue-offen { overflow: hidden; } .mobilnavi ul { list-style: none; margin: 0; padding: 0; } .mobilnavi a { display: block; padding: 0.7rem 0.75rem; color: var(--schrift); font-weight: 600; border-bottom: 1px solid var(--linie); border-radius: 8px; transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out; } /* Beim Antippen dieselbe Hervorhebung wie am Rechner: orange Flaeche mit orangem Rahmen, Schrift bleibt schwarz. Der Rahmen entsteht ueber einen Schatten nach innen, damit beim Antippen nichts verspringt. */ .mobilnavi a:hover, .mobilnavi a:active, .mobilnavi a:focus-visible { background: var(--orange-zart); box-shadow: inset 0 0 0 1px var(--orange); color: var(--schrift); text-decoration: none; } /* Die gerade geoeffnete Seite bleibt blau markiert. */ .mobilnavi a[aria-current="page"] { color: var(--blau); } .mobilnavi a[aria-current="page"]:hover, .mobilnavi a[aria-current="page"]:active { background: var(--blau-sehrhell); box-shadow: inset 0 0 0 1px var(--blau); color: var(--blau); } .mobilnavi .mobilnavi__unter a { font-weight: 400; font-size: 0.95rem; padding-left: 1.1rem; color: var(--schrift-grau); border-bottom: 1px dashed var(--linie); } /* Ab 1.008 Bildpunkten Fensterbreite steht die Menuezeile, darunter die drei Striche (29.10.2026, Punkt 86; vorher 992). Mit Inter ist die Zeile der Auslieferung 804 Bildpunkte breit und passt erst ab 999 neben das Logo (mit der Geraeteschrift 795, ab 992). Die 9 Bildpunkte dazwischen sind Reserve fuer Windows ohne Skript, wo der Rollbalken der Seite 8 davon nimmt. Nachgemessen bei 1.008: 812 frei, die Zeile braucht 804. Die Zahl steht noch zweimal: bei `.navi-rahmen` weiter unten und in verwaltung/gestaltung.css (`.navi-zusatz`) - immer alle drei aendern. */ @media (min-width: 1008px) { .navi { display: block; } .burger { display: none; } .mobilnavi { display: none !important; } } /* DIE MENÜZEILE LÄSST SICH ZUR SEITE SCHIEBEN (05.10.2026, Runde 2) --------------------------------------------------------------------- Seit sich im Hauptmenü neue Oberpunkte anlegen lassen, ist die Zeile nicht mehr immer gleich lang - neben dem Logo ist aber nur Platz für höchstens 953 Bildpunkte. Seine Entscheidung: „dass man das Menü einfach durchscrollen kann … natürlich mit so einer Abgrauung ganz rechts, damit man sieht, dass man scrollen kann, oder wie wir das sonst immer gemacht haben.“ Passt die Zeile, ändert sich nichts. Passt sie nicht: - Sie lässt sich schieben - mit dem Finger, mit zwei Fingern auf dem Tastfeld, mit der Tabulatortaste. - Wo es weitergeht, blendet ihr Rand ins Weiße aus, und dort steht ein Pfeil. Der Pfeil ist für die Maus: Mit einem gewöhnlichen Mausrad kommt man in einer Zeile nicht zur Seite. Ein Klick schiebt ein gutes Stück weiter. Beides - Rand und Pfeil - ist EIN Knopf. Er steht in der Seite (baukasten/rahmen.php) und ist nur zu sehen, solange es dort weitergeht. Kein Rollbalken unter der Zeile: Er stünde mitten im Kopfbereich und machte ihn höher. Dafür der Pfeil. `flex: none` am Logo: Sonst schöbe eine zu lange Zeile zuerst das Logo zusammen (nachgemessen am 05.10.2026: Logo 0 Bildpunkte breit) und ließe sich erst danach schieben. 6 Bildpunkte Rand rundum, außen wieder abgezogen: Der Kasten schneidet ab, was über ihn hinausragt - auch den blauen Rahmen, den ein Menüpunkt mit der Tabulatortaste bekommt (3 breit, 2 Abstand). Mit dem Rand hat der Rahmen Platz, und die Zeile steht trotzdem, wo sie stand. Der Rand sitzt an der LISTE, nicht am Kasten, und die Liste ist so breit wie ihr Inhalt (`max-content`): Den rechten Rand eines Kastens zählt der Browser beim Schieben nicht mit - ganz nach rechts geschoben stand der letzte Punkt sonst 6 Bildpunkte zu weit rechts (nachgemessen). Die Klappliste unter einem Menüpunkt (`.navi__unter` oben) vertrüge sich damit nicht - sie würde ebenfalls abgeschnitten. Der Baukasten baut seit August keine mehr; wer sie zurückholt, muss das hier lösen. DER RAHMEN UM DIE ZEILE (06.10.2026). Die Zeile steht in `.navi-rahmen`, und die zwei Pfeile liegen darin an seinen Enden - über der Zeile, nicht daneben: Tauchte einer daneben auf, würde die Zeile schmaler und rutschte unter dem Finger weg. Einen Tag lang stellte script.js die Pfeile nach Maß hin; das Maß kam auf ganze Bildpunkte gerundet, die Zeile liegt aber oft auf einem halben. Sein Befund: „dass auf der linken Seite neben dem Pfeil noch ein kleiner Spalt ist, wo das Durchgescrollte angezeigt wird“. Jetzt gibt es nichts mehr zu messen. Jeder Pfeil reicht dazu einen Bildpunkt über das Ende des Rahmens hinaus (dort ist der Kopfbereich ohnehin weiß) - zwei Flächen, die sich nur berühren, zeigen bei krummer Vergrößerung sonst wieder eine Naht. Der Rahmen bekommt, was vorher die Zeile selbst hatte: den Platz neben dem Logo und die 6 Bildpunkte, die außen wieder abgezogen werden. Eine Zeile OHNE Rahmen (buchung.php hat ihren eigenen kleinen Kopf) behält beides wie bisher. */ .kopf__logo { flex: none; } .navi-rahmen { display: none; position: relative; min-width: 0; margin: -6px; } @media (min-width: 1008px) { .navi-rahmen { display: block; } } .navi { min-width: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-behavior: smooth; /* Ein Menüpunkt, den die Tabulatortaste holt, soll nicht unter dem ausblendenden Rand stehen bleiben. */ scroll-padding: 0 3.75rem; margin: -6px; scrollbar-width: none; /* Firefox */ } .navi-rahmen > .navi { margin: 0; } .navi::-webkit-scrollbar { display: none; } /* Chrome, Safari, Edge */ .navi > ul { width: max-content; padding: 6px; } .navi-pfeil { position: absolute; z-index: 1; top: 0; bottom: 0; /* 3,5 rem für Rand und Pfeil, dazu der eine Bildpunkt nach außen. */ width: calc(3.5rem + 1px); display: flex; align-items: center; padding: 0; border: 0; border-radius: 0; -webkit-appearance: none; appearance: none; color: var(--blau-dunkel); cursor: pointer; } .navi-pfeil[hidden] { display: none; } .navi-pfeil--rechts { right: -1px; padding-right: 1px; justify-content: flex-end; background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 58%); } .navi-pfeil--links { left: -1px; padding-left: 1px; justify-content: flex-start; background: linear-gradient(to left, rgba(255, 255, 255, 0), #fff 58%); } /* Gezeichnet statt geschrieben: Es sind die beiden Pfeile der Bilderschau (weiter unten, `.bildschau__zeichen`) - dieselbe Klasse, dieselben zwei Zeichnungen, dort nur einmal eingetragen. Hier steht allein die Größe. */ .navi-pfeil .bildschau__zeichen { width: 1.5rem; height: 1.5rem; } /* Orange heißt auf dieser Website „hier kann man klicken“ - nur mit Mauszeiger, siehe a:hover. */ @media (hover: hover) { .navi-pfeil:hover { color: var(--orange); } } @media (prefers-reduced-motion: reduce) { .navi { scroll-behavior: auto; } } /* ===================================================================== Startbild (Hero) ===================================================================== */ .hero { position: relative; color: #fff; background: var(--blau-dunkel); min-height: 62vh; display: flex; align-items: center; } /* --------------------------------------------------------------------- Die Startbilder und ihr Schleier Jedes Bild liegt als eigene Ebene im Abschnitt, mit seinem eigenen Schleier darueber (Auswahl siehe „Bild im Kopfstreifen und die Schleier"). Bei mehreren werden sie ineinander geblendet. Bis zum 17.09.2026 lag EIN fester blauer Verlauf ueber allen Bildern (`.hero::after`). Der Nutzer wollte „nicht jedes Bild blau" und je Bild selbst waehlen - deshalb gehoert der Schleier jetzt zum Bild. Warum Ebenen und kein Bildwechsel am Hintergrund: Ein neu gesetztes Hintergrundbild laedt erst beim Wechsel - man saehe kurz nichts. Die Ebenen sind alle da und werden nur ein- und ausgeblendet. Die Schriftfarbe haengt am Schleier (`ton-hell`, `ton-dunkel`, `ton-schatten` am Abschnitt). Beim Wechsel setzt `script.js` sie um. --------------------------------------------------------------------- */ .hero__bilder { position: absolute; inset: 0; } .hero__bild { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease-in-out; } .hero__bild.ist-da { opacity: 1; } /* Die Punkte sagen, wie viele Bilder es gibt und bei welchem man ist. Sie sind echte Schaltflaechen - anklickbar und mit der Tastatur erreichbar. */ .hero__punkte { position: absolute; bottom: 1.1rem; left: 0; right: 0; z-index: 2; display: flex; justify-content: center; gap: 0.55rem; } .hero__punkt { /* Kleiner und gefuellt statt hohl: Die Punkte sagen nur, wo man ist - sie sollen nicht mit den Schaltflaechen darueber um Aufmerksamkeit streiten. Halbdurchsichtiges Weiss laesst das Bild durchscheinen und traegt trotzdem auf hellen wie dunklen Stellen. */ width: 0.6rem; height: 0.6rem; padding: 0; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.42); cursor: pointer; transition: 0.18s; } .hero__punkt.ist-da { background: rgba(255, 255, 255, 0.92); } /* Orange zeigt, wo der Zeiger liegt - wie ueberall auf der Seite. */ /* Orange bleibt: Es zeigt, wo der Zeiger liegt - wie ueberall sonst. */ .hero__punkt.zeiger-aktiv { background: var(--orange); } @media (hover: hover) { .hero__punkt:hover { background: var(--orange); } } /* nur mit Mauszeiger, siehe a:hover */ .hero__punkt:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } /* Wer im Betriebssystem eingestellt hat, dass Bewegung ihn stoert, bekommt keinen selbsttaetigen Wechsel - das Skript prueft das. Die Ueberblendung wird hier zusaetzlich abgeschaltet. */ @media (prefers-reduced-motion: reduce) { .hero__bild { transition: none; } } /* padding-block, damit der seitliche Rand von .bereich erhalten bleibt */ .hero__innen { position: relative; z-index: 1; padding-block: clamp(3rem, 9vw, 6rem); } .hero h1 { color: #fff; margin-bottom: 0.5rem; } .hero__vorzeile { display: inline-block; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; /* Kraeftig genug, dass es durch den blauen Schleier darunter wirklich orange wirkt und nicht braeunlich. */ background: rgba(255, 98, 0, 0.78); border: 1px solid rgba(255, 128, 46, 0.9); border-radius: 999px; padding: 0.35rem 0.9rem; margin-bottom: 1.4rem; } .hero__leistungen { list-style: none; padding: 0; margin: 1.6rem 0 2.2rem; display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; font-size: clamp(1.05rem, 2vw, 1.3rem); font-weight: 600; } .hero__leistungen li { display: flex; align-items: center; gap: 0.6rem; margin: 0; } .hero__leistungen li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #fff; flex: none; } /* AUF DEM HANDY UNTEREINANDER (23.09.2026) --------------------------------------------------------------------- Nachgemessen bei 390 px (sein iPhone 13): "Ueberbetriebliche Ausbildung" ist 244 px breit und fuellt die Zeile allein. Die beiden kurzen rutschen dadurch NEBENEINANDER in die zweite Zeile (181 px und 129 px, zusammen 342 px - es passt eben gerade). Das Ergebnis sieht aus wie ein Versehen: ein Punkt oben, zwei darunter. Unter 700 px steht deshalb jeder Punkt in einer eigenen Zeile. Am PC bleiben sie nebeneinander, dort ist genug Platz und die Reihe wirkt als eine Aussage. `align-items: flex-start` ist noetig, weil ein Listenpunkt selbst ein Flex-Kasten ist und sonst auf volle Breite gezogen wuerde. */ @media (max-width: 699px) { .hero__leistungen { flex-direction: column; align-items: flex-start; gap: 0.5rem; margin: 1.1rem 0 1.5rem; } } /* WARUM DIE ABSTAENDE DARUEBER UND DARUNTER SCHRUMPFEN Drei Zeilen statt zwei machen die Liste 34 px hoeher (65 -> 99 px). Die holt der kleinere Abstand um die Liste herum wieder herein (vorher 1,6 rem oben und 2,2 rem unten). Nachgemessen, beide Faelle auf derselben Seite: 390 x 844 (sein iPhone 13): Startbereich 523 px vorher, 523 px jetzt - genau ausgeglichen. 320 x 536 (alter Android): 574 px vorher, 551 px jetzt - dort brach die Liste ohnehin schon auf drei Zeilen um, also 23 px gewonnen. Die Schriftgroesse bleibt unangetastet. */ /* AM HANDY OBEN UND UNTEN NUR HALB SO VIEL LEERES BILD (27.09.2026) --------------------------------------------------------------------- SEIN WUNSCH: Ueber dem Text und unter den Knoepfen sieht man „ausser dem Bild selber nichts Wichtiges“ - beide Bereiche um die Haelfte kuerzen, dann ist sichtlich mehr Platz. Der leere Streifen hat zwei Teile: den Innenabstand (48 px) und, auf hohen Handys, den Rest, den die Mindesthoehe 62 vh dazugibt (der Inhalt steht mittig). Beides wird halbiert: - Innenabstand 24 statt 48 px. - Mindesthoehe: halb Inhalt, halb 62 vh - gerechnet mit dem ueblichen Inhalt von rund 330 px (Vorzeile, Titel, drei Punkte, Knoepfe): 165 px + 31 vh. Nachgemessen, leer oben und unten je: 320 x 536 (alter Android): 48 -> 24 px 360 x 740 (ueblich): 66 -> 33 px 390 x 844 (sein iPhone 13): 98 -> 49 px (Startbild 523 -> 425 px) Am PC und auf dem Tablet bleibt alles wie es war. */ @media (max-width: 559px) { .hero { min-height: calc(165px + 31vh); } .hero__innen { padding-block: 1.5rem; } } /* ===================================================================== Schaltflaechen ===================================================================== */ /* `font-family: inherit` seit 27.09.2026 (Gerätecheck, Punkt 16, sein Ja): Ein