/* Unterseiten von Website Oha Vogel (js/unterseiten.js).
   Gleiche Sprache wie die Startseite (css/seite.css): Weiß, Ice, Ingo, Berry,
   Plex Condensed in Versalien mit Fraunces-Kursiv, Mono für Kicker.
   Teil 1: Bausteine für alle Seiten. Teil 2: die Szene jeder Seite.
   html.ruhig (Editor, reduzierte Bewegung, ohne JS) zeigt jede Szene im Endzustand. */

/* =====================================================================
   Teil 1 · Bausteine
   ===================================================================== */
.us main > section { position: relative; z-index: 2; background: var(--papier); }
.us main > section.team { background: var(--tinte); }   /* Team bleibt dunkel wie auf der Startseite */
/* Das Team ist ein globaler Baustein (Startseite): auf Über uns führt „Warum eigentlich Flamingo?“ nicht auf sich selbst */
.us--ueber .team a:is([href="ueber-uns.html"], [href="en-about-us.html"]) { display: none; }

/* ---------- Kopf der Unterseite ---------- */
.us-kopf { padding: calc(var(--kopf-h) + clamp(48px, 10vh, 120px)) 0 clamp(60px, 10vh, 120px); overflow: hidden; }
.us-kopf-raster { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.us-kopf-raster--voll { grid-template-columns: 1fr; }
.us-titel { font-size: clamp(46px, 6.6vw, 124px); max-width: 12ch; }
.us-titel em { display: inline; }
.us-kopf .lead { margin-top: 28px; }
.us-fakten { display: flex; flex-wrap: wrap; gap: 10px; margin: 36px 0 0; }
.us-fakten div { padding: 14px 18px 12px; border: 1.5px solid var(--blass); border-radius: 18px; min-width: 150px; }
.us-fakten dt { font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--grau); }
.us-fakten dd { margin: 4px 0 0; font: 700 26px/1.05 var(--display); letter-spacing: -.02em; text-transform: uppercase; }
.us-fakten dd em { font: 400 italic 1em/1 var(--serif); text-transform: none; color: var(--pink); }

/* ---------- Abschnitt mit Titel links, Text rechts ---------- */
.us-abschnitt { padding: clamp(80px, 14vh, 160px) 0; }
.us-abschnitt + .us-abschnitt { padding-top: 0; }
/* .us-zwei und .us-h2 stehen seit 19.10.2026 in css/fragen.css (auch die Startseite braucht sie) */
.us-h3 { font: 700 clamp(24px, 2.2vw, 34px)/1.05 var(--display); letter-spacing: -.02em; text-transform: uppercase; margin: 48px 0 14px; }
.us-h3:first-child { margin-top: 0; }
.us-fliess > * + * { margin-top: 1em; }
.us-fliess p, .us-fliess li { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.6; color: var(--tinte-2); }
.us-fliess b { color: var(--tinte); font-weight: 500; }
/* Merksatz in großer Kursiv mit pinkem Strich */
.us-merksatz {
  font: 400 italic clamp(24px, 2.5vw, 40px)/1.2 var(--serif) !important; letter-spacing: -.02em; color: var(--tinte) !important;
  padding-left: 24px; border-left: 4px solid var(--pink); margin: 1.4em 0 !important; font-variation-settings: "opsz" 144;
}

/* ---------- Haken-Liste ---------- */
.us-haken { counter-reset: h; margin-top: 8px; }
.us-haken li {
  counter-increment: h; display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: baseline;
  padding: 18px 0; border-top: 1px solid var(--blass); font-size: clamp(18px, 1.5vw, 22px); line-height: 1.4; color: var(--tinte);
}
.us-haken li:last-child { border-bottom: 1px solid var(--blass); }
.us-haken li::before { content: "0" counter(h); font: 500 13px/1 var(--mono); letter-spacing: .08em; color: var(--pink); }

/* ---------- Leistungsfarbe (seit 17.10.2026) ----------
   Wie die Nummern 01 bis 04 auf der Startseite (css/seite.css): Webdesign Pink, Copywriting Berry (Tinte),
   Grafik Gelb (tanzt aus der Reihe), Foto & Video Türkis (Himmel, Studiolicht). Nur an kleinen Akzenten:
   Fortschrittsleiste, Kicker-Zeichen, Strich am Merksatz, Nummern der Haken-Liste, offene Frage.
   Knöpfe und Szenen bleiben pink. Alle anderen Unterseiten behalten Pink. */
.us { --leistung: var(--pink); }
.us--copywriting { --leistung: var(--berry); }
.us--webdesign { --leistung: var(--gelb); }
.us--grafik { --leistung: var(--pink); }
/* Aktuelle Seite im Menü in der Farbe ihrer Leistung unterstrichen (Webdesign Gelb, Copywriting Berry,
   Grafik Pink, Foto & Video Türkis; alle anderen Seiten bleiben Pink) */
.us .kopf nav a[aria-current="page"]::after { background: var(--leistung); }
.us--foto { --leistung: var(--tuerkis2); }
.us .fortschritt i { background: var(--leistung); }
.us main > section:not(.team) .kicker b { color: var(--leistung); }
/* Gelb und Türkis sind als kleine Schrift auf Weiß zu blass (2,2:1 und 1,4:1; Barrierefreiheit, 23.10.2026): die Nummer
   steht in Berry, davor ein Punkt in der Leistungsfarbe. Zeichen statt Nummer (● ?) bleiben farbig, sie schmücken nur
   (.kicker-zeichen setzt js/unterseiten.js). */
.us:is(.us--webdesign, .us--foto) main > section:not(.team) .kicker b:not(.kicker-zeichen) { color: var(--tinte); display: inline-flex; align-items: center; gap: 8px; }
.us:is(.us--webdesign, .us--foto) main > section:not(.team) .kicker b:not(.kicker-zeichen)::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--leistung); }
.us--foto main section.fv-blitz .kicker b:not(.kicker-zeichen)::before { box-shadow: 0 0 0 1.5px var(--tinte); }
.us .us-merksatz { border-left-color: var(--leistung); }
.us .us-haken li::before { color: var(--leistung); }
.us .us-frage-titel button:hover i { border-color: var(--leistung); }
.us .us-frage.offen .us-frage-titel i { background: var(--leistung); border-color: var(--leistung); }
/* Auf hellem Gelb und Türkis ist das Minus in Berry statt Weiß */
:is(.us--webdesign, .us--foto) .us-frage.offen .us-frage-titel i::before,
:is(.us--webdesign, .us--foto) .us-frage.offen .us-frage-titel i::after { background: var(--berry); }

/* ---------- Du entscheidest: Handwerk oder KI-gestützt ---------- */
.us-wahl { padding: clamp(80px, 14vh, 160px) 0; }
.us-wahl-satz { margin-top: 24px; font: 400 italic clamp(22px, 2.2vw, 34px)/1.25 var(--serif); max-width: 26em; }
.us-wahl-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: clamp(40px, 7vh, 72px); }
.us-wahl-paar > div { padding: clamp(28px, 4vw, 64px); min-height: 360px; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; }
.us-wahl-hand { background: var(--blau, var(--tuerkis2)); color: var(--tinte); border-radius: 28px 0 0 28px; }
.us-wahl-ki {
  background-color: var(--nacht); color: var(--ice); border-radius: 0 28px 28px 0; position: relative;
  background-image: linear-gradient(rgba(197,255,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(197,255,255,.1) 1px, transparent 1px);
  background-size: 40px 40px;
}
.us-wahl-ki::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--pink); }
.us-wahl-paar .kicker { margin: 0; color: inherit; opacity: .75; }
.us-wahl-wort { font-size: clamp(48px, 6vw, 110px); line-height: 1; letter-spacing: -.04em; }
.us-wahl-hand .us-wahl-wort { font-family: var(--serif); font-style: italic; font-weight: 300; font-variation-settings: "opsz" 144, "SOFT" 100; }
.us-wahl-ki .us-wahl-wort { font-family: var(--mono); font-weight: 500; letter-spacing: -.06em; }
.us-wahl-paar p:not(.kicker):not(.us-wahl-wort) { font-size: 17px; line-height: 1.6; max-width: 32em; }

/* ---------- Häufige Fragen: seit 19.10.2026 in css/fragen.css (Startseite und Unterseiten) ---------- */

/* ---------- Kontakt am Ende ---------- */
.us-kontakt { border-top: 1px solid var(--blass); }
.us-aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.us .kontakt .knopf { background: var(--pink); border-color: var(--pink); color: var(--weiss); }
.us .kontakt .knopf:hover { background: var(--tinte); border-color: var(--tinte); }
.us .kontakt .knopf--linie { background: transparent; border-color: var(--tinte); color: var(--tinte); }
.us .kontakt .knopf--linie:hover { background: var(--tinte); color: var(--weiss); }

/* ---------- Gemeinsame Kleinteile ---------- */
.us-etikett { display: inline-block; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; background: var(--tinte); color: var(--papier); }
.us-hinweisbox { margin-top: 32px; padding: 28px 32px; border-radius: 24px; background: var(--ice); color: var(--tinte); }
.us-hinweisbox p { color: var(--tinte) !important; }
.us-hinweisbox .us-etikett { margin-bottom: 14px; }

