/* MEYNEXA Relaunch, Unterseiten und übernommene Bausteine. Baut auf relaunch.css auf. */

.seitenkopf {
  position: relative; margin: 12px; border-radius: var(--radius-buehne); overflow: hidden; isolation: isolate;
  color: var(--weiss); min-height: min(78svh, 760px); display: flex; align-items: flex-end;
  background:
    radial-gradient(ellipse 50% 70% at 82% 20%, rgba(0, 113, 188, 0.7), transparent 70%),
    radial-gradient(ellipse 40% 45% at 0% 100%, rgba(47, 147, 214, 0.22), transparent 70%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-tief) 100%);
}
.seitenkopf > .rahmen { padding-top: 150px; padding-bottom: clamp(40px, 7vh, 80px); }
.seitenkopf h1 {
  color: var(--weiss); font-size: clamp(2.6rem, 6.4vw, 6.2rem); line-height: 0.95; letter-spacing: -0.05em;
  margin: 18px 0 24px; max-width: 16ch;
}
.seitenkopf h1 .zeile { display: block; overflow: hidden; padding-bottom: 0.08em; }
.seitenkopf h1 .zeile > span { display: inline-block; transform: translateY(105%); animation: zeile-hoch 1s var(--kurve) forwards; }
.seitenkopf h1 .zeile:nth-child(2) > span { animation-delay: 0.1s; }
.seitenkopf p { max-width: 58ch; font-size: clamp(1.02rem, 1.3vw, 1.2rem); color: rgba(255, 255, 255, 0.82); margin: 0 0 28px; }
.seitenkopf .vermerk { color: var(--hell); }
.seitenkopf-unten { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.brotkrumen { margin-bottom: 26px; }
.brotkrumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; font: 400 0.72rem var(--mono); text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.55); }
.brotkrumen li + li::before { content: '/'; margin-right: 10px; color: rgba(47, 147, 214, 0.7); }
.brotkrumen a { text-decoration: none; color: rgba(255, 255, 255, 0.75); }
.brotkrumen a:hover { color: var(--weiss); }
.sprungmarken { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: 540px; justify-content: flex-end; }
.sprungmarken a {
  display: inline-block; text-decoration: none; color: var(--weiss); font-weight: 700; font-size: 0.92rem;
  padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.22); transition: background 0.2s, border-color 0.2s;
}
.sprungmarken a:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--hell); }

/* Leistungsblock: links Titel, rechts Inhalt */
.leistung { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(30px, 6vw, 110px); padding: clamp(70px, 9vw, 130px) 0; border-top: 1px solid var(--linie); scroll-margin-top: 90px; }
.leistung.erste { border-top: 0; }
.leistung-kopf { position: sticky; top: 120px; align-self: start; }
.leistung-kopf h2 { font-size: clamp(1.9rem, 3.6vw, 3.1rem); line-height: 1.04; letter-spacing: -0.04em; margin: 16px 0 18px; }
.leistung-kopf p { color: var(--grau); margin: 0; max-width: 36ch; }
.leistung-text > p { font-size: 1.08rem; max-width: 62ch; margin: 0 0 18px; }
.leistung-text h3 { font-size: 1.25rem; margin: 30px 0 4px; }
.liste-haken { list-style: none; padding: 0; margin: 26px 0; display: grid; border-top: 1px solid var(--linie); }
.liste-haken li { padding: 14px 0 14px 34px; border-bottom: 1px solid var(--linie); position: relative; font-weight: 700; color: var(--tinte); }
.liste-haken li small { display: block; font-weight: 400; color: var(--text); font-size: 0.95rem; margin-top: 3px; }
.liste-haken li::before { content: ''; position: absolute; left: 4px; top: 1.15em; width: 11px; height: 6px; border-left: 2.5px solid var(--blau); border-bottom: 2.5px solid var(--blau); transform: rotate(-45deg); }
.beleg {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; margin-top: 26px;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: 20px 22px;
}
.beleg .vermerk { white-space: nowrap; padding-top: 2px; }
.beleg p { margin: 0; font-size: 0.98rem; }
.beleg a { color: var(--blau); font-weight: 700; }
.leistung-bild { margin: 26px 0 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--linie); background: var(--weiss); }
.leistung-bild img, .leistung-bild video { width: 100%; height: auto; display: block; }
.leistung-bild.hochkant { max-width: 340px; }
.leistung-bild figcaption { font: 400 0.72rem var(--mono); color: var(--grau); padding: 10px 14px; border-top: 1px solid var(--linie); }
.bildreihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 26px; }
.bildreihe figure { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--linie); background: var(--weiss); }
.bildreihe img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.bildreihe figcaption { font: 400 0.68rem var(--mono); color: var(--grau); padding: 8px 10px; }

