/* Failsafe für Zoom */
body, html {
    touch-action: auto;
    overflow: visible;
}/* Grundlegende Stile für die Detailseiten */

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #f8f9fa;
    color: #333;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px 40px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

header {
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 30px;
    padding-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header h1 {
    font-size: 3em;
    margin: 0;
    color: #222;
}

.back-link {
    text-decoration: none;
    color: #007bff;
    font-weight: bold;
    padding: 8px 12px;
    border-radius: 5px;
    transition: background-color 0.2s;
}
.back-link:hover {
    background-color: #e9ecef;
}

main {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

section h2 {
    font-size: 1.8em;
    border-bottom: 2px solid #007bff;
    padding-bottom: 10px;
    margin-bottom: 20px;
    color: #333;
}

/* Zusammenfassungs-Bereich mit Box und Eigenschaften */
.element-summary {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 30px;
    align-items: start;
}

/* Große Element-Box */
.element-display {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* Macht die Box quadratisch */
    border: 2px solid #555;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
}
/* Radioaktiv-Warnsymbol für Detailseiten */
.element-display .radioactive {
    position: absolute;
    /* Auf der Detailseite etwas mehr Abstand zum Rand, sieht besser aus */
    top: 10px;
    right: 10px;
    z-index: 2;

    width: 30px;  /* Größer als auf der Hauptseite */
    height: 30px;
    background-color: #ffcc00;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.3); /* Etwas dickerer Rand */
    
    display: flex;
    align-items: center;
    justify-content: center;

    color: black;
    font-size: 50px; /* Deutlich größeres Symbol */
    line-height: 0;
    padding-bottom: 4px; /* Angepasst für die optische Mitte bei dieser Größe */
    
    cursor: help;
}
.element-display .number {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 1.2em;
}
.element-display .symbol {
    font-size: 5em;
    font-weight: bold;
}
.element-display .name {
    font-size: 1.5em;
}
.element-display .mass {
    font-size: 1.1em;
    margin-top: 5px;
}

/* Box für die Eigenschaften-Liste */
.properties-box {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}
.properties-box h2 {
    border: none;
    margin-top: 0;
    padding-bottom: 15px;
    font-size: 1.5em;
    text-align: center;
}
.properties-box dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 20px;
    margin: 0;
}
.properties-box dt {
    font-weight: bold;
    color: #555;
}
.properties-box dd {
    margin: 0;
    text-align: right;
}

/* Beschreibungstext und Isotopenliste */
.description p, .isotopes-section p {
    font-size: 1.1em;
    margin-bottom: 1em;
}
.isotopes-section ul {
    font-size: 1.1em;
    list-style-position: inside;
}

/* Atommodell */
.atomic-model-section {
    text-align: center;
}
.atomic-model {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 30px auto;
}
.atomic-model.large { /* NEU */
    width: 350px;
    height: 350px;
}
.nucleus {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background-color: #555;
    color: white;
    border-radius: 50%;
    text-align: center;
    font-size: 11px;
    padding-top: 7px;
    box-sizing: border-box;
    z-index: 10;
}
.shell {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1.5px solid #aaa;
    border-radius: 50%;
    box-sizing: border-box;
}
.shell-1 { width: 80px; height: 80px; }
.shell-2 { width: 160px; height: 160px; }
.shell-3 { width: 240px; height: 240px; } /* NEU */
.shell-4 { width: 320px; height: 320px; } /* NEU */

.electron {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background-color: #007bff;
    border-radius: 50%;
    margin-top: -5px;
    margin-left: -5px;
}

/* Farben für die Element-Typen */
.alkalimetall { background-color: #ff6d6d; }
.erdalkalimetall { background-color: #ffdead; }
.übergangsmetall { background-color: #ffc0cb; }
.lanthanoide { background-color: #ffbfff; }
.actinoide { background-color: #ff99cc; }
.metall { background-color: #cccccc; }
.halbmetall { background-color: #c8b086; }
.nichtmetall { background-color: #a0ffa0; }
.halogen { background-color: #ffff99; }
.edelgas { background-color: #c0ffff; }
.unbekannt { background-color: #e8e8e8; }


/* =================================
   Handy-Optimierung (Media Query)
   ================================= */
@media (max-width: 700px) {

    .container {
        /* Weniger seitlichen Abstand auf dem Handy */
        padding: 15px;
    }

    header {
        /* Überschrift und Zurück-Link untereinander stapeln */
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .element-summary {
        /* Das ist der wichtigste Teil:
           Statt 1fr 2fr (nebeneinander) wird es 1fr (untereinander) */
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .properties-box dl {
        /* Auf sehr kleinen Handys Text linksbündig machen,
           statt rechtsbündig, da es sonst komisch aussieht */
        grid-template-columns: auto 1fr;
    }

    .properties-box dd {
        text-align: left;
    }

    .atomic-model.large {
        /* Das Atommodell auf Handys etwas kleiner machen, 
           damit es nicht über den Rand hinausragt */
        width: 300px;
        height: 300px;
    }
    
    .shell-4 { width: 280px; height: 280px; }
}