
/* =========================================================
   KJV Design System – Massiver Design-/UX-Pass
   Ziel: weniger Patchwork, einheitlicher Rhythmus, bessere Lesbarkeit
========================================================= */

:root {
  --kjv-bg: #f3efe6;
  --kjv-bg-2: #ebe5d8;
  --kjv-paper: #fffdf8;
  --kjv-ink: #141914;
  --kjv-muted: #5f665f;
  --kjv-green: #064704;
  --kjv-green-dark: #09240d;
  --kjv-line: rgba(20, 25, 20, .13);
  --kjv-line-strong: rgba(20, 25, 20, .22);
  --kjv-container: min(1180px, calc(100% - 48px));
  --kjv-radius: 0px;
}

html {
  background: var(--kjv-bg);
  scroll-padding-top: 92px;
}

body {
  color: var(--kjv-ink);
  background:
    radial-gradient(circle at 12% 0%, rgba(6,71,4,.055), transparent 34rem),
    radial-gradient(circle at 92% 16%, rgba(122,96,48,.055), transparent 32rem),
    linear-gradient(180deg, var(--kjv-bg) 0%, var(--kjv-bg-2) 100%);
  text-rendering: optimizeLegibility;
}

main {
  isolation: isolate;
}

::selection {
  background: rgba(6,71,4,.18);
}

/* Unterseiten-Banner ruhiger, damit Seiteninhalt nicht erschlagen wird */
body:not(.home-reset) #banner-slot[data-banner-size="normal"],
body:not(.home-reset) #banner-slot[data-banner-size="normal"] .hero-carousel,
body:not(.home-reset) #banner-slot[data-banner-size="m"],
body:not(.home-reset) #banner-slot[data-banner-size="m"] .hero-carousel {
  min-height: clamp(360px, 46vw, 500px);
  height: clamp(360px, 46vw, 500px);
}

body:not(.home-reset) #banner-slot[data-banner-size="s"],
body:not(.home-reset) #banner-slot[data-banner-size="s"] .hero-carousel {
  min-height: clamp(280px, 36vw, 360px);
  height: clamp(280px, 36vw, 360px);
}

body:not(.home-reset) .hero-carousel__content {
  bottom: clamp(42px, 6vw, 72px);
  width: var(--kjv-container);
}

body:not(.home-reset) .hero-carousel__title {
  max-width: 850px;
  font-size: clamp(2.55rem, 4.8vw, 5.1rem);
  line-height: .92;
  letter-spacing: -.065em;
}

body:not(.home-reset) .hero-carousel__title::before {
  content: "";
  display: block;
  width: 68px;
  height: 3px;
  margin-bottom: 18px;
  background: rgba(255,255,255,.78);
}

/* Einheitlicher Seitenrhythmus */
.contact-page,
.downloads-page,
.vb-page,
.jagdschule-page,
.ns-page,
.nachsuche-page,
.jj-page,
.hg-page,
.lb-page {
  background: transparent !important;
}

/* Einheitliche Karten-/Flächen-Sprache */
.contact-card,
.contact-route-grid a,
.downloads-page .download-topforms a,
.downloads-page .download-task-grid button,
.downloads-page .search-panel,
.vb-hero-card__text,
.vb-overview,
.vb-workstrip article,
.vb-fact,
.vb-board,
.vb-horns,
.jj-hero__box,
.jj-sidepanel,
.ns-panel,
.ns-featuredwrap,
.ns-gridwrap,
.nachsuche-page .ns-intro__card,
.nachsuche-page .ns-emergency__card,
.nachsuche-page .ns-step,
.nachsuche-page .ns-card,
.lb-card,
.hg-service__stats div,
.hg-jumpnav a {
  border-radius: var(--kjv-radius) !important;
  box-shadow: none !important;
}

/* Sichtbare Interaktion ohne Spielerei */
a,
button {
  transition:
    background .16s ease,
    color .16s ease,
    border-color .16s ease,
    transform .16s ease,
    opacity .16s ease;
}

@media (hover: hover) {
  .contact-route-grid a:hover,
  .contact-card:hover,
  .downloads-page .download-topforms a:hover,
  .downloads-page .download-task-grid button:hover,
  .vb-workstrip article:hover,
  .hg-jumpnav a:hover,
  .jj-jumpnav a:hover,
  .js-jumpnav a:hover {
    transform: translateY(-2px);
  }
}

