/* Beweglicher Flamingo im Manifest (nur index-3d-vogel.html).
   Der Text bleibt links und wird schmaler, der Vogel steht rechts auf der
   Unterkante der pinken Fläche. Nichts liegt über dem Text. */
.manifest-vogel {
  position: absolute; right: var(--rand); bottom: 0;
  height: min(72vh, 34vw); aspect-ratio: 1650 / 1600;   /* = viewBox der Rolle hals in js/flamingo.js; schmal genug, dass der Vogel keinen Text deckt */
  opacity: 0; transform: translateY(40px);
  transition: opacity .7s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
  pointer-events: none;
}
.manifest-vogel.da { opacity: 1; transform: none; }
/* Puppe füllt die Box; das stehende Bild (Editor, ohne JS) sitzt an derselben Stelle wie die Puppe
   (Bild: viewBox -20 50 1380 1550 innerhalb von -250 40 1650 1600) */
.manifest-puppe { position: absolute; inset: 0; }
.manifest-puppe > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.manifest-puppe > img { position: absolute; left: 13.94%; top: .63%; width: 83.64%; height: 96.88%; max-width: none; }
.manifest-puppe.laeuft > img { display: none; }
/* Klickfläche über dem Vogel (die Box selbst lässt Klicks durch) */
.vogel-knopf {
  position: absolute; left: 20%; top: 4%; width: 62%; height: 92%;
  pointer-events: auto; cursor: pointer;
  background: none; border: 0; padding: 0; border-radius: 40%;
}
.vogel-knopf:focus-visible { outline: 2px solid var(--weiss); outline-offset: 4px; }

/* Sprechblase rechts über dem Kopf, wechselt bei jedem Klick (4 Texte, js/vogel.js) */
.vogel-blase {
  position: absolute; left: 60%; top: 0;
  font: 500 13px/1.35 var(--mono); color: var(--berry); background: var(--weiss);
  padding: 9px 13px; border-radius: 14px 14px 14px 3px;
  max-width: 24ch; transform-origin: 0 100%;
}
.vogel-blase.neu { animation: blase-auf .45s cubic-bezier(.3, 1.6, .5, 1); }
/* Vier Sätze im HTML (im Editor bearbeitbar), sichtbar ist immer einer */
.vogel-satz { display: none; }
.vogel-satz.an, .vogel-blase:not(:has(.an)) .vogel-satz:first-child { display: inline; }
/* Im Editor stehen alle Sätze untereinander, damit man jeden bearbeiten, verschieben, duplizieren
   und löschen kann (Liste vogel-saetze). Die Blase ist dort anklickbar und liegt über dem Klickknopf. */
