/* tvbc.tv, Satz eines Wirtschaftsbriefs.
   Ausgeliefert unter /schriftsatz/bogen.css

   Grundgedanke: ein heller Bogen liegt auf getoentem Grund, der Satzspiegel
   bleibt schmal, Ueberschriften und Lauftext sind beide Serifenschrift.
   Getrennt wird ausschliesslich mit Haarlinien, nie mit Trennzeichen.
   Breakpoints liegen bei 760, 560 und 400 Pixeln. */

:root {
    --briefgrund: #f4f1e8;
    --bogenweiss: #fdfcf7;
    --schriftschwarz: #1a1714;
    --schriftgrau: #585248;
    --siegelrot: #8d2b1e;
    --siegeldunkel: #641a11;
    --feinlinie: #ded7c4;
    --randton: #eae4d4;
    --kopftype: "Century Schoolbook", "New Century Schoolbook",
        "Century Schoolbook L", "TeX Gyre Schola", Georgia, serif;
    --brieftype: Utopia, "Utopia Std", "Minion Pro", "Times New Roman",
        Times, Tinos, serif;
    --bogenbreite: 44rem;
}

* {
    box-sizing: border-box;
}

html {
    background: var(--briefgrund);
}

body {
    margin: 0 auto;
    padding: 0 32px 56px;
    max-width: var(--bogenbreite);
    background: var(--bogenweiss);
    border-inline: 1px solid var(--feinlinie);
    color: var(--schriftschwarz);
    font: 400 17.5px/1.72 var(--brieftype);
    overflow-wrap: break-word;
    text-rendering: optimizeLegibility;
}

p,
li,
dd,
td,
th {
    hyphens: auto;
}

h1,
h2,
h3 {
    margin: 0;
    font-family: var(--kopftype);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.005em;
    hyphens: auto;
}

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

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

a:hover,
a:focus {
    color: var(--schriftschwarz);
}

/* Sprungpfad */

.sprungpfad {
    position: absolute;
    left: -9999px;
    top: 0;
}

.sprungpfad:focus {
    position: static;
    display: inline-block;
    padding: 6px 10px;
    background: var(--randton);
}

/* Briefkopf */

.briefkopf {
    padding-block: 30px 14px;
    border-bottom: 3px double var(--schriftschwarz);
}

.briefkopfzeile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 18px 28px;
}

.hausmarke {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    color: var(--schriftschwarz);
    text-decoration: none;
}

.bogenzeichen {
    width: auto;
    flex: none;
}

.absenderwort {
    font-family: var(--kopftype);
    font-size: 1.92rem;
    font-weight: 700;
    letter-spacing: -0.012em;
}

.absenderwort b {
    font-weight: 400;
    color: var(--siegelrot);
}

.verteilerzeile {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 0;
    text-align: right;
}

.verteilerzeile a {
    color: var(--schriftgrau);
    font-size: 0.8rem;
    font-variant: small-caps;
    letter-spacing: 0.09em;
    text-decoration: underline;
    text-decoration-color: var(--feinlinie);
}

.verteilerzeile a:hover,
.verteilerzeile a:focus,
.verteilerzeile a[aria-current] {
    color: var(--siegeldunkel);
    text-decoration-color: currentColor;
}

.absenderangabe {
    margin: 14px 0 0;
    max-width: 34rem;
    color: var(--schriftgrau);
    font-size: 0.97rem;
    font-style: italic;
}

.datumszeile {
    margin: 4px 0 0;
    color: var(--schriftgrau);
    font-size: 0.76rem;
    font-variant: small-caps;
    letter-spacing: 0.1em;
    text-align: right;
}

/* Satzspiegel */

.satzspiegel {
    display: block;
    padding-block: 34px 0;
}

.laufweg {
    margin: 0 0 26px;
    font-size: 0.76rem;
    font-variant: small-caps;
    letter-spacing: 0.08em;
}

.laufweg a,
.laufweg span {
    display: inline-block;
    padding-inline: 10px;
    border-left: 1px solid var(--feinlinie);
    color: var(--schriftgrau);
    text-decoration: none;
}

.laufweg a:first-child {
    padding-left: 0;
    border-left: 0;
}

.laufweg a:hover,
.laufweg a:focus {
    color: var(--siegeldunkel);
    text-decoration: underline;
}

.laufweg span[aria-current] {
    color: var(--schriftschwarz);
}

/* Anschreiben auf dem Titelbogen */

.anschreibenteil h1 {
    font-size: clamp(1.78rem, 1.18rem + 2.2vw, 2.45rem);
}

.eingangssatz {
    margin: 20px 0 0;
    font-size: 1.1rem;
    line-height: 1.66;
}

.schlussnotiz {
    margin: 18px 0 0;
    padding-left: 15px;
    border-left: 2px solid var(--siegelrot);
    color: var(--schriftgrau);
    font-size: 0.96rem;
    font-style: italic;
}

/* Brennpunkt der Ausgabe */

