@charset "UTF-8";
/*==============================================================================
   LOGOO-LOGISTIK.COM  //////////  © 2025 BITENOTBARK, Tim Gloystein
==============================================================================*/

/*==============================================================================
  01. BASICS
==============================================================================*/

body {
 font-family: var(--font-base);
 font-weight: var(--font-weight-light);
 font-size: var(--font-size-base);
 line-height: var(--line-height-base);
 color: var(--color-text);
}

body:not(.core) ::selection {
 background: var(--color-primary);
 color: var(--color-white);
}

a {
 color: var(--color-link);
 text-decoration: underline;
 transition: var(--transition-speed);
}
a:hover {
 color: var(--color-link-hover);
 text-decoration: none;
}

main ::placeholder {
 font-size: 1em;
 text-align: center;
 font-family: var(--font-base) !important;
}

video {
 object-fit: cover;
 width: 100%;
 height: 100vh;
 min-height: 800px;
}
:target {
 scroll-margin-top: 100px; /* entspricht etwa der Höhe deiner Navbar */
}
/*==============================================================================
  02. TYPOGRAPHY
==============================================================================*/

/* Überschriften */
h1, h2, h3, h4, h5, h6 {
 font-family: var(--font-base);
 font-weight: var(--font-weight-bold);
 line-height: var(--line-height-tight);
 margin-bottom: var(--space-md);
}

h1 {
 font-size: var(--font-size-xxl);      /* 60px */
 text-transform: uppercase;
 color: var(--color-primary);
}

h2 {
 font-size: var(--font-size-xxl);
 color: var(--color-primary-dark);/* 24px */
 text-transform: uppercase;
}

h3 {
 font-size: var(--font-size-lg);       /* 20px */
 color: var(--color-primary-dark);
}

/* Fließtext */
p {
 font-size: var(--font-size-lg);       /* 24px */
 font-weight: var(--font-weight-light);
 margin-bottom: var(--space-md);
}

/* Listen */
ul, ol {
 font-family: var(--font-base);
 font-weight: var(--font-weight-light);
 font-size: var(--font-size-lg);   /* 24px */
 line-height: var(--line-height-tight);
 color: var(--color-text);
 margin-bottom: var(--space-md);
 padding-left: 1.5rem; /* Standard-Einrückung */
}

ul li,
ol li {
 margin-bottom: 0.5rem;
}

/* Hervorhebungen */
b, strong {
 font-weight: var(--font-weight-bold);
}

/* Hero Headline */
.hero-title {
 font-size: var(--font-size-hero);     /* 100px */
 font-weight: var(--font-weight-bold);
 text-transform: uppercase;
 color: var(--color-white);
 line-height: var(--line-height-tight);
}
/*==============================================================================
  03. BUTTONS & COMPONENTS
==============================================================================*/

/* Basis-Buttons (Bootstrap-kompatibel) */
.btn,
.btn-primary {
 background-color: var(--color-primary-dark);
 border: none;
 color: var(--color-white);
 font-weight: var(--font-weight-bold);
 text-transform: none;
 font-size: var(--font-size-md);
 padding: 0.6rem 1.75rem;
 border-radius: var(--radius-base);
 transition: background-color var(--transition-speed),
 color var(--transition-speed),
 transform var(--transition-speed);
}

.btn:hover,
.btn-primary:hover {
 background-color: var(--color-primary-bright);
 color: var(--color-white);
 transform: translateY(-2px);
 text-decoration: none;
}

.btn:active,
.btn-primary:active {
 background-color: var(--color-primary);
 color: var(--color-white);
 transform: translateY(0);
}

/* Deaktivierte Buttons */
.btn:disabled,
.btn.disabled {
 background-color: rgba(var(--bs-primary-rgb), 0.5);
 opacity: 0.6;
 cursor: not-allowed;
}

