.container .px-0 {
  /*background-image: linear-gradient(to top, var(--primary-color), var(--background-color));
  */
}


.row-divider{
  width:100% !important;
  min-height:300px;
  height: 500px;
  padding:0 !important;
  margin:0 !important;
  display: flex;
  position:relative;
  justify-content: center;
  flex-direction: column;
  /*background-image: url(/home/frantz/Projects/RubyOnRails/realhausfrauen/app/assets/images/backgrounds/_MCS7015.jpg);*/
  background-size: cover; /* Stellt sicher, dass das Bild den gesamten Container abdeckt */
  background-position: center; /* Zentriert das Bild */
  background-repeat: no-repeat; /* Verhindert das Wiederholen des Bildes */
  background-attachment: fixed;
  transition: height 0.5s ease; /* Sanfter Übergang für die Höhenänderung */
  overflow: inherit;
}

.lazy-background-image {
    display: none;
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: auto;
    z-index: -1;
  
}
.preload-img {
  display: none; /* oder visibility: hidden; mit position: absolute; falls benötigt */
}


.background-transition {
  transition: background-image 0.5s ease-in-out;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover; /* Stellt sicher, dass das Bild den gesamten Container abdeckt */
  background-position: center; /* Zentriert das Bild */
  background-repeat: no-repeat; /* Verhindert das Wiederholen des Bildes */
  background-attachment: fixed;
  transition: height 0.5s ease;
  transition: opacity 1s ease-in-out; /* Übergangsanimation */
}


.background-image.low-res {
  opacity: 1; /* Das niedrig aufgelöste Bild ist sofort sichtbar */
}

.background-image.loaded {
  opacity: 1; /* Wird sichtbar, sobald das Bild geladen ist */
}

@media not all and (min-resolution:.001dpcm) { 
  @supports (-webkit-appearance:none) {
    .background-image {
      background-attachment: scroll;
    }
  }
}


@media (max-width: 768px) {
  .row-divider {
    height: auto;
    min-height: 300px;
    background-attachment: local;
  }
}

.svg-separator, .divider-fill, .main {
  background-color: var(--body-background-color);
  /*background-image: linear-gradient(to right, var(--background-color), var(--primary-color));
  */
  fill: var(--body-background-color);
}


/* -- SVG CSS -- */

.svg-separator{
  display: block;
  background: 0 0;
  position: sticky;
  left: 0;
  right: 0;
  z-index: 7;
  width: 100%;
}
.svg-separator.bottom{
  top: auto;
  bottom: 0;
}
.sep1{
  transform: translateY(-100%) translateY(2px) scale(1,1);
  transform-origin: top;
}
.sep2 {
  transform: translateY(-100%) translateY(2px) scale(1,1);
  transform-origin: top;
}
.sep3 {
  transform: translateY(-100%) translateY(2px) scale(1,1);
  transform-origin: top;
}
.sep4 {
  transform: translateY(-100%) translateY(2px) scale(1,1);
  transform-origin: top;
}
.sep5 {
  transform: translateY(100%) translateY(-2px) scale(1,-1);
  transform-origin: top;
  z-index: 8;
  position: absolute;
  top: 0;
}
.sep6 {
  transform: translateY(-100%) translateY(2px) scale(1,1);
  transform-origin: top;
}
.sep7 {
  transform: translateY(-100%) translateY(2px) scale(1,1);
  transform-origin: top;
}
.sep8 {
  transform: translateY(-100%) translateY(2px) scale(1,1);
  transform-origin: top;
}
.sep9 {
  transform: translateY(0%) translateY(0) scale(-1,1);
  transform: translateY(0) scale(-1,1);
  transform-origin: bottom;
  z-index: 8;
}

.svg-separator.sep9 {
  position: absolute;
  bottom: 0;
  margin: 0;
  width: 100%;
}