@media (max-width: 900px) {
  /* minmax(0, …): Eine Spalte darf nie breiter werden als der Bildschirm, auch bei langen Wörtern */
  .us-kopf-raster { grid-template-columns: minmax(0, 1fr); }
  /* Lange Wörter in großen Überschriften (z. B. „datenschutzkonform?“) trennen statt überstehen */
  :is(.us-h2, .us-titel, .titel) { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
  .us-wahl-paar { grid-template-columns: 1fr; }
  .us-wahl-hand { border-radius: 24px 24px 0 0; }
  .us-wahl-ki { border-radius: 0 0 24px 24px; }
  .us-wahl-ki::before { width: auto; height: 2px; right: 0; bottom: auto; }
  .us-wahl-paar > div { min-height: 0; }
}

/* =====================================================================
   Teil 2 · Szenen
   ===================================================================== */

/* ---------- Webdesign: die Website baut sich auf ---------- */
.wd-bau { position: relative; }
.wd-browser {
  position: relative; aspect-ratio: 16 / 11; border-radius: 18px; overflow: hidden;
  background: var(--weiss); border: 1.5px solid var(--tinte); box-shadow: 0 30px 80px rgba(37,0,38,.16), 0 4px 0 var(--tinte);
}
.wd-leiste { height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 14px; border-bottom: 1.5px solid var(--tinte); background: var(--papier); }
.wd-leiste i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--tinte); }
.wd-url { margin-left: 12px; flex: 1; max-width: 60%; font: 500 11px/24px var(--mono); padding: 0 12px; border-radius: 999px; background: #f3f0f3; color: var(--grau); }
.wd-url b { color: var(--tinte); font-weight: 500; }
.wd-url .wd-schloss { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 2px; background: #1aa772; opacity: 0; transition: opacity .4s; }
.wd-flaeche { position: absolute; inset: 38px 0 0; padding: 4.5% 6%; display: grid; grid-template-rows: auto 1fr auto; gap: 7%; }
.wd-nav { display: flex; align-items: center; gap: 6%; }
.wd-nav b { width: 18%; height: 12px; border-radius: 6px; }
.wd-nav span { width: 9%; height: 7px; border-radius: 4px; }
.wd-nav span:first-of-type { margin-left: auto; }
.wd-held { display: grid; grid-template-columns: 1.1fr 1fr; gap: 7%; align-items: center; }
.wd-held-text { display: grid; gap: 10px; }
.wd-zeile { height: 16px; border-radius: 6px; }
.wd-z1 { width: 100%; height: 26px; }
.wd-z2 { width: 70%; height: 26px; }
.wd-z3 { width: 88%; height: 8px; margin-top: 6px; }
.wd-z4 { width: 64%; height: 8px; }
.wd-knopf { justify-self: start; margin-top: 10px; padding: 9px 16px; border-radius: 999px; font: 500 12px/1 var(--text); white-space: nowrap; }
.wd-held-bild { aspect-ratio: 1; border-radius: 14px; }
.wd-karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4%; }
.wd-karten span { height: 54px; border-radius: 10px; }
/* Stufe 0: Wireframe */
.wd-nav b, .wd-nav span, .wd-zeile, .wd-held-bild, .wd-karten span, .wd-knopf {
  background: transparent; border: 1.5px dashed #bfb2bf; color: transparent;
  transition: background .6s cubic-bezier(.2,.8,.2,1), border-color .6s, color .4s, transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s;
}
.wd-held-bild { position: relative; }
.wd-held-bild::before, .wd-held-bild::after { content: ""; position: absolute; left: 50%; top: 50%; width: 140%; height: 1.5px; background: #d9cfd9; transform: translate(-50%, -50%) rotate(45deg); transition: opacity .4s; }
.wd-held-bild::after { transform: translate(-50%, -50%) rotate(-45deg); }
/* Stufe 1: Design */
.wd-browser[data-stufe="1"] :is(.wd-nav b, .wd-z1, .wd-z2), .wd-browser[data-stufe="2"] :is(.wd-nav b, .wd-z1, .wd-z2) { background: var(--tinte); border-color: var(--tinte); }
.wd-browser[data-stufe="1"] :is(.wd-nav span, .wd-z3, .wd-z4), .wd-browser[data-stufe="2"] :is(.wd-nav span, .wd-z3, .wd-z4) { background: var(--blass); border-color: transparent; }
.wd-browser[data-stufe="1"] .wd-z2, .wd-browser[data-stufe="2"] .wd-z2 { background: var(--pink); border-color: var(--pink); }
.wd-browser[data-stufe="1"] .wd-knopf, .wd-browser[data-stufe="2"] .wd-knopf { background: var(--pink); border: 1.5px solid var(--pink); color: var(--weiss); }
.wd-browser[data-stufe="1"] .wd-held-bild, .wd-browser[data-stufe="2"] .wd-held-bild {
  border-color: transparent;
  background: radial-gradient(70% 60% at 30% 25%, rgba(237,30,121,.75), transparent 60%), radial-gradient(80% 70% at 80% 90%, var(--ice), transparent 65%), linear-gradient(140deg, #ffe3ef, var(--ice));
}
.wd-browser[data-stufe="1"] .wd-held-bild::before, .wd-browser[data-stufe="1"] .wd-held-bild::after,
.wd-browser[data-stufe="2"] .wd-held-bild::before, .wd-browser[data-stufe="2"] .wd-held-bild::after { opacity: 0; }
.wd-browser[data-stufe="1"] .wd-karten span, .wd-browser[data-stufe="2"] .wd-karten span { background: var(--ice); border-color: transparent; }
.wd-browser[data-stufe="1"] .wd-karten span:nth-child(2), .wd-browser[data-stufe="2"] .wd-karten span:nth-child(2) { background: #ffe3ef; }
/* Stufe 2: live, Anfrage kommt rein */
.wd-browser[data-stufe="2"] .wd-schloss { opacity: 1; }
.wd-browser[data-stufe="2"] .wd-knopf { transform: scale(.94); box-shadow: 0 0 0 6px rgba(237,30,121,.18); }
.wd-cursor {
  position: absolute; left: 70%; top: 88%; width: 22px; height: 22px; z-index: 3; pointer-events: none; opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 9-6.5 1.5L16 20l-3 1.5-3.4-7.4L4 18z' fill='%23250026' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 0 0 / contain;
  transition: left .9s cubic-bezier(.2,.8,.2,1), top .9s cubic-bezier(.2,.8,.2,1), opacity .3s;
}
.wd-browser[data-stufe="2"] .wd-cursor { opacity: 1; left: var(--cx, 16%); top: var(--cy, 58%); }
.wd-toast {
  position: absolute; right: 16px; top: 54px; z-index: 3; display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 14px; background: var(--tinte); color: var(--weiss);
  font: 500 13px/1.2 var(--text); box-shadow: 0 14px 30px rgba(37,0,38,.25);
  opacity: 0; transform: translateY(-12px) scale(.96); transition: opacity .4s .5s, transform .5s .5s cubic-bezier(.2,.8,.2,1);
}
.wd-toast::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--leistung, var(--pink)); box-shadow: 0 0 0 4px rgba(255,151,0,.3); }
.wd-browser[data-stufe="2"] .wd-toast { opacity: 1; transform: none; }
.wd-schritte { display: flex; gap: 8px; margin-top: 22px; justify-content: center; }
.wd-schritte li { font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 10px 14px; border-radius: 999px; border: 1.5px solid var(--blass); color: var(--grau); transition: background .4s, color .4s, border-color .4s; }
.wd-schritte li.an { background: var(--tinte); border-color: var(--tinte); color: var(--weiss); }
.wd-schritte li:last-child.an { background: var(--leistung, var(--pink)); border-color: var(--leistung, var(--pink)); color: var(--tinte); }
/* klickbar (js/unterseiten.js) */
.wd-schritte li[role="button"] { cursor: pointer; user-select: none; }
.wd-schritte li[role="button"]:not(.an):hover { border-color: var(--tinte); color: var(--tinte); }
.wd-schritte li[role="button"].an:hover { transform: translateY(-1px); }
.wd-schritte li[role="button"]:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }

/* 3-Sekunden-Check: auf Gelb (Farbe von Webdesign), Schrift in Berry */
.wd-check { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--kopf-h) + 4vh) 0 6vh; background: var(--gelb) !important; color: var(--tinte); }
.wd-check > .rahmen { width: 100%; }
.wd-check .kicker { color: var(--tinte); opacity: .75; }
.wd-check .us-h2 { max-width: 14ch; font-size: clamp(32px, 3.6vw, 64px); }
.wd-check-raster { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 120px); align-items: center; }
.wd-uhr { margin-top: 4vh; font: 700 clamp(100px, min(15vw, 24vh), 300px)/.8 var(--display); letter-spacing: -.06em; font-variant-numeric: tabular-nums; color: var(--tinte); }
.wd-uhr small { font: 400 italic .3em/1 var(--serif); letter-spacing: -.02em; color: var(--tinte); margin-left: .1em; }   /* Berry statt Weiß: Weiß auf Gelb hat nur 2,2:1 (Barrierefreiheit, 23.10.2026) */
.wd-uhr-text { margin-top: 18px; color: var(--tinte-2); max-width: 26em; font-size: 17px; }
/* Handy: kleine Uhr läuft oben mit, sobald die große weggescrollt ist (js/unterseiten.js) */
.wd-uhr-folgt {
  position: fixed; z-index: 60; top: calc(12px + env(safe-area-inset-top, 0px)); left: 50%; margin: 0;
  display: flex; align-items: baseline; gap: 6px; padding: 10px 18px 9px; border-radius: 999px;
  background: var(--tinte); color: var(--gelb); box-shadow: 0 10px 28px rgba(37, 0, 38, .28);
  font: 700 30px/1 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums;
  opacity: 0; transform: translate(-50%, -140%); transition: opacity .3s, transform .45s cubic-bezier(.2, .8, .2, 1); pointer-events: none;
}
.wd-uhr-folgt small { font: 400 italic 15px/1 var(--serif); letter-spacing: 0; color: var(--weiss); }
.wd-uhr-folgt.sichtbar { opacity: 1; transform: translate(-50%, 0); }
.wd-check { position: relative; }
.wd-pruefungen li.wd-fazit-zeile { display: block; border-bottom: 0; opacity: 1 !important; }
.wd-pruefungen li { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: clamp(14px, 2.4vh, 26px) 0; border-top: 1px solid rgba(37,0,38,.22); transition: opacity .5s; }
.wd-pruefungen li:last-child { border-bottom: 1px solid rgba(37,0,38,.22); }
.wd-pruefungen .wd-haken { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(37,0,38,.35); display: grid; place-items: center; transition: background .4s, border-color .4s; }
.wd-pruefungen .wd-haken::after { content: ""; width: 14px; height: 8px; border: solid var(--weiss); border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(1px, -2px) scale(0); transition: transform .4s cubic-bezier(.2,.8,.2,1.6); }
.wd-pruefungen li.an .wd-haken { background: var(--tinte); border-color: var(--tinte); }
.wd-pruefungen li.an .wd-haken::after { transform: rotate(-45deg) translate(1px, -2px) scale(1); }
.wd-check-an .wd-pruefungen li:not(.an) { opacity: .35; }
/* Abgehakte Checks werden zur weißen Karte, damit sie sich erledigt anfühlen (24.10.2026) */
.wd-check-an .wd-pruefungen { display: grid; gap: 10px; }
.wd-check-an .wd-pruefungen li:not(.wd-fazit-zeile) { border: 0; border-radius: 20px; padding-inline: clamp(14px, 2vw, 26px); background: rgba(255,255,255,0); box-shadow: inset 0 0 0 1px rgba(37,0,38,.22); transition: opacity .5s, background .5s, box-shadow .5s; }
.wd-check-an .wd-pruefungen li.wd-fazit-zeile { border: 0; }
.wd-check-an .wd-pruefungen li.an:not(.wd-fazit-zeile) { background: var(--weiss); box-shadow: 0 14px 34px -22px rgba(37,0,38,.55); }
.wd-pruefungen h3 { font: 700 clamp(26px, 2.6vw, 42px)/1 var(--display); text-transform: uppercase; letter-spacing: -.02em; margin-bottom: 10px; }
.wd-pruefungen p { color: var(--tinte-2); font-size: 16px; line-height: 1.6; }
.wd-check-fazit { margin-top: 40px; font: 400 italic clamp(22px, 2vw, 32px)/1.3 var(--serif); max-width: 28em; }

