/* =========================================================
   bitcoinsats.io
   Zentrale Styles für alle Seiten
   ========================================================= */

/* ===== Design-Tokens ===== */

:root{
  --bg:#FBF8F3;
  --surface:#FFFFFF;
  --ink:#14181F;
  --mu:#6B7280;
  --line:#ECE6DB;

  --ac:#F7931A;
  --ac2:#FFC15E;
  --on-ac:#1A1204;
  --soft:#FFF3E2;

  --in:#0E9F6E;
  --out:#E0443E;

  --r:22px;
  --r-s:14px;

  --shadow:0 14px 34px -16px rgba(20,24,31,.22);

  --font:ui-rounded,"SF Pro Rounded","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

[data-theme=dark]{
  --bg:#0C1017;
  --surface:#151B26;
  --ink:#F1F3F7;
  --mu:#98A2B3;
  --line:#242C3A;

  --soft:#241B0D;

  --in:#34D399;
  --out:#FF7A74;

  --shadow:0 14px 34px -16px rgba(0,0,0,.7);
}


/* ===== Basis ===== */

*{
  box-sizing:border-box;
}

body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.6 var(--font);
  background-image:
    radial-gradient(
      900px 380px at 85% -80px,
      var(--soft),
      transparent 70%
    );
}


/* ===== Layout ===== */

.wrap{
  width:100%;
  max-width:960px;
  margin:0 auto;
  padding:20px 16px;
}

body > .wrap{
  flex:1;
  padding-top:clamp(28px,5vw,56px);
}

main{
  flex:1;
}


/* ===== Menüleiste ===== */

.bar{
  position:sticky;
  top:0;
  z-index:30;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  box-shadow:0 6px 18px -14px rgba(20,24,31,.35);
}

.bar-in{
  max-width:960px;
  margin:0 auto;
  padding:clamp(10px,1.4vw,16px) 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

/* Alle Größen hängen an der Schriftgröße des Logos:
   Mobil 1.4rem (Symbol ca. 40px hoch), Desktop 2rem (ca. 58px). */
.logo{
  display:flex;
  align-items:center;
  gap:.38em;
  font-size:clamp(1.4rem,2.4vw + .7rem,2rem);
  font-weight:600;
  line-height:1;
  letter-spacing:-.03em;
  color:inherit;
  text-decoration:none;
}

.logo img,
.logo svg{
  height:1.75em;
  width:auto;
  display:block;
}

.logo .logo-dark{ display:none; }
[data-theme=dark] .logo .logo-light{ display:none; }
[data-theme=dark] .logo .logo-dark{ display:block; }

.logo i{
  font-style:normal;
  color:var(--ac);
}

.bar-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.ic,
.menu-btn{
  height:clamp(42px,4.4vw,48px);
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--ink);
  cursor:pointer;
  font:inherit;
  font-size:1.05rem;
}

.ic{
  width:clamp(42px,4.4vw,48px);
}

.menu-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:0 16px;
  font-size:.95rem;
  font-weight:600;
}

.ic:hover,
.menu-btn:hover,
.menu-btn[aria-expanded=true]{
  border-color:var(--ac);
}

.burger,
.burger::before,
.burger::after{
  display:block;
  width:18px;
  height:2px;
  border-radius:2px;
  background:currentColor;
}

.burger{
  position:relative;
}

.burger::before,
.burger::after{
  content:"";
  position:absolute;
  left:0;
}

.burger::before{ top:-6px; }
.burger::after{ top:6px; }

.menu{
  border-top:1px solid var(--line);
  background:var(--surface);
}

.menu[hidden]{
  display:none;
}

.menu a{
  display:block;
  max-width:960px;
  margin:0 auto;
  padding:14px 16px;
  color:inherit;
  text-decoration:none;
  font-weight:600;
  border-bottom:1px solid var(--line);
}

.menu a:last-child{
  border-bottom:0;
}

.menu a:hover,
.menu a[aria-current=page]{
  color:var(--ac);
}


/* ===== Typography ===== */

h1{
  font-size:clamp(2.1rem,6vw,3.4rem);
  line-height:1.08;
  letter-spacing:-.03em;
  margin:0 0 18px;
}

