/* PixelPuls — https://pixelpuls.de
   Ein Datei, kein Präprozessor. Reihenfolge: Variablen, Grundtypografie,
   Kopf, Seitenbereiche, dann die Medienabfragen am Dateiende.
   Namensschema dieser Site — Signal: Kopfleiste, Signet, Impuls.
   Neue Regeln vor die Medienabfragen setzen, sonst gelten sie nur mobil. */

:root {
    --basis: #090d18;
    --klartext: #f4f7ff;
    --neon: #5ee7ff;
    --puls: #8a6cff;
    --feld: #161d31;
    --auf-neon: #090d18;
    --maxbreite: 1240px;
    --rundung: 0;
    font-family: 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
    color: var(--klartext);
    background: var(--basis);
    font-size: 16px;
    line-height: 1.6;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* Berliner Neonschema: fast schwarzer Grund, Cyan als Signal,
   Violett als zweiter Akzent. Beide Akzente sind nur auf dunklem
   Grund geprüft — auf hellen Flächen fehlt der Kontrast. */
body {
    margin: 0;
    background: var(--basis);
    color: var(--klartext);
    overflow-x: hidden;
}

h1,h2,h3,p,dd,li,a {
    overflow-wrap: anywhere;
}

a {
    color: inherit;
    text-underline-offset: .22em;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--neon);
    outline-offset: 4px;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

.pp-sprungkanal {
    position: absolute;
    left: 1rem;
    top: -5rem;
    background: var(--neon);
    color: var(--auf-neon);
    padding: .8rem 1rem;
    z-index: 20;
}

.pp-sprungkanal:focus {
    top: 1rem;
}

/* Kopfleiste. Schmale Schrift, deshalb ist der Zeilenabstand hier
   großzügiger als im Text — nicht angleichen. */
.pp-kopfleiste {
    max-width: var(--maxbreite);
    margin: auto;
    min-height: 72px;
    padding: 1rem 1.4rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    border-bottom: 1px solid color-mix(in srgb,var(--klartext) 24%,transparent);
}

.pp-signet {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-weight: 900;
    font-size: 1.25rem;
    text-decoration: none;
    letter-spacing: -.02em;
}

.pp-signet span {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    background: var(--neon);
    color: var(--auf-neon);
    border-radius: 0;
}

.pp-kopfleiste nav {
    margin-left: auto;
}

.pp-kopfleiste ul {
    display: flex;
    gap: 1.3rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pp-kopfleiste nav a {
    text-decoration: none;
    font-weight: 700;
    font-size: .92rem;
}

.pp-schalter {
    display: none;
    background: var(--neon);
    color: var(--auf-neon);
    border: 0;
    padding: .75rem 1rem;
    font: inherit;
    font-weight: 800;
    border-radius: var(--rundung);
}

main {
    max-width: var(--maxbreite);
    margin: auto;
    padding: clamp(2rem,5vw,5rem) 1.4rem;
}

/* Startbereich. Zwei Spalten ab 800px, darunter gestapelt. */
.pp-impuls {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(2rem,5vw,5rem);
    min-height: 70vh;
}

.pp-impuls>div,.pp-impuls picture {
    flex: 1;
    min-width: 0;
}

.pp-impuls picture {
    overflow: hidden;
    border-radius: var(--rundung);
    box-shadow: 0 30px 80px #0006;
}

.pp-impuls img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
}

.pp-kanal {
    display: block;
    margin: 0 0 .35rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .78rem;
    font-weight: 900;
    color: var(--neon);
}

h1 {
    font-size: clamp(2.7rem,7vw,6.8rem);
    line-height: .94;
    letter-spacing: -.055em;
    margin: .3em 0;
}

h2 {
    font-size: clamp(1.45rem,3vw,2.35rem);
    line-height: 1.1;
    margin: .4em 0 .7em;
}

p {
    max-width: 72ch;
}

.pp-impuls p {
    font-size: 1.13rem;
}

.pp-taste {
    display: inline-block;
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    background: var(--neon);
    color: var(--auf-neon);
    font-weight: 900;
    text-decoration: none;
    border-radius: var(--rundung);
}

.pp-seitenblock {
    max-width: 900px;
    margin-bottom: 3rem;
}

.pp-seitenblock h1 {
    font-size: clamp(2.6rem,6vw,5.8rem);
}

.pp-pfad {
    max-width: var(--maxbreite);
    margin: 1rem auto 0;
    padding: 0 1.4rem;
    display: flex;
    gap: .6rem;
    font-size: .9rem;
}

.pp-spalten,
.pp-liste,
/* Datenraster. Feste Spaltenbreiten würden auf 390px reißen,
   deshalb minmax statt fester Werte. */
.pp-raster,
.pp-verfahren,
.pp-anschluss {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 1.2rem;
    margin: 3rem 0;
}

.pp-spalten article,
.pp-liste article,
.pp-raster article,
.pp-verfahren article,
.pp-anschluss article {
    min-width: 0;
    padding: clamp(1.3rem,3vw,2.4rem);
    background: var(--feld);
    border: 1px solid color-mix(in srgb,var(--klartext) 18%,transparent);
    border-radius: var(--rundung);
}

.pp-liste span,.pp-verfahren b {
    font-size: 2.2rem;
    color: var(--neon);
    font-weight: 900;
}

.pp-streifen,.pp-hinweis {
    margin: 4rem 0;
    padding: clamp(1.5rem,5vw,4rem);
    background: var(--neon);
    color: var(--auf-neon);
    border-radius: var(--rundung);
}

.pp-datenfeld {
    margin: 4rem 0;
    padding: 2rem;
    border: 1px solid var(--neon);
    border-radius: var(--rundung);
}

.pp-datenfeld dl {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 1rem;
}

.pp-datenfeld dl div {
    min-width: 0;
}

.pp-datenfeld dt {
    font-weight: 900;
    color: var(--neon);
}

.pp-datenfeld dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.pp-lauftext {
    max-width: 820px;
}

.pp-lauftext h2 {
    margin-top: 2.5rem;
}

.pp-schritte {
    counter-reset: step;
    list-style: none;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.pp-schritte li {
    padding: 1.5rem 1.5rem 1.5rem 5rem;
    position: relative;
    background: var(--feld);
    border-radius: var(--rundung);
}

.pp-schritte li::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    left: 1.4rem;
    top: 1.2rem;
    font-size: 2rem;
    font-weight: 900;
    color: var(--neon);
}

.pp-abfrage {
    max-width: 920px;
}

.pp-abfrage details {
    border-top: 1px solid color-mix(in srgb,var(--klartext) 30%,transparent);
    padding: 1.1rem 0;
}

.pp-abfrage summary {
    font-weight: 900;
    font-size: 1.15rem;
    cursor: pointer;
}

.pp-taktung {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 1px;
    background: var(--neon);
    border: 1px solid var(--neon);
}

.pp-taktung article {
    min-width: 0;
    background: var(--basis);
    padding: 1.6rem;
}

.pp-taktung time {
    font-weight: 900;
    color: var(--neon);
}

.pp-nachweise {
    display: grid;
    gap: 1.2rem;
}

.pp-nachweise article {
    padding: 1.5rem;
    background: var(--feld);
    border-radius: var(--rundung);
    overflow-wrap: anywhere;
}

.pp-nachweise dl {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: .45rem 1rem;
}

.pp-nachweise dt {
    font-weight: 900;
}

.pp-nachweise dd {
    margin: 0;
}

/* Fußleiste. Einzige Stelle mit gedrehter Akzentfarbe. */
.pp-fussleiste {
    max-width: var(--maxbreite);
    margin: 4rem auto 0;
    padding: 3rem 1.4rem;
    border-top: 1px solid color-mix(in srgb,var(--klartext) 24%,transparent);
}

.pp-fussleiste nav {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem 1.2rem;
    margin: 1rem 0;
}

.pp-fussleiste p {
    font-size: .9rem;
    opacity: .78;
}

@media (max-width: 800px) {
    .pp-kopfleiste {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .pp-kopfleiste nav {
        width: 100%;
        margin: 0;
    }

    .pp-kopfleiste ul {
        flex-wrap: wrap;
        gap: .65rem 1rem;
    }

    .js .pp-schalter {
        display: block;
        margin-left: auto;
    }

    .js .pp-kopfleiste nav[hidden] {
        display: none;
    }

    .pp-impuls {
        flex-direction: column;
        min-height: auto;
    }

    .pp-spalten,
    .pp-liste,
    .pp-raster,
    .pp-verfahren,
    .pp-anschluss,
    .pp-taktung {
        grid-template-columns: 1fr;
    }

    .pp-datenfeld dl {
        grid-template-columns: 1fr 1fr;
    }

    h1 {
        font-size: clamp(2.45rem,14vw,4.2rem);
    }
}

@media (max-width: 430px) {
    main,.pp-kopfleiste,.pp-pfad,.pp-fussleiste {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .pp-datenfeld dl {
        grid-template-columns: 1fr;
    }

    .pp-nachweise dl {
        grid-template-columns: 1fr;
    }

    .pp-impuls picture {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}