/* 
    Created on : 09.09.2026, 11:41:43
    Author     : Bichlmeier
*/


    :root {
      --barbarossa-red: #c60018;
      --barbarossa-blue: #2146d8;
      --barbarossa-dark: #17191d;
      --barbarossa-light: #f7f7f8;
      --barbarossa-muted: #6c757d;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: #26282c;
      background: #fff;
    }

    a {
      color: var(--barbarossa-blue);
    }

    .section-padding {
      padding: 88px 0;
    }

    .section-kicker {
      display: inline-block;
      margin-bottom: 12px;
      font-size: .8rem;
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--barbarossa-red);
    }

    .section-title {
      font-weight: 800;
      letter-spacing: -.03em;
    }

    .navbar {
      background: rgba(255,255,255,.97);
      border-bottom: 1px solid rgba(0,0,0,.08);
    }

    .navbar-brand {
      font-weight: 800;
      color: var(--barbarossa-dark);
    }

    .navbar-brand span {
      color: var(--barbarossa-red);
    }

    .navbar .nav-link {
      color: #36383c;
      font-weight: 600;
      padding-left: .9rem;
      padding-right: .9rem;
    }

    .navbar .nav-link:hover {
      color: var(--barbarossa-red);
    }

    .hero {
      min-height: 680px;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
      background:
        linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 43%, rgba(255,255,255,.72) 64%, rgba(255,255,255,.30) 100%),
        url("https://www.barbarossa-kv.de/images/bg3-Copy.jpg") center / cover no-repeat;
    }

    .hero::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 6px;
      background: linear-gradient(90deg, var(--barbarossa-red) 0 50%, var(--barbarossa-blue) 50% 100%);
    }

    .hero-content {
      position: relative;
      z-index: 1;
      max-width: 760px;
    }

    .hero h1 {
      font-size: clamp(2.7rem, 6vw, 5.4rem);
      line-height: .96;
      font-weight: 850;
      letter-spacing: -.055em;
      color: var(--barbarossa-dark);
    }

    .hero-sub {
      max-width: 680px;
      font-size: 1.18rem;
      line-height: 1.75;
      color: #4f5359;
    }

    .hero-motto {
      display: inline-flex;
      gap: .65rem;
      align-items: center;
      margin-bottom: 1.5rem;
      padding: .55rem .9rem;
      border: 1px solid rgba(0,0,0,.09);
      background: rgba(255,255,255,.74);
      border-radius: 999px;
      font-weight: 700;
      backdrop-filter: blur(6px);
    }

    .hero-motto i {
      width: 8px;
      height: 8px;
      display: inline-block;
      border-radius: 50%;
      background: var(--barbarossa-red);
      box-shadow: 15px 0 0 var(--barbarossa-blue);
      margin-right: 15px;
    }

    .btn-barbarossa {
      background: var(--barbarossa-red);
      border-color: var(--barbarossa-red);
      color: #fff;
      font-weight: 700;
      padding: .8rem 1.2rem;
    }

    .btn-barbarossa:hover {
      background: #a80014;
      border-color: #a80014;
      color: #fff;
    }

    .btn-outline-dark {
      font-weight: 700;
      padding: .8rem 1.2rem;
    }

    .intro-card {
      height: 100%;
      padding: 34px;
      border: 1px solid rgba(0,0,0,.08);
      border-radius: 22px;
      background: #fff;
      box-shadow: 0 18px 55px rgba(0,0,0,.06);
    }

    .intro-card .number {
      font-size: .8rem;
      font-weight: 800;
      letter-spacing: .14em;
      color: var(--barbarossa-muted);
    }

    .intro-card h3 {
      margin: 16px 0 12px;
      font-weight: 800;
    }

    .principles {
      color: #fff;
      background:
        linear-gradient(120deg, rgba(21,23,28,.96), rgba(32,36,45,.94)),
        url("https://www.barbarossa-kv.de/images/bg3-1.jpg") center / cover no-repeat;
    }

    .principle-word {
      padding: 20px 0;
      font-size: clamp(2rem, 4vw, 4.5rem);
      font-weight: 800;
      letter-spacing: -.04em;
      border-bottom: 1px solid rgba(255,255,255,.14);
    }

    .principle-word:last-child {
      border-bottom: 0;
    }

    .motto-box {
      padding: 34px;
      border: 1px solid rgba(255,255,255,.15);
      border-radius: 22px;
      background: rgba(255,255,255,.07);
    }

    .history-image {
      width: 100%;
      min-height: 430px;
      object-fit: cover;
      border-radius: 24px;
      box-shadow: 0 20px 60px rgba(0,0,0,.12);
    }

    .board {
      background: var(--barbarossa-light);
    }

    .board-row {
      padding: 18px 0;
      border-bottom: 1px solid rgba(0,0,0,.09);
    }

    .board-row:last-child {
      border-bottom: 0;
    }

    .contact {
      color: #fff;
      background: var(--barbarossa-blue);
    }

    .contact a {
      color: #fff;
      text-decoration-color: rgba(255,255,255,.45);
      text-underline-offset: 4px;
    }

    .contact-card {
      height: 100%;
      padding: 30px;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 22px;
      background: rgba(255,255,255,.08);
    }

    .contact-card small {
      display: block;
      margin-bottom: .35rem;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: rgba(255,255,255,.67);
      font-weight: 700;
    }

    .crest {
      max-width: 300px;
      width: 100%;
      filter: drop-shadow(0 18px 22px rgba(0,0,0,.16));
    }

    .imprint {
      background: #101216;
      color: rgba(255,255,255,.78);
    }

    .imprint h2,
    .imprint h3 {
      color: #fff;
    }

    .imprint a {
      color: #fff;
    }

    footer {
      padding: 25px 0;
      color: #777;
      background: #fff;
      border-top: 1px solid rgba(0,0,0,.08);
    }


    /* Ruhiger, klassischer Auftritt */
    body {
      font-family: Arial, Helvetica, sans-serif;
    }

    .site-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1030;
      background: rgba(255,255,255,.98);
      border-bottom: 1px solid #dedede;
      box-shadow: 0 2px 10px rgba(0,0,0,.05);
    }

    .header-inner {
      min-height: 86px;
      display: flex;
      align-items: center;
      gap: 18px;
    }

    .header-logo {
      width: 62px;
      height: 62px;
      object-fit: contain;
      flex: 0 0 auto;
    }

    .header-title {
      font-size: 1.45rem;
      line-height: 1.15;
      font-weight: 700;
      letter-spacing: 0;
      color: #202124;
    }

    .header-title span {
      display: block;
      margin-top: 4px;
      font-size: .88rem;
      font-weight: 400;
      color: #6b6f75;
    }

    .section-title,
    .hero h1,
    .principle-word {
      font-family: Arial, Helvetica, sans-serif;
      letter-spacing: 0;
    }

    .section-title {
      font-size: 2.5rem !important;
      line-height: 1.15;
      font-weight: 700;
    }

    .hero h1 {
      font-size: clamp(2.6rem, 5vw, 4.7rem);
      line-height: 1.03;
      font-weight: 700;
      letter-spacing: -.025em;
    }

    .principle-word {
      font-weight: 700;
      letter-spacing: 0;
    }

    .intro-card,
    .motto-box,
    .contact-card,
    .history-image {
      border-radius: 6px;
    }

    .intro-card {
      box-shadow: 0 8px 24px rgba(0,0,0,.045);
    }

    .hero {
      padding-top: 86px;
    }

    @media (max-width: 991.98px) {
      .header-inner {
        min-height: 72px;
      }

      .header-logo {
        width: 50px;
        height: 50px;
      }

      .header-title {
        font-size: 1.12rem;
      }

      .hero {
        padding-top: 72px;
        min-height: auto;
        padding: 110px 0 80px;
        background:
          linear-gradient(rgba(255,255,255,.92), rgba(255,255,255,.92)),
          url("https://www.barbarossa-kv.de/images/bg3-Copy.jpg") center / cover no-repeat;
      }

      .section-padding {
        padding: 68px 0;
      }

      .section-title {
        font-size: 2rem !important;
      }
    }