:root {
  --bg: #070504;
  --bg-soft: #0d0907;
  --panel: rgba(17, 12, 9, 0.88);
  --text: #eee7db;
  --muted: #afa498;
  --gold: #d2a15f;
  --bronze: #9c6038;
  --violet: #a06fbd;
  --line: rgba(190, 128, 70, 0.26);
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --max: 1500px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); line-height: 1.7; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: .16; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -60px; left: 1rem; z-index: 100; padding: .8rem 1rem; background: #fff; color: #111; }
.skip-link:focus { top: 1rem; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; justify-content: space-between; min-height: 72px; padding: 0 max(1.25rem, calc((100vw - var(--max)) / 2)); border-bottom: 1px solid rgba(190,128,70,.16); background: rgba(5,4,3,.88); backdrop-filter: blur(14px); }
.brand { color: #e3bd7e; font: 600 .95rem/1 var(--serif); letter-spacing: .18em; text-decoration: none; text-transform: uppercase; }
.site-nav { display: flex; gap: 1.8rem; align-items: center; }
.site-nav a { position: relative; padding: 1.7rem 0 1.45rem; color: #bdb2a6; font-size: .67rem; letter-spacing: .16em; text-decoration: none; text-transform: uppercase; }
.site-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 1rem; height: 1px; background: #d5753d; transition: right .25s ease; }
.site-nav a:hover, .site-nav a.is-active { color: #eee3d2; }
.site-nav a:hover::after, .site-nav a.is-active::after { right: 0; }
.nav-toggle { display: none; width: 42px; height: 42px; padding: 9px; border: 1px solid var(--line); background: transparent; color: white; }
.nav-toggle > span:not(.sr-only) { display: block; width: 100%; height: 1px; margin: 5px 0; background: currentColor; }

.kicker { margin-bottom: .7rem; color: var(--gold); font-size: .67rem; letter-spacing: .28em; text-transform: uppercase; }
.hero, .closing { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; }
.hero__image, .closing__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,3,3,.28), rgba(3,3,3,.12) 38%, rgba(5,4,3,.74) 100%), radial-gradient(circle at 50% 48%, transparent 0 18%, rgba(3,3,3,.25) 58%, rgba(3,3,3,.62) 100%); }
.hero__content { position: relative; z-index: 1; width: min(860px, calc(100% - 2rem)); padding-top: 80px; text-align: center; }
.hero h1 { margin: 0 0 .75rem; font-size: clamp(4rem, 10vw, 8rem); line-height: .9; text-transform: uppercase; letter-spacing: .06em; text-shadow: 0 6px 32px #000; }
.hero__lead { margin: 0 auto .9rem; color: #f2c681; font: clamp(1.15rem, 2.2vw, 1.7rem)/1.4 var(--serif); }
.hero__copy { max-width: 720px; margin: 0 auto; color: #d1c8bd; font-size: clamp(.98rem, 1.5vw, 1.1rem); }
.scroll-cue { display: inline-flex; gap: .7rem; align-items: center; margin-top: 2.2rem; color: #e6d9c8; font-size: .72rem; letter-spacing: .14em; text-decoration: none; text-transform: uppercase; }

.section { width: min(var(--max), calc(100% - 2rem)); margin-inline: auto; padding: clamp(5rem, 10vw, 9rem) 0; }
.section-heading { max-width: 820px; }
.section-heading h2 { margin-bottom: 1rem; font-size: clamp(2.2rem, 5vw, 4.6rem); line-height: 1.05; }
.section-heading--center { margin-inline: auto; text-align: center; }
.section-heading--center > p:last-child { color: var(--muted); }
.intro__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 7vw, 7rem); align-items: start; margin-top: 3rem; }
.intro__grid p { margin: 0; color: var(--muted); }
.intro__statement { color: #e6ddd1 !important; font: 1.35rem/1.65 var(--serif); }

.member { display: grid; grid-template-columns: minmax(320px, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 7vw, 7rem); align-items: center; }
.member--sina { grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); }
.member--sina .member__visual { order: 2; }
.member--sina .member__content { order: 1; }
.member__visual { position: relative; padding: 1px; background: linear-gradient(145deg, rgba(215,157,85,.65), rgba(80,43,28,.05) 45%, rgba(137,92,165,.45)); }
.member__visual::before { content: ""; position: absolute; inset: 14px; z-index: 1; border: 1px solid rgba(233,186,126,.20); pointer-events: none; }
.member__visual img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; filter: saturate(.86) contrast(1.05); }
.member__index { margin: 0 0 1rem; color: var(--gold); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; }
.member__content > h2 { margin-bottom: .2rem; font-size: clamp(3rem, 7vw, 5.8rem); line-height: 1; }
.member__role { margin: 0 0 .9rem; color: #d9a867; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.member__tagline { max-width: 680px; margin: 0 0 2rem; color: #e4d9c9; font: italic clamp(1.05rem, 2vw, 1.35rem)/1.6 var(--serif); }
.focus { margin: 2rem 0; padding: 1.5rem; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(26,16,11,.80), rgba(9,7,6,.88)); }
.focus h3, .personal-note h3 { margin-bottom: 1rem; color: #cda56e; font-size: .88rem; letter-spacing: .16em; text-transform: uppercase; }
.focus__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.focus__list li { display: flex; gap: .75rem; color: #cfc5b8; }
.focus__mark { display: inline-grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border: 1px solid rgba(180,115,73,.45); color: #d39b60; }
.personal-note { padding-top: 1.5rem; border-top: 1px solid var(--line); }
.personal-note p { margin: 0; color: var(--muted); }

.collaboration { width: min(1720px, calc(100% - 1.25rem)); padding-top: 2rem; }
.collaboration-desktop { position: relative; width: 100%; aspect-ratio: 1376 / 768; overflow: hidden; }
.collaboration-stage { position: absolute; top: 0; left: 0; width: 1376px; height: 768px; transform-origin: 0 0; color: #d8cec0; }
.collaboration-stage__image { position: absolute; inset: 0; width: 1376px; height: 768px; object-fit: fill; }

.workflow-heading { position: absolute; top: 22px; left: 410px; width: 556px; height: 66px; display: grid; align-content: center; text-align: center; }
.workflow-heading h2 { margin: 0 0 4px; color: #ead8ba; font-size: 34px; line-height: 1; letter-spacing: .09em; text-transform: uppercase; text-shadow: 0 3px 16px #000; }
.workflow-heading p { margin: 0; color: #c4b19b; font-size: 12px; line-height: 1.25; letter-spacing: .035em; text-shadow: 0 2px 8px #000; }

.workflow-steps { position: absolute; top: 205px; left: 72px; width: 1232px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; margin: 0; padding: 0; list-style: none; text-align: center; }
.workflow-steps li { min-width: 0; }
.workflow-steps h3 { margin: 0 0 6px; color: #ecd5b1; font-size: 15px; line-height: 1.15; letter-spacing: .045em; text-transform: uppercase; text-shadow: 0 2px 10px #000, 0 0 8px rgba(0,0,0,.9); }
.workflow-steps p { max-width: 210px; margin: 0 auto; color: #b9aea0; font-size: 11px; line-height: 1.35; text-shadow: 0 2px 8px #000; }

.workflow-role {
  position: absolute;
  top: 324px;
  width: 228px;
  height: 322px;
  color: #d8cec0;
}

/* RENE */
.workflow-role--rene {
  left: 34px;
}

.workflow-role--rene .workflow-role__head {
  position: absolute;
  top: 42px;
  left: 64px;
  right: 18px;
  min-height: 72px;
  text-align: left;
}

.workflow-role--rene .workflow-role__summary {
  position: absolute;
  top: 159px;
  left: 30px;
  right: 22px;
  margin: 0;
  color: #ded3c3;
  font: 11px/1.4 var(--serif);
  text-shadow: 0 2px 8px #000;
}

.workflow-role--rene .workflow-role__focus {
  position: absolute;
  top: 225px;
  left: 26px;
  right: 17px;
  height: 105px;
  padding: 16px 10px 7px;
}

/* SINA */
.workflow-role--sina {
  right: 34px;
}

.workflow-role--sina .workflow-role__head {
  position: absolute;
  top: 42px;
  left: 18px;
  right: 64px;
  min-height: 72px;
  text-align: right;
}

.workflow-role--sina .workflow-role__summary {
  position: absolute;
  top: 159px;
  left: 20px;
  right: 28px;
  margin: 0;
  color: #ded3c3;
  font: 11px/1.4 var(--serif);
  text-align: left;
  text-shadow: 0 2px 8px #000;
}

.workflow-role--sina .workflow-role__focus {
  position: absolute;
  top: 225px;
  left: 17px;
  right: 26px;
  height: 105px;
  padding: 16px 10px 7px;
}

/* GEMEINSAME TYPOGRAFIE */
.workflow-role__head h3 {
  margin: 0 0 6px;
  color: #f0ddbf;
  font-size: 24px;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-shadow: 0 2px 12px #000;
}

.workflow-role__head p {
  margin: 0;
  color: #d1a36b;
  font-size: 8.8px;
  line-height: 1.35;
  letter-spacing: .075em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px #000;
}

.workflow-role__focus h4 {
  margin: 0 0 7px;
  color: #d0a4e0;
  font-size: 10.5px;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.workflow-role__focus ul {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.workflow-role__focus li {
  position: relative;
  padding-left: 11px;
  color: #cbc0b3;
  font-size: 8.5px;
  line-height: 1.15;
  white-space: normal;
}

.workflow-role__focus li::before {
  content: "◇";
  position: absolute;
  left: 0;
  color: #c28cda;
}

/* UNTERE ABSCHLUSSZEILE */
.workflow-closing {
  position: absolute;
  left: 404px;
  bottom: 39px;
  width: 568px;
  margin: 0;
  color: #d0a3df;
  font-size: 16px;
  line-height: 1;
  letter-spacing: .13em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 2px 10px #000;
}
.collaboration-mobile { display: none; }

.closing { min-height: 760px; }
.closing__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,3,3,.78), rgba(4,3,3,.28) 55%, rgba(4,3,3,.58)), linear-gradient(180deg, #070504 0%, transparent 22%, rgba(4,3,3,.55) 100%); }
.closing__content { position: relative; z-index: 1; width: min(720px, calc(100% - 2rem)); margin-left: max(1rem, calc((100vw - var(--max)) / 2)); padding: 6rem 0; }
.closing__content h2 { margin-bottom: 1.4rem; font-size: clamp(2.7rem, 6vw, 5rem); line-height: 1; }
.closing__content p:not(.kicker) { color: #d0c5b8; }
.site-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 2rem max(1rem, calc((100vw - var(--max)) / 2)); border-top: 1px solid var(--line); color: #897f75; font-size: .78rem; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 1050px) {
  .nav-toggle { display: block; }
  .site-nav { position: fixed; inset: 72px 0 auto; display: grid; gap: 0; padding: 1rem; border-bottom: 1px solid var(--line); background: rgba(5,4,3,.98); transform: translateY(-130%); transition: transform .3s ease; }
  .site-nav.is-open { transform: translateY(0); }
  .site-nav a { padding: 1rem; border-bottom: 1px solid rgba(255,255,255,.06); }
  .intro__grid, .member, .member--sina { grid-template-columns: 1fr; }
  .member--sina .member__visual, .member--sina .member__content { order: initial; }
  .member__visual { max-width: 620px; margin-inline: auto; }
  .collaboration-art { display: none; }
  .collaboration-mobile { display: block; }
  .mobile-steps { display: grid; gap: .85rem; margin: 3rem 0; padding: 0; list-style: none; }
  .mobile-steps li { display: grid; grid-template-columns: 52px 1fr; gap: 1rem; padding: 1.1rem; border: 1px solid rgba(155,105,178,.25); background: linear-gradient(145deg, rgba(24,15,25,.55), rgba(8,6,7,.88)); }
  .mobile-steps span { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid rgba(161,108,188,.65); border-radius: 50%; color: #c39bdd; font-family: var(--serif); }
  .mobile-steps h3 { margin: .15rem 0 .3rem; color: #e5cfae; font-size: 1rem; letter-spacing: .07em; text-transform: uppercase; }
  .mobile-steps p { margin: 0; color: var(--muted); }
  .mobile-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .mobile-roles article { padding: 1.5rem; border: 1px solid var(--line); background: rgba(12,9,8,.84); }
  .mobile-roles h3 { margin-bottom: .3rem; color: #ead6b8; font-size: 2rem; text-transform: uppercase; }
  .mobile-roles__role { color: #cb9f67 !important; font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; }
  .mobile-roles p { color: var(--muted); }
  .mobile-closing { margin: 2rem 0 0; color: #bd91cf; font-size: .72rem; letter-spacing: .18em; text-align: center; text-transform: uppercase; }
  .closing__content { margin-inline: auto; }
}

@media (max-width: 620px) {
  .site-header { min-height: 66px; }
  .site-nav { inset-block-start: 66px; }
  .hero { min-height: 820px; }
  .hero__image { object-position: center; }
  .hero__shade { background: linear-gradient(180deg, rgba(3,3,3,.30), rgba(3,3,3,.48) 42%, #070504 96%); }
  .hero__content { align-self: end; padding: 0 0 4.5rem; }
  .hero h1 { font-size: clamp(3rem, 18vw, 4.8rem); }
  .section { width: min(100% - 1.2rem, var(--max)); padding: 4.5rem 0; }
  .focus__list, .mobile-roles { grid-template-columns: 1fr; }
  .member__content > h2 { font-size: 3.6rem; }
  .closing { min-height: 760px; }
  .closing__image { object-position: 52% center; }
  .closing__shade { background: linear-gradient(180deg, rgba(4,3,3,.22), rgba(4,3,3,.72) 48%, #050403 100%); }
  .closing__content { align-self: end; padding: 0 0 4rem; }
  .site-footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}



/* TEAM WORKFLOW FINAL ALIGNMENT START */

/* -------------------------------------------------------
   EINHEITLICHER WEBSITE-HEADER
------------------------------------------------------- */

:root {
  --team-header-height: 74px;
  --team-page-width: 1680px;
  --team-header-border: #332419;
  --team-header-gold: #f0d6a5;
  --team-header-ember: #e9682e;
}

.page-width {
  width: min(var(--team-page-width), calc(100% - 48px));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  inset: auto;
  top: 0;
  z-index: 100;
  display: block;
  min-height: var(--team-header-height);
  padding: 0;
  border-bottom: 1px solid var(--team-header-border);
  background: rgba(4, 4, 3, 0.97);
  backdrop-filter: blur(12px);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: var(--team-header-height);
}

.site-header .brand {
  display: block;
  flex: 0 0 300px;
  width: 300px;
  padding: 0;
  color: inherit;
  line-height: 1;
  text-decoration: none;
  letter-spacing: normal;
  text-transform: none;
}

.site-header .brand strong {
  display: block;
  color: var(--team-header-gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 2px;
}

.site-header .brand span {
  display: block;
  margin-top: 6px;
  color: #b55c34;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 2.8px;
}

.main-navigation {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 42px;
}

.main-navigation a {
  position: relative;
  padding: 28px 0 24px;
  color: #d0c2b1;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0;
}

.main-navigation a::after {
  content: "";
  position: absolute;
  right: auto;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  transform: translateX(-50%);
  background: var(--team-header-ember);
  box-shadow: 0 0 14px rgba(233, 104, 46, 0.8);
  transition: width 0.18s ease;
}

.main-navigation a:hover,
.main-navigation a.active {
  color: #ffc471;
}

.main-navigation a:hover::after,
.main-navigation a.active::after {
  right: auto;
  width: 100%;
}

.header-button {
  flex: 0 0 auto;
  padding: 14px 24px;
  border: 1px solid #934220;
  color: #f1deca;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

.header-button:hover {
  background: rgba(130, 47, 24, 0.2);
}

.menu-toggle {
  display: none;
  width: auto;
  height: auto;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: #d4ae72;
  font-size: 28px;
  line-height: 1;
}

/* -------------------------------------------------------
   FESTE ARBEITSFLÄCHE FÜR DAS 1376 × 768 HINTERGRUNDBILD
------------------------------------------------------- */

.collaboration {
  width: min(1720px, calc(100% - 1.25rem));
  padding-top: 2rem;
}

.collaboration-desktop {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1376 / 768;
  overflow: hidden;
}

.collaboration-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 1376px;
  height: 768px;
  color: #d8cec0;
  transform-origin: top left;
}

.collaboration-stage__image {
  position: absolute;
  inset: 0;
  width: 1376px;
  height: 768px;
  object-fit: fill;
}

/* -------------------------------------------------------
   OBERER WORKFLOW
------------------------------------------------------- */

.workflow-heading {
  position: absolute;
  top: 22px;
  left: 410px;
  display: grid;
  align-content: center;
  width: 556px;
  height: 66px;
  text-align: center;
}

.workflow-heading h2 {
  margin: 0 0 4px;
  color: #ead8ba;
  font-size: 34px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  text-shadow: 0 3px 16px #000;
}

.workflow-heading p {
  margin: 0;
  color: #c4b19b;
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: 0.035em;
  text-shadow: 0 2px 8px #000;
}

.workflow-steps {
  position: absolute;
  top: 202px;
  left: 72px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
  width: 1232px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.workflow-steps li {
  min-width: 0;
}

.workflow-steps h3 {
  margin: 0 0 5px;
  color: #ecd5b1;
  font-size: 14px;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-shadow:
    0 2px 10px #000,
    0 0 8px rgba(0, 0, 0, 0.9);
}

.workflow-steps p {
  max-width: 205px;
  margin: 0 auto;
  color: #b9aea0;
  font-size: 10.5px;
  line-height: 1.34;
  text-shadow: 0 2px 8px #000;
}

/* -------------------------------------------------------
   RENE UND SINA – PASSEND ZU DEN NEUEN LEEREN PANELS
------------------------------------------------------- */

.workflow-role {
  position: absolute;
  top: 324px;
  width: 228px;
  height: 322px;
  color: #d8cec0;
}

/* RENE */

.workflow-role--rene {
  left: 34px;
}

.workflow-role--rene .workflow-role__head {
  position: absolute;
  top: 31px;
  right: 18px;
  left: 58px;
  min-height: 76px;
  padding: 0;
  text-align: left;
}

.workflow-role--rene .workflow-role__summary {
  position: absolute;
  top: 126px;
  right: 20px;
  left: 24px;
  margin: 0;
  color: #ded3c3;
  font: 11.3px/1.42 Georgia, "Times New Roman", serif;
  text-shadow: 0 2px 8px #000;
}

.workflow-role--rene .workflow-role__focus {
  position: absolute;
  top: 220px;
  right: 17px;
  left: 20px;
  height: 102px;
  padding: 14px 13px 7px;
}

/* SINA */

.workflow-role--sina {
  right: 34px;
  left: auto;
}

.workflow-role--sina .workflow-role__head {
  position: absolute;
  top: 31px;
  right: 58px;
  left: 18px;
  min-height: 76px;
  padding: 0;
  text-align: right;
}

.workflow-role--sina .workflow-role__summary {
  position: absolute;
  top: 126px;
  right: 24px;
  left: 20px;
  margin: 0;
  color: #ded3c3;
  font: 11.3px/1.42 Georgia, "Times New Roman", serif;
  text-align: left;
  text-shadow: 0 2px 8px #000;
}

.workflow-role--sina .workflow-role__focus {
  position: absolute;
  top: 220px;
  right: 20px;
  left: 17px;
  height: 102px;
  padding: 14px 13px 7px;
}

/* GEMEINSAME ROLLENTYPOGRAFIE */

.workflow-role__head h3 {
  margin: 0 0 6px;
  color: #f0ddbf;
  font-size: 24px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  text-shadow: 0 2px 12px #000;
}

.workflow-role__head p {
  margin: 0;
  color: #d1a36b;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 8.6px;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  text-shadow: 0 2px 8px #000;
}

.workflow-role__focus h4 {
  margin: 0 0 7px;
  color: #d0a4e0;
  font-size: 10.2px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.workflow-role__focus ul {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.workflow-role__focus li {
  position: relative;
  padding-left: 12px;
  color: #cbc0b3;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 8.4px;
  line-height: 1.15;
  white-space: normal;
}

.workflow-role__focus li::before {
  content: "◇";
  position: absolute;
  top: 0;
  left: 0;
  color: #c28cda;
}

/* -------------------------------------------------------
   UNTERE ABSCHLUSSZEILE
------------------------------------------------------- */

.workflow-closing {
  position: absolute;
  bottom: 40px;
  left: 404px;
  width: 568px;
  margin: 0;
  color: #d0a3df;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: 0.15em;
  text-shadow: 0 2px 10px #000;
}

/* -------------------------------------------------------
   RESPONSIVE NAVIGATION
------------------------------------------------------- */

@media (max-width: 1180px) {
  .site-header .brand {
    flex-basis: 240px;
    width: 240px;
  }

  .main-navigation {
    gap: 25px;
  }

  .main-navigation a {
    font-size: 12px;
  }

  .header-button {
    padding: 12px 16px;
    font-size: 13px;
  }
}

@media (max-width: 1050px) {
  .site-header {
    position: sticky;
  }

  .header-inner {
    position: relative;
  }

  .site-header .brand {
    flex: 1;
    width: auto;
  }

  .site-header .brand strong {
    font-size: 23px;
  }

  .site-header .brand span {
    font-size: 8px;
  }

  .menu-toggle {
    display: block;
  }

  .header-button {
    display: none;
  }

  .main-navigation {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    gap: 0;
    padding: 10px 24px 18px;
    border-top: 1px solid #2c2018;
    border-bottom: 1px solid #3a281b;
    background: rgba(4, 4, 3, 0.99);
  }

  .main-navigation.open {
    display: grid;
  }

  .main-navigation a {
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 13px;
  }

  .main-navigation a::after {
    display: none;
  }

  .collaboration-desktop {
    display: none;
  }

  .collaboration-mobile {
    display: block;
  }
}

@media (max-width: 620px) {
  .page-width {
    width: min(100% - 28px, var(--team-page-width));
  }

  .site-header .brand strong {
    font-size: 20px;
  }

  .site-header .brand span {
    font-size: 8px;
    letter-spacing: 2px;
  }
}

/* TEAM WORKFLOW FINAL ALIGNMENT END */

/* TEAM ROLE TEXT PRECISION FIX START */

/* Grundfläche der beiden Textbereiche */
.workflow-role {
  top: 324px;
  width: 228px;
  height: 322px;
}

/* RENE – Name und Rolle */
.workflow-role--rene .workflow-role__head {
  top: 43px;
  left: 72px;
  right: 18px;
  min-height: 70px;
  padding: 5px 7px 7px;
  text-align: left;
  background: linear-gradient(
    90deg,
    rgba(9, 8, 8, 0.88),
    rgba(9, 8, 8, 0.60) 78%,
    transparent
  );
}

/* SINA – Name und Rolle */
.workflow-role--sina .workflow-role__head {
  top: 43px;
  left: 18px;
  right: 72px;
  min-height: 70px;
  padding: 5px 7px 7px;
  text-align: right;
  background: linear-gradient(
    270deg,
    rgba(9, 8, 8, 0.88),
    rgba(9, 8, 8, 0.60) 78%,
    transparent
  );
}

.workflow-role__head h3 {
  margin: 0 0 7px;
  color: #f0ddbf;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.10em;
}

.workflow-role__head p {
  margin: 0;
  color: #d6a365;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 8px;
  line-height: 1.35;
  letter-spacing: 0.055em;
}

/* Beschreibungstexte */
.workflow-role--rene .workflow-role__summary {
  top: 147px;
  left: 30px;
  right: 24px;
}

.workflow-role--sina .workflow-role__summary {
  top: 147px;
  left: 24px;
  right: 30px;
}

.workflow-role__summary {
  margin: 0;
  color: #e0d5c5;
  font: 10.6px/1.42 Georgia, "Times New Roman", serif;
  text-align: left;
  text-shadow: 0 2px 8px #000;
}

/* Focus-Boxen */
.workflow-role--rene .workflow-role__focus {
  top: 222px;
  left: 20px;
  right: 17px;
  height: 100px;
  padding: 17px 13px 7px;
}

.workflow-role--sina .workflow-role__focus {
  top: 222px;
  left: 17px;
  right: 20px;
  height: 100px;
  padding: 17px 13px 7px;
}

.workflow-role__focus h4 {
  margin: 0 0 7px;
  color: #d0a4e0;
  font-size: 9.7px;
  line-height: 1;
  letter-spacing: 0.09em;
}

.workflow-role__focus ul {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
}

.workflow-role__focus li {
  padding-left: 11px;
  color: #d0c6ba;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 8.1px;
  line-height: 1.12;
}

.workflow-role__focus li::before {
  left: 0;
  color: #c28cda;
}

/* TEAM ROLE TEXT PRECISION FIX END */

/* === STEP 1: RENE HEAD HIGHER ONLY === */
.workflow-role--rene .workflow-role__head{
  top: 16px !important;
}
/* === END STEP 1 === */


/* === STEP 2: ONLY RENE NAME HIGHER === */

/* Rolle wieder an die vorherige Position setzen */
.workflow-role--rene .workflow-role__head {
  top: 43px !important;
}

/* Nur den Namen RENE nach oben verschieben */
.workflow-role--rene .workflow-role__head h3 {
  position: relative;
  top: -15px;
}

/* === END STEP 2 === */


/* === STEP 3: RENE 2PX HIGHER === */
.workflow-role--rene .workflow-role__head h3 {
  top: -17px !important;
}
/* === END STEP 3 === */


/* === STEP 4: RENE 2PX HIGHER AGAIN === */
.workflow-role--rene .workflow-role__head h3 {
  top: -19px !important;
}
/* === END STEP 4 === */


/* === STEP 5: RENE BLOCK 6PX LEFT === */
.workflow-role--rene .workflow-role__head {
  transform: translateX(-6px);
}
/* === END STEP 5 === */


/* === STEP 6: RENE SUMMARY LARGER AND HIGHER === */
.workflow-role--rene .workflow-role__summary {
  top: 145px !important;
  font-size: 11.4px !important;
  line-height: 1.42 !important;
}
/* === END STEP 6 === */


/* === RENE SUMMARY: HIGHER + LARGER === */
.workflow-role--rene .workflow-role__summary {
  top: 138px !important;
  font-size: 12.2px !important;
  line-height: 1.42 !important;
}
/* === END RENE SUMMARY FIX === */


/* === RENE SUMMARY FINAL POSITION === */
.workflow-role--rene .workflow-role__summary {
  top: 118px !important;
  left: 24px !important;
  right: 18px !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  transform: none !important;
}
/* === END RENE SUMMARY FINAL POSITION === */


/* === RENE SUMMARY SLIGHTLY DOWN + FOCUS HIGHER === */

/* Beschreibung ein wenig nach unten */
.workflow-role--rene .workflow-role__summary {
  top: 124px !important;
}

/* Technical-Focus-Block deutlich höher */
.workflow-role--rene .workflow-role__focus {
  top: 204px !important;
}

/* === END RENE ADJUSTMENT === */


/* === RENE SUMMARY SAME SIZE AS FOCUS LIST === */
.workflow-role--rene .workflow-role__summary {
  font-size: 8.1px !important;
  line-height: 1.35 !important;
}
/* === END RENE SUMMARY SIZE FIX === */


/* === RENE SUMMARY FONT SIZE MATCH SINA === */
.workflow-role--rene .workflow-role__summary {
  font-size: 11.3px !important;
}
/* === END RENE SUMMARY FONT SIZE MATCH SINA === */


/* === RENE TECHNICAL FOCUS SLIGHTLY LARGER === */

.workflow-role--rene .workflow-role__focus h4 {
  font-size: 11.3px !important;
}

.workflow-role--rene .workflow-role__focus li {
  font-size: 9px !important;
  line-height: 1.15 !important;
}

/* === END RENE TECHNICAL FOCUS SIZE FIX === */


/* === SINA STEP 1: NAME POSITION === */
.workflow-role--sina .workflow-role__head h3 {
  position: relative;
  top: -19px !important;
  left: 6px !important;
}
/* === END SINA STEP 1 === */


/* =========================================================
   SINA – COMPLETE POSITION AND FONT FIX
   ========================================================= */

/* Name und Rollenbezeichnung */
.workflow-role--sina .workflow-role__head {
  top: 43px !important;
  transform: translateX(6px);
}

.workflow-role--sina .workflow-role__head h3 {
  position: relative;
  top: -19px !important;
  left: 0 !important;
}

/* Beschreibung */
.workflow-role--sina .workflow-role__summary {
  top: 124px !important;
  font-size: 11.3px !important;
}

/* Creative-Focus-Bereich */
.workflow-role--sina .workflow-role__focus {
  top: 204px !important;
}

/* Creative Focus */
.workflow-role--sina .workflow-role__focus h4 {
  font-size: 11.3px !important;
}

/* Einträge unter Creative Focus */
.workflow-role--sina .workflow-role__focus li {
  font-size: 9px !important;
  line-height: 1.15 !important;
}

/* =========================================================
   END SINA COMPLETE FIX
   ========================================================= */


/* === WORKFLOW CLOSING TEXT CENTER + SIZE === */
.collaboration-statement {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.collaboration-statement p {
  width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
  font-size: 25px !important;
  line-height: 1.1 !important;
  letter-spacing: 4px !important;
  transform: translateY(-2px);
}
/* === END WORKFLOW CLOSING TEXT FIX === */


/* === WORKFLOW CLOSING TEXT HIGHER === */
.collaboration-statement p {
  transform: translateY(-12px) !important;
}
/* === END WORKFLOW CLOSING TEXT HIGHER === */


/* === WORKFLOW TEXT POSITION GUIDE === */
.collaboration-statement p {
  position: relative !important;
  transform: translateY(-12px) !important;
}

.collaboration-statement p::before {
  content: "HÖHE: -12px";
  position: absolute;
  left: 50%;
  top: -28px;
  transform: translateX(-50%);
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.8);
  padding: 3px 8px;
  border: 1px solid #b77ad2;
  white-space: nowrap;
  z-index: 20;
}
/* === END WORKFLOW TEXT POSITION GUIDE === */


/* === WORKFLOW CLOSING POSITION GUIDE – CORRECT SELECTOR === */

.workflow-closing {
  bottom: 40px !important;
  font-size: 18px !important;
  position: absolute !important;
}

.workflow-closing::before {
  content: "HÖHE: 40px";
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  z-index: 50;

  padding: 3px 8px;
  border: 1px solid #b77ad2;
  background: rgba(0, 0, 0, 0.9);
  color: #ffffff;

  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

/* === END WORKFLOW CLOSING POSITION GUIDE === */


/* === WORKFLOW CLOSING MULTI HEIGHT GUIDE === */

.workflow-closing {
  bottom: 40px !important;
  font-size: 18px !important;
  position: absolute !important;
}

/* Testlinien */
.workflow-closing::before {
  content:
    "20px\A"
    "30px\A"
    "40px\A"
    "50px\A"
    "60px\A"
    "70px\A"
    "80px";

  position: absolute;
  left: 50%;
  bottom: -40px;
  transform: translateX(-50%);
  z-index: 60;

  width: 760px;
  height: 140px;

  color: #ffffff;
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0;
  text-align: left;
  white-space: pre;

  background:
    linear-gradient(to bottom,
      transparent 19px,
      rgba(190, 120, 220, 0.95) 20px,
      transparent 21px,
      transparent 39px,
      rgba(190, 120, 220, 0.95) 40px,
      transparent 41px,
      transparent 59px,
      rgba(190, 120, 220, 0.95) 60px,
      transparent 61px,
      transparent 79px,
      rgba(190, 120, 220, 0.95) 80px,
      transparent 81px,
      transparent 99px,
      rgba(190, 120, 220, 0.95) 100px,
      transparent 101px,
      transparent 119px,
      rgba(190, 120, 220, 0.95) 120px,
      transparent 121px
    );

  pointer-events: none;
}

/* === END WORKFLOW CLOSING MULTI HEIGHT GUIDE === */


/* === WORKFLOW CLOSING FINAL HEIGHT === */

.workflow-closing {
  bottom: 50px !important;
  font-size: 18px !important;
}

/* Testanzeige entfernen */
.workflow-closing::before {
  content: none !important;
  display: none !important;
}

/* === END WORKFLOW CLOSING FINAL HEIGHT === */


/* === WORKFLOW CLOSING HIGHER === */
.workflow-closing {
  bottom: 70px !important;
}
/* === END WORKFLOW CLOSING HIGHER === */


/* === WORKFLOW CLOSING TWO LINES === */
.workflow-closing {
  bottom: 58px !important;
  width: 568px !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  text-align: center !important;
}
/* === END WORKFLOW CLOSING TWO LINES === */


/* === WORKFLOW CLOSING TWO LINES === */
.workflow-closing {
  bottom: 58px !important;
  width: 568px !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  text-align: center !important;
}
/* === END WORKFLOW CLOSING TWO LINES === */


/* === WORKFLOW CLOSING SLIGHTLY LOWER === */
.workflow-closing {
  bottom: 52px !important;
}
/* === END WORKFLOW CLOSING SLIGHTLY LOWER === */


/* === CENTER COMPLETE WORKFLOW SECTION === */
.collaboration {
  margin-left: auto !important;
  margin-right: auto !important;
  margin-inline: auto !important;
}
/* === END CENTER WORKFLOW SECTION === */


/* === WORKFLOW CENTER RELATIVE TO VIEWPORT === */
@media (min-width: 1051px) {
  .collaboration {
    position: relative !important;
    left: 50% !important;
    width: min(1720px, calc(100vw - 20px)) !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: translateX(-50%) !important;
  }
}
/* === END WORKFLOW VIEWPORT CENTER FIX === */


/* === FINAL WORKFLOW VIEWPORT CENTERING === */
@media (min-width: 1051px) {
  section.collaboration.section {
    position: relative !important;
    left: auto !important;
    transform: none !important;

    width: calc(100vw - 20px) !important;
    max-width: none !important;

    margin-left: calc(50% - 50vw + 10px) !important;
    margin-right: calc(50% - 50vw + 10px) !important;
    margin-inline: calc(50% - 50vw + 10px) !important;
  }

  section.collaboration.section .collaboration-desktop {
    width: 100% !important;
    margin-inline: auto !important;
  }
}
/* === END FINAL WORKFLOW VIEWPORT CENTERING === */


/* === WORKFLOW: EXACT VIEWPORT CENTER === */
@media (min-width: 1051px) {
  section.collaboration.section {
    position: relative !important;

    left: auto !important;
    right: auto !important;

    width: min(1720px, calc(100vw - 20px)) !important;
    max-width: none !important;

    margin-left: 50vw !important;
    margin-right: 0 !important;
    margin-inline-start: 50vw !important;
    margin-inline-end: 0 !important;

    transform: translateX(-50%) !important;
  }

  section.collaboration.section .collaboration-desktop {
    width: 100% !important;
    margin: 0 !important;
  }
}
/* === END EXACT VIEWPORT CENTER === */


/* =========================================================
   WORKFLOW CENTERING – DEFINITIVE FIX
   The workflow no longer uses the general .section width.
   ========================================================= */

@media (min-width: 1051px) {
  section.collaboration {
    position: relative !important;

    left: auto !important;
    right: auto !important;
    inset-inline: auto !important;

    width: min(1720px, calc(100vw - 20px)) !important;
    max-width: none !important;

    margin-left: auto !important;
    margin-right: auto !important;
    margin-inline: auto !important;

    transform: none !important;
  }

  section.collaboration > .collaboration-desktop {
    position: relative !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-inline: auto !important;
  }
}

/* =========================================================
   END DEFINITIVE WORKFLOW CENTERING
   ========================================================= */


/* =========================================================
   WORKFLOW FULL-WIDTH DESKTOP FIX
   ========================================================= */

@media (min-width: 1051px) {
  section.collaboration {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;

    width: calc(100vw - 32px) !important;
    max-width: none !important;

    margin-left: 16px !important;
    margin-right: 16px !important;
    margin-inline: 16px !important;
  }

  section.collaboration > .collaboration-desktop {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

/* =========================================================
   END WORKFLOW FULL-WIDTH DESKTOP FIX
   ========================================================= */


/* =========================================================
   UNIFIED WEBSITE HEADER
   Logo left – navigation exactly centered – action right
   ========================================================= */

.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  width: 100% !important;
  min-height: 74px !important;
  padding: 0 !important;
  border-bottom: 1px solid #332419 !important;
  background: rgba(4, 4, 3, 0.97) !important;
  backdrop-filter: blur(12px);
}

.site-header .page-width {
  width: min(1680px, calc(100% - 48px)) !important;
  margin-inline: auto !important;
}

.site-header .header-inner {
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr) !important;
  align-items: center !important;
  gap: 28px !important;
  min-height: 74px !important;
}

.site-header .brand {
  display: block !important;
  justify-self: start !important;
  width: auto !important;
  padding: 0 !important;
  color: #f0d6a5 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 2px !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
}

.site-header .main-navigation {
  position: static !important;
  display: flex !important;
  grid-column: 2 !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: center !important;
  gap: 42px !important;
  width: max-content !important;
  padding: 0 !important;
  background: transparent !important;
  transform: none !important;
}

.site-header .main-navigation a {
  position: relative !important;
  padding: 29px 0 25px !important;
  color: #d0c2b1 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 14px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.site-header .main-navigation a:hover,
.site-header .main-navigation a.active {
  color: #ffc471 !important;
}

.site-header .header-button {
  display: inline-block !important;
  grid-column: 3 !important;
  justify-self: end !important;
  padding: 14px 24px !important;
  border: 1px solid #934220 !important;
  color: #f1deca !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 16px !important;
  line-height: 1 !important;
  letter-spacing: 0.7px !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
}

.site-header .menu-toggle {
  display: none !important;
}

@media (max-width: 1180px) {
  .site-header .header-inner {
    grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr) !important;
    gap: 20px !important;
  }

  .site-header .main-navigation {
    gap: 24px !important;
  }

  .site-header .main-navigation a {
    font-size: 12px !important;
  }

  .site-header .header-button {
    padding: 12px 16px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 1050px) {
  .site-header .header-inner {
    position: relative !important;
    display: flex !important;
  }

  .site-header .brand {
    margin-right: auto !important;
    font-size: 23px !important;
  }

  .site-header .menu-toggle {
    display: block !important;
    order: 3 !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #d4ae72 !important;
    font-size: 28px !important;
  }

  .site-header .header-button {
    display: none !important;
  }

  .site-header .main-navigation {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: 0 !important;
    display: none !important;
    width: 100% !important;
    padding: 10px 24px 18px !important;
    border-top: 1px solid #2c2018 !important;
    border-bottom: 1px solid #3a281b !important;
    background: rgba(4, 4, 3, 0.99) !important;
  }

  .site-header .main-navigation.open,
  .site-header .main-navigation.is-open {
    display: grid !important;
  }

  .site-header .main-navigation a {
    padding: 14px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    font-size: 13px !important;
  }
}

/* =========================================================
   END UNIFIED WEBSITE HEADER
   ========================================================= */


/* =========================================================
   HOW WE WORK – TRUE FULL VIEWPORT WIDTH
   Expands the actual image shell instead of the outer section
   ========================================================= */

@media (min-width: 1051px) {

  section.collaboration {
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  section.collaboration .collaboration-desktop {
    position: relative !important;

    width: 100vw !important;
    max-width: none !important;

    margin-left: calc((100% - 100vw) / 2) !important;
    margin-right: 0 !important;

    aspect-ratio: 1376 / 768 !important;
    overflow: hidden !important;
  }
}

/* =========================================================
   END HOW WE WORK FULL VIEWPORT WIDTH
   ========================================================= */


/* =========================================================
   YASHARIEL FINAL HEADER + FOOTER ALIGNMENT FIX
   ========================================================= */

/* ---------- HEADER ---------- */

.site-header {
    min-height: 74px !important;
}

.site-header .header-inner {
    display: grid !important;
    grid-template-columns: minmax(200px, 1fr) auto minmax(260px, 1fr) !important;
    align-items: center !important;
    gap: 24px !important;
    min-height: 74px !important;
}

.site-header .brand {
    grid-column: 1 !important;
    justify-self: start !important;
}

.site-header .main-navigation {
    grid-column: 2 !important;
    justify-self: center !important;
    align-self: center !important;
    margin: 0 !important;
}

.site-header .header-actions {
    grid-column: 3 !important;
    justify-self: end !important;
    align-self: center !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.site-header .header-login {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 10px 0 !important;

    color: #e5d5c1 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 16px !important;
    line-height: 1 !important;

    text-decoration: none !important;
    white-space: nowrap !important;
}

.site-header .header-login:hover,
.site-header .header-login:focus-visible {
    color: #ffc471 !important;
}

.site-header .header-button {
    position: static !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 24px !important;

    border: 1px solid #934220 !important;
    background: rgba(10, 7, 5, 0.55) !important;

    color: #f1deca !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 15px !important;
    line-height: 1 !important;
    letter-spacing: .7px !important;

    text-decoration: none !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;

    transform: none !important;
    inset: auto !important;
}

.site-header .header-button:hover,
.site-header .header-button:focus-visible {
    border-color: #c46330 !important;
    background: rgba(130, 47, 24, .20) !important;
}


/* ---------- DESKTOP FOOTER ---------- */

.integrated-site-footer {
    width: 100% !important;
    margin-top: auto !important;

    border-top: 1px solid rgba(177, 128, 72, .28) !important;
    background: #050403 !important;

    color: #c8c0b6 !important;
    font-size: 14px !important;
}

.integrated-site-footer .isf-top {
    width: 100% !important;

    display: grid !important;
    grid-template-columns:
        minmax(420px, 1.25fr)
        minmax(300px, auto)
        minmax(420px, 1.25fr) !important;

    align-items: center !important;
    gap: 40px !important;

    padding: 28px clamp(32px, 5vw, 96px) !important;
}

.integrated-site-footer .isf-title {
    margin: 0 0 9px !important;

    color: #dfc5a3 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 14px !important;
    line-height: 1.2 !important;

    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.integrated-site-footer .isf-newsletter {
    display: flex !important;
    align-items: stretch !important;

    width: min(100%, 430px) !important;
    height: 42px !important;

    margin: 0 !important;
}

.integrated-site-footer .isf-newsletter input {
    flex: 1 1 auto !important;
    min-width: 0 !important;

    height: 42px !important;
    margin: 0 !important;
    padding: 0 14px !important;

    border: 1px solid #493224 !important;
    border-right: 0 !important;

    background: #0c0907 !important;
    color: #eee0ce !important;

    font-size: 14px !important;
}

.integrated-site-footer .isf-newsletter button {
    flex: 0 0 auto !important;

    height: 42px !important;
    margin: 0 !important;
    padding: 0 18px !important;

    border: 1px solid #7d4b2c !important;
    background: #16100c !important;
    color: #d8b188 !important;

    font-size: 12px !important;
    line-height: 1 !important;

    text-transform: uppercase !important;
    letter-spacing: .06em !important;
}

.integrated-site-footer .isf-links {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 24px !important;

    margin: 0 !important;
    padding: 0 !important;

    white-space: nowrap !important;
}

.integrated-site-footer .isf-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 28px !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: right !important;
}

.integrated-site-footer .isf-social {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 20px !important;

    margin: 0 !important;
    padding: 0 !important;

    white-space: nowrap !important;
}

.integrated-site-footer .isf-language {
    display: inline-block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #d2b27e !important;

    white-space: nowrap !important;
}

.integrated-site-footer .isf-links a,
.integrated-site-footer .isf-social span,
.integrated-site-footer .isf-social a,
.integrated-site-footer .isf-language {
    font-size: 12px !important;
    line-height: 1.3 !important;
}


/* ---------- LEGAL FOOTER: EINE LINIE ---------- */

.integrated-site-footer .isf-bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 18px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 15px clamp(32px, 5vw, 96px) 17px !important;

    border-top: 1px solid rgba(177, 128, 72, .18) !important;

    font-size: 11px !important;
    line-height: 1.4 !important;

    text-align: center !important;
}

.integrated-site-footer .isf-legal {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 10px !important;

    margin: 0 !important;
    padding: 0 !important;

    white-space: nowrap !important;
}

.integrated-site-footer .isf-copyright {
    margin: 0 !important;
    padding: 0 !important;

    white-space: nowrap !important;
}


/* ---------- KLEINERE DESKTOPS ---------- */

@media (max-width: 1450px) {

    .site-header .header-inner {
        grid-template-columns: minmax(170px, .8fr) auto minmax(230px, .8fr) !important;
        gap: 18px !important;
    }

    .site-header .main-navigation {
        gap: 24px !important;
    }

    .site-header .main-navigation a {
        font-size: 12px !important;
    }

    .site-header .header-actions {
        gap: 14px !important;
    }

    .site-header .header-login {
        font-size: 14px !important;
    }

    .site-header .header-button {
        min-height: 42px !important;
        padding: 0 16px !important;
        font-size: 12px !important;
    }

    .integrated-site-footer .isf-top {
        grid-template-columns: minmax(350px, 1fr) auto minmax(350px, 1fr) !important;
        gap: 26px !important;
    }
}


/* ---------- TABLET / MOBILE ---------- */

@media (max-width: 1050px) {

    .site-header .header-inner {
        display: flex !important;
        align-items: center !important;
    }

    .site-header .brand {
        margin-right: auto !important;
    }

    .site-header .header-actions {
        display: none !important;
    }

    .site-header .menu-toggle {
        display: block !important;
        margin-left: auto !important;
    }

    .site-header .main-navigation {
        position: absolute !important;

        top: 100% !important;
        left: 0 !important;
        right: 0 !important;

        display: none !important;
        width: 100% !important;

        padding: 10px 24px 18px !important;

        background: rgba(4, 4, 3, .99) !important;
    }

    .site-header .main-navigation.open,
    .site-header .main-navigation.is-open {
        display: grid !important;
    }

    .integrated-site-footer .isf-top {
        display: none !important;
    }

    .integrated-site-footer .isf-bottom {
        display: flex !important;
        flex-direction: column !important;

        gap: 12px !important;

        padding: 20px 18px !important;
    }

    .integrated-site-footer .isf-legal {
        flex-wrap: wrap !important;
    }
}


/* ---------- REDUCED MOTION ---------- */

@media (prefers-reduced-motion: reduce) {
    .site-header *,
    .integrated-site-footer * {
        transition: none !important;
    }
}

/* =========================================================
   END YASHARIEL FINAL HEADER + FOOTER ALIGNMENT FIX
   ========================================================= */


/* ============================================================
   YASHARIEL HEADER + FOOTER FINAL FIX
   ============================================================ */

/* ---------- HEADER ---------- */

.site-header {
    width: 100%;
    min-height: 94px !important;
    background: rgba(2, 2, 2, .97) !important;
    border-bottom: 1px solid rgba(164, 101, 49, .28);
}

.site-header .header-inner {
    width: 100% !important;
    max-width: none !important;

    display: grid !important;
    grid-template-columns:
        minmax(260px, 1fr)
        auto
        minmax(360px, 1fr) !important;

    align-items: center !important;

    min-height: 94px !important;

    padding-left: clamp(22px, 2.5vw, 58px) !important;
    padding-right: clamp(22px, 2.5vw, 42px) !important;

    gap: 30px !important;
}

.site-header .brand {
    justify-self: start !important;
    margin: 0 !important;
}

.site-header .main-navigation {
    justify-self: center !important;

    display: flex !important;
    align-items: center !important;

    gap: clamp(25px, 2.3vw, 52px) !important;

    margin: 0 !important;
    padding: 0 !important;
}

.site-header .main-navigation a {
    white-space: nowrap !important;
}


/* ---------- RIGHT HEADER AREA ---------- */

.site-header .header-actions {
    justify-self: end !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 26px !important;

    margin: 0 !important;
    padding: 0 !important;
}

.site-header .header-login {
    position: static !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 52px !important;

    margin: 0 !important;
    padding: 0 19px !important;

    border: 1px solid rgba(145, 102, 55, .45) !important;
    background:
        linear-gradient(
            180deg,
            rgba(36, 27, 18, .48),
            rgba(10, 8, 6, .68)
        ) !important;

    color: #dfc7a4 !important;

    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 15px !important;
    letter-spacing: .11em !important;
    line-height: 1 !important;

    text-decoration: none !important;
    text-transform: uppercase !important;

    white-space: nowrap !important;

    transition:
        border-color .25s ease,
        color .25s ease,
        background .25s ease,
        box-shadow .25s ease !important;
}

.site-header .header-login:hover,
.site-header .header-login:focus-visible {
    color: #f5d8aa !important;
    border-color: rgba(206, 130, 66, .8) !important;

    background:
        linear-gradient(
            180deg,
            rgba(64, 38, 20, .58),
            rgba(15, 9, 6, .82)
        ) !important;

    box-shadow:
        0 0 18px rgba(177, 72, 25, .12),
        inset 0 0 14px rgba(198, 117, 55, .04) !important;
}

.site-header .header-button {
    position: static !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 60px !important;

    margin: 0 !important;
    padding: 0 30px !important;

    border: 1px solid #8d3519 !important;

    background:
        linear-gradient(
            180deg,
            rgba(35, 16, 10, .35),
            rgba(5, 4, 3, .78)
        ) !important;

    color: #f1dec7 !important;

    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 15px !important;
    letter-spacing: .09em !important;
    line-height: 1 !important;

    text-transform: uppercase !important;
    text-decoration: none !important;

    white-space: nowrap !important;

    inset: auto !important;
    transform: none !important;

    transition:
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease !important;
}

.site-header .header-button:hover,
.site-header .header-button:focus-visible {
    border-color: #c35b29 !important;

    background:
        linear-gradient(
            180deg,
            rgba(95, 35, 16, .35),
            rgba(12, 6, 4, .88)
        ) !important;

    box-shadow:
        0 0 24px rgba(185, 67, 25, .12) !important;
}


/* ============================================================
   FOOTER
   ============================================================ */

.integrated-site-footer {
    width: 100% !important;
    max-width: none !important;

    margin-top: auto !important;

    background:
        linear-gradient(
            180deg,
            rgba(8, 7, 6, .98),
            #030303
        ) !important;

    border-top:
        1px solid rgba(162, 110, 59, .28) !important;

    color: #bdb4aa !important;
}


/* ---------- MAIN FOOTER ROW ---------- */

.integrated-site-footer .isf-top {
    width: 100% !important;

    display: grid !important;
    grid-template-columns:
        minmax(390px, 1.2fr)
        auto
        minmax(390px, 1.2fr) !important;

    align-items: center !important;

    gap: 48px !important;

    padding:
        28px
        clamp(34px, 5vw, 110px) !important;
}


/* NEWSLETTER LEFT */

.integrated-site-footer .isf-newsletter-wrap {
    justify-self: start !important;
}

.integrated-site-footer .isf-title {
    margin: 0 0 8px !important;

    color: #d6bb96 !important;

    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 13px !important;
    letter-spacing: .08em !important;
    line-height: 1.2 !important;

    text-transform: uppercase !important;
}

.integrated-site-footer .isf-newsletter {
    display: flex !important;
    align-items: stretch !important;

    width: 400px !important;
    max-width: 100% !important;

    height: 40px !important;

    margin: 0 !important;
}

.integrated-site-footer .isf-newsletter input {
    flex: 1 !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 14px !important;

    border: 1px solid #413126 !important;
    border-right: 0 !important;

    background: #0b0908 !important;
    color: #e3d9cb !important;

    font-size: 13px !important;
}

.integrated-site-footer .isf-newsletter button {
    flex: 0 0 auto !important;

    margin: 0 !important;
    padding: 0 18px !important;

    border: 1px solid #764529 !important;

    background: #17100c !important;

    color: #d4aa7d !important;

    font-size: 11px !important;
    letter-spacing: .06em !important;

    text-transform: uppercase !important;
}


/* CENTER */

.integrated-site-footer .isf-links {
    justify-self: center !important;

    display: flex !important;
    align-items: center !important;

    gap: 26px !important;

    margin: 0 !important;
    padding: 0 !important;

    white-space: nowrap !important;
}


/* RIGHT */

.integrated-site-footer .isf-right {
    justify-self: end !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 27px !important;

    margin: 0 !important;
    padding: 0 !important;
}

.integrated-site-footer .isf-social {
    display: flex !important;
    align-items: center !important;

    gap: 20px !important;

    margin: 0 !important;
    padding: 0 !important;

    white-space: nowrap !important;
}

.integrated-site-footer .isf-language {
    margin: 0 !important;

    color: #c9a978 !important;

    white-space: nowrap !important;
}


/* SMALL FOOTER TYPOGRAPHY */

.integrated-site-footer a,
.integrated-site-footer span {
    font-size: 12px !important;
}


/* ============================================================
   LEGAL ROW — ONE SINGLE LINE
   ============================================================ */

.integrated-site-footer .isf-bottom {
    width: 100% !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 20px !important;

    margin: 0 !important;

    padding:
        14px
        clamp(30px, 5vw, 110px)
        16px !important;

    border-top:
        1px solid rgba(162, 110, 59, .14) !important;

    font-size: 11px !important;
    line-height: 1.3 !important;
}

.integrated-site-footer .isf-legal {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;

    gap: 11px !important;

    margin: 0 !important;
    padding: 0 !important;

    white-space: nowrap !important;
}

.integrated-site-footer .isf-copyright {
    display: inline-block !important;

    margin: 0 !important;
    padding: 0 !important;

    white-space: nowrap !important;
}


/* ============================================================
   1440PX
   ============================================================ */

@media (max-width: 1500px) {

    .site-header .header-inner {
        grid-template-columns:
            minmax(210px, .75fr)
            auto
            minmax(300px, .75fr) !important;

        gap: 20px !important;
    }

    .site-header .main-navigation {
        gap: 28px !important;
    }

    .site-header .main-navigation a {
        font-size: 12px !important;
    }

    .site-header .header-actions {
        gap: 14px !important;
    }

    .site-header .header-login {
        min-height: 46px !important;
        padding: 0 14px !important;
        font-size: 12px !important;
    }

    .site-header .header-button {
        min-height: 52px !important;
        padding: 0 20px !important;
        font-size: 12px !important;
    }

    .integrated-site-footer .isf-top {
        grid-template-columns:
            minmax(330px, 1fr)
            auto
            minmax(330px, 1fr) !important;

        gap: 28px !important;
    }
}


/* ============================================================
   MOBILE / TABLET
   ============================================================ */

@media (max-width: 1050px) {

    .site-header .header-inner {
        display: flex !important;
        align-items: center !important;

        min-height: 72px !important;
    }

    .site-header .brand {
        margin-right: auto !important;
    }

    .site-header .header-actions {
        display: none !important;
    }

    .site-header .main-navigation {
        position: absolute !important;

        top: 100% !important;
        left: 0 !important;
        right: 0 !important;

        display: none !important;

        width: 100% !important;

        padding: 15px 24px 22px !important;

        background: rgba(3, 3, 3, .99) !important;
    }

    .site-header .main-navigation.open,
    .site-header .main-navigation.is-open {
        display: grid !important;
    }

    /* bestätigt:
       Mobile Footer nur Legal + Copyright */

    .integrated-site-footer .isf-top {
        display: none !important;
    }

    .integrated-site-footer .isf-bottom {
        flex-direction: column !important;

        gap: 11px !important;

        padding: 19px 16px !important;
    }

    .integrated-site-footer .isf-legal {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .site-header *,
    .integrated-site-footer * {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================================
   END HEADER + FOOTER FIX
   ============================================================ */


/* YASHARIEL SINA DESIGN STORY START */


/* ==========================================================
   SINA - WHY I DESIGN YASHARIEL
   ========================================================== */

.sina-design-story {

    width: 100% !important;

    margin-top: 38px !important;

    padding-top: 34px !important;

    border-top:
        1px solid
        rgba(151, 96, 47, 0.34) !important;

    box-sizing: border-box !important;
}


.sina-design-story__inner {

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;
}


/* ==========================================================
   HEADING
   ========================================================== */

.sina-design-story__heading {

    width: 100% !important;

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    gap: 16px !important;

    margin-bottom: 25px !important;
}


.sina-design-story__heading h3 {

    flex: 0 0 auto !important;

    margin: 0 !important;

    color: #d7ad6d !important;

    font-size: 14px !important;

    font-weight: 500 !important;

    line-height: 1.2 !important;

    letter-spacing: 0.18em !important;

    text-transform: uppercase !important;

    white-space: nowrap !important;
}


.sina-design-story__line {

    flex: 1 1 auto !important;

    height: 1px !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(164, 99, 44, 0.55)
        ) !important;
}


.sina-design-story__line:last-child {

    background:
        linear-gradient(
            90deg,
            rgba(164, 99, 44, 0.55),
            transparent
        ) !important;
}


/* ==========================================================
   TEXT
   bewusst wie persönliche Aussage,
   nicht wie Marketing-Text
   ========================================================== */

.sina-design-story__copy {

    width: 100% !important;

    max-width: 760px !important;

    margin: 0 auto !important;

    text-align: left !important;
}


.sina-design-story__copy p {

    margin:
        0
        0
        18px !important;

    color:
        rgba(224, 216, 203, 0.88) !important;

    font-size: 16px !important;

    font-weight: 400 !important;

    line-height: 1.75 !important;

    letter-spacing: 0.005em !important;
}


.sina-design-story__copy p:last-child {

    margin-bottom: 0 !important;
}


/* ==========================================================
   ERSTER ABSATZ ETWAS HERVORHEBEN
   ========================================================== */

.sina-design-story__copy p:first-child {

    color:
        rgba(238, 226, 208, 0.96) !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 1024px) {

    .sina-design-story {

        margin-top: 30px !important;

        padding-top: 28px !important;
    }


    .sina-design-story__heading {

        gap: 11px !important;
    }


    .sina-design-story__heading h3 {

        font-size: 12px !important;

        letter-spacing: 0.13em !important;
    }


    .sina-design-story__copy {

        max-width: 100% !important;
    }


    .sina-design-story__copy p {

        font-size: 15px !important;

        line-height: 1.7 !important;
    }

}


/* ==========================================================
   VERY SMALL MOBILE
   ========================================================== */

@media (max-width: 560px) {

    .sina-design-story__heading {

        justify-content: center !important;
    }


    .sina-design-story__line {

        display: none !important;
    }


    .sina-design-story__heading h3 {

        white-space: normal !important;

        text-align: center !important;
    }

}


/* YASHARIEL SINA DESIGN STORY END */


/* YASHARIEL TEAM TEXT PANEL TRANSPARENCY START */


/* ==========================================================
   REMOVE BLACK RECTANGLES BEHIND TEAM TEXT

   Der äußere Team-Kartenrahmen und die Bilder bleiben.
   Nur die inneren Textflächen werden transparent.
   ========================================================== */

.team-member .member-content,
.team-member .member-info,
.team-member .team-member-content,
.team-member .team-member-info,
.team-member .profile-content,
.team-member .profile-info,

.team-card .member-content,
.team-card .member-info,
.team-card .team-member-content,
.team-card .team-member-info,
.team-card .profile-content,
.team-card .profile-info,

.member-card .member-content,
.member-card .member-info,
.member-card .profile-content,
.member-card .profile-info,

.profile-card .member-content,
.profile-card .member-info,
.profile-card .profile-content,
.profile-card .profile-info,

.team-profile .member-content,
.team-profile .member-info,
.team-profile .profile-content,
.team-profile .profile-info {

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    box-shadow: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}


/* ==========================================================
   NAME / ROLE WRAPPER
   RENE / SINA
   ========================================================== */

.team-member .member-name,
.team-member .member-role,
.team-member .member-header,
.team-member .profile-header,
.team-member .profile-title,

.team-card .member-name,
.team-card .member-role,
.team-card .member-header,
.team-card .profile-header,
.team-card .profile-title,

.member-card .member-name,
.member-card .member-role,
.member-card .member-header,
.member-card .profile-header,

.profile-card .member-name,
.profile-card .member-role,
.profile-card .member-header,
.profile-card .profile-header {

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    box-shadow: none !important;
}


/* ==========================================================
   BESCHREIBUNGSTEXT
   ========================================================== */

.team-member .member-description,
.team-member .member-copy,
.team-member .profile-description,
.team-member .profile-copy,

.team-card .member-description,
.team-card .member-copy,
.team-card .profile-description,
.team-card .profile-copy,

.member-card .member-description,
.member-card .member-copy,

.profile-card .profile-description,
.profile-card .profile-copy {

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    box-shadow: none !important;
}


/* ==========================================================
   PSEUDO-ELEMENTE ENTFERNEN
   Manche schwarze Flächen werden über ::before/::after gebaut.
   ========================================================== */

.team-member .member-content::before,
.team-member .member-content::after,
.team-member .member-info::before,
.team-member .member-info::after,
.team-member .profile-content::before,
.team-member .profile-content::after,

.team-card .member-content::before,
.team-card .member-content::after,
.team-card .member-info::before,
.team-card .member-info::after,
.team-card .profile-content::before,
.team-card .profile-content::after,

.member-card .member-content::before,
.member-card .member-content::after,
.member-card .member-info::before,
.member-card .member-info::after,

.profile-card .profile-content::before,
.profile-card .profile-content::after,
.profile-card .profile-info::before,
.profile-card .profile-info::after {

    background: transparent !important;
    background-image: none !important;

    box-shadow: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}


/* ==========================================================
   WICHTIG:
   ÄUSSERE TEAM-KARTE NICHT VERÄNDERN
   ========================================================== */

.team-member,
.team-card,
.member-card,
.profile-card,
.team-profile {

    /* absichtlich keine Background-Änderung hier */
}


/* YASHARIEL TEAM TEXT PANEL TRANSPARENCY END */


/* YASHARIEL SINA IMAGE SIZE MATCH START */


/* ==========================================================
   SINA IMAGE
   visuell an Rene angleichen
   ========================================================== */

.member--sina .member__visual {

    width: 100% !important;

    max-width: 520px !important;

    justify-self: center !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


.member--sina .member__visual img {

    display: block !important;

    width: 100% !important;

    max-width: 100% !important;

    height: auto !important;

    aspect-ratio:
        3 / 4 !important;

    object-fit:
        cover !important;

    object-position:
        center center !important;
}


/* ==========================================================
   TABLET / MOBILE
   Rene und Sina exakt gleiche Bildbreite
   ========================================================== */

@media (max-width: 1050px) {

    .member--rene .member__visual,
    .member--sina .member__visual {

        width:
            min(
                100%,
                520px
            ) !important;

        max-width:
            520px !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;
    }


    .member--rene .member__visual img,
    .member--sina .member__visual img {

        width:
            100% !important;

        aspect-ratio:
            3 / 4 !important;

        object-fit:
            cover !important;
    }

}


/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media (max-width: 620px) {

    .member--rene .member__visual,
    .member--sina .member__visual {

        width:
            calc(100% - 20px) !important;

        max-width:
            420px !important;
    }

}


/* YASHARIEL SINA IMAGE SIZE MATCH END */


/* YASHARIEL SINA GRID STORY FIX START */


/* ==========================================================
   SINA DESKTOP LAYOUT

   LINKS:
   Profil + Creative Focus + Why I Design Yashariel

   RECHTS:
   Sina-Bild
   ========================================================== */

@media (min-width: 1051px) {

    .member--sina {

        display: grid !important;

        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(320px, 0.8fr) !important;

        align-items: start !important;
    }


    .member--sina .member__content {

        order: 1 !important;

        grid-column: 1 !important;

        min-width: 0 !important;
    }


    .member--sina .member__visual {

        order: 2 !important;

        grid-column: 2 !important;
        grid-row: 1 !important;

        align-self: start !important;

        width: 100% !important;

        margin: 0 !important;
    }


    /*
     * Sina Story darf niemals wieder als eigenes
     * Grid-Element unter dem Bild landen.
     */

    .member--sina
    .member__content
    .sina-design-story {

        width: 100% !important;

        margin-top: 36px !important;
    }

}


/* ==========================================================
   MOBILE

   Auf Mobile bleibt die Seite bewusst einspaltig.
   ========================================================== */

@media (max-width: 1050px) {

    .member--sina {

        grid-template-columns:
            1fr !important;
    }


    .member--sina .member__content,
    .member--sina .member__visual {

        grid-column:
            auto !important;

        grid-row:
            auto !important;

        order:
            initial !important;
    }

}


/* YASHARIEL SINA GRID STORY FIX END */


/* YASHARIEL WORKFLOW HEAD TRANSPARENT START */

/*
   Entfernt ausschließlich die dunklen Flächen
   hinter RENE / SINA und deren Rollenbezeichnung.
   Positionen, Schriftgrößen und restliches Workflow-Design
   bleiben unverändert.
*/

.workflow-role--rene .workflow-role__head,
.workflow-role--sina .workflow-role__head {

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    box-shadow: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* YASHARIEL WORKFLOW HEAD TRANSPARENT END */