/* FRISCHHAUS — Bauteile: Preisrechner, Formularfelder, Reiter,
   Vorher-Nachher-Schieber, Bewertungs-Karussell, FAQ. */

/* ============================================================== Preisrechner */
.rechner{background:var(--flieder-tief);color:#fff;padding:var(--luft) 0;margin-top:var(--luft)}
.rechner__kopf{max-width:56ch;margin-bottom:clamp(24px,3vw,38px)}
.rechner__kopf p{margin-top:14px;color:rgba(255,255,255,.92)}

.quiz{
  background:rgba(0,0,0,.10);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--rund-l);padding:clamp(22px,3vw,40px);
}
.quiz__leiste{list-style:none;display:flex;gap:7px;margin:0 0 26px;padding:0}
.quiz__leiste li{height:5px;flex:1;border-radius:999px;background:rgba(255,255,255,.24);transition:background var(--ruhig)}
.quiz__leiste li.ist-da{background:var(--mango)}

.quiz__schritt{display:none;border:0;margin:0;padding:0;min-inline-size:0}
.quiz__schritt.ist-aktiv{display:block;animation:auftauchen .38s cubic-bezier(.22,.61,.36,1)}
@keyframes auftauchen{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.quiz__frage{
  font-family:'Jost',sans-serif;font-weight:600;font-size:clamp(19px,1.8vw,26px);
  padding:0;margin-bottom:20px;color:#fff;
}
.quiz__hinweis{margin-top:16px;font-size:.88em;color:rgba(255,255,255,.86);max-width:56ch}
.quiz__fuss{display:flex;gap:12px;justify-content:flex-end;margin-top:28px}
.quiz__meldung{margin:14px 0 0;min-height:1.4em;font-size:.92em;color:var(--mango-hell);text-align:right}

/* ------------------------------------------------------------------- Wahl */
.wahl{display:grid;gap:12px}
.wahl--zwei{grid-template-columns:1fr 1fr}
.wahl__feld{
  position:relative;display:flex;align-items:center;gap:13px;
  background:rgba(255,255,255,.90);color:var(--tinte);
  border-radius:999px;padding:15px 22px;cursor:pointer;
  transition:background var(--schnell),transform var(--schnell),box-shadow var(--ruhig);
}
.wahl__feld input{position:absolute;opacity:0;width:0;height:0}
.wahl__feld span{display:flex;align-items:center;gap:8px;flex:1;font-size:.97em}
.wahl__feld span::before{
  content:"";width:20px;height:20px;flex:none;border-radius:50%;
  box-shadow:inset 0 0 0 2px var(--flieder);transition:box-shadow var(--schnell),background var(--schnell);
}
.wahl__feld input[type="checkbox"] + span::before{border-radius:6px}
.wahl__feld input:checked + span::before{
  background:var(--flieder-dunkel);box-shadow:inset 0 0 0 2px var(--flieder-dunkel),inset 0 0 0 5px #fff;
}
.wahl__feld input[type="checkbox"]:checked + span::before{box-shadow:inset 0 0 0 2px var(--flieder-dunkel),inset 0 0 0 4px #fff}
.wahl__feld:has(input:checked){background:#fff;box-shadow:0 10px 26px rgba(20,20,70,.20)}
.wahl__feld input:focus-visible + span::before{outline:3px solid var(--mango);outline-offset:3px}
.wahl__feld b{font-weight:700;color:var(--flieder-dunkel)}

/* ----------------------------------------------------------------- Regler */
.regler{background:rgba(255,255,255,.92);border-radius:var(--rund-m);padding:24px 26px 18px;color:var(--tinte)}
.regler[hidden]{display:none}
.regler__wert{
  display:block;font-family:'Jost',sans-serif;font-weight:600;
  font-size:clamp(28px,3vw,40px);color:var(--flieder-dunkel);margin-bottom:12px;
}
.regler__enden{display:flex;justify-content:space-between;font-size:.84em;color:var(--tinte-zart);margin-top:8px}
.regler input[type="range"]{
  -webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:999px;
  background:linear-gradient(90deg,var(--flieder) var(--anteil,30%),var(--lavendel) var(--anteil,30%));
  cursor:pointer;
}
.regler input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--flieder-dunkel);
  border:4px solid #fff;box-shadow:0 4px 12px rgba(20,20,70,.3);cursor:grab;
}
.regler input[type="range"]::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;background:var(--flieder-dunkel);
  border:4px solid #fff;box-shadow:0 4px 12px rgba(20,20,70,.3);cursor:grab;
}

