/* ===== Grundlegende Seitenstruktur ===== */
body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;                    /* NEU: Weiss statt Gradient */
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    touch-action: none;
}

.container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: none;
    background-color: #002B55;
}

#app-container {
    display: none; /* Standardmäßig ausgeblendet */
    background-color: #002B55; /* Schwarzer Hintergrund hinzugefügt */
}

.hidden {
    display: none !important;
}

/* ===== Animationen ===== */
@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeInSlide {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.pulse-animation {
    animation: pulse 1.5s infinite;
}

/* ===== Video und Foto Elemente ===== */
#video, #photo-preview, #extended-photo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: fill;
    transform: translate(-50%, -50%);
    display: none;
}

#loading-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20; /* Das Video im Vordergrund anzeigen */
    display: none; /* Das Video zunächst ausblenden */
    background-color: #000; /* Schwarzer Hintergrund */
}

/* ===== Startbildschirm ===== */
#start-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 30;
    transition: transform 0.5s ease-in-out;
    overflow-y: auto;
    background: #ffffff;                    /* NEU: Explizit weiss */
}

#start-screen img {
    width: 120px;                           /* NEU: Etwas kleiner */
    height: auto;
    margin-bottom: 5px;
    margin-top: 0;                          /* NEU: Kein Top-Margin mehr (Info-Bar ist oben) */
    opacity: 0;
    animation: fadeInScale 1s ease-out forwards;
    filter: brightness(0);                  /* NEU: Schwarzes Logo wie im Shop */
}

#start-screen h1 {
    font-size: 22px;                        /* NEU: Etwas kleiner, moderner */
    margin-bottom: 5px;
    color: #002B55;
    font-weight: 700;                       /* NEU: Bold statt bold */
    font-style: normal;                     /* NEU: Nicht mehr italic */
    text-transform: none;                   /* NEU: Nicht mehr uppercase */
    background: none;                       /* NEU: Kein Gradient mehr */
    -webkit-background-clip: unset;         /* NEU: Reset */
    -webkit-text-fill-color: #002B55;       /* NEU: Solid Color */
    display: inline-block;
    opacity: 0;
    animation: fadeInScale 1s ease-out forwards;
    animation-delay: 0.5s;
}

#start-screen-subtitle {
    color: #6b7b8d;
    font-size: 14px;
    margin: 0 0 20px 0;
    font-weight: 400;
    opacity: 0;
    animation: fadeInScale 1s ease-out forwards;
    animation-delay: 0.6s;
}

#start-screen-topbar {
    width: 100%;
    background: #002B55;
    padding: 10px 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.3px;
    flex-shrink: 0;
    box-sizing: border-box;
    margin-bottom: 15px;
}

#start-screen-topbar span.divider {
    opacity: 0.3;
}

/* ===== Buttons ===== */
.start-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 16px;                       /* NEU: Etwas kleiner */
    font-weight: 600;                      /* NEU: Semi-bold */
    padding: 14px 30px;
    border: none;
    border-radius: 8px;                    /* NEU: Weniger rund, moderner */
    width: 90%;                            /* NEU: Volle Breite */
    max-width: 400px;                      /* NEU: Max-Width */
    height: auto;                          /* NEU: Auto height */
    text-align: center;
    margin: 10px auto;
    transition: all 0.3s ease;
    opacity: 0.3;
    background-color: #999;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
    color: white;
    letter-spacing: 0.4px;                 /* NEU */
}

.start-button:nth-child(3) {
    animation-delay: 1s;
}

.start-button:nth-child(4) {
    animation-delay: 1.2s;
}

.start-button:nth-child(5) {
    animation-delay: 1.4s;
}

.start-button.enabled {
    opacity: 1;
    background-color: #002B55;
    cursor: pointer;
    pointer-events: auto;
    color: white;
    box-shadow: 0 2px 8px rgba(0, 43, 85, 0.2);  /* NEU: Subtiler Shadow */
}

.start-button:not(.enabled):hover {
    background-color: #999;
    transform: none;
}

