:root{
  /* fullcolor-Farbwelt */
  --brand-1:#17C653;
  --brand-2:#0A9439;
  --accent:#17C653;
  --accent-active:#0A9439;
  --success:#17C653;
  --success-active:#0A9439;

  /* Text & Flächen */
  --text:#071437;
  --text2:#071437;
  --muted:#4B5675;
  --muted2:#78829D;
  --surface:#ffffff;
  --border:#DBDFE9;

  /* Seitenflächen */
  --bg:#FEFEFE;
  --bg-weak:#F9F9F9;

  /* UI */
  --radius:14px;
  --shadow:0 8px 28px rgba(2,6,23,0.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"California FB","Palatino Linotype","Book Antiqua",Palatino,serif;
  color:var(--text);
  background:var(--bg);
}
a,
a:visited{
  color:#087832;
}
a:hover,
a:focus-visible{
  color:#0A9439;
}
.container{max-width:1200px;margin:0 auto;padding:0 18px}

/* Header (grün, transparente Variante) */
.header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,0.94);
  backdrop-filter:saturate(180%) blur(6px);
  border-bottom:1px solid var(--border);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:inherit}
.brand img{height:36px;width:auto}
.brand .name{font-weight:700;color:var(--text)}
.menu{display:flex;gap:18px}
.menu a{color:var(--text);text-decoration:none;font-weight:600}
.menu a:hover{color:var(--accent)}
.burger{display:none;border:1px solid #e5e7eb;border-radius:8px;padding:8px;cursor:pointer}

/* === Overlay für den Mobile-Drawer === */
.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 9999; /* unter Drawer (10000), über Content */
}

.menu-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* === Mobile: Sliding Drawer von rechts === */
@media (max-width: 900px) {

  /* Burger sichtbar */
  .burger {
    display: block;
    font-size: 1.6rem;
    background: none;
    border: 0;
    cursor: pointer;
    z-index: 10001; /* über Overlay/Drawer */
  }

  /* Drawer (geschlossen) */
  .menu {
    position: fixed;
    top: 0;
    right: 0;

    width: 80vw;
    max-width: 320px;
    height: 100dvh;

    display: flex;                /* wichtig: nicht 'none', damit animiert werden kann */
    flex-direction: column;
    gap: 12px;

    padding: 5rem 1.25rem 1.5rem;

    background: #ffffff;
    border-left: 1px solid var(--border);
    border-radius: 0;              /* Drawer → kein Popup */
    box-shadow: -10px 0 30px rgba(0,0,0,.25);

    transform: translateX(100%);  /* geparkt rechts */
    transition: transform .3s ease;

    z-index: 10000;               /* unter Burger, über Overlay */
  }

  /* Drawer offen → reinfahren */
  .menu.open {
    transform: translateX(0);
  }

  /* Link-Styling im Drawer */
  .menu a,
  .menu .as-menu-item {
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    padding: .5rem 0;            /* tappable area */
  }
}

/* Hero: vollgrün, mit sanftem Verlauf nach unten */
.hero{
  padding:64px 0;
  background:linear-gradient(180deg, #e1faea 0%, #fefefe 60%, #fefefe 100%);
}
.hero h1{font-size:clamp(28px,4vw,44px);margin:0 0 8px;color:var(--text)}
.hero p{color:var(--muted);max-width:760px}
.btn{
  display:inline-block;background:var(--accent);color:#fff;
  text-decoration:none;padding:12px 16px;border-radius:10px;font-weight:700;
  border:2px solid transparent;transition:background .15s ease, transform .05s, border-color .15s ease
}
.btn:hover{background:var(--accent-active);border-color:var(--accent-active)}
.btn:active{transform:translateY(1px)}
.btn-outline{background:transparent;border:2px solid var(--accent);color:var(--accent)}
.btn-outline:hover{background:#e1faea}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}

/* Anfrage-Buttons: links/rechts und dezenter Zurueck-Button */
#trialForm .actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:16px;
}
#trialForm .btn.btn-outline{margin-left:auto}
@media (max-width:780px){
  #trialForm .actions{flex-direction:column;align-items:stretch}
  #trialForm .btn.btn-outline{margin-left:0}
}

/* Sections: weisser Karten-Look auf grünem Hintergrund */
.section{padding:60px 0}
.section h2{font-size:28px;margin:0 0 10px;color:var(--text)}
.section .lead{color:var(--muted);max-width:800px}
.grid{display:grid;gap:16px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}}

