/* ------------------------------------------------------------------
   Schriften: lokal ausgeliefert, keine Verbindung zu Google Fonts.
   Bitter und Cabin sind variable Schriften, je Zeichensatz genuegt
   daher eine Datei fuer den gesamten Schnittbereich.
   Lizenz: SIL Open Font License 1.1
   ------------------------------------------------------------------ */
@font-face{
  font-family:'Bitter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(fonts/bitter-latin-ext.woff2) format('woff2');
  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;
}
@font-face{
  font-family:'Bitter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(fonts/bitter-latin.woff2) format('woff2');
  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:'Cabin';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url(fonts/cabin-latin-ext.woff2) format('woff2');
  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;
}
@font-face{
  font-family:'Cabin';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url(fonts/cabin-latin.woff2) format('woff2');
  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;
}

/* ------------------------------------------------------------------
   Schriftskalierung: alle festen Schriftgrössen sind mit dem Faktor
   --fs multipliziert. Ausgenommen ist die Wortmarke, deren Grösse das
   Skript in --hero-fs berechnet.
   ------------------------------------------------------------------ */
:root{--fs:1;}

/* ------------------------------------------------------------------
   baustein planungsbüro · s. rasper architekt
   Gemeinsames Stylesheet für index.html (DE) und index_es.html (ES).
   Änderungen hier wirken auf beide Sprachversionen.
   ------------------------------------------------------------------ */

:root{
  --bg:#f4f3ee;          /* cremeweißer Hintergrund */
  --ink:#3d3c39;         /* warmes Dunkelgrau (Text) */
  --ink-soft:#4a4945;
  --orange:#e8941e;      /* Akzent-Orange (Buttons, Logo) */
  --orange-border:#c87d12;
  --orange-link:#d4881c; /* Links / Bullet-Striche */
  --rule:#d8d6cf;        /* dezente Linien */
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Cabin',sans-serif;
  line-height:1.5;
  height:100vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;            /* nur die Mitte scrollt */
}

/* zentriert Header, Inhalt und Footer auf gleiche Breite */
.inner{
  max-width:780px;
  margin:0 auto;
  padding:0 28px;
  position:relative;
}

/* ---------- Kopf / Navigation (fixiert) ---------- */
header{
  flex:0 0 auto;
  background:var(--bg);
  padding:34px 0 22px;
  z-index:2;
}
header .inner{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}

/* ---------- Scrollbereich ---------- */
main{
  flex:1 1 auto;
  overflow-y:auto;
  padding-top:34px;
  scroll-behavior:smooth;
}
nav{
  display:flex;
  gap:38px;
  padding-top:6px;
  flex:1;                /* volle Breite, damit margin-left:auto bis rechts schiebt */
}
nav a{
  color:var(--ink);
  text-decoration:none;
  font-size:calc(17px * var(--fs, 1));
  transition:color .18s ease;
}
nav a:hover{color:var(--orange);}
nav a.lang{font-weight:700;}
nav a.lang.lang-first{margin-left:auto;}   /* erster Sprachpunkt rechtsbündig */
nav a.lang-active{color:var(--orange);}    /* aktuell gewählte Sprache */

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding-left:8px;
  padding-top:22.5vh;      /* 25% weiter nach oben (war 30vh) */
  margin-bottom:64px;
  /* Fallback, falls JS deaktiviert ist; per Skript exakt überschrieben */
  min-height:calc(100vh - 200px);
}
.wordmark{
  position:relative;
}
.hero h1{
  font-family:'Bitter',serif;
  font-weight:400;
  font-size:var(--hero-fs, 54px);
  line-height:1.05;
  letter-spacing:.5px;
  color:var(--ink);
  margin-bottom:6px;
  white-space:nowrap;       /* nie umbrechen – Skript skaliert die Größe */
}
.hero .sub{
  font-family:'Cabin',sans-serif;
  font-weight:700;
  font-size:var(--hero-fs, 54px);  /* gleiche Größe wie die erste Zeile */
  line-height:1.05;
  color:var(--orange);
  letter-spacing:.3px;
  white-space:nowrap;       /* nie umbrechen – Skript skaliert die Größe */
}
.hero .sub .dot{color:var(--orange);}

