/* ==================================================================
   Blogbeitrag — gleiche Handschrift wie die Blog-Startseite
   (Kettelkante, Helvetica Black, Leinenton).
   ================================================================== */

body.single-post {
    --bb-tinte:  #16233F;
    --bb-gold:   #E0AC33;
    --bb-messing:#9A7A2A;
    --bb-papier: #F7F3EA;
    --bb-linie:  #E3DAC6;
    --bb-naht: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M0 6 L3.5 2 L7 6 L10.5 2 L14 6' fill='none' stroke='%23E0AC33' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --bb-schwer: "Helvetica Neue", Helvetica, "Arial Black", Arial, sans-serif;
}

/* --- Volle Breite: die Randspalte ist leer geraeumt --- */
body.single-post .elementor-location-single .elementor-section .elementor-container {
    max-width: 1120px !important;
}

body.single-post .elementor-location-single .elementor-column:has(.elementor-widget-theme-post-content),
body.single-post .elementor-location-single .elementor-column:has(.elementor-widget-theme-post-title) {
    width: 100% !important;
}

/* Die leergeraeumte Randspalte einklappen.
   ACHTUNG: eine :not(:has(...))-Regel ueber ALLE Spalten hat hier den
   Beitragstext mit verschwinden lassen - die Inhaltsspalte fiel selbst
   darunter. Deshalb jetzt positiv adressiert: nur Spalten ausblenden,
   die ein bekanntes Randspalten-Widget enthalten UND keinen Inhalt. */
body.single-post .elementor-location-single .elementor-column:has(.elementor-widget-wp-widget-archives):not(:has(.elementor-widget-theme-post-content)) {
    display: none;
}

/* --- Kopfzeile ueber dem Titel --- */
.nm-bb-kopf {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-bottom: 12px;
}

body.single-post .nm-bb-thema {
    color: var(--bb-messing) !important;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-decoration: none !important;
    text-transform: uppercase;
}

body.single-post .nm-bb-thema:hover { color: var(--bb-tinte) !important; }

.nm-bb-meta {
    color: #8a919c;
    display: inline-flex;
    flex-wrap: wrap;
    font-size: 12.5px;
    gap: 7px;
}

/* --- Titel in der Hausschrift --- */
body.single-post .elementor-widget-theme-post-title h1,
body.single-post .elementor-widget-theme-post-title .elementor-heading-title {
    color: var(--bb-tinte) !important;
    font-family: var(--bb-schwer) !important;
    font-size: clamp(27px, 3.4vw, 42px) !important;
    font-weight: 900 !important;
    letter-spacing: -.015em;
    line-height: 1.08 !important;
    margin: 0 0 6px !important;
    text-transform: uppercase;
}

/* Kettelkante als Abschluss unter dem Titelbereich. */
body.single-post .elementor-widget-theme-post-title::after {
    background-image: var(--bb-naht);
    background-repeat: repeat-x;
    content: "";
    display: block;
    height: 8px;
    margin-top: 18px;
    width: 128px;
}

/* --- Fliesstext ---
   KEINE max-width mehr auf den Absaetzen: die Zeilenbreite regelt jetzt
   die Textspalte des Magazinlayouts. Vorher stand der Text in einer
   631px schmalen Saeule, waehrend der Container 1120px breit war. */
body.single-post .elementor-widget-theme-post-content p,
body.single-post .elementor-widget-theme-post-content ul,
body.single-post .elementor-widget-theme-post-content ol {
    font-size: 16.5px;
    line-height: 1.72;
}

body.single-post .elementor-widget-theme-post-content h2,
body.single-post .elementor-widget-theme-post-content h3 {
    color: var(--bb-tinte) !important;
    font-family: var(--bb-schwer);
    font-weight: 900;
    letter-spacing: -.01em;
    line-height: 1.2;
}

body.single-post .elementor-widget-theme-post-content h2 { font-size: clamp(21px, 2.3vw, 27px) !important; }
body.single-post .elementor-widget-theme-post-content h3 { font-size: clamp(17px, 1.8vw, 20px) !important; }

/* Bilder im Beitrag bekommen denselben ruhigen Rahmen wie die Karten. */
body.single-post .elementor-widget-theme-post-content img {
    border: 1px solid var(--bb-linie);
    border-radius: 3px;
    height: auto;
    max-width: 100%;
}

/* Links im Text sichtbar machen - vorher kaum vom Fliesstext zu
   unterscheiden. Goldene Unterstreichung wie im Kundenkonto. */
