/* OceanSphere Industrial — gemeinsames Gestaltungssystem der Familie (v1, 2026-09-09)
   Gilt fuer alle Werkzeugseiten (Engines, Parts, Network, Work) und die Eingangshalle.
   Regeln: Navy/Stahl/Weiss. Gold NUR auf dem Anfrageknopf. Keine Schatten, keine Kartenrahmen um alles.
   Breite fliessend bis 1760 px. Inter fuer alles, Cormorant nur im Wortzeichen. */

:root{
  --os-navy:#0e2a3b;
  --os-navy-2:#16384c;
  --os-navy-3:#1f4a63;
  --os-steel:#5e7686;
  --os-steel-2:#8ea6b4;
  --os-line:#d9e1e7;
  --os-line-2:#eef2f5;
  --os-bg:#ffffff;
  --os-bg-2:#f4f7f9;
  --os-ink:#14212b;
  --os-ink-2:#3b4d5a;
  --os-gold:#b88a3e;
  --os-gold-2:#a37a33;
  --os-ok:#1f7a4d;
  --os-warn:#b3541e;
  --os-radius:4px;
  --os-wrap:1760px;
  --os-side:264px;
  --os-font:"Inter",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --os-mark:"Cormorant Garamond",Georgia,"Times New Roman",serif;
}

html{-webkit-text-size-adjust:100%}
body.os{margin:0;background:var(--os-bg);color:var(--os-ink);font-family:var(--os-font);font-size:15px;line-height:1.5}
.os a{color:var(--os-navy-2);text-decoration:none}
.os a:hover{text-decoration:underline}
.os *,.os *::before,.os *::after{box-sizing:border-box}

/* ---------- Breite ---------- */
.os-wrap{max-width:var(--os-wrap);margin:0 auto;padding:0 32px}
@media (max-width:900px){.os-wrap{padding:0 16px}}

