/* Neue Landingpage „Idee 2“ (AUFTRAG-LANDING-IDEE2.md).
   ≥ 760 px: heller Instagram-Feed-Look (design-ideen/idee-2-feed). < 760 px: Story in 4 Teilen als erster Bildschirm
   (design-ideen/idee-2-handy/variante-c). Insta-Verlauf nur als Ring, Licht und Akzent. Schrift überall ≥ 14 px,
   ausgenommen die nachgebaute Instagram-Oberfläche in den Deko-Handys (aria-hidden). */

@font-face { font-family: "Familjen Grotesk"; src: url("/static/fonts/familjen-grotesk.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/static/fonts/figtree.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@property --a { syntax: '<angle>'; inherits: false; initial-value: 200deg; }

:root {
  --flaeche: #f5f5f8; --grund: #f5f5f8; --karte: #fff; --text: #15151b; --text2: #55556a; --text3: #6b6b7c; --linie: #e2e2ea; --linie2: #ececf2;
  --akzent: #c81e5a; --akzent-text: #fff; --akzent-dunkel: #a3134c; --akzent-weich: #fde7ef;
  --aktion: #c81e5a; --aktion-tief: #a3134c;
  --knopf-verlauf: linear-gradient(120deg, #d42a5b, #a8137a);
  --knopf-verlauf-tief: linear-gradient(120deg, #bc1f4f, #8f0f68);
  --dm: #6a3df0;
  --gelb: #feda75; --orange: #fa7e1e; --pink: #d62976; --violett: #962fbf; --blau: #4f5bd5;
  --ring: conic-gradient(from var(--a), var(--gelb), var(--orange), var(--pink), var(--violett), var(--blau), var(--gelb));
  --titel: "Familjen Grotesk", "Hanken Grotesk", system-ui, sans-serif;
  --fliess: "Figtree", "Hanken Grotesk", system-ui, sans-serif;
  --n-kopf: var(--titel); --n-leib: var(--fliess);
  --feder: cubic-bezier(.16, 1, .3, 1);
  --r-karte: 28px; --r-kachel: 18px;
  --schatten: 0 1px 2px rgba(40, 30, 80, .06), 0 18px 40px -18px rgba(60, 40, 120, .22);
  --sicher-unten: env(safe-area-inset-bottom, 0px);
  --fest-hoehe: calc(56px + 24px + var(--sicher-unten));
}
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { background: var(--grund); color: var(--text); font: 17px/1.55 var(--fliess); overflow-x: hidden; }
.n-seite { overflow-x: clip; }
.n-seite ::selection { background: #ffd6e8; color: var(--text); }
.n-seite a { color: inherit; text-underline-offset: 3px; }
.n-seite :focus-visible { outline: 2px solid var(--aktion); outline-offset: 3px; border-radius: 6px; }
.n-seite img { display: block; max-width: 100%; }
.n-seite h1, .n-seite h2, .n-seite h3 { font-family: var(--titel); font-weight: 700; letter-spacing: -.025em; line-height: 1.04; text-wrap: balance; margin: 0; font-stretch: normal; }
.n-seite h2 { font-size: clamp(2rem, 3.6vw, 3.25rem); }
.n-seite h3 { font-size: 1.5rem; letter-spacing: -.015em; }
.n-seite p { text-wrap: pretty; margin: 0; }
.n-seite em.w-hl { font-style: normal; background: var(--knopf-verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.n-nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.n-defs { position: absolute; }

/* Wortmarke mit Ring-Punkt */
.n-wortmarke { font: 700 1.6rem/1 var(--titel); letter-spacing: -.04em; text-decoration: none; display: inline-flex; align-items: center; color: var(--text); }
.n-wortmarke i { width: .5em; height: .5em; border-radius: 50%; background: var(--ring); display: inline-block; margin-left: .08em; transform: translateY(-.32em); }

/* Knöpfe (Magenta-Verlauf, weißer Text ≥ 4,9:1) */
.n-knopf { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 56px; padding: 0 1.6em; background: var(--aktion); background-image: var(--knopf-verlauf); color: #fff !important;
  font: 700 1.06rem/1.15 var(--fliess); border-radius: 14px; text-decoration: none; border: 0; cursor: pointer; text-align: center;
  box-shadow: 0 10px 24px -12px rgba(168, 19, 122, .6); transition: transform .2s var(--feder), background .2s; -webkit-tap-highlight-color: transparent; }
.n-knopf svg { width: 1.15em; height: 1.15em; flex: none; }
.n-knopf:hover { background-image: var(--knopf-verlauf-tief); }
.n-knopf:active { transform: scale(.97); }
.n-knopf.n-klein { min-height: 44px; font-size: .95rem; padding: 0 1.1em; border-radius: 12px; box-shadow: none; }
.n-unterknopf { font-size: .9rem; color: var(--text2); margin-top: .8rem !important; }
.n-lead { color: var(--text2); font-size: 1.1rem; max-width: 34rem; }
.n-lead b, .n-lead strong { color: var(--text); }
.n-karte-weiss { background: var(--karte); border-radius: var(--r-karte); box-shadow: var(--schatten); }
.n-beispiel { display: inline-block; font: 600 14px/1 var(--fliess); color: var(--text2); background: rgba(255, 255, 255, .94); border: 1px solid var(--linie); padding: 6px 10px; border-radius: 99px; }
.n-produktsprache { font-size: .9rem; color: var(--text2); margin-top: .6rem !important; }
.n-empf { display: grid; gap: 2px; max-width: 46ch; margin: 0 0 22px; padding: 12px 16px; border-radius: 14px; border: 1px solid #f3c2d4; background: #fff4f8; font-size: .95rem; }
.n-empf span { color: var(--text2); }
.n-nur-handy { display: none; }

/* Initialen-Kreise der Beispiel-Reaktionen */
.n-ini { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 800 14px/1 var(--fliess); }
.n-ini-1 { background: #c2410c; } .n-ini-2 { background: #7a3df0; } .n-ini-3 { background: #be185d; } .n-ini-4 { background: #4054c8; }

/* ================= Kopf mit Story-Kreisen ================= */
.n-kopf { position: sticky; top: 0; z-index: 50; background: rgba(245, 245, 248, .94); border-bottom: 1px solid transparent; transition: border-color .2s; }
@supports (backdrop-filter: blur(1px)) { .n-kopf { background: rgba(245, 245, 248, .82); backdrop-filter: saturate(1.4) blur(14px); } }
.n-kopf.gescrollt { border-bottom-color: var(--linie); }
.n-kopf-innen { max-width: 1320px; margin: 0 auto; min-height: 96px; padding: 0 40px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.n-kreise { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
.n-kreise a { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; font: 500 14px/1.1 var(--fliess); color: var(--text); width: 70px; text-align: center; }
.n-kreis { --a: 200deg; width: 58px; height: 58px; border-radius: 50%; padding: 2.5px; background: var(--ring); display: block; transition: --a .9s var(--feder); flex: none; }
.n-kreis img { width: 100%; height: 100%; border-radius: 50%; border: 2.5px solid var(--grund); object-fit: cover; }
.n-kreise a:hover .n-kreis, .n-kreise a:focus-visible .n-kreis { --a: 560deg; }
.n-kopf-rechts { justify-self: end; display: flex; gap: 14px; align-items: center; font-weight: 600; font-size: .95rem; }
.n-anmelden { text-decoration: none; color: var(--text2) !important; padding: 10px 4px; }
.n-anmelden:hover { color: var(--text) !important; }
.n-sprache { position: relative; }
.n-sprache summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border-radius: 10px; cursor: pointer; color: var(--text2); font: 600 .95rem/1 var(--fliess); }
.n-sprache summary::-webkit-details-marker { display: none; }
.n-sprache summary svg { width: 18px; height: 18px; }
.n-sprache summary:hover, .n-sprache[open] summary { background: #ebebf1; color: var(--text); }
.n-sprache ul { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; list-style: none; margin: 0; padding: 6px; min-width: 170px; background: #fff; border-radius: 14px; box-shadow: var(--schatten), 0 0 0 1px var(--linie); }
.n-sprache li a { display: block; padding: 10px 12px; border-radius: 9px; text-decoration: none; font-weight: 500; }
.n-sprache li a:hover { background: var(--grund); }
.n-sprache li a[aria-current] { font-weight: 700; color: var(--aktion); }

/* Sprachvorschlag (Browsersprache ≠ Seitensprache) */
.n-vorschlag { position: fixed; left: 50%; bottom: calc(16px + var(--sicher-unten)); transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 24px);
  padding: 10px 10px 10px 18px; background: #15151b; color: #fff; border-radius: 16px; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .5); font-size: 15px; }
.n-vorschlag span { flex: 1 1 auto; min-width: 0; }
@media (max-width: 759px) { .n-vorschlag { left: 12px; right: 12px; transform: none; max-width: none; bottom: auto; top: calc(10px + env(safe-area-inset-top, 0px)); } }
.n-vorschlag a { color: #fff; font-weight: 700; white-space: nowrap; }
.n-vorschlag button { width: 44px; height: 44px; border: 0; background: none; color: #fff; font-size: 22px; cursor: pointer; border-radius: 10px; flex: none; }

/* ================= Hero (Desktop) ================= */
.n-held { max-width: 1320px; margin: 0 auto; padding: 0 40px; min-height: calc(100vh - 97px); display: grid; grid-template-columns: minmax(0, 1fr) 690px; align-items: center; gap: 20px; }
.n-held h1 { font-size: clamp(2.4rem, 4.2vw, 3.7rem); letter-spacing: -.035em; max-width: 15ch; }
.n-held h1 > span { display: block; }
.n-held h1 > span + span { margin-top: .08em; }
.n-unter { font-size: 1.12rem; color: var(--text2); max-width: 34rem; margin: 1.5rem 0 2rem !important; }
.n-unter strong { color: var(--text); font-weight: 600; }

.n-szene { position: relative; display: grid; grid-template-columns: 336px 1fr; column-gap: 34px; align-items: start; padding: 24px 0; }
.n-licht { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; pointer-events: none; z-index: 0; }
.n-szene .n-licht.a { width: 420px; height: 420px; left: 80px; top: 60px; background: radial-gradient(circle, #ffb36b, transparent 70%); }
.n-szene .n-licht.b { width: 460px; height: 460px; left: 240px; top: 300px; background: radial-gradient(circle, #f06bb0, transparent 70%); opacity: .4; }
.n-szene .n-licht.c { width: 360px; height: 360px; left: 380px; top: 20px; background: radial-gradient(circle, #9d7bf0, transparent 70%); opacity: .32; }
.n-reel-spalte { position: relative; z-index: 3; }
.n-daten { margin: 14px -60px 0 !important; font-size: 14px; color: var(--text2); text-align: center; white-space: nowrap; }
.n-daten b { color: var(--text); font-weight: 600; }
.n-reaktionen { position: relative; z-index: 4; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 14px; height: 707px; }
.n-mitte { display: flex; align-items: center; gap: 24px; }
.n-herzen { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.n-herzchen { width: 46px; height: 46px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: var(--schatten); }
.n-herzchen svg { width: 58%; height: 58%; }
.n-herzchen.n-h2 { width: 38px; height: 38px; } .n-herzchen.n-h3 { width: 30px; height: 30px; }
.n-beispiel-held { align-self: flex-start; }
.n-blase { position: relative; display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 20px 20px 20px 6px; padding: 10px 16px 11px 10px; box-shadow: var(--schatten); font-size: 15px; line-height: 1.3; max-width: 318px; }
.n-blase small { display: block; font-size: 14px; color: var(--text2); font-weight: 600; margin-bottom: 2px; }

/* ================= Abschnitte ================= */
.n-abschnitt { max-width: 1320px; margin: 0 auto; padding: 120px 40px 0; }
.n-kopfzeile { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 44px; }
.n-kopfzeile h2 { max-width: 20ch; }
.n-kopfzeile p { max-width: 30rem; color: var(--text2); font-size: 1.08rem; }
.n-beleg { margin-top: 26px !important; color: var(--text2); max-width: 46rem; }
.n-cta-zeile { margin-top: 36px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.n-cta-zeile .n-unterknopf { margin: 0 !important; }

/* Vorher/Nachher-Regler: Handy = Bildschirm 2, Desktop = Text links, Regler rechts */
.n-vn-teil { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 72px; align-items: center; }
.n-vn-text h2 { margin-bottom: 1.3rem; max-width: 13ch; }
.n-vn { --pos: 34%; position: relative; width: 100%; aspect-ratio: 358 / 560; border-radius: 22px; overflow: hidden; background: #e9e9ef; box-shadow: var(--schatten); user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.n-vn-teil-bild { position: absolute; inset: 0; }
.n-vn-vorher { clip-path: inset(0 0 calc(100% - var(--pos)) 0); background: #ececf0; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.n-vn-boerse { display: flex; align-items: center; gap: 10px; font: 600 14px/1.2 var(--fliess); color: var(--text2); }
.n-vn-ins { background: #fff; border-radius: 12px; padding: 10px; display: grid; grid-template-columns: 116px 1fr; gap: 14px; align-items: center; border: 1px solid #dcdce3; }
.n-vn-ins img { width: 116px; height: 87px; object-fit: cover; border-radius: 8px; filter: saturate(.7) brightness(1.03); }
.n-vn-ins p { font: 700 15px/1.25 var(--fliess); color: #2c2c36; }
.n-vn-ins .n-vn-pr { font-size: 16px; margin-top: 2px; }
.n-vn-ins .n-vn-dt { font-weight: 400; font-size: 14px; color: var(--text2); margin-top: 2px; }
.n-vn-nachher { clip-path: inset(var(--pos) 0 0 0); background: #fff; }
.n-vn-post { position: absolute; left: 0; right: 0; top: 34%; }
.n-vn-pkopf { display: flex; align-items: center; gap: 10px; height: 60px; padding: 14px 14px 0; font: 600 15px/1 var(--fliess); }
.n-vn-av { width: 32px; height: 32px; border-radius: 50%; background: #0f6e5a; color: #fff; display: grid; place-items: center; font: 800 14px/1 var(--fliess); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #d62976; flex: none; }
.n-vn-pkopf .n-schild-nachher { margin-left: auto; }
.n-vn-post img { width: 100%; height: auto; aspect-ratio: 358 / 220; object-fit: cover; object-position: 50% 4%; }
.n-vn-aktion { display: flex; align-items: center; gap: 16px; height: 46px; padding: 0 14px; color: var(--text); }
.n-vn-aktion svg { width: 25px; height: 25px; flex: none; }
.n-vn-cap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 14px; font: 400 15px/1.35 var(--fliess); }
.n-vn-cap b { font-weight: 600; }
.n-schild { font: 700 14px/1 var(--fliess); padding: 7px 11px; border-radius: 99px; white-space: nowrap; }
.n-schild-vorher { background: #fff; color: #3c3c48; border: 1px solid #cfcfd8; }
.n-schild-nachher { background: var(--knopf-verlauf); color: #fff; }
.n-vn-griff { position: absolute; left: 0; right: 0; top: var(--pos); height: 4px; margin-top: -2px; background: #fff; z-index: 4; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); pointer-events: none; }
.n-vn-griff span { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 6px 18px -4px rgba(0, 0, 0, .35); color: var(--text); }
.n-vn-regler { position: absolute; top: 0; bottom: 0; left: 50%; width: 88px; margin: 0 0 0 -44px; height: 100%; opacity: 0; z-index: 6; writing-mode: vertical-lr; direction: ltr; cursor: ns-resize; touch-action: none; }
.n-vn:has(.n-vn-regler:focus-visible) .n-vn-griff span { outline: 2px solid var(--aktion); outline-offset: 3px; }
.n-vn-unter { margin-top: 10px !important; font: 400 14px/1.4 var(--fliess); color: var(--text2); text-align: center; }

/* Schmerz: Bestand ohne Inhalte + leeres Profil */
.n-schmerz { display: grid; grid-template-columns: 1fr 1.25fr; gap: 64px; align-items: center; }
.n-schmerz h2 { margin-bottom: 1.4rem; max-width: 14ch; }
.n-uebernimmt { margin-top: 2rem !important; padding-top: 1.6rem; border-top: 1px solid var(--linie); font-size: 1.05rem; }
.n-uebernimmt b { display: block; font: 700 1.45rem/1.15 var(--titel); letter-spacing: -.02em; margin-bottom: .3rem; }
.n-vorher-karte { display: grid; grid-template-columns: 1.15fr 1fr; overflow: hidden; }
.n-bestand { padding: 28px 26px 22px; border-right: 1px solid var(--linie); }
.n-bestand h3 { font-size: 1.1rem; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.n-bestand h3 span { font: 500 14px var(--fliess); color: var(--text2); letter-spacing: 0; }
.n-zeile { display: grid; grid-template-columns: 72px 1fr; gap: 14px; padding: 12px 0; border-top: 1px solid var(--linie); }
.n-zeile img { width: 72px; height: 54px; object-fit: cover; border-radius: 10px; }
.n-zeile b { font-size: 15px; display: block; }
.n-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.n-chip { font-size: 14px; line-height: 1.2; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: #f0f0f4; color: #6b6b7c; }
.n-chip.ok { background: #e6f5ec; color: #146c3d; }
.n-profil-leer { padding: 26px 26px; display: flex; flex-direction: column; }
.n-pkopf { display: flex; gap: 14px; align-items: center; }
.n-pbild { width: 64px; height: 64px; border-radius: 50%; padding: 2.5px; background: #d6d6de; flex: none; }
.n-pbild.n-ring { background: var(--ring); }
.n-pbild b { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; border: 2.5px solid #fff; background: #1d2a44; color: #fff; font: 700 15px var(--titel); }
.n-pkopf strong, .n-pkopf h3 { display: block; font-size: 1.05rem; }
.n-pkopf span { font-size: 14px; color: var(--text2); }
.n-tabs { display: flex; justify-content: space-around; border-top: 1px solid var(--linie); margin-top: 20px; padding-top: 10px; color: #b7b7c4; }
.n-tabs svg { width: 22px; height: 22px; }
.n-tabs svg:first-child { color: var(--text); }
.n-leer { flex: 1; display: grid; place-content: center; text-align: center; gap: 10px; padding: 40px 0 26px; }
.n-kam { width: 74px; height: 74px; border: 2px solid var(--text); border-radius: 50%; display: grid; place-items: center; margin: 0 auto; }
.n-kam svg { width: 34px; height: 34px; }
.n-leer strong { font: 700 1.5rem/1.1 var(--titel); letter-spacing: -.02em; }
.n-leer span { font-size: 14px; color: var(--text2); }

/* So einfach: Story-Kacheln */
.n-einfach-reihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; list-style: none; margin: 0; padding: 0; }
.n-kachel { position: relative; aspect-ratio: 9 / 12.8; border-radius: var(--r-kachel); overflow: hidden; background: #fff; box-shadow: var(--schatten); display: flex; flex-direction: column; }
.n-fort { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; gap: 4px; z-index: 3; }
.n-fort i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .45); }
.n-fort i.voll { background: #fff; }
.n-kkopf { position: absolute; top: 22px; left: 12px; display: flex; align-items: center; gap: 8px; z-index: 3; color: #fff; font-size: 14px; font-weight: 600; background: rgba(16, 14, 24, .72); padding: 3px 12px 3px 3px; border-radius: 99px; }
.n-mini { width: 30px; height: 30px; border-radius: 50%; padding: 2px; background: var(--ring); flex: none; }
.n-mini b { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #fff; color: var(--text); font: 700 12px var(--titel); border: 1.5px solid #fff; text-shadow: none; }
.n-k-oben { position: relative; height: 64%; background: #23232b; overflow: hidden; }
.n-k-oben > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.n-k-oben::after { content: ""; position: absolute; inset: 0 0 auto; height: 90px; background: linear-gradient(rgba(10, 10, 20, .55), transparent); pointer-events: none; }
.n-k-oben.n-dunkel { background: #2a2a33; }
.n-k-oben.n-sbild > img { inset: 58px 0 64px; height: calc(100% - 122px); object-fit: contain; }
.n-k-unten { flex: 1; padding: 18px 22px 20px; display: flex; flex-direction: column; }
.n-k-unten h3 { font-size: 1.35rem; margin-bottom: .4rem; }
.n-k-unten p { font-size: 15px; color: var(--text2); line-height: 1.45; }
.n-linkfeld { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; background: #fff; border-radius: 14px; padding: 7px 7px 7px 14px; display: flex; gap: 8px; align-items: center; font-size: 14px; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .4); }
.n-linkfeld span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text2); }
.n-linkfeld b { background: var(--aktion); color: #fff; border-radius: 9px; padding: 8px 10px; font-size: 14px; }
.n-gitter4 { position: absolute; inset: 64px 14px 14px; display: flex; align-items: center; justify-content: center; gap: 8px; z-index: 2; container-type: size; }
.n-gitter4 figure { position: relative; border-radius: 10px; overflow: hidden; background: #ddd; margin: 0; flex: none; width: min(calc((100cqw - 16px) / 3), calc(100cqh * 9 / 16)); aspect-ratio: 9 / 16; }
.n-gitter4 figure.k-post { aspect-ratio: 4 / 5; }
.n-gitter4 img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.n-gitter4 figcaption { position: absolute; left: 6px; bottom: 6px; background: #fff; border-radius: 6px; font-size: 14px; line-height: 1; font-weight: 700; padding: 5px 7px; display: flex; gap: 5px; align-items: center; }
.n-gitter4 figcaption::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #19a35a; }
.n-freigabe { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px; background: #1e1e26; z-index: 2; display: flex; gap: 8px; }
.n-freigabe span { flex: 1; text-align: center; background: #34343f; color: #fff; font-size: 14px; font-weight: 700; padding: 11px 0; border-radius: 11px; }
.n-freigabe span.ja { background: var(--aktion); }
.n-hinweis { margin-top: 26px !important; font-size: 1rem; color: var(--text2); display: flex; align-items: center; gap: 12px; }
.n-hinweis b { color: var(--text); }
.n-haken { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--ring); display: grid; place-items: center; color: #fff; }
.n-haken svg { width: 16px; height: 16px; }

/* Ergebnisse: Reels-Reihe + Profil */
.n-reels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: start; }
.n-reels figure { margin: 0; }
.n-reelkachel { position: relative; border-radius: var(--r-kachel); overflow: hidden; aspect-ratio: 9 / 16; background: #15151b; box-shadow: var(--schatten); }
.n-reelkachel video { width: 100%; height: 100%; object-fit: cover; display: block; }
.n-typ { position: absolute; right: 12px; top: 12px; width: 26px; height: 26px; color: #fff; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5)); }
.n-etikett { margin-top: 12px; font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.n-etikett::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--ring); flex: none; }
.n-voll-profil { display: grid; grid-template-columns: 1.15fr 1fr; gap: 72px; align-items: center; margin-top: 120px; }
.n-voll-profil h2 { margin-bottom: 1.3rem; }
.n-profil { padding: 26px 26px 18px; }
.n-highlights { display: flex; gap: 16px; margin: 18px 0 4px; }
.n-highlights div { text-align: center; font-size: 14px; line-height: 1.15; font-weight: 500; width: 72px; }
.n-highlights .n-kreis { width: 60px; height: 60px; margin: 0 auto 5px; }
.n-highlights .n-kreis img { border-color: #fff; }
.n-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-top: 12px; border-radius: 6px; overflow: hidden; }
.n-raster img { width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; object-position: top; }

/* Marketingabteilung */
.n-vier { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.n-vier li { padding: 24px 24px 26px; display: grid; align-content: start; gap: 8px; font-size: 15px; color: var(--text2); }
.n-vier b { font: 700 1.3rem/1.15 var(--titel); letter-spacing: -.02em; color: var(--text); }
.n-vier li:last-child { position: relative; }
.n-vier li:last-child::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2.5px; background: var(--ring); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }

/* ================= Bestand + 360° (Teilvorlagen) im hellen Look ================= */
.n-hell { margin-top: 120px; }
.n-hell h2, .n-hell h3, .n-hell h4 { font-family: var(--titel); font-stretch: normal; }
.n-hell .b-buehne { background: #fff; color: var(--text); max-width: 1320px; margin: 0 auto; border-radius: var(--r-karte); box-shadow: var(--schatten); }
.n-hell .b-buehne::before { background: radial-gradient(60% 60% at 50% 100%, color-mix(in oklch, var(--b-marke, #d62976) 16%, transparent), transparent 70%); }
.n-hell .b-kopf h2 { color: var(--text); font-size: clamp(2rem, 3.6vw, 3.25rem); letter-spacing: -.025em; }
.n-hell .b-kopf p, .n-hell .b-marken > span { color: var(--text2); }
.n-hell .b-kopf p strong { color: var(--text); }
.n-hell .b-marke { background: #f5f5f8; border-color: var(--linie); color: var(--text); font-size: 15px; min-height: 44px; }
.n-hell .b-marke:hover { border-color: #c9c9d6; }
.n-hell .b-marke[aria-pressed=true] { background: color-mix(in oklch, var(--m) 10%, #fff); color: var(--text); }
.n-hell .b-hinweis { color: var(--text2); font-size: 15px; }
.n-hell .b-marke i { width: 28px; height: 28px; font-size: 14px; }
.n-hell .b-systeme span { font-size: 14px; }
.n-hell .b-hinweis b { color: var(--text); }
.n-hell .b-schritte, .n-hell .b-nutzen { max-width: 1320px; }
.n-hell .b-schritte h2, .n-hell .b-nutzen h2 { font-size: clamp(1.6rem, 2.4vw, 2.3rem); letter-spacing: -.025em; margin-bottom: 14px; }
.n-hell .b-schritt { border-radius: var(--r-kachel); }
.n-hell .knopf.haupt-k { background: var(--aktion); background-image: var(--knopf-verlauf); border: 0; color: #fff; border-radius: 12px; }
.n-hell .knopf { border-radius: 12px; min-height: 48px; font-size: 15px; }
.n-hell .r-abschnitt { max-width: 1320px; }
.n-hell .r-kopf h2 { font-size: clamp(2rem, 3.6vw, 3.25rem); letter-spacing: -.025em; }
.n-hell .r-dach { color: var(--aktion-tief); font-size: 15px; }
.n-hell .r-wahl button[aria-pressed=true] { background: var(--aktion); background-image: var(--knopf-verlauf); color: #fff; }
.n-hell .r-weiter { margin-top: 28px; }
.n-hell .r-weiter a { color: var(--aktion-tief); }
/* Code-Zeile im Bestand-Schritt 2 umbrechen statt rechts abschneiden */
.n-hell .s2-code { white-space: normal; overflow-wrap: anywhere; }

/* ================= Preise ================= */
.n-preis-raster { display: grid; grid-template-columns: 1fr 1fr 1.05fr; grid-template-rows: auto auto; gap: 24px; align-items: stretch; }
.n-rechner { grid-column: 1 / -1; padding: 24px 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 10px 40px; align-items: center; }
.n-rechner label { font: 700 1.25rem/1.2 var(--titel); letter-spacing: -.015em; }
.n-anzahl-zeile { display: flex; align-items: center; gap: 18px; grid-row: span 2; }
.n-anzahl-zeile input { flex: 1; accent-color: var(--aktion); height: 44px; cursor: pointer; }
.n-anzahl-zeile output { min-width: 2.4ch; font: 700 2.2rem/1 var(--titel); text-align: right; font-variant-numeric: tabular-nums; }
.n-r-tipp { color: var(--text2); font-size: 15px; }
.n-r-tipp b { color: var(--text); }
.n-tarif { position: relative; padding: 22px 26px 26px; display: flex; flex-direction: column; }
.n-tarif .n-pkopf { margin-bottom: 22px; }
.n-tarif .n-pbild { width: 50px; height: 50px; }
.n-tarif .n-pbild b { background: #fff; color: var(--text); font-size: 14px; }
.n-tarif h3 { font-size: 1.15rem; }
.n-betrag { display: flex; flex-direction: column; gap: 6px; }
.n-betrag b { font: 700 3.4rem/1 var(--titel); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.n-betrag small { font-size: 15px; font-weight: 600; color: var(--text2); }
.n-regel { margin: 14px 0 24px !important; font-size: 15px; color: var(--text2); }
.n-tarif-knopf { margin-top: auto; width: 100%; background: #efeff4 !important; background-image: none !important; color: var(--text) !important; box-shadow: none; }
.n-tarif.empfohlen .n-tarif-knopf { background: var(--aktion) !important; background-image: var(--knopf-verlauf) !important; color: #fff !important; }
.n-empf-marke { align-self: flex-start; margin-bottom: 14px; font: 700 14px/1 var(--fliess); padding: 7px 10px; border-radius: 99px; background: var(--knopf-verlauf); color: #fff; opacity: 0; transform: scale(.92); transition: opacity .25s, transform .25s var(--feder); }
.n-tarif.empfohlen .n-empf-marke { opacity: 1; transform: none; }
.n-tarif.empfohlen::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2.5px; background: var(--ring); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.n-enthalten { padding: 26px 28px; }
.n-enthalten h3 { font-size: 1.15rem; margin-bottom: 14px; }
.n-enthalten ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.n-enthalten li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; }
.n-enthalten li svg { width: 18px; height: 18px; color: var(--pink); margin-top: 3px; }
.n-gebiet { margin-top: 16px !important; padding-top: 14px; border-top: 1px solid var(--linie); font-size: 15px; color: var(--text2); }
.n-preis-fuss { margin-top: 22px; display: grid; gap: 8px; max-width: 62rem; }
.n-kleintext { font-size: 14px; color: var(--text2); }

/* ================= Fragen als Direktnachrichten ================= */
.n-fragen { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
.n-fragen h2 { margin-bottom: 1rem; }
.n-offen { margin-top: 1.4rem !important; color: var(--text2); }
.n-offen a { color: var(--aktion-tief); font-weight: 600; }
.n-chat { overflow: hidden; }
.n-ckopf { display: flex; gap: 12px; align-items: center; padding: 14px 22px; border-bottom: 1px solid var(--linie); }
.n-ckopf .n-mini { width: 40px; height: 40px; }
.n-verlauf { padding: 18px 22px 10px; display: flex; flex-direction: column; gap: 10px; }
.n-verlauf details { display: flex; flex-direction: column; }
.n-verlauf summary { list-style: none; align-self: flex-end; max-width: 80%; margin-left: auto; padding: 11px 40px 11px 16px; border-radius: 22px 22px 6px 22px; background: var(--dm); color: #fff; font-size: 16px; line-height: 1.4; font-weight: 500; cursor: pointer; position: relative; width: fit-content; }
.n-verlauf summary::-webkit-details-marker { display: none; }
.n-verlauf summary::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); transition: transform .2s var(--feder); }
.n-verlauf details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.n-verlauf summary:hover { background: #5a2fe0; }
.n-verlauf details p { align-self: flex-start; max-width: 84%; margin-top: 8px !important; padding: 11px 16px; border-radius: 22px 22px 22px 6px; background: #efeff4; font-size: 16px; line-height: 1.45; }
.n-verlauf details p a { color: var(--aktion-tief); font-weight: 600; }
.n-eingabe { margin: 6px 22px 20px; border: 1px solid var(--linie); border-radius: 99px; padding: 11px 18px; color: #8a8a99; font-size: 15px; }

/* ================= Schluss ================= */
.n-schluss-karte { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; padding: 72px 64px; min-height: 560px; align-items: center; }
.n-schluss-karte .n-licht.a { width: 420px; height: 420px; right: -60px; top: -80px; background: radial-gradient(circle, #ffb36b, transparent 70%); }
.n-schluss-karte .n-licht.b { width: 460px; height: 460px; right: 160px; top: 200px; background: radial-gradient(circle, #f06bb0, transparent 70%); opacity: .38; }
.n-schluss-text { position: relative; z-index: 1; }
.n-schluss h2 { font-size: clamp(2.2rem, 3.8vw, 3.5rem); }
.n-schluss .n-lead { margin: 1.4rem 0 2rem !important; }
.n-handys { position: relative; z-index: 1; display: flex; justify-content: center; align-items: flex-start; gap: 22px; }
.n-handys .n-h-post { margin-top: 40px; }

/* ================= Fuß ================= */
.n-fuss { max-width: 1320px; margin: 100px auto 0; padding: 36px 40px 48px; border-top: 1px solid var(--linie); display: flex; justify-content: space-between; align-items: center; gap: 20px 32px; flex-wrap: wrap; font-size: 15px; color: var(--text2); }
.n-fuss .n-wortmarke { font-size: 1.3rem; }
.n-fuss nav { display: flex; gap: 8px 24px; flex-wrap: wrap; }
.n-fuss nav a { text-decoration: none; padding: 10px 0; }
.n-fuss nav a:hover { text-decoration: underline; color: var(--text); }
.n-fest-unten { display: none; }

/* ================= Instagram-Handy (Nachbau, Deko) ================= */
.ig { --w: 320px; display: block; width: var(--w); height: calc(var(--w) * 2.105); font-size: calc(var(--w) / 24.375); line-height: 1.25; flex: none;
  font-family: -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: #000; border-radius: 3.6em; padding: .62em; position: relative;
  background: linear-gradient(145deg, #4a4a4f, #1d1d20 40%, #38383c 75%, #121214);
  box-shadow: 0 0 0 .12em #0b0b0c inset, 0 0 0 .07em #6d6d72, 0 2.2em 3.5em -1.2em rgba(0, 0, 0, .45), 0 .8em 1.4em -.6em rgba(0, 0, 0, .35); }
.ig.ig-weiss { background: linear-gradient(145deg, #f4f4f6, #d9d9de 45%, #efeff2 80%, #c9c9cf); box-shadow: 0 0 0 .12em #b8b8be inset, 0 0 0 .07em #fff, 0 2.2em 3.5em -1.2em rgba(20, 20, 40, .3), 0 .8em 1.4em -.6em rgba(20, 20, 40, .22); }
.ig svg { width: 1.55em; height: 1.55em; display: block; flex: none; }
.ig p { margin: 0; text-wrap: wrap; }
.ig-bs { width: 100%; height: 100%; border-radius: 3em; overflow: hidden; position: relative; background: #fff; display: flex; flex-direction: column; }
.ig-reel .ig-bs, .ig-story .ig-bs { background: #000; color: #fff; }
.ig-insel { position: absolute; top: .7em; left: 50%; transform: translateX(-50%); width: 7.4em; height: 2.1em; background: #000; border-radius: 1.2em; z-index: 20; }
.ig-status { height: 3.4em; flex: none; display: flex; align-items: center; justify-content: space-between; padding: .55em 2.1em 0 2.4em; font-weight: 600; position: relative; z-index: 15; }
.ig-r { display: flex; gap: .4em; align-items: center; }
.ig-balken { display: flex; gap: .12em; align-items: flex-end; height: .75em; }
.ig-balken b { width: .2em; background: currentColor; border-radius: .06em; height: 100%; }
.ig-balken b:nth-child(1) { height: 35%; } .ig-balken b:nth-child(2) { height: 55%; } .ig-balken b:nth-child(3) { height: 78%; }
.ig-akku { width: 1.6em; height: .78em; border: .09em solid currentColor; border-radius: .25em; padding: .08em; }
.ig-akku b { display: block; height: 100%; width: 80%; background: currentColor; border-radius: .1em; }
.ig-kopf { display: flex; align-items: center; justify-content: space-between; padding: .2em 1em .55em; flex: none; }
.ig-wort { display: flex; align-items: center; gap: .4em; font-weight: 700; font-size: 1.05em; }
.ig-wort svg { width: 1.4em; height: 1.4em; }
.ig-ic { display: flex; gap: 1.1em; }
.ig-feed { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.ig-av { width: 2.2em; height: 2.2em; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: .8em; background: #0f6e5a; }
.ig-phead { display: flex; align-items: center; gap: .6em; padding: .6em .9em; flex: none; }
.ig-phead .ig-av { box-shadow: 0 0 0 .14em #fff, 0 0 0 .3em #d62976; }
.ig-phead svg { margin-left: auto; }
.ig-n { font-weight: 600; font-size: .88em; line-height: 1.15; }
.ig-n small { display: block; font-weight: 400; font-size: .86em; opacity: .75; }
.ig-pbild { width: 100%; aspect-ratio: 4 / 5; flex: none; overflow: hidden; background: #eee; }
.ig-pbild img { width: 100%; height: 100%; object-fit: cover; }
.ig-aktion { display: flex; align-items: center; gap: 1em; padding: .7em .9em .45em; flex: none; }
.ig-rechts { margin-left: auto; }
.ig-cap { padding: 0 .9em; font-size: .86em; line-height: 1.35; flex: none; }
.ig-cap b { font-weight: 600; }
.ig-grau { color: #737373; }
.ig-tag { color: #00376b; }
.ig-zeit { display: block; color: #737373; font-size: .85em; margin-top: .35em; }
.ig-tabs { margin-top: auto; height: 4.6em; flex: none; display: flex; justify-content: space-around; align-items: flex-start; padding-top: .8em; border-top: .06em solid #dbdbdb; background: inherit; position: relative; z-index: 5; }
.ig-reel .ig-tabs { background: #000; color: #fff; border-color: #262626; }
.ig-ich { width: 1.6em; height: 1.6em; border-radius: 50%; background: #0f6e5a; color: #fff; display: grid; place-items: center; font-size: .55em; font-weight: 800; }
.ig-heim { position: absolute; bottom: .5em; left: 50%; transform: translateX(-50%); width: 8.5em; height: .32em; border-radius: 1em; background: currentColor; opacity: .9; z-index: 30; }
.ig-reel { position: relative; }
.ig-reel > .ig-bs > .ig-reel, .ig-bs > .ig-reel { position: absolute; inset: 0; background: #000; }
/* contain statt cover: das Handy-Display ist schmaler als 9:16, cover würde eingebrannte Reel-Texte links/rechts abschneiden */
.ig-poster, .ig-bs > .ig-reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 72%; }
.ig-verlauf { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .35), transparent 16%, transparent 58%, rgba(0, 0, 0, .6) 88%); }
.ig-rkopf { position: absolute; top: 3.5em; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 1.1em; color: #fff; z-index: 4; }
.ig-rkopf b { font-size: 1.35em; font-weight: 700; }
.ig-rleiste { position: absolute; right: .7em; bottom: 6.6em; display: flex; flex-direction: column; align-items: center; gap: 1.35em; color: #fff; z-index: 4; }
.ig-rleiste svg { width: 1.75em; height: 1.75em; filter: drop-shadow(0 .05em .2em rgba(0, 0, 0, .4)); }
.ig-rinfo { position: absolute; left: .95em; right: 3.9em; bottom: 5.9em; color: #fff; z-index: 4; text-shadow: 0 .05em .3em rgba(0, 0, 0, .45); }
.ig-z1 { display: flex; align-items: center; gap: .55em; font-weight: 600; font-size: .88em; }
.ig-z1 .ig-av { box-shadow: 0 0 0 .1em #fff; }
.ig-folgen { border: .07em solid rgba(255, 255, 255, .85); border-radius: .55em; padding: .25em .7em; font-size: .92em; }
.ig-rinfo p { font-size: .84em; margin-top: .55em; line-height: 1.3; }
.ig-audio { display: flex; align-items: center; gap: .4em; margin-top: .5em; font-size: .8em; }
.ig-audio svg { width: 1.05em; height: 1.05em; }
.ig-story .ig-bs > .ig-story { position: absolute; left: 0; right: 0; top: 2.9em; bottom: 5.2em; border-radius: .6em; overflow: hidden; background: #111; }
.ig-story .ig-bs > .ig-story img { width: 100%; height: 100%; object-fit: cover; }
.ig-fort { position: absolute; top: 3.45em; left: .6em; right: .6em; display: flex; gap: .25em; z-index: 4; }
.ig-fort i { flex: 1; height: .16em; border-radius: .2em; background: rgba(255, 255, 255, .4); }
.ig-fort i.voll { background: #fff; } .ig-fort i.halb { background: linear-gradient(90deg, #fff 45%, rgba(255, 255, 255, .4) 45%); }
.ig-skopf { position: absolute; top: 4.1em; left: .9em; right: .9em; display: flex; align-items: center; gap: .55em; color: #fff; z-index: 4; font-size: .9em; text-shadow: 0 .05em .3em rgba(0, 0, 0, .4); }
.ig-skopf .ig-grau { color: rgba(255, 255, 255, .75); }
.ig-re { margin-left: auto; display: flex; gap: 1em; }
.ig-sfuss { position: absolute; left: .9em; right: .9em; bottom: 1.7em; display: flex; align-items: center; gap: 1em; color: #fff; z-index: 4; }
.ig-sfeld { flex: 1; border: .08em solid rgba(255, 255, 255, .65); border-radius: 2em; padding: .75em 1.1em; font-size: .86em; }
.n-gross { --w: 336px; }
.n-post-klein { --w: 190px; }
.n-h-story, .n-h-post { --w: 220px; }

/* ================= Bewegung: nur wenn erwünscht, Grundzustand ist immer sichtbar ================= */
@media (prefers-reduced-motion: no-preference) {
  .n-js .n-blase { animation: n-aufsteigen 7s var(--feder) infinite; }
  .n-js .n-blase.n-k2 { animation-delay: 1.8s; } .n-js .n-blase.n-k3 { animation-delay: 3.4s; } .n-js .n-blase.n-k4 { animation-delay: 5s; }
  .n-js .n-herzchen { animation: n-herz 4.2s ease-out infinite; }
  .n-js .n-herzchen.n-h2 { animation-delay: .7s; } .n-js .n-herzchen.n-h3 { animation-delay: 1.4s; }
  @supports (animation-timeline: view()) {
    .n-wisch { animation: n-wischen linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
  }
}
@keyframes n-aufsteigen { 0% { transform: translateY(26px) scale(.96); } 14%, 100% { transform: none; } }
@keyframes n-herz { 0% { transform: translateY(30px) scale(.6); } 30% { transform: translateY(0) scale(1); } 100% { transform: translateY(-14px); } }
@keyframes n-wischen { from { transform: translateX(min(4vw, 44px)); } to { transform: none; } }

/* ================= Tablet / kleiner Desktop ================= */
@media (max-width: 1240px) {
  .n-kopf-innen { grid-template-columns: 1fr auto; padding: 10px 32px 0; row-gap: 4px; min-height: 0; }
  .n-kreise-nav { grid-column: 1 / -1; grid-row: 2; justify-self: center; padding-bottom: 8px; }
  .n-held { grid-template-columns: 1fr; padding: 48px 32px 0; min-height: 0; gap: 36px; }
  .n-held h1 { max-width: 18ch; }
  .n-szene { justify-self: center; width: min(690px, 100%); }
  .n-abschnitt { padding: 100px 32px 0; }
  .n-vier { grid-template-columns: 1fr 1fr; }
  .n-preis-raster { grid-template-columns: 1fr 1fr; }
  .n-enthalten { grid-column: 1 / -1; }
}
@media (max-width: 1000px) {
  .n-szene { grid-template-columns: 300px 1fr; column-gap: 24px; }
  .n-gross { --w: 300px; }
  .n-reaktionen { height: 632px; }
  .n-mitte { display: none; }
  .n-reaktionen { justify-content: center; gap: 26px; }
  .n-schmerz, .n-voll-profil, .n-fragen, .n-vn-teil { grid-template-columns: 1fr; gap: 40px; }
  .n-vn-spalte { max-width: 430px; }
  .n-kopfzeile { flex-direction: column; align-items: start; gap: 14px; }
  .n-schluss-karte { grid-template-columns: 1fr; padding: 56px 40px; }
  .n-einfach-reihe { gap: 16px; }
  .n-k-unten { padding: 14px 16px; }
  .n-rechner { grid-template-columns: 1fr; }
  .n-anzahl-zeile { grid-row: auto; }
}

/* ================= HANDY (< 760 px): Story statt Hero ================= */
.n-story { display: none; }
@media (max-width: 759px) {
  :root { --story-h: calc(100svh - 14px); --leiste-h: 64px; }
  html { scroll-padding-top: 16px; }
  body { font-size: 16px; padding-bottom: var(--fest-hoehe); }
  .n-held { display: none; }
  .n-nur-handy { display: grid; }
  .n-empf.n-nur-handy { margin: 20px 16px 0; }

  /* --- Story-Bildschirm --- */
  .n-story { display: flex; position: relative; height: var(--story-h); min-height: 560px; background: #000; flex-direction: column; color: #fff; border-radius: 0 0 24px 24px; }
  .n-karte { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 0 0 18px 18px; background: #111; isolation: isolate; }
  .n-folie { position: absolute; inset: 0; visibility: hidden; opacity: 0; transition: opacity .28s var(--feder), visibility 0s .28s; pointer-events: none; }
  .n-folie.an { visibility: visible; opacity: 1; transition: opacity .28s var(--feder); }
  .n-oben { position: absolute; z-index: 5; left: 0; right: 0; top: 0; padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 0; pointer-events: none; }
  .n-balken { display: flex; gap: 4px; }
  .n-balken span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .38); overflow: hidden; }
  .n-balken i { display: block; height: 100%; width: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
  .n-balken .fertig i { transform: none; }
  .n-balken .jetzt i { animation: n-fuellen var(--dauer, 5.5s) linear forwards; }
  .n-story.pause .n-balken .jetzt i { animation-play-state: paused; }
  .n-skopf { display: flex; align-items: center; gap: 10px; margin-top: 8px; min-height: 44px; }
  .n-ava { width: 36px; height: 36px; border-radius: 50%; padding: 2px; background: var(--ring); flex: none; }
  .n-ava b { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #fff; border: 2px solid #fff; color: var(--text); font: 700 15px/1 var(--titel); letter-spacing: -.04em; }
  .n-wer { font: 700 15px/1.1 var(--fliess); text-shadow: 0 1px 6px rgba(0, 0, 0, .35); white-space: nowrap; }
  .n-wer small { font: 500 14px/1 var(--fliess); opacity: .85; margin-left: 6px; }
  .n-skopf-rechts { margin-left: auto; display: flex; align-items: center; pointer-events: auto; }
  .n-ico { width: 44px; height: 44px; display: grid; place-items: center; color: #fff; background: none; border: 0; cursor: pointer; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .4)); padding: 0; }
  .n-ico svg { width: 24px; height: 24px; }
  .n-zu { opacity: .9; pointer-events: none; }
  .n-s-play { display: none; } .n-story.pause .n-s-play { display: block; } .n-story.pause .n-s-pause { display: none; }
  .n-story[data-hell] .n-balken span { background: rgba(21, 21, 27, .16); }
  .n-story[data-hell] .n-balken i { background: var(--text); }
  .n-story[data-hell] .n-wer, .n-story[data-hell] .n-ico { color: var(--text); text-shadow: none; filter: none; }

  .n-tipp { position: absolute; z-index: 2; top: 0; bottom: 0; border: 0; background: none; color: #fff; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; }
  .n-zurueck { left: 0; width: 32%; } .n-weiter { right: 0; width: 68%; }
  .n-tipp span { position: absolute; top: 50%; transform: translateY(-50%); font: 700 15px/1 var(--fliess); padding: 10px 14px; border-radius: 99px; background: rgba(0, 0, 0, .65); opacity: 0; transition: opacity .2s; }
  .n-zurueck span { left: 12px; } .n-weiter span { right: 12px; }
  .n-tipp:focus-visible { outline: none; } .n-tipp:focus-visible span { opacity: 1; outline: 2px solid #fff; outline-offset: 2px; }
  .n-inhalt { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
  .n-spalte { display: flex; flex-direction: column; padding: calc(86px + env(safe-area-inset-top, 0px)) 16px 16px; }

  /* Story 1: Reel, Headline verdeckt den eingebrannten Reel-Text */
  .n-f1 video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; background: #111; }
  .n-s1-kopf { position: absolute; left: 0; right: 0; top: 0; min-height: calc(250px + env(safe-area-inset-top, 0px)); padding: calc(92px + env(safe-area-inset-top, 0px)) 20px 48px;
    background: linear-gradient(to bottom, #0c0b10 0, #0c0b10 84%, rgba(12, 11, 16, 0) 100%); }
  .n-s1-titel { font: 700 38px/1.02 var(--titel); letter-spacing: -.035em; color: #fff; text-wrap: balance; }
  .n-s1-titel em.w-hl { background: linear-gradient(100deg, #feda75, #fa7e1e 30%, #ff5a8c 65%, #c58bff); -webkit-background-clip: text; background-clip: text; }
  .n-unten-blasen { position: absolute; left: 14px; right: 14px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
  .n-spalte .n-unten-blasen { position: static; margin-top: auto; padding: 14px 0 0; }
  .n-unten-blasen .n-beispiel { background: #fff; border-color: #fff; box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .35); }
  .n-sblase { display: flex; align-items: center; gap: 10px; background: #fff; color: var(--text); border-radius: 18px; padding: 7px 16px 7px 7px; max-width: 100%;
    box-shadow: 0 1px 2px rgba(40, 30, 80, .08), 0 12px 28px -12px rgba(60, 40, 120, .35); }
  .n-sblase p { font: 500 16px/1.25 var(--fliess); }

  /* Story 2–4: helle Story-Flächen */
  .n-f2 { background: linear-gradient(165deg, #fff4e8 0%, #ffe3ec 55%, #f1e4ff 100%); color: var(--text); }
  .n-f3 { background: linear-gradient(170deg, #eef0ff 0%, #f6e9ff 50%, #ffe8f0 100%); color: var(--text); }
  .n-f4 { background: linear-gradient(160deg, #fff1e6 0%, #ffe0ea 45%, #ead9ff 100%); color: var(--text); }
  .n-s-titel { font: 700 40px/1.02 var(--titel); letter-spacing: -.03em; padding: 0 4px; text-wrap: balance; flex: none; }
  .n-schritt { font: 700 14px/1 var(--fliess); color: var(--aktion); display: block; margin-bottom: 10px; letter-spacing: .04em; text-transform: uppercase; }
  .n-feld { margin-top: 18px; background: #fff; border-radius: 16px; padding: 14px 14px 14px 12px; display: flex; align-items: center; gap: 10px; flex: none;
    box-shadow: 0 1px 2px rgba(40, 30, 80, .08), 0 16px 34px -16px rgba(120, 40, 100, .4); }
  .n-feld svg { width: 22px; height: 22px; flex: none; color: var(--aktion); }
  .n-feld p { font: 500 15px/1.3 var(--fliess); color: var(--text); min-width: 0; overflow: hidden; white-space: nowrap; }
  .n-feld p span { display: inline-block; overflow: hidden; vertical-align: bottom; max-width: 100%; text-overflow: ellipsis; }
  .n-folie.an .n-feld p span { animation: n-tippen 1.6s steps(34, end) .3s both; }
  .n-feld p::after { content: ''; display: inline-block; width: 2px; height: 1.1em; background: var(--aktion); vertical-align: -3px; margin-left: 1px; animation: n-blinken 1s steps(1) infinite; }
  .n-rechts { align-self: flex-end; margin: 10px 4px 0; flex: none; }
  .n-foto { flex: 1 1 0; min-height: 100px; margin: 12px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .n-foto img { width: auto; height: auto; max-width: 100%; max-height: calc(100% - 36px); object-fit: contain; border-radius: 18px; border: 6px solid #fff; background: #fff; box-shadow: 0 22px 40px -22px rgba(60, 30, 90, .55); }
  .n-folie.an .n-foto { animation: n-sticker .7s var(--feder) 1.7s both; }
  .n-foto-unter { font: 600 15px/1.2 var(--fliess); color: var(--text2); text-align: center; margin-top: 10px !important; flex: none; }

  /* Story 3 + 4: Reel, Beitrag, Story nebeneinander ohne Überdeckung. Spaltenbreiten im Verhältnis der Seitenverhältnisse
     (9:16, 4:5, 9:16 → 9 : 12,8 : 9), dadurch sind alle Karten gleich hoch und kein Bildtext wird beschnitten.
     Größe richtet sich nach Breite UND freier Höhe (Container-Abfrage), damit das Formular nie aus dem Bild rutscht. */
  .n-faecher { flex: 1 1 0; min-height: 120px; margin-top: 16px; container-type: size; display: flex; align-items: center; justify-content: center; }
  .n-faecher-reihe { display: grid; grid-template-columns: 9fr 12.8fr 9fr; gap: 10px; align-items: start;
    width: min(100%, calc((100cqh - 30px) * 1.925 + 20px)); }
  .n-faecher figure { margin: 0; min-width: 0; display: flex; flex-direction: column; align-items: center; }
  .n-faecher img { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: contain; border-radius: 12px; background: #fff;
    box-shadow: 0 0 0 3px #fff, 0 18px 30px -16px rgba(40, 20, 80, .45); }
  .n-faecher .k-post img { aspect-ratio: 4 / 5; }
  .n-faecher-zwei .n-faecher-reihe { grid-template-columns: 12.8fr 9fr; width: min(100%, calc((100cqh - 30px) * 1.3625 + 10px)); }
  .n-faecher figcaption { font: 700 15px/1 var(--fliess); color: var(--text); margin-top: 11px; white-space: nowrap; }
  .n-folie.an .n-faecher .k-reel { animation: n-links .7s var(--feder) .1s both; }
  .n-folie.an .n-faecher .k-story { animation: n-rechts .7s var(--feder) .2s both; }

  .n-f4 .n-wortmarke { font-size: 1.5rem; padding: 0 4px; margin-bottom: 14px; flex: none; }
  .n-s4-titel { font-size: 42px; }
  .n-s4-klein { font: 600 17px/1.35 var(--fliess); text-align: center; padding-top: 16px; flex: none; }
  .n-s4-pfeil { font: 500 16px/1.3 var(--fliess); color: var(--text2); display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 10px !important; flex: none; }
  .n-s4-pfeil svg { width: 20px; height: 20px; color: var(--aktion); animation: n-wippen 1.6s var(--feder) infinite; flex: none; }

  .n-mehr { flex: none; height: 44px; margin-top: 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: none; border: 0; color: rgba(255, 255, 255, .9); font: 600 14px/1 var(--fliess); cursor: pointer; }
  .n-mehr svg { width: 20px; height: 20px; margin-bottom: -2px; animation: n-wippen-hoch 1.8s var(--feder) infinite; }
  .n-leiste { height: var(--leiste-h); flex: none; display: flex; align-items: center; gap: 10px; padding: 0 12px 10px 16px; }
  .n-zur-anmeldung { flex: 1; min-width: 0; height: 52px; border: 0; border-radius: 99px; background: var(--knopf-verlauf); color: #fff; font: 700 17px/1.1 var(--fliess); cursor: pointer; padding: 0 12px;
    box-shadow: 0 10px 24px -10px rgba(212, 42, 91, .7); transition: transform .16s var(--feder); -webkit-tap-highlight-color: transparent; }
  .n-zur-anmeldung:active { transform: scale(.97); }
  .n-anmeldung { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 52px; border: 1.5px solid rgba(255, 255, 255, .65); border-radius: 99px; padding: 0 3px 0 18px; }
  .n-anmeldung input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; color: #fff; font: 500 16px/1 var(--fliess); padding: 0; }
  .n-anmeldung input::placeholder { color: rgba(255, 255, 255, .8); }
  .n-anmeldung input:focus { outline: none; }
  .n-anmeldung:focus-within { border-color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }
  .n-senden { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 0; display: grid; place-items: center; color: #fff; background: var(--knopf-verlauf); cursor: pointer; padding: 0; }
  .n-senden svg { width: 21px; height: 21px; margin-left: -2px; }
  .n-herz { width: 44px; height: 44px; display: grid; place-items: center; color: #fff; flex: none; }
  .n-herz svg { width: 26px; height: 26px; }
  .n-story:not([data-letzte]) .n-anmeldung { display: none; }
  .n-story[data-letzte] .n-zur-anmeldung { display: none; }
  /* ohne JS: Knopf ist sinnlos, das Formular steht gleich da */
  html:not(.n-js) .n-zur-anmeldung { display: none; }
  html:not(.n-js) .n-story .n-anmeldung { display: flex; }

  /* kleine Höhen (z. B. 360 × 640): alles etwas enger, Formular bleibt sichtbar */
  @media (max-height: 740px) {
    .n-spalte { padding-top: calc(78px + env(safe-area-inset-top, 0px)); }
    .n-s1-kopf { padding-top: calc(80px + env(safe-area-inset-top, 0px)); min-height: calc(220px + env(safe-area-inset-top, 0px)); }
    .n-s1-titel { font-size: 33px; }
    .n-s-titel { font-size: 32px; } .n-s4-titel { font-size: 34px; }
    .n-schritt { margin-bottom: 6px; }
    .n-f4 .n-wortmarke { display: none; }
    .n-spalte .n-unten-blasen .n-sblase + .n-sblase { display: none; }
    .n-s4-klein { font-size: 16px; padding-top: 10px; }
  }

  /* --- Kopf unter der Story --- */
  .n-kopf { position: relative; background: transparent; backdrop-filter: none; }
  .n-kopf-innen { padding: 14px 16px 0; grid-template-columns: 1fr auto; min-height: 0; }
  .n-kreise-nav { display: none; }
  .n-wortmarke { font-size: 1.35rem; }
  .n-kopf-rechts { gap: 4px; }
  .n-kopf-testen { display: none; }
  .n-anmelden { padding: 12px 8px; }

  /* --- Abschnitte --- */
  .n-abschnitt { padding: 72px 16px 0; }
  .n-wisch { animation: none !important; }
  .n-seite h2 { font-size: 30px; }
  .n-lead, .n-kopfzeile p { font-size: 16px; }
  .n-vn-teil { padding-top: 26px; gap: 16px; }
  .n-vn-text h2 { margin-bottom: 10px; }
  .n-vn-text .n-lead { display: none; }
  .n-vn-spalte { max-width: none; }
  .n-schmerz h2 { max-width: none; }
  .n-vorher-karte { grid-template-columns: 1fr; }
  .n-bestand { border-right: 0; padding: 20px 18px 8px; }
  .n-profil-leer { display: none; }
  .n-zeile { grid-template-columns: 64px 1fr; }
  .n-zeile img { width: 64px; height: 48px; }
  .n-kopfzeile { margin-bottom: 24px; }
  /* untereinander statt Wischreihe: angeschnittene Nachbarkarten am Bildrand zählen als abgeschnittene Schrift */
  .n-einfach-reihe { grid-template-columns: 1fr; gap: 14px; }
  .n-kachel { aspect-ratio: auto; }
  .n-k-oben { height: auto; aspect-ratio: 4 / 3; flex: none; }
  .n-hinweis { align-items: flex-start; font-size: 15px; }
  .n-cta-zeile .n-knopf { width: 100%; }
  /* zwei Reels nebeneinander, vollständig im Bild (keine angeschnittene Wischreihe) */
  .n-reels { grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
  .n-reels figure:nth-child(3) { display: none; }
  .n-etikett { font-size: 14px; line-height: 1.3; align-items: flex-start; }
  .n-etikett::before { margin-top: 5px; }
  .n-voll-profil { margin-top: 64px; gap: 28px; }
  .n-profil { order: 2; padding: 16px 12px 12px; border-radius: 22px; }
  .n-highlights { gap: 8px; justify-content: space-between; }
  .n-highlights div { width: 25%; }
  .n-vier { grid-template-columns: 1fr; gap: 12px; }
  .n-vier li { padding: 18px 20px; }
  .n-hell { margin-top: 72px; }
  .n-hell .b-buehne { margin: 0 8px; border-radius: 24px; }
  .n-hell .b-hinweis { margin-top: 30px; }
  .n-preis-raster { grid-template-columns: 1fr; gap: 14px; }
  .n-rechner { padding: 20px; }
  .n-betrag b { font-size: 2.8rem; }
  .n-verlauf { padding: 14px 12px 8px; }
  .n-verlauf summary { max-width: 92%; font-size: 15px; }
  .n-verlauf details p { max-width: 94%; font-size: 15px; }
  .n-eingabe { margin: 6px 12px 14px; }
  .n-schluss-karte { padding: 40px 20px 32px; min-height: 0; border-radius: 24px; gap: 28px; }
  .n-schluss .n-knopf { width: 100%; padding: 0 .9em; font-size: 1rem; }
  .n-fuss nav a:first-child { flex-basis: 100%; }
  .n-handys { gap: 12px; }
  .n-h-story, .n-h-post { --w: 150px; }
  .n-handys .n-h-post { margin-top: 26px; }
  .n-fuss { margin-top: 56px; padding: 24px 16px 28px; flex-direction: column; align-items: flex-start; gap: 10px; }

  /* fester Knopf unten, erst wenn die Story aus dem Bild ist */
  .n-fest-unten { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 12px 16px calc(12px + var(--sicher-unten));
    background: rgba(245, 245, 248, .98); box-shadow: 0 -1px 0 var(--linie), 0 -10px 24px -14px rgba(40, 30, 80, .25); transition: transform .35s var(--feder), opacity .25s; }
  .n-fest-unten .n-knopf { width: 100%; }
  .n-fest-unten.weg { transform: translateY(110%); opacity: 0; pointer-events: none; visibility: hidden; }
}
@media (max-width: 400px) { .n-zur-anmeldung { font-size: 16px; } }
@keyframes n-fuellen { to { transform: none; } }
@keyframes n-tippen { from { max-width: 0; } }
@keyframes n-blinken { 50% { opacity: 0; } }
@keyframes n-sticker { from { opacity: 0; transform: scale(.9); } }
@keyframes n-links { from { transform: translateX(40%); opacity: 0; } }
@keyframes n-rechts { from { transform: translateX(-40%); opacity: 0; } }
@keyframes n-wippen { 50% { transform: translateY(4px); } }
@keyframes n-wippen-hoch { 50% { transform: translateY(-3px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .n-balken .jetzt i { animation: none !important; transform: none !important; }
  .n-seite *, .n-seite *::before, .n-seite *::after { animation: none !important; transition: none !important; }
}

a.n-eingabe { text-decoration: none; color: #5b5b6a; display: block; }
.n-seite .s2-kopiert, .s2-kopiert { color: #10663f; }