/* ==========================================================
   REDESIGN — alle Seiten · 15.09.2026
   Wird direkt nach style.css geladen. Farben und Schriften
   bleiben. Prinzip: Arbeit vor Text, Größenkontrast, eine
   Form (eckig; nur Buttons/Pills rund), Labels leise,
   Burnt Rust einmal pro Seite mit voller Kraft.
   ========================================================== */

:root {
  --r-pad: clamp(20px, 4vw, 64px);
  --r-h1: clamp(44px, 8vw, 132px);
  --r-h2: clamp(34px, 5.6vw, 88px);
}

/* ---------- 1. GLOBAL: Header ohne Milchglas ---------- */
header, .editorial-nav, header.editorial-nav {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ---------- 2. EINE FORM ---------- */
img, video,
.frame, .frame .ph, .gallery-item, .editorial-gallery,
.principle-card, .p-card, .experience-card,
.cfg-tile, .cfg-card, .audit-card, .contact-card,
.case-foot, .site-frame, .cta-box,
input, select, textarea {
  border-radius: 0 !important;
}

/* ---------- 3. TYPO: Größenkontrast ---------- */
h1:not(.hero-title) {
  letter-spacing: -0.045em !important;
  line-height: .92 !important;
}
.chapter-head h2,
.page-head h1, .page-head h2,
section > .wrap > .mark h2 {
  font-size: var(--r-h2) !important;
  line-height: .95 !important;
  letter-spacing: -0.045em !important;
  hyphens: manual !important;
  overflow-wrap: normal !important;
}
@media (max-width: 620px) {
  :root { --r-h1: clamp(30px, 10vw, 52px); --r-h2: clamp(32px, 9.5vw, 44px); }
}

/* Labels leise, keine Akzentfarbe mehr in Mini-Schrift */
.label, .index-num, .hero-tag, .statement-lead, .chapter-head .label,
.p-card-num, .principles-tag, .cta-badge, .live-status,
.manifesto-kicker, .brand-sub {
  color: var(--graphite, #7d7a75) !important;
  letter-spacing: .14em !important;
}

/* ---------- 4. CASE-HERO: Bild vollflächig, Titel unten links ---------- */
.editorial-hero-stage {
  min-height: 88svh !important;
  display: flex !important;
  align-items: flex-end !important;
  border-bottom: none !important;
}
.editorial-hero-stage .hero-image-underlay {
  width: 100% !important;
  left: 0 !important;
  opacity: 1 !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  object-position: center 35% !important;
}
.editorial-hero-stage::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(8,7,6,.94) 0%, rgba(8,7,6,.6) 30%, rgba(8,7,6,0) 62%);
}
.editorial-hero-stage .site-frame { width: 100%; position: relative; z-index: 2; }
.editorial-hero-stage .hero-typo-box {
  max-width: none !important;
  padding: 0 0 clamp(32px, 5vw, 72px) !important;
}
.monument-title .solid-line,
.monument-title .outline-line {
  font-size: var(--r-h1) !important;
  letter-spacing: -0.05em !important;
  line-height: .88 !important;
  white-space: normal !important;
}
/* Kein Outline-Text mehr: zweite Zeile massiv, nur leiser */
.monument-title .outline-line {
  color: rgba(243,242,238,.42) !important;
  -webkit-text-stroke: 0 !important;
}
.hero-lead-paragraph {
  max-width: 46ch !important;
  color: rgba(243,242,238,.85) !important;
  margin-top: 8px !important;
}
@media (max-width: 960px) {
  .editorial-hero-stage { min-height: 86svh !important; }
  .editorial-hero-stage .hero-image-underlay { opacity: 1 !important; }
}

