/**
 * rolla.studio Design System V1
 *
 * Tokens leben in fonts.css (:root) + Farben/Raster in site.css (:root).
 * Diese Datei: Hierarchie-Utilities, Soft-Bridges, interne Styleguide-Ansicht.
 *
 * UI-Typografie = verbindlich (.ds-*)
 * Künstlerische Setzungen = Kartenvarianten / Dramaturgie (bleiben frei)
 */

/* ========== Hierarchie-Utilities (Styleguide + opt-in) ========== */

.ds-page-title{
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--text-display);
  font-weight:var(--font-wght-bold,680);
  font-stretch:var(--ui-wdth);
  line-height:var(--leading-tight);
  letter-spacing:var(--track-display);
  text-transform:uppercase;
  font-synthesis:none;
}

.ds-section-title{
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--text-2xl);
  font-weight:var(--font-wght-bold,680);
  font-stretch:var(--ui-wdth);
  line-height:var(--leading-snug);
  letter-spacing:var(--track-title);
  text-transform:uppercase;
  font-synthesis:none;
}

.ds-work-title{
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--text-3xl);
  font-weight:var(--font-wght-bold,680);
  font-stretch:var(--ui-wdth);
  line-height:var(--leading-tight);
  letter-spacing:var(--track-title);
  font-synthesis:none;
}

.ds-body{
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--text-md);
  font-weight:var(--font-wght-regular,400);
  font-stretch:var(--ui-wdth);
  line-height:var(--leading-body);
  letter-spacing:var(--track-body);
  font-synthesis:none;
}

.ds-lead{
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--text-lg);
  font-weight:var(--font-wght-regular,400);
  font-stretch:var(--ui-wdth);
  line-height:var(--leading-snug);
  letter-spacing:var(--track-body);
  max-width:42ch;
  font-synthesis:none;
}

.ds-meta{
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--text-xs);
  font-weight:var(--font-wght-bold,680);
  font-stretch:var(--ui-wdth);
  line-height:var(--leading-snug);
  letter-spacing:var(--track-meta);
  text-transform:uppercase;
  font-synthesis:none;
}

.ds-caption{
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--text-sm);
  font-weight:var(--font-wght-regular,400);
  font-stretch:var(--ui-wdth);
  line-height:var(--leading-snug);
  letter-spacing:var(--track-body);
  color:var(--muted);
  font-synthesis:none;
}

.ds-nav{
  font-family:var(--font-sans);
  font-size:var(--text-sm);
  font-weight:var(--font-wght-bold,680);
  font-stretch:var(--ui-wdth);
  letter-spacing:var(--track-ui);
  text-transform:uppercase;
  font-synthesis:none;
}

.ds-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:.65em 1.1em;
  border:1px solid var(--ink);
  background:transparent;
  color:inherit;
  font-family:var(--font-sans);
  font-size:var(--text-sm);
  font-weight:var(--font-wght-bold,680);
  font-stretch:var(--ui-wdth);
  letter-spacing:var(--track-ui);
  text-transform:uppercase;
  text-decoration:none;
  font-synthesis:none;
  cursor:pointer;
}
.ds-button--solid{
  background:var(--ink);
  color:var(--paper);
}
.ds-button--dark{
  border-color:currentColor;
}

.ds-filter{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:0 9px;
  font-family:var(--font-sans);
  font-size:var(--text-xs);
  font-weight:var(--font-wght-bold,680);
  font-stretch:var(--ui-wdth);
  letter-spacing:var(--track-meta);
  text-transform:uppercase;
  text-decoration:none;
  font-synthesis:none;
}

/* ========== Soft bridge: bestehende UI an Tokens —— ohne Dramaturgie anzufassen ========== */

body{
  line-height:var(--leading-body,1.45);
}

.site-nav-desktop a,
.site-nav-lang,
.menu-toggle,
.site-menu a,
.site-footer-nav a,
.site-footer-legal-nav a,
.u-filters a,
.u-sort a{
  font-weight:var(--font-wght-bold,680);
  font-stretch:var(--ui-wdth,100%);
  font-synthesis:none;
}

.site-menu-kicker,
.u-ov-eyebrow,
.u-ov-section-head h2,
.u-filters p,
.u-sort p,
.praxis-kicker,
.werk-group-kicker,
.werk-breadcrumb,
.werk-intro-column-title,
.werk-tier3-title,
.home-cmg-card-kicker,
.home-cmg-card-status,
.image-label,
.image-ai-label{
  font-weight:var(--font-wght-bold,680);
  letter-spacing:var(--track-meta,.08em);
  font-synthesis:none;
}

