/* ==========================================================================
   ClottenLab – Theme-Overlay für die bestehende Analysen-Seite (v3)
   ==========================================================================
   orderShop.css bleibt unverändert und wird weiterhin von analysenCart.html,
   datenschutz.html, impressum.html und der Einwilligungsseite genutzt.
   Diese Datei wird bewusst NUR auf analysen.html eingebunden (nach
   orderShop.css). analysen.js bleibt ebenfalls unverändert – die kleinen
   Verhaltens-Ergänzungen (aktiver Kategorie-Zustand, Mobil-Dropdown) stehen
   in der separaten Datei analysen-theme.js, die NACH analysen.js geladen
   wird und nur bestehende Funktionen von außen "umhüllt".
   ========================================================================== */

: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 zur 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
   analysen.js angesprochen, das Verstecken ist rein optisch. ---- */
.logo,
header{ display:none; }

/* ---- Such-/Warenkorb-Zeile ---- */
.nav-header{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
  max-width:var(--container-width);
  margin:0 auto;
  padding:1.5rem var(--gutter) 0;
  box-sizing:border-box;
}

#search-container{ display:block; flex:1 1 auto; margin:0; min-width:220px; }
#search-container form{ display:block; }
#search{
  box-sizing:border-box;
  width:100%;
  font-family:'Barlow', Arial, sans-serif;
  border:1.5px solid var(--line);
  border-radius:100px;
  padding:13px 20px 13px 48px;
  height:auto;
  font-size:16px;
  color:var(--gray-text);
  background:#FFFFFF url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") no-repeat 18px center;
  background-size:18px 18px;
}
#search::placeholder{ color:var(--gray-soft); }
#search:focus{
  border-color:var(--medical-blue);
  outline:none;
  box-shadow:0 0 0 3px rgba(67,109,234,0.12);
}
/* Der Such-Button bleibt im DOM (Enter löst das Formular weiterhin aus),
   ist optisch aber nicht mehr nötig – die Lupe im Eingabefeld übernimmt. */
.search_btn34{ display:none; }

/* Mobil-Dropdown für Kategorien (Toggle-Button). Auf Desktop unsichtbar. */
.category-dropdown-toggle{
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  background:var(--lavender);
  color:var(--berry);
  border:none;
  border-radius:100px;
  padding:12px 18px;
  font-family:'Barlow', Arial, sans-serif;
  font-size:14.5px;
  font-weight:700;
  cursor:pointer;
}
.category-dropdown-toggle svg{ flex-shrink:0; transition:transform .2s ease; }
.category-dropdown-toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }

.shopping-cart-container{
  position:relative;
  flex-shrink:0;
  margin:0;
  scale:1;
  height:auto;
}
.shopping-cart-container a{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  border:1.5px solid var(--line);
  border-radius:50%;
  background:#FFFFFF;
}
.shopping-cart-container img{ max-width:19px; height:auto; }
.cartCount{
  position:absolute; top:-4px; right:-4px;
  color:#FFFFFF; background:var(--magenta);
  border-radius:50%; min-width:18px; height:18px;
  font-size:11px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 3px;
  line-height:1;
}

/* ---- Generische Buttons (Legende/Preisauskunft schließen) ---- */
.btn{
  background:var(--medical-blue);
  font-family:'Barlow', Arial, sans-serif;
  border-radius:100px;
  padding:8px 16px;
  font-size:14px;
}
.btn:hover{ background:var(--magenta); }

/* ---- Info-/Legende-Flyouts als kompakte Karten ---- */
.container-informationen,
.container-fußnoten{
  max-width:var(--container-width);
  margin:1.25rem auto 0;
  padding:0 var(--gutter);
  box-sizing:border-box;
}
.kosten-container,
.fußnoten{
  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;
}
.kosten-container::before,
.fußnoten::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;
}
.kosten-container h1{
  font-family:'Barlow', Arial, sans-serif;
  color:var(--berry);
  font-weight:700;
  margin-bottom:0.5rem;
}
/* Fußnoten als ein durchlaufender Absatz mit "·"-Trennern statt vier
   getrennter Zeilen – DOM/Struktur bleibt unverändert (vier <div><p>),
   nur die Darstellung wird zu Fließtext. */
.fußnoten > div{ display:inline; }
.fußnoten > div p{ display:inline; font-size:13.5px; line-height:1.7; color:var(--gray-text); }
.fußnoten > div + div p::before{ content:" · "; color:var(--gray-soft); }
.fußnoten span{ color:var(--berry); font-weight:700; }

/* ---- Hauptbereich: zentrierter Container ---- */
.main-container{
  max-width:var(--container-width);
  margin:2rem auto 5rem;
  padding:0 var(--gutter);
  box-sizing:border-box;
  gap:32px;
  align-items:flex-start;
}
main{ margin-left:0; }