/* ---------- Copywriting: Rotstift ---------- */
/* Blatt ohne Bindung. Schatten in Schichten (Kontakt, Nähe, Ferne), leicht ins Berry getönt,
   dazu eine feine Lichtkante oben, damit es wie Papier auf dem Tisch wirkt */
.cw-pult {
  position: relative; padding: clamp(28px, 4vw, 52px); border-radius: 28px; background: #fffdf7; border: 1px solid rgba(37,0,38,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(37,0,38,.06), 0 4px 10px -2px rgba(37,0,38,.06),
    0 18px 36px -10px rgba(37,0,38,.12), 0 42px 80px -24px rgba(37,0,38,.16);
}
.cw-pult::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: repeating-linear-gradient(180deg, transparent 0 39px, rgba(116,241,235,.45) 39px 40px); }
.cw-pult .kicker { position: relative; margin-bottom: 20px; }
.cw-alt { position: relative; font: 400 clamp(26px, 2.6vw, 44px)/1.25 var(--serif); letter-spacing: -.02em; color: var(--tinte); font-variation-settings: "opsz" 144; }
.cw-alt .w { position: relative; }
.cw-alt .w::after { content: ""; position: absolute; left: -2px; right: -2px; top: 54%; height: 4px; border-radius: 2px; background: var(--pink); transform: scaleX(0) rotate(-2deg); transform-origin: 0 50%; transition: transform .35s cubic-bezier(.6,0,.2,1); }
.cw-alt .w.weg::after { transform: scaleX(1) rotate(-2deg); }
.cw-alt .w.weg { color: var(--grau); transition: color .3s .2s; }
.cw-notizen { position: relative; display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; }
.cw-notizen li { font: 400 italic 20px/1.2 var(--serif); color: var(--pink); transform: rotate(-2deg); }
.cw-notizen li::before { content: "↳ "; font-style: normal; }
.cw-neu { position: relative; margin-top: 28px; padding-top: 22px; border-top: 2px solid var(--tinte); font: 700 clamp(30px, 3.4vw, 58px)/1 var(--display); letter-spacing: -.03em; text-transform: uppercase; }
.cw-neu em { font: 400 italic 1em/1 var(--serif); text-transform: none; color: var(--pink); }
.redigieren-an .cw-notizen li, .redigieren-an .cw-neu { opacity: 0; transform: translateY(14px) rotate(-2deg); transition: opacity .5s, transform .6s cubic-bezier(.2,.8,.2,1); }
.redigieren-an .cw-neu { transform: translateY(14px); }
.redigieren-an .cw-notizen li.an { opacity: 1; transform: rotate(-2deg); }
.redigieren-an .cw-neu.an { opacity: 1; transform: none; }

.cw-konsole { border-radius: 24px; overflow: hidden; background: var(--nacht); color: var(--ice); box-shadow: 0 30px 70px rgba(37,0,38,.22); }
.cw-konsole-leiste { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--dunkel-linie); font: 500 12px/1 var(--mono); letter-spacing: .06em; color: var(--dunkel-grau); }
.cw-konsole-leiste i { width: 10px; height: 10px; border-radius: 50%; background: var(--dunkel-linie); }
.cw-konsole-leiste i:first-child { background: var(--pink); }
.cw-konsole-leiste span { margin-left: 10px; }
.cw-prompt { padding: clamp(22px, 3vw, 36px); font: 400 clamp(14px, 1.15vw, 17px)/1.75 var(--mono); white-space: pre-line; min-height: 16em; }
.cw-prompt .aus { opacity: 0; }
.cw-prompt b { color: var(--pink); font-weight: 500; }
.cw-cursor { display: inline-block; width: .6em; height: 1.1em; vertical-align: -.2em; background: var(--ice); animation: blinken 1s steps(1) infinite; }

/* ---------- Scroll-Hinweis (Webdesign, Texte, Grafik): wie auf der Startseite, unten rechts,
   blendet nach 3 Sekunden ganz leise ein und beim ersten Scrollen wieder aus ---------- */
.us-scroll-hinweis {
  position: fixed; right: var(--rand); bottom: 28px; z-index: 40; margin: 0; pointer-events: none;
  opacity: 0; animation: hinweis-ein 1.2s ease 3s forwards;
}
.us-scroll-hinweis.weg { animation: none; opacity: 0; transition: opacity .5s; }
@keyframes hinweis-ein { to { opacity: .85; } }
.ruhig .us-scroll-hinweis, .cms-an .us-scroll-hinweis { display: none; }

/* ---------- Grafik & Design: der Farbtopf ---------- */
.gd-buehne { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--papier); }
.gd-text { position: absolute; z-index: 3; left: var(--rand); top: calc(var(--kopf-h) + 8vh); max-width: min(46vw, 640px); }
.gd-text .us-titel { font-size: clamp(44px, 6.2vw, 116px); }
.gd-text .lead { margin-top: 24px; max-width: 30em; }
.gd-boden { position: absolute; left: 0; right: 0; bottom: 0; height: 9vh; border-top: 1.5px solid var(--tinte); }
/* Bühnenbox: Grafik-Einheiten der Flamingo-Puppe, viewBox -250 40 1650 1600 (wie .manifest-puppe).
   Die Füße (y 1590) stehen bei 96,9 % der Höhe auf der Bodenlinie; der Topf steht vor ihm am Boden. */
