/* ============================================================================
   Lantia — Stilbasis
   Teil 1 stammt 1:1 aus den <style>-Bloecken von Startseite.dc.html,
   Karriere.dc.html und Recht.dc.html (Vereinigung der drei). Geaendert wurde
   nur der Pfad der Schriften: sie liegen jetzt unter /fonts statt fonts/,
   weil dieses Blatt aus /assets/ geladen wird.
   Teil 2 loest die style-hover/style-focus/style-before-Attribute der
   Vorlagen in echte Regeln auf.
   Teil 3 ist der Mobilausbau — genau zwei Haltepunkte, 900px und 600px.
   ========================================================================== */

/* --- Teil 1: uebernommene Basis ------------------------------------------ */

@font-face{font-family:'Space Grotesk Variable';src:url('/fonts/space-grotesk.woff2') format('woff2-variations');font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:'Inter Variable';src:url('/fonts/inter.woff2') format('woff2-variations');font-weight:100 900;font-style:normal;font-display:swap}

:root{
  color-scheme:dark;
  --fd:'Space Grotesk Variable','Space Grotesk',system-ui,sans-serif;
  --fb:'Inter Variable','Inter',system-ui,sans-serif;
  --fm:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --bg:#060a0e; --bg-soft:#090f15; --surface:#0d131a; --surface-raised:#141d27;
  --text:#ecf1f6; --text-muted:#a7b4c2; --text-subtle:#748493;
  --brand:#5a7b9c; --brand-light:#94b1cc; --brand-pale:#c2d3e2; --brand-deep:#304a62;
  --accent-fill:#f2aa6e; --accent-text:#f2aa6e; --accent-strong:#d88d53; --on-accent:#060a0e;
  --border:rgb(148 177 204 / 16%); --border-strong:rgb(148 177 204 / 32%);
  --glass:rgb(9 15 21 / 52%); --glass-border:rgb(148 177 204 / 20%);
  --field-node:#94b1cc; --field-edge:#5a7b9c; --field-pulse:#f2aa6e;
  --edge:rgb(255 255 255 / 30%); --inset-hi:inset 0 1px 1px rgb(255 255 255 / 10%);
  --input-bg:rgb(6 10 14 / 60%); --scrim:0.55; --duo:0.7;
  --vfilter:saturate(.2) contrast(1.1) brightness(.92);
  --ease:cubic-bezier(.16,1,.3,1); --spring:cubic-bezier(.34,1.4,.64,1);
  /* Einblenden beim Scrollen. Weg, Dauer und Kurve je Eigenschaft getrennt,
     damit der Haltepunkt bei 900px sie einzeln nachziehen kann. Die Werte hier
     sind die des Desktops und entsprechen 1:1 dem, was bisher als transition
     im Blatt stand — dort aendert sich nichts. */
  --rv-weg:20px;
  --rv-o-dauer:.9s; --rv-o-kurve:var(--ease);
  --rv-y-dauer:.9s; --rv-y-kurve:var(--ease);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    color-scheme:light;
    --bg:#eef0f2; --bg-soft:#e5e8ec; --surface:#ffffff; --surface-raised:#ffffff;
    --text:#12171c; --text-muted:#45525c; --text-subtle:#5b6874;
    --brand:#3d5c7c; --brand-light:#2b445e; --brand-pale:#1c2e40; --brand-deep:#b9c8d6;
    --accent-fill:#f2aa6e; --accent-text:#27405a; --accent-strong:#e0954f; --on-accent:#141a20;
    --border:rgb(18 23 28 / 14%); --border-strong:rgb(18 23 28 / 26%);
    --glass:rgb(255 255 255 / 55%); --glass-border:rgb(255 255 255 / 72%);
    --field-node:#6f8ba6; --field-edge:#8aa3ba; --field-pulse:#c2712a;
  --edge:rgb(18 23 28 / 16%); --inset-hi:inset 0 1px 1px rgb(255 255 255 / 65%);
  --input-bg:rgb(255 255 255 / 80%); --scrim:0.4; --duo:0.62;
    --vfilter:invert(1) saturate(.16) contrast(1.02) brightness(1.04);
  }
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#eef0f2; --bg-soft:#e5e8ec; --surface:#ffffff; --surface-raised:#ffffff;
  --text:#12171c; --text-muted:#45525c; --text-subtle:#5b6874;
  --brand:#3d5c7c; --brand-light:#2b445e; --brand-pale:#1c2e40; --brand-deep:#b9c8d6;
  --accent-fill:#f2aa6e; --accent-text:#27405a; --accent-strong:#e0954f; --on-accent:#141a20;
  --border:rgb(18 23 28 / 16%); --border-strong:rgb(18 23 28 / 28%);
  --glass:rgb(255 255 255 / 70%); --glass-border:rgb(255 255 255 / 85%);
  --field-node:#6f8ba6; --field-edge:#8aa3ba; --field-pulse:#c2712a;
  --edge:rgb(18 23 28 / 16%); --inset-hi:inset 0 1px 1px rgb(255 255 255 / 65%);
  --input-bg:rgb(255 255 255 / 80%); --scrim:0.4; --duo:0.62;
  --vfilter:invert(1) saturate(.16) contrast(1.02) brightness(1.04);
}
:root[data-theme="dark"]{color-scheme:dark}

/* Der helle Modus kehrt das Heldenvideo um (invert). Beim Startseitenvideo
   traegt das: Silhouetten vor Nachthimmel werden zu dunklen Figuren auf
   hellem Grund, das Bild bleibt lesbar. Das Karrierevideo zoomt dagegen auf
   ein Gesicht — invertiert wird daraus ein Negativ (Haut blau, helle
   Raumschiffe als dunkle Flecken). Zusaetzlich landeten genau diese Flecken
   unter dem Vorspann: gemessen 1,31:1 Kontrast gegen #45525c bei 21px, also
   faktisch unlesbar. Fuer diese eine Seite wird darum aufgehellt statt
   umgekehrt — dasselbe Bild, nur blass. Dieselbe Messung ergibt dann 4,34:1.
   Der dunkle Modus ist von alldem nicht betroffen. */
