/* ════════════════════════════════════════════════
   IONIO — Design-System
   Abgeleitet aus der gedruckten Speisekarte
   Papier · Tinte · Meer
   ════════════════════════════════════════════════ */
:root{
  /* ── Farben ── */
  --paper:      #FFFDF8;
  --cream:      #FEF1D4;
  --cream-2:    #F9E7C4;
  --ink:        #2B3037;
  --ink-2:      #4A535B;
  --sea:        #657078;
  --sea-2:      #7C878C;
  --sea-dk:     #5E6D75;
  --line:       rgba(43,48,55,.14);
  --line-2:     rgba(43,48,55,.30);
  --sage:       #6E8B6E;
  --rose:       #A4635B;

  /* ── Sektionshintergründe ── */
  --sec-hero:   #FEF1D4;
  --sec-woche:  #FFFDF8;
  --sec-karte:  #FFFDF8;
  --sec-flip:   #FEF1D4;
  --sec-about:  #FFFDF8;
  --sec-feiern: #FEF1D4;
  --sec-special:#FEF1D4;
  --sec-kontakt:#FFFDF8;
  --sec-foot:   #2B3037;
  --sec-foot-tx:#FEF1D4;
  --sec-band:   #FFFDF8;
  --sec-mq:     #2B3037;
  --sec-mq-tx:  #FEF1D4;
  --sec-quote:  #2B3037;
  --sec-quote-tx:#FEF1D4;
  --sec-flipbg: #20262B;

  /* ── Schrift ── */
  --f-dis:  'Italiana', 'Cormorant Garamond', Georgia, serif;
  --f-body: 'Barlow', -apple-system, 'Segoe UI', sans-serif;
  --f-scr:  'Italianno', cursive;

  --fs-h1:    clamp(2.1rem,8vw,5.2rem);
  --fs-sec:   clamp(1.65rem,6.4vw,3.9rem);
  --fs-grp:   clamp(1.3rem,4.2vw,2.1rem);
  --fs-item:  1.06rem;
  --fs-body:  .95rem;
  --fs-small: .78rem;

  --logo-ink: #2B3037;
  --logo-sea: #79868C;

  --ease: cubic-bezier(.19,1,.22,1);
  --tr:   .4s var(--ease);
  --maxw: 1240px;
  --pad:  clamp(20px,5vw,72px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%}
section[id],header[id]{scroll-margin-top:calc(var(--banner-h,0px) + 78px)}
@media(max-width:940px){section[id],header[id]{scroll-margin-top:calc(var(--banner-h,0px) + 68px)}}
body{
  background:var(--paper);color:var(--ink);max-width:100vw;
  font-family:var(--f-body);font-weight:300;line-height:1.72;
  overflow-x:hidden;
}
body.lock{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;font-family:inherit;color:inherit}
ul{list-style:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
::selection{background:var(--ink);color:var(--cream)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:var(--cream)}
::-webkit-scrollbar-thumb{background:var(--sea-2);border-radius:9px}
::-webkit-scrollbar-thumb:hover{background:var(--sea)}

/* ═══ Grundbausteine ═══ */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.sec{padding:clamp(72px,10vw,132px) 0;position:relative}
.sec-sm{padding:clamp(52px,7vw,88px) 0;position:relative}

.eyebrow{
  font-family:var(--f-body);font-weight:500;font-size:.62rem;
  letter-spacing:.34em;text-transform:uppercase;color:var(--sea);
  display:block;margin-bottom:16px;
}
.dis{font-family:var(--f-dis);font-weight:400;line-height:1.02;letter-spacing:.005em}
.scr{font-family:var(--f-scr);line-height:.9}

/* Kopfzeile einer Sektion — Print-Logik: GROSS / klein */
.sec-hd{margin-bottom:clamp(34px,5vw,60px);max-width:760px}
.sec-hd.mid{margin-left:auto;margin-right:auto;text-align:center}
.sec-hd h2{font-family:var(--f-dis);font-size:var(--fs-sec);font-weight:400;line-height:1.03;letter-spacing:.01em;overflow-wrap:break-word;hyphens:auto}
.sec-hd h2 .slash{color:var(--sea-2);font-weight:300;margin:0 .18em}
.sec-hd h2 .de{color:var(--sea-dk)}
.sec-hd p{margin-top:18px;color:var(--ink-2);font-size:var(--fs-body);max-width:52ch;line-height:1.8}
.sec-hd.mid p{margin-left:auto;margin-right:auto}
.rule{width:100%;height:1px;background:var(--line);margin:22px 0 0}

/* Bänder aus der Druckkarte */
.band{
  background-color:var(--sec-band);
  width:100%;height:clamp(78px,11vw,150px);
  background-repeat:repeat-x;background-position:center bottom;background-size:auto 100%;
  opacity:.9;pointer-events:none;
}
.band.flip{transform:scaleX(-1)}
.band-antipasti{background-image:url('ill/band-antipasti.webp')}
.band-pizza{background-image:url('ill/band-pizza.webp')}
.band-pasta{background-image:url('ill/band-pasta.webp')}
.band-pesce{background-image:url('ill/band-pesce.webp')}
.band-bevande{background-image:url('ill/band-bevande.webp')}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--f-body);font-weight:500;font-size:.7rem;
  letter-spacing:.2em;text-transform:uppercase;
  padding:16px 30px;border:1px solid var(--ink);color:var(--ink);
  position:relative;overflow:hidden;transition:color .45s var(--ease);
  border-radius:0;
}
.btn::after{content:'';position:absolute;inset:0;background:var(--ink);transform:translateY(101%);transition:transform .5s var(--ease);z-index:0}
.btn:hover::after{transform:translateY(0)}
.btn > *{position:relative;z-index:1}
.btn:hover{color:var(--cream)}
.btn-fill{background:var(--ink);color:var(--cream)}
.btn-fill::after{background:var(--cream)}
.btn-fill:hover{color:var(--ink)}
.btn-ghost{border-color:var(--line-2);color:var(--ink-2)}
.btn-ghost::after{background:var(--ink)}
.btn-ghost:hover{color:var(--cream);border-color:var(--ink)}
.btn-sm{padding:11px 20px;font-size:.62rem}

/* Reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}

/* ═══ PAGELOADER ═══ */
#loader{
  position:fixed;inset:0;z-index:6000;background:var(--cream);
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  transition:opacity .7s var(--ease),visibility .7s;
}
#loader.done{opacity:0;visibility:hidden}
#loader .ld-logo{width:min(74vw,420px)}
#loader .ionio-logo .lg-boat path{
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:draw 1.5s var(--ease) forwards;
}
#loader .ionio-logo .lg-boat-fill{opacity:0;animation:fadeIn .7s ease .95s forwards}
#loader .ionio-logo .lg-word path{opacity:0;transform:translateY(14px);animation:up .8s var(--ease) forwards}
#loader .ionio-logo .lg-word path:nth-child(1){animation-delay:.72s}
#loader .ionio-logo .lg-word path:nth-child(2){animation-delay:.80s}
#loader .ionio-logo .lg-word path:nth-child(3){animation-delay:.88s}
#loader .ionio-logo .lg-word path:nth-child(4){animation-delay:.96s}
#loader .ionio-logo .lg-word path:nth-child(5){animation-delay:1.04s}
#loader .ionio-logo .lg-tag{opacity:0;animation:fadeIn .9s ease 1.25s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadeIn{to{opacity:1}}
@keyframes up{to{opacity:1;transform:none}}
.ld-bar{width:118px;height:1px;background:var(--line);margin-top:38px;overflow:hidden}
.ld-bar i{display:block;height:100%;width:0;background:var(--ink);animation:ldb 1.9s var(--ease) forwards}
@keyframes ldb{to{width:100%}}
.ld-cap{margin-top:16px;font-size:.6rem;letter-spacing:.35em;text-transform:uppercase;color:var(--sea);font-weight:500}

/* ═══ Vertikale Schrift-Schiene (Signature) ═══ */
.rail{
  position:fixed;right:0;top:0;bottom:0;width:clamp(52px,6vw,86px);z-index:60;
  background:var(--cream);border-left:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;pointer-events:none;
}
.rail span{
  writing-mode:vertical-rl;font-family:var(--f-scr);
  font-size:clamp(1.9rem,3.2vw,2.9rem);color:var(--ink);
  letter-spacing:.06em;white-space:nowrap;opacity:.92;
}
body.has-rail{padding-right:clamp(52px,6vw,86px)}
@media(max-width:1100px){.rail{display:none}body.has-rail{padding-right:0}}

/* ═══ NAV ═══ */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  transition:background .45s var(--ease),box-shadow .45s var(--ease),padding .45s var(--ease);
  padding:18px 0;background:transparent;
}
body.has-rail #nav{right:clamp(52px,6vw,86px)}
@media(max-width:1100px){body.has-rail #nav{right:0}}
#nav.stuck{background:rgba(255,253,248,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 1px 0 var(--line);padding:10px 0}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;gap:26px}
.nav-brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.nav-brand .ionio-logo{height:54px;width:auto;transition:height var(--tr)}
#nav.stuck .nav-brand .ionio-logo{height:42px}
.nav-links{display:flex;gap:clamp(16px,2.2vw,32px);align-items:center}
.nav-links a{
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  color:var(--ink-2);position:relative;padding:4px 0;transition:color .3s;
}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--ink);transition:width .35s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after,.nav-links a.on::after{width:100%}
.nav-links a.on{color:var(--ink)}
.nav-r{display:flex;align-items:center;gap:14px}
.nav-tel{display:inline-flex;align-items:center;gap:7px;font-size:.74rem;letter-spacing:.06em;font-weight:500;color:var(--ink);border:1px solid var(--line-2);padding:9px 16px;transition:var(--tr)}
.nav-tel:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.hbg{display:none;width:38px;height:30px;flex-direction:column;justify-content:center;gap:6px}
.hbg span{display:block;height:1px;background:var(--ink);transition:var(--tr)}
.hbg.x span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hbg.x span:nth-child(2){opacity:0}
.hbg.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:940px){
  .nav-links{display:none}
  .hbg{display:flex}
  .nav-tel span{display:none}
  .nav-tel{padding:9px 11px}
}
.mob{
  position:fixed;inset:0;z-index:890;background:var(--cream);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;
}
.mob.open{opacity:1;visibility:visible}
.mob a{font-family:var(--f-dis);font-size:clamp(1.7rem,7vw,2.6rem);color:var(--ink);padding:9px 0;transition:color .3s}
.mob a:hover{color:var(--sea)}
.mob .mob-tel{font-family:var(--f-body);font-size:1rem;letter-spacing:.2em;margin-top:26px;border:1px solid var(--ink);padding:13px 26px;text-transform:uppercase;font-weight:500}

/* ═══ HERO — die Titelseite der Karte ═══ */
#hero{
  min-height:100svh;background:var(--sec-hero);position:relative;
  display:flex;align-items:center;justify-content:center;
  padding:120px 0 90px;overflow:hidden;
}
.hero-band{
  position:absolute;top:0;left:0;right:0;z-index:1;pointer-events:none;
  top:auto;bottom:-2%;height:clamp(150px,26vw,330px);
  background:url('ill/band-pizza.webp') no-repeat left -6% bottom;
  background-size:auto 100%;opacity:var(--hero-band-op,.28);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 34%,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 34%,#000 100%);
}
.hero-photo{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-size:cover;background-position:center 58%;
  filter:grayscale(.12) sepia(.14) contrast(1.02) saturate(.92);
  opacity:var(--hero-photo-op,1);
}
.hero-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:var(--hero-veil-op,.5);
  background:radial-gradient(ellipse 54% 46% at 50% 42%,
    rgba(254,241,212,.96) 0%, rgba(254,241,212,.8) 46%, rgba(254,241,212,.34) 76%, rgba(254,241,212,.1) 100%);
}
.hero-photo.off,.hero-veil.off{display:none}
.hero-boat{
  position:absolute;inset:0;pointer-events:none;
  background:url('ill/band-bevande.webp') no-repeat right -14% bottom 4%;
  background-size:auto 26%;opacity:.05;
}
.hero-in{position:relative;z-index:2;text-align:center;padding:0 var(--pad);width:100%;max-width:900px}
.hero-in::before{
  content:'';position:absolute;inset:-10% -8%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 58% 56% at 50% 48%,
    rgba(254,241,212,.9) 0%, rgba(254,241,212,.66) 52%, rgba(254,241,212,.2) 78%, transparent 92%);
  filter:blur(8px);
}
.hero-in .ionio-logo{width:min(80vw,540px);margin:0 auto;display:block}
.hero-in .ionio-logo .lg-boat path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.1s var(--ease) .1s forwards}
.hero-kicker{
  font-size:.63rem;letter-spacing:.32em;overflow-wrap:break-word;text-transform:uppercase;color:var(--sea);
  font-weight:500;margin-bottom:30px;
}
.hero-sub{
  margin-top:6px;font-size:clamp(.92rem,1.6vw,1.06rem);color:var(--ink-2);
  max-width:46ch;margin-left:auto;margin-right:auto;line-height:1.85;
}
.hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:40px}
.hero-status{
  display:inline-flex;align-items:center;gap:9px;max-width:100%;flex-wrap:wrap;justify-content:center;margin-top:34px;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  color:var(--ink-2);border:1px solid var(--line);padding:9px 18px;background:rgba(255,253,248,.5);
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--sage);box-shadow:0 0 0 0 rgba(110,139,110,.55);animation:pulse 2.4s infinite}
.dot.shut{background:var(--sea-2);animation:none;box-shadow:none}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(110,139,110,0)}100%{box-shadow:0 0 0 0 rgba(110,139,110,0)}}
.hero-down{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px}
.hero-down i{display:block;width:1px;height:46px;background:linear-gradient(var(--line-2),transparent);animation:sink 2.2s var(--ease) infinite}
@keyframes sink{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}
.hero-down span{font-size:.55rem;letter-spacing:.3em;text-transform:uppercase;color:var(--sea)}

