/* ===========================================================================
   Fitz Family Office AG
   Gestaltungsfundament: Tokens, Raster, Bausteine.
   Alle Werte kommen aus den Listen in :root. Keine Einzelwerte im CSS.
   Dokumentation der Bausteine: BAUKASTEN.md
   =========================================================================== */

/* --- Schrift, selbst gehostet (keine externe Einbindung) ----------------- */
@font-face{
  font-family:"Jost";
  src:url("../schriften/jost-latin.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Jost";
  src:url("../schriften/jost-latin-ext.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* --- Tokens --------------------------------------------------------------- */
:root{
  /* Abstandsleiter – nur diese Werte für margin, padding, gap */
  --a-1:4px;  --a-2:8px;  --a-3:12px; --a-4:16px; --a-5:20px; --a-6:24px;
  --a-7:32px; --a-8:40px; --a-9:48px; --a-10:64px; --a-11:72px; --a-12:96px; --a-13:128px;

  /* Farben – Farbe gliedert, sie schmückt nicht */
  --primaer:#13343D;          /* Petrol, Text und Flächen */
  --primaer-dunkel:#0E272E;   /* dunkles Band, Fusszeile, Menü */
  --grund:#F0F1F0;            /* kühler Seitengrund */
  --warm:#F6F3ED;             /* warmes Akzentband */
  --weiss:#FFFFFF;
  --text-zweit:#5B6A6E;       /* Sekundärtext */
  --linie:rgba(19,52,61,.22); /* Haarlinie auf hell, rein dekorativ */
  --linie-bedien:rgba(19,52,61,.55);   /* Rand von Bedienelementen, >= 3:1 */
  --linie-hell:rgba(255,255,255,.26);
  --linie-hell-bedien:rgba(255,255,255,.55);
  --messing:#A8884A;          /* Akzent, nur Linien und Flächen */
  --messing-text:#7A5F2C;

  /* Leistungsbereiche: je ein fester, gedeckter Farbton */
  --b-struktur:#2F5D66;
  --b-anlage:#4A6B57;
  --b-nachfolge:#7A5F2C;
  --b-immobilien:#6B4536;
  --b-philanthropie:#585578;
  --b-services:#6A6758;

  /* Raster */
  --breite:1400px;
  --rand:clamp(20px,4vw,40px);
  --lesebreite:640px;
  --spalt:var(--a-8);

  /* Form: rechtwinklig, ausnahmslos */
  --rundung:0px;
  --strich:1px;

  /* Knöpfe */
  --knopf-h:48px;
  --knopf-px:var(--a-8);

  /* WhatsApp-Knopf: einzige runde Form der Seite, bewusste Ausnahme von
     --rundung:0. Gruen und Schattenring kommen vom Vorbild fitzindustries.ch. */
  --wa-d:56px;
  --wa-rand:var(--rand);
  /* Freier Korridor am rechten Rand, gemessen von der Fensterkante: Abstand des
     Knopfes + Knopfbreite + 8 px Luft. Solange die Inhaltsspalten rechts
     mindestens so viel Platz lassen, liegt der feste Knopf nie auf Text,
     Ueberschriften, Knoepfen oder Eingabefeldern. */
  --wa-frei:calc(var(--wa-rand) + var(--wa-d) + var(--a-2));
  /* Rechter Innenabstand von .zeile. Ab 1608 px traegt der Seitenrand neben der
     1400-px-Spalte den Korridor schon selbst – dort bleibt es bei --rand. */
  --zeile-rechts:var(--wa-frei);
  --wa-gruen:#25D366;
  --wa-gruen-dunkel:#1EBE5A;

  /* Bewegung – nichts ist schnell */
  --t-kurz:.3s ease-out;
  --t-lang:.7s ease-in-out;
  --t-flaeche:.18s linear;

  /* Typografie, Desktop */
  --s-mikro:11px;
  --s-meta:13px;
  --s-klein:16px;
  --s-text:19px;
  --s-lead:22px;
  --s-titel-m:26px;
  --s-titel-l:31px;
  --s-titel-xl:40px;
  --s-titel-xxl:50px;
}

@media (max-width:1280px){
  :root{ --spalt:var(--a-7); }
}
@media (max-width:959px){
  :root{
    --spalt:var(--a-6);
    --s-meta:13px; --s-klein:16px; --s-text:17px; --s-lead:19px;
    --s-titel-m:22px; --s-titel-l:24px; --s-titel-xl:28px; --s-titel-xxl:34px;
  }
}

@media (max-width:359px){
  :root{ --s-titel-xxl:28px; --s-titel-xl:24px; --s-titel-m:20px; }
}

/* --- Grundlagen ----------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--grund); color:var(--primaer);
  font-family:"Jost","Helvetica Neue",Arial,sans-serif;
  font-size:var(--s-text); font-weight:300; line-height:1.78;
  overflow-wrap:break-word; hyphens:manual;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
h1,h2,h3,h4{ margin:0; font-weight:300; text-wrap:balance; }
p{ margin:0; text-wrap:pretty; }
/* Silbentrennung: das Vorbild trennt nirgends, und ein Trennstrich in jeder
   zweiten Zeile zerfasert den Text. Darum ueberall aus.
   Ausnahme sind Geraete unter 420 px: dort passt "Vermoegensstrukturierung"
   in keine Zeile, und ein sauberer Trennstrich ist besser als der harte
   Umbruch mitten im Wort, den overflow-wrap sonst setzt. */
h1,h2,h3,h4,.lead,.titel-s,.schritte__titel,.fakt__titel,.karte__titel,
.artikelliste__titel,.abschnitt-titel,.fuss__titel,
.knopf,.menue__rubrik,.brotkrume,.feld__name{ hyphens:manual; }
@media (max-width:419px){
  body,h1,h2,h3,h4,.lead,.titel-s,.schritte__titel,.fakt__titel,.karte__titel,
  .artikelliste__titel,.abschnitt-titel{
    hyphens:auto;
    /* Nur echte Komposita trennen: ab 12 Zeichen und mit mindestens vier
       Zeichen auf jeder Seite. Sonst trennt der Browser auch "Wel-che",
       "wer-den" oder den Firmennamen ("Fa-mily"). */
    hyphenate-limit-chars:12 4 4;
  }
  /* Knoepfe und Navigation bleiben ungetrennt – dort ist kein Fliesstext. */
  .knopf,.menue__rubrik,.brotkrume,.feld__name,.fuss__titel{ hyphens:manual; }
}
ul,ol{ margin:0; padding:0; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

:where(a,button,input,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--messing-text); outline-offset:3px;
}
/* Auf allen dunklen Flaechen ist Messing zu dunkel (2.60:1). Die Liste nennt
   jede Flaeche, die tatsaechlich dunkel ist – eine Klasse .dunkel gibt es im
   HTML nicht. */
.abschnitt--dunkel :where(a,button,input,textarea,[tabindex]):focus-visible,
.menue :where(a,button,input,textarea,[tabindex]):focus-visible,
.fuss :where(a,button,input,textarea,[tabindex]):focus-visible,
.bildband :where(a,button,input,textarea,[tabindex]):focus-visible,
.kopf--klar :where(a,button,input,textarea,[tabindex]):focus-visible{
  outline-color:var(--weiss);
}

.nur-vorlesen{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

/* Sinnumbruch: nur dort, wo kurze Zeilen gewollt sind (Held, Zitat).
   Im uebrigen Fliesstext laufen die Saetze weiter – sonst wirkt jede Seite
   wie ein Formular. */
.satz{ display:inline; }
.held__lead .satz,.bildband blockquote .satz{ display:block; }

/* Anker nicht unter die feste Kopfzeile scrollen */
[id]{ scroll-margin-top:104px; }
@media (max-width:959px){ [id]{ scroll-margin-top:88px; } }

/* --- Sprungmarken --------------------------------------------------------- */
.sprungmarken{ position:absolute; top:0; left:0; z-index:60; }
.sprungmarken a{
  position:absolute; left:var(--a-4); top:var(--a-4);
  transform:translateY(-200%);
  display:inline-flex; align-items:center; min-height:var(--knopf-h);
  padding:0 var(--a-6); background:var(--primaer); color:var(--weiss);
  font-size:var(--s-klein); font-weight:600; text-decoration:none;
  /* Die Marke steht in einem absolut positionierten Kasten ohne eigene Breite;
     ohne nowrap bricht "Zum Inhalt" auf zwei Zeilen. */
  white-space:nowrap;
  transition:transform var(--t-kurz);
}
.sprungmarken a:focus-visible{ transform:translateY(0); }
/* Die Sprungmarke liegt je nach Seite ueber dem Held oder ueber der weissen
   Kopfzeile. Ein Ring aussen haette mal gegen das eine, mal gegen das andere
   zu wenig Kontrast – darum liegt er innen auf der eigenen dunklen Flaeche. */
.sprungmarken a:focus-visible{ outline:2px solid var(--weiss); outline-offset:-5px; }

/* Auf dem Handy ist der Knopf 48 px gross und sitzt naeher an der Ecke – so
   bleibt der Korridor bei 320 px schmal genug. */
@media (max-width:599px){
  :root{ --wa-d:48px; --wa-rand:16px; }
}
/* Ab 1608 px liegt der Knopf in der leeren Flaeche neben der Inhaltsspalte. */
@media (min-width:1608px){
  :root{ --zeile-rechts:var(--rand); }
}

/* --- Raster --------------------------------------------------------------- */
.zeile{
  width:100%; max-width:calc(var(--breite) + var(--rand) * 2);
  margin-inline:auto; padding-inline:var(--rand) var(--zeile-rechts);
}
/* Kopfzeile und Menue brauchen den Korridor nicht: die Kopfzeile steht oben,
   das Menue liegt mit z-index 50 ueber dem Knopf. */
.kopf .zeile,.menue .zeile{ padding-right:var(--rand); }
/* Lesespalte: linksbuendig an derselben Kante wie Titel und Held. */
.lesespalte{ max-width:var(--lesebreite); }

.abschnitt{ padding-block:var(--a-13); }
.abschnitt--eng{ padding-block:var(--a-12); }
.abschnitt--anschluss{ padding-top:0; }
.abschnitt--nach-held{ padding-block:var(--a-11) var(--a-13); }
.abschnitt--weiss{ background:var(--weiss); }
.abschnitt--grund{ background:var(--grund); }
.abschnitt--warm{ background:var(--warm); }
.abschnitt--dunkel{ background:var(--primaer-dunkel); color:var(--weiss); }
@media (max-width:1280px){
  .abschnitt{ padding-block:var(--a-12); }
  .abschnitt--eng{ padding-block:var(--a-11); }
  .abschnitt--nach-held{ padding-block:var(--a-10) var(--a-12); }
}
@media (max-width:959px){
  .abschnitt{ padding-block:var(--a-10); }
  .abschnitt--eng{ padding-block:var(--a-9); }
  .abschnitt--nach-held{ padding-block:var(--a-9) var(--a-10); }
}

/* --- Typografie ----------------------------------------------------------- */
.titel-xxl{ font-size:var(--s-titel-xxl); line-height:1.24; font-weight:300; }
.titel-versal{
  font-size:var(--s-titel-xxl); line-height:1.3; font-weight:200;
  letter-spacing:.02em;
}
/* Abschnittstitel: Mischschreibung mit Messinglinie darueber. Versalien sind
   nur noch dort erlaubt, wo der Text sicher in eine Zeile passt (Fusszeile).
   Linksbuendig: die ganze Seite hat eine einzige linke Kante – Held, Titel,
   Text, Karten und Knoepfe fluchten. Zentrierte Abschnitte wirkten wie eine
   Vorlage und liessen Titel und Textblock gegeneinander kippen. */
.abschnitt-titel{
  font-size:var(--s-titel-l); line-height:1.3; font-weight:300;
  letter-spacing:.01em; text-align:left;
}
.abschnitt-titel::before{
  content:""; display:block; width:48px; height:2px; margin:0 0 var(--a-5);
  background:var(--messing);
}
.abschnitt--dunkel .abschnitt-titel::before{ background:var(--linie-hell-bedien); }
.titel-xl{ font-size:var(--s-titel-xl); line-height:1.32; }
.titel-l{ font-size:var(--s-titel-l); line-height:1.36; }
.titel-m{ font-size:var(--s-titel-m); line-height:1.4; }
.titel-s{ font-size:var(--s-lead); line-height:1.45; font-weight:600; }
.lead{ font-size:var(--s-lead); line-height:1.6; font-weight:300; }
.text-klein{ font-size:var(--s-klein); line-height:1.7; }
.meta{ font-size:var(--s-meta); line-height:1.6; color:var(--text-zweit); }
.abschnitt--dunkel .meta{ color:rgba(255,255,255,.72); }
.mikro{ font-size:var(--s-mikro); line-height:1.6; }

.fliesstext p + p{ margin-top:var(--a-6); }
.fliesstext strong{ font-weight:600; }
.fliesstext a,.textlink{
  text-decoration:none;
  box-shadow:0 -1px inset rgba(19,52,61,.35);
  transition:box-shadow var(--t-kurz);
}
.fliesstext a:hover,.textlink:hover{ box-shadow:0 -1px inset var(--primaer); }
.abschnitt--dunkel .fliesstext a,.abschnitt--dunkel .textlink{ box-shadow:0 -1px inset rgba(255,255,255,.5); }
.abschnitt--dunkel .fliesstext a:hover{ box-shadow:0 -1px inset var(--weiss); }

/* Vorspann über einem Abschnitt */
.abschnitt-kopf{ text-align:left; margin-bottom:var(--a-9); }
.abschnitt-kopf .lead{ max-width:52ch; margin:var(--a-6) 0 0; }

/* --- Textsatz: Titel links in schmaler Spalte, Text rechts daneben -------
   Loest den fruehereren Block "zentrierter Titel ueber zentrierter
   Lesespalte" ab. Auf dem Handy stehen Titel und Text untereinander,
   beide linksbuendig an derselben Kante. */
.textsatz{ display:grid; align-items:start; }
.textsatz > *{ min-width:0; }
.textsatz > .abschnitt-titel + *{ margin-top:var(--a-7); }
@media (min-width:960px){
  .textsatz{ grid-template-columns:minmax(0,22ch) minmax(0,1fr); column-gap:var(--a-12); }
  .textsatz:not(.textsatz--reihen) > .abschnitt-titel{ grid-column:1; grid-row:1; }
  .textsatz:not(.textsatz--reihen) > :not(.abschnitt-titel){ grid-column:2; }
  .textsatz:not(.textsatz--reihen) > .abschnitt-titel + *{ margin-top:0; }
}
/* Reihen-Variante: mehrere Titel-Text-Paare im gleichen Satzbild. Jeder Titel
   steht links in der schmalen Spalte, der zugehoerige Block rechts daneben –
   dafuer brauchen Rechtsseiten und lange Erklaerungen kein eigenes Muster. */
.textsatz--reihen > h2{ margin-top:var(--a-10); }
.textsatz--reihen > :not(h2){ max-width:var(--lesebreite); }
.textsatz--reihen > *:first-child{ margin-top:0; }
.textsatz--reihen > h2 + *{ margin-top:var(--a-6); }
@media (min-width:960px){
  .textsatz--reihen{ row-gap:var(--a-10); }
  .textsatz--reihen > h2{ grid-column:1; margin-top:0; }
  .textsatz--reihen > :not(h2){ grid-column:2; margin-top:0; }
}

/* --- Knöpfe und Links ----------------------------------------------------- */
.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--a-3);
  min-height:var(--knopf-h); padding-inline:var(--knopf-px);
  border:var(--strich) solid transparent; border-radius:var(--rundung);
  font-size:var(--s-klein); font-weight:600; line-height:1.3;
  text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:background-color var(--t-kurz),color var(--t-kurz),border-color var(--t-kurz);
}
.knopf--primaer{ background:var(--primaer); color:var(--weiss); }
.knopf--primaer:hover{ background:var(--primaer-dunkel); }
.knopf--sekundaer{ background:transparent; color:var(--primaer); border-color:var(--primaer); }
.knopf--sekundaer:hover{ background:var(--primaer); color:var(--weiss); }
.abschnitt--dunkel .knopf--primaer{ background:var(--weiss); color:var(--primaer-dunkel); }
.abschnitt--dunkel .knopf--primaer:hover{ background:var(--warm); }
.abschnitt--dunkel .knopf--sekundaer{ color:var(--weiss); border-color:var(--linie-hell-bedien); }
.abschnitt--dunkel .knopf--sekundaer:hover{ background:var(--weiss); color:var(--primaer-dunkel); border-color:var(--weiss); }

.knopfreihe{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--a-4); }
@media (max-width:599px){
  /* alle Flaechenknoepfe gleich breit – sonst stehen 180 px neben 224 px */
  .knopfreihe{ display:grid; justify-items:stretch; }
  .knopfreihe .knopf--primaer,.knopfreihe .knopf--sekundaer{ width:100%; }
}

/* Tertiär: Textlink mit gezeichnetem Pfeil, Linie wächst beim Zeigen.
   justify-content setzt die Zentrierung aus .knopf zurueck – unter 600 px
   dehnt das Raster den Link auf volle Breite, und der Text stuende sonst
   mittig, waehrend alles andere auf der linken Kante steht. */
.knopf--tertiaer{
  display:inline-flex; align-items:center; justify-content:flex-start; gap:var(--a-3);
  min-height:44px; padding:0;
  font-size:var(--s-klein); font-weight:600; text-decoration:none;
  background:none; border:0; cursor:pointer;
}
.pfeil{ width:24px; height:8px; flex:none; overflow:visible; }
.pfeil line,.pfeil polyline{
  stroke:currentColor; stroke-width:1; fill:none;
  transition:transform var(--t-kurz);
}
.knopf--tertiaer:hover .pfeil line{ transform:scaleX(1.4); }
.knopf--tertiaer:hover .pfeil polyline{ transform:translateX(6px); }

/* --- Kopfzeile ------------------------------------------------------------ */
.kopf{
  position:sticky; top:0; z-index:40;
  background:var(--weiss); color:var(--primaer);
  border-bottom:var(--strich) solid var(--linie);
  /* Farbe wechselt sofort, nur die Flaeche blendet kurz – sonst laeuft der
     Seitentext sichtbar durch die Wortmarke */
  transition:background-color var(--t-flaeche),border-color var(--t-flaeche);
}
.kopf__raster{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:var(--a-4); min-height:72px; padding-block:var(--a-4);
}
.kopf__links,.kopf__rechts{ display:flex; align-items:center; gap:var(--a-6); min-width:0; }
.kopf__rechts{ justify-content:flex-end; }

/* Hoheitszeichen: zwei kleine Flaggen-Plaketten, durch eine Haarlinie vom
   Rest der Leiste getrennt. Flaggen, nicht Wappen – das Schweizer Wappen ist
   dem Bund vorbehalten, das Liechtensteiner Staatswappen bewilligungspflichtig. */
.hoheit{ display:flex; align-items:center; gap:var(--a-2); min-height:44px; flex:none; }
/* Beide Flaggen im selben 3:2-Rahmen: exakt gleich breit und hoch. */
.hoheit__flagge{ display:block; width:24px; height:16px; flex:none; }
.hoheit__text{ font-size:var(--s-meta); letter-spacing:.08em; white-space:nowrap; }
.hoheit::after{
  content:""; flex:none; width:var(--strich); height:20px;
  margin-left:var(--a-2); background:currentColor; opacity:.35;
}
.kopf__link{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; min-width:44px;
  font-size:var(--s-meta); letter-spacing:.04em; text-decoration:none; white-space:nowrap;
  box-shadow:0 -1px inset transparent; transition:box-shadow var(--t-kurz);
}
.kopf__link:hover{ box-shadow:0 -1px inset currentColor; }
.wortmarke{ display:flex; align-items:center; width:132px; min-height:44px; }
.wortmarke img{ width:100%; height:auto; }
/* Helle Fassung aus derselben Datei: brightness(0) macht die Pfade schwarz,
   invert(1) daraus reines Weiss. Spart einen zweiten 30-KB-Download. */
.wortmarke--invers img,.kopf--klar .wortmarke img{ filter:brightness(0) invert(1); }

/* Seiten mit Held: Kopfzeile liegt fest über dem Bild */
.kopf--ueber-bild{ position:fixed; inset-inline:0; top:0; }
/* klarer Zustand: transparent, weisse Schrift – JS nimmt die Klasse weg, sobald
   der Held durchgescrollt ist */
.kopf--klar{ background:transparent; color:var(--weiss); border-bottom-color:transparent; }
.burger{
  display:inline-flex; align-items:center; justify-content:flex-end; gap:var(--a-3);
  min-height:44px; min-width:44px; padding:0; background:none; border:0; cursor:pointer;
  font-size:var(--s-meta); letter-spacing:.04em;
}
/* ueber dem Bild: die Striche bekommen einen weichen Schatten, sonst
   verschwindet Weiss auf hellem Himmel */
.kopf--klar .burger,.kopf--klar .kopf__link,.kopf--klar .hoheit__text{
  text-shadow:0 1px 3px rgba(14,39,46,.55);
}
.kopf--klar .burger__striche::before,.kopf--klar .burger__striche::after{
  box-shadow:0 1px 3px rgba(14,39,46,.55);
}
.burger__striche{ display:block; width:24px; height:8px; position:relative; flex:none; }
.burger__striche::before,.burger__striche::after{
  content:""; position:absolute; inset-inline:0; height:1px; background:currentColor;
  transition:transform var(--t-kurz);
}
.burger__striche::before{ top:0; }
.burger__striche::after{ bottom:0; }
.burger:hover .burger__striche::before{ transform:translateX(4px); }
.burger:hover .burger__striche::after{ transform:translateX(-4px); }

/* Der Kontakt-Link bleibt bis 820 px stehen – dort ist Platz dafuer. Erst
   darunter konkurriert er mit Wortmarke und Menueknopf. */
@media (max-width:819px){
  .kopf__links .kopf__link{ display:none; }
  /* rechts der Haarlinie steht dann nichts mehr – also faellt sie weg */
  .hoheit::after{ display:none; }
}
@media (max-width:959px){
  .wortmarke{ width:112px; }
  /* Der Text verschwindet nur aus dem Bild, nicht aus dem Namen des Knopfes –
     mit display:none haette der Burger gar keine Beschriftung mehr. */
  .burger__text,.menue__schliessen-text{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  }
  .burger{ width:44px; justify-content:center; }
  .menue__schliessen{ width:44px; justify-content:center; }
}
@media (max-width:599px){
  .kopf__raster{ gap:var(--a-3); }
  .wortmarke{ width:96px; }
  /* unter 600 px tragen die Plaketten allein – fuer "CH · LI" ist neben
     Wortmarke und Menueknopf kein Platz */
  .hoheit__text{ display:none; }
}

/* --- Menü-Overlay (ganzflächig, einstufig) -------------------------------- */
.menue{
  position:fixed; inset:0; z-index:50;
  display:flex; flex-direction:column;
  background:var(--primaer-dunkel); color:var(--weiss);
  opacity:0; visibility:hidden;
  /* visibility ohne Verzoegerung: sonst ist beim Oeffnen noch nichts
     fokussierbar und der Fokus bleibt hinter dem Overlay haengen */
  transition:opacity var(--t-kurz),visibility 0s linear var(--t-kurz);
}
.menue[data-offen="ja"]{ opacity:1; visibility:visible; transition-delay:0s,0s; }
.menue__kopf{
  flex:none;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:var(--a-4); min-height:72px; padding-block:var(--a-4);
  border-bottom:var(--strich) solid var(--linie-hell);
}
.menue__schliessen{
  display:inline-flex; align-items:center; gap:var(--a-3); justify-self:end;
  min-height:44px; min-width:44px; padding:0; background:none; border:0; cursor:pointer;
  font-size:var(--s-meta); letter-spacing:.04em;
}
.menue__kreuz{ display:block; width:24px; height:24px; flex:none; }
.menue__inhalt{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding-block:var(--a-7) var(--a-9);
}
.menue__liste{ list-style:none; display:grid; gap:0; }
.menue__eintrag{ border-top:var(--strich) solid var(--linie-hell); }
.menue__eintrag:last-child{ border-bottom:var(--strich) solid var(--linie-hell); }
.menue__rubrik{
  display:flex; align-items:center; justify-content:space-between; gap:var(--a-6);
  min-height:56px; padding-block:var(--a-3);
  font-size:var(--s-titel-l); font-weight:300; text-decoration:none;
}
.menue__rubrik .pfeil{ width:24px; height:8px; flex:none; opacity:.5; transition:opacity var(--t-kurz),transform var(--t-kurz); }
.menue__rubrik:hover .pfeil{ opacity:1; transform:translateX(6px); }
.menue__unter{ list-style:none; display:grid; gap:0; padding-bottom:var(--a-4); }
.menue__unter a{
  display:flex; align-items:center; min-height:44px;
  font-size:var(--s-klein); font-weight:300; color:rgba(255,255,255,.82); text-decoration:none;
  transition:color var(--t-kurz);
}
.menue__unter a:hover{ color:var(--weiss); }
/* Der Fussbereich liegt ausserhalb von .menue__inhalt und damit ausserhalb des
   Rollbereichs: die Rechtslinks sind ohne Scrollen sichtbar, auf jeder Hoehe. */
.menue__fuss{
  flex:none; border-top:var(--strich) solid var(--linie-hell);
}
.menue__fuss-reihe{
  display:flex; flex-wrap:wrap; align-items:center;
  column-gap:var(--a-6); row-gap:0; padding-block:var(--a-2);
}
.menue__fuss a{
  display:inline-flex; align-items:center; min-height:44px; min-width:44px;
  font-size:var(--s-meta); color:rgba(255,255,255,.72); text-decoration:none;
}
.menue__fuss a:hover{ color:var(--weiss); }
/* Scrollsperre hinter dem offenen Overlay. Den Platz des verschwindenden
   Scrollbalkens gleicht js/seite.js mit padding-right aus – sonst ruckt die
   ganze Seite beim Oeffnen um dessen Breite nach rechts. */
body[data-menue="offen"]{ overflow:hidden; }

/* --- Held ----------------------------------------------------------------- */
.held{ position:relative; background:var(--primaer-dunkel); }
.held__bild{ position:relative; width:100%; aspect-ratio:3/2; overflow:hidden; isolation:isolate; }
.held__bild img{ width:100%; height:100%; object-fit:cover; object-position:center 45%; }
.held__bild::before{
  content:""; position:absolute; inset-inline:0; top:0; height:200px; z-index:1;
  background:linear-gradient(180deg,rgba(14,39,46,.62),rgba(14,39,46,0));
}
.held__text{ background:var(--weiss); padding-block:var(--a-9) 0; }
.held__inhalt{ border-left:var(--strich) solid var(--primaer); padding-left:var(--a-4); }
@media (min-width:960px){
  .held__inhalt{ margin-left:calc((var(--a-4) + var(--strich)) * -1); }
}
.held h1{ font-size:var(--s-titel-xxl); line-height:1.22; max-width:22ch; }
.held__lead{ max-width:44ch; margin-top:var(--a-6); }
.held .knopfreihe{ margin-top:var(--a-9); }

@media (max-width:599px){
  .held .knopf--primaer,.held .knopf--sekundaer{ width:100%; }
  .held .knopfreihe{ display:grid; gap:var(--a-4); }
}

/* ab Desktop: Text liegt im Bild, Komposition wie beim Vorbild */
@media (min-width:1281px){
  .held__bild::after{
    content:""; position:absolute; inset:0; z-index:2;
    background:linear-gradient(100deg,rgba(14,39,46,.9) 0%,rgba(14,39,46,.78) 32%,rgba(14,39,46,.38) 56%,rgba(14,39,46,0) 80%);
  }
  .held__bild{ aspect-ratio:8/3; min-height:640px; }
  .held__text{
    position:absolute; inset-block:0; inset-inline:0; z-index:3;
    display:flex; align-items:center; background:transparent; color:var(--weiss);
    padding-block:var(--a-11) 0; pointer-events:none;
  }
  .held__text .zeile{ width:100%; }
  .held__inhalt{ border-left-color:var(--linie-hell); pointer-events:auto; }
  .held__lead{ max-width:42ch; }
  .held h1{ max-width:20ch; }
  .held__text :where(a,button,input,textarea,[tabindex]):focus-visible{ outline-color:var(--weiss); }
  .held .knopf--sekundaer{ color:var(--weiss); border-color:var(--linie-hell-bedien); }
  .held .knopf--sekundaer:hover{ background:var(--weiss); color:var(--primaer); border-color:var(--weiss); }
  .held .knopf--primaer{ background:var(--weiss); color:var(--primaer-dunkel); }
  .held .knopf--primaer:hover{ background:var(--warm); }
}

/* Eine orchestrierte Bewegung beim Laden – sonst nichts */
.js .held__bild img{ transform:scale(1.06); transition:transform 2.2s cubic-bezier(.2,.6,.2,1); }
.js .held[data-geladen="ja"] .held__bild img{ transform:scale(1); }
@keyframes held-ein{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
.js .held__inhalt > *{ animation:held-ein .7s ease-out both; }
.js .held__inhalt > *:nth-child(2){ animation-delay:.12s; }
.js .held__inhalt > *:nth-child(3){ animation-delay:.24s; }
.js .held__inhalt > *:nth-child(4){ animation-delay:.36s; }

/* --- Typo-Kopf für Unterseiten (kein Bild) -------------------------------- */
.typo-kopf{ background:var(--grund); padding-block:var(--a-12) var(--a-10); text-align:left; }
.typo-kopf h1{ font-size:var(--s-titel-xxl); line-height:1.24; font-weight:200; letter-spacing:.01em; max-width:20ch; }
.typo-kopf .lead{ max-width:54ch; margin:var(--a-7) 0 0; }
.typo-kopf .bereich-marke{ margin:0 0 var(--a-6); }
.typo-kopf .bereich-linie{ margin:0 0 var(--a-6); }
@media (max-width:959px){
  .typo-kopf{ padding-block:var(--a-9) var(--a-9); }
}
.brotkrume{ margin-bottom:var(--a-6); font-size:var(--s-meta); color:var(--text-zweit); }
.brotkrume ol{ list-style:none; display:flex; flex-wrap:wrap; gap:var(--a-3); }
.brotkrume li{ display:flex; align-items:baseline; gap:var(--a-3); min-width:0; }
.brotkrume a{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; min-width:44px;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px;
  text-decoration-color:rgba(19,52,61,.35);
}
/* Der Trenner haengt am vorangehenden Eintrag, nicht am folgenden – sonst
   beginnt die zweite Zeile bei 320 px mit einem verwaisten "·". */
.brotkrume li:not(:last-child)::after{ content:"·"; flex:none; }

/* --- Kacheln -------------------------------------------------------------- */
.karten{ display:grid; gap:var(--spalt); align-items:stretch; }
.karten--2{ grid-template-columns:repeat(2,1fr); }
.karten--3{ grid-template-columns:repeat(3,1fr); }
.karten--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:959px){
  .karten--3,.karten--4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:599px){
  .karten--2,.karten--3,.karten--4{ grid-template-columns:1fr; }
}

.karte{
  display:flex; flex-direction:column; min-width:0;
  border-radius:var(--rundung); text-decoration:none;
}
.karte--text{ background:var(--weiss); padding:var(--a-7); }
.abschnitt--weiss .karte--text{ background:var(--grund); }
@media (max-width:599px){
  .karte--text{ background:transparent; padding:var(--a-4) 0 var(--a-6); border-top:var(--strich) solid var(--linie); }
  .abschnitt--weiss .karte--text{ background:transparent; }
}
.karte__titel{ font-size:var(--s-titel-m); line-height:1.4; font-weight:300; }
.karte__text{ margin-top:var(--a-3); font-size:var(--s-klein); line-height:1.7; color:var(--text-zweit); }
.karte__fuss{
  margin-top:auto; padding-top:var(--a-6);
  display:inline-flex; align-items:center; gap:var(--a-3);
  font-size:var(--s-klein); font-weight:600; color:var(--primaer);
}
.karte__fuss .pfeil{ width:24px; height:8px; flex:none; }
.karte__fuss .pfeil line,.karte__fuss .pfeil polyline{
  stroke:currentColor; stroke-width:1; fill:none; transition:transform var(--t-kurz);
}
.karte--verlinkt:hover .karte__fuss .pfeil polyline{ transform:translateX(6px); }
.karte--verlinkt:hover .karte__titel{ box-shadow:0 -1px inset currentColor; }

/* Bildkachel: Bild 3:2, Text an der Haarlinie */
.karte--bild{ gap:0; }
.karte__bild{ overflow:hidden; aspect-ratio:3/2; background:var(--grund); }
.karte__bild img{ width:100%; height:100%; object-fit:cover; transition:scale var(--t-lang); }
.karte--verlinkt:hover .karte__bild img{ scale:1.05; }
.karte--bild .karte__inhalt{
  margin-top:var(--a-5); padding-left:var(--a-4);
  border-left:var(--strich) solid var(--primaer);
  display:flex; flex-direction:column; flex:1 1 auto; min-width:0;
}

/* Farbmarke je Leistungsbereich */
.bereich-marke{ display:flex; align-items:center; gap:var(--a-3); font-size:var(--s-meta); color:var(--text-zweit); }
.bereich-marke::before{ content:""; width:8px; height:8px; flex:none; background:var(--bereich,var(--primaer)); }
.bereich-linie{ border-top:2px solid var(--bereich,var(--primaer)); width:48px; }
.karte--bereich .karte__inhalt,.karte--bereich.karte--text{ border-left-color:var(--bereich,var(--primaer)); }
.karte--text.karte--bereich{ border-left:2px solid var(--bereich,var(--primaer)); }

/* --- Bildband über die volle Breite -------------------------------------- */
.bildband{ position:relative; background:var(--primaer-dunkel); color:var(--weiss); overflow:hidden; }
.bildband__bild{ position:absolute; inset:0; }
.bildband__bild img{ width:100%; height:100%; object-fit:cover; }
/* Die Abdunklung muss den hellsten Fall tragen (Nebelmeer auf ansatz.html):
   bei .30 oben stand "Grundsatz 5" bei 1.80:1. Jetzt deckt der Verlauf oben
   wie unten, das Motiv bleibt dabei lesbar. */
.bildband__bild::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(14,39,46,.68),rgba(14,39,46,.84)); }
.bildband__inhalt{ position:relative; padding-block:var(--a-12); }
.bildband blockquote{ margin:0; max-width:34ch; font-size:var(--s-titel-xl); line-height:1.34; font-weight:300; }
.bildband__quelle{ margin-top:var(--a-6); }
/* .bildband traegt kein .abschnitt--dunkel – ohne diese Regel
   erbt die Metazeile das Grau fuer hellen Grund (2.8:1). */