.gd-vogel { position: absolute; z-index: 2; right: max(2.5vw, calc(50% - 800px)); bottom: calc(9vh - min(94vh, 58vw) * 1600 / 1650 * .031); width: min(94vh, 58vw); aspect-ratio: 1650 / 1600; }
.gd-puppe { position: absolute; inset: 0; }
.gd-puppe > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gd-puppe > img { position: absolute; left: 13.94%; top: .63%; width: 83.64%; height: 96.88%; max-width: none; }
.gd-puppe.laeuft > img { display: none; }
/* Pinkes Fass am Boden vor dem Schnabel (seit 17.10.2026 statt des Farbtopfs). Maßstab: Fass 855 Bildpixel hoch
   = 29,9 % der Box; beide Bilder im selben Maßstab. Die rechte Kante (32 %) liegt dort, wo der Schnabel beim
   Hinunterbeugen vorbeikommt. Es kippt um die linke Unterkante nach links (-90°). */
.gd-fass { position: absolute; left: 13.07%; width: 18.93%; top: 66.98%; height: 29.92%; z-index: 1; transform-origin: 0% 100%; }
.gd-fass img { display: block; width: 100%; height: 100%; }
/* Umgeworfenes Fass, am gemeinsamen Kipppunkt ausgerichtet (20.10.2026): Kipppunkt = linke Unterkante des stehenden
   Fasses (x 13,07 %, Boden y 96,9 %). Das kippende Fass liegt nach -90° mit dem Boden genau dort, also sitzt im Bild die
   Unterkante des Bodenrings (Bild-x 640 von 763) am Kipppunkt und die Auflage des Fasskörpers (Bild-y 495 von 678, wo er
   in die Farbe taucht) auf dem Boden. Farbe und Deckel laufen davor aus. Vorher lag es 3 % zu hoch und 4,5 % zu weit links.
   Maßstab: Durchmesser des Bodenrings = Breite des stehenden Fasses (18,93 %). */
.gd-fass-um { position: absolute; left: -15.97%; width: 34.62%; top: 73.74%; height: 31.73%; max-width: none; z-index: 1; opacity: 0; }
/* Die Pfütze unter der ausgelaufenen Farbe wächst danach über den Boden zur Flut */
.gd-pfuetze { position: absolute; left: -2%; width: 18%; top: 95%; height: 4%; border-radius: 50%; background: var(--pink); transform: scale(0); transform-origin: 50% 50%; z-index: 0; }
.gd-blase {
  position: absolute; left: 6%; top: 65%; padding: 10px 16px; border-radius: 18px 18px 18px 4px;   /* beim Kopf, der unten bleibt */
  background: var(--tinte); color: var(--weiss); font: 400 italic clamp(16px, 1.4vw, 22px)/1.1 var(--serif); white-space: nowrap; opacity: 0;
}
/* Die Farbe läuft über den Boden aus der Bühne hinaus */
.gd-flutkante { position: absolute; left: 0; right: 0; bottom: 0; height: calc(9vh + 1px); background: var(--pink); z-index: 1;
  clip-path: ellipse(0% 0% at var(--pfuetze-x, 25%) 0%); }   /* füllt den Boden von der Pfütze aus (js/unterseiten.js), nicht von unten */
/* Die nächsten drei Sektionen werden von EINER Flut pink eingefärbt (Höhe und Nasenlänge --tropf setzt js/unterseiten.js) */
.gd-flut { position: relative; overflow: hidden; color: var(--tinte); }
.us main > .gd-flut--ende { overflow: visible; z-index: 3; }   /* letzte: Nasen tropfen in den nächsten Abschnitt (.us main > section liegt auf z-index 2) */
.gd-farbe {
  position: absolute; inset: -2px 0 auto; height: calc(100% + 140px); z-index: 0; pointer-events: none;
  background: var(--pink); --tropf: 140px;
  -webkit-mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - var(--tropf) + 1px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 140' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1200V30C1180 30 1172 52 1170 70C1168 92 1160 98 1152 98C1144 98 1138 88 1138 64C1138 40 1120 34 1090 34C1050 34 1040 44 1038 90C1036 126 1026 138 1014 138C1002 138 994 124 994 96C994 58 980 38 930 38C880 38 860 30 840 30C810 30 806 46 804 60C802 76 794 82 786 82C776 82 772 70 772 52C772 36 756 30 720 30C660 30 640 40 636 78C634 104 626 112 616 112C604 112 598 100 598 74C598 46 584 32 540 32C480 32 470 50 468 120C467 134 460 140 450 140C440 140 432 132 432 112C432 60 418 34 360 34C300 34 286 44 284 66C282 84 276 92 266 92C256 92 250 82 250 64C250 44 230 32 180 32C130 32 116 52 114 96C112 118 104 126 94 126C82 126 76 114 76 88C76 52 60 30 0 30Z'/%3E%3C/svg%3E") 0 100% / 100% var(--tropf) no-repeat;
          mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - var(--tropf) + 1px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 140' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1200V30C1180 30 1172 52 1170 70C1168 92 1160 98 1152 98C1144 98 1138 88 1138 64C1138 40 1120 34 1090 34C1050 34 1040 44 1038 90C1036 126 1026 138 1014 138C1002 138 994 124 994 96C994 58 980 38 930 38C880 38 860 30 840 30C810 30 806 46 804 60C802 76 794 82 786 82C776 82 772 70 772 52C772 36 756 30 720 30C660 30 640 40 636 78C634 104 626 112 616 112C604 112 598 100 598 74C598 46 584 32 540 32C480 32 470 50 468 120C467 134 460 140 450 140C440 140 432 132 432 112C432 60 418 34 360 34C300 34 286 44 284 66C282 84 276 92 266 92C256 92 250 82 250 64C250 44 230 32 180 32C130 32 116 52 114 96C112 118 104 126 94 126C82 126 76 114 76 88C76 52 60 30 0 30Z'/%3E%3C/svg%3E") 0 100% / 100% var(--tropf) no-repeat;
}
.gd-flut > .rahmen { position: relative; z-index: 1; }
.gd-flut + .us-abschnitt { padding-top: clamp(80px, 14vh, 160px); }
/* Jeder Block wird weiß, sobald die Farbe unter ihm durch ist (.nass) */
.gd-flut :is(.kicker, .us-h2, .us-fliess > *, .us-wahl-satz) { transition: color .5s, border-color .5s; }
.gd-flut :is(.us-fliess > *, .kicker, .us-h2, .us-wahl-satz).nass, .gd-flut .us-fliess > .nass :is(li, b) { color: var(--weiss); }
.gd-flut .us-merksatz.nass { border-left-color: var(--weiss); color: var(--weiss) !important; }
/* Weitere pinke Abschnitte: Überschriften weiß, die Hervorhebung in Berry */
.gd-flut .us-h2.nass em { color: var(--tinte); }
/* Die pinken Abschnittsnummern (01–03) wären auf der Farbe unsichtbar: auf Pink in Berry */
.us main > section.gd-flut .kicker b { transition: color .5s; }
.us main > section.gd-flut .kicker.nass b, .ruhig .us main > section.gd-flut .kicker b { color: var(--tinte); }
.gd-flut .us-wahl-paar .kicker { color: inherit !important; }
/* Grau wird rosa auf Pink: der Vogel bekommt ein weißes Blatt, damit er sichtbar bleibt */
.gd-flut .gd-faerben { background: var(--weiss); border-radius: 18px; padding: clamp(16px, 2vw, 28px); position: relative; z-index: 1; }
/* Über der Farbe liegen: links bleibt sticky wie in jedem .us-zwei (relative hätte den Abstand von sticky behalten
   und die Karte 96 px nach unten geschoben, am Handy über den Text) */
.gd-flut .gd-pruef-links { position: sticky; z-index: 1; }
.gd-flut .us-fliess { position: relative; z-index: 1; }
@media (max-width: 900px) { .gd-flut .gd-pruef-links { position: relative; top: auto; } }
/* Ohne Bewegung: Fass liegt schon, Farbe ist ausgelaufen */
.ruhig .gd-fass { visibility: hidden; }
.ruhig .gd-fass-um { opacity: 1; }
/* Am Handy rollt es nach dem Landen ein Stück aus (js/unterseiten.js), ohne Animation liegt es gleich dort */
@media (max-width: 900px) { .ruhig .gd-fass-um { transform: translateX(27%); } }
.ruhig .gd-flut :is(.us-h2, .us-wahl-satz) { color: var(--weiss); }
.ruhig .gd-flut .us-h2 em { color: var(--tinte); }
.ruhig .gd-pfuetze { transform: scale(1); }
.ruhig .gd-flutkante { clip-path: none; }
.ruhig .gd-farbe { transform: none; }
.ruhig .gd-flut { color: var(--weiss); }
.ruhig .gd-flut :is(.us-fliess p, .us-fliess li, .kicker, .us-fliess b) { color: var(--weiss); }
.ruhig .gd-flut .us-merksatz { border-left-color: var(--weiss); color: var(--weiss) !important; }

