/* Portal-Stylesheet — Struktur und Typografie-Rollen, für jede Site gleich.
   Farben und Schrift kommen aus sites/<id>/theme/tokens.css (Spec 2026-08-26 § 3.3),
   das vor dieser Datei geladen wird. Regeln: --linie nie als Textfarbe; Gewicht
   --w-display nur ab 2 rem; keine Karten, keine Rahmen, keine Schatten (Ausnahme:
   der Papierschatten des Covers). */

:root {
  --rand: clamp(1.25rem, 5vw, 5rem);
  --breite: 76rem;
  --mass: 65ch;
  --header-h: 64px;               /* site.js schreibt den echten Wert */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift);
  font-weight: var(--w-text);
  font-size: clamp(1rem, .96rem + .2vw, 1.05rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .16em; text-decoration-color: var(--linie); }
a:hover { color: var(--akzent); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }

.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; top: .5rem; z-index: 100; background: var(--papier); padding: .75rem 1rem; }
.skip:focus { left: .5rem; }

/* Die Haarlinie — das Grundelement. */
.linie { border: 0; border-top: 1px solid var(--linie); margin: 0; }
/* Der Strich vor Ziffern und Rubriken (Cover-Grammatik). */
.strich { display: inline-block; width: 2px; align-self: stretch; flex: none; background: var(--akzent); }
/* Die Agenda-Daten tragen die zweite Strichfarbe (R33): FS kennt nur eine, HBS Braun. */
.tabelle-datum .strich, .termin-datum .strich { background: var(--akzent-2); }

/* Typografie — extreme Kontraste, keine Mittelgewichte im Display. */
h1, h2, h3, h4 { margin: 0; font-weight: var(--w-stark); line-height: 1.15; letter-spacing: -.01em; }
h1 { font-weight: var(--w-display); font-size: clamp(2.125rem, 1.25rem + 3.2vw, 3.75rem); line-height: 1.04; letter-spacing: -.015em; }
h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.8rem); }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1rem; }
strong, b { font-weight: var(--w-stark); }
/* Die Ziffer im ▏37-Gerät: 200 ist nur ab 2 rem zulässig — hier immer ≥ 2 rem. */
.nr { font-weight: var(--w-display); font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); line-height: .95;
      letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.rubrik { font-weight: var(--w-stark); font-size: .85rem; letter-spacing: .02em; margin: 0; }
.hinweis { font-size: .9rem; border-left: 2px solid var(--linie); padding-left: .75rem; }

.inhalt { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.seitenkopf { padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(1rem, 3vw, 2rem); }
.seitenkopf h1 { margin-bottom: .75rem; }
.seitenkopf-zeile { margin: 0; font-size: .9rem; }
.seitenkopf-zeile a, .seitenkopf-zeile span[aria-current] { display: inline-block; padding: .55rem 0; }
.seitenkopf-zeile span[aria-current] { font-weight: var(--w-stark); border-bottom: 2px solid var(--akzent); }
.fliess { max-width: var(--mass); }
.fliess h2 { margin: 2rem 0 .75rem; }
.fliess h3 { margin: 1.5rem 0 .5rem; }
.fliess ul, .fliess ol { padding-left: 1.25rem; }
.fliess address { font-style: normal; line-height: 1.7; margin-bottom: 1rem; }
.fliess a { min-height: 44px; display: inline-flex; align-items: center; overflow-wrap: anywhere; }   /* Links im Fliesstext: Zeilenhöhe */
.fliess p a { min-height: 0; display: inline; }
/* Ein Link, der allein in seinem Absatz steht, ist ein eigenständiges Ziel (WCAG 2.5.8) — 44 px. */
.fliess p a.link-allein, .link-allein { min-height: 44px; display: inline-flex; align-items: center; }

/* Zweispaltige Haarlinien-Liste (Dienstleister, Kategorien, Jahrgänge). */
.spaltenliste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; column-gap: 3rem;
                border-top: 1px solid var(--linie); }
.spaltenliste li { border-bottom: 1px solid var(--linie); }
.spaltenliste a { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
                  min-height: 44px; padding: .5rem 0; text-decoration: none; }
