/* ==========================================================================
   Detailseiten: Objektseite (object.html) und Projektseite (project.html)
   ========================================================================== */

.detail-page {
    padding: 96px 0 3rem;
    min-height: 100vh;
    color: #e0e0e0;
}

.ngc-tag {
    font-size: 0.55em;
    color: #9aa3b2;
    margin-left: 0.5rem;
    font-weight: 400;
    white-space: nowrap;
}

/* ─── Zurück-Link (Objektseite) ─────────────────────────────────────────── */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
    color: #9ca3af;
    text-decoration: none;
    transition: color 0.2s;
}

.back-link:hover { color: #fff; }

/* ─── Chips (Meta-Infos) ─────────────────────────────────────────────────── */
.pp-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pp-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    font-size: 0.88rem;
    color: #d1d5db;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-decoration: none;
    white-space: nowrap;
}

.pp-chip i { color: var(--astro-blue-light); font-size: 0.85em; }

.pp-chip--link { transition: border-color 0.2s, background 0.2s; }
.pp-chip--link:hover {
    border-color: var(--astro-blue-light);
    background: rgba(45, 102, 182, 0.15);
    color: #fff;
}

.pp-chip--accent {
    border-color: rgba(188, 73, 165, 0.45);
    background: rgba(188, 73, 165, 0.1);
}
.pp-chip--accent i { color: var(--astro-magenta-light); }

/* ==========================================================================
   PROJEKTSEITE
   ========================================================================== */

/* Gemeinsame Optik: dunkles, leicht verschwommenes Glas – hält den Text
   über dem Sternenhimmel ruhig und gut lesbar */
.project-page {
    --pp-glass: rgba(13, 13, 19, 0.6);
    --pp-glass-border: rgba(255, 255, 255, 0.08);
    --pp-side: 320px;          /* Breite der rechten Spalte */
    --pp-gap: 1.75rem;         /* Abstand zwischen den Spalten */
    --pp-closed-w: 640px;      /* Breite zugeklappter Blog-Kapitel (nur ab 1001px Fensterbreite) */
}

.pp-container { max-width: 1320px; }

/* Zwei Spalten: links Bild/Text, rechts Seitenleiste + Randnotizen */
.pp-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--pp-side);
    column-gap: var(--pp-gap);
    align-items: start;
}

.pp-head  { grid-column: 1; grid-row: 1; }
.pp-media { grid-column: 1; grid-row: 2; }
.pp-lead  { grid-column: 1; grid-row: 3; }
.pp-facts { grid-column: 2; grid-row: 2 / span 2; }
.pp-story { grid-column: 1 / -1; grid-row: 4; }

.pp-layout--nofacts { grid-template-columns: minmax(0, 1fr); }
.pp-layout--nofacts .pp-story { grid-column: 1; }

/* Kopf: Titel + Objekt-Label in einer Zeile, kompakt, damit das Bild darunter Platz hat */
.pp-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem 0.9rem;
    margin-bottom: 1rem;
    text-align: center;
}

.pp-head h1 {
    font-size: 1.9rem;
    line-height: 1.2;
    color: #fff;
    margin: 0;
}

.pp-object {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #e5e7eb;
    text-decoration: none;
    white-space: nowrap;
    /* Verlaufsrahmen */
    border: 1px solid transparent;
    background:
        linear-gradient(rgba(13, 13, 19, 0.85), rgba(13, 13, 19, 0.85)) padding-box,
        var(--astro-gradient-hover) border-box;
    transition: color 0.2s, box-shadow 0.3s;
}

.pp-object i { font-size: 0.75em; color: var(--astro-magenta-light); }
.pp-object:hover { color: #fff; box-shadow: 0 0 14px rgba(139, 92, 246, 0.35); }

/* ─── Bild / Versionen ───────────────────────────────────────────────────── */
.pp-media { margin-bottom: 2.5rem; }

/* Bühne: transparent, Höhe per JS = höchstes Bild → Pfeile bleiben an derselben Stelle */
.pp-stage {
    position: relative;
    min-height: 160px;
    --pp-max-h: 78vh;
}

.pp-stage--multi { padding: 0 64px; }

.pp-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.pp-stage--multi .pp-slide { left: 64px; right: 64px; }

.pp-slide.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s ease;
}

