pink (4,3:1 auf Papier) — und es ist keine Hausfarbe. */
.artikel code,
.rechtstext code { color: var(--blue-dark); }
.artikel h2,
.rechtstext h2,
.rechtstext h3,
.rechtstext h4 {
color: var(--dark);
font-weight: 600;
line-height: 1.2;
margin: 2.5rem 0 0.85rem;
font-variation-settings: 'opsz' 60, 'SOFT' 60, 'wght' 600;
}
.artikel h2 { font-size: 1.6rem; }
.artikel h3 { font-size: 1.2rem; margin: 1.75rem 0 0.6rem; color: var(--dark); }
.rechtstext h2, .rechtstext h3 { font-size: 1.3rem; }
.rechtstext h4 { font-size: 1.12rem; }
.artikel > :first-child,
.rechtstext > :first-child { margin-top: 0; }
.artikel p, .artikel ul, .artikel ol, .artikel table,
.rechtstext p, .rechtstext ul, .rechtstext ol { margin-bottom: 1.1rem; }
.artikel li, .rechtstext li { margin-bottom: 0.35rem; }
.artikel a, .rechtstext a { color: var(--blue); text-underline-offset: 0.18em; }
.artikel table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.artikel th, .artikel td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.artikel th { font-weight: 600; color: var(--dark); background: var(--cream); }
.artikel-hinweis {
margin-top: 3rem;
padding: 1.75rem 2rem;
border-radius: 16px;
background: var(--cream-dark);
}
.artikel-hinweis h2 { margin-top: 0; font-size: 1.35rem; }
.artikel-hinweis p:last-of-type { margin-bottom: 1.25rem; }
.artikel-fuss {
margin-top: 3rem;
padding-top: 1.5rem;
border-top: 1px solid var(--border);
color: var(--text-muted);
font-size: 0.9rem;
}
/* Bildnachweis im Impressum */
.bildnachweis { font-size: 0.9rem; color: var(--text-muted); }
/* Bei reduzierter Bewegung keine Schwebe-Effekte an den neuen Bausteinen. */
@media (prefers-reduced-motion: reduce) {
.weiterlesen { transition: none; }
}
/* Honeypot-Feld (Bot-Falle) — aus dem Viewport geschoben statt display:none,
weil manche Bots display:none-Felder erkennen und auslassen. Für Menschen
unsichtbar und nicht fokussierbar (tabindex="-1" + aria-hidden im Markup).
Als Klasse, damit die Views ohne Inline-Style auskommen (CI-Gate
scripts/check-inline-styles.js blockt neue style="…"-Werte). */
.hp-feld {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* Menü zwischen 992 und 1199 px: Dort ist es schon ausgeklappt, aber der
Platz reicht nicht — bei 1024 px lief der Knopf „Anfrage stellen" 21 px
über den Rand (iPad quer, Laptop mit 125 % Zoom). Gemessen bei der
Portal-Prüfung am 29.09.2026 (Systemblick 7.1). Engere Abstände statt
späterem Ausklappen, damit das Menü dort sichtbar bleibt. */
/* Seit 05.10.2026 heißt der Knopf „Erstgespräch anfragen“ (Startplan Nr. 66) und
ist 45 px breiter: bei 992 px stand er 42 px über. Noch etwas engere Abstände
und kein Zwischenraum zwischen den Menüpunkten, gemessen auf dem Prüfstand
bei 992, 1024 und 1199 px (Ausbau Sitzung 7). */
@media (min-width: 992px) and (max-width: 1199.98px) {
.navbar .nav-link:not(.btn-nav) {
padding-left: 0.35rem !important;
padding-right: 0.35rem !important;
}
.navbar .btn-nav {
padding-left: 0.85rem !important;
padding-right: 0.85rem !important;
}
#navbarNav .navbar-nav { gap: 0 !important; }
#navbarNav .nav-item.ms-2 { margin-left: 0.35rem !important; }
}
/* Notfall-Hinweise in Rot: #ef4444 hatte auf dem hellen Kasten nur
3,8 : 1 (Notfall-Seite, Schadensmeldung) — dunkleres Rot, gleiche Wirkung,
über 4,5 : 1. Vorher als Inline-Stil in den Vorlagen (Portal-Prüfung
29.09.2026, Befund G18). */
.text-notfall { color: #b91c1c; }
.text-notfall--titel { font-size: 1.1rem; }
.text-notfall--gross { font-size: 1.5rem; }
/* Notfall- und Schadensseite in den Hausfarben (04_Betrieb/02_Firma/_HAUSSTIL.md,
29.09.2026). Vorher standen hier Inline-Farben aus einem fremden Baukasten
(#ef4444, #3b6b9a, #f59e0b, #7a1f1f). */
.notfall-hero { padding: 5rem 0 3rem; background: var(--color-traffic-rot); }
.hero h1 .notfall-hero__hell { color: var(--color-danger-bg); } /* schlägt „.hero h1 span“ (Nebel) */
.problem-card--notfall { border-color: var(--color-danger); }
.notfall-icon--blau { color: var(--color-brand); }
.notfall-icon--bernstein { color: var(--color-warning); }
.notfall-icon--grau { color: var(--color-ink-soft); }
.problem-icon--blau { background: var(--color-brand-haze); color: var(--color-brand); }
/* „← Zurück zur Startseite" (btn-link, Danke-Seite) kam auf 4,3 : 1. */
.btn-link {
--bs-btn-color: #2d6b8e;
--bs-btn-hover-color: #1a4d6b;
}
/* ── Tippflächen auf dem Handy mindestens 44 px (Portal-Prüfung 29.09.2026, G19) ──
Gemessen: Menüknopf 40 × 40, Links im aufgeklappten Menü 34 px hoch. */
.navbar-toggler-anim {
width: 44px;
height: 44px;
}
@media (max-width: 991.98px) {
.navbar .nav-link:not(.btn-nav) {
padding-top: 0.7rem !important;
padding-bottom: 0.7rem !important;
}
}
@media (max-width: 991.98px) {
.navbar .dropdown-item {
padding-top: 0.7rem;
padding-bottom: 0.7rem;
}
}
/* Auf schmalen Handys passte der Menüknopf nicht mehr neben den Namen und
rutschte in eine eigene Zeile (gemessen bei 375 px: 297 + 16 + 44 > 351). */
@media (max-width: 400px) {
.navbar-brand {
--bs-navbar-brand-margin-end: 0;
margin-right: 0;
font-size: 0.97rem;
gap: 0.5rem;
}
}
/* ════════════════════════════════════════════════════════════════════════════
Startseite nach Entwurf C (20.10.2026, Adrian)
────────────────────────────────────────────────────────────────────────────
Vorlage: 03_Vertrieb/06_Homepage-Entwuerfe/2026-10-19_Startseite-Entwurf-C.html,
Entscheidungen in der LIESMICH.md daneben. Anlass: die Startseite „erschlägt“
einen. Jetzt ein ruhiger dunkelblauer Kopf über dem Hafen von Langenargen,
darunter gleich die drei Wege mit einer leisen Vertrauenszeile, die Abschnitte im
Wechsel Papier und Papier hell, die Symbole der Listen in hellblauen Kreisen.
Jede Regel hängt an .startseite (die Hülle in views/homepage/index.handlebars) oder
an .hero--start: .hero, die Listen, die Knöpfe und der Schlusskasten gelten auch auf
der Eigentümer-, WEG-, Notfall- und den Ortsseiten, und die bleiben, wie sie sind.
Menü, Fuß und der Knopf unten am Handy liegen außerhalb der Hülle.
════════════════════════════════════════════════════════════════════════════ */
/* ── Kopf: Blau über dem Hafenbild, ohne Wellen und ohne schräge Fläche ── */
.startseite .hero--start {
background: var(--dark);
padding: clamp(56px, 8vw, 92px) 0 clamp(64px, 9vw, 104px);
}
.startseite .hero--start::before,
.startseite .hero--start::after { content: none; animation: none; }
/* Das Foto zoomt in 40 Sekunden von 1,04 auf 1,14 und zurück. Bewegt wird nur per
transform: das läuft auf der Grafikkarte und zeichnet nichts neu. */
.startseite .hero-see {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 50% 62%;
transform-origin: 70% 60%;
animation: start-see 40s ease-in-out infinite alternate;
}
@keyframes start-see {
from { transform: scale(1.04); }
to { transform: scale(1.14) translate3d(-2%, -1%, 0); }
}
/* „Bewegung reduzieren“: das Foto steht still (Barrierefreiheitserklärung). */
@media (prefers-reduced-motion: reduce) {
.startseite .hero-see { animation: none; transform: scale(1.04); }
}
/* Schleier in Dunkelblau: links dichter, dort steht der Text. */
.startseite .hero-schleier {
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(21,36,60,0.9) 0%, rgba(21,36,60,0.8) 50%, rgba(21,36,60,0.45) 100%);
}
.startseite .hero-start-innen {
max-width: 760px;
display: flex;
flex-direction: column;
gap: 20px;
}
.startseite .hero-vorzeile {
margin: 0;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
line-height: 1.6;
text-transform: uppercase;
color: var(--blue-mid);
}
.startseite .hero--start h1 {
margin: 0;
font-size: clamp(2rem, 4.4vw, 3rem);
line-height: 1.1;
letter-spacing: -0.02em;
text-wrap: balance;
font-variation-settings: 'opsz' 48, 'SOFT' 50, 'wght' 600;
}
.startseite .hero--start h1 span { font-variation-settings: 'opsz' 48, 'SOFT' 100, 'wght' 500; }
.startseite .hero--start .hero-lead {
margin: 0;
max-width: 600px;
font-size: clamp(1rem, 1.6vw, 1.12rem);
line-height: 1.65;
color: var(--blue-light);
}
.startseite .hero-aktion {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px 22px;
margin-top: 8px;
}
.startseite .hero--start .hero-trust {
margin: 0;
gap: 8px;
font-size: 14px;
color: var(--blue-mid);
}
/* ── Knöpfe: 50 px hoch, beim Überfahren ohne Anheben und Schatten ── */
.startseite .btn-hero,
.startseite .btn-blue,
.startseite .btn-outline-dark,
.startseite .btn-cta-primary,
.startseite .btn-cta-secondary {
min-height: 50px;
padding: 0 24px;
gap: 10px;
justify-content: center;
border-radius: 10px;
font-size: 1rem;
font-weight: 600;
}
.startseite .btn-hero:hover,
.startseite .btn-blue:hover,
.startseite .btn-cta-primary:hover { transform: none; box-shadow: none; }
.startseite .btn-blue .ms-1,
.startseite .btn-outline-dark .ms-1 { margin-left: 0 !important; }
/* Hell auf Dunkelblau: Knopf im Kopf und im Schlusskasten */
.startseite .btn-hero,
.startseite .btn-cta-primary {
background: var(--blue-light);
border-color: var(--blue-light);
color: var(--dark) !important;
}
.startseite .btn-hero:hover,
.startseite .btn-cta-primary:hover {
background: var(--surface) !important;
border-color: var(--surface);
color: var(--dark) !important;
}
.startseite .btn-cta-secondary {
color: #fff;
border: 1.5px solid rgba(229,239,245,0.45);
}
.startseite .btn-cta-secondary:hover {
color: #fff;
background: rgba(229,239,245,0.1);
border-color: var(--blue-light);
}
/* ── Drei Wege direkt unter dem Kopf ── */
.startseite .start-wege {
background: var(--cream);
padding: 40px 0 44px;
}
.startseite .start-wege__titel {
margin: 0 0 20px;
font-size: clamp(1.35rem, 2.4vw, 1.6rem);
line-height: 1.18;
letter-spacing: -0.015em;
font-variation-settings: 'opsz' 36, 'SOFT' 50, 'wght' 600;
}
.startseite .start-wege .row { --bs-gutter-x: 20px; --bs-gutter-y: 20px; }
.startseite .start-wege .service-card {
display: flex;
flex-direction: column;
gap: 10px;
padding: 24px 26px;
border-radius: 14px;
background: var(--flaeche-warm);
border: 1px solid var(--border);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.startseite .start-wege .service-card:hover {
transform: none;
border-color: var(--blue);
box-shadow: 0 8px 24px rgba(21,36,60,0.08);
}
.startseite .start-wege .service-illustration,
.startseite .start-wege .service-card:hover .service-illustration {
width: 52px;
height: 52px;
padding: 0;
margin: 0;
flex-shrink: 0;
background: none;
border-radius: 0;
color: var(--blue);
transform: none;
}
.startseite .start-wege .service-illustration svg,
.startseite .start-wege .service-illustration svg * { stroke-width: 2.4; }
.startseite .start-wege .service-card h3 {
margin: 0;
font-family: var(--font-sans);
font-feature-settings: 'ss01', 'cv05';
font-variation-settings: normal;
font-size: 18px;
font-weight: 600;
line-height: 1.35;
letter-spacing: 0;
color: var(--dark);
}
.startseite .start-wege .service-card p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--text-muted); }
.startseite .start-wege .service-cta,
.startseite .start-wege .service-card:hover .service-cta {
margin-top: 0;
padding-top: 4px;
gap: 8px;
font-size: 15.5px;
color: var(--blue);
}
/* Vertrauenszeile: kein eigenes Band mehr, leise unter den Karten */
.startseite .start-vertrauen {
justify-content: flex-start;
gap: 10px 28px;
margin-top: 28px;
}
.startseite .start-vertrauen .trust-item {
padding: 0;
gap: 8px;
font-size: 14.5px;
font-weight: 400;
color: var(--text-muted);
}
.startseite .start-vertrauen .trust-item i { font-size: 1em; color: var(--blue); }
/* ── Abschnitte: Papier und Papier hell im Wechsel, Köpfe kleiner ── */
.startseite .section { padding: clamp(56px, 8vw, 96px) 0; }
.startseite .section-alt { background: var(--cream); }
.startseite .eyebrow {
margin-bottom: 12px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
line-height: 1.6;
}
.startseite .section .section-title {
margin-bottom: 12px;
font-size: clamp(1.6rem, 3vw, 2.15rem);
line-height: 1.18;
letter-spacing: -0.015em;
text-wrap: balance;
font-variation-settings: 'opsz' 36, 'SOFT' 50, 'wght' 600;
}
.startseite .section-sub { max-width: 640px; font-size: 1.0625rem; }
/* Fotos ohne versetzte Linie und Schatten, Ortsangabe in normaler Schrift */
.startseite .bild-rahmen__bild img { border-radius: 16px; box-shadow: none; }
.startseite .bild-rahmen__bild::before { content: none; }
.startseite .bild-ort {
margin-top: 12px;
gap: 6px;
font-size: 14px;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
}
.startseite .portal-bild img { border-radius: 12px; box-shadow: 0 16px 40px rgba(21,36,60,0.12); }
.startseite .portal-bild figcaption { margin-top: 10px; font-size: 14px; }
/* Listen: Symbol im hellblauen Kreis, Titel in Geist, ohne Linien bei Sorgen und „Warum ich“ */
.startseite .sorgen-liste {
display: flex;
flex-direction: column;
gap: 22px;
margin-top: 28px;
}
.startseite .sorgen-liste li,
.startseite .sorgen-liste li:last-child { padding: 0; border: 0; }
.startseite .sorgen-liste li,
.startseite .leistungsliste li { grid-template-columns: 44px minmax(0, 1fr); gap: 0 16px; }
.startseite .sorgen-liste li > i,
.startseite .leistungsliste li > i,
.startseite .why-symbol {
display: grid;
place-items: center;
width: 44px;
height: 44px;
flex-shrink: 0;
border-radius: 50%;
background: var(--blue-light);
color: var(--blue);
font-size: 1.25rem;
line-height: 1;
}
.startseite .sorgen-liste h3,
.startseite .leistungsliste h3,
.startseite .why-row h3 {
margin: 0 0 4px;
font-family: var(--font-sans);
font-feature-settings: 'ss01', 'cv05';
font-variation-settings: normal;
font-size: 17px;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0;
color: var(--dark);
}
.startseite .sorgen-liste p,
.startseite .leistungsliste p,
.startseite .why-row p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--text-muted); }
.startseite .sorgen-schluss {
align-items: center;
gap: 10px;
margin-top: 28px;
font-size: 21px;
color: var(--blue);
font-variation-settings: 'opsz' 24, 'SOFT' 100, 'wght' 400;
}
.startseite .leistungsliste { column-gap: 40px; border-bottom: 0; }
.startseite .leistungsliste li { padding: 22px 0; border-top: 1px solid var(--color-line-soft); }
/* „Warum ich“: Kreise statt der Nummern 01–04 */
.startseite .why-row {
gap: 16px;
align-items: flex-start;
padding: 0;
border-top: 0;
}
.startseite .section-title + .why-row { margin-top: 28px; }
.startseite .why-row + .why-row { margin-top: 22px; }
/* Ablauf und Ratgeber: Verweise in normaler Textgröße */
.startseite .weiterlesen { gap: 8px; font-size: 1rem; }
/* Bricht ein Titel um, bleibt der Pfeil am Wortende statt allein am rechten Rand. */
.startseite .start-ratgeber .weiterlesen { display: inline; font-weight: 500; }
.startseite .start-ratgeber-titel {
margin-top: 40px !important;
font-family: var(--font-sans);
font-feature-settings: 'ss01', 'cv05';
font-variation-settings: normal;
font-size: 15px;
font-weight: 600;
letter-spacing: 0;
color: var(--dark);
}
/* Fragen: Geist statt Fraunces, die offene Frage bleibt dunkel */
.startseite .faq-question,
.startseite .faq-question:hover,
.startseite .faq-question:not(.collapsed) {
padding: 20px 2px;
font-family: var(--font-sans);
font-feature-settings: 'ss01', 'cv05';
font-variation-settings: normal;
font-size: 17px;
color: var(--dark);
}
.startseite .faq-icon,
.startseite .faq-question:not(.collapsed) .faq-icon { color: var(--blue); }
.startseite .faq-answer { max-width: 62ch; padding: 0 2px 22px; font-size: 1rem; line-height: 1.65; }
/* Schlusskasten: flaches Dunkelblau, heller Knopf */
.startseite .cta-strip {
background: var(--dark);
border-radius: 20px;
padding: clamp(28px, 5vw, 52px);
gap: 28px 48px;
}
.startseite .cta-eyebrow {
margin-bottom: 8px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
color: var(--blue-mid);
}
.startseite .cta-strip h3 {
margin: 0 0 12px;
font-size: clamp(1.5rem, 3vw, 2rem);
line-height: 1.18;
font-variation-settings: 'opsz' 36, 'SOFT' 50, 'wght' 600;
}
.startseite .cta-strip p { max-width: 560px; font-size: 1rem; line-height: 1.65; color: var(--blue-light); }
.startseite .cta-reassurance {
margin-top: 20px;
gap: 8px 22px;
font-size: 15px;
color: var(--blue-mid);
}
.startseite .cta-reassurance span { gap: 6px; }
.startseite .cta-actions { gap: 12px; }
/* ── Handy ── */
@media (max-width: 767.98px) {
.startseite .hero--start { padding: 48px 0 56px; }
.startseite .hero-see { object-position: 64% 62%; }
.startseite .hero-schleier { background: rgba(21,36,60,0.8); }
.startseite .hero-aktion .btn-hero { width: 100%; }
.startseite .start-wege { padding: 28px 0 32px; }
.startseite .start-wege__titel { margin-bottom: 14px; }
.startseite .start-wege .row { --bs-gutter-y: 10px; }
/* Kompakte Zeilen: Symbol links, Frage und Ziel daneben, Pfeil rechts, ohne Beschreibung */
.startseite .start-wege .service-card {
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
column-gap: 14px;
row-gap: 2px;
align-items: center;
padding: 14px 48px 14px 16px;
}
.startseite .start-wege .service-illustration,
.startseite .start-wege .service-card:hover .service-illustration { grid-row: 1 / span 2; width: 38px; height: 38px; }
.startseite .start-wege .service-illustration svg,
.startseite .start-wege .service-illustration svg * { stroke-width: 3; }
.startseite .start-wege .service-card h3 { align-self: end; font-size: 16px; }
.startseite .start-wege .service-card p { display: none; }
.startseite .start-wege .service-cta,
.startseite .start-wege .service-card:hover .service-cta {
align-self: start;
margin: 0;
padding: 0;
font-size: 14.5px;
font-weight: 500;
color: var(--text-muted);
}
.startseite .start-wege .service-cta i {
position: absolute;
top: 50%;
right: 16px;
transform: translateY(-50%);
font-size: 1.15rem;
color: var(--blue);
}
.startseite .start-vertrauen { gap: 8px 18px; margin-top: 22px; }
.startseite .start-vertrauen .trust-item { font-size: 13.5px; }
.startseite .section-sub { font-size: 1rem; }
/* Kopf und Liste untereinander: 32 px Abstand statt 48 */
.startseite .section .row.g-5 { --bs-gutter-y: 32px; }
/* Das Loch im Schlusskasten behebt seit 20.10.2026 die Regel unter „Mobile“ für alle Seiten. */
}