/* marckusse 1.0.0 — Stereokanal in Lab-Optik, abgeleitet aus lab.css.
   Grund tiefschwarz (vorerst), Typo 2px kleiner als labs. */

:root {
    /* --font ist der Token, den später der eigene Variable Font ersetzt. */
    --font:   "DejaVu Sans Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --canvas: #000000;   /* vorerst tiefschwarz; labs laufen auf #1c1c1c */
    --ink:    #e6e6e3;
    --cord:   #767676;
    --dim:    #9a9a97;
    --bus:    #333330;   /* Signalbus-Mittellinie */
    --hover:  #161616;
    --ch-l:   #e8b04b;   /* Kanal L — Marcus */
    --ch-r:   #63c9a8;   /* Kanal R — Markus */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font: 13px/1.65 var(--font);
}
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ————— Hero ————— */
.hero {
    position: relative;
    aspect-ratio: 21 / 10;
    max-height: 68vh;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.hero::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.94), transparent 48%);
}
.hero--leer {
    aspect-ratio: auto;
    padding: clamp(48px, 12vw, 110px) 24px 0;
}
.hero--leer::after { content: none; }
.logo {
    position: relative; z-index: 1;
    padding-bottom: clamp(18px, 4vw, 40px);
    text-align: center;
}
.logo img {
    display: block;
    width: min(60vw, 380px);
    height: auto;
}
.logo b {
    font-size: clamp(22px, 5vw, 28px);
    font-weight: 400;
    letter-spacing: .02em;
}

/* ————— Masthead ————— */
.mast { text-align: center; margin: 26px 16px 40px; }
.mast p {
    margin: 0;
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--dim);
}
.vu { display: flex; justify-content: center; gap: 3px; margin-top: 14px; }
.vu i { width: 4px; border-radius: 1px; background: #262624; display: inline-block; }
.vu i.on-l { background: var(--ch-l); }
.vu i.on-r { background: var(--ch-r); }

/* ————— Beitragsliste: der Patch ————— */
.lane {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 56px;
    position: relative;
    padding: 0 28px;
    max-width: 46rem;
    margin: 0 auto;
}
.lane::before {
    content: "";
    position: absolute; top: -34px; bottom: 20px; left: 50%;
    width: 1px;
    background: var(--bus);
}
.lane--archiv { margin-top: clamp(40px, 8vw, 72px); }
.lane--archiv::before { top: 0; }
.eintrag { position: relative; padding: 30px 0 4px; }
.eintrag.l  { grid-column: 1; }
.eintrag.r  { grid-column: 2; }
.eintrag.lr { grid-column: 1 / -1; max-width: 30rem; width: 100%; margin: 0 auto; }
.cord { position: absolute; top: 0; height: 30px; width: 1px; }
.l  .cord { right: 20px; background: var(--ch-l); }
.r  .cord { left: 20px;  background: var(--ch-r); }
.lr .cord { left: 50%;   background: var(--cord); }

/* Objektbox — eins zu eins aus lab.css, samt Ein-/Auslass-Nasen */
.box {
    display: block;
    border: 1px solid var(--ink);
    background: var(--canvas);
    padding: 14px 16px 16px;
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: background .12s linear;
}
a.box:hover, a.box:focus-visible { background: var(--hover); }
a.box:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.box::before, .box::after {
    content: "";
    position: absolute;
    width: 13px; height: 3px;
    background: var(--ink);
}
.box::before { top: -1px; left: -1px; }
.box::after  { bottom: -1px; left: -1px; }

.ch {
    display: block;
    font-size: 10px;
    letter-spacing: .1em;
    margin-bottom: .5em;
    color: var(--dim);
}
.l  .ch { color: var(--ch-l); }
.r  .ch { color: var(--ch-r); }
.name { display: block; font-size: 15px; letter-spacing: .01em; color: var(--ink); margin: 0; }
.desc { display: block; margin-top: .35em; color: var(--dim); font-size: 12px; }

/* ————— Blättern ————— */
.blaettern {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    max-width: 46rem;
    margin: 30px auto 0;
    padding: 0 28px;
    font-size: 11px;
}
.blaettern a { color: var(--dim); text-decoration: none; }
.blaettern a:hover { color: var(--ink); }
.blaettern .neuer { margin-left: auto; }
.leer { text-align: center; color: var(--dim); grid-column: 1 / -1; }

/* ————— Einzelseite ————— */
.einzel {
    max-width: 62ch;
    margin: 0 auto;
    padding: 34px 24px 0;
}
.zurueck {
    display: inline-block;
    margin-bottom: 1.6em;
    color: var(--dim);
    text-decoration: none;
    font-size: 11px;
}
.zurueck:hover { color: var(--ink); }
.kopf { position: relative; margin: 34px 0 26px; }
.kopf .cord {
    position: absolute; top: -34px; left: 20px;
    height: 34px; width: 1px;
    background: var(--cord);
}
.kopf.l .cord { background: var(--ch-l); }
.kopf.r .cord { background: var(--ch-r); }
.kopf.l .ch { color: var(--ch-l); }
.kopf.r .ch { color: var(--ch-r); }
.kopf .name, .kopf h1.name { font-size: 18px; font-weight: 400; }

/* ————— Fließtext ————— */
.inhalt { color: #c9c8c4; }
.inhalt p { margin: 0 0 1em; max-width: 62ch; }
.inhalt a { color: var(--ink); }
.inhalt h2, .inhalt h3 {
    color: var(--ink);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: .04em;
    margin: 2em 0 .6em;
}
.inhalt code {
    font-family: var(--font);
    font-size: .92em;
    background: #1c1c1c;
    padding: .08em .35em;
    border-radius: 2px;
    color: var(--ink);
}
.inhalt pre {
    background: #1c1c1c;
    border: 1px solid var(--bus);
    padding: 12px 14px;
    overflow-x: auto;
}
.inhalt pre code { background: none; padding: 0; }
.inhalt img, .inhalt video { max-width: 100%; height: auto; }
.inhalt blockquote {
    margin: 1.2em 0;
    padding-left: 14px;
    border-left: 1px solid var(--cord);
    color: var(--dim);
}
.inhalt hr { border: 0; border-top: 1px solid var(--bus); margin: 2em 0; }
.inhalt ul, .inhalt ol { padding-left: 1.4em; }
.wp-caption-text, .inhalt figcaption { font-size: 11px; color: var(--dim); }

/* ————— Fußzeile ————— */
.seite-fuss {
    max-width: 46rem;
    margin: clamp(48px, 10vw, 96px) auto 0;
    padding: 14px 28px 40px;
}
.seite-fuss p {
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid var(--cord);
    text-align: center;
    font-size: 11px;
    color: var(--dim);
}
.seite-fuss a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--cord); }

/* ————— Schmale Schirme ————— */
@media (max-width: 640px) {
    .lane { grid-template-columns: 1fr; }
    .lane::before { display: none; }
    .eintrag.l, .eintrag.r { grid-column: 1; }
    .l .cord, .r .cord { left: 20px; right: auto; }
    .lr .cord { left: 20px; }
    .eintrag.lr { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}