/* Werkzeug im Leistungsblock: der alte Baustein in einer ruhigen Fläche */
.werkzeug-flaeche { margin-top: 30px; }
.werkzeug-flaeche .baustein .werkzeug { margin: 0; }

/* Kacheln der vier Bündel */
.buendel-kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); }
.buendel-kachel {
  position: relative; display: flex; flex-direction: column; text-decoration: none; color: inherit; min-height: 340px;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius-buehne); padding: clamp(26px, 3vw, 40px);
  transition: transform 0.6s var(--kurve), box-shadow 0.5s, border-color 0.3s; overflow: hidden;
}
.buendel-kachel::after {
  content: ''; position: absolute; right: -80px; bottom: -80px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 113, 188, 0.16), transparent 70%); transition: transform 0.8s var(--kurve);
}
.buendel-kachel:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -45px rgba(7, 28, 43, 0.55); border-color: rgba(0, 113, 188, 0.35); }
.buendel-kachel:hover::after { transform: scale(1.6); }
.buendel-kachel h2, .buendel-kachel h3 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.05; margin: 14px 0 16px; }
.buendel-kachel p { margin: 0 0 20px; max-width: 46ch; }
.buendel-kachel ul { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.buendel-kachel li { font-size: 0.88rem; font-weight: 700; color: var(--navy); background: rgba(0, 113, 188, 0.07); padding: 7px 12px; border-radius: 999px; }
.buendel-kachel .weiter { margin-top: auto; font-weight: 800; color: var(--blau); display: inline-flex; gap: 10px; align-items: center; position: relative; z-index: 1; }
.buendel-kachel .weiter::after { content: '\2192'; transition: transform 0.4s var(--kurve); }
.buendel-kachel:hover .weiter::after { transform: translateX(6px); }
.nachbarn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.nachbarn .buendel-kachel { min-height: 0; }
.nachbarn .buendel-kachel h3 { font-size: 1.35rem; margin: 10px 0 18px; }

/* Allgemeiner Fuß */
.fuss-spalten { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 0.7fr)); gap: clamp(26px, 4vw, 60px); }
.fuss-spalten h3 { font-size: 0.78rem; font-family: var(--mono); font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; color: var(--grau); margin: 0 0 14px; }
.fuss-spalten ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.fuss-spalten a { text-decoration: none; font-weight: 700; color: var(--tinte); }
.fuss-spalten a:hover { color: var(--blau); }
.fuss-marke img { height: 54px; width: auto; margin-bottom: 16px; }
.fuss-marke p { max-width: 34ch; color: var(--text); margin: 0; }
.fuss-spalten a.fuss-anfrage { color: var(--blau); }
.fuss-spalten a.fuss-anfrage span { display: inline-block; transition: transform 0.25s var(--kurve); }
.fuss-spalten a.fuss-anfrage:hover { color: var(--navy); }
.fuss-spalten a.fuss-anfrage:hover span { transform: translateX(4px); }

