:root{
  --wrap: 980px;           /* global content width */
  --kug-green: 173,204,97;   /* RGB */
  --kug-blue: 0,191,255;    /* RGB */
  --bg0: #07080b;           /* fast schwarz */
  --bg1: #0d1016;
  --card: rgba(255,255,255,.92);
  --text: #eef2f7;
  --text-dark: #101215;
  --muted: rgba(235,242,250,.72);
  --border: rgba(255,255,255,.10);
  --shadow: 0 16px 55px rgba(0,0,0,.40);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.65)),
    url("/assets/img/background-glow.png") center center / cover no-repeat fixed;
  background-attachment: fixed;
  line-height:1.55;
}

/* Farbige Streifen (im Vordergrund, aber dezent) */

/* Inhaltsebene */
.page{
  flex:1;
  display:flex;
  flex-direction:column;
}

a{
  color: inherit;
  text-decoration-color: rgba(var(--kug-blue), .85);
  text-underline-offset: 3px;
}
a:hover{
	color: rgba(var(--kug-green), 1);
	text-decoration-color: rgba(var(--kug-blue), 1);
}

.a-italic{
  color: inherit;
  text-decoration-color: rgba(var(--kug-blue), .85);
  text-underline-offset: 3px;
  font-style: italic;
}

.a-italic:hover{ 
	color: rgba(var(--kug-green), 1);
	text-decoration-color: rgba(var(--kug-blue), 1);
	font-style: italic;
}

.wrap{max-width: 1100px; width: min(1100px, calc(100% - 36px)); margin: 0 auto; padding: 18px;}

.topbar{
  position: sticky; top:0; z-index: 50;
  background: rgba(5,6,10,.55);
  border-bottom: 1px solid rgba(var(--kug-blue), .35);
  backdrop-filter: blur(14px);
}
.topbar::after{
  content:"";
  display:block;
  height: 3px;
  background: linear-gradient(90deg,
    rgba(var(--kug-green), .85),
    rgba(var(--kug-blue), .85)
  );
  opacity: .55;
}

.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap
}

.brand{display:flex; flex-direction:column; gap:2px}
.brand-title{font-weight: 900; letter-spacing: .3px  font-size: 20px;
}

/* optional line-break inside brand title on small screens */
.brand-break{ display:none; }

.brand-sub{font-size: 13px; color: var(--muted)}
.brand-title::after{
  content:"";
  display:block;
  height: 4px;
  width: 92px;
  margin-top: 6px;
  border-radius: 99px;
  background: linear-gradient(90deg,
    rgba(var(--kug-green), .95),
    rgba(var(--kug-blue), .95)
  );
  opacity: .9;
}

.nav{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.nav a{
  text-decoration:none;
  font-size: 14px;
  padding: 9px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
}
.nav a:hover{
  border-color: rgba(var(--kug-green), .55);
  background:
    linear-gradient(90deg,
      rgba(var(--kug-green), .22),
      rgba(var(--kug-blue), .18)
    );
}
.nav a.active{
  border-color: rgba(var(--kug-blue), .65);
  background:
    linear-gradient(90deg,
      rgba(var(--kug-green), .32),
      rgba(var(--kug-blue), .28)
    );
}

main.wrap{ flex: 1; }

.hero{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr; }
}

.card{
  color: var(--text-dark);
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.94),
      rgba(255,255,255,.88)
    );
  border: 1px solid rgba(var(--kug-blue), .18);
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 18px 70px rgba(0,0,0,.30);
}

/* Mehr farbliche Ansätze im Main: sanfte Tints */
.card.tint{
  background:
    radial-gradient(900px 500px at 0% 0%, rgba(var(--kug-blue), .18), transparent 55%),
    radial-gradient(900px 500px at 100% 20%, rgba(var(--kug-green), .18), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.88));
}

.card.accent-top{
  border-top: 6px solid rgba(var(--kug-green), .85);
}
.card.accent-top.blue{
  border-top-color: rgba(var(--kug-blue), .85);
}

.contact-padding{
	padding-left: 20px;
	color: rgba(16,18,21,.65);
}	

.muted{color: rgba(16,18,21,.65)}

h1{margin: 6px 0 12px 0; font-size: 32px}
h2{margin: 12px 0 10px 0; font-size: 22px}
h3{margin: 10px 0 8px 0; font-size: 16px}

.grid{
  display:grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.kpi{font-weight: 900; letter-spacing:.3px}

.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(var(--kug-green), .55);
  background:
    linear-gradient(90deg, rgba(var(--kug-green), .30), rgba(var(--kug-blue), .26));
  font-size: 13px;
  font-weight: 800;
}
.badge::before{
  content:"";
  width: 10px; height: 10px; border-radius: 999px;
  background: rgba(var(--kug-blue), .95);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 11px 14px;
  border-radius: 16px;
  border: 1px solid rgba(var(--kug-blue), .45);
  background:
    linear-gradient(90deg, rgba(var(--kug-blue), .22), rgba(var(--kug-green), .18));
  text-decoration:none;
  font-weight: 900;
}
.btn:hover{
  border-color: rgba(var(--kug-green), .75);
  background:
    linear-gradient(90deg, rgba(var(--kug-green), .32), rgba(var(--kug-blue), .30));
}

.media{
  overflow:hidden;
  border-radius: 18px;
  border: 1px solid rgba(var(--kug-blue), .30);
  background: rgba(0,0,0,.08);
}
.media img{display:block; width:100%; height:auto}

.hr{border:0; border-top: 1px solid rgba(var(--kug-blue), .18); margin: 18px 0}

.select{
  width: 100%;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(var(--kug-blue), .45);
  background:
    radial-gradient(700px 300px at 0% 0%, rgba(var(--kug-blue), .16), transparent 55%),
    radial-gradient(700px 300px at 100% 0%, rgba(var(--kug-green), .16), transparent 55%),
    linear-gradient(180deg, #ffffff, #f3f9ff);
}

.footer{
  border-top: 1px solid rgba(var(--kug-blue), .35);
  background: rgba(5,6,10,.55);
  backdrop-filter: blur(14px);
}
.footer::before{
  content:"";
  display:block;
  height: 3px;
  background: linear-gradient(90deg,
    rgba(var(--kug-blue), .85),
    rgba(var(--kug-green), .85)
  );
  opacity: .55;
}
.footer-inner{
  display:flex;
  gap:10px;
  justify-content:space-between;
  flex-wrap:wrap;
  color: rgba(235,242,250,.78);
  font-size: 14px
}

.small{font-size: 13px}


/* Footer row layout */
.footer-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}

.footer-link{
  color: rgba(var(--kug-blue), .95);
  font-weight:700;
}
.footer-link:hover{
  color: rgba(var(--kug-green), .95);
}


/* === v10 Glow Background Override === */
body{
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.65)),
    url("/assets/img/background-glow.png") center center / cover no-repeat fixed;
}


/* More transparent glass cards */
.card{
  background: rgba(255,255,255,.04) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12);
}

/* Reduce section overlays */
section{
  background: transparent !important;
}


/* === Readability fix (no typography changes) === */

/* Slightly darken glass panels behind text */
.card{
  background: rgba(0,0,0,.35) !important;
  border: 1px solid rgba(255,255,255,.18);
}

/* Improve text contrast on busy backgrounds */
.card, .card p, .card h1, .card h2, .card h3,
section, section p, section h1, section h2, section h3{
  text-shadow:
    0 1px 2px rgba(0,0,0,.65);
}

/* Hero text readability */
.hero h1, .hero p{
  text-shadow:
    0 2px 6px rgba(0,0,0,.75);
}


/* === Typography & color clarity === */
body{
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #ffffff;
}

p, li, span, a{
  color: #ffffff;
}

.muted{
  color: rgba(255,255,255,.75) !important;
}


/* === Heading color update === */
h1, h2, h3, h4, h5, h6{
  color: rgb(173,204,97);
}

