/*
  Erdmann Medien – Website CSS
  Neu strukturiert und bereinigt
  Stand: 2026
*/

/* ------------------------------------------------------------
   01. Design Tokens
------------------------------------------------------------ */

:root {
  --black: #1d1d1b;
  --grey: #b2b2b2;
  --red: #b61f29;
  --red-dark: #901922;
  --paper: #f4f1ec;
  --paper-2: #ebe6dc;
  --text: #1d1d1b;
  --muted: #6f6f6c;
  --line: rgba(29, 29, 27, .16);
  --bs-dark-rgb: 29, 29, 27;

  --white-soft: rgba(255, 255, 255, .82);
  --white-muted: rgba(255, 255, 255, .56);

  --font-headline: 'Archivo', sans-serif;
  --font-base: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container-x: clamp(1.5rem, 4vw, 5rem);
  --section-y: clamp(5rem, 9vw, 9rem);
}


/* ------------------------------------------------------------
   02. Base
------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
  border-radius: 0 !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--text);
  background: var(--paper);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .075;
  background-image:
    linear-gradient(rgba(29, 29, 27, .5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29, 29, 27, .5) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black 0%, transparent 86%);
}

a {
  color: inherit;
}

img {
  max-width: 100%;
}

/* ------------------------------------------------------------
   03. Typography & Utilities
------------------------------------------------------------ */

.section-space {
  padding: var(--section-y) 0;
}

.kicker {
  display: inline-flex;
  gap: .65rem;
  align-items: center;
  color: var(--red);
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.kicker::before {
  content: "";
  width: 2.6rem;
  height: 2px;
  display: inline-block;
  background: currentColor;
}

.mega-title {
  font-family: var(--font-headline);
  font-weight: 900;
  line-height: .86;
  letter-spacing: -.085em;
  text-transform: uppercase;
}

.text-balance {
  text-wrap: balance;
}


/* ------------------------------------------------------------
   04. Buttons
------------------------------------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.25rem;
    padding: .9rem 1.25rem;
    border: 1px solid currentColor;
    text-decoration: none;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .03em;
    line-height: 1;
    transition: transform .2s ease, background .2s ease, color .2s ease;
}

.btn-red {
  --bs-btn-bg: var(--red);
  --bs-btn-border-color: var(--red);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--red-dark);
  --bs-btn-hover-border-color: var(--red-dark);
  --bs-btn-hover-color: #fff;

  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.btn-wire {
  border: 1px solid currentColor;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.badge {
    border: 1px solid rgba(255, 255, 255, .28);
    padding: .45rem .65rem;
    color: rgba(255, 255, 255, .82);
    font-weight: 800;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: rgba(29, 29, 27, .28);
}

/* ------------------------------------------------------------
   05. Navigation: Contao / Bootstrap Collapse
------------------------------------------------------------ */

.navbar {
  z-index: 1040;
  padding: 1.4rem 0;
  background: transparent;
}

.navbar-brand {
  padding: 0;
  margin: 0;
  line-height: 1;
}

.navbar-brand img,
.brand-logo {
  width: min(245px, 58vw);
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .12));
}

