/* ═══════════════════════════════════════════════════════════════════
   HIG-Gruppe — PAGE-SPECIFIC
   Loaded last. Only rules that genuinely belong to one route.
   If something appears on two pages it belongs in components.css.

   Phase 3 adds the Seminare teaser. It lives here, not in
   components.css, because the /seminare catalogue gets its own card in
   Phase 6 — this is the homepage's condensed version of it, not the
   shared component.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ STARTSEITE — Anspruch (Atlas „About"-Anatomie) ═══════════════
   Rebuilt 2026-08-06 from the client's reference. Pill far left, claim
   set against it on the right, then one wide photograph with a stack of
   two cards riding over its right edge: a white intro card and a glass
   card carrying a Mission/Leitlinie/Nachweise switcher.

   The sand block behind the stack is not decoration — it is what the
   glass card has to refract. Without it the switcher would blur flat
   white on the right half and the glass would read as flat red.
   ═════════════════════════════════════════════════════════════════ */
.claim{padding-block:var(--section-y) 0}

/* Reference anatomy: badge hard left, claim starting at ~40% and running
   to the right edge. Two columns rather than a centred block. */
.claim__head{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1.6fr);
  gap:var(--s-10);align-items:start}
.claim__head .pill{margin:0}
.claim__title{font-size:var(--t-2xl);line-height:1.1;letter-spacing:-.03em;
  font-weight:var(--fw-display);max-width:22ch}

/* Photograph and card stack share grid-row 1 and overlap by column; the
   sand block is taken out of flow behind both. Explicit z-index on all
   three, because a positioned block otherwise paints over the static
   photograph regardless of source order. */
.claim__grid{position:relative;margin-top:var(--s-12);display:grid;
  grid-template-columns:repeat(12,1fr);align-items:center}

/* Deliberately out of flow: it must be free to sit lower and further
   right than the card stack, which is the whole point of it. It shows in
   the column the stack leaves free on the right, and below the stack
   wherever the photograph is the taller of the two — if the copy ever
   grows past the photo the bottom edge simply tucks in. Decorative, so
   losing that costs nothing. */
.claim__accent{position:absolute;z-index:0;top:var(--s-16);bottom:var(--s-10);
  left:58%;right:0;background:var(--c-stone);border-radius:var(--r-card)}

.claim__media{grid-column:1 / 9;grid-row:1;margin:0;position:relative;z-index:1}
.claim__media img{width:100%;aspect-ratio:3/2;object-fit:cover;
  border-radius:var(--r-card)}
.claim__credit{margin-top:var(--s-3);font-size:var(--t-xs);color:var(--c-muted)}

/* Stops one column short of the right edge — that free column is where
   the sand block shows. */
.claim__panel{grid-column:7 / 12;grid-row:1;position:relative;z-index:2;
  display:grid;gap:var(--s-5)}

/* The reference warms the card towards its bottom-right corner rather
   than leaving it flat white — it is what stops the card looking pasted
   onto the photograph. */
.claim__intro{background:linear-gradient(135deg,var(--c-white) 58%,var(--c-stone));
  border-radius:var(--r-card);box-shadow:var(--sh-float);padding:var(--s-8);
  display:grid;gap:var(--s-8);justify-items:start;
  color:var(--c-muted);font-size:var(--t-sm);line-height:1.65}
.claim__intro strong{color:var(--c-ink);font-weight:var(--fw-strong)}