.wrap{max-width:1100px;}


/* === v12: Responsive, consistent content width (based on Home) === */
:root{
  --content-max: 1100px;                 /* matches Home max width */
  --content-pad: clamp(14px, 4vw, 18px); /* responsive side padding */
}

.wrap{
  max-width: var(--content-max);
  width: min(var(--content-max), calc(100% - (var(--content-pad) * 2)));
  margin-left:auto;
  margin-right:auto;
  padding-left: var(--content-pad);
  padding-right: var(--content-pad);
}

/* Ensure main area never uses a different width */
main.wrap{width: min(var(--content-max), calc(100% - (var(--content-pad) * 2)));}


/* === v14: Team untereinander === */
.team-list{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.team-item{
  display:flex;
  gap:16px;
  align-items:flex-start;
}
.team-item img{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.18);
  object-fit:cover;
  flex:0 0 auto;
}
.team-meta h2{ margin-top:0; }

@media (max-width: 720px){
  .team-item{ flex-direction:column; align-items:stretch; }
  .team-item img{ width:214px; height:322px; margin:0 auto; }
}


/* === v16: KPI in KUG-Blau === */
.kpi{
  color: rgb(0,191,255);
}


/* === v17: KPI Filialen unter Außenansicht === */
.kpi-filialen{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-weight:700;
  margin: 18px 0 10px;
}

.filiale-image{
  display:flex;
  justify-content:center;
  align-items:flex-end;
}

.filiale-image img{
  max-width:100%;
  height:auto;
  border-radius:16px;
}

