/* Pitch-Seiten unter /demo/<gebiet>/. Ergänzt style.css, gleicher Stil: wenig Farbe, klare Kanten. */

:root {
    --pitch-ink: #1c2430;
    --pitch-line: #333;
    --pitch-muted: #5b6672;
    --pitch-accent: #1d5fd6;
}

.pitch-wrap {
    width: 1200px;
    max-width: calc(100% - 4rem);
    margin-left: auto;
    margin-right: auto;
}

/* Kopfzeile: bleibt oben stehen. Beim Scrollen wird sie flacher und ihre Linie
   wächst von der Inhaltsbreite auf die volle Fensterbreite (siehe demo.js). */
.pitch-header {
    position: sticky;
    top: 0;
    width: 100%;
    max-width: none;
    margin-bottom: 0;
    padding: 0;
    border-bottom: none;
    background: rgba(236, 239, 241, 0);
    transition: background-color .3s ease;
}

.pitch-header .site-header__wrapper {
    width: 1200px;
    max-width: calc(100% - 4rem);
    margin: 0 auto;
    padding: 2rem 0;
    transition: padding .35s cubic-bezier(.2, .7, .2, 1);
}

.pitch-header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: var(--pitch-line-inset, 2rem);
    right: var(--pitch-line-inset, 2rem);
    height: 1px;
    background: var(--pitch-line);
    transition: left .5s cubic-bezier(.2, .7, .2, 1), right .5s cubic-bezier(.2, .7, .2, 1);
}

.pitch-header.is-scrolled {
    background: rgba(236, 239, 241, .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.pitch-header.is-scrolled .site-header__wrapper {
    padding: .875rem 0;
}

.pitch-header.is-scrolled::after {
    left: 0;
    right: 0;
}

/* Der Kontakt-Knopf bleibt auch am Handy sichtbar */
.pitch-header .site-header__navigation {
    display: flex;
}

.pitch-header .site-header__logo {
    transition: font-size .35s cubic-bezier(.2, .7, .2, 1);
}

.pitch-header.is-scrolled .site-header__logo {
    font-size: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
    .pitch-header,
    .pitch-header::after,
    .pitch-header .site-header__wrapper,
    .pitch-header .site-header__logo {
        transition: none;
    }
}

/* Einstieg */
.pitch-hero {
    padding: 4rem 0 2.5rem;
}

.pitch-hero h1 {
    margin-top: 0;
    font-size: clamp(2.5rem, 6vw, 4.75rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    max-width: 18ch;
}

.pitch-hero h1 span {
    color: var(--pitch-muted);
}

.pitch-lead {
    font-size: clamp(1.125rem, 1.6vw, 1.375rem);
    max-width: 44rem;
    margin-top: 1.5rem;
}

.pitch-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--pitch-line);
    margin-top: 3rem;
}

.pitch-facts p {
    margin: 0;
    padding: 1.25rem 1rem 0 0;
    font-size: .9375rem;
    color: var(--pitch-muted);
}

.pitch-facts strong {
    display: block;
    font-size: clamp(1.75rem, 3.4vw, 2.75rem);
    font-weight: 500;
    line-height: 1.1;
    color: var(--pitch-ink);
    white-space: nowrap;
}

/* Karte */
.pitch-map {
    margin: 0 auto;
}

/* Die Karte füllt das Fenster unter der Kopfzeile genau aus, damit die Seite auf ihr
   einrasten kann (initImmersive in ui.js). Die Höhe der Kopfzeile misst demo.js. */
.pitch-map #map {
    width: 100%;
    height: calc(100vh - var(--pitch-header-height, 64px));
    height: calc(100svh - var(--pitch-header-height, 64px));
    min-height: 440px;
}

/* Abschnitte */
.pitch-section {
    padding: 6rem 0 0;
}

.pitch-section > h2,
.pitch-dark h2,
.pitch-cta h2 {
    font-size: clamp(1.875rem, 3.6vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    max-width: 22ch;
    margin: 0 0 1rem;
}

.pitch-intro {
    max-width: 44rem;
    font-size: 1.125rem;
    margin-bottom: 3rem;
}

.pitch-kicker {
    font-size: .875rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pitch-muted);
    margin-bottom: 1rem;
}

