/* Matrix Marketing – /ueberuns als Geschichte (Prototyp 12.10.2026)
   Ergänzt main.css und seiten.css: Seitenkopf mit der Karte der Ostschweiz (zeichnet sich beim Laden), «Unsere Haltung»
   als vier ruhige Zeilen, danach erst das Team (Grafikleiter in Kartengrösse mit Text daneben, dann die Reihe),
   Kundenstimmen, Schluss-Aufruf. Gleiche Regeln wie überall: Schwarz, Gold, Elfenbein, Haarlinien, keine Schatten, keine
   runden Ecken. Bewegung nur mit transform, opacity und clip-path; bei «weniger Bewegung» nur Einblenden; ohne JavaScript
   steht alles fertig da. Nichts ausser dem h1 dominiert: Abschnittstitel in .titel--m, Zitate und Zeilen zurückgenommen. */

/* ------------------------------------------------------------------ Seitenkopf: Text links, Karte rechts */
.us-kopf .seitenkopf__raster { align-items: center; }
.us-karte { position: relative; margin: 0; width: 100%; max-width: 640px; justify-self: center; }
.us-karte svg { position: relative; z-index: 1; width: 100%; max-width: none; }
.us-karte figcaption { position: relative; z-index: 1; }
@media (min-width: 1024px) {
  .us-kopf .seitenkopf__text { grid-column: 1 / span 7; grid-row: 1; }
  .us-kopf .seitenkopf__neben { grid-column: 8 / -1; grid-row: 1; margin-top: 0; align-self: center; padding-bottom: 0; max-width: none; }
}
/* 13.10.2026: /en/about von 1024 bis 1279 px – «In-house designers» war je nach Breite 6–18 px zu breit für die Spalte, der Titel
   stand vierzeilig (In-house | designers | in Sirnach, | not templates.). Rund 5 % kleiner passt die Wortgruppe: drei Zeilen. */
@media (min-width: 1024px) and (max-width: 1279px) {
  html[lang="en"] .us-kopf .seitenkopf__titel { font-size: calc(.9rem + 3.3vw); }
}

/* Goldstaub hinter der Karte (eigener Canvas aus ueber-story.js, höchstens 120 Teilchen im Logo-Gold, treibt langsam;
   nur solange die Karte im Bild ist, nie bei «weniger Bewegung»). Liegt hinter Karte und Legende, läuft zu den Rändern aus. */
.us-staub {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 58% 60% at 50% 46%, #000 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 58% 60% at 50% 46%, #000 30%, transparent 100%);
}

/* Kopf baut sich beim Laden auf (wie der Kopf der Startseite): Zeile für Zeile, dann die Karte */
.js .us-kopf .seitenkopf__text > * { animation: auftritt 1.1s var(--ease) both; }
.js .us-kopf .seitenkopf__text > :nth-child(1) { animation-delay: .05s; }
.js .us-kopf .seitenkopf__text > :nth-child(2) { animation-delay: .22s; }
.js .us-kopf .seitenkopf__text > :nth-child(3) { animation-delay: .38s; }
.js .us-kopf .seitenkopf__text > :nth-child(4) { animation-delay: .5s; }
.js .us-kopf .us-karte { animation: auftritt 1.1s var(--ease) .3s both; }
@media (prefers-reduced-motion: reduce) {
  .js .us-kopf .seitenkopf__text > *, .js .us-kopf .us-karte { animation-name: auftritt-sanft; }
}

/* Karte: Linien laufen von Sirnach nach aussen, Orte und Namen leuchten nach ihrer Nähe zu Sirnach auf
   (assets/js/ueber-story.js rechnet die Verzögerung --d aus dem Abstand). Läuft das Skript nicht, zeigt das
   Sicherheitsnetz nach 3 s die ganze Karte; ohne JavaScript steht sie von Anfang an da. */
