/* blatt.css — das Pergament-Layout, ausgelagert aus impressum.html und
   methodik.html (#1008). Beide trugen diesen Block BYTE-IDENTISCH; jetzt eine
   Quelle statt zwei Kopien. Inhalt unveraendert. */
/* ════════════════════════════════════════════════════════════════════════
   CHRONOS — Methodik. Gestaltung aus index.html übernommen (Leder, Pergament,
   Messing); hier ohne Karte, deshalb scrollend statt bühnenfest.
   ════════════════════════════════════════════════════════════════════════ */
:root{
  --lth-deep:#120D09; --lth-mid:#241A12; --lth-edge:#4C3826;
  --gold:#D2B178; --gold-hi:#F0DCAE; --brass:#A2834F; --brass-dim:#6E5833;
  --perg:#F2E2B5; --perg-tief:#E8D5A6; --perg-dim:#B9AA84;
  --tinte:#2A2113; --tinte-weich:#57472C; --roetel:#A8482C;
  --frei:#6FCBA8; --mittel:#E0A33C; --verbaut:#D66A6A;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Hoefler Text",Georgia,serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--lth-deep);color:var(--tinte)}
body{font-family:var(--serif);font-size:16.5px;line-height:1.62;
     background:repeating-linear-gradient(72deg,#1B1309 0 3px,#191108 3px 6px),var(--lth-deep)}

#blatt{max-width:60rem;margin:0 auto;padding:clamp(1.4rem,4vw,3.4rem) clamp(1.1rem,4vw,3.6rem) 6rem;
  background:var(--perg);
  background-image:
    radial-gradient(ellipse 22% 17% at 17% 78%, rgba(150,112,58,.13), transparent 70%),
    radial-gradient(ellipse 15% 13% at 82% 24%, rgba(138,100,52,.11), transparent 72%),
    radial-gradient(ellipse 78% 78% at 50% 48%, transparent 56%, rgba(92,70,38,.20) 100%);
  box-shadow:0 0 60px #000, inset 0 0 0 1px rgba(120,92,50,.35)}

h1{font-size:clamp(1.7rem,4.4vw,2.5rem);line-height:1.16;margin:0 0 .2em;
   font-weight:normal;letter-spacing:.005em}
.unter{font-family:var(--mono);font-size:11px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--tinte-weich);margin:0 0 2.4rem;padding-bottom:1.3rem;
  border-bottom:2px solid var(--tinte)}
h2{font-size:1.32rem;font-weight:normal;margin:3.1rem 0 .1em;
   padding-top:.9rem;border-top:1px solid rgba(42,33,19,.28)}
h2 .nr{font-family:var(--mono);font-size:.66em;color:var(--roetel);margin-right:.75em;
  letter-spacing:.08em}
h3{font-size:1.03rem;font-weight:normal;font-style:italic;margin:1.9rem 0 .2em;color:var(--tinte)}
p{margin:.75em 0}
a{color:var(--roetel)}
strong{font-weight:600}
em.q{font-style:italic;color:var(--tinte-weich)}

/* Formeln — als Tafel, nicht als Fließtext */
.f{font-family:var(--mono);font-size:14px;line-height:1.75;white-space:pre-wrap;
   background:rgba(42,33,19,.055);border-left:3px solid var(--brass);
   padding:.85rem 1.1rem;margin:1.05rem 0;overflow-x:auto}
code{font-family:var(--mono);font-size:.865em;background:rgba(42,33,19,.075);
  padding:.09em .34em;border-radius:2px}

/* Warnkasten — dort, wo eine Zahl falsch verstanden werden kann */
.warn{border-left:3px solid var(--roetel);background:rgba(168,72,44,.075);
  padding:.8rem 1.1rem;margin:1.15rem 0;font-size:.955em}
.warn b{color:var(--roetel)}
.merk{border-left:3px solid var(--brass-dim);background:rgba(110,88,51,.075);
  padding:.8rem 1.1rem;margin:1.15rem 0;font-size:.955em}

table{border-collapse:collapse;width:100%;margin:1.15rem 0;font-family:var(--mono);
  font-size:12.5px;font-variant-numeric:tabular-nums}
th{text-align:left;font-weight:normal;text-transform:uppercase;letter-spacing:.12em;
  font-size:10px;color:var(--tinte-weich);border-bottom:1.5px solid var(--tinte);
  padding:.42rem .6rem .42rem 0;vertical-align:bottom}
td{padding:.36rem .6rem .36rem 0;border-bottom:1px solid rgba(42,33,19,.15);
  vertical-align:top}
td.n,th.n{text-align:right;padding-right:1.15rem}
tr:last-child td{border-bottom:none}

ul,ol{margin:.75em 0;padding-left:1.35rem}
li{margin:.32em 0}

/* Inhaltsverzeichnis */
#inhalt{font-family:var(--mono);font-size:12.5px;columns:2;column-gap:2.4rem;
  margin:0 0 1rem;padding:1rem 1.2rem;background:rgba(42,33,19,.05);
  border:1px solid rgba(42,33,19,.2)}
#inhalt a{display:block;color:var(--tinte);text-decoration:none;padding:.16em 0;
  break-inside:avoid}
#inhalt a:hover{color:var(--roetel)}
#inhalt .nr{color:var(--roetel);margin-right:.55em}
/* ── Schmale Geräte ───────────────────────────────────────────────────────
   Die Seite war bis auf die Spaltenregel unten unresponsiv. Zwanzig Tabellen
   und sechsundzwanzig Formelblöcke stehen darin; der breiteste Block bestimmt
   sonst die Breite der GANZEN Seite, und dann wandert der Fließtext seitlich
   aus dem Bild. Die Blöcke scrollen deshalb in sich selbst.
   (.f trägt sein overflow-x schon länger — nur die Tabellen fehlten.) */
@media(max-width:640px){#inhalt{columns:1}}
@media(max-width:760px){
  /* max-content + max-width:100%: die Tabelle nimmt die Breite, die sie
     braucht, aber höchstens die des Blattes — darüber scrollt sie in sich. */
  table{display:block;width:max-content;max-width:100%;overflow-x:auto;
        -webkit-overflow-scrolling:touch}
  #blatt{padding-left:1.05rem;padding-right:1.05rem}
  h1{font-size:clamp(26px,8vw,40px)}
  h2{font-size:clamp(19px,5.4vw,25px)}
  .f{font-size:12.5px;padding:.7rem .8rem}
}

.fuss{margin-top:3.4rem;padding-top:1.1rem;border-top:2px solid var(--tinte);
  font-family:var(--mono);font-size:11.5px;color:var(--tinte-weich);line-height:1.7}
.zurueck{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--tinte-weich);text-decoration:none;
  border:1px solid var(--brass-dim);padding:.55rem 1.1rem;margin-bottom:2rem}
.zurueck:hover{color:var(--roetel);border-color:var(--roetel)}

/* Ehemalige style="…"-Attribute aus methodik.html (#1008).
   `.unter` setzt border-bottom und margin selbst — gleiche Spezifitaet, spaeter
   definiert, gewinnt also. */
.unter-blank     { border:none; padding:0 }
.unter-abstand5  { margin:.5rem 0 0 }
.unter-abstand9  { margin:.9rem 0 0 }