/* ============================================================
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.
============================================================ */
/* >>> Farben — erzeugt aus site_config.py, nicht von Hand aendern */
:root{
--navy:#0B1437;
--blue:#D81925;
--paper:#FFFFFF;
--paper-2:#F6F5F3;
--line:#E4E2DE;
--text:#1F2430;
--text-2:#5B6472;
--green:#2E9E5B;
}
/* <<< Farben */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
background:var(--paper); color:var(--navy);
font-family:'Inter', sans-serif; line-height:1.65;
-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:820px; margin:0 auto; padding:0 28px; }
section{ padding:100px 0; }
@media (max-width:720px){ section{ padding:60px 0; } }
.eyebrow{
font-size:13px; color:var(--blue); font-weight:700;
text-transform:uppercase; letter-spacing:0.06em;
margin-bottom:16px;
}
/* ---------- Header ---------- */
/* Der Kopf traegt die Markenfarbe, nicht Weiss. Damit steht die Bildmarke auf
demselben Dunkelblau, das sie selbst als Hintergrund hat — der Kasten um das
Logo verschwindet, und uebrig bleiben Rot und Weiss auf dem Balken. Ein
Freistellen der Rasterdatei waere die Alternative gewesen; die haette an den
feinen Schreibschrift-Kanten ausgefranst. */
header{
position:sticky; top:0; z-index:50;
background:var(--navy);
border-bottom:1px solid rgba(255,255,255,0.12);
}
.header-inner{
max-width:1120px; margin:0 auto; padding:10px 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 Bildmarke ist nahezu quadratisch (809 x 786). Bei den 32 px der
Vorlage waere sie 33 px breit und der Schriftzug unlesbar. Mit dem echten
Vektor darf sie deutlich groesser werden, ohne weich zu wirken — der
Kunde hat genau das verlangt. Die Zeile "EVENTCATERING / ZELTVERLEIH"
sitzt im unteren Drittel und braucht die Hoehe, um lesbar zu sein. */
.logo-img{ height:96px; width:auto; display:block; }
@media (max-width:900px){ .logo-img{ height:76px; } }
@media (max-width:600px){ .logo-img{ height:62px; } }
nav{ display:flex; align-items:center; gap:36px; }
.nav-links{ display:flex; gap:26px; list-style:none; margin:0; padding:0; align-items:center; }
.nav-links > li{ position:relative; }
/* 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.
Genau das ist passiert — mit dem groesseren Logo (74 statt 52 px) und den
Pfeilen der Untermenues brauchte der Kopf bei 1000 px rund 1170 px und
schob die Seite um 38 px hinaus. Gemessen, nicht geschaetzt.
Ohne den Punkt "Start" braucht der Kopf jetzt 1108 px (Logo 99, Menue 929,
Polster 56, Abstand 24). Die Grenze liegt deshalb bei 1140 px statt 1180 —
mit 32 px Luft gegen Schriftunterschiede zwischen Systemen. */
@media (max-width:1140px){ .nav-links{ display:none; } }
/* Auf schmalen Geraeten passen Logo, CTA-Button und Burger nicht nebeneinander
— der Header schob die Seite um rund 80 px nach rechts. Der CTA entfaellt
hier, im Burger-Menue steht derselbe Button weiterhin bereit. */
@media (max-width:600px){ header nav > .btn-primary{ display:none; } }
/* Weiss auf dem dunklen Balken. Fuer den aktiven Punkt und beim Ueberfahren
NICHT das Markenrot: auf Navy misst #C4081A nur 2.6:1 und ist damit weder
lesbar noch unterscheidbar. Stattdessen volles Weiss plus Unterstrich —
die Auszeichnung haengt so nicht allein an der Farbe. */
nav a{
text-decoration:none; font-size:15px; color:rgba(255,255,255,0.82);
font-weight:500; white-space:nowrap;
display:inline-flex; align-items:center; gap:5px;
}
nav a:hover, nav a:focus-visible{ color:#fff; }
nav a.active{ color:#fff; text-decoration:underline; text-underline-offset:6px;
text-decoration-thickness:2px; text-decoration-color:var(--blue); }
/* ---------- Aufklappmenue ---------- */
.hat-unter > a .pfeil{ transition:transform 0.2s ease; opacity:0.7; }
.hat-unter:hover > a .pfeil,
.hat-unter:focus-within > a .pfeil{ transform:rotate(180deg); }
.untermenue{
position:absolute; top:100%; left:-14px; z-index:60;
min-width:270px; margin:0; padding:8px; list-style:none;
background:#fff; border:1px solid var(--line); border-radius:10px;
box-shadow:0 14px 34px rgba(11,20,55,0.18);
opacity:0; visibility:hidden; transform:translateY(-6px);
transition:opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
/* :focus-within zusaetzlich zu :hover — sonst kaeme man mit der Tastatur nie
an die Unterpunkte. Der Elternlink bleibt dabei selbst anklickbar. */
.hat-unter:hover > .untermenue,
.hat-unter:focus-within > .untermenue{
opacity:1; visibility:visible; transform:translateY(0);
}
/* Der Balken hat unten eine Trennlinie; ohne diese Bruecke reisst die
Mausspur zwischen Punkt und Menue ab und das Menue klappt wieder zu. */
.hat-unter > .untermenue::before{
content:""; position:absolute; left:0; right:0; top:-10px; height:10px;
}
.untermenue a{
display:block; padding:9px 12px; border-radius:6px; white-space:normal;
font-size:14.5px; color:var(--navy); font-weight:500;
}
.untermenue a:hover, .untermenue a:focus-visible{
background:var(--paper-2); color:var(--blue); text-decoration:none;
}
/* 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:6px;
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;
}
.btn{
font-weight:600; font-size:15px; padding:13px 24px; border-radius:8px;
text-decoration:none; display:inline-flex; align-items:center; gap:8px;
border:1.5px solid transparent; cursor:pointer;
transition:background 0.15s ease, transform 0.15s ease;
}
.btn-primary{ background:var(--blue); color:#fff; }
.btn-primary:hover{ background:#1c6cab; transform:translateY(-1px); }
.btn-ghost{ border-color:var(--line); color:var(--navy); }
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue); }
.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:#fff; transition:transform 0.25s ease, opacity 0.25s ease; }
/* Dieselbe Grenze wie bei .nav-links, und das ist keine Kosmetik: als die
Grenze fuer .nav-links am 29.08.2026 von 1000 auf 1140 px wanderte, blieb
diese Zeile auf 1000 stehen. Zwischen 1001 und 1140 px war damit BEIDES
ausgeblendet — kein Menue und kein Burger, auf jeder Seite. Betroffen war
jedes Fenster, das nicht ganz aufgezogen ist, und Notebooks mit 1024 oder
1152 logischen Punkten. Gemessen am 04.09.2026 bei 1005, 1050, 1100 und
1135 px: navLinks "none", menu-btn "none". */
@media (max-width:1140px){ .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) ---------- */
/* Unten weniger Luft als oben: darunter folgen die Bildkacheln, und
90 px zwischen Aufmacher und Kachelraster reissen die Startseite in
zwei Teile, die nicht mehr zusammengehoeren. */
.hero{ padding:88px 0 44px; }
.hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; }
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; } }
/* 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; }
.hero-art{ display:flex; justify-content:center; animation:fadeUp 0.9s ease 0.3s both; }
.hero-photo-frame{ position:relative; width:100%; border-radius:20px; overflow:hidden; box-shadow:0 24px 60px rgba(0,28,69,0.18), 0 4px 14px rgba(0,28,69,0.10); }
.hero-photo-frame::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,28,69,0) 55%, rgba(0,28,69,0.26) 100%); pointer-events:none; }
.hero-photo-frame img{ width:100%; height:auto; display:block; }
.hero-badge{ position:absolute; left:20px; bottom:20px; z-index:2; background:rgba(255,255,255,0.94); backdrop-filter:blur(4px); border-radius:10px; padding:10px 16px; font-size:13px; font-weight:600; color:var(--navy); box-shadow:0 6px 18px rgba(0,28,69,0.16); }
/* ---------- Page header (inner pages) ---------- */
.page-hero{ padding:64px 0 48px; border-bottom:1px solid var(--line); }
/* Zentriert wie der Aufmacher mit Foto — der traegt seit jeher
text-align:center. Solange nur die Bildaufmacher zentriert waren, standen
auf den zwoelf Seiten mit Foto Titel und Einleitung mittig und auf den
uebrigen neunzehn links; mit den zentrierten Ueberschriften im Inhalt
(Kundenrunde 03.09.2026) waere daraus ein sichtbarer Bruch geworden. */
.page-hero > .wrap{ text-align:center; }
.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;
margin-left:auto; margin-right:auto;
}
.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:8px; }
@media (max-width:820px){ .service-row{ grid-template-columns:1fr; gap:10px; } }
.service-row .idx{ width:44px; height:44px; border-radius:50%; 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:12px; padding:28px 24px; transition:transform 0.25s ease, box-shadow 0.25s ease, 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:11px 11px 0 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{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,28,69,0.08); border-color:#C7D6EA; }
.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:50%; 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; } }
.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:8px;
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:8px; 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:16px; 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; }
/* prose() erzeugt fuer den Blocktyp "check" ein
,
die Vorlage hatte dafuer aber nie eine Regel — die Liste sah aus wie jede
andere. Der Haken kommt aus ::marker-freiem Pseudoelement, damit er die
Farbe der Marke traegt und nicht die des Textes. */
.check-list{ list-style:none; padding-left:0; }
.check-list li{ position:relative; padding-left:30px; margin-bottom:9px; }
.check-list li::before{
content:""; position:absolute; left:4px; top:0.55em;
width:13px; height:7px; border-left:2.5px solid var(--blue);
border-bottom:2.5px solid var(--blue); transform:rotate(-45deg) translateY(-2px);
}
/* Schmale Kopfleiste mit Telefonnummer, nach dem Vorbild von MS Verleih.
Sie steht ueber dem Kopf und bleibt NICHT kleben — der Kopf selbst ist
sticky, die Leiste scrollt weg. Sonst kostet sie auf dem Telefon dauerhaft
Hoehe fuer eine Angabe, die man einmal liest. */
/* Weiss, nicht in der Markenfarbe — so vom Kunden gewuenscht (Runde vom
03.09.2026). Der dunkle Kopf steht direkt darunter; die Leiste setzt sich
dadurch als eigenes Band ab, statt mit ihm zu verschmelzen.
Gerechnet nach WCAG auf Weiss: Text #1F2430 15.52:1, Nummer in Navy
17.96:1, Hoerersymbol im Markenrot 8.92:1. */
.kopfleiste{
background:var(--paper); color:var(--text); font-size:14px;
border-bottom:1px solid var(--line);
}
.kopfleiste-inner{
max-width:1180px; margin:0 auto; padding:7px 24px;
display:flex; gap:24px; justify-content:flex-end; align-items:center;
}
.kopfleiste a{ color:var(--text); text-decoration:none; }
.kopfleiste a:hover{ text-decoration:underline; }
.kopfleiste-tel{
display:inline-flex; align-items:center; gap:7px;
font-weight:700; color:var(--navy);
}
.kopfleiste-tel svg{ flex:none; color:var(--blue); }
@media (max-width:600px){
/* Auf dem Telefon zaehlt nur die Nummer; die E-Mail steht im Fuss und auf
der Kontaktseite. */
.kopfleiste-inner{ justify-content:center; padding:8px 16px; }
.kopfleiste-mail{ display:none; }
}
/* Aufmacher mit Foto. Der Text liegt auf dem Bild, deshalb braucht er eine
Abdunklung — ohne sie ist weisse Schrift auf einer hellen Zeltplane oder
auf Schnee nicht lesbar. Der Verlauf ist unten dichter, weil dort die
Beschreibung steht; oben bleibt mehr vom Foto sichtbar. */
.hero-bild{
position:relative; background-size:cover; background-position:center;
color:#fff;
}
.hero-bild::before{
content:""; position:absolute; inset:0;
background:linear-gradient(180deg,
rgba(11,20,55,0.62) 0%, rgba(11,20,55,0.72) 55%, rgba(11,20,55,0.82) 100%);
}
.hero-bild > .wrap{ position:relative; z-index:1; text-align:center; }
.hero-bild h1{ color:#fff; text-transform:uppercase; letter-spacing:0.01em; }
/* p.lede statt .lede: `.hero p.lede` weiter oben ist spezifischer und
gewinnt sonst mit --text-2. Das Ergebnis waere Grau auf dunklem Foto —
gemessen 3.0:1 und damit unter der Grenze von 4.5:1 fuer Fliesstext. */
.hero-bild p.lede, .hero-bild .lede{
color:rgba(255,255,255,0.94); margin-left:auto; margin-right:auto;
}
.hero-bild .eyebrow{ color:#fff; opacity:0.85; }
.hero-bild .breadcrumb, .hero-bild .breadcrumb a{ color:rgba(255,255,255,0.85); }
.hero-bild .hero-ctas{ justify-content:center; }
/* Der helle Rahmen des Ghost-Knopfes verschwindet auf dem Foto. */
.hero-bild .btn-ghost{
background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.55); color:#fff;
}
.hero-bild .btn-ghost:hover{ background:rgba(255,255,255,0.22); }
.hero.hero-bild{ padding:104px 0 96px; }
.page-hero.hero-bild{ padding:88px 0 80px; }
@media (max-width:600px){
.hero.hero-bild{ padding:64px 0 56px; }
.page-hero.hero-bild{ padding:56px 0 48px; }
}
/* Zentrierte Abschnittsueberschrift mit kurzer Linie — das zweite Merkmal,
das die Vorlage traegt. Nur fuer Abschnittstitel, nicht fuer Rechtstexte:
ueber einer linksbuendigen Preistabelle saehe eine zentrierte Zeile
verrutscht aus. */
.abschnitt-titel{ text-align:center; margin-bottom:34px; }
.abschnitt-titel::after{
content:""; display:block; width:64px; height:3px; border-radius:2px;
background:var(--blue); margin:14px auto 0;
}
/* Kontaktkarten. Ohne Formular ist die Telefonnummer das wichtigste Element
der Seite — sie ist deshalb gross, hat viel Klickflaeche und steht nicht
im Fliesstext. Auf dem Telefon ist der ganze Streifen antippbar. */
.kontakt-karten{
display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin:8px 0 40px;
}
@media (max-width:760px){ .kontakt-karten{ grid-template-columns:1fr; } }
.kontakt-karte{
border:1px solid var(--line); border-radius:12px; padding:24px 24px 20px;
background:var(--paper-2);
}
.kontakt-rolle{
display:block; font-size:12.5px; font-weight:700; letter-spacing:0.06em;
text-transform:uppercase; color:var(--blue); margin-bottom:8px;
}
.kontakt-name{
display:block; font-family:'Source Serif 4', serif; font-size:21px;
color:var(--navy); line-height:1.3;
}
.kontakt-gebiet{ font-size:14px; color:var(--text-2); margin:6px 0 16px; }
.kontakt-tel{
display:flex; align-items:baseline; gap:12px;
font-size:23px; font-weight:700; color:var(--navy); text-decoration:none;
padding:10px 0; border-top:1px solid var(--line);
}
.kontakt-tel:hover, .kontakt-tel:focus-visible{ color:var(--blue); }
.kontakt-tel-art{
font-size:12.5px; font-weight:600; color:var(--text-2);
text-transform:uppercase; letter-spacing:0.05em; min-width:52px;
}
.kontakt-mail{
display:block; padding:10px 0 0; border-top:1px solid var(--line);
font-size:16px; font-weight:600; color:var(--blue); text-decoration:none;
/* Lange Adressen brechen sonst aus der Karte heraus. */
overflow-wrap:anywhere;
}
.kontakt-mail:hover{ text-decoration:underline; }
/* Die Ansprechpartner stehen untereinander ueber die volle Breite: nebenein-
ander waere die zweite Karte halb so breit wie die erste und saehe aus wie
ein Rest. Die Adressen darunter vertragen zwei Spalten, sie sind kurz. */
.kontakt-karten-breit{ grid-template-columns:1fr; }
/* Bildkacheln: Foto mit Beschriftung darauf. Die Beschriftung liegt in
einem eigenen Kasten statt direkt auf dem Bild — auf hellen Stellen (Zelt
im Gegenlicht, Schnee) waere weisse Schrift ohne Flaeche unlesbar, und ein
Verlauf ueber das ganze Bild nimmt ihm die Wirkung. */
.kachel-grid{
display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:28px;
}
@media (max-width:900px){ .kachel-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .kachel-grid{ grid-template-columns:1fr; } }
.kachel{
position:relative; display:block; overflow:hidden; border-radius:10px;
text-decoration:none; background:var(--navy); aspect-ratio:4/3;
box-shadow:0 1px 2px rgba(11,20,55,0.08);
transition:box-shadow 0.25s ease, transform 0.25s ease;
}
.kachel:hover, .kachel:focus-visible{
box-shadow:0 10px 26px rgba(11,20,55,0.18); transform:translateY(-2px);
}
.kachel:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; }
/* object-fit fuellt die Kachel, ohne das Bild zu verzerren. Die Masse am
bleiben die echten — sie sind gegen CLS da, nicht fuer die Anzeige. */
.kachel img{
width:100%; height:100%; object-fit:cover; display:block;
transition:transform 0.4s ease;
}
.kachel:hover img{ transform:scale(1.04); }
.kachel-leer{
width:100%; height:100%;
background:linear-gradient(135deg, var(--navy) 0%, #1b2b5e 100%);
}
.kachel-label{
position:absolute; left:14px; bottom:14px; z-index:1;
background:rgba(11,20,55,0.88); color:#fff;
font-size:15px; font-weight:600; line-height:1.25;
padding:9px 14px; border-radius:6px; max-width:calc(100% - 28px);
}
/* Beschreibung unter einer Galerie-Ueberschrift. Sie stand im Bestand unter
jeder Gruppe und war beim ersten Uebertrag verlorengegangen. */
.galerie-text{
margin:-4px 0 14px; color:var(--text-2); font-size:15px; max-width:70ch;
}
/* Bildergalerie. Feste Spaltenzahl statt auto-fit: die Aufnahmen haben
unterschiedliche Seitenverhaeltnisse, und eine gleichmaessige Rasterbreite
beruhigt die Seite mehr als gleiche Hoehen. */
.galerie-grid{
display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:18px 0 34px;
}
@media (max-width:900px){ .galerie-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .galerie-grid{ grid-template-columns:1fr; } }
.galerie-grid figure{ margin:0; }
.galerie-grid img{
width:100%; height:auto; display:block;
border-radius:8px; border:1px solid var(--line);
}
/* Preistabellen im Seiteninhalt.
Fruehere Fassung liess die Tabelle in sich scrollen. Das war technisch
sauber, in der Benutzung aber laestig: man musste mit der Maus nach rechts
wischen, um den Preis zu sehen. Jetzt bricht der Text um, und unter 760 px
wird aus jeder Zeile ein Kaertchen — alle Angaben stehen untereinander,
nichts muss geschoben werden. */
.table-wrap{
margin:22px 0; border:1px solid var(--line); border-radius:8px;
/* KEIN overflow. Beide Varianten waren falsch: `hidden` schnitt
ueberstehenden Inhalt ersatzlos ab (man sah nur den halben Text),
`auto` brachte den seitlichen Rollbalken zurueck, den der Kunde nicht
will. Beides braucht es nicht mehr — die Zellen duerfen umbrechen, und
unter 900 px wird aus der Tabelle ohnehin eine Liste von Kaertchen.
Nachgemessen ueber 320 bis 1440 px, jede Tabellenseite: die Tabelle
bleibt an jeder Stelle innerhalb ihres Kastens.
Sollte eine kuenftige Tabelle doch breiter werden, schiebt sie sichtbar
die Seite — das faellt auf und laesst sich beheben. Still abschneiden
oder still scrollen wuerde es verstecken. */
}
/* Ohne overflow:hidden schneidet der Kasten die Ecken nicht mehr ab; die
Kopfzeile mit ihrer Hintergrundfarbe muss sie deshalb selbst runden. */
.table-wrap thead tr:first-child th:first-child{ border-top-left-radius:7px; }
.table-wrap thead tr:first-child th:last-child{ border-top-right-radius:7px; }
.table-wrap table{ width:100%; border-collapse:collapse; font-size:14.5px; }
.table-wrap th, .table-wrap td{
text-align:left; padding:10px 12px; border-bottom:1px solid var(--line);
vertical-align:top;
}
/* Kein nowrap mehr: genau das zwang die Tabelle ueber die Seitenbreite. */
.table-wrap thead th{
background:var(--paper-2); color:var(--navy); font-weight:600;
font-size:13.5px; line-height:1.35;
}
/* Nur kurze Angaben bleiben in einer Zeile — die Klasse setzt der Generator
fuer Zellen bis 14 Zeichen. Alles Laengere bricht um, sonst kann die
Tabelle nicht schrumpfen. */
.table-wrap td.zahl{ white-space:nowrap; }
.table-wrap tr.gruppe th{
background:var(--paper-2); color:var(--navy); font-weight:700;
font-size:14px; letter-spacing:0.02em;
}
.table-wrap tbody tr:last-child td{ border-bottom:0; }
.table-wrap tbody tr:nth-child(even):not(.gruppe){ background:rgba(0,0,0,0.015); }
/* Zusatzangabe in einer Zelle: im Bestand stand sie hinter einem und
gehoert nicht in denselben Atemzug wie der Artikelname. */
.td-zusatz{
display:block; margin-top:3px; font-size:13px; font-weight:400;
color:var(--text-2); line-height:1.4;
}
@media (max-width:900px){
/* Aus der Tabelle wird eine Liste von Kaertchen. display:block loest die
Tabellenstruktur auf; die Spaltenueberschrift kommt aus data-label. */
.table-wrap{ border:0; border-radius:0; }
.table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td{
display:block; width:100%;
}
.table-wrap thead{ display:none; }
.table-wrap tr{
border:1px solid var(--line); border-radius:8px;
margin-bottom:12px; padding:4px 0; background:var(--paper);
}
.table-wrap tr.gruppe{
border:0; background:none; margin:22px 0 8px; padding:0;
}
.table-wrap tr.gruppe th{
display:block; background:none; padding:0; font-size:16px;
border-bottom:2px solid var(--blue); padding-bottom:6px;
}
.table-wrap td{
border-bottom:1px solid var(--line); padding:8px 14px;
white-space:normal;
display:flex; gap:14px; justify-content:space-between; align-items:baseline;
/* Deutsche Komposita ohne Leerzeichen — "Seitenverbandsschere/
Wanddiagonalen" ist ein Wort von 301 px in einem 264 px breiten
Kaertchen. Ohne Trennung scrollt die Tabelle wieder, genau das, was
weg sollte. */
overflow-wrap:anywhere; hyphens:auto;
}
.table-wrap td:last-child{ border-bottom:0; }
.table-wrap td::before{
content:attr(data-label);
/* 0 1 statt 0 0: die Beschriftung MUSS schrumpfen duerfen. Und
hyphens/overflow-wrap, weil deutsche Komposita wie
"Verlaengerungstag" laenger sind als die halbe Spalte — ohne
Trennung sprengten sie das Kaertchen, und die Tabelle scrollte auf
320 px wieder (gemessen: 307 px Inhalt in 264 px Kasten). */
flex:0 1 45%; min-width:0;
overflow-wrap:anywhere; hyphens:auto;
font-size:12.5px; font-weight:600; color:var(--text-2);
line-height:1.35;
}
/* Auch der Wert selbst darf im Kaertchen nicht auf nowrap bestehen. */
.table-wrap td.zahl{ white-space:normal; }
/* Die erste Zelle ist die Bezeichnung — sie traegt das Kaertchen und
braucht keine Beschriftung davor. */
.table-wrap td:first-child{
display:block; font-weight:700; color:var(--navy); font-size:15px;
background:var(--paper-2);
}
.table-wrap td:first-child::before{ content:none; }
/* Leere Zellen wuerden als Zeile mit Beschriftung und Nichts erscheinen. */
.table-wrap td.leer{ display:none; }
}
/* 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