/* ==========================================================================
   mittagsmenue.info — Gestaltung
   Farben als Merkmale, damit heller und dunkler Modus aus einer Quelle kommen.
   ========================================================================== */

:root{
  --grund:#F3F4EF; --flaeche:#FFFFFF; --flaeche-2:#ECEEE6; --flaeche-3:#E3E6DB;
  --tinte:#14170F; --tinte-2:#525A46; --tinte-3:#878E78;
  --linie:#E2E4DA; --linie-2:#C9CDBD;
  --akzent:#E8A421; --akzent-tief:#D08F11; --akzent-auf:#2B1D00; --akzent-schrift:#8A5800; --akzent-sanft:#FBEFD6;
  --tief:#1C3A30; --tief-2:#2A5445;
  --gruen:#3F7A46; --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);
  --r-s:10px; --r-m:16px; --r-l:24px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --grund:#0D0F09; --flaeche:#171A12; --flaeche-2:#202419; --flaeche-3:#2A2F22;
    --tinte:#EFF1E7; --tinte-2:#B4BAA7; --tinte-3:#848B76;
    --linie:#282D20; --linie-2:#39402E;
    --akzent:#F2B546; --akzent-tief:#FFC763; --akzent-auf:#2B1D00; --akzent-schrift:#F2B546; --akzent-sanft:#33280F;
    --tief:#16302A; --tief-2:#20463B;
    --gruen:#77B47F; --gruen-sanft:#19261B;
    --rot:#DF7E64; --rot-sanft:#2E1812;
    --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:#0D0F09; --flaeche:#171A12; --flaeche-2:#202419; --flaeche-3:#2A2F22;
  --tinte:#EFF1E7; --tinte-2:#B4BAA7; --tinte-3:#848B76;
  --linie:#282D20; --linie-2:#39402E;
  --akzent:#F2B546; --akzent-tief:#FFC763; --akzent-auf:#2B1D00; --akzent-schrift:#F2B546; --akzent-sanft:#33280F;
  --tief:#16302A; --tief-2:#20463B;
  --gruen:#77B47F; --gruen-sanft:#19261B;
  --rot:#DF7E64; --rot-sanft:#2E1812;
  --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:Karla,ui-sans-serif,-apple-system,"Segoe UI",sans-serif;
  font-size:15px;line-height:1.5;-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,h3,h4{font-family:"Bricolage Grotesque",Karla,sans-serif;margin:0;text-wrap:balance;letter-spacing:-.025em;font-weight:800}
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:6px}
img{max-width:100%;height:auto}
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-family:"DM Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.leise{color:var(--tinte-3)}
.gruen{color:var(--gruen);font-style:normal}
.gold{color:var(--akzent-schrift)}
.rot{color:var(--rot)}
@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:29px;height:29px;border-radius:9px;background:var(--akzent);color:var(--akzent-auf);
  display:grid;place-items:center;font-family:"Bricolage Grotesque";font-weight:800;font-size:16px;
  box-shadow:0 2px 8px -2px color-mix(in srgb,var(--akzent) 70%,transparent);
}
.marke-zeichen--admin{background:var(--tief);color:#fff}
.marke-name{font-family:"Bricolage Grotesque";font-weight:700;font-size:15.5px;letter-spacing:-.03em}
.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)}
@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:13px;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:10px}
.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--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:13px;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:26px}
.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:11px 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:var(--r-m);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-family:"DM Mono",monospace;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:8px;
  transition:border-color .2s,color .2s;
}
.wert.lebt{border-color:var(--akzent);color:var(--akzent-schrift)}

/* ---------------------------------------------------------------- Filtermenü */
.filterleiste-oben{display:flex;align-items:center;gap:12px;padding:18px 0 10px;flex-wrap:wrap}
.filterknopf{
  display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:12px;
  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-family:"DM Mono",monospace;font-size:11px;display:grid;place-items:center;
}
.filterleiste-oben .zustandszeile{padding:0;flex:1;min-width:0}
.filterleiste-oben .zuruecksetzen{margin-left:0}

.filtermenue{
  background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-l);
  padding:6px 16px 16px;margin-bottom:14px;box-shadow:var(--s1);
  animation:menueAuf .28s cubic-bezier(.2,.9,.3,1);
}
@keyframes menueAuf{from{opacity:0;transform:translateY(-8px)}}
.filterblock{padding:14px 0;border-bottom:1px solid var(--linie)}
.filterblock:last-of-type{border-bottom:none}
.filterblock h3{
  font-family:"DM Mono",monospace;font-size:10.5px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tinte-3);margin-bottom:10px;
}
.filterblock h3 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-family:"DM Mono",monospace;
  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-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:.1em;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:var(--r-l);
  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:11px;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:13px;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}
