/* ===================================================================== DESIGN – Der Dorfmetzger Reck (Enfold Child) Layout: Bento-Raster aus abgerundeten Kacheln auf hellem Grund. Bordeaux-Kacheln für Handlung, Schiefer-Kacheln für Tiefe. Alle Klassen beginnen mit „dm-“, damit nichts mit Enfold kollidiert. „#top“ (die body-ID von Enfold) sorgt dafür, dass diese Regeln gegen das Enfold-Farbschema gewinnen. Bewegungen stehen in dorfmetzger-animationen.css. Farbkontraste sind auf WCAG 2.2 AA geprüft: --dm-accent für Text, --dm-bordeaux nur für Flächen verwenden. ===================================================================== */ :root{ --dm-paper:#f4f0ec; --dm-surface:#fffdfb; --dm-ink:#1c191a; --dm-muted:#6b6264; --dm-faint:#736a6c; --dm-line:#ddd4d0; --dm-field:#8a7f81; --dm-accent:#a02545; --dm-bordeaux:#a02545; --dm-bordeaux-deep:#7e1a35; --dm-on-bordeaux:#fff7f4; --dm-slate:#1f2024; --dm-on-slate:#f2eeec; --dm-on-slate-muted:#b3abad; --dm-chalk:#ecc76a; --dm-ok:#2a7043; --dm-f-display:"Big Shoulders Display","Oswald","Arial Narrow",Impact,sans-serif; --dm-f-body:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif; --dm-f-hand:"Caveat","Segoe Print","Bradley Hand",cursive; --dm-wrap:1240px; --dm-r:20px; --dm-gap:12px; } /* Grundlagen: Seite und Schrift (vor den Bausteinen, damit diese gewinnen) */ #top,#top #main,#top .main_color.dm-s{background:var(--dm-paper)} #top{color:var(--dm-ink);font-family:var(--dm-f-body);-webkit-font-smoothing:antialiased} #top .dm-s{color:var(--dm-ink);font-size:17px;line-height:1.6;border:0} #top .dm-s :where(h1,h2,h3,h4,strong,b){color:inherit} #top .dm-s :where(h1,h2,h3,h4){text-transform:none} #top .dm-s .container{max-width:var(--dm-wrap)} #top .dm-s .content{padding-top:clamp(20px,3vw,40px);padding-bottom:clamp(20px,3vw,40px)} #top .dm-s.dm-tight .content{padding-top:6px;padding-bottom:6px} #top .dm-s.dm-no-top .content{padding-top:0} /* Bausteine */ #top .dm-s [hidden]{display:none!important} #top .dm-s :where(img){max-width:100%;display:block} #top .dm-s :where(a){color:inherit} #top .dm-s :where(h1),#top .dm-s :where(h2),#top .dm-s :where(h3){margin:0;text-wrap:balance} #top .dm-caps{font-family:var(--dm-f-display);font-weight:900;text-transform:uppercase;line-height:.92;letter-spacing:.005em} #top .dm-s :where(h2){font:800 clamp(2rem,4.2vw,3.3rem)/1.02 var(--dm-f-body);letter-spacing:-.025em} #top .dm-s :where(h3){font:800 1.35rem/1.15 var(--dm-f-body);letter-spacing:-.01em} #top .dm-s :where(p){margin:0;max-width:65ch} #top .dm-hand{font-family:var(--dm-f-hand);font-weight:700;font-size:1.5rem;line-height:1} #top .dm-eyebrow{font:700 .76rem/1.2 var(--dm-f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--dm-accent)} #top .dm-lead{font-size:1.12rem;color:var(--dm-muted)} #top .dm-muted{color:var(--dm-muted)} #top .dm-stack{display:grid;gap:1rem} #top .dm-tile{border-radius:var(--dm-r);overflow:hidden;position:relative;isolation:isolate} #top .dm-tile>img.dm-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1} #top :focus-visible{outline:3px solid var(--dm-ink);outline-offset:2px;box-shadow:0 0 0 5px var(--dm-paper)} #top .dm-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .dm-skip{position:absolute;left:1rem;top:-100px;z-index:100;background:var(--dm-ink);color:var(--dm-paper);padding:.8rem 1.2rem;border-radius:12px;font-weight:700;text-decoration:none} .dm-skip:focus{top:1rem} #top [tabindex="-1"]:focus{outline:none;box-shadow:none} #top .dm-btn{display:inline-flex;align-items:center;gap:.9rem;padding:.4rem .4rem .4rem 1.2rem;border-radius:999px;font:800 .8rem/1 var(--dm-f-body);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border:0;cursor:pointer;background:var(--dm-surface);color:var(--dm-ink)} #top .dm-btn .dm-ic{width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;background:var(--dm-ink);color:var(--dm-paper);font-size:1rem} #top .dm-btn.dm-dark{background:var(--dm-slate);color:var(--dm-on-slate)} #top .dm-btn.dm-dark .dm-ic{background:var(--dm-on-slate);color:var(--dm-slate)} #top .dm-btn.dm-red{background:var(--dm-bordeaux);color:var(--dm-on-bordeaux)} #top .dm-btn.dm-red .dm-ic{background:var(--dm-on-bordeaux);color:var(--dm-bordeaux)} #top .dm-round{width:2.6rem;height:2.6rem;border-radius:50%;display:grid;place-items:center;background:var(--dm-surface);color:var(--dm-ink);font-size:1.15rem;text-decoration:none;border:0;cursor:pointer} #top .dm-link{font-weight:700;color:var(--dm-accent);text-decoration:none;border-bottom:2px solid currentColor} #top .dm-marquee{position:relative;background:var(--dm-bordeaux);color:var(--dm-on-bordeaux);overflow:hidden;white-space:nowrap;font:900 .95rem/1 var(--dm-f-display);letter-spacing:.08em;text-transform:uppercase} #top .dm-marquee-track{display:inline-flex;gap:0;padding-block:.55rem} #top .dm-marquee-track span{padding-inline:1.1rem;display:inline-flex;align-items:center;gap:2.2rem} #top .dm-marquee-track span::after{content:"♥";font-size:.8rem;opacity:.7} #top .dm-motion-btn{position:absolute;right:0;top:0;bottom:0;z-index:2;display:flex;align-items:center;gap:.4rem;padding:0 .9rem;border:0;background:var(--dm-bordeaux-deep);color:var(--dm-on-bordeaux);font:700 .78rem/1 var(--dm-f-body);letter-spacing:.04em;cursor:pointer} #top .dm-motion-btn:focus-visible{outline-offset:-4px;box-shadow:none;outline-color:var(--dm-on-bordeaux)} #top .dm-bento{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--dm-gap);padding-top:6px} #top .dm-hero-main{min-height:620px;display:flex;flex-direction:column;justify-content:flex-end;padding:1.2rem;background:var(--dm-slate)} #top .dm-hero-main::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.55))} #top .dm-hero-actions{display:flex;flex-wrap:wrap;gap:.6rem} #top .dm-badge{position:absolute;top:1.2rem;right:1.2rem;width:128px;height:128px} #top .dm-badge svg{width:100%;height:100%} #top .dm-badge .dm-core{position:absolute;inset:26%;border-radius:50%;background:var(--dm-bordeaux);color:var(--dm-on-bordeaux);display:grid;place-items:center;text-align:center;font:900 1.05rem/.9 var(--dm-f-display);text-transform:uppercase} #top .dm-hero-side{display:grid;grid-template-rows:auto 1fr;gap:var(--dm-gap)} #top .dm-statement{background:var(--dm-slate) url(../img/beton.webp) center/cover;color:var(--dm-on-slate);padding:clamp(22px,3vw,36px);min-height:360px;container-type:inline-size;display:flex;flex-direction:column;justify-content:space-between;gap:1rem} #top .dm-statement::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(15,15,17,.55)} #top .dm-statement h1{font-size:clamp(2.2rem,12.5cqi,4.8rem);position:relative;z-index:1} #top .dm-statement h1 em{font-style:normal;color:var(--dm-chalk)} #top .dm-statement p{color:var(--dm-on-slate-muted);font-size:.95rem;max-width:min(40ch,58%);position:relative;z-index:1} #top .dm-statement .dm-sketch{position:absolute;right:4%;bottom:0;width:min(36%,210px);height:auto;max-height:64%;object-fit:contain;object-position:bottom right;filter:drop-shadow(0 10px 25px rgba(0,0,0,.5));pointer-events:none} #top .dm-minis{display:grid;grid-template-columns:1fr 1fr;gap:var(--dm-gap)} #top .dm-mini{min-height:230px;display:flex;align-items:flex-end;padding:1rem;color:#fff;text-decoration:none} #top .dm-mini::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.75))} #top .dm-mini b{font:900 clamp(1.6rem,2.6vw,2.2rem)/.9 var(--dm-f-display);text-transform:uppercase} #top .dm-mini .dm-round{position:absolute;top:.8rem;right:.8rem;width:2.3rem;height:2.3rem} @media (max-width:900px){ #top .dm-bento{grid-template-columns:1fr} #top .dm-hero-main{min-height:400px} #top .dm-hero-side{order:-1} #top .dm-statement{min-height:0} } @media (max-width:520px){ #top .dm-statement p{max-width:62%} #top .dm-mini{min-height:170px} #top .dm-badge{width:100px;height:100px} } #top .dm-status{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--dm-gap);margin-top:var(--dm-gap)} #top .dm-status>div{background:var(--dm-surface);border-radius:var(--dm-r);padding:1rem 1.2rem;display:grid;gap:.15rem;align-content:start} #top .dm-status b{font-weight:800} #top .dm-status small{color:var(--dm-muted);font-size:.88rem;font-variant-numeric:tabular-nums} #top .dm-pill{display:inline-flex;align-items:center;gap:.4rem;font:800 .74rem/1 var(--dm-f-body);letter-spacing:.08em;text-transform:uppercase;padding:.35rem .55rem;border-radius:999px;background:color-mix(in srgb,var(--dm-bordeaux) 12%,transparent);color:var(--dm-accent);justify-self:start;margin-bottom:.3rem} #top .dm-pill.dm-open{color:var(--dm-ok);background:color-mix(in srgb,var(--dm-ok) 14%,transparent)} #top .dm-pill::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:currentColor} @media (max-width:760px){ #top .dm-status{grid-template-columns:1fr} } #top .dm-quote{font:800 clamp(1.8rem,4.1vw,3.3rem)/1.12 var(--dm-f-body);letter-spacing:-.03em;max-width:22ch;margin:0} #top .dm-inline-img{display:inline-block;width:1.5em;height:.95em;border-radius:999px;vertical-align:-.1em;background:center/cover;margin-inline:.1em} #top .dm-outline{display:inline-block;border:2px solid var(--dm-accent);border-radius:999px;padding:0 .35em;line-height:1.05} #top .dm-quote-meta{display:flex;gap:1rem;align-items:center;margin-top:1.6rem} #top .dm-quote-meta img{width:56px;height:56px;border-radius:50%;object-fit:cover} #top .dm-quote-meta .dm-hand{font-size:1.8rem;color:var(--dm-accent)} #top .dm-row3{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:var(--dm-gap)} #top .dm-feature-card{background:var(--dm-bordeaux);color:var(--dm-on-bordeaux);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:var(--dm-gap);padding:var(--dm-gap);min-height:300px} #top .dm-feature-card .dm-txt{padding:1rem;display:flex;flex-direction:column;justify-content:space-between;gap:1.2rem} #top .dm-feature-card h2{font:800 clamp(1.4rem,2.2vw,1.9rem)/1.15 var(--dm-f-body);letter-spacing:-.01em} #top .dm-feature-card .dm-photo{border-radius:calc(var(--dm-r) - 6px);object-fit:cover;width:100%;height:100%;min-height:220px} #top .dm-plus{min-height:300px} #top .dm-plus .dm-round{position:absolute;top:.8rem;right:.8rem;z-index:2} #top .dm-plus .dm-cap{position:absolute;inset:auto .6rem .6rem .6rem;background:var(--dm-surface);color:var(--dm-ink);border-radius:calc(var(--dm-r) - 6px);padding:.9rem 1rem;font-size:.9rem;transform:translateY(calc(100% + 1rem))} #top .dm-plus .dm-cap b{display:block;font-weight:800} #top .dm-plus.dm-show .dm-cap{transform:none} #top .dm-plus.dm-show .dm-round{transform:rotate(45deg)} @media (max-width:980px){ #top .dm-row3{grid-template-columns:1fr 1fr} #top .dm-feature-card{grid-column:1/-1} } @media (max-width:560px){ #top .dm-row3{grid-template-columns:1fr} #top .dm-feature-card{grid-template-columns:1fr} } #top .dm-split-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:2rem;align-items:end;margin-bottom:clamp(20px,3vw,32px)} #top .dm-split-head p{font-size:.95rem;color:var(--dm-muted);max-width:36ch} #top .dm-split-head h2{justify-self:end;max-width:17ch} @media (max-width:760px){ #top .dm-split-head{grid-template-columns:1fr} #top .dm-split-head h2{justify-self:start;order:-1} } #top .dm-cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--dm-gap)} #top .dm-cat{text-decoration:none;display:grid;gap:.7rem} #top .dm-cat .dm-tile{aspect-ratio:4/3} #top .dm-cat .dm-tile img{width:100%;height:100%;object-fit:cover} #top .dm-cat-meta{display:flex;justify-content:space-between;gap:1rem;align-items:start} #top .dm-cat-meta b{font-weight:800;text-transform:uppercase;letter-spacing:.02em} #top .dm-cat-meta small{display:block;color:var(--dm-muted);font-size:.85rem} #top .dm-rule{height:2px;background:var(--dm-line);margin-top:clamp(24px,3vw,36px);position:relative;overflow:hidden} #top .dm-rule::before{content:"";position:absolute;inset:0;width:30%;background:var(--dm-bordeaux)} @media (max-width:760px){ #top .dm-cats{grid-template-columns:1fr} } #top .dm-date{font-variant-numeric:tabular-nums;color:var(--dm-muted);font-size:.85rem;font-weight:700} #top .dm-price{font-variant-numeric:tabular-nums;font-weight:800;white-space:nowrap} #top .dm-shop{background:var(--dm-bordeaux);color:var(--dm-on-bordeaux);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--dm-gap);padding:var(--dm-gap);min-height:460px} #top .dm-shop .dm-txt{padding:clamp(18px,3vw,40px);display:flex;flex-direction:column;justify-content:space-between;gap:1.4rem} #top .dm-shop .dm-brandline{font:900 clamp(2.4rem,4.6vw,3.8rem)/.9 var(--dm-f-display);letter-spacing:normal;text-transform:lowercase} #top .dm-shop .dm-brandline span{color:var(--dm-chalk)} #top .dm-shop p{opacity:.88;font-size:.98rem} #top .dm-shop .dm-photo{border-radius:calc(var(--dm-r) - 6px);background:url(../img/shop-bratwurst.webp) center/cover;min-height:300px;position:relative;overflow:hidden} #top .dm-shop .dm-photo .dm-hand{position:absolute;left:1rem;bottom:1rem;background:var(--dm-surface);color:var(--dm-accent);padding:.4rem .8rem;border-radius:999px;font-size:1.3rem;transform:rotate(-3deg)} #top .dm-chips{display:flex;flex-wrap:wrap;gap:.45rem} #top .dm-chip{padding:.4rem .8rem;border:1.5px solid color-mix(in srgb,var(--dm-on-bordeaux) 45%,transparent);border-radius:999px;text-decoration:none;font-size:.85rem;font-weight:700} #top .dm-chip:hover{background:var(--dm-on-bordeaux);color:var(--dm-bordeaux)} #top .dm-facts-line{font-size:.85rem;opacity:.85} @media (max-width:860px){ #top .dm-shop{grid-template-columns:1fr} } #top .dm-courses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--dm-gap)} #top .dm-course{background:var(--dm-slate);color:var(--dm-on-slate);padding:1.3rem;min-height:210px;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none} #top .dm-course:hover{transform:translateY(-4px);background:var(--dm-bordeaux-deep)} #top .dm-course .dm-top{display:flex;justify-content:space-between;align-items:start} #top .dm-course .dm-hand{color:var(--dm-chalk)} #top .dm-course .dm-round{background:var(--dm-on-slate);color:var(--dm-slate);width:2.3rem;height:2.3rem} #top .dm-course b{font-weight:800;font-size:1.15rem;text-transform:uppercase;letter-spacing:.01em;line-height:1.15} #top .dm-course small{display:block;color:var(--dm-on-slate-muted);font-size:.85rem;margin-top:.25rem} @media (max-width:820px){ #top .dm-courses{grid-template-columns:1fr} #top .dm-course{min-height:150px} } #top .dm-banner{min-height:clamp(380px,48vw,560px);display:grid;place-items:center;text-align:center;padding:2rem;color:#fff} #top .dm-banner img.dm-bg{height:120%;top:-10%} #top .dm-banner::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(10,10,12,.6)} #top .dm-banner h2{font:900 clamp(2.6rem,6vw,5rem)/.92 var(--dm-f-display);text-transform:uppercase;letter-spacing:.005em;max-width:16ch;margin:0 auto 1.4rem} #top .dm-banner p{margin:0 auto 1.4rem;opacity:.9} #top .dm-page-hero{margin-top:6px;background:var(--dm-slate) url(../img/beton.webp) center/cover;color:var(--dm-on-slate);border-radius:var(--dm-r);overflow:hidden;position:relative;isolation:isolate} #top .dm-page-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(15,15,17,.55)} #top .dm-page-hero .dm-inner{padding:clamp(36px,6vw,80px) clamp(22px,4vw,56px);display:grid;gap:1rem} #top .dm-page-hero .dm-eyebrow{color:var(--dm-chalk)} #top .dm-page-hero h1{font:900 clamp(2.8rem,6.5vw,5.2rem)/.92 var(--dm-f-display);text-transform:uppercase;max-width:18ch} #top .dm-page-hero p{color:var(--dm-on-slate-muted);font-size:1.1rem} #top .dm-subnav{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.4rem} #top .dm-subnav a{padding:.45rem .9rem;border:1.5px solid rgba(255,255,255,.3);border-radius:999px;text-decoration:none;font-weight:700;font-size:.88rem} #top .dm-subnav a:hover{background:var(--dm-on-slate);color:var(--dm-slate)} #top .dm-card,#top .dm-partner{border-radius:var(--dm-r)} #top .dm-card .dm-hand{color:var(--dm-accent)} #top .dm-tabs{display:inline-flex;gap:.3rem;padding:.3rem;border-radius:999px;background:var(--dm-surface);margin-bottom:1.4rem} #top .dm-tabs button{font:800 .85rem var(--dm-f-body);letter-spacing:.06em;text-transform:uppercase;border:0;background:none;color:var(--dm-muted);padding:.7rem 1.3rem;border-radius:999px;cursor:pointer} #top .dm-tabs button[aria-selected="true"]{background:var(--dm-bordeaux);color:var(--dm-on-bordeaux)} #top .dm-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--dm-gap)} #top .dm-card{display:grid;grid-template-rows:auto 1fr;background:var(--dm-surface);overflow:hidden} #top .dm-card img{aspect-ratio:3/2;object-fit:cover;width:100%} #top .dm-card .dm-body{padding:1.2rem 1.3rem 1.4rem;display:grid;gap:.45rem;align-content:start} #top .dm-card p{font-size:.95rem;color:var(--dm-muted)} @media (max-width:980px){ #top .dm-cards{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:620px){ #top .dm-cards{grid-template-columns:1fr} } #top .dm-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--dm-gap)} #top .dm-gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--dm-r)} @media (max-width:720px){ #top .dm-gallery{grid-template-columns:repeat(2,minmax(0,1fr))} } #top .dm-kf{--dm-kf-red:#d22a38;--dm-kf-slate:#3f4e55;--dm-kf-white:#ffffff} #top .dm-kf-bento{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--dm-gap);padding-top:6px} #top .dm-kf-logo{background:var(--dm-kf-white);min-height:520px;display:grid;place-items:center;padding:clamp(28px,6vw,72px)} #top .dm-kf-logo img{width:min(100%,460px);height:auto} #top .dm-kf-logo .dm-badge{top:1.2rem;right:1.2rem} #top .dm-kf-logo .dm-badge .dm-core{background:var(--dm-kf-red);color:#fff;font-size:.95rem} #top .dm-kf-logo .dm-badge circle{fill:var(--dm-kf-slate)} #top .dm-kf-logo .dm-badge text{fill:#fff} #top .dm-kf-year{background:var(--dm-kf-slate);color:#f4f0ec;padding:clamp(24px,4vw,48px);display:flex;flex-direction:column;justify-content:space-between;gap:1.6rem} #top .dm-kf-year .dm-eyebrow{color:#f4f0ec;opacity:.8} #top .dm-kf-year .dm-big{font:900 clamp(6rem,15vw,12rem)/.8 var(--dm-f-display);letter-spacing:-.01em} #top .dm-kf-year .dm-big span{color:#ff7a85;-webkit-text-stroke:0} #top .dm-kf-year h1{font:900 clamp(2.4rem,4.6vw,3.8rem)/.92 var(--dm-f-display);text-transform:uppercase} #top .dm-kf-year p{color:#cfd6d9;font-size:1.02rem} #top .dm-kf-cta{background:var(--dm-kf-red);color:#fff;display:flex;flex-wrap:wrap;gap:1.2rem 2rem;align-items:center;justify-content:space-between;padding:clamp(22px,3.5vw,40px)} #top .dm-kf-cta h2{max-width:22ch} #top .dm-kf-teaser{background:var(--dm-kf-slate,#3f4e55);color:#f4f0ec;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--dm-gap);padding:var(--dm-gap);text-decoration:none} #top .dm-kf-teaser .dm-logo-box{background:#fff;border-radius:calc(var(--dm-r) - 6px);display:grid;place-items:center;padding:2rem;min-height:220px} #top .dm-kf-teaser .dm-logo-box img{width:min(100%,320px)} #top .dm-kf-teaser .dm-txt{padding:clamp(14px,2.5vw,28px);display:flex;flex-direction:column;justify-content:center;gap:1rem} #top .dm-kf-teaser .dm-hand{color:#ff9aae} #top .dm-kf-teaser p{color:#cfd6d9} @media (max-width:860px){ #top .dm-kf-bento,#top .dm-kf-teaser{grid-template-columns:1fr} #top .dm-kf-logo{min-height:340px} } #top .dm-timeline{display:grid;border-top:1px solid var(--dm-line)} #top .dm-partners{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--dm-gap)} #top .dm-partner{background:var(--dm-surface);padding:1.4rem;display:grid;gap:.45rem;align-content:start} #top .dm-partner p{font-size:.95rem;color:var(--dm-muted)} #top .dm-partner a{font-size:.9rem;justify-self:start} @media (max-width:900px){ #top .dm-partners{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:560px){ #top .dm-partners{grid-template-columns:1fr} } #top .dm-s :where(label){display:grid;gap:.35rem;font-weight:700;font-size:.88rem} #top .dm-s :where(label small){font-weight:400;color:var(--dm-muted)} #top .dm-s :where(input),#top .dm-s :where(select),#top .dm-s :where(textarea){font:inherit;font-size:1rem;padding:.75rem .9rem;border-radius:12px;border:1px solid var(--dm-field);background:var(--dm-paper);color:var(--dm-ink);width:100%} #top .dm-s ::placeholder{color:var(--dm-muted);opacity:1} #top .dm-s :where([aria-invalid="true"]){border:2px solid var(--dm-accent)} #top .dm-s :where(textarea){min-height:130px;resize:vertical} #top .dm-form-note{font-size:.88rem;color:var(--dm-muted)} #top .dm-legal{display:grid;gap:1.4rem;max-width:760px} #top .dm-legal dl{display:grid;grid-template-columns:auto 1fr;gap:.2rem 1.2rem;margin:0} #top .dm-legal dt{font-weight:700} #top .dm-legal dd{margin:0} #top .dm-legal h2{font:800 1.35rem/1.15 var(--dm-f-body);letter-spacing:-.01em;margin-bottom:.4rem} #top .dm-legal p+p{margin-top:.7rem} /* ===================================================================== ENFOLD-ANPASSUNGEN Jede Layout-Builder-Sektion hat die Klasse „dm-s“. Darin gelten die Grundstile dieses Designs. Elemente mit dm-Klassen liegen in Code- blöcken, Textblöcken oder Spalten mit „Custom CSS Class“. ===================================================================== */ /* Codeblock und Textblock ohne eigene Abstände */ #top .dm-s .avia_codeblock_section,#top .dm-s .avia_codeblock{margin:0} #top .dm-s .avia_textblock{font-size:inherit;line-height:inherit} #top .dm-s .avia_textblock p:empty{display:none} /* Überschriften-Element (av_heading) mit Custom Class „dm-heading“ */ #top .dm-heading{margin-bottom:clamp(18px,2.5vw,30px);padding-bottom:0} #top .dm-heading .av-special-heading-tag{font:800 clamp(2rem,4.2vw,3.3rem)/1.02 var(--dm-f-body);letter-spacing:-.025em;color:var(--dm-ink);margin:0;padding:0;text-transform:none} #top .dm-heading .av-subheading{font:700 .76rem/1.2 var(--dm-f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--dm-accent);margin-bottom:.7rem;opacity:1} #top .dm-heading .av-subheading p{margin:0} #top .dm-heading .special-heading-border{display:none} /* Spalten als Kacheln: Custom Class „dm-col“ plus Variante */ #top .flex_column.dm-col{border-radius:var(--dm-r);overflow:hidden;position:relative;isolation:isolate} #top .flex_column.dm-col-surface{background:var(--dm-surface);padding:clamp(20px,3vw,32px)} #top .flex_column.dm-col-card{background:var(--dm-surface);padding:0} #top .flex_column.dm-col-card .avia_textblock{padding:1.2rem 1.3rem 1.4rem} #top .flex_column.dm-col-card .avia_codeblock img{width:100%;aspect-ratio:3/2;object-fit:cover} #top .flex_column.dm-col-step{background:var(--dm-surface);padding:1.4rem} #top .flex_column.dm-col-kf{background:var(--dm-surface);padding:1.4rem;border-top:4px solid #d22a38} #top .flex_column.dm-col-board{background:var(--dm-slate) url(../img/beton.webp) center/cover;color:var(--dm-on-slate);padding:clamp(20px,3vw,32px)} #top .flex_column.dm-col-board::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(14,14,16,.5)} #top .flex_column.dm-col-stop{background:var(--dm-surface);padding:1.2rem} #top .flex_column.dm-col-stop.dm-today{background:var(--dm-bordeaux);color:var(--dm-on-bordeaux)} #top .flex_column.dm-col-stop.dm-today .dm-day,#top .flex_column.dm-col-stop.dm-today .dm-where{color:inherit} /* Inhalte in Textblöcken (für die Redaktion pflegbar) */ #top .dm-s .avia_textblock .dm-hand{display:block;margin-bottom:.4rem} #top .dm-col-card .avia_textblock h3,#top .dm-col-step .avia_textblock h3,#top .dm-col-kf .avia_textblock h3{margin:.2rem 0 .4rem} #top .dm-col-card .avia_textblock p:not(.dm-hand),#top .dm-col-step .avia_textblock p,#top .dm-col-kf .avia_textblock p:not(.dm-hand){font-size:.95rem;color:var(--dm-muted)} #top .dm-col-card .dm-hand{color:var(--dm-accent)} #top .dm-col-kf .dm-hand{color:#d22a38} #top .dm-step-no{width:2.6rem;height:2.6rem;border-radius:50%;display:grid;place-items:center;background:var(--dm-bordeaux);color:var(--dm-on-bordeaux)!important;font:900 1.4rem/1 var(--dm-f-display)!important;margin-bottom:.5rem} #top .dm-stack-text p+p{margin-top:1rem} #top .dm-stack-text .dm-eyebrow{margin-bottom:.7rem} #top .dm-stack-text h2{margin-bottom:1rem} /* Wochenkarte (Liste im Textblock) */ #top .dm-s .dm-week-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:.8rem} #top .dm-s ul.dm-dishes,#top .dm-s ul.dm-tips{list-style:none;margin:0;padding:0} #top .dm-s ul.dm-dishes li{display:grid;grid-template-columns:7rem minmax(0,1fr) auto;gap:1rem;padding-block:.8rem;border-top:1px solid var(--dm-line);align-items:baseline;margin:0} #top .dm-s ul.dm-dishes li strong{font-weight:800;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dm-muted)} #top .dm-s ul.dm-dishes li.dm-today strong{color:var(--dm-accent)} #top .dm-s ul.dm-dishes li.dm-today>span:not(.dm-price)::after{content:"heute";font:700 1.1rem var(--dm-f-hand);color:var(--dm-accent);margin-left:.5rem} #top .dm-s ul.dm-dishes small,#top .dm-s ul.dm-tips small{display:block;color:var(--dm-muted);font-size:.8rem;font-weight:400} #top .dm-s .dm-price{font-variant-numeric:tabular-nums;font-weight:800;white-space:nowrap} #top .dm-s ul.dm-tips li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.15rem 1rem;padding-block:.85rem;border-top:1px dashed rgba(255,255,255,.2);margin:0} #top .dm-s ul.dm-tips small{color:var(--dm-on-slate-muted)} #top .dm-s ul.dm-tips strong{font-weight:700} #top .dm-s ul.dm-tips .dm-price{font:700 2rem/.9 var(--dm-f-hand);color:var(--dm-chalk);align-self:center;text-align:right} #top .dm-s ul.dm-tips .dm-price span{display:block;font:600 .7rem var(--dm-f-body);color:var(--dm-on-slate-muted)} #top .dm-col-board .dm-hand{font-size:2.5rem;color:var(--dm-chalk)} #top .dm-col-board .dm-date{color:var(--dm-on-slate-muted)} @media (max-width:560px){ #top .dm-s ul.dm-dishes li{grid-template-columns:minmax(0,1fr) auto} #top .dm-s ul.dm-dishes li strong{grid-column:1/-1} } /* Verkaufswagen-Stationen (Textblock in Spalte) */ #top .dm-col-stop .dm-day{display:block;font:900 2rem/1 var(--dm-f-display);text-transform:uppercase;color:var(--dm-accent)} #top .dm-col-stop .dm-time{display:block;font-variant-numeric:tabular-nums;font-weight:800} #top .dm-col-stop .dm-where{display:block;color:var(--dm-muted);font-size:.92rem} #top .dm-col-stop.dm-today .dm-day::after{content:" · heute";font:700 1.2rem var(--dm-f-hand);text-transform:none} /* Auszeichnungen (Textblock: h3 = Jahr, ul = Titel) */ #top .dm-timeline .avia_textblock{display:grid;grid-template-columns:6.5rem minmax(0,1fr);border-top:1px solid var(--dm-line)} #top .dm-timeline .avia_textblock h3{font:900 2.2rem/1 var(--dm-f-display);color:var(--dm-accent);font-variant-numeric:tabular-nums;margin:0;padding-block:1rem;border-bottom:1px solid var(--dm-line)} #top .dm-timeline .avia_textblock ul{list-style:none;margin:0;padding:1rem 0;display:grid;gap:.2rem;border-bottom:1px solid var(--dm-line)} #top .dm-timeline .avia_textblock li{margin:0} @media (max-width:520px){ #top .dm-timeline .avia_textblock{grid-template-columns:1fr} #top .dm-timeline .avia_textblock h3{border-bottom:0;padding-bottom:0} } /* Stellenanzeigen, Kontakt, Rechtliches (Textblöcke) */ #top .dm-col-job h2{font-size:clamp(1.9rem,3.5vw,2.6rem);margin:.3rem 0 1rem} #top .dm-col-job h3{margin:1.2rem 0 .4rem;font:800 .76rem/1.3 var(--dm-f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--dm-accent)} #top .dm-col-job ul{margin:0;padding-left:1.1rem} #top .dm-col-job .dm-hand{color:var(--dm-accent)} #top .dm-col-job .dm-apply{margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--dm-line)} #top .dm-col-fact h2{font:800 1.35rem/1.15 var(--dm-f-body);margin-bottom:.3rem} #top .dm-col-fact dl{display:grid;grid-template-columns:auto 1fr;gap:.2rem 1rem;margin:.6rem 0 0;font-variant-numeric:tabular-nums;color:var(--dm-muted)} #top .dm-col-fact dt{font-weight:700;color:var(--dm-ink)} #top .dm-col-fact dd{margin:0} #top .dm-col-fact p{color:var(--dm-muted)} #top .dm-col-fact+.dm-col-fact{margin-top:var(--dm-gap)} #top .dm-legal .avia_textblock{max-width:760px} #top .dm-legal .avia_textblock h2{font:800 1.35rem/1.15 var(--dm-f-body);margin:1.6rem 0 .4rem} #top .dm-legal .avia_textblock p{margin:0 0 .7rem} #top .dm-legal .avia_textblock dl{display:grid;grid-template-columns:auto 1fr;gap:.2rem 1.2rem} #top .dm-legal .avia_textblock dt{font-weight:700} #top .dm-legal .avia_textblock dd{margin:0} /* Kontaktformular (av_contact) mit Custom Class „dm-form“ */ #top .dm-form{background:var(--dm-surface);border-radius:var(--dm-r);padding:clamp(20px,3vw,32px)} #top .dm-form label{font-weight:700;font-size:.88rem;color:var(--dm-ink)} #top .dm-form input[type=text],#top .dm-form input[type=email],#top .dm-form input[type=tel],#top .dm-form select,#top .dm-form textarea{font:inherit;font-size:1rem;padding:.75rem .9rem;border-radius:12px;border:1px solid var(--dm-field);background:var(--dm-paper);color:var(--dm-ink);width:100%;margin:0} #top .dm-form .error input,#top .dm-form .error textarea,#top .dm-form .error select{border:2px solid var(--dm-accent)} #top .dm-form input[type=submit]{display:inline-flex;padding:1rem 1.6rem;border-radius:999px;border:0;background:var(--dm-bordeaux);color:var(--dm-on-bordeaux);font:800 .8rem/1 var(--dm-f-body);letter-spacing:.08em;text-transform:uppercase;cursor:pointer} #top .dm-form input[type=submit]:hover{background:var(--dm-bordeaux-deep)} /* Ergänzungen für Spalten, Codeblöcke und Textblöcke */ #top .dm-rounded{border-radius:var(--dm-r);width:100%;height:auto;object-fit:cover} #top .dm-stack .avia_codeblock{display:grid;gap:1rem} #top .dm-stack .avia_codeblock>img{border-radius:var(--dm-r);width:100%;height:auto} #top .dm-fact-box{background:var(--dm-surface);border-radius:var(--dm-r);padding:1.3rem 1.4rem} #top .flex_column.dm-col-job{margin-bottom:var(--dm-gap)} /* Abgleich mit der Vorlage (26.10.2026) ------------------------------------------------ */ /* Inhaltsbreite wie .wrap der Vorlage: 1240 px inkl. Rand, Rand wie dort */ #top .dm-s .container{box-sizing:border-box;width:100%;padding-left:clamp(16px,3vw,32px);padding-right:clamp(16px,3vw,32px)} /* Enfold gibt H1 sonst 1px Laufweite */ #top .dm-s h1:not(.dm-caps){letter-spacing:normal} .dm-skip{font-size:17px} /* Spaltenreihen (Enfold „gleich hohe Spalten“) als Raster mit 12 px Abstand statt 6 % */ #top .dm-s .flex_column_table{display:flex;gap:var(--dm-gap);width:100%} #top .dm-s .flex_column_table>.av-flex-placeholder{display:none} #top .dm-s .flex_column_table>.flex_column{display:block;float:none;flex:1 1 0;min-width:0;width:auto;margin:0} #top .dm-s .flex_column_table>.av_three_fifth.first{flex-grow:1.15} #top .dm-s .flex_column_table>.av_three_fifth.first~.av_two_fifth{flex-grow:.85} #top .dm-s .flex_column_table>.av_two_fifth.first{flex-grow:.9} #top .dm-s .flex_column_table>.av_two_fifth.first~.av_three_fifth{flex-grow:1.1} /* Text + Bild/Liste nebeneinander (.split der Vorlage): Reihen ohne Kachel-Spalten */ #top .dm-s .flex_column_table:not(:has(>.dm-col,>.dm-contact-facts)){gap:clamp(24px,4vw,56px);align-items:center} #top .dm-s .flex_column_table:has(>.dm-split-top){gap:clamp(24px,4vw,56px)} #top .dm-s .flex_column_table:has(>.dm-contact-facts){align-items:start} @media (max-width:980px){ #top .dm-s .flex_column_table:has(>.av_one_third.dm-col-card){flex-wrap:wrap} #top .dm-s .flex_column_table>.av_one_third.dm-col-card{flex:1 1 calc(50% - var(--dm-gap))} } @media (max-width:900px){ #top .dm-s .flex_column_table:has(>.av_three_fifth.first){flex-wrap:wrap} #top .dm-s .flex_column_table:has(>.av_three_fifth.first)>.flex_column{flex-basis:100%} #top .dm-s .flex_column_table:has(>.dm-col-stop){flex-wrap:wrap} #top .dm-s .flex_column_table>.dm-col-stop{flex:1 1 calc(50% - var(--dm-gap))} } @media (max-width:860px){ #top .dm-s .flex_column_table:has(>.dm-col-kf){flex-wrap:wrap} #top .dm-s .flex_column_table:has(>.dm-col-kf)>.flex_column{flex-basis:100%} } @media (max-width:820px){ #top .dm-s .flex_column_table:not(:has(>.dm-col)),#top .dm-s .flex_column_table:has(>.dm-split-top){flex-wrap:wrap} #top .dm-s .flex_column_table:not(:has(>.dm-col))>.flex_column,#top .dm-s .flex_column_table:has(>.dm-split-top)>.flex_column{flex-basis:100%} } @media (max-width:760px){ #top .dm-s .flex_column_table:has(>.dm-col-step){flex-wrap:wrap} #top .dm-s .flex_column_table:has(>.dm-col-step)>.flex_column{flex-basis:100%} } @media (max-width:720px){ #top .dm-s .flex_column_table:has(>.av_one_half.dm-col-card){flex-wrap:wrap} #top .dm-s .flex_column_table:has(>.av_one_half.dm-col-card)>.flex_column{flex-basis:100%} } @media (max-width:620px){ #top .dm-s .flex_column_table>.av_one_third.dm-col-card{flex-basis:100%} } @media (max-width:480px){ #top .dm-s .flex_column_table>.dm-col-stop{flex-basis:100%} } /* Enfold gibt Spalten unter 768 px 20 px Abstand nach unten – in den Rastern zählt nur der 12-px-Abstand */ @media (max-width:767px){ .responsive #top #wrap_all .dm-s .flex_column_table>.flex_column{margin:0;width:auto} } /* Herkunfts-Karten (zwei Spalten) haben normalen Fließtext, nur die kleinen Karten gedämpften */ #top .flex_column.av_one_half.dm-col-card .avia_textblock p:not(.dm-hand){font-size:inherit;color:inherit} /* Wochenkarte und Tipps */ #top .dm-s ul.dm-dishes li>span:not(.dm-price){font-weight:600} #top .dm-s ul.dm-dishes li>span:not(.dm-price) small{font-weight:400} #top .dm-s ul.dm-tips small{font-size:.82rem} /* Stellenanzeigen: Aufgaben und Anforderungen nebeneinander wie .job der Vorlage */ #top .dm-col-job .avia_textblock{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 3rem;grid-auto-flow:row dense;align-items:start} #top .dm-col-job .avia_textblock>*{grid-column:1/-1} #top .dm-col-job .avia_textblock>h3:nth-of-type(odd),#top .dm-col-job .avia_textblock>ul:nth-of-type(odd){grid-column:1} #top .dm-col-job .avia_textblock>h3:nth-of-type(even),#top .dm-col-job .avia_textblock>ul:nth-of-type(even){grid-column:2} #top .dm-col-job .avia_textblock:has(>h3)>p:not(.dm-hand):not(.dm-apply){grid-column:1} #top .dm-col-job .avia_textblock:has(>p:not(.dm-hand):not(.dm-apply))>h3,#top .dm-col-job .avia_textblock:has(>p:not(.dm-hand):not(.dm-apply))>ul{grid-column:2} #top .dm-col-job .avia_textblock>h3{margin-top:0} #top .dm-col-job .avia_textblock>ul{display:grid;gap:.2rem} #top .dm-col-job .avia_textblock>ul li{margin:0;padding:0;line-height:1.6} #top .dm-col-job .dm-apply{display:flex;flex-wrap:wrap;gap:.6rem 2rem;margin-top:1.4rem;font-size:.95rem;max-width:none} #top .dm-col-job .dm-apply br{display:none} @media (max-width:720px){ #top .dm-col-job .avia_textblock{grid-template-columns:1fr} #top .dm-col-job .avia_textblock>*{grid-column:1/-1!important} #top .dm-col-job .avia_textblock>h3+ul+h3{margin-top:1.2rem} } /* Kontakt: Infokästen links, Bestellformular als Karte rechts */ #top .dm-fact-box h2{margin-bottom:.3rem;font:800 1.35rem/1.15 var(--dm-f-body);letter-spacing:-.01em} #top .dm-contact-facts .dm-fact-box+.dm-fact-box{margin-top:var(--dm-gap)} #top .flex_column.dm-contact{padding:clamp(20px,3vw,32px)} #top .dm-contact .dm-stack-text h2{font-size:2.2rem} #top .dm-contact .dm-form{padding:0;background:none;border-radius:0} /* Formularfelder als Raster wie .row der Vorlage: halbe Felder nebeneinander, Eingabefelder unten bündig */ #top .dm-form fieldset{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:end} #top .dm-form fieldset>p{grid-column:1/-1;float:none;width:auto;margin:0;padding:0;clear:none} #top .dm-form fieldset>p.form_element_half{grid-column:auto} #top .dm-form fieldset>p.hidden{display:none} #top .dm-form label abbr.required{display:inline;margin-left:.15rem;color:var(--dm-accent);text-decoration:none;border:0} @media (max-width:560px){ #top .dm-form fieldset>p.form_element_half{grid-column:1/-1} } @media (max-width:820px){ #top .dm-s .flex_column_table:has(>.dm-contact-facts){flex-wrap:wrap} #top .dm-s .flex_column_table:has(>.dm-contact-facts)>.flex_column{flex-basis:100%} } #top .dm-s .dm-cards,#top .dm-s .dm-partners{margin-top:0} /* Footer-Widgets (04_Footer-Widgets) */ #top #footer,#top #socket{background:var(--dm-paper);border-color:var(--dm-line);color:var(--dm-muted);font-size:.92rem} #top #socket a{color:var(--dm-ink)} /* Footer-Widgets (04_Footer-Widgets) */ #top #footer,#top #socket{background:var(--dm-paper);border-color:var(--dm-line);color:var(--dm-muted);font-size:.92rem} #top #footer .dm-foot h2{margin:0 0 .6rem;font:800 .8rem/1.3 var(--dm-f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--dm-ink)} #top #footer .dm-foot h2:not(:first-child){margin-top:1.4rem} #top #footer .dm-foot p,#top #footer .dm-foot li{color:var(--dm-muted)} #top #footer .dm-foot a:not(.dm-btn){color:var(--dm-ink);text-decoration:none} #top #footer .dm-foot a:not(.dm-btn):hover{color:var(--dm-accent)} #top #footer .dm-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.1rem} #top #footer .dm-foot li{border:0;padding:0} #top #footer .dm-foot li a{display:inline-block;min-height:24px;padding-block:.2rem} #top #footer .dm-news{background:var(--dm-surface);border-radius:var(--dm-r);padding:1.2rem;display:grid;gap:.7rem;align-content:start} #top #footer .dm-news h2{margin:0} #top #footer .dm-news p{margin:0;font-size:.88rem} /* Footer-Raster wie .foot der Vorlage: 5 Spalten (Enfold › Footer: 5 Spalten), bis 980 px zwei Spalten mit Newsletter über die volle Breite, bis 520 px eine */ #top #footer .container,#top #socket .container{box-sizing:border-box;width:100%;max-width:var(--dm-wrap);padding-left:clamp(16px,3vw,32px);padding-right:clamp(16px,3vw,32px)} #top #footer .container{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1.5fr;gap:2rem} #top #footer .container::before,#top #footer .container::after{display:none} #top #footer .container>.flex_column,.responsive #top #wrap_all #footer .container>.flex_column{float:none;width:auto;margin:0;min-width:0} #top #footer .widget{margin:0;padding:0} @media (max-width:980px){ #top #footer .container{grid-template-columns:1fr 1fr} #top #footer .container>.flex_column:last-child{grid-column:1/-1} } @media (max-width:520px){ #top #footer .container{grid-template-columns:1fr} } #top #socket a{color:var(--dm-ink)} /* Header-Buttons im Enfold-Menü (Menüpunkt-Klasse „av-menu-button av-menu-button-colored“) */ #top #header .av-menu-button-colored > a .avia-menu-text{background:var(--dm-bordeaux);border-color:var(--dm-bordeaux);color:var(--dm-on-bordeaux);border-radius:999px;font-weight:800;letter-spacing:.06em;text-transform:uppercase} #top #header .av-menu-button-bordered > a .avia-menu-text{border-radius:999px;font-weight:800;letter-spacing:.06em;text-transform:uppercase} /* Schmale Desktops (bis 989 px zeigt Enfold das Burger-Menü): Logo und Menü enger, damit nichts überlappt */ @media (min-width:990px) and (max-width:1239px){ #top .logo{max-width:140px} #top .logo img{max-height:40px;width:auto} #top #header .av-main-nav > li > a{padding:0 5px;font-size:12px} #top #header .av-menu-button > a .avia-menu-text{padding:6px 12px;letter-spacing:.03em} } /* Laufband: liegt außerhalb von „dm-s“ direkt unter */ #top .dm-marquee span{color:inherit}