html.cms-an .vogel-blase { pointer-events: auto; z-index: 3; max-width: 30ch; }
html.cms-an .vogel-knopf { display: none; }
html.cms-an .vogel-satz { display: block; }
html.cms-an .vogel-satz + .vogel-satz { margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(37, 0, 38, .3); }
@keyframes blase-auf { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* Wörter des Manifests einzeln bewegbar (sie plätschern automatisch herunter) */
.manifest-text .w { display: inline-block; }

/* Platz für den Vogel: Text endet bei gut der Hälfte der Breite */
.manifest > p, .manifest .aktionen { max-width: min(36em, 50vw); }
.manifest .manifest-text { max-width: min(24ch, 50vw); }

/* ================= Handwerk oder KI-gestützt ================= */
/* Kräftiges Türkis wie auf der Website Langer Hals statt des blassen Ice */
.duell { --blau: var(--tuerkis2); }
.welt--hand { background: var(--blau); }
.welt--ki { color: var(--blau); }
.welt--ki .kicker, .welt--ki .welt-karte { color: var(--blau); }
/* „Oder beides.“ würde sonst den Hals kreuzen: nach oben zwischen Schalter und Wörter */
@media (min-width: 901px) {
  .naht-label { top: calc(var(--kopf-h) + 82px); transform: none; }
}

/* Neue, längere Wörter: kleiner, damit sie beim Teilen in ihre Hälfte passen */
.welt--hand .welt-wort { font-size: clamp(56px, 11vw, 200px); }
.welt--ki .welt-wort { font-size: clamp(40px, 7.4vw, 140px); }
/* Am Desktop stehen die Wörter oben, unten in der Mitte steht der Flamingo */
@media (min-width: 901px) {
  .welt { justify-content: flex-start; padding-top: calc(var(--kopf-h) + 110px); }
}

/* Kopf und echter Hals aus dem Originalfoto, so groß wie der Header-Kopf von
   Langer Hals bei der Breite --b (dessen Bild ist 714 px breit).
   Umrechnung: Originalbild 760 px × 1,83 / 714 = 1,948 × --b.
   Ausschnitt 280 × 194 px des Originals → 0,718 × 0,497 --b. Die Unterkante ist
   Zeile 194 (Beginn des Rückens) und sitzt auf der Unterkante der Bühne. */
.duell-flamingo {
  --b: min(714px, 40vw);
  position: absolute; z-index: 4; bottom: 0;
  left: calc(50% - var(--b) * .2853);
  width: calc(var(--b) * .7177); height: calc(var(--b) * .4973);
  pointer-events: none;
}
.duell-flamingo canvas, .df-zubehoer { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.df-zubehoer { overflow: visible; }
.df-brille {
  opacity: 0; transform-box: fill-box; transform: translateY(-150%);
  transition: opacity .25s, transform .6s cubic-bezier(.3, 1.5, .5, 1);
}
.df-rahmen { opacity: 0; transition: opacity .3s .35s; }
.duell-buehne.ki-an .df-brille { opacity: 1; transform: none; }
.duell-buehne.ki-an .df-rahmen { opacity: 1; }

/* Stärkerer Schalter: zwei klare Felder, das aktive ist gefüllt */
.umschalter {
  font-size: 14px; letter-spacing: .04em; padding: 8px 8px 8px 22px; gap: 16px;
  border: 2px solid var(--berry); box-shadow: 0 14px 40px rgba(37, 0, 38, .28);
}
.schalter { padding: 5px; gap: 6px; background: var(--berry); }
.schalter .s-h, .schalter .s-k {
  padding: 11px 18px; border-radius: 999px; opacity: 1;
  transition: background .35s, color .35s;
}
.schalter .s-h { background: var(--weiss); color: var(--berry); }
.schalter .s-k { color: rgba(255, 255, 255, .6); }
.schalter .s-bahn { width: 50px; height: 28px; background: rgba(255, 255, 255, .18); }
.schalter .s-bahn i { top: 4px; left: 4px; width: 20px; height: 20px; background: var(--weiss); }
.schalter[aria-checked="true"] .s-h { background: transparent; color: rgba(255, 255, 255, .6); opacity: 1; }
.schalter[aria-checked="true"] .s-k { background: var(--blau); color: var(--berry); opacity: 1; }
.schalter[aria-checked="true"] .s-bahn i { transform: translateX(22px); background: var(--blau); }
.schalter:hover .s-bahn { background: rgba(255, 255, 255, .3); }

/* Während der Szene steht die Kopfzeile auf einer hellen Leiste,
   sonst verschwindet sie auf dem dunklen KI-Grund */
.kopf { transition: color .12s linear, background .3s, box-shadow .3s; }   /* Schrift im Takt mit dem Milchglas (css/seite.css .kopf::before) */
.kopf-duell .kopf {
  background: rgba(255, 255, 255, .94); color: var(--berry);
  box-shadow: 0 1px 0 rgba(37, 0, 38, .12);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

@media (max-width: 900px) {
  .duell-flamingo { display: none; }
  .welt--hand .welt-wort { font-size: 12vw; }
  .welt--ki .welt-wort { font-size: 7.6vw; }
  .umschalter { font-size: 12px; padding: 5px; }
  .schalter .s-h, .schalter .s-k { padding: 9px 12px; }
  /* Die Handwerk-Karte stand am Handy oben unter der Umschaltleiste: nach unten,
     wie die KI-Karte. Oben Leiste, Mitte Wort, unten Karte, in beiden Welten gleich. */
  .welt--hand .welt-karte { top: auto; bottom: clamp(28px, 6vh, 64px); }
  /* Wort und Karte im Fluss untereinander statt die Karte absolut unten: Mit größerer Schrift (Firefox übernimmt
     die Android-Schriftgröße) wuchs die Karte über das Wort (26.10.2026). Die Karte steht unten, das Wort mittig
     im Raum zwischen Schalter und Karte, dazwischen mindestens 24 px. */
  .welt { justify-content: flex-start; padding-top: calc(var(--kopf-h) + 12px + 4.5em + 16px);
    padding-bottom: calc(clamp(28px, 6vh, 64px) + var(--leiste)); }
  .welt .welt-wort { margin-block: auto; }
  .welt .welt-karte { position: static; padding-top: 24px; }
}

/* Hauptmenü mit acht Punkten (fünf Leistungen, Über uns, Handgemacht oder KI, Projekte):
   rückt auf schmaleren Bildschirmen zusammen, unter 1100 px bleibt nur „Let's talk“.
   Die aktuelle Seite bekommt einen pinken Strich (aria-current, js/unterseiten.js). */
.kopf nav { gap: clamp(14px, 1.6vw, 28px); }
.kopf nav a { white-space: nowrap; position: relative; }
.kopf nav a[aria-current="page"] { opacity: 1; }
.kopf nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; border-radius: 2px; background: var(--pink); }
@media (max-width: 1280px) { .kopf { gap: 20px; } .kopf nav a { font-size: 13px; } }

/* Hover im Hauptmenü (nur Desktop mit Maus): Die vier Leistungen gehören zusammen. Fährt man über eine,
   zieht unter allen vier eine schwarze Klammer auf, darunter „Leistungen“; die gewählte bekommt einen
   dicken Balken in ihrer Leistungsfarbe (Webdesign Gelb, Texte Berry, Grafik Pink, Foto & Video Türkis).
   Über uns, Handgemacht oder KI und Projekte bekommen eine dezente schwarze Linie, die auf der
   gewählten Seite stehen bleibt (seit 21.10.2026, vorher türkis). Die Einträge werden über ihr
   Ziel erkannt (href), damit die Gruppe auch stimmt, wenn im Editor die Reihenfolge geändert wird. */
@media (min-width: 1101px) and (hover: hover) {
  .kopf nav { gap: 0; --p: clamp(7px, .8vw, 14px); --tk: currentColor; isolation: isolate; }
  .kopf nav a { padding: 12px var(--p); }
  .kopf nav a[aria-current="page"]::after { left: var(--p); right: var(--p); bottom: 5px; }
  .kopf nav a:is([href*="webdesign"], [href*="web-design"], [href*="copywriting"], [href*="grafikdesign"], [href*="graphic-design"], [href*="foto-video"], [href*="photo-video"]) {
    --lf: var(--pink);
    background: linear-gradient(var(--lf), var(--lf)) 50% 100% / 0 5px no-repeat,
                linear-gradient(var(--tk), var(--tk)) 50% 100% / 0 2px no-repeat;   /* Farbbalken über der Klammer */
    transition: opacity .2s, background-size .35s cubic-bezier(.2, .7, .2, 1);
  }
  .kopf nav a:is([href*="webdesign"], [href*="web-design"]) { --lf: var(--gelb); }
  .kopf nav a[href*="copywriting"] { --lf: var(--berry); }
  .kopf nav a:is([href*="grafikdesign"], [href*="graphic-design"]) { --lf: var(--pink); }
  .kopf nav a:is([href*="foto-video"], [href*="photo-video"]) { --lf: var(--tuerkis2); }
  /* Haken der Klammer am ersten und letzten Eintrag der Gruppe */
  .kopf nav a:is([href*="webdesign"], [href*="web-design"], [href*="copywriting"], [href*="grafikdesign"], [href*="graphic-design"], [href*="foto-video"], [href*="photo-video"]):not(:is([href*="webdesign"], [href*="web-design"], [href*="copywriting"], [href*="grafikdesign"], [href*="graphic-design"], [href*="foto-video"], [href*="photo-video"]) + a) { border-left: 2px solid transparent; }
  .kopf nav a:is([href*="webdesign"], [href*="web-design"], [href*="copywriting"], [href*="grafikdesign"], [href*="graphic-design"], [href*="foto-video"], [href*="photo-video"]):not(:has(+ :is([href*="webdesign"], [href*="web-design"], [href*="copywriting"], [href*="grafikdesign"], [href*="graphic-design"], [href*="foto-video"], [href*="photo-video"]))) { border-right: 2px solid transparent; }
  .kopf nav:has(a:is([href*="webdesign"], [href*="web-design"], [href*="copywriting"], [href*="grafikdesign"], [href*="graphic-design"], [href*="foto-video"], [href*="photo-video"]):hover) a:is([href*="webdesign"], [href*="web-design"], [href*="copywriting"], [href*="grafikdesign"], [href*="graphic-design"], [href*="foto-video"], [href*="photo-video"]) {
    opacity: 1; background-size: 0 5px, 100% 2px;
    border-image: linear-gradient(transparent 70%, var(--tk) 70%) 1;
  }
  .kopf nav:has(a:is([href*="webdesign"], [href*="web-design"], [href*="copywriting"], [href*="grafikdesign"], [href*="graphic-design"], [href*="foto-video"], [href*="photo-video"]):hover) a:is([href*="webdesign"], [href*="web-design"], [href*="copywriting"], [href*="grafikdesign"], [href*="graphic-design"], [href*="foto-video"], [href*="photo-video"]):hover {
    background-size: calc(100% - 2 * var(--p)) 5px, 100% 2px;
  }
  /* „Leistungen“ unter dem ersten Eintrag der Gruppe */
  .kopf nav a:is([href*="webdesign"], [href*="web-design"], [href*="copywriting"], [href*="grafikdesign"], [href*="graphic-design"], [href*="foto-video"], [href*="photo-video"]):not(:is([href*="webdesign"], [href*="web-design"], [href*="copywriting"], [href*="grafikdesign"], [href*="graphic-design"], [href*="foto-video"], [href*="photo-video"]) + a)::before {
    content: "Leistungen"; position: absolute; left: var(--p); top: 100%; margin-top: 6px;
    font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
    opacity: 0; transform: translateY(-4px); transition: opacity .25s, transform .3s; pointer-events: none;
  }
  .kopf nav:has(a:is([href*="webdesign"], [href*="web-design"], [href*="copywriting"], [href*="grafikdesign"], [href*="graphic-design"], [href*="foto-video"], [href*="photo-video"]):hover) a:is([href*="webdesign"], [href*="web-design"], [href*="copywriting"], [href*="grafikdesign"], [href*="graphic-design"], [href*="foto-video"], [href*="photo-video"])::before { opacity: .7; transform: none; }
  html[lang^="en"] .kopf nav a:is([href*="webdesign"], [href*="web-design"], [href*="copywriting"], [href*="grafikdesign"], [href*="graphic-design"], [href*="foto-video"], [href*="photo-video"]):not(:is([href*="webdesign"], [href*="web-design"], [href*="copywriting"], [href*="grafikdesign"], [href*="graphic-design"], [href*="foto-video"], [href*="photo-video"]) + a)::before { content: "Services"; }
  /* Über uns, Handgemacht oder KI und Projekte: dezente schwarze Linie, bleibt auf der gewählten Seite */
  .kopf nav a:is([href*="ueber-uns"], [href*="about-us"], [href*="handgemacht"], [href*="handmade"], [href*="projekte"], [href*="projects"]) { margin-inline: 6px; transition: opacity .2s; }
  .kopf nav a:is([href*="ueber-uns"], [href*="about-us"], [href*="handgemacht"], [href*="handmade"], [href*="projekte"], [href*="projects"])::before {
    content: ""; position: absolute; left: var(--p); right: var(--p); bottom: 5px; height: 1.5px;
    background: currentColor; border-radius: 2px; transform: scaleX(0); transform-origin: 0 50%;
    transition: transform .3s cubic-bezier(.2, .7, .2, 1);
  }
  .kopf nav a:is([href*="ueber-uns"], [href*="about-us"], [href*="handgemacht"], [href*="handmade"], [href*="projekte"], [href*="projects"]):hover { opacity: 1; }
  .kopf nav a:is([href*="ueber-uns"], [href*="about-us"], [href*="handgemacht"], [href*="handmade"], [href*="projekte"], [href*="projects"]):is(:hover, [aria-current="page"])::before { transform: scaleX(1); }
  .kopf nav a:is([href*="ueber-uns"], [href*="about-us"], [href*="handgemacht"], [href*="handmade"], [href*="projekte"], [href*="projects"])[aria-current="page"]::after { display: none; }
}

/* Aufklappbares Menü für Handy und Tablet (unter 1100 px, js/seite.js).
   Der Knopf „Menü“ öffnet das vorhandene Menü als Vollbild-Ebene, die sich als Kreis
   vom Knopf aus aufzieht. Die Einträge bleiben die aus dem Editor (Liste „menue“). */
.menue-knopf { display: none; }
@media (max-width: 1100px) {
  .kopf .knopf--klein { margin-left: auto; position: relative; z-index: 2; }
  .kopf .sprache { margin-left: auto; position: relative; z-index: 2; }
  .kopf .sprache + .knopf--klein { margin-left: 0; }
  .kopf .wortmarke { position: relative; z-index: 2; }
  .menue-knopf {
    display: inline-flex; align-items: center; gap: 10px; position: relative; z-index: 2; margin-left: -12px;
    height: 40px; padding: 0 16px 0 14px; border-radius: 999px; border: 1.5px solid currentColor;
    background: transparent; color: inherit; font: 500 14px/1 var(--text); cursor: pointer;
  }
  .menue-knopf:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
  .menue-knopf i { position: relative; width: 18px; height: 10px; }
  .menue-knopf i::before, .menue-knopf i::after {
    content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor;
    transition: transform .45s cubic-bezier(.7, 0, .2, 1), top .45s cubic-bezier(.7, 0, .2, 1);
  }
  .menue-knopf i::before { top: 0; }
  .menue-knopf i::after { top: 8px; }
  .menue-offen .menue-knopf i::before { top: 4px; transform: rotate(45deg); }
  .menue-offen .menue-knopf i::after { top: 4px; transform: rotate(-45deg); }
  .menue-offen .menue-knopf { background: var(--tinte); border-color: var(--tinte); color: var(--weiss); }

  .kopf nav {
    display: flex !important; position: fixed; inset: 0; z-index: 1; margin: 0;
    flex-direction: column; justify-content: center; gap: 0; counter-reset: m;
    padding: calc(var(--kopf-h) + 2vh) var(--rand) 5vh; overflow-y: auto;
    background:
      radial-gradient(60% 50% at 100% 100%, rgba(237, 30, 121, .14), transparent 70%),
      radial-gradient(50% 40% at 0% 0%, rgba(197, 255, 255, .7), transparent 70%),
      var(--papier);
    visibility: hidden; clip-path: circle(0 at calc(100% - var(--rand) - 40px) calc(var(--kopf-h) / 2));
    transition: clip-path .55s cubic-bezier(.7, 0, .2, 1), visibility 0s .55s;
  }
  .menue-offen .kopf nav { visibility: visible; clip-path: circle(150vmax at calc(100% - var(--rand) - 40px) calc(var(--kopf-h) / 2)); transition: clip-path .7s cubic-bezier(.7, 0, .2, 1); }
  .menue-offen .kopf { color: var(--tinte); }
  .kopf nav a {
    counter-increment: m; display: flex; align-items: baseline; gap: 16px; padding: 12px 0; opacity: 0;
    border-bottom: 1px solid var(--blass); color: var(--tinte);
    font: 700 clamp(30px, 7.2vw, 60px)/1 var(--display); letter-spacing: -.03em; text-transform: uppercase;
    transform: translateY(24px); transition: opacity .3s, transform .3s, color .25s;
  }
  .kopf nav a::before { content: "0" counter(m); flex: none; width: 2.2em; font: 500 12px/1 var(--mono); letter-spacing: .1em; color: var(--pink); }
  .kopf nav a::after { display: none; }
  .kopf nav a:hover, .kopf nav a[aria-current="page"] { color: var(--pink); }
  .menue-offen .kopf nav a { opacity: 1; transform: none; transition: opacity .5s, transform .6s cubic-bezier(.2, .8, .2, 1), color .25s; }
  .menue-offen .kopf nav a:nth-child(1) { transition-delay: .15s; }
  .menue-offen .kopf nav a:nth-child(2) { transition-delay: .19s; }
  .menue-offen .kopf nav a:nth-child(3) { transition-delay: .23s; }
  .menue-offen .kopf nav a:nth-child(4) { transition-delay: .27s; }
  .menue-offen .kopf nav a:nth-child(5) { transition-delay: .31s; }
  .menue-offen .kopf nav a:nth-child(6) { transition-delay: .35s; }
  .menue-offen .kopf nav a:nth-child(7) { transition-delay: .39s; }
  .menue-offen .kopf nav a:nth-child(8) { transition-delay: .43s; }
  .menue-offen .kopf nav a:nth-child(n+9) { transition-delay: .47s; }
  .menue-offen, .menue-offen body { overflow: hidden; }
}
@media (max-width: 420px) {
  .kopf .knopf--klein { padding: 0 14px; }
  /* Mit Sprachumschalter wird es eng: Abstände und Umschalter etwas kleiner, damit nichts über den Rand ragt */
  .kopf { gap: 7px; }
  .kopf .sprache { width: 70px; height: 36px; font-size: 12px; letter-spacing: .04em; }
  .kopf .sprache i { width: 34px; height: 58px; top: -9px; left: -1px; }
  .menue-knopf { margin-left: -2px; }
  .menue-knopf span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .menue-knopf { padding: 0 11px; }
}
/* Im Editor (Tablet-/Handy-Vorschau) steht das Menü als Zeile im Kopf, damit man es bearbeiten kann */
@media (max-width: 1100px) {
  html.cms-an .kopf nav { visibility: visible; clip-path: none; position: static; flex-direction: row; flex-wrap: wrap; gap: 4px 12px; background: none; padding: 0; overflow: visible; }
  html.cms-an .kopf nav a { opacity: 1; transform: none; font: 500 12px/1.4 var(--text); text-transform: none; letter-spacing: 0; padding: 0; border: 0; }
  html.cms-an .kopf nav a::before { display: none; }
  html.cms-an .menue-knopf { display: none; }
}

/* ==================== Navigation seit 21.10.2026 (js/seite.js, navigation) ====================
   Entwurf: _test/menueleisten.html. Alles hier greift nur, wenn das Skript läuft (html.nav-an), im Editor nie.
   1. Kopfzeile: Milchglas bleibt, beim Runterscrollen fährt sie weg (html.kopf-weg), beim Hochscrollen schnellt
      sie federnd zurück; am Desktop holt sie auch die Maus am oberen Rand oder der Tastaturfokus zurück.
   2. Strecke (Desktop): rechts eine schmale Milchglas-Kapsel, ein Punkt je Abschnitt; Namen beim Drüberfahren,
      Fortschritt und aktiver Punkt in der Leistungsfarbe (--leistung, css/unterseiten.css; sonst Pink).
   3. Daumen (Handy und Tablet bis 1100 px): unten eine Pille mit Menü, aktuellem Abschnitt und Let's talk;
      das Menü kommt als ruhiges Blatt von unten, der Abschnitt öffnet eine Liste der Abschnitte. */
.nav-an .kopf { transition: color .12s linear, transform .5s cubic-bezier(.2, 1.35, .4, 1); }
.nav-an.kopf-weg .kopf { transform: translateY(-115%); transition: color .12s linear, transform .3s cubic-bezier(.6, 0, .9, .4); }
/* Farben der Leistungen für Punkte in Strecke, Daumen und Menüblatt (wie die Würfel und die Startseite) */
.nav-an .kopf nav a { --punkt: var(--blass); }
.nav-an .kopf nav a:is([href*="webdesign"], [href*="web-design"]) { --punkt: var(--gelb); }
.nav-an .kopf nav a[href*="copywriting"] { --punkt: var(--berry); }
.nav-an .kopf nav a:is([href*="grafikdesign"], [href*="graphic-design"]) { --punkt: var(--pink); }
.nav-an .kopf nav a:is([href*="foto-video"], [href*="photo-video"]) { --punkt: var(--tuerkis2); }
.nav-an .kopf nav a[href*="consulting"] { --punkt: var(--ice); }

/* ---------- 2 · Strecke ---------- */
.strecke { display: none; }
@media (min-width: 1101px) {
  .nav-an .strecke {
    display: block; position: fixed; z-index: 45; right: max(8px, calc(var(--rand) / 2 - 11px)); top: 50%; translate: 0 -50%;
    padding: 12px 7px; border-radius: 999px;
    /* Im Ruhezustand ohne Fläche (21.10.2026): nur feine, halb durchsichtige Punkte, damit die cinematischen Teile
       wirken; erst beim Drüberfahren (oder Tastaturfokus) das Milchglas */
    background: transparent; box-shadow: none;
    transition: background-color .25s, box-shadow .25s, -webkit-backdrop-filter .25s, backdrop-filter .25s, opacity .3s;
  }
  .nav-an .strecke:is(:hover, :focus-within) {
    background: color-mix(in srgb, var(--papier) 86%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 6px 24px rgba(37, 0, 38, .10), inset 0 0 0 1px rgba(37, 0, 38, .06);
  }
  .strecke ol { position: relative; display: flex; flex-direction: column; gap: 16px; }
  /* Linie und Fortschritt hinter den Punkten; Grau, das auf Weiß wie auf Berry leise bleibt */
  .strecke ol::before, .strecke ol::after { content: ""; position: absolute; left: 50%; top: 3px; width: 2px; margin-left: -1px; border-radius: 2px; transition: background-color .25s, opacity .25s; }
  .strecke ol::before { bottom: 3px; background: rgba(150, 135, 150, .28); }
  .strecke ol::after { height: calc((100% - 6px) * var(--strecke-p, 0)); background: var(--leistung, var(--pink)); opacity: .55; }
  .strecke:is(:hover, :focus-within) ol::before { background: rgba(37, 0, 38, .12); }
  .strecke:is(:hover, :focus-within) ol::after { opacity: 1; }
  .strecke li { position: relative; display: flex; justify-content: center; }
  .strecke a { position: relative; display: grid; place-items: center; width: 14px; height: 14px; text-decoration: none; color: var(--tinte); }
  .strecke a i { width: 5px; height: 5px; border-radius: 50%; background: rgba(150, 135, 150, .5);
    transition: transform .3s cubic-bezier(.2, 1.4, .4, 1), background-color .3s, width .25s, height .25s; }
  .strecke li.aktiv a i { transform: scale(1.5); background: var(--leistung, var(--pink)); }
  .strecke li.fertig a i { background: color-mix(in srgb, var(--leistung, var(--pink)) 50%, transparent); }
  /* beim Drüberfahren: Punkte wie bisher, kräftig auf Milchglas */
  .strecke:is(:hover, :focus-within) a i { width: 7px; height: 7px; background: color-mix(in srgb, var(--tinte) 32%, var(--papier)); }
  .strecke:is(:hover, :focus-within) li.fertig a i { background: color-mix(in srgb, var(--leistung, var(--pink)) 55%, var(--papier)); }
  .strecke:is(:hover, :focus-within) li.aktiv a i { transform: scale(1.55); background: var(--leistung, var(--pink)); box-shadow: 0 0 0 2px var(--papier); }
  .strecke a:hover i, .strecke:hover a:hover i { transform: scale(1.35); background: var(--tinte); }
  /* Namen links neben den Punkten, je ein kleines Milchglas-Schild */
  .strecke a span {
    position: absolute; right: calc(100% + 12px); top: 50%; translate: 6px -50%; white-space: nowrap; pointer-events: none;
    padding: 6px 10px; border-radius: 999px; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
    color: var(--tinte); background: color-mix(in srgb, var(--papier) 88%, transparent);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 4px 14px rgba(37, 0, 38, .10);
    opacity: 0; transition: opacity .2s, translate .25s;
  }
  .strecke a span b { font-weight: 500; color: var(--grau); margin-right: 8px; }
  .strecke:hover a span, .strecke a:focus-visible span { opacity: 1; translate: 0 -50%; }
  /* Neuer Abschnitt: Name kurz und leise, ohne Schild (nicht beim Drüberfahren) */
  .strecke:not(:hover, :focus-within) li.zeigt a span { opacity: .75; translate: 0 -50%; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    color: rgba(150, 135, 150, .95); }
  .strecke:not(:hover, :focus-within) li.zeigt a span b { color: inherit; }
  .strecke:hover li:not(.aktiv) a span { color: var(--tinte-2); }
  /* Namen sind klickbar, sobald sie zu sehen sind (23.10.2026; sie liegen im Link). Eine unsichtbare Fläche links
     neben der Kapsel hält den Hover, während die Maus zwischen den Schildern wandert. */
  .strecke:hover a span { pointer-events: auto; cursor: pointer; }
  .strecke:hover a:hover span { color: var(--tinte); background: var(--papier); box-shadow: 0 4px 16px rgba(37, 0, 38, .16); }
  .strecke:hover::before { content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: 300px; }
  .strecke a:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; border-radius: 50%; }
  .menue-offen .strecke { opacity: 0; pointer-events: none; }
  .nav-an .strecke.leise:not(:hover, :focus-within) { opacity: 0; }
}

/* ---------- 3 · Daumen und Menüblatt (Handy und Tablet) ---------- */
.daumen, .kapitel { display: none; }
@media (max-width: 1100px) {
  /* oben bleiben Logo und Sprache; Menü und Let's talk wohnen unten in der Pille */
  .nav-an .kopf .menue-knopf, .nav-an .kopf .knopf--klein { display: none; }
  .nav-an .kopf .sprache { margin-left: auto; }
  .nav-an .daumen {
    display: flex; position: fixed; z-index: 70; left: 0; right: 0; margin-inline: auto; width: max-content; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    align-items: center; gap: 4px; padding: 5px; max-width: calc(100vw - 20px); border-radius: 999px;
    background: var(--tinte); color: var(--weiss); box-shadow: 0 12px 34px rgba(37, 0, 38, .32);
  }
  .daumen > * { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: 0; border-radius: 999px;
    font: 500 14px/1 var(--text); text-decoration: none; cursor: pointer; color: inherit; background: none; }
  .nav-an .daumen { transition: transform .4s cubic-bezier(.2, .8, .2, 1), opacity .3s; }
  .nav-an.daumen-weg .daumen { transform: translateY(calc(100% + 24px + env(safe-area-inset-bottom, 0px))); opacity: 0; pointer-events: none; }
  .daumen .daumen-menue { background: var(--weiss); color: var(--tinte); }
  .daumen .daumen-menue i { position: relative; width: 14px; height: 8px; }
  .daumen .daumen-menue i::before, .daumen .daumen-menue i::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 2px; background: currentColor;
    transition: transform .35s cubic-bezier(.7, 0, .2, 1), top .35s cubic-bezier(.7, 0, .2, 1); }
  .daumen .daumen-menue i::before { top: 0; } .daumen .daumen-menue i::after { top: 6.5px; }
  .menue-offen .daumen .daumen-menue i::before { top: 3.25px; transform: rotate(45deg); }
  .menue-offen .daumen .daumen-menue i::after { top: 3.25px; transform: rotate(-45deg); }
  .daumen .daumen-wo { flex: 1 1 auto; min-width: 0; padding: 0 10px; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
  .daumen .daumen-wo::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--leistung, var(--pink)); }
  .us--copywriting .daumen .daumen-wo::before { background: var(--weiss); box-shadow: 0 0 0 2px var(--berry), 0 0 0 3px rgba(255, 255, 255, .5); }
  .daumen .daumen-wo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34vw; }
  .daumen .daumen-talk { background: var(--pink); color: var(--weiss); }
  .daumen :focus-visible { outline: 2px solid var(--weiss); outline-offset: 2px; }
  .menue-offen .daumen .daumen-wo { opacity: .5; }
  /* am Seitenende Platz für die Pille */
  .nav-an .fuss { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }

  /* Menüblatt: das Hauptmenü aus dem Editor, ruhig in Textschrift, gruppiert, von unten */
  .nav-an .kopf nav {
    inset: auto 8px 0 8px; top: auto; justify-content: flex-start; max-height: calc(100svh - 70px); counter-reset: none;
    padding: 30px 22px calc(92px + env(safe-area-inset-bottom, 0px)); border-radius: 24px 24px 0 0;
    background: color-mix(in srgb, var(--papier) 96%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 -18px 50px rgba(37, 0, 38, .18), 0 0 0 100vmax rgba(37, 0, 38, 0);
    clip-path: none; translate: 0 104%; visibility: hidden;
    transition: translate .45s cubic-bezier(.6, 0, .2, 1), box-shadow .45s, visibility 0s .45s;
  }
  .menue-offen.nav-an .kopf nav { clip-path: none; translate: none; visibility: visible;
    box-shadow: 0 -18px 50px rgba(37, 0, 38, .18), 0 0 0 100vmax rgba(37, 0, 38, .32);
    transition: translate .5s cubic-bezier(.2, .9, .2, 1), box-shadow .5s; }
  .nav-an .kopf nav a {
    position: relative; display: flex; align-items: center; gap: 14px; padding: 15px 4px 15px 0; opacity: 1; transform: none;
    border-bottom: 1px solid var(--blass); color: var(--tinte); font: 500 19px/1.2 var(--text); letter-spacing: 0; text-transform: none;
  }
  .nav-an .kopf nav a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--punkt); flex: none; }
  .nav-an .kopf nav a::after { content: "→"; display: block; margin-left: auto; font: 400 16px/1 var(--text); color: var(--grau); position: static; height: auto; width: auto; background: none; }
  .nav-an .kopf nav a:hover { color: var(--tinte); }
  .nav-an .kopf nav a[aria-current="page"] { font-weight: 600; color: var(--tinte);
    background: linear-gradient(90deg, color-mix(in srgb, var(--punkt) 16%, transparent), transparent 75%); border-radius: 10px 10px 0 0; padding-left: 10px; margin-left: -10px; }
  /* Punkt gezeichnet statt Zeichen „●“: das fehlt in der Schrift, Firefox am Handy zeigte ein Kästchen (26.10.2026) */
  .nav-an .kopf nav a[aria-current="page"]::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tinte); }
  .nav-an .kopf nav a:not([href*="consulting"]):is([href*="ueber-uns"], [href*="about-us"]) { margin-top: 30px; }
  /* Gruppen: „Leistungen“ über der ersten Leistung, „Agentur“ über Über uns (Höhe misst js/seite.js: --agentur-y) */
  .nav-an .kopf nav::before, .nav-an .kopf nav::after { position: absolute; left: 22px; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--grau); }
  .nav-an .kopf nav::before { content: "Leistungen"; top: 12px; }
  .nav-an .kopf nav::after { content: "Agentur"; top: var(--agentur-y, -999px); }
  html[lang^="en"].nav-an .kopf nav::before { content: "Services"; }
  html[lang^="en"].nav-an .kopf nav::after { content: "Agency"; }
  .menue-offen.nav-an .kopf nav a { transition: none; }
  .menue-offen.nav-an .kopf { color: var(--tinte); }
  /* Oben bleibt die Leiste als Milchglas, bei offenem Menü immer hell: Die Schrift ist dann dunkel, auf dunklem
     Grund (z. B. KI-Welt im Duell) waren Logo und „EN“ unsichtbar. z-index 2 hebt das Glas über die Abdunklung
     des Menüblatts, Logo und Sprache liegen davor (26.10.2026). */
  .menue-offen.nav-an .kopf::before { z-index: 2; background-color: color-mix(in srgb, var(--papier) 92%, transparent);
    -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); }

  /* Kapitel: die Abschnitte der Seite, über der Pille */
  .nav-an .kapitel {
    display: block; position: fixed; z-index: 69; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); translate: -50% 12px;
    width: min(340px, calc(100vw - 24px)); max-height: 60svh; overflow-y: auto; padding: 8px; border-radius: 20px;
    background: color-mix(in srgb, var(--papier) 96%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 14px 44px rgba(37, 0, 38, .22); opacity: 0; visibility: hidden;
    transition: opacity .2s, translate .3s cubic-bezier(.2, .9, .2, 1), visibility 0s .3s;
  }
  .kapitel-offen .kapitel { opacity: 1; visibility: visible; translate: -50% 0; transition: opacity .2s, translate .3s cubic-bezier(.2, .9, .2, 1); }
  .kapitel p { padding: 10px 12px 6px; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--grau); }
  .kapitel a { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; text-decoration: none; color: var(--tinte); font: 500 16px/1.25 var(--text); }
  .kapitel a b { flex: none; width: 2.2em; font: 500 11px/1 var(--mono); letter-spacing: .08em; color: var(--grau); }
  .kapitel a.aktiv { background: color-mix(in srgb, var(--leistung, var(--pink)) 13%, transparent); font-weight: 600; }
  .kapitel a.aktiv b { color: var(--tinte); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-an .kopf, .nav-an.kopf-weg .kopf, .strecke *, .daumen *, .nav-an .kopf nav, .kapitel { transition: none !important; }
}

