/* ========================
   Allgemeine Variablen
   ======================== */
:root {
    /* Primäre Farben und Hintergrundfarben */
    --primary-color: #a8b9a3; /* Hauptfarbe, Blau */
    --secondary-color: #e74c3c; /* Sekundäre Farbe, Rot */
    --background-color: #f9f9f9; /* Grau für Fragen und Auswertungsfelder */
    --text-color: #555; /* Standard Textfarbe */
    --button-hover-color: #7f9773; /* Hover-Farbe für Buttons */
    --page-bg-color: whitw; /* Hintergrundfarbe der Seite, weiß */
    --button-bg-color: #a8b9a3; /* Farbe der Buttons */
}

			body {
			margin: 0;
			padding: 0;
			overflow-x: hidden; /* Verhindert horizontales Scrollen */
		}

/* ========================
   Gesamtes Seitenlayout und Container-Setup
   ======================== */
html, body {
    margin: 0;
    padding: 0;
    background-color: var(--page-bg-color);
}

/* ========================
   Container der gesamten Seite
   ======================== */
.main-container {
    width: 100%;
    max-width: 1100px; /* exakt wie dein Theme */
    margin: 20px auto;
    padding: 15px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    box-sizing: border-box;
}



/* ========================
   Text oben auf der Seite
   ======================== */
.description {
    text-align: center; /* Zentriert den Text horizontal */
    padding: 10px; /* Fügt etwas Abstand um den Text herum hinzu */
    /* margin-top: 20px; Fügt oben etwas Abstand hinzu */
}


/* ========================
   Hinweis (Disclaimer) - zu Beginn unsichtbar
   ======================== */
.footer-text {
    background-color: #f0f0f0; /* Heller Hintergrund für den Hinweis */
    padding: 15px; /* Innenabstand für den Hinweis */
    margin-top: 20px; /* Abstand nach oben */
    border-radius: 10px; /* Abgerundete Ecken für den Hinweis */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Leichter Schatten für Tiefe */
    font-size: 12px; /* Kleinere Schriftgröße */
    text-align: center; /* Zentrierter Text */
    color: #333; /* Dunkle Textfarbe */
    display: none; /* Anfangs unsichtbar */
}

/* ========================
   Styling der Antwort-Optionen (z.B. Radio-Buttons) ohne Aufzählungspunkte
   ======================== */
ul {
    list-style: none; /* Entfernt die Standard-Aufzählungspunkte */
    padding-left: 0; /* Entfernt den Standard-Abstand der Liste nach links */
}

/* ========================
   Styling der Antwort-Optionen (Radio-Buttons und Checkboxen)
   ======================== */
.answer-option {
    display: flex; /* Flexbox für die Antwortoption */
    align-items: center; /* Vertikale Ausrichtung der Elemente */
    gap: 5px; /* Abstand zwischen dem Auswahl-Element (z.B. Radio-Button) und dem Text */
}

.answer-option label {
    display: inline-block; /* Label als Blockelement behandeln */
    text-align: left; /* Text links ausrichten */
}

/* ========================
   Styling für das Eingabefeld und den Druck-Button im Name-Print-Container
   ======================== */
.input-container {
    display: flex;
    justify-content: space-between; /* Platzierung der Text-Box und des Buttons nebeneinander */
    gap: 10px;
    align-items: center;
}


/* ========================
   Erste Frage
   ======================== */
.question label {
    display: block; /* Stellt sicher, dass jedes Label einen Block darstellt */
    margin-bottom: 10px; /* Fügt einen kleinen Abstand zwischen den Labels hinzu */
	margin-left: 30px; /* Einrückung der Labels nach rechts */
}

/* ========================
   Für Screens kleiner als 600px: Anpassungen für mobile Geräte
   ======================== */
@media (max-width: 600px) {
    .answer-option {
        flex-direction: column; /* Antwortoptionen untereinander anzeigen auf kleinen Geräten */
        align-items: flex-start; /* Text links ausrichten */
    }

    .answer-option label {
        flex-basis: 100%; /* Jede Antwortoption nimmt die volle Breite ein */
    }
}

/* ========================
   Container für die Auswertungsoptionen
   ======================== */
