/* ============================================================
Fachzentrum für akustische Messtechnik – Mobile
Wird als LETZTES Stylesheet geladen und korrigiert bzw.
ersetzt gezielt einzelne Regeln aus styles.css und
scroll-scenes.css. Alles hier steht in Media Queries, am
Desktop ändert die Datei nichts.
Aufbau
0 Gesamtmassstab – Dokumentzoom auf dem Telefon aufheben
1 Seitenrand als Variable
2 Wischbahnen (gemeinsames Verhalten)
3 Punkte-Anzeige unter den Wischbahnen
4 Startseite – Mitgliedschaften als 2x2-Raster
5 Startseite – Leistungen als wischbare Spalten
6 Startseite – Referenzen als Wischbahn
7 Leistungsseiten – Merkmale als Wischbahn
8 Unternehmen – Mitgliedschaften zweispaltig
9 Aktuelles – Beiträge als kompakte Zeilen
9b Team – Bild neben Name, Lebenslauf darunter
10 Hero-Szenen – Text steht unten, wo der Verlauf ihn trägt
10b Zeitstrahl – Filmband wieder auf die Bildschirmbreite
10c Pegelregler – Richtwertmarken auf zwei Zeilen
10d Rollenszene – Rastpunkte nicht mehr verbindlich
11 Lesbarkeit – Schriftgrößen, Zeilen, Abstände
12 Bedienbarkeit – Tippflächen, Formulare
13 Fuß und Navigation – Menü über die volle Höhe
14 Touch statt Zeiger – klebende Hover-Zustände abstellen
============================================================ */
/* ------------------------------------------------------------
0 · GESAMTMASSSTAB
Am Desktop wird das ganze Dokument auf 80 % skaliert: mehr
Inhalt pro Bildschirm, ruhigeres Bild. Die Regel stand zuerst
nur in scroll-scenes.css und fehlte damit auf den Seiten ohne
Szenen (Team, FAQ, Links, Impressum, Datenschutz, Danke), die
dann sichtbar groesser liefen als der Rest. Deshalb steht sie
hier noch einmal: Diese Datei laden alle Seiten, und sie ist
die letzte in der Reihe, also gilt ein Wert fuer alle.
Auf dem Telefon kehrt sich die Rechnung um (siehe unten).
Der Zoom wirkt zweifach: die Schrift schrumpft (16px Fliesstext
erscheinen als 13px, die 11px-Auszeichnungen als 9px), und das
Layout bekommt 457px Breite in einen 375px-Bildschirm gerechnet.
Beides zusammen war der Hauptgrund, warum die Seite mobil klein
und gedrängt wirkte.
Ab hier gilt auf schmalen Geräten wieder der Massstab 1:1. Die
Bildschirmhöhen müssen mit: --vh-voll und --vh-rest teilen in
scroll-scenes.css durch .82, weil vh-Einheiten den Zoom nicht
kennen - ohne Zoom ist diese Korrektur falsch und die Szenen
ragten um ein Fünftel über den Bildschirm hinaus.
Die Media Queries selbst ändern sich dadurch nicht: sie lösen
ohnehin gegen den echten Bildschirm auf, nicht gegen die
skalierte Fläche.
------------------------------------------------------------ */
html { zoom: var(--zoom, 1); }
:root {
--zoom: .8;
--vh-voll: calc(100vh / .8);
--vh-rest: calc(100vh / .8 - var(--nav-h, 78px));
}
@supports (height: 100svh) {
:root {
--vh-voll: calc(100svh / .8);
--vh-rest: calc(100svh / .8 - var(--nav-h, 78px));
}
}
@media (max-width: 860px) {
:root {
--zoom: 1;
--vh-voll: 100vh;
--vh-rest: calc(100vh - var(--nav-h));
}
@supports (height: 100svh) {
:root {
--vh-voll: 100svh;
--vh-rest: calc(100svh - var(--nav-h));
}
}
}
/* ------------------------------------------------------------
1 · SEITENRAND
Der Rand steckte an rund einem Dutzend Stellen als feste 30px
im Satz. Als Variable lässt er sich auf schmalen Geräten in
einem Zug verkleinern - das sind 20px mehr Textbreite pro
Zeile, was bei 375px Bildschirm spürbar ist. Gleichzeitig ist
er der Bezugspunkt für den Randabfluss der Wischbahnen.
------------------------------------------------------------ */
:root { --wrap-pad: 30px; }
@media (max-width: 600px) { :root { --wrap-pad: 20px; } }
.wrap { padding-left: var(--wrap-pad); padding-right: var(--wrap-pad); }
.scene--full .scene-copy .wrap { padding-left: var(--wrap-pad); padding-right: var(--wrap-pad); }
.lhead-cap { padding-left: var(--wrap-pad); padding-right: var(--wrap-pad); }
@media (max-width: 600px) {
.scene-prog { left: var(--wrap-pad); }
}
/* ------------------------------------------------------------
2 · WISCHBAHNEN
Ein Raster, das untereinander steht, wird auf dem Telefon zur
endlosen Bahn: sechs Referenzkarten waren fast 2000px hoch.
Statt zu stapeln, legen wir dieselben Karten nebeneinander und
lassen sie wischen - dasselbe Verfahren, das das Beitrags-
karussell schon benutzt (echtes Scrollen mit Snap-Punkten,
deshalb funktionieren Wischen, Tastatur und Trackpad von
selbst).
Der negative Aussenabstand hebt den Seitenrand des .wrap auf,
der Innenabstand setzt ihn innerhalb der Bahn wieder ein:
dadurch stehen die Karten bündig zum Text, laufen beim Wischen
aber bis an den Bildschirmrand und nicht in eine Kante.
------------------------------------------------------------ */
@media (max-width: 700px) {
.lsp,
.facts,
.ref-band .ref-grid,
.refmap-grid.m-swipe,
.m-swipe {
display: grid;
grid-auto-flow: column;
grid-template-columns: none;
grid-auto-columns: var(--m-card, 82%);
grid-auto-rows: auto;
align-items: start;
gap: var(--m-gap, 14px);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding-left: var(--wrap-pad);
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
margin-left: calc(var(--wrap-pad) * -1);
margin-right: calc(var(--wrap-pad) * -1);
padding-left: var(--wrap-pad);
padding-right: var(--wrap-pad);
padding-bottom: 4px;
}
.lsp::-webkit-scrollbar,
.facts::-webkit-scrollbar,
.ref-band .ref-grid::-webkit-scrollbar,
.m-swipe::-webkit-scrollbar { display: none; }
.lsp > *,
.facts > *,
.ref-band .ref-grid > *,
.m-swipe > * { scroll-snap-align: start; min-width: 0; }
/* Das vorhandene Beitragskarussell bekommt denselben Randabfluss,
damit alle Bahnen der Seite gleich laufen. */
.pk-spur {
grid-auto-columns: 82%;
scroll-padding-left: var(--wrap-pad);
margin-left: calc(var(--wrap-pad) * -1);
margin-right: calc(var(--wrap-pad) * -1);
padding-left: var(--wrap-pad);
padding-right: var(--wrap-pad);
}
}
/* ------------------------------------------------------------
3 · PUNKTE-ANZEIGE
Eine Wischbahn sieht auf dem Standbild aus wie eine
abgeschnittene Karte. Die Punkte sagen, wie viele Karten es
gibt und wo man steht; angetippt springen sie an. Sie werden
von mobile.js erzeugt und nur dort eingehängt, wo eine Bahn
tatsächlich wischbar ist.
------------------------------------------------------------ */
.m-dots { display: none; }
/* Am Desktop ist die Zeile ein schlichter Block: der „Alle …"-Verweis
darin steht genau so wie vorher direkt im .wrap. */
@media (max-width: 700px) {
/* Punkte mittig, Verweis rechts - beides in einer Zeile.
Die Punkte liegen absolut über die volle Breite und sind damit
auf die Bildschirmmitte zentriert, nicht auf den Platz, der neben
dem Verweis übrig bleibt. Ein Rastersatz aus drei Spalten hätte
dem Verweis nur eine halbe Spalte gelassen - „Alle Referenzen →"
brach dort auf drei Zeilen um. */
/* Punkte mittig, Verweis darunter rechts.
Beides in EINER Zeile geht bei 375px Bildschirm nicht auf: der
Verweis ist 123px („Alle Referenzen →") bis 134px breit, und
mittig zentrierte Punkte reichen bei sechs Karten bis 218px -
für sechs Punkte blieben rechnerisch 11px je Punkt, also weniger
als der Punkt selbst. Statt beide zu quetschen steht der Verweis
eine Zeile tiefer; das kostet gegenüber der einzeiligen Fassung
rund 11px und lässt die Punkte dort, wo sie hingehören. */
.m-leiste {
display: block;
margin-top: 16px;
}
.m-leiste .m-dots { justify-content: center; }
/* Der Verweis gehört an den unteren Rand des Abschnitts, nicht
unmittelbar unter die Punkte - dort las er sich wie eine Fussnote
zur Punktreihe. Der Abstand trennt ihn von der Bahn und bindet ihn
an den Abschnitt, den er abschliesst. */
.m-leiste .more-link {
display: block; text-align: right;
margin-top: clamp(22px, 4vh, 38px);
}
}
@media (max-width: 700px) {
.m-dots {
display: flex; justify-content: center; align-items: center;
gap: 2px; margin-top: 0;
}
.m-dots button {
-webkit-appearance: none; appearance: none;
width: 22px; height: 22px; padding: 0; border: 0;
background: none; cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.m-dots button::before {
content: ""; display: block;
width: 7px; height: 7px; border-radius: 50%;
background: var(--line);
transition: background .25s ease, transform .25s var(--ease-out);
}
.m-dots button[aria-current="true"]::before {
background: var(--accent); transform: scale(1.4);
}
/* Auf dunklem Grund kehrt sich der Kontrast um. */
.scene .m-dots button::before,
.ansp-band .m-dots button::before { background: rgba(175,209,219,.34); }
.scene .m-dots button[aria-current="true"]::before,
.ansp-band .m-dots button[aria-current="true"]::before { background: var(--skyblue); }
}
@media (prefers-reduced-motion: reduce) {
.m-dots button::before { transition: none; }
}
/* ------------------------------------------------------------
4 · STARTSEITE · MITGLIEDSCHAFTEN
Vorher standen die vier Logos auch auf dem Telefon in einer
Reihe: bei 13vw Höhe waren sie rund 40px hoch und damit als
Marke nicht mehr lesbar. Sie sind hier die Hauptsache, also
bekommen sie ein 2x2-Raster mit fester Zeilenhöhe - jedes Logo
nutzt seine Zelle aus, statt sich vier Nachbarn zu teilen.
------------------------------------------------------------ */
@media (max-width: 700px) {
/* Rückfall ohne JavaScript: 2x2-Raster. Sobald mobile.js den
Coverflow gebaut hat, trägt die Bahn .is-coverflow und die
Regeln darunter übernehmen. */
.mship-logos:not(.is-coverflow) {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows: 92px;
gap: 22px 20px;
place-items: center;
flex-wrap: nowrap;
margin-top: 34px; margin-bottom: 22px;
}
.mship-logos:not(.is-coverflow) .mship-logo {
height: 100%; width: 100%;
max-width: 100%; max-height: 100%;
object-fit: contain;
}
.mship-logos:not(.is-coverflow) .mship-logo--wide { padding: 12px 0; }
}
@media (max-width: 380px) {
.mship-logos:not(.is-coverflow) { grid-auto-rows: 78px; gap: 18px 14px; }
}
/* ---- Coverflow ---------------------------------------------------
Eine Kachel steht mittig und flach, die Nachbarn kippen nach hinten
weg. Die Neigung rechnet mobile.js beim Scrollen aus dem Abstand
zur Mitte; hier steht nur die Bühne dafür.
------------------------------------------------------------------ */
@media (max-width: 700px) {
.mship-logos.is-coverflow {
display: flex; flex-wrap: nowrap; align-items: center;
/* Die Ausgangsregel zentriert den Inhalt (justify-content:center).
In einem überlaufenden Flexbereich ragt er dann auf BEIDEN
Seiten heraus, und der linke Überhang ist per Scrollen nicht
erreichbar - die erste Kachel lag ausserhalb und die Bahn
begann in der Mitte. */
justify-content: flex-start;
gap: 0;
/* Der Innenabstand lässt die erste und die letzte Kachel bis in
die Mitte fahren - sonst wären die Randmarken nie gross.
Gerechnet wird in vw, nicht in Prozent: Prozentwerte eines
Innenabstands beziehen sich auf den Elternblock (.wrap, also
ohne die ausgerückten Ränder), und die erste Kachel kam damit
nie ganz in die Mitte. Die Bahn selbst ist genau bildschirm-
breit, deshalb stimmt vw hier. */
padding: 10px calc(50vw - var(--cf-breite) / 2) 18px;
margin-left: calc(var(--wrap-pad) * -1);
margin-right: calc(var(--wrap-pad) * -1);
overflow-x: auto;
/* „mandatory" allein rastet erst dort ein, wo der Schwung endet -
bei einem kurzen Wisch blieb die Kachel deshalb schräg zwischen
zwei Rastpunkten stehen. scroll-snap-stop:always (an der Kachel)
begrenzt jede Geste auf genau eine Kachel und zieht sie dorthin. */
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
scrollbar-width: none;
perspective: 900px;
perspective-origin: 50% 50%;
margin-top: 30px; margin-bottom: 6px;
--cf-breite: 60vw;
}
.mship-logos.is-coverflow::-webkit-scrollbar { display: none; }
.cf-karte {
flex: 0 0 var(--cf-breite);
height: calc(var(--cf-breite) * 0.72);
scroll-snap-align: center;
scroll-snap-stop: always;
display: flex; align-items: center; justify-content: center;
padding: 16px 18px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
box-shadow: 0 14px 30px -18px rgba(1,74,98,.55);
transform-style: preserve-3d;
will-change: transform;
transition: opacity .18s linear;
}
.mship-logos.is-coverflow .mship-logo,
.mship-logos.is-coverflow .mship-logo--wide {
width: 100%; height: 100%;
max-width: 100%; max-height: 100%;
object-fit: contain;
transform: none;
}
.mship-logos.is-coverflow .mship-logo--wide { padding: 6px 0; }
}
@media (prefers-reduced-motion: reduce) {
.cf-karte { transition: none; }
}
/* ------------------------------------------------------------
5 · STARTSEITE · LEISTUNGEN
Am Desktop sind das vier Spalten, getrennt nur durch Haar-
linien. Genau dieses Bild bleibt auf dem Telefon erhalten -
die Spalten stehen weiter nebeneinander, man schiebt sie nur
seitwärts durch. Deshalb hier kein Abstand zwischen den
Karten: die senkrechte Linie ist die Trennung, nicht die
Lücke. Der Innenabstand sitzt in der Spalte selbst, damit der
Text auch in der ersten Spalte nicht am Rand klebt.
------------------------------------------------------------ */
@media (max-width: 700px) {
.lsp {
--m-card: min(78%, 300px);
--m-gap: 0px;
margin-top: 30px;
padding-left: 0; padding-right: 0;
border-top: 1px solid var(--line);
}
.lsp a {
border-top: 0;
padding: 24px var(--wrap-pad) 30px;
box-shadow: inset 1px 0 0 var(--line) !important;
}
.lsp a:first-child { box-shadow: none !important; }
.lsp h3 { font-size: 17px; }
.lsp p { font-size: 14.5px; }
.lsp-mehr { padding-top: 18px; }
/* Der Auflaufbalken der Kopflinie ist ein Zeigergerät-Effekt und
bleibt auf dem Telefon ohne Auslöser stehen. */
.lsp a::before { display: none; }
/* Das durchgehende Band über allen vier Spalten passt nicht zur
Wischbahn - sichtbar wäre immer nur ein Viertel davon. Jede
Spalte trägt ihre Kurve stattdessen selbst (leistungsband.js,
„Fassung für schmale Geräte"), damit man die ganze Einheit aus
Skizze und Text schiebt und nicht nur den Text. */
.leistband { display: none; }
/* Am Desktop ist ein Viertel des Bandes 217 breit und 175 hoch,
also gut 1,24:1. Mit 62px Höhe stand die Kurve hier auf 4:1 und
war entsprechend flachgezogen. Dasselbe Verhältnis, nur gedeckelt,
damit die Karte nicht zu hoch wird. */
.lsp-sig {
display: block; width: 100%;
aspect-ratio: 1.3; max-height: 190px;
margin: 0 0 clamp(14px, 2.4vw, 20px);
}
/* Dazu gehört zwingend die nächste Regel: leistungsband.js setzt
.hat-laeufer auf den Abschnitt, und damit stehen die vier Spalten
auf opacity:0, bis das Skript sie einzeln einblendet. Ausgelöst
wird das vom Band - und ein Element mit display:none meldet sich
bei keinem Beobachter und hat keine Masse. Ohne diese Regel
blieben die Spalten auf dem Telefon unsichtbar (ausser bei
reduzierter Bewegung, wo scroll-scenes.css dasselbe tut).
In der Wischfassung gibt es die gestaffelte Einblendung ohnehin
nicht - die Spalten stehen einfach da. */
.lsp-band.hat-laeufer .lsp a { opacity: 1; transform: none; transition: none; }
}
/* ------------------------------------------------------------
6 · STARTSEITE · REFERENZEN
Sechs Karten, jede mit Bild und Aufklapper: gestapelt sind das
knapp 2000px, die man an den Beiträgen darunter vorbei-
scrollen muss. Als Wischbahn bleibt der Abschnitt so hoch wie
eine Karte. Die Karten richten sich oben aus (align-items:
start aus Abschnitt 2), damit ein geöffneter Aufklapper nicht
alle übrigen Karten mitwachsen lässt.
------------------------------------------------------------ */
@media (max-width: 700px) {
.ref-band .ref-grid {
--m-card: 84%;
--m-gap: 14px;
margin-top: 30px;
/* Karten behalten ihre eigene Hoehe (align-items:start aus
Abschnitt 2). Gleiche Hoehen zu erzwingen brachte zwar die
Punktreihe naeher heran, liess dafuer aber unter den kurzen
Titeln eine leere Flaeche stehen - dieselben Karten stehen auf
der Referenzseite ohne diesen Leerraum, und so gehoert es sich.
Beim Auf- und Zuklappen aendert sich die Kartenhoehe. Mit
"mandatory" rechnet der Browser dabei jedes Mal seine
Rastpunkte neu und ruckt die Bahn zurecht - daher das Stocken.
"proximity" faengt die Bahn weiterhin ein, ohne bei jeder
Hoehenaenderung nachzufassen. */
scroll-snap-type: x proximity;
}
/* Der Farbstrich am oberen Rand ist ein Hover-Effekt und daher
auf dem Telefon nie zu sehen - stattdessen steht er fest. */
.ref-band .ref-card::after { transform: scaleX(1); }
.ref-head { padding: 16px 18px 18px; }
.ref-detail { padding: 0 18px 22px; }
.ref-head h3 { font-size: 17px; }
/* Auf der Referenzseite selbst bleibt die Liste senkrecht - dort
ist sie das Archiv und wird gefiltert, nicht durchgeblättert.
Die Karten werden nur flacher. */
.ref-grid { margin-top: 26px; gap: 16px; }
.ref-media { aspect-ratio: 16 / 10; }
.ref-band .ref-media { aspect-ratio: 4 / 3; }
}
/* ------------------------------------------------------------
7 · LEISTUNGSSEITEN · MERKMALE
Vier Merkmalskarten je Seite, gestapelt gut 700px. Als
Wischbahn sind es rund 190px. Gleiche Höhe für alle Karten,
damit die Bahn ruhig läuft.
------------------------------------------------------------ */
@media (max-width: 700px) {
.facts {
--m-card: 76%;
--m-gap: 12px;
align-items: stretch;
margin-top: 30px;
}
.facts > .fact { height: 100%; }
}
/* ------------------------------------------------------------
8 · UNTERNEHMEN · MITGLIEDSCHAFTEN
Dasselbe Bild wie auf der Startseite: die Logos stehen im
2er-Raster, nicht untereinander. Vorher fiel die Liste unter
520px auf eine Spalte und wurde 800px lang.
------------------------------------------------------------ */
@media (max-width: 520px) {
.mg-liste {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px 18px;
}
.mg-logo { height: 78px; margin-bottom: 14px; }
.mg-eintrag--breit .mg-logo { height: 78px; }
.mg-eintrag--breit .mg-logo img { max-height: 54px; }
.mg-eintrag h3 { font-size: 15px; }
.mg-eintrag p { font-size: 13.5px; line-height: 1.55; }
}
/* ------------------------------------------------------------
9 · AKTUELLES · BEITRAGSLISTE
Sieben Beiträge als volle Karten sind fast 3000px. Das Archiv
soll überflogen werden, also wird die Karte zur Zeile: Bild
links, Datum und Titel rechts. Anreisser und Fusszeile fallen
weg - sie stehen im Beitrag selbst.
------------------------------------------------------------ */
@media (max-width: 700px) {
.post-grid { gap: 0; margin-top: 26px; }
.post-grid > .post-card {
display: grid;
grid-template-columns: 116px minmax(0, 1fr);
align-items: center;
gap: 0 16px;
border: 0; border-bottom: 1px solid var(--line);
border-radius: 0;
padding: 14px 0;
box-shadow: none;
}
.post-grid > .post-card:first-child { border-top: 1px solid var(--line); }
.post-grid .post-media {
aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden;
border: 1px solid var(--line);
}
.post-grid .post-media.contain img { padding: 8px; }
.post-grid .post-body { padding: 0; display: block; }
.post-grid .post-body h3 { font-size: 16px; line-height: 1.32; margin-bottom: 0; }
.post-grid .post-body p,
.post-grid .post-foot { display: none; }
.post-grid .post-meta { margin-bottom: 6px; gap: 6px 10px; }
}
/* ------------------------------------------------------------
9b · TEAM
Bild links, Text rechts - bei 375px blieben für den Lebenslauf
187px, also rund 25 Zeichen je Zeile. Auf dem Telefon steht das
Bild deshalb nur noch neben Name und Rolle; der Fliesstext läuft
darunter über die volle Breite.
------------------------------------------------------------ */
@media (max-width: 560px) {
.tm-grid { gap: 34px; }
.tm-card {
display: grid;
grid-template-columns: 104px minmax(0, 1fr);
/* Beide Reihen neben dem Bild sind 1fr, nicht auto: ein Element,
das mehrere Reihen überspannt, verteilt seine Höhe nur auf
Reihen mit inhaltsabhängiger Grösse - stünde dort auto, bekäme
jede Textreihe die halbe Bildhöhe und zwischen Name und Rolle
klaffte eine Lücke von 30px. Mit zwei gleichen Anteilen teilt
sich die Bildhöhe sauber, und das Paar rückt in die Mitte:
Name unten an der ersten Reihe, Rolle oben an der zweiten. */
grid-template-rows: 1fr 1fr auto;
/* gap kommt von .tm-card (32px, mobil 20px) und galt bisher nur
waagerecht - als Raster wirkt es auch zwischen den Reihen und
schöbe sich zwischen Name und Rolle. */
column-gap: 16px; row-gap: 0;
}
.tm-photo { grid-column: 1; grid-row: 1 / span 2; width: 104px; }
/* Die Textspalte löst sich auf, damit ihre drei Kinder selbst im
Raster stehen können. */
.tm-text { display: contents; }
.tm-name { grid-column: 2; grid-row: 1; align-self: end; font-size: 18px; margin-bottom: 0; }
.tm-role { grid-column: 2; grid-row: 2; align-self: start; margin: 3px 0 0; }
.tm-bio { grid-column: 1 / -1; grid-row: 3; margin-top: 14px; }
}
/* ------------------------------------------------------------
10 · HERO-SZENEN
In scroll-scenes.css setzt die 860px-Regel den Innenabstand
der Textfläche auf "26px 0 10px" und löscht damit den
seitlichen Rand mit, den die Grundregel gesetzt hatte. Folge:
Überschrift und Fliesstext der Startseiten-Szene standen auf
dem Telefon bündig an beiden Bildschirmkanten. Hier bekommen
sie ihn zurück.
------------------------------------------------------------ */
@media (max-width: 860px) {
.scene-copy { padding-left: var(--wrap-pad); padding-right: var(--wrap-pad); }
/* Die Vollbild-Szenen haben einen eigenen .wrap im Inneren -
dort läge der Rand sonst doppelt. */
.scene--full .scene-copy { padding-left: 0; padding-right: 0; }
}
/* Der Startseiten-Hero stand mobil kopfüber: die Textfläche ist für
den Desktop auf position:relative gesetzt (damit lange Über-
schriften einen eigenen Grund bekommen) und rutschte dadurch in
das obere Drittel der Bühne - während der Verlauf der Bühne unter
860px genau umgekehrt aufgebaut ist, nämlich unten dunkel und nach
oben auslaufend. Der Text lag also auf dem hellen Teil des Bildes,
darunter standen 400px Bild ohne Inhalt.
Hier steht er wieder unten, wo der Verlauf ihn trägt: Bild oben,
Text darauf, darunter Folienanzeige und Weiterhinweis. */
/* Die Bilder waren auf dem Telefon zu dunkel und zeigten den falschen
Ausschnitt. Beides hängt zusammen: Der Verlauf der Bühne war für
Text in der Bildmitte gebaut und deckte auch oben schon 42% ab -
seit der Text unten steht, ist das oben verschenkt. Und ein 16:9-
Bild in einem hochformatigen Ausschnitt verliert links und rechts
je ein Drittel: bei mittiger Ausrichtung fiel genau das Motiv
heraus (beim Gutachten-Bild der Mensch, der die Messung macht). */
@media (max-width: 860px) {
.scene--foto .scene-stage::after {
/* Die Auszeichnungszeile („Fachzentrum für …") sitzt bei rund 50 %
Hoehe und stand damit genau auf dem alten .46-Stop - hellblaue
Versalien auf einem hellen Tablet, praktisch unlesbar. Der
Verlauf deckt den Textbereich jetzt deutlich frueher ab und
laesst erst oberhalb von 70 % das Foto frei. */
background: linear-gradient(to top,
rgba(1,37,48,.95) 0%,
rgba(1,37,48,.92) 34%,
rgba(1,37,48,.80) 48%,
rgba(1,37,48,.36) 62%,
rgba(1,37,48,.06) 80%,
rgba(1,45,58,0) 100%);
}
/* Ohne die Abdunklung oben darf auch das Bild selbst heller stehen. */
.hero-bild { filter: saturate(.86) contrast(1.03); }
/* Ausschnitt je Folie: der Bildinhalt sitzt nicht überall mittig, und
im Hochformat bleibt von einem Querformat nur ein schmaler Streifen
übrig - bei Folie 1 sind es 24 %, bei Folie 2 knapp 20 % der
Bildbreite. Die Werte setzen genau das Motiv in diesen Streifen. */
.hero-bild--rechts { object-position: 33% 50%; } /* Gesicht links im Bild */
/* Weiter nach links im Bild heisst: das Motiv wandert nach rechts auf
dem Schirm. Der Schallpegelmesser stand mittig hinter der
Ueberschrift und ist jetzt rechts daneben frei zu sehen. */
.hero-bild--einsatz { object-position: 97% 50%; } /* Person mit Messgeraet rechts im Bild */
.hero-bild--din { object-position: 54% 38%; } /* Baukörper, nicht Strasse */
/* Das Kopfbild ist mittig aufgebaut; bei 1100x1577 in einem
375x734-Ausschnitt bleiben 73 % der Breite und die volle Hoehe
sichtbar. Waagerecht mittig ist damit genau richtig - ein
Versatz wuerde nur eine Seite beschneiden. */
.hero-bild--geraet { object-position: 50% 50%; }
}
@media (max-width: 860px) {
/* Nur die Foto-Fassung: ihr Verlauf kommt von der Bühne
(.scene--foto .scene-stage::after) und läge sonst zweimal
übereinander. Die Leistungsübersicht ist ebenfalls .scene--hero,
zeichnet aber eine Kurve statt eines Fotos - dort gibt es keinen
Bühnenverlauf, und ohne eigenen Grund stünde ihr Text blank auf
der Kurve. */
.scene--hero.scene--foto .scene-copy {
position: absolute; left: 0; right: 0; top: auto; bottom: 0;
transform: none;
background: none;
padding: 0 var(--wrap-pad) clamp(104px, 15vh, 140px);
}
/* Über dem „Mehr"-Hinweis: beide stehen mittig, und auf der
bisherigen Höhe lagen die Punkte genau auf dem Pfeil. */
.scene--hero .scene-prog { bottom: clamp(94px, 13.5vh, 118px); }
/* Die Leistungsübersicht hatte den Text oben und die Punkte auf
zwei Dritteln Höhe - darunter blieb ein Drittel leer. Der Text
gehört in die Mitte der Bühne, die Punkte an den unteren Rand.
Diese Szene hat keinen „Mehr"-Hinweis, die Punkte dürfen also
ganz nach unten. */
.scene--hero.scene--rollen .scene-stage {
display: flex; flex-direction: column; justify-content: center;
}
.scene--hero.scene--rollen .scene-copy { flex: 0 0 auto; }
.scene--hero.scene--rollen .scene-prog { bottom: clamp(26px, 4.5vh, 40px); }
/* Kein Band hinter dem Text: die Kurve soll durchlaufen, so wie sie
angelegt ist. Ein zuvor hier eingesetzter dunkler Streifen stellte
zwar den Kontrast her, zerschnitt aber genau das Bild, das den
Kopfbereich ausmacht.
Lesbar bleiben die kleinen Zeilen stattdessen durch einen Schatten
an der Schrift selbst - er wirkt nur dort, wo Buchstaben stehen,
und laesst die Kurve unangetastet. */
/* Ein leichter Schleier, kein Band: die Kurve bleibt ueberall
sichtbar, verliert hinter dem Text aber genug Zeichnung, dass
Schrift und Signal sich nicht beissen. Der frueher hier stehende
Streifen war dafuer zu dicht - er zerschnitt das Bild. */
.scene--hero.scene--rollen .scene-copy {
background: linear-gradient(to bottom,
rgba(1,37,48,0) 0%,
rgba(1,37,48,.42) 14%,
rgba(1,37,48,.52) 50%,
rgba(1,37,48,.42) 86%,
rgba(1,37,48,0) 100%);
}
.scene--hero.scene--rollen .crumbs,
.scene--hero.scene--rollen .crumbs a,
.scene--hero.scene--rollen .scene-eyebrow {
text-shadow: 0 1px 6px rgba(1,25,33,.95), 0 0 16px rgba(1,25,33,.8);
}
.scene--hero.scene--rollen .scene-step h2,
.scene--hero.scene--rollen .scene-step p {
text-shadow: 0 1px 10px rgba(1,25,33,.85);
}
/* Der Knopf hat seine eigene helle Flaeche und braucht den Schatten
nicht - er ist fuer Schrift gedacht, die direkt auf der Kurve
steht. Auf dem hellen Grund macht er die dunkle Beschriftung nur
unsauber. */
.scene--hero.scene--rollen .scene-step p a {
text-shadow: none;
}
}
@media (max-width: 700px) {
.scene-step h2 { font-size: clamp(25px, 7.4vw, 32px); line-height: 1.14; }
.scene-step p { font-size: 15.5px; line-height: 1.58; }
/* Vier Textblöcke liegen übereinander; die Mindesthöhe richtet
sich nach dem längsten, sonst springt die Szene beim Wechsel. */
.scene-steps { min-height: 250px; }
/* Der Hero setzt eigene Grössen (clamp ab 32px) und braucht deshalb
eine eigene Zeile - sonst greift die Regel darüber nicht. */
.scene--hero .scene-step h2 { font-size: clamp(26px, 7.6vw, 33px); line-height: 1.1; }
.scene--hero .scene-step p { font-size: 15.5px; line-height: 1.6; }
.scene--hero .scene-step p a { margin-top: 16px; }
.scene--hero .scene-steps { min-height: 268px; }
.pegelbuehne h2 { font-size: clamp(25px, 7.4vw, 32px); }
.pb-lead { font-size: 15.5px; }
}
/* ------------------------------------------------------------
9c · LEISTUNGSSEITEN · BILDER MITTIG
Sobald das zweispaltige Raster auf eine Spalte fällt, behalten
die Bilder ihre Maximalbreite (190px beim Ansprechpartner, 280px
bei den kleinen Fotos) - sie standen dadurch linksbündig in einer
335px breiten Spalte und wirkten verrutscht.
------------------------------------------------------------ */
@media (max-width: 820px) {
.ansp-foto-gross,
.tool-foto--klein,
.tool-logo { margin-left: auto; margin-right: auto; }
.ansp-gross > .wrap { justify-items: center; text-align: center; }
.ansp-gross .ansp-inhalt p { margin-left: auto; margin-right: auto; }
.ansp-aktionen { justify-content: center; }
}
/* ------------------------------------------------------------
10 · KEINE SCROLLGEBUNDENEN SZENEN MEHR
Am Desktop ist eine Szene eine mehrere Bildschirme hohe Spur mit
klebender Bühne: der Scrollstand bestimmt die Folie. Mit dem
Daumen ist das die falsche Geste. Man will weiterlesen und bleibt
in der Szene hängen; man will die Folie wechseln und schiebt
stattdessen die Seite. Dazu kam der Eindruck, der Kopfbereich
„wachse" beim Scrollen - das war die klebende Bühne unter dem
mitlaufenden Inhalt.
Mobil ist eine Szene deshalb genau einen Bildschirm hoch, die
Bühne klebt nicht mehr, und gewechselt wird ausschliesslich per
Wisch (scroll-scenes.js, Zweig WISCH). Scrollen tut wieder das,
was Scrollen tun soll: die Seite bewegen.
------------------------------------------------------------ */
@media (max-width: 860px) {
.scene-track,
.scene--hero.scene--rollen .scene-track {
height: var(--vh-rest) !important;
}
.scene-stage,
.scene--hero.scene--rollen .scene-stage {
position: relative !important;
top: auto !important;
height: var(--vh-rest) !important;
}
/* Die Rastpunkte der Rollenszene hängen am Scrollweg, den es nicht
mehr gibt. */
html:has(.scene--rollen) { scroll-snap-type: none !important; }
.rollen-marken { display: none; }
/* Das Kopfbild wechselt jetzt nur noch beim Wischen. Der Zoom auf
dem Bild liess den Kopfbereich mitwachsen, sobald sich etwas
bewegte - genau der Eindruck, der stören sollte. */
.hero-bild { transform: none !important; }
}
/* ------------------------------------------------------------
10a · SZENEN WISCHEN STATT TIPPEN
Die Pfeilknöpfe lagen auf dem Telefon mitten im Text - auf der
Normungs-Folie verdeckte der linke Pfeil den Link „Über uns".
Gewischt wird jetzt (siehe mobile.js); die Knöpfe bleiben im
Dokument, weil der Wisch sie auslöst, sind aber unsichtbar.
Statt der Striche steht unten eine Punktreihe. Sie ist das
Versprechen, dass hier etwas zu wischen ist - der eigentliche
Grund, warum sie sichtbarer sein muss als am Desktop.
------------------------------------------------------------ */
@media (max-width: 860px) {
.scene-nav {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Die Folientexte stehen nebeneinander in einer Scrollbahn - dasselbe
Mittel wie bei den Karussells der Startseite. Vorher lagen sie
übereinander und wurden per Gestenerkennung überblendet; ein Wisch
ist aber selten genau waagerecht, und der senkrechte Anteil scrollte
die Seite mit. Ein echter Scrollbereich überlässt diese Entscheidung
dem Browser.
Nebenbei löst das die Höhenfrage: übereinanderliegende Folien
brauchen eine Mindesthöhe für die längste, und bei den kurzen stand
der Rest als Leerraum. Nebeneinander sind alle gleich hoch, ohne
dass etwas reserviert werden müsste. */
.scene-steps.m-track {
display: flex; flex-wrap: nowrap;
min-height: 0;
overflow-x: auto;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
scrollbar-width: none;
/* Kein scroll-behavior:smooth. Die programmgesteuerten Spruenge
geben ihr weiches Verhalten selbst mit; als Dauerzustand legt es
sich dagegen ueber das Einrasten der eigenen Wischgeste, und die
Bahn blieb zwischen zwei Folien stehen. */
margin-left: calc(var(--wrap-pad) * -1);
margin-right: calc(var(--wrap-pad) * -1);
}
.scene-steps.m-track::-webkit-scrollbar { display: none; }
.scene-steps.m-track .scene-step {
position: relative; inset: auto;
flex: 0 0 100%;
scroll-snap-align: start;
/* Kein scroll-snap-stop:always. Es soll einen Wisch auf eine Folie
begrenzen, bremst auf iOS aber den Nachlauf so frueh ab, dass
die Bahn zwischen zwei Rastpunkten liegen bleibt: das Bild
wechselt, der Text steht schief. Bei bildschirmbreiten Folien
braucht es die Begrenzung ohnehin nicht - ein normaler Wisch
traegt genau eine Folie weit. Das sichere Einrasten uebernimmt
zusaetzlich mobile.js. */
padding-left: var(--wrap-pad); padding-right: var(--wrap-pad);
/* Die Ein- und Ausblendung der übereinanderliegenden Fassung darf
hier nicht greifen - sichtbar ist, was in der Bahn steht. */
opacity: 1 !important;
transform: none !important;
transition: none !important;
pointer-events: auto !important;
}
/* Die Punktreihe steht mittig - sie gehört zur Folie, nicht zur
Textspalte, und links unten kollidierte sie mit der Kennwertzeile
der Szene („49 Hz" lag auf den Punkten). */
.scene-prog,
.scene--hero .scene-prog,
.scene--full .scene-prog {
left: 0; right: 0;
justify-content: center;
gap: 10px;
}
.scene-prog i,
.scene--hero .scene-prog i,
.scene-prog--klein i {
width: 8px !important; height: 8px !important;
min-width: 0 !important; padding: 0 !important;
border-radius: 50% !important;
background: rgba(175,209,219,.38) !important;
transform: none !important;
transition: background .3s ease, transform .3s var(--ease-out);
}
/* Ohne das läge der Balken der Strichfassung über dem Punkt. */
.scene-prog i::after,
.scene--hero .scene-prog i::after,
.scene-prog--klein i::after { content: none !important; }
/* „on" markiert alle Folien bis zur aktuellen mit - als Punktreihe
soll nur die aktuelle hervortreten. */
.scene-prog i.on,
.scene--hero .scene-prog i.on,
.scene-prog--klein i.on { background: rgba(175,209,219,.38) !important; }
.scene-prog i.cur,
.scene--hero .scene-prog i.cur,
.scene-prog--klein i.cur {
background: var(--skyblue) !important;
transform: scale(1.5) !important;
}
/* Die Punkte sind Schaltflächen und brauchen Fläche um sich - der
Punkt bleibt 8px, die Trefferfläche wächst über einen Rahmen aus
Aussenabstand, den der Sichtbereich nicht zeigt. */
.scene-prog i[role="button"] { cursor: pointer; }
.scene-prog i::before {
content: ""; position: absolute; inset: -14px -8px;
}
.scene-prog i { position: relative; }
}
@media (prefers-reduced-motion: reduce) {
.scene-prog i { transition: none; }
}
/* ------------------------------------------------------------
9d · MESSSYSTEM · LEIHGERÄTE UND SOFTWARE-HINWEIS
Die beiden Geräte standen untereinander und kosteten damit einen
halben Bildschirm für zwei Produktfotos. Nebeneinander in einer
Wischbahn zeigen sie dasselbe auf einem Drittel der Höhe - und
man sieht auf einen Blick, dass es zwei sind.
------------------------------------------------------------ */
@media (max-width: 700px) {
.system-duo {
display: grid;
grid-auto-flow: column;
grid-template-columns: none;
grid-auto-columns: 84%;
gap: 12px;
overflow-x: auto;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
scroll-padding-left: var(--wrap-pad);
scrollbar-width: none;
margin-left: calc(var(--wrap-pad) * -1);
margin-right: calc(var(--wrap-pad) * -1);
padding-left: var(--wrap-pad);
padding-right: var(--wrap-pad);
}
.system-duo::-webkit-scrollbar { display: none; }
.system-duo > * { scroll-snap-align: start; scroll-snap-stop: always; min-width: 0; }
/* Das eingebettete Programmfenster ist auf Desktopbreite gerechnet
und lief unten aus dem Bild. Es wird als Ganzes kleiner skaliert,
damit die Verhältnisse im Fenster erhalten bleiben. */
/* Das Programmfenster.
Der frühere Weg - den ganzen Rahmen per transform:scale(.62) zu
schrumpfen - lässt seine Layouthöhe unverändert und hinterlässt
darunter einen leeren Streifen; abgeschnitten war es trotzdem.
Richtig ist der Weg, den die Desktopfassung schon geht: Das
eingebettete Fenster rechnet INTERN mit einer grösseren Breite und
wird als Ganzes zurückskaliert. Bei 280 % und Faktor 1/2,8 stehen
dem Programm rund 1000px Breite zur Verfügung - genug für seine
volle Oberfläche - während der Rahmen die Bildschirmbreite
ausnutzt. Der negative Aussenabstand nimmt die Höhe zurück, die
das Wegskalieren übrig lässt. */
.app-buehne {
margin-left: 8px; margin-right: 8px;
overflow: hidden;
}
.app-rahmen { transform: none; margin-top: 18px; }
.app-buehne .app-rahmen iframe {
--mock-faktor: 2.8;
--mock-hoehe: 1000px;
width: calc(var(--mock-faktor) * 100%);
height: var(--mock-hoehe);
transform: scale(calc(1 / var(--mock-faktor)));
transform-origin: 0 0;
margin-bottom: calc((1 / var(--mock-faktor) - 1) * var(--mock-hoehe));
}
/* Die Wischbahn der Geraete braucht ihre Punkte zentriert wie die
uebrigen Bahnen. */
.system-duo + .m-leiste { margin-top: 14px; }
}
/* ------------------------------------------------------------
10g · FACHBEITRÄGE OHNE SZENEN
Die Fachbeiträge sind Lesestücke. Eine bildschirmfüllende Szene
mitten im Text hält auf dem Telefon den Lesefluss an, ohne dass
sie zum Verständnis nötig wäre - die Aussage steht im Absatz
daneben. Auf dem Telefon bleiben sie deshalb weg; am Desktop, wo
sie neben dem Text stehen und nicht davor, bleiben sie.
Erkannt werden die Beiträge am .article-head, den nur sie tragen.
------------------------------------------------------------ */
@media (max-width: 860px) {
body:has(.article-head) .scene { display: none; }
}
/* ------------------------------------------------------------
10f · SEITENKOPF · SIGNATUR HINTER DEN TEXT
Die Signaturanimation füllt den ganzen Kopfbereich. Lesbar wird
der Text am Desktop durch zwei Kunstgriffe, die beide von einer
linken Textspalte ausgehen: eine Maske mit einem Loch bei 22 %
Breite und eine Abdunklung als 100deg-Verlauf, also waagerecht
von links dunkel nach rechts durchsichtig.
Auf dem Telefon steht der Text über die ganze Breite. Damit lag
seine rechte Hälfte auf der ungedämpften Animation - bei den
Messungen liefen die Perzentillinien L1 bis L95 mitten durch
Brotkrume, Überschrift und Fliesstext.
Mobil wird deshalb senkrecht abgedunkelt (der Text steht unten,
also unten am dunkelsten), die Maske entfällt, und die Animation
tritt als Textur zurück.
------------------------------------------------------------ */
@media (max-width: 860px) {
.page-head::before,
.article-head::before,
.home-hero::before {
background: linear-gradient(to bottom,
rgba(1,37,48,.55) 0%,
rgba(1,37,48,.84) 38%,
rgba(1,37,48,.93) 100%) !important;
}
.head-sig { opacity: .38; }
/* Die Leistungsuebersicht hat kein Foto, nur diese Kurve - dort ist
sie der ganze Bildinhalt und darf nicht bis zur Unkenntlichkeit
zurueckgenommen werden. Der Text steht auf einem eigenen Band
(Abschnitt 10), der Kontrast haengt also nicht an ihr. */
.scene-sig { opacity: 1; }
.head-sig,
.head-sig--voll,
.head-sig--wash,
.head-sig--band,
.head-sig--rechts {
-webkit-mask-image: none !important;
mask-image: none !important;
}
}
/* ------------------------------------------------------------
10e · SZENENGRAFIK UND TEXT ENTFLECHTEN
Die Grafik einer Szene füllt die ganze Bühne (.scene-canvas mit
inset:0), der Text liegt darauf. Am Desktop geht das auf: der Text
steht in der linken Hälfte, die Kurve entfaltet sich rechts daneben,
und eine Maske blendet den linken Rand der Grafik aus.
Auf dem Telefon fällt beides übereinander - der Text steht unten
über der vollen Breite, und genau dort liegen die Beschriftungen
der Grafik („Ruhehörschwelle", die Frequenzachse, die Balken). Auf
der Messungen-Seite lasen sich Kurve und Fliesstext ineinander.
Die Grafik bekommt deshalb die obere Hälfte, der Text die untere.
Die Zeichenflächen richten sich nach ihrem Element und rechnen die
kleinere Höhe von selbst um.
Ausgenommen sind die Vollbild-Szenen: dort ist das Modell selbst
der Inhalt, und der Text steht bewusst darauf.
------------------------------------------------------------ */
@media (max-width: 860px) {
/* Ein fester Prozentwert für die Grafikhöhe konnte nur für eine
Szene stimmen - die Textblöcke sind unterschiedlich hoch, und bei
der A-Bewertung ragte der Text 80px in die Grafik. Die Bühne ist
deshalb eine Spalte: der Text nimmt, was er braucht, die Grafik
bekommt den Rest. Damit ist eine Überlappung ausgeschlossen,
unabhängig von der Textlänge. */
.scene:not(.scene--full):not(.scene--hero) .scene-stage {
display: flex; flex-direction: column;
}
.scene:not(.scene--full):not(.scene--hero) .scene-canvas {
position: relative; inset: auto;
flex: 1 1 auto; min-height: 130px;
}
.scene:not(.scene--full):not(.scene--hero) .scene-copy {
position: relative; inset: auto; top: auto; bottom: auto;
transform: none; flex: 0 0 auto;
/* Platz für die Folienpunkte am unteren Rand. */
padding-bottom: 44px;
}
/* Die Maske schneidet am Desktop die linke Flanke der Kurve weg,
damit sie nicht in die Textspalte läuft. Über der vollen Breite
nimmt sie der Grafik nur die Hälfte ihrer Aussage. */
.scene:not(.scene--full) .scene-canvas {
-webkit-mask-image: none; mask-image: none;
}
}
/* ------------------------------------------------------------
10b · ZEITSTRAHL · FILMBAND (unternehmen.html)
Das Band soll über die volle Bildschirmbreite laufen und tut das
über left:50% / width:100vw / translateX(-50%). Diese Rechnung
setzt voraus, dass der Posten mittig im Bildschirm sitzt - unter
820px bekommt er aber 34px Einzug für die Schiene, und das Band
stand entsprechend 17px zu weit rechts (bis 392px bei 375px
Bildschirm). Statt der Mittenrechnung wird es hier direkt an die
beiden Ränder gehängt.
------------------------------------------------------------ */
@media (max-width: 820px) {
.tlz-film {
left: auto; width: auto; transform: none;
margin-left: calc((var(--wrap-pad) + 34px) * -1);
margin-right: calc(var(--wrap-pad) * -1);
}
/* Der Knoten des Filmpostens lag mitten im Text. Die Regel, die ihn
unter 820px um 56px nach unten schiebt, ist für die Posten an der
seitlichen Schiene gedacht - dort steht der Knoten absolut auf der
Linie. Im Filmposten steht er dagegen mittig im Fluss über dem
Text, und der Versatz schob ihn genau hinein. Auf dem Telefon ist
das Band nur 248px hoch, in die sich Knoten, Jahreszahl und Text
teilen; der Knoten rückt deshalb über die Jahreszahl. */
.tlz-posten--film .tlz-knoten { top: 0; margin-bottom: 48px; }
}
/* ------------------------------------------------------------
10c · SCHALLPEGEL-REGLER (Startseite)
Die beiden Richtwertmarken sitzen bei 40 und 55 dB - auf dem
Telefon sind das 63px Abstand, während "NACHTS 40" und "TAGS 55"
zusammen gut 110px brauchen. Sie stiessen deshalb aneinander und
lasen sich als ein Wort. Hier stehen sie auf zwei Zeilen über dem
Balken, jede an ihrer eigenen Marke.
------------------------------------------------------------ */
@media (max-width: 700px) {
/* Beschreibung und Zahl standen in einer Zeile mit
justify-content:space-between und flex-wrap:wrap. Solange die
Beschreibung kurz war („Blätterrauschen"), passten beide
nebeneinander; bei „Immissionsrichtwert tags / Allgemeines
Wohngebiet, außerhalb von Gebäuden" brach die Zahl in eine zweite
Zeile um. Beim Ziehen sprang der Block deshalb zwischen ein- und
zweizeilig hin und her, und die Zahl wanderte über bzw. unter die
Beschreibung. Auf dem Telefon stehen sie jetzt immer untereinander
in fester Reihenfolge: erst die Beschreibung, dann der Messwert. */
.dbx-top,
.dbx-top--getauscht {
display: block;
margin-bottom: 18px;
}
.dbx-what,
.dbx-top--getauscht .dbx-what { text-align: left; max-width: none; }
/* Messwert und seine Auszeichnung stehen rechtsbündig - der Wert ist
das Ergebnis und schliesst die Zeile ab. */
.dbx-zahl,
.dbx-top--getauscht .dbx-zahl {
text-align: right; margin-left: 0; margin-top: 14px;
}
.dbx-top--getauscht .dbx-zahl .dbx-k { text-align: right; }
.dbx-val,
.dbx-top--getauscht .dbx-val { justify-content: flex-end; }
/* Feste Höhe für die Beschreibung: sonst rutscht bei einer zweiten
Zeile alles darunter um eine Zeilenhöhe nach unten - beim Ziehen
wäre das ein Zappeln über die ganze Skala. */
.dbx-what { min-height: 3.8em; }
.dbx-bar { margin-top: 54px; }
.dbx-lim span { font-size: 11px; letter-spacing: .06em; left: 6px; top: -38px; }
.dbx-lim + .dbx-lim span { top: -20px; }
.dbx-k { font-size: 11.5px; }
.dbx--nackt .dbx-val, .dbx--gross .dbx-val { font-size: clamp(44px, 13vw, 58px); }
.dbx-ticks { font-size: 11.5px; }
}
/* ------------------------------------------------------------
10d · RASTPUNKTE DER ROLLENSZENE (leistungen.html)
Die Seite rastet beim Scrollen von Folie zu Folie. Am Zeigegerät
ist das ein Zugewinn, mit dem Daumen nicht: verbindliches Rasten
(mandatory) auf dem gesamten Dokument kämpft gegen den Nachlauf
der Wischgeste - die Seite zieht sich unter dem Finger zurecht
und lange Folien lassen sich kaum zwischendrin anhalten.
"proximity" fängt den Blick weiterhin ein, blockiert aber nicht -
also genau das, was der Kommentar an der Originalstelle
beschreibt.
------------------------------------------------------------ */
@media (max-width: 860px) {
html:has(.scene--rollen) { scroll-snap-type: y proximity; }
}
/* ------------------------------------------------------------
11 · LESBARKEIT
Kleinstschriften, die am Desktop als Beiwerk durchgehen, sind
auf dem Telefon nicht mehr lesbar. Untergrenze ist hier 11px
für Auszeichnungen und 13px für alles, was ein Satz ist.
------------------------------------------------------------ */
@media (max-width: 700px) {
.hero-quelle { font-size: 10px; max-width: 74vw; }
.scene-eyebrow,
.sec-eyebrow,
.page-eyebrow { letter-spacing: .13em; }
.lhead-cap { font-size: 10px; letter-spacing: .1em; }
.lhead-cap b { font-size: 10px; }
.rm-legend { font-size: 11.5px; }
.ro-k { font-size: 11px; }
.scroll-cue span { font-size: 11px; }
.scene-badge { font-size: 10.5px; }
.tool-foto figcaption,
.tl-figure figcaption { font-size: 13px; line-height: 1.5; }
.foot-about { font-size: 14px; max-width: none; }
.pb-notiz { font-size: 13.5px; }
.kt-fach-hinweis { font-size: 13px; }
.kt-seite .consent { font-size: 12px; line-height: 1.55; }
.post-date { font-size: 11.5px; }
/* Fliesstext: etwas kürzere Zeilen und mehr Durchschuss lesen
sich auf schmalen Geräten ruhiger. */
.page-lead { font-size: 17px; line-height: 1.58; }
.prose p { font-size: 16px; line-height: 1.68; }
.sec-intro { font-size: 16.5px; line-height: 1.65; }
/* Lange Normbezeichnungen und Wortverbindungen brechen sonst aus
dem Satzspiegel. */
h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }
}
/* ------------------------------------------------------------
12 · BEDIENBARKEIT
Tippflächen unter 40px trifft man mit dem Daumen nicht
zuverlässig; Formularfelder unter 16px lassen iOS beim
Hineintippen in die Seite zoomen.
------------------------------------------------------------ */
@media (max-width: 700px) {
.more-link,
.lsp-mehr,
.post-more,
.foot-links a,
.crumbs a {
display: inline-block;
min-height: 24px;
padding-top: 8px; padding-bottom: 8px;
}
.foot-col a { padding: 6px 0; margin-bottom: 2px; }
.ref-filter { gap: 8px; }
.ref-filter button { min-height: 40px; padding: 0 14px; font-size: 14px; }
.field input,
.field textarea,
.field select,
.kt-seite .field input,
.kt-seite .field textarea { font-size: 16px; min-height: 46px; }
.kt-seite .field textarea { min-height: 110px; }
.submit, .btn-primary, .btn-light { min-height: 48px; display: flex; align-items: center; justify-content: center; }
/* Aufklapper: die ganze Zeile ist die Tippfläche, nicht nur der
Titel. */
.faq-q, .ref-head, .mship-toggle, .refnote-toggle { min-height: 48px; }
/* Der Regler auf der Startseite wird mit dem Finger gezogen. Zwei
Dinge standen dem im Weg:
1. touch-action. Ohne Angabe deutet der Browser eine Geste erst
einmal als Scrollen und gibt sie dem Regler nicht weiter - das
Ziehen „glitschte" weg, sobald der Finger minimal schräg lief.
„pan-y" behält das senkrechte Scrollen (man muss an der Skala
vorbeikommen können), gibt die waagerechte Bewegung aber an
den Regler.
2. Die Trefferfläche. Der Balken ist zwar hoch, der eigentliche
Griff war aber ein 2px-Strich; danebengetippt passierte nichts.
Das unsichtbare Eingabefeld deckt jetzt die Skala mit etwas
Überstand nach oben und unten ab. */
/* Der Balken wird von mobile.js gezogen, nicht mehr vom Eingabefeld.
touch-action:none, weil die Geste sonst nach wenigen Pixeln an den
Seitenscroll fällt - genau das war das „Glitschen". Der Balken ist
rund 65px hoch; gescrollt wird überall sonst. */
.dbx-bar { touch-action: none; cursor: ew-resize; }
.dbx-input { pointer-events: none; }
.dbx-knob { width: 4px; }
}
/* Der Griff selbst wird sichtbar größer - er ist die Einladung, zu
ziehen, und war als Haarstrich kaum als Bedienteil zu erkennen. */
@media (max-width: 700px) and (pointer: coarse) {
.dbx-knob { width: 6px; border-radius: 3px; }
}
/* ------------------------------------------------------------
13 · FUSS UND NAVIGATION
Der Fuss fiel unter 560px auf eine Spalte und war damit rund
900px lang - vier Linklisten untereinander. Zwei Spalten
halbieren das, ohne dass eine Zeile umbricht.
------------------------------------------------------------ */
/* Auf dem Desktop stehen Adresse und Rufnummern zweizeilig wie bisher -
die Spans ersetzen nur die frueheren
. */
.foot-adr span, .foot-fon span { display: block; }
/* Zusammenhalten, was nicht getrennt werden darf - etwa die
Nummer eines Normenarbeitskreises. */
.nowrap { white-space: nowrap; }
@media (max-width: 700px) {
/* Der Abschluss trug vier Linkspalten und war damit fast 900px lang -
zweimal die Navigation, die auch im Menue steht. Auf dem Telefon
bleiben Marke, Kontakt und die Rechtslinks. */
.foot-top {
display: block;
padding-bottom: 26px;
}
.foot-top > .foot-col:not(.foot-kontakt) { display: none; }
.foot-about { display: none; }
.foot-logo { margin-bottom: 22px; }
.foot-kontakt { margin-top: 4px; }
.foot-kontakt h4 { margin-bottom: 12px; }
.foot-col p, .foot-col a { margin-bottom: 7px; }
/* Adresse in eine Zeile, Rufnummer und Fax je eine eigene. Die
Rufnummern dürfen nicht umbrechen - sonst stand das „F" allein
über der Faxnummer. */
.foot-adr span { display: inline; }
.foot-adr span + span::before { content: ", "; }
.foot-fon span { display: block; white-space: nowrap; }
.foot-fon a { display: inline; }
.foot-bottom { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; padding-top: 20px; }
.foot-links { gap: 6px 18px; }
footer { padding: 40px 0 28px; }
}
/* Das ausgeklappte Menü ist position:fixed und soll vom oberen bis
zum unteren Bildschirmrand reichen. Es blieb aber 118px hoch, also
ein schmaler Streifen mit eigener Scrollleiste, in dem von 997px
Menü fast nichts zu sehen war.
Grund ist der backdrop-filter des Kopfbalkens: ein Element mit
Filter wird zum Bezugsrahmen für alle fixierten Nachfahren, und
das Menü liegt im . top:0/bottom:0 meinten damit nicht den
Bildschirm, sondern den Balken. Auf dem Telefon entfällt der
Filter deshalb - die Fläche wird stattdessen fast deckend, was
über Fotos ohnehin ruhiger steht. */
@media (max-width: 1080px) {
header {
-webkit-backdrop-filter: none; backdrop-filter: none;
background: rgba(255,255,255,.97);
}
/* Ein dunkler Schleier hinter dem offenen Menü: sonst steht die
Seite ungedimmt daneben.
Der Schleier MUSS unter 60 liegen. Der Kopfbalken ist sticky mit
z-index:60 und damit ein eigener Stapelzusammenhang - das Menü
darin kann mit seinem z-index:70 nur innerhalb dieses Zusammen-
hangs steigen, nach aussen zaehlt die 60 des Balkens. Ein
Schleier mit 65 liegt deshalb ueber dem ganzen Balken samt Menue:
es sah ausgegraut aus und nahm keine Tipper mehr an.
Der Schleier faengt Tipper bewusst ab - mobile.js schliesst damit
das Menue. Ohne ihn landete der Tipper auf einem Link darunter. */
body.nav-open::after {
content: ""; position: fixed; inset: 0; z-index: 55;
background: rgba(1,35,46,.42);
}
/* Die Zeilen bleiben bei ihren Massen: sie sind mit rund 50px bzw.
43px schon gut zu treffen, und jeder zusätzliche Punkt schiebt
das Menü (17 Zeilen) weiter über den Bildschirmrand hinaus. */
.nav-links { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
}
/* ------------------------------------------------------------
14 · TOUCH STATT ZEIGER
Ohne Maus bleibt ein :hover nach dem Antippen stehen - die
Karte bleibt angehoben, das Logo vergrössert. Auf Geräten ohne
Zeiger werden diese Zustände deshalb abgeschaltet.
------------------------------------------------------------ */
@media (hover: none) {
.fact:hover,
.link-card:hover,
.post-card:hover,
.tm-card:hover { transform: none; box-shadow: none; }
.mship-logo:hover,
.mg-eintrag:hover .mg-logo img,
.post-card:hover .post-media img,
.ref-card:hover .ref-media img { transform: none; }
.lsp a:hover { background: none; }
}
/* ------------------------------------------------------------
15 · MESSSYSTEM · HINWEIS ZUR SOFTWARE
Der Hinweis stand als Textwand auf hellem Grund direkt unter der
dunklen Szene - ein harter Wechsel fuer eine Fussnote. Er steht
jetzt innerhalb der Szene und benutzt dieselbe Klappbox wie die
Einordnung unter der Versandszene (.scene-fussnote/.quellen-fold);
Grund, Abstand und Farben kommen von dort. Eigene Regeln braucht
es hier deshalb nicht mehr, nur den Anschluss nach unten.
------------------------------------------------------------ */
.scene--app .scene-fussnote { padding-bottom: clamp(28px, 4vh, 52px); }
/* ------------------------------------------------------------
16 · WISSENSMARKE IN DIE ECKE
Die Marke sitzt mit clamp(14px,3vh,34px) unter der Navigation und
clamp(16px,4vw,42px) vom Rand - am Desktop richtig, auf dem
Telefon lag sie mitten in der Grafik, weil die Grafik dort oben
beginnt statt rechts daneben. Sie rückt deshalb in die Ecke.
------------------------------------------------------------ */
@media (max-width: 860px) {
/* Ganz in die Ecke: die Marke ordnet ein, sie ist kein Inhalt und
darf nichts verdecken. Unter der Navigation beginnt die Grafik,
also sitzt sie direkt darunter am Rand. */
/* Der Abstand von einer Navigationshoehe stammt vom Desktop: dort
liegt die Szene hinter dem durchscheinenden Kopfbalken und die
Marke muss ihn unterlaufen. Auf dem Telefon steht der Balken im
Fluss, die Szene beginnt also erst darunter - der Abstand wurde
doppelt gezaehlt und schob die Marke mitten in die Grafik. */
.scene-badge {
top: 10px;
left: auto; right: 10px;
}
/* Auf der Pegelbuehne steht links die Ueberschrift - dort waere die
Marke im Weg. Sie wechselt auf dieselbe Hoehe nach rechts. */
.pegelbuehne .scene-badge--statisch {
top: 8px; left: auto; right: 8px;
}
}
/* ------------------------------------------------------------
17 · ABSCHNITTSENDE NACH DEM VERWEIS
Der „Alle …"-Verweis steht jetzt am unteren Rand des Abschnitts.
Darunter kam aber noch die volle Abschnittsfüllung (62px), sodass
zwischen Verweis und Farbwechsel mehr Luft stand als über ihm.
Der Abstand nach unten wird deshalb gekürzt - der Verweis schliesst
den Abschnitt ab und soll an seiner Kante sitzen.
------------------------------------------------------------ */
@media (max-width: 700px) {
section.block:has(.m-leiste .more-link),
section.block.tight:has(.m-leiste .more-link) {
padding-bottom: clamp(18px, 2.4vh, 26px);
}
}
/* ------------------------------------------------------------
18 · KOPFBILD AM DESKTOP HELLER
Eingestellt ueber hero-filter.html: Helligkeit 1,2 statt 0,9.
Die Abdunklung durch die Verlaeufe bleibt unveraendert - sie
traegt den Text; heller wird allein das Foto darunter.
------------------------------------------------------------ */
@media (min-width: 861px) {
.hero-bild { filter: saturate(.78) contrast(1.05) brightness(1.2); }
}
/* ------------------------------------------------------------
19 · KENNWERTZEILE DER SZENEN
Drei Kennwerte nebeneinander mit 26px Abstand passen bei 335px
Textbreite nicht: beim technischen Schallschutz stand die dritte
Spalte („Übertragung −26 dB") halb ausserhalb. Die Zeile darf
deshalb umbrechen, die Abstände werden kleiner, und jede Spalte
bekommt eine Mindestbreite, damit die Zahl nicht vom Titel
getrennt wird.
------------------------------------------------------------ */
@media (max-width: 700px) {
.scene-readout {
display: flex; flex-wrap: wrap;
gap: 12px 18px;
margin-top: 18px;
}
.scene-readout > * { flex: 0 1 auto; min-width: 0; }
.ro-k { font-size: 10px; letter-spacing: .1em; }
.ro-v { font-size: 21px; }
}
/* ------------------------------------------------------------
20 · KONTAKT IN DER KOPFZEILE
Im ausgeklappten Menue stand Kontakt als letzter von 17 Punkten
ganz unten - man musste erst scrollen, und auf kurzen Geraeten
war er abgeschnitten. Als haeufigster Anlass eines Besuchs gehoert
er nicht ans Ende einer Liste. Er sitzt deshalb in der Kopfzeile
zwischen Logo und Menueknopf; im Menue selbst entfaellt er dort.
Am Desktop bleibt alles wie bisher: der Punkt steht in der Zeile
der Navigation, der zusaetzliche Verweis ist ausgeblendet.
------------------------------------------------------------ */
.nav-kontakt-mobil { display: none; }
@media (max-width: 1080px) {
.nav-kontakt-mobil {
display: inline-flex; align-items: center;
padding: 9px 16px; border-radius: 7px;
background: var(--petrol); color: #fff;
font-size: 14.5px; font-weight: 600; text-decoration: none;
white-space: nowrap;
transition: background .2s;
}
.nav-kontakt-mobil:hover { background: var(--accent); }
/* Im Menue waere er jetzt doppelt. */
.nav-links > .nav-kontakt { display: none; }
/* Der Knopf rueckt neben den Verweis, nicht an den Rand. */
.nav-right { gap: 14px; }
}
@media (max-width: 380px) {
.nav-kontakt-mobil { padding: 8px 12px; font-size: 13.5px; }
}
/* ------------------------------------------------------------
21 · SEITENKOEPFE NACH INHALT, NICHT NACH BILDSCHIRM
Die Koepfe der Unterseiten sind einen ganzen Bildschirm hoch
(min-height:--head-h). Am Desktop traegt das: dort steht die
Signaturanimation neben dem Text und fuellt die Flaeche. Auf dem
Telefon steht der Text allein, und gemessen bleiben 160 bis 258px
ueber und 176 bis 258px unter ihm leer - beim Messsystem eine
einfarbige obere Bildschirmhaelfte.
Der Kopf richtet sich mobil deshalb nach seinem Inhalt. Die
Teamseite macht das schon so (388px statt 734px) und ist das
Vorbild. Die Animation rueckt damit zusammen und wird sichtbar,
statt sich auf einer leeren Flaeche zu verlieren.
Nachtrag: Das galt zwischenzeitlich fuer alle Koepfe. Auf Wunsch
sind die Seitenkoepfe wieder bildschirmfuellend; in Inhaltshoehe
stehen nur noch die Beitragskoepfe (.article-head).
------------------------------------------------------------ */
@media (max-width: 860px) {
/* Die Seitenkoepfe bleiben bildschirmfuellend, wie am Desktop:
Sie sind der Einstieg in die Seite und sollen ihn auch auf dem
Telefon tragen. Nur die Beitragskoepfe richten sich nach ihrem
Inhalt - dort steht ein Aufmacher mit Verfasser und Datum, und
ein ganzer Bildschirm davor schoebe den Beitrag selbst aus dem
Bild. */
.article-head {
min-height: 0;
padding-top: clamp(34px, 5vh, 56px);
padding-bottom: clamp(40px, 6vh, 66px);
}
/* Der Weiterhinweis gehoert zu einem bildschirmfuellenden Kopf.
Bei einem Kopf in Inhaltshoehe steht der naechste Abschnitt
ohnehin schon im Bild. */
.article-head > .scroll-cue { display: none; }
/* Auf der kleineren Flaeche darf die Animation deutlicher sein -
sie ist jetzt hinter dem Text, nicht mehr neben ihm auf leerem
Grund. */
.page-head .head-sig,
.article-head .head-sig { opacity: .5; }
}
/* ------------------------------------------------------------
22 · SPEKTROGRAMM AUF DER ANALYSENSEITE
Die Fotoregel beschneidet Bilder auf ein Format (object-fit:cover,
max-height:440px). Bei einem Spektrogramm geht das nicht: Jede
Stelle traegt Information, ein Beschnitt schneidet Frequenzen oder
Zeit weg. Das Bild steht deshalb vollstaendig und im Hochformat.
Gilt fuer alle Breiten - es geht um den Bildinhalt, nicht um die
Bildschirmgroesse.
------------------------------------------------------------ */
.tool-foto--spektro { max-width: 250px; background: #0b1c22; }
.tool-foto--spektro img {
height: auto; max-height: none; object-fit: contain;
}
/* Die Bildspalte wird schmaler, damit der Text den frei werdenden Platz
bekommt und nicht in einer duennen Saeule steht. */
.tool-row--foto:has(.tool-foto--spektro) {
grid-template-columns: minmax(0, 0.40fr) minmax(0, 1fr);
}
@media (max-width: 820px) {
.tool-row--foto:has(.tool-foto--spektro) { grid-template-columns: 1fr; }
.tool-foto--spektro { max-width: 200px; margin-left: auto; margin-right: auto; }
}
/* ------------------------------------------------------------
23 · ZEITSTRAHL AUF STEHENDEM GRUND
Der Zeitstrahl lief bisher auf hellem Grund, unterbrochen von zwei
bildschirmbreiten Videobaendern - die Baender waren dabei staerker
als die Jahre, um die es geht.
Jetzt traegt der ganze Abschnitt einen gemeinsamen Grund: dieselben
Isophonen-Konturen wie der Kopf der Immissionsprognosen und der
Kontaktseite. Er steht still (sticky), waehrend der Strahl darueber
wandert - so bleibt sichtbar, dass die Jahre zu einer Entwicklung
gehoeren. Die beiden Videos stehen als normale Figuren im Posten,
also als Beleg zum Text und nicht an seiner Stelle.
Gilt fuer alle Breiten: es geht um den Aufbau des Abschnitts.
------------------------------------------------------------ */
.tlz-buehne {
position: relative;
background: #012530;
color: #eaf4f7;
isolation: isolate;
}
/* Der Grund bleibt beim Scrollen stehen, der Abschnitt wandert darueber.
Wichtig ist, WIE das gebaut ist: Ein sticky Element mit
margin-bottom:-100vh hat eine Randbox der Hoehe null - seine
Haftgrenze liegt damit nicht mehr am Abschnittsende, und der Grund
lief unter den folgenden Abschnitt weiter. Auf der Unternehmensseite
stand dadurch die Mitgliedschafts-Flaeche auf dem dunklen Grund des
Zeitstrahls.
Stattdessen: ein absolut gesetzter Rahmen deckt genau den Abschnitt
ab und begrenzt damit alles darin. Er benutzt overflow:clip, nicht
hidden - hidden wuerde einen eigenen Scrollbereich aufmachen, und
das sticky darin haette nichts mehr, woran es haften kann. */
.tlz-grund {
position: absolute; inset: 0; z-index: 0;
overflow: clip; pointer-events: none;
}
.tlz-grund .head-sig {
position: sticky; top: 0;
display: block; height: 100vh; opacity: .55;
}
.tlz-grund .head-sig::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg,
rgba(1,37,48,.72) 0%, rgba(1,37,48,.52) 40%,
rgba(1,37,48,.52) 60%, rgba(1,37,48,.86) 100%);
}
.tlz-buehne > .wrap { position: relative; z-index: 1; }
/* Schrift auf dunklem Grund */
.tlz-buehne .sec-title { color: #fff; }
.tlz-buehne .sec-intro { color: rgba(207,228,234,.86); }
.tlz-buehne .sec-eyebrow { color: var(--skyblue); }
.tlz-buehne .tlz-jahr { color: var(--skyblue); }
.tlz-buehne .tlz-karte {
background: rgba(1,30,40,.72);
border-color: rgba(175,209,219,.22);
backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.tlz-buehne .tlz-karte p { color: #dfeef3; }
.tlz-buehne .tlz-karte a { color: var(--skyblue); }
.tlz-buehne .tlz-schiene { background: rgba(175,209,219,.22); }
.tlz-buehne .tlz-knoten {
background: #012530; border-color: rgba(175,209,219,.7);
}
.tlz-buehne .tlz-posten.is-an .tlz-knoten { background: var(--skyblue); }
/* Die Videos: Beleg zum Text, nicht Buehne. */
.tlz-video { margin: 0 0 16px; }
.tlz-video .tl-figure {
margin: 0; max-width: 420px;
border: 1px solid rgba(175,209,219,.22); border-radius: 10px;
overflow: hidden; background: #0b2b36;
aspect-ratio: 16 / 10;
}
.tlz-video video {
width: 100%; height: 100%; object-fit: cover; display: block;
filter: none;
}
.tlz-video figcaption {
display: block; padding: 8px 12px 10px;
font-size: 12.5px; line-height: 1.45;
color: rgba(175,209,219,.8);
background: rgba(1,30,40,.6);
}
@media (max-width: 700px) {
.tlz-video .tl-figure { max-width: none; }
.tlz-grund .head-sig { opacity: .42; }
}
/* ------------------------------------------------------------
24 · KONTAKTSEITE IN DER FASSUNG DER LANDINGPAGE (NUR MOBIL)
Die Landingpage stellt Anschrift, Rufnummern und E-Mail als
eigene Zeilen mit Zeichen untereinander und den Ansprechpartner
mit grossem Bild darunter. Auf dem Telefon liest sich das
schneller als die bisherige Fassung, in der Adresse und
Einsatzgebiet in einem Fliesstext standen.
Umgesetzt allein ueber Stile - das Markup der Seite bleibt, wie
es ist, und der Desktop damit unveraendert. Die beiden fehlenden
Zeichen (Ort, Briefumschlag) kommen als ::before, damit dafuer
keine Elemente ergaenzt werden muessen.
------------------------------------------------------------ */
@media (max-width: 860px) {
/* --- Rufnummernzeile: aus dem grossen Knopf wird eine Zeile --- */
.kt-seite .kt-tel--kopf {
display: flex; align-items: flex-start; gap: 13px;
margin-top: 26px; padding: 0; border: 0; background: none;
font-size: 15px; line-height: 1.5; color: #e3eff2;
}
.kt-seite .kt-tel--kopf svg {
width: 19px; height: 19px; flex: 0 0 19px; margin-top: 2px;
color: var(--skyblue);
}
.kt-seite .kt-tel--kopf span { display: block; }
.kt-seite .kt-tel--kopf b {
font-weight: 400; color: #fff;
border-bottom: 1px solid rgba(175,209,219,.4);
}
.kt-seite .kt-tel--kopf b::before { content: "Telefon "; border: 0; }
.kt-seite .kt-tel--kopf small {
display: block; margin-top: 2px;
font-size: 13px; color: rgba(175,209,219,.75);
}
/* --- Adresse und E-Mail als zwei Zeilen mit Zeichen ---------- */
.kt-seite .kt-kurz {
display: flex; flex-direction: column; gap: 13px;
margin-top: 13px; font-size: 15px; line-height: 1.5;
}
.kt-seite .kt-kurz > a,
.kt-seite .kt-kurz > span {
display: flex; gap: 13px; align-items: flex-start;
color: #e3eff2; font-size: 15px;
}
.kt-seite .kt-kurz > a {
color: #fff; text-decoration: none;
overflow-wrap: anywhere;
}
.kt-seite .kt-kurz > a::before,
.kt-seite .kt-kurz > span::before {
content: ""; flex: 0 0 19px; width: 19px; height: 19px;
margin-top: 2px;
background-repeat: no-repeat; background-position: center;
background-size: 19px 19px;
}
/* Briefumschlag */
.kt-seite .kt-kurz > a::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none'%3E%3Crect x='3' y='5' width='18' height='14' rx='2' stroke='%23afd1db' stroke-width='2'/%3E%3Cpath d='M4 7l8 6 8-6' stroke='%23afd1db' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Ortsmarke */
.kt-seite .kt-kurz > span::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 21s-7-5.6-7-11a7 7 0 1114 0c0 5.4-7 11-7 11z' stroke='%23afd1db' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='10' r='2.5' stroke='%23afd1db' stroke-width='2'/%3E%3C/svg%3E");
}
/* --- Ansprechpartner mit Ueberschrift und groesserem Bild ---- */
.kt-seite .kt-personen {
margin-top: 28px; padding-top: 22px;
border-top: 1px solid rgba(175,209,219,.22);
gap: 18px 26px;
}
.kt-seite .kt-personen::before {
content: "Ihr Ansprechpartner";
flex: 1 0 100%;
font-size: 11px; font-weight: 600; letter-spacing: .13em;
text-transform: uppercase; color: var(--skyblue);
margin-bottom: -4px;
}
.kt-seite .kt-personen img {
width: 60px; height: 60px; border-radius: 50%; object-fit: cover;
box-shadow: 0 0 0 1px rgba(175,209,219,.45), 0 6px 16px rgba(0,0,0,.25);
}
.kt-seite .kt-name { font-size: 15px; font-weight: 600; }
.kt-seite .kt-rolle { font-size: 13px; }
}
/* ------------------------------------------------------------
25 · SOFTWARE-HINWEIS UNTER DEM FENSTER
Der Hinweis stand als eigener Abschnitt unter der Szene, mit deren
Fuellung darueber und seiner eigenen darunter - dazwischen zwei
grosse leere Flaechen. Er steht jetzt in der Szene selbst, in
derselben Form wie die Einordnung unter der Versandszene
(.scene-fussnote mit .quellen-fold). Damit stimmen Abstand und
Gestaltung von allein; hier bleibt nur der Anschluss an das
Programmfenster.
------------------------------------------------------------ */
@media (max-width: 860px) {
.scene--app .scene-stage { padding-bottom: 0; }
.app-buehne { margin-bottom: 0; }
.scene--app .scene-fussnote { padding-top: 4px; }
}
/* ------------------------------------------------------------
26 · KOPFBEREICH: WISCHEN OHNE RUCKELN
Der Kopfbereich der Startseite war der einzige Wischbereich, der
nie zuverlaessig lief. Die gleich gebaute Leistungsuebersicht
laeuft dagegen sauber, und beide benutzen dieselbe Scrollbahn mit
Rastpunkten. Der Unterschied lag nicht in der Bahn, sondern in
dem, was daneben passierte. Zwei Dinge, beide unsichtbar
behoben - am Aufbau und am Aussehen aendert sich nichts.
1. Die Ueberblendung kostete die Frames des Bildlaufs.
Die Szene schrieb bei JEDEM Einzelbild opacity und ein neues
transform:scale() auf vier bildschirmfuellende, gefilterte
Bilder. Waehrend der Daumen die Bahn zieht, rechnet das Geraet
dann vier grosse Ebenen neu, und fuer den Bildlauf bleibt
nichts uebrig: Die Bahn bleibt zwischen zwei Folien stehen.
Die Leistungsuebersicht hat davon nichts zu tun, sie zeichnet
eine Kurve ins Canvas.
Mobil loest deshalb ein Klassenwechsel je Folie den Uebergang
aus (scene-extra.js); gefahren wird er hier. Die Bilder blenden
weiter ineinander und ziehen dabei leicht auf, mit denselben
Werten wie zuvor - nur eben einmal je Wechsel und im
Compositor statt sechzig Mal in der Sekunde aus dem Skript.
2. Die Wischflaeche war nur das Textband am unteren Rand.
Ein Wisch, der auf dem Foto begann, lief ins Leere. Die Bahn
bekommt deshalb einen hohen oberen Innenabstand und denselben
Betrag als negativen Aussenabstand zurueck: Ihr Kasten deckt
damit die ganze Buehne ab und nimmt den Wisch entgegen,
waehrend die Folien an genau derselben Stelle stehen wie
vorher. Die Auszeichnungszeile liegt darunter und bleibt
sichtbar; angetippt werden muss sie nicht.
------------------------------------------------------------ */
@media (max-width: 860px) {
/* Sichtbar ist das mit .is-da ausgezeichnete Bild. Die Werte sind
dieselben wie in der Grundregel fuer .hero-bild, nur wird jetzt
zwischen ihnen ueberblendet, statt jeden Zwischenwert einzeln zu
setzen. Den Uebergang bringt die Grundregel bereits mit. */
.scene--foto .hero-bild {
opacity: 0;
transform: scale(1.06);
will-change: opacity, transform;
}
.scene--foto .hero-bild.is-da {
opacity: 1;
transform: scale(1);
}
/* Nur Trefferflaeche, keine Verschiebung: Der Innenabstand hebt
den Kasten nach oben, der gleich grosse negative Aussenabstand
nimmt ihn im Fluss wieder heraus. */
.scene--hero.scene--foto .scene-copy > .scene-steps.m-track {
padding-top: 62vh;
margin-top: -62vh;
}
}
/* ------------------------------------------------------------
27 · COOKIE-HINWEIS
Die Leiste wird von site.js gebaut, damit sie nicht in
fuenfundzwanzig Seiten einzeln gepflegt werden muss. Hier steht
nur, wie sie aussieht.
Sie sitzt unten am Bildschirmrand, nicht mittig als Sperrflaeche:
Die Seite bindet nichts von Dritten ein, es ist also nichts zu
blockieren, und ein Hinweis, der die Seite verdeckt, waere
unverhaeltnismaessig. Auf dem Telefon stehen die beiden Knoepfe
nebeneinander und fuellen die Breite - dort ist die Leiste ohnehin
ein Balken.
Gilt fuer alle Breiten.
------------------------------------------------------------ */
.ck-leiste {
/* Unter dem Kopfbereich (z-index 60) und unter dem Schleier des
offenen Menues (55): Sonst schwebte die Leiste ueber dem
aufgeklappten Menue. Am unteren Rand kommt sie dem Kopf ohnehin
nicht in die Quere. */
position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
background: rgba(1, 37, 48, .97);
border-top: 1px solid rgba(175, 209, 219, .22);
box-shadow: 0 -18px 44px -28px rgba(1, 20, 28, .9);
color: #dcecf1;
}
/* Bewusst ohne Einfahr-Animation.
Erst war es ein Uebergang, dann eine Animation - beide haben in
Umgebungen, in denen keine Bewegung laeuft, denselben Fehler: Die
Leiste bleibt auf ihrem Startbild stehen, also unsichtbar unter dem
Bildschirmrand, und ist damit nicht zu bedienen. Bei einer
Einwilligungsleiste ist Sichtbarkeit die eine Eigenschaft, auf die
es ankommt; ein huebscher Auftritt wiegt dieses Risiko nicht auf.
Sie steht deshalb einfach da.
Beim Wegblenden ist das unkritisch - dort ist der Endzustand
"weg", und entfernt wird sie ohnehin per Skript. */
.ck-leiste.geht {
transform: translateY(100%);
transition: transform .3s ease;
}
@media (prefers-reduced-motion: reduce) {
.ck-leiste.geht { transition: none; }
}
/* Bei offenem Menue ganz weg - der Schleier deckt sie zwar ab, aber
ein halb sichtbarer Balken unter dem Menue sieht nach Fehler aus. */
body.nav-open .ck-leiste { opacity: 0; pointer-events: none; }
@supports (padding: env(safe-area-inset-bottom)) {
.ck-leiste { padding-bottom: env(safe-area-inset-bottom); }
}
.ck-innen {
max-width: 1120px; margin: 0 auto;
padding: 16px var(--wrap-pad, 30px);
display: flex; align-items: center; gap: 22px;
}
.ck-text {
margin: 0; font-size: 14px; line-height: 1.6;
color: rgba(220, 236, 241, .88);
}
.ck-text a { color: var(--skyblue); font-weight: 600; }
.ck-text a:hover { color: #fff; }
.ck-knoepfe { display: flex; gap: 10px; flex: 0 0 auto; }
.ck-knopf {
font: inherit; font-size: 14px; font-weight: 600;
padding: 10px 18px; border-radius: 6px; cursor: pointer;
border: 1px solid transparent;
transition: background .2s, color .2s, border-color .2s;
}
.ck-knopf--haupt { background: var(--skyblue); color: #012530; }
.ck-knopf--haupt:hover { background: #fff; }
.ck-knopf--zweit {
background: transparent; color: #cfe4ea;
border-color: rgba(175, 209, 219, .38);
}
.ck-knopf--zweit:hover { border-color: #fff; color: #fff; }
.ck-knopf:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 760px) {
.ck-innen {
display: block;
padding: 14px var(--wrap-pad, 20px) 16px;
}
.ck-text { font-size: 13.5px; }
.ck-knoepfe { margin-top: 12px; }
.ck-knopf { flex: 1 1 0; padding: 12px 10px; }
}
/* ------------------------------------------------------------
28 · ANLIEGEN-STREIFEN UND FERNMESSUNG (alle Breiten)
Beides sind neue Abschnitte der Startseite. Sie stehen hier und
nicht in styles.css, damit die Ergaenzungen dieser Runde an einer
Stelle liegen; Medienabfragen haben sie nur dort, wo das Telefon
wirklich etwas anderes braucht.
------------------------------------------------------------ */
/* --- Anlass je Leistungsspalte --------------------------------
Der Besucher kommt mit einer Situation, nicht mit dem Namen einer
Leistung. Jede Spalte nennt deshalb vor der Beschreibung den Fall,
in dem sie gebraucht wird.
Das stand zwischenzeitlich als eigener Streifen unter dem
Kopfbereich. Dort war es eine zweite Liste derselben Seiten,
wenige Bildschirme ueber dieser hier - die Zeile gehoert an die
Spalte, die sie erklaert, nicht in einen eigenen Abschnitt. */
.lsp-fall {
margin: 0 0 8px;
font-size: 12.5px; font-weight: 700;
letter-spacing: .04em;
color: var(--accent);
line-height: 1.4;
}
.lsp a:hover .lsp-fall { color: var(--petrol); }
/* --- Fernmessung ----------------------------------------------
Als Verfahren beschrieben, nicht als Angebot: Wer bis hierher
gelesen hat, will wissen, wie gemessen wird, und nicht noch eine
Aufforderung. Deshalb Schritte und ein Verweis, keine
Schaltflaeche - die steht am Ende der Seite.
Der Abschnitt bestand zuerst nur aus drei Halbsaetzen. Das war zu
wenig fuer die Stelle: Er steht zwischen zwei ausgebauten
Abschnitten und sah daneben aus wie ein vergessener Rest. Jetzt
traegt jeder Schritt einen Satz, dazu kommen ein Bild und der
Hinweis, wo das Verfahren aufhoert. */
.fm-kopf {
display: grid; gap: 28px 40px; align-items: center;
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
}
.fm-bild { margin: 0; }
.fm-bild img {
display: block; width: 100%; height: auto; border-radius: 10px;
}
.fm-schritte {
list-style: none; margin: 30px 0 0; padding: 0;
display: grid; gap: 22px 32px;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.fm-schritte li {
position: relative;
padding-left: 38px;
font-size: 15px; line-height: 1.6; color: var(--ink-soft);
}
/* Der fette Anfang traegt die Handlung, der Rest die Bedingungen -
so ist die Reihe auch im Ueberfliegen zu lesen. */
.fm-schritte b { display: block; color: var(--petrol); margin-bottom: 3px; }
.fm-n {
position: absolute; left: 0; top: 1px;
width: 25px; height: 25px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700;
color: var(--petrol); background: var(--bg-tint, #f2f7f9);
border: 1px solid var(--line);
}
.fm-grenze {
margin: 26px 0 0; padding-top: 18px;
border-top: 1px solid var(--line);
font-size: 14px; color: var(--ink-soft);
/* Keine Breitenbegrenzung: Die Linie darueber gehoert zum Absatz und
endete sonst mitten im Abschnitt. Der Satz ist von sich aus kurz. */
}
.fernmess .more-link { margin-top: 18px; }
@media (max-width: 820px) {
/* Untereinander, Bild zuerst: Auf dem Telefon traegt es den
Einstieg besser als drei Zeilen Text davor. */
.fm-kopf { grid-template-columns: 1fr; gap: 20px; }
.fm-bild { order: -1; max-width: 320px; margin: 0 auto; }
}
/* ------------------------------------------------------------
30 · SELBSTTEST TIEFFREQUENTER SCHALL
Zu selbsttest.js, nur auf der Fernmessseite.
Der Test stand zuerst in einer Klappbox, die Antworten als kleine
Pillen nebeneinander. Das trug nicht mehr, sobald jede Frage eigene
Antworten bekam: "Eher Druck oder Vibration als Geraeusch" passt in
keine Pille, und vier verschieden lange Pillen in einer Zeile
brechen unruhig um.
Deshalb jetzt eine offen stehende Tafel mit einer Antwort je Zeile.
Die Zeile ist die Trefferflaeche, der Punkt links zeigt die Wahl.
Das liest sich auf dem Telefon wie eine Liste und am Desktop wie
ein Formular, und die Laenge der Antwort spielt keine Rolle mehr.
------------------------------------------------------------ */
.stf {
margin-top: 34px;
border: 1px solid var(--line);
border-left: 3px solid var(--petrol);
border-radius: 12px;
background: #fff;
overflow: hidden;
}
/* Der Kopf ist zugleich der Schalter: Zugeklappt bleibt der Abschnitt
kurz, wer den Test will, oeffnet ihn. */
.stf-kopf {
display: block; cursor: pointer; list-style: none;
position: relative;
padding: 22px 56px 20px 28px;
background: var(--bg-tint, #f3f8fa);
}
.stf-kopf::-webkit-details-marker { display: none; }
.stf-kopf::after {
content: "+"; position: absolute; right: 24px; top: 50%;
transform: translateY(-50%);
font-size: 22px; font-weight: 400; color: var(--ink-soft);
}
.stf[open] .stf-kopf {
border-bottom: 1px solid var(--line);
}
.stf[open] .stf-kopf::after { content: "\2013"; }
.stf-k {
display: block;
font-size: 11px; font-weight: 700; letter-spacing: .14em;
text-transform: uppercase; color: var(--accent); margin-bottom: 8px;
}
.stf-titel {
display: block; font-size: clamp(18px, 2.1vw, 22px); line-height: 1.3;
font-weight: 700; color: var(--petrol);
}
.stf-kopf:hover .stf-titel { color: var(--accent); }
.stf-unter {
display: block; margin-top: 8px;
font-size: 14px; color: var(--ink-soft);
}
.stf-body { padding: 6px 28px 26px; }
/* fieldset/legend tragen die Zuordnung fuer Vorlesewerkzeuge; die
Rahmen des Browsers werden dabei abgeraeumt. */
.stf-frage {
border: 0; margin: 0; padding: 22px 0;
border-bottom: 1px solid var(--line);
}
.stf-frage:last-of-type { border-bottom: 0; }
/* Ein legend zeichnet der Browser als Titel in den Rahmen des
fieldset, ueber dessen Innenabstand hinweg: Die Frage klebte oben am
Kopf, waehrend unter ihr Innenabstand plus Rand zusammenkamen. Ein
gefloatetes legend ist kein "gezeichneter Titel" mehr und laeuft wie
ein normaler Block im Innenabstand mit. */
.stf-frage legend {
float: left; width: 100%;
/* Kreis (24px) und erste Textzeile (16px x 1,45 = 23px) sind fast
gleich hoch: oben buendig gesetzt stehen sie auf einer Hoehe, auch
wenn die Frage auf dem Telefon umbricht. */
display: flex; align-items: flex-start; gap: 12px;
padding: 0; margin-bottom: 14px;
font-size: 16px; line-height: 1.45; font-weight: 600; color: var(--ink);
max-width: 60ch;
}
.stf-nr {
flex: 0 0 auto;
width: 24px; height: 24px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700;
color: var(--petrol); background: var(--bg-tint, #f3f8fa);
border: 1px solid var(--line);
}
.stf-optionen { clear: both; display: grid; gap: 6px; max-width: 46rem; }
.stf-opt {
display: flex; align-items: center; gap: 12px;
padding: 11px 14px; border-radius: 8px;
border: 1px solid var(--line); background: #fff;
cursor: pointer;
transition: border-color .16s, background .16s;
}
.stf-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.stf-marke {
flex: 0 0 auto;
width: 17px; height: 17px; border-radius: 50%;
border: 2px solid #b8c6cc; background: #fff;
transition: border-color .16s, box-shadow .16s;
}
.stf-text { font-size: 14.5px; line-height: 1.4; color: var(--ink-soft); }
.stf-opt:hover { border-color: var(--accent); }
.stf-opt:hover .stf-marke { border-color: var(--accent); }
/* Gewaehlt: gefuellter Punkt und ruhig getoente Zeile - kein
Vollton, damit die Tafel bei fuenf Antworten nicht flackert. */
.stf-opt:has(input:checked) {
border-color: var(--petrol);
background: var(--bg-tint, #f3f8fa);
}
.stf-opt:has(input:checked) .stf-marke {
border-color: var(--petrol);
box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 10px var(--petrol);
}
.stf-opt:has(input:checked) .stf-text { color: var(--petrol); font-weight: 600; }
/* Der Fokus muss sichtbar bleiben, obwohl das Feld selbst unsichtbar
ist - sonst waere die Tastaturbedienung blind. */
.stf-opt:has(input:focus-visible) {
outline: 2px solid var(--accent); outline-offset: 2px;
}
.stf-offen {
margin: 0; padding-top: 20px;
border-top: 1px solid var(--line);
font-size: 14px; color: var(--ink-soft);
}
.stf-erg {
margin-top: 22px; padding: 22px 24px;
border-radius: 10px; background: var(--bg-tint, #f3f8fa);
border-left: 4px solid var(--accent);
}
.stf-erg h3 { margin: 0 0 8px; font-size: 17.5px; color: var(--petrol); }
.stf-erg p {
margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--ink-soft);
max-width: 70ch;
}
/* Die drei Ausgaenge unterscheiden sich nur in der Kante. Farbe traegt
hier keine Wertung, sie zeigt nur, dass es drei Faelle gibt. */
.stf-erg--hin { border-left-color: var(--petrol); }
.stf-erg--unklar { border-left-color: var(--accent); }
.stf-erg--weg { border-left-color: #b8c6cc; }
.stf-weiter {
display: inline-block; margin-top: 14px;
font-size: 14px; font-weight: 700; color: var(--petrol);
text-decoration: none; border-bottom: 1px solid currentColor;
}
.stf-weiter:hover { color: var(--accent); }
.stf-vorbehalt {
margin: 16px 0 0; padding-top: 13px;
border-top: 1px solid var(--line);
font-size: 12.5px; line-height: 1.55;
color: var(--ink-soft); opacity: .85; max-width: 70ch;
}
@media (max-width: 600px) {
.stf-kopf { padding: 18px 48px 16px 18px; }
.stf-kopf::after { right: 18px; }
.stf-body { padding: 4px 18px 22px; }
.stf-frage { padding: 18px 0; }
.stf-frage legend { font-size: 15.5px; gap: 10px; }
.stf-erg { padding: 18px 18px; }
}
/* ------------------------------------------------------------
31 · KOPFBILD DER FERNMESSSEITE
Der Kopf traegt das Foto des bestueckten Versandbehaelters. Die
Behandlung ist dieselbe wie bei den Kopfbildern der Startseite:
Filter, der das Foto leicht entsaettigt und abdunkelt, dazu der
Verlauf in Petrol von links, der die Textspalte traegt. So beginnt
die Seite in derselben Tonlage wie die Startseite, und der weisse
Text der Leistungskoepfe bleibt, wie er ist.
Der Ausschnitt haelt die Box rechts; die Ueberschrift ist kurz
gehalten, damit sie nicht in die Box hineinlaeuft.
------------------------------------------------------------ */
.page-head--foto { background: #012530; }
.page-head--foto .ph-foto {
position: absolute; inset: 0; z-index: 0; overflow: hidden;
}
.page-head--foto .ph-foto img {
display: block; width: 100%; height: 100%;
object-fit: cover; object-position: 74% center;
filter: saturate(.78) contrast(1.05) brightness(.9);
}
/* Verlauf wie .scene--foto .scene-stage::after in scroll-scenes.css */
.page-head--foto .ph-foto::after {
content: ""; position: absolute; inset: 0;
background:
linear-gradient(100deg,
rgba(1,37,48,.94) 0%, rgba(1,37,48,.80) 34%,
rgba(1,45,58,.30) 66%, rgba(1,45,58,.14) 100%),
linear-gradient(to top, rgba(1,37,48,.80), transparent 42%);
}
.page-head--foto .wrap { position: relative; z-index: 2; }
/* Die Textspalte endet, bevor die Box beginnt: Ueberschrift auf zwei
Zeilen, der Absatz schmaler als sonst. Sonst liefen die letzten
Woerter der Zeilen unter den Deckel. */
.page-head--foto h1 { max-width: 9.5em; }
.page-head--foto .page-lead { max-width: 24em; }
@media (max-width: 860px) {
/* Mobil zeigt der schmale Ausschnitt fast nur die Box; der Verlauf
legt sich dann von unten ueber die ganze Flaeche, wie beim
Kopfbereich der Startseite (Abschnitt 8). */
.page-head--foto .ph-foto img { object-position: 60% center; }
.page-head--foto .ph-foto::after {
background: linear-gradient(to top,
rgba(1,37,48,.95) 0%, rgba(1,37,48,.92) 34%,
rgba(1,37,48,.80) 48%, rgba(1,37,48,.36) 62%,
rgba(1,37,48,.06) 80%, rgba(1,45,58,0) 100%);
}
}
/* ------------------------------------------------------------
32 · TEAM IN ZWEI GRUPPEN
Die Zwischenzeile trennt Gutachter und Buero: dieselbe Form wie
die Auszeichnungszeilen der Abschnitte, dazu eine Linie, die die
zweite Gruppe von der ersten absetzt.
------------------------------------------------------------ */
.tm-gruppe {
margin: 44px 0 0;
font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
text-transform: uppercase; color: var(--accent);
display: flex; align-items: center; gap: 14px;
}
.tm-gruppe::before {
content: ""; width: 28px; height: 2px; background: currentColor;
}
.tm-gruppe + .tm-grid { margin-top: 22px; }
.tm-gruppe--zweite {
margin-top: 52px; padding-top: 40px;
border-top: 1px solid var(--line);
max-width: 860px;
}
/* ------------------------------------------------------------
33 · DER BERICHT (Fernmessseite)
Die Titelseite steht als Blatt neben dem Text: mit Schatten und
leichter Kante, damit sie als Dokument gelesen wird und nicht als
Foto. Reine Ansicht, kein Link und kein Download.
------------------------------------------------------------ */
.br-row {
display: grid; gap: 28px 44px; align-items: start;
grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
}
.br-vorschau {
position: relative; display: block;
border-radius: 6px; overflow: hidden;
border: 1px solid var(--line);
box-shadow: 0 18px 40px -20px rgba(1,42,61,.45);
}
.br-vorschau img { display: block; width: 100%; height: auto; }
.bericht .prose { max-width: 58ch; }
@media (max-width: 760px) {
.br-row { grid-template-columns: 1fr; }
.br-vorschau { max-width: 340px; }
}
/* ------------------------------------------------------------
34 · REFERENZKARTE: TITEL NEBEN DER KARTE
Vorher stand der Titel ueber dem Raster und rechts neben der Karte
eine grosse Standortzahl. Die Zahl ist weg, weil sie nicht belegt
war - und ohne sie fehlte der rechten Spalte der Ankerpunkt. Jetzt
traegt die Ueberschrift diese Rolle: Sie steht neben der Karte,
darunter der Text und drei Fakten als Liste in Lesegroesse statt
als winzige Versalien.
------------------------------------------------------------ */
.refmap-grid--titel { align-items: center; }
.rm-text .sec-title { margin-bottom: 14px; }
.rm-fakten {
margin: 26px 0 0; padding: 0;
border-top: 1px solid var(--line);
}
.rm-fakten > div {
display: grid; grid-template-columns: 120px 1fr; gap: 12px;
padding: 11px 0; border-bottom: 1px solid var(--line);
font-size: 14.5px; line-height: 1.5;
}
.rm-fakten dt {
font-size: 11px; font-weight: 700; letter-spacing: .12em;
text-transform: uppercase; color: var(--accent);
padding-top: 3px;
}
.rm-fakten dd { margin: 0; color: var(--ink); font-weight: 600; }
@media (max-width: 860px) {
.rm-text .sec-title { margin-top: 8px; }
.rm-fakten > div { grid-template-columns: 100px 1fr; }
}
/* ------------------------------------------------------------
35 · ZEITSTRAHL VON LINKS NACH RECHTS, AUF HELLEM GRUND
Der Zeitstrahl lief senkrecht auf dunklem Grund mit Konturen, die
Posten wechselseitig links und rechts der Linie. Jetzt: helle
Flaeche, eine Reihe von Karten, die Linie darueber, jeder Posten
mit seinem Knoten - und seitlich blaetterbar, mit denselben Pfeilen
und derselben Wischbahn wie das Beitragskarussell der Startseite.
Die Regeln fuer die senkrechte Fassung stehen in scroll-scenes.css
und in Abschnitt 23 dieser Datei; die Klassen .tlz--quer und
.tlz-buehne--hell heben sie hier gezielt auf, statt sie dort zu
loeschen. So bleibt nachvollziehbar, was sich geaendert hat.
Die Linie laeuft nicht als ein Element ueber die ganze Bahn: In
einem scrollenden Kasten deckte ein absolut gesetztes Element nur
den sichtbaren Teil ab. Deshalb traegt jeder Posten sein Stueck
Linie (::before) und verlaengert es um den Spaltenabstand, damit
die Stuecke luecken- und nahtlos aneinanderstossen.
------------------------------------------------------------ */
.tlz-buehne--hell {
background: var(--bg-tint, #f3f8fa);
color: var(--ink);
isolation: auto;
}
.tlz-buehne--hell .sec-title { color: var(--petrol); }
.tlz-buehne--hell .sec-intro { color: var(--ink-soft); }
.tlz-buehne--hell .sec-eyebrow { color: var(--accent); }
/* Die Bahn steht ausserhalb des .wrap (siehe unternehmen.html) und
nimmt die volle Fensterbreite. Damit die erste Karte trotzdem
buendig unter der Ueberschrift beginnt, rechnet der Innenabstand
den Rand nach, den .wrap sich nimmt: die Haelfte dessen, was ueber
1120px hinausgeht, plus dessen eigenen Seitenrand. Auf schmalen
Fenstern bleibt davon nur der Seitenrand. */
.tlz-karussell {
position: relative; margin-top: 34px;
--tlz-rand: max(var(--wrap-pad, 30px), calc((100% - 1120px) / 2 + 30px));
}
.tlz--quer {
display: grid; grid-auto-flow: column;
grid-auto-columns: clamp(250px, 24vw, 310px);
gap: 0 24px;
overflow-x: auto; overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
align-items: start; /* Karten nur so hoch wie ihr Inhalt */
padding: 46px var(--tlz-rand) 8px;
scroll-padding-left: var(--tlz-rand);
}
.tlz--quer::-webkit-scrollbar { display: none; }
.tlz--quer .tlz-posten,
.tlz--quer .tlz-posten--links,
.tlz--quer .tlz-posten--rechts {
position: relative;
margin: 0; padding: 0; width: auto; text-align: left;
scroll-snap-align: start;
display: flex; flex-direction: column;
/* Die Einblendung der senkrechten Fassung (is-da) bleibt; nur die
seitliche Versetzung entfaellt. */
}
/* Linie und Knoten ueber der Karte */
.tlz--quer .tlz-posten::before {
content: ""; position: absolute; left: 0; right: -24px; top: -32px;
height: 2px; background: rgba(1,74,98,.18);
}
.tlz--quer .tlz-posten:last-child::before { right: 0; }
.tlz--quer .tlz-knoten {
position: absolute; left: 0; top: -38px; transform: none;
width: 14px; height: 14px; border-radius: 50%;
background: #fff; border: 2px solid var(--petrol);
box-shadow: 0 0 0 4px var(--bg-tint, #f3f8fa);
}
.tlz--quer .tlz-posten.is-an .tlz-knoten,
.tlz--quer .tlz-posten.is-da .tlz-knoten { background: var(--petrol); }
/* Bei den Posten mit Video sitzt der Knoten im Inhaltsblock; er soll
trotzdem auf der Linie stehen. */
.tlz--quer .tlz-inhalt { position: static; }
.tlz--quer .tlz-karte {
flex: 1 1 auto;
background: #fff; border: 1px solid var(--line); border-radius: 12px;
padding: 20px 20px 22px;
box-shadow: 0 14px 30px -22px rgba(1,42,61,.35);
margin: 0;
}
.tlz--quer .tlz-jahr {
color: var(--accent);
font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
text-transform: uppercase; margin-bottom: 8px;
}
.tlz--quer .tlz-karte p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; margin: 0; }
.tlz--quer .tlz-karte a { color: var(--petrol); }
/* Videos: klein, ueber der Karte des Postens */
.tlz--quer .tlz-video { margin: 0 0 12px; }
.tlz--quer .tlz-video .tl-figure { border-radius: 10px; overflow: hidden; }
.tlz--quer .tlz-video figcaption {
font-size: 12px; color: var(--ink-soft); margin-top: 6px;
}
/* Pfeile wie beim Beitragskarussell */
.tlz-karussell .pk-pfeil { top: calc(50% + 20px); }
/* Die Pfeile stehen am Fensterrand, nicht mehr an der Textspalte. */
.tlz-karussell .pk-pfeil--zurueck { left: 14px; }
.tlz-karussell .pk-pfeil--vor { right: 14px; }
.tlz-karussell .pk-pfeil:disabled { opacity: .35; cursor: default; }
@media (max-width: 860px) {
.tlz--quer { grid-auto-columns: 82%; }
.tlz-karussell .pk-pfeil { display: none; }
}
/* ------------------------------------------------------------
36 · FERNMESSUNG UND STARTSEITE · WEITERE WISCHBAHNEN
Die vier Schritte "Ablauf der Fernmessung" und die drei Schritte
"Messen ohne Anfahrt" auf der Startseite standen auf dem Telefon
untereinander, jeder ein halber Bildschirm. Sie tragen jetzt die
Klasse m-swipe und laufen damit wie die uebrigen Bahnen (Abschnitt
2); die Punkte darunter setzt mobile.js. Hier steht nur, was die
Grundregeln der beiden Raster sonst dagegenhielten.
------------------------------------------------------------ */
@media (max-width: 700px) {
.steps.m-swipe,
.fm-schritte.m-swipe {
grid-template-columns: none; /* das auto-fit-Raster der Grundregel */
margin-top: 26px;
}
.steps.m-swipe > .step { padding-top: 18px; }
}
/* ------------------------------------------------------------
37 · SOFTWARE-SZENE AUF DEM TELEFON
Die Reihenfolge war: Text, dann das Programmfenster. Das Fenster
ist aber der Gegenstand - der Text erklaert, was darin zu sehen
ist - und steht deshalb zuerst; darunter die Wischbahn mit den vier
Erklaerungen und darunter die Punkte, die sagen, welche Folie
steht. scroll-scenes.css blendet die Punkte unter 1000px aus, weil
die Szene dort einmal ohne Folienwechsel lief; im Wischbetrieb
fuehrt sie die Punkte wieder mit (scroll-scenes.js), also duerfen
sie zurueck - als Reihe im Fluss, nicht mehr absolut gesetzt.
------------------------------------------------------------ */
@media (max-width: 860px) {
.scene--app .scene-stage { display: flex; flex-direction: column; }
.scene--app .app-buehne { order: 1; margin-top: 0; }
.scene--app .scene-copy { order: 2; margin-top: 22px; }
.scene--app .scene-prog {
order: 3;
display: flex; position: static;
justify-content: center; gap: 10px;
margin: 14px 0 0;
}
.scene--app .scene-nav { display: none; }
.scene--app .app-rahmen { margin-top: 0; }
}
/* ------------------------------------------------------------
38 · SELBSTTEST · EINE FRAGE NACH DER ANDEREN
Aufgeklappt zeigte die Tafel alle fuenf Fragen auf einmal, gut
einen Bildschirm hoch. Jetzt steht eine Frage, darunter "Weiter";
die naechste erscheint erst nach der Antwort, und nach der fuenften
die Einordnung. selbsttest.js setzt dafuer die Klasse stf--schritt
und blendet die Fragen ueber das hidden-Attribut; ohne Skript
stehen alle Fragen wie zuvor.
------------------------------------------------------------ */
.stf--schritt .stf-frage { border-bottom: 0; padding-bottom: 8px; }
.stf--schritt .stf-frage[hidden] { display: none; }
.stf-nav {
display: flex; align-items: center; justify-content: space-between;
gap: 14px; flex-wrap: wrap;
padding: 14px 0 4px;
border-top: 1px solid var(--line);
}
.stf-nav[hidden] { display: none; }
.stf-stand { font-size: 13px; color: var(--ink-soft); }
.stf-nav-knoepfe { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.stf-zurueck {
background: none; border: 0; padding: 0; cursor: pointer;
font: inherit; font-size: 14px; color: var(--ink-soft);
text-decoration: underline; text-underline-offset: 3px;
}
.stf-zurueck:hover { color: var(--petrol); }
.stf-zurueck[hidden] { display: none; }
.stf-weiter-knopf {
border: 0; border-radius: 8px; cursor: pointer;
padding: 11px 20px;
font: inherit; font-size: 14px; font-weight: 700;
color: #fff; background: var(--petrol);
transition: background .16s, opacity .16s;
}
.stf-weiter-knopf:hover { background: var(--accent); }
.stf-weiter-knopf:disabled { opacity: .38; cursor: default; background: var(--petrol); }
.stf-neu {
display: inline-block; margin: 14px 0 0 18px;
font-size: 14px; color: var(--ink-soft);
background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
text-decoration: underline; text-underline-offset: 3px;
}
.stf-neu:hover { color: var(--petrol); }
/* ------------------------------------------------------------
39 · TEAMSEITE · MITGLIEDSCHAFTEN IN LESEGROESSE
Der Abschnitt "Mitgliedschaften & Normungsarbeit" besteht nur aus
einem Absatz. Als .sec-intro stand er in 17px und damit deutlich
groesser als die Kurzbiografien der Karten darueber (15px), obwohl
er kein Vorspann zu etwas ist, sondern der Inhalt selbst.
------------------------------------------------------------ */
.tm-vernetzt .sec-intro {
font-size: 15px; line-height: 1.65; max-width: 760px;
}
/* ------------------------------------------------------------
40 · AUTORENFOTO IN DEN FACHBEITRAEGEN
Die runden Ausschnitte (Beitragszeile 34px, Seitenspalte 52px,
Autorenkasten 96px) schnitten das Portraet an: Die Vorlage ist
hochkant und eng gefasst, im Kreis fielen Kinn und Schlaefen weg.
assets/img/mika-wihanto-rund.jpg ist dieselbe Aufnahme auf
quadratischer Flaeche mit Luft ringsum; damit greift die bisherige
Verschiebung nach oben nicht mehr - der Kreis sitzt mittig.
------------------------------------------------------------ */
.author-box img,
.aside-author img { object-position: center center; }