:root{
  --bg:#0b0b0f;
  --text:#f2f2f2;
  --muted:rgba(255,255,255,.66);

  --brand:#f2a100;
  --brand2:#ffb300;

  --radius:24px;
  --maxw: 820px;
}

*{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}


html, body{ height:100%; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: var(--bg);
  min-height:100svh;
  overflow-x:hidden;
  position:relative;
}

/* Background */
.bg{
  position:fixed;
  inset:0;
  z-index:0;
  background:
    linear-gradient(180deg, rgba(10,10,14,.78), rgba(10,10,14,.92)),
    url("../assets/Hintergrundbild.jpg");
  background-size: cover;
  background-position: center;
}

/* Artwork */
.swoosh{
  position:fixed;
  left:0; right:33%; bottom:0;
  height: 40vh;
  z-index:1;
  background: url("../assets/Gelbswoosh.svg") no-repeat bottom left;
  background-size: contain;
  pointer-events:none;
}

/* Layout */
.wrap{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding: 38px 22px 50px;
  position:relative;
  z-index:2;
}

/* Corner-Logo ausblenden (wird nicht gebraucht) */
.logoCorner{ display:none; }

/* Logo mittig über Card */
.brandHeader{
  width: min(var(--maxw), 96vw);
  display:flex;
  justify-content:center;
  margin: 0 auto 48px;
  position: relative;
  z-index: 3;
}

.brandLogo{
  height: 180px;
  width:auto;
  display:block;
  filter:
    drop-shadow(0 30px 55px rgba(0,0,0,.75))
    drop-shadow(0 0 44px rgba(242,161,0,.22));
  opacity:.99;
}

@media (max-width: 820px){
  .brandLogo{ height: 140px; }
  .brandHeader{ margin-bottom: 18px; }
}

@media (max-width: 600px){
  :root{ --radius: 14px; }
  .wrap{ padding: 28px 8px 32px; }
  .brandLogo{ height: 120px; }
  .brandHeader{ margin-bottom: 24px; }

  .content{ padding: 22px 18px 18px; }

  /* Header kompakter & Akzentlinie */
  .head{
    margin-bottom: 0;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(242,161,0,.22);
  }
  h1{ font-size: 19px; letter-spacing:.03em; margin-bottom:6px; }
  .kicker{ font-size:9px; padding: 12px 18px; letter-spacing:.2em; }
  .hint{ font-size: 13px; line-height:1.4; }

  /* Form schlanker */
  form{ gap:12px; margin-top:16px; }
  .fieldGroup, .checkline, .phoneWrap, .cta, .legal{ max-width: 100%; }

  .field{
    padding: 13px 14px;
    font-size: 15px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    box-shadow: none;
  }
  .field:focus{
    border-color: rgba(242,161,0,.55);
    box-shadow: 0 0 0 3px rgba(242,161,0,.10);
  }
  .field::placeholder{ color: rgba(255,255,255,.35); }

  textarea.field{ min-height: 110px; }

  /* Checkbox feiner */
  .checkline{ gap:8px; }
  .checkline .txt{ font-size:13px; }
  .checkline input[type="checkbox"]{ width:16px; height:16px; }

  /* Button eleganter */
  .cta{
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    letter-spacing:.06em;
    box-shadow:
      0 8px 28px rgba(242,161,0,.22),
      0 2px 6px rgba(0,0,0,.18);
  }

  .legal{ font-size:10px; }
  .footerText{ font-size:9px; margin-top:14px; letter-spacing:.1em; }
}

/* Card */
.card{
  width: min(var(--maxw), 96vw);
  border:1px solid rgba(255,255,255,.16);
  border-radius: var(--radius);
  background:
    radial-gradient(1100px 500px at 18% 0%, rgba(255,179,0,.14), transparent 55%),
    linear-gradient(180deg, rgba(22,22,32,.94), rgba(10,10,16,.90));
  box-shadow:
    0 34px 120px rgba(0,0,0,.64),
    0 10px 30px rgba(0,0,0,.35);
  overflow:hidden;
  position:relative;
  backdrop-filter: blur(10px);
}

.card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 28%),
    radial-gradient(900px 260px at 70% 10%, rgba(255,179,0,.12), transparent 60%);
  pointer-events:none;
  opacity:.55;
}

