/*
Copyright (c) 2025 Yunatec Engineering. All rights reserved.
This file is part of the AIKIQI system.

Unauthorized copying of this file, via any medium, is strictly prohibited.
Proprietary and confidential.

Developed by: Yunatec Engineering
Contact: info@yunatec.com
*/

/* Allgemeine Einstellungen */
@font-face {
    font-family: 'Roboto';
    src: url('/static/fonts/roboto/roboto-v47-latin-300.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('/static/fonts/roboto/roboto-v47-latin-300.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('/static/fonts/roboto/roboto-v47-latin-regular.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}

body {
    font-family: 'Roboto', sans-serif; /* Moderne, klare Schrift */
    font-size: 16px; /* Standardgröße für gute Lesbarkeit */
    margin: 0;
    padding: 0;
    line-height: 1.6; /* Lesbarkeit erhöhen */
    background-color: white;
    color: rgba(28, 28, 28);
font-weight: 300; /* Standard (Regular) */
    /* Hintergrund optimieren */
 
   
   

    /* Rendering-Verbesserungen für scharfe Schrift */
    -webkit-font-smoothing: antialiased; /* Glättung für Webkit-Browser */
    -moz-osx-font-smoothing: grayscale; /* Glättung für macOS */
    text-rendering: optimizeLegibility; /* Bessere Schriftklarheit */
    height: 100%;
    padding-bottom:80px;
}

        /* Ausblenden des Hintergrunds auf Handys */
/* Ausblenden des Hintergrunds auf Handys */
@media (max-width: 768px) {
    body {
        background-image: none;
    }
}

* {
    box-sizing: border-box;
}
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: #f9f9f9;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

a {
    color: darkblue; /* Nicht besuchte Links */
    text-decoration: none; /* Entfernt die Unterstreichung */
    
    
}

a:visited {
     color: darkblue; /* Nicht besuchte Links */
    text-decoration: none; /* Entfernt die Unterstreichung */
    
   
}

a:hover {
     color: rgba(28, 28, 28);
    text-decoration: none; /* Entfernt die Unterstreichung */
    font-weight:400;
   
}

a:active {
    color: rgba(28, 28, 28);
    text-decoration: none; /* Entfernt die Unterstreichung */
    
   
}

.top_username, .time {
    font-size: 14px;
    color: rgba(28, 28, 28);
    margin-left: 10px;
}


.logout-button {
    background: none;
    border: none;
    color: #000;
    font-size: 20px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.logout-button:hover {
    color: #ff3b30; /* Apple-like red */
}



.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-variation-settings:
      'FILL' 0,    /* 0 = Outline, 1 = Filled */
      'wght' 260,  /* 100 = Dünn, höherer Wert = Dick */
      'GRAD' 0,    /* 0 = Kein Gradient, andere Werte erhöhen Schriftgewicht */
      'opsz' 48;   /* Optimale Größe des Icons */
  }

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}



/* Linke und rechte Boxen */
.left-box, .right-box {
   
    padding: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.left-box {
float:left;
}
.right-box {
float:right;
}

/* Zentraler Bereich */
.outer-container {
    max-width: min(92vw, 1464px); /* Etwas größer als der Container */
    margin: 0 auto;
    padding: 10px 10px 10px 10px;
    background: rgba(28, 28, 28, 0.3); /* Sanfte Transparenz */
    border-radius: 5px; /* Optional für weichere Kanten */
    margin-top: 20px;
    margin-bottom: 20px;
}
.container {
    text-align: left;
   max-width: min(90vw, 1444px);
    width: 100%;
    border: 1px solid #fffcf7;
    padding: 20px;
    background-color: #ffff; /* Weißer Hintergrund für Boxen */
    border-radius: 5px;

    z-index: 1;
   
     
}

img {
padding:5px;
margin:10px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

/* Beschreibung */
.container p {
    
    
    margin-bottom: 1.8em;
}

/* Platz für zusätzlichen Inhalt */
.content-placeholder {
    margin:0 auto;
    padding: 20px;
    
    color: #666;
    text-align: center;
}

/* Dummy-Button */
.button {
    display: inline-block;
    
    color: white;
    text-decoration: none;
   
    padding: 8px 15px;
    border-radius: 10px;
    border: 1px solid #fff;
    transition: background-color 0.3s;
}

.button:hover {
    background-color: #7856b0;
     
 color: white;
text-decoration:none;
}

.logout-button {
    background: none;
    border: none;
    color: red; /* Rote Farbe für das Icon */
    font-size: 1.5em; /* Größeres Icon */
    cursor: pointer;
    padding: 0;
    transition: color 0.3s ease, transform 0.2s ease;
 padding: 0.7em 0.8em; /* Mehr vertikaler Innenabstand */
}

.logout-button:hover {
    color: darkred; /* Dunkleres Rot bei Hover */
   
}

.logout-button i {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Formularcontainer */
.form-container {
   
    color: #333;
    padding: 20px;
  
    width: 100%;
    max-width: 500px;
    
}

/* Eingabefelder */
.form-group input, .form-group textarea, .form-group select {
    width: 100%;
    padding: 8px;
    margin: 4px 0;
    border-radius: 5px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    color: #333;
    
}

.submit-button {
    background-color: #6c4cad;
    color: white;
    padding: 8px 15px;
   
    border-radius: 10px;
    border: 1px solid #9b8ec3;
    cursor: pointer;
    width: 100%;
}

.submit-button:hover {
    background-color: #7856b0;
     font-weight: 200; /* Nicht zu fett */
 color: white;
text-decoration:none;
}






li {
 list-style: none;
}

/* Profilansicht */
.profile-container {
   display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding: 15px;
   
    margin: 0 auto;
  
    flex-wrap: wrap;   /* Falls der Container zu breit ist, damit Inhalt umbricht */
text-align:left;

}

.profile-left {
    flex: 0 0 20%; /* 35% des Containers, kein Skalieren */
    max-width: 300px;
text-align:left;
padding:10px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
   
}
.profile-left_edit {
    flex: 0 0 20%; /* 35% des Containers, kein Skalieren */
   max-height:250px;
    border-radius: 10px; /* Optional: Abgerundete Ecken */
text-align:left;
    border-radius: 5px;
    

}


.profile-right {
    flex: 1; /* Restlichen Platz einnehmen */

    padding: 10px;
text-align:left; 
margin:0 auto;

}
/* Spezifischere Regel für Avatare */
.profile-container .profile-right .friend-link .friend-item .friend-avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
}
/* Freundesliste */
.friend-link {
    text-decoration: none; /* Entfernt die Standard-Unterstreichung */
    color: inherit; /* Verhindert, dass die Farbe des Links sich ändert */
}

.friend-item {
    display: flex; /* Flexbox für Layout */
    align-items: center; /* Vertikal zentrieren */
    margin-bottom: 10px; /* Abstand zwischen den Freunden */
    padding: 5px;
    border-radius: 5px; /* Abgerundete Ecken */
    background-color: #f4f4f4; /* Hintergrundfarbe */
}

.friend-username {
    font-size: 16px; /* Schriftgröße für den Benutzernamen */
    font-weight: 600; /* Fettdruck für den Benutzernamen */
    padding:10px;
}


.profile-avatar {
    width: 250px; /* Füllt die Breite der Box aus */
    height: 250px; /* Füllt die Höhe der Box aus */
    object-fit: cover; /* Zuschneiden, um das Bild auszufüllen, ohne Verzerrung */
   border-radius: 8px; /* Abgerundete Ecken */
 box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
}
.profile-avatar_small {
    width: 120px; /* Füllt die Breite der Box aus */
    height: 120px; /* Füllt die Höhe der Box aus */
    object-fit: cover; /* Zuschneiden, um das Bild auszufüllen, ohne Verzerrung */
   border-radius: 8px; /* Abgerundete Ecken */

}

.change-avatar-form {
    margin-top: 20px;
}

.thoughts_feature {
    width: 100%; /* Füllt die Breite der Box aus */
    height: 350px; /* Füllt die Höhe der Box aus */
    object-fit: cover; /* Zuschneiden, um das Bild auszufüllen, ohne Verzerrung */
   object-position: 50% 50%; /* Horizontale + vertikale Zentrierung */
    margin-right:5px;
   border-radius: 5px; /* Abgerundete Ecken */
border:1px solid #fff;
   

}



.change-avatar-form .btn-secondary {
    display: inline-block;
    
    color: white;
    text-decoration: none;
   
    padding: 8px 15px;
    border-radius: 10px;

}

.file-upload-container {
    position: relative;
    display: inline-block;
    width: 100%;
}


 

.button-13:hover {
  background-color: #f7fafa;
}

.button-13:focus {
  border-color: #008296;
  box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0;
  outline: 0;
}


.file-upload-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

.custom-file-upload {
    display: inline-block;
    padding: 10px 15px;
    color: #fff;
font-size:0.8em;
    background-color: #50076e;
border-radius: 10px; /* Optional: Abgerundete Ecken */
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
    
    cursor: pointer;
  
    text-align: center;
    
}

.custom-file-upload:hover {
    background-color: #63038a;
}

input[type="file"] {
    display: none; /* Verbirgt das native Upload-Feld */
}

.current-avatar {
    width: 250px; /* Füllt die Breite der Box aus */
    height: 250px; /* Füllt die Höhe der Box aus */
    object-fit: cover; /* Zuschneiden, um das Bild auszufüllen, ohne Verzerrung */
   
 border-radius: 8px; /* Abgerundete Ecken */
   box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
   
}
.profile_name_top {
     background-color: #fff;
  border: 1px solid #d5d9d9;
  border-radius: 8px;
  box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0;
  box-sizing: border-box;
  color: #0f1111;
  cursor: pointer;
  display: inline-block;
  
  font-size: 13px;
  line-height: 29px;
  padding: 0 10px 0 11px;
  position: relative;
  text-align: center;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  
  vertical-align: middle;
  width: 100px;
}
.custom-avatar-upload {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Links ausgerichtet */
}

label {
   
    color: #333;
}

input[type="file"] {
    margin-top: 10px;
}
.file-info {
    font-size: 14px;
    color: #555;
    text-align: left;
    margin-top: 10px; /* Abstand unterhalb des Buttons */
}
.profile-left_top {
    flex: 1;
    max-width: 450px;
    text-align: left;
    background-color: #ffffff; /* Hellgrauer Hintergrund */
    border-radius: 5px;
    padding: 20px;
}
.profile-container_top{
    display: flex;
    flex-wrap: wrap;
    background-color: #0000;
    padding: 20px;
    border-radius: 10px;
    gap: 20px;
}
.profile-right_top {
    flex: 2;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
text-align:right;

}

.chapter-title {
    display: block;
    font-size: 0.85em;
    color: #162669; /* Dezente Farbe */
    text-align: center;
    margin-top: 5px;
}


.profile-right p {
    
    color: #222;
}


.profile-form {
    display: flex;
    width: 100%;
    gap: 20px;
}

.profile-left,
.profile-right {
    flex: 1;
}

.fixed-footer {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
    box-sizing: border-box; 
            height: 50px;
            background: rgba(255, 255, 255);
            box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            z-index: 1000;
        }

 
        .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: left; /* Zentriert die Links */
    gap: 15px;
    flex-grow: 1; /* Nimmt verfügbaren Platz ein */
    overflow-x: auto; /* Falls zu viele Links → horizontal scrollbar */
}
        .nav-links a {
            text-decoration: none;
            color: #333;
            font-size: 14px;
            white-space: nowrap;
        }
        .nav-links a:hover {
            text-decoration: none; /* Entfernt die Unterstreichung */
        }
.profile-right {
    
   
    padding: 15px;
    border-radius: 8px;
}


/* Allgemeine Typografie für Überschriften */
h1, h2, h3, h4, h5, h6 {
    margin: 0.5em 0; /* Einheitlicher Abstand nach oben und unten */
    line-height: 1.4; /* Angenehme Lesbarkeit */
    font-weight: 300; /* Leicht fett, aber nicht zu dominant */
   
}

/* Individuelle Größenanpassung */
h1 {
    position: relative; /* Ermöglicht Nutzung von ::after */
  display: inline-block; /* Option für Breite passend zum Text */
  font-size: 1.2em; /* Schriftgröße der H1 */
  font-weight:400;
  margin-bottom: 1rem; /* Platz nach der Überschrift */
 color: rgba(28, 28, 28);
  text-align: center;
}
h1::after {
  content: ""; /* Leeres Pseudo-Element */
  display: block; /* Macht es sichtbar */
  width: 100%; /* Deckt die Breite des h3-Elements */
  height: 1px; /* Höhe der Linie */
  margin-top: 5px; /* Abstand zum Text */
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.65),
    rgba(0, 0, 0, 0)
  );
}

/* Titel */
.container h1 {
    text-align: left;
   } 
 
.reaction-form {

    display: flex !important;
    gap: 8px; /* Abstand zwischen den Buttons */

    align-items: center;
}

    
}
h2 {
    position: relative; /* Ermöglicht Nutzung von ::after */
  display: inline-block; /* Option für Breite passend zum Text */
  font-size: 1.2em; /* Schriftgröße der H1 */
  font-weight:400;
  margin-bottom: 1rem; /* Platz nach der Überschrift */
   color: rgba(28, 28, 28);
  text-align: center;
}
h2::after {
  content: ""; /* Leeres Pseudo-Element */
  display: block; /* Macht es sichtbar */
  width: 100%; /* Deckt die Breite des h3-Elements */
  height: 1px; /* Höhe der Linie */
  margin-top: 5px; /* Abstand zum Text */
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.65),
    rgba(0, 0, 0, 0)
  );
}