.bildband .meta,.bildband .bildband__quelle{ color:rgba(255,255,255,.9); }
@media (max-width:959px){ .bildband__inhalt{ padding-block:var(--a-10); } }

/* Helles Bildband (Text neben dem Bild, ohne Überlagerung) */
.bildstreifen{ display:grid; grid-template-columns:minmax(0,1fr); gap:0; }
/* auf dem Handy im eigenen Seitenverhaeltnis – so wird kein Motiv gekappt */
.bildstreifen img{ width:100%; height:auto; object-fit:cover; }
@media (min-width:960px){
  .bildstreifen{ grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; }
  .bildstreifen img{ aspect-ratio:auto; height:100%; min-height:100%; }
  .bildstreifen__text{ display:flex; align-items:center; padding:var(--a-12) var(--wa-frei) var(--a-12) var(--rand); }
}
.bildstreifen__text{ background:var(--weiss); padding:var(--a-9) var(--wa-frei) var(--a-9) var(--rand); min-width:0; }
/* Unter 360 px eine Stufe kleiner, damit "gemeinnuetzige Organisationen"
   in eine Zeile passt und das lange Substantiv nicht allein steht. */
@media (max-width:359px){
  .bildstreifen__text h2{ font-size:var(--s-text); }
}
.bildstreifen__text > div{ max-width:min(46ch,100%); min-width:0; }

