/* OceanSphere Fabrication — Oberflaeche (abgeleitet von Additive) im OceanSphere-Hausschema.
   Zeichen fuer Zeichen dieselben Variablen wie engines.oceansphere.io,
   maritimenetwork.io und parts.oceansphere.io: helles Creme, Navy-Kopf mit
   3px Goldkante, Cormorant Garamond fuer Ueberschriften, Inter fuer Text,
   weisse Karten mit 12px Radius und weichem Schatten. Kein Dunkelmodus. */
:root{
  --navy:#0e2a3b;  --navy2:#16384c;
  --gold:#b88a3e;  --gold2:#d9b877;
  --cream:#f6f2ea; --paper:#fff;
  --ink:#1d2c34;   --muted:#6d7d88; --line:#e7dfd0;
  --ok:#2e7d57;    --blue:#2c6e8f;  --red:#a5462f;
  --muted-text:#5f6e78; --ok-text:#2b7350; --gold-text:#8a6425;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --radius:12px; --schatten:0 6px 24px rgba(14,42,59,.06); --schatten-hoch:0 10px 28px rgba(14,42,59,.14);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.6;min-height:100vh;display:flex;flex-direction:column}
main{flex:1 0 auto}
a{color:var(--blue);text-decoration:none}a:hover{color:var(--navy);text-decoration:underline}
img,svg{max-width:100%;display:block}
h1,h2,h3,h4,.serif{font-family:var(--serif);color:var(--navy);font-weight:600;line-height:1.15;letter-spacing:.2px;margin:0}
h1{font-size:2.4rem}h2{font-size:1.9rem}h3{font-size:1.3rem}h4{font-size:1.1rem}
p{margin:0 0 1em}p:last-child{margin-bottom:0}
.mute{color:var(--muted-text)}.klein{font-size:12.5px}.mono{font-family:var(--mono)}
.lbl,.ueberzeile{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.lbl{color:var(--muted-text)}.ueberzeile{color:var(--gold-text);display:block;margin-bottom:10px}
.hero .ueberzeile,.band-navy .ueberzeile{color:var(--gold2)}
hr{border:0;border-top:1px solid var(--line);margin:24px 0}
.skip{position:absolute;left:-999px;top:8px;background:var(--navy);color:#fff;padding:10px 14px;border-radius:8px;z-index:100;font-weight:600}
.skip:focus{left:8px}
.nur-vorleser{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
header.top :focus-visible,.hero :focus-visible,footer :focus-visible,.band-navy :focus-visible{outline-color:var(--gold2)}

/* ---- Layout ---- */
.wrap{width:100%;max-width:1140px;margin:0 auto;padding:0 22px}
.abschnitt{padding-block:48px}
.abschnitt-eng{padding-block:28px}
.abschnitt-kopf{max-width:70ch;margin-bottom:26px}
.abschnitt-kopf p{color:var(--muted-text);font-size:1.05rem}
.raster{display:grid;gap:20px}
.raster-2{grid-template-columns:repeat(auto-fill,minmax(max(280px,(100% - 20px)/2),1fr))}
.raster-3{grid-template-columns:repeat(auto-fill,minmax(max(250px,(100% - 40px)/3),1fr))}
.raster-4{grid-template-columns:repeat(auto-fill,minmax(max(220px,(100% - 60px)/4),1fr))}
.zwei{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:36px;align-items:center}
@media(max-width:820px){.zwei{grid-template-columns:1fr}}
.knoepfe{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.stapel{display:flex;flex-direction:column;gap:12px}

/* ---- Kopf (Hausschema 4) ---- */
header.top{background:var(--navy);border-top:3px solid var(--gold);color:#eaf1f5}
.topbar{max-width:1140px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;gap:18px;min-height:68px}
.brand{display:flex;align-items:center;gap:11px;color:#fff;flex-shrink:0}
.brand:hover{color:#fff;text-decoration:none}
.brand svg{width:30px;height:30px;color:var(--gold2)}
.brand .nm{font-family:var(--serif);font-size:1.5rem;font-weight:700;line-height:1;display:block;letter-spacing:.2px}
.brand .sub{font-size:.62rem;letter-spacing:3px;text-transform:uppercase;color:var(--gold2);font-weight:600;display:block}
nav.main{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap;white-space:nowrap}
nav.main a{color:#cdd9e0;padding:8px 13px;border-radius:7px;font-size:.9rem;font-weight:500}
nav.main a:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
nav.main a.active{background:rgba(255,255,255,.12);color:#fff}
nav.main a.cta{background:var(--gold);color:#1a1206;font-weight:600}
nav.main a.cta:hover{background:var(--gold2);color:#1a1206}
.langsw{display:inline-flex;gap:2px;align-items:center;margin-left:4px}
.langsw a{padding:2px 6px;font-weight:600;font-size:.85rem;color:#cdd9e0;border-radius:4px}
.langsw a.on{color:#fff;background:rgba(255,255,255,.18)}
.mnav{display:none;margin-left:auto}
.mnav summary{list-style:none;cursor:pointer;color:#fff;padding:6px;border-radius:7px}
.mnav summary::-webkit-details-marker{display:none}
.mnav[open] summary{background:rgba(255,255,255,.12)}
.mnav-liste{position:absolute;right:16px;left:16px;margin-top:8px;background:var(--navy2);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px;display:flex;flex-direction:column;z-index:50;box-shadow:var(--schatten-hoch)}
.mnav-liste a{color:#eaf1f5;padding:10px 12px;border-radius:8px}
.mnav-liste a:hover{background:rgba(255,255,255,.08);text-decoration:none}
.mnav-liste a.cta{background:var(--gold);color:#1a1206;font-weight:600;margin-top:6px}
.mnav-liste .langsw{padding:8px 12px}
@media(max-width:900px){nav.main{display:none}.mnav{display:block}header.top{position:relative}}

/* ---- Knoepfe ---- */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--navy);color:#fff;border:1px solid transparent;border-radius:8px;padding:11px 18px;font-weight:600;font-size:.92rem;font-family:var(--sans);cursor:pointer;line-height:1.2}
.btn:hover{background:var(--navy2);color:#fff;text-decoration:none}
.btn-gold{background:var(--gold);color:#1a1206}.btn-gold:hover{background:var(--gold2);color:#1a1206}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}.btn-ghost:hover{background:#f0e9d8;border-color:var(--gold);color:var(--ink)}
.hero .btn-ghost,.band-navy .btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}
.hero .btn-ghost:hover,.band-navy .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:var(--gold2);color:#fff}
.btn-gross{padding:14px 24px;font-size:1rem}
.btn-sm{padding:6px 11px;font-size:.82rem;border-radius:6px}

/* ---- Karten ---- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--schatten)}
.card h3{margin-bottom:8px}
.card .ic{width:40px;height:40px;border-radius:10px;background:var(--cream);border:1px solid var(--line);display:grid;place-items:center;color:var(--gold-text);margin-bottom:14px}
.card .ic svg{width:22px;height:22px}
.pill{display:inline-block;font-size:.66rem;padding:3px 9px;border-radius:20px;letter-spacing:.5px;text-transform:uppercase;font-weight:700;border:1px solid var(--line);background:var(--cream);color:var(--muted-text)}
.pill-gold{background:rgba(184,138,62,.12);color:var(--gold-text);border-color:var(--gold)}
.pill-ok{background:rgba(46,125,87,.1);color:var(--ok-text);border-color:var(--ok)}
.pill-navy{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ---- Hero (Hausschema 4) ---- */
.hero{background:linear-gradient(135deg,#0e2a3b,#16384c 70%);color:#eaf1f5;border-radius:16px;padding:52px 48px;position:relative;overflow:hidden;margin-top:26px}
.hero h1{color:#fff;font-size:3rem;max-width:20ch}
.hero p{color:#c7d6de;font-size:1.12rem;max-width:62ch}
.hero .stats{display:flex;gap:36px;flex-wrap:wrap;margin-top:32px}
.hero .stats b{font-family:var(--serif);font-size:2.2rem;color:var(--gold2);display:block;line-height:1;font-weight:600}
.hero .stats span{color:#aebfc8;font-size:.85rem}
.hero-raster{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:36px;align-items:center}
.hero-bild{border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.15);box-shadow:0 20px 50px rgba(0,0,0,.35);aspect-ratio:4/3;background:#0a1f2d}
.hero-bild img{width:100%;height:100%;object-fit:cover}
.hero-klein{position:absolute;bottom:0;left:0;right:0;background:rgba(10,31,45,.82);color:#c7d6de;font-size:.72rem;padding:5px 10px}
@media(max-width:900px){.hero-raster{grid-template-columns:1fr}.hero{padding:34px 24px}.hero h1{font-size:2.2rem}}

/* ---- Vertrauensband ---- */
.trust{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;margin-top:22px}
.trust-feld{display:flex;flex-direction:column;gap:4px;padding:16px 18px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius)}
.trust-feld svg{width:22px;height:22px;color:var(--gold-text);margin-bottom:4px}
.trust-titel{font-family:var(--serif);font-size:1.15rem;color:var(--navy);font-weight:600}

/* ---- Schritte ---- */
.schritte{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.schritt{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--schatten);position:relative}
.schritt .nr{font-family:var(--serif);font-size:2.6rem;color:var(--gold2);line-height:1;font-weight:600;margin-bottom:8px}
.schritt h3{margin-bottom:6px}
.schritt p{color:var(--muted-text);font-size:.93rem}
.schritt .dauer{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:.78rem;color:var(--gold-text)}

/* ---- Bildkacheln (Hausschema .imgtile) ---- */
.imgtile{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .12s,box-shadow .12s;display:flex;flex-direction:column}
.imgtile:hover{transform:translateY(-2px);box-shadow:var(--schatten-hoch)}
.imgtile .im{height:170px;background:#fff;border-bottom:1px solid var(--line);overflow:hidden}
.imgtile .im img{width:100%;height:100%;object-fit:cover}
.imgtile .tx{padding:14px 16px 16px}
.imgtile .t{font-family:var(--serif);font-size:1.15rem;color:var(--navy);font-weight:600;line-height:1.2}
.imgtile .n{color:var(--muted-text);font-size:.85rem;margin-top:4px}
.imgtile .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}

/* ---- Foto mit Text ---- */
.foto{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--schatten);background:#fff}
.foto img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.foto.breit img{aspect-ratio:16/7}
.bildzeile{font-size:.78rem;color:var(--muted-text);padding:8px 12px;border-top:1px solid var(--line);background:var(--paper)}

/* ---- Tabellen ---- */
.tabelle{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--schatten);overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-text);background:var(--cream);white-space:nowrap}
tr:last-child td{border-bottom:0}
td.m{font-family:var(--mono);font-size:.85rem;white-space:nowrap}
.tabelle table{min-width:720px}

/* ---- Navy-Band ---- */
.band-navy{background:var(--navy);color:#dbe6ec;border-radius:16px;padding:40px 44px}
.band-navy h2{color:#fff}.band-navy p{color:#c7d6de}
.band-navy .stats{display:flex;gap:36px;flex-wrap:wrap;margin-top:24px}
.band-navy .stats b{font-family:var(--serif);font-size:2.2rem;color:var(--gold2);display:block;line-height:1}
.band-navy .stats span{color:#aebfc8;font-size:.85rem}
@media(max-width:700px){.band-navy{padding:28px 22px}}

/* ---- Vergleich ---- */
.vergleich{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:700px){.vergleich{grid-template-columns:1fr}}
.vergleich .card.hebt{border-color:var(--gold);box-shadow:0 10px 28px rgba(184,138,62,.16)}
.liste{list-style:none;padding:0;margin:0}
.liste li{padding-left:26px;position:relative;margin:8px 0}
.liste li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--ok)}
.liste-rot li::before{background:var(--red)}
.liste-gold li::before{background:var(--gold)}

/* ---- FAQ ---- */
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:0 22px;margin-bottom:10px;box-shadow:var(--schatten)}
.faq summary{cursor:pointer;padding:16px 0;font-family:var(--serif);font-size:1.2rem;color:var(--navy);font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-size:1.6rem;font-weight:400;flex-shrink:0}
.faq details[open] summary::after{content:"\2013"}
.faq details p{padding-bottom:16px;color:var(--ink)}

/* ---- Formular ---- */
.f{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.f label{font-weight:600;font-size:.9rem;color:var(--navy)}
.f .hilfe{font-size:.8rem;color:var(--muted-text)}
.in{width:100%;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:var(--paper);font-family:var(--sans);font-size:15px;color:var(--ink)}
.in:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px rgba(184,138,62,.18)}
textarea.in{height:auto;min-height:130px;padding:10px 12px;resize:vertical}
input[type=file].in{padding:9px 12px;height:auto}
.form-raster{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media(max-width:640px){.form-raster{grid-template-columns:1fr}}
.fehler{background:#fbeeea;border:1px solid #e3b7ab;color:#7a2e1c;padding:12px 16px;border-radius:8px;margin-bottom:18px}
.fehler ul{margin:6px 0 0;padding-left:18px}
.hinweis{background:#eef6f0;border:1px solid #b6dcc4;color:var(--ok-text);padding:12px 16px;border-radius:8px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.9rem}
.check input{margin-top:4px;width:16px;height:16px;accent-color:var(--navy)}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}

/* ---- Prosa ---- */
.prosa{max-width:76ch}
.prosa h2{margin:32px 0 10px}.prosa h3{margin:22px 0 8px}
.prosa ul,.prosa ol{padding-left:22px}.prosa li{margin:4px 0}

/* ---- Fuss (Hausschema 4) ---- */
footer{background:var(--navy);color:#8ea6b4;padding:32px 0 26px;font-size:.82rem;margin-top:56px}
footer a{color:var(--gold2)}
.fuss-zeile{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}
@media(max-width:760px){.fuss-zeile{grid-template-columns:1fr}}
.fuss-marke{display:flex;flex-direction:column;gap:4px}
.fuss-logo{font-family:var(--serif);font-size:1.4rem;color:#fff;font-weight:700}
.fuss-spalte{display:flex;flex-direction:column;gap:6px}
.fuss-spalte b{color:#cdd9e0;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px}
.fuss-unten{border-top:1px solid rgba(255,255,255,.1);margin-top:22px;padding-top:14px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ---- Admin ---- */
.admin-tab td{font-size:.85rem}
.admin-tab pre{white-space:pre-wrap;font-size:.8rem;margin:0;font-family:var(--mono)}