/* =========================================================
   Gemeinsames Layout aller Unterseiten (Services-Detailseiten,
   Über uns, Preisliste, AGB, Jobs, Kontakt, Fragen, Impressum,
   Preiskalkulator, 404).

   Alle diese Figma-Frames folgen demselben Bauprinzip wie die
   Startseite: feste 1440px-Bühne, alle Elemente absolut auf ihren
   Figma-Koordinaten. Damit dieselbe CSS-Datei für alle Seiten reicht,
   stehen die SEITENSPEZIFISCHEN Koordinaten (top/left/width) direkt
   als style-Attribut im HTML - hier in der CSS liegt nur, was auf
   allen Seiten gleich ist (Typografie, Farben, Linien, Hero, Formular-
   Baustein). So bleibt jede Seite nachvollziehbar bei ihren echten
   Figma-Werten, ohne dass 18 fast identische CSS-Dateien entstehen.
   ========================================================= */
/* Aussenfläche in Seitenfarbe, damit auf breiten Bildschirmen keine weissen
   Streifen neben der 1440px-Bühne stehen bleiben. */
.sub { position: relative; background: var(--color-gray-100); }
.sub-canvas {
  position: relative;
  width: 1440px;
  margin: 0 auto;
  /* clip statt hidden: schneidet seitlich genauso ab, macht die Buehne aber
     NICHT zu einem eigenen Scrollbereich - sonst koennte die rechte Spalte
     des Preiskalkulators darin nicht kleben (PK3). */
  overflow-x: clip;
  overflow-y: visible;
  background: var(--color-gray-100);   /* #FAFAFA, Figma "Rectangle 530" */
}

/* ---------- Hero mit Foto (1440×610) ---------- */
.sub-hero {
  position: relative;
  width: 1440px;
  height: 610px;
  margin: 0 auto;
  overflow: hidden;
}
/* Ebenen im Hero (Kundenwunsch 9.1 – der beige Filter und das Wasserzeichen
   waren vorher gar nicht sichtbar, weil die generische Regel ".sub-hero > *"
   auch dem Foto z-index 2 gab und es damit ÜBER Verlauf und Wasserzeichen lag):
     0 Foto   <   1 Gold-Verlauf   <   2 Wasserzeichen   <   3 Inhalt          */
.sub-hero > * { position: absolute; z-index: 3; }
.sub-hero > img.sub-hero-photo {
  left: 0; top: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Gold-Verlauf über dem Hero-Foto, exakt aus Figma "Rectangle 656":
   linearer Verlauf von links nach rechts, Farbe rgb(208,176,132),
   Deckkraft 34.1 % -> 13.3 %. */
.sub-hero::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right, rgba(208, 176, 132, 0.341), rgba(208, 176, 132, 0.133));
  pointer-events: none;
}
/* max-width:none: siehe Kommentar in services.css - sonst staucht der
   Container die breiten Wasserzeichen-SVGs.
   Deckkraft 20.68 % wie im Figma-Original. */
.sub-hero-watermark { top: 377px; z-index: 2 !important; max-width: none; opacity: 0.2068; }
/* Figma: Bodoni Moda Regular 89/97.9, Laufweite -4 %, weiss, x144/y233,
   Textbreite 853px. */
.sub-hero h1 {
  left: 144px; top: 233px; width: 853px;
  margin: 0;
  font-size: 89px;
  line-height: 97.9px;
  letter-spacing: var(--font-headline-tracking);
  color: var(--color-white);
  /* Runde 28: derselbe Schlagschatten wie in der Artikel-Navigation -
     die Titel stehen weiss auf dem Kopffoto. */
  text-shadow: var(--schrift-schatten);
}
/* Zwei Schaltflächen nebeneinander (Figma "Rectangle 4203"/"6597",
   je 233×55, Radius 3): links gefüllt navy, rechts weiss mit navy Text. */
