/* ===========================================================================
   Jucama - Gestaltung im Stil einer alten Tageszeitung.

   Leitgedanke: Die Anmutung entsteht durch SATZ, nicht durch Schmutzeffekte.
   Also: Serifenschrift, schmale Spalten, Haarlinien, Kapitälchen, Blocksatz,
   Initialbuchstaben. Kein vergilbtes Papierfoto als Hintergrund, keine
   schiefen Buchstaben - das rutscht ins Kostümhafte und macht den Text
   schlechter lesbar.

   SCHRIFTEN: bewusst nur solche, die auf jedem Gerät vorhanden sind. Keine
   Google Fonts - die würden bei jedem Seitenaufruf die IP-Adresse des
   Besuchers an einen fremden Server melden, was hierzulande abgemahnt wird
   und der Datenschutzerklärung dieser Seite widerspräche. Soll später eine
   eigene Schrift dazukommen, gehört sie selbst gehostet nach assets/ und in
   ein @font-face mit font-display:swap.
   =========================================================================== */

:root {
    /* Papier und Tinte. Das Papier ist ganz leicht warm - reines Weiß wirkt
       auf einem Bildschirm hart und wie ein Formular, nicht wie Papier. */
    --papier:        #f7f4ed;
    --papier-tief:   #efeade;
    --tinte:         #1a1917;
    --tinte-blass:   #55524c;
    --linie:         #1a1917;
    --linie-fein:    #c9c3b5;
    --akzent:        #7a1f14;    /* gedecktes Zinnoberrot, wie alte Druckfarbe */

    --serif:  Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
    --grotesk: "Helvetica Neue", Helvetica, Arial, sans-serif;

    --blatt-breite: 1120px;
    --spalte-lueck: 2.2rem;
}

/* ---------------------------------------------------------------------------
   Grundlagen
   --------------------------------------------------------------------------- */

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

html {
    /* Kein festes Pixelmaß: wer im Browser eine größere Grundschrift
       eingestellt hat, bekommt sie auch. */
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--papier);
    color: var(--tinte);
    font-family: var(--serif);
    font-size: 1.02rem;
    line-height: 1.55;
    /* Feiner Ausgleich, damit Georgia auf hellem Grund nicht zu fett wirkt. */
    -webkit-font-smoothing: antialiased;
}

.blatt {
    max-width: var(--blatt-breite);
    margin: 0 auto;
    padding: 0 1.25rem;
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--akzent); }

img { max-width: 100%; height: auto; }

/* Sprung zum Inhalt - nur sichtbar, wenn er per Tastatur angesteuert wird. */
.skip {
    position: absolute; left: -9999px;
    background: var(--tinte); color: var(--papier);
    padding: .6rem 1rem; z-index: 50;
}
.skip:focus { left: 1rem; top: 1rem; }

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

/* ---------------------------------------------------------------------------
   Zeitungskopf
   --------------------------------------------------------------------------- */

.zeitungskopf { padding-top: .5rem; }

/* Die schmale Zeile ganz oben. In einer echten Zeitung stehen dort Preis,
   Ausgabennummer und Wetter. */
.kopfleiste {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-family: var(--grotesk);
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tinte-blass);
    padding-bottom: .45rem;
    border-bottom: 1px solid var(--linie-fein);
}
.kopfleiste-mitte { text-align: center; }
.kopfleiste-rechts { text-align: right; }
.kopfleiste a { text-decoration: none; border-bottom: 1px solid currentColor; }

/* Der Titelkopf mit der Wortmarke. */
.titelkopf {
    display: block;
    text-align: center;
    padding: 1.5rem 0 1.1rem;
    text-decoration: none;
}
.wortmarke {
    display: block;
    margin: 0 auto;
    width: min(560px, 80%);
    height: auto;
    /* KEIN color: mehr. Die Marke stand früher auf fill="currentColor" und
       nahm die Textfarbe an; seit 2026-08-04 trägt sie ihr Rot (#bd1622)
       fest im SVG. Ein color:-Wert hier bliebe wirkungslos und würde beim
       nächsten Lesen nur die falsche Erwartung wecken. */
}

/* Die Ausgabenzeile unter dem Titel, zwischen zwei Linien - das Element,
   das eine Zeitung am deutlichsten als Zeitung ausweist.
   Oben eine kräftige, unten eine feine Linie: das ist der klassische
   "doppelte Strich" des Zeitungskopfs. */
