/**
 * -----------------------------------------------------------------------------
 * OLDWBB Lizenzhinweis
 * Copyright (c) 2026 Christian Fiebiger
 * https://oldwbb.de
 * info@oldwbb.de
 *
 * Dieses Script / diese Datei ist urheberrechtlich geschützt.
 *
 * Erlaubt:
 * - Nutzung im Rahmen einer gültigen Lizenz
 * - Private Verwendung durch den Käufer
 * - Installation auf freigegebenen Systemen
 *
 * Nicht erlaubt ohne schriftliche Genehmigung:
 * - Weiterverkauf
 * - Weitergabe an Dritte
 * - Veröffentlichung im Internet
 * - Upload auf andere Webseiten / Foren / Git-Repositories
 * - Entfernen dieses Copyright-Hinweises
 * - Nutzung als eigene Arbeit ausgeben
 *
 * Änderungen am Quellcode sind nur zur eigenen Nutzung gestattet.
 * Die Urheberrechte verbleiben vollständig bei Christian Fiebiger.
 *
 * Bei Verstoß können zivilrechtliche Schritte eingeleitet werden.
 *
 * Vollständige Lizenzinformationen:
 * https://oldwbb.de
 * -----------------------------------------------------------------------------
 */

/* =========================================================
   Alltagsbegleitung Claudia – Style
   ---------------------------------------------------------
   Dokumentation:
   Diese Datei ist bewusst in klare Bereiche aufgeteilt.
   Jeder Abschnitt steuert genau einen sichtbaren Bereich
   der Webseite. Gemeinsame Werte wie Farben, Schatten,
   Rundungen und Breiten liegen zentral in :root.
   ========================================================= */

/* =========================================================
   Variablen / Design-System
   ---------------------------------------------------------
   Zentrale Designwerte für Farben, Abstände, Schatten,
   Rundungen, maximale Breite und Fokuszustände.
   ========================================================= */

:root{
  --primary:#497F2C;
  --primary-700:#3E6F25;
  --primary-400:#5FA33E;
  --accent:#F9AF1A;

  --ink:#1F1F1F;
  --text:#2A2A2A;
  --muted:#5E5E5E;

  --bg:#F7F7F7;
  --surface:#FFFFFF;
  --soft:#FAFBF8;
  --border:#E6E6E6;

  --radius:18px;
  --radius2:28px;

  --shadow:0 14px 30px rgba(0,0,0,.08);
  --shadow2:0 24px 60px rgba(0,0,0,.10);
  --shadow-soft:0 10px 24px rgba(0,0,0,.05);

  --max:1100px;
  --focus:0 0 0 4px rgba(249,175,26,.28);
}

/* =========================================================
   Reset / Basis
   ---------------------------------------------------------
   Einheitliche Browser-Basis für Box-Modell, Schrift,
   Seitenhintergrund, Bilder, Links und Trennlinien.
   ========================================================= */

*{
  box-sizing:border-box;
}

html,
body{
  min-height:100%;
  overflow-x:hidden;
}

body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#fff 0%,var(--bg) 60%,#fff 100%);
  line-height:1.55;
}

img{
  display:block;
  max-width:100%;
  height:auto;
}

a{
  color:var(--primary);
  text-decoration:none;
}

a:hover{
  color:var(--primary-700);
  text-decoration:underline;
}

hr{
  border:0;
  border-top:1px solid var(--border);
  margin:18px 0;
}

/* =========================================================
   Layout-Helfer
   ---------------------------------------------------------
   Wiederverwendbare Container, Reihen und Karten.
   ========================================================= */

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:22px;
}

.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.card{
  padding:18px;
  border:1px solid var(--border);
  border-radius:var(--radius2);
  background:var(--surface);
  box-shadow:var(--shadow);
}

/* =========================================================
   Typografie / Inhalte
   ---------------------------------------------------------
   Überschriften, normale Inhaltsbereiche, Listen und
   Hinweis-/Fehlermeldungen.
   ========================================================= */

