/* =========================
    eingebunden über
   knutkrueger_theme.libraries.yml
   ========================= */


/* @import url('blog.css');     /*farben für blogs mit blockbuilder
@import url('custom-orange.css');
@import url('product.css');
@import url('registration-simplenews.css');  /*REgisttration form simplenews form
@import url('checkout.css'); /*Checkout panes
@import url('header.css');

/* ==========================
   Layout Basis
   ========================= */

body {
  margin: 0;
  font-family: var(--haupt-schrift);
  background: var(--kk-background);
}

.dialog-off-canvas-main-canvas {
  padding: 10px;
 background: var(--kk-background);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.page {
  background-color: var(--kk-background);
}

/* =========================
   Seitentitle
   ========================= */

.field--name-title {
  color: var( --kk-orange);
  font-size: var(--heading-3-size-value) !important;
  margin-top: 20px;
/*  text-align: center;
/*  max-width: 1100px;*/
}

}
/* =========================
   Breadcrumb
   ========================= */
.breadcrumbs {
  padding: 10px 0;
  background: var(--kk-hellblau);
}

/* =========================
   Content
   ========================= */

.main {
  padding: var(--padding);
  background: var(--kk-background);
}

/* Content Box */
.content {
  padding: var(--padding);
  background: var(--kk-background);
  margin: 0px;
  padding: 0px;

}

/* Sidebar */
aside {
  background: var(--kk-hellblau);
  padding: var(--padding);
}

/* =========================
   Fullwidth Bereiche
   ========================= */

.slideshow,
.fw-before,
.fw-after,
.after-content {
  width: 100%;
}

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

.footer {
  margin-top: 40px;
  background: var(--kk-topbar-color);
  color: #fff;
}

.footer .container {
  padding: var(--padding);
}

.footer a {
  color: var(--kk-topbar-a-color);
}

.footer a:hover {
  color: var(--kk-topbar-a-hover-color);
}

/* Copyright */
.copyright {
  background: #000;
  padding: 10px;
  text-align: center;
}


/* Zwingt die Statusnachrichten in den normalen Textfluss zurück (nach oben) */
.highlighted .alert-wrapper,
.highlighted .alert {
  position: relative !important;
  bottom: auto !important;
  top: auto !important;
  width: 100% !important;
  margin-bottom: 20px;
  z-index: 10;
}

/* Falls die Box vorher fixiert war, heben wir das hiermit auf */
.highlighted {
  position: relative !important;
}


/* Zwingt ALLE Nachrichten-Boxen aus dem schwebenden Zustand zurück in das normale Layout */
.help .alert-wrapper,
.highlighted .alert-wrapper,
div[data-drupal-messages],
.alert-wrapper .alert {
  position: relative !important;
  bottom: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
/**  display: block !important;*/
   max-height: 50px;
  clear: both !important;
  margin-bottom: 20px !important;
  box-shadow: none !important;
  transform: none !important;
  z-index: 10 !important;
}

/* Falls Barrio dem übergeordneten Container eine "fixed-bottom" Klasse gegeben hat */
.help, .highlighted {
  position: relative !important;
}
/* Versteckt die Überschrift in den Statusnachrichten */
.alert-wrapper .alert-heading {
  display: none !important;
}

/* Gibt den Nachrichten-Boxen einen Abstand nach oben */
.help .alert-wrapper,
.highlighted .alert-wrapper {
  margin-top: 20px !important; /* Du kannst den Wert nach Belieben vergrößern, z.B. auf 30px oder 2rem */
}

/* Entfernt den Standard-Bootstrap-Rand bei voller Breite */
.layout-builder__section,
.container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0px !important;
  overflow-x: hidden;
}
/* 
* 1. Die Haupt-Box (Container) des Themes auf der Startseite sprengen 
*/
body.path-frontpage main.container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 
* 2. Den unsichtbaren Rand (Gutter) der Bootstrap-Reihen und Spalten entfernen
*/
body.path-frontpage main.container > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.path-frontpage main.container > .row > .col {
  padding-left: 0 !important;
  padding-right: 0 !important;
}