.ausgabenzeile {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    border-top: 3px solid var(--linie);
    border-bottom: 1px solid var(--linie);
    padding: .4rem 0;
    font-family: var(--grotesk);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.ausgabe-datum { font-weight: 700; }

/* ---------------------------------------------------------------------------
   Hauptmenü
   --------------------------------------------------------------------------- */

.hauptmenue {
    border-bottom: 3px double var(--linie);
    margin-bottom: 1.8rem;
}
.hauptmenue ul {
    list-style: none;
    margin: 0;
    padding: .55rem 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0 1.9rem;
}
.hauptmenue a {
    text-decoration: none;
    font-family: var(--grotesk);
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    /* Sonst bricht "So funktioniert's" mitten im Link um und der Punkt
       sieht aus wie zwei. */
    white-space: nowrap;
}
.hauptmenue a[aria-current="page"] {
    border-bottom: 2px solid var(--akzent);
    padding-bottom: 2px;
}

/* Aufklappen ohne JavaScript: das Kontrollkästchen ist unsichtbar, das
   Stylesheet liest seinen Zustand. Auf breiten Bildschirmen sind Knopf und
   Kästchen ausgeblendet und die Liste immer offen. */
.menue-schalter { position: absolute; opacity: 0; pointer-events: none; }
.menue-knopf { display: none; }

/* ---------------------------------------------------------------------------
   Überschriften und Fließtext
   --------------------------------------------------------------------------- */

h1, h2, h3 {
    font-family: var(--serif);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.01em;
    margin: 0 0 .5rem;
    /* Bindestriche beim Umbruch: bei schmalen Spalten sonst hässliche
       Löcher im Blocksatz. */
    hyphens: auto;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 .9rem; }

/* Die Dachzeile über einer Überschrift ordnet den Beitrag ein, bevor man
   ihn liest - in der Zeitung das "Kicker"-Element. */
.dachzeile {
    font-family: var(--grotesk);
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--akzent);
    margin: 0 0 .35rem;
}

.vorspann {
    font-size: 1.12rem;
    line-height: 1.5;
    font-weight: 700;
    margin-bottom: 1rem;
}

/* Die Zeile mit Datum und Verfasser. */
.zeile-datum {
    font-family: var(--grotesk);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinte-blass);
    border-top: 1px solid var(--linie-fein);
    border-bottom: 1px solid var(--linie-fein);
    padding: .35rem 0;
    margin-bottom: 1rem;
}

/* Der Initialbuchstabe des Aufmachers. Bewusst nur DORT und nicht bei jedem
   Absatz - sonst wird die Seite unruhig. */
.initial::first-letter {
    float: left;
    font-size: 3.9em;
    line-height: .82;
    padding: .06em .09em 0 0;
    font-weight: 700;
}

/* Fließtext in Spalten. column-count statt Grid, weil der Text dann
   tatsächlich von Spalte zu Spalte weiterläuft wie im Satzspiegel. */
.spalten-2 { columns: 2; column-gap: var(--spalte-lueck); column-rule: 1px solid var(--linie-fein); }
.spalten-3 { columns: 3; column-gap: var(--spalte-lueck); column-rule: 1px solid var(--linie-fein); }
.spalten-2 p, .spalten-3 p { text-align: justify; }
/* Ein Bild oder eine Überschrift soll nicht zwischen zwei Spalten
   zerrissen werden. */
.spalten-2 :is(h2, h3, figure, ul), .spalten-3 :is(h2, h3, figure, ul) {
    break-inside: avoid;
}

/* ---------------------------------------------------------------------------
   Titelseite
   --------------------------------------------------------------------------- */

/* Der Aufmacher: breite Hauptspalte, schmale Nebenspalte mit Trennlinie -
   genau die Aufteilung einer Titelseite. */
.aufmacher {
    display: grid;
    grid-template-columns: 2.1fr 1fr;
    gap: var(--spalte-lueck);
    padding-bottom: 1.6rem;
    border-bottom: 3px double var(--linie);
    margin-bottom: 1.8rem;
}
.aufmacher-neben {
    border-left: 1px solid var(--linie-fein);
    padding-left: var(--spalte-lueck);
    font-size: .95rem;
}