/* UI-Bold ≈ Named Instance 680 (statt hartem CSS 700) — Größen bleiben seitenspezifisch */
.praxis-copy h1,
.praxis-copy h2{
  font-weight:var(--font-wght-bold,680);
  font-synthesis:none;
}

/* Übersicht UNTERSUCHUNGEN — UI-Hero; künstlerische Seiten (Praxis, Studio, …) bleiben frei */
.u-ov-hero h1{
  font-size:var(--text-display);
  font-weight:var(--font-wght-bold,680);
  letter-spacing:var(--track-display);
  line-height:var(--leading-tight);
  font-stretch:var(--ui-wdth,100%);
  font-synthesis:none;
}

.u-ov-hero-sub{
  font-weight:var(--font-wght-light,320);
  letter-spacing:var(--track-meta);
  line-height:var(--leading-snug);
}

/* ========== Styleguide-Layout (intern) ========== */

.ds-guide{
  max-width:var(--max);
  margin:0 auto;
  padding:calc(76px + var(--space-5)) var(--pad-x) var(--space-6);
  background:var(--paper);
  color:var(--ink);
}
.ds-guide__intro{
  max-width:48ch;
  margin:0 0 var(--space-6);
}
.ds-guide__intro p{margin:0 0 var(--space-3);color:var(--muted)}
.ds-guide__grid{
  display:grid;
  gap:var(--space-6);
}
.ds-guide__block{
  padding-top:var(--space-4);
  border-top:1px solid var(--line);
}
.ds-guide__block h2{
  margin:0 0 var(--space-4);
  font-size:var(--text-sm);
  font-weight:var(--font-wght-bold,680);
  letter-spacing:var(--track-meta);
  text-transform:uppercase;
}
.ds-guide__swatch-row{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:var(--space-3);
}
.ds-guide__swatch{
  min-height:88px;
  padding:var(--space-3);
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:6px;
}
.ds-guide__swatch code{
  font-size:var(--text-xs);
  letter-spacing:0;
  text-transform:none;
  font-weight:400;
}
.ds-guide__ladder > *{margin:0 0 var(--space-3)}
.ds-guide__weights{
  display:grid;
  gap:var(--space-2);
}
.ds-guide__weights div{
  padding:var(--space-2) 0;
  border-bottom:1px solid var(--line);
  font-size:var(--text-xl);
}
.ds-guide__widths{
  display:grid;
  gap:var(--space-2);
}
.ds-guide__widths div{
  padding:var(--space-2) 0;
  border-bottom:1px solid var(--line);
  font-size:var(--text-lg);
  font-weight:var(--font-wght-bold,680);
  text-transform:uppercase;
}
.ds-guide__cards{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:0;
  border-top:1px solid rgba(17,17,17,.2);
  border-left:1px solid rgba(17,17,17,.2);
  background:#0a0a0a;
  color:#f3f2ee;
}
.ds-guide__cards > li{
  border-right:1px solid rgba(243,242,238,.28);
  border-bottom:1px solid rgba(243,242,238,.28);
  min-height:280px;
}
.ds-guide__cards .u-typo-card{min-height:280px}
.ds-guide__row{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-3);
  align-items:center;
}
.ds-guide--dark{
  background:#0a0a0a;
  color:#f3f2ee;
  margin:var(--space-5) calc(-1 * var(--pad-x)) 0;
  padding:var(--space-5) var(--pad-x);
}
.ds-guide--dark .ds-guide__block{border-top-color:rgba(243,242,238,.28)}
.ds-guide--dark .ds-caption{color:rgba(243,242,238,.65)}
.ds-guide__note{
  margin:var(--space-4) 0 0;
  font-size:var(--text-sm);
  color:var(--muted);
  max-width:52ch;
}
@media (max-width:699px){
  .ds-guide{padding-top:calc(76px + var(--space-4))}
  .ds-guide__cards{grid-template-columns:1fr}
}

/* —— Startseite Visual System 01 (mitgeladen) —— */
/**
 * Startseite — Visual System 01
 * Abgestimmt auf die Editorial-Referenz (Pragmatica Next VF)
 */

