:root{
  /* MarkenGold — warmes Off-White, Navy als Autorität, Gold als sparsamer Akzent */
  --page:#FAF8F5; --page-deep:#F2E9DA; --card:#FFFFFF; --card2:#F2E9DA; --line:#E2D9C8;
  --ink:#2E2E2E; --ink2:#5B5650; --ink3:#746E64; --ink-hi:#0A1A2F;
  --grid:#E2D9C8;

  --navy:#0A1A2F; --navy-bright:#15304F;
  --gold:#D4A119; --gold-bright:#E3B93A; --gold-text:#7C5F10; --gold-wash:rgba(212,161,25,.12);

  /* Zustände — dunkler abgetönt, damit sie auf hellem Grund lesbar bleiben */
  --good:#295E40; --warn:#7C5119; --serious:#7C5119; --over:#A23B2E; --over-text:#8C2F24;
  --over-wash:rgba(162,59,46,.08);

  /* Datenreihen: Wind in Navy, Welle in Gold — nie zu verwechseln */
  --wind:#0A1A2F; --wind-fill:rgba(10,26,47,.09); --band:rgba(10,26,47,.05);
  --wave:#B8860B; --wave-fill:rgba(184,134,11,.13);

  --r:4px;
  --display:'Cardo','Iowan Old Style','Georgia','Times New Roman',serif;
  --body:'Lora','Iowan Old Style','Georgia','Times New Roman',serif;
  --mono:'Cardo','Iowan Old Style','Georgia','Times New Roman',serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--page);
  background-image:
    radial-gradient(ellipse 80% 40% at 82% -4%, var(--gold-wash), transparent 62%);
  background-attachment:fixed;
  color:var(--ink);
  font:400 16px/1.65 var(--body);
  -webkit-text-size-adjust:100%; padding-bottom:env(safe-area-inset-bottom);
}
.wrap{max-width:760px;margin:0 auto;padding:26px 18px 56px}

/* ---------- Registerkarten ---------- */
.tabs{display:flex;gap:6px;margin:0 0 22px;border-bottom:1px solid var(--line)}
.tabs a{
  font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink3);text-decoration:none;padding:10px 4px 12px;margin-right:18px;
  border-bottom:2px solid transparent;transition:color .18s ease,border-color .18s ease;
}
.tabs a:hover{color:var(--ink-hi)}
.tabs a.on{color:var(--ink-hi);border-bottom-color:var(--gold)}

/* ---------- Kopf ---------- */
.hd{padding:6px 0 26px;margin-bottom:8px}
.hd .eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:700;color:var(--gold-text);
  letter-spacing:.22em;text-transform:uppercase;margin:0 0 12px;
}
.hd h1{
  font-family:var(--display);font-weight:700;font-style:normal;
  font-size:clamp(36px,9vw,58px);line-height:1.02;letter-spacing:0;
  color:var(--ink-hi);margin:0 0 14px;
}
.hd h1 em{font-style:italic;color:var(--gold-text)}
.hd h1 .nb{white-space:nowrap}
.hd .sub{margin:0;color:var(--ink2);font-size:16px;font-weight:400;line-height:1.5;max-width:52ch}

/* ---------- Karten ---------- */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 20px;margin:0 0 14px;position:relative;
}
.card::before{
  content:"";position:absolute;left:0;top:0;width:34px;height:2px;background:var(--gold);
}
.card h2{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-text);margin:0 0 18px;
}
.card h3{
  font-family:var(--display);font-weight:700;font-size:24px;line-height:1.15;
  letter-spacing:0;color:var(--ink-hi);margin:0 0 10px;
}