/* ---- Kategorie-Navigation (Desktop: Sidebar-Karte) ---- */
.nav-ul{
  background:#FFFFFF;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 12px 28px rgba(34,34,34,0.05);
  padding:10px;
  width:260px;
  box-sizing:border-box;
}
nav{ width:260px; flex-shrink:0; }

.category{
  background:transparent;
  color:var(--gray-text);
  font-family:'Barlow', Arial, sans-serif;
  font-weight:500;
  font-size:14.5px;
  line-height:1.35;
  border-radius:10px;
  border-left:3px solid transparent;
  padding:11px 13px;
}
.category + .category{ margin-top:2px; }
.category:hover{ background:#F7F8FC; }
.category.is-active{
  background:var(--lavender);
  color:var(--berry);
  font-weight:700;
  border-left:3px solid var(--berry);
}
.spanlegende{ color:inherit; font-weight:600; opacity:0.75; }

/* ---- Tabelle als helle Karte ---- */
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;
}

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; }

/* Preis-Spalte (3. Zelle) rechtsbündig & farblich hervorgehoben –
   rein strukturelle Auswahl, analysen.js vergibt hierfür keine eigene
   Klasse. */
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 img{ width:34px; height:34px; max-width:none; }
.cart:hover{ transform:scale(1.08); }

.back{ color:var(--medical-blue); font-weight:700; }
#div-back{ background:rgba(34,34,34,0.55); border-radius:10px 0 0 10px; }

tr a{ color:var(--medical-blue); font-weight:500; text-decoration:none; }

/* ---- Menü-Icon (altes Vollbild-Hamburger-Menü) – entfällt zugunsten des
   neuen Kategorie-Dropdowns, siehe analysen-theme.js. ---- */
.menu-icon{ display:none !important; }

/* ---- Info-Karte unter der Tabelle (dauerhaft sichtbar) ---- */
.an-legend-card{
  max-width:var(--container-width);
  margin:1.5rem auto 0;
  padding:0 var(--gutter);
  box-sizing:border-box;
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.an-legend-card > svg{
  flex-shrink:0;
  width:20px; height:20px;
  color:var(--medical-blue);
  margin-top:1.5rem;
}
.an-legend-card > div{
  flex:1;
  min-width:0;
  border:1.5px solid var(--line);
  border-radius:16px;
  padding:1.25rem 1.5rem;
  box-sizing:border-box;
}
.an-legend-card p{
  font-family:'Barlow', Arial, sans-serif;
  font-size:13px;
  color:var(--gray-soft);
  line-height:1.6;
  margin:0 0 6px;
}
.an-legend-card p:last-child{ margin-bottom:0; }
.an-legend-card strong{ color:var(--gray-150); }

/* ---- Footer ----
   Bewusst unverändert gegenüber der Live-Seite (clottenlab.de/analysen.html):
   kleiner, fixierter Balken mit den zwei bestehenden Links. Damit müssen
   datenschutz.html/impressum.html nicht mit angepasst werden. */

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

  .nav-header{ padding:1rem 1rem 0; gap:10px; }
  #search-container{ flex:1 1 100%; order:1; }
  #search{ padding:11px 18px 11px 44px; font-size:15px; }

  .category-dropdown-toggle{ display:flex; order:2; flex:1 1 auto; width:auto; }
  .shopping-cart-container{ order:3; }
  .shopping-cart-container a{ width:40px; height:40px; }

  .container-informationen,
  .container-fußnoten{ padding:0 1rem; margin-top:1rem; }
  .kosten-container,
  .fußnoten{ padding:1.25rem 1.25rem 1.25rem 3rem; font-size:14px; }
  .kosten-container h1{ font-size:19px; }

  .main-container{ display:block; padding:0 1rem; margin-top:1rem; }

  /* Sidebar wird zum schwebenden Dropdown-Panel unterhalb des Toggles */
  nav{ width:auto; flex-shrink:initial; }
  #category-nav{
    display:block;
    position:fixed;
    top:172px;
    left:1rem;
    right:1rem;
    z-index:60;
    max-height:0;
    opacity:0;
    pointer-events:none;
    overflow:hidden;
    transition:max-height .22s ease, opacity .18s ease;
  }
  #category-nav.nav-dropdown-open{
    max-height:min(60vh, 420px);
    opacity:1;
    pointer-events:auto;
    overflow-y:auto;
  }
  #category-nav .nav-ul{
    width:auto;
    box-shadow:0 20px 40px rgba(34,34,34,0.18);
  }

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

  /* Material-Spalte auf dem Smartphone ausblenden (wie im Mobile-Entwurf:
     dort nur Analysen A–Z / Preis / Auswahl). Rein optisch per nth-child –
     analysen.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; }

  .an-legend-card{ padding:0 1rem; margin-top:1.25rem; gap:10px; }
  .an-legend-card > svg{ margin-top:1.1rem; width:18px; height:18px; }
  .an-legend-card > div{ padding:1rem 1.1rem; border-radius:14px; }
  .an-legend-card p{ font-size:11.5px; }
}