/* PDM Media, Neubau "Partner": helle Welt, schwarzes Leder, ein warmer Ton, Grün nur für "läuft". */
@font-face { font-family: "Inter Tight"; src: url("fonts/inter-tight.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --sc-canvas: #F7F6F3;
  --sc-surface: #FFFFFF;
  --sc-ink: #0B0B0B;
  --sc-ink-soft: #4E4A45;
  --sc-accent: #8A4B1E;          /* Cognac, Materialton */
  --sc-accent-ink: #FFFFFF;
  --gruen: #18C26A;              /* nur: es läuft */
  --gruen-text: #0B7A3F;
  --sc-font-display: "Inter Tight", system-ui, sans-serif;
  --sc-font-text: "Inter Tight", system-ui, sans-serif;
  --sc-shadow-color: 30 12% 40%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.10), 0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.08);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.10), 0 10px 24px -6px hsl(var(--sc-shadow-color) / 0.16);
  --rand: clamp(1rem, 5vw, 5.5rem);
  --weg-breite: 9.5rem;
}

html { background: var(--sc-canvas); }
body { margin: 0; background: var(--sc-canvas); color: var(--sc-ink); font-family: var(--sc-font-text); font-size: var(--sc-t-base); line-height: var(--sc-leading-body); -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 3px; border-radius: 4px; }