.js .us-karte:not(.is-gezeichnet) :is(.karte__linien line, .karte__orte circle, .karte__sirnach, .karte__namen text) { opacity: 0; }
.js .us-karte:not(.is-gezeichnet) .karte__ring { opacity: 0; transform: scale(.3); }
.js .us-karte:not(.is-bereit) :is(.karte__linien line, .karte__orte circle, .karte__ring, .karte__sirnach, .karte__namen text) {
  animation: us-notaus 0s linear 3s forwards;
}
@keyframes us-notaus { to { opacity: 1; transform: none; stroke-dashoffset: 0; } }
.js .us-karte .karte__orte circle, .js .us-karte .karte__namen text, .js .us-karte .karte__sirnach { transition: opacity .7s var(--ease) var(--d, 0s); }
.js .us-karte .karte__ring { transform-box: fill-box; transform-origin: center; transition: opacity .7s var(--ease), transform 1s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .js .us-karte:not(.is-gezeichnet) .karte__ring { transform: none; }
}

/* Beschriftung der Karte: nie unter 12 px auf dem Bildschirm. Die Karte wird mit der Spalte kleiner, darum wechselt je nach
   Breite der Namensatz (Computer-Satz 14 px, Handy-Satz 17/22 px – beide mit den vermessenen Positionen; unter 390 px
   wächst der Handy-Satz weiter, die Positionen bleiben). */
.us-karte .karte__namen { display: inline; }
.us-karte .karte__namen--handy { display: none; }
.us-karte .karte__namen text { font-size: 14px; }
.us-karte .karte__namen .karte__name-sirnach { font-size: 15px; }
@media (max-width: 639px), (min-width: 1024px) and (max-width: 1599px) {
  .us-karte .karte__namen { display: none; }
  .us-karte .karte__namen--handy { display: inline; }
  .us-karte .karte__namen--handy text { font-size: 17px; }
  .us-karte .karte__namen--handy .karte__name-sirnach { font-size: 18px; }
}
@media (max-width: 519px), (min-width: 1024px) and (max-width: 1279px) {
  .us-karte .karte__namen--handy text { font-size: 22px; }
  .us-karte .karte__namen--handy .karte__name-sirnach { font-size: 23px; }
}
@media (max-width: 389px) {
  .us-karte .karte__namen--handy text { font-size: 25px; }
  .us-karte .karte__namen--handy .karte__name-sirnach { font-size: 26px; }
}
@media (max-width: 359px) {
  .us-karte .karte__namen--handy text { font-size: 27.5px; }
  .us-karte .karte__namen--handy .karte__name-sirnach { font-size: 28.5px; }
}