.sep10 {
  transform: translateY(-100%) translateY(2px) scale(1,1);
  transform-origin: top;
}
.sep11 {
  transform: translateY(-100%) translateY(0px) scale(1,1);
  transform-origin: top;
}
.sep12 {
  transform: translateY(-100%) translateY(2px) scale(1,1);
  transform-origin: top;
}

.divider-spacer-top, .divider-spacer-bottom {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100px;
  background-color: transparent;
  
}



.divider-spacer-bottom {
  background-image: linear-gradient(to top, transparent, var(--body-background-color));
}

.divider-spacer-top {
  background-image: linear-gradient(to top, var(--body-background-color), transparent);
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
.site-footer {
    position: relative;
    background-color: var(--red-color);
    color: white;
    padding-top: 0px; /* Erhöht, um mehr Platz für die Polygone zu schaffen */
  }
  
  .polygons-container {
    height: 150px; /* Beibehalten der festgelegten Höhe */
    position: relative; /* oder 'static', je nach Bedarf */
    z-index: 7; /* Stellt sicher, dass der Container über allem anderen liegt, falls noch benötigt */
  }
  
  .footer-polygon {
    position: absolute; /* Für spezifische Positionierung innerhalb des Containers */
    width: 100%;
    height: 150px;
  }
  
  .polygon-one {
    clip-path: polygon(0% 100%, 100% 100%, 100% 75%, 0% 90%);
    z-index: 9;
    background-color: var(--red-color);
    top: 5px;
  }
  
  .polygon-two {
    clip-path: polygon(100% 100%, 100% 60%, 0% 30%, 0% 100%); /* Verschiebt die linke obere Ecke nach unten */
    z-index: 8;
    bottom: 0;
    background: darkgrey;
  }

  .polygon-three {
    clip-path: polygon(0% 60%, 0% 100%, 100% 100%, 100% 20%); /* Verschiebt die linke obere Ecke nach unten */
    z-index: 7;
    bottom: 0;
    background-color: grey;
  }
  
  .footer-spacer {
    height: 25px; /* Beibehalten der festgelegten Höhe */
  }

  .bleibt-sauber {
      justify-content: center;
      text-align: center;
      font-size: 4em;
      font-family: 'Blowbrush', sans-serif;
      text-shadow: 1px 1px 2px black;
  }
@font-face {
    font-family: "Blowbrush";
    src: url(/assets/blowbrush.regular-359af73a446577f911e00abb42c679b5cf4366ea1f4ad11309623a9950a8b7bb.ttf) format("truetype");
  }

  body {
    background-color: var(--body-background-color-2);
    background-image: linear-gradient(to right, var(--body-background-color) ,var(--body-background-color-2));
  }

  .main {
    padding-top: 25px;
    padding-bottom: 25px;
  }

  .navbar-brand {
    font-family: 'Blowbrush', sans-serif; /* Fallback-Schriftart hinzufügen */
    transition: color 0.3s ease-in-out;
    /* Weitere Stile */
  }

  .navbar {
    transition: top 0.3s; /* Glatter Übergang */
    z-index: 9;
    position: sticky;
    background-color: var(--body-background-color);
    box-shadow: 0px 15px 30px 0px rgba(0,0,1,0.7)
  }

  .navbar .container {
    background-color: var(--body-background-color); 
    background-image: none;
  }
  
  .nav-up {
    top: -100%; /* Verschiebt die Navbar außerhalb des oberen Bildschirmrands */
  }
  
  .nav-down {
    top: -1px; /* Navbar positioniert sich am oberen Rand des Bildschirms */
  }

.row {
    margin-left: -15px;
    margin-right: -15px;
  }

  .col-md-2 {
    min-width: 30%;
    max-width: 80%;
    float: left;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
  }

  .col-md-10 {
    min-width: 70%;
    max-width: 100%;
    float: left;
    flex: 1;
  }

  .row.mt-4 {
    display: flex;
    align-items: center; /* Zentriert den Inhalt vertikal */
  }
  
  /* Stil für die Podcast-Beschreibung */
  .col-md-10 p {
    margin: 0; /* Entfernt den Standard-Margin von <p> */
    font-size: 18px; /* Setzt die Schriftgröße */
    text-align: justify; /* Justiert den Text für bessere Lesbarkeit */
    flex: 0;
  }

  .episode {
    background-color: #f0f0f0;
    border-radius: 10px;
    margin-bottom: 20px;
    padding: 20px;
  }
  
  .episode img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  }
  
  /* app/assets/stylesheets/podcasts.css */


