body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}
.rs-columns {
  clear: both;
  display: inline-block;
  width: 100%;
}

.rs-column {
  float: left;
  width: 100%;
  margin-top: 7.69231%;
  margin-right: 7.69231%;
}
.rs-column.-large-first {
  clear: left;
}
.rs-column.-large-last {
  margin-right: -5px;
}
.rs-column.-large-first-row {
  margin-top: 0;
}
.rs-column.-large-col-1-1 {
  width: 100%;
}
.rs-column.-large-col-2-1 {
  width: 46.15385%;
}
.rs-column.-large-col-2-2 {
  width: 100%;
}
.rs-column.-large-col-3-1 {
  width: 28.20513%;
}
.rs-column.-large-col-3-2 {
  width: 64.10256%;
}
.rs-column.-large-col-3-3 {
  width: 100%;
}
.rs-column.-large-col-4-1 {
  width: 19.23077%;
}
.rs-column.-large-col-4-2 {
  width: 46.15385%;
}
.rs-column.-large-col-4-3 {
  width: 73.07692%;
}
.rs-column.-large-col-4-4 {
  width: 100%;
}
.rs-column.-large-col-5-1 {
  width: 13.84615%;
}
.rs-column.-large-col-5-2 {
  width: 35.38462%;
}
.rs-column.-large-col-5-3 {
  width: 56.92308%;
}
.rs-column.-large-col-5-4 {
  width: 78.46154%;
}
.rs-column.-large-col-5-5 {
  width: 100%;
}
.rs-column.-large-col-6-1 {
  width: 10.25641%;
}
.rs-column.-large-col-6-2 {
  width: 28.20513%;
}
.rs-column.-large-col-6-3 {
  width: 46.15385%;
}
.rs-column.-large-col-6-4 {
  width: 64.10256%;
}
.rs-column.-large-col-6-5 {
  width: 82.05128%;
}
.rs-column.-large-col-6-6 {
  width: 100%;
}
@media screen and (max-width: 900px) {
  .rs-column {
    margin-top: 7.69231%;
    margin-right: 7.69231%;
  }
  .rs-column.-large-first {
    clear: none;
  }
  .rs-column.-large-last {
    margin-right: 7.69231%;
  }
  .rs-column.-large-first-row {
    margin-top: 7.69231%;
  }
  .rs-column.-medium-first {
    clear: left;
  }
  .rs-column.-medium-last {
    margin-right: -5px;
  }
  .rs-column.-medium-first-row {
    margin-top: 0;
  }
  .rs-column.-medium-col-1-1 {
    width: 100%;
  }
  .rs-column.-medium-col-2-1 {
    width: 46.15385%;
  }
  .rs-column.-medium-col-2-2 {
    width: 100%;
  }
  .rs-column.-medium-col-3-1 {
    width: 28.20513%;
  }
  .rs-column.-medium-col-3-2 {
    width: 64.10256%;
  }
  .rs-column.-medium-col-3-3 {
    width: 100%;
  }
  .rs-column.-medium-col-4-1 {
    width: 19.23077%;
  }
  .rs-column.-medium-col-4-2 {
    width: 46.15385%;
  }
  .rs-column.-medium-col-4-3 {
    width: 73.07692%;
  }
  .rs-column.-medium-col-4-4 {
    width: 100%;
  }
  .rs-column.-medium-col-5-1 {
    width: 13.84615%;
  }
  .rs-column.-medium-col-5-2 {
    width: 35.38462%;
  }
  .rs-column.-medium-col-5-3 {
    width: 56.92308%;
  }
  .rs-column.-medium-col-5-4 {
    width: 78.46154%;
  }
  .rs-column.-medium-col-5-5 {
    width: 100%;
  }
  .rs-column.-medium-col-6-1 {
    width: 10.25641%;
  }
  .rs-column.-medium-col-6-2 {
    width: 28.20513%;
  }
  .rs-column.-medium-col-6-3 {
    width: 46.15385%;
  }
  .rs-column.-medium-col-6-4 {
    width: 64.10256%;
  }
  .rs-column.-medium-col-6-5 {
    width: 82.05128%;
  }
  .rs-column.-medium-col-6-6 {
    width: 100%;
  }
}
@media screen and (max-width: 599px) {
  .rs-column {
    margin-top: 7.69231%;
    margin-right: 7.69231%;
  }
  .rs-column.-large-last {
    margin-right: 7.69231%;
  }
  .rs-column.-large-first-row {
    margin-top: 7.69231%;
  }
  .rs-column.-medium-first {
    clear: none;
  }
  .rs-column.-medium-last {
    margin-right: 7.69231%;
  }
  .rs-column.-medium-first-row {
    margin-top: 7.69231%;
  }
  .rs-column.-small-first {
    clear: left;
  }
  .rs-column.-small-last {
    margin-right: -5px;
  }
  .rs-column.-small-first-row {
    margin-top: 0;
  }
  .rs-column.-small-col-1-1 {
    width: 100%;
  }
  .rs-column.-small-col-2-1 {
    width: 46.15385%;
  }
  .rs-column.-small-col-2-2 {
    width: 100%;
  }
  .rs-column.-small-col-3-1 {
    width: 28.20513%;
  }
  .rs-column.-small-col-3-2 {
    width: 64.10256%;
  }
  .rs-column.-small-col-3-3 {
    width: 100%;
  }
  .rs-column.-small-col-4-1 {
    width: 19.23077%;
  }
  .rs-column.-small-col-4-2 {
    width: 46.15385%;
  }
  .rs-column.-small-col-4-3 {
    width: 73.07692%;
  }
  .rs-column.-small-col-4-4 {
    width: 100%;
  }
  .rs-column.-small-col-5-1 {
    width: 13.84615%;
  }
  .rs-column.-small-col-5-2 {
    width: 35.38462%;
  }
  .rs-column.-small-col-5-3 {
    width: 56.92308%;
  }
  .rs-column.-small-col-5-4 {
    width: 78.46154%;
  }
  .rs-column.-small-col-5-5 {
    width: 100%;
  }
  .rs-column.-small-col-6-1 {
    width: 10.25641%;
  }
  .rs-column.-small-col-6-2 {
    width: 28.20513%;
  }
  .rs-column.-small-col-6-3 {
    width: 46.15385%;
  }
  .rs-column.-small-col-6-4 {
    width: 64.10256%;
  }
  .rs-column.-small-col-6-5 {
    width: 82.05128%;
  }
  .rs-column.-small-col-6-6 {
    width: 100%;
  }
}

