/* Core Guard Karaman – Projektseiten (Aufbau und Bewegungen nach dem Vorbild der Vorlage) */

/* Erste Ansicht: Titel mittig, Medien unten */
.pseite{display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:5em;min-height:100svh;max-height:1200px;padding-top:7.25em;position:relative;overflow:hidden;cursor:progress;}
.p-oben{width:100%;}
.p-oben .raster{position:relative;}
.p-oben .raster > .rel{grid-column:1/7;}
.p-verzeichnis-knopf{position:absolute;top:0;left:0;z-index:1001;margin-top:-1em;display:flex;align-items:center;gap:.5em;padding:.75em 0;color:var(--schrift);font-size:.875em;text-transform:uppercase;letter-spacing:-.04em;cursor:pointer;transition:opacity .4s var(--sanft);}
.p-verzeichnis-knopf .knopf-symbol{width:1.5em;height:1.5em;}
.p-verzeichnis-knopf.offen .knopf-symbol i:nth-child(1){transform:translate(-.3em,-.3em) scale(.5);}
.p-verzeichnis-knopf.offen .knopf-symbol i:nth-child(2){transform:translate(.3em,-.3em) scale(.5);}
.p-verzeichnis-knopf.offen .knopf-symbol i:nth-child(3){transform:scale(.5);}
.p-verzeichnis-knopf.offen .knopf-symbol i:nth-child(4){transform:translate(-.3em,.3em) scale(.5);}
.p-verzeichnis-knopf.offen .knopf-symbol i:nth-child(5){transform:translate(.3em,.3em) scale(.5);}
.p-verzeichnis-knopf:hover:not(.offen) .knopf-symbol i:nth-child(1){transform:translate(-.42em,0) scale(.55);}
.p-verzeichnis-knopf:hover:not(.offen) .knopf-symbol i:nth-child(3){transform:translate(.42em,0) scale(.55);}
.p-verzeichnis-knopf:hover:not(.offen) .knopf-symbol i:nth-child(2),.p-verzeichnis-knopf:hover:not(.offen) .knopf-symbol i:nth-child(4),.p-verzeichnis-knopf:hover:not(.offen) .knopf-symbol i:nth-child(5){transform:scale(.55);}
.p-recht{position:absolute;top:0;right:0;margin-top:-.2em;display:flex;gap:1.25em;transition:opacity .4s var(--sanft);}
.p-recht a{opacity:.6;transition:opacity .25s;}
.p-recht a:hover{opacity:1;}
.pseite.medium-aktiv .p-verzeichnis-knopf,.pseite.medium-aktiv .p-recht{opacity:.2;}

.p-inhalt{display:flex;flex-direction:column;align-items:center;gap:.5em;text-align:center;transform-origin:50% 0;transition:opacity .4s var(--sanft),transform .4s var(--sanft);}
.pseite.medium-aktiv .p-inhalt{opacity:.2;transform:scale(.8);}
.p-tags{display:flex;justify-content:center;align-items:center;gap:.25em;margin-bottom:.25em;}
.p-tags .tag-xs{transform-origin:50%;}
.p-titel{font-size:6.6em;line-height:.9;white-space:nowrap;}
.p-titel .eng{transform-origin:50% 0;}
.p-titel .p-wort{display:inline-block;white-space:nowrap;}
.p-titel .p-zeichen{display:inline-block;}
.p-beschreibung-w{display:flex;flex-direction:column;align-items:center;gap:1.5em;max-width:21em;pointer-events:none;}
.p-beschreibung{line-height:1.5;}
.p-beschreibung .p-zeile{display:block;}
.p-details-knopf{pointer-events:auto;}

