/* SonarMapper Website (alle Seiten, beide Sprachen) */
:root {
  --navy:#081a33; --navy2:#0d2b52; --navy3:#123a6e;
  --blue:#4aa8e8; --blue2:#7cc4f5; --text:#eaf2fb; --muted:#9db8d8;
  --card:#0f2547; --border:#1d3f6e; --ok:#5fd49a; --warn:#f2b45a;
  /* Glas (dezent, wie Apple Liquid Glass): durchscheinend, unscharf, Lichtkante oben */
  --glass-line:rgba(255,255,255,.10); --glass-hi:inset 0 1px 0 rgba(255,255,255,.07);
  --glass-blur:blur(10px) saturate(130%);
}
* { margin:0; padding:0; box-sizing:border-box; border-radius:0; }   /* eckig, wie im Programm */
body { font-family:"Segoe UI", Arial, sans-serif; background:var(--navy);
       color:var(--text); line-height:1.6; }
a { color:var(--blue2); }
html { scroll-padding-top:84px; }
body::before { content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:radial-gradient(900px 620px at 12% -8%, rgba(74,168,232,.10), transparent 62%),
             radial-gradient(760px 560px at 105% 45%, rgba(74,168,232,.06), transparent 60%),
             radial-gradient(700px 500px at 30% 110%, rgba(124,196,245,.04), transparent 60%); }
.wrap { max-width:1060px; margin:0 auto; padding:0 22px; }
.narrow { max-width:860px; }

/* Kopf */
header.top { padding:14px 0; position:sticky; top:0; z-index:50;
             background:rgba(8,26,51,.62); border-bottom:1px solid var(--glass-line);
             -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%); }
header.top .wrap { display:flex; align-items:center; gap:14px; }
header.top a.home { display:flex; align-items:center; gap:12px;
                    text-decoration:none; color:inherit; }
header.top img { width:42px; height:42px; }
header.top b { font-size:19px; letter-spacing:.5px; }
header.top b span { color:var(--blue); }
header.top nav { margin-left:auto; display:flex; align-items:center; gap:18px; }
header.top nav a.plain { color:var(--muted); text-decoration:none; }
header.top nav a.plain:hover { color:var(--blue2); }
header.top nav a.lang { color:var(--muted); text-decoration:none; font-size:13px;
                        border:1px solid var(--glass-line); padding:4px 9px; letter-spacing:.5px;
                        background:rgba(255,255,255,.05); box-shadow:var(--glass-hi); }
header.top nav a.lang:hover { color:var(--blue2); border-color:var(--blue); }

/* Hinweis: Seite gibt es auch in der anderen Sprache */
.langbar { display:none; background:var(--navy3); color:var(--text);
           font-size:14px; padding:8px 0; }
.langbar .wrap { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.langbar a { font-weight:600; }
.langbar button { margin-left:auto; background:none; border:0; color:var(--muted);
                  font-size:18px; cursor:pointer; line-height:1; }

/* Knoepfe */
.btn { display:inline-block; color:#06182e; font-weight:700; padding:12px 24px;
       text-decoration:none; font-size:16px; border:0; cursor:pointer;
       background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 55%), var(--blue);
       box-shadow:inset 0 1px 0 rgba(255,255,255,.32), inset 0 -1px 0 rgba(0,0,0,.10),
                  0 6px 16px rgba(74,168,232,.14);
       transition:background-color .15s, box-shadow .15s; }
.btn:hover { background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 55%), var(--blue2); }
.btn.ghost { color:var(--blue2); background:rgba(255,255,255,.05);
             border:1px solid rgba(255,255,255,.14); box-shadow:var(--glass-hi);
             -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); }
.btn.ghost:hover { background:rgba(255,255,255,.10); }
.btn.small { padding:8px 16px; font-size:14px; }

/* Startseite */
.hero { padding:64px 0 42px; text-align:center; position:relative; isolation:isolate;
        overflow:hidden; }
/* Tiefenlinien wie im Logo (img/contours.svg aus tools/make_contours.py),
   ueber die ganze Breite, nach oben und unten auslaufend */
