/* ==========================================================================
   BLOG — listing (index.php) and single post (single.php)

   The section that matters most is ENTRY CONTENT further down. Everything a
   post author writes in the WordPress editor lands inside `.entry-content`
   unstyled, so those rules are what turn a plain title/heading/paragraph/list
   into the design. Nothing here needs per-article markup.
   ========================================================================== */

/* `clip` rather than `hidden`: `overflow-x: hidden` promotes overflow-y to
   `auto` and creates a nested scroll container. */
.bl-page {
    overflow-x: clip;
    background-color: #fff;
}

/* ==========================================================================
   1. HERO
   ========================================================================== */
/* Unlike every other banner this one has no photograph behind it, and
   --fr-banner-gradient is deliberately semi-transparent. So the base colour
   is what the tint mixes with: a neutral dark, chosen so the gold top and
   grey lower half land where they do on the photo banners. It was a navy
   (#161d2f), which turned the shared gradient muddy and made this hero the
   odd one out. */
/* =============================================================
   DER KOPFBEREICH

   Zwei Zustände, weil es zwei Situationen gibt:

     .bl-hero            — mit Bild. Ratgeber-Übersicht (Bannerbild von
                           „Über uns“) und Einzelbeiträge (das Beitragsbild).
     .bl-hero--plain     — ohne Bild. Suche, Kategorie- und Tag-Archive.

   Für den zweiten Fall gab es vorher nur eine Flächenfarbe (#55554e) mit
   einem orange-grauen Verlauf darüber — die Variante, die ohne Foto
   unfertig aussah. Sie ist jetzt eigens gestaltet: eine tiefe Tinte, zwei
   weiche Lichtkegel in Markenfarbe und ein sehr feines Raster. Das ist
   nichts, was ein fehlendes Bild ersetzt — es ist ein Hintergrund, der von
   vornherein keines braucht.
   ============================================================= */

/*
 * Kein overflow: hidden.
 *
 * Es stand hier, um Bild und Raster im Kopfbereich zu halten — beide sind
 * aber `position: absolute; inset: 0` und können gar nicht herauslaufen. Was
 * es tatsächlich beschnitten hat, war der Trefferkasten der Live-Suche: Der
 * hängt am Suchfeld, ragt naturgemäß unter den Kopfbereich hinaus und wurde
 * an dessen Unterkante abgeschnitten.
 */
/*
 * z-index, weil `isolation: isolate` einen eigenen Stapelkontext bildet: Das
 * z-index: 30 des Trefferkastens gilt dann nur INNERHALB des Kopfbereichs.
 * Ohne eigene Stufe lag der ganze Kopfbereich auf Höhe 0 — und die
 * Beitragskarten darunter (positioniert, mit transform beim Hover) wurden
 * später gemalt und schoben sich über den aufgeklappten Kasten. Die Stufe
 * hebt den Kopfbereich samt Kasten über den Inhalt, bleibt aber unter dem
 * festen Header der Website.
 */
.bl-hero {
    position: relative;
    z-index: 5;
    isolation: isolate;
    background-color: #12171e;
    color: #fff;
}

.bl-hero-media,
.bl-hero-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.bl-hero-media img {
    position: relative;
    object-fit: cover;
}

/* Mittig gewichtet statt seitlich: die Überschrift steht hier zentriert,
   während die Landing-Pages ihre Kopfzeile links setzen. */
.bl-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(9, 12, 16, .82) 0%,
            rgba(9, 12, 16, .74) 45%,
            rgba(9, 12, 16, .9) 100%),
        linear-gradient(120deg,
            rgba(242, 168, 32, .12) 0%,
            rgba(242, 168, 32, 0) 60%);
}

/* ---------- ohne Bild ---------- */

.bl-hero--plain {
    background-color: #0f141b;
}

/* Zwei Lichtkegel, keine Verlaufsfläche. Ein linearer Verlauf über die ganze
   Breite liest sich als „Farbe, die nicht geladen hat“; zwei radiale Kegel
   mit unterschiedlichem Radius geben dem Feld eine Mitte und damit einen
   Grund, dunkel zu sein. */
