/*
Theme Name: Elbert Catering
Description: Schlankes Theme für die Kantinen im Kreishaus und in der Agentur für Arbeit Coesfeld. Gestaltung nach dem Entwurf „Haus Elbert“ (Graphit, Kräutergrün, Zitrone auf Kalk), Schrift Atkinson Hyperlegible selbst gehostet. Speiseplan über das Plugin „Elbert Speiseplan“.
Version: 1.0.3
Requires at least: 6.4
Requires PHP: 7.4
Author: Elbert Catering
License: GPL-2.0-or-later
Text Domain: elbert-catering
*/

/* Schrift: Atkinson Hyperlegible (SIL Open Font License 1.1), lokal, keine Verbindung zu Google */
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(assets/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(assets/fonts/atkinson-hyperlegible-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(assets/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(assets/fonts/atkinson-hyperlegible-latin-ext-700-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(assets/fonts/atkinson-hyperlegible-latin-400-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light;
  --graphit: #263238;
  --gruen: #2E8B57;
  --gruen-text: #246E45;
  --gruen-hell: #E2F0E7;
  --kalk: #F3F6F4;
  --zitrone: #F2D24B;
  --zitrone-hell: #FFF3BF;
  --weiss: #FFFFFF;
  --text-2: #4A5A60;
  --linie: #CBD5D0;
  --linie-stark: #6B7A75;
  --schrift: "Atkinson Hyperlegible", Verdana, sans-serif;
  --breite: 72rem;
  --rand: 1rem;
  --radius: 6px;
}
@media (min-width: 48rem) { :root { --rand: 2rem; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 9.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (max-width: 40rem) { html { scroll-padding-top: 8.5rem; } }
body {
  margin: 0; background: var(--weiss); color: var(--graphit);
  font-family: var(--schrift); font-size: clamp(1.125rem, 1.06rem + 0.25vw, 1.1875rem); line-height: 1.55;
  overflow-wrap: break-word;
}
::selection { background: var(--zitrone); color: var(--graphit); }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2.125rem, 1.5rem + 2.6vw, 3.375rem); letter-spacing: -0.01em; max-width: 20ch; text-wrap: balance; }
h2 { font-size: clamp(1.75rem, 1.45rem + 1.1vw, 2.25rem); text-wrap: balance; }
h3 { font-size: 1.3125rem; }
p { margin: 0 0 1em; }
.inhalt :where(p, li):not(.ep-plan *, .ep-haeuser *) { max-width: 64ch; }
img { max-width: 100%; height: auto; }
a { color: var(--gruen-text); text-decoration-thickness: 2px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 3px; color: var(--graphit); }
a:focus-visible { outline: none; background: var(--zitrone); color: var(--graphit); box-shadow: 0 -2px var(--zitrone), 0 4px var(--graphit); text-decoration: none; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--zitrone); outline-offset: 0; box-shadow: inset 0 0 0 2px var(--graphit), 0 0 0 5px var(--graphit); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.sprung { position: absolute; left: var(--rand); top: -10rem; z-index: 50; background: var(--zitrone); color: var(--graphit); padding: .75rem 1rem; font-weight: 700; }
.sprung:focus { top: .5rem; }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 30; background: var(--weiss); border-bottom: 1px solid var(--linie); box-shadow: 0 2px 8px rgba(38,50,56,.08); }
.admin-bar .kopf { top: 32px; }
@media (max-width: 782px) { .admin-bar .kopf { top: 46px; } }
@media (max-width: 600px) { .admin-bar .kopf { top: 0; } }
.kopf-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-top: 1rem; padding-bottom: 1rem; }
.logo-link { display: inline-block; }
.logo-link:focus-visible { background: none; box-shadow: none; outline: 3px solid var(--zitrone); outline-offset: 4px; }
.logo-bild { display: block; height: 56px; width: auto; max-width: 100%; }
@media (max-width: 420px) { .logo-bild { height: 44px; } }
.ort-anzeige { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .35rem .9rem .35rem .6rem; border: 2px solid var(--gruen-text); border-radius: 999px;
  background: var(--gruen-text); color: var(--weiss); text-decoration: none; font-size: 1rem; }
.ort-anzeige svg { width: 1.4rem; height: 1.4rem; flex: none; }
.ort-anzeige svg path { fill: var(--weiss); }
.ort-anzeige b { font-size: 1.0625rem; }
.ort-anzeige .wechseln { text-decoration: underline; font-weight: 700; color: var(--weiss); }
.ort-anzeige:hover { background: var(--graphit); border-color: var(--graphit); color: var(--weiss); }
.ort-anzeige.offen { background: var(--zitrone); border-color: var(--graphit); color: var(--graphit); font-weight: 700; }
.ort-anzeige.offen svg path { fill: var(--graphit); }
@media (max-width: 40rem) {
  .ort-anzeige { font-size: .9375rem; padding: .25rem .7rem .25rem .5rem; }
  .ort-anzeige .zusatz { display: none; }
  .kopf-zeile { padding-top: .5rem; padding-bottom: .5rem; gap: .5rem; flex-wrap: nowrap; }
  .kopf-zeile .logo-bild { height: 36px; }
}
.seitennav { border-top: 1px solid var(--linie); }
.seitennav ul { list-style: none; margin: 0; padding: .25rem 0; display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.seitennav li { margin: 0; }
@media (max-width: 40rem) {
  .seitennav ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 0 1.1rem; }
  .seitennav li { flex: none; }
}
.seitennav a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 700; color: var(--graphit); text-decoration: none; }
.seitennav a:hover, .seitennav .current_page_item > a { color: var(--gruen-text); text-decoration: underline; }

/* Inhalt: alle Blöcke beginnen an derselben linken Kante wie Logo und Seitentitel (--spalte = Abstand
   des .wrap-Inhalts vom Rand). Fließtext ist auf Lesebreite begrenzt und bleibt linksbündig.
   Bänder (.band), Einstieg und Speiseplan laufen über die volle Breite. */
.inhalt { display: flow-root; --spalte: max(var(--rand), calc((100% - var(--breite)) / 2 + var(--rand))); }
.band, .einstieg { --spalte: max(var(--rand), calc((100% - var(--breite)) / 2 + var(--rand))); padding-top: clamp(2.5rem, 2rem + 2.5vw, 4.5rem); padding-bottom: clamp(2.5rem, 2rem + 2.5vw, 4.5rem); }
main .inhalt > *,
main .inhalt .band > :not(.wp-block-group__inner-container), main .inhalt .einstieg > :not(.wp-block-group__inner-container),
main .inhalt .band > .wp-block-group__inner-container > *, main .inhalt .einstieg > .wp-block-group__inner-container > * {
  margin-left: var(--spalte); margin-right: var(--spalte); max-width: none; padding-left: 0; padding-right: 0; }
main .inhalt > :is(.ep-plan, .band, .einstieg, .alignfull) { margin-left: 0; margin-right: 0; }
/* Gruppen-Blöcke klassischer Themes haben einen inneren Container: der bleibt randlos, seine Kinder rücken ein */
main .inhalt .band > .wp-block-group__inner-container, main .inhalt .einstieg > .wp-block-group__inner-container { margin: 0; }
main .inhalt :is(p, li):not(.ep-plan *, .ep-haeuser *) { max-width: 64ch; }
main .inhalt :is(ul, ol):not(.ep-plan *, .ep-haeuser *, .ablauf) { padding-left: 1.25em; }
main .inhalt > :is(h2, h3):not(:first-child) { margin-top: 2.25rem; }
.band .ep-haeuser { margin-top: 2rem; }
.band-kalk { background: var(--kalk); }
.inhalt > :first-child:not(.einstieg):not(.band):not(.ep-plan) { margin-top: 2.5rem; }
.inhalt > :last-child:not(.band):not(.ep-plan) { margin-bottom: 3rem; }
.dezent, .has-text-2-color { color: var(--text-2); }

/* Seitenkopf (alle Seiten außer Start) */
.seitenkopf { background: var(--kalk); padding: clamp(2rem, 1.5rem + 2.5vw, 3.5rem) 0 clamp(1.5rem, 1rem + 2vw, 2.5rem); border-bottom: 1px solid var(--linie); }
.seitenkopf h1 { margin: 0; }

/* Einstieg auf der Startseite */
.einstieg .wp-block-columns { gap: 2rem 3.5rem; align-items: center; }
.einstieg .lead, .lead { font-size: clamp(1.1875rem, 1.1rem + .4vw, 1.375rem); max-width: 38ch; }
.einstieg figure { margin: 0; }
.einstieg img { display: block; width: 100%; aspect-ratio: 4 / 3; max-height: 24rem; object-fit: cover; border-radius: var(--radius); }
.einstieg figcaption, .wp-element-caption { font-size: 1rem; color: var(--text-2); margin-top: .4rem; text-align: left; }
@media (max-width: 40rem) { .einstieg .wp-block-image { display: none; } }

/* Knöpfe (auch Block „Buttons“) */
.knopf, .wp-block-button__link, .wp-element-button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: .5rem 1.25rem; border-radius: var(--radius);
  font: inherit; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; background: var(--gruen-text); color: var(--weiss); border: 2px solid var(--gruen-text); }