.sub-hero-btns { left: 377px; top: 466px; display: flex; gap: 55px; }
.sub-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 233px; height: 55px;
  border-radius: 3px;
  overflow: hidden;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: normal;
  border: none;
  cursor: pointer;
  transition: color 260ms ease;
}
.sub-btn .btn-fill {
  position: absolute; inset: 0; z-index: 0;
  transform: scaleX(0); transform-origin: left;
  transition: transform 420ms cubic-bezier(0.65, 0, 0.35, 1);
}
.sub-btn > span:last-child { position: relative; z-index: 1; }
.sub-btn:hover .btn-fill { transform: scaleX(1); }
.sub-btn-primary { background: var(--color-navy); color: var(--color-white); }
.sub-btn-primary .btn-fill { background: var(--color-gold); }
.sub-btn-secondary { background: var(--color-white); color: var(--color-navy); }
.sub-btn-secondary .btn-fill { background: var(--color-gold); }
.sub-btn-secondary:hover { color: var(--color-white); }

/* ---------- Raster-Linien (Figma #E9E9E9, 1px) ---------- */
/* Ebenen-Ordnung seitenweit: Linien 0 < Hintergrundgrafiken 1 < Inhalt 3.
   Dadurch liegen Linien nie über Kästen, Buttons oder Bildern. */
.sub-line { position: absolute; background: var(--color-gray-200); pointer-events: none; z-index: 0; }
/* Die Linien wachsen beim Scrollen genauso wie auf der Startseite:
   senkrecht gedaempft von oben nach unten (Steuerung: initScrollLines() in
   effects.js setzt scaleY inline), waagrecht einmalig von links nach rechts,
   sobald die senkrechte Linie ihre Hoehe erreicht hat.
   WICHTIG: transform-origin muss gesetzt sein, sonst kollabiert die Linie
   zur Mitte statt zum Anfang. */
