@import url("../fonts/fonts.css");

:root {
  --grund: #090c11;
  --grund-2: #161d28;
  --flaeche-hoch: #222b39;
  --flaeche: #141b25;
  --flaeche-2: #1a2330;
  --linie: #232e3d;
  --linie-hell: #31404f;
  --text: #e9eef4;
  --text-2: #9aa7b6;
  --text-3: #8593a3;
  --cyan: #22b8f0;
  --cyan-hell: #6fd8ff;
  --cyan-tief: #0a3b52;
  --signal: #f0a02a;
  --knopf-text: #04222f;
  --bahn: #1d3a4c;
  --stopp: #0b2b3a;
  --leuchten: #eafaff;
  --geraet: #1a1e25;
  --geraet-kante: #2c333d;
  --geraet-hell: #232932;
  --geraet-tief: #141920;
  --geraet-huelle: #10141a;
  --schirm: #0d1219;
  --punkt-inaktiv: #2f3d4d;
  --platzhalter: #223442;
  --platzhalter-2: #16202b;

  --display: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --breite: 1280px;
  --rand: 44px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* clip statt hidden: hidden macht aus dem Körper einen Scroll-Behälter und
     kann das Kleben der Kopfzeile stören. clip kappt nur. */
  overflow-x: clip;
}

h1, h2, h3, h4 { font-family: var(--display); margin: 0; letter-spacing: -0.025em; font-weight: 600; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; display: block; }
a { color: var(--cyan); text-decoration: none; transition: color 0.18s ease; }
a:hover { color: var(--cyan-hell); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan); }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 12px 24px; border-radius: 3px;
  font-size: 16px; font-weight: 600; border: 1px solid transparent;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.knopf-haupt { background: var(--cyan); color: var(--knopf-text); box-shadow: 0 0 0 rgba(34,184,240,0); }
.knopf-haupt:hover { background: var(--cyan-hell); color: var(--knopf-text); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(34,184,240,0.28); }
.knopf-rand { border-color: var(--linie-hell); color: var(--text); font-weight: 500; }
.knopf-rand:hover { border-color: var(--cyan); color: var(--text); transform: translateY(-2px); }

/* Kopfzeile */
.kopf { position: sticky; top: 0; z-index: 40; background: rgba(9,12,17,0.82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--linie); }
.kopf-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: var(--breite); margin: 0 auto; padding: 8px var(--rand); position: relative; }
.marke-logo img, .marke-logo .logo-svg { height: 52px; width: auto; transition: height 0.25s ease; }
/* Kopfzeile behält beim Scrollen ihre Höhe. Ein schrumpfendes Logo ließ sie springen. */
.kopf .knopf { min-height: 42px; padding: 8px 20px; font-size: 15px; }
.marke-logo { display: block; position: relative; color: var(--cyan); }
.marke-logo svg { width: 100%; height: auto; }
.nav { display: flex; align-items: center; gap: 28px; font-size: 16px; }
.nav a { color: var(--text-2); position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -5px; height: 1px; background: var(--cyan); transition: right 0.25s ease; }
.nav a:hover { color: var(--text); }
.nav a:hover::after { right: 0; }
.nav a.aktiv { color: var(--text); }
.nav a.aktiv::after { right: 0; background: var(--cyan); }
.kopf-aktion { display: flex; align-items: center; gap: 12px; }
.kopf-tel { font-size: 16px; color: var(--text-2); white-space: nowrap; }
.kopf-tel:hover { color: var(--text); }
.icon-knopf { display: none; width: 48px; height: 48px; align-items: center; justify-content: center; background: none; border: 1px solid var(--linie-hell); border-radius: 3px; color: var(--text); cursor: pointer; }

/* Hero */
.hero { position: relative; padding: 92px 0 84px; overflow: hidden; }
.platine { position: absolute; inset: 0; z-index: 0; opacity: 0.55; pointer-events: none; }
.platine svg { width: 100%; height: 100%; }
.platine .bahn { fill: none; stroke: var(--bahn); stroke-width: 1.2; }
.platine .puls { fill: none; stroke: var(--cyan); stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 90 1400; filter: drop-shadow(0 0 6px rgba(34,184,240,0.8));
  animation: fliessen 9s linear infinite; }
.platine .puls:nth-of-type(2) { animation-duration: 12s; animation-delay: -3s; }
.platine .puls:nth-of-type(3) { animation-duration: 15s; animation-delay: -7s; }
.platine .puls:nth-of-type(4) { animation-duration: 11s; animation-delay: -5s; }
.platine .knoten { fill: var(--cyan); opacity: 0.35; animation: blinken 4s ease-in-out infinite; }
.platine .knoten:nth-of-type(even) { animation-delay: -2s; }
@keyframes fliessen { from { stroke-dashoffset: 1490; } to { stroke-dashoffset: 0; } }
@keyframes blinken { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.9; } }

.hero-raster { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(36px, 4.2vw, 57px); line-height: 1.04; font-weight: 700; margin: 16px 0 24px; }
.hero h1 em { font-style: normal; color: var(--cyan); }
.hero-text { font-size: 19px; color: var(--text-2); max-width: 31em; }
.hero-aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-marke { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--linie); font-size: 14px; color: var(--text-3); }
.hero-marke b { color: var(--text-2); font-weight: 500; }

/* Fensterrahmen für Screenshots */
.fenster { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.55); }
.fenster-leiste { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--flaeche-2); border-bottom: 1px solid var(--linie); }
.fenster-leiste i { width: 9px; height: 9px; border-radius: 50%; background: var(--punkt-inaktiv); display: block; }
.fenster-leiste span { margin-left: 8px; font-family: var(--mono); font-size: 12px; color: var(--text-3); letter-spacing: 0.05em; }
.fenster-bild { position: relative; aspect-ratio: 614 / 410; background: var(--schirm); }
.fenster-bild .folie { position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s ease; pointer-events: none; }
.fenster-bild .folie.an { opacity: 1; }
.fenster-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.karte-folie { position: absolute; inset: 0; }
.karte-folie img { object-fit: cover !important; object-position: center !important; }
.karte-schicht { position: absolute; inset: 0; width: 100%; height: 100%; }
.karte-route-grund { fill: none; stroke: rgba(34,184,240,0.3); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 4 7; }
.karte-route { fill: none; stroke: var(--cyan); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 7px rgba(34,184,240,0.85)); }
.karte-stopp .kern { fill: var(--stopp); stroke: var(--cyan); stroke-width: 2.4; transition: fill 0.4s ease; }
.karte-stopp.erledigt .kern { fill: var(--cyan); }
.karte-stopp .welle { fill: none; stroke: var(--cyan); stroke-width: 2; opacity: 0; }
.karte-stopp.hier .welle { animation: welleAus 1.5s ease-out infinite; }
@keyframes welleAus { 0% { r: 7; opacity: 0.9; } 100% { r: 24; opacity: 0; } }
.karte-wagen { fill: var(--leuchten); filter: drop-shadow(0 0 9px rgba(34,184,240,1)); }

.tour-panel {
  position: absolute; right: 14px; top: 14px; left: auto; bottom: auto;
  width: min(380px, 55%);
  background: rgba(7,10,15,0.9); border: 1px solid var(--linie); border-radius: 5px;
  padding: 12px 16px 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline;
}
.tour-kopf { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3); }
.tour-status { color: var(--cyan-hell); border: 1px solid rgba(34,184,240,0.45); border-radius: 999px; padding: 1px 8px; }
.tour-stopp { font-family: var(--display); font-size: 16px; font-weight: 600; color: var(--text); }
.tour-zeit { font-family: var(--mono); font-size: 14px; color: var(--cyan-hell); }
.tour-werte { grid-column: 1 / -1; display: flex; gap: 16px; font-size: 13px; color: var(--text-2); flex-wrap: wrap; margin-top: 2px; }
.tour-werte b { color: var(--text); font-weight: 600; }
.tour-balken { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--linie); overflow: hidden; margin-top: 8px; }
.tour-balken i { display: block; height: 100%; width: 0; background: var(--cyan); transition: width 0.5s ease; }
.tour-demo { grid-column: 1 / -1; font-size: 12px; color: var(--text-3); margin-top: 8px; }

/* Handy-Reihe */
.handys { display: flex; align-items: flex-end; justify-content: center; gap: 16px; }
.handy { position: relative; width: 210px; flex-shrink: 0; filter: drop-shadow(0 24px 50px rgba(0,0,0,0.6)); }
.handy .folie { position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s ease; }
.handy .folie.an { opacity: 1; position: relative; }
.handy img { width: 100%; height: auto; display: block; }
.handy-gross { width: 250px; }

/* Punkte-Navigation */
.punkte { display: flex; gap: 8px; margin-top: 16px; }
.punkte button { width: 26px; height: 4px; border: 0; border-radius: 2px; background: var(--linie-hell); cursor: pointer; padding: 0; transition: background-color 0.25s ease, width 0.25s ease; }
.punkte button.an { background: var(--cyan); width: 40px; }

/* Abschnitte */
.abschnitt { padding: 84px 0; position: relative; }
.marke-abschnitt { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; }
.marke-abschnitt span { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; color: var(--text-3); white-space: nowrap; }
.marke-abschnitt span b { color: var(--cyan); font-weight: 400; }
.marke-abschnitt i { display: block; height: 1px; flex-grow: 1; background: linear-gradient(90deg, var(--linie) 0%, rgba(35,46,61,0) 100%); }
.abschnitt-tief { background: var(--grund-2); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.abschnitt-kopf { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 44px; align-items: end; margin-bottom: 48px; }
.abschnitt-kopf h2 { font-size: clamp(28px, 3.1vw, 42px); line-height: 1.07; margin-top: 16px; }
.abschnitt-kopf p { color: var(--text-2); font-size: 16px; }

/* Marken-Laufband */
.marken { border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); background: var(--grund-2); padding: 24px 0; }
.marken-inner { display: flex; align-items: center; gap: 44px; flex-wrap: wrap; }
.marken .mono { white-space: nowrap; color: var(--text-3); }
.marken b { font-family: var(--display); font-size: 17px; font-weight: 600; color: var(--text-2); }

/* Werkschau */
.werk { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 60px; align-items: center; padding: 64px 0; border-bottom: 1px solid var(--linie); }
.werk:last-child { border-bottom: 0; }
.werk.gedreht .werk-medien { order: 2; }
.werk-info h3 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.08; margin: 12px 0 16px; }
.werk-info > p { color: var(--text-2); font-size: 16px; }
.fakten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.fakt { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 4px; padding: 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.fakt b { font-family: var(--display); font-size: 24px; font-weight: 700; color: var(--cyan); line-height: 1.1; }
.fakt span { font-size: 13px; color: var(--text-3); line-height: 1.4; }
.werk-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font-size: 16px; font-weight: 600; }

/* Modul-Umschalter */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.tabs button {
  font-family: var(--body); font-size: 14px; color: var(--text-2); cursor: pointer;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 999px;
  padding: 8px 16px; min-height: 40px; transition: all 0.2s ease;
}
.tabs button:hover { border-color: var(--linie-hell); color: var(--text); }
.tabs button.an { background: var(--cyan-tief); border-color: var(--cyan); color: var(--cyan-hell); }

