:root {
    --color-primary: #144A7D;
    --color-secondary: #54595F;
    --color-text: #7A7A7A;
    --color-accent: #B5975B;
    --font-primary: "Spline Sans Mono", Sans-serif;
    --font-text: "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* Typography */
h1 {
    color: var(--color-primary);
    font-family: var(--font-primary);
    font-size: 2.3rem;
    font-weight: 600;
}

h2 {
    color: var(--color-primary);
    font-family: var(--font-primary);
    font-size: 1.8rem;
    font-weight: 600;
}

h3 {
    color: var(--color-primary);
    font-family: var(--font-primary);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3em;
}

h4 {
    color: var(--color-primary);
    font-family: var(--font-primary);
    font-size: 1.2rem;
    font-weight: 600;
}

p {
    font-family: var(--font-text);
    margin: 0 0 1em 0;
    color: var(--color-text);
}

a {
    color: var(--color-accent);
    text-decoration: underline;
    font-weight: bold;
    transition: all 0.3s ease;
}

a:hover {
    text-decoration: none;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-text);
}

.site-wrapper {
    display: flex;
    flex-direction: column;
    padding-top: 140px; /* Platz für den fixierten Header */
    padding-bottom: 80px; /* Platz für den fixierten Footer */
}

.site-header {
    background-color: var(--sl-color-neutral-0);
    padding: 0;
    margin-bottom: 1rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--sl-color-neutral-200);
}

/* Header-Fade-Effekt */
.site-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -50px; /* Erweitert den Fade-Bereich nach unten */
    height: 50px; /* Höhe des Fade-Effekts */
    background: linear-gradient(to bottom, 
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.8) 40%,
        rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none; /* Erlaubt Interaktionen mit Elementen darunter */
    z-index: 999; /* Unter dem Header aber über dem Content */
    border-top: 1px solid var(--sl-color-neutral-200);
}

.header-content {
    width: 100%;
    max-width: var(--container-width);
    text-align: center;
}

.site-logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-primary);
    text-decoration: none;
    pointer-events: none;
    user-select: none;
}

.logo {
    width: 200px;
    padding: 10px;
}

.site-main {
    flex: 1;
    width: 95%;
    max-width: var(--container-width, 1200px);
    margin: 0 auto;
}

.site-footer {
    background-color: var(--sl-color-neutral-100);
    padding: 1rem 0;
    position: fixed;
    text-align: center;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1001;
}

/* Footer-Fade-Effekt */
.site-footer::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -40px;
    height: 40px;
    background: linear-gradient(to top, 
        rgb(248, 249, 250) 0%,
        rgba(248, 249, 250, 0.8) 40%,
        rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
    z-index: 999;
    border-bottom: 1px solid var(--sl-color-neutral-200);
}

.footer-content {
    width: 100%;
    max-width: var(--container-width, 1200px);
    margin: 0 auto;
    padding: 0 1rem;
}

.footer-content p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text);
}

.footer-content a {
    color: var(--color-primary);
    text-decoration: none;
}

.footer-content a:hover {
    text-decoration: underline;
}

/* Buttons */
.button,
button,
input[type="submit"],
input[type="button"] {
    background-color: var(--color-accent);
    color: white;
    border: none;
    padding: 0.8em 1.6em;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background-color: var(--color-primary);
}

/* Shoelace Components Customization */
sl-button::part(base) {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 0.9rem 1.25rem 0.9rem 1.25rem; /* EDIT */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-size: 1.2rem;
}

sl-button::part(base):hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 10px 20px rgba(20, 74, 125, 0.2);
}

sl-button[variant="neutral"]::part(base) {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}

sl-button[variant="neutral"]::part(base):hover {
    background-color: var(--color-text);
    border-color: var(--color-text);
}

/* Shoelace Dialog Styles */
sl-dialog::part(title) {
    color: var(--color-primary);
    font-family: var(--font-primary);
    font-size: 1.5rem;
    font-weight: 600;
}

sl-dialog::part(body) {
    font-family: var(--font-text);
    color: var(--color-text);
}

sl-details::part(header) {
    font-family: var(--font-primary);
}

sl-details::part(content) {
    font-family: var(--font-text);
    color: var(--color-text);
}


/* Allgemeine Card-Styles */
sl-card::part(base) {
    border: none;
    border-radius: 0;
    box-shadow: none;
}