@media (prefers-color-scheme: light){
  :root:not([data-theme])[data-seite="karriere"]{
    --scrim:0.72; --duo:0.44;
    --vfilter:saturate(.4) brightness(2.05) contrast(.62);
  }
}
:root[data-theme="light"][data-seite="karriere"]{
  --scrim:0.72; --duo:0.44;
  --vfilter:saturate(.4) brightness(2.05) contrast(.62);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:8rem;scrollbar-color:var(--brand) var(--bg);scrollbar-width:thin}
html body{margin:0;background:var(--bg);color:var(--text);font-family:var(--fb);font-size:1.0625rem;line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background-color .5s var(--ease),color .5s var(--ease)}
p,h1,h2,h3,h4,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
p,li{text-wrap:pretty}
img,svg,video,canvas{display:block;max-width:100%}
input,button,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit}
a{color:var(--brand-light);text-decoration-color:var(--border-strong);text-underline-offset:.22em;text-decoration-thickness:1px;transition:color .12s var(--ease),text-decoration-color .12s var(--ease)}
a:hover{color:var(--brand-pale);text-decoration-color:currentcolor}
:focus-visible{outline:2px solid var(--accent-fill);outline-offset:2px;border-radius:2px}
::selection{background:color-mix(in oklab,var(--brand) 55%,transparent);color:var(--text)}
@keyframes lan-breathe{0%,100%{opacity:.28;transform:scale(.82)}45%{opacity:1;transform:scale(1)}}
@keyframes lan-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes lan-cursor{0%,8%{opacity:1}9%,16%{opacity:0}17%,24%{opacity:1}25%,32%{opacity:0}33%,100%{opacity:1}}
@keyframes lan-pal-in{from{opacity:0;transform:translateY(-10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes lan-pal-scrim{from{opacity:0}to{opacity:1}}
@keyframes lan-pal-caret{0%,44%{opacity:1}45%,100%{opacity:.1}}
@keyframes lan-ap-in{from{opacity:0;transform:translateY(16px) scale(.99)}to{opacity:1;transform:none}}
@keyframes lan-ap-scrim{from{opacity:0}to{opacity:1}}
@keyframes lan-ap-caret{0%,44%{opacity:1}45%,100%{opacity:.1}}
/* Mobilmenue. Das Blatt faehrt unter der Kopfzeile hervor und laeuft
   exponentiell aus (--ease); die Zeilen folgen versetzt nach. Herein dauert
   laenger als hinaus — beim Schliessen will man das Ziel sehen, nicht die
   Bewegung. Bei reduzierter Bewegung greift die Regel weiter unten und macht
   aus jeder Dauer .01ms; dann erscheint und verschwindet es schlicht. */
@keyframes lan-mm-auf{from{opacity:0;transform:translateY(-1.5rem)}to{opacity:1;transform:none}}
@keyframes lan-mm-zu{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-.75rem)}}
@keyframes lan-mm-zeile{from{opacity:0;transform:translateY(.65rem)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  /* site.js setzt [data-reveal-js] bei reduzierter Bewegung gar nicht erst.
     Diese Regel ist der zweite Riegel: selbst wenn das Attribut auf anderem
     Weg an das <html> kaeme, bliebe kein Element verborgen. Kein Schalter der
     Seite kann das aufheben — die Systemeinstellung hat Vorrang. */
  html[data-reveal-js] [data-reveal]:not([data-sichtbar]){opacity:1 !important;transform:none !important}
}

/* --- Teil 2: aus style-hover / style-focus / style-before ----------------- */

/* Navigationslink im Kopf */
.h-nav:hover{color:var(--text);box-shadow:inset 0 -1px 0 var(--brand-light)}
/* Sprach-, Suche-, Farbschema-Schalter und der Kopieren-Knopf */
.h-chip:hover{border-color:var(--brand-light);color:var(--text)}
/* Akzentflaeche (Projekt besprechen, Bewerben, Absenden) */
.h-cta:hover{box-shadow:0 0 0 1px rgb(242 170 110 / 24%),0 6px 22px -8px rgb(242 170 110 / 45%)}
/* Umrandeter Zweitknopf */
.h-ghost:hover{border-color:var(--brand-light)}
/* Zeile einer Liste (Angebotsschritte, Stellenkoepfe) */
.h-row:hover{background-color:var(--surface)}
/* Karte (Betriebsmodelle, Kultur, Referenzen) */
.h-card:hover{border-color:var(--border-strong);translate:0 -3px}
/* Krume, die auf die Startseite zurueckfuehrt */
.h-crumb:hover{color:var(--text-muted)}
/* Sprungmarke im Inhaltsverzeichnis der Rechtsseite */
.h-toc:hover{color:var(--text)}

/* Das Inhaltsverzeichnis der Rechtsseite ist ein <details>, damit es am Handy
   zuklappen kann. Auf dem Desktop steht es offen und ohne Knopf da — dort
   uebernimmt die Ueberschrift daneben, genau wie in der Vorlage. */
.recht-klapp > summary{display:none}

/* style-before: der obere und untere Lichtsaum der Glaskarten */
.edge-glow::before{
  content:'';position:absolute;inset:0;padding:1.4px;
  background:linear-gradient(180deg,var(--edge) 0%,transparent 40%,transparent 60%,var(--edge) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}

/* style-focus der Eingabefelder */
.f-input:focus{
  border-color:var(--brand-light);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
  outline:none;
}

/* --- Teil 3: Bausteine, die die Vorlage nur als Inline-Stil kannte -------- */

/* Ecken einer Flaeche — vier gleiche Kreuze, in der Vorlage viermal je Karte.
   --eck faerbt sie um; ohne Angabe bleibt es bei var(--brand) wie bisher. Die
   Hauptaktion im Mobilmenue braucht das: auf der orangen Flaeche waere ein
   blaugraues Kreuz nicht zu sehen. */
.ecken{position:absolute;top:-4.5px;left:-4.5px;width:9px;height:9px;
  background:linear-gradient(var(--eck,var(--brand)),var(--eck,var(--brand))) center/1px 9px no-repeat,
             linear-gradient(var(--eck,var(--brand)),var(--eck,var(--brand))) center/9px 1px no-repeat}
.ecken.or{left:auto;right:-4.5px}
.ecken.ul{top:auto;bottom:-4.5px}
.ecken.ur{top:auto;bottom:-4.5px;left:auto;right:-4.5px}

/* Einblenden beim Scrollen. Ohne JavaScript bleibt alles sichtbar: verborgen
   wird erst, wenn site.js [data-reveal-js] an das <html> schreibt.

   Bewusst eine Animation statt einer Transition. Mehrere Karten und Zeilen
   tragen im Stil-Attribut der Vorlage ein eigenes transition (Hintergrund,
   Rahmen, translate beim Ueberfahren), und ein Inline-transition schlaegt jede
   Regel aus diesem Blatt. Gemessen auf der Startseite: 9 von 26 Reveal-
   Elementen hatten dadurch ueberhaupt keinen Uebergang auf opacity/transform —
   sie sprangen in einem Bild von 0 auf 1. Das war das "Ploppen der Boxen".
   Eine Animation kollidiert mit transition nicht, das Ueberfahren bleibt also
   unveraendert und der Sprung ist weg.

   Zwei Animationen statt einer, weil Deckkraft und Weg verschiedene Kurven
   brauchen: der Weg darf exponentiell auslaufen, die Deckkraft darf nicht so
   steil einsetzen (siehe Haltepunkt 900px). */
@keyframes lan-rv-o{from{opacity:0}}
@keyframes lan-rv-y{from{transform:translateY(var(--rv-weg))}}
html[data-reveal-js] [data-reveal]:not([data-sichtbar]){opacity:0;transform:translateY(var(--rv-weg))}
html[data-reveal-js] [data-reveal][data-sichtbar]{
  animation:lan-rv-o var(--rv-o-dauer) var(--rv-o-kurve) var(--rv-verzug,0s) backwards,
            lan-rv-y var(--rv-y-dauer) var(--rv-y-kurve) var(--rv-verzug,0s) backwards}

/* Zwei Merker ohne eigene Optik: sie tragen nur den Schriftgrad, und zwar
   erst im Haltepunkt bei 600px (siehe Teil 4). Auf dem Desktop aendern sie
   nichts — die Vorlage behaelt ihre Inline-Stile.
     .etikett  kleine Beschriftung in Schreibmaschinenschrift
               ("01 · Fundament", "ort: st. veit", "aufgaben")
     .leise    zweitrangiger Fliesstext (Zeichenzaehler, Feldhinweise) */

/* Sprungmarke — sichtbar erst bei Tastaturfokus.
   Verschoben wird sie ueber ihre eigene Hoehe (translate), nicht ueber einen
   festen rem-Wert: bei 200 % Systemschriftgrad war der Kasten hoeher als die
   4rem, um die er nach oben geschoben wurde, und stand als oranger Balken
   ueber der Wortmarke. */
.sprungmarke{position:fixed;left:.75rem;top:.75rem;z-index:99;padding:.75rem 1.25rem;border-radius:2px;
  background:var(--accent-fill);color:var(--on-accent);font-family:var(--fd);font-weight:600;
  text-decoration:none;translate:0 calc(-100% - 1.5rem);transition:translate .18s var(--ease)}
.sprungmarke:focus{translate:0 0;color:var(--on-accent)}

/* Kopfzeile */
.kopf{position:fixed;top:0;left:0;right:0;z-index:40;border-bottom:1px solid transparent;
  transition:background-color .22s var(--ease),border-color .22s var(--ease)}
.kopf[data-gescrollt="1"]{background-color:var(--glass);border-bottom-color:var(--border);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%)}
/* Die Kopfleiste ist fluid, nicht gestuft. Zwischen 901px (dort uebernimmt
   das Mobilmenue) und 1400px schrumpfen Abstaende, Schriftgrad und Innenrand
   mit der Breite mit — sonst ragte die Leiste genau in dem Bereich hinaus,
   in dem sie noch alle Eintraege zeigen soll. Gemessen: ab 901px passt sie. */
.kopf-reihe{display:flex;align-items:center;gap:clamp(.5rem, 1.1vw, 1.5rem);max-width:90rem;margin-inline:auto;
  padding:1.1rem clamp(1.25rem, 0.7rem + 2.6vw, 3rem)}
.kopf-nav{margin-inline-start:auto;display:flex;align-items:center;gap:clamp(.6rem, 1.25vw, 1.75rem);min-width:0}
.kopf-nav a{font-size:clamp(.8125rem, .35rem + .55vw, .9375rem)}
.kopf-werkzeuge{display:flex;align-items:center;gap:clamp(.35rem, .7vw, .75rem);flex:none}
.kopf-werkzeuge > .h-chip{padding-inline:clamp(.4rem, .55vw, .7rem)}
.kopf-werkzeuge > .h-cta{padding-inline:clamp(.65rem, 1.1vw, 1.1rem);
  font-size:clamp(.8125rem, .35rem + .55vw, .9375rem)}
.kopf-burger{display:none}

/* Mobilmenue — bis 900px der einzige Weg zur Navigation */
.mobilmenu{display:none}
.mobilmenu[hidden]{display:none}

/* Krumenleiste */
.krumen{display:flex;align-items:center;gap:.75rem;max-width:90rem;margin-inline:auto;
  padding:.5rem clamp(1.25rem, 0.7rem + 2.6vw, 3rem);
  font-family:var(--fm);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-subtle)}
.krumen-punkt{width:3px;height:3px;border-radius:999px;background:var(--text-subtle);flex:none}
.krumen-schiene{flex:1;height:1px;background:var(--border);margin-inline-start:.5rem;position:relative;overflow:hidden;min-width:2rem}
.krumen-balken{position:absolute;inset:0 auto 0 0;width:0%;background:var(--brand)}

/* Schnellsuche und Bewerbungsmodal */
.dialog[hidden]{display:none}
.dialog{position:fixed;inset:0;z-index:90;display:flex;justify-content:center;align-items:flex-start;
  padding:14vh 1.25rem 1.25rem}
/* Das Bewerbungsblatt sitzt senkrecht mittig. Bewusst ueber margin-block:auto
   und nicht ueber align-items:center: ist das Blatt hoeher als das Fenster,
   schneidet ein zentrierter Flex-Container oben ab — der Anfang des Formulars
   waere dann nicht mehr erreichbar, auch nicht durch Scrollen. Das
   auto-Margin zentriert nur, solange Platz da ist, und faellt sonst sauber
   an den oberen Rand zurueck.
   Die Schnellsuche behaelt ihren Platz oben: eine Befehlsleiste gehoert
   dorthin, wo das Tastenkuerzel sie erwarten laesst. */
#bewerbung-modal{align-items:center}
#bewerbung-modal .dialog-panel{margin-block:auto}
.dialog-schleier{position:absolute;inset:0;background:color-mix(in srgb, var(--bg) 74%, transparent);
  backdrop-filter:blur(6px) saturate(120%);-webkit-backdrop-filter:blur(6px) saturate(120%);
  animation:lan-pal-scrim .18s ease-out both;border:0}
.pal-treffer[hidden]{display:none}
.pal-gruppe[hidden]{display:none}
.pal-zeile{display:grid;grid-template-columns:1.75rem 1fr auto;align-items:center;gap:.75rem;width:100%;
  text-align:left;padding:.6rem .65rem;border-radius:2px;transition:background-color .12s var(--ease);background:transparent}
.pal-zeile[aria-selected="true"]{background:color-mix(in srgb, var(--brand) 22%, transparent)}
.pal-zeile[aria-selected="true"] .pal-label{color:var(--text)}

/* Aufklapper der Stellen.
   !important, weil das Element sein display:grid aus dem Stil-Attribut der
   Vorlage bekommt und ein Inline-Stil jede Klassenregel schlaegt. Ohne das
   standen alle Stellen dauerhaft offen: der Knopf schaltete hidden um, sichtbar
   aenderte sich nichts. Gemessen auf 390px hing die Karriereseite dadurch
   1054px zu lang durch. */
.job-panel[hidden]{display:none !important}

/* Ansichtsumschalter Klartext / JSON */
.ansicht-knopf{padding:.4rem .85rem;font-family:var(--fm);font-size:.6875rem;letter-spacing:.12em;
  text-transform:uppercase;transition:background-color .18s var(--ease),color .18s var(--ease);
  background:transparent;color:var(--text-muted)}
.ansicht-knopf[aria-pressed="true"]{background:var(--brand-deep);color:var(--text)}
.ansicht-pane[hidden]{display:none}

/* --- Teil 4: Mobilausbau. Genau zwei Haltepunkte. ------------------------- */

@media (max-width:900px){
  /* Gemessen: die Kopfleiste ist auf 390px 122px hoch, der feste Wert 6.5rem
     waren 104px. Jeder Ankersprung verschwand damit unter der Leiste — die
     Zeile "Angebot" und die halbe Ueberschrift dahinter. site.js schreibt die
     wirkliche Hoehe nach --kopf-hoehe; der Rueckfall deckt den Fall ohne
     JavaScript ab und ist absichtlich zu grosszuegig statt zu knapp. */
  html{scroll-padding-top:calc(var(--kopf-hoehe, 8rem) + 1rem)}

  /* Der Bildausschnitt sitzt am Desktop bei 60 % — dort steht die Person im
     Startseitenvideo im rechten Drittel, neben dem Text. Im Hochformat ist
     vom Bild aber nur ein schmaler Streifen zu sehen, und 60 % schiebt das
     Motiv aus dem Bild. Deshalb hier mittig. Gilt fuer Video und Standbild
     zugleich, beide lesen --hero-pos (siehe layout.php). */
  :root[data-seite="startseite"]{--hero-pos:center center}

  .kopf-reihe{gap:.75rem;padding:.75rem clamp(1rem, 0.6rem + 1.6vw, 1.5rem)}
  .kopf-nav,.kopf-werkzeuge{display:none}
  .kopf-burger{display:inline-flex;margin-inline-start:auto}

  /* Einblenden: am Telefon kuerzer im Weg, laenger in der Zeit.
     Gemessen am Desktopwert cubic-bezier(.16,1,.3,1): nach 10 % der Dauer
     stand die Deckkraft schon bei 49 %, nach 90ms also fast die halbe
     Bewegung. Auf 844px Hoehe scrollt der Daumen zwei Bildschirme in der
     Zeit, in der der Mauszeiger einen schafft — dieselbe Kurve wirkt hier
     deshalb wie ein Zucken.
       Weg  20px -> 10px: ein Zehntel der Zeilenhoehe statt einer halben.
       Deckkraft cubic-bezier(.33,.62,.4,1): nach 10 % der Dauer 20 % statt
         49 %. Der Anfang ist weich, das Ende laeuft weiter aus.
       Weg cubic-bezier(.25,1,.5,1) (ease-out-quart) ueber 1.02s: der lange
         exponentielle Auslauf bleibt, er faengt nur nicht mehr so hart an.
     Die Desktopwerte in :root bleiben unangetastet. */
  :root{
    --rv-weg:10px;
    --rv-o-dauer:.74s; --rv-o-kurve:cubic-bezier(.33,.62,.4,1);
    --rv-y-dauer:1.02s; --rv-y-kurve:cubic-bezier(.25,1,.5,1);
  }

  /* ---- Mobilmenue -------------------------------------------------------
     Ein Blatt, das unter der Kopfzeile ansetzt und bis zur unteren Kante
     laeuft. Drei Entscheidungen, jede gegen einen gemessenen Mangel:

     1. Deckend, nicht glasig. Vorher lag das Blatt bei 94 % Deckkraft ueber
        dem Neuralfeld und der Buehne; auf 390px las man "Individualsoftware
        aus Oesterreich" quer durch die Navigation. Die Grundflaeche ist jetzt
        --bg ohne Alpha, der Verlauf darueber besteht aus zwei ebenfalls
        deckenden Farben. Hinter dem Blatt ist nichts mehr zu sehen.
     2. Gegliedert statt aufgeteilt. Vorher standen vier gleich aussehende
        Eintraege oben und die Aktion unten, dazwischen 291px Nichts (auf der
        Karriereseite 349px). Jetzt tragen drei Gruppen — Navigation,
        Einstellungen, Aktion — je ein Mono-Etikett mit Schiene, wie die
        Krumenleiste es vormacht, und die Navigationszeilen wachsen mit
        flex-grow in die freie Hoehe hinein. Die Luecke ist damit nicht
        kaschiert, sondern aufgebraucht.
     3. Die Aktion bleibt unten in Daumenreichweite, aber sie steht nicht mehr
        allein: Etikett darueber, Passermarken an den Ecken, das Dreipunkt-
        Motiv rechts. Sie liest sich als Schluss des Blattes.

     Reicht die Hoehe nicht (200 % Systemschriftgrad), blaettert das Blatt.
     Im Querformat greift weiter unten ein eigener Satz Regeln. */
  .mobilmenu{display:flex;flex-direction:column;position:fixed;inset:auto 0 0 0;
    top:var(--kopf-kante,var(--kopf-hoehe,4.5rem));
    z-index:39;overflow-y:auto;overscroll-behavior:contain;
    background:var(--bg);
    background-image:linear-gradient(180deg,var(--bg-soft) 0%,var(--bg) 42%,var(--bg) 100%);
    border-top:1px solid var(--border-strong);
    padding:1.35rem clamp(1rem, 0.6rem + 1.6vw, 1.5rem) calc(1.5rem + env(safe-area-inset-bottom, 0px));
    animation:lan-mm-auf .42s var(--ease) both}
  .mobilmenu[hidden]{display:none}
  /* Waehrend des Auslaufs steht das Blatt noch, nimmt aber keine Beruehrung
     mehr an — sonst faengt es einen Tipp auf den Inhalt darunter ab. */
  .mobilmenu[data-zu]{animation:lan-mm-zu .24s var(--ease) both;pointer-events:none}
  /* Die beiden Passermarken sitzen INNEN in den oberen Ecken. Ueber die Kante
     hinaus wie bei den Glaskarten geht hier nicht: das Blatt blaettert
     (overflow-y), alles mit negativem Versatz wird abgeschnitten. */
  .mobilmenu .mm-eck-tl,.mobilmenu .mm-eck-tr{top:5px;left:5px;opacity:.6}
  .mobilmenu .mm-eck-tr{left:auto;right:5px}

  /* Etikett einer Gruppe: Wort, Haarlinie bis zum Rand, optional eine Zahl.
     Dieselbe Bauform wie die Krumenleiste mit ihrer .krumen-schiene. */
  .mm-etikett{display:flex;align-items:center;gap:.75rem;margin-block-end:.35rem;
    font-family:var(--fm);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--text-subtle)}
  .mm-schiene{flex:1;height:1px;background:var(--border);min-width:1rem}
  .mm-zahl{color:var(--brand-light)}

  /* Navigation. Der Block nimmt die freie Hoehe (flex:1), die Zeilen darin
     teilen sie unter sich auf — gedeckelt, damit auf einem sehr hohen Fenster
     keine Zeile zum Balken wird. */
  /* flex:1 0 auto, nicht 1 1 auto. Mit Schrumpfen schob sich bei 200 %
     Systemschriftgrad der Fussbereich in die Navigation hinein: der Block gab
     unter dem Druck nach, seine Zeilen ragten heraus und lagen ueber
     "Einstellungen" und der Aktion. Ohne Schrumpfen behaelt er seine
     Inhaltshoehe, und das Blatt blaettert — so, wie es soll. */
  .mm-nav{flex:1 0 auto;display:flex;flex-direction:column}
  .mm-liste{flex:1 0 auto;display:flex;flex-direction:column}
  /* max-height deckelt, wie hoch eine Zeile werden darf, wenn sie sich die
     freie Hoehe teilt. 11rem ist nicht willkuerlich: die Karriereseite hat
     nur drei Ziele, und bei 8.5rem blieben darunter 148px uebrig — wieder ein
     Loch. Mit 11rem fuellen auch drei Zeilen die Flaeche aus. */
  .mobilmenu .mm-ziel{flex:1 0 auto;min-height:4rem;max-height:11rem;
    display:flex;align-items:center;gap:1rem;
    padding-block:.7rem;border-block-end:1px solid var(--border);
    text-decoration:none;color:inherit;
    animation:lan-mm-zeile .5s var(--ease) both;animation-delay:calc(60ms + var(--i,0) * 45ms)}
  .mobilmenu[data-zu] .mm-ziel{animation:none}
  .mm-ziel:first-child{border-block-start:1px solid var(--border)}
  .mm-nr{flex:none;width:1.75rem;font-family:var(--fm);font-size:.75rem;letter-spacing:.06em;
    color:var(--text-subtle);align-self:center}
  .mm-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}
  .mm-wort{font-family:var(--fd);font-size:1.25rem;font-weight:600;line-height:1.2;
    color:var(--text-muted);transition:color .18s var(--ease)}
  .mm-hinweis{font-size:.875rem;line-height:1.3;color:var(--text-subtle)}
  /* Bei 200 % Systemschriftgrad ist "Betriebsmodelle" ein 315px breites Wort
     in einer 197px breiten Spalte — gemessen lief das Blatt dann seitlich
     ueber. Wie bei den Ueberschriften weiter unten hilft nur "anywhere":
     "break-word" wirkt nicht auf die Mindestbreite eines Flex-Kastens. */
  .mm-wort,.mm-hinweis,.mm-etikett,.mm-cta{overflow-wrap:anywhere}
  /* Der Marker rechts: ein Haken, der beim aktiven Ziel zum gefuellten Punkt
     der Marke wird — dasselbe Zeichen wie unter dem aktiven Eintrag der
     Kopfleiste. */
  .mm-marke{flex:none;width:9px;height:9px;border-radius:999px;
    box-shadow:inset 0 0 0 1px var(--border-strong);transition:box-shadow .18s var(--ease)}
  .mm-ziel[aria-current="page"] .mm-wort{color:var(--text)}
  .mm-ziel[aria-current="page"] .mm-marke{background:var(--accent-fill);box-shadow:none}
  .mm-ziel:hover .mm-wort,.mm-ziel:focus-visible .mm-wort{color:var(--text)}
  .mm-ziel:hover .mm-marke{box-shadow:inset 0 0 0 1px var(--brand-light)}

  /* Fussbereich: Einstellungen und Aktion, beide mit eigenem Etikett. */
  .mm-fuss{flex:none;display:flex;flex-direction:column;gap:1.1rem;padding-block-start:1.25rem}
  .mm-gruppe{display:flex;flex-direction:column;gap:.55rem}
  /* Drei gleich breite Schalter statt drei Reste am Fuss. Die Mindestbreite
     ist in rem angegeben: bei 200 % Systemschriftgrad sind 6.5rem 208px, die
     Reihe faellt dann von selbst auf eine Spalte. */
  .mm-chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(6.5rem,1fr));gap:.5rem}
  .mobilmenu .mm-chip{min-height:2.75rem;justify-content:center}

  /* Hauptaktion. Akzentflaeche wie ueberall auf der Seite, aber mit den
     Passermarken der Seite an den Ecken und dem Dreipunkt-Motiv rechts. */
  .mobilmenu .mm-cta{position:relative;display:flex;align-items:center;justify-content:space-between;gap:.75rem;
    min-height:3.5rem;padding:.85rem 1.2rem;border-radius:2px;
    background:var(--accent-fill);color:var(--on-accent);box-shadow:var(--inset-hi);
    font-family:var(--fd);font-size:1.0625rem;font-weight:600;text-decoration:none;
    --eck:var(--on-accent)}
  /* Ohne Passermarken: auf der gefuellten Akzentflaeche wirkten die vier
     Kreuze wie Fremdkoerper. Die drei Punkte tragen das Motiv allein. */
  .mm-punkte{display:flex;align-items:center;gap:.3rem;flex:none}
  .mm-punkte i{width:5px;height:5px;border-radius:999px;background:currentColor;opacity:.3}
  .mm-punkte i:nth-child(2){opacity:.6}
  .mm-punkte i:nth-child(3){opacity:1}

  /* Bei offenem Menue gehoert die Kopfzeile zum Blatt: deckend, ohne Glas.
     Die Krumenleiste faellt weg — "Start · 01/08" konkurriert sonst mit dem
     Etikett "Navigation" zwei Zeilen darunter. Ihr Wegfall verkuerzt die
     Kopfzeile, deshalb misst site.js --kopf-hoehe erst danach. */
  html[data-menu-offen] .kopf,
  html[data-menu-offen] .kopf[data-gescrollt="1"]{background-color:var(--bg);
    border-bottom-color:var(--border-strong);
    backdrop-filter:none;-webkit-backdrop-filter:none}
  html[data-menu-offen] .kopf-krumen{display:none}

  /* Querformat und flache Fenster (844x390 und aehnlich). Untereinander
     gestapelt braeuchte das Blatt dort 434px bei 321px Platz und muesste
     blaettern — die Hauptaktion laege unter der Kante. Zwei Spalten nutzen
     die Breite, die im Querformat ohnehin da ist: links die Ziele, rechts
     Einstellungen und Aktion. Es passt ohne Blaettern. */
  @media (max-height:560px) and (min-width:600px){
    .mobilmenu{flex-direction:row;align-items:stretch;gap:1.5rem;padding-block:1rem}
    .mm-nav{flex:1 1 auto}
    .mobilmenu .mm-ziel{min-height:2.75rem;max-height:none;padding-block:.4rem}
    .mm-hinweis{display:none}
    .mm-wort{font-size:1.125rem}
    /* Zentriert, nicht gespreizt. Gemessen: mit space-between standen zwischen
       dem letzten Schalter und der Aktion 154px Leere, mit flex-end lag
       dieselbe Leere ueber "Einstellungen". Zentriert bleibt zwischen den
       beiden Gruppen der eine Abstand von 1.1rem, und der Rest verteilt sich
       je zur Haelfte nach oben und unten — sichtbar wird keine der beiden. */
    .mm-fuss{flex:0 0 clamp(17rem,34%,22rem);justify-content:center;
      padding-block-start:0;padding-inline-start:1.5rem;border-inline-start:1px solid var(--border)}
    /* In der schmalen Spalte fielen die drei Schalter sonst auf 2+1 um. Feste
       drei Spalten und ein engerer Innenrand halten sie in einer Reihe; das
       !important ist noetig, weil der Innenrand aus dem Stil-Attribut kommt. */
    .mm-chips{grid-template-columns:repeat(3,1fr)}
    .mobilmenu .mm-chip{padding-inline:.4rem !important}
    .mobilmenu .mm-cta{font-size:1rem;padding-inline:1rem}
  }
  /* Sehr flach und schmal zugleich: dann bleibt nur, kompakt zu stapeln und
     zu blaettern. Nichts wird abgeschnitten. */
  @media (max-height:560px) and (max-width:599px){
    .mobilmenu .mm-ziel{min-height:2.75rem;max-height:none}
    .mm-hinweis{display:none}
  }

  /* Tap-Ziele. Unter 900px ist praktisch jedes Geraet ein Finger-Geraet, also
     gilt die 44px-Regel hier breitenbasiert — nicht erst, wenn der Browser
     einen groben Zeiger meldet. Fliesstext-Verweise bleiben unberuehrt: ein
     44px hoher Verweis mitten im Satz zerreisst den Absatz. */
  .mobilmenu a,.mobilmenu button,
  .fuss nav a,.recht-toc a,
  .ansicht-knopf,.pal-zeile,
  .h-chip,.h-cta,.h-ghost,.kopf-burger,
  [data-aufklapper],[data-bewerbung],[data-json-kopieren],
  .dialog button,.dialog a{min-height:44px}
  .fuss nav a,.recht-toc a{display:inline-flex;align-items:center}
  .kopf-burger,.h-chip{min-width:44px}
  /* "office@lantia.at" in der Kontaktliste war 110x25px. Es ist der zweite
     Weg zur Kontaktaufnahme neben dem Formular und steht nicht mitten im
     Satz — es darf die ganze Zeile hoch sein. */
  .kontakt-zeilen a{min-height:44px;display:inline-flex;align-items:center}
  /* Wortmarke im Kopf und in der Fusszeile ist ein Verweis auf den Anfang. */
  .kopf-marke,.fuss-marke{min-height:44px;min-width:44px}
  /* Die Krume ist der einzige Verweis in der Leiste — sie bekommt die ganze
     Zeilenhoehe, statt als 15px hohes Ziel dazustehen. */
  .krumen{padding-block:0}
  .krumen a{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}

  /* Kleine Beschriftungen anheben. 11px in Grossbuchstaben mit .14em Laufweite
     liest sich am Telefon als Muster, nicht als Wort. 12.5px bei engerer
     Laufweite braucht dieselbe Zeilenbreite und ist wieder ein Wort.
     !important, weil die Vorlagen den Grad im Stil-Attribut tragen. */
  .etikett{font-size:.78125rem !important;letter-spacing:.09em !important}
  /* Der Umschalter Klartext / stellen.json ist ein Bedienelement mit Wort,
     kein Etikett — er bekommt denselben Grad. */
  .ansicht-knopf{font-size:.78125rem;letter-spacing:.08em}
  /* Zweitrangiger Text erreicht die 15px-Untergrenze fuer Fliesstext. */
  .leise{font-size:.9375rem !important}

  /* Nachgezogen: die Schnellsuche entstand parallel zum Mobilausbau und blieb
     bei 10px. Dieselbe Untergrenze gilt auch dort — die Palette ist am Telefon
     ueber die Tastatur ebenso erreichbar wie am Rechner. */
  .pal-gruppe,
  .pal-label{font-size:.78125rem !important;letter-spacing:.08em !important}

  /* Grosser Systemschriftgrad: die Ueberschriften haben rem-basierte
     Mindestwerte, die mitwachsen. Bei 200 % ragte "Softwareentwicklung." bis
     x=429 hinaus, das Fenster ist 390 breit.
     Bewusst "anywhere" und nicht "break-word": nur "anywhere" wirkt auch auf
     die Mindestbreite eines Kastens. Die Ueberschrift steht in einer Flex-
     Spalte und war deshalb so breit wie ihr laengstes Wort — umbrechen allein
     haette daran nichts geaendert.
     Bei normalem Schriftgrad passt jedes Wort in die Zeile, dort aendert die
     Regel also nichts. */
  h1,h2,h3,h4,p,li,dd,dt,figcaption{overflow-wrap:anywhere}
  /* Dasselbe fuer die Schaltflaechen: "Initiativbewerbung" ist bei 200 % ein
     300px breites Wort und sprengte die Reihe. */
  .h-cta,.h-ghost,.h-chip,.ansicht-knopf{overflow-wrap:anywhere;max-width:100%}

  /* Krumenleiste: der Fortschritt bleibt, die Zwischenstationen entfallen.
     Der Schriftgrad steigt statt zu sinken — gemessen standen hier 10px, auf
     600px abwaerts sogar 9px. Das ist am ausgestreckten Arm nicht mehr zu
     lesen. 12px bei engerer Laufweite braucht dieselbe Zeilenbreite. */
  .krumen{padding:.4rem clamp(1rem, 0.6rem + 1.6vw, 1.5rem);gap:.5rem;
    font-size:.75rem;letter-spacing:.1em}
  .krumen .krumen-optional{display:none}

  /* Abschnitte duerfen nicht mehr bildschirmhoch sein, sonst entsteht Leere. */
  main > section{min-height:0 !important;padding-left:clamp(1rem, 0.6rem + 1.6vw, 1.5rem) !important;
    padding-right:clamp(1rem, 0.6rem + 1.6vw, 1.5rem) !important;
    padding-top:4.5rem !important;padding-bottom:4.5rem !important}
  main > section#start{padding-top:7.5rem !important;min-height:auto !important}

  /* Die halbseitigen Spalten werden ganze. */
  .spalte-halb{max-width:100% !important;min-width:0 !important}
  .rechts-buendig{justify-content:flex-start !important}

  /* Aufklapper: der Einzug von 8.25rem passt auf einem Telefon nicht. */
  .job-panel{padding-left:1.25rem !important;padding-right:1.25rem !important}
  .job-kopf{grid-template-columns:2.25rem 1fr auto !important;gap:.75rem !important;padding:1.1rem !important}

  /* Rechtsseite: Inhaltsverzeichnis wandert ueber den Text. Gemessen war es
     dabei 787px hoch — anderthalb Bildschirme Verzeichnis, bevor das erste
     Wort kommt. Zwei Spalten und engere Zeilen bringen es auf rund 330px,
     ohne dass ein Eintrag verschwindet. */
  .recht-haupt{gap:2rem !important;padding-top:7rem !important;
    padding-left:clamp(1rem, 0.6rem + 1.6vw, 1.5rem) !important;
    padding-right:clamp(1rem, 0.6rem + 1.6vw, 1.5rem) !important}
  /* Die Abschnitte tragen im Markup scroll-margin-top:9rem fuer den Desktop.
     Zusammen mit dem scroll-padding der Seite ergaben das 282px Versatz —
     gemessen 160px leere Flaeche unter der Kopfleiste nach jedem Sprung ins
     Inhaltsverzeichnis. Hier reicht das scroll-padding allein. */
  .recht-haupt [id]{scroll-margin-top:0 !important}
  .recht-toc{position:static !important;flex:1 1 100% !important;max-height:none !important;overflow:visible !important}
  .recht-toc nav{flex-direction:column !important;gap:1.25rem !important}
  .recht-toc nav ul{gap:0 !important}
  /* 44px Trefferflaeche kommt aus der Zeilenhoehe, nicht aus Abstaenden —
     so bleibt die Liste kompakt und trotzdem mit dem Daumen bedienbar. */
  .recht-toc a{min-height:44px;display:flex !important;align-items:center;font-size:.9375rem}
  /* Der Aufklapper. Zu bleibt er durch site.js — ohne JavaScript steht das
     Verzeichnis offen da, so wie bisher. Kein Rueckschritt, nur kein Gewinn. */
  .recht-toc-titel{display:none}
  .recht-klapp > summary{display:flex;align-items:center;gap:.6rem;min-height:44px;
    cursor:pointer;list-style:none;
    font-family:var(--fm);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
    color:var(--text-muted)}
  .recht-klapp > summary::-webkit-details-marker{display:none}
  .recht-klapp > summary::after{content:'+';margin-inline-start:auto;
    font-family:var(--fm);font-size:1rem;color:var(--brand-light)}
  .recht-klapp[open] > summary::after{content:'−'}
  .recht-klapp:not([open]){border-bottom:1px solid var(--border)}

  .fuss{padding:3rem clamp(1rem, 0.6rem + 1.6vw, 1.5rem) 2rem !important}

  /* Die Buehne im Hintergrund bleibt ganzflaechig — der wandernde Rahmen
     schneidet auf schmalen Geraeten sonst den halben Bildschirm weg. */
  .buehne{clip-path:none !important;transform:none !important}
  .rahmen{inset:0 !important}
  .rahmen [data-frame-label]{display:none}

  .dialog{padding:6vh 1rem 1rem}
}