.start-button.enabled:hover, .start-button:hover {
    background-color: #003d7a;             /* NEU: Dunklerer Navy statt Cyan */
    transform: scale(1.02);               /* NEU: Subtilerer Hover */
}

.start-button.enabled:active, .start-button:active {
    transform: scale(0.95);
}

.start-button i {
    font-size: 22px; /* Einheitliche Größe für alle Icons */
    width: 24px; /* Feste Breite für eine exakte Positionierung */
    height: 24px; /* Feste Höhe für bessere Ausrichtung */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-shrink: 0; /* Verhindert Größenänderungen */
    line-height: 1; /* Exakte vertikale Zentrierung */
}

.start-button span {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1; /* Exakte vertikale Zentrierung */
}

/* ===== Capture und Back Buttons ===== */
#capture, #back {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.7);
    border: none;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #009EE3;
    z-index: 20;
    cursor: pointer;
    text-align: center;
}

#back {
    display: none; /* Initially hidden */
}

/* ===== Camera Overlay ===== */
#camera-overlay {
    position: absolute;
    bottom: 130px; /* Abstand über dem Capture-Button */
    left: 50%;
    transform: translateX(-50%);
    width: 80px; /* Größe des Icons anpassen */
    height: auto;
    opacity: 1; /* Keine Transparenz */
    display: block; /* Standardmäßig sichtbar */
    z-index: 20; /* Über anderen Elementen */
    pointer-events: none; /* Keine Interaktion */
}

/* ===== Hilfsbilder Container ===== */
#help-images-container {
    position: absolute;
    top: 50px; /* Abstand von oben, unterhalb der horizontalen Wasserwaage */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    gap: 10px;
    z-index: 19;
    width: auto;
}

#help-images-container img {
    width: 80px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    transition: opacity 0.3s ease;
}

/* ===== Guide Canvas ===== */
#guide-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto; /* Damit Touch-Event überhaupt erfasst wird */
    z-index: 10;
    touch-action: none; /* Verhindert, dass Touch-Interaktionen wie Scrollen oder Zoomen greifen */
}

/* ===== Logo Overlay ===== */
#logo-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 50px; /* Passen Sie die Größe nach Bedarf an */
    z-index: 25;
}

/* ===== Loading ===== */
#loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 40;
    display: none; /* Initially hidden */
}

/* ===== Result Screen ===== */
#result {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 30;
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.6), rgba(200, 200, 200, 0.3), transparent), linear-gradient(135deg, #F0F0F0, #C0C0C0);
    display: none;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 20px 20px 100px 20px; /* Zusätzlicher Padding unten für den Button */
    box-sizing: border-box;
    overflow-y: auto; /* Scrollbar hinzufügen, falls nötig */
}

/* Logo oben wie auf der Startseite */
#result::before {
    content: '';
    background-image: url('https://shoesize.haix.dev/shoesize/static/hx_logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 150px;
    height: 100px;
    margin-bottom: 20px;
    flex-shrink: 0;
}

/* ===== Schuhgröße oben ===== */
#shoe-size {
    color: #002B55;
    font-size: 32px;
    font-weight: bold;
    margin: 20px 0 30px 0; /* Mehr Platz nach unten */
    padding: 20px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 320px;
    text-align: center;
}

/* ===== Container für Fußinfos ===== */
.foot-info-container {
    width: 100%;
    max-width: 320px;
    margin: 15px 0;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Einheitliches Styling für beide Skalen-Container */
/* Gemeinsames Styling für beide Skalen-Container */
.size-scale-container,
.width-scale-container {
    width: 100%;
    margin: 15px auto;
    position: relative;
}

/* Konsistente Beschriftung für beide Skalen */
.size-label,
.width-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    align-items: center;
}

/* Linksseitiger Text in den Beschriftungen */
.size-label span:first-child,
.width-label span:first-child {
    color: #444;
    font-size: 14px;
    font-weight: normal;
}

/* Rechtsseitiger Text in den Beschriftungen (z.B. "UK 5") */
.size-label span:last-child,
.width-label span:last-child {
    color: #002B55;
    font-size: 14px;
    font-weight: normal;
}

