/**********************************************************
 * Cassiopeia – user.css  (ohne Wrapper, nur Modulklassen)
 * - Bannerbild vollbreit
 * - Menü auf oranger Leiste, immer horizontal
 **********************************************************/

/* === Grundlook – zentral === */
:root{
  --bg:#fdf7ed;
  --brand:#003366;       /* Haupt-Text-/Linkfarbe (Blau) */
  --brand-dark:#00264d;  /* Hover für Links */
  --accent:#e89211;      /* Button-Orange */
  --accent-dark:#c97405; /* Button-Hover */
}

html{ font-size:17px; }
@media (min-width:768px){ html{ font-size:18px; } }

body{ background:var(--bg); color:var(--brand); line-height:1.7; }
h1,h2,h3,h4,h5,h6{ color:var(--brand); }

a{
  color:var(--brand);
  text-decoration:none;
  text-underline-offset:3px;
}
a:hover, a:focus{ color:var(--brand-dark); text-decoration:underline; }

/* Text in Karten konsequent blau */
.card, .card .card-body,
.card h1, .card h2, .card h3, .card p,
.card .card-title, .card .card-text,
.card a:not(.btn){
  color:var(--brand);
}

/* Buttons: ORANGE mit dunklem Text (auch wenn btn-warning/btn-primary verwendet wird) */
.btn, .btn-warning, .btn-primary{
  background:var(--accent) !important;
  border-color:var(--accent) !important;
  color:#111 !important;
}
.btn:hover, .btn-warning:hover, .btn-primary:hover{
  background:var(--accent-dark) !important;
  border-color:var(--accent-dark) !important;
  color:#000 !important;
}
/* angenehme Button-Größe in Karten */
.card .btn{ padding:.45rem .9rem; font-size:.95rem; border-radius:.6rem; }

/* Menü-Links auf dem orangen Balken bewusst dunkel lassen */
.container-header .mod-menu a{ color:#1a1a1a; }
/* Headerzeile vom Cassiopeia-Brand optional ausblenden */ .container-header{display:none} .site-grid{padding-top:0}
/* === Bannerbild-Modul (Modulklassensuffix: hero) === */
.moduletable.hero{
  background:transparent; border:0; box-shadow:none; padding:0; margin:0;
}
.moduletable.hero p{ margin:0; } /* falls der Editor <p> um das Bild setzt */
.moduletable.hero img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  object-fit:cover;  /* falls später feste Höhe gewünscht */
  border:0;
}

/* NICHT nutzen (würde Menü entfernen bzw. Layout verschieben):
   .container-header{display:none}
   .site-grid{padding-top:0}
*/

/* --- Menü-Modul (Modulklasse: menu-bar) ----------------------------- */
.moduletable.menu-bar{
  background:#F39C12;
  padding:10px 12px;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}

/* Menü horizontal & zentriert – egal welche Menüausgabe */
.moduletable.menu-bar .mod-menu,
.moduletable.menu-bar ul,
.moduletable.menu-bar .nav{
  display:flex !important;
  flex-direction:row !important;
  justify-content:center !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:18px !important;
  list-style:none;margin:0;padding:0;
}
/* Bootstrap „flex-column“ überstimmen */
.moduletable.menu-bar .flex-column{flex-direction:row !important}

