/* Startseite nach dem Entwurf vom 28. Oktober. Eigene Namen (n-…), damit
   nichts mit den Bausteinen aus stil.css zusammenstößt. */
.n-wrap{width:min(1120px,100% - 40px);margin:0 auto}
body.n-start .tor.filmtor{height:calc(100svh - var(--kopf));min-height:560px}
body.n-start .torfilm{width:max(100%,calc((100svh - var(--kopf)) * 1920 / 1046))}
.torlogo2{position:absolute;left:28px;top:26px;width:clamp(170px,15vw,250px);z-index:6;
  filter:drop-shadow(0 6px 24px rgba(0,0,0,.7));pointer-events:none;transition:opacity .6s}
.filmtor.spielt .torlogo2{opacity:.3}
/* Unten links wie live: Frage, Zeile, „Server online" neben dem Musikknopf. */
body.n-start .torworte{position:absolute;left:0;bottom:0;z-index:6;padding:0 24px 26px;max-width:min(560px,calc(50vw - 220px))}
body.n-start .torworte h1{font-family:'Syne',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  font-size:clamp(1.15rem,1.9vw,1.9rem);line-height:1.15;margin:0 0 .35em;text-shadow:0 4px 30px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.9)}
body.n-start .torworte p{font-size:clamp(.95rem,1.1vw,1.12rem);color:var(--sand);margin:0 0 14px;text-shadow:0 2px 16px rgba(0,0,0,.95)}
body.n-start .torworte p b{color:var(--gold2);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
body.n-start .torworte .lampe{font-family:'Manrope',sans-serif;letter-spacing:.14em}
.n-zeile{font-family:'Syne',sans-serif;font-weight:600;font-size:clamp(13px,1.15vw,16px);letter-spacing:4px;text-transform:uppercase;color:var(--mint);margin:0;
  text-shadow:0 2px 14px rgba(0,0,0,.9)}
.n-unter{margin:8px 0 0;font-size:clamp(15px,1.2vw,18px);color:var(--sand);max-width:560px;text-shadow:0 2px 14px rgba(0,0,0,.95)}
.n-status{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;letter-spacing:2px;text-transform:uppercase;color:var(--sand);
  border:1px solid var(--linie);border-radius:99px;padding:8px 16px;background:rgba(5,8,7,.62);white-space:nowrap;backdrop-filter:blur(4px)}
.n-status i{width:8px;height:8px;border-radius:50%;background:var(--gruen);box-shadow:0 0 10px var(--gruen);animation:pochen 2.6s ease-in-out infinite}

/* Telefon: unter dem Film Logo, Zeile, Knöpfe (wie im Entwurf) */
.n-handystart{display:none}
@media (max-width:900px){
  body.n-start .tor.filmtor{height:auto;min-height:0;padding-top:0}
  body.n-start .torfilm{width:100%;max-height:calc(100svh - var(--kopf));max-width:calc((100svh - var(--kopf)) * 760 / 1046)}
  .torlogo2,body.n-start .torworte{display:none}
  .n-handystart{display:block;position:relative;overflow:hidden;text-align:center;padding:30px 0 60px;border-top:0}
  .n-handystart::before{content:"";position:absolute;inset:-12px;background:url(lager.jpg) center/cover;opacity:.32;filter:blur(2.5px)}
  .n-handystart::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,rgba(5,8,7,.2) 0%,rgba(5,8,7,.86) 62%,var(--tinte) 100%)}
  .n-handystart .n-wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
  .n-handystart .n-logo{width:min(420px,92%);margin:0 0 12px;filter:drop-shadow(0 0 40px rgba(111,227,180,.18))}
  .n-handystart .n-zeile{font-size:13px;letter-spacing:3px}
  .n-handystart .n-reihe{display:flex;flex-direction:column;width:100%;gap:12px;margin-top:26px}
  .n-handystart .n-reihe .knopf{width:100%;text-align:center}
  .n-handystart .n-status{margin-top:22px}
}

