/* ==========================================================================
   ClottenLab – Theme-Overlay für die bestehende Warenkorb-Seite
   ==========================================================================
   orderShop.css bleibt unverändert und wird weiterhin von analysen.html,
   datenschutz.html, impressum.html und der Einwilligungsseite genutzt.
   Diese Datei wird bewusst NUR auf analysenCart.html eingebunden (nach
   orderShop.css). analysenCart.js bleibt ebenfalls unverändert.

   Die Seite ist als 3-Schritte-Flow aufgebaut (Ihre Auswahl / Vorgangs-
   nummer erstellen / Termin vereinbaren), wie im Entwurf
   clottenlab_cart_mobile.html. Schritt 3 ist zunächst nur eine schwache
   Vorschau; sobald analysenCart.js erfolgreich eine Vorgangsnummer erzeugt
   hat (createOrder()/createPDF() – unverändert), erkennt
   analysenCart-theme.js das per MutationObserver und setzt die Klasse
   .has-result auf .cart-flow – darüber schaltet CSS die Ergebnis-Karte und
   Schritt 3 frei. Es wird keine bestehende Funktion "umhüllt", nur
   beobachtet. ========================================================== */

:root{
  --medical-blue:#436DEA;
  --magenta:#E2007A;
  --berry:#991355;
  --lavender:#EEF1FC;
  --gray-150:#222222;
  --gray-text:#3B3B3F;
  --gray-soft:#6E6E73;
  --line:#E7E8EE;
  --gradient: linear-gradient(90deg, var(--medical-blue) 0%, #7C5FC7 50%, var(--magenta) 100%);
  --container-width:1220px;
  --gutter:2rem;
}

body{
  font-family:'Barlow', Arial, Helvetica, sans-serif;
  color:var(--gray-text);
  background:#FFFFFF;
}

/* ---- Neue Kopfzeile (identisch zu analysen.html/Landingpage) ---- */
.topbar{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:var(--container-width);
  margin:0 auto;
  padding:20px var(--gutter) 8px;
}
.topbar img{ height:44px; width:auto; display:block; }
.burger-menu{
  width:44px; height:44px; border-radius:50%;
  border:1.5px solid var(--line); background:#FFFFFF;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; padding:0; cursor:pointer;
}
.burger-menu svg{ width:20px; height:20px; }
.nav-links{ display:none; align-items:center; gap:40px; }
.nav-links a{ font-size:15px; font-weight:500; color:var(--gray-text); text-decoration:none; }
.nav-links a:hover{ color:var(--medical-blue); }
.mobile-nav{
  display:none; flex-direction:column; position:absolute;
  top:calc(100% + 8px); right:var(--gutter); min-width:220px;
  background:#FFFFFF; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 12px 28px rgba(34,34,34,0.12); padding:8px; z-index:30;
}
.mobile-nav.open{ display:flex; }
.mobile-nav a{ padding:12px 14px; font-size:15px; font-weight:500; color:var(--gray-text); text-decoration:none; border-radius:8px; }
.mobile-nav a:hover{ background:#F5F6FA; color:var(--medical-blue); }
@media (min-width:1200px){
  .burger-menu{ display:none; }
  .mobile-nav{ display:none !important; }
  .nav-links{ display:flex; }
}

/* ---- Alte Kopfzeile (MVZ-Badge + "ClottenLab+"-Balken) ausgeblendet:
   die neue Kopfzeile übernimmt die Markenführung. Nichts davon wird von
   analysenCart.js angesprochen, das Verstecken ist rein optisch. ---- */
.logo,
header{ display:none; }

/* ---- Schritte-Flow: gemeinsamer Rahmen ---- */
.cart-flow{ padding-bottom:1rem; }

.step-section{
  max-width:var(--container-width);
  margin:2.5rem auto 0;
  padding:0 var(--gutter);
  box-sizing:border-box;
}
#cartStep1{ margin-top:1.5rem; }

.step-section-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 16px;
  margin-bottom:16px;
}
.step-icon{
  flex-shrink:0;
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  color:var(--medical-blue);
}
.step-icon svg{ width:28px; height:28px; }
.step-section-title-row{ flex:1 1 auto; min-width:0; }
.step-section-kicker{
  font-family:'Barlow', Arial, sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--magenta);
  margin:0 0 2px;
}
.step-section-title{
  font-family:'Barlow', Arial, sans-serif;
  font-size:20px;
  font-weight:700;
  color:var(--gray-150);
  margin:0;
  display:flex;
  align-items:center;
  gap:8px;
}
.step-check{
  flex-shrink:0;
  width:20px; height:20px;
  border-radius:50%;
  background:var(--medical-blue);
  color:#FFFFFF;
  display:inline-flex; align-items:center; justify-content:center;
}
.step-check svg{ width:11px; height:11px; }
.step-section-desc{
  font-family:'Barlow', Arial, sans-serif;
  font-size:14.5px;
  color:var(--gray-soft);
  line-height:1.6;
  max-width:60ch;
  margin:0 0 14px;
}
.step-section-desc strong{ color:var(--gray-150); }