.hero::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
                background:url(/img/contours.svg) center / cover no-repeat; opacity:.3;
                -webkit-mask-image:linear-gradient(to bottom, transparent, #000 25%, #000 55%, transparent);
                        mask-image:linear-gradient(to bottom, transparent, #000 25%, #000 55%, transparent); }
.hero img.logo { width:128px; height:128px; margin-bottom:20px; }
.hero h1 { font-size:42px; line-height:1.2; letter-spacing:.3px; }
.hero h1 span { color:var(--blue); }
.hero p.sub { max-width:720px; margin:18px auto 30px; font-size:19px;
              color:var(--muted); }
.btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.shot { padding:10px 0 56px; }
.shot img { width:100%; height:auto; border-radius:10px;
            border:1px solid var(--border); box-shadow:0 24px 60px rgba(0,0,0,.45); }
.shot p { text-align:center; color:var(--muted); font-size:13px; margin-top:10px; }
section { padding:40px 0; }
h2 { font-size:28px; margin-bottom:24px; text-align:center; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
        gap:18px; }
.card { padding:22px; border:1px solid var(--glass-line);
        background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)),
                   rgba(15,37,71,.6);
        box-shadow:var(--glass-hi), 0 12px 32px rgba(0,0,0,.22);
        -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); }
.card h3 { font-size:17px; margin-bottom:8px; color:var(--blue2); }
.card p, .card li { color:var(--muted); font-size:15px; }
.card ol, .card ul { padding-left:20px; }
.card li { margin:4px 0; }
.faq .card { margin-bottom:12px; }
.module { display:grid; grid-template-columns:1.3fr 1fr; gap:28px; align-items:center; }
.module img { width:100%; height:auto; border-radius:10px; border:1px solid var(--border); }
.module h2 { text-align:left; margin-bottom:12px; }
.module p { color:var(--muted); margin-bottom:14px; }
.tag { display:inline-block; font-size:12px; font-weight:700; letter-spacing:.6px;
       text-transform:uppercase; color:#06182e; background:var(--warn);
       padding:3px 9px; margin-bottom:10px; }
/* Funktionen mit Bild, abwechselnd links und rechts */
.feat { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:34px;
        align-items:center; margin:0 0 48px; }
.feat.rev { grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); }
.feat.rev .pic { order:2; }
.feat img { width:100%; height:auto; border-radius:10px; border:1px solid var(--border);
            box-shadow:0 18px 44px rgba(0,0,0,.4); }
.feat h3 { font-size:22px; color:var(--blue2); margin-bottom:10px; }
.feat p { color:var(--muted); }
.feat + .grid { margin-top:12px; }
#sidescan .feat { margin:44px 0 0; }
@media (max-width:760px) {
  .feat, .feat.rev { grid-template-columns:minmax(0,1fr); gap:16px; margin-bottom:36px; }
  .feat.rev .pic { order:0; }
}
.buy { text-align:center; padding:46px 0 70px; }
.buy .with-box { display:grid; grid-template-columns:300px 1fr; gap:30px; align-items:center;
                 max-width:1000px; }
.buy .box { width:100%; height:auto; border-radius:10px; }
@media (max-width:760px) {
  .buy .with-box { grid-template-columns:1fr; }
  .buy .box { max-width:260px; margin:0 auto; }
}
.buy .card { max-width:660px; margin:0 auto; padding:34px; }
.buy .price { font-size:15px; color:var(--muted); margin:12px 0 22px; }
@media (max-width:760px) {
  .module { grid-template-columns:1fr; }
}

/* Unterseiten */
main.page { padding:46px 0 70px; }
main.page h1 { font-size:32px; margin-bottom:8px; }
.lead { color:var(--muted); margin-bottom:28px; font-size:17px; }
main.page h2 { font-size:21px; margin:34px 0 12px; color:var(--blue2); text-align:left; }
p.small { font-size:13px; color:var(--muted); margin-top:8px; }

/* Shop */
.products { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
            gap:18px; margin-top:8px; }
.product { display:flex; flex-direction:column; }
.product.pick { border-color:var(--blue); box-shadow:0 0 0 2px var(--blue) inset; }
.product .amount { font-size:30px; font-weight:700; color:var(--text); margin:6px 0 2px; }
.product .per { font-size:13px; color:var(--muted); margin-bottom:12px; }
.product ul { margin-bottom:16px; }
.product .act { margin-top:auto; display:flex; gap:10px; flex-wrap:wrap; }
.note { background:rgba(18,58,110,.55); border:1px solid var(--glass-line); box-shadow:var(--glass-hi);
        -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
        padding:14px 18px; margin-bottom:22px; color:var(--text); }