/* Die Skalen selbst - EXAKT GLEICHE GRÖSSE */
.size-scale,
.width-scale {
    display: flex;
    width: 100%;
    height: 15px; /* Gleiche Höhe für beide Skalen */
    border-radius: 8px; /* Gleicher Radius */
    overflow: hidden;
}

/* Einheitliches Styling für die Sektionen */
.size-scale .size-section,
.width-scale .scale-section {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px; /* Kleinere, einheitliche Schriftgröße */
    font-weight: bold;
    color: white;
    position: relative;
    opacity: 0.8;
    transition: opacity 0.3s;
}

/* Aktive Sektion */
.size-scale .size-section.active,
.width-scale .scale-section.active {
    opacity: 1;
}

/* Übereinstimmende Farben für beide Skalen */
.size-scale .size-section:nth-child(1),
.width-scale .scale-section[data-category="F"] { background-color: #67C8DB; }

.size-scale .size-section:nth-child(2),
.width-scale .scale-section[data-category="F-G"] { background-color: #00ACC1; }

.size-scale .size-section:nth-child(3),
.width-scale .scale-section[data-category="G"] { background-color: #00897B; }

.size-scale .size-section:nth-child(4),
.width-scale .scale-section[data-category="H"] { background-color: #EF6C00; }

.size-scale .size-section:nth-child(5),
.width-scale .scale-section[data-category="K"] { background-color: #E53935; }

/* Exakt gleiche Marker */
.size-marker,
.width-marker {
    width: 8px;
    height: 22px;
    background-color: #002B55;
    position: absolute;
    top: 19px;
    border-radius: 2px;
    transform: translateX(-50%);
    z-index: 3;
    transition: left 0.5s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Gleiche Pfeilgröße und Position */
.size-marker::after,
.width-marker::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #002B55;
}

/* Exakt gleiche Descriptions */
.size-description,
.width-description {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #666;
    margin-top: 15px;
    padding: 0 2px;
}

/* ===== Zurück-Button ===== */
#back-to-start {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 18px;
    font-weight: bold;
    padding: 15px 30px;
    background-color: #002B55;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    width: 250px;
    height: 60px;
    margin-top: 30px;
}

#back-to-start:hover {
    background-color: #009EE3;
    transform: scale(1.05);
}

#back-to-start:active {
    transform: scale(0.95);
}

/* Für kleinere Bildschirme anpassen */
@media screen and (max-height: 700px) {
    #result {
        padding: 15px 15px 80px 15px;
    }
    
    #result::before {
        height: 80px;
        margin-bottom: 10px;
    }
    
    #shoe-size {
        font-size: 28px;
        margin: 10px 0 20px 0;
        padding: 15px;
    }
    
    .foot-info-container {
        margin: 10px 0;
        padding: 10px;
    }
    
    #back-to-start {
        margin-top: 20px;
    }
}
/* ===== Debug Button ===== */
#debug-button {
    position: absolute;
    bottom: 10px;
    padding: 10px 20px;
    font-size: 18px;
    background-color: #009EE3;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    width: 200px;
}

#back-to-start:hover, #debug-button:hover {
    background-color: #0056b3;
    transform: scale(1.05);
}

#back-to-start:active, #debug-button:active {
    transform: scale(0.95);
}

/* ===== Formular-Elemente ===== */
.form-group {
    width: 80%;
    max-width: 400px;
    margin-bottom: 20px;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #002B55;                        /* NEU: Navy statt dunkelgrau */
    font-weight: 600;                      /* NEU: Semi-bold */
    font-size: 13px;                       /* NEU: Etwas kleiner */
    text-align: left;
}


.form-hint {
    margin-top: 5px;
    font-size: 12px;
    color: #666;
}

/* Input-Feld für Namen */
#user-name {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #d0d5dd;             /* NEU: Grauer Border statt Cyan */
    border-radius: 8px;
    font-size: 16px;
    background-color: #ffffff;             /* NEU: Reines Weiss */
    box-shadow: none;                      /* NEU: Kein Shadow */
    transition: all 0.3s ease;
    -webkit-appearance: none;
    box-sizing: border-box !important;
}