/* --- Zitat ---------------------------------------------------------------- */
.zitat{
  margin:0; padding-left:var(--a-6); border-left:2px solid var(--messing);
  font-size:var(--s-titel-l); line-height:1.4; font-weight:300; max-width:34ch;
}
.zitat footer{ margin-top:var(--a-5); font-size:var(--s-meta); color:var(--text-zweit); }

/* --- Fakten (qualitativ; Kennzahlen bleiben leer, solange keine Zahlen vorliegen) */
.fakten{ display:grid; gap:var(--a-9); }
@media (min-width:960px){ .fakten--2{ grid-template-columns:repeat(2,1fr); } }
.fakt{ padding-left:var(--a-4); border-left:var(--strich) solid var(--primaer); min-width:0; }
.fakt__titel{ font-size:var(--s-lead); line-height:1.45; font-weight:600; }
.fakt p{ margin-top:var(--a-3); font-size:var(--s-klein); line-height:1.7; color:var(--text-zweit); }
.abschnitt--dunkel .fakt{ border-left-color:var(--linie-hell); }
.abschnitt--dunkel .fakt p{ color:rgba(255,255,255,.76); }

/* --- Kennzahlen (nur mit belegten Zahlen – hier: Holding Fitz Industries) */
.kennzahlen{ display:grid; gap:var(--a-9); }
@media (min-width:600px){ .kennzahlen{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.kennzahl{ padding-left:var(--a-4); border-left:var(--strich) solid var(--primaer); min-width:0; }
.kennzahl__ziffer{ font-size:var(--s-titel-xl); line-height:1.2; font-weight:200; letter-spacing:.01em; }
.kennzahl__text{ margin-top:var(--a-2); font-size:var(--s-klein); line-height:1.7; color:var(--text-zweit); }

/* --- Link-Raster (Rubrikübersicht) --------------------------------------- */
.linkraster{ list-style:none; display:grid; gap:0; }
@media (min-width:960px){ .linkraster{ grid-template-columns:repeat(3,1fr); column-gap:var(--spalt); } }
.linkraster li{ border-bottom:var(--strich) solid var(--linie); min-width:0; }
.linkraster a{
  display:flex; align-items:center; justify-content:space-between; gap:var(--a-4);
  min-height:72px; padding-block:var(--a-4); text-decoration:none;
  font-size:var(--s-klein); font-weight:300;
}
.linkraster a .pfeil{ width:24px; height:8px; flex:none; opacity:.45; transition:opacity var(--t-kurz),transform var(--t-kurz); }
.linkraster a:hover .pfeil{ opacity:1; transform:translateX(6px); }

/* --- Artikelkarten und Liste --------------------------------------------- */
.artikelkarte .karte__titel{ font-size:var(--s-titel-m); }
.artikelkarte .karte__marke{ margin-bottom:var(--a-3); }
.artikelliste{ list-style:none; display:grid; gap:0; }
.artikelliste li{ border-top:var(--strich) solid var(--linie); }
.artikelliste a{ display:grid; gap:var(--a-3); padding-block:var(--a-6); text-decoration:none; }
@media (min-width:960px){
  .artikelliste a{ grid-template-columns:1fr auto; align-items:baseline; column-gap:var(--a-8); }
}
.artikelliste a:hover .artikelliste__titel{ box-shadow:0 -1px inset currentColor; }
.artikelliste__titel{ font-size:var(--s-lead); line-height:1.5; font-weight:300; }

/* Aufmacher: Text und Bild nebeneinander */
/* Der ganze Aufmacher ist ein Link. Ohne text-decoration:none unterstreicht
   der Browser Kennzeile, Titel und Lead – der Block sah aus wie ein Rohzustand. */
.aufmacher{ display:grid; gap:var(--spalt); align-items:center; text-decoration:none; color:inherit; }
@media (min-width:960px){ .aufmacher{ grid-template-columns:1fr 1fr; } }
.aufmacher__bild{ overflow:hidden; aspect-ratio:3/2; }
.aufmacher__bild img{ width:100%; height:100%; object-fit:cover; transition:scale var(--t-lang); }
.aufmacher:hover .aufmacher__bild img{ scale:1.05; }
.aufmacher__text{ min-width:0; }
/* Beim Zeigen antwortet nur der Titel mit einer Linie, dazu wandert der Pfeil –
   wie bei der Artikelliste und den Karten. */
.aufmacher h2{ box-shadow:0 -1px inset transparent; transition:box-shadow var(--t-kurz); }
.aufmacher:hover h2{ box-shadow:0 -1px inset currentColor; }
.aufmacher:hover .pfeil line{ transform:scaleX(1.4); }
.aufmacher:hover .pfeil polyline{ transform:translateX(6px); }

/* Artikelkopf: Text links, Bild rechts angeschnitten.
   Der Rahmen folgt dem Seitenverhaeltnis der Vorlage: ein Hochformat in einer
   3:2-Kachel verliert ueber die Haelfte des Motivs. Darum zwei Zuschnitte –
   --quer fuer Querformate, --hoch fuer Hochformate. */
.artikelkopf{ background:var(--weiss); }
.artikelkopf__raster{ display:grid; gap:var(--spalt); }
.artikelkopf__bild{ overflow:hidden; aspect-ratio:3/2; }
.artikelkopf__bild--hoch{ aspect-ratio:3/4; }
/* Dachlandschaft: der Himmel oben traegt nichts, der Ausschnitt sitzt tiefer. */
.artikelkopf__bild--tief img{ object-position:50% 70%; }
.artikelkopf__bild img{ width:100%; height:100%; object-fit:cover; }
@media (min-width:960px){
  .artikelkopf__raster{ grid-template-columns:minmax(0,1fr) minmax(0,.85fr); align-items:center; }
  .artikelkopf__bild{ aspect-ratio:1/1; margin-right:calc(var(--zeile-rechts) * -1); }
  .artikelkopf__bild--hoch{ aspect-ratio:4/5; }
}

/* --- Kontaktband ---------------------------------------------------------- */
.kontaktband{ background:var(--warm); }
.kontaktband__inhalt{ display:grid; gap:var(--a-9); align-items:center; }
@media (min-width:960px){
  .kontaktband__inhalt{ grid-template-columns:1fr auto; column-gap:var(--a-12); }
}
.kontaktband h2{ font-size:var(--s-titel-xl); line-height:1.3; }
.kontaktband p{ max-width:52ch; margin-top:var(--a-5); }

/* --- Hinweis und Disclaimer ---------------------------------------------- */
.hinweis{
  padding:var(--a-6); background:var(--grund);
  border-left:2px solid var(--messing);
  font-size:var(--s-klein); line-height:1.7; color:var(--text-zweit);
}
.abschnitt--weiss .hinweis{ background:var(--grund); }
.abschnitt--grund .hinweis{ background:var(--weiss); }
.hinweis--still{ background:transparent; border-left-color:var(--linie); padding-left:var(--a-4); }

/* Anschrift: <address> steht im Browser kursiv – hier nicht. Der Baustein
   traegt die Adresse im Impressum, in der Datenschutzerklaerung und auf der
   Kontaktseite. */
.anschrift{ font-style:normal; line-height:1.78; }

/* --- Formular ------------------------------------------------------------- */
.formular{ display:grid; gap:var(--a-6); }
.feld{ display:grid; gap:var(--a-2); min-width:0; }
.feld__name{ font-size:var(--s-meta); letter-spacing:.04em; }
.feld input,.feld textarea{
  width:100%; min-height:var(--knopf-h); padding:var(--a-3) var(--a-4);
  background:var(--weiss); color:var(--primaer);
  border:var(--strich) solid var(--linie-bedien); border-radius:var(--rundung);
  font-family:inherit; font-size:var(--s-klein); font-weight:300; line-height:1.6;
}
.feld textarea{ min-height:160px; resize:vertical; }
.feld input:focus,.feld textarea:focus{ border-color:var(--primaer); outline:none; }
.feld input:focus-visible,.feld textarea:focus-visible{ outline:2px solid var(--messing-text); outline-offset:1px; }
.ankreuz{
  display:flex; align-items:flex-start; gap:var(--a-4);
  min-height:44px; padding-block:var(--a-2); cursor:pointer;
  font-size:var(--s-klein); line-height:1.7;
}
.ankreuz input{ width:28px; height:28px; min-height:28px; margin:var(--a-1) 0 0; flex:none; accent-color:var(--primaer); }
.formular .knopf{ justify-self:start; }
/* Unter 600 px laeuft der Knopf ueber die ganze Spalte. Die ehrliche
   Beschriftung "Anfrage per WhatsApp senden" ist dort laenger als die Spalte –
   sie darf umbrechen, statt die Spalte aufzuziehen und Querscrollen auszuloesen. */
@media (max-width:599px){
  .formular .knopf{
    width:100%; padding-inline:var(--a-4); white-space:normal; text-align:center;
    padding-block:var(--a-3);
  }
}
.formular__melde{
  padding:var(--a-6); background:var(--warm);
  border-left:2px solid var(--messing); font-size:var(--s-klein); line-height:1.7;
}
/* Eigene Pflichtfeld-Meldungen auf Deutsch – die Browser-Blasen erscheinen in
   der Browsersprache und standen im Test englisch da. Darum novalidate. */
.feld__fehler{ font-size:var(--s-meta); line-height:1.6; color:var(--messing-text); }
.feld input[aria-invalid="true"],.feld textarea[aria-invalid="true"]{
  border-color:var(--messing-text); border-width:2px;
}
.formular__wege{ font-size:var(--s-klein); line-height:1.7; color:var(--text-zweit); }

/* --- Fusszeile ------------------------------------------------------------ */
/* Unten bleibt Platz fuer den festen WhatsApp-Knopf – sonst liegt er auf
   dem Hinweis und dem Copyright. */
.fuss{ background:var(--primaer-dunkel); color:var(--weiss); padding-block:var(--a-12) var(--a-12); }
.fuss__oben{ display:grid; gap:var(--a-10); }
/* Zwischen 640 und 959 px war die Fusszeile einspaltig und doppelt so hoch wie
   der Bildschirm, waehrend rechts die halbe Breite leer blieb. */
@media (min-width:640px){ .fuss__oben{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--spalt); } }
@media (min-width:960px){ .fuss__oben{ grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr)); } }
.fuss .wortmarke{ width:168px; }
.fuss__beschrieb{ margin-top:var(--a-6); max-width:34ch; font-size:var(--s-klein); line-height:1.7; color:rgba(255,255,255,.76); }
.fuss__anschrift{ margin-top:var(--a-3); }
.fuss__kontakt{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--a-6); margin-top:var(--a-2); }
.fuss__kontakt a{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:var(--s-klein); color:rgba(255,255,255,.86); text-decoration:none;
  box-shadow:0 -1px inset rgba(255,255,255,.4);
  transition:box-shadow var(--t-kurz),color var(--t-kurz);
}
.fuss__kontakt a:hover{ color:var(--weiss); box-shadow:0 -1px inset currentColor; }
.fuss__titel{ font-size:var(--s-meta); letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:var(--a-4); }
.fuss__liste{ list-style:none; display:grid; gap:0; }
.fuss__liste a{
  display:inline-flex; align-items:center; min-height:44px; min-width:44px;
  font-size:var(--s-klein); font-weight:300; color:rgba(255,255,255,.86); text-decoration:none;
  box-shadow:0 -1px inset transparent; transition:box-shadow var(--t-kurz),color var(--t-kurz);
}
.fuss__liste a:hover{ color:var(--weiss); box-shadow:0 -1px inset currentColor; }
.fuss__unten{
  margin-top:var(--a-10); padding-top:var(--a-6);
  border-top:var(--strich) solid var(--linie-hell);
  display:grid; gap:var(--a-6);
}
.fuss__hinweis{ font-size:var(--s-meta); line-height:1.7; color:rgba(255,255,255,.72); max-width:72ch; }
.fuss__hinweis a{
  display:inline-flex; align-items:center; min-height:44px; min-width:44px;
  text-decoration:none; box-shadow:0 -1px inset rgba(255,255,255,.5);
}
.fuss__recht{ display:flex; flex-wrap:wrap; gap:var(--a-6); align-items:center; }
.fuss__recht a{
  display:inline-flex; align-items:center; min-height:44px; min-width:44px;
  font-size:var(--s-meta); color:rgba(255,255,255,.72); text-decoration:none;
}
.fuss__recht a:hover{ color:var(--weiss); }
.fuss__copyright{ font-size:var(--s-meta); color:rgba(255,255,255,.6); }