h3 {
  position: relative; /* Ermöglicht Nutzung von ::after */
  display: inline-block; /* Option für Breite passend zum Text */
  font-size: 1.2em; /* Schriftgröße der H3 */
  margin-bottom: 1rem; /* Platz nach der Überschrift */
   color: rgba(28, 28, 28);
  text-align: center;
}

h3::after {
  content: ""; /* Leeres Pseudo-Element */
  display: block; /* Macht es sichtbar */
  width: 100%; /* Deckt die Breite des h3-Elements */
  height: 1px; /* Höhe der Linie */
  margin-top: 5px; /* Abstand zum Text */
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.65),
    rgba(0, 0, 0, 0)
  );
}
.h3-divider {
  position: relative; /* Ermöglicht Nutzung von ::after */
  display: inline-block; /* Option für Breite passend zum Text */
 
  margin-bottom: 1rem; /* Platz nach der Überschrift */
 color: rgba(28, 28, 28);
  text-align: center;
}

.h3-divider::after {
  content: ""; /* Leeres Pseudo-Element */
  display: block; /* Macht es sichtbar */
  width: 100%; /* Deckt die Breite des h3-Elements */
  height: 1px; /* Höhe der Linie */
  margin-top: 5px; /* Abstand zum Text */
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.65),
    rgba(0, 0, 0, 0)
  );
}
.profile-titel {
  position: relative; /* Ermöglicht die Nutzung von absolut positionierten Pseudoelementen */
  display: inline-block; /* Macht die Überschrift so breit wie der Text */
  font-size: 0.8em; /* Schriftgröße der Überschrift */
  background: #111; /* Hintergrundfarbe */
  padding: 0.4em 0.8em; /* Platz um den Text */
  border-radius: 8px; /* Abgerundete Ecken */
  z-index: 0;
}