.home-vs{
  /* Referenz: ICH UNTERSUCHE. = eng+schwer · darunter = leicht+breit */
  --home-hero-heavy-wght:var(--font-wght-black,900);
  --home-hero-heavy-wdth:50%;
  --home-hero-light-wght:var(--font-wght-light,320);
  --home-hero-light-wdth:150%;
  --home-statement-a-wght:var(--font-wght-extrabold,780);
  --home-statement-a-wdth:var(--font-wdth-normal,100%);
  --home-statement-b-wght:var(--font-wght-medium,490);
  --home-statement-b-wdth:var(--font-wdth-condensed,85%);
  background:var(--paper,#faf9f6);
  color:var(--ink,#111);
  max-width:none;
  width:100%;
  margin:0;
  padding:76px 0 0;
  overflow-x:clip;
  font-family:var(--font-sans);
  font-synthesis:none;
}
.home-vs a:focus-visible{
  outline:2px solid var(--ink,#111);
  outline-offset:3px;
}

/* —— Hero: ~70 / 30, max. Lesebreite wie Referenz —— */
.home-vs-hero{
  display:grid;
  grid-template-columns:minmax(0,1.85fr) minmax(220px,.8fr);
  gap:0;
  /* Referenz: Oberkante ICH = Oberkante Aside-Text */
  align-items:stretch;
  min-height:min(72vh,760px);
  max-width:var(--max,1500px);
  margin:0 auto;
  width:100%;
  border-bottom:1px solid var(--line,rgba(17,17,17,.18));
}
.home-vs-hero__main{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-start;
  gap:0;
  padding:clamp(32px,4.5vw,56px) clamp(16px,2vw,32px) clamp(32px,4.5vw,56px) var(--pad-x,clamp(28px,4vw,64px));
  min-width:0;
  container-type:inline-size;
  container-name:hero-main;
}
.home-vs-hero__aside{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:1.1rem;
  padding:clamp(32px,4.5vw,56px) var(--pad-x,clamp(28px,4vw,64px)) clamp(32px,4.5vw,56px) clamp(28px,3vw,48px);
  border-left:1px solid var(--line,rgba(17,17,17,.18));
  min-width:0;
}
.home-vs-hero__heavy{
  margin:0;
  max-width:100%;
  /*
   * Eng (50%) + Spaltenbreite (cqi). Rem-Deckel hoch:
   * bei 10.5rem blieb die Füllung ~43% — Referenz füllt die linke Zone.
   */
  font-size:clamp(3.2rem,23cqi,18rem);
  font-weight:var(--home-hero-heavy-wght);
  font-stretch:var(--home-hero-heavy-wdth);
  line-height:.76;
  letter-spacing:-.06em;
  text-transform:uppercase;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}
.home-vs-hero__heavy-line{
  display:block;
  white-space:nowrap;
}
.home-vs-hero__light{
  margin:.22em 0 0;
  max-width:100%;
  /*
   * Muss fast so breit wie „UNTERSUCHE.“ wirken.
   * 2.65rem-Deckel ließ live nur ~65% Breite — Deckel hoch.
   */
  font-size:clamp(1.1rem,7.6cqi,4.2rem);
  font-weight:var(--home-hero-light-wght);
  font-stretch:var(--home-hero-light-wdth);
  line-height:1.05;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--muted,#5e5b54);
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}
.home-vs-hero__light-line{
  display:block;
  white-space:nowrap;
}
.home-vs-hero__aside p{
  margin:0;
  max-width:30ch;
  font-size:clamp(.92rem,1.05vw,1.02rem);
  font-weight:var(--font-wght-regular,400);
  font-stretch:var(--font-wdth-normal,100%);
  line-height:1.5;
  color:var(--muted,#5e5b54);
}
.home-vs-hero__rule{
  display:block;
  width:3.5rem;
  height:1px;
  margin-top:.35rem;
  background:var(--ink,#111);
  opacity:.35;
}
.home-vs-link{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:var(--text-xs,.72rem);
  font-weight:var(--font-wght-bold,680);
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
}
.home-vs-link--hero{
  /* Referenz: CTA dicht unter dem Light-Block, nicht am Hero-Boden */
  margin-top:clamp(1.25rem,2.2vw,1.9rem);
  padding-top:0;
}
.home-vs-link:hover{text-decoration:underline;text-underline-offset:4px}

/* Explainer stört die Referenz-Komposition — auf Startseite zurücknehmen */
.home-vs .simple-explainer{
  display:none !important;
}

/* —— Untersuchungen —— */
.home-vs-current,
.home-vs-statement,
.home-vs-index-wrap{
  max-width:var(--max,1500px);
  margin-left:auto;
  margin-right:auto;
}
.home-vs-current{
  padding:clamp(28px,4vw,48px) 0 0;
  border-bottom:1px solid var(--line,rgba(17,17,17,.18));
}
.home-vs-current__head{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:baseline;
  gap:12px 24px;
  padding:0 var(--pad-x,clamp(28px,4vw,64px)) clamp(18px,2.5vw,28px);
}
.home-vs-current__head h2,
.home-vs-current__head a{
  margin:0;
  font-size:.68rem;
  font-weight:var(--font-wght-bold,680);
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
}
.home-vs-current__head a:hover{text-decoration:underline;text-underline-offset:4px}

.home-vs-typo-grid{
  --u-typo-cols:3;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(var(--u-typo-cols),minmax(0,1fr));
  gap:0;
  margin:0;
  padding:0;
  border-top:1px solid var(--line,rgba(17,17,17,.18));
  border-left:1px solid var(--line,rgba(17,17,17,.18));
  background:var(--paper,#faf9f6);
  color:var(--ink,#111);
}
.home-vs-typo-grid > li{
  min-width:0;
  border-right:1px solid var(--line,rgba(17,17,17,.18));
  border-bottom:1px solid var(--line,rgba(17,17,17,.18));
  display:flex;
}
.home-vs-typo-grid .u-typo-card{
  min-height:min(56vh,520px);
  color:var(--ink,#111);
  background:transparent;
}
.home-vs-typo-grid .u-typo-card:hover,
.home-vs-typo-grid .u-typo-card:focus-visible{
  background:rgba(17,17,17,.025);
}
.home-vs-typo-grid .u-typo-card__meta{opacity:.55}
.home-vs-typo-grid .u-typo-card__topics{opacity:.55}
.home-vs-typo-grid .u-typo-card__rail{background:var(--ink,#111)}
.home-vs-typo-grid .u-typo-card__title{
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}
.home-vs-typo-grid .u-typo-card__line{white-space:nowrap}

/* 01 STACKED — eng / schwer */
.home-vs-typo-grid .u-typo-card--stacked{
  --typo-card-wght:var(--font-wght-extrabold,780);
  --typo-card-wdth:55%;
  --typo-card-size:clamp(2.1rem,3.8vw,3.5rem);
  --typo-card-leading:.78;
  --typo-card-tracking:-.06em;
}
/* 02 MONUMENTAL — breit / schwer + leichter Zusatz */
.home-vs-typo-grid .u-typo-card--monumental{
  --typo-card-wght:var(--font-wght-bold,680);
  --typo-card-wdth:130%;
  --typo-card-size:clamp(2.6rem,5vw,4.4rem);
  --typo-card-tracking:-.035em;
  --typo-card-leading:.82;
}
.home-vs-typo-grid .u-typo-card--monumental .u-typo-card__aside{
  font-weight:var(--font-wght-light,320);
  font-stretch:115%;
  letter-spacing:.04em;
  opacity:.68;
}
/* 03 SPLIT */
.home-vs-typo-grid .u-typo-card--split{
  --typo-card-wght:var(--font-wght-bold,680);
  --typo-card-wdth:100%;
  --typo-card-size:clamp(2.3rem,4.2vw,3.8rem);
}

/* —— Statement —— */
.home-vs-statement{
  display:grid;
  grid-template-columns:minmax(0,1.85fr) minmax(240px,.85fr);
  gap:0;
  align-items:end;
  min-height:min(58vh,580px);
  border-bottom:1px solid var(--line,rgba(17,17,17,.18));
}
.home-vs-statement__main{
  padding:clamp(56px,8vw,120px) clamp(28px,3.5vw,56px) clamp(48px,6vw,88px) var(--pad-x,clamp(28px,4vw,64px));
  min-width:0;
}
.home-vs-statement__aside{
  padding:clamp(56px,8vw,120px) var(--pad-x,clamp(28px,4vw,64px)) clamp(48px,6vw,88px) clamp(28px,3vw,48px);
  border-left:1px solid var(--line,rgba(17,17,17,.18));
  min-width:0;
}
.home-vs-kicker{
  margin:0 0 clamp(18px,2.5vw,32px);
  font-size:.68rem;
  font-weight:var(--font-wght-bold,680);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted,#5e5b54);
}
.home-vs-statement__set{margin:0;max-width:14ch}
.home-vs-statement__a,
.home-vs-statement__b{
  display:block;
  text-transform:uppercase;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
  white-space:nowrap;
}
.home-vs-statement__a{
  font-size:clamp(2.2rem,6vw,5.4rem);
  font-weight:var(--home-statement-a-wght);
  font-stretch:var(--home-statement-a-wdth);
  line-height:.86;
  letter-spacing:-.05em;
  color:var(--ink,#111);
}
.home-vs-statement__b{
  margin-top:.08em;
  font-size:clamp(2rem,5.5vw,5rem);
  font-weight:var(--home-statement-b-wght);
  font-stretch:var(--home-statement-b-wdth);
  line-height:.86;
  letter-spacing:-.03em;
  color:var(--muted,#5e5b54);
}
.home-vs-statement__aside p{
  margin:0 0 1em;
  max-width:32ch;
  font-size:clamp(.92rem,1.05vw,1.02rem);
  line-height:1.5;
  color:var(--muted,#5e5b54);
}

/* —— Index —— */
.home-vs-index{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-bottom:1px solid var(--line,rgba(17,17,17,.18));
}
.home-vs-index > li{
  min-width:0;
  border-right:1px solid var(--line,rgba(17,17,17,.18));
}
.home-vs-index > li:last-child{border-right:0}
.home-vs-index a{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:100%;
  padding:clamp(28px,3.5vw,44px) clamp(16px,2vw,28px);
  text-decoration:none;
  color:inherit;
}
.home-vs-index a:hover .home-vs-index__title{
  text-decoration:underline;
  text-underline-offset:4px;
}
.home-vs-index__num{
  margin:0;
  font-size:.68rem;
  font-weight:var(--font-wght-bold,680);
  letter-spacing:.12em;
  color:var(--muted,#5e5b54);
}
.home-vs-index__title{
  margin:0;
  font-size:clamp(1.1rem,1.7vw,1.45rem);
  font-weight:var(--font-wght-bold,680);
  letter-spacing:-.02em;
  text-transform:uppercase;
  line-height:1.15;
}
.home-vs-index__text{
  margin:0;
  max-width:26ch;
  font-size:.9rem;
  line-height:1.4;
  color:var(--muted,#5e5b54);
}
.home-vs-index__go{
  margin-top:auto;
  padding-top:18px;
  font-size:.68rem;
  font-weight:var(--font-wght-bold,680);
  letter-spacing:.1em;
  text-transform:uppercase;
}

@media (max-width:1099px){
  .home-vs-typo-grid{--u-typo-cols:2}
  .home-vs-index{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-vs-index > li:nth-child(2){border-right:0}
  .home-vs-index > li:nth-child(1),
  .home-vs-index > li:nth-child(2){border-bottom:1px solid var(--line,rgba(17,17,17,.18))}
  .home-vs-statement__a,
  .home-vs-statement__b{white-space:normal}
}

@media (max-width:899px){
  .home-vs-hero,
  .home-vs-statement{
    grid-template-columns:1fr;
    min-height:0;
  }
  .home-vs-hero__aside,
  .home-vs-statement__aside{
    border-left:0;
    border-top:1px solid var(--line,rgba(17,17,17,.18));
    padding-top:clamp(28px,5vw,40px);
  }
  .home-vs-hero__heavy{font-size:clamp(3rem,17vw,6.2rem)}
  .home-vs-hero__light{font-size:clamp(1.1rem,5.2vw,1.85rem)}
  .home-vs-hero__heavy-line,
  .home-vs-hero__light-line{white-space:normal}
}

@media (max-width:699px){
  .home-vs-typo-grid{--u-typo-cols:1}
  .home-vs-index{grid-template-columns:1fr}
  .home-vs-index > li{
    border-right:0;
    border-bottom:1px solid var(--line,rgba(17,17,17,.18));
  }
  .home-vs-index > li:last-child{border-bottom:0}
  .home-vs-typo-grid .u-typo-card{min-height:min(52vh,400px)}
  .home-vs-typo-grid .u-typo-card__line{white-space:normal}
}