/* ============================================================
   ProtoFrame – Website-Stylesheet
   Basiert auf dem Marken-Design-System (Skill: /protoframe-design).
   Tokens werden importiert, Komponenten hier als Klassen definiert.
   ============================================================ */

@import url("fonts.css");
@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");
@import url("tokens/borders.css");
@import url("tokens/motion.css");
@import url("tokens/motifs.css");

/* ——— Reset / Basis ——— */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--pf-surface-page);
  color: var(--pf-text-primary);
  font: var(--pf-type-body);
  position: relative;
  overflow-x: hidden;
}

h1, h2, h3, p { margin: 0; }

a { color: var(--pf-text-accent); text-decoration: none; }
a:hover { color: var(--pf-interactive-hover); text-decoration: underline; text-underline-offset: 3px; }
::selection { background: var(--pf-red-100); }

img { max-width: 100%; }

/* ——— Signalpunkte-Feld (Über): Sichtlinien + laufende rote Punkte ——— */
.pf-signalfield {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  display: block;
  width: 100%;
  height: 100%;
}

/* ——— Bewegtes Hintergrund-Canvas (Experiment, Leistungen) ——— */
.pf-waves {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  display: block;
  width: 100%;
  height: 100%;
  /* Weicher Verlauf um den Fluchtpunkt (50% / 16%) – kein harter Kreis */
  -webkit-mask-image: radial-gradient(circle at 50% 16%, transparent 0, transparent 40px, #000 220px);
          mask-image: radial-gradient(circle at 50% 16%, transparent 0, transparent 40px, #000 220px);
}

/* ——— Sichtstrahlen: seitenweites Bündel hinter allen Inhalten ——— */
.pf-rays {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--pf-pattern-sightlines-page);
  background-repeat: no-repeat;
  -webkit-mask-image: var(--pf-sightline-page-mask-cone), var(--pf-sightline-page-mask-fade);
          mask-image: var(--pf-sightline-page-mask-cone), var(--pf-sightline-page-mask-fade);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

/* ——— Layout-Container ——— */
.pf-container {
  max-width: var(--pf-container-max);
  margin: 0 auto;
  padding-left: var(--pf-page-margin);
  padding-right: var(--pf-page-margin);
}

/* ——— Marken-Stempel (Mono, versal) ——— */
.pf-stamp {
  font: var(--pf-type-dimension);
  letter-spacing: var(--pf-tracking-stamp);
  text-transform: uppercase;
  color: var(--pf-text-muted);
}
.pf-label {
  font: var(--pf-type-label);
  letter-spacing: var(--pf-tracking-label);
  text-transform: uppercase;
}

/* Eyebrow-Zeile: starke Oberkante + roter Konstruktionsanker + Stempel */
.pf-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: var(--pf-border-strong);
  padding-top: 12px;
}
.pf-anchor {
  width: var(--pf-anchor-size);
  height: var(--pf-anchor-size);
  background: var(--pf-pattern-anchor);
  flex: none;
}
.pf-anchor--signal { color: var(--pf-anchor-color); }
.pf-anchor--quiet  { color: var(--pf-anchor-color-quiet); }

/* ============================================================
   Header / Navigation
   ============================================================ */
.pf-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--pf-surface-page);
  border-bottom: var(--pf-border-hairline);
  box-shadow: var(--pf-shadow-raise);
}
.pf-header__inner {
  display: flex;
  align-items: center;
  gap: var(--pf-space-5);
  flex-wrap: wrap;
  padding-top: 14px;
  padding-bottom: 14px;
}
.pf-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.pf-brand:hover { text-decoration: none; }
.pf-brand__mark {
  display: block;
  width: 78px;
  height: 48px;
  overflow: hidden;
  flex: none;
}
.pf-brand__mark img {
  display: block;
  width: 78px;
  height: 78px;
  object-fit: contain;
  margin-top: -7px;
}
.pf-brand__word {
  font: var(--pf-weight-bold) var(--pf-text-lg) / 1 var(--pf-font-display);
  letter-spacing: 0.01em;
  color: var(--pf-text-accent);
}