/* CTA-Block in der Hero-Section, mittig unterhalb der Wortmarke */
/* gemeinsame Rahmen-Optik für CTA-Blöcke */
.cta-frame{
  position:relative;
  text-align:center;
  max-width:520px;          /* Block nicht über volle Breite rahmen */
  margin-left:auto;
  margin-right:auto;
  padding:36px 40px;        /* Innenabstand innerhalb der Linien */
  border-top:2px solid #d9c7b0;     /* horizontale Linie oben */
  border-bottom:2px solid #d9c7b0;  /* horizontale Linie unten */
}
.hero-cta{
  margin-top:10.5vh;        /* hero-spezifischer Abstand zur Wortmarke */
}
.cta-frame::before{          /* linke Seite: nur das erste (obere) Drittel */
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:2px;
  height:33.333%;
  background:#d9c7b0;       /* helles Pastellbraun */
}
.cta-frame::after{           /* rechte Seite: nur das letzte (untere) Drittel */
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width:2px;
  height:33.333%;
  background:#d9c7b0;       /* helles Pastellbraun */
}
.cta-frame .event{
  font-family:'Cabin',sans-serif;
  font-weight:700;
  font-size:calc(27px * var(--fs, 1));
  letter-spacing:.3px;
  color:var(--ink);
  margin-bottom:22px;
}
.cta-frame .cta-text{
  font-weight:400;
  font-size:calc(18.5px * var(--fs, 1));
  line-height:1.5;
  color:var(--ink-soft);
  margin-bottom:20px;
}
.cta-frame .cta-button{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  min-width:200px;
  padding:8px 28px;
  background:#d9c7b0;       /* gleiche Farbe wie die Abgrenzungslinien */
  color:var(--ink);
  border:1px solid #c9b69c;
  border-radius:7px;
  font-weight:700;
  font-size:calc(15px * var(--fs, 1));          /* gleiche Größe wie die anderen Buttons */
  line-height:1.15;
  text-decoration:none;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
  transition:background .18s ease, transform .12s ease;
}
.cta-frame .cta-button .cta-sub{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:80%;           /* 80% der Button-Schriftgröße */
  font-weight:400;
}
.cta-frame .cta-button .cta-sub svg{
  width:1em;
  height:1em;
  flex:0 0 auto;
}
.cta-frame .cta-button:hover{background:#cdb89e;transform:translateY(-1px);}
.cta-frame .cta-note{
  font-weight:400;
  font-size:calc(18.5px * var(--fs, 1));
  color:var(--ink-soft);
  margin-top:14px;
}
/* CTA-Block am Ende eines Abschnitts */
.section-cta{
  order:5;                 /* nach Liste (3) und Button (4 mobil) */
  flex-basis:100%;         /* eigene Zeile am Abschnittsende */
  margin-top:40px;
  margin-left:auto;        /* rechtsbündig im Body */
  margin-right:0;
  text-align:right;        /* Inhalt rechtsbündig → Button unter „Projektphasen“ */
  border-top:none;         /* volle obere Linie entfernt – ersetzt durch 66%-Segment */
  border-bottom:none;      /* keine untere horizontale Linie */
  /* obere Linie 66% rechtsbündig + linke untere Ecke (je 10%) */
  background-image:
    linear-gradient(#d9c7b0,#d9c7b0),
    linear-gradient(#d9c7b0,#d9c7b0),
    linear-gradient(#d9c7b0,#d9c7b0);
  background-repeat:no-repeat;
  background-position:right top, left bottom, left bottom;
  background-size:66% 2px, 10% 2px, 2px 10%;
}
.section-cta::before{                 /* untere Linie, rechtsbündig */
  display:block;
  top:auto;
  left:auto;
  right:0;
  bottom:0;
  width:16.75%;            /* um weitere 33% gekürzt (war 25%) */
  height:2px;
}
.section-cta::after{                  /* durchgehende senkrechte Linie rechts */
  display:block;
  top:0;
  bottom:0;
  height:auto;
}
.section-cta .cta-button{
  /* Höhe richtet sich nach dem zweizeiligen Inhalt */
}

/* ---------- Abschnitte ---------- */
/* Themen-Abschnitte: Flexbox, damit Überschrift + Button in einer Reihe
   stehen und der Button auf schmalen Screens ans Ende springen kann.   */
section.topic{
  padding-left:42px;
  margin-top:50vh;          /* 50% Viewport-Höhe Luft über dem Abschnitt */
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  column-gap:20px;
  scroll-margin-top:24px;   /* etwas Luft unter dem Menü beim Anspringen */
}
section.topic h2{
  order:1;
  font-weight:700;
  font-size:calc(27px * var(--fs, 1));
  color:var(--ink);
  letter-spacing:.3px;
}
section.topic .pill{
  order:2;
  margin-left:auto;         /* schiebt den Button auf Desktop nach rechts */
}
section.topic ul.list{
  order:3;
  flex-basis:100%;          /* erzwingt eigene Zeile unter Überschrift/Button */
  margin-top:30px;
}
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:185px;          /* gemeinsame feste Breite (richtet sich nach längstem Text) */
  height:40px;          /* gemeinsame feste Höhe */
  background:var(--orange);
  color:var(--ink);
  border:1px solid var(--orange-border);
  border-radius:7px;
  font-weight:700;
  font-size:calc(15px * var(--fs, 1));
  text-align:center;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
  transition:background .18s ease, transform .12s ease;
}
.pill:hover{background:#f0a02e;transform:translateY(-1px);}
.pill .pdf-icon{width:1.512em;height:1.512em;margin-right:7px;flex:0 0 auto;}

ul.list{list-style:none;font-size:calc(18.5px * var(--fs, 1));color:var(--ink-soft);}
ul.list li{
  display:flex;
  gap:12px;
  margin-bottom:14px;
}
ul.list li::before{
  content:"–";
  color:var(--orange-link);
}
a.link{
  color:var(--orange-link);
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
}
a.link:hover{color:var(--orange);}

/* Spacer am Ende: lässt die letzte Überschrift bis unter das Menü scrollen */
.scroll-tail{height:70vh;}

/* ---------- Kontakt ---------- */
.contact{
  padding-left:18px;
  margin-top:50vh;          /* 50% Viewport-Höhe Luft über dem Abschnitt */
  scroll-margin-top:24px;
}
.contact h2{
  font-weight:700;
  font-size:calc(27px * var(--fs, 1));
  color:var(--ink);
  margin-bottom:26px;
  letter-spacing:.3px;
}
.contact .block{
  font-size:calc(18.5px * var(--fs, 1));
  color:var(--ink-soft);
  margin-bottom:20px;
  line-height:1.55;
}
/* Zwischenüberschrift innerhalb eines Kontakt-Blocks (z. B. „Standort“) */
.contact .block-title{
  font-weight:700;
  color:var(--ink);
  margin-bottom:8px;
}
/* Fließtext-Block: begrenzte Zeilenlänge für bessere Lesbarkeit */
.contact .standort p{
  max-width:56ch;
}
.contact .standort p + p{
  margin-top:12px;
}
.maillink{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
}
.maillink:hover{color:var(--orange);}
/* Telefonnummer: auf allen Geräten wählbar, optisch wie die E-Mail */
.phonelink{white-space:nowrap;}

/* ---------- Footer (fixiert) ---------- */
footer{
  flex:0 0 auto;
  background:var(--bg);
  z-index:2;
}
footer .inner{
  padding-top:14px;
  padding-bottom:22px;
  display:flex;
  justify-content:space-between;
  font-size:calc(16px * var(--fs, 1));
}
footer a{color:var(--ink);text-decoration:none;}
footer a:hover{color:var(--orange);}

.ext-icon-link{
  display:inline;
  color:var(--orange-link);
  text-decoration:underline;
  text-underline-offset:2px;
}
.ext-icon-link svg{width:1em;height:1em;vertical-align:-0.15em;margin-right:2px;}
.ext-icon-link:hover{color:var(--orange);}

/* ---------- Responsive ---------- */
@media (max-width:640px){
  .inner{padding:0 18px;}
  header{padding:24px 0 18px;}

  section.topic{padding-left:0;}
  /* Button rutscht ans Ende des Abschnitts (unter die Liste), linksbündig */
  section.topic .pill{order:4;margin-left:0;margin-top:30px;}

  .contact{padding-left:0;}
  section.topic h2,.contact h2{font-size:calc(23px * var(--fs, 1));}
  ul.list,.contact .block{font-size:calc(17px * var(--fs, 1));}
}

/* ==================================================================
   Ergänzungen für die neuen Textabschnitte (Büro / Werte)
   ================================================================== */

/* Textabschnitte: Blocklayout statt der Flex-Reihe der Listenabschnitte,
   engerer Vorabstand und begrenzte Zeilenlänge.                        */
section.topic.prose,
section.topic.leistungen{
  display:block;
  margin-top:28vh;
  max-width:660px;
}
section.topic.prose h3,
section.topic.leistungen h3{
  font-weight:700;
  font-size:calc(20px * var(--fs, 1));
  color:var(--ink);
  letter-spacing:.2px;
  margin-top:38px;
  margin-bottom:16px;
}
section.topic.prose h2 + h3,
section.topic.leistungen h2 + h3{margin-top:30px;}
/* Abschnitt, der direkt mit Fliesstext beginnt (Werte des Büros) */
section.topic.prose h2 + p{margin-top:26px;}
section.topic.prose p,
section.topic.leistungen p{
  font-size:calc(18.5px * var(--fs, 1));
  color:var(--ink-soft);
  line-height:1.62;
  margin-bottom:16px;
}
section.topic.leistungen ul.list{margin-top:0;}

/* Tabelle „Berufliche Stationen“: Jahreszahlen links, Text rechts.
   Trennung nur durch waagerechte, gepunktete Linien zwischen den
   Zeilen. Aussenlinien und senkrechte Linien bleiben ungezeichnet. */
table.stations{
  width:100%;
  border-collapse:collapse;
  margin:0 0 16px;
  font-size:calc(18.5px * var(--fs, 1));
  color:var(--ink-soft);
  line-height:1.62;
}
table.stations th,
table.stations td{
  border:0;
  border-bottom:1px dotted var(--rule);
  padding-top:10px;
  padding-bottom:1.62em;      /* Leerzeile am Ende jedes Eintrags */
  text-align:left;
  vertical-align:top;         /* Jahreszahlen und Text oben bündig */
}
table.stations th{
  width:9.5em;
  padding-left:0;
  padding-right:18px;
  border-right:1px dotted var(--rule);   /* senkrechte Mittellinie */
  font-weight:500;
  color:var(--ink);
  white-space:nowrap;         /* Zeiträume bleiben in einer Zeile */
}
table.stations td{padding-left:18px;}
/* Keine Aussenlinie unter der letzten Zeile */
table.stations tr:last-child th,
table.stations tr:last-child td{border-bottom:0;}

@media (max-width:640px){
  table.stations{font-size:calc(17px * var(--fs, 1));}
  table.stations th{width:8.5em;padding-right:12px;}
  table.stations td{padding-left:12px;}
}


/* Seite „Leistungen“: ohne Abschnittsüberschrift. Die erste Zwischen-
   überschrift beginnt auf derselben Höhe wie die Überschriften der
   übrigen Seiten, ohne zusätzlichen Vorabstand.                           */
body.subpage section.topic.leistungen > h3:first-child{margin-top:0;}

/* Unterseiten (Varianten B und C): kein Hero, daher kein 50vh-Vorlauf */
body.subpage section.topic,
body.subpage .contact{margin-top:0;}
/* Folgen auf einer Unterseite zwei Abschnitte aufeinander (Variante C:
   Büro und Werte), trennt sie ein Drittel der Viewporthöhe.          */
body.subpage section.topic + section.topic{margin-top:33vh;}
/* Seitentitel, der ausserhalb der Abschnitte direkt im Inhaltsbereich
   steht (Seite „Büro“). Er erhält dieselbe Einrückung und dieselbe
   Auszeichnung wie die Überschriften innerhalb der Abschnitte.        */
main > .inner > h2{
  padding-left:42px;
  font-weight:700;
  font-size:calc(27px * var(--fs, 1));
  color:var(--ink);
  letter-spacing:.3px;
  margin:0 0 30px;
}
@media (max-width:640px){
  main > .inner > h2{
    padding-left:0;
    font-size:calc(23px * var(--fs, 1));
  }
}

/* Ausnahme Seite „Büro“: Werte und Entwicklung des Büros gehören zusammen
   und folgen einander im normalen Abstand zweier Überschriften.        */
body.subpage section.topic + section.topic#buero{margin-top:38px;}
body.subpage .scroll-tail{height:24vh;}
body.subpage main{padding-top:10px;}

/* Navigation darf auf schmalen Screens umbrechen */
nav{flex-wrap:wrap;row-gap:8px;}

/* ---------- Zweite Menüzeile: Abschnitte der aktuellen Seite ---------- */
header .inner + .inner{padding-top:12px;}
nav.subnav{
  gap:38px;
  padding-top:0;
}
nav.subnav a{
  color:var(--orange-link);
  font-size:calc(16px * var(--fs, 1));
}
nav.subnav a:hover{color:var(--orange);}

/* Sprungziele: Abstand unter der Kopfzeile beim Anspringen */
section.topic h3[id]{scroll-margin-top:24px;}

@media (max-width:640px){
  nav.subnav{gap:18px;}
  nav.subnav a{font-size:calc(15px * var(--fs, 1));}
}

@media (max-width:640px){
  section.topic.prose,
    section.topic.leistungen{margin-top:18vh;padding-left:0;}
  section.topic.prose h3 h3,
  section.topic.leistungen h3{font-size:calc(18px * var(--fs, 1));}
  section.topic.prose p,
  section.topic.leistungen p,
  .values-bridge{font-size:calc(17px * var(--fs, 1));}
  nav{gap:18px;}
}

/* ==================================================================
   Burger-Menü (nur schmale Screens)
   ================================================================== */

/* Schaltfläche: oberhalb von 640px unsichtbar und nicht fokussierbar */
.nav-toggle{display:none;}

@media (max-width:640px){
  header .inner{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
  }

  .nav-toggle{
    display:block;
    order:1;
    margin-left:auto;        /* Schaltfläche rechts in der Kopfzeile */
    width:44px;              /* komfortable Zielgrösse für den Finger */
    height:44px;
    padding:0;
    border:none;
    background:transparent;
    color:var(--ink);
    cursor:pointer;
  }
  /* drei Striche, mittlerer als Element, äussere als Pseudoelemente */
  .nav-toggle span,
  .nav-toggle span::before,
  .nav-toggle span::after{
    display:block;
    width:24px;
    height:2px;
    background:currentColor;
    transition:transform .18s ease, opacity .12s ease;
  }
  .nav-toggle span{margin:0 auto;position:relative;}
  .nav-toggle span::before,
  .nav-toggle span::after{content:"";position:absolute;left:0;}
  .nav-toggle span::before{top:-7px;}
  .nav-toggle span::after{top:7px;}

  /* geöffnet: Striche werden zum Kreuz */
  body.nav-open .nav-toggle span{background:transparent;}
  body.nav-open .nav-toggle span::before{transform:translateY(7px) rotate(45deg);}
  body.nav-open .nav-toggle span::after{transform:translateY(-7px) rotate(-45deg);}

  .nav-toggle:focus-visible{outline:2px solid var(--orange);outline-offset:3px;}

  /* Navigation: eingeklappt, öffnet unter der Kopfzeile */
  nav{
    order:2;
    display:none;
    flex-basis:100%;
    flex-direction:column;
    gap:0;
    row-gap:0;
    padding-top:10px;
  }
  body.nav-open nav{display:flex;}

  nav a{
    padding:11px 0;          /* ausreichend hohe Tippfläche */
  }
  /* im Klappmenü keine Rechtsbündigkeit der Sprachumschaltung.
     Doppelte Klasse, damit die Regel die Grundregel überschreibt. */
  nav a.lang.lang-first{margin-left:0;margin-top:12px;}
  nav a.lang{align-self:flex-start;}
}

/* Die zweite Menüzeile gehört nicht ins Klappmenü. Sie bleibt auf
   schmalen Screens immer sichtbar und steht orange über der Seite,
   mit einer Zeile je Unterpunkt.                                     */
@media (max-width:640px){
  nav.subnav{
    order:0;
    display:flex;
    flex-basis:100%;
    flex-direction:column;
    gap:0;
    row-gap:0;
    padding-top:0;
  }
  nav.subnav a{
    color:var(--orange-link);
    padding:7px 0;
  }
}

/* ==================================================================
   Rechtstexte (Impressum, Datenschutz)

   Sie stehen als eigene HTML-Seiten im Ordner und sind aus der
   Fusszeile ganz normal verlinkt, ohne Overlay und ohne JavaScript.
   ================================================================== */

section.legal-text{
  display:block;
  max-width:660px;
  padding-left:42px;
  scroll-margin-top:24px;
}
section.legal-text h2{
  font-weight:700;
  font-size:calc(27px * var(--fs, 1));
  color:var(--ink);
  letter-spacing:.3px;
  margin-bottom:26px;
}
.legal-text h3{
  font-weight:700;
  font-size:calc(19px * var(--fs, 1));
  color:var(--ink);
  margin:26px 0 8px;
}
.legal-text h4{
  font-weight:700;
  font-size:calc(16px * var(--fs, 1));
  color:var(--ink);
  margin:18px 0 6px;
}
.legal-text p{
  font-size:calc(15.5px * var(--fs, 1));
  color:var(--ink-soft);
  line-height:1.6;
  margin-bottom:14px;
}
.legal-text ul{
  margin:0 0 14px 20px;
  padding:0;
  font-size:calc(15.5px * var(--fs, 1));
  color:var(--ink-soft);
  line-height:1.6;
}
.legal-text ul li{margin-bottom:6px;}
.legal-text > h3:first-child,
.legal-text > h4:first-child{margin-top:0;}

@media (max-width:640px){
  section.legal-text{padding-left:0;}
  section.legal-text h2{font-size:calc(23px * var(--fs, 1));}
}


/* ------------------------------------------------------------------
   Breite Screens: Schrift durchgängig um 20 % kleiner.
   ------------------------------------------------------------------ */
@media (min-width:1024px){
  :root{--fs:.8;}
}