/* keytos.de/neu/angebote · nur diese Seite (Jonas, 15./16.10.2026).
   Aufbau: Kopf wie die anderen Kategorien, dann je Angebot ein großes Widget (Abbildung → Tafel → Punkte → Anfrage-Knopf).
   Farben und Schrift aus dem Theme squarespace (Inter 300/400/500, Weiß/Schwarz/Grau) plus je Angebot ein heller Pastellton
   wie auf /neu/team und /neu/automatisierung. Keine Schatten, keine Linien, keine Überzeilen.
   Randlos (Jonas, 16.10.2026: „nicht nur ein Widget, sondern den ganzen Bildschirm“): die Angebote reichen bis an die Fensterkanten,
   ohne weißen Rand, Fugen und Rundung; die Notch schwebt darüber. */

/* Playfair Display nur für die kleine Café-Seite auf dem iPad (.ipad .mini__titel): genau die zwei Schnitte, die sie braucht, wörtlich
   aus /fonts/fonts.css (latin) – statt der ganzen Datei mit 112 @font-face, die render-blockierend lud (25.10.2026). Der Titel ist
   normal 400; <b>Geschichte</b> ist 700 kursiv, fonts.css hat kursiv nur 400 und 600 → der Browser nimmt den 600er (dieselbe
   variable Datei), darum lädt auch die Kursiv-Datei. */
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/files/playfairdisplay-v40-nuFiD-vYSZviVYUb-rj3ij-anPXDTzYgEM86xQ-woff2.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 600; font-display: swap; src: url(/fonts/files/playfairdisplay-v40-nuFkD-vYSZviVYUb-rj3ij-anPXDTnogkk7yRZrPA-woff2.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

.angebote {
  --rand: var(--grid-gutter-width);
  --weiss: #fff;
  --hell: #f2f2f2;
  --mittel: var(--color-gray-200);   /* #ddd */
  --dunkel: var(--panel-dark-2);     /* #2f2f2f */
  padding: 0 var(--rand);
  overflow-x: clip;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.angebote :is(h1, h2, h3, p, ul, dl, dd) { margin: 0; }
.t-body { font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.angebote b, .angebote strong { font-weight: var(--weight-bold); }

/* ── 1 · Einstieg: Kopf + Scroll-Vorstellung (Vorbild keytos.de/#leistungen) ──── */
/* Kopf wie /neu/team und /neu/automatisierung: weiß, bildschirmfüllend, Titel (zweiter Satz grau), darunter vier Zahlen
   über die ganze Breite. Maße 1:1 von dort (Titel 9,6vw → ab 744 px 8,2vw, höchstens 128 px). */
.ang-kopf { display: flex; flex-direction: column; justify-content: center; gap: 48px; min-height: 100vh; min-height: 100lvh; padding: calc(62px + 32px) 0 48px; } /* taste-skill-ignore: 100vh nur Rückfall für Browser ohne lvh */
.ang-kopf__titel { font-weight: var(--weight-light); font-size: clamp(30px, 9.6vw, 128px); line-height: 1.04; letter-spacing: -.05em; }
.ang-kopf__leise { color: var(--color-gray-500); } /* große Schrift: 3,5:1 reicht ab 24 px (WCAG AA groß), wie auf /neu/team */
.ang-zeile { display: block; overflow: hidden; padding: .02em 0 .1em; margin-bottom: -.1em; }
.ang-zeile > span { display: block; text-wrap: balance; } /* kein einzelnes Wort allein in der letzten Zeile */
.ang-zahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; margin: 0; } /* Handy: 2 × 2 */
.ang-zahlen > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; } /* Zahlen oben auf einer Linie */
.ang-zahlen dd { margin: 0; font-weight: var(--weight-light); font-size: clamp(44px, 5.6vw, 88px); letter-spacing: -.05em; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ang-zahlen dd small { font-size: .3em; font-weight: var(--weight-regular); letter-spacing: 0; }
.ang-zahlen dt { font-size: 17px; color: var(--color-gray-800); }
@media (min-width: 744px) { .ang-kopf__titel { font-size: clamp(60px, 8.2vw, 128px); } .ang-zahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--grid-gutter-width); } }
@media (min-width: 1020px) {
  .ang-kopf { gap: 80px; padding-bottom: 64px; }
}
/* Auftritt beim Laden wie /neu/automatisierung: Zeilen steigen aus ihrer Maske, die Zahlen steigen gleich mit. Ohne Skript sofort sichtbar.
   Zahlen (25.10.2026, mobil schneller): sie sind das größte Element im ersten Bild (LCP) – ihr Auftritt startet sofort statt nach
   630 ms und beginnt bei 1 % statt 0 % Deckkraft (fürs Auge gleich); ganz durchsichtig zählt der Browser sie erst später als gemalt. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-zeile] { transform: translateY(105%); animation: ang-hoch 1s var(--ease-quart-out) forwards; animation-delay: calc(var(--i, 0) * 110ms + 150ms); }
  .js [data-steig] { opacity: .01; transform: translateY(18px); animation: ang-steig .8s var(--ease-quart-out) forwards; }
  @keyframes ang-hoch { to { transform: none; } }
  @keyframes ang-steig { to { opacity: 1; transform: none; } }
}

/* Vorstellung: je Angebot ein großes Widget. Ohne Skript/auf kleinen Bildschirmen: Abbildung oben, Tafel mit allen Punkten
   darunter. Mit GSAP (Klasse .ang-buehne, ab 1020 × 720 px): die Stufe ist lang, das Widget bleibt stehen, die Abbildung füllt
   es; die Tafel schiebt sich rechts darüber und die Punkte erscheinen beim Scrollen einzeln (Zeitleiste im Skript). */
