/* NG MARKT – Theme-CSS. Erzeugt von 04_Inhalte/wordpress/tools/theme-bauen.py aus
   04_Inhalte/design/entwurf.css, den Seiten-Regeln der Entwürfe und tools/theme-zusatz.css.
   Nicht von Hand ändern: Quelle ändern und neu bauen. Regeln: 04_Inhalte/design/DESIGN.md */

@font-face{font-family:'Nunito';font-style:normal;font-weight:200 1000;font-display:swap;src:url(../fonts/nunito-latin-wght-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:200 1000;font-display:swap;src:url(../fonts/nunito-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F}
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/lato-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/lato-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/lato-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+1E00-1E9F}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/lato-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+1E00-1E9F}
:root{ --gruen:#00633A; --gruen-dunkel:#004A2B;
  --hellgruen:#C6D41A; --hellgruen-dunkel:#B2BF14;
  --rot:#E30613; --rot-dunkel:#B8000E;
  --grau:#ADC6B8; --grau-hell:#EBF1EE;
  --anthrazit:#383E42;
  --text:var(--anthrazit); --text-leise:#5A6268;
  --linie:#D5DED9; --weiss:#FFFFFF;
  --rund:'Nunito', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --sans:'Lato', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --breite:1240px;
  --rand:16px;
  --links:max(var(--rand), calc((100vw - var(--breite)) / 2 + var(--rand))); }