/* Unterseiten aus _cms/seite-vorlage.html */
.unterseite { padding: calc(var(--kopf-h) + clamp(60px, 12vh, 140px)) 0 clamp(50px, 8vh, 100px); }
.unterseite--folge { padding-top: 0; }
.unterseite .titel { font: 700 clamp(48px, 7vw, 120px)/.95 var(--display); letter-spacing: -.03em; text-transform: uppercase; margin-bottom: 28px; }
.unterseite .lead { max-width: 40em; }

/* Ruhige Fassung (keine Animation): Manifest ist ein normaler Block */
.ruhig .manifest { position: relative; }
.ruhig .manifest-vogel { opacity: 1; transform: none; }

/* Schmal: zu wenig Platz neben dem Text, der Vogel entfällt */
@media (max-width: 900px) {
  .manifest-vogel { display: none; }
  .manifest > p, .manifest .aktionen, .manifest .manifest-text { max-width: none; }
  /* Der Zwischenruf steht am Handy im Fluss unter den Knöpfen statt absolut am unteren Rand: Firefox vergrößert
     Texte nach der Schriftgröße in Android, dann lag er über „Projekt anfragen“ (24. und 26.10.2026).
     Abstände und Manifest-Schrift richten sich nach der Bildschirmhöhe, damit alles in die Bühne passt. */
  .manifest { padding-bottom: 20px; }
  .manifest .zwischenruf--manifest { position: static; margin-top: clamp(18px, 4svh, 40px); }
  .manifest-vor { margin-bottom: clamp(10px, 2.4svh, 32px); }
  .manifest-nach { margin-top: clamp(10px, 2.4svh, 32px); }
  .manifest-text { font-size: clamp(22px, min(7.2vw, 4.4svh), 34px); }
  .manifest .aktionen { margin-top: clamp(16px, 4svh, 48px); }
  /* Reicht der Platz trotzdem nicht, misst js/seite.js das und setzt .eng: dann ohne Zwischenruf */
  .manifest.eng .zwischenruf--manifest { display: none; }
}