.note.warn { border-color:var(--warn); }
.note b { color:var(--blue2); }
.done { color:var(--ok); font-weight:600; }

/* Lizenzbedingungen und Impressum */
.stand { color:var(--muted); margin-bottom:26px; }
.legal .card { padding:28px; }
.legal .card h2 { font-size:19px; color:var(--blue2); margin:26px 0 8px; text-align:left; }
.legal .card h2:first-child { margin-top:0; }
.legal .card p { margin:0 0 10px; color:var(--text); }
.legal .card ol { margin:4px 0 12px 26px; }
.intro { color:var(--muted); margin-bottom:22px; }

/* Fuss */
footer { border-top:1px solid var(--border); padding:26px 0 40px;
         color:var(--muted); font-size:13px; }
footer .wrap { display:flex; gap:20px; flex-wrap:wrap; }
footer a { color:var(--muted); }
@media (max-width:640px) {
  .hero h1 { font-size:30px; }
  header.top nav a.plain { display:none; }
  header.top nav { gap:10px; }
  header.top b { font-size:16px; }
}

/* Paddle-Kasse (shop.js setzt html.paddle-on): .pd nur mit, .nopd nur ohne Kasse */
.pd { display:none !important; }
.paddle-on a.pd, .paddle-on button.pd { display:inline-block !important; }
.paddle-on li.pd { display:list-item !important; }
.paddle-on span.pd { display:inline !important; }
.paddle-on input.pd { display:block !important; }
.paddle-on .nopd { display:none !important; }
.keyin { width:100%; padding:9px 11px; margin-bottom:6px;
         border:1px solid var(--border); background:var(--navy); color:var(--text);
         font:inherit; font-size:14px; letter-spacing:.5px; }
.keyin:focus { outline:none; border-color:var(--blue); }
.paddle-on label.pd { display:flex !important; }
.addon { gap:8px; align-items:center; width:100%; margin-bottom:8px; font-size:14px;
         color:var(--text); cursor:pointer; }
.addon input { width:16px; height:16px; accent-color:var(--blue); }

/* Bestellformular auf Rechnung (shop.js, Popup) */
dialog.order { width:min(640px, calc(100% - 32px)); max-height:calc(100% - 32px);
               margin:auto; padding:26px; color:var(--text); border:1px solid var(--glass-line);
               background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)),
                          rgba(15,37,71,.82);
               box-shadow:var(--glass-hi), 0 30px 80px rgba(0,0,0,.5);
               -webkit-backdrop-filter:blur(22px) saturate(160%); backdrop-filter:blur(22px) saturate(160%); }
dialog.order::backdrop { background:rgba(3,10,22,.55);
                         -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
dialog.order h2 { text-align:left; font-size:22px; margin-bottom:14px; color:var(--blue2); }
.order [hidden] { display:none !important; }
.order .lines { width:100%; border-collapse:collapse; margin-bottom:12px; font-size:15px; }
.order .lines td { padding:6px 0; border-bottom:1px solid var(--border); color:var(--muted); }
.order .lines td:last-child { text-align:right; white-space:nowrap; color:var(--text); }
.order .lines .sum td { font-weight:700; color:var(--text); border-bottom:0; }
.order .fields { display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; margin:12px 0; }
.order .f { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted); }
.order .f.wide { grid-column:1 / -1; }
.order input:not([type=checkbox]), .order textarea {
  padding:9px 11px; border:1px solid var(--border);
  background:var(--navy); color:var(--text); font:inherit; font-size:14px; }
.order input:focus, .order textarea:focus { outline:none; border-color:var(--blue); }
.order .check { display:flex; gap:8px; align-items:flex-start; font-size:14px;
                margin:8px 0; cursor:pointer; color:var(--text); }
.order .check input { width:16px; height:16px; margin-top:3px; flex:none;
                      accent-color:var(--blue); }
.order #order-key { margin:8px 0; }
.order .act { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.order .note { margin:10px 0 0; }
.order .hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
@media (max-width:640px) {
  dialog.order { padding:18px; }
  .order .fields { grid-template-columns:1fr; }
}