@media (min-width:768px){
:root{ --rand:32px; }
}
*,
*::before,
*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--weiss); color:var(--text); font:400 17px/1.6 var(--sans); }
img{ display:block; max-width:100%; }
a{ color:var(--gruen); }
:focus-visible{ outline:3px solid var(--text); outline-offset:2px; }
.springen{ position:absolute; left:var(--links); top:-60px; z-index:10; padding:10px 16px; background:var(--anthrazit); color:var(--weiss); border-radius:6px; font-weight:700; }
.springen:focus{ top:12px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.kopf{ background:var(--weiss); }
.kopf-innen{ max-width:var(--breite); margin:0 auto; padding:10px var(--rand); display:flex; align-items:center; gap:24px; }
.logo{ display:block; flex:none; border-radius:6px; }
.logo img{ height:44px; width:auto; }
.nav{ display:none; margin-left:auto; }
.nav ul{ display:flex; gap:4px; margin:0; padding:0; list-style:none; }
.nav a{ display:block; padding:10px 14px; border-radius:6px; color:var(--text); text-decoration:none; white-space:nowrap; }
.nav a:hover{ background:var(--grau-hell); }
.nav a[aria-current]{ color:var(--gruen); font-weight:700; }
.kopf-tel{ margin-left:auto; display:flex; align-items:center; justify-content:center; gap:8px; min-width:48px; min-height:48px; padding:0 12px; border-radius:6px; color:var(--gruen); font-weight:700; text-decoration:none; }
.kopf-tel:hover{ background:var(--grau-hell); }
.kopf-tel span{ display:none; }
@media (min-width:1024px){
.logo img{ height:54px; }
.nav{ display:block; }
.kopf-tel{ margin-left:8px; border:2px solid var(--gruen); }
.kopf-tel span{ display:inline; }
}
@media (min-width:1024px) and (max-width:1239px){
.logo img{ height:44px; }
.nav a{ padding:10px 9px; }
.kopf-tel span{ display:none; }
}
.seite .btn,
.seite .wp-block-button__link{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:0 14px; border-radius:6px; border:2px solid transparent; font:700 17px/1 var(--sans); text-decoration:none; text-align:center; }
.seite .btn svg,
.seite .wp-block-button__link svg{ flex:none; }
.seite .btn-hell,
.seite .is-style-hell > .wp-block-button__link{ background:var(--hellgruen); color:var(--anthrazit); }
.seite .btn-hell:hover,
.seite .is-style-hell > .wp-block-button__link:hover{ background:var(--hellgruen-dunkel); }
.seite .btn-rahmen,
.seite .is-style-rahmen > .wp-block-button__link{ background:transparent; color:var(--weiss); border-color:var(--weiss); }
.seite .btn-rahmen:hover,
.seite .is-style-rahmen > .wp-block-button__link:hover{ background:rgba(255,255,255,.12); }
.seite .btn-rot,
.seite .is-style-rot > .wp-block-button__link{ background:var(--rot); color:var(--weiss); }
.seite .btn-rot:hover,
.seite .is-style-rot > .wp-block-button__link:hover{ background:var(--rot-dunkel); }
.seite .btn-weiss,
.seite .is-style-weiss > .wp-block-button__link{ background:var(--weiss); color:var(--rot); }
.seite .btn-weiss:hover,
.seite .is-style-weiss > .wp-block-button__link:hover{ background:var(--grau-hell); }
.seite .btn-gruen,
.seite .is-style-gruen > .wp-block-button__link{ background:var(--gruen); color:var(--weiss); }
.seite .btn-gruen:hover,
.seite .is-style-gruen > .wp-block-button__link:hover{ background:var(--gruen-dunkel); }
.seite .btn-rahmen-gruen,
.seite .is-style-rahmen-gruen > .wp-block-button__link{ background:var(--weiss); color:var(--gruen); border-color:var(--gruen); }
.seite .btn-rahmen-gruen:hover,
.seite .is-style-rahmen-gruen > .wp-block-button__link:hover{ background:var(--grau-hell); }
@media (max-width:370px){
.seite .btn svg,
.seite .wp-block-button__link svg{ display:none; }
}
.seite .start{ position:relative; display:grid; background:var(--gruen); color:var(--weiss); border-bottom:8px solid var(--hellgruen); overflow:hidden; }
.seite .start :focus-visible{ outline-color:var(--weiss); }
.seite .ng-motiv{ position:absolute; left:-6%; bottom:-14%; width:min(560px, 110vw); opacity:.08; pointer-events:none; }
.seite .foto{ display:contents; }
.seite .foto img{ order:-1; width:100%; height:clamp(150px, 22vh, 260px); object-fit:cover; object-position:42% 62%; }
.seite .text{ position:relative; padding:24px var(--rand) 4px; }
h1{ margin:0; font:800 34px/1.08 var(--rund); letter-spacing:-.01em; text-wrap:balance; }
.seite .einleitung{ margin:10px 0 0; font-size:19px; line-height:1.45; }
.seite .ganz{ white-space:nowrap; }
.seite .fakten{ margin:14px 0 0; padding:0; list-style:none; }
.seite .fakten li{ display:flex; gap:10px; align-items:flex-start; padding:3px 0; }
.seite .fakten svg{ flex:none; margin-top:2px; color:var(--hellgruen); }
.seite .fakten a{ color:var(--weiss); text-underline-offset:3px; text-decoration-color:var(--hellgruen); }
.seite .aktionen{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:20px 0 0; }
.seite .aktionen .btn-rot,
.seite .aktionen .is-style-rot > .wp-block-button__link{ grid-column:1 / -1; }
.seite .schild{ position:relative; margin:20px var(--rand) 28px; padding:18px 22px 16px; background:var(--anthrazit); color:var(--weiss); border-radius:14px; outline:2px solid var(--weiss); outline-offset:-7px; }
.seite .schild h2{ margin:0 0 4px; font:800 21px/1.2 var(--rund); }
.seite .zeiten{ margin:0; }
.seite .zeiten div{ display:flex; justify-content:space-between; gap:16px; padding:5px 0; }
.seite .zeiten dd{ margin:0; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.seite .status{ display:flex; align-items:center; gap:10px; margin:12px 0 0; font-size:15px; font-weight:700; }
.seite .status[hidden]{ display:none; }
.seite .status::before{ content:""; flex:none; width:12px; height:12px; border-radius:50%; background:var(--grau); }
.seite .status.offen::before{ background:var(--hellgruen); }
.seite .status.zu::before{ background:var(--rot); outline:2px solid var(--weiss); }
.seite .feiertage{ margin:8px 0 0; font-size:14px; color:#DDE3E0; }
.seite .feiertage a{ color:var(--weiss); text-underline-offset:3px; }
.seite .schild :focus-visible{ outline-color:var(--hellgruen); }
@media (min-width:600px) and (max-width:1023px){
.seite .foto img{ height:320px; }
h1{ font-size:42px; }
.seite .aktionen{ grid-template-columns:auto auto auto; justify-content:start; }
.seite .btn,
.seite .wp-block-button__link{ padding:0 20px; }
.seite .aktionen .btn-rot,
.seite .aktionen .is-style-rot > .wp-block-button__link{ grid-column:auto; }
.seite .schild{ max-width:420px; }
}
@media (min-width:1024px){
.seite .start{ grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); min-height:min(660px, calc(100vh - 110px)); }
.seite .text{ align-self:center; padding:56px 48px 64px var(--links); }
h1{ font-size:clamp(46px, 4.4vw, 64px); line-height:1.05; letter-spacing:-.015em; }
.seite .fakten{ margin-top:24px; font-size:19px; }
.seite .fakten .nur-schmal{ display:none; }
.seite .aktionen{ gap:12px; margin-top:32px; max-width:440px; }
.seite .btn,
.seite .wp-block-button__link{ padding:0 20px; }
.seite .foto{ display:block; position:relative; margin:0; overflow:hidden; }
.seite .foto img{ height:100%; min-height:560px; object-position:38% 66%; transform:scale(1.2); transform-origin:42% 82%; }
.seite .schild{ position:absolute; right:var(--links); bottom:40px; width:350px; margin:0; padding:22px 28px 18px; }
.seite .schild h2{ font-size:23px; }
.seite .ng-motiv{ left:-40px; bottom:-90px; width:620px; }
}
.seite .abschnitt{ padding:40px 0 48px; }
.seite .abschnitt-innen{ max-width:var(--breite); margin:0 auto; padding:0 var(--rand); }
.seite .abschnitt-kopf{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px; margin-bottom:24px; }
.seite .abschnitt h2{ margin:0; font:800 28px/1.15 var(--rund); }
.seite .abschnitt-kopf p{ margin:0; }
.seite .mehr{ display:inline-flex; align-items:center; min-height:44px; font-weight:700; text-underline-offset:4px; }
.seite .angebote{ background:var(--weiss); }
.seite .zeitraum strong{ color:var(--rot); font-weight:700; }
.seite .angebot-liste{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px 16px; margin:0; padding:0; list-style:none; }
.seite .angebot{ display:flex; flex-direction:column; }
.seite .angebot-bild{ position:relative; aspect-ratio:1; margin-bottom:12px; background:var(--grau-hell); border-radius:10px; }
.seite .angebot-bild img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:12%; }
.seite .preisschild{ position:absolute; left:-4px; bottom:10px; margin:0; padding:6px 12px 5px; background:var(--rot); color:var(--weiss); border-radius:4px; font:800 24px/1 var(--rund); font-variant-numeric:tabular-nums; }
.seite .marke{ margin:0; font-size:14px; color:var(--text-leise); }
.seite .angebot h3{ margin:2px 0 4px; font:700 17px/1.3 var(--sans); }
.seite .menge{ margin:0; font-size:14px; line-height:1.45; color:var(--text-leise); }
.seite .menge span{ display:block; white-space:nowrap; }
.seite .statt{ margin:auto 0 0; padding-top:4px; font-size:14px; color:var(--text-leise); }
.seite .angebote-fuss{ margin-top:24px; }
.seite .theke{ display:grid; background:var(--anthrazit); color:var(--weiss); }
.seite .theke picture,
.seite .theke .bild{ display:block; }
.seite .theke img{ width:100%; height:240px; object-fit:cover; }
.seite .theke-text{ padding:32px var(--rand) 40px; }
.seite .theke h2{ margin:0; font:800 28px/1.15 var(--rund); }
.seite .theke-text p{ margin:10px 0 0; max-width:34em; }
.seite .theke-text .aktionen{ grid-template-columns:1fr; max-width:360px; }
.seite .theke-text .btn-rahmen,
.seite .theke-text .is-style-rahmen > .wp-block-button__link{ border-color:var(--hellgruen); }
.seite .theke :focus-visible{ outline-color:var(--hellgruen); }
.seite .sortiment{ background:var(--grau-hell); }
.seite .abteilungen{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px 12px; margin:0; padding:0; list-style:none; }
.seite .abteilungen a{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:8px 4px; border-radius:10px; color:var(--anthrazit); text-align:center; text-decoration:none; }
.seite .abteilungen a:hover{ background:var(--weiss); }
.seite .abteilungen img{ width:72px; height:72px; }
.seite .abteilungen span{ font-weight:700; line-height:1.25; }
.seite .abteilungen span span{ display:block; font-weight:400; font-size:14px; color:var(--text-leise); }
.seite .fotoreihe{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 32px; }
.seite .fotoreihe figure{ position:relative; margin:0; overflow:hidden; border-radius:12px; }
.seite .fotoreihe figure:first-child{ grid-column:1 / -1; }
.seite .fotoreihe img{ width:100%; height:170px; object-fit:cover; }
.seite .fotoreihe figure:first-child img{ height:200px; }
.seite .fotoreihe figcaption{ position:absolute; left:10px; bottom:10px; padding:5px 10px; background:var(--anthrazit); color:var(--weiss); border-radius:6px; font-size:14px; font-weight:700; line-height:1.3; }
.seite .kurz-raster{ display:grid; gap:32px; }
.seite .kurz-text p{ margin:0; font-size:19px; line-height:1.6; max-width:38em; }
.seite .fakten-tabelle{ width:100%; border-collapse:collapse; font-size:17px; }
.seite .fakten-tabelle th,
.seite .fakten-tabelle td{ padding:10px 0; text-align:start; vertical-align:top; border-bottom:1px solid var(--linie); }
.seite .fakten-tabelle th{ width:42%; padding-inline-end:16px; font-weight:400; color:var(--text-leise); }
.seite .fakten-tabelle td{ font-weight:700; }
.seite .fragen{ display:grid; gap:28px 48px; margin:0; padding:0; list-style:none; }
.seite .fragen h3{ margin:0; font:800 21px/1.25 var(--rund); }
.seite .fragen p{ margin:6px 0 0; }
.seite .fragen a[href^="tel:"]{ white-space:nowrap; }
.seite .zahlarten{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0; padding:0; list-style:none; }
.seite .zahlarten li{ display:flex; align-items:center; justify-content:center; gap:7px; box-sizing:border-box; height:42px; min-width:54px; margin:0; padding:0 11px; background:var(--weiss); border:1px solid var(--linie); border-radius:8px; font:700 15px/1 var(--sans); color:var(--text); }
.seite .zahlarten img{ display:block; max-width:none; height:auto; }
.seite .zahlarten svg{ display:block; color:var(--gruen); }
.seite .zahlarten .z-voll{ min-width:0; padding:0; border:0; background:none; }
.seite .zahlarten .z-voll img{ border-radius:8px; }
.fuss{ background:var(--gruen); color:var(--weiss); border-top:8px solid var(--hellgruen); }
.fuss-innen{ max-width:var(--breite); margin:0 auto; padding:32px var(--rand); display:grid; gap:20px; }
.fuss img{ width:200px; height:auto; }
.fuss p{ margin:0; }
.fuss a{ color:var(--weiss); text-underline-offset:3px; }
@media (min-width:768px){
.seite .fragen{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (min-width:600px){
.seite .angebot-liste{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
.seite .abteilungen{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}
@media (min-width:1024px){
.seite .abschnitt{ padding:64px 0 72px; }
.seite .abschnitt h2{ font-size:38px; }
.seite .abschnitt-kopf{ margin-bottom:32px; }
.seite .abschnitt-kopf .mehr,
.seite .abschnitt-kopf .btn,
.seite .abschnitt-kopf .wp-block-button__link{ margin-left:auto; }
.seite .angebot-liste{ gap:32px; }
.seite .preisschild{ font-size:28px; }
.seite .theke{ position:relative; display:flex; justify-content:flex-end; align-items:center; min-height:560px; }
.seite .theke picture,
.seite .theke .bild{ position:absolute; inset:0; }
.seite .theke img{ height:100%; }
.seite .theke-text{ position:relative; width:min(560px, 44%); margin:64px var(--links); padding:44px 48px; background:var(--anthrazit); border-radius:14px; outline:2px solid var(--weiss); outline-offset:-8px; }
.seite .theke-text p{ font-size:19px; }
.seite .theke h2{ font-size:38px; }
.seite .abteilungen{ grid-template-columns:repeat(6, minmax(0, 1fr)); gap:28px 16px; }
.seite .fotoreihe{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; margin-bottom:48px; }
.seite .fotoreihe figure:first-child{ grid-column:auto; }
.seite .fotoreihe img,
.seite .fotoreihe figure:first-child img{ height:280px; }
.seite .fotoreihe figcaption{ left:14px; bottom:14px; font-size:15px; }
.seite .abteilungen img{ width:88px; height:88px; }
.fuss-innen{ grid-template-columns:auto 1fr 1fr; align-items:center; gap:48px; }
.seite .kurz-raster{ grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr); gap:72px; align-items:start; }
}
.seite .seitenkopf{ display:grid; background:var(--gruen); color:var(--weiss); border-bottom:8px solid var(--hellgruen); }
.seite .seitenkopf :focus-visible{ outline-color:var(--weiss); }
.seite .seitenkopf picture,
.seite .seitenkopf .bild{ display:block; order:-1; }
.seite .seitenkopf img{ width:100%; height:180px; object-fit:cover; object-position:50% 40%; }
.seite .seitenkopf-text{ padding:24px var(--rand) 28px; }
.seite .seitenkopf h1{ font-size:34px; }
.seite .seitenkopf address,
.seite .seitenkopf .einleitung{ margin:10px 0 0; font-style:normal; font-size:18px; line-height:1.5; }
.seite .seitenkopf .einleitung{ max-width:32em; }
.seite .seitenkopf .aktionen{ display:flex; flex-wrap:wrap; max-width:none; }
.seite .seitenkopf .aktionen .btn,
.seite .seitenkopf .aktionen .wp-block-button__link{ flex:1 1 auto; white-space:nowrap; }
@media (min-width:600px){
.seite .seitenkopf img{ height:380px; }
.seite .seitenkopf h1{ font-size:52px; }
}
@media (min-width:1024px){
.seite .seitenkopf{ grid-template-columns:minmax(0, 1fr) minmax(0, 1.6fr); gap:48px; padding:40px var(--links); min-height:min(720px, calc(100vh - 80px)); }
.seite .seitenkopf-text{ align-self:center; padding:0; }
.seite .seitenkopf h1{ font-size:clamp(46px, 4.4vw, 64px); }
.seite .seitenkopf address,
.seite .seitenkopf .einleitung{ font-size:21px; }
.seite .seitenkopf picture,
.seite .seitenkopf .bild{ order:0; }
.seite .seitenkopf img{ height:100%; min-height:520px; }
}
@media (prefers-reduced-motion:no-preference){
.seite .btn,
.seite .wp-block-button__link,
.nav a,
.kopf-tel,
.seite .abteilungen a,
.seite .rezepte a{ transition:background-color .15s, transform .15s; }
.seite .btn:active,
.seite .wp-block-button__link:active,
.seite .abteilungen a:active,
.seite .rezepte a:active{ transform:scale(.97); }
.seite .abteilungen a:hover img{ transform:rotate(-6deg); }
.seite .abteilungen img{ transition:transform .25s cubic-bezier(.2,.7,.2,1); }
.js .seite .zeigen{ opacity:0; transform:translateY(24px); transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--v, 0) * 80ms); }
.js .seite .zeigen.ist-da{ opacity:1; transform:none; }
.seite .start .foto img,
.seite .seitenkopf img{ animation:heranzoomen 1.6s cubic-bezier(.2,.7,.2,1) both; }
}
@keyframes heranzoomen{from{ scale:1.08; } to{ scale:1; }}

/* ---- Seite: kundenkarte (entwurf-kundenkarte.html) ---- */
.seite-kundenkarte .flaeche-hell{ background:var(--grau-hell); }
.seite-kundenkarte .kk-kopf h1{ font-size:clamp(40px, 10vw, 52px); }
.seite-kundenkarte .start-schild{ display:inline-grid; gap:2px; margin:22px 0 0; padding:16px 22px 14px; background:var(--anthrazit); color:var(--weiss); border-radius:14px; outline:2px solid var(--weiss); outline-offset:-7px; }
.seite-kundenkarte .start-schild p{ margin:0; }
.seite-kundenkarte .start-datum{ font:800 28px/1.15 var(--rund); }
.seite-kundenkarte .start-countdown{ font-weight:700; color:var(--hellgruen); }
.seite-kundenkarte .karten-buehne{ display:grid; place-items:center; padding:40px 16px 44px; background:var(--gruen-dunkel); }
.seite-kundenkarte .kundenkarte{ width:min(440px, 86%); margin:0; }
.seite-kundenkarte .seitenkopf .kundenkarte img{ display:block; width:100%; height:auto; min-height:0; aspect-ratio:780 / 492; object-fit:contain; transform:rotate(-5deg); animation:none; }
@media (prefers-reduced-motion:no-preference){
.seite-kundenkarte .seitenkopf .kundenkarte img{ animation:schweben 6s ease-in-out infinite; }
}
@keyframes schweben{0%,100%{ transform:rotate(-5deg) translateY(0); } 50%{ transform:rotate(-3deg) translateY(-10px); }}
.seite-kundenkarte .raetsel{ display:grid; gap:28px; align-items:center; }
.seite-kundenkarte .raetsel h2{ margin:0; }
.seite-kundenkarte .raetsel p{ margin:14px 0 0; max-width:30em; font-size:19px; }
.seite-kundenkarte .raetsel-foto img,
.seite-kundenkarte .gutscheine-foto img{ width:100%; height:260px; object-fit:cover; border-radius:12px; }
.seite-kundenkarte .gutscheine{ display:grid; gap:28px; align-items:center; }
.seite-kundenkarte .gutscheine h2{ margin:0; }
.seite-kundenkarte .gutscheine p{ margin:12px 0 0; max-width:34em; }
@media (min-width:768px){
.seite-kundenkarte .kk-kopf h1{ font-size:64px; }
}
@media (min-width:1024px){
.seite-kundenkarte .kk-kopf{ grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr); }
.seite-kundenkarte .kk-kopf h1{ font-size:clamp(56px, 5.6vw, 84px); }
.seite-kundenkarte .karten-buehne{ padding:48px 24px; border-radius:14px; }
.seite-kundenkarte .start-datum{ font-size:38px; }
.seite-kundenkarte .raetsel,
.seite-kundenkarte .gutscheine{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:64px; }
.seite-kundenkarte .raetsel-foto img,
.seite-kundenkarte .gutscheine-foto img{ height:400px; }
}

/* ---- Seite: sortiment (entwurf-sortiment.html) ---- */
.seite-sortiment .sprungleiste{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; margin:0; padding:0; list-style:none; }
.seite-sortiment .sprungleiste a{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:10px 4px; border-radius:10px; color:var(--text); font-weight:700; font-size:15px; line-height:1.25; text-align:center; text-decoration:none; }
.seite-sortiment .sprungleiste a:hover{ background:var(--grau-hell); }
.seite-sortiment .sprungleiste img{ width:60px; height:60px; }
.seite-sortiment .abteilung{ display:grid; gap:24px; }
.seite-sortiment .abteilung picture,
.seite-sortiment .abteilung .bild{ display:block; border-radius:12px; overflow:hidden; }
.seite-sortiment .abteilung img{ width:100%; height:240px; object-fit:cover; }
.seite-sortiment .abteilung h2,
.seite-sortiment .regal-kopf h2{ margin:0; }
.seite-sortiment .tr-name{ margin:4px 0 0; font-size:17px; color:var(--text-leise); }
.seite-sortiment .abteilung p.beschreibung{ margin:14px 0 0; font-size:19px; max-width:34em; }
.seite-sortiment .abteilung .mehr{ margin-top:12px; }
.seite-sortiment .doppelbild{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.seite-sortiment .doppelbild img{ height:220px; }
.seite-sortiment .flaeche-hell{ background:var(--grau-hell); }
.seite-sortiment .regal{ display:grid; gap:32px 20px; margin:0; padding:0; list-style:none; }
.seite-sortiment .regal-teil picture,
.seite-sortiment .regal-teil .bild{ display:block; border-radius:12px; overflow:hidden; }
.seite-sortiment .regal-teil img{ width:100%; height:200px; object-fit:cover; }
.seite-sortiment .regal-teil img[src*="1158"]{ object-position:50% 85%; }
.seite-sortiment .regal-teil h3{ margin:14px 0 0; font:800 22px/1.2 var(--rund); }
.seite-sortiment .regal-teil .tr-klein{ margin:2px 0 0; font-size:15px; color:var(--text-leise); }
.seite-sortiment .regal-teil p{ margin:6px 0 0; }
.seite-sortiment .marken-liste{ display:grid; gap:12px; margin:0; padding:0; list-style:none; }
.seite-sortiment .marken-liste li{ padding:16px 18px; background:var(--grau-hell); border-radius:12px; }
.seite-sortiment .marken-liste h3{ margin:0; font:800 19px/1.25 var(--rund); color:var(--gruen); }
.seite-sortiment .marken-liste p{ margin:6px 0 0; }
@media (min-width:600px){
.seite-sortiment .marken-liste{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (min-width:1024px){
.seite-sortiment .marken-liste{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
}
.seite-sortiment .schluss{ background:var(--gruen); color:var(--weiss); }
.seite-sortiment .schluss :focus-visible{ outline-color:var(--weiss); }
.seite-sortiment .schluss p{ margin:8px 0 0; font-size:19px; }
.seite-sortiment .schluss .aktionen{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.seite-sortiment [id]{ scroll-margin-top:16px; }
@media (prefers-reduced-motion:no-preference){
html{ scroll-behavior:smooth; }
}
@media (min-width:600px){
.seite-sortiment .sprungleiste{ grid-template-columns:repeat(8, minmax(0, 1fr)); }
.seite-sortiment .regal{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (min-width:1024px){
.seite-sortiment .sprungleiste img{ width:76px; height:76px; }
.seite-sortiment .abteilung{ grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); gap:64px; align-items:center; }
.seite-sortiment .abteilung.gespiegelt{ grid-template-columns:minmax(0, 1fr) minmax(0, 1.25fr); }
.seite-sortiment .abteilung.gespiegelt .abteilung-text{ order:-1; }
.seite-sortiment .abteilung img{ height:440px; }
.seite-sortiment .doppelbild img{ height:440px; }
.seite-sortiment .abteilung h2{ font-size:44px; }
.seite-sortiment .regal{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:48px 32px; }
.seite-sortiment .regal-teil img{ height:240px; }
.seite-sortiment .schluss .abschnitt-innen{ display:flex; align-items:center; justify-content:space-between; gap:48px; }
.seite-sortiment .schluss .aktionen{ margin-top:0; }
}

/* ---- Seite: fleischtheke (entwurf-fleischerei.html) ---- */
.seite-fleischtheke .sorten{ display:grid; gap:16px; margin:0; padding:0; list-style:none; }
.seite-fleischtheke .sorte{ position:relative; border-radius:12px; overflow:hidden; background:var(--anthrazit); }
.seite-fleischtheke .sorte img{ width:100%; height:200px; object-fit:cover; }
.seite-fleischtheke .sorte-name{ position:absolute; left:12px; bottom:12px; margin:0; padding:8px 14px 7px; background:var(--anthrazit); color:var(--weiss); border-radius:8px; outline:2px solid var(--weiss); outline-offset:-5px; font:800 20px/1.15 var(--rund); }
.seite-fleischtheke .sorte-name span{ display:block; font:400 14px/1.3 var(--sans); color:#DDE3E0; }
.seite-fleischtheke .merkmale{ display:grid; gap:12px 32px; margin:32px 0 0; padding:0; list-style:none; }
.seite-fleischtheke .merkmale li{ display:flex; gap:12px; align-items:flex-start; font-size:18px; }
.seite-fleischtheke .merkmale svg{ flex:none; margin-top:3px; color:var(--gruen); }
.seite-fleischtheke .flaeche-hell{ background:var(--grau-hell); }
.seite-fleischtheke .rezepte{ display:grid; grid-template-columns:1fr; gap:12px; margin:0; padding:0; list-style:none; }
.seite-fleischtheke .rezepte a{ display:flex; align-items:center; gap:12px; min-height:72px; padding:12px 14px; background:var(--weiss); border-radius:12px; color:var(--text); font-weight:700; line-height:1.3; text-decoration:none; }
.seite-fleischtheke .rezepte a:hover{ outline:2px solid var(--gruen); }
.seite-fleischtheke .rezepte img{ flex:none; width:44px; height:44px; }
@media (min-width:500px){
.seite-fleischtheke .rezepte{ grid-template-columns:1fr 1fr; }
}
@media (min-width:768px){
.seite-fleischtheke .sorten{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.seite-fleischtheke .sorte img{ height:260px; }
.seite-fleischtheke .merkmale{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.seite-fleischtheke .rezepte{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}
@media (min-width:1024px){
.seite-fleischtheke .sorte img{ height:320px; }
.seite-fleischtheke .sorte-name{ left:16px; bottom:16px; font-size:24px; }
.seite-fleischtheke .rezepte{ gap:16px; }
}

/* ---- Seite: ueber-uns (entwurf-ueber-uns.html) ---- */
.seite-ueber-uns .portraet{ display:grid; gap:32px; }
.seite-ueber-uns .jahr-schild{ align-self:start; justify-self:start; margin:0; padding:24px 26px 22px; background:var(--anthrazit); color:var(--weiss); border-radius:14px; outline:2px solid var(--weiss); outline-offset:-7px; }
.seite-ueber-uns .jahr-schild p{ margin:0; }
.seite-ueber-uns .jahr-seit{ font:800 21px/1.2 var(--rund); }
.seite-ueber-uns .jahr-zahl{ font:800 88px/.95 var(--rund); letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--hellgruen); }
.seite-ueber-uns .jahr-text{ margin-top:6px !important; font:800 21px/1.25 var(--rund); }
.seite-ueber-uns .jahr-jetzt{ margin-top:14px !important; font-size:15px; font-weight:700; color:#DDE3E0; }
.seite-ueber-uns .jahr-jetzt[hidden]{ display:none; }
.seite-ueber-uns .portraet-text > p{ margin:0; font-size:19px; line-height:1.6; max-width:38em; }
.seite-ueber-uns .portraet .fakten-tabelle{ margin-top:28px; }
.seite-ueber-uns .flaeche-hell{ background:var(--grau-hell); }
.seite-ueber-uns .geschichte{ display:grid; gap:32px; }
.seite-ueber-uns .geschichte-einleitung{ margin:0 0 28px; font-size:19px; line-height:1.55; max-width:36em; }
.seite-ueber-uns .wegmarken{ display:grid; gap:28px; margin:0; padding:0; list-style:none; }
.seite-ueber-uns .wegmarke{ display:grid; gap:4px; }
.seite-ueber-uns .wegmarke-zeit{ margin:0; font:800 28px/1.05 var(--rund); color:var(--gruen); letter-spacing:-.01em; }
.seite-ueber-uns .wegmarke h3{ margin:0; font:800 21px/1.25 var(--rund); }
.seite-ueber-uns .wegmarke p{ margin:2px 0 0; }
.seite-ueber-uns .eroeffnung{ margin:0; }
.seite-ueber-uns .eroeffnung img{ width:100%; height:240px; object-fit:cover; object-position:50% 40%; border-radius:12px; }
.seite-ueber-uns .eroeffnung figcaption{ margin-top:10px; font-size:15px; line-height:1.45; color:var(--text-leise); }
.seite-ueber-uns .angebot-raster{ display:grid; gap:32px; }
.seite-ueber-uns .markt-fotos{ display:grid; gap:12px; margin:0; }
.seite-ueber-uns .markt-fotos figure{ margin:0; }
.seite-ueber-uns .markt-fotos img{ width:100%; height:240px; object-fit:cover; border-radius:12px; }
.seite-ueber-uns .markt-fotos .klein{ display:none; }
.seite-ueber-uns .motto{ margin:0 0 24px; font-size:19px; line-height:1.55; max-width:36em; }
.seite-ueber-uns .bereiche{ display:grid; gap:28px; margin:0; padding:0; list-style:none; }
.seite-ueber-uns .bereiche h3{ margin:0; font:800 21px/1.25 var(--rund); }
.seite-ueber-uns .bereiche p{ margin:6px 0 0; }
.seite-ueber-uns .bereiche .mehr{ margin-top:2px; }
.seite-ueber-uns .bereiche .btn,
.seite-ueber-uns .bereiche .wp-block-button__link{ margin-top:12px; }
.seite-ueber-uns .besuch .theke-text .aktionen{ grid-template-columns:1fr; }
.seite-ueber-uns .besuch address{ margin:10px 0 0; font-style:normal; font-size:19px; line-height:1.5; }
.seite-ueber-uns .besuch .zeiten-kurz{ margin:6px 0 0; }
@media (min-width:600px){
.seite-ueber-uns .eroeffnung img{ height:340px; }
.seite-ueber-uns .markt-fotos img{ height:340px; }
.seite-ueber-uns .besuch .theke-text .aktionen{ grid-template-columns:auto auto; justify-content:start; }
.seite-ueber-uns .portraet{ grid-template-columns:auto minmax(0, 1fr); gap:32px; }
}
@media (min-width:1024px){
.seite-ueber-uns .portraet{ grid-template-columns:minmax(0, 340px) minmax(0, 1fr); gap:72px; }
.seite-ueber-uns .jahr-schild{ position:sticky; top:24px; justify-self:stretch; padding:30px 32px 28px; outline-offset:-8px; }
.seite-ueber-uns .jahr-zahl{ font-size:112px; }
.seite-ueber-uns .geschichte{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:72px; align-items:start; }
.seite-ueber-uns .wegmarke{ grid-template-columns:200px minmax(0, 1fr); gap:4px 24px; }
.seite-ueber-uns .wegmarke-zeit{ grid-row:span 2; font-size:38px; }
.seite-ueber-uns .eroeffnung{ position:sticky; top:24px; }
.seite-ueber-uns .eroeffnung img{ height:auto; aspect-ratio:1600 / 1008; }
.seite-ueber-uns .angebot-raster{ grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); gap:72px; align-items:start; }
.seite-ueber-uns .markt-fotos{ grid-template-columns:1fr 1fr; gap:16px; }
.seite-ueber-uns .markt-fotos .gross{ grid-column:1 / -1; }
.seite-ueber-uns .markt-fotos .gross img{ height:400px; }
.seite-ueber-uns .markt-fotos .klein{ display:block; }
.seite-ueber-uns .markt-fotos .klein img{ height:220px; }
.seite-ueber-uns .besuch .theke-text address{ font-size:21px; }
}

/* ---- Seite: anfahrt-kontakt (entwurf-anfahrt-kontakt.html) ---- */
.seite-anfahrt-kontakt .anfahrt-raster{ display:grid; gap:32px; }
.seite-anfahrt-kontakt .weg{ display:grid; grid-template-columns:48px 1fr; gap:4px 16px; padding:0 0 32px; }
.seite-anfahrt-kontakt .weg-symbol{ grid-row:span 2; display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; background:var(--grau-hell); color:var(--gruen); }
.seite-anfahrt-kontakt .weg h3{ margin:0; font:800 21px/1.25 var(--rund); }
.seite-anfahrt-kontakt .weg p{ margin:0; }
.seite-anfahrt-kontakt .weg-foto{ grid-column:2; margin-top:12px; border-radius:12px; overflow:hidden; max-width:420px; }
.seite-anfahrt-kontakt .weg-foto img{ width:100%; height:220px; object-fit:cover; object-position:50% 30%; }
.seite-anfahrt-kontakt .anfahrt-raster .schild{ margin:0; align-self:start; }
.seite-anfahrt-kontakt .abschnitt .schild h2{ font-size:21px; }
.seite-anfahrt-kontakt .flaeche-hell{ background:var(--grau-hell); }
.seite-anfahrt-kontakt .kontakt{ display:grid; gap:24px 48px; margin:0; }
.seite-anfahrt-kontakt .kontakt div{ margin:0; }
.seite-anfahrt-kontakt .kontakt dt{ font-size:17px; color:var(--text); }
.seite-anfahrt-kontakt .kontakt dd{ margin:2px 0 0; font:800 26px/1.2 var(--rund); }
.seite-anfahrt-kontakt .kontakt dd a{ color:var(--gruen); text-underline-offset:4px; text-decoration-thickness:2px; }
.seite-anfahrt-kontakt .kontakt dd.klein{ font:700 19px/1.4 var(--sans); }
.seite-anfahrt-kontakt .nachricht{ display:grid; gap:24px; margin-top:56px; scroll-margin-top:24px; }
.seite-anfahrt-kontakt .nachricht h3{ margin:0 0 12px; font:800 21px/1.25 var(--rund); }
.seite-anfahrt-kontakt .nachricht-text p{ margin:0 0 12px; max-width:46ch; }
.seite-anfahrt-kontakt .nachricht-text a{ color:var(--gruen); font-weight:700; white-space:nowrap; }
.seite-anfahrt-kontakt .formular{ display:grid; gap:20px; margin:0; padding:24px; border-radius:14px; background:var(--weiss); }
.seite-anfahrt-kontakt .feld{ display:grid; gap:6px; }
.seite-anfahrt-kontakt .feld label{ font-weight:700; }
.seite-anfahrt-kontakt .feld .frei{ font-weight:400; color:var(--text-leise); }
.seite-anfahrt-kontakt .feld input,
.seite-anfahrt-kontakt .feld select,
.seite-anfahrt-kontakt .feld textarea{ width:100%; min-height:48px; margin:0; padding:10px 12px; border:2px solid var(--text-leise); border-radius:6px; background:var(--weiss); color:var(--text); font:400 17px/1.4 var(--sans); }
.seite-anfahrt-kontakt .feld textarea{ min-height:160px; resize:vertical; }
.seite-anfahrt-kontakt .feld [aria-invalid="true"]{ border-color:var(--rot); }
.seite-anfahrt-kontakt .fehler{ margin:0; color:var(--rot-dunkel); font-weight:700; }
.seite-anfahrt-kontakt .fehler[hidden]{ display:none; }
.seite-anfahrt-kontakt .formular .hinweis{ margin:0; color:var(--text-leise); }
.seite-anfahrt-kontakt .formular .hinweis a{ color:var(--gruen); }
.seite-anfahrt-kontakt .formular .btn,
.seite-anfahrt-kontakt .formular .wp-block-button__link{ justify-self:start; }
.seite-anfahrt-kontakt .formular-status{ margin:0; font-weight:700; color:var(--gruen); }
.seite-anfahrt-kontakt .formular-status:empty{ display:none; }
@media (min-width:768px){
.seite-anfahrt-kontakt .kontakt{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.seite-anfahrt-kontakt .formular{ padding:32px; }
}
@media (min-width:1024px){
.seite-anfahrt-kontakt .anfahrt-raster{ grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr); gap:64px; }
.seite-anfahrt-kontakt .abschnitt .schild h2{ font-size:23px; }
.seite-anfahrt-kontakt .anfahrt-raster .schild{ position:sticky; top:24px; right:auto; bottom:auto; width:auto; padding:22px 28px 18px; }
.seite-anfahrt-kontakt .kontakt{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.seite-anfahrt-kontakt .kontakt dd{ font-size:30px; }
.seite-anfahrt-kontakt .nachricht{ grid-template-columns:minmax(0, 1fr) minmax(0, 1.5fr); gap:64px; margin-top:72px; }
.seite-anfahrt-kontakt .nachricht h3{ font-size:23px; }
}
.seite-anfahrt-kontakt .lageplan{ display:grid; gap:20px; }
.seite-anfahrt-kontakt .lageplan-bild{ position:relative; margin:0; align-self:start; border-radius:14px; overflow:hidden; background:#E2E2E2; }
.seite-anfahrt-kontakt .lageplan-flaeche{ position:relative; }
.seite-anfahrt-kontakt .lageplan-bild img{ width:100%; height:auto; }
.seite-anfahrt-kontakt .lageplan-hinweis{ margin:0; padding:2px 14px 10px; font-size:14px; text-align:end; color:var(--text-leise); }
.seite-anfahrt-kontakt .punkt{ position:absolute; left:var(--x); top:var(--y); z-index:1; display:grid; place-items:center; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; background:var(--anthrazit); color:var(--weiss); outline:2px solid var(--weiss); outline-offset:-5px; font:800 16px/1 var(--rund); text-decoration:none; }
.seite-anfahrt-kontakt .punkt::before{ content:""; position:absolute; inset:-5px; border-radius:50%; }
.seite-anfahrt-kontakt .punkt:hover,
.seite-anfahrt-kontakt .punkt[aria-current]{ background:var(--hellgruen); color:var(--anthrazit); outline-color:var(--anthrazit); }
.seite-anfahrt-kontakt .punkt:focus-visible{ outline:3px solid var(--anthrazit); outline-offset:2px; }
.seite-anfahrt-kontakt .orte{ display:flex; flex-direction:column; }
.seite-anfahrt-kontakt .orte-leiste{ order:2; display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0; }
.seite-anfahrt-kontakt .orte-leiste:empty{ display:none; }
.seite-anfahrt-kontakt .ort-knopf{ display:inline-flex; align-items:center; gap:8px; min-height:44px; margin:0; padding:0 14px 0 7px; border:0; border-radius:22px; background:var(--weiss); color:var(--text); font:700 15px/1.2 var(--sans); cursor:pointer; }
.seite-anfahrt-kontakt .ort-knopf:hover{ background:#DCE6E0; }
.seite-anfahrt-kontakt .ort-knopf[aria-pressed="true"]{ background:var(--gruen); color:var(--weiss); }
.seite-anfahrt-kontakt .ort-nr{ display:inline-grid; place-items:center; flex:none; width:30px; height:30px; border-radius:50%; background:var(--anthrazit); color:var(--weiss); font:800 15px/1 var(--rund); }
.seite-anfahrt-kontakt .ort-knopf[aria-pressed="true"] .ort-nr{ background:var(--hellgruen); color:var(--anthrazit); }
.seite-anfahrt-kontakt .orte-liste{ display:grid; gap:12px; margin:0; padding:0; list-style:none; }
.seite-anfahrt-kontakt .ort{ padding:18px 20px; background:var(--weiss); border-radius:12px; scroll-margin-top:16px; }
.seite-anfahrt-kontakt .ort[hidden]{ display:none; }
.seite-anfahrt-kontakt .ort h3{ display:flex; align-items:center; gap:12px; margin:0; font:800 21px/1.25 var(--rund); }
.seite-anfahrt-kontakt .ort p{ margin:10px 0 0; font-size:18px; }
.seite-anfahrt-kontakt .mit-js .ort{ padding:22px 24px 22px; background:var(--anthrazit); color:var(--weiss); border-radius:14px; outline:2px solid var(--weiss); outline-offset:-7px; }
.seite-anfahrt-kontakt .mit-js .ort .ort-nr{ background:var(--hellgruen); color:var(--anthrazit); }
.seite-anfahrt-kontakt .mit-js .ort a{ color:var(--weiss); }
@media (min-width:1024px){
.seite-anfahrt-kontakt .lageplan{ grid-template-columns:minmax(0, 1.45fr) minmax(0, 1fr); gap:48px; align-items:start; }
.seite-anfahrt-kontakt .orte{ position:sticky; top:24px; }
.seite-anfahrt-kontakt .punkt{ width:40px; height:40px; margin:-20px 0 0 -20px; font-size:18px; }
.seite-anfahrt-kontakt .mit-js .ort h3{ font-size:23px; }
}
@media (prefers-reduced-motion:no-preference){
.seite-anfahrt-kontakt .punkt{ transition:background-color .15s, transform .15s cubic-bezier(.2,.7,.2,1); }
.seite-anfahrt-kontakt .punkt:hover{ transform:scale(1.1); }
.seite-anfahrt-kontakt .punkt::after{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--hellgruen); pointer-events:none; animation:punkt-puls 2.4s cubic-bezier(.2,.7,.2,1) infinite; animation-delay:calc(var(--n, 0) * .3s); }
.seite-anfahrt-kontakt .punkt[aria-current]::after{ animation:none; opacity:0; }
.seite-anfahrt-kontakt .mit-js .ort:not([hidden]){ animation:ort-auf .3s cubic-bezier(.2,.7,.2,1); }
}
@keyframes punkt-puls{0%{ transform:scale(1); opacity:.9; } 70%, 100%{ transform:scale(1.9); opacity:0; }}
@keyframes ort-auf{from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; }}

/* ---- Seite: whatsapp (entwurf-whatsapp.html) ---- */
.seite-whatsapp .flaeche-hell{ background:var(--grau-hell); }
.seite-whatsapp .wa-kopf h1{ font-size:clamp(40px, 10vw, 52px); }
.seite-whatsapp .btn-gross,
.seite-whatsapp .btn-gross > .wp-block-button__link{ min-height:60px; padding:0 26px; font-size:19px; }
.seite-whatsapp .einwilligung{ max-width:34em; margin:16px 0 0; font-size:14px; line-height:1.5; color:#DDE3E0; }
.seite-whatsapp .einwilligung a{ color:var(--weiss); }
.seite-whatsapp .wa-buehne{ display:grid; place-items:center; padding:32px 16px 36px; background:var(--gruen-dunkel); }
.seite-whatsapp .telefon{ position:relative; width:min(300px, 80%); margin:0; }
.seite-whatsapp .telefon video{ display:block; width:100%; height:auto; aspect-ratio:540 / 1066; border-radius:22px; background:var(--gruen-dunkel); }
.seite-whatsapp .video-knopf{ position:absolute; right:8px; top:8px; display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:2px solid var(--weiss); border-radius:50%; background:var(--anthrazit); color:var(--weiss); cursor:pointer; }
.seite-whatsapp .video-knopf[hidden]{ display:none; }
.seite-whatsapp .video-knopf:focus-visible{ outline:3px solid var(--hellgruen); outline-offset:2px; }
.seite-whatsapp .telefon figcaption{ margin-top:16px; font-size:14px; color:#DDE3E0; text-align:center; }
.seite-whatsapp .anmeldung{ display:grid; gap:36px; }
.seite-whatsapp .schritte{ display:grid; gap:26px; margin:0; padding:0; list-style:none; }
.seite-whatsapp .schritte li{ display:grid; grid-template-columns:44px 1fr; gap:14px; }
.seite-whatsapp .schritt-nr{ font:800 28px/1 var(--rund); color:var(--gruen); }
.seite-whatsapp .schritte h3,
.seite-whatsapp .vorteil h3{ margin:0; font:800 21px/1.25 var(--rund); }
.seite-whatsapp .schritte p,
.seite-whatsapp .vorteil p{ margin:6px 0 0; }
.seite-whatsapp .qr-schild{ align-self:start; margin:0; padding:26px 28px; background:var(--anthrazit); color:var(--weiss); border-radius:14px; outline:2px solid var(--weiss); outline-offset:-7px; text-align:center; }
.seite-whatsapp .qr-schild h3{ margin:0; font:800 21px/1.25 var(--rund); }
.seite-whatsapp .qr-schild p{ margin:8px 0 0; }
.seite-whatsapp .qr-schild img{ display:block; width:220px; height:220px; margin:18px auto 14px; padding:10px; background:var(--weiss); border-radius:10px; image-rendering:pixelated; }
.seite-whatsapp .qr-schild a{ color:var(--weiss); font-weight:700; }
.seite-whatsapp .qr-schild .btn,
.seite-whatsapp .qr-schild .wp-block-button__link{ width:100%; margin-top:16px; }
.seite-whatsapp .qr-schild :focus-visible{ outline-color:var(--hellgruen); }
.seite-whatsapp .vorteile{ display:grid; gap:28px 24px; margin:0; padding:0; list-style:none; }
.seite-whatsapp .vorteil-bild{ position:relative; aspect-ratio:3 / 2; margin-bottom:14px; border-radius:12px; background:var(--weiss); }
.seite-whatsapp .vorteil-bild picture,
.seite-whatsapp .vorteil-bild .bild{ display:block; width:100%; height:100%; }
.seite-whatsapp .vorteil-bild img{ width:100%; height:100%; object-fit:cover; border-radius:12px; }
.seite-whatsapp .vorteil-bild.nachricht img{ object-position:50% 0; }
.seite-whatsapp .karten{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:28px 16px; margin:0; padding:0; list-style:none; }
.seite-whatsapp .karte{ display:flex; flex-direction:column; }
.seite-whatsapp .karte-bild{ position:relative; aspect-ratio:1; margin-bottom:12px; background:var(--grau-hell); border-radius:10px; }
.seite-whatsapp .karte-bild img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:12%; }
.seite-whatsapp .karte .marke{ margin:0; font-size:14px; color:var(--text-leise); }
.seite-whatsapp .karte h3{ margin:2px 0; font:700 17px/1.3 var(--sans); }
.seite-whatsapp .karte .tr{ margin:0; font-size:14px; color:var(--text-leise); }
.seite-whatsapp .karte .menge{ margin:6px 0 0; font-size:14px; line-height:1.45; color:var(--text-leise); }
.seite-whatsapp .karte .menge span{ display:block; }
.seite-whatsapp .karte .statt{ margin:auto 0 0; padding-top:6px; font-size:14px; color:var(--text-leise); }
.seite-whatsapp .karte .statt span{ display:block; color:var(--rot); font-weight:700; }
.seite-whatsapp .exklusiv-kopf p{ max-width:40em; margin:10px 0 0; font-size:19px; }
.seite-whatsapp .geheim-liste{ display:grid; gap:28px 24px; margin:0; padding:0; list-style:none; }
.seite-whatsapp .geheim{ display:flex; flex-direction:column; gap:12px; }
.seite-whatsapp .geheim-bild{ position:relative; aspect-ratio:4 / 3; overflow:hidden; border-radius:14px; background:var(--anthrazit); outline:2px solid var(--weiss); outline-offset:-7px; }
.seite-whatsapp .geheim-bild img{ width:100%; height:100%; object-fit:cover; filter:blur(14px) saturate(1.3) brightness(.65); transform:scale(1.15); }
.seite-whatsapp .geheim-zeichen{ position:absolute; inset:0; display:grid; place-items:center; color:var(--hellgruen); font:800 clamp(56px, 5.6vw, 84px)/1 var(--rund); }
.seite-whatsapp .geheim-bild .preisschild{ left:-4px; bottom:14px; }
.seite-whatsapp .geheim h3{ margin:0; font:800 21px/1.25 var(--rund); }
.seite-whatsapp .geheim-knopf{ align-self:start; }
.seite-whatsapp .geheim-auf{ padding:16px 18px; border-radius:12px; background:var(--anthrazit); color:var(--weiss); }
.seite-whatsapp .geheim-auf[hidden]{ display:none; }
.seite-whatsapp .geheim-auf p{ margin:0 0 14px; }
.seite-whatsapp .geheim-auf .btn,
.seite-whatsapp .geheim-auf .wp-block-button__link{ width:100%; }
.seite-whatsapp .geheim-stand{ margin:20px 0 0; font-weight:700; }
.seite-whatsapp .geheim-stand:empty{ display:none; }
.seite-whatsapp .exklusiv-aktion{ display:flex; margin-top:24px; }
.seite-whatsapp .exklusiv-aktion .btn,
.seite-whatsapp .exklusiv-aktion .wp-block-button__link{ white-space:nowrap; }
@media (prefers-reduced-motion:no-preference){
.seite-whatsapp .geheim.offen .geheim-auf{ animation:aufdecken .35s cubic-bezier(.2,.7,.2,1) both; }
.seite-whatsapp .geheim.offen .geheim-zeichen{ animation:wackeln .5s ease-in-out; }
}
@keyframes aufdecken{from{ opacity:0; transform:translateY(-8px) scale(.98); } to{ opacity:1; transform:none; }}
@keyframes wackeln{0%,100%{ transform:none; } 25%{ transform:rotate(-8deg) scale(1.08); } 75%{ transform:rotate(8deg) scale(1.08); }}
.seite-whatsapp .angebote-zeitraum{ margin:0; }
@media (min-width:600px){
.seite-whatsapp .vorteile{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.seite-whatsapp .karten{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (min-width:768px){
.seite-whatsapp .wa-kopf h1{ font-size:64px; }
}
@media (min-width:768px){
.seite-whatsapp .geheim-liste{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (min-width:1024px){
.seite-whatsapp .wa-kopf{ grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); }
.seite-whatsapp .wa-kopf h1{ font-size:clamp(56px, 5.6vw, 84px); }
.seite-whatsapp .wa-buehne{ padding:40px 24px; border-radius:14px; }
.seite-whatsapp .anmeldung{ grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr); gap:64px; align-items:start; }
.seite-whatsapp .schritt-nr{ font-size:38px; }
.seite-whatsapp .schritte li{ grid-template-columns:56px 1fr; }
.seite-whatsapp .vorteile{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.seite-whatsapp .karte h3{ font-size:19px; }
}

/* ==========================================================================
   Theme-Zusatz (nicht in den Entwürfen): WordPress-Blöcke, Menü auf dem Handy,
   Fuß mit Pflichtlinks, Textseiten, WPBakery (nur Angebote), Contact Form 7.
   Quelle: 04_Inhalte/wordpress/tools/theme-zusatz.css → wird von theme-bauen.py
   hinter entwurf.css und die Seiten-Regeln gehängt.
   ========================================================================== */

/* ---------- Blöcke so darstellen wie die Entwürfe ---------- */
.seite .wp-block-image{ margin:0; }
.seite .wp-block-image figcaption{ margin-bottom:0; }
.seite .wp-block-image img{ max-width:100%; }
.seite .wp-block-image.bild{ display:block; }
/* Bild ohne eigenen Rahmen im Entwurf: Figur „unsichtbar“, das Bild ist direkt Teil des Rasters */
.seite .wp-block-image.bild-frei{ display:contents; }
/* Button-Hüllen unsichtbar: der Link ist (wie .btn im Entwurf) direkt Teil von Raster/Flex */
.seite .wp-block-buttons:not(.aktionen), .seite .wp-block-button{ display:contents; }
.seite .wp-block-buttons.aktionen{ align-items:stretch; flex-wrap:wrap; }
.seite .wp-block-button__link{ box-sizing:border-box; width:auto; height:auto; word-break:normal; }
.btn, .seite .wp-block-button__link{ cursor:pointer; }
/* Button ohne gewählten Stil: Grün (statt Grau von WordPress) */
.seite .wp-block-button:not([class*="is-style-"]) > .wp-block-button__link{ background:var(--gruen); color:var(--weiss); }
.seite .kurz-text h2 + p{ margin-top:16px; }

/* Symbole in Buttons (Klasse am Button: symbol-route, symbol-telefon, symbol-whatsapp) */
.seite .wp-block-button[class*="symbol-"] > .wp-block-button__link::before{
  content:""; flex:none; width:22px; height:22px; background:currentColor;
  -webkit-mask:var(--symbol) center / contain no-repeat; mask:var(--symbol) center / contain no-repeat;
}
.seite .symbol-route{ --symbol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11 21 3l-8 18-2-8z'/%3E%3C/svg%3E"); }
.seite .symbol-telefon{ --symbol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h3.5l1.8 4.6-2.3 1.5a11 11 0 0 0 6 6l1.5-2.3L20 14.5V18a2 2 0 0 1-2.2 2A16 16 0 0 1 3 5.2 2 2 0 0 1 5 3z'/%3E%3C/svg%3E"); }
.seite .symbol-whatsapp{ --symbol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-12.4 7.4L3 20.5l1.6-5.3A8.4 8.4 0 1 1 21 11.5z'/%3E%3C/svg%3E"); }
@media (max-width:370px){ .seite .wp-block-button[class*="symbol-"] > .wp-block-button__link::before{ display:none; } }

/* Fragen-Blöcke (Gruppe „fragen“ mit Gruppen „frage“) */
.seite .frage > :first-child{ margin-top:0; }

/* ---------- Kopf: Menü auf dem Handy ---------- */
.kopf{ position:relative; z-index:20; }
.menue-knopf{ display:flex; align-items:center; justify-content:center; gap:8px; min-width:48px; min-height:48px; margin:0 0 0 4px; padding:0 14px; border:2px solid var(--gruen); border-radius:6px; background:var(--weiss); color:var(--gruen); font:700 17px/1 var(--sans); cursor:pointer; }
.menue-knopf[hidden]{ display:none; }
.menue-knopf svg{ flex:none; }
.menue-knopf{ flex:none; }
.menue-knopf path{ transform-box:fill-box; transform-origin:center; }
.kopf.menue-offen .strich-1{ transform:translateY(5px) rotate(45deg); }
.kopf.menue-offen .strich-2{ opacity:0; }
.kopf.menue-offen .strich-3{ transform:translateY(-5px) rotate(-45deg); }
/* Sieben Menüpunkte (WhatsApp, 08.11.2026): Menü-Knopf bis 1159 px, darüber eine Zeile. */
@media (max-width:1159px){
  .kopf-innen{ gap:8px; }
  .js .nav{ display:none; position:absolute; left:0; right:0; top:100%; margin:0; padding:4px var(--rand) 20px; background:var(--weiss); border-bottom:8px solid var(--hellgruen); }
  .js .kopf.menue-offen .nav{ display:block; }
  .nav ul{ flex-direction:column; gap:0; }
  .nav a{ display:flex; align-items:center; min-height:52px; padding:0 8px; font:800 21px/1.2 var(--rund); }
  html:not(.js) .kopf-innen{ flex-wrap:wrap; }
  html:not(.js) .nav{ display:block; order:3; width:100%; margin:0; }
  html:not(.js) .nav ul{ flex-direction:row; flex-wrap:wrap; }
  html:not(.js) .nav a{ min-height:44px; font:700 17px/1.2 var(--sans); }
}
@media (min-width:1024px) and (max-width:1159px){ .kopf-tel{ margin-left:auto; border:0; } }
@media (min-width:1160px){ .menue-knopf{ display:none !important; } }
@media (min-width:1240px) and (max-width:1279px){ .logo img{ height:44px; } .nav a{ padding:10px 9px; } .kopf-tel span{ display:none; } }
@media (min-width:1280px){ .nav ul{ gap:2px; } .nav a{ padding:10px 9px; font-size:16px; } }
.kopf-tel{ flex:none; white-space:nowrap; }
@media (prefers-reduced-motion:no-preference){ .menue-knopf path{ transition:transform .2s cubic-bezier(.2,.7,.2,1), opacity .15s; } }

/* ---------- Fuß: Pflichtlinks und Netzwerke auf dunklem Grün ---------- */
.fuss-unten{ background:var(--gruen-dunkel); }
.fuss-unten-innen{ max-width:var(--breite); margin:0 auto; padding:12px var(--rand) 16px; display:flex; flex-wrap:wrap; align-items:center; gap:0 32px; font-size:15px; }
.fuss-unten ul{ display:flex; flex-wrap:wrap; gap:0 20px; margin:0; padding:0; list-style:none; }
.fuss-unten a{ display:inline-flex; align-items:center; min-height:44px; color:var(--weiss); text-underline-offset:3px; }
.fuss-unten .kopie{ margin:0; color:#DDE3E0; }
.fuss :focus-visible{ outline-color:var(--hellgruen); }
@media (min-width:1024px){ .fuss-unten .kopie{ margin-left:auto; } }

/* ---------- Textseiten (Impressum, Datenschutz, Cookie-Richtlinie, Beiträge) ---------- */
.textseite{ padding:40px 0 72px; border-top:8px solid var(--hellgruen); }
.textseite-innen{ max-width:760px; margin:0 auto; padding:0 var(--rand); }
.textseite h1{ margin:0 0 24px; font-size:clamp(34px, 6vw, 52px); }
.textseite .datum{ margin:-12px 0 24px; font-size:15px; color:var(--text-leise); }
.textseite .inhalt{ overflow-wrap:anywhere; }
.textseite .inhalt > *{ max-width:100%; }
.textseite .inhalt h2{ margin:40px 0 12px; font:800 28px/1.2 var(--rund); }
.textseite .inhalt h3{ margin:28px 0 8px; font:800 21px/1.25 var(--rund); }
.textseite .inhalt h4{ margin:24px 0 8px; font:700 17px/1.3 var(--sans); }
.textseite .inhalt p, .textseite .inhalt ul, .textseite .inhalt ol{ margin:0 0 16px; }
.textseite .inhalt li{ margin:0 0 6px; }
.textseite .inhalt a{ color:var(--gruen); text-underline-offset:3px; }
.textseite .inhalt img{ height:auto; border-radius:12px; }
.textseite .inhalt table{ width:100%; margin:0 0 20px; border-collapse:collapse; font-size:15px; }
.textseite .inhalt th, .textseite .inhalt td{ padding:8px 10px 8px 0; text-align:start; vertical-align:top; border-bottom:1px solid var(--linie); }
.textseite .beitragsbild{ margin:0 0 24px; }
.textseite .beitragsbild img{ width:100%; height:auto; border-radius:12px; }
.einleitung-text{ font-size:19px; }
.textseite-innen > ul:not(.beitragsliste){ display:grid; gap:4px; margin:0 0 24px; padding:0; list-style:none; }
.textseite-innen > ul:not(.beitragsliste) a{ display:inline-flex; align-items:center; min-height:44px; font-weight:700; color:var(--gruen); }
.beitragsliste{ display:grid; gap:28px; margin:0; padding:0; list-style:none; }
.beitragsliste h2{ margin:0; font:800 23px/1.25 var(--rund); }
.beitragsliste h2 a{ color:var(--text); text-decoration:none; }
.beitragsliste h2 a:hover{ color:var(--gruen); text-decoration:underline; }
.beitragsliste p{ margin:6px 0 0; }

/* ---------- Angebote-Seite (WPBakery-Element des Plugins): Fremdabstände neutralisieren ---------- */
.mit-angeboten main .vc_row{ margin-left:0; margin-right:0; }
.mit-angeboten main .vc_column_container > .vc_column-inner{ padding-left:0; padding-right:0; padding-top:0; }
.mit-angeboten main .wpb_content_element, .mit-angeboten main .vc_row, .mit-angeboten main .wpb_wrapper > *{ margin-bottom:0; }

/* ---------- Contact Form 7 im Stil des Entwurfs (Formular-Klasse „formular“ über html_class) ---------- */
.seite .wpcf7{ margin:0; }
.seite .wpcf7-form-control-wrap{ display:block; }
.seite .wpcf7-not-valid-tip{ display:block; margin-top:6px; color:var(--rot-dunkel); font-size:15px; font-weight:700; }
.seite .feld .wpcf7-not-valid{ border-color:var(--rot); }
.seite .wpcf7 form .wpcf7-response-output{ margin:0; padding:12px 14px; border:2px solid var(--gruen); border-radius:6px; font-weight:700; }
.seite .wpcf7 form.invalid .wpcf7-response-output, .seite .wpcf7 form.unaccepted .wpcf7-response-output, .seite .wpcf7 form.failed .wpcf7-response-output, .seite .wpcf7 form.spam .wpcf7-response-output{ border-color:var(--rot); }
.seite .wpcf7 form.init .wpcf7-response-output{ display:none; }
/* Ladekreis von CF7 wäre sonst eine leere Rasterzeile unter dem Knopf */
.seite .wpcf7-form.formular > .wpcf7-spinner{ display:none; }
.seite .wpcf7-submit.btn{ justify-self:start; }
.seite .wpcf7-submit.btn:disabled{ opacity:.45; cursor:not-allowed; }
/* reCAPTCHA erst nach Einwilligung (functions.php, assets/js/recaptcha-einwilligung.js): Hinweis über dem Senden-Knopf */
.seite .einwilligung-recaptcha{ display:grid; gap:12px; justify-items:start; padding:16px; border-radius:10px; background:var(--grau-hell); }
.seite .einwilligung-recaptcha[hidden]{ display:none; }
.seite .einwilligung-recaptcha p{ margin:0; }
.seite .einwilligung-recaptcha a{ color:var(--gruen); font-weight:700; }
.seite .screen-reader-response{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Cookie-Banner klein (Inhaber 08.11.2026): gleicher Text, Schließen-Knopf 44 px, die drei Knöpfe gleich groß in einer Reihe */
.cmplz-cookiebanner.cmplz-show{ padding:10px 14px !important; row-gap:6px !important; grid-gap:6px !important; }
.cmplz-cookiebanner .cmplz-header{ position:absolute; top:0; right:0; z-index:1; display:block !important; min-height:0 !important; margin:0 !important; }
.cmplz-cookiebanner .cmplz-header .cmplz-logo, .cmplz-cookiebanner .cmplz-header .cmplz-title, .cmplz-cookiebanner .cmplz-divider{ display:none !important; }
.cmplz-cookiebanner .cmplz-close{ display:flex !important; align-items:center; justify-content:center; width:44px; height:44px; min-width:44px; min-height:44px; }
.cmplz-cookiebanner .cmplz-body{ margin:0 !important; padding:0 !important; }
.cmplz-cookiebanner .cmplz-message{ margin:0 !important; padding-right:30px; font-size:12.5px !important; line-height:1.3 !important; }
.cmplz-cookiebanner .cmplz-buttons{ display:grid !important; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px !important; margin:0 !important; }
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn{ width:100% !important; min-height:44px !important; height:auto !important; margin:0 !important; padding:2px 4px !important; font-size:13px !important; line-height:1.15 !important; white-space:normal !important; }
.cmplz-cookiebanner .cmplz-links.cmplz-documents{ margin:0 !important; font-size:11.5px; }
.cmplz-cookiebanner .cmplz-links.cmplz-documents a{ display:inline-block; padding:2px 0; }

/* Tabellen in Beiträgen: keine Trennung mitten im Wort */
.single-post .textseite .inhalt th, .single-post .textseite .inhalt td{ overflow-wrap:break-word; }