/* Slash-Komposita («Fassadenreinigung/Graffitischutz») haben keine Umbruchstelle — bei 320 px und
   in der schmalen Startseiten-Spalte unter 76 rem werden sie getrennt, notfalls irgendwo (wie
   .reihe-titel). Nicht global: Umbruchstellen senken den Min-Content, und «1fr 1fr» auf der
   Startseite verlässt sich ab 76 rem darauf, dass die zweispaltige Liste ihre 519 px behält. */
@media (max-width: 30rem) { .spaltenliste a { hyphens: auto; hyphenate-limit-chars: 12 5 4; overflow-wrap: anywhere; } }
@media (min-width: 48rem) and (max-width: 75.98rem) { .home-zweier .spaltenliste a { hyphens: auto; hyphenate-limit-chars: 12 5 4; overflow-wrap: anywhere; } }
.spaltenliste a:hover { text-decoration: underline; }
.spaltenliste .zahl { font-size: .8rem; flex: none; }
@media (min-width: 40rem) { .spaltenliste { grid-template-columns: 1fr 1fr; } }

/* Bewegung — nur opacity/translateY; Haarlinien zeichnen sich mit scaleX.
   Versteckte Ausgangszustände hängen an html.js: ohne JS ist alles sichtbar. */
.js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.js [data-reveal].da { opacity: 1; transform: none; }
.js .linie[data-reveal] { opacity: 1; transform: scaleX(0); transform-origin: left; transition: transform .6s ease; }
.js .linie[data-reveal].da { transform: scaleX(1); }
/* Fallback: if site.js fails after html.js already set .js, a reveal must
   never stay hidden forever — force it visible 1.5s after paint. */
@keyframes da-fallback { to { opacity: 1; transform: none; } }
.js [data-reveal] { animation: da-fallback 0s 1.5s forwards; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js .linie[data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* --- Kopf: weiss, sticky, Haarlinie darunter ------------------------------ */
.kopf { position: sticky; top: 0; z-index: 50; background: var(--papier); border-bottom: 1px solid var(--linie); }
.kopf-innen { max-width: var(--breite); margin: 0 auto; padding: .55rem var(--rand);
              display: flex; align-items: center; gap: 1.25rem; position: relative; }
.marke-link { display: flex; align-items: center; min-height: 44px; text-decoration: none; }
.marke-link svg { height: 32px; width: auto; }
#hauptnav { margin-left: auto; display: flex; gap: clamp(.9rem, 1.8vw, 1.75rem); }
#hauptnav a, .kopf-werkzeuge a { text-decoration: none; font-size: .95rem; padding: .6rem 0; min-height: 44px; min-width: 44px;
                                  display: inline-flex; align-items: center; border-bottom: 2px solid transparent; }
#hauptnav a[aria-current="page"] { font-weight: var(--w-stark); border-bottom-color: var(--akzent); }
.kopf-werkzeuge { display: flex; gap: 1.25rem; }
.kopf-werkzeuge a[hidden] { display: none; }   /* [hidden] sonst von .kopf-werkzeuge a { display: inline-flex } überstimmt */
/* Nur die Werkzeug-Icons (Suche, Anmelden) zentrieren: min-width: 44px braucht die
   Zentrierung, damit die 44-px-Trefferfläche mittig ums schmale Icon liegt. #hauptnav-Links
   sind Textlabels, oft breiter als 44 px — unter 900 px, wo #hauptnav eine gestreckte
   Spalte ist, würde justify-content: center hier die Beschriftungen mittig statt linksbündig setzen. */
.kopf-werkzeuge a { justify-content: center; }
.klapp { display: none; }

/* Sechs Punkte plus Suche und Anmelden: die Navigation klappt schon unter 900 px
   (V2 auf fsmedia.ch lief mit fünf Punkten zwischen 480 und 700 px aus dem Bild). */
@media (max-width: 899.98px) {
  .klapp { display: flex; align-items: center; justify-content: center; order: 3;
           width: 44px; height: 44px; margin-right: -.5rem; background: none; border: 0; cursor: pointer; }
  .klapp-strich, .klapp-strich::before, .klapp-strich::after {
    display: block; width: 22px; height: 1px; background: var(--tinte); content: ""; }
  .klapp-strich::before { transform: translateY(-7px); }
  .klapp-strich::after  { transform: translateY(6px); }
  .kopf-werkzeuge { margin-left: auto; order: 2; gap: .9rem; }
  #hauptnav { display: none; order: 4; position: absolute; left: 0; right: 0; top: 100%;
              flex-direction: column; gap: 0; background: var(--papier);
              border-bottom: 1px solid var(--linie); padding: .5rem var(--rand) 1rem; }
  #hauptnav.offen { display: flex; }
  #hauptnav a { border-bottom: 1px solid var(--linie); border-left: 2px solid transparent; padding-left: .75rem; }
  #hauptnav a[aria-current="page"] { border-left-color: var(--akzent); border-bottom-color: var(--linie); }
}

