/* Farbdefinitionen im W3.CSS-Gelb-Stil */
:root {
    --yellow-dark: #fdd835;   /* Header, Footer, Hintergrund */
    --yellow-main: #ffeb3b;   /* Spalten */
    --yellow-accent: #fbc02d; /* Buttons / Hover */
    --text-dark: #222;
}

/* Gesamter Seitenhintergrund */
body {
    background-color: var(--yellow-dark);
    color: var(--text-dark);
    font-family: Arial, sans-serif;
}

/* Header * /
.custom-header {
    background-color: var(--yellow-dark);
    color: black;
    padding: 16px;
}
*/

/* Header als Flex-Container */
.custom-header {
    display: flex;
    align-items: center; /* vertikal zentriert */
    gap: 16px;           /* Abstand zwischen Logo und Text */
}

/* Logo optional sauber skalieren */
.logo {
    width: 128px;
    height: auto;
}

/* Spalten */
.custom-column {
    background-color: var(--yellow-main);
    padding: 16px;
    border: 1px solid #f9a825;
    min-height: 200px;
}

/* Buttons * /
.custom-button {
    background-color: var(--yellow-accent);
    color: black;
    margin-top: 10px;
}

.custom-button:hover {
    background-color: #f57f17;
    color: white;
}
*/

/* 3D-Button mit abgerundeten Ecken */
.custom-button {
    display: block;
    width: 100%;

    text-decoration: none;  /* Unterstreichung entfernen */
    text-align: center;

    background-color: var(--yellow-accent);
    color: black;
    margin-top: 10px;

    border: none;
    border-radius: 8px;
    padding: 10px 16px;

    box-shadow: 0 4px 0 #c9a000;
    transition: all 0.1s ease-in-out;

    text-align: center; /* Text mittig */
}

/* Hover: leicht heller */
.custom-button:hover {
    background-color: #fbc02d;
}

/* Klick-Effekt (Button wird "gedrückt") */
.custom-button:active {
    box-shadow: 0 2px 0 #c9a000;
    transform: translateY(2px);
}

/* Trennlinie im gleichen Stil wie Spaltenrahmen */
hr {
    border: none;
    border-top: 1px solid #f9a825; /* gleiche Farbe wie Spaltenrahmen */
    margin: 16px 0;
}

/* Footer */
.custom-footer {
    background-color: var(--yellow-dark);
    color: black;
    padding: 12px;
    text-align: center;
}