/* Tuningpass — alle Seiten. * * Seit dem Umbau der Rechts- und Bestaetigt-Seiten die einzige Datei: * Startseite, Impressum, Datenschutz, Kontakt und die drei * bestaetigt-Seiten haengen daran. lp.css, an dem die sechs bis dahin * hingen, ist damit weggefallen. Wer eine Klasse hier aendert, aendert * sie fuer alle sieben Seiten - der Preis dafuer, dass es zwischen * ihnen keinen Bruch mehr gibt. * * Schrift: Manrope statt Geist. Der Entwurf nennt Geist und laedt es von * Google Fonts - das geht hier nicht: Die CSP dieses Servers erlaubt * Stilblaetter und Schriften nur von der eigenen Herkunft * (`style-src 'self'`, `font-src 'self' data:`). Ein Aufruf zu * fonts.googleapis.com wird geblockt, und die Seite stuende dann in der * Systemschrift da, ohne dass es jemandem auffiele. Manrope liegt schon * hier und wird ohnehin geladen. */ /* Nicht /manrope-latin.woff2 wie frueher in lp.css: Diese Datei liegt unter /tuningtag/ und geht damit auch auf tuningpass.de durch die Weiche, die alles dorthin umschreibt. */ @font-face{ font-family:"Manrope"; src:url("/tuningtag/fonts/manrope-var.woff2") format("woff2-variations"); font-weight:200 800; font-display:swap; } :root{ --bg:#f3f3f1; --surface:#ffffff; --ink:#141517; --ink-2:#3a3c40; --muted:#76797e; --line:#dcdcd8; --line-soft:#e8e8e5; --ok:#2f6b4f; --btn-ink:#f3f3f1; --accent:#a61c33; /* Rot aus dem Tuningpass-Profil */ --accent-ink:#ffffff; --accent-soft:#f5e1e4; --band:#17181a; --band-ink:#ecebe7; --band-muted:#8b8d91; --band-line:#2c2e31; --band-akzent:#e0566b; /* das Rot auf dem dunklen Band: --accent erreicht dort nur 2,5:1 */ /* Die Folienfarben des Aufklebers. Sie stehen hier wie jede andere Farbe der Seite - ein Hex-Wert mitten im Markup waere an sechs Stellen derselbe und beim siebten einer zu wenig. Sie werden in der dunklen Fassung NICHT umdefiniert: Das sind die Farben der Ware, nicht die der Oberflaeche. Eine weisse Folie bleibt weiss, auch nachts - deshalb traegt jeder Tupfen einen Rand, sonst verschwaende Weiss auf hellem und Schwarz auf dunklem Grund. */ --folie-blau:#1b4fa8; --folie-weiss:#f7f7f5; --folie-schwarz:#1a1b1d; --folie-rot:#b3121f; --folie-gruen:#1f7a46; --sans:"Manrope",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; } @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark; --bg:#111213;--surface:#18191b;--ink:#ecebe7;--ink-2:#c4c3bf;--muted:#8b8d91;--line:#2c2e31;--line-soft:#232427;--ok:#7fbf9c;--btn-ink:#111213;--accent:#d2394f;--accent-soft:#3a1a20;--band:#1d1e21;--band-line:#34363a}} :root[data-theme="dark"]{color-scheme:dark; --bg:#111213;--surface:#18191b;--ink:#ecebe7;--ink-2:#c4c3bf;--muted:#8b8d91;--line:#2c2e31;--line-soft:#232427;--ok:#7fbf9c;--btn-ink:#111213;--accent:#d2394f;--accent-soft:#3a1a20;--band:#1d1e21;--band-line:#34363a} *{box-sizing:border-box} [hidden]{display:none!important} img{max-width:100%} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}} body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.65 var(--sans);-webkit-font-smoothing:antialiased} a{color:inherit} p{margin:0} h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.03em;text-wrap:balance} h1{font-size:clamp(38px,5vw,64px);line-height:1.02} h2{font-size:clamp(26px,2.8vw,36px);line-height:1.1} h3{font-size:17px;line-height:1.3;font-weight:600} button{font:inherit;cursor:pointer;color:inherit} :focus-visible{outline:1.5px solid var(--ink);outline-offset:3px} .wrap{max-width:1200px;margin:0 auto;padding-inline:24px} .label{font:500 13px/1.3 var(--sans);color:var(--muted)} .num{font-family:var(--mono);font-variant-numeric:tabular-nums} .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:46px;padding:0 22px;border-radius:999px;font:500 14px/1 var(--sans);text-decoration:none;border:1px solid var(--ink);transition:opacity .15s,background .15s} .btn-dark{background:var(--ink);color:var(--btn-ink)} .btn-dark:hover{opacity:.86} .btn-line{background:transparent;color:var(--ink);border-color:var(--line)} .btn-line:hover{border-color:var(--ink)} .link{font-size:14px;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px} .link:hover{border-color:var(--ink)} /* nav */ .nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .nav .wrap{display:flex;align-items:center;height:60px;gap:32px} .brand{font:700 18px/1 var(--sans);letter-spacing:-.03em;text-decoration:none} .nav ul{display:flex;gap:28px;margin:0;padding:0;list-style:none} .nav ul a{font-size:13.5px;color:var(--ink-2);text-decoration:none} .nav ul a:hover{color:var(--ink)} .nav .right{margin-left:auto;display:flex;align-items:center;gap:12px} .cart{display:flex;align-items:center;gap:8px;background:none;border:1px solid var(--line);border-radius:999px;height:36px;padding:0 14px;font-size:13px} .cart:hover{border-color:var(--ink)} .cart .num{font-size:12px;color:var(--muted)} @media (max-width:820px){.nav ul{display:none}} /* hero */ .hero{padding-block:72px 0} .hero-grid{display:grid;grid-template-columns:6fr 5fr;gap:64px;align-items:end;padding-bottom:64px} .hero .kicker{display:flex;align-items:center;gap:10px;margin-bottom:28px} .dot{width:6px;height:6px;border-radius:50%;background:var(--ok)} .hero p.lede{font-size:17px;color:var(--ink-2);max-width:44ch;margin-top:22px} .hero .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px} .facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:48px} .facts div{padding:16px 16px 0 0} .facts div+div{padding-left:16px;border-left:1px solid var(--line)} .facts b{display:block;font:500 20px/1.2 var(--sans);margin-top:4px} @media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:48px}.hero{padding-block:48px 0}} /* profile card */ .card{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden} .card-head{display:flex;justify-content:space-between;align-items:flex-start;padding:20px 22px;border-bottom:1px solid var(--line-soft)} .card-head h3{font-size:20px;font-weight:500} .card-head .id{font:500 11px/1 var(--mono);color:var(--muted);border:1px solid var(--line);padding:6px 8px;border-radius:999px} .kv{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line-soft)} .kv div{padding:14px 22px} .kv div+div{border-left:1px solid var(--line-soft)} .kv span{display:block;font-size:14px;margin-top:2px} table.parts{width:100%;border-collapse:collapse;font-size:13.5px} .parts th{text-align:left;font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:14px 22px 8px} .parts td{padding:10px 22px;border-top:1px solid var(--line-soft);vertical-align:top} .parts td:last-child,.parts th:last-child{text-align:right} .parts small{display:block;color:var(--muted);font-size:12px} .card-foot{display:flex;justify-content:space-between;padding:14px 22px;background:var(--bg);border-top:1px solid var(--line-soft);font-size:13.5px} /* image placeholders */ .ph{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:14px;display:grid;place-items:center;text-align:center;padding:24px;color:var(--muted);overflow:hidden;max-width:100%} .ph::before{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent calc(50% - .5px),var(--line-soft) 50%,transparent calc(50% + .5px)),linear-gradient(to bottom right,transparent calc(50% - .5px),var(--line-soft) 50%,transparent calc(50% + .5px))} .ph div{position:relative;background:var(--surface);padding:10px 14px;border-radius:8px} .ph b{display:block;font:500 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)} .ph span{font-size:13px} .hero-img{aspect-ratio:21/8} @media (max-width:640px){.hero-img{aspect-ratio:4/3}} /* sections */ .sec{padding-block:112px;border-top:1px solid var(--line)} .sec-grid{display:grid;grid-template-columns:3fr 9fr;gap:48px} .sec-grid > .side{position:sticky;top:96px;align-self:start} .intro{max-width:52ch} .intro p{color:var(--ink-2);font-size:16px;margin-top:16px} @media (max-width:900px){.sec{padding-block:72px}.sec-grid{grid-template-columns:1fr;gap:20px}.sec-grid > .side{position:static}} /* problem rows */ .rows{margin-top:48px;border-top:1px solid var(--line)} .prow{display:grid;grid-template-columns:160px 1fr 1fr;gap:32px;padding:28px 0;border-bottom:1px solid var(--line)} .prow .q{font-size:17px;line-height:1.45} .prow .a{color:var(--ink-2)} .prow .a b{display:block;font-weight:600;color:var(--ink);margin-bottom:4px} @media (max-width:760px){.prow{grid-template-columns:1fr;gap:10px}} /* steps */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px} .step .ph{aspect-ratio:4/5} .step .meta{display:flex;justify-content:space-between;margin:18px 0 8px} .step p{color:var(--ink-2);font-size:14.5px} @media (max-width:860px){.steps{grid-template-columns:1fr}.step .ph{aspect-ratio:4/3}} /* features */ .flist{display:grid;grid-template-columns:repeat(2,1fr);margin-top:48px;border-top:1px solid var(--line)} .flist div{padding:24px 24px 24px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:110px 1fr;gap:16px} .flist div:nth-child(even){padding-left:24px;border-left:1px solid var(--line)} .flist p{color:var(--ink-2);font-size:14.5px;margin-top:4px} @media (max-width:760px){.flist{grid-template-columns:1fr}.flist div:nth-child(even){padding-left:0;border-left:0}.flist div{grid-template-columns:1fr;gap:6px}} /* shop */ .products{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px} /* Seit dem 02.10.2026 gibt es einen Artikel. Zwei Spalten liessen die zweite leer, eine ganze Breite macht aus der Karte ein Plakat. */ .products.ist-einzeln{grid-template-columns:minmax(0,620px);justify-content:center} .product{background:var(--surface);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;overflow:hidden} .product .ph{border:0;border-radius:0;border-bottom:1px solid var(--line-soft);aspect-ratio:16/10} .product .body{padding:24px;display:flex;flex-direction:column;gap:18px;flex:1} .product .top{display:flex;justify-content:space-between;align-items:baseline;gap:12px} .product .top h3{font-size:22px;font-weight:500} .price{font:500 22px/1 var(--sans);white-space:nowrap} .spec{margin:0;display:grid;grid-template-columns:auto 1fr;border-top:1px solid var(--line-soft)} .spec dt,.spec dd{margin:0;padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:14px} .spec dt{color:var(--muted);padding-right:24px} /* Die Kurzbeschreibung auf der Artikelkachel. Stand bis zum 04.10.2026 als style="" im Markup - hier, damit die eine Zeile nicht an drei Stellen anders aussieht. */ .s-kurz{color:var(--ink-2);font-size:14.5px;margin-top:8px} /* ---------- Datenblatt auf der Kachel, zugeklappt (04.10.2026) ---------- Masse, Sicherheitshinweise und Hersteller MUESSEN beim Angebot stehen (Art. 19 GPSR) - offen sind sie zwei Absaetze Kleingedrucktes zwischen Preis und Kaufknopf. Also eine Zeile, die sagt, was darin ist, und ein Griff. Auf der Artikelseite steht dasselbe ausgeschrieben. */ .s-datenblatt{border-top:1px solid var(--line-soft)} .s-datenblatt summary{ padding:12px 0;font-size:14px;color:var(--ink-2);cursor:pointer; list-style:none;display:flex;align-items:center;gap:8px; } /* Das eigene Dreieck: Safari zeichnet das vom Browser auch bei list-style:none weiter, ::-webkit-details-marker raeumt es weg. */ .s-datenblatt summary::-webkit-details-marker{display:none} .s-datenblatt summary::before{ content:'';width:6px;height:6px;flex:none; border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor; transform:rotate(-45deg);transition:transform .15s; } .s-datenblatt[open] summary::before{transform:rotate(45deg)} .s-datenblatt summary:hover{color:var(--ink)} .s-datenblatt .spec{border-top:0;margin-bottom:6px} .buy{display:flex;gap:10px;margin-top:auto;padding-top:6px} .qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:999px;height:46px} .qty button{background:none;border:0;width:40px;height:100%;font-size:16px;color:var(--ink-2)} .qty output{width:22px;text-align:center;font:500 14px/1 var(--mono)} .buy .btn{flex:1} .terms{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:24px;font-size:13.5px;color:var(--ink-2)} .terms span{display:flex;align-items:center;gap:8px} .terms span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ok)} @media (max-width:760px){.products{grid-template-columns:1fr}} /* roadmap */ .road{margin-top:48px;border-top:1px solid var(--line)} .rrow{display:grid;grid-template-columns:1fr 2fr 110px;gap:24px;padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline} .rrow p{color:var(--ink-2);font-size:14.5px} .tag{justify-self:end;font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;border-radius:999px;border:1px solid var(--line);color:var(--muted);white-space:nowrap} .tag.live{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)} .tag.pro{color:var(--ink);border-color:var(--ink)} @media (max-width:700px){.rrow{grid-template-columns:1fr auto;gap:4px 16px}.rrow p{grid-column:1/-1;grid-row:2}.tag{grid-row:1;grid-column:2}} /* gallery */ .gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-top:48px} .gallery .ph:nth-child(1){grid-column:span 7;aspect-ratio:7/5} .gallery .ph:nth-child(2){grid-column:span 5;aspect-ratio:auto} .gallery .ph:nth-child(3),.gallery .ph:nth-child(4),.gallery .ph:nth-child(5){grid-column:span 4;aspect-ratio:1} @media (max-width:760px){.gallery .ph{grid-column:1/-1!important;aspect-ratio:4/3!important}} /* faq */ .faq{margin-top:48px;border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:20px 0;font-size:16px;font-weight:500} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font:400 18px/1 var(--mono);color:var(--muted);transition:transform .2s} .faq details[open] summary::after{transform:rotate(45deg)} .faq details p{padding:0 0 22px;color:var(--ink-2);max-width:62ch} /* footer */ footer{border-top:1px solid var(--line);padding-block:64px 32px} .fgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px} .fgrid p{color:var(--ink-2);font-size:14px;margin-top:10px} .fgrid .label{margin-bottom:12px;display:block} .fgrid a{display:block;font-size:14px;text-decoration:none;color:var(--ink-2);margin-bottom:6px} .fgrid a:hover{color:var(--ink)} .copy{display:flex;align-items:center;gap:10px;font-size:14px;margin-bottom:8px} .copy button{background:none;border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:11px;color:var(--muted)} .fine{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:56px;padding-top:20px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)} @media (max-width:760px){.fgrid{grid-template-columns:1fr}} /* drawer */ .scrim{position:fixed;inset:0;background:rgba(10,10,12,.4);z-index:40} .drawer{position:fixed;inset:0;margin:auto;width:min(560px,calc(100% - 32px));height:fit-content;max-height:min(780px,calc(100% - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)));background:var(--surface);border:1px solid var(--line);border-radius:20px;z-index:50;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 40px 100px -30px rgba(0,0,0,.45);animation:pop .22s ease-out} @keyframes pop{from{transform:translateY(12px) scale(.98);opacity:.6}to{transform:none;opacity:1}} .drawer .dh{padding:22px 26px 18px} .drawer .dh h3{font-size:22px;font-weight:600;letter-spacing:-.02em} .drawer .dh p{font-size:13.5px;color:var(--muted);margin-top:2px} .pick{display:grid;grid-template-columns:56px 1fr auto;gap:16px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:14px;transition:border-color .15s} .pick.on{border-color:var(--accent)} .pick .sw{width:56px;height:56px;border-radius:10px;border:1px solid var(--line)} .pick b{display:block;font-weight:600;font-size:15.5px} .pick small{color:var(--muted);font-size:13px} .pick .price-s{display:block;font-size:14px;color:var(--ink);margin-top:2px} .pick .qty{height:40px} .pick .qty button{width:36px} .check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink-2)} .check input{accent-color:var(--accent);width:16px;height:16px;margin-top:3px;flex:none} .done-ic{width:56px;height:56px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:26px} .dh{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--line-soft)} .dh h3{font-size:18px;font-weight:500} .x{background:none;border:1px solid var(--line);border-radius:50%;width:34px;height:34px} .steps-bar{display:flex;gap:6px;padding:14px 24px 0} .steps-bar span{flex:1;height:2px;background:var(--line)} .steps-bar span.on{background:var(--ink)} .steps-lab{padding:8px 24px 0} .db{flex:1;overflow:auto;padding:20px 24px;display:flex;flex-direction:column;gap:16px} .df{padding:18px 24px;border-top:1px solid var(--line-soft);display:grid;gap:10px} .li{display:grid;grid-template-columns:48px 1fr auto;gap:14px;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--line-soft)} .li .sw{width:48px;height:48px;border-radius:8px;border:1px solid var(--line)} .li b{display:block;font-weight:500;font-size:14.5px} .li small{color:var(--muted);font-size:12.5px} .li button{background:none;border:0;color:var(--muted);font-size:12.5px;text-decoration:underline} .sum{display:grid;gap:6px;font-size:14px} .sum div{display:flex;justify-content:space-between;color:var(--ink-2)} .sum .t{color:var(--ink);font-weight:600;font-size:16px;padding-top:10px;margin-top:4px;border-top:1px solid var(--line-soft)} .field{display:grid;gap:6px} .field label{font-size:12.5px;color:var(--muted)} .field input,.field select{height:44px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);padding:0 12px;font:15px var(--sans);width:100%} .field input:focus,.field select:focus{outline:none;border-color:var(--ink)} .two{display:grid;grid-template-columns:1fr 2fr;gap:12px} .opt{display:flex;gap:14px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:12px;cursor:pointer} .opt:has(input:checked){border-color:var(--ink)} .opt input{accent-color:var(--ink);width:16px;height:16px} .opt b{display:block;font-weight:500;font-size:14.5px} .opt small{color:var(--muted);font-size:12.5px} .note{font-size:12.5px;color:var(--muted);background:var(--bg);border-radius:10px;padding:12px 14px} .err{color:#b4412c;font-size:13px} .empty{color:var(--muted);text-align:center;padding:48px 0;font-size:14px} /* v3: accent + calmer layout */ .btn-accent{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .btn-accent:hover{opacity:.9} .dot{background:var(--accent)} .hl{color:var(--accent)} .label.a{color:var(--accent)} .cart .num{background:var(--accent);color:var(--accent-ink);border-radius:999px;min-width:20px;height:20px;display:grid;place-items:center;font-size:11px;padding:0 6px} .card-foot .num{color:var(--accent);font-weight:500} .parts .ok{color:var(--ok)} .sec-simple{padding-block:96px;border-top:1px solid var(--line)} .sec-simple .head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px 40px;margin-bottom:40px} .sec-simple .head p{color:var(--ink-2);max-width:40ch} .trio{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .tile{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:10px} .tile .label{color:var(--accent)} .tile p{color:var(--ink-2);font-size:14.5px} .steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .steps3 .ph{aspect-ratio:4/5} .steps3 h3{margin-top:16px;display:flex;gap:10px;align-items:baseline} .steps3 h3 span{font:500 12px/1 var(--mono);color:var(--accent)} .steps3 p{color:var(--ink-2);font-size:14px;margin-top:4px} .band{background:var(--band);color:var(--band-ink);padding-block:96px} .band .label{color:var(--band-muted)} .band h2{color:var(--band-ink)} .band .head p{color:var(--band-muted)} .band .product{background:#202124;border-color:var(--band-line);color:var(--band-ink)} .band .product .ph{background:#26282b;border-color:var(--band-line);color:var(--band-muted)} .band .product .ph div{background:#26282b} .band .product .ph b{color:var(--band-ink)} .band .ph::before{background:linear-gradient(to top right,transparent calc(50% - .5px),#303236 50%,transparent calc(50% + .5px)),linear-gradient(to bottom right,transparent calc(50% - .5px),#303236 50%,transparent calc(50% + .5px))} .band .spec dt,.band .spec dd{border-color:var(--band-line)} .band .spec{border-color:var(--band-line)} .band .spec dt{color:var(--band-muted)} .band .qty{border-color:var(--band-line)} .band .qty button{color:var(--band-ink)} .band .btn-line{color:var(--band-ink);border-color:#45474c} .band .btn-line:hover{border-color:var(--band-ink)} .band .price{color:var(--band-ink)} .band .terms{color:var(--band-muted)} .band .terms span::before{background:var(--accent)} .product.pick{border-color:var(--accent)!important} .pick-tag{font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;background:var(--accent);color:var(--accent-ink);padding:5px 8px;border-radius:999px;align-self:flex-start} .chips{display:flex;flex-wrap:wrap;gap:10px} .chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:10px 16px;font-size:14px} .chip i{font-style:normal;font:500 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .chip.live{border-color:var(--accent);color:var(--accent)} .chip.live i{color:var(--accent)} .chip i.pro{color:var(--accent)} .gal{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px} .gal .ph{aspect-ratio:1} .gal .ph:first-child{aspect-ratio:auto;grid-row:span 2} .faq2{max-width:760px;border-top:1px solid var(--line)} @media (max-width:860px){.trio,.steps3{grid-template-columns:1fr}.steps3 .ph{aspect-ratio:16/10}.gal{grid-template-columns:1fr 1fr}.gal .ph:first-child{grid-column:1/-1;grid-row:auto;aspect-ratio:4/3}.sec-simple,.band{padding-block:64px}} /* phone */ .hero-grid{align-items:center} .phone-wrap{display:flex;justify-content:center} .phone{position:relative;width:min(300px,78vw);aspect-ratio:9/19.5;background:#0d0e10;border-radius:46px;padding:11px;box-shadow:0 0 0 1px #2a2c30,0 40px 80px -30px rgba(0,0,0,.45),0 0 0 7px color-mix(in srgb,var(--accent) 0%,transparent)} .phone::before{content:"";position:absolute;inset:-40px -60px;z-index:-1;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 22%,transparent),transparent);} .phone .notch{display:none;position:absolute;top:22px;left:50%;transform:translateX(-50%);width:84px;height:24px;background:#0d0e10;border-radius:20px;z-index:2} .phone .screen{width:100%;height:100%;border-radius:36px;background:var(--surface);display:grid;place-items:center;text-align:center;color:var(--muted);overflow:hidden} .phone .screen b{display:block;font:500 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:6px} .phone .screen span{font-size:13px;line-height:1.5} .phone .screen img{width:100%;height:100%;object-fit:cover;object-position:top} .hero{padding-bottom:24px} .steps3 > div{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px} .steps3 h3{margin-top:0} .band .products{grid-template-columns:1fr 1fr} @media (max-width:680px){.band .products{grid-template-columns:1fr}} .badge{display:inline-flex;align-items:center;gap:10px;margin-bottom:28px;padding:5px 14px 5px 5px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:13.5px;color:var(--ink-2);text-decoration:none;transition:border-color .15s} .badge:hover{border-color:var(--ink)} .badge b{background:var(--accent);color:var(--accent-ink);font-weight:500;font-size:12.5px;padding:4px 10px;border-radius:999px} .tile p,.steps3 p{line-height:1.6} .included{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:28px;font-size:14px;color:var(--ink-2)} .included span{display:flex;align-items:center;gap:8px} .included span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)} .toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--btn-ink);font-size:13.5px;padding:12px 18px;border-radius:999px;z-index:60;white-space:nowrap} /* Vorbestell-Seite */ .lp-hero{padding-block:64px 80px} .lp-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center} .lp-hero .lede{font-size:17px;color:var(--ink-2);max-width:46ch;margin-top:20px} .signup{margin-top:32px;max-width:520px} .signup .elabel{display:block;font-size:14px;font-weight:600;margin-bottom:8px} .signup .row{display:flex;gap:8px;background:var(--surface);border:1.5px solid color-mix(in srgb,var(--ink) 35%,var(--line));border-radius:999px;padding:7px;transition:border-color .15s,box-shadow .15s;box-shadow:0 6px 20px -12px rgba(0,0,0,.25)} .signup .row:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)} .signup .row .btn{height:52px;padding:0 26px;font-size:15px} .signup .mail-ic{flex:none;align-self:center;margin-left:14px;color:var(--muted)} .signup input[type=email]{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:17px var(--sans);padding:0 10px;outline:none;height:52px} .signup input[type=email]::placeholder{color:var(--muted)} .signup .btn{flex:none} .code{display:flex;align-items:center;gap:10px;margin-top:12px;max-width:340px;background:var(--surface);border:1px dashed color-mix(in srgb,var(--ink) 30%,var(--line));border-radius:999px;padding:0 6px 0 16px;transition:border-color .15s} .code:focus-within{border-color:var(--accent);border-style:solid} .code svg{flex:none;color:var(--muted)} .code input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:500 15px var(--sans);height:44px;outline:none;text-transform:uppercase;letter-spacing:.04em} .code input::placeholder{text-transform:none;letter-spacing:0;color:var(--muted);font-weight:400} .interest{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;align-items:center} .interest > span{font-size:13.5px;color:var(--muted);margin-right:4px} .interest label{cursor:pointer} .interest input{position:absolute;opacity:0;pointer-events:none} .interest label span{display:inline-block;padding:7px 14px;border:1px solid var(--line);border-radius:999px;font-size:13.5px;color:var(--ink-2);background:var(--surface);transition:all .15s} .interest input:checked + span{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)} .interest input:focus-visible + span{outline:1.5px solid var(--ink);outline-offset:2px} .signup .check{margin-top:14px} .signup .err{margin-top:10px} .perks{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:28px;font-size:14px;color:var(--ink-2)} .perks span{display:flex;align-items:center;gap:8px} .perks span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)} .success{margin-top:32px;max-width:520px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px;display:flex;gap:16px;align-items:flex-start} .success h3{font-size:19px} .success p{color:var(--ink-2);font-size:14.5px;margin-top:4px} .success .klein{font-size:13px;line-height:1.55;color:var(--muted);margin-top:10px} .success .actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px} .success .btn{height:40px;font-size:13.5px;padding:0 16px} .done-ic{flex:none;width:44px;height:44px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:20px} .phone-wrap{display:flex;justify-content:center} .phone{position:relative;width:min(290px,74vw);aspect-ratio:9/19.5;background:#0d0e10;border-radius:46px;padding:11px;box-shadow:0 0 0 1px #2a2c30,0 40px 80px -30px rgba(0,0,0,.45)} .phone::before{content:"";position:absolute;inset:-40px -60px;z-index:-1;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 22%,transparent),transparent)} .phone .screen{width:100%;height:100%;border-radius:36px;overflow:hidden;background:#1b1c20} .phone .screen img{width:100%;height:100%;object-fit:cover;object-position:top} .why3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .why3 .tile{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:8px} .why3 .tile .label{color:var(--accent)} .why3 .tile p{color:var(--ink-2);font-size:14.5px} .lp-sec{padding-block:88px;border-top:1px solid var(--line)} .lp-sec .head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px 40px;margin-bottom:36px} .lp-sec .head p{color:var(--ink-2);max-width:40ch} .cta-band{background:var(--band);color:var(--band-ink);border-radius:22px;padding:48px 40px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center} .cta-band p{color:var(--band-muted);margin-top:8px} .faq details:first-child{border-top:1px solid var(--line)} @media (max-width:900px){.lp-grid{grid-template-columns:1fr;gap:56px}.lp-hero{padding-block:40px 64px}.why3{grid-template-columns:1fr}.cta-band{grid-template-columns:1fr;padding:36px 24px}.lp-sec{padding-block:64px}} @media (max-width:460px){.signup .row{flex-wrap:wrap;border-radius:18px;padding:8px}.signup input[type=email]{flex:1 1 60%}.signup .row .btn{width:100%}} /* Honigtopf. Nicht display:none - manche Roboter ueberspringen genau das. Aus dem Blickfeld geschoben, fuer Vorlesegeraete versteckt, fuer die Tastatur nicht erreichbar (tabindex="-1" im Markup). */ .topf{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none} /* Der Hinweis fuer Eingeladene. Steht ueber dem Feld und nicht daneben: Er ist der Grund, warum jemand ueberhaupt hier ist. */ .einladung{margin:0 0 10px;padding:8px 12px;border-radius:10px;background:var(--accent-soft); color:var(--ink);font:500 13px/1.45 var(--sans);border:1px solid var(--accent)} /* Die aufgeklappte Erklaerung unter der Box "Rabatt sammeln". Eingerueckt auf Hoehe des Haken-Textes, damit sichtbar bleibt, dass sie zu ihm gehoert und nicht zur Einwilligung darueber. */ .rabatt-info{margin:-2px 0 4px 26px;padding:14px 16px;border-radius:12px; background:var(--surface);border:1px solid var(--line)} .rabatt-info p{margin:0 0 10px;font-size:14px;line-height:1.6;color:var(--ink-2)} .rabatt-info p:last-child{margin-bottom:0} .rabatt-info .leiter{list-style:none;margin:0 0 10px;padding:0; font-size:14px;line-height:1.95} .rabatt-info .leiter b{display:inline-block;min-width:1.4em;color:var(--ink)} .rabatt-info .leiter span{font-weight:700;color:var(--accent)} .rabatt-info .klein{font-size:13px;color:var(--muted)} /* Der Haken "Rabatt sammeln" saehe sonst aus wie ein zweiter Einwilligungshaken - zwei gleiche Kaestchen untereinander, und man liest den zweiten nicht mehr. Eine Linie darueber und ein Wort in der Akzentfarbe trennen die beiden: der eine ist eine Zustimmung, der andere klappt nur etwas auf. */ .check.aufklapp{margin-top:10px;padding-top:12px;border-top:1px solid var(--line-soft)} .check.aufklapp b{color:var(--accent);font-weight:600} /* ── Textseiten ──────────────────────────────────────────────────────────── * * Impressum, Datenschutz, Kontakt und die drei bestaetigt-Seiten. Sie * hingen an lp.css und trugen damit den alten Entwurf: dunkle Kopfzeile, * anderes Cremeweiss, andere Schriftgroessen. Wer von der Startseite auf * "Impressum" klickte, sah den Bruch im selben Moment, in dem er passierte. * * Rahmen und Knoepfe kommen unveraendert von oben. Hier steht nur, was * ein langer Text zusaetzlich braucht, den jemand wirklich liest. */ /* Der Knopf in der Kopfzeile ist kleiner als einer im Fliesstext. Auf der Startseite steht das noch als style-Attribut im Markup; als Regel, damit sechs Seiten es nicht sechsmal wiederholen. */ .nav .right .btn{height:36px;font-size:13px;padding:0 16px} /* Steht die Feinzeile allein im Fuss - ohne den Spaltenblock darueber, den nur die Startseite haette -, dann trennt ihre Oberlinie nichts und der Abstand darueber ist nur Loch. */ footer .wrap > .fine:only-child{margin-top:0;border-top:0;padding-top:0} .fine a:hover{color:var(--ink)} /* Zeilenlaenge. 1200px waeren bei 15px Schrift ueber 150 Zeichen je Zeile - am Ende jeder Zeile findet das Auge den Anfang der naechsten nicht mehr. */ .wrap.schmal{max-width:760px} .text-seite{padding-block:64px 96px} .text-seite h1{font-size:clamp(32px,4.4vw,46px);line-height:1.06;margin-bottom:14px} /* Zwischenueberschriften bleiben nahe der Brotschriftgroesse. Ein Rechtstext besteht fast nur aus ihnen - in der h2-Groesse der Startseite waere die Seite eine Folge von Balken, zwischen denen der Text verschwindet. */ .text-seite h2{font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.3;margin:34px 0 10px} .text-seite p{margin:0 0 13px;font-size:15px;line-height:1.7;color:var(--ink-2)} .text-seite p b{color:var(--ink)} .text-seite .lead{font-size:17px;line-height:1.55;color:var(--ink-2);margin-bottom:24px;max-width:52ch} .text-seite .eyebrow{font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 14px} .text-seite .klein{font-size:13px;line-height:1.6;color:var(--muted);margin:14px 0 0} .text-seite .stand{margin:34px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)} /* Links im Fliesstext. Ohne eigene Regel greift der Browser-Standard und setzt sie blau - im dunklen Modus kaum lesbar und in beiden Faellen ein Bruch im Farbklang. Die Textfarbe bleibt, erkennbar macht sie die Unterstreichung in Rot. Knoepfe nimmt die Regel ausdruecklich aus: `.btn` ist hier ein Knopf und kein Link im Satz. */ .text-seite a:not(.btn){color:inherit;text-decoration:underline;text-underline-offset:2px; text-decoration-color:var(--accent);text-decoration-thickness:1.5px} .text-seite a:not(.btn):hover{color:var(--accent)} .text-seite .btn{margin:6px 0 30px} .text-seite code{font:13px/1.5 var(--mono);background:var(--bg);border:1px solid var(--line-soft);padding:1px 6px;border-radius:5px} .text-seite .aufzaehlung{margin:0 0 13px;padding-left:20px;font-size:15px;line-height:1.7;color:var(--ink-2)} .text-seite .aufzaehlung li{margin-bottom:5px} /* Die Fragen auf der Kontaktseite nehmen die .faq der Startseite. Eigene Oberlinie aus, weil das erste details schon eine mitbringt - sonst stuenden dort zwei Linien uebereinander. */ .text-seite .faq{margin-top:18px;border-top:0} .text-seite .faq details p{margin:0} /* Anbieterangaben und Kontaktdaten: dieselbe Karte wie .tile auf der Startseite, nur mit einer Beschreibungsliste darin. */ .anbieter,.direkt{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:clamp(20px,3.4vw,28px)} .anbieter{margin:24px 0 8px} .direkt{margin:8px 0 10px} .text-seite .direkt h2{margin-top:0} .anbieter dl,.direkt dl{margin:0;display:grid;gap:14px 20px} @media (min-width:560px){.anbieter dl,.direkt dl{grid-template-columns:130px 1fr;gap:13px 22px}} .anbieter dt,.direkt dt{font:500 10.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:5px} .anbieter dd,.direkt dd{margin:0;font-size:15px;line-height:1.55;color:var(--ink)} .anbieter .zusatz{font-size:13px;color:var(--ink-2)} /* Der Werberblock auf bestaetigt.html. Er ist der Grund, warum jemand die Seite offen laesst statt sie zu schliessen - deshalb eine eigene Karte mit rotem Rand und nicht noch ein Absatz im Fliesstext. */ .werben{margin:40px 0;padding:clamp(20px,3.4vw,28px);background:var(--surface); border:1px solid var(--accent);border-radius:18px} .text-seite .werben h2{margin:0 0 8px;font-size:20px} .text-seite .werben p{margin:0 0 14px;color:var(--ink-2)} .werben .leiter{list-style:none;margin:0 0 18px;padding:0;font-size:15px;line-height:1.95} .werben .leiter b{display:inline-block;min-width:1.4em;color:var(--ink)} .werben .leiter span{font-weight:700;color:var(--accent)} .text-seite .werben .btn{margin:0} /* Der Link steht als code da, damit man ihn markieren kann, falls das Kopieren nicht geht. Lange Adressen muessen dabei umbrechen duerfen - sonst schiebt einer die Karte auf dem Handy ueber den Rand hinaus. */ /* ── Der Gutschein auf /tuningtag/einladung ─────────────────────────────── Gestrichelter Rand und gesperrte Schrift wie auf einem Ticket: Der Code soll aussehen wie etwas, das man in der Hand hat, und nicht wie eine Zeile Text. Er wird abgetippt und am Telefon weitergesagt - deshalb gross, gesperrt und in einer Schrift mit gleichen Breiten. */ .gutschein{margin:28px 0 20px;padding:clamp(22px,4vw,32px) 20px;text-align:center; background:var(--surface);border:2px dashed var(--accent);border-radius:18px} .gutschein-kopf{margin:0 0 10px;font-size:12px;letter-spacing:.18em; text-transform:uppercase;color:var(--muted)} .text-seite .gutschein-code{margin:0 0 10px;color:var(--accent);font-weight:700; font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; /* Gesperrt, aber nicht ueber den Rand: bei sechs Zeichen und schmalem Handy ist clamp der Unterschied zwischen lesbar und umgebrochen. */ font-size:clamp(28px,9vw,40px);line-height:1.15;letter-spacing:.16em; word-break:break-all} .text-seite .gutschein-fuss{margin:0;font-size:14px;color:var(--ink-2)} .gutschein-fuss b{color:var(--accent)} /* Die Knoepfe nebeneinander, am Handy untereinander und ueber die volle Breite - ein halb abgeschnittener Knopf wird nicht gedrueckt. */ /* Die Leiter stand bisher nur unter .werben und .rabatt-info. Auf der Einladungsseite steht sie fuer sich - ohne diese Regel faellt sie auf Standard-Aufzaehlungspunkte zurueck und sieht aus wie ein Versehen. */ .text-seite .leiter{list-style:none;margin:0 0 18px;padding:0; font-size:15px;line-height:1.95} .text-seite .leiter b{display:inline-block;min-width:1.4em;color:var(--ink)} .text-seite .leiter span{font-weight:700;color:var(--accent)} .kopier-knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px} .text-seite .kopier-knoepfe .btn{margin:0} @media (max-width:460px){.kopier-knoepfe{flex-direction:column} .text-seite .kopier-knoepfe .btn{width:100%}} .werben-link{word-break:break-all} .text-seite .werben-link code{font-size:14px} .text-seite .werben .klein{margin:14px 0 0} /* Der eigene Code zum Abtippen. Er steht groesser und gesperrt da als der Link darunter: Weitergesagt wird am Telefon und auf einem Treffen der Code, nicht die Adresszeile. */ .text-seite .werben .werben-code{margin:0 0 6px;font-size:15px;color:var(--ink-2)} .werben-code b{font-size:22px;letter-spacing:.14em;color:var(--accent);font-weight:700} /* "Du hast schon X %" steht UEBER der Leiter, nicht darunter: Es ist das einzige an diesem Kasten, das schon jemandem gehoert. */ .text-seite .werben .schon-rabatt{margin:0 0 16px;padding:10px 14px;border-radius:10px; background:var(--accent-soft);color:var(--ink);font-size:14.5px;line-height:1.5} .werben .schon-rabatt b{color:var(--accent);font-weight:700} /* ============================================================= Der Shop ============================================================= Angehaengt und nicht als zweite Datei: start.css ist die eine Datei fuer alle Seiten, und eine zweite haette den ganzen :root-Block ein zweites Mal enthalten - also zwei Orte fuer dieselbe Farbe. Der Shop benutzt deshalb, was oben schon steht: .btn, .wrap, .nav, .field, .check, .card, .sum, .qty, .price, .products, .product, .spec, .buy, .note, .num, .toast, .empty, .err. Neu ist nur, was es dort noch nicht gibt, und es traegt ein `s-` davor, damit beim Lesen klar ist, wo es herkommt - und damit keine Klasse der Werbeseite versehentlich ueberschrieben wird. Hier steht ausschliesslich var(--...), kein Hex-Wert. ============================================================= */ /* Das Band, das sagt: noch nicht oeffentlich. Verschwindet mit dem Verkaufsstart - zusammen mit dem Riegel in server.js. */ .vorschau-band{ background:var(--band);color:var(--band-ink);font-size:13px; padding:10px 24px;text-align:center;line-height:1.5; } .vorschau-band[hidden]{display:none} .vorschau-band strong{color:var(--accent-ink);background:var(--accent); padding:2px 10px;border-radius:999px;font-size:12px;margin-right:8px} /* Die Fassung ohne Skript in
(tt-admin-shop.html). Mit Skript ersetzt shop.js sie; bis dahin bliebe sie sonst einen Augenblick stehen und spraenge dann um. Wer kein Skript ausfuehrt, wertet auch kein CSS aus - fuer ihn ist das hier gleichgueltig, er liest das HTML. */ @media (scripting: enabled){.s-vorab{display:none}} .s-vorab{padding-block:48px} .s-vorab section{margin-bottom:40px;max-width:72ch} .s-vorab img{max-width:100%;height:auto;margin-top:24px} .s-vorab details{border-bottom:1px solid var(--line);padding:12px 0} .s-korbknopf{ display:flex;align-items:center;gap:8px;border:1px solid var(--line); border-radius:999px;height:36px;padding:0 14px;font-size:13px; text-decoration:none;transition:border-color .15s; } .s-korbknopf:hover{border-color:var(--ink)} .s-korbknopf .num{font-size:12px;color:var(--muted)} /* Eine Seite, die kein Aufmacher ist: Abstand oben, damit sie nicht an der Leiste klebt. */ .s-seite{padding-block:56px 96px} .s-seite-knapp{padding-block:0} .s-seite > h1{margin-bottom:28px} .lede{font-size:17px;color:var(--ink-2);max-width:52ch;margin-top:14px} .s-fein{font-size:12.5px;color:var(--muted);line-height:1.6;display:block} .s-breit{width:100%;margin-top:16px} .s-krumen{display:flex;gap:10px;font-size:13px;color:var(--muted);margin-bottom:14px} .s-krumen a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line)} /* ---------- Das gezeichnete Plaettchen ---------- Kein Foto, weil es noch keines gibt: Ein Renderbild weckt Erwartungen, welche die erste Charge nicht halten muss. Drei Ecken und ein Wortzeichen genuegen, damit jeder erkennt, was gemeint ist. */ .s-art{ aspect-ratio:16/10;background:var(--bg);border-bottom:1px solid var(--line-soft); display:grid;place-items:center;padding:24px; } .s-art-code{ width:min(150px,42vw);aspect-ratio:1;background:var(--band);border-radius:12px; position:relative;display:grid;place-items:center; } .s-art-code.ist-aufkleber{border-radius:4px;outline:2px dashed var(--line);outline-offset:5px} .s-art-code span{position:absolute;width:26%;height:26%;border:5px solid var(--band-ink);border-radius:4px} .s-art-code span:nth-child(1){top:12%;left:12%} .s-art-code span:nth-child(2){top:12%;right:12%} .s-art-code span:nth-child(3){bottom:12%;left:12%} .s-art-code b{ font:800 9px/1 var(--sans);letter-spacing:.14em;color:var(--band-ink); position:absolute;bottom:13%;right:13%; } .s-artikel{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:start} .s-artikel .s-art{border:1px solid var(--line);border-radius:14px} /* ---------- Warenkorb ---------- */ .s-korb{display:grid;grid-template-columns:7fr 5fr;gap:32px;align-items:start} .s-zeile{ display:grid;grid-template-columns:72px 1fr auto auto 32px;gap:16px;align-items:center; padding:16px 0;border-top:1px solid var(--line-soft); } .s-zeile:first-child{border-top:0} .s-zeile .s-art{aspect-ratio:1;border:1px solid var(--line);border-radius:10px;padding:8px} .s-zeile .s-art-code{width:100%} /* Die Karte in der bestellten Farbe. Fuellt die erste Spalte der Zeile, 72 px im Korb und 56 px in der knappen Liste vor dem Bestellknopf. */ .s-zeile .s-korbbild{width:100%;padding:5px;border:1px solid var(--line);border-radius:10px;background:var(--surface)} .s-zeile .s-korbbild img{filter:drop-shadow(0 1px 3px rgb(0 0 0 / .25))} .s-zeile .s-art-code b{display:none} .s-zeile b{display:block;font-weight:600;font-size:15px} .s-weg{background:none;border:0;color:var(--muted);font-size:20px;line-height:1} .s-weg:hover{color:var(--accent)} /* Der Knopf "Entfernen" heisst wie die Kachel "Weg" weiter unten (.s-weg, Service-Historie und Tuning) und erbte deren weissen Kasten mit Rand und Polster - am Telefon stand unter jeder Korbzeile ein leeres weisses Feld mit einem kleinen Kreuz darin. Zwei Klassen schlagen eine, egal in welcher Reihenfolge. */ .s-zeile .s-weg{ display:block;width:32px;height:32px;padding:0;gap:0; background:none;border:0;border-radius:0;justify-self:end;align-self:center; } .s-zeilen-knapp .s-zeile{grid-template-columns:56px 1fr auto auto;padding:12px 0} .s-zeilen-knapp .qty,.s-zeilen-knapp .s-weg{display:none} .s-gutschein{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;margin-top:20px} /* ---------- Kasse ---------- */ .s-schritte{ display:flex;gap:8px;list-style:none;margin:0 0 32px;padding:0; font-size:13px;color:var(--muted);flex-wrap:wrap; } .s-schritte li{display:flex;align-items:center;gap:8px} .s-schritte li:not(:last-child)::after{content:"";width:28px;height:1px;background:var(--line);margin-left:4px} .s-schritte .num{ display:grid;place-items:center;width:22px;height:22px;border-radius:999px; border:1px solid var(--line);font-size:11px; } .s-schritte .hier{color:var(--ink);font-weight:600} .s-schritte .hier .num{background:var(--ink);color:var(--btn-ink);border-color:var(--ink)} .s-schritte .fertig .num{background:var(--accent-soft);border-color:var(--accent-soft);color:var(--accent)} .s-kasse-grid{display:grid;grid-template-columns:7fr 5fr;gap:40px;align-items:start} .s-kasse form{display:grid;gap:16px} .s-zwei{display:grid;grid-template-columns:1fr 1fr;gap:16px} .s-kasse-knoepfe{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px} .s-kasse-knoepfe .btn{flex:1;min-width:min(180px,100%)} /* Der Bestellknopf traegt den laengsten Text der Seite - "Zahlungspflichtig bestellen" plus Betrag - und .btn ist 46 px hoch, eine Zeile. Am Telefon brach der Text um und stand oben und unten ueber den Knopf hinaus. Der Wortlaut ist vorgeschrieben (§ 312j Abs. 3 BGB) und wird nicht gekuerzt; stattdessen darf der Knopf wachsen. */ .s-kasse-knoepfe .btn{height:auto;min-height:46px;padding:13px 22px;line-height:1.3;text-align:center;flex-wrap:wrap;row-gap:2px} /* Ein rot umrandetes Feld sagt nichts, wenn daneben keine Meldung steht - deshalb gibt es immer beides. */ .field input.schlecht,.field select.schlecht{border-color:var(--accent)} .s-recap{display:grid;grid-template-columns:1fr 1fr;gap:24px; padding:20px 22px;border:1px solid var(--line);border-radius:14px;background:var(--surface)} .s-recap p{margin:6px 0 8px;font-size:14.5px;line-height:1.6} /* ---------- Danke ---------- */ .s-ordno{ display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px; padding:22px;border:1px solid var(--line);border-radius:14px;background:var(--surface); margin:28px 0; } .s-ordno b{display:block;margin-top:4px;font-size:16px} .s-danke-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px} .s-zeitlauf{list-style:none;margin:0;padding:0;display:grid;gap:14px;font-size:14.5px} .s-zeitlauf li{display:flex;align-items:center;gap:12px;color:var(--muted)} .s-zeitlauf li::before{ content:"";width:9px;height:9px;border-radius:50%; border:1px solid var(--line);flex:none; } .s-zeitlauf li.fertig{color:var(--ink)} .s-zeitlauf li.fertig::before{background:var(--accent);border-color:var(--accent)} /* Die Linie zwischen den Punkten. Sie faerbt sich nur dort, wo BEIDE Punkte erledigt sind - so zeigt der Weg, wie weit es wirklich ist, statt bis zum naechsten offenen Schritt durchzulaufen. */ .s-zeitlauf li{position:relative} .s-zeitlauf li+li::after{ content:"";position:absolute;left:4px;top:-14px;width:1px;height:14px; background:var(--line); } .s-zeitlauf li.fertig+li.fertig::after{background:var(--accent)} /* ---------- Danke: der Aufbau ---------- Der einzige Moment, in dem jemand bezahlt hat und noch nichts in der Hand haelt. Eine Seite, die dabei nur dasteht, liest sich wie eine Quittung. Also baut sie sich auf - Haken, Zahlen, Weg, Bestellung -, und zwar einmal beim Erscheinen und nie wieder: Bewegung, die sich wiederholt, wird zur Zappelei. Der Haken erscheint NUR bei bezahlt und weiter. Bei offener Zahlung waere er eine Behauptung, und die teuerste Sorte Fehler ist die, die dem Kunden sagt, alles sei in Ordnung. */ @keyframes s-auf{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes s-ring{from{transform:scale(.6);opacity:0}60%{transform:scale(1.06);opacity:1}to{transform:scale(1)}} @keyframes s-haken{to{stroke-dashoffset:0}} @keyframes s-warten{0%,100%{opacity:.35}50%{opacity:1}} .s-kopf{display:flex;align-items:center;gap:16px;margin-bottom:6px} .s-kopf h1{margin:0} .s-zeichen{width:46px;height:46px;flex:none;animation:s-ring .45s cubic-bezier(.2,.8,.3,1.25) both} .s-zeichen circle{fill:none;stroke:var(--accent);stroke-width:2;opacity:.35} .s-zeichen path{ fill:none;stroke:var(--accent);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:36;stroke-dashoffset:36;animation:s-haken .4s .28s ease-out forwards; } .s-zeichen.wartet circle{animation:s-warten 1.8s ease-in-out infinite} .s-zeichen .kern{fill:var(--accent);stroke:none;opacity:1;animation:none} .s-danke .lede,.s-danke .s-ordno,.s-danke .card,.s-danke>.note{animation:s-auf .5s both} .s-danke .lede{animation-delay:.10s} .s-danke .s-ordno{animation-delay:.16s} .s-danke .s-danke-grid .card:first-child{animation-delay:.24s} .s-danke .s-danke-grid .card:last-child{animation-delay:.32s} .s-danke>.note{animation-delay:.40s} .s-danke .s-zeitlauf li{animation:s-auf .4s both} .s-danke .s-zeitlauf li:nth-child(1){animation-delay:.34s} .s-danke .s-zeitlauf li:nth-child(2){animation-delay:.42s} .s-danke .s-zeitlauf li:nth-child(3){animation-delay:.50s} .s-danke .s-zeitlauf li:nth-child(4){animation-delay:.58s} /* Wer Bewegung abbestellt hat, bekommt dieselbe Seite - nur sofort und vollstaendig. Die globale Regel weiter oben schaltet nur Uebergaenge ab, nicht Animationen. */ @media (prefers-reduced-motion:reduce){ .s-danke .lede,.s-danke .s-ordno,.s-danke .card,.s-danke>.note, .s-danke .s-zeitlauf li,.s-zeichen,.s-zeichen path,.s-zeichen circle{ animation:none!important;opacity:1;transform:none;stroke-dashoffset:0; } } /* ---------- Fragen ---------- */ .s-fragen{margin-top:32px;border-top:1px solid var(--line)} .s-fragen details{border-bottom:1px solid var(--line)} .s-fragen summary{ padding:20px 0;font-size:16px;font-weight:600;cursor:pointer; list-style:none;display:flex;justify-content:space-between;gap:20px; } .s-fragen summary::after{content:"+";color:var(--muted);font-weight:400} .s-fragen details[open] summary::after{content:"–"} .s-fragen p{padding:0 0 20px;color:var(--ink-2);font-size:14.5px;line-height:1.7;max-width:70ch} /* ---------- Rechtstexte ---------- Schmale Spalte, viel Luft: Diese Seiten werden wirklich gelesen, und zwar von jemandem, der etwas sucht. */ .s-legal{padding-block:56px 96px;max-width:760px} .s-legal h1{font-size:clamp(28px,3.4vw,40px);margin-bottom:20px} .s-legal h2{font-size:18px;margin:36px 0 10px} .s-legal p{color:var(--ink-2);font-size:15px;line-height:1.75;margin-bottom:12px} .s-legal .s-entwurf{ background:var(--accent-soft);color:var(--ink);border-radius:10px;padding:14px 16px;font-size:14px; } /* Das Muster-Formular fuellt seine Leerzeilen mit Unterstrichen - eine Zeile aus 47 Zeichen ohne Umbruchstelle. Am Telefon schob sie die ganze Widerrufsseite um 130 px in die Breite. Der Wortlaut bleibt, wie das Gesetz ihn vorgibt; nur umbrechen darf die Zeile. */ .s-muster p{margin-bottom:10px;overflow-wrap:anywhere} /* Die drei Wege zum Widerruf, oben auf der Belehrung. */ .s-widerruf-wege{border:1px solid var(--line);border-radius:26px 9px 26px 9px;padding:20px 22px;margin:4px 0 28px} .s-widerruf-wege ol{margin:0;padding-left:20px;color:var(--ink-2);font-size:15px;line-height:1.7} .s-widerruf-wege li{margin-bottom:12px} .s-widerruf-wege li:last-child{margin-bottom:0} .s-widerruf-wege .btn{margin-top:12px;height:auto;min-height:46px;padding-block:12px;text-align:center} /* ---------- Fuss ---------- */ .s-fuss{border-top:1px solid var(--line);padding-block:56px 32px;margin-top:0} .s-fuss .wrap{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px} .s-fuss a{display:block;font-size:14px;color:var(--ink-2);text-decoration:none;margin-top:8px} .s-fuss a:hover{color:var(--ink)} .s-fuss .brand{font-size:18px;color:var(--ink);margin-top:0} .s-fuss .label{display:block;margin-bottom:4px} .s-fuss-unten{ display:flex!important;justify-content:space-between;gap:16px;flex-wrap:wrap; grid-template-columns:none!important; border-top:1px solid var(--line-soft);margin-top:40px;padding-top:24px; } @media (max-width:900px){ .s-artikel,.s-korb,.s-kasse-grid,.s-danke-grid,.s-recap{grid-template-columns:1fr} .s-fuss .wrap{grid-template-columns:1fr 1fr} .s-seite{padding-block:40px 64px} } @media (max-width:560px){ .s-zeile{grid-template-columns:56px 1fr auto;row-gap:8px} .s-zeile .num{grid-column:2;justify-self:start} .s-zwei{grid-template-columns:1fr} .s-gutschein{grid-template-columns:1fr} } /* ---------- Bestellliste im Admin-Bereich ---------- Dieselben Bausteine wie im Shop: Wer beide Seiten am selben Tag benutzt, soll nicht zwischen zwei Handschriften wechseln. */ .s-filter{display:flex;gap:8px;flex-wrap:wrap;margin:28px 0 20px} .s-filter .btn{height:38px;font-size:13px;padding:0 16px} .s-filter .ist-an{border-color:var(--ink);background:var(--ink);color:var(--btn-ink)} .s-bestellung{margin-top:16px} .s-bestellung-koerper{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:20px 22px} .s-bestellung-koerper p{margin:6px 0 16px;font-size:14.5px;line-height:1.6} .s-versand{ display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:end; padding:18px 22px;border-top:1px solid var(--line-soft);background:var(--bg); } .s-versand .btn{height:44px;font-size:13.5px;white-space:nowrap} @media (max-width:760px){ .s-bestellung-koerper,.s-versand{grid-template-columns:1fr} } /* ============================================================= Der Shop: Fotos, Funktionen, Galerie ============================================================= Dazugekommen, als aus der Verkaufsseite eine wurde, die etwas zeigt. Vorher trug sie ein gezeichnetes Plaettchen und drei Absaetze; jetzt hat jede Aussage einen Platz fuer das Foto, das sie belegt. Zwei Regeln, die hier durchgehalten werden: 1. Ein Platz ohne Foto sieht aus wie ein Platz und nicht wie ein Fehler. Er nennt, was er zeigen soll, und wie die Datei heisst. 2. Kein Hex-Wert, nur var(--...) - wie im ganzen Rest der Datei. ============================================================= */ /* ---------- Der Fotoplatz ---------- Das Seitenverhaeltnis steht als Klasse und nicht als style-Attribut: Es gibt sechs Formen, und sechs Klassen sind lesbarer als sechs Inline-Werte, die man einzeln suchen muss. */ .s-bild{ position:relative;margin:0;overflow:hidden;border-radius:14px; background:var(--bg);border:1px solid var(--line); } .s-bild.f-4-3{aspect-ratio:4/3} .s-bild.f-3-2{aspect-ratio:3/2} .s-bild.f-16-9{aspect-ratio:16/9} .s-bild.f-21-9{aspect-ratio:21/9} .s-bild.f-1-1{aspect-ratio:1/1} .s-bild.f-3-4{aspect-ratio:3/4} .s-bild.f-handy{aspect-ratio:9/19.5} .s-bild img{ display:block;width:100%;height:100%;object-fit:cover;object-position:center; } /* Ein Foto braucht den Rahmen nicht - es hat selbst eine Kante. */ .s-bild.hat-foto{border-color:transparent;background:var(--band)} .s-bild.hat-foto .s-bild-leer{display:none} /* Der leere Platz. Gestrichelt, weil gestrichelt "hier fehlt etwas" heisst - eine durchgezogene Linie sieht aus wie Absicht. */ .s-bild-leer{ position:absolute;inset:0;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:8px;text-align:center; padding:20px;border:1px dashed var(--line);border-radius:13px; color:var(--muted);font-size:13px;line-height:1.5; } .s-bild-marke{ font:600 10px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase; color:var(--accent);background:var(--accent-soft); padding:5px 10px;border-radius:999px; } .s-bild-was{max-width:32ch;color:var(--ink-2)} .s-bild-leer code{ font:400 11px/1.4 var(--mono);color:var(--muted); background:var(--surface);border:1px solid var(--line-soft); padding:4px 8px;border-radius:6px;word-break:break-all; } .s-bild figcaption{ position:absolute;left:0;right:0;bottom:0;padding:32px 20px 14px; font-size:13px;color:var(--band-ink); background:linear-gradient(to top,rgb(0 0 0/.62),transparent); opacity:0;transition:opacity .2s; } .s-bild.hat-foto figcaption{opacity:1} /* Der Hinweis auf den drei Schritt-Fotos ist ein Vermerk, keine Bildunterschrift: lesbar, aber er soll das Foto nicht zudecken. */ .s-schritt .s-bild figcaption{font-size:11px;line-height:1.35;padding:22px 14px 10px} /* Im Handy-Rahmen fuellt der Platz den Bildschirm - Rahmen und Ecken bringt das Handy selbst mit. */ .phone .screen .s-bild{ width:100%;height:100%;aspect-ratio:auto;border:0;border-radius:0;background:transparent; } .phone .screen .s-bild-leer{border:0;border-radius:0} .s-bild-leer.ist-handy b{ display:block;font:500 11px/1.4 var(--mono);letter-spacing:.08em; text-transform:uppercase;color:var(--accent); } /* ---------- Das breite Bildband unter dem Aufmacher ---------- */ .s-band-bild{padding-block:8px 0} .s-band-bild .s-bild{border-radius:18px} /* ---------- Kennst du das? ---------- Das dunkle Band direkt unter dem Aufmacher: vier Bilder, unter jedem eine Frage und eine Antwort. Man soll es im Vorbeiscrollen verstehen. */ .s-kennst{padding-block:96px} .s-kennst-titel{font-size:clamp(34px,4.4vw,56px);line-height:1.04} .s-faelle{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px} .s-fall{display:grid;gap:8px;align-content:start} .s-fall .s-bild{border-color:var(--band-line);background:var(--surface);margin-bottom:8px} /* Quadratische Fotos aus der Garage - das Motiv sitzt in der Mitte. */ .s-fall .s-bild img{object-position:center} .s-fall h3{font-size:clamp(19px,1.7vw,23px);line-height:1.2;letter-spacing:-.02em;color:var(--band-ink)} .s-fall p{color:var(--band-akzent);font-size:16px;font-weight:600} .s-jetzt{ margin-top:64px;padding-top:40px;border-top:1px solid var(--band-line); display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px; } .s-jetzt-satz{ font-size:clamp(24px,3vw,38px);line-height:1.15;font-weight:600; letter-spacing:-.03em;color:var(--band-ink);max-width:22ch;text-wrap:balance; } /* Die vier Bilder kommen beim Scrollen nacheinander herein, damit jedes einzeln ankommt. Ohne animation-timeline steht einfach alles da. */ @supports (animation-timeline:view()){ @media (prefers-reduced-motion:no-preference){ .s-fall,.s-jetzt{ animation:s-auf linear both; animation-timeline:view();animation-range:entry 0% entry 45%; } } } @media (max-width:1000px){.s-faelle{grid-template-columns:1fr 1fr}} @media (max-width:900px){.s-kennst{padding-block:64px}.s-jetzt{margin-top:44px}} @media (max-width:520px){.s-faelle{gap:24px 14px}.s-fall h3{font-size:17px}.s-fall p{font-size:14.5px}} /* ---------- So fuehrst du das heute ---------- Drei echte Bildschirmfotos nebeneinander: die Tabelle gross und quer, Notizdatei und Zettel hochkant daneben. Die Tabelle muss breit sein - auf 300 px liest niemand eine Spalte "ueberfaellig", und genau die traegt den Abschnitt. */ .s-heute-text{max-width:68ch;margin-top:28px} .s-heute-text p{font-size:16px;line-height:1.7;color:var(--ink-2);margin:0 0 14px} .s-heute-text p b{color:var(--ink);font-weight:600} .s-belege{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:44px} .s-beleg{margin:0;display:grid;gap:14px;align-content:start} .s-beleg.gross{grid-column:1 / -1} /* Bildschirmfotos werden NICHT zugeschnitten: bei der Tabelle fehlte sonst rechts die Spalte "Status", wegen der sie hier steht, und bei der Notizdatei oben die Titelzeile mit dem Dateinamen - und genau der sagt, dass das eine Datei auf einem Rechner ist. Fotos duerfen zuschneiden, die sollen die Flaeche fuellen. */ .s-beleg.schuss .s-bild img{object-fit:contain;background:var(--surface)} .s-beleg.ist-foto .s-bild img{object-position:top} .s-beleg .s-bild{background:var(--surface)} .s-beleg figcaption{display:grid;gap:6px} .s-beleg h3{font-size:19px;letter-spacing:-.02em} .s-beleg p{color:var(--ink-2);font-size:15px;max-width:52ch} .s-heute-schluss{ margin-top:40px;padding-top:28px;border-top:1px solid var(--line); font-size:clamp(19px,2vw,26px);line-height:1.3;letter-spacing:-.02em; color:var(--ink-2);max-width:34ch;text-wrap:balance; } .s-heute-schluss b{color:var(--ink);font-weight:600} /* Die schmale Fassung der Tabelle erscheint nur auf schmalen Geraeten - und umgekehrt. Beide stehen im Markup, weil bildplatz() ein Bild je Platz einhaengt und kein srcset kennt; das Stilblatt entscheidet. */ .s-beleg.nur-schmal{display:none} @media (max-width:760px){ .s-belege{grid-template-columns:1fr;gap:34px} .s-heute-schluss{margin-top:32px} .s-beleg.nur-breit{display:none} .s-beleg.nur-schmal{display:grid} } /* ---------- Und so steht es dann da ---------- Zwei Handys nebeneinander, darunter je ein kurzer Text. Die Bilder sind echte Aufnahmen aus der App; was darunter steht, erklaert nur, worauf man schaut - die Liste selbst spricht fuer sich. */ .s-schirme{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:48px} /* Groesser als die Handys weiter unten: Dort traegt ein Bild eine Behauptung, hier IST die Liste die Behauptung - und eine Zeile, die man nicht lesen kann, beweist nichts. */ [data-seite='shop'] .s-schirm .phone{width:min(400px,86vw)} .s-schirm{display:grid;justify-items:center;gap:28px} .s-schirm-text{display:grid;gap:10px;max-width:42ch;text-align:center} .s-schirm h3{font-size:20px;letter-spacing:-.02em} .s-schirm p{color:var(--ink-2);font-size:15px} .s-nachher-nie{margin-top:48px;max-width:64ch} @media (max-width:760px){ .s-schirme{grid-template-columns:1fr;gap:56px} .s-nachher-nie{margin-top:36px} } /* Die Namen der weiteren Funktionen, als Marken nebeneinander. */ .s-marken{list-style:none;margin:32px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px} .s-marken li{ padding:10px 16px;border:1px solid var(--line);border-radius:999px; background:var(--surface);font-size:15px;font-weight:500;color:var(--ink); } /* ---------- Die drei Schritte ---------- */ .s-drei{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px} .s-schritt{display:flex;flex-direction:column;gap:18px} .s-schritt-text{display:grid;gap:8px} .s-schritt-nr{ display:grid;place-items:center;width:26px;height:26px;border-radius:999px; background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:600; } .s-schritt h3{font-size:19px} .s-schritt p{color:var(--ink-2);font-size:14.5px;line-height:1.7} /* ---------- Was die App kann ---------- Text und Handy nebeneinander, abwechselnd die Seiten. Am Handy untereinander, und dann immer das Bild zuerst: Wer auf einem kleinen Schirm liest, soll sehen, worum es geht, bevor er liest. */ .s-koennen{ display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center; padding-block:64px;border-top:1px solid var(--line-soft); } .s-koennen:first-of-type{margin-top:48px} .s-koennen.ist-gedreht .s-koennen-bild{order:2} .s-koennen-bild{display:flex;justify-content:center} .s-koennen-text{display:grid;gap:12px;align-content:start} .s-koennen-text h3{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.03em} .s-koennen-text p{color:var(--ink-2);font-size:16px;line-height:1.75;max-width:52ch} .s-koennen-text .spec{margin-top:12px} .phone-klein{width:min(260px,72vw)} /* ---------- Das Funktionsgitter ---------- */ .s-gitter{ display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1px;margin-top:44px;background:var(--line); border:1px solid var(--line);border-radius:14px;overflow:hidden; } .s-kachel{background:var(--surface);padding:26px 24px} .s-kachel h3{font-size:16px;margin-bottom:8px} .s-kachel p{color:var(--ink-2);font-size:14px;line-height:1.7} /* ---------- Die zwei Wege ---------- */ .s-wege{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px} .s-weg{ background:var(--surface);border:1px solid var(--line);border-radius:14px; padding:28px 26px;display:grid;gap:12px;align-content:start; } .s-weg-marke{ justify-self:start;font:600 11px/1 var(--sans);letter-spacing:.1em; text-transform:uppercase;color:var(--accent); background:var(--accent-soft);padding:7px 12px;border-radius:999px; } .s-weg h3{font-size:19px} .s-weg p{color:var(--ink-2);font-size:14.5px;line-height:1.7} .s-weg ul{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:8px} .s-weg li{ font-size:14px;color:var(--ink-2);padding-left:18px;position:relative; } .s-weg li::before{ content:"";position:absolute;left:0;top:8px;width:7px;height:7px; border-radius:50%;background:var(--accent); } .s-nie{margin-top:20px;font-size:13.5px;line-height:1.7;padding:16px 18px} .s-nie strong{color:var(--ink)} /* ---------- Die Galerie ---------- Ein Mosaik und kein gleichmaessiges Gitter: Fotos vom Auto sind verschieden wichtig, und das darf man sehen. */ .s-galerie{ display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:44px; } .s-galerie .s-bild{grid-column:span 2} .s-galerie .s-bild.gross{grid-column:span 4} /* ---------- Das Schlussband ---------- */ .s-schluss{text-align:center} .s-schluss .lede{margin-inline:auto} .s-schluss .buy{margin-inline:auto;justify-content:center} /* ---------- Die Vertrauenszeile im Aufmacher ---------- Sie stand bisher ohne eigene Regel da und sah deshalb aus wie drei Woerter, die aneinanderkleben. */ .included{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:28px} .included span{ font-size:13px;color:var(--muted);padding-left:18px;position:relative; } .included span::before{ content:"";position:absolute;left:0;top:6px;width:8px;height:8px; border-radius:50%;border:1.5px solid var(--accent); } /* ---------- Artikel: mehr Platz fuers Bild ---------- Das gezeichnete Plaettchen war quadratisch in einem 16:10-Kasten. Mit einem Foto darin ist der Kasten das Bild - also darf er groesser sein. */ .product .s-bild{border:0;border-radius:0;border-bottom:1px solid var(--line-soft)} .product .s-bild.f-4-3{aspect-ratio:4/3} .product .s-bild .s-art{border:0;height:100%;aspect-ratio:auto} /* Die Artikelseite: ein grosses Bild und eine Reihe kleiner darunter. */ .s-artikel > .s-art-bilder{display:grid;gap:12px} .s-art-bilder .s-reihe{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .s-art-bilder .s-bild{border-radius:14px} .s-art-bilder .s-art{border:0;height:100%;aspect-ratio:auto} @media (max-width:1000px){ .s-koennen{grid-template-columns:1fr;gap:32px;padding-block:48px} .s-koennen.ist-gedreht .s-koennen-bild{order:0} .s-koennen-text p{max-width:none} } @media (max-width:860px){ .s-drei{grid-template-columns:1fr;gap:36px} .s-wege{grid-template-columns:1fr} .s-galerie{grid-template-columns:repeat(2,1fr);gap:12px} .s-galerie .s-bild,.s-galerie .s-bild.gross{grid-column:span 1} .s-galerie .s-bild.gross{grid-column:span 2} .s-band-bild .s-bild.f-21-9{aspect-ratio:16/9} } @media (max-width:560px){ .s-galerie{grid-template-columns:1fr} .s-galerie .s-bild,.s-galerie .s-bild.gross{grid-column:span 1;aspect-ratio:4/3} .s-band-bild .s-bild.f-21-9{aspect-ratio:4/3} .s-art-bilder .s-reihe{grid-template-columns:repeat(3,1fr)} .s-bild-leer{gap:6px;font-size:12px;padding:14px} .s-bild-leer code{font-size:10px} } /* In kleinen Plaetzen faellt das Abzeichen weg - der Dateiname ist das Wichtige, und fuer beides ist kein Raum. */ .s-art-bilder .s-reihe .s-bild-marke,.s-galerie .f-1-1 .s-bild-marke{display:none} .s-art-bilder .s-reihe .s-bild-was,.s-galerie .f-1-1 .s-bild-was{font-size:12px} /* ---------- Bildschirmfotos im Handyrahmen ---------- Die vier Bildschirmfotos sind alle 896 x 1695 - oben ohne Statusleiste und ohne Browserleiste, unten ohne Wischbalken. Der Rahmen bekommt genau dieses Verhaeltnis, statt eines festen 9:19,5. Dann sitzt das Bild ohne Rest darin: nichts abgeschnitten, kein leerer Streifen. Wer ein neues Bildschirmfoto dazulegt, schneidet es auf dasselbe Verhaeltnis - sonst kommt der Streifen zurueck. Steht in FOTOS.md. Statt der Browserleiste sitzt oben ein Band mit dem Namen. Die Adresse ist aus den Bildern heraus und nicht nur ueberdeckt: Auf einem Werbebild hat eine fremde Adresse nichts zu suchen, und schon gar nicht die aus der Verwaltung eines Fahrzeugs. Eng auf [data-seite="shop"] begrenzt - auf der Werbeseite steckt im selben Rahmen ein Foto vom Auto, das den Rahmen fuellen soll. */ /* Der Schein hinter dem Handy (.phone::before) ragt 60 px ueber dessen Rand. Am Telefon ist das Handy fast so breit wie der Bildschirm, und die Seite liess sich deshalb rund 30 px zur Seite schieben. `clip` und nicht `hidden`: `hidden` macht aus dem Kasten einen Rollbereich, und darin klebt nichts mehr oben fest. */ [data-seite='shop'] #app{overflow-x:clip} [data-seite='shop'] .phone{ width:min(340px,84vw); /* Die Hoehe kommt vom Inhalt: Band plus Bild. */ aspect-ratio:auto; } [data-seite='shop'] .phone .screen{ display:block;height:auto;background:var(--band); } [data-seite='shop'] .phone-klein{width:min(300px,78vw)} /* Das Band anstelle der Adresszeile. */ [data-seite='shop'] .s-leiste{ display:flex;align-items:center;justify-content:center; height:38px;background:var(--band);color:var(--band-ink); font:600 10px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase; border-bottom:1px solid var(--band-line); } [data-seite='shop'] .phone .screen .s-bild{ /* Genau die Groesse der Bildschirmfotos. */ aspect-ratio:896/1695;height:auto; } [data-seite='shop'] .phone .screen .s-bild img{ object-fit:cover;object-position:top; } /* ============================================================= Gesetzliche Gewaehrleistung — Knopf und Fenster ============================================================= Pflicht seit 27.09.2026 (Durchfuehrungsverordnung (EU) 2025/1960). Der Knopf ist bewusst klein und ruhig: Er steht neben dem Preis und ueber dem Bestellknopf, wo der Blick ohnehin haengt. Ein lauter Knopf an dieser Stelle zoege die Aufmerksamkeit vom Kaufen weg, ein versteckter erfuellt "hervorgehoben" nicht. Im Fenster selbst steht keine einzige Farbe: Das Blatt ist ein Bild und bringt die vorgeschriebenen Farben mit. Deshalb bekommt es auch einen weissen Grund, der NICHT mitdunkelt — die Grafik hat weissen Rand, und auf dunklem Papier saehe sie aus wie ein Aufkleber. `--surface` kippt im Dunkelmodus mit, `white` waere ein Hex-Wert; also ein eigener heller Rahmen aus der Grafik selbst: das Bild traegt den Grund. */ .s-gewaehr-knopf{ display:inline-flex;align-items:center;gap:8px; background:none;border:1px solid var(--line);border-radius:999px; padding:7px 14px;font:500 12.5px/1 var(--sans);color:var(--ink-2); } .s-gewaehr-knopf:hover{border-color:var(--ink);color:var(--ink)} /* Ein Paragraphenzeichen im Ring. Bis zum 04.10.2026 stand hier ein Haken, gezeichnet aus zwei Farbverlaeufen. Zwei schraege Striche aus Verlaufskanten treffen sich bei 15 Pixeln nicht: Die Haelften lagen versetzt, und heraus kam eine Spitzhacke im Kreis. Ein Haken waere ohnehin das falsche Zeichen - er sagt "erledigt", und der Knopf oeffnet eine Belehrung. Ein ZEICHEN und kein Bild: Es faellt mit currentColor in den Dunkelmodus, waechst mit der Schrift mit und kann an keiner Kante danebenliegen. Eine Grafik muesste als Datei oder als data:-Adresse kommen - die eine ist eine Anfrage mehr auf jeder Artikelseite, die andere haengt an der CSP des Servers, der diese Seite ausliefert, und der steht nicht in diesem Repo. */ .s-gewaehr-knopf::before{ content:"\00a7";width:16px;height:16px;flex:none;border-radius:50%; border:1.5px solid currentColor; display:flex;align-items:center;justify-content:center; font:700 10px/1 var(--sans); } .s-gewaehr{ border:none;border-radius:16px;padding:0; width:min(560px,92vw);max-height:88vh;overflow:auto; background:var(--surface);color:var(--ink); } .s-gewaehr::backdrop{background:var(--band);opacity:.6} .s-gewaehr-kopf{ display:flex;align-items:center;justify-content:space-between;gap:16px; padding:18px 20px 14px;border-bottom:1px solid var(--line-soft); position:sticky;top:0;background:var(--surface); } .s-gewaehr-kopf h2{font-size:17px;margin:0} .s-gewaehr-zu{ background:none;border:none;font-size:26px;line-height:1; color:var(--muted);padding:0 4px; } .s-gewaehr-zu:hover{color:var(--ink)} /* Die Grafik bringt ihren eigenen hellen Grund mit und bleibt deshalb in beiden Modi gleich - sie darf nach der Verordnung nicht veraendert werden, und ein Dunkelfilter waere genau das. */ .s-gewaehr-blatt{padding:20px} .s-gewaehr-blatt a{display:block} .s-gewaehr-blatt img{display:block;width:100%;height:auto;border-radius:8px} .s-gewaehr-fuss{padding:0 20px 20px} /* ---------- Farbwahl des Aufklebers (02.10.2026) ---------- Fuenf Farben im Regal, eine auf Wunsch. Die Tupfen tragen die Folienfarbe aus :root und IMMER einen Rand: Weiss auf hellem Grund und Schwarz auf dunklem waeren sonst keine Flaeche, sondern ein Loch. Der Wunsch-Tupfen ist ein Farbkreis aus den fuenf. Kein sechster Ton, weil es keinen gibt - gemeint ist "irgendeine", und genau so sieht er aus. */ .s-farbtupfen{ display:inline-block;width:22px;height:22px;border-radius:999px; border:1px solid var(--line);flex:none;vertical-align:-5px; } .s-farbtupfen.klein{width:12px;height:12px;vertical-align:-1px;margin-right:4px} .s-farbtupfen.ist-blau{background:var(--folie-blau)} .s-farbtupfen.ist-weiss{background:var(--folie-weiss)} .s-farbtupfen.ist-schwarz{background:var(--folie-schwarz)} .s-farbtupfen.ist-rot{background:var(--folie-rot)} .s-farbtupfen.ist-gruen{background:var(--folie-gruen)} .s-farbtupfen.ist-wunsch{ background:conic-gradient( var(--folie-rot),var(--folie-gruen),var(--folie-blau), var(--folie-schwarz),var(--folie-weiss),var(--folie-rot)); } /* Farbpunkte im Angebot sind anklickbar (data-tun="farbbild") und tauschen das Hauptbild. Als