/* Drei Gründe, groß nummeriert */
.pitch-reasons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--pitch-line);
}

.pitch-reasons > div {
    padding: 2rem 2rem 0 0;
}

.pitch-reasons > div + div {
    padding-left: 2rem;
    border-left: 1px solid var(--pitch-line);
}

.pitch-number {
    display: block;
    font-size: .875rem;
    color: var(--pitch-muted);
    margin-bottom: 2.5rem;
}

.pitch-reasons h3,
.pitch-features h3,
.pitch-steps h3 {
    margin-top: 0;
    margin-bottom: .5rem;
    font-size: 1.375rem;
}

/* Funktionen */
.pitch-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--pitch-line);
    border: 1px solid var(--pitch-line);
}

.pitch-features > div {
    background: #ECEFF1;
    padding: 2rem;
}

.pitch-features i {
    display: block;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--pitch-ink);
}

/* Breite Kachel über zwei Spalten, füllt die letzte Reihe */
.pitch-features__wide {
    grid-column: span 2;
}

.pitch-textlink {
    font-weight: 500;
    text-underline-offset: .25em;
}

.pitch-features .pitch-textlink i {
    display: inline;
    margin: 0 0 0 .35rem;
    font-size: .8125rem;
}

.pitch-hintline {
    color: var(--pitch-muted);
    font-size: .875rem;
    margin-left: .5rem;
}

/* Ausbaustufen: gleiche Kacheln, aber zurückhaltender, weil noch nicht in der Demo */
.pitch-features--next {
    background: transparent;
    border: 1px dashed var(--pitch-line);
    gap: 0;
}

.pitch-features--next > div {
    background: transparent;
}

.pitch-features--next i {
    color: var(--pitch-muted);
}

/* Panoramakarte neben 3D-Karte */
.pitch-compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--pitch-line);
}

.pitch-compare > div {
    padding: 2.5rem;
}

.pitch-compare__new {
    background: var(--pitch-ink);
    color: #fff;
}

.pitch-compare h3 {
    margin-top: 0;
    font-size: 1.375rem;
}

.pitch-compare ul {
    list-style: none;
}

.pitch-compare li {
    padding: .75rem 0;
    border-top: 1px solid rgba(51, 51, 51, .25);
    line-height: 1.5;
}

.pitch-compare__new li {
    border-top-color: rgba(255, 255, 255, .2);
}

/* Dunkler Block: Geschäftsführung und Technik */
.pitch-dark {
    background: var(--pitch-ink);
    color: #fff;
    margin-top: 6rem;
    padding: 6rem 0;
}

.pitch-dark .pitch-kicker {
    color: #9aa5b1;
}

.pitch-audiences {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4rem;
    margin-top: 3rem;
}

.pitch-audiences h3 {
    margin-top: 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .35);
    font-size: 1.375rem;
}

.pitch-list {
    list-style: none;
}

.pitch-list li {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    gap: .75rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    line-height: 1.5;
}

.pitch-list i {
    margin-top: .3rem;
    color: #9aa5b1;
}

.pitch-list strong {
    display: block;
}

.pitch-list span {
    color: #c5ccd4;
}

/* Ablauf */
.pitch-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    counter-reset: step;
}

.pitch-steps > div {
    border: 1px solid var(--pitch-line);
    padding: 2rem;
    counter-increment: step;
}

.pitch-steps > div::before {
    content: counter(step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--pitch-ink);
    color: #fff;
    font-weight: 500;
    margin-bottom: 1.5rem;
}

/* Zweispaltige Abschnitte: links die Überschrift, rechts der Inhalt */
.pitch-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 4rem;
    border-top: 1px solid var(--pitch-line);
    padding-top: 3rem;
}

.pitch-split h2 {
    font-size: clamp(1.625rem, 2.8vw, 2.375rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 1rem;
}

.pitch-split > div:first-child p:not(.pitch-kicker) {
    color: var(--pitch-muted);
}

/* Vier Hinweise zur Demo als Raster */
.pitch-notes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--pitch-line);
    border: 1px solid var(--pitch-line);
}