.bl-hero--plain .bl-hero-overlay {
    background:
        radial-gradient(120% 140% at 18% 0%,
            rgba(242, 168, 32, .22) 0%,
            rgba(242, 168, 32, .06) 32%,
            rgba(242, 168, 32, 0) 62%),
        radial-gradient(90% 120% at 88% 100%,
            rgba(47, 93, 52, .38) 0%,
            rgba(47, 93, 52, 0) 58%),
        linear-gradient(180deg, #141b24 0%, #0f141b 100%);
}

/* Ein Raster darüber, sehr schwach. Es soll nicht als Muster auffallen,
   sondern dem Feld eine Oberfläche geben — ohne das wirkt selbst ein guter
   Verlauf flach. Als background-image, nicht als zweites Element: es
   braucht kein eigenes Markup. */
/* Eigenes overflow, weil der Kopfbereich nicht mehr beschneidet — das Raster
   endet damit weiterhin an der Kante und nicht am Trefferkasten. */
.bl-hero--plain::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 64px 64px;
    /* Zu den Rändern hin ausblenden, damit das Raster nicht abgeschnitten
       endet. mask ist hier ungefährlich: wo es nicht unterstützt wird, bleibt
       das Raster sichtbar — das ist ein akzeptabler Rückfall, kein Fehler. */
    -webkit-mask-image: radial-gradient(80% 80% at 50% 45%, #000 40%, transparent 100%);
    mask-image: radial-gradient(80% 80% at 50% 45%, #000 40%, transparent 100%);
}

/* Linksbündig wie jeder andere Kopfbereich der Website.
   Zentriert war der Ratgeber der einzige, der aus der Reihe fiel — und beim
   Wechsel von einer Serviceseite hierher springt die Überschrift dann quer
   über den Bildschirm. */
/*
 * Der Block beginnt am linken Rand des Containers.
 *
 * Hier stand max-width: 760px. Das Element trägt aber auch .alignwide, und
 * das bringt `margin: auto` mit — die 760px wurden also im 1350px breiten
 * Container ZENTRIERT. Linksbündiger Text in einem mittig stehenden Block
 * sieht aus wie eine Spalte, die in der Seitenmitte anfängt: genau das war zu
 * sehen.
 *
 * Die Breite gehört deshalb auf die einzelnen Elemente, nicht auf ihren
 * Rahmen. Der Rahmen behält die Containerbreite, und Überschrift, Lead und
 * Suchfeld bekommen jeweils ihr eigenes Lesemaß.
 */
.bl-hero-inner {
    position: relative;
    z-index: 1;
    padding: 68px 15px 76px;
    text-align: left;
}

.bl-hero-title {
    width: auto; /* theme.css setzt width:100% auf jede Überschrift */
    max-width: 760px;
    margin: 0;
    color: #fff;
    font-family: 'Inter';
    font-size: clamp(26px, 3.4vw, 42px);
    font-weight: 800;
    line-height: 1.24;
    /* Keine Großbuchstaben. Bei einer Rubriküberschrift („SUCHERGEBNISSE“)
       geht das noch, aber dieselbe Regel trifft den Titel jedes Beitrags —
       und ein Artikeltitel in Versalien ist schlechter zu lesen, verliert die
       Großschreibung der Substantive, die im Deutschen Bedeutung trägt, und
       wird bei jeder Länge über eine Zeile mühsam. */
    letter-spacing: -.01em;
}

.bl-hero-intro {
    max-width: 680px;
    margin: 16px 0 0;
    color: rgba(255, 255, 255, .82);
    font-family: 'Inter';
    font-size: var(--fs-md);
    line-height: 1.7;
}

/* ==========================================================================
   2. LAYOUT
   ========================================================================== */
.bl-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    align-items: start;
    gap: 46px;
    padding: 52px 15px 70px;
}
/* The listing has no sidebar — one column, full width. */
.bl-layout--full {
    grid-template-columns: minmax(0, 1fr);
}
.bl-main {
    min-width: 0; /* lets long words and wide tables shrink instead of pushing */
}

/* ==========================================================================
   3. SINGLE — featured image and meta
   ========================================================================== */
.bl-featured {
    margin: 0 0 26px;
    border-radius: 16px;
    overflow: hidden;
    line-height: 0;
    height: 450px;
}
.bl-featured img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center;
}
.bl-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 26px;
    list-style: none;
    margin: 0 0 26px;
    padding: 0 0 22px;
    border-bottom: 1px solid #eceff3;
}

.bl-meta li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #5b6374 !important; /* beats theme.css's global li colour */
    font-family: 'Inter';
    font-size: var(--fs-sm);
    font-weight: 500;
}
.bl-meta-ico {
    display: inline-flex;
    color: #F2A820;
}
.bl-meta-ico svg {
    display: block;
    width: 16px;
    height: 16px;
}
.bl-meta a {
    color: #5b6374;
    text-decoration: none;
    transition: color .2s ease;
}
.bl-meta a:hover,
.bl-meta a:focus-visible {
    color: #F2A820;
}

/* ==========================================================================
   4. ENTRY CONTENT  ← the automatic formatting
   --------------------------------------------------------------------------
   Every rule below targets plain HTML the editor produces, not classes an
   author has to remember. Writing a post is enough; the design follows.
   ========================================================================== */
.entry-content {
    color: #4a5160;
    font-family: 'Inter';
    font-size: var(--fs-base);
    line-height: 1.8;
}

/* ---------- headings ---------- */
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    width: auto; /* theme.css sets width:100% on all headings */
    color: #24282e;
    font-family: 'Inter';
    font-weight: 800;
    line-height: 1.3;
}
.entry-content h2 {
    margin: 44px 0 16px;
    padding-left: 16px;
    /* Orange rule to the left, matching the section markers used site-wide. */
    border-left: 4px solid #F2A820;
    font-size: clamp(21px, 2.2vw, 27px);
}
.entry-content h3 {
    margin: 34px 0 12px;
    font-size: clamp(18px, 1.8vw, 21px);
}
.entry-content h4 {
    margin: 28px 0 10px;
    font-size: 17px;
}
.entry-content h5,
.entry-content h6 {
    margin: 24px 0 8px;
    font-size: 15.5px;
    letter-spacing: .02em;
    text-transform: uppercase;
}
/* No runaway gap when a heading opens the article. */
.entry-content > *:first-child {
    margin-top: 0;
}