h4 {
    position: relative; /* Ermöglicht Nutzung von ::after */
  display: inline-block; /* Option für Breite passend zum Text */
  font-size: 1.0em; /* Schriftgröße der H1 */
  font-weight:300;
  margin-bottom: 1rem; /* Platz nach der Überschrift */
   color: rgba(28, 28, 28);
  text-align: center;
}
h4::after {
  content: ""; /* Leeres Pseudo-Element */
  display: block; /* Macht es sichtbar */
  width: 100%; /* Deckt die Breite des h3-Elements */
  height: 1px; /* Höhe der Linie */
  margin-top: 5px; /* Abstand zum Text */
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.65),
    rgba(0, 0, 0, 0)
  );
}

h5 {
    font-size: 1.1em;
    font-weight: 500; /* Weniger dominant */
    color:  rgba(40, 20, 80, 0.95); /* Etwas dezenter */
}

h6 {
    font-size: 1em; /* Kleinste Überschrift, fast wie Fließtext */
    font-weight: 500;
    color: #333; /* Für Konsistenz */
}

/* Anpassung von Abständen */
h1 + p, h2 + p, h3 + p, h4 + p {
   
}

/* Allgemeiner Textstil */
p, ul, ol {
    font-size: 0.95em;
     /* Kontrastreich genug für Lesbarkeit */
    line-height: 1.6;
    
}
p {
    margin-bottom: 0 !important;
}
p + p {
    margin-top: 0 !important;
}