/* =============================================
   STREET POINTS – Navigation (sp-nav)
   Desktop: horizontal rechts oben
   Mobile (<768px): Burger-Icon + Slide-In von rechts
   ============================================= */

/* ─── Nav Container ─── */
.sp-nav {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 10;
  display: flex;
  justify-content: flex-end;
  padding: 22px 48px;
}

/* ─── Burger-Button (mobil) ─── */
.sp-nav__burger {
  display: none; /* Desktop: versteckt */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 52;
}

.sp-nav__burger-line {
  display: block;
  width: 28px;
  height: 3px;
  background: #8bc53f;
  border-radius: 2px;
  transition:
    transform 0.3s,
    opacity 0.3s;
}

/* Burger → X Animation wenn offen */
.sp-nav--open .sp-nav__burger-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.sp-nav--open .sp-nav__burger-line:nth-child(2) {
  opacity: 0;
}

.sp-nav--open .sp-nav__burger-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ─── Overlay (mobil) ─── */
.sp-nav__overlay {
  display: none;
}

/* ─── Panel (Desktop: transparent, keine Sonderposition) ─── */
.sp-nav__panel {
  display: flex;
  align-items: center;
}

/* ─── Schließen-Button (nur mobil sichtbar) ─── */
.sp-nav__close {
  display: none;
}

/* ─── Level 1 Liste ─── */
.sp-nav__list--level-1 {
  display: flex;
  list-style: none;
  gap: 8px;
  margin: 0;
  padding: 0;
}

/* ─── Links ─── */
.sp-nav__link {
  display: block;
  text-decoration: none;
  color: #8bc53f;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  padding: 8px 18px;
  border-radius: 4px;
  transition:
    color 0.2s,
    background-color 0.2s;
}

.sp-nav__link:hover {
  color: #a8e050;
  background: rgba(255, 255, 255, 0.07);
}

/* Aktive Seite */
.sp-nav__link--active {
  color: #ffffff;
  font-style: normal;
  cursor: default;
}

/* Trail */
.sp-nav__item--trail > .sp-nav__link {
  color: #ffffff;
}

/* ==============================================
   MOBILE – Burger + Slide-In Panel
   ============================================== */
@media (max-width: 768px) {
  .sp-nav {
    padding: 16px 20px;
  }

  /* Burger sichtbar */
  .sp-nav__burger {
    display: flex;
  }

  /* Overlay: dunkler Hintergrund */
  .sp-nav--open .sp-nav__overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 50;
  }

  /* Panel: Slide-In von rechts */
  .sp-nav__panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 280px;
    max-width: 80vw;
    height: 100vh;
    height: 100dvh;
    background: #3c2f58;
    flex-direction: column;
    align-items: stretch;
    padding: 80px 24px 40px;
    z-index: 51;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
  }

  .sp-nav--open .sp-nav__panel {
    transform: translateX(0);
  }

  /* Schließen-Button sichtbar */
  .sp-nav__close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    color: #8bc53f;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s;
  }

  .sp-nav__close:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  /* Liste vertikal */
  .sp-nav__list--level-1 {
    flex-direction: column;
    gap: 4px;
  }

  /* Links im mobilen Menü */
  .sp-nav__link {
    font-size: 18px;
    padding: 14px 16px;
    border-radius: 8px;
  }

  .sp-nav__link:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  /* Sublevel einrücken */
  .sp-nav__list--level-2 {
    list-style: none;
    padding-left: 16px;
    margin: 0;
  }

  .sp-nav__list--level-2 .sp-nav__link {
    font-size: 15px;
    padding: 10px 16px;
    color: rgba(139, 197, 63, 0.75);
  }

  .sp-nav__list--level-2 .sp-nav__link:hover {
    color: #8bc53f;
  }
}