.evaluation-container {
    margin: 20px auto;
    width: 95%; /* Container nimmt 100% der Breite ein */
    padding: 15px;
    text-align: left; /* Zentriert den Text */
    border-radius: 5px; /* Abgerundete Ecken */
    background-color: var(--background-color); /* Heller Hintergrund */
    border: 1px solid red; /*1px solid #ccc; /* Dunkler Rand, z.B. grauer Rand */
}

.evaluation-container h4 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.evaluation-options {
    display: flex; /* Flexbox für die vertikale Anordnung */
    flex-direction: column; /* Richtet die Kinder (Optionen) vertikal aus */
    gap: 5px; /* Abstand zwischen den Optionen */
}

/* Optional: Um das Styling der Labels beizubehalten, ohne dass sie zentriert werden */
.evaluation-options label {
    text-align: left; /* Stellt sicher, dass die Labels nicht zentriert sind */
}

/* ========================
   Gestaltung der Auswahl der Auswertungsoptionen (Radio-Buttons)
   ======================== */
.evaluation-options {
    margin: 10px 0;
}

.evaluation-options label {
    display: block; /* Jede Option in einer eigenen Zeile */
    margin: 5px 0;
    font-size: 1rem;
    margin-bottom: 10px; /* Etwas Abstand zwischen den Optionen */
    display: block; /* Stellt sicher, dass jedes Label unter dem anderen steht */
    margin-right: 0; /* Kein zusätzlicher Abstand nach rechts */
}

.evaluation-options input[type="radio"] {
    margin-right: 10px;
}


/* Checkbox-Container Styling Daten speicher Mailzugrif */
.access-option label {
    font-size: 16px; /* Schriftgröße */
    display: block; /* Blockdarstellung */
    margin-bottom: 10px; /* Abstand nach unten */
	margin-left: 30px; /* Einrückung der Labels nach rechts */
}

.access-option input[type="checkbox"] {
    margin-right: 15px; /* Abstand zwischen Checkbox und Text */
}

/* Versteckter E-Mail-Container */
#email-container {
    display: none; /* Unsichtbar, bis aktiv */
    margin-top: 10px;
    margin-left: 30px; /* Einrückung der Labels nach rechts */
}

/* Styling für E-Mail-Eingabe und Checkbox */
#email-container label {
    font-size: 16px; /* Schriftgröße */
}

#email-input {
    padding: 5px; /* Innenabstand */
    margin-top: 5px; /* Abstand nach oben */
    font-size: 16px; /* Schriftgröße */
    border: 1px solid #ccc; /* Rahmen */
    border-radius: 4px; /* Abgerundete Ecken */
	width: 100%; /* Macht das Eingabefeld so breit wie sein Container */
    max-width: 500px; /* Optionale maximale Breite */
}

#privacy-checkbox {
    margin-right: 15px; /* Abstand zwischen Checkbox und Text */
}




/* ========================
   Button zum Auswerten
   ======================== */
#calculate-button {
    background-color: var(--primary-color); /* Blaue Hintergrundfarbe */
    color: white;
    padding: 10px 20px;
    font-size: 1rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%; /* Nimmt 100% der Breite des Containers ein */
    max-width: 100%; /* Maximale Breite von 300px */
}

#calculate-button:hover {
    background-color: var(--button-hover-color); /* Dunkleres Grün beim Hover */
}

/* ========================
   Container für den Nameingabebereich und den Druck-Button
   ======================== */
.print-container {
    margin-top: 20px;
    padding: 20px;
    background-color: #f9f9f9; /* Sanfter Hintergrund für den Container */
    border-radius: 5px; /* Abgerundete Ecken */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Schatten für 3D-Effekt */
    max-width: 100%; /* Maximale Breite */
    width: 100%; /* Breite auf 100% der verfügbaren Breite */
    box-sizing: border-box; /* Verhindert, dass Padding den Container überschreitet */
    margin: 0 auto; /* Zentriert den Container innerhalb des übergeordneten Containers */
}

.name-print-container {
    display: flex; /* Flexbox für die horizontale Ausrichtung */
    justify-content: center; /* Zentriert den Inhalt horizontal */
    align-items: center; /* Zentriert den Inhalt vertikal */
    width: 100%; /* Der Container nimmt 50% der Breite des Gesamtcontainers ein */
    margin: 20px auto; /* Zentriert den Container im Gesamtcontainer */
}