/* Story */
.zeitleiste { list-style: none; padding: 0; margin: 0; position: relative; }
.zeitleiste::before { content: ''; position: absolute; left: 118px; top: 8px; bottom: 8px; width: 2px; background: var(--linie); }
.zeitleiste li { display: grid; grid-template-columns: 100px 1fr; gap: 40px; padding: 0 0 46px; position: relative; }
.zeitleiste li::after { content: ''; position: absolute; left: 112px; top: 8px; width: 14px; height: 14px; border-radius: 50%; background: var(--papier); border: 3px solid var(--blau); }
.zeitleiste time { font-family: var(--mono); font-size: 0.82rem; color: var(--blau); text-transform: uppercase; padding-top: 4px; text-align: right; }
.zeitleiste h3 { font-size: 1.35rem; margin: 0 0 8px; }
.zeitleiste p { margin: 0; max-width: 58ch; }
.marken-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); }
.marke-karte { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius-buehne); padding: clamp(28px, 3vw, 44px); display: flex; flex-direction: column; scroll-margin-top: 100px; }
.marke-karte > img { height: 64px; width: auto; align-self: flex-start; margin: 20px 0 26px; }
.marke-karte h3 { font-size: 1.7rem; margin: 0 0 12px; }
.marke-karte .liste-haken { margin: 18px 0 26px; }
.marke-karte .knopf { align-self: flex-start; margin-top: auto; }
.marke-karte.geplant { background: transparent; border-style: dashed; }
.status { display: inline-flex; align-self: flex-start; font: 400 0.7rem var(--mono); text-transform: uppercase; letter-spacing: 0.05em; padding: 6px 10px; border-radius: 999px; background: rgba(0, 113, 188, 0.09); color: var(--blau); }
.status.geplant { background: rgba(120, 119, 119, 0.12); color: var(--grau); }

/* Referenzen */
.ref-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); }
.ref { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.ref-bild { aspect-ratio: 4 / 3; background: var(--papier); overflow: hidden; }
.ref-bild img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 1s var(--kurve); }
.ref:hover .ref-bild img { transform: scale(1.04); }
.ref-text { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.ref-text .vermerk { font-size: 0.66rem; }
.ref-text h3 { font-size: 1.15rem; margin: 10px 0 8px; }
.ref-text p { margin: 0 0 14px; font-size: 0.95rem; }
.ref-text small { margin-top: auto; font-family: var(--mono); font-size: 0.7rem; color: var(--grau); }

/* Kontakt */
.kontakt-raster { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(30px, 6vw, 100px); align-items: start; }
.formular-karte { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius-buehne); padding: clamp(24px, 3.5vw, 44px); }

/* Übernommene Bausteine in das neue System einpassen */
.baustein { background: transparent; overflow: visible; color: var(--text); font-family: var(--schrift); }
.baustein section, .baustein .section-alt, .baustein .video-bereich { background: transparent; }
.baustein .container { max-width: calc(var(--breite) + 2 * var(--rand)); padding: 0 var(--rand); }
.baustein .eyebrow { font-family: var(--mono); font-weight: 400; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--blau); }
.baustein h2 { letter-spacing: -0.035em; }
.baustein .btn { border-radius: 999px; font-weight: 800; }
.baustein .btn-primary { background: var(--blau); }
.baustein .btn-primary:hover { background: var(--navy); }
.baustein .section-head h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.05; }