.knopf:hover, .wp-block-button__link:hover { background: var(--graphit); border-color: var(--graphit); color: var(--weiss); }
.is-style-outline > .wp-block-button__link, .knopf-2 { background: var(--weiss); color: var(--graphit); border-color: var(--graphit); }
.is-style-outline > .wp-block-button__link:hover, .knopf-2:hover { background: var(--gruen-hell); color: var(--graphit); }
.wp-block-button__link:focus-visible { background: var(--zitrone); color: var(--graphit); border-color: var(--graphit); box-shadow: 0 4px var(--graphit); }
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 0; }

/* Listen und Tabellen in Seiten */
.inhalt li:not(.ep-plan *, .ep-haeuser *) { margin-bottom: .3em; }
.wp-block-table table { border-collapse: collapse; width: 100%; font-size: 1rem; }
.wp-block-table th, .wp-block-table td { border-bottom: 1px solid var(--linie); padding: .6rem .5rem; text-align: left; vertical-align: top; }
.wp-block-table thead th { border-bottom: 2px solid var(--graphit); background: var(--kalk); }
.kasten { background: var(--kalk); border-radius: var(--radius); padding: 1.1rem 1.25rem; }
.platzhalter { background: var(--zitrone-hell); }
.wp-block-separator { border: 0; border-top: 1px solid var(--linie); margin: 2rem auto; }

