/* Yololabs – Onepager
   Alles linksbündig, keine Kästen, keine Buttons.
   Keine externen Ressourcen: keine Google Fonts, kein CDN, kein Tracking. */

:root {
  --ink:      #ffffff;
  --ink-soft: rgba(255, 255, 255, .82);
  --line:     rgba(255, 255, 255, .26);
  /* Verlauf: Gold oben rechts -> Rot -> Pink -> Violett unten links */
  --g-gold:   #f5b93f;
  --g-orange: #f58a26;
  --g-red:    #ee3a20;
  --g-crimson:#e8203a;
  --g-pink:   #d02866;
  --g-magenta:#a63a93;
  --g-violet: #6f47b8;
  /* Rueckfallfarbe. Sichtbar praktisch nur in den Browser-Leisten unter iOS -
     deshalb der gemittelte Orangeton von oben, nicht das Rot aus der Mitte.
     Muss mit <meta name="theme-color"> in index.html uebereinstimmen. */
  --fallback: #d38a2c;
  --wrap:     1240px;
  --font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica,
          Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--fallback);
  -webkit-font-smoothing: antialiased;
}

/* Verlauf hinter der gesamten Seite. Als fixiertes Pseudo-Element statt
   background-attachment: fixed (das ruckelt auf iOS).
   Der diagonale Verlauf traegt die Farbfolge, die beiden weichen Radialen
   darueber nehmen ihm die Streifigkeit. Der leichte dunkle Schleier haelt
   die weisse Schrift auch ueber dem hellen Gold lesbar. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(0, 0, 0, .14), rgba(0, 0, 0, .14)),
    radial-gradient(70% 55% at 88% 6%, rgba(245, 185, 63, .70) 0%, rgba(245, 185, 63, 0) 60%),
    radial-gradient(80% 60% at 6% 96%, rgba(111, 71, 184, .70) 0%, rgba(111, 71, 184, 0) 62%),
    linear-gradient(213deg,
      var(--g-gold)    0%,
      var(--g-orange) 15%,
      var(--g-red)    32%,
      var(--g-crimson)48%,
      var(--g-pink)   65%,
      var(--g-magenta)82%,
      var(--g-violet)100%);
}

.wrap {
  max-width: var(--wrap);
  margin: 0;
  padding: 0 clamp(20px, 5vw, 64px);
}

a { color: inherit; }

/* ---------- Hero ---------- */

.hero { padding: clamp(28px, 5vw, 56px) 0 0; }

.logo {
  width: clamp(220px, 40vw, 500px);
  height: auto;
  display: block;
  /* Das Logo ist schwarz; auf dem farbigen Grund wird es weiss gedreht.
     Falls spaeter ein mehrfarbiges Logo kommt: Zeile entfernen und
     stattdessen eine weisse Fassung der Datei einsetzen. */
  filter: invert(1);
}

/* ---------- Abschnitte ---------- */

.section {
  padding: clamp(56px, 9vw, 130px) 0;
  border-top: 1px solid var(--line);
}

#intro { border-top: 0; }

.section-title {
  margin: 0 0 clamp(28px, 4vw, 56px);
  font-size: clamp(13px, 1.2vw, 15px);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Grosse Aussage in Versalien – Screenshot 2 */
.statement {
  margin: 0 0 clamp(28px, 3.5vw, 48px);
  max-width: 20ch;
  font-size: clamp(28px, 5.2vw, 68px);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -.015em;
  text-transform: uppercase;
}

/* Fliesstext – Screenshot 3 */
.body {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(19px, 2.1vw, 30px);
  line-height: 1.34;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--ink);
}

/* ---------- Leistungen ---------- */

.entry {
  padding: clamp(24px, 3vw, 40px) 0;
  border-top: 1px solid var(--line);
}

.entry:first-of-type { border-top: 0; padding-top: 0; }

.entry h3 {
  margin: 0 0 clamp(12px, 1.6vw, 20px);
  font-size: clamp(24px, 3.4vw, 44px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -.015em;
  text-transform: uppercase;
}

.entry ul {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 52ch;
}

.entry li {
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.45;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.entry li:last-child { margin-bottom: 0; }

/* ---------- Referenzen ---------- */

.refs {
  list-style: none;
  margin: 0;
  padding: 0;
}

.refs li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 24px;
  padding: clamp(14px, 1.8vw, 22px) 0;
  border-top: 1px solid var(--line);
}

.refs li:first-child { border-top: 0; padding-top: 0; }

.refs a {
  font-size: clamp(20px, 2.6vw, 34px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -.015em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color .15s ease;
}

.refs a:hover { border-bottom-color: var(--ink); }

.refs span {
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--ink-soft);
}

@media (min-width: 760px) {
  .refs span { margin-left: auto; }
}

/* ---------- Kontakt ---------- */

address {
  font-style: normal;
  font-size: clamp(19px, 2.1vw, 30px);
  line-height: 1.4;
  letter-spacing: -.01em;
}

address a {
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

address a:hover { border-bottom-color: var(--ink); }

/* ---------- Fusszeile ---------- */

.footer {
  border-top: 1px solid var(--line);
  padding: clamp(24px, 3vw, 36px) 0;
  font-size: 14px;
  color: #ffffff;
}

.footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
}

.footer nav { display: flex; gap: 20px; }

.footer a {
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.footer a:hover { border-bottom-color: #ffffff; }

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