/* Profectronics — Schale (Kopf, Fusszeile, Grundlagen).
   Erzeugt aus der Vorschau, nicht von Hand pflegen. */

/* ===== 00-tokens.css ===== */
/* =====================================================================
   00-tokens
   Profectronics Testbeds — Website
   Einfügen unter Oxygen → Stylesheets als eigenes Stylesheet mit
   diesem Namen. Reihenfolge einhalten, sie entscheidet über die
   Kaskade. Nach jeder Änderung: Oxygen → Settings → CSS Cache →
   Regenerate.
   ===================================================================== */

/* --- colors.css --- */
.pt-site {
  /* Anthrazit und Neutrale */
  --anthrazit-900: #2E3438;
  --anthrazit-800: #383E42;
  --anthrazit-700: #4A5257;
  --anthrazit-600: #5C6367;
  --grau-500: #7C8388;
  --grau-400: #8A9298;
  --grau-300: #B4B9BB;
  --grau-200: #C8C8C7;
  --grau-150: #DCDEDF;
  --grau-100: #E4E4E2;
  --papier-100: #EFEFED;
  --papier-50: #F5F5F3;
  --papier-25: #FAFAF9;
  --weiss: #FFFFFF;

  /* Türkis — Markenfarbe, RAL 6034 als Lackbezug */
  --tuerkis-700: #2F5C5E;
  --tuerkis-600: #3C7476;
  --tuerkis-500: #6FB4B6;
  --tuerkis-400: #9AD0D1;
  --tuerkis-100: #EAF2F2;

  /* Signalgelb — nur Grenzwert und Warnung */
  --gelb-700: #8A6100;
  --gelb-600: #B07800;
  --gelb-500: #F9A800;
  --gelb-100: #FDF7EA;

  /* Rubinrot — nur Störung und Überschreitung */
  --rubin-700: #8D1D2C;
  --rubin-500: #D9414F;
  --rubin-300: #F0A8AE;
  --rubin-100: #FBF3F4;

  /* Statusgrün — getrennt von der Marke, nur Betriebszustand */
  --gruen-700: #0B5B3D;
  --gruen-500: #0F8558;
  --gruen-100: #F2F8F5;

  /* Rollen, hell */
  --text-primaer: var(--anthrazit-800);
  --text-sekundaer: var(--anthrazit-600);
  --text-schwach: var(--grau-400);
  --text-invers: var(--weiss);
  --flaeche-papier: var(--weiss);
  --flaeche-zart: var(--papier-25);
  --flaeche-ruhig: var(--papier-50);
  --flaeche-rand: var(--papier-100);
  --linie-zart: var(--grau-100);
  --linie-stark: var(--anthrazit-800);
  --akzent: var(--tuerkis-600);

  /* Rollen, dunkel — Bildschirm und Leitstand */
  --dunkel-basis: var(--anthrazit-900);
  --dunkel-panel: var(--anthrazit-800);
  --dunkel-linie: var(--anthrazit-700);
  --dunkel-text: var(--grau-200);
  --dunkel-akzent: var(--tuerkis-500);
  --dunkel-akzent-flaeche: var(--tuerkis-700);

  /* Zustände */
  --status-bereit: var(--gruen-500);
  --status-betrieb: var(--tuerkis-600);
  --status-warnung: var(--gelb-500);
  --status-stoerung: var(--rubin-700);
  --status-stoerung-dunkel: var(--rubin-500);
  --status-getrennt: var(--grau-400);

  /* Medien — Linienbild trägt die Aussage, nicht die Farbe */
  --medium-fluessig: var(--tuerkis-600);
  --medium-linie: var(--grau-400);
  --medium-fluessig-strich: none;
  --medium-stickstoff-strich: 7 3 1.5 3;
  --medium-vakuum-strich: 4 3;
}

/* --- typography.css --- */
.pt-site {
  --font-sans: "Archivo", "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, monospace;

  --gewicht-normal: 400;
  --gewicht-mittel: 500;
  --gewicht-halb: 600;
  --gewicht-fett: 700;

  /* Bildschirm, px */
  --schrift-anzeige: 58px;
  --schrift-titel: 36px;
  --schrift-abschnitt: 30px;
  --schrift-kapitel: 24px;
  --schrift-gross: 17px;
  --schrift-basis: 15px;
  --schrift-klein: 13px;
  --schrift-mini: 11.5px;
  --schrift-marke: 10.5px;

  /* Dokument, pt — Nachbau in Word */
  --pt-dokumenttitel: 26pt;
  --pt-kapitel: 14pt;
  --pt-zwischentitel: 11pt;
  --pt-grund: 10.5pt;
  --pt-tabelle: 9.5pt;
  --pt-legende: 8pt;

  --zeilen-eng: 1.35;
  --zeilen-text: 1.72;
  --zeilen-weit: 1.8;

  --sperrung-marke: 0.335em;
  --sperrung-label: 0.16em;
  --sperrung-titel: -0.015em;
}

