/* hier kann ein Font eingebunden werden. */
/* TTF Fonts können über https://www.fontsquirrel.com/tools/webfont-generator in Webfonts gewandelt werden */
/* Font in das angegebene Verzeichnis kopieren und den Elementen zuweisen */
@font-face {
    font-family: 'data_70regular';
    src: url('https://www.jolene.de/templates/cassiopeia/fonts/data70-webfont.woff2') format('woff2'),
         url('https://www.jolene.de/templates/cassiopeia/fonts/data70-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'adventureregular';
    src: url('https://www.jolene.de/templates/cassiopeia/fonts/adventure-ygz2-webfont.woff2') format('woff2'),
         url('https://www.jolene.de/templates/cassiopeia/fonts/adventure-ygz2-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
body {
    background: transparent;
    background-image: url('/images/_SiteTemplate/SiteHintergrund.webp'); /* Bildpfad anpassen */
    background-position: top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
/*Mit dieser Anweisung wird der Hintergrund des Artikels angepasst. In dem Bereich steht die Überschrift */
.grid-child.container-component {
    background-color: #f0f0f0; /* Ändere die Hintergrundfarbe */
    padding: 20px; /* Optional: Abstand hinzufügen */
  border-radius: 10px; /* Abgerundete Ecken */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.9); /* Optionaler Schatteneffekt */
}
/*Mit dieser Anweisung wird der Hintergrund des Artikels angepasst. In dem Bereich steht der Artikel */
.com-content-article__body {
    background-color: #f0f0f0; /* Ändere die Hintergrundfarbe */
    padding: 5px; /* Optional: Abstand hinzufügen */
    border-radius: 0px; /* Optional: Abgerundete Ecken */
}

/* Globale Schriftfarbe für alle Überschriften */
/* Die Vorlage kommt aus der template.css */
h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
  color: #5a2086;
  font-family: 'adventureregular' !important;
  letter-spacing: 2px;
}
.container-header {
  /*den Header ebenfalls einfärben mit der Body Farbe in diesem Bereich liegt das Logo*/
    background-image: none;
    background-color: transparent;
}
/* Hintergrund und Farbe aller Buttons */
.btn { 
  background-color: #f0f0f0; /* background */
  border-color: #f0f0f0; /* border color */
  color: #5a2086; /* text color */
  border-radius: 20px; /* Abgerundete Ecken */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.9); /* Optionaler Schatteneffekt */
  font-family: 'adventureregular' !important;
  letter-spacing: 2px;
}
.card-header { 
  color: #f0f0f0; /*die Farbe der Überschriften der Modulen anpassen*/
  border: 0px solid #333333; /* */
  border-radius: 10px;        /* Fügt leicht abgerundete Ecken hinzu */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.9); /* Leichte Schatten für Tiefe */
  background-color: #5a2086; /* Hintergrund für den Card Header*/
  /*font-family: 'data_70regular' !important;*/
  font-family: 'adventureregular' !important;
  
}
/* Anpassung der card-body im gesamten Template */
/*es werden folgende  Module definiert: */
/*Login Form, Neueste Beträge, Webseite Durchsuchen*/
.card-body {
    background-color: #f0f0f0; /* Ändert den Hintergrund */
    padding: 15px;             /* Fügt Innenabstand hinzu */
    border:0px solid #333333;        /* Fügt leicht abgerundete Ecken hinzu */
    border-radius: 10px;        /* Fügt leicht abgerundete Ecken hinzu */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.9); /* Leichte Schatten für Tiefe */
}
/*Hier werden folgende Module definiert:*/
/*Projekte, Definitionen, Inside Off, Off Topic, Über mich, Vpin Bau, Extra Life*/
/**/
.GlobaleDefinition {
    background-size: cover; /* cover (füllt aus) oder contain (fügt ein), je nach Wunsch */
    background-position: center;
    background-repeat: no-repeat;
    background-color: #transparent; /*das ist der Modulhintergrund, liegt hinter dem Bild, ist im Modul selbst zugewiesen*/
}