@media (max-width: 1080px) {
  .fuss-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ref-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nachbarn { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .seitenkopf { min-height: 0; }
  .seitenkopf > .rahmen { padding-top: 140px; }
  .seitenkopf h1 { font-size: clamp(2.3rem, 11vw, 3.4rem); }
  .sprungmarken { justify-content: flex-start; }
  .leistung, .kontakt-raster, .buendel-kacheln, .marken-raster { grid-template-columns: minmax(0, 1fr); }
  .leistung-kopf { position: static; }
  .beleg { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .bildreihe { grid-template-columns: minmax(0, 1fr); }
  .ref-raster, .fuss-spalten { grid-template-columns: minmax(0, 1fr); }
  .zeitleiste::before { left: 6px; }
  .zeitleiste li { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-left: 34px; }
  .zeitleiste li::after { left: 0; }
  .zeitleiste time { text-align: left; }
}

/* Anfragefreundlich: feste Leiste am Handy, Ablauf nach der Anfrage */
.handy-leiste { display: none; }
@media (max-width: 760px) {
  .handy-leiste {
    display: flex; justify-content: center; align-items: center; position: fixed; z-index: 55; left: 12px; right: 12px; bottom: 12px;
    padding: 16px; border-radius: 999px; background: var(--blau); color: var(--weiss); font-weight: 800; text-decoration: none;
    box-shadow: 0 18px 40px -16px rgba(7, 28, 43, 0.6);
    transform: translateY(140%); transition: transform 0.5s var(--kurve);
  }
  .handy-leiste.an { transform: none; }
  .entwurf-schild { bottom: 80px; }
  .fuss { padding-bottom: 96px; }
}
.ablauf-kurz { list-style: none; padding: 0; margin: 10px 0 0; counter-reset: a; border-top: 1px solid var(--linie); }
.ablauf-kurz li { counter-increment: a; display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--linie); }
.ablauf-kurz li::before { content: counter(a); grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: var(--weiss); font-weight: 800; font-size: 0.85rem; display: grid; place-items: center; }
.ablauf-kurz strong { color: var(--tinte); }
.seitenkopf-unten .knopf { margin-top: 2px; }

/* Cockpit-Demo als eigener, breiter Abschnitt */
.demo-abschnitt { padding: clamp(60px, 8vw, 110px) 0; border-top: 1px solid var(--linie); scroll-margin-top: 90px; }
.demo-kopf { max-width: 760px; }
.demo-kopf h2 { font-size: clamp(1.9rem, 3.6vw, 3.1rem); line-height: 1.04; letter-spacing: -0.04em; margin: 16px 0 18px; }
.demo-kopf p { color: var(--grau); margin: 0; max-width: 62ch; }

/* Fragen-Überschrift in der schmalen linken Spalte: lange Wörter wie "Zusammenarbeit" ragten in die Fragen */
.fragen-raster h2.titel-gross { font-size: clamp(2rem, 3.3vw, 3.1rem); hyphens: auto; overflow-wrap: break-word; }

/* Analyse-Netz und Funnel-Block der alten Seite hatten eine feste 380-px-Spalte, in der schmalen Textspalte
   der Bündelseiten lief das bei 1180 px rechts aus dem Fenster */
.baustein .analyse-karte, .baustein .funnel-block { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
@media (max-width: 1280px) { .baustein .analyse-karte, .baustein .funnel-block { grid-template-columns: minmax(0, 1fr); } }

/* Seitenkopf mit eigenem Hintergrundbild je Unterseite. Der Verlauf von links hält die Schrift lesbar,
   das Motiv steht rechts. Das blaue Licht des normalen Kopfs liegt leicht darüber, damit alle Köpfe verwandt bleiben. */
.seitenkopf.mit-motiv { background: var(--navy-tief); }
/* Bild und Verlauf als eigene Ebenen: das Bild fährt langsam (Kamerafahrt) und bleibt beim Scrollen etwas zurück
   (Tiefe), der Verlauf darüber steht fest und hält die Schrift lesbar (Tim, 27.10.2026: „die Hintergründe bewegen
   sich nicht mehr“, seit die Bildschirminhalte ins Bild gerechnet sind) */
.seitenkopf.mit-motiv::before, .seitenkopf.mit-motiv::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.seitenkopf.mit-motiv::before {
  z-index: -2; background: var(--kopfbild) right center / cover no-repeat;
  transform-origin: 72% 50%; translate: 0 var(--kopf-tiefe, 0px); will-change: transform;
  animation: kopf-fahrt 26s ease-in-out infinite alternate;
}
.seitenkopf.mit-motiv::after {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(7, 28, 43, 0.94) 0%, rgba(7, 28, 43, 0.78) 34%, rgba(7, 28, 43, 0.25) 62%, rgba(7, 28, 43, 0.05) 100%),
    linear-gradient(0deg, rgba(7, 28, 43, 0.75) 0%, rgba(7, 28, 43, 0) 32%);
}
@keyframes kopf-fahrt { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.1) translate3d(-1.6%, -1.2%, 0); } }
@media (max-width: 760px) {
  .seitenkopf.mit-motiv::before { background: var(--kopfbild-handy) center 44px / 100% auto no-repeat; transform-origin: 50% 22%; }
  .seitenkopf.mit-motiv::after {
    background: linear-gradient(180deg, rgba(7, 28, 43, 0.25) 0%, rgba(7, 28, 43, 0.6) 38%, rgba(7, 28, 43, 0.93) 62%, var(--navy-tief) 100%);
  }
}
@media (prefers-reduced-motion: reduce) { .seitenkopf.mit-motiv::before { animation: none; translate: none; } }