/* Surface lives in components.css → „Rote Glasflächen". */
.claim__mission{border-radius:var(--r-card);padding:var(--s-8);color:#fff}

.claim__tabs{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-bottom:var(--s-5);
  padding-bottom:var(--s-5);border-bottom:1px solid rgba(255,255,255,.28)}
.claim__tabs[hidden]{display:none}
/* .9, not the .72 this would normally be: the glass composite is far
   lighter than a flat dark card, and 14px at .72 measures 3.5:1 on it.
   Selected state is carried by the pill and the filled dot, not by
   dimming the others — so nothing is lost by holding all three near
   white.
   2026-08-17: das Gewicht ist von 700 auf 500 gefallen; die .9 bleiben
   unveraendert richtig. 14px zaehlt in beiden Faellen als Normaltext
   (die WCAG-Fettschwelle beginnt erst bei 18,66px UND 700), die
   4,5:1-Anforderung haengt hier also nicht am Gewicht. */
.claim__tab{display:flex;align-items:center;gap:var(--s-3);
  border-radius:var(--r-pill);padding:.45rem 1rem;font-size:var(--t-sm);
  font-weight:var(--fw-strong);color:rgba(255,255,255,.9);
  transition:background var(--dur-ui),color var(--dur-ui)}
.claim__tab:hover{color:#fff}
.claim__tab.is-active{background:rgba(255,255,255,.16);color:#fff}
/* the ringed dot the reference sets beside its heading */
.claim__tab-dot{flex:none;width:.7rem;height:.7rem;border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);transition:box-shadow var(--dur-ui)}
.claim__tab.is-active .claim__tab-dot{box-shadow:inset 0 0 0 .35rem #fff}

/* Script-less: every panel stands open under its own heading. With JS the
   headings go and the tabs above take over the job. */
.claim__tafel{font-size:var(--t-md);line-height:1.55}
.claim__tafel + .claim__tafel{margin-top:var(--s-6)}
.claim__tafel-title{font-size:var(--t-lg);font-weight:var(--fw-title);margin-bottom:var(--s-3)}
.js .claim__tafel-title{display:none}
.js .claim__tafel{display:none}
.js .claim__tafel.is-active{display:block}

.claim__list{display:grid;gap:var(--s-4);font-size:var(--t-sm);line-height:1.5}
.claim__list li{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--s-3);align-items:start}
.claim__list svg{width:1.1rem;height:1.1rem;margin-top:.2rem}

@media (max-width:1140px){
  .claim__media{grid-column:1 / 8}
  .claim__panel{grid-column:6 / 12}
  .claim__accent{left:50%}
}
/* Below 900 the stack drops under the photograph, so there is nothing
   left to overlap — the sand block would just be a stray stripe. */
@media (max-width:900px){
  .claim__head{grid-template-columns:1fr;gap:var(--s-5)}
  .claim__grid{grid-template-columns:1fr;gap:var(--s-6);margin-top:var(--s-10)}
  .claim__accent{display:none}
  .claim__media{grid-column:1;grid-row:auto}
  .claim__media img{aspect-ratio:16/10}
  .claim__panel{grid-column:1;grid-row:auto;z-index:auto}
}

/* ═══ STARTSEITE — Über die Gruppe (Atlas-Komposit) ════════════════
   Two halves in one section: a photo collage with a floating white card
   and two dark cards straddling its bottom edge, then three stage cards.
   The dark green of the reference becomes HIG's warm dark and its red.
   ═════════════════════════════════════════════════════════════════ */
/* Die untere Hälfte des Abschnitts liegt auf einem getönten Feld — in
   der Referenz beginnt es etwa auf Höhe der überlappenden Karten. */
.abo{padding-block:var(--section-y) 0;
  background:linear-gradient(180deg,var(--c-white) 0 46%,var(--c-cream) 46% 100%)}

/* .pill--solid (vollrotes Eyebrow) wurde in Phase 0 entfernt — Eyebrows
   laufen jetzt überall im Blush-Ton (DESIGN §2, Entscheidung 2026-08-14). */

.abo__head{text-align:center;max-width:60rem;margin-inline:auto}
.abo__claim{margin-top:var(--s-2);font-size:var(--t-xl);line-height:1.35;
  letter-spacing:-.02em;font-weight:var(--fw-display)}

/* The collage: ONE wide photograph carrying the whole block, the intro
   panel frosted over its top-right corner, and two cards straddling its
   bottom edge — the overlap language the hero already uses.

   Rebuilt 2026-08-06: this was a square photo left plus a second one
   right. The pair is now a single picture and the intro reads on top of
   it rather than beside it. */
/* Die Referenz führt diesen Abschnitt schmaler als die übrige Seite:
   ihre Inhaltsspalte misst ~67% des Viewports, unsere Shell 95%. */
.abo__collage{margin:var(--s-12) auto 0;max-width:72rem;display:grid;
  grid-template-columns:repeat(12,1fr);align-items:start}
.abo__photo{margin:0;position:relative}
.abo__photo img{width:100%;object-fit:cover;border-radius:var(--r-sm)}
.abo__photo--main{grid-column:1 / 13;grid-row:1}
/* 3/2 is the source ratio of the group photograph — anything wider is a
   centre crop, and on a picture of people that takes the tops of heads. */
.abo__photo--main img{aspect-ratio:3/2}

/* Both bottom corners of the picture are taken by the straddling cards
   and the top right by the intro panel, so the credit takes the one
   corner left — as a chip, because plain white text cannot be trusted
   over an unknown photograph. Same blur idiom as .pcard__cat. */
.abo__credit{position:absolute;left:var(--s-5);top:var(--s-5);z-index:2;
  background:rgba(29,29,27,.42);-webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);border-radius:var(--r-pill);
  padding:.35em .9em;font-size:var(--t-xs);color:#fff}

/* Was a frosted panel carrying the intro copy. Dropped 2026-08-06: a
   panel that size sat squarely over the right-hand face, and no amount
   of tuning fixes a hole punched through the subject of the picture.
   Only the CTA stays, small enough to keep to the corner. The copy is
   not re-homed — the claim above the photograph already carries it. */
.abo__cta{grid-column:8 / 13;grid-row:1;justify-self:end;align-self:start;
  z-index:2;margin:var(--s-8) var(--s-8) 0 0;box-shadow:var(--sh-float)}

/* Row 2 since the second photograph went — the picture is row 1 alone
   and these ride up over its bottom edge. */
.abo__stat,.abo__mission{grid-row:2;z-index:2;border-radius:var(--r-card);
  padding:var(--s-8);color:#fff;margin:-7rem 0 0}
/* 2026-08-16: war --c-deep. Die Schwere trägt jetzt die Marke selbst —
   --red-900 ist der tiefste Wert der Rot-Leiter und dunkelt die Karte
   ab, ohne einen Braunton einzuführen (DESIGN §13). */
.abo__stat{grid-column:2 / 6;background:var(--red-900);
  font-size:var(--t-sm);line-height:1.6;color:rgba(255,255,255,.78)}
.abo__stat-head{display:flex;align-items:baseline;gap:var(--s-4);margin-bottom:var(--s-5);
  color:#fff;font-weight:var(--fw-strong);font-size:var(--t-sm);line-height:1.25;flex-wrap:wrap}
/* Weiss, seit die Karte selbst rot ist — Rot auf Rot war matschig. */
.abo__num{font-size:var(--t-num);line-height:.9;letter-spacing:-.045em;font-weight:var(--fw-strong);
  font-variant-numeric:tabular-nums;color:#fff}

/* Surface lives in components.css → „Rote Glasflächen". Setting
   `background` here would win the cascade and kill the glass. */
/* Stops at column 12, not 13: flush with the photograph's right edge the
   card read as a mis-snapped part of the picture rather than a thing
   lying on top of it. Now it is inset on the right exactly as .abo__stat
   is on the left, and both edges are visibly the card's own. */
.abo__mission{grid-column:6 / 12;margin-left:var(--s-5);
  display:grid;grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);gap:var(--s-8);
  align-items:center}
/* hellere Kachel innerhalb der Karte, kein eigenes Element davor */
.abo__cert{margin:0;background:rgba(255,255,255,.12);border-radius:var(--r-sm);
  padding:var(--s-5);display:grid;gap:var(--s-4);justify-items:center;text-align:center;
  font-size:var(--t-xs);font-weight:var(--fw-strong);line-height:1.3}

/* white tile: the seal is red line art and would vanish on the red card */
.abo__seal-tile{display:grid;place-items:center;background:var(--c-white);
  border-radius:var(--r-sm);padding:var(--s-4);width:100%}
.abo__seal-tile img{width:3rem;height:auto;mix-blend-mode:multiply}
.abo__mission-title{display:flex;align-items:center;gap:var(--s-3);
  padding-bottom:var(--s-5);border-bottom:1px solid rgba(255,255,255,.28);
  font-size:var(--t-lg);font-weight:var(--fw-title)}
.abo__mission-title span{width:.55rem;height:.55rem;border-radius:var(--r-pill);
  background:#fff;flex:none}
.abo__mission-text{margin-top:var(--s-5);font-size:var(--t-md);line-height:1.55}
.abo__cert figcaption{margin:0}

/* ── B · the three stages as cards ── */
.abo__services{padding-block:var(--section-y)}
/* Was `auto minmax(0,1fr)`, the auto track holding the „Leistungen" pill.
   The pill was deleted 2026-08-06; left as two tracks the heading would
   have sized to max-content in the auto track and run wide. */
.abo__services-head{margin-bottom:var(--s-10);max-width:64rem}
.abo__services-title{font-size:var(--t-2xl);line-height:1.1;letter-spacing:-.03em;
  font-weight:var(--fw-display)}
.abo__services-head p{margin-top:var(--s-4);max-width:58ch;color:var(--c-muted);
  font-size:var(--t-md)}

/* Revised 2026-08-06: the cards hold the LEFT and stop at 84%, with the
   arrow pair pushed to the far right of the row. Narrower cards were the
   ask; the freed space is what the arrows now sit in rather than a void.
   All three stages fit inside that 84% on a wide screen, so the full
   catalogue — 11 Leistungen — reads without scrolling. */
.abo__rail{display:grid;grid-template-columns:minmax(0,84%) minmax(0,1fr);
  gap:var(--s-8);align-items:center}
.abo__cards{display:flex;gap:var(--s-5);overflow-x:auto;
  scroll-snap-type:x mandatory;padding:var(--s-8) 0 var(--s-6);scrollbar-width:none}
.abo__cards::-webkit-scrollbar{display:none}
.abo__card{flex:1 1 0;min-width:15rem;scroll-snap-align:start}

/* die gestapelten Pfeile rechts, wie in der Referenz */
.abo__nav{display:grid;gap:var(--s-3);justify-self:end}
.abo__nav[hidden]{display:none}
.abo__nav-btn{width:3.2rem;height:3.2rem;display:grid;place-items:center;padding:.95rem;
  background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-sm);
  box-shadow:var(--sh-card);color:var(--c-deep);
  transition:background var(--dur-ui),color var(--dur-ui)}
.abo__nav-btn:hover{background:var(--c-signal);color:#fff;border-color:transparent}
.abo__nav-btn[data-dir="-1"] svg{transform:rotate(180deg)}

.abo__card{position:relative;background:var(--c-white);border:1px solid var(--c-line);
  border-radius:var(--r-card);padding:var(--s-6);
  transition:border-color var(--dur-ui),box-shadow var(--dur-ui),transform var(--dur-ui) var(--ease)}
.abo__card:hover{border-color:transparent;box-shadow:var(--sh-card);transform:translateY(-4px)}
/* the reference's little square badge, lifted above the card's corner */
.abo__card-arrow{position:absolute;top:calc(var(--s-6) * -1);right:var(--s-6);
  display:grid;place-items:center;width:3rem;height:3rem;padding:.85rem;
  background:var(--c-white);border:1px solid var(--c-line);color:var(--c-signal);
  border-radius:var(--r-sm);
  transition:background var(--dur-ui),color var(--dur-ui),border-color var(--dur-ui)}
.abo__card-arrow svg{transform:rotate(-45deg)}
.abo__card:hover .abo__card-arrow{background:var(--c-signal);color:#fff;border-color:transparent}
.abo__card .ic{margin-bottom:var(--s-6)}
.abo__card-title{font-size:var(--t-lg);line-height:1.2;letter-spacing:-.02em;font-weight:var(--fw-title)}
.abo__card-text{margin-top:var(--s-4);color:var(--c-muted);font-size:var(--t-sm);
  line-height:1.6}
.abo__card-list{margin-top:var(--s-6)}
.abo__card-list li{border-top:1px solid var(--c-line)}
.abo__card-list a{position:relative;display:block;padding:var(--s-3) 0 var(--s-3) 1rem;
  font-size:var(--t-sm);font-weight:var(--fw-strong);transition:color var(--dur-ui)}
.abo__card-list a::before{content:"";position:absolute;left:0;top:50%;width:.3rem;height:.3rem;
  margin-top:-.15rem;border-radius:var(--r-pill);background:var(--c-signal)}
.abo__card-list a:hover{color:var(--c-signal)}

@media (max-width:1140px){
  .abo__stat{grid-column:1 / span 5}
  .abo__mission{grid-column:6 / span 6}
  /* the 84% inset is a wide-screen luxury; below this the row needs
     every pixel it can get before the cards start scrolling */
  .abo__rail{grid-template-columns:minmax(0,1fr) auto}
  .abo__card{flex:0 0 22rem}
}
@media (max-width:900px){
  .abo__collage{grid-template-columns:1fr;gap:var(--s-5)}
  .abo__photo--main,.abo__cta,.abo__stat,.abo__mission{
    grid-column:1;grid-row:auto;margin:0;z-index:auto}
  .abo__cta{justify-self:start}
  .abo__photo--main img{aspect-ratio:4/3}
  .abo__card{flex:0 0 82%}
  .abo__rail{grid-template-columns:1fr}
  .abo__nav{grid-auto-flow:column;justify-content:end}
  .abo__mission{grid-template-columns:1fr;gap:var(--s-6)}
  .abo__seal{max-width:11rem}
}

/* ═══ STARTSEITE — alle Leistungen ═════════════════════════════════
   The catalogue, directly under the hero. The spine's stage cards below
   deliberately do NOT list their services: the same eleven titles twice
   within one screen reads as a mistake.

   Trailing padding is 0 — the spine below brings its own --section-y, and
   two stacked read as a hole (see DESIGN.md §9).

   `karten` is the shipping layout. The alternatives under review live in
   dev.css, so production never carries a layout nobody chose.
   ═════════════════════════════════════════════════════════════════ */
.lst{padding-block:var(--section-y) 0}
.lst__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4)}

.lcard{display:flex}
/* The text wrapper exists only for the layouts that need two columns.
   Everywhere else it dissolves, so the card is laid out exactly as before. */
.lcard__body{display:contents}
/* The hover photograph belongs to the porr/harrer layouts (dev.css). */
.lcard__media{display:none}
.lcard__link{position:relative;flex:1;display:flex;flex-direction:column;
  background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-card);
  padding:var(--s-6) var(--s-6) var(--s-10);
  transition:border-color var(--dur-ui),box-shadow var(--dur-ui),transform var(--dur-ui) var(--ease)}
.lcard__link:hover{border-color:transparent;box-shadow:var(--sh-card);transform:translateY(-3px)}

.lcard__stage{display:flex;align-items:center;gap:var(--s-2);font-size:var(--t-xs);
  font-weight:var(--fw-strong);color:var(--c-muted);letter-spacing:.02em}
.lcard__no{color:var(--c-signal);letter-spacing:.06em}
/* Firmen-Kürzel des erbringenden Unternehmens (Phase 2, Dachmarke) —
   Haarlinie statt Füllung (DESIGN §2), rechtsbündig in der Stufenzeile */
.lcard__co{margin-left:auto;border:1px solid var(--c-line);border-radius:var(--r-sm);
  padding:.25em .6em;color:var(--c-muted);letter-spacing:.05em;white-space:nowrap;
  transition:color var(--dur-ui),border-color var(--dur-ui)}
.lcard__link:hover .lcard__co{border-color:var(--c-signal);color:var(--c-signal)}
.lcard__title{margin-top:var(--s-4);font-size:var(--t-md);line-height:1.25;
  letter-spacing:-.02em;font-weight:var(--fw-title);transition:color var(--dur-ui)}
.lcard__link:hover .lcard__title{color:var(--c-signal)}
/* HIG's own slogan — their voice, so it gets the brand colour */
.lcard__claim{margin-top:var(--s-3);font-size:var(--t-xs);font-weight:var(--fw-strong);color:var(--c-signal)}

/* display:grid, not the default inline: width/height are ignored on an
   inline box, and the moment a layout takes this out of `position:absolute`
   the SVG inside would blow up to fill its parent. */
.lcard__arrow{position:absolute;right:var(--s-5);bottom:var(--s-5);display:grid;
  place-items:center;width:1.6rem;height:1.6rem;
  color:var(--c-muted);transition:color var(--dur-ui),transform var(--dur-ui) var(--ease)}
.lcard__link:hover .lcard__arrow{color:var(--c-signal);transform:translateX(3px)}

@media (max-width:1140px){ .lst__grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:900px){ .lst__grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .lst__grid{grid-template-columns:1fr} }

/* ═══ STARTSEITE — Referenzen ══════════════════════════════════════
   Default layout `eigen`: rounded cards in a three-up grid, each keeping
   the two things the reference has no equivalent for — the lph-bar and
   the photographer's credit.
   ═════════════════════════════════════════════════════════════════ */
/* Oberes --section-y ergänzt in Phase 0: die Leistungen-Sektion darüber
   endet bewusst auf 0 (s. .lst) — ohne eigenes oberes Padding klebten die
   beiden Abschnitte aneinander (DESIGN §6: genau EIN --section-y je Naht). */
.pstrip{padding-block:var(--section-y)}
.pstrip__actions{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap}
.pstrip__nav{display:flex;gap:var(--s-2)}
.pstrip__nav[hidden]{display:none}
.pstrip__arrow{width:2.9rem;height:2.9rem;border-radius:var(--r-pill);display:grid;
  place-items:center;padding:.85rem;background:var(--c-white);color:var(--c-deep);
  border:1px solid var(--c-line);transition:background var(--dur-ui),color var(--dur-ui)}
.pstrip__arrow:hover{background:var(--c-signal);color:#fff;border-color:transparent}
.pstrip__arrow[data-dir="-1"] svg{transform:rotate(180deg)}

.pstrip__rail{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.pitem__media{position:relative;border-radius:var(--r-img);overflow:hidden;aspect-ratio:4/3;
  background:var(--c-stone)}
.pitem__media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.pitem__link:hover .pitem__media img{transform:scale(1.045)}
/* the reference's corner badge — off in this layout */
.pitem__badge{display:none}

.pitem__caption{padding:var(--s-6) var(--s-2) 0}
.pitem__cat{display:inline-block;color:var(--c-signal);font-size:var(--t-xs);
  font-weight:var(--fw-strong);letter-spacing:.08em;text-transform:uppercase}
.pitem__title{margin-top:var(--s-3);font-size:var(--t-lg);line-height:1.15;
  letter-spacing:-.025em;font-weight:var(--fw-title);transition:color var(--dur-ui)}
.pitem__link:hover .pitem__title{color:var(--c-signal)}
.pitem__meta{margin-top:var(--s-2);color:var(--c-muted);font-size:var(--t-sm)}
.pitem__foot{padding:0 var(--s-2)}
.pitem__credit{margin-top:var(--s-4);font-size:var(--t-xs);color:var(--c-muted)}

@media (max-width:1140px){ .pstrip__rail{grid-template-columns:1fr 1fr} }
@media (max-width:760px){ .pstrip__rail{grid-template-columns:1fr} }

/* ═══ STARTSEITE — Die Gruppe (Verzeichnis, 2026-08-16) ═══════
   Die Dachmarken-Sektion, weit oben auf der Seite. Links ein
   Verzeichnis der fünf Töchter, gruppiert unter 01 Planen · 02 Bauen ·
   03 Prüfen; rechts das Panel der ausgewählten.

   Zwei Korrekturen an der ersten Fassung (Simon):
   • Die Schalter lagen waagrecht mit den Stufen-Labels DAZWISCHEN. Das
     war schwer als Bedienelement zu lesen. Eine markierte Zeile in
     einer gestapelten Liste ist eindeutig — dasselbe Bild wie in einem
     Einstellungsdialog.
   • Der Hintergrund war Cream. Jetzt Weiß: die Sektion trägt ihre
     Betonung über die Panel-Fläche, nicht über ein Feld (DESIGN §6 —
     getönte Flächen brauchen einen Grund, und hier gab es keinen).

   Ohne JS: alle Panels stehen offen untereinander, die Einträge sind
   Anker (PRINCIPLES §5). app.js setzt hidden + APG-Tab-Semantik.
   ═════════════════════════════════════════════════ */
.grp{padding-block:var(--section-y)}
/* Gleich hohe Spalten (stretch ist Grid-Vorgabe, hier absichtlich NICHT
   auf start gestellt): Verzeichnis und Panel enden auf derselben Linie,
   der Abschnitt bekommt eine ruhige Unterkante.

   Kein position:sticky am Verzeichnis — geprüft und verworfen: sticky
   greift erst, wenn die Begleitspalte kürzer ist als der Inhalt, an dem
   sie vorbeiscrollt. Hier sind beide gleich hoch, also gäbe es nichts
   vorbeizuscrollen; die Regel wäre tote Deklaration. */
.grp__sw{display:grid;grid-template-columns:minmax(0,20rem) minmax(0,1fr);
  gap:var(--s-10)}

/* ── Verzeichnis links ──
   Zustände ohne Flächen und ohne Schatten (DESIGN §2: kleine Elemente
   differenzieren über Haarlinie, nicht über Füllung; Cream als
   Hover-Fläche war genau der Fehler, den §2 verbietet).

   Getragen wird die Auswahl von drei Markenmitteln:
   • die Giebel-Kachel füllt sich rot mit weißem Giebel — exakt das
     Bild des Karten-Pins und des Logos;
   • das Kürzel wechselt auf Signal;
   • die Trennlinie zwischen Liste und Panel wird auf Höhe der aktiven
     Zeile rot und 2px stark — die Haarlinie selbst zeigt an, welche
     Zeile am Panel hängt.
   Hover rückt die Zeile 3px nach rechts (dieselbe Geste wie der
   Pfeil-Kreis, DESIGN §7) und färbt Rahmen und Kürzel rot. */
.grp__rail{position:relative;display:grid;align-content:start;
  padding-right:var(--s-6)}
/* die durchgehende Trennlinie — die Zeilen malen ihr eigenes Stück darauf */
.grp__rail::after{content:"";position:absolute;top:0;bottom:0;right:0;
  width:1px;background:var(--c-line)}

.grp__stage{display:flex;align-items:baseline;gap:var(--s-2);
  margin:var(--s-6) 0 var(--s-2);
  font-size:var(--t-xs);font-weight:var(--fw-strong);letter-spacing:.12em;text-transform:uppercase;
  color:var(--c-muted)}
.grp__stage:first-child{margin-top:0}
.grp__stage-no{color:var(--c-signal)}

.grp__tab{position:relative;display:grid;
  grid-template-columns:auto minmax(0,1fr);gap:var(--s-2) var(--s-4);
  align-items:center;padding:var(--s-3) 0;
  transition:transform var(--dur-ui) var(--ease)}
.grp__tab:hover,.grp__tab.is-active{transform:translateX(3px)}

/* das rote Stück der Trennlinie — sitzt genau auf der Rail-Linie */
.grp__tab::after{content:"";position:absolute;top:0;bottom:0;
  right:calc(var(--s-6) * -1);width:2px;border-radius:2px;
  background:var(--c-signal);opacity:0;
  transition:opacity var(--dur-ui)}
/* Die Zeile selbst ist um 3px gerückt; das Linienstück muss diese
   Verschiebung zurücknehmen, sonst sitzt es neben der Trennlinie. */
.grp__tab.is-active::after{opacity:1;transform:translateX(-3px)}

.grp__tab-mark{grid-row:span 2;display:grid;place-items:center;
  width:2.4rem;height:2.4rem;padding:.4rem;border-radius:var(--r-sm);
  border:1px solid var(--c-line);color:var(--c-signal);
  transition:background var(--dur-ui),color var(--dur-ui),border-color var(--dur-ui)}
.grp__tab:hover .grp__tab-mark{border-color:var(--c-signal)}
/* Rote Platte, weißer Giebel — dasselbe Zeichen wie der Karten-Pin. */
.grp__tab.is-active .grp__tab-mark{background:var(--c-signal);color:#fff;
  border-color:transparent}

.grp__tab-text{display:flex;align-items:baseline;gap:var(--s-2);flex-wrap:wrap}
.grp__tab-code{font-size:var(--t-md);font-weight:var(--fw-strong);letter-spacing:.03em;
  transition:color var(--dur-ui)}
.grp__tab:hover .grp__tab-code,
.grp__tab.is-active .grp__tab-code{color:var(--c-signal)}
.grp__tab-role{font-size:var(--t-xs);color:var(--c-muted)}
.grp__tab-where{grid-column:2;font-size:var(--t-xs);color:var(--c-muted)}

/* ── Panel rechts ──
   Alle fünf Panels liegen mit JS übereinander in EINER Rasterzelle. Der
   Container ist dadurch immer so hoch wie das längste Panel — der
   Kasten springt beim Umschalten nicht mehr, und die Sektion behält
   ihre Höhe. Ausgeblendet wird per visibility (nimmt aus Fokus und
   Vorlesereihenfolge, behält aber die Höhe), nicht per display.

   Ohne JS bleibt es ein normaler Stapel: fünf Panels untereinander,
   alle lesbar (PRINCIPLES §5). Deshalb die .js-Klammer. */
.js .grp__panels{display:grid}
.js .grp__panel{grid-area:1 / 1}
.js .grp__panel[hidden]{display:flex;visibility:hidden}
.js .grp__panel + .grp__panel{margin-top:0}

.grp__panel{display:flex;flex-direction:column;
  background:var(--c-white);border:1px solid var(--c-line);
  border-radius:var(--r-card);padding:var(--s-10)}
.grp__panel + .grp__panel{margin-top:var(--s-5)}   /* nur ohne JS sichtbar */
.grp__panel[hidden]{display:none}
.grp__panel:focus-visible{outline:2px solid var(--c-signal);outline-offset:3px}

.grp__panel-badge{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.grp__panel-mark{display:grid;place-items:center;width:1.75rem;height:1.75rem;color:var(--c-signal)}
.grp__panel-code{font-size:var(--t-lg);font-weight:var(--fw-strong);color:var(--c-signal);letter-spacing:.04em}
.grp__panel-role{font-size:var(--t-xs);font-weight:var(--fw-strong);letter-spacing:.12em;text-transform:uppercase;
  color:var(--c-muted)}
.grp__panel-step{margin-left:auto;font-size:var(--t-xs);font-weight:var(--fw-strong);letter-spacing:.06em;
  color:var(--c-muted);white-space:nowrap}
.grp__panel-name{margin-top:var(--s-4);font-size:var(--t-xl);line-height:1.12;
  letter-spacing:-.03em;font-weight:var(--fw-display);hyphens:auto}
.grp__panel-lead{margin-top:var(--s-4);color:var(--c-muted);font-size:var(--t-md);
  line-height:1.65;max-width:56ch}
.grp__panel-actions{margin-top:var(--s-8);margin-bottom:var(--s-8);display:flex;align-items:center;gap:var(--s-6);
  flex-wrap:wrap}
.grp__maplink{font-size:var(--t-sm);font-weight:var(--fw-strong);color:var(--c-signal);
  border-bottom:1px solid var(--c-line);transition:border-color var(--dur-ui)}
.grp__maplink:hover{border-color:var(--c-signal)}

/* Fakten als Fußzeile des Panels — eine Definitionsliste, weil es eine ist. */
/* margin-top:auto — die Fakten sitzen an der Unterkante, damit die
   gemeinsame Höhe der beiden Spalten nicht als Leerlauf endet. */
.grp__facts{margin-top:auto;padding-top:var(--s-6);
  border-top:1px solid var(--c-line);
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6)}
.grp__facts > div{display:grid;gap:var(--s-2);align-content:start}
.grp__facts dt{font-size:var(--t-xs);font-weight:var(--fw-strong);letter-spacing:.1em;
  text-transform:uppercase;color:var(--c-muted)}
.grp__facts dd{display:grid;gap:var(--s-1);justify-items:start;
  font-size:var(--t-sm);font-weight:var(--fw-strong)}
.grp__facts dd a{border-bottom:1px solid var(--c-line);
  transition:color var(--dur-ui),border-color var(--dur-ui)}
.grp__facts dd a:hover{color:var(--c-signal);border-color:var(--c-signal)}

@media (max-width:1140px){
  .grp__sw{grid-template-columns:minmax(0,17rem) minmax(0,1fr);gap:var(--s-8)}
  .grp__panel{padding:var(--s-8)}
  .grp__facts{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  /* Verzeichnis über das Panel — fünf Zeilen bleiben auch am Handy
     eine Liste; eine waagrechte Scroll-Leiste wäre hier der Rückschritt,
     der gerade behoben wurde. */
  .grp__sw{grid-template-columns:1fr;gap:var(--s-8)}
  .grp__rail{padding-right:0;padding-bottom:var(--s-6);
    border-bottom:1px solid var(--c-line)}
  /* Die senkrechte Trennlinie und ihr rotes Stück ergeben einspaltig
     keinen Sinn — die Auswahl trägt hier die Giebel-Kachel allein. */
  .grp__rail::after,.grp__tab::after{display:none}
  .grp__panel-step{margin-left:0;flex-basis:100%}
}
@media (max-width:520px){
  .grp__facts{grid-template-columns:1fr}
}

/* ═══ STARTSEITE — Karriere ════════════════════════════════════════
   Left: badge, claim, lead, then rows of icon · title · divider · text.
   Right: a photograph running off the right edge with two cards floating
   over it. The reference's green becomes HIG's warm dark and red.
   ═════════════════════════════════════════════════════════════════ */
.kar{padding-block:var(--section-y);overflow:hidden}
.kar__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,46%);
  gap:var(--s-16);align-items:center}

.kar__title{margin-top:var(--s-2);font-size:var(--t-2xl);line-height:1.1;
  letter-spacing:-.03em;font-weight:var(--fw-display)}
.kar__lead{margin-top:var(--s-5);max-width:52ch;color:var(--c-muted);font-size:var(--t-md)}
.kar__none{margin-top:var(--s-8);font-size:var(--t-sm);font-weight:var(--fw-strong);color:var(--c-signal)}

.kar__list{margin-top:var(--s-8);display:grid;gap:var(--s-6)}
.kar__row{display:grid;grid-template-columns:auto minmax(0,15rem) minmax(0,1fr);
  gap:var(--s-6);align-items:center}
.kar__row .ic{width:3.25rem;height:3.25rem;padding:.9rem}
.kar__row-title{font-size:var(--t-md);line-height:1.25;letter-spacing:-.02em;font-weight:var(--fw-title)}
/* the divider the reference puts between title and text */
.kar__row-text{padding-left:var(--s-6);border-left:1px solid var(--c-line);
  color:var(--c-muted);font-size:var(--t-sm);line-height:1.6}
.kar__row-meta{margin-top:var(--s-2);font-weight:var(--fw-strong);color:var(--c-muted);
  font-size:var(--t-xs)}
/* benefits have no second column — the title spans the text slot too */
.kar__row--benefit{grid-template-columns:auto minmax(0,1fr)}
.kar__row--benefit .ic{width:2.6rem;height:2.6rem;padding:.7rem}
.kar__row--benefit .kar__row-title{font-size:var(--t-sm);font-weight:var(--fw-strong);
  color:var(--c-ink)}

/* the photograph runs off the right edge of the viewport.
   Stretched on purpose: it runs the full height of the job list beside
   it. That does mean the picture grows with the vacancy count — briefly
   capped at 32rem on 2026-08-06 and put back the same day, the full
   height is wanted. */
.kar__media{position:relative;align-self:stretch;min-height:34rem}
.kar__photo{position:absolute;inset:0 calc(50% - 50vw) 0 0;margin:0}
.kar__photo img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-sm) 0 0 var(--r-sm)}
.kar__credit{position:absolute;left:var(--s-5);bottom:var(--s-4);font-size:var(--t-xs);
  color:rgba(255,255,255,.72)}

/* Surface lives in components.css → „Rote Glasflächen". Setting
   `background` here would win the cascade and kill the glass.
   The „4-Tage-Woche" card above this one was deleted 2026-08-06. This
   one sits at the TOP of the picture, not centred against it — the small
   top inset only keeps it from snapping to the photograph's edge. On a
   tall list that leaves a lot of open picture below it, which is the
   intent. */
.kar__cta{position:relative;z-index:2;margin:var(--s-6) 0 0 var(--s-8);max-width:26rem;
  color:#fff;border-radius:var(--r-card);padding:var(--s-8)}
.kar__cta-title{font-size:var(--t-xl);line-height:1.15;letter-spacing:-.03em;
  font-weight:var(--fw-title);margin-bottom:var(--s-8)}
.kar__cta-meta{margin-top:var(--s-5);font-size:var(--t-xs);color:rgba(255,255,255,.8)}

@media (max-width:1024px){
  .kar__grid{grid-template-columns:1fr;gap:var(--s-10)}
  .kar__media{min-height:0;align-self:auto}
  .kar__photo{position:relative;inset:auto;margin-bottom:var(--s-6)}
  .kar__photo img{aspect-ratio:16/9;border-radius:var(--r-sm)}
  .kar__credit{position:static;color:var(--c-muted);margin-top:var(--s-3)}
  .kar__cta{margin-left:0;max-width:none}
}
@media (max-width:620px){
  .kar__row{grid-template-columns:auto minmax(0,1fr)}
  .kar__row-text{grid-column:1 / -1;padding-left:0;border-left:0;
    border-top:1px solid var(--c-line);padding-top:var(--s-4)}
}

/* ── Stellenliste — kompakte Container ──
   Sie stehen in der Textspalte, wo vorher die Aufzählung stand, also
   muss jede Stelle klein funktionieren: Titel, Tags, Text, zwei
   knappe Aktionen. Roter Akzentbalken links beim Hovern. */
.joblist{margin-top:var(--s-8);display:grid;gap:var(--s-4)}
.job{position:relative;overflow:hidden;background:var(--c-white);
  border:1px solid var(--c-line);border-radius:var(--r-sm);
  padding:var(--s-5) var(--s-6);transition:border-color var(--dur-ui)}
.job:hover{border-color:var(--c-muted-d)}
.job::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--c-signal);opacity:0;transition:opacity var(--dur-ui)}
.job:hover::before{opacity:1}
/* Initiativ unterscheidet sich per gestrichelter Kontur, nicht per
   Fuellung (2026-08-14). */
.job--initiativ{border-style:dashed}

.job__title{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;
  font-size:var(--t-md);line-height:1.25;letter-spacing:-.02em;font-weight:var(--fw-title)}
.job__tags{margin-top:var(--s-3);display:flex;gap:var(--s-2);flex-wrap:wrap}
.job__tag{border:1px solid var(--c-signal);color:var(--c-signal);border-radius:var(--r-sm);
  padding:.3em .7em;font-size:var(--t-xs);font-weight:var(--fw-strong);letter-spacing:.07em;
  text-transform:uppercase;white-space:nowrap;line-height:1.3}
.job__tag--quiet{border-color:var(--c-line);color:var(--c-muted)}
.job__text{margin-top:var(--s-4);color:var(--c-muted);font-size:var(--t-sm);line-height:1.55}

.job__actions{margin-top:var(--s-5);display:flex;gap:var(--s-2);flex-wrap:wrap}
.job__btn{display:inline-flex;align-items:center;gap:var(--s-3);
  padding:.6rem .9rem;border:1px solid var(--c-line);border-radius:var(--r-sm);
  background:var(--c-white);font-size:var(--t-xs);font-weight:var(--fw-strong);letter-spacing:.05em;
  text-transform:uppercase;line-height:1.2;
  transition:background var(--dur-ui),color var(--dur-ui),border-color var(--dur-ui)}
.job__btn svg{flex:none;width:1rem;height:1rem}
.job__btn:hover{border-color:var(--c-signal);color:var(--c-signal)}
.job__btn--solid{background:var(--c-signal);border-color:transparent;color:#fff}
.job__btn--solid:hover{background:var(--c-signal-d);color:#fff}
/* Seit Phase 4 ist der Titel der Link auf das Stellenblatt — die Karte
   selbst traegt zwei Ziele und darf deshalb kein <a> sein. */
.job__title a{transition:color var(--dur-ui)}
.job:hover .job__title a{color:var(--c-signal)}
/* Der Weg von der Startseite in die vollstaendige Liste. */
.kar__more{margin-top:var(--s-8)}

/* ═══ STARTSEITE — Standorte ★ ═════════════════════════════════════
   Default layout `eigen`: a wide map band with the five locations as a
   card rail straddling its bottom edge — the same overlap language the
   stat cards use against the hero, so the section belongs to this site
   rather than to a reference.

   The list is the content and the map is the illustration: five offices
   have to read as coverage, not as sprawl.
   ═════════════════════════════════════════════════════════════════ */
/* ── ZWEI LAYOUTS, beide gepflegt (17.08.2026) ─────────────────────
   --breit  Karte vollbreit, die fünf Boxen als Reihe darüber, über die
            Kartenkante gelegt (--overlap, DESIGN §5). Der Stand bis
            17.08.; auf einem 1920er Viewport rund 1460px hoch, also gut
            anderthalb Bildschirme.
   --split  Zweispaltig: Boxen links als Akkordeon, Karte rechts auf
            Spaltenhöhe. Passt in einen Bildschirm, verliert dafür das
            Überlappungs-Motiv.
   Umgeschaltet wird in includes/config.php (HIG_MAP_LAYOUT), zum
   Vergleichen genügt ?karte=breit bzw. ?karte=split. Alles, was BEIDE
   Varianten teilen — Chips, Boxen-Innenleben, Pins, Popup, Grenzen,
   Zurück-Knopf — steht unscoped; nur das Layout hängt an der Variante. */
.map-sec{padding-block:var(--section-y)}
.map-sec__grid{display:grid;grid-template-columns:1fr;gap:0}

/* Filter-Chips — in Phase 2 reaktiviert: mit der Leistungs-Dimension
   (Planung/Löschanlagenbau/Prüfung) haben sie jetzt einen echten Job —
   sie beantworten „wer ist wo für mich zuständig?" (Dachmarke). */
.map-sec__chips{display:grid;gap:var(--s-3);margin-bottom:var(--s-6)}
.map-sec--split .map-sec__chips{margin-bottom:var(--s-5)}
.map-sec__chiprow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2)}
.map-sec__chiplabel{min-width:5.5rem;font-size:var(--t-xs);font-weight:var(--fw-strong);
  letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted)}