.podcast-episode img {
  margin-right: 20px; /* Abstand zwischen Icon und Beschreibung */
}

.podcast-description {
  overflow: auto; /* Erlaubt Scrollen, wenn der Inhalt zu lang ist */
  max-height: 200px; /* Maximale Höhe vor dem Scrollen */
  width: 80%; /* Stellt sicher, dass die Beschreibung 80% der Breite einnimmt */
}


/* app/assets/stylesheets/podcasts.css */

.podcast-episode {
    display: flex;
    background: var(--primary-color);
    max-height: 300px;
    overflow: hidden;
    padding: 20px;
    margin: 20px; /* Abstand zwischen den Episoden */
    margin-bottom: 20px;
    align-items: stretch; /* Zentriert die Elemente vertikal */
    border-radius: 10px;
    box-shadow: 0px 15px 30px 0px rgba(0,0,0,0.3);
  }

.episode-icon {
  flex: 2; /* Beiden Bereichen wird die gleiche Flexibilität zugewiesen */
}

.episode-icon img {
  width: 100%; /* Stellt sicher, dass das Bild die verfügbare Breite ausfüllt */
  height: auto; /* Behält das Seitenverhältnis des Bildes bei */
}

.episode-content {
  display: flex;
  flex: 5;
  flex-direction: column;
  padding-left: 20px; /* Fügt links Abstand zwischen Icon und Inhalt hinzu */
}

.podcast-description {
  overflow-y: auto; /* Ermöglicht vertikales Scrollen für die Beschreibung */
  max-height: 200px; /* Maximale Höhe, bevor Scrollen aktiviert wird */
  margin: 10px;
  width: 100%
}

.episode-title {
  margin-bottom: 10px; /* Abstand zwischen Titel und Beschreibung */
}

.episode-player {
  margin-top: 10px; /* Abstand zwischen Beschreibung und Player */
}

.episode-player audio {
  border-radius: 10px;
}

/* app/assets/stylesheets/podcasts.css */


.episode-icon {
  display: flex;
  justify-content: center; /* Zentriert das Bild horizontal */
  align-items: center; /* Zentriert das Bild vertikal */
}

.episode-icon img {
  max-width: 70%; /* Stellt sicher, dass das Bild die Breite ausfüllt */
  height: auto; /* Behält das Seitenverhältnis des Bildes bei */
  box-shadow: 0px 15px 30px 0px rgba(0,0,0,0.3);
  border-radius: 10px;
}

.episode-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Verteilt den Inhalt gleichmäßig */
  padding-left: 20px; /* Abstand zwischen Icon und Inhalt */
}

.podcast-description {
  overflow-y: auto; /* Erlaubt Scrollen, falls der Inhalt zu lang ist */
  max-height: 200px; /* Maximale Höhe, bevor Scrollen erforderlich wird */
  margin-top: 10px; /* Oberer Abstand */
  margin-bottom: 10px; /* Unterer Abstand */
}

.podcast-description p {
  box-sizing: content-box;
}

.episode-title {
  flex-grow: 0; /* Verhindert das Wachsen des Titels */
}

.episode-player {
  flex-grow: 0; /* Verhindert das Wachsen des Players */
  width: 100%; /* Stellt sicher, dass der Player die volle Breite einnimmt */
}