.navbar-toggler {
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(29, 29, 27, .62);
  color: #fff;
  backdrop-filter: blur(14px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
  transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease;
}

.navbar-toggler:hover {
  background: var(--red);
  color: #fff;
  transform: translateY(-2px);
}

.navbar-toggler:focus {
  box-shadow: none;
}

.navbar-toggler-icon {
  width: 1.55rem;
  height: 2px;
  position: relative;
  display: block;
  background: #fff;
  background-image: none;
  transition: background .2s ease;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 1.55rem;
  height: 2px;
  background: #fff;
  transition:
    top .2s ease,
    transform .2s ease;
}

.navbar-toggler-icon::before {
  top: -.52rem;
}

.navbar-toggler-icon::after {
  top: .52rem;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  background: transparent;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
  top: 0;
  transform: rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

.navbar-collapse {
  margin-top: 1rem;
  padding: clamp(1.5rem, 5vw, 3rem);
  background: var(--black);
  color: #fff;
  border-left: 10px solid var(--red);
}

.mod_navigation {
  width: 100%;
}

.mod_navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mod_navigation li {
  padding: 0;
  margin: 0;
}

.mod_navigation a,
.mod_navigation strong {
  display: block;
  padding: .18rem 0;
  color: #fff;
  font-family: var(--font-headline);
  font-size: clamp(2.1rem, 6vw, 5.2rem);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.mod_navigation a:hover,
.mod_navigation a:focus,
.mod_navigation strong.active,
.mod_navigation li.active strong {
  color: var(--red);
}


/* ------------------------------------------------------------
   06. Navigation: Optional Offcanvas Support
------------------------------------------------------------ */

.offcanvas {
  width: min(600px, 92vw) !important;
  background: var(--black);
  color: #fff;
  border-left: 10px solid var(--red);
}

.offcanvas .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.offcanvas .nav-link {
  padding: .18rem 0;
  color: #fff;
  font-family: var(--font-headline);
  font-size: clamp(2.1rem, 6vw, 4.1rem);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.08em;
  text-transform: uppercase;
}

.offcanvas .nav-link:hover {
  color: var(--red);
}

.nav-number {
  margin-right: .75rem;
  color: var(--grey);
  font-size: .9rem;
  letter-spacing: .08em;
  vertical-align: top;
}


/* ------------------------------------------------------------
   07. Hero
------------------------------------------------------------ */

.hero {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(29, 29, 27, .94) 0%, rgba(29, 29, 27, .76) 46%, rgba(29, 29, 27, .24) 100%),
    url('https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=2200&q=80') center / cover;
}

.hero::before {
  content: "EM";
  position: absolute;
  right: -3vw;
  bottom: -6vw;
  font-family: var(--font-headline);
  font-weight: 900;
  font-size: clamp(12rem, 31vw, 34rem);
  line-height: .7;
  letter-spacing: -.15em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, .18);
  opacity: .85;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding-top: 12rem;
  padding-bottom: 6rem;
}

.hero h1 {
  max-width: 980px;
  font-size: clamp(3.4rem, 10vw, 6.5rem);
  text-wrap: balance;
}

.hero-lead {
  max-width: 650px;
  color: var(--white-soft);
  font-size: clamp(1.1rem, 1.55vw, 1.42rem);
  line-height: 1.55;
  border-left: 6px solid var(--red);
  padding-left: 1.4rem;
}

.hero-index {
  position: absolute;
  right: clamp(1.5rem, 5vw, 5rem);
  top: 44%;
  writing-mode: vertical-rl;
  color: rgba(255, 255, 255, .64);
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
}


/* ------------------------------------------------------------
   08. Subpage Hero
------------------------------------------------------------ */

.subpage-hero {
  min-height: 62vh;
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(29, 29, 27, .95) 0%, rgba(29, 29, 27, .78) 52%, rgba(29, 29, 27, .36) 100%),
    var(--hero-image, url('https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=2200&q=80')) center / cover;
}

.subpage-hero::before {
  content: attr(data-mark);
  position: absolute;
  right: -2vw;
  bottom: -5vw;
  font-family: var(--font-headline);
  font-weight: 900;
  font-size: clamp(10rem, 26vw, 28rem);
  line-height: .7;
  letter-spacing: -.15em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, .16);
  opacity: .9;
}

.subpage-hero-content {
  position: relative;
  z-index: 2;
  padding-top: 11rem;
  padding-bottom: 5rem;
}

.subpage-hero h1 {
  max-width: 1050px;
  font-size: clamp(3.2rem, 8.5vw, 8rem);
  text-wrap: balance;
}

.subpage-lead {
  max-width: 760px;
  color: var(--white-soft);
  font-size: clamp(1.1rem, 1.55vw, 1.42rem);
  line-height: 1.55;
  border-left: 6px solid var(--red);
  padding-left: 1.4rem;
}


/* ------------------------------------------------------------
   09. Ticker
------------------------------------------------------------ */

.ticker {
  overflow: hidden;
  white-space: nowrap;
  background: var(--red);
  color: #fff;
  font-family: var(--font-headline);
  font-size: clamp(1.8rem, 4vw, 4rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: uppercase;
  padding: .65rem 0 .8rem;
}

.ticker-track {
  display: inline-block;
  animation: ticker 60s linear infinite;
}

@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}


/* ------------------------------------------------------------
   10. Intro Panel
------------------------------------------------------------ */

.intro-panel {
  position: relative;
  overflow: hidden;
  background: var(--black);
  color: #fff;
  padding: clamp(2rem, 6vw, 5rem);
}

.intro-panel::after {
  content: "";
  position: absolute;
  inset: auto 0 0 auto;
  width: 36%;
  height: 12px;
  background: var(--red);
}


/* ------------------------------------------------------------
   11. Services
------------------------------------------------------------ */

.service-row {
  border-top: 1px solid var(--line);
  padding: 2rem 0;
  transition:
    background .2s ease,
    padding-left .2s ease;
}

.service-row:last-child {
  border-bottom: 1px solid var(--line);
}

.service-row:hover {
  background: rgba(182, 31, 41, .07);
  padding-left: 1rem;
}

.service-no {
  color: var(--red);
  font-family: var(--font-headline);
  font-size: 1rem;
  font-weight: 900;
}

.service-title {
  margin: 0;
  font-family: var(--font-headline);
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.07em;
  text-transform: uppercase;
}


/* ------------------------------------------------------------
   12. Projects
------------------------------------------------------------ */

.project-card {
  min-height: 460px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  background: var(--black);
  color: #fff;
}

.project-card img,
.project-card picture,
.project-card figure {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}

.project-card img {
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
  transform: scale(1.03);
  transition:
    transform .35s ease,
    filter .35s ease;
}

