/* Walona Projektentwicklung – nur für diese Seite. Präfix pe-.
   Basis (Hero, Abschnitte, Karten, Formular, Dialog …) steckt in walona-lp.css. */

/* ── Hero: helle Skizze → etwas kräftiger abdunkeln, damit der Text trägt ── */
.pe-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(23,23,23,.28),rgba(23,23,23,.12) 45%,rgba(23,23,23,.34));pointer-events:none}
.pe-hero .w-h1{max-width:1000px}

/* ── Ansatz: Text links, Skizze im Goldrahmen rechts ───────────────────── */
@media(min-width:900px){.pe-approach-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center}}
.pe-approach .w-quote{max-width:560px}
.pe-sketch .w-media{background:#F4F3EF}
.pe-sketch-float{left:clamp(-28px,-2vw,-12px);bottom:clamp(-30px,-2.4vw,-16px);max-width:290px}

/* ── Projekte: drei Kacheln, Klick öffnet die Galerie ───────────────────── */
.pe-tiles{list-style:none;display:grid;gap:clamp(16px,2vw,26px);grid-template-columns:minmax(0,1fr)}
@media(min-width:700px){.pe-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.pe-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pe-tile{display:flex;flex-direction:column;width:100%;height:100%;padding:0;border:1px solid var(--line);border-radius:var(--r-panel);background:#FFFFFF;color:var(--ink);text-align:left;font:inherit;cursor:pointer;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .3s}
.pe-tile:hover{transform:translateY(-4px);box-shadow:0 26px 60px rgba(23,23,23,.12);border-color:#E2E2E2}
.pe-tile:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.pe-tile-img{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:#E9E9E9}
.pe-tile-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.pe-tile:hover .pe-tile-img img{transform:scale(1.05)}
.pe-tile-text{display:flex;flex-direction:column;gap:6px;padding:clamp(18px,2vw,24px) clamp(20px,2.2vw,26px) clamp(20px,2.2vw,26px)}
.pe-tile-text strong{font-weight:700;font-size:clamp(20px,1.8vw,24px);line-height:1.15;letter-spacing:-0.04em;text-transform:uppercase}
.pe-tile-meta{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-weight:600;font-size:14px;color:var(--muted)}
.pe-tile-meta svg{width:14px;height:14px;transition:transform .35s var(--ease)}
.pe-tile:hover .pe-tile-meta{color:var(--ink)}
.pe-tile:hover .pe-tile-meta svg{transform:translate(3px,-3px)}

/* ── Drei Wege: redaktionelle Liste auf Dunkel, mit kleinem Label ───────── */
.pe-ways-list>li::before{grid-row:span 3}
.pe-ways-list .w-tag{color:var(--gold)}
.pe-ways-list h3{color:#FFFFFF}

/* ── Gruppe: verlinkte Unternehmen ──────────────────────────────────────── */
.pe-company{text-decoration:none;transition:border-color .3s,transform .4s var(--ease),background .3s}
.pe-company:hover{border-color:var(--gold);transform:translateY(-3px)}
.pe-company h3::after{content:" ↗";color:var(--gold);font-weight:600}

/* ── Kontakt: Formular links, Text rechts auf Foto ──────────────────────── */
.pe-contact>.w-sec{padding:clamp(150px,15vw,230px) 0 clamp(110px,12vw,180px)}
.pe-contact .w-split{gap:clamp(36px,6vw,96px)}
@media(min-width:900px){
  .pe-contact .w-split{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
}
@media(min-width:900px) and (min-height:860px){.pe-contact-copy{position:sticky;top:calc(var(--nav-h) + 40px)}}
.pe-contact .w-lead{max-width:520px}
.pe-contact .w-formbox{border-radius:var(--r-panel);box-shadow:0 40px 90px rgba(0,0,0,.35)}
.pe-form-lead{margin-bottom:18px;font-size:15.5px;line-height:1.55;color:var(--muted)}
.pe-direct{margin-top:clamp(28px,3.4vw,44px);padding-top:clamp(24px,3vw,36px);border-top:1px solid rgba(255,255,255,.16)}
.pe-direct-sub{margin-top:6px;color:var(--gold);font-weight:600}
.pe-direct-list{list-style:none;display:flex;flex-direction:column;gap:16px;margin-top:22px}
.pe-direct-list li{display:flex;gap:14px;align-items:flex-start}
.pe-direct-ico{display:flex;align-items:center;justify-content:center;flex:0 0 44px;height:44px;border-radius:50%;background:rgba(201,167,0,.16);color:var(--gold);transition:background .3s,color .3s}
.pe-direct-list li:hover .pe-direct-ico{background:var(--gold);color:var(--ink)}
.pe-direct-ico svg{width:20px;height:20px}
.pe-direct-list strong{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.pe-direct-list a,.pe-direct-addr{display:inline-block;margin-top:2px;font-size:17px;line-height:1.4;color:#FFFFFF;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s,color .2s;overflow-wrap:anywhere}
.pe-direct-list a:hover{color:var(--gold);border-color:var(--gold)}
.pe-contact .w-formbox .w-fine{color:var(--muted-2)}
.pe-req{font-style:normal;color:var(--gold-text)}
.pe-contact .w-ok .w-h3{display:block;margin-bottom:8px}

/* Upload */
.pe-upload{padding:18px;border-radius:var(--r-card);background:var(--bg-muted);border:1px solid var(--line)}
.pe-upload-head{display:flex;gap:14px;align-items:flex-start}
.pe-upload-ico{display:flex;align-items:center;justify-content:center;flex:0 0 40px;height:40px;border-radius:50%;background:var(--gold);color:var(--ink)}
.pe-upload-ico svg{width:20px;height:20px}
.pe-upload-head strong{display:block;font-size:16px;letter-spacing:-0.02em}
.pe-upload-head small{display:block;margin-top:3px;font-size:14px;line-height:1.45;color:var(--muted)}
.pe-upload-zone{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-top:14px;padding:16px;border:1.5px dashed #CFCFCF;border-radius:var(--r-sm);background:#FFFFFF;cursor:pointer;transition:border-color .25s,background .25s}
.pe-upload-zone:hover{border-color:var(--gold)}
.pe-upload-zone:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,167,0,.2)}
.pe-upload-zone .w-btn{pointer-events:none}
.pe-upload-hint{font-size:13.5px;line-height:1.45;color:var(--muted)}
.pe-upload-status{margin-top:10px;font-size:13.5px;line-height:1.45;color:var(--muted);overflow-wrap:anywhere}
.pe-upload.has-files .pe-upload-zone{border-color:var(--gold);background:#FBF7E3}
.pe-upload.has-files .pe-upload-status{color:var(--text)}
.pe-upload.is-invalid .pe-upload-zone{border-color:#C0392B}
.pe-upload.is-invalid .pe-upload-status{color:#9A2A1B}

/* ── Projekt-Galerie (Dialog) ───────────────────────────────────────────── */
.pe-gal{width:min(1040px,calc(100vw - 24px));padding:0}
.pe-gal:focus{outline:none}
.pe-gal-top{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px 12px clamp(18px,2.4vw,28px);background:#FFFFFF;border-bottom:1px solid var(--line)}
.pe-gal-nav{display:flex;gap:8px;align-items:center}
.pe-gal-nav .w-arrow{width:44px;height:44px}
.pe-gal-x{position:static;width:44px;height:44px}
.pe-gal-stage{display:flex;align-items:center;justify-content:center;background:#141414}
.pe-gal-fig{display:flex;align-items:center;justify-content:center;width:100%;margin:0}
.pe-gal-fig[hidden]{display:none}
.pe-gal-fig img{width:100%;height:auto;max-height:min(64vh,640px);object-fit:contain}
/* Projekt 02: Quelle nur gut 500 px breit – nie größer als das Original zeigen (sonst unscharf) */
.pe-gal--klein .pe-gal-fig img{width:auto;max-width:min(100%,508px)}
.pe-gal-thumbs{display:flex;gap:8px;padding:12px clamp(14px,2vw,22px);overflow-x:auto;background:#1C1C1C;scrollbar-width:thin}
.pe-gal-thumb{flex:0 0 72px;height:56px;padding:0;border:2px solid transparent;border-radius:10px;background:#2A2A2A;overflow:hidden;cursor:pointer;opacity:.6;transition:opacity .25s,border-color .25s}
.pe-gal-thumb span,.pe-gal-thumb img{display:block;width:100%;height:100%}
.pe-gal-thumb img{object-fit:cover}
.pe-gal-thumb:hover{opacity:1}
.pe-gal-thumb[aria-current="true"]{opacity:1;border-color:var(--gold)}
.pe-gal-text{padding:clamp(22px,3vw,40px)}
.pe-gal-text .w-h3{margin-top:10px}
.pe-gal-sub{margin-top:6px;font-weight:600;font-size:14.5px;color:var(--muted)}
.pe-gal-text .w-text{margin-top:16px;font-size:15.5px;max-width:760px}
.pe-gal[open]{animation:pePop .5s var(--ease-out)}
@keyframes pePop{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.pe-gal[open]{animation:none}}

/* ── Mobil ──────────────────────────────────────────────────────────────── */
.pe-approach,.pe-contact,.pe-hero{overflow:hidden;overflow:clip}
@media(max-width:899px){
  .pe-contact>.w-sec{padding:var(--sec-y) 0}
  .pe-contact-copy{position:static}
}
@media(max-width:760px){
  .pe-sketch-float{margin:-34px 14px 0}
  .pe-gal-fig img{max-height:56vh}
}