/* --- spacing.css --- */
.pt-site {
  /* 8er Raster */
  --raum-1: 4px;
  --raum-2: 8px;
  --raum-3: 12px;
  --raum-4: 16px;
  --raum-5: 20px;
  --raum-6: 24px;
  --raum-8: 32px;
  --raum-10: 40px;
  --raum-12: 48px;
  --raum-16: 64px;
  --raum-22: 88px;

  --linie-haarlinie: 1px;
  --linie-kontur: 1.6px;
  --linie-leitung: 2.4px;
  --radius: 0;
  --touchflaeche: 44px;
  --icon-raster: 24px;
}


/* ===== 10-grundlagen.css ===== */
/* =====================================================================
   10-grundlagen
   Profectronics Testbeds — Website
   Einfügen unter Oxygen → Stylesheets als eigenes Stylesheet mit
   diesem Namen. Reihenfolge einhalten, sie entscheidet über die
   Kaskade. Nach jeder Änderung: Oxygen → Settings → CSS Cache →
   Regenerate.
   ===================================================================== */

/* --- Schriften, selbst gehostet. Kein Google Fonts. ---
   Die WOFF2-Dateien liegen im Plugin unter /schriften/.
   Pfad anpassen, falls das Plugin anders heißt. */
@font-face {
  font-family: "Archivo";
  src: url("/wp-content/plugins/profectronics-testbeds/schriften/Archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/wp-content/plugins/profectronics-testbeds/schriften/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/wp-content/plugins/profectronics-testbeds/schriften/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

/* ------------------------------------------------------------------ Grund */

.pt-site *, .pt-site *::before, .pt-site *::after { box-sizing: border-box; }

.pt-site { -webkit-text-size-adjust: 100%; }

.pt-site {
  margin: 0;
  background: var(--flaeche-papier);
  color: var(--text-primaer);
  font-family: var(--font-sans);
  font-size: var(--schrift-basis);
  font-weight: var(--gewicht-normal);
  line-height: var(--zeilen-text);
  text-rendering: optimizeLegibility;
}

.pt-site img, .pt-site svg { display: block; max-width: 100%; }

.pt-site a { color: var(--tuerkis-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pt-site a:hover { color: var(--anthrazit-800); }
.pt-site a:focus-visible,
.pt-site button:focus-visible { outline: 2px solid var(--tuerkis-500); outline-offset: 2px; }

/* --- Ergänzungen gegenüber dem Entwurf ------------------------------------ */

/* Zeilenlänge begrenzen: nie mehr als rund 78 Zeichen im Fließtext */
.pt-site .abschnitt p,
.pt-site .titelfeld p { max-width: 68ch; }

/* Fokus muss sichtbar bleiben — nicht entfernen */
.pt-site :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--tuerkis-600);
  outline-offset: 2px;
}

/* Bewegung nur, wenn der Besucher sie zulässt */
@media (prefers-reduced-motion: reduce) {
  .pt-site *, .pt-site *::before, .pt-site *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Radius 0 gilt ausnahmslos — Oxygen setzt bei einigen Elementen Standardwerte */
.pt-site .oxy-stock-content-styles *,
.pt-site .ct-section *, .pt-site .ct-div-block, .pt-site .ct-link-button, .pt-site .ct-image, .pt-site input, .pt-site textarea, .pt-site select {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Druck: dunkle Flächen kosten Toner und bringen nichts */
@media print {
  .pt-site .gruppe, .pt-site .kopf, .pt-site .fuss, .pt-site .springmarke { display: none; }
  .pt-site .titelfeld { background: #fff; color: #000; }
  .pt-site .titelfeld .kennung { color: #000; }
  .pt-site a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
}


/* ===== 20-bausteine.css ===== */
/* =====================================================================
   20-bausteine
   Profectronics Testbeds — Website
   Einfügen unter Oxygen → Stylesheets als eigenes Stylesheet mit
   diesem Namen. Reihenfolge einhalten, sie entscheidet über die
   Kaskade. Nach jeder Änderung: Oxygen → Settings → CSS Cache →
   Regenerate.
   ===================================================================== */

.pt-site .bahn { max-width: 1180px; margin: 0 auto; padding: 0 var(--raum-6); }

.pt-site .springmarke {
  position: absolute; left: -9999px;
  background: var(--anthrazit-800); color: var(--text-invers);
  padding: var(--raum-3) var(--raum-5);
  font-family: var(--font-mono); font-size: var(--schrift-klein);
}
.pt-site .springmarke:focus { left: var(--raum-4); top: var(--raum-4); z-index: 20; }

.pt-site .kennung {
  font-family: var(--font-mono);
  font-size: var(--schrift-mini);
  font-weight: var(--gewicht-mittel);
  letter-spacing: var(--sperrung-label);
  text-transform: uppercase;
  color: var(--text-sekundaer);
  margin: 0 0 var(--raum-4);
}
.pt-site .kennung--akzent { color: var(--tuerkis-600); }
.pt-site .kennung--invers { color: var(--tuerkis-500); }

.pt-site h1, .pt-site h2, .pt-site h3, .pt-site h4 { font-weight: var(--gewicht-fett); letter-spacing: var(--sperrung-titel); margin: 0; overflow-wrap: break-word; }
/* Ein Seitentitel, eine Größe — auf allen Seiten dieselbe Bühne. */
.pt-site h1 { font-size: var(--schrift-anzeige); line-height: 1.08; }
/* Die Kennung ist ein Label, kein Vorspann: sie darf nicht von
   .titelfeld p überstimmt werden. */
.pt-site .titelfeld .kennung,
.pt-site .kennung { font-size: var(--schrift-mini); }
.pt-site h2 { font-size: var(--schrift-abschnitt); line-height: var(--zeilen-eng); }
.pt-site h3 { font-size: var(--schrift-kapitel); line-height: 1.4; }
.pt-site h4 { font-size: var(--schrift-gross); line-height: 1.45; }
.pt-site p { margin: 0 0 var(--raum-5); max-width: 74ch; }
.pt-site p.weit { max-width: 90ch; }
.pt-site .vorspann { font-size: var(--schrift-gross); color: var(--text-sekundaer); }

/* ------------------------------------------------------------ Gruppenzeile */

.pt-site .gruppe {
  background: var(--anthrazit-900);
  color: var(--grau-300);
  font-family: var(--font-mono);
  font-size: var(--schrift-marke);
  letter-spacing: var(--sperrung-label);
  text-transform: uppercase;
}
.pt-site .gruppe .bahn { display: flex; flex-wrap: wrap; gap: var(--raum-6); align-items: center; min-height: 34px; }
.pt-site .gruppe a { color: var(--grau-300); text-decoration: none; }
.pt-site .gruppe a:hover { color: var(--weiss); }
.pt-site .gruppe a[aria-current="true"] { color: var(--tuerkis-500); }
.pt-site .gruppe .marke { color: var(--grau-300); margin-right: auto; }

/* -------------------------------------------------------------------- Kopf */

.pt-site .kopf { border-bottom: var(--linie-haarlinie) solid var(--linie-zart); background: var(--weiss); }
.pt-site .kopf .bahn { display: flex; align-items: center; gap: var(--raum-8); min-height: 88px; flex-wrap: wrap; }
.pt-site .kopf__marke { display: block; }
.pt-site .kopf__marke img { height: 40px; width: auto; }

.pt-site .navi { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--raum-6); }
.pt-site .navi a {
  color: var(--text-primaer);
  text-decoration: none;
  font-size: var(--schrift-basis);
  font-weight: var(--gewicht-mittel);
  padding: var(--raum-2) 0;
  border-bottom: var(--linie-kontur) solid transparent;
}
.pt-site .navi a:hover { border-bottom-color: var(--grau-200); }
.pt-site .navi a[aria-current="page"] { border-bottom-color: var(--tuerkis-600); }
.pt-site .navi .sprache {
  font-family: var(--font-mono);
  font-size: var(--schrift-mini);
  letter-spacing: var(--sperrung-label);
  text-transform: uppercase;
  color: var(--text-sekundaer);
}

/* --------------------------------------------------------------- Titelfeld */

.pt-site .titelfeld { background: var(--anthrazit-800); color: var(--text-invers); }
.pt-site .titelfeld .bahn { padding-top: var(--raum-16); padding-bottom: var(--raum-16); }
.pt-site .titelfeld h1 { max-width: 20ch; }
.pt-site .titelfeld--gross h1 { font-size: var(--schrift-anzeige); max-width: 22ch; }
.pt-site .titelfeld p { color: var(--grau-200); font-size: var(--schrift-gross); max-width: 62ch; margin-top: var(--raum-6); }
.pt-site .titelfeld .strich { width: 60px; height: 3px; background: var(--gelb-500); margin-top: var(--raum-8); }

/* ------------------------------------------------------------------ Absatz */

.pt-site .abschnitt { padding: var(--raum-16) 0; border-top: var(--linie-haarlinie) solid var(--linie-zart); }
.pt-site .abschnitt--ruhig { background: var(--flaeche-ruhig); }
.pt-site .abschnitt--eng { padding: var(--raum-12) 0; }
.pt-site .abschnitt > .bahn > h2 { margin-bottom: var(--raum-6); max-width: 26ch; }
.pt-site .abschnitt h2 { margin-top: var(--raum-12); }
.pt-site .abschnitt h3 { margin-top: var(--raum-10); }
.pt-site .abschnitt h2:first-child,
.pt-site .abschnitt h3:first-child,
.pt-site .kennung + h2,
.pt-site .kennung + h3,
.pt-site .karte h3, .pt-site .karte h4,
.pt-site .stufe h3,
.pt-site .raster h2, .pt-site .raster h3 { margin-top: 0; }
.pt-site .abschnitt h2 + p, .pt-site .abschnitt h3 + p { margin-top: 0; }

.pt-site .raster { display: grid; gap: var(--raum-6); }
.pt-site .raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pt-site .raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pt-site .raster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pt-site .raster--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pt-site .raster--breit { grid-template-columns: minmax(0, 22ch) minmax(0, 1fr); gap: var(--raum-10); }

/* ------------------------------------------------------------------- Karte */

.pt-site .karte {
  border: var(--linie-haarlinie) solid var(--linie-zart);
  background: var(--weiss);
  padding: var(--raum-6);
  display: flex;
  flex-direction: column;
}
.pt-site .karte > .daten { margin-top: auto; padding-top: var(--raum-4); }
.pt-site .karte > .karte__mehr { margin-top: auto; padding-top: var(--raum-4); margin-bottom: 0; }
.pt-site .kennung--nachbild { margin-top: var(--raum-5); }
.pt-site .karte h3, .pt-site .karte h4 { margin-bottom: var(--raum-3); }
.pt-site .karte p:last-child { margin-bottom: 0; }
.pt-site .karte__nummer {
  font-family: var(--font-mono);
  font-size: var(--schrift-kapitel);
  font-weight: var(--gewicht-mittel);
  color: var(--tuerkis-600);
  display: block;
  margin-bottom: var(--raum-3);
}

/* --------------------------------------------------------------- Stufenweg */

.pt-site .stufe { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--raum-6); padding: var(--raum-8) 0; border-top: var(--linie-haarlinie) solid var(--linie-zart); }
.pt-site .stufe:first-of-type { border-top: 0; }
.pt-site .stufe__nr { font-family: var(--font-mono); font-size: var(--schrift-kapitel); color: var(--tuerkis-600); line-height: 1.2; }
.pt-site .stufe h3 { margin-bottom: var(--raum-3); }
.pt-site .stufe p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- Tabellen */

.pt-site table { width: 100%; border-collapse: collapse; margin: 0 0 var(--raum-6); font-size: var(--schrift-basis); }
.pt-site caption {
  caption-side: bottom; text-align: left; padding-top: var(--raum-3);
  font-family: var(--font-mono); font-size: var(--schrift-mini); color: var(--text-sekundaer);
}
.pt-site th {
  background: var(--flaeche-zart);
  font-family: var(--font-mono); font-size: var(--schrift-mini); font-weight: var(--gewicht-mittel);
  letter-spacing: var(--sperrung-label); text-transform: uppercase; color: var(--text-sekundaer);
  text-align: left; vertical-align: top; padding: var(--raum-3) var(--raum-4);
  border-bottom: var(--linie-haarlinie) solid var(--linie-zart);
}
.pt-site td { padding: var(--raum-4); border-bottom: var(--linie-haarlinie) solid var(--linie-zart); vertical-align: top; }
.pt-site td.zahl { font-family: var(--font-mono); text-align: right; white-space: nowrap; }

/* Merkmale fuer den Seiteninhalt.
   Die Schale bringt ihre Merkmale auf .pt-site mit; der Seiteninhalt traegt
   eine eigene, aeltere Liste unter anderen Namen. Formular, Hinweiskasten und
   Taste stehen aber im Seiteninhalt und greifen auf die Namen der Schale zu.
   Darum stehen hier genau die Merkmale noch einmal, die sie brauchen — nicht
   mehr. Was die Seite selbst spaeter setzt, behaelt Vorrang. (25.08.2026) */
:is(.pt-start, .pt, .pt-sw) {
  --font-sans: "Archivo", "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, monospace;

  --raum-2: 8px;  --raum-3: 12px; --raum-4: 16px;
  --raum-5: 20px; --raum-6: 24px; --raum-8: 32px;

  --schrift-mini: 11.5px; --schrift-klein: 13px; --schrift-basis: 15px;
  --gewicht-normal: 400;  --gewicht-halb: 600;
  --zeilen-eng: 1.35;     --zeilen-text: 1.72;
  --sperrung-label: 0.16em;

  --linie-haarlinie: 1px; --linie-kontur: 1.6px; --touchflaeche: 44px;

  --anthrazit-800: #383E42; --anthrazit-600: #5C6367;
  --grau-300: #B4B9BB;      --grau-200: #C8C8C7;
  --papier-50: #F5F5F3;     --papier-25: #FAFAF9;   --weiss: #FFFFFF;
  --tuerkis-700: #2F5C5E;   --tuerkis-600: #3C7476;
  --gelb-600: #B07800;      --gelb-500: #F9A800;    --gelb-100: #FDF7EA;
  --rubin-700: #8D1D2C;     --rubin-500: #D9414F;   --rubin-100: #FBF3F4;

  --text-primaer: var(--anthrazit-800);
  --text-sekundaer: var(--anthrazit-600);
  --flaeche-ruhig: var(--papier-50);
  --flaeche-zart: var(--papier-25);
}

/* Die Schale umschliesst Kopf und Fusszeile; das Kontaktformular steht
   dagegen mitten im Seiteninhalt, also unter .pt-start statt .pt-site.
   Darum tragen Formular, Hinweiskasten und Taste die Gruppe aller vier
   Huellen — sonst stuende das Formular unformatiert auf der Seite.
   (25.08.2026) */
/* --------------------------------------------------------------- Hinweis */

:is(.pt-site, .pt-start, .pt, .pt-sw) .hinweis {
  background: var(--flaeche-ruhig);
  border-left: 3px solid var(--gelb-500);
  padding: var(--raum-5) var(--raum-6);
  margin: 0 0 var(--raum-6);
}
:is(.pt-site, .pt-start, .pt, .pt-sw) .hinweis p:last-child { margin-bottom: 0; }
:is(.pt-site, .pt-start, .pt, .pt-sw) .hinweis__titel {
  font-family: var(--font-mono); font-size: var(--schrift-mini);
  letter-spacing: var(--sperrung-label); text-transform: uppercase;
  color: var(--text-sekundaer); margin-bottom: var(--raum-2);
}

/* ------------------------------------------------------------ Platzhalter */

.pt-site .platzhalter {
  background: var(--flaeche-ruhig);
  border: var(--linie-haarlinie) solid var(--linie-zart);
  aspect-ratio: 3 / 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--raum-2);
  font-family: var(--font-mono); font-size: var(--schrift-mini);
  letter-spacing: var(--sperrung-label); text-transform: uppercase;
  color: var(--text-sekundaer); text-align: center; padding: var(--raum-4);
}
.pt-site .platzhalter--portraet { aspect-ratio: 1 / 1; }
.pt-site .platzhalter span { display: block; }

/* -------------------------------------------------------------- Schaltfl. */

:is(.pt-site, .pt-start, .pt, .pt-sw) .taste {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 var(--raum-5);
  border: var(--linie-haarlinie) solid var(--tuerkis-700);
  background: var(--tuerkis-700); color: var(--weiss);
  font-family: var(--font-sans); font-size: 14px; font-weight: var(--gewicht-halb);
  text-decoration: none;
  transition: background 140ms ease-out;
}
:is(.pt-site, .pt-start, .pt, .pt-sw) .taste:hover { background: var(--tuerkis-600); border-color: var(--tuerkis-600); color: var(--weiss); }
:is(.pt-site, .pt-start, .pt, .pt-sw) .taste--stumm { background: transparent; color: var(--text-primaer); border-color: var(--grau-200); }
:is(.pt-site, .pt-start, .pt, .pt-sw) .taste--stumm:hover { background: var(--flaeche-zart); color: var(--text-primaer); border-color: var(--grau-200); }

/* Tastenreihe: mehrere Schaltflaechen nebeneinander, mit Umbruch auf schmalen
   Schirmen. Bisher nirgends gesetzt — das Formular brauchte sie zuerst. */
:is(.pt-site, .pt-start, .pt, .pt-sw) .tastenreihe {
  display: flex; flex-wrap: wrap; gap: var(--raum-4);
  margin-top: var(--raum-6); align-items: center;
}
:is(.pt-site, .pt-start, .pt, .pt-sw) .tastenreihe { display: flex; flex-wrap: wrap; gap: var(--raum-4); margin-top: var(--raum-8); }

/* ------------------------------------------------------------- Daten-Liste */

.pt-site .daten { margin: 0; }
.pt-site .daten div { display: grid; grid-template-columns: minmax(0, 22ch) minmax(0, 1fr); gap: var(--raum-4); padding: var(--raum-3) 0; border-bottom: var(--linie-haarlinie) solid var(--linie-zart); }
.pt-site .daten div:last-child { border-bottom: 0; }
.pt-site .daten dt { overflow-wrap: anywhere; font-family: var(--font-mono); font-size: var(--schrift-mini); letter-spacing: var(--sperrung-label); text-transform: uppercase; color: var(--text-sekundaer); }
.pt-site .daten dd { margin: 0; }

/* ------------------------------------------------------------------- Liste */

.pt-site ul.strich { list-style: none; padding: 0; margin: 0 0 var(--raum-6); max-width: 74ch; }
.pt-site ul.strich li { padding: var(--raum-3) 0 var(--raum-3) var(--raum-6); border-bottom: var(--linie-haarlinie) solid var(--linie-zart); position: relative; }
.pt-site ul.strich li::before { content: "—"; position: absolute; left: 0; color: var(--tuerkis-600); font-family: var(--font-mono); }
.pt-site ul.strich li:last-child { border-bottom: 0; }

/* --------------------------------------------------------------------- Fuß */

.pt-site .fuss { background: var(--anthrazit-800); color: var(--grau-200); padding: var(--raum-16) 0 var(--raum-8); }
.pt-site .fuss a { color: var(--grau-200); text-decoration: none; }
.pt-site .fuss a:hover { color: var(--weiss); text-decoration: underline; }
.pt-site .fuss h4 { color: var(--weiss); font-size: var(--schrift-basis); margin-bottom: var(--raum-4); }
.pt-site .fuss .kennung { color: var(--grau-300); }
.pt-site .fuss ul { list-style: none; padding: 0; margin: 0; }
.pt-site .fuss li { padding: var(--raum-1) 0; }
.pt-site .fuss__marke img { height: 34px; width: auto; margin-bottom: var(--raum-5); }
.pt-site .fuss__schluss {
  border-top: var(--linie-haarlinie) solid var(--anthrazit-700);
  margin-top: var(--raum-12); padding-top: var(--raum-5);
  display: flex; flex-wrap: wrap; gap: var(--raum-6);
  font-family: var(--font-mono); font-size: var(--schrift-mini); color: var(--grau-300);
}


/* --- Hinweiskasten -------------------------------------------------------- */
/* Papier 50, links ein 4 px breiter Balken in Gelb 500. Die einzige Stelle,
   an der Gelb auf der Website vorkommt. */
:is(.pt-site, .pt-start, .pt, .pt-sw) .hinweis {
  background: var(--flaeche-ruhig);
  border-left: 4px solid var(--gelb-500);
  padding: var(--raum-6);
  margin: var(--raum-8) 0;
}
:is(.pt-site, .pt-start, .pt, .pt-sw) .hinweis > :first-child { margin-top: 0; }
:is(.pt-site, .pt-start, .pt, .pt-sw) .hinweis > :last-child  { margin-bottom: 0; }

/* --- Werte-Tabelle -------------------------------------------------------- */
/* Zahlen und Einheiten immer in Mono, damit Spalten untereinander stehen. */
.pt-site .werte td:nth-child(2),
.pt-site .werte td:nth-child(3) {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Auf dem Telefon bricht die Tabelle in Kartenform um, statt zu scrollen. */
@media (max-width: 640px) {
  .pt-site .werte, .pt-site .werte tbody, .pt-site .werte tr, .pt-site .werte td { display: block; width: 100%; }
  .pt-site .werte thead { position: absolute; left: -9999px; }
  .pt-site .werte tr {
    border-bottom: 1px solid var(--linie-zart);
    padding: var(--raum-4) 0;
  }
  .pt-site .werte td::before {
    content: attr(data-titel);
    display: block;
    font-family: var(--font-mono);
    font-size: var(--schrift-mini);
    letter-spacing: var(--sperrung-label);
    text-transform: uppercase;
    color: var(--text-schwach);
    margin-bottom: var(--raum-1);
  }
}

/* --- Untermenü Anwendungen ------------------------------------------------ */
/* Auf dem Telefon wird das Untermenü aufgeklappt gezeigt, nicht hinter einem
   zweiten Tipp versteckt — sonst findet es niemand. */
@media (max-width: 900px) {
  .pt-site .navi__untermenu {
    display: block;
    position: static;
    padding-left: var(--raum-4);
    border-left: 1px solid var(--linie-zart);
  }
}

/* --- Kontaktformular ------------------------------------------------------ */
/* Ausgabe kommt aus dem Plugin-Shortcode [pt_kontaktformular]. Nur Tokens,
   keine neuen Farben. Rubin erscheint hier ausnahmsweise, weil ein leeres
   Pflichtfeld ein echter Fehlerzustand ist — nicht als Schmuck. */
:is(.pt-site, .pt-start, .pt, .pt-sw) .formular { max-width: 60ch; margin: 0; }
:is(.pt-site, .pt-start, .pt, .pt-sw) .formular__feld { margin-bottom: var(--raum-6); }
:is(.pt-site, .pt-start, .pt, .pt-sw) .formular__feld > label {
  display: block; margin-bottom: var(--raum-2);
  font-size: var(--schrift-klein); font-weight: var(--gewicht-halb);
  color: var(--text-primaer);
}
:is(.pt-site, .pt-start, .pt, .pt-sw) .formular__feld input[type="text"],
:is(.pt-site, .pt-start, .pt, .pt-sw) .formular__feld input[type="email"],
:is(.pt-site, .pt-start, .pt, .pt-sw) .formular__feld input[type="tel"],
:is(.pt-site, .pt-start, .pt, .pt-sw) .formular__feld textarea {
  width: 100%;
  min-height: var(--touchflaeche);
  padding: var(--raum-3) var(--raum-4);
  border: var(--linie-kontur) solid var(--grau-200);
  background: var(--weiss);
  color: var(--text-primaer);
  font-family: var(--font-sans); font-size: var(--schrift-basis);
  line-height: var(--zeilen-eng);
}
:is(.pt-site, .pt-start, .pt, .pt-sw) .formular__feld textarea { min-height: 8em; resize: vertical; line-height: var(--zeilen-text); }
:is(.pt-site, .pt-start, .pt, .pt-sw) .formular__feld input:focus-visible,
:is(.pt-site, .pt-start, .pt, .pt-sw) .formular__feld textarea:focus-visible {
  outline: 2px solid var(--tuerkis-600); outline-offset: 1px;
  border-color: var(--tuerkis-600);
}
:is(.pt-site, .pt-start, .pt, .pt-sw) .formular__hilfe {
  margin: var(--raum-2) 0 0;
  font-size: var(--schrift-klein); color: var(--text-sekundaer);
}
:is(.pt-site, .pt-start, .pt, .pt-sw) .formular__feld--kontrolle label {
  display: grid; grid-template-columns: auto 1fr; gap: var(--raum-3);
  align-items: start; font-weight: var(--gewicht-normal);
  font-size: var(--schrift-klein); color: var(--text-primaer);
}
:is(.pt-site, .pt-start, .pt, .pt-sw) .formular__feld--kontrolle input { margin-top: 3px; width: 18px; height: 18px; }

:is(.pt-site, .pt-start, .pt, .pt-sw) .formular__feld--fehler input,
:is(.pt-site, .pt-start, .pt, .pt-sw) .formular__feld--fehler textarea { border-color: var(--rubin-500); }
:is(.pt-site, .pt-start, .pt, .pt-sw) .formular__meldung {
  margin: var(--raum-2) 0 0;
  font-size: var(--schrift-klein); color: var(--rubin-700);
}

/* Warnvariante des Hinweiskastens für „Bitte prüfen" nach einem Fehlversuch. */
:is(.pt-site, .pt-start, .pt, .pt-sw) .hinweis--warnung { border-left-color: var(--gelb-600); background: var(--gelb-100); }

/* Honeypot: aus dem Blickfeld und aus dem Fokus, aber nicht display:none —
   manche Bots meiden per display versteckte Felder. */
:is(.pt-site, .pt-start, .pt, .pt-sw) .formular__falle {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

/* --- Oxygen-Kompatibilität ------------------------------------------------ */
/* 1) Oxygen setzt jedem .ct-div-block standardmäßig flex-direction: column.
   Unsere waagrechten Container brauchen daher explizit row. */
.pt-site .gruppe .bahn,
.pt-site .kopf .bahn,
.pt-site .navi,
:is(.pt-site, .pt-start, .pt, .pt-sw) .tastenreihe,
.pt-site .fuss__schluss { flex-direction: row; }

/* 2) Oxygen legt jeder Section einen großen Standard-Innenabstand (~170 px) an.
   Den entfernen — die senkrechten Abstände kommen aus den Abschnittsklassen
   (.abschnitt, .titelfeld .bahn, .fuss), die waagrechten aus .bahn. */
.pt-site .ct-section-inner-wrap { padding: 0; width: 100%; max-width: 100%; }

/* --- Karten-Raster: Umbruch auf Tablet und Telefon ----------------------- */
/* Ohne diese Regeln bleiben die Spalten auf dem Telefon nebeneinander stehen
   und quetschen sich. Tablet: höchstens 2 Spalten. Telefon: eine Spalte. */
@media (max-width: 900px) {
  .pt-site .raster--3,
  .pt-site .raster--4,
  .pt-site .raster--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pt-site .raster--2,
  .pt-site .raster--3,
  .pt-site .raster--4,
  .pt-site .raster--5,
  .pt-site .raster--breit { grid-template-columns: 1fr; }
}

/* Impressum-Kurzfassung im Fuss (24.08.2026) */
.pt-site .fuss__daten { margin: 14px 0 0; font-size: 13px; line-height: 1.6; color: var(--grau-300); }
.pt-site .fuss__daten b { color: var(--weiss); font-weight: 500; }


/* ===== 30-seiten.css ===== */
/* =====================================================================
   30-seiten
   Profectronics Testbeds — Website
   Einfügen unter Oxygen → Stylesheets als eigenes Stylesheet mit
   diesem Namen. Reihenfolge einhalten, sie entscheidet über die
   Kaskade. Nach jeder Änderung: Oxygen → Settings → CSS Cache →
   Regenerate.
   ===================================================================== */

/* Seitenspezifisches. Bewusst kurz — was hier wächst, gehört meist in
   20-bausteine. */

/* --- Startseite ----------------------------------------------------------- */
.pt-site .titelfeld--gross h1 { max-width: 20ch; }

/* --- Anwendungsfelder ----------------------------------------------------- */
/* Die drei Felder tragen keine eigene Farbe. Unterschieden wird über die
   Kennungszeile, nicht über einen Farbcode — Farbe trägt keinen Zustand allein. */
.pt-site .anwendung .werte { margin-top: var(--raum-8); }

/* --- Fachbeiträge --------------------------------------------------------- */
.pt-site .beitrag__meta {
  font-family: var(--font-mono);
  font-size: var(--schrift-mini);
  letter-spacing: var(--sperrung-label);
  text-transform: uppercase;
  color: var(--text-schwach);
}
.pt-site .beitrag__download { margin: var(--raum-8) 0; }

/* --- Kontaktformular, alter Stand ---------------------------------------- */
/* Hier stand ein zweiter, aelterer Satz Formularregeln mit den Klassen
   .pflicht, .fehler und .falle. Die gibt es im ausgegebenen Formular nicht
   mehr — es heisst .formular__feld, .formular__meldung, .formular__falle.
   Zwei Saetze zur selben Sache waren nicht nur tote Fracht: der aeltere
   stand weiter unten und hat den juengeren ueberschrieben, weshalb das
   Zustimmungshaekchen ueber die ganze Breite lief. Entfernt 25.08.2026. */


/* ---------------------------------------------------------------------
   Rechtstexte aus fremder Feder (LegalWeb). Deren Auszeichnung kennen wir
   nicht im Voraus, darum bekommt der Rahmen .rechtstext eigene Grundmasse
   fuer Ueberschriften, Listen und Tabellen.
   --------------------------------------------------------------------- */
.pt-site .rechtstext { max-width: 74ch; }
.pt-site .rechtstext h2 { margin-top: var(--raum-12); }
.pt-site .rechtstext h3 { margin-top: var(--raum-10); }
.pt-site .rechtstext h4,
.pt-site .rechtstext h5 { margin-top: var(--raum-8); font-size: var(--schrift-gross); }
.pt-site .rechtstext > :first-child { margin-top: 0; }
.pt-site .rechtstext p { margin: 0 0 var(--raum-5); }
.pt-site .rechtstext ul,
.pt-site .rechtstext ol { margin: 0 0 var(--raum-5); padding-left: var(--raum-6); }
.pt-site .rechtstext li { margin: 0 0 var(--raum-2); }
.pt-site .rechtstext table { border-collapse: collapse; width: 100%; margin: 0 0 var(--raum-6); }
.pt-site .rechtstext th,
.pt-site .rechtstext td {
  text-align: left; vertical-align: top;
  padding: var(--raum-3) var(--raum-4) var(--raum-3) 0;
  border-bottom: var(--linie-haarlinie) solid var(--linie-zart);
}
.pt-site .rechtstext th { font-weight: var(--gewicht-fett); }
.pt-site .rechtstext strong,
.pt-site .rechtstext b { font-weight: var(--gewicht-fett); }
.pt-site .rechtstext hr { border: 0; border-top: var(--linie-haarlinie) solid var(--linie-zart); margin: var(--raum-8) 0; }

/* Sprachumschalter im Kopf — Mono, klein, ohne Unterstrich der Menüpunkte. */
.pt-site .navi .sprache { display: inline-flex; align-items: center; gap: 4px; }
.pt-site .navi .sprache a {
  border-bottom: 0; padding: 0; color: var(--grau-500);
  font-family: var(--font-mono); font-size: var(--schrift-mini);
  letter-spacing: var(--sperrung-label);
}
.pt-site .navi .sprache a:hover { color: var(--anthrazit-800); border-bottom: 0; }
.pt-site .navi .sprache a[aria-current="true"] { color: var(--anthrazit-800); font-weight: var(--gewicht-mittel); }

/* --- Kopfzeile auf dem Telefon: Aufklappmenue ----------------------------
   Acht Punkte in Basisschrift ergaben auf dem Telefon drei hohe Zeilen —
   die halbe Bildschirmhoehe, bevor der erste Inhalt beginnt. Auf schmalen
   Geraeten liegt die Navigation deshalb hinter einer Taste. Das Attribut
   data-navi setzt erst das Skript in der Kopfzeile: ohne Skript bleibt die
   Navigation sichtbar wie bisher.                                        */
.pt-site .navi__taste {
  display: none; align-items: center; gap: 10px; margin-left: auto;
  padding: 8px 0; background: none; border: 0; color: var(--text-primaer);
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: var(--sperrung-label); text-transform: uppercase;
  cursor: pointer;
}
.pt-site .navi__balken {
  position: relative; display: block; width: 22px; height: 2px;
  background: currentColor;
}
.pt-site .navi__balken::before,
.pt-site .navi__balken::after {
  content: ''; position: absolute; left: 0; width: 22px; height: 2px;
  background: currentColor;
}
.pt-site .navi__balken::before { top: -7px; }
.pt-site .navi__balken::after  { top: 7px; }
.pt-site .kopf[data-navi='auf'] .navi__balken { background: transparent; }
.pt-site .kopf[data-navi='auf'] .navi__balken::before { top: 0; transform: rotate(45deg); }
.pt-site .kopf[data-navi='auf'] .navi__balken::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 760px) {
  .pt-site .kopf .bahn { min-height: 0; padding-top: 12px; padding-bottom: 12px; gap: 8px; }
  .pt-site .kopf__marke img { height: 28px; }
  .pt-site .kopf[data-navi] .navi__taste { display: inline-flex; }
  .pt-site .kopf[data-navi='zu'] .navi { display: none; }
  .pt-site .kopf[data-navi='auf'] .navi {
    display: block; width: 100%; margin-left: 0; padding: 4px 0 6px;
    border-top: 1px solid var(--linie-zart);
  }
  .pt-site .kopf[data-navi='auf'] .navi a {
    display: block; padding: 11px 0; font-size: 15px; border-bottom: 0;
  }
  .pt-site .kopf[data-navi='auf'] .navi a[aria-current='page'] { color: var(--tuerkis-600); }
  .pt-site .kopf[data-navi='auf'] .navi .sprache {
    display: block; margin-top: 4px; padding-top: 10px;
    border-top: 1px solid var(--linie-zart);
  }
  .pt-site .kopf[data-navi='auf'] .navi .sprache a { display: inline; padding: 0; }
}