#abc-liste h1 {
    text-align: center;
    margin-top: 2em;
    margin-bottom: 1em;
    font-size: clamp(1.6rem, 5vw, 2rem);    
}
/* --- REGISTER EINTRÄGE --- */
#abc-liste summary {
    list-style: none;
    cursor: pointer;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    font-weight: normal;
    /* Damit das (+) immer in der Zeile bleibt und nicht allein umbricht */
    display: block; 
}
#abc-liste summary::after {
    content: "(+)";
    font-family: monospace;
    color: var(--system-color);
    margin-left: 10px;
    /* Verhindert, dass das Icon bei Zeilenumbrüchen allein in der neuen Zeile steht */
    display: inline-block; 
    white-space: nowrap;
}
#abc-liste summary:hover {color:var(--system-color);}

#abc-liste summary::-webkit-details-marker {
    display: none;
}
#abc-liste details[open] summary::after {
    content: "(-)";
}
/* --- KLAPP-INHALT --- */
#abc-liste .details-content {
    /* Die Einrückung für den gesamten Block */
    padding-left: 1.5em;     
    padding-bottom: 20px;    
    /* Optional: Eine ganz feine vertikale Linie, die zeigt, woher man kommt */
    border-left: 1px solid var(--system-dark);    
    margin: 1rem .5rem .5rem 2rem;
}
#abc-liste .details-content p {
    font-style: italic;
    color: var(--system-dark);
    margin-bottom: 12px;
    line-height: 1.4;
    padding-left: 0; 
}
#abc-liste ul {
    list-style-type: none;
    padding: 0;
    margin: 15px 0 0 0;
}
#abc-liste li {
    margin-top: 0.7em;
    padding-left: 0;
}
/* --- MAHJONGG LEISTE (OBEN) --- */

.abcleiste {
    margin:2em 0 3em 0;
}
.abcleiste ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}
/* Hier die 50%-Linie für die Mahjongg-Leiste entfernen, falls sie dort nicht sein soll */
.abcleiste ul::before { display: none; } 

.abcleiste li {
    display: inline-block;
    margin: 4px;
}
.abcleiste a {
    display: block;
    padding: 6px;
    width: 2.2em; /* Etwas Puffer für breitere Buchstaben wie 'W' */
    text-align: center;
    text-decoration: none;
    background-color: white;
    color: var(--system-color); /* Konsistentes h-ref Rot */
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 2px 2px 4px rgba(100, 100, 100, 0.4);
    transition: all 0.15s ease-out;
}
.abcleiste a:hover {
    box-shadow: 0px 4px 8px rgba(100, 100, 100, 0.6);
    transform: translateY(-2px);
    background-color: #fcfcfc;
}
.abcleiste a:focus {
    background-color: var(--system-light);
    color: var(--system-color);
    
    /* Setzt den roten 3px Rand (der Platz ist bereits durch Margin/Border reserviert) */
    border: var(--border-width) solid var(--system-color);    
    outline: none; /* Entfernt Browser-Outline */
}
#abc-liste details {
    border: 1px solid transparent; /* Platzhalter, damit beim Fokus nichts wackelt */
    padding: 4px; /* Gleiches Padding wie im Fokus-Zustand */
    transition: all 0.2s ease-out; /* Macht das "Springen" zu einem sanften Gleiten */
}
#abc-liste details:focus-within {
    background-color: var(--system-very-light);        
    border-radius: 4px;
    padding:4px;
}
/* Optimierung für die Listen in den Details-Boxen */
.details-content ul li {
    line-height: 1.4; /* Mehr Zeilenabstand für bessere Lesbarkeit */
    margin-bottom: 0.5em;
}



/* Speziell für mobile Geräte (Smartphones) */
@media (max-width: 600px) {
    .details-content ul li a {
        display: inline-block; /* Macht den Link zu einem Block-Element */
        padding: 8px 4px;      /* Vergrößert die Klickfläche vertikal und horizontal */
        margin: 2px 0;         /* Schafft Abstand zwischen den "Knöpfen" */
        background-color: #f9f9f9; /* Optional: Dezenter Hintergrund für bessere Sichtbarkeit */
        border-radius: 4px;
        text-decoration: none;
        border: 1px solid #ddd;
    }
    .hide-on-mobile {
    display:none;
}

}
.space2em {
    margin:2em 0;
}
#abcnav {
  margin:2em 0 3em 0;  
}

details#abcnav {
    position:relative;
text-align:center;
background: var(--system-very-light);
border:1px solid black;
color:var(--system-color);
z-index:200;
}
#abcnav details summary {
    padding:1em;
    margin:0;
    background:white;
}