/* Geschenkkorb Guru: Anfrageseite als geführte Anfrage in drei Schritten (14.09.).
   Nur auf der Vorlage „GKG Angebotsanfrage", nach f3.css und kopf.css geladen.
   Fassung 4: eine breite weisse Karte, Formular mit Haarlinien, Gewähltes schwarz, unten eine
   schmale Leiste mit Vertrauen und Telefon. Die dunkle Spalte mit Übersicht ist wieder raus. Ohne JavaScript stehen alle Schritte untereinander. */

.anf{padding:146px 0 110px}
.anf-kopf{max-width:760px;margin:0 auto 40px;text-align:center}
.anf-kopf .eyebrow{justify-content:center}
.anf-kopf h1{font-size:clamp(38px,5vw,62px)}
.anf-lead{margin:18px auto 0;max-width:30em;color:var(--ink-2);font-size:17.5px}

.anf-karte{background:var(--white);border-radius:26px;box-shadow:0 30px 80px rgba(24,23,18,.08);overflow:hidden}
.anf-haupt{padding:44px 56px 40px;min-width:0}

/* Schmale Leiste unten in der Karte: Vertrauen und Telefon */
.anf-leiste{display:flex;align-items:center;justify-content:space-between;gap:12px 32px;flex-wrap:wrap;padding:18px 56px;border-top:1px solid var(--line-2);font-size:14px;color:var(--ink-2)}
.anf-vertrauen{display:flex;flex-wrap:wrap;gap:8px 26px;margin:0;padding:0;list-style:none}
.anf-vertrauen li{display:inline-flex;align-items:center;gap:9px}
.anf-vertrauen li::before{content:"";flex:none;width:11px;height:6px;margin-top:-3px;border-left:1.6px solid var(--gold-deep);border-bottom:1.6px solid var(--gold-deep);transform:rotate(-45deg)}
.anf-kontakt{color:var(--ink-3)}
.anf-kontakt a{color:var(--ink);font-weight:500;text-decoration:none;white-space:nowrap}
.anf-kontakt a:hover{text-decoration:underline}