/* Outline-Variante */
.btn-outline-primary {
 background: transparent;
 color: var(--color-primary-dark);
 border: 2px solid var(--color-primary-dark);
}
.btn-outline-primary:hover {
 background: var(--color-primary-dark);
 color: var(--color-white);
}

/* Hero Button (Call-to-Action, z. B. im Slider) */
.btn-hero {
 background-color: var(--color-primary);
 border: none;
 color: var(--color-white);
 padding: 1rem 2.5rem;
 border-radius: var(--radius-lg);
 font-weight: var(--font-weight-bold);
 font-size: var(--font-size-button);
 text-transform: uppercase;
 letter-spacing: 0.03em;
 transition: background-color var(--transition-speed),
 transform var(--transition-speed),
 box-shadow var(--transition-speed);
}
.btn-hero:hover {
 background-color: var(--color-primary-bright);
 color: var(--color-white);
 transform: translateY(-3px);
 box-shadow: var(--shadow-md);
 text-decoration: none;
}
.btn-hero:active {
 background-color: var(--color-primary);
 transform: translateY(0);
 box-shadow: none;
}

/* Accordion */
.accordion-button {
 font-size: 1rem;
 color: var(--color-text);
}
.accordion-button:not(.collapsed) {
 color: var(--color-primary);
}
.accordion-body {
 font-size: 1rem;
 line-height: 1.4rem;
}

/*==============================================================================
  04. LAYOUT & HERO
==============================================================================*/

#topBar {
 height: 100px;
 position: fixed;
 width: 100%;
 z-index: 1000;
}
.carousel-inner img {
 width: 100%;
 object-fit: cover;
}

/* HERO SLIDER */
.lcms-slider {
 position: relative;
 overflow: hidden;
 margin-bottom: 0;
}
.lcms-slider .carousel-item img {
 height: 100vh;
 object-fit: cover;
}
.lcms-slider .carousel-item::after {
 /*content: "";*/
 /*position: absolute;*/
 /*inset: 0;*/
 /*background: linear-gradient(to bottom, rgba(0,0,0,0.25) 40%, rgba(0,0,0,0.55) 100%);*/
 /*z-index: 1;*/
}
.lcms-slider .carousel-caption {
 position: absolute;
 bottom: 10%;
 left: 8%;
 right: 8%;
 color: var(--color-white);
 text-shadow: 0 2px 10px rgba(0,0,0,0.6);
 z-index: 2;
}
.lcms-slider .carousel-caption h2 {
 font-size: clamp(2rem, 4vw, 4rem);
 font-weight: var(--font-weight-bold);
 text-transform: uppercase;
}
.lcms-slider .carousel-caption p {
 font-size: clamp(1rem, 1.6vw, 1.25rem);
 font-weight: var(--font-weight-light);
 max-width: 40rem;
}
.carousel-indicators .active {
 background-color: var(--color-primary);
}

/*==============================================================================
  05. UTILITIES
==============================================================================*/

.bggreen {
 background: var(--color-primary);
 color: var(--color-white);
 border: none;
}
.border-primary {
 border-color: var(--color-primary) !important;
}
.toTop {
 position: fixed;
 bottom: 60px;
 right: 1rem;
 background: transparent;
 color: var(--color-primary-dark);
 font-size: 32px;
 cursor: pointer;
 padding: 0;
}
.btn.toTop:hover {
 background: transparent;
 color: var(--color-primary-bright);
}

/*==============================================================================
  06. MEDIA QUERIES
==============================================================================*/

@media (max-width: 767px) {
 .lcms-slider .carousel-caption {
  bottom: 5%;
  text-align: center;
 }
 .lcms-slider .carousel-caption p {
  display: none;
 }
}
@media (min-width: 992px) {
 p, ul {

 }
}

/*==============================================================================
  07. PRINT
==============================================================================*/
@media print {
 * {
  background: transparent !important;
  color: var(--color-black) !important;
  box-shadow: none !important;
 }
 a[href]:after {
  content: " (" attr(href) ")";
 }
}