/* ==================================================================
   ANFRAGE-POPUP ("Booker") — 23.09.2026, überarbeitet
   Mechanik nachgebaut von adventure-marketing.com/termin (das ist ein
   iClosed-Widget, weiß-etikettiert) auf Melvins Wunsch: Formular oben,
   Kalender-Kulisse direkt darunter in DERSELBEN Karte sichtbar — nicht
   als separate Seite, sondern als Popup über der laufenden Seite.

   Der Kalender ist immer da und immer inert (nie klickbar). Das ist
   ehrlich, weil es noch keinen echten Kalenderlink gibt (Calendly
   o.ä.) — die Sprechblase mittendrin sagt das auch offen: "Erst die
   Angaben, dann der Rückruf." Sobald ein Kalenderlink existiert, wird
   nur #bkrStep2 unten ersetzt, der Rest bleibt stehen.

   Farben/Radius/Font ausschliesslich aus den bestehenden Variablen in
   style.css (--ink, --blue, --line, --bg-alt, --ease usw.).
   ================================================================== */

/* --- Modal-Huelle ---------------------------------------------------- */
.bkrModal{
  position:fixed;inset:0;z-index:300;
  display:flex;align-items:center;justify-content:center;padding:28px;
}
.bkrModal[hidden]{display:none}
.bkrModal__backdrop{
  position:absolute;inset:0;background:rgba(10,23,48,.5);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;transition:opacity .3s var(--ease);
}
.bkrModal__panel{
  position:relative;z-index:1;max-width:420px;width:100%;
  max-height:calc(100vh - 56px);overflow-y:auto;
  opacity:0;transform:translateY(14px) scale(.98);
  transition:opacity .3s var(--ease),transform .3s var(--ease),max-width .35s var(--ease);
}
/* Schritt 2 (echter Kalender) braucht mehr Breite als die 420px des
   Formulars — Calendlys eigenes Widget wirkt darin sonst gequetscht. */
.bkrModal__panel.is-wide{max-width:720px}
.bkrModal.is-open .bkrModal__backdrop{opacity:1}
.bkrModal.is-open .bkrModal__panel{opacity:1;transform:none}
.bkrModal__close{
  position:absolute;top:14px;right:14px;z-index:2;
  width:32px;height:32px;border-radius:2px;border:1px solid var(--line);
  background:#fff;color:var(--ink-2);font-size:20px;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.bkrModal__close:hover{background:var(--bg-alt);color:var(--ink)}

/* --- Karte ------------------------------------------------------------ */
.bkr{
  background:#fff;border:1px solid var(--line);border-radius:2px;
  padding:30px 28px 28px;
  box-shadow:0 1px 2px rgba(10,23,48,.06),0 30px 60px -20px rgba(10,23,48,.35);
}

/* Breadcrumb-Stepper — bewusst als Textzeile, nicht als Nummern-Chips
   (so wirkt das Vorbild deutlich leichter/hochwertiger). */
.bkr__crumb{display:flex;align-items:center;gap:7px;margin:0 0 20px;
  font-size:12.5px;font-weight:500;color:var(--ink-3)}
.bkr__crumb .is-active{color:var(--blue)}
.bkr__crumbSep{color:var(--line);font-size:11px}

/* Mini-Markenzeile + Bezeichnung des Termins, wie im Vorbild */
/* Berg und Wortmarke auf eine gemeinsame Grundlinie, genau wie im Header:
   dort steht der Berg über align-items:baseline auf derselben Linie wie
   die Schrift. Das Groessenverhaeltnis ist maßstabsgetreu uebernommen
   (Header 30px Berg zu 24px Schrift = 1,25 — hier 17.5px zu 14px).
   line-height:1 ist dafuer noetig, sonst verschiebt der Zeilendurchschuss
   die Grundlinie der Schrift gegen die Bildunterkante. */
.bkr__brand{display:flex;align-items:baseline;gap:6px;margin:0 0 14px}
.bkr__brand img{height:17.5px;width:auto}
.bkr__brand b{font-size:14px;font-weight:600;letter-spacing:-.02em;line-height:1;color:var(--ink)}
.bkr__kind{margin:0 0 22px;font:300 21px/1.2 var(--f);letter-spacing:-.01em;color:var(--ink)}

/* --- Formular ----------------------------------------------------------- */
.bkr__form{display:flex;flex-direction:column;gap:15px}

.bkr__field{display:flex;flex-direction:column;gap:7px}
.bkr__field > span{font-size:12.5px;font-weight:500;color:var(--ink-2);padding:0}
.bkr__field input[type="text"],.bkr__field input[type="tel"]{
  appearance:none;-webkit-appearance:none;
  border:1px solid var(--line);border-radius:2px;padding:13px 14px;
  /* 16 px, nicht 15: Safari auf dem iPhone zoomt beim Antippen eines
     Feldes automatisch hinein, sobald die Schrift kleiner als 16 px
     ist. Der Nutzer landet dann mitten im Formular in einer
     vergroesserten Ansicht und muss selbst wieder herauszoomen —
     ein bekannter und vermeidbarer Bruch im Buchungsablauf
     (gemessen 23.09.2026, beide Felder standen auf 15 px). */
  font:400 16px/1.3 var(--f);color:var(--ink);background:#fff;
  transition:border-color .2s var(--ease);
}
.bkr__field input:focus{outline:none;border-color:var(--blue)}

.bkr__consent{margin:0;font-size:12px;line-height:1.5;color:var(--ink-3)}
.bkr__consent a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}