.pf-nav {
  display: flex;
  gap: var(--pf-space-5);
  margin-left: auto;
  flex-wrap: wrap;
}
.pf-nav__link {
  font: var(--pf-type-label);
  letter-spacing: var(--pf-tracking-label);
  text-transform: uppercase;
  color: var(--pf-text-secondary);
  transition: var(--pf-transition-control);
}
.pf-nav__link:hover { color: var(--pf-text-primary); text-decoration: none; }
.pf-nav__link.is-active { color: var(--pf-text-primary); }

.pf-header__loc {
  font: var(--pf-type-dimension);
  letter-spacing: var(--pf-tracking-stamp);
  text-transform: uppercase;
  color: var(--pf-text-faint);
  border-left: var(--pf-border-hairline);
  padding-left: var(--pf-space-4);
}

/* Hamburger (nur mobil) */
.pf-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 22px;
  height: 16px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  flex: none;
}
.pf-nav-toggle span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--pf-text-primary);
  transition: transform 0.22s var(--pf-ease-standard), opacity 0.22s var(--pf-ease-standard);
}

/* Hell/Dunkel-Umschalter (segmentiert) */
.pf-theme {
  display: flex;
  border: var(--pf-border-hairline);
  border-radius: var(--pf-radius-sm);
  overflow: hidden;
  flex: none;
}
.pf-theme__btn {
  font: var(--pf-type-dimension);
  letter-spacing: var(--pf-tracking-label);
  text-transform: uppercase;
  padding: 7px 10px;
  border: 0;
  background: transparent;
  color: var(--pf-text-muted);
  cursor: pointer;
  transition: var(--pf-transition-control);
}
.pf-theme__btn + .pf-theme__btn { border-left: var(--pf-border-hairline); }
.pf-theme__btn:hover { color: var(--pf-text-primary); }
.pf-theme__btn.is-active {
  background: var(--pf-interactive);
  color: var(--pf-text-on-accent);
}

/* ============================================================
   Buttons
   ============================================================ */
.pf-btn {
  font: var(--pf-type-label);
  letter-spacing: var(--pf-tracking-label);
  text-transform: uppercase;
  padding: var(--pf-inset-control);
  border-radius: var(--pf-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: var(--pf-transition-control);
}
.pf-btn:hover { text-decoration: none; }
.pf-btn:active { transform: scale(var(--pf-press-scale)); }
.pf-btn:focus-visible { outline: none; box-shadow: var(--pf-shadow-focus); }

.pf-btn--primary {
  background: var(--pf-interactive);
  color: var(--pf-text-on-accent);
}
.pf-btn--primary:hover { background: var(--pf-interactive-hover); color: var(--pf-text-on-accent); }

.pf-btn--ghost {
  color: var(--pf-text-primary);
  border-color: var(--pf-line-hairline);
}
.pf-btn--ghost:hover { border-color: var(--pf-line-strong); color: var(--pf-text-primary); }

.pf-btn--paper {
  background: var(--pf-paper-050);
  color: var(--pf-graphite-900);
}
.pf-btn--paper:hover { background: var(--pf-blue-200); color: var(--pf-graphite-900); }

/* ============================================================
   Sektionen – Grundrhythmus
   ============================================================ */
.pf-section { padding-top: var(--pf-space-9); padding-bottom: var(--pf-space-9); }

.pf-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--pf-space-5);
  flex-wrap: wrap;
}
.pf-section-head h2 {
  font: var(--pf-type-heading-1);
  letter-spacing: var(--pf-tracking-tight);
}
.pf-section-head p {
  font: var(--pf-type-body);
  color: var(--pf-text-secondary);
  max-width: var(--pf-measure-narrow);
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--pf-space-8);
  align-items: center;
  padding-top: var(--pf-space-9);
  padding-bottom: var(--pf-space-8);
}
.hero__title {
  font: var(--pf-type-display-3);
  letter-spacing: var(--pf-tracking-tight);
  margin-top: var(--pf-space-5);
  max-width: 20ch;
  text-wrap: pretty;
}
.hero__lead {
  font: var(--pf-type-body-lg);
  color: var(--pf-text-secondary);
  max-width: var(--pf-measure-prose);
  margin-top: var(--pf-space-5);
  text-wrap: pretty;
}
.hero__actions {
  display: flex;
  gap: var(--pf-space-3);
  margin-top: var(--pf-space-6);
  flex-wrap: wrap;
}

