/* Grundlayout */
:root {
    --gap: 20px;
}



.wrapper {
    display: flex;
    gap: var(--gap);
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* Eine einzelne Kreisfläche */
.circle {
    --size: 240px;
    /* Standardgröße - kann pro Kreis überschrieben werden */
    --bg: lab(65 0.01 0 / 0.25);
    /* Standardfarbe - kann pro Kreis überschrieben werden */
    border: 1px solid #f996df;


    width: var(--size);
    height: var(--size);
    min-width: var(--size);
    min-height: var(--size);
    border-radius: 50%;
    background: var(--bg);
    display: grid;
    place-items: center;
    /* box-shadow: 0 6px 18px rgba(20, 20, 50, 0.08); */
    text-align: center;
    padding: 12px;
    transition: transform .18s ease, box-shadow .18s ease;
}

.circle:hover {
    /* transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(20, 20, 50, 0.12); */
}

/* Inhalt innerhalb des Kreises */
.circle .num {
    color: black;
    font-size: var(--font-size-8);
    line-height: var(--zab-8);
    margin-bottom: 6px;
}

.circle-text {
    line-height: var(--zab-8);
    font-size: var(--font-size-8);
}

/* Hier definierst du die individuelle Grösse und Farbe pro Kreis.
       Beispiel: --size: 140px; --bg: #ff7b72; */
.circle--1 {
    background-color: white;
    --size: 220px;
    /* --bg: #ff7b72; */
}

.circle--2 {
    background-color: hsla(187, 100%, 93%, 1);
    --size: 220px;
         margin-top: 60px;

    /* --bg: #f59e0b; */
}

.circle--3 {
     background-color: #fff3e0;
    --size: 280px;
     margin-top: 40px;
    /* --bg: #10b981; */
}

.circle--4 {
    background-color: hsla(231, 80%, 93%, 1);
    --size: 200px;
    /* --bg: #3b82f6; */
}

.circle--5 {
     background-color: #c8e6c9;
          margin-top: 100px;

    --size: 240px;
    /* --bg: #8b5cf6; */
}

/* Optional: beschriftung unter den Kreisflächen */
.caption {
    text-align: center;
    margin-top: 8px;
    color: #444;
}

/* Responsiv: bei schmalerem Display werden die Kreise kleiner und wandern in mehrere Reihen */
@media (max-width:720px) {
    .wrapper {
        gap: 14px;
    }

    .circle {
        --size: 28vw;
    }
}






/* grid template */
/* Container, der das Grid definiert */
.wochenplan {
    /* WICHTIG: Definiert den Container als Grid */
    display: grid;

    /* 1. Definiert die Spalten (Grid-Template-Columns) */
    /* 8 Spalten insgesamt: 
       - 1. Spalte (Zeit): Auto (nimmt so viel Platz wie nötig für den längsten String)
       - 2. bis 8. Spalte (Tage): 1fr (verteilen den restlichen Platz gleichmäßig) */
    grid-template-columns: auto repeat(7, 1fr);

    /* 2. Definiert die Zeilen (Grid-Template-Rows) */
    /* 6 Zeilen insgesamt: 
       - 1. Zeile (Kopfzeile): Auto
       - 2. bis 6. Zeile (Zeitspannen): 1fr (können auch auf 'auto' gesetzt werden, um sich dem Inhalt anzupassen) */
    grid-template-rows: auto repeat(5, 1fr);

    /* Optional: Fügt einen kleinen Abstand zwischen den Zellen hinzu */
    gap: 4px;

    /* Grundlegendes Styling */
    width: 100%;
    max-width: 1000px;
    /* Beispiel-Maximalbreite */
    /* border: 1px solid #ccc; */
    line-height: var(--zab-6);
    font-size: var(--font-size-6);

}

/* Stil für alle Grid-Elemente */
.wochenplan>div {
    padding: 8px;
    border: 1px solid #f996df;
    /* Dient als Zellbegrenzung, kann später entfernt werden */
    text-align: center;
    overflow: hidden;
    /* Verhindert Überlauf bei zu langem Text */
}

/* Stil für die Kopfzeile (Tage) */
.header {
    background-color: ;
    color: black;
    font-weight: bold;
    text-transform: uppercase;
}

/* Stil für die Zeitspalten-Überschrift (erste Zelle) */
.header-corner {
    border: none;

}

/* Stil für die Zeitspalten (erste Spalte der Daten) */
.zeit {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.two-rows {
    grid-row: 4 / span 2;

}

/* Beispiel-Stil für spezifische Inhalte */
.inhalt {
    background-color: white;
    /* Setzt das Padding auf Null, damit das innere Element den Platz kontrolliert */
    padding: 0;

    /* Stellt sicher, dass der Inhalt vertikal und horizontal zentriert ist */
    display: flex;
    justify-content: center;
    /* Horizontale Zentrierung */
    align-items: center;
    /* Vertikale Zentrierung */

    /* Optional: Fügt eine minimale Höhe hinzu, falls Zellen leer sind, damit das Layout stabil bleibt */
    min-height: 75px;
    border-radius: 4px;
}

.gastrecht {
    grid-column: 3 / span 2;
}

.suppentopf {
    grid-column: 2 / span 4;
    border-radius: 10px;
    border-color: #10b981;
    border-width: 4px;
}



.salon-midi {
    background-color: hsla(187, 100%, 93%, 1);
    /* Hellblau */

}

.salon-midi-50 {
    background-color: white;
    /* Hellblau */

}


.aperitivo {
    background-color: #fff3e0;
    /* Hellorange */
}

.ausklang {
     background-color: hsla(231, 80%, 93%, 1);
        /* Helllila */
}

.ausklang-50 {
        background-color: white;
    /* Helllila */
}

.abendtisch {
    background-color: #c8e6c9;
    /* Hellgrün */
}



/* Tabelle */

.preis-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 36px;
}

.preis-grid {
    display: grid;
    grid-template-columns: 8fr 5fr;
    gap: 0 4px;
    width: 100%;
    max-width: 800px;
    border-collapse: collapse;
    /* Für einen tabellarischen Look */
    font-size: var(--font-size-7);
    line-height: var(--zab-7);
    color: black;
    margin-block-end: var(--zab-9);
}

/* ALLGEMEINER STIL FÜR ALLE ZELLEN */

.tab-header {
    color: red;
}
.preis-grid>div {
    padding-top: 4px;
    padding-bottom: 8px;
    border-top: 1px solid black;
        background-color: #e6f7ff;

}

.nicht-nik {
    background-color: hsla(187, 100%, 93%, 1);
}


.kuechenbrett {
    display: grid;
    grid-template-columns: 8fr 8fr 5fr 5fr;
    gap: 4px 4px;
    width: 100%;
    max-width: 800px;
    border-collapse: collapse;
    /* Für einen tabellarischen Look */
    font-size: var(--font-size-7);
    line-height: var(--zab-7);
    color: black;
}

/* ALLGEMEINER STIL FÜR ALLE ZELLEN */
.kuechenbrett>div {
    padding: 4px;
    padding-bottom: 8px;
    background-color: #c8e6c9;
        border: 1px solid #f996df;
        border-radius: 4px;
    /* border-top: 1px solid black; */
}

.nicht-nik {
    background-color: hsla(187, 100%, 93%, 1);
}








/* DATEN STYLING */


/* PREIS STYLING */
.preis {
    text-align: center;
    
}

.zeitraum {
    padding-right: 4px;
}

.preis-grid .leer {
    height: var(--line-height-7);
}

.last {
    border-bottom: 1px solid black;
}

.span-two {
    grid-column: span 2;
}

.grond {
    background-color: rgb(246, 246, 246);
}

.pitschen {
    background-color: rgb(238, 238, 238);
}

.raum-typ {
    padding-right: 4px;
}


/* Definiere die Keyframes ganz oben oder in einem dedizierten Block */
@keyframes farbton-rotation {
    0% {
        background-color: hsla(0, 100%, 50%, 0.1);
    }

    50% {
        background-color: hsla(179, 100%, 50%, 0.1);
    }

    100% {
        background-color: hsla(359, 100%, 50%, 0.1);
    }
}



/* image Block  */

.image-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  max-width: 1000px;
}

/* Beide Bilder liegen im gleichen Grid-Track */
.image-grid img {
  height: auto;
  object-fit: cover;
}

/* Breiten steuerbar */
.left {
    position: relative;
  width: 100%;
  justify-self: start;   /* links */
}

.right {
    position: relative;
  width: 120%;
  justify-self: end;     /* rechts */
}


/* Wende die Animation auf dein Element an (z.B. ein div im Grid) */
.farbwechsler-zyklus {
    /* ... andere Stile wie Breite, Höhe, border-radius ... */

    animation-name: farbton-rotation;
    animation-duration: 50s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}