/* ============================================================================
   Alexander Müller Dentaltechnik
   Richtung A — „Werkbank"  ·  Phase 4 (Design-Review + Motion-Layer)

   Monochrom. Keine Akzentfarbe — Farbe kommt ausschliesslich aus der
   Fotografie. Eine Schriftfamilie. Struktur ueber Haarlinien und Weissraum.

   Motion: sechs Bewegungen, jede mit Aufgabe. Siehe js/main.js.
   ============================================================================ */

/* ---------------------------------------------------------------- Tokens -- */
:root{
  --paper:      #F7F5F2;
  --paper-2:    #F1EDE8;
  --ink:        #141312;
  --ink-2:      #1C1A18;
  --graphite:   #57534E;
  /* --mute traegt Labels ab 11,5 px: 5,0:1 auf Papier, WCAG AA. */
  --mute:       #6E6862;
  --line:       #E5E0DA;
  --line-2:     #CFC8BF;

  /* Akzent: Modellierwachs. Die Farbe liegt in jedem Dentallabor auf dem
     Tisch — sie kommt aus dem Handwerk und nicht aus einer Farbpalette.
     Sie traegt genau drei Dinge: den Strich vor jeder Abschnittsmarke, den
     Hover-Zustand und den Tastaturfokus. Sonst nichts: ein Akzent, der
     ueberall steht, fuehrt den Blick nirgendwohin. */
  --wachs:      #8A3E33;
  --wachs-tief: #6E3128;

  /* Zweite Schriftstimme fuer alles Technische — siehe fonts/fonts.css. */
  --mono: "Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --on-dark:      #F7F5F2;
  --on-dark-mute: rgba(247,245,242,.62);
  --on-dark-line: rgba(247,245,242,.17);

  --max:      1240px;
  --gutter:   clamp(20px, 5vw, 64px);
  --measure:  64ch;

  --sp-xl: clamp(112px, 14vw, 200px);
  --sp-lg: clamp(80px, 10vw, 148px);
  --sp-md: clamp(52px, 6vw, 88px);
  --sp-sm: clamp(28px, 3.4vw, 48px);

  --t-fast: 120ms cubic-bezier(.2,0,0,1);
  --t-mid:  400ms cubic-bezier(.2,0,0,1);
  --t-slow: 620ms cubic-bezier(.16,1,.3,1);
}

/* ------------------------------------------------------------------ Base -- */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variation-settings:"wdth" 100;
  font-size:17px;
  line-height:1.62;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* height:auto ist hier keine Kosmetik, sondern Pflicht: die Bilder tragen
   width/height als HTML-Attribute (gegen Layoutspruenge). Ohne height:auto
   gilt die Attributhoehe als CSS-Hoehe — die Breite schrumpft dann mit dem
   Viewport, die Hoehe nicht, und das Bild wird in die Laenge gezogen. */
img,svg,video{ display:block; max-width:100%; height:auto }
a{ color:inherit }
h1,h2,h3,h4,p,figure,blockquote,dl,dd,ol,ul{ margin:0 }
ul,ol{ padding:0; list-style:none }
button{ font:inherit }
::selection{ background:var(--ink); color:var(--paper) }

.wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter) }

/* Sektionsabstaende systematisiert — vorher standen sie inline im Markup */
.sec{ padding-top:var(--sp-xl) }
.sec--tight{ padding-top:var(--sp-lg) }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--paper); padding:14px 20px;
}
.skip:focus{ left:0 }

:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--wachs); outline-offset:3px; border-radius:1px;
}
.on-dark :where(a,button,input,select,textarea):focus-visible{ outline-color:var(--on-dark) }

/* -------------------------------------------------------------- Typo ------ */
.t-display{
  font-size:clamp(42px, 6.4vw, 88px);
  line-height:1.015; font-weight:500; letter-spacing:-.03em;
  font-variation-settings:"wdth" 95;
  text-wrap:balance;
}
.t-h2{
  font-size:clamp(29px, 3.8vw, 50px);
  line-height:1.08; font-weight:500; letter-spacing:-.024em;
  text-wrap:balance;
}
.t-h3{ font-size:clamp(19px, 1.7vw, 24px); line-height:1.24; font-weight:500; letter-spacing:-.014em }
.t-body{
  font-size:clamp(16px, 1.1vw, 18px); line-height:1.62;
  color:var(--graphite); max-width:var(--measure); text-wrap:pretty;
}
.t-body strong{ color:var(--ink); font-weight:500 }
.on-dark .t-body{ color:var(--on-dark-mute) }

/* Die Marke ueber jedem Abschnitt spricht jetzt in der Mono — dieselbe
   Stimme wie die Messwerte und die Bildkennzeichnung. Davor ein kurzer
   Wachsstrich als Anschlag. Die frueheren Zaehlnummern 01–06 sind entfallen:
   die Reihenfolge der Abschnitte trug keine Information, sie sah nur nach
   Ordnung aus. Wo eine Reihenfolge wirklich zaehlt — die sechs Schritte
   einer Arbeit — stehen die Nummern weiterhin. */
.eyebrow{
  display:flex; align-items:center; flex-wrap:wrap; gap:4px 12px;
  font-family:var(--mono);
  font-size:11.5px; font-weight:500; letter-spacing:.13em; text-transform:uppercase;
  color:var(--mute);
}
.eyebrow::before{
  content:""; width:20px; height:2px; background:var(--wachs); flex:none;
}
.eyebrow i{ font-style:normal; color:var(--line-2) }
.on-dark .eyebrow{ color:var(--on-dark-mute) }
.on-dark .eyebrow i{ color:rgba(247,245,242,.3) }