/* ---------- Familienleiste (oben, 36 px) ---------- */
.os-topbar{background:var(--os-navy);color:#c9d6de;font-size:12.5px;height:39px;border-top:3px solid var(--os-gold)}
.os-brand .os-mark{width:28px;height:28px;flex:0 0 28px;align-self:center;margin-right:2px}
.os-brand .os-mark svg{width:100%;height:100%;display:block}
.os-topbar .os-wrap{display:flex;align-items:center;height:36px;gap:18px}
.os-topbar a{color:#c9d6de;white-space:nowrap}
.os-topbar a.is-current{color:#fff;font-weight:600;border-bottom:2px solid var(--os-gold);padding-bottom:8px;margin-bottom:-10px}
.os-topbar .os-fam{display:flex;gap:18px;overflow-x:auto;scrollbar-width:none}
.os-topbar .os-fam::-webkit-scrollbar{display:none}
.os-topbar .os-fam-label{color:#8ea6b4;letter-spacing:.06em;text-transform:uppercase;font-size:11px;margin-right:4px}
.os-topbar .os-right{margin-left:auto;display:flex;gap:18px;align-items:center}
@media (max-width:900px){.os-topbar .os-right{display:none}}

/* ---------- Kopfleiste ---------- */
.os-header{background:var(--os-bg);border-bottom:1px solid var(--os-line);position:sticky;top:0;z-index:50}
.os-header .os-wrap{display:flex;align-items:center;height:64px;gap:28px}
.os-brand{display:flex;align-items:baseline;gap:8px;white-space:nowrap;text-decoration:none}
.os-brand .os-wordmark{font-family:var(--os-mark);font-weight:600;font-size:24px;color:var(--os-navy);letter-spacing:.01em}
.os-brand .os-product{font-family:var(--os-font);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--os-steel);font-weight:600}
.os-nav{display:flex;gap:22px;font-size:14px;font-weight:500}
.os-nav a{color:var(--os-ink-2);padding:22px 0}
.os-nav a:hover,.os-nav a.is-current{color:var(--os-navy);text-decoration:none;box-shadow:inset 0 -2px 0 var(--os-navy)}
.os-header .os-cta{margin-left:auto;display:flex;gap:10px;align-items:center}
.os-search{flex:1;max-width:520px;display:flex;border:1px solid var(--os-line);border-radius:var(--os-radius);overflow:hidden;background:#fff}
.os-search input{flex:1;border:0;padding:9px 12px;font:inherit;font-size:14px;outline:none;min-width:0;color:var(--os-ink);background:#fff;caret-color:var(--os-ink)}
.os-search input::placeholder{color:var(--os-steel)}
.os-hero .os-search input,.os-hero .os-search input:focus{color:var(--os-ink);caret-color:var(--os-ink)}
/* Vorschlagsliste beim Tippen (os-search.js) */
.os-search{position:relative;overflow:visible}
.os-suggest{position:absolute;left:0;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--os-line);border-radius:var(--os-radius);box-shadow:0 8px 24px rgba(14,42,59,.12);z-index:60;max-height:420px;overflow-y:auto;text-align:left}
.os-suggest[hidden]{display:none}
.os-suggest .os-sg-group{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--os-steel);padding:8px 12px 4px;border-top:1px solid var(--os-line-2)}
.os-suggest .os-sg-group:first-child{border-top:0}
.os-suggest a{display:flex;justify-content:space-between;gap:12px;padding:7px 12px;color:var(--os-ink);font-size:14px;text-decoration:none}
.os-suggest a:hover,.os-suggest a.is-active{background:var(--os-bg-2);text-decoration:none}
.os-suggest a .os-sg-sub{color:var(--os-steel);font-size:12.5px;white-space:nowrap}
.os-suggest a mark{background:transparent;color:var(--os-navy);font-weight:700}
.os-suggest .os-sg-all{padding:8px 12px;font-size:13px;color:var(--os-navy-2);border-top:1px solid var(--os-line)}
.os-search button{border:0;background:var(--os-navy-2);color:#fff;padding:0 16px;font:inherit;font-weight:600;cursor:pointer}
.os-burger{display:none;border:1px solid var(--os-line);background:#fff;border-radius:var(--os-radius);width:40px;height:36px;font-size:18px;cursor:pointer}
.os-search{min-width:220px}
.os-nav{flex-shrink:1;min-width:0}
@media (max-width:1500px){.os-nav{gap:16px;font-size:13.5px}.os-header .os-cta .os-btn-ghost{display:none}.os-search{max-width:380px}}
@media (max-width:1100px){.os-nav{display:none}.os-burger{display:block}.os-search{max-width:none;min-width:0}}
@media (max-width:700px){.os-header .os-cta .os-btn-ghost{display:none}.os-header .os-search{display:none}}
/* v8: Suchfelder ausserhalb der Kopfzeile (Hero) bleiben auf dem Telefon sichtbar */
@media (max-width:700px){.os-hero .os-search{max-width:none;min-width:0}}

/* ---------- Mobilmenue (Burger) ----------
   Ab 1100px verschwinden .os-nav und (bei os-right) Konto/Sprache aus der Kopfzeile;
   das Mobilmenue haelt beides als Liste bereit, sichtbar nur bei body.os-menu-open. */
.os-mobile-menu{display:none;background:#fff;border-bottom:1px solid var(--os-line)}
body.os-menu-open .os-mobile-menu{display:block}
@media (min-width:1101px){.os-mobile-menu{display:none!important}}
.os-mobile-menu .os-wrap{padding-top:12px;padding-bottom:16px}
.os-mobile-menu nav{display:flex;flex-direction:column}
.os-mobile-menu a{color:var(--os-ink-2);padding:10px 0;font-size:15px;font-weight:500;border-bottom:1px solid var(--os-line-2)}
.os-mobile-menu a.is-current{color:var(--os-navy);font-weight:700}
.os-mobile-menu hr{border:0;border-top:1px solid var(--os-line);margin:6px 0}
.os-mobile-menu .langsw{display:flex;gap:10px;padding:12px 0 0}

/* ---------- Knoepfe ---------- */
.os-btn{display:inline-flex;align-items:center;gap:8px;border-radius:var(--os-radius);padding:9px 16px;font:inherit;font-size:14px;font-weight:600;line-height:1;border:1px solid var(--os-navy-2);background:var(--os-navy-2);color:#fff;cursor:pointer;white-space:nowrap;text-decoration:none}
.os-btn:hover{background:var(--os-navy);border-color:var(--os-navy);text-decoration:none;color:#fff}
.os-btn-gold{background:var(--os-gold);border-color:var(--os-gold);color:#fff}
.os-btn-gold:hover{background:var(--os-gold-2);border-color:var(--os-gold-2)}
.os-btn-ghost{background:#fff;color:var(--os-navy-2)}
.os-btn-ghost:hover{background:var(--os-bg-2);color:var(--os-navy)}
.os-btn-lg{padding:13px 22px;font-size:15px}
.os-btn-sm{padding:6px 10px;font-size:12.5px}
/* v4: .os a{color} hat hoehere Spezifitaet als .os-btn — Knopffarben ausdruecklich setzen */
.os a.os-btn,.os a.os-btn:hover,.os a.os-btn-gold,.os a.os-btn-gold:hover{color:#fff}
.os a.os-btn-ghost{color:var(--os-navy-2)}
.os a.os-btn-ghost:hover{color:var(--os-navy)}
.os-hero a.os-btn-ghost,.os-hero a.os-btn-ghost:hover{color:#fff}

/* ---------- Seitenaufbau: Filter links, Inhalt rechts ---------- */
.os-page{padding:24px 0 48px}
.os-grid{display:grid;grid-template-columns:var(--os-side) minmax(0,1fr);gap:32px}
@media (max-width:1100px){.os-grid{grid-template-columns:1fr}}
.os-side h4{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--os-steel);margin:18px 0 8px}
.os-side ul{list-style:none;margin:0;padding:0}
.os-side li{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--os-line-2);font-size:13.5px}
.os-side li .n{color:var(--os-steel);font-variant-numeric:tabular-nums}

/* ---------- Titelzeile ---------- */
.os-titlebar{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap;margin:0 0 18px}
.os-titlebar h1{font-size:26px;font-weight:700;letter-spacing:-.01em;margin:0;color:var(--os-navy)}
.os-titlebar .os-meta{color:var(--os-steel);font-size:13.5px}
.os-titlebar .os-actions{margin-left:auto;display:flex;gap:10px}
.os-kicker{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--os-steel);font-weight:600;margin:0 0 6px}

/* ---------- Tabellen ---------- */
.os-table{width:100%;border-collapse:collapse;font-size:13.5px}
.os-table th{position:sticky;top:64px;background:var(--os-bg-2);text-align:left;font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--os-steel);padding:10px 12px;border-bottom:1px solid var(--os-line);z-index:1}
.os-table td{padding:9px 12px;border-bottom:1px solid var(--os-line-2);vertical-align:top}
.os-table tr:hover td{background:#fbfcfd}
.os-table td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.os-table td.act{text-align:right;white-space:nowrap}
.os-table .sub{display:block;color:var(--os-steel);font-size:12.5px}
.os-table-wrap{overflow-x:auto}

/* ---------- Kennzahlen ---------- */
.os-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--os-line);border:1px solid var(--os-line);border-radius:var(--os-radius);overflow:hidden}
.os-stat{background:#fff;padding:16px 18px}
.os-stat .v{font-size:26px;font-weight:700;color:var(--os-navy);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.os-stat .l{font-size:12.5px;color:var(--os-steel);margin-top:2px}

/* ---------- Karten (nur fuer Tueren/Leistungen) ---------- */
.os-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.os-card{border:1px solid var(--os-line);border-radius:var(--os-radius);padding:20px;background:#fff;display:flex;flex-direction:column;gap:8px}
.os-card h3{margin:0;font-size:17px;color:var(--os-navy)}
.os-card p{margin:0;color:var(--os-ink-2);font-size:14px}
.os-card .os-card-foot{margin-top:auto;padding-top:8px}
.os-card:hover{border-color:var(--os-steel-2)}

/* ---------- Kennzeichen / Belegzeichen ---------- */
.os-tag{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:3px;border:1px solid var(--os-line);color:var(--os-steel);background:#fff;vertical-align:middle}
.os-tag-ok{border-color:#bfe0cc;color:var(--os-ok);background:#f2faf5}
.os-tag-warn{border-color:#f0d3bf;color:var(--os-warn);background:#fdf5ee}

/* ---------- Hinweiskasten ---------- */
.os-note{border-left:3px solid var(--os-navy-2);background:var(--os-bg-2);padding:12px 16px;font-size:14px;border-radius:0 var(--os-radius) var(--os-radius) 0}

/* ---------- Formulare ---------- */
.os-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
.os-form .full{grid-column:1/-1}
.os-form label{display:block;font-size:12.5px;font-weight:600;color:var(--os-ink-2);margin:0 0 5px}
.os-form input,.os-form select,.os-form textarea{width:100%;border:1px solid var(--os-line);border-radius:var(--os-radius);padding:9px 11px;font:inherit;font-size:14px;background:#fff}
.os-form input:focus,.os-form select:focus,.os-form textarea:focus{outline:2px solid var(--os-navy-3);outline-offset:-1px}
@media (max-width:700px){.os-form{grid-template-columns:1fr}}

/* ---------- Held (Eingangshalle, Leistungsseiten) ---------- */
.os-hero{background:var(--os-navy);color:#fff;padding:64px 0 56px;position:relative;overflow:visible}
.os-hero .os-wrap{position:relative;z-index:2}
.os-hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/96px 96px,
  linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/96px 96px;pointer-events:none}

.os-hero h1{font-size:44px;line-height:1.1;letter-spacing:-.02em;margin:0 0 14px;max-width:16em;font-weight:700}
.os-hero p.lead{font-size:18px;color:#c9d6de;max-width:40em;margin:0 0 26px}
.os-hero .os-hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.os-hero .os-btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.os-hero .os-btn-ghost:hover{background:rgba(255,255,255,.08);color:#fff}
@media (max-width:700px){.os-hero{padding:40px 0 36px}.os-hero h1{font-size:30px}.os-hero p.lead{font-size:16px}}


/* ---------- Bewegung (v7, 2026-09-10) — dezent, nur mit JS (html.js), aus bei prefers-reduced-motion ---------- */
html.js [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
html.js [data-reveal].is-in{opacity:1;transform:none}
html.js [data-reveal][data-delay="1"]{transition-delay:.08s}
html.js [data-reveal][data-delay="2"]{transition-delay:.16s}
html.js [data-reveal][data-delay="3"]{transition-delay:.24s}
.os-card{transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.os-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(14,42,59,.08)}
.os-hero::after{animation:os-drift 90s linear infinite}
@keyframes os-drift{to{background-position:96px 96px,96px 96px}}
.os-hero-visual{position:absolute;right:0;top:0;bottom:0;width:48%;z-index:1;pointer-events:none;
  background:var(--os-hero-bild) center/contain no-repeat;opacity:.92;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%);
  animation:os-float 7s ease-in-out infinite alternate;will-change:transform}
@keyframes os-float{from{transform:translateY(-6px)}to{transform:translateY(8px)}}
.os-hero.has-visual .os-wrap{position:relative;z-index:2}
.os-hero.has-visual h1{max-width:min(16em,52%)}
.os-hero.has-visual p.lead{max-width:52%}
.os-hero.has-visual .os-search{max-width:min(720px,52%)}
@media (max-width:1100px){.os-hero-visual{display:none}.os-hero.has-visual h1,.os-hero.has-visual p.lead{max-width:none}}
@media (prefers-reduced-motion:reduce){
  html.js [data-reveal]{opacity:1;transform:none;transition:none}
  .os-hero::after,.os-hero-visual{animation:none}
  .os-card,.os-card:hover{transform:none;box-shadow:none;transition:none}
}


/* ---------- Hero mit Kennzahlentafel rechts (v9, 2026-09-10) ---------- */
.os-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,440px);gap:56px;align-items:center}
.os-hero-panel{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:6px;padding:22px 24px;display:grid;grid-template-columns:1fr 1fr;gap:20px 18px}
.os-hero-panel .os-hp{min-width:0}
.os-hero-panel .v{font-size:30px;font-weight:700;color:#fff;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.os-hero-panel .l{font-size:12.5px;color:#c9d6de;margin-top:4px}
.os-hero-panel .os-hp-note{grid-column:1/-1;font-size:12.5px;color:#8ea6b4;border-top:1px solid rgba(255,255,255,.12);padding-top:12px;margin-top:2px}
.os-hero-grid h1{max-width:15em}
.os-hero-grid p.lead{max-width:34em}
@media (max-width:1100px){.os-hero-grid{grid-template-columns:1fr;gap:28px}.os-hero-panel{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.os-hero-panel{grid-template-columns:1fr}}

/* ---------- Abschnitte ---------- */
.os-section{padding:44px 0}
.os-section h2{font-size:24px;letter-spacing:-.01em;margin:0 0 6px;color:var(--os-navy)}
.os-section p.sub{margin:0 0 22px;color:var(--os-ink-2);max-width:60em}
.os-section.alt{background:var(--os-bg-2)}
.os-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;counter-reset:s}
.os-step{position:relative;padding-top:6px}
.os-step::before{counter-increment:s;content:counter(s,decimal-leading-zero);display:block;font-size:12px;letter-spacing:.14em;color:var(--os-gold);font-weight:700;margin-bottom:8px}
.os-step h3{margin:0 0 6px;font-size:16px;color:var(--os-navy)}
.os-step p{margin:0;font-size:14px;color:var(--os-ink-2)}

/* ---------- Fuss ---------- */
.os-footer{background:var(--os-navy);color:#8ea6b4;font-size:13px;padding:36px 0 24px;margin-top:48px}
.os-footer a{color:#c9d6de}
.os-footer .os-cols{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:28px}
.os-footer h5{color:#fff;font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 10px}
.os-footer ul{list-style:none;margin:0;padding:0}
.os-footer li{margin:0 0 6px}
.os-footer .os-wordmark{font-family:var(--os-mark);font-size:22px;color:#fff;font-weight:600}
.os-footer .os-legal{border-top:1px solid rgba(255,255,255,.12);margin-top:24px;padding-top:16px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px}
.familie-zeile{font-size:.78rem;opacity:.85;margin-top:14px;line-height:1.7}
@media (max-width:900px){.os-footer .os-cols{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.os-footer .os-cols{grid-template-columns:1fr}}

/* ---------- Hilfsklassen ---------- */
.os-muted{color:var(--os-steel)}
.os-mt0{margin-top:0}.os-mb0{margin-bottom:0}
.os-hide-mobile{display:initial}
@media (max-width:700px){.os-hide-mobile{display:none}}
[hidden]{display:none!important}

/* ---------- Suchhinweise (Korrektur / keine Treffer, 09.09.2026) ---------- */
.os-note{background:#eef6ff;border:1px solid #bfdbfe;border-radius:var(--os-radius);padding:12px 16px;font-size:14px;color:var(--os-ink)}
.os-note a{color:var(--os-navy-2);text-decoration:underline}
.os-note-empty{background:var(--os-bg-2);border-color:var(--os-line);text-align:center;padding:28px;color:var(--os-ink-2)}
.os-note-empty p{margin:0 0 16px}
.os-note-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ---------- Maritime-Zusatzregeln (aus vorherigem Stand erhalten, 2026-09-09) ---------- */
@media (max-width:1100px){.os-grid{grid-template-columns:1fr}.os-grid>.os-side{order:2}.os-grid>.os-main,.os-grid>*:not(.os-side){order:1}}
/* Filterlisten auf schmalen Schirmen einklappbar (details.os-side-fold) */
details.os-side-fold>summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--os-navy-2);padding:10px 0;border-top:1px solid var(--os-line);border-bottom:1px solid var(--os-line);list-style:none}
details.os-side-fold>summary::-webkit-details-marker{display:none}
@media (min-width:1101px){details.os-side-fold>summary{display:none}}
/* details.os-side-fold wird mit dem Attribut open gerendert; auf dem Telefon kann der Nutzer einklappen */
.os-table th{position:sticky;top:0;background:var(--os-bg-2);text-align:left;font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--os-steel);padding:10px 12px;border-bottom:1px solid var(--os-line);z-index:1}
/* In einem Scroll-Container klebt th relativ zum Container: dort nicht kleben (v2, 2026-09-09) */
.os-table-wrap .os-table th{position:static}
/* Zeilenknoepfe in Tabellen: ruhig, Gold nur fuer den Hauptknopf der Seite */
.os-table .os-btn-sm{padding:5px 9px;font-size:12px}
/* Gestapelte Zeilen auf schmalen Schirmen (v3, 2026-09-09): <table class="os-table os-table-stack">,
   jede Zelle traegt data-label="Spaltenname"; Aktionszellen class="act" stehen als letzte Zeile. */
@media (max-width:700px){
  .os-table.os-table-stack thead{display:none}
  .os-table.os-table-stack tr{display:block;padding:10px 0;border-bottom:1px solid var(--os-line)}
  .os-table.os-table-stack td{display:block;border:0;padding:2px 0;text-align:left}
  .os-table.os-table-stack td[data-label]::before{content:attr(data-label) " ";font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--os-steel);margin-right:6px}
  .os-table.os-table-stack td.primary{font-weight:600;font-size:15px}
  .os-table.os-table-stack td.primary::before{content:none}
  .os-table.os-table-stack td.act{padding-top:8px;display:flex;gap:8px;white-space:normal}
  .os-table.os-table-stack td.act::before{content:none}
  .os-table.os-table-stack td.num{text-align:left}
}
/* Fuenfte Spalte fuer Apps, die neben der Familien-/Anfrage-/Rechtsspalte noch
   eigene Bestandslinks unterbringen muessen (z.B. Network: Register, News,
   Themen, Tarife) - eigene Klasse statt Inline-Styles, respektiert dieselben
   Kollabierregeln wie .os-cols. */
.os-footer .os-cols-5{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:28px}
@media (max-width:900px){.os-footer .os-cols{grid-template-columns:1fr 1fr}.os-footer .os-cols-5{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.os-footer .os-cols{grid-template-columns:1fr}.os-footer .os-cols-5{grid-template-columns:1fr}}

/* ── v11 (10.09.2026): Dropdowns in der Hauptnavigation (News · ShipMind · Parts) ──
   Reines CSS: :hover + :focus-within, Tastatur-tauglich. Kein JS noetig.
   Im Mobilmenue (<1100 px) werden die Untereintraege flach gelistet (.os-mm-group). */
.os-nav{align-items:stretch}
.os-nav>a{display:inline-flex;align-items:center}
.os-nav .os-dd{position:relative;display:inline-flex;align-items:stretch}
.os-nav .os-dd>a{display:inline-flex;align-items:center;gap:6px}
.os-nav .os-dd>a::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.7}
.os-nav .os-dd-menu{position:absolute;left:-14px;top:100%;min-width:300px;background:#fff;border:1px solid var(--os-line);border-radius:var(--os-radius);box-shadow:0 12px 32px rgba(14,42,59,.14);padding:10px 0 8px;z-index:70;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s}
.os-nav .os-dd:hover>.os-dd-menu,.os-nav .os-dd:focus-within>.os-dd-menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.os-nav .os-dd-menu .os-dd-head{padding:4px 18px 8px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--os-steel);border-bottom:1px solid var(--os-line-2);margin-bottom:6px}
.os-nav .os-dd-menu .os-dd-head strong{display:block;font-size:13.5px;letter-spacing:0;text-transform:none;color:var(--os-navy);margin-top:2px;font-weight:600}
.os-nav .os-dd-menu a{display:block;padding:7px 18px;font-size:13.5px;font-weight:500;color:var(--os-ink);box-shadow:none}
.os-nav .os-dd-menu a:hover{background:var(--os-bg-2);color:var(--os-navy);box-shadow:none}
.os-nav .os-dd-menu a small{display:block;font-weight:400;color:var(--os-steel);font-size:12px;margin-top:1px}
.os-nav .os-dd-menu .os-dd-news a{white-space:normal;line-height:1.3;font-weight:400;padding:6px 18px}
.os-nav .os-dd-menu .os-dd-news a:hover{color:var(--os-navy)}
.os-nav .os-dd-menu .os-dd-foot{margin-top:6px;padding:8px 18px 0;border-top:1px solid var(--os-line-2);display:flex;gap:16px;flex-wrap:wrap}
.os-nav .os-dd-menu .os-dd-foot a{padding:4px 0;color:var(--os-navy-2);font-weight:600}
.os-nav .os-dd-menu .os-dd-foot a:hover{background:transparent}
.os-nav .os-dd-wide{min-width:380px}
.os-mobile-menu .os-mm-group{padding:8px 0 2px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--os-steel)}
.os-mobile-menu a.os-mm-sub{padding-left:14px}
.os-mobile-menu a.os-mm-sub{padding-left:14px}

/* v12 (10.09.2026): echte Telefone (360-430 px) - Kopfzeile lief auf 470 px ueber (Marke + Goldknopf + Burger).
   Produktwort ausblenden, Wortmarke kleiner, Knopf kompakter; Seite darf nie seitlich scrollen. */
@media (max-width:520px){
  .os-brand .os-product{display:none}
  .os-brand .os-wordmark{font-size:20px}
  .os-header .os-cta{gap:6px}
  .os-header .os-cta .os-btn{padding:8px 10px;font-size:13px}
  .os-header .os-wrap{gap:10px}
  body{overflow-x:hidden}
}


/* v13 (10.09.2026 Praezisionsrunde Rest): 492-px-Sichtpruefung - kein Element darf
   breiter als der Viewport werden. Modellbild (equipment_model.html .modell-kopf)
   und Kennwert-Raster (.os-td-grid) bekommen eine feste Obergrenze, auch wenn ein
   Bild ohne eigene Breitenklasse eingebunden wird. */
.os-td-grid img,.modell-kopf img{max-width:100%;height:auto}

/* v14 (10.09.2026, Joshua: blau auf blau) - alte Knopfklassen ohne os-Praefix (.btn, .btn-ghost, .btn-gold,
   49 Stellen in Vorlagen) verlieren gegen `.os a{color}` (hoehere Spezifitaet als .btn). Farben+Flaechen
   wie os-btn nachbilden, bis Vorlagen auf .os-btn umgestellt sind. */
.os a.btn,.os a.btn:hover,.os a.btn:focus{color:#fff}
.os a.btn-gold,.os a.btn-gold:hover{color:#fff}
.os a.btn-ghost,.os a.btn-ghost:hover{color:var(--os-navy-2)}
.os .btn,.os .btn-ghost,.os .btn-gold{display:inline-flex;align-items:center;gap:8px;border-radius:var(--os-radius);padding:9px 16px;font:inherit;font-size:14px;font-weight:600;line-height:1;border:1px solid transparent;text-decoration:none;white-space:nowrap}
.os .btn{background:var(--os-navy-2);border-color:var(--os-navy-2)}
.os .btn:hover{background:var(--os-navy);border-color:var(--os-navy)}
.os .btn-gold{background:var(--os-gold);border-color:var(--os-gold)}
.os .btn-gold:hover{background:var(--os-gold-2);border-color:var(--os-gold-2)}
.os .btn-ghost{background:#fff;border-color:var(--os-line)}
.os .btn-ghost:hover{background:var(--os-bg-2);border-color:var(--os-line)}
.os .btn-sm{padding:6px 10px;font-size:12.5px}

/* v-mobil (10.09.2026): echte Telefone 360-430 px. Kopfzeile lief ueber (Marke + Goldknopf + Burger):
   Produktwort weg, Wortmarke kleiner, Knopf kompakt; Seite darf nie seitlich scrollen. */
@media (max-width:520px){
  .os-brand .os-product{display:none}
  .os-brand .os-wordmark{font-size:20px}
  .os-header .os-cta{gap:6px}
  .os-header .os-cta .os-btn{padding:8px 10px;font-size:13px}
  .os-header .os-wrap{gap:10px}
  html,body{overflow-x:hidden;max-width:100%}
}
@media (max-width:700px){
  .os-wrap{min-width:0}
  .os-hero-grid,.os-hero-grid>*{min-width:0;max-width:100%}
  .os-hero-panel{grid-template-columns:1fr 1fr}
  .os-hero{overflow-x:hidden}
  .os img,.os svg,.os video{max-width:100%;height:auto}
  .os table:not(.os-table-stack){display:block;overflow-x:auto;max-width:100%}
  .os .os-btn{white-space:normal}
  .os-cards,.os-stats{grid-template-columns:1fr}
}

/* v-mobil engines: Modellkopf (Tailwind shrink-0 + langer Knopf 502 px) */
@media (max-width:700px){
  .os-model-page .shrink-0{flex-shrink:1;min-width:0;max-width:100%}
  .os-model-page .modell-kopf .os-btn{width:100%;justify-content:center;white-space:normal}
  .os-model-page .w-48{max-width:100%}
}

/* v-mobil-2 engines (10.09.2026): Tailwind .shrink-0-Spalten (z. B. Anfrageknopf in .os-note) duerfen auf Telefonen schrumpfen. */
@media (max-width:700px){
  .os .shrink-0{flex-shrink:1;min-width:0;max-width:100%}
  .os .os-note .os-btn,.os .flex-col .os-btn{width:100%;justify-content:center;white-space:normal;text-align:center}
  .os .flex.flex-wrap>*{min-width:0;max-width:100%}
}

/* v-mobil-3 engines (10.09.2026): festes Tailwind-Bild w-48 (192 px) lief rechts ueber; Brotkrumen duerfen umbrechen. */
@media (max-width:700px){
  .os .w-48{width:auto;max-width:150px}
  .os .h-48{height:auto}
  .os nav.breadcrumb,.os .breadcrumb,.os nav[aria-label="Breadcrumb"]{flex-wrap:wrap;white-space:normal}
}

/* v-mobil-3 (10.09.2026): Familienzeile — auf Telefonen das Wort OCEANSPHERE weglassen, damit alle fuenf Tueren sichtbar sind.
   Alte Ghost-Knoepfe (.btn-ghost) im dunklen Hero: weiss auf weiss -> transparent mit weisser Schrift. */
@media (max-width:520px){
  .os-fam-label{display:none}
  .os-fam{gap:14px;font-size:13px}
  .os-topbar .os-right{display:none}
}
.os-hero .btn-ghost,.os-hero a.btn-ghost,.os-hero a.btn-ghost:hover{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.os-hero .btn,.os-hero a.btn{color:#fff}

/* v-mobil-4 engines (10.09.2026): Brotkrumen auf Telefonen umbrechen statt jede Krume auf ein Wort zu quetschen. */
@media (max-width:700px){
  .os-model-page nav.flex,.os nav.flex.items-center.gap-2{flex-wrap:wrap;row-gap:2px}
  .os-model-page nav.flex>*{white-space:normal}
}

/* v-dd-z (12.09.2026): Dropdowns muessen ueber Hero-Tafeln und Karten liegen — Kopfzeile als eigener Stapelkontext. */
.os-topbar{position:relative;z-index:91}
.os-header{z-index:90}
.os-nav .os-dd-menu{z-index:95}

/* v-a11y (12.09.2026): Fuss-Ueberschriften ohne Ueberschriftensprung (div statt h5, gleicher Stil); sichtbarer Fokusring im Suchfeld. */
.os-footer .os-foot-h{color:#fff;font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 10px}
.os-search input:focus-visible{outline:2px solid var(--os-navy-2);outline-offset:-2px}

/* v-legal (12.09.2026) */
.legal{max-width:820px;margin:0 auto;padding:32px 20px 64px;line-height:1.6}
.legal h1{font-size:30px;margin:0 0 6px}
.legal .legal-meta{color:var(--os-steel);font-size:13px;margin:0 0 28px}
.legal h2{font-size:20px;margin:34px 0 10px}
.legal h3{font-size:16px;margin:24px 0 8px}
.legal p,.legal li{font-size:15px}
.legal table.legal-table{width:100%;border-collapse:collapse;font-size:13.5px;margin:12px 0 20px;display:block;overflow-x:auto}
.legal .legal-table th,.legal .legal-table td{border:1px solid var(--os-line);padding:8px 10px;text-align:left;vertical-align:top}
.legal .legal-table th{background:var(--os-bg-2)}
.legal code{font-size:13px}

/* v-legal-mobil (12.09.2026): lange Ueberschriften umbrechen, keine doppelten Innenabstaende in Karten, Tabellen scrollen. */
.legal h1{font-size:clamp(22px,7vw,30px);overflow-wrap:anywhere;hyphens:auto}
.legal h2{overflow-wrap:anywhere}
.rt .legal,.card .legal{padding-left:0;padding-right:0}
@media (max-width:520px){.legal{padding-top:16px}.legal h2{font-size:18px}.legal h3{font-size:15px}}

/* v-beleg (12.09.2026) */
.os-beleg{font-size:13px;color:var(--os-steel);margin-top:6px;line-height:1.5}
.os-beleg a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.os-beleg a:hover{color:var(--os-navy-2,#1d4ed8)}
#beitrag{scroll-margin-top:76px}