/* ═══ Laufband ═══ */
.mq{background:var(--sec-mq);color:var(--sec-mq-tx);overflow:hidden;padding:15px 0;white-space:nowrap}
.mq-t{display:inline-block;animation:mqx 42s linear infinite}
.mq-t span{font-family:var(--f-dis);font-size:1.12rem;letter-spacing:.14em;padding:0 30px;opacity:.92}
.mq-t span::after{content:'✦';margin-left:30px;color:var(--sea-2);font-size:.7rem;vertical-align:middle}
@keyframes mqx{to{transform:translateX(-50%)}}

/* ═══ WOCHENKARTE ═══ */
#woche{background:var(--sec-woche)}
.woche-meta{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:30px}
.woche-range{font-family:var(--f-dis);font-size:1.3rem;color:var(--ink)}
.woche-note{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sea);font-weight:500}
.woche-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line)}
@media(max-width:1080px){.woche-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:660px){.woche-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.woche-grid{grid-template-columns:1fr}}
.wd.now{background:var(--cream);box-shadow:inset 0 3px 0 var(--ink)}
.wd.now .wd-n{font-weight:400;color:var(--ink)}
.wd.now .wd-h{border-bottom-color:var(--line-2)}
.wd-today{display:inline-block;font-size:.54rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;background:var(--ink);color:var(--cream);padding:3px 7px;margin-left:7px;vertical-align:2px}
.woche-hint{font-size:.8rem;color:var(--sea);margin-top:16px;font-style:italic}
.wd{background:var(--paper);padding:26px 22px 30px;transition:background .4s var(--ease)}
.wd:hover{background:var(--cream)}
.wd-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:20px;padding-bottom:11px;border-bottom:1px solid var(--line)}
.wd-n{font-family:var(--f-dis);font-size:1.32rem;letter-spacing:.02em}
.wd-d{font-size:.66rem;color:var(--sea);letter-spacing:.1em}
.wd-dish + .wd-dish{margin-top:20px;padding-top:20px;border-top:1px dotted var(--line-2)}
.wd-dish-n{font-size:.98rem;font-weight:400;color:var(--ink);line-height:1.35}
.wd-dish-n b{font-weight:400;color:var(--sea-dk)}
.wd-dish-d{font-size:.78rem;color:var(--sea);line-height:1.6;margin-top:5px}
.wd-dish-p{font-family:var(--f-dis);font-size:1.06rem;margin-top:8px;color:var(--ink)}
.wd-empty{font-size:.8rem;color:var(--sea);font-style:italic}
.tag{display:inline-block;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;padding:3px 8px;border:1px solid var(--line-2);color:var(--sea-dk);margin-top:9px}
.tag.v{border-color:rgba(110,139,110,.5);color:var(--sage)}
.tag.s{border-color:rgba(164,99,91,.45);color:var(--rose)}

/* ═══ EINWILLIGUNG ═══ */
#cc{position:fixed;inset:0;z-index:5800;display:none;align-items:flex-end;justify-content:center;
  padding:0 0 0 0;background:rgba(43,48,55,.42);backdrop-filter:blur(3px)}
#cc.on{display:flex}
.cc-in{background:var(--paper);border-top:1px solid var(--line-2);width:100%;
  max-height:88vh;overflow-y:auto;box-shadow:0 -14px 50px rgba(43,48,55,.24)}
.cc-w{max-width:840px;margin:0 auto;padding:clamp(24px,4vw,38px) clamp(20px,5vw,44px) clamp(22px,3vw,32px)}
.cc-w h2{font-family:var(--f-dis);font-size:clamp(1.5rem,3vw,2rem);font-weight:400;margin-bottom:12px}
.cc-w > p{font-size:.88rem;color:var(--ink-2);line-height:1.75;max-width:64ch}
.cc-w > p a{border-bottom:1px solid var(--line-2)}
.cc-w > p a:hover{border-bottom-color:var(--ink)}
.cc-opts{display:none;margin-top:22px}
.cc-opts.on{display:block}
.cc-row{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--line)}
.cc-row .tx{flex:1;min-width:0}
.cc-row b{display:block;font-weight:500;font-size:.94rem;margin-bottom:3px}
.cc-row p{font-size:.8rem;color:var(--sea-dk);line-height:1.65}
.cc-sw{position:relative;flex-shrink:0;width:44px;height:24px}
.cc-sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2}
.cc-sw i{position:absolute;inset:0;background:var(--line);transition:.25s;border-radius:24px;display:block}
.cc-sw i::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;background:var(--paper);border-radius:50%;transition:.25s}
.cc-sw input:checked + i{background:var(--sage)}
.cc-sw input:checked + i::after{transform:translateX(20px)}
.cc-sw input:disabled + i{background:var(--sea-2);opacity:.6;cursor:not-allowed}
.cc-sw input:focus-visible + i{outline:2px solid var(--ink);outline-offset:2px}
.cc-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px;align-items:center}
.cc-btns .btn{flex:1 1 200px;min-width:0}
.cc-link{font-size:.74rem;color:var(--sea-dk);border-bottom:1px solid var(--line-2);padding-bottom:1px}
.cc-link:hover{color:var(--ink);border-bottom-color:var(--ink)}
.cc-legal{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px}
@media(max-width:600px){.cc-btns .btn{flex:1 1 100%}}

/* Blockierte externe Inhalte */
.embed-gate{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;padding:26px;background:var(--cream)}
.embed-gate p{font-size:.84rem;color:var(--ink-2);max-width:38ch;line-height:1.7}