.sub-line-v {
  width: 1px;
  transform: scaleY(0);
  transform-origin: top;
}
.sub-line-h {
  height: 1px; left: 0; width: 1440px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sub-line-h.is-drawn { transform: scaleX(1); }
.sub-line-h.linie-von-rechts { transform-origin: right; }

/* ---------- Grosse, blasse Zifferngrafiken im Hintergrund ---------- */
.sub-numeral { position: absolute; z-index: 1; pointer-events: none; user-select: none; }
.sub-numeral img { display: block; width: 100%; height: 100%; max-width: none; }

/* ---------- Textbausteine ---------- */
/* padding:0 hebt die alte globale Regel "section { padding: 90px 0 }" aus
   site.css auf - die Blöcke hier sitzen exakt auf ihren Figma-Koordinaten
   und dürfen keinen zusätzlichen Innenabstand bekommen. */
.sub-block { position: absolute; z-index: 3; padding: 0; }
/* Runde 20: Die Seitentitel dreier Leistungsseiten sind jetzt <h1> statt
   <h2> (jede Seite soll genau eine Hauptueberschrift haben). Damit sich an
   der Darstellung nichts aendert, gilt fuer sie dieselbe Regel. */
.sub-block h2,
.sub-block h1.sub-pagetitle { margin: 0; font-size: 55px; color: var(--color-navy); }
.sub-block h3 { margin: 0; font-size: 34px; color: var(--color-navy); }
.sub-label {
  display: block;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 15px;
  line-height: 16.5px;
  letter-spacing: 0.144em;
  color: var(--color-gold);
  text-transform: uppercase;
}
.sub-text { margin: 0; font-weight: 300; font-size: 15px; line-height: 30px; color: var(--color-black); }

/* Themenblock: In Figma sitzen Titel, goldene Kleinzeile und Fliesstext auf
   FESTEN Abständen (Titel +0, Kleinzeile +50, Text +88). Würden sie einfach
   im Textfluss stehen, würde schon eine einzige umbrechende Zeile in der
   Kleinzeile alles darunter verschieben. Darum sind sie hier absolut auf
   ihren Figma-Abständen verankert - das Layout bleibt damit unabhängig von
   Schriftmetriken exakt. */
/* Titel und goldene Kleinzeile bleiben auf ihren festen Figma-Abständen
   (+0 / +50) absolut verankert - eine umbrechende Kleinzeile darf den Text
   nicht verschieben. Der Fliesstext beginnt darunter bei +88 IM FLUSS, damit
   der "mehr erfahren"-Link direkt an das TATSÄCHLICHE Textende anschliessen
   kann (laut Figma durchgängig 39px Abstand) statt auf einer festen Höhe zu
   kleben - sonst klafft dort je nach Zeilenumbruch eine unterschiedlich
   grosse Lücke (Feedback-Runde 8, Punkt 9.5). */
/* Der Abstand vom Untertitel zum Fliesstext ist im Figma NICHT konstant,
   sondern haengt an der Zeilenzahl des Titels:
     1 Zeile  -> 50px    (z. B. "Wintergarten")
     2 Zeilen -> 88px    (z. B. "Mit einer Arbeits- und Hebebuehne ...")
     3 Zeilen -> 125px   (z. B. "Spezielle Geraete, gruendliche ...")
   Das ist immer die Titelhoehe (n x 37.4) plus 12.6px Abstand. Vorher stand
   hier ein fester Abstand von 88px - dadurch schnitten dreizeilige Titel in
   den Text und einzeilige hatten eine viel zu grosse Luecke (Punkte 9.4 /
   11 / 12). Titel, goldene Kleinzeile und Text stehen darum jetzt im Fluss
   und tragen ihren Abstand selbst; der Block als Ganzes sitzt weiterhin
   absolut auf der Figma-Koordinate. */
.sub-sec { position: absolute; z-index: 3; padding: 0; }
/* Schriftgrösse hier ausdrücklich setzen: .sub-sec ist NICHT .sub-block,
   die Untertitel fielen sonst auf die Browser-Standardgrösse zurück. */
.sub-sec > h3 {
  position: static; margin: 0 0 12.6px; width: 100%;
  font-size: 34px; line-height: 37.4px; color: var(--color-navy);
}
/* Goldene Kleinzeile: im Figma 16.5px hoch, danach 21.5px bis zum Text
   (50 + 16.5 + 21.5 = 88). */
.sub-sec > .sub-label { position: static; display: block; margin: 0 0 21.5px; width: 100%; }
.sub-sec > .sub-text { position: static; width: 100%; }
.sub-text p { margin: 0 0 30px; }   /* Absatzabstand = exakt eine Leerzeile wie in Figma */
.sub-text p:last-child { margin-bottom: 0; }
/* Gilt für beide Schreibweisen: Link IM Block und Link, der SELBST der Block
   ist (.sub-block.arrow-link) - Letzteres griff vorher nicht, deshalb blieb
   die Schriftfarbe auf dem Standardwert statt navyblau. */
.sub-block .arrow-link,
.sub-block.arrow-link,
.sub-sec > .arrow-link { color: var(--color-navy); }
.sub-sec > .arrow-link { display: inline-flex; margin-top: 39px; position: static; }

/* ---------- Preisrechner-Baustein (identisch zur Startseite) ---------- */
.sub-calc { position: absolute; z-index: 3; }
.sub-calc-panel {
  position: absolute;
  z-index: 2;
  width: 344px;
  background: var(--color-cream);
}
.sub-calc-price {
  position: absolute;
  z-index: 3;
  width: 344px; height: 144px;
  background: var(--color-gold);
  color: var(--color-white);
}
.sub-calc-price .sub-calc-price-label {
  position: absolute; left: 34px; top: 42px;
  font-family: var(--font-label); font-weight: 500; font-size: 15px;
  letter-spacing: 0.089em; color: var(--color-gray-200);
}
.sub-calc-price .sub-calc-price-value {
  position: absolute; left: 34px; top: 60px;
  font-family: var(--font-body); font-weight: 500; font-size: 34px; color: var(--color-white);
}
.sub-calc-kind { position: absolute; left: 34px; top: 144px; font-size: 10px; font-weight: 300; color: var(--color-black); }

.sub-options {
  position: absolute;
  z-index: 3;
  display: flex;
  width: 808px; height: 55px;
  background: var(--color-white);
  border-radius: 5px;
  overflow: hidden;
}
.sub-options button {
  flex: 1 1 0;
  border: none; background: transparent; cursor: pointer;
  font-family: var(--font-body); font-weight: 500; font-size: 15px; line-height: 21px;
  color: var(--color-gray-600);
  transition: background 220ms ease, color 220ms ease;
}
.sub-options button:hover { background: var(--color-cream); }
/* Ausgewählte Option: Figma-Farbe (Gold) statt Navy. Beim Seitenaufbau ist
   bewusst KEINE Option vorausgewählt. */
.sub-options button.is-active { background: var(--color-gold); color: var(--color-white); }

.sub-question { position: absolute; display: flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 500; font-size: 15px; color: var(--color-black); }
.sub-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; border-radius: 50%;
  border: 1px solid var(--color-black);
  font-size: 8px; font-weight: 700; line-height: 1;
}