.merken{
  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:hover{background:var(--flaeche-2);color:var(--tinte-3)}
.merken.ist-gemerkt{color:var(--rot)}
.merken.ist-gemerkt .ic{fill:currentColor}
.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:9px;position:relative}
.gericht{display:flex;gap:9px;align-items:baseline}
.gericht[hidden]{display:none}
.gericht-name{flex:0 1 auto;font-family:"Instrument Serif",Georgia,serif;font-size:17.5px;line-height:1.24}
.gericht-name mark{background:var(--akzent-sanft);color:var(--akzent-schrift);padding:0 4px;
  border-radius:4px;font-style:italic}
.beschreibung{display:block;font-family:Karla,sans-serif;font-style:normal;font-size:12.5px;
  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-family:"DM Mono",monospace;font-size:12.5px;font-variant-numeric:tabular-nums;
  color:var(--tinte-2);flex:0 0 auto}
.kennzeichen{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}
.kenn{
  font-family:Karla,sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:2.5px 6px;border-radius:5px;background:var(--gruen-sanft);color:var(--gruen);
}
.kenn--grau{background:var(--flaeche-2);color:var(--tinte-3)}
.band{
  margin-top:13px;border-radius:12px;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}
.aufpreise{margin-top:10px;display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--tinte-3)}
.still{
  margin-top:13px;background:var(--flaeche-2);border-radius:12px;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:var(--r-m)}
.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:var(--r-m);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 */
.lokalkopf{background:var(--lokalfarbe,var(--tief));color:#fff;position:relative;overflow:hidden}
.lokalkopf::before{content:"";position:absolute;inset:0;opacity:.45;
  background:radial-gradient(90% 130% at 88% -20%,rgba(255,255,255,.35),transparent 60%)}
.lokalkopf-in{position:relative;padding:16px 18px 22px}
.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:15px;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-family:"DM Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.72}
.unterzeile{font-size:12.5px;opacity:.85;margin-top:3px}
.lokalkopf h1{font-size:clamp(26px,7.6vw,32px);line-height:1;margin-top:15px;letter-spacing:-.04em}
.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}

.handlungen{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:14px 16px}
@media(max-width:380px){.handlungen{grid-template-columns:repeat(2,1fr)}}
.handlung{
  background:var(--flaeche-2);border-radius:14px;padding:13px 4px 11px;text-align:center;text-decoration:none;
  font-size:11px;font-weight:600;color:var(--tinte-2);transition:.2s;
}
.handlung:hover{background:var(--flaeche-3);color:var(--tinte);transform:translateY(-2px)}
.handlung .ic{font-size:18px;margin:0 auto 6px;color:var(--tinte)}

.abschnitt{padding:8px 16px 22px}
.abschnitt + .abschnitt{border-top:1px solid var(--linie);padding-top:20px}
.abschnitt-titel{
  font-family:"DM Mono",monospace;font-size:10.5px;font-weight:500;letter-spacing:.14em;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)}
.menuekarte{background:var(--flaeche-2);border-radius:var(--r-l);padding:16px}
.menuekarte .gerichte{margin-top:12px}
.kombis{margin-top:14px;padding-top:12px;border-top:1px dashed var(--linie-2);display:flex;flex-direction:column;gap:5px}
.kombi{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--tinte-2)}
.menue-notiz{margin:12px 0 0;font-size:12.5px;color:var(--tinte-3);font-style:italic}
.wochenliste{display:flex;flex-direction:column;gap:11px}
.wochenzeile{display:flex;gap:12px;font-size:13.5px;align-items:baseline}
.wochenzeile.ist-heute{font-weight:600}
.wochenzeile.ist-heute .wochentag{color:var(--akzent-schrift)}
.wochentag{font-size:11px;color:var(--tinte-3);width:26px;flex:0 0 auto;text-transform:uppercase}
.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)}
.fliesstext{color:var(--tinte-2);font-size:14.5px;max-width:60ch}
.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(--linie-2);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}
.karten-raster--klein{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-top:0}
.infokarte{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-m);padding:18px;
  box-shadow:var(--s1);text-decoration:none;display:block;transition:.2s}
.infokarte--klickbar:hover{transform:translateY(-2px);box-shadow:var(--s2)}
.infokarte .ic--gross{color:var(--akzent-schrift);margin-bottom:12px}
.infokarte h3{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:var(--r-l);
  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}
.formular-untertitel{font-size:13px;margin:14px 0 6px;font-weight:700}
.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:12px;
  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{font-size:12.5px}
