/* kodokan-karate.de: Projekt-CSS, geladen nach theme.css (Setting knet.advanced.customCss).
   Nachbau der Altseite (Bootstrap Package, modifications.scss) auf knet_sitepackage.
   Werte aus 02_optik-diagnose.md; Farben: Rot #AD1112, Text #2B2B2B, Navy #02315F. */

/* 1. Grundfarben, Text */
body { color: #2B2B2B; }
html:root { --knet-radius: 0; }
/* Vollbreiten-Bänder (100vw) dürfen keinen Querscrollbalken erzeugen (klassischer Scrollbalken = 15 px) */
html, body { overflow-x: clip; }

/* 2. Header (Sitepackage-Variante overlay + Schrumpfen, Settings knet.header.overlayHeight 130px / overlayShrinkHeight 70px):
   fixiert, 130 px, Logo 65 px ohne Karte, Menülinks rot. Startseite: transparent über dem bildschirmfüllenden Hero,
   ab 150 px Scrollweg weiß und 70 px hoch mit kleinem Logo (alt: BP navbar default-transition auf tree.level 0).
   Unterseiten: immer weiß, Hero beginnt unter dem Header, Schrumpfen beim Scrollen wie alt (navbar-transition). */
.knet-header { border-bottom: 0; }
body.knet-header-overlay .knet-header .navbar-brand { width: auto; padding: 0; background: transparent; border-radius: 0; }
body.knet-header-overlay .knet-header .navbar-brand .knet-logo { width: auto; height: 65px; max-height: 65px; transition: height 0.25s ease; }
body.knet-header-overlay.knet-header-shrink.knet-scrolled .knet-header .navbar-brand .knet-logo { height: 46px; max-height: 46px; }
.knet-header .navbar-nav .nav-link { color: #AD1112; font-size: 1rem; padding-left: 0.75rem; padding-right: 0.75rem; }
.knet-header .navbar-nav .nav-link:hover,
.knet-header .navbar-nav .nav-link:focus { color: rgba(173, 17, 18, 0.9); }
.knet-header .navbar-nav .nav-link.active { color: rgba(173, 17, 18, 0.9); }
/* über dem Hero bleiben die Links rot (Sitepackage setzt sie weiß) */
body.knet-header-overlay.knet-over-hero .knet-header .navbar-nav .nav-link,
body.knet-header-overlay.knet-over-hero .knet-header .navbar-nav .nav-link:hover,
body.knet-header-overlay.knet-over-hero .knet-header .navbar-nav .nav-link.active { color: #AD1112; opacity: 1; }
/* Unterseiten: Header immer weiß, Inhalt (inkl. Hero) unter den fixierten Header */
body.knet-header-overlay:not(.page-1).knet-over-hero .knet-header { background: #fff; }
body.knet-header-overlay:not(.page-1) .knet-main { padding-top: var(--knet-header-height, 130px); }
/* Startseite: Hero bildschirmfüllend, Header liegt darüber */
body.page-1 .knet-hero img { height: 100vh; min-height: 600px; }
@media (min-width: 992px) {
  .knet-header .navbar-nav .nav-link.active { box-shadow: inset 0 -2px 0 #AD1112; }
  /* „Start“ ist eine Shortcut-Seite auf die Wurzel und damit überall „active“: Linie nur auf der Startseite */
  body:not(.page-1) .knet-header .navbar-nav .nav-link.active[href="/"] { box-shadow: none; color: #AD1112; }
}
/* Handy/Tablet: weißer, kompakter Header (70 px), kein Schrumpfen (JS nur ab Desktop), Inhalt darunter */
@media (max-width: 991.98px) {
  html:root { --knet-header-height: 70px; }
  /* Höhe nicht fest: das aufgeklappte Menü verlängert den Header und schiebt den Hero nach unten,
     statt vom Hero überdeckt zu werden (Sichttest Tommy 16.10.) */
  body.knet-header-overlay .knet-header { background: #fff; height: auto; min-height: 70px; position: relative; z-index: 1030; }
  body.knet-header-overlay .knet-header .navbar { min-height: 70px; }
  body.knet-header-overlay .knet-header .navbar-collapse { background: #fff; }
  body.knet-header-overlay .knet-header .navbar-brand .knet-logo { height: 46px; max-height: 46px; }
  body.knet-header-overlay .knet-main,
  body.knet-header-overlay:not(.page-1) .knet-main { padding-top: 0; }   /* Header ist hier statisch (Sitepackage fixiert nur ab Desktop) */
  body.page-1 .knet-hero img { height: 70vh; min-height: 400px; }
}

/* 3. Hero: Titel links, weiß, leicht, Navy-Linie unten (alt: carousel border-bottom) */
.knet-hero { border-bottom: 2px solid #02315F; margin-bottom: 0; }
.knet-hero .frame { margin-bottom: 0; }
/* Startseite: alt dunkler Titel auf hellem Bild */
body.page-1 .knet-hero .carousel-caption h2,
body.page-1 .knet-hero .carousel-caption h3,
body.page-1 .knet-hero .carousel-caption .h2,
body.page-1 .knet-hero .carousel-caption p { color: #2B2B2B; }
.knet-hero .carousel-caption {
  left: 0; right: 0; top: 0; bottom: 0;
  display: flex; flex-direction: column; justify-content: center;
  text-align: left; padding: 0 12px;
  max-width: 1320px; margin: 0 auto;
}
.knet-hero .carousel-caption > * { margin-left: 10%; }
.knet-hero .carousel-caption h1,
.knet-hero .carousel-caption h2,
.knet-hero .carousel-caption h3,
.knet-hero .carousel-caption .h1,
.knet-hero .carousel-caption .h2 { font-size: 3.0625rem; font-weight: 300; color: #fff; text-shadow: none; margin-bottom: 0.25rem; }
.knet-hero .carousel-caption p { font-size: 2rem; font-weight: 300; color: #fff; margin-bottom: 0; }
@media (max-width: 767.98px) {
  .knet-hero .carousel-caption h2, .knet-hero .carousel-caption h3, .knet-hero .carousel-caption .h2 { font-size: 2rem; }
  .knet-hero .carousel-caption p { font-size: 1.25rem; }
  .knet-hero .carousel-caption > * { margin-left: 4%; }
}

/* 3a. Erstes Element unter dem Hero ohne farbiges Band: 56 px Luft wie alt (Iaido, Health & Fitness);
   helle/rote Bänder liegen wie alt direkt am Hero */
.knet-hero + .container > .knet-content-col > .frame:first-child:not(.frame-light):not(.frame-primary):not(.frame-dark) { margin-top: 56px; }

/* 4. Brotkrume als rotes Band über die volle Breite (alt: breadcrumb-section) */
.knet-breadcrumb {
  background: #AD1112;
  width: 100vw; margin-left: calc(50% - 50vw);
  padding: 0;
}
/* Die Krume selbst bleibt auf Container-Breite (Bootstrap-Stufen), das Band ist 100vw breit */
.knet-breadcrumb .breadcrumb { font-size: 1rem; margin: 0 auto; padding: 0.75rem 12px; width: 100%; max-width: 540px; }
@media (min-width: 768px) { .knet-breadcrumb .breadcrumb { max-width: 720px; } }
@media (min-width: 992px) { .knet-breadcrumb .breadcrumb { max-width: 960px; } }
@media (min-width: 1200px) { .knet-breadcrumb .breadcrumb { max-width: 1140px; } }
@media (min-width: 1400px) { .knet-breadcrumb .breadcrumb { max-width: 1320px; } }
.knet-breadcrumb .breadcrumb-item a,
.knet-breadcrumb .breadcrumb-item.active,
.knet-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: #fff; }
/* Subnav-Hero-Seiten: die rote Diagonale unter dem Band (alt: Dreieck-Element in colPos 8 über beiden Spalten).
   Das Inhaltsraster liegt hier in der rechten Spalte, darum per CSS statt Element. */
body.backendlayout-subnav_left_hero .knet-breadcrumb { margin-bottom: 1.5rem; }
body.backendlayout-subnav_left_hero .knet-breadcrumb::after {
  content: ""; display: block; height: 100px;
  background: linear-gradient(to top right, #fff 50%, #AD1112 50%);
}
@media (max-width: 991.98px) { body.backendlayout-subnav_left_hero .knet-breadcrumb::after { height: 30px; } }
body.backendlayout-subnav_left_hero .knet-content-col .frame:has(.dreieck) { display: none; }

/* 5. Dreiecke (rote Diagonalen, html-Elemente aus dem Ordner Datensätze), volle Breite */
.dreieck {
  position: relative; height: 100px;
  background: #AD1112;
  width: 100vw; margin-left: calc(50% - 50vw);
}
.dreieck svg { position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: 100%; }
.frame:has(> .dreieck), .frame:has(> .frame > .dreieck) { margin-bottom: 0; }
/* Dreiecke sitzen ohne Abstand direkt am Inhalt darüber (Tommy, 16.10.) */
.frame:has(+ .frame .dreieck), .frame:has(+ .frame > .frame .dreieck) { margin-bottom: 0; }
.knet-main .container > .frame:last-child,
.knet-main .knet-content-col > .frame:last-child,
.knet-main > .frame:last-child { margin-bottom: 0; }
.knet-breadcrumb + .frame:has(.dreieck),
.knet-breadcrumb + * .frame:has(.dreieck):first-child { margin-top: 0; }
@media (max-width: 991.98px) { .dreieck { height: 30px; } }

/* 6. Übergang zum Footer: alt auf jeder Seite ein Dreieck-Element vor dem Footer, hier per CSS */
.knet-footer::before {
  content: ""; display: block; height: 100px;
  background: linear-gradient(to bottom right, #fff 50%, #AD1112 50%);
}
@media (max-width: 991.98px) { .knet-footer::before { height: 30px; } }

/* 7. Footer: weiß, rote Oberlinie, rote Links und Überschriften, Logo-Band weiß */
.knet-footer {
  --knet-footer-bg: #fff;
  --knet-footer-fg: #2B2B2B;
  margin-top: 0;   /* Diagonale direkt am letzten Inhalt (Tommy, 16.10.) */
}
.knet-footer .knet-footer-columns, .knet-footer .container { color: #2B2B2B; }
.knet-footer a { color: #AD1112; }
.knet-footer a:hover, .knet-footer a:focus-visible { color: #000; text-decoration: none; }
.knet-footer h2, .knet-footer h3, .knet-footer h4, .knet-footer h5,
.knet-footer .h2, .knet-footer .h3, .knet-footer .h4, .knet-footer .h5 {
  color: #AD1112; border-bottom: 2px solid #AD1112; display: inline-block; padding-bottom: 0.25rem; font-size: 1.25rem; font-weight: 400;
}
.knet-footer ul { list-style: none; padding-left: 0; margin-bottom: 0; }
.knet-footer .table, .knet-footer td { color: #2B2B2B; border: 0; padding: 2px; }
.knet-footer-cta { background: #fff; color: #2B2B2B; padding-block: 1.5rem; }
.knet-footer-cta img { max-height: 125px; width: auto; }
.knet-footer-meta, .knet-footer-bottom { border-top-color: rgba(0, 0, 0, 0.1) !important; color: #2B2B2B; }
.knet-footer .knet-footer-social img { filter: invert(14%) sepia(93%) saturate(4573%) hue-rotate(353deg) brightness(85%) contrast(103%); opacity: 1; }

/* 8. Überschriften: h3 rot, Versalien, leicht; erster Buchstabe schwarz (alt: h3.element-header) */
.knet-main .frame > header h3,
.knet-main .ce-header h3 { color: #AD1112; text-transform: uppercase; font-weight: 300; font-size: 2.625rem; }
.knet-main .frame > header h3::first-letter,
.knet-main .ce-header h3::first-letter { color: #000; }
.knet-main .frame > header h4,
.knet-main .ce-header h4 { font-weight: 300; }
.knet-main .frame > header .ce-subheader,
.knet-main .frame > header .subheader { color: #2B2B2B; font-size: 1.25rem; font-weight: 300; }

/* 9. Zitate (alt: blockquote rot kursiv mit roter Linie links) */
blockquote {
  position: relative; padding: 1.25rem 1.5rem; margin-bottom: 1rem;
  border-left: 4px solid rgba(173, 17, 1, 0.7);
  font-size: 1.1em; font-style: italic; color: #AD1112;   /* alt rgba(.7) = Kontrast 4,3:1, Vollton für 4,5:1 */
}
.frame-primary blockquote { color: rgba(255, 255, 255, 0.7); border-left-color: rgba(255, 255, 255, 0.7); }
.frame-primary table a { text-decoration: underline; }

/* 10. Unternavigation links: rechtsbündig, Versalien, rot, aktiv schwarz mit roter Linie */
.knet-subnav { margin-top: 20px; border: 0; }
.knet-subnav .list-group-item {
  border: 0; border-radius: 0; background: transparent;
  color: #AD1112; text-transform: uppercase; text-align: right; padding: 0.25rem 0; font-size: 1rem;
}
.knet-subnav .list-group-item:hover,
.knet-subnav .list-group-item.active { background: transparent; color: #000; border-top: 0; border-bottom: 1px solid #AD1112; margin-top: 0; }
.knet-subnav .list-group-item + .list-group-item { border-top: 0; }

/* 10a. Farbige Bänder auf Seiten ohne Seitenspalte über die volle Breite (alt: section-primary/-light) */
body.backendlayout-start .frame-primary,
body.backendlayout-start .frame-light,
body.backendlayout-standard .frame-primary,
body.backendlayout-standard .frame-light {
  width: 100vw; margin-left: calc(50% - 50vw);
  padding-left: calc(50vw - 50%); padding-right: calc(50vw - 50%);
}
.frame-primary { padding-block: 3rem; }
.frame-light { padding-block: 2rem; }

/* 11. Galerien: feste Kachelhöhe 100 px mit Beschnitt (alt: object-fit cover) */
.knet-gallery .col img { height: 100px; width: 100%; object-fit: cover; aspect-ratio: auto; }

/* 12. News-Karten ohne Rahmen (alt: .card border none) */
.news-list-view .card { border: 0; }