/* Startseite. Kopf auf Graphit (Fläche wie das Panel der Cockpit-Betriebsanmeldung), seit 15.09.2026 in
   der Fassung C aus dem Design-Canvas (Marc): rote Zeile, große Überschrift in Saira Condensed, die beiden
   Wortmarken als Zeile darunter, rechts das Cockpit-Bild perspektivisch gekippt. Zwei weiche Lichter halten
   das Graphit vom Schwarz weg: ein warmes hinter der Überschrift (Marc: „Glücklich auf Schwarz wirkt wie
   Trauer"), ein helleres hinter dem Bild, damit dessen dunkle Seitenleiste vom Grund abhebt. Die Wellen der
   alten Seite und das glow.png sind aus dem Kopf raus; der Fuß hat das Licht noch. */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--graphite);
  color: var(--ink-on-brand);
}
.hero-light { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(closest-side at 55% 40%, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0)) 0 0 / 100% 100% no-repeat,
    radial-gradient(farthest-side at 78% 45%, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 70%) 0 0 / 100% 100% no-repeat; }
.hero .container { position: relative; z-index: 1; padding-top: calc(var(--header-space) + 40px); padding-bottom: 64px; }
.hero-grid { display: grid; gap: 48px; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
.hero-kicker { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .18em; font-size: 15px; color: var(--brand-red); margin: 0 0 22px; }
.hero-title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--ink-on-brand); font-size: clamp(56px, 6.8vw, 98px); line-height: .92; margin: 0; }
.hero-sub { font-size: 20px; line-height: 1.5; color: var(--on-graphite-muted); margin: 26px 0 0; max-width: 36ch; }
.hero-btn { margin-top: 34px; }
/* Die Wortmarken als Zeile: weiß auf Graphit, darunter „Lokal" bzw. „Cloud · 2027" in der Marken-Schrift */
.hero-products { list-style: none; margin: 56px 0 0; padding: 28px 0 0; border-top: 1px solid rgba(255, 255, 255, .14); display: grid; gap: 24px 40px; align-self: stretch; }
@media (min-width: 600px) { .hero-products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hero-products a { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--ink-on-brand); }
.hero-products a:hover, .hero-products a:focus-visible { text-decoration: none; color: var(--ink-on-brand); }
.hero-products img { height: 42px; width: auto; align-self: flex-start; }
.hero-product-tag { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-graphite-muted); }
.hero-product-line { font-size: 15px; line-height: 1.5; color: var(--on-graphite-soft); max-width: 28ch; }
.hero-products a:hover .hero-product-line, .hero-products a:focus-visible .hero-product-line { text-decoration: underline; text-underline-offset: 3px; }
/* Die Aufnahmen als eigene Karten übereinander: jede mit feiner heller Kante und dunklem Schatten. Kein weißer
   Schein an den Karten: bei drei Karten übereinander addierte er sich zu einem Halo (Marc, 15.09.2026); das weiche
   Licht hinter dem Bild kommt allein aus .hero-light. Der Rahmen (.hero-shot) hat selbst keine Fläche, damit die
   ganze Karte fallen kann und nicht nur das Bild in einem stehenden Rahmen rutscht. */
/* Der Schatten liegt auf dem Landeplatz (.hero-shot), nicht auf den Karten: sonst liegen beim Wechsel zwei Schatten
   übereinander und der untere springt weg, wenn seine Karte verschwindet (Marc, 15.09.2026). */
