/* ======================================================================
   SYLACON – Zeichenblatt, Fassung „Bento"
   Blau bleibt der Kopfleiste, dem Logo und den Kacheln. Zeichnungsrahmen,
   Flaeche und Schriftfeld liegen im selben warmen Hellgrau (#E6E3DD); der Rahmen ist
   dadurch keine Leiste mehr, sondern eine Zeichnung auf dem Blatt.
   Jede Kachel ist ein blaues Feld auf dem Blatt, ohne Fassung,
   beschriftet im Blattgrau (--hell-auf-blau). Das Aufklappblatt traegt
   keine Fassung: es ist das Blatt selbst.
   Beim Aufklappen faehrt darunter das Blatt in der Flaechenfarbe heraus,
   allein von der orangen Kante gefasst.
   ====================================================================== */

:root{
  --blau:#1D3389;
  --flaeche:#E6E3DD;     /* Hauptflaeche: warmes Hellgrau (Text 11,0:1, Text leise 6,4:1,
                            Blau 8,7:1). Seit 07.11.2026, vorher Blattgrau #A7ABB2.
                            Auch Hintergrund der Roboter- und Achsen-Videos. */
  --hell-auf-blau:#A7ABB2; /* helle Schrift auf Blau: Kacheln, Kopfleiste, Hinweisleiste,
                            Fusszeile (auf #1D3389 4,8:1) - statt Weiss, das zu hart stand.
                            Bewusst getrennt von --flaeche, Wert unveraendert. */
  --flaeche-linie:#B3AEA4;  /* Linien und Kanten auf der Flaeche (1,7:1 wie zuvor #7E8289 auf #A7ABB2) */
  --orange-dunkel:#965605;  /* Orange fuer Text auf heller Flaeche: Verweise (4,5:1 auf #E6E3DD) */
  --grau-dunkel:#2E333B;    /* Zeichnungsrahmen, Kachelschrift, Feld Rechtliches */
  --blau-dunkel:#121F5A;    /* Fassung der Kacheln und Bilder: tiefer als das Kachelblau */
  --orange:#DE7D0F;         /* Logo-Orange: Akzente auf Blau */
  --papier:#FCFBF8;
  --raster:#E7E3DA;
  --linie:#BDB7AC;
  --text:#292B33;           /* Lauftext; auch Masslinie unter den Ueberschriften */
  --text-leise:#4F4F4F;
  --dunkel:#1F1F22;
  --teilung:40px;
  --kachel:#1D3389;      /* Kachelflaeche: Blau der Kopfleiste (Blattgrau darauf 4,8:1) */
  --blatt:#E6E3DD;       /* ausgefahrenes Blatt: dieselbe Farbe wie die Zeichenflaeche */
  --weiss-linie:rgba(255,255,255,0.35);
  --weiss-leise:rgba(255,255,255,0.80);
}

@font-face{font-family:Arimo;src:url(schrift/arimo-latin-normal.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:Arimo;src:url(schrift/arimo-latin-italic.woff2) format('woff2');font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(schrift/ibm-plex-mono-latin-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(schrift/ibm-plex-mono-latin-600-normal.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Arimo,Arial,Helvetica,sans-serif;
  color:var(--text);
  background-color:var(--flaeche);
}
.blatt{min-height:100%;display:flex;flex-direction:column}
main{flex:1 1 auto;overflow-x:clip}
a{color:var(--blau);text-decoration:none}
img{max-width:100%}

/* ---------- Sprunglink ---------- */
.sprung{position:absolute;left:-9999px;top:0;z-index:100;background:var(--papier);color:var(--blau);
        border:1px solid var(--blau);padding:12px 20px;font-weight:600;font-size:17px}
.sprung:focus{left:16px;top:16px}

/* ---------- Fokus ---------- */
a:focus-visible,button:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.kopf-leiste a:focus-visible,.kopf-leiste button:focus-visible,
.kachel a:focus-visible,.kachel button:focus-visible,
.feld a:focus-visible,.fuss-links a:focus-visible{outline-color:#ffffff}
.kachel-blatt a:focus-visible,.kachel-blatt button:focus-visible{outline-color:var(--orange)}

/* ---------- Typografie ---------- */
h1{margin:0;font-size:36px;line-height:1.15;font-weight:700;letter-spacing:-0.01em}
h2{margin:0;font-size:30px;line-height:1.2;font-weight:700;color:var(--blau)}
h3{margin:0;font-size:21px;line-height:1.3;font-weight:700;color:var(--blau)}
p{margin:0;font-size:17px;line-height:1.6}
.klein{font-size:15px;color:var(--text-leise)}
.label{font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;font-size:12px;font-weight:600;
       letter-spacing:0.14em;text-transform:uppercase;color:var(--text-leise)}
.wrap{width:min(1240px, 100% - 48px);margin:0 auto}   /* 1240 = 31 x 40 */
.pf{width:16px;height:12px;flex:none;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ======================================================================
   Blauer Bereich: Kopfleiste + Hero + Kachelraster
   ====================================================================== */
.blaubereich{
  background-color:var(--flaeche);
  color:var(--text);
  padding-top:10px;
  display:flex;flex-direction:column;
  min-height:100svh;              /* svh: schneidet auf dem Handy nicht unter den Browserleisten ab */
}
@supports not (height:100svh){.blaubereich{min-height:100vh}}

/* ---------- Kopfleiste ---------- */
.sticky{position:sticky;top:0;z-index:50}
/* Die Kopfleiste steht als Feld auf dem Blatt: Inhaltsbreite wie das
   Kachelraster, gleiche Rundung, gleiche orange Fassung. */
.kopf-leiste{position:relative;width:min(1240px, 100% - 48px);margin:0 auto;
             border:2px solid var(--blau-dunkel);border-radius:12px;background:var(--blau)}
.kopf-innen{width:100%;padding:18px 32px;display:flex;align-items:center;justify-content:space-between;gap:48px}
.logo img{height:58px;width:auto;display:block}

/* UMSCHALTUNG LOGO – Klasse am <header> steuert Logo und Leistenfarbe.
   weiss auf Blau = <header class="seitenkopf logo-weiss">
   blau auf hell  = <header class="seitenkopf">                         */
.seitenkopf .logo .w{display:none}
.seitenkopf .logo .b{display:block}
.seitenkopf.logo-weiss .logo .w{display:block}
.seitenkopf.logo-weiss .logo .b{display:none}
.seitenkopf .kopf-leiste{background:var(--papier)}
.seitenkopf .nav a,.seitenkopf .tel{color:var(--blau)}
.seitenkopf .burger{color:var(--blau);border-color:var(--blau)}
.seitenkopf.logo-weiss .kopf-leiste{background:var(--blau)}
.seitenkopf.logo-weiss .nav a,.seitenkopf.logo-weiss .tel{color:var(--hell-auf-blau)}
.seitenkopf.logo-weiss .burger{color:var(--hell-auf-blau);border-color:rgba(167,171,178,0.6)}

.nav{display:flex;align-items:center;gap:36px}
.nav-liste{display:flex;align-items:center;gap:28px}
.nav a{font-size:17px;font-weight:600;padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--orange)}
.nav a.on{border-bottom:3px solid var(--orange)}
.tel{display:inline-flex;align-items:center;gap:10px;height:44px;white-space:nowrap;font-weight:600;font-size:17px;border-bottom:2px solid transparent}
.tel:hover{border-bottom-color:var(--orange)}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:transparent;border:1px solid;cursor:pointer}

@media (max-width:699px){
  .kopf-innen{padding:14px 18px;gap:16px}
  .logo img{height:44px}
  .burger{display:inline-flex}
  .nav{display:flex;flex-direction:column;align-items:stretch;gap:0;background:var(--blau);
       padding:8px 24px 20px 24px}
  .js .nav{position:absolute;left:-2px;right:-2px;top:100%;
           border:2px solid var(--blau-dunkel);border-top:0;border-radius:0 0 12px 12px}
  /* Steht das Menue offen, laeuft die Kopfleiste unten gerade in es hinein. */
  .kopf-leiste:has(.nav:not([hidden])){border-bottom-left-radius:0;border-bottom-right-radius:0}
  .nav-liste{flex-direction:column;align-items:stretch;gap:0}
  .nav a{padding:14px 0;border-bottom:1px solid rgba(255,255,255,0.25)}
  .nav a.on{border-bottom:3px solid var(--orange)}
  .tel{height:auto;padding:16px 0}
  .js .nav[hidden]{display:none}
}
@media (min-width:700px){.nav[hidden]{display:flex}}

/* ---------- Aufklappfeld im Hauptmenue ----------
   "Leistungen" ist kein Verweis, sondern das Schild ueber zwei Auswahlen.
   Damit traegt keine Seite zwei Namen im selben Menue. Breit: Feld klappt
   unter der Taste auf. Schmal (Burger): die beiden Auswahlen stehen
   eingerueckt immer sichtbar, ein Aufklappen im Aufklappen waere ein
   Klick zu viel. */
.nav-feld{position:relative;display:flex;align-items:center}
.nav-taste{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 0;
           font:inherit;font-size:17px;font-weight:600;color:inherit;
           background:transparent;border:0;border-bottom:2px solid transparent;cursor:pointer}
.nav-taste:hover{border-bottom-color:var(--orange)}
.nav-taste.on{border-bottom:3px solid var(--orange)}
.nav-taste:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.nav-pfeil{width:10px;height:6px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;
           stroke-linecap:round;stroke-linejoin:round;transition:transform .15s ease}
.nav-taste[aria-expanded="true"] .nav-pfeil{transform:rotate(180deg)}
.untermenue{display:none}
@media (min-width:700px){
  .untermenue{position:absolute;top:100%;left:-18px;min-width:230px;z-index:70;
              flex-direction:column;padding:6px 0;
              background:#15245C;border:1px solid var(--weiss-linie);
              border-top:2px solid var(--orange);box-shadow:0 6px 18px rgba(0,0,0,0.25)}
  .nav-taste[aria-expanded="true"] + .untermenue{display:flex}
  .untermenue a{display:block;padding:10px 18px;border-bottom:0;color:var(--hell-auf-blau)}
  .untermenue a:hover{border-bottom:0;background:rgba(255,255,255,0.10)}
  .untermenue a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--orange)}
}
@media (max-width:699px){
  .nav-feld{display:block}
  .nav-taste{width:100%;justify-content:space-between;padding:14px 0;
             border-bottom:1px solid rgba(255,255,255,0.25)}
  .nav-taste .nav-pfeil{display:none}
  .untermenue{display:block}
  .untermenue a{display:block;padding:14px 0 14px 18px;
                border-bottom:1px solid rgba(255,255,255,0.25)}
}

/* ---------- Hero ---------- */
.hero{padding:clamp(28px,4vw,52px) 0 clamp(24px,3vw,40px) 0}
.hero .reihe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.hero .inhalt{display:flex;flex-direction:column;gap:14px}
.hero .label{color:var(--text-leise)}
.hero h1{color:var(--blau);font-size:clamp(28px,3.6vw,38px)}
.hero p{font-size:clamp(17px,2vw,20px);line-height:1.45;color:var(--text)}
.hero figure{border:2px solid var(--blau-dunkel);border-radius:12px;overflow:hidden;line-height:0}
.hero img{display:block;width:100%;height:clamp(160px,20vw,240px);object-fit:cover}
@media (max-width:860px){
  .hero .reihe{grid-template-columns:minmax(0,1fr);gap:24px}
  .hero img{height:150px}
}

/* ======================================================================
   Kachelraster (Bento)
   ====================================================================== */
.bento{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--teilung);
  /* align-items bleibt auf stretch: alle Kacheln einer Reihe sind gleich hoch */
  padding-bottom:24px;
}
.kachel{
  display:flex;flex-direction:column;
  border:0;
  background:var(--kachel);      /* deckend, kein Durchscheinen */
  border-radius:12px;            /* wie die Kopfbilder */
  overflow:hidden;               /* haelt Oberkante und Hover-Flaeche in der Rundung */
  min-width:0;
  min-height:240px;   /* 6 x 40 */
}
.kachel>.kopfteil{display:flex;flex-direction:column;gap:8px;padding:18px 18px 14px 18px}
.kachel .nr{font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;font-size:12px;font-weight:600;
            letter-spacing:0.14em;color:var(--hell-auf-blau)}   /* voll deckend: mit 0,78 nur 3,5:1 */
/* Kopfzeile der Kachel: Positionsnummer links, Symbol rechts.
   Reine Linienzeichnung, einheitliche Strichstaerke - wie die Symbole im Flyer. */