/* Bildfläche „Blatt im Raster" mit Gitter-Animation */
.figure {
  position: relative;
  width: 100%;
  min-width: 0;
  aspect-ratio: var(--pf-figure-ratio);
  min-height: 260px;
  border: var(--pf-figure-frame);
  background: radial-gradient(118% 100% at 50% 36%,
              var(--pf-surface-card) 0 38%, var(--pf-surface-page) 76%, var(--pf-surface-sunken) 100%);
  overflow: hidden;
}
.figure__inner-shadow {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 70px -18px rgba(9, 59, 99, 0.16);
  pointer-events: none;
}
.figure__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.figure__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  border-top: var(--pf-border-construction);
  background: var(--pf-surface-card);
  padding: 10px 14px;
  display: flex;
  gap: var(--pf-space-5);
  flex-wrap: wrap;
}
.figure__caption .pf-label,
.figure__caption span {
  font: var(--pf-type-dimension);
  letter-spacing: var(--pf-tracking-label);
  text-transform: uppercase;
  color: var(--pf-text-muted);
}
.figure__caption .figure__rev {
  color: var(--pf-text-faint);
  margin-left: auto;
  letter-spacing: 0;
  text-transform: none;
}

/* ============================================================
   Systeme – Eigenentwicklungen
   ============================================================ */
.systeme__stamp {
  font: var(--pf-type-dimension);
  letter-spacing: var(--pf-tracking-stamp);
  text-transform: uppercase;
  color: var(--pf-text-muted);
  border-top: var(--pf-border-strong);
  padding-top: 12px;
}
/* Raster fuer die Systemkacheln – waechst mit weiteren Eintraegen */
.systeme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--pf-space-5);
  align-items: stretch;
  margin-top: var(--pf-space-5);
}
.systeme-grid > .systeme-card { margin-top: 0; align-content: start; }
.systeme-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--pf-space-6);
  align-items: start;
  margin-top: var(--pf-space-5);
  background: var(--pf-surface-card);
  border: var(--pf-border-hairline);
  border-top: 1.5px solid var(--pf-blue-500);
  border-radius: var(--pf-radius-md);
  padding: var(--pf-inset-card);
  color: var(--pf-text-primary);
  transition: var(--pf-transition-control);
}
.systeme-card:hover { border-color: var(--pf-line-strong); border-top-color: var(--pf-blue-500); color: var(--pf-text-primary); text-decoration: none; }

/* Anklickbare Karte deutlich von der Platzhalterkarte unterscheiden.
   Die Merkmale muessen auch ohne Mauszeiger sichtbar sein - auf dem
   Handy gibt es kein Hover. */
a.systeme-card {
  cursor: pointer;
  border-left: 1.5px solid var(--pf-blue-500);
}
a.systeme-card:hover,
a.systeme-card:focus-visible {
  border-color: var(--pf-blue-500);
  border-top-color: var(--pf-blue-500);
  box-shadow: 0 2px 4px rgba(15, 94, 155, 0.06), 0 14px 30px -18px rgba(15, 94, 155, 0.45);
  transform: translateY(-2px);
}
a.systeme-card:active { transform: translateY(0); }

/* Fusszeile als Handlungsaufforderung: zeigende Hand als Strichgrafik.
   Als Maske eingebunden, damit sie sich ueber currentColor einfaerbt und
   in Hell wie Dunkel stimmt. Bewusst kein Emoji - das waere farbig und
   wuerde aus dem monochromen Zeichnungsstil fallen. Kein externer Abruf:
   die Grafik steckt als data-URI im Stylesheet. */