#user-name:focus {
    border-color: #002B55;                 /* NEU: Navy statt blau */
    box-shadow: 0 0 0 3px rgba(0, 43, 85, 0.15);  /* NEU: Navy-Shadow */
    outline: none;
}

/* Dropdown-Styling */
.leisten-dropdown {
    width: 100% !important;
    padding: 12px 15px;
    border: border: 1px solid #d0d5dd;;
    border-radius: 8px;
    font-size: 16px;
    background-color: #ffffff;
    cursor: pointer;
    box-shadow: none;
    transition: all 0.3s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23002B55' viewBox='0 0 16 16'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>");
    background-repeat: no-repeat;
    background-position: calc(100% - 15px) center;
    padding-right: 40px;
    box-sizing: border-box !important;
    max-width: 100%;             /* Verhindert, dass das Element breiter als sein Container wird */
    white-space: nowrap;         /* Stellt sicher, dass der Text in einer Zeile bleibt */
    overflow: hidden;            /* Versteckt den überfließenden Text */
    text-overflow: ellipsis;     /* Fügt die "..." am Ende hinzu */
}

.leisten-dropdown:focus {
    border-color: #002B55;
    box-shadow: 0 0 0 3px rgba(0, 158, 227, 0.3);
    outline: none;
}

/* Überschreiben alter Stile für leisten-selection */
.leisten-selection, #leisten-selection {
    width: 90% !important;
    max-width: 400px !important;
    margin: 20px 0;
    text-align: left;
    margin-top: 0;
}

/* Sicherstellen, dass Container gleich breit sind */
#name-input-container, #leisten-selection {
    width: 90% !important;
    max-width: 400px !important;
    margin-bottom: 0px;
    text-align: left;
}

/* Für iOS-Geräte optimiert */
@supports (-webkit-overflow-scrolling: touch) {
    .leisten-dropdown {
        font-size: 16px; /* Verhindert Zoom auf iOS beim Fokussieren */
        padding: 12px 30px 12px 15px; /* Mehr Platz für den Dropdown-Pfeil */
    }
    
    #user-name {
        font-size: 16px; /* Verhindert Zoom auf iOS beim Fokussieren */
    }
}

/* Für kleine Bildschirme */
@media screen and (max-width: 480px) {
    .form-group, #name-input-container, #leisten-selection, .leisten-selection {
        width: 90% !important;
    }
    
    .leisten-dropdown, #user-name {
        font-size: 16px;
    }
}
    #name-input-container {
        display: none !important;
    }
    
    /* Layout-Anpassungen ohne Namensfeld */
    #leisten-selection {
        margin-top: 20px !important;
    }
    
    #permission-section {
        margin-top: 30px !important;
    }
/* ===== Guide Screen ===== */
#guide-screen {
    display: none; /* Initially hidden */
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 30;
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
}

.guide-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    text-align: left;
    max-width: 90%;
}

.guide-image {
    max-width: 80%; /* Verkleinert die Bilder weiter */
    height: auto;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
}

.guide-list {
    list-style-type: disc; /* Zeilen als Bullet Points darstellen */
    padding-left: 20px; /* Platz für die Bullet Points */
    font-size: 14px; /* Schriftgröße auf 14px reduziert */
    color: #000000;
    padding: 10px;
    border-radius: 10px;
    max-width: 100%;
}

.guide-list li {
    margin-bottom: 5px;
}

/* ===== Error Message ===== */
#error-message {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 30;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* Einheitlicher Hintergrund */
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.6), rgba(200, 200, 200, 0.3), transparent), linear-gradient(135deg, #F0F0F0, #C0C0C0);
}

#error-message p {
    font-size: 18px;
    font-weight: bold;
    color: #002B55;
    margin-bottom: 20px;
}

/* Logo rechts oben */
#error-logo {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 50px;
    height: auto;
    z-index: 35;
}