/* ------------------------------------------------------------- Elemente --- */
.lnk{ position:relative; display:inline-block; text-decoration:none; padding-bottom:2px }
.lnk::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-mid);
}
.lnk:hover::after, .lnk:focus-visible::after{ transform:scaleX(1) }

.lnk-arrow{ font-weight:500; text-decoration:none; display:inline-flex; align-items:center; gap:10px }
.lnk-arrow span{ position:relative; padding-bottom:2px }
.lnk-arrow span::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform var(--t-mid);
}
.lnk-arrow:hover span::after{ transform:scaleX(1) }
.lnk-arrow svg{ transition:transform var(--t-mid); flex:none }
.lnk-arrow:hover svg{ transform:translateX(4px) }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:54px; padding:0 30px;
  border:1px solid var(--ink); border-radius:2px;
  background:var(--ink); color:var(--paper);
  font-size:15px; font-weight:500; text-decoration:none; cursor:pointer;
  transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn:hover{ background:var(--wachs); border-color:var(--wachs); color:var(--paper) }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-2) }
.btn--ghost:hover{ border-color:var(--ink) }
.btn--sm{ min-height:42px; padding:0 20px; font-size:14px }
.on-dark .btn{ background:var(--on-dark); border-color:var(--on-dark); color:var(--ink) }
.on-dark .btn:hover{ background:transparent; color:var(--on-dark) }

/* =========================================================== 00 · Header == */
.hdr{
  position:fixed; inset:0 0 auto; z-index:80;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:saturate(1.4) blur(16px);
  -webkit-backdrop-filter:saturate(1.4) blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color var(--t-mid);
}
.hdr.is-scrolled{ border-bottom-color:var(--line) }
.hdr__in{ display:flex; align-items:center; gap:24px; height:86px; transition:height var(--t-mid) }
.hdr.is-scrolled .hdr__in{ height:64px }

/* Wortmarke mit Signet „Molar". Als Fläche gezeichnet, nicht als Kontur:
   eine feine Linienzeichnung zerfällt bei 32 px Header-Höhe. Verhältnis
   98:134, also hochformatig — der Abstand zur Wortmarke bleibt deshalb eng,
   sonst reißt das Lockup auseinander. */
.mark{ display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto; line-height:1 }
.mark__sign{ width:23px; height:32px; flex:none; color:var(--ink); transition:width var(--t-mid), height var(--t-mid) }
.hdr.is-scrolled .mark__sign{ width:20px; height:27px }
.mark__wm{ display:block }
.mark b{ display:block; font-size:15.5px; font-weight:600; letter-spacing:.055em; text-transform:uppercase; font-variation-settings:"wdth" 102 }
.mark__wm span{ display:block; margin-top:4px; font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--mute); font-variation-settings:"wdth" 108 }

/* Reale Bilder ersetzen die Platzhalter. Feste width/height im Markup
   halten den Platz frei, damit beim Nachladen nichts springt (CLS). */
.stage__layer img, .fig-img img, .pstage__frame img{ width:100%; height:auto; display:block }
.stage__layer picture, .fig-img picture, .pstage__frame picture{ display:block }
.fig-img{ margin:0 }

.nav{ display:flex; gap:32px }
.nav a{ font-size:15px; text-decoration:none; color:var(--graphite); position:relative; padding-block:4px; transition:color var(--t-fast) }
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform var(--t-mid);
}
.nav a:hover{ color:var(--ink) }
.nav a:hover::after{ transform:scaleX(1) }

.hdr__tel{ font-size:15px; font-weight:500; text-decoration:none; white-space:nowrap }
.hdr__cta{ opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity var(--t-mid), transform var(--t-mid) }
.hdr.is-past-hero .hdr__cta{ opacity:1; transform:none; pointer-events:auto }

.burger{ display:none; width:44px; height:44px; border:0; background:none; cursor:pointer; padding:0; margin-left:auto }
.burger span{ display:block; width:22px; height:1px; background:var(--ink); margin:6px auto; transition:transform var(--t-mid), opacity var(--t-fast) }
body.nav-open .burger span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
body.nav-open .burger span:nth-child(2){ opacity:0 }
body.nav-open .burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

/* ================================================== Scrub-Buehne (Medien) = */
/* Eine Buehne, zwei Zustaende. Solange kein Video vorliegt, blenden zwei
   Standbilder ineinander; ab Phase 8 uebernimmt <video data-scrub> und wird
   ueber currentTime gescrubbt. Das Markup aendert sich dabei nicht. */
.stage{ position:relative }
.stage__layer{ position:relative }
.stage__layer + .stage__layer{ position:absolute; inset:0; opacity:0 }
.stage__vid{ width:100%; height:auto; object-fit:cover; background:var(--paper-2) }
.stage__cap{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px;
  margin-top:16px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mute); font-variation-settings:"wdth" 106;
}
.stage__cap b{ font-weight:500; color:var(--mute); transition:color var(--t-mid) }
.stage__cap b.is-on{ color:var(--ink) }
.stage__track{ position:relative; height:1px; background:var(--line-2) }
.stage__track::after{ content:""; position:absolute; inset:0; background:var(--ink); transform:scaleX(var(--p,0)); transform-origin:left }
.stage__cap .r{ text-align:right }
.on-dark .stage__cap{ color:var(--on-dark-mute) }
.on-dark .stage__cap b{ color:var(--on-dark-mute) }
.on-dark .stage__cap b.is-on{ color:var(--on-dark) }
.on-dark .stage__track{ background:var(--on-dark-line) }
.on-dark .stage__track::after{ background:var(--on-dark) }

/* ============================================================= 01 · Hero == */
.hero{ padding-top:clamp(104px, 12vh, 152px) }
/* Die Aussage bekommt die volle Breite. In einer schmalen Spalte zerfiel
   sie in fuenf Zeilen mit je einem Wort — das liest sich als Modeplakat,
   nicht als Versprechen. */
