/* Weblion · Startseite mit zwei gleichwertigen Standbeinen (12.11.2026): links Automatisierung (Löwe frisst den Posteingang),
   rechts Webdesign (Browser baut sich selbst). Bühnen und Browser kommen aus seite.css und webdesign.css, hier nur Rahmen und Maße. */
.start-held { position: relative; overflow: hidden; color: var(--held-text);
  background: radial-gradient(900px 600px at 15% 0%, #1F6B4A 0, transparent 60%), radial-gradient(900px 600px at 90% 100%, #4d4119 0, transparent 60%), var(--held); padding-block: 56px 72px; }
.start-held::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(247, 241, 227, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(247, 241, 227, .05) 1px, transparent 1px); background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 30%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 60% 60% at 50% 30%, #000 10%, transparent 75%); }
.start-held > .breite { position: relative; z-index: 1; }
.start-kopf { text-align: center; max-width: 900px; margin: 0 auto 40px; }
.start-kopf .kennung { color: var(--orange); }
.start-kopf h1 { font-size: clamp(40px, 6vw, 80px); line-height: 1.02; letter-spacing: -.03em; margin: 14px 0 18px; }
.start-kopf h1 .wort { display: inline-block; animation: wort .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 160ms + 150ms); }
.start-kopf h1 em { font-style: normal; background: linear-gradient(100deg, #F7D58A 0%, #E8B04B 30%, #FFF3D1 50%, #E8B04B 70%, #C98F28 100%); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: glanz 5s linear 1.4s infinite; }
.start-kopf .lead { font-size: clamp(18px, 1.8vw, 21px); color: var(--held-leise); margin: 0 auto; max-width: 40em; }

.standbeine { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.standbein { display: flex; flex-direction: column; border-radius: 28px; overflow: hidden; background: rgba(247, 241, 227, .05); border: 1px solid rgba(247, 241, 227, .14);
  box-shadow: 0 40px 80px -50px rgba(0, 0, 0, .8); transition: transform .4s cubic-bezier(.2, .8, .2, 1), border-color .3s; }
.standbein:hover { transform: translateY(-6px); border-color: rgba(232, 176, 75, .5); }
.standbein-bild { position: relative; height: 500px; }
.standbein .buehne { height: 100%; }
.standbein .buehne::before { inset: 14px 14px 0; border-radius: 20px; }
/* Platz für alles (Tilo 12.11.: nichts darf sich überdecken): Ergebnis-Karte oben, Löwe unten mittig, Stunden-Schild unten rechts neben dem Löwen */
.standbein .ergebnis-b { top: 54px; }
.standbein .loewe-platz { width: 190px; }
.standbein .gewinn { top: auto; bottom: 26px; right: 14px; left: auto; }
.standbein .wd-buehne { height: 100%; min-height: 0; perspective: 1300px; }
.standbein .wd-kippen { inset: 30px 26px 30px 30px; }
.standbein-text { padding: 26px 30px 32px; display: grid; gap: 10px; align-content: start; flex: 1; }
.standbein-text .kennung { color: var(--orange); }
.standbein-text h2 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; letter-spacing: -.02em; }
.standbein-text h2 a { color: inherit; text-decoration: none; }
.standbein-text h2 a:hover { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 5px; }
.standbein-text p { margin: 0 0 8px; color: var(--held-leise); font-size: 17px; }
.standbein .aktionen .knopf { display: inline-flex; align-items: center; gap: 8px; padding: 14px 20px; font-size: 16px; }
.standbein .aktionen .knopf svg { width: 18px; height: 18px; transition: transform .25s; }
.standbein .aktionen .knopf:hover svg { transform: translateX(4px); }
.start-held .knopf.rand { background: transparent; color: var(--held-text); border-color: rgba(247, 241, 227, .5); }

/* Website + Automatisierung als Kette */
.kombi-kette { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; position: relative; }
.kombi-kette li { position: relative; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 22px; padding: 24px; display: grid; gap: 8px; align-content: start; }
.kombi-kette li + li::before { content: "→"; position: absolute; left: -36px; top: 50%; translate: 0 -50%; font: 800 26px/1 var(--display); color: var(--orange-tief); }
.kombi-kette .ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--tuerkis-hell); color: var(--tuerkis); }
.kombi-kette li:nth-child(2) .ico { background: var(--orange-hell); color: var(--orange-tief); }
.kombi-kette li:nth-child(3) .ico { background: var(--tuerkis); color: #fff; }
.kombi-kette .ico svg { width: 24px; height: 24px; }
.kombi-kette h3 { font-size: 20px; }
.kombi-kette p { margin: 0; color: var(--leise); }

@media (max-width: 980px) {
  .standbeine { grid-template-columns: minmax(0, 1fr); }
  .standbein-bild { height: 480px; }
}
@media (max-width: 760px) {
  .kombi-kette { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .kombi-kette li + li::before { content: "↓"; left: 50%; top: -30px; translate: -50% 0; }
  .standbein-bild { height: 470px; }
  .standbein-text { padding: 22px 20px 26px; }
  /* Handy: Löwe kleiner, Sprechblase rechts vom Löwen, Stunden-Schild links zwischen Ergebnis-Karte und Löwe */
  .standbein .loewe-platz { width: 150px; }
  .standbein .sprechblase { left: 76%; right: auto; border-radius: 16px 16px 16px 4px; font-size: 14px; }
  .standbein .gewinn { top: 252px; bottom: auto; left: 10px; right: auto; padding: 10px 14px; }
  .standbein .gewinn b { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .start-kopf h1 .wort, .start-kopf h1 em { animation: none !important; } .standbein:hover { transform: none; } }