/* ============================================================
   eSport.global — doc.css
   Gemeinsames Stylesheet der Dokumentseiten (Impressum,
   Datenschutz). Ruhige Fassung des Designsystems der
   Startseite: gleiche Token, ohne Streaks/Glows/Sheen.
   Der Inhalt der Dokumente kommt als klassenloses
   semantisches HTML in den Container .doc — alle dortigen
   Elemente werden über Nachfahren-Selektoren gestaltet.
   ============================================================ */

:root{
  --void:#07080A;
  --ground:#0D0E10;
  --panel:#121417;
  --panel-hi:#1A1D21;
  --edge:#2A2E34;
  --metal:#6E747C;
  --metal-hi:#9E9E9F;
  --paper:#E3E3E3;
  --dim:#8A9099;

  --sig:#E22F01;
  --sig-lo:#992706;
  --sig-dk:#541F0E;
  --cool:#1F8FB4;
  --cool-lo:#156F8D;
  --cool-dk:#0C3646;

  --ink:#C0C6CD;          /* Fließtextfarbe der Dokumente */

  --f-disp:"Chakra Petch","Eurostile","Arial Narrow",sans-serif;
  --f-body:"Barlow","Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--void);
  color:var(--paper);
  font-family:var(--f-body);
  font-size:16px;line-height:1.65;
  overflow-x:hidden;
}

/* ============ ruhiger hintergrund ============ */
.grid-veil{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27.71' height='48' viewBox='0 0 27.71 48'%3E%3Cpath d='M13.86 0 L27.71 8 L27.71 24 L13.86 32 L0 24 L0 8 Z M13.86 32 L13.86 48' fill='none' stroke='%23FFFFFF' stroke-opacity='0.038' stroke-width='1'/%3E%3C/svg%3E");
  background-size:27.71px 48px;
  mask-image:radial-gradient(ellipse 110% 42% at 50% 0%,#000 12%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 110% 42% at 50% 0%,#000 12%,transparent 78%);
}

/* ============ sprachumschalter (identisch zur startseite) ============ */
.lang{
  position:fixed;z-index:5;
  top:calc(.75rem + env(safe-area-inset-top));
  right:calc(.75rem + env(safe-area-inset-right));
  display:flex;gap:1px;padding:1px;
  background:var(--edge);
}
.lang button{
  font-family:var(--f-disp);font-weight:600;
  font-size:.6rem;letter-spacing:.14em;
  min-width:2.3rem;min-height:1.9rem;padding:0 .1rem;
  border:0;cursor:pointer;
  background:var(--void);color:var(--dim);
  transition:color .18s,background .18s;
}
.lang button[aria-pressed="true"]{background:var(--sig);color:#fff}
.lang button:focus-visible{outline:2px solid var(--paper);outline-offset:2px}

/* ============ layout ============ */
main{
  position:relative;z-index:1;
  max-width:min(94vw,37.5rem);
  margin:0 auto;
  padding:calc(1rem + env(safe-area-inset-top)) 0 4rem;
}

/* ============ zurück-link ============ */
.back{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.45rem 0;
  font-family:var(--f-disp);font-weight:600;
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);text-decoration:none;
  transition:color .18s;
}
.back .arr{transition:transform .18s}
.back:hover{color:var(--paper)}
.back:hover .arr{transform:translateX(-3px)}
.back:focus-visible{outline:2px solid var(--paper);outline-offset:3px}

/* ============ dokumentkopf ============ */
.doc-head{margin:2.2rem 0 2rem}
.doc-head::after{
  content:"";display:block;height:1px;margin-top:1.35rem;
  background:linear-gradient(90deg,var(--sig-dk),var(--edge) 35%,transparent 94%);
}
.doc-title{
  margin:0;
  font-family:var(--f-disp);font-style:italic;font-weight:700;
  font-size:clamp(1.35rem,6.4vw,2.1rem);line-height:1.12;
  letter-spacing:-.012em;text-transform:uppercase;
  background:linear-gradient(178deg,#FFF 8%,var(--paper) 38%,#8D9299 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-wrap:balance;
}
.doc-title::after{
  content:"";display:inline-block;width:8px;height:8px;
  margin-left:.6rem;vertical-align:.16em;
  transform:rotate(45deg);background:var(--sig);
}
.stamp{
  margin:.9rem 0 0;
  font-family:var(--f-disp);font-weight:500;
  font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);
}

/* ============================================================
   .doc — typografie für klassenloses generator-html
   ============================================================ */
.doc{
  max-width:66ch;
  overflow-wrap:anywhere;
}

.doc p{margin:0 0 1.05rem;color:var(--ink)}

.doc h2{
  display:flex;align-items:center;gap:.7rem;
  margin:2.6rem 0 1rem;
  font-family:var(--f-disp);font-weight:700;
  font-size:.8rem;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper);
}
.doc h2::after{
  content:"";flex:1;min-width:1.5rem;height:1px;
  background:linear-gradient(90deg,var(--edge),transparent);
}
.doc h2:first-child{margin-top:.2rem}