/* ------------------------------------------------------------------ Unsere Haltung: vier ruhige Zeilen */
.us-manifest {
  margin-top: clamp(28px, 4vw, 56px); max-width: 24em;
  font-size: clamp(1.4rem, .95rem + 1.6vw, 2.4rem); line-height: 1.22;
}
.us-saetze { margin-top: clamp(36px, 4.5vw, 72px); border-bottom: 1px solid var(--linie); }
.us-satz { position: relative; display: grid; gap: 10px; align-items: start; padding: 24px 0 28px; border-top: 1px solid var(--linie); }
.us-satz::before { content: ""; position: absolute; left: 0; top: -1px; width: 40px; height: 1px; background: var(--gold); }
.us-satz__marke { font-family: var(--f-titel); font-stretch: 125%; font-weight: 600; font-size: 12px; line-height: 1.4; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.us-satz__titel {
  font-family: var(--f-titel); font-stretch: 125%; font-weight: 600;
  font-size: clamp(1.25rem, .95rem + 1.1vw, 1.9rem); line-height: 1.14; letter-spacing: -.02em; color: var(--elfenbein); text-wrap: balance;
}
.us-satz__text { font-size: 15.5px; line-height: 1.6; color: var(--grau); max-width: 30em; text-wrap: pretty; }
@media (min-width: 768px) {
  .us-satz { grid-template-columns: minmax(0, 2fr) minmax(0, 6fr) minmax(0, 4fr); column-gap: var(--spalt); padding: 28px 0 32px; }
  .us-satz__marke { padding-top: .45em; }
  .us-satz__text { font-size: 16px; padding-top: .15em; }
}
@media (min-width: 1280px) {
  .us-satz { padding: 30px 0 36px; }
}
/* Beim Scrollen: die Haarlinie zeichnet sich von links, dann die Goldmarke, der Titel wischt sich frei, der Satz blendet ein */
.js .us-satz[data-reveal] { opacity: 1; transform: none; border-top-color: transparent; }
.js .us-satz[data-reveal]::after {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--linie);
  transform: scaleX(0); transform-origin: left center; transition: transform 1.3s var(--ease);
}
.js .us-satz[data-reveal]::before { transform: scaleX(0); transform-origin: left center; transition: transform 1s var(--ease) .25s; }
.js .us-satz[data-reveal] .us-satz__marke { opacity: 0; transition: opacity .9s var(--ease) .3s; }
.js .us-satz[data-reveal] .us-satz__titel {
  clip-path: inset(0 -.5em 100% -.5em);
  transition: clip-path 1.05s var(--ease) .35s, translate 1.15s var(--ease) .35s;
}
.js .us-satz[data-reveal] .us-satz__text { opacity: 0; transition: opacity 1s var(--ease) .55s, transform 1.1s var(--ease) .55s; }
.js .us-satz[data-reveal].is-sichtbar::after, .js .us-satz[data-reveal].is-sichtbar::before { transform: scaleX(1); }
.js .us-satz[data-reveal].is-sichtbar .us-satz__marke, .js .us-satz[data-reveal].is-sichtbar .us-satz__text { opacity: 1; transform: none; }
.js .us-satz[data-reveal].is-sichtbar .us-satz__titel { clip-path: inset(-.3em -.5em -.4em -.5em); }
@media (prefers-reduced-motion: no-preference) {
  .js .us-satz[data-reveal] .us-satz__titel { translate: 0 .32em; }
  .js .us-satz[data-reveal].is-sichtbar .us-satz__titel { translate: 0 0; }
  .js .us-satz[data-reveal] .us-satz__text { transform: translate3d(0, 14px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .js .us-satz[data-reveal]::before, .js .us-satz[data-reveal]::after { transition: transform 1s var(--ease); }
}

/* ------------------------------------------------------------------ Team: zuerst der Grafikleiter – so gross wie eine Teamkarte
   (gleiche Breite, gleiches 3:4-Format wie die Reihe darunter), Name, Rolle und zwei Sätze daneben, Oberkanten bündig.
   Handy: Porträt links in halber Breite, Name und Rolle daneben, die Sätze darunter. */
.us-leiter { margin-top: clamp(36px, 4.5vw, 64px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; align-items: start; }
.us-leiter__bild { display: contents; }
.us-leiter__bild img { grid-column: 1; grid-row: 1; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 0; background: #1a1a1a; }
.us-leiter__bild figcaption { grid-column: 2; grid-row: 1; display: grid; gap: 3px; align-content: start; margin-top: -3px; }
.us-leiter .person__name { font-size: 16px; }
.us-leiter .person__rolle { font-size: 14px; }
.us-leiter__text { grid-column: 1 / -1; grid-row: 2; display: grid; gap: 16px; justify-items: start; align-self: start; }
.us-leiter__satz { font-size: 16px; line-height: 1.6; color: var(--text-2); max-width: 30em; text-wrap: pretty; }
.us-leiter__satz--gross {
  font-family: var(--f-akzent); font-style: italic; font-weight: 360; font-variation-settings: "opsz" 48;
  font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); line-height: 1.3; letter-spacing: -.005em; color: var(--elfenbein); max-width: 24em;
}
.us-leiter__text .textlink { margin-top: 2px; }
@media (min-width: 600px) {
  .us-leiter { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--spalt); row-gap: 16px; }   /* Name oben, die Sätze direkt darunter – die Höhe des Porträts geht in die zweite Zeile */
  .us-leiter__bild img { grid-column: 1 / span 4; grid-row: 1 / span 2; }
  .us-leiter__bild figcaption { grid-column: 5 / -1; grid-row: 1; }
  .us-leiter__text { grid-column: 5 / -1; grid-row: 2; }
  .us-leiter .person__name { font-size: 17px; }
  .us-leiter__satz:not(.us-leiter__satz--gross) { font-size: 16.5px; }
}
@media (min-width: 1024px) {
  .us-leiter__bild img { grid-column: 1 / span 3; }
  .us-leiter__bild figcaption, .us-leiter__text { grid-column: 4 / span 7; padding-left: clamp(0px, 1.5vw, 24px); }
  .us-leiter .person__name { font-size: clamp(15px, .7rem + .45vw, 18px); }
}
/* Das Porträt wird aufgezogen und «kommt an» (gleicher Mechanismus wie alle Bilder in [data-reveal]); Name und Sätze folgen */
.js .us-leiter[data-reveal] { opacity: 1; transform: none; }
.js .us-leiter[data-reveal] img { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--ease) .1s, scale 1.7s var(--ease) .1s; }
.js .us-leiter[data-reveal].is-sichtbar img { clip-path: inset(0); }
.js .us-leiter[data-reveal] figcaption, .js .us-leiter[data-reveal] .us-leiter__text > * { opacity: 0; transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.js .us-leiter[data-reveal] figcaption { transition-delay: .35s; }
.js .us-leiter[data-reveal] .us-leiter__text > :nth-child(1) { transition-delay: .5s; }
.js .us-leiter[data-reveal] .us-leiter__text > :nth-child(2) { transition-delay: .65s; }
.js .us-leiter[data-reveal] .us-leiter__text > :nth-child(3) { transition-delay: .8s; }
.js .us-leiter[data-reveal].is-sichtbar figcaption, .js .us-leiter[data-reveal].is-sichtbar .us-leiter__text > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .us-leiter[data-reveal] img { scale: 1.06; }
  .js .us-leiter[data-reveal].is-sichtbar img { scale: 1; }
  .js .us-leiter[data-reveal] figcaption, .js .us-leiter[data-reveal] .us-leiter__text > * { transform: translate3d(0, 18px, 0); }
}

/* Die Reihe: zwei Porträts in derselben Grösse wie der Grafikleiter, bündig (gleiche Ober- und Unterkante), daneben
   «Ebenfalls im Team»; am Handy zwei Spalten */
.us-reihe { margin-top: clamp(36px, 4.5vw, 64px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; align-items: start; }
.us-reihe .person figure { display: block; }
.us-reihe .person figcaption { margin-top: 12px; padding-bottom: 0; }
.us-weitere { grid-column: 1 / -1; margin-top: 8px; }
@media (min-width: 600px) {
  .us-reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: 40px; }
  .us-weitere { grid-column: auto; margin-top: 0; }
  .us-weitere .team__liste { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1024px) {
  .us-reihe { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .us-reihe .person { grid-column: span 3; }
  .us-weitere { grid-column: 7 / -1; }
  .us-weitere .team__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--spalt); }
}

/* ------------------------------------------------------------------ Kundenstimmen: fünf Google-Stimmen mit Firma (14.10.2026,
   Einverständnis der Kunden), wörtlich – die Stimmen der Startseite stehen hier nicht.
   Der Titel steht allein in einer Reihe; die erste (lange) Stimme läuft über zwei Spalten: ab 1024 px 2 + 1, darunter 3;
   am Tablet erste Stimme volle Breite, dann 2 + 2. Am Handy untereinander. */
.us-stimmen .stimmen__raster { gap: 36px; }
.us-stimmen .stimme { padding-top: 24px; border-top: 1px solid var(--linie); }
.us-stimmen .stimme blockquote p { font-size: clamp(1.15rem, 1rem + .55vw, 1.4rem); line-height: 1.34; }
/* Bricht «Google-Rezension» bei langen Namen um (1100 px: Tamara Jordi-Kipfer), steht es bündig unter dem Namen statt unter der Goldlinie */
.us-stimmen .stimme figcaption { position: relative; padding-left: 40px; }
.us-stimmen .stimme figcaption::before { position: absolute; left: 0; top: .8em; }
@media (min-width: 768px) {
  .us-stimmen .stimmen__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(40px, 5vw, 64px); row-gap: clamp(40px, 4.5vw, 56px); align-items: start; }
  .us-stimmen .stimmen__titel { grid-column: auto; grid-row: auto; margin: 0; padding-top: 24px; border-top: 1px solid transparent; }
  .us-stimmen .stimme:nth-of-type(n) { grid-column: auto; grid-row: auto; }
  .us-stimmen .stimmen__titel { grid-column: 1 / -1; padding-top: 0; border-top: 0; }
  /* 17.10.2026: sechs Stimmen (A. Gjergji dazu) – gleich breit, ab 1024 px 3 + 3, am Tablet 2 + 2 + 2 */
}
@media (min-width: 1024px) {
  .us-stimmen .stimmen__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(32px, 3vw, 48px); row-gap: clamp(44px, 4.5vw, 64px); }
  /* Feinschliff 17.10.2026: die erste Stimme ist auf drei Sätze gekürzt – über zwei Spalten etwas grösser gesetzt, damit sie neben
     der zweiten Stimme ausgewogen steht (vorher halb so hoch wie ihre Nachbarin) */
}
.us-stimmen .abschnitt__mehr { margin-top: clamp(28px, 3.5vw, 48px); }

