@charset "UTF-8";
/* =====================================================================
   SwapBox — Responsive layer
   Desktop (≥1024px) is rendered by the JS transform-scale fitter and is
   left exactly as designed. Tablet (768–1023px) and Mobile (<768px) get
   reflowed layouts via the rules below.

   Hooks: classNames `r-*` are added in the JSX next to inline styles.
   Inline styles are overridden with `!important` only where strictly
   necessary (fixed widths, absolute positioning, multi-col grids).
   ===================================================================== */


/* ---------------------------------------------------------------------
   Price-card disclosure (+ button): hidden by default — desktop & tablet
   always show the description inline. Only mobile (<768px) turns it on.
   --------------------------------------------------------------------- */
.r-price-toggle { display: none; }
.r-price-body { display: block; }


/* =====================================================================
   TABLET + MOBILE (< 1024px)
   The site canvas is normally 1512px wide and scaled via JS transform.
   Below 1024px we drop the scale (handled in index.html) and let CSS
   take over.
   ===================================================================== */
@media (max-width: 1023px) {

  /* Stage: no more fixed 1512 width / transform scaling */
  #stage-wrap { height: auto !important; overflow: visible !important; }
  #stage     { width: 100% !important; transform: none !important; }

  /* Section inner container — proportional side padding */
  .r-section-inner {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

  /* ---- Vorteile cards (Preise) — drop fixed 351×270 sizing ---- */
  .r-vorteile-card {
    width: 100% !important;
    height: auto !important;
    min-height: 240px;
  }

  /* ---- Multi-col grids → 1 column ---- */
  .r-grid-2,
  .r-grid-3,
  .r-grid-4,
  .r-cta-split,
  .r-contact-split,
  .r-footer-grid {
    grid-template-columns: 1fr !important;
  }

  /* "Die Box" section: stack text → drawing → CTA so the button follows the SVG */
  .r-box-grid {
    grid-template-areas: "text" "img" "cta" !important;
  }

  /* Vorteile feature grid (Preise): 3 → 2 columns on tablet */
  .r-vorteile-grid {
    grid-template-columns: 1fr 1fr !important;
    column-gap: 40px !important;
  }

  /* ---- HOME hero (absolute-positioned text + half-mint bg) ---- */
  .r-home-hero {
    height: auto !important;
    background: #C5E4E3 !important;          /* mint fills the upper area */
  }
  .r-home-hero-inner {
    height: auto !important;
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .r-home-hero-mint { display: none !important; }
  .r-home-hero-text {
    position: static !important;
    left: auto !important; top: auto !important; right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 72px 40px 48px !important;
    order: 1;
  }
  .r-home-hero-image {
    position: static !important;
    left: auto !important; top: auto !important;
    width: 100% !important;
    height: 320px !important;
    order: 2;
  }
  .r-home-hero-sticker {
    position: absolute !important;
    left: auto !important; top: auto !important;
    right: 20px !important;
    bottom: 240px !important;
    z-index: 5;
  }
  .r-home-hero-sticker img { width: 110px !important; height: 110px !important; }

  /* ---- Generic page heroes (Preise / Über uns: image bg + absolute text) ---- */
  .r-page-hero {
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: linear-gradient(180deg, #00373A 0%, #001A1B 100%);
  }
  .r-page-hero-bg {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 280px !important;
    order: 2;
  }
  .r-page-hero-overlay { display: none !important; }
  .r-page-hero-inner {
    position: static !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    order: 1;
  }
  .r-page-hero-text {
    position: static !important;
    left: auto !important; top: auto !important; bottom: auto !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 56px 40px !important;
  }

  /* ---- Entrümpelungen hero (gradient bg, grid layout) — uses r-grid-2 ---- */
  .r-entr-hero-inner {
    padding: 80px 40px !important;
  }

  /* ---- "So funktioniert's" → vertical timeline on mobile/tablet ---- */
  .r-step-row {
    flex-direction: column !important;
    gap: 0 !important;
    align-items: stretch !important;
    max-width: 460px;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 48px !important;       /* tighter title → timeline */
  }
  .r-step-arrow { display: none !important; }

  .r-step {
    flex: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 22px !important;
    padding: 0 !important;
    min-height: 124px !important;      /* equal badge-to-badge spacing */
    position: relative !important;
  }
  .r-step:last-child { min-height: 0 !important; }
  /* connecting line between badges */
  .r-step::before {
    content: "";
    position: absolute;
    left: 27px;                 /* center of the 56px badge */
    top: 56px;
    bottom: 0;
    width: 2px;
    background: rgba(166,191,255,0.30);
  }
  .r-step:last-child::before { display: none; }

  .r-step-badge {
    width: 56px !important;
    height: 56px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    font-size: 24px !important;
    background: #00373A !important;   /* solid so the line is hidden behind it */
    position: relative;
    z-index: 1;
  }
  .r-step-text {
    margin: 0 !important;
    max-width: none !important;
    text-align: left !important;
    font-size: 17px !important;
    line-height: 1.5 !important;
    padding-top: 14px !important;     /* align first line with badge centre */
  }

  /* ---- Sort cards (two big bordered cards) ---- */
  .r-sort-grid {
    flex-direction: column !important;
    gap: 28px !important;
  }
  .r-sortcard {
    min-height: 0 !important;
    padding: 40px 32px !important;
    border-width: 1px !important;
    border-radius: 24px !important;
  }
  /* Hide the decorative sketches on tablet + mobile (desktop keeps them) */
  .r-sort-decor { display: none !important; }

  /* ---- SwapBox max teaser: mint hugs content, dark band hugs images ---- */
  .r-max-section {
    background: #C5E4E3 !important;        /* mint base around text + button */
  }
  .r-max-section .r-grid-2 { gap: 0 !important; }
  .r-max-imgwrap {
    background: linear-gradient(180deg, #00373A 0%, #001A1B 100%) !important;
    margin: 44px -40px -140px -40px !important;  /* gap below button; bleed sides + bottom (tablet padding) */
    padding: 48px 40px 56px !important;
  }
  .r-max-images {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ---- Preise / Entrümpelungen CTA split (601px image + text) ---- */
  .r-cta-split   { min-height: 0 !important; }
  .r-cta-image   { min-height: 320px; }
  .r-cta-text    { padding: 80px 40px !important; }

  /* ---- Contact section ---- */
  .r-contact-form  { padding: 80px 40px !important; }
  .r-contact-aside { min-height: 360px; padding: 48px !important; }

  /* ---- Footer ---- */
  .r-footer-grid {
    gap: 56px !important;
  }
  .r-footer-mark img { height: 76px !important; }
  .r-footer-mark { justify-content: flex-start !important; }
  .r-footer-bottom {
    flex-direction: column !important;
    gap: 16px !important;
    text-align: center !important;
    align-items: flex-start !important;
  }

  /* ---- Header: hamburger replaces inline nav ---- */
  .r-header-inner { padding: 18px 32px !important; }
  .r-burger       { display: inline-flex !important; }
  .r-header-nav   {
    display: none !important;
  }
  .r-header-nav.is-open {
    display: flex !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    background: #fff !important;
    margin-left: 0 !important;
    padding: 8px 32px 24px !important;
    border-top: 1px solid rgba(0,59,63,0.10);
    box-shadow: 0 16px 32px -16px rgba(0,26,27,0.18);
  }
  .r-header-nav.is-open > a {
    padding: 16px 0 !important;
    border-bottom: 1px solid rgba(0,59,63,0.08);
    font-size: 20px !important;
  }
  .r-header-nav.is-open > a > span { display: none !important; }  /* underline indicator hidden when stacked */
  .r-header-nav.is-open > button   { align-self: flex-start; margin-top: 16px; }

  /* ---- Display headings: scale down with clamp() ---- */
  .r-h-hero {
    font-size: clamp(36px, 7vw, 64px) !important;
  }
  .r-h-section {
    font-size: clamp(28px, 5.5vw, 48px) !important;
  }

  /* Images: never overflow */
  img { max-width: 100%; height: auto; }

  /* Long form areas */
  .r-contact-form form { max-width: 100% !important; }
}

/* =====================================================================
   MOBILE (< 768px)
   Tighter padding, smaller chrome.
   ===================================================================== */
@media (max-width: 768px) {

  .r-section-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }
  .r-home-hero-text   { padding: 56px 20px 72px !important; }

  /* Hero CTAs: stack & center the button + text link */
  .r-hero-cta {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 22px !important;
    margin-top: 36px !important;
  }
  .r-hero-cta > * { text-align: left; }
  .r-hero-cta > a { display: inline-block; font-size: 17px !important; width: auto !important; }

  /* Recycling badge is decorative — drop it on phones */
  .r-home-hero-sticker { display: none !important; }

  /* CTA buttons: 24px is desktop-scale — proportional on phones */
  .r-btn {
    font-size: 18px !important;
    padding: 14px 24px !important;
  }
  .r-btn img { width: 24px !important; height: 10px !important; }

  /* Box-dimensions diagram: use the mobile-optimised SVG on phones */
  .r-boxen-desktop { display: none !important; }
  .r-boxen-mobile  { display: block !important; }

  /* "So funktioniert's" CTA: tighter gap above the button */
  .r-step-cta { margin-top: 40px !important; }

  /* SwapBox max teaser: phone-correct bleed (section padding is 20/72 here) */
  .r-max-imgwrap {
    margin: 44px -20px -72px -20px !important;
    padding: 48px 20px 56px !important;
  }

  /* Sort-card title: 38px is desktop-scale — smaller on phones */
  .r-sortcard-title { font-size: 28px !important; margin-bottom: 24px !important; }

  /* FAQ: question + answer scaled down for phones */
  .r-faq-q { font-size: 19px !important; }
  .r-faq-a { font-size: 17px !important; line-height: 1.5 !important; }

  /* Footer: built at desktop scale — bring type down on phones */
  .r-footer-head    { font-size: 30px !important; }
  .r-footer-contact { font-size: 19px !important; }
  .r-footer-nav a   { font-size: 18px !important; }
  .r-footer-addr    { font-size: 18px !important; }

  /* Preise/Über-uns hero lead + CTA paragraphs (outside .r-section-inner) */
  .r-page-hero-text p { font-size: 19px !important; line-height: 1.4 !important; }
  .r-cta-text p       { font-size: 17px !important; line-height: 1.5 !important; }

  /* Preise "Ihre ganzen Vorteile" dark panel: huge desktop padding/radius */
  .r-vorteile-wrap {
    padding: 40px 24px !important;
    border-radius: 28px !important;
  }
  /* Title now lives inside the slab → trim the section's white top gap */
  #vorteile .r-section-inner { padding-top: 24px !important; }
  /* Variant A: drop the stretched SVG border, render advantages as a clean
     hairline-divided list inside the panel (no card-in-card) */
  .r-vorteile-wrap .r-grid-3 { gap: 0 !important; }
  .r-vorteile-card {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 26px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
  }
  .r-vorteile-card svg { display: none !important; }
  .r-vorteile-wrap .r-grid-3 > *:not(:first-child) .r-vorteile-card {
    border-top: 1px solid rgba(255,255,255,0.13) !important;
  }
  .r-vorteile-title { font-size: 20px !important; margin-bottom: 8px !important; }
  .r-vorteile-body  { font-size: 17px !important; line-height: 1.5 !important; }

  /* PriceCards: thinner border + tighter padding on phones */
  /* PriceCards: compact card on phones so all 3 fit with little scrolling */
  .r-pricecard {
    border-width: 1px !important;
    border-radius: 24px !important;
    padding: 22px 22px 20px !important;
    min-height: 0 !important;
  }
  /* Heading smaller + no forced line breaks */
  .r-pricecard > div:first-child {
    font-size: 18px !important;
    margin-bottom: 14px !important;
    white-space: normal !important;
  }
  /* Price row: price + plus-button on one line */
  .r-price-big-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    font-size: 34px !important;
  }
  .r-price-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 200ms ease, transform 200ms ease;
  }
  .r-price-toggle .r-price-toggle-icon {
    display: block;
    transition: transform 240ms cubic-bezier(.2,.6,.2,1);
    margin-top: -2px;
  }
  .r-price-toggle .r-price-toggle-icon[data-open="true"] {
    transform: rotate(45deg);
  }
  /* Collapsible description */
  .r-price-body {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 320ms ease, opacity 240ms ease;
  }
  .r-price-body[data-open="true"] {
    max-height: 260px;
    opacity: 1;
  }
  .r-price-body p {
    font-size: 16px !important;
    margin-top: 18px !important;
    padding-top: 16px !important;
  }

  /* Sort-card items: pills are too tall on phones → flowing dot-list */
  .r-sortcard ul {
    display: block !important;
    gap: 0 !important;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .r-sortcard ul li {
    display: inline !important;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: 18px !important;
    line-height: 1.85 !important;
    color: #fff !important;
    white-space: normal !important;
  }
  .r-sortcard ul li:not(:last-child)::after {
    content: " \0000B7  ";
    white-space: normal;
    color: rgba(255,255,255,0.4);
    font-weight: 700;
  }
  .r-page-hero-text   { padding: 48px 28px !important; }
  .r-entr-hero-inner  { padding: 64px 20px !important; }

  /* ---- Räumungen (Entrümpelungen) page ---- */
  .r-entr-hero-inner p { font-size: 19px !important; line-height: 1.4 !important; }
  /* Logo is an eyebrow over the headline — shrink it with the headline on phones */
  .r-entr-hero-logo { height: 22px !important; margin-bottom: 16px !important; }
  .r-rmax-logo { height: 19px !important; }
  .r-entr-hero-inner .r-grid-2 { gap: 40px !important; }
  .r-entr-leist { gap: 40px !important; }
  .r-entr-list li { font-size: 18px !important; }
  .r-entr-leist-img {
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
  }
  /* Hero image: 4:5 is too tall on phones — match the 4:3 used elsewhere */
  .r-entr-hero-img { aspect-ratio: 4 / 3 !important; width: 100% !important; min-height: 0 !important; }
  .r-entr-hero-inner .r-grid-2 > *, .r-cta-split--entr > *, .r-contact-split > * { min-width: 0; }
  .r-cta-split--entr .r-cta-image { min-height: 0 !important; width: 100%; }

  /* ABLAUF: 4 big cards → compact vertical timeline (like "So funktioniert's") */
  .r-ablauf {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    counter-reset: ablauf;
    max-width: 460px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .r-ablauf-step {
    counter-increment: ablauf;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 20px !important;
    border: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    min-height: 120px !important;
    position: relative !important;
  }
  .r-ablauf-line, .r-ablauf-conn { display: none !important; }
  .r-ablauf-step:last-child { min-height: 0 !important; }
  .r-ablauf-step::before {
    content: "";
    position: absolute;
    left: 27px;
    top: 56px;
    bottom: 0;
    width: 2px;
    background: rgba(166,191,255,0.28);
  }
  .r-ablauf-step:last-child::before { display: none; }
  .r-ablauf-num {
    width: 56px !important;
    height: 56px !important;
    border-radius: 999px !important;
    border: 2px solid rgba(221,232,0,0.45) !important;
    background: #00373A !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    font-size: 0 !important;          /* hide the "1." text */
    position: relative;
    z-index: 1;
  }
  .r-ablauf-num::before {
    content: counter(ablauf);          /* clean number, no dot */
    font-size: 22px;
    line-height: 1;
    font-weight: 800;
    color: #DDE800;
  }
  .r-ablauf-text { padding-top: 15px; max-width: none !important; margin: 0 !important; } /* align title with badge centre */
  .r-ablauf-title { margin-top: 0 !important; font-size: 18px !important; }
  .r-ablauf-body  { font-size: 16px !important; margin-top: 6px !important; line-height: 1.5 !important; }
  .r-cta-text         { padding: 64px 20px !important; }
  .r-contact-form     { padding: 64px 20px !important; }
  .r-contact-aside    { padding: 32px 20px !important; }

  /* Contact page mobile refinements:
     1. Differentiated, action-led heading instead of the footer echo.
     2. Slim the decorative sticker panel (was a ~360px dark void between
        the form and the footer) down to a compact band.
     3. Surface a direct tap-to-call action. */
  .r-contact-h-desktop { display: none !important; }
  .r-contact-h-mobile  { display: inline !important; }
  .r-contact-callcta   { display: flex !important; }
  .r-contact-aside     { min-height: 0 !important; padding: 40px 20px !important; }
  .r-contact-aside img[alt="swapbox.ch recycling-service"] { width: 148px !important; height: 148px !important; }
  .r-contact-aside img[aria-hidden="true"] { display: none !important; }

  /* Räumungen-Seite: helle Besichtigungs-CTA -> Bild über Text stapeln */
  .r-cta-split--entr { grid-template-columns: 1fr !important; gap: 40px !important; padding: 0 20px !important; }
  .r-cta-split--entr .r-cta-image { min-height: 300px; aspect-ratio: 4 / 3 !important; }

  .r-header-inner     { padding: 14px 20px !important; }
  .r-header-logo      { height: 38px !important; }
  .r-header-nav.is-open { padding-left: 20px !important; padding-right: 20px !important; }

  /* Hero image: match the Räumungen hero (Bild 3) — 4:3, rounded, lifted */
  .r-home-hero-image  {
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    width: auto !important;
    border-radius: 36px !important;
    margin: 0 20px 56px !important;
    box-shadow: 0 30px 60px -28px rgba(0,26,27,0.35) !important;
  }
  .r-home-hero-sticker { bottom: 200px !important; right: 12px !important; }
  .r-home-hero-sticker img { width: 90px !important; height: 90px !important; }

  /* Top banner */
  .r-top-banner {
    font-size: 13px !important;
    padding: 8px 14px !important;
    line-height: 1.4;
  }

  /* Team: two brothers side-by-side on phones (smaller avatars) */
  .r-team-row    { gap: 18px !important; flex-wrap: nowrap !important; }
  .r-team-card   { flex: 1 1 0 !important; min-width: 0 !important; }
  .r-team-avatar { width: 140px !important; height: 140px !important; margin: 0 auto !important; }
  .r-team-name   { margin-top: 16px !important; font-size: 19px !important; }
  .r-team-role   { font-size: 14px !important; line-height: 1.3 !important; }
  .r-team-phone  { font-size: 15px !important; }

  /* Über-uns: closing CTA only appears on phones (desktop unchanged) */
  .r-uberuns-cta { display: block !important; }

  /* ---- Sort cards: COMPACT on phones so both fit ~one screen for comparison ---- */
  /* Vorteile feature grid → single column on phones */
  .r-vorteile-grid {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
  }
  /* Mobile tab switcher (SortCompare) */
  .r-sort-tabs {
    display: flex !important;
    gap: 10px;
    margin-bottom: 18px;
  }
  .r-sort-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 52px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(166,191,255,0.20);
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.60);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .25s ease, border-color .25s ease, background .25s ease;
  }
  .r-sort-tab-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 1.5px solid currentColor;
    font-size: 13px;
    line-height: 1;
    flex: 0 0 auto;
  }
  .r-sort-fade { animation: rSortFade 300ms ease both; }
  @keyframes rSortFade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .r-sort-grid { gap: 18px !important; }
  .r-sortcard { padding: 24px 22px !important; border-radius: 20px !important; }
  /* Status eyebrow: tighter, smaller badge */
  .r-sortcard-status { margin-bottom: 12px !important; gap: 9px !important; }
  .r-sortcard-status > span:first-child {
    width: 28px !important; height: 28px !important; font-size: 15px !important;
  }
  .r-sortcard-status > span:last-child { font-size: 12px !important; letter-spacing: 0.07em !important; }
  /* Title smaller + tighter */
  .r-sortcard-title { font-size: 21px !important; margin-bottom: 12px !important; }
  /* Dot-list: tighter leading */
  .r-sortcard ul li { font-size: 15px !important; line-height: 1.65 !important; }
  /* Spacer: no growth on phones — keep a small fixed gap */
  .r-sortcard-spacer { flex: 0 0 auto !important; min-height: 14px !important; }
  /* Card-in-card note: compact */
  .r-sortcard-note {
    padding: 13px 16px !important;
    border-radius: 12px !important;
    border-left-width: 3px !important;
  }
  .r-sortcard-trailing { font-size: 15px !important; line-height: 1.4 !important; }
  /* Impressum / Datenschutz: readable text size on phones */
  .r-legal-intro { font-size: 18px !important; }
  .r-legal-h     { font-size: 20px !important; }
  .r-legal-body  { font-size: 16px !important; overflow-wrap: anywhere; }

  /* Secondary group (Papier & Karton separat): compact on phones */
  .r-sortcard-extra { margin-top: 16px !important; padding-top: 14px !important; }
  .r-sortcard-extra-label { font-size: 12px !important; letter-spacing: 0.07em !important; margin-bottom: 6px !important; }

  /* Sauberkeit image: match the Räumungen hero (Bild 3) — 4:3, rounded, lifted */
  .r-sauber-image {
    aspect-ratio: 4 / 3 !important;
    min-height: 0 !important;
    box-shadow: 0 30px 60px -28px rgba(0,26,27,0.35) !important;
  }

  /* ---- Body copy: 22px is desktop-scale; bring down for phones ---- */
  .r-section-inner p { font-size: 17px !important; line-height: 1.5 !important; }
  /* Hero lead paragraph (set inline to 24px) */
  .r-home-hero-text p { font-size: 19px !important; line-height: 1.4 !important; }

  /* Max teaser: before/after slider keeps its own aspect ratio */
}

/* =====================================================================
   Desktop & tablet type refinements.
   Phones (≤768px) are intentionally left untouched — the rules above own
   the mobile layout. The header nav links + "Kontakt" button only exist on
   desktop (≥1024px); on ≤1023px they live in the hamburger menu, which we
   do NOT change here.
   ===================================================================== */
@media (min-width: 769px) {
  /* Align the body token with the size actually used in components, and
     give running text a comfortable base leading. */
  :root { --sb-size-body: 20px; }
  body  { line-height: 1.4; }

  /* Contact heading: desktop keeps the warm full sentence. */
  .r-contact-h-mobile { display: none; }
}

@media (min-width: 1024px) {
  /* Horizontal nav links: lighter + a touch smaller so the logo and the
     CTA lead the eye instead of four heavy 22px/700 labels. */
  .r-header-nav > a {
    font-size: 18px !important;
    font-weight: 600 !important;
  }
  /* "Kontakt": a nav-scale button (~44px tall, 16px text) instead of the
     hero-scale 24px/56px pill that dominated the header. */
  .r-header-nav > .r-btn {
    font-size: 16px !important;
    padding: 14px 22px !important;
    gap: 9px !important;
  }
  .r-header-nav > .r-btn img {
    width: 22px !important;
    height: 9px !important;
  }
}


/* =====================================================================
   WIDE SCREENS: above 1512px the stage spans the full width and the inner
   content is centered at 1512. These rules bleed the few custom split/hero
   backgrounds out to the viewport edges so the side gutters are filled with
   the right colour instead of showing blank.
   ===================================================================== */
@media (min-width: 1024px) {
  /* CTA bands (Preise): dark gradient fills the full width; the
     601px photo stays inset on the left. Räumungen uses a light layout and is excluded. */
  .r-cta-section:not(:has(.r-cta-split--entr)) {
    background: linear-gradient(180deg, #00373A 0%, #001A1B 100%) !important;
  }
  /* Contact: white form half (left) + dark aside half (right). The 50% split
     of the full-width section lines up with the 1fr/1fr inner boundary,
     because the inner is centered. */
  .r-contact-section {
    background:
      linear-gradient(180deg, #00373A 0%, #001A1B 100%) right / 50% 100% no-repeat,
      #fff !important;
  }
}

@media (min-width: 1512px) {
  /* Home hero: stretch the mint panel to the left edge and the photo to the
     right edge so the hero fills the full width when the stage is centered. */
  .r-home-hero-mint {
    left: calc((100vw - 1512px) / -2) !important;
    width: calc(837px + (100vw - 1512px) / 2) !important;
  }
  .r-home-hero-image {
    width: calc(50vw - 81px) !important;
  }
}