@charset "utf-8";
/* CSS Document */

.registration-hero{
  padding-top:clamp(170px, 16vw, 220px);
}

.page{
  min-height:100vh;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 14% 20%, rgba(233,74,87,.9), transparent 32%),
    radial-gradient(circle at 36% 34%, rgba(195,186,255,.55), transparent 20%),
    radial-gradient(circle at 43% 56%, rgba(126,170,255,.7), transparent 24%),
    radial-gradient(circle at 68% 78%, rgba(56,85,170,.45), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(0,0,0,.85), transparent 28%),
    linear-gradient(120deg, #16070b 0%, #1b1930 28%, #16274c 54%, #0a0d16 100%);
}

.page::before{
  content:"";
  position:absolute;
  inset:-12%;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.16), transparent 14%),
    radial-gradient(circle at 40% 50%, rgba(255,255,255,.10), transparent 18%),
    radial-gradient(circle at 58% 68%, rgba(255,255,255,.08), transparent 18%);
  filter:blur(56px);
  mix-blend-mode:screen;
  animation:glowShift 16s ease-in-out infinite alternate;
  z-index:0;
  pointer-events:none;
}

.page::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.02), transparent 34%, transparent 66%, rgba(255,255,255,.02)),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.18));
  z-index:0;
  pointer-events:none;
}

@keyframes glowShift{
  0%{transform:translate3d(-2%, -1%, 0) scale(1)}
  50%{transform:translate3d(2%, 2%, 0) scale(1.05)}
  100%{transform:translate3d(-1%, 1%, 0) scale(1.02)}
}

.bg-logo{
  position:absolute;
  top:34%;
  right:-8%;
  width:min(80vw, 1200px);
  opacity:.1;
  filter:brightness(0) saturate(100%) invert(48%) sepia(88%) saturate(2190%) hue-rotate(321deg) brightness(100%) contrast(92%);
  animation:bgFloat 34s ease-in-out infinite;
  z-index:1;
  pointer-events:none;
}

@keyframes bgFloat{
  0%{transform:translate(0,0) rotate(0deg) scale(1)}
  50%{transform:translate(-2%,2%) rotate(180deg) scale(1.06)}
  100%{transform:translate(0,0) rotate(360deg) scale(1)}
}


.main-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.08fr) minmax(320px, .72fr);
  gap:28px;
  padding:28px 0 80px;
  align-items:start;
}

.hero-copy{
  margin-bottom:30px;
}

.hero-copy h1{
  font-size:clamp(3.4rem, 7vw, 7rem);
  line-height:.9;
  margin:0 0 22px;
  font-weight:900;
  max-width:900px;
  color:#fff;
}

.kicker{
  font-size:1rem;
  font-weight:560;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin-bottom:18px;
  color:rgba(255,255,255,.86);
}

.hero-copy h1{
  font-size:clamp(3.4rem, 7vw, 7rem);
  line-height:.9;
  margin:0 0 22px;
  font-weight:900;
  max-width:900px;
}

.hero-copy p{
  max-width:760px;
  font-size:1.14rem;
  line-height:1.6;
   color:rgba(255,255,255,.88);
  margin:0;
}

.form-card,
.side-card{
  border:1px solid rgba(255,255,255,.35);
  background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.72));
  box-shadow:
    0 20px 60px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.6);
  backdrop-filter:blur(10px);
}

.form-card{
  border-radius:34px;
  padding:34px;
}

.side-stack{
  display:grid;
  gap:18px;
}

.side-card{
  border-radius:28px;
  padding:24px;
}

.card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:28px;
}

.card-head h2,
.side-card h3{
  margin:0;
  line-height:1;
}

.card-head h2,
.side-card h3{
  font-size:1.85rem;
}

.card-head p,
.side-card p{
  margin:0;
  color:#2b2f3a;
  line-height:1.55;
}