#error-message button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 18px;
    font-weight: bold;
    padding: 15px 30px;
    background-color: #002B55;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    width: 250px;
    height: 60px;
    text-align: center;
    margin: 20px auto 0;
    opacity: 1;
}

#error-message button:hover {
    background-color: #009EE3;
    transform: scale(1.05);
}

#error-message button:active {
    transform: scale(0.95);
}

#error-message.hidden {
    display: none !important;
}

/* ===== Instruction Overlay ===== */
#instruction-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.6), rgba(200, 200, 200, 0.3), transparent), linear-gradient(135deg, #F0F0F0, #C0C0C0);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    pointer-events: auto;
}

.instruction-content {
    background: transparent;
    padding: 20px;
    width: 100%;
    height: 100%;
    text-align: center;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#instruction-image {
    max-width: 200px; /* Begrenzt die maximale Breite auf 200px */
    width: 100%;
    height: auto;
    margin: 0 auto 20px auto; /* Zentriert das Bild horizontal */
    object-fit: contain;
}

#instruction-text {
    color: #002B55;
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.5;
}

#instruction-text ul {
    list-style-type: disc;
    text-align: left;
    margin: 0;
    padding-left: 20px;
    color: #002B55;
}

#instruction-text li {
    margin-bottom: 10px;
    line-height: 1.4;
}

#instruction-ok {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 18px;
    font-weight: bold;
    padding: 15px 30px;
    background-color: #002B55;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    width: 250px;
    height: 60px;
    text-align: center;
    margin: 20px auto 0;
    opacity: 1;
    animation: none;
    position: relative; /* Neue Zeile */
    z-index: 2001; /* Neue Zeile */
    pointer-events: auto;
    cursor: pointer;
}

#instruction-ok:hover {
    background-color: #009EE3;
    transform: scale(1.05);
}

#instruction-ok:active {
    transform: scale(0.95);
}

/* ===== Image Preview Container ===== */
.image-preview-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 20px; /* Reduziert den Abstand zwischen den Bildern */
    width: 100%;
    padding: 10px 0; /* Reduziert den vertikalen Abstand */
    box-sizing: border-box;
}

.image-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.image-wrapper p {
    color: #002B55;
    margin-bottom: 10px; /* Reduziert von 15px auf 10px */
    font-size: 20px;
    font-weight: bold;
}

.thumbnail {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 40vh;
    display: block;
    border-radius: 10px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.zoomed {
    transform: scale(1.2);
}

/* ===== Image Modal ===== */
#image-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal-content {
    max-width: 90%;
    max-height: 90%;
    border-radius: 10px;
}

.close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
}

.fullscreen-image {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    max-height: 90%;
    z-index: 1001;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.8);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ===== Button Container ===== */
.button-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    width: 90%; /* Container etwas breiter machen */
    margin: 0 auto; /* zentrieren */
}

.button {
    flex: 1;
    min-width: 160px; /* Minimale Breite pro Button */
    max-width: 250px; /* Maximale Breite erhöht */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Abstand zwischen Icon und Text */
}

/* Icon etwas mehr Platz geben */
.button i {
    margin-right: 8px;
}

.button.confirm {
    background-color: #28a745;
}

.button.confirm:hover {
    background-color: #218838;
}

.button.retry {
    background-color: #dc3545;
}

.button.retry:hover {
    background-color: #c82333;
}

.button:active {
    transform: scale(0.95);
}

#confirm-button {
    background-color: #28a745 !important; /* Grün für positive Aktion */
}

#confirm-button, #retry-button {
    width: 100%;
    padding: 15px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#confirm-button {
    background-color: #28a745;
    color: white;
}

#retry-button {
    background-color: #dc3545;
    color: white;
}

/* ===== Debug Review ===== */
#debug-review {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.6), rgba(200, 200, 200, 0.3), transparent), linear-gradient(135deg, #F0F0F0, #C0C0C0);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    color: #002B55; /* Textfarbe angepasst an das Design */
    padding: 20px;
    box-sizing: border-box;
    z-index: 1000;
    overflow-y: auto;
}

