/* ==========================================================================
   RUZIC FACILITY SERVICES — DESIGN SYSTEM
   Elementor holds structure and content; this file holds the design.
   Tokens marked (RP) are measured from ruzicprojects.com.
   ========================================================================== */

/* --- 1. TOKENS ---------------------------------------------------------- */
:root{
  --rz-cream:     #FBFAF5;            /* (RP) warm base surface             */
  --rz-cream-2:   #F4F1E9;            /* warm secondary band                */
  --rz-ink:       #131714;            /* (RP) near-black / anthracite       */
  --rz-ink-2:     #4A504C;            /* secondary text                     */
  --rz-ink-3:     #7C837E;            /* kickers, labels, meta              */
  --rz-line:      rgba(19,23,20,.16);
  --rz-line-soft: rgba(19,23,20,.09);
  --rz-on-ink:    #FBFAF5;
  --rz-on-ink-2:  rgba(251,250,245,.66);
  --rz-on-ink-3:  rgba(251,250,245,.42);
  --rz-line-ink:  rgba(251,250,245,.20);

  --rz-ff-display: "Work Sans", "Helvetica Neue", Arial, sans-serif;
  --rz-ff-text:    "Reddit Sans", "Helvetica Neue", Arial, sans-serif;

  --rz-gutter: 60px;                  /* (RP) 60px page gutter              */
  --rz-sec:    clamp(64px, 6.4vw, 104px);
}

/* --- 2. BASE ------------------------------------------------------------ *
   Scoped away from the gold pages with :not(.rzg-gold). Those pages run the
   client's own reference stylesheet (assets/gelb.css, shipped byte for byte)
   which brings its own base — white ground, Arial, sentence-case headings.
   These two rules are the only ones in sections 1-9 that are bare tag
   selectors, so they are the only ones that would otherwise reach a page
   they no longer own. See section 10 at the foot of this file.            */
body:not(.rzg-gold){
  background:var(--rz-cream);
  color:var(--rz-ink);
  font-family:var(--rz-ff-text);
  font-size:17px;
  line-height:1.76;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
body:not(.rzg-gold) h1,body:not(.rzg-gold) h2,body:not(.rzg-gold) h3,
body:not(.rzg-gold) h4,body:not(.rzg-gold) h5,body:not(.rzg-gold) h6{
  font-family:var(--rz-ff-display);
  text-transform:uppercase;
  color:var(--rz-ink);
  margin:0;
  text-wrap:balance;
}
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--rz-ink); outline-offset:3px; }

/* The page measure. Owned here rather than by Elementor's boxed-container
   variables, so the grid stays predictable no matter how a container is set. */
.rz-wrap{
  width:100%; max-width:1240px; margin-inline:auto;
  padding-inline:var(--rz-gutter);
}
.rz-wrap--wide{ max-width:1440px; }
/* A form reads better as one focused column than stretched across the full
   page measure. */
.rz-wrap--narrow{ max-width:760px; }

/* Elementor gives every container a 10px inline padding by default. Nested
   three deep that compounds into a ragged left margin (44 / 54 / 64px). The
   wrap owns the gutter; every container inside it owns none, and the few that
   need their own padding set it explicitly further down. */
.rz-header, .rz-hero, .rz-section, .rz-footer,
.rz-header .e-con,
.rz-hero .e-con,
.rz-section .e-con,
.rz-footer .e-con{ padding-inline:0; }
.e-con.rz-wrap{ padding-inline:var(--rz-gutter); padding-block:0; }
.rz-header, .rz-hero, .rz-section, .rz-footer,
.rz-section > .rz-wrap, .rz-footer > .rz-wrap{ gap:0; }

/* --- 3. TYPE SCALE ------------------------------------------------------ *
   Divergence from RP: headings sit at 500/600, not 300 light. Grounded and
   workmanlike rather than gallery-elegant.                                 */
.rz-display .elementor-heading-title,
.rz-display h1,.rz-display h2{
  font-size:clamp(2.5rem,5.9vw,5.5rem); font-weight:500;
  line-height:.96; letter-spacing:-.004em;
}
.rz-h2 .elementor-heading-title,
.rz-h2 h2,.rz-h2 h3{
  font-size:clamp(1.85rem,3.9vw,3.4rem); font-weight:600;
  line-height:1.03; letter-spacing:-.002em;
}
.rz-h3 .elementor-heading-title,
.rz-h3 h3,.rz-h3 h4{
  font-size:clamp(1.1rem,1.35vw,1.3rem); font-weight:600;
  line-height:1.25; letter-spacing:.035em;
}

/* Kicker / small tracked label. Never a numeral unless the content is ordered. */
.rz-kicker .elementor-heading-title,
.rz-kicker p,.rz-label .elementor-heading-title{
  font-family:var(--rz-ff-text); font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.2em; color:var(--rz-ink-3);
  line-height:1; margin:0;
}
.rz-label .elementor-heading-title{ letter-spacing:.16em; }

.rz-lead p,.rz-lead{ font-size:clamp(1.1rem,1.35vw,1.32rem); line-height:1.62; }
.rz-body p{ margin:0 0 1.1em; }
.rz-body p:last-child{ margin-bottom:0; }
.rz-muted p,.rz-muted .elementor-heading-title{ color:var(--rz-ink-2); }
.rz-measure{ max-width:62ch; }

/* --- 4. BUTTONS — square, no radius (RP) -------------------------------- */
/* Scoped like the rest of the cream system (2026-09-24): unscoped, this
   handed every gold-page button Reddit Sans the moment the generated
   stylesheet stopped forcing `font: inherit` on them. */
body:not(.rzg-gold) .elementor-button{
  font-family:var(--rz-ff-text); font-size:13px; font-weight:700;
  text-transform:uppercase; letter-spacing:.14em; line-height:1;
  padding:18px 34px; border-radius:0; border:1px solid var(--rz-ink);
  background-color:var(--rz-ink); color:var(--rz-cream);
  transition:background-color .22s ease,color .22s ease,border-color .22s ease;
}
.elementor-button:hover,.elementor-button:focus{
  background-color:transparent; color:var(--rz-ink); border-color:var(--rz-ink);
}
/* Outline on cream */
.rz-btn-ghost .elementor-button{ background-color:transparent; color:var(--rz-ink); }
.rz-btn-ghost .elementor-button:hover{ background-color:var(--rz-ink); color:var(--rz-cream); }
/* Solid on ink */
.rz-btn-light .elementor-button{
  background-color:var(--rz-cream); color:var(--rz-ink); border-color:var(--rz-cream);
}
.rz-btn-light .elementor-button:hover{ background-color:transparent; color:var(--rz-cream); }
/* Outline on ink */
.rz-btn-ghost-light .elementor-button{
  background-color:transparent; color:var(--rz-cream); border-color:var(--rz-line-ink);
}
.rz-btn-ghost-light .elementor-button:hover{
  background-color:var(--rz-cream); color:var(--rz-ink); border-color:var(--rz-cream);
}

/* --- 5. SURFACES -------------------------------------------------------- */
.rz-ink-surface{ background-color:var(--rz-ink); color:var(--rz-on-ink); }
.rz-ink-surface h1,.rz-ink-surface h2,.rz-ink-surface h3,
.rz-ink-surface .elementor-heading-title{ color:var(--rz-on-ink); }
.rz-ink-surface .rz-kicker .elementor-heading-title,
.rz-ink-surface .rz-label .elementor-heading-title{ color:var(--rz-on-ink-3); }
.rz-ink-surface p{ color:var(--rz-on-ink-2); }
.rz-band{ background-color:var(--rz-cream-2); }
.rz-section{ padding-block:var(--rz-sec); }

/* --- 6. HERO — asymmetric split ----------------------------------------- *
   Deliberately not RUZIC Projects' full-bleed dark overlay: daylight, and a
   portrait crop that suits the vertical facade of a Zinshaus.              */
.rz-hero.e-con{ border-bottom:1px solid var(--rz-line); padding:0; }
/* Top-aligned, and deliberately tighter than it was.
   The column is content-sized, not 82vh — the copy is what makes the hero
   tall, so vertical *alignment* alone did nothing for the client's "I have to
   scroll to see it": at 1440x860 the copy stack measured 969px against 771px
   of space below the header. The right padding is the important number here:
   at the old 5vw the two CTA buttons missed fitting on one line by 7px and
   wrapped, which alone cost ~77px of height and looked unintentional. */
.rz-hero__copy.e-con{
  padding:clamp(40px,4.2vw,64px) clamp(32px,3vw,56px) clamp(32px,3vw,48px) var(--rz-gutter);
  justify-content:flex-start;
}
.rz-hero__fig.e-con{ padding:0; }
/* The seam between the text panel and the photo: a soft cream fade instead
   of the earlier hard 1px line, per client request. Scoped to the hero
   image only — every other photo on the site keeps a plain edge. */
.rz-hero__fig .rz-figure.e-con{ position:relative; }
.rz-hero__fig .rz-figure.e-con::before{
  content:""; position:absolute; z-index:1; pointer-events:none;
  top:0; left:0; bottom:0; width:clamp(48px,7vw,140px);
  background:linear-gradient(to right, var(--rz-cream) 0%, rgba(251,250,245,0) 100%);
}
/* Same idea again on the bottom edge: the photograph used to stop dead on
   the section's hairline, which reads as an abrupt cut where the left half
   of the hero simply runs into cream. Fading the last band of the image into
   the cream lets both halves end the same way. The hairline itself stays —
   .rz-pagehead on every subpage deliberately mirrors it. */
.rz-hero__fig .rz-figure.e-con::after{
  content:""; position:absolute; z-index:1; pointer-events:none;
  left:0; right:0; bottom:0; height:clamp(64px,9vw,150px);
  background:linear-gradient(to top, var(--rz-cream) 0%, rgba(251,250,245,0) 100%);
}
.rz-sub p{
  font-size:clamp(1.05rem,1.3vw,1.28rem); line-height:1.6;
  color:var(--rz-ink-2); max-width:34ch;
}

/* --- 6b. HERO: FIT THE WHOLE THING ABOVE THE FOLD ----------------------- *
   Client requirement: on a normal laptop the entire hero — headline, sub-
   line, both buttons, the service-area line and the photograph — has to be
   visible without scrolling. Measured at 1440x800 the copy stack was 867px
   tall against 711px of room below the header, so it overran by 156px.
   The compression is bound to viewport HEIGHT, not width: a large display
   keeps the original, generous type scale, and only short screens step
   down. The margins here are Elementor element settings, so overriding them
   from the stylesheet needs !important — that is why these are marked.     */
@media (min-width:1025px) and (max-height:900px){
  /* Fill exactly the space under the fixed header and no more, so the hero
     ends where the screen ends rather than stopping short of it. */
  .rz-hero.e-con{ min-height:calc(100vh - 89px); }
  .rz-hero__copy.e-con{
    padding-top:clamp(28px,3vw,44px); padding-bottom:clamp(24px,2.4vw,36px);
  }
  .rz-hero .rz-display .elementor-heading-title{ font-size:clamp(2.2rem,4.4vw,4.1rem); }
  .rz-hero .rz-display{ margin-top:16px !important; margin-bottom:18px !important; }
  .rz-hero .rz-cta-row{ margin-top:28px !important; }
  .rz-hero .rz-region{ margin-top:26px !important; }
  /* Let the photo follow the copy's height instead of its own 82vh floor,
     so the image can never be the thing that pushes the hero past the fold.
     flex:1 1 0 is the operative part: with a content-based basis the frame
     still sizes itself from the image's own aspect ratio (height:100% on an
     auto-height parent resolves to auto), which is exactly how the photo was
     forcing an 828px hero into a 711px space. A zero basis makes the column
     hand it a definite height instead. */
  .rz-hero__fig .rz-figure.e-con{
    min-height:0 !important; height:auto !important; flex:1 1 0 !important;
  }
}
@media (min-width:1025px) and (max-height:780px){
  .rz-hero .rz-display .elementor-heading-title{ font-size:clamp(2rem,3.9vw,3.5rem); }
  .rz-hero .rz-sub p{ font-size:1.02rem; }
  .rz-hero .rz-cta-row{ margin-top:22px !important; }
  .rz-hero .rz-region{ margin-top:20px !important; }
}
.rz-region p{
  font-size:12.5px; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--rz-ink-3); margin:0;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:0 22px;
}
/* Separators drawn between items, so a pipe can never dangle at a line end. */
.rz-region span{ position:relative; }
.rz-region span + span::before{
  content:"|"; position:absolute; left:-13px; opacity:.38; font-weight:400;
}

/* --- 7. PHOTOGRAPHY PLACEHOLDER ----------------------------------------- *
   No approved photography supplied yet. Each frame states the required shot
   so it doubles as the photographer's brief. Replace before publication.   */
.rz-hero__fig > .e-con{ flex-grow:1; }
.rz-ph.e-con{
  position:relative; background-color:var(--rz-cream-2);
  justify-content:flex-end; overflow:hidden; height:100%;
  padding:clamp(20px,2.4vw,32px);
}
.rz-ph.e-con::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(-45deg,transparent 0 22px,rgba(19,23,20,.028) 22px 44px);
}
.rz-ph > *{ position:relative; }
.rz-ph__tag .elementor-heading-title{
  display:inline-block; font-family:var(--rz-ff-text); font-size:10px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; line-height:1;
  color:var(--rz-cream); background-color:var(--rz-ink); padding:7px 11px;
}
.rz-ph__txt p{ font-size:13.5px; line-height:1.6; color:var(--rz-ink-2); max-width:52ch; margin:0; }
.rz-ph--wide.e-con{ padding:clamp(20px,2.2vw,28px); }
.rz-ph--wide .rz-ph__txt p{ max-width:64ch; }

/* On the black section the frame is a tint of the cream rather than a new
   colour, so the palette stays closed. */
.rz-ph--dark.e-con{ background-color:rgba(251,250,245,.05); }
.rz-ph--dark.e-con::before{
  background:repeating-linear-gradient(-45deg,transparent 0 22px,rgba(251,250,245,.035) 22px 44px);
}
.rz-ph--dark .rz-ph__tag .elementor-heading-title{
  background-color:var(--rz-cream); color:var(--rz-ink);
}
.rz-ph--dark .rz-ph__txt p{ color:var(--rz-on-ink-2); }

/* --- 7b. PHOTOGRAPHY ----------------------------------------------------- *
   The container owns the slot's height and the image is cropped into it, so a
   replacement photo of any aspect ratio drops in without breaking the grid.   */
.rz-figure.e-con{ overflow:hidden; padding:0; }
.rz-figure .elementor-widget-image,
.rz-figure .elementor-widget-container,
.rz-figure figure,
.rz-figure .elementor-image{ height:100%; width:100%; margin:0; }
.rz-figure img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  display:block; border-radius:0;
}
/* Elementor's own min-height is only a floor: with no explicit height on the
   flex container, `img{height:100%}` resolves to auto, so a photo whose
   natural aspect ratio is taller (relative to its slot's width) than the
   intended crop renders past it instead of being cropped in — the same bug
   the tile photos hit (see .rz-tile__photo below), just not yet patched
   here. It went unnoticed on Home's own wide photo only because that
   particular image's aspect ratio happens to fall under 440px on its own;
   Leistungen's and Über uns' page-head photos don't, and rendered ~625px
   tall instead of the intended 440px. Same fix: a real height, not a floor. */
.rz-figure--wide.e-con{ height:440px !important; min-height:0 !important; }
/* Leistungen's seven service-list photos, one per row — same bug, worse
   impact: each rendered at its own image's aspect ratio (~270-410px)
   instead of the intended 160px strip, and with seven of them stacked the
   whole services section ballooned to roughly double its designed height. */
.rz-service__photo.e-con{ height:160px !important; min-height:0 !important; }
/* The hero crop favours the building above the figures. */
.rz-hero .rz-figure img{ object-position:center 42%; }

/* --- 8. THE HAIRLINE GRID ----------------------------------------------- *
   Groups separated by 1px rules, never cards, rounded boxes or icons.      */
.rz-tiles.e-con{ border-top:1px solid var(--rz-line); gap:0; }
/* The four tiles read as one grid, so they share a single top rule and the
   columns are separated only by hairlines. */
.rz-tile.e-con{
  padding:clamp(30px,2.6vw,40px) clamp(24px,2.2vw,34px) clamp(34px,3vw,48px);
  border-right:1px solid var(--rz-line);
}
.rz-tile.e-con:first-child{ padding-left:0; }
.rz-tile.e-con:last-child{ border-right:0; padding-right:0; }
.rz-tile p{ font-size:15.5px; line-height:1.7; color:var(--rz-ink-2); }
/* A small photo per tile, added on client request to give the section more
   presence — scoped here, not on .rz-figure generally, so the rest of the
   site's photography keeps its own sizing untouched. */
.rz-tile__photo.e-con{ margin-bottom:22px; }
/* A fixed height, not a floor — the placeholder brief text varies in length
   per tile, and a min-height lets the longer captions grow past the
   shorter ones, so the four frames render at visibly different sizes. A
   plain height with the frame's existing overflow:hidden keeps all four
   identical regardless of caption length, and continues to work once real
   photos replace these frames (object-fit just fills whatever height is
   set). This overrides the min-height Elementor writes inline, hence
   !important. */
.rz-tile__photo.e-con{ height:340px !important; min-height:0 !important; }
/* Sized up from the base .rz-h3 specifically inside a tile, where the
   heading is the main visual anchor rather than a small caption elsewhere
   (e.g. Über uns' portrait names, Leistungen's service list). */
.rz-tile .rz-h3 .elementor-heading-title{
  font-size:clamp(1.3rem,1.7vw,1.65rem); letter-spacing:.01em;
}

/* --- 8a. TILES AS CARDS: ALIGNMENT, HOVER, ARROW ------------------------ *
   Three related client requests: the cards should line up with each other,
   they should feel interactive, and the whole card should be clickable
   rather than only the button under the grid.
   Alignment: the photo already has a fixed height, but the headings sit
   directly under it and a two-line heading pushed its paragraph down out of
   step with its neighbours. Making the tile a flex column and letting the
   heading block reserve a common height keeps every photo, heading and
   paragraph on the same baseline across the row.                          */
.rz-tile.e-con{ display:flex; flex-direction:column; position:relative; }
/* The heading block reserves the height of its longest sibling so the
   paragraphs below all start on the same line. Not margin-top:auto on the
   paragraph — that bottom-aligns them instead, which staggers their first
   lines whenever the copy runs to a different number of lines. */
.rz-tile .rz-h3{ display:flex; align-items:flex-start; min-height:2.5em; }
/* Room for the arrow so it never collides with the paragraph above it. */
.rz-tile.e-con{ padding-bottom:clamp(52px,4.4vw,68px); }

/* The full-card link. A native Button widget (see service_tile() in
   build_elementor.py), not a hand-written <a> — that was the earlier bug:
   an HTML widget's own wrapper div is `position:relative` with height
   determined by its content, and an absolutely positioned child inside it
   contributes no height, so the wrapper (and the link stretched to fill it)
   collapsed to 0×0. Nothing on the card was clickable, the arrow included,
   because there was nothing there to click.
   The fix does not depend on that wrapper's height at all: `inset:0` here
   sizes the button directly off .rz-tile (the nearest *other* positioned
   ancestor, set above), regardless of what the wrapper's own content-based
   height computes to. !important overrides Elementor's inline position. */
.rz-tile__link.elementor-widget-button{
  position:absolute !important; inset:0; z-index:2; margin:0;
}
.rz-tile__link .elementor-button{
  display:block; width:100%; height:100%;
  background:transparent; border:0; padding:0;
}
.rz-tile__link .elementor-button-content-wrapper{ display:block; height:100%; }
/* The button's real text is the accessible link name ("<Service> –
   Leistungen ansehen") — kept in the document for screen readers and search
   engines, clipped from view rather than hidden with display:none (which
   would drop it from the accessibility tree too). Standard sr-only pattern. */
.rz-tile__link .elementor-button-text{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* Hover / focus, driven off the tile as a whole rather than off the button
   specifically — the button covers the tile, so the two are equivalent for
   a mouse, but :focus-visible only ever lands on the real focusable element
   (the <a> inside the button), never on the wrapper div .rz-tile__link
   itself, so an ancestor-based :focus-within on .rz-tile is what actually
   fires reliably here. */
.rz-tile__photo.e-con{ overflow:hidden; }
.rz-tile__photo img{ transition:transform .5s cubic-bezier(.2,.6,.2,1); }
.rz-tile:hover .rz-tile__photo img,
.rz-tile:focus-within .rz-tile__photo img{ transform:scale(1.04); }
.rz-tile .rz-h3 .elementor-heading-title{
  display:inline; background-image:linear-gradient(var(--rz-ink),var(--rz-ink));
  background-size:0 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .35s cubic-bezier(.2,.6,.2,1);
}
.rz-tile:hover .rz-h3 .elementor-heading-title,
.rz-tile:focus-within .rz-h3 .elementor-heading-title{ background-size:100% 1px; }

/* The arrow — a Heading widget (see service_tile()) carrying one character
   in the display face, not an icon: the system draws separation with
   hairlines and never uses icon graphics. It sits underneath the invisible
   full-card button in stacking order (default z-index, against the button's
   z-index:2), so a click anywhere over it still lands on the link — the
   glyph itself does not need to be part of the interactive element. */
/* A widget wrapper, not a container — no .e-con class here, unlike the
   custom con()-based components (.rz-figure etc.) elsewhere in this file. */
.rz-tile__arrow{
  position:absolute; left:clamp(24px,2.2vw,34px); bottom:clamp(16px,1.6vw,22px);
  width:auto; pointer-events:none;
}
.rz-tile.e-con:first-child .rz-tile__arrow{ left:0; }
.rz-tile__arrow .elementor-heading-title{
  font-family:var(--rz-ff-display); font-size:20px; line-height:1; color:var(--rz-ink-3);
  transition:transform .35s cubic-bezier(.2,.6,.2,1), color .35s ease;
}
.rz-tile:hover .rz-tile__arrow .elementor-heading-title,
.rz-tile:focus-within .rz-tile__arrow .elementor-heading-title{
  transform:translateX(7px); color:var(--rz-ink);
}

.rz-paths.e-con{ border-top:1px solid var(--rz-line-ink); gap:0; }
.rz-path.e-con{
  padding:clamp(32px,3vw,44px) clamp(36px,4vw,56px) clamp(36px,3.4vw,48px) 0;
  border-right:1px solid var(--rz-line-ink);
}
/* Mirrored padding keeps both paths the same content width. */
.rz-path.e-con:last-child{
  border-right:0; padding-right:0; padding-left:clamp(36px,4vw,56px);
}
.rz-path p{ font-size:16.5px; line-height:1.72; max-width:42ch; }

/* --- 8b. PEOPLE — Danijel & Florin, presented with zero difference ------- *
   A single hairline splits two identical columns, mirroring .rz-tiles. No
   side gets a heavier rule, a different width, or a different caption.      */
.rz-people.e-con{ border-top:1px solid var(--rz-line); gap:0; }
.rz-person.e-con{
  padding:clamp(32px,3vw,44px) clamp(28px,3vw,40px) 0 0;
  border-right:1px solid var(--rz-line);
}
.rz-person.e-con:last-child{
  border-right:0; padding-right:0; padding-left:clamp(28px,3vw,40px);
}

/* --- 8b2. SERVICE LIST ----------------------------------------------------- *
   Seven items, unordered — a scope list, not a sequence, so no numerals, per
   the same reasoning as .rz-tiles. Full-width rows rather than a column grid
   because each description runs to a full sentence or two.                  */
.rz-services.e-con{ border-top:1px solid var(--rz-line); gap:0; }
.rz-service.e-con{
  padding-block:clamp(26px,2.6vw,36px);
  border-bottom:1px solid var(--rz-line);
}
.rz-service.e-con:last-child{ border-bottom:0; }
.rz-service p{ font-size:15.5px; line-height:1.7; color:var(--rz-ink-2); max-width:56ch; }

/* --- 8b3. PROCESS STEPS ----------------------------------------------------- *
   Same row component as the service list above (.rz-services/.rz-service),
   with an ordinal numeral standing in for a fourth column. Leistungen's list
   is deliberately unordered — hence no numerals there — but this genuinely
   is a sequence: five steps that happen in this order, so the numeral is
   what turns the row into a process rather than another set of items.       */
.rz-step__num .elementor-heading-title{
  font-family:var(--rz-ff-display); font-weight:600; line-height:1;
  font-size:clamp(1.8rem,2.4vw,2.4rem); color:var(--rz-ink-3); letter-spacing:-.01em;
}

/* --- 8b4. TWO-COLUMN LIST (Hausverwaltungen service overview) ------------- *
   Six service lines set as two hairline-ruled columns. Same rule weight and
   rhythm as .rz-services, but without the descriptions — this is an overview
   that points at the Leistungen page, not a second copy of it.            */
.rz-listcol.e-con{ gap:0; }
.rz-listline.e-con{
  padding:clamp(16px,1.5vw,20px) 0; border-top:1px solid var(--rz-line);
}
.rz-listcol.e-con > .rz-listline.e-con:last-child{ border-bottom:1px solid var(--rz-line); }
.rz-listline__txt .elementor-heading-title{
  font-family:var(--rz-ff-text); font-size:16px; font-weight:500;
  line-height:1.45; color:var(--rz-ink); text-transform:none; letter-spacing:0;
}

/* --- 8b5. FAQ ACCORDION --------------------------------------------------- *
   Elementor's accordion, stripped back to the hairline grid: no boxes, no
   rounded corners, no icon font. The open/closed affordance is a + / − drawn
   as a character in the display face, matching the tile arrow.            */
.rz-faq .elementor-accordion{ border:0; }
.rz-faq .elementor-accordion-item{
  border:0; border-top:1px solid var(--rz-line); background:transparent;
}
.rz-faq .elementor-accordion-item:last-child{ border-bottom:1px solid var(--rz-line); }
.rz-faq .elementor-tab-title{
  position:relative; background:transparent; border:0;
  padding:clamp(20px,2vw,26px) 44px clamp(20px,2vw,26px) 0;
  font-family:var(--rz-ff-display); font-weight:600; text-transform:uppercase;
  font-size:clamp(.95rem,1.15vw,1.1rem); line-height:1.3; letter-spacing:.01em;
  color:var(--rz-ink); transition:opacity .2s ease;
}
.rz-faq .elementor-tab-title a,
.rz-faq .elementor-tab-title .elementor-accordion-title{ color:var(--rz-ink); }
.rz-faq .elementor-tab-title:hover{ opacity:.62; }
/* Elementor still prints an icon span even with no icon chosen; it is hidden
   and replaced so the marker can be typographic rather than an icon file. */
.rz-faq .elementor-accordion-icon{ display:none !important; }
.rz-faq .elementor-tab-title::after{
  content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%);
  font-family:var(--rz-ff-display); font-size:22px; font-weight:400; line-height:1;
  color:var(--rz-ink-3); transition:color .2s ease;
}
.rz-faq .elementor-tab-title.elementor-active::after{ content:"\2212"; color:var(--rz-ink); }
.rz-faq .elementor-tab-content{
  background:transparent; border:0; padding:0 44px clamp(24px,2.4vw,32px) 0;
}
.rz-faq .elementor-tab-content p{
  font-size:15.5px; line-height:1.7; color:var(--rz-ink-2); max-width:74ch; margin:0;
}

/* --- 8c. PAGE HEAD -------------------------------------------------------- *
   Sits at the top of a subpage that has no hero image. Extra top air stands
   in for the hero, and a hairline at the foot closes the band the way the
   homepage hero's bottom border does.                                       */
.rz-pagehead.e-con{
  padding-top: clamp(96px,10vw,148px);
  border-bottom:1px solid var(--rz-line);
}
/* Opener variants. The client asked that the subpages not all share one
   layout while still reading as one site, so the page head has three shapes:
   the default above (Über uns), photo-first (Hausverwaltungen) and the split
   below (Leistungen). Kontakt is different again — its photo runs beside the
   form. Same type, same hairlines, same palette in every case; only the
   arrangement changes.
   --photo-first: the generous top air exists to stand in for a missing hero.
   With the photograph itself at the top, that air is no longer needed. */
.rz-pagehead--photo-first.e-con{ padding-top:clamp(40px,4vw,64px); }
/* The split opener's photo fills its column so its top and bottom line up
   with the text column beside it. */
.rz-figure--split.e-con{
  height:100% !important; min-height:clamp(300px,34vw,460px) !important;
}

/* --- 8d. INLINE TEXT LINK -------------------------------------------------- *
   A plain underlined link, not a button — for a subtle reference rather than
   a call to action (the RUZIC Projects family link on Über uns).            */
.rz-inline-link a{
  font-family:var(--rz-ff-text); font-size:13px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  color:var(--rz-ink); padding-bottom:6px; border-bottom:1px solid var(--rz-ink);
  transition:opacity .2s ease;
}
.rz-inline-link a:hover{ opacity:.55; }

/* --- 8e. CONTACT FORM ------------------------------------------------------- *
   Elementor Pro's own form widget, restyled to the design system rather than
   built from scratch — it already covers validation, the honeypot and the
   Submissions store the form actually uses (see build_elementor.py). Only
   .elementor-field-textual is targeted for text/email/tel/number/date/
   textarea/select — Elementor applies that one class to all of them, so a
   single rule reaches every field except the option-list types below.     */
.rz-form .elementor-field-group{ margin-bottom:0; }
.rz-form .elementor-field-group > label{
  font-family:var(--rz-ff-text); font-size:12.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.12em; color:var(--rz-ink-2);
  margin-bottom:9px; display:inline-block;
}
.rz-form .elementor-mark-required .elementor-field-group > label:after{ color:var(--rz-ink); }
/* !important on the background specifically: Elementor's own forms
   stylesheet paints these fields pure white through a three-class selector,
   which out-specifies a plain `.rz-form .elementor-field-textual` and left
   the inputs reading as cold white boxes on the warm ground. */
.rz-form .elementor-field-textual{
  width:100%; font-family:var(--rz-ff-text); font-size:15.5px; color:var(--rz-ink);
  background-color:var(--rz-cream) !important; border:1px solid var(--rz-line); border-radius:0;
  padding:14px 16px; transition:border-color .2s ease;
}
.rz-form textarea.elementor-field-textual{ resize:vertical; }
.rz-form .elementor-field-textual:focus{ border-color:var(--rz-ink); outline:none; }
.rz-form .elementor-select-wrapper{ border:0; padding:0; }
/* Radio / checkbox groups: stacked, not Elementor's default inline wrap — a
   set of full German option labels wraps unpredictably run inline. Native
   controls throughout, just tinted to the palette (accent-color), rather
   than custom icon graphics. */
.rz-form .elementor-field-subgroup{ display:flex; flex-direction:column; gap:11px; }
.rz-form .elementor-field-option{ display:flex; align-items:baseline; gap:10px; }
.rz-form .elementor-field-option input{ accent-color:var(--rz-ink); flex:none; }
.rz-form .elementor-field-option label{
  font-size:15.5px; line-height:1.5; color:var(--rz-ink-2);
}
/* The GDPR checkbox — same option/label pairing, with the embedded
   Datenschutzerklärung link styled like .rz-inline-link rather than the
   browser default blue. */
.rz-form .elementor-acceptance-field{ accent-color:var(--rz-ink); margin-top:3px; }
.rz-form .elementor-field-type-acceptance label{ font-size:13.5px; line-height:1.6; color:var(--rz-ink-2); }
.rz-form .elementor-field-type-acceptance a{
  color:var(--rz-ink); text-decoration:underline; text-underline-offset:2px;
}
/* The one deliberate exception to the closed cream/black palette: form
   validation genuinely needs a colour a label alone can't carry. Kept as
   muted and desaturated as it can be while still reading as an error. */
.rz-form .elementor-message{
  font-size:13.5px; padding-top:14px; margin-top:4px; border-top:1px solid var(--rz-line);
}
.rz-form .elementor-message-success{ color:var(--rz-ink); }
.rz-form .elementor-message-danger{ color:#8a4a3a; }
.rz-form .elementor-field.elementor-error .elementor-field-textual{ border-color:#8a4a3a; }
/* Conditional fields (Hausverwaltung/Unternehmen, Stiegenanzahl, Wohnfläche)
   — hidden by default so there's no flash of an irrelevant field before
   kontakt-form.js runs; the script adds .is-visible once the triggering
   answer is selected. Targeted directly by each field's own
   elementor-field-group-{custom_id} class, not a shared marker class — the
   repeater's `css_classes` control exists but turns out not to be a hook
   Elementor prints onto the rendered wrapper, only something the editor UI
   itself reads, so it was silently doing nothing here. */
.rz-form .elementor-field-group-firma,
.rz-form .elementor-field-group-stiegen,
.rz-form .elementor-field-group-wohnflaeche{ display:none !important; }
.rz-form .elementor-field-group-firma.is-visible,
.rz-form .elementor-field-group-stiegen.is-visible,
.rz-form .elementor-field-group-wohnflaeche.is-visible{ display:block !important; }

/* The photo column beside the form. Sticky rather than a single tall crop:
   the form runs well past a screen height, and a photo pinned to the top of
   the column would leave the lower half of the page empty again — the exact
   thing this column was added to fix. The offset clears the header. */
.rz-kontakt__aside.e-con{ align-self:stretch; }
.rz-kontakt__photo.e-con{
  position:sticky; top:calc(88px + clamp(24px,3vw,48px));
  height:clamp(420px,52vh,620px) !important; min-height:0 !important;
}

/* --- 9. HEADER ---------------------------------------------------------- *
   Divergence from RP (centred logo, split nav): logo left, nav right, with a
   standing enquiry CTA. A service business needs a permanent conversion path. */
.rz-header.e-con{
  background-color:var(--rz-cream);
  border-bottom:1px solid var(--rz-line);
  padding-block:0;
}
.rz-header__in.e-con{ min-height:88px; align-items:center; flex-wrap:nowrap; }
/* Both sides size to content so the nav never has to wrap. */
.rz-header__in > .e-con,
.rz-header__in > .elementor-widget{ width:auto; flex:0 0 auto; }
.rz-header__right.e-con{ flex-wrap:nowrap; }
.rz-header-cta .elementor-button{ white-space:nowrap; }
.rz-nav .elementor-nav-menu--main{ flex-wrap:nowrap; }
.rz-nav .elementor-nav-menu--main .elementor-item{ white-space:nowrap; }
.rz-header .elementor-widget-theme-site-logo img{ width:186px; height:auto; }
/* Six long German labels plus a CTA need roughly 1250px. The CTA drops first;
   the nav itself becomes a burger at 1024px via the widget's own setting. */
@media (max-width:1320px){ .rz-header-cta{ display:none; } }

.rz-nav .elementor-nav-menu .elementor-item{
  font-family:var(--rz-ff-text); font-size:13px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--rz-ink);
  padding:6px 0; fill:var(--rz-ink);
}
.rz-nav .elementor-nav-menu--main .elementor-item:hover,
.rz-nav .elementor-nav-menu--main .elementor-item.elementor-item-active{ color:var(--rz-ink); }
.rz-nav .e--pointer-underline .elementor-item:before,
.rz-nav .e--pointer-underline .elementor-item:after{ background-color:var(--rz-ink); height:1px; }

/* Full-screen mobile menu, matched to the black surface. The widget is set to
   stretch, so the panel spans the viewport rather than the header column. */
.rz-nav .elementor-nav-menu--dropdown{
  background-color:var(--rz-ink) !important;
  max-width:100vw;
}
.rz-nav .elementor-nav-menu--dropdown a.elementor-item{
  font-family:var(--rz-ff-display); font-size:clamp(1.4rem,5.6vw,2rem); font-weight:500;
  letter-spacing:0; color:var(--rz-on-ink) !important;
  padding:20px var(--rz-gutter); border-bottom:1px solid var(--rz-line-ink);
  white-space:normal; overflow-wrap:break-word;
}
/* Elementor's default active/hover state is an off-palette blue-grey. The
   system allows no accent colour, so states are a tint of the cream instead. */
.rz-nav .elementor-nav-menu--dropdown a.elementor-item:hover,
.rz-nav .elementor-nav-menu--dropdown a.elementor-item:focus,
.rz-nav .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active,
.rz-nav .elementor-nav-menu--dropdown a.elementor-item.highlighted{
  background-color:rgba(251,250,245,.07) !important;
  color:var(--rz-on-ink) !important;
}
.rz-nav .elementor-menu-toggle{
  color:var(--rz-ink); background-color:transparent; font-size:22px;
}

/* --- 10. FOOTER --------------------------------------------------------- *
   Black footer with a column rhythm related to the RP footer, rebuilt for a
   service business where region and direct contact carry the most weight.  */
.rz-footer.e-con{ background-color:var(--rz-ink); color:var(--rz-on-ink); }
.rz-footer .rz-foot-top.e-con{ padding-bottom:0; }
@media (max-width:767px){
  .rz-footer.e-con{ padding-top:48px; }
}
.rz-footer .elementor-widget-theme-site-logo img{ width:214px; height:auto; }
.rz-footer p,.rz-footer li,.rz-footer a{ color:var(--rz-on-ink-2); }
.rz-footer a{ text-decoration:none; transition:color .2s ease; }
.rz-footer a:hover{ color:var(--rz-on-ink); }
.rz-foot-h .elementor-heading-title{
  font-family:var(--rz-ff-text); font-size:11px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--rz-on-ink-3);
}
.rz-footer .elementor-icon-list-item a{ font-size:14.5px; }
.rz-footer .elementor-icon-list-items{ display:grid; gap:11px; }
.rz-foot-bottom.e-con{ border-top:1px solid var(--rz-line-ink); }
.rz-foot-bottom p{ font-size:13px; color:var(--rz-on-ink-3); margin:0; }
.rz-foot-bottom .elementor-icon-list-item a{ font-size:13px; color:var(--rz-on-ink-3); }
.rz-footer .rz-foot-meta .elementor-icon-list-items{
  display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:flex-end;
}
.rz-footer .rz-foot-meta .elementor-icon-list-item{ margin:0; width:auto; }
@media (max-width:767px){
  .rz-footer .rz-foot-meta .elementor-icon-list-items{ justify-content:flex-start; }
}

/* Placeholder for facts the client has not supplied. Must not ship live. */
.rz-todo{
  display:inline-block; font-family:var(--rz-ff-text); font-size:11px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; padding:5px 9px; line-height:1;
  border:1px dashed var(--rz-on-ink-3); color:var(--rz-on-ink-2);
}

/* --- 11. RESPONSIVE ----------------------------------------------------- */
@media (max-width:1200px){
  :root{ --rz-gutter:40px; }
}
@media (max-width:1024px){
  .rz-header .elementor-widget-theme-site-logo img{ width:150px; }
  .rz-hero__copy.e-con{ padding:clamp(40px,8vw,56px) var(--rz-gutter) clamp(32px,6vw,40px); }
  /* The layout has stacked, so the seam is now horizontal — fade from the
     top edge instead of the left edge. */
  .rz-hero__fig .rz-figure.e-con::before{
    top:0; left:0; right:0; bottom:auto; width:auto; height:clamp(40px,9vw,90px);
    background:linear-gradient(to bottom, var(--rz-cream) 0%, rgba(251,250,245,0) 100%);
  }
  .rz-tile.e-con,.rz-path.e-con{ border-right:0; }
  /* Tiles are now full-width and stacked (one per row), so the fixed height
     shrinks to match — a 340px frame would look oversized at this width. */
  .rz-tile__photo.e-con{ height:200px !important; }
  .rz-figure--wide.e-con{ height:300px !important; }
  /* Stacked, the photo belongs above the form: a picture that only appears
     after fourteen fields is a picture nobody sees. Sticky is dropped too —
     it has nothing to stick against once the columns are one column. */
  .rz-kontakt__aside.e-con{ order:-1; }
  .rz-kontakt__photo.e-con{ position:static; height:300px !important; }
  /* Stacked, the split opener's photo has no column to match the height of. */
  .rz-figure--split.e-con{ height:240px !important; min-height:0 !important; }
  /* One column of service lines, so the second column must not re-draw a top
     rule where the first one already closed with a bottom rule. */
  .rz-listcol.e-con + .rz-listcol.e-con .rz-listline.e-con:first-child{ border-top:0; }
  .rz-listcol.e-con:not(:last-child) > .rz-listline.e-con:last-child{ border-bottom:0; }
}
@media (max-width:767px){
  :root{ --rz-gutter:24px; --rz-sec:48px; }
  .rz-hero .rz-ph.e-con{ min-height:300px; }
  .rz-ph--wide.e-con{ min-height:190px; }
  body{ font-size:16.5px; }
  .rz-header__in.e-con{ min-height:72px; }
  .rz-header .elementor-widget-theme-site-logo img{ width:142px; }
  .rz-footer .elementor-widget-theme-site-logo img{ width:170px; }

  /* More room than before: each tile now carries a photo, and the client
     specifically asked for more presence here on mobile. */
  .rz-tile.e-con,
  .rz-tile.e-con:first-child{
    padding:32px 0 36px; border-right:0; border-bottom:1px solid var(--rz-line);
  }
  .rz-tile.e-con:last-child{
    padding:32px 0 0; border-right:0; border-bottom:0;
  }
  .rz-tile__photo.e-con{ margin-bottom:20px; height:220px !important; }
  .rz-figure--wide.e-con{ height:220px !important; }
  .rz-service__photo.e-con{ height:200px !important; }
  .rz-path.e-con{
    padding:28px 0 32px; border-right:0; border-bottom:1px solid var(--rz-line-ink);
  }
  .rz-path.e-con:last-child{
    padding:28px 0 0; border-right:0; border-bottom:0; padding-left:0;
  }
  .rz-person.e-con{
    padding:24px 0 26px; border-right:0; border-bottom:1px solid var(--rz-line);
  }
  .rz-person.e-con:last-child{
    padding:24px 0 0; border-right:0; border-bottom:0; padding-left:0;
  }
  .rz-region p{ padding-top:26px; border-top:1px solid var(--rz-line); }

  /* Long CTA labels must wrap, or their min-content width sets the grid floor. */
  .elementor-button{ white-space:normal; text-align:center; line-height:1.35; padding:17px 28px; }
  .rz-cta-row .elementor-widget-button,
  .rz-cta-row .elementor-button{ width:100%; }
}
@media (max-width:520px){
  /* German compounds are wider than a phone column; lang="de-AT" makes these
     break on real syllable boundaries instead of overflowing. */
  body h1,body h2,body h3,
  .rz-nav .elementor-nav-menu--dropdown a.elementor-item{ hyphens:auto; -webkit-hyphens:auto; }
  .rz-region p{ flex-direction:column; gap:7px; }
  .rz-region span + span::before{ content:none; }
}
@media (prefers-reduced-motion:reduce){
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}


/* ==========================================================================
   10. COEXISTING WITH THE GOLD DIRECTION
   The header, footer and the converted pages now run the client's own reference
   stylesheet (assets/gelb.css), shipped byte for byte from index-gelb.html
   and loaded on every page — the header and footer are global, so it has to
   be. That file opens with its own base reset:

       body{ margin:0; color:#101114; background:#fff; font-family:Arial; … }
       a{ color:inherit; text-decoration:none; }
       img{ display:block; max-width:100%; }

   all bare tag selectors, so they reach all six pages rather than just the
   homepage. The handling is split between two places, and neither one is a
   pile of overrides:

   * Sections 1–9 above have exactly two bare-tag rules of their own (`body`
     and `body h1..h6`, in section 2). Both are now written as
     `body:not(.rzg-gold)`, so the cream ground and Work Sans stay on the
     pages that still want them and never touch a converted one. Scoping at the
     source beats bolting a re-override on the end: there is one rule per
     thing, and it says which pages it is for.

   * gelb.css's remaining globals need nothing back. Every image on the cream
     pages is already a block inside .rz-figure, and every link there that
     needs an underline (the Kontakt form's Datenschutz link) sets one
     explicitly, out-specifying a bare `a`.

   The `.rzg-gold` class is added by ruzic_fs_body_class() in functions.php,
   whose id list is the single register of which pages have been converted
   (currently Home 12 and Über uns 13). As each remaining page is rebuilt into
   the gold direction, add its id there. When the last one is, sections 1–9 and
   this note can go.
   ========================================================================== */