@charset "UTF-8";
/* ================================================================
   ORLAWERK — Stylesheet
   ----------------------------------------------------------------
   Gestaltungsprinzip: technische Zeichnung.
   Bemaßungslinien gliedern, Monospace trägt alle Zahlenwerte,
   Signalfarbe ausschließlich für Ausschlüsse und Warnungen.
   ================================================================ */

/* ---------------------------------------------------------------
   1. SCHRIFTEN — lokal eingebunden
   ---------------------------------------------------------------
   KEINE Einbindung über Google Fonts. Die Dateien müssen unter
   /assets/fonts/ liegen. Anleitung siehe LIESMICH.md.
   --------------------------------------------------------------- */

@font-face{
  font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/archivo-600.woff2") format("woff2");
}
@font-face{
  font-family:"Archivo";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/archivo-700.woff2") format("woff2");
}
@font-face{
  font-family:"SourceSans";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/sourcesans-400.woff2") format("woff2");
}
@font-face{
  font-family:"SourceSans";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/sourcesans-600.woff2") format("woff2");
}
@font-face{
  font-family:"PlexMono";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/plexmono-400.woff2") format("woff2");
}
@font-face{
  font-family:"PlexMono";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/plexmono-500.woff2") format("woff2");
}

/* ---------------------------------------------------------------
   2. GESTALTUNGSVARIABLEN
   --------------------------------------------------------------- */

:root{
  /* --- Grundfarben ------------------------------------------------
     Petrol trägt Text und dunkle Flächen, Butter steht auf Petrol,
     Papier ist der warme Hintergrund.
     Alle Kombinationen erfüllen WCAG AA (mindestens 4,5:1).
     ---------------------------------------------------------------- */
  --ink:#013E37;        /* Petrol — Fließtext und dunkle Flächen */
  --ink-2:#2A5B54;      /* Petrol aufgehellt — Sekundärtext */
  --paper:#FAF8F0;      /* Papier — Seitenhintergrund */
  --surface:#FFFFFF;    /* Karten und Tabellen */
  --butter:#FFEFB3;     /* Butter — Text und Aktionen auf Petrol */
  --butter-matt:#E8DCA8;/* Butter gedämpft — Sekundärtext auf Petrol */

  /* --- Abstufungen ------------------------------------------------ */
  --alu:#566C67;        /* Beschriftungen, Maßangaben, Hilfstext */
  --alu-dunkel:#8FA5A0;  /* dieselbe Rolle auf Petrolgrund */
  --rule:#DCD6C6;       /* Linien */
  --rule-soft:#EAE5D7;  /* feine Linien */
  --rule-dunkel:rgba(255,239,179,.18); /* Linien auf Petrolgrund */

  /* --- Funktionsfarben -------------------------------------------- */
  --blue:#0A6B5E;       /* Interaktion: Verweise, Fokus, Hinweislinien */
  --blue-dark:#075449;  /* Verweise im Fließtext */
  --blue-hell:#7FD4C3;  /* Verweise auf Petrolgrund */
  --signal:#A0380F;     /* ausschließlich Ausschlüsse und Warnungen */
  --signal-bg:#FBEFE5;
  --signal-rule:#EDD9C6;

  /* Altnamen, damit bestehende Regeln weiterlaufen */
  --petrol:#013E37;
  --petrol-tief:#012A25;

  --f-display:"Archivo",system-ui,-apple-system,sans-serif;
  --f-body:"SourceSans",system-ui,-apple-system,sans-serif;
  --f-mono:"PlexMono",ui-monospace,"SFMono-Regular",Consolas,monospace;

  --col:min(1120px,100% - 3rem);
  --measure:68ch;
}

/* ---------------------------------------------------------------
   3. GRUNDLAGEN
   --------------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(1.0625rem,.4vw + 1rem,1.1875rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;line-height:1.12;
  letter-spacing:-.02em;margin:0}
h1{font-size:clamp(2rem,4.6vw,3rem)}
h2{font-size:clamp(1.5rem,2.6vw,2.05rem);margin-bottom:1.1rem}
h3{font-size:1.12em;letter-spacing:-.01em;margin-bottom:.45rem}
h4{font-size:1em}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.2em;padding-left:1.3em}
li{margin-bottom:.4em}
strong{font-weight:600}

a{color:var(--blue-dark);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}
img,svg{max-width:100%;height:auto}
sub,sup{font-size:.72em;line-height:0}

.wrap{width:var(--col);margin-inline:auto}
.measure{max-width:var(--measure)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--butter);
  padding:.7rem 1.2rem;z-index:100;border-radius:0 0 2px 0}
.skip:focus{left:0}

/* ---------------------------------------------------------------
   4. KOPFZEILE UND NAVIGATION
   --------------------------------------------------------------- */

