/* FS Home (fshomeimprovements.com), Variante AE.
   Klassen als Praefix FS plus Bindestrich plus VERSALIEN-Kompositum
   (FS-KOPFBAND, FS-KARTE). Keine Webfonts, kein JavaScript.
   Mobile zuerst, ein Umbruch bei 52rem. */

:root {
    --grund: #f7f5f1;
    --weiss: #ffffff;
    --sepia: #2a2522;
    --sepiamatt: #6f655d;
    --siegel: #1f5f4f;
    --siegeltief: #15443a;
    --linie: #e5e0d8;
    --feld: #efebe4;
    --lauf: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
    --kopf: "PT Serif", "Droid Serif", "Times New Roman", serif;
    --breit: 60rem;
    --satz: 40rem;
    --luft: 1.25rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    background: var(--grund);
    color: var(--sepia);
    font-family: var(--lauf);
    font-size: 1.0625rem;
    line-height: 1.62;
    margin: 0;
}

h1, h2, h3, .FS-MARKENWORT, .FS-GLIEDERWORT {
    font-family: var(--kopf);
    font-weight: 700;
    line-height: 1.24;
}

h1 { font-size: 1.7rem; margin: 0 0 0.6rem; }
h2 { font-size: 1.3rem; margin: 2rem 0 0.7rem; }
h3 { font-size: 1.05rem; margin: 1.4rem 0 0.4rem; }

p, ul, ol, dl, table { margin: 0 0 1rem; }

a { color: var(--siegeltief); }

a:hover { color: var(--siegel); }

.FS-TEXTFELD a, .FS-FUSSZEILE a {
    text-decoration: underline;
    text-underline-offset: 0.14em;
}

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

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

/* Lange deutsche Komposita brechen bei 320 px sonst aus der Spalte */
h1, h2, h3, .FS-TEXTFELD, .FS-KARTE p, .FS-GLIEDERLISTE a {
    hyphens: auto;
    overflow-wrap: break-word;
}

.FS-BAHN {
    margin-inline: auto;
    max-width: var(--breit);
    padding-inline: var(--luft);
}

.FS-SPRUNG { left: -9999px; position: absolute; }

.FS-SPRUNG:focus {
    background: var(--sepia);
    color: var(--weiss);
    display: block;
    padding: 0.6rem var(--luft);
    position: static;
}

/* Kopf */

.FS-KOPFBAND { background: var(--weiss); border-bottom: 3px double var(--linie); }

.FS-KOPFSATZ { padding-block: 1.1rem 0; }

.FS-MARKENLINK {
    align-items: center;
    color: var(--sepia);
    display: inline-flex;
    gap: 0.55rem;
    text-decoration: none;
}

.FS-MARKENWORT { font-size: 1.5rem; letter-spacing: 0.02em; }

.FS-MARKENZEILE {
    color: var(--sepiamatt);
    font-size: 0.9375rem;
    margin: 0.25rem 0 0.9rem;
}

.FS-MENUE {
    border-top: 1px solid var(--linie);
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.3rem;
    padding-block: 0.55rem;
}

.FS-MENUE a {
    font-family: var(--kopf);
    font-size: 0.9375rem;
    padding-block: 0.2rem;
    text-decoration: none;
}

.FS-MENUE a[aria-current], .FS-MENUE a:hover {
    box-shadow: inset 0 -2px 0 var(--siegel);
}

/* Ablagepfad mit doppeltem Schraegstrich */

.FS-PFAD { padding-block: 1rem 0; }