.hero h1{ margin:clamp(20px,2.4vw,30px) 0 0; max-width:19ch }
/* Textspalte oben ausgerichtet, nicht unten: sonst landet der primäre CTA
   auf einem 900-px-Bildschirm 160 px unter der Falz. So steht die Aktion
   sofort im Blick, und das Werkstück läuft über die Falz hinaus — das zieht
   ins Scrollen, statt es zu verstecken. */
/* Seit das Hero-Video im Querformat laeuft, traegt die rechte Spalte das
   breitere Element — deshalb ist das Verhaeltnis gegenueber der Hochkant-
   Fassung umgedreht. In einer .8fr-Spalte waere ein 16:9-Band 450 px breit
   und damit wirkungslos. */
.hero__grid{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.45fr);
  gap:clamp(32px, 5.5vw, 80px); align-items:center;
  margin-top:clamp(28px,3.4vw,52px);
}
.hero__sub{
  font-size:clamp(16.5px, 1.32vw, 19.5px); line-height:1.54;
  color:var(--graphite); max-width:42ch; text-wrap:pretty;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(28px,3vw,40px) }

/* Die Botschaft steht unter dem Filmband, nicht eingebrannt darin: als Text
   bleibt sie skalierbar, vorlesbar und uebersetzbar — im Video waere sie
   keins davon, und bei 4,1 s Schleife haette sie niemand zu Ende gelesen. */
.stage__claim{
  margin-top:16px; font-family:var(--mono);
  font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--mute); font-variation-settings:"wdth" 106;
}
.stage__claim i{ font-style:normal; color:var(--ink) }

/* AI disclosure: compact caption, always visible at the media edge. No legal pixel minimum is implied. */
.ki-hinweis{
  margin-top:6px;
  font-family:inherit;
  font-size:.6875rem;
  font-weight:400;
  line-height:1.45;
  letter-spacing:0;
  text-transform:none;
  text-align:right;
  color:#746e68;
}
.on-dark .ki-hinweis{color:#b8b2ac}
.stage__meta{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:8px}
.stage__meta .video-toggle{margin-top:0}
.stage__meta .ki-hinweis{margin:0 0 0 auto;flex:none}
.master__q{text-indent:0}

/* Zeilenweiser Aufbau der Headline. Ohne JS bleibt der Text normal sichtbar. */
.split .line{ display:block; overflow:hidden }
.split .line > i{
  display:block; font-style:inherit;
  transform:translateY(102%);
  transition:transform 780ms cubic-bezier(.16,1,.3,1);
}
.split.is-in .line > i{ transform:none }
.split.is-in .line:nth-child(2) > i{ transition-delay:70ms }
.split.is-in .line:nth-child(3) > i{ transition-delay:140ms }
.split.is-in .line:nth-child(4) > i{ transition-delay:210ms }

/* ========================================================== 02 · Zusage === */
.pledge{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(32px,6vw,96px) }
.pledge__lead{ border-top:1px solid var(--ink); padding-top:clamp(24px,2.6vw,34px) }
.pledge__n{ font-size:clamp(84px, 13vw, 190px); line-height:.82; font-weight:500; letter-spacing:-.05em; font-variation-settings:"wdth" 86 }
.pledge__n sub{
  display:block; margin-top:18px; vertical-align:baseline;
  font-size:clamp(17px,1.5vw,21px); line-height:1.2; font-weight:500; letter-spacing:-.01em;
  color:var(--ink); font-variation-settings:"wdth" 100;
}
.pledge__lead p{ margin-top:20px; max-width:34ch }

.pledge__list{ align-self:end }
.pledge__list li{ border-top:1px solid var(--line); padding:clamp(18px,2vw,26px) 0 }
.pledge__list li:first-child{ border-top-color:var(--line-2) }
.pledge__list b{ display:block; font-size:clamp(26px,2.6vw,34px); line-height:1; font-weight:500; letter-spacing:-.03em; font-variation-settings:"wdth" 92 }
.pledge__list b em{ font-style:normal; font-size:.46em; font-weight:400; color:var(--graphite); margin-left:.32em; letter-spacing:0 }
.pledge__list p{ margin-top:9px; font-size:14.5px; line-height:1.5; color:var(--graphite); max-width:32ch }

.express{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 24px;
  margin-top:var(--sp-md); padding:22px 0;
  border-top:1px solid var(--ink); border-bottom:1px solid var(--line);
}
.express b{ font-size:clamp(17px,1.5vw,20px); font-weight:500; letter-spacing:-.015em }
.express p{ font-size:15px; color:var(--graphite); max-width:52ch }
.express .lnk-arrow{ margin-left:auto; font-size:15px }

/* ======================================================== 03 · Spektrum === */
/* Bewusst ungleiche Spaltenverhaeltnisse und Formate je Gruppe — ein
   mechanisch gleicher Zickzack liest sich als Template. */
.grp{
  display:grid; gap:clamp(26px,4.5vw,76px); align-items:center;
  padding:clamp(44px,5.5vw,84px) 0; border-top:1px solid var(--line);
}
.grp:first-child{ border-top-color:var(--ink) }
.grp:nth-child(1){ grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr) }
.grp:nth-child(2){ grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr) }
.grp:nth-child(3){ grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr) }
.grp:nth-child(4){ grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr) }
.grp:nth-child(even) .grp__txt{ order:2 }
.grp__idx{ font-size:12px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--mute) }
.grp h3{ margin:14px 0 16px; max-width:22ch }
.grp__tags{ margin-top:20px; display:flex; flex-wrap:wrap; font-size:13.5px; color:var(--mute) }
.grp__tags li{ padding-right:12px; margin-right:12px; border-right:1px solid var(--line-2); line-height:1.5 }
.grp__tags li:last-child{ border-right:0; margin-right:0; padding-right:0 }

