/* Portfolio-Shell */

:root {
  --azure: #4f8dff;
  --azure-mid: #3367e5;
  --azure-deep: #0b1220;
  --surface-glass: rgba(255, 255, 255, 0.22);
  --surface-glass-border: rgba(255, 255, 255, 0.55);
  --text-on-dark: #e5f0ff;
  --text-muted: rgba(148, 163, 184, 0.9);
  --ink: #020617;
  --accent: #f5d300;
  --accent-bright: #ffe94d;
  --accent-deep: #c9a800;
  --btn-radius: 3px;
  --btn-text-solid: #1e293b;
  --btn-primary-edge: #8a7200;
  --font-sans: "DM Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --radius-lg: 1.25rem;
  --shadow-glass: 0 8px 32px rgba(0, 20, 60, 0.35);
  --tile-azur-border-hover: rgba(79, 141, 255, 0.5);
  /* Glas-Kachel (Referenz: .cta-module „Bereit für ein System…“) */
  --tile-glass-border: rgba(79, 141, 255, 0.28);
  --tile-glass-shadow:
    0 14px 44px rgba(2, 6, 18, 0.5),
    0 0 24px rgba(79, 141, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 0 1px rgba(79, 141, 255, 0.06),
    inset 0 0 32px rgba(79, 141, 255, 0.14);
  --tile-glass-shadow-hover:
    0 14px 40px rgba(0, 0, 0, 0.35),
    0 0 28px rgba(79, 141, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 0 1px rgba(79, 141, 255, 0.06),
    inset 0 0 32px rgba(79, 141, 255, 0.14);
  --tile-glass-blur: blur(15px) saturate(140%);
  --tile-azur-glow-hover: var(--tile-glass-shadow-hover);
  --surface-kachel: rgba(20, 30, 50, 0.58);
  --surface-kachel-fallback: #141d2e;
  --surface-kachel-deep: rgba(20, 30, 50, 0.72);
  --surface-kachel-toggle: color-mix(in srgb, var(--surface-kachel-deep) 82%, rgb(2 6 14) 18%);
  --surface-kachel-muted: rgba(20, 30, 50, 0.48);
  --surface-kachel-input: rgba(20, 30, 50, 0.86);
  --surface-kachel-panel: rgba(20, 30, 50, 0.66);
  --surface-kachel-icon: rgba(11, 19, 36, 0.78);
  --surface-console-outer: rgba(10, 18, 36, 0.94);
  --surface-console-inner: rgba(8, 15, 32, 0.97);
  --surface-console-showroom: rgba(10, 18, 36, 0.92);
  --surface-console-sidebar: rgba(14, 22, 42, 0.96);
  --surface-console-foot: rgba(10, 18, 36, 0.9);
  --surface-console-stage: rgba(7, 13, 28, 0.98);
  --surface-showroom-hint: rgba(8, 15, 30, 0.45);
  --surface-showroom-hint-dense: rgba(8, 15, 30, 0.82);
  --bg-grid-size: 50px;
  --bg-grid-line: rgba(79, 141, 255, 0.038);
  --bg-grid-line-on-light: rgba(79, 141, 255, 0.042);
  --bg-deep: #0a0f1a;
  --bg-base: #060a12;
  --bg-vignette-mask: radial-gradient(
    ellipse 72% 68% at 50% 46%,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.72) 48%,
    rgba(0, 0, 0, 0.28) 72%,
    rgba(0, 0, 0, 0) 100%
  );
  --bg-vignette-mask-grid: radial-gradient(
    ellipse 82% 78% at 50% 48%,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.62) 52%,
    rgba(0, 0, 0, 0.35) 74%,
    rgba(0, 0, 0, 0.12) 100%
  );
  --scroll-restore-bg: #020617;
  --header-bg: rgba(10, 24, 56, 0.6);
  --header-bg-mobile: rgba(10, 24, 56, 0.98);
  --header-border: rgba(255, 255, 255, 0.12);
  --header-theme-divider: rgba(255, 255, 255, 0.14);
  --mobile-nav-bg: rgba(10, 24, 56, 0.96);
  --mobile-nav-border: rgba(255, 255, 255, 0.2);
  --mobile-nav-divider: rgba(255, 255, 255, 0.14);
  --mobile-nav-hover: rgba(255, 255, 255, 0.1);
  --nav-cursor-accent: rgba(245, 211, 0, 0.88);
  --segment-bg-color: #0a0f1a;
  --segment-bg-gradient: radial-gradient(
      ellipse 95% 70% at 50% -8%,
      rgba(79, 141, 255, 0.13) 0%,
      transparent 58%
    ),
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(79, 141, 255, 0.055) 0%, transparent 45%),
    linear-gradient(180deg, #020617 0%, #060a12 22%, #0a0f1a 58%, #0b1220 100%);
  --segment-grid-line: rgba(79, 141, 255, 0.045);
  --hero-lead-color: rgba(229, 240, 255, 0.92);
  --path-flow-line-duration: 7s;
  --path-flow-particle-max: 24;
  --path-flow-spawn-min-ms: 450;
  --path-flow-spawn-jitter-ms: 800;
  --path-flow-particle-radius: 2.4;
  --path-flow-particles-per-tile: 3;
  --path-flow-trail: 0.085;
  --path-flow-trail-width: 2.8;
  --path-flow-trail-head: rgba(168, 128, 0, 0.44);
  --path-flow-trail-end: rgba(138, 105, 0, 0);
  --path-flow-particle-core: rgba(184, 140, 0, 0.52);
  --path-flow-particle-opacity: 0.5;
  --path-flow-speed-min: 0.055;
  --path-flow-speed-max: 0.095;
  --footer-map-filter: brightness(0.9) saturate(0.94);
  --footer-link: rgba(255, 233, 77, 0.96);
  --footer-link-hover: var(--accent);
  --footer-link-admin: #ffffff;
  --footer-link-admin-hover: #ffffff;
  --footer-link-line: rgba(244, 244, 245, 0.3);
  --footer-link-line-strong: rgba(244, 244, 245, 0.8);
  --footer-link-line-hover: rgba(244, 244, 245, 0.8);
  --footer-cursor-hover: var(--accent);
  --text-section-headline: #cbd5e1;
  --text-section-headline-shadow: 0 0 18px rgba(203, 213, 225, 0.16), 0 0 28px rgba(245, 211, 0, 0.12);
  --text-section-sub: rgba(226, 232, 240, 0.88);
  --text-section-sub-mono: rgba(226, 232, 240, 0.62);
  --text-section-intro: #f8fafc;
  --text-tile-title: rgba(248, 250, 252, 0.98);
  --text-tile-body: rgba(186, 198, 220, 0.88);
  --text-contact-title: rgba(248, 250, 252, 0.98);
  --text-contact-lead: rgba(186, 198, 220, 0.9);
  --terminal-bg: #030712;
  --main-segment-border: rgba(79, 141, 255, 0.42);
  --main-segment-shadow: 0 -1px 0 rgba(79, 141, 255, 0.18);
  --viewport-chrome-corner-color: rgba(245, 211, 0, 0.82);
  --viewport-chrome-corner-opacity: 0.5;
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
}

.tech-mono {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.headline-bracket {
  color: var(--accent);
  font-weight: inherit;
}

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

html {
  scroll-behavior: smooth;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  color: var(--text-on-dark);
  background-color: var(--bg-deep);
  background-image: linear-gradient(180deg, var(--bg-base) 0%, var(--bg-deep) 55%, var(--bg-deep) 100%);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Seiten-Gitter (fix, nur Optik) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(var(--bg-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-grid-line) 1px, transparent 1px);
  background-size: var(--bg-grid-size) var(--bg-grid-size);
  -webkit-mask-image: var(--bg-vignette-mask);
  mask-image: var(--bg-vignette-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* Admin: etwas hellere Linien, gleiche Maske */
body.admin-page-view::before,
body.legal-page-view::before {
  background-image:
    linear-gradient(rgba(79, 141, 255, 0.048) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 141, 255, 0.048) 1px, transparent 1px);
}

.page {
  position: relative;
  z-index: 1;
  /* Platz für fixe Leiste; Uhr zählt nicht (liegt drüber) */
  --page-padding-top: 3.9rem;
  --site-header-bar-height: calc(3rem + 1px);
  padding-top: var(--page-padding-top);
  width: 100%;
  overflow-x: clip;
  background-color: transparent;
}

/* Glasmorphism-Karten */

.glass-panel {
  background: var(--surface-glass);
  border: 1px solid var(--surface-glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition:
    transform 260ms ease,
    box-shadow 260ms ease,
    border-color 220ms ease,
    background 220ms ease;
}

.glass-panel--pad {
  padding: 1.5rem 1.75rem;
}

@media (min-width: 640px) {
  .glass-panel--pad {
    padding: 2rem 2.25rem;
  }
}

.glass-panel:hover,
.glass-panel:focus-within {
  transform: translateY(-0.35rem);
  border-color: rgba(15, 23, 42, 0.18);
  box-shadow:
    0 18px 36px rgba(15, 23, 42, 0.38),
    0 6px 18px rgba(15, 23, 42, 0.25);
  background: rgba(255, 255, 255, 0.3);
}

.content-card {
  transition:
    transform 280ms ease,
    box-shadow 280ms ease,
    border-color 220ms ease,
    background 220ms ease;
}

.content-card:hover,
.content-card:focus-within {
  transform: translateY(-5px);
  box-shadow:
    0 16px 34px rgba(15, 23, 42, 0.3),
    0 6px 16px rgba(15, 23, 42, 0.2);
}

/* Header (Unterkante per ::after über der Uhr, z-index) */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  border-bottom: none;
  background: var(--header-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--header-border);
  z-index: 6;
  pointer-events: none;
}

/* Startseite: Hero-Karte zieht unter die Leiste — 1px-Header-Kante wirkte wie Canvas-Querlinie oben */
body:has(#home) .site-header::after {
  display: none;
}

.site-header__tools {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0.4rem;
  margin-left: auto;
}

.site-header__actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: 0;
}

/* Header: Design | Mond — Schalter — Sonne (.admin-toggle__*, ohne Kachel-Rahmen) */
.site-theme-toggle {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0 0 0 0.85rem;
  background: none;
  border: none;
  border-left: 1px solid var(--header-theme-divider);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Eine Zeile mit Schalter — Label sitzt in derselben Flex-Reihe (nicht daneben) */
.site-theme-toggle__row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex-wrap: nowrap;
}

.site-theme-toggle__title {
  display: inline-flex;
  align-items: center;
  height: 1.5rem;
  margin: 0;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-muted);
  transform: translateY(2px);
}

.site-theme-toggle .admin-toggle__label {
  color: var(--text-muted);
}

.site-theme-toggle .site-theme-toggle__mode-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 1.65rem;
  width: 1.65rem;
  min-width: 1.65rem;
  line-height: 0;
}

.site-theme-toggle .site-theme-toggle__mode-icon svg {
  display: block;
  width: 1.12rem;
  height: 1.12rem;
}

html:not([data-theme="light"]) .site-theme-toggle .admin-toggle__label--off {
  color: var(--text-on-dark);
}

html[data-theme="light"] .site-theme-toggle .admin-toggle__label--on {
  color: var(--accent);
}

.site-header__inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.55rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: relative;
  min-height: 3rem;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  position: absolute;
  left: 1.5rem;
  top: calc(100% + 0.45rem);
  z-index: 12;
  transition: top 420ms ease, transform 420ms ease;
  transform: translateY(0);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-on-dark);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

.site-logo__img {
  height: 3.84rem;
  max-width: min(19.2rem, calc(100vw - 8rem));
  width: auto;
  display: block;
  transition: height 420ms ease, max-width 420ms ease;
  filter: drop-shadow(0 10px 16px rgba(2, 6, 23, 0.42));
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 220ms ease,
    visibility 220ms ease,
    height 420ms ease,
    max-width 420ms ease;
}

.site-logo__typing {
  display: inline-flex;
  align-items: center;
  min-height: 1em;
  position: relative;
  font-family: var(--font-mono);
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: 0.045em;
  text-transform: lowercase;
  color: var(--text-on-dark);
  text-shadow: 0 0 10px rgba(2, 6, 23, 0.22);
  opacity: 1;
  visibility: visible;
  transition: opacity 220ms ease, visibility 220ms ease, font-size 420ms ease;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

.site-logo__typing::after {
  content: "_";
  margin-left: 0.08em;
  color: var(--accent);
  animation: logo-cursor-blink 900ms steps(1, end) infinite;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

.site-logo__typing.is-complete::after {
  animation: none;
  opacity: 0;
}

.site-logo:hover .site-logo__typing.is-complete::after,
.site-logo:focus-visible .site-logo__typing.is-complete::after {
  opacity: 1;
  animation: logo-cursor-blink 900ms steps(1, end) infinite;
}

@keyframes logo-cursor-blink {
  0%,
  45% {
    opacity: 1;
  }
  46%,
  100% {
    opacity: 0;
  }
}

.site-logo.is-scrolled {
  top: 50%;
  transform: translateY(-50%);
}

.site-logo.is-scrolled .site-logo__img {
  height: 1.92rem;
  max-width: min(13.8rem, calc(100vw - 8rem));
  filter: none;
}

.site-logo.is-scrolled .site-logo__typing {
  font-size: 1.152rem;
}

.site-logo__typing .site-logo__typing-accent {
  color: var(--accent);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 0.35rem;
  margin-left: auto;
  padding-left: min(12rem, calc(100vw - 11rem));
  gap: 0.65rem 0.85rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.site-nav a {
  color: var(--text-muted);
  text-decoration: none;
  position: relative;
  padding-right: 0.58em;
  transition: color 0.2s ease;
}

.site-nav a::before {
  content: "_";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-52%);
  color: var(--nav-cursor-accent);
  opacity: 0;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--accent);
}

.site-nav a:hover::before,
.site-nav a:focus-visible::before {
  opacity: 0.88;
  animation: logo-cursor-blink 1200ms steps(1, end) infinite;
}

.site-nav a .headline-bracket,
.site-mobile-nav__panel a .headline-bracket {
  color: inherit;
}

.site-mobile-nav {
  display: none;
  position: relative;
  margin-left: 0;
  z-index: 30;
}

.site-mobile-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-on-dark);
  cursor: pointer;
  list-style: none;
}

.site-mobile-nav__toggle::-webkit-details-marker {
  display: none;
}

.site-mobile-nav__toggle span,
.site-mobile-nav__toggle span::before,
.site-mobile-nav__toggle span::after {
  content: "";
  display: block;
  width: 1.15rem;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 180ms ease, opacity 180ms ease;
}

.site-mobile-nav__toggle span::before {
  transform: translateY(-0.34rem);
}

.site-mobile-nav__toggle span::after {
  transform: translateY(0.22rem);
}

.site-mobile-nav[open] .site-mobile-nav__toggle span {
  transform: rotate(45deg);
}

.site-mobile-nav[open] .site-mobile-nav__toggle span::before {
  transform: translateY(0);
  opacity: 0;
}

.site-mobile-nav[open] .site-mobile-nav__toggle span::after {
  transform: translateY(-2px) rotate(-90deg);
}

.site-mobile-nav__panel {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  min-width: 11.5rem;
  display: grid;
  border-radius: 0.85rem;
  border: 1px solid var(--mobile-nav-border);
  background: var(--mobile-nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 14px 34px rgba(2, 6, 23, 0.42);
  overflow: hidden;
}

.site-mobile-nav__panel a {
  padding: 0.78rem 0.95rem;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-on-dark);
}

.site-mobile-nav__panel a + a {
  border-top: 1px solid var(--mobile-nav-divider);
}

.site-mobile-nav__panel a:hover,
.site-mobile-nav__panel a:focus-visible {
  background: var(--mobile-nav-hover);
}

@media (max-width: 900px) {
  .site-theme-toggle__title {
    display: none;
  }

  .site-theme-toggle {
    padding-left: 0;
    border-left: none;
  }

  .site-theme-toggle__row {
    gap: 0.35rem;
  }

  .site-header__tools {
    gap: 0.35rem;
  }

  /* Großes Logo: Platz für Theme-Schalter + Burger rechts */
  .site-logo:not(.is-scrolled) .site-logo__typing {
    font-size: 1.464rem;
    max-width: calc(100vw - 9.75rem);
    overflow: visible;
  }

  /* Eingezogen: schmal halten, bei Bedarf mit Ellipsis */
  .site-logo.is-scrolled .site-logo__typing {
    max-width: calc(100vw - 10.25rem);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--header-bg-mobile);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: translateZ(0);
  }

  .site-nav {
    display: none;
  }

  .site-mobile-nav {
    display: inline-flex;
  }

  .site-header__inner {
    width: 100%;
    max-width: none;
    padding-left: 0.9rem;
    padding-right: 1rem;
  }

  .site-logo {
    left: 0.9rem;
  }

  .site-mobile-nav__panel {
    position: fixed;
    top: 3.95rem;
    left: 0.75rem;
    right: 0.75rem;
    min-width: 0;
    width: auto;
    max-width: calc(100vw - 1.5rem);
  }

  .code-surface__code-bg,
  .content-light::before,
  .content-light--arbeit::after,
  .content-light--about::after,
  .content-light--kontakt::after,
  .content-light--funktionen::after,
  .content-light--prozess-cta::after {
    width: 100%;
    left: 0;
    transform: none;
  }

  .showroom-section,
  .content-light--arbeit,
  .content-light--about,
  .content-light--kontakt,
  .content-light--funktionen,
  .content-light--prozess-cta,
  .hero.code-surface {
    left: 0;
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Smartphone Hochformat: Theme-Toggle kompakter (≈85 %, Thumb-Position angepasst) */
@media (max-width: 900px) and (orientation: portrait) {
  .site-theme-toggle__row {
    gap: 0.28rem;
  }

  .site-header__tools {
    gap: 0.28rem;
  }

  .site-theme-toggle .site-theme-toggle__mode-icon {
    flex: 0 0 1.4rem;
    width: 1.4rem;
    min-width: 1.4rem;
  }

  .site-theme-toggle .site-theme-toggle__mode-icon svg {
    width: 0.95rem;
    height: 0.95rem;
  }

  .site-theme-toggle .admin-toggle__switch {
    flex: 0 0 2.42rem;
    width: 2.42rem;
    min-width: 2.42rem;
    height: 1.28rem;
    min-height: 1.28rem;
  }

  .site-theme-toggle .admin-toggle__thumb {
    left: 0.11rem;
    width: 0.95rem;
    height: 0.95rem;
  }

  .site-theme-toggle .admin-toggle__switch[aria-checked="true"] .admin-toggle__thumb {
    left: calc(100% - 0.95rem - 0.11rem);
  }

  .site-logo:not(.is-scrolled) .site-logo__typing {
    max-width: calc(100vw - 8.5rem);
  }

  .site-logo.is-scrolled .site-logo__typing {
    font-size: calc(1.152rem * 0.85);
    max-width: calc(100vw - 9rem);
  }
}

/* —— Hauptlayout —— */
main {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem 0;
}

/* —— Hero-Bereich —— */
.hero {
  padding: clamp(2.5rem, 8vw, 4.5rem) 0 clamp(1.75rem, 6vw, 3.5rem);
  text-align: center;
  position: relative;
  overflow: visible;
}

/* Logo hängt unter der fixen Leiste — nach der Basis-.hero-Padding-Zeile, sonst wird es überschrieben.
 * Schmale Viewports (z. B. Galaxy S20) + Hochformat; extra Fallback nur über max-width falls orientation zickt. */
@media (max-width: 480px), ((max-width: 900px) and (orientation: portrait)) {
  .hero.code-surface {
    padding-top: clamp(4.75rem, 20vw, 7rem);
  }
}

.code-surface {
  /* Hero (::before) + Footer (::after): gleiche Tech-Fläche */
  --surface-tech-gradient:
    radial-gradient(ellipse 115% 72% at 50% -6%, rgba(79, 141, 255, 0.17) 0%, rgba(79, 141, 255, 0) 56%),
    radial-gradient(circle at 80% 110%, rgba(15, 23, 42, 0.9) 0, rgba(15, 23, 42, 0) 60%),
    linear-gradient(180deg, #020617 0%, #020617 48%, #030711 100%);
  position: relative;
  overflow: visible;
}

/* Randloser Bereich aus <main> — gleicher Verlauf/Filter wie Footer, ohne Text zu filtern */
.hero.code-surface {
  isolation: isolate;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.hero.code-surface::before {
  content: "";
  position: absolute;
  /* Bis Viewport-Top hochziehen, sodass das Hero-Bg unter dem Header durchschimmert */
  top: calc(-1 * var(--page-padding-top));
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 115% 72% at 50% -6%, rgba(79, 141, 255, 0.17) 0%, rgba(79, 141, 255, 0) 56%),
    radial-gradient(circle at 80% 110%, rgba(15, 23, 42, 0.9) 0, rgba(15, 23, 42, 0) 60%),
    linear-gradient(
      180deg,
      rgba(2, 6, 23, 0.78) 0%,
      rgba(2, 6, 23, 0.75) 35%,
      rgba(2, 6, 23, 0.73) 65%,
      rgba(3, 7, 17, 0.76) 100%
    );
  background-size: 100% 100%;
  background-position: center top;
  background-repeat: no-repeat;
}

/* Flache Weltkarte (Mercator + TopoJSON) — Global Network im Hero */
.hero__map-canvas-wrap {
  position: absolute;
  top: calc(-1 * var(--page-padding-top));
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  min-height: 12rem;
  pointer-events: none;
  overflow: hidden;
}

.hero__map-canvas,
#hero-map-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.hero.code-surface .code-surface__code-bg {
  top: calc(-1 * var(--page-padding-top));
  /* Keine Masken-Stufe bei 76 % — erzeugte eine sichtbare Iso-Querlinie über den Hero */
  -webkit-mask-image: none;
  mask-image: none;
}

/* Hero + Footer: Code-Snippets etwas kräftiger (+20 % Sichtbarkeit) */
.hero.code-surface .code-surface__code-bg,
.site-footer.code-surface .code-surface__code-bg {
  opacity: 0.72;
}

.hero.code-surface .code-surface__code-bg span,
.site-footer.code-surface .code-surface__code-bg span {
  color: rgba(255, 233, 77, 0.38);
  text-shadow: 0 0 28px rgba(255, 233, 77, 0.17);
}

.site-footer.code-surface {
  isolation: isolate;
  overflow: hidden;
  background: none;
}

.site-footer.code-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--surface-tech-gradient);
  /* Fixe Verlaufshöhe: Footer wirkt wie ein Ausschnitt des Hero-Bereichs */
  background-size: 100% 28rem;
  background-position: center top;
  background-repeat: no-repeat;
  filter: var(--footer-map-filter);
}