/* ---------- text ----------
   font-size, line-height and colour are repeated here rather than inherited
   from .entry-content: theme.css carries a bare
   `p { font-size: var(--fs-base); line-height: 1.5; color: var(--text) }

`, and a rule
   that targets the element directly always beats an inherited value, however
   specific the ancestor's selector is. Paragraphs rendered at 17px/1.5 in the
   theme's grey until these were set explicitly, out of step with the list
   items right beside them. */
.entry-content p {
    margin: 0 0 18px;
    color: #4a5160;
    font-size: var(--fs-base);
    line-height: 1.8;
}
.entry-content strong,
.entry-content b {
    font-weight: 700;
}
.entry-content a {
    color: #9A6608; /* darker than #F2A820 — that fails contrast on white */
    /* text-decoration: underline; */
    text-underline-offset: 3px;
    transition: color .2s ease;
}
.entry-content a:hover,
.entry-content a:focus-visible {
    color: #24282e;
}
.entry-content hr {
    height: 1px;
    margin: 38px 0;
    background-color: #eceff3;
    border: 0;
}

/* ---------- lists ---------- */
.entry-content ul,
.entry-content ol {
    margin: 0 0 20px;
    padding: 0;
}
.entry-content li {
    position: relative;
    margin-bottom: 10px;
    padding-left: 30px;
    color: #4a5160 !important; /* beats theme.css's global li colour */
    list-style: none;
}
.entry-content li:last-child {
    margin-bottom: 0;
}
.entry-content ul > li::before {
    content: "";
    position: absolute;
    top: .62em;
    left: 4px;
    width: 8px;
    height: 8px;
    background-color: #F2A820;
    border-radius: 50%;
}
/* Ordered lists keep their numbers, drawn in the brand colour. */
.entry-content ol {
    counter-reset: bl-ol;
}
.entry-content ol > li {
    counter-increment: bl-ol;
}
.entry-content ol > li::before {
    content: counter(bl-ol) ".";
    position: absolute;
    left: 0;
    top: 0;
    color: #F2A820;
    font-weight: 800;
}
/* Nested lists step in and switch to a hollow marker. */
.entry-content li > ul,
.entry-content li > ol {
    margin: 10px 0 0;
}
.entry-content li > ul > li::before {
    background-color: transparent;
    border: 2px solid #F2A820;
}

/* ---------- quotes and callouts ---------- */
.entry-content blockquote {
    position: relative;
    margin: 30px 0;
    padding: 24px 26px 24px 58px;
    background-color: #fffaf0;
    border: 1px solid #f6e3c0;
    border-left: 4px solid #F2A820;
    border-radius: 12px;
    color: #3c4353;
    font-size: var(--fs-base);
    font-style: normal;
    line-height: 1.75;
}

.entry-content blockquote::before {
    content: "\201C";
    position: absolute;
    top: 6px;
    left: 18px;
    color: #F2A820;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 52px;
    line-height: 1;
}
.entry-content blockquote p:last-child {
    margin-bottom: 0;
}

.entry-content blockquote cite,
.entry-content blockquote .wp-block-quote__citation {
    display: block;
    margin-top: 10px;
    color: #6b7387;
    font-size: var(--fs-sm);
    font-style: normal;
    font-weight: 600;
}
.entry-content .wp-block-pullquote {
    padding: 0;
    background: none;
    border: 0;
    text-align: center;
}

/* ---------- images and figures ---------- */
.entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}
.entry-content figure {
    margin: 28px 0;
}
.entry-content figure img {
    display: block;
    width: 100%;
    height: auto;
}

