/* mpmedia-web.de: das eine Stylesheet der Seite. Look wie die Fernwartung von MP Media: dunkel, flüssiges Glas, weiche
   graue Lichter, Schwarz, Logo-Grau #706d72 und helles Grau #c6c7c8, keine bunte Akzentfarbe. Grün nur, wo es
   "läuft" heißt. Farbwerte stehen nur in :root. Schrift: Outfit für Titel, Knöpfe und Zahlen, Abel für Text,
   JetBrains Mono nur im Terminal. Reihenfolge: Grundlagen, Rahmen (Kopf, Menü, Fuß), Bausteine, Startseite,
   Unterseiten, Terminal und Fenster, Handy, ohne Bewegung. */

@font-face { font-family: "Abel"; src: url("../schrift/abel-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../schrift/outfit-variabel.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../schrift/jetbrains-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

@view-transition { navigation: auto; }

:root {
  color-scheme: dark;

  --marke-grau: #706d72;
  --marke-hell: #c6c7c8;
  --grund: #0b0c0e;
  --grund-2: #121317;

  --text: #f6f6f8;
  --text-2: #dcdce0;
  --text-leise: #9d9ba3;
  --text-ganz-leise: #8a8890;

  --glas: rgb(26 27 32 / 46%);
  --glas-stark: rgb(30 31 36 / 88%);
  --glas-hell: rgb(255 255 255 / 6%);
  --lichtrand: linear-gradient(140deg, rgb(255 255 255 / 42%), rgb(255 255 255 / 9%) 28%, rgb(255 255 255 / 4%) 62%, rgb(255 255 255 / 22%));
  --streif: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 55%) 48%, transparent 66%);
  --linie: rgb(255 255 255 / 10%);
  --linie-stark: rgb(255 255 255 / 22%);
  --flaeche: rgb(255 255 255 / 7%);
  --flaeche-stark: rgb(255 255 255 / 12%);
  --gut: #7cc79a;
  --rot: #e8847a;

  --verlauf-titel: linear-gradient(180deg, #ffffff 20%, #b9b8bf 95%);
  --verlauf-grau: linear-gradient(100deg, #8d8b93 0%, #d9d9de 40%, #706d72 70%, #c6c7c8 100%);
  --verlauf-knopf: linear-gradient(135deg, #f1f1f3, #b4b3b9);

  --schatten-karte: 0 1px 2px rgb(0 0 0 / 35%), 0 24px 56px -24px rgb(0 0 0 / 70%);
  --schatten-gross: 0 2px 6px rgb(0 0 0 / 40%), 0 40px 100px -30px rgb(0 0 0 / 85%);

  --schrift-text: "Abel", system-ui, sans-serif;
  --schrift-titel: "Outfit", "Abel", system-ui, sans-serif;
  --schrift-mono: "JetBrains Mono", ui-monospace, monospace;

  --rand: clamp(1rem, 4vw, 3.5rem);
  --breite: 1440px;
  --rund-s: 12px;
  --rund: 18px;
  --rund-l: 28px;
  --rund-xl: 36px;
  --pille: 999px;

  --kurve: cubic-bezier(0.2, 0.8, 0.2, 1);
  --feder: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dauer: 260ms;
}

/* ---------- Grundlagen ---------- */

*, ::before, ::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  overflow-x: clip;
  font: 400 1.0625rem / 1.6 var(--schrift-text);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 7.5rem;
  background: var(--grund);
}

body {
  margin: 0;
  min-height: 100dvh;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;

  /* Ohne WebGL wandern weiche Lichter wie bei der Fernwartung; mit WebGL malt der Himmel (.himmel) */
  &::before {
    content: "";
    position: fixed;
    inset: -20%;
    z-index: -2;
    pointer-events: none;
    background:
      radial-gradient(32rem 32rem at 22% 28%, rgb(112 109 114 / 34%), transparent 70%),
      radial-gradient(38rem 38rem at 78% 22%, rgb(198 199 200 / 14%), transparent 70%),
      radial-gradient(42rem 42rem at 58% 86%, rgb(112 109 114 / 26%), transparent 70%);
    filter: blur(40px);
    animation: lichter 46s ease-in-out infinite alternate;
  }
  &.himmel-an::before { display: none; }
}
@keyframes lichter {
  50% { transform: translate(-5%, 4%) rotate(9deg) scale(1.08); }
  100% { transform: translate(6%, -4%) rotate(-7deg) scale(1.03); }
}

h1, h2, h3 { margin: 0; font-family: var(--schrift-titel); line-height: 1.05; text-wrap: balance; overflow-wrap: anywhere; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; height: auto; }
::selection { background: var(--marke-hell); color: #111214; }
:focus-visible { outline: 2px solid var(--marke-hell); outline-offset: 3px; border-radius: 6px; }

/* Schrift mit Verlauf: Der Verlauf liegt im Hintergrund und wird auf die Buchstaben beschnitten. Der Innenabstand
   macht die Fläche größer als den Textkasten, sonst fehlen Unterlängen (g) und der Rand der letzten Letter; der
   Außenabstand gleicht ihn wieder aus. */
.abschnitt-kopf h2, .zahl-block strong, .schluss-titel, .seite-kopf h1, .held-titel .zeile {
  padding: 0.1em 0.14em 0.22em 0;
  margin: -0.1em -0.14em -0.22em 0;
  background: var(--verlauf-titel);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.icon { width: 1.2em; height: 1.2em; flex: none; display: inline-block; vertical-align: -0.22em; }
.leise { color: var(--text-leise); }
kbd {
  font: 500 0.72rem / 1 var(--schrift-titel);
  padding: 0.25rem 0.42rem;
  color: var(--text-2);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-bottom-width: 2px;
  border-radius: 6px;
}

.sprung {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  color: #111214;
  background: var(--marke-hell);
  border-radius: var(--pille);
  transform: translateY(-200%);
  &:focus { transform: none; }
}

/* Der Himmel: WebGL-Fläche hinter allem (js/himmel.js) */
.himmel {
  position: fixed;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
  .himmel-an & { opacity: 1; }
}

/* Das neuronale Netz oben auf der Startseite (js/netz.js), über dem Rauch und hinter dem Inhalt */
.netz {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Filmkorn über allem, ganz leicht */
.korn {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
  animation: korn 0.9s steps(4) infinite;
}
@keyframes korn {
  25% { background-position: -37px 23px; }
  50% { background-position: 29px -41px; }
  75% { background-position: -13px -27px; }
}

/* Fortschritt beim Scrollen: feine Linie ganz oben */
.fortschritt {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: 2px;
  background: var(--verlauf-grau);
  transform-origin: 0 50%;
  transform: scaleX(0);
  animation: fortschritt linear both;
  animation-timeline: scroll(root);
}
@keyframes fortschritt { to { transform: scaleX(1); } }

/* Eigener Zeiger: Punkt und Ring, nur mit Maus (js/bewegung.js schaltet ihn ein) */
.zeiger { display: none; }
.zeiger-an {
  cursor: none;
  & a, & button, & [data-werkzeug], & label, & summary { cursor: none; }
  & input, & textarea, & select { cursor: text; }
  & .zeiger { display: block; }
}
.zeiger-punkt, .zeiger-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 95;
  pointer-events: none;
  border-radius: 50%;
  translate: var(--zx, -100px) var(--zy, -100px);
}
.zeiger-punkt { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; }
.zeiger-ring {
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border: 1px solid rgb(255 255 255 / 55%);
  translate: var(--rx, -100px) var(--ry, -100px);
  transition: width 300ms var(--kurve), height 300ms var(--kurve), margin 300ms var(--kurve), background 300ms, border-color 300ms;
  .zeiger-ueber & { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgb(255 255 255 / 8%); border-color: rgb(255 255 255 / 30%); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
  .zeiger-druck & { width: 28px; height: 28px; margin: -14px 0 0 -14px; }
}

/* ---------- Glas ---------- */

.glas {
  position: relative;
  isolation: isolate;
  background: linear-gradient(155deg, rgb(255 255 255 / 11%), rgb(255 255 255 / 2%) 40%, rgb(255 255 255 / 1%) 62%, rgb(255 255 255 / 5%)), var(--glas);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 16%), inset 0 0 28px rgb(255 255 255 / 3%), var(--schatten-karte);
  -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(1.04);
  backdrop-filter: blur(30px) saturate(180%) brightness(1.04);

  /* Lichtrand: ein Pixel Verlauf als Kante */
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: 1px;
    border-radius: inherit;
    background: var(--lichtrand);
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
  }
  /* Schein, der der Maus folgt (js/bewegung.js setzt --zeiger-x und --zeiger-y) */
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(28rem circle at var(--zeiger-x, 20%) var(--zeiger-y, -20%), rgb(255 255 255 / 9%), transparent 60%);
    pointer-events: none;
  }
}

/* ---------- Knöpfe ---------- */

.knopf {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0.65rem 1.25rem;
  font: 500 0.95rem / 1 var(--schrift-titel);
  letter-spacing: 0.01em;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--pille);
  overflow: hidden;
  cursor: pointer;
  transition: background var(--dauer), border-color var(--dauer), transform 400ms var(--feder), box-shadow var(--dauer);
  translate: var(--mx, 0) var(--my, 0);

  &:hover { background: var(--flaeche-stark); border-color: var(--linie-stark); }
  &:active { transform: scale(0.97); }
  & .icon { transition: transform 400ms var(--feder); }
  &:hover .icon { transform: translateX(3px); }

  &.haupt {
    color: #111214;
    background: var(--verlauf-knopf);
    border-color: transparent;
    box-shadow: 0 10px 30px -10px rgb(255 255 255 / 35%), inset 0 1px 0 rgb(255 255 255 / 70%);
    /* Lichtstreif fährt beim Darüberfahren durch */
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--streif);
      translate: -120% 0;
      transition: translate 700ms var(--kurve);
    }
    &:hover::after { translate: 120% 0; }
    &:hover { box-shadow: 0 16px 44px -10px rgb(255 255 255 / 45%), inset 0 1px 0 rgb(255 255 255 / 70%); }
  }
  &.leise { background: transparent; border-color: var(--linie); }
  &.gross { min-height: 3.5rem; padding: 0.9rem 1.7rem; font-size: 1.05rem; }
  &.riesig { min-height: 4.5rem; padding: 1.1rem 2.4rem; font-size: clamp(1.1rem, 1.6vw, 1.35rem); }
}
.magnet { transition: translate 500ms var(--feder), background var(--dauer), border-color var(--dauer), box-shadow var(--dauer); }

.zeichen {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--text);
  background: linear-gradient(145deg, rgb(255 255 255 / 14%), rgb(255 255 255 / 4%));
  border: 1px solid var(--linie);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%);
  & .icon { width: 1.3rem; height: 1.3rem; }
  &.gross { width: 3.5rem; height: 3.5rem; border-radius: 18px; & .icon { width: 1.6rem; height: 1.6rem; } }
}

.punkt {
  display: inline-block;
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--gut);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgb(124 199 154 / 60%);
  animation: puls 2.2s ease-out infinite;
  &.aus { background: var(--marke-grau); box-shadow: none; animation: none; }
}
@keyframes puls { 70% { box-shadow: 0 0 0 0.55rem rgb(124 199 154 / 0%); } 100% { box-shadow: 0 0 0 0 rgb(124 199 154 / 0%); } }

.augenbraue {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  width: fit-content;
  padding: 0.4rem 0.9rem;
  font: 600 0.72rem / 1 var(--schrift-titel);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-2);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--pille);
}

.prompt { font-family: var(--schrift-mono); color: var(--gut); }

/* Auftauchen beim Scrollen (js/bewegung.js setzt .da) */
@media (scripting: enabled) {
  .auftauchen {
    opacity: 0;
    translate: 0 2.5rem;
    filter: blur(8px);
    transition: opacity 900ms var(--kurve), translate 900ms var(--kurve), filter 900ms var(--kurve);
    transition-delay: var(--verzug, 0ms);
    &.da { opacity: 1; translate: 0 0; filter: none; }
  }
}