/* ---------- Formular ---------- */
label{display:block;font-size:12.5px;color:var(--ink2);margin:0 0 6px;letter-spacing:.02em}
.fld{margin:0 0 14px;position:relative}
input,select,button{font-family:var(--body);font-size:16px}
input[type=text],input[type=number],input[type=datetime-local],select{
  width:100%;background:var(--page-deep);border:1px solid var(--line);color:var(--ink-hi);
  border-radius:var(--r);padding:13px 14px;appearance:none;transition:border-color .2s ease;
}
input::placeholder{color:var(--ink3)}
select{
  padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%237C5F10' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
select option{background:#FFFFFF;color:#2E2E2E}
input:hover,select:hover{border-color:#CBBFA4}
input:focus,select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-wash)}
.row{display:flex;gap:12px}
.row>*{flex:1;min-width:0}
.row .fld:has(#f_dep){flex:1.4}

/* ---------- Stromkarten (Regler + Bild) ---------- */
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:32px;background:transparent;cursor:pointer;margin:0;
}
input[type=range]::-webkit-slider-runnable-track{
  height:4px;background:var(--line);border-radius:2px;
}
input[type=range]::-moz-range-track{height:4px;background:var(--line);border-radius:2px}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;margin-top:-9px;width:22px;height:22px;border-radius:50%;
  background:var(--gold);border:2px solid #FFFFFF;box-shadow:0 2px 6px rgba(10,26,47,.28);
}
input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:var(--gold);border:2px solid #FFFFFF;
}
.chartlbl{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 4px}
.chartlbl b{font-family:var(--mono);color:var(--gold-text);font-size:13px;letter-spacing:.04em}
.chartimg{width:100%;border-radius:var(--r);border:1px solid var(--line);display:block;margin:10px 0 12px;background:#fff}
.chartcap{color:var(--ink3);font-size:12px;margin:0}

.sug{position:absolute;z-index:30;left:0;right:0;top:100%;margin-top:5px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:0 14px 32px rgba(10,26,47,.14)}
.sug button{display:block;width:100%;text-align:left;background:none;border:0;color:var(--ink);
  padding:11px 14px;border-bottom:1px solid var(--line);cursor:pointer;font-size:15px;font-family:var(--body)}
.sug button:last-child{border-bottom:0}
.sug button:hover,.sug button:focus{background:var(--gold-wash);color:var(--ink-hi);outline:none}
.sug small{display:block;color:var(--ink3);font-size:11.5px;margin-top:2px}

/* ---------- Buttons ---------- */
.btn{
  width:100%;background:var(--navy);color:#FAF8F5;border:1px solid var(--navy);
  border-radius:var(--r);padding:16px;cursor:pointer;
  font-family:var(--display);font-weight:700;font-size:17px;
  letter-spacing:.04em;transition:all .22s ease;
}
.btn:hover:not(:disabled){background:var(--navy-bright);border-color:var(--navy-bright);transform:translateY(-1px)}
.btn:disabled{opacity:.45;cursor:default}
.btn2{
  background:transparent;border:1px solid var(--line);color:var(--ink2);border-radius:var(--r);
  padding:10px 16px;cursor:pointer;width:auto;
  font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.02em;
  transition:all .22s ease;
}
.btn2:hover{border-color:var(--gold);color:var(--gold-text);background:var(--gold-wash)}
.tools{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 14px}

details.adv{border-top:1px solid var(--line);margin-top:8px;padding-top:14px}
details.adv summary{cursor:pointer;color:var(--gold-text);font-size:12.5px;list-style:none;
  font-family:var(--mono);font-weight:700;letter-spacing:.14em;text-transform:uppercase}
details.adv summary::-webkit-details-marker{display:none}
details.adv summary::before{content:"+ "}
details.adv[open] summary::before{content:"\2212 "}
details.adv .in{padding-top:16px}
.hint{color:var(--ink3);font-size:12.5px;margin:8px 0 0;line-height:1.55}

/* ---------- Urteil ---------- */
.verdict{
  border:1px solid var(--line);border-left:3px solid var(--good);
  background:var(--card);padding:22px 20px;border-radius:var(--r);margin:0 0 14px;
}
.verdict.no{border-left-color:var(--over)}
.verdict.warn{border-left-color:var(--warn)}
.verdict h3{
  font-family:var(--display);font-weight:700;font-size:clamp(26px,6vw,36px);
  line-height:1.08;letter-spacing:0;color:var(--ink-hi);margin:0 0 12px;
}
.verdict.no h3{color:var(--ink-hi)}
.verdict p{margin:0;color:var(--ink2);font-size:15px;font-weight:400;line-height:1.6}
.verdict .ant-ey{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--gold-text);letter-spacing:.18em;
  text-transform:uppercase;margin:0 0 10px}
.verdict h3{font-size:clamp(28px,6.5vw,40px)}
p.lead{color:var(--ink-hi);font-size:17px;line-height:1.6}