.bkr__continue{width:100%;justify-content:center;margin-top:2px}

/* --- Kalenderkulisse: immer sichtbar, immer inert ----------------------- */
.bkr__cal{position:relative;margin:22px -28px -28px;padding:18px 24px 24px;
  background:var(--bg-alt);border-top:1px solid var(--line-soft)}
.bkr__calNav{display:flex;align-items:center;justify-content:space-between;
  margin:0 0 14px;font-size:13px;font-weight:600;color:var(--ink)}
.bkr__calNav button{width:24px;height:24px;border:1px solid var(--line);border-radius:2px;
  background:#fff;color:var(--ink-3);cursor:default;display:flex;align-items:center;justify-content:center;
  font-size:13px;pointer-events:none}
.bkr__calDow{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:0 0 6px}
.bkr__calDow span{text-align:center;font-size:10.5px;font-weight:600;letter-spacing:.04em;color:var(--ink-3)}
.bkr__calGrid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.bkr__calGrid span{aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  font-size:11.5px;color:var(--ink-3);border-radius:2px;background:#fff}
.bkr__calGrid span.bkr__off{background:transparent}

.bkr__calLock{
  position:absolute;left:50%;top:78px;transform:translateX(-50%);
  width:248px;padding:11px 14px;text-align:center;
  background:#fff;border:1px solid var(--line);border-radius:2px;
  box-shadow:0 12px 24px -10px rgba(10,23,48,.25);
  font-size:12.5px;line-height:1.4;color:var(--ink-2);
}
.bkr__calLock::before{
  content:"";position:absolute;left:50%;top:-6px;width:11px;height:11px;
  transform:translateX(-50%) rotate(45deg);
  background:#fff;border-left:1px solid var(--line);border-top:1px solid var(--line);
}

/* --- Schritt 2: echtes Calendly-Widget --------------------------------- */
.bkr__calendlyBox{min-width:280px;height:640px}
.bkr__tel{display:block;text-align:center;margin-top:6px;font-size:13.5px;color:var(--ink-2);
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.bkr__tel:hover{color:var(--blue)}

@media(max-width:480px){
  .bkrModal{padding:0}
  .bkrModal__panel{max-width:none;max-height:100vh;height:100%;border-radius:0}
  .bkr{min-height:100%;border-radius:0;border:0;box-shadow:none}
  .bkr__cal{margin-left:-22px;margin-right:-22px}
}

/* --- Floating-Button, immer erreichbar (Vorbild: der Knopf unten rechts
   bei adventure-marketing.com / grabosch.de) — bei uns eckig statt rund:
   Kreise sind im Designsystem nur bei Avataren erlaubt.

   Der Knopf wechselt mit dem Untergrund (Melvin, 23.09.2026):
   - ueber dem dunklen Hero: Navy-Flaeche, weisses Icon, feinere Linie
   - darunter (helle Sektionen): weisse Flaeche, blaues Icon, kraeftigere Linie

   Grund fuer den Wechsel statt einer festen Farbe (gemessener Kontrast
   zum Untergrund): Navy liegt im Footer bei 1,00:1 und auf dem Hero bei
   1,05:1 — als Dauerzustand waere der Knopf dort unsichtbar. Umgekehrt
   wirkt Weiss auf dem dunklen Hero wie ein Fremdkoerper. Der Wechsel
   loest beides. Schatten neutral statt blau leuchtend, sonst kippt es
   Richtung SaaS-Optik.
   -------------------------------------------------------------------- */
.bkrFab{
  position:fixed;right:22px;bottom:22px;z-index:250;
  width:46px;height:46px;border-radius:2px;border:0;
  background:#fff;color:var(--blue);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 4px rgba(10,23,48,.06),0 16px 34px -12px rgba(10,23,48,.42);
  transition:background .45s var(--ease),color .45s var(--ease),
             box-shadow .45s var(--ease),transform .25s var(--ease);
}
.bkrFab:hover{transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(10,23,48,.06),0 20px 38px -12px rgba(10,23,48,.46)}

/* Ueber dem Hero: Navy statt Weiss. Die Klasse setzt anfrage-flow.js,
   sobald die Mitte des Knopfes die Hero-Sektion verlaesst. */
.bkrFab.ueber-dunkel{
  background:var(--navy);color:#fff;
  box-shadow:0 2px 4px rgba(0,0,0,.18),0 16px 34px -12px rgba(0,0,0,.5);
}
.bkrFab.ueber-dunkel:hover{background:#12326E;
  box-shadow:0 2px 4px rgba(0,0,0,.18),0 20px 38px -12px rgba(0,0,0,.55)}

/* Strichstaerke wandert mit: feiner auf dunklem Grund, kraeftiger auf hellem. */
.bkrFab svg path{stroke-width:2.3;transition:stroke-width .45s var(--ease)}
.bkrFab.ueber-dunkel svg path{stroke-width:1.7}
.bkrFab svg{width:20px;height:20px;display:block;position:absolute;
  transition:opacity .2s var(--ease),transform .2s var(--ease)}
/* Icon wechselt mit dem Zustand: Sprechblase geschlossen, Pfeil offen
   (Vorbild: der Chevron, in den sich der goldene Kreis bei AdVenture
   verwandelt, sobald die Teaser-Karte offen ist). */
.bkrFab__close{opacity:0;transform:scale(.6) rotate(-90deg)}
.bkrFab[aria-expanded="true"] .bkrFab__msg{opacity:0;transform:scale(.6) rotate(90deg)}
.bkrFab[aria-expanded="true"] .bkrFab__close{opacity:1;transform:none}

@media(max-width:600px){
  /* 44px ist die untere Grenze fuer eine sichere Tippflaeche. */
  .bkrFab{right:16px;bottom:16px;width:44px;height:44px}
}

/* --- Teaser-Karte, klappt ueber dem Fab-Button auf -------------------- */
.bkrTeaser{
  position:fixed;right:24px;bottom:92px;z-index:249;
  /* 328px statt 300px: Die Headline "Kostenloses Erstgespraech buchen!"
     braucht gemessene 256px und hatte bei 300px Karte exakt 256px Platz —
     das kippte durch Rundung in die zweite Zeile. Jetzt 284px Innenmass. */
  width:328px;max-width:calc(100vw - 32px);
  background:#fff;border:1px solid var(--line);border-radius:2px;
  padding:22px 22px 20px;
  box-shadow:0 1px 2px rgba(10,23,48,.06),0 24px 48px -16px rgba(10,23,48,.3);
  opacity:0;transform:translateY(14px) scale(.97);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.bkrTeaser[hidden]{display:block;visibility:hidden;pointer-events:none}
.bkrTeaser.is-open{opacity:1;transform:none;visibility:visible;pointer-events:auto}
.bkrTeaser__close{
  position:absolute;top:12px;right:12px;width:26px;height:26px;
  border:0;background:transparent;color:var(--ink-3);font-size:18px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.bkrTeaser__close:hover{color:var(--ink)}

.bkrTeaser__head{display:flex;align-items:center;gap:12px;margin:0 0 14px}
/* Kreis, weil das Designsystem Kreise bei Avataren ausdruecklich zulaesst.
   Weite Aufnahme (melvin-portraet-weit.png) statt der engen Bueste — zeigt
   Schultern und verschraenkte Arme, nicht nur den Kragen. Der helle Grund
   steckt schon im Foto; --bg-alt liegt nur als Rueckfall darunter. */
.bkrTeaser__ava{position:relative;flex:none;width:56px;height:56px}
.bkrTeaser__avaImg{display:block;width:56px;height:56px;border-radius:50%;
  overflow:hidden;background:var(--bg-alt)}
.bkrTeaser__avaImg img{width:100%;height:100%;object-fit:cover;object-position:center 6%;display:block}
/* Punkt sitzt auf dem Kreisrand (ca. 45°) und AUSSERHALB des
   beschnittenen Bildes, sonst wuerde overflow:hidden ihn abschneiden. */
.bkrTeaser__dot{
  position:absolute;right:1px;top:1px;width:11px;height:11px;
  border-radius:50%;background:#2FB86A;border:2px solid #fff;
}
.bkrTeaser__who{display:flex;flex-direction:column;gap:1px}
.bkrTeaser__who b{font-size:14px;font-weight:600;color:var(--ink)}
.bkrTeaser__who i{font-style:normal;font-size:12.5px;color:var(--ink-3)}

.bkrTeaser__kind{margin:0 0 7px;font:600 16.5px/1.3 var(--f);letter-spacing:-.005em;color:var(--ink)}
.bkrTeaser__txt{margin:0 0 16px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}

/* Jeder Tag ist klickbar und fuehrt zum naechsten Schritt (egal welcher),
   der heutige Tag ist hervorgehoben — wie bei adventure-marketing.com. */
.bkrTeaser__days{display:flex;gap:6px;margin:0 0 16px}
.bkrTeaser__days span{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 0;border-radius:2px;background:var(--bg-alt);
  border:1px solid transparent;cursor:pointer;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.bkrTeaser__days span:hover{background:#EDF0F4}
.bkrTeaser__days span.is-today{background:#fff;border-color:var(--blue)}
.bkrTeaser__days i{font-style:normal;font-size:10px;font-weight:600;letter-spacing:.04em;color:var(--ink-3)}
.bkrTeaser__days b{font-size:14px;font-weight:600;color:var(--ink)}
.bkrTeaser__days span.is-today b{color:var(--blue)}

/* Seitenpolster reduziert: Der Knopf ist ohnehin volle Breite, die 30px
   aus .btn engen nur den Text ein und trieben "Kostenloses Erstgespräch
   buchen" in die zweite Zeile. */
.bkrTeaser__cta{width:100%;justify-content:center;padding-left:14px;padding-right:14px}

/* ---- Handy: die Karte fährt als Blatt von unten ein --------------------
   Am Handy stand die Karte vorher mitten im Hero und verdeckte ihn halb.
   Als Blatt von unten ist das Verdecken eine bewusste Ebene statt eines
   Zufalls — dazu ein Schleier, der auch das Antippen daneben zum
   Schließen nutzbar macht.
   Der Knopf blendet solange aus: Das Blatt reicht bis zur Unterkante und
   der Knopf läge sonst darüber. Geschlossen wird über das Kreuz oder
   den Schleier. ---------------------------------------------------------- */
.bkrTeaser__schleier{display:none}

@media(max-width:600px){
  .bkrTeaser__schleier{
    display:block;position:fixed;inset:0;z-index:248;
    background:rgba(10,23,48,.45);
    backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
    opacity:0;transition:opacity .35s var(--ease);
  }
  .bkrTeaser__schleier[hidden]{display:block;visibility:hidden;pointer-events:none}
  .bkrTeaser__schleier.is-open{opacity:1;visibility:visible;pointer-events:auto}

  .bkrTeaser{
    left:0;right:0;bottom:0;width:auto;max-width:none;z-index:251;
    border-radius:2px 2px 0 0;border-bottom:0;
    padding:24px 22px calc(22px + env(safe-area-inset-bottom));
    box-shadow:0 -2px 6px rgba(10,23,48,.08),0 -20px 44px -16px rgba(10,23,48,.45);
    transform:translateY(100%);
    transition:transform .4s var(--ease),opacity .3s var(--ease);
  }
  .bkrTeaser.is-open{transform:none}

  /* Knopf tritt zurück, solange das Blatt offen ist */
  .bkrFab[aria-expanded="true"]{opacity:0;pointer-events:none;transform:translateY(8px)}
}
/* Sehr schmale Geraete (iPhone SE): Karte kann nicht breiter, darum hier
   die Headline minimal kleiner, damit sie einzeilig bleibt. */
@media(max-width:360px){
  .bkrTeaser__kind{font-size:15px}
  /* Gemessen: bei 288px Karte braucht die CTA sonst zwei Zeilen. */
  .bkrTeaser__cta{font-size:14px;padding-left:10px;padding-right:10px}
}