/* Grundlegende Stile */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #c8feb4;
    margin: 0;
    padding: 20px;
}
h1 {
    text-align: center;
}

#periodic-table-container {
    overflow-x: auto;  /* Erlaube horizontales Scrollen (Wischen) */
    max-width: 100%;   /* Container ist maximal so breit wie der Bildschirm */

    /* WICHTIG: Verhindert, dass die Pfeile auf der Scrollbar liegen */
    -ms-overflow-style: none;  /* IE und Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Versteckt die Scrollbar in Webkit-Browsern (Chrome, Safari) */
#periodic-table-container::-webkit-scrollbar {
    display: none;
}


/* Das Haupt-Gitter des Periodensystems */
#periodic-table {
    display: grid;
    grid-template-columns: repeat(18, 56px);
    /* 1 Zeile Header, 7 Zeilen PSE, 1 Zeile Lanth/Act-Container */
    grid-template-rows: auto repeat(7, 56px) auto; 
    grid-gap: 4px;
    position: relative;
    /* margin-bottom ist nicht mehr nötig, da der Container jetzt im Grid ist */
}

/* Styling für den Gruppen-Header */
.group-header {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    align-self: end; /* Richtet Text am unteren Rand aus */
    padding-bottom: 5px;
}

/* Allgemeines Styling für jedes Element */
.element {
    position: relative;
    border: 1px solid #555;
    border-radius: 3px;
    background-color: #eee;
    text-decoration: none;
    color: #000;
    transition: transform 0.2s, z-index 0s 0.1s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 2px;
}
.element:hover {
    transform: scale(1.2);
    z-index: 100;
}

/* Positionierung und Styling der Texte im Element */
.element .number {
    position: absolute;
    top: 2px;
    left: 3px;
    font-size: 8px;
}
.element .symbol {
    font-size: 18px;
    font-weight: bold;
}
.element .name {
    font-size: 8px;
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 0;
    text-align: center;
    word-break: break-word;
}
.element .mass {
    font-size: 8px;
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    text-align: center;
}

/* Radioaktiv-Warnsymbol (Maximale Größe) */
.radioactive {
    /* Absolute Positionierung in der Ecke */
    position: absolute;
    top: 1px;
    right: 1px;
    z-index: 2;

    /* Der gelbe Kreis */
    width: 16px;
    height: 16px;
    background-color: #ffcc00; /* Warngelb */
    border-radius: 50%;        /* Macht es kreisrund */
    
    /* Zentrierung des Symbols */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Das schwarze Symbol */
    color: black;
    font-size: 24px;     /* Etwas größer als die Box für maximalen Fülleffekt */
    line-height: 0;      /* Eliminiert störende Zeilenabstände */
    padding-bottom: 2px; /* Ein kleiner 'Schubs' nach oben für die optische Mitte */
    
    cursor: help;
}

