/* ==========================================================================
   RVG · UI-Paket
   Bausteine für Website, Funnel und alles, was noch kommt.
   Werte siehe docs/DESIGN.md. Übersicht aller Bausteine: ui/index.html
   ========================================================================== */

/* ---------- 1. Werte (Tokens) ---------- */
:root{
  --red:#ED0037; --red-dark:#C9002F; --red-grad:linear-gradient(90deg,#C9002F,#ED0037);
  --ink:#050505; --anthracite:#1F1F1F; --grey:#5C5C5C; --line:#D6D6D6; --light:#F2F2F2; --white:#FFFFFF;
  --field-line:#BDBDBD; --placeholder:#7A7A7A;
  --ok:#15803D; --ok-bg:#F0FDF4; --warn:#B45309; --warn-bg:#FFFBEB; --err:#C9002F; --err-bg:#FFF1F3;
  --r-btn:4px; --r-card:8px;
  --shadow:0 2px 8px rgba(0,0,0,.10); --shadow-lg:0 12px 32px rgba(0,0,0,.18);
  --focus:0 0 0 3px rgba(5,5,5,.12); --focus-err:0 0 0 3px rgba(237,0,55,.12);
  --font:'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --display:'Barlow Condensed', 'Helvetica Neue', Arial, sans-serif;
  /* Bewegung: kurz und ruhig */
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-fast:.12s; --t:.2s; --t-slow:.32s;
}

/* ---------- Bildschirm-Grenzen (fest, überall gleich verwenden) ----------
   Handy:          bis 559 px    -> @media (max-width:559px)
   Tablet hoch:    560 – 859 px  -> @media (max-width:859px)
   Tablet quer:    860 – 1079 px -> @media (max-width:1079px)
   Desktop:        ab 1080 px
   Inhalte nebeneinander (z. B. Text + Formular) erst ab 960 px -> darunter @media (max-width:959px)
   Testen bei: 320 · 375 · 768 · 1024 · 1440 px
   ------------------------------------------------------------------------- */

/* ---------- 2. Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth}
body{font-family:var(--font); background:var(--white); color:var(--ink); font-size:1.0625rem; line-height:1.5; -webkit-font-smoothing:antialiased}
img,svg{display:block; max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--red); outline-offset:3px; border-radius:2px}
/* Icons aus ui/icons.svg: <svg class="i"><use href="ui/icons.svg#rv-haken"/></svg> */
.i{width:20px; height:20px; flex:none}
.i-sm{width:16px; height:16px} .i-lg{width:28px; height:28px} .i-xl{width:40px; height:40px}
.i-duo{--icon-accent:var(--red)}
.btn .i,.text-link .i,.toast .i{--icon-accent:currentColor}

/* ---------- 3. Schrift ---------- */
h1,h2{font-family:var(--display); text-transform:uppercase; font-weight:700; line-height:1; letter-spacing:.005em; text-wrap:balance}
h1{font-size:clamp(2.75rem,6.4vw,4.75rem); font-weight:800; line-height:.95}
h2{font-size:clamp(2rem,4vw,3.25rem)}
h3{font-size:1.3rem; font-weight:700; line-height:1.2}
p{text-wrap:pretty}
.lead{font-size:clamp(1.1rem,1.4vw,1.25rem); color:var(--grey); max-width:56ch}
.kicker{display:block; font-size:.875rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--red); margin-bottom:10px}