/* ========================================================= 04 · Prozess === */
/* Gepinnte Buehne, mitlaufende Schritte. Ersetzt das frueher hier stehende
   Kachelraster — Karten waren der einzige echte Template-Rest der Seite. */
.process{ background:var(--ink); color:var(--on-dark) }
.process__head{ padding-block:var(--sp-lg) 0 }
/* Bild und Text liegen im selben schwarzen Block. Ohne eigenen Innenabstand
   klebte die Zeile „03 Der Weg einer Arbeit" direkt an der Bildkante — das
   liest sich als Umbruchfehler, nicht als Zaesur. Unten mehr als oben, damit
   der Block nicht auf der letzten Zeile endet. */
.process__body{ padding-block:clamp(56px,7vw,104px) clamp(72px,9vw,128px) }
.process h2{ margin-top:clamp(20px,2.4vw,30px); max-width:20ch }
.process__lead{ margin-top:22px; max-width:52ch }

.process__scroll{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(32px,6vw,96px); padding-bottom:var(--sp-lg);
}
.process__stage{
  position:sticky; top:calc(50vh - 30vh);
  align-self:start; padding-top:clamp(48px,8vh,96px);
}
.pstage__media{ position:relative }
.pstage__frame{ position:absolute; inset:0; opacity:0; transition:opacity 520ms cubic-bezier(.2,0,0,1) }
.pstage__frame:first-child{ position:relative }
.pstage__frame.is-on{ opacity:1 }
.pstage__meta{
  display:flex; justify-content:space-between; gap:16px; align-items:baseline;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--on-dark-line);
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-mute);
}
.pstage__meta b{ color:var(--on-dark); font-weight:500 }

.pstep{
  min-height:74vh; display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(40px,6vh,76px);
  border-top:1px solid var(--on-dark-line);
}
.pstep:first-child{ border-top:0 }
.pstep__n{
  display:flex; align-items:center; gap:12px;
  font-size:12px; font-weight:500; letter-spacing:.15em;
  color:var(--on-dark-mute); transition:color var(--t-mid);
}
.pstep__n::before{ content:""; width:0; height:1px; background:var(--on-dark); transition:width var(--t-mid) }
.pstep h3{ margin:16px 0 12px; font-size:clamp(21px,2.1vw,28px); font-weight:500; letter-spacing:-.02em; color:var(--on-dark-mute); transition:color var(--t-mid) }
.pstep p{ font-size:16px; line-height:1.58; color:var(--on-dark-mute); max-width:44ch }
.pstep__hand{
  display:inline-block; margin-top:18px; padding-top:10px;
  border-top:1px solid var(--on-dark); font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--on-dark);
}
/* Aktivzustand ueber Farbe und eine wachsende Marke, nicht ueber starkes
   Abdunkeln: bei opacity .34 waere der Fliesstext der inaktiven Schritte auf
   2,4:1 gefallen — unlesbar. So bleibt alles bei mindestens 5,1:1. */
.pstep{ opacity:.82; transition:opacity var(--t-mid) }
.pstep.is-active{ opacity:1 }
.pstep.is-active .pstep__n{ color:var(--on-dark) }
.pstep.is-active .pstep__n::before{ width:28px }
.pstep.is-active h3{ color:var(--on-dark) }

/* ========================================================= 05 · Systeme === */
.sys{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,6vw,96px) }
.sys__list li{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:17px 0; border-bottom:1px solid var(--line); font-size:16px;
}
.sys__list li:first-child{ border-top:1px solid var(--ink) }
.sys__list em{ font-style:normal; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute) }
.sys__note{ margin-top:clamp(26px,3vw,36px); padding-top:24px; border-top:1px solid var(--ink); font-size:16.5px; line-height:1.58; max-width:44ch }

/* ========================================================= 06 · Meister === */
.master{ display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1fr); gap:clamp(32px,6vw,88px); align-items:start }
.master__q{
  font-size:clamp(21px,2.35vw,29px); line-height:1.34; font-weight:400;
  letter-spacing:-.02em; max-width:26ch; text-wrap:pretty; text-indent:-.42em;
}
.sig{ margin-top:clamp(28px,3vw,40px); padding-top:24px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:14px 28px; align-items:baseline }
.sig b{ display:block; font-size:15.5px; font-weight:600 }
.sig span{ font-size:13.5px; color:var(--mute) }

/* ========================================================= 07 · Stimmen === */
/* Frueher zwei umrandete Kaesten — also Karten. Jetzt redaktionell gesetzt. */
.voice{ padding-block:clamp(34px,4.4vw,64px); border-top:1px solid var(--line) }
.voice:first-of-type{ border-top-color:var(--ink) }
.voice__in{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(20px,4vw,64px); align-items:end }
.voice blockquote{
  font-size:clamp(21px,2.5vw,34px); line-height:1.3; letter-spacing:-.022em;
  max-width:24ch; text-indent:-.4em; text-wrap:pretty; font-weight:400;
}
.voice figcaption{ font-size:14px; color:var(--mute); line-height:1.55 }
.voice figcaption b{ display:block; color:var(--ink); font-weight:500; font-size:15.5px; margin-bottom:4px }