.pageTitle{
  margin:0 0 10px;
  color:var(--ink);
  font-size:clamp(26px,3.2vw,38px);
  line-height:1.08;
}

.sectionTitle{
  margin:0 0 10px;
  color:var(--ink);
}

.content{
  color:var(--muted);
  font-size:16px;
}

.content h2,
.content h3{
  color:var(--ink);
}

.content ul{
  padding-left:22px;
}

.content li{
  margin-bottom:8px;
}

.notice,
.error{
  padding:10px 12px;
  border-radius:14px;
}

.notice{
  color:var(--ink);
  background:rgba(73,127,44,.08);
  border:1px solid rgba(73,127,44,.22);
}

.error{
  color:#7a1010;
  background:rgba(244,80,80,.10);
  border:1px solid rgba(244,80,80,.28);
}

/* =========================================================
   Header
   ---------------------------------------------------------
   Sticky Kopfbereich mit Logo, Desktop-Navigation,
   mobilem Burger und Anruf-Button.
   ========================================================= */

.topbar{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}

.topbarInner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:nowrap;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
  color:inherit;
  text-decoration:none;
}

.brandLogo{
  width:60px;
  height:60px;
  padding:7px;
  object-fit:contain;
  transform:scale(5.35);
  transform-origin:center;
}

.topbarCta{
  flex:0 0 auto;
  white-space:nowrap;
}

/* =========================================================
   Navigation Desktop
   ---------------------------------------------------------
   Horizontale Hauptnavigation. Dropdown öffnet per Hover
   und bleibt stabil erreichbar, ohne Lücke zum Untermenü.
   ========================================================= */

.mainNav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex:1 1 auto;
  min-width:0;
  padding-left:35px;
}

.mainNav a,
.navDropdownMain{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:999px;
  color:var(--ink);
  font-size:14px;
  font-weight:800;
  white-space:nowrap;
  text-decoration:none;
  transition:
    color .15s ease,
    background .15s ease,
    box-shadow .15s ease,
    transform .15s ease;
}

.mainNav a:hover,
.navDropdownMain:hover{
  color:var(--primary-700);
  background:rgba(73,127,44,.08);
  text-decoration:none;
}

.mainNav a.isActive{
  color:var(--primary-700);
  background:linear-gradient(135deg,rgba(73,127,44,.14),rgba(249,175,26,.16));
  box-shadow:inset 0 0 0 1px rgba(73,127,44,.18);
}

.mainNav a.isActive::after{
  content:"";
  width:8px;
  height:8px;
  margin-left:8px;
  border-radius:999px;
  background:var(--accent);
}

/* =========================================================
   Navigation Dropdown Desktop
   ---------------------------------------------------------
   Desktop: Untermenü per Hover / Fokus.
   Mobil: Untermenü per Checkbox und Plus-Button.
   ========================================================= */

.navDropdown{
  position:relative;
}

.navDropdownRow{
  display:flex;
  align-items:center;
}

.navInfoToggle{
  display:none;
}

.navDropdownToggle{
  display:none;
}

@media(min-width:901px){

  .navDropdownMain::after{
    content:"+";
    display:inline-flex;
    margin-left:10px;
    color:var(--ink);
    font-size:15px;
    font-weight:900;
    line-height:1;
  }

}

/*
.navDropdownMain::after{
  display:none;
  content:none;
}
*/
.navDropdownMenu{
  position:absolute;
  top:100%;
  left:0;
  z-index:999;

  display:none;
  min-width:280px;
  padding:10px;
  margin-top:4px;

  border:1px solid var(--border);
  border-radius:18px;
  background:#fff;
  box-shadow:var(--shadow);
}

.navDropdownMenu::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-8px;
  height:8px;
}

.navDropdown:hover .navDropdownMenu,
.navDropdown:focus-within .navDropdownMenu,
.navDropdownMenu:hover{
  display:grid;
  gap:4px;
}