.card::after{
  content:"";
  position:absolute;
  top:-55%;
  left:-40%;
  width: 75%;
  height: 230%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.14), rgba(255,255,255,0));
  transform: rotate(18deg);
  opacity:.20;
  animation: sweep 6.2s ease-in-out infinite;
  pointer-events:none;
}
@keyframes sweep{
  0%, 52% { transform: translateX(-10%) rotate(18deg); opacity:0; }
  68%     { opacity:.20; }
  100%    { transform: translateX(190%) rotate(18deg); opacity:0; }
}

.kicker{
  position:relative;
  z-index:1;
  font-size:11px;
  font-weight:600;
  letter-spacing:.30em;
  text-transform:uppercase;
  color: rgba(255,255,255,.45);
  text-align:center;
  padding: 18px 42px;
  margin:0;
}

.content{
  position:relative;
  padding: 16px 42px 34px;
}

/* Header */
.head{ margin-bottom: 28px; text-align:center; }

h1{
  margin:0 0 24px;
  font-size: 30px;
  line-height:1.12;
  font-weight: 950;
  letter-spacing:.06em;
  text-transform:uppercase;
  color: var(--brand2);
  text-shadow: 0 14px 28px rgba(0,0,0,.55);
}

h1 br{ display:inline; }

.hint{
  margin:0;
  color: var(--muted);
  font-size: 16px;
  line-height:1.6;
}

/* Form */
form{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  margin-top: 24px;
}

.fieldGroup{
  width:100%;
  max-width: 480px;
}

.field{
  width:100%;
  border-radius: 16px;
  padding: 18px 18px;
  font-size: 16px;
  color: var(--text);
  outline:none;

  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.16);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 18px 44px rgba(0,0,0,.34);

  transition: border-color .14s ease, box-shadow .14s ease, transform .10s ease;
}

.field::placeholder{ color: rgba(255,255,255,.30); }

.field:focus{
  border-color: rgba(242,161,0,.75);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 5px rgba(242,161,0,.14),
    0 26px 60px rgba(0,0,0,.42);
}

textarea.field{
  min-height: 190px;
  resize: vertical;
  line-height:1.5;
  font: inherit;
}

/* Checkbox-Zeile */
.checkline{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  cursor:pointer;
  width:100%;
  max-width: 480px;
  margin: 6px 0;
}

.checkline input[type="checkbox"]{
  width:22px;
  height:22px;
  accent-color: var(--brand);
  cursor:pointer;
  flex-shrink:0;
}

.checkline .txt{
  font-size:16px;
  color: var(--muted);
  user-select:none;
}

/* Telefon-Feld: standardmäßig versteckt */
.phoneWrap{
  display:none;
  opacity:0;
  max-height:0;
  overflow:hidden;
  transition: opacity .3s ease, max-height .3s ease;
  width:100%;
  max-width: 480px;
}

.phoneWrap.show{
  display:block;
  opacity:1;
  max-height:120px;
}

/* Sende-Button */
.cta{
  width:100%;
  max-width: 480px;
  padding: 18px 24px;
  border:none;
  border-radius: 16px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing:.04em;
  text-transform:uppercase;
  cursor:pointer;
  color: #0b0b0f;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow:
    0 16px 48px rgba(242,161,0,.30),
    0 4px 12px rgba(0,0,0,.25);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.cta:hover{
  transform: translateY(-2px);
  box-shadow:
    0 20px 56px rgba(242,161,0,.38),
    0 6px 16px rgba(0,0,0,.30);
  filter: brightness(1.06);
}

.cta:active{
  transform: translateY(0);
}

/* Legal / Footer */
.legal{
  font-size:11px;
  color: rgba(255,255,255,.38);
  line-height:1.5;
  text-align:center;
  max-width: 480px;
}

.legal a{
  color: rgba(255,255,255,.50);
  text-decoration:none;
  border-bottom: 1px solid rgba(255,255,255,.18);
  transition: color .15s ease, border-color .15s ease;
}

.legal a:hover{
  color: var(--brand2);
  border-bottom-color: rgba(255,179,0,.4);
}

.footerText{
  margin-top: 24px;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: rgba(255,255,255,.30);
  text-align:center;
  line-height:1.8;
}

.footerText a{
  color: rgba(255,255,255,.45);
  text-decoration:none;
  letter-spacing:.06em;
  transition: color .15s ease;
}

.footerText a:hover{
  color: var(--brand2);
}



@media (max-width: 360px){
  h1{
    font-size: 17px;
    letter-spacing: .02em;
    margin: 0 0 12px;
    line-height: 1.15;
  }
  .head{ margin-bottom: 16px; }
}