figure { margin: 0 0 1rem; }
figcaption {
    font-family: var(--grotesk);
    font-size: .74rem;
    line-height: 1.4;
    color: var(--tinte-blass);
    padding-top: .35rem;
    border-bottom: 1px solid var(--linie-fein);
    padding-bottom: .5rem;
}

/* Abschnittsüberschrift quer über die Seite, wie eine Rubrik im Blatt. */
.rubrik {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2.2rem 0 1.2rem;
}
.rubrik::before, .rubrik::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--linie);
}
.rubrik h2 {
    margin: 0;
    font-size: .95rem;
    font-family: var(--grotesk);
    letter-spacing: .22em;
    text-transform: uppercase;
    font-weight: 700;
    white-space: nowrap;
}

/* Beitragsliste als Zeitungsspalten. */
.blattgitter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.6rem var(--spalte-lueck);
}
.blattgitter > * {
    border-top: 1px solid var(--linie-fein);
    padding-top: .8rem;
}
.blattgitter h3 { margin-bottom: .35rem; }
.blattgitter p { font-size: .93rem; }

/* Das Bild eines Beitrags in einer Liste.
   Festes Seitenverhältnis mit object-fit: cover - so stehen die Bilder einer
   Zeile auf gleicher Höhe, auch wenn eines hochkant und eines quer
   aufgenommen wurde. Ohne das reißt ein einzelnes Hochformat die ganze
   Zeile auseinander. */
.beitrag-bild {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    filter: grayscale(85%) contrast(107%);
    border: 1px solid var(--linie-fein);
    margin-bottom: .6rem;
    display: block;
}

/* Die Gründer - drei Porträtspalten. */
.koepfe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--spalte-lueck);
}
.kopf-bild {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    /* Leichte Entsättigung: Fotos in einer Zeitung sind Rasterdruck, kein
       Hochglanz. Nicht ganz schwarzweiß, das wirkt schnell wie ein Trauerfall. */
    filter: grayscale(85%) contrast(107%);
    border: 1px solid var(--linie-fein);
    margin-bottom: .6rem;
}
.kopf-rolle {
    font-family: var(--grotesk);
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--akzent);
}

/* Der Zahlenspiegel. Wird erst eingeblendet, wenn es etwas vorzuweisen gibt -
   siehe Schalter "zaehler_sichtbar" in den Einstellungen. */
.zahlenspiegel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1.4rem;
    text-align: center;
    border-top: 3px double var(--linie);
    border-bottom: 3px double var(--linie);
    padding: 1.4rem 0;
    margin: 2rem 0;
}
.zahl {
    font-size: clamp(2.4rem, 6vw, 3.6rem);
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: lining-nums;
}
.zahl-text {
    font-family: var(--grotesk);
    font-size: .74rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tinte-blass);
    margin-top: .4rem;
}

/* ---------------------------------------------------------------------------
   Formulare
   --------------------------------------------------------------------------- */

label {
    display: block;
    font-family: var(--grotesk);
    font-size: .74rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: .25rem;
}

input[type=text], input[type=email], textarea, select {
    width: 100%;
    font-family: var(--serif);
    font-size: 1rem;
    padding: .55rem .65rem;
    background: #fffdf8;
    color: var(--tinte);
    border: 1px solid var(--tinte);
    border-radius: 0;   /* Zeitung kennt keine runden Ecken */
}
textarea { min-height: 9rem; resize: vertical; }

.feld { margin-bottom: 1rem; }

button, .knopf {
    display: inline-block;
    font-family: var(--grotesk);
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: .7rem 1.6rem;
    background: var(--tinte);
    color: var(--papier);
    border: 1px solid var(--tinte);
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
}
button:hover, .knopf:hover { background: var(--akzent); border-color: var(--akzent); color: var(--papier); }

/* Das Anmeldefeld des Newsletters. Begrenzt, weil eine E-Mail-Adresse über
   die halbe Seite gezogen albern aussieht — und weil ein übergroßes Feld
   suggeriert, man solle mehr hineinschreiben. */
.nl-form { max-width: 26rem; }

/* Das Honigtopf-Feld gegen Massenzusendungen. Versteckt über eine KLASSE und
   nicht über ein style-Attribut: dadurch kommt die Seite ohne
   'unsafe-inline' in der Content-Security-Policy aus. */