a.systeme-card .systeme-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
a.systeme-card .systeme-card__more::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M10%209.5V4.2a1.8%201.8%200%200%201%203.6%200V11'/%3E%3Cpath%20d='M13.6%2010.4V8.6a1.8%201.8%200%200%201%203.6%200V12'/%3E%3Cpath%20d='M17.2%2011.4v-.6a1.8%201.8%200%200%201%203.6%200V15a6.5%206.5%200%200%201-6.5%206.5h-1.6c-2.3%200-3.7-.7-4.9-1.9l-4-4a1.9%201.9%200%200%201%202.7-2.7L10%2015.2'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M10%209.5V4.2a1.8%201.8%200%200%201%203.6%200V11'/%3E%3Cpath%20d='M13.6%2010.4V8.6a1.8%201.8%200%200%201%203.6%200V12'/%3E%3Cpath%20d='M17.2%2011.4v-.6a1.8%201.8%200%200%201%203.6%200V15a6.5%206.5%200%200%201-6.5%206.5h-1.6c-2.3%200-3.7-.7-4.9-1.9l-4-4a1.9%201.9%200%200%201%202.7-2.7L10%2015.2'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: var(--pf-transition-control);
}
a.systeme-card:hover .systeme-card__more::before,
a.systeme-card:focus-visible .systeme-card__more::before { transform: translate(1px, 1px); }
a.systeme-card:hover .systeme-card__more { text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  a.systeme-card, a.systeme-card .systeme-card__more::after { transition: none; }
  a.systeme-card:hover { transform: none; }
  a.systeme-card:hover .systeme-card__more::after { transform: none; }
}
.systeme-card__title {
  display: flex;
  align-items: center;
  gap: var(--pf-space-3);
  flex-wrap: wrap;
}
.systeme-card__name { font: var(--pf-type-heading-1); letter-spacing: var(--pf-tracking-tight); }
.systeme-card__sub {
  font: var(--pf-type-dimension);
  letter-spacing: var(--pf-tracking-label);
  text-transform: uppercase;
  color: var(--pf-text-faint);
  margin-top: 10px;
}
.systeme-card__body p { font: var(--pf-type-body-lg); color: var(--pf-text-secondary); text-wrap: pretty; }
.systeme-card__more {
  display: inline-block;
  font: var(--pf-type-label);
  letter-spacing: var(--pf-tracking-label);
  text-transform: uppercase;
  color: var(--pf-text-accent);
  margin-top: var(--pf-space-4);
}
.systeme-card__soon {
  display: inline-block;
  font: var(--pf-type-label);
  letter-spacing: var(--pf-tracking-label);
  text-transform: uppercase;
  color: var(--pf-text-faint);
  margin-top: var(--pf-space-4);
}
/* Platzhalter-Karte (noch nicht verlinkt) */
.systeme-card--placeholder { cursor: default; }

/* Status-Badge */
.pf-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: var(--pf-type-label);
  letter-spacing: var(--pf-tracking-label);
  text-transform: uppercase;
  border-radius: var(--pf-radius-pill);
  padding: 4px 10px;
}
.pf-status__dot { width: 6px; height: 6px; border-radius: var(--pf-radius-pill); background: currentColor; }
/* Eine Kennzeichnung bricht nie in sich um - lieber die ganze umbrechen */
.pf-status { white-space: nowrap; }

/* Schmal: der Name nimmt die Zeile fuer sich, die Kennzeichnungen ruecken
   gemeinsam darunter. Nebeneinander brauchen zwei davon rund 217 px - das
   passt ab 320 px Geraetebreite, aber nicht zusaetzlich neben den Namen. */
@media (max-width: 560px) {
  .systeme-card__title { gap: 8px; }
  .systeme-card__name { flex: 1 0 100%; }
  .pf-status { padding: 3px 8px; }
}
.pf-status--planned { color: var(--pf-status-warn); background: var(--pf-status-warn-bg); }
.pf-status--live    { color: var(--pf-status-ok);   background: var(--pf-status-ok-bg); }
.pf-status--dev     { color: var(--pf-status-info); background: var(--pf-status-info-bg); }