/* Ablauf (Catering) */
/* Nummer als Kreis links, Text fließt normal daneben (kein Raster: sonst rutscht Text hinter <strong> in die Ziffernspalte) */
main ol.ablauf { list-style: none; counter-reset: schritt; padding: 0; display: grid; gap: 1rem; }
ol.ablauf li { counter-increment: schritt; position: relative; display: block; min-height: 2.5rem; padding: .3rem 0 0 3.4rem; margin: 0; }
ol.ablauf li::before { content: counter(schritt); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--graphit); color: var(--zitrone); font-weight: 700; }

/* Fuß */
.fuss { background: var(--graphit); color: var(--weiss); padding: 3rem 0 2.5rem; }
.fuss-raster { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .fuss-raster { grid-template-columns: 1.2fr 1fr 1fr; } }
.fuss p { margin: 0 0 .5em; }
.fuss a { color: #C6EBCD; }
.fuss a:hover { color: var(--weiss); }
.fuss a:focus-visible { color: var(--graphit); box-shadow: 0 -2px var(--zitrone), 0 4px var(--weiss); }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.fuss .klein { font-size: 1rem; color: #DDE5E1; }
.fuss h2 { font-size: 1.1875rem; margin-bottom: .4rem; }
.fuss .logo-bild { height: 44px; }

/* Speiseplan-Plugin an die Theme-Farben binden */
.ep-plan, .ep-haeuser { --ep-breite: var(--breite); }
.ep-plan h2 { font-size: clamp(1.75rem, 1.45rem + 1.1vw, 2.25rem); }

@media print {
  .kopf, .fuss, .sprung { display: none; }
}