/* =========================================================================
   nachitalienreisen.de — Guide Article Design System (GeneratePress skin)
   Ported from Open Design project "nachitalienreisen-guide-design"
   (tokens.css). Approved 2026-08-20. Two layers:
     1. Re-point GeneratePress's own CSS custom properties (--base-3,
        --contrast, --accent, ...) at our palette — GP's theme CSS already
        uses these vars for header/content/link/entry-title colors, so this
        alone re-skins most of the site's chrome without fighting specificity.
     2. Explicit rules for typography, images, and the two content
        components (CTA/affiliate block, related-articles block) that don't
        have a GP equivalent to hook into.
   ========================================================================= */

:root {
  /* ---- GeneratePress theme vars — re-pointed to our palette ---- */
  --base-3:    #FAF6EF; /* was #ffffff — article/header panel background */
  --base-2:    #FAF6EF; /* was #f7f8f9 — body background */
  --base:      #F2EBDD; /* was #f0f0f0 — secondary surface (dropdowns etc.) */
  --contrast:   #2B241D; /* was #222222 — primary text */
  --contrast-2: #665C4E; /* was #575760 — secondary text (entry-meta etc.) */
  --contrast-3: #CBBB9C; /* was #b2b2be — borders / focus states */
  --accent:     #BF5730; /* was #1e73be — links, highlights */

  /* ---- Our own tokens, for the component CSS below ---- */
  --color-paper:        #FAF6EF;
  --color-paper-alt:     #F2EBDD;
  --color-paper-deep:    #EAE0CC;
  --color-ink:            #2B241D;
  --color-ink-soft:       #665C4E;
  --color-ink-faint:      #8C8071;
  --color-border:         #E3D9C5;
  --color-border-strong:  #CBBB9C;

  --color-accent:         #BF5730;
  --color-accent-dark:    #9C4423;
  --color-accent-soft:    #F1DDC9;

  --color-affiliate-bg:      #F4E9D8;
  --color-affiliate-border:  #C99A5B;
  --color-affiliate-label:   #8A5A22;

  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --fs-eyebrow: 0.75rem;
  --fs-small:   0.875rem;
  --fs-body:    1.125rem;
  --fs-body-s:  1rem;
  --fs-h3:      1.375rem;
  --fs-h2:      1.875rem;
  --fs-h1:      2.75rem;
  --fs-h1-lg:    3.5rem;

  --lh-body:  1.7;
  --lh-tight: 1.2;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px;
  --shadow-card: 0 1px 2px rgba(43, 36, 29, 0.06), 0 1px 1px rgba(43, 36, 29, 0.04);

  --content-width: 840px; /* User-Fund 2026-08-21: 720px read as ~2/3 of the available page width, too narrow for a typical blog reading column. */
}

/* ========================================================================= */
/* Base typography                                                          */
/* ========================================================================= */

body, button, input, select, textarea {
  font-family: var(--font-body);
}

/* Required safety net for any component using the "full-bleed" 100vw +
   negative-margin breakout technique (.faq-portal already does this, and
   .highlight-box does on mobile below) — without it, that intentional
   breakout registers as page-level horizontal scroll. Root-caused
   2026-08-21: a wide wp:table (forced to a mobile min-width so its columns
   stay legible, see the table rules below) was doing the same thing even
   though its own <figure> already scrolls internally via overflow-x:auto —
   confirmed via a live-viewport iframe test that document.documentElement.
   scrollWidth exceeded the viewport specifically because of this missing
   rule, not because the table's own scroll region was broken. This does
   NOT stop the table's own internal horizontal scroll (that's scoped to
   the figure, a separate overflow context) — only the page itself stops
   growing wider than the viewport.

   `clip`, not `hidden` (User-Fund 2026-08-24, sticky-header preview, two
   rounds): dropping this rule from body entirely (first attempt) broke the
   full-bleed protection it exists for — confirmed live, documentElement.
   scrollWidth exceeded clientWidth by exactly a scrollbar's width once
   body's overflow-x was no longer constrained (the 100vw breakout is wider
   than the scrollbar-having viewport; body's own clipping was doing real
   work, not just duplicating html's). But leaving overflow-x:hidden on
   body also breaks position:sticky for .nir-site-header, a direct child of
   <body> (injected via wp_body_open): per the CSS2.1 rule that if one of
   overflow-x/overflow-y is non-visible and the other isn't set, the other
   force-computes to auto — body's un-set overflow-y became auto, turning
   body into a scroll container, and a sticky element's containing block
   resolves to its nearest scroll-container ancestor, not the viewport
   (confirmed live: header tracked scroll ~1:1 instead of sticking).
   `overflow-x: clip` sidesteps this without the hidden/auto problem: it
   clips painted overflow exactly like hidden, but does NOT establish a
   scroll container, so it doesn't register as a sticky containing-block
   candidate — same fix idea as the first attempt, just with the correct
   value this time.

   THIRD round, User-Fund 2026-08-24 — CRITICAL regression from the second
   round: I set `overflow: clip` as the SHORTHAND, which sets overflow-y to
   clip too, not just overflow-x. That broke scrolling site-wide, not just
   visually but completely — `clip` (unlike `hidden`) permits NO scrolling
   by any means, not even programmatic (window.scrollTo/scrollTop), because
   it establishes no scrollable region at all rather than merely hiding the
   scrollbar. Confirmed live: documentElement.scrollHeight (42371px) vastly
   exceeded clientHeight (791px) with overflow-y:clip in place — all of
   that height was simply unreachable, not just unscrolled. The "one non-
   clip/non-visible value forces the other to auto" rule this whole
   comment is about does NOT apply to a clip+visible pairing (clip is
   exempt, same as visible) — overflow-y can safely stay visible here, it
   never needed clip. Fixed: overflow-x:clip + overflow-y:visible,
   explicit longhands, not the shorthand. Re-verified after this fix, all
   three properties at once: header sticks (rect.top stays 0 while
   scrolled), documentElement.scrollWidth === clientWidth (no horizontal
   overflow), AND documentElement.scrollHeight reachable via actual scroll
   again (no vertical clipping).
*/
html, body {
  overflow-x: clip;
  overflow-y: visible;
}