.FS-PFAD ol {
    color: var(--sepiamatt);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    gap: 0.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.FS-PFAD li + li::before { content: "//"; margin-right: 0.4rem; }

.FS-PFAD a { border-bottom: 1px solid var(--linie); text-decoration: none; }

/* Uebersichten: zweispaltige Karten mit schmalem Bildstreifen */

.FS-AUFTAKT { padding-block: 1.6rem 0.4rem; }

.FS-AUFTAKT p { color: var(--sepiamatt); margin: 0; max-width: var(--satz); }

.FS-FACH { padding-block: 1.5rem; }

.FS-FACHKOPF h2 { margin-top: 0; }

.FS-FACHKOPF p { color: var(--sepiamatt); max-width: var(--satz); }

.FS-FACHLINK a {
    border-bottom: 1px solid var(--siegel);
    font-family: var(--kopf);
    font-size: 0.9375rem;
    text-decoration: none;
}

.FS-KARTENRASTER {
    display: grid;
    gap: 1.1rem;
    grid-template-columns: 1fr;
    list-style: none;
    margin: 1.2rem 0 0;
    padding: 0;
}

.FS-KARTE {
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-left: 4px solid var(--siegel);
}

.FS-KARTENBILD { margin: 0; }

.FS-KARTENBILD img { aspect-ratio: 3 / 1; object-fit: cover; width: 100%; }

.FS-KARTENINNEN { padding: 0.8rem 0.9rem 0.9rem; }

.FS-ZEITZEILE {
    color: var(--sepiamatt);
    font-size: 0.75rem;
    letter-spacing: 0.07em;
    margin: 0 0 0.3rem;
    text-transform: uppercase;
}

.FS-KARTE h3 { margin: 0 0 0.35rem; }

.FS-KARTE h3 a { text-decoration: none; }

.FS-KARTE h3 a:hover { box-shadow: inset 0 -2px 0 var(--siegel); }

.FS-KARTE p { color: var(--sepiamatt); font-size: 0.9375rem; margin: 0; }

/* Sammelseite */

.FS-SAMMEL { padding-block: 1.2rem 2rem; }

.FS-SAMMELKOPF p { color: var(--sepiamatt); max-width: var(--satz); }

/* Beitrag */

.FS-SATZHAUPT { padding-block: 1.2rem 2rem; }

.FS-SATZKOPF { margin-bottom: 1.3rem; }

.FS-ANRISS { color: var(--sepiamatt); font-size: 1.1rem; margin-bottom: 1rem; }

.FS-ANGABEN {
    border-block: 1px solid var(--linie);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.875rem;
    gap: 0.7rem 1.6rem;
    margin: 0;
    padding-block: 0.7rem;
}

.FS-ANGABEN dt {
    color: var(--sepiamatt);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.FS-ANGABEN dd { margin: 0.15rem 0 0; }

.FS-BILDFELD { margin: 0 0 1.6rem; }

.FS-BILDFELD figcaption {
    color: var(--sepiamatt);
    font-size: 0.8125rem;
    margin-top: 0.5rem;
}

.FS-GLIEDERLISTE {
    background: var(--feld);
    margin: 0 0 1.8rem;
    padding: 0.9rem 1.1rem;
}

.FS-GLIEDERWORT {
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    margin: 0 0 0.6rem;
    text-transform: uppercase;
}

.FS-GLIEDERLISTE ol {
    list-style: lower-alpha;
    margin: 0;
    padding-left: 1.4rem;
}

.FS-GLIEDERLISTE li { margin-bottom: 0.3rem; }

.FS-GLIEDERLISTE a { text-decoration: none; }

.FS-GLIEDERLISTE a:hover { text-decoration: underline; }

.FS-TEXTFELD { max-width: var(--satz); }

.FS-TEXTFELD ul, .FS-TEXTFELD ol { padding-left: 1.3rem; }

.FS-TEXTFELD li { margin-bottom: 0.4rem; }

.FS-ROLLFELD { margin-bottom: 1.2rem; overflow-x: auto; }

.FS-ROLLFELD table {
    border-collapse: collapse;
    font-size: 0.9375rem;
    width: 100%;
}

.FS-ROLLFELD td, .FS-ROLLFELD th {
    border: 1px solid var(--linie);
    padding: 0.5rem 0.6rem;
    text-align: left;
}

.FS-ROLLFELD th { background: var(--feld); font-family: var(--kopf); }

/* Anschluss, Haustext, Fehlerseite */

.FS-ANSCHLUSS { border-top: 1px solid var(--linie); padding-block: 1.4rem 2rem; }

.FS-ANSCHLUSS h2 { margin-top: 0; }

.FS-HAUSFELD { background: var(--feld); margin-top: 1.4rem; padding-block: 1.6rem; }

.FS-HAUSFELD h2 { margin-top: 0; }

.FS-HAUSFELD p { max-width: var(--satz); }

.FS-FEHLFELD { padding-block: 2rem 3rem; }

/* Fuss */

.FS-FUSSBAND {
    background: var(--sepia);
    color: var(--grund);
    margin-top: 2.4rem;
    padding-block: 2rem 1rem;
}

.FS-FUSSBAND h2 { font-size: 1rem; margin: 0 0 0.5rem; }

.FS-FUSSBAND p { color: #bdb5ad; font-size: 0.9375rem; max-width: var(--satz); }

.FS-FUSSBAND a {
    border-bottom: 1px solid #574f49;
    color: var(--grund);
    text-decoration: none;
}

.FS-FUSSBAND a:hover { border-bottom-color: var(--grund); color: var(--weiss); }

.FS-FUSSBAND ul { list-style: none; margin: 0; padding: 0; }

.FS-FUSSBAND li { padding-block: 0.25rem; }

.FS-FUSSZEILE {
    border-top: 1px solid #403934;
    font-size: 0.8125rem;
    margin: 1.4rem 0 0;
    padding-top: 0.9rem;
}

@media (min-width: 52rem) {
    :root { --luft: 2rem; }

    h1 { font-size: 2.05rem; }
    h2 { font-size: 1.45rem; }

    .FS-KARTENRASTER { grid-template-columns: repeat(2, 1fr); }

    .FS-GLIEDERLISTE ol { columns: 2; column-gap: 2rem; }

    .FS-FUSSSATZ { display: grid; gap: 2rem; grid-template-columns: 2fr 1fr; }
}