/* Fortschritt */
.anf-fortschritt{display:none;gap:10px;list-style:none;margin:0 0 34px;padding:0}
.ist-gefuehrt .anf-fortschritt{display:flex}
.anf-fortschritt li{flex:1;display:flex;align-items:center;gap:9px;padding-top:12px;border-top:2px solid var(--line);font-size:13px;color:var(--faint);transition:color .25s,border-color .25s}
.anf-fortschritt span{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;border:1px solid currentColor}
.anf-fortschritt li.aktiv{color:var(--ink);border-color:var(--ink)}
.anf-fortschritt li.erledigt{color:var(--ink-2);border-color:var(--gold);cursor:pointer}
.anf-fortschritt li.erledigt span{background:var(--gold);border-color:var(--gold);color:#211E17}

/* Schritte */
.anf-schritt{border:0;margin:0;padding:0;min-width:0}
.anf-schritt[hidden]{display:none}
.anf-form:not(.ist-gefuehrt) .anf-schritt + .anf-schritt{margin-top:40px;padding-top:34px;border-top:1px solid var(--line)}
.anf-rein{animation:anf-rein .38s var(--out-quad) both}
@keyframes anf-rein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.anf-frage{display:block;width:100%;padding:0;margin:0 0 26px;font-family:var(--serif);font-size:clamp(26px,3vw,36px);line-height:1.15;letter-spacing:-.015em;outline:none}
.anf-nr{display:block;margin-bottom:10px;font-family:var(--sans);font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}

/* Gemeinsame Linie für Kacheln, Felder, Pillen */
.anf-form{--rand:rgba(24,23,18,.14);--rand-hover:rgba(24,23,18,.38)}

/* Anlass als Kacheln */
.anf-kacheln{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.anf-kachel{position:relative;cursor:pointer}
.anf-kachel input,.anf-pille input,.anf-schalter input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.anf-kachel-in{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:14px;height:100%;min-height:104px;padding:17px 16px 15px;border-radius:14px;background:var(--white);border:1px solid var(--rand);font-size:15px;font-weight:500;line-height:1.25;transition:border-color .18s,box-shadow .18s,background-color .18s}
.anf-kachel-in svg{width:26px;height:26px;fill:none;stroke:var(--gold-deep);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .18s}
.anf-kachel:hover .anf-kachel-in{border-color:var(--rand-hover)}
.anf-kachel input:checked + .anf-kachel-in{background:var(--black);border-color:var(--black);color:#F7F3EA;box-shadow:0 14px 30px rgba(24,23,18,.18)}
.anf-kachel input:checked + .anf-kachel-in svg{stroke:var(--gold)}
.anf-kachel input:focus-visible + .anf-kachel-in,.anf-pille input:focus-visible + span,.anf-schalter input:focus-visible ~ .anf-schalter-knopf{outline:2px solid var(--gold);outline-offset:3px}

/* Ganzjährig: grosse Kachel über den einzelnen Anlässen */
.anf-kachel-gross{display:block;margin-bottom:6px}
.anf-kachel-gross .anf-kachel-in{flex-direction:row;align-items:center;justify-content:flex-start;gap:16px;min-height:0;padding:16px 20px}
.anf-kachel-gross .anf-kachel-in > svg{width:28px;height:28px;flex:none}
.anf-kachel-text{display:flex;flex-direction:column;gap:2px;flex:1}
.anf-kachel-text b{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;font-weight:500;font-size:16px;line-height:1.3}
.anf-kachel-text > span{font-size:14px;font-weight:400;line-height:1.45;color:var(--ink-3)}
.anf-kachel input:checked + .anf-kachel-in .anf-kachel-text > span{color:var(--on-black-2)}
.anf-empfohlen{font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);background:rgba(196,155,83,.14);border-radius:var(--pill);padding:3px 9px}
.anf-kachel input:checked + .anf-kachel-in .anf-empfohlen{color:var(--gold-2);background:rgba(196,155,83,.2)}
.anf-oder{display:flex;align-items:center;gap:14px;margin:18px 0 12px;font-size:13px;color:var(--ink-3)}
.anf-oder::after{content:"";flex:1;height:1px;background:var(--line)}
.anf-frei{margin-top:14px}
.anf-frei[hidden]{display:none}
.anf-frei .anf-feld{margin-bottom:0}

/* Felder */
.anf-feld{display:flex;flex-direction:column;gap:7px;margin-bottom:22px;min-width:0}
.anf-feld label,.anf-label{font-size:13.5px;font-weight:500;color:var(--ink);margin:0}
.anf-label{margin-bottom:10px}
.anf-form .opt{font-weight:400;color:var(--faint);font-size:12.5px;margin-left:4px}
.anf-form input[type=text],.anf-form input[type=email],.anf-form input[type=tel],.anf-form input[type=number],.anf-form textarea{width:100%;font:400 16px/1.4 var(--sans);color:var(--ink);background:var(--white);border:1px solid var(--rand);border-radius:12px;padding:13px 15px;outline:none;transition:border-color .15s,box-shadow .15s;-moz-appearance:textfield}
.anf-form input:hover,.anf-form textarea:hover{border-color:var(--rand-hover)}
.anf-form input::placeholder{color:var(--faint)}
.anf-form input::-webkit-outer-spin-button,.anf-form input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.anf-form input:focus,.anf-form textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(196,155,83,.22)}
.anf-form textarea{resize:vertical;min-height:110px}
.anf-form .hinweis{font-size:12.5px;color:var(--faint)}
.anf-form .hat-fehler input,.anf-form .hat-fehler textarea{border-color:var(--wine)}
.anf-form .form-fehler[hidden]{display:none}

/* Anzahl als Spannen, genaue Zahl aufklappbar */
.anf-erklaerung{margin:-14px 0 24px;color:var(--ink-2);font-size:15.5px}
.anf-genau{margin:12px 0 0}
.anf-genau summary{padding-bottom:10px}
.anf-genau .anf-feld{max-width:220px;margin-bottom:0}
.anf-pille span{display:inline-flex;align-items:center;font:500 14px/1 var(--sans);color:var(--ink);background:var(--white);border:1px solid var(--rand);border-radius:var(--pill);padding:12px 17px;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.anf-pille:hover span{border-color:var(--rand-hover)}
.anf-pille input:checked + span{background:var(--black);border-color:var(--black);color:#fff}
.anf-spannen .anf-pille span{padding:13px 20px;font-size:15px}
.anf-gruppe.hat-fehler .anf-pille span{border-color:rgba(142,27,36,.45)}
.anf-gruppe > .form-fehler{display:block;margin-top:8px}

/* Budget als Pillen */
.anf-gruppe{margin-bottom:24px}
.anf-pillen{display:flex;flex-wrap:wrap;gap:8px}
.anf-pille{position:relative;cursor:pointer}

/* Testbox als Schalter */
.anf-schalter{position:relative;display:flex;align-items:flex-start;gap:14px;padding:16px 18px;margin-top:2px;background:var(--white);border:1px solid var(--rand);border-radius:14px;cursor:pointer;font-size:14px;color:var(--ink-2);line-height:1.45;transition:border-color .15s}
.anf-schalter:hover{border-color:var(--rand-hover)}
.anf-schalter:has(input:checked){border-color:var(--ink)}
.anf-schalter b{display:block;color:var(--ink);font-weight:500;font-size:15px;margin-bottom:2px}
.anf-schalter-knopf{flex:none;position:relative;width:42px;height:24px;margin-top:1px;border-radius:var(--pill);background:#E2DBCF;transition:background-color .2s}
.anf-schalter-knopf::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .22s var(--out-quad)}
.anf-schalter input:checked ~ .anf-schalter-knopf{background:var(--black)}
.anf-schalter input:checked ~ .anf-schalter-knopf::after{transform:translateX(18px);background:var(--gold)}

/* Kontakt */
.anf-raster{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.anf-mehr{margin:0 0 6px}
.anf-mehr summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none;font-size:14.5px;font-weight:500;color:var(--ink-2);padding:4px 0 14px}
.anf-mehr summary::-webkit-details-marker{display:none}
.anf-mehr summary::before{content:"+";font-size:20px;font-weight:300;line-height:1;color:var(--gold-deep);transition:transform .2s}
.anf-mehr[open] summary::before{transform:rotate(45deg)}
.anf-mehr summary:hover{color:var(--ink)}
.anf-check{display:flex;gap:10px;align-items:flex-start;margin-top:6px;font-size:14px;line-height:1.5;color:var(--ink-2);cursor:pointer}
.anf-check input{flex:none;width:17px;height:17px;margin-top:2px;accent-color:var(--black)}
.anf-check a{color:var(--ink)}
.anf-check.hat-fehler input{outline:1.5px solid var(--wine);outline-offset:2px;border-radius:3px}
.anf-check + .form-fehler{display:block;margin:6px 0 0 27px}

/* Navigation im Formular */
.anf-nav{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line-2)}
.btn-zurueck{margin-right:auto;padding:10px 2px;border:0;background:transparent;font:500 15px/1 var(--sans);color:var(--ink-3);cursor:pointer}
.btn-zurueck:hover{color:var(--ink)}
.anf-form:not(.ist-gefuehrt) [data-weiter],.anf-form:not(.ist-gefuehrt) [data-zurueck]{display:none}
.anf-form:not(.ist-gefuehrt) .anf-schritt:not(:last-of-type) .anf-nav{display:none}

/* Gewählte Box */
.anf-produkt{display:flex;align-items:center;gap:14px;margin:0 0 28px;padding:10px 18px 10px 10px;border:1px solid var(--rand);border-radius:14px}
.anf-produkt img{width:54px;height:54px;border-radius:10px;object-fit:cover}
.anf-produkt p{display:flex;flex-direction:column;gap:1px;font-size:15px}
.anf-produkt span{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep)}
.anf-form .form-fehler.allgemein{margin:0 0 22px}

/* Bestätigung */
.anf-ok{text-align:center;padding:60px 8px 40px}
.anf-ok-zeichen{display:inline-flex;align-items:center;justify-content:center;width:66px;height:66px;margin-bottom:20px;border-radius:50%;background:var(--black)}
.anf-ok-zeichen svg{width:30px;height:30px;fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.anf-ok h2{margin-bottom:12px}
.anf-ok p{max-width:30em;margin:0 auto;color:var(--ink-2)}

@media (max-width:1000px){
 .anf-haupt{padding:36px 36px 34px}
 .anf-leiste{padding:16px 36px}
 .anf-kacheln{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
 .anf-raster{grid-template-columns:1fr}
}
@media (max-width:640px){
 .anf{padding:104px 0 64px}
 .anf-kopf{margin-bottom:26px}
 .anf-lead{font-size:16px}
 .anf-karte{border-radius:20px}
 .anf-haupt{padding:22px 18px 22px}
 .anf-leiste{padding:16px 18px 18px;flex-direction:column;align-items:flex-start;gap:10px}
 .anf-vertrauen{flex-direction:column;gap:6px}
 .anf-kacheln{gap:8px}
 .anf-kacheln .anf-kachel-in{min-height:84px;gap:10px;padding:14px}
 .anf-kachel-gross .anf-kachel-in{align-items:flex-start;padding:15px 16px;gap:12px}
 .anf-fortschritt{margin-bottom:24px;gap:6px}
 .anf-fortschritt li{font-size:12px;gap:6px}
 .anf-frage{font-size:25px;margin-bottom:18px}
 .anf-nav{margin-top:24px;padding-top:18px}
 .anf-nav .btn{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){.anf-rein{animation:none}}