.site-head{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
}
.head-in{display:flex;align-items:center;gap:1.5rem;min-height:4.25rem}

.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:0 0 auto}
.brand svg{width:28px;height:28px;flex:0 0 auto}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-name{font-family:var(--f-display);font-weight:700;font-size:1.15rem;
  letter-spacing:.03em;color:var(--ink)}
.brand-sub{font-family:var(--f-mono);font-size:.56rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--alu);margin-top:.22rem}

.nav{margin-left:auto;display:flex;align-items:center;gap:1.75rem}
.nav > a{font-size:.95rem;color:var(--ink-2);text-decoration:none;
  padding-block:.35rem;border-bottom:2px solid transparent}
.nav > a:hover{color:var(--ink);border-bottom-color:var(--blue)}
.nav > a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}
.nav .cta{border:1px solid var(--ink);border-radius:2px;padding:.45rem 1rem;
  color:var(--ink);font-weight:600}
.nav .cta:hover{background:var(--ink);color:var(--butter);border-color:var(--ink)}
.nav .cta[aria-current="page"]{background:var(--ink);color:var(--butter)}

.burger{display:none;margin-left:auto;background:none;border:1px solid var(--rule);
  border-radius:2px;padding:.5rem .7rem;font-family:var(--f-mono);font-size:.75rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);cursor:pointer}

.has-sub{position:relative}
.sub-toggle{font-family:var(--f-body);font-size:.95rem;color:var(--ink-2);
  background:none;border:0;padding:.35rem 0;cursor:pointer;
  border-bottom:2px solid transparent;display:flex;align-items:center;gap:.4rem}
.sub-toggle::after{content:"";width:.4rem;height:.4rem;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .15s ease}
.sub-toggle[aria-expanded="true"]::after{transform:translateY(1px) rotate(-135deg)}
.sub-toggle:hover{color:var(--ink);border-bottom-color:var(--blue)}
.sub-toggle.is-active{color:var(--ink);border-bottom-color:var(--ink)}
.sub{display:none;position:absolute;top:calc(100% + .7rem);left:-1rem;min-width:19rem;
  background:var(--surface);border:1px solid var(--rule);border-radius:2px;
  padding:.4rem;box-shadow:0 8px 24px -12px rgba(1,62,55,.26)}
.sub[data-open="true"]{display:block}
.sub a{display:block;padding:.6rem .8rem;border-radius:2px;text-decoration:none}
.sub a strong{display:block;font-family:var(--f-body);font-weight:600;
  font-size:.95rem;color:var(--ink)}
.sub a span{display:block;font-size:.82rem;color:var(--alu);margin-top:.1rem}
.sub a:hover{background:var(--paper)}
.sub a:hover strong{color:var(--blue-dark)}

@media (max-width:960px){
  .burger{display:block}
  .nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:stretch;gap:0;background:var(--surface);
    border-bottom:1px solid var(--rule);padding:.5rem 1.5rem 1.25rem;
    margin-left:0;display:none;
    box-shadow:0 12px 24px -18px rgba(1,62,55,.38)}
  .nav[data-open="true"]{display:flex}
  .nav > a{padding:.85rem 0;border-bottom:1px solid var(--rule-soft)}
  .nav .cta{margin-top:.9rem;text-align:center;border:1px solid var(--ink)}
  .has-sub{width:100%}
  .sub-toggle{width:100%;justify-content:space-between;padding:.85rem 0;
    border-bottom:1px solid var(--rule-soft)}
  .sub{position:static;min-width:0;border:0;box-shadow:none;background:transparent;
    padding:.25rem 0 .5rem .9rem;border-left:2px solid var(--rule)}
  .sub a{padding:.55rem 0}
}

/* ---------------------------------------------------------------
   5. SIGNATURELEMENT — Bemaßungslinie
   --------------------------------------------------------------- */

.dim{display:flex;align-items:center;gap:1rem;margin:0;
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--alu)}
.dim::before,.dim::after{content:"";flex:1;height:1px;background:var(--rule)}

.eyebrow{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--alu);margin:0 0 1rem}

/* ---------------------------------------------------------------
   6. ABSCHNITTE
   --------------------------------------------------------------- */