/* ========================
   Styling des Eingabefelds und des Druck-Buttons im Name-Print-Container
   ======================== */
.name-print-container input[type="text"],
.name-print-container button {
    width: 100%; /* Beide Elemente (Textfeld und Button) nehmen 100% der Containerbreite ein */
    padding: 12px; /* Innenabstand */
    font-size: 1rem; /* Schriftgröße */
    margin-top: 10px; /* Abstand nach oben */
    border: 1px solid #ccc; /* Graue Umrandung */
    border-radius: 5px; /* Abgerundete Ecken */
    background-color: var(--button-bg-color); /* Button-Hintergrundfarbe */
    color: white; /* Weiße Textfarbe */
    cursor: pointer; /* Zeiger-Cursor */
    transition: background-color 0.3s ease; /* Sanfter Übergang beim Hover */
}

/* ========================
   Hover-Effekt für das Eingabefeld und den Button
   ======================== */
.name-print-container input[type="text"]:focus,
.name-print-container button:hover {
    background-color: #7f9773; /* Dunklerer Grünton bei Hover oder Fokus */
}

/* ========================
   Container für die Frage mit einem leichten Schatten
   ======================== */
/* Standardfrage-Design */
.question {
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    background-color: var(--background-color);
    /* Reihenfolge: oben links, oben rechts, unten rechts, unten links */
    border-radius: 5px  5px  5px 5px;
    box-sizing: border-box;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Schwarzer Border für Fragen 1–30 * muss auch bei   displayQuestions: function  angepasst werden */
.question.q1-30 {
    border: 2px solid green;
}

/* Blauer Border für Fragen 31–57 */
.question.q31-57 {
    border: 2px solid blue;
}

/* Roter Border für Fragen 58 und höher */
.question.q58-plus {
    border: 2px solid black;
}

/* Versteckt Fragen mit den data-Attributen "66" bis "68" */
/*#question-container .question[data-question-id="66"],
#question-container .question[data-question-id="67"],
#question-container .question[data-question-id="68"] {
    display: none !important;
}*/



/* ========================
   Allgemeines Button-Styling
   ======================== */
button {
    display: block; /* Block-Level-Button */
    width: auto; /* Button nimmt die Breite des Inhalts ein */
    padding: 12px; /* Innenabstand */
    font-size: 1rem; /* Schriftgröße */
    margin: 10px 0; /* Abstand nach oben und unten */
    border: 1px solid #ccc; /* Graue Umrandung */
    border-radius: 5px; /* Abgerundete Ecken */
    background-color: var(--button-bg-color); /* Button-Hintergrundfarbe */
    color: white; /* Weiße Textfarbe */
    cursor: pointer; /* Zeiger-Cursor */
    transition: background-color 0.3s ease; /* Sanfter Übergang bei Hover */
}

/* ========================
   Hover-Effekt für den Button
   ======================== */
button:hover {
    background-color: #7f9773; /* Dunklerer Grünton beim Hover */
}

/* ========================
   Styling für das Namens-Eingabefeld
   ======================== */
input[type="text"] {
    width: 100%; /* Eingabefeld nimmt die gesamte Breite des Containers ein */
    padding: 12px; /* Innenabstand */
    font-size: 1rem; /* Schriftgröße */
    border: 1px solid #ccc; /* Graue Umrandung */
    border-radius: 5px; /* Abgerundete Ecken */
    background-color: #f9f9f9; /* Hellgrauer Hintergrund */
    transition: border-color 0.3s ease; /* Übergang für den Rand */
}

/* ========================
   Fokus auf dem Namens-Eingabefeld
   ======================== */
input[type="text"]:focus {
    border-color: var(--primary-color); /* Blaue Umrandung bei Fokus */
    outline: none; /* Entfernt den Standard-Fokus-Rahmen */
}

/* ========================
   Hover-Effekt für das Namens-Eingabefeld
   ======================== */
input[type="text"]:hover {
    background-color: #f1f1f1; /* Hellere Hintergrundfarbe beim Hover */
}

/* ========================
   Container für den Disclaimer
   ======================== */
.disclaimer-box {
    width: 80%; /* Breite des Containers */
    padding: 10px; /* Innenabstand */
    background-color: var(--background-color); /* Hintergrundfarbe */
    border: 1px solid #ccc; /* Graue Umrandung */
    border-radius: 8px; /* Abgerundete Ecken */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
    margin-top: 20px; /* Abstand nach oben */
    text-align: center; /* Zentrierter Text */
}

/* ========================
   Styling für die Antwortoptionen (Radio-Buttons und Checkboxen)
   ======================== */
.answer-option {
    display: flex; /* Flexbox für die Antwortoption */
    align-items: center; /* Vertikale Ausrichtung der Elemente */
    gap: 10px; /* Abstand zwischen dem Auswahl-Element (z.B. Radio-Button) und dem Text */
}


/* Container für die SympNEM-Balken */
/* Container für die Balken */
#symp-container {
  width: 98%;
  /*max-width: 1200px;*/
  margin: 20px auto;
  padding: 10px;
  background-color: #f0f0f0;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Überschrift über dem Diagramm */
#symp-container h2 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 1.5em;
  font-weight: bold;
  color: #333;
}