.pagination {
  flex-wrap: wrap; /* Erlaubt den Elementen, in die nächste Zeile zu fließen, falls nicht genug Platz vorhanden ist */

}

/* Media-Query für Bildschirme schmaler als 768px (typischerweise Tablets und Smartphones) */
@media (max-width: 768px) {
  .pagination li, .pagination li a {
    font-size: 10px; /* Reduzierung für Tablets und kleinere Geräte */
  }

  .pagination li, .pagination li a {
    font-size: 10px; /* Reduzierung für Tablets und kleinere Geräte */
  }
  
  .episode h3 {
    font-size: 16px; /* Verkleinert die Schriftgröße der h3-Überschrift */
  }
  .episode-icon{
    display:none;
  }

  .episode-content {
    padding: 10px 10px;
    flex-direction: column; /* Ordnet das Icon und die Beschreibung nebeneinander an */
    align-items: center; /* Zentriert die Inhalte vertikal */
  }

  .podcast-episode {
    max-height: 200px; /* Eine kleinere Höhe für kleinere Bildschirme */
    padding: 3px; /* Reduziertes Padding */
    margin: 10px 0; /* Reduzierter Margin und gleichmäßiger Abstand oben und unten */
    height: auto; /* Ermöglicht eine flexible Höhe */
  }

  .podcast-episode h3 {
    font-size: 14px; /* Kleinere Schriftgröße für die Überschrift */
  }

  .podcast-description {
    font-size: 12px;
    flex: 1; /* Erlaubt der Beschreibung, den verfügbaren Platz auszufüllen */
    margin: 0px; /* Fügt einen linken Abstand zwischen Icon und Beschreibung hinzu */
  }

  .episode-player {
    width: 100%; /* Streckt den Player über die volle Breite des Divs */
    order: 3; /* Platziert den Player am Ende */
    padding-top: 0px; /* Fügt oberhalb des Players einen Abstand hinzu */
  }

  .episode-icon img {
    max-width: 50px; /* Passt die Größe des Icons an */
  }
}

/* Optional: Weitere Anpassungen für sehr kleine Bildschirme, z.B. Smartphones */
@media (max-width: 480px) {
  .pagination {
    display: flex;
    flex-wrap: wrap; /* Erlaubt den Elementen, in die nächste Zeile zu fließen, falls nicht genug Platz vorhanden ist */
    justify-content: center; /* Zentriert die Kind-Elemente */
  }
  .pagination li, .pagination li a {
    font-size: 8px; /* Weitere Reduzierung für Smartphones */
  }
  .episode h3 {
    font-size: 14px; /* Noch kleinere Schriftgröße für sehr kleine Bildschirme */
  }

  .episode-icon img {
    max-width: 40px; /* Noch kleinere Icon-Größe für sehr kleine Bildschirme */
  }
  .podcast-episode {
    max-height: 300px; /* Noch kleinere Höhe für sehr kleine Bildschirme */
  }
  .podcast-episode img {
    display: none; /* Versteckt das Bild */
  }
}

@media (max-width: 320px) {
  .pagination .page:not(.current):not(:first-child):not(:last-child) {
    display: none; /* Blendet einige Seitenlinks aus, behält aber die erste, letzte und aktuelle Seite bei */
  }
  .pagination {
    display: flex;
  flex-wrap: wrap; /* Erlaubt den Elementen, in die nächste Zeile zu fließen, falls nicht genug Platz vorhanden ist */
  justify-content: center; /* Zentriert die Kind-Elemente */
  }
}


/* Pagination Links Styling */
/* Grundlegendes Styling der Paginierung */
/* Stellt die Basis-Styling-Anforderungen für die Paginierung ein */
.pagination {
  display: flex;
  justify-content: center; /* Zentriert die Paginierungs-Links */
  list-style: none; /* Entfernt Aufzählungszeichen */
  
}