body.single-post .elementor-widget-theme-post-content a:not(.elementor-button) {
    border-bottom: 1px solid rgba(224, 172, 51, .65);
    color: var(--bb-tinte) !important;
    text-decoration: none !important;
}

body.single-post .elementor-widget-theme-post-content a:not(.elementor-button):hover {
    border-bottom-color: var(--bb-tinte);
}



/* ==================================================================
   Magazinlayout: Kapitelspalte + Text, ueber die volle Containerbreite
   ================================================================== */
.nm-bb-layout {
    align-items: start;
    display: grid;
    gap: clamp(26px, 4vw, 58px);
    grid-template-columns: 220px minmax(0, 1fr);
}

.nm-bb-einspaltig { max-width: 74ch; }

/* Kapitelspalte laeuft mit. */
.nm-bb-rail {
    border-top: 2px solid var(--bb-tinte);
    padding-top: 14px;
    position: sticky;
    top: 96px;
}

.nm-bb-rail-titel {
    color: var(--bb-messing);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    margin: 0 0 12px;
    text-transform: uppercase;
}

.nm-bb-rail-liste {
    counter-reset: kapitel;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nm-bb-rail-liste li {
    counter-increment: kapitel;
    margin: 0 0 9px;
}

body.single-post .nm-bb-rail-liste a {
    border-bottom: 0 !important;
    color: #5b6472 !important;
    display: block;
    font-size: 13px;
    line-height: 1.4;
    padding-left: 24px;
    position: relative;
    text-decoration: none !important;
}

/* Nummern in der Hausschrift - kleines Detail, das die Spalte
   nach Magazin aussehen laesst statt nach Standardliste. */
body.single-post .nm-bb-rail-liste a::before {
    color: var(--bb-gold);
    content: counter(kapitel, decimal-leading-zero);
    font-family: var(--bb-schwer);
    font-size: 11px;
    font-weight: 900;
    left: 0;
    position: absolute;
    top: 1px;
}

body.single-post .nm-bb-rail-liste a:hover { color: var(--bb-tinte) !important; }

/* Text bleibt lesbar, nutzt aber die gewonnene Breite. */
.nm-bb-text { max-width: 78ch; }

/* ------------------------------------------------------------------
   Kastenoptik entschaerfen.

   Der Beitrag wurde mit einem Karten-Muster gebaut: weisse Flaechen,
   24px Radius, weicher Schatten, halbtransparentes Weiss. Dieser
   Dreiklang ist genau das, was heute nach Baukasten aussieht - und er
   zerlegt einen Fliesstext in ein Dutzend schwebender Kacheln.

   Statt Kacheln jetzt Typografie und Linien: flacher Grund, keine
   Schatten, Trennung ueber Abstand und eine Haarlinie. Betrifft
   aktuell genau einen Beitrag, schadet aber keinem anderen.
   ------------------------------------------------------------------ */
body.single-post .nm-blog-card {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 0 26px !important;
    padding: 0 0 26px !important;
    position: relative;
}

body.single-post .nm-blog-card + .nm-blog-card { border-top: 1px solid var(--bb-linie) !important; padding-top: 26px !important; }

/* Die kleinen Bausteine im Text bleiben abgesetzt, aber flach. */
body.single-post .nm-variant,
body.single-post .nm-benefit,
body.single-post .nm-faq-item {
    background: var(--bb-papier) !important;
    border: 1px solid var(--bb-linie) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
}

/* Zitat-/Beispielzeile bekommt die Goldkante statt eines Kastens. */
body.single-post .nm-blog-quote-line {
    background: transparent !important;
    border: 0 !important;
    border-left: 3px solid var(--bb-gold) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding-left: 16px !important;
}

@media (max-width: 900px) {
    .nm-bb-layout { grid-template-columns: 1fr; }
    .nm-bb-rail { position: static; }
    .nm-bb-rail-liste { columns: 2; column-gap: 22px; }
    .nm-bb-text { max-width: none; }
}

/* ==================================================================
   Anfrage-Kasten im Beitrag (.nm-blog-cta)

   Kam als grün-nach-rot verlaufender Kasten mit 24px Radius daher -
   eine Farbkombination, die auf der ganzen Seite sonst nirgends
   vorkommt, plus der uebliche Verlauf-mit-Rundung-Look.

   Dazu ein echter Mangel, nicht nur Geschmack: die Ueberschrift stand
   in dunklem Navy auf dem dunklen Verlauf und war dort, wo der Verlauf
   am dunkelsten ist, kaum zu lesen.

   Jetzt dieselbe Sprache wie der Shop-Block unter den Beitraegen:
   Navy-Grund, weisse Schrift, goldener Knopf. Betrifft aktuell zwei
   Beitraege - beide vom selben Tag, also offenbar die aktuelle
   Produktionsweise. Kuenftige Beitraege mit diesem Muster sehen damit
   automatisch richtig aus.
   ================================================================== */
body.single-post .nm-blog-cta,
body.single-post .nm-blog-cta-wrap {
    background: linear-gradient(118deg, #16233F 0%, #1b2b4d 58%, #0e1830 100%) !important;
    border: 0 !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    color: #fff !important;
}

body.single-post .nm-blog-cta-wrap { padding: 0 !important; }

body.single-post .nm-blog-cta {
    padding: clamp(22px, 3vw, 32px) !important;
    position: relative;
    overflow: hidden;
}

/* Goldene Haarlinien wie im Rest des Blogs. */
body.single-post .nm-blog-cta::before {
    background: repeating-linear-gradient(58deg, rgba(224,172,51,.24) 0 1px, transparent 1px 19px);
    bottom: -20%;
    content: "";
    height: 80%;
    left: -4%;
    -webkit-mask-image: linear-gradient(to top right, #000, transparent 70%);
    mask-image: linear-gradient(to top right, #000, transparent 70%);
    position: absolute;
    width: 34%;
}

body.single-post .nm-blog-cta > * { position: relative; z-index: 1; }

body.single-post .nm-blog-cta-kicker {
    color: var(--bb-gold) !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase;
}

/* Weiss statt Navy - hier lag der Lesbarkeitsmangel. */
body.single-post .nm-blog-cta-title {
    color: #fff !important;
    font-family: var(--bb-schwer) !important;
    font-size: clamp(20px, 2.4vw, 27px) !important;
    font-weight: 900 !important;
    letter-spacing: -.01em;
    line-height: 1.18 !important;
}

body.single-post .nm-blog-cta-text {
    color: rgba(255, 255, 255, .84) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    max-width: 56ch;
}

body.single-post .nm-blog-cta-btn {
    background: var(--bb-gold) !important;
    border: 0 !important;
    border-bottom: 0 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    color: var(--bb-tinte) !important;
    font-weight: 700 !important;
    padding: 12px 26px !important;
    text-decoration: none !important;
}

body.single-post .nm-blog-cta-btn:hover { background: #c8942a !important; color: var(--bb-tinte) !important; }

/* --- Tabellen im Beitragstext -------------------------------------
   Kamen bisher nicht vor und standen deshalb ohne jede Gestaltung da.
   Auf schmalen Schirmen scrollt die Tabelle in ihrem eigenen Kasten,
   damit die Seite nicht seitlich mitwandert. */

/* Ohne min-width:0 sitzt die Tabelle als Gitterelement auf ihrer
   min-content-Breite und zieht die ganze Spalte ueber den Schirm hinaus -
   auf dem Handy wurde der Fliesstext dadurch rechts abgeschnitten. */
body.single-post .nm-bb-layout > *,
body.single-post .nm-bb-text { min-width: 0; }

body.single-post .nm-bb-text table {
    border-collapse: collapse;
    display: block;
    margin: 26px 0;
    max-width: 100%;
    overflow-x: auto;
    width: max-content;
}

body.single-post .nm-bb-text thead th {
    background: var(--bb-papier);
    border-bottom: 2px solid var(--bb-tinte);
    color: var(--bb-tinte);
    font-family: var(--bb-schwer);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .04em;
    padding: 11px 14px;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

body.single-post .nm-bb-text tbody td {
    border-bottom: 1px solid var(--bb-linie);
    font-size: 15px;
    line-height: 1.5;
    padding: 12px 14px;
    vertical-align: top;
}

/* Erste Spalte fuehrt die Zeile - deshalb kraeftiger. */
body.single-post .nm-bb-text tbody td:first-child {
    color: var(--bb-messing);
    font-family: var(--bb-schwer);
    font-weight: 900;
    white-space: nowrap;
}

body.single-post .nm-bb-text tbody tr:nth-child(odd) td {
    background: rgba(247, 243, 234, .55);
}

body.single-post .nm-bb-text tbody tr:last-child td { border-bottom: none; }

@media (max-width: 560px) {
    body.single-post .nm-bb-text thead th,
    body.single-post .nm-bb-text tbody td { font-size: 14px; padding: 9px 10px; }
}