.moduletable.menu-bar li{display:inline-block !important}
.moduletable.menu-bar a,
.moduletable.menu-bar .nav-link{
  display:block;
  color:#000 !important;
  font-weight:600;
  text-decoration:none;
  padding:8px 14px;
  border-radius:4px;
}
.moduletable.menu-bar a:hover,
.moduletable.menu-bar .nav-link:hover{background:rgba(0,0,0,.12)}
.moduletable.menu-bar .mod-menu .current > a,
.moduletable.menu-bar .mod-menu .active  > a{
  background:rgba(0,0,0,.14);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* Breadcrumbs dezent */
.breadcrumb{background:transparent;border:0;padding:10px 0 6px}
.breadcrumb .divider{color:#999}

/* --- Mobile-Feintuning ---------------------------------------------- */
@media (max-width:768px){
  /* Überschrift kompakter */
  h1{font-size:clamp(1.6rem,4.2vw + .9rem,2.1rem);line-height:1.25;margin:10px 0 14px}
  p{font-size:1.05rem;line-height:1.55;margin:0 0 14px}
}

/* Handy: Menü immer EINZEILIG, wischbar */
@media (max-width:420px){
  .moduletable.menu-bar .mod-menu{
    flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    gap:12px;padding:8px 8px;
    scrollbar-width:none;
  }
  .moduletable.menu-bar .mod-menu::-webkit-scrollbar{display:none}
  .moduletable.menu-bar a{white-space:nowrap;padding:8px 10px}
}
/* --- Menü auf orangener Leiste (robust) ----------------------------- */

/* Container einfärben – trifft .menu-bar mit oder ohne modulatable */
.menu-bar,
.moduletable.menu-bar{
  background:#F39C12;
  padding:10px 12px;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}

/* Menü horizontal und zentriert – egal welche Ausgabe */
.menu-bar .mod-menu,
.menu-bar ul,
.menu-bar .nav,
.moduletable.menu-bar .mod-menu,
.moduletable.menu-bar ul,
.moduletable.menu-bar .nav{
  display:flex !important;
  flex-direction:row !important;
  justify-content:center !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:18px !important;
  list-style:none; margin:0; padding:0;
}

/* Bootstrap-Fall „flex-column“ neutralisieren */
.menu-bar .flex-column,
.moduletable.menu-bar .flex-column{ flex-direction:row !important; }

.menu-bar li,
.moduletable.menu-bar li{ display:inline-block !important; }

.menu-bar a,
.menu-bar .nav-link,
.moduletable.menu-bar a,
.moduletable.menu-bar .nav-link{
  display:block;
  color:#000 !important;
  font-weight:600;
  text-decoration:none;
  padding:8px 14px;
  border-radius:4px;
}
.menu-bar a:hover,
.menu-bar .nav-link:hover,
.moduletable.menu-bar a:hover,
.moduletable.menu-bar .nav-link:hover{
  background:rgba(0,0,0,.12);
}

/* Handy: einzeilig & wischbar */
@media (max-width:420px){
  .menu-bar .mod-menu,
  .moduletable.menu-bar .mod-menu{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    gap:12px; padding:8px 8px;
    scrollbar-width:none;
  }
  .menu-bar .mod-menu::-webkit-scrollbar,
  .moduletable.menu-bar .mod-menu::-webkit-scrollbar{ display:none; }
  .menu-bar a,
  .moduletable.menu-bar a{ white-space:nowrap; padding:8px 10px; }
}
/* Banner-Grundsetup */
.hero-wrap{
  position:relative;
  width:100%;
  height:360px;           /* Desktophöhe */
  overflow:hidden;
}
.hero-wrap img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

/* Orangener Balken mit Menü */
.hero-nav{
  position:absolute;
  left:0; right:0; bottom:0;
  background:#F39C12;
  padding:10px 12px;
  z-index:10;
}
.hero-nav .mod-menu{
  display:flex !important;
  flex-direction:row !important;
  justify-content:center !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:18px !important;
  list-style:none; margin:0; padding:0;
}
.hero-nav .mod-menu a{
  color:#000 !important;
  font-weight:600;
  text-decoration:none;
  padding:8px 14px;
  border-radius:4px;
}
.hero-nav .mod-menu a:hover{ background:rgba(0,0,0,.12); }

/* Mobile */
@media (max-width:768px){
  .hero-wrap{ height:220px; }
}
@media (max-width:420px){
  .hero-nav .mod-menu{
    flex-wrap:nowrap;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    gap:12px; padding:8px 8px;
    scrollbar-width:none;
  }
  .hero-nav .mod-menu::-webkit-scrollbar{ display:none; }
  .hero-nav .mod-menu a{ white-space:nowrap; padding:8px 10px; }
}
/* ====== iPhone / Mobile Patches ====== */

/* 1) Safari soll Text nicht eigenmächtig vergrößern */
html { -webkit-text-size-adjust: 100%; }

/* 2) Bannerhöhe auf kleinen Screens flexibel und stabil */
@media (max-width: 600px){
  .hero-wrap{
    height: clamp(160px, 42vw, 220px);  /* passt sich der Breite an */
  }
}

/* 3) Menübalken: immer EINZEILIG + wischbar */
@media (max-width: 480px){
  .hero-nav{
    padding: 8px 8px;
    /* Notch/Safe-Area (z. B. iPhone) berücksichtigen */
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }

  .hero-nav .mod-menu{
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important; /* Start + Scroll wirkt verlässlicher als center */
    align-items: center !important;
    gap: 12px !important;

    flex-wrap: nowrap !important;   /* nie umbrechen */
    overflow-x: auto !important;    /* horizontal scrollen */
    -webkit-overflow-scrolling: touch; /* flüssiges Wischen */
    scrollbar-width: none;          /* Firefox: keine Scrollbar */
  }
  .hero-nav .mod-menu::-webkit-scrollbar{ display: none; }

  .hero-nav .mod-menu li{
    flex: 0 0 auto !important;      /* jedes Item behält seine Breite */
  }

  .hero-nav .mod-menu a{
    white-space: nowrap !important; /* kein Umbruch innerhalb des Links */
    font-size: 15px;                 /* etwas kleiner hilft zusätzlich */
    padding: 8px 10px;
    border-radius: 4px;
  }
}

/* 4) Extra-Target für iOS-WebKit (falls nötig, greift nur auf iOS) */
@supports (-webkit-touch-callout: none){
  .hero-nav .mod-menu{
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
  }
  .hero-nav .mod-menu a{
    white-space: nowrap !important;
  }
}
/* Menü immer über allen Bannern */
.container-header { position: relative; z-index: 1000; }

/* Banner nie über dem Menü – speziell dein Modulklassensuffix "hero-banner" */
.hero-banner { position: relative; z-index: 1; margin-top: 0; }

/* optional: nur auf "Über mich" etwas Abstand unter dem Menü geben
   XXX = Itemid der Seite "Über mich" (im Seiten-HTML oder in der URL sichtbar) */
.itemid-XXX .hero-banner { margin-top: 12px; }

/* saubere Bildausgabe im Banner-Modul */
.hero-banner img { display: block; width: 100%; height: auto; }
@media (max-width: 768px){
  .hero-banner img { max-height: 220px; object-fit: cover; }
}
/* Hauptmenü horizontal */
.mod-menu {
  display: flex;
  justify-content: center;
  gap: 40px; /* Abstand zwischen den Menüpunkten */
  list-style: none;
  padding: 0;
  margin: 0;
}

.mod-menu li {
  display: inline-block;
}

.mod-menu a {
  color: #000;
  font-weight: bold;
  text-decoration: none;
  padding: 8px 12px;
}

.mod-menu a:hover {
  text-decoration: underline;
}
/* Verhindert, dass ein Menü als Seitenliste im Content auftaucht */
.sidebar-left .mod-menu,
.container-main .mod-menu { display: none; }

/* Header-Menü im Balken sauber horizontal */
header .mod-menu { display: flex; gap: 40px; justify-content: center; list-style: none; margin: 0; padding: 0; }
header .mod-menu li { display: inline-block; }
/* Banner+Menü als eine Einheit */
.hero-with-menu { position: relative; overflow: hidden; }
.hero-with-menu img { display:block; width:100%; height:auto; }

/* Menü als orange Leiste unten auf dem Banner */
.hero-with-menu .mod-menu {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex; justify-content: center; gap: 40px;
  list-style: none; margin: 0; padding: 10px 16px;
  background: #e89211; /* dein Orange */
}

/* Links im Balken */
.hero-with-menu .mod-menu li { display: inline-block; }
.hero-with-menu .mod-menu a { color:#000; font-weight:700; text-decoration:none; }
.hero-with-menu .mod-menu a:hover { text-decoration: underline; }

/* Mobil etwas dichter */
@media (max-width: 768px){
  .hero-with-menu .mod-menu { gap: 18px; padding: 8px 12px; }
}
/* Banner mit eingebettetem Menü */
.hero-with-menu {
  position: relative;
  overflow: hidden;
}

.hero-with-menu img {
  display: block;
  width: 100%;
  height: auto;
}

/* Menüleisten-Styling */
.hero-with-menu .mod-menu {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 12px 16px;
  background: #e89211; /* dein Orange */
}

.hero-with-menu .mod-menu li {
  display: inline-block;
}

.hero-with-menu .mod-menu a {
  color: #000;
  font-weight: 700;
  text-decoration: none;
}

.hero-with-menu .mod-menu a:hover {
  text-decoration: underline;
}

/* Für Mobilgeräte enger */
@media (max-width: 768px) {
  .hero-with-menu .mod-menu {
    gap: 18px;
    padding: 8px 12px;
  }
}
/* --- Banner-Grundlayout --- */
.hero-with-menu { position: relative; overflow: hidden; min-height: 350px; }
.hero-with-menu img { display:block; width:100%; height:auto; }

/* --- Menücontainer, egal welche Hülle Joomla verwendet --- */
.hero-with-menu .moduletable.in-hero,
.hero-with-menu nav.in-hero,
.hero-with-menu .in-hero {
  position: absolute !important;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  background: #e89211;         /* orange Balken */
  padding: 12px 16px;
}

/* --- UL der Menüeinträge sicher treffen --- */
.hero-with-menu .in-hero ul.mod-menu,
.hero-with-menu .in-hero ul.mod-list {
  display: flex !important;
  justify-content: center;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Einträge & Links */
.hero-with-menu .in-hero ul.mod-menu > li,
.hero-with-menu .in-hero ul.mod-list > li { display: inline-block; }

.hero-with-menu .in-hero a {
  color: #000 !important;
  font-weight: 700;
  text-decoration: none;
}
.hero-with-menu .in-hero a:hover { text-decoration: underline; }

/* Falls irgendwo noch eine zweite Menüliste im Inhalt auftaucht: verstecken */
.container-main .mod-menu,
.sidebar-left  .mod-menu,
.sidebar-right .mod-menu { display: none !important; }

/* Mobil enger */
@media (max-width: 768px){
  .hero-with-menu .in-hero ul.mod-menu,
  .hero-with-menu .in-hero ul.mod-list { gap: 18px; }
  .hero-with-menu .moduletable.in-hero,
  .hero-with-menu nav.in-hero,
  .hero-with-menu .in-hero { padding: 8px 12px; }
}
/* --- EINZEILIG auf kleinen Screens: Banner-Menü --- */
@media (max-width: 768px){
  .hero-with-menu .menu-bar { 
    overflow-x: auto;          /* Scrollen erlauben */
    -webkit-overflow-scrolling: touch; 
  }
  .hero-with-menu .menu-bar ul{
    flex-wrap: nowrap !important;  /* NIE umbrechen */
    gap: 16px;                      /* engerer Abstand */
  }
  .hero-with-menu .menu-bar li{ flex: 0 0 auto; }
  .hero-with-menu .menu-bar a{ font-size: 15px; padding: 6px 4px; }
}
@media (max-width: 420px){
  .hero-with-menu .menu-bar ul{ gap: 12px; }
  .hero-with-menu .menu-bar a{ font-size: 14px; }
}

/* Falls du irgendwo (Startseite o.ä.) das Header-Menü nutzt, gleich mit fixen: */
@media (max-width: 768px){
  .container-header .mod-menu{
    display: flex; 
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
  }
  .container-header .mod-menu > li{ flex: 0 0 auto; }
  .container-header .mod-menu a{ font-size: 15px; padding: 6px 4px; }
}
@media (max-width: 420px){
  .container-header .mod-menu a{ font-size: 14px; }
}
/* 1) Alles an der Nahtstelle bündig, keine Deko/Linien */
.hero-with-menu,
.hero-with-menu .menu-bar {
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
.hero-with-menu::before,
.hero-with-menu::after,
.hero-with-menu .menu-bar::before,
.hero-with-menu .menu-bar::after {
  content: none !important;
}

/* 2) Spalt hart schließen (falls das Template irgendwo 1px lässt) */
.hero-with-menu { margin-bottom: -1px; }          /* Desktop */
@media (max-width: 768px) {
  .hero-with-menu { margin-bottom: -4px; }        /* Mobil: größerer Versatz */
}

/* 3) Falls die Linie aus dem Content kommt (Sicherheitsgurt) */
.container-component, 
.container-component * {
  border-top: 0 !important;
  box-shadow: none !important;
}
/* --- Banner-Modul (Wrapper) ohne Deko-Linien und ohne Zusatzabstände --- */
.moduletable.hero-banner {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Cassiopeia trennt Module mit Linien via ::before/::after – hier aus */
.moduletable.hero-banner::before,
.moduletable.hero-banner::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
}

/* Nahtstelle Bild ↔︎ Balken absolut bündig */
.hero-with-menu { margin: 0 !important; }
.hero-with-menu img { display:block; width:100%; height:auto; object-fit:cover; }
.hero-with-menu .menu-bar { margin:0 !important; border:0 !important; box-shadow:none !important; }

/* Auf Mobil baut Cassiopeia oft extra Abstand ein – hart schließen */
@media (max-width: 768px){
  .moduletable.hero-banner { margin: 0 !important; padding: 0 !important; }
  .hero-with-menu { margin-bottom: -1px; } /* falls noch 1px „Haarkante“ bleibt */
}
/* --- Banner-/Modul-Wrapper: alle Deko + Abstände AUS --- */
.container-banner,
.container-banner .mod-custom.custom,
#mod-custom111 {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.container-banner::before,
.container-banner::after,
.container-banner .mod-custom.custom::before,
.container-banner .mod-custom.custom::after,
#mod-custom111::before,
#mod-custom111::after {
  content: none !important;
  display: none !important;
}

/* --- Nahtstelle Bild ↔ Menü bündig & ggf. leicht überlappend schließen --- */
.hero-with-menu { line-height: 0; margin: 0 !important; }
.hero-with-menu img { display:block; width:100%; height:350px; object-fit:cover; z-index:1; }

.hero-with-menu .menu-bar {
  position: absolute;
  left: 0; right: 0; bottom: -1px;   /* -1px schließt Haarlinie */
  background: #e89211;
  padding: 12px 16px;
  z-index: 2;
}

/* Mobil haben die Wrapper oft mehr „Luft“ – hier noch enger schließen */
@media (max-width: 768px){
  .hero-with-menu .menu-bar { bottom: -3px; }
  .container-banner,
  .container-banner .mod-custom.custom,
  #mod-custom111 { margin:0 !important; padding:0 !important; }
}

/* --- Sicherheit: keine Linie/Abstand am Folge-Element unter dem Banner --- */
.container-banner + .container-component {
  margin-top: 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;
}

/* (falls dein Menü mobil zweizeilig wurde, hiermit bleibt es einzeilig + scrollbar) */
@media (max-width: 768px){
  .hero-with-menu .menu-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .hero-with-menu .menu-bar ul { flex-wrap: nowrap !important; gap: 16px; }
  .hero-with-menu .menu-bar li { flex: 0 0 auto; }
}
/* --- Menü-Balken feintunen --- */
.hero-with-menu .menu-bar {
  /* kleiner Schatten unter dem orangenen Balken (Gimmick) */
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* weiche Schatten-Fahne nach unten (optional, sieht edel aus) */
.hero-with-menu .menu-bar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -10px;
  height: 10px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0.18), rgba(0,0,0,0));
}

/* Mobil-Layout: schmaler, einzeilig, wischbar */
@media (max-width: 768px){
  .hero-with-menu img { height: 260px; object-fit: cover; }

  .hero-with-menu .menu-bar {
    padding: 8px 10px;
    bottom: -2px;                 /* schließt die Naht am Bild */
    overflow-x: auto;             /* horizontales Wischen */
    -webkit-overflow-scrolling: touch;
  }

  .hero-with-menu .menu-bar ul{
    flex-wrap: nowrap !important; /* NIE umbrechen -> kein Zweizeiler */
    gap: 16px;                     /* engerer Abstand */
  }

  .hero-with-menu .menu-bar li { flex: 0 0 auto; }
  .hero-with-menu .menu-bar a  { font-size: 15px; padding: 6px 4px; }

  /* Scrollbar ausblenden (iOS/Android) */
  .hero-with-menu .menu-bar::-webkit-scrollbar { display: none; }
  .hero-with-menu .menu-bar { scrollbar-width: none; }
}

/* ganz kleine Screens noch kompakter */
@media (max-width: 420px){
  .hero-with-menu .menu-bar ul{ gap: 12px; }
  .hero-with-menu .menu-bar a { font-size: 14px; }
}
/* --- Banner-Container: KEINE Mindesthöhe erzwingen --- */
.hero-with-menu { 
  position: relative; 
  overflow: hidden; 
  min-height: 0 !important;   /* <- Spalt-Verursacher neutralisiert */
  margin: 0 !important;
  line-height: 0;
}

/* Bild standardmäßig ohne feste Höhe, füllt die Breite */
.hero-with-menu img {
  display: block;
  width: 100%;
  height: auto !important;     /* überschreibt HTML height="350" */
  object-fit: cover;
  z-index: 1;
}

/* Desktop: gewünschte Bannerhöhe */
@media (min-width: 992px){
  .hero-with-menu img { height: 350px !important; }
}

/* Handy/Tablet: etwas kompakter */
@media (max-width: 768px){
  .hero-with-menu img { height: 260px !important; }
}

/* Menü-Balken bleibt am Bild „kleben“ (+ dezenter Schatten) */
.hero-with-menu .menu-bar {
  position: absolute;
  left: 0; right: 0;
  bottom: -1px;                        /* Haarlinie schließen */
  background: #e89211;
  padding: 12px 16px;
  z-index: 2;
  box-shadow: 0 6px 12px rgba(0,0,0,.15);
}
.hero-with-menu .menu-bar::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-10px; height:10px;
  background: linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,0));
  pointer-events:none;
}