.section{padding-block:clamp(3rem,6vw,5rem)}
.section + .section{border-top:1px solid var(--rule-soft)}
.section-body{margin-top:2rem}
.lede{font-size:1.14em;color:var(--ink-2);max-width:62ch}

/* Seitenkopf der Unterseiten */
.page-head{padding-block:clamp(2.5rem,5vw,4rem) clamp(1.75rem,3vw,2.5rem);
  border-bottom:1px solid var(--rule-soft)}
.page-head h1{max-width:20ch;margin-bottom:1.1rem}
.page-head .lede{max-width:58ch}

/* ---------------------------------------------------------------
   7. BAUSTEINE
   --------------------------------------------------------------- */

.btn{display:inline-block;font-family:var(--f-body);font-weight:600;font-size:1em;
  padding:.7rem 1.4rem;border-radius:2px;text-decoration:none;
  border:1px solid var(--ink);cursor:pointer}
.btn-primary{background:var(--ink);color:var(--butter)}
.btn-primary:hover{background:var(--petrol-tief);border-color:var(--petrol-tief);color:var(--butter)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--butter)}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.75rem}

.note{margin-block:1.75rem;padding:1.1rem 1.3rem;background:var(--surface);
  border:1px solid var(--rule);border-left:3px solid var(--blue);border-radius:2px;
  font-size:.96em;color:var(--ink-2)}
.note strong{color:var(--ink)}
.note :last-child{margin-bottom:0}

.note-warn{border-left-color:var(--signal);background:var(--signal-bg);
  border-color:var(--signal-rule)}

/* Datentabellen — Maschinenkennwerte */
.data{width:100%;border-collapse:collapse;margin-block:1.75rem;font-size:.96em}
.data caption{text-align:left;font-family:var(--f-mono);font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--alu);
  padding-bottom:.7rem}
.data th,.data td{text-align:left;padding:.72rem .9rem;
  border-bottom:1px solid var(--rule-soft);vertical-align:top}
.data thead th{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--alu);font-weight:400;
  border-bottom:1px solid var(--rule)}
.data tbody th{font-weight:600;color:var(--ink);white-space:nowrap}
.data td{color:var(--ink-2)}
.data td.num,.data td .num{font-family:var(--f-mono);font-size:.92em;color:var(--ink)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Kacheln */
.cards{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  border-radius:2px;overflow:hidden;margin-top:2rem}
@media (min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--surface);padding:1.6rem 1.5rem 1.5rem;
  display:flex;flex-direction:column}
.card .num{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;
  color:var(--alu);display:block;margin-bottom:.7rem}
.card p{font-size:.96em;color:var(--ink-2);margin-bottom:1rem}
.card > a{margin-top:auto;font-family:var(--f-mono);font-size:.78rem;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  color:var(--blue-dark)}
.card > a::after{content:" →"}
.card > a:hover{text-decoration:underline}
.card--dark{background:var(--ink);color:var(--butter)}
.card--dark h3{color:var(--butter)}
.card--dark p{color:var(--butter-matt)}
.card--dark .num{color:var(--alu-dunkel)}
.card--dark > a{color:var(--blue-hell)}

/* Zweispaltig */
.split{display:grid;gap:2rem;margin-top:2rem}
@media (min-width:760px){.split{grid-template-columns:1fr 1fr;gap:3rem}}
.split p{color:var(--ink-2);font-size:.98em}

/* Nummerierte Ablaufliste */
.steps{list-style:none;margin:2rem 0 0;padding:0;counter-reset:s;
  border-top:1px solid var(--rule-soft)}
.steps li{counter-increment:s;display:grid;gap:.35rem 1.5rem;
  grid-template-columns:auto 1fr;align-items:start;
  padding:1.35rem 0;border-bottom:1px solid var(--rule-soft);margin:0}
.steps li::before{content:counter(s,decimal-leading-zero);
  font-family:var(--f-mono);font-size:.85rem;color:var(--blue);padding-top:.15rem}
.steps h3{grid-column:2;font-size:1em;font-family:var(--f-body);
  font-weight:600;letter-spacing:0;margin:0}
.steps p{grid-column:2;margin:0;color:var(--ink-2);font-size:1em}

/* Merkmalsliste mit Strich statt Punkt */
.ticks{list-style:none;margin:1.5rem 0;padding:0;display:grid;gap:.6rem}
@media (min-width:700px){.ticks--2{grid-template-columns:1fr 1fr;gap:.6rem 2rem}}
.ticks li{padding-left:1.5rem;position:relative;color:var(--ink-2);
  font-size:1em;margin:0}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;
  width:.7rem;height:1px;background:var(--blue)}