/* ============================================================
   Leistungen
   ============================================================ */
.leistungen {
  border-top: var(--pf-border-hairline);
  border-bottom: var(--pf-border-hairline);
  background: var(--pf-surface-card);
}
.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--pf-space-6);
  margin-top: var(--pf-space-7);
}
.service {
  border-top: var(--pf-border-strong);
  padding-top: var(--pf-space-4);
  display: flex;
  flex-direction: column;
}
.service__head { display: flex; align-items: center; gap: 10px; }
.service__no { font: var(--pf-type-dimension); letter-spacing: var(--pf-tracking-label); color: var(--pf-text-faint); }
.service__title { font: var(--pf-type-heading-2); margin-top: var(--pf-space-3); text-wrap: pretty; }
.service__body { font: var(--pf-type-body); color: var(--pf-text-secondary); margin-top: var(--pf-space-3); text-wrap: pretty; }
.service__foot {
  border-top: var(--pf-border-construction);
  margin-top: auto;
  padding-top: var(--pf-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-2);
}
/* Abstand zwischen Text und Fußzeile, wenn die Karte gestreckt wird */
.service__body { margin-bottom: var(--pf-space-4); }
.service__meta { font: var(--pf-type-dimension); letter-spacing: var(--pf-tracking-label); text-transform: uppercase; color: var(--pf-text-muted); }
.service__cta { font: var(--pf-type-dimension); letter-spacing: var(--pf-tracking-label); text-transform: uppercase; }

/* ============================================================
   Arbeitsweise
   ============================================================ */
.steps {
  list-style: none;
  margin: var(--pf-space-7) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--pf-space-6);
}
.step { position: relative; padding-top: var(--pf-space-6); }
.step__rule { position: absolute; top: 0; left: 0; right: 0; border-top: var(--pf-border-construction); }
.step__anchor {
  position: absolute;
  top: 0; left: 0;
  width: var(--pf-anchor-size);
  height: var(--pf-anchor-size);
  transform: translate(-1px, -4px);
  color: var(--pf-anchor-color);
  background: var(--pf-pattern-anchor);
}
.step__no {
  font: var(--pf-weight-bold) var(--pf-text-4xl) / 1 var(--pf-font-display);
  color: var(--pf-blue-200);
  letter-spacing: var(--pf-tracking-tight);
}
.step__title { font: var(--pf-type-heading-2); margin-top: var(--pf-space-3); }
.step__body { font: var(--pf-type-body); color: var(--pf-text-secondary); margin-top: var(--pf-space-3); text-wrap: pretty; }

/* ============================================================
   Kontakt – dunkler Graphit-Block
   ============================================================ */
.contact {
  background: var(--pf-graphite-900);
  color: var(--pf-paper-050);
  border-top: 1px solid var(--pf-graphite-700);
  border-bottom: 1px solid var(--pf-graphite-700);
  box-shadow: inset 0 1px 0 0 rgba(251, 251, 249, 0.06);
}
.contact__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--pf-space-7);
  align-items: end;
}
.contact__stamp {
  font: var(--pf-type-dimension);
  letter-spacing: var(--pf-tracking-stamp);
  text-transform: uppercase;
  color: var(--pf-graphite-400);
  border-top: 1.5px solid var(--pf-graphite-600);
  padding-top: 12px;
}
.contact__title {
  font: var(--pf-type-display-3);
  letter-spacing: var(--pf-tracking-tight);
  margin-top: var(--pf-space-5);
  max-width: 18ch;
  text-wrap: pretty;
}
.contact__lead {
  font: var(--pf-type-body-lg);
  color: var(--pf-graphite-300);
  margin-top: var(--pf-space-4);
  max-width: var(--pf-measure-narrow);
  text-wrap: pretty;
}
.contact__side { display: flex; flex-direction: column; gap: var(--pf-space-4); align-items: flex-start; }
.contact__note {
  font: var(--pf-type-data);
  color: var(--pf-graphite-400);
  border-top: 1px solid var(--pf-graphite-700);
  padding-top: var(--pf-space-3);
  width: 100%;
}
.contact a { color: var(--pf-blue-200); }