/* Betonung (B, Strong) */
strong, b {
    color: black;
    font-weight: 500;
}


.username {
    color: #072463; /* Passend zu deinem Farbschema */
   font-weight: 400;
}
.friend_username {
    color: green;
    font-weight: 500;
}

.admin_username {
    color: red;
    font-weight: 500;
    
}
hr {
  border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

.blog-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
   
}

.blog-list {
    list-style: none;
    padding: 0;
}

.blog-item {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

.blog-item h2 {
    margin: 0 0 10px 0;
}

.blog-item p {
    margin: 0 0 10px 0;
    color: #000;
}

.blog-item a {
    text-decoration: none;
    color: #007bff;
}

.blog-item a:hover {
    text-decoration: underline;
}
.blog-post-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
color:black;
    border-radius: 8px;
   
}

.blog-post-container h1 {
    margin-bottom: 10px;
}

.blog-post-container .blog-content {
    margin: 20px 0;
    line-height: 1.6;
}

.blog-post-container .back-to-blog {
    display: inline-block;
    margin-top: 20px;
    text-decoration: none;
    color: #007bff;
}

.blog-post-container .back-to-blog:hover {
    text-decoration: underline;
}
.page-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 8px;
   
}

.page-container h1 {
    margin-bottom: 10px;
}

