@charset "UTF-8";
/* ============================================================
   byte-bucket.com — Stylesheet
   Entstanden aus _entwurf/layoutprobe.html. Die dort gemessenen
   Werte sind verbindlich und wurden unverändert übernommen.

   Nicht übernommen wurden die reinen Entwurfshilfen: Bedienleiste
   (.leiste), Raster-Overlay (body.raster), Ansichtsumschaltung
   (.ansicht/.aktiv) und der dunkle Entwurfshintergrund.

   Die Schrift "Playfair Display" liegt auf dem eigenen Server
   (schrift/, seit 03.10.2026) — keine Anfrage geht an Google. Die
   @font-face-Regeln stehen unter „0. Schrift".

   Gliederung
     0. Schrift
     1. Variablen
     2. Grundlagen
     3. Seitenkopf
     4. Seitenrahmen und Spalten
     5. Artikelblock
     6. Artikeltext
     7. KI-Hinweis
     8. Mehr-Knopf
     9. Abschlusslinie des Artikels
    10. Seitenspalte (Nachbarbeiträge)
    11. Blättern
    12. Fußzeile
    13. Zählmarke
    14. Responsiv
   ============================================================ */


/* ============================================================
   0. Schrift
   Playfair Display, vier Dateien in /schrift/: aufrecht und kursiv,
   je „latin" und „latin-ext" (der Browser lädt nur, was die Seite
   braucht). Die aufrechte Datei trägt alle Stärken von 400 bis 800.
   ============================================================ */
