/* start.css – ausgelöst aus index.html.
   Gemeinsame Vierpass-Logik liegt in assets/js/vierpass.js. */

:root{
    --bg:#000;
    --fg:#EDECED;
    --accent:#5E17EB;
    --muted:rgba(237,236,237,.6);
    --display:"Antonio","Oswald","Arial Narrow",Impact,sans-serif;
    --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

    /* Breite des Halbkreises. Die Höhe ist per aspect-ratio immer die Hälfte
       davon. Größer heißt mehr Platz für den Text darin – das ist der einzige
       Wert, den man dafür anfassen muss.

       Der Deckel lag bei 880px, die Kuppel war damit 440px hoch. Der Text
       darin braucht auf großen Schirmen aber rund 456px, „Was kommt jetzt?"
       rutschte deshalb unter den Bogen. Auf Telefonen bestimmt der vw-Anteil
       die Breite, dort passte es schon vorher – darum ist nur der Deckel
       angehoben. */
    --dome-breite:min(1060px,152vw);
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{
    background:var(--bg);
    color:var(--fg);
    font-family:var(--body);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }

  .page{
    min-height:100svh;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }

  /* ---------- Halbkreis, der oben rausguckt ---------- */
  .dome{
    position:relative;
    flex:none;
    width:var(--dome-breite);
    aspect-ratio:2 / 1;                 /* Halbkreis: Breite = 2 x Höhe */
    display:flex;
    flex-direction:column;
    align-items:center;
    /* Oberer Abstand von 50px auf 38px: rückt den Text im Bogen nach oben
       und schafft unter der Subline zusätzlich Luft. Der Mobilwert von 20px
       bleibt durch den clamp-Anfang unverändert. */
    padding:clamp(20px,3.4vw,38px) clamp(20px,5vw,60px) 0;
    animation:domeDrop 1s cubic-bezier(.22,.86,.3,1) both;
    will-change:transform;
  }

  /* weicher Schein rund um den Bogen */
  .dome:before{
    content:"";
    position:absolute;
    inset:-2% -1% -5%;
    border-radius:0 0 50% 50% / 0 0 100% 100%;
    background:var(--accent);
    filter:blur(clamp(22px,3vw,58px));
    opacity:.28;
    z-index:0;
  }

  /* die eigentliche Fläche – Kante weich ausmaskiert */
  .dome:after{
    content:"";
    position:absolute;
    inset:0;
    background:var(--accent);
    border-radius:0 0 50% 50% / 0 0 100% 100%;
    -webkit-mask-image:radial-gradient(50% 100% at 50% 0%, #000 98.4%, rgba(0,0,0,0) 100%);
    mask-image:radial-gradient(50% 100% at 50% 0%, #000 98.4%, rgba(0,0,0,0) 100%);
    z-index:1;
  }

  .dome > *{position:relative;z-index:2;animation:domeText .7s ease .45s both}

  @keyframes domeDrop{
    from{transform:translateY(-100%)}
    to{transform:translateY(0)}
  }
  @keyframes domeText{
    from{opacity:0;transform:translateY(-14px)}
    to{opacity:1;transform:translateY(0)}
  }

  .vierpass{
    display:block;
    width:clamp(58px,7.4vw,96px);
    height:auto;
    margin:0 auto clamp(12px,1.8vw,20px);
    color:#fff;
  }
  .vierpass .vp-line{fill:none;stroke:currentColor;stroke-width:4.2;stroke-linejoin:round}
  .vierpass .vp-ring{fill:none;stroke:currentColor;stroke-width:3.2}
  /* Foto liegt transparent im Maßwerk – die Kontur bleibt führend */
  .vierpass .vp-photo{opacity:.5;filter:grayscale(1) contrast(1.25) brightness(1.15)}

  .eyebrow{
    font-family:var(--display);font-weight:700;
    text-transform:uppercase;letter-spacing:.16em;
    font-size:clamp(14px,1.7vw,22px);
    line-height:1.45;
    color:#fff;
    margin:0 0 clamp(12px,1.8vw,22px);
    text-indent:.16em;
  }
  .eyebrow span{
    display:block;
    font-weight:700;
    font-size:1.12em;
    letter-spacing:.34em;
    text-indent:.34em;
    color:rgba(255,255,255,.9);
  }

  h1{
    font-family:var(--display);font-weight:700;
    text-transform:uppercase;
    margin:0;
    line-height:.92;
    color:#fff;
    font-size:clamp(40px,6vw,90px);
  }
  h1 .line2{display:block}

  .subline{
    font-family:var(--display);font-weight:600;
    text-transform:uppercase;letter-spacing:.2em;
    font-size:clamp(13px,1.6vw,21px);
    color:rgba(255,255,255,.92);
    margin:clamp(12px,1.8vw,22px) 0 0;
    text-indent:.2em;
  }

  /* ---------- Alles unterhalb ---------- */
  .below{
    flex:1;
    width:100%;
    max-width:860px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:clamp(14px,2vh,22px);
    padding:clamp(24px,3.2vh,42px) clamp(20px,5vw,48px) clamp(32px,5vh,56px);
  }

  .intro{
    margin:0;
    max-width:54ch;
    font-size:clamp(15px,1.6vw,18px);
    line-height:1.7;
    color:rgba(237,236,237,.78);
  }

  .claim{
    margin:clamp(6px,1.4vh,16px) 0 0;
    font-family:var(--display);font-weight:700;
    text-transform:uppercase;letter-spacing:.03em;
    font-size:clamp(28px,3.8vw,52px);
    line-height:1.02;
    color:var(--fg);
  }
  .claim span{display:block}
  .claim span:nth-child(2),
  .claim span:nth-child(3){color:var(--accent)}

  .lead{
    margin:0;
    max-width:52ch;
    font-size:clamp(15px,1.6vw,18px);
    line-height:1.65;
    color:rgba(237,236,237,.75);
  }

  .btn{
    margin-top:clamp(6px,1.2vh,12px);
    display:inline-flex;align-items:center;gap:14px;
    background:var(--fg);color:#000;
    text-decoration:none;
    font-family:var(--display);font-weight:700;
    text-transform:uppercase;letter-spacing:.14em;
    font-size:clamp(17px,2.1vw,23px);
    padding:clamp(16px,2vw,21px) clamp(30px,4vw,52px);
    border-radius:999px;
    border:2px solid var(--fg);
    transition:background .18s ease,color .18s ease,transform .18s ease;
  }
  .btn:hover{background:transparent;color:var(--fg);transform:translateY(-2px)}
  .btn:focus-visible{outline:3px solid var(--accent);outline-offset:4px}

  .meta{margin:0;font-size:13px;color:var(--muted);letter-spacing:.03em}

  /* Hinweis auf die Infoseite zur Geschichte der Kommende.
     Bewusst zurückhaltend – die Umfrage bleibt die Hauptsache auf der Seite. */
  .mehr{
    margin:clamp(14px,2vh,20px) 0 0;
    max-width:44ch;
    font-size:14px;
    line-height:1.6;
    color:rgba(237,236,237,.62);
  }
  .mehr a{
    color:var(--fg);
    text-decoration:none;
    border-bottom:1px solid rgba(237,236,237,.42);
    padding-bottom:1px;
    transition:color .18s ease,border-color .18s ease;
  }
  .mehr a:hover{color:#fff;border-bottom-color:var(--fg)}
  .mehr a:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-bottom-color:transparent}

  .credits{
    margin:clamp(26px,4vh,42px) 0 0;
    font-family:var(--display);font-weight:600;
    text-transform:uppercase;letter-spacing:.18em;
    font-size:11px;color:var(--muted);line-height:2;text-indent:.18em;
  }
  .credits b{
    display:block;color:var(--fg);font-weight:700;
    letter-spacing:.22em;font-size:13px;margin-bottom:4px;
  }

  /* Pflichtlinks – zurückhaltend, aber auf jeder Seite erreichbar */
  .rechtlich{
    margin:clamp(16px,2.4vh,22px) 0 0;
    font-family:var(--display);font-weight:600;
    text-transform:uppercase;letter-spacing:.18em;
    font-size:11px;text-indent:.18em;
  }
  .rechtlich a{
    color:var(--muted);text-decoration:none;
    border-bottom:1px solid transparent;padding-bottom:2px;
    transition:color .18s ease,border-color .18s ease;
  }
  .rechtlich a:hover{color:var(--fg);border-bottom-color:var(--muted)}
  .rechtlich a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

  @media (max-width:700px){
    /* Der Inhalt der Kuppel ist auf Telefonen rund 247px hoch und schrumpft
       nicht weiter – alle Schriftgrößen stehen bereits am clamp-Minimum.
       Die Kuppelhöhe ist dagegen die halbe Breite. Ohne Mindestbreite wird
       die Kuppel unter etwa 373px flacher als ihr Inhalt, „Was kommt jetzt?"
       rutscht dann unter den Bogen und das Seitenverhältnis bricht.
       600px Mindestbreite ergibt 300px Höhe und damit rund 50px Luft. */
    .dome{width:clamp(600px,132vw,880px);padding-top:clamp(18px,5vw,34px)}
  }

  @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}