/* Styleguide-Bogen: was im Corporate Design steckt */
.gd-bogen { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-top: clamp(40px, 7vh, 72px); }
.gd-feld { position: relative; border-radius: 20px; padding: 20px; min-height: 180px; border: 1.5px solid var(--blass); display: flex; flex-direction: column; justify-content: space-between; background: var(--weiss); }
.gd-feld .us-etikett { align-self: flex-start; }
.gd-feld p { font-size: 15px; line-height: 1.45; color: var(--tinte-2); }
.gd-feld--logo { grid-column: span 3; grid-row: span 2; }
.gd-feld--farben { grid-column: span 3; }
.gd-feld--schrift { grid-column: span 3; }
.gd-feld--vorlagen { grid-column: span 3; }
.gd-feld--guide { grid-column: span 3; background: var(--tinte); border-color: var(--tinte); }
.gd-feld--guide p { color: var(--dunkel-text); }
.gd-feld--guide .us-etikett { background: var(--pink); }
/* 01 · Logo: die echten Varianten (img/logo/, 1C schwarz, seit 20.10.2026), immer in Originalfarben auf hellem
   Grund, nie invertiert (00 Kontext/Branding.md), dazu unser Flamingo. Raster: quer | Icon, hoch über zwei Zeilen | Schriftzug, Vogel. */
.gd-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(86px, 8.6vw, 132px); gap: 10px; margin: 18px 0;
  grid-template-areas: "quer quer icon" "hoch schrift schrift" "hoch vogel vogel"; }