.hero-shot { position: relative; aspect-ratio: 3 / 2; border-radius: 14px; box-shadow: 0 40px 90px rgba(0, 0, 0, .55), 0 16px 32px rgba(0, 0, 0, .4); }
/* Startpunkt des Falls: weit oberhalb des Fensters (Marc, 15.09.2026: so wie zuerst gebaut) */
.hero-shot img { --fall-from: -110vh; position: absolute; inset: 0; display: block; width: 100%; height: auto; border-radius: 14px; background: var(--surface-card); transform-origin: 50% 100%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
/* Die weiteren Karten (Lageplan, An-/Abreisen) warten ohne Animation unsichtbar oberhalb des Fensters */
.hero-shot-alt { transform: translateY(var(--fall-from)); }
/* Auf dem Handy rückt das Bild direkt unter die Überschrift: die Textspalte löst sich auf (display: contents),
   ihre Kinder werden Rasterzellen und das Bild sortiert sich zwischen Überschrift und Zeile ein. */
@media (max-width: 1023px) {
  .hero-grid { gap: 0; }
  .hero-copy { display: contents; }
  .hero-kicker { order: 1; }
  .hero-title { order: 2; }
  /* Auch auf dem Handy fallen die Karten von oberhalb des Fensters herein, über die Überschrift hinweg (Marc, 15.09.2026) */
  .hero-shot { order: 3; margin: 32px 0 0; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
  .hero-sub { order: 4; }
  .hero-btn { order: 5; justify-self: start; }
  .hero-products { order: 6; }
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px; align-items: start; }
  /* Das Bild füllt seine Spalte neben dem Text und dreht um seine rechte Kante: die linke, ferne Seite
     schrumpft, die rechte bleibt, wo sie ist, also wird nie etwas abgeschnitten. Ab 1344 px Fensterbreite
     (Inhalt plus Ränder) darf es zusätzlich nach rechts über die Spalte hinauswachsen, höchstens 240 px,
     damit auf breiten Monitoren kein Loch zwischen Text und Bild entsteht (Marc, 15.09.2026). */
  .hero-shot { --hero-shot-extra: clamp(0px, (100vw - 1344px) / 2, 240px); justify-self: end; width: calc(100% + var(--hero-shot-extra)); margin: 8px calc(-1 * var(--hero-shot-extra)) 0 0; transform: perspective(1400px) rotateY(-18deg) rotateX(5deg); transform-origin: right center; }
}

/* Einzug beim Laden: erst der Text, dann das Bild. Aus bei reduzierter Bewegung. */
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
/* Drei Karten wechseln sich ab: Belegungsplan, Lageplan, An-/Abreisen laufen dieselbe Runde, um je ein Drittel
   versetzt. Jede Karte wartet oberhalb des Fensters, fällt herein (der Kopf schneidet sie oben ab, so wirkt es, als
   käme sie durch den Browserrand), setzt auf, wippt um die untere Kante aus und bleibt liegen. Nach einem Drittel
   fällt die nächste Karte auf sie; sobald die gelandet ist, wird die verdeckte Karte unsichtbar (sonst scheinen
   ihre Kante und ihr Schatten als Saum um die obere Karte durch) und springt später wieder nach oben.
   Die Reihenfolge regelt z-index: die fallende Karte liegt oben, die vorige darunter, die älteste zuunterst.
   Takt 22,5 s, also alle 7,5 s ein Wechsel (Marc, 15.09.2026). */
@keyframes fall-cycle {
  0%           { transform: translateY(var(--fall-from)) rotate(0); z-index: 3; opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  4%           { transform: translateY(8px) rotate(0); z-index: 3; opacity: 1; animation-timing-function: ease-out; }
  4.7%         { transform: translateY(0) rotate(-2.2deg); z-index: 3; opacity: 1; animation-timing-function: ease-in-out; }
  6%           { transform: translateY(0) rotate(1.5deg); z-index: 3; opacity: 1; animation-timing-function: ease-in-out; }
  7.3%         { transform: translateY(0) rotate(-.9deg); z-index: 3; opacity: 1; animation-timing-function: ease-in-out; }
  8.7%         { transform: translateY(0) rotate(.45deg); z-index: 3; opacity: 1; animation-timing-function: ease-in-out; }
  10%, 33.2%   { transform: translateY(0) rotate(0); z-index: 3; opacity: 1; }
  33.3%, 43%   { transform: translateY(0) rotate(0); z-index: 2; opacity: 1; animation-timing-function: ease-in-out; }
  47%, 99.9%   { transform: translateY(0) rotate(0); z-index: 1; opacity: 0; animation-timing-function: step-end; }
  /* Der Sprung nach oben passiert unsichtbar (opacity bleibt 0 und step-end verhindert das Zwischenbild);
     sichtbar wird die Karte erst mit dem nächsten Durchlauf bei 0 %, und der beginnt ohne Übergang. */
  100%         { transform: translateY(var(--fall-from)) rotate(0); z-index: 1; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .hero-shot-alt { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .hero-kicker, .hero-title, .hero-sub, .hero-btn, .hero-products { animation: rise .7s var(--ease-out) .1s both; }
  .hero-shot > img:first-child { animation: fall-cycle 22.5s .3s infinite both; will-change: transform; }
  .hero-shot-2 { animation: fall-cycle 22.5s 7.8s infinite both; will-change: transform; }
  .hero-shot-3 { animation: fall-cycle 22.5s 15.3s infinite both; will-change: transform; }
}

/* Kurzvergleich */
/* Zwei Karten nebeneinander, oben die Wortmarken, darin vier Fragen mit Symbol; darunter der Pluspunkt und der Knopf. */
.compare-head { max-width: 62ch; }
.compare-head .section-lead { margin-bottom: 40px; }
.compare-cards { display: grid; gap: 20px; }
@media (min-width: 860px) { .compare-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.compare-card { position: relative; background: var(--surface-card); border: 1px solid var(--border-1); border-radius: var(--radius-card); box-shadow: var(--shadow-tile); padding: 32px 32px 28px; }
.compare-card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 24px; border-bottom: 1px solid var(--border-1); }
.compare-card-head img { height: 40px; width: auto; }
.compare-card-head .badge { position: static; white-space: nowrap; color: var(--brand-red); border-color: var(--brand-red-soft); background: var(--brand-red-soft); }
.compare-list { margin: 0; display: grid; }
.compare-list > div { display: grid; grid-template-columns: 28px 1fr; gap: 2px 16px; padding: 18px 0; border-bottom: 1px solid var(--border-1); }
.compare-list > div:last-child { border-bottom: 0; padding-bottom: 4px; }
.compare-list .product-icon { grid-row: 1 / span 2; width: 26px; height: 26px; margin-top: 2px; color: var(--ink-muted); fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.compare-list dt { font-size: 14px; color: var(--ink-muted); }
.compare-list dd { margin: 0; font-size: 18px; font-weight: 600; color: var(--ink-1); }
.compare-plus { margin-top: 40px; display: grid; gap: 20px; align-items: center; }
@media (min-width: 860px) { .compare-plus { grid-template-columns: minmax(0, 1fr) auto; gap: 40px; } }
.compare-plus p { margin: 0; font-size: 18px; color: var(--ink-2); max-width: 62ch; }
.compare-plus strong { color: var(--ink-1); }
/* Wellenkante: die Sektion endet ohne eigenen Abstand, die Welle in Seitenweiß frisst sich von unten in die graue Fläche */
.home-compare { padding-bottom: 0; }
.wave-edge { display: block; width: 100%; margin-top: 40px; line-height: 0; }
.wave-edge svg { display: block; width: 100%; height: 72px; fill: var(--surface-page); }
@media (min-width: 860px) { .wave-edge { margin-top: 56px; } .wave-edge svg { height: 96px; } }
/* Kundenlogos als Laufband: zwei gleiche Reihen hintereinander, das Band schiebt sich um genau eine Reihe nach
   links und springt dann unsichtbar zurück. Weiche Kanten links und rechts über eine Maske. Hält nicht an, auch
   nicht beim Überfahren (Marc, 15.09.2026). */
.customers-marquee { margin-top: 8px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.customers-track { display: flex; width: max-content; }
.customers-row { list-style: none; margin: 0; padding: 0 32px 0 0; display: flex; align-items: center; gap: 64px; padding-right: 64px; max-width: none; }
.customers-row li { display: flex; align-items: center; flex: none; }
/* multiply: der weiße Grund der JPEG-Logos verschwindet auf der Fläche */
.customers-row img { height: 64px; width: auto; max-width: 220px; object-fit: contain; mix-blend-mode: multiply; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: no-preference) {
  .customers-track { animation: marquee 70s linear infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .customers-marquee { -webkit-mask-image: none; mask-image: none; }
  .customers-track { width: auto; }
  .customers-row { flex-wrap: wrap; justify-content: center; gap: 24px 40px; padding: 0 var(--gutter); }
  .customers-row[aria-hidden] { display: none; }
}

/* Aktuelles */
.news-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.news-head .section-title { margin: 0; }
.news-grid { display: grid; gap: 24px; }
@media (min-width: 860px) { .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }