/* ============================================================================
Hypersoft Homepage · V1 Baseline · HYPERSOFT-HOMEPAGE-002
Farbwelt und Typografie folgen dem CI-Blatt "CI Hypersoft".
Aufbau: mobile first, fluide Typografie, ein einziger Breakpoint fuer das
zweispaltige Desktop-Layout. Kein Framework, kein Build, kein JavaScript.
========================================================================= */
:root {
/* CI-Farbwelt */
--hs-blau: #1A2230;
--hs-blau-800: #24313A;
--hs-blau-700: #2F3B46;
--hs-gold: #D4AF7A;
--hs-offwhite: #FAF8F4;
--hs-sand: #E7E3DC; /* Label im CI-Blatt fehlerhaft, siehe Bericht */
--hs-sand-dunkel: #D9D2C4;
/* Gold ist auf hellem Grund als Textfarbe zu kontrastarm (1,9:1). Fuer Text
auf hellem Grund dient dieser abgedunkelte Goldton: 6,0:1 auf Off-White,
5,0:1 auf Sand - beides WCAG AA auch fuer kleine Schrift. */
--hs-gold-schrift: #7A5A20;
--schrift: "Avenir Next", Inter, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--wrap: 1200px;
--rand: clamp(1.25rem, 5vw, 4rem);
--luft: clamp(4.5rem, 11vh, 9rem);
}
/* --- Grundlagen ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--hs-offwhite);
color: var(--hs-blau);
font-family: var(--schrift);
font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
line-height: 1.6;
font-weight: 400;
-webkit-font-smoothing: antialiased;
overflow-x: hidden; /* Sicherung gegen horizontales Scrollen */
}
img, svg { max-width: 100%; }
img { height: auto; }
p { margin: 0; }
a { color: inherit; }
.wrap {
width: 100%;
max-width: var(--wrap);
margin-inline: auto;
padding-inline: var(--rand);
}
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Sichtbarer Tastaturfokus, ueberall */
:focus-visible {
outline: 2px solid var(--hs-gold-schrift);
outline-offset: 3px;
border-radius: 2px;
}
.hero :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible {
outline-color: var(--hs-gold);
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 10;
background: var(--hs-offwhite);
color: var(--hs-blau);
padding: 0.75rem 1.25rem;
text-decoration: none;
}
.skip-link:focus {
left: 0;
}
/* --- Zierlinie ----------------------------------------------------------- */
.swash { display: block; fill: var(--hs-gold); }
.swash--hero {
width: min(62%, 400px);
height: auto;
/* Die neue Form braucht mehr vertikalen Raum in der viewBox als die alte,
fast gerade Linie. Der untere Abstand ist entsprechend gekuerzt, damit die
Hero-Hoehe unveraendert bleibt. */
margin: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(0.6rem, 1.4vw, 1.05rem);
}
/* --- Wortmarke: originales H + typografische Ergaenzung ------------------- */
.wordmark {
display: inline-flex;
align-items: center;
text-decoration: none;
flex: 0 0 auto;
}
.wordmark__h {
display: block;
height: clamp(2.25rem, 5.5vw, 2.9rem);
width: auto;
}
/* Das Wort rueckt an den H-Stamm heran; die charakteristische Linie des
Zeichens laeuft dabei hinter den Buchstaben weiter - so wie in der
originalen Wortmarke. */
.wordmark__rest {
position: relative;
z-index: 1;
margin-left: -0.28em;
font-size: clamp(1.15rem, 3.1vw, 1.5rem);
font-weight: 400;
letter-spacing: 0.2em;
color: var(--hs-offwhite);
white-space: nowrap;
}
/* --- Kopfbereich --------------------------------------------------------- */
.site-header {
background: var(--hs-blau);
padding-block: clamp(1rem, 3vw, 2rem);
/* Auf Geraeten mit Display-Aussparung nicht unter die Statusleiste rutschen. */
padding-top: calc(clamp(1rem, 3vw, 2rem) + env(safe-area-inset-top, 0px));
}
.site-header__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: clamp(0.75rem, 2vw, 2rem);
}
.site-nav {
order: 3;
flex: 1 0 100%;
}
.site-nav__list {
display: flex;
flex-wrap: wrap;
/* Schmal genug, dass die vier Ziele auf 390 px in eine Zeile passen;
bricht es auf noch kleineren Geraeten doch um, bleibt die zweite Zeile
dicht an der ersten. */
gap: 0.5rem 0.9rem;
margin: 0;
padding: 0;
list-style: none;
}
.site-nav__list a {
display: inline-block;
padding-block: 0.25rem;
color: var(--hs-sand-dunkel);
font-size: 0.875rem;
letter-spacing: 0.03em;
text-decoration: none;
transition: color 0.2s ease;
}
.site-nav__list a:hover { color: var(--hs-offwhite); }
/* --- Call to Action ------------------------------------------------------ */
.cta {
display: inline-block;
color: var(--hs-gold);
text-decoration: none;
letter-spacing: 0.04em;
border-bottom: 1px solid rgba(212, 175, 122, 0.42);
padding-bottom: 0.15rem;
transition: border-color 0.2s ease;
}
.cta:hover { border-bottom-color: var(--hs-gold); }
/* 014C: .cta--header ist entfallen - der Kopfbereich traegt keinen CTA mehr.
Die Regel bestand aus margin-left auto und einem eigenen Schriftgrad; beides
galt nur fuer dieses eine Element und ist mit ihm ersatzlos weg. .cta selbst
bleibt: .cta--gross im Kontaktabschnitt baut darauf auf. Am Kopfbereich
wurde sonst kein Wert angefasst - der frei werdende Platz bleibt frei. */
.cta--gross {
margin-top: clamp(2rem, 5vw, 3rem);
color: var(--hs-gold-schrift);
font-size: clamp(1.05rem, 2.4vw, 1.3rem);
border-bottom-color: rgba(122, 90, 32, 0.4);
}
.cta--gross:hover { border-bottom-color: var(--hs-gold-schrift); }
/* --- Hero ---------------------------------------------------------------- */
/* Foto, Schleier und Inhalt liegen uebereinander in derselben Rasterzelle.
Die Hoehe bestimmt der Inhalt, das Foto fuellt sie - ohne absolute
Positionierung und ohne feste Hoehenangabe. */
.hero {
display: grid;
isolation: isolate;
background: var(--hs-blau);
color: var(--hs-offwhite);
min-height: clamp(26rem, 62vh, 34rem);
}
.hero > *,
.hero::after { grid-area: 1 / 1; }
.hero__foto {
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* Smartphone-Ausschnitt: rueckt den Bergsteiger in den schmalen Bildstreifen.
Der Desktop-Ausschnitt steht weiter unten. */
object-position: 76% 50%;
}
/* Sehr zurueckhaltende Abdunklung, nur so weit wie fuer die Lesbarkeit noetig.
Auf dem Smartphone liegt der Text unter dem Bildmotiv, deshalb dunkelt hier
der untere Rand ab; der Himmel bleibt offen. */
.hero::after {
content: "";
z-index: 1;
pointer-events: none;
/* Seit 002B steht im Hero nur noch die primaere Aussage, und die sitzt am
unteren Rand. Der Schleier traegt deshalb von unten und laeuft nach oben
aus: Himmel, Gipfel und Sonnenlicht bleiben offen, der Bergsteiger steht
frei im Bild. */
background:
linear-gradient(to top,
rgba(20, 27, 38, 0.86) 0%,
rgba(20, 27, 38, 0.76) 22%,
rgba(20, 27, 38, 0.54) 46%,
rgba(20, 27, 38, 0.14) 72%,
rgba(20, 27, 38, 0) 88%);
}
.hero__inhalt {
z-index: 2;
align-self: end;
display: grid;
gap: clamp(1.75rem, 5vh, 2.5rem);
padding-block: clamp(3rem, 9vh, 5rem);
}
.hero__h1 {
margin: 0;
font-size: clamp(2.75rem, 9.5vw, 5.25rem);
font-weight: 300;
line-height: 1.04;
letter-spacing: -0.02em;
/* Weisse Schrift auf Fotomotiv: ein weicher Schatten haelt die Kanten auch
dort ruhig, wo helle Wolken hinter der Type liegen. */
text-shadow: 0 1px 24px rgba(12, 18, 27, 0.55);
}
.hero__h1 span { display: block; }
.hero__sub {
font-size: clamp(1.15rem, 3.2vw, 1.6rem);
font-weight: 300;
color: var(--hs-sand-dunkel);
letter-spacing: 0.01em;
text-shadow: 0 1px 18px rgba(12, 18, 27, 0.6);
}
/* --- Erfahrungsebene: Bruecke zwischen Foto und Inhalt ------------------- */
/* Bewusst ohne Sektionsanmutung: kein Kicker, keine Ueberschrift, keine Box,
kein Rahmen, kein Schatten, kein Bild. Sie steht mittig statt linksbuendig
wie die Inhaltsabschnitte und ist allein durch Raum und Satz abgesetzt.
Der grosse Vorlauf oben nimmt der Hero-Unterkante ihre Haerte. */
.erfahrung {
/* Kurze Zwischenbemerkung, kein eigener Abschnitt: der Vorlauf ist knapp
gehalten, damit sie an den Hero heranrueckt, der Nachlauf traegt zum
Divider hinueber. */
padding-top: clamp(2.25rem, 6vh, 3.5rem);
padding-bottom: clamp(3rem, 8vh, 5rem);
/* 014A: linksbuendig, solange die Seite einspaltig ist - siehe unten. */
text-align: left;
scroll-margin-top: 2rem;
}
/* 014A: Unterhalb des Desktop-Breakpoints steht die Ebene auf derselben
Inhaltsachse wie "Was wir tun", "Wie wir arbeiten" und der Kontakt. Auf dem
Smartphone war sie der einzige zentrierte Textblock der Seite; dadurch
wechselte die Satzachse mitten in der Lektuere zweimal.
Damit die Achse wirklich dieselbe ist, genuegt text-align nicht: .wrap
zentriert die Box mit margin-inline auto, und eine 40 rem breite Box steht
auf einem 768-px-Schirm um 64 px weiter innen als die 52 rem der
Abschnitte. Deshalb bekommt sie hier deren Breite - beide Boxen sind dann
gleich breit und gleich zentriert, ihre linken Satzkanten liegen bei jeder
Viewportbreite auf demselben Pixel. Die Texte selbst setzen ihre Zeilen per
, die groessere Breite aendert also keinen Umbruch.
Der Trenner darunter ist davon nicht beruehrt: er ist ein Flex-Container
mit justify-content center und gehoert als Kapitelmarke nicht zur
Textachse. */
.erfahrung__inner { max-width: 52rem; }
/* Ab dem Desktop-Breakpoint bleibt alles, wie es war: mittig, 40 rem. */
@media (min-width: 62rem) {
.erfahrung { text-align: center; }
.erfahrung__inner { max-width: 40rem; }
}
.erfahrung__jahr {
font-size: clamp(0.95rem, 2.2vw, 1.05rem);
font-weight: 400;
letter-spacing: 0.09em;
color: var(--hs-blau-700);
}
.erfahrung__kern {
margin-top: clamp(0.9rem, 2.4vh, 1.4rem);
/* Bewusst kleiner als die Abschnittsueberschriften (43,2 px): die Ebene soll
als Zwischenbemerkung gelesen werden, nicht als Sektionstitel. */
font-size: clamp(1.5rem, 4.2vw, 2.25rem);
font-weight: 300;
line-height: 1.32;
letter-spacing: -0.015em;
}
.erfahrung__akzent {
margin-top: clamp(0.9rem, 2.4vh, 1.4rem);
color: var(--hs-gold-schrift);
font-size: clamp(1.05rem, 2.6vw, 1.3rem);
font-weight: 400;
}
/* --- Divider: Linie, Zeichen, Linie -------------------------------------- */
.divider {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
padding-block: clamp(3rem, 8vh, 5rem);
padding-inline: var(--rand);
}
.divider__linie {
width: min(34vw, 300px);
height: auto;
flex: 0 1 auto;
/* Die Linie trifft das Zeichen dort, wo dessen eigene goldene Linie sitzt. */
transform: translateY(0.08em);
}
.divider__linie--gespiegelt { transform: translateY(0.08em) scaleX(-1); }
.divider__zeichen {
flex: 0 0 auto;
width: clamp(1.75rem, 4.5vw, 2.15rem);
height: auto;
margin-inline: clamp(0.9rem, 2.5vw, 1.35rem);
}
/* --- Inhaltsabschnitte --------------------------------------------------- */
.abschnitt {
padding-block: 0;
scroll-margin-top: 2rem;
}
.abschnitt__inner {
max-width: 52rem;
}
/* Die Ueberschrift von "Wie wir arbeiten" ist ein Gegensatzpaar: erst die
Absage, dann die Alternative. Gelesen wurde sie als drei Zeilen, weil der
erste Satz kurz vor der Spaltenkante umbrach und "Technologie." allein
stehenblieb - das Paar zerfiel in 2 + 1.
Die Ursache ist nicht der Schriftgrad, sondern die Spalte: .abschnitt__inner
deckelt auf 52 rem, traegt aber .wrap mit padding-inline var(--rand). Bei
border-box bleiben davon auf 1440 px nur 704 px Text, waehrend der Satz
744 px braucht - es fehlten 40 px, also 5,7 %. Korrigiert wird deshalb die
Breite, nicht die Schrift; Grad und Laufweite bleiben unangetastet. Enger
stellen allein reicht ohnehin nicht: selbst -0.038 em bleibt mit 706 px
ueber der alten Spalte und kippt je nach Viewport zwischen zwei und drei
Zeilen.
Massgeblich ist nicht Avenir Next mit 744 px, sondern der breiteste Fallback
des Schriftstacks - Inter mit 765 px. Die Spalte muss also ueber 765 px
kommen, nicht bloss ueber 744.
Beide Regeln halten den linken Satzrand exakt auf der Kante von "Was wir
tun". Das ist der Grund fuer ihre Form: .wrap zentriert mit margin-inline
auto, eine groessere max-width allein wuerde den Abschnitt nach links
ruecken und die Buendigkeit der beiden Sektionen zerstoeren.
Nur die H2 nutzt den Zugewinn - .fliess--gross deckelt selbst auf 42 rem,
und die Aussage setzt ihre Zeilen per . */
/* Zwischen 52 rem und dem Desktop-Breakpoint steht die Box schon auf ihrem
Maximum, waehrend der Grad bereits bei 2,7 rem gedeckelt ist. Hier genuegt
es, die rechte Spaltenkante freizugeben; links aendert sich nichts. */
@media (min-width: 52rem) and (max-width: 61.999rem) {
.abschnitt__inner--paar { padding-inline-end: 0; }
}
/* Ab dem Desktop-Breakpoint: Box um 10 rem breiter und der linke Innenabstand
um die Haelfte davon groesser. Die Zentrierung schiebt die Box um 5 rem nach
links, der Innenabstand holt genau diese 5 rem zurueck - der linke Satzrand
liegt dadurch bei jeder Viewportbreite auf demselben Pixel wie in "Was wir
tun", und der Text gewinnt 80 px. */
@media (min-width: 62rem) {
.abschnitt__inner--paar {
max-width: 62rem;
padding-inline-start: calc(var(--rand) + 5rem);
}
}
.kicker {
color: var(--hs-gold-schrift);
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.abschnitt__h2 {
margin: clamp(1.25rem, 3vw, 1.75rem) 0 0;
font-size: clamp(1.8rem, 4.8vw, 2.7rem);
font-weight: 300;
line-height: 1.18;
letter-spacing: -0.015em;
}
/* Die Aussagen unter "Was wir tun" und unter "Wie wir arbeiten" sind mit 009
dieselbe Textsorte: kurze Feststellungen. 008 hatte sie noch typografisch
getrennt - 20 px im Schnitt 400 fuer die Substanz, 23,2 px im Schnitt 300
fuer die Haltung - und damit die Bedeutung an den Schriftcharakter gehaengt.
Das war eine Erklaerung mit anderen Mitteln.
Jetzt tragen beide denselben Grundstil. Was sie unterscheidet, sagen Inhalt,
Position und Staffelung: "Was wir tun" steht flach auf der Kante, "Wie wir
arbeiten" tritt Zeile fuer Zeile ein. Die H2 behalten ihren Grad und damit
die Hierarchie - angeglichen wird nur die Ebene darunter. */
.fliess,
.schritt,
.kontakt__text {
max-width: 42rem;
color: var(--hs-blau-700);
font-size: clamp(1.05rem, 2.6vw, 1.25rem);
line-height: 1.8;
}
.fliess { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
/* Die drei Aussagen in "Wie wir arbeiten" stehen als eigene Absaetze, weil sie
einzeln gestellt werden muessen - als -Zeilen eines Absatzes liessen sie
sich nicht staffeln. Schrift holen sie sich aus der Regel oben; hier bleibt
nur, was sie voneinander und von der Ueberschrift abhaelt. */
.schritt {
/* Der Gruppenabstand sitzt auf dem ersten Schritt. Nicht ueber
:first-of-type - unter den Geschwistern ist der Kicker das erste
. */
margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
}
/* Die Bewegung entsteht allein aus Raum und Position: jede Aussage tritt ein
Stueck weiter ein. Kein Aufzaehlungszeichen, keine Nummer, keine Linie; die
Staffelung ist die Aussage. Seit 009 traegt sie den Abschnitt bis zum Ende -
der Schlusssatz, der die Bewegung frueher an der linken Kante auffing, ist
entfallen. "Wir versuchen zu verstehen." ist jetzt selbst der Punkt, an dem
sie ankommt - der einzige der drei Saetze mit einem Zugestaendnis darin.
Der Zusatzabstand ist klein und fuer beide Schritte gleich. Waechst er zum
dritten hin, loest sich die letzte Aussage aus der Gruppe, statt ihr Ziel zu
sein - im Vergleich B1/B2 deutlich zu sehen.
Die Einrueckung ist fluid: auf 390 px sind es 14 und 29 px, auf 1440 px
32 und 64 px. Sie bleibt damit auch auf schmalen Schirmen als Staffelung
lesbar, ohne dort Satzbreite zu fressen.
Kein Goldton: --hs-gold-schrift traegt auf diesem Grund 5,98:1 gegen die
15,05:1 des Texttons. Die letzte Aussage waere ausgerechnet dort die
schwaechste Zeile, wo der Gedanke ankommt. */
/* 013: Die Staffelung ist entfallen. Drei gleich weit aussen beginnende
Zeilen sind die ruhigere und souveraenere Form derselben Aussage - und die
Logik traegt sich jetzt selbst: aus Zuhoeren und Nachfragen entsteht
Verstehen. Eingerueckt las sich die dritte Zeile wie ein Nachsatz.
Zugleich faellt damit die Sonderbehandlung fuer schmale Geraete weg: was
nie eingerueckt ist, kann auch nicht falsch umbrechen. */
.schritt + .schritt { margin-top: 0.35rem; }
/* Der Trenner zwischen "Was wir tun" und "Wie wir arbeiten" ist mit 004
entfallen; er las sich wie der Beginn einer neuen Seite. Den Abstand, den er
getragen hat, traegt jetzt allein der Nachlauf von "Was wir tun" - bewusst
knapper als der Trenner (rund 108 px statt rund 178 px auf 1440x900), damit
der naechste Abschnitt als Fortsetzung gelesen wird. "Wie wir arbeiten"
bleibt dafuer unangetastet: der Weissraum gehoert dem Abschnitt, der ihn
braucht. */
.abschnitt--nachlauf { padding-bottom: clamp(4.5rem, 12vh, 7rem); }
/* --- Kontakt ------------------------------------------------------------- */
/* Reines Bild-Asset, lokal, ohne Schrift und ohne Laufzeitabhaengigkeit.
aria-hidden: sie traegt keine Information, die der Text nicht schon sagt.
010A hat das selbst gezeichnete SVG durch eine echte Bleistiftzeichnung
ersetzt. Das SVG war sauber, aber geometrisch: gleichmaessige Striche,
konstruierte Wellenlinien statt Handschrift, keine Schraffur, keine Tiefe.
Neben der Schriftwelt der Seite las es sich als Piktogramm.
Die Vorlage lag als Zeichnung auf einem schwarzen Vignettengrund vor. Der
Grund gehoert nicht auf die Seite, also wurde er herausgerechnet, nicht
uebermalt: das Papierweiss lokal geschaetzt, alpha aus der Transmission
der Tinte, ein Schwarzpunkt gegen den flachen Schleier des Verlaufs,
Kantenfeder und zwei schraege Schnitte fuer die Ecken, in denen die
Vignette diagonal durchlaeuft. Das Verfahren liegt in reports/skizze/
neben der unveraenderten Quelle - nicht im ausgelieferten Verzeichnis.
Unterhalb des Desktop-Breakpoints entfaellt sie. Auf dem Desktop fuellt sie
Flaeche, die ohnehin leer waere, und bleibt dabei neben dem Text - dort ist
sie eine Randnotiz. Einspaltig gibt es dieses "neben" nicht.
Auf 390x844 im echten WebKit wurden beide Einbindungen gebaut und
angesehen, bevor entschieden wurde:
B mittig unter dem Link, 152 px breit - eine zweite Achse gegen den
sonst durchgehend linksbuendigen Satz, und rund 190 px mehr Seite
C linksbuendig unter dem Link, 120 px breit - die Achse stimmt, aber
auf dieser Breite werden die Schreiblinien zu einer grauen Textur
und die Tasse zu einem Fleck: aus dem Motiv wird Ornament
Beide teilen denselben Fehler, den kein Feintuning behebt: einspaltig
landet die Zeichnung zwangslaeufig HINTER "Kontakt aufnehmen". Das Letzte
vor der dunklen Footerkante ist dann eine Zeichnung und nicht die
Einladung zu schreiben. Die Ruhe der Seite hat Vorrang, und die Skizze
traegt keine Information - sie ist aria-hidden. Also A: sie entfaellt. */
/* 013B: Das Kontaktmotiv. Es steht ausserhalb von .wrap, damit es aus dem
Satzspiegel laufen kann, und loest seine waagrechten Kanten oben und unten
im Verlauf auf, statt sie zu begrenzen.
Die einspaltige Einbindung von 013B - volle Breite, 16:9, ueber dem Text -
ist mit 014A ersetzt; was davon bleibt, ist der Verlauf. Das
Seitenverhaeltnis ist jetzt hochformatig, weil das Motiv neben dem Text
steht und nicht mehr ueber ihm. Bei object-fit cover wird dabei waagrecht
beschnitten; object-position haelt den Ausschnitt auf den beiden
Steigenden. */
/* 014A: Bild und Kontakttext sind auf jeder Breite dieselbe Komposition -
Motiv links, Text rechts. Bis 013B stapelte das Smartphone beides
untereinander: erst ein Bild ueber die volle Breite, dann der Trenner, dann
der Text. Das Motiv wurde damit zu einem eigenen Abschnitt, und der
Zusammenhang zwischen Bild und Frage ging verloren.
Der Aufbau ist jetzt einspaltig wie mehrspaltig derselbe Gedanke; nur die
Technik unterscheidet sich. Unterhalb des Desktop-Breakpoints stehen Bild
und Textblock als zwei Flex-Elemente nebeneinander, ab 62 rem uebernimmt
das bestehende Raster mit dem absolut liegenden Motiv (siehe unten). Am
Desktop aendert sich dadurch nichts.
KEINE KANTEN. Links laeuft das Bild wie am Desktop aus dem Fenster - es
liegt ausserhalb von .wrap und beginnt bei 0. Rechts loest es eine zweite
Maskenebene auf. Am Desktop macht das der eigene helle Verlauf des Motivs,
weil dort seine ganze Breite zu sehen ist; im schmalen Ausschnitt eines
Telefons endet der sichtbare Teil dagegen mitten im Bild. Beide Ebenen
werden verschnitten, nicht uebereinandergelegt - ohne mask-composite
ergaenzen sich zwei Masken zur Vereinigung, und die Kante waere zurueck.
-webkit-mask-composite: source-in ist dasselbe fuer WebKit; beide Angaben
sind noetig, geprueft in Chromium und WebKit. */
.kontakt__bild {
display: block;
flex: 0 0 auto;
/* Schmaler als die Haelfte: der Text traegt den Abschnitt, das Motiv
begleitet ihn.
Der zweite Wert ist die Untergrenze der Schriftspalte. Der laengste
unteilbare Satz des Abschnitts ist der Link "Sprechen wir darüber →" mit
200 px - er darf nicht umbrechen, sonst steht der Pfeil allein in der
zweiten Zeile. Dazu der eigene Einzug des Schriftblocks (9 px) und der
Seitenrand rechts (20 px): 232 px = 14,5 rem gehoeren dem Text, den Rest
bekommt das Motiv. Ab 387 px Viewportbreite sind das die vollen 40 %; auf
schmaleren Geraeten gibt das Bild dem Satz nach, statt ihn zu brechen. */
width: min(40%, 100% - 14.5rem);
aspect-ratio: 4 / 5;
object-fit: cover;
/* Weit links im Motiv: die beiden Steigenden und die reichende Hand liegen
im linken Drittel und muessen im hochformatigen Ausschnitt bleiben. */
object-position: 18% 52%;
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%,
#000 91%, transparent 100%),
linear-gradient(to right, #000 0, #000 52%,
transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0, #000 9%,
#000 91%, transparent 100%),
linear-gradient(to right, #000 0, #000 52%,
transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
.kontakt {
/* Ohne eigene Flaeche. Die Sandflaeche setzte mit harter Kante unmittelbar
auf dem Schlusssatz von "Wie wir arbeiten" auf - null Pixel Abstand - und
markierte die Frage damit doppelt: als Abschnittswechsel (108 px Vorlauf,
genau so viel wie zwischen "Was wir tun" und "Wie wir arbeiten") und
zusaetzlich als eigene Flaeche. "Woran arbeiten Sie gerade?" las sich
dadurch als Kontaktsektion statt als naechster Satz der Geschichte.
Jetzt traegt die ganze Erzaehlung einen Grund, und erst der Footer
schliesst sie ab. Die harte Hell-Dunkel-Kante dort ist kein Bruch,
sondern das Gegenstueck zur Kante unter dem Hero.
Ein weicher Verlauf von Off-White auf Sand wurde als eigene Variante
geprueft: er stellt die Panelwirkung nur weicher wieder her, ohne etwas
zu loesen, sobald der Rhythmus stimmt. --hs-sand bleibt als CI-Farbe
definiert, wird aber nicht mehr verwendet.
Der Vorlauf ist bewusst kuerzer als ein Abschnittswechsel: die Frage soll
naeher stehen als eine neue Sektion, sonst beginnt sie eine.
Und er ist vw- statt vh-basiert, wie die Schrift der Frage. Vorher waren
Abstand und Schriftgrad an verschiedene Achsen gebunden - auf einem
390x844-Telefon ergab das 101 px Vorlauf gegen 32 px Schrift, Faktor 3,2,
gegenueber 2,0 auf dem Desktop. Die Frage war auf dem Smartphone also
staerker abgekoppelt als am Rechner.
009A musste diesen Vorlauf vergroessern, weil die Staffelung von "Wie wir
arbeiten" sonst direkt in die Frage lief und diese wie ihr viertes Glied
wirkte. Mit 010 uebernimmt der Trenner davor diese Aufgabe - und zwar
besser, weil er den Perspektivwechsel benennt statt ihn nur zu bebildern.
Der Vorlauf faellt deshalb wieder klein aus. Bliebe er auf dem 009A-Wert,
stuenden zwischen der letzten Zeile und der Frage 272 px: Trenner und
grosser Abstand wuerden dasselbe zweimal sagen, und dazwischen entstuende
eine leere Flaeche. Mit 40 px sind es 218 px - knapper als die 250 px am
ersten Trenner, denn die Frage ist die Pointe der Erzaehlung und nicht
ihr naechstes Kapitel. */
padding-top: clamp(1.5rem, 3vw, 2.5rem);
padding-bottom: clamp(2.75rem, 5.5vw, 4.5rem);
scroll-margin-top: 2rem;
/* 014A: Motiv und Schriftblock stehen nebeneinander und werden gegeneinander
mittig gestellt - die Komposition liegt damit in der Mitte des Raums, den
der Abschnitt hat, und nicht an einer seiner Kanten. Das gilt bis zum
Desktop-Breakpoint; ab 62 rem loest 014B den Flex-Kontext durch ein
Raster ab, in dem Bild und Schrift in derselben Zelle liegen. */
display: flex;
align-items: center;
}
/* Der Abstand zum Motiv ist der eigene linke Innenabstand von .wrap. Er kommt
zur Weichzeichnung des Bildrands hinzu; optisch liegt zwischen Bild und
Schrift deshalb deutlich mehr Raum als diese Zahl. min-width 0, damit der
Block im Flex-Kontext unter seine Inhaltsbreite darf - sonst schiebt die
laengste Zeile die Spalte auf und das Bild aus dem Fenster. */
.kontakt__inner {
flex: 1 1 auto;
min-width: 0;
max-width: 52rem;
padding-inline-start: clamp(0.5rem, 2.5vw, 1.25rem);
}
/* Der Trenner vor dem Kontakt markiert einen Perspektivwechsel, keinen
Seitenanfang. Er steht deshalb enger als der erste: dort trennt er die
Bildebene vom Inhalt, hier laeuft eine Erzaehlung weiter. */
.divider--wechsel { padding-block: clamp(2.25rem, 6vh, 3.75rem); }
/* 014B: Der Trenner ist wieder ein Abschnittstrenner der SEITE und steht als
eigenes Element vor , mittig ueber der ganzen
Breite - wie der Trenner zwischen Hero-Ebene und Inhalt. 013 hatte ihn in
den Schriftblock geholt, weil er dort als Blockmarke die gespiegelte
Halb-Halb-Komposition nicht zerschneiden sollte. Diese Komposition gibt es
seit 014B nicht mehr: es gibt nur noch EINEN Block, und ueber dem steht der
Trenner wieder da, wo ein Abschnittstrenner hingehoert. Damit entfallen die
Sonderregeln .kontakt__trenner (linksbuendig, kurze Linien) ersatzlos -
Form, Zeichen und Linienlaenge kommen wieder aus .divider. Eigen bleibt nur
der engere Vorlauf von .divider--wechsel. */
/* 014B: Am Desktop sind Motiv und Schrift EINE Komposition - kein Bild links,
kein Textblock rechts.
Woher die grosse helle Zwischenzone kam: 013B/014A liessen beide Haelften
nach verschiedenen Bezugssystemen laufen. Das Bild lag absolut am
FENSTERrand und mass 64 % der Viewportbreite; der Text stand in Spalte 2
eines Rasters, das auf den 1200 px des SATZSPIEGELS rechnete. Beide Kanten
wandern beim Aufziehen des Fensters unterschiedlich schnell - auf 1920 px
endete der sichtbare Fels bei rund 400 px, der Text begann bei 960 px.
Dazwischen lagen ueber 500 px heller Dunst. Das war kein Abstandswert, den
man kleiner stellen konnte, sondern die Differenz zweier Bezugssysteme.
014B gibt beiden dasselbe: die Sektion IST die Komposition. Sie bekommt eine
eigene Maximalbreite und steht mittig auf der Seite; Bild und Schriftblock
liegen in DERSELBEN Rasterzelle uebereinander. Der Schriftblock sitzt im
hellen Dunst des Motivs statt neben ihm - die Komposition hat nur noch eine
Aussenkante, und das ist die des Bildes. Ein Zwischenraum zwischen zwei
Spalten kann damit gar nicht mehr entstehen, auf keiner Fensterbreite.
68 rem ist bewusst schmaler als der Satzspiegel (1200 px): der Abschluss
soll ruhig sein und nicht die Bildschirmbreite fuellen. Ab 1216 px steht die
Breite fest, jedes weitere Pixel Fenster wird zu Weissraum links und rechts.
Der Text bleibt echtes HTML - h2, p und a stehen unveraendert im Dokument
und werden nur per grid-area in dieselbe Zelle gelegt wie das Bild. In der
PNG-Datei steht kein Wort; das Asset ist unangetastet. */
@media (min-width: 62rem) {
.kontakt {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
max-width: min(100% - 2 * var(--rand), 68rem);
margin-inline: auto;
}
.kontakt__bild {
grid-area: 1 / 1;
width: 100%;
height: auto;
/* 16:9 statt der 3:2 der Datei. Beschnitten wird dadurch ausschliesslich
senkrecht (die Datei ist schmaler als der Rahmen, cover skaliert also
auf die Breite): von 1024 px Hoehe bleiben 864, es fehlen 160.
object-position 55 % nimmt 88 px oben und 72 px unten - oben Himmel,
unten Schneehang. Beide Steigenden, die reichende Hand und der Grat
bleiben vollstaendig im Bild; nichts davon liegt in den Randstreifen.
Ohne den Beschnitt waere der Block auf 1088 px Breite 725 px hoch und
damit hoeher als jeder andere Abschnitt der Seite. */
aspect-ratio: 16 / 9;
/* Der Deckel nach unten. Zwischen 992 und 1216 px Fenster schrumpft die
Komposition mit, der Schriftblock nicht - seine 314 px sind Typografie
und stehen fest. Ohne min-height waere das Bild bei 992 px nur 502 px
hoch, und der Himmel ueber dem fernen Grat reichte fuer den Text nicht
mehr aus (siehe die Regel zum Schriftblock unten). Mit 38 rem wird der
Rahmen dort hochformatiger als die Datei; cover skaliert dann auf die
Hoehe und beschneidet stattdessen waagrecht - um 20 px bei 992 px
Fenster, je 10 px links und rechts, und die liegen im Auslauf der
Maske. Ab 1216 px Fenster greift 16:9 und min-height nie wieder. */
min-height: 38rem;
object-position: 50% 55%;
margin: 0;
pointer-events: none;
/* Vier weiche Kanten statt vier harten. Bis 014A brauchte das Bild links
keine Maske, weil es dort aus dem Fenster lief; als begrenzter Block
haette es jetzt an allen vier Seiten eine Schnittkante - und die Seite
hat nirgends eine. Die senkrechte Ebene ist unveraendert die von 013B.
Die waagrechte loest links den Anschnitt und rechts den letzten Rest
Grau des fernen Grats ins Off-White der Seite auf.
Verschnitten, nicht ueberlagert: ohne mask-composite ergaenzen sich
zwei Masken zur Vereinigung und die Kanten waeren zurueck.
source-in ist die WebKit-Schreibweise von intersect; beide Angaben sind
noetig und in Chromium wie WebKit geprueft. */
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%,
#000 91%, transparent 100%),
linear-gradient(to right, transparent 0, #000 7%,
#000 93%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0, #000 9%,
#000 91%, transparent 100%),
linear-gradient(to right, transparent 0, #000 7%,
#000 93%, transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
/* Dieselbe Zelle wie das Bild, rechts und auf halber Hoehe. Der Schriftblock
steht damit im hellen Dunst ueber den Wolken, nicht neben dem Motiv.
.wrap traegt hier nichts mehr bei - Breite, Rand und Zentrierung kommen
aus der Komposition, deshalb werden seine drei Werte hier gesetzt. */
.kontakt__inner {
grid-area: 1 / 1;
z-index: 1;
justify-self: end;
/* Oben statt mittig - und das ist keine Geschmacksfrage, sondern gemessen.
Auf halber Hoehe faellt der Link "Sprechen wir darüber" genau auf den
fernen Grat rechts im Motiv. Dort steht das Schriftgold (#7A5A20) auf
Fels statt auf Dunst: 2,9:1 im schlechtesten Pixel, WCAG AA verlangt
4,5:1. Der Grat beginnt bei 640 der 1024 Bildzeilen; darueber liegt
offener Himmel, und der traegt den ganzen Block mit ueber 11:1.
Kompositorisch ist es ohnehin die richtige Stelle: die Seilschaft steigt
von links unten nach rechts oben, der Text steht am Ziel dieser
Bewegung. */
align-self: start;
margin-block-start: clamp(1.5rem, 3vw, 2.75rem);
width: min(52%, 31rem);
max-width: none;
margin: 0;
/* Der rechte Einzug haelt die Schrift von der weichen Bildkante fern; die
Maske beginnt bei 93 % zu oeffnen, der Text endet davor. */
padding-inline: 0 clamp(1.5rem, 3.5vw, 3rem);
}
}
/* 014A: Der untere Deckel der Frage faellt von 2 rem auf 1,4 rem. Er griff
erst unterhalb von 533 px Viewportbreite - genau dort, wo die Frage seit
014A neben dem Motiv steht und nur noch rund die halbe Seitenbreite hat.
Mit 32 px stand dort jedes Wort in einer eigenen Zeile. Die fluide Mitte
(6vw) und der obere Deckel bleiben unangetastet: ab 533 px ist der Grad
deshalb Pixel fuer Pixel derselbe wie vorher, Tablet und Desktop
eingeschlossen. */
.kontakt__h2 {
margin: 0;
font-size: clamp(1.4rem, 6vw, 3.4rem);
font-weight: 300;
line-height: 1.15;
letter-spacing: -0.02em;
}
/* Bis 009A stand hier eine eigene Schriftwelt: 20,8 px im Schnitt 300 gegen
20 px im Schnitt 400 der Aussagen darueber. Der Unterschied war zu klein,
um Hierarchie zu sein, und zu gross, um unsichtbar zu bleiben - er las sich
als blasser Hilfetext und damit als Rest einer aelteren Fassung. Grad,
Schnitt, Farbe und Zeilenabstand kommen jetzt aus der Regel oben; eigen
bleibt nur der Abstand zur Frage. */
.kontakt__text { margin-top: clamp(1.5rem, 3.5vw, 2rem); }
/* --- Fussbereich --------------------------------------------------------- */
.site-footer {
background: var(--hs-blau);
color: var(--hs-sand-dunkel);
padding-block: clamp(3rem, 7vh, 4.5rem);
font-size: 0.95rem;
line-height: 1.85;
}
.site-footer__inner {
display: grid;
gap: clamp(2rem, 5vw, 3rem);
}
/* 013: Die Unterschrift am Seitenende.
Sie ist kein zweites Logo und darf nicht wie eines auftreten - deshalb
sitzt sie deutlich unter der Breite, die die geometrische Wortmarke im
Header einnimmt, und traegt eine leicht zurueckgenommene Deckkraft.
Das Off-White der Datei liegt auf dem Footer-Blau bei 15,05:1; mit 0,92
bleiben rund 13:1. Klar lesbar, aber nicht hartweiss - reines #FFFFFF
waere an dieser Stelle lauter als der Firmenname darunter.
Die Goldlinie steckt im Bild und ist unveraendert die des Originals. */
.signatur {
display: inline-block;
text-decoration: none;
}
.signatur__bild {
display: block;
/* 013A: rund 10 % kleiner als zuvor (13/34/17 -> 11.7/30.6/15.3). Die
Signatur soll den Firmennamen darunter nicht ueberwiegen, sondern mit
ihm eine Absenderzeile bilden. */
width: clamp(11.7rem, 30.6vw, 15.3rem);
height: auto;
opacity: 0.92;
/* OPTISCHE MITTE, NICHT BOXMITTE.
Am 900 x 300 grossen Asset gemessen:
Tuschekasten x Mitte Anteil
alles 11 .. 888 449.5 0.4994
nur Handschrift 98 .. 746 422.0 0.4689
nur Goldlinie 11 .. 888 449.5 0.4994
Schwerpunkt (alpha-gewichtet, alles) 418.2 0.4646
Die Goldlinie liegt symmetrisch in der Box - sie reicht links und rechts
bis 11 px an den Rand. Das Wort selbst sitzt dagegen links: seine Mitte
liegt bei 0.469, sein Schwerpunkt bei 0.459 der Bildbreite. Wer die Box
zentriert, zentriert also die Linie und nicht die Handschrift, und der
Firmenname steht sichtbar zu weit rechts.
Angesetzt wird 0.466 - zwischen Schwerpunkt aller Tusche (0.4646) und
Kastenmitte der Handschrift (0.4689). Die Verschiebung von +3.4 % holt
diese Mitte auf die Achse der Gruppe.
Prozent statt Pixel, weil sich die Angabe auf die Elementbreite bezieht:
die Korrektur waechst und schrumpft mit dem clamp() darueber und stimmt
damit auf jeder Bildschirmbreite. */
transform: translateX(3.4%);
}
/* 013A: Signatur und Firmenname als eine Absendereinheit. Die Gruppe ist nur
so breit wie ihr breiteres Kind und bleibt damit in ihrer Footerspalte
linksbuendig - die Spaltenstruktur aendert sich nicht. Innerhalb der
Gruppe stehen beide auf derselben Achse. */
.site-footer__marke {
display: flex;
flex-direction: column;
align-items: center;
width: fit-content;
}
.site-footer__firma {
/* 013A: enger als zuvor (1/2.5vw/1.25rem). Zum sichtbaren Abstand kommen
noch rund 3 px transparenter Bildrand unter der Handschrift hinzu. */
margin-top: clamp(0.5rem, 1.5vw, 0.75rem);
color: var(--hs-offwhite);
text-align: center;
}
.site-footer__adresse {
font-style: normal;
}
.site-footer__adresse a {
text-decoration: none;
border-bottom: 1px solid rgba(217, 210, 196, 0.28);
transition: border-color 0.2s ease;
}
.site-footer__adresse a:hover { border-bottom-color: var(--hs-sand-dunkel); }
.site-footer__recht p { margin: 0; }
/* Noch nicht verbundene Rechtsseiten: sichtbar vorbereitet, aber nicht als
funktionierender Link ausgegeben. */
.platzhalter {
color: rgba(217, 210, 196, 0.55);
border-bottom: 1px dashed rgba(217, 210, 196, 0.3);
}
.site-footer__register {
margin-top: clamp(0.75rem, 2vw, 1rem) !important;
color: rgba(217, 210, 196, 0.55);
font-size: 0.85rem;
}
/* --- Desktop ------------------------------------------------------------- */
@media (min-width: 62rem) {
.site-header__inner { flex-wrap: nowrap; }
.site-nav {
order: 0;
flex: 0 1 auto;
margin-left: clamp(2rem, 5vw, 4rem);
}
.site-nav__list { gap: clamp(1.5rem, 3.5vw, 2.5rem); }
.site-nav__list a { font-size: 0.95rem; letter-spacing: 0.04em; }
.hero { min-height: clamp(34rem, 76vh, 46rem); }
/* Der rechte Block ist fort; ohne Begrenzung liefe die Textspalte sonst
ueber das ganze Bild. Sie behaelt die Breite des bisherigen Rasters. */
.hero__titel { max-width: 46rem; }
/* Desktop nutzt die natuerliche Komposition: ruhige Bildflaeche links,
Bergsteiger und Gipfel rechts. Der Ausschnitt bleibt deshalb mittig und
ruecht nur leicht nach oben, damit der Grat nicht angeschnitten wird. */
.hero__foto { object-position: 50% 42%; }
/* Der Text steht links auf der ruhigen Flaeche, der Verlauf dunkelt von dort
nach rechts aus und gibt Bergsteiger und Gipfel wieder frei. */
.hero::after {
/* Ein einziger Verlauf, und nur so weit wie die Schrift links ihn braucht.
Die Ellipse ueber der rechten unteren Ecke und die Abdunklung des unteren
Bildrandes sind mit dem Erfahrungsblock entfallen: Sonnenlicht, Gipfel
und die Zeichnung im Schnee stehen wieder offen im Bild. */
background:
linear-gradient(to right,
rgba(20, 27, 38, 0.82) 0%,
rgba(20, 27, 38, 0.66) 26%,
rgba(20, 27, 38, 0.36) 46%,
rgba(20, 27, 38, 0.10) 62%,
rgba(20, 27, 38, 0) 74%);
}
.site-footer__inner {
grid-template-columns: 1.4fr 1fr 1fr;
align-items: start;
}
}
/* --- Bewegung nur auf Wunsch -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
/* --- Rechtliches: Impressum und Datenschutz ------------------------------ */
/* HYPERSOFT-HOMEPAGE-011.
Der Dialog erbt die Seite, er zitiert sie nicht: derselbe Off-White-Grund,
dieselbe Schrift, dasselbe Blau, dieselben Abstandsgroessen. Gold kommt nur
dort vor, wo es auf der Seite ohnehin vorkommt - in Links. Keine Flaeche in
Gold, kein Milchglas, keine Animation. Wer den Dialog oeffnet, soll den
Eindruck haben, ein Blatt derselben Seite umzuschlagen.
Die Verdunkelung ist das Seitenblau mit Deckkraft, nicht Schwarz: Schwarz
waere ein fremder Ton auf einer Seite, die keinen einzigen schwarzen Wert
kennt. */
.rechtslink {
color: inherit;
text-decoration: none;
border-bottom: 1px solid rgba(217, 210, 196, 0.28);
transition: border-color 0.2s ease;
}
.rechtslink:hover { border-bottom-color: var(--hs-sand-dunkel); }
.rd {
width: min(38rem, calc(100vw - 2 * clamp(1rem, 5vw, 2.5rem)));
max-height: min(80vh, 46rem);
padding: 0;
border: 0;
border-radius: 10px;
background: var(--hs-offwhite);
color: var(--hs-blau-700);
box-shadow: 0 24px 60px -20px rgba(26, 34, 48, 0.45);
overflow: hidden; /* gescrollt wird innen, nicht am Dialog */
}
.rd--lang { width: min(44rem, calc(100vw - 2 * clamp(1rem, 5vw, 2.5rem))); }
.rd::backdrop { background: rgba(26, 34, 48, 0.62); }
.rd__blatt {
display: flex;
flex-direction: column;
max-height: inherit;
}
/* Der Kopf bleibt stehen, damit das Schliessen auch im langen Text jederzeit
erreichbar ist - im Datenschutz ist genau das der kritische Punkt. */
.rd__kopf {
position: sticky;
top: 0;
z-index: 1;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: clamp(1.5rem, 4vw, 2.25rem) clamp(1.5rem, 4vw, 2.75rem) 0.75rem;
background: var(--hs-offwhite);
}
.rd__titel {
margin: 0;
font-size: clamp(1.5rem, 4vw, 2rem);
font-weight: 300;
letter-spacing: -0.01em;
color: var(--hs-blau);
}
.rd__schliessen-form { margin: 0; line-height: 0; }
/* Kein runder Knopf, keine Flaeche: ein Strichzeichen in derselben Sprache
wie der Pfeil im Kontaktlink. Die Trefferflaeche ist trotzdem 44 px. */
.rd__schliessen {
display: grid;
place-items: center;
width: 44px;
height: 44px;
margin: -0.5rem -0.75rem -0.5rem 0;
padding: 0;
border: 0;
border-radius: 6px;
background: none;
color: var(--hs-blau-700);
cursor: pointer;
transition: color 0.2s ease;
}
.rd__schliessen svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
}
.rd__schliessen:hover { color: var(--hs-gold-schrift); }
/* Der Fokusstil der Seite gilt hier unveraendert weiter und ist deshalb nicht
wiederholt. Nur zwei Ausnahmen: der Dialog selbst bekommt beim Oeffnen den
Fokus, wenn nichts anderes ihn nimmt - ein Rahmen um das ganze Blatt waere
dort Laerm. Und der Textbereich zieht seinen Rahmen nach innen, sonst
schneidet ihn das overflow:hidden des Dialogs ab. */
.rd:focus { outline: none; }
.rd__inhalt {
overflow-y: auto;
overscroll-behavior: contain; /* kein Durchscrollen auf die Seite */
padding: 0 clamp(1.5rem, 4vw, 2.75rem) clamp(1.75rem, 4vw, 2.5rem);
font-size: 1rem;
line-height: 1.7;
max-width: 40rem; /* Zeilenlaenge bleibt lesbar */
}
.rd__inhalt:focus-visible { outline-offset: -3px; }
.rd__inhalt h3 {
margin: 1.75rem 0 0.4rem;
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--hs-blau);
}
.rd__inhalt p { margin: 0 0 0.85rem; }
.rd__inhalt p:last-child { margin-bottom: 0; }
.rd__inhalt a {
color: var(--hs-gold-schrift);
text-decoration: none;
border-bottom: 1px solid rgba(122, 90, 32, 0.35);
}
.rd__inhalt a:hover { border-bottom-color: var(--hs-gold-schrift); }
.rd__vorspann { color: var(--hs-blau-700); }
/* Impressum: Informationsgruppen statt Fliesstext. */
.rd__rolle {
margin: 0 0 1.25rem;
font-size: 0.85rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--hs-gold-schrift);
}
.rd__block { margin: 0 0 1.25rem; }
.rd__block b { color: var(--hs-blau); font-weight: 600; }
.rd__block--register { color: rgba(47, 59, 70, 0.75); font-size: 0.95rem; }
/* 0,7 Deckkraft ergaben auf diesem Grund 4,48:1 - bei 13,6 px Schriftgrad
knapp unter den 4,5:1, die WCAG AA fuer kleinen Text verlangt. 0,75 hebt
die Zeile auf 5,18:1 und aendert optisch nichts Erkennbares. */
.rd__stand {
margin-top: 1.75rem;
font-size: 0.85rem;
color: rgba(47, 59, 70, 0.75);
}
/* --- Rechtliches ohne laufendes Skript ----------------------------------- */
/* 012A. Bis hierher war der Dialog die Voreinstellung und der Abschnitt die
Ausnahme - eingeschaltet von