/* ==========================================================================
   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. ========================================================== */


/* barlow-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/barlow-v13-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* barlow-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/barlow-v13-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* barlow-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/barlow-v13-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* barlow-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/barlow-v13-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


: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: linear-gradient(to right, #4561b7, #e9038d);
  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;
  /* orderShop.css hat dieses Element ursprünglich für eine eigenständige
     Formularseite ausgelegt und könnte eine feste Höhe/Mindesthöhe
     vorgeben. Für den neuen, kompakten Kartenstil hier explizit auf den
     Inhalt zurücksetzen. */
  min-height:0;
  height:auto;
}
.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;
  /* s.o.: verhindert, dass eine aus orderShop.css geerbte Höhe die Karte
     nach dem Ausblenden von .btnPdf-container künstlich groß hält. */
  min-height:0;
  height:auto;
}
.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: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(--gradient);
  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;
  /* Lavender-Box soll sich nur an ihrem eigenen Inhalt orientieren,
     unabhängig von evtl. geerbten Höhen aus orderShop.css. */
  min-height:0;
  height:auto;
}
#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; }

  /* orderShop.css setzt hier im Mobile-Breakpoint margin:1rem 1rem 8rem 1rem
     (Relikt der alten Einzelform-Seite) – die 8rem unten erzeugen den
     großen Leerraum vor Schritt 3. Hier explizit auf ein normales Maß
     zurückgesetzt, ohne orderShop.css selbst anzufassen. */
  .form-container{ padding:1.5rem; border-radius:16px; margin:0; }
  .btnPdf-container{ flex-direction:column-reverse; }
  .btnPdf-container .button-34{ width:100%; text-align:center; padding:13px 18px; }

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