/* Rahmen = exakt das Bild */
.pp-frame {
    position: relative;
    display: inline-block;
    max-width: 100%;
    line-height: 0;
    cursor: zoom-in;
}

.pp-frame picture { display: contents; }

.pp-frame img {
    display: block;
    max-width: 100%;
    max-height: var(--pp-max-h);
    width: auto;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}

/* Vollbild-Knopf oben rechts im Bild */
.pp-zoom {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 0.85rem;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(6px);
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.2s, background 0.2s;
}

.pp-zoom:hover { background: rgba(45, 102, 182, 0.85); }

.pp-counter {
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(6px);
    pointer-events: none;
    transition: opacity 0.2s;
}

/* Vollbild-Knopf und Zähler erst beim Drüberfahren; am Handy ausgeblendet
   (Antippen öffnet ohnehin die Vollbildansicht) */
.has-mouse .pp-zoom, .has-mouse .pp-counter { opacity: 0; }
.has-mouse .pp-frame:hover .pp-zoom { opacity: 1; }
.has-mouse .pp-frame:hover .pp-counter { opacity: 0.9; }

html:not(.has-mouse) .pp-zoom, html:not(.has-mouse) .pp-counter { display: none; }

/* Pfeile: fest am Rand der Bühne, vertikal mittig */
.pp-nav {
    position: absolute;
    top: 50%;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.05rem;
    --btn-dunkel: rgba(20, 20, 25, 0.55); /* Hover-Verlauf: styles.css "Pfeil-Buttons" */
    backdrop-filter: blur(6px);
    cursor: pointer;
    z-index: 2;
    transition: background-position 0.45s ease, border-color 0.2s, box-shadow 0.3s ease;
}

.pp-nav.prev { left: 0; }
.pp-nav.next { right: 0; }

.has-mouse .pp-nav:hover {
    border-color: transparent;
}

.pp-thumbs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 1rem;
}

.pp-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    width: 104px;
    padding: 0;
    border: none;
    background: none;
    color: #9ca3af;
    font-size: 0.75rem;
    cursor: pointer;
}

.pp-thumb picture { display: contents; }

.pp-thumb img {
    width: 104px;
    height: 66px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid transparent;
    opacity: 0.6;
    transition: opacity 0.2s, border-color 0.2s;
}

.pp-thumb span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pp-thumb:hover img { opacity: 0.9; }
.pp-thumb.active img { opacity: 1; border-color: var(--astro-blue-light); }
.pp-thumb.active span { color: #fff; }

/* ─── Einleitung ─────────────────────────────────────────────────────────── */
.pp-lead {
    position: relative;
    margin-bottom: 2rem;
    padding: 1.4rem 1.75rem;
    border-radius: 16px;
    background: var(--pp-glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--pp-glass-border);
    font-size: 1.1rem;
    line-height: 1.75;
    color: #f3f4f6;
    overflow: hidden;
}

/* feine Verlaufslinie oben */
.pp-lead::before {
    content: '';
    position: absolute;
    top: 0;
    left: 1.75rem;
    right: 1.75rem;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--astro-blue-light), var(--astro-magenta-light), transparent);
    opacity: 0.8;
}

.pp-lead p { margin: 0; }
.pp-lead p + p { margin-top: 0.8rem; }

/* ─── Seitenleiste: Equipment / Belichtung / Aufnahme ────────────────────── */
.pp-facts {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.pp-card {
    padding: 1.1rem 1.25rem 1.2rem;
    border-radius: 16px;
    background: var(--pp-glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--pp-glass-border);
}

.pp-card h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--astro-blue-light);
    padding-bottom: 0.55rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pp-card dl {
    display: grid;
    gap: 0.5rem;
    margin: 0;
}

.pp-fact {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.88rem;
    line-height: 1.4;
}