/* ---------- Rahmen: Kopf ---------- */

.kopf {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  padding: 1rem var(--rand) 0;
  pointer-events: none;
}
.kopf-leiste {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-width: var(--breite);
  margin-inline: auto;
  padding: 0.55rem 0.6rem 0.55rem 1.6rem;
  border-radius: var(--pille);
  background-color: rgb(16 17 20 / 55%);
  pointer-events: auto;
  view-transition-name: kopf;
  transition: padding 400ms var(--kurve), max-width 600ms var(--kurve), background 400ms;
  .kopf.klein & { max-width: 1080px; padding-block: 0.4rem; }
}
.kopf-logo {
  display: block;
  margin-right: auto;
  & img { display: block; width: 13rem; height: auto; transition: width 400ms var(--kurve); }
  .kopf.klein & img { width: 10.5rem; }
}
.kopf-nav {
  display: flex;
  gap: 0.25rem;
  & a {
    position: relative;
    padding: 0.55rem 0.9rem;
    font: 500 0.92rem / 1 var(--schrift-titel);
    color: var(--text-2);
    border-radius: var(--pille);
    transition: color var(--dauer), background var(--dauer);
    &:hover { color: var(--text); background: var(--flaeche); }
    &[aria-current="page"] { color: #111214; background: var(--verlauf-knopf); }
  }
}
.kopf-terminal {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.6rem;
  padding: 0 0.8rem;
  color: var(--text-2);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--pille);
  cursor: pointer;
  transition: background var(--dauer), color var(--dauer);
  &:hover { color: var(--text); background: var(--flaeche-stark); }
}
.kopf-barriere {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  color: var(--text-2);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--dauer), color var(--dauer);
  &:hover { color: var(--text); background: var(--flaeche-stark); }
  & .icon { width: 1.3rem; height: 1.3rem; }
}

/* Feld Barrierefreiheit (Popover unter dem Kopf, js/einstellungen.js) */
.barriere.glas {
  position: fixed;
  inset: 7.5rem var(--rand) auto auto;
  width: min(25rem, 100vw - 2rem);
  margin: 0;
  padding: 1.5rem;
  color: var(--text);
  border: 0;
  border-radius: var(--rund-l);
  background-color: var(--glas-stark);
  &:popover-open { display: grid; gap: 0.75rem; animation: fenster-auf 350ms var(--feder); }
  & h2 { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; }
  & > p { font-size: 0.95rem; color: var(--text-leise); margin-bottom: 0.25rem; }
}
.schalter {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  padding: 0.8rem;
  text-align: left;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  cursor: pointer;
  transition: background var(--dauer), border-color var(--dauer);
  &:hover { background: var(--flaeche-stark); }
  & strong { display: block; font: 600 1rem / 1.3 var(--schrift-titel); }
  & small { display: block; font-size: 0.88rem; color: var(--text-leise); }
  &[aria-pressed="true"] { border-color: var(--linie-stark); }
}
.schalter-knopf {
  position: relative;
  width: 2.8rem;
  height: 1.6rem;
  background: var(--flaeche-stark);
  border-radius: var(--pille);
  transition: background var(--dauer);
  &::after { content: ""; position: absolute; top: 0.2rem; left: 0.2rem; width: 1.2rem; height: 1.2rem; background: var(--text-leise); border-radius: 50%; transition: translate 300ms var(--feder), background var(--dauer); }
  [aria-pressed="true"] > & { background: var(--gut); }
  [aria-pressed="true"] > &::after { translate: 1.2rem 0; background: #fff; }
}

.kopf-menue {
  display: none;
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 50%;
  cursor: pointer;
  & span {
    position: absolute;
    left: 50%;
    width: 1.1rem;
    height: 1.5px;
    margin-left: -0.55rem;
    background: var(--text);
    border-radius: 2px;
    transition: transform 400ms var(--feder), top 400ms var(--kurve);
    &:first-child { top: 1.1rem; }
    &:last-child { top: 1.55rem; }
  }
  &[aria-expanded="true"] span:first-child { top: 1.33rem; transform: rotate(45deg); }
  &[aria-expanded="true"] span:last-child { top: 1.33rem; transform: rotate(-45deg); }
}

/* Menü am Handy: ganzer Bildschirm aus Glas */
.menue {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: grid;
  align-content: space-between;
  padding: 7rem var(--rand) 2rem;
  background: rgb(11 12 14 / 72%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  animation: menue-auf 500ms var(--kurve);
  & nav { display: grid; }
}
@keyframes menue-auf { from { opacity: 0; } }
.menue-punkt {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.6rem 0;
  font: 700 clamp(2.2rem, 10vw, 3.5rem) / 1.1 var(--schrift-titel);
  letter-spacing: -0.03em;
  border-bottom: 1px solid var(--linie);
  animation: hereinkommen 600ms var(--kurve) both;
  &:nth-child(2) { animation-delay: 60ms; }
  &:nth-child(3) { animation-delay: 120ms; }
  &:nth-child(4) { animation-delay: 180ms; }
  &:nth-child(5) { animation-delay: 240ms; }
}
.menue-zahl { font: 500 0.8rem / 1 var(--schrift-mono); color: var(--text-leise); }
.menue-fuss {
  display: grid;
  gap: 0.75rem;
  color: var(--text-2);
  & a { display: flex; align-items: center; gap: 0.6rem; }
  & .knopf { justify-self: start; margin-top: 0.5rem; }
}
@keyframes hereinkommen { from { opacity: 0; translate: 0 1.5rem; } }

/* ---------- Rahmen: Abschnitte ---------- */

/* Einspaltige Raster: Ihr Inhalt (Eingabefelder, lange Adressen, Wörter) darf die Spalte nie breiter als den Platz
   machen, sonst wird am Handy rechts abgeschnitten */
.abschnitt, .held-text, .projekt-held-text, .projekt-karte-text, .galerie-punkt, .punkt-karte, .formular, .recht,
.seite-kopf, .abschnitt-kopf, .stapel-text, .kontakt-wege, .fahrt-buehne { grid-template-columns: minmax(0, 1fr); }

main { display: block; }
.abschnitt {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  width: min(100% - 2 * var(--rand), var(--breite));
  margin: 0 auto;
  padding-block: clamp(5rem, 12vw, 10rem);
}
.abschnitt-kopf {
  display: grid;
  gap: 1.25rem;
  justify-items: start;
  & h2 {
    max-width: 16ch;
    font-size: clamp(min(2.6rem, 10vw), 6.6vw, 6.5rem);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 0.95;
  }
}
.abschnitt-lead { font: 400 1.05rem / 1.5 var(--schrift-mono); color: var(--text-2); }

/* ---------- Rahmen: Fuß ---------- */

.fuss {
  width: min(100% - 2 * var(--rand), var(--breite));
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 6rem) 0 2rem;
  border-top: 1px solid var(--linie);
}
.fuss-oben {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 3rem;
}
.fuss-logo { width: min(26rem, 80vw); height: auto; opacity: 0.9; }
.fuss-spalten {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: clamp(2rem, 5vw, 5rem);
  & div { display: grid; align-content: start; gap: 0.55rem; }
  & a, & p { color: var(--text-leise); transition: color var(--dauer); }
  & a:hover { color: var(--text); }
}
.fuss-titel { margin-bottom: 0.4rem; font: 600 0.72rem / 1 var(--schrift-titel); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-2) !important; }
.fuss-unten {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--text-ganz-leise);
  border-top: 1px solid var(--linie);
}

/* ---------- Startseite: Held ---------- */

.held {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: end;
  gap: 2rem;
  width: min(100% - 2 * var(--rand), var(--breite));
  min-height: 100svh;
  margin: 0 auto;
  padding-top: 8.5rem;
}
.held-text { display: grid; gap: 1.75rem; align-self: center; padding-bottom: 4rem; }

.boot {
  display: grid;
  gap: 0.2rem;
  min-height: 6.6rem;
  font: 400 clamp(0.78rem, 1vw, 0.92rem) / 1.6 var(--schrift-mono);
  color: var(--text-leise);
}
.ok { color: var(--text-2); }
.boot-befehl { margin-top: 0.6rem; color: var(--text); }
@media (scripting: enabled) {
  .boot-zeile:not(.da), .boot-befehl:not(.da), .boot-zeile:not(.fertig) .ok, .held-titel .zeile:not(.da) { visibility: hidden; }
}

