/* ==========================================================================
   SeppSales – gemeinsamer Kopf und Fuß für alle Unterseiten.
   Klassen mit Präfix "site-", damit sie nicht mit Seiten-Styles kollidieren.
   ========================================================================== */
.site-kopf,.site-kopf *,.site-fuss,.site-fuss *,.site-bald,.site-bald *{box-sizing:border-box}
.site-kopf{
  position:sticky; top:0; z-index:60; background:hsl(220 8% 6% / .82);
  backdrop-filter:blur(12px) saturate(1.2); -webkit-backdrop-filter:blur(12px) saturate(1.2);
  border-bottom:1px solid #2e3138; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  letter-spacing:-.011em; -webkit-font-smoothing:antialiased;
}
.site-zeile{max-width:1180px; margin-inline:auto; padding-inline:24px; height:68px; display:flex; align-items:center; justify-content:space-between; gap:24px}
.site-marke{font-weight:700; font-size:1.2rem; letter-spacing:-.03em; color:#f3f4f6; text-decoration:none; line-height:1}
.site-marke{display:inline-flex; align-items:center; gap:10px}
.site-marke .wort span{color:#0b6e83}
.logo-s{position:relative; display:inline-block; line-height:1}
.logo-strich{position:absolute; left:-.06em; bottom:-.34em; width:calc(100% + .12em); height:.34em; overflow:visible; pointer-events:none}
.site-marke{display:inline-flex; align-items:center; line-height:1}
.site-marke .wort span{color:#2bcdee}
.logo-zeichen{width:28px; height:28px; flex:none; display:block; border-radius:8px; box-shadow:0 0 16px hsl(190 85% 55% / .25),inset 0 1px 0 hsl(0 0% 100% / .3)}
.site-nav{display:flex; align-items:center; gap:34px; min-width:0}
.site-nav a{position:relative; color:#9196a1; text-decoration:none; font-size:.875rem; font-weight:500; letter-spacing:-.005em; white-space:nowrap; transition:color .16s ease}
.site-nav a:hover{color:#f3f4f6}
.site-nav a[aria-current="page"]{color:#f3f4f6}
.site-nav a[aria-current="page"]::after{content:""; position:absolute; left:0; right:0; bottom:-8px; height:2px; border-radius:2px; background:#2bcdee; box-shadow:0 0 10px hsl(190 85% 55% / .6)}
@media (max-width:820px){
  .site-nav{gap:18px; overflow-x:auto; scrollbar-width:none; padding-block:10px}
  .site-nav a{font-size:.8125rem}
}

.site-fuss{padding-block:38px; background:#101114; color:#f3f4f6; border-top:1px solid #2e3138; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.site-fuss .site-zeile{height:auto; flex-wrap:wrap; gap:18px}
.site-fuss nav{display:flex; gap:22px}
.site-fuss nav a{color:#9196a1; text-decoration:none; font-size:.9375rem; transition:color .16s ease}
.site-fuss nav a:hover{color:#2bcdee}
.btc-badge{display:inline-flex; align-items:center; gap:11px; padding:8px 16px 8px 9px; border-radius:999px; background:#fff; box-shadow:0 0 0 1px hsl(34 94% 53% / .35),0 8px 24px -12px hsl(34 94% 53% / .55)}
.btc-logo{width:32px; height:32px; flex:none; display:block}
.btc-text{display:flex; flex-direction:column; line-height:1}
.btc-text b{font-size:1.02rem; font-weight:800; letter-spacing:-.02em; color:#1a1a1a}
.btc-text small{font-size:9.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#f7931a; margin-top:3px}

/* Platzhalter-Seiten */
.site-bald{min-height:calc(100vh - 68px - 110px); display:grid; place-items:center; text-align:center; padding:80px 24px; position:relative; overflow:hidden;
  background:#101114; color:#f3f4f6; font-family:Inter,ui-sans-serif,system-ui,sans-serif; letter-spacing:-.011em}
.site-bald::before{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(hsl(0 0% 100% / .035) 1px,transparent 1px),linear-gradient(90deg,hsl(0 0% 100% / .035) 1px,transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(60% 60% at 50% 45%,#000,transparent 80%)}
.site-bald > div{position:relative; display:flex; flex-direction:column; align-items:center; gap:18px}
.site-bald .ey{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11.5px; letter-spacing:.17em; text-transform:uppercase; color:#9196a1}
.site-bald h1{font-size:clamp(2.4rem,6vw,4.6rem); font-weight:800; letter-spacing:-.035em; line-height:1.02; margin:0}
.site-bald h1 span{color:#2bcdee}
.site-bald p{color:#9196a1; font-size:1.0625rem; max-width:46ch; margin:0}
.site-knopf{display:inline-flex; align-items:center; gap:9px; margin-top:8px; border-radius:10px; padding:13px 24px; font-weight:600; font-size:.9375rem; color:#12161a; text-decoration:none;
  background:linear-gradient(180deg,#51daf6,#17b4d3); box-shadow:0 0 16px hsl(190 85% 55% / .2),inset 0 1px 0 hsl(0 0% 100% / .3)}

/* Rechtstexte: Impressum, Datenschutz */
.site-recht{background:#101114; color:#f3f4f6; font-family:Inter,ui-sans-serif,system-ui,sans-serif; letter-spacing:-.011em; line-height:1.65; -webkit-font-smoothing:antialiased; padding:clamp(56px,8vw,96px) 24px clamp(72px,9vw,120px)}
.site-recht *{box-sizing:border-box}
.site-recht-in{max-width:760px; margin-inline:auto}
.site-recht .ey{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11.5px; letter-spacing:.17em; text-transform:uppercase; color:#9196a1; display:flex; align-items:center; gap:10px}
.site-recht .ey::before{content:""; width:22px; height:1px; background:#2e3138}
.site-recht h1{font-size:clamp(2.2rem,5vw,3.4rem); font-weight:800; letter-spacing:-.03em; line-height:1.05; margin:16px 0 40px}
.site-recht section{padding:26px 0; border-top:1px solid #2e3138}
.site-recht h2{font-size:1.125rem; font-weight:700; letter-spacing:-.015em; margin:0 0 10px; color:#f3f4f6}
.site-recht h2 .nr{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.8125rem; color:#2bcdee; margin-right:10px; letter-spacing:.04em}
.site-recht p,.site-recht li{color:#b4b8c0; font-size:.9688rem; margin:0}
.site-recht p + p{margin-top:12px}
.site-recht strong{color:#f3f4f6; font-weight:600}
.site-recht ul{margin:8px 0 0; padding-left:20px}
.site-recht li + li{margin-top:4px}
.site-recht a{color:#2bcdee; text-decoration:none; border-bottom:1px solid hsl(190 85% 55% / .35)}
.site-recht a:hover{border-bottom-color:#2bcdee}
.site-recht address{font-style:normal; color:#b4b8c0}

/* Aktionsleiste ueber dem Kopf (laufende Aktion) */
.aktion{display:flex; align-items:center; justify-content:center; gap:12px; min-height:42px; padding:8px 20px; box-sizing:border-box;
  background:linear-gradient(90deg,#0b1a20,#0f2a33 50%,#0b1a20); border-bottom:1px solid hsl(190 85% 55% / .28);
  color:#f3f4f6; text-decoration:none; font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; font-size:.875rem; letter-spacing:-.005em; line-height:1.3;
  -webkit-font-smoothing:antialiased; transition:background .2s ease}
.aktion:hover{background:linear-gradient(90deg,#0d2028,#123440 50%,#0d2028)}
.aktion-punkt{width:7px; height:7px; border-radius:50%; background:#2bcdee; box-shadow:0 0 0 0 hsl(190 85% 55% / .6); animation:aktion-puls 2.2s ease-out infinite; flex:none}
@keyframes aktion-puls{0%{box-shadow:0 0 0 0 hsl(190 85% 55% / .55)} 70%,100%{box-shadow:0 0 0 9px hsl(190 85% 55% / 0)}}
.aktion-tag{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#2bcdee;
  border:1px solid hsl(190 85% 55% / .4); border-radius:999px; padding:3px 9px; flex:none}
.aktion b{font-weight:700; white-space:nowrap}
.aktion-text{color:#b4b8c0}
.aktion-pfeil{color:#2bcdee; font-weight:600; white-space:nowrap}
.aktion:hover .aktion-pfeil{text-decoration:underline; text-underline-offset:3px}
@media (max-width:900px){ .aktion-text{display:none} }
@media (max-width:520px){ .aktion{gap:9px; font-size:.8125rem; padding-inline:14px} .aktion-tag{display:none} }
@media (prefers-reduced-motion:reduce){ .aktion-punkt{animation:none} }
.aktion{flex-wrap:wrap; row-gap:4px}
.aktion-frist{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#12161a;
  background:linear-gradient(180deg,#51daf6,#17b4d3); border-radius:999px; padding:4px 10px; white-space:nowrap; flex:none}
@media (max-width:520px){ .aktion-mehr{display:none} .aktion b{white-space:normal; text-align:center} }
/* Aktionsleiste klebt unten am Bildschirmrand und laeuft beim Scrollen mit */
.aktion{position:fixed; left:0; right:0; bottom:0; z-index:80; border-bottom:0; border-top:1px solid hsl(190 85% 55% / .32);
  box-shadow:0 -14px 30px -14px hsl(220 20% 2% / .9); padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
body{padding-bottom:46px}
@media (max-width:520px){ body{padding-bottom:64px} }

/* ==== Nur Handy: Logo bleibt einzeilig, Navigation rueckt zusammen ==== */
@media (max-width:520px){
  .site-marke,.site-marke .wort{white-space:nowrap}
  .site-zeile{padding-inline:16px; gap:14px}
  .site-nav{gap:16px}
  .site-nav a{font-size:.8125rem}
}