h1, h2, h3, h4, h5, h6, .entry-title, .entry-title a, .main-title a {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  font-weight: 600;
}

/* ========================================================================= */
/* Article layout: single column, no sidebar (generate_sidebar_layout filter
   in nir-articles.php removes GP's sidebar for singular articles/pages) —
   entry-content gets the mockup's prose-width, featured image stays full
   container width above it. */
/* ========================================================================= */

.single-articles .entry-content,
.page .entry-content {
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
}

.entry-content h1 {
  font-size: var(--fs-h1);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-5);
}
@media (min-width: 800px) {
  .entry-content h1 { font-size: var(--fs-h1-lg); }
}
.entry-content h2 {
  font-size: var(--fs-h2);
  margin-top: var(--space-8);
  scroll-margin-top: var(--space-6); /* fürs Inhaltsverzeichnis (.toc) */
}
.entry-content h3 {
  font-size: var(--fs-h3);
  margin-top: var(--space-6);
  scroll-margin-top: var(--space-6);
}
.entry-content p,
.entry-content li {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.entry-content a {
  color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.entry-content a:hover { color: var(--color-accent-dark); }

/* Pillar-Card-Titel (User-Fund 2026-08-24, s. nir_style_pillar_card in
   nir-articles.php) — ein ganzes H2 als Link braucht keine zusätzliche
   Underline-Betonung, die Akzentfarbe von .entry-content a reicht als
   Link-Hinweis. Der "Weiterlesen"-Link im selben Absatz bleibt bewusst
   unangetastet (behält die geerbte Underline) — nur der Titel wurde
   angefragt. */
.pillar-card__title a { text-decoration: none; }

/* ========================================================================= */
/* Images                                                                    */
/* ========================================================================= */

.entry-content .wp-block-image,
.entry-content .wp-block-gallery {
  margin: var(--space-6) 0;
}
.entry-content .wp-block-image img {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong);
}
.entry-content figcaption.wp-element-caption {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-style: italic;
  color: var(--color-ink-faint);
  margin-top: var(--space-2);
}

.featured-image img {
  border-radius: var(--radius-lg);
}

/* Opt-in paired/side-by-side image layout — wrap two consecutive wp:image
   blocks in a wp:group with className "image-pair" to use it. */
.entry-content .image-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.entry-content .image-pair .wp-block-image { margin: 0; }
@media (max-width: 640px) {
  .entry-content .image-pair { grid-template-columns: 1fr; }
}

/* ========================================================================= */
/* Tables (core/table) — one standard for every wp:table on the site, not a
   one-off. migrate.mjs (pushTables/tableToHtml) always emits <thead>/<th>
   for the header row and <tbody>/<td> for data (semantic structure matters
   here for Google Featured Snippets/Rich Results, which parse tables by
   markup, not by visual styling — see comment there). figcaption sits
   inside the <figure>, styled the same as image captions below. */
/* ========================================================================= */

.entry-content .wp-block-table {
  margin: var(--space-6) 0;
}
.entry-content .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body-s);
}
.entry-content .wp-block-table th,
.entry-content .wp-block-table td {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  text-align: left;
}
.entry-content .wp-block-table thead th {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-ink-soft);
  background: var(--color-paper-alt);
}
.entry-content .wp-block-table tbody tr:nth-child(even) {
  background: var(--color-paper-alt);
}
/* Wide tables scroll their own row instead of the whole page. */
@media (max-width: 640px) {
  .entry-content .wp-block-table {
    overflow-x: auto;
  }
  .entry-content .wp-block-table table {
    min-width: 480px;
  }
}

