:root {
    color-scheme: light;
    --hintergrund: #f5efe6;
    --flaeche: #fffdf9;
    --akzent: #7a4b2a;
    --akzent-dunkel: #4f2d18;
    --text: #2f241d;
    --rand: #dbc7b5;
    --fehler: #b04a37;
    --erfolg: #356b40;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    color: var(--text);
}

h1,
h2,
h3 {
    margin-top: 0;
}

label {
    display: block;
    font-weight: 700;
    margin-bottom: 6px;
}

input,
select,
button,
a,
a.knopf {
    font: inherit;
}

input,
select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--rand);
    background: #fff;
}

button,
a.knopf {
    border: 0;
    border-radius: 999px;
    padding: 11px 18px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.aktionen {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.karte {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(79, 45, 24, 0.08);
}

.primaer {
    background: var(--akzent);
    color: #fff;
}

.sekundaer,
.knopf {
    background: #eadbca;
    color: var(--akzent-dunkel);
}

.fehler {
    background: #f8e8e5;
    color: var(--fehler);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 18px;
}

body.page-barista {
    background: linear-gradient(180deg, #efe4d5 0%, var(--hintergrund) 100%);
}

.page-barista .seite {
    max-width: 1320px;
    margin: 0 auto;
    padding: 18px 18px 24px;
}

.page-barista .kopf {
    margin-bottom: 14px;
}

.page-barista .karte,
.page-barista .rezeptliste article {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(79, 45, 24, 0.08);
}

.page-barista .karte {
    padding: 18px;
    margin-bottom: 14px;
}

.page-barista .aktionen {
    align-items: end;
}

.page-barista .status {
    padding: 12px 14px;
    border-radius: 14px;
    margin-bottom: 14px;
    font-weight: 700;
}

.page-barista .status.success {
    background: #e5f2e6;
    color: var(--erfolg);
}

.page-barista .status.error {
    background: #f8e8e5;
    color: var(--fehler);
}

.page-barista .grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.9fr) minmax(220px, 0.7fr);
    gap: 14px;
}

.page-barista .vorrat dd {
    margin: 0 0 8px;
    font-size: 1.2rem;
    font-weight: 700;
}

.page-barista .vorrat dt {
    color: #6d5847;
}

.page-barista .rezeptliste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.page-barista .rezeptliste article {
    padding: 14px;
}

.page-barista .rezeptliste h3 {
    margin-bottom: 8px;
    font-size: 1rem;
}

.page-barista .rezeptliste li {
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.page-barista .maschinenbereich {
    display: grid;
    grid-template-columns: minmax(420px, 1.15fr) minmax(280px, 0.85fr);
    gap: 14px;
    align-items: start;
    margin-bottom: 14px;
}

.page-barista .maschine {
    display: grid;
    gap: 14px;
    background: linear-gradient(180deg, #fefbf6 0%, #f4e9dc 100%);
}

.page-barista .statuszeile {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 12px;
}

.page-barista .statuskarte {
    padding: 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid #e2d0be;
}

.page-barista .statuskarte p {
    margin: 0 0 8px;
    font-size: 0.92rem;
    color: #6d5847;
}

.page-barista .statuskarte strong {
    display: block;
    margin-bottom: 8px;
    font-size: 1.05rem;
}

.page-barista .balken {
    height: 14px;
    border-radius: 999px;
    background: #eadfd1;
    overflow: hidden;
}

.page-barista .balken > span {
    display: block;
    height: 100%;
    border-radius: 999px;
}

.page-barista .balken-wasser > span {
    background: linear-gradient(90deg, #7cc8ee 0%, #3d92cb 100%);
}

.page-barista .balken-bohnen > span {
    background: linear-gradient(90deg, #936242 0%, #5a3824 100%);
}

.page-barista .balken-milch > span {
    background: linear-gradient(90deg, #fffdf7 0%, #d9d0c6 100%);
}

.page-barista .maschinenpanel {
    padding: 16px;
    border-radius: 18px;
    border: 1px solid #e2d0be;
    background: rgba(255, 255, 255, 0.6);
}

.page-barista .maschineninfo {
    display: grid;
    grid-template-columns: minmax(100px, 0.8fr) minmax(120px, 1.2fr);
    gap: 14px;
    align-items: center;
}

.page-barista .tasseblock {
    display: flex;
    justify-content: center;
    align-items: center;
}

.page-barista .getraenkbild {
    width: 100%;
    max-width: 120px;
    max-height: 120px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 8px 16px rgba(79, 45, 24, 0.12));
}

.page-barista .rezeptfakten {
    display: grid;
    gap: 10px;
}

.page-barista .fakt {
    padding: 10px 12px;
    border-radius: 14px;
    background: #f8f1e7;
    border: 1px solid #dcc8b3;
}

.page-barista .fakt span {
    display: block;
    font-size: 0.88rem;
    color: #6d5847;
    margin-bottom: 4px;
}

.page-barista .fakt strong {
    display: block;
    font-size: 1rem;
}

.page-barista .trester {
    display: grid;
    gap: 12px;
}

.page-barista .tresterbox {
    padding: 16px;
    border-radius: 18px;
    background: linear-gradient(180deg, #fcf6ef 0%, #efe1d1 100%);
    border: 1px solid #dcc8b3;
}

.page-barista .tresterkopf {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
    margin-bottom: 12px;
}

.page-barista .tresterkopf p {
    margin: 0;
}

.page-barista .muellbalken {
    height: 18px;
    border-radius: 999px;
    background: #eadfd1;
    overflow: hidden;
    margin-bottom: 10px;
}

.page-barista .muellbalken span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #8a5a3b 0%, #603822 100%);
}

.page-barista ul {
    padding-left: 18px;
    margin-bottom: 0;
}

.page-barista .kopf p,
.page-barista .trester p {
    margin: 0 0 6px;
}

body.page-rezepte-index,
body.page-rezepte-anlegen,
body.page-rezepte-update,
body.page-rezepte-loeschen {
    background: #f4ede4;
}

.page-rezepte-index main,
.page-rezepte-anlegen main,
.page-rezepte-update main,
.page-rezepte-loeschen main {
    max-width: 1000px;
    margin: 0 auto;
    padding: 32px 20px;
}

.page-rezepte-index .kopf {
    margin-bottom: 24px;
}

.page-rezepte-index a,
.page-rezepte-index .knopf,
.page-rezepte-anlegen a,
.page-rezepte-update a,
.page-rezepte-loeschen a {
    color: #7a4b2a;
}

.page-rezepte-index table {
    width: 100%;
    border-collapse: collapse;
    background: #fffdf9;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(79, 45, 24, 0.08);
}

.page-rezepte-index th,
.page-rezepte-index td {
    padding: 14px;
    border-bottom: 1px solid #e7d7c8;
    text-align: left;
    vertical-align: top;
}

.page-rezepte-index th {
    background: #f0e3d5;
}

.page-rezepte-index .leer {
    padding: 24px;
    background: #fffdf9;
    border-radius: 18px;
}

.page-rezepte-anlegen main,
.page-rezepte-update main,
.page-rezepte-loeschen main {
    max-width: 760px;
}

.page-rezepte-anlegen form,
.page-rezepte-update form,
.page-rezepte-loeschen .karte {
    background: #fffdf9;
    padding: 24px;
    border-radius: 18px;
    box-shadow: 0 10px 25px rgba(79, 45, 24, 0.08);
}

.page-rezepte-anlegen input,
.page-rezepte-update input {
    margin-bottom: 16px;
}

.page-rezepte-anlegen button,
.page-rezepte-update button {
    background: #7a4b2a;
    color: #fff;
}

.page-rezepte-anlegen .links {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.page-rezepte-loeschen .aktionen {
    margin-top: 18px;
}

.page-rezepte-loeschen button {
    background: #b04a37;
    color: #fff;
}

@media (max-width: 860px) {
    .page-barista .grid,
    .page-barista .maschinenbereich,
    .page-barista .maschineninfo {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .page-rezepte-index table,
    .page-rezepte-index thead,
    .page-rezepte-index tbody,
    .page-rezepte-index tr,
    .page-rezepte-index th,
    .page-rezepte-index td {
        display: block;
    }

    .page-rezepte-index thead {
        display: none;
    }

    .page-rezepte-index tr {
        margin-bottom: 16px;
        background: #fffdf9;
        border-radius: 18px;
        overflow: hidden;
    }

    .page-rezepte-index td {
        border-bottom: 1px solid #eee0d1;
    }
}

@media (max-width: 640px) {
    .page-barista .seite {
        padding: 20px 14px 28px;
    }

    .page-barista .statuszeile,
    .page-barista .maschineninfo {
        grid-template-columns: 1fr;
    }
}