.pagination li {
  display: flex; /* Ermöglicht Flex-Box-Styling innerhalb des span */
  justify-content: center; /* Zentriert den Inhalt horizontal */
  align-items: center; /* Zentriert den Inhalt vertikal */
  /*margin: 0 5px; /* Erhöht den Abstand zwischen den Paginierungs-Links */
  /*min-height: fit-content; /* Stellt sicher, dass die Höhe den Inhalt plus Padding umfasst */
  /*width: fit-content;
  height: fit-content;*/
  cursor: pointer;
  /*background-color: transparent; /* Hintergrundfarbe der Links */
  /*border-radius: 5px; /* Abgerundete Ecken für die Links */
  /*border: 1px solid grey; /* Rahmen um die Links */
}

.pagination li a {
  /*padding: 2px 3px;
  border-radius: 5px;*/
  display: flex;
  /*box-sizing: border-box; /* Berücksichtigt Padding und Border in der Elementgröße */
  flex: 1;
  /*align-items: center; /* Ermöglicht die Einstellung von Breite und Höhe */
  justify-content: center;
  /*width: 100%; /* Füllt die gesamte Breite des Elternelements aus */
  /*height: 100%;
  text-decoration: none; /* Entfernt die Unterstreichung */
  color: inherit; /* Erbt die Textfarbe vom Elternelement */
}

/* Passt Hover-Effekte an */
.pagination li:hover, .pagination li a:hover {
  /*background-color: grey; /* Hintergrundfarbe beim Hover */
  color: var(--red-color); /* Textfarbe beim Hover */
}

/* Zusätzliches Styling für aktive und deaktivierte Links */
.pagination li.active {
  background-color: darkgrey; /* Hintergrundfarbe für aktive Seite */
  color: var(--primary-color); /* Textfarbe für aktive Seite */
}

.pagination li.disabled {
  color: var(--secondary-color);
  background-color: var(--primary-color); /* Hintergrundfarbe für deaktivierte Links */
  cursor: not-allowed; /* Verändert den Cursor für bessere Zugänglichkeit */
}

/* Deaktiviert Hover für .page .gap innerhalb der Paginierung */
.pagination li.page.gap, .pagination li.page.gap a {
  cursor: default; /* Setzt den Cursor auf den Standard zurück */
  pointer-events: none; /* Verhindert, dass das Element klickbar ist */
  font-weight: bold; /* Macht den Text fett */
  /*border-radius: 5px;*/
}

/* Deaktiviert Hover-Effekte speziell für .page .gap */
.pagination li.page.gap:hover, .pagination li.page.gap a:hover {
  background-color: transparent; /* Behält den transparenten Hintergrund bei */
  color: inherit; /* Behält die ursprüngliche Textfarbe bei */
}

/* Spezifisches Styling für .current .page Elemente */
.pagination li.page.current, .pagination li.page.current a {
  background-color: var(--secondary-color); /* Setzt einen grauen Hintergrund */
  /*padding: 2px 3px;
  border: 1px solid var(--secondary-color); /* Fügt einen Rahmen hinzu */
  cursor: default; /* Setzt den Cursor auf den Standard zurück */
  pointer-events: none; /* Verhindert, dass das Element klickbar ist */
  /*font-weight: bold; /* Macht den Text fett */
  
}

/* Deaktiviert Hover-Effekte speziell für .current .page */
.pagination li.page.current:hover, .pagination li.page.current a:hover {
  background-color: var(--secondary-color); /* Behält den grauen Hintergrund bei */
  color: inherit; /* Behält die ursprüngliche Textfarbe bei */
}

.podcast-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* Abstand zwischen den Links */
  justify-content: center; /* Zentriert die Links, wenn nicht genug Platz vorhanden ist */
}

