/* WordPress-only additions to LP System 2. The three promoted stylesheets stay
   byte-identical to the design repo; everything a live page needs on top lives
   here. No new color pairs: petrol on paper is 11.97:1 (design-sys-LP.md 5.2). */

/* Skip link (accessibility.md rule 16). Off-screen until keyboard focus. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--paper); color: var(--petrol);
  font-family: var(--font-body); font-weight: 600; font-size: 15px; line-height: 1;
  padding: 14px 20px; border: 1px solid var(--gold-soft); text-decoration: none;
}
.skip-link:focus { left: 0; }

/* Text hero for guide pages (variation of design-sys-LP.md 6.4). A guide never
   wears the showroom photography, so until its own motif exists the hero runs
   without media: paper-warm surface, ink text, gold drop cap. Reused pairs only
   (ink 17.13:1, ink-soft 9.38:1 on paper-warm, re-measured 2026-08-03). */
.hero--text { min-height: 0; background: var(--paper-warm); }
/* Vertical paddings stay longhand: wp.css loads last, and a shorthand here would zero
   the horizontal hero gutters the theme appends (design-sys-LP.md 6.4 Grid). */
.hero--text .hero__inner { color: var(--ink); padding-top: 84px; padding-bottom: 78px; }
.hero--text .hero__title { color: var(--ink); text-shadow: none; }
.hero--text .hero__lead { color: var(--ink-soft); text-shadow: none; }
.hero--text .hero__lead strong { color: var(--ink); }
.hero--text .hero__lead::first-letter { color: var(--gold); text-shadow: none; }
.hero--text .facts { color: var(--ink-soft); }
.hero--text .facts li + li::before { color: var(--gold); }
@media (max-width: 768px) {
  .hero--text { min-height: 0; }
  .hero--text .hero__inner { padding-top: 56px; padding-bottom: 52px; }
}

/* Petrol hero band (variation of design-sys-LP.md 6.4, owner 2026-08-18). Same reasoning as
   .hero--text: no motif, no borrowed photo. Where the guide wanted the page to open quietly, the
   contact page opens on the system's dark band, the way the hub does (6.20), so the entry point
   reads as chrome rather than as another paper section. Only the surface changes: the base .hero
   is already the on-dark treatment, so white title, #fbf5ea lead, gold-light drop cap and facts
   all carry over unmeasured pairs of their own. The text shadows go, though: they exist to lift
   type off photography, and on a flat band they are just blur. */
.hero--petrol { min-height: 0; background: var(--petrol); }
/* Longhand for the same reason as .hero--text: wp.css loads last and a shorthand would zero the
   horizontal hero gutters the theme appends (design-sys-LP.md 6.4 Grid). */
.hero--petrol .hero__inner { padding-top: 84px; padding-bottom: 78px; }
.hero--petrol .hero__title,
.hero--petrol .hero__lead,
.hero--petrol .hero__lead::first-letter { text-shadow: none; }
@media (max-width: 768px) {
  .hero--petrol .hero__inner { padding-top: 56px; padding-bottom: 52px; }
}

/* Advisor with portrait (variation of design-sys-LP.md 6.9, owner-requested):
   photo left of the quote, stacked below 768px. Photo only, no new colors. */
.advisor--photo {
  display: grid; grid-template-columns: 300px 1fr; gap: 44px;
  align-items: start; max-width: 900px;
}
.advisor__photo { margin: 0; }
.advisor__photo img { width: 100%; height: auto; }
@media (max-width: 768px) {
  .advisor--photo { grid-template-columns: 1fr; gap: 26px; }
  .advisor__photo { max-width: 220px; }
}

/* Long-lead hero measure (design-sys-LP.md 6.4 Measure). The theme's desktop measure of
   54ch is tuned to the showroom leads (about 245 characters, five lines). The guide lead
   runs about 330 characters and would take six lines at that measure, so it opts into
   62ch at every width instead: five lines on desktop and a wider block, the render the
   owner approved 2026-08-03. Both counts satisfy the drop-cap rule, this is a refinement,
   not a fix. (The former .hero--guide-flat variation lived here until the owner made the
   flat hero canonical for every page; its other rules moved into the promoted theme.) */
.hero--lead-long .hero__lead { max-width: 62ch; }

/* Material-guide sources, metadata and the sanctioned rg-compare decision block. */
.mv-rg-sources { max-width: 780px; margin: 0; padding-left: 1.35rem; color: var(--ink-soft); }
.mv-rg-sources li { padding: 7px 0; }
.mv-rg-sources a { color: var(--petrol); }
.mv-rg-meta { max-width: 62ch; margin-top: 28px; color: var(--ink-soft); font-size: 14px; }
.rg-compare { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; max-width: 900px; }
.rg-compare > article { border-top: 1px solid var(--gold-soft); padding-top: 18px; }
.rg-compare h3 { margin: 0 0 8px; font-family: var(--serif); font-size: 24px; line-height: 1.15; color: var(--petrol); }
.rg-compare p { margin: 0; color: var(--ink-soft); line-height: 1.55; }

/* Shared, crawlable material-guide cards. CSS alone handles 4/2/1 columns.
   Owner report 2026-08-24: the cards read as too rough next to the rest of the page. They shipped
   as a hairline border-top over bare paper while every other card in the system (rg-link-cards,
   rg-material-rows, the promoted .field control at theme-boutique-serif.css 394) is a white box
   inside a full 1px --gold-soft border that deepens to --gold on hover. The card now wears that
   same surface, and the title link drops its browser-default underline for the component idiom
   (none, underline on hover) the theme uses everywhere else.
   The media corners carry a 6px radius, the one sanctioned rounding in the system and Ratgeber
   card imagery only: boxes, buttons and controls stay square (core.md Cards, owner 2026-08-24).
   It is a literal, not a token, because theme-boutique-serif.css is frozen under PROMOTED.sha256
   and this file is the accepted-variation home. */
.rg-related__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 36px; }
.rg-related__card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--gold-soft); padding: 18px;
}
.rg-related__media { display: block; margin: 0 0 18px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; }
.rg-related__media picture { display: block; width: 100%; height: 100%; }
.rg-related__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rg-related__card h3 { margin: 0 0 10px; font-family: var(--serif); font-size: 24px; line-height: 1.15; color: var(--petrol); }
.rg-related__card h3 a { color: inherit; text-decoration: none; }
.rg-related__card p { margin: 0 0 20px; color: var(--ink-soft); line-height: 1.55; }
.rg-related__more { margin-top: auto; color: var(--petrol); font-weight: 600; text-underline-offset: 4px; }
/* focus-within, not focus-visible: the card is not the link, it holds three of them (media, title,
   Weiterlesen), so the 5.8 ring stays on whichever child has focus and the border follows it. */
.rg-related__card:hover, .rg-related__card:focus-within { border-color: var(--gold); }
.rg-related__card:hover h3 a, .rg-related__card:focus-within h3 a { text-decoration: underline; }
.rg-related .cta-row { margin-top: 38px; }
@media (max-width: 1024px) {
  .rg-related__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .rg-compare { grid-template-columns: 1fr; gap: 22px; }
  .rg-related__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* The admin bar is fixed at the top for logged-in users; keep the sticky header clear of it. */
body.admin-bar .site-head { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .site-head { top: 46px; }
}

/* Weglot backstop. With the switcher placeholders present the plugin skips its
   default bottom-of-body button, but if one is ever appended anyway, keep the
   unstyled aside out of the render. Plugin-forced, so it lives here. */
aside.weglot-default { display: none; }

/* Select variant of the 6.18 field control (design-sys-LP.md 6.18, GAP-01). The /kontakt/ form
   is the first page to put a select through the promoted rule, which was written for input and
   textarea. Chrome pins a select to a 40px intrinsic box, so 6.18's padding never reaches it: the
   control renders 6px shorter than its siblings and clips its own option text. height:auto hands
   the box back to that padding and lands on the inputs' 46px without repeating a single value.
   Stripping the native appearance also strips the dropdown affordance, so the chevron is drawn
   here. Its stroke is a literal because a data URI cannot read --gold (5.1); keep the two in sync
   if that token ever moves. */
select.field__control {
  appearance: none; -webkit-appearance: none;
  height: auto;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23AE8A56' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px 7px;
}

/* Link cards for the /ratgeber/ hub (rat-hub.md, specified 2026-08-24). One <a> per card so the
   whole surface is the target; white card on the paper band, matching the theme's own sec--white
   idiom. Title petrol on white, copy ink-soft; gold stays decorative (DEBT-01) as the border.
   The optional __art illustration slot is reserved in the spec; its CSS lands with the first
   artwork, not before. */
.rg-link-cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
/* Found in review 2026-08-24: the Wissen cards carry real blog titles, and one long compound
   ("Matratzenschoner") sets a grid item's automatic minimum, which pushes the 1fr track wider
   than its share and scrolls the whole page sideways by 25px at an 800px viewport. A grid item
   defaults to min-width:auto, so the track can never shrink below its longest word unless this
   is said. The words then need somewhere to break, hence the wrap on the title. */
.rg-link-cards > li { min-width: 0; }
.rg-link-cards a {
  display: block; height: 100%;
  background: #fff; border: 1px solid var(--gold-soft);
  padding: 22px 24px; text-decoration: none;
}
.rg-link-cards h3 {
  margin: 0 0 8px; font-family: var(--serif);
  font-size: 22px; line-height: 1.2; color: var(--petrol);
  overflow-wrap: break-word;
}
.rg-link-cards p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.55; }
.rg-link-cards a:hover, .rg-link-cards a:focus-visible { border-color: var(--gold); }
.rg-link-cards a:hover h3, .rg-link-cards a:focus-visible h3 { text-decoration: underline; }
@media (max-width: 768px) {
  .rg-link-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .rg-link-cards { grid-template-columns: 1fr; }
}

/* First in-page anchor consumer (rat-hub.md Anchor behavior). The theme smooth-scrolls and the
   header is sticky, so without this every #anchor lands under the header. The header is
   content-driven and grows as the nav wraps: measured on the hub 2026-08-24 at 79px desktop,
   139px from 481 to 768 and 172px at 480 and below, so each margin is that height plus
   breathing room. Scoped to main so chrome ids stay untouched. */
main [id] { scroll-margin-top: 96px; }
@media (max-width: 768px) {
  main [id] { scroll-margin-top: 160px; }
}
@media (max-width: 480px) {
  main [id] { scroll-margin-top: 192px; }
}

/* Material rows for the /ratgeber/materialien/ hub (rat-mat.md rg-material-rows, specified
   2026-08-24). One <a> per row, image left and text right, whole surface the link target,
   mirroring the rg-link-cards idiom. The image column widths (220/160/96) are duplicated in the
   manifest sizes attribute and the template; change them together. The list caps at 800px
   because the page measure (62ch) is too narrow for image plus text. */
.rg-material-rows {
  list-style: none; margin: 0; padding: 0; max-width: 800px;
  display: grid; gap: 18px;
}
.rg-material-rows a {
  display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: center;
  background: #fff; border: 1px solid var(--gold-soft);
  padding: 18px; text-decoration: none;
}
.rg-material-rows figure { margin: 0; }
.rg-material-rows img { display: block; width: 100%; height: auto; border-radius: 6px; }
.rg-material-rows h3 {
  margin: 0 0 6px; font-family: var(--serif);
  font-size: 22px; line-height: 1.2; color: var(--petrol);
}
.rg-material-rows p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.55; }
.rg-material-rows a:hover, .rg-material-rows a:focus-visible { border-color: var(--gold); }
.rg-material-rows a:hover h3, .rg-material-rows a:focus-visible h3 { text-decoration: underline; }
@media (max-width: 768px) {
  .rg-material-rows a { grid-template-columns: 160px 1fr; gap: 18px; }
}
@media (max-width: 480px) {
  .rg-material-rows a { grid-template-columns: 96px 1fr; gap: 14px; padding: 12px 14px; }
  .rg-material-rows h3 { font-size: 19px; }
}

/* Material split for the guide pages (rat-mat.md rg-material-split, specified 2026-08-23, first
   built 2026-08-24). One illustrative material image beside the explanatory text: image left,
   text right, stacked below 768px with the figure first so the motif still introduces the block.
   The image carries the same 6px radius as the rg-related card media, the one sanctioned rounding
   for Ratgeber imagery. The caption is where the 10.3a disclosure of a generated motif lives, so
   it is part of the component and not optional styling. Text column keeps the page measure. */
.rg-material-split { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.rg-material-split figure { margin: 0; }
.rg-material-split img { display: block; width: 100%; height: auto; border-radius: 6px; }
.rg-material-split figcaption { margin-top: 10px; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.rg-material-split__text > :first-child { margin-top: 0; }
@media (max-width: 768px) {
  .rg-material-split { grid-template-columns: 1fr; gap: 24px; }
}

/* Owner report 2026-08-24: on the material guides the shop buttons sit pressed into the compare
   text. The promoted .cta-row carries no vertical margin of its own, so give it clear air only
   where it directly follows a compare grid. */
.rg-compare + .cta-row { margin-top: 36px; }