html {
  font-size: 14px;
}

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

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}


.event-grid-image {
   width: 70px;
   height: 48px;
   object-fit: cover;
   border-radius: 4px;
   border: 1px solid #dee2e6;
}

.event-grid-placeholder {
   width: 70px;
   height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   font-size: 11px;
   color: #6c757d;
   background-color: #f8f9fa;
   border: 1px solid #dee2e6;
   border-radius: 4px;
}

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

/* --- Root & Farben --- */
:root {
   --brand: #0d6efd;
   --brand-700: #0b5ed7;
   --ink: #1e3d6d;
   --sky: l#0d6efd;
   /* 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;
}

body {
   margin-bottom: 0 !important;
}

.logo {
   display: inline-block;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: 700;
   line-height: 1;
}

.brand {
   font-size: 36px;
   letter-spacing: -1px;
   transform: scaleX(1.08); /* etwas breiter */
   transform-origin: left center;
}

.blue {
   color: #00407a;
}

.green {
   color: #66cc00;
}

.claim {
   margin-top: 4px;
   display: flex;
   align-items: center;
   gap: 7px;
   font-size: 14px;
   color: #00407a;
   font-weight: 700;
}

   .claim span {
      display: inline-block;
      width: 12px;
      height: 2px;
      background: #00407a;
   }

.termine {
   max-width: 700px;
}

.termin {
   display: flex;
   gap: 16px;
   padding: 14px 0;
   border-bottom: 1px solid #ddd;
}

.datum {
   width: 64px;
   height: 64px;
   background: #00407a;
   color: white;
   text-align: center;
   border-radius: 8px;
   flex-shrink: 0;
   padding-top: 6px;
   font-weight: 400;
}

   .datum strong {
      display: block;
      font-size: 24px;
      line-height: 1.1;
   }

   .datum span {
      display: block;
      font-size: 13px;
      line-height: 1.1;
   }

.termin h5 {
   margin: 0 0 4px;
   color: #00407a;
}

.termin p {
   margin: 0;
   color: #555;
}

/* ===========================
   MarktTreff Veranstaltungen
   =========================== */

.markttreff-events {
   max-width: 1100px;
   margin: 0 auto;
}

.page-title {
   max-width: 650px;
   width: 100%;
   height: auto;
}

.event-meta {
   display: flex;
   justify-content: center;
   gap: 2rem;
   flex-wrap: wrap;
}

.meta-item {
   display: flex;
   align-items: center;
   gap: 1px;
   color: #00407a;
   font-weight: 600;
}

   .meta-item i {
      color: #66cc00;
      font-size: 1.5rem;
   }

.meta-link,
.meta-link:visited,
.meta-link:hover,
.meta-link:active {
   color: inherit;
   text-decoration: none;
   font-weight: inherit;
}

.event-list {
   max-width: 850px;
   margin: 0 auto;
}

.event-item {
   display: flex;
   align-items: center;
   gap: 1.5rem;
   padding: 1.25rem 0;
   border-bottom: 1px solid #e0e0e0;
}

.event-photo {
   width: 90px;
   height: 90px;
   border-radius: 50%;
   object-fit: cover;
   flex-shrink: 0;
}

.event-text {
   text-align: left;
}

.speaker-date {
   color: #66cc00;
   font-weight: 700;
   font-size: 1rem;
   margin-bottom: .2rem;
}

.speaker-name {
   color: #00407a;
   font-size: 2rem;
   font-weight: 700;
   line-height: 1.1;
   margin: 0;
}

.speaker-role {
   color: #333;
   font-size: 1.1rem;
}

@media (max-width: 768px) {

   .page-title {
      max-width: 340px;
   }

   .event-meta {
      flex-direction: column;
      gap: .75rem;
   }

   .event-list {
      max-width: 100%;
   }

   .event-item {
      gap: 1rem;
      align-items: center;
   }

   .event-photo {
      width: 70px;
      height: 70px;
   }

   .speaker-date {
      font-size: .85rem;
   }

   .speaker-name {
      font-size: 1.25rem;
   }

   .speaker-role {
      font-size: .9rem;
   }
}

.lighthouse {
   width: 100%;
   max-width: 350px;
   height: auto;
   mask-image: linear-gradient( to right, black 0%, black 75%, transparent 100% );
   -webkit-mask-image: linear-gradient( to right, black 0%, black 75%, transparent 100% );
}

.page-title {
   max-width: 450px;
   width: 100%;
   height: auto;
}

@media (max-width:768px) {
   .page-title {
      max-width: 280px;
   }
}