.skip { position: fixed; left: 1rem; top: -4rem; z-index: 400; background: var(--sc-ink); color: #fff; padding: .6rem 1rem; border-radius: 6px; text-decoration: none; }
.skip:focus { top: 1rem; }

/* ---------- Wegleiste ---------- */
.weg { position: fixed; z-index: 300; left: clamp(1rem, 2.4vw, 2.2rem); top: clamp(1rem, 3vh, 2rem); bottom: clamp(1rem, 3vh, 2rem); width: var(--weg-breite); display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.weg a { pointer-events: auto; }
.weg__logo img { display: block; width: 6.2rem; height: auto; }
.weg__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.weg__liste a { display: flex; align-items: center; gap: .6rem; font-size: var(--sc-t-xs); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--sc-ink-soft); text-decoration: none; padding: .28rem 0; transition: color .3s ease; }
.weg__liste a::before { content: ""; width: .9rem; height: 1px; background: currentColor; opacity: .45; transition: width .35s cubic-bezier(.2,.7,.2,1), opacity .3s ease; }
.weg__liste a[aria-current="step"] { color: var(--sc-ink); font-weight: 700; }
.weg__liste a[aria-current="step"]::before { width: 2rem; opacity: 1; }
.weg__liste a:hover { color: var(--sc-ink); }
.weg.ist-hell .weg__liste a, .weg.ist-hell .weg__liste a[aria-current="step"] { color: #fff; }
.weg.ist-hell .weg__logo img { filter: invert(1); }

/* ---------- Bühne ---------- */
.sc-world__seg > video, .sc-world__poster { object-fit: cover; }

/* ---------- Textblöcke ---------- */
.sc-world__copy { z-index: 200; }
.block { position: absolute; max-width: min(40rem, calc(100vw - 2 * var(--rand))); }
.block--held   { left: calc(var(--weg-breite) + 4.5vw); top: 16vh; max-width: min(46rem, 52vw); }
.block--lead   { left: calc(var(--weg-breite) + 4.5vw); bottom: 9vh; }
.block--trail  { right: var(--rand); bottom: 9vh; }
.block--mitte  { left: calc(var(--weg-breite) + 4.5vw); top: 18vh; max-width: min(54rem, 70vw); }
.block--breit  { left: calc(var(--weg-breite) + 4.5vw); right: var(--rand); bottom: 8vh; max-width: none; }
.block--projekte { left: calc(var(--weg-breite) + 3vw); right: var(--rand); top: 10vh; max-width: none; }

.blatt { background: color-mix(in oklab, #fff 88%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); padding: clamp(1.25rem, 2.4vw, 2.25rem); border-radius: 14px; box-shadow: var(--sc-e2); border: 1px solid color-mix(in oklab, var(--sc-ink) 8%, transparent); }

h1, h2, h3 { font-family: var(--sc-font-display); margin: 0; color: var(--sc-ink); }
h1 { display: grid; gap: 1.4rem; }
.held__gross { font-weight: 800; font-size: clamp(3.4rem, 1rem + 8.4vw, 9.5rem); line-height: .9; letter-spacing: -0.05em; }
.held__klein { font-weight: 600; font-size: var(--sc-t-xl); line-height: 1.2; letter-spacing: -0.02em; max-width: 26ch; }
/* Milchglas-Streifen je Zeile, damit die Unterzeile auch über dem Sessel lesbar bleibt */
.held__klein span { background: color-mix(in oklab, #fff 82%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: .08em .35em; margin-left: -.35em; border-radius: 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
h2 { font-weight: 800; font-size: var(--sc-t-2xl); line-height: 1.04; letter-spacing: -0.035em; margin-bottom: .9rem; text-wrap: balance; }
h2.riesig { font-size: clamp(2.8rem, 1rem + 6vw, 7.2rem); line-height: .94; letter-spacing: -0.05em; margin-bottom: 1.4rem; }
h3 { font-weight: 700; font-size: var(--sc-t-lg); letter-spacing: -0.02em; margin-bottom: .35rem; }
p { margin: 0 0 .8rem; color: var(--sc-ink-soft); max-width: var(--sc-measure); }
p.gross { font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink); letter-spacing: -0.01em; }
.hell, h2.hell { color: #fff; }
p.hell { color: rgba(255,255,255,.88); }
#mass { text-shadow: 0 2px 18px rgba(0,0,0,.45); isolation: isolate; }
/* Dunkler Hof hinter dem Text, weil das Leder unten in helle Stellen ausläuft */
#mass::before { content: ""; position: absolute; inset: -14vh -8vw -10vh -8vw; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 70% 65% at 40% 55%, rgba(0,0,0,.62), rgba(0,0,0,.35) 55%, transparent 80%); }

/* Ledertextur in der großen Schrift, mit tiefem Schwarz als Rückfall */
.leder { color: #0B0B0B; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .leder { background: #111 url("assets/leder.webp") center / cover; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
}

.liste { margin: .6rem 0 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.liste li { position: relative; padding-left: 1.4rem; color: var(--sc-ink); }
.liste li::before { content: ""; position: absolute; left: 0; top: .72em; width: .7rem; height: 2px; background: var(--sc-accent); }

.schritte { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: .8rem; }
.schritte li { counter-increment: s; display: grid; grid-template-columns: 2.2rem 1fr; color: var(--sc-ink-soft); }
.schritte li::before { content: counter(s); font-weight: 800; font-size: var(--sc-t-lg); color: var(--sc-accent); line-height: 1.3; }
.schritte b { color: var(--sc-ink); }

.bereiche { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 2rem); margin-top: .4rem; }
.bereiche > div { border-top: 2px solid var(--sc-ink); padding-top: .8rem; }
.bereiche p { margin: 0; font-size: var(--sc-t-sm); }

.knopf { display: inline-flex; align-items: center; gap: .7rem; margin-top: .6rem; padding: .95rem 1.4rem; background: var(--sc-ink); color: #fff; font-weight: 700; font-size: var(--sc-t-base); text-decoration: none; border-radius: 999px; box-shadow: var(--sc-e1); transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease; }
.knopf::after { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--gruen); }
.knopf:hover { transform: translateY(-2px); box-shadow: var(--sc-e2); }
.knopf--gross { font-size: var(--sc-t-lg); padding: 1.1rem 1.8rem; }

/* ---------- Projekte ---------- */
.projekte { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.8rem, 1.6vw, 1.5rem); }
.projekt { display: block; background: #fff; border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--sc-e2); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.projekt:hover { transform: translateY(-4px); }
.projekt img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.projekt h3 { padding: .9rem 1rem 0; font-size: var(--sc-t-base); }
.projekt p { padding: 0 1rem 1rem; margin: 0; font-size: var(--sc-t-sm); line-height: 1.45; }
.band { margin-top: clamp(1rem, 3vh, 2rem); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.band__lauf { display: flex; align-items: center; gap: clamp(2.5rem, 6vw, 6rem); width: max-content; animation: lauf 28s linear infinite; }
.band__lauf a { display: block; filter: grayscale(1) contrast(1.1); opacity: .55; transition: opacity .3s ease, filter .3s ease; }
.band__lauf a:hover { opacity: 1; filter: none; }
.band__lauf img { display: block; width: auto; }
.band__wort { font-weight: 800; font-size: 1.7rem; letter-spacing: -0.03em; color: var(--sc-ink); text-decoration: none; }
.band:hover .band__lauf { animation-play-state: paused; }
@keyframes lauf { to { transform: translateX(-50%); } }

/* ---------- Ich ---------- */
.ich { display: grid; grid-template-columns: 9rem 1fr; gap: 1.4rem; align-items: start; max-width: min(46rem, calc(100vw - 2 * var(--rand))); }
.ich__bild { margin: 0; }
.ich__bild img { display: block; width: 100%; height: auto; border-radius: 10px; }
.ich__bild figcaption { font-size: .72rem; color: var(--sc-ink-soft); margin-top: .35rem; }

/* ---------- Gut zu wissen ---------- */
.wissen { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.6rem; max-width: 48rem; }
.wissen dt { font-weight: 700; color: var(--sc-ink); margin-bottom: .2rem; }
.wissen dd { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.block:has(.wissen) { max-width: min(52rem, calc(100vw - 2 * var(--rand))); }

/* ---------- Schluss ---------- */
.schluss { max-width: min(46rem, calc(100vw - 2 * var(--rand))); }
.schluss h2.riesig { font-size: clamp(2.6rem, 1rem + 5vw, 6rem); }
.schluss__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin: 1rem 0 1.4rem; }
.tel { font-weight: 700; color: var(--sc-ink); text-decoration: none; border-bottom: 1px solid currentColor; }
.fuss { font-size: var(--sc-t-xs); margin: 0; }
.fuss a { color: var(--sc-ink-soft); }

/* ---------- Signatur: Chaos rastet ein ---------- */
.chaos { position: fixed; inset: 0; z-index: 150; pointer-events: none; opacity: 0; visibility: hidden; }
.chaos__netz { position: absolute; inset: 0; width: 100%; height: 100%; }
.chaos__netz line { stroke: var(--sc-ink); stroke-width: 1.5; stroke-linecap: round; }
.chaos__netz line.ist-an { stroke: var(--gruen); stroke-width: 2.2; }
.kachel { position: absolute; left: 0; top: 0; width: var(--kw, 13.5rem); padding: .7rem .9rem; border-radius: 10px; background: #fff; box-shadow: var(--sc-e2); border: 1px solid color-mix(in oklab, var(--sc-ink) 10%, transparent); font-size: var(--sc-t-sm); font-weight: 600; line-height: 1.25; will-change: transform; display: grid; }
.kachel > span { grid-area: 1 / 1; transition: opacity .35s ease; }
.kachel__alt { color: #9A2B1E; }
.kachel__alt::before { content: "● "; font-size: .7em; vertical-align: .15em; }
.kachel__neu { opacity: 0; color: var(--sc-ink); }
.kachel__neu::before { content: "● "; font-size: .7em; vertical-align: .15em; color: var(--gruen-text); }
.kachel.ist-fertig .kachel__alt { opacity: 0; }
.kachel.ist-fertig .kachel__neu { opacity: 1; }

/* ---------- Projekte in den Lederrahmen (Desktop, rahmen.js setzt .rahmen-an) ---------- */
.rahmenbilder { display: none; position: absolute; inset: 0; z-index: 200; pointer-events: none; }
.rahmen-an .rahmenbilder { display: block; }
.rahmenbild { position: absolute; left: 0; top: 0; opacity: 0; overflow: hidden; will-change: transform, opacity; }
.rahmenbild img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* Schatten der Lederleiste, damit das Bild hinter dem Rahmen liegt und nicht darauf klebt */
.rahmenbild::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), inset 0 5px 12px rgba(0,0,0,.35), inset 3px 0 8px rgba(0,0,0,.2); }
.rahmen-an #projekte .band { display: none; }
.rahmen-an #projekte .projekte { display: block; }
.rahmen-an #projekte .projekt { position: absolute; opacity: 0; background: none; box-shadow: none; border-radius: 0; overflow: visible; text-align: center; }
.rahmen-an #projekte .projekt:hover { transform: none; }
.rahmen-an #projekte .projekt img { display: none; }
.rahmen-an #projekte .projekt h3 { padding: 0; margin-bottom: .3rem; }
.rahmen-an #projekte .projekt p { padding: 0; max-width: none; color: var(--sc-ink-soft); }
/* Wird die linke Beschriftung von der Wegleiste eingeengt, bleibt nur der Name */
.rahmen-an #projekte .projekt.ist-eng p { display: none; }
.rahmen-an #projekte .projekt:hover h3 { text-decoration: underline; text-underline-offset: .2em; }

/* ---------- Handy ---------- */
@media (max-width: 860px) {
  :root { --weg-breite: 0rem; }
  .weg { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: auto; flex-direction: row; align-items: center; padding: .55rem 1rem calc(.55rem + env(safe-area-inset-bottom)); background: color-mix(in oklab, #fff 86%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid color-mix(in oklab, var(--sc-ink) 8%, transparent); pointer-events: auto; }
  .weg.ist-hell .weg__liste a, .weg.ist-hell .weg__liste a[aria-current="step"] { color: var(--sc-ink); }
  .weg.ist-hell .weg__logo img { filter: none; }
  .weg__logo img { width: 3.6rem; }
  .weg__liste { display: flex; gap: .45rem; }
  .weg__liste a { font-size: 0; padding: .7rem .25rem; }
  .weg__liste a::before { width: .55rem; height: .55rem; border-radius: 50%; opacity: .3; }
  .weg__liste a[aria-current="step"]::before { width: .55rem; opacity: 1; background: var(--sc-ink); }
  .block, .block--held, .block--lead, .block--trail, .block--mitte, .block--breit, .block--projekte { left: 1rem; right: 1rem; max-width: none; }
  .block--held { top: 9vh; }
  .block--lead, .block--trail, .block--breit { bottom: calc(4.6rem + env(safe-area-inset-bottom)); top: auto; }
  .block--mitte { top: 10vh; }
  .block--projekte { top: 4vh; }
  .blatt { padding: 1.1rem; }
  .bereiche { grid-template-columns: 1fr 1fr; gap: .8rem; }
  .projekte { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .projekt p { display: none; }
  .projekt h3 { padding: .6rem .7rem .7rem; font-size: var(--sc-t-sm); }
  .ich { grid-template-columns: 5.5rem 1fr; gap: .9rem; }
  .ich p { font-size: var(--sc-t-sm); }
  .wissen { grid-template-columns: 1fr; gap: .6rem; }
  .schritte { gap: .5rem; }
  .schritte li { font-size: var(--sc-t-sm); }
  .liste li { font-size: var(--sc-t-sm); }
  .kachel { --kw: 9.6rem; font-size: .74rem; padding: .5rem .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .band__lauf { animation: none; flex-wrap: wrap; width: auto; }
  .knopf, .projekt { transition: none; }
}

/* Breite für Listenblöcke, damit sie nicht auf Inhaltsbreite schrumpfen */
#weg { width: min(36rem, calc(100vw - 2 * var(--rand))); }
@media (max-width: 860px) { #weg { width: auto; } }

/* KI-Kennzeichnung: klein, ruhig, immer sichtbar */
.ki-hinweis { position: fixed; z-index: 310; right: clamp(.75rem, 2vw, 1.5rem); bottom: clamp(.75rem, 2vh, 1.25rem); margin: 0; max-width: none; padding: .3rem .65rem; border-radius: 999px; background: color-mix(in oklab, #fff 82%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--sc-ink); font-size: .72rem; font-weight: 500; letter-spacing: .01em; line-height: 1.3; pointer-events: none; }
.fuss--ki { margin-bottom: .35rem; }
@media (max-width: 860px) {
  .ki-hinweis { right: .6rem; bottom: calc(3.6rem + env(safe-area-inset-bottom)); font-size: .66rem; }
}

/* Projekte auf dem Handy: statt vier kleiner Querformat-Karten eine Reihe
   gerahmter Hochformat-Bilder, die beim Scrollen seitlich durchgleitet
   (handy-projekte.js). Das Logoband entfällt, die Projekte stehen ja da. */
@media (max-width: 860px) {
  #projekte { left: 0; right: 0; top: 6vh; }
  #projekte h2 { padding: 0 1rem; margin-bottom: 1rem; }
  #projekte .band { display: none; }
  #projekte .projekte { display: flex; gap: 1rem; padding: 0 1rem; width: max-content; will-change: transform; }
  #projekte .projekt { flex: 0 0 auto; width: min(58vw, 15rem); background: none; box-shadow: none; border-radius: 0; overflow: visible; }
  #projekte .projekt:hover { transform: none; }
  #projekte .projekt picture { display: block; padding: .45rem; background: #141110; border-radius: 6px; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sc-accent) 70%, transparent), var(--sc-e2); }
  #projekte .projekt img { aspect-ratio: 480 / 738; max-height: 52svh; width: 100%; object-fit: cover; object-position: top; border-radius: 2px; }
  #projekte .projekt h3 { padding: .65rem .1rem 0; font-size: var(--sc-t-sm); text-shadow: 0 1px 8px rgb(255 255 255 / .7); }
}

/* Schlussblock auf dem Handy: wächst von der Leiste nach oben und war auf
   kleinen Geräten höher als der Bildschirm, Überschrift und erster Absatz
   lagen dann über dem oberen Rand. Kompakter setzen und auf die sichtbare
   Höhe begrenzen; reicht es trotzdem nicht, scrollt der Block in sich. */
@media (max-width: 860px) {
  .block--lead.schluss { bottom: calc(6.6rem + env(safe-area-inset-bottom)); max-height: calc(100svh - 6.6rem - 1rem - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
  .schluss h2.riesig { font-size: clamp(2rem, 9vw, 2.6rem); margin-bottom: .7rem; }
  .schluss p:not(.fuss) { font-size: .9rem; line-height: 1.5; margin-bottom: .6rem; }
  .schluss__aktion { gap: .5rem 1rem; margin: .8rem 0 .9rem; }
  .schluss .knopf--gross { font-size: 1rem; padding: .85rem 1.3rem; }
  .schluss .fuss { font-size: .7rem; line-height: 1.45; }
}