/* ==============================================
   TABLET – etwas kompakter
   ============================================== */
@media (min-width: 769px) and (max-width: 1024px) {
  .sp-nav {
    padding: 18px 32px;
  }

  .sp-nav__link {
    font-size: 13px;
    padding: 6px 14px;
  }
}

/* ===== SP-TOPNAV ===== */

/* Positioned absolutely inside #header.sp-header */
.sp-topnav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 22px 48px;
}

/* Desktop: inline horizontal panel */
.sp-topnav__panel {
  display: flex;
  align-items: center;
}

/* Nav list */
.sp-topnav__nav {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 8px;
  margin-top: 10px;
}

.sp-topnav__nav li a,
.sp-topnav__nav li strong {
  display: block;
  text-decoration: none;
  color: var(--green-brand);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  padding: 8px 18px;
  border-radius: 4px;
  transition:
    color 0.2s,
    background 0.2s;
}

/* Active page */
.sp-topnav__nav li strong {
  color: var(--white);
}

.sp-topnav__nav li a:hover {
  color: var(--nav-hover);
  background: rgba(255, 255, 255, 0.07);
}

/* Desktop: hide mobile-only elements */
.sp-topnav__burger,
.sp-topnav__close,
.sp-topnav__backdrop {
  display: none;
}

/* ===== MOBILE (≤ 900px) ===== */
@media (max-width: 900px) {
  .sp-topnav {
    padding: 16px 24px;
    pointer-events: none;
    /* let taps pass through to header below */
  }

  /* Hamburger button: top-right corner */
  .sp-topnav__burger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 32px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 11;
    pointer-events: all;
  }

  .sp-topnav__burger span {
    display: block;
    width: 100%;
    height: 3px;
    background: var(--white);
    border-radius: 2px;
    transition:
      transform 0.3s,
      opacity 0.3s;
  }

  /* Drawer: slides in from right */
  .sp-topnav__panel {
    position: fixed;
    top: 0;
    right: calc(-1 * var(--drawer-width));
    width: var(--drawer-width);
    height: 100%;
    background: var(--purple-dark);
    flex-direction: column;
    align-items: stretch;
    z-index: 1000;
    transition: right 0.3s ease;
    overflow-y: auto;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.35);
    pointer-events: all;
  }

  .sp-topnav__panel.is-open {
    right: 0;
  }

  /* Close button inside drawer */
  .sp-topnav__close {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    padding: 18px 20px 12px;
    background: none;
    border: none;
    color: var(--white);
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    pointer-events: all;
  }

  /* Mobile nav list: vertical */
  .sp-topnav__nav {
    flex-direction: column;
    gap: 0;
    padding: 8px 0 24px;
  }

  .sp-topnav__nav li a,
  .sp-topnav__nav li strong {
    padding: 14px 24px;
    font-size: 16px;
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--white);
  }

  .sp-topnav__nav li a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--green-brand);
  }

  /* Backdrop: only covers the area left of the drawer */
  .sp-topnav__backdrop {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: var(--drawer-width);
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
  }

  .sp-topnav__backdrop.is-visible {
    opacity: 1;
    pointer-events: all;
  }
}

@media (max-width: 600px) {
  .sp-topnav {
    padding: 12px 16px;
  }
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --purple-dark: #3c2f58;
  --purple-mid: #3a2a5c;
  --green-brand: #8bc53f;
  --green-dark: #6ba530;
  --white: #ffffff;
  --nav-hover: #a8e050;
  --drawer-width: 280px;
}

body {
  font-family: "Century Gothic", sans-serif;
  background: #f0ede8;
  overflow-x: hidden;
  max-width: 1920px;
  margin-inline: auto;
}

h2 {
  font-size: 1.75rem;
  color: var(--purple-dark);
  margin-bottom: 0.5rem;
}

.registration-heading, .registration-heading h2 {
  font-size: 1.75rem;
  border-bottom: 2px solid white;
  padding-bottom: 10px;
}

a {
  color: var(--green-brand);
  text-decoration: none;
  transition: color 0.2s, text-decoration 0.2s;
}
a:hover {
  color: var(--nav-hover);
  text-decoration: underline;
}

