/* ========================================================================== Stadler Prüfpumpen – gemeinsame Basis für alle Versionen Reset · Barrierefreiheit · Scroll-Einblendungen · Anfrage-Dialog Farben/Schriften kommen aus den Variablen der jeweiligen Version. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { /* Die Seite ist nur hell gestaltet: erzwungene Dunkelmodi (Chrome „Automatischer dunkler Modus für Webinhalte“, Samsung Internet) sollen sie nicht umfärben – sonst bleiben z. B. Menü-Symbol und X dunkelblau auf fast schwarzem Header */ color-scheme: only light; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h, 5rem) + 1.25rem); } body { margin: 0; min-height: 100vh; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; } /* :where() hält die Spezifität bei 0, damit Komponenten-Klassen Abstände frei setzen können */ :where(ul[class], ol[class]) { margin: 0; padding: 0; list-style: none; } img, svg, picture { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } /* E-Mail-Adressen und Rufnummern im Fließtext nicht zerreißen („stadler-“ | „birkenau@…“, „+49“ | „(0)6201 …“): sie rücken als Ganzes in die nächste Zeile und passen ab 320 px Fensterbreite überall hinein. Schaltflächen mit mailto-Ziel tragen eine Klasse und brechen weiter um; auf noch schmaleren Geräten bricht auch die Adresse um, statt seitlich überzustehen. */ a[href^="mailto:"]:not([class]), a[href^="tel:"]:not([class]) { white-space: nowrap; } @media (max-width: 319px) { a[href^="mailto:"]:not([class]), a[href^="tel:"]:not([class]) { white-space: normal; } } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; border: 0; background: none; padding: 0; } address { font-style: normal; } [hidden] { display: none !important; } :focus-visible { outline: 3px solid var(--focus, #ff6300); outline-offset: 3px; border-radius: 2px; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Icon-Sprite am Anfang von : aus dem Textfluss genommen. Als Klasse statt style-Attribut, weil die Content-Security-Policy (style-src 'self') keine style-Attribute zulässt */ .icon-sprite { position: absolute; } .skip-link { position: fixed; top: .75rem; left: .75rem; z-index: 200; padding: .75rem 1.1rem; border-radius: 4px; background: var(--dlg-accent, #ff6300); color: #fff; font-weight: 600; transform: translateY(-200%); transition: transform .2s ease; } .skip-link:focus { transform: none; } /* ---------- Scroll-Sperre: offenes Menü oder offener Anfrage-Dialog (site.js) ---------- Die Seite dahinter bleibt stehen. Verschwindet dabei eine klassische Scrollleiste, hält ein gleich breiter Innenabstand die Seite an ihrem Platz (--scrollbar-gap, von site.js gemessen; bei Overlay-Scrollleisten 0). */ html.scroll-lock { overflow: hidden; } html.scroll-lock body { padding-right: var(--scrollbar-gap, 0px); } /* ---------- Einblenden beim Scrollen (nur mit JavaScript aktiv) ---------- */ .js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1) var(--reveal-delay, 0ms), transform .7s cubic-bezier(.2, .7, .2, 1) var(--reveal-delay, 0ms); } .js [data-reveal].is-visible { opacity: 1; transform: none; } /* Sicherheitsnetz: lädt site.js nicht, werden die Inhalte nach kurzer Zeit trotzdem sichtbar */ .js:not(.reveal-ready) [data-reveal] { animation: reveal-fallback 0s 3s forwards; } /* Nach einem Sprachwechsel (lang-switched, gesetzt vom Inline-Skript im ): alles sichtbar und ohne Übergang, bis site.js die schon gesehenen Abschnitte kennt – sie blenden kein zweites Mal ein, nur die übrigen später beim Scrollen */ .js.lang-switched:not(.reveal-ready) [data-reveal] { opacity: 1; transform: none; transition: none; } @keyframes reveal-fallback { to { opacity: 1; transform: none; } } /* ---------- Sprachumschalter: DE | EN | FR ---------- Drei normale Links in der Typografie der Vorzeilen (klein, versal, gesperrt), durch feine Striche getrennt, über jedem Kürzel seine Flagge. Die aktive Sprache trägt aria-current und steht in Orange, darunter der orange Strich wie beim aktuellen Menüpunkt; die anderen stehen in gedecktem Blau, bei ihnen fährt der Strich beim Überfahren ein. Flaggen nur per CSS: scripts/check_site.py liest die Links als reinen Text (ein Tag darin bräche die Prüfung). Sie liegen als Dateien in assets/img/flaggen/, weil die CSP (_headers) keine data:-Bilder erlaubt. Der Link füllt die Höhe des Umschalters aus, Flagge und Kürzel stehen darin senkrecht mittig, der Strich am unteren Rand – im Header ist der Umschalter so hoch wie die Menüpunkte, die Striche sitzen dort auf einer Höhe (style.css). */ .lang-switch { display: flex; } .lang-switch li { display: flex; align-items: center; } .lang-switch li + li::before { content: ""; width: 1px; height: 2rem; /* über Flagge und Kürzel */ margin-inline: .6rem; background: color-mix(in srgb, var(--muted, #566a87) 40%, transparent); } .lang-switch a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; align-self: stretch; padding-block: .5rem; font-size: .8125rem; font-weight: 700; line-height: 1.4; letter-spacing: .1em; color: var(--muted, #566a87); transition: color .2s ease; } /* Flagge: einheitlich 3 : 2, schmaler als das Kürzel – der Umschalter wird dadurch nicht breiter */ .lang-switch a::before { content: ""; width: 1.125rem; height: .75rem; border-radius: 2px; background: center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(11, 53, 112, .16); /* feiner Rand: weiße Streifen verschwänden sonst auf Weiß */ } .lang-switch a[hreflang="de"]::before { background-image: url("../img/flaggen/de.svg"); } .lang-switch a[hreflang="en"]::before { background-image: url("../img/flaggen/gb.svg"); } .lang-switch a[hreflang="fr"]::before { background-image: url("../img/flaggen/fr.svg"); } .lang-switch a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px; background: var(--orange, #ff6300); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2, .7, .2, 1); } .lang-switch a:hover { color: var(--navy, #0b3570); } .lang-switch a[aria-current] { color: var(--orange-ink, #e05200); } .lang-switch a:hover::after, .lang-switch a[aria-current]::after { transform: scaleX(1); } /* ---------- Anfrage-Dialog ---------- */ .inquiry { --_bg: var(--dlg-bg, #fff); --_ink: var(--dlg-ink, #0b3570); --_text: var(--dlg-text, #1d3760); --_muted: var(--dlg-muted, #566a87); --_line: var(--dlg-line, #cdd5e2); --_field: var(--dlg-field, #fff); --_accent: var(--dlg-accent, #ff6300); --_accent-hover: var(--dlg-accent-hover, #ee5700); --_accent-ink: var(--dlg-accent-ink, #e05200); /* kleine orange Schrift auf Weiß */ --_radius: var(--dlg-radius, 6px); width: min(100% - 2rem, 42rem); max-height: min(100dvh - 2rem, 52rem); padding: 0; border: 0; border-radius: calc(var(--_radius) * 1.5); background: var(--_bg); color: var(--_text); box-shadow: 0 30px 80px -20px rgba(4, 18, 44, .55); overflow: auto; overscroll-behavior: contain; } .inquiry::backdrop { background: rgba(6, 22, 52, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .inquiry[open] { animation: inquiry-in .28s cubic-bezier(.2, .7, .2, 1); } @keyframes inquiry-in { from { opacity: 0; transform: translateY(14px) scale(.985); } } .inquiry-panel { position: relative; padding: clamp(1.5rem, 4vw, 2.5rem); border-top: 4px solid var(--_accent); } .inquiry-close { position: absolute; top: .9rem; right: .9rem; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; color: var(--_muted); transition: background-color .2s, color .2s; } .inquiry-close:hover { background: color-mix(in srgb, var(--_ink) 8%, transparent); color: var(--_ink); } .inquiry-close svg { width: 1.25rem; height: 1.25rem; } .inquiry-eyebrow { margin-bottom: .5rem; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--_accent-ink); } .inquiry-title { font-family: var(--dlg-font-head, inherit); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.85rem); line-height: 1.2; letter-spacing: -.01em; color: var(--_ink); padding-right: 2.5rem; } .inquiry-lead { margin-top: .6rem; color: var(--_muted); line-height: 1.6; } /* Jedes Feld in einer eigenen Zeile (Wunsch des Auftraggebers) */ .inquiry-form { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.5rem; } .inquiry-form .field { display: grid; gap: .4rem; } /* Fangfeld gegen automatische Eingaben: liegt außerhalb des sichtbaren Bereichs, bleibt aber Teil des Formulars (Bots füllen es aus, der Worker verwirft solche Anfragen) – bewusst kein display:none, das erkennen viele Bots */ .inquiry-form .field--trap { position: absolute; top: 0; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .inquiry-form label { font-size: .82rem; font-weight: 600; color: var(--_ink); } .inquiry-form .req { color: var(--_accent-ink); } .inquiry-form input[type="text"], .inquiry-form input[type="email"], .inquiry-form input[type="tel"], .inquiry-form select, .inquiry-form textarea { width: 100%; padding: .75rem .9rem; border: 1px solid var(--_line); border-radius: var(--_radius); background: var(--_field); color: var(--_text); font-size: 1rem; line-height: 1.4; transition: border-color .15s, box-shadow .15s; } .inquiry-form textarea { min-height: 7rem; resize: vertical; } .inquiry-form input:focus, .inquiry-form select:focus, .inquiry-form textarea:focus { outline: none; border-color: var(--_accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--_accent) 25%, transparent); } /* Telefon: Ländervorwahl neben der Rufnummer. Ein natives unsichtbar (opacity 0) über dem gestylten Feld .phone-code-value, das site.js mit der gewählten Vorwahl füllt; Klick, Tastatur und Screenreader bedienen weiterhin das echte kann kein ::after tragen – der Pfeil sitzt deshalb am umgebenden .select und lässt Klicks durch. */ .inquiry-form .select { position: relative; display: grid; /* ohne Zeilenkasten: .select ist genau so hoch wie das Feld, der Pfeil sitzt mittig */ } .inquiry-form .select select { -webkit-appearance: none; appearance: none; padding-inline: .8rem 2rem; /* rechts Platz für den Pfeil */ text-overflow: ellipsis; /* lange Einträge (Französisch) enden vor dem Pfeil mit „…“ (Safari schneidet nur ab) */ cursor: pointer; } .inquiry-form .select::after { position: absolute; top: 50%; right: calc(.8rem + 1px); margin-top: -.35rem; /* wie beim Vorwahl-Feld: gedrehtes Quadrat 2 px über der Mitte */ pointer-events: none; } .inquiry-form .consent { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; font-size: .85rem; font-weight: 400; line-height: 1.5; color: var(--_muted); } .inquiry-form .consent input { width: 1.1rem; height: 1.1rem; margin: .15rem 0 0; accent-color: var(--_accent); } .inquiry-form .consent a { color: var(--_ink); text-decoration: underline; text-underline-offset: 2px; } /* Sicherheitsprüfung (Cloudflare Turnstile): site.js zeichnet das Widget in .turnstile. Die Fläche ist so hoch wie das Widget (65px), damit das Formular beim Erscheinen nicht springt; solange sie leer ist, steht der Ladehinweis darin (data-loading-label), nach einem Fehler der aus data-failed-label (Klasse is-failed). */ .inquiry-form .field--captcha { gap: .5rem; } .turnstile { display: grid; align-items: center; min-height: 65px; } .turnstile:empty { padding: 0 .9rem; border: 1px dashed var(--_line); border-radius: var(--_radius); font-size: .8rem; color: var(--_muted); } .turnstile:empty::before { content: attr(data-loading-label); } .turnstile.is-failed:empty::before { content: attr(data-failed-label); } /* Hinweis unter dem Widget (site.js füllt ihn aus data-text, wenn die Prüfung noch aussteht) */ .inquiry-hint { font-size: .85rem; line-height: 1.5; color: #b42318; } .inquiry-hint:empty { display: none; } .inquiry-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.25rem; margin-top: .25rem; } .inquiry-submit { display: inline-flex; align-items: center; gap: .85rem; padding: .9rem 1.5rem; border-radius: var(--_radius); background: var(--_accent); color: #fff; font-weight: 600; transition: background-color .2s, transform .2s; } .inquiry-submit:hover { background: var(--_accent-hover); } .inquiry-submit svg { width: 1.25rem; height: 1.25rem; transition: transform .2s; } .inquiry-submit:hover svg { transform: translateX(4px); } /* Sende-Zustand: site.js sperrt die Schaltfläche und zeigt ihr data-busy-label */ .inquiry-form[aria-busy="true"] { opacity: .7; } .inquiry-submit:disabled { cursor: progress; } .inquiry-submit:disabled:hover { background: var(--_accent); } .inquiry-submit:disabled:hover svg { transform: none; } /* Zweitrangige Schaltfläche (z. B. Ausweg über das E-Mail-Programm) */ .inquiry-submit--secondary { background: transparent; color: var(--_ink); box-shadow: inset 0 0 0 1px var(--_line); } .inquiry-submit--secondary:hover { background: color-mix(in srgb, var(--_ink) 6%, transparent); } .inquiry-note { flex: 1 1 14rem; font-size: .8rem; line-height: 1.5; color: var(--_muted); } .inquiry-success { margin-top: 1.5rem; display: grid; justify-items: start; gap: .9rem; } .inquiry-success .badge { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: color-mix(in srgb, var(--_accent) 14%, transparent); color: var(--_accent); } .inquiry-success .badge svg { width: 1.5rem; height: 1.5rem; } .inquiry-success h3 { font-family: var(--dlg-font-head, inherit); font-size: 1.25rem; color: var(--_ink); } .inquiry-success p { line-height: 1.6; color: var(--_muted); } .inquiry-success a { color: var(--_ink); text-decoration: underline; text-underline-offset: 2px; } .inquiry-success .inquiry-actions { margin-top: .35rem; } .inquiry-success a.inquiry-submit { color: #fff; text-decoration: none; } .inquiry-success a.inquiry-submit--secondary { color: var(--_ink); } /* Fehlermeldung nach gescheitertem Versand: gleiche Form wie die Bestätigung, mit Warnfarbe */ .inquiry-success--error .badge { background: color-mix(in srgb, #b42318 12%, transparent); color: #b42318; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } /* Übergänge ganz abschalten (nicht nur verkürzen): ein pauschales „transition-duration“ würde auf allen Elementen „transition: all“ aktivieren – geerbte Eigenschaften wie visibility bleiben dann in Chrome hängen. */ *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; } .js [data-reveal] { opacity: 1; transform: none; } }