.honig {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

.meldung {
    border: 1px solid var(--linie);
    border-left: 4px solid var(--akzent);
    padding: .8rem 1rem;
    margin-bottom: 1.2rem;
    background: var(--papier-tief);
}
.meldung-gut { border-left-color: #2c6e3f; }

/* ---------------------------------------------------------------------------
   Angabentabelle (Impressum, Datenschutz)
   --------------------------------------------------------------------------- */

.angaben { border-collapse: collapse; margin-bottom: 1.4rem; width: 100%; max-width: 34rem; }
.angaben th, .angaben td {
    text-align: left;
    vertical-align: top;
    padding: .45rem .8rem .45rem 0;
    border-bottom: 1px solid var(--linie-fein);
}
.angaben th {
    font-family: var(--grotesk);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinte-blass);
    font-weight: 400;
    white-space: nowrap;
}

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

.zeitungsfuss { margin-top: 3rem; padding-bottom: 2rem; }
.fuss-linie { border-top: 3px double var(--linie); margin-bottom: 1.4rem; }
.fuss-spalten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--spalte-lueck);
    font-size: .9rem;
}
.fuss-titel {
    font-family: var(--grotesk);
    font-size: .74rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin-bottom: .5rem;
}
.fuss-liste { list-style: none; margin: 0; padding: 0; }
.fuss-schluss {
    margin-top: 1.6rem;
    padding-top: .8rem;
    border-top: 1px solid var(--linie-fein);
    font-family: var(--grotesk);
    font-size: .72rem;
    letter-spacing: .08em;
    color: var(--tinte-blass);
    text-align: center;
}

/* ---------------------------------------------------------------------------
   Schmale Bildschirme
   --------------------------------------------------------------------------- */

/* 900px statt der sonst üblichen 620er-Grenze: die Navigation trägt bis zu
   sechs Punkte in Kapitälchen mit weitem Buchstabenabstand und wird schon
   deutlich früher zu eng als eine gewöhnliche Menüzeile. Dieselbe Erfahrung
   wie bei der paXCry-Seite, wo der Umschaltpunkt aus genau diesem Grund von
   620px auf 820px angehoben werden musste. */
@media (max-width: 900px) {
    .hauptmenue { position: relative; }

    .menue-knopf {
        display: block;
        text-align: center;
        font-family: var(--grotesk);
        font-size: .78rem;
        letter-spacing: .14em;
        text-transform: uppercase;
        padding: .6rem 0;
        cursor: pointer;
    }

    .hauptmenue ul { display: none; flex-direction: column; align-items: center; gap: 0; }
    .menue-schalter:checked ~ ul { display: flex; }
    .hauptmenue li { width: 100%; text-align: center; }
    .hauptmenue li a { display: block; padding: .55rem 0; border-top: 1px solid var(--linie-fein); }

    /* Spalten fallen zusammen. Zweispaltiger Satz auf einem Telefon ergibt
       Zeilen von vier Wörtern - unlesbar. */
    .aufmacher { grid-template-columns: 1fr; }
    .aufmacher-neben { border-left: 0; padding-left: 0; border-top: 1px solid var(--linie-fein); padding-top: 1rem; }
    .spalten-2, .spalten-3 { columns: 1; }
    .spalten-2 p, .spalten-3 p { text-align: left; }
}

@media (max-width: 620px) {
    .kopfleiste { font-size: .62rem; letter-spacing: .08em; }
    .ausgabenzeile { flex-direction: column; align-items: center; gap: .15rem; text-align: center; }
    .initial::first-letter { font-size: 3.1em; }
}

/* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt keine.
   Hier gibt es ohnehin kaum welche - die Regel steht, damit später
   hinzukommende Übergänge nicht durchrutschen. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ---------------------------------------------------------------------------
   Druck
   --------------------------------------------------------------------------- */
/* Eine Zeitung, die man ausdruckt, soll wie eine Zeitung aussehen - und der
   Papierverbrauch für Menü und Fuß ist unnötig. */
@media print {
    .hauptmenue, .kopfleiste, .zeitungsfuss, .skip { display: none; }
    body { background: #fff; font-size: 10.5pt; }
    .blatt { max-width: none; padding: 0; }
    a { text-decoration: none; }
}