/* Speise- und Getränkekarte: getrennte HTML-Elemente für Name, Beschreibung,
   Preis (SEO.md Punkt 3) - genutzt im Frontend und in der Backend-Vorschau. */
.karte { max-width: 760px; margin: 0 auto; }
.karte-kategorie { font-family: var(--display, serif); font-weight: 800; font-size: clamp(1.3rem, 2.2vw, 1.8rem); margin: 2rem 0 .8rem; color: var(--rot, #f33d3c); }
.karte-kategorie:first-child { margin-top: 0; }
.karte-liste { list-style: none; margin: 0 0 1rem; padding: 0; }
.karte-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5rem; padding: .55rem 0; border-bottom: 1px dashed rgba(73, 3, 1, .18); }
.karte-name { font-weight: 600; }
.karte-allergene { font-weight: 400; opacity: .65; font-size: .68em; }
.karte-beschreibung { flex: 1 1 220px; font-size: .88em; opacity: .78; }
.karte-menge { font-size: .82em; opacity: .7; }
.karte-preis { margin-left: auto; font-weight: 600; white-space: nowrap; }
.karte-literpreis { opacity: .6; font-weight: 400; }
.karte-legende { margin-top: 1.2rem; font-size: .78rem; opacity: .7; }

/* Admin-Editor: zwei Spalten, Textfeld | Vorschau */
.whobert-karte-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.whobert-karte-editor textarea { font-family: Consolas, Monaco, monospace; font-size: 13px; }
.whobert-preview-frame { background: var(--creme, #FFF5EF); color: var(--merlot, #490301); padding: 1.2rem 1.4rem; border-radius: 10px; border: 1px solid #ddd; max-height: 640px; overflow: auto; }
.whobert-karte-errors ul { margin: .5rem 0 0; padding-left: 1.2rem; }
@media (max-width: 900px) { .whobert-karte-editor { grid-template-columns: 1fr; } }