@font-face{
  font-family:"Playfair Display";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/schrift/playfair-display-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:"Playfair Display";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/schrift/playfair-display-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:"Playfair Display";font-style:italic;font-weight:400;font-display:swap;
  src:url(/schrift/playfair-display-kursiv-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:"Playfair Display";font-style:italic;font-weight:400;font-display:swap;
  src:url(/schrift/playfair-display-kursiv-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;
}


/* ============================================================
   1. Variablen
   --spalte-links wird vom Server als Inline-Style auf <html>
   gesetzt (Einstellung layout_spalte_links, Standard 72). Der
   Wert hier ist nur der Rückfall, falls das einmal ausbleibt.
   ============================================================ */
:root{
  --seite:#ffffff;
  --text:#333333;
  --schwarz:#000000;
  --meta:rgba(0,0,0,.4);
  --slogan:rgba(0,0,0,.5);
  --grau:#f4f4f4;
  --knopf:#eeeeee;
  --linie:rgba(0,0,0,.08);
  --spalte-links:72px;
  --buch:800px;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
}


/* ============================================================
   2. Grundlagen
   Im Entwurf war .bb ein Wrapper-Div um die ganze Seite. Im
   Betrieb ist das der <body>; seine Regeln stehen deshalb hier.
   ============================================================ */
*{box-sizing:border-box}

body{
  margin:0;
  background:var(--seite);
  color:var(--text);
  font-family:var(--serif);
  font-size:15px;
  line-height:1.6;
}
body a{color:inherit;text-decoration:none}


/* ============================================================
   3. Seitenkopf
   .bb-name ist für Sehende unsichtbar (das Logo trägt den Namen)
   und wird erst auf dem Handy sichtbar — siehe Abschnitt 14.
   ============================================================ */
.bb-kopf{background:var(--seite);padding:0 40px;border-bottom:1px solid var(--linie)}
.bb-kopf-innen{display:flex;align-items:center;gap:20px;min-height:110px}
.bb-logo{width:60px;height:60px;flex:0 0 auto;display:block;border-radius:2px}
.bb-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.bb-slogan{font-size:15px;font-weight:300;color:var(--slogan);margin:0}


/* ============================================================
   4. Seitenrahmen und Spalten
   .bb-spalten ist der Flex-Behälter: links der Inhalt, rechts
   optional die Seitenspalte mit den Nachbarbeiträgen.
   ============================================================ */
.bb-rumpf{padding:0}
.bb-spalten{display:flex;align-items:flex-start}
.bb-inhalt{flex:1 1 auto;min-width:0}


/* ============================================================
   5. Artikelblock
   Die senkrechte Linie links trägt das Layout. Ihre Breite ist
   --spalte-eng, sobald eine Media Query sie setzt; sonst gilt
   --spalte-links aus der Einstellung. Diese Rückfallkette ist
   der Grund, warum die Media Queries überhaupt greifen — der
   Inline-Style auf <html> würde --spalte-links sonst immer
   überschreiben. Nicht verkürzen.
   ============================================================ */
.buch{max-width:var(--buch);margin:0 auto;padding:0 40px}

.buch-kopf{display:flex;border-bottom:6px solid var(--schwarz)}
.buch-kopf-links{flex:0 0 auto;width:var(--spalte-eng,var(--spalte-links));box-shadow:inset -1px 0 0 var(--schwarz)}
.buch-kopf-rechts{flex:1 1 auto;min-width:0}
.buch-titel{
  color:var(--schwarz);font-size:42px;font-weight:800;line-height:1.2;
  letter-spacing:-1px;padding:40px 0 40px 60px;margin:0;text-wrap:balance;
  hyphens:auto;overflow-wrap:break-word;
}
.buch-titel a:hover{text-decoration:underline}

.buch-rumpf{display:flex;border-bottom:1px solid var(--schwarz)}
.buch-rumpf-links{flex:0 0 auto;width:var(--spalte-eng,var(--spalte-links))}
.buch-rumpf-rechts{flex:1 1 auto;min-width:0;padding:40px 0 60px 60px;position:relative}

/* Auf der Artikelseite schließt der Rumpf kräftig ab statt zart.
   Greift, sobald ein Vorfahr (Seitenbehälter oder <body>) die
   Klasse "artikelansicht" trägt. */
.artikelansicht .buch-rumpf{border-bottom-width:6px}


/* ============================================================
   6. Artikeltext
   ============================================================ */
.eintrag{font-size:18px;line-height:1.6}
.eintrag p{margin:0 0 1.2em}
.eintrag p:last-child{margin-bottom:0}


/* ============================================================
   7. KI-Hinweis — steht zwischen Überschrift und Artikeltext
   ============================================================ */
.ki-hinweis{
  font-size:14px;letter-spacing:.02em;color:var(--meta);
  border-bottom:1px solid var(--linie);padding:0 0 16px;margin:0 0 28px;
}


/* ============================================================
   8. Mehr-Knopf — nur in der Liste, führt zum vollen Beitrag
   ============================================================ */
.mehr{
  background:var(--knopf);color:var(--text);text-transform:uppercase;
  border-radius:30px;position:absolute;right:0;bottom:56px;padding:10px 14px;
  display:inline-flex;align-items:center;gap:6px;line-height:24px;font-size:14px;
  transition:background .15s,color .15s,padding-right .15s;
}
.mehr:hover{background:var(--schwarz);color:#fff;padding-right:20px}
.mehr .kreuz{font-size:20px;line-height:24px;font-weight:400}


/* ============================================================
   9. Abschlusslinie des Artikels (bewusst ohne Datum)
   ============================================================ */
.buch-fuss{border-top:1px solid var(--linie);margin-top:20px;height:20px}


/* ============================================================
   10. Seitenspalte — vorheriger und nächster Beitrag
   ============================================================ */
.bb-nav{flex:0 0 300px;background:var(--grau);align-self:stretch}
.bb-nav-block{padding:26px 30px;border-bottom:1px solid rgba(0,0,0,.07);position:relative}
.bb-nav-label{
  font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--meta);
  margin:0 0 10px;font-weight:400;
}
.bb-nav-titel{font-size:21px;font-weight:700;line-height:1.28;color:var(--schwarz);margin:0;text-wrap:balance}
.bb-nav-block.vor{text-align:left}
.bb-nav-block.zurueck{text-align:right}
.bb-nav-pfeil{
  position:absolute;top:50%;transform:translateY(-50%);
  font-size:26px;color:rgba(0,0,0,.28);line-height:1;
}
.bb-nav-block.vor .bb-nav-pfeil{right:8px}
.bb-nav-block.zurueck .bb-nav-pfeil{left:8px}


/* ============================================================
   11. Blättern
   ============================================================ */
.blaettern{max-width:var(--buch);margin:0 auto;padding:44px 40px 70px;display:flex;gap:10px;align-items:center;justify-content:center}
.blaettern a,.blaettern span{
  font-size:15px;min-width:42px;height:42px;padding:0 14px;border-radius:30px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--knopf);color:var(--text);
}
.blaettern a:hover{background:var(--schwarz);color:#fff}
.blaettern .jetzt{background:var(--schwarz);color:#fff}
.blaettern .punkte{background:none;color:var(--meta)}


/* ============================================================
   12. Fußzeile
   ============================================================ */
.bb-fuss{background:var(--grau);padding:50px 40px 70px;color:rgba(0,0,0,.6);font-size:14px;line-height:1.7}
.bb-fuss-innen{max-width:var(--buch);margin:0 auto}
.bb-fuss a{text-decoration:underline;text-underline-offset:2px}


/* ============================================================
   13. Zählmarke — unsichtbar, steht am Anfang des Artikeltextes
   ============================================================ */
.zaehlmarke{display:block;width:1px;height:1px;overflow:hidden}


/* ============================================================
   14. Responsiv — vier Breiten-Stufen und eine Höhen-Stufe
   ============================================================ */

/* 1) Unter 1100 px: Nachbarartikel wandern unter den Text,
      nebeneinander statt untereinander. Nichts wird versteckt. */
@media (max-width:1100px){
  .bb-spalten{display:block}
  .bb-nav{display:flex;width:100%;border-top:1px solid rgba(0,0,0,.07)}
  .bb-nav-block{flex:1 1 50%;border-bottom:0}
  .bb-nav-block.vor{order:2;border-left:1px solid rgba(0,0,0,.07)}
  .bb-nav-block.zurueck{order:1;text-align:left}
  .bb-nav-block.zurueck .bb-nav-pfeil{left:auto;right:8px;opacity:0}
  .bb-nav-titel{font-size:19px}
}

/* 2) Unter 860 px: Außenabstand zusammenziehen */
@media (max-width:860px){
  .buch,.blaettern,.bb-fuss-innen{padding-left:24px;padding-right:24px}
  .bb-kopf{padding-left:24px;padding-right:24px}
  .buch-titel{font-size:34px;padding-left:40px}
  .buch-rumpf-rechts{padding-left:40px}
}

/* 3) Unter 640 px — Handy hochkant.
      Die senkrechte Linie bleibt, nur schmaler: sie trägt das Layout. */
@media (max-width:640px){
  :root{--spalte-eng:28px}
  .bb-kopf-innen{min-height:84px;gap:14px}
  /* Der lange Slogan braucht auf dem Handy vier Zeilen. Die alte Seite blendet
     ihn unter 719 px aus — dann steht das Logo allein da. Stattdessen: Name als Text. */
  .bb-slogan{display:none}
  .bb-name{
    position:static;width:auto;height:auto;clip-path:none;overflow:visible;
    font-size:20px;font-weight:700;letter-spacing:-.3px;color:var(--schwarz);margin:0;
  }
  .buch-titel{font-size:27px;letter-spacing:-.4px;padding:24px 0 24px 20px}
  .buch-rumpf-rechts{padding:24px 0 30px 20px}
  .eintrag{font-size:17px}
  .mehr{position:static;margin-top:26px;display:inline-flex}
  .buch-fuss{margin-top:26px}
  .bb-nav{display:block}
  .bb-nav-block.vor{border-left:0;border-top:1px solid rgba(0,0,0,.07)}
  .blaettern{flex-wrap:wrap;padding-top:32px;padding-bottom:48px}
  .bb-fuss{padding:36px 24px 48px}
}

/* 4) Unter 420 px — kleine Geräte */
@media (max-width:420px){
  :root{--spalte-eng:16px}
  .buch,.blaettern,.bb-fuss,.bb-kopf{padding-left:16px;padding-right:16px}
  .buch-titel{font-size:24px;padding-left:16px}
  .buch-rumpf-rechts{padding-left:16px}
  .bb-logo{width:48px;height:48px}
  .bb-slogan{font-size:13px}
}

/* 5) Wenig Höhe — Handy im Querformat.
      Dort ist die Breite groß genug, aber jeder senkrechte Abstand zählt. */
@media (max-height:520px) and (orientation:landscape){
  .bb-kopf-innen{min-height:64px}
  .buch-titel{padding-top:20px;padding-bottom:20px;font-size:30px}
  .buch-rumpf-rechts{padding-top:22px;padding-bottom:40px}
  .mehr{bottom:28px}
  .bb-fuss{padding-top:28px;padding-bottom:36px}
  .blaettern{padding-top:26px;padding-bottom:34px}
}

/* Fingerfreundliche Ziele */
@media (pointer:coarse){
  .blaettern a,.blaettern span{min-width:46px;height:46px}
  .mehr{padding-top:12px;padding-bottom:12px}
}

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