/* --- Bildzeile: ein Bild über die volle Breite, ohne Text ----------------- */
.bildzeile{ display:block; }
.bildzeile img{ width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }
@media (min-width:960px){ .bildzeile img{ aspect-ratio:21/9; } }

/* --- Liste mit Haarlinien (typische Anlässe, Aufzählungen) ---------------- */
.liste-strich{ list-style:none; display:grid; gap:0; }
.liste-strich li{
  border-top:var(--strich) solid var(--linie);
  padding-block:var(--a-4); min-width:0;
}
.liste-strich li:last-child{ border-bottom:var(--strich) solid var(--linie); }
.abschnitt--dunkel .liste-strich li{ border-color:var(--linie-hell); }

/* --- Schritte (echte Abfolge, darum nummeriert) -------------------------- */
.schritte{ list-style:none; display:grid; gap:0; counter-reset:schritt; }
.schritte li{
  display:grid; gap:var(--a-3); counter-increment:schritt;
  border-top:var(--strich) solid var(--linie); padding-block:var(--a-6); min-width:0;
}
@media (min-width:720px){
  .schritte li{ grid-template-columns:40px minmax(0,16rem) minmax(0,1fr); column-gap:var(--a-8); align-items:baseline; }
}
.schritte li:last-child{ border-bottom:var(--strich) solid var(--linie); }
.schritte li::before{ content:counter(schritt); font-size:var(--s-meta); color:var(--messing-text); }
.schritte__titel{ font-weight:600; }
.schritte__text{ font-size:var(--s-klein); line-height:1.7; color:var(--text-zweit); }