.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}
.hakenreihe{display:flex;gap:18px;flex-wrap:wrap}
.vorschau{border-radius:10px;margin-top:6px;border:1px solid var(--linie)}
.vorschau--breit{width:100%;max-width:200px;height:auto}
.suchfeld{display:flex;align-items:center;gap:9px;background:var(--flaeche-2);border:1px solid transparent;
  border-radius:13px;padding:10px 13px;flex:1;min-width:180px;transition:border-color .2s,background .2s}
.suchfeld:focus-within{border-color:var(--akzent);background:var(--flaeche)}
.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{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.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:var(--r-m);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}
.dialog{border:none;border-radius:var(--r-l);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}

/* ---------------------------------------------------------------- Arbeitsbereich */
.arbeitsflaeche{display:flex;min-height:100vh;position:relative;z-index:1}
.seitenleiste{
  width:236px;flex:0 0 auto;background:var(--flaeche);border-right:1px solid var(--linie);
  padding:18px 14px;display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:100vh;
}
.arbeitsbereich{flex:1;min-width:0;padding:22px 26px 70px;max-width:1080px}
@media(max-width:820px){
  .arbeitsflaeche{flex-direction:column}
  .seitenleiste{width:auto;height:auto;position:static;border-right:none;border-bottom:1px solid var(--linie);
    flex-direction:row;align-items:center;gap:12px;overflow-x:auto}
  .seitenleiste .marke{margin-right:4px}
  .seiten-nav{flex-direction:row;gap:4px}
  .seiten-nav a span{display:none}
  .seitenleiste-fuss{margin-left:auto;flex-direction:row;align-items:center;gap:10px}
  .arbeitsbereich{padding:18px 16px 70px}
}
.seiten-nav{display:flex;flex-direction:column;gap:2px}
.seiten-nav a{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;
  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{margin-top:auto;display:flex;flex-direction:column;gap:8px;font-size:12px}
.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{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600}
.lokalzeile .lokal-zeichen{width:28px;height:28px;font-size:11px;border-radius:9px}
.zustand{
  display:inline-flex;align-items:center;padding:3px 9px;border-radius:99px;font-size:10.5px;
  font-weight:700;letter-spacing:.04em;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}
.kopf-werkzeuge{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-left:auto}
.kennzahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:26px}
.kennzahlen--sechs{grid-template-columns:repeat(auto-fit,minmax(128px,1fr))}
.kennzahl{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-m);padding:16px}
.kennzahl--achtung{border-color:color-mix(in srgb,var(--akzent) 45%,transparent);background:var(--akzent-sanft)}
.kennzahl-wert{display:block;font-size:27px;font-weight:500;letter-spacing:-.03em;line-height:1}
.kennzahl-text{display:block;font-size:12px;color:var(--tinte-3);margin-top:6px}
.hinweisblock{display:flex;gap:12px;align-items:flex-start;background:var(--akzent-sanft);
  color:var(--akzent-schrift);border-radius:var(--r-m);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--gut{background:var(--gruen-sanft);color:var(--gruen)}
.tokenstand{margin-left:auto;background:var(--flaeche-2);padding:8px 14px;border-radius:11px;
  font-size:13px;color:var(--tinte-2)}

/* ---------------------------------------------------------------- Wochengitter */
.wochengitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px}
.tageskachel{
  display:flex;flex-direction:column;gap:5px;padding:14px 13px;border-radius:var(--r-m);text-decoration:none;
  background:var(--flaeche);border:1px solid var(--linie);transition:.2s;min-height:96px;
}
.tageskachel:hover{transform:translateY(-2px);box-shadow:var(--s2)}
.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-tag{font-size:11px;color:var(--tinte-3);text-transform:uppercase;letter-spacing:.08em}
.tageskachel-zahl{font-size:14px;font-weight:700}
.tageskachel-status{font-size:10.5px;font-family:"DM Mono",monospace;color:var(--gruen);
  text-transform:uppercase;letter-spacing:.07em;margin-top:auto}
.tageskachel--entwurf .tageskachel-status{color:var(--akzent-schrift)}
.tageskachel-leer{font-size:12px;color:var(--tinte-3)}

/* ---------------------------------------------------------------- Menü-Editor */
.menue-aufbau{display:grid;grid-template-columns:1fr 330px;gap:20px;align-items:start}
@media(max-width:900px){.menue-aufbau{grid-template-columns:1fr}}
.auswahlspalte{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-l);padding:16px}
.bibliothek{display:flex;flex-direction:column;gap:2px;margin-top:12px;max-height:62vh;overflow-y:auto}
.bib-eintrag{
  display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:14px;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}