/* ------------------------------------------------------------------ Schluss: Titel, ein Satz, Knopf und Link zum Kontaktformular
   (das Formular steht auf Startseite, Leistungen und Kontakt) */
.us-schluss__aktion { margin-top: 36px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 32px; }
@media (max-width: 599px) {
  .us-schluss__aktion { flex-direction: column; align-items: stretch; width: 100%; }
  .us-schluss__aktion .textlink { justify-content: center; }
}

/* 13.10.2026 Druck: Haltungssätze, Leitung und Karte stehen gedruckt ganz da (sie blenden sonst erst beim Hineinscrollen ein –
   gedruckt fehlten die drei Sätze, an ihrer Stelle stand eine leere halbe Seite) */
@media print {
  .js .us-satz[data-reveal] .us-satz__marke, .js .us-satz[data-reveal] .us-satz__text,
  .js .us-leiter[data-reveal] figcaption, .js .us-leiter[data-reveal] .us-leiter__text > * { opacity: 1 !important; transform: none !important; }
  .js .us-satz[data-reveal] .us-satz__titel, .js .us-leiter[data-reveal] img { clip-path: none !important; translate: none !important; }
  .js .us-satz[data-reveal]::before, .js .us-satz[data-reveal]::after { transform: none !important; }
  .js .us-karte :is(.karte__linien line, .karte__orte circle, .karte__sirnach, .karte__namen text, .karte__ring) { opacity: 1 !important; transform: none !important; }
}