/* ========================================================================= */
/* Eyebrow / meta / tag accents                                             */
/* ========================================================================= */

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.entry-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  margin: 0 0 var(--space-5) 0;
}
.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  background: var(--color-accent-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
}

/* ========================================================================= */
/* Breadcrumbs + Inhaltsverzeichnis — rendered at runtime by nir-articles.php
   (the_content filter), not baked into post_content by migrate.mjs. See
   comment there for why (date/thema should stay live, not freeze at
   migration day). */
/* ========================================================================= */

.breadcrumbs {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  color: var(--color-ink-faint);
  margin-bottom: var(--space-4);
}
.breadcrumbs a { color: var(--color-ink-faint); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-accent); }
.breadcrumbs__sep { margin: 0 var(--space-1); opacity: 0.6; }
.breadcrumbs [aria-current="page"] { color: var(--color-ink-soft); }

.toc {
  background: var(--color-paper-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-block: var(--space-6);
}
.toc__title {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-3);
}
.toc__list { list-style: none; margin: 0; padding: 0; }
/* Chevron + divider between items — same pattern as .faq-portal__item
   below, reused rather than invented fresh (User-Fund 2026-08-21: links
   were running into each other with no separation). */
.toc__item a {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}
.toc__item a svg { flex-shrink: 0; margin-top: 4px; color: var(--color-accent); }
.toc__item a:hover { color: var(--color-accent-dark); text-decoration: underline; }
.toc__item a:hover svg { color: var(--color-accent-dark); }
.toc__item--sub { padding-left: var(--space-5); }
/* Same accent link color as top-level items (User-Fund 2026-08-21: the
   ink-soft override here made sub-items read as inactive/disabled links). */

/* Mobile: same screen-edge margin and reduced inner padding as
   .highlight-box (User-Fund 2026-08-21 — same fix, reused, not reinvented). */
@media (max-width: 640px) {
  .toc {
    width: calc(100vw - 2 * var(--space-4));
    margin-left: calc(50% - 50vw + var(--space-4));
    margin-right: calc(50% - 50vw + var(--space-4));
    padding: 8px;
  }
}

/* ========================================================================= */
/* CTA / Affiliate block — must read as CLEARLY DISTINCT from editorial copy.
   Used by the "CTA — <Anbieter>" synced patterns (wp_block). */
/* ========================================================================= */

.cta-block {
  background: var(--color-affiliate-bg);
  border: 1.5px solid var(--color-affiliate-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-block: var(--space-7);
}

.cta-block__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-affiliate-label);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--color-affiliate-border);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  margin-bottom: var(--space-4);
}
.cta-block__label svg { width: 12px; height: 12px; flex-shrink: 0; }

.cta-block__layout {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: var(--space-5);
  align-items: center;
}
@media (max-width: 640px) {
  .cta-block__layout { grid-template-columns: 1fr; text-align: left; }
}

.cta-block__icon {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-md);
  background: var(--color-paper);
  border: 1px solid var(--color-affiliate-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--color-ink-faint);
  text-align: center;
  padding: var(--space-2);
}
@media (max-width: 640px) { .cta-block__icon { display: none; } }

.cta-block__title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  margin: 0 0 var(--space-2);
  color: var(--color-ink);
}
.cta-block__text {
  font-family: var(--font-body);
  font-size: var(--fs-body-s);
  color: var(--color-ink-soft);
  margin: 0;
  max-width: 52ch;
}
.cta-block__cta { white-space: nowrap; }

.cta-block .btn,
a.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-body-s);
  color: #fff;
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.cta-block .btn:hover,
a.btn:hover { background: var(--color-accent-dark); color: #fff; }

.btn__micro {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-top: 2px;
}

.cta-block__fineprint {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--color-affiliate-label);
  opacity: 0.85;
  margin-top: var(--space-4);
  margin-bottom: 0;
  grid-column: 1 / -1;
}

/* ========================================================================= */
/* Highlight Box — bordered callout for content the old site set visually    */
/* apart (e.g. "Das Wichtigste in diesem Artikel"). migrate.mjs              */
/* (findHighlightBoxes/buildHighlightBoxModel) detects these from the old    */
/* site's own per-post Elementor CSS (border on the wrapping column/         */
/* container, sometimes + a background-color on the first widget = a        */
/* colored title bar) — not from any class/attribute in content.rendered.   */
/* Uses the design system's own accent color, not the old site's Elementor   */
/* teal, for a consistent look with .cta-block/.faq-portal.                  */
/* ========================================================================= */