.hero > :not(.code-surface__code-bg):not(.hero__map-canvas-wrap),
.site-footer > :not(.code-surface__code-bg) {
  position: relative;
  z-index: 1;
}

.code-surface__code-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
  /* Wasserzeichen; Mitte radial weicher — gleiche Logik auf allen Viewports */
  opacity: 0.6;
  -webkit-mask-image: radial-gradient(
    ellipse 100% 120% at 50% 42%,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.55) 35%,
    rgba(0, 0, 0, 0.82) 65%,
    rgba(0, 0, 0, 0.94) 76%,
    rgba(0, 0, 0, 1) 100%
  );
  mask-image: radial-gradient(
    ellipse 100% 120% at 50% 42%,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.55) 35%,
    rgba(0, 0, 0, 0.82) 65%,
    rgba(0, 0, 0, 0.94) 76%,
    rgba(0, 0, 0, 1) 100%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.code-surface__code-bg span {
  --code-shift: 0px;
  position: absolute;
  font-family: var(--font-mono);
  font-size: clamp(0.62rem, 1.3vw, 0.86rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(255, 233, 77, 0.32);
  text-shadow: 0 0 28px rgba(255, 233, 77, 0.14);
  white-space: nowrap;
  transform: translateY(var(--code-shift));
}

.code-surface__code-bg span:nth-child(1) { left: 6%; top: 2%; }
.code-surface__code-bg span:nth-child(2) { right: 5%; top: 2%; }
.code-surface__code-bg span:nth-child(3) { left: 2%; bottom: 30%; }
.code-surface__code-bg span:nth-child(4) { right: 7%; bottom: 36%; }
.code-surface__code-bg span:nth-child(5) { left: 18%; bottom: 8%; }
.code-surface__code-bg span:nth-child(6) { right: 20%; top: 46%; }
.code-surface__code-bg span:nth-child(7) { left: 11%; top: 10%; }
.code-surface__code-bg span:nth-child(8) { right: 1%; bottom: 0%; }
.code-surface__code-bg span:nth-child(9) { left: 34%; top: 18%; }
.code-surface__code-bg span:nth-child(10) { right: 34%; top: 23%; }
.code-surface__code-bg span:nth-child(11) { left: 31%; bottom: 20%; }
.code-surface__code-bg span:nth-child(12) { right: 24%; bottom: 14%; }

@media (max-width: 820px) {
  .code-surface__code-bg span {
    font-size: clamp(0.56rem, 2.05vw, 0.76rem);
  }

  .code-surface__code-bg span:nth-child(1) { left: -10%; top: 3%; }
  .code-surface__code-bg span:nth-child(2) { right: -12%; top: 10%; }
  .code-surface__code-bg span:nth-child(3) { left: -13%; bottom: 30%; }
  .code-surface__code-bg span:nth-child(4) { display: none; }
  .code-surface__code-bg span:nth-child(5) { left: 2%; bottom: 4%; }
  .code-surface__code-bg span:nth-child(6) { right: 6%; top: 55%; }
  .code-surface__code-bg span:nth-child(7) { left: -2%; top: 16%; }
  .code-surface__code-bg span:nth-child(8) { right: -9%; bottom: -2%; }
  .code-surface__code-bg span:nth-child(9) { left: 18%; top: 23%; }
  .code-surface__code-bg span:nth-child(10) { display: none; }
  .code-surface__code-bg span:nth-child(11) { left: 12%; bottom: 20%; }
  .code-surface__code-bg span:nth-child(12) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .code-surface__code-bg span {
    transform: none;
  }
}

/* Scroll-Reveal: ganze Einheiten (Kachel/Fenster + Inhalt) bewegen sich gemeinsam */
html.js-scroll-reveal .scroll-reveal-in {
  opacity: 1;
}

/* Schatten-Platz innerhalb overflow:hidden der Abschnitte (kein overflow:visible nötig) */
html.js-scroll-reveal .content-light--arbeit .arbeit-grid,
html.js-scroll-reveal .content-light--about .about-grid,
html.js-scroll-reveal .content-light--prozess-cta .prozess-cta-stack,
html.js-scroll-reveal .content-light--kontakt .contact-section__consoles,
html.js-scroll-reveal .showroom-section__inner {
  padding-inline: clamp(14px, 2vw, 22px);
  padding-bottom: clamp(18px, 2.5vw, 28px);
  box-sizing: border-box;
}

html.js-scroll-reveal .content-light--prozess-cta .cta-module {
  margin-inline: auto;
}

@media (prefers-reduced-motion: reduce) {
  html.js-scroll-reveal .scroll-reveal-in {
    transform: none !important;
  }
}

.hero__title {
  margin: 0 auto;
  max-width: min(48rem, 92vw);
  font-family: var(--font-sans);
  font-size: clamp(1.85rem, 5.5vw, 3.15rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: var(--text-on-dark);
}

.hero__title .dot {
  color: var(--accent);
}

.hero__lead {
  margin: 1.5rem auto 0;
  max-width: 40rem;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.65;
  color: var(--hero-lead-color);
  text-wrap: balance;
}

.hero__actions {
  margin-top: 2.25rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Demo-Showroom: lesbar vor Hero-Karte (nicht transparent wie Formular-Reset) */
.hero__actions .btn-form-reset {
  background: rgba(10, 18, 36, 0.92);
  border-color: rgba(79, 141, 255, 0.58);
  color: rgba(226, 232, 240, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 6px 22px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hero__actions .btn-form-reset:hover,
.hero__actions .btn-form-reset:focus-visible {
  color: #f8fafc;
  background: rgba(16, 26, 52, 0.96);
  border-color: rgba(79, 141, 255, 0.78);
  box-shadow:
    inset 0 0 20px rgba(79, 141, 255, 0.12),
    0 0 0 1px rgba(79, 141, 255, 0.32),
    0 8px 26px rgba(0, 0, 0, 0.42);
}

/* Primär-CTAs + Kontakt + Showroom-Overlays + CTA-Modul + Admin-Kopf: Smartphone Hochformat ~20 % kompakter */
@media (max-width: 639px) and (orientation: portrait) {
  .hero__actions {
    gap: calc(1rem * 0.8);
  }

  .hero__actions .btn-cta-glow,
  .hero__actions .btn-form-reset,
  .contact-form-actions .btn-cta-glow,
  .cta-module .btn-cta-glow,
  .showroom-console__embed-blocked .btn-cta-glow,
  .showroom-console__embed-unverified .btn-cta-glow {
    font-size: calc(0.72rem * 0.8);
  }

  .hero__actions .btn-cta-glow,
  .contact-form-actions .btn-cta-glow,
  .cta-module .btn-cta-glow,
  .showroom-console__embed-blocked .btn-cta-glow,
  .showroom-console__embed-unverified .btn-cta-glow {
    padding: calc(0.78rem * 0.8) calc(1.45rem * 0.8);
  }

  .hero__actions .btn-form-reset,
  .contact-form-actions .btn-form-reset {
    font-size: calc(0.72rem * 0.8);
    padding: calc(0.78rem * 0.8) calc(1.35rem * 0.8);
  }

  .contact-form-actions {
    gap: calc(0.8rem * 0.8);
  }

  body.admin-page-view .admin-header-actions {
    gap: calc(0.55rem * 0.8 * 0.9);
  }

  body.admin-page-view .admin-header-actions .admin-header-actions__link {
    font-size: calc(0.76rem * 0.8 * 0.9);
    padding: calc(0.58rem * 0.8 * 0.9) calc(0.8rem * 0.8 * 0.9);
  }
}

@media (min-width: 640px) and (max-width: 900px) and (orientation: portrait) {
  .hero__actions {
    gap: calc(1rem * 0.8);
  }

  .hero__actions .btn-cta-glow,
  .contact-form-actions .btn-cta-glow,
  .cta-module .btn-cta-glow,
  .showroom-console__embed-blocked .btn-cta-glow,
  .showroom-console__embed-unverified .btn-cta-glow {
    font-size: calc(0.76rem * 0.8);
    letter-spacing: 0.104em;
    padding: calc(0.85rem * 0.8) calc(1.65rem * 0.8);
  }

  .hero__actions .btn-form-reset,
  .contact-form-actions .btn-form-reset {
    font-size: calc(0.72rem * 0.8);
    padding: calc(0.78rem * 0.8) calc(1.35rem * 0.8);
  }

  body.admin-page-view .admin-header-actions {
    gap: calc(0.55rem * 0.8 * 0.9);
  }

  body.admin-page-view .admin-header-actions .admin-header-actions__link {
    font-size: calc(0.76rem * 0.8 * 0.9);
    padding: calc(0.58rem * 0.8 * 0.9) calc(0.8rem * 0.8 * 0.9);
  }
}

/* —— Helle Sektionsbinder (.content-light) & randlose dunkle Varianten —— */
.content-light {
  position: relative;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
}

.content-light::before {
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background-color: #f7f8fa;
  background-image:
    linear-gradient(var(--bg-grid-line-on-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-grid-line-on-light) 1px, transparent 1px),
    radial-gradient(ellipse 82% 62% at 50% 12%, rgba(79, 141, 255, 0.07) 0%, rgba(79, 141, 255, 0) 64%),
    linear-gradient(180deg, #f9fafb 0%, #ffffff 48%, #f4f5f7 100%);
  background-size: var(--bg-grid-size) var(--bg-grid-size), var(--bg-grid-size) var(--bg-grid-size), 100% 100%, 100% 100%;
  z-index: -1;
}

/* Negative Viewport-Margins: Hintergrund bis zum Fensterrand (Breakout aus zentriertem .page) */
/* „Meine Arbeit“ / „Über mich“ / Kontakt: dunkle randlose Fläche wie Showroom-Artefakte */
.content-light--arbeit,
.content-light--about,
.content-light--kontakt,
.content-light--funktionen,
.content-light--prozess-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  left: 50%;
  width: 100vw;
  max-width: 100vw;
  margin-top: 0;
  margin-left: -50vw;
  margin-right: -50vw;
  box-sizing: border-box;
}

.content-light--arbeit,
.content-light--about {
  padding: clamp(2rem, 5vw, 3rem) 1.25rem 0.25rem;
}

.content-light--kontakt {
  padding: clamp(2rem, 5vw, 3rem) 1.25rem clamp(2.25rem, 5vw, 3.35rem);
}

.content-light--funktionen {
  padding: clamp(2rem, 5vw, 3rem) 1.25rem clamp(2.25rem, 5vw, 3.35rem);
}

.content-light--prozess-cta {
  padding: clamp(2rem, 5vw, 3rem) 1.25rem clamp(1.75rem, 4vw, 2.65rem);
}

/* Admin: mehrere Sektionen wie auf der Website — jeweils .admin-segment am Wrapper */

.prozess-cta-stack {
  position: relative;
  z-index: 1;
  max-width: 76rem;
  margin-left: auto;
  margin-right: auto;
}

.section-tech-deco--prozess {
  background-position: 50% 35%;
  opacity: 0.38;
}

/* HUD-Raster: öffentliche Seite — Admin siehe body.admin-page-view */
.section-tech-deco {
  position: absolute;
  inset: -6% -4%;
  z-index: 0;
  pointer-events: none;
  background-image: url("../img/section-tech-hud.svg");
  background-size: 115% auto;
  background-position: 50% 40%;
  background-repeat: no-repeat;
  opacity: 0.44;
  filter: saturate(0.85) contrast(1.04);
}

.section-tech-deco--about {
  transform: scaleX(-1);
  background-position: 52% 55%;
  opacity: 0.4;
}

.section-tech-deco--kontakt {
  background-position: 48% 62%;
  opacity: 0.38;
}

.section-tech-deco--funktionen {
  background-position: 52% 58%;
  opacity: 0.36;
}

body.admin-page-view .section-tech-deco {
  display: none;
}

.content-light--arbeit.main-segment,
.content-light--about.main-segment,
.content-light--kontakt.main-segment,
.content-light--funktionen.main-segment,
.content-light--prozess-cta.main-segment {
  border-top: none;
  box-shadow: none;
}

.content-light--arbeit::before,
.content-light--about::before,
.content-light--kontakt::before,
.content-light--funktionen::before,
.content-light--prozess-cta::before {
  z-index: -2;
  background-color: var(--segment-bg-color);
  background-image: var(--segment-bg-gradient);
  background-size: 100% 100%, 100% 100%, 100% 100%;
  -webkit-mask-image: none;
  mask-image: none;
}

/* Gitter + Vignette nur auf dem Raster — darunter volle Atmosphäre */
.content-light--arbeit::after,
.content-light--about::after,
.content-light--kontakt::after,
.content-light--funktionen::after,
.content-light--prozess-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--segment-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--segment-grid-line) 1px, transparent 1px);
  background-size: var(--bg-grid-size) var(--bg-grid-size);
  -webkit-mask-image: var(--bg-vignette-mask-grid);
  mask-image: var(--bg-vignette-mask-grid);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.content-light--arbeit .arbeit-section,
.content-light--about .about-section,
.content-light--kontakt .contact-section,
.content-light--funktionen .arbeit-section,
.content-light.admin-segment .admin-content,
.showroom-section.admin-segment .showroom-section__inner > .admin-content {
  position: relative;
  z-index: 1;
  max-width: 76rem;
  margin-left: auto;
  margin-right: auto;
}

.content-light--arbeit .section-block:first-of-type,
.content-light--about .section-block:first-of-type,
.content-light--kontakt .section-block:first-of-type,
.content-light--funktionen .section-block:first-of-type,
.content-light--prozess-cta .prozess-cta-stack > .section-block:first-of-type,
.content-light--prozess-cta.admin-segment .section-block:first-of-type,
.content-light.admin-segment .section-block:first-of-type,
.showroom-section.admin-segment .section-block:first-of-type {
  margin-top: 0;
  padding-top: 0;
}

.content-light--prozess-cta + .content-light--kontakt {
  margin-top: 0;
}

.content-light--kontakt + .content-light--funktionen {
  margin-top: 0;
}

.content-light--about + .content-light--prozess-cta {
  margin-top: 0;
  border-top: 1px solid rgba(79, 141, 255, 0.42);
  box-shadow: 0 -1px 0 rgba(79, 141, 255, 0.18);
}

.content-light--about + .content-light--prozess-cta .prozess-cta-stack > .section-block:first-child {
  margin-top: 0;
}

/* Admin: keine harten Sektions-Trennlinien (einheitlicher Backdrop wie Index) */
.admin-page-sections > .content-light.admin-segment + .showroom-section.admin-segment,
.admin-page-sections > .showroom-section.admin-segment + .content-light.admin-segment,
.admin-page-sections > .content-light.admin-segment + .content-light.admin-segment,
.page-content-chrome--admin > .content-light.admin-segment + .content-light.admin-segment {
  margin-top: 0;
  border-top: none;
  box-shadow: none;
}

.content-light--prozess-cta .process-section::before {
  display: none;
}

.content-light--prozess-cta .process-section {
  margin-top: 0;
  padding-bottom: clamp(1.5rem, 3.5vw, 2.5rem);
}

.content-light--prozess-cta .cta-module {
  margin-top: clamp(1.25rem, 3vw, 2rem);
  margin-bottom: 0;
}

/* Hinweis direkt unter der Timeline-Kachel */
.content-light--prozess-cta .process-timeline-hint {
  margin-top: clamp(0.3rem, 0.85vw, 0.5rem);
  margin-bottom: 0;
}

/* Mini-Terminal unter Hinweiszeile; Abstand zur Timeline-Kachel kommt vom Hint */
.content-light--prozess-cta .process-await-console {
  margin-top: clamp(1.15rem, 3.2vw, 1.85rem);
}

.content-light--prozess-cta .process-await-console__cmd {
  margin: 0;
}

@keyframes btn-caret-blink {
  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

.btn-cta-glow {
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  border-radius: var(--btn-radius);
  padding: 0.78rem 1.45rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: var(--btn-text-solid);
  background: var(--accent);
  border: 1px solid var(--btn-primary-edge);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06);
  transition:
    color 0.15s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease,
    opacity 0.15s ease;
}

.btn-cta-glow:hover:not(:disabled) {
  background: var(--accent-bright);
  border-color: var(--btn-primary-edge);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08),
    0 8px 22px rgba(0, 0, 0, 0.38),
    0 4px 12px rgba(0, 0, 0, 0.22);
}

.btn-cta-glow:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.95),
    0 0 0 4px var(--azure-mid),
    inset 0 0 28px rgba(245, 211, 0, 0.18);
}

