/* CamperFilter-Website: gemeinsames Stylesheet aller Sprachen. Die Seite scrollt ganz normal von oben nach unten – anders als beim WaterBob gibt es hier keine waagerechte Bahn. */ *{box-sizing:border-box} /* ======================= FARBEN ======================= Alle aus dem CamperFilter-Logo: Cyan #31B6E2 Tropfen und „Filter" – Hauptfarbe (Flächen, Grafik, Ränder) Grün #8AC642 kleiner Tropfen, Slogan – Akzent für „sauber/natürlich" Schwarz #201C1C „Camper" – Schrift dazu Hellgrau als zweite Fläche (.band) und das Shop-Gelb #F7B906 nur für Knöpfe. KONTRAST: Cyan und Grün taugen NICHT als Schriftfarbe auf Weiss (2,35:1 und 2,05:1), auch nicht für weisse Schrift auf farbiger Fläche. Für Text und Verweise gibt es dunklere Töne. Achtung: #177FA1 schafft auf Weiss 4,58:1, auf dem Hellgrau der Bänder aber nur 4,06:1 – deshalb ist --cyan-text noch eine Stufe dunkler (#136F8D: 5,7:1 auf Weiss, 5,1:1 auf Grau). Dasselbe beim Grün (#4E7322). Dunkle Schrift auf Cyan (7,2:1) und auf Grün (8,2:1) geht dagegen gut. Gemessen wird am gerenderten Bild, hell UND dunkel – siehe README, „Kontrast". ====================================================== */ :root{ --cyan:#31B6E2; /* Logo-Cyan: Flächen, Grafik, Ränder – nie Schrift auf Hell */ --gruen:#8AC642; /* Logo-Grün: Akzent, Haken – nie Schrift auf Hell */ --cyan-text:#136F8D; /* Cyan für Text und Verweise auf Weiss und Grau */ --gruen-text:#4E7322; /* Grün für Text auf Weiss und Grau */ --cyan-weich:#E3F4FB; /* ganz helles Cyan: Kopf, Schilder, Empfehlung */ --gruen-weich:#EDF6E2; --cta:#F7B906; --on-cta:#201C1C; /* Shop-Gelb, nur für Knöpfe in den Shop */ --bg:#ffffff; --ink:#201C1C; --muted:#4A5257; --line:#D5DDE1; --tint:#EEF2F4; /* Hellgrau: die zweite Fläche */ --card:#ffffff; --link:var(--cyan-text); --focus:#136F8D; --err:#B42318; --nav:rgba(255,255,255,.92); --shadow:0 1px 2px rgba(20,40,50,.08),0 10px 28px rgba(20,40,50,.10); --r:18px; } /* graue Bänder: dieselben Farben, nur der Grund wechselt */ .band{--bg:var(--tint);background:var(--bg)} /* Karten auf den grauen Bändern bleiben weiss */ .band .card,.band .var,.band .acc-card,.band .panel,.band .stage-card{--tint:#EEF2F4} /* Dunkles Thema: tiefes Petrol statt Weiss, Cyan und Grün werden hell und damit Schriftfarbe. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --cyan-text:#5FC9EC; --gruen-text:#9CD35A; --cyan-weich:#11303B; --gruen-weich:#1C2E14; --bg:#0E1518; --ink:#E8F1F4; --muted:#A9BAC1; --line:#2A3A40; --tint:#151F23; --card:#1A262B; --focus:#5FC9EC; --err:#FF8A80; --nav:rgba(14,21,24,.92); --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 .stage-card{--tint:#151F23} } :root[data-theme="dark"]{ --cyan-text:#5FC9EC; --gruen-text:#9CD35A; --cyan-weich:#11303B; --gruen-weich:#1C2E14; --bg:#0E1518; --ink:#E8F1F4; --muted:#A9BAC1; --line:#2A3A40; --tint:#151F23; --card:#1A262B; --focus:#5FC9EC; --err:#FF8A80; --nav:rgba(14,21,24,.92); --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 .stage-card{--tint:#151F23} @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]{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(--cyan-text);margin-bottom:14px} .eyebrow::before{content:"";width:9px;height:12px;background:var(--gruen); clip-path:path("M4.5 0C3 2.6 0 6 0 7.6a4.5 4.5 0 0 0 9 0C9 6 6 2.6 4.5 0z")} .big{font-family:'Sora',system-ui,sans-serif;font-weight:600;font-size:clamp(1.2rem,2.6vw,1.45rem);line-height:1.38;max-width:30em;margin:0 0 .8em;letter-spacing:-.01em} .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 nur für Wege in den Shop. Der dunkle Rand hält den Knopf auch auf hellem Grund klar umrissen (Gelb auf Weiss allein hätte als Fläche zu wenig Kontrast). */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:10px 22px;border-radius:12px; border:2px solid #201C1C;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} .btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.18)} .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}} /* ---------- 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} /* Die Leiste darf breiter sein als der Inhalt: Französisch und Spanisch haben lange Menüwörter. */ .wm{display:inline-flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;flex:none} .wm .drop{width:24px;height:38px;flex:none} /* feste Breite: SVG ohne Breitenangabe wird im Flex-Kasten 0 breit */ .wm .word{width:143px;height:31px;flex:none} .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(--cyan-text);background:var(--cyan-weich)} .nav .btn.sm{white-space:nowrap} /* Unterhalb dieser Breiten passt das Menü nicht mehr neben Logo, Sprachen und Knopf. Französisch und Spanisch haben die längsten Menüwörter. Nachgemessen mit allen fünf Sprachen. */ @media (max-width:1190px){.nav ul{display:none}} @media (max-width:1260px){html:lang(fr) .nav ul,html:lang(es) .nav ul{display:none}} @media (max-width:520px){.nav .btn.sm{display:none}} @media (max-width:380px){.wm .drop{width:18px;height:28px}.wm .word{width:102px;height:22px}.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% 38%, rgba(49,182,226,.34), transparent 70%), linear-gradient(180deg,var(--cyan-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 10px;border-radius:99px; background:var(--card);border:1px solid var(--line);font-weight:700;font-size:.92rem;box-shadow:var(--shadow)} .ptag svg{width:13px;height:20px;flex:none} .hero h1{font-size:clamp(2.1rem,5.2vw,3.5rem);max-width:15ch;margin-bottom:.4em;letter-spacing:-.025em} .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(--gruen-text)} .trust svg *,.ticks svg *,.spec svg *,.why-ico *,.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:580px;filter:drop-shadow(0 22px 34px rgba(0,40,60,.35))} @media (max-width:879px){.stage img{max-height:440px}} .stage .by{position:relative;display:inline-flex;align-items:center;gap:8px;margin:0;padding:6px 14px;border-radius:99px;background:var(--card); font-size:.85rem;font-weight:700;color:var(--muted);box-shadow:var(--shadow)} .stage .by svg{height:16px;width:10px;flex:none} /* ---------- Karten & Raster ---------- */ .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow)} .grid3{display:grid;grid-template-columns:1fr;gap:18px} @media (min-width:640px){.grid3{grid-template-columns:repeat(2,1fr)}} @media (min-width:960px){.grid3{grid-template-columns:repeat(3,1fr)}} .grid3 .card{display:flex;flex-direction:column} .grid3 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(--cyan-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(--cyan-text)} .glyph .bad{stroke:#8a5a2b;fill:#8a5a2b} :root[data-theme="dark"] .glyph .bad{stroke:#d9a06a;fill:#d9a06a} @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .glyph .bad{stroke:#d9a06a;fill:#d9a06a}} /* ---------- Durchlauf-Grafik: Hahn → Stufe 1 → Stufe 2 → Tank ---------- Zwischen den Stationen läuft eine Leitung. Was darin schwimmt, zeigt, was die vorige Station zurückgehalten hat: braune Körner (Sand, Rost) und graue Punkte (Gelöstes) vor Stufe 1, nur noch graue Punkte danach, klares Wasser am Ende. */ .flow{list-style:none;margin:34px 0 10px;padding:0;display:grid;grid-template-columns:1fr;gap:34px;counter-reset:st} .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(--cyan-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(--cyan-text)} .flow .ico .k{fill:var(--ink);stroke:none} .flow .ico .dirt{fill:#8a5a2b;stroke:none} .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 .st1 .ico,.flow .st2 .ico{background:var(--cyan)} .flow .st1 .ico .w,.flow .st2 .ico .w{stroke:#201C1C} .flow .st1 .ico svg *,.flow .st2 .ico svg *{stroke:#201C1C} .flow .st2 .ico .k{fill:#201C1C} .flow .st3 .ico{background:var(--gruen)} .flow .st3 .ico svg *{stroke:#201C1C} /* die Leitung zur nächsten Station */ .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(--cyan);background-repeat:repeat-y;background-size:14px 18px} .flow .st0::after{background-image:radial-gradient(circle at 4px 5px,#8a5a2b 2.6px,transparent 3px),radial-gradient(circle at 10px 13px,#55616a 1.4px,transparent 1.8px)} .flow .st1::after{background-image:radial-gradient(circle at 9px 6px,#55616a 1.4px,transparent 1.8px)} .flow .st2::after{background-color:#7fd3ef} @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} .flow .st0::after{background-image:radial-gradient(circle at 5px 4px,#8a5a2b 2.6px,transparent 3px),radial-gradient(circle at 13px 10px,#55616a 1.4px,transparent 1.8px)} .flow .st1::after{background-image:radial-gradient(circle at 6px 9px,#55616a 1.4px,transparent 1.8px)} @media (prefers-reduced-motion: no-preference){ .flow .st:not(:last-child)::after{animation-name:fliessen-waagerecht} } } @keyframes fliessen-waagerecht{to{background-position:18px 0}} /* ---------- Die beiden Stufen ---------- */ .stages{display:grid;grid-template-columns:1fr;gap:20px;margin-top:30px} @media (min-width:880px){.stages{grid-template-columns:1fr 1fr}} .stage-card{display:grid;grid-template-columns:1fr;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)} @media (min-width:560px){.stage-card{grid-template-columns:180px 1fr}} .stage-card img{display:block;width:100%;height:auto;max-height:280px;object-fit:contain;background:#fff;padding:8px;align-self:center} .stage-card .txt{padding:22px} .stufe{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-weight:700;color:var(--muted);font-size:.92rem} .stufe .n{width:34px;height:34px;border-radius:10px;background:var(--cyan);color:#201C1C;display:flex;align-items:center;justify-content:center; font-family:'Sora',system-ui,sans-serif;font-size:1.1rem;font-weight:700;flex:none} #stufe-2 .stufe .n{background:#201C1C;color:#fff;box-shadow:inset 0 0 0 2px var(--cyan)} .stage-card h3{font-size:1.35rem;margin-bottom:.6em} .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} .care{margin:16px 0 0;padding:12px 14px;border-radius:12px;background:var(--gruen-weich);font-size:.95rem} .why{display:flex;gap:16px;align-items:flex-start;margin-top:22px;padding:22px;border-radius:var(--r);background:var(--card);border:2px solid var(--gruen)} .why-ico{width:30px;height:30px;flex:none;color:var(--gruen-text)} .why h3{font-size:1.15rem} /* ---------- 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} .shot figcaption{padding:12px 16px;font-size:.92rem;color:var(--muted)} .shots{display:grid;grid-template-columns:1fr;gap:18px;margin-top:30px} .shots.pair{grid-template-columns:1fr} @media (min-width:560px){.shots.pair{grid-template-columns:1fr 1fr}} .pull{margin:22px 0 0;padding:4px 0 4px 18px;border-left:4px solid var(--gruen)} .pull p{font-family:'Sora',system-ui,sans-serif;font-weight:600;font-size:1.1rem;margin-bottom:.3em} .pull footer{font-size:.9rem;color:var(--muted)} /* ---------- Kann / kann nicht ---------- */ .can{border-top:5px solid var(--gruen)} .cant{border-top:5px solid var(--muted)} .cant .ticks svg{color:var(--muted)} .can h3,.cant h3{margin-bottom:.8em} /* ---------- Kundenstimmen ---------- */ .review{display:flex;flex-direction:column;gap:10px} .review blockquote{margin:0} .review blockquote p{font-size:1.05rem} .review figcaption{font-size:.92rem;color:var(--muted);margin-top:auto} .stars{display:flex;gap:3px;margin:0} .stars svg{width:20px;height:20px;fill:#F7B906;stroke:#8a6100;stroke-width:1} /* ---------- Sets ---------- */ .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(--cyan);box-shadow:0 0 0 3px var(--cyan),var(--shadow)} .var.pick::before{content:attr(data-pick);position:absolute;top:-13px;left:18px;padding:3px 12px;border-radius:99px;background:var(--cyan);color:#201C1C;font-size:.8rem;font-weight:700} .var .tags{margin:0 0 8px} .var h3{font-size:1.2rem} .var .who{color:var(--muted);font-size:.98rem;margin:6px 0 14px} .var .spec{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:7px;font-size:.95rem} .var .spec li{display:flex;gap:9px;align-items:flex-start} .var .btn{margin-top:auto;align-self:flex-start} .tag{display:inline-block;padding:3px 10px;border-radius:99px;font-size:.78rem;font-weight:700;letter-spacing:.02em;vertical-align:middle} .tag.cyan{background:var(--cyan);color:#201C1C} .tag.green{background:var(--gruen);color:#201C1C} .tag.gelb{background:var(--cta);color:#201C1C} /* ---------- Finder ---------- */ .panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow)} @media (max-width:480px){.panel{padding:14px}} #finder{margin-top:28px;border:2px solid var(--cyan)} .finder-h{font-size:1.45rem;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:22px} .opts{display:grid;grid-template-columns:1fr;gap:10px} @media (min-width:560px){.opts{grid-template-columns:1fr 1fr}} @media (min-width:820px){.opts.three{grid-template-columns:repeat(3,1fr)}} .opt{display:flex;flex-direction:column;align-items:flex-start;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 small{font-weight:400;font-size:.9rem;color:var(--muted)} .opt:hover{border-color:var(--cyan-text)} .opt[aria-pressed="true"]{border-color:var(--cyan-text);background:var(--cyan-weich)} .result{margin-top:4px;border-radius:14px;padding:18px 20px;background:var(--cyan-weich);color:var(--ink)} .result b.h{display:block;font-family:'Sora',system-ui,sans-serif;font-size:1.2rem;margin-bottom:4px} .result .cta{margin-top:16px} /* ---------- 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:#201C1C;color:#fff} :root[data-theme="dark"] .step[aria-pressed="true"]{background:var(--cyan);color:#201C1C} @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .step[aria-pressed="true"]{background:var(--cyan);color:#201C1C}} @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(--cyan);color:#201C1C; 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(--gruen-weich);color:var(--ink);font-weight:700;font-size:.9rem} .cap .min svg{width:18px;height:18px;flex:none;color:var(--gruen-text)} .next{margin-top:18px;width:100%} @media (min-width:520px){.next{width:auto}} /* ---------- Zubehör und „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}} .acc-card{display:grid;grid-template-columns:1fr;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)} @media (min-width:480px){.acc-card{grid-template-columns:160px 1fr}} /* Produktfotos auf Weiss: ganz zeigen (contain), nicht anschneiden. */ .acc-card img{display:block;width:100%;height:auto;max-height:280px;aspect-ratio:1/1;object-fit:contain;background:#fff;align-self:center} @media (min-width:480px){.acc-card img{max-height:none}} .acc-card{background:var(--card)} .acc-card .txt{padding:20px 22px;display:flex;flex-direction:column;gap:4px} .acc-card .note{margin:4px 0 12px} .acc-card .btn{margin-top:auto;align-self:flex-start} .acc-card p{margin-bottom:12px} /* ---------- 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(--cyan-weich)} details[open] summary::after{content:"–"} details .in{padding:0 0 18px;max-width:64ch} details .in ol{margin:10px 0 12px;padding-left:22px} details .in li{margin:0 0 8px} /* ---------- Sprachweiche und Platzhalterseite ---------- */ .router{min-height:80vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:40px 20px;color:var(--ink)} .router-logo{width:min(320px,80vw);height:auto;color:var(--ink)} .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:#201C1C;--ink:#ffffff;--muted:rgba(255,255,255,.88);--link:#7FD3EF;--focus:#7FD3EF; background:radial-gradient(60% 90% at 90% 0%, rgba(49,182,226,.35), transparent 65%),#201C1C;color:#fff} .dark .eyebrow{color:#7FD3EF} .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:#201C1C;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 #7FD3EF;outline-offset:2px} .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(138,198,66,.22);color:#e3f5cf;border:1px solid rgba(138,198,66,.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:#7FD3EF} .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)} .foot b{color:var(--ink)} .foot-logos{display:flex;align-items:center;gap:20px;flex-wrap:wrap} .foot-logo{width:170px;height:auto;color:var(--ink);flex:none} .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, damit er nicht mit „Zum Shop" konkurriert. */ .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