.btn-center{
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

.nav-dropdown{ position: relative; }
.nav-dropdown > a::after{ content: " ▾"; font-size: 12px; }
.nav-dropdown-menu{
  position: absolute;
  top: 110%;
  left: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  display: none;
  min-width: 160px;
  box-shadow: var(--shadow);
}
.nav-dropdown-menu a{
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
}
.nav-dropdown:hover .nav-dropdown-menu{
  display: block;
}

.home-mini-card{
  display: flex;
  flex-direction: column;
}
.home-mini-card .btn-center{
  margin-top: auto;
  padding-top: 10px;
}

/* v31 fixes: readable dropdown + reliable hover */
.nav{ margin-left: auto; } /* keep menu to the right */
.nav-dropdown{ position: relative; display: inline-flex; align-items: center; }
.nav-dropdown{ z-index: 200; }
.nav-dropdown > a{
  color: var(--text);
  background: rgba(var(--kug-blue), .04);
}
.nav-dropdown-menu{
  z-index: 300;
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  background: rgba(255,255,255,.98);
  color: var(--text);
  border: 1px solid rgba(var(--kug-blue), .18);
  border-radius: 14px;
  padding: 6px;
  min-width: 190px;
  box-shadow: var(--shadow);
}
.nav-dropdown-menu a{
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  display: block;
  width: 100%;
}
.nav-dropdown-menu a:hover{
  background: rgba(var(--kug-blue), .08);
  border-color: rgba(var(--kug-blue), .18);
}
/* Keep dropdown open when hovering the menu itself */
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu{
  display: block;
}

/* v31: stronger title size override */
.brand-title{ font-size: 22px !important; line-height: 1.15; }
@media (max-width: 900px){ .brand-title{ font-size: 19px !important; } }

/* v31: header layout – nav on the right, phone line under nav */
.topbar-inner{ align-items: flex-start; }
.brand{ flex: 1 1 auto; min-width: 260px; }
.nav-area{ display:flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; }
.nav{ justify-content: flex-end; }
.nav-sub{
  font-size: 13px;
  color: var(--muted);
}
.nav-sub a{ text-decoration: underline; text-decoration-color: rgba(var(--kug-blue), .45); }

/* v32: dropdown stays open when moving to items + styling matches nav */
.nav-dropdown{
  position: relative;
  display: inline-flex;
  align-items: stretch;
  /* extend hover area below the button so mouse can travel into menu */
  padding-bottom: 12px;
  margin-bottom: -12px; /* cancel layout shift */
}
.nav-dropdown > a{
  /* ensure same look as other nav links (in case overrides exist) */
  text-decoration:none;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(var(--kug-blue), .12);
  background: rgba(var(--kug-blue), .04);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
/* menu uses same palette as site (no bright/washed look) */
.nav-dropdown-menu{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(var(--kug-blue), .22);
  border-radius: 12px;
  padding: 6px;
  box-shadow: var(--shadow);
}
.nav-dropdown-menu a{
  /* match nav buttons, but as full-width entries */
  text-decoration:none;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(var(--kug-blue), .12);
  background: rgba(var(--kug-blue), .04);
  display:block;
  width:100%;
  white-space: nowrap;
}
.nav-dropdown-menu a:hover{
  background: rgba(var(--kug-green), .06);
  border-color: rgba(var(--kug-green), .18);
}
/* keep open while hovering either button area or menu */
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu{
  display:block;
}

/* v33: header container spans full width while keeping padding */
.topbar-wrap{ max-width: none !important; }

/* v33: push nav + phone to far right */
.nav-area{ margin-left: auto; align-items: flex-end; text-align: right; }
.nav{ justify-content: flex-end; }

/* v33: dropdown menu visual matches nav */
.nav-dropdown{ position: relative; display: inline-flex; align-items: center; }
.nav-dropdown-menu{
  position: absolute;
  top: calc(100% + 8px);
  right: 0; /* align menu under the right edge of the button */
  left: auto;
  z-index: 400;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(var(--kug-blue), .22);
  border-radius: 12px;
  padding: 6px;
  min-width: 190px;
  box-shadow: var(--shadow);
  display: none; /* JS toggles */
}
.nav-dropdown.is-open .nav-dropdown-menu{ display: block; }

.nav-dropdown-menu a{
  text-decoration:none;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(var(--kug-blue), .12);
  background: rgba(var(--kug-blue), .04);
  display:block;
  width:100%;
  white-space: nowrap;
}
.nav-dropdown-menu a:hover{
  background: rgba(var(--kug-green), .06);
  border-color: rgba(var(--kug-green), .18);
}

/* v34: Dropdown matches nav design and aligns left to Unterricht button */
.nav-dropdown-menu{
  left: 0;          /* align to left edge of button */
  right: auto;
  background: transparent;   /* no foreign panel background */
  border: none;
  box-shadow: none;
  padding: 6px 0 0 0;
}

.nav-dropdown-menu a{
  margin-top: 6px;
  /* identical to .nav a */
  text-decoration:none;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(var(--kug-blue), .12);
  background: rgba(var(--kug-blue), .04);
  display:block;
  white-space: nowrap;
}

.nav-dropdown-menu a:hover{
  background: rgba(var(--kug-green), .06);
  border-color: rgba(var(--kug-green), .18);
}

/* v35: Unterricht Dropdown – closer, black bg, nav-style hover */
.nav-dropdown-menu{
  top: calc(100% + 2px); /* closer to button */
  left: 0;
  right: auto;
  background: #000;
  border: none;
  border-radius: 10px;
  padding: 6px;
  box-shadow: var(--shadow);
}
.nav-dropdown-menu a{
  color: #fff;
  background: transparent;
  border-radius: 8px;
  padding: 8px 12px;
}
.nav-dropdown-menu a:hover{
  background: rgba(var(--kug-blue), .25);
}

/* v36: dropdown closer to Unterricht + clean header bottom */
.nav-dropdown-menu{
  top: 100%;           /* directly under button */
  margin-top: 0;       /* no gap */
}

/* remove unwanted bottom spacing in header */
header{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.topbar-inner{
  padding-bottom: 0 !important;
}

/* v37: dropdown almost touching Unterricht (<=3px) */
.nav-dropdown-menu{
  top: calc(100% + 3px);
}

/* v38: unify page width with Home */
.page-wrap, .content-wrap, main section.card{
  max-width: var(--wrap, 1200px);
  margin-left: auto;
  margin-right: auto;
}

/* v38: dropdown attached to Unterricht (no visible gap) */
.nav-dropdown-menu{
  top: 100%;
  margin-top: 1px; /* visually touching */
}

/* v39: force identical centering to Home */
main > section.card,
.page-wrap{
  margin-left: auto !important;
  margin-right: auto !important;
}

/* v42 – HTML5 centering helper */
.center { text-align: center; }

/* v42 – unified centering like Home */
.wrap, .page-wrap, main > section.card {
  margin-left: auto;
  margin-right: auto;
}

/* v46: Fix Unterricht button styling to match other header buttons (normal state) */
.nav-dropdown > a{
  text-decoration: none;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(var(--kug-blue), .12);
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* match the subtle button look used in the header */
  background: rgba(var(--kug-blue), .04);
}
.nav-dropdown > a:hover,
.nav-dropdown.is-open > a,
.nav-dropdown > a.active{
  background: rgba(var(--kug-green), .06);
  border-color: rgba(var(--kug-green), .18);
}

/* v46: Dropdown entries (Theorie/Praxis) smaller + centered text */
.nav-dropdown-menu a{
  font-size: 12px;
  padding: 4px 8px;
  text-align: center;
}


/* v49: Unterricht gets EXACT same hover/active effects as other nav buttons */
.nav-dropdown > a:hover,
.nav-dropdown.is-open > a,
.nav-dropdown > a.active {

  border-color: rgba(var(--kug-green), .55);
  background:
    linear-gradient(90deg,
      rgba(var(--kug-green), .22),
      rgba(var(--kug-blue), .18)
    );

}


/* Hover: green text like other nav buttons */
.nav-dropdown > a:hover{
  color: rgb(173,204,97); /* Kug green */
}

/* Active / open: kug-blue text */
.nav-dropdown.is-open > a,
.nav-dropdown > a.active{
  color: rgb(0,191,255); /* Kug blue */
}


/* Unterricht behaves exactly like other nav buttons */
.nav-dropdown > a:hover{
  border-color: rgba(var(--kug-green), .55);
  color: rgb(var(--kug-green));
  background:
    linear-gradient(90deg,
      rgba(var(--kug-green), .22),
      rgba(var(--kug-blue), .18)
    );
}
.nav-dropdown.is-open > a,
.nav-dropdown > a.active{
  border-color: rgba(var(--kug-blue), .65);
  color: rgb(var(--kug-blue));
  background:
    linear-gradient(90deg,
      rgba(var(--kug-green), .32),
      rgba(var(--kug-blue), .28)
    );
}


/* Inaktiv: exakt wie Home (keine Sonderregel nötig, bewusst leer) */

/* Hover: kug-green */
.nav-dropdown > a:hover{
  border-color: rgb(var(--kug-green));
  color: rgb(var(--kug-green));
  background:
    linear-gradient(90deg,
      rgba(var(--kug-green), .25),
      rgba(var(--kug-blue), .20)
    );
}

/* Aktiv: nur wenn Seite 'unterricht' aktiv ist */
.nav-dropdown > a.active,
/* Inaktiv: exakt wie Home */
.nav-dropdown > a{
  border-color: rgba(255,255,255,0.15);
  background: rgba(0,0,0,0.35);
  color: #fff;
}

/* Hover: kug-green */
.nav-dropdown > a:hover{
  border-color: rgb(var(--kug-green));
  color: rgb(var(--kug-green));
  background:
    linear-gradient(90deg,
      rgba(var(--kug-green), .25),
      rgba(var(--kug-blue), .20)
    );
}

/* Aktiv: Text wieder weiß, Rahmen blau */
.nav-dropdown > a.active,






/* v58: Unterricht states – no blue interim on mouseout */

/* Inaktiv: exakt wie Home (.nav a default) */
.nav-dropdown > a{
text-decoration:none;
  font-size: 14px;
  padding: 9px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
}

/* Hover: kug-green */
.nav-dropdown > a:hover{
  border-color: rgb(var(--kug-green));
  color: rgb(var(--kug-green));
  background:
    linear-gradient(90deg,
      rgba(var(--kug-green), .25),
      rgba(var(--kug-blue), .20)
    );
}

/* Aktiv: NUR wenn wirklich aktiv (auf Seite Unterricht => .active muss gesetzt sein) */
.nav-dropdown > a.active{
  border-color: rgb(var(--kug-blue));
  color: #fff;
  background:
    linear-gradient(90deg,
      rgba(var(--kug-green), .35),
      rgba(var(--kug-blue), .30)
    );
}

/* Hover auch im aktiven Zustand: Text kug-green */
.nav-dropdown > a.active:hover{
  color: rgb(var(--kug-green));
}

/* IMPORTANT: wenn Dropdown noch kurz "is-open" ist (JS close delay), aber nicht aktiv/hover,
   dann soll es sofort wie inaktiv aussehen (kein blaues Zwischenstadium). */
.nav-dropdown.is-open > a:not(:hover):not(.active){
text-decoration:none;
  font-size: 14px;
  padding: 9px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
}

/* v59: While Unterricht dropdown is open, keep text white */
.nav-dropdown.is-open > a{
  color: #fff;
}


/* While dropdown open, button shows active styling */
.nav-dropdown.is-open > a{
  border-color: rgb(var(--kug-blue));
  background:
    linear-gradient(90deg,
      rgba(var(--kug-green), .35),
      rgba(var(--kug-blue), .30)
    );
  color: #fff;
}


/* While dropdown is open -> show active look */
.nav-dropdown.is-open > a{
  border-color: rgb(var(--kug-blue));
  background:
    linear-gradient(90deg,
      rgba(var(--kug-green), .35),
      rgba(var(--kug-blue), .30)
    );
  color: #fff;
}

/* When on unterricht, theorie or praxis page -> treat Unterricht as active */
.page-unterricht .nav-dropdown > a,
.page-theorie .nav-dropdown > a,
.page-praxis .nav-dropdown > a{
  border-color: rgb(var(--kug-blue));
  background:
    linear-gradient(90deg,
      rgba(var(--kug-green), .35),
      rgba(var(--kug-blue), .30)
    );
  color: #fff;
}







/* Inactive: identical to Home (.nav a default) */
.nav-dropdown > a{
text-decoration:none;
  font-size: 14px;
  padding: 9px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
}

/* Keep dropdown positioned with no hover gap */
.nav-dropdown{ position: relative; }
.nav-dropdown-menu{ margin-top: -2px; }

/* ACTIVE state for Unterricht (page active OR dropdown open) */
.page-unterricht .nav-dropdown > a,
.page-theorie .nav-dropdown > a,
.page-fahren .nav-dropdown > a,
.nav-dropdown.is-open > a{
  border-color: rgb(var(--kug-blue));
  background: linear-gradient(90deg, rgba(var(--kug-green), .35), rgba(var(--kug-blue), .30));
  color: #fff;
}

/* Hover while ACTIVE: ONLY text turns kug-green (no other changes) */
.page-unterricht .nav-dropdown > a:hover,
.page-theorie .nav-dropdown > a:hover,
.page-fahren .nav-dropdown > a:hover,
.nav-dropdown.is-open > a:hover{
  color: rgb(var(--kug-green));
}

/* Hover while INACTIVE: normal hover effect (green border/text + gradient) */
.nav-dropdown:not(.is-open) > a:hover{
  border-color: rgb(var(--kug-green));
  color: rgb(var(--kug-green));
  background: linear-gradient(90deg, rgba(var(--kug-green), .25), rgba(var(--kug-blue), .20));
}

/* v60 FINAL – explicit is-active logic for Unterricht */

/* Inactive: identical to Home */
.nav-dropdown > a{
text-decoration:none;
  font-size: 14px;
  padding: 9px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
}

/* Dropdown positioning (no hover gap) */
.nav-dropdown{ position: relative; }
.nav-dropdown-menu{ margin-top: -2px; }

/* ACTIVE state (page active OR menu open) */
.nav-dropdown > a.is-active{
  border-color: rgb(var(--kug-blue));
  background: linear-gradient(90deg, rgba(var(--kug-green), .35), rgba(var(--kug-blue), .30));
  color: #fff;
}

/* Hover while ACTIVE: ONLY text turns green */
.nav-dropdown > a.is-active:hover{
  color: rgb(var(--kug-green));
}

/* Hover while INACTIVE */
.nav-dropdown > a:not(.is-active):hover{
  border-color: rgb(var(--kug-green));
  color: rgb(var(--kug-green));
  background: linear-gradient(90deg, rgba(var(--kug-green), .25), rgba(var(--kug-blue), .20));
}

/* v61: Fahrzeuge – Bildhöhe anpassen */
.page-fahrzeuge .media img,
.page-fahrzeuge img.fahrzeug{
  max-height: 420px;
  width: auto;
  object-fit: contain;
}



/* v66: Klassen – Lizenzbilder im jeweiligen Block */
.license-row{
  display:flex;
  align-items:center;
  gap:22px;
  margin: 0 0 10px 0;
}
.license-row img{
  height:100px;
  width:auto;
  border-radius:18px;
  border:1px solid rgb(var(--kug-blue));
  flex-shrink:0;
  display:block;
}
.license-row .license-text{
  flex:1;
}

/* Utility: visually hidden but accessible */
.sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* v70: Klasse D Bild */
.license-row-d img{
  height:76px;
  width:auto;
}

/* v71: Klasse D Bild vor Text */
.license-row-d img{
  height:76px;
  width:auto;
}

/* v72: Weitere Klassen-Bilder (wie D) */
.license-row-76 img{
  height:50px;
  width:auto;
}

/* v74: Klasse D – feste Breite */
.license-row-d img{
  width:147px;
  height:auto;
}

/* v75: Klassen L & T */
.license-row-tractor img{
  width:147px;
  height:auto;
}

/* v77: L & T wie übrige 50px-Zeilen, aber feste Breite 147px */
.license-row-dfixed img{
  width:147px;
  height:auto;
}

/* v77: A1/A2/A/B/B196 – Bild 68px nach rechts für gleichmäßigen Textlauf */
.license-row-offset img{
  margin-left:68px;
}

/* v0.80.2: AM + AM Microcar stacked */
.license-stack{
  display:flex;
  flex-direction:column;
  gap:6px;
}


/* v0.80.3: AM + AM Microcar gleiche Größe, untereinander */
.license-stack{
  display:flex;
  flex-direction:column;
  gap:6px;
}


/* v0.80.4: AM + AM Microcar je 100px Höhe */
#cls-am .license-stack img{
  height:100px;
  width:auto;
}

/* v0.80.9: Fahrzeuge – Bild volle Breite, Höhe automatisch */
.vehicle-image img,
.fahrzeuge-image img{
  width:100%;
  height:auto;
  object-fit:contain;
}

/* v0.80.9: Fahrzeuge – Audi-Bild vollständig sichtbar (kein Cropping) */
.page-fahrzeuge .media img{
  width:100% !important;
  height:auto !important;
  max-height:none !important;
}

/* v0.81.0: Social embeds (2-click) */
.embed-consent{
  position:relative;
  border:1px solid rgba(0,191,255,.45);
  border-radius:18px;
  overflow:hidden;
  background:rgba(0,0,0,.35);
}
.embed-placeholder{
  padding:14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.embed-placeholder p{
  margin:0;
  flex:1 1 240px;
}
.embed-consent iframe{
  width:100%;
  border:0;
  display:block;
  min-height:520px;
  background:#000;
}
.btn.btn-small{
  padding:8px 12px;
  font-size:.95rem;
}

/* v0.82.0: Cookie banner */
.cookie-banner{
  position:fixed;
  left:0; right:0; bottom:-320px;
  padding:12px;
  z-index:9999;
  transition:bottom .25s ease;
}
.cookie-banner.show{ bottom:0; }
.cookie-banner-inner{
  max-width:1100px;
  margin:0 auto;
  border:1px solid rgba(0,191,255,.45);
  border-radius:18px;
  background:rgba(0,0,0,.85);
  padding:14px;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
}
.cookie-banner-text{ color:#fff; font-size:.98rem; line-height:1.3; }
.cookie-banner-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* v0.82.0: Google Reviews */
.google-reviews{
  border:1px solid rgba(0,191,255,.45);
  border-radius:18px;
  background:rgba(0,0,0,.35);
  padding:14px;
}
.reviews-head{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; flex-wrap:wrap; }
.reviews-list{ display:grid; gap:10px; margin-top:10px; }
.review{
  border:1px solid rgba(173,204,97,.35);
  border-radius:18px;
  padding:12px;
  background:rgba(0,0,0,.25);
}
.review-top{ display:flex; justify-content:space-between; gap:10px; align-items:baseline; flex-wrap:wrap; }
.review-author{ color:#fff; font-weight:600; }
.review-meta{ color:rgba(173,204,97,.95); font-size:.95rem; }
.review-text{ color:#ddd; margin-top:6px; white-space:pre-wrap; }

/* v0.82.0: Social embed placeholders */
.embed-consent{
  border:1px solid rgba(0,191,255,.45);
  border-radius:18px;
  overflow:hidden;
  background:rgba(0,0,0,.35);
}
.embed-placeholder{
  padding:14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.embed-placeholder p{ margin:0; flex:1 1 240px; }
.btn.btn-small{ padding:8px 12px; font-size:.95rem; }

/* v0.82.1: Home quicklinks grid responsiveness */
@media (max-width: 900px){
  .wrap .grid[style*="repeat(3"]{ grid-template-columns: 1fr !important; }
}

/* v0.82.3: tighten quicklinks spacing on Home */
.home-quicklinks{ margin-top: 6px !important; }


/* v0.82.10: Cookie banner interaction fix (prevent invisible overlay blocking clicks) */
.cookie-banner{ pointer-events:none; transform: translateY(120%); bottom:0 !important; }
.cookie-banner.show{ pointer-events:auto; transform: translateY(0); }


/* v0.83.4: DSGVO/TDDDG consent banner wiring + modal markup (Google Reviews only) */
.cookie-banner{
  position:fixed;
  left:0; right:0; bottom:0;
  padding:12px;
  z-index:9999;
  transform: translateY(120%);
  transition: transform .25s ease;
  pointer-events:none;
}
.cookie-banner.show{ transform: translateY(0); pointer-events:auto; }
.cookie-banner-inner{
  max-width:1100px;
  margin:0 auto;
  border:1px solid rgba(0,191,255,.45);
  border-radius:18px;
  background:rgba(0,0,0,.90);
  padding:14px;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
}
.cookie-banner-text{ color:#fff; font-size:.98rem; line-height:1.3; }
.cookie-banner-actions{ display:flex; gap:10px; flex-wrap:wrap; }

.cookie-modal{
  position:fixed; inset:0;
  z-index:10000;
  display:none;
}
.cookie-modal.show{ display:block; }
.cookie-modal-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.65); }
.cookie-modal-card{
  position:relative;
  max-width:720px;
  margin: 10vh auto 0 auto;
  border:1px solid rgba(0,191,255,.45);
  border-radius:18px;
  background:rgba(0,0,0,.92);
  padding:14px;
}
.cookie-modal-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; color:#fff; }
.cookie-modal-body{ margin-top:10px; color:#ddd; }
.cookie-option{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border:1px solid rgba(173,204,97,.25);
  border-radius:18px;
  background:rgba(0,0,0,.25);
  margin-top:10px;
}
.cookie-option-left{ color:#fff; }
.cookie-option-right{ display:flex; align-items:center; gap:10px; }

.switch{ position:relative; display:inline-block; width:48px; height:26px; }
.switch input{ opacity:0; width:0; height:0; }
.slider{
  position:absolute; cursor:pointer;
  top:0; left:0; right:0; bottom:0;
  background: rgba(255,255,255,.18);
  transition:.2s;
  border-radius:999px;
  border:1px solid rgba(0,191,255,.35);
}
.slider:before{
  position:absolute; content:"";
  height:20px; width:20px;
  left:3px; bottom:2px;
  background:white;
  transition:.2s;
  border-radius:999px;
}
.switch input:checked + .slider{ background: rgba(173,204,97,.35); border-color: rgba(173,204,97,.75); }
.switch input:checked + .slider:before{ transform: translateX(22px); }

.cookie-banner-actions .btn{ min-width: 150px; text-align:center; }
@media (max-width: 700px){
  .cookie-banner-actions .btn{ min-width: 0; flex: 1 1 140px; }
  .cookie-banner-inner{ flex-direction:column; align-items:stretch; }
}


/* v0.83.4: green links for consent actions in reviews */
.footer-link.kug-green{ color: rgba(var(--kug-green), 1) !important; }
.footer-link.kug-green:hover{ opacity:.85; }

/* FORCE Cookie Button Text Color */
#cookie-banner button,
#cookie-modal button{
  color:#ffffff !important;
}


.rezensionskeks{
  color: rgba(var(--kug-green), .95);
  font-weight:700;
}
.rezensionskeks:hover{
  color: rgba(var(--kug-blue), .95);
}

/* Cookie banner: show by default if JS is blocked (e.g., security extensions) */
.no-js .cookie-banner{ bottom:0 !important; }
.js .cookie-banner{ bottom:-320px; }
.js .cookie-banner.show{ bottom:0; }

/* v0.83.14: Star rendering */
.stars-gold{ color:#d4af37 !important; letter-spacing:1px; }
.reviews-title{ color: rgba(var(--kug-blue), .95); font-weight:700; }


/* v0.83.16: Review header spacing */
.reviews-title{ margin-bottom:2px; }
.reviews-head .muted.small{ margin-top:2px; }

/* v0.83.18: ensure cookie banner stays on top */
.cookie-banner{ z-index:2147483647; }
.cookie-banner.show{ opacity:1; visibility:visible; pointer-events:auto; }

/* v0.83.20: Neutral IDs/classes to reduce extension cosmetic blocking */
.kug-banner{ position:fixed; left:0; right:0; bottom:-320px; padding:12px; z-index:9999; transition:bottom .25s ease; }
.kug-banner.show{ bottom:0; }
.kug-banner-inner{ max-width:1100px; margin:0 auto; border:1px solid rgba(0,191,255,.45); border-radius:18px; background:rgba(0,0,0,.85); padding:14px; display:flex; gap:12px; align-items:center; justify-content:space-between; }
.kug-banner-text{ color:#fff; font-size:.98rem; line-height:1.3; }
.kug-modal{ position:fixed; inset:0; z-index:10000; display:none; }
.kug-modal.show{ display:block; }
.kug-modal-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.65); }

/* v0.83.20: Review meta layout */
.review-meta{ display:flex; align-items:center; gap:10px; }
.review-meta .stars-gold{ color:#d4af37 !important; letter-spacing:1px; }
.review-time{ color: rgba(255,255,255,.70); font-size:.9rem; }

/* v0.83.21: UI polish */

/* Cookie banner button alignment */
.kug-banner .kug-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
  align-items:center;

  row-gap: 16px;
}
.kug-banner .kug-actions button,
.kug-banner .kug-actions a{
  min-width:160px;
}

/* Reviews: keep stars and time close */
.review-meta{
  display:flex;
  align-items:center;
  gap:8px;
  line-height:1.2;
}
.review-meta .stars-gold{
  margin:0;
  white-space:nowrap;
}
.review-meta .review-time{
  margin:0;
  opacity:.85;
}


/* Mofa page hero image */
.mofa-hero{display:flex;justify-content:center;align-items:center;margin:18px 0 8px;}
.mofa-image{max-width:min(720px, 100%);height:auto;display:block;}

/* v0.83.25 – image framing */
.kug-frame{
  border:1px solid rgba(var(--kug-blue), .95);
  border-radius:18px;
  overflow:hidden;
  position:relative;
}


/* v0.83.26 – rounded images without border */
.kug-rounded{
  border-radius:18px;
  overflow:hidden;
}

/* v0.83.26 – fade to transparent at edges */
.kug-fade{
  display:block;
  width:100%;
  height:auto;
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 62%, rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 62%, rgba(0,0,0,0) 100%);
}

.reviews-open-row{
  display:flex;
  gap:10px;
  margin-top:10px;
}
.reviews-open-row .btn{
  flex:1;
  text-align:center;
}


}

/* v0.83.31 – home layout */
.fullbleed-section{
  width:100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.hero.fullbleed-section{
  padding-left:0;
  padding-right:0;
}
.hero.fullbleed-section .card{
  width:100%;
  max-width:none;
  border-radius:0;
}
.reviews-intro{ margin-bottom:10px; }
.reviews-two{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
@media (max-width: 900px){
  .reviews-two{ grid-template-columns: 1fr; }
}

/* v0.83.32 – hero card readable width on full-bleed background */
.hero.fullbleed-section .hero-card{
  max-width: 980px;
  margin: 0 auto;
}

.emoji{
	height: 14px;
}

/* v0.83.37 – Home Hero Image */
.hero-image-wrap{
  margin-top:16px;
}
.hero-image{
  width:100%;
  height:auto;
  border-radius:18px;
}

/* v0.83.38 – reviews full width alignment */
.reviews-full{
  width:100%;
  max-width:980px;
  margin:0 auto;
}

.reviews-two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

@media(max-width:900px){
  .reviews-two{
    grid-template-columns:1fr;
  }
}

/* v0.83.39 – align hero and reviews width + fix columns */
.section.fullbleed-section{
  width:100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.section.fullbleed-section > .card{
  max-width: 980px;
  margin: 0 auto;
}
.hero-card{ max-width: 980px; margin: 0 auto; }
.reviews-full{ max-width: 980px; margin: 0 auto; }

.reviews-two{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 12px;
}
@media(max-width:900px){
  .reviews-two{ grid-template-columns: 1fr; }
}


/* --- Mobile navigation (hamburger) --- */
.nav-burger{
  display:none;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.20);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.nav-burger span{
  display:block;
  width:18px;
  height:2px;
  background: rgba(255,255,255,.90);
  border-radius:4px;
}
.nav-mobile{
  margin-top:10px;
  padding:10px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  /* darker panel background for readability on mobile */
  background: rgba(0,0,0,.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* mobile menu links used by header.php */
.nav-mobile .nav-mobile-links{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.nav-mobile .nav-mobile-links a{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  width:100%;
  min-height:44px;
  padding:10px 12px;
  border-radius:14px;
  text-decoration:none;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
}
.nav-mobile .nav-mobile-links a:hover{
  border-color: rgba(var(--kug-green), .55);
  background: rgba(255,255,255,.11);
}
.nav-mobile .nav-mobile-links a.active{
  background: linear-gradient(90deg, rgba(var(--kug-green), .35), rgba(var(--kug-blue), .35));
  border-color: rgba(255,255,255,.18);
}
body.mobile-nav-open{
  overflow:hidden;
}

/* Backdrop overlay behind the mobile menu (prevents page content shining through) */
.nav-mobile-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.78);
  /* below sticky header (z-index: 50), above page content */
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
body.mobile-nav-open .nav-mobile-overlay{
  opacity: 1;
  pointer-events: auto;
}

/* Responsive behavior */
@media (max-width: 900px){
  header .nav-area{ display:flex; align-items:center; gap:10px; }
  header .nav-area > .nav{ display:none; } /* hide desktop nav */
  .nav-burger{ display:flex; }
  .nav-sub{ display:none; }
  .wrap{ padding-left:14px; padding-right:14px; }
  .card{ border-radius:18px; }
  h1{ word-break: break-word; }

  /* Header alignment: burger on the same top line as the title */
  .topbar .wrap.topbar-inner{ align-items:flex-start !important; }
  .topbar-right{ align-items:flex-start !important; }
  .brand-title{ line-height: 1.15; }
  .brand-break{ display:block; }
}

/* hide mobile-only line break on desktop */
.brand-break{ display:none; }


/* Cookie banner link-style button */
.kug-banner-link{
  background:none !important;
  border:0 !important;
  padding:0;
  margin:0;
  color: var(--kug-blue);
  text-decoration: underline;
  cursor:pointer;
  font-weight:600;
}
.kug-banner-link:hover{
  color: rgba(var(--kug-green), 1);
}


/* ===== Legal pages headings ===== */
.legal-title{
  color: rgba(var(--kug-green), 1);
}


/* ===== Mobile Klassen-Seite Lesbarkeit ===== */
@media (max-width: 900px){
  .license-row{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .license-row img{
    height: 50px; /* half size */
    border-radius: 14px;
  }
  .license-row-offset img{
    margin-left: 0 !important;
  }
  .license-stack{
    display:flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  .license-row .license-text{
    width: 100%;
  }
}


/* ===== Mobile Hamburger Menu v0.84.x (consolidated) ===== */
.nav-burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:42px;
  height:42px;
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;
}
.nav-burger span{
  width:26px;
  height:3px;
  background: rgba(255,255,255,.92);
  display:block;
  border-radius:3px;
}

/* hidden attribute must always win */
.nav-mobile[hidden]{ display:none !important; }

/* Default: desktop only */
.nav-desktop{ display:flex; }
.nav-mobile{ display:none; }
.nav-burger{ display:none; }

@media (max-width: 900px){
  .nav-area{ position: relative; }
  .nav-desktop{ display:none !important; }
  .nav-sub{ display:none !important; }
  .nav-burger{ display:flex !important; }

  /* Mobile panel: overlay directly under burger (does NOT push page) */
  .nav-mobile{
    display:block;
    position:absolute;
    top:52px;
    right:0;
    width: min(340px, calc(100vw - 32px));
    max-height: calc(100vh - 140px);
    overflow:auto;
    z-index: 9999;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 70px rgba(0,0,0,.35);
    text-align:left;
  }

  /* Text-only links, left aligned */
  .nav-mobile-links{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap: 6px;
    text-align:left;
  }
  .nav-mobile-links a{
    display:block;
    width:100%;
    padding: 4px 0;
    margin:0;
    background: transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    color: rgba(255,255,255,.92);
    text-decoration:none;
    font-weight:600;
    text-align:left;
  }
  .nav-mobile-links a:hover,
  .nav-mobile-links a.active{ text-decoration: underline; }

  .nav-group{ width:100%; }
  .nav-group-title{
    display:block;
    font-weight:800;
    color: rgba(255,255,255,.92);
    margin: 0;
    text-align:left;
  }
  .nav-subitem{
    display:block;
    width:100%;
    padding-left: 18px !important;
    opacity: .95;
  }

  /* HR lines: 1px, stronger, alternating gradients */
  .nav-mobile-links hr{
    width:100%;
    height:1px;
    border:0;
    margin: 1px 0;
    background: linear-gradient(90deg,
      rgba(var(--kug-green), .95),
      rgba(var(--kug-blue), .95)
    );
  }
  .nav-mobile-links hr:nth-of-type(even){
    background: linear-gradient(90deg,
      rgba(var(--kug-blue), .95),
      rgba(var(--kug-green), .95)
    );
  }
}


/* ===== Klassen: nicht mehr selbst ausgebildet ===== */
.license-inactive-hr{
  width:100%;
  height:1px;
  border:0;
  margin: 8px 0 6px;
  background: linear-gradient(90deg,
    rgba(var(--kug-green), .95),
    rgba(var(--kug-blue), .95)
  );
}

/* Automatic line breaks that respect words (no mid-word breaks) */
.license-text,
.license-text p,
.license-text li{
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}


/* Mobile-only helper */
.mobile-only{ display:none; }
@media (max-width: 900px){
  .mobile-only{ display:inline; }
}


/* ===== Desktop: slimmer header + menu right beside title ===== */
@media (min-width: 901px){
  .topbar .wrap.topbar-inner{
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .topbar-inner{
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
  }
  .brand{flex: 0 0 auto;}
  .brand-title{
    font-size: 18px;
    white-space: nowrap;
  }
  .nav-area{flex: 1 1 auto; display:flex; justify-content:flex-end;}
  .nav-desktop{white-space: nowrap;}
}

/* ===== Desktop: dropdown entries narrower ===== */
.nav-dropdown-menu{
  min-width: 120px;
  padding: 4px;
}
.nav-dropdown-menu a{
  padding: 6px 10px;
}

/* ===== Mobile: exactly one blank line under the colored bar ===== */
@media (max-width: 900px){
  .brand-title::after{ margin-bottom: 12px; }
}


/* ===== Klassen: Trennlinie nur mobil anzeigen ===== */
@media (min-width: 901px){
  .license-inactive-hr{ display:none !important; }
}

/* Smaller note text (same color) */
.license-note-small{ font-size: .95em; color: inherit; }


/* ===== One-page desktop layout (v0.85.0) ===== */
.onepage{
  padding-left: 290px; /* space for floating menu */
}

/* Floating menu: matches card/section aesthetic */
@media (min-width: 901px){
  .side-nav{
    position: fixed;
    left: 18px;
    top: 120px;
    width: 240px;
    z-index: 9999;
    padding: 14px;
    border-radius: 18px;
    background: rgba(0,0,0,.55);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: none !important;/* 0 18px 70px rgba(0,0,0,.28);*/
  }

  .side-nav .nav-btn,
  .side-nav .nav-subbtn{
    display:block;
    text-decoration:none;
    border-radius: 14px;
    padding: 10px 12px;
    margin: 6px 0;
    font-weight: 800;
    color: rgba(255,255,255,.96);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
  }

  .side-nav .nav-subbtn{
    /* Subitems: whole button indented, right edge stays aligned */
    margin-left: 18px;
    width: calc(100% - 18px);
    box-sizing: border-box;
    padding-left: 14px;
    font-weight: 700;
    opacity: .92;
  }

  .side-nav a:hover{ background: rgba(255,255,255,.10); }
  .side-nav a.active{
    background: linear-gradient(90deg, rgba(var(--kug-green), .35), rgba(var(--kug-blue), .35)) !important;
    border-color: rgba(255,255,255,.18) !important;
  }

  /* Sticky header + footer in foreground */
  header{ position: sticky; top: 0; z-index: 9998; }
  footer{ position: static !important; }

  .footer-contact{ display:none !important; }

  /* Prevent content under footer */
  main.onepage{ padding-bottom: 40px; }

  /* Hide header's desktop menu (we use side menu) */
  .nav-desktop{ display:none !important; }
}

@media (max-width: 900px){
  .side-nav{ display:none; }
  .onepage{ padding-left: 0; }
}

/* Anchor offset */
.onepage section{ scroll-margin-top: 110px; }

/* ===== One-page: sections always to the right of side menu, responsive width ===== */
@media (min-width: 901px){
  .onepage{
    padding-left: 290px !important; /* keep space for side menu */
    padding-right: 18px;
  }
  .onepage .section.fullbleed-section{
    width: 100%;
  }
  .onepage .section.fullbleed-section > .card{
    width: 100%;
    max-width: none;              /* responsive to viewport */
    margin-left: 0;
    margin-right: 0;
  }
}

.onepage-endspacer{height: 500px;}

/* ===== One-page desktop adjustments (v0.85.2) ===== */
@media (min-width: 901px){
  /* header like footer: fixed in foreground */
  header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9998;
  }

  /* reserve space for fixed header */
  body{ padding-top: 120px; }

  /* sections always to the right of the menu */
  .onepage{
    padding-left: 330px !important;
    padding-right: 18px;
  }

  /* unify section spacing (use the same gap everywhere) */
  .onepage .section.fullbleed-section{
    margin-bottom: 26px;
  }

  /* ensure cards never slide under the menu */
  .onepage .section.fullbleed-section > .card{
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* footer already fixed; prevent overlap */
  main.onepage{ padding-bottom: 140px; }

  /* button width adapts to widest content */
  .side-nav{
    width: fit-content;
    min-width: 230px;
  }
  .side-nav .nav-btn,
  .side-nav .nav-subbtn{
    width: 100%;
    white-space: nowrap;
  }
    .side-nav .nav-btn[href="#klassen"] br{ display: inline; } /* allow desired break */
}
@media (max-width: 900px){
  body{ padding-top: 0; }
}

/* ===== Fix: fullbleed sections must not slide under the desktop side menu ===== */
@media (min-width: 901px){
  .onepage .section.fullbleed-section{
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ===== v0.85.9 Desktop: header fixed + content never behind side menu ===== */
@media (min-width: 901px){
  header{
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10010; /* above side-nav */
  }

  /* Reserve space for fixed header */
  body{
    padding-top: 120px;
  }

  .side-nav{
    z-index: 10000;
    top: 140px; /* below header */
    width: max-content;
    min-width: 230px;
  }

  /* Onepage content lives to the right of the menu */
  .onepage{
    padding-left: 340px !important;
    padding-right: 18px;
  }

  /* Override historical fullbleed rules on desktop onepage */
  .onepage .fullbleed-section,
  .onepage .section.fullbleed-section{
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Cards should stretch with viewport width (right of menu) */
  .onepage .section.fullbleed-section > .card,
  .onepage .fullbleed-section > .card{
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Consistent spacing between all sections */
  .onepage .section.fullbleed-section{
    margin-bottom: 26px;
  }

  /* Footer fixed stays in foreground; ensure end isn't hidden */
  footer{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 10005;
  }
  main.onepage{ padding-bottom: 140px; }
}

/* ===== v0.85.10 Cookie banner above fixed footer ===== */
#kug-banner{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10050; /* above footer */
}
#kug-modal{
  z-index: 10060;
}

/* ===== v0.85.10 Datenschutz heading in KuG green ===== */
#datenschutz h1, #datenschutz h2, #datenschutz .page-title{
  color: rgb(var(--kug-green)) !important;
}

/* ===== v0.85.10 Side menu slimmer ===== */
@media (min-width: 901px){
  .side-nav{
    padding: 10px !important;
    border-radius: 16px;
    min-width: 0 !important;
    width: 205px !important;
  }
  .side-nav .nav-btn,
  .side-nav .nav-subbtn{
    padding: 8px 10px !important;
    border-radius: 12px;
    margin: 5px 0 !important;
    white-space: normal !important;
    line-height: 1.15;
  }
}

/* ===== v0.85.10 Dynamic content width right of menu ===== */
@media (min-width: 901px){
  :root{ --side-nav-w: 205px; }
  .onepage{
    padding-left: calc(var(--side-nav-w) + 60px) !important;
    padding-right: 18px !important;
  }
}

/* ===== v0.85.12 Full-width content to right edge ===== */
@media (min-width: 901px){
  .onepage{
    padding-left: calc(var(--side-nav-w) + 36px) !important; /* menu width + gap */
    padding-right: 0 !important; /* reach right edge */
  }
  .onepage .card{
    max-width: none !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  .onepage .page-wrap{
    max-width: none !important;
    width: 100% !important;
  }
  .side-nav{
    width: 190px !important; /* slimmer */
  }
  .kug-banner-actions--stack{
    text-align: center;
  }
  .kug-banner-actions--stack .kug-banner-line{
    display: block;
    margin: 0 auto;
  }
  .kug-banner-actions--stack .kug-banner-line + .kug-banner-line{
    margin-top: 6px;
  }
  .kug-banner-sep{
    display: inline-block;
    margin: 0 8px;
    opacity: .85;
  }
}

/* ===== v0.85.12 Contact form ===== */
.contact-form-card{
  margin-top: 18px;
}
.contact-form{
  display: grid;
  gap: 12px;
}
.contact-form .row{
  display: grid;
  gap: 12px;
}
@media (min-width: 701px){
  .contact-form .row.two{ grid-template-columns: 1fr 1fr; }
  .contact-form .row.three{ grid-template-columns: 1fr 1fr 1fr; }
}
.contact-form label{
  display:block;
  font-weight: 800;
  margin-bottom: 6px;
}
.contact-form input,
.contact-form select,
.contact-form textarea{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.95);
  box-sizing: border-box;
}
.contact-form textarea{ min-height: 130px; resize: vertical; }
.contact-form .checkbox-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 8px 12px;
}
@media (max-width: 700px){
  .contact-form .checkbox-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
.contact-form .chk{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:700;
}
.contact-form .smallhint{
  opacity:.85;
  font-size:.92em;
}

/* ===== v0.85.13 Wider onepage content (no 980px cap) ===== */
@media (min-width: 901px){
  .onepage,
  .onepage .page-wrap,
  .onepage .content-wrap{
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .onepage .section.fullbleed-section > .card{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ===== v0.85.13 Side menu subitems indented ===== */
@media (min-width: 901px){
  .side-nav .nav-subbtn{
    margin-left: 18px !important;
    padding-left: 16px !important;
    opacity: .95;
  }
}

/* ===== v0.85.13 Link hover visibility ===== */
.rezensionskeks{ text-decoration: none; }
.rezensionskeks:hover{ text-decoration: underline; }


/* ===== v0.85.14 remove 980px cap on desktop ===== */
@media (min-width: 901px){
  .section.fullbleed-section > .card{
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
  }
}

/* v0.85.16 Cookie banner vertical actions */
.cookie-actions-vertical{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

/* ===== v0.85.18 Cookie-Link-Design (Banner + Kekse) ===== */
/* Normal: Text kug-green, Unterstreichung kug-blue */
.rezensionskeks{
  color: rgba(var(--kug-green), .95) !important;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(var(--kug-blue), .95);
  text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .2s ease;
}

/* Hover: Text kug-blue, Unterstreichung kug-green */
.rezensionskeks:hover{
  color: rgba(var(--kug-blue), .95) !important;
  text-decoration-color: rgba(var(--kug-green), .95);
}

/* Cookie-Banner: Links einzeilig untereinander (kein Zeilenumbruch innerhalb des Links) */
#kug-banner .rezensionskeks{
  display: block;
  white-space: nowrap;
}
.cookie-text p{
    margin-top: 6px;
    line-height: 1.4;
}

/* ===== v0.85.17 Fix: Side-Nav Subbuttons right edge aligned ===== */
@media (min-width: 901px){
  .side-nav{ box-sizing: border-box; }
  .side-nav .nav-btn,
  .side-nav .nav-subbtn{
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Subitems: indent the WHOLE button, but keep right edge aligned */
  .side-nav .nav-subbtn{
    --sub-indent: 18px;
    margin-left: var(--sub-indent) !important;
    width: calc(100% - var(--sub-indent)) !important;
    padding-left: 14px !important;
  }
}


/* v0.85.20 fixes */

/* Header version (right aligned with some padding) */
.topbar .topbar-inner{ position: relative; }
.site-version{
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: rgb(30,30,30);
  font-size: 14px;
  line-height: 1;
  pointer-events: none;
}

/* Hide cookie banner when consent is set */
.kug-banner.is-hidden{ display: none !important; }

/* Side-nav: sub buttons indented but keep right edge aligned */
.side-nav a{
  box-sizing: border-box;
}
.side-nav a.nav-subbtn{
  --sub-indent: 18px;
  margin-left: var(--sub-indent) !important;
  width: calc(100% - var(--sub-indent)) !important;
}

/* Contact form: labels + checkbox text in kug-blue, dropdown background */
#kug-contact-form label,
#kug-contact-form .smallhint,
#kug-contact-form .chk{
  color: rgba(var(--kug-blue), 1);
}
#kug-contact-form select{
  background: rgb(2,6,5);
}

/* Führerschein im Vorbesitz: checkboxes under each other */
#kug-contact-form .checkbox-grid{
  column-count: 3;
  column-gap: 18px;
}

#kug-contact-form .checkbox-grid .chk{
  display: block;
  break-inside: avoid;
  margin: 0 0 8px 0;
}

@media (max-width: 700px){
  #kug-contact-form .checkbox-grid{ column-count: 2; }
}

@media (max-width: 460px){
  #kug-contact-form .checkbox-grid{ column-count: 1; }
}

/* Form action buttons */
#kug-contact-form .form-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.btn.btn-secondary{
  background: transparent;
  border: 1px solid rgba(var(--kug-blue), .5);
  color: rgba(var(--kug-blue), 1);
}

/* Home video */
.home-video{
  margin-top: 18px;
  width: 100%;
}
.home-video iframe{
  width: 100%;
  height: 480px;
  border: 0;
  border-radius: 8px;
}
.home-video--blocked{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 8px;
  padding: 18px;
}


/* ===== v0.85.21 Fixes ===== */
.site-version{
  color: rgb(30,30,30);
  font-weight: 700;
  white-space: nowrap;
}
@media (min-width: 901px){
  .topbar-inner{ flex-wrap: nowrap; }
  .site-version{ padding-right: 16px; margin-left: 16px; }
}

/* Contact form: labels & checkbox texts in kug-blue */
.contact-form label,
.contact-form .smallhint,
.contact-form .chk{
  color: rgb(var(--kug-blue));
}

/* Checkbox grid: 3 columns, tidy alignment */
.contact-form .checkbox-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}
.contact-form .chk{ margin: 0; justify-content: flex-start; }
.contact-form .chk input{ accent-color: rgb(var(--kug-blue)); }

/* Home video spacing under hero image */
.home-video{ margin-top: 18px; }



/* ===== v0.85.23 Contact form: Vorbesitz checkboxes clean 3-column grid ===== */
#kug-contact-form input[type="checkbox"]{
  width: auto;
  padding: 0;
  border-radius: 4px;
  background: transparent;
}
#kug-contact-form .checkbox-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-count: initial !important;
  gap: 18px 26px !important;
}
#kug-contact-form .checkbox-grid .chk{
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 0;
  break-inside: avoid;
}
#kug-contact-form .checkbox-grid .chk input[type="checkbox"]{
  margin: 0;
}




/* v0.85.31 Patch: Member logos under Home section */
.member-logos{
  display:flex;
  justify-content: space-evenly;
  align-items:center;
  gap:40px;
  margin-top:20px;
  width:100%;
}
.member-logos a{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1 1 0;
}
.member-logos img{
  max-height:80px;
  width:auto;
  max-width:100%;
  height:auto;
  display:block;
}

/* ===== v0.86.2 – Mobile hamburger: darker button, smaller panel, uniform right-aligned buttons ===== */
@media (max-width: 900px){
  /* Hamburger button background (darker) + fixed size */
  .nav-burger{
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    background: rgba(0,0,0,.72) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  /* Mobile menu panel size */
  #kug-mobile-menu.nav-mobile{
    width: min(260px, calc(100vw - 24px)) !important;
    padding: 10px 12px !important;
    border-radius: 18px !important;
    /* Make the panel itself opaque so page content can't shine through */
    background: rgb(12,12,12) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* All buttons same size + right aligned */
  #kug-mobile-menu .nav-mobile-links a{
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    text-align: right !important;
    background: rgba(255,255,255,.08) !important;
  }

  /* Sub-items: indent the whole button but keep right edge aligned */
  #kug-mobile-menu .nav-mobile-links a.nav-subitem{
    padding-left: 26px !important;
  }
}



/* v0.86.6: Mobile hamburger menu - version inside menu + reuse nav-btn/nav-subbtn classes */
@media (max-width: 900px){
  /* Show version inside mobile menu, hide header version to declutter */
  .site-version--header{ display: none !important; }
  #kug-mobile-menu .site-version--mobile{
    display:block;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.14);
    text-align: right;
    font-size: 12px;
    color: rgba(255,255,255,.78);
  }

  /* Let mobile links reuse desktop classes without changing layout */
  .nav-mobile-links a.nav-btn,
  .nav-mobile-links a.nav-subbtn{
    /* keep existing mobile link layout, but ensure hover/active matches */
    display:flex;
    justify-content:flex-end;
    align-items:center;
    min-height: 44px;
    text-align: right;
    box-sizing: border-box;
  }
  .nav-mobile-links a.nav-subbtn{
    padding-left: 22px; /* visual indent */
  }
  .nav-mobile-links a.nav-btn:hover,
  .nav-mobile-links a.nav-subbtn:hover{
    background: rgba(255,255,255,.10);
  }
  .nav-mobile-links a.nav-btn.active,
  .nav-mobile-links a.nav-subbtn.active{
    background: linear-gradient(90deg, rgba(var(--kug-green), .35), rgba(var(--kug-blue), .35));
    border-color: rgba(255,255,255,.18);
  }
}


/* === v1.00.13 tweaks === */
/* #partner{ margin-top: 5px; } */
/* Abstand zwischen Kontakt und Partner */
#contact + #partner{
  margin-top: 20px;
}


/* === v1.00.16 PATCH: ensure active menu highlight works for all items (incl. Partner) === */
.side-nav a.active{
  background: linear-gradient(90deg, rgba(var(--kug-green), .35), rgba(var(--kug-blue), .35)) !important;
  border-color: rgba(255,255,255,.18) !important;
}

/* v1.00.27 – Menu gap between Kontakt and Partner */
.side-nav .nav-gap-top{ margin-top: 10px; }
.nav-mobile .nav-gap-top{ margin-top: 10px; }


/* === PATCH v1.00.38: footer links centered + fixed footer (safe) === */
.footer{
  position: fixed;
  bottom: 0;
  left: var(--side-nav-w);
  right: 0;
  z-index: 80;
}

/* On mobile the side nav collapses; footer spans full width */
@media (max-width: 980px){
  .footer{ left: 0; }
}

/* Center the link group (middle column) like before, keep left/right info */
@media (min-width: 981px){
  .footer-row{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  .footer-row > div:nth-child(1){ justify-self: start; }
  .footer-row > div:nth-child(2){ justify-self: center; text-align: center; }
  .footer-row > div:nth-child(3){ justify-self: end; text-align: right; }
}

/* Prevent last section from being hidden behind fixed footer */
.onepage{
  padding-bottom: 90px;
}
/* === PATCH v1.00.54: footer mobile cleanup + back-to-top === */

/* Keep address in one line on desktop */
.footer-contact{
  white-space: nowrap;
}

/* Back-to-top button: only on mobile */
.footer-top-wrap{ display: none; }
.footer-top{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
}

@media (max-width: 980px){
  /* Mobile: hide full address line in footer */
  .footer-contact{ display: none !important; }
  .footer-top-wrap{ display: inline-block; margin-left: 10px; }
}
/* === PATCH v1.00.57: section spacing + branches photos (desktop only) === */

/* missing one-line gaps between specific sections */
#vehicles,
#drivinglicense,
#contact{
  margin-top: 18px;
}

/* Branch photos: float right on desktop, hidden on mobile */
.branch-photo{
  float: right;
  width: min(520px, 48%);
  height: auto;
  margin: 6px 0 10px 16px;
  border-radius: 12px;
  display: block;
}

@media (max-width: 980px){
  .branch-photo{ display: none !important; }
}