:root{
      --red:#ea4e40;
      --orange:#f9b233;
      --purple:#a14f99;
      --blue:#47c1f0;
      --darkblue:#1d71b8;
      --green:#95c11f;

      --text:#1b2340;
      --muted:rgba(27,35,64,.72);

      --card:#ffffff;
      --stroke:rgba(27,35,64,.10);

      --radius:22px;
      --shadow:0 16px 40px rgba(27,35,64,.12);
      --shadow-soft:0 10px 22px rgba(27,35,64,.10);
      --max:1120px;
    }

    @font-face{
      font-family: "Houschka Rounded";
      src: url("assets/font/adobe.ttf") format("truetype");
      font-weight: 600;
      font-style: normal;
      font-display: swap;
    }

    *{box-sizing:border-box}
    html,body{height:100%}

    /* Seamless background (no visible band while scrolling) */
    body{
      margin:0;
      font-family: "Houschka Rounded", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      font-weight: 600;
      color:var(--text);
      background: #fff;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      z-index:-2;
      background:
        radial-gradient(900px 520px at 12% 12%, rgba(71,193,240,.25), transparent 60%),
        radial-gradient(820px 520px at 90% 12%, rgba(249,178,51,.22), transparent 58%),
        radial-gradient(900px 600px at 55% 105%, rgba(149,193,31,.18), transparent 60%),
        linear-gradient(180deg, #f2fbff, #fff7f2 42%, #f7fff0);
    }

    a{color:inherit}
    .wrap{position:relative; min-height:100%}

    /* Floating icons background (offset + different directions) */
    .float-layer{
      position:fixed; inset:0;
      pointer-events:none;
      z-index:-1;
      opacity:.55;
      filter:saturate(1.08);
    }
    .float{
      position:absolute;
      width:140px; height:auto;
      transform: translate3d(0,0,0);
      will-change: transform;
    }
    .float.small{width:92px}
    .float.big{width:190px}

    /* Base drift (one direction) */
    @keyframes driftA{
      0%   {transform: translate(0,0) rotate(0deg) scale(1)}
      25%  {transform: translate(22px,-12px) rotate(3deg) scale(1.02)}
      50%  {transform: translate(-12px,18px) rotate(-3deg) scale(1.01)}
      75%  {transform: translate(16px,10px) rotate(2deg) scale(1.02)}
      100% {transform: translate(0,0) rotate(0deg) scale(1)}
    }
    /* Reverse-ish drift (other direction) */
    @keyframes driftB{
      0%   {transform: translate(0,0) rotate(0deg) scale(1)}
      25%  {transform: translate(-20px,10px) rotate(-3deg) scale(1.02)}
      50%  {transform: translate(12px,-18px) rotate(3deg) scale(1.01)}
      75%  {transform: translate(-14px,-10px) rotate(-2deg) scale(1.02)}
      100% {transform: translate(0,0) rotate(0deg) scale(1)}
    }

    .float.one{left:4%; top:14%}
    .float.two{left:78%; top:10%}
    .float.three{left:84%; top:56%}
    .float.four{left:10%; top:62%}
    .float.five{left:46%; top:78%}
    .float.six{left:44%; top:12%}

    /* Assign animations with offsets (rainbow vs sun not synced) */
    .float.rainbow{animation: driftA 22s ease-in-out infinite; animation-delay:-5s}
    .float.sun{animation: driftB 19s ease-in-out infinite; animation-delay:-12s}
    .float.house{animation: driftB 26s ease-in-out infinite; animation-delay:-3s}
    .float.cloud1{animation: driftA 24s ease-in-out infinite; animation-delay:-9s}
    .float.cloud2{animation: driftB 28s ease-in-out infinite; animation-delay:-15s}
    .float.cloud3{animation: driftA 30s ease-in-out infinite; animation-delay:-18s}

    header{
      position:sticky; top:0; z-index:20;
      backdrop-filter: blur(12px);
      background: rgba(255,255,255,.75);
      border-bottom: 1px solid rgba(27,35,64,.08);
    }
    .nav{
      max-width:var(--max);
      margin:0 auto;
      padding:14px 18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
    }
    .brand{
      display:flex; align-items:center; gap:12px;
      text-decoration:none;
    }
    .brand img{height:44px; width:auto; display:block}
    .brand span{
      font-family:"Titan One", cursive;
      font-weight: 400;
      font-stretch: normal;
      letter-spacing:.6px;
      font-size:18px;
      line-height:1;
      color: var(--darkblue);
      text-rendering: geometricPrecision;
    }

    .navlinks{
      display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;
      align-items:center;
    }
    .navlinks a{
      text-decoration:none;
      color:rgba(27,35,64,.72);
      font-weight:800;
      padding:9px 12px;
      border-radius:999px;
      border:1px solid transparent;
      transition:.18s ease;
      white-space:nowrap;
    }
    .navlinks a:hover{
      color:var(--text);
      border-color:rgba(27,35,64,.10);
      background: rgba(255,255,255,.70);
    }
    .ig{
      display:inline-flex; align-items:center; gap:8px;
      padding:9px 12px;
      border-radius:999px;
      border:1px solid rgba(234,78,64,.18);
      background: rgba(255,255,255,.80);
      font-weight:900;
      text-decoration:none;
    }

    main{position:relative; z-index:1}
    section{
      max-width:var(--max);
      margin:0 auto;
      padding:40px 18px;
    }

    .hero{
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap:26px;
      align-items:start;
      padding-top:40px;
    }
    .hero-card{
      min-height:100%;
      background:
        radial-gradient(420px 220px at 85% 10%, rgba(234,78,64,.14), transparent 70%),
        radial-gradient(420px 220px at 10% 85%, rgba(71,193,240,.14), transparent 70%),
        var(--card);
      border: 1px solid rgba(27,35,64,.10);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding:26px;
      overflow:hidden;
      position:relative;
      margin-bottom:0;
    }

    /* HERO Logo Watermark */
    .hero-logo-watermark{
      position:absolute;
      right:-26px;
      top:-18px;
      width:240px;
      height:auto;
      opacity:.12;
      transform: rotate(10deg);
      pointer-events:none;
      user-select:none;
      filter: saturate(1.05);
    }
    @media (max-width: 980px){
      .hero-logo-watermark{ width:200px; right:-18px; top:-12px; opacity:.10; }
    }
    @media (max-width: 560px){
      .hero-logo-watermark{ width:160px; right:-10px; top:-10px; opacity:.09; }
    }

    .badge{
      display:inline-flex; align-items:center; gap:10px;
      padding:10px 14px;
      border-radius:999px;
      border:1px solid rgba(27,35,64,.10);
      background: rgba(255,255,255,.75);
      color: rgba(27,35,64,.78);
      font-weight:900;
    }
    .dot{
      width:10px;height:10px;border-radius:99px;background:var(--green);
      box-shadow:0 0 0 4px rgba(149,193,31,.20);
    }

    h1,h2,h3{
      font-family:"Titan One", cursive;
      font-weight:400;
      font-stretch:normal;
      letter-spacing:.6px;
      text-rendering: geometricPrecision;
    }
    h1{
      font-size: clamp(34px, 4vw, 52px);
      line-height:1.06;
      margin:14px 0 12px;
    }
    .lead{
      margin:0 0 18px;
      color:var(--muted);
      font-size: 18px;
      line-height:1.55;
      max-width: 56ch;
      font-weight:700;
    }

    .cta-row{
      display:flex; flex-wrap:wrap;
      gap:12px; align-items:center;
      margin-top:18px;
    }
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      padding:12px 16px;
      border-radius: 16px;
      border:1px solid rgba(27,35,64,.10);
      background: rgba(255,255,255,.85);
      color:var(--text);
      font-weight:900;
      text-decoration:none;
      cursor:pointer;
      transition:.18s ease;
      box-shadow: var(--shadow-soft);
      position:relative;
      overflow:hidden;
    }
    .btn:hover{transform: translateY(-1px) rotate(-.2deg);}

    .btn.primary{
      background:#f9b233;
      border-color: rgba(249,178,51,.45);
      color:#111427;
    }
    /* linkes Panel (Bild) quadratisch */