/* =========================================================
   Grosse 89px-Titel auf Seiten OHNE Foto-Hero
   (Figma: Bodoni Moda 89/97.9, Laufweite -4 %, navy) -
   /jobs, /kontakt, /ueber-uns/preisliste, /impressum …
   ========================================================= */
.sub-canvas .sub-h1 {
  position: absolute;
  margin: 0;
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: 89px;
  line-height: 97.9px;
  letter-spacing: var(--font-headline-tracking);
  color: var(--color-navy);
  z-index: 3;
}
/* Erste Zeile einer Preistabellen-Spalte (im Figma in Montserrat Medium
   statt Light gesetzt). */
.sub-text .sub-strong { font-weight: 500; }

/* Social-Icons im Inhaltsbereich (z. B. /kontakt) - Figma: 34x34, Raster 68 */
.sub-social { position: absolute; display: flex; gap: 34px; z-index: 3; }
.sub-social a { display: block; width: 34px; height: 34px; transition: opacity 250ms ease, transform 250ms ease; }
.sub-social a img { display: block; width: 34px; height: 34px; max-width: none; }
.sub-social a:hover { opacity: 0.78; transform: translateY(-2px); }


/* ---------- Kontaktformular ----------
   Die .kf-*-Regeln stehen seit Runde 10 in css/form.css. Grund: den
   Preiskalkulator gibt es jetzt auch auf der Startseite, und die laedt
   subpage.css nicht - dort stand das Formular deshalb voellig unformatiert
   auf der Seite (riesige Haken und Kreuze, verrutschte Felder). Eine eigene
   Datei laesst sich auf jeder Seite einbinden, auf der ein Formular vorkommt. */
/* =========================================================
   404-Fehlerseite - vollflaechig Navy, kein CTA-Band, kein Footer
   (Figma "404 Fehlerseite", Node 2:26306).
   ========================================================= */
body.page-404 { background: var(--color-navy); }
body.page-404 .sub,
body.page-404 .sub-canvas { background: var(--color-navy); }
body.page-404 .page-404-main { background: var(--color-navy); }
.page-404-main .sub-canvas > * { position: absolute; z-index: 3; }
.p404-label {
  font-family: var(--font-label); font-weight: 500;
  font-size: 15px; line-height: 16.5px; letter-spacing: 0.144em;
  text-transform: uppercase; color: var(--color-gold);
}
.p404-title {
  margin: 0;
  font-family: var(--font-headline); font-weight: 400;
  font-size: 55px; line-height: 60.5px;
  letter-spacing: var(--font-headline-tracking);
  color: var(--color-white);
}
.p404-text { font-weight: 300; font-size: 15px; line-height: 30px; color: var(--color-white); }
.p404-text p { margin: 0; }
.p404-btn {
  display: flex; align-items: center; justify-content: center;
  width: 233px; height: 55px; border-radius: 3px;
  font-family: var(--font-body); font-weight: 400; font-size: 18px; line-height: 18px;
  transition: background 320ms cubic-bezier(0.16, 1, 0.3, 1), color 320ms ease;
}
.p404-btn-solid { background: var(--color-gold); color: var(--color-navy); }
.p404-btn-solid:hover { background: var(--color-white); }
.p404-btn-outline { background: transparent; border: 2px solid var(--color-gold); color: var(--color-gold); }
.p404-btn-outline:hover { background: var(--color-gold); color: var(--color-navy); }

/* =========================================================
   Rechtstexte (AGB, Impressum/Datenschutz) - im Figma jeweils EIN
   Textknoten mit gemischten Formaten. Die Abstände hier bilden dessen
   Leerzeilen ab: nach dem Titel eine Leerzeile in Titelhöhe (60.5px),
   vor jedem weiteren Abschnittstitel eine Leerzeile in Fliesstexthöhe
   (30px); Absätze innerhalb eines Abschnitts folgen ohne Zwischenraum,
   weil sie im Original nur durch einen einfachen Umbruch getrennt sind.
   ========================================================= */