/* Bessere Lesbarkeit langer Textseiten */
.lb-card,
.datenschutz-page,
.impressum-page,
.legal-page {
  font-size: 1.04rem;
  line-height: 1.75;
}

/* Buttons einheitlicher */
.contact-btn,
.member-btn,
.vb-btn,
.js-btn,
.nachsuche-page .ns-btn,
.home-button,
.downloads-page .download-task-grid button {
  font-weight: 850;
}

/* Mobile: Banner und Abstände entschärfen */
@media (max-width: 760px) {
  :root {
    --kjv-container: min(100% - 28px, 1180px);
  }

  body:not(.home-reset) #banner-slot[data-banner-size="normal"],
  body:not(.home-reset) #banner-slot[data-banner-size="normal"] .hero-carousel,
  body:not(.home-reset) #banner-slot[data-banner-size="m"],
  body:not(.home-reset) #banner-slot[data-banner-size="m"] .hero-carousel {
    min-height: 360px;
    height: 360px;
  }

  body:not(.home-reset) .hero-carousel__content {
    width: var(--kjv-container);
    bottom: 38px;
  }

  body:not(.home-reset) .hero-carousel__title {
    font-size: clamp(2.2rem, 12vw, 3.75rem);
  }

  body:not(.home-reset) .hero-carousel__title::before {
    width: 50px;
    margin-bottom: 14px;
  }
}