/* Styles von index.php START */

ul {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}
.container {
    width: 100%;
    max-width: var(--container-width, 1200px);
    margin: 0 auto;
}

.container sl-card.intro-card {
    display: block;
    max-width: 1140px;
    margin: 0 auto;
    margin-top: 0;
    margin-bottom: 0;
}

.intro-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;  /* EDIT */
}

.intro-title {
    color: var(--color-primary);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 1rem 0 0 0;
}

.test-info {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 2.5rem;
}

.test-intro-container {
    display: flex;
    gap: 2rem;
    margin: 2rem 0;
}

.test-info-column {
    flex: 1;
}

.test-description-column {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem;
    background: #0201010D;
    border-radius: 0.75rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.info-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.info-icon {
    font-size: 2rem;
    color: var(--color-primary);
    flex-shrink: 0;
}

.info-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.info-content strong {
    color: var(--color-primary);
    font-size: 1.1rem;
    font-family: var(--font-primary);
}

.info-content span {
    color: var(--color-text);
    font-family: var(--font-text);
    font-size: 0.95rem;
    line-height: 1.5;
}

.form-group {
    margin-bottom: 1rem;
}

.start-section {
    margin-top: 1rem;
}

/* Normale Desktop-Ansicht */
.name-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.column {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

sl-input::part(base) {
    border-radius: 0.75rem;
    font-family: var(--font-text);      
}

sl-input::part(form-control-label) {
    font-weight: 600;
    font-family: var(--font-text);
} 


.test-description p {
    margin: 0 0 1rem;
    line-height: 1.6;
    color: #4A5568;
}

/* Alert Styles */
.alert-message {
    margin: 1rem 0;
}

.alert-message::part(base) {
    border: none;
    background-color: #32ac3640;
}

.alert-message[variant='warning']::part(base) {
    background-color: #FEEBC8;
    color: var(--sl-color-warning-600); /* EDIT */
}

.alert-message[variant='danger']::part(base) {
    background-color: #FED7D7;
    color: var(--color-primary);
}

/* Animation für den Rocket-Button */
sl-button:hover sl-icon[name="rocket-takeoff"] {
    animation: shake 0.5s ease infinite;
    display: inline-block;
}

@keyframes shake {
    0% { transform: rotate(-10deg); }
    50% { transform: rotate(10deg); }
    100% { transform: rotate(-10deg); }
}

/* Styles von index.php ENDE */



/* Styles von question.php START */

.question-card {
    width: 100%;
    border: none;
    background: linear-gradient(135deg, #fff 0%, #FAFAFE 100%);
    border-radius: 3rem;
    box-shadow: 
        0 10px 30px rgba(42, 67, 101, 0.08),
        0 30px 60px rgba(42, 67, 101, 0.05);
    overflow: visible;
    position: relative;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    display: none; /* Komplett ausblenden initial */
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    will-change: opacity, visibility;
}

.question-card.visible {
    opacity: 1;
    visibility: visible;
    display: block; /* Wieder einblenden */
}

sl-card::part(body) {
    padding: 0;
}

/* Layout der Fragekarte */
.question-card::part(base) {
    border: none;
    --border-width: 0;
    --border-color: transparent;
    border-radius: 3rem;
}

.question-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(181, 151, 91, 0.2);
    border-radius: inherit;
    z-index: -1;
    transform: rotate(var(--shadow-rotation, -3deg));
    transform-origin: center;
    box-shadow: 
        0 0 30px rgba(181, 151, 91, 0.5),
        var(--shadow-offset-x, 15px)
        var(--shadow-offset-y, 15px)
        30px rgba(181, 151, 91, 0.2);
    transition: transform 0.3s ease;
}

.question-card:hover::before {
    transform: rotate(calc(var(--shadow-rotation, -3deg) * 1.2));
}

sl-card::part(footer) {
    padding: 1rem 2rem 2rem 2rem;
}

.container sl-card.question-card {
    display: block;
    max-width: 800px;
    margin: 0 auto;
    margin-top: 1rem;  /* Basis-Abstand für kleine Bildschirme */
}

/* Responsive Abstände basierend auf Bildschirmhöhe */
@media (min-height: 800px) {
    .container sl-card.question-card {
        margin-top: 3rem;  /* Mittlerer Abstand für etwas größere Bildschirme */
    }
}

@media (min-height: 900px) {
    .container sl-card.question-card {
        margin-top: 5rem;  /* Größerer Abstand für große Bildschirme */
    }
}

.question-content {  /* Stelle sicher, dass der Inhalt über der Grafik liegt */
    padding: 2rem 2rem 0 2rem;
    position: relative;
    z-index: 2;
}

.question-content h2 {
    color: var(--color-primary);
    font-size: 1.5rem;
    margin: 0 0 1rem 0;
    font-weight: 600;
    position: relative;
}

.main-answers {
    margin-bottom: 1.5rem;
}

.alert-message {
    margin-bottom: 1rem;
}

sl-radio-group::part(base),
sl-radio::part(base) {
    display: flex !important;
    flex-direction: row !important;
}

sl-radio {
    flex: 1;
    min-width: 0;
    display: inline-flex !important;
    --display: inline-flex !important;
}

sl-radio::part(base) {
    width: 100%;
    padding: 1.2rem;
    background: white;
    border: 2px solid #E2E8F0;
    border-radius: 1.5rem;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-align: center;
    margin-bottom: 1rem; /* EDIT */
}

sl-radio::part(base)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(var(--color-primary), 0.08) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

sl-radio[aria-disabled="false"]::part(base):hover {
    background: rgba(20, 74, 125, 0.05);
    border-color: rgba(20, 74, 125, 0.3);
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 4px 20px rgba(20, 74, 125, 0.1);
}

sl-radio:hover::part(base)::before {
    opacity: 1;
}

sl-radio[aria-checked="true"]::part(base) {
    background: rgba(20, 74, 125, 0.05);
    border-color: rgba(20, 74, 125, 0.3);
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 4px 20px rgba(20, 74, 125, 0.1);
}

sl-radio::part(control) {
    --sl-input-border-color: #CBD5E0;
    --sl-input-border-color-hover: var(--color-primary);
    --sl-input-border-color-focus: var(--color-primary);
    --sl-input-border-color-checked: var(--color-primary);
    --sl-color-primary-600: var(--color-primary);
}

.navigation-buttons {
    display: flex;
    justify-content: space-between;
}

sl-button.prev-button::part(base),
sl-button.next-button::part(base) {
    border-radius: 1.5rem;
    font-weight: 600;
    /* padding: 1.2rem 2rem; */  /* EDIT */
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

sl-button.prev-button::part(base) {
    color: var(--color-primary);
    background: white;
    border-color: rgba(20, 74, 125, 0.2);
}

sl-button.prev-button:not([disabled])::part(base):hover {
    background: rgba(20, 74, 125, 0.05);
    border-color: rgba(20, 74, 125, 0.3);
    transform: translateX(-5px);
    box-shadow: 0 4px 20px rgba(20, 74, 125, 0.1);
}

sl-button.next-button::part(base) {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

sl-button.next-button:not([disabled])::part(base):hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    transform: translateX(5px);
    box-shadow: 0 4px 20px rgba(var(--color-primary), 0.2);
}

sl-button[disabled]::part(base) {
    opacity: 0.6;
    cursor: not-allowed;
}


/* Styles für die Zusatzfrage */
.tension-field-question h3 {
    color: var(--color-primary);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.tension-field-question sl-radio-group::part(base),
.tension-field-question sl-radio::part(base) {
    display: flex !important;
    flex-direction: row !important;
}

.tension-field-question sl-radio {
    flex: 1;
    min-width: 0;
    display: inline-flex !important;
    --display: inline-flex !important;
}


/* Fortschrittsanzeige unterhalb der Fragekarte */
.progress-container {
    margin-top: 2rem;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    display: none;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    will-change: opacity, visibility;
}

.progress-container.visible {
    opacity: 1;
    visibility: visible;
    display: block;
}

.progress-text {
    margin-top: 0.25rem;
    font-family: var(--font-text);
    font-size: 0.9rem;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.progress-text .current {
    font-size: 1.1rem;
    font-weight: 600;
    font-family: var(--font-text);
}

.progress-text .total {
    color: #64748B;
    font-family: var(--font-text);
}

sl-progress-bar::part(base) {
    border-radius: 100vh;
    background: #E2E8F0;
    height: 0.5rem;
    width: 200px;
    margin: 0 auto;
}

sl-progress-bar::part(indicator) {
    background: linear-gradient(90deg, var(--color-primary), #1A365D);
    transition: width 0.3s ease;
}

/* Desktop Footer (Standard) */
.mobile-footer {
    display: none;
}
/* Stelle sicher, dass der mobile Footer nur auf der Question-Seite erscheint */
body:not(.page-question) .mobile-footer {
    display: none;
}

/* Styles von question.php ENDE */



/* Styles von auswertung.php START */

/* Neue Styles für die Auswertung */

.results-section {
    margin: 6rem 0 0 0;
    background: none;
    border-radius: 1.5rem;
}

.results-section h3 {
    margin-bottom: 1rem;
}

.results-section h4 {
    margin-bottom: 0.5rem;
    margin-top: 0;
}

.points-summary {
    background: #F8F5FF;
    padding: 1.5rem;
    border-radius: 1rem;
    margin: 1rem 0;
}

.points-total {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.points {
    color: var(--color-primary);
    font-weight: 600;
}

.chart-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
}

.chart-container {
    width: 100%;
    max-width: 600px;
    height: 600px;
}

.chart-container {
    width: 600px;
    position: relative;
    background: none;
}

.chart-placeholder {
    display: none;
}

.contact-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 1rem;
}

.booking-option, .email-option {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background: #0201010D;
    border-radius: 1rem;
    min-height: 200px;
}

.option-content {
    flex-grow: 1;
}

.option-button {
    margin-top: auto;
}

.legend-section {
    margin: 3rem 0;
    padding: 2rem;
    background: #0201010D;
    border-radius: 1.5rem;
}

.legend-section h2 {
    margin-bottom: 2rem;
    color: var(--color-primary);
    margin-top: 0;
}

.legend-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.legend-item {
    background: white;
    border-radius: 1rem;
    width: 100%;
}

.legend-item::part(base) {
    border: none;
    border-radius: 2rem;
    background: white;
    width: 100%;
}

.legend-item::part(header) {
    padding: 1.5rem;
    position: relative;
}

.legend-summary {
    position: relative;
}

.legend-item::part(summary-icon) {
    position: absolute;
    right: 1.5rem;
    top: 1.5rem;
    transition: transform 0.2s;
}

.legend-item[open]::part(summary-icon) {
    transform: rotate(180deg);
}

.legend-content {
    line-height: 1.6;
    font-family: var(--font-text);    
    color: #4A5568;
    position: relative;
    padding-right: 2.5rem;
}

.legend-content strong {
    display: inline;
    font-size: 1rem;
}

.legend-item:not([open]) .legend-content {
    max-height: 3.2em;
    overflow: hidden;
}

.legend-item:not([open]) .legend-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 1.6em;
    background: linear-gradient(to bottom, transparent, white);
}

.legend-item::part(content) {
    display: none;
}

.legend-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Email-Dialog spezifische Styles */
.email-button[loading] {
    opacity: 0.7;
    cursor: not-allowed;
}

.email-dialog::part(title) {
    font-weight: 600;
    font-size: 1.2rem;
}

.email-dialog::part(body) {
    font-weight: normal;
}

#networkChart {
    width: 100% !important;
}

/* Spezifische Styles für die Auswertungsseite */
.auswertung-content .info-item {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem;
    background: #0201010D;
    border-radius: 0.75rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.auswertung-content .info-icon {
    font-size: 3rem;
    color: var(--color-primary);
    flex-shrink: 0;
}

.auswertung-content .info-item strong {
    color: var(--color-primary);
    font-family: var(--font-primary);
    font-size: 1.1rem;
}

.auswertung-content .info-item p {
    margin: 0;
}

/* Tabelle für erreichte Punktzahl */
.results-table {
    display: flex;
    gap: 1.5rem;
    margin: 4rem 0;
    flex-wrap: wrap;
}

.result {
    flex: 1;
    min-width: 250px;
    border: 1px solid var(--sl-color-neutral-200);
    border-radius: 1rem;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.result-header {
    padding: 1.5rem;
    background-color: var(--sl-color-neutral-50);
    text-align: center;
    border-bottom: 1px solid var(--sl-color-neutral-200);
}

.result-header h3 {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    color: var(--color-primary);
}

.result-score {
    color: var(--color-primary);
}

.result-content {
    padding: 1.5rem;
    flex-grow: 1;
}

.result-content p {
    margin: 0;
    color: var(--color-text);
    line-height: 1.6;
}

.current-result {
    transform: scale(1.05);
    box-shadow: var(--sl-shadow-medium);
    background-color: rgba(181, 151, 91, 0.1);
    z-index: 10;
}

.current-result .result-header {
    background-color: var(--color-accent);
    /* background-color: rgba(181, 151, 91, 0.8); */
    color: white;
}

.current-result .result-header h3 {
    color: white;
}

.current-result .result-score {
    color: white;
}

/* Booking Dialog Styles */
.booking-dialog::part(base) {
    --width: 95vw;
    --height: 95vh;
    max-width: 800px;
    max-height: 800px;
    position: fixed;
    z-index: 1002;
}

.booking-dialog::part(overlay) {
    z-index: 1002;
    background: rgba(0, 0, 0, 0.5);
}

.booking-dialog::part(panel) {
    height: 100%;
    width: 100%;
    background: white;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1003; /* Höher als das Overlay */
}

.booking-dialog iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: white;
    position: relative;
    z-index: 1004; /* Höchster z-index für Interaktivität */
}


/* Styling für die Merkmal-Nummern beim Netzdiagramm */
.hauptmerkmale {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background-color: rgba(111, 63, 251, 0.2);
    color: #6F3FFB;
    margin-right: 8px;
    font-family: var(--font-primary);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.hauptmerkmale-titel {
    color: #6F3FFB;
    margin-right: 8px;
    font-family: var(--font-primary);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.hauptmerkmale-text {
    padding-bottom: 1rem;
}

.konfliktfelder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background-color: rgb(251, 65, 112, 0.6);
    margin-right: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.konfliktfelder-titel {
    color: rgb(251, 65, 112);
    margin-right: 8px;
    font-family: var(--font-primary);
    font-size: 1.1rem;
    font-weight: 700;
    padding-bottom: 0.5rem;
}


/* Loading-Animation Styles */
.thinking-loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out;
    z-index: 1000;
}

.thinking-loader.visible {
    opacity: 1;
    visibility: visible;
}

.thinking-emoji {
    font-size: 3rem;
    animation: thinking 1s infinite;
}

@keyframes thinking {
    0% { transform: rotate(-10deg); }
    50% { transform: rotate(10deg); }
    100% { transform: rotate(-10deg); }
}



/* Responsive Design */
@media (max-width: 768px) {

    .test-info {
        gap: 1rem;
    }

    .contact-options {
        grid-template-columns: 1fr;
    }

    .legend-section {
        padding: 0.75rem;
        margin: 1rem 0;
    }

    .auswertung-content .info-item {
        padding: 1rem;
    }

    .booking-option, .email-option {
        padding: 1rem;
    }

    .question-card {
        transition-duration: 0.2s;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }

    .booking-dialog::part(base) {
        --width: 100vw;
        --height: 100vh;
        max-width: none;
        max-height: none;
        margin: 0;
        padding: 0;
        border-radius: 0;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .booking-dialog::part(panel) {
        border-radius: 0;
        height: 90vh; /* muss bei 90vh sein, da Browserleisten noch berücksichtigt werden müssen */
        max-height: none;
        margin: 0;
        padding: 0;
    }

    sl-dialog::part(title) { /* verschafft in der Mobilenansicht etwas mehr Platz */
        padding: 0.5rem;
    }

    sl-dialog::part(body) { /* verschafft in der Mobilenansicht etwas mehr Platz */
        padding: 0.5rem;
    }

    .booking-dialog::part(overlay) {
        z-index: 1999;  /* Höher als Header/Footer */
    }

    .booking-dialog::part(panel) {
        z-index: 2000;  /* Über dem Overlay */
    }

    .container sl-card.question-card {
        margin-top: 2rem;  /* Abstand nach oben */
    }

    .question-content h2 {
        font-size: 1.3rem;
        line-height: 1.3;
        margin: 0 0 1rem 0;
    }

    .tension-field-question h3 {
        font-size: 1.2rem;
        line-height: 1.2;
        margin: 0 0 1rem 0;        
    }

    .question-card {
        width: 95%;
    }

    .question-content { 
        padding: 1.5rem 1.5rem 0 1.5rem;
    }

    .question-card::before {
        transform: none;
        box-shadow: none;
        transition: none;
        background: none;
        transform: none;
        box-shadow: none;
        transition: none;
        border-radius: none;
    }
    
    .question-card:hover::before {
        transform: none;
    }

    .intro-title {
        font-size: 1.3rem;
        font-weight: 600;
        margin-top: 3rem;
    }

    h2 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-top: 2.5rem;
    }

    sl-button.next-button::part(base) {
        padding: 0.35rem 0.8rem 0.35rem 0;
        font-size: 1.2rem;
    }

    sl-button.prev-button::part(base) {
        padding: 0.35rem 0 0.35rem 0.8rem;
        font-size: 1.2rem;
    }

    sl-input::part(form-control-label) {
        font-weight: 500;
    }

    sl-radio::part(base) {
        padding: 0.9rem;
        margin-bottom: 0.5rem;
    }

    .answer-options {
        margin-bottom: 1rem;
    }

    .test-intro-container {
        flex-direction: column;
    }

    .logo {
        width: 150px;
    }

    .site-wrapper {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .site-main {
        margin-top: 0.5rem;
        margin-bottom: 2rem;
    }

    /* Spezielles Footer Styling nur für question.php */
    body.page-question .site-footer {
        padding: 0;
        background: none !important;
    }

    .footer-content {
        padding: 0;
    }

    .intro-content {
        gap: 0;
    }

    .name-fields {
        grid-template-columns: 1fr;
    }

    .site-header::after {
        bottom: -40px;
        height: 40px;
    }

    .test-description-column {
        gap: 0;
    }

    .chart-container {
        width: 100%;
        max-width: 600px;
        height: auto;  /* Feste Höhe für mobile Ansicht */
        padding: 0;
    }
    
    #networkChart {
        width: 100% !important;
    }

    /* Mobile Footer */
    .desktop-footer {
        display: none !important;
    }
    
    .mobile-footer {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgb(255, 255, 255);
        padding: 1rem 1rem 0.5rem 1rem;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        z-index: 1005;
    }

    /* Progress Container im mobilen Footer */
    .mobile-footer .progress-container {
        opacity: 1;
        visibility: visible;
        display: block;
        margin: 0; /* Reset margins */
    }

    /* Progress Bar Styling */
    .mobile-footer sl-progress-bar::part(base) {
        margin: 0 auto;
    }

    /* Progress Container im Content ausblenden */
    .question-card + .progress-container {
        display: none !important;
    }

    /* Progress Container im mobilen Footer */
    .mobile-footer .progress-container {
        opacity: 1;
        visibility: visible;
        display: block;
        margin: 0; /* Reset margins */
    }

    .chart-wrapper {
        margin: 1rem 0;
    }

    .legend-item::part(summary-icon) {
        right: 0.8rem;
        top: 1.2rem;
    }

    .legend-item::part(header) {
        padding: 1rem;
    }

    .results-table {
        gap: 1rem;
        margin: 2rem 0;
        flex-direction: column;
    }

    .result {
        width: 100%;
    }
    
    .result-header {
        padding: 1rem;
    }
    
    .result-content {
        padding: 1rem;
    }
    
    .current-result {
        order: -1; /* Erklärung zu erreichter Punktzahl kommt an erster Stelle auf kleinen Bildschirmen */
        transform: scale(1);
    }
}

/* Responsive Anpassungen für die Auswertungstabelle */
@media (max-width: 992px) {
    .results-table {
        flex-direction: column;
        margin: 3rem 0;
    }
    
    .result {
        width: 100%;
    }
    
    .current-result {
        order: -1; /* Erklärung zu erreichter Punktzahl kommt an erster Stelle auf kleinen Bildschirmen */
        transform: scale(1);
    }
}

/* Mittlere Bildschirmgrößen */
@media (max-width: 1024px) {
    .name-fields {
        grid-template-columns: 1fr;
    }

    .test-description-column {
        gap: 0;
    }

    .results-pricing-table {
        flex-direction: column;
    }
    
    .result-plan {
        width: 100%;
    }
    
    .current-plan {
        order: -1; /* Aktiver Plan kommt an erster Stelle auf kleinen Bildschirmen */
    }
}