:root{ --paper:#F7F5F1; --beige:#EEE9E1; --ink:#171717; --stone:#6B665F /* war #6F6A63: auf Beige nur 4.44:1, damit unter der AA-Schwelle. 4.71:1, optisch nicht unterscheidbar */; --line:#E6E1D9; --accent:#068649; }
    html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
    body{ font-family:'Inter','Helvetica Neue',Arial,sans-serif; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

    /* Fluid-Typografie, Mobile-first (vw-Minimum verhindert Überlauf auf 320px) */
    .t-eyebrow{ font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--stone); font-weight:500; }
    /* Im dunklen Footer soll paper/50 gelten (4.93:1 auf --ink). Die Regel
       oben setzt var(--stone) und gewinnt bei gleicher Spezifität, weil der
       eigene Stilblock nach den Utilities steht — 3.34:1. Darum explizit. */
    footer .t-eyebrow{ color:rgba(247,245,241,.5); }
    .t-hero{ font-family:'Inter Tight',sans-serif; font-weight:600; letter-spacing:-.035em; line-height:.98; font-size:clamp(2.4rem, 5vw, 4.5rem); }
    .t-display{ font-family:'Inter Tight',sans-serif; font-weight:600; letter-spacing:-.03em; line-height:1.02; font-size:clamp(2.4rem, 5vw, 4.5rem); }
    .t-title{ font-family:'Inter Tight',sans-serif; font-weight:600; letter-spacing:-.02em; line-height:1.08; font-size:clamp(1.55rem, 3.6vw, 3rem); }
    .t-hero,.t-display,.t-title{ overflow-wrap:break-word; }
    .t-lead{ font-size:clamp(1.05rem, 1.7vw, 1.5rem); line-height:1.55; color:var(--stone); font-weight:450; }

    /* ===== Tablet 768–1023 px =====
       Der Footer teilte sich schon ab 768 px in 5/3/2/2 von 12 Spalten — die
       schmalen Navigationsblöcke waren dort nur 84 px breit, lange Linktexte
       («Support Handwerker») liefen heraus. Zwei Spalten bis 1024 px. */
    @media (min-width:768px) and (max-width:1023px){
      footer .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
      footer .grid > *{ grid-column:auto; }
    }
    /* Grid- und Flex-Kinder dürfen unter ihre Mindestbreite schrumpfen.
       Standard ist min-width:auto — dadurch schiebt ein langes Wort oder eine
       nicht umbrechbare Nummer die ganze Seite breiter als das Fenster
       (auf 320 px messbar). */
    .grid > *, .flex > *{ min-width:0; }

    /* ===== Zeilenumbrüche (v3.5) =====
       Überschriften sollen an inhaltlich sinnvollen Stellen brechen, nicht dort,
       wo die Zeile zufällig endet.
         text-wrap:balance  verteilt die Zeilen gleichmässig, statt ein Restwort
                            allein auf die letzte Zeile zu setzen.
         text-wrap:pretty   verhindert Schusterjungen im Fliesstext.
         hyphens:manual     KEINE automatische Trennung. Chrome trennt mit
                            deutschem Wörterbuch sonst auch Markennamen
                            («imo-fix.io») und an falschen Stellen
                            («Mie-terservice»). Getrennt wird nur an den
                            weichen Trennzeichen, die im Text stehen — und
                            auch nur dann, wenn die Zeile sonst nicht passt.
       Ältere Browser ignorieren text-wrap und brechen wie bisher. */
    h1, h2, h3, .t-hero, .t-title, .t-display, .punch-line, .bigos-h, .hp-claim{
      text-wrap:balance; -webkit-hyphens:manual; hyphens:manual;
    }
    .t-lead, p, li, figcaption, dd, .hp-trigger{ text-wrap:pretty; }

    .num{ font-variant-numeric:tabular-nums; }

    a:focus-visible, button:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
    h1[tabindex="-1"]:focus, h1[tabindex="-1"]:focus-visible{ outline:none; }
    .skip-link{ position:absolute; left:1rem; top:-4rem; background:var(--ink); color:#fff; padding:.6rem 1rem; border-radius:9999px; z-index:100; transition:top .2s ease; }
    .skip-link:focus{ top:1rem; }

    #nav-island{ border:1px solid transparent; transition:background-color .35s ease, border-color .35s ease, backdrop-filter .35s ease; }
    #nav-island.scrolled{ background:rgba(247,245,241,.55); backdrop-filter:blur(10px) saturate(1.05); -webkit-backdrop-filter:blur(10px) saturate(1.05); border-color:rgba(230,225,217,.6); }
    /* Startseite: die Navigation liegt über Papier und über dem Bildpanel.
       Eine einzige Textfarbe erreicht auf beidem nicht 4.5:1 — die Insel
       bekommt deshalb von Anfang an ihren eigenen Grund. */
    body.hp-page #nav-island{ background:rgba(247,245,241,.985); backdrop-filter:blur(10px) saturate(1.05); -webkit-backdrop-filter:blur(10px) saturate(1.05); border-color:rgba(230,225,217,.7); }


    /* Sichtbarkeit hängt nicht am JavaScript: Ohne die Klasse «js» auf
       <html> steht alles da, nur ohne Einblendung. Erst mit JavaScript wird
       verborgen und beim Scrollen eingeblendet. */
    .reveal{ opacity:1; transform:none; }
    .js .reveal{ opacity:0; transform:translateY(16px); transition:opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1); }
    .js .reveal.is-visible{ opacity:1; transform:none; }

    .rule{ border-top:1px solid var(--line); }
    [id]{ scroll-margin-top:6.5rem; }

    .ph{ background: repeating-linear-gradient(-45deg, transparent 0 26px, rgba(107,102,95,.045) 26px 27px), var(--beige); }
    .ph-dark{ background: repeating-linear-gradient(-45deg, transparent 0 26px, rgba(255,255,255,.035) 26px 27px), #1c1c1a; }

    .faq-trigger .plus{ transition:transform .3s ease; }
    .faq-trigger[aria-expanded="true"] .plus{ transform:rotate(45deg); color:var(--accent); }

    .lang-opt[aria-current="true"]{ color:var(--ink); font-weight:500; }
    /* Der Punkt markiert die aktuelle Sprache. Er sitzt in einer festen
       Spalte, damit die Einträge untereinander bündig bleiben — als
       vorangestelltes Zeichen mit Abstand rückte nur der aktive Eintrag ein. */
    #lang-menu .lang-opt{ position:relative; padding-left:1.4rem; }
    #lang-menu .lang-opt[aria-current="true"]::before{ content:"·"; color:var(--accent);
        position:absolute; left:.6rem; top:50%; transform:translateY(-50%); }
    .lang-zeile{ /* Zeile mit DE FR IT EN im Klappmenü — Haken für die Markierung der aktiven Sprache */ }
    /* In der Zeile im Klappmenü (DE FR IT EN) markiert stattdessen der Rahmen. */
    .lang-zeile .lang-opt[aria-current="true"]{ border-color:var(--accent); color:var(--ink); }
    .nav-link[aria-current="page"]{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:2px; text-underline-offset:6px; }

    /* Zustand des Untermenüs sichtbar machen: der Pfeil dreht sich beim Öffnen. */
    #hw-sub-btn svg{ transition:transform .2s ease; }
    #hw-sub-btn[aria-expanded="true"] svg{ transform:rotate(180deg); }
    /* Der Bereich zwischen Link und Menü darf beim Hinuntergehen nicht abreissen. */
    .nav-hw::after{ content:""; position:absolute; left:0; right:0; top:100%; height:1rem; }
    /* Aufmerksamkeitsarchitektur: wenige bewusste Punches, keine globale Bewegung */
    .hero-role{ display:inline-flex; align-items:center; gap:.65rem; width:max-content; padding:.5rem .8rem; border:1px solid var(--line); border-radius:9999px; background:rgba(255,255,255,.55); }
    .hero-role-dot{ width:.5rem; height:.5rem; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 rgba(6,134,73,.28); animation:rolePulse 2.8s ease-out infinite; flex:0 0 auto; }
    /* Auf sehr schmalen Geräten darf die Zeile umbrechen. Mit width:max-content
       blieb sie in einer Zeile und schob die Seite über den Rand — bei 320 px
       und der echten Schrift 322 statt 280 Pixel. Der Punkt bleibt dabei oben
       an der ersten Zeile. */
    @media (max-width:479px){
      .hero-role{ width:auto; max-width:100%; align-items:flex-start; }
      .hero-role-dot{ margin-top:.4rem; }
    }
    @keyframes rolePulse{ 0%,45%{box-shadow:0 0 0 0 rgba(6,134,73,.28)} 75%,100%{box-shadow:0 0 0 10px rgba(6,134,73,0)} }
    .punch-band{ background:var(--ink); color:var(--paper); overflow:hidden; }
    .punch-line{ font-family:'Inter Tight',sans-serif; font-weight:600; letter-spacing:-.03em; line-height:1.08; font-size:clamp(1.9rem,4.4vw,4rem); overflow-wrap:break-word; }
    .punch-media{ aspect-ratio:16/10; }
    @media (min-width:768px){ .punch-media{ aspect-ratio:21/9; } }
    #punch-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .7s ease; }
    #punch-video.is-playing{ opacity:1; }
    .punch-word{ display:inline-block; position:relative; }
    .punch-word::after{ content:''; position:absolute; left:0; right:0; bottom:-.08em; height:.07em; background:var(--accent); transform:scaleX(1); transform-origin:left; }
    .js .punch-word::after{ transform:scaleX(0); transition:transform .8s cubic-bezier(.22,.61,.36,1) .35s; }
    .punch-band .is-visible .punch-word::after{ transform:scaleX(1); }
    .punch-visual{ background:rgba(255,255,255,.04); }
    .punch-visual img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.15) contrast(1.02); }
    .service-cards figure:first-child{ grid-column:span 2; }
    .service-cards figure:first-child > div{ aspect-ratio:16/9 !important; }
    @media (max-width:639px){ .service-cards figure:first-child{ grid-column:span 1; } .service-cards figure:first-child > div{ aspect-ratio:4/3 !important; } }
    /* BiG-OS-Einbettung: dunkler Bruch nahe big-os.ch (fast-schwarz, Inter 800, Trikolore) */
    .bigos-embed{ background:#0B0D10; color:#F4F5F7; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); }
    .bigos-embed .tri{ display:flex; height:3px; }
    .bigos-embed .tri span{ flex:1 1 0; }
    .bigos-eyebrow{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:#8B93A0; }
    .bigos-h{ font-family:'Inter',sans-serif; font-weight:800; letter-spacing:-.03em; line-height:1.02; font-size:clamp(1.9rem,4vw,3.4rem); overflow-wrap:break-word; background:linear-gradient(90deg,#fff 60%,#CFE8FF); -webkit-background-clip:text; background-clip:text; color:#fff; }
    .bbtn{ display:inline-flex; align-items:center; gap:.5rem; background:#fff; border-radius:9999px; padding:.75rem 1.6rem; font-weight:600; color:#0B0D10; transition:transform .2s ease,box-shadow .2s ease; }
    .bbtn:hover{ transform:translateY(-1px); box-shadow:0 8px 24px rgba(0,0,0,.35); }
    /* Diagramm: drei Partnerknoten um den Datenkern */
    .bigos-diagram{ position:relative; display:flex; flex-direction:column; align-items:center; gap:2.6rem; padding:1rem 0; }
    .bnode{ position:relative; z-index:1; display:inline-flex; flex-direction:column; align-items:flex-start; gap:.5rem; background:#14171C; border:1px solid var(--nc,rgba(255,255,255,.14)); border-radius:12px; padding:.8rem 1rem; min-width:170px; }
    .bnode .bmark{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:7px; background:var(--nc); color:#0B0D10; font-weight:800; font-size:.95rem; flex:0 0 auto; }
    .bnode-t{ display:flex; flex-direction:column; line-height:1.2; }
    .bn-name{ font-weight:700; font-size:.92rem; }
    .bnode-logo{ height:16px; width:auto; }
    .bnode-logo-core{ height:19px; width:auto; }
    .bn-role{ font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:#8B929C; }
    .bigos-stamp-logo{ height:15px; width:auto; opacity:.85; }
    .bn-sub{ font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:#7B828C; }
    .bnode-row{ display:flex; gap:5rem; }
    .bnode-core{ background:#14171C; border:1px solid rgba(255,255,255,.16); border-radius:14px; padding:1rem 1.6rem; flex-direction:column; align-items:center; gap:.15rem; min-width:210px; text-align:center; }
    .bn-core-name{ font-weight:800; letter-spacing:.02em; }
    .blines{ position:absolute; top:44px; left:0; width:100%; height:calc(100% - 60px); z-index:0; }
    @media (max-width:520px){ .bnode-row{ gap:1.5rem; } .bnode{ min-width:0; } .bn-sub{ font-size:.6rem; } }
    .erp-track{ transform:scaleX(1); transform-origin:left; }
    .js .erp-track{ transform:scaleX(0); transition:transform .6s ease .15s; }
    .js .reveal.is-visible .erp-track{ transform:scaleX(1); }
    /* Verwalten: Service-Ebene legt sich über das reale Bild, sobald sichtbar */
    /* Overlay-Choreografie: zuerst das reale Bild, dann legen sich die Service-Elemente darüber */
    .morph-over{ opacity:1; transform:none; transform-origin:center; }
    .js .morph-over{ opacity:0; transform:scale(1.015); transition:opacity 1s ease 1.8s, transform 1.4s ease 1.8s; }
    .js .reveal.is-visible .morph-over{ opacity:1; transform:scale(1); }
    @media (prefers-reduced-motion: reduce){ .hero-role-dot{ animation:none; } .punch-word::after{ transform:scaleX(1); transition:none; } .erp-track{ transition:none; transform:scaleX(1); } .morph-over{ transition:none; opacity:1; transform:none; } #punch-video{ display:none; } }

    .booking summary{ list-style:none; cursor:pointer; }
    .booking summary::-webkit-details-marker{ display:none; }
    .booking .chev{ transition:transform .25s ease; }
    .booking[open] .chev{ transform:rotate(180deg); }

    *,::before,::after{ border-color:var(--line); }
    .logo-ref{ height:1.75rem; width:auto; filter:grayscale(1); opacity:.55; }
    .logo-xs{ height:1.125rem; } .logo-s{ height:1.45rem; } .logo-l{ height:2rem; } .logo-xl{ height:2.25rem; }
    @media (min-width:768px){ .logo-ref{ height:2rem; } .logo-xs{ height:1.25rem; } .logo-s{ height:1.65rem; } .logo-l{ height:2.25rem; } .logo-xl{ height:2.5rem; } }
    /* Handwerkerpartner: durchlaufendes Logoband (grösser) */
    .plock{ display:inline-flex; flex-direction:column; gap:.4rem; }
    .plock-label{ display:block; max-width:22rem; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; line-height:1.5; color:rgba(247,245,241,.55); transition:color .2s ease; }
    .plock:hover .plock-label{ color:rgba(247,245,241,.7); }
    /* align-self, weil .plock eine Flex-Spalte ist: Ohne das wird das Bild
       auf die Spaltenbreite gestreckt und width:auto kommt nicht mehr zum
       Seitenverhältnis. Das GARAIO-Logo sass dadurch in einem 352 statt
       113 Pixel breiten Kasten — sichtbar als zu grosser Abstand zur
       Beschriftung, auf Mobil über die ganze Breite. */
    .plock-logo{ width:auto; align-self:flex-start; opacity:.9; transition:opacity .2s ease; }
    .plock:hover .plock-logo{ opacity:1; }
    .plock-bigos{ height:24px; }
    .plock-garaio{ height:22px; }
    .logo-marquee{ position:relative; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
    .marq-track{ display:flex; align-items:center; gap:3.5rem; width:max-content; animation:marq 42s linear infinite; }
    .marq-item{ flex:0 0 auto; display:inline-flex; align-items:center; }
    .logo-marq{ height:2.75rem; width:auto; filter:grayscale(1); opacity:.6; }
    @media (min-width:768px){ .marq-track{ gap:5rem; } .logo-marq{ height:3.5rem; } }
    .logo-marquee:hover .marq-track{ animation-play-state:paused; }
    @keyframes marq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
    @media (prefers-reduced-motion: reduce){ .marq-track{ animation:none; flex-wrap:wrap; width:auto; justify-content:center; gap:2.5rem 3rem; } .marq-item[aria-hidden="true"]{ display:none; } }

    @media (prefers-reduced-motion: reduce){
      html{ scroll-behavior:auto; }
      .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
      #nav-island{ transition:none; }
    }
  
    /* ===== v4.0 Startseite — Kachelraster ===== */
    /* Ein Bildschirm ab 900 px Fensterhöhe. Bewusst min-height statt height:
       bei kleineren Fenstern und bei 200 % Zoom muss die Seite scrollen können,
       sonst wird Text abgeschnitten (WCAG Reflow). */
    /* Gleiche Satzbreite wie Header, Logoband und Footer (max-w-[1440px]).
       Ohne Deckel liefen die Kacheln auf breiten Bildschirmen von Kante zu
       Kante, während das Header-Island bei 1440 px zentriert blieb. */
    .hp-grid{ display:grid; gap:1rem; max-width:1440px; margin-inline:auto;
              padding:5.5rem clamp(1rem,2.5vw,1.5rem) 1rem; }
    .hp-tile{ --tile-pad:clamp(1.5rem,2.6vw,2.5rem);
              position:relative; display:flex; flex-direction:column; gap:1rem;
              border-radius:1.5rem; border:1px solid var(--line); overflow:hidden;
              padding:var(--tile-pad); text-decoration:none; color:inherit;
              transition:border-color .3s ease, background-color .3s ease; }
    .hp-tile-m, .hp-tile-h, .hp-tile-b{ background:#fff; }
    .hp-tile:hover{ border-color:var(--ink); }
    a.hp-tile:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

    .hp-body{ display:flex; flex-direction:column; align-items:flex-start; gap:.75rem; }
    .hp-claim{ font-family:'Inter Tight',sans-serif; font-weight:600; letter-spacing:-.03em;
               line-height:1.02; font-size:clamp(2rem,3.4vw,3.4rem); text-wrap:balance; }
    .hp-tile-h .hp-claim{ font-size:clamp(1.5rem,1.9vw,2.1rem); }
    .hp-sub{ font-size:clamp(1rem,1.25vw,1.2rem); line-height:1.5; opacity:.75; max-width:34ch; }
    .hp-tile-h .hp-sub{ font-size:.98rem; max-width:36ch; }
    /* schmale Kachel: CTA eine Zeile, sonst fällt der Pfeil allein auf die nächste */
    .hp-tile-h .hp-cta{ font-size:.875rem; }
    /* text-wrap:balance verhindert, dass der Pfeil allein auf der zweiten Zeile
       landet — die englische und die französische Fassung sind länger als die deutsche. */
    .hp-cta{ display:block; align-self:flex-start; margin-top:auto; font-weight:600;
             font-size:.95rem; line-height:1.4; border-bottom:2px solid var(--accent); padding-bottom:3px;
             text-wrap:balance; max-width:32ch; }
    .hp-cta-arrow{ display:inline-block; margin-left:.5rem; transition:transform .25s ease; }
    .hp-tile:hover .hp-cta-arrow{ transform:translateX(.35rem); }

    /* Dachmarken-Kachel: keine grosse Kachel-Verlinkung, sie trägt zwei eigene Links. */
    .hp-brand-h1{ font-family:'Inter Tight',sans-serif; font-weight:600; letter-spacing:-.02em;
                  line-height:1.1; font-size:clamp(1.25rem,1.5vw,1.6rem); text-wrap:balance; }
    .hp-brand-text{ font-size:.95rem; line-height:1.55; color:var(--stone); }
    .hp-brand-links{ display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; margin-top:auto; font-size:.9rem; font-weight:600; }
    .hp-brand-links a{ display:inline-flex; align-items:center; gap:.4rem; text-decoration:none; color:var(--ink);
                       border-bottom:2px solid var(--accent); padding-bottom:2px; }
    .hp-brand-links a:hover{ color:var(--accent); }

    /* Bildstreifen der Mieterservice-Kachel: Quelle ist hochformatig (720×1280). */
    /* Das Bild läuft bis an die Kachelkante — die Kachel selbst schneidet es
       an ihren Radien ab (overflow:hidden). Als eingerückter Streifen mit
       Weissraum ringsum wirkte es wie ein Vorschaubild, nicht wie ein Motiv. */
    .hp-tile-media{ position:relative; overflow:hidden; background:var(--beige);
                    width:auto; height:clamp(15rem,36svh,24rem);
                    margin:.5rem calc(-1 * var(--tile-pad)) calc(-1 * var(--tile-pad)); }
    .hp-tile-media img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; display:block; }

    /* Auftragsvorschau: echter Auftrag, anonymisiert — Beweis statt Dekoration. */
    .hp-card{ width:100%; max-width:26rem; border:1px solid var(--line); border-radius:.9rem;
              background:var(--paper); overflow:hidden; }
    .hp-card-top{ display:flex; align-items:center; justify-content:space-between; gap:.75rem;
                  padding:.5rem .8rem; border-bottom:1px solid var(--line); background:#fff; }
    .hp-card-eyebrow{ font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--stone); }
    .hp-card-nr{ font-size:.68rem; font-variant-numeric:tabular-nums; color:var(--stone); white-space:nowrap; }
    .hp-card-body{ padding:.7rem .8rem .8rem; display:flex; flex-direction:column; gap:.4rem; }
    .hp-card-prio{ align-self:flex-start; font-size:.66rem; font-weight:600; color:#046436;
                   background:rgba(6,134,73,.10); border-radius:9999px; padding:.1rem .55rem; }
    .hp-card-subject{ font-size:.9rem; font-weight:500; }
    .hp-card-row{ display:flex; gap:.6rem; font-size:.76rem; color:var(--stone); }
    .hp-card-btn{ align-self:flex-start; margin-top:.15rem; font-size:.7rem; font-weight:500; color:#fff;
                  background:var(--ink); border-radius:9999px; padding:.3rem .75rem; }

    @media(min-width:900px){
      /* Ein Bildschirm — aber gedeckelt. Ohne min() wuchs die Kachel 1:1 mit
         der Fensterhöhe: bei 1440 px Höhe war sie 1316 px hoch, der Bildstreifen
         ein 480 x 1314 px schmaler Schlitz, der Text verlor sich in der Fläche.
         52rem ist die Obergrenze; darüber bleibt der Rest der Seite sichtbar. */
      .hp-grid{ grid-template-columns:62fr 38fr; grid-template-rows:1.18fr .82fr;
                min-height:min(100svh, 52rem); padding:6.5rem clamp(1rem,2.5vw,1.5rem) 1.25rem;
                align-items:stretch; }
      .hp-tile-m{ grid-row:1 / span 2; flex-direction:row; align-items:stretch; gap:clamp(1.5rem,2.2vw,2.5rem); }
      .hp-tile-m > .hp-body{ flex:1 1 auto; justify-content:center; gap:1.1rem; }
      /* kein margin-top:auto in der grossen Kachel — sonst klafft die Mitte */
      .hp-tile-m .hp-cta{ margin-top:.6rem; }
      /* Hochformat 768×1344: bei voller Kachelhöhe zeigt eine Spalte von rund
         30rem das Motiv nahezu unbeschnitten, darüber würde nur hochskaliert.
         Die negativen Ränder heben den Kachel-Innenabstand auf, damit das Bild
         oben, unten und rechts bündig an der Kachelkante sitzt. */
      .hp-tile-m > .hp-tile-media{ flex:0 0 clamp(16rem,46%,30rem); width:auto; height:auto;
                                   align-self:stretch;
                                   margin:calc(-1 * var(--tile-pad)) calc(-1 * var(--tile-pad)) calc(-1 * var(--tile-pad)) 0; }
    }
    @media(min-width:900px) and (max-height:820px){
      /* Kleinere Fenster: Raster darf über den Bildschirm hinauslaufen, statt zu quetschen. */
      .hp-grid{ min-height:0; }
      .hp-tile-media{ height:auto; }
    }

    /* ===== Aufklappmenüs =====
       <details>/<summary> statt Knopf plus ARIA-Menü: Der Browser bringt
       Auf- und Zuklappen und die Tastaturbedienung mit. Der Marker wird
       entfernt, das Feld bleibt wie bisher ein schwebendes Panel. */
    .dd > summary{ list-style:none; cursor:pointer; }
    .dd > summary::-webkit-details-marker{ display:none; }
    .dd > summary::marker{ content:''; }
    .dd-knopf{ display:inline-flex; align-items:center; padding:.15rem; }
    .dd-knopf svg{ transition:transform .25s ease; }
    .dd[open] > .dd-knopf svg{ transform:rotate(180deg); }
    .dd > summary:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
    .dd-feld{ z-index:20; }

    /* ===== Ohne JavaScript =====
       Der Menüknopf braucht ein Skript, die Navigation nicht. Fehlt das
       Skript, steht das Klappmenü offen da — und der Kopf rückt in den
       Textfluss, damit das offene Menü nichts verdeckt. */
    @media (max-width:1023.98px){
      :root:not(.js) #menu-btn{ display:none !important; }
      :root:not(.js) #mobile-menu{ display:block !important; }
      :root:not(.js) header{ position:static; }
    }

    /* ===== Handlungsebene im Kopf =====
       Ein gefüllter Knopf für den nächsten Schritt, daneben ein ruhiger Link
       zu den Stellen. Beides sitzt rechts, damit die Themen links unberührt
       bleiben. Der Knopf ist der einzige gefüllte Knopf der Navigation —
       sonst verliert er seine Bedeutung. */
    .nav-cta{ display:inline-flex; align-items:center; justify-content:center;
              height:2.25rem; padding:0 1.05rem; border-radius:9999px;
              background:var(--accent); color:#fff; font-size:.875rem; font-weight:500;
              line-height:1; white-space:nowrap; transition:background-color .2s ease; }
    .nav-cta:hover{ background:#056f3c; }
    .nav-jobs{ display:inline-flex; align-items:center; gap:.3rem; white-space:nowrap; }
    .nav-jobs .pfeil{ font-size:.85em; line-height:1; }

    /* Im Klappmenü: volle Breite, 48px hoch, damit der Knopf mit dem Daumen
       sicher zu treffen ist. */
    .nav-cta-menu{ height:3rem; width:100%; font-size:1rem; }
    /* Kompakt in der Kopfleiste, solange das Klappmenü aktiv ist. Unter
       480px reicht die Breite neben Logo und Menüknopf nicht — dort steht
       der Knopf nur im geöffneten Menü. */
    .nav-cta-mob{ display:none; }
    @media (min-width:480px) and (max-width:1023.98px){
      /* rechts an den Menüknopf gerückt, nicht in der Mitte schwebend */
      .nav-cta-mob{ display:inline-flex; margin-left:auto; margin-right:.5rem; }
    }

    /* ===== Umschaltpunkt der Navigation: 1024px statt 768px =====
       Mit «Join the team» und «Termin vereinbaren» sind es sieben Elemente.
       Zwischen 768 und 1023 Pixeln stehen die nicht mehr nebeneinander, ohne
       dass Wörter umbrechen. Eigene Klassen, weil das eingebettete Tailwind
       keine lg:-Utilities enthält. */
    @media (max-width:1023.98px){
      .nav-desk{ display:none !important; }
      .nav-burger{ display:inline-flex !important; }
      #mobile-menu:not(.hidden){ display:block !important; }
    }
    /* Bei 1024px stehen sieben Elemente sehr eng am Logo — Deutsch und
       Italienisch haben die längsten Beschriftungen. Bis 1180px daher
       kleinere Abstände, darüber wieder die ruhigeren 2rem. */
    @media (min-width:1024px) and (max-width:1179.98px){
      .nav-desk{ gap:1.25rem !important; }
    }
    @media (min-width:1024px){
      .nav-desk{ display:flex !important; }
      .nav-burger{ display:none !important; }
      #mobile-menu{ display:none !important; }
    }

    /* ===== Rekrutierung auf der Startseite =====
       Bewusst nach dem Referenzband und vor dem Fuss: die Erzählung der
       Startseite bleibt unangetastet, am Ende ist der Block trotzdem nicht
       zu übersehen. Weiss auf Markengrün liegt bei 4.65:1 und trägt damit
       auch Fliesstext; der Fokusring wird weiss, weil Grün auf Grün
       unsichtbar wäre. */
    .rec{ background:var(--accent); color:#fff; }
    .rec-in{ max-width:1440px; margin-inline:auto; padding:4rem 1.25rem 4.5rem; }
    @media (min-width:640px){ .rec-in{ padding-inline:2rem; } }
    @media (min-width:900px){
      /* Zwei Spalten, aber links gebunden: Aussage und Einlösung stehen
         direkt nebeneinander, der Freiraum sammelt sich rechts. Zwei
         gleich breite Spalten rissen bei 1440px ein Loch in die Mitte. */
      .rec-in{ display:grid; grid-template-columns:minmax(0,auto) minmax(18rem,26rem);
               justify-content:start; gap:clamp(2.5rem,5vw,5rem);
               align-items:end; padding-block:6.5rem; }
    }
    .rec-h{ font-family:'Inter Tight',sans-serif; font-weight:600; letter-spacing:-.03em;
            line-height:1.03; font-size:clamp(2.1rem,5vw,3.9rem);
            text-wrap:balance; hyphens:manual; max-width:15ch; }
    .rec-t{ margin-top:1.5rem; font-size:clamp(1.05rem,1.4vw,1.2rem); line-height:1.6;
            max-width:40ch; text-wrap:pretty; }
    @media (min-width:900px){ .rec-t{ margin-top:0; } }
    .rec-cta{ display:inline-flex; align-items:center; gap:.6rem; margin-top:2rem;
              min-height:3rem; padding:0 1.75rem; border-radius:9999px;
              background:#fff; color:var(--ink); font-weight:500;
              transition:background-color .2s ease; }
    .rec-cta:hover{ background:var(--beige); }
    .rec a:focus-visible{ outline:2px solid #fff; outline-offset:3px; }