.chip--filter{cursor:pointer;transition:background var(--dur-ui),color var(--dur-ui),
  border-color var(--dur-ui)}
.chip--filter span{color:var(--c-muted)}
/* DESIGN §7: jedes interaktive Element hat einen Hover. Der fehlte hier
   seit Phase 2 — die Transition war deklariert, der Zustand nicht. */
.chip--filter:hover{border-color:var(--c-signal);color:var(--c-signal)}
.chip--filter.is-active:hover{background:var(--c-signal-d);color:#fff}
/* Trefferfläche: der Chip als Beschriftung darf 30px hoch sein, der Chip
   als Knopf nicht — DESIGN §12 verlangt 40px. Nur padding-block wächst,
   das Aussehen bleibt. Betrifft auch die Standort-Chips der Startseite
   (Phase 2), wo derselbe Verstoß seit jeher steht. */
.chip--filter{padding-block:.62rem}
.chip--filter.is-active{background:var(--c-signal);border-color:transparent;color:#fff}
.chip--filter.is-active span{color:rgba(255,255,255,.7)}

/* Gefiltert wird durch Abblenden, nicht Ausblenden — die 5 Standorte
   bleiben als Abdeckung lesbar, der Treffer sticht hervor. */
.loccard.is-off{opacity:.35;box-shadow:none}
.loccard.is-off:hover{opacity:1}
.map-pin.is-off{opacity:.22}

.map{border-radius:var(--r-card);overflow:hidden;background:var(--c-stone);z-index:0}
.map[hidden]{display:none}

/* ── Variante „breit" — der Stand bis 17.08.2026 ─────────────────── */
/* no JS → no map, and no empty grey box promising one either.
   order:-1 — the list comes first in the DOM (it is the content), but in
   this layout it has to sit UNDER the map so it can straddle its edge. */
.map-sec--breit .map{aspect-ratio:21/9}
.map-sec--breit .map-sec__map{position:relative;order:-1}
.map-sec--breit .loclist{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s-4);
  position:relative;z-index:2;margin-top:calc(var(--overlap) * -1);
  padding-inline:var(--s-5)}
.map-sec--breit .loccard{padding:var(--s-6);box-shadow:var(--sh-card)}
.map-sec--breit .loccard:hover,.map-sec--breit .loccard.is-active{transform:translateY(-3px)}

/* ── Variante „split" — zweispaltig, Boxen als Akkordeon ─────────── */
/* Der Sektionskopf steht hier zweispaltig — Titel links, Beitext und Weg
   rechts. DESIGN §13 (16.08.) hatte .sec-head--row global GESTAPELT, und
   zwar mit einem klaren Grund: auf einer 1700er Shell standen die beiden
   Hälften so weit auseinander, dass sie nicht mehr als EIN Kopf gelesen
   wurden. Dieser Grund trägt hier nicht mehr — die Shell misst seit dem
   17.08. 1512px, und die rechte Spalte ist zusätzlich auf 30rem begrenzt,
   also sitzen die Hälften beieinander. Gewonnen sind rund 150px Höhe, und
   die braucht diese Sektion, um in einen Bildschirm zu passen. Die
   GLOBALE Regel bleibt gestapelt; geändert ist nur diese eine Sektion in
   dieser einen Variante. */
.map-sec--split .sec-head--row{max-width:none;
  grid-template-columns:minmax(0,1fr) minmax(0,30rem);
  gap:var(--s-10);align-items:end;margin-bottom:var(--s-8)}

/* Die Karte ist die Illustration; die Liste ist der Inhalt und steht
   links, wo gelesen wird.
   31rem statt der ersten 25rem (17.08., zweite Runde): seit die Boxen
   sagen, WAS an einem Standort gemacht wird, muss die längste dieser
   Zeilen („Konzepte, Pläne, Simulationen, BIM und Bauüberwachung",
   ~370px) auf EINE Zeile passen. Bei 25rem brach jede zweite Zeile um und
   die Liste wuchs auf 964px — breiter kostet Karte, Umbruch kostet mehr. */
.map-sec--split .map-sec__grid{grid-template-columns:minmax(0,31rem) minmax(0,1fr);
  gap:var(--s-8);align-items:start}
/* Die Karte klebt NICHT (DESIGN §13, 16.08. Punkt 4: sticky greift erst,
   wenn die Begleitspalte kürzer ist als das, woran sie vorbeiscrollt).
   Beide Spalten sind hier etwa gleich hoch — es gäbe nichts
   vorbeizuscrollen, die Regel wäre tote Deklaration.

   Stattdessen eine FESTE Höhe, und zwar absichtlich fest statt
   mitwachsend: die Liste ändert ihre Höhe bei jedem Auf- und Zuklappen um
   rund 150px. Eine Karte, die das mitmacht, springt bei jedem Klick — und
   Leaflet müsste nach jedem Sprung invalidateSize() nachziehen. 44,5rem
   ist die gemessene Höhe der fünf ZUGEKLAPPTEN Boxen (712px bei
   16px-Grundschrift), also der Zustand, in dem die Sektion zuerst gesehen
   wird. Klappt jemand eine Box auf, wächst die Liste darüber hinaus und
   die Karte bleibt stehen — gewollt. 76vh ist die Notbremse für flache
   Fenster. Wer an den Boxen etwas ändert, misst diesen Wert nach. */
.map-sec--split .map{height:min(44.5rem, 76vh)}
.map-sec--split .loclist{display:grid;gap:var(--s-2)}
.map-sec--split .loccard{padding:var(--s-4) var(--s-5)}
/* Kein Anheben beim Überfahren: in einer gestapelten Liste rutschen die
   Nachbarn dann sichtbar mit. Die Kante in Signal trägt den Zustand
   allein — dieselbe Sprache wie im Gruppen-Verzeichnis (DESIGN §13). */
.map-sec--split .loccard:hover{transform:none}

/* Zugeklappt zwei Zeilen statt drei: Nummer + Firma, darunter der Ort.
   Der Rumpf (Adresse, Telefon, Mail, Route) kommt erst beim Klick — fünf
   offene Boxen wären 780px hoch und die Sektion damit wieder zwei
   Bildschirme. Aufgeklappt wird ausschliesslich per Klick (is-open),
   nicht beim Überfahren (is-active): sonst klappte die Liste unter dem
   Mauszeiger auf und zu.
   Die Nummer wandert dabei nach unten rechts neben das Stammhaus-Zeichen:
   in der breiten Reihe war „01" die Zählung von fünf nebeneinander, in
   einer gestapelten Liste ist sie nur noch eine leise Ordnungsangabe und
   gehört zur zweiten Zeile, nicht über den Firmennamen. */
.map-sec--split .loccard__head{grid-template-columns:minmax(0,1fr) auto auto;
  grid-template-areas:"co   co   chev"
                      "city meta chev";
  align-items:center;column-gap:var(--s-3);row-gap:var(--s-1)}
.map-sec--split .loccard__co{grid-area:co}
.map-sec--split .loccard__city{grid-area:city}
.map-sec--split .loccard__meta{grid-area:meta;justify-content:flex-end}
.map-sec--split .loccard__chev{grid-area:chev}
.map-sec--split .loccard__hq{margin-left:0}
/* Zugeklappt wird nur unter `.js` — dieselbe Klammer wie beim
   Gruppen-Verzeichnis (DESIGN §8/§13). Ohne Skript stünden sonst vier von
   fünf Adressen samt Telefonnummer dauerhaft unerreichbar hinter einem
   Knopf, der nichts tut (PRINCIPLES §5). Die Klasse setzt das
   Inline-Skript im head, also vor dem ersten Bild — es blitzt nichts auf. */
.js .map-sec--split .loccard__body{display:none}
.js .map-sec--split .loccard.is-open .loccard__body{display:block}
.js .map-sec--split .loccard.is-open .loccard__addr{margin-top:0}
/* Die drei Wege als Zeile statt als Stapel — dieselbe Rechnung wie im
   Kartenpopup (.mpop__links): spart gut 40px, und mehr als drei kurze
   Links werden es hier nie. In der breiten Variante bleibt der Stapel,
   dort ist die Box schmal und hoch. */
.map-sec--split .loccard__links{display:flex;flex-wrap:wrap;
  gap:var(--s-1) var(--s-4);margin-top:var(--s-3)}
.loccard__chev{width:1.15rem;height:1.15rem;color:var(--c-muted);
  transition:transform var(--dur-ui) var(--ease),color var(--dur-ui)}
html:not(.js) .loccard__chev{display:none}
.js .loccard.is-open .loccard__chev{transform:rotate(180deg);color:var(--c-signal)}
.loccard__head:hover .loccard__chev{color:var(--c-signal)}

/* ── „Was wird hier gemacht" — beide Varianten (17.08.2026) ──────── */
/* Eine Zeile je Gesellschaft, immer sichtbar (auch zugeklappt): Kürzel
   links in Signal, die Tätigkeit daneben. Die Haarlinie darüber ist die
   übliche Trennung (§6) — keine Fläche, keine Füllung (§2).
   Das Kürzel wiederholt sich absichtlich aus .loccard__co: dort steht es
   als Label des Standorts („IHW · IBP"), hier als Anker der Zeile, ohne
   den man bei zwei Firmen nicht wüsste, welche was tut. */
.loccard__does{margin-top:var(--s-3);padding-top:var(--s-2);
  border-top:1px solid var(--c-line);display:grid;gap:var(--s-1)}
.loccard__does li{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--s-3);align-items:baseline}
.loccard__does-code{font-size:var(--t-xs);font-weight:var(--fw-strong);
  letter-spacing:.06em;color:var(--c-signal);white-space:nowrap}