.navDropdownMenu a{
  justify-content:flex-start;
  padding:11px 12px;
  border-radius:12px;
  color:var(--ink);
}

.navDropdownMenu a:hover,
.navDropdownMenu a.isActive{
  color:var(--primary-700);
  background:linear-gradient(135deg,rgba(73,127,44,.10),rgba(249,175,26,.13));
}

/* =========================================================
   Mobile Navigation Grundelemente
   ---------------------------------------------------------
   Unsichtbarer Haupt-Schalter, Burger-Button und optionale
   Mobile-Menü-Kopfbereiche.
   ========================================================= */

.navToggle{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.burgerBtn{
  display:none;
  width:46px;
  height:46px;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  flex-direction:column;
  gap:5px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(255,255,255,.95);
  cursor:pointer;
  z-index:1002;
}

.burgerBtn span{
  display:block;
  width:20px;
  height:2px;
  border-radius:999px;
  background:var(--ink);
  transition:.18s ease;
}

.mobileMenuHead,
.mobileMenuSub{
  display:none;
}

/* =========================================================
   Buttons
   ---------------------------------------------------------
   Primäre und sekundäre Button-Optik für Links und CTAs.
   ========================================================= */

.btn,
.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 16px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--primary-400));
  box-shadow:0 14px 28px rgba(73,127,44,.18);
  font-weight:900;
  text-decoration:none;
  transition:transform .15s ease,box-shadow .15s ease;
}

.btn:hover,
.cta:hover{
  color:#fff;
  transform:translateY(-1px);
  text-decoration:none;
}

.btnGhost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--ink);
  background:rgba(255,255,255,.85);
  font-weight:900;
  text-decoration:none;
  transition:transform .15s ease;
}

.btnGhost:hover{
  color:var(--ink);
  transform:translateY(-1px);
  text-decoration:none;
}

/* =========================================================
   Homepage Background
   ---------------------------------------------------------
   Hintergrundbild mit weichem Verlauf und farbigen Lichtflächen.
   ========================================================= */

.homepage-bg{
  position:relative;
  min-height:100vh;
}

.homepage-bg::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.75)),
    url("home-bg.jpg");
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  filter:blur(1px);
  transform:scale(1.03);
}

.homepage-bg::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(900px 500px at 15% 10%,rgba(73,127,44,.18),transparent 60%),
    radial-gradient(1000px 600px at 85% 20%,rgba(249,175,26,.18),transparent 65%),
    radial-gradient(700px 400px at 50% 90%,rgba(73,127,44,.10),transparent 70%);
}

/* =========================================================
   Startseite
   ---------------------------------------------------------
   Einführungsbereich mit kleinen Informationskarten.
   ========================================================= */

.homeIntro{
  display:grid;
  gap:14px;
  margin-top:20px;
}

.homeIntroItem{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:16px;
  border:1px solid var(--border);
  border-radius:16px;
  background:#fff;
  box-shadow:var(--shadow-soft);
}

.homeIcon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:12px;
  background:rgba(73,127,44,.10);
  font-size:26px;
}

/* =========================================================
   Info / Kontaktbox
   ---------------------------------------------------------
   Kleine Infoboxen, Kontakt-Panel und Kontakt-Buttons.
   ========================================================= */

.infoBox{
  margin-top:20px;
  padding:18px;
  border:1px solid var(--border);
  border-radius:22px;
  background:#fff;
  box-shadow:var(--shadow);
}

.infoBox h3{
  margin-top:0;
  color:var(--ink);
}

.contactPanel{
  margin-top:22px;
  padding:22px;
  border:1px solid rgba(73,127,44,.18);
  border-radius:24px;
  background:linear-gradient(135deg,rgba(73,127,44,.08),rgba(255,255,255,.92));
  box-shadow:var(--shadow);
}

.contactPanel h3{
  margin-top:0;
  color:var(--ink);
}

.contactButtons{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
}

.contactBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 18px;
  border-radius:999px;
  font-weight:900;
  text-decoration:none;
  transition:transform .15s ease;
}

.contactBtn:hover{
  transform:translateY(-1px);
  text-decoration:none;
}

.contactBtn.primary{
  color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--primary-400));
}

.contactBtn.secondary{
  color:var(--ink);
  background:#fff;
  border:1px solid var(--border);
}

/* =========================================================
   Feature Grid / Leistungen
   ---------------------------------------------------------
   Kartenraster für Leistungen, Vorteile oder Inhaltsblöcke.
   ========================================================= */

.featureGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin:22px 0;
}

.featureItem{
  padding:18px;
  border:1px solid var(--border);
  border-radius:20px;
  background:rgba(255,255,255,.86);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}

.featureItem h3{
  margin:0 0 8px;
  color:var(--ink);
  font-size:18px;
}

.featureItem p{
  margin:0;
  color:var(--muted);
  font-size:15px;
}

.featureIcon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  margin-bottom:12px;
  border:1px solid rgba(73,127,44,.10);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(73,127,44,.12),rgba(249,175,26,.14));
  box-shadow:0 10px 18px rgba(0,0,0,.05);
  font-size:24px;
}

/* =========================================================
   Prozess / Ablauf
   ---------------------------------------------------------
   Drei Schritte für Ablauf, Kontakt oder Erklärung.
   ========================================================= */

.processSection{
  margin-top:30px;
  text-align:center;
}

.processSection p{
  max-width:700px;
  margin:0 auto 25px;
  color:var(--muted);
}

.processGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.processItem{
  padding:22px;
  border:1px solid var(--border);
  border-radius:22px;
  background:#fff;
  box-shadow:var(--shadow);
}

.processItem h3{
  margin:10px 0 8px;
  color:var(--ink);
}

.processItem p{
  margin:0;
  font-size:14px;
}

.processNumber{
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  margin:0 auto 8px;
  border-radius:14px;
  color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--primary-400));
  font-weight:800;
}

/* =========================================================
   Vertrauen / Warum wir
   ---------------------------------------------------------
   Vertrauenskarten mit Icon, Titel und kurzem Text.
   ========================================================= */

.trustSection{
  margin-top:30px;
}

.trustSection h2{
  margin-bottom:10px;
  text-align:center;
}

.trustSection > p{
  max-width:700px;
  margin:0 auto 25px;
  color:var(--muted);
  text-align:center;
}

.trustGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.trustItem{
  padding:20px;
  border:1px solid var(--border);
  border-radius:20px;
  background:#fff;
  box-shadow:var(--shadow);
  text-align:center;
}

.trustItem h3{
  margin:10px 0 6px;
  color:var(--ink);
  font-size:17px;
}

.trustItem p{
  margin:0;
  color:var(--muted);
  font-size:14px;
}

.trustIcon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  margin:0 auto;
  border-radius:16px;
  background:linear-gradient(135deg,rgba(73,127,44,.12),rgba(249,175,26,.15));
  font-size:28px;
}

/* =========================================================
   Abrechnung
   ---------------------------------------------------------
   Karten für Abrechnungsarten, Hinweise und Leistungsinfos.
   ========================================================= */

.billingGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin:22px 0;
}

.billingCard{
  padding:20px;
  border:1px solid var(--border);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,247,247,.96));
  box-shadow:0 12px 28px rgba(0,0,0,.06);
}

.billingCard h3{
  margin:0 0 10px;
  color:var(--ink);
  font-size:19px;
}

.billingCard p{
  margin:0 0 12px;
  color:var(--muted);
}

.billingCard ul{
  margin:0;
  padding-left:20px;
}

.billingCard li{
  margin-bottom:8px;
  color:var(--text);
}

.billingIcon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  margin-bottom:14px;
  border:1px solid rgba(73,127,44,.10);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(73,127,44,.12),rgba(249,175,26,.16));
  box-shadow:0 10px 18px rgba(0,0,0,.05);
  font-size:26px;
}

/* =========================================================
   Lokale SEO Box
   ---------------------------------------------------------
   Textbereich für Einsatzorte und regionale Suchmaschineninhalte.
   ========================================================= */

.localSeo{
  margin-top:30px;
  padding:22px;
  border:1px solid var(--border);
  border-radius:22px;
  background:#fff;
  box-shadow:var(--shadow);
}

.localSeo h2{
  margin-top:0;
  color:var(--ink);
}

.localSeo p{
  margin-bottom:12px;
  color:var(--muted);
}

/* =========================================================
   Werte Box
   ---------------------------------------------------------
   Zweispaltiger Bereich für Werte, Versprechen oder Merkmale.
   ========================================================= */

.valuesBox{
  margin-top:28px;
  padding:22px;
  border:1px solid var(--border);
  border-radius:22px;
  background:#fff;
  box-shadow:var(--shadow);
}

.valuesBox h3{
  margin-top:0;
  text-align:center;
}

.valuesGrid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  margin-top:18px;
}

.valueItem{
  padding:18px;
  border:1px solid var(--border);
  border-radius:16px;
  background:#fff;
  text-align:center;
}

.valueItem p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:14px;
}

.valueIcon{
  margin-bottom:6px;
  font-size:26px;
}

/* =========================================================
   Kontaktformular
   ---------------------------------------------------------
   Formularfelder, Fokuszustände, Datenschutz-Checkbox
   und Honeypot-Feld.
   ========================================================= */

.contactFormWrap{
  margin-top:22px;
  padding:18px;
  border:1px solid var(--border);
  border-radius:24px;
  background:rgba(255,255,255,.92);
  box-shadow:0 16px 36px rgba(0,0,0,.07);
}

.contactFormWrap h3{
  margin-top:0;
  color:var(--ink);
}

.contactForm{
  display:grid;
  gap:14px;
  margin-top:12px;
}

.contactForm label{
  display:flex;
  flex-direction:column;
  gap:6px;
  color:var(--ink);
  font-size:14px;
  font-weight:700;
}

.contactForm input,
.contactForm textarea,
input,
textarea,
select{
  width:100%;
  padding:12px;
  border:1px solid var(--border);
  border-radius:14px;
  outline:none;
  background:#fff;
  color:var(--text);
  font:inherit;
  transition:box-shadow .12s ease,border-color .12s ease;
}

.contactForm input:focus,
.contactForm textarea:focus,
input:focus,
textarea:focus,
select:focus{
  border-color:rgba(249,175,26,.75);
  box-shadow:var(--focus);
}

textarea{
  min-height:140px;
  resize:vertical;
}

.hpField{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.check{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--text);
  font-size:14px;
}

.check input{
  width:18px;
  height:18px;
  accent-color:var(--primary);
}

.consentCheck{
  align-items:flex-start;
  gap:10px;
  font-weight:600;
  line-height:1.45;
}

.consentCheck input{
  flex:0 0 auto;
  margin-top:3px;
}

.consentCheck a{
  color:var(--primary);
  font-weight:800;
}

/* =========================================================
   Sticky Call Button
   ---------------------------------------------------------
   Mobiler Telefonbutton unten rechts.
   Desktop bleibt er ausgeblendet.
   ========================================================= */

.mobileCallBtn{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 18px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--primary-400));
  box-shadow:0 18px 34px rgba(73,127,44,.28);
  font-weight:900;
  text-decoration:none;
}

.mobileCallBtn:hover{
  color:#fff;
  transform:translateY(-1px);
  text-decoration:none;
}

/* =========================================================
   Downloads
   ---------------------------------------------------------
   Download-Kategorien, Karten, Vorschauen und Aktionsbuttons.
   ========================================================= */

.downloadCategory{
  margin-top:28px;
}

.downloadCategory:first-of-type{
  margin-top:20px;
}

.downloadCategoryTitle{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 14px;
  color:var(--ink);
  font-size:30px;
  line-height:1.1;
}