/* Karten auf weiss, mit grünen Akzenten */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);color:var(--text)}
.card h3{margin:6px 0 8px;color:var(--accent)}
.card p{color:#475569}
.icon{height:34px;width:34px;border-radius:8px;background:linear-gradient(135deg,var(--brand-1),var(--brand-2));display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:800}

/* Vorteile comparison */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.compare .box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;color:var(--text)}
.compare h3{margin-top:0;color:var(--accent)}
.compare ul{margin:0;padding-left:18px}
.compare li{margin:8px 0}
@media (max-width:900px){.compare{grid-template-columns:1fr}}

/* Home-Slider */
.slider-card{
  position:relative;
  width:100%;
  padding:0;
  overflow:hidden;
}
.slider-viewport{
  position:relative;
  width:100%;
  min-height:260px;
  aspect-ratio:3/1;
  background:#f2f7f4;
}
.slider-slide{
  position:absolute;
  inset:0;
  margin:0;
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}
.slider-slide.is-active{
  opacity:1;
  pointer-events:auto;
}
.slider-slide img,
.slider-slide video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.slider-slide video{
  background:#000;
}
.slider-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,0.8);
  border-radius:999px;
  background:rgba(6,18,10,.42);
  color:#fff;
  font-size:28px;
  line-height:1;
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index:2;
}
.slider-arrow.prev{left:14px}
.slider-arrow.next{right:14px}
.slider-arrow:hover{
  background:rgba(6,18,10,.58);
}
@media (max-width:900px){
  .slider-viewport{aspect-ratio:16/9}
  .slider-arrow{
    width:38px;
    height:38px;
    font-size:24px;
  }
}

/* Tutorials: Thumbnail-Grid */
.video-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:1100px){.video-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:780px){.video-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.video-grid{grid-template-columns:1fr}}