.entry-content figcaption,
.entry-content .wp-element-caption {
    margin-top: 10px;
    color: #6b7387;
    font-size: var(--fs-sm);
    line-height: 1.6;
    text-align: center;
}
.entry-content .alignleft {
    float: left;
    margin: 6px 26px 18px 0;
    max-width: 50%;
}
.entry-content .alignright {
    float: right;
    margin: 6px 0 18px 26px;
    max-width: 50%;
}
.entry-content .aligncenter {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
/* Wide/full images inside a fixed column can only go as wide as the column. */
.entry-content .alignwide,
.entry-content .alignfull {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}
.entry-content .wp-block-gallery {
    margin: 28px 0;
}

/* ---------- tables ---------- */
.entry-content .wp-block-table,
.entry-content figure.wp-block-table {
    /* Wide tables scroll inside their own box rather than pushing the page. */
    overflow-x: auto;
}

.entry-content table {
    width: 100%;
    margin: 0 0 8px;
    border-collapse: collapse;
    font-size: var(--fs-md);
}
.entry-content th,
.entry-content td {
    padding: 12px 14px;
    border: 1px solid #e6e8ee;
    text-align: left;
}
.entry-content th {
    background-color: #f7f8fb;
    color: #24282e;
    font-weight: 700;
}
.entry-content tbody tr:nth-child(even) td {
    background-color: #fcfcfd;
}

/* ---------- code and embeds ---------- */
.entry-content code {
    padding: 2px 6px;
    background-color: #f4f5f8;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .92em;
}

.entry-content pre {
    margin: 24px 0;
    padding: 18px 20px;
    overflow-x: auto;
    background-color: #24282e;
    border-radius: 12px;
    color: #eef1f6;
    font-size: var(--fs-sm);
    line-height: 1.6;
}
.entry-content pre code {
    padding: 0;
    background: none;
    color: inherit;
}
.entry-content iframe,
.entry-content .wp-block-embed iframe {
    max-width: 100%;
    border-radius: 12px;
}
.entry-content .wp-block-embed__wrapper {
    position: relative;
}
.entry-content .wp-block-button__link {
    display: inline-block;
    padding: 13px 26px;
    background-color: #F2A820;
    border-radius: 8px;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .25s ease;
}
.entry-content .wp-block-button__link:hover {
    background-color: #dd960f;
}

/* ---------- pagination inside a post ---------- */
.bl-page-links {
    margin-top: 26px;
    font-weight: 600;
}
.bl-page-links a {
    padding: 4px 10px;
    border: 1px solid #e6e8ee;
    border-radius: 6px;
    text-decoration: none;
}

/* ==========================================================================
   5. TAGS, POST NAV, RELATED
   ========================================================================== */
.bl-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid #eceff3;
}

.bl-tags-label {
    color: #24282e;
    font-family: 'Inter';
    font-size: var(--fs-sm);
    font-weight: 700;
}
.bl-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.bl-tag-list li {
    color: inherit !important;
}

.bl-tag-list a {
    display: inline-block;
    padding: 6px 13px;
    background-color: #f7f8fb;
    border: 1px solid #e6e8ee;
    border-radius: 999px;
    color: #4a5160;
    font-size: var(--fs-sm);
    font-weight: 500;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.bl-tag-list a:hover,
.bl-tag-list a:focus-visible {
    background-color: #ffeac2;
    border-color: #f4d79a;
    color: #24282e;
}

/* ==========================================================================
   6. POST CARDS
   ========================================================================== */
.bl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
}
/* Three across on the listing. Fixed rather than auto-fill: with the sidebar
   gone the row is wide enough for four, which leaves the cards too narrow for
   a title plus an excerpt to read comfortably. */
.bl-grid--archive {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}
.bl-card-post {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid #e9ecf1;
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.bl-card-post:hover {
    border-color: #f4d79a;
    box-shadow: 0 22px 44px -28px rgba(26, 34, 56, .6);
    transform: translateY(-3px);
}
.bl-card-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    background-color: #f2f4f7;
    line-height: 0;
    overflow: hidden;
}
.bl-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.bl-card-post:hover .bl-card-media img {
    transform: scale(1.05);
}
.bl-card-media-ph {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: #c3c9d4;
}
.bl-card-media-ph svg {
    width: 42px;
    height: 42px;
}

.bl-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 12px;
    background-color: #F2A820;
    border-radius: 999px;
    color: #fff;
    font-family: 'Inter';
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .03em;
    line-height: 1.4;
    text-transform: uppercase;
}
.bl-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 18px 18px 20px;
}

.bl-card-date {
    margin: 0 0 8px;
    color: #8a91a1;
    font-family: 'Inter';
    font-size: var(--fs-xs);
    font-weight: 500;
}
.bl-card-heading {
    width: auto;
    margin: 0 0 10px;
    font-family: 'Inter';
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
}
.bl-card-heading a {
    color: #24282e;
    text-decoration: none;
    transition: color .2s ease;
}
.bl-card-heading a:hover,
.bl-card-heading a:focus-visible {
    color: #F2A820;
}

.bl-card-excerpt {
    margin: 0 0 16px;
    color: #5b6374;
    font-family: 'Inter';
    font-size: var(--fs-sm);
    line-height: 1.7;
}