.highlight-box {
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-lg);
  margin-block: var(--space-7);
  overflow: hidden;
}
/* WP core wraps this group's content in .wp-block-group__inner-container
   with its own default 30px side padding (not written by us — confirmed
   via a live DOM inspection, User-Fund 2026-08-21 — it was stacking on top
   of .highlight-box__title/__body's own padding below, undetected on
   desktop and the real cause of "too much space" once mobile padding was
   reduced). Neutralized so our own padding is the only inset. */
.highlight-box > .wp-block-group__inner-container {
  padding: 0;
}
.highlight-box__title {
  margin: 0;
  padding: var(--space-4) var(--space-6);
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  text-align: center;
}
.highlight-box__body {
  padding: var(--space-6);
}
.highlight-box__body > *:first-child { margin-top: 0; }
.highlight-box__body > *:last-child { margin-bottom: 0; }

/* Mobile: User-Fund 2026-08-21 — the box's own space-6 (32px) padding,
   compounded with the theme's own content-area gutter, left the text
   reading as an unreasonably narrow column inside an already-narrow box.
   First attempt used the same true full-bleed (0 margin) technique
   .faq-portal uses, which overcorrected (User-Fund 2026-08-21, round 2):
   the box needs a small but visible gap from the screen edge, not 0 and
   not the original over-wide one. Viewport-anchored margin (immune to the
   theme's own content-area padding, same principle as the full-bleed
   trick, just stopping var(--space-4) short of the edge instead of going
   all the way to it) instead of the position:relative/left/right form —
   plain margin-left/-right calc() needs no extra properties. */
@media (max-width: 640px) {
  .highlight-box {
    width: calc(100vw - 2 * var(--space-4));
    margin-left: calc(50% - 50vw + var(--space-4));
    margin-right: calc(50% - 50vw + var(--space-4));
  }
  .highlight-box__title {
    padding: var(--space-3) 8px;
  }
  .highlight-box__body {
    padding: var(--space-4) 8px;
  }
}

/* ========================================================================= */
/* FAQ Portal Box — recurring "Frage & Antwort Portal" cross-link block.    */
/* Rendered as one component by migrate.mjs (groupFaqPortalWidgets /        */
/* faqPortalToHtml) whenever the source Elementor widget sequence is        */
/* recognized — same box on every guide article that has this content,     */
/* not a one-off for a single page. Neutral/editorial treatment (paper-alt  */
/* card, no affiliate styling) — this is genuine cross-link content, not    */
/* an ad, so it must not read like the .cta-block.                         */
/* ========================================================================= */

/* Full-bleed band: background/border span the viewport regardless of the
   ancestor chain's padding (GP's site-content padding, grid-container max-
   width, etc.) — the viewport-anchored breakout trick is immune to all of
   that, unlike a calc() based on a guessed ancestor width. */
.faq-portal {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: var(--color-paper-alt);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  padding-block: var(--space-6);
  margin-block: var(--space-7);
}
/* Inner content stays flush with the article's own text edges: same
   max-width as .entry-content, no extra inline padding of its own (article
   paragraphs have none either — see "Article layout" above). */
.faq-portal__inner {
  max-width: var(--content-width);
  margin-inline: auto;
}
.faq-portal__header { margin-bottom: var(--space-5); }
.faq-portal__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.faq-portal__eyebrow a { color: inherit; text-decoration: none; }
.faq-portal__eyebrow a:hover { color: var(--color-accent-dark); }
.faq-portal__eyebrow svg { width: 14px; height: 14px; flex-shrink: 0; }
/* Higher specificity than ".entry-content h2" (0,1,1 — class+element) is
   needed here: .faq-portal__title alone (0,1,0) would lose that fight and
   inherit the 64px article-h2 margin-top instead of this tight one. */
.faq-portal .faq-portal__title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  margin: var(--space-1) 0 0;
  color: var(--color-ink);
}
.faq-portal__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2) var(--space-5);
}
@media (min-width: 560px) {
  .faq-portal__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 860px) {
  .faq-portal__grid { grid-template-columns: repeat(3, 1fr); }
}
.faq-portal__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  color: var(--color-ink);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.4;
  border-bottom: 1px solid var(--color-border);
}
.faq-portal__item svg { flex-shrink: 0; margin-top: 4px; color: var(--color-accent); }
.faq-portal__item:hover { color: var(--color-accent-dark); }
.faq-portal__item:hover svg { color: var(--color-accent-dark); }
.faq-portal__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-accent);
  text-decoration: none;
}
.faq-portal__more:hover { color: var(--color-accent-dark); }