/* ═══ HINWEISBANNER ═══ */
#banner{
  position:fixed;top:0;left:0;right:0;z-index:960;display:none;
  align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  padding:11px clamp(16px,4vw,40px);
  background:var(--ban-bg,#2B3037);color:var(--ban-tx,#FEF1D4);
  font-size:.82rem;line-height:1.5;text-align:center;
}
#banner.on{display:flex}
body.has-rail #banner{right:clamp(52px,6vw,86px)}
@media(max-width:1100px){body.has-rail #banner{right:0}}
#banner b{font-weight:500;letter-spacing:.02em}
#banner a.ban-cta{
  border:1px solid currentColor;padding:5px 14px;font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;font-weight:500;white-space:nowrap;transition:.25s;
}
#banner a.ban-cta:hover{background:var(--ban-tx,#FEF1D4);color:var(--ban-bg,#2B3037)}
#banner .ban-x{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:1.2rem;opacity:.7;line-height:1;min-width:36px;min-height:36px;display:flex;align-items:center;justify-content:center}
#banner .ban-x:hover{opacity:1}
@media(max-width:640px){#banner{font-size:.76rem;padding:10px 34px 10px 16px}}

/* ═══ SPECIALS · FUORI CARTA ═══ */
#specials{background:var(--sec-special)}
.sp-meta{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:30px}
.sp-range{font-family:var(--f-dis);font-size:1.3rem;color:var(--ink)}
.sp-note{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sea);font-weight:500}
.sp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:1px;background:var(--line)}
.sp{background:var(--paper);display:flex;flex-direction:column;transition:background .4s var(--ease)}
.sp:hover{background:var(--cream)}
.sp-img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(.2) sepia(.12) contrast(1.01)}
.sp-b{padding:26px 24px 30px;display:flex;flex-direction:column;flex:1}
.sp-t{align-self:flex-start;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  padding:4px 9px;border:1px solid var(--line-2);color:var(--sea-dk);margin-bottom:14px}
.sp-n{font-family:var(--f-dis);font-size:clamp(1.35rem,2.3vw,1.75rem);line-height:1.12;font-weight:400}
.sp-d{font-size:.85rem;color:var(--sea-dk);line-height:1.75;margin-top:10px;flex:1}
.sp-p{font-family:var(--f-dis);font-size:1.4rem;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.sp-empty{background:var(--paper);padding:40px 24px;text-align:center;color:var(--sea);font-style:italic;font-size:.9rem}

/* ═══ Kennzeichnungen & Allergene ═══ */
.mtags{display:inline-flex;gap:5px;flex-wrap:wrap;vertical-align:1px;margin-left:2px}
.mtag{
  font-size:.52rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  padding:2px 6px;border:1px solid currentColor;white-space:nowrap;line-height:1.5;
}
.mtag.veg{color:var(--sage)}
.mtag.vegan{color:var(--sage);background:rgba(110,139,110,.12)}
.mtag.scharf{color:var(--rose)}
.mtag.best{color:var(--ink);background:var(--cream)}
.mtag.spezial{color:var(--ink);border-style:double;border-width:3px;padding:1px 6px}
.mtag.neu{color:var(--sea-dk)}
.mtag.gf{color:var(--sea-dk)}
.mall{font-size:.62em;letter-spacing:.06em;color:var(--sea);vertical-align:super;margin-left:3px;font-weight:500;cursor:help}
.alg-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px 26px;margin-top:12px}
.alg-list div{font-size:.74rem;color:var(--sea-dk);line-height:1.65}
.alg-list b{display:inline;color:var(--ink);font-weight:600;font-size:.72rem;letter-spacing:.06em;margin:0 8px 0 0;min-width:1.2em}
.mfilter{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:20px}
.mfilter span{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sea);margin-right:4px}
.mfilter button{
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  padding:7px 13px;border:1px solid var(--line-2);color:var(--sea-dk);transition:.25s;min-height:34px;
}
.mfilter button:hover{border-color:var(--ink);color:var(--ink)}
.mfilter button.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.mitem.hide{display:none}
.mgroup.hide{display:none}
.mnone{font-size:.85rem;color:var(--sea);font-style:italic;padding:20px 0}

/* Kennzeichnungen in Tageskarte und Specials */
.wd-dish .mtags{margin:8px 0 0;display:flex}
.sp-b .mtags{margin-bottom:12px;display:flex}

/* ═══ SPEISEKARTE ═══ */
#karte{background:var(--sec-karte)}
.mtabs{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--line);margin-bottom:clamp(30px,5vw,52px);scrollbar-width:none;-ms-overflow-style:none}
.mtabs::-webkit-scrollbar{display:none}
.mtab{
  flex-shrink:0;padding:14px 20px;font-size:.68rem;letter-spacing:.17em;text-transform:uppercase;
  font-weight:500;color:var(--sea);border-bottom:2px solid transparent;margin-bottom:-1px;transition:.28s;
}
.mtab:hover{color:var(--ink)}
.mtab.on{color:var(--ink);border-bottom-color:var(--ink)}
.mpanel{display:none;animation:fadeUp .6s var(--ease)}
.mpanel.on{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.mgroup + .mgroup{margin-top:clamp(44px,6vw,72px)}
.mgroup-h{display:flex;align-items:baseline;gap:14px;margin-bottom:26px}
.mgroup-h h3{font-family:var(--f-dis);font-size:var(--fs-grp);font-weight:400;white-space:nowrap}
.mgroup-h .de{font-family:var(--f-dis);font-size:calc(var(--fs-grp)*.62);color:var(--sea-dk)}
.mgroup-h i{flex:1;height:1px;background:var(--line);display:block}
.mgroup-note{font-size:.78rem;color:var(--sea);margin:-14px 0 22px;font-style:italic}

.mlist{columns:2;column-gap:clamp(34px,5vw,78px)}
@media(max-width:800px){.mlist{columns:1}}
.mlist.one{columns:1;max-width:640px}
.mitem{break-inside:avoid;padding:11px 0 13px;border-bottom:1px dotted var(--line);display:block}
.mitem-t{display:flex;align-items:baseline;gap:8px;font-size:var(--fs-item);line-height:1.35;color:var(--ink)}
.mitem-no{font-family:var(--f-dis);color:var(--sea);font-size:.95em;min-width:1.5em}
.mitem-n{font-weight:400}
.mitem-sl{color:var(--sea-2);margin:0 .1em}
.mitem-p{font-weight:400;white-space:nowrap}
.mitem-d{font-size:.79rem;color:var(--sea);line-height:1.62;margin-top:3px}
.mitem-sizes{display:flex;gap:22px;flex-wrap:wrap;margin-left:auto;white-space:nowrap;font-size:.95em}
.mitem.two .mitem-t{flex-wrap:wrap}
.mfoot{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);font-size:.74rem;color:var(--sea);line-height:1.9}
.mfoot b{font-weight:500;color:var(--ink-2);letter-spacing:.1em;text-transform:uppercase;font-size:.68rem;display:block;margin-bottom:7px}
.mfoot ul li::before{content:'·';margin-right:8px;color:var(--sea-2)}

/* ═══ FLIPBOOK-SEKTION ═══ */
#blaettern{background:var(--sec-flip)}
.flip-in{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(34px,6vw,80px);align-items:center}
@media(max-width:900px){.flip-in{grid-template-columns:1fr}}
.flip-stack{position:relative;display:flex;justify-content:center;perspective:1400px}
.flip-stack img{
  width:34%;box-shadow:0 18px 44px rgba(43,48,55,.20);border:1px solid rgba(43,48,55,.08);
  transition:transform .7s var(--ease),box-shadow .7s var(--ease);background:var(--paper);
}
.flip-stack img:nth-child(1){transform:rotate(-8deg) translateX(24%)}
.flip-stack img:nth-child(2){transform:rotate(-1deg);z-index:2;width:38%}
.flip-stack img:nth-child(3){transform:rotate(7deg) translateX(-24%)}
.flip-stack:hover img:nth-child(1){transform:rotate(-13deg) translateX(38%) translateY(-8px)}
.flip-stack:hover img:nth-child(2){transform:rotate(0deg) translateY(-14px)}
.flip-stack:hover img:nth-child(3){transform:rotate(12deg) translateX(-38%) translateY(-8px)}
.flip-pages{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.flip-pages button{
  border:1px solid var(--line-2);padding:8px 13px;font-size:.66rem;letter-spacing:.1em;
  color:var(--ink-2);transition:var(--tr);text-transform:uppercase;font-weight:500;
}
.flip-pages button:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}