.downloadCategoryIcon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(73,127,44,.10),rgba(249,175,26,.12));
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  font-size:22px;
}

.downloadGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.downloadItem{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:18px;
  border:1px solid var(--border);
  border-radius:22px;
  background:#fff;
  box-shadow:0 12px 26px rgba(0,0,0,.06);
  text-align:center;
}

.downloadPreview{
  width:100%;
  height:220px;
  margin-bottom:12px;
  border-radius:14px;
  background:#f6f6f6;
  object-fit:contain;
}

.downloadIcon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:220px;
  margin-bottom:12px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(73,127,44,.10),rgba(249,175,26,.12));
  font-size:46px;
}

.downloadItem h3{
  min-height:48px;
  margin:6px 0;
  color:var(--ink);
  font-size:18px;
  line-height:1.3;
}

.downloadMeta{
  margin-bottom:14px;
  color:var(--muted);
  font-size:13px;
}

.downloadActions{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:auto;
}

.downloadActions .btn,
.downloadActions .btnGhost{
  width:100%;
}

/* =========================================================
   PDF Viewer
   ---------------------------------------------------------
   Vollbild-Overlay für PDF-Vorschauen mit Schließen-Button.
   ========================================================= */

.pdfViewer{
  position:fixed;
  inset:0;
  z-index:2000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.65);
}

.pdfViewer.active{
  display:flex;
}

.pdfViewerInner{
  position:relative;
  width:90%;
  height:90%;
  overflow:hidden;
  border-radius:14px;
  background:#fff;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
}

.pdfViewer iframe{
  width:100%;
  height:100%;
  border:0;
}

.pdfClose{
  position:absolute;
  top:10px;
  right:10px;
  width:36px;
  height:36px;
  border:0;
  border-radius:50%;
  color:#fff;
  background:#000;
  cursor:pointer;
  font-size:18px;
}

/* =========================================================
   Tabellen
   ---------------------------------------------------------
   Kartenartige Tabellenoptik für einfache Listen.
   ========================================================= */

.table{
  width:100%;
  margin-top:10px;
  border-collapse:separate;
  border-spacing:0 10px;
}

.table th{
  padding:0 10px;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  text-align:left;
}

.table td{
  padding:10px;
  border:1px solid var(--border);
  background:#fff;
}

.table tr td:first-child{
  border-top-left-radius:14px;
  border-bottom-left-radius:14px;
}

.table tr td:last-child{
  border-top-right-radius:14px;
  border-bottom-right-radius:14px;
}

/* =========================================================
   Opening Overlay
   ---------------------------------------------------------
   Start-Hinweis als zentriertes Overlay, z.B. für Eröffnung.
   ========================================================= */

.openingOverlay{
  position:fixed;
  inset:0;
  z-index:5000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.55);
}

.openingBox{
  max-width:520px;
  padding:34px;
  border-radius:24px;
  background:#fff;
  box-shadow:0 30px 80px rgba(0,0,0,.25);
  text-align:center;
}

.openingBox h2{
  margin-top:0;
  color:var(--ink);
  font-size:28px;
}

.openingText{
  margin:14px 0 18px;
  font-size:18px;
}

/* =========================================================
   Footer
   ---------------------------------------------------------
   Glasartige Footerbox mit Markenbereich, Spaltennavigation
   und zentriertem unteren Copyright-/Power-Hinweis.
   ========================================================= */

.siteFooter{
  margin-top:0;
  padding:2px 0 30px;
}

.siteFooterBox{
  padding:34px;
  border:1px solid rgba(73,127,44,.18);
  border-radius:34px;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(18px);
  box-shadow:var(--shadow2);
}

.siteFooterGrid{
  display:grid;
  grid-template-columns:1.25fr 1fr 1fr 1fr;
  gap:28px;
}

.siteFooterBrand,
.siteFooterCol{
  min-height:170px;
  padding-right:28px;
  border-right:1px solid var(--border);
}

.siteFooterCol:last-child{
  border-right:0;
}

