/* ================================================================
   coinstrikegame.com.de
   Optik eines technischen Datenblatts: Beton, Graphit, Signalrot
   für Grenzwerte, Stahlblau als Träger. Kanten sind abgeschrägt.
   Mobile-first. Signatur: Grenzwert-Balken.
   ================================================================ */

:root{
  --beton:   #E9EAE8;
  --beton-2: #DCDEDB;
  --weiss:   #FAFBFA;
  --graphit: #1A1D21;
  --graphit-2:#252A30;
  --graphit-3:#333A42;
  --signal:  #D8352A;
  --signal-h:#B62A21;
  --stahl:   #3E6688;
  --stahl-h: #2F5170;
  --text:    #191C1F;
  --text-2:  #5A6268;
  --linie:   #C6C9C5;
  --linie-d: rgba(255,255,255,.14);

  --w: 1160px;
  --p: 20px;
  --kante: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));

  --disp: "Saira Condensed", "Arial Narrow", sans-serif;
  --body: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  --mono: "Fira Mono", ui-monospace, Menlo, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.66;
  color:var(--text);
  background:var(--beton);
  padding-bottom:72px;
}

.rahmen{ width:100%; max-width:var(--w); margin-inline:auto; padding-inline:var(--p); }

.sprung{ position:absolute; left:-9999px; background:var(--signal); color:#fff; padding:10px 16px; z-index:99; }
.sprung:focus{ left:0; top:0; }

/* ---------- Typografie ---------- */
h1,h2{
  font-family:var(--disp); font-weight:700;
  line-height:1.05; letter-spacing:.005em;
  margin:0 0 .45em; text-wrap:balance; color:var(--graphit);
  text-transform:uppercase;
}
h1{ font-size:clamp(2rem,6.6vw,3.5rem); }
h2{ font-size:clamp(1.6rem,4.8vw,2.5rem); }
h3{
  font-family:var(--body); font-weight:600;
  font-size:clamp(1.02rem,2.7vw,1.16rem);
  margin:2.2em 0 .45em; color:var(--graphit);
}

p{ margin:0 0 1.1em; }
a{ color:var(--stahl); }
strong,b{ font-weight:600; }

.ueber{
  font-family:var(--mono); font-size:.68rem;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--signal); margin-bottom:1.1em;
}
.ueber--n{ color:var(--stahl); }

.ein{ font-size:1.02rem; color:var(--text-2); max-width:64ch; }
.klein{ font-size:.86rem; color:var(--text-2); border-top:1px solid var(--linie); padding-top:13px; }

.stand{
  font-family:var(--mono); font-size:.7rem;
  color:var(--text-2);
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin:-.05em 0 1.2em;
  padding:6px 0 6px 12px; border-left:4px solid var(--signal);
}
.stand time{ color:var(--graphit); font-weight:700; }
.stand__n{ opacity:.64; }