p {
  font-size: 1.3rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.purple-bg {
  background-color: var(--purple-mid);
}

.purple-bg h1,
.purple-bg h2,
.purple-bg h3 {
  color: var(--green-brand);
}

.purple-bg p, .purple-bg li, .purple-bg legend {
  color: var(--white);
}

.step-container {
  padding: 2.5rem 8rem;
}

.widget label, 
.widget-password,
.widget-text {
  color: var(--white);
}

.widget-password,
.widget-text {
  display: flex;
  flex-direction: column;
}

.widget-submit {
  margin-top: 20px;
  margin-bottom: 20px;
}

label {
  padding-inline: 20px;
  margin-bottom: 10px;
  font-size: 1.3rem;
}

input[type="text"],
input[type="password"],
input[type="email"],
#ctrl_phone,
select,
textarea {
  background: var(--purple-dark);
  border-radius: 20px;
  border: 1px solid white;
  padding: 10px 20px;
  font-size: 1.3rem;
  color: white;
  margin-bottom: 15px;
  width: 100%;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0 0 20px;
}

#ctrl_gender {
  background: var(--purple-dark) !important;
  border-radius: 20px !important;
  border: 1px solid white !important;
  padding: 10px 20px !important;
  font-size: 1.3rem !important;
  color: white !important;
  margin-bottom: 15px !important;
  height: unset !important;
  width: 100%;
}

input[type="submit"], button[type="submit"] {
  background: var(--green-brand);
  border: none;
  border-radius: 20px;
  padding: 12px 24px;
  font-size: 1.3rem;
  cursor: pointer;
  transition: background 0.2s;
}

.pflicht, .mandatory {
  color: #ffa4a4;
}

.meansOfTransport, .safety  {
  display: flex;
}

.password-reset a {
  color: var(--green-brand);
}

/* ===== SP HEADER WRAPPER & COMPONENTS ===== */
/* Common positioned parent for header + hero box */
.sp-header-wrap {
  position: relative;
}
/* ===== SP HEADER ===== */
#header.sp-header {
  position: relative;
  width: 100%;
  overflow: hidden;
}
/* Sets the header height proportional to viewport width.
   SVG aspect ratio ~2330:1107. padding-bottom 50% � half viewport width. */
.sp-header__spacer {
  width: 100%;
  padding-bottom: 50%;
}
/* Background photo */
.sp-header__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: center center / cover no-repeat;
}
/* Fallback gradient when no image is set */
.sp-header__bg-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(135deg, #5a4a6a 0%, #8a7a9a 50%, #c0b0a0 100%);
}
/* Purple curved SVG overlay */
.sp-header__overlay {
  position: absolute;
  top: -13%;
  left: 0;
  width: 100%;
  z-index: 2;
  pointer-events: none;
  line-height: 0;
}
.sp-header__overlay svg {
  display: block;
  width: 100%;
  height: auto;
}
/* Contao modules (nav, logo etc.) sit above the overlay */
.sp-header__modules {
  position: absolute;
  inset: 0;
  z-index: 10;
}
.sp-header__modules .inside {
  position: relative;
  height: 100%;
}
/* ===== HERO TEXT BOX (desktop) ===== */
/* Positioned absolute over the header via the wrapper */
.sp-header__hero {
  position: absolute;
  bottom: -10%;
  width: 60%;
  z-index: 20;
  background: rgba(255, 255, 255, 0.88);
  border-radius: 0 20px 20px 0;
  padding: 2rem 2rem 2rem 8rem;
}
.sp-header__hero-title {
  font-family: "Century Gothic", sans-serif;
  font-weight: 900;
  font-size: clamp(1.2rem, 2.6vw, 2.6rem);
  line-height: 1.15;
  color: var(--purple-dark);
  margin: 0 0 0.75em 0;
  letter-spacing: 0.02em;
}
.sp-header__hero-text {
  font-family: "Century Gothic", sans-serif;
  font-size: clamp(1rem, 1.1vw, 1.3rem);
  line-height: 1.65;
  color: #333333;
  margin: 0;
}
/* ===== HEADER RESPONSIVE ===== */
@media (max-width: 1100px) {
  .sp-header__hero {
    width: 60%;
    padding: 1.5rem 2rem;
  }
}
@media (max-width: 900px) {
  /* Taller header on tablet */
  .sp-header__spacer {
    padding-bottom: 65%;
  }
  /* Hero comes out of absolute flow and sits below the header */
  .sp-header__hero {
    position: static;
    width: 100%;
    background: transparent;
    padding: 1.5rem 1.25rem 0.5rem;
  }
  .sp-header__hero-title {
    font-size: clamp(1.3rem, 5vw, 1.9rem);
    color: var(--purple-dark);
  }
  .sp-header__hero-text {
    font-size: 0.95rem;
    color: #444;
  }
}
@media (max-width: 600px) {
  .sp-header__spacer {
    padding-bottom: 80%;
  }
  .sp-header__overlay {
    top: 0%;
  }
  .sp-header__hero {
    padding: 1.25rem 1rem 0.5rem;
  }
  .sp-header__hero-title {
    font-size: clamp(1.1rem, 5.5vw, 1.6rem);
  }
}

