/* WAFA-Website: gemeinsames Stylesheet aller Sprachen. Aufbau wie die CamperFilter-Seite; die Seite scrollt ganz normal von oben nach unten. */ *{box-sizing:border-box} /* ======================= FARBEN ======================= Ein Logo gibt es nicht. Die Farben kommen vom Produkt selbst, gemessen an den Shopfotos: Blau #1D4FB8 der gedruckte Adapter – Hauptfarbe, auch Schrift und Verweise Hellblau #4A90E2 die Schrift „WAFA" auf dem Aufkleber – nur Grafik, nie Schrift auf Hell dazu Hellgrau-Blau als zweite Fläche (.band) und das Shop-Gelb #F7B906 – das ist zugleich die Farbe der Staubschutzkappe – für die Knöpfe in den Shop. KONTRAST: Das Produktblau ist dunkel genug für Schrift: auf Weiss 7,3:1, auf dem Hellgrau-Blau der Bänder 6,6:1, auf dem hellen Blau der Empfehlung 6,3:1, weisse Schrift darauf 7,3:1. Hellblau auf Weiss hat nur 3,3:1 – deshalb nur für Flächen und Linien. Gelbe Knöpfe tragen dunkle Schrift (9,2:1) und einen dunklen Rand. Im dunklen Thema wird die Schriftfarbe Blau hell (#94B6FF, 9,2:1 auf dem Grund, 7,9:1 auf Karten). Nachgemessen wird am gerenderten Bild, hell UND dunkel: tools/kontrast.py. ====================================================== */ :root{ --blau:#1D4FB8; /* Produktblau: Flächen, Knöpfe, Schrift auf Hell */ --blau-tief:#163C8C; --hell:#4A90E2; /* Aufkleber-Hellblau: Grafik, Ränder – nie Schrift auf Hell */ --blau-text:#1D4FB8; /* Blau als Schrift- und Verweisfarbe */ --blau-weich:#E6EEFB; /* ganz helles Blau: Kopf, Schilder, Empfehlung */ --gelb-weich:#FFF4D1; --cta:#F7B906; --on-cta:#13203A; /* Shop-Gelb, für Knöpfe in den Shop */ --on-blau:#ffffff; --bg:#ffffff; --ink:#13203A; --muted:#46526A; --line:#D3DCE8; --tint:#EEF3FA; /* Hellgrau-Blau: die zweite Fläche */ --card:#ffffff; --link:var(--blau-text); --focus:#1D4FB8; --err:#B42318; --nav:rgba(255,255,255,.93); --shadow:0 1px 2px rgba(15,30,60,.08),0 10px 28px rgba(15,30,60,.10); --r:18px; } .band{--bg:var(--tint);background:var(--bg)} .band .card,.band .var,.band .acc-card,.band .panel,.band .deckel{--tint:#EEF3FA} /* Dunkles Thema: tiefes Nachtblau statt Weiss, Blau wird hell und bleibt Schriftfarbe. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --blau-text:#94B6FF; --blau-weich:#16285A; --gelb-weich:#3A3014; --bg:#0B1322; --ink:#E8EEF8; --muted:#AAB7CC; --line:#26324A; --tint:#111B30; --card:#16223A; --focus:#94B6FF; --err:#FF8A80; --nav:rgba(11,19,34,.93); --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 28px rgba(0,0,0,.4); } :root:not([data-theme="light"]) .band .card,:root:not([data-theme="light"]) .band .var, :root:not([data-theme="light"]) .band .acc-card,:root:not([data-theme="light"]) .band .panel, :root:not([data-theme="light"]) .band .deckel{--tint:#111B30} } :root[data-theme="dark"]{ --blau-text:#94B6FF; --blau-weich:#16285A; --gelb-weich:#3A3014; --bg:#0B1322; --ink:#E8EEF8; --muted:#AAB7CC; --line:#26324A; --tint:#111B30; --card:#16223A; --focus:#94B6FF; --err:#FF8A80; --nav:rgba(11,19,34,.93); --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 28px rgba(0,0,0,.4); } :root[data-theme="dark"] .band .card,:root[data-theme="dark"] .band .var, :root[data-theme="dark"] .band .acc-card,:root[data-theme="dark"] .band .panel, :root[data-theme="dark"] .band .deckel{--tint:#111B30} @media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} } /* ---------- Grundlagen ---------- */ body{margin:0;background:var(--bg);color:var(--ink); font-family:'Atkinson Hyperlegible',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased} img{max-width:100%} [hidden]{display:none!important} h1,h2,h3{font-family:'Sora',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:700;line-height:1.12;text-wrap:balance;margin:0;letter-spacing:-.015em} h2{font-size:clamp(1.7rem,4vw,2.3rem);margin-bottom:.5em} h3{font-size:1.12rem;margin-bottom:.35em;letter-spacing:0} p{margin:0 0 1em} p:last-child{margin-bottom:0} a{color:var(--link);text-decoration:underline;text-underline-offset:2px} :focus-visible{outline:3px solid var(--focus);outline-offset:3px} .wrap{max-width:1080px;margin:0 auto;padding:0 24px} .narrow{max-width:780px} section{padding:80px 0;background:var(--bg);color:var(--ink)} section[id],header[id],article[id],figure[id],div[id]{scroll-margin-top:76px} @media (max-width:640px){section{padding:56px 0}.wrap{padding:0 16px}} .lead{font-size:1.18rem;max-width:38em} .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--blau-text);margin-bottom:14px} .eyebrow::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--cta);box-shadow:0 0 0 3px var(--blau)} .small{font-size:.95rem;color:var(--muted)} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .skip{position:absolute;left:12px;top:-120px;z-index:100;background:var(--card);color:var(--ink);padding:10px 16px;border-radius:10px;box-shadow:var(--shadow);font-weight:700} .skip:focus{top:12px} /* ---------- Knöpfe ---------- Gelb für Wege in den Shop. Blau für Wege auf dieser Seite (Finder). Der dunkle Rand hält den gelben Knopf auch auf hellem Grund klar umrissen. */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:10px 22px;border-radius:12px; border:2px solid #13203A;font:inherit;font-weight:700;font-size:1rem;cursor:pointer;text-decoration:none; background:var(--cta);color:var(--on-cta);transition:transform .15s,box-shadow .15s;text-align:center} .btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.18)} .btn.blau{background:var(--blau);color:var(--on-blau);border-color:var(--blau)} .btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)} .btn.sm{min-height:44px;padding:6px 16px;font-size:.92rem;border-radius:10px} .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px} @media (prefers-reduced-motion: reduce){.btn,.btn:hover{transition:none;transform:none}} .linkbtn{background:none;border:0;padding:8px 0;min-height:44px;font:inherit;font-weight:700;color:var(--link);text-decoration:underline;text-underline-offset:2px;cursor:pointer} /* ---------- Navigation ---------- */ .nav{position:sticky;top:0;z-index:50;background:var(--nav);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);color:var(--ink)} .nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;max-width:1360px} .wm{display:inline-flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;flex:none} .wm .mk{width:34px;height:34px;flex:none} /* feste Breite: SVG ohne Breitenangabe wird im Flex-Kasten 0 breit */ .wm .word{font-family:'Sora',system-ui,sans-serif;font-weight:700;font-size:1.45rem;letter-spacing:.02em;color:var(--blau-text)} .nav ul{list-style:none;margin:0;padding:0;display:flex;gap:2px} .nav ul a{display:block;padding:8px 10px;border-radius:99px;color:var(--ink);text-decoration:none;font-weight:700;font-size:.92rem;white-space:nowrap} .nav ul a:hover{background:var(--tint)} .nav .right{display:flex;align-items:center;gap:10px;margin-left:auto} .lang{display:flex;gap:1px} .lang a{padding:8px 7px;border-radius:8px;font-size:.8rem;font-weight:700;color:var(--muted);text-decoration:none;letter-spacing:.03em} .lang a:hover{background:var(--tint);color:var(--ink)} .lang a[aria-current]{color:var(--blau-text);background:var(--blau-weich)} .lang:empty{display:none} .nav .btn.sm{white-space:nowrap} /* Unterhalb dieser Breiten passt das Menü nicht mehr neben Wortmarke, Sprachen und Knopf. Nachgemessen mit allen fünf Sprachen (Französisch und Spanisch brauchen am meisten). */ @media (max-width:1240px){.nav ul{display:none}} @media (max-width:1320px){html:lang(fr) .nav ul,html:lang(es) .nav ul,html:lang(it) .nav ul{display:none}} @media (max-width:520px){.nav .btn.sm{display:none}} @media (max-width:380px){.wm .mk{width:28px;height:28px}.wm .word{font-size:1.2rem}.lang a{padding:8px 5px;font-size:.76rem}.nav .wrap{gap:6px}} /* ---------- Kopf ---------- */ .hero{padding:52px 0 70px;color:var(--ink);background: radial-gradient(60% 80% at 82% 40%, rgba(74,144,226,.30), transparent 70%), linear-gradient(180deg,var(--blau-weich),var(--bg))} .hero-grid{display:grid;grid-template-columns:1fr;gap:34px;align-items:center} @media (min-width:880px){.hero-grid{grid-template-columns:1.1fr .9fr;gap:48px}.hero{padding:70px 0 88px}} .ptag{display:inline-flex;align-items:center;gap:9px;margin:0 0 20px;padding:6px 14px 6px 8px;border-radius:99px; background:var(--card);border:1px solid var(--line);font-weight:700;font-size:.92rem;box-shadow:var(--shadow)} .ptag svg{width:22px;height:22px;flex:none} .hero .ptag{font-family:inherit;line-height:1.3;letter-spacing:0;text-wrap:wrap} .hero-title{font-family:'Sora',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:700;line-height:1.12; font-size:clamp(2.1rem,5.2vw,3.5rem);max-width:15ch;margin:0 0 .4em;letter-spacing:-.025em;text-wrap:balance} .hero .lead{font-size:1.2rem;max-width:32em} .trust{display:grid;grid-template-columns:1fr;gap:8px 22px;margin:28px 0 0;padding:0;list-style:none;font-size:.97rem} @media (min-width:520px){.trust{grid-template-columns:1fr 1fr}} .trust li{display:flex;align-items:flex-start;gap:9px} .trust svg,.ticks svg,.spec svg{width:18px;height:18px;flex:none;margin-top:.2em;color:var(--blau-text)} .trust svg *,.ticks svg *,.spec svg *,.cap .min svg *{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} .stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px} .stage picture{display:contents} .stage img{position:relative;display:block;width:auto;height:auto;max-width:100%;max-height:420px;filter:drop-shadow(0 22px 34px rgba(10,30,80,.35))} @media (max-width:879px){.stage img{max-height:320px}} .stage .by{position:relative;display:inline-flex;align-items:center;gap:8px;margin:0;padding:6px 14px 6px 8px;border-radius:99px;background:var(--card); font-size:.85rem;font-weight:700;color:var(--muted);box-shadow:var(--shadow)} .stage .by svg{height:18px;width:18px;flex:none} /* ---------- Karten & Raster ---------- */ .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow)} .grid3,.grid4{display:grid;grid-template-columns:1fr;gap:18px} @media (min-width:640px){.grid3,.grid4{grid-template-columns:repeat(2,1fr)}} @media (min-width:960px){.grid3{grid-template-columns:repeat(3,1fr)}} @media (min-width:1020px){.grid4{grid-template-columns:repeat(4,1fr)}} .grid3 .card,.grid4 .card{display:flex;flex-direction:column} .grid3 p,.grid4 p{font-size:1rem} .two{display:grid;grid-template-columns:1fr;gap:18px} @media (min-width:780px){.two{grid-template-columns:1fr 1fr}} .glyph{width:54px;height:54px;margin-bottom:16px;color:var(--ink);flex:none;background:var(--blau-weich);border-radius:14px;padding:10px} .glyph *{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} .glyph .acc{stroke:var(--blau-text)} .tags{margin:0 0 8px} .tag{display:inline-block;padding:3px 10px;border-radius:99px;font-size:.78rem;font-weight:700;letter-spacing:.02em;vertical-align:middle} .tag.blau{background:var(--blau);color:#fff} .tag.gelb{background:var(--cta);color:#13203A} /* ---------- So funktioniert's: Hahn → Kupplung → WAFA → Tank ---------- */ .flow{list-style:none;margin:34px 0 10px;padding:0;display:grid;grid-template-columns:1fr;gap:34px} .flow .st{position:relative;display:grid;grid-template-columns:72px 1fr;grid-template-rows:auto auto;column-gap:16px;align-items:center; background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;box-shadow:var(--shadow)} .flow .ico{grid-row:1 / span 2;width:72px;height:72px;border-radius:16px;background:var(--blau-weich);display:flex;align-items:center;justify-content:center} .flow .ico svg{width:52px;height:52px} .flow .ico svg *{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .flow .ico .w{stroke:var(--blau-text)} .flow b{font-family:'Sora',system-ui,sans-serif;font-size:1.05rem;align-self:end} .flow .txt{font-size:.95rem;color:var(--muted);align-self:start} .flow .st2 .ico{background:var(--blau)} .flow .st2 .ico svg *{stroke:#fff} .flow .st2 .ico .w{stroke:var(--cta);fill:var(--cta)} .flow .st:not(:last-child)::after{content:"";position:absolute;left:52px;top:100%;width:14px;height:34px;border-radius:0 0 4px 4px; background-color:var(--hell);background-repeat:repeat-y;background-size:14px 18px; background-image:radial-gradient(circle at 7px 6px,rgba(255,255,255,.75) 2px,transparent 2.5px)} @media (prefers-reduced-motion: no-preference){ .flow .st:not(:last-child)::after{animation:fliessen-senkrecht 1.6s linear infinite} } @keyframes fliessen-senkrecht{to{background-position:0 18px}} @media (min-width:900px){ .flow{grid-template-columns:repeat(4,1fr);gap:28px} .flow .st{grid-template-columns:1fr;grid-template-rows:auto;justify-items:center;text-align:center;padding:20px 16px;row-gap:8px} .flow .ico{grid-row:auto;width:84px;height:84px} .flow .ico svg{width:60px;height:60px} .flow b,.flow .txt{align-self:auto} .flow .st:not(:last-child)::after{left:100%;top:62px;width:28px;height:14px;border-radius:0 4px 4px 0;background-repeat:repeat-x;background-size:18px 14px; background-image:radial-gradient(circle at 6px 7px,rgba(255,255,255,.75) 2px,transparent 2.5px)} @media (prefers-reduced-motion: no-preference){ .flow .st:not(:last-child)::after{animation-name:fliessen-waagerecht} } } @keyframes fliessen-waagerecht{to{background-position:18px 0}} .prinzip-two{margin-top:30px;align-items:center;gap:30px} .points{display:grid;gap:16px} .point{padding:18px 20px;border-radius:14px;background:var(--card);border-left:5px solid var(--blau)} .point h3{font-size:1.08rem} .point p{font-size:1rem} /* ---------- WAFA oder WAFA+ ---------- */ .bauart{border-top:6px solid var(--blau)} .bauart.plus{border-top-color:var(--cta)} .bauart h3{font-size:1.35rem} .bauart .small{margin:0 0 14px} /* ---------- Fotos ---------- */ figure{margin:0} .shot{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow)} .shot > img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover} .ticks{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:.98rem} .ticks li{display:flex;gap:10px;align-items:flex-start} /* ---------- Kann / kann nicht ---------- */ .can{border-top:5px solid var(--blau)} .cant{border-top:5px solid var(--muted)} .cant .ticks svg{color:var(--muted)} .can h3,.cant h3{margin-bottom:.8em} /* ---------- Finder ---------- */ .panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow)} @media (max-width:480px){.panel{padding:16px}} #finder{border:2px solid var(--blau)} .finder-h{font-size:clamp(1.5rem,3.4vw,2rem);margin-bottom:.3em} .q{font-family:'Sora',system-ui,sans-serif;font-weight:600;font-size:1.1rem;line-height:1.3;margin:0 0 12px;letter-spacing:-.01em} .qblock{margin-bottom:24px} .opts{display:grid;grid-template-columns:1fr;gap:10px} @media (min-width:560px){.opts{grid-template-columns:1fr 1fr}} @media (min-width:900px){.opts.four{grid-template-columns:repeat(4,1fr)}} @media (min-width:820px){.opts.three{grid-template-columns:repeat(3,1fr)}} .opts.hst{grid-template-columns:repeat(2,1fr)} @media (min-width:640px){.opts.hst{grid-template-columns:repeat(3,1fr)}} @media (min-width:900px){.opts.hst{grid-template-columns:repeat(4,1fr)}} .opts.hst .wide{grid-column:1 / -1} .opt{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;text-align:left;min-height:52px;padding:13px 18px;border-radius:12px; border:2px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-weight:700;cursor:pointer;transition:border-color .15s,background .15s} .opt.sm{min-height:46px;padding:9px 14px} .opt small{font-weight:400;font-size:.9rem;color:var(--muted)} .opt:hover{border-color:var(--blau-text)} .opt[aria-pressed="true"]{border-color:var(--blau-text);background:var(--blau-weich)} .hint{margin:-8px 0 24px;padding:12px 14px;border-radius:12px;background:var(--gelb-weich);font-size:.97rem} .result{margin-top:4px;border-radius:14px;padding:20px;background:var(--blau-weich);color:var(--ink)} .result b.h{display:block;font-family:'Sora',system-ui,sans-serif;font-size:1.45rem;margin-bottom:6px} .result .cta{margin-top:16px} .result .btn.ghost{background:var(--card)} .result-grid{display:grid;grid-template-columns:1fr;gap:20px;align-items:center} @media (min-width:760px){.result-grid{grid-template-columns:1.4fr 1fr}} .check{background:var(--card);border-radius:14px;overflow:hidden;border:1px solid var(--line)} .check img{display:block;width:100%;height:220px;object-fit:contain;background:#fff} .check figcaption{padding:10px 14px;font-size:.92rem;display:grid;gap:2px} .check figcaption span{color:var(--muted)} #finder .none{margin:18px 0 0} /* ---------- Deckel erkennen ---------- */ .deckel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:28px} @media (min-width:760px){.deckel-grid{grid-template-columns:repeat(4,minmax(0,1fr))}} .deckel{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)} .deckel img{display:block;width:100%;height:150px;object-fit:contain;background:#fff;padding:8px} .deckel figcaption{padding:12px 14px;display:grid;gap:3px;font-size:.92rem} .deckel figcaption b{font-size:.98rem} .deckel figcaption span{color:var(--muted)} .deckel figcaption .fits{color:var(--ink);font-weight:700;margin-top:4px} .deckel:target{outline:3px solid var(--blau);outline-offset:2px} .deckel{position:relative} .deckel .haeufig{position:absolute;top:10px;left:10px;z-index:1} .tab tr.meiste th,.tab tr.meiste td{background:var(--gelb-weich)} .how{margin:0;padding-left:20px;display:grid;gap:10px} .schablone .btn{margin-top:4px} .table-wrap{margin-top:28px;overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--card);box-shadow:var(--shadow)} .tab{width:100%;border-collapse:collapse;font-size:.95rem;min-width:560px} .tab caption{text-align:left;padding:14px 16px 4px;font-family:'Sora',system-ui,sans-serif;font-weight:700;font-size:1.05rem} .tab th,.tab td{padding:11px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)} .tab tr:last-child th,.tab tr:last-child td{border-bottom:0} .tab thead th{font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);background:var(--tint)} .tab tbody th{font-weight:700} .missing{margin-top:18px;padding:14px 16px;border-radius:12px;background:var(--gelb-weich);max-width:48em} /* ---------- Modelle ---------- */ .vars{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:28px} @media (min-width:620px){.vars{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:980px){.vars{grid-template-columns:repeat(3,minmax(0,1fr))}} .var{display:flex;flex-direction:column;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow);position:relative} .var img{display:block;width:100%;height:210px;object-fit:contain;background:#fff;border-radius:12px;margin-bottom:12px} .var.pick{border-color:var(--blau);box-shadow:0 0 0 3px var(--blau),var(--shadow)} .var.pick::before{content:attr(data-pick);position:absolute;top:-13px;left:18px;padding:3px 12px;border-radius:99px;background:var(--blau);color:#fff;font-size:.8rem;font-weight:700} .var h3{font-size:1.3rem} .var .who{color:var(--muted);font-size:.98rem;margin:6px 0 14px} .var .spec{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:7px;font-size:.95rem} .var .spec li{display:flex;gap:9px;align-items:flex-start} .var .sku{font-size:.82rem;color:var(--muted);margin:0 0 12px;letter-spacing:.02em} .var .buy{margin-top:auto;display:flex;flex-direction:column;gap:8px;align-items:stretch} .var .buy .btn{display:block;line-height:1.3;padding-top:11px;padding-bottom:11px} .var .buy .btn.hit{box-shadow:0 0 0 3px var(--blau)} /* ---------- Drei Schritte (Foto-Stepper) ---------- */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:16px;background:var(--tint);padding:6px;border-radius:14px} .step{min-height:48px;border:0;background:transparent;color:var(--ink);border-radius:10px; font:inherit;font-weight:700;font-size:.95rem;cursor:pointer;padding:8px 6px;line-height:1.2} .step[aria-pressed="true"]{background:var(--blau);color:#fff} @media (max-width:420px){.step{font-size:.84rem;padding:8px 4px}} .walkthrough{display:grid;grid-template-columns:1fr;gap:20px;align-items:center} @media (min-width:760px){.walkthrough{grid-template-columns:1fr 1fr;gap:28px}} .frame{position:relative;border-radius:16px;overflow:hidden;background:#fff;aspect-ratio:1/1} .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease} .frame img.on{opacity:1} .frame .num{position:absolute;left:14px;top:14px;z-index:2;width:40px;height:40px;border-radius:12px;background:var(--cta);color:#13203A; display:flex;align-items:center;justify-content:center;font-family:'Sora',system-ui,sans-serif;font-weight:700;font-size:1.15rem;box-shadow:0 6px 16px rgba(0,0,0,.25)} @media (prefers-reduced-motion: reduce){.frame img{transition:none}} .cap h3{font-size:1.3rem;margin-bottom:.4em} .cap p{font-size:1.05rem} .cap .min{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:7px 14px;border-radius:99px;background:var(--gelb-weich);color:var(--ink);font-weight:700;font-size:.9rem} .cap .min svg{width:18px;height:18px;flex:none;color:var(--ink)} .next{margin-top:18px;width:100%} @media (min-width:520px){.next{width:auto}} /* ---------- Passt dazu ---------- */ .acc-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:28px} @media (min-width:820px){.acc-grid{grid-template-columns:1fr 1fr}} @media (min-width:1000px){.acc-grid.three{grid-template-columns:repeat(3,1fr)}} .acc-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)} .acc-card img{display:block;width:100%;height:220px;object-fit:contain;background:#fff} .acc-card .txt{padding:20px 22px;display:flex;flex-direction:column;gap:4px;flex:1} .acc-card .btn{margin-top:auto;align-self:flex-start} .acc-card p{margin-bottom:14px} /* ---------- Aufklapper ---------- */ details{border-bottom:1px solid var(--line)} .acc{border-top:1px solid var(--line)} summary{cursor:pointer;padding:16px 0;font-weight:700;font-size:1.05rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:52px} summary::-webkit-details-marker{display:none} summary::after{content:"+";font-family:'Sora',system-ui,sans-serif;font-size:1.5rem;line-height:1;color:var(--ink);flex:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--blau-weich)} details[open] summary::after{content:"–"} details .in{padding:0 0 18px;max-width:64ch} /* ---------- Sprachweiche ---------- */ .router{min-height:80vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:40px 20px;color:var(--ink)} .router-wm{display:inline-flex;align-items:center;gap:14px;margin:0;font-family:'Sora',system-ui,sans-serif;font-weight:700;font-size:3rem;color:var(--blau-text)} .router-wm svg{width:58px;height:58px} .router ul{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-wrap:wrap;gap:12px;justify-content:center} .router ul a{display:inline-block;min-width:150px;padding:14px 20px;border-radius:12px;background:var(--card);border:1px solid var(--line);color:var(--ink);font-weight:700;text-decoration:none;box-shadow:var(--shadow)} /* ---------- Kontakt (dunkler Abschnitt, in beiden Themen gleich) ---------- */ .dark{--bg:#10224A;--ink:#ffffff;--muted:rgba(255,255,255,.88);--link:#A9C4FF;--focus:#A9C4FF; background:radial-gradient(60% 90% at 90% 0%, rgba(74,144,226,.35), transparent 65%),#10224A;color:#fff} .dark .eyebrow{color:#A9C4FF} .cform{margin-top:26px;display:grid;gap:14px;position:relative} .cform .row2{display:grid;gap:14px;grid-template-columns:1fr 1fr} @media (max-width:640px){.cform .row2{grid-template-columns:1fr}} .cform label{display:grid;gap:6px;font-weight:700;font-size:.95rem;color:#fff} .cform input,.cform select,.cform textarea{width:100%;font:inherit;font-size:16px;font-weight:400;color:#13203A;background:#fff;border:1px solid rgba(255,255,255,.35);border-radius:12px;padding:12px 14px;min-height:48px} .cform textarea{resize:vertical;min-height:150px} .cform input:focus,.cform select:focus,.cform textarea:focus{outline:3px solid #A9C4FF;outline-offset:2px} .cform .fhint{font-weight:400;font-size:.9rem;color:rgba(255,255,255,.9)} .cform .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;margin:0} .cform .cta{margin-top:4px} .cform .small{font-size:.9rem;color:rgba(255,255,255,.9);margin:0} .dark .btn{border-color:#F7B906} .fmsg{margin:0;padding:12px 16px;border-radius:12px;font-weight:700;line-height:1.45} .fmsg.ok{background:rgba(120,200,120,.22);color:#e3f5df;border:1px solid rgba(120,200,120,.8)} .fmsg.err{background:rgba(198,40,40,.28);color:#ffdada;border:1px solid rgba(240,120,120,.7)} .fnote{display:none} .fnote:target{display:block;margin-top:16px} .mailto{display:inline-flex;align-items:center;gap:10px;margin-top:10px;font-weight:700;color:#fff;text-decoration:none;font-size:1.05rem} .mailto svg{width:22px;height:22px;flex:none;color:#A9C4FF} .mailto svg *{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* ---------- Fuß ---------- */ .foot{padding:40px 0 52px;font-size:.92rem;color:var(--muted);border-top:1px solid var(--line);background:var(--tint)} .foot b{color:var(--ink)} .foot-logos{display:flex;align-items:center;gap:20px;flex-wrap:wrap} .foot-wm{display:inline-flex;align-items:center;gap:10px;flex:none} .foot-wm svg{width:44px;height:44px} .foot-wm span{display:grid;line-height:1.1} .foot-wm b{font-family:'Sora',system-ui,sans-serif;font-size:1.5rem;color:var(--blau-text)} .foot-wm small{font-size:.85rem;color:var(--muted)} .foot-logos .cs{height:56px;width:auto;background:#fff;border-radius:12px;padding:4px} .foot-logos .txt{flex:1 1 240px} .social{display:flex;flex-wrap:wrap;align-items:center;gap:0 22px;margin:22px 0 0} .social .lbl{margin-right:2px} .social a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;color:var(--muted);text-decoration:none} .social a:hover,.social a:focus-visible{color:var(--link)} .social svg{width:22px;height:22px;fill:currentColor;flex:none} @media (max-width:480px){.social .lbl{flex:0 0 100%;margin:0}} .legal{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px 18px} .legal a{color:var(--muted);display:inline-block;padding:6px 0} /* Der Widerrufsknopf ist kein Werbeknopf: Umriss statt Gelb. */ .widerruf{margin:16px 0 0} .widerruf .btn{background:transparent;color:var(--ink);border:2px solid var(--ink)} .widerruf .btn:hover{background:var(--ink);color:var(--bg)} /* ---------- Einblenden beim Scrollen (nur mit JavaScript, sonst alles sichtbar) ---------- */ html.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease} html.js .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion: reduce){html.js .reveal{opacity:1;transform:none;transition:none}} @media print{html.js .reveal{opacity:1;transform:none}.nav{position:static}} /* ---------- Ohne JavaScript: tote Bedienelemente ausblenden ---------- Der Stepper zeigt dann Schritt 1 als Bild mit Text, die Schritte 2 und 3 stehen im