/* ---------- dunkle Abschnitte ---------- */
.ab--dunkel{ background:var(--graphit); color:#BFC5C9; }
.ab--dunkel h2,.ab--dunkel h3{ color:#fff; }
.ab--dunkel .ein{ color:#949CA2; }
.ab--dunkel .ueber--n{ color:#7FA8C9; }
.ab--dunkel a{ color:#8FB8D6; }
.ab--dunkel .klein{ border-top-color:var(--linie-d); color:#949CA2; }

/* ---------- Kopf ---------- */
.kopf{ background:var(--graphit); border-bottom:4px solid var(--signal); }
.kopf__i{ display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:54px; flex-wrap:wrap; }
.marke{ font-family:var(--disp); font-weight:700; font-size:1.05rem; letter-spacing:.02em; text-transform:uppercase; display:flex; align-items:center; gap:9px; color:#fff; }
.marke__z{ width:14px; height:14px; flex:none; background:var(--signal); clip-path:polygon(0 0,100% 0,100% 70%,70% 100%,0 100%); }
.marke__d{ color:#7A838A; }
.navi{ display:none; gap:17px; font-size:.85rem; font-weight:600; }
.navi a{ color:#949CA2; text-decoration:none; }
.navi a:hover{ color:var(--signal); }

/* ---------- Leiste ---------- */
.leiste{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:var(--graphit);
  border-top:4px solid var(--signal);
  padding:10px var(--p);
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  transition:opacity .2s ease;
}
.leiste__t{ font-size:.82rem; color:#BFC5C9; line-height:1.3; font-weight:600; }

/* ---------- Knöpfe: abgeschrägte Kante ---------- */
.knp{
  display:inline-flex; flex-direction:column; align-items:center; gap:1px;
  font-family:var(--disp); font-weight:700; font-size:1.02rem; line-height:1.2;
  letter-spacing:.03em; text-transform:uppercase;
  text-decoration:none; text-align:center;
  padding:14px 26px;
  clip-path:var(--kante);
  transition:background .14s ease;
}
.knp--sig{ background:var(--signal); color:#fff; }
.knp--sig:hover{ background:var(--signal-h); }
.knp--blass{ background:var(--beton); color:var(--graphit); }
.knp--blass:hover{ background:#fff; }
.knp--gross{ padding:17px 32px; font-size:1.14rem; }
.knp--klein{ padding:9px 18px; font-size:.9rem; }
.knp__u{ font-family:var(--body); font-weight:400; font-size:.7rem; text-transform:none; letter-spacing:0; opacity:.85; }

.knp:focus-visible,a:focus-visible,summary:focus-visible{
  outline:3px solid var(--stahl); outline-offset:3px;
}

/* ---------- Held ---------- */
.held{ background:var(--weiss); padding:34px 0 40px; border-bottom:4px solid var(--graphit); }
.held__l{ font-size:1.03rem; color:var(--text-2); max-width:57ch; }
.held__n{ font-size:.81rem; color:#7E858A; margin:13px 0 0; }

/* Signatur: Grenzwert-Balken */
.grenz{ margin-top:32px; background:var(--beton); border:2px solid var(--graphit); padding:16px 16px 12px; }
.grenz__h{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--graphit); margin:0 0 14px; padding-bottom:8px; border-bottom:1px solid var(--linie);
}
.gw{ margin-bottom:15px; padding-bottom:13px; border-bottom:1px dashed var(--linie); }
.gw--letzt{ border-bottom:0; margin-bottom:6px; padding-bottom:0; }
.gw__l{ font-family:var(--disp); font-weight:700; font-size:.94rem; text-transform:uppercase; letter-spacing:.02em; margin:0 0 7px; color:var(--graphit); }
.gw__b{ height:9px; background:#CFD2CE; margin-bottom:3px; }
.gw__i{ display:block; height:100%; background:var(--stahl); }
.gw__d{ display:block; height:100%; background:var(--signal); }
.gw__d--null{ background:var(--graphit); }
.gw__w{ font-family:var(--mono); font-size:.71rem; color:var(--text-2); margin:0 0 7px; }
.gw__w b{ color:var(--graphit); font-weight:700; }
.grenz__f{ margin:0; font-size:.7rem; color:#7E858A; font-style:italic; }

/* ---------- Abschnitte ---------- */
.ab{ padding:44px 0; }
.ab--hell{ background:var(--beton-2); }
.ab--schluss{ text-align:center; }
.schluss{ max-width:650px; }

.antw{ background:var(--weiss); border-left:6px solid var(--stahl); padding:19px 20px 5px; }
.antw__m{ font-family:var(--mono); font-size:.64rem; letter-spacing:.17em; text-transform:uppercase; color:var(--stahl); margin-bottom:.6em; }
.antw__t{ font-size:1.03rem; }

/* ---------- Anbieterliste ---------- */
.liste{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:12px; }
.liste__p{ color:var(--text-2); font-size:.9rem; }

.an{ background:var(--weiss); border:1px solid var(--linie); border-top:5px solid var(--stahl); padding:18px 17px; display:grid; gap:12px; }
.an--1{ border-top-color:var(--signal); }
.an__k{ display:flex; align-items:flex-start; gap:11px; }
.an__nr{
  font-family:var(--mono); font-weight:700; font-size:.8rem;
  background:var(--graphit); color:#fff;
  width:27px; height:27px; flex:none; display:grid; place-items:center;
}
.an--1 .an__nr{ background:var(--signal); }
.an__n{ font-family:var(--disp); font-weight:700; font-size:1.24rem; text-transform:uppercase; letter-spacing:.02em; margin:0 0 1px; }
.an__b{ font-size:.86rem; color:var(--text-2); margin:0; }

.an__d{ margin:0; display:grid; gap:1px; background:var(--linie); }
.an__d > div{ background:var(--beton); padding:8px 12px; display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.an__d dt{ font-size:.76rem; color:var(--text-2); }
.an__d dd{ margin:0; font-family:var(--mono); font-size:.73rem; font-weight:700; text-align:right; }

.an__p{ margin:0; padding-left:17px; font-size:.87rem; color:var(--text-2); }
.an__p li{ margin-bottom:4px; }
.an .knp{ width:100%; }

/* ---------- Tabellen ---------- */
.tbl{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:18px 0 22px; border:1px solid var(--linie); background:var(--weiss); }
.ab--dunkel .tbl{ border-color:var(--linie-d); background:var(--graphit-2); }

table{ width:100%; border-collapse:collapse; font-size:.88rem; min-width:420px; }
.tbl--breit{ min-width:620px; }

caption{
  text-align:left; font-family:var(--mono);
  font-size:.62rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--text-2); padding:12px 14px 6px;
}
.ab--dunkel caption{ color:#7FA8C9; }

th,td{ text-align:left; padding:10px 14px; border-top:1px solid var(--linie); vertical-align:top; }
.ab--dunkel th,.ab--dunkel td{ border-top-color:var(--linie-d); }

thead th{ font-family:var(--disp); font-weight:700; font-size:.92rem; text-transform:uppercase; letter-spacing:.02em; background:var(--graphit); color:#fff; }
.ab--dunkel thead th{ background:var(--graphit-3); }

tbody tr:nth-child(even) td{ background:rgba(62,102,136,.05); }
.ab--dunkel tbody tr:nth-child(even) td{ background:rgba(255,255,255,.028); }

/* ---------- Listen ---------- */
.punkte{ list-style:none; margin:15px 0 0; padding:0; display:grid; gap:9px; }
.punkte li{ position:relative; padding-left:25px; font-size:.94rem; }
.punkte li::before{
  content:""; position:absolute; left:0; top:.6em;
  width:12px; height:12px; background:var(--signal);
  clip-path:polygon(0 0,100% 0,100% 60%,60% 100%,0 100%);
}
.ab--dunkel .punkte li::before{ background:#7FA8C9; }

.schritte{ counter-reset:s; list-style:none; margin:17px 0 0; padding:0; display:grid; gap:13px; }
.schritte li{ counter-increment:s; position:relative; padding-left:44px; font-size:.94rem; }
.schritte li::before{
  content:"0" counter(s);
  position:absolute; left:0; top:.08em;
  font-family:var(--mono); font-size:.86rem; font-weight:700;
  color:var(--signal);
}
.ab--dunkel .schritte li::before{ color:#7FA8C9; }

/* ---------- Kasten ---------- */
.kast{
  background:var(--weiss); border:1px solid var(--linie);
  border-left:6px solid var(--stahl);
  padding:14px 17px; font-size:.92rem; margin-top:19px;
}
.kast--sig{ border-left-color:var(--signal); }
.ab--dunkel .kast{ background:var(--graphit-2); border-color:var(--linie-d); border-left-color:#7FA8C9; }
.ab--dunkel .kast--sig{ border-left-color:var(--signal); }

/* ---------- CTA ---------- */
.cta{ margin-top:26px; border:2px solid var(--graphit); padding:19px 18px; display:grid; gap:13px; justify-items:start; background:var(--weiss); }
.ab--dunkel .cta{ background:var(--graphit-2); border-color:var(--graphit-3); }
.cta__t{ margin:0; font-size:.96rem; }
.cta .knp{ width:100%; }

/* ---------- Karten ---------- */
.karten{ display:grid; gap:12px; margin-top:24px; }
.karte{ background:var(--weiss); border:1px solid var(--linie); border-top:5px solid var(--signal); padding:18px 17px; }
.karte h3{ margin:0 0 4px; font-size:1rem; }
.karte__n{ font-family:var(--mono); font-weight:700; font-size:1.02rem; color:var(--stahl); margin:0 0 .55em; }
.karte__n a{ color:inherit; text-decoration:none; }
.karte p:last-child{ margin-bottom:0; font-size:.89rem; color:var(--text-2); }

/* ---------- FAQ ---------- */
.faq{ margin-top:22px; border-top:4px solid var(--graphit); }
.faq details{ border-bottom:1px solid var(--linie); }
.faq summary{
  cursor:pointer; list-style:none; padding:15px 36px 15px 0;
  font-family:var(--disp); font-weight:700; font-size:1.06rem;
  text-transform:uppercase; letter-spacing:.02em; position:relative;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:8px; top:50%; margin-top:-6px;
  width:12px; height:12px; background:var(--signal);
  clip-path:polygon(50% 100%,0 0,100% 0); transition:transform .15s;
}
.faq details[open] summary::after{ transform:rotate(180deg); }
.faq details p{ margin:0 0 16px; font-size:.92rem; color:var(--text-2); max-width:72ch; }

/* ---------- Fuß ---------- */
.fuss{ background:var(--graphit); color:#8A9298; padding:32px 0 28px; font-size:.85rem; border-top:4px solid var(--signal); }
.fuss__a{ display:flex; align-items:center; gap:10px; font-family:var(--disp); font-weight:700; font-size:1.02rem; text-transform:uppercase; color:#fff; }
.fuss__a span{ background:var(--signal); color:#fff; padding:2px 9px; font-family:var(--mono); font-size:.78rem; }
.fuss strong{ color:#fff; }
.fuss a{ color:#8FB8D6; }
.fuss__s{ font-size:.81rem; border-top:1px solid var(--linie-d); padding-top:13px; margin-top:16px; }
.fuss__s time{ color:#fff; font-family:var(--mono); font-size:.78rem; }
.fuss__m{ font-size:.77rem; color:#666E74; margin-bottom:0; }

/* ================================================================
   TABLET
   ================================================================ */
@media (min-width:720px){
  .ab{ padding:60px 0; }
  .held{ padding:50px 0 58px; }
  .knp{ flex-direction:row; align-items:baseline; gap:10px; }
  .an .knp,.cta .knp{ width:auto; }
  .cta{ grid-template-columns:1fr auto; align-items:center; gap:20px; }
  .karten{ grid-template-columns:repeat(3,1fr); }
  .antw{ padding:23px 26px 7px; }
  .grenz{ padding:20px 20px 14px; }
  .an{
    padding:22px 21px;
    grid-template-columns:1fr 250px;
    grid-template-areas:"k d" "p c";
    column-gap:24px; align-items:start;
  }
  .an__k{ grid-area:k; } .an__d{ grid-area:d; }
  .an__p{ grid-area:p; } .an__c{ grid-area:c; align-self:end; }
}

/* ================================================================
   DESKTOP — CTA bleibt im ersten Bildschirm
   ================================================================ */
@media (min-width:980px){
  .navi{ display:flex; }
  body{ padding-bottom:0; }
  .held{ padding:56px 0 64px; }
  .held__i{ display:grid; grid-template-columns:1.12fr .88fr; gap:50px; align-items:start; }
  .grenz{ margin-top:0; }
  .leiste{
    left:auto; right:24px; bottom:auto; top:78px;
    width:262px;
    border-top:0; border:2px solid var(--signal);
    padding:14px 15px;
    flex-direction:column; align-items:stretch; gap:11px;
    text-align:center;
    box-shadow:0 12px 32px rgba(26,29,33,.28);
  }
  .leiste__t{ font-size:.84rem; }
  .leiste .knp{ width:100%; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
}
@media print{ .leiste,.kopf,.knp{ display:none; } body{ padding:0; } }