#debug-review h2 {
    margin-bottom: 10px;
    color: #009EE3;
}

#debug-review p {
    margin-top: 40px; /* Reduziert von 60px auf 40px */
    margin-bottom: 15px; /* Reduziert von 30px auf 15px */
    text-align: center;
    color: #002B55;
}

/* ===== Heel Debug Review ===== */
#heel-debug-review {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.6), rgba(200, 200, 200, 0.3), transparent), linear-gradient(135deg, #F0F0F0, #C0C0C0);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    color: #002B55;
    padding: 20px;
    box-sizing: border-box;
    z-index: 1000;
    overflow-y: auto;
}

/* Text element styles */
#heel-debug-review h2 {
    margin-bottom: 10px;
    color: #009EE3;
}

#heel-debug-review p, #heel-debug-review-text {
    margin-top: 40px;
    margin-bottom: 15px;
    text-align: center;
    color: #002B55;
}

/* Additional button styles to ensure they match */
#heel-debug-review .button-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    width: 90%;
    margin: 0 auto;
}

#heel-debug-review .button {
    flex: 1;
    min-width: 160px;
    max-width: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#heel-debug-review .retry {
    background-color: #dc3545;
    color: white;
}

#heel-debug-review .confirm {
    background-color: #28a745;
    color: white;
}


/* ===== Permission Section ===== */
#permission-section {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: #f8fafb;                    /* NEU: Hellgrau statt weiss */
    padding: 15px;
    border-radius: 10px;
    box-shadow: none;                       /* NEU: Kein Shadow */
    border: 1px solid #e8ecf0;             /* NEU: Subtiler Border */
    width: 90%;
    max-width: 400px;
    margin-bottom: 30px;
    margin-top: 30px;
}

.permission-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
    margin: 5px 0;
}



.permission-item > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.denied {
    color: red;
}

.granted {
    color: green;
}

.permission-button {
    background-color: #002B55;
    color: white;
    padding: 8px 20px;
    border: none;
    border-radius: 6px;                    /* NEU: Etwas runder */
    font-weight: 500;
    font-size: 14px;                       /* NEU: Etwas kleiner */
    min-width: 100px;
    transition: all 0.2s ease;
}

.permission-button:hover {
    background-color: #003d7a;             /* NEU: Dunklerer Navy statt Cyan */
    transform: scale(1.02);
}

.permission-icon {
    font-size: 20px;
    width: 24px; /* Feste Breite für bessere Ausrichtung */
    text-align: center;
}

#camera-status, #sensor-status {
    font-size: 15px;
    color: #002B55;
    margin: 0;
}

/* ===== Rotate Warning ===== */
#rotate-warning {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.7));
    z-index: 5000;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding: 20px;
}

#rotate-warning img {
    width: 100px;
    height: auto;
    margin-bottom: 20px;
}

#rotate-warning h1 {
    color: #002B55;
    font-size: 24px;
    font-weight: bold;
}

.rotate-animation {
    font-size: 100px;
    color: #002B55;
    display: block;
    animation: rotatePhone 2s infinite ease-in-out;
}

/* ===== Checklist Container ===== */
.checklist-container {
    position: fixed;
    top: auto;
    bottom: 160px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 43, 85, 0.9);
    border-radius: 8px;
    padding: 10px 15px;
    z-index: 1000;
    width: 85%;
    max-width: 400px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.checklist-item {
    display: flex;
    align-items: center;
    margin: 8px 0;
    color: white;
    font-size: 14px;
    transition: all 0.3s ease;
}

.checklist-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 10px;
    font-weight: bold;
    flex-shrink: 0;
}

.checklist-not-completed {
    background-color: rgba(255, 0, 0, 0.6);
}

.checklist-completed {
    background-color: #00b300;
}

.checklist-text {
    flex-grow: 1;
}

.checklist-hint {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    color: #FFD700;
    font-weight: bold;
    text-align: center;
    display: none;
}

