body        {background-color: #FAD9A7; color: #308dcf;}
a:link      {color: #308dcf;}
a:visited   {color: #308dcf;}

div#seite           {   display: block; margin: auto; text-align: center;}
div#menue           {}
div#inhalt          {}
    div#tafel       {}
    img#tafel       {   width: 100%; max-width: 500px;}
    div#steuerung   {   display: flex; justify-content: center; flex-wrap: wrap;
                        font-size: 6em;}
        div#zurueck     {margin: 6px; padding: 6px; border: #9f4834 solid 2px;}
        div#play        {margin: 6px; padding: 6px; border: #9f4834 solid 2px;}
        div#vor         {margin: 6px; padding: 6px; border: #9f4834 solid 2px;}
div#impressum           {}


nav.mobil ul    {   display: flex; justify-content: center; flex-wrap: wrap; 
                            padding: 0;             /* Entfernt den Standard-Einzug vom Browser */
                            margin: 10px 0;         /* Abstand nach oben/unten */
                            gap: 10px;              /* Erzeugt einen gleichmäßigen Abstand zwischen den Boxen */}

/* Standard-Pfeil vom Browser verstecken */
nav.mobil summary {
    list-style: none; 
    display: flex; justify-content: center; flex-wrap: wrap;
    font-size: 2.2em; cursor: pointer; position: relative;
}

/* Chrome/Safari spezifisch: Standard-Pfeil entfernen */
nav.mobil summary::-webkit-details-marker {
    display: none;
}

/* Das eigentliche Icon einfügen */
nav.mobil summary::before {
    content: "\2630"; /* Korrekter Hex-Code für dicken Pfeil nach unten */
    margin-right: 10px;
}

/* Hover-Effekt */
nav.mobil summary:hover {
    text-shadow: 2px 2px 5px white;
}

/* Wenn das Menü offen ist: Pfeil ändern (optional) */
nav.mobil details[open] summary::before {
    content: "\2630"; /* Hier z.B. das Hamburger-Icon ☰ wenn offen */
}

/* Liste stylen */
nav.mobil li {
    margin-bottom: 4px; padding: 4px; list-style: none; border: 1px solid black; border-radius: 5px;
}