.project-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(29, 29, 27, .16), rgba(29, 29, 27, .88));
}

.project-card:hover img {
  filter: grayscale(0) contrast(1.05);
  transform: scale(1.08);
}

.project-inner {
  padding: 2rem;
}

.project-count {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  color: transparent;
  font-family: var(--font-headline);
  font-size: 4.5rem;
  font-weight: 900;
  line-height: .8;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .72);
}


/* ------------------------------------------------------------
   13. Statement
------------------------------------------------------------ */

.statement {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.statement-word {
  font-family: var(--font-headline);
  font-size: clamp(4.2rem, 12vw, 13rem);
  font-weight: 900;
  line-height: .82;
  letter-spacing: -.08em;
  text-transform: uppercase;
}

.statement-word .red,
.red {
  color: var(--red);
}


/* ------------------------------------------------------------
   14. Process
------------------------------------------------------------ */

.process-item {
  margin-bottom: 1.5rem;
  padding: 1.6rem 0 1.6rem 1.8rem;
  background: rgba(255, 255, 255, .38);
  border-left: 8px solid var(--black);
}

.process-item strong {
  display: block;
  font-family: var(--font-headline);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.06em;
  text-transform: uppercase;
}


/* ------------------------------------------------------------
   15. CTA / Contact
------------------------------------------------------------ */

.cta {
  position: relative;
  overflow: hidden;
  background: var(--black);
  color: #fff;
}

.cta::before {
  content: "?";
  position: absolute;
  right: 3vw;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(182, 31, 41, .26);
  font-family: var(--font-headline);
  font-size: clamp(14rem, 34vw, 32rem);
  font-weight: 900;
  line-height: .7;
}

.form-control {
  padding-left: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .34);
  color: #fff;
}

.form-control:focus {
  background: transparent;
  color: #fff;
  border-color: var(--red);
  box-shadow: none;
}

.form-control::placeholder {
  color: rgba(255, 255, 255, .52);
}


/* ------------------------------------------------------------
   16. Content Cards
------------------------------------------------------------ */

.content-card {
  height: 100%;
  padding: clamp(1.5rem, 4vw, 3rem);
  background: rgba(255, 255, 255, .42);
  border-left: 8px solid var(--black);
}

.content-card.red {
  border-left-color: var(--red);
}

.content-card h3 {
  font-family: var(--font-headline);
  font-weight: 900;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.big-number {
  color: transparent;
  font-family: var(--font-headline);
  font-size: clamp(4rem, 8vw, 8rem);
  font-weight: 900;
  line-height: .8;
  -webkit-text-stroke: 1px var(--red);
}


/* ------------------------------------------------------------
   17. Footer
------------------------------------------------------------ */

footer {
  background: #11110f;
  color: rgba(255, 255, 255, .72);
}

footer a {
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
}

footer a:hover {
  color: #fff;
}


/* ------------------------------------------------------------
   18. Desktop Navigation
------------------------------------------------------------ */

@media (min-width: 992px) {
  .navbar-collapse {
    justify-content: flex-end;
    margin-top: 0;
    padding: 0;
    background: transparent;
    border-left: 0;
  }

  .mod_navigation ul.level_1 {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
  }

  .mod_navigation a,
  .mod_navigation strong {
    padding: .6rem 0;
    color: #fff;
    font-size: .82rem;
    line-height: 1;
    letter-spacing: .14em;
  }

  .mod_navigation a:hover,
  .mod_navigation a:focus,
  .mod_navigation strong.active,
  .mod_navigation li.active strong {
    color: var(--red);
  }
}


/* ------------------------------------------------------------
   19. Responsive
------------------------------------------------------------ */

@media (max-width: 991.98px) {
  .hero-content,
  .subpage-hero-content {
    padding-top: 9rem;
  }

  .hero-index {
    display: none;
  }

  .project-card {
    min-height: 360px;
  }

  .service-row:hover {
    padding-left: 0;
  }
}

@media (max-width: 575.98px) {
  .navbar {
    padding: 1rem 0;
  }

  .navbar-toggler {
    width: 3.8rem;
    height: 3.8rem;
  }

  .hero h1,
  .subpage-hero h1 {
    font-size: clamp(3rem, 15vw, 4.8rem);
  }

  .statement-word {
    font-size: clamp(3.2rem, 17vw, 6rem);
  }

  .process-item strong {
    font-size: 1.65rem;
  }
}

/* Erdmann Medien RSCE Library */

.section,
.rsce-section {
  padding: var(--section-y, clamp(5rem, 9vw, 9rem)) 0;
}

.section-title {
  font-family: var(--font-headline, 'Archivo', sans-serif);
  font-size: clamp(2.8rem, 7vw, 7rem);
  font-weight: 900;
  line-height: .88;
  letter-spacing: -.08em;
  text-transform: uppercase;
  max-width: 1050px;
  margin: .65rem 0 1.5rem;
}

.hero-actions,
.cta-actions,
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 2rem;
}

