/* Schwäbisch-Hall-Look — echte Werte aus dem SH-Markenbaukasten/CSS der Beraterseite.
   Komponenten konsumieren ausschließlich die :root-Variablen (re-themebar). */
:root{
  --sh-rot:#e6002d; --sh-rot-hover:#fa0041; --sh-rot-active:#b70030;
  --sh-gelb:#fff02d;
  --sh-schwarz:#000; --sh-weiss:#fff;
  --sh-grau-1:#f0f3f6; --sh-grau-2:#e2e8ed; --sh-grau-3:#d0d5d9;
  --sh-gruen:#00bb2d;
  --sh-radius-karte:8px;
  --sh-radius-pill:999px;
  --sh-schatten-karte:0 0 18px rgba(0,0,0,.08);
  --sh-font:'Hanken Grotesk', system-ui, -apple-system, sans-serif;
}

body{font-family:var(--sh-font); color:var(--sh-schwarz); background:var(--sh-weiss);}

/* ── Headlines ─────────────────────────────────────────────── */
.sh-headline{font-weight:800; line-height:1.08; color:var(--sh-schwarz);}
.sh-headline--rot{color:var(--sh-rot);}
.sh-headline--hero{font-size:clamp(2rem,5vw,3.1rem);}

/* ── Buttons ───────────────────────────────────────────────── */
.sh-btn{display:inline-flex; align-items:center; gap:.5rem; font-weight:700;
  text-decoration:none; cursor:pointer; border:0; transition:background .15s;}
.sh-btn--pill{background:var(--sh-rot); color:var(--sh-weiss);
  border-radius:var(--sh-radius-pill); padding:10px 40px;}
.sh-btn--pill:hover{background:var(--sh-rot-hover);}
.sh-btn--pill:active{background:var(--sh-rot-active);}
.sh-btn--sekundaer{background:var(--sh-grau-1); color:var(--sh-schwarz);
  border-radius:var(--sh-radius-karte); padding:10px 28px;}

/* ── Karten ────────────────────────────────────────────────── */
.sh-card{background:var(--sh-weiss); border-radius:var(--sh-radius-karte);
  box-shadow:var(--sh-schatten-karte); padding:1.75rem;}

/* ── Sektionen ─────────────────────────────────────────────── */
.sh-section{padding:4rem 1rem;}
.sh-section--grau{background:var(--sh-grau-1);}
.sh-section--gelb{background:var(--sh-gelb); color:var(--sh-schwarz);}  /* Branding-Vollfläche */
.sh-section__inner{max-width:1140px; margin:0 auto;}

/* ── Piktogramme ───────────────────────────────────────────── */
.sh-pikto{width:48px; height:48px; display:block;}

/* ── Navbar ────────────────────────────────────────────────── */
.sh-masthead{background:var(--sh-gelb); position:sticky; top:0; z-index:50;}
.sh-navbar{max-width:1140px; margin:0 auto; display:flex; align-items:center;
  justify-content:space-between; padding:.9rem 1rem; gap:1rem;}
.sh-navbar__marke{font-weight:800; font-size:1.15rem; color:var(--sh-schwarz); text-decoration:none;}
.sh-navbar__links{display:flex; gap:1.25rem; flex-wrap:wrap;}
.sh-nav-link{color:var(--sh-schwarz); text-decoration:none; font-weight:500;}
.sh-nav-link:hover{text-decoration:underline;}