/* --- Grundsätze (nummerierte Textblöcke in der Lesespalte) --------------- */
.grundsatz{ padding-left:var(--a-6); border-left:var(--strich) solid var(--linie); }
.grundsatz + .grundsatz{ margin-top:var(--a-10); }
.grundsatz__nummer{ font-size:var(--s-meta); color:var(--messing-text); }
.grundsatz h2{ font-size:var(--s-titel-m); line-height:1.4; margin-top:var(--a-2); }
.grundsatz .fliesstext{ margin-top:var(--a-5); }

/* --- Kontaktseite: Formular und Nebenspalte ------------------------------ */
.kontakt-raster{ display:grid; gap:var(--a-10); }
.kontakt-neben{ display:flex; flex-direction:column; gap:var(--a-9); min-width:0; }
/* Die Bilddatei ist bereits auf Tisch und Parkett beschnitten (Lattenzaun und
   Garten sind nicht mehr drauf, siehe bilder/QUELLEN.md). Der Rahmen muss
   deshalb nichts mehr wegnehmen. */
.kontakt-bild{ position:relative; overflow:hidden; aspect-ratio:1/1; }
.kontakt-bild img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 50%;
}
/* Kontaktwege neben dem Formular: nur Typografie an der Haarlinie */
.kontakt-wege{ min-width:0; }
@media (min-width:960px){
  /* stretch statt start: die Nebenspalte war sonst 400 px laenger als das
     Formular und hinterliess eine leere weisse Flaeche vor der Fusszeile.
     flex-basis 0 – mit "auto" zoege das Bild seine eigene Hoehe heran und
     waere wieder die laengere Spalte. */
  .kontakt-raster{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); column-gap:var(--spalt); align-items:stretch; }
  .kontakt-bild{ flex:1 1 0; aspect-ratio:auto; min-height:260px; }
  .kontakt-neben > :not(.kontakt-bild){ flex:none; }
}