/* Dark Mode: Seite ist selbst graphitschwarz – Kontaktblock leicht abheben,
   sonst „schwarz auf schwarz" */
[data-pf-theme="dark"] .contact {
  background: var(--pf-graphite-800);
  border-top-color: var(--pf-graphite-600);
  border-bottom-color: var(--pf-graphite-600);
}

/* ============================================================
   Footer
   ============================================================ */
.pf-footer { border-top: var(--pf-border-hairline); }
.pf-footer__inner {
  display: flex;
  gap: var(--pf-space-5);
  flex-wrap: wrap;
  align-items: baseline;
  padding-top: var(--pf-space-5);
  padding-bottom: var(--pf-space-7);
}
.pf-footer__word { font: var(--pf-weight-bold) var(--pf-text-base) / 1 var(--pf-font-display); color: var(--pf-blue-500); }
.pf-footer__loc { font: var(--pf-type-dimension); letter-spacing: var(--pf-tracking-label); text-transform: uppercase; color: var(--pf-text-muted); }
.pf-footer__links { display: flex; gap: var(--pf-space-4); margin-left: auto; flex-wrap: wrap; }
.pf-footer__links a { font: var(--pf-type-dimension); letter-spacing: var(--pf-tracking-label); text-transform: uppercase; color: var(--pf-text-secondary); }
.pf-footer__note {
  flex-basis: 100%;
  border-top: var(--pf-border-construction);
  padding-top: var(--pf-space-3);
  font: var(--pf-type-dimension);
  color: var(--pf-text-faint);
}

/* ============================================================
   Detailseiten (Leistungen, Über …)
   ============================================================ */
.pf-page-head { padding-top: var(--pf-space-8); padding-bottom: var(--pf-space-5); }
.pf-page-head__stamp {
  font: var(--pf-type-dimension);
  letter-spacing: var(--pf-tracking-stamp);
  text-transform: uppercase;
  color: var(--pf-text-muted);
  border-top: var(--pf-border-strong);
  padding-top: 12px;
  display: inline-block;
}
.pf-page-head h1 {
  font: var(--pf-type-display-3);
  letter-spacing: var(--pf-tracking-tight);
  margin-top: var(--pf-space-4);
  max-width: 18ch;
  text-wrap: pretty;
}
.pf-page-head p {
  font: var(--pf-type-body-lg);
  color: var(--pf-text-secondary);
  max-width: var(--pf-measure-prose);
  margin-top: var(--pf-space-4);
  text-wrap: pretty;
}

.leistung {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  gap: var(--pf-space-7);
  padding-top: var(--pf-space-8);
  padding-bottom: var(--pf-space-8);
  border-top: var(--pf-border-hairline);
  scroll-margin-top: 84px;
}
.leistung__no {
  font: var(--pf-weight-bold) var(--pf-text-3xl) / 1 var(--pf-font-display);
  color: var(--pf-blue-200);
  letter-spacing: var(--pf-tracking-tight);
}
.leistung__title {
  font: var(--pf-type-heading-1);
  letter-spacing: var(--pf-tracking-tight);
  margin-top: var(--pf-space-3);
}
.leistung__body > p {
  font: var(--pf-type-body);
  color: var(--pf-text-secondary);
  text-wrap: pretty;
}
.leistung__meta {
  font: var(--pf-type-label);
  letter-spacing: var(--pf-tracking-label);
  text-transform: uppercase;
  color: var(--pf-text-muted);
  margin-top: var(--pf-space-5);
}