/* Medienreihe unten: Karte wird beim Überfahren breit, Video läuft */
.p-unten{position:absolute;left:0;right:0;bottom:0;z-index:1;width:100%;margin-bottom:1em;pointer-events:none;}
.p-medien{display:flex;justify-content:center;align-items:flex-end;width:100%;max-width:1800px;margin:0 auto;padding:0 4.375em;}
.p-medien-innen{display:flex;align-items:flex-end;width:calc(var(--anzahl) / 6 * 100%);}
.p-medium{width:100%;min-width:0;padding:0 .625em;transform:translate3d(0,0,0);transition:width .5s var(--sanft);}
.p-karte{display:flex;flex-direction:column;gap:.5em;width:100%;cursor:pointer;}
.p-bild{position:relative;width:100%;padding-top:100%;border:1px solid #fafafa1c;border-radius:2px;overflow:hidden;background:var(--flaeche-2);}
.p-bild > img,.p-bild > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;}
.p-bild > video{z-index:1;height:101%;opacity:0;transition:opacity .1s;}
.p-bild > .text-kachel{position:absolute;inset:0;}
.p-bild .text-kachel .anz{font-size:2.6em;}
.p-infos{position:relative;display:flex;justify-content:space-between;align-items:center;gap:1em;white-space:nowrap;}
.p-nr{opacity:.6;transition:opacity .4s var(--sanft);}
.p-label{position:absolute;right:0;top:0;font-size:.75em;line-height:inherit;text-transform:uppercase;text-align:right;opacity:0;transform:translateX(-2em);transition:opacity .4s var(--sanft),transform .4s var(--sanft);}
@media (min-width:992px){
  .p-medium:hover{width:280%;}
  .p-medium:hover .p-nr{opacity:1;}
  .p-medium:hover .p-label{opacity:1;transform:none;}
  .p-karte:hover .p-bild > video{opacity:1;}
}

/* Projektdetails und Projektverzeichnis: Ebene mit Weichzeichner */
.p-ebene{position:fixed;inset:0;z-index:1100;display:none;height:100svh;min-height:100svh;background:#0d0d0d80;-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);cursor:pointer;color:var(--schrift);}
html[data-farbe="hell"] .p-ebene{background:#f3f1ec99;}
.p-ebene-zu{position:fixed;inset:0;}
.p-ebene .w,.p-ebene .raster{pointer-events:none;}
.p-brief,.p-infos-rechts,.p-eintrag,.p-details-schliessen{pointer-events:auto;}
.p-details{padding-top:6.25em;overflow-y:auto;}
.p-details .raster{align-items:start;}
.p-brief{grid-area:1/1/2/3;position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:2.5em;cursor:auto;}
.p-brief-text{font-family:var(--titel);font-size:1.75em;font-weight:500;line-height:1.1;letter-spacing:-.01em;text-transform:none;}
.p-brief-text .p-zeile{display:block;}
.p-infos-rechts{grid-area:1/5/2/7;position:relative;z-index:2;display:flex;flex-direction:column;gap:3.75em;cursor:auto;}
.p-info{display:flex;flex-direction:column;align-items:flex-start;gap:1em;}
.p-info-titel{font-size:.875em;color:var(--schrift-60);text-transform:uppercase;}
.p-info p{margin-bottom:.125em;}
.p-info blockquote{margin:0;font-family:var(--titel);font-size:1.125em;line-height:1.35;text-transform:none;}
.p-details-schliessen{display:none;}
.p-verzeichnis{z-index:1000;padding-top:min(13.25em,18vh);padding-bottom:2em;overflow-y:auto;}
.p-liste{position:relative;z-index:2;}
.p-eintrag{display:flex;justify-content:space-between;align-items:center;width:100%;height:3.6em;transition:opacity .3s var(--sanft);}
.p-liste:hover .p-eintrag{opacity:.2;}
.p-liste .p-eintrag:hover{opacity:1;}
.p-eintrag-links{display:flex;align-items:center;}
.p-eintrag .titel-m{white-space:nowrap;}
.p-eintrag.aktuell .titel-m::after{content:"";display:inline-block;width:.25em;height:.25em;margin-left:.3em;border-radius:50%;background:currentColor;vertical-align:.45em;}
.p-eintrag-tags{display:flex;gap:.25em;margin:1em 0 0 .75em;}
.p-eintrag .tag-xs{opacity:0;transform:translateY(75%);transition:transform .5s var(--sanft),opacity .5s var(--sanft);}
.p-eintrag:hover .tag-xs{opacity:1;transform:none;}
.p-eintrag:hover .tag-xs:nth-child(1){transition-delay:.05s;}
.p-eintrag:hover .tag-xs:nth-child(2){transition-delay:.1s;}
.p-eintrag-bilder{display:flex;justify-content:flex-end;align-items:center;gap:.75em;}
.p-eintrag-bild{display:block;position:relative;width:8em;overflow:hidden;transform:scale(0);transition:transform .5s var(--sanft);}
.p-eintrag-bild-innen{display:block;position:relative;padding-top:100%;border:1px solid var(--linie);border-radius:.125em;overflow:hidden;background:var(--flaeche-2);}
.p-eintrag-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.4);transition:transform .5s var(--sanft);}
.p-eintrag:hover .p-eintrag-bild,.p-eintrag:hover .p-eintrag-bild img{transform:scale(1);}
.p-eintrag:hover .p-eintrag-bild:nth-child(2),.p-eintrag:hover .p-eintrag-bild:nth-child(2) img{transition-delay:.05s;}
.p-eintrag:hover .p-eintrag-bild:nth-child(1),.p-eintrag:hover .p-eintrag-bild:nth-child(1) img{transition-delay:.1s;}