.pitch-notes > div {
    background: #ECEFF1;
    padding: 1.75rem;
}

.pitch-notes h3 {
    margin: 0 0 .5rem;
    font-size: 1.125rem;
}

/* Über uns */
.pitch-about > p {
    font-size: 1.125rem;
    max-width: 40rem;
}

.pitch-about > p + p {
    margin-top: 1rem;
}

.pitch-minifacts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--pitch-line);
    margin-top: 2.5rem;
}

.pitch-minifacts p {
    margin: 0;
    padding: 1.25rem 1rem 0 0;
    font-size: .9375rem;
    color: var(--pitch-muted);
}

.pitch-minifacts strong {
    display: block;
    font-size: 1.375rem;
    font-weight: 500;
    color: var(--pitch-ink);
}

/* Abschluss: dunkler Block mit dem Aufruf zum Gespräch */
.pitch-cta h2 {
    font-size: clamp(2.25rem, 5vw, 4rem);
    max-width: 16ch;
}

.pitch-cta p {
    max-width: 40rem;
    font-size: 1.125rem;
    color: #c5ccd4;
}

.pitch-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.5rem;
}

.pitch-button {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    min-height: 3.5rem;
    padding: 0 1.75rem;
    border: 1px solid #fff;
    background: #fff;
    color: var(--pitch-ink);
    text-decoration: none;
    font-size: 1.125rem;
    transition: background-color .15s, color .15s;
}

.pitch-button:hover {
    background: transparent;
    color: #fff;
}

.pitch-button--ghost {
    background: transparent;
    color: #fff;
}

.pitch-button--ghost:hover {
    background: #fff;
    color: var(--pitch-ink);
}

.pitch-cta .pitch-contact {
    margin-top: 2rem;
    font-size: .9375rem;
    color: #9aa5b1;
}

/* Fußzeile direkt nach dem dunklen Block */
.pitch-footer .site-footer__wrapper {
    margin-top: 2rem;
    padding-top: 2rem;
}

.pitch-note {
    font-size: .8125rem;
    color: var(--pitch-muted);
    max-width: 52rem;
    padding-top: 2.5rem;
}

@media (max-width: 900px) {
    .pitch-reasons,
    .pitch-features,
    .pitch-steps {
        grid-template-columns: 1fr;
    }

    .pitch-features__wide {
        grid-column: auto;
    }

    .pitch-reasons > div,
    .pitch-reasons > div + div {
        padding: 1.5rem 0;
        border-left: none;
        border-bottom: 1px solid var(--pitch-line);
    }

    .pitch-number {
        margin-bottom: 1rem;
    }

    .pitch-audiences,
    .pitch-split {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .pitch-compare {
        grid-template-columns: 1fr;
    }

    .pitch-compare > div {
        padding: 1.75rem;
    }
}

@media (max-width: 600px) {
    .pitch-wrap {
        max-width: calc(100% - 2.5rem);
    }

    .pitch-header .site-header__wrapper {
        max-width: calc(100% - 2.5rem);
        padding: 1.25rem 0;
    }

    .pitch-header.is-scrolled .site-header__wrapper {
        padding: .625rem 0;
    }

    .pitch-header .site-header__logo {
        font-size: 1.625rem;
    }

    .pitch-header .btn a {
        font-size: .9375rem;
        padding: .5rem .875rem;
        white-space: nowrap;
    }

    .pitch-hero {
        padding: 2.5rem 0 2rem;
    }

    .pitch-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 2rem;
    }

    .pitch-section {
        padding-top: 4rem;
    }

    .pitch-dark {
        margin-top: 4rem;
        padding: 4rem 0;
    }

    .pitch-notes,
    .pitch-minifacts {
        grid-template-columns: 1fr;
    }

    .pitch-button {
        width: 100%;
        justify-content: center;
    }
}

/* Display-Modus (Adresse mit ?display): nur die Karte, bildschirmfüllend (map/display.js) */
body.display-mode {
    overflow: hidden;
}

body.display-mode > *:not(.pitch-map) {
    display: none;
}

body.display-mode .pitch-map #map {
    position: fixed;
    inset: 0;
    height: 100vh;
}