/* ============================================================
   termin.css — Styles für /termin
   Abhängig von style.css (CSS-Variablen, .btn, .section-inner,
   .service-hero, .faq-item etc. sind dort definiert)
   ============================================================ */

/* ── Sticky Fix: main hat overflow:clip → sticky bricht sonst ─────────────── */
main{overflow:visible}

/* Versteckte Elemente nie durch CSS-display überschreiben */
[hidden]{display:none !important}

/* ── has-fade Verläufe (wie service-layout.php) ───────────────────────────── */
.has-fade,.has-fade-top,.has-fade-bottom{position:relative}
.has-fade::before,.has-fade-top::before{content:"";position:absolute;top:0;left:0;right:0;height:160px;background:linear-gradient(to bottom,#191e28 0%,transparent 100%);pointer-events:none;z-index:1}
.has-fade::after,.has-fade-bottom::after{content:"";position:absolute;bottom:0;left:0;right:0;height:160px;background:linear-gradient(to top,#191e28 0%,transparent 100%);pointer-events:none;z-index:1}
.has-fade>.section-inner,.has-fade-top>.section-inner,.has-fade-bottom>.section-inner{position:relative;z-index:2}

/* ── Breadcrumb (analog webdesign.php) ────────────────────────────────────── */
.bc-list{max-width:1200px;margin:0 auto;padding:.7rem 4vw;display:flex;
  align-items:center;gap:.5rem;list-style:none;font-family:var(--font-head);
  font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}
.bc-list a{color:var(--text-dim);transition:color .2s;text-decoration:none}
.bc-list a:hover{color:var(--accent)}
.bc-sep{opacity:.4;padding:0 .1rem}

/* ── Trust-Bar (kopiert aus webdesign.php $page_styles) ───────────────────── */
.trust-bar{display:flex;align-items:center;justify-content:center;gap:1.25rem;
  flex-wrap:wrap;margin:.75rem 0 1.5rem;padding:.7rem 1.5rem;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-brand);max-width:520px;margin-left:auto;margin-right:auto}
.trust-item{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--white)}
.trust-item strong{color:var(--accent);font-family:var(--font-head)}
.trust-stars{color:#f5c518;letter-spacing:.04em;font-size:.85rem}
.trust-div{width:1px;height:1rem;background:rgba(255,255,255,.2)}

/* ── Hauptbereich ──────────────────────────────────────────────────────────── */
.termin-main{padding:2rem 0 3rem;background:#191e28}

.termin-grid{display:block}

/* ── Formular ──────────────────────────────────────────────────────────────── */
.termin-form-wrap{min-width:0}

.tf-honeypot{
  position:absolute;left:-9999px;
  width:1px;height:1px;overflow:hidden}

/* Zweispaltig bei breiten Viewports */
.tf-row--2col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.25rem}

.tf-group{
  margin-bottom:1.5rem}

.tf-group label,
.tf-group legend{
  display:block;
  font-size:.82rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-dim);font-weight:600;
  margin-bottom:.55rem}

.tf-req{color:var(--accent)}
.tf-hint{
  font-weight:400;text-transform:none;letter-spacing:0;
  font-size:.78rem;color:var(--text-dim);margin-left:.3rem}

.tf-group input[type="text"],
.tf-group input[type="email"],
.tf-group input[type="tel"],
.tf-group input[type="date"],
.tf-group select,
.tf-group textarea{
  width:100%;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(197,199,196,.25);
  border-radius:var(--radius-brand);
  color:var(--white);
  font-family:var(--font-body);
  font-size:.97rem;
  padding:.85rem 1.1rem;
  transition:border-color .25s,box-shadow .25s;
  appearance:none;-webkit-appearance:none}

.tf-group input[type="date"]{
  color-scheme:dark}

.tf-group select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  padding-right:2.5rem;
  cursor:pointer}

.tf-group select option{background:#1a1a2e;color:var(--white)}

.tf-group input:focus,
.tf-group select:focus,
.tf-group textarea:focus{
  outline:none;
  border-color:#fff;
  box-shadow:0 0 0 3px rgba(197,199,196,.18)}

.tf-group input.is-invalid,
.tf-group select.is-invalid,
.tf-group textarea.is-invalid{
  border-color:#e05252}

.tf-group textarea{resize:vertical;min-height:130px}

.tf-error{
  display:block;
  font-size:.8rem;color:#e05252;
  margin-top:.35rem;min-height:1.1em}

.tf-charcount{
  display:block;
  text-align:right;
  font-size:.78rem;color:var(--text-dim);
  margin-top:.3rem}

/* ── Toggle Pills (Checkboxen + Radios) ────────────────────────────────────── */
.tf-group fieldset{border:none;padding:0;margin:0}

.pill-group{
  display:flex;flex-wrap:wrap;gap:.5rem;
  margin-top:.1rem}

.toggle-pill{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.55rem 1rem;
  border:1px solid rgba(197,199,196,.25);
  border-radius:100px;
  font-size:.87rem;color:var(--text-dim);
  cursor:pointer;
  user-select:none;
  transition:border-color .2s,color .2s,background .2s}

.toggle-pill input{
  position:absolute;opacity:0;width:0;height:0;pointer-events:none}

.toggle-pill:hover{border-color:#fff;color:var(--white)}

.toggle-pill:has(input:checked){
  border-color:#fff;
  background:#fff;
  color:#191e28}

.toggle-pill--wide{flex:1 0 100%}

.pill-icon{
  width:15px;height:15px;flex-shrink:0;
  stroke:currentColor;fill:none;stroke-width:1.8;
  vertical-align:middle}

/* ── Checkbox-Gruppen (Newsletter + Datenschutz) ───────────────────────────── */
.tf-group--consent,
.tf-group--newsletter{
  padding:0;
  background:none;
  border:none}

.consent-label{
  display:flex;align-items:flex-start;gap:.75rem;
  cursor:pointer;font-size:.88rem;color:var(--text-dim);
  line-height:1.6}

.consent-label input[type="checkbox"]{
  width:.88rem;height:.88rem;flex-shrink:0;margin-top:.18rem;
  accent-color:var(--accent);cursor:pointer}

.consent-label a{color:var(--accent);text-decoration:underline}

/* ── Submit ────────────────────────────────────────────────────────────────── */
.tf-submit-wrap{margin-top:2rem}

.btn-full{width:100%;justify-content:center}

.btn-loading{display:inline-flex;align-items:center;gap:.6rem}
.spin{animation:spin-anim .8s linear infinite}
@keyframes spin-anim{to{transform:rotate(360deg)}}

.tf-microcopy{
  text-align:center;font-size:.82rem;color:var(--text-dim);
  margin-top:.9rem;line-height:1.6}

/* ── Newsletter-Opt-in (Design identisch zu Consent via gemeinsame Regel oben) */

/* ── Erfolg / Fehler States ────────────────────────────────────────────────── */
.tf-state{
  margin-top:2rem;padding:2rem;
  border-radius:10px;text-align:center}

.tf-state--success{
  background:rgba(76,175,80,.12);
  border:1px solid rgba(76,175,80,.35);
  animation:feedbackIn .5s var(--ease,cubic-bezier(.16,1,.3,1)) forwards}

@keyframes feedbackIn{
  from{opacity:0;transform:translateY(18px) scale(.97)}
  to{opacity:1;transform:none}}

.tf-state--error{
  background:rgba(224,82,82,.1);
  border:1px solid rgba(224,82,82,.3)}

.tf-state__icon{
  font-size:2.5rem;margin-bottom:.75rem}

.tf-state h3{
  font-family:var(--font-head);font-size:1.2rem;
  margin-bottom:.5rem;color:var(--white)}

.tf-state p{color:var(--text-dim);font-size:.95rem}

/* ── Sidebar ───────────────────────────────────────────────────────────────── */
.termin-sidebar{
  display:flex;flex-direction:column;gap:1.5rem}

/* Vorschau-Karte */
.preview-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(197,199,196,.25);
  border-radius:12px;
  padding:1.5rem}

.preview-card__status{
  display:flex;align-items:center;gap:.6rem;
  font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-dim);margin-bottom:1rem}

.preview-dot{
  width:.6rem;height:.6rem;border-radius:50%;flex-shrink:0}
.preview-dot--idle{background:#888}
.preview-dot--active{background:#4caf50}

.preview-card__text{
  font-size:.95rem;color:var(--white);
  line-height:1.8;
  border-left:3px solid var(--accent);
  margin:0;padding-left:1rem;
  font-style:italic}

/* Lars-Karte */
.lars-card{
  display:flex;gap:1rem;
  background:#191e28ab;
  border:1px solid rgba(197,199,196,.25);
  border-radius:var(--radius-brand);
  padding:1.25rem;
  transition:border-color .4s}
.lars-card:hover{border-color:#fff}

.lars-card__img{
  width:64px;height:64px;
  border-radius:50%;object-fit:cover;flex-shrink:0;
  border:2px solid var(--accent)}

.lars-card__body{display:flex;flex-direction:column;gap:.3rem}

.lars-card__name{
  font-family:var(--font-head);
  font-size:.92rem;letter-spacing:.05em;
  color:var(--white)}

.lars-card__role{
  font-size:.78rem;color:var(--accent);
  letter-spacing:.04em;text-transform:uppercase}

.lars-card__text{
  font-size:.85rem;color:var(--text-dim);
  line-height:1.7;margin:.25rem 0 .5rem}

.lars-card__links{display:flex;flex-wrap:wrap;gap:.5rem}

.lars-link{
  font-size:.82rem;color:var(--accent);
  text-decoration:none;
  padding:.3rem .7rem;
  border:1px solid rgba(197,199,196,.3);
  border-radius:100px;
  transition:background .2s,border-color .2s,color .2s}
.lars-link:hover{
  background:#fff;
  border-color:#fff;color:#191e28}

/* ── Schritte ──────────────────────────────────────────────────────────────── */
.termin-steps{
  padding:4.5rem 0}

.termin-steps .section-title{
  text-align:center;margin-bottom:3rem}

.steps-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem}

.step-card{
  background:none;
  border:none;
  border-radius:0;
  padding:0;
  position:relative}

.step-num{
  font-family:var(--font-head);
  font-size:3.5rem;font-weight:700;
  color:var(--white);opacity:.25;
  line-height:1;
  margin-bottom:.75rem}

.step-card h3{
  font-family:var(--font-head);
  font-size:1rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--white);margin-bottom:.75rem}

.step-card p{
  font-size:.9rem;color:var(--text-dim);line-height:1.75}

/* ── FAQ ───────────────────────────────────────────────────────────────────── */
.termin-faq{padding:2.5rem 0 3.5rem}

.termin-faq .section-title{
  text-align:center;margin-bottom:1.5rem}

.section-inner--narrow{
  max-width:720px}

/* FAQ-Stile - Karten-Look wie Homepage/Service-Seiten */
.faq-list{margin-top:2.5rem}
.faq-item{border:1px solid rgba(197,199,196,.18);border-radius:var(--radius-brand);margin-bottom:1rem;background:rgba(255,255,255,.02);overflow:hidden}
.faq-item summary{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  font-family:var(--font-head);font-size:1rem;font-weight:600;
  color:var(--white);padding:1.25rem 1.5rem;cursor:pointer;list-style:none;
  transition:color .25s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--accent)}
.faq-item summary::after{
  content:'+';flex-shrink:0;color:var(--accent);
  font-size:1.4rem;font-weight:300;
  transition:transform .3s var(--ease)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{
  color:var(--text-dim);line-height:1.85;
  padding:0 1.5rem 1.4rem;max-width:none}
.faq-item p a{color:var(--accent)}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .termin-grid{grid-template-columns:1fr}
  .termin-sidebar{position:static;order:-1}
  .steps-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:640px){
  .tf-row--2col{grid-template-columns:1fr}
  .steps-grid{grid-template-columns:1fr}
  .termin-hero h1{font-size:clamp(1.6rem,6vw,2.5rem)}
  .pill-group--stacked .toggle-pill{flex:1 0 100%}
}