.loccard__does-txt{font-size:var(--t-sm);line-height:1.4;color:var(--c-muted);
  hyphens:auto}
/* Zugeklappt sitzt die Tätigkeit direkt unter dem Ort; ist die Box offen,
   trennt sie die Adresse als eigener Block ab. */
.js .map-sec--split .loccard.is-open .loccard__body{padding-top:var(--s-3);
  margin-top:var(--s-3);border-top:1px solid var(--c-line)}

/* ── Gemeinsames Aussehen beider Varianten ───────────────────────── */
.loccard{background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-card);
  transition:border-color var(--dur-ui),transform var(--dur-ui) var(--ease)}
.loccard:hover,.loccard.is-active{border-color:var(--c-signal)}
.loccard[hidden]{display:none}

/* Firma zuerst, Ort darunter — und beide in --t-md. Der frühere
   Sprung (Ort in --t-lg, Firma in --t-xs) las den Ort als Antwort;
   gefragt ist aber, WER hier sitzt. Unterschieden wird über FARBE:
   Firma in Ink, Ort in Muted, beide in --t-md. (Der Kommentar nannte
   bis 2026-08-17 „Gewicht und Farbe" — die Gewichte waren aber schon
   damals beide 600, getragen hat es immer die Farbe allein.) */
.loccard__head{display:grid;gap:var(--s-2);width:100%;text-align:left}
.loccard__meta{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.loccard__no{font-size:var(--t-xs);font-weight:var(--fw-strong);color:var(--c-muted);letter-spacing:.06em}
.loccard__co{font-size:var(--t-md);font-weight:var(--fw-title);letter-spacing:-.02em;
  line-height:1.2;color:var(--c-ink);hyphens:none}
.loccard__city{display:flex;align-items:baseline;gap:var(--s-2);flex-wrap:wrap;
  font-size:var(--t-md);font-weight:var(--fw-strong);letter-spacing:-.015em;line-height:1.2;
  color:var(--c-muted)}
.loccard__country{font-size:var(--t-xs);font-weight:var(--fw-strong);color:var(--c-signal)}
.loccard__hq{border:1px solid var(--c-signal);color:var(--c-signal);
  border-radius:var(--r-pill);padding:.2em .7em;font-size:var(--t-xs);font-weight:var(--fw-strong);
  margin-left:auto}
.loccard__addr{margin-top:var(--s-4);font-size:var(--t-sm);color:var(--c-muted);line-height:1.55}
.loccard__links{margin-top:var(--s-4);display:grid;gap:var(--s-1);font-size:var(--t-sm)}
.loccard__links a{font-weight:var(--fw-strong);width:fit-content;border-bottom:1px solid var(--c-line);
  transition:color var(--dur-ui),border-color var(--dur-ui)}
.loccard__links a:hover{color:var(--c-signal);border-color:var(--c-signal)}
.loccard__route{color:var(--c-signal)}

/* the floating detail card is ATP's idea — off unless that layout is on */
.map__feature{display:none}

/* ── Pins — Leaflet liefert nur den Anker, die Form ist unsere ──
   Seit 2026-08-16 kein roter Punkt mehr, sondern die Giebel-Marke:
   dieselbe Geometrie wie assets/img/brand/gable-pin.svg. Der Pin ist
   damit ein Markenelement und keine generische Kartennadel.
   Gezeichnet wird er in app.js (PIN), gefärbt hier — currentColor,
   damit Zustände (aktiv/abgeblendet/Stammhaus) reines CSS bleiben.
   Der weisse Halo darunter hält ihn auf jeder Kachelfarbe lesbar. */
.map-pin{color:var(--c-signal);
  transition:transform var(--dur-ui) var(--ease),opacity var(--dur-ui);
  transform-origin:50% 100%}
/* Doppelte Klasse mit Absicht: base.css setzt svg auf 100%, und der
   Leaflet-Ausgleich `.leaflet-pane svg{width:auto}` (weiter unten, für
   das Länder-Overlay) würde den Pin sonst mitnehmen. */
.map-pin .map-pin__svg{width:100%;height:100%;overflow:visible;
  filter:drop-shadow(0 6px 10px rgba(29,29,27,.28))}
.map-pin__halo{fill:none;stroke:#fff;stroke-width:4;stroke-linejoin:miter}
.map-pin__plate{fill:currentColor}
.map-pin__gable{fill:none;stroke:#fff;stroke-width:3.04;
  stroke-linecap:butt;stroke-linejoin:miter}
/* Stammhaus: grösser und im tiefsten Rot der Leiter — eine Rangfolge,
   kein zweiter Farbwert von aussen. */
.map-pin--hq{color:var(--red-800);transform:scale(1.18)}
.map-pin.is-active{transform:scale(1.3)}
.map-pin--hq.is-active{transform:scale(1.42)}

/* ── Popup — die Standortkarte am Pin ──
   Leaflets Vorgabe (weisse Blase, eigener Radius, eigener Schatten)
   wird auf unser Kartenvokabular gezogen: Haarlinie, --r-card,
   --sh-float. Inhalt: Adresse, die Gesellschaften an diesem Standort
   mit Link auf ihre eigene Seite, dann die direkten Wege. */
.mpop-wrap .leaflet-popup-content-wrapper{background:var(--c-white);
  border:1px solid var(--c-line);border-radius:var(--r-card);
  box-shadow:var(--sh-float);padding:0;color:var(--c-ink)}
.mpop-wrap .leaflet-popup-content{margin:0;font:inherit;line-height:1.5}
.mpop-wrap .leaflet-popup-scrolled{border:0;overscroll-behavior:contain}
.mpop-wrap .leaflet-popup-tip{background:var(--c-white);border:1px solid var(--c-line);
  box-shadow:none}
.mpop-wrap .leaflet-popup-close-button{width:2rem;height:2rem;padding:0;
  font-size:1.1rem;line-height:2rem;color:var(--c-muted)}
.mpop-wrap .leaflet-popup-close-button:hover{color:var(--c-signal);background:none}

.mpop{padding:var(--s-4) var(--s-5)}
.mpop__city{display:flex;align-items:baseline;gap:var(--s-2);flex-wrap:wrap;
  font-size:var(--t-md);font-weight:var(--fw-title);letter-spacing:-.02em;
  padding-right:var(--s-6)}
.mpop__country{font-size:var(--t-xs);font-weight:var(--fw-strong);color:var(--c-signal)}
.mpop__hq{border:1px solid var(--c-signal);border-radius:var(--r-pill);
  padding:.15em .6em;font-size:var(--t-xs);font-weight:var(--fw-strong);color:var(--c-signal)}
.mpop__addr{margin-top:var(--s-2);font-size:var(--t-sm);color:var(--c-muted)}
.mpop__label{margin-top:var(--s-3);padding-top:var(--s-3);
  border-top:1px solid var(--c-line);
  font-size:var(--t-xs);font-weight:var(--fw-strong);letter-spacing:.1em;text-transform:uppercase;
  color:var(--c-muted)}
.mpop__cos{margin-top:var(--s-2);display:grid}
.mpop__cos a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:var(--s-3);align-items:center;padding:var(--s-2) 0}
.mpop__cos li + li a{border-top:1px solid var(--c-line)}
.mpop__code{font-size:var(--t-sm);font-weight:var(--fw-strong);color:var(--c-signal);letter-spacing:.03em}
.mpop__role{font-size:var(--t-xs);color:var(--c-muted)}
.mpop__go{color:var(--c-signal);font-weight:var(--fw-strong);
  transition:transform var(--dur-ui) var(--ease)}
.mpop__cos a:hover .mpop__go{transform:translateX(3px)}
/* Die drei Wege als Zeile, nicht als Stapel — spart im Popup gut
   40px Höhe, und mehr als drei kurze Links werden es hier nie. */
.mpop__links{margin-top:var(--s-3);padding-top:var(--s-3);
  border-top:1px solid var(--c-line);display:flex;flex-wrap:wrap;
  gap:var(--s-1) var(--s-4);font-size:var(--t-sm)}
.mpop__links a{font-weight:var(--fw-strong);width:fit-content;border-bottom:1px solid var(--c-line);
  transition:color var(--dur-ui),border-color var(--dur-ui)}
.mpop__links a:hover{color:var(--c-signal);border-color:var(--c-signal)}
.leaflet-container{font:inherit}
.leaflet-popup-content{font-size:var(--t-sm)}
/* base.css forces width/height:100% on EVERY svg — that is right for our
   inline icons and fatal for Leaflet's overlay, whose size and coordinate
   space it sets itself. Forced to 100% the country shapes still exist,
   with correct geometry and fill, and paint outside the visible area. */
.leaflet-pane svg{width:auto;height:auto}

/* ── Ländergrenzen ──
   Österreich und die Schweiz sind die Aussage dieser Sektion, also
   werden sie gezeichnet und nicht fünf Punkten überlassen.

   Seit 16.08.2026 mit den echten OSM-Umrissen (laender.geo.js, ~2500
   statt 37 Stützpunkten) und in zwei Lagen: darunter ein breiter,
   sehr blasser Schein, darüber die feine Linie. Zusammen mit runden
   Ecken nimmt das den Kanten die Härte, die der alte grobe Umriss
   hatte — die Länder liegen jetzt wie eine weiche Markierung auf den
   Kacheln statt wie ein ausgeschnittenes Vieleck.

   CSS überschreibt Leaflets Präsentationsattribute; die Gestaltung
   bleibt damit hier und nicht in app.js. */
.geo--glow{fill:none;stroke:var(--c-signal);stroke-width:9;stroke-opacity:.10;
  stroke-linejoin:round;stroke-linecap:round}
.geo--home{fill:var(--c-signal);fill-opacity:.06;stroke:var(--c-signal);stroke-width:1.25;
  stroke-opacity:.5;stroke-linejoin:round;stroke-linecap:round}

/* ── Zurück aus der Nahansicht ──
   Ein Klick auf einen Pin zoomt hinein; ohne diesen Knopf wäre der Weg
   zurück Raten (PRINCIPLES §6). Leaflet-Control, deshalb sitzt die
   Position in app.js und hier nur das Aussehen. */
.map-reset{display:flex;align-items:center;gap:var(--s-2);
  background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-pill);
  padding:.5rem .9rem;font:inherit;font-size:var(--t-xs);font-weight:var(--fw-strong);
  color:var(--c-ink);box-shadow:var(--sh-card);cursor:pointer;
  transition:background var(--dur-ui),color var(--dur-ui),border-color var(--dur-ui)}