/* Master-Hub-Fund 2026-08-24 (frage-antwort-portal): jede andere Seite hat
   höchstens EIN .faq-portal, umgeben von normalem Artikeltext — dort trennt
   margin-block sauber vom übrigen Inhalt. Auf dem Master-Hub stehen mehrere
   .faq-portal-Blöcke direkt hintereinander (12 Themen, keine Absätze
   dazwischen); die kollabierenden Ränder zwischen zwei Blöcken lassen dann
   einen sichtbaren Streifen der Seiten-Hintergrundfarbe zwischen den beiden
   border-top/border-bottom-Linien stehen (User-Fund 2026-08-24). Struktureller
   Selektor statt Slug-Sonderfall — greift automatisch nur dort, wo zwei
   Blöcke wirklich direkt aufeinanderfolgen, verschmilzt sie zu einem
   durchgehenden Band mit einer gemeinsamen Außenkontur.
   :has() wird schon von allen aktuell relevanten Browsern unterstützt. */
.faq-portal:has(+ .faq-portal) { margin-bottom: 0; border-bottom: none; }
.faq-portal + .faq-portal { margin-top: 0; border-top: none; }

/* ========================================================================= */
/* FAQ-Hub-Seiten (fap-*-frage-antwort-portal, 13 Stück inkl. Master-Hub     */
/* frage-antwort-portal) — Themen-Übersichten mit eigenem Aufbau (icon-list  */
/* -> wp:list statt eines gruppierten .faq-portal, s. groupFaqPortalWidgets */
/* in migrate.mjs). Markup für .faq-hub-eyebrow/.faq-hub-item* wird zur     */
/* Laufzeit von nir_style_faq_hub_badge()/nir_style_faq_hub_items() in      */
/* nir-articles.php nachträglich um den migrierten Content gelegt (User-    */
/* Fund 2026-08-23, visuelle Sichtung von fap-comer-see-frage-antwort-      */
/* portal — nicht Teil der schon geschlossenen 15 Гайд/Q&A-Befunde oben,    */
/* ein eigener Seitentyp).                                                  */
/* ========================================================================= */

/* Selbe Optik wie .faq-portal__eyebrow (identischer Link, andere Stelle —
   User-Fund 2026-08-23: sah bislang wie ein gewöhnlicher unterstrichener
   Link aus, kein erkennbarer Bezug zum FAQ-Portal-Konzept). Eigene Klasse
   nur für den Abstand zur folgenden Themen-Überschrift — .faq-portal__eyebrow
   selbst sitzt normalerweise in .faq-portal__header, das seinen eigenen
   margin-bottom regelt, hier gibt es diesen Wrapper nicht. Höhere Spezifität
   (0,2,1) als ".entry-content h2" (0,1,1) nötig, sonst gewinnt weiterhin
   dessen 64px margin-top (var(--space-8)) — hier reicht ein knapper Abstand,
   das Badge ist keine eigene Artikel-Sektion. */
.entry-content .faq-hub-eyebrow + h2 {
  margin-top: var(--space-2);
}
/* Abstand Breadcrumbs -> Badge (User-Fund 2026-08-23, zweite Runde): wirkten
   zu eng zusammen. .breadcrumbs bringt selbst nur margin-bottom: var(--space-4)
   mit (16px, gedacht für den allgemeinen Fall Breadcrumbs -> H1 auf jeder
   anderen Seite — dort unverändert gelassen, das war nicht die Beschwerde).
   Adjacent-Sibling-Margins kollabieren auf den größeren Wert, kein Aufsummieren
   — dieser Wert ersetzt effektiv die 16px hier, statt sie zu addieren. */
.entry-content .breadcrumbs + .faq-hub-eyebrow {
  margin-top: var(--space-6);
}

/* Eine Q&A-Übersichtskarte: Frage-Link + Antworten-Zähler, Vorschautext,
   Avatar + Autorenname. */
.faq-hub-item {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.faq-hub-item:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
/* Zähler schwimmt rechts auf der ersten Zeile der Frage (User-Fund
   2026-08-23: "N Antworten" stand als eigener Absatz UNTER der Frage statt
   daneben) — float statt flex, damit lange Fragen ganz normal mehrzeilig
   umbrechen und der Zähler dabei nie überlappt (User-Anweisung: Frage nicht
   abschneiden/ellipsis, sondern Platz für den Zähler freihalten). */
.faq-hub-item__question {
  margin: 0 0 var(--space-2);
}
.faq-hub-item__count {
  float: right;
  margin-left: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  color: var(--color-ink-faint);
  white-space: nowrap;
}
.faq-hub-item__q-link {
  color: var(--color-ink);
  font-weight: 600;
  text-decoration: none;
}
.faq-hub-item__q-link:hover { color: var(--color-accent); }
.faq-hub-item__body {
  margin: 0;
  color: var(--color-ink-soft);
}
/* Avatar + Name in einer Zeile (User-Fund 2026-08-23: Name stand als eigener
   Absatz unter dem Avatar). Eigene, engere Bild-Regeln statt der
   allgemeinen ".entry-content .wp-block-image"-Regel (32px Außenabstand,
   Foto-Rahmen/-Radius) — hier ist es ein kleiner runder Avatar, kein
   Artikelfoto. */
.faq-hub-item__author {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.faq-hub-item__author figure.wp-block-image {
  margin: 0;
  flex-shrink: 0;
}
.faq-hub-item__author figure.wp-block-image img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--color-border-strong);
}
.faq-hub-item__author-name {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  color: var(--color-ink-soft);
}
/* Reguläre FAQ-кластер-Q&A-Seiten (nicht die Hub-Seiten oben): Avatar+Name
   größer und mit mehr Abstand zueinander (User-Fund 2026-08-23, vierte
   Runde) — eigene Zusatzklasse statt die Basisregeln selbst zu ändern,
   damit die schon abgenommene Hub-Optik unverändert bleibt (s.
   nir_style_faq_leaf_author in nir-articles.php für die Begründung). */
