, nicht am : Am body wandert die Angabe auf den Viewport und die Seite bleibt dann seitlich verschiebbar. An einem normalen Element greift der Schnitt sauber, die Breite der Seite wächst gar nicht erst. clip statt hidden, weil hidden einen Rollbereich aufmachen würde; hidden bleibt nur als Rückfall für Browser ohne clip. */ main { overflow-x: hidden; overflow-x: clip; } /* Ein eigenes display überschreibt sonst das hidden-Attribut */ [hidden] { display: none !important; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } ul, ol { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; letter-spacing: -.018em; margin: 0; color: var(--text); text-wrap: balance; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } /* Kein Wort steht allein ------------------------------------------------ Bleibt in der letzten Zeile eines Absatzes ein einzelnes Wort übrig, wirkt der Satz unruhig. Drei Schichten verhindern das: 1. text-wrap: pretty – der Browser zieht von sich aus ein Wort herunter. 2. Die geschützten Leerzeichen, die tools/witwen.py zwischen die letzten beiden Wörter setzt. Sie wirken auch dort, wo pretty noch fehlt. 3. overflow-wrap als Netz: Sollte so ein Paar einmal breiter sein als seine Spalte, bricht es um, statt über den Rand zu laufen. */ p, li, dd, dt, blockquote, figcaption, address, .lede, .claim, .svc__text, .tile__hint { text-wrap: pretty; overflow-wrap: break-word; } /* Überschriften bleiben bei text-wrap: balance (siehe oben), brauchen das Netz gegen Überlauf aber genauso: Ein geschütztes Paar, das breiter ist als seine Spalte, soll umbrechen statt über den Rand zu laufen. */ h1, h2, h3, h4 { overflow-wrap: break-word; } ::selection { background: var(--blue); color: #fff; } :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; } /* ------------------------------------------------------------- Utilities */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .wrap--wide { max-width: var(--wrap-wide); } .wrap--narrow { max-width: var(--wrap-narrow); } .section { padding-block: var(--sec-y); position: relative; } .section--alt { background: var(--gray-100); } .section--tight { padding-block: clamp(48px, 6vw, 80px); } .section--dark { background: var(--navy); color: var(--on-dark-dim); } /* Signalblaue Fläche – der Verlauf läuft von oben dunkler nach unten heller, damit die Wellen oben und unten eine eindeutige Farbe zum Anschließen haben. */ .section--brand { background: linear-gradient(180deg, var(--blue-dark) 0%, var(--blue) 100%); color: rgba(255, 255, 255, .82); } .section--dark h2, .section--dark h3, .section--dark h4, .section--brand h2, .section--brand h3, .section--brand h4 { color: var(--on-dark); } /* ------------------------------------------------- Sektionsübergänge --- Statt harter Kanten schwingen die farbigen Flächen in die Nachbarsektion hinein. Die Kurven sind bewusst unregelmäßig und oben/unten verschieden, damit der Verlauf nicht gespiegelt wirkt. Die Füllfarbe steckt im SVG und muss zur Sektionsfarbe passen – CSS-Variablen funktionieren in data-URIs nicht. ----------------------------------------------------------------------- */ .section--alt, .section--dark, .section--brand { position: relative; /* die Wellen setzen oben und unten an, der Innenabstand gleicht das aus */ margin-block: calc(var(--wave) * -1); padding-block: calc(var(--sec-y) + var(--wave)); --wave: clamp(38px, 5vw, 74px); } .section--alt.section--tight, .section--dark.section--tight, .section--brand.section--tight { padding-block: calc(clamp(48px, 6vw, 80px) + var(--wave)); } .section--alt::before, .section--alt::after, .section--dark::before, .section--dark::after, .section--brand::before, .section--brand::after { content: ''; position: absolute; left: 0; right: 0; height: var(--wave); background-repeat: no-repeat; background-size: 100% 100%; pointer-events: none; } .section--alt::before, .section--dark::before, .section--brand::before { top: 0; } .section--alt::after, .section--dark::after, .section--brand::after { bottom: 0; } /* obere Kante – flacher Anstieg links, kräftigere Senke rechts */ .section--alt::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%23F1F1F3' d='M0 66C196 12 338 76 566 54 830 28 1006 78 1212 42 1300 26 1372 34 1440 26V80H0Z'/%3E%3C/svg%3E"); } /* untere Kante – anderer Rhythmus, nicht die gespiegelte Oberkante */ .section--alt::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%23F1F1F3' d='M0 0h1440v26c-198 40-360-8-586 14-244 24-406-22-608 6-92 13-170 22-246 16Z'/%3E%3C/svg%3E"); } .section--dark::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%230F2544' d='M0 66C196 12 338 76 566 54 830 28 1006 78 1212 42 1300 26 1372 34 1440 26V80H0Z'/%3E%3C/svg%3E"); } .section--dark::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%230F2544' d='M0 0h1440v26c-198 40-360-8-586 14-244 24-406-22-608 6-92 13-170 22-246 16Z'/%3E%3C/svg%3E"); } /* Markenfläche: obere Welle im dunkleren, untere im helleren Blau – passend zu den beiden Enden des Verlaufs. */ .section--brand::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%230A54B4' d='M0 66C196 12 338 76 566 54 830 28 1006 78 1212 42 1300 26 1372 34 1440 26V80H0Z'/%3E%3C/svg%3E"); } .section--brand::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%230B63D6' d='M0 0h1440v26c-198 40-360-8-586 14-244 24-406-22-608 6-92 13-170 22-246 16Z'/%3E%3C/svg%3E"); } /* Grenzen zwischen zwei farbigen Flächen: Dort deckt der Grund der unteren Sektion die Welle der oberen ab, die Kante bliebe schnurgerade. Deshalb zeichnet in diesem Fall die untere Sektion die Welle – in der Farbe der oberen und nach oben hin geschlossen, sodass die obere Fläche wie gewohnt hineinschwingt. */ .section--alt + .section--brand::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%23F1F1F3' d='M0 66C196 12 338 76 566 54 830 28 1006 78 1212 42 1300 26 1372 34 1440 26V0H0Z'/%3E%3C/svg%3E"); } .section--alt + .section--dark::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%23F1F1F3' d='M0 66C196 12 338 76 566 54 830 28 1006 78 1212 42 1300 26 1372 34 1440 26V0H0Z'/%3E%3C/svg%3E"); } .section--brand + .section--alt::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%230B63D6' d='M0 66C196 12 338 76 566 54 830 28 1006 78 1212 42 1300 26 1372 34 1440 26V0H0Z'/%3E%3C/svg%3E"); } .section--dark + .section--alt::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%230F2544' d='M0 66C196 12 338 76 566 54 830 28 1006 78 1212 42 1300 26 1372 34 1440 26V0H0Z'/%3E%3C/svg%3E"); } /* Sicherheits-Check: Bogen an der oberen linken Ecke, danach die Schwingung. Dafür muss die Wellenfläche links oben bis zur Kante reichen – sonst greift der Radius ins Leere. Den Radius trägt allein die Sektion. Der Wellenstreifen darüber ist nur --wave hoch (38 px auf dem Handy); ein Radius von 56 px passt da nicht hinein und wird vom Browser auf die Streifenhöhe gestaucht. Dann trifft die Rundung des Streifens die der Sektion nicht mehr und an der Kante entsteht ein Absatz. Mit overflow: hidden gibt die Sektion die Form vor und der Streifen wird sauber daran beschnitten – unabhängig davon, wie die beiden Werte zueinander stehen. */ #sicherheits-check { --corner: clamp(56px, 8vw, 150px); border-top-left-radius: var(--corner); overflow: hidden; } #sicherheits-check::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%23F1F1F3' d='M0 0c196 10 338 70 566 50 264-24 440 26 646-10 88-15 160-8 228-14V80H0Z'/%3E%3C/svg%3E"); } /* Footer schwingt ein statt hart abzusetzen. Sichtbar wird die Welle über den Farbunterschied zum Abschnitt darüber – der Fuß liegt eine Stufe tiefer als --navy. Eine gezeichnete Linie entlang der Kurve wäre deutlicher, wirkt aber wie ein Fremdkörper; verworfen. */ .footer { position: relative; --wave: clamp(38px, 5vw, 74px); margin-top: calc(var(--wave) * -1); padding-top: calc(clamp(52px, 6vw, 80px) + var(--wave)); } .footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: var(--wave); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%23081729' d='M0 62C242 8 410 74 676 50 946 26 1122 78 1440 32V80H0Z'/%3E%3C/svg%3E") no-repeat; background-size: 100% 100%; pointer-events: none; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -100px; left: 16px; z-index: 999; background: var(--blue); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--r) var(--r); font-weight: 600; transition: top .2s var(--ease); } .skip-link:focus { top: 0; } /* Eyebrow – die Zeile über der Überschrift, handschriftlich statt als Pille. Sie nimmt damit die Notiz im Hero auf und wirkt wie an den Rand geschrieben, nicht wie ein Etikett. Caveat läuft klein sehr zierlich, deshalb deutlich größer gesetzt als die frühere Pille. */ .eyebrow { display: block; font-family: var(--font-hand); font-size: clamp(24px, 2.4vw, 31px); font-weight: 600; line-height: 1.1; letter-spacing: 0; color: var(--blue); margin: 0 0 10px; } .section--dark .eyebrow { color: var(--sky); } .section--brand .eyebrow { color: #fff; } .sec-head { max-width: 660px; margin-bottom: clamp(36px, 4.5vw, 56px); } .sec-head--center { margin-inline: auto; text-align: center; } h1 { font-size: clamp(2.5rem, 5.4vw, 4rem); } h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); } h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); } .lede { font-size: clamp(1.02rem, 1.3vw, 1.16rem); color: var(--text-dim); line-height: 1.6; margin-top: 18px; } .section--dark .lede { color: var(--on-dark-dim); } .section--brand .lede { color: rgba(255, 255, 255, .82); } /* --------------------------------------------------------------- Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 15px 28px; font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -.005em; border: 1.5px solid transparent; border-radius: 100px; cursor: pointer; transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); white-space: nowrap; line-height: 1.2; } .btn svg { width: 17px; height: 17px; flex: none; transition: transform .3s var(--ease); } .btn:hover svg { transform: translateX(3px); } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--blue); color: #fff; box-shadow: 0 1px 2px rgba(11, 99, 214, .2), 0 8px 20px rgba(11, 99, 214, .18); } .btn--primary:hover { background: var(--blue-dark); box-shadow: 0 2px 4px rgba(11, 99, 214, .22), 0 14px 30px rgba(11, 99, 214, .26); } .btn--navy { background: var(--navy); color: #fff; } .btn--navy:hover { background: var(--navy-600); } .btn--outline { background: transparent; border-color: var(--line-strong); color: var(--text); } .btn--outline:hover { border-color: var(--navy); background: var(--gray-50); } .btn--on-dark { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .28); color: #fff; } .btn--on-dark:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .5); } .btn--sm { padding: 11px 20px; font-size: 15px; } .btn--block { width: 100%; } /* Auf schmalen Screens darf ein langer CTA umbrechen statt zu überlaufen */ @media (max-width: 480px) { .btn { white-space: normal; text-align: center; } .hero__actions .btn { width: 100%; } } /* Textlink mit Unterstrich – SimpliSafe nutzt das als Zweit-CTA */ .link-under { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--blue); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; transition: color .2s var(--ease), gap .25s var(--ease); } .link-under svg { width: 15px; height: 15px; } .link-under:hover { color: var(--blue-dark); gap: 11px; } .section--dark .link-under, .hero .link-under { color: #fff; } .section--dark .link-under:hover, .hero .link-under:hover { color: var(--sky); } /* ================================================================ TOPBAR */ /* ====================================================== UMZUGSHINWEIS */ /* Befristeter Streifen über der Topbar: Wer die Firma als JML kennt, soll sehen, dass er richtig ist. Bewusst hell – zwei dunkle Bänder übereinander (Streifen und Topbar) machten den Kopf schwer. Steht ganz oben und scrollt mit weg; der klebende Header darunter bleibt davon unberührt. Eingebaut und wieder entfernt von tools/hinweis.py. */ .umzug { background: var(--blue-soft); border-bottom: 1px solid rgba(11, 99, 214, .14); color: var(--navy); font-size: 14.5px; line-height: 1.45; } .umzug__inner { display: flex; align-items: center; gap: 12px; padding-block: 10px; } .umzug__zeichen { width: 19px; height: 19px; flex: none; color: var(--blue); } .umzug__text { margin: 0; flex: 1; } .umzug__text strong { font-weight: 600; } .umzug__text a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; } .umzug__zu { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: -4px -6px -4px 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text-dim); cursor: pointer; } .umzug__zu svg { width: 15px; height: 15px; } .umzug__zu:hover { background: rgba(11, 99, 214, .1); color: var(--navy); } .umzug[hidden] { display: none; } /* Schmal: Das Zeichen trägt hier nichts bei, was der Satz nicht schon sagt, und kostet eine Zeile Breite. */ @media (max-width: 620px) { .umzug { font-size: 13.5px; } .umzug__zeichen { display: none; } .umzug__text a { white-space: normal; } /* Der Beisatz kostet hier zwei von vier Zeilen. Die Kernaussage steht im Satz darüber, die Beruhigung holt sich über „Mehr dazu", wer sie braucht – oben auf dem Schirm zählt jede Zeile. */ .umzug__dazu { display: none; } } .topbar { background: var(--navy); font-size: 14.5px; color: var(--on-dark-dim); position: relative; z-index: 60; } .topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 44px; } .topbar__list { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; } .topbar__item { display: inline-flex; align-items: center; gap: 8px; } .topbar__item svg { width: 15px; height: 15px; color: var(--sky); flex: none; } .topbar a:hover { color: var(--white); } .topbar__socials { display: flex; gap: 12px; } .topbar__socials a { display: grid; place-items: center; width: 28px; height: 28px; color: var(--on-dark-mute); border-radius: var(--r-sm); } .topbar__socials svg { width: 17px; height: 17px; } .topbar__socials a:hover { color: var(--white); background: rgba(255, 255, 255, .1); } @media (max-width: 900px) { .topbar { display: none; } } /* ================================================================ HEADER */ .header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .9); backdrop-filter: blur(18px) saturate(150%); border-bottom: 1px solid transparent; transition: background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .header.is-stuck { background: rgba(255, 255, 255, .98); border-bottom-color: var(--line); box-shadow: 0 4px 20px rgba(15, 37, 68, .07); } .header__inner { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 92px; max-width: var(--wrap-wide); } .brand { display: inline-flex; align-items: center; gap: 12px; flex: none; } .brand img { width: 44px; height: auto; } /* Header: nur die Bildmarke, dadurch darf sie größer stehen */ .brand--mark-only { gap: 0; } .brand--mark-only img { width: auto; height: 66px; } @media (max-width: 600px) { .brand--mark-only img { height: 56px; } } .brand__name { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--navy); } .brand__sub { display: block; font-size: 12px; font-weight: 500; letter-spacing: .02em; color: var(--gray-500); margin-top: 1px; } @media (max-width: 420px) { .brand__name { font-size: 16px; } } /* ---------------------------------------------------------- Hauptnavi */ .nav { display: flex; align-items: center; gap: 2px; } .nav__item { position: relative; } .nav__toggle, .nav__link { display: inline-flex; align-items: center; gap: 5px; padding: 9px 12px; border: 0; background: none; font-family: var(--font-display); font-size: 15.5px; font-weight: 500; color: var(--text); border-radius: var(--r-sm); white-space: nowrap; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease); } .nav__toggle:hover, .nav__link:hover, .nav__item.is-open .nav__toggle { background: var(--gray-100); color: var(--blue); } .nav__toggle:focus-visible, .nav__link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .nav__chev { width: 14px; height: 14px; transition: transform .25s var(--ease); } .nav__item.is-open .nav__chev { transform: rotate(180deg); } /* -------------------------------------------------------- Klappmenü */ .nav__panel { position: absolute; top: calc(100% + 10px); left: 0; min-width: 244px; padding: 10px; background: var(--white); border-radius: var(--r-lg); box-shadow: 0 2px 6px rgba(15, 37, 68, .07), 0 18px 46px rgba(15, 37, 68, .16); z-index: 20; } /* Die Lücke zur Schaltfläche überbrücken, damit das Menü beim Hinüberfahren nicht zuklappt. */ .nav__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } .nav__panel--wide { display: flex; flex-wrap: wrap; gap: 8px; min-width: 400px; } .nav__panel--cols .nav__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 6px; } .nav__group { flex: 1; } .nav__group + .nav__group { padding-left: 8px; border-left: 1px solid var(--line); } .nav__group-title { margin: 6px 10px 6px; font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-mute); } .nav__list { list-style: none; margin: 0; padding: 0; } .nav__list a { display: block; padding: 8px 10px; border-radius: var(--r-sm); font-size: 15px; color: var(--text-body); white-space: nowrap; transition: background-color .18s var(--ease), color .18s var(--ease); } .nav__list a:hover { background: var(--blue-soft); color: var(--blue); } /* Weg zur Übersichtsseite des Hauptpunkts – sitzt als Fuß im Klappmenü, damit die Schaltfläche oben weiter nur auf- und zuklappt. */ .nav__alle { display: flex; align-items: center; gap: 6px; margin: 8px -10px -10px; padding: 13px 20px; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-lg) var(--r-lg); font-family: var(--font-display); font-size: 14.5px; font-weight: 600; color: var(--blue); white-space: nowrap; transition: background-color .18s var(--ease), gap .18s var(--ease); } .nav__alle svg { width: 15px; height: 15px; } .nav__alle:hover { background: var(--blue-soft); gap: 10px; } .nav__panel--wide .nav__alle { flex: 0 0 100%; } .header__cta { display: flex; align-items: center; gap: 10px; } /* Die Navigation braucht mit sechs Punkten mehr Platz als zuvor: erst rücken die Menüpunkte zusammen, dann weicht die Telefonschaltfläche. */ @media (max-width: 1320px) { .nav__toggle, .nav__link { padding: 9px 9px; font-size: 15px; } } @media (max-width: 1240px) { .header__cta .btn--outline { display: none; } } @media (max-width: 1140px) { .nav { display: none; } } /* Der Sicherheitscheck bleibt auf jeder Breite sichtbar – nur der Text wird kürzer, sobald die volle Beschriftung nicht mehr passt. */ @media (max-width: 1140px) { .header__check { font-size: 14.5px; padding: 10px 16px; } } @media (max-width: 560px) { .header__check { font-size: 0; padding: 11px 15px; } .header__check::after { content: "Sicherheitscheck"; font-size: 14.5px; } } @media (max-width: 600px) { .header__inner { min-height: 80px; } } @media (max-width: 359px) { .header__check::after { content: "Check"; } } .burger { display: none; width: 46px; height: 46px; background: var(--white); border: 1.5px solid var(--line-strong); border-radius: var(--r); cursor: pointer; padding: 0; /* Flex mit festem gap: der Balkenabstand ist damit exakt bekannt (2 + 5 = 7px) */ flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .burger span { display: block; width: 19px; height: 2px; border-radius: 2px; background: var(--navy); margin: 0; transition: transform .3s var(--ease), opacity .25s var(--ease); } .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 1140px) { .burger { display: flex; } } /* ------------------------------------------------------- Mobiles Menü */ /* Fährt als Tafel von rechts herein. Links steht sie nicht gerade, sondern gebogen: Ein 100 px breites SVG liegt neben der Tafel, sein Kontrollpunkt wandert beim Öffnen von außen (-100) nach innen (100) – dadurch zieht sich die Wölbung glatt, als würde Stoff gespannt. Gesteuert wird die Kurve in main.js, die Tafel selbst per Transform. */ .mobile-nav { position: fixed; inset: 0; z-index: 99; visibility: hidden; transition: visibility .8s; } .mobile-nav.is-open { visibility: visible; } .mobile-nav__backdrop { position: absolute; inset: 0; background: rgba(8, 23, 41, .5); opacity: 0; transition: opacity .8s var(--ease-curve); } .mobile-nav.is-open .mobile-nav__backdrop { opacity: 1; } .mobile-nav__panel { position: absolute; top: 0; right: 0; width: min(86vw, 460px); height: 100%; background: var(--white); /* 100 px Zugabe, damit die gebogene Kante mit aus dem Bild fährt */ transform: translate3d(calc(100% + 100px), 0, 0); transition: transform .8s var(--ease-curve); } .mobile-nav.is-open .mobile-nav__panel { transform: translate3d(0, 0, 0); } .mobile-nav__curve { position: absolute; top: 0; left: -99px; width: 100px; height: 100%; fill: var(--white); stroke: none; pointer-events: none; } /* --------------------------------------------------- Zwei Ebenen */ /* Haupt- und Unterseite liegen übereinander. Beim Öffnen eines Untermenüs schiebt sich die Hauptliste ein Stück nach links und blendet ab, die Unterseite kommt von rechts. So bleibt die Liste an ihrem Platz, statt aufgeklappt zu werden. */ .mnav__stage { position: relative; height: 100%; overflow: hidden; } .mnav__page { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--white); transition: transform .5s var(--ease-curve), opacity .4s var(--ease-curve); } .mnav__inner { min-height: 100%; padding: 104px clamp(22px, 6vw, 38px) 34px; display: flex; flex-direction: column; } .mnav__page--sub { transform: translate3d(100%, 0, 0); opacity: 0; } .mnav__page--sub.is-current { transform: translate3d(0, 0, 0); opacity: 1; } /* Die Hauptliste weicht nur ein Stück – das liest sich als „darunter liegend", nicht als zweite gleichwertige Tafel. */ .mnav__stage.has-sub .mnav__page--root { transform: translate3d(-22%, 0, 0); opacity: 0; pointer-events: none; } .mobile-nav__label { margin: 0 0 4px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); } /* --------------------------------------------------- Erste Ebene */ .mnav__toggle, .mnav__link { display: flex; align-items: center; gap: 14px; width: 100%; padding: 17px 0; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; color: var(--navy); cursor: pointer; } .mnav__wort { flex: 1; font-family: var(--font-display); font-size: clamp(25px, 7.4vw, 32px); font-weight: 400; letter-spacing: -.02em; line-height: 1.1; transition: transform .4s var(--ease), color .3s var(--ease); } .mnav__chev { width: 19px; height: 19px; flex: 0 0 auto; color: var(--text-mute); align-self: center; transition: transform .3s var(--ease); } .mnav__toggle:hover .mnav__chev { transform: translateX(4px); color: var(--blue); } .mnav__toggle:hover .mnav__wort, .mnav__link:hover .mnav__wort { transform: translateX(10px); color: var(--blue); } /* --------------------------------------------------- Zweite Ebene */ .mnav__back { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 22px; padding: 0; border: 0; background: none; font-family: var(--font-display); font-size: 14.5px; font-weight: 600; letter-spacing: .04em; color: var(--text-mute); cursor: pointer; transition: color .25s var(--ease); } .mnav__back svg { width: 17px; height: 17px; } .mnav__back:hover { color: var(--blue); } .mnav__sub-title { margin: 0 0 10px; padding-bottom: 16px; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: clamp(25px, 7.4vw, 32px); font-weight: 400; letter-spacing: -.02em; line-height: 1.1; color: var(--navy); } .mnav__page--sub a { display: block; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 17px; font-weight: 400; color: var(--text-body); transition: transform .3s var(--ease), color .3s var(--ease); } .mnav__page--sub a:hover { transform: translateX(6px); color: var(--blue); } .mnav__page--sub a.mnav__alle { font-family: var(--font-display); font-weight: 600; color: var(--blue); } .mnav__group-title { margin: 22px 0 2px; font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-mute); } .mnav__group-title:first-child { margin-top: 8px; } /* --------------------------------------------------- Fuß der Tafel */ .mobile-nav__foot { margin-top: auto; padding-top: 30px; } .mobile-nav .btn { justify-content: center; white-space: normal; color: #fff; font-size: 16.5px; } .mobile-nav .btn:hover { color: #fff; } .mobile-nav__meta { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 15.5px; color: var(--text-dim); display: grid; gap: 7px; } .mobile-nav__meta a { font-family: var(--font-body); color: var(--text-dim); } .mobile-nav__meta a:hover { color: var(--blue); } @media (prefers-reduced-motion: reduce) { .mobile-nav__panel, .mobile-nav__backdrop, .mnav__page { transition-duration: .01ms; } } /* ================================================================== HERO */ .hero { background: var(--navy); color: var(--on-dark-dim); position: relative; overflow: visible; /* gibt dem Luftbild genug Raum, um als Motiv zu wirken */ min-height: clamp(560px, 66vh, 700px); display: flex; align-items: center; --hero-corner: clamp(48px, 6vw, 104px); border-bottom-right-radius: var(--hero-corner); } /* WebGL-Verlauf als Hintergrundebene; die Navy-Fläche des Hero bleibt als Fallback darunter stehen, falls WebGL2 fehlt. */ /* Luftbild als unterste Ebene, kräftig ins Navy getönt */ .hero__photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; border-bottom-right-radius: var(--hero-corner); } .hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; filter: saturate(.65) contrast(1.05); } .hero__photo::after { content: ''; position: absolute; inset: 0; background: rgba(15, 37, 68, .6); } /* Leichte Abdunklung, damit der Text auf dem bewegten Verlauf sicher lesbar bleibt */ .hero__inner { position: relative; z-index: 4; width: 100%; display: grid; grid-template-columns: minmax(0, 560px); align-items: center; padding-block: clamp(64px, 8vw, 104px) clamp(72px, 9vw, 112px); } @media (max-width: 940px) { .hero__inner { grid-template-columns: 1fr; /* Oben mehr Luft zur Kopfleiste als auf dem Desktop – einspaltig sitzt die Überschrift sonst direkt unter der Leiste. Der untere Abstand hielt früher das freigestellte Motiv frei und war entsprechend hoch. Ohne das Motiv braucht er nur noch die beiden Dinge zu überspringen, die unten stehen: das Google-Siegel (112 px hoch, ab 7vw über der Kante) und die handschriftliche Notiz daneben. Knapp 200 px lassen dem Siegel rund 40 px Luft nach oben. */ padding-block: clamp(56px, 19vw, 88px) clamp(176px, 48vw, 200px); } } /* Regionale Einordnung über der Überschrift – in derselben Handschrift wie die Zeilen über den übrigen Abschnitten, auf dem dunklen Grund in Hellblau. */ .hero .eyebrow { color: var(--sky); margin-bottom: clamp(8px, 1.2vw, 14px); } .hero h1 { color: #fff; line-height: 1.06; font-size: clamp(2.4rem, 4.6vw, 3.7rem); letter-spacing: -.02em; } /* Auf sehr schmalen Geräten würde „Ihr Unternehmen.“ sonst umbrechen und die Überschrift beim Wortwechsel um eine Zeile wachsen. */ @media (max-width: 360px) { .hero h1 { font-size: 2.1rem; } } /* Das letzte Wort der Überschrift wechselt, damit sich Privat- und Gewerbekunden gleichermaßen angesprochen fühlen. Der Punkt gehört zum Wort: So folgt nichts mehr, das bei unterschiedlicher Wortlänge springen könnte. */ .hero__swap { display: inline-block; white-space: nowrap; } .hero__swap-word { display: inline-block; } /* Einfache Blende – greift, solange der Farbband-Effekt unten nicht geht. */ .js .hero__swap:not(.hero__swap--dia) .hero__swap-word { transition: opacity .26s var(--ease), transform .26s var(--ease); } .js .hero__swap:not(.hero__swap--dia) .hero__swap-word.is-out { opacity: 0; transform: translate3d(0, -.34em, 0); } .js .hero__swap:not(.hero__swap--dia) .hero__swap-word.is-next { opacity: 0; transform: translate3d(0, .34em, 0); } /* --------------------------------------------- Farbband über dem Wort */ /* Ein schmales Farbband wischt von links nach rechts über das Wechselwort. Vor dem Band ist die Schrift durchsichtig, hinter ihm steht sie weiß – das Band schreibt das Wort also herein, statt es nur einzublenden. Die Fläche ist ein Verlauf, der auf die Buchstaben zugeschnitten wird (background-clip: text); --hero-sweep schiebt ihn durch. Ohne @property ließe sich eine Prozentzahl nicht animieren. Deshalb hängt der Effekt an der Klasse --dia, die main.js nur setzt, wenn der Browser beides kann. Sonst bliebe durchsichtige Schrift auf durchsichtigem Grund. */ @property --hero-sweep { syntax: ""; inherits: false; initial-value: 117%; /* Ruhezustand: Band durch, Wort steht weiß */ } .hero__swap--dia { /* Halbe Bandbreite steckt in den Abständen unten (17%). */ --hero-swap-text: var(--on-dark); --hero-swap-1: #BCE3FF; --hero-swap-2: #FFFFFF; --hero-swap-3: #8FD8F7; --hero-swap-4: #4FA8EE; --hero-swap-5: var(--blue); } .hero__swap--dia .hero__swap-word { color: transparent; background-clip: text; -webkit-background-clip: text; /* Der Verlauf wird nur innerhalb der Elementbox gemalt. Die Zeilenhöhe der H1 ist mit 1,06 knapper als die Schrift hoch ist – Unterlängen (g, j) und Umlautpunkte lägen außerhalb und blieben deshalb unsichtbar. Das Polster vergrößert die Malfläche, die negativen Außenabstände nehmen ihn fürs Layout wieder zurück. Nur oben und unten: seitliches Polster würde die Prozentangaben des Verlaufs verschieben. */ padding-block: .2em; margin-block: -.2em; background-image: linear-gradient(90deg, var(--hero-swap-text) 0%, var(--hero-swap-text) calc(var(--hero-sweep) - 17%), var(--hero-swap-1) calc(var(--hero-sweep) - 17%), var(--hero-swap-2) calc(var(--hero-sweep) - 8.5%), var(--hero-swap-3) var(--hero-sweep), var(--hero-swap-4) calc(var(--hero-sweep) + 8.5%), var(--hero-swap-5) calc(var(--hero-sweep) + 17%), transparent calc(var(--hero-sweep) + 17%), transparent 100%); } /* Das Band läuft, während das neue Wort aus der Unschärfe nach oben kommt. */ .hero__swap--dia .hero__swap-word.is-sweeping { animation: hero-sweep 1.5s cubic-bezier(.65, 0, .35, 1) both, hero-swap-in .34s cubic-bezier(.22, 1, .36, 1) both; will-change: --hero-sweep, filter, opacity, transform; } @keyframes hero-sweep { from { --hero-sweep: -17%; } to { --hero-sweep: 117%; } } @keyframes hero-swap-in { from { opacity: .58; filter: blur(8px); transform: translate3d(0, 5.5px, 0); } to { opacity: 1; filter: blur(0); transform: none; } } @media (prefers-reduced-motion: reduce) { .js .hero__swap-word { transition: none; } .hero__swap--dia .hero__swap-word.is-sweeping { animation: none; } } .hero__text { font-size: clamp(1.05rem, 1.35vw, 1.18rem); color: var(--on-dark-dim); max-width: 50ch; margin-top: 22px; } .hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 34px; } .stars { display: flex; gap: 2px; color: var(--amber); } .stars svg { width: 16px; height: 16px; } /* Nicht vergebener Stern – bei den wenigen 4-Sterne-Stimmen. */ .stars svg.is-empty { color: var(--gray-300); } /* --------------------------------------------- Handschriftliche Notiz */ /* Liegt über dem Motiv, im unteren Drittel links der Personengruppe – weit genug vom Google-Siegel entfernt, das rechts außen steht. Der Schatten hält den Text auch über hellen Stellen des Luftbilds lesbar. */ .hero__hand { position: absolute; z-index: 4; right: clamp(300px, 34vw, 440px); bottom: clamp(118px, 13vw, 170px); margin: 0; font-family: var(--font-hand); font-size: clamp(25px, 2.5vw, 34px); font-weight: 600; line-height: 1.18; color: #fff; text-align: right; white-space: nowrap; transform: rotate(-5deg); transform-origin: right center; text-shadow: 0 1px 2px rgba(8, 23, 41, .5), 0 6px 22px rgba(8, 23, 41, .55); pointer-events: none; } /* Einspaltig sitzt das Motiv unten: Die Notiz rückt links daneben, auf Höhe des Google-Siegels – über der dunklen Arbeitskleidung, wo sie am besten lesbar ist. */ @media (max-width: 940px) { .hero__hand { right: auto; left: var(--gutter); bottom: clamp(38px, 13.5vw, 62px); text-align: left; transform-origin: left center; transform: rotate(-4deg); font-size: clamp(22px, 6vw, 26px); } } /* ------------------------------------------------------- Google-Siegel */ .hero__seal { position: absolute; z-index: 3; right: clamp(20px, 7vw, 120px); bottom: clamp(56px, 9vw, 120px); pointer-events: none; } .hero__seal img { width: clamp(124px, 12vw, 164px); height: auto; filter: drop-shadow(0 6px 14px rgba(8, 23, 41, .3)) drop-shadow(0 20px 40px rgba(8, 23, 41, .26)); } @media (max-width: 940px) { /* sitzt neben dem Motiv, unterhalb der Textspalte */ .hero__seal { right: var(--gutter); left: auto; bottom: clamp(26px, 7vw, 60px); } .hero__seal img { width: 112px; } } /* Schleier liegt unter dem Motiv: dunkelt nur das Luftbild, nicht die Personen */ .hero__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; border-bottom-right-radius: var(--hero-corner); background: linear-gradient(100deg, rgba(15, 37, 68, .96) 0%, rgba(15, 37, 68, .92) 30%, rgba(15, 37, 68, .68) 52%, rgba(15, 37, 68, .18) 76%, rgba(15, 37, 68, 0) 92%); } @media (max-width: 940px) { .hero__veil { background: linear-gradient(180deg, rgba(15, 37, 68, .95) 0%, rgba(15, 37, 68, .85) 42%, rgba(15, 37, 68, .25) 72%, rgba(15, 37, 68, 0) 100%); } } /* ============================================================== TRUSTBAR */ .trustbar { position: relative; z-index: 2; background: var(--bg); padding-block: 30px 40px; } .trustbar__inner { display: flex; align-items: center; justify-content: center; gap: clamp(22px, 3.4vw, 52px); flex-wrap: wrap; } .trustbar__label { font-size: 15px; color: var(--text-mute); } .trustbar__item { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 15px; font-weight: 500; color: var(--text-dim); } .trustbar__item svg { width: 19px; height: 19px; color: var(--blue); } /* Ab hier wird der Einzeiler zu eng: Label und Hinweis rücken über bzw. unter das Karussell, damit die Logos ihre volle Breite behalten. */ @media (max-width: 1100px) { .trustbar__inner { flex-direction: column; gap: 18px; } } /* ----------------------------------------------------- Hersteller-Logos */ /* Spaltenweises Karussell: jede Spalte zeigt ein Logo und wechselt versetzt zur nächsten Marke. --lh steuert je Logo die optische Höhe, weil reine Schriftzüge (Hikvision, Avigilon) sonst neben kompakten Marken (Axis, Dahua) zu groß wirken. */ .logos { --lc-col-w: 168px; --lc-col-h: 64px; --lc-scale: 1; display: flex; align-items: center; justify-content: center; gap: clamp(8px, 1.6vw, 24px); } .logos__col { position: relative; flex: 0 0 auto; width: var(--lc-col-w); height: var(--lc-col-h); overflow: hidden; } .logos__slot { position: absolute; inset: 0; display: grid; place-items: center; will-change: transform, opacity, filter; } .logos img { width: auto; height: calc(var(--lh, 28px) * var(--lc-scale)); max-width: 100%; object-fit: contain; opacity: .92; } /* Ein- und Ausblendung einer Spalte */ @keyframes logo-in { from { opacity: 0; transform: translateY(16%) scale(.96); filter: blur(7px); } to { opacity: 1; transform: none; filter: blur(0); } } @keyframes logo-out { from { opacity: 1; transform: none; filter: blur(0); } to { opacity: 0; transform: translateY(-26%); filter: blur(6px); } } .logos__slot--in { animation: logo-in .55s cubic-bezier(.16, 1, .3, 1) both; } .logos__slot--out { animation: logo-out .32s cubic-bezier(.4, 0, 1, 1) both; } /* Statische Liste: sichtbar ohne JavaScript und bei reduzierter Bewegung */ .logos__fallback { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(20px, 3.6vw, 46px); list-style: none; margin: 0; padding: 0; } .logos.is-live .logos__fallback { display: none; } @media (max-width: 1100px) { .logos { --lc-col-w: 160px; } } @media (max-width: 720px) { .logos { --lc-col-w: 144px; --lc-col-h: 58px; --lc-scale: .92; } } @media (max-width: 420px) { .logos { --lc-col-w: 130px; --lc-col-h: 52px; --lc-scale: .84; gap: 8px; } } @media (prefers-reduced-motion: reduce) { .logos__slot--in, .logos__slot--out { animation: none; } } /* ================================================================ FUNNEL */ .funnel { position: relative; display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); background: var(--white); border-radius: var(--r-2xl); box-shadow: var(--shadow); max-width: 1060px; margin-inline: auto; overflow: hidden; } @media (max-width: 900px) { .funnel { grid-template-columns: 1fr; } } /* Linke Spalte: was den Interessenten erwartet – bleibt über alle Schritte stehen */ .funnel__aside { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: clamp(26px, 3vw, 42px); background: radial-gradient(120% 80% at 0% 0%, rgba(43, 81, 136, .55), transparent 60%), var(--navy); color: var(--on-dark-dim); } /* Die Überschrift stand mal als h2 hier, jetzt als h3 – der Selektor greift beide, sonst fällt sie beim nächsten Wechsel wieder auf die dunkle Standardfarbe zurück und verschwindet auf der Navy-Fläche. */ .funnel__aside :is(h2, h3) { font-size: clamp(1.45rem, 2vw, 1.75rem); color: #fff; margin-bottom: 10px; } .funnel__aside > .funnel__aside-top > p { font-size: 15.5px; color: var(--on-dark-dim); margin-bottom: 26px; } .funnel__list { display: grid; gap: 15px; } .funnel__list li { display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; line-height: 1.45; color: #fff; } .funnel__list svg { width: 19px; height: 19px; flex: none; margin-top: 2px; color: var(--sky); } .funnel__quote { margin: 0; padding: 20px; background: rgba(255, 255, 255, .07); border-radius: var(--r-lg); } .funnel__quote .stars { margin-bottom: 10px; } .funnel__quote .stars svg { width: 14px; height: 14px; } .funnel__quote blockquote { margin: 0 0 10px; font-size: 14.5px; line-height: 1.55; color: #fff; } .funnel__quote figcaption { font-size: 13px; color: var(--on-dark-mute); } @media (max-width: 900px) { /* kompakter, damit die erste Frage ohne langes Scrollen sichtbar ist */ .funnel__aside { gap: 0; padding: 22px var(--gutter) 24px; } .funnel__quote { display: none; } .funnel__aside :is(h2, h3) { font-size: 1.3rem; margin-bottom: 6px; } .funnel__aside > .funnel__aside-top > p { font-size: 14.5px; margin-bottom: 16px; } .funnel__list { grid-template-columns: 1fr 1fr; gap: 9px 18px; } .funnel__list li { font-size: 14px; line-height: 1.35; } .funnel__list svg { width: 16px; height: 16px; margin-top: 1px; } } @media (max-width: 560px) { .funnel__list { grid-template-columns: 1fr; gap: 8px; } } /* Rechte Spalte: die eigentlichen Schritte */ .funnel__main { padding: clamp(20px, 3.2vw, 44px); min-width: 0; } /* Fortschrittsbalken */ .funnel__bar { height: 5px; background: var(--gray-200); border-radius: var(--r-pill); overflow: hidden; margin-bottom: 16px; } .funnel__bar-fill { height: 100%; width: 20%; background: var(--blue); border-radius: var(--r-pill); transition: width .5s var(--ease); } .funnel__meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: clamp(22px, 3vw, 34px); min-height: 34px; } .funnel__back { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 7px 10px; background: none; border: 1.5px solid var(--line); border-radius: var(--r-pill); font-family: var(--font-display); font-size: 14.5px; font-weight: 500; color: var(--text-dim); cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease); } .funnel__back svg { width: 15px; height: 15px; } .funnel__back:hover { border-color: var(--line-strong); color: var(--text); } .funnel__count { font-size: 14.5px; color: var(--text-mute); margin-left: auto; } /* Schritte */ .fstep { display: none; } .fstep.is-active { display: block; animation: fstepIn .45s var(--ease); } @keyframes fstepIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .funnel__head { margin-bottom: clamp(20px, 2.6vw, 28px); } .funnel__head h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: 8px; } .funnel__head p { font-size: 16px; color: var(--text-dim); margin: 0; } .funnel__badge { display: inline-block; font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--blue); background: var(--blue-soft); padding: 6px 14px; border-radius: var(--r-pill); margin-bottom: 14px; } /* Kachel-Auswahl mit Icons */ .tiles { display: grid; /* 2x2 statt einer Viererreihe: in der schmaleren Spalte bleiben die Beschriftungen sonst nicht einzeilig */ grid-template-columns: repeat(2, 1fr); gap: 14px; } .tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 16px 20px; background: var(--white); border: 2px solid var(--line); border-radius: var(--r-lg); cursor: pointer; text-align: center; transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); } .tile img { width: 78px; height: 78px; object-fit: contain; margin-bottom: 6px; } .tile__label { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--text); line-height: 1.25; /* "Mehrfamilienhaus" sprengt sonst die schmale Spalte */ hyphens: auto; overflow-wrap: anywhere; } .tile__hint { font-size: 13px; color: var(--text-mute); line-height: 1.35; } .tile:hover { border-color: var(--blue); transform: translateY(-3px); box-shadow: var(--shadow-sm); } .tile.is-active { border-color: var(--blue); background: var(--blue-soft); } @media (max-width: 760px) { .tiles { gap: 10px; } .tile { padding: 16px 12px 14px; } .tile img { width: 58px; height: 58px; } .tile__label { font-size: 14.5px; } .tile__hint { font-size: 12px; } } /* Auf dem Handy volle Breite und horizontal: kein Umbruch in den Beschriftungen und deutlich größere Tippfläche. Grid, weil Label und Hint eigene Kinder sind und rechts vom Icon untereinander stehen sollen. */ @media (max-width: 620px) { .tiles { grid-template-columns: 1fr; gap: 10px; } .tile { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon label" "icon hint"; align-content: center; column-gap: 15px; row-gap: 2px; text-align: left; padding: 13px 16px; } .tile img { grid-area: icon; width: 52px; height: 52px; margin-bottom: 0; align-self: center; } .tile__label { grid-area: label; font-size: 16px; align-self: end; } .tile__hint { grid-area: hint; font-size: 13px; align-self: start; } } /* Listen-Auswahl mit Illustration */ .fstep__split { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; } @media (max-width: 700px) { .fstep__split { grid-template-columns: 1fr; gap: 20px; } .fstep__illu { display: none; } } .fstep__illu { width: 100%; height: auto; object-fit: contain; } .opts { display: grid; gap: 10px; } .opt { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 17px 20px; background: var(--white); border: 2px solid var(--line); border-radius: var(--r); cursor: pointer; text-align: left; transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease); } .opt svg { width: 18px; height: 18px; color: var(--gray-500); flex: none; transition: transform .2s var(--ease), color .2s var(--ease); } .opt__label { font-family: var(--font-display); font-size: 16.5px; font-weight: 600; color: var(--text); } .opt__hint { font-size: 14px; color: var(--text-mute); } .opt:hover { border-color: var(--blue); transform: translateX(3px); } .opt:hover svg { color: var(--blue); transform: translateX(3px); } .opt.is-active { border-color: var(--blue); background: var(--blue-soft); } /* PLZ */ .plz { display: grid; gap: 12px; max-width: 340px; } .plz input { width: 100%; padding: 16px 18px; font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: .12em; text-align: center; background: var(--white); border: 2px solid var(--line-strong); border-radius: var(--r); color: var(--text); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .plz input::placeholder { letter-spacing: normal; font-weight: 400; font-size: 17px; color: var(--text-mute); } .plz input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(11, 99, 214, .14); } .plz input.is-error { border-color: var(--danger); } .plz__error { font-size: 14px; color: var(--danger); margin: 0; } /* ------------------------------------------------------- Auswertung */ .fstep--analyse.is-active { display: grid; place-items: center; } .analyse { text-align: center; padding: clamp(20px, 4vw, 44px) 0; max-width: 440px; } .analyse h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); margin-bottom: 24px; } .analyse__ring { position: relative; width: 120px; height: 120px; margin: 0 auto 28px; color: var(--blue); } /* nur der Ring wird gedreht – das Schild-SVG darin ausdrücklich nicht */ .analyse__ring > svg:not(.analyse__shield) { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .analyse__track { fill: none; stroke: var(--gray-200); stroke-width: 6; } .analyse__arc { fill: none; stroke: var(--blue); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 327; /* 2πr bei r=52 */ stroke-dashoffset: 327; animation: analyseArc 3s var(--ease) forwards; } @keyframes analyseArc { to { stroke-dashoffset: 40; } } /* sanfter Puls hinter dem Ring */ .analyse__dot { position: absolute; inset: 12px; border-radius: 50%; background: var(--blue-soft); animation: analysePulse 2s ease-in-out infinite; } @keyframes analysePulse { 0%, 100% { transform: scale(.88); opacity: .55; } 50% { transform: scale(1); opacity: .9; } } .analyse__shield { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); color: var(--blue); } .analyse__list { display: grid; gap: 12px; text-align: left; } .analyse__list li { display: flex; align-items: center; gap: 12px; padding-left: 2px; font-size: 16px; color: var(--text-mute); opacity: .45; transition: opacity .4s var(--ease), color .4s var(--ease); } /* Punkt bzw. Haken vor jeder Zeile */ .analyse__list li::before { content: ''; width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2px solid var(--gray-300); transition: background-color .35s var(--ease), border-color .35s var(--ease); } .analyse__list li.is-running { opacity: 1; color: var(--text); } .analyse__list li.is-running::before { border-color: var(--blue); border-right-color: transparent; animation: analyseSpin .8s linear infinite; } @keyframes analyseSpin { to { transform: rotate(360deg); } } .analyse__list li.is-done { opacity: 1; color: var(--text); } .analyse__list li.is-done::before { background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat; border-color: var(--blue); animation: none; } /* ------------------------------------------------------- Kontaktdaten */ .funnel__form { display: grid; gap: 16px; } .field__opt { font-weight: 400; color: var(--text-mute); } /* ------------------------------------------------------------- Danke */ .fstep--danke.is-active { display: grid; place-items: center; } .danke { text-align: center; max-width: 520px; padding: clamp(12px, 3vw, 28px) 0; } .danke > img { width: 92px; height: 92px; object-fit: contain; margin: 0 auto 18px; } .danke h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); margin-bottom: 12px; } .danke > p { font-size: 16.5px; color: var(--text-dim); margin-bottom: 28px; } .danke__next { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: left; margin-bottom: 24px; } @media (max-width: 560px) { .danke__next { grid-template-columns: 1fr; } } .danke__step { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--gray-50); border-radius: var(--r-lg); } .danke__step img { width: 46px; height: 46px; object-fit: contain; flex: none; } .danke__step strong { display: block; font-family: var(--font-display); font-size: 15.5px; font-weight: 600; color: var(--text); } .danke__step span { font-size: 14px; color: var(--text-mute); } .danke__call { font-size: 16px; color: var(--text-dim); margin: 0; } .danke__call a { color: var(--blue); font-weight: 600; } /* ============================================================= LEISTUNGEN */ /* Eigener, kühl getönter Grund: Auf Weiß wären die hellen Karten kaum vom Hintergrund zu unterscheiden. Der Ton ist bewusst blaustichig und damit klar verschieden vom neutralen Grau der Sicherheitscheck-Sektion darüber. Die Fläche liegt als Pseudo-Element hinter der Sektion (z-index: -1). Als normaler Hintergrund der Sektion würde sie die Welle überdecken, mit der die Sektion darüber hier hineinschwingt – die steht im DOM davor und läge damit darunter. */ #leistungen { background: none; } #leistungen::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #EFF4FA 0%, #E8EFF8 100%); } .services__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); /* Gleich hohe Reihen: Alle Karten einer Reihe enden auf derselben Linie, obwohl die Beschreibungen unterschiedlich lang sind. */ grid-auto-rows: 1fr; gap: clamp(30px, 3vw, 46px) clamp(18px, 2.1vw, 30px); } /* --------------------------------------------------------------- Karte */ /* Karte und Textfeld füllen die Reihenhöhe, der Fuß wird nach unten gedrückt. Dadurch stehen Trennlinie und Link aller Karten einer Reihe auf gleicher Höhe, auch wenn die Beschreibungen unterschiedlich lang sind. */ .svc { position: relative; display: flex; flex-direction: column; } .svc__media { flex: none; /* Kleinere Karte, kleinere Rundung – dieselbe Diagonale. Oben rechts knapp, dort sitzt das Nummernschild. */ border-radius: clamp(26px, 3.2vw, 44px) var(--bild-klein) clamp(26px, 3.2vw, 44px) var(--bild-klein); overflow: hidden; background: var(--gray-100); aspect-ratio: 16 / 11; box-shadow: inset 0 0 0 1px rgba(15, 37, 68, .05); } .svc__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .svc:hover .svc__media img { transform: scale(1.04); } /* Die Textkarte liegt versetzt über dem Bild: links eingerückt, rechts weiter eingerückt, damit das Nummernschild daneben Platz hat. */ .svc__panel { position: relative; flex: 1; display: flex; flex-direction: column; margin: clamp(-78px, -5.4vw, -58px) clamp(24px, 2.6vw, 38px) 0 clamp(12px, 1.4vw, 20px); padding: clamp(20px, 1.8vw, 26px) clamp(22px, 2vw, 28px); background: var(--white); border-radius: var(--r-lg); box-shadow: 0 1px 2px rgba(15, 37, 68, .06), 0 14px 34px rgba(15, 37, 68, .1); transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .svc:hover .svc__panel { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(15, 37, 68, .07), 0 22px 46px rgba(15, 37, 68, .14); } /* Nummernschild an der oberen rechten Ecke, halb außerhalb der Karte. */ .svc__badge { position: absolute; top: -18px; right: clamp(-26px, -1.9vw, -18px); display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r); background: var(--navy); color: #fff; font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1; } /* Das Nummernschild ragt oben rechts in die Karte – die Überschrift hält Abstand, damit sie nicht darunterläuft. */ .svc__title { font-size: clamp(1.12rem, 1.3vw, 1.34rem); margin-bottom: 10px; padding-right: 30px; } .svc__text { font-size: 15px; color: var(--text-dim); line-height: 1.55; margin-bottom: 18px; } .svc__foot { margin: auto 0 0; /* drückt den Fuß an die Unterkante */ padding-top: 16px; border-top: 1px solid var(--line); } /* Kurze Beschriftung, daher wieder der normale Flex-Fluss wie bei den übrigen Links der Seite – samt Pfeil, der beim Überfahren nachrückt. */ .svc .link-under { font-size: 15px; } .services__dots { display: none; } /* Fünf Leistungen füllen die letzte Reihe nicht. Statt die übrigen Karten links kleben zu lassen, rücken sie in die Mitte. Der Kniff: Das Raster bekommt doppelt so viele, halb so breite Spalten, jede Karte belegt zwei davon – und die letzte Reihe beginnt eine halbe Spalte weiter rechts. Die Karten bleiben dabei exakt gleich breit, weil der Zugewinn aus der halben Spalte genau den wegfallenden Abstand ausgleicht: 2·(B−5A)/6 + A ist dasselbe wie (B−2A)/3. Kommt eine sechste Leistung zurück, greift die Regel von selbst nicht mehr sichtbar – bei voller letzter Reihe gibt es nichts zu zentrieren. */ @media (min-width: 1081px) { .services__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .services__grid > .svc { grid-column: span 2; } .services__grid > .svc:nth-child(4) { grid-column: 2 / span 2; } } /* Drei Spalten würden hier zu schmal – darum zwei, mit entsprechend mehr Versatz der Textkarte. Dieselbe Rechnung wie oben, nur mit vier statt sechs Spalten: Hier bleibt die fünfte Karte allein übrig. */ @media (max-width: 1080px) and (min-width: 861px) { .services__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 24px; } .services__grid > .svc { grid-column: span 2; } .services__grid > .svc:nth-child(5) { grid-column: 2 / span 2; } .svc__panel { margin: -78px clamp(30px, 4vw, 46px) 0 clamp(16px, 2vw, 26px); } .svc__badge { right: clamp(-30px, -2.4vw, -22px); } } /* ------------------------------------------------------- Wischreihe */ /* Vier Karten untereinander wären auf dem Handy eine sehr lange Spalte. Stattdessen eine Reihe zum Wischen mit Einrastpunkten – gewischt wird nativ, Schwung und Einrasten kommen vom Browser. */ @media (max-width: 860px) { .services { position: relative; } .services__grid { display: flex; grid-template-columns: none; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; /* Läuft über die Seitenränder hinaus, damit die nächste Karte angeschnitten sichtbar bleibt. */ margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); padding-block: 4px 10px; } .services__grid::-webkit-scrollbar { display: none; } .svc { flex: 0 0 82%; max-width: 340px; /* Kein scroll-snap-stop: so lässt sich mit Schwung über mehrere Karten wischen, statt bei jeder einzeln hängenzubleiben. */ scroll-snap-align: center; } .svc:hover .svc__media img { transform: none; } .svc:hover .svc__panel { transform: none; } .svc__panel { margin: -64px 26px 0 14px; } .svc__badge { right: -18px; width: 48px; height: 48px; font-size: 18px; } .services__dots { display: flex; justify-content: center; gap: 7px; margin-top: 18px; } .services__dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--gray-300); transition: background-color .25s var(--ease), width .25s var(--ease); } .services__dots span.is-active { width: 22px; border-radius: var(--r-pill); background: var(--blue); } } @media (prefers-reduced-motion: reduce) { .svc__media img, .svc__panel { transition-duration: .01ms; } } /* ====================================================== NEUE BAUSTEINE */ /* Leitsatz zwischen zwei Absätzen – trägt die Aussage, ohne eine Überschrift zu sein. */ .claim { font-family: var(--font-display); font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 600; color: var(--text); margin: 22px 0; } .claim--on-dark { color: var(--sky); } /* Abschluss einer Sektion: der Button, mittig. Die Spalte samt gap bleibt – der Block hat schon einmal einen Satz darüber getragen und wird es womöglich wieder. */ .sec-foot { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: clamp(32px, 4vw, 48px); text-align: center; } /* Vier Säulen unter „Über uns" */ .pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(16px, 2vw, 24px); margin-top: clamp(40px, 5vw, 64px); } .pillar { padding: clamp(22px, 2vw, 28px); background: var(--white); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); } .pillar__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-pill); background: var(--blue-soft); color: var(--blue); margin-bottom: 16px; } .pillar__icon svg { width: 20px; height: 20px; } .pillar h3 { font-size: 1.1rem; margin-bottom: 8px; } .pillar p { font-size: 15.5px; color: var(--text-dim); line-height: 1.5; margin: 0; } /* Sechs Technik-Kacheln mit Icon */ .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(16px, 2vw, 24px); } /* Vier Kacheln gehen im Standardraster nicht auf: Bei der Breite des Textblocks passen drei in eine Zeile, die vierte steht allein darunter. Zwei mal zwei wirkt geordnet und gibt den Karten mehr Platz. Erst ab 900 px nötig – darunter legt auto-fit von selbst zwei oder eine Spalte, und zwei Karten nebeneinander wären auf dem Handy zu schmal. */ @media (min-width: 900px) { .features--zweispaltig { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Fünf Schritte, drei Spalten – drei oben, zwei darunter. Festgelegt statt dem Automatikraster überlassen: Das zählt aus, wie viele Karten in die Breite passen, und bei etwas mehr Platz werden daraus vier Spalten. Dann stünde der letzte Schritt allein in der zweiten Zeile. */ .features--dreispaltig { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .feature { padding: clamp(24px, 2.2vw, 32px); background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .feature__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--r); background: var(--blue-soft); color: var(--blue); margin-bottom: 18px; } .feature__icon svg { width: 24px; height: 24px; } /* Herstellerlogo statt Icon. Feste Höhe, damit die beiden Marken gleich stark wirken – die Dateien haben unterschiedliche Seitenverhältnisse. Doppelt geschrieben, weil die allgemeine Regel .feature p weiter unten margin: 0 setzt und mit ihrer Element-Komponente sonst gewinnt. */ .feature .feature__marke { margin: 0 0 22px; line-height: 1; } .feature .feature__marke img { width: auto; height: 26px; } .feature h3 { font-size: 1.15rem; margin-bottom: 10px; } .feature p { font-size: 15.5px; color: var(--text-dim); line-height: 1.55; margin: 0; } /* Argumente in zwei Spalten, ohne Kastenoptik */ .argline { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px clamp(20px, 3vw, 40px); list-style: none; margin: 0; padding: 0; } .argline li { display: flex; align-items: flex-start; gap: 11px; font-family: var(--font-display); font-size: 16.5px; font-weight: 500; color: var(--text); } .argline svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--blue); } /* Bewertung über den Kundenstimmen */ .rating-line { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; } .rating-line .stars svg { width: 20px; height: 20px; } .rating-line strong { font-family: var(--font-display); font-size: 1.25rem; color: var(--text); } /* Anzahl der Bewertungen – steht neben der Note, bleibt aber zurückhaltend. */ .rating-line__count { font-size: 15px; color: var(--text-mute); } @media (max-width: 460px) { .rating-line { flex-wrap: wrap; justify-content: center; gap: 6px 10px; } } /* Verweis auf das Google-Profil unter den Laufbändern. */ .tst__quelle { margin: 26px 0 0; text-align: center; font-size: 15px; } .tst__quelle a { color: var(--blue); text-decoration: none; border-bottom: 1px solid rgba(11, 99, 214, .3); padding-bottom: 1px; transition: border-color .2s var(--ease); } .tst__quelle a:hover { border-bottom-color: var(--blue); } /* Städtezeile unter der Überschrift der Einsatzgebiete */ /* Abschluss-Sektion */ .closing { text-align: center; } .closing h2 { max-width: 22ch; margin-inline: auto; } .closing .lede { margin-inline: auto; } .closing .btn { margin-top: 8px; } .closing__note { margin-top: 14px; font-size: 14.5px; color: var(--on-dark-mute, rgba(255, 255, 255, .68)); } /* Rechtliches im Fußbereich */ .footer__legal { display: flex; flex-wrap: wrap; gap: 6px 20px; } /* Rebranding: Wer noch den alten Firmennamen sucht, soll ihn hier wiederfinden. */ /* Kein opacity mehr: Es senkte den Kontrast auf 4,20:1 und fiel damit unter die Norm – ausgerechnet die Zeile, die den alten Firmennamen trägt und drei Monate lang gelesen werden soll. Jetzt eine eigene Farbe, 6,22:1. Der Elternselektor muss mit: .footer__about p setzt weiter unten Farbe und Schriftgröße und gewinnt sonst über seine Element-Komponente. */ .footer__about .footer__former { margin-top: 10px; font-size: 14px; color: var(--on-dark-mute); } /* ============================================================ SPLIT */ .split { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: clamp(32px, 5vw, 68px); align-items: center; } .split--reverse .split__media { order: 2; } @media (max-width: 800px) { .split--reverse .split__media { order: 0; } } /* Weiche blaue Kreise hinter den Bildern: Sie geben der Fläche Tiefe, ohne Inhalt zu sein. Eine große Scheibe in Hellblau schaut außen hervor, eine kleinere in Himmelblau auf der Gegenseite – zwei Töne statt einem, das staffelt die Ebenen. Steht das Bild rechts, kippen beide mit – der Akzent zeigt immer nach außen, weg vom Text. `isolation` sorgt dafür, dass die Kreise hinter dem Bild liegen, aber nicht hinter dem Grund der Sektion verschwinden. */ .split__media { position: relative; isolation: isolate; } .split__media::before, .split__media::after { content: ""; position: absolute; z-index: -1; pointer-events: none; } /* Keine exakten Kreise: Je zwei Radien pro Ecke – die Schreibweise mit Schrägstrich trennt waagerecht und senkrecht – ergeben eine leicht aus der Form geratene Scheibe. Dazu ein Seitenverhältnis knapp neben 1. Zusammen wirkt es gezeichnet statt konstruiert. Jede der vier Formen ist eine eigene, damit sich über die Seite nichts wiederholt. */ .split__media::before { width: 62%; aspect-ratio: 1.06; left: -13%; top: -10%; background: var(--blue-soft); border-radius: 62% 38% 47% 53% / 49% 58% 42% 51%; } .split__media::after { width: 44%; aspect-ratio: .94; right: -9%; bottom: -12%; background: rgba(143, 216, 247, .42); border-radius: 43% 57% 62% 38% / 56% 44% 56% 44%; } .split--reverse .split__media::before { left: auto; right: -13%; border-radius: 39% 61% 54% 46% / 57% 48% 52% 43%; } .split--reverse .split__media::after { right: auto; left: -9%; border-radius: 58% 42% 37% 63% / 45% 57% 43% 55%; } /* Auf der blauen Markenfläche wären die Kreise unsichtbar – und das Bild ist dort freigestellt, es braucht keinen Hintergrund. */ .split__media--plain::before, .split__media--plain::after { display: none; } /* Sechseck wie in der Service-Sektion. Die Spitzen sitzen links und rechts, nicht oben und unten: Die Fotos sind quer, eine Spitze oben würde mitten durch die Gesichter schneiden. Die vier Ecken fallen dadurch weg, die volle Höhe in der Mitte bleibt. Der Schatten läuft als `drop-shadow` mit der Form mit – ein `box-shadow` säße weiterhin am rechteckigen Rahmen und würde vom Schnitt abgeschnitten. */ .split__media > img { width: 100%; /* Erst die eckige Fassung als Rückfall, dann die gerundete aus dem SVG-Schnittpfad im Dokumentkopf. */ clip-path: polygon(13% 0%, 87% 0%, 100% 50%, 87% 100%, 13% 100%, 0% 50%); clip-path: url(#hexa); filter: drop-shadow(0 4px 10px rgba(15, 37, 68, .09)) drop-shadow(0 18px 38px rgba(15, 37, 68, .1)); } /* ------------------------------------------- Listen mit Pfeil und Haken */ /* Pfeilliste: für Aufzählungen, die eher Argumente als Leistungen sind – der Pfeil zieht das Auge nach rechts in den Satz hinein. */ .arrowlist { display: grid; gap: 16px; margin-top: clamp(26px, 3vw, 34px); } .arrowlist li { display: flex; gap: 14px; align-items: flex-start; font-size: 16.5px; line-height: 1.5; color: var(--text-body); } .arrowlist svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--blue); } /* Hakenliste auf der Markenfläche: weißes Plättchen mit blauem Haken. */ .rule { height: 1px; margin: 24px 0 0; background: rgba(255, 255, 255, .28); max-width: 420px; } .ticklist { display: grid; gap: 15px; margin-top: 26px; } .ticklist li { display: flex; gap: 14px; align-items: flex-start; font-family: var(--font-display); font-size: 16.5px; font-weight: 600; line-height: 1.45; color: #fff; } .ticklist .tick { width: 24px; height: 24px; flex: none; margin-top: 1px; display: grid; place-items: center; border-radius: var(--r-sm); background: #fff; color: var(--blue); } .ticklist .tick svg { width: 13px; height: 13px; } /* Das Servicebild bringt seine Sechsecke schon mit und ist freigestellt: kein Rahmen, kein Radius, kein Schatten – und vor allem kein Schnitt. Der würde die Spitzen der eigenen Waben abschneiden. */ .split__media--plain > img { border-radius: 0; box-shadow: none; clip-path: none; filter: none; } .checklist { display: grid; gap: 15px; margin-top: 28px; } .checklist li { display: flex; gap: 13px; align-items: flex-start; font-size: 16.5px; line-height: 1.5; color: var(--text-body); } .checklist svg { width: 22px; height: 22px; flex: none; margin-top: 1px; color: var(--blue); } .section--dark .checklist li { color: var(--on-dark-dim); } .section--dark .checklist svg { color: var(--sky); } .float-stat { position: absolute; left: -20px; bottom: 26px; background: #fff; border-radius: var(--r-lg); padding: 18px 24px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 15px; } .float-stat__num { font-family: var(--font-display); font-size: 2rem; font-weight: 700; line-height: 1; color: var(--blue); letter-spacing: -.03em; } .float-stat__lbl { font-size: 13.5px; color: var(--text-dim); line-height: 1.35; max-width: 135px; } @media (max-width: 560px) { .float-stat { left: 12px; bottom: 12px; padding: 14px 18px; } } /* =============================================================== SYSTEME */ .systems { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; } .system { border-radius: var(--r-xl); padding: clamp(28px, 3.2vw, 42px); background: var(--white); box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .system:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .system__logo { height: 26px; width: auto; margin-bottom: 24px; filter: grayscale(1); opacity: .85; } .system h3 { font-size: 1.35rem; margin-bottom: 14px; } .system p { font-size: 16px; color: var(--text-dim); margin-bottom: 24px; } .system__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; } .tag { font-family: var(--font-display); font-size: 14px; font-weight: 500; padding: 6px 14px; border-radius: var(--r-pill); color: var(--text-dim); background: var(--gray-100); } /* ================================================================ STEPS */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); gap: 24px; } /* Fünf Schritte passen nur mit schmaleren Karten in eine Reihe. */ .steps--five { grid-template-columns: repeat(auto-fit, minmax(192px, 1fr)); gap: 16px; } .steps--five .step { padding: 26px 22px; } .steps--five .step h3 { font-size: 1.05rem; } .steps--five .step p { font-size: 15px; } .step { padding: 32px 28px; background: var(--white); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .step:hover { transform: translateY(-5px); box-shadow: var(--shadow); } .step__num { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--blue-soft); color: var(--blue); font-family: var(--font-display); font-size: 18px; font-weight: 700; margin-bottom: 20px; } .step h3 { margin-bottom: 10px; } .step p { font-size: 15.5px; color: var(--text-dim); line-height: 1.55; } /* ========================================================= ABLAUF (FLOW) */ /* Fünf Schritte nacheinander auf einer Bühne statt fünf Karten untereinander. Das spart auf dem Handy vier Kartenhöhen – der eigentliche Grund für diese Darstellung. */ .flow { --flow-dur: 4.6s; --flow-node: 44px; /* Durchmesser der Knoten */ --flow-clear: 11px; /* Abstand, den der Pfeil zum Kreis hält */ max-width: 900px; margin-inline: auto; } /* ------------------------------------------------------------- Schiene */ .flow__rail { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; list-style: none; margin: 0 0 clamp(20px, 2.6vw, 32px); padding: 0; } .flow__step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; } /* Gebogener Pfeil zum nächsten Schritt – als gelieferte Grafik. Er spannt von der Kante des linken Kreises bis zur Kante des rechten, beidseitig um --flow-clear eingerückt, berührt die Kreise also nicht. Die Breite ist ausdrücklich gesetzt und nicht über left + right aufgespannt: Ein ist ein ersetztes Element, bei beiden Werten zusammen gewinnt seine Eigenbreite. Die linke Kante dieses Listenpunkts liegt genau mittig zwischen den beiden Kreismitten – darauf wird zentriert. */ .flow__arrow { position: absolute; left: 0; width: calc(100% - var(--flow-node) - 2 * var(--flow-clear)); height: auto; /* Die Grafik ist 1,91:1 – der Bogen ist also deutlich höher als eine Linie. Er sitzt mittig auf der Höhe der Kreismitte. */ top: calc(var(--flow-node) / 2); transform: translate(-50%, -52%); /* Erst sichtbar, wenn der Schritt erreicht ist: Der Pfeil fährt aus der Richtung ein, aus der er kommt. */ opacity: 0; clip-path: inset(0 100% 0 0); transition: opacity .35s var(--ease), clip-path .6s var(--ease); } .flow__step.is-active .flow__arrow, .flow__step.is-done .flow__arrow { opacity: 1; clip-path: inset(0 0 0 0); } .flow__node { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: var(--r-pill); background: var(--white); box-shadow: inset 0 0 0 2px var(--line-strong); color: var(--text-mute); font-family: var(--font-display); font-size: 17px; font-weight: 700; cursor: pointer; transition: color .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease), transform .3s var(--ease); } .flow__num { position: relative; z-index: 1; } .flow__step.is-done .flow__node { background: var(--blue-soft); box-shadow: inset 0 0 0 2px var(--blue); color: var(--blue); } .flow__step.is-active .flow__node { background: var(--blue); box-shadow: inset 0 0 0 2px var(--blue), 0 6px 18px rgba(11, 99, 214, .32); color: #fff; transform: scale(1.08); } .flow__node:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; } /* Der Ring zeichnet die Standzeit des aktiven Schritts mit. */ .flow__ring { position: absolute; inset: -6px; border-radius: var(--r-pill); background: conic-gradient(var(--blue) var(--p, 0%), transparent 0); opacity: 0; transition: opacity .3s var(--ease); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); } .flow__step.is-active .flow__ring { opacity: 1; } .flow__label { font-family: var(--font-display); font-size: 14px; font-weight: 500; color: var(--text-mute); line-height: 1.3; transition: color .3s var(--ease); } .flow__step.is-active .flow__label { color: var(--text); font-weight: 600; } /* --------------------------------------------------------------- Bühne */ /* Alle Tafeln liegen im selben Rasterfeld: Die Bühne ist immer so hoch wie der längste Text und springt beim Wechsel nicht. */ .flow__stage { display: grid; background: var(--white); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); padding: clamp(22px, 2.4vw, 32px); text-align: center; } .flow__panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s linear .45s; } .flow__panel.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: .08s, .08s, 0s; } /* Icon über dem Schritt. Breite auto, Höhe fest – die Motive sind unterschiedlich breit, sollen aber gleich hoch stehen. */ .flow__panel-icon { display: block; height: clamp(56px, 6vw, 72px); width: auto; margin: 0 auto 14px; } .flow__panel-step { font-family: var(--font-display); font-size: 13.5px; font-weight: 600; color: var(--blue); margin-bottom: 8px; } .flow__panel h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); margin-bottom: 10px; } .flow__panel-text { font-size: 16.5px; color: var(--text-dim); line-height: 1.6; margin: 0 auto; max-width: 54ch; } /* ------------------------------------------------------------ Steuerung */ .flow__controls { display: flex; justify-content: center; margin-top: 12px; } .flow__toggle { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--text-mute); font-size: 14px; cursor: pointer; transition: color .25s var(--ease), background-color .25s var(--ease); } .flow__toggle:hover { color: var(--text); background: var(--white); } .flow__toggle svg { width: 15px; height: 15px; } .flow__icon-play { display: none; } .flow__toggle[aria-pressed="true"] .flow__icon-play { display: block; } .flow__toggle[aria-pressed="true"] .flow__icon-pause { display: none; } /* -------------------------------------------------- Ohne JavaScript */ /* main.js setzt .is-live. Fehlt das, stehen alle fünf Schritte untereinander. */ .flow:not(.is-live) .flow__rail, .flow:not(.is-live) .flow__controls { display: none; } .flow:not(.is-live) .flow__stage { display: grid; gap: 22px; text-align: left; } .flow:not(.is-live) .flow__panel { grid-area: auto; opacity: 1; visibility: visible; transform: none; } @media (max-width: 700px) { .flow { --flow-node: 38px; --flow-clear: 7px; } .flow__rail { margin-bottom: 22px; } .flow__node { width: 38px; height: 38px; font-size: 15px; } .flow__label { font-size: 12px; } } /* Zwischen den Kreisen bleiben hier nur noch rund 20 px – der Pfeil wird entsprechend klein, behält aber sein Seitenverhältnis. */ @media (max-width: 560px) { .flow { --flow-clear: 4px; } } @media (max-width: 430px) { .flow__label { display: none; } } @media (prefers-reduced-motion: reduce) { .flow__panel, .flow__node, .flow__label { transition-duration: .01ms; } .flow__ring { display: none; } } /* ================================================================= USPs */ .usps { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 22px; } .usp { position: relative; border-radius: var(--r-xl); overflow: hidden; min-height: 330px; display: flex; align-items: flex-end; isolation: isolate; } .usp img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .usp::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(8, 23, 41, .94) 8%, rgba(8, 23, 41, .4) 55%, rgba(8, 23, 41, .05) 100%); } .usp:hover img { transform: scale(1.06); } .usp__body { padding: 28px 26px; } .usp h3 { margin-bottom: 8px; color: #fff; } .usp p { font-size: 15px; color: var(--on-dark-dim); margin: 0; line-height: 1.5; } /* ============================================================== ABOUT */ .about-quote { margin: 28px 0; padding: 24px 26px; background: var(--white); border-radius: var(--r-lg); border-left: 4px solid var(--blue); font-family: var(--font-display); font-size: clamp(1.08rem, 1.6vw, 1.3rem); font-weight: 500; line-height: 1.4; color: var(--navy); letter-spacing: -.01em; } /* ============================================================ TESTIMONIALS */ /* Zwei Laufbänder in Gegenrichtung. Jede Reihe trägt ihren Kartensatz doppelt; verschoben wird um genau eine Satzbreite, dann springt die Animation zurück – weil dort dieselben Karten stehen, ist der Sprung unsichtbar. Die halbe Lücke im Rechenweg gehört dazu: -50 % trifft die Mitte zwischen den beiden Sätzen, der Satz selbst ist aber um eine Lücke breiter. */ .marquee { --gap: clamp(16px, 1.8vw, 22px); display: grid; gap: var(--gap); /* Ausblenden an den Rändern – als Maske, damit es auf jedem Sektionshintergrund passt und keine Farbe nachgezogen werden muss. */ mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); } .marquee__row { overflow: hidden; } .marquee__track { display: flex; align-items: stretch; gap: var(--gap); width: max-content; animation: marquee var(--dur, 46s) linear infinite; will-change: transform; } .marquee__row--reverse .marquee__track { animation-direction: reverse; } /* Anhalten, solange jemand liest – aber nur mit echtem Zeigegerät. Auf einem Touchscreen bleibt :hover nach einer Berührung hängen, bis woanders hingetippt wird. Das Band stünde nach dem ersten Antippen dauerhaft still, ohne dass der Besucher wüsste warum. */ @media (hover: hover) { .marquee:hover .marquee__track { animation-play-state: paused; } } .marquee:focus-within .marquee__track { animation-play-state: paused; } @keyframes marquee { to { transform: translate3d(calc(-50% - var(--gap) / 2), 0, 0); } } /* Schmal: dieselbe Bewegung, nur mit der doppelten Zeit. Der Grund ist nicht das Tempo in Pixeln, sondern wie viel gleichzeitig zu sehen ist. Auf dem Desktop stehen gut drei Karten nebeneinander, bei 375 px ist es gut eine – dieselbe Dauer lässt eine Karte dort nur ein Drittel so lange im Bild. Gemessen: 6,5 Sekunden gegenüber 18 auf dem Desktop, während der Text im Schnitt 13 Sekunden zum Lesen braucht. Verdoppeln bringt die Reihen auf 116 und 136 Sekunden, also rund 13 und 15 Sekunden je Karte. Das Band läuft dabei mit etwa 27 Pixeln je Sekunde sichtbar weiter – langsam, aber nicht stehend. */ @media (max-width: 900px) { .marquee__track { animation-duration: calc(var(--dur, 46s) * 2); } } /* Ohne Bewegung: die Reihen stehen still und lassen sich schieben. */ @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; width: 100%; overflow-x: auto; scrollbar-width: none; } .marquee__track::-webkit-scrollbar { display: none; } } .tst__card { flex: 0 0 min(360px, 80vw); background: var(--white); border-radius: var(--r-xl); padding: 26px 24px; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); } .tst__card .stars { margin-bottom: 14px; } .tst__card blockquote { margin: 0 0 20px; font-size: 15.5px; color: var(--text-body); line-height: 1.6; flex: 1; } .tst__author { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); } /* Statt der Initialen steht das Google-G in den Karten: Es sagt auf einen Blick, woher die Stimme stammt. Weißer Grund mit feiner Linie, weil das Vierfarb-G auf getöntem Untergrund an Kontrast verliert. */ .tst__avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--white); border: 1px solid var(--line); } .tst__avatar img { width: 20px; height: 20px; display: block; } .tst__name { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--navy); } .tst__meta { font-size: 14px; color: var(--text-mute); } .tst__nav { display: flex; gap: 10px; margin-top: 24px; justify-content: flex-end; } .tst__btn { width: 48px; height: 48px; display: grid; place-items: center; background: var(--white); border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); color: var(--navy); cursor: pointer; transition: background-color .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease); } .tst__btn:hover { background: var(--navy); border-color: var(--navy); color: #fff; } .tst__btn svg { width: 19px; height: 19px; } /* ============================================================== REGIONEN */ /* ------------------------------------------------------------- Karte */ /* Umriss des Saarlands aus den amtlichen Grenzdaten, auf die Fläche projiziert und als Pfad gespeichert – kein Bild, dadurch in jeder Größe scharf und in unseren Farben. Die Orte sind Verweise, nicht nur Punkte. */ .karte { max-width: 820px; margin-inline: auto; } .karte svg { width: 100%; height: auto; overflow: visible; } .karte__land { fill: var(--blue-soft); stroke: var(--blue); stroke-width: 1.6; stroke-linejoin: round; } .karte__ort { cursor: pointer; } .karte__halo { fill: var(--blue); opacity: .17; transform-box: fill-box; transform-origin: center; transition: transform .3s var(--ease), opacity .3s var(--ease); } .karte__punkt { fill: var(--navy); stroke: #fff; stroke-width: 2; transition: fill .3s var(--ease); } .karte__name { font-family: var(--font-display); font-size: 16px; font-weight: 600; fill: var(--navy); /* Heller Rand um die Schrift: Manche Namen liegen auf der Grenzlinie oder auf der Fläche – so bleiben sie überall lesbar, ohne Kästchen darunter. */ stroke: #fff; stroke-width: 3.5; stroke-linejoin: round; paint-order: stroke fill; transition: fill .3s var(--ease); } .karte__ort:hover .karte__halo, .karte__ort:focus-visible .karte__halo { transform: scale(1.5); opacity: .2; } .karte__ort:hover .karte__punkt, .karte__ort:focus-visible .karte__punkt { fill: var(--blue); } .karte__ort:hover .karte__name, .karte__ort:focus-visible .karte__name { fill: var(--blue); } .karte__ort:focus { outline: none; } .karte__ort:focus-visible .karte__punkt { stroke: var(--blue); } /* Auf schmalen Geräten stehen neun Ortsnamen zu dicht beieinander – lesbar wären sie nur in einer Größe, in der sie sich überlagern. Deshalb bleiben dort nur die Punkte, und die Karte nutzt den freigewordenen Platz. Aus demselben Grund entfallen dort die Nachbarn: Sie stehen außen am Rahmen und würden beim Heranzoomen angeschnitten. Die Karte zeigt dort das Gebiet, nicht die einzelnen Orte – die stehen im Klappmenü „Einsatzgebiete". Die Werte sind gerechnet, nicht geschätzt: Der Rahmen ist 855 Einheiten breit (-150 bis 705), das Land 520 (0 bis 520). Mit 20 Einheiten Luft je Seite soll ein Fenster von 560 Einheiten die Spaltenbreite füllen – 855/560 = 153 %. Der Versatz bringt den linken Fensterrand (-20) an die Spaltenkante: (-20 +150)/855 × 153 % = 23,2 %. */ @media (max-width: 760px) { .karte__name, .karte__nachbar { display: none; } /* Fünf Orte behalten ihren Namen: gut über die Fläche verteilt, und ihre Beschriftungen überlagern sich nicht. Die Schrift muss dabei deutlich größer ausfallen – bei rund 0,6 Bildschirmpunkten je SVG-Einheit wären die 16 Einheiten der Desktop-Fassung nur 10 px hoch. */ .karte__ort--wichtig .karte__name { display: block; font-size: 26px; stroke-width: 5.5; } /* „St. Wendel“ steht rechts vom Punkt und liefe in der größeren Schrift aus dem Bild. Auf dem Handy klappt die Beschriftung deshalb nach links. */ .karte__ort--kipp .karte__name { text-anchor: end; transform: translateX(-30px); } /* max-width: none ist nötig – die globale Regel img, svg { max-width: 100% } würde die Vergrößerung sonst wieder auf die Spaltenbreite stutzen, der negative Rand bliebe aber stehen und schöbe die Karte nach links. */ .karte svg { width: 153%; max-width: none; margin-left: -23.2%; } .karte__punkt { r: 9; } .karte__halo { r: 19; } } @media (prefers-reduced-motion: reduce) { .karte__halo, .karte__punkt, .karte__name { transition-duration: .01ms; } } /* ================================================================== FAQ */ .faq { display: grid; gap: 12px; } .faq__item { border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow-sm); overflow: hidden; transition: box-shadow .3s var(--ease); } .faq__item.is-open { box-shadow: var(--shadow); } .faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px; background: none; border: 0; text-align: left; cursor: pointer; font-family: var(--font-display); font-size: 17.5px; font-weight: 600; color: var(--text); line-height: 1.35; letter-spacing: -.01em; } .faq__icon { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--gray-100); color: var(--navy); transition: transform .35s var(--ease), background-color .3s var(--ease), color .3s var(--ease); } .faq__icon svg { width: 14px; height: 14px; } .faq__item.is-open .faq__icon { transform: rotate(45deg); background: var(--blue); color: #fff; } .faq__a { max-height: 0; overflow: hidden; transition: max-height .42s var(--ease); } .faq__a > div { padding: 0 26px 26px; font-size: 16.5px; color: var(--text-dim); line-height: 1.6; } .form { display: grid; gap: 16px; } .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } } .field { display: grid; gap: 7px; } .field label { font-family: var(--font-display); font-size: 14.5px; font-weight: 600; color: var(--text); } .field input, .field select, .field textarea { width: 100%; padding: 14px 16px; background: var(--white); border: 1.5px solid var(--line-strong); border-radius: var(--r); color: var(--text); font-size: 16px; transition: border-color .22s var(--ease), box-shadow .22s var(--ease); } .field textarea { resize: vertical; min-height: 104px; } .field input::placeholder, .field textarea::placeholder { color: var(--text-mute); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(11, 99, 214, .14); } .field select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6883' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 44px; } .consent { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: var(--text-dim); line-height: 1.45; } .consent input { width: 19px; height: 19px; flex: none; margin-top: 2px; accent-color: var(--blue); } .consent a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; } .form__note { font-size: 13.5px; color: var(--text-mute); text-align: center; margin: 0; } .form-success { display: none; padding: 28px; background: #F0FAF3; border-radius: var(--r-lg); text-align: center; } .form-success svg { width: 44px; height: 44px; color: var(--green); margin: 0 auto 14px; } .form-success h3 { font-size: 1.2rem; margin-bottom: 8px; } .form-success p { font-size: 15.5px; color: var(--text-dim); margin: 0; } .is-sent .form { display: none; } .is-sent .form-success { display: block; } /* ======================================================== RÜCKRUF-DIALOG */ /* Natives