.held-titel {
  display: grid;
  font-size: clamp(3.2rem, min(8.2vw, 13.5svh), 9.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  /* Weiches Leuchten hinter der ganzen Schrift, atmet langsam */
  animation: titel-atmen 5s ease-in-out infinite alternate;
  & .zeile {
    display: block;
    min-height: 1em;
    white-space: nowrap;
    /* Chrom: Ein heller Streifen läuft über die Buchstaben, Zeile für Zeile leicht versetzt */
    background-image: linear-gradient(100deg, #8f8e95 0%, #c9c9ce 30%, #ffffff 42%, #c9c9ce 54%, #8f8e95 70%, #b9b8bf 100%);
    background-size: 250% 100%;
    color: transparent;
    animation: chrom 6s linear infinite;
  }
  & .zeile:nth-child(2) { animation-delay: -0.5s; }
  & .zeile:nth-child(3) { animation-delay: -1s; }
  /* M und P, die Anfangsbuchstaben von MP Media: erst dunkel, nach dem Tippen zünden sie wie Neon */
  & .anfang { color: #4d4c52; font-weight: inherit; }
  &.gezuendet .anfang { animation: zuenden 1.4s linear both, neon 3.2s 1.4s ease-in-out infinite alternate; }
  & .zeile:nth-child(2) .anfang { animation-delay: 0.25s, 1.65s; }
}
@keyframes chrom { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@keyframes titel-atmen {
  from { filter: drop-shadow(0 0 0.2em rgb(255 255 255 / 6%)); }
  to { filter: drop-shadow(0 0 0.45em rgb(255 255 255 / 16%)); }
}
/* Zünden: zweimal kurz flackern, dann an (unter drei Blitzen je Sekunde) */
@keyframes zuenden {
  0%, 14% { color: #4d4c52; text-shadow: none; }
  15%, 29% { color: #fff; text-shadow: 0 0 0.06em #fff, 0 0 0.3em rgb(255 255 255 / 60%); }
  30%, 49% { color: #6b6a70; text-shadow: none; }
  50%, 100% { color: #fff; text-shadow: 0 0 0.06em #fff, 0 0 0.25em rgb(255 255 255 / 55%), 0 0 0.7em rgb(198 199 200 / 40%); }
}
@keyframes neon {
  from { color: #fff; text-shadow: 0 0 0.06em #fff, 0 0 0.25em rgb(255 255 255 / 55%), 0 0 0.7em rgb(198 199 200 / 40%); }
  to { color: #fff; text-shadow: 0 0 0.05em #fff, 0 0 0.18em rgb(255 255 255 / 40%), 0 0 0.45em rgb(198 199 200 / 25%); }
}

.cursor {
  display: inline-block;
  width: 0.55em;
  height: 1.1em;
  margin-left: 0.1em;
  vertical-align: -0.2em;
  background: var(--text);
  animation: blinken 1s steps(1) infinite;
  &.gross { width: 0.08em; height: 0.8em; margin-left: 0.04em; vertical-align: 0; background: var(--marke-hell); }
}
@keyframes blinken { 50% { opacity: 0; } }

.held-lead {
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  color: var(--text-2);
  & .herz { display: inline-grid; color: var(--marke-hell); animation: herz 1.6s ease-in-out infinite; }
  & .herz .icon { fill: currentColor; }
}
@keyframes herz { 15% { transform: scale(1.25); } 30% { transform: scale(1); } 45% { transform: scale(1.18); } 60% { transform: scale(1); } }
.held-knoepfe { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.held-tipp {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  padding: 0;
  font-size: 0.95rem;
  color: var(--text-leise);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--dauer);
  &:hover { color: var(--text); }
}

.held-bild {
  position: relative;
  align-self: end;
  justify-self: center;
  width: min(100%, 34rem);
  perspective: 1200px;
  & img {
    position: relative;
    display: block;
    width: 100%;
    transform: rotateX(var(--kipp-x, 0deg)) rotateY(var(--kipp-y, 0deg));
    transition: transform 700ms var(--kurve);
    mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
    filter: saturate(0.9) contrast(1.05);
  }
}
.held-schein {
  position: absolute;
  inset: 12% 0 0;
  background:
    radial-gradient(closest-side at 50% 42%, rgb(198 199 200 / 28%), transparent 70%),
    radial-gradient(closest-side at 50% 90%, rgb(112 109 114 / 40%), transparent 80%);
  filter: blur(20px);
  animation: atmen 7s ease-in-out infinite alternate;
}
@keyframes atmen { to { opacity: 0.65; transform: scale(1.06); } }
@keyframes schweben { to { translate: 0 -14px; } }


/* ---------- Startseite: Laufband ---------- */

.laufband {
  overflow: hidden;
  padding-block: 1.5rem;
  border-block: 1px solid var(--linie);
  background: rgb(255 255 255 / 2%);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.laufband-spur {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  width: max-content;
  animation: laufband 38s linear infinite;
  & span {
    font: 800 clamp(2.5rem, 6vw, 5.5rem) / 1 var(--schrift-titel);
    letter-spacing: -0.04em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  /* Blass statt Umriss: Outfit hat überlappende Konturen, ein Umriss zeigt Linien im Inneren der Buchstaben. Blass, aber
     mit mindestens 3:1 Kontrast (große Schrift, WCAG) */
  & .hohl { color: rgb(198 199 200 / 55%); }
  & i { width: 0.9rem; height: 0.9rem; flex: none; background: var(--marke-grau); border-radius: 50%; }
}
@keyframes laufband { to { transform: translateX(calc(-50% - 1.25rem)); } }

/* ---------- Startseite: Über mich ---------- */

.ueber-gross {
  max-width: 28ch;
  font: 600 clamp(1.8rem, 4.2vw, 3.9rem) / 1.12 var(--schrift-titel);
  letter-spacing: -0.03em;
  & .wort { opacity: var(--an, 1); transition: opacity 200ms linear; }
}
.ueber-unten {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
.ueber-text {
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  font-size: 1.15rem;
  color: var(--text-2);
  border-radius: var(--rund-l);
}
.ueber-pointe { font: 600 1.35rem / 1.3 var(--schrift-titel); color: var(--text); letter-spacing: -0.01em; }
.prinzipien {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  & li {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: var(--rund);
    & .icon { grid-row: span 2; width: 1.4rem; height: 1.4rem; margin-top: 0.2rem; color: var(--marke-hell); }
    & strong { font: 600 1.1rem / 1.3 var(--schrift-titel); }
    & span { color: var(--text-leise); }
  }
}

/* ---------- Startseite: Fakten ---------- */

.zahlen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid var(--linie);
}
.zahl-block {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1rem, 3vw, 3rem);
  & + & { border-left: 1px solid var(--linie); }
  & strong {
    font: 800 clamp(4rem, 11vw, 11rem) / 0.85 var(--schrift-titel);
    letter-spacing: -0.06em;
    font-variant-numeric: tabular-nums;
  }
  & .plus { font: 300 clamp(2rem, 4vw, 4rem) / 1 var(--schrift-titel); color: var(--marke-grau); }
  & p { flex-basis: 100%; margin-top: 1.25rem; font: 500 0.8rem / 1 var(--schrift-titel); letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-leise); }
}
.fakten-unten { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.25rem; }
.vertrauen-pille {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.4rem;
  color: var(--text-2);
  border-radius: var(--pille);
  & .icon { color: var(--gut); }
}
.zielgruppen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  & li { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1.25rem; font: 500 1rem / 1 var(--schrift-titel); border-radius: var(--pille); }
}

/* ---------- Startseite: Überblick der Leistungen ---------- */

.leistungen-raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  & li { display: grid; }
  & li:nth-child(3n + 2) { --verzug: 80ms; }
  & li:nth-child(3n + 3) { --verzug: 160ms; }
}
.leistung-karte {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 1rem;
  padding: clamp(1.5rem, 2.2vw, 2rem);
  border-radius: var(--rund-l);
  transition: transform 500ms var(--feder);
  & h3 { font-size: clamp(1.5rem, 2vw, 1.9rem); font-weight: 700; letter-spacing: -0.03em; }
  & p { color: var(--text-2); }
  & .zeichen { transition: background var(--dauer), color var(--dauer); }
  &:hover { transform: translateY(-6px); }
  &:hover .zeichen { color: #111214; background: var(--verlauf-knopf); }
  &:hover .leistung-mehr .icon { transform: translateX(4px); }
}
.leistung-kopf { display: flex; align-items: flex-start; justify-content: space-between; }
.leistung-mehr {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font: 500 0.95rem / 1 var(--schrift-titel);
  color: var(--text);
  & .icon { transition: transform 400ms var(--feder); }
}
.leistungen-alle { justify-self: start; }

/* ---------- Leistungen: Stapel ---------- */

.stapel { display: grid; gap: 2.5rem; padding-bottom: 4rem; }
.stapel-karte {
  position: sticky;
  top: 7rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  min-height: min(34rem, 70vh);
  padding: clamp(1.75rem, 4vw, 4rem);
  border-radius: var(--rund-xl);
  transform-origin: 50% 0;
  transform: scale(calc(1 - var(--zurueck, 0) * 0.07));
  filter: brightness(calc(1 - var(--zurueck, 0) * 0.45));
  &:nth-child(2) { top: 8.25rem; }
  &:nth-child(3) { top: 9.5rem; }
  &:nth-child(4) { top: 10.75rem; }
  &:nth-child(5) { top: 12rem; }
  &:nth-child(6) { top: 13.25rem; }
  & h2 { margin: 1.5rem 0 1rem; font-size: clamp(2.4rem, 5vw, 4.75rem); font-weight: 700; letter-spacing: -0.045em; }
  & .stapel-text > p:last-of-type { font-size: clamp(1.1rem, 1.5vw, 1.35rem); color: var(--text-2); max-width: 30ch; }
}
.stapel-kopf {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  font: 500 0.8rem / 1 var(--schrift-titel);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.stapel-nr { font: 400 0.85rem / 1 var(--schrift-mono); color: var(--text); letter-spacing: 0; }

.szene { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; min-height: 22rem; container-type: inline-size; }

.code-fenster {
  width: min(100%, 30rem);
  padding: 1.5em 1.75em;
  /* Die längste Zeile hat 34 Zeichen: Die Schrift wächst mit der Breite der Szene, damit nichts abgeschnitten wird */
  font: 400 clamp(0.62rem, 3.5cqi, 0.95rem) / 1.9 var(--schrift-mono);
  color: var(--text-leise);
  border-radius: var(--rund);
  & p { white-space: nowrap; overflow: hidden; }
  & b { font-weight: 400; color: var(--marke-hell); }
  & em { font-style: normal; color: var(--text); }
  & i { font-style: normal; color: #a6a4ad; }
  & .ein1 { padding-left: 1.5rem; }
  & .code-ok { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; color: var(--gut); }
  .da & p { animation: tippen 700ms steps(28) both; }
  .da & p:nth-child(2) { animation-delay: 300ms; }
  .da & p:nth-child(3) { animation-delay: 600ms; }
  .da & p:nth-child(4) { animation-delay: 900ms; }
  .da & p:nth-child(5) { animation-delay: 1200ms; }
  .da & p:nth-child(6) { animation-delay: 1700ms; }
}
@keyframes tippen { from { width: 0; } }

.ki-fenster {
  display: grid;
  gap: 1rem;
  width: min(100%, 30rem);
  & .blase { max-width: 85%; padding: 1rem 1.25rem; border-radius: 20px; font-size: 1.05rem; color: var(--text-2); }
  & .ich { justify-self: end; color: #111214; background: var(--verlauf-knopf); box-shadow: none; border-bottom-right-radius: 6px; &::before, &::after { display: none; } }
  & .ki { border-bottom-left-radius: 6px; }
  & .ki-name { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem; font: 600 0.8rem / 1 var(--schrift-titel); color: var(--text); }
  & .ki-schild { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--text-leise); }
  .da & .blase { animation: hereinkommen 700ms var(--feder) both; }
  .da & .ki { animation-delay: 700ms; }
}

.web-fenster {
  width: min(100%, 30rem);
  padding: 0 0 1.25rem;
  overflow: hidden;
  border-radius: var(--rund);
}
.web-leiste {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--linie);
}
.web-punkte { display: flex; gap: 0.35rem; & i { width: 0.6rem; height: 0.6rem; background: var(--linie-stark); border-radius: 50%; } }
.web-adresse { flex: 1; padding: 0.3rem 0.8rem; font-size: 0.8rem; color: var(--text-leise); background: var(--flaeche); border-radius: var(--pille); }
.web-held {
  display: grid;
  gap: 0.6rem;
  padding: 2rem 1.25rem 1.5rem;
  & b { display: block; width: 70%; height: 1.1rem; background: var(--flaeche-stark); border-radius: 6px; }
  & .kurz { width: 45%; }
  & span { width: 7rem; height: 2rem; margin-top: 0.5rem; background: var(--verlauf-knopf); border-radius: var(--pille); }
}
.web-bloecke {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  padding: 0 1.25rem;
  & i { height: 5.5rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; animation: bloecke 6s var(--kurve) infinite; }
  & i:nth-child(2) { animation-delay: -2s; }
  & i:nth-child(3) { animation-delay: -4s; }
}
@keyframes bloecke { 0%, 30% { translate: 0 0; } 40%, 60% { translate: 0 -0.6rem; background: var(--flaeche-stark); } 70%, 100% { translate: 0 0; } }

/* Schnittstellen: Anruf kommt rein, die Kundenakte geht auf; darunter die Anschlüsse mit laufendem Signal */
.anruf-buehne { display: grid; justify-items: center; gap: 1.5rem; width: min(100%, 30rem); }
.anruf {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.1rem 1.25rem;
  border-radius: var(--rund-l);
  .da & { animation: hereinkommen 700ms var(--feder) both; }
}
.anruf-zeichen {
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  flex: none;
  color: #111214;
  background: var(--gut);
  border-radius: 50%;
  animation: klingeln 2.4s ease-in-out infinite;
  & .icon { width: 1.4rem; height: 1.4rem; }
}
@keyframes klingeln {
  0%, 40%, 100% { box-shadow: 0 0 0 0 rgb(124 199 154 / 55%); rotate: 0deg; }
  5%, 15%, 25% { rotate: -12deg; }
  10%, 20%, 30% { rotate: 12deg; }
  35% { box-shadow: 0 0 0 0.9rem rgb(124 199 154 / 0%); rotate: 0deg; }
}
.anruf-text {
  display: grid;
  gap: 0.15rem;
  & small { font-size: 0.82rem; color: var(--text-leise); }
  & strong { font: 600 1.2rem / 1.2 var(--schrift-titel); }
  & em { font-style: normal; font-size: 0.9rem; color: var(--gut); }
}
.anschluesse {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  & li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    font: 500 0.95rem / 1 var(--schrift-titel);
    border-radius: var(--rund);
    & .icon { color: var(--marke-hell); }
    /* Ein Signal läuft der Reihe nach durch die Anschlüsse */
    &::after { background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 12%) 50%, transparent 70%); background-size: 250% 100%; animation: signal 3.2s linear infinite; }
  }
  & li:nth-child(2)::after { animation-delay: 0.4s; }
  & li:nth-child(3)::after { animation-delay: 0.8s; }
  & li:nth-child(4)::after { animation-delay: 1.2s; }
}
@keyframes signal { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.server-fenster i { color: var(--gut); }

.grafik-buehne { display: grid; justify-items: center; gap: 2rem; }
.grafik-marke {
  width: min(16rem, 60vw);
  overflow: visible;
  & line { stroke: var(--marke-hell); stroke-width: 4.5; stroke-dasharray: 60; stroke-dashoffset: 60; }
  & circle { fill: var(--marke-grau); transform-box: fill-box; transform-origin: center; scale: 0; }
  & .mitte { fill: #fff; }
  .da & line { animation: zeichnen 1.4s var(--kurve) 600ms forwards; }
  .da & circle { animation: aufploppen 700ms var(--feder) forwards; }
  .da & circle:nth-of-type(2) { animation-delay: 150ms; }
  .da & circle:nth-of-type(3) { animation-delay: 300ms; }
  .da & circle:nth-of-type(4) { animation-delay: 450ms; }
}
@keyframes zeichnen { to { stroke-dashoffset: 0; } }
@keyframes aufploppen { to { scale: 1; } }
.grafik-farben {
  display: flex;
  gap: 0.75rem;
  & i { width: 3.5rem; height: 3.5rem; border-radius: 50%; border: 1px solid var(--linie-stark); }
  & i:nth-child(1) { background: #111214; }
  & i:nth-child(2) { background: var(--marke-grau); }
  & i:nth-child(3) { background: var(--marke-hell); }
}

/* ---------- Startseite: Werkzeugkasten ---------- */

.werkzeuge {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Alle Karten einer Reihe gleich hoch, auch wenn ein Name zweizeilig ist */
  & li { display: grid; }
  & li:nth-child(4n + 2) { --verzug: 80ms; }
  & li:nth-child(4n + 3) { --verzug: 160ms; }
  & li:nth-child(4n + 4) { --verzug: 240ms; }
}
.werkzeug-karte {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 1rem;
  width: 100%;
  padding: 1.5rem;
  text-align: left;
  border: 0;
  border-radius: var(--rund-l);
  cursor: pointer;
  transition: transform 500ms var(--feder);
  /* Zweizeilige Namen: Icon und Pfeil stehen auf Höhe der ersten Zeile */
  & strong { margin-top: 0.62rem; font: 600 1.3rem / 1.1 var(--schrift-titel); letter-spacing: -0.02em; }
  & .werkzeug-mehr { margin-top: 0.75rem; color: var(--text-leise); transition: transform 400ms var(--feder), color var(--dauer); }
  &:hover { transform: translateY(-4px); }
  &:hover .werkzeug-mehr { color: var(--text); transform: translate(3px, -3px); }
  &:hover .zeichen { background: var(--verlauf-knopf); color: #111214; }
  & .zeichen { transition: background var(--dauer), color var(--dauer); }
}

/* ---------- Startseite: Schluss ---------- */

.schluss-karte {
  display: grid;
  justify-items: center;
  gap: 2rem;
  padding: clamp(3rem, 8vw, 7rem) clamp(1.25rem, 4vw, 4rem);
  text-align: center;
  border-radius: var(--rund-xl);
  overflow: hidden;
}
.schluss-titel {
  font-size: clamp(3rem, 9vw, 9.5rem);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.9;
}
.schluss-text { font-size: clamp(1.15rem, 1.8vw, 1.5rem); color: var(--text-2); }
.schluss-wege { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 1rem; }
.weg {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1.4rem;
  text-align: left;
  border-radius: var(--pille);
  font: 500 1.1rem / 1.2 var(--schrift-titel);
  & > a { display: inline-flex; align-items: center; gap: 0.9rem; }
  & .icon { width: 1.3rem; height: 1.3rem; color: var(--marke-hell); }
  & small { display: block; font: 400 0.8rem / 1.2 var(--schrift-text); color: var(--text-leise); }
}
.weg-kopieren {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-right: -0.6rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 50%;
  cursor: pointer;
  & .icon { width: 1rem; height: 1rem; }
  &:hover { background: var(--flaeche-stark); }
}

/* ---------- Unterseiten ---------- */

.seite-kopf {
  display: grid;
  gap: 1.5rem;
  justify-items: start;
  width: min(100% - 2 * var(--rand), var(--breite));
  margin: 0 auto;
  padding: clamp(9rem, 16vw, 13rem) 0 clamp(2rem, 4vw, 3rem);
  & h1 {
    font-size: clamp(min(3.4rem, 15vw), 11vw, 11rem);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 0.85;
  }
  & > p:last-child { max-width: 46ch; font-size: clamp(1.15rem, 1.6vw, 1.4rem); color: var(--text-2); }
}
/* Direkt unter dem Seitenkopf braucht ein Abschnitt keinen eigenen großen Abstand nach oben */
.seite-kopf + .abschnitt { padding-top: clamp(1rem, 3vw, 2.5rem); }

.seite-inhalt {
  width: min(100% - 2 * var(--rand), var(--breite));
  margin: 0 auto;
  padding-bottom: clamp(5rem, 10vw, 8rem);
}

/* ---------- Projekte ---------- */

.unsichtbar { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.schild {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.7rem;
  font: 500 0.75rem / 1 var(--schrift-titel);
  color: var(--text-2);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--pille);
  white-space: nowrap;
  & .punkt { width: 0.4rem; height: 0.4rem; }
}

.arten-sprung {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-bottom: 0 !important;
  & small { font: 500 0.75rem / 1 var(--schrift-mono); opacity: 0.7; }
}
.abschnitt-text { max-width: 52ch; font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: var(--text-2); }

.projekt-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  & li { display: grid; }
  & li:nth-child(even) { --verzug: 120ms; }
}
.projekt-karte {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border-radius: var(--rund-xl);
  transition: transform 600ms var(--feder);
  & h3 { font-size: clamp(1.8rem, 2.6vw, 2.6rem); font-weight: 700; letter-spacing: -0.04em; }
  &:hover { transform: translateY(-6px); }
  &:hover .projekt-karte-bild > * { transform: scale(1.03) rotate(-0.4deg); }
  &:hover .projekt-mehr .icon { transform: translateX(4px); }
}
.projekt-karte-bild {
  padding: 1.25rem 1.25rem 0;
  overflow: hidden;
  & > * { transition: transform 900ms var(--kurve); transform-origin: 50% 100%; }
  & .bild, & .browser { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  & .bild-innen { height: 17rem; }
}
.projekt-karte-text { display: grid; align-content: start; gap: 0.9rem; padding: clamp(1.25rem, 2.5vw, 2rem); }
.projekt-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  font: 500 0.78rem / 1.2 var(--schrift-titel);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-leise);
  & .icon { width: 1.1rem; height: 1.1rem; }
  & .schild { letter-spacing: 0; text-transform: none; }
}
.projekt-kurz { font-size: 1.1rem; color: var(--text-2); }
.projekt-technik {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  & li { padding: 0.35rem 0.7rem; font: 500 0.78rem / 1 var(--schrift-titel); color: var(--text-2); border: 1px solid var(--linie); border-radius: var(--pille); }
}
.projekt-mehr {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
  font: 500 0.95rem / 1 var(--schrift-titel);
  & .icon { transition: transform 400ms var(--feder); }
}

/* Screenshot im Browserfenster */
.browser {
  overflow: hidden;
  border-radius: var(--rund-l);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 16%), var(--schatten-gross);
  & img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
}
.browser-adresse { flex: 1; min-width: 0; max-width: 22rem; padding: 0.3rem 0.8rem; color: var(--text-leise); background: var(--flaeche); border-radius: var(--pille); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.auswahl-hinweis {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  max-width: 60rem;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  color: var(--text-2);
  & .icon { flex: none; margin-top: 0.3rem; color: var(--marke-hell); }
}

/* Detailseite (auch Kopf von Fernwartung und Videocall) */
.projekt-held, .dienst-held {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
  width: min(100% - 2 * var(--rand), var(--breite));
  min-height: min(100svh, 62rem);
  margin: 0 auto;
  padding: 9rem 0 3rem;
  & h1 {
    font-size: clamp(min(3rem, 12vw), 6.4vw, 6.5rem);
    font-weight: 800;
    letter-spacing: -0.055em;
    line-height: 0.92;
  }
  /* Titel mit sehr langem Wort (visitreutlingen.de) passen sonst nicht in die Spalte */
  & h1.lang { font-size: clamp(min(2.4rem, 9vw), 4.4vw, 4.6rem); }
}
.projekt-seite > .abschnitt { padding-block: clamp(3rem, 6vw, 5.5rem); }
.projekt-held-text { display: grid; gap: 1.5rem; justify-items: start; }
.pfad {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  font: 500 0.8rem / 1 var(--schrift-titel);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-leise);
  & a:hover { color: var(--text); }
}
.projekt-lead { max-width: 40ch; font-size: clamp(1.15rem, 1.6vw, 1.4rem); color: var(--text-2); }
.projekt-daten {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  & div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; align-items: baseline; }
  & dt { font: 500 0.75rem / 1.4 var(--schrift-titel); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-leise); }
  & dd { margin: 0; color: var(--text); }
}
.projekt-held-bild {
  position: relative;
  perspective: 1400px;
  padding-bottom: 2rem;
  & > .browser, & > .bild { transform: rotateX(var(--kipp-x, 2deg)) rotateY(var(--kipp-y, -6deg)); transition: transform 700ms var(--kurve); }
  & .bild-innen { height: min(26rem, 52vw); }
}
.handy {
  position: absolute;
  right: -1rem;
  bottom: 0;
  width: 26%;
  min-width: 7.5rem;
  padding: 0.4rem;
  background: #0d0e10;
  border: 1px solid var(--linie-stark);
  border-radius: 1.6rem;
  box-shadow: var(--schatten-gross);
  animation: schweben 6s ease-in-out infinite alternate;
  & img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 18; object-fit: cover; object-position: top; border-radius: 1.25rem; }
}
.projekt-zahlen {
  padding-block: 2rem;
  & .zahlen { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
  & .zahl-block strong { font-size: clamp(3rem, 6.5vw, 6.5rem); }
}
.projekt-geschichte {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  & > .glas { display: grid; align-content: start; gap: 1.25rem; padding: clamp(1.75rem, 3.5vw, 3rem); border-radius: var(--rund-xl); }
  & > .glas > p:last-child { font-size: clamp(1.1rem, 1.4vw, 1.25rem); color: var(--text-2); }
}
.punkte-raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  & li:nth-child(3n + 2) { --verzug: 80ms; }
  & li:nth-child(3n + 3) { --verzug: 160ms; }
}
.punkt-karte {
  display: grid;
  align-content: start;
  gap: 0.9rem;
  padding: 1.75rem;
  border-radius: var(--rund-l);
  & h3 { font-size: 1.35rem; font-weight: 650; letter-spacing: -0.02em; }
  & p { color: var(--text-2); }
}
.projekt-technik-zeile { display: grid; gap: 1rem; justify-items: start; }
.projekt-weiter {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  padding-bottom: 0;
}
.weiter-karte {
  position: relative;
  display: grid;
  gap: 0.8rem;
  justify-items: start;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--rund-xl);
  transition: transform 500ms var(--feder);
  & strong { font: 700 clamp(1.6rem, 3vw, 2.6rem) / 1 var(--schrift-titel); letter-spacing: -0.04em; }
  & .weiter-auftraggeber { color: var(--text-leise); }
  & .zeichen { position: absolute; right: clamp(1.5rem, 3vw, 2.5rem); bottom: clamp(1.5rem, 3vw, 2.5rem); transition: background var(--dauer), color var(--dauer); }
  &:hover { transform: translateY(-4px); }
  &:hover .zeichen { color: #111214; background: var(--verlauf-knopf); }
}

/* ---------- Fernwartung und Videocall (fernwartung.php, videocall.php) ---------- */

.dienst-held { padding-bottom: 7rem; }
.dienst-held h1 { font-size: clamp(min(2.8rem, 11vw), 5.6vw, 5.8rem); font-weight: 800; letter-spacing: -0.05em; line-height: 0.95; }
.laden { display: flex; flex-wrap: wrap; gap: 0.75rem; & small { font: 400 0.8rem / 1 var(--schrift-mono); opacity: 0.7; } }
.held-hinweis { font-size: 0.92rem; max-width: 46ch; }
.anruf-gross {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.4rem 0.9rem 1rem;
  font: 600 1.35rem / 1.2 var(--schrift-titel);
  border-radius: var(--pille);
  transition: transform 500ms var(--feder);
  & .icon { width: 2.6rem; height: 2.6rem; padding: 0.6rem; color: #111214; background: var(--gut); border-radius: 50%; animation: klingeln 2.4s ease-in-out infinite; }
  & small { display: block; font: 400 0.85rem / 1.2 var(--schrift-text); color: var(--text-leise); }
  &:hover { transform: translateY(-3px); }
}

.fw-buehne, .vc-buehne { position: relative; perspective: 1400px; padding: 2.5rem 0; }
.fw-fenster, .vc-fenster {
  overflow: hidden;
  border-radius: var(--rund-l);
  transform: rotateX(var(--kipp-x, 3deg)) rotateY(var(--kipp-y, -7deg));
  transition: transform 700ms var(--kurve);
  animation: schweben 7s ease-in-out infinite alternate;
}
.fw-inhalt { position: relative; display: grid; gap: 1rem; min-height: 20rem; padding: 1.5rem; }
.fw-id {
  display: grid;
  gap: 0.3rem;
  & small { font-size: 0.85rem; color: var(--text-leise); }
  & strong { font: 700 clamp(2rem, 3.4vw, 2.8rem) / 1 var(--schrift-mono); letter-spacing: 0.04em; }
}
.fw-anfrage {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem 1rem;
  align-items: center;
  padding: 1.1rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  animation: fw-anfrage 9s var(--kurve) infinite;
  & p { display: grid; gap: 0.2rem; & strong { font: 600 1.05rem / 1.2 var(--schrift-titel); } & small { color: var(--text-leise); font-size: 0.85rem; } }
}
.fw-knoepfe { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 0.5rem; & > span { padding: 0.55rem 1rem; font: 500 0.9rem / 1 var(--schrift-titel); border-radius: var(--pille); } }
.fw-nein { color: var(--text-2); background: var(--flaeche); }
.fw-ja { position: relative; color: #111214; background: var(--verlauf-knopf); animation: fw-druck 9s ease-in-out infinite; }
.fw-zeiger { position: absolute; left: 60%; top: 55%; color: #fff; filter: drop-shadow(0 2px 4px rgb(0 0 0 / 60%)); animation: fw-zeiger 9s var(--kurve) infinite; & .icon { width: 1.6rem; height: 1.6rem; fill: #111214; } }
.fw-verbunden { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.5rem; display: flex; align-items: center; gap: 0.6rem; padding: 0.9rem 1.1rem; font: 600 1rem / 1 var(--schrift-titel); color: #111214; background: var(--gut); border-radius: var(--rund); animation: fw-verbunden 9s var(--kurve) infinite; }
@keyframes fw-anfrage { 0%, 12% { opacity: 0; translate: 0 1rem; } 18%, 66% { opacity: 1; translate: 0 0; } 72%, 100% { opacity: 0; translate: 0 -0.5rem; } }
@keyframes fw-zeiger { 0%, 22% { translate: 6rem 4rem; opacity: 0; } 28% { opacity: 1; } 42%, 48% { translate: 0 0; } 50% { scale: 0.8; } 53%, 64% { translate: 0 0; scale: 1; opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes fw-druck { 0%, 48% { box-shadow: none; } 50% { box-shadow: 0 0 0 6px rgb(255 255 255 / 25%); } 56%, 100% { box-shadow: none; } }
@keyframes fw-verbunden { 0%, 68% { opacity: 0; translate: 0 1rem; } 74%, 95% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
.fw-blase {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  font: 500 0.9rem / 1 var(--schrift-titel);
  white-space: nowrap;
  border-radius: var(--pille);
  animation: schweben 5s ease-in-out infinite alternate;
  &.eins { top: 0.5rem; right: 6%; }
  &.zwei { bottom: 0.5rem; left: -4%; animation-delay: -2.5s; }
  & .icon { color: var(--marke-hell); }
}

.vc-schloss { margin-left: auto; color: var(--gut); & .icon { width: 1rem; height: 1rem; } }
.vc-kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; padding: 1rem 1rem 0.5rem; }
.vc-kachel {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: radial-gradient(circle at 50% 35%, #34343a, #151619);
  border: 2px solid transparent;
  border-radius: var(--rund);
  &.spricht { animation: vc-spricht 3s ease-in-out infinite; }
}
@keyframes vc-spricht { 0%, 100% { border-color: transparent; } 20%, 70% { border-color: var(--gut); } }
.vc-kopf {
  width: 38%;
  aspect-ratio: 1;
  background: radial-gradient(circle at 50% 38%, #8a8990 0 28%, transparent 29%), radial-gradient(ellipse 60% 42% at 50% 100%, #8a8990 0 98%, transparent 100%);
  border-radius: 50%;
}
.vc-name { position: absolute; left: 0.5rem; bottom: 0.5rem; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.6rem; font: 500 0.78rem / 1 var(--schrift-titel); background: rgb(0 0 0 / 55%); border-radius: var(--pille); }
.vc-pegel { width: 0.5rem; height: 0.7rem; background: linear-gradient(90deg, var(--gut) 0 2px, transparent 2px 3px, var(--gut) 3px 5px, transparent 5px 6px, var(--gut) 6px 8px); animation: pegel 0.6s ease-in-out infinite alternate; }
.vc-reaktion { position: absolute; right: 0.6rem; bottom: 0.6rem; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; color: #111214; background: var(--verlauf-knopf); border-radius: 50%; animation: vc-reaktion 6s var(--feder) infinite; & .icon { width: 1.1rem; height: 1.1rem; } }
@keyframes vc-reaktion { 0%, 40% { scale: 0; } 46%, 70% { scale: 1; translate: 0 0; } 80%, 100% { scale: 0.6; translate: 0 -3rem; opacity: 0; } }
.vc-dock { display: flex; justify-content: center; gap: 0.5rem; padding: 0.75rem 1rem 1.1rem; & i { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; background: var(--flaeche-stark); border-radius: 50%; } & .rot { color: #111214; background: var(--rot); } & .icon { width: 1.1rem; height: 1.1rem; } }

.code-feld {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: min(100%, 34rem);
  padding: 0.45rem 0.45rem 0.45rem 1.1rem;
  border-radius: var(--pille);
  & > .icon { color: var(--text-leise); }
  & input { flex: 1; width: 0; min-width: 0; padding: 0.6rem 0; font-size: 1.05rem; color: var(--text); background: none; border: 0; outline: none; }
  &:focus-within { box-shadow: 0 0 0 3px rgb(255 255 255 / 12%), var(--schatten-karte); }
}
.vertrauen-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  & li { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.85rem; font: 500 0.85rem / 1 var(--schrift-titel); color: var(--text-2); border: 1px solid var(--linie); border-radius: var(--pille); }
  & .icon { width: 1rem; height: 1rem; color: var(--marke-hell); }
}

.schritte-liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  & li { position: relative; }
  & li:nth-child(2) { --verzug: 100ms; }
  & li:nth-child(3) { --verzug: 200ms; }
}
.schritt-nr { position: absolute; top: 1rem; right: 1.4rem; font: 800 3.5rem / 1 var(--schrift-titel); color: var(--flaeche-stark); }

.fragen { display: grid; gap: 0.75rem; max-width: 56rem; }
.frage {
  border-radius: var(--rund);
  & summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.4rem;
    font: 600 1.1rem / 1.3 var(--schrift-titel);
    cursor: pointer;
    list-style: none;
    &::-webkit-details-marker { display: none; }
    & .icon { flex: none; color: var(--text-leise); transition: rotate 300ms var(--kurve); }
  }
  &[open] summary .icon { rotate: 180deg; }
  & p { padding: 0 1.4rem 1.3rem; color: var(--text-2); }
}

.hilfe-karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.hilfe-karte {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem;
  border-radius: var(--rund-l);
  transition: transform 500ms var(--feder);
  & strong { display: block; font: 700 1.5rem / 1.2 var(--schrift-titel); letter-spacing: -0.02em; }
  & small { display: block; margin-top: 0.3rem; font-size: 1rem; color: var(--text-2); }
  & > .icon { transition: transform 400ms var(--feder); }
  &:hover { transform: translateY(-4px); }
  &:hover > .icon { transform: translateX(4px); }
}

/* Galerie auf den Projektseiten (projekt.php, js/bedienung.js) */
.galerie {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  & li:first-child:not(.hoch) { grid-column: 1 / -1; }
  & li:nth-child(even) { --verzug: 120ms; }
}
.galerie-punkt { display: grid; gap: 0.75rem; }
.galerie-punkt.hoch { justify-items: center; }
.galerie-knopf {
  position: relative;
  display: block;
  width: 100%;
  border-radius: var(--rund-l);
  transition: transform 600ms var(--feder);
  .hoch & { width: min(100%, 17rem); border-radius: 1.6rem; }
  &:hover { transform: translateY(-5px); }
  &:hover .galerie-lupe { opacity: 1; scale: 1; }
}
.galerie-lupe {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  color: #111214;
  background: var(--verlauf-knopf);
  border-radius: 50%;
  box-shadow: var(--schatten-karte);
  opacity: 0;
  scale: 0.8;
  transition: opacity var(--dauer), scale 400ms var(--feder);
}
.galerie-text { font-size: 0.95rem; color: var(--text-leise); .hoch & { text-align: center; } }
.handy-rahmen {
  padding: 0.4rem;
  background: #0d0e10;
  border: 1px solid var(--linie-stark);
  border-radius: 1.6rem;
  box-shadow: var(--schatten-gross);
  & img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 18; object-fit: cover; object-position: top; border-radius: 1.25rem; }
}
.galerie-fenster.fenster {
  width: min(100% - 2rem, 90rem);
  padding: 1rem;
  &[open] { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; justify-items: center; gap: 1rem; }
  & figure { display: grid; justify-items: center; gap: 0.9rem; margin: 0; }
  & img { display: block; max-width: 100%; max-height: calc(100dvh - 9rem); width: auto; height: auto; border-radius: var(--rund); touch-action: pan-y; }
  & figcaption { padding: 0 3rem; font-size: 1rem; text-align: center; color: var(--text-2); }
  &.hoch img { max-height: calc(100dvh - 8rem); }
}
.galerie-zaehler { margin-left: 0.5rem; font: 400 0.85rem / 1 var(--schrift-mono); color: var(--text-leise); }
.galerie-pfeil {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--dauer);
  &:hover { background: var(--flaeche-stark); }
}

/* Ansichten ohne Screenshot (inc/bausteine.php, schaubild) */
.bild {
  overflow: hidden;
  border-radius: var(--rund-l);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 16%), var(--schatten-gross);
}
.bild-leiste {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.8rem 1rem;
  font: 500 0.78rem / 1 var(--schrift-titel);
  color: var(--text-leise);
  border-bottom: 1px solid var(--linie);
}
.bild-punkte { display: flex; gap: 0.35rem; & i { width: 0.6rem; height: 0.6rem; background: var(--linie-stark); border-radius: 50%; } }
.bild-innen { position: relative; display: grid; gap: 0.8rem; height: 19rem; padding: 1.1rem; }

/* Gemeinsame Teile der Ansichten */
.bild-zeile {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  background: var(--flaeche);
  border-radius: 10px;
  & b { flex: 1; height: 0.5rem; max-width: 9rem; background: var(--flaeche-stark); border-radius: 4px; }
  & em { width: 2.5rem; height: 0.5rem; margin-left: auto; background: var(--linie-stark); border-radius: 4px; }
  & .punkt { width: 0.45rem; height: 0.45rem; }
  & .rund { width: 1.4rem; height: 1.4rem; flex: none; background: var(--flaeche-stark); border-radius: 50%; }
  &.betrag em { width: auto; height: auto; font: 500 0.82rem / 1 var(--schrift-titel); font-style: normal; color: var(--text-2); background: none; }
}
.bild-liste { display: grid; gap: 0.45rem; align-content: start; }
.bild-raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
  &.zwei { grid-template-columns: repeat(2, 1fr); }
}
.bild-kachel {
  display: grid;
  align-content: end;
  gap: 0.35rem;
  min-height: 4.2rem;
  padding: 0.6rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 10px;
  & i { width: 1.2rem; height: 1.2rem; background: var(--flaeche-stark); border-radius: 6px; }
  & b { width: 70%; height: 0.4rem; background: var(--flaeche-stark); border-radius: 3px; }
  & em { width: 45%; height: 0.4rem; background: var(--linie); border-radius: 3px; }
  &.an { background: var(--flaeche-stark); border-color: var(--linie-stark); animation: atmen-kachel 3s ease-in-out infinite; }
  &.foto { min-height: 7rem; & i { width: 100%; height: 3.6rem; background: linear-gradient(135deg, #3b3a40, #1d1e22); } }
  &.person { min-height: 5.6rem; place-items: center; align-content: center; background: radial-gradient(circle at 50% 40%, #2c2c31, #17181b);
    & i { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: #4a4950; }
    & em { width: 2rem; height: 0.25rem; background: var(--gut); animation: pegel 1.2s ease-in-out infinite alternate; } }
  &.zahl { min-height: 3.6rem; & b { width: 50%; height: 0.7rem; } }
}
@keyframes atmen-kachel { 50% { box-shadow: 0 0 0 4px rgb(255 255 255 / 6%); } }
@keyframes pegel { from { width: 0.6rem; opacity: 0.4; } }

/* CityLS: Stadtplan mit Flächen */
.bild-karte-art { grid-template-columns: 1.4fr 1fr; }
.bild-karte {
  position: relative;
  border-radius: 12px;
  background:
    linear-gradient(90deg, transparent 47%, rgb(255 255 255 / 9%) 47% 53%, transparent 53%) 0 0 / 5rem 100%,
    linear-gradient(0deg, transparent 47%, rgb(255 255 255 / 9%) 47% 53%, transparent 53%) 0 0 / 100% 4.2rem,
    linear-gradient(35deg, transparent 49%, rgb(255 255 255 / 12%) 49% 51%, transparent 51%),
    #16171b;
  & .pin {
    position: absolute;
    width: 0.8rem;
    height: 0.8rem;
    background: var(--text);
    border: 3px solid #16171b;
    border-radius: 50% 50% 50% 0;
    rotate: -45deg;
    box-shadow: 0 0 0 0 rgb(255 255 255 / 50%);
    animation: pin 2.4s ease-out infinite;
    &.a { top: 24%; left: 30%; }
    &.b { top: 56%; left: 62%; animation-delay: -0.6s; background: var(--gut); }
    &.c { top: 70%; left: 22%; animation-delay: -1.2s; }
    &.d { top: 34%; left: 74%; animation-delay: -1.8s; background: var(--marke-grau); }
  }
}
@keyframes pin { 70% { box-shadow: 0 0 0 0.9rem rgb(255 255 255 / 0%); } 100% { box-shadow: 0 0 0 0 rgb(255 255 255 / 0%); } }

/* Markenportal: Module und Plakat */
.bild-module-art { grid-template-columns: 1.3fr 1fr; }
.bild-plakat {
  display: grid;
  align-content: end;
  gap: 0.4rem;
  padding: 0.9rem;
  background: linear-gradient(160deg, #e9e9ec, #9b9aa1);
  border-radius: 10px;
  & b { width: 80%; height: 1rem; background: #111214; border-radius: 3px; }
  & em { width: 55%; height: 0.5rem; background: #3c3b40; border-radius: 3px; }
  & i { width: 1.4rem; height: 1.4rem; margin-top: 0.6rem; background: #111214; border-radius: 50%; }
}

/* tagung-reutlingen: Suche, Filter, Kacheln */
.bild-finder-art { align-content: start; }
.bild-suche {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--pille);
  & i { width: 0.9rem; height: 0.9rem; border: 2px solid var(--text-leise); border-radius: 50%; }
  & b { width: 40%; height: 0.45rem; background: var(--flaeche-stark); border-radius: 3px; }
}
.bild-pillen { display: flex; gap: 0.4rem; & span { width: 4rem; height: 1.3rem; background: var(--flaeche); border-radius: var(--pille); } & .an { background: var(--verlauf-knopf); } }
.bild-raster.drei { grid-template-columns: repeat(3, 1fr); }

/* CSA Office: Liste und Akte */
.bild-spalten { display: grid; grid-template-columns: 1fr 1.25fr; gap: 0.7rem; &.breit { grid-template-columns: 3rem 1fr; } }
.bild-akte {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.6rem;
  padding: 0.8rem;
  background: var(--flaeche);
  border-radius: 12px;
  & b { height: 0.5rem; background: var(--flaeche-stark); border-radius: 3px; }
  & .kurz { width: 60%; }
}
.bild-reiter { display: flex; gap: 0.35rem; margin-bottom: 0.4rem; & i { width: 2.6rem; height: 0.9rem; background: var(--linie); border-radius: var(--pille); } & .an { background: var(--marke-hell); } }
.bild-anruf {
  position: absolute;
  right: 0.8rem;
  bottom: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.8rem;
  font: 500 0.75rem / 1 var(--schrift-titel);
  color: #111214;
  background: var(--verlauf-knopf);
  border-radius: var(--pille);
  animation: schweben 1.4s ease-in-out infinite alternate;
  & i { width: 0.45rem; height: 0.45rem; background: var(--gut); border-radius: 50%; }
}

/* LEHScan: Kamera mit Scanlinie */
.bild-scan-art { grid-template-columns: 1.4fr 1fr; align-items: center; }
.bild-scan {
  position: relative;
  height: 100%;
  min-height: 12rem;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, #26262b, #121316);
  border-radius: 12px;
  & .ecke { position: absolute; width: 1.4rem; height: 1.4rem; border: 2px solid var(--text); }
  & .a { top: 12%; left: 14%; border-right: 0; border-bottom: 0; }
  & .b { top: 12%; right: 14%; border-left: 0; border-bottom: 0; }
  & .c { bottom: 12%; left: 14%; border-right: 0; border-top: 0; }
  & .d { bottom: 12%; right: 14%; border-left: 0; border-top: 0; }
  & .strahl { position: absolute; left: 14%; right: 14%; height: 2px; top: 12%; background: var(--gut); box-shadow: 0 0 18px 4px rgb(124 199 154 / 45%); animation: scannen 2.4s ease-in-out infinite alternate; }
}
@keyframes scannen { to { top: 88%; } }
.bild-teil { position: absolute; inset: 30% 28%; background: linear-gradient(135deg, #5a5960, #2c2c31); border-radius: 4px; box-shadow: inset 0 0 0 6px rgb(0 0 0 / 20%); }
.bild-zaehler { display: grid; gap: 0.3rem; & strong { font: 800 3.2rem / 1 var(--schrift-titel); letter-spacing: -0.04em; } & span { color: var(--text-leise); font-size: 0.9rem; } }

/* webT@X: Buchungen mit KI-Vorschlag */
.bild-buchung-art { align-content: center; }
.bild-vorschlag {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  justify-self: start;
  padding: 0.6rem 0.9rem;
  font: 500 0.82rem / 1 var(--schrift-titel);
  color: #111214;
  background: var(--verlauf-knopf);
  border-radius: var(--pille);
  animation: schweben 2s ease-in-out infinite alternate;
  & i { width: 0.5rem; height: 0.5rem; background: #111214; border-radius: 50%; }
}

/* KI-Assistent: Unterhaltung */
.bild-chat { display: grid; gap: 0.55rem; align-content: center; }
.bild-chat .blase {
  display: grid;
  gap: 0.35rem;
  padding: 0.7rem 0.9rem;
  max-width: 78%;
  background: var(--flaeche);
  border-radius: 14px;
  min-height: 2.2rem;
  & b { height: 0.45rem; background: var(--flaeche-stark); border-radius: 3px; }
  & .kurz { width: 60%; }
  &.ich { justify-self: end; width: 55%; background: var(--verlauf-knopf); }
  &.ich.kurz { width: 35%; }
  &.tippt { display: flex; gap: 0.3rem; width: fit-content; & i { width: 0.45rem; height: 0.45rem; background: var(--text-leise); border-radius: 50%; animation: tippt 1.2s ease-in-out infinite; } & i:nth-child(2) { animation-delay: 0.15s; } & i:nth-child(3) { animation-delay: 0.3s; } }
}
@keyframes tippt { 30% { translate: 0 -0.3rem; opacity: 1; } 60%, 100% { translate: 0 0; opacity: 0.5; } }

/* Fernwartung und Videocall */
.bild-video-art { align-content: center; }
.bild-dock {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  & i { width: 2rem; height: 2rem; background: var(--flaeche-stark); border-radius: 50%; }
  & .rot { background: var(--rot); }
}

/* VisionARCH: Übersicht */
.bild-seite { display: grid; align-content: start; gap: 0.5rem; padding: 0.5rem; background: var(--flaeche); border-radius: 10px; & i { height: 1.6rem; background: var(--flaeche-stark); border-radius: 6px; } & i:first-child { background: var(--marke-hell); } }
.bild-balken {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  height: 8rem;
  margin-top: 0.6rem;
  padding: 0.6rem;
  background: var(--flaeche);
  border-radius: 10px;
  & i { flex: 1; height: 40%; background: linear-gradient(180deg, var(--marke-hell), var(--marke-grau)); border-radius: 4px 4px 2px 2px; transform-origin: bottom; animation: balken 3s var(--kurve) infinite alternate; }
  & i:nth-child(2) { height: 65%; animation-delay: -0.3s; } & i:nth-child(3) { height: 50%; animation-delay: -0.6s; }
  & i:nth-child(4) { height: 85%; animation-delay: -0.9s; } & i:nth-child(5) { height: 60%; animation-delay: -1.2s; }
  & i:nth-child(6) { height: 75%; animation-delay: -1.5s; } & i:nth-child(7) { height: 45%; animation-delay: -1.8s; }
  & i:nth-child(8) { height: 90%; animation-delay: -2.1s; } & i:nth-child(9) { height: 70%; animation-delay: -2.4s; }
}
@keyframes balken { from { scale: 1 0.55; } }

/* Eventhandwerker: Waage */
.bild-waage-art { place-items: center; }
.bild-waage {
  display: grid;
  justify-items: center;
  gap: 0.8rem;
  & strong { font: 800 clamp(3.5rem, 6vw, 5.5rem) / 1 var(--schrift-titel); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
  & small { margin-left: 0.4rem; font-size: 0.35em; font-weight: 500; color: var(--text-leise); letter-spacing: 0; }
  & span { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text-leise); }
}

/* Kickerkönig: Spielfeld */
.bild-kicker {
  position: relative;
  border-radius: 12px;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), rgb(255 255 255 / 25%) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    radial-gradient(circle at 50% 50%, transparent 2.4rem, rgb(255 255 255 / 25%) 2.4rem calc(2.4rem + 2px), transparent calc(2.4rem + 2px)),
    linear-gradient(135deg, #2b2c30, #1a1b1e);
  border: 2px solid rgb(255 255 255 / 18%);
  & .stange { position: absolute; top: -2px; bottom: -2px; width: 3px; background: linear-gradient(180deg, #8d8b93, #4a4950); }
  & .a { left: 14%; } & .b { left: 36%; } & .c { left: 62%; } & .d { left: 84%; }
  & .ball { position: absolute; top: 45%; left: 20%; width: 0.9rem; height: 0.9rem; background: #fff; border-radius: 50%; box-shadow: 0 0 14px rgb(255 255 255 / 60%); animation: ball 3.2s ease-in-out infinite; }
}
@keyframes ball { 25% { left: 70%; top: 20%; } 50% { left: 45%; top: 72%; } 75% { left: 80%; top: 55%; } }


/* Kontakt */
.kontakt-raster {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 1.5rem;
  align-items: start;
}
.kontakt-wege { display: grid; gap: 1rem; }
.kontakt-weg {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1.1rem;
  row-gap: 0.2rem;
  padding: 1.5rem;
  border-radius: var(--rund-l);
  & .zeichen { grid-row: span 3; }
  & h2 { font: 600 0.75rem / 1.4 var(--schrift-titel); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-leise); }
  & a, & strong { font: 600 1.25rem / 1.3 var(--schrift-titel); letter-spacing: -0.01em; }
  & p { color: var(--text-leise); }
}
.kontakt-hinweis { padding: 1.5rem; border-radius: var(--rund-l); color: var(--text-2); & strong { color: var(--text); } }

.formular {
  display: grid;
  gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2.75rem);
  border-radius: var(--rund-xl);
  & form { display: grid; gap: 1rem; }
  & h2 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 0.5rem; }
}
.formular-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.feld {
  position: relative;
  display: block;
  & input, & select, & textarea {
    display: block;
    width: 100%;
    min-height: 3.6rem;
    padding: 1.45rem 1rem 0.5rem;
    font-size: 1.05rem;
    color: var(--text);
    background: rgb(0 0 0 / 22%);
    border: 1px solid var(--linie);
    border-radius: var(--rund-s);
    outline: none;
    transition: border-color var(--dauer), background var(--dauer), box-shadow var(--dauer);
    &:focus { border-color: var(--linie-stark); background: rgb(0 0 0 / 32%); box-shadow: 0 0 0 4px rgb(255 255 255 / 6%); }
  }
  & textarea { min-height: 10rem; resize: vertical; line-height: 1.5; }
  & select { appearance: none; padding-right: 2.5rem; background-image: linear-gradient(45deg, transparent 50%, var(--text-leise) 50%), linear-gradient(135deg, var(--text-leise) 50%, transparent 50%);
    background-position: calc(100% - 1.3rem) 1.65rem, calc(100% - 1rem) 1.65rem; background-size: 0.3rem 0.3rem; background-repeat: no-repeat; }
  & option { color: #111214; }
  /* Schwebende Beschriftung: liegt im Feld und steigt beim Tippen nach oben */
  & span {
    position: absolute;
    top: 1.15rem;
    left: 1rem;
    font-size: 1.05rem;
    color: var(--text-leise);
    pointer-events: none;
    transform-origin: 0 0;
    transition: transform 250ms var(--kurve), color 250ms;
  }
  & :focus + span, & :not(:placeholder-shown) + span, & select + span { transform: translateY(-0.7rem) scale(0.74); color: var(--text-2); }
}
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.5rem; }
.formular-hinweis { font-size: 0.9rem; color: var(--text-leise); & a { text-decoration: underline; text-underline-offset: 0.2em; } }
.meldung {
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding: 3rem 1rem;
  text-align: center;
  & .zeichen { width: 4.5rem; height: 4.5rem; border-radius: 50%; & .icon { width: 2rem; height: 2rem; } }
  & h2 { font-size: 2rem; }
  & p { color: var(--text-2); }
  &.gut .zeichen { color: var(--gut); }
}
.fehler-zeile { display: flex; align-items: center; gap: 0.6rem; padding: 0.9rem 1.1rem; color: var(--rot); background: rgb(232 132 122 / 10%); border-radius: var(--rund-s); }

/* Impressum und Datenschutz */
.recht {
  display: grid;
  gap: 1rem;
  max-width: 52rem;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  border-radius: var(--rund-xl);
  color: var(--text-2);
  & h2 { margin-top: 1.5rem; font-size: 1.5rem; font-weight: 650; letter-spacing: -0.02em; color: var(--text); }
  & h2:first-child { margin-top: 0; }
  & a { text-decoration: underline; text-decoration-color: var(--linie-stark); text-underline-offset: 0.2em; &:hover { text-decoration-color: currentColor; } }
  & ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.35rem; }
  & address { font-style: normal; }
  & strong { color: var(--text); }
}
.recht-kasten { display: flex; gap: 0.9rem; align-items: flex-start; padding: 1.1rem 1.25rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); & .icon { margin-top: 0.15rem; color: var(--gut); } }
.recht-stand { margin-top: 2rem; font-size: 0.85rem; color: var(--text-ganz-leise); }

/* 404 */
.fehlerseite {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: 8rem var(--rand) 4rem;
  text-align: center;
}
.fehlerseite-innen { display: grid; justify-items: center; gap: 1.5rem; }
.fehler-code {
  font: 800 clamp(8rem, 30vw, 22rem) / 0.8 var(--schrift-titel);
  letter-spacing: -0.08em;
  color: transparent;
  -webkit-text-stroke: 2px var(--marke-grau);
}
.fehler-terminal { padding: 1rem 1.25rem; font: 400 0.95rem / 1.7 var(--schrift-mono); text-align: left; color: var(--text-leise); border-radius: var(--rund); }

/* ---------- Fenster und Terminal ---------- */

/* Fenster liegen in der obersten Ebene und bleiben fest im Bild. Der Glas-Baustein setzt position: relative, das
   würde sie an den Anfang der Seite schieben und dorthin scrollen. */
dialog { color: var(--text); }
dialog.glas { position: fixed; }
/* Den eigenen Zeiger verdecken Fenster und das Feld Barrierefreiheit (oberste Ebene); solange eines offen ist, gilt
   der normale */
.zeiger-an:has(dialog[open], [popover]:popover-open) {
  & .zeiger { display: none; }
  & :is(dialog, [popover]) { cursor: auto; }
  & :is(dialog, [popover]) :is(a, button) { cursor: pointer; }
  & :is(dialog, [popover]) :is(input, textarea) { cursor: text; }
}
dialog::backdrop { background: rgb(5 5 7 / 62%); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.fenster {
  width: min(100% - 2rem, 34rem);
  max-height: calc(100dvh - 2rem);
  padding: clamp(1.75rem, 4vw, 3rem);
  border: 0;
  border-radius: var(--rund-xl);
  background-color: var(--glas-stark);
  &[open] { display: grid; gap: 1rem; justify-items: start; animation: fenster-auf 450ms var(--feder); }
  & h3 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.04em; }
  & p { font-size: 1.15rem; color: var(--text-2); }
}
@keyframes fenster-auf { from { opacity: 0; scale: 0.92; translate: 0 1rem; } }
.fenster-zu {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 50%;
  cursor: pointer;
  &:hover { background: var(--flaeche-stark); }
}

.terminal {
  width: min(100% - 2rem, 48rem);
  height: min(32rem, calc(100dvh - 4rem));
  padding: 0;
  border: 0;
  border-radius: var(--rund-l);
  background-color: rgb(14 15 18 / 86%);
  font: 400 0.92rem / 1.65 var(--schrift-mono);
  &[open] { display: grid; grid-template-rows: auto 1fr auto; animation: fenster-auf 400ms var(--feder); }
}
.terminal-leiste {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 0.7rem 0.7rem 1rem;
  font-size: 0.8rem;
  color: var(--text-leise);
  border-bottom: 1px solid var(--linie);
  & > span:nth-child(2) { flex: 1; text-align: center; }
}
.terminal-punkte { display: flex; gap: 0.4rem; & i { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--linie-stark); } }
.terminal-zu { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; background: none; border: 0; border-radius: 8px; cursor: pointer; color: var(--text-leise); &:hover { background: var(--flaeche); color: var(--text); } }
.terminal-ausgabe {
  overflow-y: auto;
  padding: 1rem 1.25rem 0.5rem;
  color: var(--text-2);
  scrollbar-width: thin;
  & p { white-space: pre-wrap; word-break: break-word; }
  & .eingabe { color: var(--text); }
  & .eingabe::before { content: "besucher@mpmedia:~$ "; color: var(--gut); }
  & .gut { color: var(--gut); }
  & .leise { color: var(--text-leise); }
  & a { text-decoration: underline; text-underline-offset: 0.2em; }
}
.terminal-eingabe {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1.25rem 1rem;
  & input { flex: 1; min-width: 0; padding: 0.3rem 0; color: var(--text); background: none; border: 0; outline: none; font: inherit; caret-color: var(--text); }
}
.terminal-prompt { color: var(--gut); white-space: nowrap; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.25rem;
  font: 500 0.95rem / 1 var(--schrift-titel);
  border-radius: var(--pille);
  translate: -50% 0;
  animation: toast 3s var(--kurve) both;
  & .icon { color: var(--gut); }
}
@keyframes toast { 0% { opacity: 0; translate: -50% 1rem; } 12%, 85% { opacity: 1; translate: -50% 0; } 100% { opacity: 0; translate: -50% 0.5rem; } }

/* ---------- Marlene, die KI-Assistentin unten links (js/marlene.js) ---------- */

.marlene {
  position: fixed;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 56;
  display: grid;
  justify-items: start;
  gap: 0.75rem;
}
.marlene-knopf {
  position: relative;
  width: 5rem;
  height: 5rem;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  filter: drop-shadow(0 12px 22px rgb(0 0 0 / 55%));
  transition: transform 500ms var(--feder);
  &:hover { transform: scale(1.08) rotate(-6deg); }
  /* Weicher Schein hinter dem Kopf */
  &::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgb(198 199 200 / 35%), transparent 70%); filter: blur(10px); animation: atmen 4s ease-in-out infinite alternate; }
  .offen & { transform: scale(0.9); }
}
.marlene-gross, .marlene-klein { position: relative; display: block; width: 100%; height: 100%; }
.marlene-klein { flex: none; width: 2.9rem; height: 2.9rem; }

.m-gesicht { display: block; width: 100%; height: 100%; overflow: visible; }
.m-koerper { transform-box: fill-box; transform-origin: 50% 90%; animation: m-schweben 3.2s ease-in-out infinite alternate; }
@keyframes m-schweben { to { transform: translateY(-4px) rotate(2deg); } }
.m-augen { transform: translate(var(--blick-x, 0), var(--blick-y, 0)); transition: transform 180ms ease-out; }
.m-auge { transform-box: fill-box; transform-origin: center; animation: m-blinzeln 5.5s infinite; filter: drop-shadow(0 0 3px rgb(255 255 255 / 80%)); }
.m-auge + .m-auge { animation-delay: 0.04s; }
@keyframes m-blinzeln { 0%, 93%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
.m-froh { opacity: 0; transition: opacity 200ms; }
.m-mund { transform-box: fill-box; transform-origin: center; }
.m-antenne { animation: m-funken 2.4s ease-in-out infinite; }
@keyframes m-funken { 50% { fill: #b9f2cf; filter: drop-shadow(0 0 4px #7cc79a); } }
.m-schleife { transform-box: fill-box; }
/* Freut sich, wenn man drüberfährt oder der Chat offen ist */
.marlene-knopf:hover .m-augen, .offen .marlene-gross .m-augen { opacity: 0; }
.marlene-knopf:hover .m-froh, .offen .marlene-gross .m-froh { opacity: 1; }
.marlene-knopf:hover .m-schleife { animation: m-wackeln 600ms ease-in-out 2; }
@keyframes m-wackeln { 50% { rotate: 18deg; } }
/* Denkt nach: Augen nach oben, Antenne blinkt schnell */
.denkt .m-augen { transform: translate(3px, -5px); }
.denkt .m-antenne { animation-duration: 0.5s; }
/* Spricht: der Mund geht auf und zu */
.spricht .m-mund { animation: m-sprechen 260ms ease-in-out infinite alternate; }
@keyframes m-sprechen { to { transform: scaleY(-0.6) translateY(2px); } }

.marlene-teaser {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  max-width: 17rem;
  margin: 0 0 0 0.75rem;
  padding: 0.85rem 0.6rem 0.85rem 1rem;
  font-size: 0.95rem;
  color: var(--text-2);
  border-radius: 18px 18px 18px 4px;
  animation: hereinkommen 600ms var(--feder);
  & strong { color: var(--text); }
}
.marlene-teaser-zu { flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; padding: 0; color: var(--text-leise); background: none; border: 0; border-radius: 50%; cursor: pointer; &:hover { color: var(--text); background: var(--flaeche); } & .icon { width: 1rem; height: 1rem; } }

.marlene-fenster.glas {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  width: min(25rem, 100vw - 2.5rem);
  height: min(38rem, 100dvh - 9.5rem);
  border-radius: var(--rund-l);
  background-color: var(--glas-stark);
  overflow: hidden;
  transform-origin: 2rem 100%;
  animation: marlene-auf 450ms var(--feder);
  &[hidden] { display: none; }
}
@keyframes marlene-auf { from { opacity: 0; scale: 0.85; translate: 0 1rem; } }
.marlene-kopf {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 0.85rem 0.85rem 1rem;
  border-bottom: 1px solid var(--linie);
}
.marlene-wer { flex: 1; display: grid; gap: 0.15rem; & strong { font: 700 1.1rem / 1.1 var(--schrift-titel); } & small { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--text-leise); } & .punkt { width: 0.4rem; height: 0.4rem; } }
.marlene-rund { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; padding: 0; color: var(--text-leise); background: none; border: 0; border-radius: 50%; cursor: pointer; &:hover { color: var(--text); background: var(--flaeche); } & .icon { width: 1.1rem; height: 1.1rem; } }
.marlene-verlauf {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.m-blase {
  max-width: 88%;
  margin: 0;
  padding: 0.7rem 0.95rem;
  font-size: 0.98rem;
  line-height: 1.5;
  border-radius: 18px;
  animation: hereinkommen 350ms var(--kurve);
  &.von-marlene { align-self: flex-start; color: var(--text-2); background: var(--flaeche); border-bottom-left-radius: 5px; }
  &.von-ich { align-self: flex-end; color: #111214; background: var(--verlauf-knopf); border-bottom-right-radius: 5px; }
  & a { color: var(--text); text-decoration: underline; text-underline-offset: 0.2em; }
  & strong { color: var(--text); }
  &.tippt { display: flex; gap: 0.3rem; padding: 0.9rem 1rem; & i { width: 0.45rem; height: 0.45rem; background: var(--text-leise); border-radius: 50%; animation: tippt 1.2s ease-in-out infinite; } & i:nth-child(2) { animation-delay: 0.15s; } & i:nth-child(3) { animation-delay: 0.3s; } }
}
@keyframes tippt { 30% { translate: 0 -0.3rem; opacity: 1; } 60%, 100% { translate: 0 0; opacity: 0.5; } }
.marlene-vorschlaege {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0 1rem 0.75rem;
  & button { padding: 0.45rem 0.8rem; font: 500 0.85rem / 1.2 var(--schrift-titel); color: var(--text-2); background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--pille); cursor: pointer; transition: background var(--dauer), color var(--dauer); &:hover { color: var(--text); background: var(--flaeche-stark); } }
}
.marlene-eingabe {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  margin: 0 0.75rem;
  padding: 0.4rem 0.4rem 0.4rem 0.9rem;
  background: rgb(0 0 0 / 25%);
  border: 1px solid var(--linie);
  border-radius: 20px;
  &:focus-within { border-color: var(--linie-stark); }
  & textarea { flex: 1; min-width: 0; max-height: 140px; padding: 0.45rem 0; font-size: 1rem; line-height: 1.4; color: var(--text); background: none; border: 0; outline: none; resize: none; }
}
.marlene-senden { display: grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem; padding: 0; color: #111214; background: var(--verlauf-knopf); border: 0; border-radius: 50%; cursor: pointer; & .icon { width: 1.1rem; height: 1.1rem; } }
.marlene-hinweis { padding: 0.6rem 1rem 0.8rem; font-size: 0.75rem; color: var(--text-ganz-leise); & a { text-decoration: underline; } }

/* ---------- Nach oben, unten rechts ---------- */

.nach-oben {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 55;
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  color: var(--text);
  border-radius: 50%;
  opacity: 0;
  translate: 0 1.5rem;
  pointer-events: none;
  transition: opacity 300ms, translate 450ms var(--feder);
  &.da { opacity: 1; translate: 0 0; pointer-events: auto; }
  & .icon { position: relative; z-index: 2; width: 1.3rem; height: 1.3rem; transition: translate 300ms var(--feder); }
  &:hover .icon { translate: 0 -3px; }
}
.nach-oben-ring {
  position: absolute;
  inset: -1px;
  z-index: 2;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  rotate: -90deg;
  & circle { fill: none; stroke: var(--linie); stroke-width: 2; }
  & .nach-oben-stand { stroke: var(--marke-hell); stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--anteil, 0) * 100); stroke-linecap: round; }
}
html.menue-offen :is(.marlene, .nach-oben) { display: none; }

/* Übergang zwischen den Seiten: weich ausblenden, die neue Seite kommt leicht von unten */
::view-transition-old(root) { animation: 300ms var(--kurve) both seite-weg; }
::view-transition-new(root) { animation: 500ms var(--kurve) both seite-her; }
@keyframes seite-weg { to { opacity: 0; filter: blur(6px); scale: 0.985; } }
@keyframes seite-her { from { opacity: 0; translate: 0 1.5rem; filter: blur(6px); } }

/* ---------- Bis Laptop ---------- */

@media (max-width: 1180px) {
  .kopf-nav a { padding-inline: 0.65rem; }
  .kopf-terminal kbd { display: none; }
  .werkzeuge, .leistungen-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Tablet und Handy ---------- */

@media (max-width: 900px) {
  .kopf { padding-top: 0.75rem; }
  .kopf-leiste { padding: 0.45rem 0.45rem 0.45rem 1rem; }
  .kopf-nav, .kopf-terminal { display: none; }
  .barriere.glas { inset: 5.5rem 1rem auto auto; }
  .marlene { left: 0.75rem; bottom: 0.75rem; }
  .marlene-knopf { width: 4rem; height: 4rem; }
  .nach-oben { right: 0.75rem; bottom: 0.9rem; }
  .marlene-fenster.glas { width: calc(100vw - 1.5rem); height: calc(100dvh - 11.5rem); }
  .marlene.offen ~ .nach-oben { display: none; }
  .kopf-menue { display: block; }
  .kopf-logo img, .kopf.klein .kopf-logo img { width: 9.5rem; }

  .held { grid-template-columns: minmax(0, 1fr); align-items: start; padding-top: 6.5rem; min-height: auto; gap: 0; }
  .held-text { padding-bottom: 2rem; gap: 1.4rem; }
  .held-titel { font-size: clamp(2.6rem, 16vw, 6rem); }
  .held-tipp { display: none; }
  .held-bild { width: min(100%, 24rem); }

  .ueber-unten, .kontakt-raster { grid-template-columns: minmax(0, 1fr); }
  .zahlen { grid-template-columns: minmax(0, 1fr); }
  .zahl-block + .zahl-block { border-left: 0; border-top: 1px solid var(--linie); }

  .stapel-karte { grid-template-columns: minmax(0, 1fr); min-height: 0; top: 5.5rem;
    &:nth-child(2) { top: 6.25rem; } &:nth-child(3) { top: 7rem; } &:nth-child(4) { top: 7.75rem; }
    &:nth-child(5) { top: 8.5rem; } &:nth-child(6) { top: 9.25rem; } }
  .stapel-kopf { margin-bottom: 1.25rem; }
  .stapel-karte h2 { font-size: clamp(min(1.9rem, 8.5vw), 8.5vw, 2.6rem); }
  .szene { min-height: 15rem; }


  .formular-zeile { grid-template-columns: minmax(0, 1fr); }
  .projekt-raster, .projekt-geschichte, .projekt-weiter, .galerie, .schritte-liste, .hilfe-karten { grid-template-columns: minmax(0, 1fr); }
  .dienst-held { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 7rem; }
  .fw-blase.zwei { left: 0; }
  .galerie-fenster.fenster[open] { grid-template-columns: 1fr 1fr; padding-top: 4rem; }
  .galerie-fenster figure { grid-column: 1 / -1; grid-row: 1; }
  .galerie-fenster figcaption { padding: 0; }
  .galerie-fenster.fenster img, .galerie-fenster.fenster.hoch img { max-height: calc(100dvh - 13rem); }
  .galerie-lupe { opacity: 1; scale: 1; }
  .punkte-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .projekt-held { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 7rem; }
  .hilfe-karte { grid-template-columns: auto 1fr; & > .icon { display: none; } }
  .projekt-held-bild .bild-innen { height: 15rem; }
  .handy { right: 0; width: 30%; }
  .fuss-spalten { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  html { font-size: 1rem; }
  html.gross { font-size: 1.15rem; }
  html.gross .werkzeuge { grid-template-columns: minmax(0, 1fr); }
  .werkzeuge { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .leistungen-raster, .punkte-raster { grid-template-columns: minmax(0, 1fr); }
  .projekt-daten div { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .projekt-karte-bild .bild-innen { height: 13rem; }
  .bild-karte-art, .bild-module-art, .bild-scan-art { grid-template-columns: minmax(0, 1fr); }
  .bild-karte-art .bild-liste, .bild-module-art .bild-plakat, .bild-zaehler { display: none; }
  .werkzeug-karte { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 0.7rem; padding: 1rem;
    & strong { margin-top: 0; font-size: 1rem; } & .werkzeug-mehr { display: none; } }
  .vertrauen-pille { border-radius: var(--rund); }
  .weg { width: 100%; font-size: 1rem; }
  .schluss-wege { width: 100%; }
  .fuss-spalten { grid-template-columns: minmax(0, 1fr); }
  .laufband-spur span { font-size: 2.4rem; }
}

/* ---------- Einstellungen zur Barrierefreiheit (js/einstellungen.js) ---------- */

html.gross { font-size: 1.25rem; }
html.ruhe {
  scroll-behavior: auto;
  & *, & ::before, & ::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  & .auftauchen { opacity: 1 !important; translate: none !important; filter: none !important; }
  & .korn { display: none; }
  & .wort { opacity: 1 !important; }
  & .m-augen { transform: none !important; }
}
html.kontrast {
  --text-2: #ffffff;
  --text-leise: #dcdbe0;
  --text-ganz-leise: #c9c8cd;
  --glas: rgb(16 17 20 / 94%);
  --glas-stark: rgb(16 17 20 / 98%);
  --linie: rgb(255 255 255 / 30%);
  --linie-stark: rgb(255 255 255 / 48%);
  background: #000;
  & .himmel, & .netz, & .korn { display: none; }
  & .wort { opacity: 1 !important; }
}

/* ---------- Ohne Bewegung: alles steht sofort da ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, ::before, ::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  .auftauchen { opacity: 1 !important; translate: none !important; filter: none !important; }
  .korn { display: none; }
}