.card-head > div > p{
  margin-top:18px;
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.field,
.field-full{
  display:grid;
  gap:9px;
}

.field-full{grid-column:1 / -1}

label{
  font-size:.92rem;
  font-weight:670;
  letter-spacing:.01em;
  color:#3a3f4a;
}

.input,
.select,
.textarea{
  width:100%;
  border:1px solid rgba(0,0,0,.14);
  border-radius:18px;
  background:rgba(255,255,255,.96);
  color:#1f2430;
  padding:16px 18px;
  outline:none;
  transition:border-color .24s ease, box-shadow .24s ease, background .24s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}

.input::placeholder,
.textarea::placeholder{color:rgba(31,36,48,.38);}

.select{
  appearance:none;
  -webkit-appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(31,36,48,.55) 50%),
    linear-gradient(135deg, rgba(31,36,48,.55) 50%, transparent 50%);
  background-position:calc(100% - 22px) calc(50% - 3px), calc(100% - 15px) calc(50% - 3px);
  background-size:7px 7px, 7px 7px;
  background-repeat:no-repeat;
  padding-right:50px;
}

.select option{color:#0a0d16}

.input:focus,
.select:focus,
.textarea:focus{
  border-color:rgba(233,74,87,.9);
  box-shadow:0 0 0 4px rgba(233,74,87,.12);
  background:rgba(255,255,255,.88);
}

.textarea{
  min-height:140px;
  resize:vertical;
}

.divider{
  grid-column:1 / -1;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  margin:4px 0;
}

.subhead{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:10px;
}

.subhead strong{
  font-size:1.1rem;
  letter-spacing:.02em;
}

.switch-row,
.check-row{
  grid-column:1 / -1;
  display:flex;
  align-items:flex-start;
  gap:14px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;
  padding:16px 18px;
  border-color:rgba(0,0,0,.08);
  background:rgba(255,255,255,.42);
}

.switch{
  position:relative;
  width:54px;
  min-width:54px;
  height:32px;
  margin-top:1px;
}

.switch input{opacity:0;width:0;height:0;position:absolute}

.slider{
  position:absolute;
  inset:0;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  transition:.26s ease;
}

.slider::before{
  content:"";
  position:absolute;
  width:24px;
  height:24px;
  left:4px;
  top:4px;
  border-radius:50%;
  background:#fff;
  transition:.26s ease;
}

.switch input:checked + .slider{
  background:rgba(233,74,87,.95);
  box-shadow:0 10px 24px rgba(233,74,87,.28);
}

.switch input:checked + .slider::before{transform:translateX(22px)}

.check-row input[type="checkbox"]{
  margin:3px 0 0;
  accent-color:var(--red);
  width:18px;
  height:18px;
}

.muted,
.switch-copy small,
.check-row small,
.info-list small{
  color:rgba(54,60,74,.92);
}

.switch-copy strong,
.check-row strong{display:block;margin-bottom:4px}

.check-row-clickable {
  cursor: pointer;
}

.check-row-clickable input {
  cursor: pointer;
}

.invoice-fields{
  grid-column:1 / -1;
  display:none;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.invoice-fields.is-visible{display:grid}

.actions{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-top:4px;
}

.info-list,
.meta-list{
  display:grid;
  gap:14px;
}

.meta-list{
  gap:12px;
}

.info-item{
  display:grid;
  gap:4px;
}

.meta-item{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.info-item strong{
  font-size:.9rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:rgba(54,60,74,.55);
}

.meta-item strong{
  width:34px;
  min-width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#fff;
  color:#0a0d16;
  font-size:1rem;
  font-weight:800;
  letter-spacing:0;
  text-transform:none;
}

.info-item span,
.meta-item span{
  font-size:1.03rem;
  line-height:1.45;
  color:#232834;
}

.meta-item span{
  white-space:nowrap;
}

.meta-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.meta-item span {
  flex: 1;                /* ← nimmt verfügbaren Platz */
  min-width: 0;           /* ← WICHTIG für Flex-Wrap! */
  word-break: break-word; /* ← bricht lange Wörter */
}

.highlight{
  border-radius:24px;
  padding:22px;
  background:linear-gradient(135deg, rgba(233,74,87,.16), rgba(126,170,255,.12));
  border:1px solid rgba(255,255,255,.1);
}

.highlight strong{
  display:block;
  margin-bottom:8px;
  font-size:1.05rem;
}

.price{
  display:flex;
  align-items:flex-end;
  gap:10px;
  margin-top:18px;
}

.price-value{
  font-size:3rem;
  line-height:.9;
  font-weight:900;
}

.price-note{
  color:rgba(54,60,74,.62);
  padding-bottom:4px;
}

.participants{
  grid-column:1 / -1;
  display:grid;
  gap:14px;
}

.participant-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.price-box{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:22px;
  padding:18px;
  background:rgba(255,255,255,.42);
}

.price-col{
  display:grid;
  gap:6px;
}

.price-col strong{
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:rgba(54,60,74,.55);
}

.price-col span{
  font-size:1.2rem;
  font-weight:750;
  color:#1f2430;
}

.participant-card{
  border:1px solid rgba(0,0,0,.08);
  border-radius:22px;
  padding:18px;
  background:rgba(255,255,255,.42);
  display:grid;
  gap:14px;
}

.participant-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.participant-card-head strong{
  font-size:1rem;
  letter-spacing:.02em;
}

.participant-hint{
  font-size:.88rem;
  color:rgba(54,60,74,.72);
}

.mini-toggle{
  grid-column:1 / -1;
  display:flex;
  align-items:flex-start;
  gap:12px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  padding:14px 16px;
  background:rgba(255,255,255,.42);
}

.mini-toggle input[type="checkbox"]{
  margin:3px 0 0;
  accent-color:var(--red);
  width:18px;
  height:18px;
}

.summary-note{
  grid-column:1 / -1;
  font-size:.92rem;
  color:rgba(54,60,74,.98);
  line-height:1.5;
}

.is-hidden{
  display:none !important;
}

.participants-empty{
  grid-column:1 / -1;
  border:1px dashed rgba(0,0,0,.10);
  border-radius:22px;
  padding:18px;
  color:rgba(54,60,74,.98);
  background:rgba(255,255,255,.28);
  line-height:1.5;
}

.summary-note.is-accent{
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  padding:14px 16px;
  background:rgba(255,255,255,.42);
}

.btn[disabled]{
  opacity:.55;
  cursor:not-allowed;
  transform:none !important;
  box-shadow:none !important;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  padding:14px 26px;
}


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

  .bg-logo{
    top:20%;
    right:-18%;
    width:min(110vw, 1200px);
    opacity:.08;
  }
}

@media (max-width:1000px){
  nav,.social{display:none}
  .burger{display:flex}
  .logo-round{width:132px}
  .hero-copy h1{font-size:clamp(3rem, 12vw, 5.8rem)}
}

@media (max-width:760px){
  header{padding:24px 0}
  .form-card{padding:24px}
  .side-card{padding:20px}
  .form-grid,
  .invoice-fields{grid-template-columns:1fr}
  .actions,
  .subhead{flex-direction:column;align-items:flex-start}
  .actions{align-items:stretch}
  .btn{width:100%}
  .hero-copy p{font-size:1rem}
  .price-box{grid-template-columns:1fr}
  .participant-row{grid-template-columns:1fr}
  .participant-card-head{flex-direction:column;align-items:flex-start}
  .footer-inner{grid-template-columns:1fr;gap:24px;padding:28px 0 22px}
  .footer-links{justify-items:start}
}

@media (max-width:640px){
  .page{min-height:100vh;overflow-x:hidden}
  .container{width:min(100% - 24px, 1400px)}
  .logo-round{width:110px}
  .hero-copy{margin-bottom:22px}
  .hero-copy h1{font-size:clamp(2.5rem, 13vw, 3.15rem);line-height:.92;max-width:100%;word-break:break-word}
  .hero-copy p{max-width:100%;padding-right:0}
  .kicker{font-size:.88rem;letter-spacing:.14em}
  .main-grid{gap:18px;padding:18px 0 56px}
  .form-card{border-radius:28px;padding:20px}
  .side-card{border-radius:24px;padding:18px}
  .card-head{margin-bottom:24px}
  .card-head h2,
  .side-card h3{font-size:1.55rem}
  .switch-row,.check-row{padding:14px}
  .input,.select,.textarea{padding:15px 16px;border-radius:16px}
  .meta-item{align-items:flex-start}
  .meta-item span{white-space:normal;line-height:1.35}
  .price-value{font-size:2.5rem}
}