/* Anfrageformular (faf): nachgebaut aus Talqio. Header = Formular-Builder der Terminart (einstellungen.js, konto.css: .bs, .qo, .birne, .logik-box),
   S1 + S2 = Buchungsseite in Kessler-Petrol (buchen.css: .frage, .f textarea, .absage), S3 = Kalender mit Termin-Detail (.mo, .dt) */

/* ---------- HERO: Schritte-Liste mit Glühbirnen-Logik ---------- */
.faf-hero{height:calc(478 * var(--e))}
.faf-hero .d-head{margin-bottom:calc(12 * var(--e))}
.faf-bs-head{display:flex;align-items:center;justify-content:space-between;gap:calc(10 * var(--e));margin:0 0 calc(7 * var(--e))}
.faf-bs-head b{font-size:calc(8.5 * var(--e));font-weight:600;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;color:#F4F3F0}
.faf-bs-head small{margin-left:calc(4 * var(--e));font-size:calc(8.5 * var(--e));font-weight:500;letter-spacing:0;text-transform:none;color:#A9A7A1}
.faf-mini{display:inline-flex;align-items:center;gap:calc(6 * var(--e));font-size:calc(9.5 * var(--e));color:#A9A7A1;white-space:nowrap}
.faf-sw{position:relative;display:block;width:calc(26 * var(--e));height:calc(15 * var(--e));border-radius:999px;background:#F4F3F0;flex:none}
.faf-sw::after{content:"";position:absolute;top:calc(2.5 * var(--e));left:calc(13.5 * var(--e));width:calc(10 * var(--e));height:calc(10 * var(--e));border-radius:50%;background:#0B0B0C}
.faf-bs{display:grid;gap:calc(5 * var(--e))}
.faf-it{border-radius:calc(8 * var(--e));background:#1C1C1F;box-shadow:inset 0 0 0 1px rgba(244,243,240,.09)}
.faf-it.offen{box-shadow:inset 0 0 0 1px rgba(244,243,240,.16)}
.faf-kopf{display:flex;align-items:center;gap:calc(7 * var(--e));min-height:calc(36 * var(--e));padding:calc(5 * var(--e)) calc(10 * var(--e)) calc(5 * var(--e)) calc(4 * var(--e))}
.faf-griff{display:grid;place-items:center;width:calc(14 * var(--e));height:calc(20 * var(--e));flex:none;color:#6F6D68}
.faf-griff svg{width:calc(11 * var(--e));height:calc(11 * var(--e));fill:currentColor}
.faf-nr{display:grid;place-items:center;width:calc(17 * var(--e));height:calc(17 * var(--e));border-radius:50%;flex:none;font-size:calc(9 * var(--e));font-weight:600;color:#A9A7A1}
.faf-tx{flex:1;min-width:0}
.faf-tx b{display:block;font-size:calc(10.5 * var(--e));font-weight:500;line-height:1.3;color:#F4F3F0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.faf-tx small{display:block;margin-top:calc(1 * var(--e));font-size:calc(9 * var(--e));line-height:1.3;color:#6F6D68;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.faf-meta{flex:none;font-size:calc(9 * var(--e));color:#6F6D68}
.faf-tags{display:flex;align-items:center;gap:calc(6 * var(--e));flex:none}
.faf-tag{padding:calc(3 * var(--e)) calc(6 * var(--e));border-radius:999px;font-size:calc(8.5 * var(--e));font-weight:600;line-height:1;color:#A9A7A1;box-shadow:inset 0 0 0 1px rgba(244,243,240,.16)}
.faf-bmini{display:grid;place-items:center;max-width:0;margin-left:calc(-6 * var(--e));opacity:0;overflow:hidden;color:#3DD68C;transition:max-width .45s var(--ease),margin .45s var(--ease),opacity .3s ease}
.faf-bmini.da{max-width:calc(14 * var(--e));margin-left:0;opacity:1}
.faf-bmini svg,.faf-chev svg,.faf-birne svg,.faf-x svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.faf-bmini svg{width:calc(12 * var(--e));height:calc(12 * var(--e))}
.faf-chev{display:grid;place-items:center;color:#6F6D68}
.faf-chev svg{width:calc(12 * var(--e));height:calc(12 * var(--e))}
.faf-chev.auf{transform:rotate(180deg)}
.faf-edit{display:grid;gap:calc(4 * var(--e));padding:calc(1 * var(--e)) calc(10 * var(--e)) calc(10 * var(--e)) calc(30 * var(--e))}
.faf-qo{display:grid;grid-template-columns:calc(12 * var(--e)) minmax(0,1fr) calc(22 * var(--e)) calc(22 * var(--e));align-items:center;gap:calc(6 * var(--e))}
.faf-mk{justify-self:center;width:calc(10 * var(--e));height:calc(10 * var(--e));border-radius:50%;box-shadow:inset 0 0 0 1.2px rgba(244,243,240,.16)}
.faf-in{display:flex;align-items:center;height:calc(26 * var(--e));padding:0 calc(9 * var(--e));border-radius:calc(7 * var(--e));background:#0B0B0C;border:1px solid rgba(244,243,240,.09);font-size:calc(10.5 * var(--e));color:#F4F3F0;white-space:nowrap;overflow:hidden;transition:border-color .35s ease}
.faf-qo.logik .faf-in{border-color:rgba(61,214,140,.4)}
.faf-birne,.faf-x{display:grid;place-items:center;width:calc(22 * var(--e));height:calc(22 * var(--e));border-radius:calc(7 * var(--e));transition:background .25s,color .25s,box-shadow .25s}
.faf-birne{color:#6F6D68}
.faf-birne svg{width:calc(13 * var(--e));height:calc(13 * var(--e))}
.faf-x{color:#A9A7A1}
.faf-x svg{width:calc(11 * var(--e));height:calc(11 * var(--e))}
.faf-birne.hov{background:#242428;color:#F4F3F0}
.faf-birne.an{color:#3DD68C;background:rgba(61,214,140,.13)}
.faf-birne.an svg{filter:drop-shadow(0 0 calc(3 * var(--e)) rgba(61,214,140,.55))}
.faf-birne.auf{box-shadow:inset 0 0 0 1px rgba(61,214,140,.6)}
.faf-logik{display:grid;justify-items:start;gap:calc(7 * var(--e));margin:calc(3 * var(--e)) calc(28 * var(--e)) calc(2 * var(--e)) calc(18 * var(--e));padding:calc(9 * var(--e)) calc(10 * var(--e)) calc(9 * var(--e));border-radius:calc(8 * var(--e));background:rgba(61,214,140,.05);box-shadow:inset 0 0 0 1px rgba(61,214,140,.32)}
.faf-logik p{font-size:calc(9.5 * var(--e));line-height:1.35;color:#D6D4CE}
.faf-sel{position:relative;display:flex;align-items:center;width:calc(148 * var(--e));height:calc(26 * var(--e));padding:0 calc(22 * var(--e)) 0 calc(9 * var(--e));border-radius:calc(7 * var(--e));background:#0B0B0C;border:1px solid rgba(244,243,240,.09);font-size:calc(10.5 * var(--e));color:#F4F3F0;white-space:nowrap;transition:border-color .2s}
.faf-sel::after{content:"";position:absolute;right:calc(9 * var(--e));top:50%;margin-top:calc(-1.5 * var(--e));border:solid transparent;border-width:calc(3.5 * var(--e)) calc(3.5 * var(--e)) 0;border-top-color:#A9A7A1}
.faf-sel.fokus{border-color:rgba(244,243,240,.24)}
.faf-lfoot{display:flex;gap:calc(12 * var(--e));font-size:calc(9 * var(--e));font-weight:500;color:#A9A7A1}
.faf-lfoot u{text-decoration:none}
.faf-lfoot u:first-child{color:#3DD68C}
.faf-lz{display:block;width:fit-content;margin:calc(1 * var(--e)) 0 0 calc(16 * var(--e));padding:calc(2 * var(--e)) calc(6 * var(--e));border-radius:calc(6 * var(--e));font-size:calc(9.5 * var(--e));font-weight:500;line-height:1.4;color:#3DD68C}
.faf-ende{background:transparent;box-shadow:inset 0 0 0 1px rgba(244,243,240,.13)}
.faf-ende .faf-nr{background:rgba(255,72,0,.14);color:#FF4800}
@supports (border-style:dashed){.faf-ende{box-shadow:none;border:1px dashed rgba(244,243,240,.16)}}
/* Auswahl-Menü des Felds „Was soll passieren?“ */
.faf-menu{position:absolute;left:0;top:0;z-index:3;display:grid;width:calc(148 * var(--e));padding:calc(4 * var(--e));border-radius:calc(8 * var(--e));background:#232327;box-shadow:0 0 0 1px rgba(244,243,240,.12),0 calc(10 * var(--e)) calc(24 * var(--e)) rgba(0,0,0,.55);opacity:0;transform:translateY(calc(-4 * var(--e)));pointer-events:none;transition:opacity .2s ease,transform .35s var(--ease)}
.faf-menu.zeig{opacity:1;transform:none}
.faf-menu span{position:relative;display:flex;align-items:center;height:calc(23 * var(--e));padding:0 calc(8 * var(--e)) 0 calc(21 * var(--e));border-radius:calc(5 * var(--e));font-size:calc(10 * var(--e));color:#D6D4CE;white-space:nowrap;transition:background .15s,color .15s}
.faf-menu .faf-m-an::before{content:"";position:absolute;left:calc(8 * var(--e));top:50%;width:calc(3.5 * var(--e));height:calc(6.5 * var(--e));margin-top:calc(-4.5 * var(--e));border:solid #A9A7A1;border-width:0 1.4px 1.4px 0;transform:rotate(45deg)}
.faf-menu span.hov{background:#33333A;color:#F4F3F0}
/* „Gespeichert“ unten rechts, wie in den Talqio-Einstellungen */
.faf-hero .faf-save{right:calc(14 * var(--e));bottom:calc(14 * var(--e));padding:calc(6 * var(--e)) calc(11 * var(--e));border-radius:999px;background:#141416;font-size:calc(9.5 * var(--e));color:#A9A7A1}

/* ---------- S1: freie Antwort auf der Buchungsseite ---------- */
.faf-s1 .bk-h.faf-h2{margin-bottom:calc(7 * var(--e));line-height:1.22}
.faf-lbl{margin-bottom:calc(6 * var(--e));font-size:calc(10 * var(--e));color:#8F8D87}
.faf-ta{min-height:calc(86 * var(--e));padding:calc(9 * var(--e)) calc(11 * var(--e));border-radius:calc(10 * var(--e));background:#F4F3F0;box-shadow:inset 0 0 0 1px rgba(11,11,12,.14);font-size:calc(12 * var(--e));line-height:1.5;color:#0B0B0C;transition:box-shadow .2s ease}
.faf-ta.fokus{box-shadow:inset 0 0 0 1.5px var(--k),0 0 0 calc(3 * var(--e)) color-mix(in srgb,var(--k) 22%,transparent)}
.faf-caret{display:inline-block;width:1.5px;height:1.2em;margin-left:1px;vertical-align:-.22em;background:var(--k);opacity:0}
.faf-ta.fokus .faf-caret{opacity:1}
.faf-weiter{transition:background .2s,transform .14s ease}
.faf-weiter.hov{background:color-mix(in srgb,var(--k) 86%,#000)}

/* ---------- S2: Absage statt Kalender ---------- */
.faf-s2 .faf-stapel{display:grid;height:100%}
.faf-stapel>*{grid-area:1/1;min-width:0}
.faf-frage{transition:opacity .3s ease,transform .45s var(--ease)}
.faf-frage.weg{opacity:0;transform:translateY(calc(-8 * var(--e)));pointer-events:none}
.faf-s2 .bk-weiter{margin-top:calc(12 * var(--e))}
.faf-absage{align-self:center;padding-bottom:calc(10 * var(--e))}
.faf-absage .bk-h{margin-bottom:calc(10 * var(--e));font-size:calc(20 * var(--e))}
.faf-ab-t{max-width:calc(370 * var(--e));font-size:calc(13 * var(--e));line-height:1.6;color:#0B0B0C}
.faf-absage .bk-act{margin-top:calc(16 * var(--e))}
.faf-absage .bk-b{height:calc(30 * var(--e));padding:0 calc(16 * var(--e));font-size:calc(10.5 * var(--e))}

/* ---------- S3: Kalender, Termin mit allen Antworten ---------- */
.faf-s3{padding:calc(16 * var(--e)) calc(16 * var(--e)) calc(14 * var(--e))}
.faf-kk{display:flex;align-items:center;justify-content:space-between;margin-bottom:calc(10 * var(--e))}
.faf-kk b{font:600 calc(14 * var(--e))/1.15 var(--display);letter-spacing:-.01em;color:#F4F3F0}
.faf-kk .fn-pills span{height:calc(20 * var(--e));padding:0 calc(8 * var(--e));font-size:calc(9 * var(--e))}
.faf-mo{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-radius:calc(10 * var(--e));background:#141416;box-shadow:inset 0 0 0 1px rgba(244,243,240,.09);overflow:hidden}
.faf-wd{padding:calc(6 * var(--e)) 0;text-align:center;font-size:calc(8.5 * var(--e));font-weight:600;color:#A9A7A1;border-bottom:1px solid rgba(244,243,240,.09)}
.faf-z{display:flex;flex-direction:column;gap:calc(2.5 * var(--e));min-width:0;height:calc(76 * var(--e));padding:calc(5 * var(--e)) calc(4 * var(--e));border-left:1px solid rgba(244,243,240,.09);border-top:1px solid rgba(244,243,240,.09)}
.faf-z:nth-child(7n+1){border-left:0}
.faf-z:nth-child(-n+14){border-top:0}
.faf-z b{display:grid;place-items:center;width:calc(17 * var(--e));height:calc(17 * var(--e));margin-bottom:calc(1 * var(--e));border-radius:50%;font-size:calc(9 * var(--e));font-weight:600;color:#F4F3F0}
.faf-z b.faf-heute{background:#FF4800;color:#fff}
.faf-z:nth-child(-n+14) b{color:#6F6D68}
.faf-z i{display:block;padding:calc(2.5 * var(--e)) calc(4 * var(--e));border-radius:calc(4 * var(--e));font-style:normal;font-size:calc(8.5 * var(--e));font-weight:500;line-height:1.3;color:#FF6A2A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:rgba(255,72,0,.12);box-shadow:inset calc(2 * var(--e)) 0 0 #FF6A2A}
.faf-z i em{font-style:normal;color:#F4F3F0}
.faf-z:nth-child(-n+14) i{opacity:.45}
.faf-neu{transition:opacity .4s ease,transform .55s var(--ease),background .6s ease}
.faf-neu:not(.da){opacity:0;transform:translateY(calc(-4 * var(--e)))}
.faf-neu.hell{background:rgba(255,72,0,.3)}
.faf-dt{position:absolute;left:50%;top:calc(12 * var(--e));z-index:2;width:calc(300 * var(--e));margin-left:calc(-150 * var(--e));padding:calc(16 * var(--e)) calc(18 * var(--e)) calc(16 * var(--e));border-radius:calc(12 * var(--e));background:#141416;box-shadow:0 0 0 1px rgba(244,243,240,.16),0 calc(24 * var(--e)) calc(60 * var(--e)) calc(-12 * var(--e)) rgba(0,0,0,.8);
  opacity:0;transform:translateY(calc(10 * var(--e))) scale(.98);transition:opacity .3s ease,transform .5s var(--ease)}
.faf-dt.zeig{opacity:1;transform:none}
.faf-s3::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;background:rgba(5,5,6,.62);opacity:0;transition:opacity .35s ease;pointer-events:none}
.faf-s3.offen::before{opacity:1}
.faf-dt-tag{font-size:calc(9.5 * var(--e));font-weight:600;color:#FF6A2A}
.faf-dt-name{display:block;margin-top:calc(6 * var(--e));font:600 calc(17 * var(--e))/1.15 var(--display);letter-spacing:-.015em;color:#F4F3F0}
.faf-dt-wann{margin-top:calc(6 * var(--e));font-size:calc(10 * var(--e));line-height:1.55;color:#A9A7A1}
.faf-dt-rows{display:grid;gap:calc(7 * var(--e));margin-top:calc(10 * var(--e));padding-top:calc(10 * var(--e));border-top:1px solid rgba(244,243,240,.09)}
.faf-dt-rows span{display:block;font-size:calc(9.5 * var(--e));font-weight:600;line-height:1.35;color:#6F6D68}
.faf-dt-rows b{display:block;margin-top:calc(1 * var(--e));font-size:calc(11.5 * var(--e));font-weight:400;line-height:1.4;color:#F4F3F0}
.faf-dt-rows u{text-underline-offset:.18em;text-decoration-thickness:1px}
.faf-s3 .d-toast{z-index:3}

@container (max-width:460px){
  .faf-hero{height:calc(469 * var(--e))}
  .faf-hero .d-head{margin-bottom:calc(12 * var(--e))}
  .faf-edit{padding-left:calc(24 * var(--e))}
  .faf-logik{margin-right:calc(8 * var(--e));margin-left:calc(14 * var(--e))}
  .faf-lz{margin-left:calc(14 * var(--e))}
}
@media (prefers-reduced-motion:reduce){.faf-bmini,.faf-menu,.faf-frage,.faf-neu,.faf-dt,.faf-s3::before{transition:none!important}}