/* Karten */
.raster-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 5px; padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; transition: border-color 0.25s ease, transform 0.25s ease; }
.karte:hover { border-color: var(--linie-hell); transform: translateY(-3px); }
.karte h3 { font-size: 21px; }
.karte p { font-size: 15px; color: var(--text-2); }
.karte svg { color: var(--cyan); }
.karte-betont { border-color: var(--signal); }
.karte-betont svg { color: var(--signal); }

/* Bestand, das USP-Feld */
.bestand { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.bestand div { border-left: 2px solid var(--cyan); padding: 4px 0 4px 16px; }
.bestand b { display: block; font-family: var(--display); font-size: 21px; font-weight: 600; margin-bottom: 4px; }
.bestand span { font-size: 15px; color: var(--text-2); }

/* Team */
.team-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.person { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 5px; padding: 24px; display: flex; align-items: center; gap: 16px; }
.person-krz { width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; background: var(--cyan-tief); color: var(--cyan-hell); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 600; font-size: 15px; }
.person b { font-family: var(--display); font-size: 17px; font-weight: 600; }

/* Kontakt */
.kontakt { background: linear-gradient(160deg, #0d2635 0%, #0a1721 60%, #090c11 100%); border-top: 1px solid var(--linie); }
.kontakt-raster { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 48px; align-items: center; }
.kontakt h2 { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.07; font-weight: 700; }
.kontakt p { color: var(--text-2); font-size: 17px; margin-top: 16px; max-width: 33em; }
.kontakt-knoepfe { display: flex; flex-direction: column; gap: 12px; }
.kontakt-knoepfe .knopf { justify-content: space-between; width: 100%; }
.kontakt-knoepfe small { color: var(--text-3); font-size: 14px; font-weight: 400; }

/* Fußzeile */
.fuss { background: var(--grund); border-top: 1px solid var(--linie); padding: 56px 0 40px; color: var(--text-3); }
.fuss-raster { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.fuss h4 { color: var(--text); font-size: 15px; margin-bottom: 12px; }
.fuss a, .fuss p { color: var(--text-3); font-size: 15px; }
.fuss a:hover { color: var(--cyan); }
.fuss ul { display: flex; flex-direction: column; gap: 8px; }
.fuss .marke-logo { width: 150px; margin-bottom: 16px; }
.fuss .marke-logo img { height: auto; width: 100%; }
.fuss-klein { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--linie); font-size: 14px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; }

/* Inhaltsseiten */
.doku { padding: 56px var(--rand) 76px; max-width: 780px; }
.doku h1 { font-size: 40px; margin-bottom: 24px; }
.doku h2 { font-size: 21px; margin: 36px 0 8px; }
.doku p, .doku li { color: var(--text-2); font-size: 16px; }
.doku ul { list-style: disc; padding-left: 24px; display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.doku p + p { margin-top: 12px; }
.doku mark { background: rgba(240,160,42,0.16); color: var(--signal); padding: 2px 4px; border-radius: 3px; }

.hinweis-proto { background: var(--signal); color: #1a1206; font-size: 14px; padding: 8px var(--rand); text-align: center; position: relative; z-index: 50; }
.hinweis-proto b { font-weight: 600; }

[data-para] { will-change: transform; }

/* Einblenden beim Scrollen */
.zeig { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease; }
.zeig.da { opacity: 1; transform: none; }
.zeig-2 { transition-delay: 0.09s; }
.zeig-3 { transition-delay: 0.18s; }
.zeig-4 { transition-delay: 0.27s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .zeig { opacity: 1; transform: none; transition: none; }
  .platine .puls, .platine .knoten { animation: none; }
  .karte-stopp .welle { animation: none !important; }
  .karte-route { stroke-dashoffset: 0; }
  [data-para] { transform: none !important; }
  .platine .puls { stroke-dasharray: none; opacity: 0.5; }
  * { transition-duration: 0.01ms !important; }
}

@media (max-width: 940px) {
  .werk, .hero-raster, .kontakt-raster, .abschnitt-kopf { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .werk.gedreht .werk-medien { order: 0; }
  .raster-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bestand { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .abschnitt-kopf { margin-bottom: 32px; }
}

/* Die Navigation trägt jetzt vier Seitenlinks. Ab hier klappt sie ins Menü.
   Das übrige Layout bleibt davon unberührt und wechselt weiterhin erst bei 860 px. */
@media (max-width: 1240px) {
  .nav { display: none; }
  .nav.offen { display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; left: 0; right: 0; top: 100%; background: var(--grund-2); border-bottom: 1px solid var(--linie); }
  .nav.offen a { padding: 16px var(--rand); border-top: 1px solid var(--linie); min-height: 50px; display: flex; align-items: center; }
  .nav.offen .nav-trenner { width: auto; height: 1px; background: var(--linie); margin: 4px 0; }
  .nav.offen .nav-seite { border: 0; border-top: 1px solid var(--linie); border-radius: 0; padding: 15px var(--rand); font-size: inherit; color: var(--text-2); }
  .nav.offen .nav-seite.aktiv { background: none; color: var(--cyan-hell); }
  .nav a::after { display: none; }
  .icon-knopf { display: flex; }
  .kopf-tel { display: none; }
}

@media (max-width: 860px) {
  :root { --rand: 22px; }
  .kopf-aktion .knopf-haupt { display: none; }
  .marke-logo img, .marke-logo .logo-svg { height: 46px; }
  .hero { padding: 56px 0 48px; }
  .abschnitt { padding: 56px 0; }
  .werk { padding: 44px 0; }
  .fuss-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-aktionen .knopf { flex-grow: 1; }
  .handy { width: 158px; }
  .handy-gross { width: 186px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .raster-3, .bestand { grid-template-columns: minmax(0, 1fr); }
  .fakten { grid-template-columns: minmax(0, 1fr); }
  .marke-logo img, .marke-logo .logo-svg { height: 42px; }
  .handy { width: 132px; }
  .handy-gross { width: 152px; }
}

/* Fenster und Handy nebeneinander */
.paar { display: grid; grid-template-columns: minmax(0, 1fr) 168px; gap: 24px; align-items: center; }
.paar .geraet-handy { width: 100%; filter: drop-shadow(0 20px 44px rgba(0,0,0,0.6)); }
@media (max-width: 560px) { .paar { grid-template-columns: minmax(0, 1fr) 124px; gap: 12px; } }

/* Zeitleiste */
.zeitleiste { position: relative; padding-left: 24px; }
.zeitleiste::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px;
  background: linear-gradient(180deg, var(--cyan) 0%, var(--linie) 85%, rgba(35,46,61,0) 100%); }
.stufe { position: relative; padding: 0 0 24px 0; }
.stufe::before { content: ""; position: absolute; left: -26px; top: 7px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--grund); border: 2px solid var(--cyan); }
.stufe:last-child { padding-bottom: 0; }
.stufe time { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan); }
.stufe h3 { font-size: 19px; margin: 4px 0 4px; }
.stufe p { font-size: 15px; color: var(--text-2); }
.stufe.wichtig::before { background: var(--cyan); box-shadow: 0 0 0 4px rgba(34,184,240,0.18); }

/* Modulraster */
.module { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.modul { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 4px; padding: 16px;
  display: flex; flex-direction: column; gap: 4px; }
.modul b { font-family: var(--display); font-size: 16px; font-weight: 600; }
.modul span { font-size: 14px; color: var(--text-2); line-height: 1.45; }
@media (max-width: 1100px) { .module { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .module { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .module { grid-template-columns: minmax(0, 1fr); } }

/* Unterseiten-Kopfbereich */
.unterseite-hero { padding: 64px 0 44px; }
.unterseite-hero h1 { font-size: clamp(34px, 4vw, 52px); line-height: 1.04; font-weight: 700; margin: 16px 0 16px; }
.unterseite-hero p { font-size: 19px; color: var(--text-2); max-width: 40em; }
.brotkrumen { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.brotkrumen a { color: var(--text-3); }
.brotkrumen a:hover { color: var(--cyan); }

/* Formular */
.formular { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; }
.formular .feld-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.formular .feld { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.formular label { font-size: 15px; color: var(--text-2); }
.formular label span { color: var(--cyan); }
.formular input[type="text"], .formular input[type="email"], .formular input[type="tel"], .formular textarea {
  font-family: var(--body); font-size: 16px; color: var(--text);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 3px;
  padding: 12px 16px; min-height: 50px; width: 100%;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.formular textarea { resize: vertical; line-height: 1.55; }
.formular input:focus, .formular textarea:focus { outline: none; border-color: var(--cyan); background: var(--flaeche-2); }
.formular .feld-haken { display: flex; gap: 12px; align-items: flex-start; margin: 0; }
.formular .feld-haken input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--cyan); flex-shrink: 0; }
.formular .feld-haken label { font-size: 15px; line-height: 1.55; }
.formular .honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular button { border: 0; cursor: pointer; }
.formular-meldung { margin-top: 24px; padding: 16px 16px; border-radius: 4px; font-size: 16px; }
.formular-meldung.gut { background: rgba(34,184,240,0.12); border: 1px solid rgba(34,184,240,0.45); color: var(--cyan-hell); }
.formular-meldung.schlecht { background: rgba(240,160,42,0.12); border: 1px solid rgba(240,160,42,0.45); color: var(--signal); }
@media (max-width: 640px) { .formular .feld-paar { grid-template-columns: minmax(0, 1fr); } }

/* ---- Geräterahmen, selbst gezeichnet, ohne Markenbezug ---- */

/* Monitor für Desktop-Anwendungen */
.geraet-monitor { display: flex; flex-direction: column; align-items: center; }
.geraet-monitor .schirm {
  width: 100%; background: var(--geraet); border: 1px solid var(--geraet-kante); border-radius: 10px;
  padding: 12px 12px 24px; position: relative;
  box-shadow: 0 26px 70px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
}
.geraet-monitor .schirm::after {
  content: ""; position: absolute; left: 50%; bottom: 9px; transform: translateX(-50%);
  width: 46px; height: 3px; border-radius: 2px; background: var(--geraet-kante);
}
.geraet-monitor .glas { position: relative; border-radius: 3px; overflow: hidden; background: var(--schirm); aspect-ratio: 16 / 10; }
.geraet-monitor .glas .folie { position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s ease; }
.geraet-monitor .glas .folie.an { opacity: 1; }
.geraet-monitor .glas img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.geraet-monitor .hals { width: 76px; height: 26px; background: linear-gradient(180deg, var(--geraet-hell) 0%, var(--geraet) 100%); }
.geraet-monitor .sockel { width: 190px; height: 9px; border-radius: 0 0 5px 5px;
  background: linear-gradient(180deg, var(--geraet-hell) 0%, var(--geraet-tief) 100%); box-shadow: 0 12px 26px rgba(0,0,0,0.5); }
.geraet-beschriftung { font-family: var(--mono); font-size: 12px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-3); text-align: center; margin-top: 16px; }

/* Browserfenster für Web-Anwendungen */
.geraet-browser { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; overflow: hidden;
  box-shadow: 0 26px 70px rgba(0,0,0,0.5); }
.geraet-browser .leiste { display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: var(--flaeche-2); border-bottom: 1px solid var(--linie); }
.geraet-browser .leiste i { width: 9px; height: 9px; border-radius: 50%; background: var(--punkt-inaktiv); display: block; flex-shrink: 0; }
.geraet-browser .adresse { flex-grow: 1; margin-left: 8px; background: var(--grund-2); border: 1px solid var(--linie);
  border-radius: 999px; padding: 4px 12px; font-family: var(--mono); font-size: 12px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.geraet-browser .glas { position: relative; aspect-ratio: 16 / 10; background: var(--schirm); }
.geraet-browser .glas .folie { position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s ease; }
.geraet-browser .glas .folie.an { opacity: 1; }
.geraet-browser .glas img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

/* Neutraler Handyrahmen, ohne Herstellerbezug */
.geraet-handy { position: relative; width: 210px; flex-shrink: 0; }
.geraet-handy .huelle {
  background: var(--geraet-huelle); border: 1px solid var(--geraet-kante); border-radius: 30px; padding: 8px;
  box-shadow: 0 22px 50px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05);
}
.geraet-handy .glas { position: relative; border-radius: 24px; overflow: hidden; background: var(--schirm); aspect-ratio: 9 / 19.5; }
.geraet-handy .glas .folie { position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s ease; }
.geraet-handy .glas .folie.an { opacity: 1; }
.geraet-handy .glas img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.geraet-handy .insel { position: absolute; top: 15px; left: 50%; transform: translateX(-50%);
  width: 62px; height: 15px; border-radius: 999px; background: var(--geraet-huelle); z-index: 2; }
.geraet-handy-gross { width: 248px; }

/* Apple-Aufnahmen: keine Zusätze, kein Schatten (Vorgabe von Apple) */
.apple-bild { filter: none !important; }
.apple-bild img { display: block; width: 100%; height: auto; }

@media (max-width: 860px) {
  .geraet-handy { width: 160px; }
  .geraet-handy-gross { width: 186px; }
  .geraet-monitor .sockel { width: 150px; }
}
@media (max-width: 560px) {
  .geraet-handy { width: 134px; }
  .geraet-handy-gross { width: 154px; }
}

/* ---- Barrierefreiheit ---- */

/* Sprunglink */
.sprung {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--cyan); color: var(--knopf-text); padding: 12px 20px; border-radius: 3px;
  font-weight: 600; font-size: 15px; transition: top 0.15s ease;
}
.sprung:focus { top: 12px; color: var(--knopf-text); }

/* Bewegungsschalter */
.ruhe-knopf { position: relative; }
.ruhe-knopf[aria-pressed="true"] { border-color: var(--cyan); color: var(--cyan-hell); }
.ruhe-knopf .an-symbol { display: none; }
.ruhe-knopf[aria-pressed="true"] .aus-symbol { display: none; }
.ruhe-knopf[aria-pressed="true"] .an-symbol { display: block; }

html.ruhig .platine .puls,
html.ruhig .platine .knoten,
html.ruhig .karte-stopp .welle,
html.ruhig .glanz { animation: none !important; }
html.ruhig .karte-wagen { display: none; }

/* Klickziele: mindestens 24 Pixel, auch wenn die Marke kleiner aussieht */
.punkte { gap: 4px; }
.punkte button {
  width: 34px; height: 26px; padding: 0; background: none; border: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.punkte button::before {
  content: ""; display: block; width: 26px; height: 4px; border-radius: 2px;
  background: var(--linie-hell); transition: background-color 0.25s ease, width 0.25s ease;
}
.punkte button.an::before { background: var(--cyan); width: 34px; }
.punkte button:hover::before { background: var(--text-3); }
.punkte button.an:hover::before { background: var(--cyan-hell); }

.fuss ul a, .fuss-klein a { display: inline-flex; align-items: center; min-height: 24px; }
.nav a { display: inline-flex; align-items: center; min-height: 24px; }
.fuss .fuss-titel { font-family: var(--display); color: var(--text); font-size: 15px; font-weight: 600; margin-bottom: 12px; letter-spacing: 0; }

/* Hilfsklassen statt Inline-Stilen (die Sicherheitsregel verbietet style-Attribute) */
.rolle { font-size: 14px; color: var(--text-3); }
.leise { color: var(--text-3); }
.nachsatz { margin-top: 12px; color: var(--text-2); font-size: 15px; }
.linkpaar { display: flex; gap: 24px; flex-wrap: wrap; }
.stapel { position: relative; flex-shrink: 0; }
.stapel .folie { position: absolute; inset: 0; }
.stapel .folie:first-child { position: static; }
.stapel-gross { width: 250px; }
.stapel-klein { width: 210px; }
.fuss-klein.blank { border: 0; margin: 0; padding: 0; }
.abschnitt.eng { padding-top: 20px; }
.vorspann-hell { color: var(--text-2); margin-top: 12px; }
.doku-schmal { max-width: 900px; padding-top: 48px; padding-bottom: 72px; }
.doku-titel { font-size: clamp(32px, 3.6vw, 46px); line-height: 1.06; margin: 16px 0 16px; }
.doku-vorspann { color: var(--text-2); font-size: 19px; max-width: 40em; }
.formular-hinweis { font-size: 14px; color: var(--text-3); }
.abstand-oben { margin-top: 32px; }

/* Auf abgesetzten Flächen liegen Karten eine Stufe höher */
.abschnitt-tief .karte,
.abschnitt-tief .modul,
.abschnitt-tief .person,
.abschnitt-tief .loesung,
.abschnitt-tief .fakt { background: var(--flaeche-hoch); }
.abschnitt-tief .tabs button { background: var(--flaeche-hoch); }
.abschnitt-tief .spur, .abschnitt-tief .tour-balken { background: var(--linie-hell); }

/* Auf schmalen Schirmen nur ein Gerät zeigen, dafür groß */
@media (max-width: 560px) {
  .handys .geraet-handy:nth-child(2),
  .handys .apple-bild:nth-child(2) { display: none; }
  .handys .geraet-handy, .handys .apple-bild { width: 200px; }
  .handys .geraet-handy-gross, .handys .stapel-gross { width: 210px; }
}

/* ---- Sprungmarken unter dem Kopfbereich ---- */
.marken-leiste { border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
  background: var(--grund-2); }
.marken-leiste .wrap { display: flex; align-items: center; gap: 12px; padding-top: 12px; padding-bottom: 12px;
  overflow-x: auto; scrollbar-width: none; }
.marken-leiste .wrap::-webkit-scrollbar { display: none; }
.marken-leiste .mono { white-space: nowrap; color: var(--text-3); }
.marken-leiste a {
  white-space: nowrap; font-size: 15px; color: var(--text-2);
  border: 1px solid var(--linie-hell); border-radius: 999px; padding: 8px 16px; min-height: 40px;
  display: inline-flex; align-items: center; transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.marken-leiste a:hover { border-color: var(--cyan); color: var(--text); }
.marken-leiste a.aktiv { background: var(--cyan-tief); border-color: var(--cyan); color: var(--cyan-hell); }

/* ---- Anker unter der klebenden Kopfzeile ---- */
:target, [id] { scroll-margin-top: 84px; }

/* ---- Feinschliff ---- */
:root { color-scheme: dark; }
::selection { background: var(--cyan); color: var(--knopf-text); }
.fakt b, .tour-zeit, .tour-werte b, .hero-marke, .stufe time { font-variant-numeric: tabular-nums; }
h1, h2, h3 { hyphens: auto; -webkit-hyphens: auto; }

@media (prefers-contrast: more) {
  :root { --text-2: #cdd6e0; --text-3: #b3bdc9; --linie: #3d4756; --linie-hell: #5a6675; }
  .karte, .modul, .person, .fakt, .loesung { border-width: 2px; }
  .knopf-rand { border-width: 2px; }
}

@media print {
  .kopf, .marken-leiste, .platine, .punkte, .tabs, .sprung, .hinweis-proto, .ruhe-knopf, .icon-knopf { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .abschnitt, .abschnitt-tief, .kontakt, .fuss, .karte, .fakt, .modul, .person { background: #fff !important; color: #000; border-color: #999; }
  h1, h2, h3, .fakt b, .mono, a { color: #000 !important; }
  .werk { grid-template-columns: minmax(0, 1fr); page-break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
  .geraet-monitor .schirm, .geraet-handy .huelle { box-shadow: none; border-color: #999; }
}
.abstand-oben-gross { margin-top: 44px; }

/* Bildergalerie mit Wischleiste */
.galerie { display: flex; gap: 20px; overflow-x: auto; padding: 4px 4px 16px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.galerie::-webkit-scrollbar { height: 8px; }
.galerie::-webkit-scrollbar-thumb { background: var(--linie-hell); border-radius: 4px; }
.galerie figure { flex: 0 0 auto; width: 224px; margin: 0; scroll-snap-align: start; }
.galerie img { width: 100%; height: auto; display: block; }
.galerie figcaption { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-3); text-align: center; margin-top: 8px; }
@media (max-width: 560px) { .galerie figure { width: 188px; } }
.werk-voll { grid-template-columns: minmax(0, 1fr); gap: 32px; }

/* ---- Leiterbahn-Netz am Logo: Impulse docken zufällig an den Pins an ---- */
.marke-logo .logo-svg { transition: filter 0.35s ease; overflow: visible; }
.marke-logo .logo-svg .lb-grund { fill: none; stroke: var(--bahn); stroke-width: 4; stroke-linejoin: round; opacity: 0.75; }
.marke-logo .logo-svg .lb-puls { fill: none; stroke: var(--cyan); stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 16 84; stroke-dashoffset: 114; opacity: 0;
  filter: drop-shadow(0 0 4px rgba(34,184,240,0.9)); }
.marke-logo .logo-svg .lb-puls.an { opacity: 1; }
.marke-logo .logo-svg.gluehend { filter: drop-shadow(0 0 12px rgba(34,184,240,0.85)); }
.marke-logo .glanz { animation: none; }
.marke-logo .logo-svg.gluehend .glanz { animation: logoDurchlauf 0.9s linear; }
@keyframes logoDurchlauf { from { transform: translateX(-115%); } to { transform: translateX(115%); } }
@media (max-width: 560px) {
  .marke-logo img, .marke-logo .logo-svg { height: 36px; }
}
html.ruhig .marke-logo .logo-svg .lb-puls { opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  .marke-logo .logo-svg .lb-puls { opacity: 0 !important; }
  .marke-logo .logo-svg, .marke-logo .glanz { animation: none !important; }
}

/* Kopfzeile auf mittleren Breiten */
@media (max-width: 1480px) { .nav { gap: 14px; } .nav a { font-size: 15px; } .kopf-tel { display: none; } }

@media (max-width: 700px) {
  .tour-panel { top: auto; bottom: 10px; left: 10px; right: 10px; width: auto; padding: 8px 12px 10px; }
  .tour-demo { display: none; }
  .tour-werte { font-size: 12px; gap: 10px; }
  .tour-stopp { font-size: 14px; }
}

/* Seitenlinks in der Navigation: Türen, keine Sprungziele */
.nav-trenner { width: 1px; height: 18px; background: var(--linie-hell); flex-shrink: 0; }
/* Seitenlinks sehen aus wie die Bereichslinks. Die Chips aus der ersten Fassung
   waren mit vier Einträgen lauter als die eigentliche Navigation. */
.nav a.nav-seite { color: var(--text-2); }
.nav a.nav-seite:hover, .nav a.nav-seite.aktiv { color: var(--text); }
.marke-logo { flex-shrink: 0; }
.nav { min-width: 0; }


/* Stapel-Folien (falls noch irgendwo genutzt): sauber überblenden */
.stapel .folie { opacity: 0; transition: opacity 0.7s ease; }
.stapel .folie.an { opacity: 1; }

/* ---- Feedback zum Entwurf ---- */
.fb-knopf {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--signal); color: #1a1206; border: 0; border-radius: 999px;
  padding: 12px 20px; min-height: 48px; font-family: var(--body); font-size: 15px; font-weight: 600;
  cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
.fb-knopf:hover { background: #ffb23f; }
.fb-panel[hidden] { display: none !important; }
.fb-panel {
  position: fixed; right: 18px; bottom: 78px; z-index: 60;
  width: min(400px, calc(100vw - 36px)); max-height: min(560px, calc(100vh - 120px));
  display: flex; flex-direction: column;
  background: var(--flaeche); border: 1px solid var(--linie-hell); border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
}
.fb-kopf { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--linie); }
.fb-kopf b { font-family: var(--display); font-size: 16px; }
.fb-zu { background: none; border: 0; color: var(--text-2); font-size: 26px; line-height: 1;
  cursor: pointer; padding: 2px 6px; min-width: 32px; min-height: 32px; }
.fb-zu:hover { color: var(--text); }
.fb-form { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 0; }
.fb-form input[type="text"], .fb-form textarea {
  font-family: var(--body); font-size: 15px; color: var(--text);
  background: var(--grund-2); border: 1px solid var(--linie); border-radius: 4px; padding: 9px 11px;
}
.fb-form input:focus, .fb-form textarea:focus { outline: none; border-color: var(--cyan); }
.fb-falle { position: absolute; left: -9999px; width: 1px; height: 1px; }
.fb-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fb-ort { font-size: 12px; color: var(--text-3); }
.fb-senden { min-height: 40px; padding: 8px 18px; font-size: 15px; cursor: pointer; border: 0; }
.fb-meldung { margin: 8px 16px 0; font-size: 14px; color: var(--cyan-hell); }
.fb-liste { list-style: none; margin: 12px 0 0; padding: 0 16px 14px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px; }
.fb-liste li { background: var(--grund-2); border: 1px solid var(--linie); border-radius: 5px; padding: 10px 12px; }
.fb-eintrag-kopf { font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; color: var(--text-3); display: block; margin-bottom: 4px; }
.fb-liste li p { font-size: 14px; color: var(--text); }
.fb-leer { color: var(--text-3); font-size: 14px; }
@media print { .fb-knopf, .fb-panel { display: none !important; } }

/* Signal läuft über die Abschnittstrenner, im Takt der Marke */
.marke-abschnitt i { position: relative; }
.marke-abschnitt i::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(34,184,240,0) 0%, rgba(34,184,240,0.9) 50%, rgba(34,184,240,0) 100%);
  background-size: 220px 100%; background-repeat: no-repeat; background-position: -220px 0;
  animation: trennerPuls 9s linear infinite;
}
@keyframes trennerPuls {
  0% { background-position: -220px 0; }
  38% { background-position: calc(100% + 220px) 0; }
  100% { background-position: calc(100% + 220px) 0; }
}
html.ruhig .marke-abschnitt i::after { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .marke-abschnitt i::after { animation: none; opacity: 0; } }
/* .loesung-allein entfällt, die Lösungskarte nutzt die volle Breite */

/* ---- Farbvarianten zur Abstimmung: Dunkel (Standard), Gedämpft, Hell ----
   Umschaltung über data-thema am html-Element (assets/js/thema.js), Wahl im gelben Balken.
   Vor dem Go-Live: Variante festlegen, Schalter und die anderen Blöcke entfernen. */


html[data-thema="hell"] {
  color-scheme: light;
  --grund: #f4f6f9; --grund-2: #e9eef3;
  --flaeche: #ffffff; --flaeche-2: #f1f4f8; --flaeche-hoch: #ffffff;
  --linie: #d5dde6; --linie-hell: #b9c4d0;
  --text: #121a24; --text-2: #46566a; --text-3: #5f6f82;
  --cyan: #0b77aa; --cyan-hell: #075d86; --cyan-tief: #dcf1fb;
  --signal: #b86a00; --knopf-text: #ffffff;
  --bahn: #c3d8e5; --stopp: #ffffff; --leuchten: #0b77aa;
  --punkt-inaktiv: #cfd8e2; --platzhalter: #dbe6ee; --platzhalter-2: #eef3f7;
}
html[data-thema="hell"] .kopf { background: rgba(244,246,249,0.86); }
html[data-thema="hell"] .kontakt { background: linear-gradient(160deg, #dceff8 0%, #ebf1f6 60%, #f4f6f9 100%); }
html[data-thema="hell"] .tour-panel { background: rgba(255,255,255,0.93); }
html[data-thema="hell"] .fenster,
html[data-thema="hell"] .geraet-browser { box-shadow: 0 18px 48px rgba(20,40,60,0.16); }
html[data-thema="hell"] .geraet-monitor .schirm { box-shadow: 0 18px 48px rgba(20,40,60,0.22); }
html[data-thema="hell"] .geraet-monitor .sockel { box-shadow: 0 8px 20px rgba(20,40,60,0.2); }
html[data-thema="hell"] .geraet-handy .huelle { box-shadow: 0 16px 40px rgba(20,40,60,0.22); }
html[data-thema="hell"] .handy,
html[data-thema="hell"] .paar .geraet-handy { filter: drop-shadow(0 16px 36px rgba(20,40,60,0.22)); }
html[data-thema="hell"] .fb-panel { box-shadow: 0 18px 48px rgba(20,40,60,0.2); }
html[data-thema="hell"] .fb-knopf { box-shadow: 0 8px 24px rgba(20,40,60,0.25); }
html[data-thema="hell"] .knopf-haupt:hover { box-shadow: 0 10px 30px rgba(11,119,170,0.28); }
html[data-thema="hell"] .platine { opacity: 0.7; }
html[data-thema="hell"] .marke-logo .logo-svg g[mask] > rect:first-child { fill: var(--cyan); }
html[data-thema="hell"] .marke-logo .logo-svg .lb-pad { fill: var(--bahn); }
html[data-thema="hell"] .marke-logo .logo-svg .lb-grund { opacity: 1; }

/* Balken und Feedback-Knopf bleiben in jeder Variante orange */
.hinweis-proto, .fb-knopf { background: #f0a02a; }

/* Variantenwahl im Balken */
.hinweis-proto { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 20px; margin: 0; }
.hinweis-proto p { margin: 0; }
.thema-wahl { display: inline-flex; align-items: center; gap: 4px; }
.thema-wahl span { margin-right: 4px; }
.thema-wahl button {
  font: inherit; font-size: 13px; font-weight: 500; color: #1a1206; cursor: pointer;
  background: rgba(255,255,255,0.28); border: 1px solid rgba(26,18,6,0.35); border-radius: 999px;
  padding: 4px 12px; min-height: 30px; transition: background-color 0.15s ease, color 0.15s ease;
}
.thema-wahl button:hover { background: rgba(255,255,255,0.5); }
.thema-wahl button[aria-pressed="true"] { background: #1a1206; color: #f0a02a; border-color: #1a1206; }
html[data-thema="hell"] .marke-logo .logo-svg .glanz { display: none; }
html[data-thema="hell"] .fuss .marke-logo img { filter: brightness(0.62) saturate(1.15); }

/* Kopfzeile auf iPad-Querformat (1024 bis 1280 px): nichts darf umbrechen */
.nav a, .kopf .knopf, .nav a.nav-seite { white-space: nowrap; }
@media (max-width: 1280px) {
  .kopf-tel { display: none; }
  .nav { gap: 18px; }
  .kopf .knopf { padding: 8px 16px; }
}
@media (max-width: 1060px) {
  .nav { gap: 14px; }
  .nav a { font-size: 15px; }
  .kopf-inner { gap: 16px; }
}

/* ---- Variante „Hell + Bühne": heller Inhalt, dunkle Bühne oben und unten ---- */
html[data-thema="buehne"] {
  color-scheme: light;
  --grund: #f4f6f9; --grund-2: #e9eef3;
  --flaeche: #ffffff; --flaeche-2: #f1f4f8; --flaeche-hoch: #ffffff;
  --linie: #d5dde6; --linie-hell: #b9c4d0;
  --text: #121a24; --text-2: #46566a; --text-3: #5f6f82;
  --cyan: #0b77aa; --cyan-hell: #075d86; --cyan-tief: #dcf1fb;
  --signal: #b86a00; --knopf-text: #ffffff;
  --bahn: #c3d8e5; --stopp: #ffffff; --leuchten: #0b77aa;
  --punkt-inaktiv: #cfd8e2; --platzhalter: #dbe6ee; --platzhalter-2: #eef3f7;
}

/* Die Bühne behält die dunklen Werte. Custom Properties vererben, deshalb
   genügt ein Block je Bühnenbereich, ohne Änderung am Markup. */
html[data-thema="buehne"] .kopf,
html[data-thema="buehne"] .hero,
html[data-thema="buehne"] .unterseite-hero,
html[data-thema="buehne"] .marken,
html[data-thema="buehne"] .marken-leiste,
html[data-thema="buehne"] .kontakt,
html[data-thema="buehne"] .fuss {
  color-scheme: dark;
  --grund: #090c11; --grund-2: #161d28;
  --flaeche: #141b25; --flaeche-2: #1a2330; --flaeche-hoch: #222b39;
  --linie: #232e3d; --linie-hell: #31404f;
  --text: #e9eef4; --text-2: #9aa7b6; --text-3: #8593a3;
  --cyan: #22b8f0; --cyan-hell: #6fd8ff; --cyan-tief: #0a3b52;
  --signal: #f0a02a; --knopf-text: #04222f;
  --bahn: #1d3a4c; --stopp: #0b2b3a; --leuchten: #eafaff;
  --punkt-inaktiv: #2f3d4d; --platzhalter: #223442; --platzhalter-2: #16202b;
  color: var(--text);
}
/* Hero und Unterseiten-Kopf tragen sonst den hellen Body-Grund */
html[data-thema="buehne"] .hero,
html[data-thema="buehne"] .unterseite-hero { background: var(--grund); }
html[data-thema="buehne"] .unterseite-hero { border-bottom: 1px solid var(--linie); }

/* Im hellen Inhaltsbereich: leichtere Schatten, sonst wirken die Rahmen schwer.
   Die Bühne bleibt bei den kräftigen Schatten aus der Grundfassung. */
html[data-thema="buehne"] .abschnitt:not(.kontakt) .fenster,
html[data-thema="buehne"] .abschnitt:not(.kontakt) .geraet-browser { box-shadow: 0 18px 48px rgba(20,40,60,0.16); }
html[data-thema="buehne"] .abschnitt:not(.kontakt) .geraet-monitor .schirm { box-shadow: 0 18px 48px rgba(20,40,60,0.22); }
html[data-thema="buehne"] .abschnitt:not(.kontakt) .geraet-monitor .sockel { box-shadow: 0 8px 20px rgba(20,40,60,0.2); }
html[data-thema="buehne"] .abschnitt:not(.kontakt) .geraet-handy .huelle { box-shadow: 0 16px 40px rgba(20,40,60,0.22); }
html[data-thema="buehne"] .abschnitt:not(.kontakt) .handy,
html[data-thema="buehne"] .abschnitt:not(.kontakt) .paar .geraet-handy { filter: drop-shadow(0 16px 36px rgba(20,40,60,0.22)); }
html[data-thema="buehne"] .abschnitt:not(.kontakt) .knopf-haupt:hover { box-shadow: 0 10px 30px rgba(11,119,170,0.28); }
html[data-thema="buehne"] .abschnitt:not(.kontakt) .tour-panel { background: rgba(255,255,255,0.93); }
html[data-thema="buehne"] .doku { color: var(--text); }
html[data-thema="buehne"] .fb-panel { box-shadow: 0 18px 48px rgba(20,40,60,0.2); }
html[data-thema="buehne"] .fb-knopf { box-shadow: 0 8px 24px rgba(20,40,60,0.25); }
/* Deckend, weil die klebende Kopfzeile sonst den hellen Inhalt durchscheinen lässt */
html[data-thema="buehne"] .kopf { background: #090c11; }
html[data-thema="buehne"] .nav.offen { background: var(--grund-2); }

/* ---- Werkstatt im Kopfbereich: aus Code wird eine App ---- */
.werkstatt { margin: 0; }
.werkstatt-raster { display: grid; grid-template-columns: minmax(0, 1fr) 172px; gap: 22px; align-items: center; }
.werkstatt .geraet-beschriftung { margin-top: 18px; }

/* Editor */
.editor {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; overflow: hidden;
  box-shadow: 0 26px 70px rgba(0,0,0,0.5);
}
.editor-leiste {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 12px;
  background: var(--flaeche-2); border-bottom: 1px solid var(--linie);
}
.editor-leiste i { width: 9px; height: 9px; border-radius: 50%; background: var(--punkt-inaktiv); display: block; flex-shrink: 0; }
.editor-datei {
  margin-left: 8px; font-family: var(--mono); font-size: 12px; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.editor-start {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-family: var(--body); font-size: 12px; font-weight: 600; color: var(--cyan-hell);
  background: var(--cyan-tief); border: 1px solid var(--cyan); border-radius: 999px;
  padding: 5px 12px; min-height: 28px; cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.editor-start:hover { background: var(--cyan); color: var(--knopf-text); }
.editor-start svg { flex-shrink: 0; }

.editor-code {
  margin: 0; padding: 16px 16px 6px; overflow: hidden;
  font-family: var(--mono); font-size: 13px; line-height: 1.62;
  color: var(--text-2);
}
/* Acht Zeilen sind immer reserviert, sonst wächst der Rahmen beim Tippen mit.
   Die Höhe hängt am Text, nicht am Rahmen, damit die Innenabstände je Breite egal sind. */
.editor-code code { display: block; min-height: 12.96em; }
.editor-code .zl { display: block; white-space: pre; }
.editor-code .kom { color: #6f8296; }
.editor-code .sch { color: #d78bf0; }
.editor-code .fkt { color: var(--cyan-hell); }
.editor-code .txt { color: #86d6a4; }
.editor-code .zhl { color: var(--signal); }
.editor-code .cur {
  display: inline-block; width: 7px; height: 1.05em; vertical-align: -0.2em;
  background: var(--cyan); animation: curBlink 1.05s steps(1) infinite;
}
@keyframes curBlink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

.editor-status {
  margin: 0; padding: 8px 16px 12px; min-height: 3.4em;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.03em; color: var(--text-3);
}
.editor-status.gut { color: #86d6a4; }
.editor-status.neu { color: var(--signal); }

/* Handy und aufgebaute App */
.werkstatt-handy { width: 100%; }
.app-bau { width: 100%; height: 100%; display: block; }
.app-grund { fill: var(--schirm); }
.app-kopf { fill: var(--cyan-tief); }
.app-marke { fill: var(--cyan-hell); }
.app-konto { fill: var(--bahn); }
.app-karte { fill: var(--flaeche-2); stroke: var(--linie); stroke-width: 1; }
.app-zeile { fill: var(--text-2); opacity: 0.85; }
.app-zeile.app-schwach { fill: var(--text-3); opacity: 0.55; }
.app-marker { fill: var(--cyan-tief); stroke: var(--cyan); stroke-width: 1; }
.app-tafel { fill: var(--flaeche-2); stroke: var(--linie); stroke-width: 1; }
.app-weg { fill: none; stroke: var(--cyan); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.app-halt { fill: var(--stopp); stroke: var(--cyan); stroke-width: 2; }
.app-halt-ziel { fill: var(--cyan); }
.app-knopf { fill: var(--cyan); }
.app-knopf-text { fill: var(--knopf-text); opacity: 0.9; }
.app-karte-neu { stroke: var(--signal); }
.app-neu-punkt { fill: var(--signal); }
.app-version { fill: var(--text-3); font-family: var(--mono); font-size: 11px; }

/* Bausteine rasten ein */
.app-bau .bt { opacity: 0; transform: translateY(9px); transition: opacity 0.34s ease, transform 0.34s cubic-bezier(0.22, 1.2, 0.4, 1); }
.app-bau .bt.ein { opacity: 1; transform: none; }
.app-bau .app-version { opacity: 0; transition: opacity 0.3s ease; }
.app-bau.beschriftet .app-version { opacity: 1; }

/* Easter Egg: der Wagen liefert wirklich aus */
.lieferung {
  position: fixed; left: 0; right: 0; bottom: 0; height: 128px;
  pointer-events: none; z-index: 70; overflow: hidden;
}
.lieferung-wagen, .lieferung-kiste { position: absolute; bottom: 10px; left: 0; will-change: transform; }
.lieferung-wagen { width: 74px; height: 42px; }
.lieferung-wagen .aufbau { fill: var(--flaeche-hoch); stroke: var(--cyan); stroke-width: 1.6; }
.lieferung-wagen .haus { fill: var(--flaeche-2); stroke: var(--cyan); stroke-width: 1.6; }
.lieferung-wagen .scheibe { fill: var(--cyan-tief); }
.lieferung-wagen .rad { fill: var(--grund); stroke: var(--cyan-hell); stroke-width: 2; }
.lieferung-wagen .licht { fill: var(--signal); }
.lieferung-kiste {
  width: 20px; height: 16px; border-radius: 2px;
  background: var(--signal); border: 1px solid rgba(0,0,0,0.35);
  box-shadow: inset 0 3px 0 rgba(255,255,255,0.28);
}
.lieferung-meldung {
  position: fixed; left: 50%; bottom: 124px; transform: translateX(-50%);
  z-index: 71; max-width: min(420px, calc(100vw - 32px));
  background: var(--flaeche-hoch); color: var(--text);
  border: 1px solid var(--cyan); border-radius: 999px;
  padding: 10px 20px; font-size: 15px; text-align: center;
  box-shadow: 0 14px 40px rgba(0,0,0,0.4);
  opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease;
}
.lieferung-meldung.da { opacity: 1; transform: translateX(-50%) translateY(-6px); }

/* Bis 1150 px stehen Editor und Handy untereinander. Nebeneinander bliebe für den
   Editor in der zweispaltigen Bühne zu wenig Platz, und die Codezeilen würden am
   rechten Rand abgeschnitten. */
@media (max-width: 1150px) {
  .werkstatt-raster { grid-template-columns: minmax(0, 1fr); gap: 26px; justify-items: center; }
  .editor { width: 100%; }
  .werkstatt-handy { width: 168px; }
}
@media (max-width: 560px) {
  .editor-code { font-size: clamp(10.5px, 3.3vw, 12px); padding: 14px 14px 4px; }
  .werkstatt-handy { width: 152px; }
  .lieferung-meldung { font-size: 14px; padding: 9px 16px; bottom: 118px; }
}

@media (prefers-reduced-motion: reduce) {
  .app-bau .bt { opacity: 1; transform: none; transition: none; }
  .app-bau .app-version { opacity: 1; }
  .editor-code .cur { animation: none; }
}
html.ruhig .editor-code .cur { animation: none; }

/* Der Editor ist ein Bildschirm und bleibt in jeder Farbvariante dunkel, genau wie
   das Handy daneben. Die Codefarben sind für dunklen Grund gemacht und wären auf
   Weiß nicht mehr lesbar. */
.editor { background: #141b25; border-color: #232e3d; }
.editor-leiste { background: #1a2330; border-bottom-color: #232e3d; }
.editor-leiste i { background: #2f3d4d; }
.editor-datei { color: #8593a3; }
.editor-code { color: #9aa7b6; }
.editor-status { color: #8593a3; }
.editor-code .cur { background: #22b8f0; }
.editor-start { color: #6fd8ff; background: #0a3b52; border-color: #22b8f0; }
.editor-start:hover { background: #22b8f0; color: #04222f; }
html[data-thema="hell"] .editor { box-shadow: 0 18px 48px rgba(20,40,60,0.2); }

/* Gleiches gilt für den Handybildschirm: eine App sieht nicht anders aus, nur weil
   die Website hell eingestellt ist. Feste Werte statt Token. */
.app-grund { fill: #0d1219; }
.app-kopf { fill: #0a3b52; }
.app-marke { fill: #6fd8ff; }
.app-konto { fill: #1d3a4c; }
.app-karte { fill: #1a2330; stroke: #232e3d; }
.app-zeile { fill: #9aa7b6; }
.app-zeile.app-schwach { fill: #8593a3; }
.app-marker { fill: #0a3b52; stroke: #22b8f0; }
.app-tafel { fill: #1a2330; stroke: #232e3d; }
.app-weg { stroke: #22b8f0; }
.app-halt { fill: #0b2b3a; stroke: #22b8f0; }
.app-halt-ziel { fill: #22b8f0; }
.app-knopf { fill: #22b8f0; }
.app-knopf-text { fill: #04222f; }
.app-karte-neu { stroke: #f0a02a; }
.app-neu-punkt { fill: #f0a02a; }
.app-version { fill: #8593a3; }

/* Startbild im Handy: solange nichts gebaut ist, pulst das Logo wie ein Startbildschirm */
.app-start { transform-box: fill-box; transform-origin: center; animation: appPuls 2.2s ease-in-out infinite; }
.app-start-balken { fill: #22b8f0; opacity: 0.5; }
@keyframes appPuls {
  0%, 100% { opacity: 0.4; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1); }
}
.app-bau.gebaut .app-start {
  opacity: 0; transform: scale(1.3); animation: none;
  transition: opacity 0.45s ease, transform 0.45s ease; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .app-start { animation: none; opacity: 1; } }
html.ruhig .app-start { animation: none; }
/* Jede Fahrt hat einen eigenen Wagen, die Kisten bleiben liegen und stapeln sich */
.lieferung-fahrt { position: absolute; inset: 0; }

/* Räder drehen, der Aufbau wippt, beim Rangieren blinkt hinten das Rückfahrlicht */
.lieferung-wagen .speiche { stroke: var(--cyan-hell); stroke-width: 1.4; stroke-linecap: round; }
.lieferung-wagen .rad-g, .lieferung-wagen .karosse { transform-box: fill-box; transform-origin: center; }
.lieferung-wagen.rollt .rad-g { animation: radDreh 0.42s linear infinite; }
.lieferung-wagen.rollt.rueckwaerts .rad-g { animation-direction: reverse; animation-duration: 0.9s; }
.lieferung-wagen.rollt .karosse { animation: wagenWippt 0.34s ease-in-out infinite; }
.lieferung-wagen .rueck { fill: #f6f6f6; opacity: 0; }
.lieferung-wagen.rueckwaerts .rueck { animation: rueckBlink 0.5s steps(1) infinite; }
.lieferung-fahrt.feierabend .licht { fill: var(--flaeche-2); }
@keyframes radDreh { to { transform: rotate(360deg); } }
@keyframes wagenWippt { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
@keyframes rueckBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.1; } }
.lieferung-qualm {
  position: absolute; bottom: 16px; left: 0; width: 9px; height: 9px; border-radius: 50%;
  background: var(--text); opacity: 0; will-change: transform;
}
.lieferung-piep {
  position: absolute; bottom: 58px; left: 0; white-space: nowrap;
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--signal); opacity: 0;
}
.lieferung-kiste.klein { width: 14px; height: 11px; background: var(--cyan); }

/* ---- Ausbaustufen: ein Feld ist eine echte Datenbank-Erweiterung ---- */
.stufen { margin: 36px 0 0; max-width: 880px; }
.stufen-bild { width: 100%; height: auto; display: block; }
.stufen-boden { stroke: var(--linie); stroke-width: 1; }
.stufen-jahr { stroke: var(--linie); stroke-width: 1; stroke-dasharray: 2 3; }
.stufe-feld {
  fill: var(--cyan); opacity: 0; transform: scaleY(0.15); transform-box: fill-box; transform-origin: bottom;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1.2, 0.4, 1);
}
.stufe-feld.ein { opacity: 0.9; transform: none; }
.stufen-fuss {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 10px; font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3);
}
@media (prefers-reduced-motion: reduce) { .stufe-feld { opacity: 0.9; transform: none; transition: none; } }

/* ---- Schnittstellen: vier Systeme, ein Datenstand ---- */
.schnitt {
  margin: 44px 0 0; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 40px; align-items: center;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 6px; padding: 32px;
}
.schnitt-kopf { margin: 0; }
.schnitt-kopf h3 { font-size: clamp(21px, 2vw, 27px); line-height: 1.1; margin: 12px 0 12px; }
.schnitt-text { color: var(--text-2); font-size: 16px; }
.schnitt-bild { width: 100%; max-width: 430px; height: auto; display: block; margin: 0 auto; }
.schnitt .knoten { fill: var(--flaeche-2); stroke: var(--linie-hell); stroke-width: 1.2; }
.schnitt .knoten-text { fill: var(--text); font-family: var(--body); font-size: 15px; font-weight: 500; }
.schnitt .nabe { fill: var(--cyan-tief); stroke: var(--cyan); stroke-width: 1.4; }
.schnitt .nabe-text { fill: var(--cyan-hell); font-family: var(--display); font-size: 15px; font-weight: 600; }
.schnitt .nabe-klein { fill: var(--text-3); font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; }
.schnitt .leitung { fill: none; stroke: var(--linie-hell); stroke-width: 1.6; }
.schnitt .leitung-puls {
  fill: none; stroke: var(--cyan); stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 12 88; stroke-dashoffset: 100;
  filter: drop-shadow(0 0 4px rgba(34,184,240,0.75));
  animation: leitungFliessen 3.4s linear infinite;
}
.schnitt .leitung-puls:nth-of-type(2) { animation-delay: -0.85s; animation-direction: reverse; }
.schnitt .leitung-puls:nth-of-type(3) { animation-delay: -1.7s; animation-direction: reverse; }
.schnitt .leitung-puls:nth-of-type(4) { animation-delay: -2.55s; }
@keyframes leitungFliessen { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
html.ruhig .schnitt .leitung-puls { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .schnitt .leitung-puls { animation: none; opacity: 0; } }

@media (max-width: 940px) {
  .schnitt { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px; }
  .schnitt-bild { max-width: 360px; }
}
@media (max-width: 560px) {
  .stufen-fuss { font-size: 11px; letter-spacing: 0.04em; }
  .stufen-fuss .leise { order: 3; width: 100%; text-align: center; }
  .schnitt { padding: 20px; }
}

/* Damit Rasterspalten und Flex-Kinder unter ihre Mindestbreite dürfen. Ohne das
   erzwingt die Adresszeile im Browserrahmen (nowrap) eine Mindestbreite, und die
   Seite wird auf schmalen Geräten breiter als das Fenster. */
.geraet-browser .adresse { min-width: 0; }
.geraet-browser .leiste, .fenster-leiste, .editor-leiste { min-width: 0; }
.paar > *, .werk > *, .hero-raster > *, .abschnitt-kopf > *, .kontakt-raster > *,
.schnitt > *, .werkstatt-raster > * { min-width: 0; }

/* Zweiter Riegel gegen seitlichen Überlauf. WICHTIG: clip, nicht hidden.
   `overflow-x: hidden` am html-Element macht daraus einen Scroll-Behälter und
   zerstört damit `position: sticky` der Kopfzeile. `clip` kappt nur und lässt
   das Kleben in Ruhe. Ältere Browser ohne clip ignorieren die Zeile, der
   eigentliche Überlauf ist ohnehin an der Wurzel behoben (minmax und min-width). */
html { overflow-x: clip; }

/* ---- SMART-PDF: was die App macht, in fünf Szenen ----
   Zusammenführen, verkleinern, durchsuchen, teilen, schützen. Ein Durchlauf
   dauert 24 Sekunden, alles in CSS, kein JavaScript. */
.dokfluss {
  margin: 40px 0 0; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 40px; align-items: center;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 6px; padding: 32px;
}
.dokfluss > * { min-width: 0; }
.dokfluss-kopf { margin: 0; }
.dokfluss-kopf h3 { font-size: clamp(21px, 2vw, 27px); line-height: 1.1; margin: 12px 0 12px; }
.dokfluss-text { color: var(--text-2); font-size: 16px; }
.dokfluss-bild { width: 100%; max-width: 440px; height: auto; display: block; margin: 0 auto; }

.blatt-grund { fill: var(--flaeche-2); stroke: var(--linie-hell); stroke-width: 1.2; }
.blatt-zeile { fill: var(--text-3); opacity: 0.5; }
.blatt { transform-box: fill-box; transform-origin: center; }
.dok-marke rect { fill: var(--cyan-tief); stroke: var(--cyan); stroke-width: 1.2; }
.dok-marke-text { fill: var(--cyan-hell); font-family: var(--display); font-size: 14px; font-weight: 600; }

.such-treffer { fill: #f0a02a; opacity: 0; }
.such-feld { fill: var(--flaeche-2); stroke: var(--linie-hell); stroke-width: 1.2; }
.such-glas { fill: none; stroke: var(--cyan); stroke-width: 2.2; }
.such-griff { fill: none; stroke: var(--cyan); stroke-width: 2.2; stroke-linecap: round; }
.such-wort { fill: var(--text-3); opacity: 0.6; }

.teil-pfeil { fill: none; stroke: var(--cyan); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 90; }
.teil-spitze { fill: var(--cyan); }
.teil-ziel rect:first-child { fill: var(--flaeche-2); stroke: var(--linie-hell); stroke-width: 1.2; }
.teil-zeile { fill: var(--text-3); opacity: 0.6; }

.schutz-ring { fill: var(--cyan-tief); fill-opacity: 0.85; stroke: var(--cyan); stroke-width: 1.6; }
.schloss-buegel { fill: none; stroke: var(--cyan-hell); stroke-width: 3.4; }
.schloss-korpus { fill: var(--cyan); }
.schloss-loch { fill: var(--knopf-text); }

.dokfluss-mass {
  position: relative; height: 1.7em; margin: 10px 0 0; text-align: center;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.05em; color: var(--text-3);
}
.dokfluss-mass span { position: absolute; left: 0; right: 0; top: 0; opacity: 0; }

.blatt, .dok-marke, .szene, .such-treffer, .dokfluss-mass span, .teil-pfeil {
  animation-duration: 16s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.blatt-a { animation-name: blattA; }
.blatt-b { animation-name: blattB; }
.blatt-c { animation-name: blattC; }
.dok-marke { animation-name: dokMarke; animation-timing-function: ease; }
.szene-suche { animation-name: szeneSuche; animation-timing-function: ease; }
.szene-teilen { animation-name: szeneTeilen; animation-timing-function: ease; }
.szene-schutz { animation-name: szeneSchutz; animation-timing-function: ease; }
.such-1 { animation-name: treffer1; animation-timing-function: ease; }
.such-2 { animation-name: treffer2; animation-timing-function: ease; }
.teil-pfeil { animation-name: pfeilZiehen; animation-timing-function: ease; }
.dok-m1 { animation-name: mass1; animation-timing-function: ease; }
.dok-m2 { animation-name: mass2; animation-timing-function: ease; }
.dok-m3 { animation-name: mass3; animation-timing-function: ease; }
.dok-m4 { animation-name: mass4; animation-timing-function: ease; }
.dok-m5 { animation-name: mass5; animation-timing-function: ease; }

@keyframes blattA {
  0%   { transform: translate(-118px, 14px) rotate(-9deg); opacity: 0; }
  3%, 10% { transform: translate(-118px, 14px) rotate(-9deg); opacity: 1; }
  18%, 26% { transform: translate(-7px, 7px) rotate(-2deg); opacity: 1; }
  32%, 94% { transform: translate(-4px, 4px) rotate(-1deg) scale(0.86); opacity: 1; }
  100% { transform: translate(-4px, 4px) rotate(-1deg) scale(0.86); opacity: 0; }
}
@keyframes blattB {
  0%   { transform: translate(0, -20px) rotate(3deg); opacity: 0; }
  3%, 10% { transform: translate(0, -20px) rotate(3deg); opacity: 1; }
  18%, 26% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  32%, 94% { transform: translate(0, 0) rotate(0deg) scale(0.86); opacity: 1; }
  100% { transform: translate(0, 0) rotate(0deg) scale(0.86); opacity: 0; }
}
@keyframes blattC {
  0%   { transform: translate(118px, 16px) rotate(9deg); opacity: 0; }
  3%, 10% { transform: translate(118px, 16px) rotate(9deg); opacity: 1; }
  18%, 26% { transform: translate(7px, -7px) rotate(2deg); opacity: 1; }
  32%, 94% { transform: translate(4px, -4px) rotate(1deg) scale(0.86); opacity: 1; }
  100% { transform: translate(4px, -4px) rotate(1deg) scale(0.86); opacity: 0; }
}
@keyframes dokMarke { 0%, 17% { opacity: 0; } 21%, 94% { opacity: 1; } 100% { opacity: 0; } }

@keyframes szeneSuche { 0%, 38% { opacity: 0; } 42%, 56% { opacity: 1; } 59%, 100% { opacity: 0; } }
@keyframes treffer1  { 0%, 44% { opacity: 0; } 47%, 56% { opacity: 0.35; } 59%, 100% { opacity: 0; } }
@keyframes treffer2  { 0%, 48% { opacity: 0; } 51%, 56% { opacity: 0.35; } 59%, 100% { opacity: 0; } }

@keyframes szeneTeilen { 0%, 56% { opacity: 0; } 60%, 74% { opacity: 1; } 77%, 100% { opacity: 0; } }
@keyframes pfeilZiehen {
  0%, 58% { stroke-dashoffset: 90; opacity: 0; }
  60% { stroke-dashoffset: 90; opacity: 1; }
  68%, 74% { stroke-dashoffset: 0; opacity: 1; }
  77%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes szeneSchutz { 0%, 74% { opacity: 0; } 78%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }

@keyframes mass1 { 0%, 2% { opacity: 0; } 5%, 27% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes mass2 { 0%, 29% { opacity: 0; } 32%, 42% { opacity: 1; } 44%, 100% { opacity: 0; } }
@keyframes mass3 { 0%, 43% { opacity: 0; } 46%, 58% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes mass4 { 0%, 61% { opacity: 0; } 64%, 76% { opacity: 1; } 78%, 100% { opacity: 0; } }
@keyframes mass5 { 0%, 79% { opacity: 0; } 82%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }

/* Bewegung aus: der Endzustand steht still, alle Szenen bis auf den Schutz aus */
html.ruhig .blatt, html.ruhig .dok-marke, html.ruhig .szene,
html.ruhig .such-treffer, html.ruhig .dokfluss-mass span, html.ruhig .teil-pfeil { animation: none; }
html.ruhig .dok-marke, html.ruhig .dok-m2 { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .blatt, .dok-marke, .szene, .such-treffer, .dokfluss-mass span, .teil-pfeil { animation: none; }
  .dok-marke, .dok-m2 { opacity: 1; }
  .blatt-a { transform: translate(-4px, 4px) rotate(-1deg) scale(0.86); }
  .blatt-b { transform: scale(0.86); }
  .blatt-c { transform: translate(4px, -4px) rotate(1deg) scale(0.86); }
}

/* ---- Leistungskarten: die Symbole zeichnen sich beim Hereinscrollen selbst ---- */
.karte.zeig > svg path,
.karte.zeig > svg rect,
.karte.zeig > svg circle,
.karte.zeig > svg line {
  stroke-dasharray: 130; stroke-dashoffset: 130;
  transition: stroke-dashoffset 1s ease 0.2s;
}
.karte.zeig.da > svg path,
.karte.zeig.da > svg rect,
.karte.zeig.da > svg circle,
.karte.zeig.da > svg line { stroke-dashoffset: 0; }
html.ruhig .karte.zeig > svg path, html.ruhig .karte.zeig > svg rect,
html.ruhig .karte.zeig > svg circle, html.ruhig .karte.zeig > svg line {
  stroke-dasharray: none; stroke-dashoffset: 0; transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .karte.zeig > svg path, .karte.zeig > svg rect,
  .karte.zeig > svg circle, .karte.zeig > svg line {
    stroke-dasharray: none; stroke-dashoffset: 0; transition: none;
  }
}

/* ---- Zeitleiste: die Linie läuft beim Scrollen mit ---- */
.zeitleiste::after {
  content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px;
  background: var(--cyan);
  transform: scaleY(var(--fortschritt, 0)); transform-origin: top;
  transition: transform 0.12s linear;
}
.stufe::before { transition: background-color 0.3s ease, box-shadow 0.3s ease; }
.stufe.erreicht::before { background: var(--cyan); }
@media (prefers-reduced-motion: reduce) { .zeitleiste::after { transform: scaleY(1); transition: none; } }

@media (max-width: 940px) {
  .dokfluss { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px; }
  .dokfluss-bild { max-width: 360px; }
}
@media (max-width: 560px) { .dokfluss { padding: 20px; } }

/* Der Editor hängt sich an den Code statt an den Rahmen: gestapelt wäre er sonst
   doppelt so breit wie die Zeilen und wirkte leer. */
.editor { max-width: 470px; }
@media (max-width: 1150px) { .editor { margin: 0 auto; } }

/* Nachträge: ein Baustein kommt dazu, einer wird ausgetauscht, ein Halt kommt hinzu */
.app-bau [data-bt="3"] .app-zeile { transform-box: fill-box; transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.22, 1.1, 0.4, 1); }
.app-bau [data-bt="3"] .app-karte { transition: stroke 0.5s ease; }
.app-bau.getauscht [data-bt="3"] .app-zeile { transform: scaleX(1.3); }
.app-bau.getauscht [data-bt="3"] .app-zeile.app-schwach { transform: scaleX(0.68); }
.app-bau.getauscht [data-bt="3"] .app-karte { stroke: #22b8f0; }
.app-halt-neu { opacity: 0; transition: opacity 0.45s ease; }
.app-bau.route2 .app-halt-neu { opacity: 1; }

/* Monatsspalten sind anfassbar: Titel je Spalte, sanfte Hervorhebung beim Zeigen */
.stufen-treffer { fill: var(--linie); opacity: 0; transition: opacity 0.2s ease; }
.stufen-monat:hover .stufen-treffer, .stufen-monat:focus-within .stufen-treffer { opacity: 0.4; }
.stufen-monat { cursor: default; }

/* Angedeutetes leeres Feld am rechten Rand: die nächste Stufe kommt noch */
.stufe-naechste {
  fill: none; stroke: var(--cyan); stroke-width: 1.2; stroke-dasharray: 3 3;
  opacity: 0; transition: opacity 0.5s ease 0.4s;
}
.stufen-bild.fertig .stufe-naechste { opacity: 0.75; animation: naechstePulst 2.8s ease-in-out infinite 0.9s; }
@keyframes naechstePulst { 0%, 100% { opacity: 0.75; } 50% { opacity: 0.25; } }
html.ruhig .stufe-naechste { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .stufe-naechste { animation: none; opacity: 0.75; }
}
.stufen-fuss b { color: var(--cyan); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- Visitenkarte im Vordergrund, Seite dahinter weichgezeichnet ---- */
.fuss-karte {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px;
  font-family: var(--body); font-size: 14px; color: var(--text-2);
  background: none; border: 1px solid var(--linie-hell); border-radius: 999px;
  padding: 4px 14px; cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.fuss-karte:hover { border-color: var(--cyan); color: var(--text); }

.karte-dialog {
  border: 0; padding: 0; background: none; color: var(--text);
  max-width: min(720px, calc(100vw - 32px)); width: 100%;
  margin: auto;   /* mittig, auch in älteren Umsetzungen */
}
.karte-dialog::backdrop {
  background: rgba(6, 9, 14, 0.55);
  backdrop-filter: blur(7px) saturate(0.85);
  -webkit-backdrop-filter: blur(7px) saturate(0.85);
}
.karte-dialog[open] { animation: karteRein 0.28s cubic-bezier(0.22, 1.1, 0.4, 1); }
@keyframes karteRein { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }

.visitenkarte {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 32px; align-items: center;
  background: var(--flaeche); border: 1px solid var(--linie-hell); border-radius: 10px;
  padding: 32px; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55);
}
.visitenkarte > * { min-width: 0; }
.karte-zu {
  position: absolute; top: 10px; right: 12px; width: 38px; height: 38px;
  background: none; border: 0; border-radius: 50%; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--text-3);
}
.karte-zu:hover { color: var(--text); background: var(--flaeche-2); }
.visitenkarte h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.05; margin: 10px 0 6px; }
.karte-firma { font-size: 16px; color: var(--text-2); }
.karte-rolle { font-size: 15px; color: var(--text-3); margin-top: 2px; }
.karte-daten { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 18px; margin: 22px 0 26px; font-size: 15px; }
.karte-daten dt { font-family: var(--mono); font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3); align-self: center; }
.karte-daten dd { margin: 0; color: var(--text); }
.karte-laden { width: fit-content; }
.karte-scan { margin: 0; text-align: center; }
.karte-scan img { width: 100%; max-width: 190px; height: auto; border-radius: 8px; margin: 0 auto; display: block; }
.karte-scan figcaption { margin-top: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; color: var(--text-3); line-height: 1.5; }

@media (max-width: 620px) {
  .visitenkarte { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 24px 20px; text-align: left; }
  .karte-scan img { max-width: 150px; }
  .karte-daten { margin: 18px 0 20px; }
}
@media (prefers-reduced-motion: reduce) { .karte-dialog[open] { animation: none; } }
html.ruhig .karte-dialog[open] { animation: none; }

/* ---- PDF-Werkzeug: läuft vollständig im Browser ---- */
.werkzeug { max-width: 760px; }
.werkzeug-feld {
  border: 2px dashed var(--linie-hell); border-radius: 8px; background: var(--flaeche);
  padding: 34px 24px; text-align: center; color: var(--text-3);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.werkzeug-feld.drueber { border-color: var(--cyan); background: var(--flaeche-2); }
.werkzeug-feld svg { margin: 0 auto 12px; color: var(--cyan); }
.werkzeug-titel { font-family: var(--display); font-size: 18px; font-weight: 600; color: var(--text); }
.werkzeug-klein { font-size: 14px; margin-top: 4px; }
.werkzeug-waehlen { margin-top: 18px; cursor: pointer; }
#pdfWahl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#pdfWahl:focus-visible + .werkzeug-klein { outline: none; }
.werkzeug-waehlen:focus-within, #pdfWahl:focus-visible ~ .werkzeug-waehlen { outline: 2px solid var(--cyan); outline-offset: 3px; }

.werkzeug-liste { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.werkzeug-liste:empty { margin: 0; }
.werkzeug-liste li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 5px; padding: 10px 12px;
}
.werkzeug-nr { font-family: var(--mono); font-size: 12px; color: var(--text-3); min-width: 1.6em; }
.werkzeug-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.werkzeug-groesse { font-family: var(--mono); font-size: 12px; color: var(--text-3); white-space: nowrap; }
.werkzeug-knoepfe { display: flex; gap: 4px; }
.werkzeug-knoepfe button {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--linie-hell); border-radius: 4px;
  color: var(--text-2); cursor: pointer; font-size: 14px; line-height: 1;
}
.werkzeug-knoepfe button:hover:not(:disabled) { border-color: var(--cyan); color: var(--text); }
.werkzeug-knoepfe button:disabled { opacity: 0.35; cursor: default; }

.werkzeug-aktion { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.werkzeug-aktion .knopf:disabled { opacity: 0.45; cursor: default; }
.werkzeug-status { margin-top: 14px; min-height: 1.6em; font-size: 15px; color: var(--text-2); }
.werkzeug-status.gut { color: #2f9e6b; }
.werkzeug-status.schlecht { color: var(--signal); }
html[data-thema="dunkel"] .werkzeug-status.gut, :root:not([data-thema]) .werkzeug-status.gut { color: #86d6a4; }
.werkzeug-hinweis { margin-top: 14px; font-size: 14px; color: var(--text-3); max-width: 60ch; }

@media (max-width: 560px) {
  .werkzeug-feld { padding: 26px 16px; }
  .werkzeug-liste li { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 6px; }
  .werkzeug-groesse { grid-column: 2; }
  .werkzeug-knoepfe { grid-column: 3; grid-row: 1 / span 2; }
}

/* Visitenkarte als Knopf neben Telefon und E-Mail */
button.knopf-rand { background: none; font-family: var(--body); cursor: pointer; }
.kontakt-knoepfe button.knopf { width: 100%; justify-content: space-between; }

/* ---- Aufklappmenü „Mehr" in der Kopfzeile ---- */
.nav-mehr { position: relative; }
.nav-mehr-knopf {
  display: inline-flex; align-items: center; gap: 6px; min-height: 24px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--text-2);
}
.nav-mehr-knopf:hover, .nav-mehr-knopf[aria-expanded="true"], .nav-mehr-knopf.aktiv { color: var(--text); }
.nav-mehr-knopf svg { transition: transform 0.2s ease; }
.nav-mehr-knopf[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-mehr-feld {
  position: absolute; top: calc(100% + 14px); right: -12px; min-width: 240px;
  background: var(--flaeche); border: 1px solid var(--linie-hell); border-radius: 8px;
  padding: 10px 8px; box-shadow: 0 22px 50px rgba(0, 0, 0, 0.35);
  display: none; flex-direction: column; z-index: 45;
}
.nav-mehr-feld::before {
  content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px;  /* Brücke für die Maus */
}
/* Öffnen per Maus (hover) oder per Knopf (JS setzt .offen). Keine focus-within-Regel,
   sonst bliebe das Feld nach Escape offen, solange der Knopf den Fokus hat. */
.nav-mehr.offen .nav-mehr-feld, .nav-mehr:hover .nav-mehr-feld { display: flex; }
.nav-mehr-gruppe { padding: 6px 12px 2px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.nav-mehr-gruppe + .nav-mehr-gruppe, .nav-mehr-feld a + .nav-mehr-gruppe { margin-top: 6px; border-top: 1px solid var(--linie); padding-top: 10px; }
.nav-mehr-feld a { display: block; padding: 8px 12px; border-radius: 5px; color: var(--text-2); font-size: 15px; }
.nav-mehr-feld a:hover, .nav-mehr-feld a.aktiv { background: var(--flaeche-2); color: var(--text); }
.nav-mehr-feld a::after { display: none; }

/* Im aufgeklappten Handymenü liegt alles flach untereinander */
@media (max-width: 1240px) {
  .nav.offen .nav-mehr { display: contents; }
  .nav.offen .nav-mehr-knopf { display: none; }
  .nav.offen .nav-mehr-feld {
    display: contents;
  }
  .nav.offen .nav-mehr-gruppe { padding: 14px var(--rand) 4px; border-top: 1px solid var(--linie); margin: 0; font-size: 11px; }
  .nav.offen .nav-mehr-feld a { padding: 14px var(--rand); border-radius: 0; border-top: 1px solid var(--linie); font-size: inherit; }
}

/* ---- Visitenkarte: eine Seite, echte Proportion, folgt der Farbvariante ----
   Dunkle Variante: schwarze Karte mit hellem Druck. Helle Variante: weiße Karte.
   Der QR-Code sitzt immer auf einer weißen Kachel, weil er Kontrast braucht. */
.karte-dialog { max-width: min(600px, calc(100vw - 32px)); overflow: visible; }
.karte-buehne { position: relative; perspective: 1600px; }
.karte-buehne:focus { outline: none; }   /* bekommt beim Öffnen den Fokus, damit kein Ring auf dem X liegt */
.visitenkarte {
  --karte-kante: 1px 1px 0 #3fcaff, 2px 2px 0 #1fa9e0, 3px 3px 0 #1489ba, 3.5px 4px 0 #0e6e98;
}
html[data-thema="hell"] .visitenkarte, html[data-thema="buehne"] .visitenkarte {
  --karte-kante: 1px 1px 0 #5ad2ff, 2px 2px 0 #2fb6ea, 3px 3px 0 #1c96c8, 3.5px 4px 0 #157aa5;
}
.visitenkarte {
  position: relative; aspect-ratio: 1.586 / 1; width: 100%; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 18px; align-items: end;
  padding: clamp(18px, 4.6vw, 30px) clamp(20px, 5vw, 32px);
  border-radius: 14px; color: var(--text);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(34,184,240,0.14), transparent 55%),
    linear-gradient(160deg, var(--flaeche-hoch) 0%, var(--flaeche) 55%, var(--grund-2) 100%);
  border: 1px solid var(--linie-hell);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    var(--karte-kante),
    4px 7px 6px rgba(0,0,0,0.3),
    0 18px 34px rgba(0,0,0,0.35),
    0 44px 80px rgba(0,0,0,0.3);
  transform: rotateX(calc(5deg + var(--kippX, 0deg))) rotateY(calc(-7deg + var(--kippY, 0deg)));
  transition: transform 0.35s ease;
  will-change: transform;
}
.visitenkarte::after {   /* Glanz, läuft beim Zeigen mit */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0) 62%);
  transform: translateX(var(--glanz, -45%)); transition: transform 0.35s ease;
}
html[data-thema="hell"] .visitenkarte, html[data-thema="buehne"] .visitenkarte {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    var(--karte-kante),
    4px 7px 6px rgba(20,40,60,0.16),
    0 18px 34px rgba(20,40,60,0.18),
    0 44px 80px rgba(20,40,60,0.16);
}
.karte-text { display: grid; gap: 4px; min-width: 0; }
.karte-logo { width: clamp(96px, 26%, 136px); height: auto; margin-bottom: clamp(6px, 2vw, 14px); }
.visitenkarte h2 { font-size: clamp(20px, 5vw, 27px); margin: 0; letter-spacing: -0.02em; }
.karte-firma { font-size: clamp(12px, 2.6vw, 14px); color: var(--text-2); }
.karte-rolle { font-size: clamp(11px, 2.4vw, 13px); color: var(--cyan-hell); }
html[data-thema="hell"] .karte-rolle, html[data-thema="buehne"] .karte-rolle { color: var(--cyan); }
.karte-daten { font-style: normal; display: grid; gap: 2px; margin-top: clamp(8px, 2.4vw, 16px); font-size: clamp(11.5px, 2.5vw, 13.5px); color: var(--text-2); }
.karte-daten a { color: var(--text); }
.karte-daten a:hover { color: var(--cyan-hell); }
.karte-scan { margin: 0; text-align: center; align-self: center; }
.karte-scan img {
  width: clamp(96px, 22vw, 132px); height: auto; display: block; margin: 0 auto;
  background: #fff; padding: 6px; border-radius: 8px; border: 1px solid var(--linie);
}
.karte-scan figcaption { margin-top: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.karte-leiterbahn {
  position: absolute; right: 0; bottom: 0; width: 100%; height: 34%;
  pointer-events: none; opacity: 0.22;
}
.karte-leiterbahn .lb-bahn path { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.karte-leiterbahn .lb-pad circle { fill: var(--flaeche); stroke: var(--cyan); stroke-width: 2; }
.karte-aktionen { display: flex; justify-content: center; margin-top: 22px; }
.karte-zu {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; background: none; color: var(--text-3);
  border: 0; font-size: 22px; line-height: 1;
}
.karte-zu:hover { color: var(--text); background: var(--flaeche-2); }
@media (max-width: 480px) {
  .visitenkarte { aspect-ratio: auto; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .karte-scan { justify-self: start; text-align: left; }
  .karte-scan img { margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .visitenkarte, .visitenkarte::after { transition: none; } }
.karte-daten { grid-template-columns: minmax(0, 1fr); }

/* Kopfzeile: nichts darf überlappen. Leiste und Aktionen behalten ihre Breite,
   darunter greift das Menü. Die Telefonnummer erscheint erst ab 1480 px. */
.nav, .kopf-aktion { flex-shrink: 0; }
.nav a, .nav-mehr-knopf { white-space: nowrap; }

/* ---- Branchenlösung: eine Karte mit Text, Merkmalen, Fakten und Bild ---- */
.loesung {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 40px; align-items: center;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; padding: 36px;
}
.abschnitt-tief .loesung { background: var(--flaeche-hoch); }
.loesung > * { min-width: 0; }
.loesung h3 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.08; margin: 10px 0 12px; }
.loesung-vorspann { color: var(--text-2); font-size: 16px; }
.loesung-merkmale { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.loesung-merkmale li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--text); line-height: 1.5; }
.loesung-merkmale svg { flex-shrink: 0; margin-top: 3px; color: var(--cyan); }
.loesung-fakten { margin-top: 22px; }
.loesung .linkpaar { margin-top: 22px; }
.loesung .werk-link { margin-top: 0; }
.loesung-bild .geraet-monitor { max-width: 520px; margin: 0 auto; }
@media (max-width: 940px) {
  .loesung { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 26px; }
  .loesung-bild { order: -1; }
}
@media (max-width: 560px) { .loesung { padding: 20px; } }

/* ---- Kleine Visitenkarte in der Seite: ein Klick zeigt sie groß im Dialog ----
   Kartenformat bleibt, Inhalt ist verkleinert, kein Knopf in der Karte. */
.karte-inline { margin-top: 40px; }
.kontakt .karte-inline { margin-top: 44px; }
.karte-mini {
  display: block; width: min(100%, 400px); padding: 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 12px;
}
.karte-mini:focus-visible { outline: 2px solid var(--cyan); outline-offset: 6px; }
.karte-mini .visitenkarte {
  aspect-ratio: 1.586 / 1; padding: 18px 20px; gap: 14px; border-radius: 10px;
  transform: perspective(1100px) rotateX(4deg) rotateY(-6deg); transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), var(--karte-kante), 4px 7px 6px rgba(0,0,0,0.3), 0 12px 28px rgba(0,0,0,0.32);
}
html[data-thema="hell"] .karte-mini .visitenkarte, html[data-thema="buehne"] .karte-mini .visitenkarte {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), var(--karte-kante), 4px 7px 6px rgba(20,40,60,0.16), 0 12px 28px rgba(20,40,60,0.16);
}
.karte-mini:hover .visitenkarte, .karte-mini:focus-visible .visitenkarte {
  transform: perspective(1100px) rotateX(4deg) rotateY(-6deg) translateY(-4px) scale(1.015);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), var(--karte-kante), 4px 8px 7px rgba(0,0,0,0.3), 0 24px 46px rgba(0,0,0,0.38);
}
html[data-thema="hell"] .karte-mini:hover .visitenkarte, html[data-thema="buehne"] .karte-mini:hover .visitenkarte {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), var(--karte-kante), 4px 8px 7px rgba(20,40,60,0.16), 0 24px 46px rgba(20,40,60,0.2);
}
.karte-mini .karte-logo { width: 74px; margin-bottom: 6px; }
.karte-mini .karte-name { display: block; font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: -0.02em; line-height: 1.1; }
.karte-mini .karte-firma { font-size: 11px; }
.karte-mini .karte-rolle { font-size: 10.5px; }
.karte-mini .karte-daten { margin-top: 8px; font-size: 10.5px; gap: 1px; }
.karte-mini .karte-scan img { width: 78px; padding: 4px; border-radius: 6px; }
.karte-mini .karte-leiterbahn { height: 30%; }
.karte-mini-hinweis {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; color: var(--text-3);
  transition: color 0.18s ease;
}
.karte-mini:hover .karte-mini-hinweis, .karte-mini:focus-visible .karte-mini-hinweis { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .karte-mini .visitenkarte { transition: none; } .karte-mini:hover .visitenkarte { transform: perspective(1100px) rotateX(4deg) rotateY(-6deg); } }
html.ruhig .karte-mini:hover .visitenkarte { transform: perspective(1100px) rotateX(4deg) rotateY(-6deg); }

/* Auf Touch-Geräten kann niemand den eigenen Bildschirm abscannen:
   dort verschwindet der QR-Code, „Kontakt sichern" ist der Hauptweg. */
@media (pointer: coarse), (max-width: 560px) {
  .visitenkarte { grid-template-columns: minmax(0, 1fr); aspect-ratio: auto; }
  .karte-mini .visitenkarte { aspect-ratio: auto; padding: 16px 18px; }
  .karte-scan { display: none; }
}