/* Abschnitte */
.n-abschnitt{padding:96px 0}
.n-kopf{max-width:680px;margin-bottom:44px}
.n-kopf.n-mitte{text-align:center;margin-left:auto;margin-right:auto}
.n-ueber{font-size:13px;font-weight:600;letter-spacing:4px;text-transform:uppercase;color:var(--mint);margin:0 0 12px}
.n-kopf h2{margin:0}
.n-kopf p{margin:14px 0 0;color:var(--sand)}
.n-mitte .strichz::before{left:50%;margin-left:-28px}

/* Video */
.n-video{position:relative;display:block;border-radius:20px;overflow:hidden;border:1px solid var(--linie);aspect-ratio:16/9;max-width:960px;margin:0 auto;
  box-shadow:0 30px 80px rgba(0,0,0,.5);background:#000}
.n-video img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter .6s}
.n-video:hover img{transform:scale(1.04);filter:brightness(1.08)}
.n-video .n-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;background:rgba(5,8,7,.7);
  border:2px solid var(--mint);display:flex;align-items:center;justify-content:center;transition:transform .3s,box-shadow .3s}
.n-video:hover .n-play{transform:translate(-50%,-50%) scale(1.08);box-shadow:0 0 0 10px rgba(111,227,180,.12)}
.n-video .n-play::after{content:"";border-left:24px solid var(--mint);border-top:15px solid transparent;border-bottom:15px solid transparent;margin-left:6px}
.n-video .n-dauer{position:absolute;right:16px;bottom:14px;font-size:13px;background:rgba(5,8,7,.8);color:var(--hell);padding:4px 10px;border-radius:8px}
.n-video .n-extern{position:absolute;left:16px;bottom:14px;font-size:12.5px;background:rgba(5,8,7,.8);color:var(--sand);padding:4px 10px;border-radius:8px}