/* --- Zeilenumbrüche: kurze Blöcke ausgleichen ---------------------------- */
.karte__titel,.karte__text,.lead,.fakt__titel,.fakt p,.zitat,
.bildband blockquote,.hinweis,.liste-strich li,.schritte__text,.artikelliste__titel,
.fuss__beschrieb,.fuss__hinweis,.abschnitt-titel,.titel-l,.titel-m,.titel-xl,.titel-s,
.fliesstext p{
  text-wrap:balance;
}
/* Ersetzt die frueheren &nbsp; in den Fliesstexten: balance laesst kein
   einzelnes Wort in der letzten Zeile stehen und kann – anders als ein
   geschuetztes Leerzeichen – keine Zeile ueber die Breite hinaus schieben.
   Lange Absaetze laesst der Browser unveraendert. */

/* --- Hilfsklassen (nur Abstände nach oben und Ausrichtung) ---------------- */
.abstand-s{ margin-top:var(--a-6); }
.abstand-m{ margin-top:var(--a-7); }
.abstand-l{ margin-top:var(--a-9); }
.abstand-xl{ margin-top:var(--a-10); }

/* --- WhatsApp-Knopf (fest unten rechts, reiner Link ohne Drittanbieter) --
   Einzige runde Form und einziger Schatten der Seite. Er liegt unter der
   Kopfzeile (40) und unter dem Menue-Overlay (50), damit er nie darueber
   klebt. */