.btn-cta-glow[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

@media (min-width: 640px) {
  .btn-cta-glow {
    padding: 0.85rem 1.65rem;
    font-size: 0.76rem;
    letter-spacing: 0.13em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-cta-glow {
    transition: none;
  }

  .btn-cta-glow:hover:not(:disabled) {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }
}

/* Touch-Ziele: Mindestgröße wie im Physio-Referenzprojekt (event-card, btn-base) */
@media (prefers-reduced-motion: reduce) {
  .glass-panel,
  .glass-panel:hover,
  .glass-panel:focus-within {
    transition: none;
    transform: none;
    box-shadow: none;
  }
}

.btn-ghost {
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  padding: 0.78rem 1.35rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(229, 240, 255, 0.96);
  text-decoration: none;
  border-radius: var(--btn-radius);
  border: 1px solid rgba(245, 211, 0, 0.72);
  background: transparent;
  box-shadow: none;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.15s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease,
    opacity 0.15s ease;
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  color: rgba(248, 250, 252, 0.99);
  background: rgba(245, 211, 0, 0.07);
  border-color: var(--accent-bright);
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 20px rgba(245, 211, 0, 0.1),
    0 8px 22px rgba(0, 0, 0, 0.34),
    0 4px 12px rgba(0, 0, 0, 0.2);
}

@media (prefers-reduced-motion: reduce) {
  .btn-ghost,
  .btn-ghost:hover,
  .btn-ghost:focus-visible {
    transition: none;
  }

  .btn-ghost:hover,
  .btn-ghost:focus-visible {
    box-shadow: none;
  }
}

/* —— Inhaltssektionen —— */
.section-block {
  padding: 3rem 0;
  margin-top: 1.5rem;
}

.section-block + .section-block {
  border-top: 1px solid rgba(79, 141, 255, 0.42);
  box-shadow: 0 -1px 0 rgba(79, 141, 255, 0.18);
}

/* Hauptabschnitte (Trennlinie; auf der Startseite einheitlicher Backdrop ohne Schnitt) */
.main-segment {
  border-top: 1px solid var(--main-segment-border);
  box-shadow: var(--main-segment-shadow);
}

.page-content-chrome--site > .main-segment {
  border-top: none;
  box-shadow: none;
}

#home,
#arbeit,
#showroom,
#ueber-mich,
#prozess,
#kontakt {
  scroll-margin-top: 5.5rem;
}

.section-block h2 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.08rem, 2.4vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
}

/* Section-Intro (gemeinsam für dunkle Sektionen) */
.section-intro {
  margin: 0 0 1.75rem;
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--text-section-intro);
}

/* —— „Meine Arbeit“ (Kachelgitter) —— */
.arbeit-section__head {
  margin: 0 0 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: flex-start;
}

/* Section-Headlines (Mono, „Tech-Tag“) */
.section-block .section-headline,
.section-headline {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(0.96rem, 2.4vw, 1.32rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--text-section-headline);
  text-shadow: var(--text-section-headline-shadow);
}

.section-block .section-headline-sub,
.section-headline-sub {
  display: block;
  margin: 0;
  max-width: 36rem;
  font-family: var(--font-sans);
  font-size: clamp(0.945rem, 2.07vw, 1.035rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.45;
  color: var(--text-section-sub);
}

/* Untertitel: Mono etwas blasser, Akzente gelb */
.arbeit-section .section-headline-sub,
.showroom-section .section-headline-sub,
.about-section .section-headline-sub,
.process-section .section-headline-sub,
.contact-section .section-headline-sub {
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--text-section-sub-mono);
}

.arbeit-section .section-headline-sub .section-sub-accent,
.showroom-section .section-headline-sub .section-sub-accent,
.about-section .section-headline-sub .section-sub-accent,
.process-section .section-headline-sub .section-sub-accent,
.contact-section .section-headline-sub .section-sub-accent {
  color: rgba(245, 211, 0, 0.62);
}

/* Pseudo-Terminal-Zeile (Prompt + Befehl, umbrechend) */
.terminal-cmd {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.45;
  color: rgba(226, 232, 240, 0.62);
}

.terminal-cmd.terminal-cmd--stack {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.35em;
  row-gap: 0.2em;
}

.terminal-cmd__line-start {
  flex: 0 0 auto;
  white-space: nowrap;
}

.terminal-cmd__line-rest {
  flex: 1 1 12rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.terminal-cmd .section-sub-accent {
  color: var(--accent);
}

/* H2 + Untertitel im gleichen Element (section-headline-stack) */
.section-block .section-headline-stack,
.section-headline-stack {
  margin: 0 0 0.45rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: flex-start;
  font-size: unset;
  font-weight: unset;
  letter-spacing: unset;
  line-height: unset;
  color: unset;
}

/* Intro: ab Tablet ca. 2/3 Breite; „Über mich“-Text nicht nochmal einengen */
@media (min-width: 900px) {
  .section-intro {
    max-width: 66.6667%;
  }

  .about-content__intro {
    max-width: none;
  }
}

.arbeit-section__head + .arbeit-grid {
  margin-top: 0;
}

.arbeit-section .section-intro + .arbeit-grid {
  margin-top: 0;
}

.arbeit-grid {
  display: grid;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 720px) {
  .arbeit-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
  }
}

/* Glas-Kachel: einheitlicher Rand, Schatten, Hover (wie .cta-module) */
.arbeit-tile,
.terminal-console,
.process-timeline-card,
.about-media,
.cta-module {
  border: 1px solid var(--tile-glass-border);
  box-shadow: var(--tile-glass-shadow);
  backdrop-filter: var(--tile-glass-blur);
  -webkit-backdrop-filter: var(--tile-glass-blur);
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.arbeit-tile:hover,
.arbeit-tile:focus-within,
.terminal-console:hover,
.terminal-console:focus-within,
.process-timeline-card:hover,
.process-timeline-card:focus-within,
.about-media:hover,
.about-media:focus-within,
.cta-module:hover,
.cta-module:focus-within {
  border-color: var(--tile-azur-border-hover);
  box-shadow: var(--tile-glass-shadow-hover);
}

.arbeit-tile {
  position: relative;
  padding: 1.35rem 1.25rem 1.45rem;
  background: var(--surface-kachel);
  border-radius: 0.35rem;
}

.arbeit-tile::before {
  display: none;
}

.arbeit-tile__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.85rem;
  border-radius: 0.25rem;
  background: var(--surface-kachel-icon);
  color: var(--azure);
  border: 1px solid rgba(79, 141, 255, 0.28);
  box-shadow:
    0 0 20px rgba(79, 141, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: box-shadow 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.arbeit-tile:hover .arbeit-tile__icon {
  border-color: rgba(79, 141, 255, 0.45);
  box-shadow:
    0 0 32px rgba(79, 141, 255, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.arbeit-tile__icon-svg {
  display: block;
}

.arbeit-tile__eyebrow {
  margin: 0 0 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 0 16px rgba(245, 211, 0, 0.18);
}

.arbeit-tile__title {
  margin: 0 0 0.95rem;
  font-size: clamp(1.15rem, 2.4vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.25;
  color: var(--text-tile-title);
}

.arbeit-tile__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-tile-body);
}

/* CTA in Karten: flaches gelbes Pill-Design (btn-cta-glow) */
.arbeit-section .btn-cta-glow {
  margin-top: 1rem;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .arbeit-tile {
    background: var(--surface-kachel-fallback);
  }
}

/* —— Über mich —— */
.about-section__header {
  margin-bottom: 2.5rem;
}

/* Stack-Headline (Haupt + Subtitel) im About-Block: ohne eigene Bottom-Margin —
 * der Abstand zum Body-Bereich wird ausschließlich über `.about-section__header`
 * gesetzt (Pattern wie bei „Meine Arbeit" und „Showroom"). */
.about-section__header .section-headline-stack {
  margin-bottom: 0;
}

/* —— Kontakt (Industrial / Console) —— */
.contact-section__header {
  margin-bottom: 2.5rem;
}

/* Kontakt-Einleitung unter der Headline: gleiches Muster wie Projektablauf
 * (`.section-intro` + sektionsspezifische Ränder/Typo). */
.contact-section__intro {
  margin: 0 0 1.15rem;
  letter-spacing: 0.02em;
  line-height: 1.55;
}

/* Kontakt: Hauptfenster + Datenschutz (mobil gestapelt; Desktop: linksbündig, Ecken-Überlappung) */
.contact-section__consoles {
  width: 100%;
  max-width: 76rem;
  margin-left: auto;
  margin-right: auto;
}

.contact-section__consoles .contact-console-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  isolation: isolate;
}

.contact-section__consoles .contact-console--main {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
  width: 100%;
}

.contact-console-wrap .contact-console--privacy-hint {
  width: min(33rem, 100%);
  max-width: 33rem;
  margin-top: clamp(1.25rem, 3vw, 1.85rem);
  margin-left: auto;
  margin-right: auto;
  align-self: center;
}

@media (min-width: 768px) {
  .contact-section__consoles {
    display: flex;
    justify-content: flex-start;
  }

  .contact-section__consoles .contact-console-wrap {
    width: 100%;
    max-width: min(56rem, 100%);
    margin-left: 0;
    margin-right: auto;
    margin-bottom: clamp(3.5rem, 8vw, 5.5rem);
    overflow: visible;
  }

  .contact-section__consoles .contact-console--main {
    margin-left: 0;
    margin-right: auto;
    position: relative;
    z-index: 2;
  }

  /* Buttons links — rechte untere Fensterecke bleibt leer für die Überlappung */
  .contact-console--main .contact-form-actions {
    justify-content: flex-start;
  }

  /* Ecke auf Ecke: X wie zuvor; Y nach oben, nur untere rechte Fläche (nicht Nachrichtenfeld) */
  .contact-console-wrap .contact-console--privacy-hint {
    position: absolute;
    left: 100%;
    top: 100%;
    right: auto;
    bottom: auto;
    width: min(28rem, 48vw);
    max-width: 30rem;
    margin: 0;
    transform: translate(calc(-100% + 5.25rem), -3.35rem);
    transform-origin: top left;
    z-index: 5;
    /* Schatten/Hover: gleiche Glas-Kachel wie .terminal-console (kein eigener Drop-Shadow) */
  }
}

/* Datenschutz-Hinweis: explizit gleiches Hover wie andere terminal-console-Kacheln */
.contact-console.contact-console--privacy-hint.terminal-console:hover,
.contact-console.contact-console--privacy-hint.terminal-console:focus-within {
  border-color: var(--tile-azur-border-hover);
  box-shadow: var(--tile-glass-shadow-hover);
}

.contact-console--privacy-hint .terminal-console__body {
  padding: 1rem 1.1rem 1.15rem;
}

.contact-privacy-hint__lead {
  color: var(--accent);
  font-weight: 600;
}

.contact-privacy-hint__body {
  display: block;
}

.contact-privacy-hint__text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: rgba(203, 213, 225, 0.88);
}

/* Kontakt: Sende-Overlay (Terminal-Schritte + OK) über der Formular-Konsole */
.contact-send-overlay[hidden] {
  display: none !important;
}

.contact-send-overlay:not([hidden]) {
  display: flex;
}

.contact-send-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(0.65rem, 2vw, 1.1rem);
  box-sizing: border-box;
}

.contact-send-overlay__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--btn-radius);
  background: rgba(3, 8, 18, 0.55);
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
}

.contact-send-overlay__panel {
  position: relative;
  z-index: 1;
  align-self: center;
  width: 80%;
  max-width: 100%;
  height: 60%;
  max-height: 60%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  outline: none;
}

.contact-send-overlay__panel .console-titlebar {
  flex-shrink: 0;
}

.contact-send-overlay__panel .contact-send-terminal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.contact-send-overlay__panel .contact-send-terminal__lines {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  margin-bottom: 0;
}

.contact-send-terminal__body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 1.05rem 1.15rem 1.2rem;
  background: var(--terminal-bg);
}

.contact-send-terminal__lines {
  box-sizing: border-box;
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: auto;
}

.contact-send-terminal__lines > * + * {
  margin-top: 0.35rem;
}

.contact-send-terminal__lines::-webkit-scrollbar {
  width: 6px;
}

.contact-send-terminal__lines::-webkit-scrollbar-thumb {
  background: rgba(71, 85, 105, 0.65);
  border-radius: 3px;
}

.contact-send-terminal__lines::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.5);
}

.contact-send-terminal__line {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.contact-send-terminal__line--success-hint .contact-send-terminal__cmd {
  color: rgba(52, 211, 153, 0.97);
  text-shadow: 0 0 14px rgba(34, 197, 94, 0.38);
}

.contact-send-overlay__panel .contact-send-terminal__dismiss-row {
  flex-shrink: 0;
}

.contact-send-terminal__dismiss-row[hidden] {
  display: none !important;
}

.contact-send-terminal__dismiss-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-shrink: 0;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
}

.contact-send-terminal__cmdline {
  display: block;
  margin: 0;
  padding: 0;
  min-width: 0;
  width: 100%;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.45;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: visible;
}

.contact-send-terminal__cmdline .contact-send-terminal__prompt {
  display: inline;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.contact-send-terminal__cmd-input {
  display: inline-block;
  box-sizing: border-box;
  vertical-align: baseline;
  width: min(12ch, 100%);
  height: auto;
  max-height: none;
  padding: 0;
  padding-inline-start: 0.35ch;
  margin: 0;
  transform: translate(calc(-0.1em - 1px), calc(-0.09em - 1px));
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: 1.45;
  color: rgba(248, 250, 252, 0.94);
  text-shadow: 0 0 10px rgba(248, 250, 252, 0.06);
  caret-color: rgba(248, 250, 252, 0.92);
}

@supports (caret-shape: block) {
  .contact-send-terminal__cmd-input {
    caret-shape: block;
  }
}

.contact-send-terminal__cmd-input:focus {
  outline: none;
  box-shadow: none;
}

.contact-send-terminal__cmd-input:-webkit-autofill,
.contact-send-terminal__cmd-input:-webkit-autofill:hover,
.contact-send-terminal__cmd-input:-webkit-autofill:focus {
  -webkit-text-fill-color: rgba(248, 250, 252, 0.94);
  caret-color: rgba(248, 250, 252, 0.92);
  transition: background-color 99999s ease-out;
  -webkit-box-shadow: 0 0 0 1000px #030712 inset;
  box-shadow: 0 0 0 1000px #030712 inset;
}

.contact-send-terminal__cmd-input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.contact-send-terminal__dismiss-row .contact-send-terminal__dismiss {
  align-self: flex-start;
  margin-top: 0;
}

.contact-send-terminal__token-ok {
  color: rgba(52, 211, 153, 0.97);
  text-shadow: 0 0 14px rgba(34, 197, 94, 0.38);
}

.contact-send-terminal__token-fail {
  color: rgba(248, 113, 113, 0.98);
  text-shadow: 0 0 14px rgba(239, 68, 68, 0.42);
}

.contact-send-terminal__caret {
  display: inline-block;
  width: 0.62ch;
  min-width: 7px;
  height: 1.05em;
  margin-left: 0.12ch;
  vertical-align: text-bottom;
  transform: translateY(-2px);
  background: rgba(248, 250, 252, 0.88);
  animation: contact-send-terminal-caret-blink 1.05s step-end infinite;
}

@keyframes contact-send-terminal-caret-blink {
  0%,
  45% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-send-terminal__caret {
    animation: none;
    opacity: 1;
  }
}

.contact-send-terminal__prompt {
  color: rgba(253, 224, 71, 0.95);
  text-shadow: 0 0 12px rgba(245, 211, 0, 0.18);
}

.contact-send-terminal__cmd {
  color: rgba(248, 250, 252, 0.94);
  text-shadow: 0 0 10px rgba(248, 250, 252, 0.06);
}

.contact-send-terminal__line--errmsg .contact-send-terminal__cmd {
  color: rgba(254, 165, 165, 0.98);
  text-shadow: 0 0 14px rgba(248, 113, 113, 0.35);
}

.contact-send-terminal__line--unsplit {
  color: rgba(253, 224, 71, 0.95);
  text-shadow: 0 0 12px rgba(245, 211, 0, 0.18);
}

.contact-send-terminal__dismiss {
  display: inline-block;
  align-self: flex-start;
  margin-top: 0.45rem;
  padding: 0.28rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.35;
  color: rgba(248, 250, 252, 0.94);
  background: transparent;
  border: none;
  border-radius: 0.2rem;
  cursor: pointer;
  text-align: left;
  box-shadow: none;
  transition:
    color 0.16s ease,
    background-color 0.16s ease;
}

.contact-send-terminal__dismiss:hover,
.contact-send-terminal__dismiss:focus-visible {
  color: #030712;
  background-color: rgba(248, 250, 252, 0.94);
  outline: none;
}

.contact-send-terminal__dismiss:focus-visible {
  box-shadow: 0 0 0 1px rgba(79, 141, 255, 0.55);
}

html.contact-send-overlay-open {
  overflow: hidden;
}

/* Terminal-Fenster (Kontakt, Showroom, About-Kachel, …) */
.terminal-console {
  border-radius: var(--btn-radius);
  overflow: hidden;
  background: var(--surface-console-outer);
}

/* Kleine Status-Konsolen: nur so breit wie Inhalt */
.about-content__status-console.terminal-console {
  width: fit-content;
  max-width: 100%;
  margin-left: 0;
  margin-right: auto;
}

.contact-console.process-await-console.terminal-console {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.terminal-console__body {
  padding: 1.35rem 1.35rem 1.5rem;
  background: var(--surface-console-inner);
}

/* Kontakt-Hauptfenster */
.contact-console {
  position: relative;
  z-index: 1;
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
}

.contact-section__consoles .contact-console {
  max-width: none;
}

/* Fenster-Titelleiste (Ampel + Pfad) */
.console-titlebar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
  padding: 0.48rem 0.72rem;
  border-bottom: 1px solid rgba(51, 65, 85, 0.65);
  background: rgba(15, 23, 42, 0.92);
}

.console-titlebar__dots {
  flex-shrink: 0;
  width: 3.1rem;
  height: 0.5rem;
  background:
    radial-gradient(circle at 0.22rem 50%, #ef4444 0.17rem, transparent 0.19rem),
    radial-gradient(circle at 1.05rem 50%, #f59e0b 0.17rem, transparent 0.19rem),
    radial-gradient(circle at 1.88rem 50%, #22c55e 0.17rem, transparent 0.19rem);
  background-repeat: no-repeat;
  opacity: 0.92;
}

.console-titlebar__path {
  flex: 1 1 auto;
  font-size: 0.62rem;
  color: rgba(148, 163, 184, 0.88);
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.about-grid {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

.about-media {
  --about-passmark-arm: clamp(0.55rem, 1.6vw, 0.75rem);
  --about-passmark-stroke: 1px;
  --about-passmark-color: rgba(148, 163, 184, 0.42);
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--surface-kachel);
}

.about-media:hover,
.about-media:focus-within {
  --about-passmark-color: rgba(148, 163, 184, 0.58);
}

.about-media__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--surface-kachel);
}

/* Dünne Passmarken (Anschnitt / Bildposition): je Ecke ein kleines L aus
 * zwei Haarstrichen, liegt über Vignette, verdeckt praktisch kein Motiv. */
.about-media__passmark {
  position: absolute;
  width: var(--about-passmark-arm);
  height: var(--about-passmark-arm);
  pointer-events: none;
  z-index: 3;
}

.about-media__passmark::before,
.about-media__passmark::after {
  content: "";
  position: absolute;
  background-color: var(--about-passmark-color);
}

/* oben links: Striche nach rechts und unten */
.about-media__passmark--tl {
  top: 0;
  left: 0;
}

.about-media__passmark--tl::before {
  top: 0;
  left: 0;
  right: 0;
  height: var(--about-passmark-stroke);
}

.about-media__passmark--tl::after {
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--about-passmark-stroke);
}

/* oben rechts */
.about-media__passmark--tr {
  top: 0;
  right: 0;
}

.about-media__passmark--tr::before {
  top: 0;
  left: 0;
  right: 0;
  height: var(--about-passmark-stroke);
}

.about-media__passmark--tr::after {
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--about-passmark-stroke);
}

/* unten links */
.about-media__passmark--bl {
  bottom: 0;
  left: 0;
}

.about-media__passmark--bl::before {
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--about-passmark-stroke);
}

.about-media__passmark--bl::after {
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--about-passmark-stroke);
}

/* unten rechts */
.about-media__passmark--br {
  bottom: 0;
  right: 0;
}

.about-media__passmark--br::before {
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--about-passmark-stroke);
}

.about-media__passmark--br::after {
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--about-passmark-stroke);
}

.about-media__placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 28% 24%, rgba(79, 141, 255, 0.52) 0%, rgba(79, 141, 255, 0) 48%),
    radial-gradient(circle at 72% 78%, rgba(245, 211, 0, 0.36) 0%, rgba(245, 211, 0, 0) 46%),
    linear-gradient(145deg, rgba(2, 6, 23, 0.88) 0%, rgba(15, 23, 42, 0.78) 100%);
}

.about-media__portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* object-position, transform & transform-origin per Inline-Style (Fokus + Zoom) */
  display: block;
}