.haekchen{
  width:21px;height:21px;border-radius:7px;border:1.6px solid var(--linie-2);flex:0 0 auto;
  display:grid;place-items:center;color:transparent;font-size:12px;
  transition:background .2s,border-color .2s,color .2s;
}
.bib-eintrag.ist-gewaehlt .haekchen{background:var(--akzent);border-color:var(--akzent);color:var(--akzent-auf)}
.bib-text{min-width:0;flex:1}
.bib-name{display:block;font-family:"Instrument Serif",Georgia,serif;font-size:16.5px;line-height:1.25}
.bib-meta{display:block;font-size:10.5px;color:var(--tinte-3);margin-top:3px}
.bib-preis{font-size:12.5px;color:var(--tinte-2);flex:0 0 auto}
.menuespalte{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-l);
  padding:18px;position:sticky;top:16px}
.gewaehlte-liste{display:flex;flex-direction:column;gap:7px;min-height:60px}
.gewaehlt-zeile{display:flex;gap:9px;align-items:baseline;font-size:14px;animation:einblenden .3s both}
.gewaehlt-zeile .nr{font-family:"DM Mono",monospace;font-size:11px;color:var(--tinte-3);flex:0 0 16px}
.gewaehlt-zeile .nm{flex:1;font-family:"Instrument Serif",Georgia,serif;font-size:16px;line-height:1.25}
.gewaehlt-leer{color:var(--tinte-3);font-size:13px;padding:14px 0}
.aufpreise-block{margin-top:18px;padding-top:16px;border-top:1px solid var(--linie);
  display:flex;flex-direction:column;gap:9px}
.aufpreise-block h3{font-size:12.5px;font-weight:700}
.abschlussleiste{margin-top:18px;padding-top:16px;border-top:1px solid var(--linie);
  display:flex;flex-direction:column;gap:8px}
.abschlussleiste--breit{flex-direction:row;align-items:center;gap:14px;border:none}

/* ---------------------------------------------------------------- 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:14px;
  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{display:flex;gap:6px;align-items:center;flex:0 0 auto}
.zeilenform select,.zahlfeld{width:auto;min-width:92px;padding:7px 10px;font-size:12.5px;border-radius:9px}
.zahlfeld{width:86px;min-width:0}
.zeilenfeld{padding:8px 11px;font-size:14px;border-radius:9px}
.gerichtzeile{animation:karteRein .3s both;animation-delay:calc(var(--nr,0)*14ms)}
.protokoll{display:flex;flex-direction:column;gap:1px;font-size:12.5px}
.protokollzeile{display:flex;gap:12px;padding:9px 12px;border-radius:9px;flex-wrap:wrap}
.protokollzeile:nth-child(odd){background:var(--flaeche-2)}
.werteliste{display:flex;flex-direction:column;gap:7px;font-size:13.5px}
.werteliste > div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--linie)}
.tippliste{margin:10px 0 0;padding-left:20px;color:var(--tinte-2);font-size:13.5px;display:flex;
  flex-direction:column;gap:5px}
.codezeile{display:block;background:var(--flaeche-2);padding:11px 13px;border-radius:11px;
  font-family:"DM Mono",monospace;font-size:12px;word-break:break-all;margin-top:8px}
.zeitengitter{display:flex;flex-direction:column;gap:7px}
.zeitenzeile{display:flex;align-items:center;gap:9px}
.zeitentag{width:92px;flex:0 0 auto;font-size:13px}
.zeitenzeile input{width:auto;flex:0 0 132px}
.bis{color:var(--tinte-3)}

/* ---------------------------------------------------------------- Aushänge */
.aushang-gitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-bottom:22px}
.aushang{margin:0;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-m);
  overflow:hidden;box-shadow:var(--s1);
  animation:bogenRein .6s cubic-bezier(.2,.9,.25,1) both;animation-delay:calc(var(--nr,0)*120ms)}
@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:var(--r-l);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:16px;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:11px;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-family:"DM Mono",monospace;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:var(--r-l);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:var(--r-l);
  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:var(--r-m);padding:14px}
.einladung .codezeile{margin:0;background:var(--flaeche)}

.rechte-erklaerung{display:flex;flex-direction:column;gap:9px;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--linie);font-size:13px}
.rechte-erklaerung strong{display:inline-block;min-width:110px}
.rechte-erklaerung .leise{font-size:12.5px}

