/* ----- Globales Design (DARK THEME · zentriert & responsive) ----- */
:root{
  color-scheme:dark;
  --bg:#000000;
  --panel:#0a0a0a;
  --card:#121212;
  --text:#c0c0c0;          /* Silber für Fließtext */
  --muted:#9aa0a6;         /* dezentes Silber/Grau */
  --brand:#ffd700;         /* Gold für Titel/Links/Buttons */
  --brand-strong:#ffcc00;  /* kräftigeres Gold */
  --ok:#22c55e;
  --err:#ef4444;
  --focus:#fbbf24;         /* goldener Fokus */
  --radius:16px;
  --maxw:950px;
  --navh:64px;
  --pricesh-mobile: 200px; /* geschätzte Höhe der fixen Preise auf Handy */
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,"Apple Color Emoji","Segoe UI Emoji";
  background:linear-gradient(180deg,var(--bg) 0%,#1a1a1a 45%,#161616 100%);
  color:var(--text);
  line-height:1.6;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* ===== Navigation ===== */
header.nav{
  position:fixed; top:0; left:0; right:0; height:var(--navh);
  backdrop-filter:blur(10px);
  background:rgba(0,0,0,.85);
  border-bottom:1px solid rgba(255,215,0,.25);
  z-index:1000;
  width:100%;
}
.nav-inner{
  max-width:var(--maxw); margin:0 auto; height:100%;
  display:flex; align-items:center; gap:16px; padding:0 16px;
  justify-content:space-between; flex-wrap:wrap;
}

/* Brand (Home-Link) mit Goldverlauf im Text */
.brand{font-weight:800; letter-spacing:.3px}
.brand a{
  display:inline-block; text-decoration:none;
  background:linear-gradient(135deg,#ffec8b 0%,#ffd700 50%,#e6b800 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  transition:background .3s ease;
}
/* Schimmer-Effekt ohne goldenen Hintergrund *//*
.brand a:hover,.brand a:focus,.brand a:active{
  background:linear-gradient(90deg,#ffd700 0%,#ffec8b 50%,#ffd700 100%);
  background-size:200% auto;
  animation:shimmer 2s linear infinite;
}*/

/* Schimmer-Effekt ohne goldenen Hintergrund *//*
.brand a:hover,.brand a:focus,.brand a:active{
  background:rgba(255,215,0,.18); color:#ffec8b;
  background-size:200% auto;
}*/

/* Haupt-Navigation */
nav{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
nav a{
  color:var(--brand); text-decoration:none;
  padding:10px 12px; border-radius:999px;
  display:inline-block; font-weight:600; opacity:.95;
  transition:background-color .2s ease,color .2s ease;
}
nav a:hover,nav a:focus{background:rgba(255,215,0,.15); outline:none; color:#ffec8b}
nav a[aria-current="page"]{background:rgba(255,215,0,.18); color:#ffec8b}

/* Fokus sichtbar (A11y) */
nav a:focus-visible,.brand a:focus-visible,button[type="submit"]:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(255,215,0,.35); border-radius:999px;
}

/* ===== Layout ===== */
main{
  max-width:var(--maxw); margin:0 auto;
  padding:calc(var(--navh) + 24px) 20px 60px;
  display:flex; flex-direction:column; align-items:center;
}
section{scroll-margin-top:calc(var(--navh) + 12px); width:100%}

/* Hero / Cards */
.hero{
  display:grid; grid-template-columns:1fr; gap:24px; align-items:center;
  padding:28px; border:1px solid rgba(255,215,0,.25); border-radius:var(--radius);
  background:linear-gradient(180deg,#0f0f0f,#1a1a1a);
  box-shadow:0 10px 24px rgba(0,0,0,.6); text-align:center;
}
.hero h1{margin:0 0 8px; font-size:clamp(28px,4vw,40px); line-height:1.2; color:var(--brand-strong)}
.hero p{color:var(--text); margin:0}

.grid{display:grid; grid-template-columns:1fr; gap:20px; margin-top:22px}
.card{
  background:var(--card); border:1px solid rgba(255,215,0,.18);
  border-radius:var(--radius); padding:18px; text-align:center;
  box-shadow:0 6px 18px rgba(0,0,0,.5);
}
.card h3{margin-top:0; color:var(--brand-strong)}

/* Statusmeldungen */
.status{margin:16px 0; padding:12px 14px; border-radius:12px; font-weight:600}
.status.ok{background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.35); color:#22c55e}
.status.err{background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.35); color:#ef4444}

/* ===== Formular ===== */
form{display:grid; gap:12px; text-align:left}
label{font-weight:700; color:var(--brand-strong)}
input[type="text"],input[type="email"],input[type="number"],input[type="tel"],textarea{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid rgba(255,215,0,.25);
  background:#121212; color:var(--text);
}
input:focus,textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(255,215,0,.25)}
textarea{min-height:140px; resize:vertical}
.row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.actions{display:flex; gap:12px; align-items:center; flex-wrap:wrap}

/* Button – goldener Verlauf (einmalig definiert) */
button[type="submit"]{
  padding:12px 16px; border:1px solid rgba(255,215,0,.5); border-radius:999px;
  background:linear-gradient(135deg,#ffd700 0%,#ffcc00 50%,#e6b800 100%);
  color:#000; font-weight:800; cursor:pointer;
  box-shadow:0 8px 20px rgba(255,215,0,.25);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
button[type="submit"]:hover{
  background:linear-gradient(135deg,#ffec8b 0%,#ffd700 50%,#ffcc00 100%);
  box-shadow:0 0 18px rgba(255,215,0,.6);
  transform:translateY(-2px);
}

/* Sonstiges */
small.muted{color:var(--muted)}
.impressum{
  margin-top:40px; padding:18px; background:#141414;
  border:1px solid rgba(255,215,0,.2); border-radius:var(--radius);
  text-align:center;
}

/* ===== Responsive ===== */
@media (max-width:900px){ .nav-inner{gap:8px; justify-content:center} }
@media (max-width:800px){ .row{grid-template-columns:1fr} nav{justify-content:center} }
@media (max-width:420px){
  header.nav{height:auto}
  main{padding-top:calc(var(--navh) + 32px)}
  .brand{width:100%; text-align:center; margin:6px 0}
  nav{width:100%; justify-content:center}
}

/* ===== Shimmer für Brand ===== */
@keyframes shimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}

/* ===== Hover-Animation: Münzen/Bitcoin ===== */
a,button,[role="button"]{position:relative; overflow:visible}
.fx-coin{
  position:absolute; left:var(--x,0); top:var(--y,0);
  pointer-events:none; user-select:none;
  font-size:18px; line-height:1;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.6));
  will-change:transform,opacity;
  animation:coin-fly var(--dur,1000ms) ease-out forwards; z-index:2;
}
@keyframes coin-fly{
  0%{opacity:0; transform:translate(0,0) scale(var(--s,1)) rotate(var(--r0,0deg))}
  15%{opacity:1}
  80%{opacity:1}
  100%{opacity:.35; transform:translate(var(--dx,0),var(--dy,-30px)) rotate(var(--r2,180deg))}
}
@media (prefers-reduced-motion:reduce){ .fx-coin{animation:none; display:none} }

/* ===== Preise-Sidebar (rechts fixiert auf Desktop) ===== */
.prices { width: 100%; margin-top: 16px; }
.prices .prices-wrap{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.prices .price .price-val{
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--brand-strong);
  margin: 6px 0;
}
.prices .prices-ts{ text-align: center; }
.prices-ts-date{ 
	color: aqua;
	text-align: center;
}

/* Desktop: rechts neben dem Content fixieren */
@media (min-width: 1200px){
  .prices-spacer {
    padding-top: 1%; /* Höhe der fixierten .prices-Box */
  }
  .prices{
    position: fixed;
    top: calc(var(--navh) + 16px);
    left: 50%;
    margin-left: calc(var(--maxw) / 2 + 16px); /* 16px Abstand rechts vom Content */
    width: 280px;
    z-index: 900; /* unter der Nav (1000), über dem Inhalt */
  }
  /* Karten konsistent */
  .prices .card{ width: 100%; }
}

/* Tablet/Mobile: normal im Flow, volle Breite */
@media (max-width: 1199.98px){
  main{
    /*padding-top: calc(var(--navh) + var(--pricesh-mobile) + 24px);*/   /*original*/
    padding-top: calc(var(--navh) + var(--pricesh-mobile) - 35px);
  }

  .prices-spacer {
    padding-top: 10%; /* Höhe der fixierten .prices-Box */
  }

  .prices{
    position: fixed;
    top: var(--navh);       /* direkt unter der fixen Navigation */
    left: 0; right: 0;
    width: 100%;
    z-index: 950;           /* unter der Nav (1000), über dem Content */
    padding: 10px 16px;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255,215,0,0.18);
    /* optional: leichte Schattenlinie */
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    /* Höhe steuern über Variable; bei Bedarf feinjustieren */
    /*min-height: var(--pricesh-mobile);*/
    font-size: 0.70rem;
  }

  .prices .prices-wrap{
    display: grid;
    /* kompakte Kacheln, passen sich der Breite an */
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 12px;
  }

  .prices .prices-wrap .card{
    padding: 12px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  }

  /* Preistext auf kleinen Screens minimal kleiner */
  .prices .price .price-val{
    font-size: 0.70rem;
  }
}

/* 2 Buttons pro Zeile (mobil 1) */
.grid.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; /* oder dein bisheriges gap */
}

@media (max-width: 700px) {
  .grid.grid {
    /*grid-template-columns: 1fr;  auf Handy eine Spalte */
	  grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* Tablet/Mobile: normal im Flow, volle Breite 
@media (max-width: 1199.98px){
  .prices{
    position: static;
    margin-left: 0;
    width: 100%;
  }
  .prices .prices-wrap{
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}*/