/* --- Masthead: die Cover-Grammatik auf jeder Seite ------------------------- */
.masthead { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: flex-start;
            padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(1rem, 2.5vw, 1.75rem); border-bottom: 1px solid var(--linie); }
.masthead-marke svg { height: clamp(44px, 7vw, 76px); width: auto; }
.masthead-meta { margin-left: auto; text-align: right; font-size: .85rem; line-height: 1.5; }
.masthead-meta p { margin: 0 0 .5rem; }
.masthead-meta ul { list-style: none; margin: 0; padding: 0; }
.masthead-meta li:last-child { font-weight: var(--w-stark); }
.masthead.klein { padding: 1rem 0 .85rem; gap: 1rem 2rem; }
.masthead.klein .masthead-marke svg { height: 40px; }
.masthead.klein .masthead-meta { font-size: .78rem; line-height: 1.35; }
/* Unter 40 rem stehen die vier Bereiche in einer Zeile; unter 320 px passt die Zeile
   nicht mehr — sie bricht als Ganzes um, nie innerhalb eines Bereichs. */
@media (max-width: 40rem) {
  .masthead.klein .masthead-meta ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 .6rem; }
  .masthead.klein .masthead-meta li { white-space: nowrap; }
}

/* --- Partnerband: --band, die weissen Verbandslogos wie geliefert -------- */
.partner { background: var(--band); color: var(--band-text); margin-top: clamp(3rem, 8vw, 6rem);
           padding: clamp(2rem, 5vw, 3.5rem) 0; }
.partner h2 { font-size: .85rem; letter-spacing: .02em; margin-bottom: 1.5rem; }
.partner ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
              gap: 1.5rem clamp(2rem, 6vw, 5rem); align-items: center; }
.partner a { display: inline-flex; align-items: center; min-height: 44px; }
.partner a:focus-visible { outline-color: var(--papier); }
.partner img { height: clamp(26px, 4vw, 38px); width: auto; }

