/**
 * Funktionsbeschreibung:
 * Frontend-Styles für Portfolio-Assistant-Projektseiten.
 * Unterstützt die vollständige PA33-Struktur mit Modulkarten, Prozessabschnitten,
 * Nutzenlisten und Kompetenzfeldern. Die Projektgalerie zeigt auf Desktop etwa 1,5 Medien,
 * rahmt Bilder und GIFs exakt entlang ihrer natürlichen Bildkante ein und erhält Animationen in Originalgröße.
 * Konfigurierte Hero-Titel verwenden die gemeinsame zweizeilige Split-Headline-Typografie.
 */

.pa-container { width:min(1120px, calc(100% - 40px)); margin:0 auto; }
.pa-single { background:#fff; color:#2b2b2b; }
.pa-hero { background:#f3f4f5; padding:76px 0 68px; }
.pa-single .pa-eyebrow { display:none; }
.pa-hero h1 { margin:0; font-size:clamp(42px, 6vw, 76px); line-height:1.02; font-weight:400; letter-spacing:-.03em; }
.pa-hero h1.pa-hero-title--split { display:flex; flex-direction:column; gap:2px; letter-spacing:-.025em; }
.pa-hero-title--split .pa-hero-title__primary { display:block; font-size:clamp(32px, 3.4vw, 42px); line-height:1.08; font-weight:600; }
.pa-hero-title--split .pa-hero-title__secondary { display:block; font-size:clamp(26px, 2.8vw, 34px); line-height:1.12; font-weight:400; }
.pa-hero-subline { max-width:860px; margin:22px 0 0; font-size:clamp(20px, 2vw, 28px); line-height:1.4; color:#444; }
.pa-content-grid { display:grid; grid-template-columns:minmax(0, 1fr) 300px; gap:56px; padding:64px 0 80px; align-items:start; }
.pa-section { margin:0 0 50px; }
.pa-section h2 { margin:0 0 16px; font-size:30px; line-height:1.2; font-weight:500; letter-spacing:-.01em; }
.pa-section h3 { margin:0 0 10px; font-size:19px; line-height:1.3; }
.pa-text p { font-size:17px; line-height:1.78; margin:0 0 1em; }
.pa-module-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; }
.pa-module-card { padding:22px; border:1px solid #e5e7ea; border-radius:14px; background:#fafafa; }
.pa-module-card p { margin:0; font-size:15px; line-height:1.65; color:#4d4d4d; }
.pa-tag-list { display:flex; flex-wrap:wrap; gap:10px; }
.pa-tag { display:inline-flex; align-items:center; min-height:34px; padding:7px 12px; border-radius:999px; background:#eef4fa; color:#235f95; font-size:14px; font-weight:600; }
.pa-highlight-section { padding:28px; border-radius:16px; background:#f4f8fb; }
.pa-benefit-list { margin:0; padding:0; list-style:none; display:grid; gap:12px; }
.pa-benefit-list li { position:relative; padding:0 0 0 24px; font-size:16px; line-height:1.6; }
.pa-benefit-list li::before { content:'✓'; position:absolute; left:0; top:0; font-weight:700; color:#2a80c9; }
.pa-skill-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.pa-skill-item { padding:14px 16px; border:1px solid #e6e8eb; border-radius:10px; background:#fff; font-size:15px; line-height:1.45; }
.pa-side-card { background:#f6f7f7; padding:24px; border-radius:14px; position:sticky; top:40px; }
.pa-side-card h2 { margin:0 0 16px; font-size:20px; }
.pa-side-card dl { margin:0; }
.pa-side-card dt { margin-top:14px; font-weight:700; color:#555; }
.pa-side-card dd { margin:4px 0 0; overflow-wrap:anywhere; }
.pa-project-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:24px; }
.pa-project-card { background:#fff; border:1px solid #e5e5e5; border-radius:14px; overflow:hidden; }
.pa-project-card__image img { display:block; width:100%; height:auto; }
.pa-project-card__body { padding:22px; }
.pa-project-card h3 { margin:0 0 10px; font-size:24px; }
.pa-project-card a { text-decoration:none; }
@media (max-width: 900px) {
  .pa-content-grid { grid-template-columns:1fr; }
  .pa-side-card { position:static; }
}
@media (max-width: 680px) {
  .pa-container { width:min(100% - 28px, 1120px); }
  .pa-hero { padding:54px 0 48px; }
  .pa-content-grid { padding:44px 0 60px; }
  .pa-module-grid,
  .pa-skill-grid { grid-template-columns:1fr; }
  .pa-highlight-section { padding:22px; }
}


/* App-Store-artige Projektgalerie */
.pa-gallery-section {
  padding:24px 0 18px;
  background:#fff !important;
  overflow:hidden;
}
.pa-gallery-shell {
  position:relative;
  background:#fff !important;
  width:min(1180px, calc(100% - 40px));
  margin:0 auto;
}
.pa-gallery-track {
  display:flex;
  background:#fff !important;
  gap:18px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:0;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  padding:4px 0 20px;
  -webkit-overflow-scrolling:touch;
}
.pa-gallery-track::-webkit-scrollbar { display:none; }
.pa-gallery-section::before,
.pa-gallery-section::after,
.pa-gallery-shell::before,
.pa-gallery-shell::after,
.pa-gallery-track::before,
.pa-gallery-track::after {
  content:none !important;
  display:none !important;
}
.pa-gallery-slide {
  background:#fff !important;
}

.pa-gallery-slide {
  flex:0 0 66%;
  min-width:0;
  margin:0;
  scroll-snap-align:start;
}
.pa-gallery-open {
  display:block;
  width:100%;
  padding:0;
  border:1px solid #d9dadd;
  border-radius:16px;
  overflow:hidden;
  background:#fff !important;
  box-shadow:none;
  cursor:zoom-in;
  transition:transform .18s ease, box-shadow .18s ease;
}
.pa-gallery-open:hover {
  transform:translateY(-2px);
  box-shadow:none;
}
.pa-gallery-open:focus-visible {
  outline:3px solid #2a80c9;
  outline-offset:4px;
}
.pa-gallery-slide img {
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  background:#fff !important;
}
.pa-gallery-arrow {
  position:absolute;
  z-index:3;
  top:4px;
  bottom:20px;
  display:grid;
  place-items:center;
  width:52px;
  height:auto;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:rgba(55,55,55,.38);
  box-shadow:none;
  font-size:0;
  line-height:0;
  cursor:pointer;
  transition:opacity .16s ease, color .16s ease, background-color .16s ease;
}
.pa-gallery-arrow::before,
.pa-gallery-arrow::after {
  content:"";
  position:absolute;
  left:50%;
  width:2px;
  height:24px;
  border-radius:2px;
  background:currentColor;
  transform-origin:center;
}
.pa-gallery-arrow::before { top:calc(50% - 22px); }
.pa-gallery-arrow::after { bottom:calc(50% - 22px); }
.pa-gallery-next::before { transform:translateX(-50%) rotate(-38deg); }
.pa-gallery-next::after { transform:translateX(-50%) rotate(38deg); }
.pa-gallery-prev::before { transform:translateX(-50%) rotate(38deg); }
.pa-gallery-prev::after { transform:translateX(-50%) rotate(-38deg); }
.pa-gallery-arrow:hover:not(:disabled) {
  color:rgba(35,35,35,.68);
  background:linear-gradient(90deg, rgba(255,255,255,.28), rgba(255,255,255,0));
}
.pa-gallery-next:hover:not(:disabled) {
  background:linear-gradient(270deg, rgba(255,255,255,.28), rgba(255,255,255,0));
}
.pa-gallery-arrow:focus-visible { outline:2px solid #2a80c9; outline-offset:-2px; }
.pa-gallery-arrow:disabled { opacity:0; pointer-events:none; }
.pa-gallery-prev { left:-52px; }
.pa-gallery-next { right:-52px; }

.pa-gallery-lightbox[hidden] { display:none; }
.pa-gallery-lightbox {
  position:fixed;
  inset:0;
  z-index:999999;
  display:grid;
  place-items:center;
  padding:28px;
}
.pa-gallery-lightbox__backdrop {
  position:absolute;
  inset:0;
  background:rgba(10,12,14,.88);
  backdrop-filter:blur(6px);
}
.pa-gallery-lightbox__dialog {
  position:relative;
  z-index:1;
  max-width:96vw;
  max-height:94vh;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
}
.pa-gallery-lightbox__stage {
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:96vw;
  max-height:86vh;
  overflow:hidden;
  border-radius:14px;
  background:transparent;
  touch-action:pan-y;
}
.pa-gallery-lightbox__image {
  display:block;
  max-width:96vw;
  max-height:86vh;
  width:auto;
  height:auto;
  border-radius:14px;
  background:transparent;
  box-shadow:0 24px 70px rgba(0,0,0,.42);
  will-change:transform;
}


.pa-gallery-lightbox__swipe-layer {
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
.pa-gallery-lightbox__swipe-image {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:contain;
  border-radius:14px;
  background:transparent;
  box-shadow:none;
  will-change:transform;
}


.pa-gallery-lightbox__arrow {
  position:absolute;
  z-index:3;
  top:0;
  bottom:0;
  width:58px;
  padding:0;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.62);
  font-size:0;
  line-height:0;
  cursor:pointer;
  transition:opacity .16s ease, color .16s ease, background-color .16s ease;
}
.pa-gallery-lightbox__arrow::before,
.pa-gallery-lightbox__arrow::after {
  content:"";
  position:absolute;
  left:50%;
  width:2px;
  height:24px;
  border-radius:2px;
  background:currentColor;
  transform-origin:center;
}
.pa-gallery-lightbox__arrow::before { top:calc(50% - 22px); }
.pa-gallery-lightbox__arrow::after { bottom:calc(50% - 22px); }
.pa-gallery-lightbox__next::before { transform:translateX(-50%) rotate(-38deg); }
.pa-gallery-lightbox__next::after { transform:translateX(-50%) rotate(38deg); }
.pa-gallery-lightbox__prev::before { transform:translateX(-50%) rotate(38deg); }
.pa-gallery-lightbox__prev::after { transform:translateX(-50%) rotate(-38deg); }
/* Die Klickflächen schließen direkt an den Bildrand an und liegen außerhalb des Bildes. */
.pa-gallery-lightbox__prev { left:-58px; }
.pa-gallery-lightbox__next { right:-58px; }
.pa-gallery-lightbox__arrow:hover:not(:disabled) {
  color:rgba(255,255,255,.96);
  background:rgba(255,255,255,.05);
}
.pa-gallery-lightbox__arrow:focus-visible {
  outline:2px solid #fff;
  outline-offset:-2px;
}
.pa-gallery-lightbox__arrow:disabled {
  opacity:0;
  pointer-events:none;
}

.pa-lightbox-open { overflow:hidden; }

@media (max-width: 980px) {
  .pa-gallery-shell { width:min(100%, calc(100% - 32px)); }
  .pa-gallery-slide { flex-basis:82%; }
}

@media (max-width: 680px) {
  .pa-gallery-section { padding-top:20px; }
  .pa-gallery-shell { width:calc(100% - 28px); }
  .pa-gallery-track { gap:14px; padding-bottom:16px; }
  .pa-gallery-slide { flex-basis:94%; }
  .pa-gallery-open { border-radius:11px; }
  .pa-gallery-arrow { display:none; }
  .pa-gallery-lightbox { padding:14px 48px; }
  .pa-gallery-lightbox__image { border-radius:9px; }

.pa-gallery-lightbox__arrow { width:44px; }
  .pa-gallery-lightbox__prev { left:-44px; }
  .pa-gallery-lightbox__next { right:-44px; }
}