/* ── Footer ────────────────────────────────────────────────── */
.sh-footer{background:var(--sh-grau-1); padding:2rem 1rem; text-align:center;}
.sh-footer__zugehoerigkeit{display:flex; align-items:center; justify-content:center;
  gap:.75rem; color:#333; font-size:.95rem;}
.sh-legal{background:var(--sh-grau-2); padding:1rem; text-align:center; font-size:.85rem;}
.sh-legal__link{color:#333; margin:0 .6rem; text-decoration:none;}
.sh-legal__link:hover{color:var(--sh-rot);}

/* ── Hero-Grid ─────────────────────────────────────────────── */
.sh-hero__grid{display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:center;}
/* Einspaltig ohne Bild — zentriert, volle Breite */
.sh-hero__grid--solo{grid-template-columns:1fr; max-width:720px;}

/* ── FAQ-Akkordeon ─────────────────────────────────────────── */
.sh-faq{display:flex; flex-direction:column; gap:.75rem;}
.sh-faq__item{border-left:3px solid var(--sh-rot); padding:0;}
.sh-faq__item[open]{border-left-color:var(--sh-rot);}
.sh-faq__frage{
  list-style:none; cursor:pointer; font-weight:700;
  padding:1rem 1.75rem; color:var(--sh-schwarz);
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; user-select:none;
}
/* Eigene Pfeil-Indikator, da marker browserübergreifend variiert */
.sh-faq__frage::after{
  content:'▾'; flex-shrink:0; font-size:1.1rem; color:var(--sh-rot);
  transition:transform .2s; display:inline-block;
}
.sh-faq__item[open] > .sh-faq__frage::after{transform:rotate(-180deg);}
/* Standard-Browser-Dreieck verstecken */
.sh-faq__frage::-webkit-details-marker{display:none;}
.sh-faq__frage::marker{content:'';}
.sh-faq__antwort{padding:.25rem 1.75rem 1.25rem; color:#444; line-height:1.65;}

/* ── Leistungen-Karten-Grid ────────────────────────────────── */
/* auto-fit + minmax: Karten umbrechen automatisch bei Platzmangel.
   block.spalten wird ignoriert — robusteres Verhalten auf mobilen Breiten. */
.sh-karten-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:1.5rem;}

/* ── Prozess-Schrittfolge ──────────────────────────────────── */
/* auto-fit + minmax: 4 Schritte nebeneinander auf Desktop, gestapelt auf Mobil. */
.sh-prozess-reihe{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:1.5rem; align-items:start;}

/* ── Über-mich-Profil-Grid ─────────────────────────────────── */
/* Festes 280px-Foto-Slot + Fließtext-Spalte auf Desktop. */
.sh-ueber-grid{display:grid; grid-template-columns:280px 1fr; gap:2rem; align-items:start;}
.sh-kontakt-grid{display:grid; grid-template-columns:1fr 320px; gap:2rem; align-items:start;}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width:768px){
  .sh-hero__grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .sh-navbar{flex-direction:column; align-items:flex-start;}
  .sh-section{padding:2.5rem 1rem;}
  /* Prozess-Pfeile zwischen Schritten ausblenden wenn Schritte umbrechen */
  .sh-prozess-pfeil{display:none;}
  /* Über-mich: Foto stapelt über dem Text */
  .sh-ueber-grid{grid-template-columns:1fr;}
  .sh-kontakt-grid{grid-template-columns:1fr;}
}

/* ═══════════════════════════════════════════════════════════════════════
   Terminbuchungs-Wizard — DaisyUI-Shim
   Der /termin-Wizard (plugins/terminbuchung/.../buchung.html) ist eine
   DaisyUI-Komponente; SH lädt kein DaisyUI. Dieser Block definiert die vom
   Wizard genutzten DaisyUI-KOMPONENTEN im SH-Look. Die Farb-Utilities
   (text-primary, bg-base-100/200, border-primary, peer-checked:*) liefert
   die tailwind.config in base.html. Vollständigkeit sichert der Vertrags-
   test tests/test_sh_wizard_shim.py (jede vom Wizard genutzte DaisyUI-Klasse
   muss hier oder als Tailwind-Utility definiert sein).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Karten ──────────────────────────────────────────────────── */
.card{background:var(--sh-weiss); border-radius:var(--sh-radius-karte);
  box-shadow:var(--sh-schatten-karte);}
.card-body{padding:1.75rem;}
.card-title{font-weight:800; font-size:1.25rem; color:var(--sh-schwarz);
  display:flex; align-items:center; gap:.5rem;}
.card-bordered{box-shadow:none; border:2px solid var(--sh-grau-2);}

/* ── Schritt-Indikator (steps) ───────────────────────────────── */
.steps{display:flex; list-style:none; padding:0; margin:0; counter-reset:sh-step;}
.steps-horizontal{flex-direction:row;}
.step{flex:1; text-align:center; position:relative; color:var(--sh-grau-3);
  font-size:.85rem; font-weight:600; padding-top:2.75rem; counter-increment:sh-step;}
.step::before{content:counter(sh-step); position:absolute; top:0; left:50%;
  transform:translateX(-50%); width:2rem; height:2rem;
  border-radius:var(--sh-radius-pill); background:var(--sh-grau-2);
  color:var(--sh-schwarz); display:flex; align-items:center;
  justify-content:center; font-weight:700; z-index:1;}
.step::after{content:''; position:absolute; top:1rem; right:50%;
  width:100%; height:2px; background:var(--sh-grau-2);}
.step:first-child::after{display:none;}
.step-primary{color:var(--sh-schwarz);}
.step-primary::before{background:var(--sh-rot); color:var(--sh-weiss);}
.step-primary::after{background:var(--sh-rot);}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  font-weight:700; font-family:var(--sh-font); cursor:pointer; border:0;
  border-radius:var(--sh-radius-pill); padding:10px 32px;
  transition:background .15s,border-color .15s,color .15s;
  background:var(--sh-grau-1); color:var(--sh-schwarz); text-decoration:none;}