.pp-fact dt { color: #8b93a1; flex-shrink: 0; }
.pp-fact dd { margin: 0; color: #f3f4f6; text-align: right; }

.pp-fact--highlight dd {
    font-weight: 700;
    background: var(--astro-gradient-hover);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Übersichtskarte (js/location-map.js) – Bild + Beschriftung kommen fertig aus
   node build-maps.js (images/maps/*.webp + data/maps/*.json) */
.pp-map { margin-top: 0.9rem; }

.lm-svg {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    background: #0b0d14;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.lm-lake   { fill: rgba(24, 54, 104, 0.92); }
.lm-river  { fill: none; stroke: rgba(55, 105, 175, 0.5); stroke-width: 1.1px; stroke-linecap: round; stroke-linejoin: round; }
.lm-border { fill: none; stroke: rgba(255, 255, 255, 0.24); stroke-width: 1px; stroke-linejoin: round; }
.lm-arc    { fill: none; stroke: url(#lm-arc); stroke-width: 2px; stroke-dasharray: 6 7; stroke-linecap: round; opacity: 0.9; }

.lm-svg text {
    font-family: inherit;
    paint-order: stroke;
    stroke: rgba(6, 7, 12, 0.9);
    stroke-width: 5px;
    stroke-linejoin: round;
}

.lm-place       { font-size: 25px; font-weight: 700; fill: #fff; }
.lm-ref         { fill: #fff; stroke: rgba(6, 7, 12, 0.9); stroke-width: 2px; }
.lm-ref-label   { font-size: 21px; fill: #e5e7eb; }
.lm-water-label { font-size: 19px; font-style: italic; fill: #a9c6f0; }
.lm-city        { fill: rgba(255, 255, 255, 0.55); stroke: rgba(6, 7, 12, 0.85); stroke-width: 1.5px; }
.lm-city-label  { font-size: 17px; fill: #a3abb8; }

.lm-credit {
    margin-top: 0.35rem;
    font-size: 0.66rem;
    color: #6b7280;
}

/* ─── Blog ───────────────────────────────────────────────────────────────── */
.pp-story {
    margin-bottom: 2.5rem;
    font-size: 1.02rem;
    line-height: 1.75;
    color: #d1d5db;
}

.pp-story p { margin: 0 0 1rem; }
.pp-story p:last-child { margin-bottom: 0; }

.pp-story ul {
    margin: 0 0 1rem;
    padding-left: 1.2rem;
    list-style: none;
}

.pp-story li { position: relative; margin-bottom: 0.45rem; }

.pp-story li::before {
    content: '';
    position: absolute;
    left: -1.05rem;
    top: 0.72em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--astro-gradient-hover);
}

/* Kapitel: Raster mit denselben Spalten wie oben. Der Glas-Kasten (.pp-chapter-bg)
   liegt nur hinter der linken Spalte; rechts stehen die Randnotizen auf Höhe ihres Absatzes. */
.pp-chapter {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--pp-side);
    grid-template-rows: repeat(var(--rows), auto);
    column-gap: var(--pp-gap);
    align-items: start;
    margin-bottom: 1rem;
    scroll-margin-top: 90px;
}

.pp-layout--nofacts .pp-chapter { grid-template-columns: minmax(0, 1fr); }

/* Glas-Kasten: absolut über die ganze Höhe des Kapitels (auch während der
   Auf-/Zuklapp-Animation), waagrecht über die Spalte(n) aus grid-column */
.pp-chapter-bg {
    position: absolute;
    grid-column: 1 / 2;          /* bei absoluter Position muss das Ende explizit sein */
    grid-row: auto;
    inset: 0;
    border-radius: 16px;
    background: var(--pp-glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--pp-glass-border);
    transition: border-color 0.6s ease;
}

/* ==========================================================================
   Kapitel-Effekte
   zu:                 Kasten ruhig, keine Linie
   zu + Hover:         Rahmen leuchtet im Verlauf (blau → magenta) mit leichtem
                       Glanz und "atmet" langsam; oben eine kurze Linie, deren
                       Farben sanft hin und her fließen
   Klick (aufklappen): zwei Lichtpunkte laufen von der Mitte nach außen und
                       ziehen dabei die Linie auf volle Breite
   offen:              ruhige Linie über die ganze Oberkante
   offen + Hover Kopf: derselbe atmende Rahmen um den ganzen Kasten (→ zuklappbar)
   Steuerung über --line-scale / --line-op / --line-glow auf .pp-chapter
   ========================================================================== */

/* Farbverschiebung der Linie (registriert, damit sie weich animiert) */
@property --pp-shift {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

.pp-chapter {
    --line-scale: 0;
    --line-op: 0;
    --line-glow: 0;
}

.has-mouse .pp-chapter:not(.is-open):hover,
.pp-chapter:not(.is-open):has(.pp-chapter-head:focus-visible) {
    --line-scale: 0.34;
    --line-op: 0.5;
    --line-glow: 0.3;
}

.pp-chapter.is-open {
    --line-scale: 1;
    --line-op: 0.8;
    --line-glow: 0.22;
}

/* ─── Linie oben ────────────────────────────────────────────────────────── */
.pp-chapter-bg::before {
    content: '';
    position: absolute;
    left: 1.75rem;
    right: 1.75rem;
    transform: scaleX(var(--line-scale));
    transform-origin: 50% 50%;
    pointer-events: none;
    transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pp-chapter-bg::before {
    top: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--astro-blue-light) calc(33% + var(--pp-shift)),
        var(--astro-magenta-light) calc(67% + var(--pp-shift)),
        transparent 100%);
    opacity: var(--line-op);
    box-shadow: 0 0 14px 1px rgba(124, 108, 230, var(--line-glow));
    transition:
        transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
        opacity 0.6s ease,
        box-shadow 0.8s ease;
    /* läuft nur beim Hover, bleibt sonst stehen, wo es gerade ist → kein Springen */
    animation: pp-flow 4.5s ease-in-out infinite alternate paused;
}

.has-mouse .pp-chapter:not(.is-open):hover .pp-chapter-bg::before {
    animation-play-state: running;
}

@keyframes pp-flow {
    from { --pp-shift: -15%; }
    to   { --pp-shift: 15%; }
}

/* offen: Farben stehen still (gleiches Bild wie die gezeichnete Linie beim Aufklappen) */
.pp-chapter.is-open .pp-chapter-bg::before { animation: none; }

/* ─── Aufklappen: Licht zieht das Band auf ─────────────────────────────────
   Ein Lichtpunkt flammt in der Mitte des zugeklappten Kastens auf, teilt sich,
   beide Hälften wandern nach außen (rechts schneller, weil der Kasten nach rechts
   aufgeht) und ziehen dazwischen das Farbband auf (.pp-trace). Danach erlöschen
   sie und die normale Linie übernimmt. Positionen/Zeiten kommen aus runBurst() im JS. */
.pp-chapter.pp-burst .pp-chapter-bg::before { opacity: 0; transition: none; }
.pp-chapter.pp-line-snap .pp-chapter-bg::before { transition: none !important; }

.pp-trace,
.pp-spark {
    position: absolute;
    left: 0;
    pointer-events: none;
    opacity: 0;
}

.pp-trace {
    top: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--astro-blue-light) 33%, var(--astro-magenta-light) 67%, transparent 100%);
    box-shadow: 0 0 14px 1px rgba(124, 108, 230, 0.3);
}

.pp-spark {
    top: -6px;
    width: 64px;
    height: 14px;
    margin-left: -32px;          /* Mitte des Lichts = Position */
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(214, 206, 255, 0.45) 40%, transparent);
}

/* ─── Atmender Leuchtrahmen (Hover: zu = "aufklappen", offen auf Kopfzeile = "zuklappen") ───
   .pp-fx liegt genau auf dem Rahmen des Glas-Kastens:
     .pp-fx         → farbiger Schein nach außen (box-shadow, blau links / magenta rechts)
     .pp-fx-ring    → 1px Verlaufsrahmen mit hellem Glanzpunkt (SVG-Linie genau auf der
                      Rahmenmitte → saubere, gleich dicke Ecken auch bei 100 % Skalierung)
     .pp-fx::after  → weicher Glanz (Glare) auf dem Glas oben links
   Atmen = langsames Pulsieren; läuft nur beim Hover, bleibt sonst stehen (kein Springen). */
.pp-fx {
    position: absolute;
    inset: -1px;                 /* = Außenkante des Rahmens */
    border-radius: 16px;         /* gleich wie .pp-chapter-bg */
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.7s ease;
    animation: pp-breathe-glow 2.3s ease-in-out infinite alternate paused;   /* 2 × 2,3 s ≈ ein ruhiger Atemzug */
}

.pp-fx-ring,
.pp-fx::after {
    position: absolute;
    inset: 0;
    animation: pp-breathe 2.3s ease-in-out infinite alternate paused;
}

.pp-fx-ring {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Linie auf der Mitte des 1px-Rahmens: 0,5px nach innen, Radius 16 − 0,5 */
.pp-fx-ring rect {
    fill: none;
    stroke-width: 1px;
    x: 0.5px;
    y: 0.5px;
    width: calc(100% - 1px);
    height: calc(100% - 1px);
    rx: 15.5px;
}

.pp-fx::after {
    content: '';
    border-radius: inherit;
    background:
        radial-gradient(ellipse 340px 90px at 14% 0%, rgba(214, 228, 255, 0.06), transparent 70%),
        radial-gradient(ellipse 280px 80px at 88% 100%, rgba(240, 190, 230, 0.03), transparent 70%);
}

@keyframes pp-breathe {
    from { opacity: 0.3; }
    to   { opacity: 0.75; }
}

@keyframes pp-breathe-glow {
    from {
        box-shadow:
            -6px 0 18px -10px rgba(74, 138, 212, 0.15),
             6px 0 18px -10px rgba(214, 108, 196, 0.15),
             0 0 10px 0 rgba(124, 108, 230, 0.04);
    }
    to {
        box-shadow:
            -8px 0 26px -8px rgba(74, 138, 212, 0.32),
             8px 0 26px -8px rgba(214, 108, 196, 0.32),
             0 0 20px 0 rgba(124, 108, 230, 0.1);
    }
}

.has-mouse .pp-chapter:not(.is-open):hover .pp-fx,
.has-mouse .pp-chapter.is-open:has(.pp-chapter-head:hover) .pp-fx,
.pp-chapter:has(.pp-chapter-head:focus-visible) .pp-fx {
    opacity: 1;
}

.has-mouse .pp-chapter:not(.is-open):hover .pp-fx,
.has-mouse .pp-chapter:not(.is-open):hover .pp-fx-ring,
.has-mouse .pp-chapter:not(.is-open):hover .pp-fx::after,
.has-mouse .pp-chapter.is-open:has(.pp-chapter-head:hover) .pp-fx,
.has-mouse .pp-chapter.is-open:has(.pp-chapter-head:hover) .pp-fx-ring,
.has-mouse .pp-chapter.is-open:has(.pp-chapter-head:hover) .pp-fx::after {
    animation-play-state: running;
}

/* beim Aufklappen gehört die Bühne kurz den Lichtpunkten, danach atmet der Rahmen weiter */
.pp-chapter.pp-burst .pp-fx { opacity: 0 !important; transition-duration: 0.25s; }

/* Hover im zugeklappten Zustand: Rand hellt leicht auf */
.has-mouse .pp-chapter:not(.is-open):hover .pp-chapter-bg {
    border-color: rgba(255, 255, 255, 0.12);
}

.pp-chapter-head {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    padding: 1.15rem 1.75rem;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.pp-chapter-num {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--astro-blue-light);
}

.pp-chapter-head h2 {
    flex: 1;
    margin: 0;
    font-size: 1.3rem;
    color: #fff;
}

.pp-chapter-toggle {
    color: #8b93a1;
    font-size: 0.85rem;
    transition: transform 0.3s ease, color 0.2s;
}

.pp-chapter-head:hover .pp-chapter-toggle { color: var(--astro-blue-light); }
.pp-chapter:not(.is-open) .pp-chapter-toggle { transform: rotate(-90deg); }
.pp-chapter-head:focus-visible { outline: none; }

/* während der Animation schneidet ein clip-path (per JS) alles außerhalb des Kastens ab */

.pp-cell {
    position: relative;
    grid-row: var(--r);
    animation: pp-fade 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.08s backwards;
    transition: opacity 0.3s ease;
}

.pp-chapter.pp-closing .pp-cell { opacity: 0; }

.pp-cell--main {
    grid-column: 1;
    margin: 0 1.75rem 1rem;
}

.pp-cell--main.pp-cell--last { margin-bottom: 1.6rem; }
.pp-cell--side { grid-column: 2; }

/* Breites Bild (Panorama, "wide": true) = eigene Zeile unter seinem Absatz */
.pp-cell--wide { grid-column: 1; margin: 0 1.75rem 1rem; }
.pp-cell--wide.pp-cell--last { margin-bottom: 1.6rem; }
.pp-cell--wide .pp-figure { margin: 0.15rem 0 0; }

/* Zugeklappt: nur die Kopfzeile bleibt */
.pp-chapter.collapsed .pp-cell { display: none; }

@keyframes pp-fade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pp-cell { animation: none; }
    .pp-chapter-bg::before, .pp-chapter-bg::after, .pp-fx, .pp-fx-ring, .pp-fx::after { transition: none; animation: none !important; }
}

/* Unterkapitel = Kasten im Kasten */
.pp-sub {
    padding: 1.2rem 1.4rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.pp-sub h3 {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 0.8rem;
    font-size: 1.05rem;
    color: #fff;
}

.pp-sub h3::before {
    content: '';
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--astro-blue-light);
}

/* Randnotiz rechts */
.pp-cell--side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pp-note {
    padding: 1rem 1.15rem;
    border-radius: 14px;
    background: var(--pp-glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--pp-glass-border);
    font-size: 0.86rem;
    line-height: 1.45;
}

.pp-note h4 {
    margin: 0 0 0.6rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--astro-blue-light);
}

.pp-note dl { display: grid; gap: 0.55rem; margin: 0; }
.pp-note dt { font-size: 0.74rem; color: #8b93a1; }
.pp-note dd { margin: 0; color: #f3f4f6; }

/* Bilder im Blog */
.pp-figure { margin: 1.25rem 0 0; }
.pp-cell--side .pp-figure { margin: 0; }
.pp-figure picture { display: contents; }

.pp-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);   /* feiner Rahmen wie bei den Kacheln */
    cursor: zoom-in;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease;
}

.pp-figure img:hover { transform: scale(1.01); }

.pp-cell--side .pp-figure img { max-height: 400px; width: auto; max-width: 100%; margin: 0 auto; }

.pp-figure figcaption {
    margin-top: 0.45rem;
    font-size: 0.82rem;
    line-height: 1.4;
    color: #9ca3af;
    text-align: center;
}

.pp-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}

.pp-gallery .pp-figure { margin: 0; }

/* ─── Variante "inside": Randnotizen im Kapitel-Kasten (nur PC) ─────────────
   Umschalten in js/project-page.js → NOTES_LAYOUT ('inside' / 'column').
   Der Kasten geht über beide Spalten; Notizen/Seitenbilder stehen darin rechts
   neben ihrem Absatz bzw. Unterkapitel (nicht im Unterkapitel-Kasten selbst). */
@media (min-width: 1001px) {
    .pp-notes--inside .pp-chapter { column-gap: 1.4rem; }

    .pp-notes--inside .pp-chapter-bg,
    .pp-notes--inside .pp-chapter-head { grid-column: 1 / -1; }

    .pp-notes--inside .pp-cell--main { margin-right: 0; }
    .pp-notes--inside .pp-cell--wide { grid-column: 1 / -1; }

    .pp-notes--inside .pp-cell--side { margin: 0 1.75rem 1rem 0; }
    .pp-notes--inside .pp-cell--side.pp-cell--last { margin-bottom: 1.6rem; }

    /* Kapitel ganz ohne Notizen: Text über die volle Breite */
    .pp-notes--inside .pp-chapter--noside .pp-cell--main {
        grid-column: 1 / -1;
        margin-right: 1.75rem;
    }

    /* Notiz liegt schon auf Glas → helle Fläche wie die Unterkapitel */
    .pp-notes--inside .pp-note {
        background: rgba(255, 255, 255, 0.03);
        border-color: rgba(255, 255, 255, 0.06);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* ─── Zugeklappte Kapitel: kürzer, fahren beim Öffnen nach rechts auf ──────
   Breite über --pp-closed-w (oben bei .project-page). Unter 1001px volle Breite. */
@media (min-width: 1001px) {
    .pp-chapter.collapsed {
        width: min(100%, var(--pp-closed-w));
        grid-template-columns: minmax(0, 1fr);
    }

    .pp-chapter.collapsed .pp-chapter-bg,
    .pp-chapter.collapsed .pp-chapter-head { grid-column: 1 / -1; }
}

/* ─── Tablet/Handy: alles untereinander ──────────────────────────────────── */
@media (max-width: 1000px) {
    .pp-layout,
    .pp-chapter { grid-template-columns: minmax(0, 1fr); }

    .pp-head, .pp-media, .pp-lead, .pp-facts, .pp-story { grid-column: 1; grid-row: auto; }

    /* Seitenleiste: Karten nebeneinander, solange Platz ist */
    .pp-facts {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        align-items: start;
    }

    /* am Handy erst die Einleitung, dann die Infos */
    .pp-lead  { order: 1; }
    .pp-facts { order: 2; }
    .pp-story { order: 3; }

    /* Kapitel = ein Kasten, Randnotizen direkt unter ihrem Absatz */
    .pp-chapter {
        position: relative;
        display: block;
        padding-bottom: 0.4rem;
    }

    .pp-chapter-bg { grid-column: auto; }
    .pp-cell--side { margin: 0 1.75rem 1rem; }
    .pp-note { background: rgba(255, 255, 255, 0.035); backdrop-filter: none; -webkit-backdrop-filter: none; }
    .pp-cell--side .pp-figure img { max-height: 70vh; }
}

/* ─── Objekt-Infos ───────────────────────────────────────────────────────── */
.pp-about { margin-bottom: 1rem; }

.pp-about-card {
    padding: 1.5rem 1.75rem;
    border-radius: 16px;
    background: var(--pp-glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--pp-glass-border);
}

.pp-about-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin-bottom: 0.9rem;
}

.pp-about-head h2 { font-size: 1.3rem; color: #fff; margin: 0; }
.pp-about-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.pp-about-card p {
    color: #c7cbd3;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.pp-about-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--astro-blue-light);
    text-decoration: none;
    font-weight: 600;
}

.pp-about-link:hover { color: #fff; }

/* ─── Vorschläge (Karussell) ─────────────────────────────────────────────── */
.pp-suggestions { padding: 1rem 0 2rem; }

.carousel { margin-top: 2rem; }

.carousel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.8rem;
}

.carousel-head h3 { font-size: 1.2rem; color: #fff; margin: 0; }

.carousel-nav { display: flex; gap: 0.5rem; }

.carousel-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    --btn-dunkel: rgba(255, 255, 255, 0.05); /* Hover-Verlauf: styles.css "Pfeil-Buttons" */
    color: #fff;
    cursor: pointer;
    transition: background-position 0.45s ease, opacity 0.2s, border-color 0.2s, box-shadow 0.3s ease;
}

.carousel-btn:hover:not(:disabled) { border-color: transparent; }
.carousel-btn:disabled { opacity: 0.3; cursor: default; }
.carousel.no-scroll .carousel-nav { display: none; }

.carousel-track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 0.4rem;
    scrollbar-width: none;
}

.carousel-track::-webkit-scrollbar { display: none; }

.tile {
    --gf-r: 12px;                /* Rundung für den Leuchtrahmen */
    position: relative;
    flex: 0 0 220px;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    scroll-snap-align: start;
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: border-color 0.4s ease, box-shadow 0.5s ease;
}

.tile picture { display: contents; }

.tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.tile:hover img { transform: scale(1.06); }
.has-mouse .tile:hover { box-shadow: -6px 0 22px -10px rgba(74, 138, 212, 0.35), 6px 0 22px -10px rgba(214, 108, 196, 0.35); }

.tile-overlay {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 2rem 0.8rem 0.7rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
}

.tile-title { color: #fff; font-weight: 700; font-size: 0.95rem; line-height: 1.25; }
.tile-sub { color: #b8c0cc; font-size: 0.78rem; }

/* ==========================================================================
   OBJEKTSEITE
   ========================================================================== */

.op-head { margin-bottom: 2.5rem; }

.op-head h1 {
    font-size: 2.3rem;
    line-height: 1.2;
    color: #fff;
    margin-bottom: 0.9rem;
}

.op-description {
    max-width: 820px;
    margin-top: 1.2rem;
    line-height: 1.75;
    color: #c7cbd3;
}

.op-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.op-card {
    display: grid;
    grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
    --gf-r: 14px;                /* Rundung für den Leuchtrahmen */
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: rgba(20, 20, 25, 0.35);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}

.op-card:hover {
    border-color: rgba(74, 138, 212, 0.6);
    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.45),
        -8px 0 28px -12px rgba(74, 138, 212, 0.35),     /* leichtes farbiges Leuchten nach außen */
         8px 0 28px -12px rgba(214, 108, 196, 0.35);
    transform: translateY(-2px);
}

.op-card-image {
    position: relative;
    height: 300px;
    background: #0b0b0d;
}

.op-card-image picture { display: contents; }

.op-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.op-card:hover .op-card-image img { transform: scale(1.03); }

.op-badge {
    position: absolute;
    left: 0.8rem;
    bottom: 0.8rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
}

.op-card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.8rem;
    padding: 1.5rem 1.75rem;
}

.op-card-body h2 { font-size: 1.4rem; color: #fff; margin: 0; }

.op-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    font-size: 0.9rem;
    color: var(--astro-blue-light);
}

.op-card-meta i { margin-right: 0.3rem; }

.op-card-facts {
    display: grid;
    gap: 0.45rem;
    margin: 0.2rem 0 0;
    font-size: 0.9rem;
}

.op-card-facts div { display: flex; justify-content: space-between; gap: 1rem; }
.op-card-facts dt { color: #8b93a1; }
.op-card-facts dt i { width: 1.1em; color: #6b7280; }
.op-card-facts dd { margin: 0; color: #e5e7eb; text-align: right; }

.op-card-summary {
    margin: 0;
    color: #b8c0cc;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.op-card-more {
    margin-top: 0.2rem;
    font-weight: 600;
    color: var(--astro-blue-light);
}

.op-card:hover .op-card-more { color: #fff; }

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 768px) {
    .detail-page { padding-top: 84px; }

    .op-head h1 { font-size: 1.75rem; }

    .pp-stage--multi { padding: 0; }
    .pp-stage--multi .pp-slide { left: 0; right: 0; }
    .pp-frame img { border-radius: 10px; }
    .pp-zoom { width: 32px; height: 32px; }
    .pp-nav { width: 36px; height: 36px; font-size: 0.9rem; }
    .pp-nav.prev { left: 0.4rem; }
    .pp-nav.next { right: 0.4rem; }

    .pp-head h1 { font-size: 1.5rem; }
    .pp-card { padding: 1rem 1.1rem; }
    .pp-lead { font-size: 1.02rem; padding: 1.1rem 1.2rem; }
    .pp-lead::before, .pp-chapter-bg::before, .pp-chapter-bg::after { left: 1.2rem; right: 1.2rem; }
    .pp-story { font-size: 0.98rem; }
    .pp-chapter-head { padding: 1rem 1.2rem; }
    .pp-chapter-head h2 { font-size: 1.15rem; }
    .pp-cell--main, .pp-cell--side, .pp-cell--wide { margin-left: 1.2rem; margin-right: 1.2rem; }
    .pp-sub { padding: 1rem; }
    .pp-about-card { padding: 1.2rem; }

    .tile { flex-basis: 150px; }
    .carousel-nav { display: none; }

    .op-card { grid-template-columns: 1fr; }
    .op-card-image { height: 220px; }
    .op-card-body { padding: 1.1rem 1.2rem 1.3rem; }
}