.leitstueck {
    margin-top: 40px;
    padding-block: 26px;
    border-block: 1px solid var(--feinlinie);
}

.brennpunktbild {
    border: 1px solid var(--feinlinie);
}

.kurzvermerk {
    margin: 22px 0 8px;
    color: var(--siegelrot);
    font-size: 0.74rem;
    font-variant: small-caps;
    letter-spacing: 0.15em;
}

.leitstueck h2 {
    font-size: clamp(1.3rem, 1.05rem + 1vw, 1.62rem);
}

.leitstueck h2 a {
    color: var(--schriftschwarz);
    text-decoration: none;
}

.leitstueck h2 a:hover,
.leitstueck h2 a:focus {
    color: var(--siegeldunkel);
    text-decoration: underline;
}

.leitstueck p {
    margin: 12px 0 0;
}

.weiterzeile {
    font-size: 0.86rem;
    font-variant: small-caps;
    letter-spacing: 0.08em;
}

/* Fachteil mit Meldungsliste */

.fachteilblock {
    margin-top: 46px;
}

.fachteilkopf {
    padding-bottom: 7px;
    border-bottom: 1px solid var(--schriftschwarz);
    font-size: 1.22rem;
    font-variant: small-caps;
    letter-spacing: 0.05em;
}

.fachteilsatz {
    margin: 14px 0 0;
    color: var(--schriftgrau);
}

.meldungsliste {
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.meldungsposten {
    display: grid;
    grid-template-areas: "tag bild" "titel bild";
    grid-template-columns: minmax(0, 1fr) 9.5rem;
    grid-template-rows: auto 1fr;
    align-content: start;
    gap: 6px 22px;
    padding-block: 20px;
    border-top: 1px solid var(--feinlinie);
}

.meldungsposten:first-child {
    border-top: 0;
    padding-top: 2px;
}

.meldungsdatum {
    grid-area: tag;
    margin: 0;
    min-width: 0;
    color: var(--schriftgrau);
    font-size: 0.72rem;
    font-variant: small-caps;
    letter-spacing: 0.1em;
}

.meldungstitel {
    grid-area: titel;
    min-width: 0;
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.38;
}

.meldungstitel a {
    color: var(--schriftschwarz);
    text-decoration-color: var(--feinlinie);
}

.meldungstitel a:hover,
.meldungstitel a:focus {
    color: var(--siegeldunkel);
    text-decoration-color: currentColor;
}

.meldungsbild {
    grid-area: bild;
    align-self: start;
    min-width: 0;
}

.vorschaubogen {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 1px solid var(--feinlinie);
}

/* Redaktionsvermerk */

.redaktionsvermerk {
    margin-top: 48px;
    padding: 24px 0 0;
    border-top: 3px double var(--schriftschwarz);
}

.redaktionsvermerk .kurzvermerk {
    margin-top: 0;
}

.unterschriftzeile {
    margin: 0;
    font-family: var(--kopftype);
    font-size: 1.28rem;
}

.redaktionsvermerk p:last-child {
    margin: 6px 0 0;
    color: var(--schriftgrau);
    font-size: 0.96rem;
}

/* Schriftstueck */

.schriftstueck h1 {
    font-size: clamp(1.56rem, 1.1rem + 1.9vw, 2.12rem);
}

.briefangaben {
    margin: 16px 0 0;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--feinlinie);
    font-size: 0.74rem;
    font-variant: small-caps;
    letter-spacing: 0.09em;
}

.briefangaben span {
    display: inline-block;
    padding-inline: 11px;
    border-left: 1px solid var(--feinlinie);
    color: var(--schriftgrau);
}

.briefangaben span:first-child {
    padding-left: 0;
    border-left: 0;
    color: var(--schriftschwarz);
}

.schriftstueck h2 {
    margin-top: 42px;
    padding-top: 13px;
    font-size: clamp(1.18rem, 1.02rem + 0.7vw, 1.4rem);
}

.schriftstueck h2::before {
    display: block;
    width: 2.6rem;
    margin-bottom: 13px;
    border-top: 2px solid var(--siegelrot);
    content: "";
}

.schriftstueck h3 {
    margin-top: 32px;
    font-size: 1.06rem;
    font-style: italic;
    font-weight: 400;
}

.schriftstueck p {
    margin: 15px 0 0;
}

.briefliste {
    margin: 15px 0 0;
    padding-left: 22px;
}

.briefliste li {
    margin-top: 7px;
    padding-left: 4px;
}

.briefliste li::marker {
    color: var(--siegelrot);
}

.bildtafel {
    margin-top: 26px;
    border: 1px solid var(--feinlinie);
}

/* Gliederung als Definitionsliste */

.inhaltsvermerk {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    gap: 0 6px;
    margin: 0;
    padding-block: 15px;
    border-block: 1px solid var(--feinlinie);
    background: var(--bogenweiss);
}

.inhaltsvermerk dt {
    color: var(--siegelrot);
    font-family: var(--kopftype);
    font-size: 0.86rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.6;
    padding-top: 5px;
}