/* Dezente Vignette über dem Portrait: nach außen hin abgedunkelter Rand,
 * der Mittenbereich bleibt unangetastet. Wird über `:has()` nur dann
 * eingeblendet, wenn tatsächlich ein Bild da ist — beim Platzhalter würde
 * sie mit dem dortigen Eigen-Glow konkurrieren. `pointer-events: none`
 * verhindert, dass die Schicht Klicks/Hover schluckt. `z-index: 2` stellt
 * sicher, dass die Vignette über dem Bild liegt, auch wenn das Portrait
 * durch `transform: scale(...)` einen eigenen Stapelkontext aufmacht. */
.about-media__frame:has(.about-media__portrait)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 35%,
    rgba(0, 0, 0, 0.28) 70%,
    rgba(0, 0, 0, 0.62) 100%
  );
}

.about-media__placeholder::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 0.85rem;
  border: 1px solid rgba(148, 163, 184, 0.32);
  box-shadow:
    inset 0 0 24px rgba(79, 141, 255, 0.22),
    0 0 24px rgba(79, 141, 255, 0.25),
    0 0 46px rgba(79, 141, 255, 0.16);
}

.about-media__placeholder-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0.42rem 0.7rem;
  border-radius: var(--btn-radius);
  background: rgba(2, 6, 23, 0.76);
  color: rgba(229, 240, 255, 0.95);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid rgba(79, 141, 255, 0.28);
}

/* About-Intro: Typografie kommt aus `.section-intro`, hier nur die schmaleren
 * Abstände (steht in einer Grid-Spalte neben dem Portrait, keine breite Spalte). */