#gruenderin .split .panel:first-child{
  aspect-ratio: 3 / 2;   /* statt 1 / 1 */
  height: auto;
  overflow: hidden;
  padding: 0;
}



#gruenderin .split .panel:first-child img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: none;       /* optional: sonst kann’s komisch wirken */
}

@media (max-width: 980px){
  #gruenderin .split .panel:first-child{
    aspect-ratio: 4 / 3;   /* oder unset, je nachdem was du willst */
  }
}



.btn.navigate {
  background: #47c1f0;
  color: white;
  border-color: rgba(71,193,240,.45);
}

.btn.navigate:hover {
  background: #1d71b8;
}


    /* FULL glossy overlay over the whole button */
    .btn.primary::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(135deg,
          rgba(255,255,255,.65) 0%,
          rgba(255,255,255,.35) 18%,
          rgba(255,255,255,0) 45%,
          rgba(255,255,255,0) 100%);
      transform: translateX(-35%);
      opacity:.9;
      pointer-events:none;
    }
    .btn.primary::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 58%),
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.35), rgba(255,255,255,0) 55%);
      pointer-events:none;
      mix-blend-mode: soft-light;
    }
    @keyframes shine{0%{transform:translateX(-35%)}100%{transform:translateX(35%)}}
    .btn.primary:hover{filter: brightness(1.02) saturate(1.05);}
    .btn.primary:hover::before{animation: shine .7s ease-out forwards}

    .pill{
      padding:10px 14px;
      border-radius: 999px;
      background: rgba(71,193,240,.18);
      border:1px solid rgba(71,193,240,.25);
      color: rgba(27,35,64,.88);
      font-weight:900;
    }

    .countdown{
      display:grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap:12px;
      margin-top:18px;
    }
    .cd{
      border-radius: 18px;
      border:1px solid rgba(27,35,64,.10);
      background: rgba(255,255,255,.78);
      padding:12px 10px;
      text-align:center;
      box-shadow: 0 10px 18px rgba(27,35,64,.08);
    }
    .cd .num{
      font-family:"Titan One", cursive;
      font-weight:400;
      font-size: 28px;
      line-height:1;
      margin-bottom:4px;
      color: var(--darkblue);
    }
    .cd .lbl{
      color:rgba(27,35,64,.65);
      font-weight:900;
      font-size:12px;
      letter-spacing:.6px;
      text-transform:uppercase
    }

    .hero-side{
height:auto;
grid-auto-rows: 1fr;
      display:grid;
      gap:14px;
    }
    .side-card{
      background:
        radial-gradient(380px 190px at 10% 10%, rgba(161,79,153,.10), transparent 70%),
        radial-gradient(380px 190px at 95% 90%, rgba(149,193,31,.10), transparent 70%),
        var(--card);
      border: 1px solid rgba(27,35,64,.10);
      border-radius: var(--radius);
      padding:18px;
      box-shadow: var(--shadow-soft);
    }
    .side-card h3{margin:0 0 10px; color: var(--purple)}
    .list{margin:0; padding:0; list-style:none; display:grid; gap:10px}
    .li{display:flex; gap:10px; align-items:flex-start; color: rgba(27,35,64,.76); font-weight:800; line-height:1.35}
    .tick{
      width:22px;height:22px;flex:0 0 22px;
      border-radius:8px;
      background: rgba(149,193,31,.22);
      border:1px solid rgba(149,193,31,.40);
      display:grid; place-items:center;
      margin-top:2px;
    }
    .tick svg{width:14px;height:14px}
    .kicker{color: rgba(27,35,64,.92); font-weight:900}

    .title-row{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:18px}
    h2{font-size: clamp(28px, 3.2vw, 40px); margin:0}
    .sub{margin:0; color:var(--muted); font-weight:800; max-width: 70ch; line-height:1.5}

    .grid{display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:14px; margin-top:18px}
    .card{
      background:
        radial-gradient(220px 120px at 90% 10%, rgba(249,178,51,.12), transparent 70%),
        var(--card);
      border: 1px solid rgba(27,35,64,.10);
      border-radius: var(--radius);
      padding:16px;
      box-shadow: var(--shadow-soft);
      transition:.18s ease;
      overflow:hidden;
      position:relative;
      min-height: 122px;
      cursor:pointer;
    }
    .card:hover{transform: translateY(-2px) rotate(-.25deg); box-shadow: 0 18px 38px rgba(27,35,64,.14)}
    .card .tag{
      display:inline-flex; align-items:center; gap:8px;
      padding:8px 10px;
      border-radius:999px;
      font-weight:900;
      letter-spacing:.4px;
      font-size:12px;
      text-transform:uppercase;
      border:1px solid rgba(27,35,64,.10);
      background: rgba(255,255,255,.85);
      color: rgba(27,35,64,.86);
    }
    .card h4{margin:10px 0 6px; font-size: 18px; letter-spacing:.2px}
    .card p{margin:0; color: rgba(27,35,64,.72); font-weight:800; line-height:1.45}
    .blob{position:absolute; right:-34px; top:-34px; width:110px; height:110px; border-radius:999px; opacity:.55; transform: rotate(12deg)}
    .b-red{background: radial-gradient(circle at 30% 30%, rgba(234,78,64,.75), rgba(234,78,64,0) 70%)}
    .b-blue{background: radial-gradient(circle at 30% 30%, rgba(71,193,240,.80), rgba(71,193,240,0) 70%)}
    .b-green{background: radial-gradient(circle at 30% 30%, rgba(149,193,31,.75), rgba(149,193,31,0) 70%)}
    .b-orange{background: radial-gradient(circle at 30% 30%, rgba(249,178,51,.80), rgba(249,178,51,0) 70%)}
    .b-purple{background: radial-gradient(circle at 30% 30%, rgba(161,79,153,.75), rgba(161,79,153,0) 70%)}

    .split{display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-top:18px}
    .panel{
      background:
        radial-gradient(260px 140px at 12% 10%, rgba(71,193,240,.10), transparent 70%),
        radial-gradient(260px 140px at 95% 90%, rgba(234,78,64,.08), transparent 70%),
        var(--card);
      border: 1px solid rgba(27,35,64,.10);
      border-radius: var(--radius);
      padding:18px;
      box-shadow: var(--shadow-soft);
      height:100%;
    }
    .panel h3{margin:0 0 10px; color: var(--darkblue)}
    .panel p{margin:0 0 10px; color: rgba(27,35,64,.72); font-weight:800; line-height:1.55}
    .chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px}
    .chip{
      padding:10px 12px;
      border-radius:999px;
      border:1px solid rgba(27,35,64,.10);
      background: rgba(255,255,255,.80);
      font-weight:900;
      color: rgba(27,35,64,.86);
    }

    form{display:flex; flex-direction:column; gap:10px; margin-top:10px}
    label{font-weight:900; color: rgba(27,35,64,.90)}
    input, button, textarea{font: inherit}
    input, textarea{
      width:100%;
      padding:12px 14px;
      border-radius:16px;
      border:1px solid rgba(27,35,64,.12);
      background: rgba(255,255,255,.94);
      color:var(--text);
      outline:none;
      font-weight:700;
    }
    input::placeholder{color: rgba(27,35,64,.45); font-weight:700}
    input:focus, textarea:focus{border-color: rgba(71,193,240,.45); box-shadow: 0 0 0 4px rgba(71,193,240,.18)}

    .fineprint{font-size:14px; color: rgba(27,35,64,.62); font-weight:800; line-height:1.45}

    .mapwrap{
      aspect-ratio: 16 / 9;
      width:100%;
      border-radius: 22px;
      overflow:hidden;
      border: 1px solid rgba(27,35,64,.10);
      background: rgba(255,255,255,.8);
      box-shadow: var(--shadow-soft);
    }
    .mapwrap iframe{width:100%; height:100%; border:0}
  
    footer{
      border-top: 1px solid rgba(27,35,64,.08);
      background: rgba(255,255,255,.70);
      padding:26px 18px;
      position:relative;
      z-index:2;
    }
    .foot{
      max-width:var(--max);
      margin:0 auto;
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      color: rgba(27,35,64,.72);
      font-weight:900;
    }
    .foot a{color: rgba(27,35,64,.88)}
    .mini{display:flex; align-items:center; gap:10px}
    .mini img{height:34px}

    @media (max-width: 980px){
      .hero{grid-template-columns: 1fr; padding-top:24px}
      .grid{grid-template-columns: repeat(2, minmax(0, 1fr))}
      .split{grid-template-columns: 1fr}
    }
    @media (max-width: 560px){
      .brand span{display:none}
      .countdown{grid-template-columns: repeat(2, minmax(0, 1fr))}
      .grid{grid-template-columns: 1fr}
      section{padding:56px 16px}
      .navlinks{gap:8px}
    }

    /* Modal */
    .modal-backdrop{
      position:fixed; inset:0;
      background:rgba(17,20,39,.35);
      display:none;
      align-items:center;
      justify-content:center;
      z-index:60;
      padding:18px;
    }
    .modal{
      background: rgba(255,255,255,.96);
      border-radius:24px;
      max-width:820px;
      width:min(820px, 96vw);
      padding:18px;
      box-shadow:0 30px 70px rgba(0,0,0,.25);
      border:1px solid rgba(27,35,64,.10);
    }
    .modal-top{
      display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
    }
    .modal h3{margin:0; color:var(--darkblue)}
    .modal p{margin:10px 0 0; color:rgba(27,35,64,.78); font-weight:800; line-height:1.5}
    .modal-close{
      border:none;
      background: rgba(255,255,255,.85);
      border:1px solid rgba(27,35,64,.10);
      border-radius:14px;
      padding:8px 10px;
      font-weight:900;
      cursor:pointer;
      box-shadow: var(--shadow-soft);
    }
    .modal-close:hover{filter:brightness(1.02)}
    .modal .imgs{
      display:flex;
      gap:10px;
      margin-top:12px;
      flex-wrap:wrap;
    }
    .modal .imgs img{
      width: min(170px, 30%);
      aspect-ratio: 4/3;
      object-fit: cover;
      border-radius:14px;
      border:1px solid rgba(27,35,64,.10);
      background: rgba(255,255,255,.85);
    }
    @media (max-width:560px){
      .modal .imgs img{width:48%}
    }
    

/* HERO: rechts natürlich hoch, links gleich hoch wie rechts */
.hero{ align-items: stretch !important; }

.hero-card{
  height: 100% !important;
  margin-bottom: 0 !important;
}

.hero-side{
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}


/* --- MOBILE HEADER FIX (keep nav compact) --- */
@media (max-width: 560px){

  /* less vertical padding */
  .nav{
    padding: 10px 12px;
    gap: 10px;
  }

  /* slightly smaller logo */
  .brand img{
    height: 34px;
  }

  /* IMPORTANT: stop wrapping + allow horizontal scroll */
  .navlinks{
    width: 100%;
    flex-wrap: nowrap;              /* override your flex-wrap:wrap */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;    /* looks nicer for scrolling */
    padding-bottom: 4px;
    gap: 8px;
  }

  .navlinks a{
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 8px 10px;
    font-size: 14px;
  }

  /* optional: hide scrollbar */
  .navlinks::-webkit-scrollbar{ display:none; }
  .navlinks{ scrollbar-width:none; }
}