/* ===== Width Scale ===== */
/* ===== Anpassung für die Fußweitenskala ===== */
.width-scale-container {
    width: 100%;
    max-width: 100%; /* Statt 250px, um volle Breite zu nutzen */
    margin: 15px auto; /* Gleiches Margin wie bei der Schuhgrößenskala */
    position: relative;
}

.width-label {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #444;
    margin-bottom: 3px;
}

.width-scale {
    display: flex;
    width: 100%;
    height: 15px;
    border-radius: 8px;
    overflow: hidden;
}

.scale-section {
    height: 100%;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    font-weight: bold;
    color: white;
    transition: all 0.3s;
}

.scale-section[data-category="F"] {
    background-color: #26C6DA;
}

.scale-section[data-category="F-G"] {
    background-color: #00ACC1;
}

.scale-section[data-category="G"] {
    background-color: #00897B;
}

.scale-section[data-category="H"] {
    background-color: #EF6C00;
}

.scale-section[data-category="K"] {
    background-color: #E53935;
}

.scale-label {
    font-size: 10px;
    opacity: 0.8;
}

.width-marker {
    position: absolute;
    width: 8px;
    height: 22px;
    background-color: #002B55;
    top: 19px;
    border-radius: 2px;
    transform: translateX(-50%);
    z-index: 2;
    transition: left 0.5s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.width-marker::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #002B55;
}

.width-description {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #666;
    margin-top: 15px;
    padding: 0 2px;
}

.width-recommendation {
    background-color: #FFF9C4;
    border-left: 4px solid #FFD600;
    padding: 10px 15px;
    border-radius: 5px;
    margin: 10px 0;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: none;
}
#tilt-indicator {
    position: absolute;
    right: 10px; /* Rechts statt links am Bildschirmrand */
    width: 20px;
    height: 150px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid white;
    border-radius: 10px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
#tilt-ball {
    width: 18px;
    height: 18px;
    background: red;
    border-radius: 50%;
    position: absolute;
    transition: top 0.1s ease-out;
}
#horizontal-tilt-indicator {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 20;
}
#horizontal-tilt-ball {
    width: 18px;
    height: 18px;
    background: red;
    border-radius: 50%;
    position: absolute;
    transition: left 0.1s ease-out;
}

/* CSS für die Bubble-Level Wasserwaage */
#bubble-level-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  background-color: rgba(0, 43, 85, 0.15);
  border: 3px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  z-index: 25;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}



#bubble-level-horizontal-line {
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.5);
}

#bubble-level-vertical-line {
  position: absolute;
  width: 1px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
}

#bubble-point {
  position: absolute;
  width: 24px;
  height: 24px;
  background-color: rgba(0, 158, 227, 0.9);
  border: 2px solid white;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  transition: background-color 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

#bubble-point.in-target {
  background-color: rgba(40, 167, 69, 0.9);
  animation: pulseTarget 1.5s infinite ease-in-out;
}

#horizontal-tilt-indicator, #tilt-indicator {
  display: none !important;
}

#bubble-point::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: white;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes pulseTarget {
  0% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.4); }
  50% { transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 0 0 10px rgba(40, 167, 69, 0); }
  100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
}

/* Position anpassen je nach Modus */
.position-mode #bubble-level-indicator {
  top: 50%; /* Mitte des Bildschirms im Positionsmodus */
}

.scan-mode #bubble-level-indicator {
  top: 25%; /* Weiter oben im Scan-Modus */
  width: 80px; /* Kleiner im Scan-Modus */
  height: 80px;
}

/* Responsives Design für verschiedene Bildschirmgrößen */
@media screen and (max-height: 600px) {
  #bubble-level-indicator {
    width: 100px;
    height: 100px;
  }
  
  #bubble-level-indicator::before {
    width: 70px;
    height: 70px;
  }
  
  #bubble-level-indicator::after {
    width: 35px;
    height: 35px;
  }
  
  #bubble-point {
    width: 20px;
    height: 20px;
  }
}