.inhaltsvermerk dd {
    margin: 0;
    min-width: 0;
    padding-top: 5px;
    font-size: 0.97rem;
    line-height: 1.6;
}

.inhaltsvermerk dd a {
    color: var(--schriftschwarz);
    text-decoration-color: var(--feinlinie);
}

.inhaltsvermerk dd a:hover,
.inhaltsvermerk dd a:focus {
    color: var(--siegeldunkel);
    text-decoration-color: currentColor;
}

/* Tabellen rollen, die Seite nie */

.tabellenschiene {
    margin-top: 26px;
    overflow-x: auto;
    border: 1px solid var(--feinlinie);
}

.tabellenschiene table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.93rem;
}

.tabellenschiene th,
.tabellenschiene td {
    padding: 9px 13px;
    border-bottom: 1px solid var(--feinlinie);
    text-align: left;
    vertical-align: top;
}

.tabellenschiene th {
    background: var(--randton);
    font-variant: small-caps;
    letter-spacing: 0.06em;
}

.tabellenschiene tr:last-child td {
    border-bottom: 0;
}

/* Anlagen */

.briefanlagen {
    margin-top: 50px;
    padding-top: 22px;
    border-top: 3px double var(--schriftschwarz);
}

.briefanlagen h2 {
    font-size: 1.1rem;
    font-variant: small-caps;
    letter-spacing: 0.05em;
}

.anlagenliste {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.anlagenliste li {
    padding-block: 13px;
    border-top: 1px solid var(--feinlinie);
}

.anlagenliste li:first-child {
    border-top: 0;
    padding-top: 2px;
}

.anlagenliste p {
    margin: 0 0 3px;
}

.anlagenliste a {
    color: var(--schriftschwarz);
    font-size: 1rem;
    text-decoration-color: var(--feinlinie);
}

.anlagenliste a:hover,
.anlagenliste a:focus {
    color: var(--siegeldunkel);
    text-decoration-color: currentColor;
}

/* Fussbogen */

.fussbogen {
    margin-top: 56px;
    padding-top: 22px;
    border-top: 1px solid var(--schriftschwarz);
}

.fussvermerk {
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr);
    gap: 14px 24px;
    margin: 0;
    font-size: 0.92rem;
}

.fussvermerk dt {
    color: var(--schriftgrau);
    font-size: 0.74rem;
    font-variant: small-caps;
    letter-spacing: 0.1em;
    padding-top: 3px;
}

.fussvermerk dd {
    margin: 0;
    min-width: 0;
    color: var(--schriftgrau);
}

.fussfaecher a {
    color: var(--siegeldunkel);
}

.schlussvermerk {
    margin: 26px 0 0;
    padding-top: 13px;
    border-top: 1px solid var(--feinlinie);
    color: var(--schriftgrau);
    font-size: 0.74rem;
    font-variant: small-caps;
    letter-spacing: 0.1em;
}

/* Bogen verliert seinen Rahmen, der Verteiler wandert unter den Absender */

@media (max-width: 760px) {
    body {
        padding-inline: 24px;
        border-inline: 0;
    }

    .briefkopfzeile {
        grid-template-columns: minmax(0, 1fr);
    }

    .verteilerzeile {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px 18px;
        text-align: left;
    }

    .datumszeile,
    .absenderangabe {
        text-align: left;
    }

    .fussvermerk {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .fussvermerk dd {
        margin-bottom: 12px;
    }
}

/* Vorschaubild unter den Titel, Schrift eine Stufe kleiner */

@media (max-width: 560px) {
    body {
        font-size: 16.5px;
        padding-bottom: 44px;
    }

    .meldungsposten {
        grid-template-areas: "tag" "titel" "bild";
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        gap: 7px;
    }

    .meldungsbild {
        max-width: 15rem;
        margin-top: 5px;
    }

    .briefangaben span {
        padding-inline: 0 11px;
        border-left: 0;
    }

    .inhaltsvermerk {
        grid-template-columns: 2.1rem minmax(0, 1fr);
    }
}

/* Engster Satz, Gutter bleibt bei 16 Pixeln */

@media (max-width: 400px) {
    body {
        padding-inline: 16px;
    }

    .absenderwort {
        font-size: 1.62rem;
    }

    .briefkopf {
        padding-block: 22px 12px;
    }

    .schriftstueck h2 {
        margin-top: 34px;
    }
}

/* Tippflaechen auf Geraeten ohne Zeiger */

@media (hover: none) {
    .verteilerzeile a,
    .laufweg a,
    .weiterzeile a {
        padding-block: 9px;
    }

    .meldungstitel a,
    .anlagenliste a,
    .inhaltsvermerk dd a {
        display: inline-block;
        padding-block: 5px;
    }
}

@media print {
    body {
        max-width: none;
        border-inline: 0;
        font-size: 11pt;
    }

    .verteilerzeile,
    .sprungpfad {
        display: none;
    }
}