/* ==========================================================================
Bertsch Marketing – Basis-Stylesheet (Design-Grundsystem)
Dokumentation: docs/DESIGN-SYSTEM.md
Inhalt
1. Design Tokens (Custom Properties)
2. Reset / Basis
3. Typografie
4. Layout: Container, Sections, Utilities
5. Buttons
6. Animations-Klassen (vorbereitet, nicht aktiv)
7. Responsive Breakpoints
8. prefers-reduced-motion
9. Header / Navigation
10. Hero (Startseite)
11. Sektion 2: Ausgangssituation (.problem)
12. Sektion 3: Website-Komplettpaket (.package)
13. Sektion 4: Website-Service (.service)
14. Sektion 5: Spezialisierung Handwerk (.craft)
15. Sektion 6: Website-Designvorschauen (.designs)
16. Sektion 7: Ablauf / Timeline (.process)
17. Sektion 8: Persönliche Vorstellung / Vertrauen (.about)
18. Sektion 9: FAQ-Accordion (.faq)
19. Sektion 10: Abschluss / Kontakt (.contact)
20. Footer (.site-footer)
21. Rechtliche Unterseiten (.page-head, .legal)
22. Datenschutzerklärung (.legal-doc, .legal-toc)
23. Fehlerseite 404 (.notfound)
========================================================================== */
/* 1. Design Tokens
========================================================================== */
:root {
/* Corporate-Farben (verbindlich) */
--color-navy: #002b5d;
--color-primary: #3aa7ff;
--color-secondary: #1972bb;
--color-white: #ffffff;
/* Neutrale Töne: Hintergründe, Linien, Text */
--color-off-white: #f5f7fa;
--color-gray-100: #eceff4;
--color-gray-200: #dde2ea;
--color-gray-400: #98a2b3;
--color-gray-600: #566173;
--color-gray-900: #17202e;
/* Semantische Farbrollen */
--color-bg: var(--color-white);
--color-bg-alt: var(--color-off-white);
--color-bg-dark: var(--color-navy);
--color-text: var(--color-gray-900);
--color-text-muted: var(--color-gray-600);
--color-text-on-dark: var(--color-white);
--color-text-on-dark-muted: rgb(255 255 255 / 0.74);
--color-heading: var(--color-navy);
--color-link: var(--color-secondary);
--color-line: var(--color-gray-200);
--color-line-on-dark: rgb(255 255 255 / 0.18);
--color-focus: var(--color-secondary);
/* Typografie */
--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", sans-serif;
--fs-sm: 0.875rem;
--fs-base: 1rem;
--fs-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
--fs-h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
--fs-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
--fs-h2: clamp(1.75rem, 1.3rem + 2vw, 2.875rem);
--fs-h1: clamp(2.125rem, 1.4rem + 3.4vw, 4rem);
--lh-tight: 1.15;
--lh-snug: 1.3;
--lh-body: 1.6;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
/* Layout */
--container-max: 1350px;
--gutter: 20px;
--measure: 68ch; /* Lesbare Textbreite innerhalb breiter Layouts */
/* Spacing-System (4px-Basis) */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 3rem;
--space-8: 4rem;
--space-9: 6rem;
/* Section-Abstände (vertikal) */
--section-space: clamp(3.5rem, 2.5rem + 5vw, 7.5rem);
--section-space-tight: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
/* Formen */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--shadow-sm: 0 1px 2px rgb(0 43 93 / 0.06), 0 1px 3px rgb(0 43 93 / 0.08);
--shadow-md: 0 8px 24px rgb(0 43 93 / 0.1);
/* Bewegung */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--duration-fast: 160ms;
--duration-base: 280ms;
--duration-slow: 600ms;
--reveal-distance: 24px;
}
/* 2. Reset / Basis
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: var(--space-8);
}
body {
min-height: 100vh;
background-color: var(--color-bg);
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--fs-base);
font-weight: var(--fw-regular);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
height: auto;
}
input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
a {
color: var(--color-link);
text-underline-offset: 0.18em;
}
a:hover {
text-decoration-thickness: 2px;
}
:focus-visible {
outline: 3px solid var(--color-focus);
outline-offset: 3px;
}
::selection {
background-color: var(--color-primary);
color: var(--color-navy);
}
/* 3. Typografie
========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--color-heading);
font-weight: var(--fw-bold);
line-height: var(--lh-tight);
letter-spacing: -0.02em;
text-wrap: balance;
overflow-wrap: break-word;
}
h1 { font-size: var(--fs-h1); letter-spacing: -0.03em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); }
p {
overflow-wrap: break-word;
}
.lead {
font-size: var(--fs-lg);
line-height: var(--lh-snug);
color: var(--color-text-muted);
}
.eyebrow {
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-secondary);
}
.text-muted {
color: var(--color-text-muted);
}
.measure {
max-width: var(--measure);
}
/* 4. Layout: Container, Sections, Utilities
========================================================================== */
/* Container: begrenzt nur den Inhalt auf max. 1350px.
Hintergründe liegen auf der Section und laufen über die volle Breite. */
.container {
width: min(100% - 2 * var(--gutter), var(--container-max));
margin-inline: auto;
}
.section {
padding-block: var(--section-space);
background-color: var(--color-bg);
}
.section--tight {
padding-block: var(--section-space-tight);
}
.section--alt {
background-color: var(--color-bg-alt);
}
.section--dark {
--color-text: var(--color-text-on-dark);
--color-text-muted: var(--color-text-on-dark-muted);
--color-heading: var(--color-white);
--color-link: var(--color-primary);
--color-line: var(--color-line-on-dark);
--color-focus: var(--color-primary);
background-color: var(--color-bg-dark);
color: var(--color-text);
}
.section--dark .eyebrow {
color: var(--color-primary);
}
/* Wiederverwendbare Raster-Hilfen (Mobile First: eine Spalte) */
.grid {
display: grid;
gap: var(--space-5);
}
.stack > * + * {
margin-top: var(--stack-space, var(--space-4));
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
top: var(--space-2);
left: var(--space-2);
z-index: 1000;
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-sm);
background-color: var(--color-navy);
color: var(--color-white);
font-weight: var(--fw-semibold);
transform: translateY(-200%);
}
.skip-link:focus {
transform: translateY(0);
}
/* 5. Buttons
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: 48px; /* ausreichende Touch-Fläche */
padding: 0.75rem 1.5rem;
border: 2px solid transparent;
border-radius: var(--radius-md);
font-family: inherit;
font-size: var(--fs-base);
font-weight: var(--fw-semibold);
line-height: 1.2;
text-align: center;
text-wrap: balance; /* mehrzeilige Beschriftung ohne einzelnes Wort in der letzten Zeile */
text-decoration: none;
cursor: pointer;
transition:
background-color var(--duration-fast) ease,
border-color var(--duration-fast) ease,
color var(--duration-fast) ease,
box-shadow var(--duration-base) var(--ease-out),
transform var(--duration-base) var(--ease-out);
}
.btn:hover {
text-decoration: none;
}
/* Primär: Sekundärblau mit weißem Text (Kontrast ca. 5:1), Hover Dunkelblau.
Primärblau #3AA7FF ist wegen zu geringen Kontrasts zu Weiß (ca. 2,5:1)
nicht als Button-Hintergrund mit weißer Schrift vorgesehen. */
.btn--primary {
background-color: var(--color-secondary);
border-color: var(--color-secondary);
color: var(--color-white);
box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
background-color: var(--color-navy);
border-color: var(--color-navy);
color: var(--color-white);
box-shadow: var(--shadow-md);
}
/* Sekundär: zurückhaltende Outline-Variante */
.btn--secondary {
background-color: transparent;
border-color: var(--color-secondary);
color: var(--color-secondary);
}
.btn--secondary:hover {
background-color: var(--color-secondary);
color: var(--color-white);
}
/* Varianten auf dunklem Hintergrund */
.section--dark .btn--secondary {
border-color: rgb(255 255 255 / 0.55);
color: var(--color-white);
}
.section--dark .btn--secondary:hover {
background-color: var(--color-white);
border-color: var(--color-white);
color: var(--color-navy);
}
.section--dark .btn--primary:hover {
background-color: var(--color-white);
border-color: var(--color-white);
color: var(--color-navy);
}
.btn:active {
transform: translateY(1px);
}
.btn[disabled],
.btn[aria-disabled="true"] {
opacity: 0.55;
cursor: not-allowed;
box-shadow: none;
}
.btn-group {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
/* 6. Animations-Klassen (vorbereitet, noch nicht eingesetzt)
--------------------------------------------------------------------------
Verborgene Ausgangszustände gelten nur, wenn main.js später die Klasse
"js" auf setzt. Ohne JavaScript bleiben alle Inhalte sichtbar.
Sichtbar wird ein Element durch die Klasse "is-visible".
========================================================================== */
/* Dauerhafte Keyframe-Animationen (per Klasse manuell auslösbar) */
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slide-up {
from { opacity: 0; transform: translateY(var(--reveal-distance)); }
to { opacity: 1; transform: none; }
}
.anim-fade-in {
animation: fade-in var(--duration-slow) var(--ease-out) both;
}
.anim-slide-up {
animation: slide-up var(--duration-slow) var(--ease-out) both;
}
/* Scroll-Reveal: Zustand wird später per IntersectionObserver gesetzt */
.js .reveal {
opacity: 0;
transition:
opacity var(--duration-slow) var(--ease-out),
transform var(--duration-slow) var(--ease-out);
transition-delay: var(--reveal-delay, 0ms);
will-change: opacity, transform;
}
.js .reveal--slide-up {
transform: translateY(var(--reveal-distance));
}
.js .reveal.is-visible {
opacity: 1;
transform: none;
will-change: auto;
}
/* Leichter Bild-Zoom beim Hover (Wrapper beschneidet das Bild) */
.zoom-hover {
overflow: hidden;
border-radius: inherit;
}
.zoom-hover > img,
.zoom-hover > picture img {
transition: transform 700ms var(--ease-out);
}
@media (hover: hover) {
.zoom-hover:hover > img,
.zoom-hover:hover > picture img {
transform: scale(1.04);
}
}
/* Dezentes Anheben, z. B. für Cards */
.hover-lift {
transition:
transform var(--duration-base) var(--ease-out),
box-shadow var(--duration-base) var(--ease-out);
}
@media (hover: hover) {
.hover-lift:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.btn--primary:hover,
.btn--secondary:hover {
transform: translateY(-1px);
}
}
/* 7. Responsive Breakpoints (Mobile First)
--------------------------------------------------------------------------
Basis (bis 599px) Smartphone Gutter 20px
600px großes Phone Gutter 24px
768px Tablet Gutter 32px, Zweispalter möglich
1024px Laptop Gutter 40px
1280px Desktop Gutter 48px
1440px breit Container bleibt bei 1350px
Hinweis: Media Queries können keine Custom Properties nutzen, daher
stehen die Werte hier als Literale.
========================================================================== */
@media (min-width: 600px) {
:root { --gutter: 24px; }
}
@media (min-width: 768px) {
:root { --gutter: 32px; }
.grid--2,
.grid--3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid {
gap: var(--space-6);
}
}
@media (min-width: 1024px) {
:root { --gutter: 40px; }
.grid--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid--4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid--split {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: center;
gap: var(--space-8);
}
}
@media (min-width: 1280px) {
:root { --gutter: 48px; }
}
/* 8. prefers-reduced-motion
========================================================================== */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.js .reveal,
.js .reveal--slide-up {
opacity: 1;
transform: none;
}
.zoom-hover:hover > img,
.zoom-hover:hover > picture img,
.hover-lift:hover,
.btn:hover {
transform: none;
}
}
/* 9. Header / Navigation
--------------------------------------------------------------------------
Mobile First: bis 1279px Logo + Hamburger, Menü und CTA im Aufklapp-Panel.
Ab 1280px: Grid "1fr auto 1fr" – Logo links, Navigation exakt mittig,
CTA rechts. Die beiden äußeren Spalten sind gleich breit, dadurch wird die
Navigation nicht durch unterschiedlich breite Logo-/CTA-Bereiche verschoben.
Ohne JavaScript (Klasse "js" fehlt) bleibt das Menü sichtbar.
========================================================================== */
.site-header {
position: relative;
z-index: 100;
background-color: var(--color-white);
border-bottom: 1px solid var(--color-line);
}
.site-header__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
min-height: 76px;
}
/* Logo: Seitenverhältnis (1350 x 400) bleibt über height + width:auto erhalten */
.site-header__logo {
display: block;
flex: none;
line-height: 0;
}
.site-header__logo img {
width: auto;
height: 44px;
}
/* Hamburger-Button */
.nav-toggle {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
width: 48px;
height: 48px;
padding: 0;
border: 1px solid var(--color-line);
border-radius: 8px;
background-color: var(--color-white);
color: var(--color-navy);
cursor: pointer;
transition: border-color var(--duration-fast) ease;
}
.js .nav-toggle {
display: inline-flex;
}
.nav-toggle:hover {
border-color: var(--color-navy);
}
.nav-toggle__bar {
display: block;
width: 22px;
height: 2px;
border-radius: 2px;
background-color: currentColor;
transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-fast) ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* Menü-Panel (mobil/tablet) */
.site-menu {
flex-basis: 100%;
padding-bottom: var(--space-5);
}
.js .site-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
max-height: calc(100vh - 76px);
overflow-y: auto;
padding: var(--space-4) var(--gutter) var(--space-6);
background-color: var(--color-white);
border-top: 1px solid var(--color-line);
box-shadow: var(--shadow-md);
}
.js .site-menu.is-open {
display: block;
}
.site-nav__list {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
list-style: none;
}
.site-nav__link {
position: relative;
display: inline-block;
padding-block: 0.75rem;
color: var(--color-gray-900);
font-size: 1.125rem;
font-weight: var(--fw-medium);
line-height: 1.2;
text-decoration: none;
transition: color var(--duration-fast) ease;
}
/* Dezente Unterstreichung in Primärblau (Akzent) */
.site-nav__link::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0.4rem;
height: 2px;
border-radius: 2px;
background-color: var(--color-primary);
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--duration-base) var(--ease-out);
}
.site-nav__link:hover {
color: var(--color-navy);
text-decoration: none;
}
.site-nav__link:hover::after,
.site-nav__link[aria-current="page"]::after {
transform: scaleX(1);
}
.site-nav__link[aria-current="page"] {
color: var(--color-navy);
}
/* CTA-Button im Header (Wortlaut ist Standard-CTA der Website) */
.site-header__cta {
width: 100%;
min-height: 54px;
margin-top: var(--space-4);
padding-inline: 1.75rem;
border-radius: 8px;
}
@media (min-width: 600px) {
.site-header__logo img {
height: 48px;
}
}
@media (min-width: 768px) {
.site-header__inner {
min-height: 84px;
}
.site-header__logo img {
height: 52px;
}
.js .site-menu {
max-height: calc(100vh - 84px);
}
.site-header__cta {
width: auto;
}
}
/* Desktop: Logo links – Navigation exakt mittig – CTA rechts */
@media (min-width: 1280px) {
.site-header__inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
column-gap: var(--space-5);
min-height: 92px;
}
.site-header__logo {
grid-column: 1;
justify-self: start;
}
.nav-toggle,
.js .nav-toggle {
display: none;
}
/* Panel-Wrapper löst sich auf: Navigation und CTA werden Grid-Items */
.site-menu,
.js .site-menu,
.js .site-menu.is-open {
display: contents;
}
.site-nav {
grid-column: 2;
}
.site-nav__list {
flex-direction: row;
align-items: center;
gap: 1.5rem;
}
.site-nav__link {
padding-block: 0.5rem;
font-size: 1rem;
}
.site-nav__link::after {
bottom: 0.1rem;
}
.site-header__cta {
grid-column: 3;
justify-self: end;
margin-top: 0;
padding-inline: 1.375rem;
font-size: 0.9375rem;
white-space: nowrap;
}
}
/* Breite Bildschirme: volle Größen laut Design-Vorgabe */
@media (min-width: 1440px) {
.site-header__logo img {
height: 56px;
}
.site-nav__list {
gap: 2.125rem;
}
.site-nav__link {
font-size: 1.0625rem;
}
.site-header__cta {
padding-inline: 1.75rem;
font-size: 1rem;
}
}
/* 10. Hero (Startseite)
--------------------------------------------------------------------------
Split-Hero: Text links im Container-Raster, Bild rechts bis zum
Viewport-Rand. Das Raster entspricht dem .container (max. 1350px, Gutter):
[Rand 1fr] [Inhalt links 675px] [Inhalt rechts 675px] [Rand 1fr]
Der Text liegt in Spalte 2, das Bild füllt Spalte 3 bis 4 (Mitte bis
rechter Rand). Beide Spalten sitzen in einer Grid-Zeile = gleiche Höhe.
Bis 1023px: Text zuerst, Bild darunter über volle Breite.
========================================================================== */
.hero {
display: grid;
/* minmax(0, 1fr) statt "auto": die Spalte darf nicht über den Viewport
wachsen, nur weil das längste Wort der Headline breiter ist. */
grid-template-columns: minmax(0, 1fr);
background-color: var(--color-white);
}
.hero__content {
padding: var(--space-7) var(--gutter) var(--space-8);
}
.hero__title {
margin-top: var(--space-4);
font-size: clamp(2.125rem, 0.9rem + 2.6vw, 3.5rem);
line-height: 1.1;
letter-spacing: -0.03em;
hyphens: auto;
}
/* Sehr kleine Smartphones: "Handwerksbetrieb." muss in die Spalte passen */
@media (max-width: 359px) {
.hero__title {
font-size: 1.875rem;
}
}
.hero__accent {
color: var(--color-secondary);
}
.hero__lead {
max-width: 36em;
margin-top: var(--space-5);
color: var(--color-text-muted);
font-size: var(--fs-lg);
line-height: 1.55;
}
.hero__actions {
margin-top: var(--space-6);
}
.hero .btn {
min-height: 54px;
padding-inline: 1.75rem;
border-radius: 8px;
}
/* Eyebrow im Hero: kurzer Akzentstrich in Primärblau */
.hero .eyebrow {
display: flex;
align-items: center;
gap: var(--space-3);
}
.hero .eyebrow::before {
content: "";
flex: none;
width: 32px;
height: 3px;
border-radius: 2px;
background-color: var(--color-primary);
}
/* Bildfläche: ohne Rahmen/Card, füllt ihre Fläche vollständig */
.hero__media {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 3;
background-color: var(--color-navy);
}
.hero__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 60% 50%;
}
@media (min-width: 768px) {
.hero__content {
padding-block: var(--space-8) var(--space-9);
}
}
@media (min-width: 1024px) {
.hero {
grid-template-columns:
minmax(var(--gutter), 1fr)
minmax(0, calc(var(--container-max) / 2))
minmax(0, calc(var(--container-max) / 2))
minmax(var(--gutter), 1fr);
/* Höhe folgt dem Bildformat (ca. 4:3 der halben Breite), begrenzt */
min-height: clamp(560px, 37.5vw, 760px);
}
.hero__content {
grid-column: 2;
align-self: center;
padding: var(--space-8) var(--space-7) var(--space-8) 0;
}
.hero__media {
grid-column: 3 / 5;
aspect-ratio: auto;
}
}
/* 11. Sektion 2: Ausgangssituation (.problem)
--------------------------------------------------------------------------
Komposition: Kopfbereich zweispaltig (Headline | Einleitung), darunter ein
dunkelblaues Argumentband mit drei Spalten (Anlehnung an die Bildwelt des
Heroes, dezente Schrägstreifen als Akzent), darüber leicht überlappend die
helle Abschlussaussage.
Bis 639px: gestapelt. 640–1023px: gestapelt, Icon links. Ab 1024px: Raster.
========================================================================== */
.problem {
--problem-overlap: 40px;
}
.problem__head {
display: grid;
gap: var(--space-5);
}
.problem__title {
margin-top: var(--space-4);
font-size: clamp(2rem, 1.1rem + 2.8vw, 3.5rem);
line-height: 1.1;
letter-spacing: -0.03em;
}
.problem__mark {
color: var(--color-secondary);
}
.problem__intro {
--stack-space: var(--space-4);
max-width: 62ch;
color: var(--color-text-muted);
font-size: var(--fs-lg);
line-height: 1.6;
}
/* Argumentband (dunkelblau) */
.problem__list {
position: relative;
overflow: hidden;
margin: var(--space-7) 0 0;
padding: var(--space-3) 0 calc(var(--problem-overlap) + var(--space-5));
list-style: none;
border-radius: 16px;
background-color: var(--color-navy);
color: var(--color-white);
}
/* Dezente Schrägstreifen als grafischer Akzent (rein dekorativ) */
.problem__list::before {
content: "";
position: absolute;
top: -40%;
right: 5%;
width: 18px;
height: 180%;
background-color: rgb(58 167 255 / 0.16);
box-shadow:
-46px 0 0 rgb(25 114 187 / 0.3),
-92px 0 0 rgb(255 255 255 / 0.05);
transform: rotate(24deg);
opacity: 0.6;
pointer-events: none;
}
/* Bis 1023px ausgeblendet: die Streifen würden sonst über den Text laufen */
@media (max-width: 1023.98px) {
.problem__list::before {
display: none;
}
}
.problem__item {
position: relative;
padding: var(--space-6) var(--space-5);
}
.problem__item + .problem__item {
border-top: 1px solid var(--color-line-on-dark);
}
.problem__no {
position: absolute;
top: var(--space-6);
right: var(--space-5);
color: rgb(255 255 255 / 0.4);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
letter-spacing: 0.1em;
font-variant-numeric: tabular-nums;
}
.problem__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 10px;
background-color: rgb(255 255 255 / 0.08);
color: var(--color-primary);
}
.problem__body h3 {
margin-top: var(--space-4);
color: var(--color-white);
font-size: var(--fs-h4);
}
.problem__body p {
margin-top: var(--space-3);
color: var(--color-text-on-dark-muted);
}
/* Abschlussaussage: helle Fläche, überlappt das Band, Akzent in Primärblau */
.problem__closing {
position: relative;
z-index: 1;
overflow: hidden;
margin: calc(-1 * var(--problem-overlap)) var(--space-3) 0;
padding: var(--space-6) var(--space-5) var(--space-6) calc(var(--space-5) + 6px);
border: 1px solid var(--color-line);
border-radius: 12px;
background-color: var(--color-white);
box-shadow: var(--shadow-md);
}
.problem__closing::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 6px;
background-color: var(--color-primary);
}
.problem__closing p {
max-width: 46ch;
color: var(--color-navy);
font-size: clamp(1.3125rem, 1rem + 1.4vw, 2.125rem);
font-weight: var(--fw-semibold);
line-height: 1.32;
letter-spacing: -0.02em;
text-wrap: balance;
}
@media (min-width: 640px) {
.problem {
--problem-overlap: 48px;
}
.problem__item {
display: grid;
grid-template-columns: auto 1fr;
column-gap: var(--space-5);
padding: var(--space-6);
}
.problem__no {
right: var(--space-6);
}
.problem__body h3 {
margin-top: 0;
padding-right: var(--space-7);
}
.problem__closing {
margin-inline: var(--space-5);
padding: var(--space-7) var(--space-6) var(--space-7) calc(var(--space-6) + 6px);
}
}
@media (min-width: 1024px) {
.problem {
--problem-overlap: 64px;
}
/* Kopf: Headline links (breit), Einleitung rechts, unten bündig */
.problem__head {
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
column-gap: var(--space-8);
align-items: end;
}
.problem__intro {
padding-left: var(--space-6);
border-left: 1px solid var(--color-gray-200);
}
.problem__list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: var(--space-8);
padding-top: 0;
}
.problem__list::before {
right: 4%;
opacity: 1;
}
.problem__item {
display: block;
padding: var(--space-7) var(--space-6);
}
.problem__item + .problem__item {
border-top: 0;
border-left: 1px solid var(--color-line-on-dark);
}
.problem__no {
top: var(--space-7);
right: var(--space-6);
}
.problem__body h3 {
margin-top: var(--space-5);
padding-right: 0;
}
.problem__closing {
margin-inline: var(--space-7);
padding: var(--space-8) var(--space-8) var(--space-8) calc(var(--space-8) + 6px);
}
}
/* 12. Sektion 3: Website-Komplettpaket (.package)
--------------------------------------------------------------------------
Links Headline, Einleitung und das Beispiel-Bild (.package__stage, 4:3,
abgerundet). Rechts die fünf Bausteine als Icon-Kacheln, durch eine Linie
verbunden. Darunter ein kompakter CTA.
Bis 1023px: Kopf, Bildfläche, Liste, CTA untereinander.
========================================================================== */
.package {
overflow-x: clip;
}
.package__grid {
display: grid;
gap: var(--space-7);
}
.package__title {
margin-top: var(--space-4);
font-size: clamp(1.875rem, 1rem + 2vw, 2.75rem);
line-height: 1.12;
letter-spacing: -0.03em;
}
.package__mark {
color: var(--color-secondary);
}
.package__intro {
--stack-space: var(--space-4);
max-width: 62ch;
margin-top: var(--space-5);
color: var(--color-text-muted);
font-size: var(--fs-lg);
line-height: 1.6;
}
/* Bildfläche: Beispiel-Bild, volle Spaltenbreite, Seitenverhältnis des Bildes bleibt erhalten */
.package__stage {
margin: 0;
overflow: hidden;
border: 1px solid var(--color-line);
border-radius: 16px;
background-color: var(--color-off-white);
}
.package__stage img {
display: block;
width: 100%;
height: auto;
}
/* Bausteine: Icon-Kacheln mit durchgehender Linie */
.package__list {
--badge: 52px;
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
list-style: none;
}
.package__item {
position: relative;
padding: 0 0 var(--space-7) calc(var(--badge) + var(--space-5));
}
.package__item:last-child {
padding-bottom: 0;
}
.package__item:not(:last-child)::before {
content: "";
position: absolute;
top: calc(var(--badge) + 8px);
bottom: 8px;
left: calc(var(--badge) / 2 - 1px);
width: 2px;
border-radius: 2px;
background: linear-gradient(
to bottom,
var(--color-primary),
color-mix(in srgb, var(--color-secondary) 22%, var(--color-white))
);
}
.package__icon {
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: var(--badge);
height: var(--badge);
border: 1px solid color-mix(in srgb, var(--color-secondary) 22%, var(--color-white));
border-radius: 14px;
background: linear-gradient(
145deg,
color-mix(in srgb, var(--color-secondary) 7%, var(--color-white)),
color-mix(in srgb, var(--color-primary) 24%, var(--color-white))
);
color: var(--color-secondary);
transition:
background-color var(--duration-base) ease,
color var(--duration-base) ease,
transform var(--duration-base) var(--ease-out);
}
.package__icon svg {
width: 52%;
height: 52%;
}
/* Letzte Kachel dunkel: Die Betreuung läuft nach dem Go-live weiter */
.package__item:last-child .package__icon {
border-color: var(--color-navy);
background: var(--color-navy);
color: var(--color-primary);
}
.package__item h3 {
display: flex;
align-items: center;
min-height: var(--badge);
font-size: var(--fs-h3);
line-height: 1.2;
}
.package__item p {
margin-top: var(--space-3);
max-width: 60ch;
color: var(--color-text-muted);
}
@media (hover: hover) {
.package__item:hover .package__icon {
background: var(--color-primary);
color: var(--color-navy);
transform: translateY(-2px);
}
.package__item:last-child:hover .package__icon {
background: var(--color-secondary);
border-color: var(--color-secondary);
color: var(--color-white);
}
}
/* Kompakter CTA am Ende der Sektion */
.package__cta {
display: grid;
gap: var(--space-5);
padding: var(--space-6) var(--space-5);
border: 1px solid color-mix(in srgb, var(--color-secondary) 20%, var(--color-white));
border-radius: 14px;
background: linear-gradient(
120deg,
color-mix(in srgb, var(--color-secondary) 8%, var(--color-white)),
color-mix(in srgb, var(--color-primary) 16%, var(--color-white))
);
}
.package__cta h3 {
font-size: clamp(1.3125rem, 1.05rem + 1vw, 1.75rem);
line-height: 1.2;
}
.package__cta p {
max-width: 56ch;
margin-top: var(--space-3);
color: var(--color-text-muted);
}
.package__cta-btn {
min-height: 54px;
padding-inline: 1.75rem;
border-radius: 8px;
}
@media (min-width: 768px) {
.package__list {
--badge: 60px;
}
.package__item {
padding-left: calc(var(--badge) + var(--space-6));
}
.package__cta {
padding: var(--space-6);
}
.package__cta-btn {
justify-self: start;
}
}
@media (min-width: 1024px) {
.package__grid {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
grid-template-areas:
"head list"
"stage list"
"cta cta";
column-gap: var(--space-8);
row-gap: var(--space-7);
align-items: start;
}
.package__head {
grid-area: head;
}
.package__stage {
grid-area: stage;
}
/* Liste füllt die Höhe der linken Spalte; Bausteine verteilen sich gleichmäßig */
.package__list {
grid-area: list;
align-self: stretch;
padding-top: var(--space-2);
}
.package__item {
flex: 1 1 auto;
}
.package__item:last-child {
flex-grow: 0;
}
.package__cta {
grid-area: cta;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
column-gap: var(--space-7);
margin-top: var(--space-4);
padding: var(--space-6) var(--space-7);
}
.package__cta-btn {
justify-self: end;
}
}
/* 13. Sektion 4: Website-Service (.service)
--------------------------------------------------------------------------
Dunkelblaue Sektion (.section--dark) mit dezenten Ringen/Glow oben rechts
als Service-Motiv. Vier Bausteine als transparente Flächen mit feinen
Linien, darunter die Abschlussaussage.
Bis 1279px: Kopf, Bausteine (ab 640px 2x2), Abschluss untereinander.
Ab 1280px: Bausteine (2x2) links, Kopf rechts, Abschluss über die Breite.
========================================================================== */
.service {
position: relative;
overflow-x: clip;
background-image: radial-gradient(60% 90% at 100% 0%, rgb(58 167 255 / 0.16), transparent 70%);
}
/* Dünne konzentrische Ringe, nach außen ausgeblendet */
.service::before {
content: "";
position: absolute;
inset: 0;
background-image: repeating-radial-gradient(
circle at 100% 0%,
transparent 0 79px,
rgb(255 255 255 / 0.08) 79px 80px
);
-webkit-mask-image: radial-gradient(circle at 100% 0%, #000 0, transparent 62%);
mask-image: radial-gradient(circle at 100% 0%, #000 0, transparent 62%);
pointer-events: none;
}
.service__grid {
position: relative;
display: grid;
gap: var(--space-7);
}
.service__title {
margin-top: var(--space-4);
font-size: clamp(1.875rem, 1rem + 2vw, 2.75rem);
line-height: 1.12;
letter-spacing: -0.03em;
}
.service__mark {
color: var(--color-primary);
}
.service__intro {
--stack-space: var(--space-4);
max-width: 62ch;
margin-top: var(--space-5);
color: var(--color-text-muted);
font-size: var(--fs-lg);
line-height: 1.6;
}
/* Bausteine: transparente Flächen mit feiner Linie */
.service__list {
display: grid;
gap: var(--space-4);
margin: 0;
padding: 0;
list-style: none;
}
.service__item {
padding: var(--space-5);
border: 1px solid var(--color-line);
border-radius: 14px;
background-color: rgb(255 255 255 / 0.04);
transition: border-color var(--duration-base) ease, background-color var(--duration-base) ease;
}
.service__item:nth-child(2) { --reveal-delay: 80ms; }
.service__item:nth-child(3) { --reveal-delay: 160ms; }
.service__item:nth-child(4) { --reveal-delay: 240ms; }
.service__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border: 1px solid rgb(58 167 255 / 0.32);
border-radius: 12px;
background-color: rgb(58 167 255 / 0.14);
color: var(--color-primary);
}
.service__icon svg {
width: 24px;
height: 24px;
}
.service__item h3 {
margin-top: var(--space-4);
font-size: var(--fs-h4);
line-height: 1.25;
}
.service__item p {
margin-top: var(--space-3);
color: var(--color-text-muted);
}
@media (hover: hover) {
.service__item:hover {
border-color: rgb(58 167 255 / 0.5);
background-color: rgb(255 255 255 / 0.07);
}
}
/* Abschlussaussage: groß, mit feiner Linie und kurzem Akzent */
.service__closing {
position: relative;
max-width: 24em;
padding-top: var(--space-6);
border-top: 1px solid var(--color-line);
color: var(--color-white);
font-size: clamp(1.625rem, 1rem + 2.4vw, 2.75rem);
font-weight: var(--fw-semibold);
line-height: 1.2;
letter-spacing: -0.02em;
text-wrap: balance;
}
.service__closing::before {
content: "";
position: absolute;
top: -2px;
left: 0;
width: 72px;
height: 3px;
border-radius: 2px;
background-color: var(--color-primary);
}
@media (min-width: 640px) {
.service__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-5);
}
.service__item {
padding: var(--space-6);
}
}
@media (min-width: 1280px) {
.service__grid {
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
grid-template-areas:
"list head"
"closing closing";
column-gap: var(--space-8);
align-items: center;
}
.service__head {
grid-area: head;
}
.service__list {
grid-area: list;
}
.service__closing {
grid-area: closing;
}
}
/* 14. Sektion 5: Spezialisierung Handwerk (.craft)
--------------------------------------------------------------------------
Heller Wechsel nach der dunklen Service-Sektion. Oben ein ruhiges, langsam
laufendes Typo-Band mit den Branchen (verblasst, mit Rautentrenner).
Darunter Text links und das Kompositionsbild (Branchen-Websites) rechts; zuletzt drei Schwerpunkte mit feiner Linie (keine Karten).
Bis 1023px untereinander. Bei prefers-reduced-motion statisch und umbrechend.
========================================================================== */
.craft {
overflow-x: clip;
padding-top: var(--section-space-tight);
}
/* Typo-Band */
/* Schriftgröße und Zeilenhöhe liegen am Container: Er beschneidet (overflow, Maske), daher muss
die Zeilenbox samt Padding Unterlängen (g, y, p, j) und Umlaute vollständig enthalten.
Die Margins gleichen die zusätzliche Höhe aus, die Lage des Bandes bleibt optisch wie zuvor. */
.craft__marquee {
overflow: hidden;
margin-top: -0.125em;
margin-bottom: calc(var(--space-8) - 0.265em);
padding-bottom: 0.14em;
font-size: clamp(2.5rem, 1.3rem + 4.6vw, 5.75rem);
line-height: 1.35;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.craft__track {
display: flex;
width: max-content;
animation: craft-scroll 90s linear infinite;
}
.craft__marquee:hover .craft__track {
animation-play-state: paused;
}
@keyframes craft-scroll {
to { transform: translateX(-50%); }
}
.craft__trades {
--craft-gap: clamp(1.5rem, 1rem + 2vw, 3rem);
display: flex;
flex: none;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
}
.craft__trades li {
display: flex;
align-items: center;
gap: var(--craft-gap);
padding-right: var(--craft-gap);
color: color-mix(in srgb, var(--color-secondary) 24%, var(--color-white));
font-weight: var(--fw-bold);
line-height: inherit;
letter-spacing: -0.035em;
white-space: nowrap;
}
.craft__trades li::after {
content: "";
flex: none;
width: 0.2em;
height: 0.2em;
background-color: var(--color-primary);
opacity: 0.75;
transform: rotate(45deg);
}
/* Text und Collage */
.craft__grid {
display: grid;
gap: var(--space-7);
}
.craft__title {
margin-top: var(--space-4);
font-size: clamp(1.875rem, 1rem + 2vw, 2.75rem);
line-height: 1.12;
letter-spacing: -0.03em;
}
.craft__mark {
color: var(--color-secondary);
}
.craft__intro {
--stack-space: var(--space-4);
max-width: 62ch;
margin-top: var(--space-5);
color: var(--color-text-muted);
font-size: var(--fs-lg);
line-height: 1.6;
}
/* Kompositionsbild: freigestelltes WebP mit Transparenz, schwebt direkt auf dem Sektionshintergrund
(kein Container, kein Rahmen, keine Fläche). Seitenverhältnis 4:3 bleibt erhalten.
Bis 1023px zentriert und auf max. 600px begrenzt, ab 1024px füllt es die rechte Spalte. */
figure.craft__collage {
width: 100%;
max-width: 600px;
margin: 0 auto;
}
.craft__collage img {
display: block;
width: 100%;
height: auto;
filter: drop-shadow(0 12px 24px rgb(0 43 93 / 0.1));
}
/* Schwerpunkte: Linie statt Karten */
.craft__points {
display: grid;
gap: var(--space-6);
margin: var(--space-8) 0 0;
padding: 0;
list-style: none;
}
.craft__point {
position: relative;
padding-top: var(--space-5);
border-top: 1px solid var(--color-gray-200);
}
.craft__point::before {
content: "";
position: absolute;
top: -2px;
left: 0;
width: 48px;
height: 3px;
border-radius: 2px;
background-color: var(--color-primary);
}
.craft__point:nth-child(2) { --reveal-delay: 100ms; }
.craft__point:nth-child(3) { --reveal-delay: 200ms; }
.craft__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border: 1px solid var(--color-gray-200);
border-radius: 12px;
background-color: var(--color-white);
color: var(--color-secondary);
}
.craft__icon svg {
width: 24px;
height: 24px;
}
.craft__point h3 {
margin-top: var(--space-4);
font-size: var(--fs-h4);
line-height: 1.25;
}
.craft__point p {
margin-top: var(--space-3);
max-width: 46ch;
color: var(--color-text-muted);
}
@media (min-width: 1024px) {
.craft__grid {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
column-gap: var(--space-8);
align-items: center;
}
figure.craft__collage {
max-width: none;
margin: 0;
}
.craft__points {
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: var(--space-7);
}
}
/* Reduzierte Bewegung: Band statisch, umbrechend, ohne Duplikat */
@media (prefers-reduced-motion: reduce) {
.craft__marquee {
padding-inline: var(--gutter);
font-size: clamp(1.75rem, 1rem + 2vw, 3rem);
-webkit-mask-image: none;
mask-image: none;
}
.craft__track {
width: auto;
animation: none;
}
.craft__trades {
flex-wrap: wrap;
row-gap: var(--space-2);
}
.craft__trades[aria-hidden="true"] {
display: none;
}
}
/* 15. Sektion 6: Website-Designvorschauen (.designs)
--------------------------------------------------------------------------
Helle Galerie aus 8 Browserfenstern. Die Vorschaubilder (![]()
) sind
hochformatig und werden im Fenster beschnitten; beim Hover (nur mit Maus
und ohne reduzierte Bewegung) scrollt die Seite langsam nach unten.
Mobil/Touch: statisch. Platzhalter lassen sich durch echte Screenshots
im gleichen Format (hochkant, Breite : Höhe = 1 : 2) ersetzen.
1 Spalte bis 639px, 2 Spalten ab 640px, 4 Spalten ab 1024px (leicht
versetzte Spalten für einen redaktionellen Rhythmus).
========================================================================== */
.designs__head {
max-width: 48rem;
margin-inline: auto;
text-align: center;
}
.designs__title {
margin-top: var(--space-4);
font-size: clamp(1.875rem, 1rem + 2.4vw, 3rem);
line-height: 1.12;
letter-spacing: -0.03em;
}
.designs__mark {
color: var(--color-secondary);
}
.designs__intro {
max-width: 58ch;
margin: var(--space-5) auto 0;
color: var(--color-text-muted);
font-size: var(--fs-lg);
line-height: 1.6;
}
.designs__grid {
display: grid;
gap: var(--space-7);
margin: var(--space-8) 0 0;
padding: 0;
list-style: none;
}
.design__fig {
margin: 0;
}
/* Browserfenster */
.design__window {
overflow: hidden;
border: 1px solid var(--color-gray-200);
border-radius: 12px;
background-color: var(--color-white);
box-shadow: 0 14px 34px rgb(0 43 93 / 0.1), 0 2px 6px rgb(0 43 93 / 0.06);
transition: box-shadow var(--duration-base) ease, transform var(--duration-base) var(--ease-out);
}
.design__bar {
display: flex;
align-items: center;
gap: 6px;
height: 28px;
padding: 0 12px;
border-bottom: 1px solid var(--color-gray-200);
background-color: var(--color-off-white);
}
.design__bar span {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #cbd2dc;
}
.design__bar i {
flex: 1;
max-width: 55%;
height: 12px;
margin-left: 10px;
border-radius: 6px;
background-color: var(--color-white);
}
.design__screen {
container-type: inline-size;
aspect-ratio: 520 / 390;
overflow: hidden;
background-color: var(--color-off-white);
}
/* Die Screenshots (948 x 1659 px) enthalten eigene Ränder/Browserleisten. Pro Karte beschneiden die
Variablen --a (links), --b (rechts), --c (oben), --d (unten), jeweils in Bildpixeln, diese Ränder;
das Bild wird dabei proportional vergrößert (keine Verzerrung). */
.design__screen img {
--s: calc(948 / (948 - var(--a, 0) - var(--b, 0)));
display: block;
width: calc(100% * var(--s));
max-width: none;
height: auto;
margin-left: calc(var(--a, 0) / 948 * var(--s) * -100%);
margin-top: calc(var(--c, 0) / 948 * var(--s) * -100%);
transition: transform 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}
.design--shk { --a: 27; --b: 26; --c: 25; --d: 8; }
.design--elektro { --a: 8; --b: 2; --c: 19; --d: 0; }
.design--galabau { --a: 15; --b: 15; --c: 20; --d: 20; }
.design--tischler { --a: 41; --b: 41; --c: 20; --d: 9; }
.design--metallbau { --a: 24; --b: 23; --c: 27; --d: 3; }
.design--maler { --a: 47; --b: 46; --c: 21; --d: 3; }
.design--fensterbau { --a: 41; --b: 41; --c: 17; --d: 8; }
.design__caption {
margin-top: var(--space-4);
padding-inline: var(--space-1);
}
.design__caption strong {
color: var(--color-navy);
font-size: 1rem;
font-weight: var(--fw-semibold);
line-height: 1.3;
}
/* Abschluss: mittiger primärer Button unter der Galerie */
.designs__cta {
display: flex;
justify-content: center;
margin-top: var(--space-8);
}
.designs__cta .btn {
max-width: 100%;
min-height: 54px;
padding-inline: 1.75rem;
border-radius: 8px;
}
/* Hover nur mit Maus: tieferer Schatten; Scroll nur ohne reduzierte Bewegung */
@media (hover: hover) {
.design__window:hover {
box-shadow: 0 22px 46px rgb(0 43 93 / 0.16), 0 3px 8px rgb(0 43 93 / 0.08);
}
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.design__window:hover {
transform: translateY(-4px);
}
.design__window:hover .design__screen img {
/* scrollt bis zum Ende der (beschnittenen) Seite: Unterkante Bild = Unterkante Fenster */
transform: translateY(calc(75cqw + (var(--c, 0) + var(--d, 0)) / 948 * var(--s) * 100cqw - 100%));
transition-duration: 8s;
transition-timing-function: cubic-bezier(0.3, 0.1, 0.3, 1);
}
}
.designs__grid > .design:nth-child(2n) { --reveal-delay: 80ms; }
@media (min-width: 640px) {
.designs__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-7) var(--space-6);
}
}
@media (min-width: 1024px) {
.designs__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-7) var(--space-5);
}
/* Redaktioneller Versatz: jede zweite Spalte etwas tiefer */
.designs__grid > .design:nth-child(2n) {
margin-top: var(--space-6);
}
.designs__grid > .design:nth-child(4n + 3) { --reveal-delay: 160ms; }
.designs__grid > .design:nth-child(4n) { --reveal-delay: 240ms; }
}
/* 16. Sektion 7: Ablauf der Zusammenarbeit (.process)
--------------------------------------------------------------------------
Vertikale Timeline mit 5 Schritten. Links (ab 1024px sticky) Überschrift
und Einleitung, rechts die Schritte. Zwischen den Markern verläuft eine
Linie, die beim Scrollen von oben nach unten "mitwächst" (main.js setzt
--fill je Segment und die Klasse .is-reached am Schritt). Die Texte blenden
über das vorhandene Reveal ein. Ohne JavaScript und bei reduzierter Bewegung
ist alles vollständig sichtbar/gefüllt.
========================================================================== */
.process__grid {
display: grid;
gap: var(--space-8);
}
.process__title {
margin-top: var(--space-4);
font-size: clamp(1.875rem, 1rem + 2.4vw, 3rem);
line-height: 1.12;
letter-spacing: -0.03em;
}
.process__mark {
color: var(--color-secondary);
}
.process__intro {
max-width: 52ch;
margin-top: var(--space-5);
color: var(--color-text-muted);
font-size: var(--fs-lg);
line-height: 1.6;
}
.process__timeline {
--mk: 44px;
}
.process__list {
counter-reset: process;
margin: 0;
padding: 0;
list-style: none;
}
.process__step {
--fill: 1;
position: relative;
padding: 0 0 var(--space-8) calc(var(--mk) + var(--space-5));
counter-increment: process;
}
.js .process__step {
--fill: 0;
}
.process__step:last-child {
padding-bottom: 0;
}
/* Linie: grauer Track + farbige, mitwachsende Füllung (Segment bis zum nächsten Marker) */
.process__step:not(:last-child)::before,
.process__step:not(:last-child)::after {
content: "";
position: absolute;
top: calc(var(--mk) / 2);
left: calc(var(--mk) / 2 - 1px);
width: 2px;
height: 100%;
border-radius: 2px;
}
.process__step:not(:last-child)::before {
background-color: var(--color-gray-200);
}
.process__step:not(:last-child)::after {
background: linear-gradient(to bottom, var(--color-primary), var(--color-secondary));
transform: scaleY(var(--fill));
transform-origin: top;
}
.process__marker {
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: var(--mk);
height: var(--mk);
border: 2px solid var(--color-secondary);
border-radius: 50%;
background-color: var(--color-secondary);
color: var(--color-white);
font-size: 1.0625rem;
font-weight: var(--fw-bold);
font-variant-numeric: tabular-nums;
box-shadow: 0 0 0 6px rgb(58 167 255 / 0.18);
transition:
background-color var(--duration-base) ease,
border-color var(--duration-base) ease,
color var(--duration-base) ease,
box-shadow var(--duration-base) ease;
}
.process__step:last-child .process__marker {
border-color: var(--color-navy);
background-color: var(--color-navy);
}
/* Noch nicht erreicht (nur mit JavaScript): heller, ohne Ring */
.js .process__step:not(.is-reached) .process__marker {
border-color: var(--color-gray-200);
background-color: var(--color-white);
color: var(--color-gray-400);
box-shadow: none;
}
.process__body {
position: relative;
padding-top: 0.15rem;
}
/* Große, sehr blasse Ordnungszahl als redaktioneller Akzent */
.process__body::after {
content: counter(process, decimal-leading-zero);
position: absolute;
top: -0.05em;
right: 0;
z-index: 0;
color: color-mix(in srgb, var(--color-secondary) 9%, var(--color-off-white));
font-size: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
font-weight: var(--fw-bold);
line-height: 1;
letter-spacing: -0.04em;
pointer-events: none;
}
.process__body > * {
position: relative;
z-index: 1;
}
.process__label {
color: var(--color-secondary);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.process__body h3 {
margin-top: var(--space-2);
font-size: var(--fs-h3);
line-height: 1.2;
}
.process__body p:not(.process__label) {
max-width: 56ch;
margin-top: var(--space-3);
color: var(--color-text-muted);
}
.process__cta {
margin-top: var(--space-7);
padding-left: calc(var(--mk) + var(--space-5));
}
.process__cta .btn {
max-width: 100%;
min-height: 54px;
padding-inline: 1.75rem;
border-radius: 8px;
}
@media (min-width: 768px) {
.process__timeline {
--mk: 56px;
}
.process__step {
padding-left: calc(var(--mk) + var(--space-6));
}
.process__marker {
font-size: 1.25rem;
}
.process__cta {
padding-left: calc(var(--mk) + var(--space-6));
}
}
@media (min-width: 1024px) {
.process__grid {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
column-gap: var(--space-8);
align-items: start;
}
/* Überschrift bleibt beim Scrollen der Timeline sichtbar */
.process__side {
position: sticky;
top: var(--space-9);
}
}
/* 17. Sektion 8: Persönliche Vorstellung / Vertrauen (.about)
--------------------------------------------------------------------------
Weißer Hintergrund (hebt sich von der Off-White-Timeline ab). Links ein
großes Hochformat-Portrait (4:5, aktuell Platzhalter), rechts Überschrift,
Einleitung und Vorstellung. Darunter drei Vertrauenspunkte und ein dunkel-
blaues Abschlussband mit CTA. Mobil: Bild, Text, Vertrauenspunkte, Band.
Foto tauschen: Platzhalter-Block in index.html durch ![]()
ersetzen,
.about__frame schneidet es per object-fit auf 4:5 zu.
========================================================================== */
.about {
overflow-x: clip;
}
.about__grid {
display: grid;
gap: var(--space-7);
}
/* Portrait */
.about__photo {
position: relative;
isolation: isolate;
margin: 0;
max-width: 560px;
}
/* feine Konturlinie, leicht versetzt hinter dem Bild */
.about__photo::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border: 2px solid color-mix(in srgb, var(--color-primary) 55%, var(--color-white));
border-radius: 16px;
transform: translate(12px, 12px);
}
.about__frame {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
border-radius: 16px;
background-color: var(--color-navy);
box-shadow: var(--shadow-md);
}
.about__frame > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Platzhalter: ruhige Portrait-Silhouette in Corporate-Blau */
.about__placeholder {
position: absolute;
inset: 0;
background:
radial-gradient(120% 80% at 50% 28%, color-mix(in srgb, var(--color-secondary) 70%, var(--color-navy)), transparent 70%),
linear-gradient(160deg, color-mix(in srgb, var(--color-secondary) 45%, var(--color-navy)), var(--color-navy));
}
.about__placeholder-art {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.about__ph-ring {
fill: none;
stroke: rgb(255 255 255 / 0.1);
stroke-width: 1.5;
}
.about__ph-body {
fill: rgb(255 255 255 / 0.13);
}
.about__ph-head {
fill: rgb(255 255 255 / 0.2);
}
.about__ph-accent {
fill: none;
stroke: var(--color-primary);
stroke-width: 3;
stroke-linecap: round;
}
.about__placeholder-note {
position: absolute;
top: var(--space-4);
left: var(--space-4);
right: var(--space-4);
display: inline-flex;
align-items: center;
gap: var(--space-2);
width: fit-content;
max-width: calc(100% - 2 * var(--space-4));
padding: 0.5rem 0.875rem;
border: 1px solid rgb(255 255 255 / 0.28);
border-radius: 999px;
background-color: rgb(255 255 255 / 0.08);
color: var(--color-white);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
line-height: 1.3;
}
.about__placeholder-note svg {
flex: none;
color: var(--color-primary);
}
/* Namenskarte über dem unteren Bildrand */
.about__caption {
position: absolute;
left: var(--space-4);
bottom: var(--space-4);
max-width: calc(100% - 2 * var(--space-4));
display: grid;
gap: 0.15rem;
padding: 0.875rem 1.125rem 0.875rem 1rem;
border-left: 3px solid var(--color-primary);
border-radius: 8px;
background-color: var(--color-white);
box-shadow: var(--shadow-md);
}
.about__caption strong {
color: var(--color-navy);
font-size: 1.0625rem;
font-weight: var(--fw-bold);
line-height: 1.2;
}
.about__caption span {
color: var(--color-text-muted);
font-size: var(--fs-sm);
line-height: 1.35;
}
/* Textbereich */
.about__title {
margin-top: var(--space-4);
font-size: clamp(1.875rem, 1rem + 2.2vw, 2.875rem);
line-height: 1.12;
letter-spacing: -0.03em;
}
.about__mark {
color: var(--color-secondary);
}
.about__intro {
max-width: 60ch;
margin-top: var(--space-5);
color: var(--color-text);
font-size: var(--fs-lg);
line-height: 1.6;
}
.about__story {
--stack-space: var(--space-4);
max-width: 62ch;
margin-top: var(--space-6);
padding-left: var(--space-5);
border-left: 3px solid var(--color-primary);
color: var(--color-text-muted);
}
/* Vertrauenspunkte */
.about__trust {
display: grid;
gap: var(--space-4);
margin: 0;
padding: 0;
list-style: none;
}
.about__point {
padding: var(--space-5);
border: 1px solid var(--color-line);
border-radius: 14px;
background-color: var(--color-white);
box-shadow: var(--shadow-sm);
}
.about__icon {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border: 1px solid color-mix(in srgb, var(--color-secondary) 22%, var(--color-white));
border-radius: 14px;
background: linear-gradient(
145deg,
color-mix(in srgb, var(--color-secondary) 7%, var(--color-white)),
color-mix(in srgb, var(--color-primary) 24%, var(--color-white))
);
color: var(--color-secondary);
transition:
background-color var(--duration-base) ease,
color var(--duration-base) ease,
transform var(--duration-base) var(--ease-out);
}
.about__icon svg {
width: 52%;
height: 52%;
}
.about__point h3 {
margin-top: var(--space-5);
font-size: var(--fs-h4);
line-height: 1.25;
}
.about__point p {
margin-top: var(--space-3);
color: var(--color-text-muted);
}
@media (hover: hover) {
.about__point:hover .about__icon {
background: var(--color-primary);
color: var(--color-navy);
}
}
/* Abschlussband: dunkelblau mit Abschlusssatz und CTA */
.about__closing {
position: relative;
display: grid;
gap: var(--space-6);
overflow: hidden;
padding: var(--space-6) var(--space-5);
border-radius: 16px;
background:
radial-gradient(90% 140% at 100% 0%, color-mix(in srgb, var(--color-secondary) 60%, var(--color-navy)), transparent 65%),
var(--color-navy);
color: var(--color-white);
}
/* dezentes Ring-Motiv (wie in der Service-Sektion) */
.about__closing::before {
content: "";
position: absolute;
top: -120px;
right: -120px;
width: 340px;
height: 340px;
border: 1px solid rgb(255 255 255 / 0.1);
border-radius: 50%;
box-shadow: 0 0 0 48px rgb(255 255 255 / 0.03), 0 0 0 96px rgb(255 255 255 / 0.02);
pointer-events: none;
}
.about__closing > * {
position: relative;
}
.about__statement {
max-width: 34ch;
color: var(--color-white);
font-size: clamp(1.375rem, 1.05rem + 1.3vw, 2rem);
font-weight: var(--fw-bold);
line-height: 1.25;
letter-spacing: -0.02em;
text-wrap: balance;
}
.about__statement-mark {
color: var(--color-primary);
}
.about__action {
display: grid;
gap: var(--space-5);
align-content: center;
padding-top: var(--space-6);
border-top: 1px solid var(--color-line-on-dark);
}
.about__action p {
max-width: 44ch;
color: var(--color-text-on-dark-muted);
}
.about__btn {
max-width: 100%;
min-height: 54px;
padding-inline: 1.75rem;
border-radius: 8px;
border-color: rgb(255 255 255 / 0.4);
justify-self: start;
}
.about__btn:hover {
background-color: var(--color-white);
border-color: var(--color-white);
color: var(--color-navy);
}
/* Verzögerung der gestaffelten Einblendung */
.about__point:nth-child(2) { --reveal-delay: 100ms; }
.about__point:nth-child(3) { --reveal-delay: 200ms; }
@media (min-width: 640px) {
.about__photo::before {
transform: translate(16px, 16px);
}
.about__closing {
padding: var(--space-7) var(--space-6);
}
}
/* Tablet: Vertrauenspunkte als Zeilen mit Icon links (drei Spalten wären hier zu schmal) */
@media (min-width: 600px) and (max-width: 1023px) {
.about__point {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: var(--space-5);
align-items: start;
padding: var(--space-5) var(--space-6);
}
.about__icon {
grid-row: 1 / span 2;
}
.about__point h3 {
margin-top: 0;
align-self: center;
min-height: 52px;
display: flex;
align-items: center;
}
}
@media (min-width: 1024px) {
.about__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas:
"photo content"
"trust trust"
"closing closing";
column-gap: var(--space-7);
row-gap: var(--space-8);
align-items: center;
}
.about__photo {
grid-area: photo;
max-width: none;
}
.about__photo::before {
transform: translate(20px, 20px);
}
.about__content {
grid-area: content;
}
.about__trust {
grid-area: trust;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-6);
}
.about__point {
padding: var(--space-6);
}
.about__closing {
grid-area: closing;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
column-gap: var(--space-8);
align-items: center;
padding: var(--space-8) var(--space-7);
}
.about__action {
padding-top: 0;
padding-left: var(--space-7);
border-top: 0;
border-left: 1px solid var(--color-line-on-dark);
}
}
@media (min-width: 1280px) {
.about__grid {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
column-gap: var(--space-8);
}
}
/* 18. Sektion 9: FAQ-Accordion (.faq)
--------------------------------------------------------------------------
Heller Off-White-Hintergrund (das dunkle Finale bleibt dem Kontaktbereich
vorbehalten). Links (ab 1024px sticky) Überschrift und Einleitung, rechts
sieben Accordion-Karten auf nativen /-Elementen. Ohne
JavaScript bleibt alles bedienbar. main.js sorgt für weiches Auf-/Zuklappen
und setzt .is-open; es ist immer nur eine Antwort offen.
========================================================================== */
.faq__grid {
display: grid;
gap: var(--space-7);
}
.faq__title {
margin-top: var(--space-4);
font-size: clamp(1.875rem, 1rem + 2.2vw, 2.75rem);
line-height: 1.12;
letter-spacing: -0.03em;
}
.faq__mark {
color: var(--color-secondary);
}
.faq__intro {
max-width: 48ch;
margin-top: var(--space-5);
color: var(--color-text-muted);
font-size: var(--fs-lg);
line-height: 1.6;
}
.faq__list {
display: grid;
gap: var(--space-3);
}
.faq__item {
border: 1px solid var(--color-line);
border-radius: 14px;
background-color: var(--color-white);
box-shadow: var(--shadow-sm);
transition:
border-color var(--duration-base) ease,
box-shadow var(--duration-base) ease;
}
/* geöffnet: Rahmen in hellem Blau, Akzentstreifen links */
.faq__item.is-open,
html:not(.js) .faq__item[open] {
border-color: color-mix(in srgb, var(--color-secondary) 30%, var(--color-white));
box-shadow: var(--shadow-md);
}
.faq__summary {
position: relative;
display: flex;
align-items: center;
gap: var(--space-4);
min-height: 68px;
padding: var(--space-4) var(--space-4);
border-radius: 13px;
cursor: pointer;
list-style: none;
-webkit-tap-highlight-color: transparent;
}
.faq__summary::-webkit-details-marker {
display: none;
}
.faq__summary:focus-visible {
outline: 3px solid var(--color-focus);
outline-offset: 2px;
}
/* Akzentstreifen im geöffneten Zustand */
.faq__summary::before {
content: "";
position: absolute;
top: 14px;
bottom: 14px;
left: 0;
width: 3px;
border-radius: 0 3px 3px 0;
background-color: var(--color-primary);
transform: scaleY(0);
transition: transform var(--duration-base) var(--ease-out);
}
.faq__item.is-open .faq__summary::before,
html:not(.js) .faq__item[open] .faq__summary::before {
transform: none;
}
.faq__no {
display: none;
flex: none;
width: 2rem;
color: var(--color-gray-400);
font-size: var(--fs-sm);
font-weight: var(--fw-bold);
font-variant-numeric: tabular-nums;
letter-spacing: 0.04em;
transition: color var(--duration-base) ease;
}
.faq__q {
flex: 1 1 auto;
min-width: 0;
font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
font-weight: var(--fw-semibold);
line-height: 1.3;
letter-spacing: -0.01em;
text-wrap: pretty;
}
/* Plus-/Minus-Symbol: Der senkrechte Strich dreht sich beim Öffnen weg */
.faq__icon {
position: relative;
flex: none;
width: 40px;
height: 40px;
border: 1px solid color-mix(in srgb, var(--color-secondary) 25%, var(--color-white));
border-radius: 50%;
background-color: color-mix(in srgb, var(--color-secondary) 7%, var(--color-white));
color: var(--color-secondary);
transition:
background-color var(--duration-base) ease,
border-color var(--duration-base) ease,
color var(--duration-base) ease;
}
.faq__icon::before,
.faq__icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 14px;
height: 2px;
margin: -1px 0 0 -7px;
border-radius: 2px;
background-color: currentColor;
transition: transform var(--duration-base) var(--ease-out);
}
.faq__icon::after {
transform: rotate(90deg);
}
.faq__item.is-open .faq__icon,
html:not(.js) .faq__item[open] .faq__icon {
border-color: var(--color-secondary);
background-color: var(--color-secondary);
color: var(--color-white);
}
.faq__item.is-open .faq__icon::after,
html:not(.js) .faq__item[open] .faq__icon::after {
transform: rotate(0deg);
}
.faq__item.is-open .faq__no,
html:not(.js) .faq__item[open] .faq__no {
color: var(--color-secondary);
}
.faq__answer {
padding: 0 var(--space-4) var(--space-5);
}
.faq__answer p {
max-width: 62ch;
color: var(--color-text-muted);
line-height: 1.65;
}
@media (hover: hover) {
.faq__item:not(.is-open):hover {
border-color: color-mix(in srgb, var(--color-secondary) 28%, var(--color-white));
}
.faq__summary:hover .faq__icon {
background-color: color-mix(in srgb, var(--color-primary) 22%, var(--color-white));
}
.faq__item.is-open .faq__summary:hover .faq__icon {
background-color: var(--color-navy);
border-color: var(--color-navy);
}
}
/* gestaffelte Einblendung */
.faq__item:nth-child(2) { --reveal-delay: 60ms; }
.faq__item:nth-child(3) { --reveal-delay: 120ms; }
.faq__item:nth-child(4) { --reveal-delay: 180ms; }
.faq__item:nth-child(5) { --reveal-delay: 240ms; }
.faq__item:nth-child(6) { --reveal-delay: 300ms; }
.faq__item:nth-child(7) { --reveal-delay: 360ms; }
@media (min-width: 600px) {
.faq__summary {
gap: var(--space-5);
padding: var(--space-4) var(--space-5);
}
.faq__no {
display: block;
}
.faq__answer {
/* Antwort bündig unter der Frage: Innenabstand + Nummer (2rem) + Abstand */
padding: 0 var(--space-5) var(--space-5) calc(var(--space-5) * 2 + 2rem);
}
}
@media (min-width: 1024px) {
.faq__grid {
grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
column-gap: var(--space-8);
align-items: start;
}
.faq__head {
position: sticky;
top: var(--space-9);
}
.faq__list {
gap: var(--space-4);
}
.faq__summary {
min-height: 76px;
padding-block: var(--space-5);
}
.faq__answer {
padding-bottom: var(--space-6);
}
}
/* 19. Sektion 10: Abschluss / Kontakt (.contact)
--------------------------------------------------------------------------
Dunkelblauer Abschluss der Startseite (.section--dark) mit Ring-Motiv unten
links. Links Einleitung und direkter Kontakt, rechts das Formular auf einer
weißen Karte. Mobil: Einleitung, Formular, direkter Kontakt.
Die Karte setzt die Farbrollen der dunklen Sektion auf helle Werte zurück.
Fehlermeldungen kommen ohne zusätzliche Signalfarbe aus (Corporate-Palette):
Sie sind durch Symbol, Text und kräftigen Rahmen erkennbar.
========================================================================== */
.contact {
position: relative;
overflow-x: clip;
background-image: radial-gradient(60% 80% at 0% 100%, rgb(58 167 255 / 0.16), transparent 70%);
}
.contact::before {
content: "";
position: absolute;
inset: 0;
background-image: repeating-radial-gradient(
circle at 0% 100%,
transparent 0 79px,
rgb(255 255 255 / 0.08) 79px 80px
);
-webkit-mask-image: radial-gradient(circle at 0% 100%, #000 0, transparent 58%);
mask-image: radial-gradient(circle at 0% 100%, #000 0, transparent 58%);
pointer-events: none;
}
.contact__grid {
position: relative;
display: grid;
gap: var(--space-7);
}
.contact__title {
margin-top: var(--space-4);
font-size: clamp(2rem, 1rem + 2.6vw, 3.25rem);
line-height: 1.1;
letter-spacing: -0.03em;
}
.contact__mark {
color: var(--color-primary);
}
.contact__lead {
max-width: 54ch;
margin-top: var(--space-5);
color: var(--color-text-muted);
font-size: var(--fs-lg);
line-height: 1.6;
}
.contact__trust {
display: flex;
align-items: flex-start;
gap: var(--space-3);
margin-top: var(--space-6);
color: var(--color-white);
font-weight: var(--fw-semibold);
line-height: 1.4;
}
.contact__trust svg {
flex: none;
margin-top: 0.1rem;
color: var(--color-primary);
}
/* Formularkarte: weiß, setzt die dunklen Farbrollen zurück */
.contact__card {
--color-text: var(--color-gray-900);
--color-text-muted: var(--color-gray-600);
--color-heading: var(--color-navy);
--color-link: var(--color-secondary);
--color-line: var(--color-gray-200);
--color-focus: var(--color-secondary);
padding: var(--space-5);
border-radius: 16px;
background-color: var(--color-white);
color: var(--color-text);
box-shadow: 0 24px 60px rgb(0 12 32 / 0.35);
}
.contact__form {
display: grid;
gap: var(--space-5);
}
.form__note {
color: var(--color-text-muted);
font-size: var(--fs-sm);
}
.form__row {
display: grid;
gap: var(--space-5);
align-items: end; /* Eingabefelder bleiben auf einer Linie, auch wenn ein Label umbricht */
}
.form__field {
min-width: 0;
}
.form__label {
display: block;
margin-bottom: var(--space-2);
color: var(--color-navy);
font-size: 0.9375rem;
font-weight: var(--fw-semibold);
line-height: 1.3;
}
.form__req {
color: var(--color-secondary);
}
.form__opt {
color: var(--color-text-muted);
font-weight: var(--fw-regular);
}
.form__input {
display: block;
width: 100%;
min-height: 52px;
padding: 0.75rem 1rem;
border: 1.5px solid color-mix(in srgb, var(--color-gray-600) 40%, var(--color-gray-400)); /* Kontrast Feldrand mind. 3:1 */
border-radius: 8px;
background-color: var(--color-off-white);
color: var(--color-gray-900);
font: inherit;
font-size: 1rem; /* mindestens 16px: verhindert Zoom auf iOS */
line-height: 1.4;
transition:
border-color var(--duration-fast) ease,
background-color var(--duration-fast) ease,
box-shadow var(--duration-fast) ease;
}
.form__input::placeholder {
color: var(--color-gray-600);
opacity: 1;
}
.form__textarea {
min-height: 144px;
resize: vertical;
}
@media (hover: hover) {
.form__input:hover {
border-color: var(--color-secondary);
}
}
.form__input:focus {
border-color: var(--color-secondary);
background-color: var(--color-white);
}
.form__input:focus-visible {
outline: 3px solid var(--color-focus);
outline-offset: 2px;
}
/* Datenschutzhinweis: dezenter Fließtext, kein Formularfeld */
.form__privacy {
color: var(--color-text-muted);
font-size: 0.875rem;
line-height: 1.55;
}
.form__privacy a {
color: var(--color-secondary);
font-weight: var(--fw-semibold);
text-decoration: underline;
text-underline-offset: 3px;
}
.form__privacy a:focus-visible {
outline: 3px solid var(--color-focus);
outline-offset: 2px;
border-radius: 2px;
}
/* Fehlermeldung zum Feld (wird von main.js eingeblendet) */
.form__error {
display: flex;
align-items: flex-start;
gap: var(--space-2);
margin-top: var(--space-2);
color: var(--color-navy);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
line-height: 1.4;
}
.form__error[hidden] {
display: none;
}
.form__error::before {
content: "!";
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
background-color: var(--color-navy);
color: var(--color-white);
font-size: 0.75rem;
font-weight: var(--fw-bold);
line-height: 1;
}
.form__input[aria-invalid="true"] {
border-color: var(--color-navy);
border-width: 2px;
padding: calc(0.75rem - 0.5px) calc(1rem - 0.5px);
}
/* Honeypot: außerhalb des sichtbaren Bereichs, nicht per display:none */
.form__trap {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
.contact__submit {
width: 100%;
max-width: 100%;
min-height: 56px;
border-radius: 8px;
padding-inline: 1.5rem;
}
/* Hover-Farbe der dunklen Sektion gilt hier nicht: Karte ist hell */
.contact__card .btn--primary:hover {
background-color: var(--color-navy);
border-color: var(--color-navy);
color: var(--color-white);
}
.contact__submit[disabled] {
cursor: progress;
}
/* Rückmeldung nach dem Absenden */
.form__status {
color: var(--color-navy);
font-size: 0.9375rem;
line-height: 1.5;
}
.form__status:empty {
display: none;
}
.form__status[data-state] {
padding: var(--space-4);
border: 1px solid var(--color-line);
border-left: 4px solid var(--color-secondary);
border-radius: 8px;
background-color: var(--color-off-white);
}
.form__status[data-state="error"] {
border-left-color: var(--color-navy);
}
/* "Wird gesendet …": sichtbar zeigt es der Button, die Live-Region ist nur für Screenreader */
.form__status[data-state="progress"] {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* Erfolgsmeldung: ersetzt nach dem Versand das Formular in der Karte */
.contact__form[hidden] {
display: none;
}
.form__success {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1 1 auto;
padding-block: var(--space-6);
text-align: center;
}
/* Karte als Spalte, damit die Erfolgsmeldung die (fixierte) Kartenhöhe ausfüllt */
.contact__card {
display: flex;
flex-direction: column;
}
.contact__form {
width: 100%;
}
.form__success[hidden] {
display: none;
}
.form__success:focus {
outline: none;
}
.form__success-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 50%;
background-color: var(--color-secondary);
color: var(--color-white);
box-shadow: 0 0 0 8px rgb(58 167 255 / 0.18);
}
.form__success h3 {
margin-top: var(--space-6);
font-size: var(--fs-h3);
line-height: 1.2;
}
.form__success p {
max-width: 34ch;
margin-top: var(--space-3);
color: var(--color-text-muted);
font-size: var(--fs-lg);
line-height: 1.55;
}
/* Direkter Kontakt */
.contact__direct {
padding: var(--space-5);
border: 1px solid var(--color-line);
border-radius: 14px;
background-color: rgb(255 255 255 / 0.04);
}
.contact__direct h3 {
font-size: var(--fs-h4);
line-height: 1.25;
}
.contact__direct > p {
margin-top: var(--space-2);
color: var(--color-text-muted);
}
.contact__channels {
display: grid;
gap: var(--space-4);
margin: var(--space-5) 0 0;
padding: 0;
list-style: none;
}
.contact__channel {
display: flex;
align-items: center;
gap: var(--space-4);
min-width: 0;
}
.contact__channel > div {
min-width: 0;
}
.contact__channel-icon {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border: 1px solid rgb(58 167 255 / 0.32);
border-radius: 12px;
background-color: rgb(58 167 255 / 0.14);
color: var(--color-primary);
}
.contact__channel-icon svg {
width: 24px;
height: 24px;
}
.contact__channel-label {
color: var(--color-text-muted);
font-size: var(--fs-sm);
letter-spacing: 0.04em;
}
.contact__value {
display: inline-block;
max-width: 100%;
color: var(--color-white);
font-size: var(--fs-lg);
font-weight: var(--fw-semibold);
line-height: 1.3;
overflow-wrap: anywhere;
}
a.contact__value {
text-decoration: underline;
text-decoration-color: rgb(255 255 255 / 0.35);
text-underline-offset: 4px;
}
@media (hover: hover) {
a.contact__value:hover {
color: var(--color-primary);
text-decoration-color: currentColor;
}
}
/* Platzhalter bis zur Eintragung der echten Angaben */
.contact__value[data-placeholder] {
border-bottom: 1px dashed rgb(255 255 255 / 0.45);
}
.contact__intro { grid-area: intro; }
.contact__card { grid-area: card; }
.contact__direct { grid-area: direct; }
.contact__grid {
grid-template-areas:
"intro"
"card"
"direct";
}
.contact__direct { --reveal-delay: 80ms; }
@media (min-width: 640px) {
.contact__card {
padding: var(--space-6);
}
.form__row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.contact__direct {
padding: var(--space-6);
}
.contact__channels {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.contact__grid {
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
grid-template-areas:
"intro card"
"direct card";
grid-template-rows: auto 1fr;
column-gap: var(--space-8);
row-gap: var(--space-7);
align-items: start;
}
.contact__card {
padding: var(--space-7);
}
.contact__channels {
grid-template-columns: 1fr;
}
}
@media (min-width: 1280px) {
.contact__grid {
column-gap: calc(var(--space-8) + var(--space-5));
}
}
/* Sehr kleine Smartphones: E-Mail-Adresse bricht sauber vor dem @ statt mitten im Wort */
@media (max-width: 359px) {
.contact__value {
font-size: 0.9375rem;
}
}
/* 20. Footer (.site-footer)
--------------------------------------------------------------------------
Ruhiger Seitenabschluss in einem noch dunkleren Navy als die Kontaktsektion
(abgeleitet aus Corporate-Dunkelblau, mit Schwarz gemischt). Drei Bereiche:
Marke, Navigation, Kontakt + Rechtliches; darunter Linie und Fußzeile.
Mobil untereinander: Marke, Navigation (2 Spalten), Kontakt, Copyright.
========================================================================== */
.site-footer {
--footer-bg: color-mix(in srgb, var(--color-navy) 52%, black);
--footer-text: rgb(255 255 255 / 0.74);
--footer-line: rgb(255 255 255 / 0.14);
padding-block: var(--space-7) var(--space-4);
background-color: var(--footer-bg);
color: var(--footer-text);
font-size: 0.9375rem;
line-height: 1.5;
}
.site-footer__grid {
display: grid;
gap: var(--space-6);
}
/* Weißes Logo, freistehend auf dem dunklen Footer */
.site-footer__logo {
display: inline-block;
line-height: 0;
}
.site-footer__logo img {
display: block;
width: auto;
height: 46px;
}
.site-footer__claim {
max-width: 34ch;
margin-top: var(--space-4);
}
.site-footer__title {
margin-bottom: var(--space-3);
color: var(--color-white);
font-size: var(--fs-sm);
font-weight: var(--fw-bold);
letter-spacing: 0.08em;
line-height: 1.3;
text-transform: uppercase;
}
.site-footer__list {
margin: 0;
padding: 0;
list-style: none;
}
/* Navigation mobil in zwei Spalten, damit der Footer niedrig bleibt */
.site-footer__list--nav {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--space-4);
}
.site-footer a {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--footer-text);
text-decoration: none;
transition: color var(--duration-fast) ease;
}
.site-footer a:hover {
color: var(--color-primary);
}
.site-footer a:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 2px;
border-radius: 4px;
}
.site-footer__mail {
overflow-wrap: anywhere;
}
/* Rechtliches: eigene Zeile unter den Kontaktdaten */
.site-footer__legal {
display: flex;
flex-wrap: wrap;
gap: 0 var(--space-5);
margin-top: var(--space-3);
padding-top: var(--space-3);
border-top: 1px solid var(--footer-line);
}
/* Untere Zeile */
.site-footer__bottom {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0;
margin-top: var(--space-5);
padding-top: var(--space-3);
border-top: 1px solid var(--footer-line);
font-size: var(--fs-sm);
}
.site-footer .site-footer__top {
gap: 0.375rem;
color: var(--color-white);
font-weight: var(--fw-semibold);
}
.site-footer__top span {
display: inline-block;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.site-footer__top span {
transition: transform var(--duration-base) var(--ease-out);
}
.site-footer__top:hover span {
transform: translateY(-3px);
}
}
@media (min-width: 768px) {
.site-footer__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--space-7);
}
.site-footer__brand {
grid-column: 1 / -1;
}
.site-footer__list--nav {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.site-footer__bottom {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
@media (min-width: 1024px) {
.site-footer {
padding-top: var(--space-8);
}
.site-footer__grid {
grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);
column-gap: var(--space-8);
align-items: start;
}
.site-footer__brand {
grid-column: auto;
}
.site-footer__logo img {
height: 52px;
}
.site-footer__list--nav {
display: block;
}
.site-footer a {
min-height: 36px;
}
.site-footer__bottom {
margin-top: var(--space-6);
}
}
/* 21. Rechtliche Unterseiten (.page-head, .legal)
--------------------------------------------------------------------------
Schlichte Informationsseiten (Impressum, später Datenschutz): Titelband in
Off-White, darunter weißer Inhaltsbereich. Blöcke sind durch feine Linien
getrennt; ab 768px steht die Überschrift links, der Inhalt rechts.
Header und Footer entsprechen der Startseite.
========================================================================== */
.page-head {
padding-block: var(--space-7);
border-bottom: 1px solid var(--color-line);
background-color: var(--color-bg-alt);
}
.page-head__title {
font-size: clamp(2rem, 1.3rem + 2.8vw, 3.25rem);
line-height: 1.1;
letter-spacing: -0.03em;
}
.legal {
padding-block: var(--space-7) var(--section-space);
}
.legal__block {
padding-block: var(--space-6);
border-bottom: 1px solid var(--color-line);
}
.legal__block:first-child {
padding-top: 0;
}
.legal__block:last-child {
border-bottom: 0;
}
.legal__block h2 {
margin-bottom: var(--space-4);
font-size: var(--fs-h4);
line-height: 1.3;
}
.legal__body {
max-width: 62ch;
font-size: var(--fs-lg);
line-height: 1.7;
}
.legal__body p + p {
margin-top: var(--space-2);
}
.legal__body strong {
color: var(--color-navy);
font-weight: var(--fw-semibold);
}
.legal__body address {
font-style: normal;
}
.legal__facts {
display: grid;
gap: var(--space-3);
margin: 0;
}
.legal__facts > div {
display: grid;
gap: 0.125rem;
}
.legal__facts dt {
color: var(--color-text-muted);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
letter-spacing: 0.04em;
}
.legal__facts dd {
margin: 0;
overflow-wrap: anywhere;
}
.legal__body a {
color: var(--color-link);
font-weight: var(--fw-semibold);
text-decoration: underline;
text-underline-offset: 3px;
}
@media (hover: hover) {
.legal__body a:hover {
color: var(--color-navy);
}
}
.site-footer a[aria-current="page"] {
color: var(--color-white);
}
@media (min-width: 768px) {
.page-head {
padding-block: var(--space-8);
}
.legal__block {
display: grid;
grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
column-gap: var(--space-7);
padding-block: var(--space-7);
}
.legal__block:first-child {
padding-top: 0;
}
.legal__block h2 {
margin-bottom: 0;
}
.legal__facts > div {
grid-template-columns: 7rem minmax(0, 1fr);
align-items: baseline;
gap: var(--space-4);
}
.legal__facts dt {
letter-spacing: 0;
font-size: var(--fs-base);
}
}
/* 22. Datenschutzerklärung (.legal-doc, .legal-toc)
--------------------------------------------------------------------------
Langer Rechtstext in angenehmer Zeilenlänge. Ab 1024px steht links ein
mitlaufendes Inhaltsverzeichnis, darunter ist es eingeklappt (main.js).
Ohne JavaScript bleibt es geöffnet. Nutzt .page-head aus Abschnitt 21.
========================================================================== */
.page-head__meta {
margin-top: var(--space-3);
color: var(--color-text-muted);
font-size: var(--fs-lg);
}
.legal-doc {
padding-block: var(--space-6) var(--section-space);
}
.legal-doc__grid {
display: grid;
gap: var(--space-6);
}
/* Inhaltsverzeichnis */
.legal-toc {
border: 1px solid var(--color-line);
border-radius: 14px;
background-color: var(--color-bg-alt);
}
.legal-toc summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
min-height: 56px;
padding: var(--space-3) var(--space-5);
border-radius: 14px;
color: var(--color-navy);
font-size: var(--fs-sm);
font-weight: var(--fw-bold);
letter-spacing: 0.08em;
text-transform: uppercase;
list-style: none;
cursor: pointer;
}
.legal-toc summary::-webkit-details-marker {
display: none;
}
.legal-toc summary::after {
content: "";
flex: none;
width: 10px;
height: 10px;
border-right: 2px solid var(--color-secondary);
border-bottom: 2px solid var(--color-secondary);
transform: translateY(-2px) rotate(45deg);
transition: transform var(--duration-base) var(--ease-out);
}
.legal-toc[open] summary::after {
transform: translateY(2px) rotate(-135deg);
}
.legal-toc summary:focus-visible {
outline: 3px solid var(--color-focus);
outline-offset: 2px;
}
.legal-toc ol {
margin: 0;
padding: 0 var(--space-5) var(--space-4);
list-style: none;
counter-reset: toc;
}
.legal-toc li {
counter-increment: toc;
}
.legal-toc a {
display: flex;
align-items: baseline;
gap: var(--space-3);
min-height: 44px;
padding-block: 0.5rem;
color: var(--color-text);
font-size: 0.9375rem;
line-height: 1.4;
text-decoration: none;
transition: color var(--duration-fast) ease;
}
.legal-toc a::before {
content: counter(toc) ".";
flex: none;
min-width: 2.75ch;
color: var(--color-gray-600);
font-variant-numeric: tabular-nums;
}
@media (hover: hover) {
.legal-toc a:hover {
color: var(--color-secondary);
text-decoration: underline;
text-underline-offset: 3px;
}
}
.legal-toc a:focus-visible {
outline: 3px solid var(--color-focus);
outline-offset: 2px;
border-radius: 4px;
}
/* Text */
.legal-doc__content {
max-width: 72ch;
font-size: 1.0625rem;
line-height: 1.75;
}
.legal-doc__content section {
padding-block: var(--space-6);
border-top: 1px solid var(--color-line);
}
.legal-doc__content section:first-child {
padding-top: 0;
border-top: 0;
}
.legal-doc__content h2 {
margin-bottom: var(--space-4);
font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
line-height: 1.3;
letter-spacing: -0.015em;
}
.legal-doc__content p,
.legal-doc__content address,
.legal-doc__content ul {
margin-top: var(--space-4);
}
.legal-doc__content h2 + p {
margin-top: 0;
}
.legal-doc__content address {
font-style: normal;
}
.legal-doc__content ul {
padding-left: 1.25rem;
}
.legal-doc__content li {
padding-left: 0.25rem;
}
.legal-doc__content li + li {
margin-top: var(--space-1);
}
.legal-doc__content li::marker {
color: var(--color-secondary);
}
.legal-doc__label {
color: var(--color-navy);
font-weight: var(--fw-semibold);
}
.legal-doc__label + p,
.legal-doc__label + address,
.legal-doc__label + ul {
margin-top: var(--space-1);
}
.legal-doc__stand {
color: var(--color-navy);
font-weight: var(--fw-semibold);
}
.legal-doc__content a {
color: var(--color-link);
font-weight: var(--fw-semibold);
text-decoration: underline;
text-underline-offset: 3px;
overflow-wrap: anywhere;
}
@media (hover: hover) {
.legal-doc__content a:hover {
color: var(--color-navy);
}
}
@media (min-width: 1024px) {
.legal-doc {
padding-top: var(--space-7);
}
.legal-doc__grid {
grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
column-gap: var(--space-8);
align-items: start;
}
.legal-doc__side {
position: sticky;
top: var(--space-5);
}
/* Verzeichnis ist hier immer offen und scrollt bei kleiner Fensterhöhe in sich */
.legal-toc {
max-height: calc(100vh - 2 * var(--space-5));
overflow-y: auto;
}
.legal-toc summary {
min-height: 0;
padding-bottom: var(--space-2);
cursor: default;
pointer-events: none;
}
.legal-toc summary::after {
display: none;
}
.legal-toc a {
min-height: 0;
padding-block: 0.35rem;
}
}
/* Laptop-Breiten: Abschlussband der Vertrauenssektion mit gleich breiten Spalten,
damit der CTA-Text einzeilig bleibt */
@media (min-width: 1024px) and (max-width: 1279px) {
.about__closing {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--space-6);
}
}
/* 23. Fehlerseite 404 (.notfound)
--------------------------------------------------------------------------
Ruhige, zentrierte Seite auf hellem Grund mit dezentem Corporate-Glow oben.
Die große 404 ist ein blasses grafisches Element (nur Dekoration) und wird
nach unten ausgeblendet; sie skaliert fluid, damit sie mobil nicht zu groß wird.
========================================================================== */
.notfound {
display: grid;
align-items: center;
min-height: min(68vh, 640px);
padding-block: var(--section-space-tight);
background:
radial-gradient(60% 70% at 50% 0%, color-mix(in srgb, var(--color-primary) 12%, var(--color-white)), transparent 70%),
var(--color-white);
text-align: center;
}
.notfound__inner {
display: flex;
flex-direction: column;
align-items: center;
}
.notfound__code {
color: color-mix(in srgb, var(--color-secondary) 16%, var(--color-white));
font-size: clamp(5.5rem, 3rem + 14vw, 13rem);
font-weight: var(--fw-bold);
line-height: 0.85;
letter-spacing: -0.05em;
font-variant-numeric: tabular-nums;
-webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 35%, transparent 100%);
user-select: none;
}
.notfound__title {
margin-top: calc(-1 * var(--space-5));
font-size: clamp(2rem, 1.3rem + 3vw, 3.5rem);
line-height: 1.1;
letter-spacing: -0.03em;
}
.notfound__lead {
max-width: 40ch;
margin-top: var(--space-5);
color: var(--color-text);
font-size: var(--fs-lg);
line-height: 1.55;
}
.notfound__hint {
max-width: 46ch;
margin-top: var(--space-3);
color: var(--color-text-muted);
line-height: 1.6;
}
.notfound__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-3) var(--space-6);
margin-top: var(--space-6);
}
.notfound__actions .btn {
min-height: 54px;
padding-inline: 1.75rem;
border-radius: 8px;
}
.notfound__link {
display: inline-flex;
align-items: center;
min-height: 48px;
color: var(--color-secondary);
font-weight: var(--fw-semibold);
text-decoration: underline;
text-underline-offset: 4px;
transition: color var(--duration-fast) ease;
}
@media (hover: hover) {
.notfound__link:hover {
color: var(--color-navy);
}
}
.notfound__link:focus-visible {
outline: 3px solid var(--color-focus);
outline-offset: 2px;
border-radius: 4px;
}
/* Fokusring im dunkelblauen Abschlussband der Vertrauenssektion: Primärblau (Sekundärblau hätte auf Dunkelblau zu wenig Kontrast) */
.about__closing {
--color-focus: var(--color-primary);
}