/* ==================================================== 08 · Erster Auftrag = */
.first{ background:var(--ink); color:var(--on-dark); padding-block:var(--sp-xl) }
.first h2{ margin-top:clamp(20px,2.4vw,30px); max-width:19ch }
.first__lead{ margin-top:22px; max-width:46ch; font-size:clamp(16px,1.1vw,18px); line-height:1.6; color:var(--on-dark-mute) }
.first__steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(36px,4vw,64px); margin-top:clamp(56px,7vw,96px) }
.first__step{ border-top:1px solid var(--on-dark-line); padding-top:30px }
.first__step b{ font-size:12px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--on-dark-mute) }
.first__step p{ margin-top:14px; font-size:15.5px; line-height:1.55 }
.first__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; margin-top:clamp(44px,5vw,68px) }
.first__cta small{ font-size:14px; color:var(--on-dark-mute) }

/* ========================================================= 09 · Kontakt === */
.contact{ display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:clamp(36px,6vw,96px) }
.field{ margin-bottom:30px }
.field label{ display:block; font-size:11.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); margin-bottom:9px }
.field input, .field textarea, .field select{
  width:100%; border:0; border-bottom:1px solid var(--line-2); background:none;
  font:inherit; font-size:16.5px; color:var(--ink); padding:9px 0; border-radius:0;
  transition:border-color var(--t-fast);
}
.field select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--graphite) 50%),linear-gradient(135deg,var(--graphite) 50%,transparent 50%);
  background-position:calc(100% - 10px) 19px, calc(100% - 5px) 19px;
  background-size:5px 5px; background-repeat:no-repeat;
}
.field :is(input,textarea,select):focus{ outline:0; border-bottom-color:var(--ink) }
.field textarea{ resize:vertical; min-height:112px }
.field.is-err :is(input,textarea,select){ border-bottom-color:#8E2A2A }
.field__err{ display:none; font-size:12.5px; color:#8E2A2A; margin-top:7px }
.field.is-err .field__err{ display:block }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(20px,3vw,44px) }
.formnote{ font-size:13px; color:var(--mute); max-width:46ch; margin:-6px 0 28px; line-height:1.5 }
.hp{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }

.okmsg{ display:none; border:1px solid var(--ink); padding:26px; font-size:16px; line-height:1.56; max-width:46ch }
.okmsg.is-on{ display:block }
.okmsg b{ display:block; font-weight:500; margin-bottom:8px }

.cdata li{ padding:17px 0; border-bottom:1px solid var(--line); font-size:16px }
.cdata li:first-child{ border-top:1px solid var(--ink) }
.cdata .k{ display:block; font-size:11.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); margin-bottom:7px }
.cdata a{ text-decoration:none }

/* ====================================================== Unterseiten ======= */
/* Kopf einer Unterseite: dieselbe Typo-Hierarchie wie die Startseite, aber
   ohne Bühne — die Seite muss sofort zur Sache kommen. */
.phero{ padding-top:clamp(104px,12vh,152px); padding-bottom:clamp(40px,5vw,72px); border-bottom:1px solid var(--line) }
.phero h1{ margin-top:clamp(18px,2.2vw,28px); max-width:17ch; font-size:clamp(34px,5vw,68px); line-height:1.04; font-weight:500; letter-spacing:-.028em; text-wrap:balance }
.phero__lead{ margin-top:clamp(20px,2.4vw,30px); font-size:clamp(16.5px,1.3vw,19px); line-height:1.56; color:var(--graphite); max-width:56ch; text-wrap:pretty }
.phero .fig-img{ margin-top:clamp(30px,3.6vw,52px) }
.phero .fig-img + .jump{ margin-top:clamp(26px,3vw,40px) }
/* Nach dem Seitenkopf trennt schon die Linie — dort braucht es nicht noch
   den vollen Bewegungsabstand obendrauf. */
.phero + .sec{ padding-top:var(--sp-lg) }

/* Anker-Navigation innerhalb einer Unterseite */
.jump{ display:flex; flex-wrap:wrap; gap:8px 26px; margin-top:clamp(28px,3vw,40px) }
.jump a{ font-size:14.5px; text-decoration:none; color:var(--graphite); padding-bottom:3px; position:relative }
.jump a::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform var(--t-mid) }
.jump a:hover{ color:var(--ink) }
.jump a:hover::after{ transform:scaleX(1) }

/* Werkgruppe als eigener Abschnitt auf /leistungen */
.wg{ padding-block:clamp(52px,6.5vw,104px); border-top:1px solid var(--line) }
.wg:first-of-type{ border-top:0 }
.wg__top{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(28px,5vw,80px); align-items:center }
.wg h2{ margin-top:14px; max-width:18ch }
.wg__lead{ margin-top:20px }
.wg__list{ margin-top:clamp(28px,3.4vw,48px); display:grid; grid-template-columns:repeat(3,1fr); gap:0 clamp(24px,3vw,52px) }
.wg__list li{ padding:14px 0; border-top:1px solid var(--line); font-size:15.5px }
.wg__list li b{ display:block; font-weight:500 }
.wg__list li span{ display:block; margin-top:5px; font-size:13.5px; color:var(--graphite); line-height:1.5 }

/* Faktenzeile — knappe, überprüfbare Aussagen */
.facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line) }
.facts > div{ background:var(--paper); padding:clamp(22px,2.6vw,34px) }
/* Nur die direkten Kinder ansprechen. Mit .facts b bzw. .facts span erwischt
   der Selektor auch verschachtelte Auszeichnungen im Fließtext und macht sie
   zu Blöcken — dann bricht ein Satz mitten im Wort um. */
.facts > div > b{ display:block; font-size:clamp(22px,2.2vw,30px); font-weight:500; letter-spacing:-.026em; line-height:1 }
.facts > div > span{ display:block; margin-top:12px; font-size:14.5px; line-height:1.5; color:var(--graphite) }

