/* ZIPP · täglich eine Stelle · bastianbrexner.de · 2026-09 */
:root{--paper:#f2efe8;--ink:#171714;--muted:#6d6a62;--line:#cbc6bc;--red:#a53627;--panel:#e8e3d9}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.45}
a{color:inherit;text-decoration:none}
.wrap{width:min(calc(100% - 48px),820px);margin:auto}

/* DIA · die Seite hält inne, bis die Stelle steht */
.dia{opacity:0;transition:opacity .8s ease}
.dia.on{opacity:1}
/* PULS · nacheinander, 80 ms */
.puls>*{opacity:0;transform:translateY(6px);transition:opacity .6s ease,transform .6s ease}
.puls.on>*{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.dia,.puls>*{opacity:1!important;transform:none!important;transition:none!important}}

.heute{padding:clamp(60px,9vw,120px) 0 clamp(40px,6vw,70px)}
.kopf{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
      border-bottom:1px solid var(--ink);padding-bottom:12px}
.kicker{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.datum{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* Die Stelle selbst. Georgia, groß, viel Luft — sie ist der einzige Grund für die Seite. */
.stelle{margin:clamp(34px,6vw,60px) 0 0;font:400 clamp(19px,2.3vw,26px)/1.62 Georgia,serif;
        letter-spacing:-.005em;max-width:38em}
.stelle p{margin:0 0 1.1em}
.stelle p:last-child{margin-bottom:0}
/* Szenen: kurze Zeilen, enger gesetzt, damit der Rhythmus sichtbar bleibt */
.stelle.szene{font-size:clamp(18px,2.1vw,23px);line-height:1.5}
.stelle.szene p{margin:0 0 .28em}
.stelle.szene p:empty{height:.7em}

.quelle{margin:clamp(30px,5vw,50px) 0 0;padding-top:18px;border-top:1px solid var(--line);
        font-size:13px;color:var(--muted);line-height:1.7}
.quelle b{color:var(--ink);font-weight:400;font-family:Georgia,serif;font-size:16px}
.quelle a{color:var(--red);border-bottom:1px solid currentColor}

.was{border-top:1px solid var(--line);padding:45px 0 30px;display:grid;grid-template-columns:1fr 1fr;gap:40px}
.was h2{margin:0;font:400 clamp(30px,4vw,48px)/.98 Georgia,serif;letter-spacing:-.04em}
.was p{margin:0 0 16px;font-size:16px;line-height:1.6}

.archiv{border-top:1px solid var(--line);padding:45px 0 100px}
.archiv h2{margin:0 0 20px;font:400 clamp(26px,3vw,36px)/1 Georgia,serif;letter-spacing:-.03em}
.liste{margin:0;padding:0;list-style:none}
.liste li{display:grid;grid-template-columns:96px 1fr;gap:18px;padding:14px 0;
          border-bottom:1px solid var(--line);align-items:baseline}
.liste .d{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.liste .t{font:400 16px/1.5 Georgia,serif}
.liste .b{display:block;margin-top:4px;font-family:Arial,Helvetica,sans-serif;font-size:12px;color:var(--muted)}
.klein{font-size:12px;color:var(--muted);line-height:1.6;margin-top:18px}
.hidden{display:none!important}

@media(max-width:820px){
  .wrap{width:calc(100% - 28px)}
  .was{grid-template-columns:1fr;gap:18px}
  .liste li{grid-template-columns:1fr;gap:4px}
  .heute{padding-top:50px}
}