.about-section .section-intro.about-content__intro {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

/* Gemeinsame Lese-Maximalbreite für alle Inhalte der About-Spalte:
 * Fließtext, Intro und Terminal-Kachel teilen dieselbe Spaltenbreite;
 * die SYSTEM_STATUS-Kachel ist schmaler (fit-content) und linksbündig wie der Fließtext. */
.about-content > .about-content__intro,
.about-content > .about-content__text,
.about-content > .about-content__status-console {
  max-width: 32rem;
}

/* SYSTEM_STATUS-Kachel: gleiche Konsolen-Optik wie Kontakt/Showroom — Chrome
 * (Rand, Hintergrund, Hover-Glow) kommt aus der geteilten Vorlage
 * `.terminal-console`. Hier nur Komponenten-Spezifika: kompaktere Größe,
 * Abstand zum Fließtext darüber und ein etwas zurückgenommener Schatten. */
.about-content__status-console {
  margin-top: 3rem;
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Kompakteres Innen-Padding als der Vorlagen-Default — die Status-Kachel
 * trägt nur eine einzelne Kommandozeile, kein vollständiges Formular. */
.about-content__status-body {
  padding: 0.85rem 1rem;
}

/* Kommando-Zeile innerhalb der Status-Konsole — Typografie kommt vollständig
 * aus der geteilten `.terminal-cmd`-Vorlage; hier nur Komponenten-spezifische
 * Außenabstände. */
.about-content__status {
  margin: 0;
}

/* Terminal-Cursor am Zeilenende — Block in der Textfarbe der Zeile
 * (`currentColor`), blinkt im selben Rhythmus wie der Logo-Cursor
 * (`logo-cursor-blink`). Wiederverwendbar (About-Status, Showroom-Sidebar). */
.terminal-cursor {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  margin-left: 0.18em;
  vertical-align: -0.1em;
  background: currentColor;
  animation: logo-cursor-blink 900ms steps(1, end) infinite;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

.about-content__text {
  margin: 0;
  color: rgba(186, 198, 220, 0.88);
  line-height: 1.7;
}

.about-content__text + .about-content__text {
  margin-top: 0.9rem;
}

.about-badges {
  margin-top: 1.3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.competence-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.34rem 0.7rem;
  border-radius: var(--btn-radius);
  background: var(--accent);
  color: var(--btn-text-solid);
  border: 1px solid var(--btn-primary-edge);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Mobile im Hochformat: Portrait kompakter, damit es nicht die volle
 * Spaltenbreite einnimmt (sieht auf Smartphones sonst „erschlagend“ aus).
 * Greift nur unterhalb des Zwei-Spalten-Breakpoints. */
@media (max-width: 899.98px) and (orientation: portrait) {
  .about-media {
    width: 80%;
    margin-inline: auto;
  }
}

@media (min-width: 900px) {
  .about-grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.2fr);
    gap: 2rem;
  }
}

@keyframes path-flow-line {
  from {
    background-position: 100% 50%, 0% 50%;
  }

  to {
    background-position: 0% 50%, 0% 50%;
  }
}

@keyframes process-line-flow {
  from {
    background-position: 100% 50%, 0% 50%;
  }

  to {
    background-position: 0% 50%, 0% 50%;
  }
}

@keyframes path-flow-line-vertical {
  from {
    background-position: 50% 100%, 50% 0%;
  }

  to {
    background-position: 50% 0%, 50% 0%;
  }
}

@keyframes process-line-flow-vertical {
  from {
    background-position: 50% 100%, 50% 0%;
  }

  to {
    background-position: 50% 0%, 50% 0%;
  }
}

@keyframes process-timeline-tag-cursor-blink {
  0%,
  45% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

/* —— Projektablauf (Timeline, Detail-Panel, Breakpoints) —— */
/* Dunkle Bühne optisch an Showroom angelehnt */
.process-section {
  position: relative;
  z-index: 0;
  padding-bottom: 3.25rem;
  margin-top: 0;
}

.process-section::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  z-index: -1;
  background:
    radial-gradient(ellipse 85% 55% at 50% 0%, rgba(79, 141, 255, 0.09) 0%, transparent 52%),
    linear-gradient(180deg, #060a12 0%, #070b14 42%, #050811 100%);
  border-top: 1px solid rgba(79, 141, 255, 0.2);
  border-bottom: 1px solid rgba(51, 103, 229, 0.14);
  pointer-events: none;
}

.process-section__header {
  position: relative;
  z-index: 1;
  margin: 0 0 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: flex-start;
  max-width: 52rem;
}

/* Projektablauf-Intro: Typografie-Basis kommt aus `.section-intro`, hier nur
 * sektionsspezifische Feinjustierung (engerer Margin nach unten, leicht
 * abweichende Letter-Spacing/Line-Height für den eher technischen Ton dieser
 * Sektion). */
.process-section__intro {
  margin: 0 0 1.15rem;
  letter-spacing: 0.02em;
  line-height: 1.55;
}

/* Timeline-Card: gemeinsamer Rahmen für Timeline + Detail-Panel */
.process-timeline-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  border-radius: var(--btn-radius);
  background: var(--surface-console-outer);
  overflow: hidden;
}

/* Detail-Panel innerhalb der Timeline-Card: visuell mit feiner Trennlinie abgesetzt */
.process-timeline__detail {
  margin-top: 0;
  padding: clamp(0.85rem, 2vw, 1.15rem) clamp(1rem, 2.5vw, 1.35rem);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.55rem 0.9rem;
  min-height: 3.4rem;
  background: transparent;
  border: none;
  border-top: 1px solid rgba(79, 141, 255, 0.18);
  border-radius: 0;
  box-shadow: inset 0 0 24px rgba(79, 141, 255, 0.06);
  transition:
    border-top-color 0.25s ease,
    box-shadow 0.25s ease;
}

.process-timeline__detail.is-active {
  border-top-color: var(--tile-azur-border-hover);
  box-shadow: inset 0 0 28px rgba(79, 141, 255, 0.14);
}

.process-timeline__detail-tag {
  flex: 0 0 auto;
  padding: 0.2rem 0.55rem;
  color: var(--accent);
  border: 1px solid rgba(245, 211, 0, 0.34);
  border-radius: 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  text-shadow: 0 0 12px rgba(245, 211, 0, 0.16);
  white-space: nowrap;
}

.process-timeline__detail-text {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(203, 213, 225, 0.92);
}

@media (prefers-reduced-motion: reduce) {
  .process-timeline__detail {
    transition: none;
  }
}

/* Schmale dunkle Leiste — Fortschritts-/Terminal-Footer
 * Rahmen, Hintergrund und Hover liegen jetzt auf dem äußeren
 * .process-timeline-card Wrapper — die Liste ist nur noch der innere Layout-Container. */
.process-timeline.process-bar {
  position: relative;
  isolation: isolate;
  list-style: none;
  margin: 0;
  width: 100%;
  max-width: none;
  min-height: 5.5rem;
  padding: 0.5rem clamp(0.3rem, 1.1vw, 0.55rem) 0.55rem;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  gap: 0.35rem 0.15rem;
  box-sizing: border-box;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Dezenter Hinweistext unter der Timeline-Card */
.process-timeline-hint {
  margin: clamp(0.45rem, 1.2vw, 0.7rem) 0 0;
  padding: 0 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: rgba(148, 163, 184, 0.55);
}

.process-timeline-hint__touch {
  display: none;
}

@media (hover: none) and (pointer: coarse) {
  .process-timeline-hint__mouse {
    display: none;
  }

  .process-timeline-hint__touch {
    display: inline;
  }
}

.process-timeline.process-bar::before {
  content: "";
  position: absolute;
  left: clamp(0.28rem, 0.9vw, 0.5rem);
  right: clamp(0.28rem, 0.9vw, 0.5rem);
  top: 50%;
  transform: translateY(-50%);
  height: 2px;
  pointer-events: none;
  z-index: 0;
  border-radius: var(--btn-radius);
  background-image:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 35%,
      rgba(165, 200, 255, 0.95) 50%,
      transparent 65%,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(79, 141, 255, 0.55) 8%,
      rgba(79, 141, 255, 0.55) 92%,
      transparent 100%
    );
  background-size: 300% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  background-position: 100% 50%, 0% 50%;
  animation: path-flow-line var(--path-flow-line-duration) linear infinite;
  box-shadow:
    0 0 10px rgba(79, 141, 255, 0.5),
    0 0 24px rgba(79, 141, 255, 0.28),
    0 0 48px rgba(79, 141, 255, 0.1);
}

.process-timeline__step {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  grid-template-columns: 1fr;
  justify-items: center;
  cursor: default;
  padding: 0.2rem 0.15rem;
}

.process-timeline__n {
  grid-row: 1;
  align-self: end;
  margin-bottom: 0.3rem;
  position: relative;
  z-index: 2;
  font-size: clamp(0.78rem, 1.5vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  text-shadow: none;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.process-timeline__step:hover .process-timeline__n {
  color: var(--accent-bright);
  text-shadow:
    0 0 20px rgba(255, 233, 77, 0.4),
    0 0 32px rgba(245, 211, 0, 0.22),
    0 0 48px rgba(255, 233, 77, 0.12);
}

.process-timeline__icon {
  grid-row: 2;
  align-self: center;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(2.15rem, 4.2vw, 2.5rem);
  height: clamp(2.15rem, 4.2vw, 2.5rem);
  border-radius: var(--btn-radius);
  color: rgba(186, 198, 220, 0.92);
  background: rgba(10, 14, 26, 0.95);
  border: 1px solid rgba(79, 141, 255, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 16px rgba(79, 141, 255, 0.12),
    0 0 28px rgba(79, 141, 255, 0.06);
  transition:
    color 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.28s ease;
}

.process-timeline__step:hover .process-timeline__icon {
  color: var(--azure);
  border-color: rgba(79, 141, 255, 0.55);
  background: rgba(12, 20, 40, 0.98);
  box-shadow:
    0 0 0 1px rgba(79, 141, 255, 0.2),
    0 0 18px rgba(79, 141, 255, 0.45),
    0 0 36px rgba(79, 141, 255, 0.2),
    0 0 26px rgba(245, 211, 0, 0.24),
    0 0 44px rgba(255, 233, 77, 0.14),
    inset 0 0 12px rgba(79, 141, 255, 0.08);
}

.process-timeline__icon svg {
  display: block;
  opacity: 0.92;
  transition: opacity 0.2s ease, filter 0.22s ease;
}

.process-timeline__step:hover .process-timeline__icon svg {
  opacity: 1;
  filter: drop-shadow(0 0 5px rgba(79, 141, 255, 0.55));
}

.process-timeline__label {
  grid-row: 3;
  align-self: start;
  margin-top: 0.3rem;
  position: relative;
  z-index: 2;
  max-width: 100%;
  display: inline;
  font-family: var(--font-mono);
  font-size: clamp(0.66rem, 1.25vw, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.25;
  text-align: center;
  color: rgba(226, 232, 240, 0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.process-timeline__label-br,
.process-timeline__label-txt,
.process-timeline__label-cursor {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

.process-timeline__label-txt {
  text-transform: uppercase;
}

.process-timeline__label-cursor {
  display: inline-block;
  width: 0.55ch;
  min-width: 0.35em;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.process-timeline__step:hover .process-timeline__label {
  color: rgba(248, 250, 252, 0.98);
  text-shadow:
    0 0 14px rgba(79, 141, 255, 0.25),
    0 0 22px rgba(255, 233, 77, 0.18),
    0 0 36px rgba(245, 211, 0, 0.1);
}

.process-timeline__step:hover .process-timeline__label-cursor {
  opacity: 1;
  animation: process-timeline-tag-cursor-blink 1.05s step-end infinite;
}

@media (min-width: 720px) {
  .process-timeline.process-bar {
    flex-wrap: nowrap;
    gap: 0;
    min-height: 5.65rem;
    padding: 0.55rem clamp(0.35rem, 1vw, 0.65rem) 0.6rem;
  }

  .process-timeline__step {
    padding: 0.25rem clamp(0.15rem, 0.8vw, 0.35rem);
  }
}

/* Tablet/kleines Mobil: eine Zeile Zeitstrahl, Linie aktiv; bei Bedarf horizontal scrollen */
@media (max-width: 719px) and (min-width: 481px) {
  .process-timeline.process-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch;
    gap: 0;
    min-height: 5.55rem;
    padding: 0.48rem 0.32rem 0.55rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .process-timeline.process-bar::before {
    display: block;
    left: 0.32rem;
    right: 0.32rem;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: 2px;
  }

  .process-timeline__step {
    flex: 1 1 0;
    min-width: 4.25rem;
    padding: 0.18rem 0.06rem;
    min-height: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    transition: border-color 0.22s ease, box-shadow 0.28s ease;
  }

  .process-timeline__step:hover {
    border-color: transparent;
    box-shadow: none;
  }

  .process-timeline__icon {
    width: 2.2rem;
    height: 2.2rem;
  }

  .process-timeline__icon svg {
    width: 20px;
    height: 20px;
  }

  .process-timeline__n {
    font-size: clamp(0.76rem, 2.2vw, 0.92rem);
  }

  .process-timeline__label {
    font-size: clamp(0.64rem, 2vw, 0.76rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Schmale Smartphones: vertikaler Strahl; pro Zeile: Nr. links — Icon (Linie in Icon-Mitte) — Label rechts */
@media (max-width: 480px) {
  .process-timeline.process-bar {
    --process-timeline-pad-x: 0.55rem;
    --process-icon-size: clamp(2.15rem, 6vw, 2.45rem);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.55rem;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 0.75rem var(--process-timeline-pad-x) 0.95rem;
    overflow-x: visible;
    box-sizing: border-box;
  }

  .process-timeline.process-bar::before {
    display: block;
    /* Padding links + Spalte Nummer + Lücke + halbe Icon-Breite */
    left: calc(var(--process-timeline-pad-x) + 2.5rem + 0.5rem + var(--process-icon-size) * 0.5);
    right: auto;
    top: 0.65rem;
    bottom: 0.65rem;
    width: 2px;
    height: auto;
    transform: translateX(-50%);
    background-image:
      linear-gradient(
        180deg,
        transparent 0%,
        transparent 35%,
        rgba(165, 200, 255, 0.95) 50%,
        transparent 65%,
        transparent 100%
      ),
      linear-gradient(
        180deg,
        transparent 0%,
        rgba(79, 141, 255, 0.55) 8%,
        rgba(79, 141, 255, 0.55) 92%,
        transparent 100%
      );
    background-size: 100% 300%, 100% 100%;
    background-repeat: no-repeat, no-repeat;
    background-position: 50% 100%, 50% 0%;
    animation: path-flow-line-vertical var(--path-flow-line-duration) linear infinite;
    box-shadow:
      0 0 10px rgba(79, 141, 255, 0.45),
      0 0 22px rgba(79, 141, 255, 0.22),
      0 0 40px rgba(79, 141, 255, 0.08);
  }

  .process-timeline__step {
    flex: none;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
    padding: 0.2rem 0;
    background: transparent;
    border: none;
    border-radius: 0;
    transition: border-color 0.22s ease, box-shadow 0.28s ease;
  }

  .process-timeline__step:hover {
    border-color: transparent;
    box-shadow: none;
  }

  .process-timeline__n {
    flex: 0 0 2.5rem;
    align-self: center;
    margin-bottom: 0;
    text-align: right;
    font-size: clamp(0.78rem, 3.4vw, 0.95rem);
  }

  .process-timeline__label {
    flex: 1 1 0;
    align-self: center;
    margin-top: 0;
    min-width: 0;
    font-size: clamp(0.66rem, 3.1vw, 0.78rem);
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    max-width: none;
    direction: ltr;
    unicode-bidi: isolate;
    /* < | zentrierter Umbruch-Text | > — volle Breite nutzen */
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.2em;
  }

  .process-timeline__label > :nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  .process-timeline__label > :nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    text-align: center;
  }

  .process-timeline__label > :nth-child(3) {
    grid-column: 3;
    grid-row: 1;
  }

  /* Blink-Cursor: auf schmalen Viewports aus — sonst Bidi/Reflow-Artefakte neben „<“ */
  .process-timeline__label > :nth-child(4) {
    display: none;
  }

  .process-timeline__icon {
    flex-shrink: 0;
    width: var(--process-icon-size);
    height: var(--process-icon-size);
    align-self: center;
  }

  .process-timeline__icon svg {
    width: 20px;
    height: 20px;
  }

  .process-section {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .process-section .process-timeline.process-bar {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
  }
}

/* Wie die Timeline selbst (≤719px): Detail-Kasten nicht nebeneinander quetschen — Titelzeile, darunter Fließtext.
 * Bisher nur ≤480px → viele Phones/DevTools bleiben >480px und behalten Flex-Zeile → abgeschnittener Text. */
@media (max-width: 719px) {
  .process-timeline-card .process-timeline__detail {
    display: block;
  }

  .process-timeline-card .process-timeline__detail-tag {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 0.5rem;
    white-space: normal;
    word-break: break-word;
  }

  .process-timeline-card .process-timeline__detail-text {
    display: block;
    width: 100%;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .process-timeline.process-bar::before {
    animation: none;
    background-position: 100% 50%, 0% 50%;
  }

  .process-timeline__step,
  .process-timeline__n,
  .process-timeline__icon,
  .process-timeline__icon svg,
  .process-timeline__label {
    transition: none;
  }

  .process-timeline__step:hover .process-timeline__icon svg {
    filter: none;
  }

  .process-timeline__step:hover .process-timeline__n,
  .process-timeline__step:hover .process-timeline__label {
    text-shadow: none;
  }

  .process-timeline__step:hover .process-timeline__label-cursor {
    animation: none;
    opacity: 1;
  }
}

/* —— Showroom —— */
.showroom-section + .content-light {
  margin-top: 0;
}

/* Erster Abschnitt direkt unter dem Hero: kein zusätzlicher Außenabstand (sonst helle/leere Lücke) */
.page-content-chrome--site > .showroom-section.main-segment:first-child,
.page-content-chrome--site > .content-light.main-segment:first-child {
  margin-top: 0;
}

.showroom-section {
  position: relative;
  isolation: isolate;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 0;
  padding: clamp(2.5rem, 5vw, 3.5rem) 1.25rem;
  overflow: visible;
  border-radius: 0;
  border-top: none;
  background: transparent;
}

.showroom-section::before {
  content: none;
  display: none;
}

.content-light + .showroom-section {
  margin-top: 0;
}

.showroom-section__map {
  position: absolute;
  inset: -8% -5%;
  z-index: 0;
  background-image: url("../img/world-map.svg");
  background-size: 110% auto;
  background-position: 50% 45%;
  background-repeat: no-repeat;
  opacity: 0.42;
  pointer-events: none;
  filter: saturate(0.65) contrast(1.05);
}

body.admin-page-view .showroom-section__map {
  display: none;
}

.showroom-section__inner {
  position: relative;
  z-index: 2;
  max-width: 76rem;
  margin: 0 auto;
}

.showroom-section__header {
  margin-bottom: 2.5rem;
}

/* Stack-Headline (Haupt + Subtitel) im Showroom: ohne eigene Bottom-Margin,
 * der Abstand zum Einleitungstext wird ausschließlich über `.showroom-section__intro`
 * gesetzt — analog zum Pattern in „Meine Arbeit" (Header → Intro = 2.5rem). */
.showroom-section__header .section-headline-stack {
  margin-bottom: 0;
}

/* Showroom-Intro: Typografie kommt aus `.section-intro`, hier nur die
 * positionsbedingten Margins (sitzt im Header neben/unter der Headline-Stack
 * und wird genau auf 2.5rem Abstand gehalten — siehe Showroom-Layout). */
.showroom-section__intro {
  margin: 2.5rem 0 0;
}

/* L-Ecken: vertikal am Inhaltsband; horizontal in der Viewport-Breite mit Inset wie zur Hauptspalte (analog main-Padding) */
.page-content-chrome {
  position: relative;
  isolation: isolate;
}

/* —— Einheitlicher Abschnitts-Hintergrund (Showroom-Raster + Weltkarte, Parallax per JS) —— */
.page-content-chrome--site {
  padding-top: clamp(1.75rem, 4vw, 2.5rem);
}

.site-segments-backdrop {
  position: absolute;
  left: 50%;
  width: 100vw;
  max-width: 100vw;
  margin-left: -50vw;
  top: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.site-segments-backdrop__layer {
  position: absolute;
  inset: -35% 0;
  will-change: transform;
}

.site-segments-backdrop__layer--atmosphere {
  background-color: var(--segment-bg-color);
  background-image:
    radial-gradient(circle at 50% 118%, rgba(79, 141, 255, 0.11) 0%, transparent 46%),
    var(--segment-bg-gradient);
  background-size: 100% 100%, 100% 100%, 100% 100%;
}

.site-segments-backdrop__layer--map {
  opacity: 0.88;
  filter: saturate(0.85) contrast(1.08);
  z-index: 0;
}

.site-segments-arcs-svg {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.site-segments-backdrop__layer--path-flow {
  pointer-events: none;
  z-index: 1;
}

.site-segments-path-flow-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.site-segments-backdrop .path-flow-track {
  fill: none;
  stroke: none;
  vector-effect: non-scaling-stroke;
}

.site-segments-backdrop .path-flow-slot,
.site-segments-backdrop .path-flow-layer,
.site-segments-backdrop .path-flow-particle,
.site-segments-backdrop .path-flow-trail {
  pointer-events: none;
}

.site-segments-backdrop__layer--grid {
  background-image:
    linear-gradient(var(--segment-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--segment-grid-line) 1px, transparent 1px);
  background-size: var(--bg-grid-size) var(--bg-grid-size);
  -webkit-mask-image: var(--bg-vignette-mask-grid);
  mask-image: var(--bg-vignette-mask-grid);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.page-content-chrome--site > :not(.site-segments-backdrop):not(.page-content-chrome__corners) {
  position: relative;
  z-index: 1;
}

.page-content-chrome--site > .showroom-section.main-segment,
.page-content-chrome--site > .content-light.main-segment {
  border-top: none;
  box-shadow: none;
}

.page-content-chrome--site .content-light::before,
.page-content-chrome--site .content-light::after,
.page-content-chrome--site .showroom-section::before {
  content: none;
  display: none;
}

.page-content-chrome--site .showroom-section {
  background: transparent;
  border-top: none;
}

.page-content-chrome--site .showroom-section__map {
  display: none;
}

.page-content-chrome--site .section-tech-deco {
  display: none;
}

.page-content-chrome--site .content-light {
  background: transparent;
}

.page-content-chrome--site .content-light--about + .content-light--prozess-cta {
  border-top: none;
  box-shadow: none;
}

/* Datenschutz-Hinweis darf Kontaktfenster unten rechts überlappen */
.page-content-chrome--site .content-light--kontakt {
  overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
  .site-segments-backdrop__layer {
    transform: none !important;
  }
}

/* Admin: einheitlicher Abschnitts-Hintergrund (Atmosphäre + Raster, ohne Bögen) */
.page-content-chrome--admin {
  padding-top: clamp(1.75rem, 4vw, 2.5rem);
}

body.admin-page-view .page-content-chrome--admin .site-segments-backdrop {
  top: calc(-1 * var(--admin-header-hang-height));
}

.page-content-chrome--admin > :not(.site-segments-backdrop):not(.page-content-chrome__corners):not(.admin-back-to-top-wrap) {
  position: relative;
  z-index: 1;
}

.page-content-chrome--admin .admin-page-sections > .showroom-section.admin-segment,
.page-content-chrome--admin .admin-page-sections > .content-light.admin-segment,
.page-content-chrome--admin > .content-light.admin-segment {
  margin-top: 0;
  border-top: none;
  box-shadow: none;
}

.page-content-chrome--admin .content-light::before,
.page-content-chrome--admin .content-light::after,
.page-content-chrome--admin .showroom-section::before {
  content: none;
  display: none;
}

.page-content-chrome--admin .showroom-section {
  background: transparent;
  border-top: none;
}

.page-content-chrome--admin .showroom-section__map {
  display: none;
}

.page-content-chrome__corners {
  --chrome-edge-block: clamp(0.35rem, 1vw, 0.85rem);
  /* Horizontale Rücklage (Padding am Eltern-Element wirkt auf position:absolute-Kinder mit left/right:0 nicht) */
  --chrome-edge-inline: clamp(1.05rem, 3.6vw, 1.5rem);
  --chrome-edge-inline-left: max(var(--chrome-edge-inline), env(safe-area-inset-left, 0px));
  --chrome-edge-inline-right: max(var(--chrome-edge-inline), env(safe-area-inset-right, 0px));
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 100vw;
  box-sizing: border-box;
  top: var(--chrome-edge-block);
  bottom: var(--chrome-edge-block);
  z-index: 4;
  pointer-events: none;
}

.page-content-chrome--site .page-content-chrome__corners,
.page-content-chrome--admin .page-content-chrome__corners,
.page-content-chrome--legal .page-content-chrome__corners {
  --vcc-arm: clamp(1.4rem, 3.8vw, 1.85rem);
  --vcc-thick: 3px;
}

.page-content-chrome--admin > .admin-back-to-top-wrap {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  left: 50%;
  width: 100vw;
  max-width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  box-sizing: border-box;
  padding: clamp(1.25rem, 3vw, 1.75rem) 1.25rem clamp(1.5rem, 3vw, 2rem);
}

.page-content-chrome--admin > .admin-back-to-top-wrap .admin-back-to-top-inner {
  max-width: 76rem;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
}

.page-content-chrome__corners .viewport-chrome-corners__corner {
  position: absolute;
  width: var(--vcc-arm);
  height: var(--vcc-arm);
  box-sizing: border-box;
  opacity: var(--viewport-chrome-corner-opacity);
  border-color: var(--viewport-chrome-corner-color);
  border-style: solid;
}

.page-content-chrome__corners .viewport-chrome-corners__corner--tl {
  top: 0;
  left: var(--chrome-edge-inline-left);
  border-width: var(--vcc-thick) 0 0 var(--vcc-thick);
  border-radius: 2px 0 0 0;
}

.page-content-chrome__corners .viewport-chrome-corners__corner--tr {
  top: 0;
  right: var(--chrome-edge-inline-right);
  border-width: var(--vcc-thick) var(--vcc-thick) 0 0;
  border-radius: 0 2px 0 0;
}

.page-content-chrome__corners .viewport-chrome-corners__corner--bl {
  bottom: 0;
  left: var(--chrome-edge-inline-left);
  border-width: 0 0 var(--vcc-thick) var(--vcc-thick);
  border-radius: 0 0 0 2px;
}

.page-content-chrome__corners .viewport-chrome-corners__corner--br {
  bottom: 0;
  right: var(--chrome-edge-inline-right);
  border-width: 0 var(--vcc-thick) var(--vcc-thick) 0;
  border-radius: 0 0 2px 0;
}

@media print {
  .page-content-chrome__corners {
    display: none;
  }
}

/* Showroom-Console: Window-Chrome (Rand, Hintergrund, Schatten, Hover-Glow)
 * stammt aus der geteilten Vorlage `.terminal-console`. Hier nur das
 * Komponenten-spezifische Grid-Layout (Titelleiste + Sidebar + Stage + Foot)
 * und die Zuordnung der Slots zu den Grid-Areas. */
.showroom-console {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    "titlebar"
    "sidebar"
    "stage"
    "foot";
}

.showroom-console__titlebar { grid-area: titlebar; }
.showroom-console__sidebar { grid-area: sidebar; }
.showroom-console__stage { grid-area: stage; }
.showroom-console__sidebar-foot { grid-area: foot; }

@media (min-width: 860px) {
  .showroom-console {
    grid-template-columns: minmax(12.5rem, 17rem) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "titlebar titlebar"
      "sidebar  stage"
      "foot     stage";
    min-height: clamp(22rem, 52vh, 32rem);
  }
}

.showroom-console__sidebar {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid rgba(51, 103, 229, 0.22);
  background: var(--surface-console-sidebar);
}

@media (min-width: 860px) {
  .showroom-console__sidebar {
    border-bottom: none;
    border-right: 1px solid rgba(51, 103, 229, 0.22);
  }
}

/* Sidebar-Kopf der Showroom-Konsole: nur Container-Eigenschaften (Padding,
 * Trennlinie, Hintergrund) — Typografie und Prompt-/Cursor-Look kommen aus
 * der geteilten `.terminal-cmd`-Vorlage am Element. */
.showroom-console__sidebar-head {
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid rgba(51, 103, 229, 0.18);
  background: rgba(15, 23, 42, 0.65);
}

.showroom-console__list {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0;
  flex: 1 1 auto;
}

.showroom-console__row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  width: 100%;
  margin: 0;
  padding: 0.65rem 0.85rem;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border: none;
  border-bottom: 1px solid rgba(30, 41, 59, 0.65);
  background: transparent;
  color: rgba(226, 232, 240, 0.92);
  transition: background 0.15s ease, color 0.15s ease;
}

.showroom-console__row:hover {
  background: rgba(51, 103, 229, 0.12);
}

.showroom-console__row.is-active {
  background: rgba(245, 211, 0, 0.1);
  border-left: 3px solid var(--accent);
  padding-left: calc(0.85rem - 3px);
}

.showroom-console__row-tag {
  font-size: 0.62rem;
  color: rgba(148, 163, 184, 0.95);
  letter-spacing: 0.06em;
}

.showroom-console__row-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(248, 250, 252, 0.96);
}

.showroom-console__sidebar-foot {
  padding: 0.75rem 0.85rem;
  border-top: 1px solid rgba(51, 103, 229, 0.18);
  background: var(--surface-console-foot);
}

@media (min-width: 860px) {
  .showroom-console__sidebar-foot {
    border-right: 1px solid rgba(51, 103, 229, 0.22);
  }
}

.showroom-console__open-external {
  width: 100%;
  justify-content: center;
  font-size: 0.65rem;
  padding: 0.65rem 0.85rem;
}

@media (max-width: 900px) and (orientation: portrait) {
  .showroom-console__open-external.btn-cta-glow {
    font-size: calc(0.65rem * 0.8);
    padding: calc(0.65rem * 0.8) calc(0.85rem * 0.8);
  }
}

.showroom-console__stage {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: clamp(16rem, 38vh, 26rem);
  background: var(--surface-console-stage);
}

.showroom-console__viewport {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  isolation: isolate;
}

/* Glare-Schutz: helle Demo-Seiten im Showroom dezent dimmen, ohne
 * dunkle Demos abzudunkeln. `mix-blend-mode: multiply` multipliziert
 * pixelweise mit dem Overlay → Weiß wird Hellgrau, Schwarz bleibt
 * Schwarz (×0 = 0). Farbsättigung der Demo bleibt erhalten.
 * `pointer-events: none` lässt Klicks zum darüberliegenden Guard bzw. iframe. */
.showroom-console__viewport::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.25);
  mix-blend-mode: multiply;
  z-index: 1;
}

.showroom-console__frame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 14rem;
  border: none;
  background: #0f172a;
  pointer-events: none;
}

.showroom-console__viewport.is-demo-interactive .showroom-console__frame {
  pointer-events: auto;
}

/* Scroll-Sperre: solange inaktiv, fängt der Guard Rad-/Touch-Scroll ab —
 * die Hauptseite scrollt; nach Klick/Tap ist die Demo interaktiv. */
.showroom-console__frame-guard {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.85rem;
  border: none;
  background: transparent;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: center;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.showroom-console__frame-guard:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

.showroom-console__viewport.is-demo-interactive .showroom-console__frame-guard {
  display: none !important;
}

.showroom-console__frame-guard-hint {
  display: inline-block;
  max-width: 18rem;
  margin: 0;
  padding: 0.65rem 1.05rem;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
  color: rgba(241, 245, 249, 0.96);
  /* Wie zuvor dunkles Grau, aber transparenter — Blur der Demo scheint durch */
  background: var(--surface-showroom-hint);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.45rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0.4rem 1.5rem rgba(2, 6, 15, 0.35);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
}

@media (prefers-reduced-motion: reduce) {
  .showroom-console__frame-guard-hint {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--surface-showroom-hint-dense);
  }
}

/* Maus / feine Zeiger: Klicken … */
.showroom-console__frame-guard-hint--coarse {
  display: none;
}

/* Touch / grobe Zeiger: Tippen … */
@media (pointer: coarse) {
  .showroom-console__frame-guard-hint--fine {
    display: none;
  }

  .showroom-console__frame-guard-hint--coarse {
    display: inline-block;
  }
}

.showroom-console__frame-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 1.5rem;
  text-align: center;
  background: radial-gradient(ellipse at 50% 0%, rgba(51, 103, 229, 0.12), transparent 55%), #0b1220;
}

.showroom-console__fallback-cmd {
  margin: 0;
  font-size: 0.72rem;
  color: var(--accent);
}

.showroom-console__fallback-hint {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(203, 213, 225, 0.88);
  max-width: 22rem;
}

/* Showroom: serverseitige Einbettungsprüfung (XFO / CSP) */
.showroom-console__embed-checking,
.showroom-console__embed-blocked,
.showroom-console__embed-unverified {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem;
  text-align: center;
  pointer-events: auto;
  background: radial-gradient(ellipse at 50% 0%, rgba(51, 103, 229, 0.14), transparent 55%), var(--surface-console-stage);
}

.showroom-console__embed-checking-text {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(203, 213, 225, 0.92);
}

.showroom-console__embed-blocked-open {
  margin-top: 0.15rem;
}

.mono-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

.content-card .mono-label {
  margin-bottom: 1.2rem;
}

.mono-label--badge {
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.65rem;
  border-radius: var(--btn-radius);
  background: var(--accent);
  color: var(--btn-text-solid);
  letter-spacing: 0.1em;
  border: 1px solid var(--btn-primary-edge);
}

/* Kontakt: Formular-Shell, Grid, Honeypot, Meldungen */
.contact-form-shell {
  max-width: none;
}

.contact-form-shell__eyebrow {
  margin-bottom: 1rem;
}

/* Trennlinie zwischen „erreichbar_unter“ und „> Kontaktformular“: gleicher Abstand
   ober- und unterhalb → Linie mittig im Leerraum */
.contact-form-shell__direct + .contact-form-shell__eyebrow {
  margin-top: 0;
  margin-bottom: 1rem;
  padding-top: calc(0.85rem + 0.775 * 0.78rem);
  border-top: 1px solid rgba(100, 116, 139, 0.35);
}

.contact-form-shell__eyebrow .process-timeline__detail-tag {
  margin: 0;
}

.contact-form-shell__title {
  margin: 0 0 0.65rem;
  font-size: 1.125rem;
  color: var(--text-contact-title);
}

.contact-form-shell__lead {
  margin: 0;
  color: var(--text-contact-lead);
  line-height: 1.6;
}

/* Schnellkontakt (Mail / Tel / Maps) oben in der Shell */
.contact-form-shell__direct {
  margin-top: 0;
  margin-bottom: calc(0.85rem + 0.775 * 0.78rem);
  padding-top: 0;
  border-top: none;
}

.contact-form-shell__direct > .contact-form-shell__eyebrow {
  margin-bottom: 0.65rem;
}

.contact-direct-lines {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.55;
  display: grid;
  grid-template-columns: auto max-content minmax(0, 1fr);
  column-gap: 0.45rem;
  row-gap: 0.4rem;
  align-items: center;
}

.contact-direct-lines__item {
  display: contents;
}

.contact-direct-lines__ic {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: rgba(148, 163, 184, 0.92);
}

.contact-direct-lines__ic svg {
  display: block;
  width: 0.82em;
  height: 0.82em;
}

.contact-direct-lines__lbl {
  color: rgba(148, 163, 184, 0.92);
  white-space: nowrap;
}

.contact-direct-lines__lbl .contact-direct-lines__sep {
  color: rgba(100, 116, 139, 0.75);
}

.contact-direct-lines__mid {
  color: rgba(100, 116, 139, 0.65);
  font-weight: 600;
}

.contact-direct-lines__val {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.15rem;
  min-width: 0;
}

.contact-direct-lines__link {
  color: rgba(34, 211, 238, 0.95);
  text-decoration: none;
  text-underline-offset: 0.12em;
  word-break: normal;
  overflow-wrap: anywhere;
}

.contact-direct-lines__link:hover,
.contact-direct-lines__link:focus-visible {
  color: rgba(103, 232, 249, 1);
  text-decoration: underline;
}

.contact-direct-lines__link:focus-visible {
  outline: 2px solid rgba(34, 211, 238, 0.55);
  outline-offset: 2px;
}

.contact-direct-lines__link--wa {
  color: rgba(52, 211, 153, 0.95);
}

.contact-direct-lines__link--wa:hover,
.contact-direct-lines__link--wa:focus-visible {
  color: rgba(110, 231, 183, 1);
}

.contact-direct-lines__link--wa:focus-visible {
  outline-color: rgba(52, 211, 153, 0.55);
}

.contact-direct-lines__plain {
  color: rgba(203, 213, 225, 0.88);
  word-break: normal;
  overflow-wrap: anywhere;
}

/* Adresse: eine Zeile wenn Platz; Umbruch nur zwischen Straße (inkl. Hausnr.) und PLZ/Ort */
.contact-direct-lines__link--address,
.contact-direct-lines__address-lines {
  display: inline-flex;
  max-width: 100%;
  min-width: 0;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.35rem;
}

.contact-direct-lines__addr-street {
  flex: 0 1 auto;
  white-space: nowrap;
}

.contact-direct-lines__addr-locality {
  flex: 0 1 auto;
  white-space: nowrap;
}

/* Mobil / Hochformat: ein gemeinsames Grid — alle Icons + Links auf einer Senkrechten */
@media (max-width: 640px), (max-width: 900px) and (orientation: portrait) {
  .contact-direct-lines {
    display: grid;
    grid-template-columns: 1.05rem minmax(0, 1fr);
    column-gap: 0.45rem;
    row-gap: 0.22rem;
    align-items: center;
  }

  .contact-direct-lines__item {
    display: contents;
  }

  .contact-direct-lines__ic {
    grid-column: 1;
    justify-self: start;
    align-self: center;
  }

  .contact-direct-lines__lbl {
    grid-column: 2;
    justify-self: start;
    align-self: center;
  }

  .contact-direct-lines__val {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    justify-self: start;
    text-align: left;
    margin-bottom: 0.55rem;
  }

  .contact-direct-lines__item:last-child .contact-direct-lines__val {
    margin-bottom: 0;
  }

  .contact-direct-lines__val:not(.contact-direct-lines__val--address) > .contact-direct-lines__link:first-of-type,
  .contact-direct-lines__val:not(.contact-direct-lines__val--address) > .contact-direct-lines__plain:first-of-type {
    white-space: nowrap;
  }
}

.contact-form-notice {
  margin-top: 1rem;
  border-radius: var(--btn-radius);
  padding: 0.72rem 0.85rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.contact-form-message {
  margin-top: 1rem;
  border-radius: var(--btn-radius);
  padding: 0.72rem 0.85rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.contact-console .contact-form-notice {
  border: 1px solid rgba(245, 211, 0, 0.38);
  background: rgba(245, 211, 0, 0.08);
  color: rgba(253, 224, 71, 0.92);
}

.contact-console .contact-form-message--success {
  border: 1px solid rgba(74, 222, 128, 0.45);
  background: rgba(20, 83, 45, 0.38);
  color: rgba(187, 247, 208, 0.95);
}

.contact-console .contact-form-message--error {
  border: 1px solid rgba(248, 113, 113, 0.5);
  background: rgba(127, 29, 29, 0.38);
  color: rgba(254, 226, 226, 0.95);
}

.contact-form-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.contact-form-grid {
  position: relative;
  margin-top: 1.25rem;
  display: grid;
  gap: 0.95rem;
}

.contact-form-field {
  display: grid;
  gap: 0.4rem;
}

.contact-form-field label {
  font-size: 0.85rem;
  font-weight: 600;
}

.contact-console .contact-form-field label {
  color: rgba(226, 232, 240, 0.92);
}

.contact-form-control {
  width: 100%;
  border-radius: var(--btn-radius);
  padding: 0.68rem 0.78rem;
  font: inherit;
  transition:
    border-color 0.18s ease,
    box-shadow 0.2s ease;
}

.contact-console .contact-form-control {
  border: 1px solid rgba(79, 141, 255, 0.32);
  background: var(--surface-kachel-input);
  color: rgba(248, 250, 252, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.contact-console .contact-form-control::placeholder {
  color: rgba(148, 163, 184, 0.55);
}

.contact-console select.contact-form-control {
  color-scheme: dark;
  cursor: pointer;
}

.contact-console .contact-form-control option {
  background: var(--surface-kachel-fallback);
  color: #e2e8f0;
}

.contact-console .contact-form-control:focus {
  outline: none;
  border-color: rgba(79, 141, 255, 0.75);
  box-shadow:
    inset 0 0 0 1px rgba(79, 141, 255, 0.15),
    0 0 0 1px rgba(79, 141, 255, 0.3),
    0 0 22px rgba(79, 141, 255, 0.25);
}

/* Autofill: WebKit setzt sonst hellen Hintergrund (wirkt wie „weiße“ Textboxen trotz Konsole). */
.contact-console .contact-form-control:-webkit-autofill,
.contact-console .contact-form-control:-webkit-autofill:hover,
.contact-console .contact-form-control:-webkit-autofill:active {
  -webkit-text-fill-color: rgba(248, 250, 252, 0.96);
  caret-color: rgba(248, 250, 252, 0.96);
  border: 1px solid rgba(79, 141, 255, 0.32);
  box-shadow: 0 0 0 100px var(--surface-kachel-input) inset;
  transition: background-color 99999s ease-out;
}

.contact-console .contact-form-control:-webkit-autofill:focus {
  border-color: rgba(79, 141, 255, 0.75);
  box-shadow:
    0 0 0 100px var(--surface-kachel-input) inset,
    0 0 0 1px rgba(79, 141, 255, 0.3),
    0 0 22px rgba(79, 141, 255, 0.25);
}

.contact-form-control:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.contact-form-control--textarea {
  resize: vertical;
  min-height: 8rem;
}

.contact-form-actions {
  margin-top: 0.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
}

.contact-form-actions .btn-cta-glow:disabled {
  filter: grayscale(0.12);
  opacity: 0.72;
  cursor: not-allowed;
}

.btn-form-reset {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  border-radius: var(--btn-radius);
  padding: 0.78rem 1.35rem;
  border: 1px solid rgba(51, 103, 229, 0.55);
  background: transparent;
  color: var(--azure-mid);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.15s ease,
    box-shadow 0.22s ease,
    opacity 0.15s ease;
}

.btn-form-reset:hover,
.btn-form-reset:focus-visible {
  color: var(--azure);
  background: rgba(79, 141, 255, 0.06);
  border-color: rgba(79, 141, 255, 0.75);
  box-shadow:
    inset 0 0 26px rgba(79, 141, 255, 0.1),
    0 0 0 1px rgba(79, 141, 255, 0.28),
    0 0 20px rgba(79, 141, 255, 0.2);
}

.btn-form-reset:disabled {
  opacity: 0.66;
  cursor: not-allowed;
}

/* Terminal-Cursor direkt hinter dem Label (im Flex-Flow); opacity 0 reserviert Breite gegen Sprung beim Hover. */
.btn-cta-glow:not(:disabled):not(.admin-save--icon):not(.admin-save--text)::after,
.btn-ghost::after,
.btn-form-reset:not(:disabled)::after {
  content: "_";
  display: inline-block;
  flex: 0 0 auto;
  align-self: center;
  margin-left: 0.08em;
  font-family: inherit;
  font-size: 1em;
  font-weight: inherit;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
}

.btn-cta-glow:not(:disabled):not(.admin-save--icon):not(.admin-save--text):hover::after,
.btn-cta-glow:not(:disabled):not(.admin-save--icon):not(.admin-save--text):focus-visible::after,
.btn-ghost:hover::after,
.btn-ghost:focus-visible::after,
.btn-form-reset:not(:disabled):hover::after,
.btn-form-reset:not(:disabled):focus-visible::after {
  animation: btn-caret-blink 1.06s step-end infinite;
}

@media (prefers-reduced-motion: reduce) {
  .btn-cta-glow:not(:disabled):not(.admin-save--icon):not(.admin-save--text)::after,
  .btn-ghost::after,
  .btn-form-reset:not(:disabled)::after {
    content: none;
  }

  .btn-form-reset,
  .btn-form-reset:hover,
  .btn-form-reset:focus-visible {
    transition: none;
    transform: none;
    box-shadow: none;
  }

  .hero__actions .btn-form-reset,
  .hero__actions .btn-form-reset:hover,
  .hero__actions .btn-form-reset:focus-visible {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      0 4px 16px rgba(0, 0, 0, 0.32);
  }
}

@media (min-width: 760px) {
  .contact-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-form-field--full {
    grid-column: 1 / -1;
  }
}

/* Modulares CTA-Element: frei zwischen Sektionen platzierbar (Glas-Look) */
.cta-module {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 80%;
  max-width: 1200px;
  margin-inline: auto;
  padding: clamp(2.25rem, 5vw, 3rem) clamp(1.25rem, 4vw, 2rem);
  text-align: center;
  color: #f8fafc;
  background: var(--surface-kachel);
  border-radius: var(--btn-radius);
}

@media (prefers-reduced-motion: reduce) {
  .arbeit-tile,
  .terminal-console,
  .process-timeline-card,
  .about-media,
  .cta-module {
    transition: none;
  }
}

.cta-module__headline {
  margin: 0;
  max-width: 38ch;
  color: inherit;
  font-family: var(--font-mono);
  font-size: clamp(0.84rem, 2.08vw, 1.32rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-shadow:
    0 0 14px rgba(245, 211, 0, 0.16),
    0 0 28px rgba(245, 211, 0, 0.08);
}

.cta-module .btn-cta-glow {
  flex: 0 0 auto;
  margin: 0;
}

@media (max-width: 640px) {
  .cta-module {
    width: 92%;
    padding: 1.85rem 1.15rem;
    gap: 1.15rem;
  }
}

/* —— Fußzeile —— */
.site-footer {
  width: 100%;
  margin: 0;
  padding: 2.4rem 1.5rem 3.2rem;
  font-size: 0.8125rem;
  color: rgba(229, 240, 255, 0.78);
  text-align: center;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 48px 48px;
  z-index: 0;
}

.site-footer__copyright {
  margin: 0;
  color: #ffffff;
  font-size: 0.97rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.site-footer-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem 1.75rem;
  margin-top: 0.75rem;
}

.site-footer-meta a {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  padding-right: 0.7em;
  color: var(--footer-link);
  transition: color 0.2s ease;
}

.site-footer-meta a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.1rem;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--footer-link-line), var(--footer-link-line-strong));
  opacity: 0.6;
  transform-origin: left;
  transform: scaleX(0.35);
  transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease;
}

.site-footer-meta a::before {
  content: "_";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-52%);
  color: var(--footer-cursor-hover);
  opacity: 0;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.site-footer-meta a:hover,
.site-footer-meta a:focus-visible {
  color: var(--footer-link-hover);
}

.site-footer-meta a:hover::after,
.site-footer-meta a:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
  background: linear-gradient(90deg, var(--footer-link-line), var(--footer-link-line-hover));
}

.site-footer-meta a:hover::before,
.site-footer-meta a:focus-visible::before {
  opacity: 1;
  animation: logo-cursor-blink 900ms steps(1, end) infinite;
}

.site-footer .site-footer-meta__admin-link {
  color: var(--footer-link-admin);
}

.site-footer .site-footer-meta__admin-link:hover,
.site-footer .site-footer-meta__admin-link:focus-visible {
  color: var(--footer-link-admin-hover);
}

/* Zusatz-Abstand im Fuß, wenn die fixierte Admin-Session-Leiste eingeblendet ist (Links nicht verdecken) */
body.has-admin-session-notice .site-footer {
  padding-bottom: calc(3.2rem + 2.75rem);
}

@media (max-width: 639px) {
  body.has-admin-session-notice .site-footer {
    padding-bottom: calc(3.2rem + 3.875rem);
  }
}

/* Hinweis-Leiste: öffentliche Site bei noch aktiver Admin-Session (wie Header: über dem Inhalt, Glas/Blur) */
.admin-session-notice {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  border-top: 1px solid rgba(251, 146, 60, 0.38);
  background: rgba(124, 45, 18, 0.58);
  color: #ffedd5;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.22);
  padding: 0.75rem 1.5rem;
}

.admin-session-notice__inner {
  max-width: 80rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem 1rem;
}

.admin-session-notice__text {
  margin: 0;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.625;
}

.admin-session-notice__text a {
  color: #fff7ed;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(251, 146, 60, 0.75);
}

.admin-session-notice__text a:hover,
.admin-session-notice__text a:focus-visible {
  color: #ffffff;
  text-decoration-color: #fdba74;
}

.admin-session-notice__logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  border: 1px solid #fb923c;
  background: rgba(255, 237, 213, 0.12);
  color: #ffedd5;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  text-decoration: none;
  padding: 0.6rem 0.95rem;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.admin-session-notice__logout:hover,
.admin-session-notice__logout:focus-visible {
  transform: translateY(-1px);
  background: rgba(255, 237, 213, 0.2);
  border-color: #fdba74;
  color: #fffbeb;
}

@media (max-width: 900px) {
  .admin-session-notice {
    background: rgba(124, 45, 18, 0.92);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (min-width: 640px) {
  .admin-session-notice__inner {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .admin-session-notice__text {
    text-align: left;
  }
}

/* —— Admin: Login- & Passwort-Seiten —— */
.admin-auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  color-scheme: dark;
}

.admin-auth-theme-toggle {
  position: fixed;
  top: clamp(0.85rem, 2.5vw, 1.25rem);
  right: clamp(0.85rem, 2.5vw, 1.25rem);
  z-index: 5;
  margin: 0;
}

.admin-auth-shell {
  width: min(32rem, 100%);
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  position: relative;
  z-index: 1;
}

.admin-auth-below {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 1.5rem;
}

.admin-auth-below__link {
  text-decoration: none;
}

.admin-auth-logo {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  white-space: nowrap;
}

/* SVG nur für konsistentes Markup; nimmt keinen Platz weg (sonst sitzt der Text links). */
.admin-auth-logo .admin-auth-logo__img {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.admin-auth-logo__track {
  position: relative;
  display: inline-block;
}

/* Gleiche Typo wie .section-headline; Maßspanne und Typing identisch (sonst wirkt die Zeile nach rechts versetzt). */
.admin-auth-logo__measure,
.admin-auth-logo .site-logo__typing.admin-auth-logo__typing {
  font-family: var(--font-mono);
  font-size: clamp(0.96rem, 2.4vw, 1.32rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.15;
  text-transform: uppercase;
  text-shadow:
    0 0 18px rgba(203, 213, 225, 0.16),
    0 0 28px rgba(245, 211, 0, 0.12);
}

.admin-auth-logo__measure {
  visibility: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  white-space: nowrap;
}

.admin-auth-logo__typing {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  min-height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Leerzeichen darf als Flex-Kind nicht auf Breite 0 schrumpfen */
.admin-auth-logo__typing > span {
  flex-shrink: 0;
}

.admin-auth-code-bg {
  opacity: 0.56;
}

/* Login/Passwort: Abschnitts-Schale wie Dashboard; Konsole nutzt normale .contact-console-Breite (kein extra max 32rem). */
.admin-section.admin-section--auth {
  padding: 0;
  margin: 0;
  width: 100%;
}

.admin-auth-console.contact-console {
  width: min(32rem, 100%);
  max-width: min(32rem, 100%);
  margin-left: auto;
  margin-right: auto;
}

.admin-auth-console .contact-console__body > .admin-form-error,
.admin-auth-console .contact-console__body > .admin-form-success {
  margin: 0 0 0.75rem;
}

.admin-auth-console .contact-form-field > .admin-kontakt-form__hint:first-child {
  margin-top: 0;
}

.admin-auth-console .contact-form-actions.admin-kontakt-form__actions {
  justify-content: center;
  width: 100%;
}

.admin-auth-below .admin-btn.admin-auth-below__link {
  text-decoration: none;
}

.admin-form-error,
.admin-form-success {
  border-radius: 0.6rem;
  padding: 0.55rem 0.7rem;
  font-size: 0.9rem;
}

.admin-form-error {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.45);
}

.admin-form-success {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.45);
}

.admin-form-warning {
  background: rgba(234, 88, 12, 0.22);
  border: 1px solid rgba(251, 146, 60, 0.5);
}

.admin-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
}

.admin-menu a {
  padding: 0.45rem 0.72rem;
  border-radius: var(--btn-radius);
  text-decoration: none;
  color: #0f172a;
  border: 1px solid rgba(79, 141, 255, 0.4);
  background: rgba(255, 255, 255, 0.72);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
}

.admin-nav-wrap {
  padding-top: 0.75rem;
  padding-bottom: 0.5rem;
  margin-top: 0;
}

/* —— Admin-Dashboard (Kacheln, Formulare, Pickers) —— */
.admin-card,
.admin-section {
  color: rgba(229, 240, 255, 0.92);
}

.admin-card h2,
.admin-card h3,
.admin-section h2,
.admin-section h3 {
  color: rgba(248, 250, 252, 0.98);
}

.admin-content {
  display: grid;
  gap: clamp(2rem, 4vw, 2.75rem);
}

.admin-section__head {
  margin-bottom: 1.25rem;
}

.admin-card form,
.admin-section form,
.admin-subform {
  display: grid;
  gap: 0.65rem;
}

.admin-kachel-form {
  border-radius: 0.4rem;
  border: 1px solid transparent;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.admin-kachel-form.admin-kachel-form--dirty {
  border-color: rgba(245, 211, 0, 0.7);
  box-shadow:
    0 0 0 1px rgba(245, 211, 0, 0.35),
    0 8px 22px rgba(245, 211, 0, 0.22);
  background: rgba(245, 211, 0, 0.06);
}

/* Wenn ein Kachel-Form innerhalb einer "Fake-Window"-Console (Portrait,
 * Kontakt) dirty wird, soll die Hervorhebung auf der Außenkante des
 * Fensters liegen – nicht auf einem inneren gelben Rahmen.
 * Das Form selbst behält dann eine unauffällige Optik. */
.contact-console:has(.admin-kachel-form--dirty) {
  border-color: rgba(245, 211, 0, 0.7);
  box-shadow:
    0 0 0 1px rgba(245, 211, 0, 0.35),
    0 22px 52px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 8px 22px rgba(245, 211, 0, 0.22);
}

.contact-console:has(.admin-kachel-form--dirty) .admin-kachel-form.admin-kachel-form--dirty {
  border-color: transparent;
  box-shadow: none;
  background: transparent;
}

/* Innerer Schimmer im Body, analog zum gelben Hintergrund-Tint der Kacheln. */
.contact-console:has(.admin-kachel-form--dirty) .contact-console__body {
  background:
    linear-gradient(rgba(245, 211, 0, 0.06), rgba(245, 211, 0, 0.06)),
    var(--surface-console-inner);
}

/* Auch die angedeutete Titelleiste übernimmt den gelben Schimmer + die
 * goldene Trennlinie zum Body. */
.contact-console:has(.admin-kachel-form--dirty) .console-titlebar {
  background:
    linear-gradient(rgba(245, 211, 0, 0.08), rgba(245, 211, 0, 0.08)),
    rgba(15, 23, 42, 0.92);
  border-bottom-color: rgba(245, 211, 0, 0.45);
}

.admin-card label,
.admin-section label {
  display: grid;
  gap: 0.32rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(226, 232, 240, 0.92);
}

/* Inputs/Textareas im Admin nutzen die gleiche dunkle Optik wie die Kontakt-Konsole */
.content-light.admin-segment .contact-form-control,
.showroom-section.admin-segment .contact-form-control,
.admin-section input.contact-form-control,
.admin-section textarea.contact-form-control,
.admin-section select.contact-form-control {
  width: 100%;
  border-radius: var(--btn-radius);
  padding: 0.68rem 0.78rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.45;
  border: 1px solid rgba(79, 141, 255, 0.32);
  background: var(--surface-kachel-input);
  color: rgba(248, 250, 252, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    border-color 0.18s ease,
    box-shadow 0.2s ease;
}

.content-light.admin-segment .contact-form-control::placeholder,
.showroom-section.admin-segment .contact-form-control::placeholder {
  color: rgba(148, 163, 184, 0.55);
}

.content-light.admin-segment .contact-form-control:focus,
.showroom-section.admin-segment .contact-form-control:focus {
  outline: none;
  border-color: rgba(79, 141, 255, 0.75);
  box-shadow:
    inset 0 0 0 1px rgba(79, 141, 255, 0.15),
    0 0 0 1px rgba(79, 141, 255, 0.3),
    0 0 22px rgba(79, 141, 255, 0.25);
}

.admin-kachel-item:not(.admin-showroom-item) input[name="title"],
.admin-showroom-item input[name="label"] {
  font-weight: 700;
}

.admin-section {
  padding: 0.35rem 0;
}

.admin-section + .admin-section {
  border-top: 1px solid rgba(79, 141, 255, 0.28);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

.admin-section .contact-console .contact-form-field label {
  color: var(--text-on-dark);
}

.contact-form-field > .admin-contact-field-head {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
}

.admin-contact-field-head__label {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.admin-contact-field-head__toggle {
  display: inline-flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  margin-left: auto;
}

.admin-contact-field-head__checkbox {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--accent, #f5d300);
  cursor: pointer;
}

.admin-contact-field-head__checkbox:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.admin-contact-field-head__checkbox:disabled + .admin-contact-field-head__toggle-label {
  opacity: 0.45;
  cursor: not-allowed;
}

.admin-contact-field-head__toggle-label {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(148, 163, 184, 0.95);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.admin-kontakt-form__hint {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  color: rgba(148, 163, 184, 0.85);
  line-height: 1.45;
}

.admin-kontakt-form__hint code {
  font-size: 0.78em;
  padding: 0.1em 0.4em;
  border-radius: 0.25rem;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(79, 141, 255, 0.32);
  color: rgba(229, 240, 255, 0.95);
  font-family: var(--font-mono);
}

.admin-form-hint {
  font-size: 0.72rem;
  font-weight: 400;
  color: rgba(148, 163, 184, 0.85);
  margin-left: 0.4em;
  letter-spacing: 0;
  text-transform: none;
}

.admin-form-hint code {
  font-family: var(--font-mono);
  padding: 0.05em 0.35em;
  border-radius: 0.2rem;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(79, 141, 255, 0.28);
  color: rgba(229, 240, 255, 0.92);
}

/* Portrait-Datei: ähnlich .admin-icon-picker (Kasten + Trigger), begrenzte Breite (nicht volle Zeile), mobil Hochladen darunter */
.admin-portrait-main-form__field-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(226, 232, 240, 0.92);
  margin-bottom: 0.32rem;
}

.admin-portrait-main-form__file-wrap {
  width: 100%;
  max-width: min(100%, 72%);
  min-width: min(100%, 20rem);
  margin-bottom: 0;
}

/* Hinweis „JPEG …“ direkt unter Datei-Kasten — gleicher Abstand wie unter Ausschnitt */
.admin-portrait-main-form__file-wrap + .admin-kontakt-form__hint {
  margin-top: 0.25rem;
  margin-bottom: 0;
}

.admin-portrait-main-form__file-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

.admin-portrait-main-form__file-choose {
  flex: 1 1 16rem;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.5rem;
  padding: 0.6rem 0.7rem;
  border: 1px dashed rgba(79, 141, 255, 0.22);
  border-radius: 0.3rem;
  background: rgba(2, 6, 23, 0.4);
}

.admin-portrait-main-form__file-trigger {
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(229, 240, 255, 0.92);
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  margin: 0;
  border: 1px solid rgba(79, 141, 255, 0.45);
  border-radius: 0.25rem;
  background: rgba(79, 141, 255, 0.12);
  box-shadow: none;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.admin-portrait-main-form__file-trigger:hover,
.admin-portrait-main-form__file-input-native:focus + .admin-portrait-main-form__file-trigger,
.admin-portrait-main-form__file-trigger:focus-visible {
  outline: none;
  background: rgba(79, 141, 255, 0.22);
  border-color: rgba(79, 141, 255, 0.7);
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(79, 141, 255, 0.32) inset,
    0 0 22px rgba(79, 141, 255, 0.32);
}

.admin-portrait-main-form__file-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.72rem;
  color: rgba(229, 240, 255, 0.92);
  letter-spacing: 0.04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Platzhalter &lt;Keine Datei gewählt&gt;: Mono + Klammern wie Section-Tags */
.admin-portrait-main-form__file-name--empty {
  color: rgba(186, 198, 220, 0.88);
  letter-spacing: 0.05em;
}

.admin-portrait-main-form__file-name--empty .headline-bracket {
  margin: 0 0.04em;
}

.admin-portrait-main-form__upload-btn {
  flex: 0 0 auto;
  align-self: center;
}

@media (max-width: 639px) {
  .admin-portrait-main-form__file-wrap {
    max-width: 100%;
  }

  .admin-portrait-main-form__file-choose {
    flex: 1 1 100%;
  }

  .admin-portrait-main-form__upload-btn {
    flex: 1 1 100%;
    width: 100%;
    justify-content: center;
  }
}

/* Hochladen in der Dateizeile */
.admin-portrait-main-form__file-row .btn-cta-glow:disabled {
  opacity: 0.32;
  cursor: pointer;
  filter: saturate(0.55);
}

.admin-portrait-main-form__file-row .btn-cta-glow:disabled:focus-visible {
  box-shadow: none;
  outline: none;
}

.admin-portrait-crop {
  margin-bottom: 0;
}

.admin-portrait-crop__hint {
  margin-bottom: 0.35rem;
}

/* Hinweis unter dem Bild: gleicher oberer Abstand wie beim Format-Hinweis zur Bilddatei */
.admin-portrait-crop + .admin-portrait-crop-section__hint {
  margin-top: 0.25rem;
  margin-bottom: 0;
}

/* Portrait-Hinweis: Maus vs. Touch (feines Zeigegerät → Maustext, sonst Touch) */
.admin-portrait-crop-hint__mouse {
  display: none;
}

.admin-portrait-crop-hint__touch {
  display: block;
}

@media (pointer: fine) {
  .admin-portrait-crop-hint__mouse {
    display: block;
  }

  .admin-portrait-crop-hint__touch {
    display: none;
  }
}

.admin-section .contact-console .admin-portrait-crop-section__title {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-on-dark);
  margin: 0 0 0.35rem;
}

.admin-portrait-crop__frame {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: min(100%, 22rem);
  margin: 0;
  overflow: hidden;
  border-radius: 0.35rem;
  border: 1px solid rgba(79, 141, 255, 0.18);
  background: var(--surface-kachel-panel);
  cursor: grab;
  touch-action: none;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35) inset,
    0 10px 28px rgba(0, 0, 0, 0.22);
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.admin-portrait-crop__frame:hover {
  border-color: var(--tile-azur-border-hover);
  box-shadow: var(--tile-azur-glow-hover);
}

.admin-portrait-crop__frame:active {
  cursor: grabbing;
}

.admin-portrait-crop__img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  pointer-events: none;
}

.admin-portrait-crop__placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.admin-portrait-crop__frame .about-media__placeholder-text {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  max-width: calc(100% - 1rem);
  white-space: normal;
  text-align: center;
  line-height: 1.35;
}

.admin-portrait-crop__frame--empty {
  cursor: default;
}

.admin-portrait-crop__frame--empty:hover,
.admin-portrait-crop__frame--empty:active {
  cursor: default;
  border-color: rgba(79, 141, 255, 0.18);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35) inset,
    0 10px 28px rgba(0, 0, 0, 0.22);
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.admin-section__meta {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}

.admin-section .admin-icon-catalog-form {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  flex-wrap: nowrap;
}

.admin-section .admin-icon-catalog-form .admin-form-hint {
  margin: 0;
  font-size: 0.72rem;
}

.admin-kachel-grid > .admin-icon-catalog-form.admin-kachel-item {
  min-height: 7.5rem;
}

.admin-kachel-grid--functions .admin-icon-catalog-form__title {
  width: 100%;
  text-align: center;
}

.admin-icon-catalog-form__title {
  margin: 0 0 0.35rem;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: rgba(226, 232, 240, 0.95);
}

.admin-icon-catalog-form__row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: auto;
  width: 100%;
}

.admin-kachel-grid--functions .admin-icon-catalog-form__row {
  margin-top: 0;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 3.35rem;
}

/* Icon-Katalog: Version + Update — gleiche Höhe wie Schalter, Breite wie zwei Schalter + Lücke (admin-toggle-group) */
.admin-icon-catalog-form__panel.admin-toggle {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(2 * 11.5rem + 1.1rem);
  min-height: 3.35rem;
  flex: 0 1 auto;
  justify-content: center;
}

.admin-kachel-grid--functions .admin-icon-catalog-form__panel.admin-toggle {
  align-self: center;
}

.admin-icon-catalog-form__panel .admin-toggle__row {
  gap: 0.5rem 0.65rem;
  flex-wrap: nowrap;
  width: 100%;
}

.admin-icon-catalog-form__panel .admin-form-hint {
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.35s ease;
}

.admin-icon-catalog-form__panel .admin-form-hint.admin-icon-catalog-form__version--success {
  color: #6ee7b7;
}

.admin-icon-catalog-form__panel .admin-btn.admin-btn--text {
  flex-shrink: 0;
}

/* Funktionen-Kachel: Link wie Button (z. B. Statistik öffnen) — Farbe aus .admin-btn */
.admin-icon-catalog-form__panel a.admin-btn.admin-btn--text,
.admin-icon-catalog-form__panel a.admin-btn.admin-btn--text:visited,
.admin-icon-catalog-form__panel a.admin-btn.admin-btn--text:hover,
.admin-icon-catalog-form__panel a.admin-btn.admin-btn--text:focus-visible {
  text-decoration: none;
}

.admin-icon-catalog-form[data-busy="1"] button[type="submit"][name="action"][value="update_icon_catalog"] svg.lucide {
  display: block;
  transform-origin: 50% 50%;
  animation: admin-icon-catalog-refresh-spin 0.7s linear infinite;
}

@keyframes admin-icon-catalog-refresh-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-icon-catalog-form[data-busy="1"] button[type="submit"][name="action"][value="update_icon_catalog"] svg.lucide {
    animation-duration: 2s;
  }
}

.admin-kachel-grid.admin-kachel-grid--functions {
  max-width: min(64rem, 100%);
}

@media (min-width: 720px) {
  .admin-kachel-grid.admin-kachel-grid--functions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: min(64rem, 100%);
  }

  /* Ungerade Anzahl: letzte Kachel allein in der Zeile — eine Spaltenbreite, zentriert */
  .admin-kachel-grid.admin-kachel-grid--functions > :last-child:nth-child(odd):not(:only-child) {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: calc((100% - 1.1rem) / 2);
  }
}

/* Admin-Schiebeschalter (Template: includes/partials/admin-toggle-panel.php) */
.admin-toggle {
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 11.5rem;
  width: 11.5rem;
  min-height: 3.35rem;
  padding: 0.5rem 0.65rem 0.55rem;
  background: var(--surface-kachel-toggle);
  border: 1px solid rgba(79, 141, 255, 0.2);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.admin-toggle--disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

.admin-toggle--disabled .admin-toggle__switch {
  pointer-events: auto;
}

.admin-section .admin-icon-catalog-form .admin-toggle__title.admin-form-hint,
.admin-icon-catalog-form__panel .admin-form-hint {
  color: #fff;
}

.admin-toggle__title {
  margin: 0;
  width: 100%;
  text-align: center;
  white-space: nowrap;
}

.admin-toggle__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  flex-wrap: nowrap;
}

.admin-toggle__label {
  flex: 0 0 1.65rem;
  width: 1.65rem;
  min-width: 1.65rem;
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  text-align: center;
  color: rgba(226, 232, 240, 0.88);
}

.admin-toggle__switch {
  position: relative;
  box-sizing: border-box;
  flex: 0 0 2.85rem;
  width: 2.85rem;
  min-width: 2.85rem;
  height: 1.5rem;
  min-height: 1.5rem;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(79, 141, 255, 0.45);
  border-radius: 3px;
  background: rgba(10, 24, 56, 0.88);
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.22s ease;
  box-shadow: none;
}

.admin-toggle__switch:hover:not(:disabled),
.admin-toggle__switch:focus-visible:not(:disabled) {
  outline: none;
  border-color: rgba(79, 141, 255, 0.88);
  background: rgba(14, 32, 68, 0.96);
  box-shadow:
    inset 0 0 0 1px rgba(79, 141, 255, 0.2),
    0 0 14px rgba(79, 141, 255, 0.32);
}

.admin-toggle__switch[aria-checked="true"] {
  background: rgba(245, 211, 0, 0.16);
  border-color: rgba(245, 211, 0, 0.55);
  box-shadow: none;
}

.admin-toggle__switch[aria-checked="true"]:hover:not(:disabled),
.admin-toggle__switch[aria-checked="true"]:focus-visible:not(:disabled) {
  border-color: rgba(245, 211, 0, 0.82);
  background: rgba(245, 211, 0, 0.26);
  box-shadow:
    inset 0 0 0 1px rgba(245, 211, 0, 0.22),
    0 0 16px rgba(245, 211, 0, 0.28);
}

.admin-toggle__thumb {
  position: absolute;
  top: 50%;
  left: 0.14rem;
  width: 1.12rem;
  height: 1.12rem;
  border-radius: 2px;
  background: rgba(148, 163, 184, 0.85);
  transform: translate3d(0, -50%, 0);
  transition:
    left 0.2s ease,
    background 0.2s ease,
    filter 0.2s ease;
  box-shadow: none;
  filter: none;
}

.admin-toggle__switch:not([aria-checked="true"]):hover:not(:disabled) .admin-toggle__thumb,
.admin-toggle__switch:not([aria-checked="true"]):focus-visible:not(:disabled) .admin-toggle__thumb {
  background: rgba(210, 222, 240, 0.98);
  filter: brightness(1.08);
}

.admin-toggle__switch[aria-checked="true"] .admin-toggle__thumb {
  left: calc(100% - 1.12rem - 0.14rem);
  background: var(--accent, #f5d300);
  filter: none;
}

.admin-toggle__switch[aria-checked="true"]:hover:not(:disabled) .admin-toggle__thumb,
.admin-toggle__switch[aria-checked="true"]:focus-visible:not(:disabled) .admin-toggle__thumb {
  filter: brightness(1.1);
}

.admin-toggle__switch:disabled {
  cursor: pointer;
}

.admin-toggle-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem 1.1rem;
  width: 100%;
}

.admin-segment-clock-form[data-busy="1"] .admin-toggle__switch,
.admin-toggle-group[data-busy="1"] .admin-toggle__switch {
  opacity: 0.65;
  cursor: pointer;
}

.admin-segment-clock-form__mobile-hint {
  display: none;
  margin: 0.7rem 0 0;
  width: 100%;
  max-width: 22rem;
  text-align: center;
  line-height: 1.45;
  color: rgba(148, 163, 184, 0.88);
}

@media (max-width: 900px) {
  .admin-segment-clock-form .admin-icon-catalog-form__row:has(.admin-toggle-group) {
    flex-direction: column;
    align-items: center;
  }

  .admin-segment-clock-form__mobile-hint {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  /* Standarddaten verwalten: Buttons untereinander auf schmalen Displays */
  .admin-content-baseline-form .admin-icon-catalog-form__panel.admin-toggle {
    max-width: 100%;
  }

  .admin-content-baseline-form .admin-icon-catalog-form__panel .admin-toggle__row {
    flex-direction: column;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.5rem;
  }

  .admin-content-baseline-form .admin-icon-catalog-form__panel .admin-btn.admin-btn--text {
    width: 100%;
    max-width: 100%;
  }
}

.admin-label-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 0.3rem;
}

.admin-label-row__prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 0.7rem;
  color: rgba(229, 240, 255, 0.78);
  background: var(--surface-kachel-panel);
  border: 1px solid rgba(79, 141, 255, 0.32);
  border-right: 0;
  border-radius: 0.25rem 0 0 0.25rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  font-weight: 600;
  user-select: none;
  white-space: nowrap;
}

.admin-label-row__input {
  flex: 1 1 auto;
  min-width: 0;
  border-radius: 0 0.25rem 0.25rem 0 !important;
}

.admin-label-row__input[data-admin-process-label] {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Im Process-Picker soll die Icon-Vorschau dem Ruhezustand der Timeline auf
 * der Website entsprechen (gedämpftes Grau) – die Arbeit-Vorschau bleibt
 * weiterhin blau, da die Kachel-Icons auf der Website blau sind. */
.admin-icon-picker--process .admin-icon-picker__preview {
  color: rgba(186, 198, 220, 0.92);
}

.admin-kachel-grid.admin-kachel-grid--process {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

@media (min-width: 640px) {
  .admin-kachel-grid.admin-kachel-grid--process {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  .admin-kachel-grid.admin-kachel-grid--process {
    grid-template-columns: 1fr;
  }
}

.admin-icon-picker {
  margin: 0.85rem 0 0.2rem;
  padding: 0.6rem 0.7rem;
  border: 1px dashed rgba(79, 141, 255, 0.22);
  border-radius: 0.3rem;
  background: rgba(2, 6, 23, 0.4);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.admin-icon-picker__head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.admin-icon-picker__preview {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--azure);
  border: 1px solid rgba(79, 141, 255, 0.28);
  border-radius: 0.25rem;
  background: var(--surface-kachel-icon);
  box-shadow:
    0 0 20px rgba(79, 141, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.admin-icon-picker__preview svg {
  width: 26px;
  height: 26px;
  display: block;
}

.admin-icon-picker__label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.72rem;
  color: rgba(148, 163, 184, 0.72);
  letter-spacing: 0.05em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-icon-picker__label > span {
  color: rgba(229, 240, 255, 0.92);
}

.admin-icon-picker__library {
  border-top: 1px dashed rgba(79, 141, 255, 0.18);
  padding-top: 0.55rem;
}

.admin-icon-picker__summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(229, 240, 255, 0.92);
  user-select: none;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid rgba(79, 141, 255, 0.45);
  border-radius: 0.25rem;
  background: rgba(79, 141, 255, 0.12);
  box-shadow: none;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.admin-icon-picker__summary:hover,
.admin-icon-picker__summary:focus-visible {
  outline: none;
  background: rgba(79, 141, 255, 0.22);
  border-color: rgba(79, 141, 255, 0.7);
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(79, 141, 255, 0.32) inset,
    0 0 22px rgba(79, 141, 255, 0.32);
}

.admin-icon-picker__summary .admin-form-hint {
  color: rgba(148, 163, 184, 0.85);
  font-weight: 400;
}

.admin-icon-picker__summary::-webkit-details-marker {
  display: none;
}

.admin-icon-picker__summary::before {
  content: "▸";
  font-size: 0.85rem;
  color: rgba(79, 141, 255, 0.85);
  transition: transform 0.15s ease;
  display: inline-block;
}

.admin-icon-picker__library[open] .admin-icon-picker__summary {
  background: rgba(79, 141, 255, 0.18);
  border-color: rgba(79, 141, 255, 0.6);
}

.admin-icon-picker__library[open] .admin-icon-picker__summary::before {
  transform: rotate(90deg);
}

.admin-icon-picker__toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.55rem;
}

.admin-icon-picker__search {
  flex: 1 1 auto;
  margin: 0;
}

.admin-icon-picker__search-input {
  width: 100%;
  font-size: 0.82rem;
  padding: 0.35rem 0.55rem;
}

.admin-icon-picker__count {
  flex: 0 0 auto;
  font-size: 0.72rem;
  color: rgba(148, 163, 184, 0.85);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.admin-icon-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 0.32rem;
  margin-top: 0.55rem;
  padding: 0.4rem;
  border: 1px solid rgba(79, 141, 255, 0.12);
  border-radius: 0.25rem;
  background: var(--surface-kachel-muted);
  max-height: 320px;
  overflow-y: auto;
}

.admin-icon-picker__item {
  background: transparent;
  border: 1px solid rgba(79, 141, 255, 0.12);
  border-radius: 0.2rem;
  padding: 0.3rem;
  color: rgba(229, 240, 255, 0.6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.admin-icon-picker__item[hidden] {
  display: none;
}

.admin-icon-picker__item.admin-icon-picker__item--filtered-out {
  display: none !important;
}

.admin-icon-picker__item:hover,
.admin-icon-picker__item:focus-visible {
  outline: none;
  background: rgba(79, 141, 255, 0.08);
  border-color: rgba(79, 141, 255, 0.45);
  color: rgba(229, 240, 255, 0.95);
}

.admin-icon-picker__item.is-active {
  background: rgba(79, 141, 255, 0.16);
  border-color: rgba(79, 141, 255, 0.7);
  color: var(--azure);
  box-shadow:
    0 0 0 1px rgba(79, 141, 255, 0.45) inset,
    0 0 14px rgba(79, 141, 255, 0.28);
}

.admin-icon-picker__item svg {
  width: 100%;
  height: 100%;
  max-width: 22px;
  max-height: 22px;
  display: block;
}

.admin-kontakt-form__actions {
  margin-top: 0.5rem;
}

.admin-kontakt-console {
  margin-top: 0.25rem;
}

.admin-kontakt-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.1rem;
  align-items: start;
  width: 100%;
  margin-top: 0.25rem;
}

.admin-kontakt-split > .admin-kontakt-console {
  margin-top: 0;
}

@media (max-width: 960px) {
  .admin-kontakt-split {
    grid-template-columns: 1fr;
  }
}

.admin-kontakt-console .contact-form-grid {
  margin-top: 0;
}

/* Kachel-Tiles im dunklen „arbeit-tile"-Look */
.admin-kachel-item {
  position: relative;
  border: 1px solid rgba(79, 141, 255, 0.18);
  border-radius: 0.35rem;
  background: var(--surface-kachel-deep);
  padding: 1.1rem 1.1rem 1rem;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35) inset,
    0 10px 32px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.admin-kachel-item:hover {
  border-color: var(--tile-azur-border-hover);
  box-shadow: var(--tile-azur-glow-hover);
}

.admin-kachel-item.admin-kachel-form--dirty:hover {
  border-color: rgba(245, 211, 0, 0.88);
  box-shadow:
    0 0 0 1px rgba(245, 211, 0, 0.48),
    0 10px 30px rgba(245, 211, 0, 0.28);
}

.admin-kachel-grid {
  margin-top: 1rem;
  display: grid;
  gap: 1.1rem;
  align-items: stretch;
  justify-items: stretch;
}

.admin-kachel-grid > * {
  min-width: 0;
  justify-self: stretch;
  align-self: stretch;
}

.admin-kachel-grid > .admin-kachel-item.admin-kachel-form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
}

.admin-kachel-grid > .admin-kachel-item.admin-kachel-form .admin-toolbar {
  margin-top: auto;
}

.admin-kachel-grid > form.admin-new-kachel-tile.admin-kachel-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  background: var(--surface-kachel-deep);
  border: 1px solid rgba(79, 141, 255, 0.18);
  border-radius: 0.35rem;
  padding: 1.1rem 1.1rem 1rem;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35) inset,
    0 10px 32px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.admin-kachel-grid > form.admin-new-kachel-tile .admin-new-kachel-tile__frame {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  max-width: none;
  align-self: stretch;
  box-sizing: border-box;
}

.admin-section textarea[name="text"] {
  resize: none;
}

@media (min-width: 720px) {
  .admin-kachel-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-kachel-grid.admin-kachel-grid--functions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: min(64rem, 100%);
  }

  .admin-kachel-grid.admin-kachel-grid--functions > :last-child:nth-child(odd):not(:only-child) {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: calc((100% - 1.1rem) / 2);
  }
}

.admin-new-kachel-tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.admin-new-kachel-tile__frame {
  display: flex;
  width: 100%;
  min-height: 10.5rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border-radius: 0.35rem;
  border: 1px dashed rgba(79, 141, 255, 0.45);
  background: var(--surface-kachel-muted);
  color: var(--accent);
  padding: 1.25rem;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 180ms ease, background 180ms ease, box-shadow 220ms ease, color 180ms ease;
}

.admin-new-kachel-tile__frame:hover,
.admin-new-kachel-tile__frame:focus-visible {
  border-color: rgba(245, 211, 0, 0.7);
  background: rgba(245, 211, 0, 0.06);
  color: var(--accent-bright);
  box-shadow:
    inset 0 0 28px rgba(245, 211, 0, 0.12),
    0 0 0 1px rgba(245, 211, 0, 0.32),
    0 0 22px rgba(245, 211, 0, 0.22);
}

.admin-new-kachel-tile__cta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: inherit;
}

.admin-new-kachel-tile__plus {
  font-family: var(--font-mono);
  font-size: 2.1rem;
  line-height: 1;
  font-weight: 700;
  color: inherit;
  margin-bottom: 0.2rem;
}

.admin-subform {
  margin-top: 1rem;
}

.admin-kachel-grid > .admin-subform {
  margin-top: 0;
}

.admin-save {
  justify-self: start;
  font-size: 0.95rem;
  padding: 0.72rem 1rem;
}

/* Icon-Save: exakt gleiches Maß & Vertikalverhalten wie .admin-btn--icon-only */
.admin-save--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 2.35rem;
  height: 2.35rem;
  min-width: 2.35rem;
  min-height: 2.35rem;
  margin: 0;
  padding: 0.4rem;
  font-size: 1rem;
  line-height: 1;
  background: #059669;
  border-color: #34d399;
  color: #ecfdf5;
}

/* Innerhalb der Admin-Toolbar dürfen Buttons kein Margin haben (überschreibt .arbeit-section .btn-cta-glow) */
.admin-toolbar .btn-cta-glow,
.admin-toolbar .admin-btn {
  margin: 0;
}

/* Disabled-Optik: Toolbar + Portrait/Kontakt-Aktionszeile (überschreibt .contact-form-actions .btn-cta-glow:disabled) */
.admin-toolbar button:disabled,
.admin-kontakt-form__actions .btn-cta-glow:disabled,
.admin-kontakt-form__actions .admin-btn:disabled {
  opacity: 0.32;
  cursor: pointer;
  filter: saturate(0.55);
}

.admin-toolbar button:disabled:focus-visible,
.admin-kontakt-form__actions button:disabled:focus-visible {
  box-shadow: none;
  outline: none;
}

.admin-kontakt-form__actions .admin-save--text,
.admin-kontakt-form__actions .admin-btn.admin-btn--text {
  flex-shrink: 0;
}

.admin-save--icon:hover:not(:disabled),
.admin-save--icon:focus-visible:not(:disabled) {
  background: #10b981;
  border-color: #6ee7b7;
}

.admin-save--icon svg {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
}

/* Text-Variante: gleiches Farbschema wie .admin-save--icon, aber mit Icon + Label
 * nebeneinander. Wird in Portrait-/Kontakt-Formularen genutzt. */
.admin-save--text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-sizing: border-box;
  height: 2.35rem;
  margin: 0;
  padding: 0 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  background: #059669;
  border: 1px solid #34d399;
  border-radius: var(--btn-radius);
  color: #ecfdf5;
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.22s ease;
}

.admin-save--text:hover:not(:disabled),
.admin-save--text:focus-visible:not(:disabled) {
  background: #10b981;
  border-color: #6ee7b7;
}

.admin-save--text svg {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
}

/* Spezifität bewusst .admin-btn.admin-btn--text, weil .admin-btn (kommt später
 * im Stylesheet) ein `font: inherit` setzt und sonst meine longhand-Werte
 * überschreibt. So matched die Schrift exakt mit .admin-save--text. */
.admin-btn.admin-btn--text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-sizing: border-box;
  height: 2.35rem;
  width: auto;
  margin: 0;
  padding: 0 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
}

.admin-btn.admin-btn--text svg {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
}

.admin-toolbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.45rem;
}

.admin-toolbar__side {
  display: flex;
  min-height: 2.35rem;
  align-items: center;
}

.admin-toolbar__side--left {
  justify-content: flex-start;
}

.admin-toolbar__side--right {
  justify-content: flex-end;
}

.admin-toolbar__center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.admin-btn {
  border: 1px solid rgba(79, 141, 255, 0.32);
  background: var(--surface-kachel-deep);
  color: rgba(229, 240, 255, 0.92);
  border-radius: var(--btn-radius);
  padding: 0.5rem 0.7rem;
  font: inherit;
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.15s ease,
    box-shadow 0.22s ease;
}

.admin-btn--icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 2.35rem;
  height: 2.35rem;
  min-width: 2.35rem;
  min-height: 2.35rem;
  padding: 0.4rem;
  line-height: 1;
}

.admin-btn--icon-only svg {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
}

.admin-btn--muted:hover:not(:disabled),
.admin-btn--muted:focus-visible:not(:disabled) {
  background: rgba(79, 141, 255, 0.12);
  border-color: rgba(79, 141, 255, 0.55);
  color: rgba(248, 250, 252, 0.98);
  box-shadow:
    inset 0 0 22px rgba(79, 141, 255, 0.12),
    0 0 0 1px rgba(79, 141, 255, 0.28);
}

.admin-btn--danger {
  border-color: rgba(248, 113, 113, 0.5);
  background: rgba(127, 29, 29, 0.42);
  color: rgba(254, 226, 226, 0.95);
}

.admin-btn--danger:hover:not(:disabled),
.admin-btn--danger:focus-visible:not(:disabled) {
  background: rgba(220, 38, 38, 0.55);
  border-color: rgba(252, 165, 165, 0.85);
  box-shadow:
    inset 0 0 24px rgba(239, 68, 68, 0.18),
    0 0 0 1px rgba(239, 68, 68, 0.32);
}

.admin-btn--cancel {
  border-color: rgba(245, 211, 0, 0.55);
  background: rgba(120, 90, 0, 0.32);
  color: rgba(254, 240, 138, 0.95);
}

.admin-btn--cancel:hover:not(:disabled),
.admin-btn--cancel:focus-visible:not(:disabled) {
  background: rgba(202, 138, 4, 0.55);
  border-color: rgba(253, 224, 71, 0.9);
  box-shadow:
    inset 0 0 24px rgba(245, 211, 0, 0.2),
    0 0 0 1px rgba(245, 211, 0, 0.35);
}

.admin-btn--move {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 2.35rem;
  height: 2.35rem;
  min-width: 2.35rem;
  min-height: 2.35rem;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.admin-btn--move svg {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
}

.admin-section__head-main {
  flex: 1 1 auto;
  min-width: 0;
}

.admin-section-order-form {
  flex: 0 0 auto;
  margin: 0;
  align-self: flex-start;
}

.admin-section-order {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.admin-section-order .admin-btn--icon-only {
  padding: 0;
}

.admin-section-order .admin-btn:disabled {
  opacity: 0.32;
  cursor: pointer;
  filter: saturate(0.45);
  box-shadow: none;
}

.admin-section-order .admin-btn:disabled:hover,
.admin-section-order .admin-btn:disabled:focus-visible {
  background: var(--surface-kachel-deep);
  border-color: rgba(79, 141, 255, 0.32);
  box-shadow: none;
}

/* Verstecken von Elementen (eine Klasse für gesamtes Projekt inkl. Admin-Modal) */
.is-hidden {
  display: none !important;
}

.admin-toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  max-width: 26rem;
  border-radius: 0.8rem;
  padding: 0.7rem 0.85rem;
  z-index: 100;
}

.admin-toast button {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.2rem;
  cursor: pointer;
}

.admin-toast--success {
  background: #14532d;
  border: 1px solid #22c55e;
  color: #dcfce7;
}

.admin-toast--error {
  background: #7f1d1d;
  border: 1px solid #ef4444;
  color: #fee2e2;
}

/* Abgebrochen / verworfen — technisch ohne Fehler, aber keine „Erfolgs“-Aktion */
.admin-toast--warning {
  background: #7c2d12;
  border: 1px solid #fb923c;
  color: #ffedd5;
}

.admin-confirm-open {
  overflow: hidden;
}

.admin-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
}

.admin-confirm-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.62);
}

.admin-confirm-modal__panel {
  position: relative;
  width: min(92vw, 30rem);
  border-radius: 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: #0f172a;
  color: #e2e8f0;
  padding: 1rem 1rem 0.95rem;
  box-shadow: 0 22px 60px rgba(2, 6, 23, 0.55);
}

.admin-confirm-modal__panel h3 {
  margin: 0 0 0.6rem;
  font-size: 1rem;
}

.admin-confirm-modal__panel p {
  margin: 0;
  line-height: 1.45;
  color: #cbd5e1;
}

.admin-confirm-modal__actions {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

@media (max-width: 960px) {
  .admin-menu {
    justify-content: flex-start;
  }
}

/* Admin: keine zusätzlichen Radial-Dekor-Flächen in Konsolen/Portrait-Platzhalter */
body.admin-page-view .showroom-console__frame-fallback,
body.admin-page-view .showroom-console__embed-checking,
body.admin-page-view .showroom-console__embed-blocked,
body.admin-page-view .showroom-console__embed-unverified {
  background: var(--surface-console-stage);
}

body.admin-page-view .about-media__placeholder {
  background: linear-gradient(145deg, rgba(6, 10, 18, 0.94) 0%, rgba(10, 15, 26, 0.9) 100%);
}

body.admin-page-view .about-media__placeholder::before {
  box-shadow: inset 0 0 14px rgba(79, 141, 255, 0.1);
  border-color: rgba(148, 163, 184, 0.22);
}

/* Admin: Scrollbars an dunkles UI anpassen (Textareas, Grids, Seiten-Scroll) */
body.admin-page-view,
body.admin-auth-page {
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 116, 139, 0.75) rgba(15, 23, 42, 0.65);
}

body.admin-page-view *::-webkit-scrollbar,
body.admin-auth-page *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body.admin-page-view *::-webkit-scrollbar-thumb,
body.admin-auth-page *::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.72);
  border-radius: 4px;
  border: 2px solid rgba(15, 23, 42, 0.55);
  background-clip: padding-box;
}

body.admin-page-view *::-webkit-scrollbar-thumb:hover,
body.admin-auth-page *::-webkit-scrollbar-thumb:hover {
  background: rgba(129, 140, 165, 0.88);
  border-color: rgba(15, 23, 42, 0.45);
}

body.admin-page-view *::-webkit-scrollbar-track,
body.admin-auth-page *::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.55);
  border-radius: 4px;
}

body.admin-page-view *::-webkit-scrollbar-corner,
body.admin-auth-page *::-webkit-scrollbar-corner {
  background: rgba(15, 23, 42, 0.55);
}

body.admin-page-view *::-webkit-scrollbar-button,
body.admin-auth-page *::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

.admin-page-view .page {
  --header-hang-scale: 0.8;
  --site-header-bar-height: calc(3.2rem + 1px);
  /* Hang (Buttons + Uhr) hängt absolut unter der Leiste — mit einrechnen, sonst Body-Streifen */
  --admin-header-hang-height: max(
    calc((0.52rem * 2 + 0.58rem * 2 + 0.76rem) * var(--header-hang-scale)),
    calc((0.62rem + 0.5rem + 2.34rem) * var(--header-hang-scale))
  );
  --page-padding-top: calc(var(--site-header-bar-height) + var(--admin-header-hang-height));
  padding-top: var(--page-padding-top);
}

@media (max-width: 900px) {
  .admin-page-view .page {
    --admin-header-hang-height: calc((0.52rem * 2 + 0.58rem * 2 + 0.76rem) * var(--header-hang-scale));
  }
}

/* Erste Admin-Sektion (#admin-page-sections): kein Extra-Abstand, Hintergrund unter Hang-Leiste */
body.admin-page-view .admin-page-sections > .main-segment:first-child {
  margin-top: 0;
}

body.admin-page-view .admin-page-sections > .content-light.admin-segment:first-child {
  overflow: visible;
}

body.admin-page-view .admin-page-sections > .showroom-section.admin-segment:first-child {
  margin-top: calc(-1 * var(--admin-header-hang-height));
  padding-top: calc(clamp(2.5rem, 5vw, 3.5rem) + var(--admin-header-hang-height));
  overflow: visible;
}

.admin-page-view .site-header__inner {
  min-height: 3.2rem;
}

body.admin-page-view main .contact-console {
  margin-left: 0 !important;
  margin-right: auto !important;
}

body.admin-page-view main #kontakt .admin-kontakt-split .contact-console.admin-kontakt-console {
  max-width: none;
  width: 100%;
  box-sizing: border-box;
}

body.admin-page-view main #portrait .contact-console.admin-kontakt-console {
  max-width: 80%;
  width: 100%;
  box-sizing: border-box;
}

body.admin-page-view main .content-light--arbeit .arbeit-section,
body.admin-page-view main .content-light--about .about-section,
body.admin-page-view main .content-light--about .contact-section,
body.admin-page-view main .content-light--kontakt .contact-section,
body.admin-page-view main .content-light--funktionen .arbeit-section,
body.admin-page-view main .content-light--prozess-cta .arbeit-section {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

body.admin-page-view .arbeit-section__head.admin-section__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  text-align: left;
  width: 100%;
}

body.admin-page-view #arbeit-sortable > form#new-arbeit-form.admin-new-kachel-tile.admin-kachel-item {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

body.admin-page-view #arbeit-sortable > form#new-arbeit-form .admin-new-kachel-tile__frame {
  width: 100%;
  max-width: none;
  flex: 1 1 0;
  box-sizing: border-box;
}