/* ---------------------------------------------------------------- Vorlagen */
.vorlagen-gitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-bottom:22px}
.vorlagenkarte{
  background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-l);overflow:hidden;
  box-shadow:var(--s1);animation:karteRein .4s both;animation-delay:calc(var(--nr,0)*50ms);
}
.vorlagenbild{display:block;position:relative;background:var(--flaeche-2);aspect-ratio:3/4;overflow:hidden}
.vorlagenbild img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.vorlagenbild:hover img{transform:scale(1.03)}
.marke-standard{
  position:absolute;left:10px;top:10px;background:var(--gruen);color:#fff;font-size:10px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:99px;
}
.vorlagenfuss{padding:12px 13px;display:flex;flex-direction:column;gap:10px}
.vorlagenfuss strong{display:block;font-size:14px}
.vorlagenfuss .leise{display:block;font-size:10.5px;margin-top:2px}
.vorlagen-werkzeuge{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

/* ---------------------------------------------------------------- Vorlagen-Editor */
.editor{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
@media(max-width:940px){.editor{grid-template-columns:1fr}}
.leinwand-huelle{position:sticky;top:16px}
.leinwand{
  position:relative;width:100%;max-height:78vh;margin:0 auto;background:var(--flaeche-2);
  border-radius:var(--r-m);overflow:hidden;box-shadow:var(--s2);touch-action:none;
  container-type:size;user-select:none;
}
.leinwand-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.efeld{
  position:absolute;border:1.5px dashed color-mix(in srgb,var(--akzent) 70%,transparent);
  border-radius:3px;cursor:grab;overflow:hidden;
}
.efeld:hover{border-color:var(--akzent);background:color-mix(in srgb,var(--akzent) 7%,transparent)}
.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:active{cursor:grabbing}
.efeld-text{padding:0;pointer-events:none;display:flex;flex-direction:column;justify-content:center;height:100%}
.efeld-zeile{display:flex;gap:.6em;align-items:baseline;white-space:nowrap;overflow:hidden}
.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-preis{font-family:"DM Mono",monospace;font-size:.88em;flex:0 0 auto}
.efeld-schild{
  position:absolute;left:0;top:0;transform:translateY(-100%);background:var(--akzent);color:var(--akzent-auf);
  font-family:Karla,sans-serif;font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 6px;border-radius:4px 4px 0 0;white-space:nowrap;opacity:0;transition:opacity .15s;pointer-events:none;
}
.efeld.ist-aktiv .efeld-schild,.efeld:hover .efeld-schild{opacity:1}
.egriff{
  position:absolute;width:13px;height:13px;background:var(--flaeche);border:2px solid var(--akzent);
  border-radius:3px;opacity:0;transition:opacity .15s;
}
.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}

.editor-spalte{
  background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-l);padding:18px;
  display:flex;flex-direction:column;gap:12px;position:sticky;top:16px;max-height:88vh;overflow-y:auto;
}
.feldliste{display:flex;flex-direction:column;gap:3px}
.feldzeile{
  display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:10px;text-align:left;width:100%;
  font-size:13px;border:1px solid transparent;transition:.15s;
}
.feldzeile:hover{background:var(--flaeche-2)}
.feldzeile.ist-aktiv{background:var(--akzent-sanft);border-color:color-mix(in srgb,var(--akzent) 45%,transparent);
  color:var(--akzent-schrift);font-weight:600}
.feldpunkt{width:11px;height:11px;border-radius:3px;flex:0 0 auto;border:1px solid rgba(0,0,0,.15)}
.feld-hinzu{display:flex;gap:7px;align-items:center;padding-top:6px;border-top:1px solid var(--linie)}
.feld-hinzu select{flex:1;font-size:12.5px;padding:8px 10px}
.einstellungen{display:flex;flex-direction:column;gap:11px;padding-top:12px;border-top:1px solid var(--linie)}
.hinweis--gut{color:var(--gruen)}
.hinweis--schlecht{color:var(--rot)}
.dialog--bild{max-width:min(560px,92vw)}
.vorschaubild{margin:14px 0;border-radius:var(--r-m);overflow:hidden;background:var(--flaeche-2);
  max-height:64vh;display:flex;justify-content:center}
.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}
.fuss-in{max-width:660px;margin:0 auto;padding:28px 16px 40px;display:flex;gap:26px;flex-wrap:wrap}
.fuss-text{font-size:12.5px;color:var(--tinte-3);margin:9px 0 0;max-width:34ch}
.fuss-links{display:flex;flex-direction:column;gap:7px;font-size:13px;margin-left:auto}
.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-family:"DM Mono",monospace;font-size:11px;letter-spacing:.06em;padding:4px 9px;
  border-radius:8px;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)}