/* ===== HEADER WRAPPER ===== */
.header {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.header__spacer {
  width: 100%;
  padding-bottom: 50%;
}

/* ===== HERO IMAGE ===== */
.header__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url("../../files/street-points_v2/css/D:/SVN/piserver2/Marketing/Interne Projekte/Street-Points/Medien/1.2_Fotos/Fotoshooting/MZ7_9351.jpg") center center / cover no-repeat;
}

/* Fallback gradient when image is not available */
.header__bg-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(135deg, #5a4a6a 0%, #8a7a9a 50%, #c0b0a0 100%);
}

/* ===== PURPLE SVG OVERLAY (curved shape from original design) ===== */
.header__overlay {
  position: absolute;
  top: -13%;
  left: 0;
  width: 100%;
  z-index: 2;
  pointer-events: none;
  line-height: 0;
}

.header__overlay svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ===== TOP NAV BAR ===== */
.topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 22px 48px;
  gap: 12px;
}

.topbar__nav {
  display: flex;
  list-style: none;
  gap: 8px;
}

.topbar__nav a {
  text-decoration: none;
  color: var(--green-brand);
  font-family: "Century Gothic", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  padding: 8px 18px;
  border-radius: 4px;
  transition:
    color 0.2s,
    background 0.2s;
}

.topbar__nav a:hover {
  color: var(--nav-hover);
  background: rgba(255, 255, 255, 0.07);
}

/* ===== LOGO ===== */
.logo {
  position: absolute;
  top: 50px;
  left: 48px;
  z-index: 10;
}

.logo svg {
  width: 220px;
  height: auto;
}

/* ===== LOGO TEXT (SVG-based for pixel precision) ===== */
.logo-container {
  position: absolute;
  top: 55px;
  left: 48px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.logo-container img {
  width: 17vw;
  max-width: 400px;
  height: auto;
}

.logo-text {
  font-weight: 900;
  text-transform: uppercase;
  color: var(--white);
  letter-spacing: 0.04em;
}

.logo-line1 {
  font-size: 52px;
  display: flex;
  align-items: center;
}

.logo-line2 {
  font-size: 52px;
  display: flex;
  align-items: center;
  margin-top: -8px;
}

/* Green map pin "O" */
.logo-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 46px;
  height: 52px;
  margin: 0 -2px;
}

.logo-pin svg {
  width: 42px;
  height: 56px;
  position: relative;
  top: -4px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .topbar {
    padding: 16px 24px;
  }

  .topbar__nav a {
    font-size: 13px;
    padding: 6px 12px;
  }

  .logo-container {
    top: 40px;
    left: 24px;
  }

  .logo-line1,
  .logo-line2 {
    font-size: 38px;
  }

  .logo-pin svg {
    width: 32px;
    height: 44px;
  }
}