/* Mobil: einzeilig & wischbar (kein Zweizeiler mehr) */
@media (max-width: 768px){
  .hero-with-menu .menu-bar {
    padding: 8px 10px;
    bottom: -2px;                                  /* bündig zum Bild */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .hero-with-menu .menu-bar ul{
    display:flex !important;
    flex-wrap: nowrap !important;                  /* NIE umbrechen */
    gap: 16px;
    list-style:none; margin:0; padding:0;
  }
  .hero-with-menu .menu-bar li{ flex:0 0 auto; }
  .hero-with-menu .menu-bar a{ font-size:15px; padding:6px 4px; }
  .hero-with-menu .menu-bar::-webkit-scrollbar{ display:none; }
  .hero-with-menu .menu-bar{ scrollbar-width: none; }
}

/* ganz kleine Screens noch etwas enger */
@media (max-width: 420px){
  .hero-with-menu .menu-bar ul{ gap: 12px; }
  .hero-with-menu .menu-bar a{ font-size: 14px; }
}
/* === Patch: Karten-Blau + Buttons Orange === */
:root{
  --brand:#003366;         /* Blau für Text */
  --brand-dark:#00264d;
  --accent:#e89211;        /* Orange für Buttons */
  --accent-dark:#c97405;
}

/* Text IN den Karten konsequent blau */
.card, .card .card-body,
.card h1, .card h2, .card h3, .card p,
.card .card-title, .card .card-text,
.card a:not(.btn){
  color: var(--brand) !important;
}
.card a:not(.btn):hover{ color: var(--brand-dark) !important; }

/* Buttons: Orange mit schwarzem Text (auch im Hover) */
.btn, .btn-primary, .btn-warning{
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #111 !important;
}
.btn:hover, .btn-primary:hover, .btn-warning:hover{
  background: var(--accent-dark) !important;
  border-color: var(--accent-dark) !important;
  color: #000 !important;
}
/* angenehme Button-Größe in Karten */
.card .btn{ padding:.45rem .9rem; font-size:.95rem; border-radius:.6rem; }
/* === MIH-Tabelle – Variante B (Studien-Spalte als Kasten + Zeilenabstand) === */
.table-scroll{ overflow-x: auto; }

.mih-table{
  width: 100%;
  border-collapse: separate;   /* runde Ecken ermöglichen */
  border-spacing: 0 10px;      /* Zeilenabstand */
  color: var(--brand, #003366);
}

.mih-table thead th{
  padding: 12px 14px;
  font-weight: 800;
  border-bottom: 4px solid var(--brand, #003366);
}

.mih-table tbody th,
.mih-table tbody td{
  padding: 12px 14px;
  vertical-align: top;
  background: transparent;     /* Zebra aus */
}

/* Abschnittsüberschriften (z. B. pränatal / perinatal) */
.mih-table .group th{
  background: transparent;
  font-weight: 700;
  text-align: left;
  padding: 16px 14px 4px;
}

/* Spalte 2 (Studien) als „Kasten“ */
.mih-table tbody td:nth-child(2){
  background: rgba(0,51,102,.06);
  border: 1px solid rgba(0,51,102,.18);
  border-radius: 12px;
  padding: 10px 12px;          /* innen etwas kompakter */
}

/* Listen in der Box ohne Punkte/Abstände */
.mih-table .list-plain{ list-style: none; margin: 0; padding: 0; }
.mih-table .list-plain li{ margin: 0 0 2px 0; }

/* „Risiko“ nicht umbrechen */
.mih-table td:last-child{ white-space: nowrap; }

/* Mobile: etwas geringerer Zeilenabstand & Padding */
@media (max-width: 600px){
  .mih-table{ border-spacing: 0 6px; }
  .mih-table thead th,
  .mih-table tbody th,
  .mih-table tbody td{ padding: 10px 12px; }
}
/* === Tooltips für Literaturverweise (ohne JS) — CLEAN === */
.mih-table td, .mih-table th { position: relative; overflow: visible; }

.mih-table .tip{
  position: relative;
  cursor: help;
  color: #0f3458;
  text-decoration: none;
  border-bottom: 1px dotted rgba(15,52,88,.5);
  outline: none;
}

/* Box (Standard: zentriert über dem Link) */
.mih-table .tip::after{
  content: attr(data-tip);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translate(-50%, 8px);
  background:#fff; color:#0f3458;
  border:1px solid rgba(0,51,102,.25);
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  border-radius:8px;
  padding:10px 12px;
  width:max-content; max-width:36rem;
  white-space: normal;
  opacity:0; pointer-events:none; z-index:1000;
  transition: opacity .15s ease, transform .15s ease;
}

/* Pfeil (Standard, zentriert) */
.mih-table .tip::before{
  content:"";
  position:absolute;
  bottom:120%;
  left:50%;
  transform: translateX(-50%);
  width:0; height:0;
  border:8px solid transparent;
  border-top-color:#fff;
  filter: drop-shadow(0 -1px 0 rgba(0,51,102,.15));
  opacity:0; transition: opacity .15s ease;
}

/* Sichtbar schalten – OHNE transform zurückzusetzen */
.mih-table .tip:hover::after,
.mih-table .tip:focus::after,
.mih-table .tip:hover::before,
.mih-table .tip:focus::before{
  opacity:1;
}

/* Nur für NICHT letzte Spalte: nach oben „einrasten“ (zentriert) */
.mih-table td:not(:last-child) .tip:hover::after,
.mih-table th:not(:last-child) .tip:hover::after{
  transform: translate(-50%, 0);
}

/* Letzte Spalte: an rechte Zellkante andocken */
.mih-table td:last-child .tip::after,
.mih-table th:last-child .tip::after{
  left:auto; right:0;
  transform: translate(0, 8px);
}
.mih-table td:last-child .tip:hover::after,
.mih-table th:last-child .tip:hover::after{
  transform: translate(0, 0);
}

/* Pfeil in letzter Spalte nach rechts versetzen */
.mih-table td:last-child .tip::before,
.mih-table th:last-child .tip::before{
  left:auto; right:12px; transform:none;
}

/* Mobil: nie breiter als der Viewport */
@media (max-width: 600px){
  .mih-table .tip::after{ max-width: 90vw; }
}
 /* <-- fehlende Klammer ergänzt */

/* Anzeigen bei Hover/Fokus – nur Sichtbarkeit, keine Position überschreiben */
.mih-table .tip:hover::after,
.mih-table .tip:focus::after,
.mih-table .tip:hover::before,
.mih-table .tip:focus::before{
  opacity: 1;
}

/* Zentrier-Verschiebung nur für NICHT letzte Spalte */
.mih-table td:not(:last-child) .tip:hover::after,
.mih-table th:not(:last-child) .tip:hover::after{
  transform: translate(-50%, 0);
}

  
/* === Tabelle als Karte mit Schatten / 3D-Effekt === */
.table-card {
  background: #fffaf1;                         /* zartes Creme */
  border: 1px solid rgba(0,51,102,.12);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.07);
  padding: 12px;
  margin: 18px 0 26px;
}

/* Scrollcontainer bleibt hübsch in der Karte */
.table-card .table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;     /* weiche Ecken fürs Scrolling */
}

/* Optional: zarter Glanz oben (ganz subtil) */
.table-card::before {
  content: "";
  display: block;
  height: 10px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(to bottom, rgba(255,255,255,.6), rgba(255,255,255,0));
}

/* Studien-Spalte leicht hervorheben (2. Spalte) */
.mih-table tbody td:nth-child(2) {
  background: rgba(0,51,102,.055);
  border: 1px solid rgba(0,51,102,.16);
}

/* Hinweisbox für Anmerkungen */
.critical-note {
  margin: 1em 0;
  padding: 10px 14px;
  background: #f9fbff;
  border-left: 4px solid #d02f2f;
  border-radius: 6px;
  font-size: 15px;
  line-height: 1.5;
  color: #0f3458;
}
.critical-note img.emoji {
  width: 20px; height: 20px; object-fit: contain;
  margin-right: 6px; vertical-align: -4px;
}