/* Tablet und Handy */
@media (max-width:991px){
  .pseite{padding-top:6.5em;gap:2em;max-height:none;justify-content:flex-start;}
  .p-verzeichnis-knopf{position:relative;margin:0 0 1.5em;}
  .p-recht{position:relative;margin:0 0 1.5em;justify-content:flex-start;}
  .p-oben .raster > .rel{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;}
  .p-titel{font-size:4.2em;}
  .p-unten{position:relative;margin:0;padding-bottom:1.5em;pointer-events:auto;}
  .p-medien{padding:0;}
  .p-medien-innen{width:100%;overflow-x:auto;scroll-snap-type:x mandatory;gap:.75em;padding:0 1.5em;scrollbar-width:none;}
  .p-medien-innen::-webkit-scrollbar{display:none;}
  .p-medium{flex:none;width:72vw;padding:0;scroll-snap-align:center;}
  .p-label{opacity:1;transform:none;}
  .p-nr{opacity:1;}
  .p-medium.im-blick .p-bild > video{opacity:1;}
  .p-details{padding-top:6em;overflow-y:auto;cursor:auto;}
  .p-details .raster{row-gap:3em;padding-bottom:4em;}
  .p-brief,.p-infos-rechts{grid-column:1/7;grid-row:auto;}
  .p-brief-text{font-size:1.4em;}
  .p-details-schliessen{display:inline-flex;position:fixed;top:1.25em;right:1.5em;z-index:3;}
  .p-verzeichnis{padding-top:8em;overflow-y:auto;}
  .p-eintrag{max-height:none;padding:.4em 0;}
  .p-eintrag .titel-m{font-size:2em;}
  .p-eintrag-bilder,.p-eintrag-tags{display:none;}
}
/* Ruhige Fassung nur auf Wunsch (?ruhig) */
html.ruhig .pseite{cursor:auto;}
html.ruhig .p-unten{pointer-events:auto;}

/* Videos laufen direkt: sichtbar, sobald sie spielen */
.p-medium.laeuft .p-bild > video{opacity:1;}

/* Runde 3: Kopf am Handy mittig und ohne Abschneiden, Verzeichnisbilder von oben */
@media (max-width:991px){
  .p-inhalt{flex:0 0 100%;}
  .p-titel{font-size:min(4.2em,13vw);white-space:normal;}
}
.p-eintrag-bild img{object-position:0 0;}