/* Karten */
.n-karten{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.n-karte{background:var(--stein2);border:1px solid var(--linie);border-radius:18px;padding:26px 24px;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s}
.n-karte:hover{transform:translateY(-4px);border-color:rgba(111,227,180,.35);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.n-karte .n-icon{width:44px;height:44px;border-radius:12px;background:rgba(111,227,180,.1);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.n-karte .n-icon svg{width:24px;height:24px;stroke:var(--mint);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.n-karte h3{font-size:21px;margin:0 0 6px}
.n-karte p{font-size:15.5px;color:var(--sand);line-height:1.55;margin:0}
.n-knopfzeile{margin-top:34px;text-align:center}

/* Welt */
.n-welt{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.n-schritte{display:flex;flex-direction:column;gap:26px}
.n-schritt{display:grid;grid-template-columns:52px 1fr;gap:16px}
.n-schritt b{font-family:'Syne',sans-serif;font-size:15px;color:var(--gold);border:1px solid rgba(214,163,92,.45);border-radius:50%;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center}
.n-schritt h3{font-size:20px;margin:0 0 4px}
.n-schritt p{color:var(--sand);font-size:16px;margin:0}
.n-bilder{display:grid;gap:14px}
.n-bild{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--linie);aspect-ratio:16/9}
.n-bild img{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover}
.n-bild span{position:absolute;left:12px;bottom:10px;font-size:12.5px;letter-spacing:1px;background:rgba(5,8,7,.78);padding:4px 10px;border-radius:8px;color:var(--hell);z-index:1}
.n-spruch{margin:56px auto 0;max-width:760px;text-align:center;font-family:'Syne',sans-serif;font-size:clamp(18px,2vw,23px);line-height:1.45;color:var(--hell)}
.n-spruch cite{display:block;margin-top:12px;font-family:'Manrope',sans-serif;font-style:normal;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--gold)}

/* Alpha-Hinweis */
.n-hinweis{display:flex;gap:18px;align-items:flex-start;border:1px solid rgba(214,163,92,.45);border-radius:18px;background:var(--stein2);padding:22px 26px;max-width:860px;margin:0 auto}
.n-hinweis b{font-family:'Syne',sans-serif;color:var(--gold2);white-space:nowrap;font-size:15px;letter-spacing:1px;text-transform:uppercase;padding-top:2px}
.n-hinweis p{margin:0;font-size:15.5px}

/* Gemeinschaft */
.n-zwei{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.n-gross{border-radius:20px;padding:34px;border:1px solid var(--linie);background:var(--stein2);display:flex;flex-direction:column;gap:10px;transition:transform .35s,border-color .35s}
.n-gross:hover{transform:translateY(-3px)}
.n-gross.mint{border-top:3px solid var(--mint)}
.n-gross.gold{border-top:3px solid var(--gold)}
.n-gross h3{font-size:26px;margin:0}
.n-gross p{color:var(--sand);margin:0}
.n-gross .n-knoepfe{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.n-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.n-links a{flex:1;min-width:150px;border:1px solid var(--linie);border-radius:14px;padding:16px 18px;color:var(--sand);font-size:15px;display:flex;justify-content:space-between;
  transition:border-color .3s,color .3s,background .3s}
.n-links a::after{content:"→";color:var(--mint);transition:transform .3s}
.n-links a:hover{color:var(--hell);border-color:rgba(111,227,180,.35);background:rgba(111,227,180,.04);text-decoration:none}
.n-links a:hover::after{transform:translateX(4px)}

/* Schluss */
.n-schluss{text-align:center;padding:120px 0;position:relative;overflow:hidden}
.n-schluss .n-grund{position:absolute;inset:-10% 0;background:url(schiff.jpg) center/cover;opacity:.16}
.n-schluss::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(11,44,36,.55),var(--tinte) 70%)}
.n-schluss .n-wrap{position:relative;z-index:1}
.n-schluss h2{margin:0}
.n-schluss p{color:var(--sand);margin:14px auto 0;max-width:520px}
.n-schluss .n-reihe{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}

@media (max-width:900px){
  .n-abschnitt{padding:64px 0}
  .n-kopf{margin-bottom:30px}
  .n-karten{grid-template-columns:1fr 1fr;gap:12px}
  .n-karte{padding:20px 18px}
  .n-karte h3{font-size:18px}
  .n-karte p{font-size:14.5px}
  .n-welt{grid-template-columns:1fr;gap:36px}
  .n-zwei{grid-template-columns:1fr}
  .n-gross{padding:26px}
  .n-video{border-radius:14px}
  .n-video .n-play{width:64px;height:64px}
  .n-schluss{padding:80px 0}
  .n-hinweis{flex-direction:column;gap:6px}
}
@media (max-width:420px){
  .n-karte{padding:16px 14px}
  .n-karte .n-icon{width:36px;height:36px;margin-bottom:12px}
  .n-karte h3{font-size:16px}
  .n-karte p{font-size:13.5px}
}
section.tor.filmtor{padding:0;border-top:0}
html.bewegt .n-mitte .strichz::before{left:50%;margin-left:-28px}
body.n-start .torworte p{font-family:'Manrope',sans-serif}
.torruf{font-family:'Syne',sans-serif!important;font-weight:800!important}
.n-handystart .n-frage{font-family:'Syne',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:clamp(1.35rem,6.2vw,1.9rem);line-height:1.15;margin:4px 0 0}
.n-handystart .n-unter b{color:var(--gold2);letter-spacing:.06em;text-transform:uppercase}

/* 30. Oktober, beim Einbau in tools/webseite.js gefunden (pw_test_webseite
   Abschnitt 1): Die Bilder der Welt kommen von rechts herein (data-z="rechts",
   44 Punkte). Solange sie noch nicht sichtbar sind, ragten sie über den
   Rand, und die Seite ließ sich auf Telefon und Tablett seitlich schieben
   (414 statt 390 Punkte). Der Abschnitt schneidet waagerecht ab; senkrecht
   bleibt alles, wie es war. */
.n-abschnitt{overflow-x:clip}