body.admin-page-view .contact-section__header.admin-section__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  text-align: left;
  width: 100%;
}

/* Abschnitts-Reihenfolge: Titel links, Hoch/Runter rechts (überschreibt column-Layout oben) */
body.admin-page-view .admin-section__head.admin-section__head--with-order,
body.admin-page-view .arbeit-section__head.admin-section__head--with-order,
body.admin-page-view .contact-section__header.admin-section__head--with-order {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}

body.admin-page-view .admin-content {
  text-align: left;
}

body.admin-page-view .section-headline-stack {
  text-align: left;
}

.admin-page-view .site-logo {
  position: absolute;
  left: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 0;
  transition: none;
}

.admin-page-view .site-logo {
  text-transform: none;
  letter-spacing: 0;
}

.admin-page-view .site-logo__typing {
  font-size: 1.152rem;
  letter-spacing: 0.045em;
  text-transform: lowercase;
  transition: none;
}

.admin-page-view .site-logo__typing--admin-static {
  min-height: 0;
}

.admin-page-view .site-logo__img {
  display: none;
}

/* Admin-Logo dauerhaft in Header-Größe (wie Website nach Scroll), auch bei offenem Mobilmenü */
@media (max-width: 900px) {
  body.admin-page-view .site-logo {
    left: 0.9rem;
  }

  body.admin-page-view .site-logo .site-logo__typing {
    font-size: 1.152rem;
    max-width: calc(100vw - 8rem);
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.admin-header-actions {
  margin-left: 0;
}

.admin-header-actions .admin-header-actions__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.76rem;
  line-height: 1;
  padding: 0.58rem 0.8rem;
  vertical-align: middle;
}

.admin-header-actions .admin-header-actions__link.btn-ghost::after,
.admin-header-actions .admin-header-actions__link.btn-cta-glow::after {
  content: none;
  display: none;
}

.admin-header-actions__logout {
  animation: none;
}

.admin-action-zone {
  border-top: 1px dashed rgba(79, 141, 255, 0.4);
  margin-top: 0.4rem;
  padding-top: 1.1rem;
}

/* —— Rechtliche Seiten (Impressum / Datenschutz, noindex) —— */
body.legal-page-view {
  --scroll-restore-bg: var(--bg-deep, #020617);
  color: var(--text-on-dark);
}

body.legal-page-view {
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 116, 139, 0.75) rgba(15, 23, 42, 0.65);
}

body.legal-page-view *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body.legal-page-view *::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.72);
  border-radius: 4px;
  border: 2px solid rgba(15, 23, 42, 0.55);
  background-clip: padding-box;
}

