/* Buchungsmodul der Terminseite — baut auf den Variablen von style.css auf */
.tb{ max-width:980px; margin:0 auto; }
/* Leitsatz unter der Überschrift: der nächste Schritt leuchtet wie mit Textmarker, erledigte bekommen einen Haken */
.tb-leitsatz{ scroll-margin-top:96px; }
.tb-leit{ transition:background .25s, color .25s; border-radius:6px; padding:1px 4px; margin:0 -2px; }
.tb-leit.aktiv{ background:var(--teal-soft); color:var(--teal-dark); font-weight:700; }
.tb-leit.fertig{ color:var(--ink-faint); cursor:pointer; text-decoration:underline dotted; text-underline-offset:3px; }
.tb-leit.fertig::before{ content:"✓ "; color:var(--teal); font-weight:700; }
.tb-leit.fertig:hover, .tb-leit.fertig:focus-visible{ color:var(--teal-dark); background:var(--teal-soft); outline:none; }
/* Fortschrittsanzeige: Punkte auf einer Linie, bewusst nicht wie Knöpfe (Thomas, 15.10.2026) */
.tb-schritte{ list-style:none; padding:0; margin:0 auto 30px; display:flex; justify-content:center; max-width:560px; }
.tb-schritte li{ flex:1; display:flex; flex-direction:column; align-items:center; gap:7px; font-size:12.5px; font-weight:600; letter-spacing:.02em; color:var(--ink-faint); position:relative; text-align:center; }
.tb-schritte li span{ width:28px; height:28px; border-radius:50%; background:#fff; border:2px solid var(--line); color:var(--ink-faint); display:inline-flex; align-items:center; justify-content:center; font-size:13px; position:relative; z-index:1; }
.tb-schritte li:not(:last-child)::after{ content:""; position:absolute; top:13px; left:50%; width:100%; height:2px; background:var(--line); }
.tb-schritte li.aktiv{ color:var(--teal-dark); }
.tb-schritte li.aktiv span{ background:var(--teal); border-color:var(--teal); color:#fff; box-shadow:0 0 0 4px var(--teal-soft); }
.tb-schritte li.fertig{ color:var(--ink-soft); cursor:pointer; }
.tb-schritte li.fertig span{ background:var(--teal-soft); border-color:var(--teal); color:var(--teal-dark); }
.tb-schritte li.fertig::after{ background:var(--teal); }
.tb-schritte li.fertig:hover, .tb-schritte li.fertig:focus-visible{ color:var(--teal-dark); outline:none; }
.tb-schritte li.fertig:hover span, .tb-schritte li.fertig:focus-visible span{ background:var(--teal); color:#fff; box-shadow:0 0 0 4px var(--teal-soft); }
.tb-hinweis{ background:#fff7e6; border:1px solid #f1d9a6; color:#7a4d00; border-radius:var(--radius-s); padding:12px 16px; margin-bottom:18px; font-size:14.5px; }
/* Bereichswahl: zwei große, eindeutig anklickbare Knöpfe (aktiv = gefüllt) */
.tb-umschalter-kopf{ text-align:center; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--ink-faint); margin:0 0 10px; }
.tb-umschalter{ display:grid; grid-template-columns:1fr 1fr; grid-auto-flow:row dense; gap:12px; max-width:760px; margin:0 auto 22px; }
.tb-umschalt{ display:flex; align-items:center; gap:12px; text-align:left; background:#fff; border:2px solid var(--line); border-radius:14px; padding:12px 16px; cursor:pointer; font:inherit; color:var(--ink); box-shadow:var(--shadow-s); transition:transform .18s var(--ease), border-color .18s, background .18s, color .18s, box-shadow .18s; }
.tb-umschalt:hover, .tb-umschalt:focus-visible{ border-color:var(--teal); transform:translateY(-2px); outline:none; }
.tb-umschalt.aktiv{ background:var(--teal); border-color:var(--teal); color:#fff; box-shadow:var(--shadow); }
.tb-umschalt-icon{ width:38px; height:38px; border-radius:11px; background:var(--teal-soft); display:inline-flex; align-items:center; justify-content:center; font-size:19px; flex:none; }
.tb-umschalt.aktiv .tb-umschalt-icon{ background:rgba(255,255,255,.22); }
.tb-umschalt-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.tb-umschalt-text b{ font-size:15px; line-height:1.3; }
.tb-umschalt-text small{ font-size:12.5px; color:var(--ink-soft); }
.tb-umschalt.aktiv .tb-umschalt-text small{ color:rgba(255,255,255,.85); }
.tb-umschalt-haken{ margin-left:auto; width:24px; height:24px; border-radius:50%; border:2px solid var(--line); display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:transparent; flex:none; }
.tb-umschalt.aktiv .tb-umschalt-haken{ border-color:#fff; background:#fff; color:var(--teal-dark); }
.tb-gruppe{ margin-bottom:34px; }
.tb-gruppe .eyebrow{ margin-bottom:12px; }
.tb-gruppe-hinweis{ text-align:center; font-size:14.5px; color:var(--ink-soft); margin:0 0 18px; }
/* Erklärtext je Bereich hinter einem ⓘ-Knopf */
/* ⓘ auf der Karte der Terminart (Thomas, 17.10.2026): kleiner Knopf in der oberen rechten Ecke der Karte; der Hinweis klappt unter der
   Kartenreihe auf, ein Pfeil zeigt auf die Karte. Auf dem Handy (eine Spalte) steht er direkt unter seiner Karte: Reihenfolge über order + dense. */
.tb-umschalt-wrap{ position:relative; display:flex; }
.tb-umschalt-wrap[data-bereich="kunden"]{ order:1; } .tb-umschalt-wrap[data-bereich="interessenten"]{ order:3; }
.tb-umschalt{ width:100%; }
.tb-info-knopf{ position:absolute; top:-10px; right:-8px; width:26px; height:26px; padding:0; border-radius:50%; border:1.5px solid var(--teal); background:#fff; color:var(--teal-dark); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; box-shadow:var(--shadow-s); transition:transform .15s, background .15s, color .15s; }
.tb-info-knopf:hover, .tb-info-knopf:focus-visible{ transform:scale(1.1); background:var(--teal-soft); outline:none; }
.tb-info-knopf[aria-expanded="true"]{ background:var(--teal); color:#fff; }
.tb-info-i{ font:italic 700 13px Georgia, 'Times New Roman', serif; line-height:1; }
.tb-info-text{ grid-column:1 / -1; order:4; position:relative; font-size:14px; line-height:1.55; color:var(--ink-soft); background:var(--bg-soft); border-radius:12px; padding:10px 16px; text-align:left; }
.tb-info-text[data-info="kunden"]{ order:2; }
.tb-info-text::before{ content:""; position:absolute; top:-6px; width:14px; height:14px; background:var(--bg-soft); transform:rotate(45deg); border-radius:2px; }
.tb-info-text[data-info="kunden"]::before{ left:calc(25% - 7px); } .tb-info-text[data-info="interessenten"]::before{ left:calc(75% - 7px); }
.tb-info-text a{ color:var(--teal-dark); font-weight:600; }
.tb-arten{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:16px; }
.tb-art{ text-align:left; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; cursor:pointer; display:flex; flex-direction:column; gap:8px; font:inherit; color:var(--ink); transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s; box-shadow:var(--shadow-s); }
.tb-art:hover, .tb-art:focus-visible{ transform:translateY(-3px); border-color:var(--teal); box-shadow:var(--shadow); outline:none; }
.tb-art-kopf{ display:flex; align-items:center; gap:10px; }
.tb-art-icon{ width:36px; height:36px; border-radius:10px; background:var(--teal-soft); display:inline-flex; align-items:center; justify-content:center; font-size:18px; flex:none; }
.tb-art-name{ font-size:18px; font-weight:700; }
.tb-art-meta{ font-size:13.5px; color:var(--ink-soft); }
.tb-art-meta b{ color:var(--teal-dark); }
.tb-art-text{ font-size:14.5px; color:var(--ink-soft); line-height:1.5; }
.tb-art-cta{ margin-top:4px; font-weight:700; color:var(--teal-dark); font-size:14.5px; }
.tb-zurueck{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.tb-link{ background:none; border:0; padding:0; color:var(--teal-dark); font:inherit; font-weight:600; cursor:pointer; }
.tb-link:hover{ text-decoration:underline; }
.tb-gewaehlt{ font-size:14px; color:var(--ink-soft); }
.tb-gewaehlt b{ color:var(--ink); }
.tb-kalender-wrap{ display:grid; grid-template-columns:minmax(300px, 420px) minmax(220px, 1fr); gap:22px; align-items:start; }
.tb-kalender{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px 18px 12px; box-shadow:var(--shadow-s); }
.tb-monat{ display:flex; align-items:center; justify-content:space-between; font-weight:700; font-size:16px; margin-bottom:10px; }
.tb-nav{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:#fff; font-size:20px; cursor:pointer; color:var(--ink); line-height:1; }
.tb-nav:disabled{ opacity:.3; cursor:default; }
.tb-nav:not(:disabled):hover{ border-color:var(--teal); color:var(--teal-dark); }
.tb-wochentage, .tb-tage{ display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; }
.tb-wochentage span{ text-align:center; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); padding:4px 0 6px; }
.tb-tag{ aspect-ratio:1; border-radius:10px; border:0; background:transparent; font:inherit; font-size:14.5px; color:var(--ink-faint); cursor:default; position:relative; }
.tb-tag.frei{ background:var(--teal-soft); color:var(--teal-dark); font-weight:700; cursor:pointer; }
.tb-tag.frei:hover{ background:var(--teal); color:#fff; }
.tb-tag.gewaehlt{ background:var(--teal) !important; color:#fff !important; box-shadow:0 0 0 3px var(--teal-soft); }
.tb-tag.heute::after{ content:""; position:absolute; bottom:4px; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:currentColor; }
.tb-legende{ font-size:12px; color:var(--ink-faint); margin-top:10px; }
.tb-zeiten{ background:var(--bg-soft); border-radius:var(--radius); padding:18px; min-height:200px; }
.tb-zeiten-kopf{ font-weight:700; margin-bottom:12px; font-size:15px; }
.tb-zeiten-kopf small{ display:block; font-weight:400; color:var(--ink-soft); font-size:13px; margin-top:2px; }
.tb-zeiten-liste{ display:grid; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); gap:8px; }
.tb-zeit{ border:1px solid var(--line); background:#fff; border-radius:10px; padding:10px 6px; font:inherit; font-weight:600; font-size:15px; color:var(--ink); cursor:pointer; transition:all .18s; }
.tb-zeit:hover{ border-color:var(--teal); color:var(--teal-dark); transform:translateY(-1px); }
.tb-zeit.gewaehlt{ background:var(--teal); border-color:var(--teal); color:#fff; }
.tb-zeiten-leer{ color:var(--ink-soft); font-size:14px; }
.tb-formular-wrap{ display:grid; grid-template-columns:minmax(300px, 1fr) minmax(260px, 340px); gap:24px; align-items:start; }
.tb-formular{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-s); display:flex; flex-direction:column; gap:14px; }
.tb-formular label{ display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:600; color:var(--ink); }
.tb-formular input[type=text], .tb-formular input[type=email], .tb-formular input[type=tel], .tb-formular textarea{ font:inherit; font-size:15px; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); }
.tb-formular input:focus, .tb-formular textarea:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-soft); }
/* Zielfeld der Honorartermine: der Beispieltext (Platzhalter) ist lang und soll ganz zu lesen sein */
.tb-formular textarea.tb-ziel{ min-height:150px; }
@media (max-width:1100px){ .tb-formular textarea.tb-ziel{ min-height:200px; } }
@media (max-width:760px){ .tb-formular textarea.tb-ziel{ min-height:290px; } }
.tb-opt{ font-weight:400; color:var(--ink-faint); }
.tb-honig{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.tb-check{ flex-direction:row !important; align-items:flex-start; gap:10px !important; font-weight:400 !important; font-size:13.5px !important; color:var(--ink-soft) !important; line-height:1.5; }
.tb-check input{ margin-top:3px; width:18px; height:18px; flex:none; accent-color:var(--teal); }
.tb-fehler{ background:#fdecea; border:1px solid #f3b9b1; color:#8a1f12; border-radius:10px; padding:10px 14px; font-size:14px; }
.tb-formular .btn{ align-self:flex-start; margin-top:4px; }
.tb-formular .btn:disabled{ opacity:.6; cursor:wait; transform:none; }
.tb-zusammenfassung{ background:var(--bg-tint); border-radius:var(--radius); padding:20px 22px; font-size:14.5px; line-height:1.55; position:sticky; top:96px; }
.tb-zusammenfassung h3{ font-size:16px; margin:0 0 10px; }
.tb-zusammenfassung dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 12px; }
.tb-zusammenfassung dt{ color:var(--ink-soft); }
.tb-zusammenfassung dd{ margin:0; font-weight:600; }
.tb-zusammenfassung .tb-zahlung{ margin-top:14px; padding-top:12px; border-top:1px solid rgba(0,0,0,.08); font-size:13.5px; color:var(--ink-soft); }
.tb-ergebnis{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px 28px; box-shadow:var(--shadow-s); max-width:720px; margin:0 auto; }
.tb-ergebnis h2{ font-size:24px; margin:0 0 10px; display:flex; align-items:center; gap:10px; }
.tb-ergebnis .tb-haken{ width:34px; height:34px; border-radius:50%; background:var(--teal); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:18px; flex:none; }
.tb-ergebnis .tb-status-storno .tb-haken{ background:#b45309; }
.tb-ergebnis p{ color:var(--ink-soft); font-size:15px; line-height:1.55; }
.tb-ergebnis dl{ margin:14px 0 18px; display:grid; grid-template-columns:auto 1fr; gap:8px 16px; font-size:15px; }
.tb-ergebnis dt{ color:var(--ink-soft); }
.tb-ergebnis dd{ margin:0; font-weight:600; }
.tb-aktionen{ display:flex; gap:12px; flex-wrap:wrap; margin-top:10px; }
.tb-aktionen .btn{ cursor:pointer; font:inherit; }
.tb-laden{ color:var(--ink-soft); text-align:center; }
.tb-dialog{ margin-top:16px; background:var(--bg-soft); border-radius:var(--radius-s); padding:16px 18px; }
.tb-dialog p{ margin:0 0 12px; }
/* Fragenliste (fragen.php) */
.fr .wrap{ max-width:1040px; }
.fr-wahl{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:14px; max-width:720px; margin:0 auto 40px; }
.fr-wahl-karte{ display:flex; flex-direction:column; gap:4px; text-decoration:none; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px 20px; box-shadow:var(--shadow-s); transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s; }
.fr-wahl-karte:hover{ transform:translateY(-3px); border-color:var(--teal); box-shadow:var(--shadow); }
.fr-wahl-karte b{ font-size:17px; color:var(--teal-dark); }
.fr-wahl-karte span{ font-size:14px; color:var(--ink-soft); }
.fr-h2{ font-size:26px; margin:34px 0 8px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.fr-dauer{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--teal-dark); background:var(--teal-soft); border-radius:999px; padding:6px 12px; }
.fr-intro{ color:var(--ink-soft); font-size:16px; line-height:1.55; max-width:720px; margin:0 0 22px; }
.fr-themen{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:16px; }
.fr-thema{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow-s); }
.fr-thema h3{ font-size:17px; margin:0 0 10px; display:flex; align-items:center; gap:10px; }
.fr-icon{ width:32px; height:32px; border-radius:9px; background:var(--teal-soft); display:inline-flex; align-items:center; justify-content:center; font-size:16px; flex:none; }
.fr-thema ul{ list-style:none; margin:0; padding:0; }
.fr-thema li{ padding:10px 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:4px; }
.fr-frage{ font-size:15px; line-height:1.5; color:var(--ink); }
.fr-werkzeug{ font-size:12px; color:var(--ink-faint); text-decoration:none; align-self:flex-start; border:1px solid var(--line); border-radius:999px; padding:2px 9px; }
.fr-werkzeug:hover{ color:var(--teal-dark); border-color:var(--teal); }
.fr-pakete{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:16px; }
.fr-paket{ background:var(--bg-tint); border-radius:var(--radius); padding:20px 22px; display:flex; flex-direction:column; gap:8px; }
.fr-paket h3{ font-size:17px; margin:0; }
.fr-paket p{ margin:0; font-size:15px; line-height:1.55; color:var(--ink); }
.fr-mitbringen{ font-size:13.5px !important; color:var(--ink-soft) !important; }
.fr-werkzeuge{ display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.fr-schluss{ margin:40px auto 10px; max-width:760px; text-align:center; }
.fr-schluss p{ font-size:15.5px; line-height:1.6; color:var(--ink-soft); }
.fr-knoepfe{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:18px; }
/* Pflichtangaben (Stern) und Anliegen-Feld mit Knopf zur Fragenliste */
.tb-pflicht{ color:var(--teal-dark); font-weight:700; }
.tb-pflicht-hinweis{ font-size:13px; color:var(--ink-faint); margin-top:-4px; }
.tb-feld{ display:flex; flex-direction:column; gap:6px; }
.tb-feld label{ display:inline; font-size:14px; font-weight:600; color:var(--ink); }
.tb-label-zeile{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; }
.tb-fragen-knopf{ font-size:13.5px; }
/* Auswahlfenster mit den Fragen */
.tb-modal{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:16px; }
.tb-modal[hidden]{ display:none; }
.tb-modal-hinter{ position:absolute; inset:0; background:rgba(16,33,42,.45); }
.tb-modal-box{ position:relative; background:#fff; border-radius:var(--radius); max-width:760px; width:100%; max-height:min(86vh, 900px); display:flex; flex-direction:column; box-shadow:0 30px 80px rgba(0,0,0,.28); }
.tb-modal-kopf{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px 6px; }
.tb-modal-kopf h3{ margin:0; font-size:20px; }
.tb-modal-x{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:#fff; font-size:22px; line-height:1; cursor:pointer; color:var(--ink); flex:none; }
.tb-modal-x:hover{ border-color:var(--teal); color:var(--teal-dark); }
.tb-modal-sub{ margin:0; padding:0 22px 12px; font-size:14px; color:var(--ink-soft); }
.tb-modal-sub a{ color:var(--teal-dark); }
.tb-modal-inhalt{ overflow:auto; padding:0 22px 22px; }
.tb-fr-teil{ margin-bottom:18px; }
.tb-fr-kopf{ font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--teal-dark); margin:10px 0 8px; }
.tb-fr-thema h4{ font-size:14.5px; margin:12px 0 6px; display:flex; gap:8px; align-items:center; }
.tb-fr-frage{ display:block; width:100%; text-align:left; background:var(--bg-soft); border:1px solid transparent; border-radius:10px; padding:9px 12px; margin:0 0 6px; font:inherit; font-size:14.5px; line-height:1.45; color:var(--ink); cursor:pointer; }
.tb-fr-frage:hover, .tb-fr-frage:focus-visible{ border-color:var(--teal); background:var(--teal-soft); outline:none; }
.tb-fr-paket b{ display:block; margin-bottom:2px; }
.tb-fr-paket span{ display:block; color:var(--ink-soft); font-size:13.5px; }
.tb-gruppe-hinweis a{ color:var(--teal-dark); font-weight:600; }
@media (max-width:760px){
  .tb-kalender-wrap, .tb-formular-wrap{ grid-template-columns:1fr; }
  .tb-zusammenfassung{ position:static; }
  .tb-schritte li{ font-size:11.5px; }
  .tb-umschalter{ grid-template-columns:1fr; gap:10px; }
  .tb-info-text::before{ left:auto !important; right:22px; }
  .tb-umschalt{ padding:11px 14px; }
  .tb-modal{ padding:0; align-items:flex-end; }
  .tb-modal-box{ border-radius:var(--radius) var(--radius) 0 0; max-height:92vh; }
}