/* ========= Bootmann Theme (Barlow, Navy/Brand) ========= */

/* --- Root & Farben --- */
:root {
   --brand: #0d6efd;
   --brand-700: #0b5ed7;
   --ink: #1e3d6d;
   --sky: linear-gradient(180deg, rgba(13,110,253,.08), rgba(13,110,253,.02));
   /* Bootstrap-Mapper */
   --bs-primary: var(--brand);
   --bs-link-color: var(--brand);
   --bs-link-hover-color: var(--brand-700);
}

.badge-navy {
   background-color: var(--ink) !important;
   color: #fff !important;
}

.bg-navy {
   background-color: var(--ink) !important;
}

/* ========= Tile Color Variants ========= */

.tile-blue {
   background: #e8f1ff;
   border-color: #91b9ff;
}

.tile-blue-dark {
   background: #d9e6ff;
   border-color: #6b9bdf;
}

.tile-ink {
   background: #dfe6f2;
   border-color: #7287a9;
}

.tile-green {
   background: #e6f7ec;
   border-color: #7acc9a;
}

.tile-orange {
   background: #fff3e3;
   border-color: #f3b36c;
}

.tile-sea {
   background: #e6f8f8;
   border-color: #7ad1c9;
}

.tile-purple {
   background: #f3e9ff;
   border-color: #b590e6;
}

   /* Optional: dunklere Überschriftfarbe */
   .tile-blue h2,
   .tile-blue-dark h2,
   .tile-ink h2,
   .tile-green h2,
   .tile-orange h2,
   .tile-sea h2,
   .tile-purple h2 {
      color: var(--ink);
      font-weight: 600;
   }

/* --- Typografie global --- */
html {
   font-size: 14px;
}

@media (min-width: 768px) {
   html {
      font-size: 16px;
   }
}

body {
   font-family: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
   color: var(--ink);
   background: var(--sky);
   margin: 0;
}

/* --- Headlines --- */
h1, h2, h3, h4, h5, h6 {
   font-family: "Barlow", sans-serif;
   font-weight: 600;
   color: var(--ink);
}

p {
   font-size: 1.15rem; /* ca. 18.4px */
}

/* --- Fokusrahmen --- */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
   box-shadow: 0 0 0 .1rem #fff, 0 0 0 .25rem var(--brand);
}

/* ========= Navigation ========= */
.navbar,
.hero,
footer {
   background: var(--sky);
}

.navbar {
   border-bottom: 1px solid rgba(13,110,253,.15);
}

   .navbar-brand,
   .navbar .nav-link {
      color: var(--ink) !important;
      transition: color .2s, font-weight .15s;
      font-weight: 500;
   }

      .navbar .nav-link:hover {
         color: var(--brand-700) !important;
      }

      .navbar .nav-link.active {
         color: var(--brand-700) !important;
         font-weight: 600;
      }

      .navbar-brand img {
         height: 40px;
         width: auto;
         filter: drop-shadow(0 1px 2px rgba(0,0,0,.1));
      }

/* ========= Hero ========= */
.hero {
   padding: 1rem 0 .5rem;
}

@media (min-width:992px) {
   .hero {
      padding: 2.5rem 0 1.5rem;
   }
}

/* ========= Karten & Elemente ========= */
.service-card,
.stack-tile,
.leitbild {
   border: 1px solid rgba(13,110,253,.15);
   border-radius: .75rem;
   transition: .2s;
}

   .service-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 .5rem 1.25rem rgba(13,110,253,.15);
   }

.icon-round {
   width: 3.25rem;
   height: 3.25rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: #e7f1ff;
   color: var(--brand-700);
   font-size: 1.4rem;
}

.leitbild {
   border-left: .35rem solid var(--brand);
   background: rgba(13,110,253,.03);
   box-shadow: 0 .25rem .75rem rgba(13,110,253,.05);
}

   .leitbild:hover {
      background: rgba(13,110,253,.06);
      box-shadow: 0 .5rem 1.25rem rgba(13,110,253,.08);
   }

/* ========= Logos ========= */
.logo {
   max-height: 50px;
   object-fit: contain;
   width: auto;
}

/* ========= Buttons ========= */
.btn-primary {
   background: var(--ink) !important;
   border-color: var(--ink) !important;
   color: #fff !important;
}

   .btn-primary:hover,
   .btn-primary:focus {
      background: var(--brand-700) !important;
      border-color: var(--brand-700) !important;
   }

.btn-outline-primary {
   color: var(--ink) !important;
   border-color: var(--ink) !important;
}

   .btn-outline-primary:hover,
   .btn-outline-primary:focus {
      background: var(--ink) !important;
      border-color: var(--ink) !important;
      color: #fff !important;
   }

/* ========= Badges ========= */
.badge-pill {
   border-radius: 100rem;
   padding: .5rem .9rem;
   background: #e7f1ff;
   color: var(--brand-700);
   font-weight: 600;
   font-size: .9rem;
}

.badge-brand {
   background: var(--ink) !important;
   color: #fff !important;
   font-weight: 600;
   padding: .45rem .75rem;
   border-radius: 50rem;
   font-size: .9rem;
   letter-spacing: .2px;
}

   .badge-brand:hover {
      background: var(--brand-700) !important;
   }