.ticks--signal li::before{background:var(--signal)}

/* Ausschlussbereich */
.exclude{background:var(--signal-bg);
  border-top:1px solid var(--signal-rule);border-bottom:1px solid var(--signal-rule)}
.exclude .eyebrow{color:var(--signal)}

/* Schlussaufruf */
.closing{background:var(--ink);color:var(--butter);
  padding-block:clamp(3rem,6vw,5rem)}
.closing h2{color:var(--butter);max-width:22ch}
.closing p{color:var(--butter-matt);max-width:54ch}
.closing .btn{border-color:var(--butter);background:var(--butter);color:var(--ink)}
.closing .btn:hover{background:#FFF6D2;color:var(--ink)}
.closing .dim{color:var(--alu-dunkel)}
.closing .dim::before,.closing .dim::after{background:var(--rule-dunkel)}
.closing a{color:var(--blue-hell)}

/* ---------------------------------------------------------------
   Maschinendaten-Band
   Beantwortet die erste Frage eines Gewerbekunden — „könnt ihr mein
   Teil überhaupt?" — bevor er scrollen muss.
   --------------------------------------------------------------- */

.daten{background:var(--ink);color:var(--butter)}
.daten-raster{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--rule-dunkel);margin:0;
}
@media (max-width:900px){.daten-raster{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.daten-raster{grid-template-columns:1fr}}

.datenfeld{background:var(--ink);padding:1.85rem 1.6rem}
.datenfeld dt{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--alu-dunkel);margin:0 0 .6rem;
}
.datenfeld dd{
  margin:0;font-family:var(--f-display);font-weight:600;
  font-size:1.18em;line-height:1.3;letter-spacing:-.01em;color:var(--butter);
}
.datenfeld dd small{
  display:block;font-family:var(--f-body);font-weight:400;font-size:.9em;
  line-height:1.45;color:var(--butter-matt);margin-top:.4rem;letter-spacing:0;
}
.datenfeld .ph{
  background:rgba(255,239,179,.14);border-bottom-color:var(--butter-matt);
  color:var(--butter);
}

/* ---------------------------------------------------------------
   RECHTSTEXTE
   Impressum, Datenschutz, AGB. Die Texte kommen wörtlich von der
   Kanzlei — hier wird nur die Darstellung geregelt, nie der Inhalt.
   --------------------------------------------------------------- */

.rechtstext{font-size:.98em;line-height:1.7}
.rechtstext h2{font-size:1.2em;margin-top:2.25rem;margin-bottom:.8rem}
.rechtstext h2:first-child{margin-top:0}
.rechtstext h3{font-size:1.08em;margin-top:1.75rem;margin-bottom:.5rem}
.rechtstext p{margin-bottom:1.1em}
.rechtstext ul,.rechtstext ol{margin-bottom:1.2em}
.rechtstext li{margin-bottom:.5em}
.rechtstext a{word-break:break-word}
.rechtstext-quelle{
  font-size:.84rem;color:var(--alu);margin-top:2rem;margin-bottom:0;
}
.rechtstext-stand{
  margin-top:2.5rem;padding-top:1rem;border-top:1px solid var(--rule-soft);
  font-family:var(--f-mono);font-size:.76rem;letter-spacing:.06em;color:var(--alu);
}

/* Platzhaltermarkierung — vor Livegang alle entfernen */
.ph{background:#FFF0BE;padding:0 .2em;border-bottom:1px dashed #B08900;color:#5C4700}

/* ---------------------------------------------------------------
   8. FORMULAR
   --------------------------------------------------------------- */

.form{margin-top:2rem;max-width:44rem}
.fieldset{border:0;padding:0;margin:0 0 2.25rem}
.fieldset legend{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--alu);padding:0 0 .9rem;
  border-bottom:1px solid var(--rule);width:100%;margin-bottom:1.4rem}
.field{margin-bottom:1.5rem}
.field label{display:block;font-weight:600;font-size:1em;margin-bottom:.7rem}
.field .hint{display:block;font-weight:400;font-size:.86rem;color:var(--alu);
  margin-top:.25rem}
.req{color:var(--signal);font-weight:400}
.field input[type=text],.field input[type=email],.field input[type=tel],
.field input[type=number],.field input[type=date],.field select,.field textarea{
  width:100%;font-family:var(--f-body);font-size:1em;color:var(--ink);
  background:var(--surface);border:1px solid var(--rule);border-radius:2px;
  padding:.65rem .8rem;line-height:1.5}