.bl-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    color: #9A6608;
    font-family: 'Inter';
    font-size: var(--fs-sm);
    font-weight: 700;
    text-decoration: none;
}
.bl-card-arrow {
    display: inline-flex;
    transition: transform .22s ease;
}
.bl-card-arrow svg {
    display: block;
    width: 14px;
    height: 14px;
}
.bl-card-link:hover .bl-card-arrow {
    transform: translateX(4px);
}
/* Visible to screen readers only — gives each "Weiterlesen" a unique name. */
.screen-reader-only {
    position: absolute;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

/* ==========================================================================
   7. PAGINATION / EMPTY STATE
   ========================================================================== */
.bl-page .bl-pagination,
.bl-page .pagination {
    margin-top: 38px;
}
.bl-page .nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.bl-page .page-numbers {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 40px;
    height: 40px;
    padding: 0 13px;
    justify-content: center;
    background-color: #fff;
    border: 1px solid #e6e8ee;
    border-radius: 8px;
    color: #4a5160;
    font-family: 'Inter';
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.bl-page .page-numbers:hover,
.bl-page .page-numbers:focus-visible {
    border-color: #F2A820;
    color: #F2A820;
}
.bl-page .page-numbers.current {
    background-color: #F2A820;
    border-color: #F2A820;
    color: #fff;
}
.bl-page .page-numbers.dots {
    border-color: transparent;
}

.bl-empty {
    padding: 48px 26px;
    background-color: #f7f8fb;
    border: 1px solid #e9ecf1;
    border-radius: 16px;
    text-align: center;
}
.bl-empty h2 {
    width: auto;
    margin: 0 0 10px;
    color: #24282e;
    font-family: 'Inter';
    font-size: 22px;
    font-weight: 800;
}
.bl-empty p {
    margin: 0 0 20px;
    color: #5b6374;
}

/* ==========================================================================
   8. SIDEBAR
   ========================================================================== */
.bl-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* Follows the reader down past a long article. */
    position: sticky;
    top: 24px;
}
.bl-card {
    padding: 20px;
    background-color: #fff;
    border: 1px solid #e9ecf1;
    border-radius: 14px;
}
.bl-card-title {
    width: auto;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eff1f5;
    color: #24282e;
    font-family: 'Inter';
    font-size: 17px;
    font-weight: 800;
}

/* ---------- recent posts ---------- */
.bl-recent-list li + li {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid #f2f4f7;
}
.bl-recent-list a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color .2s ease;
}
.bl-recent-list a:hover,
.bl-recent-list a:focus-visible {
    background-color: #f9fafc;
}
.bl-recent-thumb {
    flex: 0 0 62px;
    width: 62px;
    height: 62px;
    border-radius: 10px;
    overflow: hidden;
    background-color: #f2f4f7;
    line-height: 0;
}
.bl-recent-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bl-recent-thumb-ph {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: #c3c9d4;
}
.bl-recent-thumb-ph svg {
    width: 22px;
    height: 22px;
}
.bl-recent-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.bl-recent-date {
    color: #8a91a1;
    font-family: 'Inter';
    font-size: var(--fs-xs);
    font-weight: 500;
}
.bl-recent-title {
    color: #24282e;
    font-family: 'Inter';
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    transition: color .2s ease;
}
.bl-recent-list a:hover .bl-recent-title {
    color: #F2A820;
}

.bl-card-more {
    display: inline-block;
    margin-top: 14px;
    color: #9A6608;
    font-family: 'Inter';
    font-size: var(--fs-sm);
    font-weight: 700;
    text-decoration: none;
}
.bl-card-more:hover {
    text-decoration: underline;
}

/* ---------- contact card ---------- */
.bl-card--cta {
    background-color: #F2A820;
    background-image: linear-gradient(160deg, #F5B845 0%, #F2A820 48%, #dd960f 100%);
    border-color: transparent;
    box-shadow: 0 20px 40px -26px rgba(242, 168, 32, .95);
}
.bl-cta-title {
    width: auto;
    margin: 0 0 10px;
    color: #fff;
    font-family: 'Inter';
    font-size: 18px;
    font-weight: 800;
    line-height: 1.35;
}

.bl-cta-text {
    margin: 0 0 18px;
    color: rgba(255, 255, 255, .92);
    font-family: 'Inter';
    font-size: var(--fs-sm);
    line-height: 1.65;
}
.bl-cta-actions {
    display: grid;
    gap: 10px;
}

/* .bl-btn, .bl-btn--solid and .bl-btn--ghost are defined in the BUTTON
   SYSTEM block in theme.css along with every other button on the site.
   --solid is the white-on-orange variant used on the sidebar contact card;
   --ghost is the translucent one beside it. Only the empty-state override
   below is local. */
.bl-btn-ico {
    display: inline-flex;
}
.bl-btn-ico svg {
    display: block;
    width: 16px;
    height: 16px;
}
/* The empty state reuses .bl-btn on a white background. */
.bl-empty .bl-btn--solid {
    background-color: #F2A820;
    border-color: #F2A820;
    color: #fff;
}
.bl-empty .bl-btn--solid:hover {
    background-color: #24282e;
    border-color: #24282e;
}

/* ==========================================================================
   9. RESPONSIVE
   ========================================================================== */
@media only screen and (max-width: 1024px) {
    .bl-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
        padding-top: 42px;
    }
    /* The sidebar drops below the article and its cards spread across. */
    .bl-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        align-items: start;
    }
    .bl-grid--archive {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .bl-featured {
        border-radius: 12px;
        height: auto;
    }
}