.siteFooterBrand strong{
  display:block;
  margin-bottom:18px;
  color:var(--ink);
  font-size:26px;
  font-weight:900;
}

.siteFooterBrand p{
  max-width:260px;
  margin:0;
  color:var(--muted);
  font-size:17px;
  line-height:1.7;
}

.siteFooterIcon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:64px;
  height:64px;
  margin-bottom:14px;
  border:1px solid rgba(73,127,44,.16);
  border-radius:999px;
  background:linear-gradient(135deg,rgba(73,127,44,.10),rgba(249,175,26,.14));
  box-shadow:0 18px 40px rgba(73,127,44,.10);
  font-size:24px;
}

.siteFooterCol h3{
  margin:0 0 16px;
  color:var(--ink);
  font-size:22px;
}

.siteFooterCol a{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 12px;
  color:var(--muted);
  font-weight:850;
  text-decoration:none;
}

.siteFooterCol a::before{
  content:"›";
  color:var(--primary);
  font-size:24px;
  font-weight:900;
  line-height:1;
}

.siteFooterCol a:hover{
  color:var(--primary-700);
  text-decoration:none;
}

.siteFooterBottom{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:32px;
  padding-top:24px;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-weight:900;
}

.siteFooterBottom::before,
.siteFooterBottom::after{
  content:"";
  width:180px;
  height:1px;
  background:var(--border);
}

.siteFooterBottom span{
  color:var(--primary);
  font-size:24px;
}

.siteFooterBottom a{
  color:var(--muted);
  text-decoration:none;
}

.siteFooterBottom a:hover{
  color:var(--primary-700);
  text-decoration:none;
}

/* =========================================================
   Responsive bis 900px
   ---------------------------------------------------------
   Tablet und Smartphone: Header wird höher, Burger erscheint,
   Navigation klappt unter dem Header aus, Dropdown öffnet per Plus.
   ========================================================= */

