: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); }


    /* 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; } }

    /* Rollenwahl: natives Auswahlfeld, Rahmen und Radius wie die übrigen
       Bedienelemente der Seite. 44 px Höhe für den Finger. */
    #kt-rollenzeile{ scroll-margin-top:7rem; }
    .k-select{ font:inherit; font-size:1rem; color:var(--ink); background:#fff;
               border:1px solid var(--line); border-radius:9999px;
               padding:.55rem 1.1rem; min-height:44px; max-width:22rem; width:100%; }
    .k-select:hover{ border-color:var(--ink); }
    .k-select:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
    @media (min-width:640px){ .k-select{ width:auto; } }
    /* Nicht über [hidden]: die Blöcke sind display:grid, und .grid gewinnt
       gegen die Preflight-Regel. */
    .k-hide{ display:none !important; }

    .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; }
    }

    /* ===== Rekrutierung im Fuss =====
       Die Startseite hat den grünen Block; hier steht dieselbe Aussage ein
       Register leiser. Der Claim in der Anzeigeschrift, der Link mit dem
       Akzent unterstrichen — genug, um gesehen zu werden, zu wenig, um mit
       dem Handlungsziel der Seite zu konkurrieren. */
    .ft-rec{ display:flex; flex-direction:column; gap:.75rem; align-items:flex-start; }
    @media (min-width:640px){ .ft-rec{ flex-direction:row; align-items:baseline; gap:2rem; } }
    .ft-rec-claim{ font-family:'Inter Tight',sans-serif; font-weight:500;
                   font-size:clamp(1.05rem,1.6vw,1.3rem); letter-spacing:-.01em;
                   color:var(--paper); text-wrap:balance; }
    .ft-rec-link{ display:inline-flex; align-items:baseline; gap:.5rem;
                  color:var(--paper); font-weight:500;
                  border-bottom:2px solid var(--accent); padding-bottom:.15rem;
                  transition:border-color .2s ease, color .2s ease; }
    .ft-rec-link:hover{ color:#fff; border-color:#fff; }

    /* ===== 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; }
    }