/* ---------- 4. Buttons ---------- */
.btn{--h:48px; position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:var(--h); padding:0 22px; border-radius:var(--r-btn); font:600 1rem/1.2 var(--font); text-decoration:none; border:0; cursor:pointer; transition:background-color var(--t) ease, color var(--t) ease, transform var(--t-fast) ease, box-shadow var(--t) ease}
.btn .i{width:18px; height:18px; transition:transform var(--t) var(--ease)}
.btn:hover .i{transform:translateX(3px)}
.btn:active{transform:scale(.98)}
.btn-red{background:var(--red); color:#fff}
.btn-red:hover{background:var(--red-dark)}
.btn-white{background:#fff; color:var(--red)}
.btn-white:hover{background:var(--light)}
.btn-black{background:var(--ink); color:#fff}
.btn-black:hover{background:var(--anthracite)}
.btn-outline{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-outline:hover{background:var(--ink); color:#fff}
.btn-sm{--h:44px; padding:0 16px; font-size:.95rem}
.btn-lg{--h:56px; padding:0 28px; font-size:1.05rem}
.btn-block{width:100%}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45; cursor:not-allowed; transform:none}
.btn.is-loading{color:transparent !important; pointer-events:none}
.btn.is-loading .i{opacity:0}
.btn.is-loading::after{content:""; position:absolute; width:18px; height:18px; border-radius:50%; border:2px solid rgba(255,255,255,.45); border-top-color:#fff; animation:rv-spin .7s linear infinite}
.btn-white.is-loading::after,.btn-outline.is-loading::after{border-color:rgba(237,0,55,.3); border-top-color:var(--red)}
.icon-btn{width:44px; height:44px; border-radius:var(--r-btn); border:0; background:transparent; color:inherit; display:inline-grid; place-items:center; cursor:pointer; transition:background-color var(--t)}
.icon-btn:hover{background:var(--light)}

/* ---------- 5. Links ---------- */
/* padding + negativer margin: 44 px Antippfläche, ohne das Layout zu verschieben */
.text-link{display:inline-flex; align-items:center; gap:6px; padding-block:10px; margin-block:-10px; font-weight:600; text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:5px; text-decoration-color:currentColor}
.text-link .i{width:16px; height:16px; transition:transform var(--t) var(--ease)}
.text-link:hover .i{transform:translateX(3px)}

/* ---------- 6. Formular-Felder ---------- */
.field{display:grid; gap:6px; margin-bottom:14px}
.field label{font-size:.875rem; font-weight:600}
.field .hint{font-size:.85rem; color:var(--grey)}
.field input,.field select,.field textarea{width:100%; height:48px; padding:0 14px; border:1px solid var(--field-line); border-radius:var(--r-btn); font:inherit; font-size:1rem; color:var(--ink); background:#fff; transition:border-color var(--t), box-shadow var(--t); -webkit-appearance:none; appearance:none}
.field textarea{height:auto; min-height:110px; padding:12px 14px; resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--placeholder)}
.field select{padding-right:40px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 8 4 4 4-4' fill='none' stroke='%23050505' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:18px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--ink); box-shadow:var(--focus)}
.field input:disabled,.field select:disabled,.field textarea:disabled{background:var(--light); color:var(--placeholder); cursor:not-allowed}
.field .error{display:none; color:var(--err); font-size:.85rem; font-weight:600}
.field.invalid .error{display:block; animation:rv-fade-down var(--t) var(--ease)}
.field.invalid input,.field.invalid select,.field.invalid textarea,.field.invalid .dd-trigger{border-color:var(--err); box-shadow:var(--focus-err); animation:rv-shake var(--t-slow) ease}
.field.valid input{border-color:var(--ok); padding-right:40px; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5 8.2 14 15.5 6.5' fill='none' stroke='%2315803D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center/18px}

/* ---------- 7. Dropdown (ersetzt die Standard-Auswahl, Tastatur geht) ---------- */
.dd{position:relative}
.dd-native{position:absolute !important; inset:0; width:100%; height:100%; opacity:0; pointer-events:none}
.dd-trigger{position:relative; width:100%; height:48px; padding:0 44px 0 14px; display:flex; align-items:center; border:1px solid var(--field-line); border-radius:var(--r-btn); background:#fff; font:inherit; font-size:1rem; color:var(--ink); text-align:left; cursor:pointer; transition:border-color var(--t), box-shadow var(--t)}
.dd-trigger:hover{border-color:#9A9A9A}
.dd-trigger:focus-visible,.dd[data-open] .dd-trigger{outline:none; border-color:var(--ink); box-shadow:var(--focus)}
.dd-value{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dd-value.is-placeholder{color:var(--placeholder)}
.dd-chevron{position:absolute; right:14px; top:50%; width:18px; height:18px; margin-top:-9px; fill:none; stroke:var(--ink); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform var(--t) var(--ease)}
.dd[data-open] .dd-chevron{transform:rotate(180deg)}
.dd-list{position:absolute; z-index:30; left:0; right:0; top:calc(100% + 6px); margin:0; padding:6px; list-style:none; background:#fff; border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-lg); max-height:280px; overflow:auto; outline:none; opacity:0; transform:translateY(-4px); visibility:hidden; transition:opacity var(--t-fast) ease, transform var(--t) var(--ease), visibility 0s linear var(--t)}
.dd[data-up] .dd-list{top:auto; bottom:calc(100% + 6px); transform:translateY(4px)}
.dd[data-open] .dd-list{opacity:1; transform:none; visibility:visible; transition:opacity var(--t-fast) ease, transform var(--t) var(--ease), visibility 0s}
.dd-option{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; padding:10px 12px; border-radius:var(--r-btn); cursor:pointer; color:var(--ink)}
.dd-option.is-active{background:var(--light)}
.dd-option[aria-selected="true"]{font-weight:600; color:var(--red)}
.dd-check{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; opacity:0; transform:scale(.6); transition:opacity var(--t-fast), transform var(--t) var(--ease)}
.dd-option[aria-selected="true"] .dd-check{opacity:1; transform:scale(1)}

/* ---------- 8. Häkchen (Checkbox) ---------- */
.check{position:relative; display:flex; gap:12px; align-items:flex-start; cursor:pointer; font-size:.95rem; line-height:1.45}
.check input{position:absolute; opacity:0; width:1px; height:1px}
.check .box{width:22px; height:22px; margin-top:1px; border:1.5px solid #9A9A9A; border-radius:4px; display:grid; place-items:center; flex:none; background:#fff; transition:background-color var(--t), border-color var(--t)}
.check .box svg{width:14px; height:14px; fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:20; stroke-dashoffset:20; transition:stroke-dashoffset var(--t-slow) var(--ease)}
.check input:checked + .box{background:var(--red); border-color:var(--red)}
.check input:checked + .box svg{stroke-dashoffset:0}
.check input:focus-visible + .box{outline:3px solid var(--red); outline-offset:2px}

/* ---------- 9. Auswahl-Karten (z. B. für Fragen im Funnel) ---------- */
.choices{display:grid; gap:10px}
.choices.two{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.choices.two .choice{min-height:48px; padding:10px 14px; font-size:.95rem}
.field .group-label{font-size:.875rem; font-weight:600}
.field.invalid .choice{border-color:var(--err)}
.choice{position:relative; display:flex; align-items:center; gap:14px; min-height:56px; padding:14px 18px; border:1.5px solid var(--line); border-radius:var(--r-card); background:#fff; cursor:pointer; font-weight:600; transition:border-color var(--t), box-shadow var(--t), transform var(--t-fast)}
.choice:hover{border-color:#9A9A9A}
.choice:active{transform:scale(.99)}
.choice input{position:absolute; opacity:0; width:1px; height:1px}
.choice .dot{margin-left:auto; width:22px; height:22px; border-radius:50%; border:1.5px solid #9A9A9A; display:grid; place-items:center; flex:none; transition:background-color var(--t), border-color var(--t)}
.choice .dot::after{content:""; width:9px; height:9px; border-radius:50%; background:#fff; transform:scale(0); transition:transform var(--t) var(--ease)}
.choice:has(input:checked){border-color:var(--red); box-shadow:var(--focus-err)}
.choice:has(input:checked) .dot{background:var(--red); border-color:var(--red)}
.choice:has(input:checked) .dot::after{transform:scale(1)}
.choice:has(input:focus-visible){outline:3px solid var(--red); outline-offset:2px}

/* ---------- 10. Schalter ---------- */
.switch{position:relative; display:inline-flex; align-items:center; gap:12px; cursor:pointer; font-weight:500}
.switch input{position:absolute; opacity:0; width:1px; height:1px}
.switch .track{position:relative; width:44px; height:26px; border-radius:999px; background:var(--field-line); flex:none; transition:background-color var(--t)}
.switch .track::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform var(--t) var(--ease)}
.switch input:checked + .track{background:var(--red)}
.switch input:checked + .track::after{transform:translateX(18px)}
.switch input:focus-visible + .track{outline:3px solid var(--red); outline-offset:2px}

/* ---------- 11. Aufklapp-Liste (Akkordeon) ---------- */
.accordion{interpolate-size:allow-keywords}
.accordion details{border-top:1px solid var(--line)}
.accordion details:last-child{border-bottom:1px solid var(--line)}
.accordion summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:20px 0; font-weight:700; font-size:1.08rem}
.accordion summary::-webkit-details-marker{display:none}
.accordion details::details-content{block-size:0; overflow:hidden; transition:block-size var(--t-slow) var(--ease), content-visibility var(--t-slow) allow-discrete}
.accordion details[open]::details-content{block-size:auto}
.plus{width:28px; height:28px; border-radius:var(--r-btn); background:var(--light); position:relative; flex:none; transition:background-color var(--t)}
.plus::before,.plus::after{content:""; position:absolute; left:50%; top:50%; width:11px; height:2px; background:var(--ink); transform:translate(-50%,-50%); transition:transform var(--t) var(--ease), background-color var(--t)}
.plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.accordion details[open] .plus{background:var(--red)}
.accordion details[open] .plus::after{transform:translate(-50%,-50%) rotate(0deg)}
.accordion details[open] .plus::before,.accordion details[open] .plus::after{background:#fff}
.accordion .answer{padding:0 0 22px; color:var(--grey); max-width:62ch}

/* ---------- 12. Reiter (Tabs) ---------- */
.tablist{display:flex; gap:4px; border-bottom:1px solid var(--line); overflow-x:auto}
.tab{position:relative; min-height:44px; appearance:none; background:none; border:0; padding:12px 16px; font:600 1rem var(--font); color:var(--grey); cursor:pointer; white-space:nowrap; transition:color var(--t)}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--ink)}
.tab::after{content:""; position:absolute; left:12px; right:12px; bottom:-1px; height:3px; background:var(--red); transform:scaleX(0); transition:transform var(--t) var(--ease)}
.tab[aria-selected="true"]::after{transform:scaleX(1)}
.tab-panel{padding-top:20px; animation:rv-fade-down var(--t) var(--ease)}

/* ---------- 13. Marken (Badges) ---------- */
.badge{display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px; border-radius:var(--r-btn); font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; background:var(--light); color:var(--ink)}
.badge-red{background:var(--red); color:#fff}
.badge-dark{background:var(--ink); color:#fff}
.badge-ok{background:#DCFCE7; color:#166534}
.badge-outline{background:transparent; box-shadow:inset 0 0 0 1px var(--line)}
.badge .dot-live{width:7px; height:7px; border-radius:50%; background:currentColor}

/* ---------- 14. Kurz-Hinweis (Tooltip) ---------- */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip); position:absolute; z-index:40; bottom:calc(100% + 8px); left:50%; transform:translate(-50%,4px); background:var(--ink); color:#fff; font:500 .8rem/1.3 var(--font); padding:6px 10px; border-radius:var(--r-btn); white-space:nowrap; opacity:0; pointer-events:none; transition:opacity var(--t-fast), transform var(--t) var(--ease)}
[data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1; transform:translate(-50%,0)}

/* ---------- 15. Hinweis-Kästen ---------- */
.alert{display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:var(--r-card); border-left:4px solid var(--ink); background:#fff; box-shadow:var(--shadow); font-size:.97rem}
.alert .i{margin-top:1px}
.alert strong{display:block}
.alert-ok{border-color:var(--ok); background:var(--ok-bg)} .alert-ok .i{color:var(--ok)}
.alert-warn{border-color:#F59E0B; background:var(--warn-bg)} .alert-warn .i{color:var(--warn)}
.alert-error{border-color:var(--red); background:var(--err-bg)} .alert-error .i{color:var(--red)}

/* ---------- 16. Meldung unten (Toast) ---------- */
.toasts{position:fixed; z-index:90; left:50%; bottom:24px; transform:translateX(-50%); display:grid; gap:8px; width:min(92vw,420px); pointer-events:none}
.toast{display:flex; align-items:center; gap:12px; background:var(--ink); color:#fff; padding:14px 16px; border-radius:var(--r-card); box-shadow:0 12px 32px rgba(0,0,0,.3); font-weight:500; pointer-events:auto; animation:rv-toast-in var(--t-slow) var(--ease) both}
.toast.out{animation:rv-toast-out var(--t) ease forwards}
.toast-ok .i{color:#4ADE80} .toast-error .i{color:#FF6B88}

/* ---------- 17. Dialog ---------- */
.dialog{margin:auto; border:0; padding:0; border-radius:var(--r-card); width:min(92vw,520px); max-height:calc(100dvh - 32px); overflow:auto; color:var(--ink); box-shadow:0 24px 64px rgba(0,0,0,.35)}
.dialog:focus{outline:none}
.dialog::backdrop{background:rgba(5,5,5,.55)}
.dialog[open]{animation:rv-dialog-in var(--t-slow) var(--ease)}
.dialog[open]::backdrop{animation:rv-fade var(--t-slow) ease}
.dialog-head{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:18px 22px; border-bottom:1px solid var(--line)}
.dialog-head h3{font-family:var(--display); text-transform:uppercase; font-size:1.5rem}
.dialog-body{padding:20px 22px; color:var(--grey)}
.dialog-foot{display:flex; justify-content:flex-end; gap:10px; padding:16px 22px; background:var(--light)}

/* ---------- 18. Fortschritt ---------- */
.progress-label{display:flex; justify-content:space-between; font-size:.85rem; color:var(--grey); margin-bottom:8px; font-weight:500}
.progress{height:6px; background:var(--light); border-radius:3px; overflow:hidden}
.progress > span{display:block; height:100%; background:var(--red); border-radius:3px; transition:width var(--t-slow) var(--ease)}

/* ---------- 19. Karten ---------- */
.card{background:#fff; border-radius:var(--r-card); box-shadow:var(--shadow); padding:24px}
.card-link{display:block; text-decoration:none; transition:box-shadow var(--t), transform var(--t) var(--ease)}
.card-link:hover{box-shadow:0 8px 24px rgba(0,0,0,.14); transform:translateY(-2px)}

/* ---------- 20. Bewegung ---------- */
.js .reveal{opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.js .reveal.in{opacity:1; transform:none}
.pop-in{animation:rv-pop .42s var(--ease) both}
@keyframes rv-spin{to{transform:rotate(360deg)}}
@keyframes rv-fade{from{opacity:0}}
@keyframes rv-fade-down{from{opacity:0; transform:translateY(-4px)}}
@keyframes rv-pop{0%{opacity:0; transform:scale(.6)} 60%{opacity:1; transform:scale(1.08)} 100%{transform:scale(1)}}
@keyframes rv-shake{20%{transform:translateX(-4px)} 40%{transform:translateX(4px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(2px)}}
@keyframes rv-toast-in{from{opacity:0; transform:translateY(12px) scale(.98)}}
@keyframes rv-toast-out{to{opacity:0; transform:translateY(8px)}}
@keyframes rv-dialog-in{from{opacity:0; transform:translateY(12px) scale(.98)}}

/* Wer "weniger Bewegung" eingestellt hat, bekommt keine Animation */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .js .reveal{opacity:1; transform:none}
}