@media only screen and (max-width: 640px) {
    .bl-grid,
    .bl-grid--archive {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media only screen and (max-width: 767px) {
    .bl-hero-inner {
        padding: 40px 15px 46px;
    }
    .bl-featured {
        border-radius: 12px;
        height: auto;
    }

/* Floated images have no room to sit beside text on a phone. */
    .entry-content .alignleft,
    .entry-content .alignright {
        float: none;
        max-width: 100%;
        margin: 20px 0;
    }
    .entry-content h2 {
        padding-left: 13px;
        border-left-width: 3px;
    }
    .entry-content blockquote {
        padding: 20px 18px 20px 46px;
    }
}

@media (prefers-reduced-motion: reduce) {.bl-card-post:hover .bl-card-media img,
    .bl-card-link:hover .bl-card-arrow {
        transform: none;
    }
}

/* =============================================================
   SEO / GUIDES ADDITIONS

   Everything below came with the Ratgeber (guides) work: the search form, the
   category filter, the "Aktualisiert am" meta item, and the four blocks that
   follow an article — sharing, related guides, service links and the
   free-quote CTA (template-parts/post-footer.php).

   Colours and radii are the ones already used in this file; nothing here
   introduces a token of its own.
   ============================================================= */

/* ---------- search form (searchform.php) ---------- */

.bl-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 540px;
    margin: 26px 0 0;
}

/* In the sidebar and on the 404 it fills its container; only in the hero does
   it need a cap. */
.bl-card--search .bl-search,
.nf-search .bl-search {
    max-width: none;
    margin-top: 0;
}

.bl-search-icon {
    position: absolute;
    left: 18px;
    display: inline-flex;
    color: #9aa3ae;
    pointer-events: none;
}

.bl-search-icon svg {
    display: block;
    width: 19px;
    height: 19px;
}

.bl-search-input {
    width: 100%;
    height: 52px;
    padding: 0 56px 0 48px;
    background-color: #fff;
    border: 1px solid #e9ecf1;
    border-radius: 999px;
    color: #2a2e34;
    font-family: 'Inter';
    font-size: var(--fs-sm);
    box-shadow: 0 1px 2px rgba(29, 35, 38, .05);
    transition: border-color .22s ease, box-shadow .22s ease;
    -webkit-appearance: none;
    appearance: none;
}

.bl-search-input::placeholder {
    color: #9aa3ae;
}

.bl-search-input:focus {
    outline: 0;
    border-color: #F2A820;
    box-shadow: 0 0 0 4px rgba(242, 168, 32, .18);
}

/* The browser's own clear control would sit under our submit button. */
.bl-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.bl-search-submit {
    position: absolute;
    right: 6px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: #F2A820;
    color: #fff;
    cursor: pointer;
    transition: background-color .22s ease, transform .22s ease;
}

.bl-search-submit:hover,
.bl-search-submit:focus-visible {
    background-color: var(--brand-green);
    transform: scale(1.05);
}

.bl-search-submit svg {
    display: block;
    width: 18px;
    height: 18px;
}

/* ---------- category filter (index.php) ---------- */

.bl-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 2rem 15px 0;
}

.bl-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background-color: #fff;
    border: 1px solid #e9ecf1;
    border-radius: 999px;
    color: #2a2e34 !important; /* beats theme.css's orange global a colour */
    font-family: 'Inter';
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color .22s ease, border-color .22s ease, color .22s ease;
}

.bl-filter-chip:hover,
.bl-filter-chip:focus-visible {
    border-color: #F2A820;
    background-color: #fdfaf5;
}

.bl-filter-chip.is-active {
    background-color: #F2A820;
    border-color: #F2A820;
    color: #fff !important;
}

.bl-filter-count {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background-color: var(--icon-bg);
    color: #b8790a;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
}

.bl-filter-chip.is-active .bl-filter-count {
    background-color: rgba(255, 255, 255, .28);
    color: #fff;
}

/* ---------- "Aktualisiert am" ---------- */

/* Set apart from the rest of the meta row: it is a different kind of fact —
   the others describe the article, this one describes its upkeep. */
.bl-meta-updated {
    color: #6b7280;
    display: none !important;
}

.bl-meta-updated time {
    font-weight: 600;
}

/* =============================================================
   POST FOOTER  (template-parts/post-footer.php)
   ============================================================= */

.bl-share,
.bl-related,
.bl-services {
    margin-top: 2.75rem;
}

.bl-share-title,
.bl-related-title,
.bl-services-title {
    width: auto;
    margin: 0 0 18px;
    font-size: 20px;
    line-height: 1.3;
}

/* ---------- share ---------- */

.bl-share-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.bl-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 16px;
    background-color: #fff;
    border: 1px solid #e9ecf1;
    border-radius: 10px;
    color: #2a2e34 !important;
    font-family: 'Inter';
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color .22s ease, border-color .22s ease,
                color .22s ease, transform .22s ease;
}

.bl-share-ico {
    display: inline-flex;
}

.bl-share-ico svg {
    display: block;
    width: 17px;
    height: 17px;
}

/* Each network fills with its own colour on hover, so the buttons are told
   apart by the thing they actually are rather than all turning brand orange. */