.faq-hub-item__author--leaf {
  gap: var(--space-3);
  /* Abstand zum folgenden Antworttext (User-Fund 2026-08-23, sechste Runde:
     Avatar-Zeile und Antworttext klebten aneinander) — bewusst klein
     gehalten (space-2), nicht der größere space-3 vom horizontalen Gap
     oben, wie ausdrücklich verlangt ("не увеличивать сильно"). */
  margin-bottom: var(--space-2);
}
.faq-hub-item__author--leaf figure.wp-block-image img {
  width: 40px;
  height: 40px;
}
.faq-hub-item__author--leaf .faq-hub-item__author-name {
  font-size: var(--fs-small);
}

/* "Antwort hinzugefügt: <Datum>" (s. nir_style_faq_leaf_answer_date) —
   kleiner, kursiv, etwas heller als der übrige Fließtext (User-Fund
   2026-08-23, sechste Runde). --color-ink-soft statt dem noch helleren
   --color-ink-faint: "чуть светлее, не сильно" — derselbe Farbton, den
   Autorennamen/.entry-meta an anderer Stelle schon als "gedämpfter Text"
   verwenden, kein neuer, noch blasserer Ton. */
.faq-hub-item__date {
  font-size: var(--fs-small);
  font-style: italic;
  color: var(--color-ink-soft);
}

/* User-Fund 2026-08-23, sechste Runde — korrigiert die vorherige Fassung:
   NICHT mehr jede Antwort-/Frage-Überschrift einzeln einfassen (sah falsch
   aus, Hintergrund saß direkt auf dem Überschriftstext) — stattdessen NUR
   der ganze "Frage:"-Block (Label + wiederholtes H3 + Fragetext + Avatar
   des Fragestellers, s. nir_style_faq_leaf_question_block) als EINE Fläche.
   Antwort-Überschriften selbst (das H2 der besten Antwort, jedes weitere
   H3) bleiben bewusst ganz ohne Hintergrund, normaler Fließtext — dafür ist
   hier keine Regel nötig, sie waren nie in einer .faq-hub-question-Box.
   Derselbe Hintergrund-Look wie .toc (dieselben Farb-/Radius-Tokens,
   User-Anweisung: "wie das schon bestehende Siehe-auch-Muster"). Kinder
   bekommen eigene, engere Abstände statt ihrer generischen Artikel-Ränder
   (sonst unnötig viel Luft innerhalb der Box) — erstes Kind ohne
   margin-top, damit es nicht von der Box-Oberkante wegrückt. */
