/* ===================================================================================== Schaufino – Designsystem v2 („Schaufenster an der Ladenmeile“) Lädt NACH app.css und greift nur auf Seiten mit (Config ui_v2 = true). Leitidee: warmes Papier, tiefe Tinte, eine Terrakotta-Markise als Markenzeichen. Alle Farbpaare sind auf WCAG AA geprüft (redesign/tools/kontrast-check.php). ===================================================================================== */ /* ---- 1. Tokens ---------------------------------------------------------------------- */ .v2 { --paper:#F8F5EF; --surface:#FFFFFF; --surface-2:#F1EBE1; --ink:#1F2427; --ink-2:#4E4741; --muted:#6A6259; --line:#E3DACC; --line-strong:#CFC3B2; --brand:#A0412A; --brand-hover:#86351F; --brand-text:#93391F; --brand-soft:#F6E6DE; --petrol:#1F6F6B; --petrol-text:#1B5F5C; --petrol-soft:#DFEFEC; --ok:#2E7A47; --ok-soft:#E3F1E6; --warn-text:#7A4E00; --warn-soft:#FBF0D5; --err:#B3261E; --err-soft:#FBE7E4; --foot-bg:#1F2427; --foot-text:#E9E3DA; --foot-muted:#B5ACA0; --foot-link:#F3B29A; --plein:#0F2C54; --focus:var(--petrol); --r-sm:6px; --r:10px; --r-lg:16px; --shadow-sm:0 1px 2px rgba(31,36,39,.06), 0 6px 18px -12px rgba(31,36,39,.18); --shadow-lg:0 2px 4px rgba(31,36,39,.06), 0 24px 48px -24px rgba(31,36,39,.28); --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --container:1120px; --measure:68ch; --font:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif; --font-display:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif; --dur:160ms; --ease:cubic-bezier(.2,.7,.2,1); /* Alt-Tokens aus app.css auf das neue System mappen, damit Admin/Editor mitziehen */ --bg:var(--paper); --accent:var(--brand); --accent-dark:var(--brand-text); --card:var(--surface); --radius:var(--r); --shadow:var(--shadow-sm); } /* ---- 2. Basis ----------------------------------------------------------------------- */ .v2{background:var(--paper);color:var(--ink);font-family:var(--font);font-size:clamp(1rem,.95rem + .25vw,1.0625rem);line-height:1.55;-webkit-text-size-adjust:100%} .v2 *,.v2 *::before,.v2 *::after{box-sizing:border-box} .v2 .wrap{max-width:var(--container);margin:0 auto;padding-left:clamp(16px,4vw,32px);padding-right:clamp(16px,4vw,32px)} @media (min-width:1440px){.v2 .wrap{--container:1200px}} .v2 main.site-main{padding-top:var(--s5);padding-bottom:var(--s8)} .v2 h1,.v2 h2,.v2 h3,.v2 h4{font-family:var(--font-display);color:var(--ink);line-height:1.15;letter-spacing:-.015em;margin:0 0 .4em;text-wrap:balance} .v2 h1{font-size:clamp(2rem,1.45rem + 2.4vw,3.125rem);font-weight:750} .v2 h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.125rem);font-weight:700} .v2 h3{font-size:clamp(1.125rem,1.05rem + .3vw,1.25rem);font-weight:650} .v2 h4{font-size:1.0625rem;font-weight:650} .v2 p{margin:0 0 1em} .v2 a{color:var(--petrol-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em;transition:color var(--dur) var(--ease)} .v2 a:hover{color:var(--brand-text)} .v2 .lead{font-size:clamp(1.0625rem,1rem + .4vw,1.25rem);color:var(--ink-2);line-height:1.5;max-width:var(--measure)} .v2 .sub{font-size:1.0625rem;color:var(--ink-2);margin:.2em 0 1.2em} .v2 .hint,.v2 .help{font-size:.9375rem;color:var(--muted);line-height:1.5} .v2 .fineprint{font-size:.875rem;color:var(--muted);line-height:1.5;margin-top:var(--s4)} .v2 .muted{color:var(--muted)} .v2 .kicker{font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-text);margin:0 0 var(--s2)} .v2 code,.v2 .hint code{background:var(--surface-2);color:var(--ink);padding:2px 6px;border-radius:var(--r-sm);font-size:.9em} .v2 img{max-width:100%;height:auto} .v2 img.thumb{height:140px;align-self:flex-start} /* Editor-Vorschaubild: feste 72×72, sonst streckt der Flex-Container es auf Zeilenhöhe */ .v2 .ic{width:1.25em;height:1.25em;flex:0 0 auto;vertical-align:-.25em} .v2 .ic-ok{color:var(--ok)} .v2 .ic-x{color:var(--muted)} .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* Fokus: sichtbar, kontrastreich, auch auf Marken- und dunklen Flächen */ .v2 :focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:var(--r-sm)} .v2 .btn:focus-visible{outline-offset:3px;box-shadow:0 0 0 4px var(--surface)} .v2 .site-foot :focus-visible{outline-color:var(--foot-link)} .v2 .skip{left:-9999px;background:var(--ink);color:#fff;border-radius:0 0 var(--r) 0} .v2 .skip:focus{left:0;outline-color:var(--foot-link)} /* ---- 3. Markise, Vorschau-Leiste, Kopfzeile ------------------------------------------- */ .v2 .awning{height:6px;background:repeating-linear-gradient(90deg,var(--brand) 0 28px,var(--brand-soft) 28px 56px)} .v2 .preview-bar{background:var(--warn-soft);color:var(--warn-text);font-size:.875rem;font-weight:600;text-align:center;padding:6px 12px;border-bottom:1px solid #EAD9AE} .v2 .site-head{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line)} .v2 .site-head-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:64px;position:relative} .v2 .logo{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-family:var(--font-display);font-weight:750;font-size:1.375rem;letter-spacing:-.02em} .v2 .logo:hover{color:var(--ink)} .v2 .logo-mark{width:34px;height:30px;color:var(--ink)} .v2 .logo-light{color:var(--foot-text)} .v2 .logo-light .logo-mark{color:var(--foot-text)} .v2 .logo-light .logo-mark path[fill="var(--paper)"]{stroke:var(--foot-bg)} .v2 .site-nav{display:flex;align-items:center;gap:var(--s5);flex:1;justify-content:flex-end} .v2 .nav-list,.v2 .nav-actions{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:var(--s1)} .v2 .nav-list a,.v2 .nav-actions .nav-link-muted{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 12px;border-radius:var(--r-sm);color:var(--ink-2);font-weight:600;font-size:.9375rem;text-decoration:none} .v2 .nav-list a:hover,.v2 .nav-actions .nav-link-muted:hover{color:var(--ink);background:var(--surface-2)} .v2 .nav-list a[aria-current="page"],.v2 .nav-actions a[aria-current="page"]{color:var(--brand-text);box-shadow:inset 0 -2px 0 var(--brand)} .v2 .nav-actions{margin-left:var(--s2)} .v2 .nav-cta{margin-left:var(--s2)} .v2 .nav-toggle{display:none;align-items:center;gap:8px;min-height:44px;padding:8px 12px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font:inherit;font-weight:600;cursor:pointer} .v2 .nav-toggle .ic{width:22px;height:22px} .v2 .nav-toggle .ic-close{display:none} .v2 .nav-toggle[aria-expanded="true"] .ic-menu{display:none} .v2 .nav-toggle[aria-expanded="true"] .ic-close{display:block} @media (max-width:899px){ .js .v2 .nav-toggle{display:inline-flex} .js .v2 .site-nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:var(--s2);background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);padding:var(--s3) clamp(16px,4vw,32px) var(--s5)} .js .v2 .site-nav.is-open{display:flex} .js .v2 .nav-list,.js .v2 .nav-actions{flex-direction:column;align-items:stretch;margin:0} .js .v2 .nav-list a,.js .v2 .nav-actions .nav-link-muted{min-height:48px;font-size:1.0625rem} .js .v2 .nav-cta{margin:var(--s2) 0 0;justify-content:center;min-height:48px} .no-js .v2 .site-head-in{flex-wrap:wrap;padding-bottom:var(--s2)} .no-js .v2 .site-nav{flex-wrap:wrap;justify-content:flex-start;width:100%} } /* ---- 4. Buttons --------------------------------------------------------------------- */ .v2 .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;border:1px solid var(--brand);border-radius:8px;background:var(--brand);color:#fff;font:inherit;font-weight:650;font-size:1rem;line-height:1.2;text-decoration:none;cursor:pointer;box-shadow:none;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease),color var(--dur) var(--ease);transform:none;filter:none} .v2 .btn:hover{background:var(--brand-hover);border-color:var(--brand-hover);color:#fff;filter:none;transform:none} .v2 .btn:active{transform:translateY(1px)} .v2 .btn .ic{width:1.15em;height:1.15em} .v2 .btn.btn-secondary,.v2 .btn.secondary{background:var(--surface);color:var(--brand-text);border-color:var(--line-strong)} .v2 .btn.btn-secondary:hover,.v2 .btn.secondary:hover{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-text)} .v2 .btn.btn-lg,.v2 .btn.big{min-height:52px;padding:14px 26px;font-size:1.0625rem;margin:0} .v2 .btn.btn-sm{min-height:40px;padding:8px 14px;font-size:.9375rem} .v2 .btn[disabled],.v2 .btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none} .v2 .btn.is-loading{position:relative;color:transparent!important;pointer-events:none} .v2 .btn.is-loading::after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:v2spin .8s linear infinite} .v2 .btn.btn-secondary.is-loading::after{border-color:var(--brand-soft);border-top-color:var(--brand)} @keyframes v2spin{to{transform:rotate(360deg)}} .v2 .link{color:var(--petrol-text)} .v2 .link-back,.v2 .link-more{display:inline-flex;align-items:center;gap:6px;font-weight:600;text-decoration:none} .v2 .link-back:hover,.v2 .link-more:hover{text-decoration:underline} .v2 .ic-back{transform:rotate(180deg)} /* ---- 5. Badges, Hinweise, Flash ----------------------------------------------------- */ .v2 .badge{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--surface-2);color:var(--ink-2)} .v2 .badge-ok{background:var(--ok-soft);color:var(--ok)} .v2 .badge-warn{background:var(--warn-soft);color:var(--warn-text)} .v2 .badge-neutral{background:var(--ink);color:#fff} .v2 .badge-plein{background:var(--plein);color:#fff} .v2 .badge.ok{background:var(--ok-soft);color:var(--ok)} .v2 .badge.off{background:var(--surface-2);color:var(--muted)} .v2 .notice{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);font-size:.9375rem;line-height:1.5;margin:0 0 var(--s5)} .v2 .notice .ic{margin-top:2px;color:var(--petrol-text)} .v2 .notice-b2b{background:var(--petrol-soft);border-color:#C6E0DC;color:var(--ink-2)} .v2 .notice-b2b strong{color:var(--petrol-text)} .v2 .notice-info{background:var(--surface-2);border-color:var(--line);color:var(--ink-2)} .v2 .b2b-note{background:var(--petrol-soft);border:1px solid #C6E0DC;border-left-width:4px;border-left-color:var(--petrol);color:var(--ink-2);border-radius:var(--r)} .v2 .b2b-note strong{color:var(--petrol-text)} .v2 .flash{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border-radius:var(--r);border:1px solid;font-weight:600;line-height:1.45;margin-bottom:var(--s5)} .v2 .flash .ic{margin-top:2px} .v2 .flash.ok{background:var(--ok-soft);color:var(--ok);border-color:#BFDCC7} .v2 .flash.err{background:var(--err-soft);color:var(--err);border-color:#F0C4BE} .v2 .flash.info{background:var(--petrol-soft);color:var(--petrol-text);border-color:#C6E0DC} .v2 .honest{max-width:var(--measure);margin:var(--s5) auto 0;padding:14px 18px;border-left:3px solid var(--line-strong);color:var(--ink-2);font-size:.9375rem} /* ---- 6. Karten, Abschnitte, Tabellen ------------------------------------------------- */ .v2 .card-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:clamp(20px,3vw,36px)} .v2 .card-box.narrow{max-width:520px} .v2 .card-v2{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,2.5vw,28px)} .v2 .card-v2 h2{display:flex;align-items:center;gap:10px;font-size:1.25rem} .v2 .card-v2 h2 .ic{color:var(--brand-text);width:1.4em;height:1.4em} .v2 .sec{padding:clamp(40px,6vw,80px) 0;border-top:1px solid var(--line)} .v2 .sec:first-of-type{border-top:0} .v2 .sec-tint{background:var(--surface-2);box-shadow:0 0 0 100vmax var(--surface-2);clip-path:inset(0 -100vmax)} .v2 .sec-head{max-width:760px;margin:0 auto var(--s6);text-align:center} .v2 .sec-head .lead{margin:0 auto} .v2 .sec-more{text-align:center;margin-top:var(--s5)} .v2 .sec-more a{display:inline-flex;align-items:center;gap:6px;font-weight:650;text-decoration:none} .v2 .sec-more a:hover{text-decoration:underline} .v2 .page-head{padding:var(--s4) 0 var(--s5);max-width:820px} .v2 .page-head .lead{margin-bottom:var(--s4)} .v2 .checklist{list-style:none;margin:0;padding:0;display:grid;gap:8px} .v2 .checklist li{display:flex;gap:10px;align-items:flex-start;line-height:1.45} .v2 .checklist .ic{color:var(--ok);margin-top:3px} .v2 .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)} .v2 table.cmp{width:100%;border-collapse:collapse;font-size:.9375rem;min-width:560px} .v2 .cmp th,.v2 .cmp td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)} .v2 .cmp tbody tr:last-child th,.v2 .cmp tbody tr:last-child td{border-bottom:0} .v2 .cmp thead th{font-size:.8125rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:var(--surface-2)} .v2 .cmp tbody th{font-weight:650;color:var(--ink);width:22%} .v2 .cmp td .ic{margin-right:8px} .v2 .cmp td.cmp-us,.v2 .cmp th.cmp-us{background:color-mix(in srgb,var(--brand-soft) 45%,var(--surface));color:var(--ink)} .v2 .cmp thead th.cmp-us{color:var(--brand-text)} .v2 .cmp-plans td{text-align:center} .v2 .cmp-plans td .ic{margin:0} .v2 .tbl th{color:var(--muted)} .v2 .tbl td,.v2 .tbl th{border-color:var(--line)} .v2 .legal,.v2 .prose{line-height:1.7;color:var(--ink-2);max-width:var(--measure)} .v2 .prose h2{font-size:1.375rem;margin-top:1.6em} .v2 .prose ul{padding-left:1.2em} .v2 .prose li{margin:.3em 0} /* ---- 7. Formulare ------------------------------------------------------------------- */ .v2 .form{gap:var(--s4)} .v2 .field{display:flex;flex-direction:column;gap:6px} .v2 .field label,.v2 .form label{font-weight:650;font-size:.9375rem;color:var(--ink)} .v2 .opt,.v2 .form .opt{font-weight:400;color:var(--muted)} .v2 .field-row{display:grid;gap:var(--s4);grid-template-columns:1fr} @media (min-width:640px){.v2 .field-row{grid-template-columns:1.4fr 1fr}} .v2 input[type=text],.v2 input[type=email],.v2 input[type=password],.v2 input[type=number],.v2 input[type=date],.v2 input[type=search],.v2 input[type=url],.v2 textarea,.v2 select, .v2 .form input[type=text],.v2 .form input[type=password],.v2 .form input[type=number],.v2 .form input[type=date],.v2 .form textarea{ font:inherit;font-size:1rem;min-height:48px;padding:11px 14px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--ink);width:100%; transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)} .v2 input:hover,.v2 textarea:hover,.v2 select:hover{border-color:#B7A992} .v2 input:focus-visible,.v2 textarea:focus-visible,.v2 select:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--petrol)} .v2 input[aria-invalid="true"],.v2 textarea[aria-invalid="true"]{border-color:var(--err);box-shadow:inset 0 0 0 1px var(--err)} .v2 input::placeholder,.v2 textarea::placeholder{color:#8B8379;opacity:1} .v2 .field-error{display:flex;gap:6px;align-items:flex-start;color:var(--err);font-size:.9375rem;font-weight:600;margin:0} .v2 .field-error[hidden]{display:none} .v2 .field-check .check,.v2 .form .check{display:flex;gap:12px;align-items:flex-start;font-weight:500;font-size:.9375rem;line-height:1.5;color:var(--ink-2);cursor:pointer} .v2 .check input[type=checkbox],.v2 .form .check input{width:22px;height:22px;flex:0 0 22px;margin:1px 0 0;accent-color:var(--brand);cursor:pointer} .v2 .form textarea{font-family:ui-monospace,Consolas,monospace;font-size:.9375rem} .v2 .legal-edit textarea,.v2 .legal-edit input[type=text],.v2 .prod-fields input[type=text],.v2 .prod-fields textarea,.v2 .legal-edit select,.v2 .markt-search input{border-color:var(--line-strong);background:var(--surface)} /* Tarifwahl als Karten-Radios */ .v2 .plan-choice{display:grid;gap:var(--s3)} @media (min-width:720px){.v2 .plan-choice{grid-template-columns:1fr 1fr}} .v2 .form label.plan-option,.v2 .plan-option{position:relative;display:flex;flex-direction:row;align-items:flex-start;text-align:left;font-weight:400;gap:14px;padding:16px 18px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);cursor:pointer;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)} .v2 .plan-option:hover{border-color:var(--brand)} .v2 .plan-option input{width:22px;height:22px;flex:0 0 22px;margin:2px 0 0;accent-color:var(--brand)} .v2 .plan-option:has(input:checked){border-color:var(--brand);background:color-mix(in srgb,var(--brand-soft) 55%,var(--surface));box-shadow:inset 0 0 0 1px var(--brand)} .v2 .plan-option:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:3px} .v2 .po-body{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:4px;min-width:0} .v2 .po-title{font-weight:700;font-size:1.0625rem} .v2 .po-price{font-family:var(--font-display);font-weight:750;font-size:1.375rem;color:var(--brand-text)} .v2 .po-price small{font-size:.875rem;font-weight:500;color:var(--muted)} .v2 .po-desc{font-size:.9375rem;color:var(--ink-2);line-height:1.45} /* Stepper */ .v2 .steps-nav{list-style:none;margin:0 0 var(--s5);padding:0;display:flex;gap:var(--s2);counter-reset:none} .v2 .steps-nav li{flex:1;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-sm);background:var(--surface-2);color:var(--muted);font-size:.9375rem;font-weight:600;min-width:0} .v2 .steps-nav .sn-no{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex:0 0 28px;border-radius:50%;background:var(--surface);border:1.5px solid var(--line-strong);font-size:.875rem} .v2 .steps-nav .sn-lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .v2 .steps-nav li.is-current{background:var(--brand-soft);color:var(--brand-text)} .v2 .steps-nav li.is-current .sn-no{background:var(--brand);border-color:var(--brand);color:#fff} .v2 .steps-nav li.is-done{color:var(--ok)} .v2 .steps-nav li.is-done .sn-no{background:var(--ok);border-color:var(--ok);color:#fff} @media (max-width:560px){.v2 .steps-nav .sn-lbl{display:none}.v2 .steps-nav li.is-current .sn-lbl{display:inline}.v2 .steps-nav li:not(.is-current){flex:0 0 auto}} .v2 .step{border:0;padding:0;margin:0;min-width:0;display:grid;gap:var(--s4)} .v2 .step legend{font-family:var(--font-display);font-weight:700;font-size:1.25rem;display:flex;align-items:center;gap:10px;margin-bottom:var(--s3);padding:0} .v2 .step legend .step-no,.v2 .steps-v2 .step-no{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--brand);color:#fff;font-size:.9375rem;font-weight:750;margin:0} .js .v2 .step legend .step-no{display:none} .js .v2 .stepper .step{display:none} .js .v2 .stepper .step.is-active{display:grid} .v2 .step-actions{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:flex-end;padding-top:var(--s2)} .no-js .v2 .step-actions [data-next],.no-js .v2 .step-actions [data-prev],.no-js .v2 .steps-nav{display:none} .v2 .step-actions-final{align-items:center} .v2 .step-actions-final [data-submit]{margin-left:auto} .v2 .summary{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px} .v2 .summary h4{margin:0 0 .6em} .v2 .summary dl{margin:0;display:grid;gap:8px} .v2 .summary dl>div{display:grid;grid-template-columns:90px 1fr;gap:8px;font-size:.9375rem} .v2 .summary dt{color:var(--muted);font-weight:600} .v2 .summary dd{margin:0;color:var(--ink)} .v2 .summary .fineprint{margin-top:var(--s3);margin-bottom:0} /* Tabs */ .v2 .tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:0 0 var(--s5)} .v2 .tab{appearance:none;background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;padding:12px 16px;min-height:48px;font:inherit;font-weight:650;color:var(--ink-2);cursor:pointer;border-radius:var(--r-sm) var(--r-sm) 0 0} .v2 .tab:hover{color:var(--ink);background:var(--surface-2)} .v2 .tab[aria-selected="true"]{color:var(--brand-text);border-bottom-color:var(--brand)} .no-js .v2 .tabs{display:none} .no-js .v2 .tabpanel[hidden]{display:block} .no-js .v2 .tabpanel+.tabpanel{margin-top:var(--s7);padding-top:var(--s6);border-top:1px solid var(--line)} .js .v2 .tab-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)} .v2 .start-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:clamp(18px,3vw,36px);max-width:860px;margin:0 auto} /* ---- 8. Startseite ------------------------------------------------------------------ */ .v2 .hero-v2{display:grid;gap:var(--s6);align-items:center;padding:clamp(16px,3vw,40px) 0 clamp(32px,5vw,64px)} .v2 .hero-v2>*{min-width:0} @media (min-width:980px){.v2 .hero-v2{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--s7)}} .v2 .hero-copy h1{margin-bottom:.5em} .v2 .hero-copy .lead{margin-bottom:var(--s5)} .v2 .hero-cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-bottom:var(--s5)} .v2 .trust-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;font-size:.9375rem;color:var(--ink-2);font-weight:600} .v2 .trust-list li{display:flex;align-items:center;gap:8px} .v2 .trust-list .ic{color:var(--brand-text)} @media (max-width:420px){.v2 .trust-list{grid-template-columns:1fr}} .v2 .schaufenster{position:relative;margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden} .v2 .sf-awning{position:relative;height:16px;background:repeating-linear-gradient(90deg,var(--brand) 0 22px,var(--surface-2) 22px 44px)} .v2 .sf-awning::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:8px;background:radial-gradient(circle at 11px 0,var(--brand) 7.5px,transparent 8.5px) 0 0/44px 8px repeat-x,radial-gradient(circle at 33px 0,var(--surface-2) 7.5px,transparent 8.5px) 0 0/44px 8px repeat-x} .v2 .sf-bar{display:flex;align-items:center;gap:6px;padding:16px 16px 8px;color:var(--muted);font-size:.8125rem} .v2 .sf-dot{width:9px;height:9px;border-radius:50%;background:var(--line-strong)} .v2 .sf-url{margin-left:8px;padding:4px 10px;border-radius:999px;background:var(--surface-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:0 1 auto;max-width:70%} .v2 .sf-head{display:flex;justify-content:space-between;align-items:center;padding:6px 18px 10px;font-family:var(--font-display);font-size:1.125rem} .v2 .sf-cart{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:600;color:var(--ink-2);border:1px solid var(--line);border-radius:999px;padding:4px 10px} .v2 .sf-grid{list-style:none;margin:0;padding:0 18px 18px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .v2 .sf-grid li{min-width:0} .v2 .sf-grid a{display:flex;flex-direction:column;gap:6px;min-width:0;text-decoration:none;color:var(--ink);border-radius:var(--r);padding:0} .v2 .sf-grid a:hover .sf-title{color:var(--brand-text)} .v2 .sf-grid img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r);background:var(--surface-2);border:1px solid var(--line)} .v2 .sf-title{font-size:.8125rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .v2 .sf-price{font-size:.8125rem;font-weight:700;color:var(--ink-2)} .v2 .schaufenster figcaption{padding:12px 18px;border-top:1px solid var(--line);background:var(--surface-2);font-size:.875rem;color:var(--ink-2)} .v2 .schaufenster-leer p{padding:var(--s7) var(--s5);text-align:center;color:var(--muted)} .v2 .audience{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))} .v2 .audience li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px} .v2 .audience .ic{width:28px;height:28px;color:var(--brand-text);margin-bottom:10px} .v2 .audience h3{font-size:1.0625rem;margin-bottom:.3em} .v2 .audience p{margin:0;font-size:.9375rem;color:var(--ink-2)} .v2 .steps-v2{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4);grid-template-columns:1fr} @media (min-width:820px){.v2 .steps-v2{grid-template-columns:repeat(3,1fr);gap:var(--s5)}} .v2 .steps-v2 li{position:relative;display:flex;gap:16px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px} .v2 .steps-v2 li>.step-no{flex:0 0 32px} .v2 .steps-v2 li>div{min-width:0} .v2 .steps-v2 .ic{width:28px;height:28px;color:var(--brand-text);margin-bottom:10px} .v2 .steps-v2 h3{margin-bottom:.3em} .v2 .steps-v2 p{margin:0;font-size:.9375rem;color:var(--ink-2)} .v2 .import-grid{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))} .v2 .import-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px} .v2 .import-card h3{font-size:1.0625rem} .v2 .import-card p{margin:0;font-size:.9375rem;color:var(--ink-2)} .v2 .sec-tint .fineprint{text-align:center;max-width:760px;margin:var(--s5) auto 0} .v2 .feature-grid{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))} .v2 .feature-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px} .v2 .fc-head{display:flex;align-items:center;gap:12px;margin-bottom:14px} .v2 .fc-head .ic{width:30px;height:30px;color:var(--brand-text);padding:5px;background:var(--brand-soft);border-radius:8px;box-sizing:content-box} .v2 .fc-head h3{margin:0} .v2 .feature-card .checklist li{font-size:.9375rem;color:var(--ink-2)} .v2 .feature-grid+.fineprint{text-align:center} .v2 .examples{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr))} .v2 .example{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);text-decoration:none;color:var(--ink);overflow:hidden;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)} .v2 .example:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);color:var(--ink)} .v2 .example-real{grid-column:span 2} @media (max-width:520px){.v2 .example-real{grid-column:span 1}} .v2 .ex-imgs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--line)} .v2 .ex-imgs img{width:100%;min-width:0;aspect-ratio:1/1;object-fit:cover;display:block} .v2 .ex-body{display:flex;flex-direction:column;gap:6px;padding:16px 18px} .v2 .ex-body strong{font-family:var(--font-display);font-size:1.125rem} .v2 .ex-go{display:inline-flex;align-items:center;gap:6px;font-weight:650;color:var(--brand-text);font-size:.9375rem} .v2 .ex-theme{font-size:.875rem;color:var(--muted)} .v2 .ex-mock{display:flex;flex-direction:column;gap:8px;padding:16px;background:var(--d-bg);border-bottom:1px solid var(--d-line);min-height:120px} .v2 .em-bar{height:10px;width:55%;border-radius:4px;background:var(--d-ink);opacity:.85} .v2 .em-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px} .v2 .em-tiles span{aspect-ratio:1/1;border-radius:6px;background:var(--d-card);border:1px solid var(--d-line)} .v2 .em-btn{height:12px;width:40%;border-radius:999px;background:var(--d-acc)} .v2 .plans{display:grid;gap:var(--s4);align-items:stretch;grid-template-columns:1fr} @media (min-width:900px){.v2 .plans{grid-template-columns:repeat(3,1fr);gap:var(--s5)}} .v2 .plan{position:relative;display:flex;flex-direction:column;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 26px} .v2 .plan h3{font-size:1.375rem;margin:0} .v2 .plan-for{margin:0;color:var(--ink-2);font-size:.9375rem;min-height:2.6em} .v2 .plan-price{display:flex;align-items:baseline;gap:8px;margin:6px 0 0;font-family:var(--font-display)} .v2 .plan-price strong{font-size:2.25rem;font-weight:750;letter-spacing:-.02em} .v2 .plan-price span{color:var(--muted);font-size:.9375rem} .v2 .plan-note{margin:0;font-size:.875rem;color:var(--muted)} .v2 .plan .checklist{margin:8px 0 4px;font-size:.9375rem} .v2 .plan .btn{margin-top:auto} .v2 .plan-na{font-size:.875rem;color:var(--muted);border-top:1px solid var(--line);padding-top:10px;margin:4px 0 8px} .v2 .plan-featured{border:2px solid var(--brand);box-shadow:var(--shadow-lg);padding-top:34px} .v2 .plan-featured::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:repeating-linear-gradient(90deg,var(--brand) 0 20px,var(--brand-soft) 20px 40px);border-radius:14px 14px 0 0} .v2 .plan-flag{position:absolute;top:18px;right:20px;margin:0;font-size:.75rem;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-text);background:var(--brand-soft);padding:4px 10px;border-radius:999px} .v2 .plan-gross{text-align:center;color:var(--muted);font-size:.875rem;margin:var(--s5) 0 0} .v2 .plan-details{max-width:900px;margin:var(--s5) auto 0} .v2 .plan-details summary{cursor:pointer;font-weight:650;color:var(--petrol-text);padding:10px 0;list-style:none;display:inline-flex;align-items:center;gap:8px} .v2 .plan-details summary::-webkit-details-marker{display:none} .v2 .plan-details summary::before{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform var(--dur) var(--ease)} .v2 .plan-details[open] summary::before{transform:rotate(45deg)} .v2 .plan-details .table-wrap{margin-top:var(--s3)} .v2 .faq-v2{max-width:780px;margin:0 auto;display:grid;gap:10px} .v2 details.faq-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:0;box-shadow:none} .v2 details.faq-item summary{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;cursor:pointer;font-weight:650;list-style:none;border-radius:var(--r)} .v2 details.faq-item summary::-webkit-details-marker{display:none} .v2 details.faq-item summary .ic{color:var(--muted);transition:transform var(--dur) var(--ease)} .v2 details.faq-item[open] summary .ic{transform:rotate(180deg)} .v2 details.faq-item summary:hover{background:var(--surface-2)} .v2 details.faq-item p{margin:0;padding:0 18px 18px;color:var(--ink-2);line-height:1.6} .v2 details.codebox{background:var(--surface);border-color:var(--line)} /* ---- 9. Ladenmeile ------------------------------------------------------------------ */ .v2 .chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 var(--s5)} .v2 .chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);font-size:.9375rem;font-weight:600;text-decoration:none} .v2 .chip:hover{border-color:var(--brand);color:var(--brand-text)} .v2 .chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff} .v2 .chip-remove{background:var(--brand-soft);border-color:transparent;color:var(--brand-text)} .v2 .chip-remove .ic{width:1em;height:1em} .v2 .markt-v2{display:grid;gap:var(--s6);grid-template-columns:1fr;align-items:start} @media (min-width:900px){.v2 .markt-v2{grid-template-columns:240px minmax(0,1fr)}.v2 .markt-aside{position:sticky;top:80px}} .v2 .aside-title{font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 var(--s2) 4px} .v2 .cat-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px} .v2 .cat{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:44px;padding:9px 12px;border-radius:var(--r-sm);color:var(--ink-2);text-decoration:none;font-weight:600;font-size:.9375rem} .v2 .cat:hover{background:var(--surface-2);color:var(--ink)} .v2 .cat.is-on{background:var(--brand);color:#fff} .v2 .cat-count{font-size:.75rem;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--surface-2);color:var(--muted)} .v2 .cat.is-on .cat-count{background:rgba(255,255,255,.22);color:#fff} @media (max-width:899px){ .v2 .cat-list{flex-direction:row;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin} .v2 .cat{flex:0 0 auto;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface)} .v2 .cat.is-on{border-color:var(--brand)} } .v2 .search{display:flex;gap:10px;max-width:640px;margin:0 0 var(--s4)} .v2 .search-in{position:relative;flex:1} .v2 .search-in .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none} .v2 .search-in input{padding-left:44px} .v2 .result-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin:0 0 var(--s4)} .v2 .result-count{margin:0;font-weight:650;color:var(--ink-2);font-size:.9375rem} .v2 .active-filters{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .v2 .product-grid{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fill,minmax(160px,1fr))} @media (min-width:600px){.v2 .product-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}} @media (min-width:1200px){.v2 .product-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}} .v2 .product{display:flex;flex-direction:column;height:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;text-decoration:none;color:var(--ink);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)} .v2 .product:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);color:var(--ink)} .v2 .p-img{position:relative;display:block;background:var(--surface-2)} .v2 .p-img img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block} .v2 .is-soldout .p-img img{opacity:.55} .v2 .p-badge{position:absolute;top:10px;left:10px} .v2 .p-body{display:flex;flex-direction:column;gap:4px;padding:12px 14px 14px} .v2 .p-cat{font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--brand-text)} .v2 .p-title{font-weight:600;line-height:1.3;font-size:.9375rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .v2 .p-price{font-weight:700;margin-top:2px} .v2 .p-price small{font-size:.75rem;font-weight:500;color:var(--muted)} .v2 .p-shop{display:flex;align-items:center;gap:6px;font-size:.8125rem;color:var(--muted);margin-top:auto;padding-top:6px} .v2 .empty{text-align:center;padding:var(--s8) var(--s5);background:var(--surface);border:1px dashed var(--line-strong);border-radius:var(--r-lg)} .v2 .empty .ic{width:36px;height:36px;color:var(--muted);margin-bottom:var(--s3)} .v2 .empty h2{font-size:1.375rem} .v2 .empty p{color:var(--ink-2);max-width:48ch;margin:0 auto 1em} /* ---- 10. FAQ, Ratgeber, Links, Händler, CTA-Band ------------------------------------- */ .v2 .faq-layout{display:grid;gap:var(--s6);grid-template-columns:1fr;align-items:start} @media (min-width:900px){.v2 .faq-layout{grid-template-columns:220px minmax(0,1fr)}.v2 .faq-toc{position:sticky;top:80px}} .v2 .faq-toc ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px} @media (min-width:900px){.v2 .faq-toc ul{flex-direction:column}} .v2 .faq-toc a{display:block;min-height:44px;padding:10px 12px;border-radius:var(--r-sm);color:var(--ink-2);font-weight:600;font-size:.9375rem;text-decoration:none;border:1px solid var(--line-strong);background:var(--surface)} @media (min-width:900px){.v2 .faq-toc a{border-color:transparent;background:transparent}} .v2 .faq-toc a:hover{background:var(--surface-2);color:var(--ink)} .v2 .faq-group{padding:0 0 var(--s6)} .v2 .faq-group h2{font-size:1.375rem;scroll-margin-top:90px} .v2 .faq-body .faq-v2{max-width:none} .v2 .cta-band{margin:var(--s7) 0 0;padding:clamp(28px,4vw,48px);border-radius:var(--r-lg);background:var(--ink);color:var(--foot-text);text-align:center} .v2 .cta-band h2{color:#fff} .v2 .cta-band p{color:var(--foot-text)} .v2 .cta-band-actions{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center;margin:0} .v2 .cta-band .btn-secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)} .v2 .cta-band .btn-secondary:hover{background:rgba(255,255,255,.1);color:#fff;border-color:#fff} .v2 .cta-band-inline{margin-top:var(--s6)} .v2 .article{max-width:var(--container)} .v2 .article h1{max-width:20ch} .v2 .article-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3);max-width:860px} .v2 .article-card{display:flex;align-items:center;gap:16px;padding:18px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);text-decoration:none;color:var(--ink)} .v2 .article-card:hover{border-color:var(--brand);color:var(--ink)} .v2 .article-card>.ic{width:28px;height:28px;color:var(--brand-text)} .v2 .article-card>span{flex:1;display:flex;flex-direction:column;gap:2px} .v2 .article-card strong{font-family:var(--font-display);font-size:1.125rem} .v2 .ac-meta{font-size:.8125rem;color:var(--muted);font-weight:600} .v2 .ac-desc{font-size:.9375rem;color:var(--ink-2)} .v2 .ic-go{color:var(--brand-text)} .v2 .biolinks-v2{max-width:480px;margin:0 auto;display:flex;flex-direction:column;gap:12px} .v2 .biolinks-v2 .bl-head{text-align:center;margin-bottom:var(--s3)} .v2 .biolinks-v2 .bl-head .logo-mark{width:48px;height:42px;color:var(--ink)} .v2 .biolinks-v2 h1{font-size:2rem;margin:.2em 0 .2em} .v2 .biolinks-v2 .bl-head p{color:var(--ink-2)} .v2 .bl-item{display:flex;align-items:center;gap:14px;padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);text-decoration:none;color:var(--ink);min-height:64px} .v2 .bl-item:hover{border-color:var(--brand);color:var(--ink)} .v2 .bl-item>.ic{width:26px;height:26px;color:var(--brand-text)} .v2 .bl-item>span{flex:1;display:flex;flex-direction:column;line-height:1.3} .v2 .bl-item small{color:var(--muted);font-size:.875rem} .v2 .haendler-grid{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))} .v2 .haendler-grid .card-v2 p{font-size:.9375rem;color:var(--ink-2)} .v2 .haendler-grid .checklist li{font-size:.9375rem;color:var(--ink-2)} /* ---- 11. Fußzeile ------------------------------------------------------------------- */ .v2 .site-foot{background:var(--foot-bg);color:var(--foot-text);margin-top:0;border-top:0} .v2 .site-foot .wrap{padding-top:var(--s7);padding-bottom:var(--s5);color:var(--foot-text);font-size:.9375rem} .v2 .foot-grid{display:grid;gap:var(--s6);grid-template-columns:1fr} @media (min-width:640px){.v2 .foot-grid{grid-template-columns:1fr 1fr}} @media (min-width:1024px){.v2 .foot-grid{grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr}} .v2 .foot-brand p{color:var(--foot-muted);max-width:34ch} .v2 .foot-b2b{display:flex;gap:8px;align-items:flex-start;color:var(--foot-text)!important;font-weight:600} .v2 .foot-col h2{font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--foot-muted);margin:0 0 var(--s3)} .v2 .foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:6px} .v2 .site-foot a{color:var(--foot-text);text-decoration:none;display:inline-block;padding:4px 0;min-height:32px} .v2 .site-foot a:hover{color:var(--foot-link);text-decoration:underline} .v2 .foot-provider p{color:var(--foot-muted);margin:0 0 var(--s3);line-height:1.6} .v2 .foot-plein{display:flex;align-items:center;gap:8px;font-size:.875rem} .v2 .foot-bottom{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3);color:var(--foot-muted);font-size:.8125rem} .v2 .foot-bottom p{margin:0} .v2 .foot-admin{color:var(--foot-muted)!important;font-size:.8125rem;margin-left:8px} .v2 .foot{display:none} /* ---- 12. Bewegung -------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ .v2 .btn.is-loading::after{animation:none;border-top-color:rgba(255,255,255,.4);border-style:dotted} .v2 .example:hover,.v2 .product:hover{transform:none} } /* ---- 13. Hybrid-Ergänzungen (Vergleich 2026-09-04): editoriale Serife, dunkle Preissektion, ruhigere Hierarchie ---- */ .v2{--font-display:Georgia,"Times New Roman","Noto Serif","DejaVu Serif",serif;--focus-dark:var(--foot-link)} .v2 h1,.v2 h2{font-family:var(--font-display);font-weight:500;letter-spacing:-.02em;line-height:1.08} .v2 h1{font-size:clamp(2.25rem,1.5rem + 3vw,3.75rem)} .v2 h2{font-size:clamp(1.75rem,1.3rem + 1.6vw,2.5rem)} .v2 h1 em{font-style:italic;color:var(--brand-text)} .v2 .logo,.v2 .logo-word{font-family:var(--font)} .v2 .sec-head-left{text-align:left;margin-left:0} .v2 .sec-head-left .lead{margin-left:0} .v2 .hero-fine{font-size:.875rem;color:var(--muted);margin:var(--s4) 0 0;line-height:1.5} /* Schaufenster: Bühne mit einem echten Produkt + drei Kacheln */ .v2 .sf-stage{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);text-decoration:none;color:var(--ink);background:var(--surface-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .v2 .sf-stage img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;display:block} .v2 .sf-stage-body{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:18px 20px;min-width:0} .v2 .sf-stage-kicker{font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .v2 .sf-stage-body strong{font-family:var(--font-display);font-weight:500;font-size:clamp(1.125rem,1rem + .6vw,1.5rem);line-height:1.15;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .v2 .sf-stage-price{font-weight:700;font-size:1.0625rem} .v2 .sf-stage-go{display:inline-flex;align-items:center;gap:6px;font-size:.875rem;font-weight:650;color:var(--brand-text)} .v2 .sf-stage:hover .sf-stage-go{text-decoration:underline} .v2 .sf-grid-3{padding-top:14px} @media (max-width:420px){.v2 .sf-stage{grid-template-columns:1fr}.v2 .sf-stage img{aspect-ratio:4/3}} /* Drei Schritte als nummerierte Liste mit Oberlinie statt Karten */ .v2 .steps-v2 li{background:none;border:0;border-top:2px solid var(--ink);border-radius:0;padding:20px 0 0;gap:14px} .v2 .steps-v2 li>.step-no{background:none;color:var(--brand-text);font-family:var(--font-display);font-size:1.75rem;line-height:1;width:auto;height:auto;border-radius:0;flex:0 0 auto;font-weight:500;margin-top:-2px} .v2 .steps-v2 .ic{width:24px;height:24px;margin-bottom:8px} /* Transfer-Leiste */ .v2 .transfer{margin-top:var(--s6);display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;padding:18px 22px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:var(--r)} .v2 .transfer strong{font-size:1.0625rem} .v2 .transfer span{font-size:.9375rem;color:var(--ink-2);line-height:1.5} .v2 .transfer a{display:inline-flex;align-items:center;gap:6px;font-weight:650;white-space:nowrap;text-decoration:none} .v2 .transfer a:hover{text-decoration:underline} @media (max-width:760px){.v2 .transfer{grid-template-columns:1fr;gap:10px}} /* Nutzencluster mit Foto */ .v2 .cluster-layout{display:grid;gap:var(--s6);grid-template-columns:1fr;align-items:center} @media (min-width:900px){.v2 .cluster-layout{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s7)}} .v2 .clusters{list-style:none;margin:0;padding:0} .v2 .clusters li{display:flex;gap:18px;padding:18px 0;border-top:1px solid var(--line-strong)} .v2 .clusters li:last-child{border-bottom:1px solid var(--line-strong)} .v2 .cl-no{font-family:var(--font-display);font-size:1.75rem;line-height:1;color:var(--brand-text);flex:0 0 2.2em;font-weight:500;margin-top:2px} .v2 .clusters h3{font-size:1.125rem;margin:0 0 .3em} .v2 .clusters p{margin:0;font-size:.9375rem;color:var(--ink-2);line-height:1.55} .v2 .cluster-figure{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)} .v2 .cluster-figure img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block} .v2 .cluster-figure figcaption{padding:12px 16px;font-size:.875rem;color:var(--ink-2);border-top:1px solid var(--line)} .v2 .sec-tint .cluster-layout .fineprint{text-align:left;margin:var(--s4) 0 0;max-width:none} /* Vergleichstabelle: Schaufino-Spalte mit Kernaussage und Detail */ .v2 .cmp td b{display:block;font-weight:700;color:var(--ink)} .v2 .cmp td small{display:block;color:var(--ink-2);font-size:.875rem;margin-top:2px} .v2 .cmp tbody th{width:20%} .v2 .table-wrap:focus-visible{outline:2px solid var(--focus);outline-offset:3px} /* Dunkle Preissektion */ .v2 .sec-dark{background:var(--ink);color:var(--foot-text);box-shadow:0 0 0 100vmax var(--ink);clip-path:inset(0 -100vmax);border-top:0;--focus:var(--focus-dark)} .v2 .sec-dark+.sec{border-top:0} .v2 .sec-dark h2{color:#fff} .v2 .sec-dark .kicker{color:var(--foot-link)} .v2 .sec-dark .lead{color:var(--foot-text)} .v2 .sec-dark .plan{color:var(--ink);border-color:var(--surface)} .v2 .sec-dark .plan-featured{border-color:var(--foot-link);box-shadow:0 24px 48px -24px rgba(0,0,0,.6)} .v2 .sec-dark .plan-gross{color:var(--foot-muted)} .v2 .sec-dark .plan-details summary{color:var(--foot-link)} .v2 .sec-dark .table-wrap{background:var(--surface);color:var(--ink);border-color:var(--surface)} .v2 .sec-dark .btn.btn-secondary{background:var(--surface)} .v2 .sec-dark .btn:focus-visible{box-shadow:0 0 0 4px var(--ink)} .v2 .plan-type{margin:0;font-size:.6875rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-text)} .v2 .plan h3{font-family:var(--font-display);font-weight:500;font-size:1.875rem;letter-spacing:-.01em} .v2 .plan-featured .plan-type{margin-top:6px} /* Start: Sicherheitskacheln links, Formular rechts */ .v2 .start-layout{display:grid;gap:var(--s6);grid-template-columns:1fr;align-items:start} @media (min-width:980px){.v2 .start-layout{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s7)}} .v2 .start-side .sec-head{margin-bottom:var(--s5)} .v2 .safety{display:flex;gap:14px;align-items:flex-start;margin-top:var(--s4)} .v2 .safety>.ic{width:22px;height:22px;padding:9px;flex:0 0 auto;border-radius:50%;background:var(--petrol-soft);color:var(--petrol-text);box-sizing:content-box} .v2 .safety strong{display:block;margin-bottom:2px} .v2 .safety p{margin:0;font-size:.9375rem;color:var(--ink-2);line-height:1.5} .v2 .start-panel{max-width:none;margin:0} .v2 .sec-start{border-top:0} /* Hoher Kontrast (Windows) */ @media (forced-colors:active){ .v2 .btn{border:2px solid ButtonText} .v2 .plan-option:has(input:checked),.v2 .tab[aria-selected="true"],.v2 .chip.is-on,.v2 .cat.is-on,.v2 .nav-toggle[aria-expanded="true"]{outline:3px solid Highlight;outline-offset:2px} .v2 .awning,.v2 .sf-awning,.v2 .plan-featured::before{forced-color-adjust:none} } /* Serife nur für Seiten-Überschriften, Tarifnamen und Ordnungszahlen; UI-Überschriften, Preise und Footer bleiben serifenlos */ .v2 h3,.v2 h4,.v2 .site-foot h2,.v2 .card-v2 h2,.v2 .empty h2,.v2 .summary h4,.v2 .audience h3,.v2 .steps-v2 h3,.v2 .clusters h3{font-family:var(--font);letter-spacing:-.01em} .v2 .plan h3{font-family:var(--font-display)} .v2 .plan-price,.v2 .po-price,.v2 .sf-stage-price,.v2 .ex-body strong,.v2 .article-card strong,.v2 .biolinks-v2 h1{font-family:var(--font);font-variant-numeric:lining-nums} .v2 .plan-price strong{font-weight:750} .v2 .sec-dark .plan{border-color:var(--surface)} /* Transfer-Leiste: Text in voller Breite, Link rechts (ab 761 px), darunter (bis 760 px) */ .v2 .transfer{grid-template-columns:minmax(0,1fr) auto;gap:6px 24px} .v2 .transfer strong,.v2 .transfer span{grid-column:1} .v2 .transfer a{grid-column:2;grid-row:1 / span 2;align-self:center} @media (max-width:760px){.v2 .transfer{grid-template-columns:1fr}.v2 .transfer a{grid-column:1;grid-row:auto;margin-top:6px}} .v2 .transfer a{min-height:44px;padding:8px 0} /* Nacharbeit aus der Prüfrunde 2026-09-04 */ html:has(.v2){scroll-padding-top:88px} .v2 [id]{scroll-margin-top:88px} .v2 .ex-body{align-items:flex-start} @media (min-width:640px) and (max-width:1199px){.v2 .audience{grid-template-columns:repeat(2,1fr)}} @media (max-width:899px){.v2 .cluster-figure img{aspect-ratio:16/10;max-height:360px}} .v2 .sec-dark .plan{--focus:var(--petrol)} .v2 .sec-dark .plan .btn:focus-visible{box-shadow:0 0 0 4px var(--surface)} .v2 .transfer h3.transfer-title{font-size:1.0625rem;margin:0;font-family:var(--font)} .v2 .step legend{font-family:var(--font)} .v2 .plan-featured .plan-type{margin-top:0} .v2 .plan-details{text-align:center} .v2 .plan-details .table-wrap{text-align:left} @media (forced-colors:active){.v2 .steps-nav li.is-current{outline:2px solid Highlight;outline-offset:2px}.v2 .steps-nav li.is-done .sn-no{outline:2px solid CanvasText}} .v2 .transfer h3{grid-column:1} .v2 .start-layout>*{min-width:0} .v2 .tabs{flex-wrap:wrap} .v2 .tab{white-space:normal;text-align:left;min-width:0} /* Rabatt-Darstellung (Ladenmeile): Badge über dem Bild, Streichpreis */ .v2 .badge-sale{background:var(--brand);color:#fff;white-space:nowrap} .v2 .price-legend{font-size:.8125rem;color:var(--muted);margin:12px 0 0} .v2 .p-old{color:var(--muted);font-weight:500;text-decoration:line-through;font-size:.875em} .v2 .p-price small{display:block;margin-top:2px} @media (max-width:700px){.v2 img.thumb{height:100px}} /* Händler-Editor im neuen Layout: Streifen (unter 1320 px) unter dem klebenden Seitenkopf halten */ .v2.edit .adm-nav{top:72px} /* Händler-Editor im neuen Layout: Sprungleiste als linke Spalte neben allen Karten statt fixiert über dem Inhalt */ @media (min-width:1320px){ .v2.edit main.site-main{display:grid;grid-template-columns:190px minmax(0,1fr);column-gap:28px;align-items:start} .v2.edit main.site-main > :not(.adm-nav){grid-column:2;min-width:0} .v2.edit .adm-nav.side{grid-column:1;grid-row:1 / span 200;position:sticky;left:auto;top:88px;width:auto;max-height:calc(100vh - 110px);margin:0;display:flex;flex-direction:column;overflow:hidden} }