/* Abschluss-Band mit CTA */
.band{ background:var(--ink); color:var(--on-dark); padding-block:clamp(64px,8vw,120px); margin-top:var(--sp-xl) }
.band h2{ max-width:20ch; margin-top:18px }
.band p{ margin-top:20px; max-width:46ch; color:var(--on-dark-mute); font-size:17px; line-height:1.6 }
.band__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; margin-top:clamp(32px,4vw,52px) }
.band__cta small{ font-size:14px; color:var(--on-dark-mute) }

@media (max-width:1000px){
  .wg__top{ grid-template-columns:1fr; gap:26px }
  .wg__list{ grid-template-columns:1fr }
  .facts{ grid-template-columns:1fr }
}

/* ==================================================== Rechtstexte ========= */
/* Impressum und Datenschutz: schmale Textspalte, klare Zwischenüberschriften.
   Hier zählt Lesbarkeit, nicht Gestaltung. */
.legal{ max-width:72ch }
.legal h2{
  margin-top:clamp(38px,4vw,58px); padding-top:22px; border-top:1px solid var(--line);
  font-size:clamp(19px,1.7vw,23px); font-weight:500; letter-spacing:-.014em;
}
.legal h2:first-child{ margin-top:0; padding-top:0; border-top:0 }
.legal p{ margin-top:14px; font-size:16.5px; line-height:1.68; color:var(--graphite); text-wrap:pretty }
.legal p b, .legal p strong{ color:var(--ink); font-weight:500 }
.legal code{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.92em }
.legal__note{
  margin-top:22px; padding:20px 22px; border-left:2px solid var(--line-2);
  background:var(--paper-2); font-size:15px; line-height:1.6;
}

/* ========================================================== 10 · Footer === */
.ftr{ border-top:1px solid var(--line); padding-block:clamp(48px,5.5vw,72px) 40px; margin-top:var(--sp-xl) }
.ftr__in{ display:flex; flex-wrap:wrap; gap:30px 52px; align-items:flex-start; font-size:14.5px; color:var(--graphite); line-height:1.68 }
.ftr__in b{ color:var(--ink); font-weight:600 }
.ftr__legal{ margin-left:auto; display:flex; gap:26px }
.ftr__legal a{ text-decoration:none; font-size:14.5px }
.ftr__bot{ margin-top:44px; padding-top:22px; border-top:1px solid var(--line); font-size:12.5px; color:var(--mute); display:flex; flex-wrap:wrap; gap:8px 24px }

/* ============================================================== Reveal ==== */
/* Grundzustand ist SICHTBAR. Nur wenn JS läuft (html.js) wird überhaupt
   ausgeblendet — sonst würde ein Skriptfehler die halbe Seite verschlucken. */
.rv{ opacity:1; transform:none }
.js .rv{ opacity:0; transform:translateY(10px); transition:opacity var(--t-slow), transform var(--t-slow) }
.js .rv.is-in{ opacity:1; transform:none }

.split .line > i{ transform:none }
.js .split .line > i{ transform:translateY(102%) }
.js .split.is-in .line > i{ transform:none }

/* ============================================================== Mobile ==== */
@media (max-width:1060px){
  .hero__grid{ grid-template-columns:1fr; gap:clamp(28px,4vw,44px); align-items:start }
  .pledge{ grid-template-columns:1fr; gap:var(--sp-md) }
  .pledge__list{ align-self:auto }
  .sys, .master, .contact{ grid-template-columns:1fr }
  .voice__in{ grid-template-columns:1fr; gap:24px; align-items:start }
  .first__steps{ grid-template-columns:1fr; gap:0 }
  .first__step{ margin-top:40px }

  /* Prozess mobil: Buehne klebt oben, Schritte laufen darunter durch —
     dieselbe Choreografie, nur vertikal statt nebeneinander. */
  .process__scroll{ grid-template-columns:1fr; gap:0 }
  .process__stage{
    position:sticky; top:64px; z-index:2; padding-top:24px; padding-bottom:18px;
    background:var(--ink); margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter);
  }
  .pstage__media{ max-width:min(58vw, 300px); margin-inline:auto }
  .pstep{ min-height:0; padding-block:clamp(40px,7vh,64px) }
  .pstep:first-child{ border-top:1px solid var(--on-dark-line); margin-top:8px }
}

