/* replicapong — ein einziges Stylesheet, keine Bauwerkzeuge.
   Schrift #000000, Grund #FFFFFF, Ball #1E3AE0 als einziges farbiges Element.
   Schriften liegen selbst gehostet unter /assets/schrift/ — es wird nichts
   von einem fremden Server nachgeladen. */

/* ---------- Schriften ---------- */

@font-face{
  font-family:'Space Grotesk';
  font-style:normal; font-weight:300 700; font-display:swap;
  src:url('/assets/schrift/space-grotesk-roman-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal; font-weight:300 700; font-display:swap;
  src:url('/assets/schrift/space-grotesk-roman-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Source Serif';
  font-style:normal; font-weight:200 900; font-display:swap;
  src:url('/assets/schrift/source-serif-roman-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Source Serif';
  font-style:normal; font-weight:200 900; font-display:swap;
  src:url('/assets/schrift/source-serif-roman-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Source Serif';
  font-style:italic; font-weight:200 900; font-display:swap;
  src:url('/assets/schrift/source-serif-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Source Serif';
  font-style:italic; font-weight:200 900; font-display:swap;
  src:url('/assets/schrift/source-serif-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Grundwerte ---------- */

:root{
  --ink:#000000;
  --ground:#ffffff;
  --ball:#1E3AE0;
  --mute:#585858;
  --rule:#dcdcdc;
  --grotesk:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --serif:'Source Serif',Georgia,'Times New Roman',serif;
  --breit:44rem;   /* Satzspiegel */
  --rand:1.5rem;   /* Seitenrand */
}

*,*::before,*::after{box-sizing:border-box}

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

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--serif);
  font-size:1.125rem;
  line-height:1.65;
  font-kerning:normal;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

/* Sprungmarke für Tastatur und Screenreader */
.sprung{
  position:absolute; left:-9999px; top:0;
  background:var(--ground); color:var(--ink);
  padding:.6rem 1rem; font-family:var(--grotesk); font-size:.9rem;
  border:2px solid var(--ball); z-index:10;
}
.sprung:focus{left:var(--rand); top:.5rem}

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

a{color:inherit; text-decoration-thickness:1px; text-underline-offset:.18em}
a:hover{text-decoration-color:var(--ball)}

.bahn{max-width:var(--breit); margin-inline:auto; padding-inline:var(--rand)}
.weit{max-width:58rem}

/* ---------- Wortmarke ---------- */

.marke{
  display:inline-flex; align-items:stretch;
  font-family:var(--grotesk); font-weight:700;
  letter-spacing:-.045em; line-height:1;
  text-decoration:none; color:var(--ink);
  font-size:1.375rem;
}
.marke__wort{display:inline-block}
.marke__netz{
  width:2px; margin:0 .3em; align-self:stretch;
  background:repeating-linear-gradient(to bottom,var(--ink) 0 4px,transparent 4px 8px);
}
.marke__ball{
  align-self:center;
  width:.26em; height:.26em; margin-left:.18em;
  background:var(--ball);
}
.marke--gross{font-size:clamp(2.25rem,7vw,4rem)}
.marke--gross .marke__netz{
  width:4px;
  background:repeating-linear-gradient(to bottom,var(--ink) 0 9px,transparent 9px 18px);
}
.marke--gross .marke__ball{width:.22em; height:.22em; margin-left:.16em}

/* ---------- Kopf ---------- */

.kopf{border-bottom:1px solid var(--rule)}
.kopf__innen{
  display:flex; flex-wrap:wrap; gap:.75rem 1.5rem;
  align-items:baseline; justify-content:space-between;
  padding-block:1.125rem;
}
.kopf nav{font-family:var(--grotesk); font-size:.9375rem}
.kopf nav ul{display:flex; flex-wrap:wrap; gap:1.25rem; margin:0; padding:0; list-style:none}
.kopf nav a{text-decoration:none}
.kopf nav a:hover{text-decoration:underline; text-decoration-color:var(--ball)}
.kopf nav [aria-current="page"]{
  text-decoration:underline; text-decoration-color:var(--ball);
  text-decoration-thickness:2px;
}
.sprachen{
  font-family:var(--grotesk); font-size:.8125rem; letter-spacing:.06em;
  color:var(--mute); margin:0;
}
.sprachen a{color:var(--ink); text-decoration:none}
.sprachen a:hover{text-decoration:underline}
.sprachen [aria-current="true"]{color:var(--ink); font-weight:500}
.sprachen [data-fehlt]{color:#9a9a9a}

/* ---------- Fließtext ---------- */

main{padding-block:3.5rem 4.5rem}

h1,h2,h3{font-weight:600; letter-spacing:-.012em; line-height:1.22; text-wrap:balance}
h1{font-size:clamp(1.75rem,4.2vw,2.5rem); margin:0 0 1.5rem}
h2{font-size:1.375rem; margin:2.75rem 0 .75rem}
h3{font-size:1.125rem; margin:2rem 0 .5rem}

p{margin:0 0 1.15rem}
p:last-child{margin-bottom:0}

.vorspann{font-size:1.25rem; line-height:1.55; margin-bottom:1.75rem}

blockquote{
  margin:1.75rem 0; padding-left:1.25rem;
  border-left:2px solid var(--ball); font-style:italic;
}

hr{border:0; height:1px; background:var(--rule); margin:3rem 0}

.datum{
  font-family:var(--grotesk); font-size:.8125rem; letter-spacing:.04em;
  color:var(--mute); margin:0 0 .5rem;
}

/* Prompts zum Kopieren: Monospace, ausgewählt in einem Griff */
pre{
  font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  font-size:.875rem; line-height:1.55;
  border:1px solid var(--rule); padding:1rem 1.125rem;
  overflow-x:auto; white-space:pre-wrap; word-break:break-word;
  margin:1.5rem 0; -webkit-user-select:all; user-select:all;
}
code{font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace; font-size:.9em}
pre code{font-size:inherit}

/* ---------- Herkunft: von Hand, vom Modell, beides ---------- */

/* Das Zeichen borgt sich das Vokabular der Wortmarke: Schwarz ist die Seite,
   Blau ist der Ball — das, was vom Modell zurueckkommt. */
.herkunft{
  display:inline-block; width:.62em; height:.62em;
  vertical-align:-.02em; margin-right:.35em;
  border:1px solid var(--ink);
}
.herkunft--hand{background:var(--ink)}
.herkunft--modell{background:var(--ball); border-color:var(--ball)}
.herkunft--beides{
  background:linear-gradient(135deg,var(--ink) 0 50%,var(--ball) 50% 100%);
}
/* vor einem einzelnen Block innerhalb eines Textes */
.herkunft-block{
  font-family:var(--grotesk); font-size:.75rem; letter-spacing:.04em;
  color:var(--mute); margin:1.5rem 0 -.75rem;
}

.herkunft-hinweis{
  font-family:var(--grotesk); font-size:.875rem; line-height:1.6;
  color:var(--mute); border-left:2px solid var(--ball);
  padding-left:1.125rem; margin:0 0 2.25rem;
}
.herkunft-hinweis strong{color:var(--ink); font-weight:500}

.legende{
  font-family:var(--grotesk); font-size:.8125rem; color:var(--mute);
  margin:0 0 .75rem; line-height:1.9;
}
.legende span.herkunft{margin-left:.9rem}
.legende span.herkunft:first-of-type{margin-left:.45rem}

/* ---------- Bilder ---------- */

figure{margin:2.25rem 0}
figure img,figure svg{
  display:block; width:100%; height:auto;
  border:1px solid var(--rule); background:var(--ground);
}
figcaption{
  font-family:var(--grotesk); font-size:.8125rem; line-height:1.5;
  color:var(--mute); margin-top:.6rem;
}

/* ---------- Stehender Satz auf der Startseite ---------- */

.claim{
  font-size:clamp(1.75rem,4.2vw,2.5rem); font-weight:600;
  letter-spacing:-.012em; line-height:1.22;
  margin:0 0 3rem; text-wrap:balance;
}

/* ---------- Beitragsliste ---------- */

.liste{list-style:none; margin:0; padding:0}
.liste > li{padding-block:1.5rem; border-top:1px solid var(--rule)}
.liste > li:first-child{border-top:0; padding-top:0}
.liste h2,.liste h3{margin:0 0 .35rem; font-size:1.25rem}
.liste a{text-decoration:none}
.liste a:hover{text-decoration:underline; text-decoration-color:var(--ball)}
.liste p{margin:0; color:#333}

.leer{color:var(--mute); font-style:italic}

/* ---------- Sprachweiche auf der Wurzel ---------- */

.weiche{
  min-height:100svh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2.5rem; text-align:center;
  padding:var(--rand);
}
.weiche ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem 2rem; justify-content:center;
  font-family:var(--grotesk); font-size:1.125rem;
}
.weiche ul a{text-decoration:none; border-bottom:2px solid var(--ball); padding-bottom:.15rem}
.weiche__hinweis{color:var(--mute); font-size:.9375rem; max-width:34rem; margin:0}

/* ---------- Fuß ---------- */

.fuss{border-top:1px solid var(--rule); padding-block:2rem 3rem; font-size:.9375rem}
.fuss ul{
  list-style:none; margin:0 0 1rem; padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem;
  font-family:var(--grotesk); font-size:.875rem;
}
.fuss a{text-decoration:none}
.fuss a:hover{text-decoration:underline}
.fuss p{color:var(--mute); font-size:.875rem; line-height:1.55}
.fuss .lizenz{font-family:var(--grotesk); font-size:.8125rem; margin-bottom:.75rem}

/* ---------- Druck ---------- */

@media print{
  .kopf nav,.sprachen,.fuss ul,.sprung{display:none}
  body{font-size:11pt}
  a{text-decoration:none}
  .marke__ball{background:#000}
}