/* Farben für die Element-Kategorien */
.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: #91d1ff; }
.halogen { background-color: #ffff99; }
.edelgas { background-color: #c0ffff; }
.unbekannt { background-color: #e8e8e8; }


/* --- EXAKTE POSITIONIERUNG (mit korrekten Reihen) --- */
/* Alle grid-row Werte beginnen bei 2 wegen der neuen Header-Reihe */

/* Periode 1 */
#element-1 { grid-column: 1; grid-row: 2; }
#element-2 { grid-column: 18; grid-row: 2; }
/* Periode 2 */
#element-3 { grid-column: 1; grid-row: 3; }
#element-4 { grid-column: 2; grid-row: 3; }
#element-5 { grid-column: 13; grid-row: 3; }
#element-6 { grid-column: 14; grid-row: 3; }
#element-7 { grid-column: 15; grid-row: 3; }
#element-8 { grid-column: 16; grid-row: 3; }
#element-9 { grid-column: 17; grid-row: 3; }
#element-10 { grid-column: 18; grid-row: 3; }
/* Periode 3 */
#element-11 { grid-column: 1; grid-row: 4; }
#element-12 { grid-column: 2; grid-row: 4; }
#element-13 { grid-column: 13; grid-row: 4; }
#element-14 { grid-column: 14; grid-row: 4; }
#element-15 { grid-column: 15; grid-row: 4; }
#element-16 { grid-column: 16; grid-row: 4; }
#element-17 { grid-column: 17; grid-row: 4; }
#element-18 { grid-column: 18; grid-row: 4; }
/* Periode 4 */
#element-19 { grid-column: 1; grid-row: 5; }
#element-20 { grid-column: 2; grid-row: 5; }
#element-21 { grid-column: 3; grid-row: 5; }
#element-22 { grid-column: 4; grid-row: 5; }
#element-23 { grid-column: 5; grid-row: 5; }
#element-24 { grid-column: 6; grid-row: 5; }
#element-25 { grid-column: 7; grid-row: 5; }
#element-26 { grid-column: 8; grid-row: 5; }
#element-27 { grid-column: 9; grid-row: 5; }
#element-28 { grid-column: 10; grid-row: 5; }
#element-29 { grid-column: 11; grid-row: 5; }
#element-30 { grid-column: 12; grid-row: 5; }
#element-31 { grid-column: 13; grid-row: 5; }
#element-32 { grid-column: 14; grid-row: 5; }
#element-33 { grid-column: 15; grid-row: 5; }
#element-34 { grid-column: 16; grid-row: 5; }
#element-35 { grid-column: 17; grid-row: 5; }
#element-36 { grid-column: 18; grid-row: 5; }
/* Periode 5 */
#element-37 { grid-column: 1; grid-row: 6; }
#element-38 { grid-column: 2; grid-row: 6; }
#element-39 { grid-column: 3; grid-row: 6; }
#element-40 { grid-column: 4; grid-row: 6; }
#element-41 { grid-column: 5; grid-row: 6; }
#element-42 { grid-column: 6; grid-row: 6; }
#element-43 { grid-column: 7; grid-row: 6; }
#element-44 { grid-column: 8; grid-row: 6; }
#element-45 { grid-column: 9; grid-row: 6; }
#element-46 { grid-column: 10; grid-row: 6; }
#element-47 { grid-column: 11; grid-row: 6; }
#element-48 { grid-column: 12; grid-row: 6; }
#element-49 { grid-column: 13; grid-row: 6; }
#element-50 { grid-column: 14; grid-row: 6; }
#element-51 { grid-column: 15; grid-row: 6; }
#element-52 { grid-column: 16; grid-row: 6; }
#element-53 { grid-column: 17; grid-row: 6; }
#element-54 { grid-column: 18; grid-row: 6; }
/* Periode 6 */
#element-55 { grid-column: 1; grid-row: 7; }
#element-56 { grid-column: 2; grid-row: 7; }
.lanthanoid-placeholder { grid-column: 3; grid-row: 7; }
#element-72 { grid-column: 4; grid-row: 7; }
#element-73 { grid-column: 5; grid-row: 7; }
#element-74 { grid-column: 6; grid-row: 7; }
#element-75 { grid-column: 7; grid-row: 7; }
#element-76 { grid-column: 8; grid-row: 7; }
#element-77 { grid-column: 9; grid-row: 7; }
#element-78 { grid-column: 10; grid-row: 7; }
#element-79 { grid-column: 11; grid-row: 7; }
#element-80 { grid-column: 12; grid-row: 7; }
#element-81 { grid-column: 13; grid-row: 7; }
#element-82 { grid-column: 14; grid-row: 7; }
#element-83 { grid-column: 15; grid-row: 7; }
#element-84 { grid-column: 16; grid-row: 7; }
#element-85 { grid-column: 17; grid-row: 7; }
#element-86 { grid-column: 18; grid-row: 7; }
/* Periode 7 */
#element-87 { grid-column: 1; grid-row: 8; }
#element-88 { grid-column: 2; grid-row: 8; }
.actinoid-placeholder { grid-column: 3; grid-row: 8; }
#element-104 { grid-column: 4; grid-row: 8; }
#element-105 { grid-column: 5; grid-row: 8; }
#element-106 { grid-column: 6; grid-row: 8; }
#element-107 { grid-column: 7; grid-row: 8; }
#element-108 { grid-column: 8; grid-row: 8; }
#element-109 { grid-column: 9; grid-row: 8; }
#element-110 { grid-column: 10; grid-row: 8; }
#element-111 { grid-column: 11; grid-row: 8; }
#element-112 { grid-column: 12; grid-row: 8; }
#element-113 { grid-column: 13; grid-row: 8; }
#element-114 { grid-column: 14; grid-row: 8; }
#element-115 { grid-column: 15; grid-row: 8; }
#element-116 { grid-column: 16; grid-row: 8; }
#element-117 { grid-column: 17; grid-row: 8; }
#element-118 { grid-column: 18; grid-row: 8; }

/* --- LANTHANOIDE UND ACTINOIDE --- */
#lanthanoid-actinoid-container {
    /* NEU: Positioniert den Container im Haupt-Grid */
    grid-column: 3 / span 15; /* Beginnt Spalte 3, erstreckt sich über 15 Spalten */
    grid-row: 9; /* Platziert ihn in der 9. Zeile (nach den 7 Perioden) */

    margin-top: 20px; /* Behält den Abstand nach oben */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    /* margin-left/right: auto; sind entfernt, da die Positionierung vom Grid übernommen wird */
}
.series-block {
    display: flex;
    gap: 4px;
}
.series-label {
    margin: 10px 0 5px 0;
    font-size: 14px;
    font-weight: bold;
}
.series-block .element {
    width: 56px;
    height: 56px;
}

/* Platzhalter-Styling mit Pfeil */
.placeholder {
    position: relative;
    border: 1px dashed #aaa;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    color: #555;
    background-color: #f0f0f0;
}
.placeholder::after {
    content: '↓';
    position: absolute;
    bottom: -20px;
    font-size: 20px;
    color: #333;
}
.Kategorieee {display: inline-block; background-color: #91d1ff; color: #000;
padding: 5px 10px;}

/* =================================
   Fixierte Scroll-Pfeile
   ================================= */

#table-wrapper {
    position: relative; /* Der Ankerpunkt für die Pfeile */
    display: flex;      /* Ordnet Pfeile und Tabelle nebeneinander an */
    align-items: center; /* Zentriert die Pfeile vertikal */
    margin-left: auto;
    margin-right: auto;

    /* Begrenzt die Breite auf die sichtbare Breite des PSE */
    max-width: 1100px; 
}

.scroll-arrow {
    /* Pfeile standardmäßig verstecken (für Desktop) */
    display: none; 

    position: absolute; /* Klebt am Rand des #table-wrapper */
    z-index: 10;        /* Liegt über der Tabelle */

    /* Styling der Pfeil-Box */
    width: 35px;
    height: 35px;
    background-color: rgba(255, 255, 255, 0.7);
    border: 1px solid #ccc;
    border-radius: 50%;

    /* Zentriert den Pfeil (‹) in der Box */
    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 20px;
    font-weight: bold;
    color: #333;

    cursor: default; /* Zeigt, dass man hier nicht klicken kann */
    user-select: none; /* Text kann nicht markiert werden */

    /* leichter Schatten für 3D-Effekt */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); 
}

.scroll-arrow.left {
    left: 5px; /* Position am linken Rand */
}

.scroll-arrow.right {
    right: 5px; /* Position am rechten Rand */
}

/* * Media Query: Zeigt die Pfeile nur an, 
 * wenn der Bildschirm schmaler ist als das volle PSE 
 * (also auf Handys, Tablets und kleinen PC-Fenstern)
*/
@media (max-width: 1150px) {
    .scroll-arrow {
        display: flex; /* Pfeile einblenden */
    }

    #periodic-table-container {
         /* Sorgt dafür, dass die Tabelle leicht hinter den Pfeilen verschwindet */
        padding-left: 20px;
        padding-right: 20px;
    }
}