/* ===== Media Queries ===== */
@media screen and (orientation: landscape) {
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #002B55;
    }
    
    #rotate-warning {
        display: flex !important; /* Sichtbar machen */
    }
    
    #app-container, #start-screen, #debug-review, #guide-screen, #result {
        display: none !important; /* Alles andere ausblenden */
    }
}

/* ===== Miscellaneous ===== */


.leisten-selection {
    margin: 20px 0;
    text-align: center;
}

.leisten-dropdown {
    padding: 8px 12px;
    border: border: 1px solid #d0d5dd;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 8px;
}
    .live-warning-new {
        position: fixed;
        top: 80px;
        left: 50%;
        transform: translate(-50%, -20px); /* Startposition für Animation */
        background: rgba(20, 30, 40, 0.7);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        color: white;
        padding: 10px 20px;
        border-radius: 25px; /* Pillenform */
        font-size: 15px;
        font-weight: 500;
        z-index: 100;
        display: flex;
        align-items: center;
        gap: 10px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.2);
        opacity: 0;
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    /* Zustand, wenn die Warnung sichtbar ist */
    .live-warning-new.visible {
        opacity: 1;
        transform: translate(-50%, 0);
    }

    .live-warning-new .warning-icon {
        font-size: 20px;
        color: #FFA500; /* Orange für die Warnung */
    }

/* Modernes Produkt-Auswahl Interface */
.product-selector-placeholder {
    background: linear-gradient(135deg, #ffffff, #f8f9fa);
    border: 2px solid #e0e8f0;
    border-radius: 16px;
    padding: 16px 20px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-top: 10px;
}

.product-selector-placeholder:active {
    transform: scale(0.98);
}

        .selected-product-display {
            min-height: 50px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 15px;
        }
        
        .selected-product-display .product-name {
            line-height: 1.3;
            text-align: left;
            flex: 1;
        }
#product-selector-modern {
            height: auto;
            min-height: 50px;
        }
.selector-icon {
    color: #009EE3;
    transition: transform 0.3s ease;
    font-size: 18px;
}

/* Modal Overlay für Produktauswahl */
.product-selection-modal {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: flex-end;
    z-index: 9999;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.product-selection-content {
    width: 100%;
    background: white;
    border-radius: 24px 24px 0 0;
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.modal-header {
    padding: 20px 20px 15px;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
}

.modal-close-bar {
    width: 40px;
    height: 4px;
    background: #d0d0d0;
    border-radius: 2px;
    margin: 0 auto 15px;
}

.modal-title {
    font-size: 20px;
    font-weight: 600;
    color: #002B55;
    margin: 0;
    text-align: center;
}

.product-search {
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.search-input {
    width: 100%;
    padding: 12px 16px 12px 42px;
    border: 2px solid #e0e8f0;
    border-radius: 12px;
    font-size: 16px;
    transition: border-color 0.3s ease;
    background: #f8f9fa;
}

.search-input:focus {
    outline: none;
    border-color: #009EE3;
    background: white;
}

.search-wrapper {
    position: relative;
}

.search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
}

.product-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px;
}

.product-item {
    background: white;
    border: 2px solid #f0f0f0;
    border-radius: 16px;
    min-height: 60px; /* Erhöhen für mehrzeilige Namen */
    padding: 12px 15px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-item:active {
    transform: scale(0.98);
    background: #f8f9fa;
}

.product-item.selected {
    border-color: #009EE3;
    background: linear-gradient(135deg, #e8f5ff, #f0f9ff);
}

.product-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.product-item-name {
    font-size: 16px;
    font-weight: 600;
    color: #002B55;
    margin-bottom: 4px;
    line-height: 1.3;
    min-height: auto;
    display: block;
}

.product-item-sku {
    font-size: 13px;
    color: #666;
}

.product-check {
    width: 24px;
    height: 24px;
    border: 2px solid #ddd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.product-item.selected .product-check {
    border-color: #009EE3;
    background: #009EE3;
}

.product-item.selected .product-check::after {
    content: '✓';
    color: white;
    font-size: 14px;
    font-weight: bold;
}

/* Verstecktes Select für Formular-Kompatibilität */
#leisten-dropdown {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}