.page-container .page-content {
    margin: 20px 0;
    line-height: 1.6;
    color: #000;
}

.messages {
    margin: 20px 0;
}

.alert {
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 5px;
}

.alert-success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

.alert-danger {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}


.book-detail img {
    max-width: 100%;
    height: auto;
    margin-bottom: 1rem;
}



.infobox {
    display: flex; /* Ermöglicht die Nebeneinander-Anordnung der Boxen */
    justify-content: space-between; /* Gleichmäßiger Abstand zwischen den Boxen */
    align-items: flex-start; /* Inhalte an der Oberkante ausrichten */
    
    padding: 20px; /* Abstand innerhalb der Infobox */
    margin-bottom: 20px; /* Abstand nach unten */
    background-color: #FFF; /* Optional: Hellgrauer Hintergrund */
    border-radius: 4px; /* Abgerundete Ecken */
   box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

.infobox_left {
    flex: 1; /* Nimmt gleichen Platz wie die rechte Box ein */
    margin-right: 20px; /* Abstand zwischen den Boxen */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Inhalte gleichmäßig verteilen */
   
}

.infobox_left p {
    margin-bottom: 10px; /* Abstand zwischen den Textabsätzen */
    font-size: 1rem; /* Schriftgröße */
    color: #000; /* Optional: Dezente Textfarbe */
    line-height: 1.6; /* Zeilenhöhe */
}

.infobox_right {
    flex: 1;
    display: flex;
    align-items: flex-end; /* ✔ KORREKT */
    justify-content: flex-end; /* ✔ KORREKT */
}

.infobox_right img {
    max-width: 100%; /* Bild skalieren, um in die Box zu passen */
    max-height: 400px; /* Optionale Maximalhöhe des Bilds */
    object-fit: cover; /* Bild proportional skalieren */
    
}

.infobox p {
    margin: 5px 0;
}
/* Responsive Anpassung */
@media (max-width: 768px) {
    .infobox {
        flex-direction: column; /* Boxen untereinander anordnen */
        align-items: center; /* Zentrierung bei kleinen Bildschirmen */
    }

    .infobox_right {
        margin-bottom: 20px; /* Abstand unter dem Bild */
    }

    .infobox_left {
        text-align: left; /* Optional: Zentrierter Text bei kleinen Bildschirmen */
    }
}

a {
      color: darkblue; /* Nicht besuchte Links */
    text-decoration: none; /* Entfernt die Unterstreichung */
    
    
}

a:visited {
    color: darkblue; /* Nicht besuchte Links */
    text-decoration: none; /* Entfernt die Unterstreichung */
    
   
}

a:hover {
     color: black; /* Nicht besuchte Links */
    text-decoration: none; /* Entfernt die Unterstreichung */
    font-weight:400;
   
}

a:active {
     color: black; /* Nicht besuchte Links */
    text-decoration: none; /* Entfernt die Unterstreichung */
    
   
}


/* Schatten von Formularen oder Containern entfernen */


/* Falls die Klasse auf andere Container zutrifft, kannst du es für Formulare anpassen */
form.container {
    box-shadow: none !important;
}

.right_element {
text-align:right;
color: black;
}

.ck-editor__editable {
  font-size: 16px;  /* Für Text im Editor */
  line-height: 1.5;
  color:black;
}

/* Standard Styles im Editor */
.ck-content h1 {
  font-family: 'Arial', sans-serif;
  color: blue;
}
.source-view-body {
    background-color: #f0f0f0;
    color: black;
}

.django-ckeditor-widget {
    color: black;
}
/* Styling für den Quellcode-Modus */
.cke_source {
    background-color: #f0f0f0; /* Angenehmer Kontrast */
    color: black; /* Textfarbe */
    font-family: monospace; /* Für Quellcode */
    font-size: 14px; /* Lesbarkeit verbessern */
}
:target {
    scroll-margin-top: 100px; /* Verhindert Überdeckung durch eine Navbar */
    animation: highlight 1.5s ease-in-out;
}

@keyframes highlight {
    0% { background-color: yellow; }
    100% { background-color: transparent; }
}


.book_img {
     object-fit: scale-down !important;
     width:300px !important;
     height:350px !important;
     border:0px solid silver;
}


/* Responsive Anpassung */
@media (max-width: 768px) {
    .admin_username,.username {
   
}
}


      

.reaction-btn {
    background: none;
    border: 2px solid #ccc;
    color: black;
    font-size: 1.0rem; /* Kleinere Schriftgröße */
    padding: 5px 10px; /* Weniger Padding */
    margin: 0; /* Kein Abstand zwischen den Buttons */
    cursor: pointer;
    position: relative;
    border-radius: 5px;
border:none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reaction-btn:hover {
    background-color: #f0f0f0;
}

.reaction-btn .reaction-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: red;
    color: white;
    border-radius: 50%;
    font-size: 0.7rem; /* Kleinere Zahl */
    padding: 3px;
    min-width: 15px;
    text-align: center;
    height: 15px;
    line-height: 15px;
}
/* CSS für die Aufklappfunktion */
.accordion .card-header {
  background-color: #fff;
  font-size: 1.0rem;
  cursor: pointer;
 
}

.accordion .card-body {
  padding: 10px;
  background-color: #fefefe;
}

.accordion .card-header button {
  text-decoration: none;
  color: #000;
  font-weight: 400;
}

.accordion .card-header button:hover {
  color: #0056b3;
}