/* Flipbook-Overlay */
#flip{position:fixed;inset:0;z-index:4000;background:var(--sec-flipbg);display:none;flex-direction:column}
#flip.open{display:flex}
.fb-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px clamp(14px,3vw,30px);border-bottom:1px solid rgba(254,241,212,.16);flex-shrink:0}
.fb-brand{display:flex;align-items:baseline;gap:12px;min-width:0}
.fb-brand b{font-family:var(--f-dis);font-weight:400;font-size:1.15rem;letter-spacing:.14em;color:var(--cream)}
.fb-brand span{font-size:.68rem;color:#B9C2C5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fb-btn{border:1px solid rgba(254,241,212,.24);background:rgba(254,241,212,.06);color:var(--cream);min-height:36px;padding:0 15px;font-size:.72rem;letter-spacing:.08em;transition:.2s}
.fb-btn:hover:not(:disabled){background:rgba(254,241,212,.16)}
.fb-btn:disabled{opacity:.32;cursor:not-allowed}
.fb-stage{flex:1;min-height:0;overflow:auto;display:flex;align-items:center;justify-content:center;padding:16px;overscroll-behavior:contain}
.fb-stage.turning{overflow:hidden}
.fb-book{position:relative;perspective:2600px;transform-style:preserve-3d;user-select:none;flex:0 0 auto}
.fb-view{position:absolute;inset:0;z-index:1}
.fb-view.single{display:flex;justify-content:center}
.fb-view.spread{display:grid;grid-template-columns:1fr 1fr}
.fb-pg{position:relative;overflow:hidden;background:var(--paper)}
.fb-pg img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.fb-pg.blank{display:flex;align-items:center;justify-content:center;background:var(--cream)}
.fb-blank{font-family:var(--f-dis);font-size:1.4rem;letter-spacing:.4em;color:rgba(43,48,55,.22)}
.fb-pg.left{box-shadow:inset -22px 0 34px -26px rgba(0,0,0,.5)}
.fb-pg.right{box-shadow:inset 22px 0 34px -26px rgba(0,0,0,.5)}
.fb-spine{position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-1px);background:linear-gradient(90deg,rgba(0,0,0,.16),rgba(0,0,0,.34),rgba(0,0,0,.16));z-index:6;pointer-events:none}
.fb-spine.hidden{display:none}
.fb-layer{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;background:var(--paper);display:none}
.fb-layer.visible{display:block}
.fb-layer.left{left:0}.fb-layer.right{left:50%}
.fb-layer img{width:100%;height:100%;object-fit:cover;display:block}
.fb-leaf{z-index:8;transform-style:preserve-3d;backface-visibility:hidden;box-shadow:0 18px 46px rgba(0,0,0,.4)}
.fb-leaf.right{transform-origin:left center}
.fb-leaf.left{transform-origin:right center}
.fb-static{z-index:4}
.fb-bar{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:11px clamp(14px,3vw,30px);border-top:1px solid rgba(254,241,212,.14);flex-shrink:0}
.fb-status{display:flex;flex-direction:column;align-items:center;min-width:170px;line-height:1.3}
.fb-status b{color:var(--cream);font-size:.82rem;letter-spacing:.1em}
.fb-status span{color:#B9C2C5;font-size:.68rem}
.fb-thumbs{display:flex;gap:8px;overflow-x:auto;padding:9px clamp(14px,3vw,30px) 13px;border-top:1px solid rgba(254,241,212,.1);flex-shrink:0;justify-content:center}
.fb-thumb{border:1px solid rgba(254,241,212,.2);padding:0;background:none;position:relative;flex:0 0 auto;opacity:.55;transition:.2s}
.fb-thumb.on,.fb-thumb:hover{opacity:1;border-color:var(--cream)}
.fb-thumb img{width:44px;height:62px;object-fit:cover;display:block}
.fb-thumb span{position:absolute;right:2px;bottom:2px;background:rgba(32,38,43,.8);color:var(--cream);font-size:.55rem;padding:0 4px}
.fb-hint{text-align:center;font-size:.66rem;color:#B9C2C5;padding-bottom:8px}
@media(max-width:760px){.fb-thumbs{justify-content:flex-start}}

/* ═══ ÜBER UNS ═══ */
#about{background:var(--sec-about)}
.ab-in{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(34px,6vw,84px);align-items:center}
@media(max-width:900px){.ab-in{grid-template-columns:1fr}}
.ab-imgs{position:relative}
.ab-imgs img{filter:grayscale(.36) sepia(.16) contrast(1.02)}
.ab-i1{width:82%;aspect-ratio:4/5;object-fit:cover}
.ab-i2{position:absolute;right:0;bottom:-34px;width:48%;aspect-ratio:1;object-fit:cover;border:9px solid var(--paper)}
.ab-txt h2{font-family:var(--f-dis);font-size:var(--fs-sec);font-weight:400;line-height:1.05;margin-bottom:22px;overflow-wrap:break-word;hyphens:auto}
.ab-txt h2 .de{color:var(--sea-dk)}
.ab-txt p{color:var(--ink-2);font-size:var(--fs-body);line-height:1.9;margin-bottom:16px}
.ab-stats{display:flex;gap:clamp(22px,4vw,48px);margin-top:34px;padding-top:26px;border-top:1px solid var(--line);flex-wrap:wrap}
.ab-stat b{display:block;font-family:var(--f-dis);font-size:2rem;line-height:1;color:var(--ink);font-weight:400}
.ab-stat span{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sea);margin-top:7px;display:block}

/* Zitat */
.quote{background:var(--sec-quote);color:var(--sec-quote-tx);text-align:center;padding:clamp(60px,9vw,110px) 0}
.quote p{font-family:var(--f-dis);font-size:clamp(1.4rem,3.4vw,2.5rem);line-height:1.42;max-width:20ch;margin:0 auto;font-weight:400}
.quote p em{font-style:normal;color:var(--sea-2)}
.quote cite{display:block;margin-top:26px;font-style:normal;font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:#B9C2C5}

/* ═══ FEIERN / ANFRAGE ═══ */
#feiern{background:var(--sec-feiern)}
.fe-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,72px);align-items:start}
@media(max-width:900px){.fe-in{grid-template-columns:1fr}}
.fe-list{margin-top:30px}
.fe-item{display:flex;gap:16px;padding:17px 0;border-top:1px solid var(--line)}
.fe-item b{display:block;font-weight:500;font-size:.94rem;margin-bottom:3px}
.fe-item p{font-size:.83rem;color:var(--sea-dk);line-height:1.65}
.fe-num{font-family:var(--f-dis);font-size:1rem;color:var(--sea-2);min-width:26px}
.form{background:var(--paper);border:1px solid var(--line);padding:clamp(24px,3.4vw,40px)}
.form h3{font-family:var(--f-dis);font-size:1.7rem;font-weight:400;margin-bottom:6px}
.form > p{font-size:.8rem;color:var(--sea);margin-bottom:24px}
.fg{margin-bottom:15px}
.fg label{display:block;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sea-dk);margin-bottom:6px;font-weight:500}
.fg input,.fg select,.fg textarea{
  width:100%;background:transparent;border:none;border-bottom:1px solid var(--line-2);
  padding:9px 2px;font-family:inherit;font-size:.92rem;color:var(--ink);transition:border-color .3s;
}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-bottom-color:var(--ink)}
.fg textarea{resize:vertical;min-height:78px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:15px}
@media(max-width:520px){.f2{grid-template-columns:1fr}}
.form-ok{display:none;text-align:center;padding:34px 10px}
.form-ok.on{display:block}
.form-ok b{font-family:var(--f-dis);font-size:1.9rem;display:block;margin-bottom:10px;font-weight:400}
.form-ok p{color:var(--sea-dk);font-size:.88rem}
.f-note{font-size:.7rem;color:var(--sea);text-align:center;margin-top:14px;line-height:1.6}