body.legal-page-view *::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.55);
}

/* Kurzer Inhalt: Footer am unteren Viewport-Rand, kein heller Streifen darunter */
body.legal-page-view .page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

body.legal-page-view .legal-page-main {
  flex: 1 1 auto;
  padding: clamp(0.25rem, 1vw, 0.5rem) 0 clamp(2.5rem, 8vw, 4rem);
}

body.legal-page-view .page-content-chrome--legal {
  max-width: 76rem;
  margin: 0 auto;
}

body.legal-page-view .legal-segment {
  position: relative;
  isolation: isolate;
  padding: clamp(0.35rem, 1.2vw, 0.65rem) 1.25rem 1rem;
}

body.legal-page-view .legal-segment.main-segment {
  border-top: none;
  box-shadow: none;
}

body.legal-page-view .section-tech-deco--legal {
  display: none;
}

body.legal-page-view .legal-section__header {
  margin-bottom: 1.25rem;
  text-align: center;
}

body.legal-page-view .legal-section__updated {
  margin-top: 0.65rem;
  color: var(--text-section-sub-mono);
}

body.legal-page-view .section-headline {
  color: var(--text-section-headline);
}

body.legal-page-view .section-headline .headline-bracket {
  color: var(--accent);
}

body.legal-page-view .legal-console-wrap {
  max-width: 46rem;
  margin: 0 auto;
}

body.legal-page-view .legal-console.contact-console {
  margin-left: auto;
  margin-right: auto;
}

body.legal-page-view .legal-prose {
  color: var(--text-section-intro);
  font-size: 0.95rem;
  line-height: 1.65;
}

body.legal-page-view .legal-prose__heading {
  margin: 1.35rem 0 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

body.legal-page-view .legal-prose__heading:first-child {
  margin-top: 0;
}

body.legal-page-view .legal-prose p {
  margin: 0 0 0.9rem;
}

body.legal-page-view .legal-prose a {
  color: var(--azure);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

body.legal-page-view .legal-prose a:hover,
body.legal-page-view .legal-prose a:focus-visible {
  color: var(--accent);
}

body.legal-page-view .legal-prose__crosslink {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
  font-size: 0.88rem;
  color: var(--text-muted);
}

body.legal-page-view .site-footer.code-surface {
  margin-top: 1.5rem;
}