/* Merkmalsliste mit Konstruktionsanker */
.pf-list { list-style: none; margin: var(--pf-space-4) 0 0; padding: 0; }
.pf-list li {
  position: relative;
  padding: var(--pf-space-3) 0 var(--pf-space-3) var(--pf-space-5);
  border-top: var(--pf-border-hairline);
  font: var(--pf-type-body-sm);
  color: var(--pf-text-secondary);
}
.pf-list li:last-child { border-bottom: var(--pf-border-hairline); }
.pf-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--pf-anchor-size);
  height: var(--pf-anchor-size);
  transform: translateY(-50%);
  color: var(--pf-anchor-color-quiet);
  background: var(--pf-pattern-anchor);
}

@media (max-width: 720px) {
  .leistung {
    grid-template-columns: 1fr;
    gap: var(--pf-space-4);
    padding-top: var(--pf-space-7);
    padding-bottom: var(--pf-space-7);
  }
}

/* ============================================================
   Textblöcke, Panels, Zwei-Spalten
   ============================================================ */
.pf-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--pf-space-7);
  align-items: start;
}
/* Fester Zwei-Spalter (z. B. Kontakt: Text | Formular), bricht erst mobil um */
.pf-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--pf-space-7);
  align-items: start;
}
/* Variante: Text breiter als das Nebenelement */
.pf-split--text { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }

/* Schriftfeld / Titelblock (wie in technischen Zeichnungen) */
.pf-titleblock {
  border: var(--pf-border-strong);
  background: var(--pf-surface-card);
}
.pf-titleblock__row { display: grid; grid-template-columns: 1fr 1fr; }
.pf-titleblock__row + .pf-titleblock__row { border-top: var(--pf-border-hairline); }
.pf-tb-cell { padding: var(--pf-space-4); }
.pf-tb-cell + .pf-tb-cell { border-left: var(--pf-border-hairline); }
.pf-tb-label {
  display: block;
  font: var(--pf-type-dimension);
  letter-spacing: var(--pf-tracking-label);
  text-transform: uppercase;
  color: var(--pf-text-faint);
  margin-bottom: 6px;
}
.pf-tb-value {
  display: block;
  font: var(--pf-type-data);
  color: var(--pf-text-primary);
}
.pf-titleblock__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pf-space-3);
  padding: var(--pf-space-3) var(--pf-space-4);
  border-top: var(--pf-border-strong);
}
.pf-titleblock__foot .pf-tb-label { margin-bottom: 0; }
.pf-tb-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: var(--pf-type-label);
  letter-spacing: var(--pf-tracking-label);
  text-transform: uppercase;
  color: var(--pf-text-accent);
}
.pf-tb-status .pf-anchor { width: 9px; height: 9px; }
.pf-prose > p { font: var(--pf-type-body); color: var(--pf-text-secondary); text-wrap: pretty; }
.pf-prose > p + p { margin-top: var(--pf-space-4); }
.pf-prose h2 { font: var(--pf-type-heading-1); letter-spacing: var(--pf-tracking-tight); margin-bottom: var(--pf-space-4); }

/* Zitat / philosophischer Akzent */
.pf-quote {
  font: var(--pf-type-quote);
  color: var(--pf-text-primary);
  border-top: var(--pf-border-strong);
  margin: var(--pf-space-7) 0 0;
  padding-top: var(--pf-space-4);
  max-width: var(--pf-measure-prose);
}

.pf-panel {
  background: var(--pf-surface-card);
  border: var(--pf-border-hairline);
  border-top: 1.5px solid var(--pf-blue-500);
  border-radius: var(--pf-radius-md);
  padding: var(--pf-inset-card);
}
.pf-panel h2 { font: var(--pf-type-heading-2); margin-bottom: var(--pf-space-3); }

/* ============================================================
   Formular
   ============================================================ */
