/* OceanSphere Industrial — gemeinsames Gestaltungssystem der Familie (v3, 2026-09-09: Tabellenkopf, Filter mobil, gestapelte Tabellen)
   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:36px}
.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}
.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}
.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}
@media (max-width:1100px){.os-nav{display:none}.os-burger{display:block}.os-search{max-width:none}}
@media (max-width:700px){.os-header .os-cta .os-btn-ghost{display:none}.os-search{display:none}}

/* ---------- 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}

/* ---------- 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-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-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: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}
.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}
/* 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}
}

/* ---------- 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:hidden}
.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 .os-wrap{position:relative;z-index:1}
.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}}

/* ---------- 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}
/* Funfte 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}
.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}.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}}

/* ---------- 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}