/* ═══ KONTAKT ═══ */
#kontakt{background:var(--sec-kontakt)}
.k-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:1px;background:var(--line);margin-bottom:44px}
.kc{background:var(--paper);padding:32px 28px 36px}
.kc h3{font-family:var(--f-dis);font-size:1.5rem;font-weight:400;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.hr-sub{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--sea);
  font-weight:500;margin:4px 0 6px;display:flex;align-items:center;gap:10px}
.hr-sub::after{content:'';flex:1;height:1px;background:var(--line)}
.hr-sub + div + .hr-sub{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.hr-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:.86rem;align-items:baseline}
.hr-row .d{color:var(--ink-2)}
.hr-row .t{color:var(--sea-dk);font-variant-numeric:tabular-nums;text-align:right}
.hr-row.now{color:var(--ink);font-weight:500}
.hr-row .shut{color:var(--sea);font-style:italic}
.kc p{font-size:.9rem;color:var(--ink-2);line-height:1.85}
.kc a.lnk{color:var(--ink);border-bottom:1px solid var(--line-2);transition:.3s}
.kc a.lnk:hover{border-bottom-color:var(--ink)}
.kc .big{font-family:var(--f-dis);font-size:1.55rem;display:inline-block;margin:4px 0 10px}
.kc .cash{margin-top:18px;padding:11px 14px;background:var(--cream);font-size:.76rem;color:var(--ink-2);line-height:1.6}
.map{position:relative;height:clamp(280px,42vw,430px);border:1px solid var(--line);overflow:hidden;background:var(--cream)}
.map iframe{width:100%;height:100%;border:0;filter:var(--map-filter,none)}
.map-card{position:absolute;left:22px;bottom:22px;background:var(--paper);padding:18px 22px;border:1px solid var(--line);max-width:280px}
.map-card b{font-family:var(--f-dis);font-size:1.2rem;font-weight:400;display:block}
.map-card span{font-size:.78rem;color:var(--sea-dk)}
.map-gate{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:26px;background:var(--cream)}
.map-gate p{font-size:.84rem;color:var(--ink-2);max-width:38ch;line-height:1.7}