.podcast-link {
  display: flex;
  align-items: center; /* Zentriert die Icons und Texte vertikal */
  background-color: var(--red-color); /* Grüner Hintergrund */
  color: var(--secondary-color); /* Weiße Textfarbe */
  text-decoration: none; /* Entfernt die Unterstreichung von Links */
  padding: 10px; /* Innerer Abstand */
  border-radius: 5px; /* Abgerundete Ecken */
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2); /* Leichter Schatten für den Button-Effekt */
}

.podcast-link img {
  width: 20px; /* Breite des Icons */
  margin-right: 5px; /* Abstand zwischen Icon und Text */
}
.social-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px;
  background-color: transparent;
}

.social-link {
  display: flex;
  align-items: center;
  width: 250px; /* Vergrößerte Breite für Text neben dem Icon */
  min-height: 1em;
  
  margin: 5px;
  padding: 5px;
  text-decoration: none;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, transform 0.3s ease, background 0.3s ease-in-out;
  border:var(--text-color) solid 1px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  /*Nicht markierbarer text*/
  user-select: none;
  -moz-window-dragging: none;
  -webkit-user-drag: none;
  -ms-user-select: none;
}

.social-link i {
  margin-left: 15px; 
  font-size: 38px;
  transition: color 0.3s ease-in-out;
  margin-right: 10px; /* Abstand zwischen Icon und Text */
}

.social-link span {
  flex-grow: 1; /* Nimmt den verfügbaren Platz ein */
  font-size: 100%;
  font-weight: bold;
}

@media (max-width: 768px) {
  .social-link {
    width: 100%; /* Jeder Link nimmt die volle Breite ein */
    justify-content: center; /* Zentriert die Inhalte im Link */
  }
}

@media (max-width: 768px) {
  .social-link i {
    font-size: 28px; /* Kleinere Icons auf mobilen Geräten */
  }
  .social-link span {
    font-size: 14px; /* Kleinere Schriftgröße für Text auf mobilen Geräten */
  }
}