.hero-benefits,
.badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: 2rem;
}

.hero-benefits .badge,
.badge-list .badge,
.rsce-badge {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: .55rem .8rem;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* Hero Unterseite */
.rsce-hero {
  min-height: var(--hero-height, 72vh);
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(29,29,27,.95) 0%, rgba(29,29,27,.78) 52%, rgba(29,29,27,.36) 100%),
    var(--hero-image, url('https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=2200&q=80')) center / cover;
}

.rsce-hero::before {
  content: attr(data-mark);
  position: absolute;
  right: -2vw;
  bottom: -5vw;
  font-family: var(--font-headline, 'Archivo', sans-serif);
  font-weight: 900;
  font-size: clamp(10rem, 26vw, 28rem);
  line-height: .7;
  letter-spacing: -.15em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255,255,255,.16);
  opacity: .9;
}

.rsce-hero-content {
  position: relative;
  z-index: 2;
  padding-top: clamp(9rem, 15vw, 13rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

.rsce-hero h1 {
  max-width: 1050px;
  font-size: clamp(3.2rem, 8.5vw, 8rem);
}

.rsce-hero-lead {
  max-width: 760px;
  color: var(--white-soft, rgba(255,255,255,.82));
  font-size: clamp(1.1rem, 1.55vw, 1.42rem);
  line-height: 1.55;
  border-left: 6px solid var(--red, #b61f29);
  padding-left: 1.4rem;
}

/* Intro */
.rsce-intro-panel {
  position: relative;
  overflow: hidden;
  background: var(--black, #1d1d1b);
  color: #fff;
  padding: clamp(2rem, 6vw, 5rem);
}

.rsce-intro-panel::after {
  content: "";
  position: absolute;
  inset: auto 0 0 auto;
  width: 36%;
  height: 12px;
  background: var(--red, #b61f29);
}

/* Services */
.rsce-service-row {
  display: grid;
  grid-template-columns: minmax(3rem, 7rem) 1fr minmax(220px, 420px);
  gap: 1.5rem;
  border-top: 1px solid var(--line, rgba(29,29,27,.16));
  padding: 2rem 0;
  transition: background .2s ease, padding-left .2s ease;
}

.rsce-service-row:last-child {
  border-bottom: 1px solid var(--line, rgba(29,29,27,.16));
}

.rsce-service-row:hover {
  background: rgba(182,31,41,.07);
  padding-left: 1rem;
}

.rsce-service-no {
  color: var(--red, #b61f29);
  font-family: var(--font-headline, 'Archivo', sans-serif);
  font-weight: 900;
}

.rsce-service-title {
  margin: 0;
  font-family: var(--font-headline, 'Archivo', sans-serif);
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.07em;
  text-transform: uppercase;
}

.rsce-service-text {
  color: var(--muted, #6f6f6c);
}

/* References */
.rsce-reference-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.rsce-reference-card {
  min-height: 420px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  background: var(--black, #1d1d1b);
  color: #fff;
  text-decoration: none;
}

.rsce-reference-card img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
  transform: scale(1.03);
  transition: transform .35s ease, filter .35s ease;
}

.rsce-reference-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(29,29,27,.16), rgba(29,29,27,.88));
}

.rsce-reference-card:hover img {
  filter: grayscale(0) contrast(1.05);
  transform: scale(1.08);
}

.rsce-reference-inner {
  padding: 2rem;
}

/* FAQ */
.rsce-faq {
  border-top: 1px solid var(--line, rgba(29,29,27,.16));
}

.rsce-faq-item {
  border-bottom: 1px solid var(--line, rgba(29,29,27,.16));
}

.rsce-faq-button {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text, #1d1d1b);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.45rem 0;
  font-family: var(--font-headline, 'Archivo', sans-serif);
  font-size: clamp(1.35rem, 2.8vw, 2.6rem);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.055em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}

.rsce-faq-icon {
  color: var(--red, #b61f29);
  font-size: 2rem;
  line-height: 1;
}

.rsce-faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .25s ease;
}

.rsce-faq-button[aria-expanded="true"] + .rsce-faq-panel {
  grid-template-rows: 1fr;
}

.rsce-faq-panel-inner {
  overflow: hidden;
}

.rsce-faq-answer {
  max-width: 850px;
  padding: 0 0 1.65rem;
  color: var(--muted, #6f6f6c);
  font-size: 1.08rem;
  line-height: 1.65;
}

/* CTA */
.rsce-cta {
  position: relative;
  overflow: hidden;
  background: var(--black, #1d1d1b);
  color: #fff;
}

.rsce-cta::before {
  content: attr(data-symbol);
  position: absolute;
  right: 3vw;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(182,31,41,.26);
  font-family: var(--font-headline, 'Archivo', sans-serif);
  font-size: clamp(14rem,34vw,32rem);
  font-weight: 900;
  line-height: .7;
}

.rsce-cta .container {
  position: relative;
  z-index: 2;
}

.rsce-cta-text {
  max-width: 800px;
  color: var(--white-soft, rgba(255,255,255,.82));
  font-size: 1.15rem;
  line-height: 1.7;
}

/* Testimonials */
.rsce-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.rsce-testimonial {
  padding: clamp(1.5rem, 4vw, 3rem);
  background: rgba(255,255,255,.42);
  border-left: 8px solid var(--red, #b61f29);
}

.rsce-testimonial blockquote {
  margin: 0 0 1.5rem;
  font-size: 1.15rem;
  line-height: 1.65;
}

.rsce-testimonial strong {
  display: block;
  font-family: var(--font-headline, 'Archivo', sans-serif);
  font-weight: 900;
  text-transform: uppercase;
}

/* Facts */
.rsce-facts-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.rsce-fact {
  padding: clamp(1.5rem, 4vw, 3rem);
  background: rgba(255,255,255,.42);
  border-left: 8px solid var(--black, #1d1d1b);
}

.rsce-fact-number {
  color: transparent;
  font-family: var(--font-headline, 'Archivo', sans-serif);
  font-size: clamp(4rem, 8vw, 4.5rem);
  font-weight: 900;
  line-height: .8;
  -webkit-text-stroke: 1px var(--red, #b61f29);
}

/* Process */
.rsce-process-item {
  margin-bottom: 1.5rem;
  padding: 1.6rem 0 1.6rem 1.8rem;
  background: rgba(255,255,255,.38);
  border-left: 8px solid var(--black, #1d1d1b);
}

.rsce-process-item strong {
  display: block;
  font-family: var(--font-headline, 'Archivo', sans-serif);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.06em;
  text-transform: uppercase;
}

/* Contact */
.rsce-contact {
  background: var(--black, #1d1d1b);
  color: #fff;
}

.rsce-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 460px);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.rsce-contact-card {
  padding: clamp(1.5rem, 4vw, 3rem);
  background: rgba(255,255,255,.06);
  border-left: 8px solid var(--red, #b61f29);
}

.rsce-contact-card a {
  color: #fff;
  text-decoration: none;
}

@media (max-width: 991.98px) {
  .rsce-service-row,
  .rsce-contact-grid {
    grid-template-columns: 1fr;
  }

  .rsce-reference-grid,
  .rsce-testimonial-grid,
  .rsce-facts-grid {
    grid-template-columns: 1fr;
  }

  .rsce-service-row:hover {
    padding-left: 0;
  }
}

/* RSCE Beschreibung / Leistungsintro */

.rsce-description-section.tight,
.section.tight {
  padding-top: clamp(3rem, 6vw, 5rem);
}

.description-panel {
  position: relative;
  overflow: hidden;
  background: var(--black, #1d1d1b);
  color: #fff;
  padding: clamp(2rem, 6vw, 5rem);
}

.description-panel::after {
  content: "";
  position: absolute;
  inset: auto 0 0 auto;
  width: 36%;
  height: 12px;
  background: var(--red, #b61f29);
}

.description-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.description-text,
.description-panel p {
  color: rgba(255, 255, 255, .78);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.75;
}

.description-text p:first-child {
  margin-top: 0;
}

.description-text p:last-child {
  margin-bottom: 0;
}

.check-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  gap: 1rem;
}

.check-list li {
  position: relative;
  padding-left: 2rem;
  color: rgba(255, 255, 255, .82);
  font-weight: 700;
}

.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--red, #b61f29);
  font-weight: 900;
}

@media (max-width: 991.98px) {
  .description-grid {
    grid-template-columns: 1fr;
  }
}

.bg-dark h2 {
  color:#fff;
}

.nav-dropdown-toggle {
  width: 100%;
  border: 0;
  background: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-dropdown-menu {
  display: none;
  padding: .75rem 0 1.5rem 0;
}

.nav-dropdown.is-open .nav-dropdown-menu {
  display: block;
}

.nav-dropdown-menu a {
  font-size: clamp(1.45rem, 4vw, 2.4rem) !important;
  color: rgba(255,255,255,.7);
  padding-left: 1.5rem !important;
}

.nav-dropdown-icon {
  color: var(--red);
  font-size: .5em;
}

/* Offcanvas Navigation Upgrade */

.offcanvas {
  background:
    radial-gradient(circle at 80% 12%, rgba(182,31,41,.16), transparent 30%),
    linear-gradient(180deg, #1d1d1b 0%, #141412 100%);
}

.offcanvas-body {
  position: relative;
}

.offcanvas-body::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .06;
  background-image:
    linear-gradient(rgba(255,255,255,.45) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.45) 1px, transparent 1px);
  background-size: 44px 44px;
}

.offcanvas .mod_navigation {
  position: relative;
  z-index: 2;
}

.offcanvas .nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: .6rem;
  width: max-content;
  max-width: 100%;
  padding: .08rem .35rem .14rem 0;
  color: #fff;
  transition:
    color .25s ease,
    transform .25s ease,
    opacity .25s ease;
}

.offcanvas .nav-link:hover {
  color: var(--red);
  transform: translateX(.4rem);
}

.offcanvas .nav-link::before {
  content: "";
  position: absolute;
  left: -.85rem;
  top: 50%;
  width: .35rem;
  height: 0;
  background: var(--red);
  transform: translateY(-50%);
  transition: height .25s ease;
}

.offcanvas .nav-link:hover::before,
.offcanvas .nav-dropdown.is-open > .nav-dropdown-toggle::before {
  height: 68%;
}

.nav-dropdown-toggle {
  cursor: pointer;
}

.nav-dropdown-icon {
  margin-left: .45rem;
  color: var(--red);
  font-size: .48em;
  line-height: 1;
  transition: transform .45s ease;
}

.nav-dropdown.is-open .nav-dropdown-icon {
  transform: rotate(180deg);
}

/* langsamer animiertes Dropdown */
.nav-dropdown-menu {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  padding: 0;
  opacity: 0;
  transition:
    grid-template-rows .65s cubic-bezier(.22, 1, .36, 1),
    opacity .45s ease,
    padding .45s ease;
}

.nav-dropdown.is-open .nav-dropdown-menu {
  grid-template-rows: 1fr;
  opacity: 1;
  padding: .65rem 0 1.4rem;
}

.nav-dropdown-menu > * {
  min-height: 0;
}

.nav-dropdown-menu a {
  display: block;
  width: max-content;
  max-width: 100%;
  padding: .22rem 0 .22rem 1.35rem !important;
  color: rgba(255,255,255,.62) !important;
  font-size: clamp(1.25rem, 3vw, 2rem) !important;
  line-height: 1.05 !important;
  letter-spacing: .12em !important;
  opacity: 0;
  transform: translateY(-.35rem);
  transition:
    opacity .4s ease,
    transform .4s ease,
    color .25s ease;
}

.nav-dropdown.is-open .nav-dropdown-menu a {
  opacity: 1;
  transform: translateY(0);
}

.nav-dropdown-menu a:hover {
  color: var(--red) !important;
}

.nav-dropdown.is-open .nav-dropdown-menu a:nth-child(1) { transition-delay: .08s; }
.nav-dropdown.is-open .nav-dropdown-menu a:nth-child(2) { transition-delay: .14s; }
.nav-dropdown.is-open .nav-dropdown-menu a:nth-child(3) { transition-delay: .20s; }
.nav-dropdown.is-open .nav-dropdown-menu a:nth-child(4) { transition-delay: .26s; }
.nav-dropdown.is-open .nav-dropdown-menu a:nth-child(5) { transition-delay: .32s; }

.offcanvas .mt-auto {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(255,255,255,.12);
}

.offcanvas .btn-red {
  box-shadow: 0 18px 44px rgba(182,31,41,.28);
}

/* Dropdown kompakt */

.nav-dropdown {
    margin: 0;
    padding: 0;
}

.nav-dropdown-toggle {
    width: auto;
    padding: 0 !important;
    margin: 0 !important;
    line-height: .9;
}

.nav-dropdown-menu {
    margin: 0;
}

/* Abstand zwischen Hauptpunkten reduzieren */
.offcanvas .nav-link,
.offcanvas .nav-dropdown-toggle {
    display: flex;
    align-items: center;
    padding: 0 !important;
    margin: 0 !important;
    line-height: .88;
}

/* Offcanvas: Abstand zwischen Hauptpunkten fixen */
.offcanvas .mod_navigation.nav {
  display: block !important;
}

.offcanvas .mod_navigation > a.nav-link,
.offcanvas .mod_navigation > .nav-dropdown,
.offcanvas .mod_navigation > .nav-dropdown > .nav-dropdown-toggle {
  margin: 0 !important;
  padding: 0 !important;
}

.offcanvas .mod_navigation > a.nav-link,
.offcanvas .nav-dropdown-toggle {
  font-size: clamp(3.4rem, 7vw, 3.9rem);
  line-height: .78 !important;
}

.offcanvas .nav-dropdown {
  display: block !important;
  line-height: 0;
}

.offcanvas .nav-dropdown-toggle {
  height: auto;
  min-height: 0;
}

.offcanvas .nav-dropdown:not(.is-open) .nav-dropdown-menu {
  display: none !important;
}

.offcanvas .nav-dropdown.is-open .nav-dropdown-menu {
  display: grid !important;
  padding: .35rem 0 .65rem !important;
}

    .facts{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
    .facts-grid,.testimonial-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
    .fact,.testimonial{padding:clamp(1.5rem,4vw,3rem);background:rgba(255,255,255,.42);border-left:8px solid var(--black)}
    .fact-number{color:transparent;font-family:var(--font-headline);font-size:clamp(4rem,8vw,8rem);font-weight:900;line-height:.8;-webkit-text-stroke:1px var(--red)}
    .fact strong,.testimonial strong{display:block;margin-top:1rem;font-family:var(--font-headline);font-weight:900;text-transform:uppercase;letter-spacing:-.04em}
    
       .filter-bar{display:flex;flex-wrap:wrap;gap:.65rem;margin:2rem 0 2.5rem}
    .filter-pill{border:1px solid var(--line);padding:.65rem .85rem;background:rgba(255,255,255,.42);color:var(--text);font-weight:900;text-transform:uppercase;letter-spacing:.03em;font-size:.85rem}
    .filter-pill.is-active{background:var(--red);border-color:var(--red);color:#fff}
    .reference-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
    .reference-card{min-height:460px;position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:flex-end;background:var(--black);color:#fff;text-decoration:none}
    .reference-card:nth-child(1),.reference-card:nth-child(4){grid-column:span 2}
    .reference-card img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08);transform:scale(1.03);transition:transform .35s ease,filter .35s ease}
    .reference-card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(29,29,27,.16),rgba(29,29,27,.9))}
    .reference-card:hover img{filter:grayscale(0) contrast(1.05);transform:scale(1.08)}
    .reference-inner{padding:2rem;max-width:720px}.reference-count{position:absolute;top:1.5rem;left:1.5rem;color:transparent;font-family:var(--font-headline);font-size:4.5rem;font-weight:900;line-height:.8;-webkit-text-stroke:1px rgba(255,255,255,.72)}
    .reference-card h3{margin:.6rem 0 .8rem;font-family:var(--font-headline);font-size:clamp(2rem,4vw,2.7rem);font-weight:900;line-height:.9;letter-spacing:-.07em;text-transform:uppercase}
    .reference-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}.reference-meta span{display:inline-flex;padding:.45rem .65rem;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);font-size:.78rem;font-weight:800;text-transform:uppercase}
    
/* ============================================================
   RSCE Kontaktbereich – Erdmann Medien
   Benötigt: Font Awesome 6.5.2 + bestehende Design Tokens
============================================================ */

.rsce-contact {
  position: relative;
  overflow: hidden;
  background: var(--black, #1d1d1b);
  color: #fff;
  padding: clamp(5rem, 9vw, 9rem) 0;
}

.rsce-contact__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 18%, rgba(182, 31, 41, .14), transparent 28%),
    radial-gradient(circle at 82% 50%, rgba(255, 255, 255, .06), transparent 32%),
    linear-gradient(180deg, #1d1d1b 0%, #151513 100%);
  pointer-events: none;
}

.rsce-contact__inner {
  position: relative;
  z-index: 2;
}

.rsce-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 560px);
  gap: clamp(3rem, 7vw, 6rem);
  align-items: start;
}

.rsce-contact__left {
  max-width: 680px;
}

.rsce-contact__kicker {
  margin-bottom: 1rem;
}

.rsce-contact__title {
  margin: 0 0 1.8rem;
  color: #fff;
  font-family: var(--font-headline, 'Archivo', sans-serif);
  font-size: clamp(3.4rem, 7.8vw, 7.3rem);
  font-weight: 900;
  line-height: .86;
  letter-spacing: -.085em;
  text-transform: uppercase;
  text-wrap: balance;
}

.rsce-contact__title::after {
  content: ".";
  color: var(--red, #b61f29);
}

.rsce-contact__text {
  max-width: 620px;
  color: rgba(255, 255, 255, .76);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.75;
}

.rsce-contact__text p:last-child {
  margin-bottom: 0;
}

.rsce-contact__info {
  list-style: none;
  padding: 0;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  display: grid;
  gap: 0;
}

.rsce-contact__info-item {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 1.35rem;
  align-items: center;
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.rsce-contact__info-item:first-child {
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.rsce-contact__icon {
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--red, #b61f29);
  color: #fff;
  font-size: 1.35rem;
  box-shadow: 0 18px 38px rgba(182, 31, 41, .22);
}

.rsce-contact__info-label {
  margin-bottom: .25rem;
  color: rgba(255, 255, 255, .9);
  font-family: var(--font-headline, 'Archivo', sans-serif);
  font-size: .88rem;
  font-weight: 900;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.rsce-contact__info-content a,
.rsce-contact__info-text {
  color: rgba(255, 255, 255, .82);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.45;
  text-decoration: none;
}

.rsce-contact__info-content a:hover {
  color: var(--red, #b61f29);
}

.rsce-contact__appointment {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 1.25rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  background: rgba(255, 255, 255, .055);
  border-left: 5px solid var(--red, #b61f29);
}

.rsce-contact__appointment-icon {
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--red, #b61f29);
  color: #fff;
  font-size: 1.35rem;
}

.rsce-contact__appointment strong {
  display: block;
  margin-bottom: .45rem;
  color: #fff;
  font-family: var(--font-headline, 'Archivo', sans-serif);
  font-weight: 900;
  text-transform: uppercase;
}

.rsce-contact__appointment p {
  margin: 0 0 .9rem;
  color: rgba(255, 255, 255, .72);
  line-height: 1.6;
}

.rsce-contact__appointment a {
  color: var(--red, #b61f29);
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.rsce-contact__appointment a i {
  margin-left: .45rem;
  transition: transform .2s ease;
}

.rsce-contact__appointment a:hover i {
  transform: translateX(.25rem);
}

/* Formular-Karte */

.rsce-contact__form-card {
  position: relative;
  padding: clamp(1.7rem, 4vw, 3rem);
  background: rgba(255, 255, 255, .06);
  border-left: 6px solid var(--red, #b61f29);
  box-shadow: 0 32px 80px rgba(0, 0, 0, .22);
}

.rsce-contact__form-card .ce_form h2 {
  display: none;
}

.rsce-contact__form-card form {
  margin: 0;
}

.rsce-contact__form-card .formbody {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1.5rem;
}

.rsce-contact__form-card .widget {
  margin: 0;
}

.rsce-contact__form-card .widget-text:first-of-type,
.rsce-contact__form-card .widget-textarea,
.rsce-contact__form-card .widget-upload,
.rsce-contact__form-card .widget-explanation,
.rsce-contact__form-card .widget-checkbox,
.rsce-contact__form-card .widget-submit {
  grid-column: 1 / -1;
}

.rsce-contact__form-card label {
  display: block;
  margin-bottom: .35rem;
  color: rgba(255, 255, 255, .94);
  font-weight: 800;
  font-size: .92rem;
}

.rsce-contact__form-card .form-control,
.rsce-contact__form-card input.text,
.rsce-contact__form-card input.captcha,
.rsce-contact__form-card textarea,
.rsce-contact__form-card select {
  width: 100%;
  min-height: 3.05rem;
  padding: .65rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .26);
  color: #fff;
  font-size: 1rem;
  box-shadow: none;
  transition: border-color .2s ease, background .2s ease;
}

.rsce-contact__form-card textarea,
.rsce-contact__form-card .widget-textarea .form-control {
  min-height: 8rem;
  padding: .85rem;
  border: 1px solid rgba(255, 255, 255, .22);
  resize: vertical;
}

.rsce-contact__form-card .form-control:focus,
.rsce-contact__form-card input.text:focus,
.rsce-contact__form-card input.captcha:focus,
.rsce-contact__form-card textarea:focus,
.rsce-contact__form-card select:focus {
  background: rgba(255, 255, 255, .04);
  border-color: var(--red, #b61f29);
  color: #fff;
  outline: 0;
}

.rsce-contact__form-card ::placeholder {
  color: rgba(255, 255, 255, .45);
}

.rsce-contact__form-card input[type="file"] {
  width: 100%;
  padding: .65rem;
  border: 1px solid rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .72);
  background: transparent;
}

.rsce-contact__form-card input[type="file"]::file-selector-button {
  margin-right: .8rem;
  padding: .65rem .9rem;
  border: 0;
  background: #fff;
  color: var(--black, #1d1d1b);
  font-weight: 800;
}

.rsce-contact__form-card .widget-checkbox fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.rsce-contact__form-card .widget-checkbox label,
.rsce-contact__form-card .checkbox_container label {
  display: inline;
  color: rgba(255, 255, 255, .72);
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.6;
}

.rsce-contact__form-card input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin-right: .55rem;
  accent-color: var(--red, #b61f29);
}

.rsce-contact__form-card .widget-submit {
  margin-top: .6rem;
}

.rsce-contact__form-card .submit,
.rsce-contact__form-card button[type="submit"] {
  width: 100%;
  min-height: 3.65rem;
  border: 1px solid var(--red, #b61f29);
  background: var(--red, #b61f29);
  color: #fff;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .035em;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.rsce-contact__form-card .submit::after,
.rsce-contact__form-card button[type="submit"]::after {
  content: "\f1d8";
  margin-left: .75rem;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

.rsce-contact__form-card .submit:hover,
.rsce-contact__form-card button[type="submit"]:hover {
  background: var(--red-dark, #901922);
  border-color: var(--red-dark, #901922);
  transform: translateY(-2px);
}

.rsce-contact__form-card .error,
.rsce-contact__form-card .captcha_text {
  color: #ffb3b8;
}

@media (max-width: 991.98px) {
  .rsce-contact__grid {
    grid-template-columns: 1fr;
  }

  .rsce-contact__left {
    max-width: none;
  }
}

@media (max-width: 575.98px) {
  .rsce-contact__info-item,
  .rsce-contact__appointment {
    grid-template-columns: 48px 1fr;
    gap: 1rem;
  }

  .rsce-contact__icon,
  .rsce-contact__appointment-icon {
    width: 48px;
    height: 48px;
    font-size: 1.1rem;
  }

  .rsce-contact__form-card .formbody {
    grid-template-columns: 1fr;
  }
}