/* =========================================
   Grundlayout & Typografie
========================================= */
html, body { background:#fff !important; margin:0; padding:0; }
body {
  font-family: Arial, sans-serif;
  color:#4b4d4d;
}
p { font-size:1.125rem; line-height:1.6; }
h1 { color:#372c1f; padding:10px 0; margin:0; letter-spacing: 0.05em;  }
h2 { color:#b9cf19; padding:0 0 20px 0; margin:0; letter-spacing: 0.05em;  }
h3 { color:#372c1f; text-transform:uppercase; letter-spacing:.05em; margin:0; }

/* =========================================
   Container & Layout – volle Breite, kein Rand
========================================= */
.container-main,
.container,
.wrapper,
.page,
#content,
.content {
  max-width:100% !important;
  width:100% !important;
  margin:0 auto !important;
  padding-left:0 !important;
  padding-right:0 !important;
  background:#fff !important;
  border:0 !important;
  box-shadow:none !important;
}
.container-main { padding-top:0 !important; padding-bottom:0 !important; }

.row { display:flex; gap:20px; }
.col-70 { width:70%; }
.col-30 { width:30%; padding:0 20px; }

/* =========================================
   Formulare / Cards / Tabellen
========================================= */
.card { border:1px solid #ccc; border-radius:8px; margin-bottom:1.5rem; background:#fff; }
.card-header { font-weight:bold; padding:10px 15px; border-bottom:1px solid #ccc; }
.card-body { padding:10px !important; }

.bg-secondary { background:#4b4d4d !important; color:#fff; }
.bg-success   { background:#b9cf19 !important; color:#4b4d4d; }

input[type="text"], input[type="email"], input[type="password"], input[type="date"],
select, textarea {
  width:100%; padding:.6rem .8rem; margin:0 0 .8rem 0;
  border:1px solid #ccc; border-radius:.375rem; font-size:1rem; box-sizing:border-box;
  transition:border-color .2s ease-in-out, box-shadow .2s ease-in-out;
}
input:focus, select:focus, textarea:focus {
  outline:none; border-color:#66afe9; box-shadow:0 0 0 .1rem rgba(102,175,233,.6);
}
.form-check-input { width:1.3em; height:1.3em; border-radius:.35em; border:1px solid #888; margin-right:10px; }

.form-section {
  margin-bottom:30px; padding:20px; background:#fff;
  border:2px solid #b9cf19; border-radius:8px;
}
.form-section h4 { margin-bottom:15px; color:#4b4d4d; border-bottom:1px solid #ccc; padding-bottom:5px; }

.checkbox-grid { column-count:2; column-gap:40px; }
.checkbox-grid label { display:block; margin-bottom:10px; font-size:1rem; }
.checkbox-grid input[type="checkbox"] { transform:scale(1.3); margin-right:8px; accent-color:#b9cf19; }

.form-check-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:20px; }

.krankheiten-tabelle { display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
.krankheit-eintrag { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #ccc; padding:6px 0; }
.krankheit-name { flex:1; font-weight:500; color:#4b4d4d; }

.checkbox-paar { display:flex; gap:20px; }
.checkbox-paar input[type="checkbox"] { transform:scale(1.2); margin-right:6px; accent-color:#b9cf19; }

.btn-primary { background:#4b4d4d; border-color:#4b4d4d; color:#fff; padding:10px 18px; font-size:16px; border-radius:4px; border:0; }
button, button[type="submit"] { padding:.6rem 1.2rem; font-size:1rem; border:0; border-radius:.375rem; cursor:pointer; }
button[type="submit"] { background:#007bff; color:#fff; }
button[type="submit"]:hover { background:#0069d9; }

.table td, .table th { border:1px solid #ccc; }
table th, table td { padding-top:10px; padding-bottom:10px; }

a { color:#b9cf19; text-decoration:none; }
.link-muted { color:#666; text-decoration:none; }
.breadcrumbs { font-size:.9rem; color:#666; text-transform:lowercase; margin:0 0 1rem 0; }
.page-title { font-size:2rem; margin:0 0 1rem 0; }
.section-title { font-size:1.5rem; margin:1.5rem 0 .75rem; }
.bodytext { font-size:1.1rem; line-height:1.6; color:#333; }

/* Listen */
.custom-list { list-style-type:square; list-style-position:inside; margin:2rem 0; padding:0; }
.custom-list li { margin-bottom:.9rem; font-weight:normal; color:#333; font-size:1.2rem; }
.custom-list li::marker { color:#b9cf19; }

.highlight-box { background:#e9e7e7; border-radius:10px; padding:2rem; margin-bottom:1.5rem; max-width:90%; }
.highlight-box .custom-list li { color:#333; }
.highlight-box .custom-list li::marker { color:#b9cf19; }
.highlight-box .section-title { margin-bottom:1rem; }

.col-30 .card { background:#f5f5f5; }

/* Buttons grün */
.btn-success, .btn-success2 {
  display:block; text-align:center;
  background:#b9cf19 !important; color:#4b4d4d !important;
  padding:.6rem 1.2rem; border-radius:.375rem;
  transition:background-color .2s ease, color .2s ease;
}
.btn-success { width:90%; }
.btn-success2 { width:30%; margin-left:20px; }
.btn-success:hover, .btn-success2:hover { background:#4b4d4d !important; color:#fff !important; }
.btn-success.active, .btn-success2.active { background:#4b4d4d !important; color:#fff !important; }

/* =========================================
   Header – full-bleed braun (behält dein Setup)
========================================= */
:root { --header-bg:#3f3b39; }

header, .site-header, .navbar, [class*="header"], [id*="header"], [id*="topbar"] {
  position:relative !important;
  background:transparent !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  z-index:10;
}
header::before, .site-header::before, .navbar::before,
[class*="header"]::before, [id*="header"]::before, [id*="topbar"]::before {
  content:"";
  position:absolute; inset:0;
  left:50%; margin-left:-50vw; width:100vw;
  background:var(--header-bg);
  z-index:-1;
}
header + *, .site-header + *, .navbar + *,
[class*="header"] + *, [id*="header"] + *, [id*="topbar"] + * {
  margin-top:0 !important; padding-top:0 !important; border-top:0 !important;
}

/* =========================================
   Footer – full-bleed braun OHNE ::before (robust)
========================================= */
/* =========================================
   Footer – full-bleed braun (wie Header), Inhalt zentriert
   (nur Footer, alles andere unverändert lassen)
========================================= */
footer, .site-footer, .footer, [class*="footer"] {
  position: relative !important;
  background: transparent !important;  /* Hintergrund kommt via ::before */
  color: #fff !important;
  margin: 0 !important;
  border: 0 !important;
  padding: 24px 0 !important;
  box-shadow: none !important;

  /* alte 100vw/left:50%-Hacks neutralisieren */
  width: auto !important;
  left: auto !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;

  z-index: 5;
}

/* Full-bleed Hintergrund über die gesamte Seitenbreite (wie beim Header) */
footer::before, .site-footer::before, .footer::before, [class*="footer"]::before {
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  background: #3f3b39; /* gleiche Farbe wie Header */
  z-index: -1;
}

/* Footer-Inhalt zentrieren – egal wie das Markup innen heißt */
footer > .container,
footer > .container-main,
footer > .wrapper,
footer > .content,
footer > .page,
footer > div {
  max-width: 94%;
  margin: 0 auto;
  background: transparent !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Links im Footer gut lesbar */
footer a, .site-footer a, .footer a, [class*="footer"] a {
  color: #ffffff !important;
  text-decoration: none;
}
footer a:hover, .site-footer a:hover, .footer a:hover, [class*="footer"] a:hover {
  text-decoration: underline;
}


/* =========================================
   „Brauner Streifen“ im Content entfernen
========================================= */
/* harte Kills: horizontale Leisten/Divider/Promo-Strips */
hr,
.divider, .headline-bar, .promo-strip, .tagline-strip, .slogan-strip, .strip,
.container-main hr,
.container-main .divider,
.container-main .headline-bar,
.container-main .promo-strip,
.container-main .tagline-strip,
.container-main .slogan-strip,
.container-main .banner,
.container-main .strip,
.container-main .tagline,
.container-main .headline,
.container-main .promo {
  display:none !important;
}
/* pseudo-Leisten an Headlines ausschalten */
h1::before, h1::after,
h2::before, h2::after,
h3::before, h3::after,
.section-title::before, .section-title::after,
.page-title::before, .page-title::after,
.container-main h1::before, .container-main h1::after,
.container-main h2::before, .container-main h2::after,
.container-main h3::before, .container-main h3::after,
.container-main .section-title::before, .container-main .section-title::after {
  content:none !important;
}
/* absolut positionierte Balken im Content deaktivieren */
.container-main [style*="position:absolute"][style*="height:"],
.container-main [class*="bar"][style*="height:"],
.container-main [class*="line"][style*="height:"] {
  display:none !important;
}

/* =========================================
   Diashow – randlos, cover, max 700px
========================================= */
/* Hero-Diashow, randlos und max 700px hoch (unverändert) */
.hero-diashow.full-bleed { overflow: hidden; max-height: 700px; }
.hero-diashow__stage {
  width: 100%;
  height: clamp(300px, 50vh, 700px);
  position: relative;
  overflow: hidden;
}

/* Wir arbeiten mit zwei übereinanderliegenden <img> für butterweiche Übergänge */
.hero-diashow__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;                    /* Start: unsichtbar */
  transition:
    opacity 900ms ease,
    transform 900ms ease;        /* für Slide & KenBurns */
  will-change: opacity, transform;
}

/* Sichtbare Ebene */
.hero-diashow__img.is-active { opacity: 1; }

/* ===== Effekte ===== */

/* FADE: nur Opacity (Standard) */
/* (kein extra CSS nötig, .is-active reicht) */

/* SLIDE: hereinschieben von rechts */
.effect-slide .hero-diashow__img { transform: translateX(100%); }
.effect-slide .hero-diashow__img.is-active { transform: translateX(0); }
/* das alte Bild schiebt nach links raus */
.effect-slide .hero-diashow__img.is-leaving { transform: translateX(-100%); opacity: 0; }

/* KEN BURNS: sanfter Zoom/Pan pro Bild */
.effect-kenburns .hero-diashow__img { transform: scale(1.02); }
.effect-kenburns .hero-diashow__img.is-active { transform: scale(1.08); }

/* Respektiere Nutzer, die Animationen reduzieren möchten */
@media (prefers-reduced-motion: reduce) {
  .hero-diashow__img { transition: none; }
}


/* =========================================
   Sonstiges
========================================= */
.message-unread { font-weight:bold; }
.message-read { color:#999; }
.message-read a, .message-read a:link, .message-read a:visited { color:#999 !important; }
.message-read td { color:#999; }

/* === Patch nur für die 2-Spalten-Sektion === */

/* 1) Abstand zwischen den Spalten verdoppeln */
.twocol { 
  gap: 40px !important;           /* Flex-Gap */
  column-gap: 40px !important;    /* Fallback */
}

/* 2) Graue Rahmen/Vertikallinien an/um die Spalten sicher entfernen */
.twocol > * {
  border: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background-image: none !important;
}
.twocol > *::before,
.twocol > *::after {
  content: none !important;
}

/* Falls die Linien vom umgebenden Wrapper kommen (nur in der twocol-Zone neutralisieren) */
/* === Rahmen um die 2-Spalten-Sektion entfernen (nur der äußere Wrapper) === */
.container-main :is(.card, .box, .panel, .section, .content, .wrapper, .block, div, article, section):has(> .twocol) {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  background-image: none !important; /* falls Linien als BG gesetzt wurden */
}

/* Pseudo-Linien des Wrappers sicher deaktivieren */
.container-main :is(.card, .box, .panel, .section, .content, .wrapper, .block, div, article, section):has(> .twocol)::before,
.container-main :is(.card, .box, .panel, .section, .content, .wrapper, .block, div, article, section):has(> .twocol)::after {
  content: none !important;
}
/* A) ÄUSSERER RAHMEN um die 2-Spalten-Sektion entfernen (Card/Box/Panel/Div) */
:is(.card, .box, .panel, .section, .content, .wrapper, .block, div, article, section):has(.twocol) {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  background-image: none !important;
}
:is(.card, .box, .panel, .section, .content, .wrapper, .block, div, article, section):has(.twocol)::before,
:is(.card, .box, .panel, .section, .content, .wrapper, .block, div, article, section):has(.twocol)::after {
  content: none !important;
}

/* B) TABELLEN-LINIEN innerhalb der 2-Spalten-Sektion abschalten */
.twocol table,
.twocol .table,
.twocol table td,
.twocol table th,
.twocol .table td,
.twocol .table th {
  border: 0 !important;
  box-shadow: none !important;
}

/* C) Falls die beiden Spalten selbst als <td> verwendet werden */
.twocol td, .twocol th {
  border: 0 !important;
}

/* D) Sicherheit: keine vertikale Linien via BG/Gradient in der twocol */
.twocol, .twocol > * {
  background-image: none !important;
  box-shadow: none !important;
}
/* ===============================
   FIX 1: "Brauner Balken" nur am echten Header erlauben
   (zu breite Selektoren einschränken)
=============================== */

/* Statt [class*="header"] / [id*="header"] NUR diese Header-Elemente behandeln */
header, .site-header, .navbar, #topbar {
  position: relative !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  z-index: 10;
}
header::before, .site-header::before, .navbar::before, #topbar::before {
  content: "";
  position: absolute; inset: 0;
  left: 50%; margin-left: -50vw; width: 100vw;
  background: var(--header-bg);
  z-index: -1;
}

/* Alles, was NICHT echter Header ist, explizit vor braunem ::before schützen */
:not(header):not(.site-header):not(.navbar):not(#topbar)[class*="header"]::before,
:not(header):not(.site-header):not(.navbar):not(#topbar)[id*="header"]::before {
  content: none !important;
  background: none !important;
}

/* ===============================
   FIX 2: Nur der Wrapper um die 2-Spalten-Row wird entrahmt
   (wenn eine .row mit .col-70 und .col-30 enthalten ist)
=============================== */

/* 2a) Elterncontainer der typischen 70/30-Row entrahmen */
:where(main, #main, .main, .container-main, #content, .content, .page)
  :is(section, article, div, .card, .panel, .box, .wrapper)
  :has(> .row:has(> .col-70):has(> .col-30)) {
  border: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* 2b) Pseudo-Elemente dieses Containers ebenfalls ausschalten */
:where(main, #main, .main, .container-main, #content, .content, .page)
  :is(section, article, div, .card, .panel, .box, .wrapper)
  :has(> .row:has(> .col-70):has(> .col-30))::before,
:where(main, #main, .main, .container-main, #content, .content, .page)
  :is(section, article, div, .card, .panel, .box, .wrapper)
  :has(> .row:has(> .col-70):has(> .col-30))::after {
  content: none !important;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* 2c) NUR in dieser 70/30-Row auch Tabellen-/Card-Ränder abschalten */
:where(main, #main, .main, .container-main, #content, .content, .page)
  :has(> .row:has(> .col-70):has(> .col-30))
  :is(.table, table, .card, .card-header, th, td) {
  border: 0 !important;
  box-shadow: none !important;
}

/* ===============================
   FIX 3: Global verlorene Standardrahmen wiederherstellen
   (falls ein vorheriger "harte Entrahmung"-Block zu viel entfernte)
=============================== */
.card { border: 1px solid #ccc !important; }
.card-header { border-bottom: 1px solid #ccc !important; }
.table td, .table th { border: 1px solid #ccc !important; }

/* =========================================================
   NEU (GLOBAL): seitliche Schatten/Ränder an Seiten-Containern entfernen
   – gilt für ALLE Seiten, lässt Cards/Tabellen unangetastet
========================================================= */
:where(main, #main, .main, .container-main, .container, .wrapper, .page, #content, .content) {
  box-shadow: none !important;
  border-left: 0 !important;
  border-right: 0 !important;
  background-image: none !important;
  outline: 0 !important;
}

/* Pseudo-Elemente GENAU dieser Seiten-Container neutralisieren (nicht Header/Footer) */
:where(main, #main, .main, .container-main, .container, .wrapper, .page, #content, .content)::before,
:where(main, #main, .main, .container-main, .container, .wrapper, .page, #content, .content)::after {
  content: none !important;
  box-shadow: none !important;
  border: 0 !important;
  background: none !important;
}

/* Scrollbalken-Artefakte vermeiden */
html, body { overflow-x: hidden; }
/* === Schatten vom (Page-)Container entfernen, sonst nichts === */

/* beide Schreibweisen absichern: "page-container" & Tippfehler "page-cotainer" */
body > .page-container,
body > #page-container,
body > .page-cotainer,
body > #page-cotainer,
.wrapper > .page-container,
.wrapper > #page-container,
.container-main > .page-container,
.container-main > #page-container,
[class*="page-container"],
[id*="page-container"],
[class*="page-cotainer"],
[id*="page-cotainer"],
#page, .page-wrapper {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  border-left: 0 !important;
  border-right: 0 !important;
  background-image: none !important;
}

/* falls der Schatten über ::before/::after kommt */
.page-container::before, .page-container::after,
#page-container::before, #page-container::after,
.page-cotainer::before, .page-cotainer::after,
#page-cotainer::before, #page-cotainer::after,
#page::before, #page::after,
.page-wrapper::before, .page-wrapper::after,
[class*="page-container"]::before, [class*="page-container"]::after,
[id*="page-container"]::before, [id*="page-container"]::after,
[class*="page-cotainer"]::before, [class*="page-cotainer"]::after,
[id*="page-cotainer"]::before, [id*="page-cotainer"]::after {
  content: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  border: 0 !important;
  background: none !important;
}

/* falls irgendwo inline ein Schatten gesetzt wurde */
[class*="page-container"][style*="box-shadow"],
[id*="page-container"][style*="box-shadow"],
[class*="page-cotainer"][style*="box-shadow"],
[id*="page-cotainer"][style*="box-shadow"],
#page[style*="box-shadow"],
.page-wrapper[style*="box-shadow"] {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}
/* === Overlay auf Hero-Diashow === */
.hero-diashow__overlay {
  position: absolute;
  inset: 0;                       /* nimmt gesamte Stage ein */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: 1rem;
  z-index: 2;
}

.hero-diashow__overlay h1 {
  font-size: 3.3rem;
  font-weight: 500;
  color: #f1eded;
  margin: 0 0 0.5em;
 
}

.hero-diashow__overlay p {
  font-size: 1.25rem;
  margin: 0 0 1.5em;
  
}

.btn-hero {
  display: inline-block;
  padding: 0.75em 1.5em;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 999px;
  background: #b9cf19;       /* grün wie dein Style */
  color: #f7f9f9;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
}
.btn-hero:hover {
  background: #4b4d4d;
  color: #fff;
}
/* =========================
   Responsive Umschalter
   ========================= */
   .desktop-only { display: block; }
   .mobile-only  { display: none; }
   
   /* Basis: Bilder immer flexibel */
   .container-main img { max-width: 100%; height: auto; }
   
   /* Smartphone-Breakpoint */
   @media (max-width: 768px) {
     .desktop-only { display: none !important; }
     .mobile-only  { display: block !important; }
   
     /* Falls das Grid global genutzt wird, hier stapeln */
     .row { display: block; }
     .col-70, .col-30 { width: 100% !important; float: none !important; }
   
     /* etwas Luft für Mobile */
     .container-main { padding-left: 16px; padding-right: 16px; }
     .page-title { font-size: 1.6rem; letter-spacing: .2px; }
     .breadcrumbs { font-size: .95rem; }
   }
   /* ==== Fix: Dropdown überlagert Inhalte (Desktop) ==== */
.site-header, header { position: relative; z-index: 2000; }
.page-container { position: relative; overflow: visible; }
.hdr-dropdown > .hdr-submenu { z-index: 5000; }

/* ==== Burger Button ==== */
.menu-toggle {
  appearance: none; border: 0; background: transparent; width: 44px; height: 44px;
  margin-left: 8px; cursor: pointer; display: none; position: relative;
}
.menu-icon, .menu-icon::before, .menu-icon::after {
  content: ""; display: block; position: absolute; left: 10px; right: 10px; height: 2px; background: #fff;
  transition: transform .25s ease, opacity .25s ease, top .25s ease;
}
.menu-icon { top: 21px; }
.menu-icon::before { top: 13px; }
.menu-icon::after  { top: 29px; }
.menu-toggle[aria-expanded="true"] .menu-icon { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-icon::before { transform: translateY(8px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon::after  { transform: translateY(-8px) rotate(-45deg); }

/* ==== Mobile Layout (≤ 768px) ==== */
@media (max-width: 768px) {
  .logo { max-width: 60%; flex: 1 1 60%; }
  .logo img { max-width: 100%; height: auto; }

  .menu-toggle { display: inline-block; }

  #mainNav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: #494440; display: none; flex-direction: column; padding: 8px 12px 14px;
    border-bottom: 1px solid #333;
  }
  #mainNav.is-open { display: flex; }

  #mainNav > a,
  #mainNav > .hdr-dropdown > .hdr-toggle { display: block; padding: 12px; font-size: 1rem; }

  .hdr-dropdown > .hdr-submenu {
    position: static; display: none; background: #3e3a36; box-shadow: none; padding: 0; margin: 0;
  }
  .hdr-dropdown.open > .hdr-submenu { display: block; }
  .hdr-submenu li a { padding: 10px 14px; font-size: .95rem; text-transform: none; }

  .hdr-dropdown:hover > .hdr-submenu { display: none; }
}
/* ===== MOBILE FIXES: erste Ebene bündig links + Menü liegt oben ===== */
@media (max-width: 768px) {
  /* Erste Ebene bündig links */
  #mainNav > a,
  #mainNav > .hdr-dropdown > .hdr-toggle {
    margin-left: 0 !important;
    padding-left: 12px; /* gleichmäßige Innenabstände statt linker Einzug */
  }

  /* Dropdown-Container nicht einrücken */
  .hdr-dropdown { 
    margin-left: 0 !important;
    width: 100%;
  }

  /* Navigation sicher über dem Seiteninhalt anzeigen */
  #mainNav {
    z-index: 4000;               /* höher als Header-/Content-Layer */
  }

  /* Submenüs korrekt ohne Zusatz-Offsets darstellen */
  .hdr-dropdown > .hdr-submenu {
    left: 0 !important;          /* kein Versatz von 12px */
    padding: 0;
  }
}

/* OPTIONAL: Wenn auf Desktop die Links auch 0 Rand haben sollen, lass das hier stehen; 
   ansonsten kannst du's entfernen. */
@media (min-width: 769px) {
  nav a { margin-left: 10px; } /* wie gehabt */
}