.su-hero {
  --su-black: #241f21;
  --su-yellow: #e7e643;
  --su-blue: #17479d;
  --su-red: #ec2128;
  --su-green: #017d3c;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--su-black);
  color: #fff;
}
.su-hero, .su-hero * { box-sizing: border-box; }
.su-hero__image { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.su-hero__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
}
.su-hero__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(20,16,19,.78) 0%,
    rgba(20,16,19,.53) 27%,
    rgba(20,16,19,.19) 55%,
    rgba(20,16,19,.02) 84%);
}
.su-hero__wrap {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  min-height: 620px;
  margin-inline: auto;
  padding: 94px 28px 105px;
  display: flex;
  align-items: center;
  gap: 48px;
}
.su-hero__content { flex: 1 1 auto; min-width: 0; max-width: 790px; }
.su-hero .su-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--su-yellow) !important;
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .15em;
  line-height: 1.5;
  text-shadow: 0 2px 9px rgba(0,0,0,.55);
}
.su-hero .su-hero__eyebrow::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 35px;
  height: 5px;
  border-radius: 9px;
  background: var(--su-yellow);
  box-shadow: 14px 0 0 var(--su-blue), 28px 0 0 var(--su-red), 42px 0 0 var(--su-green);
  margin-right: 42px;
}
.su-hero .su-hero__content h1 {
  margin: 23px 0 23px;
  max-width: 850px;
  color: #fff !important;
  font-size: clamp(48px, 5.4vw, 78px);
  font-weight: 850;
  line-height: 1.07;
  letter-spacing: -.042em;
  text-shadow: 0 3px 20px rgba(0,0,0,.35);
}
.su-hero .su-hero__content p {
  max-width: 570px;
  margin: 0;
  color: #fff !important;
  font-size: clamp(17px,1.55vw,20px);
  line-height: 1.62;
  text-shadow: 0 2px 12px rgba(0,0,0,.65);
}
.su-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 33px; }
.su-hero .su-hero__actions a {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 19px;
  padding: 13px 23px;
  border: 2px solid var(--su-yellow);
  border-radius: 100px;
  background: var(--su-yellow);
  color: var(--su-black) !important;
  font-size: 15px;
  font-weight: 850;
  line-height: 1.25;
  text-decoration: none !important;
  box-shadow: 0 7px 26px rgba(0,0,0,.19);
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.su-hero .su-hero__actions a span { font-size: 19px; line-height: 1; }
.su-hero .su-hero__actions a + a {
  border-color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.16);
  color: #fff !important;
  backdrop-filter: blur(7px);
}
.su-hero .su-hero__actions a:hover {
  transform: translateY(-3px);
  box-shadow: 0 11px 29px rgba(0,0,0,.27);
}
.su-hero .su-hero__actions a:first-child:hover { background: #f5f46b; }
.su-hero .su-hero__actions a + a:hover { background: rgba(255,255,255,.28); }
.su-hero .su-hero__actions a:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.su-hero__inset {
  flex: 0 0 25%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 20px;
  border: 4px solid rgba(255,255,255,.8);
  box-shadow: 0 16px 60px rgba(0,0,0,.25);
  transform: rotate(3deg);
}
.su-hero__inset img { display: block; width: 100%; height: 100%; object-fit: cover; }
.su-hero__stripe {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  height: 9px;
  background: linear-gradient(90deg,
    var(--su-black) 0% 20%, var(--su-yellow) 20% 40%,
    var(--su-blue) 40% 60%, var(--su-red) 60% 80%,
    var(--su-green) 80% 100%);
}
@media (min-width: 1400px) {
  .su-hero__wrap { min-height: 660px; }
}
@media (max-width: 991px) {
  .su-hero__wrap { min-height: 565px; padding: 76px 24px 90px; }
  .su-hero .su-hero__content h1 { font-size: clamp(42px,6.4vw,68px); }
}
@media (max-width: 740px) {
  .su-hero__wrap { min-height: 495px; padding: 70px 20px 78px; }
  .su-hero__inset { display: none; }
  .su-hero__image img { object-position: 60% center; }
  .su-hero__image::after {
    background: linear-gradient(90deg,rgba(20,16,19,.75) 0%,rgba(20,16,19,.50) 65%,rgba(20,16,19,.23) 100%);
  }
  .su-hero .su-hero__content h1 { font-size: clamp(40px,9.5vw,56px); }
  .su-hero .su-hero__content p { font-size: 16px; }
  .su-hero .su-hero__eyebrow { font-size: 10px; letter-spacing: .10em; }
  .su-hero .su-hero__eyebrow::before { width: 15px; margin-right: 31px; box-shadow: 10px 0 0 var(--su-blue),20px 0 0 var(--su-red),30px 0 0 var(--su-green); }
  .su-hero__actions a { min-height: 48px; }
  .su-hero__stripe { height: 6px; }
}
@media (max-width: 430px) {
  .su-hero__wrap { min-height: 520px; }
  .su-hero__actions { gap: 10px; }
  .su-hero .su-hero__actions a { padding-inline: 17px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .su-hero .su-hero__actions a { transition: none; }
}

/* Einheitliches, fontunabhaengiges Pfeil-Icon fuer Desktop und Mobile. */
.su-hero .su-arrow-icon{display:block;flex:none;width:19px;height:19px;stroke:currentColor;stroke-width:2;overflow:visible;transition:transform .22s ease}
.su-hero a:hover .su-arrow-icon{transform:translate(2px,-2px)}
.su-hero a:focus-visible .su-arrow-icon{transform:translate(2px,-2px)}
@media(max-width:620px){.su-hero .su-arrow-icon{width:18px;height:18px}}
@media(prefers-reduced-motion:reduce){.su-hero .su-arrow-icon{transition:none}}
 .su-hero .su-hero__actions a{display:inline-flex;align-items:center;justify-content:center;gap:10px}

.su-highlights,.su-highlights *{box-sizing:border-box}.su-highlights{padding:clamp(55px,7vw,90px) 20px;color:#241f21;background:#fff}.su-highlights__wrap{max-width:1160px;margin:0 auto}.su-highlights__header{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:30px}.su-highlights__eyebrow{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.su-highlights h2{margin:8px 0 0;font-size:clamp(32px,4.3vw,58px);line-height:1.08;letter-spacing:-.045em}.su-highlights__header p{max-width:370px;color:#626062;line-height:1.6}.su-highlights__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:16px}.su-highlights__card{color:#fff;position:relative;isolation:isolate;display:block;overflow:hidden;min-height:235px;border-radius:22px;text-decoration:none;transition:transform .22s,box-shadow .22s;background:#241f21}.su-highlights__card:nth-child(1){grid-row:span 2;min-height:486px;background:#241f21}.su-highlights__card:nth-child(2){background:#e7e643;color:#241f21}.su-highlights__card:nth-child(3){background:#17479d}.su-highlights__card:nth-child(4){background:#ec2128}.su-highlights__card:nth-child(5){background:#017d3c}.su-highlights__card:nth-child(5n+1){--su-accent:#241f21}.su-highlights__card:nth-child(5n+2){--su-accent:#e7e643}.su-highlights__card:nth-child(5n+3){--su-accent:#17479d}.su-highlights__card:nth-child(5n+4){--su-accent:#ec2128}.su-highlights__card:nth-child(5n){--su-accent:#017d3c}.su-highlights__photo{position:absolute;inset:0;z-index:-1}.su-highlights__photo:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.77),rgba(0,0,0,.05) 90%)}.su-highlights__photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s}.su-highlights__card:has(.su-highlights__photo){color:#fff}.su-highlights__info{min-height:inherit;height:100%;display:flex;flex-direction:column;justify-content:space-between;gap:22px;padding:25px}.su-highlights__tag{text-transform:uppercase;letter-spacing:.09em;font-size:11px;font-weight:800;opacity:.9}.su-highlights h3{margin:0;font-size:clamp(22px,2.7vw,37px);line-height:1.12;letter-spacing:-.04em}.su-highlights__card p{font-size:14px;line-height:1.5;margin:8px 0 0;opacity:.9}.su-highlights__arrow{align-self:end;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid currentColor;font-size:24px}.su-highlights__card:hover{transform:translateY(-4px);box-shadow:0 15px 36px #241f2120}.su-highlights__card:hover .su-highlights__photo img{transform:scale(1.06)}.su-highlights__card:focus-visible{outline:3px solid #17479d;outline-offset:4px}@media(max-width:900px){.su-highlights__grid{grid-template-columns:1fr 1fr}.su-highlights__card:nth-child(1){grid-row:span 2}}@media(max-width:620px){.su-highlights__header{display:block}.su-highlights__grid{grid-template-columns:1fr}.su-highlights__card,.su-highlights__card:nth-child(1){grid-row:auto;min-height:235px}.su-highlights__header p{margin-top:15px}}@media(prefers-reduced-motion:reduce){.su-highlights__card,.su-highlights__photo img{transition:none}}

/* Ruhige Kacheln ohne Bild; Original-Vereinsfarben als Akzent */
.su-highlights .su-highlights__header h2{color:#241f21!important}
.su-highlights .su-highlights__header p{color:#555055!important}
.su-highlights__card{background:#241f21;color:#fff!important;border:1px solid rgba(36,31,33,.07)}
.su-highlights__card:nth-child(5n+1){background:#241f21;color:#fff!important}
.su-highlights__card:nth-child(5n+2){background:#faf9e4;color:#241f21!important}
.su-highlights__card:nth-child(5n+3){background:#edf2fb;color:#183d78!important}
.su-highlights__card:nth-child(5n+4){background:#fff0f0;color:#9d1720!important}
.su-highlights__card:nth-child(5n){background:#eaf5ee;color:#075d32!important}
.su-highlights__card::before{content:"";height:5px;position:absolute;top:0;left:0;right:0;z-index:3;background:var(--su-accent)}
.su-highlights__card:nth-child(5n+1){--su-accent:#241f21}
.su-highlights__card:nth-child(5n+2){--su-accent:#e7e643}
.su-highlights__card:nth-child(5n+3){--su-accent:#17479d}
.su-highlights__card:nth-child(5n+4){--su-accent:#ec2128}
.su-highlights__card:nth-child(5n){--su-accent:#017d3c}
.su-highlights__photo{z-index:0;pointer-events:none}
.su-highlights__photo::after{background:linear-gradient(180deg,rgba(18,17,18,.35) 0%,transparent 30%,rgba(18,17,18,.08) 47%,rgba(18,17,18,.74) 100%)}
.su-highlights__info{position:relative;z-index:1}
.su-highlights__card:has(.su-highlights__photo){color:#fff!important}
.su-highlights .su-highlights__card h3,.su-highlights .su-highlights__card p,.su-highlights .su-highlights__card .su-highlights__tag{color:inherit!important}
.su-highlights__card:has(.su-highlights__photo) h3,.su-highlights__card:has(.su-highlights__photo) p,.su-highlights__card:has(.su-highlights__photo) .su-highlights__tag{color:#fff!important;text-shadow:0 1px 6px rgba(0,0,0,.35)}

/* Einheitliches, fontunabhaengiges Pfeil-Icon fuer Desktop und Mobile. */
.su-highlights .su-arrow-icon{display:block;flex:none;width:19px;height:19px;stroke:currentColor;stroke-width:2;overflow:visible;transition:transform .22s ease}
.su-highlights a:hover .su-arrow-icon{transform:translate(2px,-2px)}
.su-highlights a:focus-visible .su-arrow-icon{transform:translate(2px,-2px)}
@media(max-width:620px){.su-highlights .su-arrow-icon{width:18px;height:18px}}
@media(prefers-reduced-motion:reduce){.su-highlights .su-arrow-icon{transition:none}}
.su-highlights .su-highlights__arrow{font-size:initial;line-height:1;flex-shrink:0}
@media(max-width:620px){.su-highlights .su-highlights__arrow{width:40px;height:40px;flex-basis:40px}}

.su-discover,.su-discover *{box-sizing:border-box}.su-discover{padding:clamp(55px,7vw,90px) 20px;background:#f8f8f5;color:#241f21}.su-discover__wrap{max-width:1160px;margin:auto}.su-discover__header{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:30px}.su-discover__eyebrow{font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.su-discover h2{font-size:clamp(32px,4.3vw,56px);line-height:1.1;letter-spacing:-.045em;margin:8px 0 0}.su-discover__header p{max-width:360px;color:#666}.su-discover__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.su-discover__card{min-height:235px;position:relative;overflow:hidden;isolation:isolate;border:1px solid #e6e6e3;background:#fff;border-radius:20px;color:#241f21;text-decoration:none;transition:transform .2s,box-shadow .2s}.su-discover__card:nth-child(5n+1){border-top:6px solid #241f21}.su-discover__card:nth-child(5n+2){border-top:6px solid #e7e643}.su-discover__card:nth-child(5n+3){border-top:6px solid #17479d}.su-discover__card:nth-child(5n+4){border-top:6px solid #ec2128}.su-discover__card:nth-child(5n){border-top:6px solid #017d3c}.su-discover__image{position:absolute;inset:0;z-index:-1}.su-discover__image:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.84),rgba(0,0,0,.16))}.su-discover__image img{width:100%;height:100%;object-fit:cover;transition:transform .35s}.su-discover__card:has(.su-discover__image){color:#fff;border-top-color:transparent}.su-discover__body{padding:21px;height:100%;min-height:235px;display:flex;flex-direction:column;justify-content:space-between;gap:22px}.su-discover__tag{text-transform:uppercase;letter-spacing:.11em;font-size:11px;font-weight:800;opacity:.78}.su-discover__bottom{display:flex;align-items:end;justify-content:space-between;gap:8px}.su-discover h3{font-size:clamp(19px,2vw,26px);line-height:1.13;letter-spacing:-.03em;margin:0}.su-discover__arrow{font-size:25px}.su-discover__card:hover{transform:translateY(-4px);box-shadow:0 14px 32px #241f211b}.su-discover__card:hover img{transform:scale(1.06)}.su-discover__card:focus-visible{outline:3px solid #17479d;outline-offset:4px}@media(max-width:850px){.su-discover__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:550px){.su-discover__header{display:block}.su-discover__header p{margin-top:16px}.su-discover__grid{gap:10px}.su-discover__card,.su-discover__body{min-height:190px}.su-discover__body{padding:16px}.su-discover h3{font-size:19px}}@media(prefers-reduced-motion:reduce){.su-discover__card,.su-discover__image img{transition:none}}

/* Konsistente Kachelfarben und sichtbare Bilder */
.su-discover .su-discover__header h2{color:#241f21!important}
.su-discover__card:nth-child(5n+1){background:#fff;color:#241f21!important;--su-accent:#241f21}
.su-discover__card:nth-child(5n+2){background:#faf9e4;color:#241f21!important;--su-accent:#e7e643}
.su-discover__card:nth-child(5n+3){background:#edf2fb;color:#183d78!important;--su-accent:#17479d}
.su-discover__card:nth-child(5n+4){background:#fff0f0;color:#9d1720!important;--su-accent:#ec2128}
.su-discover__card:nth-child(5n){background:#eaf5ee;color:#075d32!important;--su-accent:#017d3c}
.su-discover__card{border-top:5px solid var(--su-accent)!important}
.su-discover__image{z-index:0;pointer-events:none}
.su-discover__image::after{background:linear-gradient(180deg,rgba(18,17,18,.32),transparent 34%,rgba(18,17,18,.72) 100%)}
.su-discover__body{position:relative;z-index:1}
.su-discover__card:has(.su-discover__image){color:#fff!important}
.su-discover .su-discover__card h3,.su-discover .su-discover__tag{color:inherit!important}
.su-discover__card:has(.su-discover__image) h3,.su-discover__card:has(.su-discover__image) .su-discover__tag{color:#fff!important;text-shadow:0 1px 6px rgba(0,0,0,.35)}

/* Einheitliches, fontunabhaengiges Pfeil-Icon fuer Desktop und Mobile. */
.su-discover .su-arrow-icon{display:block;flex:none;width:19px;height:19px;stroke:currentColor;stroke-width:2;overflow:visible;transition:transform .22s ease}
.su-discover a:hover .su-arrow-icon{transform:translate(2px,-2px)}
.su-discover a:focus-visible .su-arrow-icon{transform:translate(2px,-2px)}
@media(max-width:620px){.su-discover .su-arrow-icon{width:18px;height:18px}}
@media(prefers-reduced-motion:reduce){.su-discover .su-arrow-icon{transition:none}}
 .su-discover .su-discover__arrow{font-size:initial;line-height:1;flex:0 0 34px;width:34px;height:34px;border-radius:50%;border:1px solid currentColor;display:grid;place-items:center}
@media(max-width:550px){.su-discover .su-discover__arrow{width:32px;height:32px;flex-basis:32px}}

.su-culture,.su-culture *{box-sizing:border-box}.su-culture{padding:clamp(55px,7vw,90px) 20px;background:#fff;color:#241f21}.su-culture__wrap{max-width:1160px;margin:auto}.su-culture__header{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:30px}.su-culture__eyebrow{text-transform:uppercase;font-size:12px;font-weight:800;letter-spacing:.13em}.su-culture h2{font-size:clamp(32px,4.3vw,57px);letter-spacing:-.045em;line-height:1.08;margin:8px 0 0}.su-culture__header p{max-width:370px;color:#666}.su-culture__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.su-culture__card{position:relative;isolation:isolate;overflow:hidden;display:block;min-height:290px;border-radius:24px;background:#241f21;color:#fff;text-decoration:none;transition:transform .23s,box-shadow .23s}.su-culture__card:nth-child(5n+1){background:#241f21;color:#fff}.su-culture__card:nth-child(5n+2){background:#e7e643;color:#241f21}.su-culture__card:nth-child(5n+3){background:#17479d;color:#fff}.su-culture__card:nth-child(5n+4){background:#ec2128;color:#fff}.su-culture__card:nth-child(5n){background:#017d3c;color:#fff}.su-culture__image{position:absolute;inset:0;z-index:-1}.su-culture__image:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.78),rgba(0,0,0,.08))}.su-culture__image img{height:100%;width:100%;object-fit:cover;transition:transform .4s}.su-culture__card:has(.su-culture__image){color:#fff}.su-culture__body{min-height:290px;display:flex;flex-direction:column;justify-content:space-between;gap:20px;padding:29px}.su-culture__tag{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.9}.su-culture__bottom{display:flex;align-items:end;justify-content:space-between;gap:20px}.su-culture h3{font-size:clamp(26px,3.5vw,42px);letter-spacing:-.045em;line-height:1.09;margin:0}.su-culture__arrow{flex:0 0 44px;height:44px;display:grid;place-items:center;border:1px solid currentColor;border-radius:50%;font-size:24px}.su-culture__card:hover{transform:translateY(-4px);box-shadow:0 18px 40px #241f211b}.su-culture__card:hover img{transform:scale(1.06)}.su-culture__card:focus-visible{outline:3px solid #17479d;outline-offset:4px}@media(max-width:650px){.su-culture__header{display:block}.su-culture__header p{margin-top:16px}.su-culture__grid{grid-template-columns:1fr}.su-culture__card,.su-culture__body{min-height:240px}.su-culture__body{padding:24px}}@media(prefers-reduced-motion:reduce){.su-culture__card,.su-culture__image img{transition:none}}

/* Foto statt Farbblock im Vordergrund; Originalfarben als Akzent */
.su-culture .su-culture__header h2{color:#241f21!important}
.su-culture__card:nth-child(5n+1){background:#241f21;color:#fff!important;--su-accent:#241f21}
.su-culture__card:nth-child(5n+2){background:#faf9e4;color:#241f21!important;--su-accent:#e7e643}
.su-culture__card:nth-child(5n+3){background:#edf2fb;color:#183d78!important;--su-accent:#17479d}
.su-culture__card:nth-child(5n+4){background:#fff0f0;color:#9d1720!important;--su-accent:#ec2128}
.su-culture__card:nth-child(5n){background:#eaf5ee;color:#075d32!important;--su-accent:#017d3c}
.su-culture__card::before{content:"";height:5px;position:absolute;inset:0 0 auto;z-index:3;background:var(--su-accent)}
.su-culture__image{z-index:0;pointer-events:none}
.su-culture__image::after{background:linear-gradient(180deg,rgba(18,17,18,.30),transparent 37%,rgba(18,17,18,.73) 100%)}
.su-culture__body{position:relative;z-index:1}
.su-culture__card:has(.su-culture__image){color:#fff!important}
.su-culture .su-culture__card h3,.su-culture .su-culture__tag{color:inherit!important}
.su-culture__card:has(.su-culture__image) h3,.su-culture__card:has(.su-culture__image) .su-culture__tag{color:#fff!important;text-shadow:0 1px 6px rgba(0,0,0,.35)}

/* Einheitliches, fontunabhaengiges Pfeil-Icon fuer Desktop und Mobile. */
.su-culture .su-arrow-icon{display:block;flex:none;width:19px;height:19px;stroke:currentColor;stroke-width:2;overflow:visible;transition:transform .22s ease}
.su-culture a:hover .su-arrow-icon{transform:translate(2px,-2px)}
.su-culture a:focus-visible .su-arrow-icon{transform:translate(2px,-2px)}
@media(max-width:620px){.su-culture .su-arrow-icon{width:18px;height:18px}}
@media(prefers-reduced-motion:reduce){.su-culture .su-arrow-icon{transition:none}}
.su-culture .su-culture__arrow{font-size:initial;line-height:1;flex-shrink:0}
@media(max-width:620px){.su-culture .su-culture__arrow{width:40px;height:40px;flex-basis:40px}}

/* Modul 05: gleicher Seitenraster wie die Kultur-Kacheln */
.su-join,.su-join *{box-sizing:border-box}
.su-join{background:#f8f8f5;color:#241f21;padding:clamp(55px,7vw,90px) 20px}
.su-join__wrap{max-width:1160px;margin:0 auto}
.su-join__panel{position:relative;isolation:isolate;overflow:hidden;min-height:480px;border-radius:24px;background:#241f21;color:#fff;display:flex;flex-direction:column;justify-content:space-between}
.su-join__panel::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(36,31,33,.98) 0%,rgba(36,31,33,.91) 32%,rgba(36,31,33,.42) 71%,rgba(36,31,33,.1) 100%)}
.su-join__photo{position:absolute;inset:0;z-index:-2;pointer-events:none}
.su-join__photo img{width:100%;height:100%;display:block;object-fit:cover;object-position:center;transition:transform .65s ease}
.su-join__panel:hover .su-join__photo img{transform:scale(1.035)}
.su-join__content{padding:clamp(28px,5.2vw,72px);max-width:750px}
.su-join__eyebrow{display:inline-flex;align-items:center;gap:10px;color:#e7e643!important;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.13em}
.su-join__eyebrow::before{content:"";width:23px;height:4px;border-radius:4px;background:#e7e643}
.su-join .su-join__content h2{margin:20px 0 18px;color:#fff!important;font-size:clamp(38px,5.2vw,70px);font-weight:800;line-height:1.04;letter-spacing:-.05em;max-width:690px}
.su-join .su-join__content p{font-size:clamp(16px,1.5vw,19px);line-height:1.65;color:#fff!important;max-width:525px;margin:0 0 32px}
.su-join__button{display:inline-flex;align-items:center;gap:28px;justify-content:space-between;min-height:52px;padding:11px 17px 11px 24px;border-radius:999px;background:#e7e643;color:#241f21!important;text-decoration:none!important;font-size:15px;font-weight:800;transition:transform .2s,background .2s}
.su-join__button:hover{transform:translateY(-3px);background:#f4f36f;color:#241f21!important}
.su-join__button-icon{font-size:22px;line-height:1}
.su-join__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 clamp(28px,5.2vw,72px) 26px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff!important}
.su-join__colors{display:flex;gap:5px}.su-join__colors i{display:block;width:24px;height:5px;border-radius:3px;background:#241f21;border:1px solid rgba(255,255,255,.4)}
.su-join__colors i:nth-child(2){background:#e7e643;border:0}.su-join__colors i:nth-child(3){background:#17479d;border:0}.su-join__colors i:nth-child(4){background:#ec2128;border:0}.su-join__colors i:nth-child(5){background:#017d3c;border:0}
.su-join__button:focus-visible{outline:3px solid #fff;outline-offset:4px}
@media(max-width:760px){.su-join__panel{min-height:490px}.su-join__panel::before{background:linear-gradient(0deg,rgba(36,31,33,.98),rgba(36,31,33,.83) 46%,rgba(36,31,33,.36))}.su-join__content{padding:34px 24px}.su-join__foot{padding:0 24px 24px}.su-join .su-join__content h2{font-size:clamp(36px,8vw,53px)}}
@media(max-width:430px){.su-join__foot{align-items:flex-start;flex-direction:column;gap:14px}.su-join__button{width:100%}}
@media(prefers-reduced-motion:reduce){.su-join__button,.su-join__photo img{transition:none}}

/* Einheitliches, fontunabhaengiges Pfeil-Icon fuer Desktop und Mobile. */
.su-join .su-arrow-icon{display:block;flex:none;width:19px;height:19px;stroke:currentColor;stroke-width:2;overflow:visible;transition:transform .22s ease}
.su-join a:hover .su-arrow-icon{transform:translate(2px,-2px)}
.su-join a:focus-visible .su-arrow-icon{transform:translate(2px,-2px)}
@media(max-width:620px){.su-join .su-arrow-icon{width:18px;height:18px}}
@media(prefers-reduced-motion:reduce){.su-join .su-arrow-icon{transition:none}}
 .su-join .su-join__button-icon{font-size:initial;line-height:1;display:grid;place-items:center;flex:0 0 24px}

/* Modul 06: ruhiger Ausklang nach Modul 05, gleiche Kachelradien */
.su-social,.su-social *{box-sizing:border-box}
.su-social{padding:clamp(55px,7vw,90px) 20px;background:#fff;color:#241f21}
.su-social__wrap{max-width:1160px;margin:0 auto}
.su-social__header{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:30px}
.su-social__eyebrow{font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#241f21!important}
.su-social .su-social__header h2{font-size:clamp(32px,4.3vw,57px);font-weight:700;letter-spacing:-.045em;line-height:1.08;margin:8px 0 0;color:#241f21!important}
.su-social__header p{max-width:370px;color:#666!important;line-height:1.65;margin:0}
.su-social__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.su-social__card{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;min-height:330px;overflow:hidden;border-radius:24px;background:#241f21;color:#fff!important;text-decoration:none!important;transition:transform .23s,box-shadow .23s}
.su-social__card:nth-child(5n+2){background:#17479d}
.su-social__card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;z-index:3;background:#e7e643}
.su-social__card:nth-child(5n+2)::before{background:#ec2128}
.su-social__card:nth-child(5n+3)::before{background:#017d3c}
.su-social__image{position:absolute;inset:0;z-index:-2;pointer-events:none}
.su-social__image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .45s}
.su-social__card:has(.su-social__image)::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(18,17,18,.36),rgba(18,17,18,.18) 36%,rgba(18,17,18,.82) 100%)}
.su-social__body{min-height:330px;padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;justify-content:space-between;gap:55px;position:relative;z-index:1}
.su-social__tag{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:#fff!important}
.su-social__bottom{display:flex;align-items:end;justify-content:space-between;gap:20px}
.su-social .su-social__card h3{font-size:clamp(30px,3.4vw,45px);line-height:1.08;letter-spacing:-.045em;margin:0 0 10px;color:#fff!important}
.su-social .su-social__card p{max-width:340px;font-size:15px;line-height:1.55;color:#fff!important;margin:0 0 17px}
.su-social__linktext{font-size:13px;font-weight:800;color:#e7e643!important}
.su-social__arrow{flex:0 0 46px;width:46px;height:46px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.8);border-radius:50%;font-size:23px;line-height:1}
.su-social__card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(36,31,33,.16)}
.su-social__card:hover .su-social__image img{transform:scale(1.055)}
.su-social__card:focus-visible{outline:3px solid #17479d;outline-offset:4px}
@media(max-width:760px){.su-social__header{display:block}.su-social__header p{margin-top:16px}.su-social__grid{grid-template-columns:1fr}.su-social__card,.su-social__body{min-height:290px}}
@media(prefers-reduced-motion:reduce){.su-social__card,.su-social__image img{transition:none}}

/* Einheitliches, fontunabhaengiges Pfeil-Icon fuer Desktop und Mobile. */
.su-social .su-arrow-icon{display:block;flex:none;width:19px;height:19px;stroke:currentColor;stroke-width:2;overflow:visible;transition:transform .22s ease}
.su-social a:hover .su-arrow-icon{transform:translate(2px,-2px)}
.su-social a:focus-visible .su-arrow-icon{transform:translate(2px,-2px)}
@media(max-width:620px){.su-social .su-arrow-icon{width:18px;height:18px}}
@media(prefers-reduced-motion:reduce){.su-social .su-arrow-icon{transition:none}}
.su-social .su-social__arrow{font-size:initial;line-height:1;flex-shrink:0}
@media(max-width:620px){.su-social .su-social__arrow{width:40px;height:40px;flex-basis:40px}}