/* Termine UX: nächster Termin prominent */
.tec-next {
  margin: 0 0 18px;
  padding: clamp(24px, 4vw, 38px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  background: #0d2a11;
  color: #fff;
}

.tec-next__kicker {
  margin: 0 0 10px;
  color: rgba(255,255,255,.70);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.tec-next h2 {
  margin: 0;
  max-width: 900px;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: .96;
  letter-spacing: -.06em;
}

.tec-next p:not(.tec-next__kicker) {
  margin: 14px 0 0;
  color: rgba(255,255,255,.78);
  line-height: 1.6;
}

.tec-next a {
  min-height: 46px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #fff;
  color: #064704;
  font-weight: 850;
}

@media (max-width: 720px) {
  .tec-next {
    grid-template-columns: 1fr;
  }

  .tec-next a {
    width: fit-content;
  }
}


/* Jagdschule: schneller erfassbarer Kurzüberblick */
.js-summarybox {
  margin-top: 22px;
  padding: 18px 20px;
  background: #f4f0e7;
  border-left: 4px solid #064704;
}

.js-summarybox strong {
  display: block;
  color: #064704;
  margin-bottom: 6px;
}

.js-summarybox p {
  margin: 0;
  color: #5f665f;
  line-height: 1.65;
}

/* Inhaltsseiten: Textbreiten etwas beruhigen */
.jagdschule-page .js-prose,
.nachsuche-page .ns-muted,
.contact-lead,
.downloads-page .download-intro p,
.ns-intro p:not(.ns-kicker),
.hg-intro-text p {
  max-width: 780px;
}


/* =========================================================
   RAND-/ABSTANDS-AUDIT – finaler Feinschliff
   Ziel: keine horizontalen Ausreißer, konsistente Außenränder,
   bessere mobile Luft und saubere Lesebreiten.
========================================================= */

*,
*::before,
*::after {
  min-width: 0;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

/* Hauptseiten konsequenter auf denselben Außenrand bringen */
:where(
  .tec-wrap,
  .downloads-page,
  .vb-page,
  .contact-page,
  .jagdschule-page,
  .nachsuche-page,
  .ns-page,
  .jj-page,
  .hg-page,
  .member-page
) {
  width: var(--kjv-container) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Dokumentseiten bewusst schmaler, aber mit denselben sicheren Rändern */
:where(.ds-page, .im-page, .sz-page, .lb-page, .jj-topic) {
  width: min(980px, calc(100% - 48px)) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Gleichmäßiger Einstieg nach Banner */
body:not(.home-reset) :where(
  .tec-wrap,
  .downloads-page,
  .vb-page,
  .contact-page,
  .jagdschule-page,
  .nachsuche-page,
  .ns-page,
  .jj-page,
  .hg-page,
  .member-page,
  .ds-page,
  .im-page,
  .sz-page,
  .lb-page
) {
  padding-top: clamp(34px, 4.4vw, 64px) !important;
}

/* Zu breite Sonderbereiche entschärfen */
.jagdschule-page .js-section--alt,
.jagdschule-page .js-hero,
.jagdschule-page .js-jumpnav,
.nachsuche-page .ns-emergency,
.nachsuche-page .ns-intro,
.nachsuche-page .ns-steps,
.nachsuche-page .ns-directory,
.nachsuche-page .ns-cta,
.ns-intro,
.ns-panel,
.ns-featuredwrap,
.ns-gridwrap {
  max-width: 100%;
}

/* Negative Außenränder waren an einzelnen Stellen Risiko für unsaubere Kanten */
.jagdschule-page .js-section--alt {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Termine: Toolbar/Filter sauber umbrechen, nicht an Bildschirmrand kleben */
.tec-toolbar,
.tec-toolbar__left,
.tec-toolbar__right {
  min-width: 0;
  flex-wrap: wrap;
}

.tec-toolbar {
  gap: 10px;
}

.tec-monthmenu {
  max-width: min(420px, calc(100vw - 32px));
}

/* Downloads/Service-Kacheln: gleichmäßige Kanten */
.downloads-page .download-topforms,
.downloads-page .download-task-grid,
.downloads-page .search-panel,
.contact-route-grid,
.contact-grid,
.vb-workstrip,
.hg-service,
.home-quick,
.home-metrics,
.home-events-list,
.home-contact-strip__links,
.home-partners__list {
  max-width: 100%;
}

/* Lange Wörter/Überschriften dürfen sauber brechen */
:where(h1, h2, h3, .hero-carousel__title, .hg-title, .hg-intro-text h2, .vb-hero-card h1, .jj-hero__title) {
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Tabellen/alte Inhalte sollen nie horizontales Scrollen der ganzen Seite auslösen */
main table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

main pre,
main code {
  max-width: 100%;
  overflow-x: auto;
}

/* Hegeringe: nach Screenshot-Prüfung nochmals ruhigerer Intro-Rhythmus */
.hg-intro-split {
  gap: clamp(30px, 4.6vw, 62px) !important;
}

.hg-intro-text h2.hg-uppercase {
  font-size: clamp(2rem, 3.8vw, 3.95rem) !important;
  max-width: 680px !important;
}

.hg-intro-map {
  padding-top: clamp(4px, 1.2vw, 14px) !important;
}

/* Mobile: konsistente 14px Außenrand, genug Footer-Luft wegen Actionbar */
@media (max-width: 760px) {
  :root {
    --kjv-container: min(100% - 28px, 1180px);
  }

  :where(
    .tec-wrap,
    .downloads-page,
    .vb-page,
    .contact-page,
    .jagdschule-page,
    .nachsuche-page,
    .ns-page,
    .jj-page,
    .hg-page,
    .member-page,
    .ds-page,
    .im-page,
    .sz-page,
    .lb-page,
    .jj-topic
  ) {
    width: min(100% - 28px, 1180px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body:not(.home-reset) :where(
    .tec-wrap,
    .downloads-page,
    .vb-page,
    .contact-page,
    .jagdschule-page,
    .nachsuche-page,
    .ns-page,
    .jj-page,
    .hg-page,
    .member-page,
    .ds-page,
    .im-page,
    .sz-page,
    .lb-page
  ) {
    padding-top: 30px !important;
    padding-bottom: 92px !important;
  }

  .tec-toolbar__left,
  .tec-toolbar__right,
  .member-support__actions,
  .contact-actions,
  .home-feature__actions,
  .js-hero__cta,
  .ns-emergency__actions {
    width: 100%;
  }

  .tec-toolbar__left > *,
  .tec-toolbar__right > * {
    flex: 1 1 auto;
  }

  .tec-btn,
  .tec-monthbtn,
  .tec-viewbtn,
  .tec-iconbtn {
    min-width: 44px;
  }

  .hg-intro-text h2.hg-uppercase {
    font-size: clamp(1.95rem, 10vw, 3.05rem) !important;
  }
}

@media (max-width: 430px) {
  .mobile-actionbar {
    left: 8px;
    right: 8px;
    bottom: 8px;
  }

  .mobile-actionbar a {
    font-size: .76rem;
    min-height: 52px;
  }
}