.wrap-img {
   float: left;
   width: 220px;
   height: auto;
   margin: 0 1.25rem 1rem 0;
   shape-outside: inset(0 round .6rem);
   shape-margin: .4rem;
   border-radius: .6rem;
}

@media (max-width: 767.98px) {
   .wrap-img {
      float: none;
      display: block;
      margin: 0 auto 1rem;
      shape-outside: none;
   }
}

.stack-tile {
   border: 1px solid rgba(13,110,253,.15);
   border-radius: .75rem;
   padding: 1.25rem; /* mobil */
}

@media (min-width: 768px) {
   .stack-tile {
      padding: 2rem; /* Desktop */
   }
}

/* ========= Footer ========= */

/* Footer Links – clean, ohne Unterstrich */
.footer-link {
   color: var(--ink);
   text-decoration: none;
   font-weight: 300;
   transition: color .2s ease;
   position: relative;
}

   .footer-link:hover,
   .footer-link:focus {
      color: var(--brand-700);
      text-decoration: none;
   }

/* Punkttrenner zwischen Links */
.footer-nav .footer-link + .footer-link::before {
   content: "·";
   margin: 0 .45rem 0 .25rem;
   color: rgba(0,0,0,.35);
   font-weight: 300;
}

/* Active Link */
.footer-link.is-active {
   color: var(--brand);
   font-weight: 400;
}

/* ========= Tiles ========= */
/* Grundstil für alle Tiles */
.stack-tile {
   background: var(--tile-bg, rgba(13,110,253,.06));
   border: 2px solid var(--tile, #0d6efd);
   border-radius: .75rem;
   box-shadow: 0 2px 6px rgba(0,0,0,.04);
}

   /* Titelzeile mit Icon */
   .stack-tile .tile-head {
      display: flex;
      align-items: center;
      gap: .55rem;
      margin-bottom: .5rem;
   }

      .stack-tile .tile-head .icon {
         width: 28px;
         height: 28px;
         border-radius: 50%;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         color: var(--tile, #0d6efd);
         background: transparent !important;
         border: none;
      }

      /* H2-Typo ruhiger */
      .stack-tile .tile-head.h4 {
         letter-spacing: .15px;
      }

/* Checkliste */
.list-checked li {
   position: relative;
   padding-left: 1.4rem;
   margin-bottom: .45rem;
}

   .list-checked li::before {
      content: "✓";
      position: absolute;
      left: 0;
      top: .05rem;
      font-weight: 700;
      color: var(--tile, var(--bs-primary));
      opacity: .85;
   }

/* Farbvarianten */
.tile-yellow {
   --tile: #d4a000;
   --tile-bg: rgba(255,244,200,.45);
   border-color: rgba(212,160,0,.35);
}

.tile-blue {
   --tile: #2f68c1;
   --tile-bg: rgba(205,230,255,.45);
   border-color: rgba(47,104,193,.35);
}

.tile-blue-dark {
   --tile: #29539b;
   --tile-bg: rgba(185,212,255,.35);
   border-color: rgba(41,83,155,.35);
}

.tile-ink {
   --tile: #1e3d6d;
   --tile-bg: rgba(223,230,242,.55);
   border-color: rgba(30,61,109,.35);
}

.tile-green {
   --tile: #2e8b57;
   --tile-bg: rgba(210,243,225,.45);
   border-color: rgba(46,139,87,.35);
}

.tile-orange {
   --tile: #c56a1a;
   --tile-bg: rgba(255,225,200,.45);
   border-color: rgba(197,106,26,.35);
}

.tile-purple {
   --tile: #6f42c1;
   --tile-bg: rgba(230,218,255,.45);
   border-color: rgba(111,66,193,.35);
}

/* Responsive Feinschliff */
@media (min-width: 1200px) {
   .stack-tile {
      padding: 1.25rem 1.5rem;
   }
}

.card-img-top {
   height: 240px;
   object-fit: cover;
}

.tile-img {
   height: 200px;
   width: 100%;
   object-fit: contain;
   padding: 5px;
   background-color: #fff;
}

.responsive-img {
   max-width: 100%; /* nie breiter als Container */
   height: auto; /* Proportionen bleiben korrekt */
}

.lightbox {
   position: fixed;
   inset: 0;
   background: rgba(0,0,0,.8);
   display: none;
   justify-content: center;
   align-items: center;
   z-index: 1050;
}

   .lightbox img {
      max-width: 90%;
      max-height: 90%;
   }

   .lightbox:target {
      display: flex;
   }

.w-80 {
   width: 80% !important;
}

.w-90 {
   width: 90% !important;
}

max-h-300 {
   max-height: 300px;
}

.max-h-400 {
   max-height: 400px;
}

.max-h-500 {
   max-height: 500px;
}

.link-dotted {
   text-decoration: none;
   border-bottom: 1px dotted currentColor;
   padding-bottom: 1px;
}

@media (min-width: 768px) {
   .date-box {
      min-width: 120px;
   }
}

.tile {
   display: flex;
   justify-content: center;
}

.tile-img {
   display: block; /* wichtig! */
   width: 100%;
   height: auto;
   max-width: 200px;
   min-height: 200px;
   border-radius: 0.75rem; /* deine Rundung */
   object-fit: cover;
}