/* Valence Accessibility – Website. Keine externen Schriften/Skripte (DSGVO), alle Kontraste ≥ 4.5:1. */
:root{
  --ground:#F6F5F1; --card:#FFFFFF; --ink:#16181D; --text:#2B2F36; --muted:#4A4F59;
  --line:#D9D6CE; --accent:#0E5E6F; --accent-dark:#0A4553; --accent-soft:#E3EFF1; --warm:#F2B544;
  --radius:16px; --max:1120px;
  --font: ui-sans-serif, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.6}
a{color:var(--accent)} a:hover{color:var(--accent-dark)}
:focus-visible{outline:3px solid var(--warm);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px;z-index:10}
.skip:focus{left:12px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
header.site{border-bottom:1px solid var(--line);background:var(--ground)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-weight:800;font-size:19px}
.brand svg{flex-shrink:0}
nav.main{display:flex;gap:6px 20px;flex-wrap:wrap;align-items:center;font-size:15px}
nav.main a{color:var(--text);text-decoration:none;padding:10px 2px;display:inline-block;min-height:24px}
nav.main a:hover{color:var(--accent-dark);text-decoration:underline}
.lang{border:1px solid var(--line);border-radius:999px;padding:6px 12px !important}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 24px;border-radius:12px;font-weight:700;text-decoration:none;font-size:16px;border:2px solid var(--accent)}
.btn-primary{background:var(--accent);color:#fff} .btn-primary:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff}
.btn-ghost{background:transparent;color:var(--accent)} .btn-ghost:hover{background:var(--accent-soft)}
.hero{padding:72px 0 56px}
.eyebrow{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-dark);margin:0 0 12px}
h1{font-size:clamp(34px,5vw,54px);line-height:1.1;letter-spacing:-.02em;margin:0 0 20px;max-width:18ch}
h2{font-size:clamp(26px,3.2vw,34px);line-height:1.2;letter-spacing:-.01em;margin:0 0 16px}
h3{font-size:19px;margin:0 0 8px}
.lead{font-size:20px;color:var(--text);max-width:60ch;margin:0 0 28px}
.cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.note{font-size:14px;color:var(--muted)}
section{padding:56px 0}
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.card p{margin:0;color:var(--text)}
.stat{font-size:40px;font-weight:800;line-height:1;margin:0 0 8px;color:var(--accent-dark)}
.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.steps li{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;counter-increment:s}
.steps li::before{content:counter(s);display:inline-flex;width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;align-items:center;justify-content:center;margin-bottom:12px}
.compare{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.compare th,.compare td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.compare thead th{background:#EFEDE7}
.table-wrap{overflow-x:auto}
.price{font-size:40px;font-weight:800;margin:4px 0 12px}
.price small{font-size:16px;font-weight:600;color:var(--muted)}
.card.featured{border:2px solid var(--accent)}
.badge{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--accent);color:#fff;font-size:13px;font-weight:700}
ul.checks{list-style:none;padding:0;margin:0;display:grid;gap:10px}
ul.checks li{padding-left:30px;position:relative;color:var(--text)}
ul.checks li::before{content:"";position:absolute;left:4px;top:7px;width:12px;height:7px;border-left:3px solid var(--accent);border-bottom:3px solid var(--accent);transform:rotate(-45deg)}
details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:0 20px;margin-bottom:12px}
summary{cursor:pointer;font-weight:700;padding:16px 0;min-height:44px}
details p{margin:0 0 16px;color:var(--text)}
.disclaimer{background:var(--accent-soft);border-radius:var(--radius);padding:20px 24px;color:var(--accent-dark);font-size:15px}
footer.site{border-top:1px solid var(--line);padding:32px 0 48px;font-size:15px;color:var(--muted)}
footer.site .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer.site nav{display:flex;gap:6px 18px;flex-wrap:wrap}
footer.site a{color:var(--text);display:inline-block;min-height:24px;padding:4px 0;line-height:16px}
.legal{padding:48px 0 64px}
.legal .wrap{max-width:820px}
.legal h1{font-size:clamp(30px,4vw,40px);max-width:none}
.legal h2{font-size:22px;margin-top:36px}
.legal p,.legal li{color:var(--text)}
.todo{background:#FBEBC5;color:#5C3D00;border-radius:4px;padding:0 4px}
@media (max-width:640px){.hero{padding:48px 0 40px} section{padding:40px 0} nav.main{font-size:14px}}
.hero-grid{display:grid;gap:40px;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
.mock{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:0 18px 40px -24px rgba(22,24,29,.35);margin:0}
.mock .kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0 16px}
.mock .kpi{background:#F1EFE9;border-radius:12px;padding:12px}
.mock .kpi b{display:block;font-size:28px;line-height:1.1}
.mock .kpi span{font-size:13px;color:var(--muted)}
.mock .row{display:flex;gap:10px;align-items:center;font-size:14px;padding:8px 0;border-top:1px solid var(--line)}
.pill{padding:2px 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.pill.crit{background:#FBE3DE;color:#8A1C0C} .pill.ser{background:#FCEBD2;color:#6E3C00}
.mock figcaption{font-size:13px;color:var(--muted);margin-top:12px}

/* Blog */
.article{padding:40px 0 64px}
.article .wrap{max-width:760px}
.article h1{font-size:clamp(30px,4.2vw,44px);max-width:none;margin-bottom:12px}
.article h2{font-size:24px;margin:40px 0 12px}
.article h3{font-size:19px;margin:24px 0 8px}
.article p,.article li{color:var(--text)}
.article li{margin-bottom:6px}
.article .lead{font-size:19px;max-width:none}
.crumbs{font-size:14px;color:var(--muted);margin-bottom:20px}
.crumbs a{color:var(--muted)}
.meta{font-size:14px;color:var(--muted);margin:0 0 28px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;background:#ECEAE3;border-radius:4px;padding:1px 5px;color:var(--ink)}
pre{background:var(--ink);color:#F6F5F1;border-radius:12px;padding:16px 18px;overflow-x:auto;font-size:14px;line-height:1.5}
pre code{background:none;color:inherit;padding:0;font-size:inherit}
.cta-box{background:var(--card);border:2px solid var(--accent);border-radius:var(--radius);padding:24px;margin:36px 0}
.cta-box p{margin:0 0 16px}
.cta-title{font-size:20px;font-weight:800;color:var(--ink) !important}
ul.sources{font-size:15px}
.back{margin-top:32px}
.posts{list-style:none;padding:0;margin:0 0 32px;display:grid;gap:16px}
.post h2{font-size:21px;margin:0 0 8px}
.post h2 a{color:var(--ink);text-decoration:none}
.post h2 a:hover{color:var(--accent-dark);text-decoration:underline}
.post p{margin:0 0 8px}
.mt0{margin-top:0} .mt10{margin-top:10px}
.jump{display:inline-block;padding:6px 0;min-height:24px}
.visually-hidden{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Scroll-Effekte: nur CSS, kein JavaScript. Nur wenn Browser es kann und Nutzer Bewegung nicht reduziert hat. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes vm-reveal { from { opacity: .001; transform: translateY(24px); } to { opacity: 1; transform: none; } }
    @keyframes vm-pop { from { opacity: .001; transform: scale(.96); } to { opacity: 1; transform: none; } }
    @keyframes vm-row { from { opacity: .001; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
    main section h2, main section .lead,
    .steps li, .grid .card, .kpis .kpi, .faq details, .legal h2 {
      animation: vm-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 50%;
    }
    .grid .card.featured, .mock { animation: vm-pop linear both; animation-timeline: view(); animation-range: entry 0% entry 50%; }
    .table-wrap tbody tr { animation: vm-row linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    .hero-grid > * { animation: vm-reveal .7s cubic-bezier(.2,.7,.2,1) both; }
    .hero-grid > *:nth-child(2) { animation-delay: .15s; }
  }
}