.bl-share-btn:hover,
.bl-share-btn:focus-visible {
    color: #fff !important;
    transform: translateY(-2px);
}

.bl-share-btn--fb:hover,
.bl-share-btn--fb:focus-visible {
    background-color: #1877F2;
    border-color: #1877F2;
}

.bl-share-btn--wa:hover,
.bl-share-btn--wa:focus-visible {
    background-color: #2F5D34;
    border-color: #2F5D34;
}

.bl-share-btn--li:hover,
.bl-share-btn--li:focus-visible {
    background-color: #0A66C2;
    border-color: #0A66C2;
}

.bl-share-btn--mail:hover,
.bl-share-btn--mail:focus-visible {
    background-color: #F2A820;
    border-color: #F2A820;
}

/* ---------- related guides ---------- */

.bl-related-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
}

.bl-related-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #e9ecf1;
    border-radius: 14px;
    color: #2a2e34 !important;
    text-decoration: none;
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.bl-related-card:hover,
.bl-related-card:focus-visible {
    border-color: #F2A820;
    transform: translateY(-4px);
    box-shadow: 0 2px 6px rgba(29, 35, 38, .05), 0 20px 38px -24px rgba(242, 168, 32, .65);
}

.bl-related-media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: #f6efe4;
}

.bl-related-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.bl-related-card:hover .bl-related-media img {
    transform: scale(1.04);
}

.bl-related-ph {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: #d9c4a3;
}

.bl-related-ph svg {
    width: 34px;
    height: 34px;
}

.bl-related-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 16px 18px 18px;
}

.bl-related-date {
    color: #a08a63;
    font-family: 'Inter';
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.bl-related-name {
    font-family: 'Inter';
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.4;
}

/* ---------- service links ---------- */

.bl-services {
    padding: 24px 24px 26px;
    background-color: #fdf7ec;
    border: 1px solid #f2e4d1;
    border-radius: 14px;
}

.bl-services-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
}

.bl-service-link {
    display: flex;
    align-items: center;
    gap: 11px;
    height: 100%;
    padding: 12px 14px;
    background-color: #fff;
    border: 1px solid #f0dcc0;
    border-radius: 11px;
    color: #2a2e34 !important;
    font-family: 'Inter';
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}

.bl-service-link:hover,
.bl-service-link:focus-visible {
    border-color: #F2A820;
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(29, 35, 38, .05), 0 14px 28px -20px rgba(242, 168, 32, .7);
}

.bl-service-ico {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background-color: var(--icon-bg);
    color: var(--icon-fg);
    transition: background-color .22s ease, color .22s ease;
}

.bl-service-link:hover .bl-service-ico {
    background-color: var(--icon-bg-hover);
    color: var(--icon-fg-hover);
}

.bl-service-ico svg {
    display: block;
    width: 16px;
    height: 16px;
}

.bl-service-link > span:nth-child(2) {
    flex: 1 1 auto;
    min-width: 0;
}

/* Held back until hover — one arrow per row is four arrows competing with
   four names. */
.bl-service-arrow {
    flex: 0 0 auto;
    display: inline-flex;
    color: #F2A820;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .22s ease, transform .22s ease;
}

.bl-service-link:hover .bl-service-arrow,
.bl-service-link:focus-visible .bl-service-arrow {
    opacity: 1;
    transform: translateX(0);
}

.bl-service-arrow svg {
    display: block;
    width: 16px;
    height: 16px;
}

/* ---------- the CTA ---------- */

/* .fr-cta--panel is a white card and the article runs on white, so it takes
   the cream — the same trade the FAQ panels make. */
.bl-post-cta {
    margin-top: 2.75rem;
    background-color: #fdf7ec;
    border-color: #f2e4d1;
}

/* =============================================================
   404 ADDITIONS
   ============================================================= */

.nf-search {
    max-width: 460px;
    margin: 0 auto 22px;
}

.nf-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.nf-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 16px;
    margin: 26px 0 0;
    color: #6b7280;
    font-size: var(--fs-sm);
}