.doc h3{
  margin:1.9rem 0 .6rem;
  font-family:var(--f-disp);font-weight:600;
  font-size:.68rem;line-height:1.5;letter-spacing:.13em;text-transform:uppercase;
  color:var(--metal-hi);
}

.doc ul,.doc ol{margin:0 0 1.1rem;padding-left:1.25rem;color:var(--ink)}
.doc li{margin:.35rem 0}
.doc li::marker{color:var(--metal)}
.doc ul ul,.doc ol ol,.doc ul ol,.doc ol ul{margin:.35rem 0 .45rem}

.doc a{
  color:var(--cool);
  text-decoration:underline;
  text-decoration-color:color-mix(in srgb,var(--cool) 45%,transparent);
  text-decoration-thickness:1px;text-underline-offset:3px;
  transition:text-decoration-color .18s,color .18s;
}
.doc a:hover{color:#3EA6C9;text-decoration-color:var(--cool)}
.doc a:focus-visible{outline:2px solid var(--paper);outline-offset:2px}

.doc strong{color:var(--paper);font-weight:600}
.doc em{font-style:italic}

.doc address{font-style:normal}

.doc hr{
  border:0;height:1px;margin:2.1rem 0;
  background:linear-gradient(90deg,transparent,var(--edge) 15%,var(--edge) 85%,transparent);
}

.doc blockquote{
  margin:0 0 1.1rem;padding:.15rem 0 .15rem 1rem;
  border-left:2px solid var(--edge);color:var(--dim);
}

/* tabellen scrollen im eigenen container, die seite nie */
.doc table{
  display:block;max-width:100%;overflow-x:auto;
  margin:1.25rem 0 1.4rem;
  border-collapse:collapse;
  font-size:.88rem;line-height:1.5;
  overflow-wrap:normal;      /* zellen nicht willkürlich brechen — dafür scrollt die tabelle */
  -webkit-overflow-scrolling:touch;
}
.doc th,.doc td{
  border:1px solid var(--edge);
  padding:.5rem .7rem;
  text-align:left;vertical-align:top;
}
.doc th{
  font-family:var(--f-disp);font-weight:600;
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);background:var(--panel);
}
.doc td{color:var(--ink)}

/* ============ credential-zeilen (angaben, keine fließtexte) ============ */
.cred{margin:0 0 1.4rem;display:grid;gap:.6rem}
.cred div{display:flex;align-items:baseline;gap:.6rem}
.cred dt{
  flex:none;width:5.6rem;
  font-family:var(--f-disp);font-weight:500;
  font-size:.575rem;letter-spacing:.17em;text-transform:uppercase;color:var(--dim);
}
.cred dd{
  margin:0;flex:none;max-width:70%;
  font-family:var(--f-disp);font-weight:600;
  font-size:.78rem;letter-spacing:.03em;color:var(--paper);
  text-align:right;
}
.cred dd a{
  color:var(--paper);text-decoration:none;
  border-bottom:1px solid var(--cool-lo);
  transition:color .18s,border-color .18s;
}
.cred dd a:hover{color:#3EA6C9;border-color:var(--cool)}
.cred dd a:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.dots{
  flex:1;height:1px;align-self:center;
  background:repeating-linear-gradient(90deg,var(--edge) 0 2px,transparent 2px 5px);
}

/* ============ footer (wie startseite) ============ */
footer{
  margin-top:3rem;padding-top:1.3rem;
  border-top:1px solid #15181C;
  text-align:center;
}
footer p{margin:0 0 .5rem;font-size:.78rem;color:#8A9099}
footer a{color:var(--dim);text-decoration:none;border-bottom:1px solid var(--edge)}
footer a:hover{color:var(--paper)}
footer a:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
footer nav{display:flex;gap:1.1rem;justify-content:center;font-size:.74rem;margin-top:.7rem}
footer nav .here{color:#8A9099;border-bottom:1px solid transparent}

@media (min-width:720px){
  main{padding-top:calc(1.6rem + env(safe-area-inset-top))}
  .doc-head{margin:2.8rem 0 2.4rem}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* dunkle UA-Scrollbalken + Theme-Balken (auch im Fenster-iframe der OS-Ansicht) */
:root{color-scheme:dark}
html{scrollbar-width:thin;scrollbar-color:#2A2E34 transparent}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#2A2E34}
::-webkit-scrollbar-thumb:hover{background:#6E747C}