.ang-stufen { display: grid; margin: 0 calc(var(--rand) * -1); } /* randlos: über den Seitenrand bis an die Fensterkanten, Stufen ohne Fuge */
.ang-widget { position: relative; display: grid; overflow: hidden; background: var(--hell); }
.ang-bild { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--dunkel); }
.ang-bild > * { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: left bottom; } /* Zoom wächst nach rechts oben, der Name bleibt ganz */
.ang-bild img { object-fit: cover; }
/* Farbe je Angebot: helle Pastelltöne in gleicher Helligkeit wie die Gründer-Kreise (/neu/team) und die Angebots-Symbole
   (/neu/automatisierung); Schrift darauf schwarz (über 15:1). Nur einzelne Elemente: Abbildungs-Fläche, Preis, Haken-Kreise. */
.ang-farbe--blau { --farbe: #dbe8ff; }
.ang-farbe--mint { --farbe: #d7f0e3; }
.ang-farbe--rose { --farbe: #fbdde4; }
.ang-farbe--butter { --farbe: #fbefc8; }
.ang-farbe--apricot { --farbe: #fde4d3; }
.ang-farbe--salbei { --farbe: #e3ecd2; }
.ang-tafel { display: flex; flex-direction: column; gap: 28px; padding: 28px 24px 32px; }
.ang-tafel__kopf { display: grid; gap: 12px; }
.ang-tafel__titel { font-weight: var(--weight-light); font-size: clamp(30px, 3vw, 44px); letter-spacing: -.045em; line-height: 1.05; text-wrap: balance; }
.ang-tafel__preis { justify-self: start; padding: 6px 16px 7px; border-radius: 999px; background: var(--farbe, var(--weiss)); font-size: 20px; font-weight: var(--weight-bold); letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.ang-tafel__preis small { font-size: 17px; font-weight: var(--weight-regular); }
.ang-tafel__zusatz { max-width: 38em; font-size: 15px; line-height: 1.45; color: var(--color-gray-800); text-wrap: pretty; } /* weitere Preise/Bedingungen von keytos.de (18.10.2026) */
.ang-punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.ang-punkt { position: relative; display: grid; gap: 4px; } /* ohne Haken (Jonas, 16.10.2026: Pfeil und Haken waren doppelt) – der Pfeil zeigt auf den Titel */
.ang-punkt__titel { font-size: 17px; font-weight: var(--weight-bold); line-height: 1.35; }
.ang-punkt__titel b { font-weight: inherit; }
.ang-punkt__text { font-size: 16px; line-height: 1.45; color: var(--color-gray-800); }
@media (min-width: 744px) {
  .ang-tafel { padding: 32px; }
  .ang-punkte { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; }
}
@media (min-width: 1020px) {
  .ang-widget { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .ang-bild { aspect-ratio: auto; min-height: 560px; }
  .ang-punkte { grid-template-columns: 1fr; }
}

/* Bühne (nur mit Skript): Stufe = Scroll-Strecke, Widget steht und füllt das ganze Fenster. Je Punkt ~38svh, dazu Abbildung, Tafel
   und Pause. lvh = Höhe bei eingeklappter Browserleiste (sonst bliebe unten ein weißer Streifen); was bei ausgeklappter Leiste
   darunter läge, hält das Polster unten frei (100lvh − 100svh, am Mac 0). Oben hält die Tafel Platz für die Notch. */
.ang-buehne .ang-stufe { height: calc((var(--n) + 3) * 38svh); }
.ang-buehne .ang-widget { position: sticky; top: 0; display: block; height: 100vh; height: 100lvh; } /* taste-skill-ignore: 100vh nur Rückfall für Browser ohne lvh */
.ang-buehne .ang-bild { position: absolute; inset: 0; min-height: 0; }
.ang-buehne .ang-tafel { --oben: calc(12px + var(--notch-h) + 24px); position: absolute; top: 0; right: 0; bottom: 0; width: min(44%, 620px); justify-content: center; gap: 32px; padding: var(--oben) 40px calc(40px + 100lvh - 100svh); overflow: hidden; background: var(--hell); }
/* Niedrige Bildschirme (Laptops um 720–860 px Höhe): Tafel breiter und dichter, damit alle Punkte hineinpassen. */
@media (max-height: 860px) {
  .ang-buehne .ang-tafel { width: min(56%, 720px); gap: 16px; padding: var(--oben) 36px calc(24px + 100lvh - 100svh); }
  .ang-buehne .ang-tafel__kopf { gap: 10px; }
  .ang-buehne .ang-tafel__titel { font-size: 32px; }
  .ang-buehne .ang-tafel .t-body { font-size: 15px; line-height: 1.45; }
  .ang-buehne .ang-tafel__zusatz { font-size: 14px; line-height: 1.4; }
  .ang-buehne .ang-punkte { gap: 10px; }
  .ang-buehne .ang-knopf { min-height: 48px; padding-left: 24px; } .ang-buehne .ang-knopf__kreis { width: 34px; height: 34px; } /* wie .kz-szene */
  .ang-buehne .ang-punkt__text { font-size: 15px; line-height: 1.4; }
}

/* Anfrage-Knopf je Angebot – 1:1 wie „Projekt anfragen“ auf /neu/konzept (.kz-knopf): schwarze Pille, rechts ein weißer Kreis mit
   Pfeil (der zweite Pfeil fliegt beim Zeigen herein); Bewegung im Skript (index.php), Federn beim Drücken aus _fuss.php */
.ang-knopf { display: inline-flex; justify-self: start; align-self: flex-start; align-items: center; gap: 18px; min-height: 56px; padding: 0 9px 0 28px; border-radius: var(--radius-button); background: var(--primitive-black); color: var(--primitive-white); font: var(--weight-bold) 17px/1 var(--font-sans); text-decoration: none; transition: background-color .18s ease, transform 140ms var(--ease-quart-out); }
.ang-knopf__kreis { position: relative; display: grid; place-items: center; flex: none; width: 38px; height: 38px; overflow: hidden; border-radius: 50%; background: var(--primitive-white); color: var(--primitive-black); } /* Pfeil-Knopf im Knopf */
.pfeil-zeichen { grid-area: 1 / 1; font-size: 17px; line-height: 1; }
.pfeil-zeichen--neu { visibility: hidden; } /* zweiter Pfeil nur mit Skript (fliegt beim Zeigen herein) */
.js .pfeil-zeichen--neu { visibility: visible; }
@media (prefers-reduced-motion: reduce) { .js .pfeil-zeichen--neu { visibility: hidden; } }
@media (hover: hover) { .ang-knopf:hover { background: var(--color-gray-800); } }
@media (prefers-reduced-motion: no-preference) { .ang-knopf:active { transform: scale(.97); } }
@media (max-width: 599.98px) { .ang-knopf { align-self: stretch; justify-content: space-between; display: flex; } }


/* ── Geräte (Jonas, 16.10.2026): iPad je Angebot, iPhone bei Social Media ──────────────────────────────────────────────
   iPad und iPhone als CSS-Rahmen wie auf /neu/konzept (.kz-ipad / .kz-iphone) – gestochen scharf in jeder Größe und Drehung.
   Größen im Gerät in cqi (= Gerätebreite).
   Ruhig (ohne Skript, Handy, Tablet): je Angebot ein Gerät. Bühne (.ang-buehne): EIN Gerät in .geraet-buehne, das stehen bleibt,
   während die Angebote darunter durchziehen (Zeitleiste im Skript). „.ipad …“/„.handy …“ vor Absätzen/Listen, damit die
   Rücksetzung .angebote :is(p, ul) { margin: 0 } nicht gewinnt. */
.ang-bild { background: var(--farbe); }
.ang-bild--ipad, .ang-bild--handy { aspect-ratio: auto; }
.ang-bild > .ipad-feld, .ang-bild > .handy-feld { position: relative; inset: auto; height: auto; }
.ipad-feld { display: flex; justify-content: center; padding: 32px 16px; }

/* iPad hochkant, Maße wie .kz-ipad auf /neu/konzept: außen 1 : 1,398, Rand 4,86 % der kurzen Seite, Ecken 8,8 %, Bildschirm-Ecken
   4,2 %; Kamera oben mittig, Ein/Aus oben rechts, Lautstärke rechts oben (wie auf Jonas' Bild). --w = Breite des Geräts. */
.ipad { --w: min(76vw, 380px); --rand: calc(var(--w) * .0486);
  position: relative; width: var(--w); height: calc(var(--w) * 1.398); border-radius: calc(var(--w) * .088); container-type: inline-size;
  background: #0d0d0f; box-shadow: inset 0 0 0 1.5px #3a3a3e, inset 0 0 0 3px #0d0d0f, 0 30px 50px -30px rgba(0,0,0,.45); } /* taste-skill-ignore: Gerät wie .kz-ipad (Lichtkante + Geräteschatten) */
.ipad::before { content: ""; position: absolute; top: calc(var(--rand) / 2 - 3px); left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #26262a; } /* Kamera */
.ipad__tasten { position: absolute; inset: 0; pointer-events: none; }
.ipad__tasten::before { content: ""; position: absolute; top: -3px; right: 8.3%; width: 7.2%; height: 4px; border-radius: 2px 2px 0 0; background: #2a2a2e; } /* Ein/Aus */
.ipad__tasten::after { content: ""; position: absolute; right: -3px; top: 7.6%; width: 4px; height: 3.7%; border-radius: 0 2px 2px 0; background: #2a2a2e; box-shadow: 0 calc(var(--w) * 1.398 * .048) 0 #2a2a2e; } /* Lautstärke; taste-skill-ignore: der Schatten ist die zweite Taste */
.ipad__bildschirm { position: absolute; inset: var(--rand); overflow: hidden; border-radius: calc(var(--w) * .042); background: #f5f5f7; }
.schirm { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 3.4cqi; padding: 6.4cqi 6cqi; overflow: hidden; background: #f5f5f7; color: var(--primitive-black); font-family: var(--font-sans); font-size: 3.4cqi; line-height: 1.35; }
.ipad .schirm p, .ipad .schirm ul, .ipad .schirm ol { margin: 0; padding: 0; list-style: none; }
.schirm svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.schirm--seo { --farbe: #d7f0e3; } .schirm--ki { --farbe: #fbefc8; } .schirm--hosting { --farbe: #fde4d3; } .schirm--paket { --farbe: #e3ecd2; }
/* Bildschirm in der Angebotsfarbe (aufgehellt), Karten weiß darauf */
.schirm--seo, .schirm--ki, .schirm--hosting, .schirm--paket { background: color-mix(in srgb, var(--farbe) 45%, #fff); }
.schirm--ki { gap: 2.8cqi; } .schirm--ki .ki__ablaeufe li { padding-block: 2.8cqi; }
/* Haken im Farbkreis (wie die Punkte der Tafel) */
.schirm li > svg { flex: none; box-sizing: content-box; width: 3.4cqi; height: 3.4cqi; padding: 1.4cqi; border-radius: 50%; background: var(--farbe); stroke: var(--primitive-black); }

/* Websites: kleine Café-Seite (Farben/Schrift der Keytos-Demo Café Brühwerk) */
.schirm--website { padding: 0; gap: 0; background: #f5f1ea; color: #1c1814; }
.mini__kopf { position: relative; z-index: 1; display: grid; padding-top: 5.4cqi; background: #f5f1ea; } /* Adresszeile + Navigation über die ganze Breite */
.mini__adresse { display: flex; align-items: center; gap: 1.4cqi; margin: 0 6cqi; padding: 1.2cqi 1.2cqi 1.2cqi 3cqi; border-radius: 99px; background: #ebe4d8; color: #4a423a; font-size: 2.6cqi; }
.mini__adresse > svg { width: 2.8cqi; height: 2.8cqi; }
.mini__adresse span { flex: 1; }
.mini__adresse b, .mini__hinweis { display: flex; align-items: center; gap: 1.2cqi; padding: 1.2cqi 2.6cqi; border-radius: 99px; background: #1c1814; color: #f5f1ea; font-size: 2.6cqi; font-weight: 600; }
.mini__adresse b svg { width: 2.8cqi; height: 2.8cqi; fill: #d4a350; stroke: none; }
.mini__hinweis { justify-self: end; margin: -1cqi 6cqi 2.4cqi; }
.mini__hinweis svg { width: 2.8cqi; height: 2.8cqi; stroke: #d4a350; }
.mini__nav { display: flex; align-items: center; gap: 4cqi; padding: 3cqi 6cqi; font-size: 2.8cqi; color: #6b6259; }
.mini__nav b { margin-right: auto; color: #1c1814; font-size: 3.2cqi; letter-spacing: .22em; font-weight: 600; }
.mini__seite { display: flex; flex-direction: column; gap: 3.2cqi; padding: 4cqi 6cqi; }
.ipad .mini__klein { color: #8a6420; /* Gold der Café-Demo (#b8832a), für die kleine Schrift abgedunkelt: 4,7 : 1 */ font-size: 2.6cqi; letter-spacing: .16em; text-transform: uppercase; }
.ipad .mini__titel { font-family: 'Playfair Display', Georgia, serif; font-size: 10.5cqi; line-height: 1.05; font-weight: 400; }
.mini__titel b { font-weight: 700; font-style: italic; }
.ipad .mini__text { font-size: 3.3cqi; line-height: 1.5; color: #4a423a; }
.mini__knopf { align-self: flex-start; padding: 2.4cqi 4.4cqi; background: #1c1814; color: #f5f1ea; font-size: 2.8cqi; letter-spacing: .12em; text-transform: uppercase; }
.mini__bild { display: block; overflow: hidden; border-radius: 1.2cqi; } /* Zoom bleibt im Bildrahmen */
.mini__bild img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.ipad .mini__fuss { display: flex; justify-content: space-between; font-size: 2.6cqi; color: #6b6259; }

/* SEO: Suche + Karten-Dreierpack, „Ihr Betrieb“ steigt auf Platz 1 */
.such { display: flex; align-items: center; gap: 2.4cqi; padding: 3cqi 4cqi; border-radius: 99px; background: var(--weiss); font-size: 3.8cqi; font-weight: var(--weight-bold); }
.such svg { width: 4.4cqi; height: 4.4cqi; }
.karte-mini { position: relative; flex: none; height: 30cqi; border-radius: 3cqi; background: var(--farbe); overflow: hidden; }
.karte-mini::before, .karte-mini::after { content: ""; position: absolute; background: var(--weiss); } /* zwei Straßen */
.karte-mini::before { left: 0; right: 0; top: 46%; height: 2.4cqi; transform: rotate(-8deg); }
.karte-mini::after { top: 0; bottom: 0; left: 58%; width: 2.4cqi; transform: rotate(12deg); }
.karte-mini__pin { position: absolute; z-index: 1; width: 4.6cqi; height: 4.6cqi; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--color-gray-500); }
.karte-mini__pin--ihr { left: 40%; top: 26%; width: 6cqi; height: 6cqi; background: var(--primitive-black); }
.karte-mini__pin:nth-child(2) { left: 70%; top: 58%; } .karte-mini__pin:nth-child(3) { left: 18%; top: 64%; }
.treffer { display: grid; gap: 2cqi; }
.treffer li { position: relative; box-sizing: border-box; display: flex; align-items: center; gap: 3cqi; height: 15cqi; padding: 2.6cqi 3.6cqi; border-radius: 3cqi; background: var(--weiss); color: var(--color-gray-800); font-size: 3.4cqi; }
.treffer li::before { content: ""; flex: none; width: 6cqi; height: 6cqi; border-radius: 50%; background: #ececef; }
.treffer .treffer__ihr { z-index: 1; display: grid; grid-template-columns: auto 1fr auto; align-content: center; gap: .8cqi 3cqi; color: var(--primitive-black); } /* überholt oben drüber */
.treffer .treffer__ihr::before { grid-row: span 2; background: var(--farbe); }
.treffer__ihr b { font-size: 4cqi; }
.treffer__ihr span { grid-column: 2; font-size: 3cqi; color: var(--color-gray-800); }
.treffer__ihr em { grid-column: 3; grid-row: 1 / 3; padding: 1.2cqi 2.6cqi; border-radius: 99px; background: var(--primitive-black); color: var(--primitive-white); font-size: 2.8cqi; font-style: normal; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; transition: background-color .3s, color .3s; }
.treffer__ihr em.ist-unten { background: var(--color-gray-200); color: var(--primitive-black); } /* Platz 3/2 grau, Platz 1 schwarz */
.treffer li:not(.treffer__ihr)::after { content: "Friseur in der Nähe"; }

/* KI: Dashboard (Beispielwerte von keytos.de) + Abläufe */
.ki__kopf { display: flex; justify-content: space-between; align-items: center; font-size: 4.2cqi; }
.ki__kopf span { padding: 1cqi 2.6cqi; border-radius: 99px; background: var(--color-gray-200); font-size: 2.6cqi; color: var(--color-gray-800); }
.ki__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqi; }
.ipad .schirm .ki__kpis p { display: grid; gap: .6cqi; padding: 2.6cqi 3cqi; border-radius: 3cqi; background: var(--weiss); } /* „.ipad .schirm“ schlägt die p-Rücksetzung */
.ki__kpis b { font-size: 5.8cqi; font-weight: var(--weight-bold); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ki__kpis span { font-size: 2.8cqi; color: var(--color-gray-800); }
.ki__chart { display: grid; gap: 1.6cqi; padding: 3cqi; border-radius: 3cqi; background: var(--weiss); font-size: 2.8cqi; color: var(--color-gray-800); }
.ki__chart svg { width: 100%; height: 16cqi; }
.ki__flaeche { fill: var(--farbe); stroke: none; }
.ki__linie { fill: none; stroke: var(--primitive-black); stroke-width: 5; stroke-dasharray: 1; }
.ki__ablaeufe { display: grid; gap: 1.8cqi; }
.ki__ablaeufe li, .status__liste li, .paket__liste li { display: flex; align-items: center; gap: 2.8cqi; padding: 3.4cqi 3.4cqi; border-radius: 3cqi; background: var(--weiss); font-size: 3.8cqi; }
.ki__ablaeufe span, .status__liste span { margin-left: auto; color: var(--color-gray-800); font-size: 3cqi; }

/* Hosting: Status */
.status__kopf { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2.6cqi; padding: 4cqi; border-radius: 3cqi; background: var(--weiss); font-size: 4.2cqi; }
.status__kopf i { width: 3cqi; height: 3cqi; border-radius: 50%; background: var(--primitive-black); }
.status__kopf span { padding: 1.2cqi 3cqi; border-radius: 99px; background: var(--farbe); font-size: 3cqi; font-weight: var(--weight-bold); }
.status__liste, .paket__liste { display: grid; gap: 2.6cqi; }
.ipad .schirm .status__liste li, .ipad .schirm .paket__liste li { padding-block: 4.6cqi; }
.ipad .schirm .status__satz, .ipad .schirm .paket__satz { margin-top: auto; font-size: 4.8cqi; line-height: 1.35; letter-spacing: -.01em; color: var(--primitive-black); } /* unten auf dem Bildschirm */
.ipad .schirm .ergebnis { display: grid; gap: .8cqi; padding: 3.4cqi; border-radius: 3cqi; background: var(--weiss); font-size: 3.6cqi; }
.ergebnis span { font-size: 2.8cqi; color: var(--color-gray-800); }

/* Komplettpaket: Fortschritt + Haken */
.ipad .paket__titel { font-size: 8.6cqi; font-weight: var(--weight-light); letter-spacing: -.03em; }
.paket__balken { height: 2.4cqi; border-radius: 99px; background: var(--color-gray-200); overflow: hidden; }
.paket__balken i { display: block; height: 100%; border-radius: inherit; background: var(--primitive-black); transform-origin: left center; }

/* iPhone */
.handy-feld { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "mitte mitte" "links rechts"; gap: 44px 12px; padding: 32px 16px 48px; }
.handy-mitte { grid-area: mitte; display: flex; justify-content: center; }
.handy-seite { display: flex; flex-direction: column; gap: 12px; }
.handy-seite--links { grid-area: links; }
.handy-seite--rechts { grid-area: rechts; }
/* iPhone wie .kz-iphone auf /neu/konzept, Maße aus Jonas' Bild gemessen (Gerät 777 × 1633 px): 1 : 2,1, Rand 3,4 %, Ecken 18 %,
   Bildschirm-Ecken 14,2 %; Dynamic Island 31 % × 9 % der Bildschirmbreite, 3,6 % unter der Kante; links Action-Taste (17,5 %) und
   Lautstärke (24,3 % / 33 %), rechts Seitentaste (28,8 %). --w = Breite des Geräts. */
.handy { --w: min(56vw, 236px); --rand: calc(var(--w) * .034);
  position: relative; width: var(--w); height: calc(var(--w) * 2.1); border-radius: calc(var(--w) * .18); container-type: inline-size;
  background: #0b0b0c; box-shadow: inset 0 0 0 1.5px #3c3c3f, inset 0 0 0 3px #0b0b0c, 0 30px 50px -30px rgba(0,0,0,.45); } /* taste-skill-ignore: Gerät wie .kz-iphone (Lichtkante + Geräteschatten) */
.handy::before, .handy__tasten::before, .handy__tasten::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #2a2a2e; }
.handy::before { left: -2px; top: 17.5%; height: 3.4%; } /* Action-Taste */
.handy__tasten { position: absolute; inset: 0; pointer-events: none; }
.handy__tasten::before { left: -2px; top: 24.3%; height: 6.7%; box-shadow: 0 calc(var(--w) * 2.1 * .087) 0 #2a2a2e; } /* Lautstärke; taste-skill-ignore: der Schatten ist die zweite Taste */
.handy__tasten::after { right: -2px; top: 28.8%; height: 10.7%; } /* Seitentaste */
.handy__bildschirm::before { content: ""; position: absolute; z-index: 1; top: 3.4cqi; left: 50%; width: 29cqi; height: 8.6cqi; margin-left: -14.5cqi; border-radius: 99px; background: #000; } /* Dynamic Island */
.handy__bildschirm { position: absolute; inset: var(--rand); z-index: 0; display: flex; overflow: hidden; padding: 15.4cqi 5.2cqi 8.3cqi; border-radius: calc(var(--w) * .142); background: #f5f5f7; color: var(--primitive-black); font-family: var(--font-sans); }
.handy .handy__mitteilungen { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; gap: 2.8cqi; margin: 0; padding: 0; list-style: none; }
.mitteilung { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4cqi; padding: 5cqi 4.7cqi; border-radius: 6.6cqi; background: var(--weiss); }
.mitteilung__symbol { display: grid; place-items: center; width: 13.6cqi; height: 13.6cqi; border-radius: 50%; background: var(--farbe); }
.mitteilung__symbol svg { width: 7.1cqi; height: 7.1cqi; fill: none; stroke: var(--primitive-black); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mitteilung__text { display: grid; gap: .7cqi; min-width: 0; }
.mitteilung__titel { font-size: 4.6cqi; color: var(--color-gray-800); line-height: 1.2; }
.mitteilung__wert { font-size: 8.3cqi; font-weight: var(--weight-bold); letter-spacing: -.02em; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mitteilung__wert small { display: block; font-size: 4.9cqi; font-weight: var(--weight-bold); letter-spacing: 0; line-height: 1.25; white-space: normal; }
.ipad .ipad__hinweis, .handy .handy__hinweis { position: absolute; left: 0; right: 0; top: calc(100% + 10px); margin: 0; text-align: center; font-size: 13px; color: var(--color-gray-800); } /* unter dem iPhone, ohne die Mitte zu verschieben */

/* Karten neben dem iPhone: weiß auf der Angebotsfarbe */
.seitenkarte { display: grid; gap: 10px; width: 100%; max-width: 240px; padding: 16px; border-radius: 16px; background: var(--weiss); color: var(--primitive-black); }
.handy-feld .seitenkarte__titel { margin: 0; font-size: 13px; font-weight: var(--weight-bold); color: var(--color-gray-800); }
.handy-feld .seitenkarte__text { margin: 0; font-size: 15px; line-height: 1.35; }
.seitenkarte__text b { font-weight: var(--weight-bold); }
.kalender { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.kalender i { box-sizing: border-box; aspect-ratio: 1; border-radius: 50%; background: #ececef; }
.kalender i.ist-beitrag { background: var(--farbe); border: 2px solid var(--primitive-black); }
.seitenkarte__knopf { justify-self: start; padding: 7px 14px; border-radius: 99px; background: var(--primitive-black); color: var(--primitive-white); font-size: 13px; font-weight: var(--weight-bold); }
.balken { display: flex; align-items: flex-end; gap: 6px; height: 64px; }
.balken i { flex: 1; height: var(--h); border-radius: 4px 4px 2px 2px; background: var(--farbe); }
.balken i:last-child { background: var(--primitive-black); }
.kreise { display: flex; gap: 6px; }
.kreise i { box-sizing: border-box; flex: 0 1 40px; min-width: 0; aspect-ratio: 1; border-radius: 50%; background: var(--farbe) content-box; border: 2px solid var(--primitive-black); padding: 2px; } /* Story-Ring */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span { padding: 6px 12px; border-radius: 99px; background: #f5f5f7; font-size: 13px; font-weight: var(--weight-bold); }

/* ab Tablet: Geräte nach der Höhe, iPhone mit Karten links/rechts */
@media (min-width: 744px) {
  .ipad-feld { padding: 48px 32px; }
  .ipad { --w: calc(min(620px, 74vh) / 1.398); }
  .handy-feld { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "links mitte rechts"; align-items: center; column-gap: 28px; padding: 48px 32px 64px; }
  .handy-seite { gap: 16px; }
  .handy-seite--links { align-items: flex-end; }
  .handy-seite--rechts { align-items: flex-start; }
  .handy { --w: calc(min(560px, 70vh) * .956 / 2.1); } /* feste Breite für die Mittelspalte; so groß wie vorher das Gerät im Bild */
}

/* ── Bühne: das wandernde Gerät ─────────────────────────────────────────────────────────────────────────────────────────
   .geraet-spur liegt absolut über allen Stufen (nimmt keinen Platz ein), darin klebt .geraet-buehne (sticky, so hoch wie der
   Bildschirm), während die Angebote darunter durchziehen. Kein negativer Rand: bei sticky zählt der Margin-Rahmen – mit
   -100lvh blieb das Gerät stehen, bis die Stufen oben aus dem Bild waren, und der Fuß schob sich darüber. Gleiche Innenabstände wie das
   iPhone-Feld der Social-Media-Stufe – so liegt das iPhone der Bühne genau auf dessen (unsichtbarem) Platzhalter. */
.geraet-spur { display: none; }
.ang-buehne .ang-stufen { position: relative; }
.ang-buehne .geraet-spur { position: absolute; inset: 0; z-index: 2; display: block; pointer-events: none; }
.ang-buehne .geraet-buehne { --frei-h: calc(100svh - 12px - var(--notch-h) - 24px - 32px);
  position: sticky; top: 0; display: flex; align-items: center; justify-content: center; height: 100vh; height: 100lvh;
  padding: calc(12px + var(--notch-h) + 24px) calc(min(44%, 620px) + 32px) calc(32px + 100lvh - 100svh) 40px; pointer-events: none; } /* taste-skill-ignore: 100vh nur Rückfall für Browser ohne lvh */
.ang-buehne .geraet { position: relative; z-index: 1; perspective: 1600px; }
/* Zeiger (wie die Pfeile auf /neu/konzept): roter Zielpunkt mit Hof, dunkle 1,5-px-Linie, Spitze vor dem Haken des Punkts.
   Eigener Name (zeiger), damit nichts mit den Pfeilen der Anfrage-Knöpfe kollidiert. */
.zeiger-ebene { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.zeiger { opacity: 0; }
.zeiger__linie { fill: none; stroke: #1d1d1f; stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.zeiger__hof { fill: rgba(229, 72, 77, .2); }
.zeiger__punkt { fill: #e5484d; stroke: #fff; stroke-width: 2; }
.zeiger__spitze { fill: none; stroke: #1d1d1f; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.ang-buehne .ipad--buehne { --w: calc(var(--frei-h) * .82 / 1.398); box-shadow: inset 0 0 0 1.5px #3a3a3e, inset 0 0 0 3px #0d0d0f, 0 50px 80px -40px rgba(0,0,0,.45); } /* so groß wie vorher das Gerät im Bild; taste-skill-ignore: Geräteschatten wie .kz-szene .kz-ipad */
.ang-buehne .handy--buehne { --w: calc(var(--frei-h) * .76 * .956 / 2.1); position: absolute; inset: 0; margin: auto;
  box-shadow: inset 0 0 0 1.5px #3c3c3f, inset 0 0 0 3px #0b0b0c, 0 50px 80px -40px rgba(0,0,0,.45); } /* taste-skill-ignore: Geräteschatten wie .kz-szene */
.ang-buehne .ipad-feld { display: none; }
.ang-buehne .handy--ruhig { visibility: hidden; } /* Platzhalter: hält den Platz für die Karten frei, sichtbar ist das Bühnen-iPhone */
.ang-buehne .ang-bild--handy > .handy-feld { position: absolute; inset: 0; height: 100%; container-type: inline-size; container-name: feld;
  grid-template-rows: 100%; padding: calc(12px + var(--notch-h) + 24px) calc(min(44%, 620px) + 32px) calc(32px + 100lvh - 100svh) 40px; }
.ang-buehne .handy-mitte { align-items: center; height: 100%; }
.ang-buehne .handy--ruhig { --w: calc((100svh - 12px - var(--notch-h) - 24px - 32px) * .76 * .956 / 2.1); } /* = Bühnen-iPhone */
@media (max-height: 860px) {
  .ang-buehne .ang-bild--handy > .handy-feld, .ang-buehne .geraet-buehne { padding-right: calc(min(56%, 720px) + 24px); padding-left: 24px; }
  .ang-buehne .ang-bild--handy > .handy-feld { column-gap: 20px; }
}
/* zu schmal für Karten neben dem iPhone (niedrige Laptops mit breiter Tafel): nur das iPhone */
@container feld (max-width: 680px) { .handy-seite { display: none; } }