.wafab{
  position:fixed; right:var(--wa-rand); bottom:var(--wa-rand); z-index:30;
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--wa-d); height:var(--wa-d); border-radius:50%;
  background:var(--wa-gruen); color:var(--weiss);
  border:var(--strich) solid var(--wa-gruen-dunkel);
  box-shadow:0 10px 30px rgba(14,39,46,.35),0 0 0 6px rgba(37,211,102,.14);
  text-decoration:none;
  transition:transform var(--t-kurz),box-shadow var(--t-kurz),background-color var(--t-kurz);
}
.wafab__ico{ flex:none; width:28px; height:28px; fill:currentColor; }
.wafab:hover{
  background:var(--wa-gruen-dunkel); transform:translateY(-3px);
  box-shadow:0 16px 38px rgba(14,39,46,.45),0 0 0 8px rgba(37,211,102,.2);
}
/* Messing traegt gegen Weiss wie gegen die dunkle Fusszeile ueber 3:1 – ein
   weisser oder petrolfarbener Ring tut das nur gegen eine der beiden. */
.wafab:focus-visible{ outline:3px solid var(--messing); outline-offset:3px; }

/* --- Bewegung aus, wenn gewünscht ---------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .held__bild img{ transform:none; }
  .js .held__inhalt > *{ animation:none; opacity:1; transform:none; }
  .wafab,.wafab:hover{ transform:none; }
}

/* WhatsApp-Knopf (Nummer der Gruppe Fitz Industries), wie auf fitzag.ch und fvg.ag. */
.wa{
  position:fixed; z-index:50; right:16px; bottom:calc(16px + env(safe-area-inset-bottom));
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:#0E8F45; color:#fff; box-shadow:0 0 0 2px #fff, 0 2px 12px rgba(0,0,0,.3);
}
.wa svg{ display:block; width:28px; height:28px; }
.wa:hover{ background:#0B7238; }
.wa:focus-visible{ outline:3px solid #111; outline-offset:4px; }
@media (min-width:820px){ .wa{ right:24px; bottom:calc(24px + env(safe-area-inset-bottom)); width:60px; height:60px; } .wa svg{ width:30px; height:30px; } }
@media print{ .wa{ display:none; } }