.step-section.is-upcoming{ opacity:0.5; }
.step-section.is-upcoming .step-section-head{ margin-bottom:0; }
#cartStep3 .step-section-desc,
#cartStep3 .btn-primary{ display:none; }

/* ---- Generische Buttons (Legende) ---- */
.btn{
  background:var(--medical-blue);
  font-family:'Barlow', Arial, sans-serif;
  border-radius:100px;
  padding:8px 16px;
  font-size:14px;
  color:#FFFFFF;
  border:none;
  cursor:pointer;
  flex-shrink:0;
}
.btn:hover{ background:var(--magenta); }

/* Legende-Umschalter: sitzt jetzt rechtsbündig im Kopf von Schritt 1
   (wie im Entwurf). showLegende() selbst (jQuery slideToggle) bleibt
   unverändert. */
.btn-legende{
  position:static;
  margin-left:auto;
  font-weight:600;
}

/* ---- Legende/Fußnoten-Karte ---- */
.container-fußnoten-cart{ margin:0 0 1.25rem; }
.fußnoten-cart{
  position:relative;
  border:1px solid var(--line);
  box-shadow:0 16px 32px rgba(34,34,34,0.06);
  border-radius:16px;
  padding:1.5rem 1.5rem 1.5rem 3.5rem;
  max-width:none;
  width:100%;
  box-sizing:border-box;
  margin:0;
}
.fußnoten-cart::before{
  content:"i";
  position:absolute;
  left:1.25rem;
  top:1.5rem;
  width:22px; height:22px;
  border-radius:50%;
  background:var(--medical-blue);
  color:#FFFFFF;
  font-family:Georgia, 'Times New Roman', serif;
  font-style:italic;
  font-weight:700;
  font-size:13px;
  display:flex; align-items:center; justify-content:center;
}
.fußnoten-cart > div{ display:inline; }
.fußnoten-cart > div p{ display:inline; font-size:13.5px; line-height:1.7; color:var(--gray-text); }
.fußnoten-cart > div + div p::before{ content:" · "; color:var(--gray-soft); }
.fußnoten-cart span{ color:var(--berry); font-weight:700; }

/* ---- Warenkorb-Tabelle als helle Karte ---- */
.main-container-cart{ display:block; margin:0; padding:0; }
main{ width:100%; margin-left:0; }

table{
  font-family:'Barlow', Arial, sans-serif;
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 12px 28px rgba(34,34,34,0.04);
  background:#FFFFFF;
}

thead tr th{
  background:var(--lavender);
  color:var(--gray-150);
  font-weight:700;
  font-size:12.5px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  padding:16px 18px;
  border:none;
  text-align:left;
}

th, td{
  border:none;
  border-bottom:1px solid var(--line);
  padding:15px 18px;
}
tbody tr:last-child td{ border-bottom:none; }
.igel_table tr:hover{ background:#FAFAFC; }

tbody tr td:nth-child(3){
  text-align:right;
  font-weight:700;
  color:var(--berry);
  white-space:nowrap;
}
tbody tr td:nth-child(4){ text-align:center; }

.cart{ transition:transform .2s ease; }
.cart img{ width:26px; height:26px; max-width:none; display:block; margin:0 auto; cursor:pointer; }
.cart:hover{ transform:scale(1.12); }

/* ---- Zwischensumme unterhalb der Tabelle ---- */
.summe{
  text-align:right;
  margin:1.25rem 0 0;
  padding-top:1rem;
  border-top:1px solid var(--line);
  font-weight:normal;
}
.summe .preis{
  font-family:'Barlow', Arial, sans-serif;
  font-size:15px;
  line-height:1.8;
  color:var(--gray-text);
  font-weight:600;
  margin:0;
}

/* ---- Formular-/Abschluss-Karte (Schritt 2) ---- */
.form-input-container{
  display:flex;
  justify-content:center;
  margin:0;
}
.form-container{
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  box-shadow:0 16px 32px rgba(34,34,34,0.06);
  border-radius:20px;
  max-width:640px;
  width:100%;
  padding:2rem 2.25rem;
  box-sizing:border-box;
}
.form-container p{
  font-family:'Barlow', Arial, sans-serif;
  line-height:1.6;
  font-size:14px;
  color:var(--gray-text);
  margin:0;
}
.form-container p strong{ color:var(--gray-150); }

.btnPdf-container{
  display:flex;
  margin-top:1.75rem;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}

.button-34{
  font-family:'Barlow', Arial, sans-serif;
  border-radius:100px;
  padding:12px 22px;
  font-size:15px;
  font-weight:700;
  border:none;
  cursor:pointer;
  box-shadow:none;
}
.btnPdf-container .button-34:first-child{
  background:#FFFFFF;
  border:1.5px solid var(--line);
  color:var(--gray-text);
}
.btnPdf-container .button-34:first-child:hover{ background:#F7F8FC; }
.btnPdf-container .button-34:first-child a{ color:var(--gray-text); }

.btnPdf-container .button-34:last-child{ background:var(--berry); }
.btnPdf-container .button-34:last-child:hover{ background:var(--magenta); }

/* ---- Schritt 3: eigener Primär-Button ---- */
.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--berry);
  color:#FFFFFF;
  font-family:'Barlow', Arial, sans-serif;
  font-weight:700;
  font-size:15px;
  padding:13px 26px;
  border-radius:100px;
  text-decoration:none;
  border:none;
  cursor:pointer;

}
.btn-primary:hover{ background:var(--magenta); }