.map-reset span{color:var(--c-signal);font-size:var(--t-sm);line-height:1}
.map-reset:hover{background:var(--c-signal);border-color:transparent;color:#fff}
.map-reset:hover span{color:#fff}

@media (max-width:1140px){
  .map-sec--breit .loclist{grid-template-columns:repeat(3,1fr);margin-top:var(--s-6);
    padding-inline:0}
  .map-sec--breit .map{aspect-ratio:16/9}
  /* Die zweispaltige Variante löst sich hier auf: einspaltig gibt es
     keine Begleitspalte mehr, an der die Karte hängen könnte. Sie rückt
     wie in der breiten Variante nach oben (order:-1) und bemisst sich
     wieder über das Seitenverhältnis statt über eine feste Höhe.
     Das Akkordeon bleibt — gestapelt ist es dort erst recht richtig. */
  .map-sec--split .map-sec__grid{grid-template-columns:1fr;gap:var(--s-6)}
  .map-sec--split .map-sec__map{order:-1}
  .map-sec--split .map{height:auto;aspect-ratio:16/9}
  /* Mit der Sektion löst sich auch ihr Kopf wieder auf — zwei Spalten
     unter 1140px wären genau der Fehler, den DESIGN §13 beschreibt. */
  .map-sec--split .sec-head--row{grid-template-columns:1fr;gap:var(--s-6);
    align-items:start}
}
@media (max-width:760px){
  .map-sec--breit .loclist{grid-template-columns:1fr 1fr}
  /* Quadratisch statt 4/3: seit die Pins anklickbar sind und ein Popup
     tragen, braucht die Karte am Handy echte Höhe — 263px waren zu
     wenig, um einen Pin sicher zu treffen und das Popup zu lesen. */
  .map-sec--breit .map,.map-sec--split .map{aspect-ratio:1/1}
}
@media (max-width:520px){ .map-sec--breit .loclist{grid-template-columns:1fr} }

/* ═══ STARTSEITE — Seminare teaser ═════════════════════════════════
   A cream field, like the spine, so the page alternates
   cream → white → cream on its way down to the dark footer.
   ═════════════════════════════════════════════════════════════════ */
.sem{padding-block:var(--section-y);background:var(--c-cream)}
.sem__grid{display:grid;grid-template-columns:1fr 1.15fr;gap:var(--s-12);align-items:start}
.sem__lead{margin-top:var(--s-5);margin-bottom:var(--s-8);color:var(--c-muted);
  font-size:var(--t-md);max-width:40ch}

.sem__card{box-shadow:var(--sh-card)}
.sem__list li+li{border-top:1px solid var(--c-line)}
.sem-row__link{display:grid;grid-template-columns:1fr auto;gap:var(--s-5);align-items:center;
  padding:var(--s-5) 0}
.sem__list li:first-child .sem-row__link{padding-top:0}
.sem__list li:last-child .sem-row__link{padding-bottom:0}

.sem-row__date{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-3);
  font-size:var(--t-xs);font-weight:var(--fw-strong);color:var(--c-signal);
  font-variant-numeric:tabular-nums}
.sem-row__time{color:var(--c-muted);font-weight:var(--fw-strong)}
.sem-row__title{margin-top:var(--s-2);font-size:var(--t-md);font-weight:var(--fw-title);
  letter-spacing:-.02em;line-height:1.3;transition:color var(--dur-ui)}
.sem-row__link:hover .sem-row__title{color:var(--c-signal)}

.sem-row__arrow{width:2.5rem;height:2.5rem;border-radius:var(--r-pill);
  background:var(--c-white);border:1px solid var(--c-line);color:var(--c-deep);
  display:grid;place-items:center;padding:.7rem;
  transition:background var(--dur-ui),color var(--dur-ui),transform var(--dur-ui) var(--ease)}
.sem-row__link:hover .sem-row__arrow{background:var(--c-signal);color:#fff;transform:translateX(3px)}

/* Preis auf Anfrage is stated once, for the whole programme — never on a
   course row (.loop/PRINCIPLES.md §1). Same for the venue. */
.sem__foot{margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--c-line);
  font-size:var(--t-xs);color:var(--c-muted)}
.sem__foot strong{color:var(--c-ink)}

@media (max-width:900px){
  .sem__grid{grid-template-columns:1fr;gap:var(--s-8)}
  .sem__lead{max-width:52ch}
}

/* ═══ /LEISTUNGEN ══════════════════════════════════════════════════
   The same eleven services HIG lists in a flat accordion, restructured
   around the spine. Everything renders open — see service-block.php.
   ═════════════════════════════════════════════════════════════════ */
/* Bottom padding is deliberately small: the first stage section brings its
   own --section-y, and two of them stacked left a ~240px hole. */
.page-head{padding-block:var(--s-12) var(--s-8)}

/* The three stages as a table of contents: the structure is visible
   before the reading starts. */
.stage-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.stage-nav__item{display:flex;align-items:center;gap:var(--s-5);background:var(--c-white);
  border:1px solid var(--c-line);border-radius:var(--r-card);padding:var(--s-6);
  transition:border-color var(--dur-ui),box-shadow var(--dur-ui),transform var(--dur-ui) var(--ease)}
.stage-nav__item:hover{border-color:transparent;box-shadow:var(--sh-card);transform:translateY(-3px)}
.stage-nav__item .ic{width:2.9rem;height:2.9rem;padding:.75rem}
.stage-nav__no{display:block;font-size:var(--t-xs);font-weight:var(--fw-strong);color:var(--c-muted);
  letter-spacing:.06em}
.stage-nav__title{display:block;font-size:var(--t-lg);font-weight:var(--fw-title);
  letter-spacing:-.02em;line-height:1.2}
.stage-nav__count{display:block;margin-top:.1rem;font-size:var(--t-xs);font-weight:var(--fw-strong);
  color:var(--c-signal)}

.stage-sec{padding-block:var(--section-y);scroll-margin-top:8rem}
.stage-sec--tint{background:var(--c-cream)}

.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
/* A Leistung with published sub-types carries far more content than the
   rest — Wasserlöschanlagen is the only one. Two columns lets it hold its
   five Bauarten without towering over its neighbour, and it squares off
   the Löschen row, which would otherwise be two cards in a three-up. */
.svc--wide{grid-column:span 2}
.svc{background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-card);
  padding:var(--s-8);display:flex;flex-direction:column;scroll-margin-top:8rem;
  transition:border-color var(--dur-ui),box-shadow var(--dur-ui)}