.kzeile{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.ksym{width:38px;height:38px;flex:none;margin-top:-6px;
      stroke:rgba(167,171,178,0.88);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.kachel h2,.kachel h3{font-size:19px;line-height:1.25;color:var(--hell-auf-blau);margin:0}
.kachel .anriss{font-size:15px;line-height:1.5;color:var(--hell-auf-blau);margin:0}
.kachel .mehr{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  min-height:48px;padding:0 18px;margin-top:auto;
  background:transparent;border:0;border-top:1px solid var(--weiss-linie);
  font:inherit;font-size:15px;font-weight:600;color:var(--orange);cursor:pointer;text-align:left;
}
.kachel .mehr:hover{background:rgba(255,255,255,0.10)}
/* Fuehrt die Kachel auf eine Unterseite, ist die ganze Flaeche anklickbar. */
.kachel{position:relative}
a.mehr{text-decoration:none}
a.mehr::after{content:"";position:absolute;inset:0}
a.mehr .pf{stroke:var(--orange);width:18px;height:13px}
.kachel .mehr .zeichen{width:16px;height:16px;flex:none;stroke:var(--orange);stroke-width:2;fill:none;stroke-linecap:round}
.kachel .mehr[aria-expanded="true"] .zeichen .senk{display:none}

/* Das ausgefahrene Blatt */
.kachel-blatt{
  background-color:var(--blatt);color:var(--text);
  border:0;
  border-radius:12px;            /* wie die Kachel, aus der es faehrt */
  padding:24px;
  grid-column:1 / -1;
}
.kachel-blatt>p,.kachel-blatt>figure{max-width:70ch}

/* Fliesstext in den Kachel-Blaettern: volle Blattbreite, Satz fuer Satz */
.kachel-blatt>p.fliess{max-width:none}
.kachel-blatt>*+*{margin-top:16px}
.kachel-blatt h3{font-size:17px;margin-bottom:8px}
.kachel-blatt .g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
@media (max-width:860px){.kachel-blatt .g3{grid-template-columns:minmax(0,1fr);gap:20px}}
.kachel-blatt .liste li{padding:10px 0 10px 22px}
.kachel-blatt .liste li::before{top:17px}
/* Laufende Nummern in den Blaettern der Leistungsseite. Wo eine Nummer
   steht, entfaellt das Dreieck — zwei Aufzaehlungszeichen an derselben
   Stelle waeren eines zu viel. */
.liste.nummern li{padding-left:40px}
.liste.nummern li::before{display:none}
.liste.nummern li>span{position:absolute;left:0;top:11px;
   font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;
   font-size:13px;font-weight:600;color:var(--blau)}
.bausteinliste li{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.bausteinliste strong{color:var(--blau);min-width:16em}
.bausteinliste span{color:var(--text-leise)}
.knopfzeile{display:flex;flex-wrap:wrap;gap:12px}
/* Weiterfuehrende Verweise - die dritte Ebene */
.kachel-blatt>p.weiter{display:flex;flex-wrap:wrap;gap:8px 28px;padding-top:12px;border-top:1px solid var(--flaeche-linie);max-width:none}
.kachel-blatt p{font-size:17px}
.kachel-blatt a{color:var(--orange-dunkel)}
.kachel-blatt p a:not(.btn){text-decoration:underline;text-underline-offset:3px}
.kachel-blatt p a:not(.btn):hover{text-decoration-thickness:2px}
.kachel-blatt>*+*{margin-top:16px}

/* Kachelgroessen */
/* Einheitliche Kachelgroesse: vier je Reihe */
.kachel{grid-column:span 3}
@media (max-width:1080px){.kachel{grid-column:span 6}}
@media (max-width:700px){.kachel{grid-column:span 12}}
/* Auftritt beim Laden: nur die Felder blenden auf, von 0 s bis 0,8 s -
   nur die Deckkraft, keine Bewegung. Das Kopfbild steht von Anfang an da.
   KEIN Vorlauf: das Skript oeffnet eine ueber den Anker angesprochene
   Kachel bereits nach 150 ms. Mit Verzoegerung wuerde jedes Sprungziel
   eine noch unsichtbare Kachel aufklappen.
   Gilt gleichermassen fuer das Kachelraster, die Angabenfelder und das
   Stellenpaar, damit alle Seiten denselben Auftritt haben. Die Klasse
   "auftritt" setzt das Skript und entfernt sie nach dem Lauf wieder -
   dadurch kann nichts unsichtbar haengen bleiben. */
@media (prefers-reduced-motion: no-preference){
  .bento.auftritt .kachel,
  .felder.auftritt .feld,
  .stellenpaar.auftritt .kachel{animation:auftauchen .8s ease-in-out both}
}
@keyframes auftauchen{from{opacity:0}to{opacity:1}}

/* Die geoeffnete Kachel bleibt an ihrem Platz und wird nur markiert:
   Rahmen ringsum orange. Ihr Inhalt erscheint unter dem Raster, damit
   das Kachelfeld beim Durchklicken stehen bleibt. */
/* Das Blatt ist selbst ein Rasterfeld ueber die volle Breite und wird vom
   Skript direkt hinter die Reihe der geoeffneten Kachel einsortiert. */
.kachel-blatt{grid-column:1 / -1}
@media (max-width:700px){.bento{gap:16px}}

/* ---------- Bausteine im aufgeklappten Blatt ---------- */
.bausteine{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.baustein{display:flex;flex-direction:column;gap:10px;padding:18px;border:1px solid var(--flaeche-linie);background:var(--papier)}
.baustein .stich{font-size:16px;line-height:1.55;flex:1}
.baustein .ergebnis{margin-top:6px;padding-top:10px;border-top:1px solid var(--flaeche-linie);font-weight:600;color:var(--blau);
                    display:flex;gap:8px;align-items:flex-start;font-size:16px}
.baustein .ergebnis .pf{margin-top:5px}
.sym{width:44px;height:44px;flex:none;stroke:var(--blau);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:700px){.bausteine{grid-template-columns:minmax(0,1fr)}}

/* ---------- Listen ---------- */
.liste{margin:0;padding:0;list-style:none}
.liste li{position:relative;padding:12px 0 12px 22px;border-bottom:1px solid var(--flaeche-linie);
          font-size:16px;line-height:1.5}
/* Aufzaehlungszeichen: kleines orangenes Dreieck, auf der ersten Zeile ausgerichtet */
.liste li::before{content:"";position:absolute;left:2px;top:19px;width:0;height:0;
          border-left:7px solid var(--orange);
          border-top:5px solid transparent;border-bottom:5px solid transparent}
.zweispaltig{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
@media (max-width:860px){.zweispaltig{grid-template-columns:minmax(0,1fr)}}
.more{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:16px;font-weight:600;color:var(--orange-dunkel)}
.more:hover{text-decoration:underline;text-underline-offset:4px}

/* Zurueck-Verweis der Unterseiten: einer je Blatt, immer im Blick und
   nie ueber dem Inhalt.
   Ab 1600 px ist die linke Randspalte breit genug — dort steht er fest und
   mittig auf Fensterhoehe, neben dem aufgeklappten Blatt.
   Darunter gibt es keine freie Spalte: auf Fensterhoehe wuerde er die
   Kacheln verdecken. Deshalb sitzt er dort fest in der unteren linken Ecke,
   wo er nichts ueberdeckt und trotzdem immer sichtbar ist. */
.zurueck{position:fixed;z-index:45;left:16px;bottom:16px;margin:0;padding:0}
@media (min-width:1340px){.zurueck{left:48px;bottom:34px}}
@media (min-width:1600px){.zurueck{top:50%;bottom:auto;transform:translateY(-50%)}}
.zurueck .more{display:inline-flex;align-items:center;gap:10px;min-height:44px;
               padding:0 18px;border-radius:999px;border:1px solid var(--kachel);
               background:var(--kachel);color:var(--hell-auf-blau);text-decoration:none;
               box-shadow:0 2px 10px rgba(0,0,0,0.25)}
.zurueck .more .pf{color:var(--orange)}
.zurueck .more:hover{text-decoration:underline;text-underline-offset:4px}
.zurueck .more:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* ---------- Schaltflaechen ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;width:250px;max-width:100%;
     padding:0 18px;border:1px solid var(--blau);color:var(--blau);background:var(--papier);font-weight:600;font-size:17px;white-space:nowrap}
.btn:hover{background:var(--blau);color:var(--hell-auf-blau)}
.btn-orange{background:var(--orange);border-color:var(--orange);color:var(--dunkel)}
.btn-orange:hover{background:#c86d08;border-color:#c86d08;color:var(--dunkel)}

/* ---------- Bilder im Blatt ---------- */
.bild{display:block;width:100%;border:1px solid var(--linie);background:var(--papier)}
.bild-zeichnung{height:200px;object-fit:contain;padding:8px}
.bild-haus{height:180px;object-fit:cover;object-position:left bottom}
.bild-buero{height:200px;object-fit:cover}
@media (max-width:860px){.bild-zeichnung{height:auto}}
figure{margin:0}
figcaption{margin-top:8px}

/* ---------- Kartenplatzhalter ---------- */
.karte{height:180px;border:1px solid var(--blau);display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;
  background-color:var(--papier);
  background-image:
    repeating-linear-gradient(to right, var(--raster) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(to bottom, var(--raster) 0 1px, transparent 1px 20px);}

/* ---------- Schriftfeld ---------- */
.branchen{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.branchen li{font-size:16px;line-height:1.35;color:#ffffff;display:flex;gap:8px;align-items:baseline}
.branchen li::before{content:"";width:5px;height:5px;flex:none;background:var(--orange);transform:translateY(-2px)}
.schriftfeld .label{color:var(--weiss-leise);margin:0 0 4px 0}
.schriftfeld .wert{font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;font-size:16px;font-weight:600;color:#ffffff;margin:0}
@media (max-width:560px){.schriftfeld{min-width:0;width:100%}.schriftfeld .wert{font-size:14px}}


/* ---------- Fusszeile ---------- */
footer{width:100%;color:var(--text);background-color:var(--flaeche)}
.fuss-innen{width:100%;padding:24px 0 20px 0;display:flex;align-items:center;justify-content:space-between;gap:40px}
/* Rechtliche Hinweise als eigenes Feld im Stil des Schriftfelds, 280 px = 7 x 40.
   Waagerecht auf die Fuge zwischen Kachel 5 und 6 zentriert: linke Inhaltskante
   plus 180 px (Kachel 280 + halbe Fuge 20 - halbe Feldbreite 120).
   Senkrecht mittig zum Schriftfeld (align-items:center in .fuss-innen),
   gleiche Aussenlinienstaerke: beide wirken als eine Leiste. */
.fuss-links{position:relative;width:min(240px,100%);border:2px solid var(--blau-dunkel);
            background:var(--kachel);border-radius:8px;
            margin-left:max(0px, calc((100% - 1240px) / 2 + 180px))}
/* Spezifischer als .cell .lbl / .cell .val weiter unten - sonst stuende hier
   dunkle Schrift auf Blau (vorher 1,4:1). */
.fuss-links .cell .lbl{color:var(--hell-auf-blau);border-bottom-color:rgba(167,171,178,0.40)}
.fuss-links .cell .val{color:var(--hell-auf-blau)}
.fuss-links .val a{color:var(--hell-auf-blau);text-decoration:underline;text-decoration-color:rgba(167,171,178,0.45)}
.fuss-links .val a:hover{text-decoration-color:var(--hell-auf-blau)}
@media (max-width:1080px){.fuss-links{margin-left:max(0px, calc((100% - 1240px) / 2))}}
@media (max-width:700px){.fuss-innen{flex-direction:column;align-items:stretch;gap:24px}.fuss-links{margin-left:0}}
/* Schriftfeld nach Art eines Zeichnungskopfs: rechts am Blattrand,
   kraeftige Aussenlinie, Felder unterschiedlicher Breite. 640 px = 16 x 40. */
.fuss-gitter{width:min(640px,100%);margin-left:auto;margin-right:20px;
  border:2px solid var(--grau-dunkel);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}
.cell{padding:12px 14px 16px 14px;border-right:1px solid var(--flaeche-linie);border-bottom:1px solid var(--flaeche-linie);min-width:0}
.cell.ende{border-right:0}
.cell.unten{border-bottom:0}
.c7{grid-column:span 7}.c6{grid-column:span 6}.c5{grid-column:span 5}.c4{grid-column:span 4}
.c3{grid-column:span 3}.c2{grid-column:span 2}.c12{grid-column:span 12}
/* Firmenfeld oben links, Schutzvermerk darunter — wie im Zeichnungskopf,
   wo Firma und Schutzvermerk zusammen die linke Spalte bilden. */
.logo-zelle{display:flex;flex-direction:column;justify-content:flex-start}
/* Die Blattangabe steht im Zeichnungskopf kleiner als die uebrigen Werte. */
.cell.blatt .val{font-size:14px}
/* Probefassung: Wert mittig im Feld, waagerecht und senkrecht.
   margin:auto 0 zentriert das Wertfeld in der freien Hoehe unter dem Schild. */
.cell.mitte{display:flex;flex-direction:column}
.cell.mitte .val{text-align:center;margin:auto 0}
.cell .lbl,.feld .lbl{font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;font-size:11px;font-weight:600;
           letter-spacing:0.14em;text-transform:uppercase;color:var(--text-leise);
           margin:0 0 8px 0;padding-bottom:6px;border-bottom:1px solid var(--flaeche-linie)}
.cell .val,.feld .val{font-size:17px;line-height:1.5;color:var(--text);margin:0}
.cell a,.feld a{color:var(--blau);text-decoration:underline;text-decoration-color:rgba(29,51,137,0.45)}
/* Die Angabenfelder liegen auf dem Kachelblau, die Schriftfeldzellen auf dem
   Blatt. Gleiche Bauform, umgekehrte Farbrichtung. */
.feld .lbl{color:var(--hell-auf-blau);border-bottom-color:var(--weiss-linie)}
.feld .val{color:var(--hell-auf-blau)}
.feld a{color:var(--hell-auf-blau);text-decoration-color:rgba(222,125,15,0.55)}
.feld .bildplatz .datei{color:var(--hell-auf-blau)}
.feld .bildplatz .motiv{color:var(--hell-auf-blau)}
/* Logo-Schriftzug im Firmenfeld des Schriftfelds, einfarbig wie bei einem
   Schwarz-Weiß-Druck. Eigene dunkle Fassung in der Farbe der
   Schriftfeldlinie - kein umgekehrtes Weiss, das waere reines Schwarz. */
.fuss-logo{display:block;width:100%;max-width:175px;height:auto;margin:18px auto 6px auto}
@media (max-width:700px){
  .fuss-gitter{width:100%;margin-right:0}
  .c7,.c6,.c5,.c4,.c3,.c2{grid-column:span 12}
  .cell{border-right:0}
}

/* ======================================================================
   Zeichnungsrahmen (angelehnt an DIN 6771 / ISO 5457)
   Liegt als feste Ebene ueber der Seite: bleibt beim Scrollen stehen,
   der Inhalt zieht darunter durch. Klicks gehen hindurch.
   Abschalten: am <body> die Klasse "mit-rahmen" entfernen.
   Wird erst ab 1340 px eingeblendet - darunter fehlt der Platz.
   ====================================================================== */
.zrahmen{display:none}
@media (min-width:1340px){
  .mit-rahmen{padding:22px 22px 22px 34px}
  .mit-rahmen .blaubereich{min-height:calc(100svh - 44px)}
  .mit-rahmen .sticky{top:22px}
  .mit-rahmen .zrahmen{
    display:block;position:fixed;inset:0;z-index:60;pointer-events:none;
    font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;
    font-size:10px;letter-spacing:0.12em;color:var(--text);
  }
  /* Der Rand ist deckend, damit der Inhalt nicht darunter durchscheint */
  .zr-balken{position:absolute;background:var(--flaeche)}
  .zr-b-oben{top:0;left:0;right:0;height:22px}
  .zr-b-unten{bottom:0;left:0;right:0;height:22px}
  .zr-b-links{top:0;bottom:0;left:0;width:34px}
  .zr-b-rechts{top:0;bottom:0;right:0;width:22px}
  .zr-linie{position:absolute;top:22px;right:22px;bottom:22px;left:34px;
            border:1px solid var(--grau-dunkel)}
  /* Heftkante links */
  .zr-heft{position:absolute;left:10px;top:22px;bottom:22px;
           border-left:1px solid var(--flaeche-linie)}
  .zr-zone{position:absolute;display:flex}
  .zr-zone span{flex:1;display:flex;align-items:center;justify-content:center;
                border-right:1px solid var(--flaeche-linie)}
  .zr-zone span:last-child{border-right:0}
  .zr-oben{top:0;left:34px;right:22px;height:22px}
  .zr-unten{bottom:0;left:34px;right:22px;height:22px}
  .zr-links{top:22px;bottom:22px;left:10px;width:24px;flex-direction:column}
  .zr-rechts{top:22px;bottom:22px;right:0;width:22px;flex-direction:column}
  .zr-links span,.zr-rechts span{border-right:0;border-bottom:1px solid var(--flaeche-linie)}
  .zr-links span:last-child,.zr-rechts span:last-child{border-bottom:0}
}

/* ======================================================================
   Ergaenzungen fuer die Unterseiten
   ====================================================================== */

/* Anker nicht unter die klebende Kopfleiste laufen lassen */
.kachel-blatt,[id]{scroll-margin-top:130px}
@media (max-width:699px){.kachel-blatt,[id]{scroll-margin-top:84px}}

/* Kopfbild, das eine Zeichnung zeigt: nichts abschneiden,
   die Blaupause steht auf dem Kachelton. */
.hero figure.zeichnung img{object-fit:contain;background:#15245C}

/* Textblatt: lange Textstrecken liegen auf dem hellen Blatt (Text 11,0:1). */
.textblatt{background-color:var(--blatt);color:var(--text);
           border:0;border-radius:12px;
           padding:clamp(20px,3vw,32px);margin-bottom:40px}
.textblatt>*+*{margin-top:16px}
.textblatt h2{font-size:24px;margin-top:36px}
.textblatt>h2:first-child{margin-top:0}
.textblatt h3{font-size:18px;margin-top:24px}
.textblatt p,.textblatt li{font-size:17px;line-height:1.6;max-width:78ch}
.textblatt a{color:var(--orange-dunkel);text-decoration:underline;text-underline-offset:3px}
.textblatt ul,.textblatt ol{margin:0;padding-left:22px}
.textblatt li{padding:4px 0}
.textblatt li+li{margin-top:0}
.textblatt .vorspann{font-size:19px;line-height:1.5}
.textblatt dt{font-weight:700;color:var(--blau);margin-top:14px}
.textblatt dd{margin:4px 0 0 0;font-size:17px;line-height:1.6}

/* Einleitungstext auf der Blattflaeche, oberhalb der Kacheln */
.einleitung{color:var(--text);font-size:clamp(17px,2vw,19px);line-height:1.55;max-width:70ch;
            padding-bottom:28px}

/* Angabenfelder auf Blau: wie Kacheln, aber ohne Aufklappen (Kontaktseite) */
.felder{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--teilung);
        padding-bottom:24px}
.feld{grid-column:span 4;min-width:0;background:var(--kachel);
      position:relative;border:2px solid var(--blau-dunkel);
      border-radius:12px;
      padding:18px 18px 20px 18px}
.feld.breit{grid-column:span 6}
.feld.voll{grid-column:span 12}
.feld .val{font-size:17px}
.feld figure{line-height:0}
.feld img{display:block;width:100%;height:260px;object-fit:cover;border-radius:12px}
@media (max-width:1080px){.feld{grid-column:span 6}.feld.breit,.feld.voll{grid-column:span 12}}
@media (max-width:700px){.felder{gap:16px}.feld{grid-column:span 12}}

/* Eckdatenzeile der Stellenseiten: knappe Zeile, kein Block */
.eckdaten{display:flex;flex-wrap:wrap;gap:0 28px;margin:0 0 28px 0;padding:14px 0;
          border-top:2px solid var(--orange);border-bottom:1px solid var(--flaeche-linie)}
.eckdaten>div{min-width:0}
.eckdaten .lbl{font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;font-size:11px;
          font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-leise);margin:0 0 4px 0}
.eckdaten .val{font-size:16px;line-height:1.45;color:var(--text);margin:0}
.eckdaten a{color:var(--blau);text-decoration:underline;text-decoration-color:rgba(29,51,137,0.45)}
@media (max-width:700px){.eckdaten{gap:14px 0;flex-direction:column}}

/* Kartenplatzhalter auf Blau: Raster wie ein Zeichenblatt */
.karte-blau{height:260px;border:1px dashed rgba(255,255,255,0.55);border-radius:12px;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;
  color:var(--weiss-leise);font-size:15px;
  background-image:
    repeating-linear-gradient(to right, rgba(255,255,255,0.10) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.10) 0 1px, transparent 1px 20px)}

/* Stellenanzeigen: zwei grosse Verweis-Kacheln.
   Die Kacheln tragen aus dem Bento-Raster ein grid-column:span 3 - das wird
   hier zurueckgesetzt, sonst belegt jede Kachel eine eigene Reihe. */
.stellenpaar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--teilung);
             padding-bottom:24px}
.stellenpaar .kachel{grid-column:auto}
@media (max-width:860px){.stellenpaar{grid-template-columns:minmax(0,1fr);gap:16px}}

/* Kopfbereich ohne Bild (Impressum, Datenschutz, 404): eine Spalte */
.hero .reihe-einspaltig{grid-template-columns:minmax(0,1fr)}

/* Projektlisten im aufgeklappten Blatt: durchnummeriert, zwei Spalten */
.projektliste{margin:0;padding:0;list-style:none}
.projektliste li{position:relative;padding:9px 0 9px 22px;
  border-bottom:1px solid var(--flaeche-linie);font-size:16px;line-height:1.45}
.projektliste li::before{content:"";position:absolute;left:2px;top:16px;width:0;height:0;
  border-left:7px solid var(--orange);
  border-top:5px solid transparent;border-bottom:5px solid transparent}

/* Schaltflaechen in den Angabenfeldern behalten ihre eigenen Farben:
   die Verweisregel .feld a wuerde sie sonst weiss und unterstrichen setzen. */
.feld .btn{color:var(--blau);text-decoration:none}
.feld .btn-orange{color:var(--dunkel);text-decoration:none}
.feld .btn:hover{color:var(--hell-auf-blau)}
.feld .btn-orange:hover{color:var(--dunkel)}

/* Inhaltsverzeichnis der Datenschutzerklaerung: zwei Spalten, Nummer voran */
.inhaltsverzeichnis{margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
@media (max-width:860px){.inhaltsverzeichnis{grid-template-columns:minmax(0,1fr)}}
.inhaltsverzeichnis li{display:flex;gap:12px;align-items:baseline;
  padding:8px 0;border-bottom:1px solid var(--flaeche-linie);font-size:16px}
.inhaltsverzeichnis li>span{font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  font-size:13px;font-weight:600;color:var(--blau);flex:none;min-width:1.6em}
.textblatt .label{margin-bottom:10px}

/* Schaltflaechen und Verweis-Pfeile im Textblatt behalten ihre eigenen Farben.
   Ohne diese Regel faerbt .textblatt a die orange Schaltflaeche blau –
   Blau auf Orange ergibt nur 3,73:1 und faellt damit unter 4,5:1. */
.textblatt .btn{color:var(--blau);text-decoration:none}
.textblatt .btn-orange{color:var(--dunkel);text-decoration:none}
.textblatt .btn:hover{color:var(--hell-auf-blau)}
.textblatt .btn-orange:hover{color:var(--dunkel)}
.textblatt .more{text-decoration:none}
.textblatt .more:hover{text-decoration:underline;text-underline-offset:4px}

/* ---------- Probefassung: Ueberschrift mittig, Symbol darunter ----------
   Umschaltung ueber die Klasse "mittig" am Kachelraster, also an
   <div class="bento"> oder <div class="stellenpaar">. Ohne die Klasse
   bleibt alles wie zuvor.
   "display:contents" loest die Kopfzeile auf, damit Nummer, Ueberschrift
   und Symbol drei eigene Felder der Kachel werden und sich mit "order"
   neu sortieren lassen - ohne Eingriff in den HTML-Aufbau. */
.mittig .kopfteil{align-items:center;text-align:center}
.mittig .kzeile{display:contents}
.mittig .nr{order:1;align-self:flex-start}
.mittig .kopfteil h2,.mittig .kopfteil h3{order:2;align-self:stretch;margin-top:6px}
.mittig .ksym{order:3;margin-top:4px;width:44px;height:44px}
/* Der Block aus Ueberschrift und Symbol sitzt senkrecht mittig in der Kachel,
   die Positionsnummer bleibt oben in der Ecke. */
.mittig .kopfteil{flex:1 1 auto;justify-content:center;padding-top:40px}
.mittig .nr{position:absolute;top:18px;left:18px;order:0}


/* ---------- Startseite: einzeiliger Titel mit anliegender Masslinie -------
   Der Titelblock nimmt die Breite seines eigenen Textes an (fit-content),
   die Masslinie laeuft auf 100 % davon - dadurch ist sie immer genau so
   lang wie die Ueberschrift, in jeder Fensterbreite.
   Die Masslinie ist hier nicht als SVG gebaut, sondern aus Rahmen: beim
   Dehnen eines SVG wuerden Strichstaerke und Pfeilspitzen mitwachsen. */
.hero .titelblock{display:flex;flex-direction:column;gap:14px;
                  width:fit-content;max-width:100%}
.hero.einzeilig h1{font-size:clamp(26px,2.45vw,32px)}
.masslinie{display:flex;align-items:center;width:100%;height:26px;color:var(--text)}
.masslinie::before,.masslinie::after{content:"";flex:none;width:1px;height:20px;
                                     background:currentColor}
.masslinie>span{position:relative;flex:1 1 auto;height:1px;background:currentColor}
.masslinie>span::before,.masslinie>span::after{content:"";position:absolute;top:50%;
  width:0;height:0;border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;
  transform:translateY(-50%)}
.masslinie>span::before{left:0;border-right:12px solid currentColor}
.masslinie>span::after{right:0;border-left:12px solid currentColor}

/* Platzhaltertext im Entwurf: gestrichelt umrandet, damit beim Durchsehen
   nichts uebersehen wird. Vor dem Livegang muessen diese Stellen weg -
   im Quelltext an der Klasse "platzhalter" zu finden. */
.platzhalter{display:block;border:1px dashed var(--blau);padding:10px 12px;
             color:var(--text-leise);font-style:italic}

/* Anriss mit Verweisen direkt auf der Kachel (Branchen, Wer wir sind).
   In der mittigen Fassung steht er unter dem Symbol, deshalb order:4. */
.mittig .anriss{order:4;margin-top:10px}
.kachel .anriss a{color:var(--orange);text-decoration:underline;
                  text-decoration-color:rgba(222,125,15,0.55);text-underline-offset:3px}
.kachel .anriss a:hover{text-decoration-color:var(--orange)}

/* ---------- Abschnitte auf der Leistungsseite ----------
   Zwei Kachelbloecke auf einem Blatt: oben, was in jedem Projekt steckt,
   unten die Branchen. Die Abschnittsueberschrift steht in der Schrift der
   Schriftfeld-Schilder, damit sie die Kachelueberschriften nicht ueberstimmt. */
.abschnitt{display:flex;flex-direction:column;gap:6px;padding:0 0 18px 0}
.abschnitt h2{font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;
              font-size:13px;font-weight:600;letter-spacing:0.14em;
              text-transform:uppercase;color:var(--blau);margin:0}
.abschnitt p{color:var(--text-leise);max-width:70ch}
.trenner{height:1px;background:var(--flaeche-linie);border:0;margin:44px 0 28px 0}

/* ---------- Bildplatzhalter --------------------------------------------
   Leeres Feld in Bildgroesse mit dem vorgesehenen Dateinamen als
   sichtbarer Beschriftung. Bewusst unfertig: gestrichelte orange Kante
   und Schraffur, damit es nicht aus Versehen stehen bleibt.
   Im Quelltext an der Klasse "bildplatz" zu finden.
   Die Groesse kommt ueber aspect-ratio, damit beim Einsetzen des echten
   Bildes nichts springt. */
.bildplatz{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:16px;text-align:center;border:1px dashed var(--orange);border-radius:12px;
  background-image:repeating-linear-gradient(45deg,
    rgba(222,125,15,0.12) 0 10px, transparent 10px 20px)}
.bildplatz .datei{font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  font-size:13px;font-weight:600;letter-spacing:0.04em;color:var(--blau);margin:0;
  overflow-wrap:anywhere}
.bildplatz .motiv{font-size:14px;line-height:1.45;color:var(--text-leise);margin:0}
.bildplatz.quer{aspect-ratio:1000/425}
.bildplatz.hoch{aspect-ratio:4/5}
.bildplatz.plan{aspect-ratio:1000/420}   /* nicht 'karte': die Klasse gibt es schon */
/* Im hellen Aufklappblatt steht der Platzhalter auf Blatt-Grund */
.kachel-blatt .bildplatz .datei{color:var(--blau)}
.kachel-blatt .bildplatz .motiv{color:var(--text-leise)}
@media (max-width:700px){.bildplatz .motiv{font-size:13px}}
/* Im Aufklappblatt nicht ueber die Breite des Kopfbilds hinaus */
.kachel-blatt>.bildplatz{max-width:620px}
/* Kontaktseite: Portraet neben den Angaben, Lageplan neben dem Foto.
   Ohne das zieht das hochkante Portrait das Nachbarfeld leer in die Hoehe. */
.visitenkarte{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.visitenkarte>.bildplatz{flex:0 0 190px;max-width:190px}
.visitenkarte>div{flex:1 1 200px;min-width:0}
.zweispaltig{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start}
.zweispaltig figure{line-height:0}
.zweispaltig img{display:block;width:100%;height:auto;border-radius:12px}
@media (max-width:860px){.zweispaltig{grid-template-columns:minmax(0,1fr)}}
/* Hochformat bleibt schmal, sonst sprengt es die Spalte */
.bildplatz.hoch{max-width:240px}


/* ---------- Hero-Monitor mit Glasfront (Leistungsseite) ---------- */
.hero figure.monitor{border:0;border-radius:0;overflow:visible;line-height:0;max-width:460px;justify-self:end;width:100%}
/* Gehaeuse: dunkle, glatte Glasfront in Tiefblau mit feiner Lichtkante */
.monitor-gehaeuse{position:relative;padding:10px 10px 22px;border-radius:14px;
  background:linear-gradient(180deg,#1B2A6E 0%,#121F5A 55%,#0D1747 100%);
  border:1px solid #0B1440;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),
             0 20px 40px -20px rgba(18,31,90,.75),0 2px 6px rgba(18,31,90,.25)}
/* Betriebsleuchte im Kinn */
.monitor-gehaeuse::after{content:"";position:absolute;left:50%;bottom:8px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;
  background:var(--orange);box-shadow:0 0 5px 1px rgba(222,125,15,.7);z-index:2}
.monitor-bild{position:relative;aspect-ratio:16/9;border-radius:3px;overflow:hidden;background:#15245C;
  box-shadow:0 0 0 1px rgba(0,0,0,.45)}
.hero .monitor-bild video,.hero .monitor-bild img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.hero .monitor-bild .mon-ende{opacity:0;transition:opacity .8s ease}
.monitor.ende .mon-ende{opacity:1}
/* Glasscheibe ueber der ganzen Front: eine klare, scharf begrenzte
   Spiegelung oben links und eine helle Oberkante – kein Schleier */
.mon-glas{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:
    linear-gradient(180deg,rgba(255,255,255,.22) 0,rgba(255,255,255,0) 2px),
    linear-gradient(122deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.02) 33%,rgba(255,255,255,0) 33.15%)}
/* Standfuss */
.monitor-fuss{display:flex;flex-direction:column;align-items:center}
.monitor-fuss .hals{width:12%;height:18px;background:linear-gradient(90deg,#5C6068,#A7ABB2 50%,#5C6068);
  clip-path:polygon(20% 0,80% 0,100% 100%,0 100%)}
.monitor-fuss .sockel{width:36%;height:7px;border-radius:7px 7px 3px 3px;
  background:linear-gradient(#B9BCC2,#5C6068);box-shadow:0 8px 14px -8px rgba(18,31,90,.7)}
@media (max-width:860px){
  .hero figure.monitor{justify-self:center;max-width:340px}
  .monitor-gehaeuse{padding:7px 7px 16px;border-radius:10px}
  .monitor-gehaeuse::after{bottom:5px;width:4px;height:4px;margin-left:-2px}
  .monitor-fuss .hals{height:11px}
}


/* ---------- Projekteseite: Roboter mit Haken-Schild ---------- */
.hero figure.roboter{border:0;border-radius:0;overflow:visible;line-height:0}
.hero figure.roboter video{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;background:var(--flaeche);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%),linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%),linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  mask-composite:intersect}

/* Startseite: Linearachse – das Foto fuellt am Ende die volle Videobreite.
   Daher seitlich kein Randverlauf (er wuerde den Rahmen anschneiden), nur oben/unten.
   Das Video ist so breit wie die zwei Kacheln darunter: Die Hero-Spalten haben 48 px
   Abstand, die Kacheln var(--teilung) = 40 px; die Differenz/2 wird links angesetzt. */
.hero figure.roboter.achse video{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
@media (min-width:861px){
  .hero figure.roboter.achse{margin-left:calc((var(--teilung) - 48px) / 2);width:calc(100% + (48px - var(--teilung)) / 2)}
}

/* Projekteseite: Roboter steht weiter links, Schild reicht bis an den
   linken Videorand – dort nur ein schmaler Randverlauf */
.hero figure.roboter.links video{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 2.5%,#000 84%,transparent 100%),linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 2.5%,#000 84%,transparent 100%),linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%)}

/* ======================================================================
   Hinweisleiste zum Datenschutz (skript.js)
   Schmal am unteren Rand, volle Breite, ohne Abdeckung. Text links, Knopf
   und Verweis rechts; auf schmalen Bildschirmen Text oben, darunter Knopf
   und Verweis. Solange sie sichtbar ist (html.hl-sichtbar), haengt am Ende
   des body ein Abstand in ihrer Hoehe (--hl-hoehe, von skript.js gemessen).
   Ein padding am body wuerde nicht wirken, weil body auf 100 % Hoehe steht
   und der Inhalt darueber hinausragt. Der Zurueck-Verweis wird angehoben.
   Hoechstens ein Drittel der Fensterhoehe; reicht das nicht (sehr kleine
   oder gedrehte Telefone), wird innerhalb der Leiste gescrollt.
   ====================================================================== */
.hinweisleiste{position:fixed;left:0;right:0;bottom:0;z-index:80;
  max-height:33vh;overflow-y:auto;
  background:var(--kachel);color:var(--hell-auf-blau);border-top:2px solid var(--blau-dunkel);
  box-shadow:0 -6px 20px rgba(10,16,48,0.25)}
.hl-innen{max-width:1240px;margin:0 auto;padding:8px 16px;display:flex;align-items:center;gap:8px 24px}
.hl-text{margin:0;flex:1 1 auto;font-size:15px;line-height:1.45;color:var(--hell-auf-blau)}
.hl-knoepfe{display:flex;align-items:center;gap:20px;flex:0 0 auto}
.hl-knopf{width:auto;min-height:44px;font-family:inherit;font-size:16px;cursor:pointer}
.hinweisleiste .btn:hover{background:var(--blau-dunkel);color:var(--hell-auf-blau);border-color:var(--hell-auf-blau)}
.hl-verweis{display:inline-flex;align-items:center;min-height:44px;font-size:15px;color:var(--hell-auf-blau);
  text-decoration:underline;text-decoration-color:rgba(222,125,15,0.55);text-underline-offset:3px}
.hl-verweis:hover{text-decoration-color:var(--hell-auf-blau)}
.hinweisleiste a:focus-visible,.hinweisleiste button:focus-visible{outline-color:#ffffff}
html.hl-sichtbar body::after{content:'';display:block;height:var(--hl-hoehe,0px)}
html.hl-sichtbar .zurueck{bottom:calc(var(--hl-hoehe,0px) + 16px)}
@media (min-width:1340px){html.hl-sichtbar .zurueck{bottom:calc(var(--hl-hoehe,0px) + 34px)}}
@media (min-width:1600px){html.hl-sichtbar .zurueck{bottom:auto}}
@media (max-width:700px){
  .hl-innen{flex-direction:column;align-items:stretch;padding:10px 16px}
  .hl-text{font-size:14px}
  /* Wird die Leiste auf sehr niedrigen Bildschirmen begrenzt, scrollt nur
     der Text; Knopf und Verweis bleiben unten sichtbar. */
  .hl-knoepfe{position:sticky;bottom:0;background:var(--kachel)}
}
@media print{.hinweisleiste{display:none}html.hl-sichtbar body::after{display:none}}

/* ======================================================================
   Kontaktseite: Lageplan mit Google Maps
   Das iframe entsteht erst nach Klick auf "Karte von Google Maps laden"
   (skript.js) und nur fuer diesen Seitenaufruf. Vorher steht in der Flaeche
   nur ein Platzhalter. Der Hinweis zu Google steht unter den Knoepfen und
   bleibt auch bei geladener Karte sichtbar. Ohne JavaScript entfallen
   Flaeche und Kartenknoepfe; der Routen-Verweis bleibt.
   ====================================================================== */
.lageplan{display:flex;flex-direction:column;gap:16px;min-width:0}
.lageplan-flaeche{position:relative;min-height:260px;border-radius:12px;overflow:hidden;
  border:1px dashed var(--weiss-linie);background:var(--blau-dunkel);
  display:flex;align-items:center;justify-content:center;padding:20px;text-align:center}
.lageplan-flaeche.geladen{border:0;padding:0;background:var(--papier)}
.lageplan-flaeche iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.lageplan-platzhalter{margin:0;font-size:15px;line-height:1.55;color:rgba(167,171,178,0.82)}
.lageplan-platzhalter[hidden]{display:none}
.lageplan-hinweis{margin:0;font-size:15px;line-height:1.55;color:var(--hell-auf-blau)}
.lageplan .knopfzeile{margin:0}
/* Knoepfe duerfen umbrechen: "Route bei Google Maps planen" ist sonst auf
   schmalen Bildschirmen breiter als die Spalte */
.lageplan .btn{cursor:pointer;font-family:inherit;width:auto;flex:1 1 200px;
  white-space:normal;text-align:center;padding-top:8px;padding-bottom:8px}
.lageplan .btn[hidden]{display:none}
html:not(.js) .lageplan-flaeche,html:not(.js) [data-lageplan-laden],html:not(.js) [data-lageplan-ausblenden]{display:none}

/* Kennzeichnung von Textentwuerfen zur rechtlichen Pruefung (Datenschutz).
   Vor der Veroeffentlichung samt den Absaetzen pruefen und entfernen. */
.textblatt .entwurf{display:inline-block;margin-top:8px;padding:4px 10px;border:1px solid var(--orange-dunkel);
  border-left-width:4px;font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;font-size:12px;
  font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--dunkel);background:var(--papier)}
@media (max-width:860px){.lageplan{margin-bottom:24px}}