@media (max-width:1100px){
  html{ scroll-padding-top:76px }
  .nav, .hdr__tel, .hdr__cta{ display:none }
  .burger{ display:block }
  .hdr__in{ height:68px }
  .hdr.is-scrolled .hdr__in{ height:60px }

  body.nav-open{ overflow:hidden }

  /* Ohne diese Zeile ist das Menue unbrauchbar. `backdrop-filter` auf .hdr
     macht den Header zum Bezugsrahmen fuer position:fixed-Nachfahren — das
     `inset:60px 0 0` des Panels bezieht sich dann auf die Header-Unterkante
     statt auf den Bildschirm, und das Panel wird nur so hoch wie sein eigenes
     Padding (128 px). Vier der fuenf Menuepunkte lagen dadurch ausserhalb.
     Bei offenem Menue braucht der Header ohnehin keine Transparenz — das
     Panel deckt die Seite ja ab. Gilt gleichermassen fuer transform, filter,
     perspective und will-change: alle erzeugen denselben Bezugsrahmen. */
  body.nav-open .hdr{
    backdrop-filter:none; -webkit-backdrop-filter:none;
    background:var(--paper);
  }

  body.nav-open .nav{
    display:flex; flex-direction:column; gap:0;
    position:fixed; inset:60px 0 0; z-index:70;
    background:var(--paper); padding:8px var(--gutter) 120px; overflow-y:auto;
  }
  body.nav-open .nav a{ font-size:28px; font-weight:500; letter-spacing:-.028em; color:var(--ink); padding:22px 0; border-bottom:1px solid var(--line) }
  body.nav-open .nav a::after{ display:none }
  /* Fingerkuppen brauchen mehr als Textzeilenhoehe: die Fusszeilen-Links
     standen nur 26 px hoch. Ein unsichtbarer, vergroesserter Trefferbereich
     waere hier falsch gewesen — Telefon und E-Mail stehen mit 0 px Abstand
     untereinander (nur durch <br> getrennt), die Flaechen haetten sich
     ueberlappt und ein Tipp auf die Nummer haette das Mailprogramm geoeffnet.
     Nachgemessen mit elementFromPoint. Deshalb echte Hoehe statt Attrappe. */
  .ftr .lnk{ display:block; padding-block:9px }
  .ftr__legal{ display:flex; flex-wrap:wrap; gap:0 28px }
  .ftr__legal a{ padding-block:9px }
  .lnk-arrow{ padding-block:9px }

  body.nav-open .hdr__tel{
    display:flex; position:fixed; left:var(--gutter); right:var(--gutter); bottom:32px; z-index:72;
    align-items:center; justify-content:center; min-height:54px;
    background:var(--ink); color:var(--paper); border-radius:2px;
  }

  /* Hero mobil: Zeile, Aussage, Beweis, Begruendung, Aktion. */
  .hero{ padding-top:104px }
  .hero h1{ max-width:none }
  .hero__grid{ display:flex; flex-direction:column; margin-top:clamp(24px,4vw,32px) }
  .hero__txt{ display:contents }
  .hero__stage{ order:1 }
  .hero__sub{ order:2; max-width:none; margin-top:clamp(24px,4vw,32px) }
  .hero__cta{ order:3; flex-direction:column; align-items:stretch; gap:10px }
  .hero .btn{ width:100% }

  .pledge__n{ font-size:clamp(76px,26vw,104px) }
  .express .lnk-arrow{ margin-left:0 }

  .grp{ grid-template-columns:1fr !important; gap:24px; padding:36px 0 }
  .grp:nth-child(even) .grp__txt{ order:0 }

  .process__stage{ top:60px }
  .row2{ grid-template-columns:1fr }
  .ftr__legal{ margin-left:0; width:100% }

}

/* ================================================== Reduzierte Bewegung === */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important }
  .rv{ opacity:1; transform:none }
  .split .line > i{ transform:none }
  .stage__layer + .stage__layer{ opacity:1 }
  .hdr__cta{ opacity:1; transform:none; pointer-events:auto }
  /* Prozess wird zur ruhigen Liste: kein Pinning, kein Dimmen. */
  .process__stage{ position:static; padding-top:0 }
  .pstep{ opacity:1; min-height:0; padding-block:40px }
  .pstage__frame{ position:relative; opacity:1; margin-top:12px }
  .pstage__frame:not(:first-child){ display:none }
}

/* ==================================================== Hero-Buehne ========= */
/* Das Filmband blendet auf, sobald es abspielbereit ist — sonst blitzt das
   Poster auf und wird eine Zehntelsekunde spaeter vom ersten Frame ersetzt.
   Die Klasse .is-ready setzt M8 in main.js.

   Achtung, das ist schon einmal schiefgegangen: Die Klasse kam ursprünglich
   vom Punktwolken-Vorspann (js/hero.js). Als der entfiel, setzte sie niemand
   mehr — und das Hero-Video blieb dauerhaft auf opacity:0, also unsichtbar,
   obwohl es lief. Wer diese Regel anfasst, muss den Setzer in main.js pruefen.
   Die Regeln fuer das fruehere .stage__fx-Overlay sind mit dem Vorspann
   entfallen; im Markup gibt es das Element nicht mehr. */
.js .stage__vid{ opacity:0; transition:opacity 700ms cubic-bezier(.2,0,0,1) }
.js .stage.is-ready .stage__vid{ opacity:1 }

@media (prefers-reduced-motion:reduce){
  .js .stage__vid{ opacity:1 }
}

/* ==================================================== Anfahrt / Karte ===== */
.karte{ margin:clamp(32px,4vw,52px) 0 0 }
.karte__rahmen{ position:relative }
.karte__buehne{
  position:relative; overflow:hidden; background:var(--paper-2);
  aspect-ratio:1600/760;
}
.karte__bild, .karte__buehne iframe{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; border:0; display:block;
}
.karte__box{
  position:absolute; left:clamp(14px,2.4vw,28px); bottom:clamp(14px,2.4vw,28px);
  max-width:min(340px,calc(100% - 28px)); background:var(--paper);
  padding:clamp(18px,2vw,24px);
  box-shadow:0 1px 2px rgba(20,19,18,.10), 0 14px 34px rgba(20,19,18,.09);
}
.karte__box b{ display:block; font-size:16px; font-weight:600; letter-spacing:-.01em }
.karte__box span{ display:block; margin-top:7px; font-size:15px; line-height:1.5; color:var(--graphite) }
.karte__aktion{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px }
.karte__fuss{ margin-top:14px; font-size:13px; line-height:1.65; color:var(--mute); max-width:82ch }

/* Liegt der Kasten über der Karte, verdeckt er nach dem Laden die Bedienung. */
@media (min-width:641px){
  .karte.is-live .karte__box{ display:none }
}

@media (max-width:900px){
  .karte__buehne{ aspect-ratio:4/3 }
}

/* Schmale Schirme: Der Kasten würde die Karte fast vollständig zudecken —
   deshalb steht er dort unter der Karte statt darauf. */
@media (max-width:640px){
  .karte__buehne{ aspect-ratio:1/1 }
  .karte__box{
    position:static; max-width:none; background:none; box-shadow:none;
    padding:20px 0 0;
  }
  .karte__aktion .btn{ width:100%; justify-content:center }
}