.svc:hover{border-color:transparent;box-shadow:var(--sh-card)}
/* :target — a deep link should say which block it landed on */
.svc:target{border-color:var(--c-signal)}

.svc__title{font-size:var(--t-lg);line-height:1.2;letter-spacing:-.025em;font-weight:var(--fw-title)}
/* HIG's own slogan */
.svc__claim{margin-top:var(--s-2);color:var(--c-signal);font-size:var(--t-sm);font-weight:var(--fw-strong)}
/* HIG's own opening sentence */
.svc__lead{margin-top:var(--s-5);font-size:var(--t-md);font-weight:var(--fw-strong);line-height:1.5}
/* ours — hence the badge */
.svc__body{margin-top:var(--s-5);color:var(--c-muted);font-size:var(--t-sm)}
.svc__body .tag--demo{margin-top:var(--s-3)}

.svc__types{margin-top:var(--s-5);display:flex;flex-wrap:wrap;gap:var(--s-2)}
.svc__types li{border:1px solid var(--c-line);border-radius:var(--r-sm);
  padding:.4em .8em;font-size:var(--t-xs);font-weight:var(--fw-strong)}
.svc__norms{margin-top:var(--s-5);display:flex;flex-wrap:wrap;gap:var(--s-2)}

/* pinned to the bottom so the cards' feet line up across a row */
.svc__foot{margin-top:auto;padding-top:var(--s-6)}
.svc__by{padding-top:var(--s-5);border-top:1px solid var(--c-line);font-size:var(--t-xs);
  font-weight:var(--fw-strong);color:var(--c-muted);letter-spacing:.02em}
