/* Cork (corkrestaurant.net). Fachportal-Satz mit dunklem Stahlkopf und
    klebender Randspalte auf Beitragsseiten. Eigenstaendiges Stylesheet, keine
    geteilten Klassen oder Custom Properties mit anderen Netzwerkseiten.
    Einzug 4 Leerzeichen. */

:root {
    --halle: #eef1f3;
    --stahl: #15212b;
    --stahlmatt: #4b5a66;
    --messing: #b0870b;
    --messingtief: #7d5f07;
    --kante: #ccd5db;
    --satzschrift: Cambria, "Hoefler Text", Georgia, serif;
    --titelschrift: "Franklin Gothic Medium", "Arial Narrow Bold", "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--halle);
    color: var(--stahl);
    font-family: var(--satzschrift);
    font-size: 1.05rem;
    line-height: 1.64;
}

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

h1, h2, h3 {
    font-family: var(--titelschrift);
    line-height: 1.2;
    margin: 0 0 0.55em;
    letter-spacing: 0.01em;
}

h1 { font-size: 2.05rem; }
h2 { font-size: 1.42rem; margin-top: 1.9em; }
h3 { font-size: 1.12rem; margin-top: 1.5em; }

p { margin: 0 0 1.05em; }

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

.bltext a, .blkarte p a, .blfuss a {
    text-decoration: underline;
    text-underline-offset: 0.14em;
}

.blnav a, .blpfad a, .blkarte h3 a, .blgliederung a { text-decoration: none; }

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

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

.blband {
    width: min(1180px, 100% - 2.5rem);
    margin-inline: auto;
}

/* ------------------------------------------------------------------- Kopf */

.blsprung {
    position: absolute;
    left: -999px;
    background: var(--messing);
    color: var(--stahl);
    padding: 0.6em 1em;
    z-index: 40;
}

.blsprung:focus { left: 1rem; top: 1rem; }

.blkopf {
    background: var(--stahl);
    border-bottom: 3px solid var(--messing);
}

.blkopfzeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-block: 0.9rem;
}

.blmarke {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    color: var(--halle);
    font-family: var(--titelschrift);
    font-size: 1.3rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.blmarke span small {
    display: block;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    color: var(--kante);
    text-transform: uppercase;
}

.blnav ul {
    display: flex;
    gap: 1.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.blnav a {
    color: var(--kante);
    font-family: var(--titelschrift);
    font-size: 0.93rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.blnav a:hover, .blnav a[aria-current="page"] { color: var(--messing); }

/* ------------------------------------------------------------------- Pfad */

.blpfad {
    padding-block: 0.9rem 0;
    font-size: 0.85rem;
    color: var(--stahlmatt);
}

.blpfad ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.blpfad li + li::before { content: "/"; margin-right: 0.35rem; color: var(--kante); }

/* -------------------------------------------------------------- Startseite */

.blaufmacher {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 2rem;
    align-items: center;
    padding-block: 2.2rem;
}

.blaufmacher img { aspect-ratio: 16 / 10; object-fit: cover; }

.blaufmacher h1 { font-size: 2.2rem; }

.blkicker {
    font-family: var(--titelschrift);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--messingtief);
    margin: 0 0 0.5rem;
}

.blressort {
    padding-block: 2rem;
    border-top: 2px solid var(--stahl);
}

.blressort > h2 {
    margin-top: 0;
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.blressortsatz {
    max-width: 68ch;
    color: var(--stahlmatt);
}

.blraster {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
    margin-top: 1.3rem;
}

.blkarte { display: flex; flex-direction: column; gap: 0.45rem; }

.blkarte img { aspect-ratio: 16 / 10; object-fit: cover; }

.blkarte h3 { font-size: 1.03rem; margin: 0.2rem 0 0; }

.bldatum {
    font-size: 0.8rem;
    color: var(--stahlmatt);
    font-family: var(--titelschrift);
    letter-spacing: 0.03em;
    margin: 0;
}

.blkarte p { margin: 0; font-size: 0.93rem; color: var(--stahlmatt); }

.blmehr { margin-top: 1.2rem; font-family: var(--titelschrift); }

.blredaktion {
    padding-block: 2rem;
    border-top: 2px solid var(--stahl);
    max-width: 68ch;
}

.blredaktion h2 { margin-top: 0; }

/* ---------------------------------------------------------------- Beitrag */

.blbeitrag {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 270px;
    gap: 2.6rem;
    padding-block: 1.4rem 3rem;
    align-items: start;
}

.blsatz { max-width: 68ch; }

.blsatz .bldatum { margin-bottom: 1.2rem; }

.blbild { margin: 1.4rem 0; }

.blbild figcaption {
    font-size: 0.82rem;
    color: var(--stahlmatt);
    margin-top: 0.45rem;
}

.bltext h2:first-child { margin-top: 0; }

.bltext ul, .bltext ol { padding-left: 1.25em; }

.bltext li { margin-bottom: 0.38em; }

.blrollfeld { overflow-x: auto; margin: 1.3em 0; }

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

.bltext th, .bltext td {
    border: 1px solid var(--kante);
    padding: 0.5em 0.7em;
    text-align: left;
}

.bltext th { background: #ffffff; font-family: var(--titelschrift); }

.bltext blockquote {
    border-left: 4px solid var(--messing);
    margin: 1.3em 0;
    padding-left: 1em;
    color: var(--stahlmatt);
}

/* Randspalte, klebend, nur auf Beitragsseiten */

.blrand {
    position: sticky;
    top: 1.5rem;
    border-top: 3px solid var(--messing);
    padding-top: 0.9rem;
    font-size: 0.9rem;
}

.blrandtitel {
    font-family: var(--titelschrift);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--stahlmatt);
    margin: 0 0 0.6rem;
}

.blgliederung { margin: 0 0 1.4rem; padding-left: 1.15em; }

.blgliederung li { margin-bottom: 0.42em; }

.blrandressort {
    border-top: 1px solid var(--kante);
    padding-top: 0.9rem;
    font-family: var(--titelschrift);
}

.blweiter {
    border-top: 2px solid var(--stahl);
    padding-block: 1.6rem 0;
    margin-top: 2.4rem;
}

/* ------------------------------------------------------------------- Fuss */

.blfuss {
    background: var(--stahl);
    color: var(--kante);
    margin-top: 2.6rem;
    padding-block: 2rem;
}

.blfuss a { color: var(--kante); }

.blfuss a:hover { color: var(--messing); }

.blfuss h2 {
    font-size: 0.95rem;
    color: var(--halle);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin: 0 0 0.6em;
}

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

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

.blfuss li { margin-bottom: 0.35em; }

.blfussschluss {
    margin-top: 1.5rem;
    font-size: 0.8rem;
    color: var(--kante);
}

.blleer { padding-block: 3rem; max-width: 55ch; }

/* ------------------------------------------------------------ Schmalbreite */

@media (max-width: 980px) {
    .blbeitrag { grid-template-columns: 1fr; gap: 1.6rem; }
    .blrand { position: static; }
    .blaufmacher { grid-template-columns: 1fr; gap: 1.2rem; }
    .blraster { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    body { font-size: 1rem; }
    .blband { width: min(1180px, 100% - 2rem); }
    .blraster { grid-template-columns: 1fr; }
    .blfussraster { grid-template-columns: 1fr; }
    h1 { font-size: 1.62rem; }
    .blaufmacher h1 { font-size: 1.72rem; }
    .blnav ul { gap: 0.85rem 1.1rem; }
}