/* --- Fuss ------------------------------------------------------------------- */
.fuss { border-top: 1px solid var(--linie); margin-top: clamp(3rem, 8vw, 6rem); padding: 2.5rem 0 3.5rem; font-size: .9rem; }
.partner + .fuss { margin-top: 0; }
.fuss-innen { display: grid; gap: 1.5rem 3rem; grid-template-columns: 1fr; }
.fuss-marke svg { height: 30px; width: auto; }
.fuss-adresse { font-style: normal; line-height: 1.7; margin: 0; }
.fuss-nav { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.fuss a { min-height: 44px; display: inline-flex; align-items: center; }
.fuss-verlag { margin: 0; }
/* Ab 48 rem Marke und Adresse nebeneinander, die Navigation in eigener Zeile; erst ab der
   vollen Satzbreite (76 rem) dreispaltig — mit Untergrenze für die Adresse, sonst zwängt die
   auto-Spalte der Navigation sie zwischen 768 und 1100 px auf Wortbreite. */
@media (min-width: 48rem) { .fuss-innen { grid-template-columns: auto 1fr; align-items: start; } .fuss-nav, .fuss-verlag { grid-column: 1 / -1; } }
@media (min-width: 76rem) { .fuss-innen { grid-template-columns: auto minmax(18rem, 1fr) auto; } .fuss-nav { grid-column: auto; justify-content: flex-end; } }

/* --- Reihen: das Grundbauteil aller Listen ---------------------------------- */
.reihen { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.reihe { display: grid; gap: .75rem 1.5rem; padding: 1.5rem 0; border-bottom: 1px solid var(--linie);
         grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "datum text" "bild bild"; }
.reihe-datum { grid-area: datum; display: flex; gap: .6rem; align-items: stretch; }
.reihe-datum time { display: flex; flex-direction: column; gap: .2rem; }
.reihe-datum .nr { min-width: 2ch; }
.reihe-monat { font-size: .78rem; line-height: 1.3; white-space: nowrap; }
.reihe-text { grid-area: text; min-width: 0; }
.reihe-text .rubrik { margin-bottom: .25rem; }
/* Slash-getrennte Komposita ohne Leerzeichen (z. B. "Food/Reinraum") sind für
   den Browser ein einziges, nicht umbrechbares Wort — das sprengt bei langen
   Stellentiteln die schmale Spalte. Als letztes Mittel hier erlaubt. */
.reihe-titel { font-size: 1.15rem; line-height: 1.3; margin: 0 0 .35rem; letter-spacing: 0; overflow-wrap: anywhere; }
.reihe-titel a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.reihe-titel a:hover { text-decoration: underline; }
.reihe-teaser { margin: 0; font-size: .95rem; }
.reihe-bildlink { grid-area: bild; }
.reihe-bild { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.reihe-bild.hochformat { object-position: 50% 0; }   /* Porträts: der 3:2-Ausschnitt oben, nicht mitten im Gesicht */
/* Unter 30 rem (320-px-Geräte) sind 280 px Satzbreite übrig: lange Wörter in Titeln
   («Datenschutzerklärung», «Kehrsaugmaschinen») werden getrennt, der Monat im
   Datumsgerät darf umbrechen, damit der Text nicht auf 150 px zusammenfällt. */
@media (max-width: 30rem) {
  h1, .anbieter-name { hyphens: auto; hyphenate-limit-chars: 12 5 4; overflow-wrap: anywhere; }   /* nur Wörter ab 12 Zeichen, nie «Sekti-on» */
  .reihe { gap: .75rem 1rem; }
  .reihe-monat { white-space: normal; }
  .reihe-text { overflow-wrap: anywhere; }
}
@media (min-width: 48rem) {
  .reihe { grid-template-columns: 6.5rem minmax(0, 1fr) 12rem; grid-template-areas: "datum text bild"; align-items: start; }
  .reihe.ohne-bild { grid-template-columns: 6.5rem minmax(0, 1fr); grid-template-areas: "datum text"; }
}

.seitennav { margin: 2rem 0 0; }
.seitennav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem; }
.seitennav a, .seitennav span { min-width: 44px; min-height: 44px; padding: 0 .5rem; display: inline-flex;
                                align-items: center; justify-content: center; text-decoration: none; border-top: 2px solid transparent; }
.seitennav span[aria-current] { font-weight: var(--w-stark); border-top-color: var(--akzent); }
.seitennav a:hover { border-top-color: var(--linie); }

/* --- Artikel ----------------------------------------------------------------- */
.artikel-kopf { padding-top: clamp(1.5rem, 4vw, 3rem); max-width: 52rem; }
.artikel-zeile { display: flex; flex-wrap: wrap; gap: .1rem .6rem; align-items: stretch; font-size: .85rem; margin-bottom: 1.25rem; }
.artikel-zeile .rubrik { margin-right: .5rem; }
.artikel-kopf h1 { margin-bottom: 1rem; }
.artikel-bild { margin: clamp(1.5rem, 4vw, 2.5rem) 0; max-width: 52rem; }
.artikel-body { max-width: var(--mass); font-size: 1.05rem; }
.artikel-body p { margin-bottom: 1.1rem; }
.artikel-body img, .artikel-body figure { margin: 1.5rem 0; }
.artikel-body figure img { margin: 0; }
.artikel-body figcaption { font-size: .85rem; margin-top: .5rem; }
.artikel-body h2, .artikel-body h3 { margin: 2rem 0 .75rem; }
.artikel-body ul, .artikel-body ol { padding-left: 1.25rem; }
.artikel-body table { border-collapse: collapse; width: 100%; font-size: .95rem; margin: 1.5rem 0; }
.artikel-body td, .artikel-body th { border-top: 1px solid var(--linie); padding: .5rem .75rem .5rem 0; vertical-align: top; text-align: left; }
.artikel-body iframe, .artikel-body video, .artikel-body object { max-width: 100%; }
.artikel-body a { overflow-wrap: anywhere; }
/* :only-child counts element children, not just "a bare link paragraph": this also
   matches a link that is the only element child of a <p> that otherwise has running
   text around it (a mid-sentence link with no sibling element) — for those, growing
   the line box would reflow the paragraph. padding-block grows the anchor's hit box
   (WCAG 44 px, checked the same way in check-variant) without affecting the line box
   of a non-replaced inline element, so it is harmless in both cases: no layout change. */
.artikel-body p:has(> a:only-child) a { padding-block: .8rem; }
.weitere { margin-top: clamp(3rem, 8vw, 5rem); }
.weitere h2 { margin-bottom: 1rem; }

/* --- Startseite --------------------------------------------------------------- */
/* Ein Raster, eine Anzeige: mobil steht sie zwischen Cover und Feed, ab 1024 px
   als klebende rechte Spalte neben allem Weiteren — dasselbe Element, kein Duplikat. */
.home-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.home-abschnitt { padding: clamp(2rem, 5vw, 3.5rem) 0 0; }
.home-abschnitt > h2 { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1rem; }
.home-abschnitt > h2 a { font-size: .85rem; font-weight: var(--w-text); margin-left: auto; white-space: nowrap;
                         min-height: 44px; display: inline-flex; align-items: center; }
.home-zweier { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 3rem; }
/* Zwischen 48 und 76 rem teilen sich Marktplatz und Stellen die Breite hälftig und die
   Kategorienliste bleibt einspaltig: zweispaltig ist ihr Mindestmass 519 px (der Min-Content
   von «1fr»), das schob die Stellen-Spalte auf Tablets aus dem Satzspiegel. Ab 76 rem wie gehabt. */
@media (min-width: 48rem) { .home-zweier { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .home-zweier .spaltenliste { grid-template-columns: 1fr; } }
@media (min-width: 76rem) { .home-zweier { grid-template-columns: 1fr 1fr; } .home-zweier .spaltenliste { grid-template-columns: 1fr 1fr; } }
.spaltenliste.eine-spalte { grid-template-columns: 1fr; }

.cover { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem);
         padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(1.5rem, 4vw, 2.5rem); }
.cover-bild img { width: 100%; max-width: 22rem; box-shadow: 0 1px 0 var(--linie), 0 18px 40px rgb(70 68 66 / .08); }
.cover-meta { display: flex; gap: .75rem; align-items: stretch; margin: 0 0 1.25rem; font-size: .85rem; line-height: 1.4; }
.cover-meta-text { align-self: flex-end; }
.cover-teaser { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.cover-teaser li { display: flex; gap: .85rem; align-items: stretch; padding: 1rem 0; border-bottom: 1px solid var(--linie); }
/* Die Ziffer ist der Tag — wie im Feed steht der Monat darunter, sonst liest sie sich als Zähler. */
.cover-datum { display: flex; flex-direction: column; gap: .2rem; }
.cover-datum .nr { min-width: 2ch; }
.cover-monat { font-size: .78rem; line-height: 1.3; white-space: nowrap; }
.cover-teaser .rubrik { margin-bottom: .2rem; }
.teaser-titel { font-weight: var(--w-stark); font-size: 1.1rem; line-height: 1.3; margin: 0; }
.teaser-titel a { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.teaser-titel a:hover { text-decoration: underline; }
.cover-links { margin: 1.25rem 0 0; font-size: .9rem; }
.cover-links a { min-height: 44px; display: inline-flex; align-items: center; }
@media (min-width: 48rem) { .cover { grid-template-columns: minmax(14rem, 22rem) minmax(0, 1fr); align-items: start; } }

.anzeige { border-top: 1px solid var(--linie); padding: 1rem 0 0; }
.anzeige-label { font-size: .75rem; letter-spacing: .04em; margin: 0 0 .6rem; }
.anzeige-bild { width: 100%; max-width: 30rem; }
/* Partner in der rechten Spalte — nur ab 64 rem; darunter reicht das Band am Seitenende. */
.partner-spalte { display: none; }
@media (min-width: 64rem) {
  .home-raster { grid-template-columns: minmax(0, 1fr) 300px; column-gap: clamp(2rem, 5vw, 4rem); }
  .home-raster > .cover { grid-column: 1 / -1; }
  .home-raster > .spalte { grid-column: 2; grid-row: 2 / span 3; position: sticky; top: calc(var(--header-h) + 1rem); align-self: start; }
  .home-raster > .home-abschnitt, .home-raster > .home-zweier { grid-column: 1; }
  .anzeige-bild { max-width: 300px; }
  .partner-spalte { display: block; background: var(--band); color: var(--band-text); padding: 1.5rem 1.5rem 1.75rem; margin-top: 2rem; }
  .spalte > .partner-spalte:first-child { margin-top: 1rem; }   /* ohne Banner (Fenster abgelaufen) steht sie allein */
  .partner-spalte h2 { font-size: .85rem; letter-spacing: .02em; margin-bottom: 1.5rem; }
  .partner-spalte ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; }
  .partner-spalte a { display: flex; align-items: center; min-height: 44px; }
  .partner-spalte a:focus-visible { outline-color: var(--papier); }
  .partner-spalte img { width: 100%; height: auto; }
}

.tabelle { width: 100%; border-collapse: collapse; }
.tabelle th { text-align: left; font-weight: var(--w-stark); font-size: .85rem; padding: .5rem 1rem .5rem 0; border-bottom: 1px solid var(--linie); }
.tabelle td { padding: .85rem 1rem .85rem 0; border-bottom: 1px solid var(--linie); vertical-align: top; overflow-wrap: anywhere; }
.tabelle td:last-child, .tabelle th:last-child { padding-right: 0; }
.tabelle-datum { display: inline-flex; gap: .6rem; align-items: stretch; white-space: nowrap; }
.tabelle a { min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 40rem) { .tabelle td, .tabelle th { padding-right: .5rem; } }

.home-abschnitt p a { min-height: 44px; display: inline-flex; align-items: center; }

/* --- Agenda ------------------------------------------------------------------- */
.termin-kopf { padding-top: clamp(1.5rem, 4vw, 3rem); max-width: 52rem; }
.termin-kopf .artikel-zeile { margin-bottom: 1rem; }
.termin-datum { display: flex; gap: .75rem; align-items: stretch; margin-bottom: 1rem; }
.termin-datum time { display: block; }
.termin-datum .nr { display: block; font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.termin-monat { font-size: .9rem; }
.termin-ort { margin: .75rem 0 0; font-size: 1.05rem; }
.termin-aktionen { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; margin-top: 1.5rem; }
.termin-aktionen a { min-height: 44px; display: inline-flex; align-items: center; }

/* Der Knopf — Tinte auf Papier, 600, keine Rundung. */
.knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px;
         padding: .6rem 1.5rem; font-weight: var(--w-stark); text-decoration: none;
         color: var(--papier); background: var(--tinte); border: 1px solid var(--tinte); cursor: pointer; }
.knopf:hover { color: var(--papier); background: var(--akzent); border-color: var(--akzent); }

/* --- Formulare (Spec §3.7): Label über dem Feld, 44 px, Fehler inline ------- */
.formular { max-width: 40rem; }
.formular fieldset { border: 0; padding: 0; margin: 0 0 1.5rem; }
.formular legend { font-weight: var(--w-stark); padding: 0; margin-bottom: .75rem; }
.feld { margin: 0 0 1rem; }
.feld label, .feld-hinweis { display: block; font-size: .85rem; margin-bottom: .3rem; }
.feld-hinweis { margin: .3rem 0 0; }
.feld abbr { text-decoration: none; }
.formular input:not([type="checkbox"]):not([type="radio"]), .formular textarea, .formular select, .kategorie-sprung select {
  width: 100%; min-height: 44px; padding: .6rem .75rem; font: inherit; color: var(--tinte);
  background: var(--papier); border: 0; border-bottom: 1px solid var(--tinte); border-radius: 0; }
.formular select, .kategorie-sprung select { appearance: none; -webkit-appearance: none; background: var(--papier) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23464442' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right .5rem center; padding-right: 2rem; }
.formular textarea { min-height: 8rem; resize: vertical; }
.formular input[type="file"] { padding: .55rem 0; border-bottom: 0; }
.formular input:focus-visible, .formular textarea:focus-visible, .formular select:focus-visible, .kategorie-sprung select:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.feld-zweier { display: grid; gap: 0 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 30rem) { .feld-zweier { grid-template-columns: 1fr 2fr; } }
.feld-absenden { margin: 1.5rem 0 0; }
.formular button[disabled] { opacity: .45; cursor: not-allowed; }

/* Der Köder: nicht display:none — manche Bots füllen nur Sichtbares, andere alles
   ausser display:none. Also aus dem Bild geschoben, mit echter Grösse. */
.koeder { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.koeder input { width: 100%; }

/* Das Kästchen ist 44×44 (die Trefferfläche), sichtbar davon 20 px in der
   Haarlinien-Grammatik; appearance:none schaltet die Systemdarstellung ab. */
.zustimmung { display: flex; gap: .25rem; align-items: flex-start; margin: 0 0 1rem; }
.zustimmung input { appearance: none; -webkit-appearance: none; width: 2.75rem; height: 2.75rem; margin: 0; flex: 0 0 auto;
                    display: grid; place-content: center; background: none; border: 0; cursor: pointer; }
.zustimmung input::before { content: ""; width: 1.25rem; height: 1.25rem; border: 1px solid var(--tinte); background: var(--papier); }
.zustimmung input:checked::before { background: var(--akzent); border-color: var(--akzent); box-shadow: inset 0 0 0 3px var(--papier); }
.zustimmung input:focus-visible { outline: 2px solid var(--akzent); outline-offset: -8px; }
.zustimmung input[type="radio"]::before { border-radius: 50%; }
.zustimmung label { margin: 0; padding: .75rem 0; cursor: pointer; font-size: .95rem; }

.form-fehler { margin-top: 1rem; padding: .75rem 1rem; border-left: 3px solid var(--fehler); background: var(--papier-2); }
.form-erfolg { margin-top: 1.25rem; border-left: 2px solid var(--akzent); background: var(--papier-2); padding: 1rem 1.25rem; max-width: 40rem; }
.erfolg-titel { font-weight: var(--w-stark); margin: 0 0 .3rem; }
.erfolg-hinweis { margin: 0; font-size: .9rem; }

/* --- Stellen ------------------------------------------------------------------ */
.stelle-firma { font-size: 1.05rem; margin: .75rem 0 0; }
.stelle-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem 4rem; margin-top: 1.5rem; }
@media (min-width: 48rem) { .stelle-raster { grid-template-columns: minmax(0, 1fr) 16rem; align-items: start; } }
.stelle-seite h2 { font-size: .85rem; letter-spacing: .02em; margin: 1rem 0 .5rem; }
.stelle-seite address { font-style: normal; line-height: 1.7; }
.stelle-seite a { min-height: 44px; display: inline-flex; align-items: center; }
.stelle-logo img { max-width: 12rem; }
.reihe-logo { width: 100%; max-height: 6rem; object-fit: contain; object-position: left top; aspect-ratio: auto; }

/* Der WordPress-Export enthält bei einzelnen Stelleninseraten zusammen-
   geschriebene Wörter ohne Leerzeichen (Migrationsartefakt in den Rohdaten,
   Inhalt bleibt unverändert) — sonst sprengt das die schmale Spalte auf sehr
   kleinen Bildschirmen. */
.artikel-body p { overflow-wrap: anywhere; }

/* --- Marktplatz ------------------------------------------------------------- */
.kategorie-sprung { max-width: 24rem; margin-bottom: 1.5rem; }
.anbieter-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.anbieter { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem 1.5rem; padding: 1.25rem 0;
            border-bottom: 1px solid var(--linie); align-items: start; }
.anbieter-logo img { width: 100%; max-height: 4.5rem; object-fit: contain; object-position: left top; }
.anbieter-name { font-size: 1.05rem; margin: 0 0 .25rem; }
.anbieter-name a { text-decoration: none; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
.anbieter-name a:hover { text-decoration: underline; }
.anbieter-adresse { font-size: .9rem; overflow-wrap: anywhere; }   /* nackte URLs in der Adresse (z. B. nora) */
.anbieter-adresse p { margin: 0; }
.anbieter-link { margin: .25rem 0 0; font-size: .9rem; overflow-wrap: anywhere; }
.anbieter-link a { min-height: 44px; display: inline-flex; align-items: center; }
/* In der Rubrik-Zeile der Kategorieseite steht der Link ohne Fliesstext
   daneben — ohne Nachbartext bleibt der Zeilenkasten sonst unter 44 px. */
.artikel-zeile .rubrik a { min-height: 44px; display: inline-flex; align-items: center; }

/* --- Magazin ------------------------------------------------------------------ */
.magazin-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem 4rem; }
@media (min-width: 48rem) { .magazin-raster { grid-template-columns: minmax(0, 1fr) 16rem; align-items: start; } }
.magazin-aktuell .rubrik { margin-bottom: .75rem; }
.magazin-cover { max-width: 16rem; box-shadow: 0 1px 0 var(--linie), 0 12px 28px rgb(70 68 66 / .08); margin: .75rem 0 1rem; }
.ausgabe-nr { display: flex; gap: .6rem; align-items: stretch; margin: 0; }
.ausgabe-nr .nr { min-width: 2ch; }
.ausgabe-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.5rem; font-size: .9rem; }
.ausgabe-links a { min-height: 44px; display: inline-flex; align-items: center; }
.ausgaben { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.ausgabe { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem 1.5rem; padding: 1rem 0;
           border-bottom: 1px solid var(--linie); align-items: start; }
.ausgabe-titel { font-size: 1.05rem; margin: .2rem 0 .1rem; }
.ausgabe-cover { grid-column: 1 / -1; max-width: 10rem; }
@media (min-width: 48rem) { .ausgabe { grid-template-columns: 6.5rem minmax(0, 1fr) 10rem; } .ausgabe-cover { grid-column: auto; justify-self: end; } }

/* --- Kontakt ------------------------------------------------------------------ */
.kontakt-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem 4rem; }
@media (min-width: 48rem) { .kontakt-raster { grid-template-columns: 16rem minmax(0, 1fr); align-items: start; } }
.kontakt-adresse address { font-style: normal; line-height: 1.7; margin: 0 0 1.5rem; }
.kontakt-adresse .rubrik { margin-bottom: .35rem; }
.kontakt-adresse a { min-height: 44px; display: inline-flex; align-items: center; }

/* --- Über uns ----------------------------------------------------------------- */
/* Das Team wie auf fsmedia.ch: je Person eine Haarlinie oben, quadratisches Foto,
   Name in 600, je Rolle ein <p> ohne Abstand. Feste Spaltenzahlen (1 / 2 / 4),
   weil acht Personen in 2×4 aufgehen — drei Spuren liessen zwei allein in der
   letzten Zeile. Kein filter: die Porträts bleiben farbig (Spec §3.6, Fotos
   sind Inhalt; die Entsättigung auf fsmedia.ch ist dort eine V7-Entscheidung). */
.team { list-style: none; margin: 0 0 clamp(2rem, 4vw, 3rem); padding: 0; display: grid;
        gap: clamp(1.75rem, 4vw, 3rem); grid-template-columns: 1fr; }
.team li { border-top: 1px solid var(--linie); padding-top: 1rem; }
/* Die Porträts sind acht verschiedene Aufnahmen (Jalousien, Palmen, Studio
   schwarz, Studio weiss). Ein Duoton aus der Palette macht daraus eine Serie:
   Graustufen, dann die Schatten per screen nach --duotone-dunkel gehoben und die
   Lichter per multiply nach --duotone-hell gezogen. Beim Hover kommt das Farbfoto zurück. */
.team-bild { position: relative; display: block; isolation: isolate; overflow: hidden;
             aspect-ratio: 1; margin-bottom: .85rem; background: var(--duotone-hell); }
.team-bild img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(1.02); }
/* z-index: das gefilterte img malt in derselben Phase wie positionierte Nachfahren
   (Baumreihenfolge) — ohne z-index läge ::before unter dem Bild. */
.team-bild::before, .team-bild::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.team-bild::before { background: var(--duotone-hell); mix-blend-mode: multiply; }                 /* Lichter */
.team-bild::after  { background: var(--duotone-dunkel); mix-blend-mode: screen; opacity: .4; }   /* Schatten, zuletzt */
.team li:hover .team-bild img { filter: none; }
.team li:hover .team-bild::before, .team li:hover .team-bild::after { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .team-bild img, .team-bild::before, .team-bild::after { transition: filter .45s ease, opacity .45s ease; }
}
.team-name { font-weight: var(--w-stark); margin: 0; }
.team-rolle { margin: 0; font-size: .9rem; line-height: 1.45; }
@media (min-width: 48rem) { .team { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 76rem) { .team { grid-template-columns: repeat(4, 1fr); } }

/* --- Suche -------------------------------------------------------------------- */
.suche { max-width: 40rem; }
.suche-zeile { display: flex; gap: .75rem; }
.suche-zeile input { flex: 1; }
#suchergebnisse:empty { border-top: 0; }
#suchergebnisse mark { background: var(--papier-2); color: inherit; font-weight: var(--w-stark); }