/* ========================
   0. Baseline
======================== */
html, body { margin: 0; padding: 0; height: 100%; }

/* Wenn der Extern-Hinweis offen ist, störende Floating-UIs verstecken */
.ext-notice-open .cc-manage { display: none !important; }
.ext-notice-open [data-sticky-ui] { visibility: hidden !important; }


/* ========================
   1. Root-Variablen
======================== */
:root {
  /* Allgemeine Farben – modernisiert */
  --consent-bg: rgba(8, 10, 14, 0.65);
  --card-bg: rgba(20, 22, 28, 0.8);
  --card-border: rgba(255, 255, 255, 0.06);
  --txt: #f5f8fa;
  --muted: #b9c1cc;
  --danger: #ff4d4f;
  --shadow: 0 25px 65px rgba(0, 0, 0, 0.45);

  /* ADH Brand Farben – NASA × Apple Look */
  --adh-bg: #0a0d13;
  --adh-fg: #e6edf3;
  --adh-accent: #00f0ff;       /* Cyan Glow */
  --adh-accent-2: #6c63ff;     /* Soft Violett */
  --adh-accent-rgb: 0, 240, 255;

  /* Cookie Consent Farben – klarer & kontrastreicher */
  --cc-bg: #10141b;
  --cc-fg: #f4f7fa;
  --cc-muted: #9ba3af;
  --cc-primary: #00f0ff;
  --cc-primary-fg: #fff;
  --cc-ghost-bg: rgba(255, 255, 255, 0.05);
  --cc-overlay: rgba(8, 10, 14, 0.75);
  --cc-radius: 18px;
  --cc-shadow: 0 20px 70px rgba(0, 0, 0, 0.6);

  /* Navbar */
  --navbar-h: 58px;
}


/* ========================
   2. Basis-Elemente
======================== */
html { scroll-behavior: smooth; }

dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 1.5rem;
  border: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
}

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
}

body {
  font-family: "Inter", "Segoe UI", Roboto, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  background-color: #f9f9f9;
  color: #212529;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4 { font-weight: 600; }


/* ========================
   3. Buttons
======================== */
button {
  display: inline-block;
  padding: 10px 20px;
  background-color: var(--adh-accent);
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  cursor: pointer;
  border: none;
}

.button:hover { background-color: var(--adh-accent-hover, #0056b3); }

.btn-glow {
  background: linear-gradient(90deg, var(--adh-accent), var(--adh-accent-2));
  border: none;
  padding: 0.5rem 1.2rem;
  color: #fff;
  font-weight: 500;
  border-radius: 30px;
  box-shadow: 0 0 10px rgba(var(--adh-accent-rgb), 0.6);
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.btn-glow:hover {
  box-shadow: 0 0 18px rgba(var(--adh-accent-rgb), 0.8);
  transform: translateY(-2px);
}

.cc-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }


/* ========================
   4. Navbar
======================== */
.custom-navbar {
  background: linear-gradient(
    135deg,
    rgba(var(--adh-accent-rgb), 0.28),
    rgba(var(--adh-accent-rgb), 0.16)
  );
  backdrop-filter: blur(10px);
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  transition: background 0.3s ease, padding 0.3s ease;
  top: 20px;
  left: 20px;
  right: 20px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 12px 36px rgba(0,0,0,.35);
}

.custom-navbar .navbar-brand span {
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
}

.custom-navbar .nav-link {
  color: rgb(87, 87, 87);
  font-size: 1rem;
  margin: 0 0.5rem;
  position: relative;
  transition: color 0.3s ease;
}

.custom-navbar .nav-link:hover { color: #fff; }

.custom-navbar .nav-link::after {
  content: '';
  position: absolute;
  width: 0%;
  height: 2px;
  bottom: -3px;
  left: 0;
  background-color: var(--adh-accent);
  transition: width 0.3s ease;
}

.custom-navbar .nav-link:hover::after { width: 100%; }


/* ========================
   5. Sticky Header
======================== */
.sticky-top {
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: box-shadow .2s ease, background .2s ease;
}
.sticky-top.is-scrolled {
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
  background: rgba(13,17,23,.95);
}


/* ========================
   6. Loader
======================== */
#loader-wrapper{
  position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#111; color:#fff; z-index:9999;
}
.loader{ width:80px; height:80px; border-radius:50%; border:8px solid rgba(255,255,255,.12); border-top:8px solid #00ffcc; animation:spin 1s linear infinite; margin-bottom:20px }
@keyframes spin{ to{ transform:rotate(360deg) } }
.progress-container{ width:220px; height:8px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.12) }
.progress-bar{ height:100%; width:0%; background:#00ffcc; transition:width .25s ease }
#progress-text{ margin-top:10px; font:500 14px/1.2 system-ui,Segoe UI,Roboto,Arial }
.fade-out{ opacity:0; transition:opacity .6s ease; pointer-events:none }


/* ========================
   7. Carousel
======================== */
/* Icons ohne Images – reine CSS-Dreiecke */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-image: none !important; /* Bootstrap überschreiben */
  background: rgba(0,0,0,.35);
  border-radius: 9999px;
  width: 2.5rem;
  height: 2.5rem;
  position: relative;
  display: inline-block;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.45));
}

.carousel-control-prev-icon::before,
.carousel-control-next-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-top: .55rem solid transparent;
  border-bottom: .55rem solid transparent;
  transform: translate(-50%, -50%);
}