.field textarea{min-height:11rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--blue);outline:2px solid color-mix(in srgb,var(--blue) 25%,transparent);
  outline-offset:0}
.field input[aria-invalid=true],.field textarea[aria-invalid=true],
.field select[aria-invalid=true]{border-color:var(--signal);background:#FFFBF7}

/* Zweispaltige Feldpaare.
   Beschriftung und Eingabefeld sollen in beiden Spalten auf derselben
   Linie liegen — auch wenn nur eines der beiden Felder eine Erläuterung
   unter der Beschriftung trägt. Dafür teilen sich beide Spalten dasselbe
   Zeilenraster (subgrid): Zeile 1 nimmt alle Beschriftungen auf, Zeile 2
   alle Eingabefelder. */
.grid-2{display:grid;gap:0 1.25rem}

@media (min-width:600px){
  .grid-2{grid-template-columns:1fr 1fr;row-gap:1.5rem;align-items:start}
  .grid-2 > .field{
    display:grid;
    grid-template-rows:subgrid;
    grid-row:span 2;
    margin-bottom:0;
  }
  /* Beschriftung an der UNTERKANTE ihrer Zeile ausrichten.
     Sonst klebt eine Beschriftung ohne Erläuterung oben und lässt eine
     Lücke zum Eingabefeld, während die daneben mit Erläuterung dicht
     darüber sitzt. So ist der Abstand Beschriftung → Feld überall gleich. */
  .grid-2 > .field > label{align-self:end;margin-bottom:.7rem}
}

/* Rückfallebene für Browser ohne subgrid: Beschriftungsblock auf eine
   feste Mindesthöhe setzen, sodass Felder mit und ohne Erläuterung
   gleich hoch bauen. */
@supports not (grid-template-rows: subgrid){
  @media (min-width:600px){
    .grid-2 > .field > label{
      min-height:3.2rem;
      display:flex;flex-direction:column;justify-content:flex-end;
    }
  }
}

.checks{display:grid;gap:.7rem;margin-top:.2rem}
@media (min-width:600px){.checks--2{grid-template-columns:1fr 1fr;gap:.7rem 1.25rem}}
.check{display:flex;gap:.65rem;align-items:flex-start;
  font-size:1em;font-weight:400;cursor:pointer}
.check input{margin-top:.3rem;flex:0 0 auto;width:1.05rem;height:1.05rem;
  accent-color:var(--blue)}
.check span{color:var(--ink-2)}

.consent{background:var(--surface);border:1px solid var(--rule);border-radius:2px;
  padding:1.15rem 1.25rem;margin-bottom:1rem}
.consent .check{font-size:.98em}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-error{background:var(--signal-bg);border:1px solid var(--signal-rule);
  border-left:3px solid var(--signal);border-radius:2px;padding:1.1rem 1.3rem;
  margin-bottom:2rem}
.form-error h2{font-size:1.15em;margin-bottom:.5rem;color:var(--signal)}
.form-error ul{margin:0;padding-left:1.2em}
.form-error li{color:var(--ink-2);font-size:.98em}

.form-ok{background:var(--surface);border:1px solid var(--rule);
  border-left:3px solid var(--blue);border-radius:2px;padding:1.5rem 1.6rem;
  margin-bottom:2rem}
.form-ok h2{font-size:1.2em;margin-bottom:.5rem}
.form-ok :last-child{margin-bottom:0}

/* ---------------------------------------------------------------
   9. FUSSZEILE
   --------------------------------------------------------------- */

.site-foot{padding-block:2.5rem;border-top:1px solid var(--rule);font-size:.9rem}
.foot-grid{display:grid;gap:1.75rem}
@media (min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
.site-foot h2{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--alu);margin:0 0 .7rem;font-weight:400}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.site-foot li{margin:0}
.site-foot a{color:var(--ink-2);text-decoration:none}
.site-foot a:hover{color:var(--ink);text-decoration:underline}
.site-foot p{color:var(--ink-2)}
.foot-legal{margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--rule-soft);
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;color:var(--alu)}

/* ---------------------------------------------------------------
   10. DRUCK
   --------------------------------------------------------------- */

@media print{
  .site-head,.burger,.nav,.closing,.btn-row,.skip{display:none}
  body{background:#fff;font-size:11pt}
  .section{padding-block:1rem;border:0}
  a{color:var(--ink);text-decoration:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;color:#666}
  .ph{background:none;border-bottom:1px solid #999}
}