/* Bewegte Ebenen auf den Kopfbildern (Bildschirme, Papier, Würfel). Lage und Verzerrung rechnet effekte.js. */
.kopf-ebenen { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.seitenkopf.mit-motiv > .rahmen { position: relative; z-index: 1; }
.kopf-ebene { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; opacity: 0; transition: opacity 0.8s; }
.kopf-ebene.da { opacity: var(--sicht, 1); }
.kopf-ebene.schirm { background: #0B1A27; filter: brightness(0.74) contrast(0.92) saturate(0.95) blur(0.25px); border-radius: 4px; }
/* Bildschirm im Raum: Ränder fallen ab, ein kühler Schimmer liegt über dem Bild, oben links spiegelt das Glas */
.kopf-ebene.schirm::before { content: ''; position: absolute; inset: 0; z-index: 1; box-shadow: inset 0 0 60px 8px rgba(4, 14, 32, 0.6); background: rgba(30, 80, 160, 0.14); mix-blend-mode: multiply; }
.kopf-ebene.schirm::after { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(118deg, rgba(200, 225, 255, 0.16) 0%, rgba(200, 225, 255, 0.04) 30%, transparent 46%), radial-gradient(ellipse at 50% 120%, rgba(47, 147, 214, 0.18), transparent 60%); }
.kopf-ebene.handy-schirm { border-radius: 26px; }
.kopf-ebene.schirm video { width: 100%; height: 100%; object-fit: cover; display: block; }
.kopf-ebene.lauf img { width: 100%; height: auto; display: block; animation: ebene-lauf var(--lauf, 30s) ease-in-out infinite alternate; }
@keyframes ebene-lauf { from { transform: translateY(0); } to { transform: translateY(calc(-100% + var(--hoehe, 400px))); } }
.kopf-ebene.papier { mix-blend-mode: multiply; }
.kopf-ebene.papier img { width: 100%; height: 100%; display: block; filter: saturate(0.9) contrast(0.95); }
.kopf-ebene.gravur { display: grid; place-items: center; }
.ebene-gravur { display: grid; justify-items: center; gap: 10px; text-align: center; color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 0 18px rgba(47, 147, 214, 0.9), 0 0 4px rgba(255, 255, 255, 0.5); }
.ebene-gravur small { font: 700 1.9rem var(--mono); letter-spacing: 0.12em; color: rgba(156, 203, 238, 0.95); }
.ebene-gravur b { font-weight: 900; font-size: 2.85rem; letter-spacing: -0.02em; line-height: 1; }
@media (prefers-reduced-motion: reduce) { .kopf-ebene.lauf img { animation: none; } }

/* ---------------------------------------------------------------- Untermenü Leistungen (Computer) */
.nav-gruppe { position: relative; display: flex; }
.kopfzeile nav .nav-gruppe > a { display: inline-flex; align-items: center; gap: 6px; }
.nav-gruppe > a svg { width: 12px; height: 12px; transition: transform 0.25s var(--kurve); }
.untermenue {
  position: absolute; top: calc(100% + 16px); left: 50%; width: 660px; padding: 14px;
  background: rgba(250, 252, 253, 0.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--linie); border-radius: 22px; box-shadow: 0 34px 80px -34px rgba(7, 28, 43, 0.55);
  opacity: 0; visibility: hidden; transform: translate(-50%, 8px);
  transition: opacity 0.2s, transform 0.3s var(--kurve), visibility 0s linear 0.3s;
}
.untermenue::before { content: ''; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
.nav-gruppe:hover .untermenue, .nav-gruppe:focus-within .untermenue { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.nav-gruppe:hover > a svg, .nav-gruppe:focus-within > a svg { transform: rotate(180deg); }
.um-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.kopfzeile nav .um-karte {
  display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 8px; border-radius: 16px; color: var(--navy); font-size: inherit;
}
.kopfzeile nav .um-karte:hover, .kopfzeile nav .um-karte[aria-current="page"] { background: rgba(0, 113, 188, 0.08); }
.um-karte img { width: 68px; height: 68px; border-radius: 12px; object-fit: cover; object-position: 58% center; display: block; }
.um-karte small { display: block; font: 400 0.66rem var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--blau); }
.um-karte b { display: block; font-size: 0.98rem; font-weight: 800; margin: 3px 0 2px; }
.um-karte em { display: block; font-style: normal; font-weight: 400; font-size: 0.82rem; color: var(--grau); line-height: 1.35; }
.kopfzeile nav .um-alle {
  display: flex; justify-content: space-between; margin-top: 8px; padding: 13px 16px; border-radius: 14px;
  background: var(--papier); color: var(--blau); font-weight: 800;
}
.kopfzeile nav .um-alle:hover { background: rgba(0, 113, 188, 0.1); }

/* ---------------------------------------------------------------- Schublade (Handy und Tablet) */
.schublade, .schublade-schleier { display: none; }
@media (max-width: 1080px) {
  .schublade-schleier {
    display: block; position: fixed; inset: 0; z-index: 60; background: rgba(7, 28, 43, 0.45);
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); opacity: 0; pointer-events: none; transition: opacity 0.35s;
  }
  .schublade {
    display: flex; flex-direction: column; gap: 12px; position: fixed; z-index: 61; top: 0; right: 0; bottom: 0;
    width: min(420px, 92vw); padding: 14px 18px 26px; overflow-y: auto; overscroll-behavior: contain;
    background: var(--papier-hell); border-radius: 26px 0 0 26px; box-shadow: -30px 0 70px -30px rgba(7, 28, 43, 0.55);
    transform: translateX(104%); transition: transform 0.45s var(--kurve); visibility: hidden;
  }
  body.schublade-offen { overflow: hidden; }
  body.schublade-offen .schublade-schleier { opacity: 1; pointer-events: auto; }
  body.schublade-offen .schublade { transform: none; visibility: visible; }
  body.schublade-offen .schublade > * { animation: sb-ein 0.5s var(--kurve) both; }
  body.schublade-offen .schublade > :nth-child(2) { animation-delay: 0.05s; }
  body.schublade-offen .schublade > :nth-child(3) { animation-delay: 0.09s; }
  body.schublade-offen .schublade > :nth-child(4) { animation-delay: 0.13s; }
  body.schublade-offen .schublade > :nth-child(n+5) { animation-delay: 0.17s; }
  @keyframes sb-ein { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
  .sb-kopf { display: flex; justify-content: space-between; align-items: center; padding-bottom: 4px; }
  .sb-kopf img { height: 38px; width: auto; display: block; }
  .sb-zu { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--linie); background: var(--weiss); position: relative; cursor: pointer; }
  .sb-zu span::before, .sb-zu span::after { content: ''; position: absolute; left: 14px; top: 22px; width: 18px; height: 2px; background: var(--navy); transform: rotate(45deg); }
  .sb-zu span::after { transform: rotate(-45deg); }
  .sb-vermerk { margin: 8px 2px 0; font: 400 0.7rem var(--mono); text-transform: uppercase; letter-spacing: 0.07em; color: var(--grau); }
  .sb-buendel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sb-karte {
    position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 124px; padding: 10px 12px;
    border-radius: 16px; overflow: hidden; text-decoration: none; color: var(--weiss); background: var(--navy-tief);
  }
  .sb-karte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% center; opacity: 0.8; }
  .sb-karte::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 28, 43, 0) 25%, rgba(7, 28, 43, 0.9) 100%); }
  .sb-karte small, .sb-karte b { position: relative; z-index: 1; }
  .sb-karte small { font: 400 0.62rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: #9CCBEE; }
  .sb-karte b { font-size: 0.95rem; font-weight: 800; line-height: 1.15; margin-top: 3px; }
  .sb-karte[aria-current="page"] { box-shadow: 0 0 0 2px var(--hell); }
  .sb-alle { display: flex; justify-content: space-between; padding: 13px 15px; border-radius: 14px; background: rgba(0, 113, 188, 0.08); color: var(--blau); font-weight: 800; text-decoration: none; }
  .sb-liste { display: grid; border-top: 1px solid var(--linie); }
  .sb-liste a { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 12px 4px; border-bottom: 1px solid var(--linie); text-decoration: none; color: var(--navy); }
  .sb-liste b { font-weight: 800; font-size: 1.02rem; }
  .sb-liste span { grid-column: 1; font-size: 0.82rem; color: var(--grau); }
  .sb-liste i { grid-column: 2; grid-row: 1 / 3; align-self: center; font-style: normal; color: var(--blau); }
  .sb-liste a[aria-current="page"] b { color: var(--blau); }
  .sb-anfrage { display: grid; gap: 6px; padding: 18px; border-radius: 20px; background: var(--navy); color: var(--weiss); margin-top: 6px; }
  .sb-anfrage b { font-size: 1.05rem; }
  .sb-anfrage span { font-size: 0.88rem; color: rgba(255, 255, 255, 0.75); }
  .sb-anfrage .knopf { margin-top: 8px; justify-content: center; }
  .sb-mail { color: #9CCBEE; font-size: 0.85rem; text-align: center; margin-top: 4px; }
  .sb-vertrauen { text-align: center; font-size: 0.75rem; color: var(--grau); margin: 2px 0 0; }
}

/* ---------------------------------------------------------------- Karussells am Handy */
.karussell-punkte { display: none; }
@media (max-width: 760px) {
  .handy-karussell {
    display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px;
    margin-left: calc(-1 * var(--rand)); margin-right: calc(-1 * var(--rand));
    padding: 4px var(--rand) 12px; scroll-padding-inline: var(--rand); scrollbar-width: none;
  }
  .handy-karussell::-webkit-scrollbar { display: none; }
  .handy-karussell > * { flex: 0 0 84%; min-width: 0; scroll-snap-align: start; }
  .handy-karussell > .zeigen { opacity: 1 !important; transform: none !important; }
  .karussell-punkte { display: flex; justify-content: center; gap: 7px; margin-top: 6px; }
  .karussell-punkte button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: rgba(13, 45, 68, 0.2); cursor: pointer; transition: width 0.3s var(--kurve), background 0.3s; }
  .karussell-punkte button[aria-current="true"] { width: 24px; background: var(--blau); }
  .seitenkopf .karussell-punkte button, .abschluss .karussell-punkte button { background: rgba(255, 255, 255, 0.3); }
  /* Referenzen: neun Karten als 2er-Raster statt untereinander */
  .ref-raster { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .ref-text { padding: 12px !important; }
  .ref-text h3 { font-size: 0.95rem !important; line-height: 1.2; }
  .ref-text p { font-size: 0.82rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .ref-text small { font-size: 0.72rem; }
}

/* Cookie-Hinweis */
.zustimmung {
  position: fixed; z-index: 70; left: 24px; bottom: 24px; max-width: 440px; padding: 20px 22px; display: grid; gap: 12px;
  background: var(--papier-hell); color: var(--text); border: 1px solid var(--linie); border-radius: 22px;
  box-shadow: 0 30px 70px -30px rgba(7, 28, 43, 0.55); opacity: 0; transform: translateY(16px);
  transition: opacity 0.35s, transform 0.45s var(--kurve);
}
.zustimmung.an { opacity: 1; transform: none; }
.zustimmung p { margin: 0; font-size: 0.88rem; line-height: 1.55; }
.zustimmung p b { color: var(--navy); }
.zustimmung a { color: var(--blau); }
.zustimmung details { font-size: 0.82rem; color: var(--grau); }
.zustimmung summary { cursor: pointer; font-weight: 700; color: var(--navy); }
.zustimmung ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.zustimmung-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.zustimmung-knoepfe .knopf { justify-content: center; padding: 13px 14px; font-size: 0.9rem; }
.zustimmung-knoepfe .knopf::after { display: none; }
.knopf.knopf-rand { background: var(--weiss); color: var(--navy); border: 1.5px solid var(--navy); }
.knopf.knopf-rand:hover { background: var(--navy); color: var(--weiss); }
@media (max-width: 760px) {
  .zustimmung { left: 12px; right: 12px; bottom: 12px; max-width: none; padding: 18px; }
  body:has(.zustimmung.an) .handy-leiste { transform: translateY(140%) !important; }
}
.fuss-unten a { color: inherit; }

/* Tippflächen am Handy: mindestens 44 px hoch (Apple), Klickpunkte und Regler fingerfreundlich, gemessen 27.10.2026 */
@media (max-width: 760px) {
  .textlink, .quelle a, .kontaktwege a, .baustein .geraete-karte a[target="_blank"] { display: inline-flex; align-items: center; min-height: 44px; }
  .demo-punkt { width: 40px !important; height: 40px !important; font-size: 0.85rem !important; }
  input[type="range"] { height: 32px; }
  .cd-tabs button { min-height: 40px; padding: 9px 14px; }
  .cd-nav-knopf { min-height: 44px; }
}

/* Kontaktformular über Contact Form 7 (live): CF7 legt jedes Feld in eine Hülle und hängt Hinweise an */
.formular .wpcf7-form-control-wrap { display: block; }
.formular .wpcf7-form-control-wrap > input, .formular .wpcf7-form-control-wrap > select, .formular .wpcf7-form-control-wrap > textarea { width: 100%; box-sizing: border-box; }
.formular input[type="submit"].knopf { width: auto; padding: 16px 26px; border: 0; border-radius: 999px; background: var(--blau); color: var(--weiss); font-weight: 800; cursor: pointer; }
.formular input[type="submit"].knopf:hover { background: var(--navy); }
.formular-senden { display: flex; align-items: center; gap: 12px; }
.formular .wpcf7-not-valid-tip { display: block; margin-top: 4px; font-size: 0.8rem; font-weight: 600; color: #C62828; }
.formular .wpcf7-not-valid { border-color: #C62828 !important; }
.formular-karte .wpcf7-response-output { margin: 16px 0 0 !important; padding: 14px 16px !important; border-radius: 12px; border: 1px solid var(--linie) !important; font-size: 0.92rem; }
.formular-karte .wpcf7 form.sent .wpcf7-response-output { border-color: #2E7D32 !important; background: #E8F7EE; color: #1B5E20; }
.formular-karte .wpcf7 form.invalid .wpcf7-response-output, .formular-karte .wpcf7 form.failed .wpcf7-response-output { border-color: #E8A13A !important; background: #FFF8EC; color: #8A4B00; }
.formular .wpcf7-spinner { margin: 0; }
.formular a { color: var(--blau); }