/* Preis-Karten */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.price-card{border:1px solid var(--border);border-radius:16px;padding:18px;background:var(--surface);box-shadow:var(--shadow);display:flex;flex-direction:column;color:var(--text)}
.price{font-size:28px;font-weight:800;margin:6px 0;color:var(--accent)}
.badge{display:inline-block;background:#e1faea;color:var(--success-active);border:1px solid #c4f0d4;padding:2px 8px;border-radius:20px;font-size:12px;margin-bottom:6px}
.note{font-size:13px;color:#64748b}
@media (max-width:900px){.pricing{grid-template-columns:1fr}}

/* FAQ-Accordion-Karten */
.faq{max-width:900px}
.acc{border:1px solid #e5e7eb;border-radius:12px;margin:10px 0;background:#fff;color:#1b1f23}
.acc summary{cursor:pointer;padding:14px 16px;font-weight:700}
.acc p{padding:0 16px 14px 16px;color:#475569}

/* Kontaktformular-Karten */
.form{max-width:800px}
.input{width:100%;padding:12px;border:1px solid #e5e7eb;border-radius:10px}
label{font-weight:600}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:780px){.row{grid-template-columns:1fr}}

/* Footer auf grünem Grund */
.footer{padding:28px 0;border-top:1px solid var(--border);color:var(--muted)}
.footer a{color:var(--muted)}
.footer a:hover{color:var(--text)}

/* Karten (Thumbnails) */
.video-card{position:relative}
.video-card img{
  display:block;width:100%;height:auto;border-radius:8px;
  box-shadow:var(--shadow);cursor:pointer;border:2px solid #e5e7eb;background:#fff;
}
.video-card img:hover{outline:3px solid rgba(10,148,57,0.25)}
.video-card .note{margin-top:6px;color:#d1d8e6}

/* Lightbox */
.lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:1000}
.lightbox[aria-hidden="false"]{display:flex}
.lightbox__backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(2px)}
.lightbox__dialog{position:relative;z-index:1;width:min(96vw,1100px);background:#000;border-radius:14px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.35)}
.lightbox__content{position:relative;width:100%;background:#000;aspect-ratio:16/9}
.lightbox__content video{position:absolute;inset:0;width:100%;height:100%;background:#000}
.lightbox__close{position:absolute;top:6px;right:8px;z-index:2;background:#fff;color:var(--accent);border:0;border-radius:10px;width:36px;height:36px;font-size:22px;font-weight:700;line-height:1;cursor:pointer;box-shadow:var(--shadow)}
.lightbox__close:hover{background:#eaf7ef}

/* =========================================================
   THEME-TOGGLE: Attribute-basierte Overrides & Button-Style
   ========================================================= */

/* 2.1 Toggle-Button im Header */
.theme-toggle{
  margin-left: 10px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 6px 10px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
}
.theme-toggle:hover{ border-color:var(--accent); background: #e1faea; }
@media (prefers-color-scheme: dark){
  .theme-toggle{ border-color: rgba(255,255,255,0.25); }
  .theme-toggle:hover{ border-color:#9be3b6; }
}

/* 2.2 Attribute-Override: DARK erzwingen (unabhängig vom System) */
:root[data-theme="dark"]{
  --text:#F5F5F5;
  --text2:#F5F5F5;
  --muted:#9A9CAE;
  --muted2:#808290;
  --surface:#1F212A;
  --border:#363843;
  --bg:#0D0E12;
  --bg-weak:#1B1C22;
  --shadow:0 10px 32px rgba(0,0,0,0.5);
  color-scheme: dark;
}
[data-theme="dark"] body{ color:var(--text); background:var(--bg); }
[data-theme="dark"] a,
[data-theme="dark"] a:visited{ color:#b6edc8; }
[data-theme="dark"] a:hover,
[data-theme="dark"] a:focus-visible{ color:#d8f7e3; }

/* Wichtige Komponenten im Dark-Override (aus deiner Dark-Section gespiegelt) */
[data-theme="dark"] .header{ background:rgba(15,16,20,0.9); border-bottom:1px solid var(--border); }
[data-theme="dark"] .brand .name,
[data-theme="dark"] .menu a{ color:#eaf7ef; }
[data-theme="dark"] .menu a:hover{ color:#9be3b6; }
[data-theme="dark"] .menu.open{ background:#1B1C22; border-color:var(--border); }

[data-theme="dark"] .hero{ background:linear-gradient(180deg,#14291b 0%, #1B1C22 60%, #1B1C22 100%) }
[data-theme="dark"] .hero p{ color:var(--muted); }

[data-theme="dark"] .card{ background:var(--surface); border-color:var(--border); color:var(--text); }
[data-theme="dark"] .card h3{ color:#9be3b6; }
[data-theme="dark"] .card p{ color:#C4CADA; }
[data-theme="dark"] .slider-viewport{ background:#142019; }
[data-theme="dark"] .slider-arrow{
  border-color:rgba(255,255,255,0.5);
  background:rgba(0,0,0,.5);
}
[data-theme="dark"] .slider-arrow:hover{ background:rgba(0,0,0,.68); }

[data-theme="dark"] .compare .box{ background:var(--surface); border-color:var(--border); color:var(--text); }
[data-theme="dark"] .compare h3{ color:#9be3b6; }

[data-theme="dark"] .price-card{ background:var(--surface); border-color:var(--border); color:var(--text); }
[data-theme="dark"] .price{ color:#9be3b6; }
[data-theme="dark"] .badge{ background:#1F2623; color:#17C653; border-color:#2f4837; }
[data-theme="dark"] .note{ color:var(--muted); }

[data-theme="dark"] .acc{ background:var(--surface); border-color:var(--border); color:var(--text); }
[data-theme="dark"] .acc p{ color:#C4CADA; }

[data-theme="dark"] .input{ background:#0a1410; border-color:#22352b; color:#e8f1ea; }
[data-theme="dark"] .input::placeholder{ color:#9fb0a7; }

[data-theme="dark"] .footer{ border-top-color:var(--border); color:var(--muted); }
[data-theme="dark"] .footer a{ color:var(--muted); }
[data-theme="dark"] .footer a:hover{ color:#F5F5F5; }

[data-theme="dark"] .video-card img{ border-color:#203228; background:#0c1911; }
[data-theme="dark"] .video-card .note{ color:#a7b5ad; }

[data-theme="dark"] .btn{ background:#17C653; color:#fff; border-color:transparent; }
[data-theme="dark"] .btn:hover{ background:#0A9439; border-color:#0A9439; }
[data-theme="dark"] .btn-outline{ background:transparent; border-color:#3aa866; color:#dff6ea; }
[data-theme="dark"] .btn-outline:hover{ background:rgba(255,255,255,0.06); }

[data-theme="dark"] .lightbox__dialog{ background:#000; }
[data-theme="dark"] .lightbox__close{ background:#0e1a14; color:#daf5e6; }
[data-theme="dark"] .lightbox__close:hover{ background:#1a2a21; }


[data-theme="light"] body{ color:var(--text2); background:var(--bg); }

/* Wichtige Komponenten im Light-Override (entspricht deiner Light-Section) */
[data-theme="light"] .header{ background:rgba(255,255,255,0.94); border-bottom:1px solid var(--border); }
[data-theme="light"] .brand .name,
[data-theme="light"] .menu a{ color:var(--text); }
[data-theme="light"] .menu a:hover{ color:var(--accent); }
[data-theme="light"] .menu.open{ background:#ffffff; border-color:var(--border); }

[data-theme="light"] .hero{ background:linear-gradient(180deg, #e1faea 0%, #fefefe 60%, #fefefe 100%); }
[data-theme="light"] .hero p{ color:var(--muted); }

[data-theme="light"] .card{ background:var(--surface); border-color:var(--border); color:var(--text); }
[data-theme="light"] .card h3{ color:var(--accent); }
[data-theme="light"] .card p{ color:#475569; }

[data-theme="light"] .compare .box{ background:var(--surface); border-color:var(--border); color:var(--text); }
[data-theme="light"] .compare h3{ color:var(--accent); }

[data-theme="light"] .price-card{ background:var(--surface); border-color:var(--border); color:var(--text); }
[data-theme="light"] .price{ color:var(--accent); }
[data-theme="light"] .badge{ background:#e1faea; color:var(--success-active); border-color:#c4f0d4; }
[data-theme="light"] .note{ color:#acb4bf; }

[data-theme="light"] .acc{ background:#fff; border-color:#e5e7eb; color:#1b1f23; }
[data-theme="light"] .acc p{ color:#475569; }

[data-theme="light"] .input{ background:#fff; border-color:#e5e7eb; color:#1b1f23; }
[data-theme="light"] .input::placeholder{ color:#94a3b8; }

[data-theme="light"] .footer{ border-top-color:var(--border); color:var(--muted); }
[data-theme="light"] .footer a{ color:var(--muted); }
[data-theme="light"] .footer a:hover{ color:var(--text); }

[data-theme="light"] .video-card img{ border-color:#e5e7eb; background:#fff; }
[data-theme="light"] .video-card .note{ color:#d1d8e6; }

[data-theme="light"] .btn{ background:var(--accent); color:#fff; border-color:transparent; }
[data-theme="light"] .btn:hover{ background:var(--accent-active); border-color:var(--accent-active); }
[data-theme="light"] .btn-outline{ background:transparent; border-color:var(--accent); color:var(--accent); }
[data-theme="light"] .btn-outline:hover{ background:#e1faea; }

[data-theme="light"] .lightbox__dialog{ background:#000; }
[data-theme="light"] .lightbox__close{ background:#fff; color:var(--accent); }
[data-theme="light"] .lightbox__close:hover{ background:#eaf7ef; }

/* =========================================================
   MOBILE DRAWER – THEME-ANPASSUNGEN (LIGHT / DARK)
   ========================================================= */

[data-theme="light"] .menu {
  background: #ffffff;
  border-left: 1px solid var(--border);
}

[data-theme="dark"] .menu {
  background: #1B1C22;
  border-left: 1px solid var(--border);
}

[data-theme="light"] .menu a,
[data-theme="light"] .menu .as-menu-item {
  color: var(--text);
}

[data-theme="dark"] .menu a,
[data-theme="dark"] .menu .as-menu-item {
  color: #eaf7ef;
}

/* ============ BERICHTE-VORSCHAU (Grid, Overlay, Captions) ============ */
#berichte-vorschau .report-preview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.1rem;
}

#berichte-vorschau .report-card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

#berichte-vorschau .report-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.414;           /* A4-Hochformat */
  border: 0;
  padding: 0;
  border-radius: .6rem;
  overflow: hidden;
  background: var(--surface, #fff);
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
  cursor: zoom-in;
  transition: transform .2s ease, box-shadow .2s ease;
}
#berichte-vorschau .report-thumb:hover {
  transform: translateY(-50px);
  box-shadow: 0 10px 24px rgba(0,0,0,.15);
}

#berichte-vorschau .report-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;                  /* ändere zu 'contain', falls Zuschnitt unerwünscht */
  display: block;
}

#berichte-vorschau .thumb-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  font-weight: 600;
  font-size: 1.95rem;
  color: #ffffff;
  text-align: center;
  padding: .5rem .75rem;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  /* leichte Abdunklung für bessere Lesbarkeit */
  background: linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.25));
}

#berichte-vorschau figcaption {
  text-align: center;
  font-size: .95rem;
  line-height: 1.35;
  opacity: .9;
}

/* Responsiv: 2 Spalten auf Tablet, 1 Spalte auf Mobile */
@media (max-width: 1100px) {
  #berichte-vorschau .report-preview-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  #berichte-vorschau .report-preview-grid { grid-template-columns: 1fr; }
}

/* ====================== BILD-LIGHTBOX (Popup/Carousel) ====================== */
.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.65);
  padding: 2rem;
  opacity: 0;
  transition: opacity .25s ease;
}
.image-lightbox.is-open { display: flex; opacity: 1; }

.image-lightbox .lb-backdrop {
  position: absolute; inset: 0;
}

.image-lightbox .lb-dialog {
  position: relative;
  max-width: min(96vw, 1400px);
  max-height: 86vh;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  place-items: center;
}

.image-lightbox .lb-img {
  max-width: 100%;
  max-height: 86vh;
  object-fit: contain;
  border-radius: .5rem;
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
  background: #111;
  transform: scale(.97);
  opacity: 0;
  transition: transform .35s ease, opacity .35s ease;
}
.image-lightbox.is-open .lb-img {
  transform: scale(1);
  opacity: 1;
}

.image-lightbox .lb-close {
  position: absolute; top: .75rem; right: .75rem;
  width: 2.4rem; height: 2.4rem;
  border: 0; border-radius: 999px;
  background: rgba(0,0,0,.5); color: #fff;
  font-size: 1.6rem; line-height: 1;
  cursor: pointer;
}

.image-lightbox .lb-prev,
.image-lightbox .lb-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 3rem; height: 3rem;
  border: 0; border-radius: 999px;
  background: rgba(0,0,0,.5); color: #fff;
  font-size: 2rem; line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
}
.image-lightbox .lb-prev { left: .5rem; }
.image-lightbox .lb-next { right: .5rem; }
.image-lightbox .lb-prev:hover,
.image-lightbox .lb-next:hover,
.image-lightbox .lb-close:hover { background: rgba(0,0,0,.65); }

.image-lightbox .lb-caption {
  margin-top: .6rem;
  color: #fff;
  display: flex; gap: .75rem; justify-content: center; align-items: baseline;
  font-size: .95rem; text-align: center;
}
.image-lightbox .lb-counter { opacity: .85; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .burger {
    display: block !important;
  }
}

/* Kontaktformular-Status */
.contact-status{
  margin:0 0 14px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
}
.contact-status.is-success{
  border-color:#0A9439;
  background:#e1faea;
  color:#0f4d25;
}
.contact-status.is-warning{
  border-color:#8aa63c;
  background:#f6fbe7;
  color:#3f4d15;
}
.contact-status.is-error{
  border-color:#b44a4a;
  background:#fdecec;
  color:#5f1d1d;
}
[data-theme="dark"] .contact-status.is-success{
  border-color:#3aa866;
  background:#0c1911;
  color:#dff6ea;
}
[data-theme="dark"] .contact-status.is-warning{
  border-color:#91a74b;
  background:#1f2212;
  color:#ebf3c8;
}
[data-theme="dark"] .contact-status.is-error{
  border-color:#a35a5a;
  background:#281616;
  color:#f2d8d8;
}