/* ═══ FOOTER ═══ */
footer{background:var(--sec-foot);color:var(--sec-foot-tx);padding:clamp(56px,7vw,88px) 0 28px}
.f-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(24px,4vw,52px);padding-bottom:44px;border-bottom:1px solid rgba(254,241,212,.14)}
@media(max-width:860px){.f-top{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.f-top{grid-template-columns:1fr}}
.f-brand .ionio-logo{width:190px;--logo-ink:#FEF1D4;--logo-sea:#9AA5A9}
.f-brand p{font-size:.83rem;color:#B9C2C5;line-height:1.8;margin-top:16px;max-width:34ch}
.f-social{display:flex;gap:9px;margin-top:20px}
.f-social a{width:40px;height:40px;border:1px solid rgba(254,241,212,.24);display:flex;align-items:center;justify-content:center;transition:var(--tr)}
.f-social a:hover{background:var(--cream);color:var(--ink)}
.f-col h4{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:#B9C2C5;margin-bottom:16px;font-weight:500}
.f-col li{margin-bottom:9px}
.f-col a{font-size:.85rem;color:rgba(254,241,212,.8);transition:color .3s}
.f-col a:hover{color:var(--cream)}
.f-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;font-size:.72rem;color:#B9C2C5}
.f-bot a{transition:color .3s}
.f-bot a:hover{color:var(--cream)}
.f-legal{display:flex;gap:20px;flex-wrap:wrap}

/* Floating Call */
.fab{position:fixed;bottom:20px;left:20px;z-index:800;display:none}
.fab a{display:flex;align-items:center;gap:9px;background:var(--ink);color:var(--cream);padding:14px 20px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;box-shadow:0 8px 26px rgba(43,48,55,.3)}
@media(max-width:940px){.fab{display:block}}

/* Toast */
#toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,26px);z-index:7000;background:var(--ink);color:var(--cream);padding:13px 24px;font-size:.82rem;opacity:0;transition:.35s var(--ease);pointer-events:none}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* Rechts-Modals (Impressum etc.) */
.modal{position:fixed;inset:0;z-index:5000;background:rgba(43,48,55,.72);display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(6px)}
.modal.open{display:flex}
.modal-in{background:var(--paper);max-width:660px;width:100%;max-height:86vh;overflow-y:auto;padding:clamp(26px,4vw,44px);border:1px solid var(--line)}
.modal-in h3{font-family:var(--f-dis);font-size:1.9rem;font-weight:400;margin-bottom:18px}
.modal-in h4{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sea);margin:22px 0 8px;font-weight:500}
.modal-in p,.modal-in li{font-size:.87rem;color:var(--ink-2);line-height:1.8}
.modal-in ul{padding-left:18px;list-style:disc}
.modal-x{float:right;font-size:1.5rem;line-height:1;color:var(--sea);margin:-8px -8px 0 0;min-width:40px;min-height:40px}


/* ════════════════════════════════════════════════
   ADMIN — heller Werkraum, gleiche Palette
   ════════════════════════════════════════════════ */
.adm-trigger{position:fixed;bottom:16px;right:16px;z-index:850;opacity:.5;transition:opacity .3s}
.adm-trigger:hover,.adm-trigger:focus-within{opacity:1}
.adm-trigger button{width:32px;height:32px;border-radius:50%;background:var(--paper);border:1px solid var(--line-2);color:var(--sea);font-size:.72rem;transition:var(--tr)}
.adm-trigger button:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
body.has-rail .adm-trigger{right:calc(clamp(52px,6vw,86px) + 16px)}

#login{position:fixed;inset:0;z-index:5500;background:rgba(254,241,212,.97);backdrop-filter:blur(14px);display:none;align-items:center;justify-content:center;padding:20px}
#login.open{display:flex}
.login-box{background:var(--paper);border:1px solid var(--line);padding:clamp(30px,4vw,46px);max-width:390px;width:100%;text-align:center}
.login-box .ionio-logo{width:180px;margin:0 auto 8px}
.login-box .sub{font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--sea);margin-bottom:28px}
.login-box label{display:block;text-align:left;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sea-dk);margin-bottom:7px;font-weight:500}
.login-box input{width:100%;background:transparent;border:none;border-bottom:1px solid var(--line-2);padding:10px 2px;font-family:inherit;font-size:1rem;color:var(--ink);margin-bottom:20px;letter-spacing:.2em}
.login-box input:focus{outline:none;border-bottom-color:var(--ink)}
.login-err{color:var(--rose);font-size:.78rem;min-height:20px;margin-top:10px}
.login-hint{font-size:.68rem;color:var(--sea);margin-top:16px}

#adm{
  position:fixed;top:0;right:0;bottom:0;width:520px;max-width:100vw;z-index:5000;
  background:var(--paper);border-left:1px solid var(--line-2);
  box-shadow:-16px 0 60px rgba(43,48,55,.16);
  display:none;flex-direction:column;
  font-family:var(--f-body);
}
#adm.open{display:flex}
@media(max-width:640px){#adm{width:100vw}}
#adm.full{width:100vw!important;left:0;border-left:none}
#adm.full .adm-body{padding:20px clamp(20px,3vw,44px)}
#adm.full .adm-page.on{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:16px;align-items:start;max-width:1500px;margin:0 auto;
}
#adm.full .adm-page.on > .card{margin-bottom:0}
#adm.full .adm-page.on > .hint,
#adm.full .adm-page.on > .wb,
#adm.full .adm-page.on > .a-row{grid-column:1/-1}
#adm.full #p-anfragen > .card,
#adm.full #p-karte > .card:first-of-type{grid-column:1/-1}
#adm.full #p-anfragen td{white-space:normal}
#adm.full .wb{display:grid;grid-template-columns:minmax(280px,1fr) 2fr;gap:14px;align-items:start}
@media(max-width:900px){#adm.full .wb{grid-template-columns:1fr}}
#adm.full .wb-src{max-height:none;min-height:340px}
#adm.full .adm-top-r1{padding:0 clamp(20px,3vw,44px)}
#adm.full .adm-tabs{padding:0 clamp(20px,3vw,44px)}
#adm.full .adm-w button[data-w]{display:none}
body.adm-open{overflow:hidden}

.adm-top{flex-shrink:0;border-bottom:1px solid var(--line);background:var(--cream)}
.adm-top-r1{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 10px 0 16px;gap:10px}
.adm-logo{display:flex;align-items:center;gap:9px}
.adm-logo b{font-family:var(--f-dis);font-size:1.05rem;font-weight:400;letter-spacing:.14em}
.adm-logo i{font-style:normal;font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sea);border:1px solid var(--line-2);padding:2px 6px}
.adm-w{display:flex;border:1px solid var(--line-2)}
.adm-w button{padding:5px 9px;font-size:.6rem;color:var(--sea);transition:.2s;border-right:1px solid var(--line-2)}
.adm-w button:last-child{border-right:none}
.adm-w button:hover{background:var(--ink);color:var(--cream)}
.adm-close{background:var(--ink);color:var(--cream);padding:6px 13px;font-size:.66rem;letter-spacing:.1em;transition:.2s}
.save-state{font-size:.66rem;letter-spacing:.04em;color:var(--sea-2);white-space:nowrap;transition:color .3s}
.save-state.offen{color:var(--rose)}
.save-state.läuft{color:var(--sea-dk)}
.save-state.fertig{color:var(--sage)}
.save-state.fehler{color:var(--rose);font-weight:500}
@media(max-width:640px){#adm .adm-w{display:none}#adm .adm-top-r1{padding:0 10px 0 12px}}
.adm-close:hover{background:var(--rose)}
.adm-tabs{display:flex;overflow-x:auto;gap:0;padding:0 10px;scrollbar-width:none;-ms-overflow-style:none;border-top:1px solid var(--line)}
.adm-tabs::-webkit-scrollbar{display:none}
.adm-tab{flex-shrink:0;padding:11px 13px;font-size:.68rem;letter-spacing:.05em;color:var(--sea);white-space:nowrap;border-bottom:2px solid transparent;transition:.2s;font-weight:500}
.adm-tab:hover{color:var(--ink)}
.adm-tab.on{color:var(--ink);border-bottom-color:var(--ink)}
.adm-tab .pill{background:var(--rose);color:var(--paper);font-size:.55rem;padding:1px 5px;border-radius:20px;margin-left:4px;vertical-align:1px}

.adm-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:14px;background:#FCFAF4}
#adm .card,#adm .wb,#adm .wb > *,#adm .days > *,#adm .a2 > *,#adm .a3 > *{min-width:0}
#adm .wb-item .nm,#adm .dcard{min-width:0;overflow-wrap:anywhere}
#adm .stat b{overflow-wrap:anywhere}
.adm-page{display:none}
.adm-page.on{display:block}

.card{background:var(--paper);border:1px solid var(--line);margin-bottom:12px}
.card-h{padding:10px 14px;border-bottom:1px solid var(--line);background:var(--cream);display:flex;align-items:center;justify-content:space-between;gap:10px}
.card-h b{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink)}
.card-b{padding:14px}
.card-b > p{font-size:.8rem;color:var(--sea-dk);line-height:1.65}
.a-fg{margin-bottom:11px}
.a-fg label{display:block;font-size:.68rem;color:var(--ink-2);margin-bottom:4px;font-weight:500}
.a-fg input,.a-fg select,.a-fg textarea{
  width:100%;background:var(--paper);border:1px solid var(--line-2);color:var(--ink);
  padding:7px 10px;font-size:.82rem;font-family:inherit;border-radius:0;
}
.a-fg input:focus,.a-fg select:focus,.a-fg textarea:focus{outline:none;border-color:var(--ink)}
.a-fg textarea{resize:vertical;min-height:64px;line-height:1.6}
.a-fg small{display:block;font-size:.68rem;color:var(--sea);margin-top:3px}
.a2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.a3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.a-btn{padding:8px 15px;font-size:.72rem;font-weight:500;letter-spacing:.04em;transition:.2s;border:1px solid transparent}
.a-p{background:var(--ink);color:var(--cream)}
.a-p:hover{background:var(--sea-dk)}
.a-g{background:var(--paper);border-color:var(--line-2);color:var(--ink-2)}
.a-g:hover{border-color:var(--ink);color:var(--ink)}
.a-d{background:rgba(164,99,91,.1);border-color:rgba(164,99,91,.35);color:var(--rose)}
.a-d:hover{background:var(--rose);color:var(--paper)}
.a-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:9px}
.stat{background:var(--cream);border:1px solid var(--line);padding:13px}
.stat b{display:block;font-family:var(--f-dis);font-size:1.6rem;line-height:1;font-weight:400}
.stat span{font-size:.66rem;color:var(--sea-dk);display:block;margin-top:5px}