@media (max-width: 600px) {
  .topbar {
    padding: 12px 16px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .topbar__nav {
    gap: 2px;
  }

  .topbar__nav a {
    font-size: 12px;
    padding: 6px 10px;
  }

  .logo-container {
    top: 20px;
    left: 16px;
  }

  .logo-container img {
    width: 25vw;
  }

  .logo-line1,
  .logo-line2 {
    font-size: 30px;
  }

  .logo-pin svg {
    width: 26px;
    height: 36px;
  }
}

/* ===== TEXT CONTAINER ===== */
.floating-content-container {
  position: relative;
  height: 830px;
}

.text-container-left {
  position: absolute;
  width: 60%;
  z-index: 20;
  background: rgba(255, 255, 255, 0.88);
  border-radius: 0 20px 20px 0;
  padding: 2rem 2rem 2rem 9rem;
}

.text-container-right {
  position: absolute;
  right: 0;
  width: 70%;
  z-index: 20;
  background: rgba(255, 255, 255, 0.88);
  border-radius: 0 20px 20px 0;
  padding: 2rem 9rem 2rem 2rem;
}

.img-container-right {
  position: absolute;
  right: 0;
  width: 60%;
  padding: 50px 0;
  z-index: 0;
}

.img-container-right img {
  width: 100%;
  height: auto;
  max-height: 500px;
  border-radius: 20px 0 0 20px;
  object-fit: cover;
}

.text-container-right.pos-top,
.text-container-left.pos-top,
.img-container-right.pos-top {
  top: 0;
}

.text-container-right.pos-bottom,
.text-container-left.pos-bottom,
.img-container-right.pos-bottom {
  bottom: 0;
}

.text-container-left.pos-center,
.text-container-right.pos-center,
.img-container-right.pos-center {
  top: 50%;
  transform: translateY(-50%);
}

@media screen and (max-width: 1100px) {
  .text-container-left,
  .text-container-right {
    width: 60%;
    padding: 1.5rem 2rem;
  }
}

@media screen and (max-width: 900px) {
  .floating-content-container {
    position: static;
    height: auto;
    max-height: none;
  }

  .text-container-left,
  .text-container-right {
    padding: 20px;
  }

  .text-container-left,
  .text-container-right,
  .img-container-right {
    position: static;
    transform: none !important;
    width: 100%;
    border-radius: 0;
  }

  .img-container-right {
    padding: 0;
  }

  .img-container-right img {
    border-radius: 0;
    padding: 0;
  }
}

/* ===== STEP CONTAINERS ===== */

.step-row {
  display: grid;
  align-items: center;
  padding-bottom: 52px;
}

.step-row.text-img {
  grid-template-columns: 1.2fr 0.8fr;
}

.step-row.img-text {
  grid-template-columns: 0.8fr 1.2fr;
}

.step-row figure {
  text-align: center;
}

.step-row img {
  width: 100%;
  max-width: 250px;
}

.step {
  display: flex;
  gap: 22px;
}
.step-number {
  font-size: 84px;
  font-weight: 800;
  color: var(--green-brand);
  line-height: 0.9;
  min-width: 112px;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.step-text {
  font-size: 18.5px;
  line-height: 1.72;
  color: #fff;
  padding-top: 10px;
}

@media screen and (max-width: 900px) {
  .step-row {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }

  .step-container {
    padding: 20px;
  }
}

/* ===== FOOTER ===== */
.site-footer {
  background: var(--green-brand);
  padding: 2rem 2rem;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.2rem;
}
.footer-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer-pironex-logo {
  background: #c0392b;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}
.footer-text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
}
.footer-links-row {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}
.footer-links-row a {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
  transition: 0.15s;
}
.footer-links-row a:hover {
  color: var(--green);
}

/* ===== HELPER ===== */

.center {
  margin-inline: auto;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sp-video video {
  width: 100%;
  max-width: 100%;
  object-fit: cover;
  max-height: 700px;
}

/* ===== MARGIN HELPERS ===== */
/* All sides */
.m-0 {
  margin: 0;
}
.m-5 {
  margin: 5px;
}
.m-10 {
  margin: 10px;
}
.m-15 {
  margin: 15px;
}
.m-20 {
  margin: 20px;
}
.m-25 {
  margin: 25px;
}
.m-30 {
  margin: 30px;
}
.m-40 {
  margin: 40px;
}
.m-50 {
  margin: 50px;
}
.m-75 {
  margin: 75px;
}
.m-150 {
  margin: 150px;
}

/* Top/Bottom */
.my-0 {
  margin-top: 0;
  margin-bottom: 0;
}
.my-5 {
  margin-top: 5px;
  margin-bottom: 5px;
}
.my-10 {
  margin-top: 10px;
  margin-bottom: 10px;
}
.my-15 {
  margin-top: 15px;
  margin-bottom: 15px;
}
.my-20 {
  margin-top: 20px;
  margin-bottom: 20px;
}
.my-30 {
  margin-top: 30px;
  margin-bottom: 30px;
}
.my-50 {
  margin-top: 50px;
  margin-bottom: 50px;
}
.my-75 {
  margin-top: 75px;
  margin-bottom: 75px;
}
.my-150 {
  margin-top: 150px;
  margin-bottom: 150px;
}

/* Left/Right */
.mx-0 {
  margin-left: 0;
  margin-right: 0;
}
.mx-5 {
  margin-left: 5px;
  margin-right: 5px;
}
.mx-10 {
  margin-left: 10px;
  margin-right: 10px;
}
.mx-15 {
  margin-left: 15px;
  margin-right: 15px;
}
.mx-20 {
  margin-left: 20px;
  margin-right: 20px;
}
.mx-30 {
  margin-left: 30px;
  margin-right: 30px;
}
.mx-50 {
  margin-left: 50px;
  margin-right: 50px;
}
.mx-75 {
  margin-left: 75px;
  margin-right: 75px;
}
.mx-150 {
  margin-left: 150px;
  margin-right: 150px;
}

/* Individual sides */
.mt-5 {
  margin-top: 5px;
}
.mt-10 {
  margin-top: 10px;
}
.mt-15 {
  margin-top: 15px;
}
.mt-20 {
  margin-top: 20px;
}
.mt-30 {
  margin-top: 30px;
}
.mt-50 {
  margin-top: 50px;
}
.mt-75 {
  margin-top: 75px;
}
.mt-150 {
  margin-top: 150px;
}

.mb-5 {
  margin-bottom: 5px;
}
.mb-10 {
  margin-bottom: 10px;
}
.mb-15 {
  margin-bottom: 15px;
}
.mb-20 {
  margin-bottom: 20px;
}
.mb-30 {
  margin-bottom: 30px;
}
.mb-50 {
  margin-bottom: 50px;
}
.mb-75 {
  margin-bottom: 75px;
}
.mb-150 {
  margin-bottom: 150px;
}

.ml-5 {
  margin-left: 5px;
}
.ml-10 {
  margin-left: 10px;
}
.ml-15 {
  margin-left: 15px;
}
.ml-20 {
  margin-left: 20px;
}
.ml-30 {
  margin-left: 30px;
}
.ml-50 {
  margin-left: 50px;
}
.ml-75 {
  margin-left: 75px;
}
.ml-150 {
  margin-left: 150px;
}

.mr-5 {
  margin-right: 5px;
}
.mr-10 {
  margin-right: 10px;
}
.mr-15 {
  margin-right: 15px;
}
.mr-20 {
  margin-right: 20px;
}
.mr-30 {
  margin-right: 30px;
}
.mr-50 {
  margin-right: 50px;
}
.mr-75 {
  margin-right: 75px;
}
.mr-150 {
  margin-right: 150px;
}

/* ===== PADDING HELPERS ===== */
/* All sides */
.p-0 {
  padding: 0;
}
.p-5 {
  padding: 5px;
}
.p-10 {
  padding: 10px;
}
.p-15 {
  padding: 15px;
}
.p-20 {
  padding: 20px;
}
.p-25 {
  padding: 25px;
}
.p-30 {
  padding: 30px;
}
.p-40 {
  padding: 40px;
}
.p-50 {
  padding: 50px;
}
.p-75 {
  padding: 75px;
}
.p-150 {
  padding: 150px;
}

/* Top/Bottom */
.py-0 {
  padding-top: 0;
  padding-bottom: 0;
}
.py-5 {
  padding-top: 5px;
  padding-bottom: 5px;
}
.py-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}
.py-15 {
  padding-top: 15px;
  padding-bottom: 15px;
}
.py-20 {
  padding-top: 20px;
  padding-bottom: 20px;
}
.py-30 {
  padding-top: 30px;
  padding-bottom: 30px;
}
.py-50 {
  padding-top: 50px;
  padding-bottom: 50px;
}
.py-75 {
  padding-top: 75px;
  padding-bottom: 75px;
}
.py-150 {
  padding-top: 150px;
  padding-bottom: 150px;
}

/* Left/Right */
.px-0 {
  padding-left: 0;
  padding-right: 0;
}
.px-5 {
  padding-left: 5px;
  padding-right: 5px;
}
.px-10 {
  padding-left: 10px;
  padding-right: 10px;
}
.px-15 {
  padding-left: 15px;
  padding-right: 15px;
}
.px-20 {
  padding-left: 20px;
  padding-right: 20px;
}
.px-30 {
  padding-left: 30px;
  padding-right: 30px;
}
.px-50 {
  padding-left: 50px;
  padding-right: 50px;
}
.px-75 {
  padding-left: 75px;
  padding-right: 75px;
}
.px-150 {
  padding-left: 150px;
  padding-right: 150px;
}

/* Individual sides */
.pt-5 {
  padding-top: 5px;
}
.pt-10 {
  padding-top: 10px;
}
.pt-15 {
  padding-top: 15px;
}
.pt-20 {
  padding-top: 20px;
}
.pt-30 {
  padding-top: 30px;
}

.pb-5 {
  padding-bottom: 5px;
}
.pb-10 {
  padding-bottom: 10px;
}
.pb-15 {
  padding-bottom: 15px;
}
.pb-20 {
  padding-bottom: 20px;
}
.pb-30 {
  padding-bottom: 30px;
}
.pb-50 {
  padding-bottom: 50px;
}
.pb-75 {
  padding-bottom: 75px;
}
.pb-150 {
  padding-bottom: 150px;
}

.pl-5 {
  padding-left: 5px;
}
.pl-10 {
  padding-left: 10px;
}
.pl-15 {
  padding-left: 15px;
}
.pl-20 {
  padding-left: 20px;
}
.pl-30 {
  padding-left: 30px;
}

.pr-5 {
  padding-right: 5px;
}
.pr-10 {
  padding-right: 10px;
}
.pr-15 {
  padding-right: 15px;
}
.pr-20 {
  padding-right: 20px;
}
.pr-30 {
  padding-right: 30px;
}

#container {
  background-image: url("/files/street-points_v2/img/Screenshot 2026-04-08 090413.png");
  background-size: cover;
  background-color: rgba(255, 255, 255, 0.6);
  background-blend-mode: lighten;
  background-repeat: repeat-y;
}

#main {
  background-image: url("/files/street-points_v2/img/pfad.png");
  background-size: 90% auto;
  background-position: center;
  background-repeat: repeat-y;
}