/* Links-Pfeil */
.carousel-control-prev-icon::before { border-right: .85rem solid currentColor; margin-left: -0.15rem; }
/* Rechts-Pfeil */
.carousel-control-next-icon::before { border-left: .85rem solid currentColor; margin-left: 0.15rem; }

/* Button-Optik & States */
.carousel-control-prev,
.carousel-control-next {
  color: #fff; /* steuert Pfeilfarbe via currentColor */
  opacity: .9;
  width: 5%;
  transition: opacity .15s ease;
}
.carousel-control-prev:hover,
.carousel-control-next:hover { opacity: 1; }

.carousel-control-prev:focus-visible,
.carousel-control-next:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Hero / Carousel Höhe */
.hero-carousel,
.hero-carousel .carousel,
.hero-carousel .carousel-inner,
.hero-carousel .carousel-item {
  height: calc(100svh - var(--navbar-h));
  margin-top: 0;
}

#loader-info {
  font-size: 14px;
  color: #00fff0;
  position: absolute;
  bottom: 20px;
  left: 30px;
  opacity: 0.85;
  font-family: "Inter", system-ui, sans-serif;
  letter-spacing: 0.3px;
}

/* Bildfüllung */
.hero-img {
  height: 100%; width: 100%; object-fit: cover; transform: scale(1.02); transition: transform 10s ease; filter: contrast(1.05) saturate(1.05);
}
.carousel-item.active .hero-img { transform: scale(1.08); }

/* Overlay */
.carousel-item::before {
  content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.12) 45%, rgba(0,0,0,0) 75%); z-index: 1;
}

/* Caption */
.adh-caption {
  z-index: 2; left: 50%; transform: translateX(-50%); bottom: clamp(2rem, 6vw, 6rem); max-width: min(900px, 86vw); backdrop-filter: blur(10px);
  background: linear-gradient(135deg, rgba(var(--adh-accent-rgb), 0.28), rgba(var(--adh-accent-rgb), 0.16));
  border: 1px solid rgba(255,255,255,.18); border-radius: 18px; padding: clamp(14px, 2.2vw, 24px) clamp(16px, 3vw, 32px); text-align: center; box-shadow: 0 12px 36px rgba(0,0,0,.35); animation: caption-fadeup 0.8s ease-out both;
}
.adh-caption h5 {
  margin: 0 0 .35em; font-weight: 800; letter-spacing: .3px; font-size: clamp(1.25rem, 2.6vw, 2.4rem); text-shadow: 0 3px 10px rgba(0,0,0,.4); color: var(--adh-accent);
}
.adh-caption p {
  margin: 0; opacity: .95; font-size: clamp(.95rem, 1.6vw, 1.15rem); line-height: 1.45; color: var(--adh-fg);
}

@keyframes caption-fadeup { 0% { opacity: 0; transform: translate(-50%, 20px); } 100% { opacity: 1; transform: translate(-50%, 0); } }