.btn:disabled{opacity:.45; cursor:not-allowed;}
.btn-primary{background:var(--sh-rot); color:var(--sh-weiss);}
.btn-primary:hover:not(:disabled){background:var(--sh-rot-hover);}
.btn-ghost{background:transparent; color:var(--sh-schwarz);}
.btn-ghost:hover:not(:disabled){background:var(--sh-grau-1);}
.btn-outline{background:transparent; border:2px solid var(--sh-grau-3); color:var(--sh-schwarz);}
.btn-outline:hover:not(:disabled){border-color:var(--sh-rot); color:var(--sh-rot);}
.btn-sm{padding:6px 16px; font-size:.85rem;}

/* ── Badge ───────────────────────────────────────────────────── */
.badge{display:inline-flex; align-items:center; padding:.15rem .6rem;
  border-radius:var(--sh-radius-pill); font-size:.75rem; font-weight:600;}
.badge-ghost{background:var(--sh-grau-1); color:#555;}

/* ── Formfelder ──────────────────────────────────────────────── */
.form-control{display:flex; flex-direction:column;}
.label{display:flex; padding:.3rem 0;}
.label-text{font-weight:600; font-size:.9rem; color:var(--sh-schwarz);}
.input,.textarea{font-family:var(--sh-font); font-size:1rem; padding:.6rem .8rem;
  border-radius:var(--sh-radius-karte); background:var(--sh-weiss);
  color:var(--sh-schwarz); width:100%;}
.input-bordered,.textarea-bordered{border:2px solid var(--sh-grau-2);}
.input:focus,.textarea:focus{outline:none; border-color:var(--sh-rot);}
.checkbox{width:1.25rem; height:1.25rem; border:2px solid var(--sh-grau-3);
  border-radius:4px; cursor:pointer; appearance:none; -webkit-appearance:none;
  position:relative; flex-shrink:0; background:var(--sh-weiss);}
.checkbox:checked,.checkbox-primary:checked{background:var(--sh-rot); border-color:var(--sh-rot);}
.checkbox:checked::after{content:'✓'; color:var(--sh-weiss); position:absolute;
  top:50%; left:50%; transform:translate(-50%,-50%); font-size:.85rem; line-height:1;}
.checkbox-sm{width:1rem; height:1rem;}

/* ── Alert ───────────────────────────────────────────────────── */
.alert{display:flex; align-items:center; gap:.6rem; padding:.85rem 1rem;
  border-radius:var(--sh-radius-karte); font-size:.9rem;}
.alert-error{background:#fde8ec; color:var(--sh-rot-active);}
.alert-warning{background:#fff8e0; color:#8a6d00;}

/* ── Loading-Spinner ─────────────────────────────────────────── */
.loading{display:inline-block; vertical-align:middle;}
.loading-spinner{border:3px solid var(--sh-grau-2); border-top-color:var(--sh-rot);
  border-radius:50%; animation:sh-spin .7s linear infinite;}
.loading-md{width:1.5rem; height:1.5rem;}
.loading-sm{width:1rem; height:1rem; border-width:2px;}
@keyframes sh-spin{to{transform:rotate(360deg);}}

/* ── Divider ─────────────────────────────────────────────────── */
.divider{height:1px; background:var(--sh-grau-2); margin:.6rem 0;}