h1 em{
  font-style:normal;
  background:linear-gradient(90deg,var(--ac),var(--ac2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

h2{
  font-size:1.1rem;
  margin:64px 0 16px;
}

.lead{
  color:var(--mu);
  font-size:1.12rem;
  max-width:60ch;
  margin:0 0 28px;
}

.mu{
  color:var(--mu);
  font-size:.88rem;
}

.err{
  color:var(--out);
}


/* =========================================================
   Startseite
   ========================================================= */

.btn{
  display:inline-block;
  padding:13px 24px;
  border-radius:999px;
  border:0;
  background:linear-gradient(135deg,var(--ac),var(--ac2));
  color:var(--on-ac);
  font:700 1rem var(--font);
  text-decoration:none;
  cursor:pointer;
}

.btn:hover{
  filter:brightness(.97);
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:16px;
}

.card{
  display:block;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:22px;
  box-shadow:var(--shadow);
  color:inherit;
  text-decoration:none;
}

a.card:hover{
  border-color:var(--ac);
  transform:translateY(-2px);
  transition:.15s;
}

.card h3{
  margin:10px 0 6px;
  font-size:1.05rem;
}

.card p{
  margin:0;
  color:var(--mu);
  font-size:.92rem;
}

.badge{
  font-size:.72rem;
  font-weight:700;
  padding:3px 10px;
  border-radius:999px;
  background:var(--soft);
  color:var(--ac);
}

.card.soon{
  opacity:.7;
  box-shadow:none;
}


/* =========================================================
   Watch-Only-Wallet
   ========================================================= */

.search{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

input{
  flex:1;
  min-width:230px;
  padding:14px 18px;
  border-radius:999px;
  border:1.5px solid var(--line);
  background:var(--bg);
  color:var(--ink);
  font:.9rem var(--mono);
}

input:focus{
  outline:none;
  border-color:var(--ac);
}

.btn.p{
  background:linear-gradient(135deg,var(--ac),var(--ac2));
  border:0;
  color:var(--on-ac);
}

.hero{
  position:relative;
  overflow:hidden;
}

.hero:before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:5px;
  background:linear-gradient(90deg,var(--ac),var(--ac2));
}

.hd{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.seg{
  display:inline-flex;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:999px;
  padding:3px;
}

.seg button{
  border:0;
  background:none;
  color:var(--mu);
  padding:7px 14px;
  border-radius:999px;
  font:600 .85rem var(--font);
  cursor:pointer;
}

.seg button.on{
  background:var(--ac);
  color:var(--on-ac);
}

.bal{
  font-size:clamp(2rem,7vw,3rem);
  font-weight:800;
  letter-spacing:-.03em;
  margin:14px 0 2px;
}

.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px;
  margin-top:18px;
}

.stat{
  background:var(--bg);
  border-radius:var(--r-s);
  padding:12px 14px;
}

.stat span{
  display:block;
  color:var(--mu);
  font-size:.78rem;
}

.stat b{
  font-size:1rem;
}

.tx{
  display:flex;
  gap:14px;
  align-items:center;
  padding:14px 0;
  border-top:1px solid var(--line);
}

.tx:first-child{
  border-top:0;
}

.dot{
  flex:none;
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:1.1rem;
}

.dot.in{
  background:color-mix(in srgb,var(--in) 16%,transparent);
  color:var(--in);
}

.dot.out{
  background:color-mix(in srgb,var(--out) 16%,transparent);
  color:var(--out);
}

.tx .m{
  flex:1;
  min-width:0;
}

.tx a{
  color:var(--mu);
  font:.78rem var(--mono);
  text-decoration:none;
}

.tx a:hover{
  color:var(--ac);
}

.amt{
  text-align:right;
  font-weight:700;
  white-space:nowrap;
}

.amt.in{
  color:var(--in);
}

.amt.out{
  color:var(--out);
}

.pill{
  font-size:.7rem;
  font-weight:700;
  padding:2px 9px;
  border-radius:999px;
  background:var(--soft);
  color:var(--ac);
  margin-left:6px;
}

#chart svg{
  width:100%;
  height:auto;
  display:block;
  margin-top:10px;
}

.qr{
  display:flex;
  gap:20px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:12px;
}

.qr svg{
  width:148px;
  height:148px;
  background:#fff;
  padding:10px;
  border-radius:var(--r-s);
  border:1px solid var(--line);
}

.qr .l{
  word-break:break-all;
  font:.8rem var(--mono);
  color:var(--mu);
  max-width:340px;
}


/* ===== Footer ===== */

footer{
  border-top:1px solid var(--line);
  color:var(--mu);
  font-size:.85rem;
}

footer .wrap{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

footer a{
  color:var(--mu);
  margin-left:14px;
}

footer a:first-child{
  margin-left:0;
}


/* Watch-Only eigener Footer */
body > .wrap > footer{
  border-top:0;
  text-align:center;
  margin-top:28px;
}


:focus-visible{
  outline:2px solid var(--ac);
  outline-offset:2px;
}

/* ===== Rechtstexte ===== */

.legal{ max-width:70ch; }
.legal h2{ font-size:1.05rem; margin:32px 0 8px; }
.legal p,.legal li{ margin:0 0 10px; }
.legal a{ color:var(--ac); }

@media (prefers-reduced-motion:reduce){
  a.card:hover{ transform:none; transition:none; }
}


/* ===== Responsive ===== */

@media (max-width:600px){
  .menu-label{
    display:none;
  }

  .menu-btn{
    padding:0;
    width:42px;
    justify-content:center;
  }

  .bar-in{
    padding-left:14px;
    padding-right:14px;
  }

  .wrap{
    padding-left:14px;
    padding-right:14px;
  }

  .tx{
    align-items:flex-start;
  }

  .amt{
    font-size:.9rem;
  }
}