/*! Seitenvorlage page.php – Marken-, Kategorie-, Orts- und Info-Seiten (Gutenberg) + Abschlussband auf /marken/.
   2026-10-17: v1.0.0 (Paket „Marken, Kategorien, Ortsseiten, Über uns“). Geladen von inc/page-helpers.php
   (wp_head 9998, data-no-optimize, ?v=filemtime) auf Gutenberg-Seiten sowie 2963 /marken/ und 2941 /groessentabelle/.
   Regeln beginnen mit body.oel-ds …, damit sie blog.css (.oel-page …, gebündelt im Head) und das oel0902-gutenberg-CSS
   im Body sicher schlagen. Nur Tokens aus design.css, immer mit Fallback. Bewegung nur opacity/translate, Hero nie. */

/* ---------- Gerüst ---------- */
body.oel-ds main.oel-seite{max-width:none;margin:0;padding:0 0 clamp(56px,7vw,88px);background:var(--oel-bg,#fff);color:var(--oel-ink,#1d1d1f);font-family:var(--oel-font,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif)}

/* ---------- Kopf: Brotkrume, H1, Unterzeile, Aktionen, Foto ---------- */
body.oel-ds .oel-seite__kopf{box-sizing:border-box;width:100%;max-width:calc(var(--oel-max,1200px) + 2 * var(--oel-gutter,20px));margin:0 auto;padding:clamp(28px,4vw,52px) var(--oel-gutter,20px) 0;text-align:center}
body.oel-ds .oel-seite__kopf .oel-breadcrumbs{margin:0 0 clamp(18px,2.2vw,26px);font-size:14px;line-height:1.43;color:var(--oel-ink-3,#6e6e73);text-wrap:balance}
body.oel-ds .oel-seite__kopf .oel-breadcrumbs a{color:var(--oel-ink-3,#6e6e73);text-decoration:none}
body.oel-ds .oel-seite__kopf .oel-breadcrumbs .breadcrumb_last{color:var(--oel-ink-2,#424245)}
@media (hover:hover){body.oel-ds .oel-seite__kopf .oel-breadcrumbs a:hover{color:var(--oel-ink,#1d1d1f);text-decoration:underline}}
body.oel-ds .oel-seite__titel{max-width:980px;margin:0 auto;padding:0;font-family:inherit;font-size:var(--oel-h1,clamp(40px,5.6vw,64px));font-weight:700;line-height:1.06;letter-spacing:-.015em;color:var(--oel-ink,#1d1d1f);text-wrap:balance}
body.oel-ds .oel-seite__titel--lang{max-width:900px;font-size:clamp(32px,4.4vw,56px);line-height:1.08}
body.oel-ds .oel-seite__titel-zusatz{display:block;max-width:760px;margin:12px auto 0;font-size:clamp(21px,2.4vw,28px);line-height:1.2;font-weight:600;letter-spacing:-.005em;color:var(--oel-ink-3,#6e6e73);text-wrap:balance}
body.oel-ds .oel-vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
body.oel-ds .oel-seite__dek{max-width:680px;margin:18px auto 0;font-size:clamp(19px,1.8vw,23px);line-height:1.36;font-weight:400;color:var(--oel-ink-3,#6e6e73);text-wrap:pretty}
body.oel-ds .oel-seite__aktionen{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 28px;margin:28px 0 0}
body.oel-ds .oel-seite__aktionen .oel-link-pfeil{font-size:17px;line-height:1.18}
body.oel-ds .oel-seite__bild{box-sizing:border-box;width:100%;max-width:var(--oel-max,1200px);margin:clamp(40px,5vw,60px) auto 0;padding:0;aspect-ratio:16/9;border-radius:var(--oel-radius-card,18px);overflow:hidden;background:var(--oel-bg-soft,#f5f5f7)}
body.oel-ds .oel-seite__bild :is(picture,img){display:block;width:100%;height:100%;margin:0}
body.oel-ds .oel-seite__bild img{max-width:none;object-fit:cover;border-radius:0}

/* ---------- Inhalt: Lesespalte ---------- */
body.oel-ds .oel-seite .oel-seite__inhalt{box-sizing:border-box;width:min(760px,calc(100% - 2 * var(--oel-gutter,20px)));max-width:none;margin:clamp(44px,5.5vw,72px) auto 0;padding:0;font-size:18px;line-height:1.6;letter-spacing:-.003em;color:var(--oel-ink,#1d1d1f)}
body.oel-ds .oel-seite__inhalt>:first-child{margin-top:0}
body.oel-ds .oel-seite__inhalt>*+*{margin-top:0}
body.oel-ds .oel-seite__inhalt p{margin:0 0 1em}
body.oel-ds .oel-seite__inhalt :is(h1,h2){margin:clamp(48px,5.4vw,68px) 0 14px;font-size:clamp(26px,3vw,32px);line-height:1.16;font-weight:700;letter-spacing:-.01em;color:var(--oel-ink,#1d1d1f);text-wrap:balance}
body.oel-ds .oel-seite__inhalt>:is(h1,h2):first-child{margin-top:0}
body.oel-ds .oel-seite__inhalt h3{margin:32px 0 8px;font-size:clamp(19px,1.8vw,21px);line-height:1.25;font-weight:600;letter-spacing:-.005em;color:var(--oel-ink,#1d1d1f)}
body.oel-ds .oel-seite__inhalt h4{margin:24px 0 6px;font-size:17px;font-weight:600}
body.oel-ds .oel-seite__inhalt a{color:var(--oel-accent,#0066cc);text-decoration:none}
@media (hover:hover){body.oel-ds .oel-seite__inhalt a:hover{text-decoration:underline;text-underline-offset:3px}}
body.oel-ds .oel-seite__inhalt strong{font-weight:600;color:var(--oel-ink,#1d1d1f)}
body.oel-ds .oel-seite__inhalt a strong{color:inherit}
body.oel-ds .oel-seite__inhalt :is(ul,ol){margin:0 0 1.1em;padding-left:1.25em}
body.oel-ds .oel-seite__inhalt li{margin:0 0 .45em;padding-left:.15em}
body.oel-ds .oel-seite__inhalt li::marker{color:var(--oel-ink-3,#6e6e73)}
body.oel-ds .oel-seite__inhalt :is(figure.wp-block-table,.oel-table-scroll){margin:24px 0 32px}
body.oel-ds .oel-seite__inhalt .oel-hinweis{margin:40px 0}
body.oel-ds .oel-seite__inhalt .oel-hinweis+h2{margin-top:40px}

/* Spalten-Kacheln (wp:columns): 2 bzw. 3 nebeneinander, nie 2+1; ab 1024 px etwas breiter als die Lesespalte */
body.oel-ds .oel-seite__inhalt .wp-block-columns{--cols:2;display:grid!important;grid-template-columns:repeat(var(--cols),minmax(0,1fr))!important;gap:16px;margin:28px 0 36px}
body.oel-ds .oel-seite__inhalt .wp-block-columns:has(>.wp-block-column:nth-child(3):last-child){--cols:3}
body.oel-ds .oel-seite__inhalt .wp-block-column{margin:0!important;padding:24px;background:var(--oel-bg-soft,#f5f5f7);border-radius:var(--oel-radius-card,18px)}
body.oel-ds .oel-seite__inhalt .wp-block-column :is(h3,h4){margin:0 0 6px;font-size:19px;line-height:1.25;font-weight:600}
body.oel-ds .oel-seite__inhalt .wp-block-column p{margin:0;font-size:16px;line-height:1.5;color:var(--oel-ink-2,#424245)}
@media (min-width:1024px){
  body.oel-ds .oel-seite__inhalt .wp-block-columns:has(>.wp-block-column:nth-child(3):last-child){width:min(1000px,calc(100vw - 2 * var(--oel-gutter,20px)));margin-inline:calc((100% - min(1000px,calc(100vw - 2 * var(--oel-gutter,20px)))) / 2)}
}
@media (max-width:734px){
  body.oel-ds .oel-seite__inhalt .wp-block-columns{grid-template-columns:1fr!important;gap:12px}
}

/* Filialkarten im Inhalt (.oel-fk aus oelrichs-seo-0902.php/post_content): gleiche Höhe, Linkzeile ruhiger */
body.oel-ds .oel-seite__inhalt .oel-fk-grid{margin:20px 0 12px}
body.oel-ds .oel-seite__inhalt .oel-fk{height:100%;box-sizing:border-box}
body.oel-ds .oel-seite__inhalt .oel-fk .oel-fk__cta{margin-top:auto;padding-top:12px}
body.oel-ds .oel-seite__inhalt .oel-fk-line{font-size:15px;line-height:1.47;color:var(--oel-ink-3,#6e6e73)}

/* Filialkarten-Komponente [oel_filialkarten] (Paket Filialen) im Inhalt: unter 1100 px 2 Spalten in der Lesespalte, darüber 4 nebeneinander in voller Breite */
body.oel-ds .oel-seite__inhalt .oel-fk2-wrap{margin:24px 0 36px}
body.oel-ds .oel-seite__inhalt .oel-fk2 .oel-fk2__links{margin-top:auto;padding-top:16px}
body.oel-ds .oel-seite__inhalt .oel-fk2 .oel-fk2__adresse{margin-bottom:0}
@media (min-width:1100px){
  body.oel-ds .oel-seite__inhalt .oel-fk2-wrap{width:min(var(--oel-max,1200px),calc(100vw - 2 * var(--oel-gutter,20px)));margin-inline:calc((100% - min(var(--oel-max,1200px),calc(100vw - 2 * var(--oel-gutter,20px)))) / 2)}
}

/* Linkzeilen (früher „→ A | B | C“): Textlinks mit › */
body.oel-ds .oel-seite__inhalt .oel-seite-links{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 24px;margin:28px 0;padding:20px 0 0;border-top:1px solid var(--oel-line-soft,#e8e8ed);font-size:17px;line-height:1.35}
body.oel-ds .oel-seite__inhalt .oel-seite-links__titel{flex:0 0 100%;font-size:14px;font-weight:600;color:var(--oel-ink-3,#6e6e73)}
body.oel-ds .oel-seite__inhalt .oel-seite-links+.oel-seite-links{margin-top:-8px;border-top:0;padding-top:0}

/* FAQ ([oel_faq2] mit Schema aus oelrichs-seo-2609.php und per Skript erzeugte .oel-faq-item): wie die FAQ der Startseite */
body.oel-ds .oel-seite .oel-faq2{margin:8px 0 32px;border-top:1px solid var(--oel-line,#d2d2d7)}
body.oel-ds .oel-seite :is(.oel-faq2 details,details.oel-faq-item){margin:0!important;padding:0;border:0;border-bottom:1px solid var(--oel-line-soft,#e8e8ed)}
body.oel-ds .oel-seite h2+details.oel-faq-item{border-top:1px solid var(--oel-line,#d2d2d7)}
body.oel-ds .oel-seite :is(.oel-faq2 summary,details.oel-faq-item>summary){display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 2px;list-style:none;cursor:pointer;font-size:clamp(17px,1.6vw,19px);line-height:1.32;font-weight:600;color:var(--oel-ink,#1d1d1f)}
body.oel-ds .oel-seite :is(.oel-faq2 summary,details.oel-faq-item>summary)::-webkit-details-marker{display:none}
body.oel-ds .oel-seite :is(.oel-faq2 summary,details.oel-faq-item>summary)::after{content:"";position:static;float:none;flex:none;width:22px;height:22px;transform:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/22px 22px no-repeat}
body.oel-ds .oel-seite :is(.oel-faq2 details[open] summary,details.oel-faq-item[open]>summary)::after{content:"";transform:rotate(45deg)}
body.oel-ds .oel-seite :is(.oel-faq2 details>div,details.oel-faq-item .oel-faq-a){padding:0 40px 22px 2px;font-size:17px;line-height:1.5;color:var(--oel-ink-2,#424245)}
@media (prefers-reduced-motion:no-preference){
  body.oel-ds .oel-seite :is(.oel-faq2 summary,details.oel-faq-item>summary)::after{transition:transform var(--oel-t-2,300ms) var(--oel-ease,ease)}
}

/* Yoast-FAQ-Block (.schema-faq, mit eigenem Schema) als ruhige Liste wie die übrigen FAQ */
body.oel-ds .oel-seite__inhalt .schema-faq{margin:8px 0 32px;padding:0;border-top:1px solid var(--oel-line,#d2d2d7)}
body.oel-ds .oel-seite__inhalt .schema-faq-section{margin:0;padding:18px 0 20px;border-bottom:1px solid var(--oel-line-soft,#e8e8ed)}
body.oel-ds .oel-seite__inhalt .schema-faq-question{display:block;margin:0 0 6px;font-size:clamp(17px,1.6vw,19px);line-height:1.32;font-weight:600;color:var(--oel-ink,#1d1d1f)}
body.oel-ds .oel-seite__inhalt .schema-faq-answer{margin:0;font-size:17px;line-height:1.5;color:var(--oel-ink-2,#424245)}

/* ---------- Eigene HTML-Abschnitte im Inhalt (/sandalen/: .sd-*) im Design-System – überstimmt das <style> im Beitrag, Inhalt unverändert ---------- */
body.oel-ds .oel-seite__inhalt :is(.sd-hero,.sd-marks,.sd-features,.sd-cta){margin:0;padding:0;background:none;color:inherit;font-family:inherit;text-align:left}
body.oel-ds .oel-seite__inhalt .sd-hero-eyebrow{display:block;margin:0 0 8px;font-size:17px;font-weight:600;line-height:1.3;letter-spacing:0;text-transform:none;color:var(--oel-ink-3,#6e6e73)}
body.oel-ds .oel-seite__inhalt .sd-hero h2{margin-top:0}
body.oel-ds .oel-seite__inhalt .sd-hero p{max-width:none;margin:0;font-size:inherit;line-height:inherit;color:var(--oel-ink,#1d1d1f)}
body.oel-ds .oel-seite__inhalt .sd-marks-inner,body.oel-ds .oel-seite__inhalt .sd-features-inner{max-width:none;margin:0;display:block}
body.oel-ds .oel-seite__inhalt .sd-marks h2,body.oel-ds .oel-seite__inhalt .sd-features h2,body.oel-ds .oel-seite__inhalt .sd-cta h2{text-align:left}
body.oel-ds .oel-seite__inhalt .sd-marks-sub{max-width:none;margin:0 0 20px;text-align:left;font-size:inherit;color:var(--oel-ink,#1d1d1f)}
body.oel-ds .oel-seite__inhalt .sd-marks-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0}
body.oel-ds .oel-seite__inhalt .sd-mark-card{display:flex;flex-direction:column;gap:6px;padding:24px;background:var(--oel-bg-soft,#f5f5f7);border:0;border-radius:var(--oel-radius-card,18px);box-shadow:none;text-align:left;transform:none;transition:none}
body.oel-ds .oel-seite__inhalt .sd-mark-card-name{margin:0;font-size:21px;font-weight:600;letter-spacing:-.01em;color:var(--oel-ink,#1d1d1f);font-family:inherit}
body.oel-ds .oel-seite__inhalt .sd-mark-card-desc{margin:0;font-size:15px;line-height:1.47;color:var(--oel-ink-2,#424245)}
body.oel-ds .oel-seite__inhalt .sd-mark-card-link{margin-top:auto;padding-top:8px;font-size:17px;font-weight:400;color:var(--oel-accent,#0066cc);text-decoration:none}
body.oel-ds .oel-seite__inhalt .sd-features p{margin:0 0 16px;font-size:inherit;line-height:inherit;color:var(--oel-ink,#1d1d1f)}
body.oel-ds .oel-seite__inhalt .sd-features ul{list-style:none;margin:8px 0 0;padding:0;border-top:1px solid var(--oel-line-soft,#e8e8ed)}
body.oel-ds .oel-seite__inhalt .sd-features li{display:block;margin:0;padding:14px 0;border-bottom:1px solid var(--oel-line-soft,#e8e8ed)}
body.oel-ds .oel-seite__inhalt .sd-features li::before{content:none}
body.oel-ds .oel-seite__inhalt .sd-features li strong{display:block;margin:0 0 2px;font-size:17px;font-weight:600;font-family:inherit;color:var(--oel-ink,#1d1d1f)}
body.oel-ds .oel-seite__inhalt .sd-features li span{font-size:15px;line-height:1.47;color:var(--oel-ink-2,#424245)}
body.oel-ds .oel-seite__inhalt .sd-cta p{max-width:none;margin:0 0 16px;font-size:inherit;line-height:inherit;color:var(--oel-ink,#1d1d1f)}
body.oel-ds .oel-seite__inhalt .sd-cta-btns{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:flex-start;align-items:center}
body.oel-ds .oel-seite__inhalt .sd-cta-btn{display:inline-flex;align-items:center;min-height:44px;padding:12px 22px;border:0;border-radius:var(--oel-radius-pill,980px);font-size:17px;font-weight:400;line-height:1.18;text-decoration:none}
body.oel-ds .oel-seite__inhalt .sd-cta-btn--primary{background:var(--oel-btn,#1d1d1f);color:#fff}
body.oel-ds .oel-seite__inhalt .sd-cta-btn--ghost{padding:0;min-height:0;background:none;color:var(--oel-accent,#0066cc)}
body.oel-ds .oel-seite__inhalt .sd-cta-btn--ghost::after{content:"\00a0\203A"}
@media (hover:hover){body.oel-ds .oel-seite__inhalt .sd-cta-btn--primary:hover{background:var(--oel-btn-hover,#000);color:#fff}body.oel-ds .oel-seite__inhalt .sd-cta-btn--ghost:hover{background:none;text-decoration:underline}}
@media (max-width:734px){body.oel-ds .oel-seite__inhalt .sd-marks-grid{grid-template-columns:1fr;gap:12px}}

/* Buttons im Inhalt (z. B. /bewerten/) dürfen umbrechen */
body.oel-ds .oel-seite__inhalt .oel-btn{white-space:normal;text-align:center}
body.oel-ds .oel-seite__inhalt a.oel-btn,body.oel-ds .oel-seite__inhalt a.oel-btn:is(:hover,:focus,:visited){color:#fff;text-decoration:none}
body.oel-ds .oel-seite__inhalt a.oel-btn.oel-btn--sek,body.oel-ds .oel-seite__inhalt a.oel-btn.oel-btn--sek:is(:hover,:focus,:visited){color:var(--oel-ink,#1d1d1f)}

/* ---------- Abschlussband (dunkel), auch auf /marken/ (Elementor, daher eigene Grundwerte) ---------- */
body.oel-ds .oel-seite-cta-wrap{box-sizing:border-box;width:min(var(--oel-max,1200px),calc(100% - 2 * var(--oel-gutter,20px)));margin:clamp(72px,9vw,112px) auto 0;padding:0;background:none}
body.oel-ds .oel-seite-cta{margin:0;padding:clamp(56px,7vw,96px) clamp(24px,5vw,72px);background:var(--oel-bg-dark,#1d1d1f);color:var(--oel-on-dark,#f5f5f7);border-radius:var(--oel-radius-l,28px);text-align:center;font-family:var(--oel-font,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif)}
body.oel-ds .oel-seite-cta h2{margin:0 0 14px;padding:0;font-family:inherit;font-size:var(--oel-h2,clamp(30px,4vw,48px));line-height:1.08;font-weight:700;letter-spacing:-.01em;color:var(--oel-on-dark,#f5f5f7);text-wrap:balance}
body.oel-ds .oel-seite-cta .oel-seite-cta__text{max-width:600px;margin:0 auto 32px;font-size:clamp(17px,1.6vw,21px);line-height:1.38;color:var(--oel-on-dark-2,#a1a1a6);text-wrap:pretty}
body.oel-ds .oel-seite-cta .oel-cta-band__actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 28px;margin:0}
body.oel-ds .oel-seite-cta .oel-cta-band__btn{display:inline-flex;align-items:center;min-height:44px;padding:12px 22px;border-radius:var(--oel-radius-pill,980px);background:#fff;color:var(--oel-ink,#1d1d1f);font-size:17px;font-weight:400;line-height:1.18;text-decoration:none}
body.oel-ds .oel-seite-cta .oel-cta-band__link{color:var(--oel-accent-on-dark,#2997ff);font-size:17px;line-height:1.18;text-decoration:none}
body.oel-ds .oel-seite-cta .oel-seite-cta__hinweis{max-width:560px;margin:36px auto 0;padding:22px 0 0;border-top:1px solid rgba(255,255,255,.16);font-size:14px;line-height:1.5;color:var(--oel-on-dark-2,#a1a1a6)}
body.oel-ds .oel-seite-cta .oel-seite-cta__hinweis em{font-style:normal}
body.oel-ds .oel-seite-cta .oel-seite-cta__hinweis a{color:var(--oel-accent-on-dark,#2997ff);text-decoration:none;white-space:nowrap}
@media (hover:hover){
  body.oel-ds .oel-seite-cta .oel-cta-band__btn:hover{background:var(--oel-fill,#e8e8ed)}
  body.oel-ds .oel-seite-cta :is(.oel-cta-band__link,.oel-seite-cta__hinweis a):hover{text-decoration:underline}
}
@media (prefers-reduced-motion:no-preference){
  body.oel-ds .oel-seite-cta .oel-cta-band__btn{transition:background-color var(--oel-t-1,150ms) var(--oel-ease,ease),transform var(--oel-t-1,150ms) var(--oel-ease,ease)}
  body.oel-ds .oel-seite-cta .oel-cta-band__btn:active{transform:scale(.97)}
}

/* ---------- Weiterlesen (Markup aus oelrichs-fixes.php, Gestaltung aus oelrichs-fuss.php) ---------- */
body.oel-ds .oel-seite__weiter{box-sizing:border-box;width:min(var(--oel-max,1200px),calc(100% - 2 * var(--oel-gutter,20px)));margin:0 auto}
body.oel-ds .oel-seite__weiter .oel-related-links{margin-top:clamp(48px,6vw,72px)}

/* ---------- Einblenden beim Scrollen: nur Bausteine weit unten im Inhalt (nie im ersten Bildschirm, nie das Foto) ---------- */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    body.oel-ds .oel-seite__inhalt>:is(figure.wp-block-table,.wp-block-columns,.oel-faq2,.oel-fk-grid,.oel-hinweis,.oel-seite-links):nth-child(n+7){animation:oel-seite-ein linear both;animation-timeline:view();animation-range:entry 0% cover 25%}
  }
  @keyframes oel-seite-ein{from{opacity:0;translate:0 24px}to{opacity:1;translate:none}}
}

/* ---------- Handy ---------- */
@media (max-width:734px){
  body.oel-ds .oel-seite__kopf{padding-top:24px}
  body.oel-ds .oel-seite__kopf .oel-breadcrumbs{font-size:13px}
  body.oel-ds .oel-seite__bild{aspect-ratio:4/3}
  body.oel-ds .oel-seite__dek{font-size:18px;line-height:1.4}
  body.oel-ds .oel-seite__titel-zusatz{margin-top:10px}
  body.oel-ds .oel-seite .oel-seite__inhalt{font-size:17px;line-height:1.55}
  body.oel-ds .oel-seite__aktionen{gap:12px 24px;margin-top:24px}
  body.oel-ds .oel-seite-cta{border-radius:var(--oel-radius-card,18px);padding:48px 24px}
  body.oel-ds .oel-seite-cta .oel-cta-band__actions{flex-direction:column;gap:18px}
  body.oel-ds .oel-seite :is(.oel-faq2 details>div,details.oel-faq-item .oel-faq-a){padding-right:8px;font-size:16px}
}