/* ===== Kapitalanlage-Werkzeuge · gemeinsames Grundgerüst ===== */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Source+Sans+3:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root{
  --navy:#152A3B;
  --navy-deep:#0D1B27;
  --vellum:#E8EEF0;
  --vellum-dim:#DAE4E7;
  --line:#6FA6BC;
  --line-dim:rgba(111,166,188,0.28);
  --brass:#B8783E;
  --brass-deep:#8F5C2E;
  --sage:#5E8F6D;
  --brick:#B15A48;
  --ink:#1B2B36;
  --ink-soft:#4C5F6B;
  --text-hi:#EAF1F3;
  --text-mid:#AEC2CB;
  --radius:2px;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:
    linear-gradient(var(--line-dim) 1px, transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg, var(--line-dim) 1px, transparent 1px) 0 0/40px 40px,
    var(--navy);
  background-color:var(--navy);
  color:var(--text-hi);
  font-family:'Source Sans 3', sans-serif;
  line-height:1.5;
  min-height:100vh;
}
:focus-visible{outline:2px solid var(--brass); outline-offset:2px;}
a{color:inherit;}

.sheet{max-width:1180px; margin:0 auto; padding:0 20px 60px;}

/* ---------- Site header / menu ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(13,27,39,0.88);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-dim);
}
.site-header-inner{
  max-width:1180px; margin:0 auto;
  padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.logo{
  display:flex; align-items:center; gap:9px;
  font-family:'Archivo', sans-serif; font-weight:800; font-size:15px;
  letter-spacing:-0.01em; text-decoration:none; color:var(--text-hi);
}
.logo .mark{
  width:20px; height:20px; border:1.5px solid var(--brass);
  display:inline-block; position:relative; flex:none;
}
.logo .mark::after{
  content:""; position:absolute; inset:4px; border:1.5px solid var(--brass);
}

nav.menu{position:relative;}
nav.menu details{position:relative;}
nav.menu summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:6px;
  font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-hi);
  border:1px solid var(--line-dim);
  padding:8px 14px; border-radius:var(--radius);
  transition:border-color .15s ease;
}
nav.menu summary::-webkit-details-marker{display:none;}
nav.menu summary:hover{border-color:var(--brass);}
nav.menu summary .caret{transition:transform .15s ease; color:var(--line); font-size:10px;}
nav.menu details[open] summary .caret{transform:rotate(180deg);}

.menu-panel{
  position:absolute; right:0; top:calc(100% + 8px);
  width:280px;
  background:var(--vellum); color:var(--ink);
  border-radius:var(--radius);
  box-shadow:0 20px 44px -18px rgba(0,0,0,0.6);
  padding:6px;
}
.menu-item{
  display:block; padding:10px 12px; border-radius:var(--radius);
  text-decoration:none; color:var(--ink);
}
.menu-item:hover{background:var(--vellum-dim);}
.menu-item.active{background:#fff; box-shadow:inset 3px 0 0 var(--brass);}
.menu-item .t{
  font-family:'Source Sans 3', sans-serif; font-weight:600; font-size:13.5px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.menu-item .d{display:block; font-size:11.5px; color:var(--ink-soft); margin-top:2px;}
.menu-item.soon{cursor:default; opacity:.6;}
.menu-item.soon:hover{background:transparent;}
.badge-soon{
  font-family:'JetBrains Mono', monospace; font-size:9.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft); border:1px solid rgba(27,43,54,0.25); border-radius:20px; padding:1px 7px; flex:none;
}

/* ---------- Hero (landing) ---------- */
header.hero{
  border:1px solid var(--line-dim);
  border-left:3px solid var(--brass);
  padding:30px 26px;
  margin:28px 0;
  background:linear-gradient(180deg, rgba(232,238,240,0.03), transparent);
}
.eyebrow{
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--line);
}
h1{
  font-family:'Archivo', sans-serif; font-weight:800;
  font-size:clamp(28px,4.4vw,44px); margin:8px 0 10px; letter-spacing:-0.01em;
}
.sub{color:var(--text-mid); max-width:56ch; margin:0; font-size:15px;}