/* ---- Ergebnis-Zustand: sobald analysenCart.js erfolgreich eine
   Vorgangsnummer erzeugt hat (siehe analysenCart-theme.js) ---- */
.cart-flow.has-result #cartStep2 .vorgangsnummer > p:first-of-type,
.cart-flow.has-result #cartStep2 .vorgangsnummer > br,
.cart-flow.has-result #cartStep2 .btnPdf-container{
  display:none;
}
.cart-flow.has-result #cartStep2 .vorgangsnummer{
  display:flex;
  flex-direction:column;
  gap:8px;
  background:var(--lavender);
  border-radius:14px;
  padding:16px 18px;
  margin-top:0;
}
#auftrags_id_text{
  font-family:'Barlow', Arial, sans-serif;
  font-size:16px;
  font-weight:700;
  color:var(--gray-150);
  margin:0;
  order:1;
}
#auftrags_id{ color:var(--berry); }
.vorgangsnummer a{
  display:inline-flex;
  align-self:flex-start;
  margin-top:0;
  font-size:14.5px;
  font-weight:700;
  color:var(--medical-blue);
  text-decoration:underline;
  order:2;
}
.vorgangsnummer a:hover{ color:var(--magenta); }

.cart-flow.has-result #cartStep3{ opacity:1; }
.cart-flow.has-result #cartStep3 .step-section-desc{ display:block; }
.cart-flow.has-result #cartStep3 .btn-primary{ display:inline-flex; }

/* ---- Footer ----
   Bewusst unverändert gegenüber der Live-Seite (identisch zu
   analysen.html): kleiner, fixierter Balken mit den zwei bestehenden
   Links. */

/* ==========================================================================
   Mobil (<= 830px)
   ========================================================================== */
@media only screen and (max-width: 830px){
  .topbar{ padding:16px 1rem 6px; }
  .topbar img{ height:34px; }

  .step-section{ padding:0 1rem; margin-top:1.75rem; }
  #cartStep1{ margin-top:1.25rem; }
  .step-icon{ width:34px; height:34px; }
  .step-icon svg{ width:24px; height:24px; }
  .step-section-title{ font-size:17px; }
  .step-section-desc{ font-size:13.5px; }
  .btn-legende{ font-size:13px; }

  .fußnoten-cart{ padding:1.25rem 1.25rem 1.25rem 3rem; font-size:14px; }

  table{ border-radius:14px; }
  th, td{ padding:12px 12px; }
  thead tr th{ font-size:11px; }
  .cart img{ width:22px; height:22px; }

  /* Material-Spalte auf dem Smartphone ausblenden – konsistent zur
     Analysen-Seite. analysenCart.js erzeugt die Zellen unverändert
     weiter, sie werden nur nicht angezeigt. */
  thead tr th:nth-child(2),
  tbody tr td:nth-child(2){ display:none; }

  .summe{ margin:1rem 0 0; }
  .summe .preis{ font-size:13.5px; }

  .form-container{ padding:1.5rem; border-radius:16px; }
  .btnPdf-container{ flex-direction:column-reverse; }
  .btnPdf-container .button-34{ width:100%; text-align:center; padding:13px 18px; }

  .btn-primary{ width:100%; }
}