/* ============================================================
Gemeinsames Stylesheet — Ausgangspunkt, pro Projekt anpassen
Farben und Schriften stehen in site_config.py unter FARBEN; die
:root-Variablen hier muessen dazu passen.
Was hier definiert ist und im ausgelieferten HTML (noch) nicht vorkommt,
sind Bausteine: Formular, Kontaktraster, Referenzkarten, Ablaufdiagramm,
Rechtstexte, Fehlerseite. Sie werden benutzt, sobald die entsprechenden
Seiten in internal/build/seiten.py entstehen.
============================================================ */
/* Die Namen stammen aus der Vorlage und bezeichnen Rollen, keine Farbtoene:
--navy ist der dunkle Markenton (hier das Anthrazit der Wortmarke),
--blue die Akzentfarbe (hier das Bronze des bisherigen Auftritts).
Die Werte muessen zu FARBEN in site_config.py passen — von dort kommen
theme-color, Manifest und die Platzhalter-Icons. */
:root{
--navy:#2A2C35;
--blue:#A8825E;
--paper:#FFFFFF;
--paper-2:#F6F4F1;
--line:#E4E0DA;
--text-2:#5F6169;
--green:#2E9E5B;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
background:var(--paper); color:var(--navy);
font-family:'Inter', sans-serif; font-size:17px; line-height:1.7;
-webkit-font-smoothing:antialiased;
}
/* height:auto ist hier nicht Kosmetik, sondern Pflicht. Jedes traegt
width- und height-Attribute (gegen CLS). Wird die Breite dann per CSS
beschnitten — hier durch max-width:100% —, bleibt die Hoehe aus dem Attribut
stehen und das Bild wird verzerrt. Im Ausgangsprojekt traf das ein Banner
mit 1100x634: in einem 320 px breiten Viewport blieb die Hoehe bei 634 px
und das Motiv war senkrecht gestreckt. Auf dem Desktop fiel es nicht auf,
weil der Container dort fast der natuerlichen Breite entspricht.
Regeln mit absichtlich fester Hoehe (.logo-img) sind spezifischer und
gewinnen weiterhin. */
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3{
font-family:'Source Serif 4', serif;
font-weight:600;
color:var(--navy);
line-height:1.15;
letter-spacing:-0.005em;
}
/* Deutsche Komposita sind lang: "Handwerksbetriebe", "Vermoegensschaden-
haftpflichtversicherung". In einer grossen Ueberschrift passte so ein Wort
auf 320 px nicht mehr in die Spalte und schob die ganze Seite um 10 px nach
rechts, auf /agb/ um 25 px — ohne dass ein Element sichtbar herausragte,
weshalb die uebliche Suche nach ueberstehenden Kaesten nichts fand.
hyphens:auto trennt sauber nach deutschen Regeln, weil
gesetzt ist. overflow-wrap:break-word ist der Notnagel fuer den Fall, dass
ein Wort selbst getrennt nicht passt; es greift nur dann und aendert das
Schriftbild bei normaler Breite nicht. */
h1,h2,h3,h4,summary{ overflow-wrap:break-word; hyphens:auto; }
p,li,td,th,dd,figcaption{ overflow-wrap:break-word; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
*{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
.wrap{ max-width:1120px; margin:0 auto; padding:0 28px; }
.wrap-narrow{ max-width:760px; margin:0 auto; padding:0 28px; }
section{ padding:112px 0; }
@media (max-width:720px){ section{ padding:64px 0; } }
/* Abgesetzte Flaeche statt Rahmen, wenn ein Abschnitt sich vom Nachbarn
loesen soll — Linien sind im Auftritt schon das Hauptmittel, zu viele
davon lassen die Seite zappelig wirken. */
.flaeche{ background:var(--paper-2); }
/* Der Abschnittskopf: kurzes Wort in Bronze, darunter die Ueberschrift.
Die Linie darueber greift den Rahmen der Wortmarke auf. */
.eyebrow{
font-size:12.5px; color:var(--blue); font-weight:700;
text-transform:uppercase; letter-spacing:0.1em;
margin-bottom:14px;
}
.abschnitt-kopf{ max-width:640px; }
.abschnitt-kopf h2{ font-size:clamp(26px,3.4vw,38px); }
.abschnitt-kopf p{ color:var(--text-2); margin-top:16px; }
/* ---------- Header ---------- */
header{
position:sticky; top:0; z-index:50;
background:rgba(255,255,255,0.92); backdrop-filter:blur(6px);
border-bottom:1px solid var(--line);
}
.header-inner{
max-width:1120px; margin:0 auto; padding:18px 28px;
display:flex; align-items:center; justify-content:space-between; gap:24px;
}
/* Der Logo-Link darf nicht schrumpfen. Ohne flex-shrink:0 gibt im Header
ausgerechnet er nach, sobald die Navigation eng wird — das Logo wurde so
bis auf 36 px zusammengedrueckt statt der vorgesehenen 87 px. */
.header-inner > a{ flex-shrink:0; }
/* Die vollstaendige Marke, Rahmen und Schriftzug. Sie ist hoch gebaut: der
Schriftzug ist gut ein Neuntel der Gesamthoehe. Bei 64 px Logohoehe sind
das rund 7 px Versalhoehe — die Untergrenze fuer Lesbarkeit. Deshalb ist
die Kopfzeile hier hoeher als ueblich, und das Polster darum kleiner.
Der Vorteil derselben Bauform: 1,94:1 ist schmal. Das Logo belegt nur
124 px Breite und laesst dem Burger auch auf 320 px genug Platz. */
.logo-img{ height:64px; width:auto; display:block; }
.header-inner{ padding-top:12px; padding-bottom:12px; }
@media (max-width:480px){
.header-inner{ padding-left:18px; padding-right:18px; }
.logo-img{ height:52px; }
}
nav{ display:flex; align-items:center; gap:36px; }
.nav-links{ display:flex; gap:28px; }
/* Unterhalb dieser Breite uebernimmt das Burger-Menue. Wer die Navigation
erweitert, prueft die Grenze neu: sobald Menue, Umschalter und CTA nicht
mehr nebeneinander passen, schiebt der Header die Seite nach rechts. */
@media (max-width:1000px){ .nav-links{ display:none; } }
/* Auf schmalen Geraeten passen Logo, CTA-Button und Burger nicht nebeneinander
— der Header schob die Seite nach rechts. Der CTA entfaellt hier, im
Burger-Menue steht derselbe Button weiterhin bereit. */
@media (max-width:700px){ header nav > .btn-primary{ display:none; } }
/* In der Kopfzeile darf der Knopf kompakter sein als im Fliesstext: dort ist
er das Ziel, hier nur eine Abkuerzung. */
header .btn{ padding:11px 18px; font-size:14px; }
nav a{ text-decoration:none; font-size:15px; color:var(--navy); font-weight:500; white-space:nowrap; }
nav a:hover, nav a.active{ color:var(--blue); }
/* Sprachumschalter. Erscheint nur, wenn in site_config.py mehr als eine
Sprache steht — bei einer Sprache erzeugt shell.py den Block gar nicht. */
.lang-switch{ display:flex; align-items:center; gap:2px; flex-shrink:0; }
.lang-switch a{
font-size:13px; font-weight:600; letter-spacing:0.04em; line-height:1;
color:var(--text-2); padding:6px 9px; border-radius:0;
transition:color 0.15s ease, background 0.15s ease;
}
.lang-switch a:hover{ color:var(--blue); background:var(--paper-2); }
/* aria-current markiert die laufende Sprache. Dieselbe Angabe liest auch ein
Screenreader vor — eine zusaetzliche Klasse waere doppelt gepflegt. */
.lang-switch a[aria-current]{ color:var(--navy); background:var(--paper-2); }
/* Unter 600 px entfaellt bereits der CTA-Button aus Platzgruenden; hier
zusaetzlich den Umschalter, sonst draengt sich der Header wieder. Im
Burger-Menue steht er weiterhin. */
@media (max-width:600px){ header .lang-switch{ display:none; } }
/* Im Burger-Menue: die Regel fuer .mobile-nav a macht Links zu Bloecken mit
Trennlinie — fuer zwei nebeneinanderstehende Sprachkuerzel zuruecknehmen. */
.mobile-nav .lang-switch{ margin-top:24px; justify-content:center; }
.mobile-nav .lang-switch a{
display:inline-flex; border-bottom:none; font-size:15px; padding:10px 16px;
}
/* Knoepfe ohne Rundung und ohne Sprung beim Hover: der Auftritt lebt von
geraden Kanten und ruhigen Flaechen, ein huepfender Knopf faellt darin auf
wie ein Fremdkoerper. Der Wechsel passiert ueber die Farbe. */
.btn{
font-weight:600; font-size:15px; padding:15px 28px; border-radius:0;
text-decoration:none; display:inline-flex; align-items:center; gap:8px;
border:1px solid transparent; cursor:pointer; letter-spacing:0.01em;
transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-primary{ background:var(--navy); color:#fff; border-color:var(--navy); }
.btn-primary:hover{ background:var(--blue); border-color:var(--blue); }
.btn-ghost{ border-color:var(--navy); color:var(--navy); }
.btn-ghost:hover{ background:var(--navy); color:#fff; }
.btn:disabled{ opacity:0.6; cursor:not-allowed; }
.menu-btn{
display:none; background:none; border:none; cursor:pointer;
width:40px; height:40px; padding:0; align-items:center; justify-content:center;
flex-direction:column; gap:5px;
}
.menu-btn span{ display:block; width:22px; height:2px; background:var(--navy); transition:transform 0.25s ease, opacity 0.25s ease; }
@media (max-width:1000px){ .menu-btn{ display:flex; } }
.menu-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mobile-nav{ display:none; position:fixed; top:65px; left:0; right:0; bottom:0; background:#fff; z-index:49; padding:12px 28px 40px; overflow-y:auto; }
.mobile-nav.open{ display:block; }
.mobile-nav a{ display:block; padding:14px 0; font-size:18px; font-weight:600; color:var(--navy); text-decoration:none; border-bottom:1px solid var(--line); }
.mobile-nav .btn{ display:block; text-align:center; margin-top:24px; }
/* ---------- Hero (home) ---------- */
.hero{ padding:110px 0 100px; }
/* Die Textspalte ist die breitere: das Foto ist hochkant und darf nicht
groesser laufen als seine 480 px Originalbreite, sonst wird es weich. */
.hero-grid{ display:grid; grid-template-columns:1.25fr 0.75fr; gap:64px; align-items:center; }
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; gap:48px; } }
/* Grid-Kinder haben von Haus aus min-width:auto und koennen daher nicht
unter die Breite ihres Inhalts schrumpfen. Auf 320 px erzwang der lange
CTA-Text so eine 302 px breite Spalte in einem 264 px breiten Raster —
die Seite lief um 10 px ueber. */
.hero-grid > *{ min-width:0; }
.hero-copy > *{ animation:fadeUp 0.7s ease both; }
.hero-copy > *:nth-child(1){ animation-delay:0.05s; }
.hero-copy > *:nth-child(2){ animation-delay:0.15s; }
.hero-copy > *:nth-child(3){ animation-delay:0.25s; }
.hero-copy > *:nth-child(4){ animation-delay:0.35s; }
.hero-copy > *:nth-child(5){ animation-delay:0.45s; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
.hero h1{ font-size:clamp(34px, 4.6vw, 54px); margin:16px 0 24px; }
.hero h1 .hi{ color:var(--blue); }
.hero p.lede{ font-size:18px; color:var(--text-2); max-width:560px; margin-bottom:34px; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:36px; }
.hero-meta{ display:flex; gap:24px; flex-wrap:wrap; font-size:13.5px; color:var(--text-2); }
.hero-meta b{ color:var(--navy); font-weight:600; }
/* Das Motiv der Wortmarke: ein Rahmen aus Haarlinien, den der Inhalt
durchbricht. Hier tritt das Foto aus dem Rahmen, der versetzt dahinter
sitzt. Rein dekorativ und ohne eigenen Inhalt, deshalb ::before.
max-width: die Originale der fertigen Raeume sind 480 px breit. Groesser
gezogen werden sie weich, also darf die Spalte nicht mehr hergeben.
Sobald bessere Aufnahmen vorliegen, steigt der Wert. */
.hero-art{ position:relative; justify-self:end; width:100%; max-width:420px;
animation:fadeUp 0.9s ease 0.3s both; }
@media (max-width:900px){ .hero-art{ justify-self:start; } }
.hero-art::before{
content:""; position:absolute; z-index:0;
left:-22px; top:34px; bottom:34px; right:38px;
border:1px solid var(--blue);
}
@media (max-width:520px){ .hero-art::before{ left:-12px; right:24px; } }
.hero-photo-frame{ position:relative; z-index:1; width:100%; overflow:hidden; }
.hero-photo-frame img{ width:100%; height:auto; display:block; }
/* Bildunterschrift statt Etikett im Bild: ein aufgesetzter Kasten verdeckt
immer genau die Ecke, die man sehen will. */
.hero-bildzeile{ position:relative; z-index:1; margin-top:14px; font-size:13px;
color:var(--text-2); letter-spacing:0.02em; }
/* ---------- Page header (inner pages) ---------- */
.page-hero{ padding:64px 0 48px; border-bottom:1px solid var(--line); }
.page-hero h1{ font-size:clamp(28px,4vw,42px); margin-top:12px; }
.page-hero p{ color:var(--text-2); font-size:16px; max-width:640px; margin-top:14px; }
.breadcrumb{ font-size:13px; color:var(--text-2); margin-bottom:10px; }
.breadcrumb a{ color:var(--blue); text-decoration:none; }
.breadcrumb a:hover{ text-decoration:underline; }
/* ---------- Trust bar ---------- */
.trust{ background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:40px 0; }
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
@media (max-width:760px){ .trust-grid{ grid-template-columns:1fr 1fr; } }
.trust-grid .n{ font-family:'Source Serif 4', serif; font-size:32px; font-weight:700; color:var(--navy); }
.trust-grid .l{ font-size:13px; color:var(--text-2); margin-top:4px; }
.trust-grid .reveal:nth-child(2){ transition-delay:0.08s; }
.trust-grid .reveal:nth-child(3){ transition-delay:0.16s; }
.trust-grid .reveal:nth-child(4){ transition-delay:0.24s; }
/* ---------- Services list ---------- */
.services-list{ display:flex; flex-direction:column; margin-top:48px; }
.service-row{ display:grid; grid-template-columns:44px 1fr 1fr; gap:32px; padding:34px 0; border-top:1px solid var(--line); align-items:start; transition:background 0.25s ease, padding-left 0.25s ease; }
.service-row:last-child{ border-bottom:1px solid var(--line); }
.service-row:hover{ background:var(--paper-2); padding-left:16px; margin-left:-16px; padding-right:16px; margin-right:-16px; border-radius:0; }
@media (max-width:820px){ .service-row{ grid-template-columns:1fr; gap:10px; } }
.service-row .idx{ width:44px; height:44px; border-radius:0; background:var(--paper-2); color:var(--blue); font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center; font-family:'Inter',sans-serif; transition:background 0.25s ease, color 0.25s ease; }
.service-row:hover .idx{ background:var(--blue); color:#fff; }
.service-row h3{ font-size:21px; margin-bottom:8px; }
.service-row p{ color:var(--text-2); font-size:15px; }
.service-row a.more{ font-size:13.5px; font-weight:600; color:var(--blue); text-decoration:none; }
.service-row a.more:hover{ text-decoration:underline; }
.services-list .reveal:nth-child(2){ transition-delay:0.05s; }
.services-list .reveal:nth-child(3){ transition-delay:0.10s; }
.services-list .reveal:nth-child(4){ transition-delay:0.15s; }
.services-list .reveal:nth-child(5){ transition-delay:0.20s; }
.services-list .reveal:nth-child(6){ transition-delay:0.25s; }
.services-list .reveal:nth-child(7){ transition-delay:0.30s; }
.services-list .reveal:nth-child(8){ transition-delay:0.35s; }
.services-list .reveal:nth-child(9){ transition-delay:0.40s; }
/* ---------- Referenzen ---------- */
.ref-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; }
@media (max-width:900px){ .ref-grid{ grid-template-columns:1fr; } }
/* Grid-Kinder haben per Default min-width:auto und koennen dadurch nicht
unter ihre Inhaltsbreite schrumpfen — ohne min-width:0 laeuft die Spur
ueber und die Seite bekommt einen horizontalen Scrollbalken. */
.ref-card{ min-width:0; border:1px solid var(--line); border-radius:0; padding:28px 24px; transition:border-color 0.25s ease; }
/* Screenshot der umgesetzten Website, randlos oben in der Karte. Die negativen
Margins heben das Kartenpolster auf; der Radius ist 11px statt 12px, damit das
Bild innerhalb des 1px-Rahmens sitzt und nicht darueber. */
.ref-shot{
display:block; margin:-28px -24px 20px; overflow:hidden;
border-radius:0; border-bottom:1px solid var(--line);
background:var(--paper-2);
}
.ref-shot img{ display:block; width:100%; height:auto; }
/* Der Screenshot ist ein zweiter Link auf dasselbe Ziel wie "Zur Website" und
traegt aria-hidden + tabindex=-1: fuer die Tastatur und Screenreader waere er
eine reine Dopplung. Der Hover-Effekt bleibt als visueller Hinweis. */
.ref-shot img{ transition:transform 0.4s ease; }
.ref-card:hover .ref-shot img{ transform:scale(1.03); }
@media (prefers-reduced-motion: reduce){
.ref-card:hover .ref-shot img{ transform:none; }
}
.ref-card:hover{ border-color:var(--blue); }
.ref-card .client{ font-weight:700; font-size:19px; color:var(--navy); margin-bottom:4px; font-family:'Source Serif 4',serif; }
.ref-card .sector{ font-size:12.5px; color:var(--blue); font-weight:600; margin-bottom:16px; display:block; text-transform:uppercase; letter-spacing:0.04em; }
.ref-card p{ font-size:14px; color:var(--text-2); margin-bottom:14px; }
/* margin-top fehlte: die Trennlinie sass ohne Abstand direkt unter der letzten
Leistungsmarke. padding-top wirkt nur unterhalb der Linie, oberhalb braucht
es einen eigenen Abstand. */
.ref-card .proof{ font-size:13px; color:var(--navy); font-weight:600; border-top:1px solid var(--line); margin-top:28px; padding-top:16px; }
/* Die Marken sind Flex-Elemente mit Zeilenumbruch. Ihre Unterkante ist nicht
automatisch die Unterkante des Containers, sobald die letzte Zeile nur teilweise
gefuellt ist — deshalb hier zusaetzlich Luft unter dem Markenblock statt sich
allein auf das margin des naechsten Elements zu verlassen. */
.ref-grid .reveal:nth-child(2){ transition-delay:0.08s; }
.ref-grid .reveal:nth-child(3){ transition-delay:0.16s; }
/* ---------- FAQ ---------- */
.faq-list{ margin-top:40px; }
details{ border-bottom:1px solid var(--line); padding:22px 0; }
details:first-child{ border-top:1px solid var(--line); }
summary{ cursor:pointer; font-size:17px; color:var(--navy); font-weight:700; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px; letter-spacing:-0.01em; font-family:'Source Serif 4',serif; }
summary::-webkit-details-marker{ display:none; }
summary::after{ content:"+"; font-size:20px; color:var(--blue); font-weight:400; flex-shrink:0; transition:transform 0.2s ease; font-family:'Inter',sans-serif; }
details[open] summary::after{ transform:rotate(45deg); }
details p{ margin-top:14px; font-size:14.5px; color:var(--text-2); max-width:680px; }
.faq-list details:nth-child(2){ transition-delay:0.05s; }
.faq-list details:nth-child(3){ transition-delay:0.10s; }
.faq-list details:nth-child(4){ transition-delay:0.15s; }
/* ---------- Process flow diagram ---------- */
.flow{ margin-top:56px; position:relative; }
.flow-line{ position:absolute; top:23px; left:0; right:0; height:2px; background:var(--line); z-index:0; }
.flow-line-fill{ position:absolute; top:0; left:0; height:100%; width:0%; background:var(--blue); transition:width 1.4s cubic-bezier(0.4,0,0.2,1) 0.2s; }
.flow.in-view .flow-line-fill{ width:100%; }
.flow-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; position:relative; z-index:1; }
.flow-step{ text-align:center; }
/* Unter 760 px bricht das Raster auf zwei Spalten um. Die durchgehende
.flow-line liegt aber absolut auf top:23px und trifft damit nur noch die
erste Zeile — bei 03 und 04 fehlte die Verbindung ganz. Statt einer Linie
fuer alles bekommt hier jeder Schritt seinen eigenen Verbinder nach rechts,
und der letzte je Zeile keinen.
Die Breite: Abstand zwischen zwei Punktmitten ist Spaltenbreite + 20 px Gap,
davon gehen zweimal 24 px Punktradius ab — bleibt calc(100% - 28px). */
@media (max-width:760px){
.flow-steps{ grid-template-columns:1fr 1fr; row-gap:36px; }
.flow-line{ display:none; }
.flow-step{ position:relative; }
.flow-step::after{
content:""; position:absolute; top:23px; left:calc(50% + 24px);
width:calc(100% - 28px); height:2px; background:var(--line);
transition:background-color 0.5s ease;
}
/* Jeder zweite Schritt schliesst eine Zeile ab und braucht keinen Verbinder. */
.flow-step:nth-child(2n)::after{ content:none; }
.flow.in-view .flow-step::after{ background:var(--blue); }
.flow.in-view .flow-step:nth-child(1)::after{ transition-delay:0.3s; }
.flow.in-view .flow-step:nth-child(3)::after{ transition-delay:1.1s; }
}
.flow-dot{ width:48px; height:48px; border-radius:0; background:#fff; border:2px solid var(--line); color:var(--text-2); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-weight:700; font-family:'Source Serif 4',serif; font-size:17px; transition:border-color 0.5s ease, color 0.5s ease, background 0.5s ease, transform 0.4s ease; }
.flow.in-view .flow-dot{ border-color:var(--blue); color:#fff; background:var(--blue); }
.flow-step:nth-child(1) .flow-dot{ transition-delay:0.1s; }
.flow-step:nth-child(2) .flow-dot{ transition-delay:0.5s; }
.flow-step:nth-child(3) .flow-dot{ transition-delay:0.9s; }
.flow-step:nth-child(4) .flow-dot{ transition-delay:1.3s; }
.flow-step h3{ font-family:'Source Serif 4',serif; font-size:16px; font-weight:600; color:var(--navy); margin-bottom:6px; }
.flow-step p{ font-size:13px; color:var(--text-2); }
/* ---------- Final CTA ---------- */
.cta-final{ text-align:center; }
.cta-final h2{ font-size:clamp(28px,4vw,42px); margin-bottom:16px; }
.cta-final p{ color:var(--text-2); max-width:480px; margin:0 auto 34px; font-size:16px; }
.cta-final .hero-ctas{ justify-content:center; }
/* ---------- Contact page ---------- */
.contact-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:start; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }
/* Grid-Kinder haben von Haus aus min-width:auto und schrumpfen deshalb nicht
unter die Breite ihres Inhalts. Hier war der Inhalt die E-Mail-Adresse:
ein Wort, das nicht umbrechen kann. Bei 320 px lief die Kontaktseite
dadurch 21 px ueber den Viewport hinaus — sichtbar nur als waagerechter
Scrollbalken, nicht als ueberstehender Kasten. */
.contact-grid > *{ min-width:0; }
.contact-info-row{ flex-wrap:wrap; }
.contact-info-row a, .contact-info-row span{ overflow-wrap:anywhere; min-width:0; }
.form-field{ margin-bottom:20px; }
.form-field label{ display:block; font-size:13.5px; font-weight:600; color:var(--navy); margin-bottom:6px; }
.form-field input, .form-field select, .form-field textarea{
width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:0;
font-family:'Inter',sans-serif; font-size:15px; color:var(--navy); background:#fff;
transition:border-color 0.15s ease;
}
/* Maus-/Touch-Fokus: nur die Rahmenfarbe, kein Outline-Ring. */
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ border-color:var(--blue); outline:none; }
/* Tastaturfokus braucht einen sichtbaren Ring (WCAG 2.4.7). Ohne diese Regel
gewinnt das obige outline:none durch hoehere Spezifitaet gegen :focus-visible. */
.form-field input:focus-visible, .form-field select:focus-visible, .form-field textarea:focus-visible{
outline:2px solid var(--blue); outline-offset:2px;
}
.form-field textarea{ resize:vertical; min-height:130px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:520px){ .form-row{ grid-template-columns:1fr; } }
.form-consent{ display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--text-2); margin:18px 0 22px; }
.form-consent input{ margin-top:3px; }
.form-consent a{ color:var(--blue); text-decoration:underline; }
.form-note{ font-size:12.5px; color:var(--text-2); margin-top:10px; }
.form-status{ padding:14px 16px; border-radius:0; font-size:14px; margin-bottom:20px; display:none; }
.form-status.show{ display:block; }
.form-status.success{ background:#E7F6EC; color:var(--green); border:1px solid #BEE6CB; }
.form-status.error{ background:#FBE9E9; color:#B3261E; border:1px solid #F3C6C6; }
.contact-info-card{ background:var(--paper-2); border-radius:0; padding:32px; border:1px solid var(--line); }
.contact-info-card h2{ font-size:19px; margin-bottom:18px; }
.contact-info-row{ display:flex; gap:14px; padding:14px 0; border-top:1px solid var(--line); font-size:14.5px; }
.contact-info-row:first-of-type{ border-top:none; padding-top:0; }
.contact-info-row .label{ color:var(--text-2); min-width:90px; }
.contact-info-row a{ color:var(--navy); text-decoration:none; font-weight:600; }
.contact-info-row a:hover{ color:var(--blue); }
/* ---------- Legal / content pages (Impressum, Datenschutz, Cookies, AGB) ---------- */
.legal-content{ max-width:820px; }
.legal-content h2{ font-size:22px; margin-top:44px; margin-bottom:14px; }
.legal-content h2:first-child{ margin-top:0; }
.legal-content h3{ font-size:17px; margin-top:26px; margin-bottom:10px; }
.legal-content p{ font-size:15.5px; color:var(--text-2); margin-bottom:14px; }
.legal-content ul, .legal-content ol{ margin:0 0 16px 22px; color:var(--text-2); font-size:15.5px; }
.legal-content li{ margin-bottom:8px; }
.legal-content a{ color:var(--blue); text-decoration:underline; }
/* Vierspaltige Tabelle mit langen Zellinhalten (Cookie-Richtlinie): unter
600 px passte sie nicht mehr und schob die Seite um bis zu 299 px nach
rechts. Tabellen schrumpfen nicht unter ihre Mindestbreite, deshalb darf
hier nur die Tabelle selbst scrollen, nie die Seite. display:block ist
noetig, damit overflow an einem