/* Landing-Seite: das Auge aus Leiterbahnen. Immer dunkel, Farben wie auf der Vorlage: Gold, Silber, Kupfer auf Schwarz.
   Alle Farben und Bewegungen des SVG (app/templates/_auge.svg, erzeugt von werkzeuge/auge.py) kommen von hier. */

.landing {
  --gold: #d4af6a; --gold-hi: #f3e0a8; --gold-lo: #8f6d2c; --silver: #c3c6cc; --copper: #c27d58; --chip: #0e0d0c;
  background: radial-gradient(ellipse 80% 60% at 50% 44%, #17130e 0%, var(--bg) 72%);
  position: relative; min-height: 100vh; min-height: 100svh; overflow-x: clip;
}
.landing::before { display: none; }

.buehne { max-width: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh; min-height: 100svh; overflow: clip; }

/* Das Auge: so groß wie die Höhe erlaubt, die unteren Leiterbahnen laufen hinter dem Text aus */
.auge-rahmen { width: min(1240px, 100%, calc((100vh - 170px) * 1.4906)); width: min(1240px, 100%, calc((100svh - 170px) * 1.4906)); flex: none; }
.auge { display: block; width: 100%; height: auto; overflow: visible; }

.auge path, .auge circle { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.auge .g { stroke: var(--gold); } .auge .s { stroke: var(--silver); } .auge .c { stroke: var(--copper); }
.auge .pad { fill: var(--bg); stroke-width: 2; }
.auge .punkt { stroke: none; }
.auge .g.punkt { fill: var(--gold); } .auge .s.punkt { fill: var(--silver); } .auge .c.punkt { fill: var(--copper); }
.auge .korper { fill: var(--chip); stroke: var(--gold-lo); stroke-width: 1.4; }
.auge .innen { fill: none; opacity: .55; }
.auge .bein { stroke-linecap: butt; }
.auge .lid { stroke-linecap: round; }
.auge .sphaere { stroke: none; }
.auge .sphaere-ring { stroke: var(--gold-hi); }
.auge .glanz { fill: #fff; stroke: none; opacity: .5; }
.auge .glanz.klein { opacity: .22; }
.auge .ticks { opacity: .6; }
.licht-a { stop-color: var(--gold); stop-opacity: .26; }
.licht-b { stop-color: var(--gold); stop-opacity: .07; }
.licht-c { stop-color: var(--gold); stop-opacity: 0; }
.auge .licht { fill: url(#a-licht); stroke: none; transition: opacity .6s ease; }

/* Lichtpunkte auf den Leiterbahnen */
.auge .puls { stroke: var(--gold-hi); stroke-width: 3.4; stroke-dasharray: 5 95; stroke-dashoffset: 5; opacity: .9;
  filter: drop-shadow(0 0 4px rgba(243, 224, 168, .9)); }

/* Auftritt: Lider zeichnen sich, Ringe ziehen auf, Leiterbahnen blenden von innen nach außen ein, danach läuft das Licht */
@keyframes zeichnen { to { stroke-dashoffset: 0; } }
@keyframes ein { from { opacity: 0; } to { opacity: 1; } }
@keyframes aufziehen { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes dreh { to { transform: rotate(360deg); } }
@keyframes lauf { from { stroke-dashoffset: 5; } to { stroke-dashoffset: -100; } }
@keyframes schweben { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(5px, -3px); } 60% { transform: translate(-6px, 2px); } }

.auge .lid { stroke-dasharray: 1; stroke-dashoffset: 1; animation: zeichnen 1.7s cubic-bezier(.5, 0, .2, 1) forwards; }
.auge .lid:nth-child(2n) { animation-delay: .12s; } .auge .lid:nth-child(3n) { animation-delay: .24s; }
.auge .lid:nth-child(5n) { animation-delay: .36s; }
.auge .ring { transform-box: fill-box; transform-origin: center; animation: aufziehen 1.3s cubic-bezier(.2, .7, .2, 1) both; }
.auge .r0 { animation-delay: .70s; } .auge .r1 { animation-delay: .75s; } .auge .r2 { animation-delay: .80s; }
.auge .r3 { animation-delay: .85s; } .auge .r4 { animation-delay: .90s; } .auge .r5 { animation-delay: .95s; }
.auge .r6 { animation-delay: 1.00s; } .auge .r7 { animation-delay: 1.05s; } .auge .r8 { animation-delay: 1.10s; }
.auge .r9 { animation-delay: 1.15s; } .auge .r10 { animation-delay: 1.20s; } .auge .r11 { animation-delay: 1.25s; }
.auge .r12 { animation-delay: 1.30s; } .auge .r13 { animation-delay: 1.35s; } .auge .r14 { animation-delay: 1.40s; }
.auge .r15 { animation-delay: 1.45s; } .auge .r16 { animation-delay: 1.50s; } .auge .r17 { animation-delay: 1.55s; }
.auge .r18 { animation-delay: 1.60s; } .auge .r19 { animation-delay: 1.65s; } .auge .r20 { animation-delay: 1.70s; }
.auge .marken, .auge .ticks, .auge .bogen { animation: ein 1.2s 1.6s both; }
.auge .platine { animation: ein 2.2s .5s both; }
.auge .bauteile { animation: ein 1.6s 1.6s both; }
.auge .blick { animation: ein 1s 1s both; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.auge .drift { animation: schweben 16s ease-in-out 2.4s infinite; }
.auge .dreht { transform-box: fill-box; transform-origin: center; animation: aufziehen 1.3s cubic-bezier(.2, .7, .2, 1) both, dreh 140s linear 2.7s infinite; }
.auge .dreht.rueck { animation-direction: normal, reverse; }
.auge .puls { animation: lauf 4.6s linear 2.4s infinite; }
.auge .puls.v1 { animation-duration: 5.8s; animation-delay: 3.1s; }
.auge .puls.v2 { animation-duration: 7.2s; animation-delay: 4.3s; }
.auge .puls.v3 { animation-duration: 6.4s; animation-delay: 2.9s; }

/* Text unter dem Auge */
.text { position: relative; z-index: 2; margin-top: clamp(-9rem, -12vh, -3rem); padding: 0 1.25rem 3.25rem; display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: .9rem; animation: auftauchen 1s cubic-bezier(.2, .7, .2, 1) 1.6s both; }
.text::before { content: ""; position: absolute; inset: -4.5rem -8vw 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 50% 58%, var(--bg) 42%, transparent 78%); }
.landing .eyebrow { margin: 0; justify-content: center; color: var(--gold); letter-spacing: .16em; }
.landing .punkt { background: var(--gold); }
.landing .punkt::after { border-color: var(--gold); }
.landing h1 { margin: 0; font-size: clamp(2.1rem, 5.4vw, 3.9rem); font-weight: 500; text-transform: uppercase; letter-spacing: .16em; line-height: 1.05;
  padding-left: .16em; color: var(--gold-hi);
  background: linear-gradient(180deg, #f8ebc4 0%, #d9b570 52%, #9a7633 100%); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; }
.sub { margin: 0; max-width: 60ch; color: var(--ink-2); font: 500 .8rem/1.6 var(--mono); letter-spacing: .06em; }

.cta { margin-top: .9rem; display: inline-flex; align-items: center; gap: .8rem; padding: .95rem 2rem; border-radius: 999px;
  border: 1px solid var(--gold); color: var(--gold-hi); font: 600 .84rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase;
  background: linear-gradient(180deg, rgba(212, 175, 106, .18), rgba(212, 175, 106, .05));
  box-shadow: 0 0 0 4px rgba(212, 175, 106, .07), 0 10px 38px -10px rgba(212, 175, 106, .55);
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease; }
.cta:hover, .cta:focus-visible { text-decoration: none; color: #17120a; background: var(--gold);
  box-shadow: 0 0 0 6px rgba(212, 175, 106, .16), 0 14px 46px -8px rgba(212, 175, 106, .8); transform: translateY(-2px); }
.cta .pfeil { display: inline-block; transition: transform .25s ease; }
.cta:hover .pfeil, .cta:focus-visible .pfeil { transform: translateX(5px); }
.cta:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 5px; border-radius: 999px; }
.landing:has(.cta:hover, .cta:focus-visible) .auge .blick { filter: drop-shadow(0 0 14px rgba(243, 224, 168, .75)); }

.schluss { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.5rem;
  padding: 0 1rem 1rem; font: .72rem/1.6 var(--mono); color: var(--ink-3); letter-spacing: .03em; }

@media (max-width: 720px) {
  /* Handy: das Auge größer als der Bildschirm, damit die Mandel die Breite füllt; überstehende Leiterbahnen sind blind abgeschnitten */
  .auge-rahmen { width: 185vw; margin-inline: -42.5vw; }
  .text { margin-top: -6rem; padding-bottom: 4.5rem; gap: .75rem; }
  .landing .eyebrow { font-size: .66rem; letter-spacing: .08em; }
  .landing h1 { letter-spacing: .12em; padding-left: .12em; }
  .cta { padding: .9rem 1.6rem; }
  .schluss { font-size: .64rem; }
  .schluss span:first-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .auge *, .text { animation: none !important; transition: none !important; }
  .auge .lid { stroke-dashoffset: 0; }
  .auge .puls { display: none; }
}