.nf-links a {
    color: #b8790a !important;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.nf-links a:hover,
.nf-links a:focus-visible {
    color: #2a2e34 !important;
}

/* =============================================================
   RESPONSIVE — the additions above
   ============================================================= */

@media only screen and (max-width: 1024px) {
    .bl-related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 767px) {
    .bl-filter {
        padding-top: 1.5rem;
    }

    .bl-related-grid,
    .bl-services-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .bl-share-list {
        gap: 8px;
    }

    .bl-share-btn {
        padding: 9px 13px;
        font-size: 13.5px;
    }

    .bl-services {
        padding: 20px 18px 22px;
    }

    .nf-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bl-search-submit,
    .bl-filter-chip,
    .bl-share-btn,
    .bl-related-card,
    .bl-related-media img,
    .bl-service-link,
    .bl-service-ico,
    .bl-service-arrow {
        transition: none;
    }

    .bl-search-submit:hover,
    .bl-share-btn:hover,
    .bl-related-card:hover,
    .bl-related-card:hover .bl-related-media img,
    .bl-service-link:hover {
        transform: none;
    }
}

/* =============================================================
   LIVE-SUCHE  (assets/js/live-search.js)

   Der Trefferkasten hängt am Formular, nicht an der Seite: so liegt er
   automatisch unter dem Feld, egal ob das im Banner, in der Seitenleiste
   oder auf der 404-Seite steht.
   ============================================================= */

/*
 * Der Trefferkasten braucht eine eigene Kante.
 *
 * Feld und Kasten waren beide weiß und lagen 8px auseinander — auf hellem
 * Grund verschmolzen sie zu einer weißen Fläche, in der man weder das eine
 * noch das andere abgrenzen konnte. Jetzt: ein schmaler Abstand, eine
 * sichtbare Kante und ein deutlich tieferer Schatten, damit der Kasten ÜBER
 * der Seite liegt statt in ihr.
 */
.bl-live {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    z-index: 30;
    overflow: hidden;
    max-height: min(70vh, 460px);
    overflow-y: auto;
    background-color: #fff;
    border: 1px solid #e2e6ec;
    border-radius: 16px;
    box-shadow:
        0 0 0 1px rgba(29, 35, 38, .04),
        0 4px 10px rgba(29, 35, 38, .08),
        0 30px 60px -24px rgba(29, 35, 38, .6);
    text-align: left;
}

.bl-live[hidden] {
    display: none;
}

/* Ein dünner Fortschrittsbalken statt eines Spinners: Er sagt „es läuft“,
   ohne die Liste zu verdecken, die eine Zehntelsekunde später erscheint. */
.bl-live.is-loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-image: linear-gradient(90deg, transparent, #F2A820, transparent);
    animation: bl-live-scan 1s linear infinite;
}

@keyframes bl-live-scan {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}

.bl-live-list {
    list-style: none;
    margin: 0;
    padding: 6px;
}

.bl-live-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 10px;
    color: #2a2e34 !important; /* schlägt die globale a-Farbe aus theme.css */
    text-decoration: none;
    transition: background-color .16s ease;
}

/* Maus und Tastatur führen zum selben Zustand — sonst sieht „mit Pfeiltaste
   ausgewählt“ anders aus als „mit der Maus angefahren“, und die Tastatur
   fühlt sich wie ein zweitklassiger Weg an. */
.bl-live-item:hover,
.bl-live-item:focus-visible,
.bl-live-item.is-active {
    background-color: #fdf7ec;
    outline: 0;
}

.bl-live-thumb {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    overflow: hidden;
    border-radius: 8px;
    background-color: #f6efe4;
}

.bl-live-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bl-live-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bl-live-title {
    font-family: 'Inter';
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
    /* Zwei Zeilen, dann abschneiden: ein langer Titel darf die Liste nicht
       auf halbe Bildschirmhöhe treiben. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bl-live-meta {
    color: #a08a63;
    font-family: 'Inter';
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
}

/* Ein leeres Ergebnis ist die eine Antwort, die aus nichts als Text besteht.
   Der Rahmen und die getönte Fläche machen daraus etwas, das man als Antwort
   erkennt, statt als weißen Kasten mit einem Satz darin. */
.bl-live-empty {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px;
    padding: 16px 16px;
    background-color: #fdf7ec;
    border: 1px solid #f2e4d1;
    border-radius: 12px;
    color: #5b6374;
    font-size: var(--fs-sm);
    line-height: 1.55;
}

.bl-live-empty::before {
    content: '';
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--icon-bg);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d98f0c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 17px;
}

.bl-live-more {
    display: block;
    padding: 13px 16px;
    border-top: 1px solid #f1f3f6;
    background-color: #fdfaf5;
    color: #b8790a !important;
    font-family: 'Inter';
    font-size: 13.5px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: background-color .16s ease, color .16s ease;
}

.bl-live-more:hover,
.bl-live-more:focus-visible {
    background-color: #F2A820;
    color: #fff !important;
}

/* Im Banner steht der Kasten auf dunklem Grund — der Schatten muss tiefer
   sein, sonst schwimmt er. */
.bl-hero .bl-live {
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2), 0 30px 70px -28px rgba(0, 0, 0, .8);
}

/* =============================================================
   LEERER ZUSTAND — Suche ohne Treffer
   ============================================================= */

.bl-empty-search {
    display: flex;
    justify-content: center;
    margin: 0 auto 22px;
}

/* Das Formular ist hier nicht im Banner, also gilt der obere Abstand von
   .bl-search nicht — und die Breite darf enger sein als die 540px dort. */
.bl-empty-search .bl-search {
    max-width: 460px;
    margin: 0;
}

.bl-empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

@media (prefers-reduced-motion: reduce) {
    .bl-live.is-loading::before {
        animation: none;
    }

    .bl-live-item,
    .bl-live-more {
        transition: none;
    }
}

@media only screen and (max-width: 767px) {
    .bl-empty-actions {
        flex-direction: column;
        align-items: stretch;
    }
}