table{width:100%;border-collapse:collapse}
th{background:var(--cream);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;padding:8px 10px;text-align:left;border-bottom:1px solid var(--line);color:var(--ink-2);font-weight:600}
td{font-size:.78rem;padding:8px 10px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top}
tr:hover td{background:#FCFAF4}

/* Wochenkarte-Builder */
.wb{display:grid;grid-template-columns:1fr;gap:11px}
.wb-src{border:1px solid var(--line);background:var(--paper);max-height:340px;display:flex;flex-direction:column}
.wb-src > *{flex:0 0 auto}
.wb-items{flex:1 1 auto;min-height:70px}
.wb-src-h{padding:9px 12px;border-bottom:1px solid var(--line);background:var(--cream)}
.wb-cats{display:flex;gap:3px;overflow-x:auto;padding:7px 12px 0;scrollbar-width:none}
.wb-cats::-webkit-scrollbar{display:none}
.wbc{font-size:.63rem;padding:4px 8px;color:var(--sea);border-bottom:2px solid transparent;white-space:nowrap;transition:.2s;font-weight:500}
.wbc.on{color:var(--ink);border-bottom-color:var(--ink)}
.wb-items{overflow-y:auto;padding:9px 12px;display:flex;flex-direction:column;gap:5px}
.wb-item{border:1px solid var(--line);padding:7px 9px;cursor:grab;display:flex;justify-content:space-between;gap:8px;align-items:baseline;transition:.15s;background:var(--paper)}
.wb-item:hover{border-color:var(--ink);background:var(--cream)}
.wb-item:active{cursor:grabbing}
.wb-item .nm{font-size:.78rem;color:var(--ink);line-height:1.3}
.wb-item .cat{font-size:.62rem;color:var(--sea-2);display:block}
.wb-item .pr{font-size:.75rem;color:var(--ink-2);white-space:nowrap}
.days{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:7px}
.daycol{border:1px solid var(--line);background:var(--paper);min-height:112px;display:flex;flex-direction:column}
.daycol.over{border-color:var(--ink);background:var(--cream)}
.day-h{padding:7px 9px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;gap:6px;background:var(--cream)}
.day-h b{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.day-h span{font-size:.6rem;color:var(--sea-2)}
.day-h button{font-size:.62rem;color:var(--sea)}
.day-h button:hover{color:var(--rose)}
.dz{flex:1;padding:7px;display:flex;flex-direction:column;gap:5px}
.dcard{border:1px solid var(--line);padding:6px 8px;font-size:.72rem;position:relative;cursor:grab;background:var(--paper)}
.dcard .p{color:var(--sea-dk);font-size:.68rem}
.dcard .x{position:absolute;top:2px;right:4px;font-size:.7rem;color:var(--sea-2);line-height:1}
.dcard .x:hover{color:var(--rose)}
.day-empty{font-size:.68rem;color:var(--sea);font-style:italic;text-align:center;padding:14px 4px}

/* Farbfeld */
.sw-row{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.sw-row label{flex:1;font-size:.74rem;color:var(--ink-2)}
.sw-row input[type=color]{width:34px;height:28px;padding:0;border:1px solid var(--line-2);background:none;cursor:pointer}
.sw-row input[type=text]{width:88px;font-size:.72rem;padding:5px 7px;border:1px solid var(--line-2);font-family:ui-monospace,monospace;background:var(--paper);color:var(--ink)}
.schemes{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px}
.scheme{border:1px solid var(--line);padding:9px;cursor:pointer;transition:.2s;background:var(--paper)}
.scheme:hover{border-color:var(--ink)}
.scheme b{display:block;font-size:.7rem;margin-bottom:6px;font-weight:500}
.scheme .dots{display:flex;gap:3px}
.scheme .dots i{width:15px;height:15px;border:1px solid var(--line)}
.rng{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.rng label{flex:1;font-size:.74rem;color:var(--ink-2)}
.rng input[type=range]{flex:1.2;accent-color:var(--ink)}
.rng output{font-size:.7rem;color:var(--sea-dk);width:52px;text-align:right;font-variant-numeric:tabular-nums}
.subtabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:12px}
.subtab{font-size:.64rem;padding:6px 11px;border:1px solid var(--line-2);color:var(--sea-dk);transition:.2s;font-weight:500;letter-spacing:.04em}
.subtab.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.hint{font-size:.7rem;color:var(--sea);line-height:1.6;background:var(--cream);border-left:2px solid var(--sea-2);padding:9px 11px;margin-bottom:12px}
.dish-row{display:flex;gap:8px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line)}
.dish-row .nm{flex:1;font-size:.8rem}
.dish-row .nm small{display:block;color:var(--sea);font-size:.68rem;line-height:1.4}
.dish-row .pr{font-size:.78rem;color:var(--ink-2);white-space:nowrap}
.dish-row button{font-size:.66rem;color:var(--sea);padding:2px 5px}
.dish-row button:hover{color:var(--ink)}
.chk{display:flex;flex-wrap:wrap;gap:5px}
.chk label{
  display:inline-flex;align-items:center;justify-content:flex-start;gap:6px;font-size:.72rem;color:var(--ink-2);
  border:1px solid var(--line-2);padding:5px 9px;cursor:pointer;transition:.2s;min-height:32px;font-weight:400;margin:0;
  text-transform:none;letter-spacing:0;
}
.chk label:hover{border-color:var(--ink)}
.chk label.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.chk input{margin:0;width:auto;flex:0 0 auto;accent-color:var(--cream)}
.chk.alg{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:5px}
.chk.alg label{min-width:0;align-items:center;line-height:1.3;justify-content:flex-start;text-align:left}
.chk.alg label span{flex:1}
.chk.alg label span{font-size:.66rem;color:inherit;opacity:.75}
.dish-row .badges{display:inline-flex;gap:4px;margin-left:6px}
.dish-row .badges i{font-style:normal;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line-2);padding:1px 5px;color:var(--sea-dk)}
.mpv{height:120px;border:1px solid var(--line);background:var(--cream) center/cover no-repeat;margin-bottom:9px;
  display:flex;align-items:center;justify-content:center;font-size:.7rem;color:var(--sea-2)}
.mpv.sm{height:74px;background-size:contain;background-color:var(--paper)}
.mpv.dark{background-color:var(--ink)}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:7px}
.mgrid figure{margin:0}
.mgrid img{width:100%;aspect-ratio:1659/2355;object-fit:cover;border:1px solid var(--line)}
.mgrid figcaption{font-size:.62rem;color:var(--sea);text-align:center;margin-top:3px}