.pf-form { display: grid; gap: var(--pf-space-4); }
.pf-field { display: grid; gap: 6px; }
.pf-field > span {
  font: var(--pf-type-label);
  letter-spacing: var(--pf-tracking-label);
  text-transform: uppercase;
  color: var(--pf-text-muted);
}
.pf-field input,
.pf-field textarea {
  font: var(--pf-type-ui);
  color: var(--pf-text-primary);
  background: var(--pf-surface-page);
  border: var(--pf-border-hairline);
  border-radius: var(--pf-radius-sm);
  padding: var(--pf-inset-control);
}
.pf-field textarea { resize: vertical; min-height: 130px; }
.pf-field input:focus,
.pf-field textarea:focus {
  outline: none;
  border-color: var(--pf-line-accent);
  box-shadow: var(--pf-shadow-focus);
}
.pf-btn--block { width: 100%; }

/* ============================================================
   Flip-Karte (Kontaktformular → Danke)
   ============================================================ */
.pf-flip { perspective: 1200px; }
.pf-flip__inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform var(--pf-duration-slow) var(--pf-ease-standard);
}
.pf-flip__inner.is-flipped { transform: rotateY(180deg); }
.pf-flip__face {
  background: var(--pf-surface-card);
  border: var(--pf-border-hairline);
  border-radius: var(--pf-radius-md);
  padding: var(--pf-inset-card);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.pf-flip__face h2 { font: var(--pf-type-heading-2); margin-bottom: var(--pf-space-4); }
.pf-flip__face--back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.pf-flip__face--back p { font: var(--pf-type-body); color: var(--pf-text-secondary); }
.pf-check {
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--pf-blue-500);
  color: var(--pf-blue-500);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--pf-space-4);
}
.pf-check svg { width: 22px; height: 22px; }

.pf-mail {
  font: var(--pf-type-data);
  color: var(--pf-text-accent);
  margin: var(--pf-space-3) 0;
  display: inline-block;
}

/* ============================================================
   Rechtliche Seiten (Impressum, Datenschutz)
   ============================================================ */
.pf-legal__block { padding: var(--pf-space-6) 0; border-top: var(--pf-border-hairline); }
.pf-legal__block:last-child { border-bottom: var(--pf-border-hairline); }
.pf-legal__block h2 { font: var(--pf-type-heading-2); margin-bottom: var(--pf-space-3); }
.pf-legal__block p { font: var(--pf-type-body-sm); color: var(--pf-text-secondary); }
.pf-legal__block p + p { margin-top: var(--pf-space-3); }
.pf-legal__block address { font: var(--pf-type-body-sm); color: var(--pf-text-secondary); font-style: normal; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 720px) {
  :root { --pf-page-margin: var(--pf-space-4); }

  .pf-split { grid-template-columns: 1fr; }

  .pf-nav-toggle { display: flex; order: 3; margin-left: 0; }
  .pf-theme { order: 2; margin-left: auto; }
  .pf-header__loc { display: none; }
  .pf-nav {
    display: none;
    order: 5;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    margin-left: 0;
    border-top: var(--pf-border-hairline);
    margin-top: var(--pf-space-2);
  }
  .pf-header.nav-is-open .pf-nav { display: flex; }
  .pf-nav__link { padding: var(--pf-space-3) 0; border-bottom: 1px solid var(--pf-line-hairline); }

  .pf-header.nav-is-open .pf-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .pf-header.nav-is-open .pf-nav-toggle span:nth-child(2) { opacity: 0; }
  .pf-header.nav-is-open .pf-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Abstände & Typo enger fassen */
  .pf-section { padding-top: var(--pf-space-7); padding-bottom: var(--pf-space-7); }
  .hero { padding-top: var(--pf-space-7); padding-bottom: var(--pf-space-6); gap: var(--pf-space-6); }
  .hero__title,
  .contact__title {
    font: var(--pf-weight-semibold) var(--pf-text-3xl) / var(--pf-leading-snug) var(--pf-font-display);
  }
  .hero__actions { width: 100%; }
  .hero__actions .pf-btn { flex: 1 1 auto; }
}

/* Sehr kleine Geräte (iPhone SE etc.) */
@media (max-width: 380px) {
  .hero__title,
  .contact__title {
    font: var(--pf-weight-semibold) var(--pf-text-2xl) / var(--pf-leading-snug) var(--pf-font-display);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}