.legal h1 {
  margin: 0 0 60.5px;
  font-family: var(--font-headline); font-weight: 400;
  font-size: 55px; line-height: 60.5px;
  letter-spacing: var(--font-headline-tracking);
  color: var(--color-navy);
}
.legal h2 {
  margin: 30px 0 0;
  font-family: var(--font-headline); font-weight: 400;
  font-size: 34px; line-height: 37.4px;
  letter-spacing: var(--font-headline-tracking);
  color: var(--color-navy);
}
.legal h1 + h2 { margin-top: 0; }
/* Runde 23 (Befund 6 der SEO-Analyse): Diese Seite fuehrt Impressum UND
   Datenschutzerklaerung. Sie hatte darum zwei <h1>. Der zweite Titel ist
   jetzt ein <h2> mit dieser Klasse - Aussehen und Abstaende bleiben exakt
   gleich (bildpunktweise gegengeprueft), die Seite hat aber nur noch eine
   Hauptueberschrift. */
.legal .legal-title {
  margin: 0 0 60.5px;
  font-family: var(--font-headline); font-weight: 400;
  font-size: 55px; line-height: 60.5px;
  letter-spacing: var(--font-headline-tracking);
  color: var(--color-navy);
}
.legal .legal-title + h2 { margin-top: 0; }
.legal h3 {
  margin: 30px 0 0;
  font-family: var(--font-headline); font-weight: 400;
  font-size: 21px; line-height: 30px;
  letter-spacing: var(--font-headline-tracking);
  color: var(--color-navy);
}
.legal p {
  margin: 0;
  font-weight: 300; font-size: 15px; line-height: 30px;
  color: var(--color-black);
}
.legal ul { margin: 0; padding-left: 21px; font-weight: 300; font-size: 15px; line-height: 30px; color: var(--color-black); }
.legal a { color: var(--color-navy); }
.legal .legal-date { margin-top: 30px; }
/* Zwischentitel innerhalb eines Rechtstext-Abschnitts (im Figma
   Montserrat SemiBold 15/30, also nur im Schnitt hervorgehoben). */
.legal .legal-sub { font-weight: 600; }

/* =========================================================
   Fragenverzeichnis auf /kontakt/fragen
   (Figma: ein Textknoten x144/y233, 377 breit, Montserrat SemiBold 18/36,
   gold; zwischen zwei Fragen eine Leerzeile = 36px.)
   ========================================================= */
.faq-index { position: absolute; z-index: 3; display: block; }
.faq-index a {
  display: block;
  font-family: var(--font-body); font-weight: 600;
  font-size: 18px; line-height: 36px;
  color: var(--color-gold);
  margin-bottom: 36px;
  transition: color 220ms ease;
}
.faq-index a:last-child { margin-bottom: 0; }
.faq-index a:hover { color: var(--color-navy); }

/* =========================================================
   Team-Kacheln auf /ueber-uns (Runde 12)
   Vorher standen Bild und Name als zwei getrennte, absolut gesetzte
   Geschwister nebeneinander - im Fluss-Layout (Responsive) waeren dadurch
   erst alle Bilder einer Zeile und danach alle Namen gekommen. Jetzt
   bilden sie ein <figure>; die Masse der Vorlage bleiben exakt:
   Bild 233x233, Name 34 px darunter (Figma: Kachel y4367, Name y4634).
   ========================================================= */
.sub-team { margin: 0; }
.sub-team img { display: block; width: 100%; height: 233px; object-fit: cover; }
/* 34: Foto y4367 (233 hoch, endet 4600), Name y4634. Nachgemessen gegen
   v25 - aber nur mit abgeschalteten Einblende-Effekten; mit laufendem
   .reveal-Versatz misst man sonst zwei Pixel daneben. */
.sub-team figcaption { margin-top: 34px; text-align: center; }
.sub-team h3 { margin: 0; font-size: 34px; line-height: 37.4px; color: var(--color-navy); }


