/* ==========================================================================
   younity Brand Guidelines 2.0 · Layout der Web- und PDF-Version
   Eine Quelle: am Bildschirm ein scrollbares Handbuch, im Druck 16:9-Seiten
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--yn-font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--yn-ink);
  background: var(--yn-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
em { font-style: normal; color: var(--yn-deep-pink); }
.dark em, .bg-navy em, .bg-night em { color: var(--yn-deep-pink); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.print-only { display: none !important; }

/* ---------- Sidebar (nur Bildschirm) ----------------------------------- */
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: 272px; z-index: 30;
  display: flex; flex-direction: column;
  background: var(--yn-white); border-right: 1px solid var(--yn-border-soft);
  padding: 28px 20px 24px;
  overflow-y: auto;
}
.sidebar__brand { display: flex; align-items: center; justify-content: space-between; padding: 0 12px 4px; }
.sidebar__brand img { width: 112px; }
.lang { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--yn-off-white); }
.lang a { font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: 5px 10px; border-radius: 999px; text-decoration: none; color: var(--yn-text-muted); }
.lang a:hover { color: var(--yn-ink); }
.lang a.is-active { background: #fff; color: var(--yn-ink); box-shadow: 0 1px 3px rgba(29,46,100,.14); }
.sidebar__version { padding: 6px 12px 22px; font-size: 13px; color: var(--yn-text-faint); }
.nav { display: grid; gap: 2px; }
.nav a {
  display: grid; grid-template-columns: 28px 1fr; align-items: center;
  padding: 9px 12px; border-radius: 12px;
  text-decoration: none; font-size: 15px; font-weight: 500; color: var(--yn-text-muted);
  transition: background var(--yn-duration) var(--yn-ease), color var(--yn-duration) var(--yn-ease);
}
.nav a span { font-size: 12px; font-weight: 600; color: var(--yn-text-faint); font-variant-numeric: tabular-nums; }
.nav a:hover { background: var(--yn-off-white); color: var(--yn-ink); }
.nav a.is-active { background: var(--yn-pink-soft); color: var(--yn-deep-pink); }
.nav a.is-active span { color: var(--yn-deep-pink); }
.sidebar__foot { margin-top: auto; padding: 24px 4px 0; display: grid; gap: 10px; }
.sidebar__foot .btn { width: 100%; justify-content: center; }
.menu-toggle { display: none; }

main { margin-left: 272px; }

/* ---------- Buttons (auch als Live-Komponenten im Guide) --------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 36px; border-radius: var(--yn-radius-pill);
  font-size: 15px; font-weight: 600; letter-spacing: 0.01em; line-height: 1;
  text-decoration: none; white-space: nowrap;
  transition: background var(--yn-duration) var(--yn-ease), transform var(--yn-duration) var(--yn-ease), box-shadow var(--yn-duration) var(--yn-ease);
}
.btn--sm { height: 44px; padding: 0 22px; font-size: 14px; }
.btn--primary { background: var(--yn-deep-pink); color: #fff; box-shadow: var(--yn-shadow-button); }
.btn--primary:hover, .btn--primary.is-hover { background: var(--yn-pink-hover); transform: translateY(-1px); }
.btn--secondary { background: #fff; color: var(--yn-space-blue); box-shadow: inset 0 0 0 1px var(--yn-border), 0 8px 20px -12px rgba(29,46,100,.35); }
.btn--secondary:hover, .btn--secondary.is-hover { box-shadow: inset 0 0 0 1px var(--yn-space-blue), 0 8px 20px -12px rgba(29,46,100,.35); }
.btn--ghost-light { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); }
.btn--ghost-light:hover { box-shadow: inset 0 0 0 1px #fff; }
.btn[disabled], .btn.is-disabled { background: var(--yn-border-soft); color: var(--yn-text-faint); box-shadow: none; cursor: not-allowed; transform: none; }
.btn .i { width: 16px; height: 16px; }
.link { display: inline-flex; align-items: center; gap: 8px; color: var(--yn-deep-pink); font-weight: 600; font-size: 15px; text-decoration: none; }
.link:hover { text-decoration: underline; text-underline-offset: 4px; }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--yn-pink-soft); color: var(--yn-deep-pink); }
.icon-btn--navy { background: var(--yn-space-blue); color: #fff; }
.icon-btn--white { background: #fff; color: var(--yn-deep-pink); }

/* Icon als Maske, damit Farbe über currentColor steuerbar ist */
.i { display: inline-block; width: 24px; height: 24px; flex: none; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }

/* ---------- Seiten --------------------------------------------------------- */
.page {
  position: relative;
  padding: 88px clamp(24px, 6vw, 96px);
  background: var(--yn-white);
  overflow: hidden;
}
.page + .page { border-top: 1px solid var(--yn-border-soft); }
.page.bg-light { background: var(--yn-light-blue); border-top-color: transparent; }
.page.bg-pink { background: var(--yn-light-pink); border-top-color: transparent; }
.page.bg-off { background: var(--yn-off-white); border-top-color: transparent; }
.page.bg-navy { background: var(--yn-space-blue); color: #fff; border-top-color: transparent; }
.page.bg-night { background: var(--yn-night); color: #fff; border-top-color: transparent; }
.bg-light + .page, .bg-pink + .page, .bg-navy + .page, .bg-off + .page { border-top-color: transparent; }
.inner { max-width: 1264px; margin: 0 auto; }

/* Seitenkopf */
.meta { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--yn-text-muted); }
.bg-navy .meta, .dark .meta { color: var(--yn-text-on-dark-muted); }
.label-s { font-size: 15px; font-weight: 600; color: var(--yn-space-blue); }
.accent { display: block; width: 64px; height: 5px; border-radius: 999px; background: var(--yn-deep-pink); }
.ph { margin-bottom: 44px; }
.ph h2, .h-page { font-size: 44px; line-height: 1.08; font-weight: 700; letter-spacing: -0.03em; max-width: 900px; text-wrap: balance; }
.ph .lead { margin-top: 18px; }
.ph--split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: end; }
.ph--split .lead { margin-top: 0; }
.lead { font-size: 19px; line-height: 1.6; color: var(--yn-text-muted); max-width: 680px; text-wrap: pretty; }
.bg-navy .lead, .bg-night .lead { color: var(--yn-text-on-dark-muted); }
.txt { font-size: 15.5px; line-height: 1.6; color: var(--yn-text-muted); text-wrap: pretty; }
.txt + .txt { margin-top: 10px; }
.bg-navy .txt { color: var(--yn-text-on-dark-muted); }
.h3 { font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--yn-ink); }
.bg-navy .h3 { color: #fff; }
.h4 { font-size: 16px; line-height: 1.35; font-weight: 600; color: var(--yn-ink); }
.cap { font-size: 13px; line-height: 1.5; color: var(--yn-text-faint); }
.cap strong { color: var(--yn-ink); font-weight: 600; }
.bg-navy .cap { color: var(--yn-text-on-dark-muted); }
.bg-navy .cap strong { color: #fff; }
.mt-s { margin-top: 12px; } .mt-m { margin-top: 24px; } .mt-l { margin-top: 40px; }

/* Raster */
.g { display: grid; gap: 24px; }
.g > * { min-width: 0; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.g-12-8 { grid-template-columns: 1.5fr 1fr; }
.g-8-12 { grid-template-columns: 1fr 1.5fr; }
.gap-s { gap: 14px; } .gap-l { gap: 40px; } .gap-xl { gap: 64px; }
.center { align-items: center; }
.end { align-items: end; }

.card { background: var(--yn-light-blue); border-radius: var(--yn-radius-lg); padding: 28px; }
.bg-light .card, .bg-pink .card { background: #fff; }
.card--white { background: #fff; box-shadow: inset 0 0 0 1px var(--yn-border-soft); }
.card--navy { background: var(--yn-space-blue); color: #fff; }
.card--navy .txt { color: var(--yn-text-on-dark-muted); }
.card--navy .h3 { color: #fff; }

/* Listen mit Punkt */
.dots { display: grid; gap: 10px; }
.dots li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.55; color: var(--yn-text-muted); }
.dots li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--yn-deep-pink); }
.dots li strong { color: var(--yn-ink); font-weight: 600; }
.bg-navy .dots li { color: var(--yn-text-on-dark-muted); }
.bg-navy .dots li strong { color: #fff; }

/* Do / Don't Marker */
.mark { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; flex: none; color: #fff; }
.mark svg { width: 14px; height: 14px; }
.mark--do { background: var(--yn-space-blue); }
.mark--dont { background: var(--yn-deep-pink); }
.bg-navy .mark--do { background: #fff; color: var(--yn-space-blue); }
.label { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: 13.5px; line-height: 1.45; color: var(--yn-text-muted); }
.label strong { display: block; color: var(--yn-ink); font-weight: 600; }

/* Kacheln für Logos und Beispiele */
.tile { position: relative; display: grid; place-items: center; border-radius: var(--yn-radius-lg); overflow: hidden; aspect-ratio: 16 / 10; padding: 12%; }
.tile img.logo { width: 100%; height: auto; }
.tile--sq { aspect-ratio: 1; padding: 22%; }
.tile--wide { aspect-ratio: 16 / 7; }
.t-white { background: #fff; box-shadow: inset 0 0 0 1px var(--yn-border-soft); }
.t-light { background: var(--yn-light-blue); }
.t-pink { background: var(--yn-light-pink); }
.t-navy { background: var(--yn-space-blue); }
.t-deep { background: var(--yn-deep-pink); }
.t-black { background: #000; }
.t-photo { background-size: cover; background-position: center; }
.tile .corner { position: absolute; left: 12px; top: 12px; }
.bg-light .t-light { background: #fff; }

/* ---------- Kapiteltrenner ------------------------------------------------ */
.divider { background: var(--yn-space-blue); color: #fff; min-height: 520px; display: flex; align-items: flex-end; border-top: 0 !important; }
.divider .inner { width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 40px; position: relative; z-index: 2; }
.divider h2 { font-size: 88px; line-height: 1; font-weight: 700; letter-spacing: -0.035em; }
.divider .lead { margin-top: 24px; font-size: 21px; max-width: 620px; color: var(--yn-text-on-dark-muted); }

.divider .num { font-size: 300px; line-height: .78; font-weight: 300; letter-spacing: -0.06em; color: #fff; font-variant-numeric: tabular-nums; }

.orbit-deco { position: absolute; right: -180px; top: -260px; width: 860px; height: 860px; pointer-events: none; z-index: 1; }
.orbit-deco { color: rgba(255,255,255,.08); }
.divider::before { content: ""; position: absolute; left: clamp(24px, 6vw, 96px); top: 56px; width: 116px; height: 36px; background: url("../logo/younity-wortmarke-weiss.svg") left center / contain no-repeat; z-index: 2; }

/* ---------- Cover ---------------------------------------------------------- */
.cover { background: var(--yn-space-blue); color: #fff; min-height: 760px; display: flex; flex-direction: column; border-top: 0; }
.cover__top { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 3; }
.cover__top img { width: 150px; }
.cover__brand { display: flex; align-items: center; gap: 18px; }
.cover__brand b { font-size: 15px; font-weight: 500; color: var(--yn-text-on-dark-muted); padding-left: 18px; border-left: 1px solid rgba(255,255,255,.25); }
.cover .accent { margin-bottom: 28px; }
.cover__top span { font-size: 14px; color: var(--yn-text-on-dark-muted); }
.cover__body { flex: 1; display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 24px; position: relative; z-index: 2; }
.cover h1 { font-size: 88px; line-height: 1.0; font-weight: 700; letter-spacing: -0.035em; margin: 0 0 28px; text-wrap: balance; }
.cover .lead { color: var(--yn-text-on-dark-muted); font-size: 20px; max-width: 560px; }
.cover__meta { position: relative; z-index: 3; display: flex; gap: 28px; font-size: 13px; color: var(--yn-text-on-dark-muted); }
.cover__meta b { color: #fff; font-weight: 600; }

/* Orbit-Grafik (Cover, Gestaltungselemente) */
.orbit { position: relative; width: 100%; aspect-ratio: 1; max-width: 620px; margin-left: auto; }
.orbit .ring { position: absolute; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.10); inset: var(--in); }
.orbit .core { position: absolute; inset: 34%; border-radius: 50%; display: grid; place-items: center; background: var(--yn-navy-800); }
.orbit .core img { width: 74%; }
.orbit .av { position: absolute; width: var(--s, 64px); height: var(--s, 64px); border-radius: 50%; overflow: hidden; left: var(--x); top: var(--y); transform: translate(-50%, -50%); box-shadow: 0 0 0 4px rgba(255,255,255,.95), 0 16px 30px -12px rgba(0,0,0,.5); background: var(--yn-light-blue); }
.orbit .av img { width: 100%; height: 100%; object-fit: cover; }
.orbit--light .ring { border-color: rgba(29,46,100,.12); }
.orbit--light .core { background: radial-gradient(circle, #f6d3e6 0%, rgba(252,231,242,0) 70%); }
.orbit--light .core img { filter: none; }

/* ---------- Inhalt --------------------------------------------------------- */
.toc { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; }
.toc a { display: grid; grid-template-columns: 56px 1fr auto; align-items: baseline; gap: 2px 8px; padding: 11px 0; border-bottom: 1px solid var(--yn-border-soft); text-decoration: none; }
.toc a:hover h3 { color: var(--yn-deep-pink); }
.toc .n { font-size: 22px; font-weight: 700; color: var(--yn-deep-pink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.toc h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; transition: color var(--yn-duration); }
.toc p { grid-column: 2; font-size: 14px; color: var(--yn-text-muted); line-height: 1.4; }
.toc .pg { grid-row: 1; grid-column: 3; font-size: 14px; color: var(--yn-text-faint); font-variant-numeric: tabular-nums; }

/* Auf einen Blick */
.glance .card { display: flex; flex-direction: column; min-height: 248px; padding: 26px; }
.glance .card .h4 { margin-top: auto; padding-top: 16px; }
.glance .card .txt { font-size: 14.5px; margin-top: 4px; }
.glance .vis { flex: 1; display: grid; place-items: center start; }
.sw-row { display: flex; gap: 8px; }
.sw-row span { width: 46px; height: 46px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(29,46,100,.08); }

/* Statistiken */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat { border-top: 2px solid var(--yn-border); padding-top: 18px; }
.stat:first-child { border-top-color: var(--yn-deep-pink); }
.stat b { display: block; font-size: 56px; line-height: 1; font-weight: 700; letter-spacing: -0.04em; color: var(--yn-space-blue); }
.stat span { display: block; margin-top: 10px; font-size: 14px; color: var(--yn-text-muted); }

/* Bilder */
.ph-img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--yn-radius-lg); }
.fig { border-radius: var(--yn-radius-lg); overflow: hidden; position: relative; background: var(--yn-light-blue); }
.fig img { width: 100%; height: 100%; object-fit: cover; }
.fig figcaption { position: absolute; left: 14px; bottom: 14px; background: #fff; color: var(--yn-ink); font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px; box-shadow: var(--yn-shadow-badge); }
.arch { border-radius: 999px 999px var(--yn-radius-lg) var(--yn-radius-lg); overflow: hidden; }
.arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.circle { border-radius: 50%; overflow: hidden; aspect-ratio: 1; }
.circle img { width: 100%; height: 100%; object-fit: cover; }

/* Werte */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.value .word { font-size: 84px; line-height: 1; font-weight: 700; letter-spacing: -0.04em; color: var(--yn-space-blue); margin-bottom: 18px; }
.value .word.l { font-weight: 300; }
.value .word.m { font-weight: 500; }
.isnt { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px; background: #fff; font-size: 14.5px; font-weight: 500; color: var(--yn-ink); box-shadow: inset 0 0 0 1px var(--yn-border-soft); }
.chip--muted { background: transparent; color: var(--yn-text-faint); text-decoration: line-through; text-decoration-color: rgba(229,0,125,.6); }

/* ---------- Logo ----------------------------------------------------------- */
.logo-hero { display: grid; grid-template-columns: 1.7fr 1fr; gap: 24px; }
.logo-hero .tile { aspect-ratio: auto; height: 300px; padding: 0; }
.logo-hero .wm { width: 64%; }
.logo-hero .sg { width: 46%; }
.rule-note { display: flex; gap: 14px; align-items: center; margin-top: 24px; background: var(--yn-pink-soft); border-radius: var(--yn-radius-lg); padding: 18px 22px; font-size: 15.5px; line-height: 1.5; color: var(--yn-ink); }
.rule-note .i { color: var(--yn-deep-pink); }

.variants { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.variants .tile { aspect-ratio: 4 / 3; padding: 16%; }

/* Schutzraum-Diagramm */
.clear { display: grid; grid-template-columns: 1.55fr 1fr; gap: 24px; }
.clear .stage { background: #fff; border-radius: var(--yn-radius-lg); box-shadow: inset 0 0 0 1px var(--yn-border-soft); display: grid; place-items: center; height: 320px; position: relative; }
.bg-light .clear .stage { box-shadow: none; }
.cs { position: relative; outline: 1.5px dashed rgba(229,0,125,.65); background: repeating-linear-gradient(45deg, rgba(229,0,125,.06) 0 6px, transparent 6px 12px); }
.cs .inner-logo { background: #fff; outline: 1px solid rgba(29,46,100,.18); }
.cs .x { position: absolute; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--yn-deep-pink); }
.minsizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px; }
.minsizes .card { display: flex; gap: 22px; align-items: center; padding: 22px 24px; }
.minsizes .v { flex: none; display: grid; place-items: center; width: 110px; height: 56px; background: #fff; border-radius: 12px; }
.bg-light .minsizes .card { background: #fff; }
.bg-light .minsizes .v { background: var(--yn-light-blue); }
.minsizes b { display: block; font-size: 17px; color: var(--yn-ink); }
.minsizes span { font-size: 13.5px; color: var(--yn-text-muted); line-height: 1.45; display: block; }

.dont .tile { aspect-ratio: 16 / 10; padding: 14%; }
.dont .label { margin-top: 10px; }

/* Co-Branding */
.cobrand { display: flex; align-items: center; gap: 28px; padding: 30px 34px; background: #fff; border-radius: var(--yn-radius-lg); }
.cobrand img { width: 150px; }
.cobrand .sep { width: 1px; align-self: stretch; background: var(--yn-border); }
.cobrand .partner { height: 46px; width: 150px; border-radius: 12px; border: 1.5px dashed var(--yn-border); display: grid; place-items: center; font-size: 13px; color: var(--yn-text-faint); font-weight: 600; }
.place { position: relative; aspect-ratio: 4 / 5; border-radius: 24px; background: var(--yn-space-blue); overflow: hidden; }
.place { background-size: cover; background-position: center; }
.place .m { position: absolute; border: 1.5px dashed rgba(255,255,255,.7); inset: 7.5%; border-radius: 0; }
.place .sig { position: absolute; right: 7.5%; top: 7.5%; width: 9%; }
.place .wm { position: absolute; left: 7.5%; top: 7.5%; width: 26%; }

/* ---------- Farben --------------------------------------------------------- */
.swatches-main { display: grid; grid-template-columns: 1.3fr 1.1fr 1fr; gap: 24px; }
.swatches-main .swatch .c { min-height: 300px; }
.swatch { border-radius: var(--yn-radius-lg); overflow: hidden; display: flex; flex-direction: column; background: #fff; box-shadow: inset 0 0 0 1px var(--yn-border-soft); }
.swatch .c { background: var(--c); color: var(--t, #fff); padding: 26px 28px; min-height: 250px; display: flex; flex-direction: column; justify-content: space-between; }
.swatch .c .name { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.swatch .c .desc { font-size: 14.5px; max-width: 320px; line-height: 1.5; }
.swatch .meta { padding: 18px 28px 22px; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 24px; row-gap: 2px; }
.swatch .meta dt { font-size: 12px; font-weight: 600; color: var(--yn-text-faint); }
.swatch .meta.meta--4 { grid-template-columns: repeat(2, auto); row-gap: 12px; column-gap: 40px; }
.swatch .meta--4 > div { display: grid; gap: 2px; }
.swatch .meta dd { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--yn-ink); white-space: nowrap; }
.copy { position: relative; border-radius: 999px; padding: 0 2px; margin: 0 -2px; transition: background var(--yn-duration); }
.copy:hover { background: var(--yn-pink-soft); color: var(--yn-deep-pink); }
html[lang="en"] .copy.is-copied::after { content: "Copied"; }
.copy.is-copied::after { content: "Kopiert"; position: absolute; left: 100%; top: 50%; transform: translate(8px, -50%); font-size: 11px; font-weight: 600; background: var(--yn-space-blue); color: #fff; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }

.swatches-sec { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.swatches-sec .swatch .c { min-height: 128px; padding: 20px 24px; }
.swatches-sec .swatch .c .name { font-size: 21px; }
.swatches-sec .swatch .meta { padding: 14px 24px 18px; }
.swatches-ext { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; }
.mini { display: flex; flex-direction: column; gap: 10px; }
.mini .c { height: 64px; border-radius: 12px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(29,46,100,.08); }
.mini b { font-size: 13.5px; font-weight: 600; display: block; line-height: 1.3; }
.mini span { font-size: 12.5px; color: var(--yn-text-muted); display: block; line-height: 1.4; }

.gradient-bar { height: 120px; border-radius: var(--yn-radius-lg); background: var(--yn-gradient-brand); position: relative; }
.stops { position: relative; height: 54px; margin-top: 10px; }
.stops span { position: absolute; top: 0; transform: translateX(-50%); font-size: 13px; color: var(--yn-text-muted); text-align: center; line-height: 1.35; }
.stops span::before { content: ""; display: block; width: 2px; height: 12px; margin: 0 auto 6px; background: var(--yn-border); }
.stops b { color: var(--yn-ink); font-weight: 600; }

.ratio { display: flex; height: 92px; border-radius: var(--yn-radius-lg); overflow: hidden; }
.ratio div { display: flex; flex-direction: column; justify-content: flex-end; padding: 14px 18px; font-size: 13px; line-height: 1.35; }
.ratio b { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.combo { aspect-ratio: 1; border-radius: 24px; display: grid; place-items: center; position: relative; }
.combo i { width: 44%; aspect-ratio: 1; border-radius: 50%; }
.combo .mark { position: absolute; right: 10px; bottom: 10px; width: 24px; height: 24px; }
.combo .mark svg { width: 12px; height: 12px; }

.contrast { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
.cr { display: grid; grid-template-columns: 56px 1fr auto auto; align-items: center; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(29,46,100,.08); }
.cr .s { width: 56px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; font-size: 17px; }
.cr .d { font-size: 14.5px; line-height: 1.35; color: var(--yn-ink); }
.cr .d small { display: block; font-size: 12.5px; color: var(--yn-text-muted); }
.cr .r { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--yn-ink); }
.pill-res { font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.pill-res.ok { background: var(--yn-space-blue); color: #fff; }
.pill-res.large { background: #fff; color: var(--yn-space-blue); box-shadow: inset 0 0 0 1px var(--yn-space-blue); }
.pill-res.no { background: var(--yn-deep-pink); color: #fff; }

/* ---------- Typografie ----------------------------------------------------- */
.specimen { display: grid; grid-template-columns: 1fr 1.25fr; gap: 56px; align-items: center; }
.specimen .aa { margin-top: 10px; font-size: 330px; line-height: .8; font-weight: 700; letter-spacing: -0.05em; color: var(--yn-space-blue); }
.specimen .glyphs { font-size: 40px; line-height: 1.25; letter-spacing: -0.01em; color: var(--yn-ink); }
.specimen .nums { font-size: 40px; letter-spacing: .06em; color: var(--yn-ink); margin-bottom: 16px; font-weight: 300; }
.weights { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.weights span { font-size: 15px; padding: 8px 16px; border-radius: 999px; background: #fff; }

.roles { display: grid; gap: 0; }
.role { display: grid; grid-template-columns: 190px 1fr 1.25fr; gap: 28px; align-items: center; padding: 17px 0; border-bottom: 1px solid var(--yn-border-soft); }
.role:first-child { border-top: 1px solid var(--yn-border-soft); }
.role .w { font-size: 14px; color: var(--yn-text-faint); }
.role .w b { display: block; font-size: 17px; color: var(--yn-ink); font-weight: 600; }
.role .use { font-size: 14.5px; color: var(--yn-text-muted); line-height: 1.45; }
.role .ex { font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; color: var(--yn-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.scale { display: grid; }
.sc { display: grid; grid-template-columns: 120px 210px 1fr; gap: 24px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--yn-border-soft); }
.sc .k { font-size: 13px; font-weight: 600; color: var(--yn-deep-pink); letter-spacing: .04em; }
.sc .v { font-size: 13px; color: var(--yn-text-muted); font-variant-numeric: tabular-nums; }
.sc .e { color: var(--yn-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sig-demo { border-radius: var(--yn-radius-lg); padding: 44px 44px; min-height: 280px; }
.sig-demo .h { font-size: 52px; line-height: 1.05; font-weight: 700; letter-spacing: -0.03em; }
.sig-demo.navy { background: var(--yn-space-blue); color: #fff; }

.sig-demo.white { background: #fff; box-shadow: inset 0 0 0 1px var(--yn-border-soft); }
.bg-light .sig-demo.white, .bg-pink .sig-demo.white { box-shadow: none; }

.tdont { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tdont .tile { aspect-ratio: auto; height: 150px; padding: 0 10px; font-size: 28px; font-weight: 700; color: var(--yn-space-blue); letter-spacing: -0.02em; }
.tdont .label { margin-top: 8px; font-size: 13px; }

/* ---------- Bildwelt -------------------------------------------------------- */
.principles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.principles .fig { aspect-ratio: 4 / 4.2; margin-bottom: 18px; }
.principles .txt { font-size: 14.5px; margin-top: 6px; }
.portraits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.portraits .stage { border-radius: var(--yn-radius-lg); padding: 22px 22px 0; display: flex; align-items: flex-end; justify-content: center; height: 320px; }
.portraits .arch { width: 100%; height: 100%; border-radius: 999px 999px 0 0; }
.avatars { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.avatar-chip { display: inline-flex; align-items: center; gap: 10px; padding: 5px 16px 5px 5px; border-radius: 999px; background: #fff; font-size: 14.5px; font-weight: 600; color: var(--yn-ink); box-shadow: 0 6px 14px -8px rgba(29,46,100,.25); }
.avatar-chip img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.bg-light .avatar-chip { box-shadow: none; }

.masonry { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: 250px 250px; gap: 18px; }
.masonry .fig:first-child { grid-row: span 2; }
.masonry figcaption { font-weight: 600; }

.shapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.shape-box { height: 230px; border-radius: var(--yn-radius-lg); background: var(--yn-light-blue); display: grid; place-items: center; }
.bg-light .shape-box { background: #fff; }
.overlay-demo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ov { position: relative; border-radius: var(--yn-radius-lg); overflow: hidden; height: 190px; }
.ov img { width: 100%; height: 100%; object-fit: cover; }
.ov.on::after { content: ""; position: absolute; inset: 0; background: linear-gradient(170deg, rgba(229,0,125,.78) 0%, rgba(120,30,110,.6) 45%, rgba(29,46,100,.82) 100%); mix-blend-mode: multiply; }
.ov.on::before { content: ""; position: absolute; inset: 0; background: rgba(29,46,100,.12); z-index: 1; }
.ov span { position: absolute; left: 12px; bottom: 12px; z-index: 2; font-size: 12px; font-weight: 600; background: #fff; color: var(--yn-ink); padding: 5px 12px; border-radius: 999px; }

.illus { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.illus .card { background: #fff; display: grid; place-items: center; height: 230px; padding: 18px; }
.illus .card img { max-height: 190px; width: auto; }

/* ---------- Gestaltungselemente ------------------------------------------- */
.forms-art { position: relative; height: 470px; background: #fff; border-radius: var(--yn-radius-lg); overflow: hidden; }
.forms-art i { position: absolute; background: var(--yn-space-blue); }
.forms-legend { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 22px; }
.forms-legend div { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 13px; color: var(--yn-text-muted); font-weight: 500; }
.forms-legend i { display: block; background: var(--yn-deep-pink); }
.el-card { border-radius: var(--yn-radius-lg); overflow: hidden; display: flex; flex-direction: column; background: var(--yn-light-blue); }
.el-card .vis { height: 290px; position: relative; overflow: hidden; display: grid; place-items: center; }
.el-card .body { padding: 22px 24px 24px; }
.el-card .txt { font-size: 14.5px; margin-top: 6px; }

/* ---------- Icons ----------------------------------------------------------- */
.icon-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px 8px; }
.icon-cell { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 4px 14px; border-radius: 12px; }
.icon-cell .i { width: 50px; height: 50px; color: var(--yn-space-blue); }
.icon-cell span { font-size: 12px; color: var(--yn-text-muted); text-align: center; line-height: 1.3; }
.icon-panel { background: var(--yn-space-blue); border-radius: var(--yn-radius-lg); padding: 26px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 10px; place-items: center; }
.icon-panel .i { width: 48px; height: 48px; color: #fff; }
.icon-sizes { display: flex; align-items: flex-end; gap: 26px; }
.icon-sizes div { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; color: var(--yn-text-muted); }
.ui-icons { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.ui-icons div { height: 64px; border-radius: 12px; background: #fff; display: grid; place-items: center; color: var(--yn-ink); }
.ui-icons .i { width: 24px; height: 24px; }

/* ---------- UI-Komponenten -------------------------------------------------- */
.comp { border-radius: var(--yn-radius-lg); padding: 30px; background: var(--yn-off-white); }
.bg-light .comp { background: #fff; }
.comp.navy { background: var(--yn-space-blue); color: #fff; }
.comp-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.spec { margin-top: 18px; display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; font-size: 13.5px; }
.spec dt { color: var(--yn-text-faint); }
.spec dd { color: var(--yn-ink); font-weight: 500; }
.comp.navy .spec dt { color: var(--yn-text-on-dark-muted); }
.comp.navy .spec dd { color: #fff; }

.input { height: 52px; border-radius: 999px; background: #fff; border: 1px solid var(--yn-border); padding: 0 22px; font: inherit; font-size: 16px; color: var(--yn-ink); width: 100%; }
.input::placeholder { color: var(--yn-text-faint); }
.input:focus { outline: none; border-color: var(--yn-deep-pink); box-shadow: 0 0 0 4px var(--yn-pink-soft); }
.form-demo { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; padding: 10px; border-radius: 999px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; margin-top: 14px; }
.check i { width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--yn-deep-pink); display: grid; place-items: center; color: #fff; margin-top: 1px; }
.check i svg { width: 12px; }
.badge { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 999px; background: var(--yn-deep-pink); color: #fff; font-size: 12px; font-weight: 600; box-shadow: 0 8px 18px -8px rgba(229,0,125,.6); }
.badge--navy { background: var(--yn-space-blue); box-shadow: var(--yn-shadow-badge); }
.badge--soft { background: var(--yn-pink-soft); color: var(--yn-deep-pink); box-shadow: none; }
.tagname { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 999px; background: #fff; color: var(--yn-ink); font-size: 12.5px; font-weight: 600; box-shadow: var(--yn-shadow-badge); }
.stars { display: flex; gap: 4px; color: var(--yn-deep-pink); }
.stars svg { width: 18px; height: 18px; fill: currentColor; }
.acc { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: #fff; border-radius: 24px; padding: 18px 20px 18px 26px; font-size: 17px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--yn-border-soft); }
.acc .icon-btn { width: 32px; height: 32px; }
.acc .icon-btn .i { width: 16px; height: 16px; }

.pcard { background: #fff; border-radius: 24px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--yn-border-soft), 0 2px 6px rgba(29,46,100,.04); display: flex; flex-direction: column; }
.pcard .img { position: relative; height: 230px; }
.pcard .img img { width: 100%; height: 100%; object-fit: cover; }
.pcard .img .badge { position: absolute; left: 14px; top: 14px; }
.pcard .img .tagname { position: absolute; left: 14px; bottom: 14px; }
.pcard .body { padding: 20px 22px 22px; flex: 1; display: flex; flex-direction: column; }
.pcard .type { font-size: 13px; font-weight: 500; color: var(--yn-text-muted); }
.pcard h4 { font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; margin: 6px 0 6px; }
.pcard p { font-size: 14px; color: var(--yn-text-muted); line-height: 1.5; }
.pcard .foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--yn-border-soft); display: flex; justify-content: space-between; align-items: center; }
.pcard .price { text-align: right; font-size: 12px; color: var(--yn-text-faint); line-height: 1.2; }
.pcard .price s { color: var(--yn-text-faint); }
.pcard .price b { display: block; font-size: 19px; color: var(--yn-ink); font-weight: 700; }
.ccard { border-radius: 24px; padding: 26px; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.ccard h4 { font-size: 26px; line-height: 1.1; font-weight: 700; letter-spacing: -0.025em; margin-top: 10px; max-width: 260px; }
.ccard p { font-size: 14.5px; margin-top: 10px; line-height: 1.5; max-width: 250px; }
.ccard .icon-btn { position: absolute; right: 20px; top: 20px; }
.ccard img.ill { position: absolute; right: 0; bottom: 0; width: 54%; }
.tcard { background: var(--yn-light-blue); border-radius: 24px; padding: 26px; }
.tcard p { font-size: 15.5px; line-height: 1.6; color: var(--yn-ink); margin-top: 14px; }
.tcard .who { font-size: 13px; color: var(--yn-text-muted); margin-top: 14px; }

.spacing { display: flex; align-items: flex-end; gap: 10px; height: 150px; }
.spacing div { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; color: var(--yn-text-muted); font-variant-numeric: tabular-nums; }
.spacing i { display: block; width: 26px; background: var(--yn-deep-pink); border-radius: 999px; opacity: .85; }
.radii { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.radii b { color: var(--yn-ink); font-weight: 600; }
.radii div { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; color: var(--yn-text-muted); }
.radii i { display: block; height: 76px; background: var(--yn-light-blue); box-shadow: inset 0 0 0 2px var(--yn-space-blue); }
.shadows { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.shadows div { height: 86px; border-radius: 24px; background: #fff; display: grid; place-items: center; font-size: 12.5px; color: var(--yn-text-muted); }

.code { background: var(--yn-night); color: #CFD4E6; border-radius: var(--yn-radius-lg); padding: 26px 30px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; line-height: 1.7; overflow: auto; white-space: pre; position: relative; }
.code .c1 { color: #8C93B3; }
.code .p { color: #CFD4E6; }
.code .v { color: #fff; font-weight: 600; }
.code-copy { position: absolute; right: 14px; top: 14px; font-family: var(--yn-font); font-size: 12px; font-weight: 600; color: #fff; background: rgba(255,255,255,.1); padding: 6px 12px; border-radius: 999px; }

/* ---------- Tonalität ------------------------------------------------------- */
.tone { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.tone .card { display: flex; flex-direction: column; padding: 26px; }
.tone .h3 { margin-bottom: 8px; }
.say { margin-top: 18px; border-radius: 12px; padding: 14px 16px; font-size: 15px; line-height: 1.45; font-weight: 500; }
.say small { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.say.yes { background: #fff; color: var(--yn-ink); }
.say.yes small { color: var(--yn-space-blue); }
.say.no { background: transparent; color: var(--yn-text-muted); box-shadow: inset 0 0 0 1px var(--yn-border); margin-top: 10px; }
.say.no small { color: var(--yn-deep-pink); }
.wording { width: 100%; border-collapse: collapse; font-size: 15px; }
.wording th { text-align: left; font-size: 13px; font-weight: 600; color: var(--yn-text-faint); padding: 0 0 10px; }
.wording td { padding: 11px 0; border-top: 1px solid rgba(29,46,100,.1); vertical-align: top; }
.wording td:first-child { font-weight: 600; color: var(--yn-ink); padding-right: 24px; }
.wording td:last-child { color: var(--yn-text-muted); }

/* ---------- Anwendungen ----------------------------------------------------- */
.browser { border-radius: 24px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -30px rgba(29,46,100,.45), 0 0 0 1px var(--yn-border-soft); }
.browser .bar { height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: var(--yn-off-white); border-bottom: 1px solid var(--yn-border-soft); }
.browser .bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--yn-border); }
.browser .bar span { margin-left: 14px; font-size: 11.5px; color: var(--yn-text-faint); background: #fff; padding: 3px 14px; border-radius: 999px; }
.browser img { width: 100%; }
.mock { border-radius: 12px; overflow: hidden; box-shadow: 0 24px 48px -26px rgba(29,46,100,.5); }
.mock img { width: 100%; height: auto; }
.mock-cap { margin-top: 12px; font-size: 13px; color: var(--yn-text-muted); }
.mock-cap strong { color: var(--yn-ink); font-weight: 600; }
.bg-navy .mock-cap { color: var(--yn-text-on-dark-muted); }
.bg-navy .mock-cap strong { color: #fff; }

/* ---------- Service --------------------------------------------------------- */
.checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 40px; }
.checklist li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 24px; background: var(--yn-light-blue); font-size: 15.5px; line-height: 1.45; color: var(--yn-ink); }
.checklist li .box { width: 24px; height: 24px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--yn-deep-pink); background: #fff; margin-top: 1px; cursor: pointer; display: grid; place-items: center; color: #fff; transition: background var(--yn-duration); }
.checklist li .box svg { width: 14px; opacity: 0; }
.checklist li.done .box { background: var(--yn-deep-pink); }
.checklist li.done .box svg { opacity: 1; }
.checklist li small { display: block; color: var(--yn-text-muted); font-size: 13.5px; margin-top: 2px; }
.dl { display: grid; gap: 10px; }
.dl a, .dl div.row { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 24px; background: #fff; text-decoration: none; transition: box-shadow var(--yn-duration); }
.dl a:hover { box-shadow: inset 0 0 0 1.5px var(--yn-deep-pink); }
.dl .icon-btn { width: 44px; height: 44px; }
.dl b { display: block; font-size: 15.5px; font-weight: 600; color: var(--yn-ink); }
.dl span { font-size: 13px; color: var(--yn-text-muted); }
.dl em { font-size: 13px; font-weight: 600; }
.versions { display: grid; gap: 12px; }
.versions div { display: grid; grid-template-columns: 70px 1fr; gap: 14px; font-size: 14px; line-height: 1.5; color: var(--yn-text-muted); }
.versions b { color: var(--yn-ink); font-weight: 700; }
.owner { border-radius: 24px; padding: 18px 20px; background: var(--yn-space-blue); color: #fff; font-size: 14.5px; line-height: 1.55; }
.owner b { color: #fff; }
.fill { display: inline-block; min-width: 180px; border-bottom: 1.5px dashed rgba(255,255,255,.5); color: var(--yn-text-on-dark-muted); font-style: italic; }

.backcover { background: var(--yn-space-blue); color: #fff; min-height: 640px; display: grid; place-items: center; text-align: center; border-top: 0 !important; }
.backcover .sg { width: 110px; margin: 0 auto 40px; }
.backcover em, .divider em, .cover em, .sig-demo.navy em, .hero-demo.good em { color: var(--yn-deep-pink); }
.backcover h2 { font-size: 72px; line-height: 1.02; font-weight: 700; letter-spacing: -0.035em; text-wrap: balance; }
.backcover p { margin-top: 28px; color: var(--yn-text-on-dark-muted); font-size: 15px; }

/* Claim: immer einzeilig */
.claim, .cover h1.claim, .backcover h2.claim, .h-page.claim { white-space: nowrap; text-wrap: nowrap; }
.claim-wrap { container-type: inline-size; }
/* Schriftgrösse folgt der Spaltenbreite: der Claim ist rund 7 × so breit wie seine Schriftgrösse */
.cover h1.claim { font-size: min(88px, 13.6cqw); }
.h-page.claim--page { font-size: min(80px, 13.6cqw); line-height: 1; }

/* Beispiel Baukasten vs. younity */
.hero-demo { position: relative; overflow: hidden; border-radius: 24px; padding: 26px; height: 380px; background: var(--yn-space-blue); color: #fff; }
.hero-demo.bad { background: radial-gradient(circle at 85% 15%, #7b2fd0 0%, #3d2b8c 32%, #1D2E64 68%); }
.hd-badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.hd-eye { margin-top: 18px; font-size: 10.5px; font-weight: 600; letter-spacing: .16em; color: var(--yn-deep-pink); }
.hd-h { position: relative; font-size: 32px; line-height: 1.05; font-weight: 700; letter-spacing: -0.03em; margin-top: 10px; max-width: 270px; }
.hd-pink { color: var(--yn-deep-pink); }
.hd-t { position: relative; font-size: 13.5px; line-height: 1.5; color: var(--yn-text-on-dark-muted); margin-top: 12px; max-width: 260px; }
.hd-btns { display: flex; gap: 8px; margin-top: 18px; }
.hd-b1, .hd-b2 { font-size: 12.5px; font-weight: 600; padding: 10px 16px; border-radius: 999px; }
.hd-b1 { background: linear-gradient(90deg, #E5007D, #7b2fd0); box-shadow: 0 0 24px rgba(229,0,125,.6); }
.hd-b2 { background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.hero-demo.good .hd-h { margin-top: 0; max-width: 250px; }
.hd-orbit { position: absolute; right: -150px; bottom: -150px; width: 420px; height: 420px; color: rgba(255,255,255,.08); }
.hd-arch { position: absolute; right: 22px; bottom: 0; width: 104px; height: 150px; border-radius: 999px 999px 0 0; overflow: hidden; background: var(--yn-light-pink); }
.hd-arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }

/* Seitenfuss (nur Druck, per Skript eingefügt) */
.pf { display: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media screen and (max-width: 1280px) {
  .value .word { font-size: 56px; }
  .swatches-main { grid-template-columns: 1fr 1fr; }
  .swatches-main .swatch:last-child { grid-column: span 2; }
  .sc .e { white-space: normal; }
  .minsizes, .swatches-sec { grid-template-columns: 1fr 1fr; }
  .tdont .tile { font-size: 22px; }
  .ph h2, .h-page { font-size: 40px; }
  .divider h2 { font-size: 72px; }
  .divider .num { font-size: 220px; }
  .cover h1 { font-size: 62px; }
  .icon-grid { grid-template-columns: repeat(6, 1fr); }
  .swatches-ext { grid-template-columns: repeat(4, 1fr); }
  .tone { grid-template-columns: repeat(2, 1fr); }
  .variants { grid-template-columns: repeat(3, 1fr); }
  .role { grid-template-columns: 150px 1fr; }
  .role .ex { grid-column: 1 / -1; }
}
@media screen and (max-width: 1080px) {
  .sidebar { transform: translateX(-100%); transition: transform 300ms var(--yn-ease); box-shadow: 0 0 60px rgba(15,24,56,.25); }
  body.nav-open .sidebar { transform: none; }
  main { margin-left: 0; }
  .menu-toggle { display: inline-flex; position: fixed; right: 16px; top: 16px; z-index: 40; height: 46px; padding: 0 18px; gap: 10px; align-items: center; border-radius: 999px; background: #fff; color: var(--yn-ink); font-weight: 600; font-size: 14px; box-shadow: 0 10px 30px -10px rgba(15,24,56,.35), inset 0 0 0 1px var(--yn-border-soft); }
  .menu-toggle .i { width: 20px; height: 20px; }
  .ph--split, .cover__body, .specimen, .logo-hero, .clear, .g-12-8, .g-8-12, .swatches-main { grid-template-columns: 1fr; }
  .ph--split { gap: 18px; }
  .cover__body { padding: 40px 0; }
  .orbit { max-width: 460px; margin: 0 auto; }
  .g-4, .principles, .illus, .values { grid-template-columns: repeat(2, 1fr); }
  .g-5, .g-6 { grid-template-columns: repeat(3, 1fr); }
  .masonry { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .masonry .fig { height: 220px; }
  .masonry .fig:first-child { grid-row: auto; grid-column: span 2; height: 300px; }
  .divider .inner { grid-template-columns: 1fr; }
  .divider .num { order: -1; font-size: 160px; }
  .divider { padding-top: 130px; }
  .divider::before { top: 40px; }
  .contrast, .checklist, .toc { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 1080px) {
  .g[style*="grid-template-columns"]:not(.keep) { grid-template-columns: 1fr !important; }
  .code { max-width: 100%; }
}
@media screen and (max-width: 720px) {
  body { font-size: 16px; }
  .page { padding: 64px 20px; }
  .ph { margin-bottom: 32px; }
  .ph h2, .h-page { font-size: 30px; line-height: 1.12; }
  .lead { font-size: 17px; }
  .divider { min-height: 0; }
  .divider h2 { font-size: 48px; }
  .divider .num { font-size: 120px; }
  .cover { min-height: 0; }
  .cover h1 { font-size: 40px; }
  .g-2, .g-3, .g-4, .g-5, .g-6, .principles, .illus, .values, .variants, .tone, .isnt, .portraits, .shapes, .minsizes, .swatches-sec, .tdont, .overlay-demo, .forms-legend, .radii { grid-template-columns: 1fr 1fr; }
  .icon-grid { grid-template-columns: repeat(4, 1fr); }
  .swatches-ext { grid-template-columns: repeat(2, 1fr); }
  .ui-icons { grid-template-columns: repeat(4, 1fr); }
  .stat b { font-size: 40px; }
  .value .word { font-size: 44px; }
  .specimen .aa { font-size: 180px; }
  .specimen .glyphs, .specimen .nums { font-size: 26px; }
  .sc { grid-template-columns: 1fr; gap: 2px; }
  .sc .e { white-space: normal; }
  .spacing { gap: 4px; }
  .spacing i { width: 16px; }
  .spacing div { font-size: 9px; }
  .mock, .place { margin-inline: auto; max-width: 340px; }
  .mock-cap { text-align: center; }
  .browser .bar span { display: none; }
  .role { grid-template-columns: 1fr; gap: 6px; }
  .form-demo { grid-template-columns: 1fr; border-radius: 24px; }
  .backcover h2 { font-size: 40px; }
  .cobrand { flex-wrap: wrap; }
  .sig-demo .h { font-size: 32px; }
  .logo-hero .tile { height: 200px; }
  .cr { grid-template-columns: 48px 1fr auto; }
  .cr .pill-res { grid-column: 2 / -1; justify-self: start; }
}
@media screen and (max-width: 720px) { .hero-demos { grid-template-columns: 1fr !important; } }
@media screen and (max-width: 460px) {
  .g-2, .g-3, .principles, .illus, .values, .variants, .tone, .isnt, .portraits, .shapes, .minsizes, .swatches-sec, .tdont, .overlay-demo { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Druck / PDF: jede .page wird zu einer 16:9-Seite (1440 × 810 px)
   ========================================================================== */
@page { size: 1440px 810px; margin: 0; }
@media print {
  html, body { background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sidebar, .menu-toggle, .screen-only, .code-copy { display: none !important; }
  .print-only { display: revert !important; }
  main { margin: 0; }
  .page {
    width: 1440px; height: 810px; padding: 60px 88px 70px;
    break-after: page; break-inside: avoid; page-break-after: always;
    border-top: 0 !important; display: block;
  }
  .page:last-child { break-after: auto; page-break-after: auto; }
  .page .inner { max-width: none; }
  .ph { margin-bottom: 36px; }
  .pf {
    display: flex; position: absolute; left: 88px; right: 88px; bottom: 26px;
    justify-content: space-between; align-items: center;
    font-size: 11.5px; color: var(--yn-text-faint); letter-spacing: .01em; z-index: 5;
  }
  .pf b { color: var(--yn-ink); font-weight: 600; }
  .pf .n { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--yn-ink); }
  .page.bg-navy .pf, .page.bg-navy .pf b, .page.bg-navy .pf .n, .page.divider .pf, .page.divider .pf b, .page.divider .pf .n { color: var(--yn-text-on-dark-muted); }
  .page:not(.divider):not(.cover):not(.backcover)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--yn-gradient-brand); }
  .divider { display: flex; min-height: 0; padding-bottom: 88px; }
  .divider::before { left: 88px; top: 60px; }
  .cover .orbit { max-width: 500px; }
  .cover { display: flex; min-height: 0; padding-top: 56px; padding-bottom: 56px; }
  .backcover { display: grid; min-height: 0; }
  .copy:hover { background: none; color: inherit; }
  a { text-decoration: none; }
}