:root {
  --on-ink:#002d5e; --on-muted:var(--on-ink); --on-accent:#fab900;
  --on-accent-text:var(--on-ink); --on-on-accent:var(--on-ink); --on-paper:#fbf6f2;
  --on-section-tint:#f4e5d9; --on-soft:#f4e5d9; --on-line:#e3d4c7; --on-focus:#002d5e;
  --on-banner-bg:var(--on-ink); --on-banner-text:#fff; --on-photo-text:#fff;
  --on-font:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --on-heading:"Rajdhani","Arial Narrow","Roboto Condensed",system-ui,sans-serif;
  --on-shell:1400px; --on-gutter:clamp(22px,5.6vw,90px); --on-header:96px;
  --on-ease:cubic-bezier(.22,1,.36,1); --on-duration:320ms; --on-duration-fast:180ms;
  --on-control-height:52px; --on-radius:0px; --on-section-space:50px;
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:115px; scrollbar-gutter:stable; }
body { margin:0; background:var(--on-paper); color:var(--on-ink); font:var(--on-content-weight,400) var(--on-content-size,16px)/1.7 var(--on-font); text-transform:var(--on-content-transform,none); -webkit-font-smoothing:antialiased; }
body.on-modal-open { overflow:hidden; }
img,video { max-width:100%; height:auto; }
img { vertical-align:middle; }
figure { margin:0; }
a { color:inherit; text-decoration:none; }
button,input,textarea,select { font:inherit; }
button { color:inherit; cursor:pointer; }
button,a,input,select,textarea { touch-action:manipulation; }
button:disabled { opacity:.55; cursor:wait; }
h1,h2,h3,h4,h5,h6 { margin:0 0 .5em; font-family:var(--on-heading); font-weight:var(--on-heading-weight,700); line-height:1.1; letter-spacing:-.01em; text-transform:var(--on-heading-transform,uppercase); }
h1 { font-size:var(--on-heading-current-size,clamp(44px,5.5vw,84px)); }
h2 { font-size:var(--on-heading-current-size,clamp(34px,3.3vw,50px)); }
h3 { font-size:var(--on-heading-current-size,28px); }
h4 { font-size:var(--on-heading-current-size,1em); }
h5 { font-size:var(--on-heading-current-size,.83em); }
h6 { font-size:var(--on-heading-current-size,.67em); }
p { margin:0 0 1.2em; }
p:last-child { margin-bottom:0; }
strong { font-weight:700; }
::selection { background:var(--on-accent); color:var(--on-ink); }
:focus-visible { outline:2px solid var(--on-focus); outline-offset:3px; }
[hidden] { display:none!important; }
.screen-reader-text { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link:focus { clip:auto; position:fixed; width:auto; height:auto; top:12px; left:12px; background:var(--on-section-tint,#f4e5d9); color:var(--on-ink); padding:14px 22px; z-index:100000; }
.on-shell { width:min(calc(100% - var(--on-gutter)*2),var(--on-shell)); margin-inline:auto; }
.on-main { display:flow-root; margin:0; padding:0; min-height:0; }
.on-icon { display:inline-block; width:22px; height:22px; flex:0 0 auto; vertical-align:middle; fill:currentColor; }
.on-icon-label { display:inline-flex; align-items:center; gap:10px; }
.on-eyebrow { display:flex; align-items:center; gap:12px; margin:0 0 14px; font:600 11px/1.5 var(--on-font); letter-spacing:.13em; text-transform:uppercase; }
.on-eyebrow::before { content:""; width:24px; height:2px; background:var(--on-accent); flex:0 0 auto; }
/* Shared angular controls. Interaction changes colour or the contained icon,never card geometry. */
.on-icon-button { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:10px; border:0; border-radius:0; background:transparent; color:inherit; }
.on-icon-button[data-on-close] .on-icon { width:17px; height:17px; }
.on-icon-button:hover { background:var(--on-soft); color:var(--on-ink); }
.on-read-link,.on-text-link { display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:600; text-decoration:underline; text-decoration-color:transparent; text-underline-offset:5px; }
button.on-text-link { padding:0; background:none; border:0; }
.on-read-link:is(:hover,:focus-visible),.on-text-link:is(:hover,:focus-visible),.on-all-link:is(:hover,:focus-visible) { text-decoration-color:currentColor; }
.on-all-link { display:inline-flex; align-items:center; gap:12px; min-height:44px; font:600 11px/1.4 var(--on-font); text-transform:uppercase; letter-spacing:.025em; text-decoration:underline; text-decoration-color:transparent; text-underline-offset:5px; }
.on-all-link .on-icon { width:21px; height:21px; }
.on-empty { grid-column:1/-1; padding:36px; background:var(--on-soft); text-align:center; }
.on-empty .on-eyebrow { justify-content:center; }
.on-empty p { color:var(--on-ink); }
/* A single field definition for comments,profile,search and block forms. */
.ostfriesland-nordsee-site :where(input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]):not([type=color]):not([type=range]):not([type=file]),textarea,select) {
  display:block; width:100%; max-width:100%; min-width:0; min-height:var(--on-control-height);
  margin:0; padding:13px 16px; border:1px solid var(--on-line); border-radius:0;
  background:var(--on-soft); color:var(--on-ink); box-shadow:none; font:400 15px/1.6 var(--on-font);
  transition:border-color var(--on-duration-fast) var(--on-ease),background-color var(--on-duration-fast) var(--on-ease);
}
.ostfriesland-nordsee-site :where(input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]):not([type=color]):not([type=range]):not([type=file]),select) { height:var(--on-control-height); }
.ostfriesland-nordsee-site :where(input,textarea)::placeholder { color:var(--on-ink); opacity:1; }
.ostfriesland-nordsee-site :where(input:not([type=checkbox]):not([type=radio]):not([type=file]),textarea,select):focus { border-color:var(--on-ink); box-shadow:none; background:var(--on-paper); }
.ostfriesland-nordsee-site :where(input:not([type=checkbox]):not([type=radio]):not([type=file]),textarea,select):focus-visible { outline:none; }
.ostfriesland-nordsee-site textarea { resize:vertical; min-height:130px; }
.ostfriesland-nordsee-site select { appearance:auto; }
/* Header follows the white,unboxed masthead in the reference. */
.on-topbar { background:var(--on-section-tint,#f4e5d9); color:var(--on-ink); font-size:10px; --on-focus:var(--on-accent); }
.on-topbar-inner { min-height:28px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.on-topbar-inner>div,.on-topbar ul { display:flex; align-items:center; gap:20px; padding:0; margin:0; list-style:none; }
.on-socials { display:flex; align-items:center; gap:10px; }
.on-socials a { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid var(--on-line); }
.on-socials a:hover { background:var(--on-accent); color:var(--on-ink); border-color:var(--on-accent); }
.on-socials .on-icon { width:17px; height:17px; }
.on-topbar .on-socials a { width:24px; height:28px; border:0; }
.on-topbar .on-socials .on-icon { width:13px; height:13px; }
.on-header { position:sticky; top:0; z-index:50; background:var(--on-header-background,#fff); color:var(--on-header-text,var(--on-ink)); border-bottom:1px solid var(--on-header-border,var(--on-line)); }
.on-header-inner { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; min-height:var(--on-header); gap:24px; }
.on-header-menu { min-width:0; justify-self:start; }
.on-brand { display:inline-flex; flex-direction:column; align-items:flex-start; gap:7px; line-height:1; flex:0 0 auto; }
.on-wordmark { font-family:Arial,Helvetica,sans-serif; font-size:40px; font-style:italic; font-weight:900; letter-spacing:-2.5px; line-height:1; white-space:nowrap; }
.on-wordmark>span { color:var(--on-accent); }
.on-brand-tagline { max-width:250px; font:500 7.5px/1.4 var(--on-font); letter-spacing:.04em; text-transform:uppercase; }
.on-brand-image { display:block; max-width:230px; max-height:56px; width:auto; object-fit:contain; }
.on-header-brand { min-width:0; max-width:100%; justify-self:center; align-items:center; text-align:center; }
.on-brand-picture { display:block; width:var(--on-logo-w); max-width:100%; height:var(--on-logo-h); flex-shrink:0; }
.on-brand-picture>.on-brand-image { display:block; width:100%; height:100%; max-width:none; max-height:none; object-fit:contain; }
.on-header-brand .on-brand-tagline { white-space:nowrap; min-height:11px; line-height:11px; }
.on-header-brand .on-wordmark { display:block; height:40px; line-height:40px; }
/* A single accessible drawer menu serves every viewport. */
.on-menu { display:block; margin:0; padding:0; list-style:none; }
.on-menu li { position:relative; min-width:0; }
.on-menu-row { display:flex; align-items:stretch; min-width:0; }
.on-menu-row>a,.on-submenu-toggle { position:relative; display:flex; align-items:center; gap:12px; width:100%; min-width:0; padding:14px 16px; font:var(--on-navigation-weight,700) var(--on-navigation-size,18px)/1.3 var(--on-navigation-font,'Rajdhani','Arial Narrow','Roboto Condensed',system-ui,sans-serif); text-transform:var(--on-navigation-transform,uppercase); letter-spacing:.015em; text-align:left; color:inherit; }
.on-submenu-toggle { justify-content:space-between; border:0; border-radius:0; background:transparent; cursor:pointer; }
.on-menu-label { display:flex; align-items:center; gap:12px; min-width:0; overflow-wrap:anywhere; }
.on-menu-label>span:last-child { min-width:0; }
.on-submenu-indicator,.on-menu-link-indicator { display:grid; place-items:center; color:inherit; transition:inherit; }
.on-submenu-indicator { flex:0 0 44px; width:44px; height:44px; background:var(--on-soft); }
.on-menu-link-indicator { flex:0 0 18px; width:18px; height:18px; }
.on-submenu-indicator .on-icon,.on-menu-link-indicator .on-icon { display:block; width:18px; height:18px; transform:rotate(0deg); transform-origin:50% 50%; transform-box:fill-box; transition:inherit; }
.on-submenu-toggle[aria-expanded=true] .on-submenu-indicator .on-icon { transform:rotate(180deg); }
.on-header-actions { display:flex; align-items:center; justify-self:end; gap:10px; min-width:0; }
.on-account-link { appearance:none; border:0; border-radius:0; cursor:pointer; position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:46px; padding:7px 16px; background:var(--on-account-background,var(--on-header-button,var(--on-accent))); color:var(--on-header-button-text,var(--on-ink)); text-transform:var(--on-button-transform,uppercase); font:var(--on-button-weight,700) var(--on-button-size,16px)/1.3 var(--on-button-font,'Rajdhani','Arial Narrow','Roboto Condensed',system-ui,sans-serif); }
.on-account-link:hover { background:var(--on-account-hover-background,var(--on-header-button-hover,var(--on-ink))); color:var(--on-header-button-hover-text,#fff); }
.on-account-link .on-icon { width:20px; height:20px; }
.on-account-symbol { display:inline-flex; align-items:center; justify-content:center; flex:0 0 var(--on-header-avatar,30px); width:var(--on-header-avatar,30px); height:var(--on-header-avatar,30px); box-sizing:border-box; border-radius:50%; background:transparent; }
.on-account-symbol>.on-icon { width:18px; height:18px; }
.on-account-link.is-guest { --on-account-background:transparent; --on-account-hover-background:transparent; color:var(--on-header-text,var(--on-ink)); }
.on-account-link.is-guest:hover { color:var(--on-header-text,var(--on-ink)); }
.on-account-link.is-guest>.on-account-symbol { border:2px solid var(--on-accent); }
.on-menu-button { --on-control-py:10px; --on-control-px:12px; --on-control-gap:10px; display:inline-flex; width:auto; min-width:44px; min-height:44px; gap:var(--on-control-gap); padding-block:var(--on-control-py); padding-inline:var(--on-control-start,var(--on-control-px)) var(--on-control-end,var(--on-control-px)); font:var(--on-button-weight,600) var(--on-button-size,14px)/1.4 var(--on-button-font,'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif); text-transform:var(--on-button-transform,none); }
.on-menu-button .on-icon { flex:0 0 22px; }
/* Full-bleed photographic lead,as in the supplied sports reference. */
.on-hero { position:relative; display:grid; min-height:500px; background:var(--on-ink); color:var(--on-photo-text); overflow:hidden; --on-focus:var(--on-accent); }
.on-hero-slide { grid-area:1/1; position:relative; min-width:0; display:grid; visibility:hidden; pointer-events:none; }
.on-hero-slide.is-active { visibility:visible; pointer-events:auto; }
.on-hero.is-enhanced { touch-action:pan-y pinch-zoom; }
.on-hero.is-enhanced .on-hero-slide { visibility:hidden; pointer-events:none; transform:translate3d(100%,0,0); transition:transform 550ms var(--on-ease); user-select:none; }
.on-hero.is-enhanced .on-hero-slide.is-active,.on-hero.is-enhanced .on-hero-slide.is-incoming { visibility:visible; }
.on-hero.is-enhanced .on-hero-slide.is-active { pointer-events:auto; transform:translate3d(0,0,0); }
.on-hero.is-moving .on-hero-slide { pointer-events:none; }
.on-hero-visual,.on-hero-visual::after { position:absolute; inset:0; }
.on-hero-visual img { width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.on-hero-visual::after { content:""; background:linear-gradient(90deg,rgba(14,27,42,.86) 0%,rgba(14,27,42,.66) 42%,rgba(14,27,42,.10) 84%),linear-gradient(0deg,rgba(14,27,42,.70),transparent 48%); }
.on-hero-content { position:relative; z-index:1; display:flex; align-items:center; padding-block:44px 90px; }
.on-hero-copy { max-width:790px; }
.on-hero-meta { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:22px; }
.on-hero-meta .on-hero-category { margin-bottom:0; }
.on-hero-meta .on-card-media-label { position:static; }
.on-hero-category { display:inline-flex; padding:5px 9px; margin-bottom:22px; background:var(--on-accent); color:var(--on-ink); font:600 11px/1.4 var(--on-font); text-transform:uppercase; letter-spacing:.09em; }
.on-hero-title { font-size:var(--on-heading-current-size,clamp(48px,5vw,74px)); line-height:1.02; margin:0 0 18px; letter-spacing:-.02em; }
.on-hero-title-long { font-size:var(--on-heading-current-size,clamp(38px,4.2vw,62px)); }
.on-hero-copy p { max-width:600px; font-size:var(--on-content-size,16px); line-height:1.65; margin-bottom:20px; }
.on-hero-ratings { --on-star-size:18px; --on-star-icon-size:16px; --on-stars-color:var(--on-accent,#fab900); display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 20px; }
.on-hero-ratings .on-rating-summary { padding:8px 12px; background:var(--on-ink,#002d5e); color:var(--on-on-dark,#fff); font-size:13px; gap:8px; }
.on-hero-ratings .on-rating-display { display:block; }
.on-hero .on-button {
  --on-btn-hover-bg:#fff;
  --on-btn-hover-text:var(--on-ink);
  --on-btn-hover-border:#fff; }
.on-hero-bottom { position:absolute; inset:auto 0 26px; z-index:2; display:flex; align-items:center; justify-content:flex-end; min-height:44px; }
.on-hero-controls,.on-hero-arrows,.on-hero-counter { display:flex; align-items:center; }
.on-hero-controls { gap:22px; flex:0 1 auto; min-width:0; max-width:100%; }
.on-hero-counter { gap:8px; font:var(--on-heading-weight,700) 17px/1 var(--on-heading); flex:0 0 auto; white-space:nowrap; }
.on-counter-separator { opacity:.5; }
.on-hero-index { display:flex; align-items:center; gap:5px; min-width:0; max-width:340px; overflow-x:auto; scrollbar-width:thin; scrollbar-color:var(--on-accent) transparent; }
.on-hero-index button { position:relative; flex:0 0 38px; width:38px; height:44px; padding:0; background:none; border:0; }
.on-hero-index button::after { content:""; position:absolute; left:0; right:0; top:21px; height:2px; background:var(--on-line); transition:inherit; }
.on-hero-index button[aria-pressed=true]::after { background:var(--on-accent); }
.on-hero-arrows { gap:8px; flex:0 0 auto; }
.on-hero-arrows button { display:grid; place-items:center; flex:0 0 44px; width:44px; min-width:44px; height:44px; aspect-ratio:1; padding:0; background:transparent; color:var(--on-photo-text); border:1px solid rgba(255,255,255,.45); }
.on-hero-arrows .on-icon { width:22px; height:22px; max-width:none; }

.on-hero-arrows button:hover { background:var(--on-accent); border-color:var(--on-accent); color:var(--on-ink); }
.on-brand-strip { background:var(--on-accent); color:var(--on-ink); }
.on-brand-strip>.on-shell { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:76px; padding-block:14px; }
.on-brand-strip span { font:var(--on-heading-weight,700) clamp(24px,3vw,42px)/1.1 var(--on-heading); text-transform:uppercase; }
.on-brand-strip .on-icon { width:32px; height:32px; }
/* Flat editorial cards: original photography,typography,metadata,no rounded box. */
.on-section { padding-block:var(--on-section-start,var(--on-section-space)) var(--on-section-end,var(--on-section-space)); }
/* Homepage rhythm: paint the whole section, share a gap on identical surfaces.
   Edge-to-edge topic strips already carry their spacing in the heading. */
.on-home-sections { display:flow-root; --on-section-space:40px; --on-section-start:var(--on-section-space); --on-section-end:var(--on-section-space); }
.on-home-sections>[data-on-home-surface] { margin-block:0; background:var(--on-home-surface,var(--on-paper)); }
.on-home-sections>[data-on-home-surface="soft"] { --on-home-surface:var(--on-soft); }
.on-home-sections>[data-on-home-surface="tint"] { --on-home-surface:var(--on-section-tint); }
.on-home-sections>[data-on-home-continued] { --on-section-start:0px; }
.on-home-sections>[data-on-home-surface="edge"] { --on-section-start:0px; --on-section-end:0px; }
.on-directory-section { --on-section-start:14px; }
.on-section-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:28px; }
.on-section-heading h2 { display:inline-flex; align-items:center; justify-content:center; max-width:100%; margin:0; padding:12px 28px 12px 20px; font-size:var(--on-heading-current-size,40px); line-height:1.1; text-align:center; background:var(--on-banner-bg); color:var(--on-banner-text); clip-path:polygon(0 0,100% 0,calc(100% - 16px) 100%,0 100%); }
.on-section-heading>div { min-width:0; }

.on-section-heading .on-heading-text { min-width:0; }

.on-section-heading .on-heading-text>span { color:var(--on-accent); }
.on-section-heading .on-eyebrow { margin-bottom:10px; }
.on-section-heading>.on-all-link { align-self:flex-end; }
/* Archive-card skin only; compact Weiterlesen cards use the shared related-content component. */
.on-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; align-items:stretch; }
.on-card:where(:not(.on-card-compact)) { display:flex; flex-direction:column; min-width:0; background:var(--on-paper); color:var(--on-ink); border:1px solid var(--on-line); border-radius:0; transition:border-color var(--on-duration) var(--on-ease); }
.on-card:where(:not(.on-card-compact)):hover,.on-card:where(:not(.on-card-compact)):focus-within { border-color:var(--on-ink); }
.on-card-media { position:relative; min-width:0; background:var(--on-soft); }
.on-card-visual { display:block; aspect-ratio:16/10; height:auto; position:relative; overflow:hidden; }
.on-card-visual img { width:100%; height:100%; object-fit:cover; object-position:center top; transform:scale(1.001); transition:inherit; }
.on-card:hover .on-card-visual img,.on-card:focus-within .on-card-visual img { transform:scale(1.035); }
.on-card-category { display:inline-flex; align-items:center; gap:6px; max-width:calc(100% - 28px); min-height:28px; padding:6px 10px; font:600 10px/1.4 var(--on-font); letter-spacing:.075em; text-transform:uppercase; background:var(--on-accent); color:var(--on-ink); overflow-wrap:anywhere; }
.on-card-category>.on-icon { width:14px; height:14px; flex:0 0 14px; }
.on-card-media>.on-card-category { position:absolute; top:14px; left:14px; }
:where(.on-card:not(.on-card-compact)) .on-card-category:hover { background:var(--on-section-tint,#f4e5d9); color:var(--on-ink); }
.on-card-body { display:flex; flex-direction:column; flex:1; min-width:0; padding:22px 22px 0; }
.on-card-kicker { display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; min-height:20px; margin-bottom:10px; color:var(--on-ink); font:400 11px/1.5 var(--on-font); }
.on-card-kicker>.on-icon { width:17px; height:17px; color:var(--on-ink); }
.on-card-time { font:400 11px/1.5 var(--on-font); color:var(--on-ink); }
.on-card-readtime { display:inline-flex; align-items:center; gap:5px; margin-left:auto; }
.on-card-readtime .on-icon { width:13px; height:13px; }
.on-card .on-content-badges { --on-badge-font-size:14px; margin:0; }
.on-card .on-content-badges:not(:last-child) { margin-bottom:16px; }
.on-card-title { font-size:var(--on-heading-current-size,29px); line-height:1.08; margin:0 0 12px; }
.on-card-title a { text-decoration:underline; text-decoration-color:transparent; text-decoration-thickness:2px; text-underline-offset:4px; }
.on-card-title a:hover,.on-card-title a:focus-visible { text-decoration-color:var(--on-accent); }
.on-card-excerpt { color:var(--on-ink); font-size:var(--on-content-size,var(--on-card-copy-size,14px)); line-height:1.75; margin:0 0 20px; }
@media(max-width:599px) { .on-card:not(.on-link-result,.on-card-on_manufacturer,.on-card-on_link) .on-card-excerpt { display:none; } }
.on-card-bottom { display:flex; align-items:center; gap:12px; min-height:57px; padding-block:10px; margin-top:auto; border-top:1px solid var(--on-line); }
.on-card-comments { display:inline-flex; align-items:center; gap:7px; min-height:36px; min-width:36px; color:var(--on-ink); font:400 11px/1.5 var(--on-font); }
.on-card-comments:hover { color:var(--on-ink); }
.on-card-comments .on-icon { width:16px; height:16px; }
.on-card-link { display:inline-flex; align-items:center; justify-content:flex-end; gap:12px; margin-left:auto; min-width:0; min-height:36px; font:var(--on-heading-weight,700) 16px/1.2 var(--on-heading); letter-spacing:.01em; text-transform:var(--on-heading-transform,uppercase); }
.on-card-link>span:first-child { min-width:0; overflow-wrap:anywhere; }
.on-card-link-icon { display:grid; place-items:center; width:34px; height:34px; flex:0 0 auto; background:var(--on-soft); color:var(--on-ink); transition:inherit; }
.on-card-link-icon .on-icon { width:19px; height:19px; }
.on-card-link:hover .on-card-link-icon,.on-card-link:focus-visible .on-card-link-icon { background:var(--on-accent); color:var(--on-ink); }
/* Review cards keep the common grid, buttons and featured-image selection. */
/* Review rating: one compact, aligned component; accent stars are not body text. */
.on-card-rating { --on-star-size:18px; --on-star-icon-size:18px; --on-stars-color:var(--on-accent,#fab900); position:absolute; inset:auto 12px 12px auto; z-index:2; pointer-events:auto; display:inline-flex; align-items:center; justify-content:center; gap:12px; max-width:calc(100% - 24px); margin:0; padding:12px 14px; border:1px solid color-mix(in srgb,var(--on-on-dark,#fff) 20%,transparent); background:var(--on-ink,#002d5e); color:var(--on-on-dark,#fff); font:500 14px/1 var(--on-font); }
.on-card-rating .on-rating-display { display:block; }
.on-card-rating-value,.on-card-rating-source { display:inline-flex; align-items:center; justify-content:center; min-height:20px; margin:0; line-height:1; white-space:nowrap; }
.on-card-rating-value { gap:4px; }
.on-card-rating-value strong { font-size:16px; font-weight:700; line-height:1; }
.on-card-rating-source { padding-left:12px; border-left:1px solid color-mix(in srgb,var(--on-accent,#fab900) 55%,transparent); }
.on-card-rating .on-rating-display-base { opacity:.28; }
/* Event information is grouped by meaning,never mixed with the post publication date. */
/* Recipe cards extend the common card; no independent archive template or assets. */
.on-card-on_recipe { --on-card-copy-size:14px; }
.on-card-on_recipe .on-card-excerpt { display:none; }
.on-card-recipe-meta { display:flex; align-items:center; flex-wrap:wrap; gap:10px 18px; list-style:none; margin:0 0 16px; padding:0; color:var(--on-ink); font:400 var(--on-card-copy-size)/1.6 var(--on-font); }
.on-card-recipe-meta li { display:flex; align-items:center; gap:8px; min-width:0; max-width:100%; overflow-wrap:anywhere; }
.on-card-recipe-meta .on-icon { width:18px; height:18px; flex:0 0 18px; }
.on-card-recipe-nutrition { container-type:inline-size; min-width:0; margin:0 0 20px; padding:16px; background:var(--on-soft); color:var(--on-ink); font:400 var(--on-card-copy-size)/1.6 var(--on-font); }
.on-card-recipe-nutrition>p { margin:0 0 14px; font:inherit; font-weight:600; }
.on-card-recipe-nutrition dl { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,110px),1fr)); gap:14px 18px; margin:0; }
.on-card-recipe-nutrition dl>div { min-width:0; }
.on-card-recipe-nutrition dt { margin:0 0 2px; overflow-wrap:anywhere; }
.on-card-recipe-nutrition dd { margin:0; font-weight:600; overflow-wrap:anywhere; }
@container (max-width:365px) {
  .on-card-recipe-nutrition dl { grid-template-columns:minmax(0,1fr); gap:10px; }
  .on-card-recipe-nutrition dl>div { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
  .on-card-recipe-nutrition dt { margin:0; }
  .on-card-recipe-nutrition dd { flex-shrink:0; }
}

/* Shared calendar cards for event lists and the existing homepage carousel. */
.on-event-card { height:100%; }
.on-event-card-link { display:flex; align-items:flex-start; gap:18px; padding:24px; min-width:0; height:100%; color:inherit; text-decoration:none; }
.on-event-card-copy { display:flex; flex-direction:column; gap:10px; min-width:0; flex:1; }
.on-event-card-copy .on-card-title { margin:0; font-size:var(--on-heading-current-size,25px); line-height:1.2; }
.on-event-card-copy .on-card-location { margin:0; }
.on-event-card-kind { font:600 11px/1.5 var(--on-font); text-transform:uppercase; letter-spacing:.045em; }
.on-event-card-time { font:500 12px/1.5 var(--on-font); }
.on-event-card-link:focus-visible { outline:2px solid var(--on-ink); outline-offset:-3px; }
.on-calendar-stamp { position:relative; display:flex; flex-direction:column; align-items:center; flex:0 0 66px; width:66px; box-sizing:border-box; margin-top:5px; border:1px solid var(--on-line); border-radius:0; background:var(--on-paper); color:var(--on-ink); text-align:center; font-family:var(--on-font); }
.on-calendar-stamp::before,.on-calendar-stamp::after { content:""; position:absolute; top:-5px; width:3px; height:10px; background:var(--on-ink); }
.on-calendar-stamp::before { left:13px; }.on-calendar-stamp::after { right:13px; }
.on-calendar-stamp-month { width:100%; padding:7px 3px 4px; background:var(--on-accent); color:var(--on-on-accent,var(--on-ink)); font-size:11px; font-weight:600; line-height:1.3; }
.on-calendar-stamp-day { padding-top:7px; font:700 28px/1 var(--on-heading); }
.on-calendar-stamp-year { padding:4px 0 7px; font-size:10px; line-height:1.2; }
@media(max-width:479px){
 .on-event-card-link { display:grid; grid-template-columns:66px minmax(0,1fr); align-content:start; column-gap:14px; row-gap:10px; padding:18px; }
 .on-event-card-link>.on-calendar-stamp { grid-column:1; grid-row:1/3; }
 .on-event-card-copy { display:contents; }
 .on-event-card-kind { grid-column:2; grid-row:1; align-self:end; }
 .on-event-card-time { grid-column:2; grid-row:2; }
 .on-event-card-copy .on-card-title { grid-column:1/-1; grid-row:3; font-size:var(--on-heading-current-size,23px); }
 .on-event-card-copy .on-card-location { grid-column:1/-1; grid-row:4; }
 .on-event-card-copy .on-card-status { grid-column:1/-1; grid-row:5; }
}
.on-card-event-time { gap:8px; font:var(--on-heading-weight,600) 18px/1.2 var(--on-heading); color:var(--on-ink); }
.on-card-event-time time { display:flex; align-items:center; flex-wrap:wrap; gap:5px 10px; }
.on-card-event-time time>span { color:var(--on-ink); font:400 11px/1.5 var(--on-font); white-space:nowrap; }
.on-card-location { display:flex; align-items:flex-start; gap:7px; margin-bottom:14px; color:var(--on-ink); font:400 13px/1.5 var(--on-font); overflow-wrap:anywhere; }
.on-card-location .on-icon { width:16px; height:16px; margin-top:1px; }
.on-card-distances { display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:0 0 19px; list-style:none; }
.on-card-distances li { max-width:100%; padding:5px 8px; background:var(--on-soft); color:var(--on-ink); font:500 10px/1.4 var(--on-font); overflow-wrap:anywhere; }
.on-card-status { align-self:flex-start; padding:4px 8px; margin:0 0 10px; font:600 11px/1.4 var(--on-font); }
.on-card-status-cancelled { background:#fff0ed; color:var(--on-ink); }
.on-card-status-postponed { background:#fff6dd; color:var(--on-ink); }
.on-archive-grid .on-card-on_event .on-card-excerpt { display:none; }
.on-section-soft { background:var(--on-soft); }
.on-section-band { background:var(--on-section-tint); }
.on-section-dark { background:var(--on-section-tint,#f4e5d9); color:var(--on-ink); --on-focus:var(--on-accent); }
.on-section-dark .on-card:where(:not(.on-card-compact)) { --on-line:#e3d4c7; background:transparent; color:var(--on-ink); }
.on-section-dark .on-card:where(:not(.on-card-compact)):hover,.on-section-dark .on-card:where(:not(.on-card-compact)):focus-within { border-color:var(--on-accent); }
.on-section-dark .on-card-excerpt,.on-section-dark .on-card-time,.on-section-dark .on-card-kicker,.on-section-dark .on-card-comments { color:var(--on-ink); }
.on-section-dark .on-card-comments:hover { color:var(--on-ink); }
.on-section-dark .on-card-link-icon { background:var(--on-paper); color:var(--on-ink); }
.on-section-dark .on-card-link:hover .on-card-link-icon,.on-section-dark .on-card-link:focus-visible .on-card-link-icon { background:var(--on-accent); color:var(--on-ink); }
.on-section-dark :where(.on-card:not(.on-card-compact)) .on-card-category:hover { background:#fff; color:var(--on-ink); }

/* Start-page magazine carousel; archive card grids remain unchanged. */
.on-post-carousel { --on-post-gap:24px; --on-post-basis:calc((100% - (var(--on-carousel-desktop,3) - 1) * var(--on-post-gap))/var(--on-carousel-desktop,3)); min-width:0; }

.on-post-carousel-frame { position:relative; min-width:0; padding-inline:var(--on-carousel-gutter,0px); }

.on-post-viewport { display:flex; align-items:stretch; gap:var(--on-post-gap); overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; scroll-behavior:auto; cursor:grab; }

.on-post-viewport::-webkit-scrollbar { display:none; }

.on-post-viewport.is-dragging { cursor:grabbing; scroll-snap-type:none; user-select:none; }

.on-post-slide { position:relative; flex:0 0 var(--on-post-basis); min-width:0; display:flex; scroll-snap-align:start; }

.on-post-slide>:is(.on-card,.on-partner-card) { width:100%; min-width:0; }

.on-post-arrow { position:absolute; z-index:3; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid var(--on-line); background:var(--on-paper); color:var(--on-ink); cursor:pointer; }

.on-post-arrow .on-icon { width:22px; height:22px; }

.on-post-prev { left:var(--on-carousel-arrow-left,-22px); }

.on-post-next { right:var(--on-carousel-arrow-right,-22px); }

.on-post-arrow[aria-disabled=true] { cursor:default; color:color-mix(in srgb,var(--on-ink) 35%,var(--on-paper)); }

.on-post-arrow:not([aria-disabled=true]):hover { background:var(--on-accent); border-color:var(--on-accent); }

.on-post-dots { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:3px; margin:15px auto 0; }

.on-post-dot { display:grid; place-items:center; width:28px; min-width:28px; height:36px; padding:0; border:0; background:transparent; color:var(--on-ink); cursor:pointer; }

.on-post-dot::after { content:""; width:7px; height:7px; border-radius:10px; background:currentColor; opacity:.28; transition:inherit; }

.on-post-dot[aria-pressed=true]::after { width:17px; opacity:1; background:var(--on-accent); }

.on-post-dot:hover::after { opacity:1; }

@media (min-width:820px) and (max-width:1023px) { .on-post-carousel { --on-post-basis:calc((100% - (var(--on-carousel-tablet,2) - 1) * var(--on-post-gap))/var(--on-carousel-tablet,2)); }
 }

@media (max-width:819px) {
  .on-post-carousel { --on-post-gap:16px; --on-post-basis:var(--on-carousel-narrow,calc(100% - 42px)); }

  .on-post-slide:only-child { flex-basis:100%; }
  .on-post-arrow { width:var(--on-carousel-arrow-size,36px); height:var(--on-carousel-arrow-size,36px); }
  .on-post-prev { left:var(--on-carousel-arrow-left,-18px); }

  .on-post-next { right:var(--on-carousel-arrow-right,-18px); }

  .on-post-dots { margin-top:12px; }

}


/* Mission: overlapping photos follow the reference,grid sizing replaces tall fixed minimums. */
.on-mission { background:var(--on-paper); }
.on-mission.on-section-band { background:var(--on-section-tint); }
.on-mission.on-section-band .on-mission-image-secondary { border-color:var(--on-section-tint); }
.on-mission-inner { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(28px,5vw,80px); align-items:center; }
.on-mission-copy h2 { font-size:var(--on-heading-current-size,clamp(36px,3.6vw,55px)); max-width:540px; margin-bottom:20px; }
.on-mission-copy>p { max-width:540px; font-size:var(--on-content-size,15px); line-height:1.85; color:var(--on-ink); }
.on-mission-values { display:grid; gap:13px; margin:20px 0 24px; }
.on-mission-values>div { display:flex; align-items:center; gap:14px; font-size:13px; }
.on-mission-values .on-icon { box-sizing:border-box; width:40px; height:40px; flex:0 0 40px; padding:8px; border-radius:4px; background:var(--on-accent,#fab900); color:var(--on-ink,#002d5e); }
.on-mission-images { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-template-rows:repeat(8,minmax(0,1fr)); aspect-ratio:1.18; min-width:0; }
.on-mission-image-main { grid-column:4/13; grid-row:1/8; overflow:hidden; }
.on-mission-image-secondary { grid-column:1/8; grid-row:4/9; z-index:1; border:8px solid var(--on-paper); border-left:0; border-bottom:0; overflow:hidden; }
.on-mission-images img { width:100%; height:100%; object-fit:cover; }
.on-topics-section { margin:0; }
.on-topics-heading { position:relative; overflow:hidden; background:var(--on-accent); color:var(--on-ink); }
.on-topics-heading>.on-shell { position:relative; padding-block:27px; }
.on-topics-heading h2 { position:relative; display:inline-block; margin:0; background:var(--on-banner-bg); color:var(--on-banner-text); padding:12px 30px 12px 22px; text-align:center; clip-path:polygon(0 0,100% 0,calc(100% - 16px) 100%,0 100%); font-size:var(--on-heading-current-size,40px); }
.on-topics-heading h2>span { color:var(--on-accent); }
.on-topics-ghost { position:absolute; inset:auto 0 0 auto; width:100%; font:var(--on-heading-weight,700) var(--on-background-size,clamp(100px,12vw,200px))/1 var(--on-heading); color:var(--on-ink); opacity:.08; pointer-events:none; user-select:none; white-space:normal; overflow-wrap:anywhere; text-align:right; }
.on-topic-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; }
.on-topic { position:relative; display:block; min-width:0; aspect-ratio:1; background:var(--on-ink); overflow:hidden; color:var(--on-photo-text); --on-focus:var(--on-accent); }
.on-topic>img { width:100%; height:100%; object-fit:cover; transition:inherit; }
.on-topic::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(14,27,42,.90),rgba(14,27,42,.30) 45%,rgba(14,27,42,.06) 85%); }
.on-topic:hover>img,.on-topic:focus-visible>img { transform:scale(1.045); }
.on-topic-copy { position:absolute; z-index:1; left:28px; right:22px; bottom:28px; display:grid; gap:10px; }
.on-topic-copy>strong { font:var(--on-heading-weight,700) clamp(24px,2vw,33px)/1.08 var(--on-heading); text-transform:var(--on-heading-transform,uppercase); }
.on-topic-copy>span { font-size:12px; line-height:1.6; }
.on-topic-arrow { position:absolute; z-index:1; top:20px; right:20px; display:grid; place-items:center; width:38px; height:38px; border:1px solid rgba(255,255,255,.6); transition:inherit; }
.on-topic:hover .on-topic-arrow { color:var(--on-ink); border-color:var(--on-accent); background:var(--on-accent); }
.on-topic-arrow .on-icon { width:18px; height:18px; }
.on-content-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); row-gap:24px; }
.on-content-stats>.on-content-stat { position:relative; display:grid; place-items:center; min-width:0; min-height:95px; padding-inline:16px; border-right:1px solid var(--on-line); }
.on-content-stats>.on-content-stat:nth-child(4n),.on-content-stats>.on-content-stat:last-child { border-right:0; }
.on-content-stats[data-on-stats-count="1"] { grid-template-columns:minmax(0,1fr); }
.on-content-stats[data-on-stats-count="2"] { grid-template-columns:repeat(2,minmax(0,1fr)); }
.on-content-stats[data-on-stats-count="3"] { grid-template-columns:repeat(3,minmax(0,1fr)); }
.on-content-stats strong { opacity:.12; font:var(--on-heading-weight,700) 104px/1 var(--on-heading); color:var(--on-ink); }
.on-content-stats>.on-content-stat>span { position:absolute; inset:0; display:grid; place-items:center; padding:8px 16px; text-align:center; overflow-wrap:anywhere; font:var(--on-heading-weight,700) 22px/1.2 var(--on-heading); text-transform:uppercase; }
.on-footer { background:var(--on-footer-background,var(--on-ink)); color:var(--on-footer-text,#fff); margin:0; padding:40px 0 0; --on-focus:var(--on-footer-link-hover,var(--on-accent)); }
.on-footer-main { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:34px; padding-bottom:26px; }
.on-footer .on-wordmark { font-size:36px; }
.on-footer-tagline { margin-top:13px; color:inherit; font-size:12px; }
.on-footer nav,.on-footer nav ul { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px 24px; margin:0; padding:0; list-style:none; }
.on-footer nav a,.on-footer nav .on-consent-link,.on-footer nav .on-footer-control { display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:5px 0; font:var(--on-navigation-weight,600) var(--on-navigation-size,16px)/1.5 var(--on-navigation-font,'Rajdhani','Arial Narrow','Roboto Condensed',system-ui,sans-serif); text-transform:var(--on-navigation-transform,uppercase); }
.on-footer nav a:hover,.on-footer nav .on-footer-control:hover { text-decoration:underline; text-underline-offset:4px; }
.on-footer-bottom { display:flex; align-items:center; gap:24px; padding-block:18px; border-top:1px solid color-mix(in srgb,currentColor 25%,transparent); color:inherit; font-size:10px; }
.on-back-top { display:inline-flex; align-items:center; gap:10px; margin-left:auto; font-size:11px; }
.on-back-top .on-icon { width:15px; height:15px; }
/* Archives and standard pages. Search stays in the header only. */
.on-archive-header { position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; min-height:270px; background:var(--on-banner-bg); color:var(--on-banner-text); padding-block:48px; text-align:center; --on-focus:var(--on-accent); }
.on-archive-header>.on-shell { position:relative; z-index:1; }
.on-archive-header .on-eyebrow { justify-content:var(--on-banner-eyebrow-align,center); }
.on-archive-header h1 { max-width:1120px; margin:0 auto 18px; font-size:var(--on-heading-current-size,clamp(36px,5.2vw,76px)); line-height:1.06; color:var(--on-accent); }
.on-archive-header p,.on-archive-description { max-width:780px; margin:0 auto; color:var(--on-banner-text); font:var(--on-content-weight,400) var(--on-content-size,var(--on-banner-copy-size,clamp(16px,1.5vw,21px)))/1.65 var(--on-font); overflow-wrap:anywhere; }
.on-archive-ghost { position:absolute; z-index:0; left:50%; top:50%; width:min(calc(100% - var(--on-gutter)*2),var(--on-shell)); transform:translate(-50%,-50%); font:var(--on-heading-weight,700) var(--on-background-size,clamp(110px,18vw,290px))/1 var(--on-heading); opacity:.045; text-transform:uppercase; text-align:center; white-space:normal; overflow-wrap:anywhere; pointer-events:none; user-select:none; }
/* One bounded, decorative line after measuring; CSS alone remains horizontally safe. */
:is(.on-archive-ghost,.on-topics-ghost,.on-auth-ghost)[data-on-background-fitted] { white-space:nowrap; }
.on-archive-description a { color:var(--on-banner-text); text-decoration:underline; text-underline-offset:3px; }
.on-search-heading-actions { display:grid; justify-items:center; gap:16px; margin-top:22px; }
.on-search-heading-actions .on-search-total { font-size:14px; margin:0; }

/* All frontend page navigation shares one size, spacing and centred alignment. */
.on-archive-bottom { display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:32px; }
.on-archive-bottom p { margin:0; font-size:13px; color:var(--on-ink); text-align:center; }
.on-pagination,.navigation.pagination,.navigation.comments-pagination,.page-links,.on-comments-pagination {
  --on-page-size:48px; --on-page-gap:10px;
  display:flex; align-items:center; justify-content:center; gap:var(--on-page-gap); flex-wrap:wrap;
  width:100%; min-width:0; margin:32px 0 0; padding:24px 0 8px; border-top:1px solid var(--on-line);
}
.on-archive-bottom>.on-pagination,.on-archive-bottom>.navigation.pagination { margin-top:0; }
:is(.pagination,.comments-pagination) .nav-links { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:var(--on-page-gap); max-width:100%; }
:is(.on-pagination,.pagination,.comments-pagination) .page-numbers,.page-links .post-page-numbers,.on-comments-pagination button {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; flex:0 0 auto;
  min-width:var(--on-page-size); min-height:var(--on-page-size); margin:0; padding:10px 12px;
  border:1px solid var(--on-line); border-radius:0; background:var(--on-paper); color:var(--on-ink);
  font:var(--on-navigation-weight,700) var(--on-navigation-size,20px)/1.2 var(--on-navigation-font,'Rajdhani','Arial Narrow','Roboto Condensed',system-ui,sans-serif); text-transform:var(--on-navigation-transform,none); font-variant-numeric:tabular-nums; text-decoration:none;
}
:is(.on-pagination,.pagination,.comments-pagination) .page-numbers.current,.page-links .post-page-numbers.current {
  background:var(--on-accent); border-color:var(--on-accent); color:var(--on-ink);
}
:is(.on-pagination,.pagination,.comments-pagination) a.page-numbers:hover,.page-links a.post-page-numbers:hover,.on-comments-pagination button:hover {
  background:var(--on-soft); border-color:var(--on-ink); color:var(--on-ink);
}
:is(.on-pagination,.pagination,.comments-pagination) .page-numbers.dots { min-width:24px; padding-inline:0; border:0; background:transparent; }
:is(.on-pagination,.pagination,.comments-pagination,.page-links,.on-comments-pagination) .on-icon { width:20px; height:20px; flex:0 0 20px; }
.on-comments-pagination>span { font-size:12px; text-align:center; }
@media(max-width:599px) {
  .on-pagination,.navigation.pagination,.navigation.comments-pagination,.page-links,.on-comments-pagination { --on-page-size:44px; --on-page-gap:8px; margin-top:26px; padding-top:20px; }
  :is(.on-pagination,.pagination,.comments-pagination) .page-numbers,.page-links .post-page-numbers,.on-comments-pagination button { font-size:var(--on-navigation-size,18px); padding:10px 11px; }
  .on-pagination .on-page-distant,.on-pagination .page-numbers.dots { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  :is(.on-pagination,.pagination,.comments-pagination) .page-numbers,.page-links .post-page-numbers,.on-comments-pagination button { transition:none; }
}
.on-page { padding-block:42px 52px; }
/* Optional full-width page banner uses the archive palette, not the section tint. */
.on-page-banner-layout { width:100%; }
.on-page-banner { min-height:330px; padding-block:54px; }
.on-page-banner>.on-shell { position:relative; z-index:1; }
.on-page-content-wrap { padding-block:var(--on-section-start,40px) 52px; }
@media(max-width:699px) { .on-page-banner { min-height:250px; padding-block:40px; }.on-page-content-wrap { padding-block:var(--on-section-start,28px) 40px; } }
.on-page-header { margin-bottom:30px; text-align:center; }
.on-page-header .on-eyebrow { justify-content:center; }
.on-page-header h1 { max-width:1040px; margin-inline:auto; font-size:var(--on-heading-current-size,clamp(36px,5vw,72px)); }
.on-page-description { max-width:850px; margin:18px auto 0; font-size:var(--on-content-size,16px); line-height:1.8; }

.on-page-cover { position:relative; margin-bottom:32px; }
.on-page-with-sidebar { display:grid; grid-template-columns:minmax(0,1fr) 285px; align-items:start; gap:clamp(28px,5vw,72px); }
.on-page-main { min-width:0; }
.on-page-cover img { width:100%; max-height:560px; object-fit:cover; object-position:top center; }
.on-page>.on-prose { max-width:960px; }
.on-account-content { max-width:none; }
/* Story view: clean reading column,compact flat sidebar and no nested white cards. */
.on-single { background:#fff; }
.on-single-top { position:relative; display:grid; align-items:center; min-height:500px; background:var(--on-ink); color:var(--on-photo-text); --on-focus:var(--on-accent); }
.on-single-visual,.on-single-visual::after { position:absolute; inset:0; }
.on-single-visual img { width:100%; height:100%; object-fit:cover; object-position:center 35%; }
.on-single-visual::after { content:""; background:rgba(14,27,42,.64); }
.on-single-header { position:relative; text-align:center; padding-block:54px; }
.on-single-header h1 { max-width:1120px; margin:0 auto 20px; font-size:var(--on-heading-current-size,clamp(40px,4.6vw,70px)); line-height:1.08; }
.on-single-header .on-hero-category { margin-bottom:18px; }
.on-single-meta { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px 24px; font-size:12px; margin-bottom:22px; color:var(--on-photo-text); }
.on-single-meta span { display:inline-flex; align-items:center; gap:7px; }
.on-single-meta .on-icon { width:16px; height:16px; }
.on-single-meta a { color:var(--on-photo-text); text-decoration:underline; text-underline-offset:4px; }
.on-article-actions { display:flex; align-items:center; gap:9px; flex-wrap:nowrap; max-width:100%; }
.on-action { --on-control-py:9px; --on-control-px:13px; --on-control-gap:8px; display:inline-flex; align-items:center; justify-content:center; gap:var(--on-control-gap); min-height:42px; padding-block:var(--on-control-py); padding-inline:var(--on-control-start,var(--on-control-px)) var(--on-control-end,var(--on-control-px)); border:1px solid var(--on-line); border-radius:0; background:transparent; color:var(--on-ink); font:var(--on-button-weight,400) var(--on-button-size,12px)/1.4 var(--on-button-font,'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif); text-transform:var(--on-button-transform,none); }
.on-action .on-icon { width:17px; height:17px; flex-shrink:0; }
.on-action-label { display:block; margin:0; font-weight:var(--on-button-weight,700); line-height:inherit; text-transform:var(--on-button-transform,uppercase); }
.on-bookmark-trigger { min-width:44px; }
.on-action.is-bookmarked { background:var(--on-accent); color:var(--on-ink); border-color:var(--on-accent); }
a.on-action:hover,button.on-action:hover,.on-action.is-liked { background:var(--on-accent); color:var(--on-ink); border-color:var(--on-accent); }
.on-single-header .on-article-actions { display:none; justify-content:center; }
.on-single-header .on-action { color:var(--on-photo-text); border-color:rgba(255,255,255,.45); }
.on-single-header a.on-action:hover,.on-single-header button.on-action:hover,.on-single-header .on-action.is-liked,.on-single-header .on-action.is-bookmarked { color:var(--on-ink); border-color:var(--on-accent); }
.on-image-caption { position:absolute; right:clamp(10px,2vw,28px); bottom:10px; z-index:1; display:block; max-width:calc(100% - 20px); padding:6px 10px; background:rgba(12,22,33,.82); color:#fff; font:400 11px/1.6 var(--on-font); text-align:right; overflow-wrap:anywhere; }
.on-has-image-caption { padding-bottom:38px; }
.on-page-cover .on-image-caption { max-width:calc(100% - 20px); }
.on-single-header .on-rating-summary-header { margin-top:22px; }
.on-single-layout { display:grid; grid-template-columns:72px minmax(0,1fr) 285px; gap:clamp(28px,5vw,72px); align-items:start; padding-block:38px 52px; }
.on-single-rail { position:sticky; top:calc(var(--on-header) + 18px); align-self:start; }
.on-single-rail .on-article-actions { display:grid; gap:10px; }
.on-single-rail :is(.on-action,.on-helpful) { flex-direction:column; gap:4px; width:56px; min-height:56px; padding:8px 6px; font-size:var(--on-button-size,10px); line-height:1.2; }
.on-single-rail :is(.on-action,.on-helpful) .on-icon { width:18px; height:18px; }
.on-single-main { --on-bleed:var(--on-gutter); min-width:0; max-width:880px; }
.on-single-sidebar { min-width:0; display:grid; gap:24px; }
.on-single-subtitle { max-width:960px; margin:0 auto 24px; font:var(--on-content-weight,400) var(--on-content-size,clamp(16px,1.6vw,21px))/1.65 var(--on-font); color:inherit; overflow-wrap:anywhere; }
.on-article-end { margin-top:32px; padding-top:24px; border-top:1px solid var(--on-line); }
.on-tags { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.on-tags a { padding:5px 9px; background:var(--on-soft); color:var(--on-ink); font-size:11px; }
.on-tags a:is(:hover,:focus-visible) { background:var(--on-ink); color:var(--on-on-dark,#fff); }
.on-widget { min-width:0; padding:24px; background:var(--on-soft); }
.on-widget>h2 { font-size:var(--on-heading-current-size,29px); margin-bottom:20px; overflow-wrap:anywhere; }
.on-account-link>.on-avatar { display:inline-flex; align-items:center; justify-content:center; flex:0 0 var(--on-header-avatar,30px); width:var(--on-header-avatar,30px); height:var(--on-header-avatar,30px); min-width:var(--on-header-avatar,30px); max-width:none; min-height:var(--on-header-avatar,30px); max-height:none; aspect-ratio:1 / 1; object-fit:cover; border-radius:50%; overflow:hidden; font-size:14px; }
.on-single-meta .on-single-author { display:inline-flex; align-items:center; gap:10px; color:inherit; text-decoration:none; }
.on-single-author>.on-avatar { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; flex:0 0 36px; object-fit:cover; border-radius:50%; overflow:hidden; font-size:16px; }
.on-single-author:hover>span { text-decoration:underline; text-underline-offset:4px; }
.on-single-author .on-avatar-fallback { background:var(--on-accent); color:var(--on-ink); }
/* Event,review,gallery and video extensions use the same flat content system. */
.on-factbox h2 { font-size:var(--on-heading-current-size,32px); }
.on-factbox .on-button { width:100%; margin-top:12px; }
.on-factbox dl { margin:22px 0 12px; }
.on-factbox dl>div { margin:0 0 16px; padding-bottom:16px; border-bottom:1px solid var(--on-line); }
.on-factbox dt { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--on-ink); margin-bottom:7px; }
.on-factbox dt .on-icon { width:16px; height:16px; }
.on-factbox dd { margin:0; font-size:13px; font-weight:500; }
.on-factbox small { display:block; margin-top:5px; font-size:11px; font-weight:400; color:var(--on-ink); }
.on-fact-note { font-size:10px; line-height:1.7; color:var(--on-ink); margin-top:17px; }
.on-single-event .on-single-top,.on-single-review .on-single-top { min-height:280px; }
.on-single-event .on-single-header,.on-single-review .on-single-header { padding-block:36px; }
.on-single-event .on-single-header h1,.on-single-review .on-single-header h1 { font-size:var(--on-heading-current-size,clamp(36px,4.2vw,60px)); }
/* Event details reuse the company/profile fact tiles and location sections. */
.on-event-facts-header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:22px; }
.on-event-facts-header>div { min-width:0; }
.on-event-facts-header h2 { margin:0; overflow-wrap:anywhere; font:var(--on-heading-weight,700) var(--on-heading-current-size,var(--on-heading-size,29px))/1.2 var(--on-heading); text-transform:var(--on-heading-transform,uppercase); }
.on-event-facts-header .on-eyebrow { font-size:10px; margin-bottom:8px; }
.on-event-detail .on-event-properties { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.on-event-properties>div { min-width:0; }
.on-event-properties a { text-decoration:none; }
.on-event-properties a:hover { text-decoration:underline; text-underline-offset:3px; }
.on-event-facts-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; padding-top:20px; border-top:1px solid var(--on-line); }
.on-event-facts-actions .on-button { margin:0; }
.on-event-status { margin:0; padding:10px 12px; border-left:2px solid #ad322a; background:var(--on-soft); font-size:12px; }
.on-event-organizer-head { align-items:flex-start; }
.on-event-organizer-head h3 { margin:0 0 8px; font-size:var(--on-heading-current-size,var(--on-heading-size,25px)); }
.on-event-organizer-head p { margin:0; font-size:var(--on-content-size,14px); line-height:1.8; }
.on-event-logo-link { display:block; flex:0 0 auto; }
.on-event-logo-link img { display:block; }
.on-event-contact .on-social-profile-links { margin-bottom:0; }
/* Event timing uses the shared information surface, timeline, buttons and icons. */
.on-event-countdown { --on-info-background:var(--on-ink); --on-info-color:var(--on-on-dark,#fff); }
.on-event-countdown-heading { display:flex; align-items:center; gap:10px; margin:0; font-size:14px; line-height:1.5; }
.on-event-countdown-heading>.on-icon { flex:0 0 20px; width:20px; height:20px; color:var(--on-accent); }
.on-event-countdown-heading>strong { min-width:0; overflow-wrap:anywhere; }
.on-event-countdown-values { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,3vw,28px); width:min(100%,440px); margin:24px auto; }
.on-event-countdown-values>div { display:flex; flex-direction:column; align-items:center; gap:9px; min-width:0; }
.on-event-countdown-values dt { font-size:12px; line-height:1.4; text-align:center; overflow-wrap:anywhere; }
.on-event-countdown-values dd { order:-1; display:grid; place-items:center; min-width:64px; max-width:100%; min-height:64px; margin:0; padding:8px 10px; background:var(--on-paper); color:var(--on-ink); font:var(--on-heading-weight,700) clamp(28px,5vw,40px)/1 var(--on-heading); font-variant-numeric:tabular-nums; }
.on-event-countdown-date,.on-event-countdown-note { margin:16px 0 0; font-size:13px; line-height:1.7; overflow-wrap:anywhere; }
.on-event-countdown-values:not([hidden])+.on-event-countdown-date { text-align:center; }
.on-event-schedule-note { margin:12px 0 0; font-size:13px; line-height:1.7; overflow-wrap:anywhere; }
.on-event-next-dates { --on-timeline-line:var(--on-line); --on-timeline-highlight:var(--on-line); }
.on-event-next-dates>.is-current { --on-timeline-line:var(--on-accent); --on-timeline-highlight:var(--on-accent); --on-timeline-marker-background:var(--on-accent); --on-timeline-marker-color:var(--on-on-accent,var(--on-ink)); }
.on-event-occurrence-date { margin:0 0 14px; font-size:14px; font-weight:600; line-height:1.75; overflow-wrap:anywhere; }
.on-event-occurrence-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; min-width:0; }
.on-event-occurrence-actions>.on-button { max-width:100%; white-space:normal; text-align:center; overflow-wrap:anywhere; }
.on-event-occurrence-status { align-items:center; gap:7px; flex-shrink:1; min-width:0; max-width:100%; white-space:normal; overflow-wrap:anywhere; }
.on-event-occurrence-status::before { content:''; flex:0 0 6px; width:6px; height:6px; border-radius:50%; background:currentColor; }
.on-event-next-dates>.is-current .on-event-occurrence-status::before { background:var(--on-accent); }
.on-event-schedule>[data-on-event-refresh] { margin-top:16px; }
/* Scores and the expandable rating form are above the description,never in the sidebar. */
.on-product-brand { margin:8px 0 0; font-size:13px; color:var(--on-ink); }
.on-media-credit { font-size:11px; line-height:1.7; color:var(--on-ink); margin:18px 0; }
.on-comments { margin-top:36px; padding-top:28px; border-top:1px solid var(--on-line); }
.on-comments>h2 { font-size:var(--on-heading-current-size,37px); }
.comment-list { list-style:none; padding:0; margin:0 0 28px; }
.comment-list .children { list-style:none; padding-left:18px; margin-left:16px; border-left:1px solid var(--on-line); }
.comment-body { padding:20px 0; border-bottom:1px solid var(--on-line); }
.comment-author { font-size:14px; }
.comment-metadata,.comment-awaiting-moderation { font-size:11px; color:var(--on-ink); }
.comment-content { font-size:var(--on-content-size,15px); line-height:1.8; margin-top:14px; overflow-wrap:anywhere; }
.comment-reply-link { display:inline-block; font-size:11px; text-decoration:underline; text-underline-offset:4px; margin-top:10px; }
.comment-reply-title { font-size:var(--on-heading-current-size,29px); }
.comment-form { display:grid; grid-template-columns:minmax(0,1fr); gap:18px 22px; }
.comment-form>p { margin:0; }
.comment-form label { display:block; margin-bottom:7px; font-size:12px; font-weight:500; }
.comment-form-comment,.comment-form-url,.comment-notes,.logged-in-as,.form-submit,.comment-form-cookies-consent { grid-column:1/-1; }
.comment-notes,.logged-in-as,.comment-form-cookies-consent { font-size:11px; color:var(--on-ink); }
/* Dialogs remain functional,angular and keyboard accessible. */
.on-dialog { border:0; padding:0; border-radius:0; width:min(720px,calc(100% - 40px)); max-height:calc(100dvh - 40px); background:var(--on-paper); color:var(--on-ink); overflow:auto; }
.on-dialog::backdrop { background:rgba(13,24,37,.68); }
.on-dialog-header { position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:20px; background:var(--on-paper); padding:20px 28px; border-bottom:1px solid var(--on-line); }
.on-dialog-header h2 { font-size:var(--on-heading-current-size,34px); margin:0; }
.on-dialog-body { padding:26px 28px; }
/* Edge-to-edge drawer navigation; spacing belongs to each clickable row. */
.on-dialog-body.on-drawer-navigation { --on-nav-inset:16px; padding-inline:0; padding-top:0; }
.on-dialog-body>p { font-size:13px; color:var(--on-ink); }
/* Fullscreen search: a fixed head,with only the results/content area scrolling. */

/* Drawer navigation: each parent is one full-row disclosure; leaf items remain links. */
.on-menu-dialog { --on-drawer-inset:0 auto 0 0; --on-drawer-from:-100%; width:min(440px,100%); height:100dvh; max-height:100dvh; max-width:100%; }
.on-menu-brand { min-width:0; max-width:calc(100% - 64px); }
.on-menu-brand>.on-wordmark { font-size:32px; }
.on-menu-dialog .on-dialog-header>[data-on-close] { flex:0 0 44px; }
.on-menu-dialog .on-menu-row,.on-account-drawer .on-nav-links>a { min-height:64px; border-bottom:1px solid var(--on-line); }
.on-menu-dialog .on-menu-row>:is(a,.on-submenu-toggle),.on-account-drawer .on-nav-links>a { padding:10px 16px 10px calc(16px + var(--on-menu-indent,0px)); white-space:normal; overflow-wrap:anywhere; }
.on-menu-dialog .on-menu-row>:is(a,.on-submenu-toggle) { min-height:64px; font-size:calc(var(--on-navigation-size,26px) * .9); }
.on-menu-dialog .on-menu-row>:is(a,.on-submenu-toggle):not([aria-current]):is(:hover,:focus-visible),.on-account-drawer .on-nav-links>a:not([aria-current]):is(:hover,:focus-visible) { background:var(--on-soft); color:var(--on-ink); }
.on-submenu-toggle:is(:hover,:focus-visible)>.on-submenu-indicator,
.on-menu-dialog .is-submenu-open>.on-menu-row .on-submenu-indicator { background:var(--on-accent); color:var(--on-ink); }
.on-menu-dialog .current-menu-ancestor>.on-menu-row>.on-submenu-toggle:not([aria-current]) { background:var(--on-soft); }
.on-menu-dialog .sub-menu { --on-menu-indent:18px; position:static; display:block; width:100%; list-style:none; margin:0; padding:0; border:0; overflow:hidden; }
.on-menu-dialog .sub-menu .sub-menu { --on-menu-indent:36px; }
.on-menu-dialog .sub-menu .on-menu-row { min-height:56px; }
.on-menu-dialog .sub-menu .on-menu-row>:is(a,.on-submenu-toggle) { min-height:56px; font-size:calc(var(--on-navigation-size,21px) * .95); padding-block:6px; }
.on-menu-footer { display:flex; flex-direction:column; gap:12px; padding:25px 28px 0; }
.on-account-drawer { --on-drawer-inset:0 0 0 auto; --on-drawer-from:100%; width:min(420px,100%); height:100dvh; max-height:100dvh; max-width:100%; }
.on-account-drawer .on-dialog-header { padding:20px; }
.on-account-drawer .on-dialog-header>[data-on-close] { flex:0 0 44px; }
.on-account-drawer .on-nav-links { gap:0; }
.on-account-drawer-identity { display:flex; align-items:center; gap:14px; flex:1 1 auto; min-width:0; }
.on-account-drawer-avatar,.on-account-drawer-avatar .on-avatar { display:block; width:56px; height:56px; flex:0 0 56px; border-radius:50%; object-fit:cover; }
.on-account-drawer-avatar .on-avatar { border:2px solid var(--on-accent); }
.on-account-drawer .on-account-drawer-name { display:block; flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0; font:var(--on-heading-weight,700) var(--on-heading-current-size,27px)/1.15 var(--on-heading); }
.on-menu-account-identity { display:inline-flex; align-items:center; justify-content:center; flex:0 0 30px; width:30px; height:30px; }
.on-menu-account-identity>.on-avatar { display:block; width:30px; height:30px; min-width:30px; max-width:none; flex:0 0 30px; object-fit:cover; border-radius:50%; }
.on-menu-dialog .on-socials { margin-top:10px; }
.on-share-intro { margin:0 0 26px; }
.on-share-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.on-share-links .on-share-provider { --on-control-py:13px; --on-control-px:16px; --on-control-gap:12px; --on-btn-bg:var(--on-paper,#fff); justify-content:flex-start; gap:var(--on-control-gap); min-height:62px; padding-block:var(--on-control-py); padding-inline:var(--on-control-start,var(--on-control-px)) var(--on-control-end,var(--on-control-px)); font-size:var(--on-button-size,14px); font-weight:var(--on-button-weight,700); letter-spacing:0; text-align:left; }
.on-share-icon { display:inline-flex; align-items:center; justify-content:center; flex:0 0 34px; width:34px; height:34px; background:var(--on-accent); color:var(--on-on-accent,var(--on-ink)); }
.on-share-copy { border-top:1px solid var(--on-line); padding-top:22px; margin-top:26px; }
.on-share-copy-label { display:block; font-size:12px; font-weight:700; text-transform:uppercase; margin-bottom:10px; }
.on-share-copy-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:stretch; gap:10px; }
.on-share-copy-row>input { width:100%; min-width:0; min-height:52px; text-overflow:ellipsis; font-size:13px; }
.on-share-copy-row>.on-button { min-height:52px; }
.on-share-dialog [data-on-copy-status] { font-size:12px; margin:12px 0 0; }
.on-share-dialog [data-on-copy-status]:empty { margin:0; }

/* Discussion: compact composer first; the header never shares its scroll container. */
.on-comments-teaser { margin-top:36px; padding:24px; background:var(--on-soft); border-left:2px solid var(--on-accent); }
.on-comments-teaser-head { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.on-comments-teaser-head h2 { margin:0 0 10px; font-size:var(--on-heading-current-size,clamp(30px,2.8vw,42px)); }
.on-comments-teaser-head p { margin:0; color:var(--on-ink); font-size:13px; line-height:1.7; }
.on-dialog.on-drawer { position:fixed; inset:var(--on-drawer-inset,0 0 0 auto); margin:0; height:100dvh; max-height:100dvh; overflow:hidden; transform:translateX(var(--on-drawer-from,100%)); transition:transform 280ms cubic-bezier(.22,.61,.36,1); }
.on-drawer[open] { display:flex; flex-direction:column; }
.on-dialog.on-drawer.is-open { transform:translateX(0); }
.on-drawer::backdrop { background:rgba(14,27,42,0); transition:background-color 280ms ease; }
.on-drawer.is-open::backdrop { background:rgba(14,27,42,.30); }
.on-drawer .on-dialog-header { position:relative; flex:0 0 auto; min-width:0; }
.on-drawer .on-dialog-body { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scroll-padding-top:14px; scrollbar-width:thin; scrollbar-color:var(--on-ink) var(--on-paper); }
.on-dialog.on-comments-dialog { width:min(540px,100%); max-width:100%; border-left:1px solid var(--on-line); background:var(--on-paper); }
.on-comments-dialog .on-dialog-header { display:flex; align-items:flex-start; gap:14px; padding:18px 22px 16px; }
.on-comments-dialog .on-dialog-header .on-icon-button { flex:0 0 36px; width:36px; height:36px; padding:9px; }
.on-comments-dialog .on-dialog-body { padding:22px 24px 28px; }
.on-dialog-title-stack { min-width:0; flex:1; }
.on-comments-dialog .on-dialog-title-stack h2 { margin:0 0 5px; font:var(--on-heading-weight,700) var(--on-heading-current-size,22px)/1.16 var(--on-heading); letter-spacing:0; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.on-dialog-title-stack p { font:400 11px/1.5 var(--on-font); color:var(--on-ink); margin:0; }
.on-comments-panel-inner { color:var(--on-ink); font:var(--on-content-weight,400) var(--on-content-size,14px)/1.7 var(--on-font); }

.on-comment-compose { display:grid; grid-template-columns:36px minmax(0,1fr); gap:12px; padding:0 0 20px; margin:0; background:none; }
.on-compose-avatar { padding-top:3px; }
.on-compose-avatar .on-avatar,.on-comment-avatar .on-avatar { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; overflow:hidden; object-fit:cover; font-size:16px; }
.on-compose-avatar .on-avatar .on-icon { width:20px; height:20px; }
.on-comment-form { min-width:0; display:grid; align-content:start; gap:9px; }
.on-compose-box { --on-compose-inset:13px; --on-field-error-margin:8px var(--on-compose-inset) 12px; min-width:0; border:1px solid #bfc8d0; border-radius:0; overflow:hidden; background:var(--on-paper); transition:border-color var(--on-duration-fast) ease; }
.on-compose-box:focus-within:not(:has([aria-invalid="true"])) { border-color:var(--on-ink); }
.ostfriesland-nordsee-site .on-comment-form textarea { display:block; width:100%; height:78px; min-height:78px; max-height:176px; padding:12px var(--on-compose-inset,13px); margin:0; border:0; border-radius:0; background:transparent; font:400 14px/1.65 var(--on-font); color:var(--on-ink); resize:none; overflow-y:auto; box-shadow:none; }
.ostfriesland-nordsee-site .on-comment-form textarea:focus { outline:none; background:transparent; border:0; box-shadow:none; }
.on-compose-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid var(--on-line); padding:7px 9px; }
.on-compose-toolbar small { font-size:10px; line-height:1.4; color:var(--on-ink); }
.on-compose-toolbar button {
  flex:0 0 auto; }
.on-compose-toolbar .on-icon { width:14px; height:14px; }
.on-compose-identity { margin:0; color:var(--on-ink); font-size:10px; line-height:1.6; }
.on-compose-identity strong { font-weight:500; }
.on-compose-identity a { text-decoration:underline; text-underline-offset:3px; }
.on-compose-login p { margin:0 0 8px; font-size:13px; }
.on-comment-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
.on-comment-grid label { display:grid; gap:5px; min-width:0; font-size:11px; }
.ostfriesland-nordsee-site .on-comment-grid input { min-height:40px; height:40px; padding:8px 10px; font-size:13px; background:var(--on-paper); }
.on-comment-replying { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:11px; color:var(--on-ink); }
.on-comments-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 0 8px; border-top:1px solid var(--on-line); }
.on-comments-toolbar h3 { margin:0; font:var(--on-heading-weight,700) var(--on-heading-current-size,22px)/1.2 var(--on-heading); }
.ostfriesland-nordsee-site .on-comments-toolbar select { width:auto; max-width:165px; min-height:34px; height:34px; padding:5px 9px; background:var(--on-paper); border-radius:0; font-size:11px; }
.on-comment-list { list-style:none; margin:0; padding:0; }
.on-comment-card { display:grid; grid-template-columns:36px minmax(0,1fr); gap:12px; padding:19px 0; border-bottom:1px solid var(--on-line); }
.on-comment-item:focus-visible { outline:1px solid var(--on-ink); outline-offset:3px; }
.on-comment-item.is-highlighted { border-left:2px solid var(--on-accent); padding-left:12px; }
.on-comment-content-wrap { min-width:0; }
.on-comment-head { display:flex; align-items:baseline; gap:5px 8px; flex-wrap:wrap; margin:0 0 8px; }
.on-comment-head strong { font:600 12px/1.5 var(--on-font); color:var(--on-ink); text-transform:none; }
.on-comment-head time { font-size:10px; line-height:1.5; color:var(--on-ink); }
.on-comment-author-badge { font:500 9px/1.4 var(--on-font); padding:2px 5px; background:var(--on-soft); }
.on-comment-body-text { font-size:var(--on-content-size,13px); line-height:1.75; margin:0; color:var(--on-ink); overflow-wrap:anywhere; }
.on-comment-body-text p { margin:0 0 .7em; }
.on-comment-body-text p:last-child { margin-bottom:0; }
.on-comment-body-text a { text-decoration:underline; text-underline-offset:3px; }
.on-comment-body-text pre { white-space:pre-wrap; }
.on-comment-state,.on-comment-context { margin:0 0 7px; font-size:10px; color:var(--on-ink); line-height:1.6; }
.on-comment-state { padding-left:7px; border-left:2px solid var(--on-accent); }
.on-comment-actions { margin-top:9px; }
.on-comment-actions button { display:inline-flex; align-items:center; gap:6px; min-height:30px; border:0; padding:3px 0; background:transparent; font-size:11px; color:var(--on-ink); }
.on-comment-actions button:hover { color:var(--on-ink); }
.on-comment-actions .on-icon { width:14px; height:14px; }
.on-comments-empty,.on-comments-closed { color:var(--on-ink); font-size:12px; line-height:1.7; padding:14px 0; }


/* Responsive composition is kept here, not in appended patch blocks. */
@media (max-width:1535px) and (min-width:1200px) {.on-header-inner { gap:20px; }
.on-account-link { width:44px; min-height:44px; padding:7px; }
.on-account-link-label { display:none; }
.on-wordmark { font-size:36px; }
.on-brand-image { max-width:195px; }

}

@media (max-width:1199px) {
:root { --on-header:84px; --on-gutter:38px; }
/* Compact account control: the ring belongs to the image, not its link. */
.on-header-actions>.on-account-link:is(.has-avatar,.is-guest,:has(>.on-avatar)) { --on-account-background:transparent; --on-account-hover-background:transparent; width:44px; min-width:44px; height:44px; min-height:44px; padding:6px; gap:0; border:0; border-radius:0; box-shadow:none; color:var(--on-header-text,var(--on-ink)); }
.on-header-actions>.on-account-link:is(.has-avatar,.is-guest,:has(>.on-avatar)):hover { color:var(--on-header-text,var(--on-ink)); }
.on-header-actions>.on-account-link:is(.has-avatar,.is-guest,:has(>.on-avatar)) .on-account-link-label { display:none; }
.on-header-actions>.on-account-link:is(.has-avatar,.is-guest,:has(>.on-avatar))>:is(.on-avatar,.on-account-symbol) { border:2px solid var(--on-accent); box-sizing:border-box; border-radius:50%; }
.on-header-actions>.on-account-link>:is(.on-account-symbol,.on-avatar-fallback) { background:var(--on-ink); color:#fff; }
.on-header-actions>.on-account-link:is(.has-avatar,.is-guest,:has(>.on-avatar)):focus-visible { outline:none; }
.on-header-actions>.on-account-link:is(.has-avatar,.is-guest,:has(>.on-avatar)):focus-visible>:is(.on-avatar,.on-account-symbol) { outline:2px solid var(--on-header-text,var(--on-ink)); outline-offset:2px; }
.on-hero { min-height:460px; }
.on-hero-title { font-size:var(--on-heading-current-size,64px); }
.on-hero-title-long { font-size:var(--on-heading-current-size,53px); }
.on-card-title { font-size:var(--on-heading-current-size,27px); }
.on-mission-inner { gap:32px; }
.on-mission-copy h2 { font-size:var(--on-heading-current-size,43px); }
.on-mission-copy>p { font-size:var(--on-content-size,14px); }
.on-mission-images { aspect-ratio:1; }
.on-topic { aspect-ratio:3/4; }
.on-topic-copy { left:20px; right:15px; bottom:24px; }
.on-topic-copy>strong { font-size:25px; }
.on-topic-copy>span { font-size:11px; }
.on-single-layout { grid-template-columns:64px minmax(0,1fr) 260px; gap:32px; }
.on-widget { padding:20px; }
.on-footer-main { gap:25px; }
.on-footer nav,.on-footer nav ul { gap:10px 18px; }

}

@media (max-width:959px) {.on-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.on-section-heading h2 { font-size:var(--on-heading-current-size,35px); }
.on-mission-inner { grid-template-columns:1fr; gap:30px; }
.on-mission-copy { max-width:740px; }
.on-mission-copy h2 { max-width:600px; font-size:var(--on-heading-current-size,48px); }
.on-mission-copy>p { max-width:none; font-size:var(--on-content-size,15px); }
.on-mission-images { aspect-ratio:1.55; width:100%; }
.on-mission-values { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.on-mission-values>div { align-items:flex-start; font-size:12px; gap:9px; }
.on-topic-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.on-topic { aspect-ratio:1.25; }
.on-topic-copy>strong { font-size:30px; }
.on-single-layout,.on-page-with-sidebar { grid-template-columns:1fr; }
.on-single-rail { display:none; }
.on-single-header .on-article-actions { display:flex; }
.on-single-main { max-width:none; }
.on-single-sidebar { grid-template-columns:repeat(2,minmax(0,1fr)); }
.on-single-sidebar>section:only-child { grid-column:1/-1; }
.on-footer-main { grid-template-columns:1fr auto; }
.on-footer nav { grid-column:1/-1; justify-content:flex-start; grid-row:2; }
.on-footer nav ul { justify-content:flex-start; }

}

@media (max-width:819px) {
  .on-auth-page .on-page.on-shell { width:min(680px,calc(100% - 24px)); padding-block:24px 36px; }
  

}

@media (max-width:699px) {


.on-event-facts-header { flex-direction:column; gap:12px; }

.on-single-event .on-single-header,.on-single-review .on-single-header { padding-block:28px; }
.ostfriesland-nordsee-site .on-comment-form textarea,.ostfriesland-nordsee-site .on-comment-grid input { font-size:16px; }
.on-comments-teaser-head { align-items:flex-start; flex-direction:column; }
.on-comments-dialog .on-dialog-header { padding:15px 16px; }
.on-comments-dialog .on-dialog-body { padding:18px 16px 24px; }
:root { --on-gutter:24px; --on-header:76px; --on-section-space:35px; }
.on-home-sections { --on-section-space:24px; }
.on-topbar { display:none; }
.on-brand-picture { width:var(--on-mobile-logo-w); height:var(--on-mobile-logo-h); }
.on-header-brand { max-width:min(146px,calc(100vw - 2 * var(--on-gutter) - 192px)); }
.on-header-brand .on-brand-tagline { display:none; }
.on-header-brand .on-wordmark { height:32px; line-height:32px; font-size:clamp(20px,calc(11vw - 15px),32px); letter-spacing:-1.5px; }
.on-wordmark { font-size:32px; letter-spacing:-2px; }
.on-brand-image { max-width:190px; max-height:44px; }
.on-header-inner { gap:6px; }
.on-menu-button { --on-control-gap:7px; --on-control-px:8px; }
.on-header-actions { gap:2px; }
.on-account-link { --on-header-avatar:30px; min-height:44px; width:44px; padding:6px; }
.on-account-link-label { display:none; }
.on-hero { min-height:410px; }
.on-hero-content { padding-block:28px 80px; }
.on-hero-copy { max-width:520px; }
.on-hero-title { font-size:var(--on-heading-current-size,clamp(40px,7vw,58px)); }
.on-hero-title-long { font-size:var(--on-heading-current-size,42px); }
.on-hero-category { font-size:10px; margin-bottom:18px; }
.on-hero-meta { margin-bottom:18px; }
.on-hero-copy p { font-size:var(--on-content-size,16px); margin-bottom:24px; }
.on-hero-bottom { bottom:19px; }
.on-hero-controls { gap:12px; }
.on-hero-index { display:none; }
.on-brand-strip>.on-shell { min-height:68px; }
.on-brand-strip span { font-size:27px; }
.on-brand-strip .on-icon { width:25px; height:25px; }
.on-section-heading { gap:18px; margin-bottom:24px; }
.on-section-heading h2 { font-size:var(--on-heading-current-size,31px); padding:10px 24px 10px 16px; }
.on-section-heading .on-eyebrow { font-size:9px; }
.on-all-link { gap:6px; font-size:10px; }
.on-card-grid { gap:30px 20px; }
.on-card-title { font-size:var(--on-heading-current-size,27px); }
.on-card-excerpt { font-size:var(--on-content-size,var(--on-card-copy-size,13px)); }
.on-card-body { padding:18px 18px 0; }
.on-card-rating { --on-star-size:14px; --on-star-icon-size:14px; inset:auto 8px 8px auto; max-width:calc(100% - 16px); padding:6px 8px; gap:7px; font-size:11px; }
.on-card-rating-value,.on-card-rating-source { min-height:16px; }
.on-card-rating-value strong { font-size:12px; }
.on-card-rating-source { padding-left:7px; }
.on-card-bottom { gap:10px; }
.on-card-time,.on-card-comments { font-size:10px; }
.on-mission-copy h2 { font-size:var(--on-heading-current-size,42px); }
.on-mission-values { grid-template-columns:1fr; gap:12px; }
.on-mission-values>div { align-items:center; font-size:13px; }
.on-mission-images { aspect-ratio:1.22; }
.on-topics-heading>.on-shell { padding-block:22px; }
.on-topics-heading h2 { font-size:var(--on-heading-current-size,31px); padding:10px 30px 12px 16px; }
.on-topic { aspect-ratio:3/4; }
.on-topic-copy { left:20px; right:15px; bottom:22px; }
.on-topic-copy>strong { font-size:27px; }
.on-topic-copy>span { font-size:11px; }
.on-topic-arrow { top:15px; right:15px; width:34px; height:34px; }
.on-content-stats,.on-content-stats[data-on-stats-count="3"] { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 0; }
.on-content-stats>.on-content-stat:nth-child(2n) { border-right:0; }
.on-content-stats strong { font-size:85px; }
.on-content-stats>.on-content-stat>span { font-size:21px; }
.on-footer { padding-top:28px; }
.on-footer .on-wordmark { font-size:32px; }
.on-footer .on-brand-tagline { font-size:7px; }
.on-footer-main { gap:22px; }
.on-footer-bottom { flex-wrap:wrap; gap:8px 20px; }
.on-footer-bottom>span:nth-child(2) { order:3; flex-basis:100%; }
.on-footer-tagline { font-size:11px; }
.on-archive-header { padding-block:38px; min-height:250px; }




.on-archive-bottom { margin-top:28px; }
.on-page { padding-block:32px 40px; }

.on-single-top { min-height:370px; }
.on-single-header { padding-block:42px; }
.on-single-header h1 { font-size:var(--on-heading-current-size,44px); }
.on-single-meta { gap:10px 16px; font-size:11px; }
.on-single-layout { padding-block:28px 40px; gap:28px; }
.on-single-sidebar { grid-template-columns:1fr; }
.on-image-caption { font-size:10px; max-height:68px; overflow:auto; }
.on-has-image-caption { padding-bottom:62px; }
.on-article-actions { gap:5px; overflow-x:auto; scrollbar-width:thin; padding-block:2px; }
.on-article-actions>:is(.on-action,.on-helpful) { box-sizing:border-box; flex:1 0 44px; width:auto; min-width:44px; height:50px; min-height:50px; margin:0; padding:5px 2px; flex-direction:column; gap:2px; font-size:var(--on-button-size,10px); line-height:1.2; white-space:nowrap; }
.on-article-actions>:is(.on-action,.on-helpful) .on-icon { width:18px; height:18px; }
.on-share-trigger .on-action-label { display:none; }
.on-comments>h2 { font-size:var(--on-heading-current-size,32px); }
.comment-form { grid-template-columns:minmax(0,1fr); }
.comment-form>p { grid-column:1; }
.comment-list .children { margin-left:8px; padding-left:10px; }
.on-dialog { width:calc(100% - 24px); max-height:calc(100dvh - 24px); }
.on-dialog-header { padding:16px 20px; }
.on-dialog-header h2 { font-size:var(--on-heading-current-size,29px); }
.on-dialog-body { padding:22px 20px; }
.on-menu-footer { padding-inline:20px; }
.on-menu-dialog,.on-account-drawer { width:100%; max-height:100dvh; }

}

@media (max-width:639px) {
.on-event-detail .on-event-properties { grid-template-columns:1fr; }
.on-event-facts-actions .on-button { width:100%; }
.on-card-grid { grid-template-columns:1fr; }

}

@media (max-width:539px) {
.on-menu-button { --on-control-py:10px; --on-control-px:10px; width:44px; }
.on-menu-button>span { display:none; }
.on-comments-dialog .on-dialog-title-stack h2 { font-size:var(--on-heading-current-size,21px); }
.on-comment-compose,.on-comment-card { grid-template-columns:32px minmax(0,1fr); gap:9px; }
.on-compose-avatar .on-avatar,.on-comment-avatar .on-avatar { width:32px; height:32px; font-size:14px; }
.on-compose-toolbar { gap:6px; padding:6px 7px; }
.on-compose-toolbar small { font-size:9px; }
.on-compose-toolbar button {
    flex:0 0 auto; }
.on-comment-grid { grid-template-columns:minmax(0,1fr); gap:9px; }
:root { --on-gutter:22px; }
.on-wordmark { font-size:29px; }
.on-header-actions>.on-icon-button { width:38px; height:42px; padding:9px; }
.on-account-link { --on-header-avatar:28px; width:38px; height:42px; padding:5px; }
.on-header-actions .on-icon { width:20px; height:20px; }
.on-brand-image { max-width:168px; }
.on-hero-title { font-size:var(--on-heading-current-size,42px); }
.on-hero-title-long { font-size:var(--on-heading-current-size,36px); }
.on-hero-copy p { font-size:var(--on-content-size,15px); }
.on-hero-counter { font-size:15px; gap:6px; }
.on-hero-controls { gap:9px; }
.on-brand-strip span { font-size:24px; max-width:285px; }
.on-card-grid { grid-template-columns:1fr; gap:32px; }
.on-card-title { font-size:var(--on-heading-current-size,29px); }
.on-section-heading { flex-wrap:wrap; row-gap:10px; }
.on-section-heading .on-all-link { max-width:100%; margin-left:auto; font-size:9px; }
.on-section-heading h2 { font-size:var(--on-heading-current-size,28px); }
.on-section-heading .on-eyebrow { letter-spacing:.07em; }
.on-topic-grid { grid-template-columns:1fr; }
.on-topic { aspect-ratio:1.3; }
.on-topic-copy>strong { font-size:32px; }
.on-topic-copy>span { font-size:12px; }
.on-topics-heading h2 { font-size:var(--on-heading-current-size,28px); }
.on-mission-copy h2 { font-size:var(--on-heading-current-size,39px); }
.on-footer-main { grid-template-columns:1fr; }
.on-footer .on-socials { grid-row:auto; }
.on-footer nav { grid-row:auto; }
.on-single-header h1 { font-size:var(--on-heading-current-size,39px); }
.on-single-meta>span:last-child { flex-basis:100%; justify-content:center; }
.on-share-links { grid-template-columns:minmax(0,1fr); gap:8px; }
.on-share-links .on-share-provider { --on-control-py:10px; --on-control-px:14px; min-height:56px; }
.on-share-copy-row { grid-template-columns:minmax(0,1fr); }
.on-share-copy-row>.on-button { width:100%; }
.on-empty { padding:28px 22px; }

}

@media (max-width:359px) {:root { --on-gutter:17px; }
.on-wordmark { font-size:26px; }
.on-header-inner { gap:7px; }
.on-header-actions>.on-icon-button { width:34px; }
.on-account-link { --on-header-avatar:26px; width:34px; padding:4px; }
.on-section-heading h2 { font-size:var(--on-heading-current-size,25px); }
.on-hero-title { font-size:var(--on-heading-current-size,38px); }
.on-hero-title-long { font-size:var(--on-heading-current-size,32px); }

}

@media (prefers-reduced-motion:reduce) {html { scroll-behavior:auto; }
*,*::before,*::after { animation:none!important; transition:none!important; }

}

@media print {.on-topbar,.on-header,.on-footer,.on-single-sidebar,.on-article-actions,.on-comments,.on-dialog,.on-review-compose { display:none!important; }
body,.on-single { background:#fff; color:var(--on-ink); font-size:12pt; }
.on-shell { width:100%; max-width:none; }
.on-single-top { display:block; min-height:0; background:#fff; color:var(--on-photo-text); }
.on-single-visual { position:static; height:240px; }
.on-single-visual::after { content:""; background:rgba(14,27,42,.64); }
.on-single-header { padding:20px 0; }
.on-single-header h1 { font-size:28pt; }
.on-single-meta,.on-single-meta a { color:var(--on-photo-text); }
.on-single-layout { display:block; padding:0; }
.on-single-subtitle { font-size:14pt; }
.on-factbox { break-inside:avoid; }

}

/* Instance layout only; navigation, cards, sliders and ad styles remain global. */
.on-home-section-description { max-width:880px; margin:0 0 26px; font:var(--on-content-weight,400) var(--on-content-size,16px)/1.8 var(--on-font); }
.on-home-topic-panels>[data-on-tab-panel] { margin-top:20px; min-width:0; }
.on-home-topic-panels>[data-on-tab-panel][hidden] { display:none; }
.on-home-free-content { display:grid; grid-template-columns:minmax(0,1fr); gap:28px; }
.on-home-free-content>figure { margin:0; min-width:0; }
.on-home-free-content>figure>img { width:100%; height:auto; display:block; }
.on-home-free-content .on-prose { color:inherit; }
.on-home-free-content .on-button { margin-top:20px; }
@media(min-width:820px) { .on-home-free-content.has-image { grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); align-items:center; } }