/* ============================================================
   v12 — reduzierte Fassung. Diese Datei liegt über den bestehenden
   Stilen. Wer eine Reduktion zurücknehmen will, löscht den Block.
   ============================================================ */

/* 1) Intro kürzer: weniger Scrollweg (vorher 800vh / 650vh) */
.sf { height: 640vh; }
@media (max-width: 760px), (orientation: portrait) { .sf { height: 640vh; } }

/* 2) Kein eigener Mauszeiger. Die Scroll-Linie oben ist wieder an (Wunsch 11.11.). */
body { cursor: auto !important; }
.cursor, .cursor-ring { display: none !important; }

/* 3) Hero ruhiger: keine Linien. Der Schein im Hero und in "Ueber mich" ist wieder an (Wunsch 11.11.). */
.hero-lines { display: none !important; }
.hero { min-height: 84svh; }
@media (max-width: 760px) { .hero { min-height: 66svh; } }

/* 3c) Slogan sitzt nicht mehr am unteren Rand, sondern leicht unter der Mitte (Wunsch 11.11.).
       Zuruecknehmen: diesen Block loeschen, dann steht er wieder unten. */
.hero { justify-content: center; padding-top: calc(var(--nav-h) + 12svh); }
@media (max-width: 760px) { .hero { padding-top: calc(var(--nav-h) + 6svh); } }

/* 3b) Name nicht doppelt: Im Film steht er schon. Im Hero bleibt er fuer Suchmaschinen und
       Screenreader erhalten, sichtbar ist dort der Claim als grosse Zeile.
       Ohne JavaScript (kein Film) erscheint der Name wie bisher. */
.js-sf .hero-name {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.js-sf .hero-tagline {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(2.5rem, 6.4vw, 6.6rem); line-height: 1.02; letter-spacing: -0.02em;
    color: var(--text-light); max-width: 15em; margin-top: 0.35em;
}
.js-sf .hero-tagline em { display: block; color: var(--accent); }

/* 4) Projekte: zuerst sechs, der Rest auf Knopfdruck */
.proj-grid:not(.all) .proj-card:nth-child(n+7) { display: none; }
.proj-more { max-width: var(--wrap); margin: clamp(36px, 5vw, 64px) auto 0; text-align: center; }
.proj-more-btn {
    font-family: var(--font-ui); font-size: 0.86rem; font-weight: 500; letter-spacing: 0.04em;
    color: inherit; background: none; cursor: pointer;
    padding: 14px 28px; border: 1px solid currentColor; border-radius: 999px;
    opacity: .78; transition: opacity .25s, color .25s, border-color .25s;
}
.proj-more-btn:hover, .proj-more-btn:focus-visible { opacity: 1; color: var(--accent); border-color: var(--accent); }
.proj-grid.all + .proj-more { display: none; }

/* 5) Referenzen: am Desktop und Tablet ruhiges Logo-Raster, am Handy (bis 700px) der Slider wie vorher */
@media (min-width: 701px) {
    .slider-viewport { overflow: visible; }
    .slider-track {
        width: 100% !important; transform: none !important; transition: none;
        flex-wrap: wrap; justify-content: center; row-gap: 24px;
    }
    .slider-slide { flex: 0 0 25% !important; min-height: 0; }
    .slider-slide, .slider-logo-box { min-width: 0; }
    .slider-logo-box { min-height: 132px; padding: 20px; }
    .slider-logo-box:hover { box-shadow: none; transform: none; }
    .slider-logo-img { max-height: 96px; max-width: 100%; }
    .slider-controls { display: none !important; }
}
@media (min-width: 701px) and (max-width: 1024px) { .slider-slide { flex: 0 0 33.333% !important; } }

/* 6) Leistungsband: liegt zwischen Film und Hero und schiebt sich als obere Kante ueber die letzte Filmszene (Wunsch 11.11.).
      Der Schatten nach oben sitzt deshalb am Band, nicht mehr am Hero. */
.js-sf .marquee { position: relative; z-index: 3; box-shadow: 0 -60px 120px rgba(0,0,0,0.55); }
.js-sf .marquee + .hero { box-shadow: none; }

/* 7) Green Mierendorff: Das Logo sitzt im Bild im oberen Drittel, damit es auf der Projektseite frei vom Titel bleibt.
      In der breiten Vorschaukarte wird der Bildausschnitt deshalb nach oben geschoben, dann steht das Logo mittig (Wunsch 12.11.). */
.proj-card.p5 .proj-bg { background-position: center 25%; }
/* Am Handy ist die Karte fast quadratisch. Dort wird das Bild etwas groesser gezogen, damit das Logo ueber dem Kartentext steht. */
@media (max-width: 760px) { .proj-card.p5 .proj-bg { background-size: auto 130%; background-position: center 92%; } }