/* ---------- Fenster ---------- */
.win{
  border:1px solid var(--line);border-left:2px solid var(--gold);
  background:var(--page-deep);border-radius:var(--r);padding:14px 15px;margin:0 0 10px;
  cursor:pointer;position:relative;transition:all .2s ease;
}
.win:hover{border-color:#CBBFA4;border-left-color:var(--gold)}
.win.sel{border-left-color:var(--gold);background:#EFE4CC;box-shadow:inset 0 0 0 1px var(--gold-wash)}
.win .wt{
  font-family:var(--display);font-weight:700;font-size:20px;line-height:1.15;letter-spacing:0;
  color:var(--ink-hi);margin:0 0 5px;
}
.win .wm{color:var(--ink2);font-size:13px;margin:0;font-weight:400}
.win .sc{display:block;color:var(--gold-text);font-family:var(--mono);font-weight:700;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 8px}
.win .tol{color:var(--serious);font-size:12.5px;margin:7px 0 0}

/* ---------- Werte ---------- */
.now{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.now .vals{flex:1;min-width:160px;display:flex;flex-wrap:wrap;gap:7px 18px}
.kv{font-size:13px;color:var(--ink3);font-weight:400}
.kv b{color:var(--ink-hi);font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- Diagramme ---------- */
.cbox{position:relative;margin:4px 0 6px}
.chart{display:block;width:100%;overflow:visible}
.chart .ax{fill:var(--ink3);font-family:var(--mono);font-size:9.5px}
.chart .lim{fill:var(--over-text);font-family:var(--mono);font-size:9.5px}
.chart .peak{fill:var(--gold-text);font-family:var(--mono);font-size:11px;font-weight:700}
.rose .roseV{fill:var(--ink-hi);font-family:var(--display);font-size:24px;font-weight:700}
.rose .roseU{fill:var(--ink3);font-family:var(--mono);font-size:9.5px}
.tip{position:absolute;top:2px;width:146px;background:#FFFFFF;border:1px solid var(--gold);
  border-radius:var(--r);padding:8px 10px;font-size:11.5px;color:var(--ink2);pointer-events:none;line-height:1.4;
  box-shadow:0 8px 20px rgba(10,26,47,.14)}
.tip b{color:var(--gold-text)}
.nodata{color:var(--ink3);font-size:13px;margin:8px 0}
.clab{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin:16px 0 0;flex-wrap:wrap}
.clab b{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:0;color:var(--gold-text)}
.clab span{color:var(--ink3);font-size:11.5px}

/* ---------- Tabelle ---------- */
table.tab{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
table.tab th,table.tab td{text-align:right;padding:7px 5px;border-bottom:1px solid var(--line);color:var(--ink2)}
table.tab th:first-child,table.tab td:first-child{text-align:left}
table.tab th{color:var(--gold-text);font-family:var(--mono);font-weight:700;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase}
table.tab td.bad{color:var(--over-text);font-weight:600}

/* ---------- Rest ---------- */
.lnk{color:var(--gold-text);text-decoration:none;border-bottom:1px solid var(--gold)}
.lnk:hover{color:var(--ink-hi);border-bottom-color:var(--ink-hi)}
.ft{color:var(--ink3);font-size:12px;line-height:1.6;margin-top:34px;padding-top:22px;
  border-top:1px solid var(--line)}
.ft p{margin:0 0 9px}
.err{background:var(--over-wash);border:1px solid rgba(162,59,46,.35);color:var(--over-text);
  padding:12px 14px;border-radius:var(--r);font-size:14px}
.spin{display:inline-block;width:15px;height:15px;border:2px solid rgba(250,248,245,.35);
  border-top-color:#FAF8F5;border-radius:50%;animation:sp .8s linear infinite;vertical-align:-3px;margin-right:9px}
@keyframes sp{to{transform:rotate(360deg)}}

@media (max-width:420px){
  .wrap{padding:20px 14px 48px}
  .card{padding:18px 16px}
}
@media (max-width:360px){
  .row{flex-direction:column;gap:0}
}
/* Rechtliche Links + Rueckweg zur Apps-Seite von syfeelgood.com */
.ft.ft-recht{margin-top:0;padding-top:10px;border-top:0;font-size:13px;opacity:.85}
.ft-recht a{color:inherit;text-decoration:underline;text-underline-offset:2px}