.svc__refs{margin-top:var(--s-3);font-size:var(--t-xs);color:var(--c-muted);line-height:1.6}
.svc__refs-label{font-weight:var(--fw-strong);color:var(--c-muted)}
.svc__refs a{border-bottom:1px solid var(--c-line);transition:color var(--dur-ui),border-color var(--dur-ui)}
.svc__refs a:hover{color:var(--c-signal);border-color:var(--c-signal)}

/* No top padding: the preceding stage section already ends with a full
   --section-y, and two of them stacked read as a hole, not as rhythm. */
.norms{padding-block:0 var(--section-y)}
.page-cta{padding-block:0 var(--section-y)}
.norms__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5)}
.norms__note{margin-top:var(--s-5);font-size:var(--t-xs);color:var(--c-muted)}

@media (max-width:1140px){
  .svc-grid{grid-template-columns:1fr 1fr}
  .stage-nav{grid-template-columns:1fr}
}
@media (max-width:760px){
  .svc-grid,.norms__grid{grid-template-columns:1fr}
}

/* ═══ KONZEPT-PLATZHALTER (platzhalter.php) ════════════════════════
   Eine ruhige, schmale Spalte: Eyebrow, Titel, Rahmung, dann die
   faktische Liste dessen, was an der Route in der echten Umsetzung
   entsteht. Kein 404-Gefühl — der Umfang ist Teil der Dramaturgie
   (03-IA §2). Nutzt .pill/.h1/.ticks aus dem Bestand.
   ═════════════════════════════════════════════════════════════════ */
.ph{padding-block:var(--s-8) var(--section-y)}
.ph__shell{max-width:52rem}
.ph__title{max-width:18ch}
.ph__lead{margin-top:var(--s-5);max-width:58ch;color:var(--c-muted);
  font-size:var(--t-md)}
.ph__box{margin-top:var(--s-10);background:var(--c-white);
  border:1px solid var(--c-line);border-radius:var(--r-card);
  padding:var(--s-8)}
.ph__box-head{font-size:var(--t-sm);font-weight:var(--fw-strong);letter-spacing:-.01em;
  margin-bottom:var(--s-5)}
.ph__box .ticks{margin-top:0}
.ph__note{margin-top:var(--s-6);padding-top:var(--s-5);
  border-top:1px solid var(--c-line);font-size:var(--t-xs);
  color:var(--c-muted)}
.ph__actions{margin-top:var(--s-10);display:flex;gap:var(--s-3);
  flex-wrap:wrap}