/* ==========================================================================
   mittagsmenue.info — Gestaltung
   Farben als Merkmale, damit heller und dunkler Modus aus einer Quelle kommen.
   ========================================================================== */
/* Die Arbeitsschriften liegen im Paket (assets/fonts) — kein Besucher, kein
   Wirt lädt etwas von Google. Latein und Latein-erweitert, so beschnitten,
   wie Google sie ausliefert; Bricolage Grotesque trägt seine Spanne 600–800
   in einer Datei. Die Tabelle dazu: App\Core\Schriften::WOFF2. */
@font-face{font-family:'Figtree';font-style:italic;font-weight:400;font-display:swap;
  src:url(fonts/figtree-400-kursiv-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:italic;font-weight:400;font-display:swap;
  src:url(fonts/figtree-400-kursiv.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/figtree-400-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/figtree-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/figtree-500-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/figtree-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/figtree-600-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/figtree-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/figtree-700-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/figtree-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-weight:800;font-display:swap;
  src:url(fonts/figtree-800-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:normal;font-weight:800;font-display:swap;
  src:url(fonts/figtree-800.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/bricolage-600-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/bricolage-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;
  src:url(fonts/bricolage-800-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;
  src:url(fonts/bricolage-800.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url(fonts/instrument-400-kursiv-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url(fonts/instrument-400-kursiv.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/instrument-400-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/instrument-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/dmmono-400-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/dmmono-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Karla';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/karla-400-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Karla';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/karla-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Karla';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/karla-600-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Karla';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/karla-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Karla';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/karla-700-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Karla';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/karla-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}


:root{
  --grund:#F3F4EF; --flaeche:#FFFFFF; --flaeche-2:#ECEEE6; --flaeche-3:#E3E6DB;
  /* Nur für den Zeilenwechsel in Listen: gerade so sichtbar, dass die Zeilen
     auseinanderfallen, und zu leise, um als Hervorhebung gelesen zu werden. */
  --zebra:#F7F8F4;
  --tinte:#14170F; --tinte-2:#525A46; --tinte-3:#646B58;
  --linie:#E2E4DA; --linie-2:#C9CDBD;
  --akzent:#E8A421; --akzent-tief:#D08F11; --akzent-auf:#2B1D00; --akzent-schrift:#8A5800; --akzent-sanft:#FBEFD6;
  --tief:#0D0D0D; --tief-2:#1F1F1F;
  --gruen:#3A7141; --gruen-sanft:#E5EFE4;
  --rot:#B23A20; --rot-sanft:#F8E7E1;
  --s1:0 1px 2px rgba(20,23,15,.06);
  --s2:0 2px 4px rgba(20,23,15,.04),0 12px 28px -14px rgba(20,23,15,.24);
  --s3:0 4px 10px rgba(20,23,15,.06),0 28px 56px -24px rgba(20,23,15,.34);
  /* Eckig, überall: Die Seite arbeitet mit geraden Kanten und feinen
     Linien — runde Rahmen waren der einzige weiche Zug darin. Rund bleibt
     nur, was wirklich ein Kreis oder eine Pille ist. */
  --r-s:0; --r-m:0; --r-l:0;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    /* Schwarz, nicht dunkelgrün: Der Grünton ist die Handschrift der
       hellen Seite. Im Dunkeln legte er sich als Schleier über jede
       Fläche — Kalenderblätter, Bänder, Kästen —, und die Seite wirkte
       eingefärbt statt ruhig. Also neutrale Schwarztöne; Gold bleibt der
       Akzent, Grün und Rot bleiben Zeichen in der Schrift. */
    --grund:#0B0B0B; --flaeche:#141414; --flaeche-2:#1C1C1C; --flaeche-3:#252525;
    --zebra:#161616;
    --tinte:#EDEDEA; --tinte-2:#B3B3AE; --tinte-3:#93938E;
    --linie:#262626; --linie-2:#383838;
    --akzent:#F2B546; --akzent-tief:#FFC763; --akzent-auf:#2B1D00; --akzent-schrift:#F2B546; --akzent-sanft:#33280F;
    --tief:#080808; --tief-2:#1A1A1A;
    --gruen:#7FBE88; --gruen-sanft:#1B1B1B;
    --rot:#DF7E64; --rot-sanft:#251715;
    --s1:0 1px 2px rgba(0,0,0,.5);
    --s2:0 2px 4px rgba(0,0,0,.4),0 12px 28px -14px rgba(0,0,0,.8);
    --s3:0 4px 10px rgba(0,0,0,.4),0 28px 56px -24px rgba(0,0,0,.9);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --grund:#0B0B0B; --flaeche:#141414; --flaeche-2:#1C1C1C; --flaeche-3:#252525;
  --zebra:#161616;
  --tinte:#EDEDEA; --tinte-2:#B3B3AE; --tinte-3:#93938E;
  --linie:#262626; --linie-2:#383838;
  --akzent:#F2B546; --akzent-tief:#FFC763; --akzent-auf:#2B1D00; --akzent-schrift:#F2B546; --akzent-sanft:#33280F;
  --tief:#080808; --tief-2:#1A1A1A;
  --gruen:#7FBE88; --gruen-sanft:#1B1B1B;
  --rot:#DF7E64; --rot-sanft:#251715;
  --s1:0 1px 2px rgba(0,0,0,.5);
  --s2:0 2px 4px rgba(0,0,0,.4),0 12px 28px -14px rgba(0,0,0,.8);
  --s3:0 4px 10px rgba(0,0,0,.4),0 28px 56px -24px rgba(0,0,0,.9);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--grund);color:var(--tinte);
  font-family:Figtree,ui-sans-serif,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* Feines Korn, damit die Fläche nicht tot wirkt */
body::before{
  content:"";position:fixed;inset:-20%;pointer-events:none;z-index:0;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] body::before{mix-blend-mode:screen;opacity:.045}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body::before{mix-blend-mode:screen;opacity:.045}}

h1,h2{font-family:"Bricolage Grotesque",Figtree,sans-serif;margin:0;text-wrap:balance;
  letter-spacing:-.025em;font-weight:800}
/* Kleine Überschriften in der Grundschrift: die Hausschrift ist bei 13 Pixel
   und engem Satz schwer zu lesen. */
h3,h4{font-family:inherit;margin:0;text-wrap:balance;letter-spacing:-.005em;font-weight:700}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2.5px solid var(--akzent);outline-offset:2px;border-radius:0}
img{max-width:100%;height:auto}
/* Ein eigenes display schlägt sonst das hidden-Merkmal — dann stehen
   Knöpfe da, die längst weg sein sollten. */
[hidden]{display:none!important}
svg.ic{width:1em;height:1em;display:block;flex:0 0 auto;stroke-width:1.7;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.ic--gross{font-size:26px;stroke-width:1.4}
.ic--herz{color:var(--rot);fill:currentColor}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;letter-spacing:.005em}
/* Nur noch dort echte Schreibmaschine, wo es technisch sein soll */
.tech{font-family:"DM Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.leise{color:var(--tinte-3)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ---------------------------------------------------------------- Grundraster */
.inhalt{max-width:660px;margin:0 auto;padding:0 16px 60px;position:relative;z-index:1}
.inhalt--voll{max-width:620px;padding:0 0 60px}
.schmal{max-width:420px;margin:0 auto;padding:40px 16px 60px;position:relative;z-index:1}

/* ---------------------------------------------------------------- Kopfleiste */
.kopfleiste{
  position:sticky;top:0;z-index:50;border-bottom:1px solid var(--linie);
  background:color-mix(in srgb,var(--grund) 84%,transparent);
  backdrop-filter:blur(14px) saturate(1.6);-webkit-backdrop-filter:blur(14px) saturate(1.6);
}
.kopfleiste-in{max-width:660px;margin:0 auto;padding:11px 16px;display:flex;align-items:center;gap:14px}
.marke{display:flex;align-items:center;gap:9px;text-decoration:none;flex:0 0 auto}
.marke--mitte{justify-content:center;margin-bottom:26px}
.marke--klein .marke-name{font-size:14px}
.marke-zeichen{
  width:30px;height:30px;flex:0 0 auto;display:block;line-height:0;
  filter:drop-shadow(0 2px 6px rgba(20,23,15,.22));
}
.marke-zeichen svg{display:block;width:100%;height:100%}
.marke-name{font-weight:800;font-size:16px;letter-spacing:-.02em}
.marke-name i{font-style:normal;color:var(--tinte-3);font-weight:400}
.kopf-nav{margin-left:auto;display:flex;align-items:center;gap:16px;font-size:13.5px;font-weight:600}
.kopf-nav a{text-decoration:none;color:var(--tinte-2)}
.kopf-nav a:hover,.kopf-nav a.aktiv{color:var(--tinte)}
/* Knöpfe in der Kopfleiste behalten ihre eigene Schriftfarbe — sonst färbt
   die Regel darüber sie um, und im Dunkelmodus steht Hellgrau auf Gold. */
.kopf-nav a.knopf{color:var(--tinte)}
.kopf-nav a.knopf--akzent,.kopf-nav a.knopf--akzent:hover{color:var(--akzent-auf)}
.kopf-nav a.knopf--leise{color:var(--tinte-2)}
@media(max-width:560px){
  .kopf-nav{gap:11px;font-size:12.5px}
  .kopf-nav a:not(.knopf){display:none}
}

/* ---------------------------------------------------------------- Knöpfe */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 17px;border-radius:0;font-weight:700;font-size:14px;text-decoration:none;
  background:var(--flaeche-2);color:var(--tinte);border:1px solid transparent;
  transition:transform .16s,box-shadow .22s,background .2s;
}
.knopf:hover{background:var(--flaeche-3);transform:translateY(-1px)}
.knopf:active{transform:translateY(0) scale(.99)}
.knopf--akzent{background:var(--akzent);color:var(--akzent-auf);
  box-shadow:0 6px 18px -8px color-mix(in srgb,var(--akzent) 75%,transparent)}
.knopf--akzent:hover{background:var(--akzent-tief)}
.knopf--klein{padding:7px 12px;font-size:12.5px;border-radius:0}
.knopf--gross{padding:15px 24px;font-size:15.5px}
.knopf--voll{width:100%}
.knopf--leise{background:transparent;border-color:var(--linie-2);color:var(--tinte-2)}
.knopf--symbol{padding:7px 9px;gap:0}
.knopf--symbol .ic{font-size:15px}
.knopf--leise:hover{background:var(--flaeche-2);color:var(--tinte)}
.knopf--warnung{background:var(--rot-sanft);color:var(--rot)}
.knopf[disabled]{opacity:.4;pointer-events:none}
.verweis{color:var(--akzent-schrift);font-weight:700;font-size:12px;display:inline-flex;align-items:center;gap:4px;
  margin-left:auto;transition:opacity .2s}
.verweis:hover{opacity:.7}
.verweis.erledigt{color:var(--gruen)}

/* ---------------------------------------------------------------- Meldungen */
.meldungen{display:flex;flex-direction:column;gap:8px;padding:14px 0 0}
.meldung{
  display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:0;font-size:13.5px;
  background:var(--flaeche-2);animation:einblenden .4s both;
}
.meldung .ic{font-size:16px;margin-top:1px}
.meldung--erfolg{background:var(--gruen-sanft);color:var(--gruen)}
.meldung--fehler{background:var(--rot-sanft);color:var(--rot)}
.meldung--hinweis{background:var(--akzent-sanft);color:var(--akzent-schrift)}
@keyframes einblenden{from{opacity:0;transform:translateY(-6px)}}

/* ---------------------------------------------------------------- Held */
.held{padding:34px 0 0}
.held--tag{padding-top:20px}
.gross{font-size:clamp(30px,8.4vw,40px);line-height:.99;letter-spacing:-.042em}
.kursiv{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;
  letter-spacing:-.01em;color:var(--akzent-schrift)}
.held-text{color:var(--tinte-2);font-size:15.5px;margin:14px 0 0;max-width:52ch}
.datumzeile{color:var(--tinte-2);font-size:13px;margin:9px 0 0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.puls{width:6px;height:6px;border-radius:50%;background:var(--gruen);position:relative;flex:0 0 auto}
.puls::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--gruen);
  opacity:.5;animation:pochen 2.4s ease-out infinite}
@keyframes pochen{0%{transform:scale(.5);opacity:.6}70%,100%{transform:scale(1.5);opacity:0}}

/* ---------------------------------------------------------------- Regler */
.regler-tafel{margin-top:18px;background:var(--flaeche-2);border-radius:0;padding:4px}
.regler-zeile{display:flex;align-items:center;gap:10px;padding:11px 13px;font-size:13.5px}
.regler-zeile + .regler-zeile{border-top:1px solid color-mix(in srgb,var(--linie-2) 55%,transparent)}
.regler-zeile > .ic{font-size:15px;color:var(--tinte-3)}
.regler{position:relative;display:flex;align-items:center;gap:11px;width:100%}
.regler label{font-size:13px;color:var(--tinte-2);white-space:nowrap;flex:0 0 auto}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;width:100%;height:22px;background:transparent;margin:0;cursor:grab}
input[type=range]:active{cursor:grabbing}
input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:99px;background:var(--spur,var(--linie-2))}
input[type=range]::-moz-range-track{height:5px;border-radius:99px;background:var(--linie-2)}
input[type=range]::-moz-range-progress{height:5px;border-radius:99px;background:var(--akzent)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:19px;height:19px;border-radius:50%;background:var(--flaeche);
  border:2px solid var(--akzent);box-shadow:var(--s1);margin-top:-7px;transition:transform .16s,box-shadow .16s;
}
input[type=range]::-moz-range-thumb{width:17px;height:17px;border-radius:50%;background:var(--flaeche);
  border:2px solid var(--akzent);box-shadow:var(--s1)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.28);
  box-shadow:0 0 0 7px color-mix(in srgb,var(--akzent) 18%,transparent)}
.wert{
  font-variant-numeric:tabular-nums;font-size:11.5px;font-variant-numeric:tabular-nums;white-space:nowrap;flex:0 0 auto;
  background:var(--flaeche);border:1px solid var(--linie);padding:4px 8px;border-radius:0;
  transition:border-color .2s,color .2s;
}
.wert.lebt{border-color:var(--akzent);color:var(--akzent-schrift)}

/* ---------------------------------------------------------------- Filtermenü */
/* Eine Zeile für alles, was den Tag steuert: Filter, Zähler, Werkzeuge.
   Vorher standen Filter und Werkzeuge untereinander — zwei halbleere Zeilen,
   bevor das erste Gericht kam. */
.werkzeugzeile{display:flex;align-items:center;gap:10px;padding:14px 0 10px;flex-wrap:wrap}
.werkzeugzeile .zustandszeile{padding:0;flex:0 1 auto;min-width:0}
.werkzeugzeile .zustandszeile:not(.an),
.werkzeugzeile .zuruecksetzen:not(.an){display:none}
.werkzeugzeile .zuruecksetzen{margin-left:0;opacity:1;pointer-events:auto}
.werkzeugzeile .schnellwahl{margin:0 0 0 auto;flex-wrap:nowrap}
/* Am Handy bleibt die Zeile eine Zeile: Die Wörter weichen den Zeichen,
   die Sortierung bekommt den Rest der Breite. */
@media (max-width:560px){
  .werkzeugzeile{gap:8px}
  .werkzeugzeile .schnellwahl{margin-left:0;flex:1 1 100%;gap:6px}
  .werkzeugzeile .schnellwahl .knopf-wort{display:none}
  .werkzeugzeile .schnellwahl .knopf{padding:7px 9px}
  .werkzeugzeile .sortierwahl{flex:1 1 auto;min-width:0}
  .werkzeugzeile .sortierwahl select{max-width:none;width:100%}
}
.filterknopf{
  display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:0;
  border:1px solid var(--linie-2);background:var(--flaeche);font-size:13.5px;font-weight:700;
  transition:.18s;flex:0 0 auto;
}
.filterknopf:hover{border-color:var(--tinte-3)}
.filterknopf.ist-aktiv{border-color:var(--akzent);background:var(--akzent-sanft);color:var(--akzent-schrift)}
.filterknopf .ic--pfeil{font-size:13px;transform:rotate(90deg);transition:transform .25s;opacity:.6}
.filterknopf.ist-offen .ic--pfeil{transform:rotate(-90deg)}
.filterzahl{
  min-width:19px;height:19px;padding:0 5px;border-radius:99px;background:var(--akzent);color:var(--akzent-auf);
  font-variant-numeric:tabular-nums;font-size:11px;display:grid;place-items:center;
}

/* Die Filter stehen in einem Fenster: Aufgeklappt unter dem Knopf schob der
   Kasten die Liste um seine ganze Höhe nach unten. Es ist hoch genug für alle
   Blöcke und scrollt in sich, wenn der Schirm niedriger ist. */
.filtermenue{
  background:var(--flaeche);border:none;border-radius:0;
  padding:6px 22px 18px;box-shadow:var(--s3);
  max-width:720px;width:calc(100% - 32px);max-height:88vh;overflow:auto;
  animation:menueAuf .2s cubic-bezier(.2,.9,.3,1);
}
.filtermenue::backdrop{background:rgba(10,12,8,.55);backdrop-filter:blur(3px)}
@keyframes menueAuf{from{opacity:0;transform:translateY(-8px)}}
/* Der Fuß mit „Fertig" steht am Ende der Blöcke, mit einer Linie darüber —
   klebend am unteren Rand lag er über der letzten Rubrik. */
.filtermenue .filterfuss{
  padding-top:14px;border-top:1px solid var(--linie);margin-top:8px;
}
.filterblock{padding:14px 0;border-bottom:1px solid var(--linie)}
.filterblock:last-of-type{border-bottom:none}
.filterblock .schnellsuche{margin:0}
.filterblock h2{
  font-variant-numeric:tabular-nums;font-size:11.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--tinte-3);margin-bottom:10px;
}
.filterblock h2 em{font-style:normal;text-transform:none;letter-spacing:.02em;font-size:10px;margin-left:6px}
.filterblock .regler-zeile{padding:7px 0;border:none}
.filterblock .chips{padding:0;margin:0;flex-wrap:wrap;overflow:visible}
.filterfuss{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:14px;
  border-top:1px solid var(--linie);font-size:12.5px;
}
.filterfuss .leise{flex:1;min-width:180px}
.filterfuss .leise a{color:var(--akzent-schrift)}
.filterfuss > .knopf:last-child{margin-left:auto}

/* ---------------------------------------------------------------- Filterchips */
.filterband{position:relative;margin:16px -16px 0}
.filterband::after{content:"";position:absolute;right:0;top:0;bottom:0;width:30px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--grund) 72%)}
.chips{display:flex;gap:6px;overflow-x:auto;padding:2px 16px 4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips--eng{margin:10px 0 0;padding:2px 0 4px}
.chip{
  flex:0 0 auto;display:inline-flex;align-items:center;padding:7px 13px;border-radius:999px;
  border:1px solid var(--linie-2);font-size:12.5px;font-weight:600;color:var(--tinte-2);background:var(--flaeche);
  transition:background .22s,color .22s,border-color .22s,transform .12s;
}
.chip:active{transform:scale(.94)}
.chip .ic{width:0;opacity:0;font-size:13px;margin-right:0;
  transition:width .22s cubic-bezier(.34,1.4,.5,1),opacity .18s,margin-right .22s}
.chip[aria-pressed="true"]{background:var(--tinte);border-color:var(--tinte);color:var(--grund)}
.chip[aria-pressed="true"] .ic{width:13px;opacity:1;margin-right:5px}
.chip--gruen[aria-pressed="true"]{background:var(--gruen);border-color:var(--gruen);color:#fff}
.chip--titel{border:none;background:none;color:var(--tinte-3);font-variant-numeric:tabular-nums;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;padding:7px 2px 7px 8px;pointer-events:none}

.zustandszeile{
  display:flex;align-items:baseline;gap:10px;padding:16px 0 10px;white-space:nowrap;
  font-variant-numeric:tabular-nums;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tinte-3);
}
.zustandszeile > span:first-child{overflow:hidden;text-overflow:ellipsis}
.zuruecksetzen{margin-left:auto;flex:0 0 auto;color:var(--akzent-schrift);font-size:11px;font-weight:500;
  letter-spacing:.04em;text-transform:none;opacity:0;pointer-events:none;transition:opacity .25s}
.zuruecksetzen.an{opacity:1;pointer-events:auto}

/* ---------------------------------------------------------------- Lokalkarten */
.lokalliste{display:flex;flex-direction:column;gap:10px}
.lokalkarte{
  position:relative;background:var(--flaeche);border:1px solid var(--linie);border-radius:0;
  padding:15px 16px 16px;overflow:hidden;box-shadow:var(--s1);
  transition:transform .22s cubic-bezier(.3,1.2,.5,1),box-shadow .22s,border-color .22s;
  animation:karteRein .46s cubic-bezier(.2,.9,.3,1) both;animation-delay:calc(var(--nr,0)*42ms);
}
@keyframes karteRein{from{opacity:0;transform:translateY(14px) scale(.985)}}
.lokalkarte::before{
  content:"";position:absolute;inset:0 0 auto 0;height:120px;pointer-events:none;opacity:.055;
  background:radial-gradient(120% 100% at 0% 0%,var(--lokalfarbe,var(--tief)),transparent 62%);
}
.lokalkarte:hover{transform:translateY(-2px);box-shadow:var(--s2);border-color:var(--linie-2)}
.lokalkarte[hidden]{display:none}
.lokalkarte-kopf{display:flex;gap:12px;align-items:flex-start;position:relative}
.lokal-zeichen{
  flex:0 0 auto;width:34px;height:34px;border-radius:0;display:grid;place-items:center;text-decoration:none;
  font-family:"Bricolage Grotesque";font-weight:800;font-size:12.5px;color:#fff;letter-spacing:-.04em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.lokal-zeichen--gross{width:40px;height:40px;border-radius:0;font-size:14px}
.lokalkarte-titel{min-width:0;flex:1}
.lokalname{font-family:"Bricolage Grotesque";font-weight:800;font-size:17px;line-height:1.14;
  letter-spacing:-.03em;text-decoration:none}
.lokalname:hover{text-decoration:underline;text-underline-offset:3px}
.lokal-meta{font-size:11px;color:var(--tinte-3);margin-top:4px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.lokal-meta .ic{font-size:12px}
.gehzeit{display:flex;align-items:center;gap:3px;color:var(--tinte-2)}
.punkt{width:2.5px;height:2.5px;border-radius:50%;background:var(--linie-2);flex:0 0 auto}
/* Das kleine Herz in der Liste. Der große Knopf auf der Lokalseite trägt
   dieselbe Klasse für das Skript — aber zusätzlich .knopf, und dann gelten
   diese Regeln nicht. Sonst wurde aus dem Knopf ein 30 Pixel breiter Streifen. */
.merken:not(.knopf){
  margin-left:auto;width:30px;height:30px;display:grid;place-items:center;color:var(--linie-2);font-size:17px;
  border-radius:50%;transition:color .2s,background .2s,transform .18s;flex:0 0 auto;
}
.merken:not(.knopf):hover{background:var(--flaeche-2);color:var(--tinte-3)}
.merken:not(.knopf).ist-gemerkt{color:var(--rot)}
.merken.ist-gemerkt .ic{fill:currentColor}
/* Gemerkt: der große Knopf wird ruhiger, das Herz bleibt das Zeichen */
.knopf.merken.ist-gemerkt{background:var(--gruen-sanft);color:var(--gruen);box-shadow:none}
.knopf.merken.ist-gemerkt:hover{background:color-mix(in srgb,var(--gruen) 16%,var(--flaeche))}
.merken--klein{width:24px;height:24px;font-size:14px;margin-left:6px}
.merken.pocht{animation:ploppen .42s cubic-bezier(.3,1.6,.5,1)}
@keyframes ploppen{40%{transform:scale(1.32)}70%{transform:scale(.94)}}

.gerichte{margin-top:13px;display:flex;flex-direction:column;gap:2px;position:relative}
.gericht{
  display:flex;gap:9px;align-items:baseline;
  padding:9px 11px;border-radius:0;transition:background .15s;
}
.gericht[hidden]{display:none}

/* Abwechselnd unterlegt, damit die Zeilen auseinanderzuhalten sind — aber so
   leise, dass es niemand für eine Hervorhebung hält. Eine graue Fläche hinter
   einem Gericht las sich vorher wie „das hier ist das bessere".
   Ohne JavaScript zählt die Reihenfolge im Quelltext; sobald gefiltert werden
   kann, übernimmt app.js das Zählen der sichtbaren Zeilen. */
.gericht:nth-child(even){background:var(--zebra)}
.gerichte--zebra .gericht{background:none}
.gerichte--zebra .gericht.ist-gerade{background:var(--zebra)}
.gericht-name{flex:0 1 auto;font-size:16.5px;font-weight:700;line-height:1.35;letter-spacing:-.008em}
.gericht-name mark{background:var(--akzent-sanft);color:var(--akzent-schrift);padding:0 4px;
  border-radius:0;font-weight:600}
.beschreibung{display:block;font-style:normal;font-size:13px;
  color:var(--tinte-3);margin-top:2px}
.fuehrung{flex:1 1 18px;min-width:10px;border-bottom:1.5px dotted var(--linie-2);transform:translateY(-4px)}
.preis{font-variant-numeric:tabular-nums;font-size:14px;font-weight:600;
  color:var(--tinte-2);flex:0 0 auto}
.kennzeichen{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}
.kenn{
  font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:2.5px 6px;border-radius:0;background:var(--gruen-sanft);color:var(--gruen);
}
.kenn--grau{background:var(--flaeche-2);color:var(--tinte-3)}
.band{
  margin-top:13px;border-radius:0;padding:9px 11px;font-size:12.5px;font-weight:600;
  display:flex;gap:8px;align-items:center;color:var(--akzent-schrift);
  background:linear-gradient(100deg,var(--akzent-sanft),color-mix(in srgb,var(--akzent-sanft) 55%,var(--flaeche)));
  border:1px solid color-mix(in srgb,var(--akzent) 28%,transparent);
}
.band .ic{font-size:14px;fill:currentColor;stroke:none}
/* „mit Suppe + 2,90" ist keine Fußnote, sondern Teil des Preises — wer das
   übersieht, rechnet mit dem falschen Betrag. */
.aufpreise{
  margin-top:11px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  font-size:12.5px;color:var(--tinte-2);
}
.aufpreise > span{
  display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:0;
  background:var(--akzent-sanft);color:var(--akzent-schrift);font-weight:600;
  font-variant-numeric:tabular-nums;
}
.aufpreise span b{font-weight:700}
.still{
  margin-top:13px;background:var(--flaeche-2);border-radius:0;padding:10px 12px;
  font-size:12.5px;color:var(--tinte-2);display:flex;gap:9px;align-items:center;
}
.still--gross{padding:18px;font-size:14px;align-items:flex-start}
.still--gross .ic{font-size:20px;color:var(--tinte-3);margin-top:2px}
.still--gross p{margin:4px 0 0;font-size:13px}
.still--gross > div{flex:1}
.anrufen{margin-left:auto;color:var(--akzent-schrift);font-weight:700;white-space:nowrap;
  display:flex;align-items:center;gap:4px;text-decoration:none}
.nichts{padding:46px 26px;text-align:center;color:var(--tinte-2);font-size:14px}
.nichts .ic{font-size:26px;color:var(--linie-2);margin:0 auto 12px;stroke-width:1.3}
.leer{padding:34px 20px;text-align:center;color:var(--tinte-3);font-size:14px;
  background:var(--flaeche-2);border-radius:0}
.leer a{color:var(--akzent-schrift)}

/* ---------------------------------------------------------------- Ortsliste */
.ortliste{display:flex;flex-direction:column;gap:8px;margin-top:28px}
.ortkarte{
  display:flex;align-items:center;gap:12px;padding:17px 18px;border-radius:0;text-decoration:none;
  background:var(--flaeche);border:1px solid var(--linie);box-shadow:var(--s1);transition:.2s;
}
.ortkarte:hover{transform:translateY(-2px);box-shadow:var(--s2)}
.ortkarte-name{font-family:"Bricolage Grotesque";font-weight:800;font-size:18px;letter-spacing:-.03em}
.ortkarte-zahl{margin-left:auto;font-size:12px;color:var(--tinte-3)}

/* ---------------------------------------------------------------- Lokalseite */
/* Der dunkle Schleier über der Hausfarbe ist kein Geschmack, sondern Rechnung:
   Auf einem hellen Grün stand weiße Schrift sonst bei 3,8 zu 1. */
.lokalkopf{
  background-color:var(--lokalfarbe,var(--tief));
  background-image:linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.30));
  color:#fff;position:relative;overflow:hidden;
}
.lokalkopf::before{content:"";position:absolute;inset:0;opacity:.28;
  background:radial-gradient(90% 130% at 88% -20%,rgba(255,255,255,.35),transparent 60%)}
/* Ein feines Punktraster, das nach links unten ausläuft: Der Kopf ist damit
   eine Fläche mit Struktur statt eines Farbblocks. */
.lokalkopf::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background-image:radial-gradient(rgba(255,255,255,.9) 1px,transparent 1.3px);
  background-size:17px 17px;
  -webkit-mask-image:linear-gradient(205deg,#000,transparent 62%);
          mask-image:linear-gradient(205deg,#000,transparent 62%);
}
/* Hat das Haus ein Motiv für seinen Aushang hinterlegt, ist das meist ein Foto
   vom Lokal — dann trägt es den Kopf, und die Hausfarbe legt sich darüber. */
.lokalkopf-bild{position:absolute;inset:0}
.lokalkopf-bild img,.lokalkopf-bild picture{width:100%;height:100%;object-fit:cover;display:block}
.lokalkopf.hat-bild::before{
  opacity:1;
  background:linear-gradient(175deg,
    color-mix(in srgb,var(--lokalfarbe,#14170F) 48%,transparent) 0%,
    color-mix(in srgb,var(--lokalfarbe,#14170F) 88%,transparent) 62%,
    color-mix(in srgb,var(--lokalfarbe,#14170F) 96%,transparent) 100%);
}
.lokalkopf.hat-bild::after{opacity:.07}
.lokalkopf-in{position:relative;padding:18px 18px 26px}
.zurueck{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;opacity:.82;
  text-decoration:none;margin-bottom:18px}
.zurueck:hover{opacity:1}
.lokalkopf-marke{display:flex;align-items:center;gap:12px}
.lokal-logo{width:48px;height:48px;border-radius:0;background:#fff;object-fit:contain;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.6)}
.lokal-logo--text{display:grid;place-items:center;font-family:"Bricolage Grotesque";
  font-weight:800;font-size:17px;letter-spacing:-.04em}
.oberzeile{font-variant-numeric:tabular-nums;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.72}
.unterzeile{font-size:12.5px;opacity:.85;margin-top:3px}
.lokalkopf h1{font-size:clamp(28px,7.8vw,38px);line-height:1;margin-top:16px;letter-spacing:-.04em;
  text-shadow:0 2px 20px rgba(0,0,0,.18)}
.lokalkopf-fuss{margin-top:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11.5px;opacity:.88}
.offen-pille{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.16);
  padding:3px 9px;border-radius:99px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
.offen-pille i{width:5px;height:5px;border-radius:50%;background:#7FD48E;display:block}
/* Was das Haus sonst noch ausmacht — Gastgarten, Kartenzahlung, Parkplatz.
   Stand bisher nur in der Tagesliste, gehört aber genau hierher. */
.kopfmerkmale{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0;padding:0;list-style:none}
.kopfmerkmale li{
  display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:99px;
  background:rgba(255,255,255,.15);color:rgba(255,255,255,.94);font-size:11.5px;
}
.kopfmerkmale .ic{font-size:13px;opacity:.85}

/* Kontaktwege als Pillen in einer Zeile. Vorher waren es gestreckte Kacheln —
   bei einem Haus mit nur einer Telefonnummer wurde daraus ein Knopf über die
   halbe Seite, und das sah aus wie ein Fehler. */
.handlungen{display:flex;flex-wrap:wrap;gap:8px;padding:16px 16px 4px}
.handlung{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  background:var(--flaeche);border:1px solid var(--linie);border-radius:99px;
  padding:10px 16px;text-decoration:none;font-size:13px;font-weight:600;
  color:var(--tinte-2);transition:.18s;
}
.handlung:hover{border-color:var(--tinte-3);color:var(--tinte);transform:translateY(-1px)}
.handlung .ic{font-size:16px;color:var(--tinte)}

.abschnitt{padding:8px 16px 22px}
.abschnitt + .abschnitt{border-top:1px solid var(--linie);padding-top:20px}
.abschnitt-titel{
  font-variant-numeric:tabular-nums;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tinte-3);margin-bottom:14px;display:flex;align-items:center;gap:10px;
}
.abschnitt-titel::after{content:"";flex:1;height:1px;background:var(--linie)}
/* Dieselbe Karte wie in der Tagesliste: heller Grund, feine Linie. Vorher war
   es eine graue Fläche — dasselbe Menü sah auf zwei Seiten verschieden aus. */
.menuekarte{background:var(--flaeche);border:1px solid var(--linie);border-radius:0;
  padding:18px;box-shadow:var(--s1)}
.menuekarte .gerichte{margin-top:12px}
/* Der Tag darüber wie die Zeile auf einer Speisekarte. */
.menuekarte > .oberzeile{
  font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;
  font-size:16px;letter-spacing:0;text-transform:none;color:var(--tinte-2);opacity:1;
  padding-bottom:10px;border-bottom:1px solid var(--linie);
}
/* Die Aufpreise gehören zum Preis und nicht in die Fußnoten — auf der
   Lokalseite genauso wie in der Tagesliste. */
.kombis{margin-top:14px;padding-top:12px;border-top:1px dashed var(--linie-2);
  display:flex;flex-wrap:wrap;gap:8px}
.kombi{
  display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:0;
  background:var(--akzent-sanft);color:var(--akzent-schrift);font-size:13px;font-weight:600;
}
.kombi .preis{color:inherit;font-size:13px}
.menue-notiz{margin:12px 0 0;font-size:12.5px;color:var(--tinte-3);font-style:italic}
.wochenliste{display:flex;flex-direction:column;gap:3px}
.wochenzeile{display:flex;gap:12px;font-size:13.5px;align-items:center;padding:8px 0}
.wochenzeile.ist-heute{font-weight:600}
.wochentag{
  flex:0 0 auto;min-width:36px;text-align:center;padding:4px 8px;border-radius:0;
  background:var(--flaeche-2);color:var(--tinte-3);
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.wochenzeile.ist-heute .wochentag{background:var(--akzent-sanft);color:var(--akzent-schrift)}
.zeitenliste{display:flex;flex-direction:column;gap:7px;font-size:13.5px}
.zeitenliste > div{display:flex;justify-content:space-between;gap:12px}
.zeitenliste .ist-heute{font-weight:700}
.zeitenliste .jetzt{color:var(--gruen)}
/* Was ein Haus über sich schreibt, ist der einzige eigene Ton auf der Seite —
   in der Serifenschrift des Hauses statt in der Kleinschrift der Fußnoten. */
.fliesstext{
  font-family:"Instrument Serif",Georgia,serif;font-size:19.5px;line-height:1.5;
  color:var(--tinte);max-width:56ch;letter-spacing:-.005em;
}
.hinweis{font-size:11.5px;color:var(--tinte-3);text-align:center;margin:11px 0 0;line-height:1.5}
.mitte-block{text-align:center;padding:60px 20px;display:flex;flex-direction:column;align-items:center;gap:14px}
.fehlercode{font-size:44px;color:var(--tinte-3);font-weight:500}

/* ---------------------------------------------------------------- Textseiten */
.textseite{max-width:60ch;margin:34px auto 0;color:var(--tinte-2);font-size:15px}
.textseite--oben{margin-top:44px}
.textseite h1{font-size:30px;margin-bottom:18px;color:var(--tinte)}
.textseite h2{font-size:19px;margin:30px 0 10px;color:var(--tinte)}
.textseite h3{font-size:15px;margin:20px 0 6px;color:var(--tinte);font-weight:700}
.textseite ul{padding-left:20px;margin:10px 0}
.textseite li{margin:5px 0}
.karten-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:30px}
.infokarte{background:var(--flaeche);border:1px solid var(--linie);border-radius:0;padding:18px;
  box-shadow:var(--s1);text-decoration:none;display:block;transition:.2s}
.infokarte .ic--gross{color:var(--akzent-schrift);margin-bottom:12px}
.infokarte h2{font-size:15.5px;margin-bottom:5px}
.infokarte p{margin:0;font-size:13px;color:var(--tinte-2)}

/* ---------------------------------------------------------------- Formulare */
.kartenblock{background:var(--flaeche);border:1px solid var(--linie);border-radius:0;
  padding:24px;box-shadow:var(--s1);margin-bottom:16px}
.kartenblock h1{font-size:24px;margin-bottom:6px}
.kartenblock--warnung{border-color:color-mix(in srgb,var(--rot) 30%,var(--linie))}
.kartenfuss{margin:18px 0 0;font-size:13px;color:var(--tinte-3);text-align:center}
.trennzeile{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--tinte-3);font-size:12px}
.trennzeile::before,.trennzeile::after{content:"";flex:1;height:1px;background:var(--linie)}
.kartenfuss a{color:var(--akzent-schrift)}
.formular{display:flex;flex-direction:column;gap:14px}
.formular-titel{font-size:15px;margin-bottom:2px}
.feld{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600;flex:1;min-width:0}
.feld em{font-weight:400;font-style:normal}
.feld input,.feld select,.feld textarea,.zeilenfeld,.zahlfeld,select{
  font:inherit;font-size:14.5px;font-weight:400;padding:11px 13px;border-radius:0;
  border:1px solid var(--linie-2);background:var(--flaeche);color:var(--tinte);width:100%;
  transition:border-color .18s,box-shadow .18s;
}
.feld textarea{resize:vertical;min-height:90px;line-height:1.5}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:none;border-color:var(--akzent);box-shadow:0 0 0 3px color-mix(in srgb,var(--akzent) 18%,transparent)}
.feld input[type=color]{padding:4px;height:44px;cursor:pointer}
.feld input[type=file]{padding:9px;font-size:13px}
.feld input[disabled]{background:var(--flaeche-2);color:var(--tinte-3)}
.feldreihe{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.feld--schmal{flex:0 0 130px}
.feld--klein input{padding:8px 11px;font-size:13.5px}
.haken{display:flex;align-items:center;gap:9px;font-size:13.5px;cursor:pointer}
.haken input{width:18px;height:18px;accent-color:var(--akzent);cursor:pointer}
.suchfeld .ic{color:var(--tinte-3);font-size:15px}
.suchfeld input{background:none;border:none;outline:none;font:inherit;font-size:14px;color:var(--tinte);width:100%}
.filterleiste select{width:auto;min-width:150px}
.ablage{
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  padding:32px 20px;border:2px dashed var(--linie-2);border-radius:0;cursor:pointer;
  background:var(--flaeche-2);transition:.2s;
}
.ablage:hover{border-color:var(--akzent);background:var(--akzent-sanft)}
.ablage .ic--gross{color:var(--tinte-3)}
.ablage input[type=file]{margin-top:6px;font-size:13px}
.ablage-dateien{font-size:12px;color:var(--akzent-schrift);font-weight:600}
.leerstelle{
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  padding:38px 20px;border-radius:0;background:var(--flaeche-2);
  color:var(--tinte-2);font-size:14px;
}
.leerstelle .ic--gross{color:var(--tinte-3)}
.leerstelle p{margin:0}
.dialog{border:none;border-radius:0;padding:26px;max-width:560px;width:calc(100% - 32px);
  background:var(--flaeche);color:var(--tinte);box-shadow:var(--s3)}
.dialog::backdrop{background:rgba(10,12,8,.55);backdrop-filter:blur(3px)}
.dialog h2{font-size:20px;margin-bottom:6px}
.dialog-fuss{display:flex;gap:10px;justify-content:flex-end;margin-top:6px}

.knopfreihe{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
.pushzeile{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px}
.pushzeile .knopf[data-zustand="an"]{background:var(--gruen-sanft);color:var(--gruen);box-shadow:none}
.pushzeile .knopf[data-zustand="blockiert"],.pushzeile .knopf[data-zustand="unmoeglich"]{
  background:var(--flaeche-2);color:var(--tinte-3);box-shadow:none}
/* Der Umbruch des Arbeitsbereichs steht in verwaltung.css, zusammen mit
   den Grundregeln dazu: Dieses Blatt wird vorher geladen, eine Regel hier
   verliert also gegen die unbedingte Regel dort. */
.seiten-nav a{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:0;
  text-decoration:none;font-size:13.5px;font-weight:600;color:var(--tinte-2);transition:.16s;
}
.seiten-nav a:hover{background:var(--flaeche-2);color:var(--tinte)}
.seiten-nav a.aktiv{background:var(--akzent-sanft);color:var(--akzent-schrift)}
.seiten-nav .ic{font-size:16px}
.seitenleiste-fuss a{color:var(--tinte-3);text-decoration:none}
.seitenleiste-fuss a:hover{color:var(--tinte)}
.lokalwahl select{font-size:13.5px;padding:9px 11px}
.lokalzeile .lokal-zeichen{width:28px;height:28px;font-size:11px;border-radius:0}
.zustand{
  display:inline-flex;align-items:center;padding:3px 9px;border-radius:99px;font-size:11px;
  font-weight:700;letter-spacing:.035em;text-transform:uppercase;background:var(--flaeche-2);color:var(--tinte-3);
}
.zustand--aktiv{background:var(--gruen-sanft);color:var(--gruen)}
.zustand--pruefung{background:var(--akzent-sanft);color:var(--akzent-schrift)}
.zustand--gesperrt{background:var(--rot-sanft);color:var(--rot)}

.bereichskopf{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.bereichskopf h1{font-size:26px}
.bereichskopf p{margin:4px 0 0;font-size:13.5px}
.bereichskopf > :last-child:not(:first-child){margin-left:auto}
.hinweisblock{display:flex;gap:12px;align-items:flex-start;background:var(--akzent-sanft);
  color:var(--akzent-schrift);border-radius:0;padding:15px 16px;margin-bottom:20px}
.hinweisblock .ic{font-size:18px;margin-top:1px;flex:0 0 auto}
.hinweisblock > div{flex:1}
.hinweisblock p{margin:3px 0 0;font-size:13px}
.hinweisblock--warnung{background:var(--rot-sanft);color:var(--rot)}
.hinweisblock--warnung a{color:inherit;font-weight:700}
.zahlkachel strong{font-size:22px;line-height:1.1}
.zahlkachel span{font-size:12px;color:var(--tinte-3)}
.stundenbalken-saeule b{display:block;width:100%;border-radius:0;background:var(--linie)}
.stundenbalken-saeule.ist-spitze b{background:var(--akzent)}
.stundenbalken-saeule i{position:absolute;bottom:-17px;font-size:10px;font-style:normal;color:var(--tinte-3)}
.preislupe .ic{font-size:13px}
.preisreihe{display:flex;align-items:flex-end;gap:8px;height:110px;margin:14px 0 8px}
.preisreihe-saeule{flex:1;max-width:62px;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;gap:5px;height:100%;font-size:11px;color:var(--tinte-3)}
.preisreihe-saeule b{display:block;width:100%;border-radius:0;background:var(--akzent-sanft)}
.preisreihe-saeule.ist-letzte b{background:var(--akzent)}
.preisreihe-saeule em{font-style:normal;font-weight:600;color:var(--tinte)}
.tageskachel.ist-heute{border-color:var(--akzent)}
.tageskachel--veroeffentlicht{background:var(--gruen-sanft);border-color:transparent}
.tageskachel--geplant{background:var(--akzent-sanft);border-color:transparent}
.tageskachel--geplant .tageskachel-status{color:var(--akzent-schrift)}
.tageskachel--entwurf .tageskachel-status{color:var(--akzent-schrift)}
@media(max-width:900px){.menue-aufbau{grid-template-columns:1fr}}
.bib-eintrag{
  display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:0;cursor:pointer;
  border:1px solid transparent;transition:background .18s,border-color .18s;
  animation:karteRein .3s both;animation-delay:calc(var(--nr,0)*16ms);
}
.bib-eintrag:hover{background:var(--flaeche-2)}
.bib-eintrag.ist-gewaehlt{background:var(--akzent-sanft);border-color:color-mix(in srgb,var(--akzent) 45%,transparent)}
.bib-eintrag[hidden]{display:none}
.bib-eintrag input{position:absolute;opacity:0;pointer-events:none}
.bib-eintrag.ist-gewaehlt .haekchen{background:var(--akzent);border-color:var(--akzent);color:var(--akzent-auf)}
.bib-name{display:block;font-size:15.5px;font-weight:600;line-height:1.35}
.bib-preis{font-size:12.5px;color:var(--tinte-2);flex:0 0 auto}
.gewaehlt-zeile{display:flex;gap:9px;align-items:baseline;font-size:14px;animation:einblenden .3s both}
.gewaehlt-zeile .nr{font-variant-numeric:tabular-nums;font-size:11px;color:var(--tinte-3);flex:0 0 16px}
.gewaehlt-zeile .nm{flex:1;font-size:15px;font-weight:500;line-height:1.35}
.gewaehlt-leer{color:var(--tinte-3);font-size:13px;padding:14px 0}
.aufpreise-block h3{font-size:12.5px;font-weight:700}

/* ---------------------------------------------------------------- Listen/Tabellen */
.einfache-liste,.tabelle,.gerichtetabelle{display:flex;flex-direction:column;gap:2px}
.listenzeile,.tabellenzeile,.gerichtzeile{
  display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:0;
  background:var(--flaeche);border:1px solid var(--linie);text-decoration:none;transition:.16s;
}
.listenzeile:hover,.tabellenzeile:hover,.gerichtzeile:hover{border-color:var(--linie-2);background:var(--flaeche-2)}
.listenzeile > span:nth-child(2),.tabellenzeile-text,.gerichtzeile-text{flex:1;min-width:0}
.listenzeile strong,.tabellenzeile-text strong,.gerichtzeile-text strong{display:block;font-size:14.5px}
.listenzeile .leise,.tabellenzeile-text .leise{display:block;font-size:11.5px;margin-top:2px}
.zeilenform select,.zahlfeld{width:auto;min-width:92px;padding:7px 10px;font-size:12.5px;border-radius:0}
.werteliste > div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--linie)}
.codezeile{display:block;background:var(--flaeche-2);padding:11px 13px;border-radius:0;
  font-family:"DM Mono",ui-monospace,monospace;font-size:12px;word-break:break-all;margin-top:8px}
.zeitenzeile input{width:auto;flex:0 0 132px}
@keyframes bogenRein{from{opacity:0;transform:perspective(700px) rotateX(8deg) translateY(20px) scale(.96)}}
.aushang img{display:block;width:100%}
.aushang figcaption{display:flex;align-items:center;gap:10px;padding:11px 13px;font-size:12px;
  color:var(--tinte-2);flex-wrap:wrap}
.aushang figcaption .knopf{margin-left:auto}

.rundenband{
  display:flex;align-items:center;gap:13px;padding:15px 16px;border-radius:0;text-decoration:none;
  background:linear-gradient(100deg,var(--akzent-sanft),color-mix(in srgb,var(--akzent-sanft) 45%,var(--flaeche)));
  border:1px solid color-mix(in srgb,var(--akzent) 28%,transparent);color:var(--akzent-schrift);transition:.2s;
}
.rundenband:hover{transform:translateY(-2px);box-shadow:var(--s2)}
.rundenband strong{display:block;font-size:14.5px}
.rundenband .leise{display:block;font-size:12.5px;margin-top:2px;color:inherit;opacity:.8}
.rundenband > span{flex:1;min-width:0}

/* ---------------------------------------------------------------- Mittagsrunde */
.leute{display:flex;flex-direction:column;gap:8px}
.person{
  background:var(--flaeche);border:1px solid var(--linie);border-radius:0;padding:11px 13px;
  display:flex;align-items:center;gap:11px;
  animation:karteRein .44s both;animation-delay:calc(var(--nr,0)*55ms);
}
.avatar{width:33px;height:33px;border-radius:0;display:grid;place-items:center;font-size:12px;
  font-weight:700;color:#fff;letter-spacing:-.02em;box-shadow:inset 0 1px 0 rgba(255,255,255,.2);flex:0 0 auto}
.person .nm{font-weight:600;font-size:14px}
.person .nm em{font-weight:400;font-size:12px}
.person .need{font-size:11.5px;color:var(--tinte-3);margin-top:1px}
.person .state{margin-left:auto;font-variant-numeric:tabular-nums;font-size:10px;color:var(--gruen);
  text-transform:uppercase;letter-spacing:.08em;display:flex;align-items:center;gap:5px;flex:0 0 auto}
.person .state.wait{color:var(--tinte-3)}

.mitmachen{background:var(--flaeche);border:1px solid var(--linie);border-radius:0;overflow:hidden}
.mitmachen > summary{
  padding:15px 17px;cursor:pointer;font-weight:700;font-size:14.5px;list-style:none;
  display:flex;align-items:center;gap:10px;
}
.mitmachen > summary::-webkit-details-marker{display:none}
.mitmachen > summary:hover{background:var(--flaeche-2)}
.mitmachen[open] > summary{border-bottom:1px solid var(--linie)}
.mitmachen .formular{padding:17px}
.mitmachen > form:last-child{padding:0 17px 17px}
.filterfeld{border:none;padding:0;margin:0}
.filterfeld legend{font-size:13px;font-weight:600;padding:0;margin-bottom:7px}
.chip--wahl{cursor:pointer;user-select:none}
.chip--wahl input{position:absolute;opacity:0;pointer-events:none}
.chip--wahl .ic{width:0;opacity:0;margin-right:0;
  transition:width .22s cubic-bezier(.34,1.4,.5,1),opacity .18s,margin-right .22s}
.chip--wahl:has(input:checked),.chip--an{background:var(--gruen);border-color:var(--gruen);color:#fff}
.chip--wahl:has(input:checked) .ic,.chip--an .ic{width:13px;opacity:1;margin-right:5px}

.treffer{display:flex;flex-direction:column;gap:10px}
.treffer-karte{
  position:relative;background:var(--flaeche);border:1px solid var(--linie);border-radius:0;
  padding:15px 16px;box-shadow:var(--s1);overflow:hidden;
  animation:karteRein .46s cubic-bezier(.2,.9,.3,1) both;animation-delay:calc(var(--nr,0)*60ms);
}
.treffer-karte::before{
  content:"";position:absolute;inset:0 0 auto 0;height:100px;pointer-events:none;opacity:.05;
  background:radial-gradient(120% 100% at 0% 0%,var(--lokalfarbe,var(--tief)),transparent 62%);
}
.treffer-karte.ist-vorn{border-color:var(--akzent);box-shadow:0 0 0 3px color-mix(in srgb,var(--akzent) 16%,transparent)}
.treffer-karte--knapp{opacity:.72;background:var(--flaeche-2);box-shadow:none}
.treffer-kopf{display:flex;gap:12px;align-items:center;position:relative}
.stimmzahl{
  flex:0 0 auto;min-width:30px;height:30px;padding:0 9px;border-radius:99px;background:var(--akzent);
  color:var(--akzent-auf);display:grid;place-items:center;font-size:13px;font-weight:500;
}
.fuer-dich{margin:12px 0 0;font-size:13px;color:var(--tinte-2);line-height:1.45}
.fuer-dich strong{color:var(--tinte)}
.fehlt{margin:10px 0 0;font-size:12.5px;color:var(--tinte-3)}
.stimmleiste{display:flex;align-items:center;gap:6px;margin:12px 0;flex-wrap:wrap}
.stimmpunkt{
  width:23px;height:23px;border-radius:50%;display:grid;place-items:center;color:#fff;
  font-size:10px;font-weight:700;box-shadow:0 0 0 2px var(--flaeche);margin-right:-8px;
}
.stimmnamen{margin-left:14px;font-size:11.5px}
.treffer-karte form{margin-top:12px}
.einladung{background:var(--flaeche-2);border-radius:0;padding:14px}
.einladung .codezeile{margin:0;background:var(--flaeche)}
.rechte-erklaerung strong{display:inline-block;min-width:110px}
.rechte-erklaerung .leise{font-size:12.5px}
.vorlagenbild img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.vorlagenbild:hover img{transform:scale(1.03)}
.vorlagenfuss strong{display:block;font-size:14px}
.vorlagenfuss .leise{display:block;font-size:10.5px;margin-top:2px}
@media(max-width:940px){.editor{grid-template-columns:1fr}}
.efeld.ist-aktiv{
  border-style:solid;border-color:var(--akzent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--akzent) 28%,transparent);
}
.efeld-zeile > span:first-child{flex:1;overflow:hidden;text-overflow:ellipsis}
.efeld-zeile.ist-klein{font-size:.62em;opacity:.75;letter-spacing:.1em}
.efeld.ist-aktiv .efeld-schild,.efeld:hover .efeld-schild{opacity:1}
.efeld.ist-aktiv .egriff{opacity:1}
.egriff--nw{left:-7px;top:-7px;cursor:nwse-resize}
.egriff--no{right:-7px;top:-7px;cursor:nesw-resize}
.egriff--sw{left:-7px;bottom:-7px;cursor:nesw-resize}
.egriff--so{right:-7px;bottom:-7px;cursor:nwse-resize}
.feldzeile.ist-aktiv{background:var(--akzent-sanft);border-color:color-mix(in srgb,var(--akzent) 45%,transparent);
  color:var(--akzent-schrift);font-weight:600}
.feld-hinzu select{flex:1;font-size:12.5px;padding:8px 10px}
.hinweis--gut{color:var(--gruen)}
.hinweis--schlecht{color:var(--rot)}
.vorschaubild img{max-width:100%;max-height:64vh;object-fit:contain;display:block}

/* ---------------------------------------------------------------- Fuß */
.fuss{border-top:1px solid var(--linie);margin-top:40px;position:relative;z-index:1}
/* Drei Spalten: links die Marke mit der Sprachwahl, in der Mitte der
   Lokalwunsch, rechts die Wege. Die Mitte bekommt den freien Platz, damit
   der Wunschkasten wirklich zwischen den beiden Rändern steht und nicht am
   linken klebt. */
.fuss-in{max-width:660px;margin:0 auto;padding:28px 16px 40px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:26px}
/* Gleich breite Randspalten: Nur so steht der Lokalwunsch wirklich in der
   Mitte der Seite und nicht in der Mitte dessen, was übrig bleibt. */
.fuss-mitte{display:flex;justify-content:center}
.fuss-mitte .fusswunsch{margin-top:0}
.fuss-links{justify-self:end}
.fuss-text{font-size:12.5px;color:var(--tinte-3);margin:9px 0 0;max-width:34ch}
/* Der Lokalwunsch im Fuß: eine Frage und ein Anstoß. Die Felder standen
   früher aufgeklappt darunter und haben den Fuß dreimal so hoch gemacht —
   jetzt öffnen sie in einem Fenster. Er steht links unter der Marke, weil
   das der beste Hinweis ist, den ein Gast geben kann. */
/* Mittig heißt: der ganze Rahmen in der Mitte und der Text darin auch. */
.fusswunsch{max-width:34ch;text-align:center}
.fusswunsch .wunsch-frage{display:block;margin:0;font-size:13px;color:var(--tinte-2)}
.wunsch-ruf{display:inline-flex;align-items:center;gap:5px;margin-top:5px;padding:0;
  background:none;border:0;cursor:pointer;font:inherit;font-size:11.5px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--akzent-schrift)}
/* Die drei Felder im Fenster */
.wunschfenster .wunsch-zeilen{display:grid;gap:9px;margin-top:14px}
.wunschfenster .wunsch-formular .feld span{display:block;font-size:11.5px;color:var(--tinte-3);margin-bottom:4px}
.wunschfenster .wunsch-formular input{width:100%;padding:9px 11px;font-size:14px;
  border:1px solid var(--linie-2);border-radius:0;background:var(--flaeche);color:var(--tinte)}
.wunschfenster .wunsch-fuss{margin:10px 0 0;font-size:11.5px}
/* Rechts stehen die Wege in die Seite — und zwar rechtsbündig: Der Block
   sitzt am rechten Rand, also enden auch seine Zeilen dort. Linksbündig
   sah es aus, als wäre er verrutscht. */
.fuss-links{display:flex;flex-direction:column;gap:7px;font-size:13px;flex:0 0 auto;
  align-items:flex-end;text-align:right}
/* Am Handy stehen Marke, Satz und Links untereinander — dann sitzen sie mittig
   besser als am linken Rand, wo rechts daneben nichts mehr steht. */
@media (max-width:640px){
  .fuss-in{gap:18px;grid-template-columns:1fr;justify-items:center;text-align:center}
  .fuss-in > *{width:100%}
  .fuss-in .marke{justify-content:center}
  .fuss-links{align-items:center;justify-self:center}
  .fuss-mitte{justify-content:center}
  .fuss-text{max-width:none;margin-left:auto;margin-right:auto}
  .sprachwahl{justify-content:center}
}
/* Der Hinweis „ohne Gewähr" steht unter den drei Spalten, getrennt durch
   eine Linie: Er gehört zur Seite, nicht zu einer Spalte, und er soll
   lesbar sein, ohne sich vorzudrängen. */
.fuss-gewaehr{
  max-width:860px;margin:18px auto 0;padding-top:14px;
  border-top:1px solid var(--linie);
  /* Keine eigene Farbe: Der Fuß ist auf den öffentlichen Seiten dunkel
     (siehe tafel.css) und in der Verwaltung hell. Eine festgelegte Farbe
     passte immer nur zu einem von beiden — mit --tinte-2 kam der Satz auf
     dem dunklen Grund auf Kontrast 2,93. Geerbt stimmt er in beiden Fällen,
     und ein rechtlicher Hinweis, den man nicht lesen kann, ist keiner. */
  font-size:11.5px;line-height:1.55;text-align:center;
}
.fuss-links a{color:var(--tinte-2);text-decoration:none}
.fuss-links a:hover{color:var(--tinte)}
.sprachwahl{display:flex;gap:4px;margin-top:6px}
.sprachwahl a{
  font-variant-numeric:tabular-nums;font-size:11px;letter-spacing:.06em;padding:4px 9px;
  border-radius:0;border:1px solid var(--linie-2);color:var(--tinte-3);text-decoration:none;transition:.16s;
}
.sprachwahl a:hover{border-color:var(--tinte-3);color:var(--tinte)}
.sprachwahl a.aktiv{background:var(--tinte);border-color:var(--tinte);color:var(--grund)}

/* ------------------------------------------------ Ansicht als Benutzer */
body.uebernahme{--uebernahme-h:46px}
body.uebernahme .kopfleiste{top:var(--uebernahme-h)}
body.uebernahme .seitenleiste{top:var(--uebernahme-h);height:calc(100vh - var(--uebernahme-h))}
.uebernahme-leiste{
  position:sticky;top:0;z-index:400;color:#FFF3DC;
  background:linear-gradient(100deg,#2B1D00,#5A3B00 62%,#6B4700);
  box-shadow:0 1px 0 rgba(0,0,0,.25),0 10px 26px -18px rgba(0,0,0,.9);
}
.uebernahme-leiste::after{
  content:"";position:absolute;inset:auto 0 0;height:2px;
  background:repeating-linear-gradient(115deg,var(--akzent) 0 12px,transparent 12px 24px);opacity:.85;
}
.uebernahme-in{
  max-width:1180px;margin:0 auto;min-height:var(--uebernahme-h,46px);
  padding:7px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.uebernahme-punkt{
  width:9px;height:9px;border-radius:50%;background:var(--akzent);flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(232,164,33,.65);animation:uebernahmePuls 2.6s ease-out infinite;
}
@keyframes uebernahmePuls{
  0%{box-shadow:0 0 0 0 rgba(232,164,33,.6)}
  70%{box-shadow:0 0 0 9px rgba(232,164,33,0)}
  100%{box-shadow:0 0 0 0 rgba(232,164,33,0)}
}
.uebernahme-text{font-size:13.5px;line-height:1.35;min-width:0;flex:1 1 auto}
.uebernahme-text strong{font-weight:700}
.uebernahme-text em{font-style:normal;color:#D9C49A;font-family:"DM Mono",ui-monospace,monospace;font-size:12px}
.uebernahme-form{flex:0 0 auto;margin-left:auto}
.uebernahme-knopf{background:var(--akzent);color:var(--akzent-auf);font-weight:600;gap:6px}
.uebernahme-knopf:hover{background:#FFC763}
@media (max-width:560px){
  body.uebernahme{--uebernahme-h:72px}
  .uebernahme-text em{display:block}
}
.stilknopf b{font-weight:800}
.stilknopf i{font-family:"Instrument Serif",Georgia,serif;font-size:18px}
#fSchrift optgroup{font-style:normal;font-weight:700;color:var(--tinte-2)}
.ansichtswahl a{
  padding:7px 14px;border-radius:0;font-size:12.5px;font-weight:600;
  color:var(--tinte-2);text-decoration:none;transition:.16s;
}
.ansichtswahl a:hover{color:var(--tinte)}
.ansichtswahl a.ist-an{background:var(--flaeche);color:var(--tinte);font-weight:700;box-shadow:var(--s1)}
.blaettern a{
  display:grid;place-items:center;min-width:34px;height:32px;border-radius:0;
  color:var(--tinte-2);text-decoration:none;font-size:15px;transition:.16s;
}
.blaettern a:hover{background:var(--flaeche-2);color:var(--tinte)}
.kalenderbilanz-zahl strong{font-size:21px;font-weight:500;letter-spacing:-.03em}
.kalenderbilanz-zahl span{font-size:12px;color:var(--tinte-3)}
.kalenderbilanz-zahl--warnung strong{color:var(--akzent-schrift)}
.kalenderbilanz > .knopf{margin-left:auto}

.zustand--online{background:var(--gruen-sanft);color:var(--gruen)}
.zustand--entwurf{background:var(--akzent-sanft);color:var(--akzent-schrift)}
.zustand--leer{background:var(--flaeche-2);color:var(--tinte-3)}
/* Online, aber nicht alles: An diesem Tag wartet etwas, das der Gast noch
   nicht sieht. Rot wie das Band über dem Editor — „grün" wäre hier gelogen. */
.zustand--wartet{background:var(--rot-sanft);color:var(--rot)}
.ktag--online{border-left:3px solid var(--gruen)}
.ktag--entwurf{border-left:3px solid var(--akzent)}
.ktag--wartet{border-left:3px solid var(--rot)}
.ktag.ist-heute{border-color:var(--akzent);box-shadow:0 2px 4px rgba(20,23,15,.04),0 14px 30px -18px var(--akzent)}
.ktag-liste li{padding:8px 9px;border-radius:0;background:var(--grund);
  font-size:12.5px;line-height:1.35}
.ktag-kennung--vegetarisch{background:var(--gruen)}
.ktag-kennung--vegan{background:#2E8B57}
.ktag-kennung--fisch{background:#3E7CA6}
.ktag-fuss .verweis{margin-left:auto}
.kmonat-kopf span{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--tinte-3);padding-left:4px}
.mtag.ist-heute{border-color:var(--akzent);background:var(--akzent-sanft)}
.mtag--online{border-top:3px solid var(--gruen)}
.mtag--entwurf{border-top:3px solid var(--akzent)}
.mtag--wartet{border-top:3px solid var(--rot)}
.mtag--online .mtag-punkt{background:var(--gruen)}
.mtag--entwurf .mtag-punkt{background:var(--akzent)}
.mtag--wartet .mtag-punkt{background:var(--rot)}
.punkt--wartet{background:var(--rot)}
.kmonat-legende span{display:flex;align-items:center;gap:6px}
.punkt{width:8px;height:8px;border-radius:99px;display:inline-block}
.kliste-woche h2{font-size:14px}
.kliste-woche .leise{font-size:12.5px}
.kzeile--online{border-left:3px solid var(--gruen)}
.kzeile--entwurf{border-left:3px solid var(--akzent)}
.kzeile--wartet{border-left:3px solid var(--rot)}
.kzeile--leer{background:transparent;border-style:dashed}
.kzeile.ist-heute{border-color:var(--akzent)}
.kzeile-tag .leise{font-size:11.5px}
.kzeile-gericht > span:first-child{overflow-wrap:anywhere}
.kzeile-gericht > span:first-child{flex:1;min-width:0}
.kzeile-rand .verweis{margin-left:0}

@media (max-width:1100px){
  .kwoche{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:760px){
  .kwoche{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kmonat-gitter,.kmonat-kopf{gap:4px}
  .mtag{min-height:74px;padding:7px}
  .mtag-gerichte{display:none}
  .kzeile{flex-direction:column;gap:9px}
  .kzeile-tag{width:auto;flex-direction:row;align-items:baseline;gap:8px}
  .kzeile-rand{flex-direction:row;align-items:center;width:100%}
  .kalenderbilanz{gap:16px;padding:12px 14px}
}

/* Ausdruck für die Küche: nur der Plan, ohne Bedienung */
@media print{
  .seitenleiste,.nicht-drucken,.blaettern,.ansichtswahl,.meldungen{display:none!important}
  .arbeitsflaeche{display:block}
  .arbeitsbereich{padding:0!important}
  body{background:#fff}
  .ktag,.kzeile,.mtag,.kalenderbilanz{break-inside:avoid;box-shadow:none}
  .kwoche{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kmonat-gitter{gap:4px}
}

/* ---------------------------------------------------------------- Suche */
.kopf-suche{display:grid;place-items:center;width:34px;height:34px;border-radius:0;
  color:var(--tinte-2);font-size:17px;transition:.16s}
.kopf-suche:hover{background:var(--flaeche-2);color:var(--tinte)}

.schnellsuche{position:relative;margin:0 0 12px}
.schnellsuche form{
  display:flex;align-items:center;gap:10px;padding:12px 15px;border-radius:0;
  background:var(--flaeche);border:1px solid var(--linie);box-shadow:var(--s1);
  transition:border-color .18s,box-shadow .18s;
}
.schnellsuche form:focus-within{border-color:var(--akzent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--akzent) 22%,transparent)}
.schnellsuche .ic{font-size:18px;color:var(--tinte-3);flex:0 0 auto}
.schnellsuche input[type=search]{
  flex:1;min-width:0;border:none;background:none;font:inherit;font-size:15px;
  color:var(--tinte);padding:0;outline:none;
}
.schnellsuche input[type=search]::-webkit-search-cancel-button{display:none}
.suchleeren{display:grid;place-items:center;width:26px;height:26px;border-radius:99px;
  background:var(--flaeche-2);color:var(--tinte-2);font-size:13px;flex:0 0 auto}
.suchleeren:hover{background:var(--flaeche-3)}
/* Ohne das gewinnt display:grid gegen das hidden-Merkmal, und der
   Leeren-Knopf steht auch im leeren Feld. */
.suchleeren[hidden]{display:none}

.suchvorschlaege{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;
  background:var(--flaeche);border:1px solid var(--linie);border-radius:0;
  box-shadow:var(--s3);overflow:hidden;max-height:60vh;overflow-y:auto;
}
.vorschlag{
  display:flex;align-items:center;gap:12px;padding:11px 15px;text-decoration:none;
  color:inherit;border-bottom:1px solid var(--linie);transition:background .14s;
}
.vorschlag:last-child{border-bottom:none}
.vorschlag:hover,.vorschlag.ist-gewaehlt{background:var(--flaeche-2)}
.vorschlag-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.vorschlag-text strong{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vorschlag-unten{font-size:12px;color:var(--tinte-3)}
.vorschlag-preis{font-size:13px;color:var(--tinte-2);flex:0 0 auto}
.vorschlag--alle{background:var(--flaeche-2);font-size:13px;font-weight:700;color:var(--akzent-schrift);
  justify-content:center}
.vorschlag-leer{padding:14px 15px;font-size:13.5px;color:var(--tinte-3)}

/* Ergebnisseite */
.suchseite{display:flex;flex-direction:column;gap:20px;padding:10px 0 30px}
.suchformular-feld{
  display:flex;align-items:center;gap:12px;padding:8px 8px 8px 16px;border-radius:0;
  background:var(--flaeche);border:1px solid var(--linie);box-shadow:var(--s2);
}
.suchformular-feld:focus-within{border-color:var(--akzent)}
.suchformular-feld .ic{color:var(--tinte-3);flex:0 0 auto}
.suchformular-feld input[type=search]{
  flex:1;min-width:0;border:none;background:none;font:inherit;font-size:16.5px;padding:8px 0;outline:none;
}
.suchformular-wo{margin:9px 2px 0;font-size:12.5px;color:var(--tinte-3)}
.suchformular-wo a{color:var(--akzent-schrift);font-weight:700}

.fundgruppe h2{font-size:15px;display:flex;align-items:center;gap:8px;margin-bottom:10px}
.fundzahl{font-size:11px;font-weight:700;color:var(--tinte-3);background:var(--flaeche-2);
  border-radius:99px;padding:2px 8px}
.fundgruppe--leise h2{color:var(--tinte-3)}
.fundgruppe > .leise{margin:-4px 0 10px;font-size:13px}
.fundliste{display:flex;flex-direction:column;gap:7px}
.fund{
  display:flex;align-items:center;gap:12px;padding:12px 14px;text-decoration:none;color:inherit;
  background:var(--flaeche);border:1px solid var(--linie);border-radius:0;transition:.18s;
}
.fund:hover{border-color:var(--linie-2);transform:translateY(-1px);box-shadow:var(--s2)}
.fund--vergangen{background:transparent;border-style:dashed}
.fund-zeichen{
  width:38px;height:38px;flex:0 0 auto;border-radius:0;color:#fff;display:grid;place-items:center;
  font-size:12.5px;font-weight:700;letter-spacing:.02em;
}
.fund-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.fund-name{font-size:15px;font-weight:600;line-height:1.3}
.fund-name mark{background:color-mix(in srgb,var(--akzent) 38%,transparent);color:inherit;
  border-radius:0;padding:0 1px}
.fund-unten{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12.5px;color:var(--tinte-3)}
.fund-punkt{color:var(--linie-2)}
.fund-kennung{font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  padding:2px 7px;border-radius:99px}
.fund-kennung--vegetarisch,.fund-kennung--vegan{background:var(--gruen-sanft);color:var(--gruen)}
.fund-kennung--fisch{background:#E3EDF3;color:#2F6685}
.fund-preis{font-size:14px;color:var(--tinte-2);flex:0 0 auto}

.suchleer{text-align:center;padding:34px 16px;display:flex;flex-direction:column;align-items:center;gap:12px}
.suchleer .ic{color:var(--linie-2)}
.suchleer h2{font-size:18px}
.suchleer p{margin:0;font-size:14px;color:var(--tinte-3);max-width:44ch;line-height:1.55}
.suchproben{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
:root[data-theme="dark"] .fund-kennung--fisch{background:#16262E;color:#7FB2CC}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .fund-kennung--fisch{background:#16262E;color:#7FB2CC}
}

/* ------------------------------------------------- Umschalter Darstellung */
.darstellungsknopf{
  display:grid;place-items:center;width:34px;height:34px;border-radius:0;
  color:var(--tinte-2);font-size:16px;transition:background .16s,color .16s;flex:0 0 auto;
}
.darstellungsknopf:hover{background:var(--flaeche-2);color:var(--tinte)}
.darstellungsknopf[data-stand="dunkel"]{color:var(--akzent-schrift)}
.seitenleiste-fuss .darstellungsknopf{display:flex;align-items:center;justify-content:flex-start;
  width:auto;height:32px;padding:0 8px;gap:8px}
.seitenleiste-fuss .darstellungsknopf::after{
  content:attr(title);font-size:12px;font-weight:600;color:var(--tinte-3);
}

/* ------------------------------------------------------------ Tageswahl */
.nur-vorlesen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tagwahl{display:flex;align-items:center;gap:10px;margin:16px 0 0}
.tagwahl-band{
  display:flex;gap:7px;overflow-x:auto;scroll-snap-type:x proximity;
  padding:2px 2px 6px;margin:-2px -2px -6px;flex:1;min-width:0;
  scrollbar-width:none;-ms-overflow-style:none;
}
.tagwahl-band::-webkit-scrollbar{display:none}
.tagwahl-tag{
  /* position:relative hält den nur vorgelesenen Text im Feld — sonst hängt
     er am Seitenrand und macht das Dokument breiter als das Fenster. */
  position:relative;
  flex:0 0 auto;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:2px;
  min-width:62px;padding:9px 10px 8px;border-radius:0;text-decoration:none;color:var(--tinte-2);
  background:var(--flaeche);border:1px solid var(--linie);transition:.16s;
}
.tagwahl-tag:hover{border-color:var(--linie-2);color:var(--tinte);transform:translateY(-1px)}
.tagwahl-name{font-size:12.5px;font-weight:700;letter-spacing:-.01em}
.tagwahl-zahl{font-size:11.5px;color:var(--tinte-3)}
.tagwahl-punkt{width:5px;height:5px;border-radius:99px;background:var(--gruen);margin-top:2px}
.tagwahl-tag.ist-leer{background:transparent;border-style:dashed;color:var(--tinte-3)}
.tagwahl-tag.ist-leer .tagwahl-punkt{background:var(--linie-2)}
.tagwahl-tag.ist-gewaehlt{
  background:var(--tief);border-color:var(--tief);color:#F3F4EF;
  box-shadow:0 2px 4px rgba(20,23,15,.04),0 12px 26px -16px var(--tief);
}
.tagwahl-tag.ist-gewaehlt .tagwahl-zahl{color:#B7C4B8}
.tagwahl-tag.ist-gewaehlt .tagwahl-punkt{background:var(--akzent)}
.tagwahl-sprung{flex:0 0 auto}
.tagwahl-sprung label{
  display:flex;align-items:center;gap:6px;height:100%;min-height:58px;padding:0 12px;
  border-radius:0;border:1px dashed var(--linie-2);color:var(--tinte-2);cursor:pointer;
  transition:.16s;position:relative;
}
.tagwahl-sprung label:hover{border-color:var(--akzent);color:var(--akzent-schrift)}
.tagwahl-sprung .ic{font-size:17px}
.tagwahl-sprung input[type=date]{
  position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;
  font:inherit;border:none;background:none;color:transparent;
}
@media (max-width:560px){
  .tagwahl-tag{min-width:56px;padding:8px 8px 7px}
  .tagwahl-sprung label{min-height:54px;padding:0 10px}
}

/* ---------------------------------------------------------------- Karte */
.abschnitt--karte{padding-top:6px}
.karte{margin-top:10px}
.karte-flaeche{
  position:relative;height:280px;border-radius:0;overflow:hidden;
  background:var(--flaeche-2);border:1px solid var(--linie);
  cursor:grab;touch-action:none;user-select:none;
}
.karte-flaeche.ist-gezogen{cursor:grabbing}
.karte-schicht{position:absolute;inset:0;will-change:transform}
.karte-kachel{position:absolute;width:256px;height:256px;max-width:none;pointer-events:none}
.karte-nadel{
  position:absolute;transform:translate(-50%,-100%);pointer-events:none;
  filter:drop-shadow(0 3px 5px rgba(20,23,15,.35));will-change:transform;
}
.karte-knoepfe{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:5px}
.karte-knoepfe button{
  width:34px;height:34px;border-radius:0;background:var(--flaeche);color:var(--tinte);
  font-size:19px;font-weight:700;line-height:1;display:grid;place-items:center;
  box-shadow:var(--s2);border:1px solid var(--linie);
}
.karte-knoepfe button:hover{background:var(--flaeche-2)}
.karte-hinweis{
  position:absolute;right:0;bottom:0;padding:3px 8px;font-size:10.5px;
  background:color-mix(in srgb,var(--flaeche) 86%,transparent);color:var(--tinte-2);
  border-top-left-radius:8px;
}
.karte-hinweis a{color:inherit;text-decoration:underline}
@media (max-width:560px){ .karte-flaeche{height:230px} }
/* Die Farbe sagt den Zustand des Tages: Rot heißt „hier steht noch nichts",
   Gelb „eingetragen, aber noch nicht online", Grün „steht beim Gast". Vorher
   stand dort eine nackte Zahl, die niemandem sagte, was sie zählt. */
.wochenleiste-tag.ist-leer{border-color:color-mix(in srgb,var(--rot) 38%,var(--linie));
  background:color-mix(in srgb,var(--rot) 6%,var(--flaeche))}
.wochenleiste-tag.ist-leer .blattkopf{background:color-mix(in srgb,var(--rot) 14%,var(--flaeche-3));
  color:color-mix(in srgb,var(--rot) 86%,#000)}
/* Online, aber nicht alles: Da steht etwas, das der Gast noch nicht sieht.
   Dieselbe Farbe wie das Band über dem Editor. */
.wochenleiste-tag.ist-wartet{border-color:color-mix(in srgb,var(--rot) 52%,var(--linie));
  background:color-mix(in srgb,var(--rot) 8%,var(--flaeche))}
.wochenleiste-tag.ist-wartet:not(.ist-gewaehlt) .blattkopf{
  background:color-mix(in srgb,var(--rot) 18%,var(--flaeche-3));
  color:color-mix(in srgb,var(--rot) 86%,#000)}
.wochenleiste-tag.ist-wartet .blattsagt{color:color-mix(in srgb,var(--rot) 86%,#000)}
.wochenleiste-tag.ist-entwurf{border-color:color-mix(in srgb,var(--akzent) 52%,var(--linie));
  background:color-mix(in srgb,var(--akzent) 9%,var(--flaeche))}
.wochenleiste-tag.ist-entwurf .blattkopf{background:color-mix(in srgb,var(--akzent) 22%,var(--flaeche-3));
  color:color-mix(in srgb,var(--akzent-schrift) 88%,#000)}
.wochenleiste-tag.ist-online{border-color:color-mix(in srgb,var(--gruen) 40%,var(--linie));
  background:color-mix(in srgb,var(--gruen) 7%,var(--flaeche))}
/* Der Kopf trägt eine dunklere Fassung der Farbe: Das helle Grün auf dem
   grünen Grund kam auf 3,75 — zu wenig für eine Versalzeile. */
.wochenleiste-tag.ist-online .blattkopf{background:color-mix(in srgb,var(--gruen) 16%,var(--flaeche-3));
  color:color-mix(in srgb,var(--gruen) 78%,#000)}
/* Was die Farbe meint, steht klein darunter — Farbe allein ist keine
   Auskunft, und wer sie nicht unterscheidet, liest es. */
.blattsagt{display:block;margin-top:4px;padding:0 6px;font-size:10px;line-height:1.25;
  font-weight:600;text-align:center;color:var(--tinte-3)}
.wochenleiste-tag.ist-leer .blattsagt{color:var(--rot)}
.wochenleiste-tag.ist-entwurf .blattsagt{color:var(--akzent-schrift)}
.wochenleiste-tag.ist-online .blattsagt{color:color-mix(in srgb,var(--gruen) 82%,#000)}
/* Im dunklen Modus liegt dieselbe Farbe auf dunklem Grund: Dort muss die
   Schrift heller werden, nicht dunkler. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .wochenleiste-tag.ist-leer:not(.ist-gewaehlt) .blattkopf,
  :root:not([data-theme="light"]) .wochenleiste-tag.ist-leer .blattsagt{
    color:color-mix(in srgb,var(--rot) 72%,#FFF)}
  :root:not([data-theme="light"]) .wochenleiste-tag.ist-entwurf:not(.ist-gewaehlt) .blattkopf,
  :root:not([data-theme="light"]) .wochenleiste-tag.ist-entwurf .blattsagt{
    color:color-mix(in srgb,var(--akzent) 88%,#FFF)}
  :root:not([data-theme="light"]) .wochenleiste-tag.ist-online:not(.ist-gewaehlt) .blattkopf,
  :root:not([data-theme="light"]) .wochenleiste-tag.ist-online .blattsagt{
    color:color-mix(in srgb,var(--gruen) 76%,#FFF)}
}
:root[data-theme="dark"] .wochenleiste-tag.ist-leer:not(.ist-gewaehlt) .blattkopf,
:root[data-theme="dark"] .wochenleiste-tag.ist-leer .blattsagt{
  color:color-mix(in srgb,var(--rot) 72%,#FFF)}
:root[data-theme="dark"] .wochenleiste-tag.ist-entwurf:not(.ist-gewaehlt) .blattkopf,
:root[data-theme="dark"] .wochenleiste-tag.ist-entwurf .blattsagt{
  color:color-mix(in srgb,var(--akzent) 88%,#FFF)}
:root[data-theme="dark"] .wochenleiste-tag.ist-online:not(.ist-gewaehlt) .blattkopf,
:root[data-theme="dark"] .wochenleiste-tag.ist-online .blattsagt{
  color:color-mix(in srgb,var(--gruen) 76%,#FFF)}
/* Im Dunkeln bleibt die Fläche schwarz. Ein grün eingefärbtes Blatt sah auf
   schwarzem Grund aus wie eine eigene Farbwelt — dort sagt die Schrift den
   Zustand, und der Rahmen deutet ihn an. Gelb und Rot dürfen bleiben: Sie
   sind Warnungen und sollen auffallen. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .wochenleiste-tag.ist-online{
    background:var(--flaeche)}
  :root:not([data-theme="light"]) .wochenleiste-tag.ist-online:not(.ist-gewaehlt) .blattkopf{
    background:var(--flaeche-3)}
}
:root[data-theme="dark"] .wochenleiste-tag.ist-online{background:var(--flaeche)}
:root[data-theme="dark"] .wochenleiste-tag.ist-online:not(.ist-gewaehlt) .blattkopf{
  background:var(--flaeche-3)}
.wochenleiste-tag.ist-gewaehlt{background:var(--tief);border-color:var(--tief);color:#F3F4EF}
/* Das abgerissene Blatt: dunkel, mit goldenem Kopf. */
.wochenleiste-tag.ist-gewaehlt .blattkopf{background:var(--akzent);color:var(--akzent-auf)}
.wochenleiste-tag.ist-gewaehlt .blattzahl{color:#F3F4EF}
.wochenleiste-tag.ist-gewaehlt .blattmonat{color:#B7C4B8}
.wochenleiste-tag.ist-gewaehlt .wochenleiste-datum{color:#B7C4B8}
/* Das abgerissene Blatt ist dunkel — dort trägt die Schrift die Farbe. */
.wochenleiste-tag.ist-gewaehlt .blattsagt{color:#D7DED8}
.wochenleiste-tag.ist-gewaehlt.ist-leer .blattkopf,
.wochenleiste-tag.ist-gewaehlt.ist-entwurf .blattkopf,
.wochenleiste-tag.ist-gewaehlt.ist-online .blattkopf{background:var(--akzent);color:var(--akzent-auf)}
/* Auf dem abgerissenen Blatt trägt der Kopf sonst immer Gold — dann sähe
   man dem gewählten Tag nicht an, dass hier etwas wartet. */
.wochenleiste-tag.ist-gewaehlt.ist-wartet .blattkopf{background:var(--rot);color:#FFF5F3}
.wochenleiste-tag.ist-gewaehlt.ist-wartet .blattsagt{color:#F6B8AC}

/* Reihenfolge der gewählten Gerichte */
.gewaehlt-werkzeuge{display:flex;gap:3px;margin-left:8px;flex:0 0 auto}
.gewaehlt-werkzeuge button{
  width:26px;height:26px;border-radius:0;background:var(--flaeche-2);color:var(--tinte-2);
  font-size:13px;line-height:1;display:grid;place-items:center;transition:.15s;
}
.gewaehlt-werkzeuge button:hover:not(:disabled){background:var(--flaeche-3);color:var(--tinte)}
.gewaehlt-werkzeuge button:disabled{opacity:.3;cursor:not-allowed}
.gewaehlt-zeile{display:flex;align-items:center;gap:8px}
.wochenblock h3{font-size:13px;margin-bottom:8px}
.wochenwahl-eintrag.ist-gewaehlt{background:var(--akzent-sanft);color:var(--akzent-schrift)}

/* -------------------------------------------------- Angebote der Woche */
.wochenteil{margin-top:10px;padding-top:10px;border-top:1px dashed var(--linie-2);
  display:flex;flex-direction:column;gap:2px}
.wochenteil-kopf{
  display:flex;align-items:center;gap:6px;margin-bottom:4px;
  font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--akzent-schrift);
}
.wochenteil-kopf .ic{font-size:13px}
.gericht--woche{background:var(--akzent-sanft)!important}
.gericht--woche .gericht-name{color:var(--tinte)}
.wochengetraenk{
  display:flex;align-items:center;gap:9px;margin-top:6px;padding:9px 11px;border-radius:0;
  background:var(--tief);color:#EAF0E9;font-size:13.5px;
}
.wochengetraenk .ic{font-size:16px;color:var(--akzent);flex:0 0 auto}
.wochengetraenk-text{flex:1;min-width:0;line-height:1.35}
.wochengetraenk-text strong{color:#fff;font-weight:700}
.wochengetraenk-text em{font-style:normal;color:#A9B5A6;font-size:12.5px;margin-left:4px}
.wochengetraenk .preis{color:var(--akzent);font-weight:700}
.statistik-kopf > span:first-child{grid-column:1 / 3}
.statistik-name em{font-weight:400;font-size:12px;margin-left:5px}
.statistik-balken span{display:block;height:100%;border-radius:99px;background:var(--akzent)}
.statistik-rechts.ist-gemerkt{color:var(--rot);font-weight:700;display:flex;align-items:center;
  justify-content:flex-end;gap:4px}
.statistik-rechts.ist-gemerkt .ic{font-size:13px;fill:currentColor}
@media (max-width:760px){
  .statistik-kopf,.statistik-zeile{grid-template-columns:22px 1fr 54px 52px;gap:7px;padding:9px 8px}
  .statistik-kopf > span:nth-child(4),.statistik-zeile > span:nth-child(4),
  .statistik-kopf > span:last-child,.statistik-zeile > span:last-child{display:none}
  .statistik-name{font-size:13.5px}
}
.kartendatei img{width:100%;height:76px;object-fit:cover;border-radius:0}
.kartendatei a{color:var(--akzent-schrift);font-weight:700;text-decoration:none}

.kartenseiten{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.kartenseite{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit;
  border:1px solid var(--linie);border-radius:0;padding:8px;background:var(--flaeche);transition:.18s}
.kartenseite:hover{border-color:var(--linie-2);transform:translateY(-1px);box-shadow:var(--s2)}
.kartenseite img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:0}
.kartenseite-pdf{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  aspect-ratio:3/4;border-radius:0;background:var(--flaeche-2);color:var(--tinte-3);
  font-weight:700;letter-spacing:.06em;font-size:12px}
.kartenseite-nr{font-size:12px;color:var(--tinte-3);text-align:center}

/* --------------------------------------------------- Warnung bei Doppelten */
.doppelt-warnung{
  margin:-4px 0 4px;padding:11px 13px;border-radius:0;font-size:12.5px;line-height:1.45;
  background:var(--akzent-sanft);color:var(--akzent-schrift);
}
.doppelt-warnung.ist-gleich{background:var(--rot-sanft);color:var(--rot)}
.doppelt-warnung strong{display:block;margin-bottom:4px;font-size:13px}
.doppelt-warnung ul{margin:0;padding-left:17px;display:flex;flex-direction:column;gap:2px}

/* ------------------------------------------------------------ Menüpreise */
.preisstufen{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;padding-top:10px;
  border-top:1px dashed var(--linie-2)}
.preisstufe{
  display:inline-flex;align-items:baseline;gap:6px;padding:6px 11px;border-radius:99px;
  background:var(--tief);color:#EAF0E9;font-size:12.5px;
}
.preisstufe b{font-size:14px;color:var(--akzent);font-weight:700}
/* Oben unter dem Namen brauchen sie keine eigene Trennlinie — der goldene
   Strich des Kopfes trennt schon, und zwei Linien übereinander sehen aus
   wie ein Fehler. */
.preisstufen--oben{border-top:none;padding-top:0;margin-top:12px;justify-content:center}

/* ====================================================== Lokalseite, Aufbau
   Auf dem Telefon bleibt alles untereinander, genau in der Reihenfolge des
   Quelltexts. Ab 900 Pixeln wandert die rechte Spalte neben das Essen:
   links, was heute auf dem Teller liegt — rechts, was man braucht, um
   hinzukommen. */
.inhalt--lokal{max-width:940px}
.lokalraster{display:grid;grid-template-columns:minmax(0,1fr);align-items:start}
@media(min-width:900px){
  .lokalraster{grid-template-columns:minmax(0,1fr) 296px;column-gap:30px;padding:0 6px}
  .lokalraster-haupt > .abschnitt:first-child{padding-top:0}
  /* Die rechte Spalte als Karten: Wenn links wenig steht, soll rechts nicht
     aussehen wie Text, der im Weiß schwimmt. */
  .lokalraster-rand > .abschnitt{
    border:1px solid var(--linie);border-radius:0;background:var(--flaeche);
    padding:16px;margin-bottom:12px;
  }
  .lokalraster-rand > .abschnitt + .abschnitt{margin-top:0}
  .lokalraster-rand > .abschnitt-merken{padding-bottom:18px}
  .lokalraster-rand{position:sticky;top:76px}
  /* Der Merken-Knopf ist auf dem Rechner das Erste in der Spalte und braucht
     keine Trennlinie über sich. */
  .abschnitt--merken{padding-top:0}
}
@media(max-width:899px){
  /* Auf dem Telefon steht der Merken-Knopf ganz unten, wie gewohnt. */
  .lokalraster-rand{display:flex;flex-direction:column}
  .abschnitt--merken{order:9}
}

/* Die Überschriften der Lokalseite in der Serifenschrift des Hauses: Heute,
   Diese Woche, Über uns. Als Kapitälchen-Zeile las sich die Seite wie eine
   Auswertung — hier geht es um Essen. */
.lokalraster-haupt > .abschnitt > .abschnitt-titel{
  font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;
  font-size:21px;letter-spacing:-.01em;text-transform:none;color:var(--tinte);
  margin-bottom:12px;
}
.lokalraster-haupt > .abschnitt > .abschnitt-titel::after{opacity:.7}

/* Drei Häuser aus demselben Ort, die heute etwas gemeldet haben. Steht hier
   nichts auf der Karte, ist das die einzige Auskunft, die gerade weiterhilft. */
.nachbarn{display:flex;flex-direction:column;gap:8px}
.nachbar{
  display:flex;align-items:center;gap:12px;padding:12px 14px;text-decoration:none;color:inherit;
  background:var(--flaeche);border:1px solid var(--linie);border-radius:0;transition:.18s;
}
.nachbar:hover{border-color:var(--tinte-3);transform:translateY(-1px);box-shadow:var(--s1)}
.nachbar-marke{
  flex:0 0 auto;width:34px;height:34px;border-radius:0;display:grid;place-items:center;
  color:#fff;font-family:"Bricolage Grotesque";font-weight:800;font-size:12px;letter-spacing:-.03em;
}
.nachbar-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.nachbar-text strong{font-size:14.5px;letter-spacing:-.01em}
.nachbar-text .leise{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nachbar-preis{flex:0 0 auto;font-size:12.5px;color:var(--tinte-2)}

/* Kopf: Name links, Preise rechts — sobald Platz dafür da ist. */
.lokalkopf-reihe{display:flex;gap:22px;align-items:flex-end;flex-wrap:wrap}
.lokalkopf-links{flex:1;min-width:0}
.kopfkachel{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:14px 16px;border-radius:0;background:rgba(0,0,0,.24);
  border:1px solid rgba(255,255,255,.26);backdrop-filter:blur(4px);min-width:164px;
  box-shadow:0 10px 30px -18px rgba(0,0,0,.8);
}
@media(max-width:620px){
  .kopfkachel{width:100%;flex-direction:row;flex-wrap:wrap;align-items:center;gap:7px}
}
.kopfkachel-titel{
  font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;opacity:.88;
}
@media(max-width:620px){.kopfkachel-titel{width:100%}}
.kopfpreis--leise{opacity:.94;font-size:12px}
.kopfpreis{
  display:inline-flex;align-items:baseline;gap:7px;font-size:12.5px;white-space:nowrap;
  color:rgba(255,255,255,.92);
}
.kopfpreis b{font-size:16px;font-weight:700;color:var(--akzent)}
.kopfpreis--getraenk{align-items:center;gap:6px;font-size:11.5px;opacity:.85;white-space:normal}
.kopfpreis--getraenk .ic{font-size:14px;color:var(--akzent)}

/* Die Woche als eigene Karte statt eingeklemmt im Tagesmenü. */
.menuekarte--woche{background:var(--flaeche-2);padding:14px 16px}
.menuekarte--woche .wochenteil{margin-top:0;padding-top:0;border-top:none}

/* Wochenliste: jede Zeile führt auf den Tag. */
a.wochenzeile{
  text-decoration:none;color:inherit;padding:8px 11px;margin:0 -11px;border-radius:0;
  transition:background .15s;
}
a.wochenzeile:hover{background:var(--flaeche-2)}
.wochenzeile-text{flex:1;min-width:0}
/* Kleine Gliederung: Gang links, Gericht rechts. Grundlage; die Gastseiten
   setzen sie in tafel.css feiner. */
.kleinkarte{display:flex;flex-direction:column;gap:3px;min-width:0}
.kleingericht{display:grid;grid-template-columns:70px minmax(0,1fr);gap:0 8px;
  font-size:13px;line-height:1.45;color:var(--tinte-2)}
.kleingang{font-style:normal;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tinte-3)}
.kleinname{min-width:0}
.wochenzeile-heute{
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--akzent-schrift);background:var(--akzent-sanft);padding:2px 7px;border-radius:99px;
  flex:0 0 auto;
}

/* Rechte Spalte */
.randadresse{margin:0 0 10px;font-size:13.5px;color:var(--tinte-2);line-height:1.45}
.randlinks{display:flex;flex-direction:column;gap:9px;font-size:13.5px}
.randlinks a{display:flex;align-items:center;gap:8px;color:var(--tinte-2);text-decoration:none;
  overflow-wrap:anywhere}
.randlinks a:hover{color:var(--akzent-schrift)}
.randlinks .ic{font-size:15px;color:var(--tinte-3);flex:0 0 auto}
.kartenfuss--eng{margin-top:10px;font-size:12.5px}
@media(min-width:1040px){
  .widgetbau{grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:32px}
  .widgetbau-vorschau{position:sticky;top:18px}
}
.schalterliste .haken{margin:0;padding:8px 10px;border-radius:0;background:var(--flaeche-2)}
.schalterliste .haken em{display:block;font-size:11.5px;font-style:normal;margin-top:2px}
.farbfeld input[type="color"]{
  width:44px;height:38px;padding:2px;border-radius:0;border:1px solid var(--linie);
  background:var(--flaeche);cursor:pointer;flex:0 0 auto;
}
.farbfeld input[type="text"]{flex:1;min-width:0}
.vorschaubuehne iframe{width:100%;border:0;display:block;height:420px;background:transparent}
.schnipsel code{
  flex:1;min-width:0;font-family:"DM Mono",ui-monospace,monospace;font-size:12px;
  overflow-x:auto;white-space:nowrap;color:var(--tinte-2);
}
.mehrwege summary{cursor:pointer;font-size:13px;color:var(--akzent-schrift);margin-bottom:10px}
.mehrwege code{font-family:"DM Mono",ui-monospace,monospace;font-size:12px}

/* ======================================================== Schnellwahl (Tag) */
/* Eine flache Werkzeugzeile: So bricht sie Knopf für Knopf um, statt als
   ganzer Block in die nächste Zeile zu springen. */
.schnellwahl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.schnellwahl-rechts{display:contents}
.sortierwahl{
  display:inline-flex;align-items:center;gap:6px;padding:0 10px;height:34px;border-radius:99px;
  border:1px solid var(--linie);background:var(--flaeche);color:var(--tinte-2);font-size:12.5px;
}
.sortierwahl .ic{font-size:14px;color:var(--tinte-3)}
.sortierwahl select{
  border:0;background:none;font:inherit;color:inherit;padding:0 2px;cursor:pointer;
  max-width:150px;
}
.zustandspille{
  display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;color:var(--tinte-3);
}
.zustandspille.ist-offen{color:var(--gruen)}
.zustandspille.ist-knapp{color:var(--akzent-schrift)}
.merkmalzeile{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.merkmal{
  font-size:10.5px;padding:2px 8px;border-radius:99px;color:var(--tinte-3);
  background:var(--flaeche-2);border:1px solid var(--linie);
}
.lokalkarte.ist-vorschlag{
  outline:2px solid var(--akzent);outline-offset:3px;
  animation:vorschlagPuls 1.6s ease-out 1;
}
@keyframes vorschlagPuls{
  0%{box-shadow:0 0 0 0 rgba(200,130,30,.45)}
  100%{box-shadow:0 0 0 18px rgba(200,130,30,0)}
}
@media(prefers-reduced-motion:reduce){.lokalkarte.ist-vorschlag{animation:none}}
.suchproben-titel{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinte-3);margin:18px 0 8px}
.suchverlauf .verweis{margin-left:6px;font-size:12px}
.meintest{font-size:15px;color:var(--tinte-2);margin:0 0 18px}
.meintest a{color:var(--akzent-schrift);font-weight:700}

/* ---------------------------------------------------------- Allergene */
.feld--gruppe{border:0;padding:0;margin:0}
.feld--gruppe legend{font-size:12.5px;font-weight:600;color:var(--tinte-2);padding:0;margin-bottom:7px}
/* Ein Häkchen ist kein Eingabefeld.
   .feld input setzt width:100% — richtig für Text- und Zahlenfelder, aber das
   Allergen-Gitter steckt in einem <fieldset class="feld">, und dort wurde das
   Kästchen 234px breit. Es schob die Beschriftung aus dem Kasten heraus, wo
   sie Buchstabe für Buchstabe umbrach. Gilt für alle Häkchen und Radios in
   einem Feldrahmen, nicht nur für die Allergene. */
.feld input[type=checkbox],.feld input[type=radio]{width:auto;flex:0 0 auto}
.allergen input{flex:0 0 auto;width:auto}
.allergen b{font-family:"DM Mono",ui-monospace,monospace;color:var(--tinte)}
.allergenzeile{font-size:11px;color:var(--tinte-3);margin-top:3px;letter-spacing:.04em}
.chip--klein{font-size:11.5px;padding:5px 9px}
.chip--klein b{font-family:"DM Mono",ui-monospace,monospace}
.chip--klein .chip-lang{max-width:11ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ------------------------------------------------- Mehrere Häuser auf der Karte */
.karte-marken{position:absolute;inset:0;pointer-events:none}
.karte-marke{
  position:absolute;transform:translate(-50%,-50%);pointer-events:auto;text-decoration:none;
  display:flex;align-items:center;gap:6px;height:30px;padding:0 10px 0 4px;border-radius:99px;
  color:#fff;font-size:12px;font-weight:700;box-shadow:0 6px 16px -8px rgba(0,0,0,.7);
  border:2px solid rgba(255,255,255,.85);white-space:nowrap;
}
.karte-marke span{
  width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.2);
  display:grid;place-items:center;font-size:10px;letter-spacing:-.02em;flex:0 0 auto;
}
.karte-marke em{font-style:normal;font-size:11.5px;max-width:15ch;overflow:hidden;text-overflow:ellipsis}
.karte-marke:hover{z-index:5;filter:brightness(1.08)}
@media(max-width:560px){.karte-marke em{display:none}.karte-marke{padding:0 4px}}
.tageskarte{margin:0 0 14px}
.karte--ort{height:360px;margin-top:10px}

/* --------------------------------------------- Wetter und Preisvergleich */
.wetterzeile{
  display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:13px;color:var(--tinte-2);
  background:var(--akzent-sanft);border-radius:0;padding:9px 13px;
}
.wetterzeile .ic{font-size:16px;color:var(--akzent-schrift);flex:0 0 auto}
.vergleich{padding-top:6px}
.vergleichzeile{margin-bottom:14px}
.vergleich-name{font-weight:700;font-size:14.5px;display:block;margin-bottom:6px}
.vergleich-haeuser{display:flex;flex-wrap:wrap;gap:7px}
.vergleich-haus{
  display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 5px;border-radius:99px;
  background:var(--flaeche-2);border:1px solid var(--linie);text-decoration:none;color:var(--tinte-2);
  font-size:12.5px;transition:.15s;
}
.vergleich-haus:hover{border-color:var(--linie-2);transform:translateY(-1px)}
.vergleich-haus.ist-guenstig{border-color:var(--akzent);background:var(--akzent-sanft);color:var(--akzent-schrift)}
.vergleich-zeichen{
  width:22px;height:22px;border-radius:50%;color:#fff;display:grid;place-items:center;
  font-size:9.5px;font-weight:700;flex:0 0 auto;
}
.vergleich-preis{font-weight:700}
.musterliste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:14px}
.musterliste span{display:block;font-size:12.5px;margin-top:1px}
.rueckblick summary{
  cursor:pointer;font-size:13.5px;color:var(--akzent-schrift);font-weight:600;
  padding:10px 12px;border-radius:0;background:var(--flaeche-2);
}
.rueckblick[open] summary{margin-bottom:4px}

/* ------------------------------------------------- Konto: Tage und Geräte */
.tagezeiten{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:6px}
.tagzeile{display:flex;align-items:center;gap:8px;background:var(--flaeche-2);border-radius:0;padding:5px 9px}
.tagzeile .haken{flex:1;margin:0}
.tagzeit{width:104px;flex:0 0 auto}
.einfache-zeile{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--linie)}
.einfache-zeile:last-child{border-bottom:0}
.feld-mit-einheit{display:flex;align-items:center;gap:8px}

.lieblingsliste{display:flex;flex-direction:column;gap:4px}
.lieblingszeile{
  display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:0;background:var(--flaeche-2);
}
.lieblings-text{flex:1;min-width:0;text-decoration:none;color:inherit}
.lieblings-text strong{display:block}
.lieblings-text .leise{font-size:12.5px}
.listenzeile--notiz{display:block;padding:0}
.listenzeile-haupt{display:flex;align-items:center;gap:12px;padding:12px 14px;text-decoration:none;color:inherit}
.notizform{display:flex;gap:8px;padding:0 14px 12px;align-items:center}
.notizform input{flex:1;min-width:0;font-size:12.5px;padding:7px 10px}

/* ------------------------------------------------------- Runde: Ergebnis, QR */
.ergebnisband{
  display:flex;align-items:center;gap:14px;margin:0 0 18px;padding:14px 16px;
  background:var(--akzent-sanft);border-radius:0;
}
.ergebnisband .ic--gross{font-size:22px;color:var(--akzent-schrift);flex:0 0 auto}
.ergebnisband div{flex:1;min-width:0}
.ergebnisband strong{display:block}
.ergebnisband .leise{font-size:12.5px}
.qrblock{margin-top:14px}
.qrblock summary{cursor:pointer;font-size:13px;color:var(--akzent-schrift)}
.qrbild{display:flex;align-items:center;gap:16px;margin-top:12px;flex-wrap:wrap}
.qrbild img{background:#fff;border-radius:0;padding:8px;border:1px solid var(--linie)}
.qrbild p{margin:0;font-size:12.5px;max-width:30ch}
.verlaufliste{display:flex;flex-direction:column;gap:6px;font-size:13.5px}
.verlaufzeile{display:flex;gap:12px;align-items:baseline}
.verlaufzeile span:nth-child(2){flex:1;min-width:0;font-weight:600}
.rundenband--klein{padding:12px 14px;font-size:13px}
.werkzeugblock summary{cursor:pointer;font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:8px}
.werkzeugblock summary .ic{color:var(--akzent-schrift)}
.werkzeugblock[open] summary{margin-bottom:12px}
.schnellform textarea{
  width:100%;font-family:"DM Mono",ui-monospace,monospace;font-size:13px;line-height:1.6;
  padding:11px 13px;border-radius:0;border:1px solid var(--linie);background:var(--flaeche-2);
  color:var(--tinte);resize:vertical;
}
.tagchip input{position:absolute;opacity:0;pointer-events:none}
.tagchip span{
  display:inline-flex;align-items:baseline;gap:5px;padding:6px 11px;border-radius:99px;
  border:1px solid var(--linie);background:var(--flaeche-2);font-size:12px;cursor:pointer;
}
/* Weiß auf dem Akzentton kommt nur auf 2,15 — dafür gibt es --akzent-auf. */
.tagchip input:checked + span{background:var(--akzent);border-color:var(--akzent);
  color:var(--akzent-auf);font-weight:600}
.tagchip input:focus-visible + span{outline:2px solid var(--akzent);outline-offset:2px}
.protokollblock summary{cursor:pointer;font-size:12.5px;color:var(--tinte-3)}
.protokollzeile span:first-child{flex:0 0 auto;font-size:11px}
.gewaehlt-zeile{cursor:grab}
.gewaehlt-zeile.wird-gezogen{opacity:.45}
.gewaehlt-zeile.ist-ziel{box-shadow:inset 0 2px 0 var(--akzent)}
.entwurfband{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;padding:11px 14px;
  background:var(--akzent-sanft);border-radius:0;font-size:13px;color:var(--akzent-schrift);
}
.entwurfband span{flex:1;min-width:180px}
.standardtag summary{cursor:pointer;font-size:13.5px;font-weight:600;display:flex;justify-content:space-between;gap:8px}
.standardtag summary .leise{font-weight:400;font-size:12px}
.standardliste .haken{font-size:12.5px;margin:0}
.urlaubsband{
  display:flex;align-items:center;gap:12px;margin:14px 16px 0;padding:12px 14px;border-radius:0;
  background:var(--flaeche-3);border:1px solid var(--linie-2);
}
.urlaubsband .ic{font-size:18px;color:var(--tinte-3);flex:0 0 auto}
.urlaubsband strong{display:block;font-size:14px}
.urlaubsband span{font-size:12.5px;color:var(--tinte-2)}
.still--urlaub{background:var(--flaeche-3)}
.gewaehlt-extras{display:flex;gap:6px;flex-wrap:wrap;width:100%;margin-top:6px;order:9}
.gewaehlt-wahl{
  font-size:11.5px;padding:4px 8px;border-radius:0;border:1px solid var(--linie);
  background:var(--flaeche);color:var(--tinte-2);max-width:170px;
}
.gewaehlt-zeile{flex-wrap:wrap}

/* --------------------------------------------------------- Menüpakete */
.paketkopf{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:14px 0 2px;padding:0 2px;
}
.paketkopf:first-child{margin-top:4px}
.paketname{
  font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--akzent-schrift);
}
.paketkopf .preis{font-size:15px;color:var(--akzent-schrift)}
.aushang figcaption em{display:block;font-size:11px;font-style:normal;margin-top:2px}
.entwurfkarte .leise{font-size:11.5px;line-height:1.4}
.einstieg-kopf h2{font-size:17px;margin:0}
.einstieg-kopf p{margin:2px 0 0;font-size:13px}
.einstieg-leiste span{display:block;height:100%;background:var(--akzent);border-radius:99px;transition:width .3s}
.einstieg-liste li{display:flex;align-items:center;gap:12px;padding:10px 4px;
  border-top:1px solid var(--linie)}
.einstieg-liste li:first-child{border-top:none}
.einstieg-liste li.ist-fertig .einstieg-haken{background:var(--gruen-sanft);color:var(--gruen)}
.einstieg-liste li.ist-fertig .einstieg-text strong{color:var(--tinte-3);text-decoration:line-through}
.einstieg-text strong{font-size:14.5px}
.einstieg-text em{font-style:normal;font-size:12.5px;color:var(--tinte-3)}
@media (max-width:560px){
  .einstieg-liste li{flex-wrap:wrap}
  .einstieg-liste li .knopf{margin-left:38px}
}

/* ------------------------------------------------------------- Melden
   Klein und unaufdringlich: Wer nichts zu melden hat, soll den Knopf
   gar nicht bemerken. */
.abschnitt--melden{margin-top:-6px}
/* „Stimmt hier etwas nicht?" war eine graue, unterstrichene Zeile — niemand
   erkannte darin einen Knopf. Jetzt ein Kasten in warnendem Rot: Eine
   Meldung ist billiger als ein falscher Preis, der eine Woche steht. */
.melden-knopf{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;
  padding:12px 14px;border-radius:0;cursor:pointer;
  background:var(--rot-sanft);border:1px solid color-mix(in srgb,var(--rot) 30%,transparent);
  color:var(--rot);font-size:13.5px;line-height:1.45}
.melden-knopf:hover{background:color-mix(in srgb,var(--rot) 15%,var(--flaeche))}
.melden-knopf strong{display:block;font-weight:700}
.melden-knopf em{display:block;font-style:normal;font-size:12.5px;color:var(--tinte-2);margin-top:2px}
.melden-knopf .ic{font-size:17px;flex:0 0 auto;margin-top:1px}
/* Der Wächter: ein Feld, ein Knopf, darunter die Wörter als Pillen, jede
   mit ihrem eigenen kleinen Kreuz. */
.waechterform{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-top:12px}
.waechterform .feld{flex:1 1 220px;margin:0}
.waechterliste{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.waechterzeile{display:inline-flex;align-items:center;gap:7px;padding:6px 8px 6px 12px;
  border-radius:999px;background:var(--akzent-sanft);color:var(--akzent-schrift);
  font-size:13px;font-weight:600}
.waechterzeile button{display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border:none;border-radius:50%;cursor:pointer;
  background:color-mix(in srgb,var(--akzent) 22%,transparent);color:var(--akzent-schrift)}
.waechterzeile button:hover{background:var(--akzent);color:var(--akzent-auf)}
.waechterzeile .ic{font-size:11px}

.meldegruende{display:flex;flex-direction:column;gap:2px;margin-bottom:6px}
.meldegrund{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:0;cursor:pointer}
.meldegrund:hover{background:var(--flaeche-2)}
.meldegrund:has(input:checked){background:var(--akzent-sanft);color:var(--akzent-schrift)}
.meldegrund input{accent-color:var(--akzent);width:17px;height:17px;flex:0 0 auto}
.meldegrund span{font-size:14px}
.meldeliste li{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;
  background:var(--flaeche);border:1px solid var(--linie);border-radius:0;padding:13px 15px}
.meldeliste strong{font-size:14.5px}
.meldeliste p{margin:3px 0 0;font-size:13.5px;color:var(--tinte-2)}
.meldeliste em{display:block;margin-top:4px;font-style:normal;font-size:12px}

/* ---------------------------------------------------------------- Region
   Eine Handvoll Orte nebeneinander. Die Zahl davor ist die einzige Frage,
   die zählt: kocht dort heute jemand? */
.held--knapp{padding-bottom:10px}
.ortsraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:6px}
.ortskachel{display:flex;align-items:center;gap:12px;padding:17px 18px;border-radius:0;
  background:var(--flaeche);border:1px solid var(--linie);text-decoration:none;color:inherit;transition:.2s}
.ortskachel:hover{transform:translateY(-2px);box-shadow:var(--s2);border-color:var(--akzent)}
.ortskachel strong{font-size:16px;flex:1;min-width:0}
.ortskachel-zahl{font-size:12.5px;color:var(--tinte-3);text-align:right}
.ortskachel-zahl em{font-style:normal;font-weight:700;color:var(--akzent-schrift);font-size:15px}
.ortskachel .ic{flex:0 0 auto;color:var(--tinte-3);font-size:15px}

/* Nachbarorte am Fuß der Ortsseite */
.nachbarn{margin-top:30px;padding-top:18px;border-top:1px solid var(--linie)}
.nachbarn h2{font-size:15px;margin:0 0 10px}
.nachbarn-liste{display:flex;flex-wrap:wrap;gap:8px}
.nachbarn-liste a{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:99px;
  background:var(--flaeche-2);text-decoration:none;color:var(--tinte-2);font-size:13.5px}
.nachbarn-liste a:hover{background:var(--akzent-sanft);color:var(--akzent-schrift)}
.nachbarn-liste b{font-weight:700}
.wochenbalken-saeule em{font-style:normal;font-size:11px;color:var(--tinte-3)}
.wochenbalken-saeule b{display:block;width:100%;border-radius:0;background:var(--akzent-sanft)}
.wochenbalken-saeule:last-child b{background:var(--akzent)}
.wochenbalken-saeule span{position:absolute;bottom:-18px;font-size:10px;color:var(--tinte-3);white-space:nowrap}
.tabelle--zahlen .tabellenzeile span:not(:first-child){text-align:right}
@media (max-width:640px){
  .tabelle--zahlen .tabellenzeile{grid-template-columns:1fr 56px 56px;gap:8px}
  .tabelle--zahlen .tabellenzeile span:nth-child(4),
  .tabelle--zahlen .tabellenzeile span:nth-child(5){display:none}
}
.quelle{background:var(--flaeche);border:1px solid var(--linie);border-radius:0;padding:15px 17px}
.quelle.ist-still{opacity:.55}
.quelle-kopf strong{font-size:15px;display:block}
.quelle-kopf > div:first-child > span{font-size:12.5px;display:block;margin-top:1px}
.quelle-marke .ic{font-size:13px}
.quelle-marke--fehler{background:var(--rot-sanft);color:var(--rot)}
.quelle-marke--neu{background:var(--akzent-sanft);color:var(--akzent-schrift)}
.quelle-protokoll li{display:flex;gap:10px}
.quelle-protokoll li span:first-child{flex:0 0 78px}
@media (max-width:760px){
  .tabelle--vorschau .tabellenzeile{grid-template-columns:1fr 1fr;gap:6px}
  .tabelle--vorschau .tabellenzeile span:nth-child(n+3){display:none}
}
.brief-kopf strong{font-size:15px;display:block}
.brief-kopf span{font-size:12.5px;display:block;margin-top:2px}
.stand--entwurf{background:var(--flaeche-2);color:var(--tinte-2)}
.stand--versand{background:var(--akzent-sanft);color:var(--akzent-schrift)}
.stand--fertig{background:var(--gruen-sanft);color:var(--gruen)}
.statuszeile .ic{flex:0 0 auto;font-size:17px}
.statuszeile > div{flex:1;min-width:0}
.statuszeile strong{display:block;font-size:14.5px}
.statuszeile span{font-size:12.5px;color:var(--tinte-3)}
.statuszeile em{font-style:normal;font-size:13.5px;font-weight:600;text-align:right;white-space:nowrap}
.statuszeile--gut .ic{color:var(--gruen)}
.statuszeile--warnung{border-color:var(--akzent)}
.statuszeile--warnung .ic{color:var(--akzent-schrift)}
.statuszeile--fehler{background:var(--rot-sanft);border-color:transparent}
.statuszeile--fehler .ic,.statuszeile--fehler em{color:var(--rot)}
.gefahrenblock summary{font-weight:700;color:var(--rot);cursor:pointer}
.gefahrenblock p{font-size:13.5px;color:var(--tinte-2);margin:10px 0 14px}
.knopf--warnung{background:var(--rot);color:#fff;border-color:transparent}
.knopf--warnung:hover{filter:brightness(1.08)}
.fehler summary{display:flex;align-items:center;gap:12px;padding:10px 12px;cursor:pointer;font-size:13px}
.fehler summary::-webkit-details-marker{display:none}
@media (max-width:760px){
  .tabelle--sicherungen .tabellenzeile{grid-template-columns:1fr auto;row-gap:6px}
  .tabelle--sicherungen .tabellenzeile span:nth-child(2),
  .tabelle--sicherungen .tabellenzeile span:nth-child(3){display:none}
  .fehler summary > span:last-child{display:none}
}

/* ----------------------------------------------------------- Zwei-Faktor */
.codefeld{text-align:center;font-size:27px;letter-spacing:.32em;padding:14px 10px}
.codefeld::placeholder{letter-spacing:.32em;color:var(--linie-2)}
.ersatzcodes{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin:14px 0}
.ersatzcodes code{display:block;padding:10px 12px;background:var(--flaeche-2);border-radius:0;
  font-size:14.5px;text-align:center;letter-spacing:.06em}
.tfa-qr{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap;margin:14px 0}
.tfa-qr svg{width:170px;height:170px;background:#fff;border-radius:0;padding:8px;flex:0 0 auto}
.tfa-qr > div{flex:1;min-width:220px}
.tfa-schluessel{display:inline-block;padding:8px 12px;background:var(--flaeche-2);border-radius:0;
  font-size:13.5px;letter-spacing:.08em;word-break:break-all}

/* Für Screenreader sichtbar, für Augen nicht — z. B. Beschriftungen, die
   im Bild überflüssig, im Vorlesen aber nötig sind. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.sr-only:focus,.sr-only:focus-within{position:static;width:auto;height:auto;margin:0;
  overflow:visible;clip:auto;clip-path:none;white-space:normal}
.neuigkeiten h2{font-size:17px;margin:0}
.neuigkeiten p{margin:2px 0 0;font-size:13px}
.neuigkeiten ul{margin:12px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.neuigkeiten li{font-size:14px}

/* ------------------------------------------------------- Aufs Handy holen
   Zwei Auftritte: ein Kasten im Fuß, der erklärt und den QR-Code zeigt, und
   am Telefon ein Band am unteren Rand, das sich wegwischen lässt. */
.appkasten{
  display:flex;gap:22px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  max-width:660px;margin:26px auto 0;padding:20px 24px;
  background:var(--flaeche);border:1px solid var(--linie);border-radius:0;
}
.appkasten-text{flex:1 1 320px;min-width:0}
.appkasten-text strong{display:block;font-size:16px;margin-bottom:3px}
.appkasten-text p{margin:0;font-size:13.5px;color:var(--tinte-2);max-width:52ch}
.appkasten-knoepfe{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.appkasten-anleitung{font-size:13px;color:var(--tinte-2)}
/* Der QR-Code steckt in einem Handy: schwarzer Rahmen, die Kerbe oben, die
   Taste unten. So versteht man ohne Text, dass man ihn mit dem Handy scannt. */
.appkasten-qr{display:flex;flex-direction:column;align-items:center;gap:8px;flex:0 0 auto}
.appkasten-qr img{display:block;border-radius:0;background:#fff;padding:6px}
/* Eckig wie alles auf der Tafel — nur echte Kreise sind dort rund. Kerbe
   und Taste reichen, damit man das Handy erkennt. */
.handyrahmen{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:26px 12px 28px;
  background:#0A0A0A;border:2px solid #2A2A2A;border-radius:0;
  box-shadow:0 8px 24px -12px rgba(0,0,0,.55);
}
/* Der Satz im Handy, unter dem Code: hell auf dem Schwarz des Geräts */
.handyrahmen-text{
  display:block;max-width:118px;text-align:center;font-size:10.5px;line-height:1.3;
  letter-spacing:.02em;color:rgba(255,255,255,.72);
}
.handyrahmen::before{  /* die Kerbe */
  content:"";position:absolute;left:50%;top:9px;width:42px;height:6px;margin-left:-21px;
  background:#2E2E2E;
}
.handyrahmen::after{   /* die Taste */
  content:"";position:absolute;left:50%;bottom:7px;width:34px;height:4px;margin-left:-17px;
  background:#3A3A3A;
}
.handyrahmen img{border-radius:0}
.appkasten-qr > span:not(.handyrahmen){font-size:11.5px;color:var(--tinte-3);text-align:center;max-width:132px}

.appband{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:60;
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  background:var(--flaeche);border:1px solid var(--linie);border-radius:0;
  box-shadow:0 8px 28px rgba(10,12,8,.18);
  animation:appband-hoch .3s ease both;
}
@keyframes appband-hoch{from{transform:translateY(120%);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.appband{animation:none}}
.appband > .ic{flex:0 0 auto;color:var(--akzent-schrift);font-size:22px}
.appband-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.appband-text strong{font-size:14.5px}
.appband-text span{font-size:12.5px;color:var(--tinte-3)}
.appband-zu{
  flex:0 0 auto;border:none;background:none;padding:6px;cursor:pointer;color:var(--tinte-3);
  border-radius:0;
}
.appband-zu:hover{background:var(--flaeche-2);color:var(--tinte)}
@media (min-width:821px){ .appband{display:none} }
/* Am Telefon übernimmt das Band am unteren Rand (.appband, ab hier sichtbar).
   Der Kasten im Fuß ist für den Rechner gedacht — dort kann man nichts
   Sinnvolles installieren, aber den QR-Code scannt man in zwei Sekunden. Am
   Handy wäre er derselbe Hinweis ein zweites Mal, ohne QR-Code und unter dem
   Band, das ihn schon gibt. */
@media (max-width:820px){ .appkasten{display:none} }
@media print{ .appband,.appkasten{display:none!important} }

/* ------------------------------------------------- Die Seite für Gastronomen
   Vorteile, Ablauf, ein Knopf. Wer hier steht, hat zwei Minuten. */
.held--wirte{padding-bottom:44px}
.abschnittstitel--mitte{justify-content:center;text-align:center}
.abschnittstitel--mitte::after{display:none}
.vorteile{margin:48px 0 12px}
.ablauf{margin:52px 0 20px}
.ablaufliste{list-style:none;margin:0 auto;padding:0;max-width:680px;
  display:flex;flex-direction:column;gap:2px}
.ablaufliste li{display:flex;gap:16px;align-items:flex-start;padding:18px 0;
  border-bottom:1px solid var(--linie)}
.ablaufliste li:last-child{border-bottom:none}
.ablauf-zahl{
  display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;border-radius:50%;
  background:var(--tief);color:var(--akzent);font-family:"Bricolage Grotesque",sans-serif;
  font-weight:800;font-size:15px;
}
.ablaufliste strong{display:block;font-size:17px;margin-bottom:3px}
.ablaufliste p{margin:0;font-size:14.5px;color:var(--tinte-2);line-height:1.55}
/* Unter einem linksbündigen Knopf steht auch der Hinweis links. */
.held--wirte .hinweis{text-align:left}

/* Die Preistafel unter einer Karte — Grundlage; die Gastseiten setzen sie in
   tafel.css feiner. */
.preistafel{display:flex;flex-direction:column;gap:5px;margin-top:14px;padding:12px 14px;
  border:1px solid var(--linie-2);border-radius:0;background:var(--flaeche-2)}
.preistafel-titel{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--akzent-schrift)}
.preistafel-zeile{display:flex;align-items:baseline;gap:9px;font-size:12.5px;color:var(--tinte-2)}
.preistafel-text{flex:0 1 auto;min-width:0}
.preistafel-zeile .fuehrung{flex:1 1 16px}
.preistafel-zeile b{flex:0 0 auto;color:var(--akzent-schrift);font-weight:700}


/* Der Honigtopf: für Menschen unsichtbar, für Skripte ein normales Feld */
.honigtopf{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden;opacity:0}
/* 404 mit Sinn: die Häuser des Orts als Liste */
.fehler-liste{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:18px auto 22px;max-width:640px}
.fehler-haus{padding:8px 14px;border:1px solid var(--linie);text-decoration:none;color:inherit;font-size:14px}
.fehler-haus:hover{border-color:var(--akzent)}

/* Wünsche & Feedback: drei Arten als Chips über den Feldern */
.wunsch-arten{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.wunsch-art{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--linie-2);cursor:pointer;font-size:14px;user-select:none;white-space:nowrap}
/* Die Eingabefelder des Fensters sind 100 % breit — der Radioknopf nicht */
.wunschfenster .wunsch-formular .wunsch-art input{width:16px;height:16px;padding:0;margin:0;accent-color:var(--akzent,#C9A45C);flex:none}
.wunsch-art span{font-size:14px;line-height:1}
.wunsch-art:has(input:checked){background:var(--tinte);color:var(--grund);border-color:var(--tinte)}
.wunsch-formular textarea{width:100%;min-height:96px;resize:vertical}