/* Die Balken selbst */
.symp-bar {
  height: 30px; /* Höhe der Balken */
  margin: 10px 0; /* Abstand zwischen den Balken */
  background-color: #ff5733; /* Standardfarbe für hohe Werte (rot) */
  color: black; /* Schriftfarbe schwarz */
  text-align: left; /* Text linksbündig */
  padding-left: 10px; /* Padding für den Text */
  line-height: 30px; /* Vertikale Zentrierung des Textes */
  font-weight: bold;
  border-radius: 5px; /* Abgerundete Ecken */
  transition: width 0.3s ease; /* Sanfte Übergangsanimation */
  white-space: nowrap; /* Verhindert Zeilenumbruch im Text */
  overflow: visible; /* Verhindert das Abschneiden des Textes */
  position: relative; /* Ermöglicht das Verschieben des Textes */
}

/* Balken mit sehr kleinen Werten (< 30%) – grün */
.symp-bar[data-value="low"],
.symp-bar[data-value="0"] {
  background-color: #4caf50;
}

/* Balken mit mittleren Werten (gelb) */
.symp-bar[data-value="medium"] {
  background-color: #ffeb3b;
}

/* Balken mit hohen Werten (rot) */
.symp-bar[data-value="high"] {
  background-color: #f44336;
}

/* Text, der außerhalb des Balkens angezeigt wird, falls der Balken zu schmal ist */
.symp-bar .bar-text {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  padding-left: 10px; /* Platz für Text im Balken */
  line-height: 30px; /* Zentrierter Text */
  font-weight: bold;
  color: black;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* Wenn der Text zu lang ist */
}


/* Container für die Top 5 NEM */
#ranking-container {
  width: 98%;
  /*max-width: 1200px;*/
  margin: 20px auto;
  padding: 10px;
  background-color: #f0f0f0;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}



/* ========================
   Für Screens kleiner als 600px: Anpassungen für mobile Geräte
   ======================== */
@media (max-width: 600px) {
    .name-print-container {
        width: 90%; /* Container nimmt 90% der Breite des Bildschirms ein */
    }

    .question {
        font-size: 0.9rem; /* Kleinere Schriftgröße */
    }

    .answer-options {
        flex-direction: column; /* Antwortoptionen untereinander anzeigen */
    }
}

/* ========================
   Styling der Antwort-Optionen mit Einrückung
   ======================== */
.answer-options li {
    display: flex;                /* Flexbox für die Ausrichtung der Option und des Textes */
    align-items: center;          /* Vertikale Ausrichtung der Box und des Textes */
    margin-bottom: 1px;          /* Abstand zwischen den einzelnen Antwortmöglichkeiten */
    padding-left: 10px;           /* Abstand der Box zum Text */
}

.answer-options li input {
    margin-right: 15px;           /* Abstand zwischen der Option (Box) und dem Text */
}