@media (hover: hover) and (pointer: fine) {
  .social-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
  }
}

  /* Farbstile für die Icons der jeweiligen Plattformen */
  .tiktok { background-color: var(--black-color); color: var(--secondary-color); }
  .apple, .google { background-color: var(--secondary-color); color: var(--black-color); }
  .youtube, .radiopublic, .pocketcast{ background-color: #FF0000; color: var(--secondary-color); }
  .instagram {
    background: linear-gradient(45deg, #F58529 0%, #DD2A7B 50%, #8134AF 100%);
    color: var(--secondary-color);
  }
  .spotify { background-color: var(--black-color); color: #1DB954; }
  .rss { background-color: #FFA500; color: var(--secondary-color); }
  .overcast { background-color: var(--secondary-color); color: #ce8600; }

  /* Änderung des Hover-Effekts */
  .tiktok:hover { background-color: var(--secondary-color); color: var(--black-color); }
  .tiktok:hover i { color: var(--black-color); }

  .youtube:hover , .radiopublic:hover, .pocketcast:hover{ background-color: var(--secondary-color); color: #FF0000; }
  .youtube:hover i, .radiopublic:hover i, .pocketcast:hover i{ color: #FF0000; }

  .instagram:hover {color: black; background: linear-gradient(45deg, #8134AF 0%, #DD2A7B 50%, #F58529 100%);}
  .instagram:hover i { color: black; }

  .spotify:hover { background-color: #1DB954; color: var(--black-color); }
  .spotify:hover i { color: var(--black-color); }

  .rss:hover { background-color: var(--secondary-color); color: #FFA500; }
  .rss:hover i { color: #FFA500; }

  .overcast:hover { background-color: #ce8600; color: var(--secondary-color); }
  .overcast:hover i { color: var(--secondary-color); }

  .apple:hover, .google:hover{ background-color: var(--black-color); color: var(--secondary-color); }
  .apple:hover i , .google:hover i{ color: var(--secondary-color); }
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 *= require_divider




 */
 

 /*Aufbau: 
      Farb definitionen
      Styling von Allgemeinen Tags auch bei @media
  */

  @import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,700');

  @font-face {
    font-family: "Blowbrush";
    src: url(/assets/blowbrush.regular-359af73a446577f911e00abb42c679b5cf4366ea1f4ad11309623a9950a8b7bb.ttf) format("truetype");
  }
  
  :root , .navbar, .navbar-nav{
    --primary-color: #afafaf;
    --secondary-color: #f8f9fa;
    --text-color: #2c3e50;
    --background-color: #c7caca;
    --red-color: #b91313;
    --darkred-color: #b9131388;
    --black-color: #1f1f1f;
    --body-background-color: #3a3a3a;
    --body-background-color-2: #5a5a5a;

    /*Style für bootstrap*/
    --bs-navbar-color: var(--primary-color);
    --bs-navbar-brand-color: var(--background-color);
    --bs-navbar-hover-color: var(--red-color);
    --bs-navbar-brand-hover-color: var(--darkred-color);
    --bs-navbar-disabled-color: var(--red-color) !important;
    --bs-navbar-active-color: var(--primary-color);
    --bs-navbar-toggler-border-color: var(--darkred-color);
  }


  ::selection {
    color: var(--text-color); /* Textfarbe */
    background: var(--red-color); /* Hintergrundfarbe */
  }
  
  /* Für Firefox */
  ::-moz-selection {
    color: var(--text-color); /* Textfarbe */
    background: var(--red-color); /* Hintergrundfarbe */
  }

body {
  margin:0;
  padding:0;
  font-size: 16px; /* Basisschriftgröße für den Dokument */
}
h1 {
  font-family: 'Blowbrush', sans-serif;
  font-size: 2em;
  font-weight:600;
  text-align:center;
  color: var(--text-color);
}
h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.35em;
  font-weight: 500;
  text-align:center;
  color: var(--text-color);
}

h3 {
  font-family: 'Montserrat', sans-serif;
  text-align:center;
  font-size: 1.2em;
  font-weight:400;
  color: var(--text-color);
}

p {
  font-family: 'Montserrat', sans-serif;
  color: var(--text-color);
  font-size: 1rem; /* Standard Basisschriftgröße */
}

.spacer {
  height: 1rem;
  background-color: transparent;
}

.main, .container {
  background-color: var(--background-color);
  background-image: linear-gradient(to right, var(--background-color), var(--primary-color));
}

footer .container {
  background-color: var(--red-color);
  background-image: none;
}

/* Tablets und kleinere Geräte */
@media (max-width: 768px) {
  
  p {
    font-size: 0.9rem; /* Geringfügig kleinere Schriftgröße für Paragraphen */
  }

  .spacer {
    height: 0.75rem;
  }
}

/* Smartphones und sehr kleine Geräte */
@media (max-width: 480px) {
  h1 {
    font-size: 1.5rem;
  }
  
  h2 {
    font-size: 1.3rem;
  }
  
  h3 {
    font-size: 1.1rem;
  }
  
  p {
    font-size: 0.85rem;
  }

  .spacer {
    height: 0.5rem;
  }
}



/* Für YT-Videos in einem .yt-video div*/
.yt-video {
  width: 48vw;
  height: 27vw;
  margin: auto;
}

.yt-video iframe {
  width: 100%;
  height: 100%;
}

@media (max-width: 768px) {
  .yt-video {
    width: 64vw;
    height: 36vw;
  }
}

.custom-divider {
  width: 90%;       /* Setzt die Breite des Dividers auf 80% des umgebenden Elements */
  height: 2px;      /* Stellt die Dicke des Dividers ein */
  background-color: var(--body-background-color); /* Nutzt die Farbe aus der CSS-Variable */
  margin: 20px auto; /* Zentriert den Divider horizontal und gibt ihm oben und unten Abstand */
}