/* ===== MOBILE MARGIN & PADDING HELPERS ===== */
/* Nur aktiv auf Geräten <= 768px Breite */
@media (max-width: 768px) {
  /* Mobile Margin - All sides */
  .m-md-0 {
    margin: 0;
  }
  .m-md-5 {
    margin: 5px;
  }
  .m-md-10 {
    margin: 10px;
  }
  .m-md-15 {
    margin: 15px;
  }
  .m-md-20 {
    margin: 20px;
  }
  .m-md-30 {
    margin: 30px;
  }

  /* Mobile Margin - Top/Bottom */
  .my-md-0 {
    margin-top: 0;
    margin-bottom: 0;
  }
  .my-md-5 {
    margin-top: 5px;
    margin-bottom: 5px;
  }
  .my-md-10 {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .my-md-15 {
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .my-md-20 {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .my-md-30 {
    margin-top: 30px;
    margin-bottom: 30px;
  }

  /* Mobile Margin - Left/Right */
  .mx-md-0 {
    margin-left: 0;
    margin-right: 0;
  }
  .mx-md-5 {
    margin-left: 5px;
    margin-right: 5px;
  }
  .mx-md-10 {
    margin-left: 10px;
    margin-right: 10px;
  }
  .mx-md-15 {
    margin-left: 15px;
    margin-right: 15px;
  }
  .mx-md-20 {
    margin-left: 20px;
    margin-right: 20px;
  }
  .mx-md-30 {
    margin-left: 30px;
    margin-right: 30px;
  }

  /* Mobile Margin - Individual sides */
  .mt-md-5 {
    margin-top: 5px;
  }
  .mt-md-10 {
    margin-top: 10px;
  }
  .mt-md-15 {
    margin-top: 15px;
  }
  .mt-md-20 {
    margin-top: 20px;
  }
  .mt-md-30 {
    margin-top: 30px;
  }

  .mb-md-5 {
    margin-bottom: 5px;
  }
  .mb-md-10 {
    margin-bottom: 10px;
  }
  .mb-md-15 {
    margin-bottom: 15px;
  }
  .mb-md-20 {
    margin-bottom: 20px;
  }
  .mb-md-30 {
    margin-bottom: 30px;
  }

  .ml-md-5 {
    margin-left: 5px;
  }
  .ml-md-10 {
    margin-left: 10px;
  }
  .ml-md-15 {
    margin-left: 15px;
  }
  .ml-md-20 {
    margin-left: 20px;
  }
  .ml-md-30 {
    margin-left: 30px;
  }

  .mr-md-5 {
    margin-right: 5px;
  }
  .mr-md-10 {
    margin-right: 10px;
  }
  .mr-md-15 {
    margin-right: 15px;
  }
  .mr-md-20 {
    margin-right: 20px;
  }
  .mr-md-30 {
    margin-right: 30px;
  }

  /* Mobile Padding - All sides */
  .p-md-0 {
    padding: 0;
  }
  .p-md-5 {
    padding: 5px;
  }
  .p-md-10 {
    padding: 10px;
  }
  .p-md-15 {
    padding: 15px;
  }
  .p-md-20 {
    padding: 20px;
  }
  .p-md-30 {
    padding: 30px;
  }

  /* Mobile Padding - Top/Bottom */
  .py-md-0 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .py-md-5 {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .py-md-10 {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .py-md-15 {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .py-md-20 {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .py-md-30 {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  /* Mobile Padding - Left/Right */
  .px-md-0 {
    padding-left: 0;
    padding-right: 0;
  }
  .px-md-5 {
    padding-left: 5px;
    padding-right: 5px;
  }
  .px-md-10 {
    padding-left: 10px;
    padding-right: 10px;
  }
  .px-md-15 {
    padding-left: 15px;
    padding-right: 15px;
  }
  .px-md-20 {
    padding-left: 20px;
    padding-right: 20px;
  }
  .px-md-30 {
    padding-left: 30px;
    padding-right: 30px;
  }

  /* Mobile Padding - Individual sides */
  .pt-md-5 {
    padding-top: 5px;
  }
  .pt-md-10 {
    padding-top: 10px;
  }
  .pt-md-15 {
    padding-top: 15px;
  }
  .pt-md-20 {
    padding-top: 20px;
  }
  .pt-md-30 {
    padding-top: 30px;
  }

  .pb-md-5 {
    padding-bottom: 5px;
  }
  .pb-md-10 {
    padding-bottom: 10px;
  }
  .pb-md-15 {
    padding-bottom: 15px;
  }
  .pb-md-20 {
    padding-bottom: 20px;
  }
  .pb-md-30 {
    padding-bottom: 30px;
  }

  .pl-md-5 {
    padding-left: 5px;
  }
  .pl-md-10 {
    padding-left: 10px;
  }
  .pl-md-15 {
    padding-left: 15px;
  }
  .pl-md-20 {
    padding-left: 20px;
  }
  .pl-md-30 {
    padding-left: 30px;
  }

  .pr-md-5 {
    padding-right: 5px;
  }
  .pr-md-10 {
    padding-right: 10px;
  }
  .pr-md-15 {
    padding-right: 15px;
  }
  .pr-md-20 {
    padding-right: 20px;
  }
  .pr-md-30 {
    padding-right: 30px;
  }
}

.hide-mobile {
  display: block;
}

.hidden {
  display: none;
}

@media screen and (max-width: 900px) {
  .hide-mobile {
    display: none;
  }
}