/* Zweiter Case-Typ (Esther Graf, Red Bull, Wigglesteps) */
.case-hero-editorial {
  min-height: 88svh !important;
  align-items: flex-end !important;
  padding: 0 !important;
  border-bottom: none !important;
}
.case-hero-media {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}
.case-hero-media img { object-position: center 30% !important; }
.case-hero-fade {
  background: linear-gradient(to top, rgba(8,7,6,.94) 0%, rgba(8,7,6,.6) 30%, rgba(8,7,6,0) 62%) !important;
}
.case-hero-container { padding-top: 0 !important; padding-bottom: clamp(32px, 5vw, 72px) !important; }
.case-hero-content { max-width: none !important; }
.case-hero-title .title-solid,
.case-hero-title .title-outline {
  font-size: var(--r-h1) !important;
  letter-spacing: -0.05em !important;
  line-height: .88 !important;
}
.case-hero-title .title-outline {
  color: rgba(243,242,238,.42) !important;
  -webkit-text-stroke: 0 !important;
}
.case-hero-lead { max-width: 46ch !important; color: rgba(243,242,238,.85) !important; }
.case-hero-kicker { color: var(--graphite, #7d7a75) !important; letter-spacing: .14em !important; }

/* Header dieses Typs: am Handy Burger statt Linkzeile */
.site-nav .mobile-menu-trigger { display: none; }
@media (max-width: 900px) {
  .site-nav .nav-links, .site-nav .studio-time { display: none !important; }
  .site-nav .mobile-menu-trigger { display: block !important; }
  .site-nav .nav-inner { display: flex !important; justify-content: space-between !important; align-items: center !important; }
}

/* ---------- 5. META-LEISTE & STATEMENT ---------- */
.editorial-index-strip { border-top: none !important; }
.index-val { font-size: clamp(15px, 1.2vw, 17px) !important; }
.editorial-statement-strip {
  background: transparent !important;
  border-bottom: none !important;
}
.statement-body {
  font-size: clamp(20px, 2.2vw, 32px) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
  font-weight: 400 !important;
  max-width: 30em !important;
}

/* ---------- 6. GALERIEN: mehr Luft ---------- */
.gallery-section { padding-block: clamp(56px, 8vw, 128px) !important; }
.chapter-head { margin-bottom: clamp(28px, 4vw, 56px) !important; }
.chapter-head p { max-width: 52ch !important; }
.editorial-gallery { gap: clamp(8px, 1.2vw, 16px) !important; }
.gallery-item img, .frame img { transition: transform 1.2s cubic-bezier(.16,1,.3,1) !important; }
.gallery-item { overflow: hidden !important; }
@media (hover: hover) {
  .gallery-item:hover img, .frame:hover img { transform: scale(1.035); }
}

/* ---------- 7. PROJEKTE-ÜBERSICHT ---------- */
.page-head { padding-top: clamp(120px, 14vw, 200px) !important; }
.filter-btn { border-radius: 999px !important; }
.frame-cap b { font-size: 14px !important; letter-spacing: -0.01em !important; }

/* ---------- 8. ÜBER MICH ---------- */
.principles-h2, .about-hero h1 {
  font-size: var(--r-h2) !important;
  line-height: .95 !important;
  letter-spacing: -0.045em !important;
}

/* ---------- 9. AKZENT: Abschluss-CTA in Burnt Rust ---------- */
.case-foot,
.about-cta .cta-box,
.about-cta {
  background: var(--accent, #c84b31) !important;
  border: none !important;
  box-shadow: none !important;
}
.case-foot, .case-foot *,
.about-cta, .about-cta * {
  color: #080706 !important;
}
.case-foot h2, .about-cta h2, .cta-title {
  font-size: var(--r-h2) !important;
  line-height: .95 !important;
  letter-spacing: -0.045em !important;
}
.case-foot .btn-primary, .about-cta .cta-btn {
  background: #080706 !important;
  color: #f3f2ee !important;
  border-color: #080706 !important;
}
.case-foot .btn-primary *, .about-cta .cta-btn * { color: #f3f2ee !important; }
.case-foot .btn-secondary, .case-foot .btn--outline {
  background: transparent !important;
  border: 1px solid #080706 !important;
}

/* ---------- 10. Lesbarkeit über Fotos ---------- */
.site-nav {
  background: linear-gradient(to bottom, rgba(8,7,6,.75), rgba(8,7,6,0)) !important;
  border-bottom: none !important;
}
.editorial-hero-stage .hero-tag,
.case-hero-kicker {
  color: rgba(243,242,238,.72) !important;
}

/* ---------- 11. ABSCHLUSS-BAND (Case Studies) ---------- */
.case-foot {
  display: grid !important;
  grid-template-columns: 1fr auto;
  grid-template-areas: "next next" "back cta";
  align-items: end;
  gap: clamp(48px, 7vw, 120px) 32px !important;
  padding: clamp(36px, 5vw, 80px) !important;
  margin-top: clamp(40px, 6vw, 96px) !important;
}
.case-foot > div { display: contents !important; }
.case-foot > .case-nav-link {
  grid-area: back;
  font-size: 11px !important;
  letter-spacing: .14em !important;
  opacity: .75;
}
.case-foot > .case-nav-link:hover { opacity: 1; }
/* „Nächstes Projekt" wird zur großen Zeile */
.case-foot .btn--outline {
  grid-area: next;
  justify-self: start;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  font-family: var(--display, 'Archivo', sans-serif) !important;
  font-weight: 800 !important;
  font-size: var(--r-h2) !important;
  line-height: .95 !important;
  letter-spacing: -0.045em !important;
  text-transform: none !important;
  transition: transform .5s cubic-bezier(.16,1,.3,1) !important;
}
.case-foot .btn--outline:hover { transform: translateX(12px); }
.case-foot .cta-action-group {
  grid-area: cta;
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
  margin: 0 !important;
}
.case-foot .btn-secondary {
  border: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  background: none !important;
  text-decoration: underline !important;
  text-underline-offset: 5px !important;
}
@media (max-width: 760px) {
  .case-foot {
    grid-template-columns: 1fr;
    grid-template-areas: "next" "cta" "back";
    gap: 32px !important;
    padding: 32px 24px !important;
  }
  .case-foot .cta-action-group { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; }
}
.case-foot > .case-nav-link { align-self: center; }
@media (max-width: 760px) { .case-foot .btn-secondary { align-self: flex-start !important; } }

/* ---------- 12. MOBIL-FEINSCHLIFF: Bänder randlos, Footer, Scroll-Widget ---------- */
html { overflow-x: clip; }
/* Abschluss-Band über die volle Breite, ohne Kasten-Ränder */
.case-foot {
  margin-inline: calc(50% - 50vw) !important;
  padding-inline: max(var(--r-pad), calc(50vw - 50% + var(--r-pad) * 0)) !important;
}
section:has(> .wrap > .case-foot) { padding-bottom: 0 !important; }
.case-foot { margin-bottom: 0 !important; }

/* Über mich: Abschluss linksbündig wie der Rest */
.about-cta { text-align: left !important; padding: clamp(56px, 8vw, 120px) var(--r-pad) !important; }
.about-cta .cta-box { max-width: none !important; margin: 0 !important; padding: 0 !important; }
.about-cta .cta-title { text-transform: none !important; max-width: 12em !important; margin: 16px 0 32px !important; }

/* Einfacher Case-Footer (Esther Graf, Red Bull, Wigglesteps) */
.case-footer-inner {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px 24px !important;
  padding-block: 32px !important;
}

@media (max-width: 900px) {
  /* Schwebende Scroll-Pfeile verdecken am Handy Buttons */
  #scroll-nav, .scroll-nav { display: none !important; }
  .foot-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px 24px !important;
  }
  .foot-grid > :first-child { grid-column: 1 / -1; }
  .case-foot { padding: 40px 20px 48px !important; }
}

/* ---------- 13. ÜBER MICH ---------- */
.about-hero {
  padding: clamp(110px, 12vw, 170px) 0 clamp(56px, 7vw, 110px) !important;
  border-bottom: none !important;
}
.hero-split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: clamp(32px, 6vw, 110px) !important;
  align-items: end !important;
}
.hero-portrait-frame {
  max-width: none !important;
  border: none !important;
  background: none !important;
  aspect-ratio: 4 / 5 !important;
}
.hero-name {
  font-size: var(--r-h1) !important;
  line-height: .88 !important;
  letter-spacing: -0.05em !important;
  text-transform: none !important;
  margin-bottom: 28px !important;
}
.hero-lead-text {
  font-size: clamp(20px, 2vw, 28px) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
  max-width: 24em !important;
}
.hero-sub-text { max-width: 44ch !important; }
.about-hero .hero-tag { color: var(--graphite, #7d7a75) !important; }

.experience-section { padding-block: clamp(56px, 8vw, 120px) !important; border-top: 1px solid var(--rule); }
.experience-grid { gap: clamp(48px, 7vw, 120px) !important; }
.exp-title {
  text-transform: none !important;
  font-size: clamp(28px, 3.2vw, 48px) !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
}
/* Pills -> ruhige Textliste */
.pills-wrap {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
  gap: 0 32px !important;
}
.pill {
  background: none !important;
  border: none !important;
  border-bottom: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  padding: 16px 0 !important;
  font-family: var(--body) !important;
  font-size: clamp(16px, 1.3vw, 19px) !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: var(--ink) !important;
}
.pill:hover { transform: none !important; }
.collab-row { padding: 18px 0 !important; align-items: baseline !important; }
.collab-name { font-size: clamp(18px, 1.6vw, 24px) !important; letter-spacing: -0.02em !important; }
.collab-footer { margin-top: clamp(40px, 5vw, 72px) !important; }
.collab-brands {
  font-family: var(--display) !important;
  font-weight: 800 !important;
  font-size: clamp(28px, 3.4vw, 52px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.045em !important;
  color: var(--ink) !important;
}
@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr !important; }
  .about-hero { padding-top: 88px !important; }
}
@media (max-width: 520px) {
  .pills-wrap { grid-template-columns: 1fr; }
  .collab-row { flex-direction: column !important; gap: 4px !important; }
}

/* ---------- 14. KONTAKT ---------- */
.contact-section {
  padding-top: clamp(120px, 14vw, 190px) !important;
}
.contact-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: clamp(48px, 8vw, 140px) !important;
}
.contact-section h1 {
  font-size: var(--r-h1) !important;
  line-height: .9 !important;
  letter-spacing: -0.05em !important;
  margin-bottom: 32px !important;
}
.contact-section .cta-action-group { flex-wrap: wrap; gap: 20px 28px !important; align-items: center; }
.contact-section .btn-secondary {
  border: none !important; background: none !important; padding: 0 !important; min-height: 0 !important;
  text-decoration: underline !important; text-underline-offset: 5px !important;
}
.contact-section a[href^="mailto"] {
  font-family: var(--display) !important;
  font-weight: 700 !important;
  font-size: clamp(22px, 2.4vw, 34px) !important;
  letter-spacing: -0.03em !important;
}
#contact-form { padding-top: 8px; }
.form-group { margin-bottom: 36px !important; }
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form select,
#contact-form textarea {
  background-color: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(243,242,238,.22) !important;
  border-radius: 0 !important;
  padding: 10px 0 14px !important;
  font-size: clamp(17px, 1.4vw, 20px) !important;
  color: var(--ink) !important;
}
#contact-form select { background-position: right 0 center !important; padding-right: 28px !important; }
#contact-form input:focus,
#contact-form select:focus,
#contact-form textarea:focus {
  border-bottom-color: var(--accent, #c84b31) !important;
}
#contact-form textarea { min-height: 120px !important; }
.btn-submit {
  background: var(--accent, #c84b31) !important;
  border-color: var(--accent, #c84b31) !important;
  color: #080706 !important;
  padding: 20px 44px !important;
}
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr !important; gap: 64px !important; }
  .contact-section { padding-top: 100px !important; }
  .btn-submit { width: 100%; }
}
.contact-section h1 { font-size: clamp(40px, 5.6vw, 88px) !important; }
.contact-section .cta-action-group .btn-secondary { align-self: center; }
@media (max-width: 900px) { .contact-section .cta-action-group { flex-direction: column; align-items: flex-start !important; } }

/* ---------- 15. ZWEI WEGE (Startseite) ---------- */
.two-ways { padding-block: clamp(56px, 8vw, 120px) !important; }
.two-ways-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--rule);
}
.way {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  gap: 18px;
  padding: clamp(32px, 4vw, 56px) clamp(0px, 3vw, 48px) clamp(32px, 4vw, 56px) 0;
  color: var(--ink) !important;
  text-decoration: none !important;
  min-height: 0 !important;
}
.way + .way { border-left: 1px solid var(--rule); padding-left: clamp(24px, 3vw, 48px); }
.way-title {
  font-size: clamp(34px, 4.6vw, 72px) !important;
  line-height: .95 !important;
  letter-spacing: -0.045em !important;
  margin: 0 !important;
  max-width: none !important;
  transition: color .3s ease;
}
.way p { color: var(--graphite) !important; max-width: 40ch; margin: 0; font-size: 17px !important; }
.way-link {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
}
.way:hover .way-title, .way:hover .way-link { color: var(--accent, #c84b31) !important; }
@media (max-width: 760px) {
  .two-ways-grid { grid-template-columns: 1fr; }
  .way { padding: 32px 0 !important; }
  .way + .way { border-left: none; border-top: 1px solid var(--rule); padding-left: 0 !important; }
}
.way-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 8px; }
.way-link { text-decoration: none !important; min-height: 0 !important; }
.way-link:hover { color: var(--accent, #c84b31) !important; }
.way-link--quiet { color: var(--graphite) !important; border-bottom-color: transparent !important; }
.way:hover .way-title { color: var(--ink) !important; }

/* ---------- 16. Menü-Button für Header ohne Burger (adidas Court Study) ---------- */
.nav-inner > .mobile-menu-trigger { display: none; }
@media (max-width: 900px) {
  .nav-inner > .nav-links { display: none !important; }
  .nav-inner > .mobile-menu-trigger { display: block !important; margin-left: auto; }
  .nav-inner { display: flex !important; align-items: center !important; }
}

/* ---------- 17. Menü: nie umbrechen, lesbar über Fotos ---------- */
.nav-link-editorial, .nav-links a, #nav-list a, .nav ul a { white-space: nowrap !important; }
.site-nav { background: rgba(8,7,6,.9) !important; }
.site-nav .nav-links a { color: rgba(243,242,238,.72) !important; }
.site-nav .nav-links a.active, .site-nav .nav-links a:hover { color: #f3f2ee !important; }
@media (max-width: 1240px) {
  .nav-meta-editorial, .site-nav .studio-time { display: none !important; }
  .nav-menu-editorial, .site-nav .nav-links { gap: 22px !important; }
}

/* ---------- 18. PROJEKTE: Seitenkopf ---------- */
.page-head { padding-bottom: 0 !important; }
.page-head-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 24em);
  align-items: end;
  gap: 24px 64px;
  padding-bottom: clamp(32px, 4vw, 56px);
  border-bottom: 1px solid var(--rule);
}
.page-head .page-head-title {
  font-size: clamp(72px, 13vw, 220px) !important;
  line-height: .8 !important;
  letter-spacing: -0.06em !important;
  margin: 0 !important;
}
.work-count {
  font-family: var(--mono);
  font-size: clamp(12px, 1vw, 15px);
  letter-spacing: .08em;
  font-weight: 400;
  color: var(--graphite);
  vertical-align: top;
  position: relative;
  top: .6em;
  margin-left: .4em;
}
.page-head-lead {
  margin: 0 !important;
  font-size: clamp(16px, 1.3vw, 19px) !important;
  color: rgba(243,242,238,.8) !important;
}
.filter-nav {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px !important;
  padding: 20px 0 !important;
  margin: 0 0 clamp(24px, 3vw, 40px) !important;
  border: none !important;
}
.filter-nav button.filter-btn {
  border: 1px solid rgba(243,242,238,.16) !important;
  border-radius: 999px !important;
  margin: 0 !important;
  background: transparent !important;
  color: rgba(243,242,238,.7) !important;
  padding: 10px 16px !important;
  min-height: 0 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  letter-spacing: .1em !important;
  transition: background .25s ease, color .25s ease, border-color .25s ease !important;
}
.filter-btn::after { display: none !important; }
.filter-nav button.filter-btn:hover { border-color: rgba(243,242,238,.5) !important; color: #f3f2ee !important; }
.filter-nav button.filter-btn.active {
  background: #f3f2ee !important;
  border-color: #f3f2ee !important;
  color: #080706 !important;
}
.filter-count { opacity: .5; font-size: .9em; }
@media (max-width: 760px) {
  .page-head-grid { grid-template-columns: 1fr; }
  .filter-nav {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    margin-inline: -20px !important;
    padding-inline: 20px !important;
    scrollbar-width: none;
  }
  .filter-nav::-webkit-scrollbar { display: none; }
  .filter-nav button.filter-btn { flex: 0 0 auto; }
}

/* ---------- 19. Sprachumschalter ---------- */
.nav-lang {
  opacity: .6;
  padding-left: 14px !important;
  border-left: 1px solid rgba(243,242,238,.2);
}
.nav-lang:hover { opacity: 1; }

/* ---------- 20. Platzhalter nie öffentlich zeigen ---------- */
.placeholder-tile { display: none !important; }
.gallery-section:has(.placeholder-tile):not(:has(img)) { display: none !important; }