@media(max-width:900px){

  .topbarInner{
    min-height:210px;
    position:relative;
    justify-content:center;
    gap:0;
  }

  .brand{
    position:absolute;
    top:18px;
    left:50%;
    margin:0;
    transform:translateX(-50%);
  }

  .brandLogo{
    width:165px;
    height:auto;
    padding:0;
    margin:0;
    transform:none;
  }

  .burgerBtn{
    position:absolute;
    left:24px;
    bottom:46px;
    display:flex;
    width:64px;
    height:64px;
    border:2px solid var(--ink);
    border-radius:7px;
    background:#fff;
  }

  .burgerBtn span{
    width:30px;
    height:4px;
    background:var(--ink);
  }

  .navToggle:checked + .burgerBtn span:nth-child(1){
    transform:translateY(9px) rotate(45deg);
  }

  .navToggle:checked + .burgerBtn span:nth-child(2){
    opacity:0;
  }

  .navToggle:checked + .burgerBtn span:nth-child(3){
    transform:translateY(-9px) rotate(-45deg);
  }

  .topbarCta{
    display:none;
  }

  .mainNav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    z-index:1001;

    display:none;
    width:100%;
    padding:0 22px 22px;

    background:#fff;
    border-top:1px solid var(--border);
  }

  .navToggle:checked + .burgerBtn + .mainNav{
    display:block;
  }

  .mainNav > a{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    min-height:74px;
    padding:0 18px;
    border-bottom:1px solid var(--border);
    border-radius:0;
    color:var(--ink);
    background:#fff;
    box-shadow:none;
    font-size:22px;
    font-weight:900;
    text-decoration:none;
  }

  .mainNav > a.isActive{
    color:var(--ink);
    background:#fff;
    box-shadow:none;
  }

  .mainNav > a.isActive::after{
    display:none;
  }

  .navDropdown{
    display:block;
    margin:0;
  }

  .navDropdownRow{
    display:flex;
    align-items:stretch;
    width:100%;
    min-height:74px;
    border-bottom:1px solid var(--border);
    background:#fff;
  }

  .navDropdownMain{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding:0 18px;
    border-radius:0;
    color:var(--ink);
    background:#fff;
    font-size:22px;
    font-weight:900;
    text-decoration:none;
  }

  .navDropdownToggle{
    display:flex;
    align-items:center;
    justify-content:center;
    width:72px;
    min-height:74px;
    border-left:1px solid var(--border);
    color:var(--ink);
    background:#fff;
    cursor:pointer;
    font-size:24px;
    font-weight:900;
  }

  .navDropdownMenu{
    position:static;
    display:none;
    min-width:0;
    padding:0;
    margin:0;
    border:0;
    border-radius:0;
    background:#fafafa;
    box-shadow:none;
  }

  .navDropdownMenu::before{
    display:none;
  }

  .navDropdown:hover .navDropdownMenu,
  .navDropdown:focus-within .navDropdownMenu,
  .navDropdownMenu:hover{
    display:none;
  }

  .navInfoToggle:checked ~ .navDropdownMenu{
    display:block;
  }

  .navInfoToggle:checked ~ .navDropdownRow .navDropdownToggle{
    font-size:0;
    background:#f7f7f7;
  }

  .navInfoToggle:checked ~ .navDropdownRow .navDropdownToggle::before{
    content:"−";
    font-size:28px;
    font-weight:900;
  }

  .navDropdownMenu a{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    min-height:56px;
    padding:0 18px 0 36px;
    border-bottom:1px solid var(--border);
    border-radius:0;
    color:var(--ink);
    background:#fafafa;
    font-size:17px;
    font-weight:800;
    text-decoration:none;
  }

  .navDropdownMenu a:hover{
    color:var(--primary-700);
    background:#f1f1f1;
  }

  .mobileCallBtn{
    display:inline-flex;
  }

  .featureGrid,
  .processGrid,
  .trustGrid,
  .billingGrid,
  .valuesGrid,
  .downloadGrid{
    grid-template-columns:1fr;
  }

  .contactButtons{
    flex-direction:column;
    align-items:stretch;
  }

  .contactBtn{
    width:100%;
  }

  .downloadPreview,
  .downloadIcon,
  .downloadOverlay{
    height:220px;
  }

  .downloadCategoryTitle{
    font-size:24px;
  }

  .downloadCategoryIcon{
    width:40px;
    height:40px;
    font-size:20px;
  }

  .siteFooterBox{
    padding:22px;
    border-radius:26px;
  }

  .siteFooterGrid{
    grid-template-columns:1fr;
    gap:22px;
  }

  .siteFooterBrand,
  .siteFooterCol{
    min-height:auto;
    padding-right:0;
    padding-bottom:22px;
    border-right:0;
    border-bottom:1px solid var(--border);
  }

  .siteFooterCol:last-child{
    border-bottom:0;
  }

  .siteFooterBottom{
    flex-wrap:wrap;
    text-align:center;
  }

  .siteFooterBottom::before,
  .siteFooterBottom::after{
    width:80px;
  }
}

/* =========================================================
   Responsive bis 560px
   ---------------------------------------------------------
   Kleine Smartphones: kompaktere Abstände und kleinere
   Logo-/Footer-Elemente.
   ========================================================= */

@media(max-width:560px){

  .wrap{
    padding:16px;
  }

  .topbarInner{
    min-height:195px;
  }

  .brandLogo{
    width:150px;
  }

  .burgerBtn{
    left:22px;
    bottom:38px;
    width:58px;
    height:58px;
  }

  .burgerBtn span{
    width:27px;
    height:3px;
  }

  .mainNav{
    padding:0 18px 22px;
  }

  .mainNav > a,
  .navDropdownRow{
    min-height:68px;
  }

  .navDropdownMain{
    font-size:20px;
  }

  .navDropdownToggle{
    width:66px;
    min-height:68px;
  }

  .siteFooterBottom::before,
  .siteFooterBottom::after{
    width:54px;
  }
}