/* ---------------------------------------------------------------- Ergebnis */
.ergebnis{
  background:var(--mango);color:var(--tinte);border-radius:var(--rund-m);
  padding:clamp(22px,2.6vw,32px);text-align:center;margin-bottom:22px;
}
.ergebnis__preis{
  font-family:'Jost',sans-serif;font-weight:600;font-size:clamp(40px,6vw,72px);
  line-height:1;margin:0 0 10px;color:var(--flieder-dunkel);
}
.ergebnis__waehrung{font-size:.5em}
.ergebnis__zeile{margin:0;font-size:.98em}
.ergebnis__zeile--klein{margin-top:6px;font-size:.86em;color:var(--tinte-weich)}
.ergebnis__form{display:grid;gap:14px;max-width:520px}
.ergebnis__form .knopf{justify-self:start}

/* ------------------------------------------------------------------ Felder */
.feld{display:grid;gap:7px}
.feld > span{font-size:.86em;color:rgba(255,255,255,.92)}
.feld input,.feld textarea{
  width:100%;background:rgba(255,255,255,.94);color:var(--tinte);
  border:1.5px solid transparent;border-radius:14px;padding:13px 16px;
  transition:border-color var(--schnell),background var(--schnell);
}
.feld textarea{resize:vertical;min-height:96px;border-radius:18px}
.feld input:focus,.feld textarea:focus{outline:0;background:#fff;border-color:var(--mango)}
.feld input[aria-invalid="true"],.feld textarea[aria-invalid="true"]{border-color:#D64545;background:#FFF4F4}

.zustimmung{display:flex;align-items:flex-start;gap:11px;font-size:.85em;color:rgba(255,255,255,.92);cursor:pointer}
.zustimmung input{
  appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;margin-top:2px;
  border-radius:6px;background:rgba(255,255,255,.92);cursor:pointer;
  transition:background var(--schnell);
}
.zustimmung input:checked{background:var(--mango) var(--haken-bild) center/13px no-repeat}
:root{--haken-bild:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.3 12 13 4.5' fill='none' stroke='%234F4FBC' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.zustimmung input[aria-invalid="true"]{box-shadow:0 0 0 2px #D64545}
.zustimmung a{color:#fff;text-decoration-thickness:1.5px;text-underline-offset:3px}

/* ------------------------------------------------------------------ Reiter */
.reiter{display:flex;gap:9px;flex-wrap:wrap;flex:none}
.reiter button{
  border:0;border-radius:999px;padding:11px 22px;cursor:pointer;
  font-family:'Jost',sans-serif;font-weight:500;font-size:.96em;
  background:rgba(0,0,0,.20);color:#fff;
  transition:background var(--schnell),color var(--schnell),transform var(--schnell);
}
.reiter button.ist-aktiv{background:#fff;color:var(--flieder-dunkel)}

/* --------------------------------------------------- Vorher-Nachher-Schieber */
.schieber{position:relative;border-radius:var(--rund-m);overflow:hidden;aspect-ratio:4/3;background:var(--lavendel)}
.schieber img{width:100%;height:100%;object-fit:cover;display:block}
.schieber__nachher{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--stand,50%)) 0 0)}
.schieber__nachher img{width:100%;height:100%;object-fit:cover}
.schieber::after{
  content:"";position:absolute;top:0;bottom:0;left:var(--stand,50%);
  width:3px;margin-left:-1.5px;background:#fff;z-index:2;pointer-events:none;
}
.schieber__marke{
  position:absolute;top:14px;z-index:3;background:rgba(47,47,66,.72);color:#fff;
  border-radius:999px;padding:6px 14px;font-size:.8em;letter-spacing:.04em;text-transform:uppercase;
  pointer-events:none;
}
.schieber__marke--links{left:14px}
.schieber__marke--rechts{right:14px}
.schieber__griff{
  position:absolute;top:50%;left:var(--stand,50%);z-index:3;
  width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;
  background:#fff var(--griff-bild) center/22px no-repeat;
  box-shadow:0 6px 20px rgba(20,20,70,.34);pointer-events:none;
  transition:transform var(--schnell);
}
:root{--griff-bild:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 7 5 12l4.5 5M14.5 7l4.5 5-4.5 5' fill='none' stroke='%234F4FBC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.schieber input[type="range"]{
  position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;
  -webkit-appearance:none;appearance:none;background:transparent;cursor:ew-resize;
}
.schieber input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:56px;height:100%;background:transparent;cursor:ew-resize}
.schieber input[type="range"]::-moz-range-thumb{width:56px;height:340px;background:transparent;border:0;cursor:ew-resize}
.schieber input[type="range"]:focus-visible{outline:3px solid var(--mango);outline-offset:-3px}

/* -------------------------------------------------------------- Karussell */
.karussell{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,1fr);gap:16px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:6px;scrollbar-width:none;
}
.karussell::-webkit-scrollbar{display:none}
.stimme{
  scroll-snap-align:start;background:#fff;color:var(--tinte);
  border-radius:var(--rund-m);padding:clamp(20px,2.2vw,28px);
}
.stimme header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.stimme__kopf{
  width:42px;height:42px;flex:none;border-radius:50%;background:var(--lavendel);
  color:var(--flieder-dunkel);font-family:'Jost',sans-serif;font-weight:600;font-size:19px;
  display:grid;place-items:center;
}
.stimme header b{font-family:'Jost',sans-serif;font-weight:600;display:block;line-height:1.2}
.stimme header small{color:var(--tinte-zart);font-size:.82em}
.stimme p{font-size:.94em;color:var(--tinte-weich)}
.stimme .sterne{color:var(--gold);letter-spacing:.14em;margin-bottom:8px}

.karussell__steuer{display:flex;gap:10px;flex:none}
.karussell__steuer button{
  width:48px;height:48px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(0,0,0,.20);color:#fff;display:grid;place-items:center;
  transition:background var(--schnell),transform var(--schnell);
}
.karussell__steuer button:disabled{opacity:.35;cursor:default}
.karussell__steuer .pfeil{width:20px;height:20px}

/* ===================================================================== FAQ */
.frage{border-bottom:1px solid var(--lavendel)}
.frage summary{
  list-style:none;cursor:pointer;position:relative;
  padding:20px 46px 20px 0;
  font-family:'Jost',sans-serif;font-weight:500;font-size:clamp(16px,1.15vw,18px);
  transition:color var(--schnell);
}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{
  content:"";position:absolute;right:0;top:50%;width:30px;height:30px;margin-top:-15px;
  border-radius:50%;background:var(--lavendel) var(--pfeil-unten) center/15px no-repeat;
  transition:transform var(--ruhig),background-color var(--schnell);
}
:root{--pfeil-unten:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9.5 6 6 6-6' fill='none' stroke='%234F4FBC' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.frage[open] summary::after{transform:rotate(180deg)}
.frage p{margin:0 0 20px;padding-right:46px;color:var(--tinte-weich);font-size:.95em}

@media (hover:hover) and (pointer:fine){
  .wahl__feld:hover{background:#fff;transform:translateY(-1px)}
  .reiter button:hover{background:rgba(0,0,0,.34)}
  .reiter button.ist-aktiv:hover{background:#fff;transform:translateY(-2px)}
  .karussell__steuer button:hover:not(:disabled){background:var(--mango);color:var(--tinte);transform:translateY(-2px)}
  .frage summary:hover{color:var(--flieder-dunkel)}
  .frage summary:hover::after{background-color:var(--mango)}
  .schieber:hover .schieber__griff{transform:scale(1.08)}
}
@media (max-width:640px){
  .wahl--zwei{grid-template-columns:1fr}
  .quiz__fuss{justify-content:stretch}
  .quiz__fuss .knopf{flex:1;justify-content:center}
  .karussell{grid-auto-columns:minmax(260px,86%)}
}