@charset "UTF-8";
/* ============================================================================
A&W MARKETING — DESIGN-SYSTEM · assets/aw.css
----------------------------------------------------------------------------
Grundlage : 00_BUILD-VORGABE_AW-Leadmagnet-Landingpages.md, Kap. 3
(Brand Sheet v1.0, März 2026)
Gilt für : ALLE Seiten auf aundw-marketing.de (LP1-3, /danke/, /zugang/*,
/impressum/, /datenschutz/)
Regel : Diese Datei ist die EINZIGE Quelle für Tokens & Komponenten.
Seiten definieren keine eigenen Farben/Abstände.
----------------------------------------------------------------------------
INHALT
01 @font-face (lokal, DSGVO)
02 Tokens
03 Reset & Basis
04 Layout: Container, Section, Grid
05 Typografie: Headlines, Eyebrow, Lead, Prose
06 Logo
07 Header
08 Buttons
09 Cards
10 Häkchen-Liste (EIN SVG-Häkchen, systemweit)
11 Hero-Varianten
12 Nummern-Zeilen (#01–#04)
13 Trust-Zeile / Meta-Zeilen
14 Person-Block
15 Formular + Formular-Card
16 FAQ (details/summary)
17 Video-Facade (YouTube Click-to-Load)
18 Code-Block + Copy-Button
19 Hinweis-Box / Callout
20 Footer
21 Sticky-Mobile-CTA
22 Utilities
23 Motion / Reduced Motion
========================================================================== */
/* ==========================================================================
01 · @font-face — lokal gehostet (kein Google-Fonts-CDN, Kap. 3 / Kap. 8)
Variable Fonts, decken alle benötigten Gewichte ab.
========================================================================== */
@font-face{
font-family:'Inter';
src:url('/assets/fonts/inter-var.woff2') format('woff2');
font-weight:400 700;
font-style:normal;
font-display:swap;
}
@font-face{
font-family:'Space Grotesk';
src:url('/assets/fonts/space-grotesk-var.woff2') format('woff2');
font-weight:300 700;
font-style:normal;
font-display:swap;
}
/* ==========================================================================
02 · TOKENS
Farbwerte exakt aus Brand Sheet v1.0 / Build-Vorgabe Kap. 3.
Abgeleitete Werte sind als solche markiert und dienen ausschliesslich
der Einhaltung der Kontrastregeln (Kap. 3 "Kontrast-Fakten").
========================================================================== */
:root{
/* --- Brand Sheet v1.0 (verbindlich) --- */
--anthrazit: #2C2C2A; /* Basis: dunkle Flächen, Text auf hell, Wortmarke */
--mittelgrau: #444441; /* Cards auf dunklem Grund, Abgrenzung, Subtext */
--coral: #D85A30; /* Markenfarbe: primärer CTA, Icons, Logo-Rahmen */
--coral-hell: #F0997B; /* Hover auf dunkel, Links auf dunkel, Akzente */
--coral-tint: #FAECE7; /* helle Section-Flächen, Formular-Card */
/* --- abgeleitet (nicht im Sheet) — nur für States & Kontrast --- */
--coral-dark: #B8481F; /* CTA-Hover auf hell · Coral-Text auf hell (5,3:1) */
--white: #FFFFFF;
--muted-dark: #A9A9A5; /* Subtext auf Anthrazit (5,9:1) */
--muted-card: #BDBDB9; /* Subtext auf Mittelgrau-Card (5,2:1) */
--muted-light: #5A5A56; /* Subtext auf Weiss / Coral Tint (7,0:1) */
--hairline-d: rgba(255,255,255,.12);
--hairline-l: rgba(44,44,42,.12);
/* --- Typografie --- */
--ff-head: 'Space Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
--ff-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
--ff-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
/* --- Radien / Abstände / Layout --- */
--r-sm: 6px;
--r: 8px; /* Buttons */
--r-md: 12px; /* Cards */
--r-lg: 20px;
--maxw: 1140px;
--gutter: 20px;
--text-maxw: 68ch;
--section-y: 80px; /* mobil */
--section-y-lg: 120px; /* Desktop */
/* --- Kontext-Variablen (werden je Section-Variante überschrieben) --- */
--bg: var(--white);
--fg: var(--anthrazit);
--fg-muted: var(--muted-light);
--accent: var(--coral); /* Icons, Flächen — nicht-Text */
--accent-text:var(--coral-dark); /* Coral ALS TEXT auf hellem Grund */
--hairline: var(--hairline-l);
--card-bg: var(--white);
--focus: var(--coral-dark);
/* --- EIN Häkchen-Icon für das gesamte System (Kap. 3) --- */
--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D85A30' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
--icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8481F' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4m0 4h.01M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z'/%3E%3C/svg%3E");
}
@media (min-width:900px){
:root{ --gutter:24px; }
}
/* ==========================================================================
03 · RESET & BASIS
========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{
-webkit-text-size-adjust:100%;
scroll-behavior:smooth;
scroll-padding-top:80px;
}
body{
margin:0;
font-family:var(--ff-body);
font-size:1rem;
font-weight:400;
line-height:1.6;
color:var(--anthrazit);
background:var(--white);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
overflow-x:hidden;
}
img,svg,video,iframe{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }
strong,b{ font-weight:700; }
hr{
border:0;
border-top:1px solid var(--hairline);
margin:32px 0;
}
/* --- Fokus: systemweit sichtbar (Kap. 3 Barrierefreiheit) --- */
:focus{ outline:none; }
:focus-visible{
outline:3px solid var(--focus);
outline-offset:3px;
border-radius:var(--r-sm);
}
::selection{ background:var(--coral); color:var(--white); }
/* Skip-Link (keine Navigation, aber Tastatur-Einstieg in den Content) */
.skip-link{
position:absolute; left:-9999px; top:0; z-index:200;
background:var(--coral); color:var(--white);
padding:14px 20px; font-weight:700; border-radius:0 0 var(--r) 0;
}
.skip-link:focus-visible{ left:0; }
/* ==========================================================================
04 · LAYOUT — Container, Section, Grid
Section-Rhythmus (Kap. 3): Anthrazit ↔ Weiss ↔ Coral Tint.
NIE eine Volltonfläche in Coral als Section-Hintergrund.
========================================================================== */
.container{
width:min(var(--maxw), 100% - (var(--gutter) * 2));
margin-inline:auto;
}
.container--narrow{ width:min(760px, 100% - (var(--gutter) * 2)); }
.section{
position:relative;
padding:var(--section-y) 0;
background:var(--bg);
color:var(--fg);
}
@media (min-width:900px){
.section{ padding:var(--section-y-lg) 0; }
}
.section--tight{ padding-top:calc(var(--section-y) * .55); }
.section--tight-b{ padding-bottom:calc(var(--section-y) * .55); }
/* --- Kontext-Varianten: setzen ALLE Farbrollen konsistent --- */
.section--dark{
--bg:var(--anthrazit);
--fg:var(--white);
--fg-muted:var(--muted-dark);
--accent:var(--coral);
--accent-text:var(--coral-hell); /* Coral-Text auf dunkel → Coral Hell (6,4:1) */
--hairline:var(--hairline-d);
--card-bg:var(--mittelgrau);
--focus:var(--coral-hell);
}
.section--light{
--bg:var(--white);
--fg:var(--anthrazit);
--fg-muted:var(--muted-light);
--accent:var(--coral);
--accent-text:var(--coral-dark);
--hairline:var(--hairline-l);
--card-bg:var(--white);
--focus:var(--coral-dark);
}
.section--tint{
--bg:var(--coral-tint);
--fg:var(--anthrazit);
--fg-muted:var(--muted-light);
--accent:var(--coral);
--accent-text:var(--coral-dark);
--hairline:var(--hairline-l);
--card-bg:var(--white);
--focus:var(--coral-dark);
}
/* Haarlinie zwischen zwei gleichfarbigen Sections */
.section--hairline-top{ border-top:1px solid var(--hairline); }
/* --- Section-Kopf --- */
.section__head{ margin-bottom:40px; max-width:var(--text-maxw); }
.section__head--center{ margin-inline:auto; text-align:center; }
@media (min-width:900px){ .section__head{ margin-bottom:56px; } }
/* --- Grids --- */
.grid{ display:grid; gap:20px; }
@media (min-width:640px){ .grid{ gap:24px; } }
@media (min-width:900px){
.grid--2{ grid-template-columns:repeat(2,1fr); gap:28px; }
.grid--3{ grid-template-columns:repeat(3,1fr); gap:24px; }
.grid--4{ grid-template-columns:repeat(4,1fr); gap:24px; }
}
@media (min-width:640px) and (max-width:899px){
.grid--3,.grid--4{ grid-template-columns:repeat(2,1fr); }
}
/* Zwei-Spalten-Split (Text ↔ Visual / Formular ↔ Person) */
.split{ display:grid; gap:32px; align-items:center; }
@media (min-width:960px){
.split{ grid-template-columns:1fr 1fr; gap:56px; }
.split--form{ grid-template-columns:1.05fr .95fr; align-items:start; }
.split--wide-left{ grid-template-columns:1.15fr .85fr; }
}
/* ==========================================================================
05 · TYPOGRAFIE
H1 mobil 32–36px · Desktop 56–64px · lh 1.05–1.15 · ls -0.02em
========================================================================== */
h1,h2,h3,h4,.h1,.h2,.h3,.h4{
font-family:var(--ff-head);
font-weight:700;
letter-spacing:-.02em;
line-height:1.1;
margin:0 0 .5em;
color:var(--fg);
text-wrap:balance;
}
h1,.h1{ font-size:clamp(2rem, 1.35rem + 3.1vw, 3.75rem); line-height:1.06; }
h2,.h2{ font-size:clamp(1.625rem, 1.2rem + 1.9vw, 2.75rem); line-height:1.12; }
h3,.h3{ font-size:clamp(1.25rem, 1.08rem + .75vw, 1.625rem); line-height:1.18; letter-spacing:-.015em; }
h4,.h4{ font-size:1.0625rem; line-height:1.3; letter-spacing:-.01em; }
/* Headline-Akzent — Coral als Highlight (nur in grossen Headlines zulässig) */
.accent{ color:var(--accent-text); }
/* Eyebrow — Versalien, gesperrt, 12–13px.
Farbe kontextabhängig (--accent-text), damit ≥4,5:1 eingehalten wird. */
.eyebrow{
display:block;
font-family:var(--ff-body);
font-size:.75rem;
font-weight:700;
line-height:1.4;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--accent-text);
margin:0 0 14px;
}
@media (min-width:900px){ .eyebrow{ font-size:.8125rem; } }
/* Subline / Lead */
.lead{
font-size:1.0625rem;
line-height:1.6;
color:var(--fg-muted);
max-width:var(--text-maxw);
margin:0 0 24px;
}
@media (min-width:900px){ .lead{ font-size:1.125rem; } }
.lead--strong{ color:var(--fg); }
.prose{ max-width:var(--text-maxw); color:var(--fg-muted); }
.prose p{ margin-bottom:1.1em; }
.prose strong{ color:var(--fg); }
.text-max{ max-width:var(--text-maxw); }
/* Inline-Link im Fliesstext */
.link{
color:var(--accent-text);
text-decoration:underline;
text-underline-offset:.18em;
text-decoration-thickness:1px;
}
.link:hover{ text-decoration-thickness:2px; }
/* "Ergebnis:"-Zeile (Problem-Cards, Leistungen) */
.result{
margin:16px 0 0;
padding-top:14px;
border-top:1px solid var(--hairline);
font-size:.9375rem;
line-height:1.55;
color:var(--fg-muted);
}
.result b,.result strong{
color:var(--accent-text);
font-family:var(--ff-head);
letter-spacing:.01em;
}
/* ==========================================================================
06 · LOGO
Stamp (doppelter Rahmen, abgerundete Ecken) in Coral,
Wortmarke "A&W" + "MARKETING" in Anthrazit (hell) bzw. Weiss (invertiert).
Verwendung: … Inline-SVG …
Schutzzone: halbe Stamp-Breite → über .logo{padding} gesichert.
========================================================================== */
.logo{
display:inline-flex;
align-items:center;
text-decoration:none;
color:var(--anthrazit); /* Wortmarke erbt via currentColor */
padding:6px 0;
}
.logo svg,
.logo__img{ height:38px; width:auto; }
@media (min-width:900px){ .logo svg,
.logo__img{ height:42px; } }
.logo--invers{ color:var(--white); }
.logo--hell{ color:var(--anthrazit); }
.logo__stamp{ stroke:var(--coral); fill:none; }
.logo__stamp-fill{ fill:var(--coral); }
.logo__word{ fill:currentColor; }
.logo__sub{ fill:currentColor; opacity:.72; }
.logo--sm svg{ height:30px; }
/* ==========================================================================
07 · HEADER — nur Logo, KEINE Navigation (Kap. 4.2)
========================================================================== */
.site-header{
background:var(--anthrazit);
color:var(--white);
border-bottom:1px solid var(--hairline-d);
}
.site-header__inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
min-height:68px;
padding:10px 0;
}
@media (min-width:900px){ .site-header__inner{ min-height:80px; } }
/* Optionaler Telefon-Link rechts (LP1, Kap. 6.1 §1) */
.header-tel{
display:none;
font-size:.9375rem;
font-weight:600;
color:var(--coral-hell);
text-decoration:none;
white-space:nowrap;
}
.header-tel:hover{ text-decoration:underline; text-underline-offset:.2em; }
@media (min-width:640px){ .header-tel{ display:inline-flex; align-items:center; gap:8px; } }
.header-tel svg{ width:18px; height:18px; flex:none; }
/* ==========================================================================
08 · BUTTONS
Primär: Coral-Fläche, Label WEISS + bold + ≥18,5px (Kontrastregel Kap. 3).
Auf dunkel wechselt der Hover auf Coral Hell → Label wird Anthrazit,
weil Weiss auf Coral Hell nur 2,2:1 erreicht.
========================================================================== */
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
min-height:52px;
padding:15px 28px;
border:1px solid transparent;
border-radius:var(--r);
font-family:var(--ff-body);
font-size:1.1875rem; /* 19px — ≥18,5px bold, damit Weiss-auf-Coral zulässig */
font-weight:700;
line-height:1.25;
letter-spacing:-.005em;
text-align:center;
text-decoration:none;
white-space:normal;
transition:background-color .16s ease, border-color .16s ease, color .16s ease, transform .12s ease;
}
.btn:active{ transform:translateY(1px); }
/* --- Primär --- */
.btn--primary{
background:var(--coral);
color:var(--white);
border-color:var(--coral);
}
.btn--primary:hover{ background:var(--coral-dark); border-color:var(--coral-dark); color:var(--white); }
.section--dark .btn--primary:hover,
.hero--dark .btn--primary:hover,
.sticky-cta .btn--primary:hover{
background:var(--coral-hell);
border-color:var(--coral-hell);
color:var(--anthrazit); /* Kleintext/Label auf Coral Hell → Anthrazit (7,0:1) */
}
/* --- Sekundär (max. 1× pro Seite) --- */
.btn--secondary{
background:transparent;
color:var(--accent-text);
border-color:currentColor;
font-weight:600;
}
.btn--secondary:hover{ background:rgba(216,90,48,.10); }
/* --- Modifier --- */
.btn--block{ display:flex; width:100%; }
.btn--sm{ min-height:46px; padding:11px 20px; font-size:1rem; }
@media (max-width:479px){ .btn{ width:100%; } .btn--auto{ width:auto; } }
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.65; cursor:not-allowed; transform:none; }
/* --- Loading-State (aw.js setzt .is-loading + aria-busy) --- */
.btn.is-loading{ pointer-events:none; position:relative; color:transparent; }
.btn.is-loading::after{
content:"";
position:absolute; inset:0; margin:auto;
width:22px; height:22px;
border:2.5px solid rgba(255,255,255,.35);
border-top-color:var(--white);
border-radius:50%;
animation:aw-spin .7s linear infinite;
}
@keyframes aw-spin{ to{ transform:rotate(360deg); } }
/* CTA-Zeile mit Reassurance darunter */
.cta-row{ margin-top:28px; }
.cta-note{
margin:14px 0 0;
font-size:.875rem;
line-height:1.5;
color:var(--fg-muted);
}
/* ==========================================================================
09 · CARDS
auf dunkel: --mittelgrau + hairline-d · auf hell: weiss/tint + hairline-l
========================================================================== */
.card{
background:var(--card-bg);
border:1px solid var(--hairline);
border-radius:var(--r-md);
padding:24px;
color:var(--fg);
height:100%;
}
@media (min-width:900px){ .card{ padding:32px; } }
.section--dark .card{ --fg-muted:var(--muted-card); }
.card__title{
font-family:var(--ff-head);
font-size:1.125rem;
font-weight:700;
line-height:1.25;
letter-spacing:-.015em;
margin:0 0 10px;
color:var(--fg);
}
.card__text{ margin:0; font-size:.9375rem; line-height:1.6; color:var(--fg-muted); }
@media (min-width:900px){ .card__text{ font-size:1rem; } }
/* Card mit Coral-Akzentkante (Aktion/Hervorhebung) */
.card--accent{ border-color:rgba(216,90,48,.45); }
.card--tint{ background:var(--coral-tint); border-color:var(--hairline-l); color:var(--anthrazit); }
/* Nummerierte Card (z.B. 6-Schritt-Anleitung LP3) */
.card__step{
display:inline-flex; align-items:center; justify-content:center;
width:34px; height:34px; margin-bottom:14px;
border:1px solid var(--accent);
border-radius:var(--r-sm);
font-family:var(--ff-head); font-size:.9375rem; font-weight:700;
color:var(--accent-text);
}
/* ==========================================================================
10 · HÄKCHEN-LISTE — EIN Icon systemweit (Kap. 3 "Checklisten-Item")
Markup:
========================================================================== */
.checklist{ display:grid; gap:12px; }
.checklist li{
position:relative;
padding-left:34px;
font-size:1rem;
line-height:1.55;
color:var(--fg);
}
.checklist li::before{
content:"";
position:absolute; left:0; top:.05em;
width:22px; height:22px;
background:var(--icon-check) center/22px 22px no-repeat;
}
.checklist--muted li{ color:var(--fg-muted); }
.checklist--sm li{ font-size:.9375rem; padding-left:30px; }
.checklist--sm li::before{ width:19px; height:19px; background-size:19px 19px; }
.checklist--lg{ gap:14px; }
.checklist--lg li{ font-size:1.0625rem; }
/* Häkchen-Liste horizontal (Nutzenzeile) */
@media (min-width:760px){
.checklist--inline{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:28px; }
}
/* ==========================================================================
11 · HERO — Varianten
.hero--split : Text links, Visual rechts (Standard LP1)
.hero--centered : nur Text, zentriert (LP2/LP3-Option)
.hero--visual : Hintergrundbild + Overlay (sobald echtes Key-Visual da ist)
Farbvariante über .section--dark / .section--light / .section--tint.
========================================================================== */
.hero{
position:relative;
padding:56px 0 64px;
overflow:hidden;
}
@media (min-width:900px){ .hero{ padding:88px 0 104px; } }
.hero__inner{ position:relative; z-index:2; }
.hero h1{ margin-bottom:20px; }
.hero .lead{ margin-bottom:28px; }
.hero--split .hero__grid{ display:grid; gap:40px; align-items:center; }
@media (min-width:960px){
.hero--split .hero__grid{ grid-template-columns:1.1fr .9fr; gap:64px; }
}
.hero--centered .hero__inner{ max-width:760px; margin-inline:auto; text-align:center; }
.hero--centered .lead,
.hero--centered .checklist{ margin-inline:auto; }
.hero--centered .checklist li{ text-align:left; }
/* Dezente Struktur im dunklen Hero — CSS-only, KEIN externer Bild-Request */
.hero--dark{ background:var(--anthrazit); color:var(--white); }
.hero--texture::before{
content:"";
position:absolute; inset:0; z-index:1;
background:
radial-gradient(90% 70% at 82% 8%, rgba(216,90,48,.16) 0%, rgba(216,90,48,0) 62%),
linear-gradient(180deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,0) 40%);
pointer-events:none;
}
/* Variante für das ECHTE Key-Visual (Foto): Bildpfad per --hero-img setzen.
Overlay ist bewusst kräftig, damit der Text ≥4,5:1 bleibt (Kap. 6.1 §2). */
.hero--visual{
background-color:var(--anthrazit);
background-image:
linear-gradient(90deg, rgba(44,44,42,.94) 0%, rgba(44,44,42,.86) 46%, rgba(44,44,42,.62) 100%),
var(--hero-img, none);
background-size:cover;
background-position:center right;
background-repeat:no-repeat;
}
@media (max-width:759px){
.hero--visual{
background-image:
linear-gradient(180deg, rgba(44,44,42,.90) 0%, rgba(44,44,42,.95) 70%),
var(--hero-img, none);
}
}
/* Visual-Slot (Platzhalter oder echtes Bild) */
.hero__visual{ position:relative; }
.hero__visual img,
.hero__visual svg{
width:100%; height:auto;
border-radius:var(--r-md);
}
/* Gestalteter Bild-Platzhalter — 1:1 gegen ![]()
austauschbar */
.ph-visual{
position:relative;
border:1px solid var(--hairline);
border-radius:var(--r-md);
background:
linear-gradient(135deg, rgba(216,90,48,.14) 0%, rgba(216,90,48,0) 55%),
var(--mittelgrau);
overflow:hidden;
}
.ph-visual__tag{
position:absolute; left:14px; bottom:14px; z-index:2;
display:inline-block;
padding:5px 10px;
border-radius:var(--r-sm);
background:var(--coral-tint);
color:var(--anthrazit);
font-size:.6875rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
}
/* ==========================================================================
12 · NUMMERN-ZEILEN (#01–#04) — Leistungen LP1
========================================================================== */
.numbers{ display:grid; gap:0; border-top:1px solid var(--hairline); }
.number-row{
display:grid;
gap:8px 24px;
padding:28px 0;
border-bottom:1px solid var(--hairline);
}
@media (min-width:760px){
.number-row{ grid-template-columns:104px 1fr; padding:36px 0; gap:0 32px; }
}
.number-row__num{
font-family:var(--ff-head);
font-size:1.5rem;
font-weight:700;
line-height:1;
letter-spacing:-.02em;
color:var(--accent-text);
}
@media (min-width:760px){ .number-row__num{ font-size:2rem; padding-top:.1em; } }
.number-row__title{
font-family:var(--ff-head);
font-size:1.125rem;
font-weight:700;
line-height:1.25;
letter-spacing:-.015em;
margin:0 0 10px;
color:var(--fg);
}
@media (min-width:900px){ .number-row__title{ font-size:1.25rem; } }
.number-row__body{ max-width:var(--text-maxw); }
.number-row__text{ margin:0; font-size:.9375rem; line-height:1.65; color:var(--fg-muted); }
@media (min-width:900px){ .number-row__text{ font-size:1rem; } }
/* ==========================================================================
13 · TRUST-ZEILE / META-ZEILEN
========================================================================== */
.trust{
display:flex; flex-wrap:wrap; align-items:center;
gap:8px 14px;
margin:26px 0 0;
padding-top:22px;
border-top:1px solid var(--hairline);
font-size:.875rem;
line-height:1.5;
color:var(--fg-muted);
}
.trust li{ display:inline-flex; align-items:center; gap:14px; }
.trust li:not(:last-child)::after{
content:"";
width:4px; height:4px; border-radius:50%;
background:var(--accent);
}
@media (min-width:900px){ .trust{ font-size:.9375rem; } }
/* ==========================================================================
14 · PERSON-BLOCK (Daniel)
========================================================================== */
.person{ display:grid; gap:18px; }
.person__head{ display:flex; align-items:center; gap:16px; }
.person__photo{
width:76px; height:76px; flex:none;
border-radius:50%;
overflow:hidden;
border:2px solid var(--accent);
background:var(--mittelgrau);
}
.person__photo img,.person__photo svg{ width:100%; height:100%; object-fit:cover; }
.person__name{ font-family:var(--ff-head); font-size:1.0625rem; font-weight:700; margin:0; color:var(--fg); }
.person__role{ margin:2px 0 0; font-size:.875rem; color:var(--fg-muted); }
.person__photo--lg{ width:104px; height:104px; }
/* ==========================================================================
15 · FORMULAR + FORMULAR-CARD
Die Formular-Card ist IMMER hell (Coral Tint) — auch in dunklen Sections.
Damit sind Labels, Hilfetexte und Fehler garantiert ≥4,5:1.
========================================================================== */
.form-card{
/* Kontext-Reset: innerhalb der Card gelten immer die hellen Farbrollen */
--fg:var(--anthrazit);
--fg-muted:var(--muted-light);
--accent-text:var(--coral-dark);
--hairline:var(--hairline-l);
--focus:var(--coral-dark);
background:var(--coral-tint);
color:var(--anthrazit);
border:1px solid var(--hairline-l);
border-radius:var(--r-md);
padding:24px 20px;
scroll-margin-top:24px;
}
@media (min-width:640px){ .form-card{ padding:32px; } }
.form-card__title{ margin:0 0 8px; font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem); }
.form-card__sub{ margin:0 0 24px; font-size:.9375rem; line-height:1.55; color:var(--muted-light); }
.form{ display:grid; gap:18px; }
.field{ display:grid; gap:6px; }
@media (min-width:560px){
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
}
.label{
font-size:.9375rem;
font-weight:600;
line-height:1.35;
color:var(--anthrazit);
}
.label .opt{ font-weight:400; color:var(--muted-light); }
.input{
width:100%;
min-height:52px;
padding:13px 14px;
font-size:1rem; /* ≥16px → kein iOS-Auto-Zoom */
line-height:1.4;
color:var(--anthrazit);
background:var(--white);
border:1px solid rgba(44,44,42,.22);
border-radius:var(--r);
transition:border-color .15s ease, box-shadow .15s ease;
-webkit-appearance:none;
appearance:none;
}
.input::placeholder{ color:#8A8A85; }
.input:hover{ border-color:rgba(44,44,42,.38); }
.input:focus{ border-color:var(--coral-dark); box-shadow:0 0 0 3px rgba(184,72,31,.18); }
textarea.input{ min-height:120px; resize:vertical; }
/* --- Fehler-State (nie nur über Farbe: Icon + Text + aria) --- */
.field.has-error .input{
border-color:var(--coral-dark);
box-shadow:0 0 0 3px rgba(184,72,31,.16);
}
.field__error{
display:flex; align-items:flex-start; gap:7px;
margin:0;
font-size:.875rem;
line-height:1.45;
font-weight:600;
color:var(--coral-dark);
}
.field__error::before{
content:"";
flex:none;
width:16px; height:16px; margin-top:.12em;
background:var(--icon-alert) center/16px 16px no-repeat;
}
.field__error[hidden]{ display:none; }
.field__hint{ margin:0; font-size:.8125rem; line-height:1.45; color:var(--muted-light); }
/* --- Checkbox-Gruppe (Interessen) --- */
.fieldset{ border:0; margin:0; padding:0; }
.fieldset__legend{
padding:0;
margin:0 0 10px;
font-size:.9375rem;
font-weight:600;
color:var(--anthrazit);
}
.checkgroup{ display:grid; gap:10px; }
@media (min-width:560px){ .checkgroup--2{ grid-template-columns:1fr 1fr; column-gap:18px; } }
.check{
display:grid;
grid-template-columns:22px 1fr;
align-items:start;
gap:11px;
min-height:28px;
font-size:.9375rem;
line-height:1.45;
color:var(--anthrazit);
cursor:pointer;
}
.check input[type="checkbox"]{
width:22px; height:22px;
margin:0;
accent-color:var(--coral);
border-radius:4px;
cursor:pointer;
flex:none;
}
.check--consent{
padding-top:6px;
margin-top:2px;
border-top:1px solid var(--hairline-l);
padding-block-start:16px;
font-size:.875rem;
line-height:1.5;
color:var(--muted-light);
}
.check--consent a{ color:var(--coral-dark); text-decoration:underline; text-underline-offset:.18em; }
.field.has-error .check input[type="checkbox"]{ outline:2px solid var(--coral-dark); outline-offset:2px; }
/* --- Honeypot: für Menschen unsichtbar, für Bots ausfüllbar --- */
.hp-wrap{
position:absolute !important;
left:-9999px !important;
top:auto;
width:1px; height:1px;
overflow:hidden;
}
/* --- Formular-Alert (Fallback-Fehler mit mailto:) --- */
.form-alert{
display:flex; align-items:flex-start; gap:10px;
padding:14px 16px;
border:1px solid var(--coral-dark);
border-left-width:4px;
border-radius:var(--r);
background:rgba(184,72,31,.07);
font-size:.9375rem;
line-height:1.5;
color:var(--anthrazit);
}
.form-alert::before{
content:"";
flex:none; width:20px; height:20px; margin-top:.1em;
background:var(--icon-alert) center/20px 20px no-repeat;
}
.form-alert a{ color:var(--coral-dark); font-weight:600; text-decoration:underline; text-underline-offset:.18em; }
.form-alert[hidden]{ display:none; }
/* --- Reassurance unter dem Button --- */
.form-note{
margin:0;
font-size:.8125rem;
line-height:1.5;
text-align:center;
color:var(--muted-light);
}
/* ==========================================================================
16 · FAQ — natives details/summary (kein JS nötig)
========================================================================== */
.faq{ border-top:1px solid var(--hairline); max-width:860px; }
.faq__item{ border-bottom:1px solid var(--hairline); }
.faq__q{
position:relative;
display:block;
list-style:none;
padding:22px 44px 22px 0;
font-family:var(--ff-head);
font-size:1.0625rem;
font-weight:700;
line-height:1.35;
letter-spacing:-.01em;
color:var(--fg);
cursor:pointer;
}
@media (min-width:900px){ .faq__q{ font-size:1.1875rem; padding-block:26px; } }
.faq__q::-webkit-details-marker{ display:none; }
.faq__q::marker{ content:""; }
.faq__q::after{
content:"";
position:absolute; right:4px; top:50%;
width:16px; height:16px;
margin-top:-8px;
background:
linear-gradient(var(--accent),var(--accent)) center/16px 2px no-repeat,
linear-gradient(var(--accent),var(--accent)) center/2px 16px no-repeat;
transition:transform .18s ease;
}
.faq__item[open] .faq__q::after{
background:linear-gradient(var(--accent),var(--accent)) center/16px 2px no-repeat;
transform:rotate(180deg);
}
.faq__q:hover{ color:var(--accent-text); }
.faq__a{
padding:0 0 24px;
max-width:var(--text-maxw);
font-size:.9375rem;
line-height:1.65;
color:var(--fg-muted);
}
@media (min-width:900px){ .faq__a{ font-size:1rem; } }
/* Sichtbar markierter Platzhalter-Text (bis Inhalte nachgeliefert werden) */
.ph-text{
display:inline-block;
padding:2px 8px;
border:1px dashed var(--accent);
border-radius:var(--r-sm);
font-family:var(--ff-mono);
font-size:.8125rem;
letter-spacing:.01em;
color:var(--accent-text);
background:rgba(216,90,48,.07);
}
/* ==========================================================================
17 · VIDEO-FACADE — YouTube Click-to-Load (Kap. 6.2 / Kap. 8)
Es wird KEIN youtube.com-Request vor dem Klick ausgelöst.
========================================================================== */
.video{
position:relative;
aspect-ratio:16/9;
border:1px solid var(--hairline);
border-radius:var(--r-md);
overflow:hidden;
background:var(--mittelgrau);
}
.video__poster{
position:absolute; inset:0;
width:100%; height:100%;
object-fit:cover;
background:
radial-gradient(70% 90% at 78% 12%, rgba(216,90,48,.22) 0%, rgba(216,90,48,0) 60%),
var(--mittelgrau);
border:0;
}
.video__btn{
position:absolute; inset:0;
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:14px;
width:100%; height:100%;
padding:20px;
border:0;
background:rgba(44,44,42,.42);
color:var(--white);
transition:background-color .18s ease;
}
.video__btn:hover{ background:rgba(44,44,42,.28); }
.video__icon{
display:flex; align-items:center; justify-content:center;
width:66px; height:66px;
border-radius:50%;
background:var(--coral);
box-shadow:0 6px 24px rgba(0,0,0,.28);
transition:background-color .18s ease, transform .18s ease;
}
.video__btn:hover .video__icon{ background:var(--coral-dark); transform:scale(1.05); }
.video__icon svg{ width:26px; height:26px; margin-left:3px; fill:var(--white); }
.video__label{
font-family:var(--ff-head);
font-size:.9375rem;
font-weight:700;
line-height:1.3;
text-align:center;
text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video__consent{
margin:8px 0 0;
font-size:.75rem;
line-height:1.45;
color:var(--fg-muted);
}
.video-item{ display:grid; gap:12px; }
.video-item__meta{
display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 12px;
font-size:.8125rem; letter-spacing:.06em; text-transform:uppercase;
font-weight:700; color:var(--accent-text);
}
/* ==========================================================================
18 · CODE-BLOCK + COPY-BUTTON (Zugangsseite Shopify)
========================================================================== */
.codeblock{
border:1px solid var(--hairline-d);
border-radius:var(--r-md);
background:#22221F;
overflow:hidden;
}
.section--light .codeblock,
.section--tint .codeblock{ border-color:rgba(44,44,42,.35); }
.codeblock__head{
display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
gap:10px 16px;
padding:14px 16px;
background:var(--mittelgrau);
border-bottom:1px solid var(--hairline-d);
}
.codeblock__title{
margin:0;
font-family:var(--ff-head);
font-size:.9375rem; font-weight:700; line-height:1.3;
color:var(--white);
}
.codeblock__where{
display:block;
margin-top:3px;
font-family:var(--ff-mono);
font-size:.75rem; font-weight:400; letter-spacing:0;
color:var(--muted-card);
}
.codeblock__pre{
margin:0;
padding:18px 16px;
overflow-x:auto;
font-family:var(--ff-mono);
font-size:.8125rem;
line-height:1.65;
color:#E6E6E1;
tab-size:2;
-webkit-overflow-scrolling:touch;
}
.codeblock__pre code{ font:inherit; color:inherit; white-space:pre; }
.copy-btn{
display:inline-flex; align-items:center; gap:8px;
min-height:40px;
padding:8px 14px;
border:1px solid var(--coral);
border-radius:var(--r-sm);
background:transparent;
color:var(--coral-hell);
font-size:.875rem; font-weight:700; line-height:1.2;
white-space:nowrap;
transition:background-color .15s ease, color .15s ease;
}
.copy-btn:hover{ background:var(--coral); color:var(--white); }
.copy-btn svg{ width:16px; height:16px; flex:none; }
.copy-btn.is-copied{ background:var(--coral-hell); border-color:var(--coral-hell); color:var(--anthrazit); }
/* ==========================================================================
19 · HINWEIS-BOX / CALLOUT
========================================================================== */
.callout{
border:1px solid var(--hairline);
border-left:4px solid var(--accent);
border-radius:var(--r);
padding:16px 18px;
background:var(--card-bg);
font-size:.9375rem;
line-height:1.6;
color:var(--fg-muted);
}
.callout strong{ color:var(--fg); }
/* ==========================================================================
20 · FOOTER — identisch auf ALLEN Seiten (Claim + NAP + Social + Recht + ©)
========================================================================== */
.site-footer{
background:var(--anthrazit);
color:var(--white);
padding:56px 0 32px;
--fg:var(--white);
--fg-muted:var(--muted-dark);
--accent-text:var(--coral-hell);
--hairline:var(--hairline-d);
--focus:var(--coral-hell);
}
@media (min-width:900px){ .site-footer{ padding:72px 0 36px; } }
.site-footer__top{ display:grid; gap:36px; }
@media (min-width:820px){
.site-footer__top{ grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
}
.site-footer__claim{
font-family:var(--ff-head);
font-size:1.0625rem;
font-weight:700;
line-height:1.4;
letter-spacing:-.01em;
margin:18px 0 0;
max-width:34ch;
color:var(--white);
}
.site-footer__h{
margin:0 0 14px;
font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
color:var(--coral-hell);
}
.site-footer address{
font-style:normal;
font-size:.9375rem;
line-height:1.7;
color:var(--muted-dark);
}
.site-footer a{ color:var(--muted-dark); text-decoration:none; }
.site-footer a:hover{ color:var(--coral-hell); text-decoration:underline; text-underline-offset:.2em; }
.footer-links{ display:grid; gap:9px; font-size:.9375rem; }
.social{ display:flex; gap:10px; margin-top:18px; }
.social a{
display:inline-flex; align-items:center; justify-content:center;
width:44px; height:44px;
border:1px solid var(--hairline-d);
border-radius:var(--r-sm);
color:var(--muted-dark);
transition:color .15s ease, border-color .15s ease, background-color .15s ease;
}
.social a:hover{ color:var(--white); background:var(--coral); border-color:var(--coral); }
.social svg{ width:20px; height:20px; }
.site-footer__bottom{
display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
gap:10px 20px;
margin-top:40px;
padding-top:22px;
border-top:1px solid var(--hairline-d);
font-size:.8125rem;
color:var(--muted-dark);
}
.site-footer__bottom p{ margin:0; }
/* ==========================================================================
21 · STICKY-MOBILE-CTA — nur mobil (Kap. 4.4)
Sichtbarkeit steuert aw.js über .is-visible
========================================================================== */
.sticky-cta{
position:fixed;
left:0; right:0; bottom:0;
z-index:90;
padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));
background:rgba(44,44,42,.97);
border-top:1px solid var(--hairline-d);
-webkit-backdrop-filter:blur(8px);
backdrop-filter:blur(8px);
transform:translateY(110%);
transition:transform .22s ease;
visibility:hidden;
}
.sticky-cta.is-visible{ transform:translateY(0); visibility:visible; }
@media (min-width:768px){ .sticky-cta{ display:none !important; } }
/* ==========================================================================
22 · UTILITIES
========================================================================== */
.visually-hidden{
position:absolute !important;
width:1px; height:1px;
margin:-1px; padding:0;
overflow:hidden;
clip:rect(0 0 0 0);
clip-path:inset(50%);
white-space:nowrap;
border:0;
}
.center{ text-align:center; }
.mt-0{ margin-top:0 !important; }
.mt-16{ margin-top:16px; }
.mt-24{ margin-top:24px; }
.mt-32{ margin-top:32px; }
.mt-40{ margin-top:40px; }
.mt-56{ margin-top:56px; }
.mb-0{ margin-bottom:0 !important; }
.stack-24{ display:grid; gap:24px; }
.stack-32{ display:grid; gap:32px; }
.nowrap{ white-space:nowrap; }
/* Scroll-Anker (Formular) */
[id]{ scroll-margin-top:88px; }
/* ==========================================================================
23 · MOTION
========================================================================== */
@media (prefers-reduced-motion:reduce){
html{ scroll-behavior:auto; }
*,*::before,*::after{
animation-duration:.001ms !important;
animation-iteration-count:1 !important;
transition-duration:.001ms !important;
}
.btn.is-loading::after{ animation:none; border-top-color:transparent; }
.sticky-cta{ transition:none; }
}
@media (forced-colors:active){
.btn{ border:2px solid currentColor; }
.checklist li::before{ background:none; }
:focus-visible{ outline:3px solid CanvasText; }
}
/* ======================================================================
COOKIE-BANNER (CMP-Eigenlösung, per aw.js erzeugt — kein Markup in den
Seiten, damit Header/Footer/Critical-CSS byte-identisch bleiben)
====================================================================== */
.aw-cc{
position:fixed; inset:auto 0 0 0; z-index:9000;
background:var(--anthrazit); color:var(--white);
border-top:3px solid var(--coral);
box-shadow:0 -12px 40px rgba(0,0,0,.28);
}
.aw-cc[hidden]{ display:none; }
.aw-cc__inner{
max-width:var(--maxw); margin-inline:auto;
padding:20px var(--gutter) calc(20px + env(safe-area-inset-bottom));
}
.aw-cc__h{
font-family:var(--ff-head); font-size:1.0625rem; font-weight:700;
margin:0 0 6px; color:var(--white);
}
.aw-cc__t{
margin:0 0 14px; font-size:.9375rem; line-height:1.55;
color:var(--muted-dark); max-width:70ch;
}
.aw-cc__t a{ color:var(--coral-hell); text-underline-offset:2px; }
.aw-cc__actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.aw-cc__actions .btn{ flex:1 1 auto; min-width:180px; justify-content:center; }
.aw-cc__link{
background:none; border:0; padding:10px 4px; cursor:pointer;
font:inherit; font-size:.875rem; color:var(--muted-dark);
text-decoration:underline; text-underline-offset:3px;
}
.aw-cc__link:hover{ color:var(--white); }
.aw-cc__opts{
display:grid; gap:12px; margin:0 0 16px; padding:16px;
background:var(--mittelgrau); border:1px solid var(--hairline-d);
border-radius:var(--r-md);
}
.aw-cc__opts[hidden]{ display:none; }
.aw-cc__opt{
display:grid; grid-template-columns:22px 1fr; gap:10px;
align-items:start; font-size:.875rem; line-height:1.5;
color:var(--muted-card); cursor:pointer;
}
.aw-cc__opt strong{ color:var(--white); font-weight:600; }
.aw-cc__opt input{ width:20px; height:20px; margin-top:2px; accent-color:var(--coral); }
.aw-cc__opts .btn{ justify-self:start; }
.aw-cc__reopen{
background:none; border:0; padding:0; cursor:pointer;
font:inherit; color:inherit; text-decoration:underline; text-underline-offset:3px;
}
.aw-cc__reopen:hover{ color:var(--coral-hell); }
@media (min-width:720px){
.aw-cc__inner{ padding-block:24px; }
.aw-cc__actions .btn{ flex:0 0 auto; }
}
/* Sticky-Mobile-CTA nicht unter dem Banner begraben */
.aw-cc:not([hidden]) ~ .sticky-cta{ display:none; }