/* Release 2026-09-06: resilient content, readable labels and keyboard/touch access. */
[hidden]{display:none!important}
html{scroll-padding-top:100px}
body{overflow-wrap:break-word}
.hero h1{max-width:21ch}
.hero__stage{width:100%}
.hero__sub{color:var(--graphite)}
.mark__wm span{font-size:12px;letter-spacing:.14em}
.mark b{font-size:15px;letter-spacing:.035em}
.nav{gap:24px}
.nav a{min-height:44px;display:inline-flex;align-items:center}
.nav a[aria-current=page]{color:var(--ink);text-decoration:underline;text-underline-offset:7px}
.eyebrow,.stage__claim,.pstage__meta,.cdata .k,.sys__list em{font-size:12px}
.field label,.formnote,.field__err,.field-help{font-size:14px}
.field label{letter-spacing:.055em}
.field label span{font-size:13px;text-transform:none;letter-spacing:0}
.field-help{color:var(--graphite);line-height:1.55;margin-top:12px}
.field select{padding-right:24px}
.field :is(input,textarea,select):focus-visible{outline:2px solid var(--wachs);outline-offset:5px}
.form-status{margin:0 0 24px;padding:16px;border-left:3px solid var(--ink);background:var(--paper-2);font-size:16px}
.form-status.is-error{border-color:#8E2A2A;color:#782020}
button:disabled{opacity:.65;cursor:wait}
.cdata a,.ftr a,.legal a{overflow-wrap:anywhere;max-width:100%}
.legal a,.formnote a,.field-help a,.karte__fuss a{text-decoration:underline;text-underline-offset:3px}
.legal ul{list-style:disc;padding-left:24px;margin-top:18px;color:var(--graphite)}
.legal li+li{margin-top:10px}
.video-toggle{display:inline-flex;min-height:44px;align-items:center;margin-top:10px;background:transparent;border:1px solid var(--line-2);padding:8px 14px;color:var(--ink);cursor:pointer;font-size:14px;border-radius:2px}
.video-toggle:hover{border-color:var(--ink)}
.karte__fuss{font-size:14px}
.karte.is-live .karte__box{display:block;position:static;max-width:none;box-shadow:none;padding:20px 0 0;background:none}
.pstep{opacity:1}
.pstep__image{display:none;margin-top:24px}
.pstep__image img{width:100%;height:auto}
.hero-response{padding-top:80px;padding-bottom:60px;max-width:850px}
.hero-response h1{font-size:clamp(30px,5vw,54px);line-height:1.1;margin:24px 0}
.hero-response p{margin-top:24px}
@media(max-width:1100px){
  .hdr__in{gap:12px}
  body.nav-open .nav{inset:68px 0 0;padding-bottom:120px}
  body.nav-open .nav a{font-size:clamp(22px,4vw,30px);padding-block:18px}
  body.nav-open .hdr__tel{bottom:max(20px,env(safe-area-inset-bottom))}
  html:not(.nav-ready) .hdr{position:static}
  html:not(.nav-ready) .hdr__in{height:auto;flex-wrap:wrap;padding-block:16px}
  html:not(.nav-ready) .nav{display:flex;flex-wrap:wrap;gap:0 20px;width:100%;order:3}
  html:not(.nav-ready) .burger{display:none}
  html:not(.nav-ready) .hero,html:not(.nav-ready) .phero{padding-top:40px}
  .hero__grid{gap:24px;align-items:stretch}
  .hero__sub{order:1;margin-top:0}
  .hero__cta{order:2;width:100%;margin-top:0}
  .hero__stage{order:3}
  .process__scroll{display:block}
  .process__stage{display:none}
  .pstep{min-height:0;padding-block:40px}
  .pstep__image{display:block}
  .pstep h3{color:var(--on-dark)}
}
html:not(.nav-ready) .process__scroll{display:block}
html:not(.nav-ready) .process__stage{display:none}
html:not(.nav-ready) .pstep{min-height:0}
html:not(.nav-ready) .pstep__image{display:block;max-width:680px}
@media(prefers-reduced-motion:reduce){
  .process__scroll{display:block}
  .process__stage{display:none}
  .pstep__image{display:block;max-width:680px}
}
@media(max-width:420px){
  .mark{gap:8px}
  .mark b{font-size:13px}
  .mark__wm span{font-size:10px;letter-spacing:.06em}
  .hero h1{font-size:clamp(34px,10vw,42px)}
  .hero{padding-top:96px}
}
@media print{
  .hdr{position:static}.burger,.video-toggle,.karte__aktion,form{display:none!important}
  .process__scroll{display:block}.process__stage{display:none}.pstep{min-height:0}
  .rv{opacity:1;transform:none}.sec,.band,.first{padding-top:32px;margin-top:32px}
  a{overflow-wrap:anywhere}
}

/* Contact attachments and the personal collection promise. */
.pledge__headline{font-size:clamp(34px,4.25vw,60px);line-height:1.05;font-weight:500;letter-spacing:-.04em;font-variation-settings:"wdth" 90;margin:0;max-width:19ch}
.field--attachment input[type="file"]{display:block;max-width:100%;padding:15px 0;font-size:14px;cursor:pointer}
.field--attachment input[type="file"]::file-selector-button{font:inherit;background:var(--ink);color:var(--paper);border:1px solid var(--ink);padding:12px 16px;margin-right:14px;cursor:pointer}
.field--attachment input[type="file"]:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.attachment-remove{font:inherit;font-size:14px;text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:8px 0;cursor:pointer;color:var(--graphite)}
.attachment-remove[hidden]{display:none}