.faq-hub-question {
  background: var(--color-paper-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-top: var(--space-7);
}
.faq-hub-question > * {
  margin-top: var(--space-2);
}
.faq-hub-question > *:first-child {
  margin-top: 0;
}
/* Gemeinsamer gedämpfter Label-Look für alle kurzen, großgeschriebenen
   Struktur-Beschriftungen auf FAQ-кластер-Q&A-Seiten ("Frage:", "Beste
   Antwort:", "Weitere Antworten auf diese Frage:") — User-Anweisung
   2026-08-23, neunte Runde: "Beste Antwort:" auf denselben Stil wie die
   neue "Weitere Antworten..."-Beschriftung bringen. Vorher dreimal
   dieselben fünf Deklarationen dupliziert (.faq-hub-question__label,
   .faq-hub-answers-divider, "Beste Antwort:" noch ganz ungestylt) — jetzt
   EIN gemeinsamer Basisstil, die einzelnen Klassen bleiben als Marker für
   ihre eigene Position/ihren eigenen Abstand bestehen (s. unten). */
.faq-hub-label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  color: var(--color-ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* NEUES Design-Element, KEINE Datenwiederherstellung (User-Anweisung
   2026-08-23, achte Runde — s. nir_style_faq_leaf_answers_divider in
   nir-articles.php für die Recherche, die bestätigt hat, dass diese
   Beschriftung auf der alten Seite nirgends existiert). */
.faq-hub-answers-divider {
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

/* "Beste Antwort:" (User-Fund 2026-08-23, neunte Runde: bislang ganz
   ungestylter Fließtext, jetzt derselbe .faq-hub-label-Look) — knapper
   Abstand zur folgenden Avatar-Zeile, dieselbe enge Beziehung wie
   "Frage:" zu seiner Überschrift innerhalb der Box. */
.faq-hub-item__best-label {
  margin-bottom: var(--space-2);
}

/* Trennlinie zwischen dem Text der besten Antwort und dem folgenden
   Partner-CTA-Block (User-Fund 2026-08-23, neunte Runde: "Könnte
   ebenfalls nützlich sein..." o.ä., aus einem shortcode- ODER einem
   inline-text-editor-Widget stammend — beide rendern identisch ab hier,
   s. nir_style_faq_leaf_best_answer_divider) — neutraler heller Rahmenton,
   dieselbe Farbe wie schon anderswo für dezente Trennlinien (.toc,
   .faq-portal__item). */
.faq-hub-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-6) 0;
}

/* User-Fund 2026-08-23, siebte Runde: kein wahrnehmbarer Abstand zwischen
   den einzelnen Antwort-Blöcken (z.B. "Ostufer deutlich komfortabler als
   Westufer" -> "Ohne Fähren länger, aber interessanter"). Die generische
   ".entry-content h2/h3"-Marge war technisch da (space-8/space-6, keine
   überschreibende Regel gefunden), wirkte neben der gedämpften Datumszeile
   davor aber zu schwach als sichtbare Abschnittsgrenze. Eigene, größere Marge
   NUR für diese Antwort-Überschriften (s. nir_style_faq_leaf_answer_heading)
   statt die generische Regel für alle h2/h3 site-weit zu ändern — space-8
   für BEIDE Ebenen einheitlich (nicht wie generisch h2=space-8/h3=space-6),
   bewusst der größte in dieser Design-System üblicherweise für Struktur-
   Trennungen verwendete Wert (User-Anweisung: "покрупнее"). */
/* .entry-content prefix (statt der bloßen Klasse) gibt (0,2,0) Spezifität —
   schlägt ".entry-content h2/h3" (0,1,1), kein !important nötig, gleiches
   Prinzip wie ".faq-portal .faq-portal__title" weiter oben. */
.entry-content .faq-hub-answer-heading {
  margin-top: var(--space-8);
}

/* ========================================================================= */
/* Related articles block ("Nützliche Artikel zu diesem Thema")             */
/* Rendered server-side by nir/related-articles (nir-articles.php).         */
/* ========================================================================= */

.related-block { margin-block: var(--space-8); }
.related-block__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.related-block h2 { font-size: var(--fs-h3); margin: 0; }

.related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 900px) { .related-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .related-list { grid-template-columns: 1fr; } }

.related-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--color-paper-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.related-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-card);
}
.related-card__thumb {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-paper-deep);
}
.related-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  border-radius: 0;
  border: none;
}
.related-card__body { padding: var(--space-4); }
.related-card__tag { margin-bottom: var(--space-3); }
.related-card__title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-ink);
  margin: 0;
}
.related-card:hover .related-card__title { color: var(--color-accent-dark); }

/* ========================================================================= */
/* Site chrome — Header / Footer / Share buttons                            */
/* Built 2026-08-24 as a front-page-only preview (User-Anweisung) — the      */
/* test environment never had a real header/footer/share block configured,  */
/* it was only ever used to verify the Elementor->Gutenberg content         */
/* transform, so GP's untouched defaults ("My Blog", the auto page-menu,    */
/* "Built with GeneratePress") were showing through. These three            */
/* components are rendered by PHP                                          */
/* (nir_site_chrome_header/_footer/_share_buttons in nir-articles.php).     */
/* 2026-08-25: design approved, rolled out site-wide on production          */
/* (gate switched from is_front_page() to HTTP_HOST ===                    */
/* 'nachitalienreisen.de' — test.croatias.pl deliberately excluded, see     */
/* nir_site_chrome_preview_active() in nir-articles.php).                  */
/* ========================================================================= */

/* User-Fund 2026-08-24 (Vorschau-Feedback, zweite Runde): Hintergrund jetzt
   derselbe Ton wie der Footer (--color-paper-deep, statt dem helleren
   --color-paper) für optische Parität oben/unten — dieselbe Randfarbe
   (--color-border-strong) wie der Footer aus demselben Grund. Sticky, damit
   die Navigation beim Scrollen erreichbar bleibt; z-index hoch genug, um
   über normalem Artikel-Inhalt zu bleiben (nichts sonst im System nutzt
   einen höheren Wert). */
