/* Mittagstisch Bernau – statische Seite nach Master-Layout (FireShot Speiseplan)
   Maße aus dem Master-PDF übernommen (Faktor 0,833 auf 15 px Fließtext). */
:root{
  --blue:#004f9e;        /* Navigation, Überschriften, Tabellenkopf, Footer */
  --blue-active:#006fdb; /* aktiver Menüpunkt */
  --ink:#000000;         /* Fließtext */
  --muted:#919191;       /* helle Tabellenzeilen (wie Master) */
  --line:#ebebeb;        /* Tabellenlinien */
  --row:#f8f8f8;         /* jede zweite Tabellenzeile */
  --grey:#ededed;        /* Laufschrift-Bereich */
  --font:"Helvetica Neue", Helvetica, Arial, sans-serif;
  --fs:15px;             /* Fließtext Desktop */
  --box:1175px;          /* Breite der weißen Seitenbox */
  --pad:54px;            /* Innenabstand der Box */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#676465 url(../img/bg.jpg) center top/cover fixed;color:var(--ink);font:var(--fs)/1.8 var(--font)}
img{max-width:100%;height:auto;border:0}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--blue-active);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-9999px;top:0;background:#fff;padding:8px 12px;z-index:20}
.skip:focus{left:8px}

.box{max-width:var(--box);margin:0 auto;background:#fff;min-height:100vh;box-shadow:0 0 0 1px rgba(0,0,0,.04)}

/* Kopf */
.head{background:#fff}
.logo{height:212px;display:flex;align-items:center;justify-content:center}
.logo img{width:202px;height:auto}
.nav{background:var(--blue);position:relative}
.nav ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;flex-wrap:wrap}
.nav li{position:relative}
.nav li + li::before{content:"";position:absolute;left:0;top:50%;height:19px;margin-top:-9px;border-left:1px solid rgba(255,255,255,.75)}
.nav a{display:block;color:#fff;font-size:16px;line-height:55px;padding:0 15px;white-space:nowrap}
.nav a:hover{text-decoration:none;background:rgba(255,255,255,.08)}
.nav a.cur{background:var(--blue-active)}
.nav li:has(a.cur)::before, .nav li:has(a.cur) + li::before{display:none}
.burger{display:none}

/* Slider */
.slider{position:relative;aspect-ratio:1024/350;overflow:hidden;background:#333}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.slide.on{opacity:1;z-index:1}
.slide img{width:100%;height:100%;object-fit:cover;display:block}
.cap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 8%}
.cap-in{background:rgba(0,0,0,.42);padding:6px 16px;text-align:center}
.cap h2{margin:0;color:#fff;font-size:32px;line-height:1.35;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.cap p{margin:2px 0 4px;color:#fff;font-size:17px}
.sl-prev,.sl-next{position:absolute;top:50%;z-index:3;margin-top:-26px;width:44px;height:52px;border:0;background:rgba(0,0,0,.3);color:#fff;font-size:34px;line-height:1;cursor:pointer;opacity:0;transition:opacity .2s}
.sl-prev{left:12px}.sl-next{right:12px}
.slider:hover .sl-prev,.slider:hover .sl-next,.sl-prev:focus-visible,.sl-next:focus-visible{opacity:1}
.sl-dots{position:absolute;bottom:12px;left:0;right:0;z-index:3;display:flex;justify-content:center;gap:8px;opacity:0;transition:opacity .2s}
.slider:hover .sl-dots{opacity:1}
.sl-dots button{width:12px;height:12px;border-radius:50%;border:0;background:rgba(255,255,255,.5);padding:0;cursor:pointer}
.sl-dots button.on{background:#fff}

/* Bereiche und Spalten (Raster wie Enfold) */
.sec{padding:80px var(--pad) 50px}
.sec-color{background:var(--grey)}
.sec-ticker{background:var(--grey);padding:16px var(--pad) 10px;min-height:228px}
.sec-info{background:var(--grey);padding:38px var(--pad) 26px}
.row::after{content:"";display:table;clear:both}
.col{float:left;margin-left:6%;min-height:1px}
.col.first{clear:left;margin-left:0}
.c-1-1{width:100%;margin-left:0}
.c-1-2{width:47%}.c-1-3{width:29.333%}.c-2-3{width:64.666%}
.c-1-4{width:20.5%}.c-3-4{width:73.5%}.c-1-5{width:16.4%}.c-4-5{width:77.6%}
.c-2-5{width:36.8%}.c-3-5{width:57.2%}
.col + .col.c-1-1{margin-top:10px}

/* Laufschrift */
.ticker{overflow:hidden;white-space:nowrap;line-height:1.8}
.tk-track{display:inline-flex;gap:50px;animation:tk 36s linear infinite;padding-left:0}
.ticker:hover .tk-track{animation-play-state:paused}
.tk-item strong{color:var(--blue)}
@keyframes tk{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.schild{display:flex;justify-content:center;padding-top:66px}
.schild img{width:175px;transform:none}

/* Text */
.text p{margin:0 0 1.1em}
.text p:last-child{margin-bottom:0}
.text h2,.text h3,.text h4{color:var(--blue);line-height:1.35;margin:1.2em 0 .5em}
.text h2{font-size:24px}.text h3{font-size:19px}.text h4{font-size:16px}
.text ul,.text ol{padding-left:1.4em;margin:0 0 1.1em}
.text img{display:inline-block;vertical-align:top;margin:0 6px 6px 0}
.text img.alignright{float:right;margin:0 0 10px 16px}
.text img.alignleft{float:left;margin:0 16px 10px 0}
.text img.aligncenter{display:block;margin:0 auto 10px}
hr.line{border:0;border-top:1px solid #9b9b9b;margin:1.2em 0}

/* Spezial-Überschriften */
.sh{margin:0 0 22px}
.sh.center{text-align:center}
.sh h1,.sh h2,.sh h3{color:var(--blue);margin:0;line-height:1.25;font-weight:700}
.sh h1{font-size:28px}.sh h2{font-size:26px}.sh h3{font-size:38px}
.sh .sub{font-size:16px;line-height:1.5;margin-top:4px}
.sh .sub p{margin:0}

/* Trennlinien */
.hr{clear:both}
.hr-custom{display:flex;justify-content:center;padding:36px 0 120px}
.hr-custom span{display:block;width:550px;max-width:100%;border-top:2px solid var(--blue)}
.hr-icon{display:flex;align-items:center;justify-content:center;gap:12px;padding:110px 0 24px}
.hr-icon .l{flex:0 1 496px;border-top:2px solid var(--blue)}
.hr-icon svg{width:17px;height:17px;fill:#000;flex:none}
.hr-default{border-top:1px solid var(--line);margin:30px 0}
.hr-space{height:30px}
.hr-short{display:flex;justify-content:center;padding:20px 0}
.hr-short span{width:50px;border-top:1px solid var(--line)}

/* Bilder */
.img{margin:0 0 10px}
.img-center{text-align:center}.img-right{text-align:right}
.img img{display:inline-block}
.missing-img{display:flex;align-items:center;justify-content:center;min-height:120px;background:repeating-linear-gradient(45deg,#f4f4f4 0 10px,#ececec 10px 20px);color:#777;font-size:13px;text-align:center;padding:10px;height:100%}

/* Symbol-Listen und Info-Boxen */
.iconlist{list-style:none;margin:0 0 20px;padding:0}
.iconlist li{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
.il-ic{flex:none;width:34px;height:34px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center}
.il-ic svg{width:18px;height:18px;fill:#fff}
.iconlist p{margin:4px 0 0}
.ibox{text-align:center}
.ib-ic{display:inline-flex;width:40px;height:40px;margin-bottom:8px}
.ib-ic svg{width:40px;height:40px;fill:var(--blue)}
.ibox p{margin:0 0 .4em}

/* Speiseplan-Tabelle */
.tbl-wrap{margin:0 0 10px}
.dtable{width:100%;border-collapse:collapse;table-layout:fixed;font-size:var(--fs);line-height:1.8}
.dtable th,.dtable td{border:1px solid var(--line);padding:11px 13px 12px;vertical-align:top;text-align:left}
.dtable tr.head th{background:var(--blue);color:#fff;border-color:var(--blue);border-left-color:rgba(255,255,255,.35);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:2.6px;line-height:1.9;padding:18px 15px 22px}
.dtable tr.head th:first-child{border-left-color:var(--blue)}
.dtable td.day{text-align:center;color:var(--blue);font-weight:700;text-transform:uppercase;width:20%}
.dtable tr:nth-child(even) td{color:var(--muted);background:#fff}
.dtable tr:nth-child(odd) td{background:var(--row)}
.dtable tr:nth-child(even) td.day{color:var(--blue)}
.p-speiseplan .text p{margin-bottom:.95em}
.p-speiseplan .text p img{width:219px;margin:0 2px 0 0}

/* Footer */
.socket{background:var(--blue);color:#fff;font-size:13px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:17px var(--pad) 19px;min-height:60px}
.socket ul{list-style:none;margin:0;padding:0;display:flex}
.socket li + li{border-left:1px solid rgba(255,255,255,.8);margin-left:12px;padding-left:12px;line-height:1}
.socket a{color:#fff}

/* Lightbox */
.lb{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:50;padding:20px;cursor:zoom-out}
.lb.on{display:flex}
.lb img{max-height:92vh;max-width:96vw;box-shadow:0 10px 40px rgba(0,0,0,.6)}

@media (prefers-reduced-motion: reduce){.tk-track{animation:none}.slide{transition:none}}

/* Tablet */
@media (max-width: 1000px){
  :root{--pad:32px}
  .nav a{padding:0 10px;font-size:15px}
}

/* Handy */
@media (max-width: 767px){
  :root{--fs:17px;--pad:20px}
  body{background-attachment:scroll}
  .logo{height:150px}
  .logo img{width:140px}
  .burger{display:flex;align-items:center;gap:10px;width:100%;height:52px;padding:0 20px;background:none;border:0;color:#fff;font-size:17px;cursor:pointer}
  .burger::after{content:"Menü"}
  .burger span:first-child,.burger span:first-child::before,.burger span:first-child::after{display:block;width:22px;height:2px;background:#fff;position:relative}
  .burger span:first-child::before,.burger span:first-child::after{content:"";position:absolute;left:0}
  .burger span:first-child::before{top:-7px}.burger span:first-child::after{top:7px}
  .nav ul{display:none;flex-direction:column}
  .nav.open ul{display:flex}
  .nav li + li::before{display:none}
  .nav li{border-top:1px solid rgba(255,255,255,.2)}
  .nav a{line-height:48px;padding:0 20px;font-size:17px}
  .cap h2{font-size:20px}
  .cap p{font-size:15px}
  .cap-in{padding:4px 10px}
  .sec{padding:32px var(--pad) 26px}
  .sec-ticker{min-height:0;padding:14px var(--pad)}
  .col,.col.first{float:none;width:100%;margin-left:0}
  .col + .col{margin-top:14px}
  .schild{padding-top:6px}
  .schild img{width:140px}
  .sh h3{font-size:30px}
  .sh h1{font-size:24px}.sh h2{font-size:22px}
  .hr-custom{padding:24px 0 36px}
  .hr-custom span{width:70%}
  .text img{max-width:calc(50% - 6px)}
  .text img.alignright,.text img.alignleft{float:none;margin:0 0 10px}
  /* Tabelle als Karten */
  .dtable,.dtable tbody,.dtable tr,.dtable td{display:block;width:100%}
  .dtable tr.head{display:none}
  .dtable tr{border:1px solid var(--line);margin-bottom:14px}
  .dtable td{border:0;border-top:1px solid var(--line);padding:10px 14px}
  .dtable td.day{width:100%;border-top:0;background:var(--blue)!important;color:#fff!important;text-align:left}
  .dtable td[data-label]::before{content:attr(data-label);display:block;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--blue);line-height:1.6}
  .socket{flex-direction:column;align-items:flex-start;padding:18px var(--pad)}
}

/* ===== Änderungen 06.11.2026 ===== */

/* „Achtung neu“: 1/3 kleiner, rechtsbündig, Text fließt links */
.text img.neu-badge{float:right;margin:4px 0 14px 24px;width:242px;height:auto}
.text .neu-badge + *{margin-top:0}
.text::after{content:"";display:table;clear:both}

/* Abstände (außer Speiseplan = Master-Layout) */
body:not(.p-speiseplan) .sec{padding:56px var(--pad) 44px}
body:not(.p-speiseplan) .hr-custom{padding:34px 0 38px}
body:not(.p-speiseplan) .sh{margin-bottom:6px}
body:not(.p-speiseplan) .sh + .hr-custom{padding-top:18px}
body:not(.p-speiseplan) .hr-custom + .col,
body:not(.p-speiseplan) .col:has(> .hr-custom:last-child) + .col{margin-top:0}
.text > hr.line{margin:1.4em 0}
.text > hr.line + p, .text > p + hr.line{margin-top:1.4em}
.iconlist{margin-bottom:0}
.iconlist li:last-child{margin-bottom:0}
.sec-info{padding:44px var(--pad) 34px}

/* Häkchen-Liste: Haken fliegt von links in den Kreis, Text von rechts */
.il-ic{width:38px;height:38px}
.il-ic svg{width:22px;height:22px}           /* 20 % größer als vorher (18 px) */
.js .iconlist .il-ic svg{opacity:0;transform:translateX(-22px)}
.js .iconlist .il-tx{opacity:0;transform:translateX(40px)}
.js .iconlist.in-view .il-ic svg{opacity:1;transform:none;transition:opacity 1.1s ease-out calc(var(--i) * .22s),transform 1.1s cubic-bezier(.2,.7,.25,1) calc(var(--i) * .22s)}
.js .iconlist.in-view .il-tx{opacity:1;transform:none;transition:opacity 1.2s ease-out calc(var(--i) * .22s + .25s),transform 1.2s cubic-bezier(.2,.7,.25,1) calc(var(--i) * .22s + .25s)}
.il-ic{overflow:hidden}

/* Info-Pictogramme */
.ib-ic{overflow:visible}
.ib-ic svg{overflow:visible}
/* Adresse: fliegt wie ein Pfeil ein */
.js .ib-pin .ib-ic svg{opacity:0;transform:translate(-90px,-40px) rotate(-35deg)}
.js .ib-pin.in-view .ib-ic svg{animation:pin-fly 1.6s cubic-bezier(.2,.75,.3,1) forwards}
@keyframes pin-fly{
  0%{opacity:0;transform:translate(-90px,-40px) rotate(-35deg)}
  55%{opacity:1;transform:translate(4px,2px) rotate(6deg)}
  72%{transform:translate(0,-6px) rotate(0)}
  86%{transform:translate(0,1px)}
  100%{opacity:1;transform:none}}
/* Öffnungszeiten: Zeiger drehen sich */
.ib-clock .h-hour,.ib-clock .h-min{transform-box:view-box;transform-origin:12px 12px}
.js .ib-clock.in-view .h-min{animation:spin-min 2.6s cubic-bezier(.35,.1,.25,1) forwards}
.js .ib-clock.in-view .h-hour{animation:spin-hour 2.6s cubic-bezier(.35,.1,.25,1) forwards}
@keyframes spin-min{from{transform:rotate(-720deg)}to{transform:rotate(0)}}
@keyframes spin-hour{from{transform:rotate(-120deg)}to{transform:rotate(0)}}
.ib-clock .h-hour{transform:rotate(0)}
/* Telefon: Hörer vibriert */
.ib-phone .ib-ic svg{transform-origin:50% 60%}
.js .ib-phone.in-view .ib-ic svg{animation:ring 1.8s ease-in-out 2}
.ib-phone:hover .ib-ic svg{animation:ring 1.8s ease-in-out 1}
@keyframes ring{
  0%,100%{transform:none}
  6%,18%,30%,42%{transform:rotate(-13deg) translateX(-1px)}
  12%,24%,36%,48%{transform:rotate(13deg) translateX(1px)}
  56%{transform:none}}

@media (prefers-reduced-motion: reduce){
  .js .iconlist .il-ic svg,.js .iconlist .il-tx,.js .ib-pin .ib-ic svg{opacity:1;transform:none;transition:none;animation:none}
  .js .ib-clock .h-min,.js .ib-clock .h-hour,.js .ib-phone .ib-ic svg{animation:none}
}
@media (max-width: 767px){
  .text img.neu-badge{width:170px;margin:2px 0 10px 14px;float:right;max-width:45%}
  body:not(.p-speiseplan) .sec{padding:34px var(--pad) 28px}
  body:not(.p-speiseplan) .hr-custom{padding:22px 0 26px}
}

/* ===== Laufschrift + „Täglich frisch gekocht“ (06.11.2026) ===== */
.sec-ticker{min-height:0;padding:22px var(--pad);background:linear-gradient(180deg,#f3f3f3 0%,var(--grey) 100%);border-bottom:1px solid #e2e2e2}
.tk-band{display:flex;align-items:center;gap:28px}
.tk-box{flex:1;min-width:0;display:flex;align-items:stretch;background:#fff;border:1px solid #dcdcdc;border-left:0;border-radius:6px;box-shadow:0 2px 8px rgba(0,40,90,.07);overflow:hidden}
.tk-label{flex:none;display:flex;align-items:center;gap:8px;background:var(--blue);color:#fff;font-weight:700;font-size:13px;letter-spacing:1.6px;text-transform:uppercase;padding:0 16px}
.tk-label::before{content:"";width:8px;height:8px;border-radius:50%;background:#ffd400;box-shadow:0 0 0 0 rgba(255,212,0,.7);animation:tk-pulse 2s ease-out infinite}
@keyframes tk-pulse{0%{box-shadow:0 0 0 0 rgba(255,212,0,.7)}70%{box-shadow:0 0 0 8px rgba(255,212,0,0)}100%{box-shadow:0 0 0 0 rgba(255,212,0,0)}}
.ticker{flex:1;min-width:0;padding:13px 0;font-size:16px;line-height:1.5;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%)}
.tk-track{gap:0;align-items:center;animation-duration:42s}
.tk-item{padding:0 4px}
.tk-item strong{color:var(--blue)}
.tk-sep{display:inline-flex;padding:0 26px}
.tk-sep svg{width:15px;height:15px;fill:var(--blue);opacity:.55}
.schild{flex:none;padding:0;margin:-8px 0}
.schild img{width:168px;transform:rotate(-5deg);filter:drop-shadow(0 4px 6px rgba(0,0,0,.14));transition:transform .4s ease}
.schild:hover img{transform:rotate(0) scale(1.05)}
@media (prefers-reduced-motion: reduce){.tk-label::before{animation:none}}
@media (max-width: 767px){
  .sec-ticker{padding:14px var(--pad) 16px}
  .tk-band{flex-direction:column;gap:12px;align-items:stretch}
  .tk-label{padding:0 12px;font-size:12px}
  .ticker{font-size:16px;padding:11px 0}
  .schild{margin:0;text-align:center;align-self:center}
  .schild img{width:130px}
}

/* ===== Schwebender Pfeil nach oben (06.11.2026) ===== */
html{scroll-behavior:smooth}
.to-top{position:fixed;right:24px;bottom:24px;z-index:40;width:52px;height:52px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(0,40,90,.35);opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .35s,visibility .35s,transform .35s,background .2s}
.to-top.show{opacity:1;visibility:visible;transform:none;animation:float 2.8s ease-in-out .4s infinite}
.to-top svg{width:26px;height:26px;fill:#fff}
.to-top:hover{background:var(--blue-active);animation-play-state:paused;text-decoration:none}
.to-top:focus-visible{outline:3px solid #ffd400;outline-offset:3px}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.to-top.show{animation:none}}
@media (max-width: 767px){.to-top{right:16px;bottom:16px;width:48px;height:48px}}