.gd-logo { position: relative; min-width: 0; min-height: 0; border-radius: 14px; background: #f6f3f6; overflow: hidden; --i: 14%; }
/* Logo als Bild im Innenrand der Kachel (fest positioniert, damit es sich nicht über die Kachel hinaus aufbläht) */
.gd-logo img { position: absolute; inset: var(--i); width: calc(100% - 2 * var(--i)); height: calc(100% - 2 * var(--i)); max-width: none; object-fit: contain; }
.gd-logo--quer { grid-area: quer; --i: 16%; }
.gd-logo--icon { grid-area: icon; background: var(--pink); --i: 13%; }
.gd-logo--hoch { grid-area: hoch; background: var(--tuerkis2); --i: 15%; }
.gd-logo--schrift { grid-area: schrift; background: var(--weiss); border: 1.5px solid var(--blass); --i: 18%; }
.gd-logo--vogel { grid-area: vogel; background: var(--tuerkis); --i: 7%; }

/* 04 · Vorlagen: Briefpapier, Visitenkarte (vorne pink mit Icon, hinten weiß) und ein Social-Media-Post.
   Alle Maße hängen an der Höhe der Bühne (cqh), so passt es in jede Feldbreite. */
.gd-vorlagen { position: relative; height: clamp(124px, 11vw, 168px); margin: 18px 0 14px; container-type: size; }
.gd-vorlagen > span { position: absolute; display: block; overflow: hidden; background: var(--weiss); border-radius: 5px;
  box-shadow: 0 8px 20px rgba(37, 0, 38, .13); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.gd-vorlagen img { position: absolute; max-width: none; object-fit: contain; }
.gd-vorlagen i { position: absolute; height: 2.4cqh; border-radius: 2px; background: #e8e0e8; }
.gd-brief { left: 2%; top: 0; height: 100cqh; width: 70.7cqh; transform: rotate(-4deg); }
.gd-brief img { right: 9cqh; top: 9cqh; width: 30cqh; height: 15cqh; object-position: right top; }
.gd-brief i { left: 9cqh; width: 52cqh; }
.gd-brief i:nth-of-type(1) { top: 38cqh; } .gd-brief i:nth-of-type(2) { top: 46cqh; width: 44cqh; } .gd-brief i:nth-of-type(3) { top: 54cqh; }
.gd-brief i:nth-of-type(4) { top: 62cqh; width: 36cqh; } .gd-brief i:nth-of-type(5) { top: 80cqh; width: 22cqh; }
.gd-karte { width: 77cqh; height: 50cqh; }
.gd-vorlagen .gd-karte--hinten { left: calc(2% + 52cqh); top: 46cqh; transform: rotate(5deg); }
.gd-karte--hinten img { left: 7cqh; top: 8cqh; width: 32cqh; height: 14cqh; object-position: left top; }
.gd-karte--hinten i { left: 7cqh; width: 26cqh; } .gd-karte--hinten i:nth-of-type(1) { top: 32cqh; } .gd-karte--hinten i:nth-of-type(2) { top: 39cqh; width: 18cqh; }
.gd-vorlagen .gd-karte--vorne { left: calc(2% + 64cqh); top: 4cqh; background: var(--pink); transform: rotate(-7deg); z-index: 1; }
.gd-karte--vorne img { left: 0; right: 0; top: 7cqh; width: 100%; height: 36cqh; }
.gd-vorlagen .gd-post { left: calc(2% + 150cqh); top: 9cqh; width: 82cqh; height: 82cqh; background: var(--tuerkis2); transform: rotate(4deg); }
.gd-post img { left: 0; top: 10cqh; width: 100%; height: 62cqh; }
.gd-post b { position: absolute; right: 7cqh; bottom: 7cqh; width: 9cqh; height: 9cqh; border-radius: 50%; background: var(--pink); }
.gd-feld--vorlagen:hover .gd-brief { transform: rotate(-6deg) translateY(-4px); }
.gd-feld--vorlagen:hover .gd-karte--vorne { transform: rotate(-11deg) translate(-6px, -6px); }
.gd-feld--vorlagen:hover .gd-karte--hinten { transform: rotate(8deg) translate(4px, 4px); }
.gd-feld--vorlagen:hover .gd-post { transform: rotate(7deg) translateY(-4px); }

/* 05 · Styleguide: aufgefächertes PDF mit Logo, Farben und Schrift auf dem Titelblatt */
.gd-pdf { position: relative; height: clamp(124px, 11vw, 168px); margin: 18px 0 14px; container-type: size; }
.gd-pdf-seite { position: absolute; left: 50%; top: 0; height: 100cqh; width: 70.7cqh; border-radius: 4px; background: var(--weiss); overflow: hidden;
  transform: translateX(-50%); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.gd-pdf-seite:nth-child(1) { opacity: .35; transform: translateX(-112%) rotate(-10deg); }
.gd-pdf-seite:nth-child(2) { opacity: .6; transform: translateX(-80%) rotate(-5deg); }
.gd-pdf-titel { box-shadow: 0 10px 24px rgba(0, 0, 0, .35); }
.gd-pdf-titel img { position: absolute; left: 8cqh; top: 10cqh; width: 54cqh; height: 27cqh; max-width: none; object-fit: contain; object-position: left top; }
.gd-pdf-titel i { position: absolute; left: 8cqh; top: 52cqh; display: flex; gap: 3cqh; }
.gd-pdf-titel i b { width: 10cqh; height: 10cqh; border-radius: 50%; background: var(--pink); }
.gd-pdf-titel i b:nth-child(2) { background: var(--tinte); }
.gd-pdf-titel i b:nth-child(3) { background: var(--tuerkis2); }
.gd-pdf-titel i b:nth-child(4) { background: var(--gelb); }
.gd-pdf-titel em { position: absolute; left: 8cqh; bottom: 9cqh; font: 400 italic 19cqh/1 var(--serif); color: var(--tinte); }
.gd-pdf-tag { position: absolute; left: calc(50% + 22cqh); bottom: 6cqh; font: 500 11px/1 var(--mono); letter-spacing: .1em;
  padding: 6px 8px; border-radius: 4px; background: var(--pink); color: var(--weiss); transform: rotate(-6deg); }
.gd-feld--guide:hover .gd-pdf-seite:nth-child(1) { transform: translateX(-130%) rotate(-14deg); }
.gd-feld--guide:hover .gd-pdf-seite:nth-child(2) { transform: translateX(-90%) rotate(-8deg); }
@media (prefers-reduced-motion: reduce) { .gd-vorlagen > span, .gd-pdf-seite { transition: none; } }
.gd-chips { display: flex; gap: 8px; margin: 14px 0; }
.gd-chips span { flex: 1; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid var(--blass); }
.gd-aa { font: 400 italic 64px/1 var(--serif); margin: 6px 0; }
.gd-aa b { font: 700 64px/1 var(--display); font-style: normal; margin-right: 12px; }
.gd-schritte { counter-reset: s; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: clamp(40px, 7vh, 72px); border-top: 1.5px solid var(--tinte); }
.gd-schritte li { counter-increment: s; padding: 22px 20px 0 0; position: relative; }
.gd-schritte li::before { content: "0" counter(s); display: block; font: 700 clamp(56px, 6vw, 100px)/.9 var(--display); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px var(--tinte); margin-bottom: 14px; }
.gd-schritte li:nth-child(2)::before { -webkit-text-stroke-color: var(--pink); }
.gd-schritte h3 { font: 700 22px/1.05 var(--display); text-transform: uppercase; margin-bottom: 8px; }
.gd-schritte p { font-size: 15px; color: var(--tinte-2); }

/* ---------- Foto & Video: Sucher ---------- */
.fv-sucher { position: relative; aspect-ratio: 4 / 5; width: min(100%, 60vh); margin-left: auto; border-radius: 6px; overflow: hidden; background: var(--tinte); }
.fv-sucher .bild-innen, .fv-sucher [data-cms-bild] { position: absolute; inset: 0; }
.fv-sucher .bild-innen { background: radial-gradient(60% 50% at 40% 35%, rgba(237,30,121,.65), transparent 60%), radial-gradient(70% 60% at 70% 85%, var(--ice), transparent 70%), linear-gradient(160deg, #3a0c3b, #a01458 55%, #ffd6e8); }
.fv-sucher img { width: 100%; height: 100%; object-fit: cover; }
/* Video im Sucher (js/unterseiten.js): liegt über dem Standbild und blendet ein, sobald es wirklich läuft */
.fv-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; }
.fv-laeuft .fv-film { opacity: 1; }
.fv-schaerfe { position: absolute; inset: 0; transition: filter .2s; }
.fv-rahmen { position: absolute; inset: 18px; pointer-events: none; color: var(--weiss); font: 500 12px/1 var(--mono); letter-spacing: .1em; }
.fv-ecke { position: absolute; width: 34px; height: 34px; border: 2px solid currentColor; }
.fv-ecke:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; }
.fv-ecke:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; }
.fv-ecke:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 2px 2px; }
.fv-ecke:nth-child(4) { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
.fv-fokus { position: absolute; left: 50%; top: 42%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 1.5px solid var(--weiss); transition: border-color .3s, transform .4s cubic-bezier(.2,.8,.2,1.6); }
.fv-fokus.scharf { border-color: var(--pink); transform: translate(-50%, -50%) scale(.86); }
.fv-rec { position: absolute; left: 44px; top: 10px; display: flex; align-items: center; gap: 8px; }
.fv-rec::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--pink); animation: blinken 1.2s steps(1) infinite; }
.fv-zeit { position: absolute; right: 44px; top: 10px; font-variant-numeric: tabular-nums; }
.fv-werte { position: absolute; left: 44px; right: 44px; bottom: 10px; display: flex; justify-content: space-between; opacity: .85; }
.fv-streifen-buehne { overflow: hidden; margin-top: clamp(40px, 7vh, 72px); }
.fv-streifen {
  display: flex; gap: 0; width: max-content; padding: 30px 0; background: var(--tinte);
  --loch: radial-gradient(circle, transparent 0 0, transparent 0);
  background-image: repeating-linear-gradient(90deg, var(--weiss) 0 14px, transparent 14px 34px), repeating-linear-gradient(90deg, var(--weiss) 0 14px, transparent 14px 34px);
  background-size: 100% 10px, 100% 10px; background-position: 0 10px, 0 calc(100% - 10px); background-repeat: no-repeat;
}
.fv-streifen li { width: clamp(260px, 28vw, 420px); aspect-ratio: 4 / 3; margin: 0 9px; border-radius: 4px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(150deg, #4a1450, #250026); color: var(--weiss); }
.fv-streifen li:nth-child(even) { background: linear-gradient(150deg, var(--pink), #8f0f4a); }
.fv-streifen li span { font: 500 12px/1 var(--mono); letter-spacing: .12em; color: var(--ice); }
.fv-streifen li b { font: 700 clamp(24px, 2.2vw, 36px)/1.02 var(--display); text-transform: uppercase; letter-spacing: -.02em; }

/* ---------- KI-Consulting: Chat ---------- */
.ki-chat {
  position: relative; border-radius: 28px; padding: clamp(22px, 3vw, 36px); min-height: 440px; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px;
  background-color: var(--nacht); color: var(--ice);
  background-image: linear-gradient(rgba(197,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(197,255,255,.08) 1px, transparent 1px);
  background-size: 40px 40px; box-shadow: 0 30px 70px rgba(37,0,38,.22);
}
.ki-chat-kopf { position: absolute; left: 24px; right: 24px; top: 20px; display: flex; justify-content: space-between; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dunkel-grau); }
.ki-chat-kopf b { color: #1fd39a; font-weight: 500; }
.ki-msg { max-width: 82%; padding: 14px 18px; border-radius: 20px; font-size: 16px; line-height: 1.45; }
.ki-msg--du { align-self: flex-end; background: var(--pink); color: var(--weiss); border-bottom-right-radius: 6px; }
.ki-msg--ki { align-self: flex-start; background: rgba(197,255,255,.12); color: var(--ice); font-family: var(--mono); font-size: 14px; border-bottom-left-radius: 6px; }
.ki-msg--wir { align-self: flex-start; background: var(--weiss); color: var(--tinte); border-bottom-left-radius: 6px; font: 400 italic 19px/1.35 var(--serif); }
.ki-msg small { display: block; margin-bottom: 4px; font: 500 10px/1 var(--mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; opacity: .65; }
.ki-tippt { align-self: flex-start; display: flex; gap: 5px; padding: 14px 18px; border-radius: 20px; background: rgba(197,255,255,.12); }
.ki-tippt i { width: 7px; height: 7px; border-radius: 50%; background: var(--ice); animation: tippen 1s infinite; }
.ki-tippt i:nth-child(2) { animation-delay: .15s; }
.ki-tippt i:nth-child(3) { animation-delay: .3s; }
@keyframes tippen { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.chat-an .ki-msg, .chat-an .ki-tippt { display: none; }
.chat-an .ki-msg.da, .chat-an .ki-tippt.da { display: block; animation: rein .5s cubic-bezier(.2,.8,.2,1); }
.chat-an .ki-tippt.da { display: flex; }
@keyframes rein { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.ruhig .ki-tippt { display: none; }

.ki-ablauf { position: relative; margin-top: 8px; padding-left: 64px; }
.ki-ablauf::before { content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 2px; background: var(--blass); }
.ki-ablauf-linie { position: absolute; left: 21px; top: 8px; width: 2px; height: calc(100% - 16px); background: var(--pink); transform-origin: 50% 0; }
.ki-ablauf li { position: relative; padding: 0 0 44px; }
.ki-ablauf li:last-child { padding-bottom: 0; }
.ki-ablauf li::before { content: ""; position: absolute; left: -52px; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--weiss); border: 2px solid var(--pink); }
.ki-ablauf .us-etikett { margin-bottom: 10px; background: var(--ice); color: var(--tinte); }
.ki-ablauf h3 { font: 700 clamp(26px, 2.4vw, 40px)/1 var(--display); text-transform: uppercase; letter-spacing: -.02em; margin-bottom: 8px; }
.ki-ablauf p { color: var(--tinte-2); font-size: 18px; line-height: 1.55; max-width: 34em; }

/* ---------- Über uns: Steckbrief (Szenen in css/ueber-uns.css) ---------- */
.uu-fakten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.uu-fakten div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-top: 1px solid var(--blass); }
.uu-fakten dt { font: 500 11px/1.9 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--grau); }
.uu-fakten dd { margin: 0; font-size: 17px; overflow-wrap: break-word; }

/* ---------- Handgemacht oder KI-gestützt: Vergleich ---------- */
.hk-tabelle { margin-top: clamp(40px, 7vh, 72px); border-radius: 28px; overflow: hidden; }
.hk-zeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .7fr) minmax(0, 1fr); }
.hk-zeile > * { padding: clamp(20px, 2.6vw, 36px); }
.hk-hand { background: var(--blau, var(--tuerkis2)); color: var(--tinte); text-align: right; font: 400 italic clamp(18px, 1.6vw, 24px)/1.35 var(--serif); }
.hk-mitte { background: var(--weiss); display: grid; place-items: center; text-align: center; font: 700 clamp(20px, 2vw, 30px)/1 var(--display); text-transform: uppercase; letter-spacing: -.02em; border-inline: 2px solid var(--pink); }
.hk-ki {
  background-color: var(--nacht); color: var(--ice); font: 400 clamp(14px, 1.15vw, 17px)/1.55 var(--mono);
  background-image: linear-gradient(rgba(197,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(197,255,255,.08) 1px, transparent 1px); background-size: 40px 40px;
}
.hk-mitte a { text-decoration: none; background: linear-gradient(var(--pink), var(--pink)) 0 100% / 100% 3px no-repeat; padding-bottom: 4px; transition: color .25s; }
.hk-mitte a:hover { color: var(--pink); }
.hk-kopfzeile .hk-hand { font: 400 italic clamp(34px, 4vw, 70px)/1 var(--serif); font-weight: 300; }
.hk-kopfzeile .hk-ki { font: 500 clamp(30px, 3.4vw, 60px)/1 var(--mono); letter-spacing: -.06em; }
.hk-kopfzeile .hk-mitte { font: 500 12px/1.3 var(--mono); letter-spacing: .12em; color: var(--grau); }
.hk-zeile + .hk-zeile > * { border-top: 1px solid rgba(37,0,38,.12); }
.hk-zeile + .hk-zeile > .hk-ki { border-top-color: rgba(197,255,255,.14); }
.hk-wort-ki { font-family: var(--mono); font-weight: 500; letter-spacing: -.06em; }
.hk-wort-hand { font-family: var(--serif); font-style: italic; font-weight: 300; text-transform: none; }

@media (max-width: 900px) {
  .wd-check-raster { grid-template-columns: 1fr; }
  /* Handy: Text steht oben im Fluss, die Szene bekommt darunter eigenen Platz */
  /* Boden 64 px höher als früher: die Daumen-Pille lag sonst auf Fass und Füßen (21.10.2026) */
  .gd-buehne { height: auto; padding-bottom: calc(min(108vw, 76svh) + 64px); }
  .gd-text { position: relative; left: auto; top: auto; max-width: none; padding: calc(var(--kopf-h) + 4vh) var(--rand) 0; }
  .gd-boden { height: calc(6vh + 64px); }
  .gd-flutkante { height: calc(6vh + 65px); }
  /* Ganz im Bild: rechts der Schwanz beim Hinunterbeugen, links das ausgelaufene Fass */
  .gd-vogel { width: min(88vw, 72svh); right: 1vw; bottom: calc(6vh + 64px - min(88vw, 72svh) * 1600 / 1650 * .031); }
  .gd-bogen { grid-template-columns: 1fr 1fr; }
  .gd-feld--logo, .gd-feld--farben, .gd-feld--schrift, .gd-feld--vorlagen, .gd-feld--guide { grid-column: span 2; grid-row: auto; }
  .gd-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 0; }
  .gd-schritte h3 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }   /* „Reinzeichnung“ auf kleinen Handys */
  .fv-sucher { margin: 0; max-height: none; }
  .uu-fakten { grid-template-columns: 1fr; }
  /* Zwei gleich breite Spalten: die Grenze Handwerk | KI bleibt in der Mitte, kein Text ragt hinaus */
  .hk-zeile { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hk-zeile > * { padding: 16px 14px; }
  .hk-mitte { grid-column: 1 / -1; grid-row: 1; border-inline: 0; border-bottom: 2px solid var(--pink); padding: 14px !important; }
  .hk-hand { text-align: left; font-size: 16px; }
  .hk-ki { font-size: 12.5px; line-height: 1.5; background-size: 28px 28px; }
  .hk-hand, .hk-ki { overflow-wrap: anywhere; }
  .hk-ki { hyphens: auto; -webkit-hyphens: auto; }   /* lange Mono-Wörter wie „Produktbeschreibungen“ trennen */
  .hk-kopfzeile .hk-hand { font-size: clamp(20px, 6.4vw, 30px); }
  .hk-kopfzeile .hk-ki { font-size: clamp(16px, 5vw, 24px); }
}

/* Grafik 02 · Grau wird rosa (Baustein aus _bausteine/flamingo-grau-zu-rosa.html). --anteil: 1 grau, 0 rosa;
   ohne JS und im Editor steht er rosa. Er füllt die Weißfläche unter der Überschrift. */
.gd-faerben { --anteil: 0; display: flex; flex-direction: column; align-items: center; margin-top: clamp(24px, 4vh, 48px); }
.gd-faerben-vogel { width: min(100%, 52vh, 460px); height: auto; filter: grayscale(var(--anteil)) brightness(calc(1 + var(--anteil) * .08)); }
.gd-skala { display: flex; align-items: center; gap: 12px; margin-top: 8px; font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--grau); }
.gd-skala i { position: relative; width: min(40vw, 260px); height: 10px; border-radius: 999px; background: linear-gradient(90deg, #b5adb5, #ffb3cf 60%, var(--pink)); }
.gd-skala b { position: absolute; top: 50%; left: calc((1 - var(--anteil)) * 100%); width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: var(--weiss); border: 3px solid var(--tinte); }
/* Regler zum Klicken und Ziehen (20.10.2026, js/unterseiten.js); größere Trefferfläche, senkrecht scrollen bleibt möglich */
.gd-skala i[role="slider"] { cursor: pointer; touch-action: pan-y; }
.gd-skala i[role="slider"]::before { content: ""; position: absolute; inset: -16px -12px; }
.gd-skala i[role="slider"] b { cursor: grab; transition: transform .2s; }
.gd-skala i.zieht b { cursor: grabbing; transform: scale(1.18); }
.gd-skala i[role="slider"]:hover b { transform: scale(1.12); }
.gd-skala i[role="slider"]:focus-visible { outline: 2px solid var(--pink); outline-offset: 6px; }
/* ---------- Handgemacht oder KI: Hinweis aufs KI-Manifest vor „Lass uns reden“ (Ziel: ueber-uns.html#ki-manifest).
   Liegt wie Fragen und Kontakt über dem Monitor-Rahmen (css/monitor.css, .mo-voll: z-index 31). ---------- */
.us main > section.hk-manifest { position: relative; z-index: 31; padding: clamp(64px, 11vh, 120px) 0; background: var(--tinte); color: var(--weiss); }
.hk-manifest-innen { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 28px clamp(32px, 5vw, 96px); }
.hk-manifest .kicker { grid-column: 1 / -1; color: var(--dunkel-grau); }
.hk-manifest-satz { max-width: 18ch; font: 700 clamp(32px, 3.8vw, 68px)/.96 var(--display); letter-spacing: -.03em; text-transform: uppercase; }
.hk-manifest-satz em { font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -.02em; font-variation-settings: "opsz" 144; color: var(--pink); }
.us .hk-manifest-knopf { padding: 1.05em 2em; font-size: clamp(18px, 1.5vw, 24px); background: var(--pink); border-color: var(--pink); color: var(--weiss); white-space: nowrap; }
.us .hk-manifest-knopf:hover, .us .hk-manifest-knopf:focus-visible { background: var(--weiss); border-color: var(--weiss); color: var(--tinte); }

/* Handgemacht oder KI, „Auf einen Blick“ (seit 19.10.2026): echte Tabelle, Farben wie der Vergleich oben
   (Handwerk Blau, KI Berry-Raster, pinke Naht). Liegt wie Fragen und Manifest über dem Monitor-Rahmen. */
/* Unten Luft bis zum dunklen Manifest-Band (19.10.2026). Die Rundung sitzt an den Eckzellen statt an der Tabelle:
   overflow: hidden an der Tabelle schnitt die Bildunterschrift darunter ab. */
.us main > section.hk-blick { position: relative; z-index: 31; padding: clamp(80px, 14vh, 160px) 0 clamp(96px, 16vh, 180px); background: var(--papier); }
.hk-blick-tabelle { width: 100%; margin-top: clamp(40px, 7vh, 72px); border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.hk-blick-tabelle thead .hk-blick-hand { border-top-left-radius: 28px; }
.hk-blick-tabelle thead .hk-blick-ki { border-top-right-radius: 28px; }
.hk-blick-tabelle tbody tr:last-child > .hk-blick-hand { border-bottom-left-radius: 28px; }
.hk-blick-tabelle tbody tr:last-child > .hk-blick-ki { border-bottom-right-radius: 28px; }
.hk-blick-caption { caption-side: bottom; padding-top: 18px; text-align: left; font: 500 11px/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--grau); }
.hk-blick-tabelle :is(th, td) { padding: clamp(16px, 2vw, 28px) clamp(18px, 2.2vw, 32px); text-align: left; vertical-align: top; }
.hk-blick-tabelle thead td { background: var(--weiss); width: 22%; }
.hk-blick-merkmal { background: var(--weiss); font: 700 clamp(18px, 1.7vw, 26px)/1.05 var(--display); text-transform: uppercase; letter-spacing: -.02em; border-right: 2px solid var(--pink); }
.hk-blick-hand { background: var(--blau, var(--tuerkis2)); color: var(--tinte); font: 400 italic clamp(17px, 1.4vw, 22px)/1.4 var(--serif); border-right: 2px solid var(--pink); }
.hk-blick-ki {
  background-color: var(--nacht); color: var(--ice); font: 400 clamp(13px, 1.05vw, 16px)/1.55 var(--mono);
  background-image: linear-gradient(rgba(197,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(197,255,255,.08) 1px, transparent 1px); background-size: 40px 40px;
}
.hk-blick-tabelle thead .hk-blick-hand { font: 400 italic clamp(28px, 3vw, 52px)/1 var(--serif); font-weight: 300; }
.hk-blick-tabelle thead .hk-blick-ki { font: 500 clamp(24px, 2.6vw, 44px)/1 var(--mono); letter-spacing: -.06em; }
.hk-blick-tabelle tbody tr > * { border-top: 1px solid rgba(37,0,38,.12); }
.hk-blick-tabelle tbody tr > .hk-blick-ki { border-top-color: rgba(197,255,255,.14); }
@media (max-width: 900px) {
  /* Am Handy: Merkmal als Zeile über zwei gleich breiten Spalten */
  /* Als Spalte gestapelt, damit die Bildunterschrift wie am Desktop unter der Tabelle steht (order) */
  .hk-blick-tabelle { display: flex; flex-direction: column; }
  .hk-blick-tabelle :is(thead, tbody) { display: block; }
  .hk-blick-caption { order: 3; }
  .hk-blick-tabelle tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hk-blick-tabelle thead td { display: none; }
  .hk-blick-merkmal { grid-column: 1 / -1; border-right: 0; border-bottom: 2px solid var(--pink); }
  .hk-blick-tabelle :is(th, td) { padding: 14px; overflow-wrap: anywhere; }
  .hk-blick-hand { font-size: 16px; }
  .hk-blick-ki { font-size: 12.5px; hyphens: auto; -webkit-hyphens: auto; background-size: 28px 28px; }
  .hk-blick-caption { display: block; }
}
@media (max-width: 900px) {
  .hk-manifest-innen { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .us .hk-manifest-knopf { justify-self: start; }
}

/* ---------- Leistungsfarbe als eigene Fläche auch bei 02 Copywriting und 04 Foto & Video (20.10.2026),
   wie das Gelb bei „3 Sekunden“ (Webdesign) und die Farbflut bei Grafik. ---------- */
/* Copywriting, Berry: „Was ist Copywriting?“ liest sich beim Scrollen Wort für Wort hell (js/unterseiten.js) */
.us section.cw-lesen { background: var(--berry); color: var(--papier); min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
.cw-lesen > .rahmen { width: 100%; }
.cw-lesen .kicker { color: var(--dunkel-grau); }
.us main section.cw-lesen .kicker b { color: var(--pink-auf-dunkel); }
.cw-lesen .us-h2 { color: var(--papier); }
.cw-lesen .us-fliess p { color: var(--dunkel-text); }
.us .cw-lesen .us-merksatz { color: var(--papier) !important; border-left-color: var(--pink); }
.cw-lesen .lw { opacity: .18; transition: opacity .3s; }   /* Wörter, zur Laufzeit eingepackt */
.cw-lesen .lw.an { opacity: 1; }

/* Foto & Video, Türkis: „Warum echte Fotos?“ im Sucher. Die Ecken ziehen sich zusammen und der Inhalt wird scharf
   (--zu von 0 bis 1, js/unterseiten.js), dann blitzt es einmal. Ohne Animation steht alles scharf. */
.us section.fv-blitz { background: var(--tuerkis2); color: var(--tinte); overflow: hidden; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
.fv-blitz > .rahmen { position: relative; width: 100%; }
.fv-blitz .kicker { color: var(--tinte); opacity: .75; }
.us main section.fv-blitz .kicker b { color: var(--tinte); }
.fv-blitz .us-fliess p { color: var(--tinte); }
.us .fv-blitz .us-merksatz { border-left-color: var(--tinte); }
.fv-blitz .us-zwei { filter: blur(calc((1 - var(--zu, 1)) * 7px)); }
.fv-blitz > .rahmen::before {
  --l: clamp(26px, 3vw, 46px); --d: 3px; --f: var(--tinte); --w: calc((1 - var(--zu, 1)) * 5vw);
  content: ""; position: absolute; pointer-events: none; opacity: calc(.3 + .7 * var(--zu, 1));
  top: calc(-1 * clamp(36px, 6vh, 70px) - var(--w)); bottom: calc(-1 * clamp(36px, 6vh, 70px) - var(--w));
  left: calc(var(--rand) / 2 - var(--w)); right: calc(var(--rand) / 2 - var(--w));
  background:
    linear-gradient(var(--f), var(--f)) left top / var(--l) var(--d), linear-gradient(var(--f), var(--f)) left top / var(--d) var(--l),
    linear-gradient(var(--f), var(--f)) right top / var(--l) var(--d), linear-gradient(var(--f), var(--f)) right top / var(--d) var(--l),
    linear-gradient(var(--f), var(--f)) left bottom / var(--l) var(--d), linear-gradient(var(--f), var(--f)) left bottom / var(--d) var(--l),
    linear-gradient(var(--f), var(--f)) right bottom / var(--l) var(--d), linear-gradient(var(--f), var(--f)) right bottom / var(--d) var(--l);
  background-repeat: no-repeat;
}
.fv-blitz::after { content: ""; position: absolute; inset: 0; z-index: 3; background: #fff; opacity: var(--blitz, 0); pointer-events: none; }
/* Danach wieder normaler Abstand oben (sonst klebt der nächste Abschnitt an der Farbfläche) */
:is(.cw-lesen, .fv-blitz) + .us-abschnitt { padding-top: clamp(80px, 14vh, 160px); }

/* ---------- Grafik: Sprachumschalter in Pink mit weißem Knopf, beim Drüberfahren unser Ei (20.10.2026) ----------
   Nur auf der Grafik-Seite (body.us--grafik, deutsch und englisch). Das Ei kommt aus der Ei-Strecke auf „Über uns“
   (img/ueber-uns/ei.webp), es sitzt an der Stelle des Knopfs, wandert beim Wechsel mit und wackelt leicht. */
.us--grafik .sprache { background: var(--pink); border-color: var(--weiss); }   /* weißer Rahmen: bleibt auch über der pinken Farbflut sichtbar */
.us--grafik .sprache::before { background: var(--weiss); }
.us--grafik .sprache span { color: var(--weiss); text-shadow: none; }
.us--grafik .sprache:not(.sprache--en):not(.wechselt) span:first-of-type, .us--grafik .sprache--en:not(.wechselt) span:last-of-type,
.us--grafik .sprache.wechselt:not(.sprache--en) span:last-of-type, .us--grafik .sprache--en.wechselt span:first-of-type { color: var(--pink); }
.us--grafik .kopf .sprache i { left: 3px; top: -5px; width: calc(50% - 3px); height: calc(100% + 4px);
  background: url(../img/ueber-uns/ei.webp) no-repeat 50% 50% / auto 100%; transform-origin: 50% 90%; }
.us--grafik .sprache i::before { display: none; }
/* Unter dem Ei (auf dem inaktiven Kürzel) steht das Kürzel pink */
.us--grafik .sprache:is(:hover, :focus-visible):not(.sprache--en):not(.wechselt) span:last-of-type,
.us--grafik .sprache--en:is(:hover, :focus-visible):not(.wechselt) span:first-of-type { color: var(--pink); text-shadow: none; }
.us--grafik .sprache:hover i, .us--grafik .sprache:focus-visible i { animation: sprache-ei 1.1s ease-in-out infinite; }
@keyframes sprache-ei { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
@media (prefers-reduced-motion: reduce) { .us--grafik .sprache i { animation: none !important; } }

/* ---------- Aufräumen 21.10.2026: kleine Laptops und gepinnte Abschnitte ---------- */
/* Fakten auf Über uns: bei 1024 px lief „Deutsch, Englisch“ in die Nachbarspalte */
@media (max-width: 1200px) { .uu-fakten div { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; } }
/* Kleine Laptops (901–1200 px): Fass und Flamingo bei Grafik lagen über der Preiskarte */
@media (min-width: 901px) and (max-width: 1200px) {
  .gd-vogel { width: min(90vh, 46vw); bottom: calc(9vh - min(90vh, 46vw) * 1600 / 1650 * .031); }
}
/* Niedrige Fenster (bis 780 px hoch): oben weniger Luft, sonst schnitt der Pin die dritte Preiskarte bei Webdesign ab */
@media (min-width: 901px) and (max-height: 780px) {
  .us-kopf { padding-top: calc(var(--kopf-h) + 28px); }
  .us-fakten { margin-top: 24px; }
  .us-fakten div { padding: 10px 14px 9px; min-width: 0; }
  .us-fakten dd { font-size: 22px; }
}
/* Copywriting „Was ist Copywriting?“ ist am Desktop gepinnt: die linke Spalte darf darin nicht kleben,
   sonst sprang die Überschrift beim Loslassen des Pins um rund 265 px nach unten */
@media (min-width: 901px) { .cw-lesen .us-zwei > :first-child { position: static; top: auto; } }
/* Handy: die kleine Stoppuhr weicht der Kopfzeile, sobald die beim Hochscrollen zurückkommt */
html:not(.kopf-weg) .wd-uhr-folgt.sichtbar { opacity: 0; transform: translate(-50%, -140%); }

/* ---------- Grafik · Wandfolierung und Raumgestaltung (23.10.2026) ----------
   Text links/rechts wie die anderen Abschnitte, darunter zwei Visualisierungen nebeneinander (Handy untereinander) */
.gd-wand-liste { list-style: none; padding: 0; }
.gd-wand-liste li { position: relative; padding-left: 1.4em; }
.gd-wand-liste li + li { margin-top: .5em; }
.gd-wand-liste li::before { content: ""; position: absolute; left: 0; top: .62em; width: .55em; height: .55em; border-radius: 50%; background: var(--leistung, var(--pink)); }
.gd-wand-liste :is(b, strong) { color: var(--tinte); font-weight: 500; }
.gd-wand-bilder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); margin-top: clamp(40px, 7vh, 80px); }
.gd-wand-bild { margin: 0; min-width: 0; }
.gd-wand-bild .bild-innen { display: block; height: auto; aspect-ratio: 3 / 2;   /* height: css/seite.css .bild-innen hat 100 % */
  overflow: hidden; border-radius: 18px; background: var(--blass); }
.gd-wand-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gd-wand-bild figcaption { margin-top: 12px; font: 500 12px/1.4 var(--mono); letter-spacing: .06em; color: var(--grau); }
.gd-wand-hinweis { grid-column: 1 / -1; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--grau); }
@media (max-width: 700px) { .gd-wand-bilder { grid-template-columns: minmax(0, 1fr); } }
/* Die Farbnasen aus „Logo mit KI“ tropfen bis hierher: etwas mehr Luft, damit Nummer und Kicker frei bleiben */
.gd-flut + .gd-wand { padding-top: calc(clamp(80px, 14vh, 160px) + 70px); }