/* ---------- Unsichtbare Hauptueberschrift ------------------------------
   Die Regel steht am ENDE von responsive.css - siehe dort. Sie muss die
   letzte im Stapel sein, sonst ueberschreiben die Fluss-Regeln sie. */


/* ---------- Titel + Einleitung des Kalkulators als ein Baustein ----------
   Runde 39: Auf /services/commercial ist der Titel ueber dem Kalkulator
   laenger geworden und lief in den Absatz darunter, weil dieser auf einer
   festen Vorlagenzeile sass. Beide stehen jetzt in einem Baustein; der
   Absatz haengt mit dem Hausabstand am Titel statt an einer Zeilennummer. */
.pk-kopf-block { height: auto; }
.pk-kopf-block > .pk-kopf-text { position: static; width: 610px; margin: 34px 0 0; }
@media (max-width: 1275px) {
  .pk-kopf-block > .pk-kopf-text { width: auto; }
}


/* ---------- /kontakt/fragen: Antworten im Fluss (Runde 55) ----------------
   Fragen und Antworten standen auf festen Figma-Koordinaten. Die Vorlage
   rechnet dabei mit der Zeilenzahl jeder Frage (Antwort 50 px unter einer
   einzeiligen, 88 px unter einer zweizeiligen Frage). Bricht eine Frage mit
   der Webschrift anders um als im Entwurf, stimmt der Abstand nicht mehr:
   gemessen 13 px bei den meisten Fragen, 51 px bei sieben anderen - genau
   der Fehler "fester Zeilenraster statt echter Abstand".
   Jetzt stehen Fragen und Antworten in der rechten Spalte untereinander,
   mit den Abstaenden der Vorlage als ECHTE Abstaende:
     Frage -> Antwort   12.6  (37.4 Zeile + 12.6 = 50, wie in der Vorlage)
     Antwort -> Frage   88    (in der Vorlage ausnahmslos, alle 16 Paare)
     oben 233, unten 376 (Vorlage: letzte Antwort bis Ende der Buehne)
   Waagrecht bleibt alles wie bisher: "left" aus dem Quelltext wirkt bei
   position:relative genauso wie bei absolute, auch ab 1441 px.
   Nur ab 1276 px - im Fluss gelten die Regeln aus responsive.css. */
@media (min-width: 1276px) {
  .sub-canvas.faq-fluss { height: auto !important; padding: 233px 0 376px; }
  .sub-canvas.faq-fluss > section.sub-block[id^="f-"],
  .sub-canvas.faq-fluss > div.sub-block.sub-text { position: relative !important; top: auto !important; }
  .sub-canvas.faq-fluss > section.sub-block[id^="f-"] + div.sub-block.sub-text { margin-top: 12.6px; }
  .sub-canvas.faq-fluss > div.sub-block.sub-text + section.sub-block[id^="f-"] { margin-top: 88px; }
}


/* ---------- Rechtstexte im Fluss (Runde 56) --------------------------------
   /impressum-datenschutzerklaerung und /agb standen auf dem Desktop auf einer
   festen Buehnenhoehe (4374 bzw. 3136 px). Jede Textaenderung - zuletzt die
   neue Datenschutzerklaerung - haette sie verschoben, und weil die Hoehe mit
   der Ersatzschrift nachgemessen war, stimmte der Abstand zur Fusszeile mit
   der echten Schrift ohnehin nie genau. Jetzt ECHTE Abstaende aus der
   Figma-Vorlage:
     oben 233
     Impressum -> Datenschutzerklaerung 144 (Vorlage: Textende y1655, y1799)
     unten 377 (Vorlage AGB: Textende y2759, Buehnenende y3136)
   Waagrecht wie bisher ("left" aus dem Quelltext, auch ab 1441 px).
   Nur ab 1276 px - im Fluss gelten die Regeln aus responsive.css. */
@media (min-width: 1276px) {
  .sub-canvas.legal-fluss { height: auto !important; padding: 233px 0 377px; }
  .sub-canvas.legal-fluss > article.legal { position: relative !important; top: auto !important; }
  .sub-canvas.legal-fluss > article.legal + article.legal { margin-top: 144px; }
}