.answer-options li label {
    display: flex;                /* Flexbox für die Positionierung der Box und des Texts */
    align-items: center;          /* Vertikale Ausrichtung */
    padding-left: 10px;           /* Optionaler zusätzlicher Abstand für den Radio-Button */
}

.answer-options li label span {
    text-indent: 5px;             /* Zusätzliche Einrückung des Texts */
}


/* Container für Informationen */
#info-container {
    position: relative; /* Position des Containers relativ setzen */
    background-color: yellow; /* Hintergrundfarbe des Containers */
    padding: 10px; /* Standard-Padding */
    margin-bottom: 15px; /* Abstand nach unten, damit der Link genügend Platz hat */
    border: 2px solid red; /* Optional: Rand für den Container */
}

/* Stellen Sie sicher, dass der Link sichtbar ist */
/* Link für "Weniger Anzeigen" */
.info-text {
    background-color: #f9f9f9;
    padding: 15px;
    margin-top: 10px;
    border-radius: 5px;
    font-size: 14px;
}

.info-link {
    color: #007bff;
    text-decoration: none;
    font-size: 14px;
}

.info-link:hover {
    text-decoration: underline;
}


/* Link für "Weitere Informationen" */
.info-button {
    color: #a8b9a3;               /* Linkfarbe (grün) */
    text-decoration: none;        /* Keine Unterstreichung */
    font-size: 16px;               /* Schriftgröße */
    font-weight: normal;            /* Fett */ bold
    font-style: normal;           /* Kursiv */ italic
    transition: color 0.3s ease;  /* Sanfter Übergang für Farbänderung */
}

/* Hover-Effekt für den Link */
.info-button:hover {
    color: #e74c3c;               /* Ändert die Farbe zu Rot beim Hover */
    text-decoration: underline;   /* Unterstreicht den Link beim Hover */
}

/* Für den "Informationen schließen"-Link */
.info-link {
    color: #28a745;               /* Grüne Farbe für den Link */
    text-decoration: none;        /* Keine Unterstreichung */
    font-size: 14px;               /* Schriftgröße */
    font-weight: normal;          /* Normale Schriftstärke */
    font-style: italic;           /* Kursiv */
    transition: color 0.3s ease;  /* Sanfter Übergang für Farbänderung */
}

/* Hover-Effekt für den "Informationen schließen"-Link */
.info-link:hover {
    color: #e74c3c;               /* Rot beim Hover */
    text-decoration: underline;   /* Unterstreicht den Link beim Hover */
}

Element */
    margin-top: 10px; /* Setze einen Abstand von oben zum Container */
    background-color: yellow; /* Hintergrundfarbe des Links */
    padding: 10px;
    border: 2px solid red; /* Optional: Rand für den Link */
    z-index: 10; /* Damit der Link über dem Inhalt angezeigt wird */
}

/* ========================
   Allgemeines Layout
   ======================== */
#results-container {
    width: 100%;
    padding: 20px;
}

.progress-bar {
    background-color: #ddd; /* Grau für den grauen Balken */
    height: 30px;
    border-radius: 10px;
    position: relative; /* Wichtig: für die Positionierung des Textes */
    width: 100%; /* Maximale Breite */
    z-index: 1; /* Stellt sicher, dass der graue Balken als Hintergrund bleibt */
}

.progress {
    height: 100%;
    border-radius: 10px;
    position: absolute; /* Der farbige Balken wird hier positioniert */
    left: 0; /* Der Balken startet immer ganz links */
    z-index: 0; /* Der farbige Balken bleibt unter dem Text */
}

.category-name {
    position: absolute;
    order: -1; /* Positioniere die Kategoriebezeichnung immer oberhalb des Balkens */
    margin-bottom: 5px; /* Abstand nach unten */
    left: 50px; /* Text startet nach der Zahl */
    top: 50%;
    transform: translateY(-50%); /* Vertikal zentrieren */
    color: white; /* Dunkle Textfarbe */
    font-size: 16px;
    font-weight: bold;
    white-space: nowrap;
    z-index: 2; /* Text bleibt über dem Balken */

}

.percentage {
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* Vertikale Zentrierung */
    color: white; /* Zahl immer weiß */
    font-weight: bold;
    white-space: nowrap;
    left: 10px; /* Zahl bleibt immer links im grauen Balken */
    z-index: 2; /* Zahl bleibt auch über dem Balken */
}