.nir-site-header {
  background: var(--color-paper-deep);
  border-bottom: 1px solid var(--color-border-strong);
  position: sticky;
  top: 0;
  z-index: 50;
}
.nir-site-header__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.nir-logo {
  display: block;
  text-decoration: none;
  line-height: 1.15;
}
/* Wordmark aus dem freigegebenen Open-Design-Mockup (nachitalienreisen-
   guide-design/index.html) übernommen, nicht neu erfunden: "nach" normal,
   "italienreisen" fett + Akzentfarbe, ".de" wieder normal — dieselbe
   Behandlung jetzt auch im Footer (s. .nir-footer-brand unten), vorher
   stand dort ein anderer Wortlaut ("Nach Italien Reisen" als ein Stück). */
.nir-logo__word {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 400;
  color: var(--color-ink);
}
.nir-logo__word--accent {
  font-weight: 700;
  color: var(--color-accent);
}
.nir-logo__tagline {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  color: var(--color-ink-soft);
  margin-top: 2px;
}
.nir-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}
.nir-nav a {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--color-ink);
  text-decoration: none;
}
.nir-nav a:hover { color: var(--color-accent); }

.nir-site-footer {
  background: var(--color-paper-deep);
  border-top: 1px solid var(--color-border-strong);
  margin-top: var(--space-8);
}
.nir-site-footer__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding: var(--space-7) var(--space-6) var(--space-6);
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: var(--space-6);
}
@media (max-width: 640px) {
  .nir-site-footer__inner { grid-template-columns: 1fr; }
}
/* Selbe Wordmark-Klassen wie im Header (.nir-logo__word/--accent), nur
   knapp kleiner fürs Footer-Layout — kein eigener Farb-/Gewicht-Wert hier,
   damit beide Stellen garantiert gleich bleiben. */
.nir-footer-brand .nir-logo__word { font-size: 1.125rem; }
.nir-footer-tagline {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  color: var(--color-ink-soft);
  margin: var(--space-2) 0 0;
}
/* .eyebrow (defined above) doubles as the footer column title — same look
   as every other short uppercase mono label in this system (.toc__title,
   .faq-hub-label), no reason for a separate rule. */
.nir-footer-col ul {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
}
.nir-footer-col li { margin-top: var(--space-2); }
.nir-footer-col a {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
  text-decoration: none;
}
.nir-footer-col a:hover { color: var(--color-accent); }
.nir-site-footer__bottom {
  max-width: 1200px;
  margin-inline: auto;
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  color: var(--color-ink-faint);
}

/* Share buttons — new component, not a data restoration (the old widget
   only ever held platform links, no content to preserve — see migrate.mjs
   skip list). Reuses .faq-hub-label for the "Diesen Artikel teilen:" line,
   same muted structural-label look already established. */
.share-buttons {
  margin-block: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.share-buttons__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
/* User-Fund 2026-08-24, zweite Runde: sollen wie auf der alten Seite
   aussehen — rechteckige Buttons in den echten Plattform-Marken­farben,
   nicht die runden einfarbigen Icons von vorher. Diese Farben sind
   bewusst NICHT Teil der Design-System-Tokens (--color-accent etc.) —
   das sind fremde Markenfarben (Facebook/Twitter/WhatsApp/Telegram/
   Pinterest), keine Werte, die zu unserer eigenen Palette gehören,
   deshalb hier als Klassen-eigene Literale statt Custom Properties.
   "Icon" ist ein einfaches Monogramm im Kreis statt einem vollen
   Marken-SVG-Pfad — ohne visuelle Prüfmöglichkeit in dieser Session
   war das der zuverlässigere Weg, kein Risiko eines verzerrten Pfads. */
.share-buttons__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
  border-radius: var(--radius-md);
  border: none;
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  transition: filter 0.15s ease;
}
.share-buttons__btn:hover { filter: brightness(0.92); }
.share-buttons__btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
}
.share-buttons__btn--facebook  { background: #3B5998; }
.share-buttons__btn--twitter   { background: #1DA1F2; }
.share-buttons__btn--whatsapp  { background: #25D366; }
.share-buttons__btn--telegram  { background: #0088CC; }
.share-buttons__btn--pinterest { background: #BD081C; }

/* Hides GP's default header/footer wherever .nir-chrome-preview is active,
   so the .nir-site-header/.nir-site-footer (injected via wp_body_open/
   wp_footer, see nir-articles.php) are the only ones visible. 2026-08-25:
   design approved, rolled out site-wide on production (nir_site_chrome_
   preview_active() now gates on HTTP_HOST, not is_front_page() — see that
   function's own comment in nir-articles.php). Deliberately did NOT switch
   this to the remove_action() approach used for the featured-image hooks —
   that would mean disabling generate_footer's generate_construct_footer_
   widgets too, untested territory not asked for in this rollout — the
   CSS-hide mechanism itself was already proven on the front page, only its
   trigger condition changed. Revisit if GP's own header/footer markup ever
   needs to stop rendering at all (not just visually hidden). */
body.nir-chrome-preview .site-header,
body.nir-chrome-preview .site-footer { display: none; }