/* Indikatoren */
.carousel-indicators [data-bs-target] {
  width: 10px; height: 10px; border-radius: 50%; background: #ffffff; opacity: .35; transition: opacity .3s, transform .3s; border: none; margin: 0 6px;
}
.carousel-indicators .active { opacity: 1; transform: scale(1.25); background: var(--adh-accent); }

/* Scroll-Hint */
.scroll-hint { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 3; text-decoration: none; font-size: 22px; opacity: .8; }

/* Light-Mode Anpassung */
@media (prefers-color-scheme: light) {
  .adh-caption { background: linear-gradient(135deg, rgba(var(--adh-accent-rgb), 0.18), rgba(var(--adh-accent-rgb), 0.10)); border-color: rgba(0,0,0,.08); }
  .carousel-item::before { background: linear-gradient(to top, rgba(0,0,0,.45) 0%, rgba(0,0,0,.12) 45%, rgba(0,0,0,0) 75%); }
}


/* ========================
   8. Sections / Layout
======================== */
section, .youtube-section, .intro-covers { padding-top: 20px; padding-bottom: 0px; }
section:first-of-type, .youtube-section:first-of-type, .intro-covers:first-of-type { padding-top: 0; }

/* Cover */
.cover {
  border: 1px solid #ececec; border-radius: 16px; padding: 24px 24px; margin: 32px auto; background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .05);
  display: flex; flex-direction: column; gap: 16px; max-width: 1200px;
}
.cover-head h3 { margin-bottom: 10px; font-size: 1.25rem; }
.cover-head p { margin-bottom: 16px; color: #666; }
.cover-body p { margin-bottom: 16px; line-height: 1.7; color: #333; }

/* Punkte-Listen */
.cover-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; list-style: none; padding: 0 0 15px; margin: 0; }
.cover-points li { position: relative; padding-left: 18px; line-height: 1.6; }
.cover-points li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--adh-accent); }