/* ---------- Tool grid (landing) ---------- */
.tool-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
  gap:16px; margin:8px 0 30px;
}
.tool-card{
  background:var(--vellum); color:var(--ink); border-radius:var(--radius);
  padding:20px; text-decoration:none; display:block;
  border-left:3px solid var(--brass);
  box-shadow:0 18px 40px -26px rgba(0,0,0,0.55);
  transition:transform .15s ease;
}
.tool-card:hover{transform:translateY(-2px);}
.tool-card.soon{
  border-left-color:rgba(27,43,54,0.25); opacity:.68; cursor:default;
}
.tool-card.soon:hover{transform:none;}
.tool-card .num{
  font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--brass-deep);
  letter-spacing:.06em;
}
.tool-card.soon .num{color:var(--ink-soft);}
.tool-card h3{
  font-family:'Archivo', sans-serif; font-size:18px; margin:8px 0 6px;
}
.tool-card p{font-size:13.5px; color:var(--ink-soft); margin:0;}
.tool-card .status{
  display:inline-block; margin-top:12px;
  font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
}
.tool-card:not(.soon) .status{color:var(--sage);}

/* ---------- Export menu (rechner results panels) ---------- */
.export-menu{ position:relative; flex:none; order:3; }
.panel-title::after{ order:2; }
.export-menu details{ position:relative; }
.export-menu summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:5px;
  font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--brass-deep);
  border:1px solid rgba(27,43,54,0.18);
  padding:6px 11px; border-radius:var(--radius);
  background:#fff;
  transition:border-color .15s ease;
}
.export-menu summary::-webkit-details-marker{display:none;}
.export-menu summary:hover{border-color:var(--brass-deep);}
.export-menu details[open] summary{border-color:var(--brass-deep);}
.export-menu summary .caret{transition:transform .15s ease; font-size:9px;}
.export-menu details[open] summary .caret{transform:rotate(180deg);}
.export-panel{
  position:absolute; right:0; top:calc(100% + 6px); z-index:30;
  background:#fff; border:1px solid rgba(27,43,54,0.18); border-radius:var(--radius);
  box-shadow:0 16px 34px -16px rgba(0,0,0,0.45);
  min-width:168px; padding:4px;
}
.export-panel button{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  background:none; border:0; cursor:pointer;
  font-family:'Source Sans 3', sans-serif; font-size:13px; color:var(--ink);
  padding:8px 10px; border-radius:var(--radius);
}
.export-panel button:hover{ background:var(--vellum-dim); }
.export-panel button .ext{
  font-family:'JetBrains Mono', monospace; font-size:9.5px; color:var(--ink-soft);
  border:1px solid rgba(27,43,54,0.18); border-radius:20px; padding:1px 6px; margin-left:auto;
}

/* ---------- Feld-Hilfe (Info-Icon + Popover) ---------- */
.help-wrap{
  position:relative;
  display:inline-flex;
  vertical-align:middle;
  margin-left:5px;
}
.help-icon{
  width:15px; height:15px; flex:none;
  border-radius:50%;
  border:1px solid var(--ink-soft);
  background:transparent;
  color:var(--ink-soft);
  font-family:'JetBrains Mono', monospace;
  font-size:10px; font-weight:600; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.help-icon:hover,
.help-icon[aria-expanded="true"]{
  border-color:var(--brass-deep);
  color:var(--brass-deep);
  background:rgba(184,120,62,0.1);
}
.help-popover{
  display:none;
  position:absolute;
  z-index:40;
  top:calc(100% + 8px);
  left:0;
  width:min(280px, calc(100vw - 56px));
  background:#fff;
  color:var(--ink);
  border:1px solid rgba(27,43,54,0.18);
  border-left:2px solid var(--brass);
  border-radius:var(--radius);
  box-shadow:0 16px 34px -16px rgba(0,0,0,0.45);
  padding:12px 14px;
  text-align:left;
}
.help-popover[data-open="true"]{display:block;}
.help-popover .help-title{
  display:block;
  font-family:'Archivo', sans-serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:0;
  text-transform:none;
  color:var(--ink);
  margin-bottom:5px;
}
.help-popover .help-text{
  font-family:'Source Sans 3', sans-serif;
  font-weight:400;
  font-size:12.5px;
  line-height:1.55;
  letter-spacing:0;
  text-transform:none;
  color:var(--ink-soft);
  margin:0;
}
.help-popover .help-text strong{color:var(--brass-deep); font-weight:600;}
.help-popover .help-text a{color:var(--brass-deep); text-decoration:underline; text-underline-offset:2px;}
.help-popover .help-text a:hover{color:var(--ink);}
.help-popover .help-link{display:block; margin-top:6px; font-family:'Source Sans 3', sans-serif; font-weight:600; font-size:12.5px;}

/* ---------- Site footer ---------- */
.site-footer{
  margin-top:30px; padding-top:20px; border-top:1px solid var(--line-dim);
  font-size:12px; color:var(--text-mid); max-width:70ch;
}
.site-footer strong{color:var(--line);}
.back-link{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--line);
  text-decoration:none; margin:20px 0 0;
}
.back-link:hover{color:var(--brass);}