@media (max-width:600px){
  html body{font-size:1rem}
  .kopf-reihe{padding:.6rem 1rem}
  main > section{padding-top:3.5rem !important;padding-bottom:3.5rem !important}
  main > section#start{padding-top:6.5rem !important}
  .dl-zeile{grid-template-columns:1fr !important;gap:.3rem !important}
  .fuss-gitter{gap:2rem !important}
  .dialog{padding:0;align-items:stretch}
  .dialog-panel{max-width:none !important;min-height:100svh;border:0 !important}
  .job-panel{padding-left:1rem !important;padding-right:1rem !important}
  .json-gitter{grid-template-columns:2rem 1fr !important;font-size:.75rem !important}


  /* Die dritte Angabe im Kopf des Bewerbungsdialogs ("Schritt 01 / 01") sagt
     bei einem einzigen Schritt nichts und kostet die Zeile. */
  .dialog-panel .schritt-zaehler{display:none}
}

/* Auf Touchgeraeten muss jedes Ziel mindestens 44x44px gross sein. */
@media (hover:none),(pointer:coarse){
  .kopf-werkzeuge > *,.kopf-burger,.kopf-nav a,
  .mobilmenu a,.mobilmenu button,
  .ansicht-knopf,.pal-zeile,.h-chip,.h-cta,.h-ghost,
  .fuss a,.recht-toc a{min-height:44px}
  .kopf-nav a,.fuss a,.recht-toc a{display:inline-flex;align-items:center}
  .kopf-werkzeuge > *{min-width:44px}
  .ansicht-knopf{min-width:44px;padding-inline:1rem}

  /* Kein Warten auf den Doppeltipp: touch-action:manipulation nimmt aelteren
     Browsern die 300ms Verzoegerung vor dem Klick. Der Meta-Viewport allein
     genuegt in Safari nicht immer. */
  a,button,summary,label[for],.pal-zeile{touch-action:manipulation}

  /* Auf Touch bleibt ein :hover nach dem Tippen haengen. Eine Karte, die
     danach 3px hochgeschoben stehenbleibt, sieht nach Fehler aus. Farbe und
     Rahmen duerfen bleiben — sie zeigen, was gerade beruehrt wurde. */
  .h-card:hover{translate:none}
}