/* =========================================================================
MALER FIRMA – Design-System der Musterseite 2
Rein statische Seite, kein Framework, keine fremden Hosts.
CORPORATE DESIGN WECHSELN: nur den :root-Block anfassen.
Alles Weitere leitet sich daraus ab.
Farbregel: EIN Akzent (Petrol) auf der ganzen Seite, warme Neutraltoene
dazu. Genau eine Ausnahme, siehe --mf-kupfer.
Formregel: Schaltflaechen und Labels sind Pillen, Karten 14 px,
Bilder und Eingabefelder 10 px. Keine Ausnahmen.
========================================================================= */
:root{
/* --- Marke ---------------------------------------------------------- */
--mf-marke:#0E4F5C; /* Signalfarbe: Buttons, Labels, Icons */
--mf-marke-hover:#0A3D47; /* Signalfarbe im Hover */
--mf-marke-tief:#08313A; /* dunkle Baender */
--mf-marke-weich:#EAF1F2; /* heller Ton der Marke, Flaechen */
--mf-auf-marke:#FFFFFF; /* Text auf der Marke */
/* --- Zweiter Signalton, bewusst und nur an einer Stelle -------------- */
/* Kupfer steht ausschliesslich im Kennzahlenband: die vier Ziffern und
ihre Linien links. Sonst nirgends. Es ist der Gegenton zu Petrol und
holt die Zahlen aus der Flaeche heraus, ohne dass ein zweiter Ton
ueber die ganze Seite wandert. Der Wert ist nicht frei gewaehlt: auf
Weiss kommt er auf 4,57:1, damit reicht er auch fuer Fliesstext und
nicht nur fuer grosse Schrift. Wer ihn aufhellt, muss nachrechnen. */
--mf-kupfer:#B85C28;
/* --- Neutrale Toene, durchgehend warm ------------------------------- */
--mf-tinte:#171A19; /* Ueberschriften */
--mf-text:#5F6260; /* Fliesstext */
--mf-text-hell:#D9E3E4; /* Fliesstext auf dunklem Grund */
--mf-linie:#E3DFD7; /* Rahmen und Trennlinien */
--mf-linie-stark:#CFC9BE; /* betonte Rahmen */
--mf-flaeche:#F6F4F0; /* Kreideweiss, abgesetzte Sektionen */
--mf-karte:#FFFFFF; /* Karten */
/* --- Ueberlagerung ueber Fotos -------------------------------------- */
--mf-schleier:rgba(8,49,58,.62);
--mf-schleier-stark:rgba(8,49,58,.80);
/* --- Schrift -------------------------------------------------------- */
--mf-schrift:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
--mf-fs-hero:clamp(33px,4.6vw,56px);
--mf-fs-h1:clamp(30px,4vw,46px);
--mf-fs-h2:clamp(26px,3.2vw,38px);
--mf-fs-h3:20px;
--mf-fs-h4:17px;
--mf-fs-zahl:clamp(34px,4vw,46px);
/* Der eine typografische Moment der Seite, das Karriereband. Gerechnet:
Archivo 900 laeuft rund 0,55 em je Zeichen, "Feierabend um 16:30." hat
20 Zeichen und braeuchte bei 110 px rund 1.210 px. Die Inhaltsbahn ist
1.120 px breit, die Zeile bricht also mit Absicht in zwei. */
--mf-fs-riesig:clamp(48px,7.6vw,110px);
--mf-fs-lead:17.5px;
--mf-fs-body:16.5px;
--mf-fs-karte:15.5px;
--mf-fs-klein:13px;
--mf-tracking:-.025em;
--mf-zh-kopf:1.12;
--mf-zh-text:1.68;
/* --- Form ----------------------------------------------------------- */
--mf-r-karte:14px;
--mf-r-bild:10px;
--mf-r-feld:10px;
--mf-r-pille:999px;
/* --- Raster und Abstaende ------------------------------------------- */
--mf-max:1200px;
--mf-max-eng:820px;
--mf-rand:clamp(18px,4vw,40px);
--mf-sek-y:clamp(60px,7.5vw,104px);
--mf-luecke:clamp(18px,2.2vw,28px);
--mf-nav-h:72px;
/* --- Schatten, immer im Markenton getoent, nie reines Schwarz -------- */
--mf-schatten-s:0 1px 2px rgba(23,26,25,.05), 0 2px 8px rgba(14,79,92,.05);
--mf-schatten-m:0 2px 4px rgba(23,26,25,.04), 0 12px 28px rgba(14,79,92,.09);
--mf-schatten-l:0 4px 8px rgba(23,26,25,.05), 0 24px 56px rgba(14,79,92,.14);
--mf-uebergang:.28s cubic-bezier(.16,1,.3,1);
}
/* --- Schrift, selbst gehostet. Archivo ist eine Variable Font, deshalb
eine Datei je Zeichenbereich und die Achse 100 bis 900. ------------ */
@font-face{
font-family:"Archivo";
font-style:normal;
font-weight:100 900;
font-display:swap;
src:url("/assets/schriften/archivo-latin.woff2") format("woff2");
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
U+FEFF,U+FFFD;
}
@font-face{
font-family:"Archivo";
font-style:normal;
font-weight:100 900;
font-display:swap;
src:url("/assets/schriften/archivo-latin-ext.woff2") format("woff2");
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* =========================================================================
Grundlagen
========================================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
margin:0;
font-family:var(--mf-schrift);
font-size:var(--mf-fs-body);
line-height:var(--mf-zh-text);
color:var(--mf-text);
background:var(--mf-karte);
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
h1,h2,h3,h4{
margin:0;
color:var(--mf-tinte);
font-weight:800;
line-height:var(--mf-zh-kopf);
letter-spacing:var(--mf-tracking);
text-wrap:balance;
}
h1{font-size:var(--mf-fs-h1)}
h2{font-size:var(--mf-fs-h2)}
h3{font-size:var(--mf-fs-h3);font-weight:700}
h4{font-size:var(--mf-fs-h4);font-weight:700}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
a{color:var(--mf-marke);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--mf-marke-hover)}
img{max-width:100%;height:auto;display:block}
ul,ol{margin:0 0 1em;padding-left:1.15em}
li{margin-bottom:.4em}
strong{color:var(--mf-tinte);font-weight:700}
hr{border:0;border-top:1px solid var(--mf-linie);margin:0}
:focus-visible{
outline:3px solid var(--mf-marke);
outline-offset:3px;
border-radius:4px;
}
.mf-nur-vorleser{
position:absolute;width:1px;height:1px;overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
/* Sprungmarke fuer die Tastatur */
.mf-sprung{
position:absolute;left:12px;top:-70px;z-index:1200;
background:var(--mf-marke);color:#fff;padding:12px 20px;
border-radius:var(--mf-r-pille);font-weight:700;text-decoration:none;
transition:top var(--mf-uebergang);
}
.mf-sprung:focus{top:12px;color:#fff}
/* =========================================================================
Raster
========================================================================= */
.mf-bahn{width:100%;max-width:var(--mf-max);margin:0 auto;padding:0 var(--mf-rand)}
.mf-bahn-eng{width:100%;max-width:var(--mf-max-eng);margin:0 auto;padding:0 var(--mf-rand)}
.mf-sek{padding:var(--mf-sek-y) 0}
.mf-sek-hell{background:var(--mf-flaeche)}
.mf-sek-weich{background:var(--mf-marke-weich)}
.mf-sek-dunkel{background:var(--mf-marke-tief);color:var(--mf-text-hell)}
.mf-sek-dunkel h2,.mf-sek-dunkel h3,.mf-sek-dunkel h4{color:#fff}
.mf-sek-eng{padding:clamp(44px,5vw,68px) 0}
/* =========================================================================
Sektionskopf
========================================================================= */
.mf-kopf{max-width:660px;margin-bottom:clamp(30px,4vw,48px)}
.mf-kopf-mitte{margin-left:auto;margin-right:auto;text-align:center}
.mf-marke-label{
display:inline-block;margin-bottom:14px;padding:5px 14px;
border-radius:var(--mf-r-pille);
background:var(--mf-marke-weich);color:var(--mf-marke-hover);
font-size:var(--mf-fs-klein);font-weight:700;
letter-spacing:.09em;text-transform:uppercase;
}
.mf-sek-dunkel .mf-marke-label{background:rgba(255,255,255,.12);color:#fff}
.mf-lead{margin-top:16px;font-size:var(--mf-fs-lead);max-width:62ch}
.mf-sek-dunkel .mf-lead{color:var(--mf-text-hell)}
/* =========================================================================
Schaltflaechen
========================================================================= */
.mf-btn{
display:inline-flex;align-items:center;gap:9px;
padding:14px 26px;border-radius:var(--mf-r-pille);border:1.5px solid transparent;
font-family:inherit;font-size:16px;font-weight:700;line-height:1.15;
text-decoration:none;white-space:nowrap;cursor:pointer;
transition:background var(--mf-uebergang),color var(--mf-uebergang),
border-color var(--mf-uebergang),transform .1s ease,
box-shadow var(--mf-uebergang);
}
.mf-btn svg{width:19px;height:19px;flex:none}
.mf-btn:active{transform:translateY(1px)}
.mf-btn-primaer{background:var(--mf-marke);color:#fff;box-shadow:var(--mf-schatten-s)}
.mf-btn-primaer:hover{background:var(--mf-marke-hover);color:#fff;box-shadow:var(--mf-schatten-m)}
.mf-btn-rand{background:transparent;color:var(--mf-marke-hover);border-color:var(--mf-linie-stark)}
.mf-btn-rand:hover{background:var(--mf-marke-weich);color:var(--mf-marke-hover);border-color:var(--mf-marke)}
.mf-btn-hell{background:#fff;color:var(--mf-marke-hover);box-shadow:var(--mf-schatten-s)}
.mf-btn-hell:hover{background:var(--mf-marke-weich);color:var(--mf-marke-hover)}
.mf-btn-glas{
background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.55);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.mf-btn-glas:hover{background:rgba(255,255,255,.20);color:#fff;border-color:#fff}
@media (prefers-reduced-transparency:reduce){
.mf-btn-glas{background:rgba(8,49,58,.86);backdrop-filter:none;-webkit-backdrop-filter:none}
}
.mf-btn-klein{padding:10px 18px;font-size:14.5px}
.mf-btn-reihe{display:flex;flex-wrap:wrap;gap:12px}
/* Textlink mit Pfeil */
.mf-mehr{
display:inline-flex;align-items:center;gap:7px;
font-weight:700;text-decoration:none;color:var(--mf-marke);
}
.mf-mehr svg{width:17px;height:17px;transition:transform var(--mf-uebergang)}
.mf-mehr:hover svg{transform:translateX(4px)}
/* =========================================================================
Navigation
========================================================================= */
.mf-nav{
position:fixed;top:0;left:0;right:0;z-index:900;
background:transparent;
border-bottom:1px solid transparent;
transition:background var(--mf-uebergang),border-color var(--mf-uebergang),
box-shadow var(--mf-uebergang);
}
.mf-nav.ist-fest,
.mf-nav.ist-hell{
background:rgba(255,255,255,.96);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
border-bottom-color:var(--mf-linie);
box-shadow:0 1px 20px rgba(14,79,92,.06);
}
.mf-nav-innen{
max-width:var(--mf-max);margin:0 auto;padding:0 var(--mf-rand);
height:var(--mf-nav-h);
display:flex;align-items:center;gap:22px;
}
.mf-logo{
display:flex;align-items:center;gap:10px;
text-decoration:none;color:#fff;flex:none;
font-weight:800;font-size:19px;letter-spacing:-.02em;line-height:1.05;
}
.mf-nav.ist-fest .mf-logo,.mf-nav.ist-hell .mf-logo{color:var(--mf-tinte)}
.mf-logo-mark{
width:34px;height:34px;flex:none;border-radius:9px;
background:var(--mf-marke);color:#fff;
display:grid;place-items:center;font-size:15px;font-weight:800;letter-spacing:0;
}
.mf-logo-text{display:flex;flex-direction:column}
.mf-logo-text span{font-size:10.5px;font-weight:600;letter-spacing:.14em;
text-transform:uppercase;opacity:.72}
.mf-menue{display:flex;align-items:center;gap:2px;margin-left:auto}
.mf-menue > li{list-style:none;position:relative}
.mf-menue{padding:0;margin-block:0;margin-left:auto}
.mf-menue a{
display:inline-flex;align-items:center;gap:5px;
padding:9px 12px;border-radius:var(--mf-r-pille);
color:rgba(255,255,255,.92);text-decoration:none;
font-size:15px;font-weight:600;white-space:nowrap;
transition:background var(--mf-uebergang),color var(--mf-uebergang);
}
.mf-nav.ist-fest .mf-menue a,.mf-nav.ist-hell .mf-menue a{color:var(--mf-tinte)}
.mf-menue a:hover{background:rgba(255,255,255,.16);color:#fff}
.mf-nav.ist-fest .mf-menue a:hover,.mf-nav.ist-hell .mf-menue a:hover{
background:var(--mf-marke-weich);color:var(--mf-marke-hover)}
.mf-menue a[aria-current="page"]{color:#fff}
.mf-nav.ist-fest .mf-menue a[aria-current="page"],
.mf-nav.ist-hell .mf-menue a[aria-current="page"]{color:var(--mf-marke)}
/* Marker an Karriere: echter Zustand, keine Dekoration */
.mf-stellen-marker{
margin-left:6px;padding:2px 8px;border-radius:var(--mf-r-pille);
background:var(--mf-marke);color:#fff;
font-size:11px;font-weight:700;letter-spacing:.02em;
}
.mf-nav.ist-fest .mf-stellen-marker,.mf-nav.ist-hell .mf-stellen-marker{
background:var(--mf-marke);color:#fff}
/* Klappmenue Leistungen */
.mf-klapp > a svg{width:15px;height:15px;transition:transform var(--mf-uebergang)}
.mf-klapp:hover > a svg,.mf-klapp:focus-within > a svg{transform:rotate(180deg)}
.mf-klapp-inhalt{
position:absolute;top:calc(100% + 8px);left:0;
min-width:290px;padding:10px;margin:0;
background:#fff;border:1px solid var(--mf-linie);border-radius:var(--mf-r-karte);
box-shadow:var(--mf-schatten-l);
list-style:none;
opacity:0;visibility:hidden;transform:translateY(-6px);
transition:opacity var(--mf-uebergang),transform var(--mf-uebergang),visibility var(--mf-uebergang);
}
.mf-klapp:hover .mf-klapp-inhalt,.mf-klapp:focus-within .mf-klapp-inhalt{
opacity:1;visibility:visible;transform:translateY(0)}
.mf-klapp-inhalt li{margin:0}
.mf-klapp-inhalt a{
display:flex;align-items:center;gap:11px;width:100%;
padding:10px 12px;border-radius:9px;color:var(--mf-tinte) !important;
font-size:15px;font-weight:600;
}
.mf-klapp-inhalt a:hover{background:var(--mf-marke-weich);color:var(--mf-marke-hover) !important}
.mf-klapp-inhalt svg{width:19px;height:19px;color:var(--mf-marke);flex:none}
.mf-nav-rechts{display:flex;align-items:center;gap:10px;flex:none}
.mf-nav-tel{
display:inline-flex;align-items:center;gap:7px;
color:#fff;text-decoration:none;font-weight:700;font-size:15px;white-space:nowrap;
}
.mf-nav.ist-fest .mf-nav-tel,.mf-nav.ist-hell .mf-nav-tel{color:var(--mf-tinte)}
.mf-nav-tel svg{width:18px;height:18px}
.mf-nav-tel-text{display:inline}
.mf-nav-cta .mf-cta-kurz{display:none}
.mf-brenner{display:none}
/* Schublade am Handy */
.mf-schub-schalter{position:absolute;opacity:0;pointer-events:none}
.mf-schub{
position:fixed;inset:var(--mf-nav-h) 0 0;z-index:890;
background:#fff;padding:22px var(--mf-rand) 40px;
overflow-y:auto;
transform:translateX(100%);visibility:hidden;
transition:transform var(--mf-uebergang),visibility var(--mf-uebergang);
}
.mf-schub-schalter:checked ~ .mf-schub{transform:translateX(0);visibility:visible}
.mf-schub ul{list-style:none;padding:0;margin:0}
.mf-schub li{margin:0;border-bottom:1px solid var(--mf-linie)}
.mf-schub a{
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:15px 2px;color:var(--mf-tinte);text-decoration:none;
font-size:17px;font-weight:700;
}
.mf-schub .mf-schub-unter a{padding-left:20px;font-size:15.5px;font-weight:600;color:var(--mf-text)}
.mf-schub-fuss{margin-top:26px;display:grid;gap:11px}
/* =========================================================================
Hero, geteilt
========================================================================= */
.mf-hero{
position:relative;
padding:calc(var(--mf-nav-h) + clamp(28px,4vw,54px)) 0 clamp(44px,5vw,72px);
background:var(--mf-marke-tief);
overflow:hidden;
}
.mf-hero::before{
content:"";position:absolute;inset:0;
background:
radial-gradient(120% 90% at 12% 0%, rgba(14,79,92,.85) 0%, rgba(8,49,58,0) 62%),
linear-gradient(180deg, rgba(8,49,58,.5) 0%, rgba(8,49,58,0) 40%);
pointer-events:none;
}
.mf-hero-innen{
position:relative;z-index:1;
max-width:var(--mf-max);margin:0 auto;padding:0 var(--mf-rand);
display:grid;grid-template-columns:1.08fr .92fr;
gap:clamp(26px,4vw,56px);align-items:center;
}
.mf-hero-text{max-width:600px}
.mf-hero-label{
display:inline-flex;align-items:center;gap:8px;
margin-bottom:18px;padding:6px 15px;
border:1px solid rgba(255,255,255,.42);border-radius:var(--mf-r-pille);
background:rgba(255,255,255,.10);color:#fff;
font-size:var(--mf-fs-klein);font-weight:600;letter-spacing:.05em;
}
.mf-hero-label svg{width:15px;height:15px}
.mf-hero h1{
color:#fff;font-size:var(--mf-fs-hero);
margin-bottom:18px;text-wrap:balance;
}
.mf-hero-text p{color:var(--mf-text-hell);font-size:var(--mf-fs-lead);max-width:48ch}
.mf-hero .mf-btn-reihe{margin-top:26px}
.mf-hero-bild{position:relative}
/* Feste Bildhoehe statt height:auto. Sonst waechst der Hero mit der
Spaltenbreite, und auf flachen Notebooks reicht er unter die Bildkante. */
/* object-position senkrecht auf 100 %, also am Boden ausgerichtet. Das Hero
zeigt seit dem 9. August eine stehende Mannschaft, deren Schuhe 8 px vor
der Unterkante der Datei enden. Wo der Kasten senkrecht beschneidet, muss
deshalb oben die leere Wand fallen und nie unten der Boden. Waagerecht
bleibt es bei 50 %, die Datei ist eigens auf die Mitte der Gruppe
zugeschnitten (siehe hero_zuschnitt.py). */
.mf-hero-bild img{
width:100%;height:clamp(340px,56vh,520px);
object-fit:cover;object-position:50% 100%;
border-radius:var(--mf-r-karte);box-shadow:var(--mf-schatten-l);
}
/* Flache Fenster: Polsterung und Schriftgrad zusammenziehen, damit der ganze
Hero samt Schaltflaechen ohne Scrollen zu sehen ist. */
@media (min-width:901px) and (max-height:820px){
.mf-hero{padding-top:calc(var(--mf-nav-h) + 22px);padding-bottom:34px}
.mf-hero h1{font-size:clamp(30px,3.6vw,44px);margin-bottom:14px}
.mf-hero-label{margin-bottom:14px}
.mf-hero .mf-btn-reihe{margin-top:20px}
.mf-hero-bild img{height:min(52vh,440px)}
}
/* Kopfbereich der Unterseiten */
.mf-kopfband{
position:relative;
padding:calc(var(--mf-nav-h) + clamp(34px,4.5vw,62px)) 0 clamp(34px,4.5vw,58px);
background:var(--mf-marke-tief);color:var(--mf-text-hell);
overflow:hidden;
}
.mf-kopfband-bild{position:absolute;inset:0}
.mf-kopfband-bild img{width:100%;height:100%;object-fit:cover}
.mf-kopfband-bild::after{
content:"";position:absolute;inset:0;
background:linear-gradient(100deg, rgba(8,49,58,.94) 0%, rgba(8,49,58,.80) 52%, rgba(8,49,58,.58) 100%);
}
.mf-kopfband-innen{position:relative;z-index:1;max-width:var(--mf-max);
margin:0 auto;padding:0 var(--mf-rand)}
.mf-kopfband h1{color:#fff;max-width:19ch;margin-bottom:14px}
.mf-kopfband p{color:var(--mf-text-hell);font-size:var(--mf-fs-lead);max-width:56ch}
.mf-kopfband .mf-btn-reihe{margin-top:24px}
/* Brotkrumen */
.mf-krumen{margin-bottom:16px;font-size:14px;color:rgba(255,255,255,.72)}
.mf-krumen ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0}
.mf-krumen li{margin:0;display:flex;align-items:center;gap:6px}
.mf-krumen li+li::before{content:"›";opacity:.6}
.mf-krumen a{color:rgba(255,255,255,.88);text-decoration:none}
.mf-krumen a:hover{color:#fff;text-decoration:underline}
.mf-krumen [aria-current]{color:#fff}
/* =========================================================================
Kennzahlenband
========================================================================= */
.mf-zahlen{
display:grid;grid-template-columns:repeat(4,1fr);
gap:clamp(16px,2.4vw,30px);
}
.mf-zahl{padding-left:20px;border-left:3px solid var(--mf-kupfer)}
/* tabular-nums ist hier keine Feinheit, sondern Voraussetzung: die Ziffern
zaehlen hoch, und mit proportionalen Ziffern wackelt dabei die ganze
Zeile. Die enge Laufweite gehoert zum selben Bild. */
.mf-zahl-wert{
display:block;font-size:var(--mf-fs-zahl);font-weight:800;
color:var(--mf-kupfer);letter-spacing:-.045em;line-height:1.05;
font-variant-numeric:tabular-nums;
}
.mf-zahl-text{display:block;margin-top:6px;font-size:14.5px;line-height:1.45}
.mf-sek-dunkel .mf-zahl{border-left-color:rgba(255,255,255,.5)}
.mf-sek-dunkel .mf-zahl-wert{color:#fff}
/* Bewertungszeile, ohne Quellenbehauptung */
.mf-bewertung{
display:flex;align-items:center;gap:12px;flex-wrap:wrap;
padding-top:26px;margin-top:30px;border-top:1px solid var(--mf-linie);
font-size:15px;
}
.mf-sterne{display:inline-flex;gap:2px;color:var(--mf-marke)}
.mf-sterne svg{width:17px;height:17px}
/* =========================================================================
Leistungsraster (Bento, genau sechs Zellen)
========================================================================= */
/* Sechs Kacheln auf drei Spalten. Damit keine Zelle leer bleibt, belegen
drei davon zwei Spalten: 3 x 2 + 3 x 1 sind genau neun Plaetze, also drei
volle Reihen. Nebenbei wechselt die breite Kachel die Seite und das Raster
bekommt einen Rhythmus. */
.mf-bento{
display:grid;grid-template-columns:repeat(3,1fr);
gap:var(--mf-luecke);
}
.mf-bento > :nth-child(1),
.mf-bento > :nth-child(4),
.mf-bento > :nth-child(6){grid-column:span 2}
.mf-kachel{
position:relative;display:flex;flex-direction:column;
background:var(--mf-karte);border:1px solid var(--mf-linie);
border-radius:var(--mf-r-karte);overflow:hidden;
text-decoration:none;color:inherit;
transition:transform var(--mf-uebergang),box-shadow var(--mf-uebergang),
border-color var(--mf-uebergang);
}
.mf-kachel:hover{
transform:translateY(-4px);box-shadow:var(--mf-schatten-m);
border-color:var(--mf-marke);color:inherit;
}
.mf-kachel-bild{position:relative;overflow:hidden;background:var(--mf-marke-weich)}
.mf-kachel-bild img{
width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.mf-bento > :nth-child(1) .mf-kachel-bild img,
.mf-bento > :nth-child(4) .mf-kachel-bild img,
.mf-bento > :nth-child(6) .mf-kachel-bild img{aspect-ratio:2.6/1}
.mf-kachel:hover .mf-kachel-bild img{transform:scale(1.05)}
.mf-kachel-ico{
position:absolute;left:14px;bottom:14px;
width:42px;height:42px;border-radius:11px;
background:var(--mf-marke);color:#fff;
display:grid;place-items:center;box-shadow:var(--mf-schatten-m);
}
.mf-kachel-ico svg{width:22px;height:22px}
.mf-kachel-text{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.mf-kachel-text h3{margin-bottom:8px}
.mf-kachel-text p{font-size:var(--mf-fs-karte);margin-bottom:16px}
.mf-kachel-text .mf-mehr{margin-top:auto}
/* Zusatzleistungen ohne eigene Seite */
.mf-pillen{display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0;list-style:none}
.mf-pillen li{
margin:0;padding:9px 17px;border-radius:var(--mf-r-pille);
background:var(--mf-karte);border:1px solid var(--mf-linie);
font-size:15px;font-weight:600;color:var(--mf-tinte);
}
.mf-sek-hell .mf-pillen li{background:#fff}
/* =========================================================================
Ablauf als Zeitleiste
========================================================================= */
.mf-ablauf{
display:grid;grid-template-columns:1fr .78fr;
gap:clamp(28px,4vw,64px);align-items:start;
}
.mf-schritte{list-style:none;padding:0;margin:0;position:relative}
.mf-schritte::before{
content:"";position:absolute;left:23px;top:14px;bottom:22px;
width:2px;background:var(--mf-linie);
}
.mf-schritt{position:relative;padding:0 0 30px 66px;margin:0}
.mf-schritt:last-child{padding-bottom:0}
.mf-schritt-nr{
position:absolute;left:0;top:0;
width:48px;height:48px;border-radius:50%;
background:var(--mf-marke);color:#fff;
display:grid;place-items:center;
font-size:17px;font-weight:800;
box-shadow:0 0 0 6px var(--mf-flaeche);
}
.mf-sek-hell .mf-schritt-nr{box-shadow:0 0 0 6px var(--mf-flaeche)}
.mf-schritt h3{margin-bottom:6px}
.mf-schritt p{font-size:var(--mf-fs-karte);margin:0}
.mf-ablauf-bild{position:sticky;top:calc(var(--mf-nav-h) + 22px)}
.mf-ablauf-bild img{border-radius:var(--mf-r-karte);box-shadow:var(--mf-schatten-m);width:100%}
.mf-ablauf-notiz{
margin-top:18px;padding:16px 18px;border-radius:var(--mf-r-karte);
background:var(--mf-marke-weich);font-size:var(--mf-fs-karte);
}
.mf-ablauf-notiz strong{display:block;margin-bottom:3px}
/* =========================================================================
Projektgalerie mit Filter
========================================================================= */
.mf-filter{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:26px;padding:0;list-style:none}
.mf-filter li{margin:0}
.mf-filter button{
padding:9px 18px;border-radius:var(--mf-r-pille);
border:1.5px solid var(--mf-linie-stark);background:transparent;
font-family:inherit;font-size:14.5px;font-weight:700;color:var(--mf-tinte);
cursor:pointer;transition:all var(--mf-uebergang);
}
.mf-filter button:hover{border-color:var(--mf-marke);color:var(--mf-marke-hover)}
.mf-filter button[aria-pressed="true"]{
background:var(--mf-marke);border-color:var(--mf-marke);color:#fff}
.mf-galerie{
display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}
.mf-galerie figure{margin:0;position:relative;border-radius:var(--mf-r-bild);overflow:hidden}
.mf-galerie img{
width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.mf-galerie figure:hover img{transform:scale(1.04)}
.mf-galerie figcaption{
position:absolute;left:0;right:0;bottom:0;
padding:26px 16px 13px;
background:linear-gradient(180deg,rgba(8,49,58,0),rgba(8,49,58,.88));
color:#fff;font-size:14px;font-weight:600;
}
.mf-galerie figure[hidden]{display:none}
/* =========================================================================
Karriereband, der Schwerpunkt
========================================================================= */
.mf-karriere-band{
position:relative;background:var(--mf-marke-tief);color:var(--mf-text-hell);
padding:var(--mf-sek-y) 0;overflow:hidden;
}
.mf-karriere-band::before{
content:"";position:absolute;inset:0;
background:radial-gradient(90% 120% at 88% 20%, rgba(14,79,92,.9) 0%, rgba(8,49,58,0) 70%);
}
.mf-karriere-innen{
position:relative;z-index:1;
display:grid;grid-template-columns:1fr .82fr;
gap:clamp(30px,4.5vw,64px);align-items:center;
}
.mf-karriere-band h2{color:#fff}
.mf-karriere-gruende{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:14px}
.mf-karriere-gruende li{
display:flex;gap:13px;align-items:flex-start;margin:0;
font-size:var(--mf-fs-karte);
}
/* Die Liste steht sowohl im dunklen Band als auch auf hellem Grund. Der
Grundzustand ist deshalb der helle, das dunkle Band ueberschreibt ihn.
Andersherum waeren die Symbole auf der Karriereseite weiss auf weiss. */
.mf-karriere-gruende svg{
width:28px;height:28px;flex:none;margin-top:0;
color:var(--mf-marke);background:var(--mf-marke-weich);
border-radius:8px;padding:4px;
}
.mf-karriere-band .mf-karriere-gruende svg{
color:#fff;background:rgba(255,255,255,.16);
}
.mf-karriere-bild img{border-radius:var(--mf-r-karte);width:100%;
box-shadow:0 24px 60px rgba(0,0,0,.3)}
/* Stellenkarten */
.mf-stellen{display:grid;grid-template-columns:1fr 1fr;gap:var(--mf-luecke);margin-top:34px}
.mf-stelle{
display:flex;flex-direction:column;gap:12px;
padding:22px 24px;border-radius:var(--mf-r-karte);
background:var(--mf-karte);border:1px solid var(--mf-linie);
text-decoration:none;color:inherit;
transition:transform var(--mf-uebergang),box-shadow var(--mf-uebergang),border-color var(--mf-uebergang);
}
.mf-stelle:hover{transform:translateY(-3px);box-shadow:var(--mf-schatten-m);
border-color:var(--mf-marke);color:inherit}
.mf-karriere-band .mf-stelle{
background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.20);color:var(--mf-text-hell)}
.mf-karriere-band .mf-stelle:hover{background:rgba(255,255,255,.12);border-color:#fff}
.mf-karriere-band .mf-stelle h3{color:#fff}
.mf-stelle-meta{display:flex;flex-wrap:wrap;gap:8px}
.mf-marke-mini{
padding:4px 11px;border-radius:var(--mf-r-pille);
background:var(--mf-marke-weich);color:var(--mf-marke-hover);
font-size:12.5px;font-weight:700;
}
.mf-karriere-band .mf-marke-mini{background:rgba(255,255,255,.16);color:#fff}
.mf-stelle p{font-size:var(--mf-fs-karte);margin:0}
.mf-stelle .mf-mehr{margin-top:4px}
.mf-karriere-band .mf-mehr{color:#fff}
/* =========================================================================
Vorteile als Bento (Karriereseite)
========================================================================= */
.mf-vorteile{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--mf-luecke)}
.mf-vorteil{
padding:24px;border-radius:var(--mf-r-karte);
background:var(--mf-karte);border:1px solid var(--mf-linie);
}
.mf-vorteil-ico{
width:44px;height:44px;border-radius:11px;margin-bottom:15px;
background:var(--mf-marke-weich);color:var(--mf-marke);
display:grid;place-items:center;
}
.mf-vorteil-ico svg{width:23px;height:23px}
.mf-vorteil h3{font-size:17px;margin-bottom:7px}
.mf-vorteil p{font-size:var(--mf-fs-karte);margin:0}
/* Zwei der Zellen tragen ein Bild statt Text, damit das Raster nicht
sechsmal dieselbe weisse Karte ist. */
.mf-vorteil-bild{padding:0;overflow:hidden;position:relative;min-height:190px}
.mf-vorteil-bild img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.mf-vorteil-marke{
padding:0;background:var(--mf-marke);color:#fff;border-color:var(--mf-marke);
display:flex;flex-direction:column;justify-content:center;padding:24px;
}
.mf-vorteil-marke h3{color:#fff}
.mf-vorteil-marke p{color:rgba(255,255,255,.88)}
.mf-vorteil-marke .mf-vorteil-ico{background:rgba(255,255,255,.16);color:#fff}
/* =========================================================================
Farbwechsler: acht Wandtoene auf einem echten Raumfoto
Die Farbe liegt als Flaeche ueber der Rueckwand und mischt sich per
mix-blend-mode:multiply ins Foto. Multiply rechnet Farbe mal
Wandhelligkeit, deshalb bleiben Licht, Schatten und die Kante zur
Decke erhalten, statt dass ein flacher Farbfleck auf dem Bild klebt.
Dunkle Toene werden dabei noch dunkler; die Palette in inhalt_start.py
ist darauf abgestimmt.
Drei Dinge haengen zusammen und duerfen nicht einzeln geaendert werden:
1. `isolation:isolate` auf dem Kasten. Ohne das mischt der Blend nicht
nur mit dem Foto, sondern mit allem darunter, also auch mit dem
kreideweissen Sektionsgrund. Die Wand waere dann heller als das Bild.
2. Der Kasten hat KEINE eigene Hoehe und kein object-fit. Er ist genau so
hoch wie das Bild, damit die Prozentangaben des Polygons auf das Bild
zeigen und nicht auf einen Ausschnitt davon.
3. Das Polygon hat 21 Punkte und nicht vier. Ein Viereck reicht hier
nicht: die Wand steht in der Perspektive, Decke und Boden laufen
schraeg, die Linse biegt beide zusaetzlich leicht durch, und rechts
unterbricht die Tuer die Wand. Das alte Trapez lief deshalb links
ueber die Zimmerecke hinaus und liess oben rechts und unten am Boden
einen weissen Streifen stehen.
Gemessen wurde am 23.8.2026 an Helligkeitsprofilen quer und laengs
durch die Datei 1600x1067 (nicht an Kantenenergie: die fand beim
ersten Anlauf den Fensterrahmen bei x 704 statt der Zimmerecke).
Die Kanten in Bildpunkten der Datei:
Zimmerecke links x 755, senkrecht ueber die ganze Hoehe
Deckenkante y 344 bei x 755 -> y 237 am rechten Bildrand
Bodenkante y 677 bei x 755 -> y 743 an der Tuerzarge
Tuerzarge x 1405, senkrecht
Sturz ueber Tuer y 356 bei x 1405 -> y 340 am rechten Bildrand
Das Stueck Wand ueber der Tuer gehoert dazu, sonst bleibt oben rechts
eine weisse Ecke stehen. Wer das Bild tauscht oder den Zuschnitt in
bilder.py aendert, misst neu: Spaltenprofil durch die Wand legen und
die Zeile suchen, in der die Helligkeit springt.
========================================================================= */
.mf-raum{
display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
gap:clamp(24px,4vw,56px);align-items:center;
}
.mf-raum-bild{
position:relative;isolation:isolate;overflow:hidden;
border-radius:var(--mf-r-bild);box-shadow:var(--mf-schatten-m);
/* Vorgabe, gleich dem ersten Ton in inhalt_start.TOENE. Sie steht hier und
nicht als Inline-Stil im Markup: ein Inline-Stil haette eine hoehere
Gewichtung als die :has()-Regeln unten, und ohne Javascript bliebe die
Wand dann fuer immer kreideweiss. Genau so war es beim ersten Anlauf. */
--wand:#F3F0EA;
}
.mf-raum-bild img{display:block;width:100%;height:auto}
.mf-wand{
position:absolute;inset:0;pointer-events:none;
background:var(--wand);mix-blend-mode:multiply;
clip-path:polygon(
/* Deckenkante, von der Zimmerecke nach rechts */
47.20% 32.24%, 51.88% 31.68%, 56.25% 30.93%, 62.50% 29.71%,
68.75% 28.49%, 75.00% 27.18%, 81.25% 25.96%, 86.25% 24.93%,
90.63% 24.09%, 96.88% 22.87%, 100% 22.26%,
/* am Bildrand hinunter, dann am Sturz zurueck zur Tuerzarge */
100% 31.87%, 96.25% 32.33%, 91.25% 32.99%, 87.81% 33.36%,
/* Tuerzarge hinunter bis zum Boden */
87.81% 69.63%,
/* Bodenkante, zurueck zur Zimmerecke */
83.13% 69.07%, 75.63% 68.04%, 65.63% 66.54%, 55.63% 64.95%, 47.20% 63.45%
);
transition:background-color .45s var(--mf-uebergang);
}
.mf-toene{display:flex;flex-wrap:wrap;gap:12px;border:0;margin:0;padding:0}
.mf-toene legend{
padding:0;margin-bottom:14px;
font-size:14px;font-weight:700;color:var(--mf-tinte);
}
.mf-ton{position:relative;display:block;cursor:pointer;margin:0}
/* Eigene Masse, und das ist kein Schoenheitsfehler: die Formularregel setzt
jedes input auf width:100%. Ein verstecktes Kaestchen waere damit so breit
wie die Seite und schoebe sie waagerecht ueber den Rand, ohne dass man den
Uebeltaeter sieht (dieselbe Falle wie bei Musterseite 3). */
.mf-ton input{
position:absolute;width:1px;height:1px;opacity:0;margin:0;
top:50%;left:50%;pointer-events:none;
}
.mf-ton > span{
display:block;width:48px;height:48px;border-radius:50%;
background:var(--ton);
box-shadow:inset 0 0 0 1px rgba(23,26,25,.16);
transition:box-shadow var(--mf-uebergang),transform var(--mf-uebergang);
}
.mf-ton:hover > span{transform:translateY(-2px)}
.mf-ton input:checked + span{
box-shadow:inset 0 0 0 1px rgba(23,26,25,.16),
0 0 0 3px var(--mf-flaeche),0 0 0 6px var(--mf-marke);
}
.mf-ton input:focus-visible + span{outline:3px solid var(--mf-marke);outline-offset:4px}
.mf-ton-name{margin:16px 0 18px;font-size:19px;font-weight:800;color:var(--mf-tinte)}
.mf-ton-hinweis{margin-top:14px;font-size:13.5px}
@media (max-width:900px){
.mf-raum{grid-template-columns:1fr}
}
/* =========================================================================
Das Gesicht am Telefon
Gross in der Ablauf-Sektion, klein neben dem Formular. Die Unterschrift
nennt die Rolle und was die Person tut, nie einen Namen: die Seite zeigt
seit dem 22.8.2026 Gesichter, aber keine erfundenen Personen.
========================================================================= */
.mf-gesicht{margin:0}
.mf-gesicht img{
width:100%;height:auto;display:block;
border-radius:var(--mf-r-karte);box-shadow:var(--mf-schatten-m);
}
.mf-gesicht figcaption{
margin-top:12px;font-size:var(--mf-fs-karte);line-height:1.5;
}
.mf-gesicht figcaption strong{display:block}
.mf-ruf{
display:flex;align-items:center;gap:18px;
margin-top:26px;padding:18px 20px;
border-radius:var(--mf-r-karte);
background:var(--mf-karte);border:1px solid var(--mf-linie);
}
.mf-sek-hell .mf-ruf{background:#fff}
.mf-ruf-bild{flex:none;width:96px;height:96px;border-radius:50%;overflow:hidden}
.mf-ruf-bild img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.mf-ruf-text{min-width:0}
.mf-ruf-nummer{
display:inline-block;
font-size:clamp(23px,2.4vw,28px);font-weight:800;letter-spacing:-.03em;
color:var(--mf-tinte);text-decoration:none;line-height:1.15;
}
.mf-ruf-nummer:hover{color:var(--mf-marke)}
.mf-ruf-text span{display:block;margin-top:5px;font-size:14.5px;line-height:1.45}
@media (max-width:420px){
.mf-ruf{gap:14px;padding:16px}
.mf-ruf-bild{width:72px;height:72px}
}
/* =========================================================================
Grossschrift im Karriereband
========================================================================= */
.mf-karriere-kopf{position:relative;z-index:1;margin-bottom:clamp(26px,3.5vw,42px)}
.mf-riesig{
font-size:var(--mf-fs-riesig);font-weight:900;line-height:.95;
letter-spacing:-.04em;color:#fff;
/* 11ch bricht die Zeile hinter "Feierabend". Kein
im Text: der Satz
soll sich auch vorlesen lassen, als waere er einer. */
max-width:11ch;text-wrap:balance;
margin:16px 0 0;
}
/* =========================================================================
Kundenstimmen als Laufband
Zwei Reihen, gegenlaeufig. Kein Javascript und keine Bibliothek: die
Bewegung ist eine CSS-Animation, das Anhalten eine :hover-Regel. Ohne
Javascript laeuft das Band deshalb genauso.
Damit rechts keine Luecke klafft, bevor die zweite Gruppe nachrueckt,
muss eine Gruppe breiter sein als das Fenster, in dem sie laeuft. Das
Fenster ist die Inhaltsbahn ohne ihre Raender, bei 1440 px sind das
1.120 px. Eine Gruppe misst 4 Karten x 330 px + 3 Luecken x 28 px =
1.404 px. Wer Karten entfernt oder schmaler macht, muss diese Rechnung
neu aufmachen; pruefen.py misst beide Werte und meldet sich.
========================================================================= */
.mf-laufband{
position:relative;display:flex;flex-direction:column;
gap:var(--mf-luecke);overflow:hidden;
}
.mf-band{display:flex;gap:var(--mf-luecke);width:max-content}
.mf-band-gruppe{display:flex;gap:var(--mf-luecke);flex:none}
.mf-band-1{animation:mf-lauf 46s linear infinite}
.mf-band-2{animation:mf-lauf 54s linear infinite reverse}
/* Verschoben wird um eine ganze Gruppe plus eine Luecke, nicht um glatte
50 Prozent: die Spur ist zwei Gruppen und eine Luecke breit, 50 Prozent
waeren eine halbe Luecke zu wenig, und das Band saesse nach jedem
Durchlauf um diesen Betrag versetzt. */
@keyframes mf-lauf{
from{transform:translateX(0)}
to{transform:translateX(calc(-50% - var(--mf-luecke) / 2))}
}
.mf-laufband:hover .mf-band,
.mf-laufband.ist-gehalten .mf-band{animation-play-state:paused}
/* Schalter zum Anhalten. Er steht nur da, wenn Javascript laeuft, denn ohne
koennte er nichts ausrichten; die Klasse mf-js setzt ein Einzeiler im
. Bei "Bewegung reduzieren" steht das Band ohnehin still, dann ist
der Schalter ueberfluessig und verschwindet wieder. */
.mf-band-steuer{display:none}
.mf-js .mf-band-steuer{display:flex;justify-content:flex-end;margin-bottom:12px}
@media (prefers-reduced-motion:reduce){
.mf-js .mf-band-steuer{display:none}
}
.mf-band-halt{
display:inline-flex;align-items:center;gap:8px;
padding:8px 15px;border-radius:var(--mf-r-pille);
border:1.5px solid var(--mf-linie-stark);background:transparent;
font-family:inherit;font-size:14px;font-weight:700;color:var(--mf-tinte);
cursor:pointer;
transition:border-color var(--mf-uebergang),color var(--mf-uebergang);
}
.mf-band-halt:hover{border-color:var(--mf-marke);color:var(--mf-marke-hover)}
.mf-band-halt svg{width:14px;height:14px;color:var(--mf-marke);flex:none}
.mf-band-halt .mf-ico-lauf,.mf-band-halt .mf-lauf-wort{display:none}
.mf-band-halt[data-haelt] .mf-ico-lauf,
.mf-band-halt[data-haelt] .mf-lauf-wort{display:block}
.mf-band-halt[data-haelt] .mf-ico-halt,
.mf-band-halt[data-haelt] .mf-halt-wort{display:none}
/* Weicher Rand, damit die Karten nicht an einer harten Kante auftauchen.
14 Prozent blenden knapp eine halbe Karte aus. Die Vorlage nimmt ein
Viertel je Seite, das verdeckt bei 1.200 px eine ganze Karte. */
.mf-band-blende{
position:absolute;top:0;bottom:0;width:14%;z-index:2;pointer-events:none;
}
.mf-band-blende-links{
left:0;background:linear-gradient(90deg,var(--mf-karte) 10%,rgba(255,255,255,0))}
.mf-band-blende-rechts{
right:0;background:linear-gradient(270deg,var(--mf-karte) 10%,rgba(255,255,255,0))}
/* margin:0 ist hier Pflicht, nicht Kosmetik. Eine Karte ist ein
, und dafuer setzt der Browser von sich aus 40 px Rand links
und rechts und 1em oben und unten. Ohne diese Zeile stehen die Karten
108 px statt 28 px auseinander, die Gruppe waechst von 1.404 auf 1.724 px
und die Reihen ruecken um eine halbe Zeilenhoehe auseinander. Sichtbar
ist das, aber es sieht nach Absicht aus, und deshalb faellt es nicht auf. */
.mf-stimme{
width:clamp(268px,78vw,330px);flex:none;margin:0;
display:flex;flex-direction:column;
padding:26px;border-radius:var(--mf-r-karte);
background:var(--mf-karte);border:1px solid var(--mf-linie);
}
/* Jede Gruppe hat vier Karten, davon traegt die erste die Markenfarbe.
Sichtbar ist dadurch jede vierte Karte farbig, in beiden Reihen
gegeneinander versetzt. */
.mf-stimme:first-child{background:var(--mf-marke);border-color:var(--mf-marke);color:#fff}
.mf-stimme:first-child .mf-stimme-text{color:#fff}
.mf-stimme:first-child .mf-sterne{color:#fff}
.mf-stimme:first-child .mf-stimme-wer strong{color:#fff}
.mf-stimme:first-child .mf-stimme-wer span{color:rgba(255,255,255,.8)}
.mf-stimme:first-child .mf-kuerzel{background:rgba(255,255,255,.2);color:#fff}
.mf-stimme .mf-sterne{margin-bottom:13px}
.mf-stimme-text{font-size:var(--mf-fs-karte);margin-bottom:18px;color:var(--mf-tinte)}
.mf-stimme-wer{display:flex;align-items:center;gap:12px;margin-top:auto}
/* Bewegung reduzieren: das Band steht still, laesst sich von Hand schieben
und zeigt jede Stimme nur einmal. Die zweite Gruppe ist ja nur die
nahtlose Fortsetzung und traegt deshalb aria-hidden. */
@media (prefers-reduced-motion:reduce){
.mf-laufband{overflow-x:auto;-webkit-overflow-scrolling:touch}
.mf-band{animation:none}
.mf-band-gruppe[aria-hidden="true"]{display:none}
.mf-band-blende{display:none}
}
.mf-kuerzel{
width:40px;height:40px;flex:none;border-radius:50%;
background:var(--mf-marke-weich);color:var(--mf-marke-hover);
display:grid;place-items:center;font-size:14px;font-weight:800;letter-spacing:.02em;
}
.mf-stimme-wer strong{display:block;font-size:15px;line-height:1.3}
.mf-stimme-wer span{font-size:13.5px}
/* =========================================================================
Aufklapper (FAQ)
Auf der Startseite steht neben den Fragen eine schmale Spalte mit Bild
und dem Hinweis zu den Preisspannen. Vorher lag dort ein Foto als
Hintergrund ueber den ganzen Abschnitt, weichgezeichnet und bei 10
Prozent Deckung: auf dem kreideweissen Grund war es nicht mehr zu sehen,
und rechts neben den Aufklappern blieb ein Drittel der Bahn leer.
Die 840 px der Aufklapper bleiben, lange Zeilen lesen sich schlecht.
Die Nebenspalte klebt beim Scrollen oben fest, weil die Fragenliste
aufgeklappt deutlich hoeher wird als das Bild.
`.mf-faq` steht auch auf den Leistungs- und Karriereseiten, dort ohne
Nebenspalte. Was zur Spalte gehoert, haengt deshalb an `.mf-faq-raster`
und nicht an `.mf-faq`.
========================================================================= */
.mf-faq-raster{
display:grid;grid-template-columns:minmax(0,760px) minmax(0,1fr);
gap:clamp(26px,3.4vw,52px);align-items:start;
}
.mf-faq-neben{position:sticky;top:calc(var(--mf-nav-h) + 26px)}
.mf-faq-bild{margin:0}
.mf-faq-bild img{
width:100%;height:auto;display:block;
border-radius:var(--mf-r-bild);
}
/* Unter dieser Breite bleibt fuer die Spalte weniger als 260 px, das Bild
waere dann schmaler als eine Handyansicht. Ab hier stehen die Fragen
wieder allein und das Bild darunter, in der Breite begrenzt. */
@media (max-width:900px){
.mf-faq-raster{grid-template-columns:1fr}
.mf-faq-neben{position:static;max-width:420px}
}
.mf-faq{max-width:840px}
.mf-faq details{
border:1px solid var(--mf-linie);border-radius:var(--mf-r-karte);
background:var(--mf-karte);margin-bottom:11px;overflow:hidden;
transition:border-color var(--mf-uebergang),box-shadow var(--mf-uebergang);
}
.mf-faq details[open]{border-color:var(--mf-marke);box-shadow:var(--mf-schatten-s)}
.mf-faq summary{
display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:18px 22px;cursor:pointer;list-style:none;
font-size:17px;font-weight:700;color:var(--mf-tinte);
}
.mf-faq summary::-webkit-details-marker{display:none}
.mf-faq summary::after{
content:"";flex:none;width:13px;height:13px;
border-right:2.5px solid var(--mf-marke);border-bottom:2.5px solid var(--mf-marke);
transform:rotate(45deg) translateY(-3px);
transition:transform var(--mf-uebergang);
}
.mf-faq details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.mf-faq-inhalt{padding:0 22px 20px;font-size:var(--mf-fs-karte)}
.mf-faq-inhalt p:last-child{margin-bottom:0}
.mf-faq-hinweis{margin-top:16px;font-size:13.5px;font-style:normal;opacity:.85}
/* =========================================================================
Kontakt und Formulare
========================================================================= */
.mf-kontakt{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,60px);align-items:start}
.mf-kontakt-liste{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:20px}
.mf-kontakt-liste li{display:flex;gap:15px;margin:0}
.mf-kontakt-ico{
width:44px;height:44px;flex:none;border-radius:11px;
background:var(--mf-marke);color:#fff;display:grid;place-items:center;
}
.mf-kontakt-ico svg{width:21px;height:21px}
.mf-kontakt-liste strong{display:block;font-size:13px;text-transform:uppercase;
letter-spacing:.08em;color:var(--mf-text);font-weight:700}
/* `div span` und nicht `span`: die Symbolkachel ist selbst ein span und
liegt direkt im li. Als die Zeile hier noch auf jedes span zielte, schlug
sie mit 0-2-0 die Kachelregel mit 0-1-0, und die Symbole standen in
Tinte auf Petrol. Das sind 1,9:1 und war kaum zu erkennen. Die Textspans
stehen alle im div neben der Kachel, deshalb greift die Regel dort
weiter und die Kachel behaelt ihr Weiss (9,2:1). */
.mf-kontakt-liste a,.mf-kontakt-liste div span{font-size:17px;font-weight:700;
color:var(--mf-tinte);text-decoration:none;line-height:1.4}
.mf-kontakt-liste a:hover{color:var(--mf-marke)}
.mf-gebiet{margin-top:28px;padding-top:24px;border-top:1px solid var(--mf-linie)}
.mf-gebiet h3{font-size:15px;margin-bottom:12px}
.mf-gebiet p{font-size:14.5px;margin:0}
.mf-formular{
padding:clamp(24px,3vw,34px);border-radius:var(--mf-r-karte);
background:var(--mf-karte);border:1px solid var(--mf-linie);
box-shadow:var(--mf-schatten-m);
}
.mf-sek-hell .mf-formular{background:#fff}
.mf-formular h3{margin-bottom:6px}
.mf-formular > p{font-size:var(--mf-fs-karte);margin-bottom:22px}
.mf-feldreihe{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mf-feld{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.mf-feld label{font-size:14px;font-weight:700;color:var(--mf-tinte)}
.mf-feld .mf-pflicht{color:var(--mf-marke)}
.mf-feld input,.mf-feld select,.mf-feld textarea{
width:100%;padding:12px 14px;
border:1.5px solid var(--mf-linie-stark);border-radius:var(--mf-r-feld);
background:#fff;color:var(--mf-tinte);
font-family:inherit;font-size:15.5px;line-height:1.45;
transition:border-color var(--mf-uebergang),box-shadow var(--mf-uebergang);
}
.mf-feld textarea{min-height:118px;resize:vertical}
.mf-feld input::placeholder,.mf-feld textarea::placeholder{color:#7C807D}
.mf-feld input:focus,.mf-feld select:focus,.mf-feld textarea:focus{
outline:none;border-color:var(--mf-marke);
box-shadow:0 0 0 3px rgba(14,79,92,.16);
}
.mf-feld-hilfe{font-size:13px;color:var(--mf-text)}
.mf-zustimmung{display:flex;gap:11px;align-items:flex-start;margin:6px 0 18px;font-size:14px}
.mf-zustimmung input{width:19px;height:19px;flex:none;margin-top:2px;accent-color:var(--mf-marke)}
.mf-formular .mf-btn{width:100%;justify-content:center}
/* Hinweis, den das Formular statt eines Versands ausgibt */
.mf-formularhinweis{
margin-top:16px;padding:14px 16px;border-radius:var(--mf-r-feld);
background:var(--mf-marke-weich);border:1px solid var(--mf-marke);
color:var(--mf-tinte);font-size:14.5px;
}
.mf-formularhinweis strong{display:block;margin-bottom:3px}
/* =========================================================================
Inhaltsseiten (Leistungen, Ueber uns, Recht)
========================================================================= */
.mf-inhalt{display:grid;grid-template-columns:1fr 340px;gap:clamp(30px,4vw,64px);align-items:start}
.mf-text h2{margin-top:44px;margin-bottom:14px}
.mf-text h2:first-child{margin-top:0}
.mf-text h3{margin-top:28px;margin-bottom:10px}
.mf-text ul{padding-left:0;list-style:none}
.mf-text ul li{
position:relative;padding-left:30px;margin-bottom:11px;
}
.mf-text ul li::before{
content:"";position:absolute;left:0;top:.52em;
width:16px;height:9px;
border-left:2.5px solid var(--mf-marke);border-bottom:2.5px solid var(--mf-marke);
transform:rotate(-45deg);
}
.mf-text ol{padding-left:1.3em}
.mf-text ol li{margin-bottom:11px;padding-left:5px}
.mf-text ol li::marker{color:var(--mf-marke);font-weight:800}
/* Bausteine, die in einem Textbereich stehen, duerfen die Haken-Aufzaehlung
nicht erben. Sonst klebt in jeder Stufenkarte oben links ein Haken und die
Polsterung springt von 20 auf 30 px. */
.mf-text .mf-stufen li,
.mf-text .mf-pillen li,
.mf-text .mf-rollen li{margin-bottom:0}
.mf-text .mf-stufen li::before,
.mf-text .mf-pillen li::before,
.mf-text .mf-rollen li::before{content:none}
.mf-text .mf-stufen li{padding:18px 20px}
.mf-text .mf-pillen li{padding:9px 17px}
.mf-text .mf-rollen li{padding:16px 20px}
/* Merkmalslisten in den Leistungskacheln */
.mf-kachel-text ul{list-style:none;padding-left:0}
.mf-kachel-text li{position:relative;padding-left:21px;margin-bottom:6px;font-size:14.5px}
.mf-kachel-text li::before{
content:"";position:absolute;left:0;top:.5em;width:11px;height:6px;
border-left:2px solid var(--mf-marke);border-bottom:2px solid var(--mf-marke);
transform:rotate(-45deg);
}
.mf-merkbox{
padding:22px 24px;border-radius:var(--mf-r-karte);
background:var(--mf-marke-weich);border-left:4px solid var(--mf-marke);
margin:28px 0;
}
.mf-merkbox h3{margin-top:0;margin-bottom:8px;font-size:17px}
.mf-merkbox p:last-child{margin-bottom:0}
.mf-nebenspalte{position:sticky;top:calc(var(--mf-nav-h) + 22px);display:grid;gap:18px}
.mf-neben-karte{
padding:24px;border-radius:var(--mf-r-karte);
background:var(--mf-karte);border:1px solid var(--mf-linie);
box-shadow:var(--mf-schatten-s);
}
.mf-neben-karte.ist-marke{background:var(--mf-marke);border-color:var(--mf-marke);color:#fff}
.mf-neben-karte.ist-marke h3{color:#fff}
.mf-neben-karte.ist-marke p{color:rgba(255,255,255,.9)}
.mf-neben-karte h3{margin-bottom:10px;font-size:18px}
.mf-neben-karte p{font-size:var(--mf-fs-karte)}
.mf-neben-karte .mf-btn{width:100%;justify-content:center;margin-top:6px}
.mf-neben-liste{list-style:none;padding:0;margin:0}
.mf-neben-liste li{margin:0;border-bottom:1px solid var(--mf-linie)}
.mf-neben-liste li:last-child{border-bottom:0}
.mf-neben-liste a{
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:12px 0;color:var(--mf-tinte);text-decoration:none;
font-size:15px;font-weight:600;
}
.mf-neben-liste a:hover{color:var(--mf-marke)}
.mf-neben-liste svg{width:16px;height:16px;color:var(--mf-marke);flex:none}
.mf-neben-liste a[aria-current="page"]{color:var(--mf-marke);font-weight:700}
/* Bilderpaar in Inhaltsseiten */
.mf-bildpaar{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:30px 0}
.mf-bildpaar img{width:100%;border-radius:var(--mf-r-bild)}
/* Qualitaetsstufen und aehnliche Zweispalter */
.mf-stufen{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0;padding:0;list-style:none}
.mf-stufen li{
margin:0;padding:18px 20px;border-radius:var(--mf-r-karte);
background:var(--mf-flaeche);border:1px solid var(--mf-linie);
}
.mf-stufen strong{display:block;margin-bottom:5px;font-size:16px}
.mf-stufen span{font-size:14.5px;display:block;line-height:1.55}
/* =========================================================================
Stellenanzeige
========================================================================= */
.mf-eckdaten{
display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
background:var(--mf-linie);border:1px solid var(--mf-linie);
border-radius:var(--mf-r-karte);overflow:hidden;margin-bottom:36px;
}
.mf-eckdaten div{background:var(--mf-karte);padding:18px 20px}
.mf-eckdaten dt{font-size:12.5px;font-weight:700;text-transform:uppercase;
letter-spacing:.08em;color:var(--mf-text);margin-bottom:5px}
.mf-eckdaten dd{margin:0;font-size:16.5px;font-weight:700;color:var(--mf-tinte);line-height:1.35}
.mf-bewerbung-schritte{
display:grid;grid-template-columns:repeat(3,1fr);gap:var(--mf-luecke);margin-top:30px;
}
.mf-bewerbung-schritt{
padding:24px;border-radius:var(--mf-r-karte);
background:var(--mf-karte);border:1px solid var(--mf-linie);
}
.mf-bewerbung-schritt .mf-schritt-nr{position:static;margin-bottom:14px;box-shadow:none}
.mf-bewerbung-schritt h3{font-size:17px;margin-bottom:7px}
.mf-bewerbung-schritt p{font-size:var(--mf-fs-karte);margin:0}
/* Ansprechpartner */
.mf-ansprech{
display:grid;grid-template-columns:200px 1fr;gap:26px;align-items:center;
padding:24px;border-radius:var(--mf-r-karte);
background:var(--mf-karte);border:1px solid var(--mf-linie);
}
.mf-ansprech img{border-radius:var(--mf-r-bild);width:100%}
.mf-ansprech h3{margin-bottom:6px}
.mf-ansprech p{font-size:var(--mf-fs-karte)}
/* =========================================================================
Team und Werte (Ueber uns)
========================================================================= */
.mf-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);align-items:center}
.mf-split-eng{grid-template-columns:1.1fr .9fr}
.mf-split img{border-radius:var(--mf-r-karte);width:100%;box-shadow:var(--mf-schatten-m)}
.mf-werte{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--mf-luecke)}
.mf-wert{padding:26px;border-radius:var(--mf-r-karte);background:var(--mf-karte);
border:1px solid var(--mf-linie)}
.mf-wert .mf-vorteil-ico{margin-bottom:14px}
.mf-wert h3{font-size:18px;margin-bottom:8px}
.mf-wert p{font-size:var(--mf-fs-karte);margin:0}
.mf-rollen{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:0;margin:0;list-style:none}
.mf-rollen li{
margin:0;display:flex;align-items:center;gap:14px;
padding:16px 20px;border-radius:var(--mf-r-karte);
background:var(--mf-karte);border:1px solid var(--mf-linie);
}
.mf-rollen-zahl{
width:44px;height:44px;flex:none;border-radius:11px;
background:var(--mf-marke-weich);color:var(--mf-marke-hover);
display:grid;place-items:center;font-size:16px;font-weight:800;
}
.mf-rollen strong{display:block;font-size:15.5px;line-height:1.3}
.mf-rollen span{font-size:13.5px}
/* =========================================================================
Schlussaufruf
========================================================================= */
.mf-schluss{
text-align:center;padding:clamp(40px,5vw,64px) clamp(24px,4vw,56px);
border-radius:var(--mf-r-karte);background:var(--mf-marke);color:#fff;
}
.mf-schluss h2{color:#fff;max-width:20ch;margin:0 auto 14px}
.mf-schluss p{color:rgba(255,255,255,.9);max-width:56ch;margin:0 auto 26px;
font-size:var(--mf-fs-lead)}
.mf-schluss .mf-btn-reihe{justify-content:center}
/* =========================================================================
Fussbereich
========================================================================= */
.mf-fuss{background:var(--mf-marke-tief);color:var(--mf-text-hell);padding:clamp(48px,6vw,72px) 0 0}
.mf-fuss-oben{
display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;
gap:clamp(24px,3vw,44px);padding-bottom:44px;
}
.mf-fuss h3{color:#fff;font-size:14px;text-transform:uppercase;letter-spacing:.1em;
margin-bottom:16px;font-weight:700}
.mf-fuss ul{list-style:none;padding:0;margin:0}
.mf-fuss li{margin-bottom:9px}
.mf-fuss a{color:var(--mf-text-hell);text-decoration:none;font-size:15px}
.mf-fuss a:hover{color:#fff;text-decoration:underline}
.mf-fuss-marke{max-width:34ch}
.mf-fuss-marke .mf-logo{color:#fff;margin-bottom:16px}
.mf-fuss-marke p{font-size:15px;color:var(--mf-text-hell)}
.mf-fuss-kontakt li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.mf-fuss-kontakt svg{width:18px;height:18px;flex:none;margin-top:3px;opacity:.75}
.mf-fuss-gebiete{
padding:22px 0;border-top:1px solid rgba(255,255,255,.14);
font-size:14px;color:rgba(217,227,228,.8);
}
.mf-fuss-gebiete strong{color:#fff;font-weight:700}
.mf-fuss-unten{
display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:space-between;
align-items:center;padding:20px 0 26px;
border-top:1px solid rgba(255,255,255,.14);font-size:14px;
}
.mf-fuss-unten ul{display:flex;flex-wrap:wrap;gap:20px}
.mf-fuss-unten li{margin:0}
.mf-muster-hinweis{
padding:14px 0 22px;font-size:13px;color:rgba(217,227,228,.65);
border-top:1px solid rgba(255,255,255,.09);
}
/* =========================================================================
Bewegung, nur wo sie etwas erklaert
========================================================================= */
/* Der versteckte Ausgangszustand haengt an .mf-js, und diese Klasse setzt ein
Einzeiler im . Ohne Javascript kommt sie nie, und dann steht alles
von Anfang an da. Sonst waeren halbe Seiten unsichtbar, sobald das Skript
nicht laedt. */
.mf-js .mf-auftritt{opacity:0;transform:translateY(18px)}
.mf-js .mf-auftritt.ist-da{
opacity:1;transform:none;
transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.001ms !important;animation-iteration-count:1 !important;
transition-duration:.001ms !important;
}
.mf-js .mf-auftritt{opacity:1;transform:none}
/* Die Wand wechselt dann sofort statt weich. Sie wechselt aber, sonst
waere der Farbwechsler ohne Wirkung. */
.mf-wand{transition:none}
}
/* =========================================================================
Umbrueche
========================================================================= */
@media (max-width:1160px){
.mf-menue a{padding:9px 10px;font-size:14.5px}
.mf-nav-cta .mf-cta-lang{display:none}
.mf-nav-cta .mf-cta-kurz{display:inline}
}
@media (max-width:1080px){
.mf-nav-tel-text{display:none}
.mf-stellen-marker{display:none}
}
@media (max-width:900px){
:root{--mf-nav-h:64px}
.mf-menue,.mf-nav-tel{display:none}
.mf-brenner{
display:grid;place-items:center;width:44px;height:44px;
border:1.5px solid rgba(255,255,255,.4);border-radius:11px;
background:transparent;color:#fff;cursor:pointer;
}
.mf-nav.ist-fest .mf-brenner,.mf-nav.ist-hell .mf-brenner{
border-color:var(--mf-linie-stark);color:var(--mf-tinte)}
.mf-brenner svg{width:23px;height:23px}
.mf-brenner .mf-ico-zu{display:none}
.mf-schub-schalter:checked ~ .mf-nav .mf-brenner .mf-ico-zu{display:block}
.mf-schub-schalter:checked ~ .mf-nav .mf-brenner .mf-ico-auf{display:none}
/* Am Handy steht der Text oben. Sonst schiebt das Bild die Schaltflaechen
unter die Bildkante, und der Hero verfehlt seinen Zweck. */
.mf-hero-innen{grid-template-columns:1fr;gap:28px}
.mf-hero-bild{max-width:560px}
/* Hier keine feste Hoehe. Am Rechner ist sie richtig, weil der Hero sonst
mit der Spaltenbreite waechst; am Handy war sie ein Fehler. Der Kasten
wurde dort bis zu 1,63 breit wie hoch, das Bild ist 1,25, und cover hat
die Differenz oben weggeschnitten: auf flachen Geraeten (390x667) fehlten
78 px, also die Koepfe. Mit height:auto nimmt der Kasten das Verhaeltnis
aus width und height des Bildes, und es wird gar nicht beschnitten. Die
Schaltflaechen stehen am Handy ohnehin ueber dem Bild, der Hero wird
dadurch also nicht knapper. */
.mf-hero-bild img{height:auto}
.mf-hero-text{max-width:none}
.mf-ablauf,.mf-kontakt,.mf-karriere-innen,.mf-inhalt,.mf-split,.mf-split-eng{
grid-template-columns:1fr}
.mf-ablauf-bild,.mf-nebenspalte{position:static}
.mf-karriere-bild{order:-1;max-width:520px}
/* Auf zwei Spalten gehen sechs gleich breite Kacheln in drei vollen Reihen
auf. Eine breite Zelle wuerde hier wieder einen Platz leer lassen. */
.mf-bento{grid-template-columns:1fr 1fr}
.mf-bento > :nth-child(1),
.mf-bento > :nth-child(4),
.mf-bento > :nth-child(6){grid-column:auto}
.mf-bento > :nth-child(1) .mf-kachel-bild img,
.mf-bento > :nth-child(4) .mf-kachel-bild img,
.mf-bento > :nth-child(6) .mf-kachel-bild img{aspect-ratio:3/2}
.mf-vorteile,.mf-werte,.mf-bewerbung-schritte{grid-template-columns:1fr 1fr}
.mf-eckdaten{grid-template-columns:1fr 1fr}
.mf-fuss-oben{grid-template-columns:1fr 1fr}
.mf-fuss-marke{grid-column:span 2}
}
@media (max-width:640px){
.mf-zahlen{grid-template-columns:1fr 1fr;gap:22px}
/* Acht Kreise zu 48 px passen in zwei Reihen bis hinunter zu 320 px. */
.mf-ton > span{width:44px;height:44px}
.mf-toene{gap:10px}
.mf-farbe-knopf{width:100%}
.mf-bento,.mf-galerie,.mf-stellen,.mf-vorteile,.mf-werte,
.mf-feldreihe,.mf-bildpaar,.mf-stufen,.mf-rollen,.mf-bewerbung-schritte{
grid-template-columns:1fr}
.mf-ansprech{grid-template-columns:1fr}
.mf-ansprech img{max-width:200px}
.mf-btn{width:100%;justify-content:center}
.mf-btn-reihe{flex-direction:column;align-items:stretch}
.mf-btn-klein{width:auto}
.mf-schritt{padding-left:58px}
.mf-schritt-nr{width:42px;height:42px;font-size:15px}
.mf-schritte::before{left:20px}
.mf-galerie figure{border-radius:var(--mf-r-bild)}
.mf-fuss-oben{grid-template-columns:1fr}
.mf-fuss-marke{grid-column:auto}
.mf-fuss-unten{flex-direction:column;align-items:flex-start}
}
@media (max-width:380px){
.mf-logo{font-size:17px}
.mf-logo-mark{width:31px;height:31px;font-size:14px}
}