/* Intro Header */
.intro-header { text-align: center; margin-bottom: 28px; }
.intro-header h2 { font-size: 2rem; margin-bottom: 24px; }
.intro-header p { margin-bottom: 40px; color: #555; }

/* Responsive */
@media (max-width: 900px) {
  .cover-points { grid-template-columns: 1fr; }
  .intro-header h2 { font-size: 1.6rem; }
  .cover { padding: 18px; }
}

/* YouTube-Sektion */
.youtube-section { max-width: 1200px; margin: auto; }
.section-title { text-align: center; font-size: 2rem; margin-bottom: 24px; }
.youtube-channel { display: flex; align-items: center; gap: 40px; margin-bottom: 60px; }
.youtube-channel.reverse { flex-direction: row-reverse; }
.channel-cover { width: 500px; height: 280px; flex-shrink: 0; overflow: hidden; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.channel-cover img { width: 100%; height: 100%; object-fit: cover; }
.channel-text { flex: 1; }
.channel-text h3 { font-size: 1.8rem; margin-bottom: 15px; }
.channel-text p { font-size: 1rem; line-height: 1.6; margin-bottom: 20px; }
.channel-link { display: inline-block; padding: 10px 20px; background-color: var(--adh-accent); color: #fff; text-decoration: none; font-weight: bold; border-radius: 5px; transition: background 0.3s; }
.channel-link:hover { background-color: var(--adh-accent-2); }


/* ========================
   9. Footer
======================== */
.adh-footer { background: var(--adh-bg); color: var(--adh-fg); padding: 40px 20px 20px; font-size: 0.95rem; }
.footer-container { max-width: 1200px; margin: 0 auto 30px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 30px; }
.adh-footer h4 { font-size: 1.1rem; margin-bottom: 12px; color: var(--adh-accent); }
.adh-footer p, .adh-footer ul { margin: 0; padding: 0; list-style: none; }
.adh-footer ul li { margin-bottom: 8px; }
.adh-footer a { color: rgba(230,237,243,.85); text-decoration: none; transition: color 0.2s ease; }
.adh-footer a:hover { color: var(--adh-accent-2); }
.footer-bottom { text-align: center; border-top: 1px solid rgba(255,255,255,.08); padding-top: 15px; font-size: 0.85rem; color: rgba(230,237,243,.6); }

/* Light Mode Footer */
body:not(.dark-mode) .adh-footer { background: #f9f9f9; color: #212529; }
body:not(.dark-mode) .adh-footer a { color: #212529; }
body:not(.dark-mode) .footer-bottom { border-top: 1px solid rgba(0,0,0,.1); color: rgba(0,0,0,.6); }


/* ========================
   10. Dark Mode
   (Fix: funktioniert egal, ob .dark-mode auf <html> oder <body> sitzt;
    Footer im Dark Mode bewusst dunkler)
======================== */
body.dark-mode,
html.dark-mode body {
  background-color: #0d1117;
  color: #e6edf3;
}

/* Navbar */
body.dark-mode .custom-navbar,
html.dark-mode .custom-navbar {
  background: linear-gradient(135deg, rgba(0,173,239,0.28), rgba(0,173,239,0.16));
  border-color: rgba(255,255,255,0.12);
}
body.dark-mode .custom-navbar .nav-link,
html.dark-mode .custom-navbar .nav-link {
  color: #c2c7cf;
}
body.dark-mode .custom-navbar .nav-link:hover,
body.dark-mode .custom-navbar .nav-link.active,
html.dark-mode .custom-navbar .nav-link:hover,
html.dark-mode .custom-navbar .nav-link.active {
  color: #e6edf3;
  background-color: rgba(0,173,239,0.16);
  border-radius: 10px;
}

/* Carousel Caption */
body.dark-mode .adh-caption,
html.dark-mode .adh-caption {
  color: #e6edf3;
  border-color: rgba(255,255,255,0.12);
  background: linear-gradient(135deg, rgba(0,173,239,0.28), rgba(0,173,239,0.16));
  box-shadow: 0 12px 36px rgba(0,0,0,0.5);
}

/* Cover Cards */
body.dark-mode .cover,
html.dark-mode .cover {
  background: #0f141a;
  color: #e6edf3;
  border-color: rgba(255,255,255,0.12);
}
body.dark-mode .cover-head p,
body.dark-mode .cover-body p,
html.dark-mode .cover-head p,
html.dark-mode .cover-body p {
  color: #c2c7cf;
}

/* Footer (dunkler gemacht) */
body.dark-mode .adh-footer,
html.dark-mode .adh-footer {
  background: #090c10; /* dunkler als Standard-Body */
  color: #e6edf3;
}
body.dark-mode .adh-footer a,
html.dark-mode .adh-footer a {
  color: rgba(230,237,243,.85);
}
body.dark-mode .footer-bottom,
html.dark-mode .footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  color: rgba(230,237,243,.6);
}


/* ========================
   11. Cookie Consent
======================== */
.cc-btn{ background:#fff; color:#111; border:1px solid #ddd; }
.cc-btn-ghost{ background:transparent; color:var(--cc-primary); border:1px solid rgba(0,0,0,.12); }
.cc-btn-secondary{ background:#e7f0ff; color:#0b57d0; border:1px solid #c6dafc; }
.cc-btn-danger{ background:var(--danger); color:#fff; border:1px solid transparent; }
.cc-btn:hover{ filter:none; transform:translateY(-1px); }

#cc-overlay{ position: fixed; inset: 0; background: var(--cc-overlay); backdrop-filter: blur(8px); display: grid; place-items: center; z-index: 9998;overflow:auto; }
#cc-overlay.cc-hidden{ display:none; }

.cc-modal{ width: min(880px, 92vw); background: var(--cc-bg); color: var(--cc-fg); border-radius: var(--cc-radius); box-shadow: var(--cc-shadow); padding: 24px; outline: none; }

.cc-header h2{ margin: 0 0 8px; font-size: 1.5rem; }
.cc-header p{ margin: 0; color: var(--cc-muted); line-height: 1.55; }
.cc-header a{ color: var(--cc-primary); text-decoration: underline; }

.cc-tabs{ display: flex; gap: 8px; margin: 18px 0 6px; }
.cc-tab{ border: none; background: var(--cc-ghost-bg); padding: 10px 14px; border-radius: 10px; cursor: pointer; font-weight: 600; }
.cc-tab--active{ background: #e7f0ff; color: #0b57d0; }

.cc-panel{ margin-top: 8px; }
.cc-bullets{ margin: 8px 0 0 18px; line-height: 1.6; }

.cc-cat{ border:1px solid #eee; border-radius:12px; padding:14px; margin:12px 0; }
.cc-cat-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.cc-cat h3{ margin:0 0 4px; font-size:1rem; }
.cc-cat p{ margin:0; color: var(--cc-muted); }

.cc-actions{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top: 16px; flex-wrap: wrap; }
.cc-actions-right{ display:flex; gap:10px; }

.cc-btn{ border:none; background: var(--cc-ghost-bg); padding: 10px 16px; border-radius: 10px; cursor: pointer; font-weight: 700; }
.cc-btn-ghost{ background: var(--cc-ghost-bg); }
.cc-btn-primary{ background: var(--cc-primary); color: var(--cc-primary-fg); }

.cc-btn:hover{ filter: brightness(0.98); transform: translateY(-1px); transition: .15s; }

.cc-manage { position: fixed; bottom: 20px; right: 20px; display: inline-flex; align-items: center; gap: .55rem; padding: 10px; border: 1px solid transparent; border-radius: 999px; background: rgba(0,0,0,0.75); color: #fff; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.2); transition: .2s ease-in-out; z-index: 9999; }
.cc-manage:hover { transform: translateY(-2px); background: rgba(0,0,0,0.85); }
.cc-manage:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 999px; }

.icon-cookie { width: 1.25em; height: 1.25em; display: block; transition: transform .25s ease; }
.cc-manage:hover .icon-cookie { transform: rotate(-8deg); }
.cc-label { line-height: 1; }

/* Toggle Switch */
.cc-switch{ position: relative; display:inline-flex; width:48px; height:28px; }
.cc-switch input{ opacity:0; width:0; height:0; }
.cc-slider{ position:absolute; cursor:pointer; inset:0; background:#d9d9d9; border-radius:999px; }
.cc-slider::before{ content:""; position:absolute; height:22px; width:22px; left:3px; top:3px; background:#fff; border-radius:50%; transition: transform .2s; box-shadow: 0 2px 5px rgba(0,0,0,.2); }
.cc-switch input:checked + .cc-slider{ background:#b7d5ff; }
.cc-switch input:checked + .cc-slider::before{ transform: translateX(20px); }

/* Focus styles (A11y) */
#ververlay :is(button, a, input){ outline: none; }
#cc-overlay :is(button, a, input):focus-visible{ box-shadow: 0 0 0 3px rgba(0,122,255,.35); border-radius: 8px; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){ .cc-btn, .cc-slider::before{ transition: none !important; } }


/* ========================
   12. YouTube Short Overlay
======================== */
.yt-short-overlay{
  position: fixed;
  inset: 0;
  display: none;               /* JS schaltet auf flex */
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(4px);
  z-index: 9999;
}
/* Sichtbar wenn angesprungen */
#yt-short-overlay:target{ display:block; }

.yt-close{
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  display: flex;                 /* zentriert Inhalt */
  align-items: center;           /* vertikal */
  justify-content: center;       /* horizontal */
  padding: 0;                    /* keine Innenabstände */
  line-height: 1;                /* nicht mit Höhe koppeln */
  font-size: 28px;
  font-weight: 600;
  color: #fff;
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  z-index: 2;
}
.yt-close:hover { background: rgba(255,255,255,0.25); }
.yt-close { transform: translateY(-1px); }

.yt-frame-wrap{
  position:absolute; inset:0;
  display:grid; place-items:center;
  padding:24px;
  z-index: 1;                  /* unter dem Close-Button */
  pointer-events: none;        /* Klicks nicht blocken */
}

.yt-frame{
  width: min(calc(90vh * 9 / 16), 90vw);
  height: min(90vh, calc(90vw * 16 / 9));
  border:0; border-radius:16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
  background:#000;
  pointer-events: auto;        /* iframe bleibt bedienbar */
}
/* 9:16 Portrait, maximal groß aber mit Rand */
.yt-frame-wrap::before{ content:""; display:block; }

@media (max-width: 480px){
  .yt-close{ top:10px; right:10px; width:40px; height:40px; font-size:24px; }
  .yt-frame{ border-radius:12px; }
}


/* ========================
   13. Externe-Link Hinweis (Dialog)
======================== */
/* Fullscreen Overlay (unsichtbar bis [open]) */
#externalNotice {
  border: none;
  margin: 0;
  padding: 0;
  background: transparent;      /* WICHTIG: Overlay NICHT hier */
  display: none;                 /* erst sichtbar, wenn [open] */
}
#externalNotice::backdrop {
  background: rgba(10, 13, 20, 0.45);
  backdrop-filter: blur(8px) saturate(115%);
  -webkit-backdrop-filter: blur(8px) saturate(115%);
}
#externalNotice[open] {
  /* Das Zentrieren macht der Browser; grid ist ok als Fallback */
  display: grid;
  place-items: center;
}


/* Glasige Karte */
.ext-dialog {
  box-sizing: border-box;
  width: min(92vw, 520px);
  padding: 1.25rem 1.25rem 1rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 10px 25px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.14);
  color: #fff;
  text-align: center;
}



.ext-title { margin: 0 0 .25rem; font-weight: 600; }
.ext-desc  { margin: 0 0 .75rem; opacity: .95; }

/* Checkbox Bootstrap‑ähnlich (Fallback) */
.form-check { display:flex; align-items:center; gap:.5rem; justify-content:center; }
.form-check-input {
  width: 1rem; height: 1rem; margin: 0; cursor: pointer;
  appearance: none; border: 1.5px solid rgba(255,255,255,0.6);
  border-radius: .25rem; background: transparent; position: relative; flex: 0 0 auto;
}
.form-check-input:checked { background: #0d6efd; border-color: #0d6efd; }
.form-check-input:checked::after {
  content: ""; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='white' d='M6.173 12.414L2.05 8.293l1.414-1.414 2.709 2.708 6.364-6.364 1.414 1.414z'/%3e%3c/svg%3e") center/12px 12px no-repeat;
}

/* Aktionen */
.ext-actions { margin-top: .25rem; }

/* Buttons (Fallback) */
.btn {
  --btn-bg: #fff; --btn-color: #212529; --btn-bd: rgba(255,255,255,0.25);
  display: inline-flex; align-items: center; justify-content: center;
  gap: .4rem; padding: .5rem 1rem; border-radius: .5rem;
  border: 1px solid var(--btn-bd); background: var(--btn-bg); color: var(--btn-color);
  font-weight: 600; cursor: pointer; text-decoration: none; user-select: none;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.25); }
.btn-primary { --btn-bg: #0d6efd; --btn-color: #fff; --btn-bd: rgba(255,255,255,0.18); }
.btn-primary:hover { background: #0b5ed7; }
.btn-outline-secondary { --btn-bg: transparent; --btn-color: #e9ecef; --btn-bd: rgba(233,236,239,0.5); }
.btn-outline-secondary:hover { background: rgba(233,236,239,0.08); border-color: rgba(233,236,239,0.8); }

/* Light‑Scheme Tuning */
@media (prefers-color-scheme: light) {
  #externalNotice { background: rgba(0, 10, 20, 0.35); }
  .ext-dialog {
    background: rgba(255, 255, 255, 0.6);
    color: #0b1320;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 25px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.5);
  }
  .btn-outline-secondary { --btn-color: #343a40; --btn-bd: rgba(0,0,0,0.25); }
}

/* Motion-Reduce */
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }


/* ========================
   14. Mobile-Optimierungen (Navbar/Layout)
======================== */
/* Navbar-Layout: Theme-Button rechts, Toggler direkt daneben; Collapse darunter */
@media (max-width: 991.98px) {
  .custom-navbar .container {
    display: flex;
    align-items: center;
  }
  /* Theme-Toggle rechts ausrichten */
  #themeToggle {
    margin-left: auto;
    min-width: 44px; /* A11y Target Size */
    min-height: 44px; /* A11y Target Size */
    padding: 0 .6rem;
  }
  /* Burger (Toggler) mit kleinem Abstand daneben */
  .custom-navbar .navbar-toggler {
    margin-left: .5rem;
  }
  /* Collapsed-Menü volle Breite unter der ersten Zeile */
  .custom-navbar .collapse {
    width: 100%;
  }
}

/* Navbar-Card kompakter auf XS */
@media (max-width: 575.98px) {
  .custom-navbar {
    top: 10px;
    left: 10px;
    right: 10px;
    border-radius: 14px;
    padding-top: .55rem;
    padding-bottom: .55rem;
  }
}

/* Platz unter fixer Navbar auf Mobile vermeiden Überlappung */
@media (max-width: 991.98px) {
  body { padding-top: 0px; }
}

/* Hero/Carousel kompakter auf sehr kleinen Screens */
@media (max-width: 575.98px) {
  .hero-carousel,
  .hero-carousel .carousel,
  .hero-carousel .carousel-inner,
  .hero-carousel .carousel-item {
    height: calc(100svh - 80px);
  }
  .adh-caption {
    padding: 12px 16px;
    border-radius: 14px;
  }
  .adh-caption h5 { font-size: clamp(1.1rem, 4.2vw, 1.35rem); }
  .adh-caption p  { font-size: clamp(.9rem, 3.6vw, 1rem); }
}

/* YouTube-Sektion auf Mobile untereinander statt nebeneinander */
@media (max-width: 991.98px) {
  .youtube-channel {
    flex-direction: column !important;
    gap: 18px;
    margin-bottom: 40px;
  }
  .channel-cover {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
  }
}

/* Footer auf XS straffer */
@media (max-width: 575.98px) {
  .adh-footer { padding: 28px 16px 16px; }
  .footer-container { gap: 18px; margin-bottom: 20px; }
}

/* Formular block nutzt jetzt Variablen statt fixer Farben */
#contact-form {
  max-width: 600px;
  margin: 0 auto;
  color: var(--form-fg);
}

#contact-form p { color: var(--form-muted); }

.form-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.2rem;
}

.form-row label {
  margin-bottom: 0.4rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--form-fg);
}

.form-row input,
.form-row textarea {
  padding: 0.75rem;
  border: 1px solid var(--form-input-bd);
  background: var(--form-input-bg);
  color: var(--form-fg);
  border-radius: var(--form-radius);
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.form-row input::placeholder,
.form-row textarea::placeholder {
  color: var(--form-placeholder);
}

/* Fokus: nutzt Markenfarbe via --adh-accent-rgb */
.form-row input:focus,
.form-row textarea:focus {
  border-color: var(--form-btn-bg);
  box-shadow: 0 0 0 3px var(--form-focus-ring);
  outline: none;
}

/* Checkbox & DSGVO */
.form-row input[type="checkbox"] {
  width: auto;
  margin-right: 0.5rem;
  /* kleine optische Angleichung an Dark/Light */
  accent-color: var(--adh-accent, #0077ff);
}
.form-row label[for="consent"] {
  font-weight: normal;
  display: inline;
  color: var(--form-fg);
}

/* Button */
.form-actions { text-align: right; }

.form-actions button {
  background: var(--form-btn-bg);
  color: var(--form-btn-fg);
  font-size: 1rem;
  font-weight: 600;
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: var(--form-radius);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}

.form-actions button:hover {
  background: var(--form-btn-bg-hover);
}

.form-actions button:active {
  transform: scale(0.97);
}

/* Responsiv */
@media (max-width: 600px) {
  #contact-form { padding: 0 1rem; }
}

body.dark-mode,
html.dark-mode body {
  --form-fg: #e6edf3;
  --form-muted: #c2c7cf;
  --form-input-bg: #0f141a;            /* passend zu .cover im Dark Mode */
  --form-input-bd: rgba(255,255,255,0.16);
  --form-placeholder: #8b949e;
  --form-focus-ring: rgba(var(--adh-accent-rgb, 0,173,239), 0.35);
  --form-btn-bg: var(--adh-accent);
  --form-btn-bg-hover: var(--adh-accent-2);
  --form-btn-fg: #fff;
}
:root {
  --form-fg: #222;
  --form-muted: #666;
  --form-input-bg: #fff;
  --form-input-bd: #ccc;
  --form-placeholder: #8b8b8b;
  --form-focus-ring: rgba(var(--adh-accent-rgb, 0,173,239), 0.30);
  --form-btn-bg: var(--adh-accent, #0077ff);
  --form-btn-bg-hover: var(--adh-accent-2, #005fcc);
  --form-btn-fg: #fff;
  --form-radius: 6px;
}