/* ================================================================== Runde 7 (14.10.2026, Leistungen/Arbeiten/Über uns) */
/* Team am Computer: Porträt über vier Spalten, Text bis an den rechten Rand und der grosse Satz grösser – vorher stand rechts
   neben dem Text rund 320 px Leere (1440 px) */
@media (min-width: 1024px) {
  .us-leiter__bild img { grid-column: 1 / span 4; }
  .us-leiter__bild figcaption, .us-leiter__text { grid-column: 6 / -1; padding-left: 0; }
  .us-leiter__satz--gross { font-size: clamp(1.5rem, .9rem + 1.3vw, 2.4rem); max-width: 22em; }
  .us-leiter__satz:not(.us-leiter__satz--gross) { font-size: 17.5px; max-width: 34em; }
}

/* Feinschliff 10 (17.10.2026): «Neun Fachleute begleiten Ihr Projekt …» gilt dem ganzen Team und steht darum als Abschnittstext unter dem
   Titel (vorher direkt unter «S. Baumann, Grafikleiter» – wirkte wie sein Zitat). Gleiche Schrift wie bisher, Farbe wie Einleitungen. */
.us-team__satz { font-family: var(--f-akzent); font-style: italic; font-weight: 360; font-variation-settings: "opsz" 48; font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); line-height: 1.3; letter-spacing: -.005em; color: var(--text-2); max-width: 26em; text-wrap: pretty; }
@media (min-width: 1024px) { .us-team__satz { grid-column: 1 / span 9; font-size: clamp(1.4rem, .9rem + 1vw, 2rem); } }