/* ========================
   Media Queries für kleine Bildschirme
   ======================== */
@media (max-width: 834px) {
    .category-name {
        left: 50px; /* Text bleibt immer nach der Zahl */
    }

    .percentage {
        left: 10px; /* Zahl bleibt immer links im grauen Balken */
    }
	.main-container {
    width: 97%; /* Der Container nimmt die volle Breite des Bildschirms ein */

}


/* ========================
   Druckansicht (Optimierung für Handys)
   ======================== */
@media print {
    /* Verhindern, dass der Inhalt skaliert */
    @page {
        size: A4 portrait; /* Du kannst auch A4 im Querformat verwenden, falls nötig */
        margin: 0;  /* Kein Rand */
    }

    /* Container für den grauen Balken */
    .progress-bar {
        position: relative;
		overflow: visible ;
        width: 100% !important;  /* Sicherstellen, dass der Balken die volle Breite nutzt */
        background-color: #ddd;
        height: 30px;
        border-radius: 10px;
        margin: 0; /* Verhindern, dass der Balken zu klein wird */
    }

    /* Farblicher Balken */
    .progress {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        border-radius: 10px;
        z-index: 1;
        /*width: 100% !important;  /* Balken bleibt immer die volle Breite */
    }

    /* Sicherstellen, dass keine Seitenränder im Druckbereich entstehen */
    body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }



    /* Der Balkencontainer nimmt die volle Breite ein */
    .bar-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Verhindern, dass der Text und der Balken nicht überlappt */
    .category-name {
        left: 10px;
        top: 50%;
        transform: translateY(-50%);  /* Vertikal zentrieren */
        white-space: nowrap;
    }

    .percentage {
        left: 30px;
        top: 50%;
        transform: translateY(-50%);
        color: white;
        font-weight: bold;
        white-space: nowrap;
    }

		/* Verhindern, dass der Balken den Text und die Zahl überdeckt */
	  .progress-bar .category-name,
	  .progress-bar .percentage {
		position: absolute;         /* Positionieren relativ zur progress-bar */
		top: 50%;                   
		transform: translateY(-50%);
		white-space: nowrap;        /* Keine Zeilenumbrüche */
		word-break: keep-all;       /* Verhindert Umbruch mitten im Wort */
		overflow-wrap: normal;
		display: inline-block;
		width: max-content;         /* Natürliche Breite annehmen */
		z-index: 2;                 /* Damit sie oben liegen */
	  }

    /* Optimierungen für den gesamten Container */
    .container {
        width: 100% !important;
        margin: 0;
        padding: 0;
    }
	
	    /* Sicherstellen, dass der Balken und der Text korrekt positioniert sind */
	.category-name,
	.percentage {
	  white-space: nowrap;      /* Verhindert den Zeilenumbruch */
	  word-break: keep-all;      /* Erzwingt, dass Wörter nicht innerhalb des Wortes getrennt werden */
	  overflow-wrap: normal;     /* Verhindert automatischen Umbruch */
	  display: inline-block;     
	  width: auto;               /* Lässt den Inhalt seine natürliche Breite einnehmen */
	  z-index: 2;                /* Sorgt dafür, dass der Text über dem Balken liegt */
	}
	
	  .category-name {
    left: 10px;  /* Abstand vom linken Rand */
    /* Optional: Falls nötig, kann hier auch ein right-Wert definiert werden, um den maximalen Platz zu definieren */
  }

  .percentage {
    left: calc(10px + 100% - 100px); /* Beispiel: Verschiebe Prozentanzeige an eine passende Position.
                                         Passe diesen Wert so an, dass der Text nicht umbrechen muss. */
  }
	

    /* Tipp-Container muss auch immer sichtbar sein */
    #tips-container {
        display: block !important;
        visibility: visible !important;
    }

    .tip {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
}

    /* Druckkopf-Layout anpassen */
    .print-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    .print-header .name {
        font-size: 18px;
        font-weight: bold;
        margin-right: 20px;
    }

    .print-header .date {
        font-size: 16px;
        font-style: italic;
        color: #555;
    }
}