/* ── tw-lite.css: Ersatz für Tailwind CDN — nur die tatsächlich genutzten Utilities ── */
.hidden{display:none}
.fixed{position:fixed}.top-0{top:0}.left-0{left:0}.right-0{right:0}.z-50{z-index:50}
.flex{display:flex}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}.items-end{align-items:flex-end}.justify-between{justify-content:space-between}
.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1,1fr)}.grid-cols-2{grid-template-columns:repeat(2,1fr)}
.gap-3{gap:12px}.gap-4{gap:16px}.gap-5{gap:20px}.gap-6{gap:24px}
.px-6{padding-left:24px;padding-right:24px}.py-20{padding-top:80px;padding-bottom:80px}
.mb-3{margin-bottom:12px}.mb-10{margin-bottom:40px}
.mx-auto{margin-left:auto;margin-right:auto}
.max-w-4xl{max-width:896px}.max-w-7xl{max-width:1280px}
.text-center{text-align:center}
@media (min-width:768px){
  .md\:flex-row{flex-direction:row}
  .md\:grid-cols-2{grid-template-columns:repeat(2,1fr)}
  .md\:grid-cols-3{grid-template-columns:repeat(3,1fr)}
  .md\:grid-cols-4{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:1024px){
  .lg\:grid-cols-3{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:767.98px){
  .max-md\:grid-cols-2{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:639.98px){
  .max-sm\:grid-cols-1{grid-template-columns:repeat(1,1fr)}
  .max-sm\:grid-cols-2{grid-template-columns:repeat(2,1fr)}
}
/* ── Responsive Grids (Index) ── */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:64px}
@media (max-width:1024px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.grid-2{grid-template-columns:1fr;gap:40px}}
@media (max-width:640px){.grid-3{grid-template-columns:1fr}}

/* ── Nav-Feintuning (gilt auf allen Seiten, überschreibt Seiten-CSS) ── */
/* Logo-Kreis: mittig in der 124px-Headerbox, passt komplett rein (116px + 4px Luft oben/unten) */
#desk-nav .logo-circle { position: relative; top: 0; z-index: 60; }
/* Hover kräftiger rot, bleibt transparent */
#desk-nav .nav-link:hover { color: #fff; background: rgba(180,20,40,.34); border-color: rgba(180,20,40,.85); }
/* Logo-Kreis: rotes Hover wie die Nav-Links */
#desk-nav .logo-circle:hover { background: rgba(180,20,40,.34); border-color: rgba(180,20,40,.85); }
/* Kontakt-Button läuft wieder mittig in der Nav-Reihe mit */

/* Tablet-Bereich: Nav kompakter, damit nichts umbricht */
@media (min-width: 769px) and (max-width: 1020px) {
  #desk-nav { gap: 16px !important; }
  #desk-nav .nav-link { font-size: 13px; padding: 7px 8px; letter-spacing: 1.2px; }
  #desk-nav { gap: 12px !important; }
  #desk-nav .logo-circle { width: 88px; height: 88px; }
  #desk-nav .logo-circle img { height: 38px !important; }
}

/* Mobile-Fixes: Utility-Klassen müssen Inline-Grid-Styles überschreiben */
@media (max-width: 767.98px) {
  .max-md\:grid-cols-2 { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 639.98px) {
  .max-sm\:grid-cols-1 { grid-template-columns: repeat(1,1fr) !important; }
  .max-sm\:grid-cols-2 { grid-template-columns: repeat(2,1fr) !important; }
}
/* Kontaktformular: Vorname/Nachname untereinander auf schmalen Handys */
@media (max-width: 460px) {
  #contact-form > div { grid-template-columns: 1fr !important; }
}

/* Mobile: schlankere Headerleiste (Desktop-Kreis ist dort ausgeblendet) */
@media (max-width: 768px) {
  #nav > div:first-child { height: 76px !important; }
}

/* ══ Portfolio-Kacheln — einheitliche Höhe auf Arbeiten- und Service-Seiten ══ */
.pgrid-3, .pgrid-4 { display:grid; gap:22px; align-items:stretch; }
.pgrid-3 { grid-template-columns:repeat(3,1fr); }
.pgrid-4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:1100px){ .pgrid-4{grid-template-columns:repeat(3,1fr)} }
@media (max-width:900px) { .pgrid-3{grid-template-columns:repeat(2,1fr)} .pgrid-4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px) { .pgrid-3,.pgrid-4{grid-template-columns:1fr} }

.pcard{
  display:flex; flex-direction:column; height:100%;
  background:#0f0f0f; border:1px solid #1c1c1c; border-radius:10px; overflow:hidden;
  transition:border-color .3s, transform .4s ease;
}
.pcard:hover{ border-color:var(--red,#B41428); transform:translateY(-3px); }
.pcard-thumb{ position:relative; overflow:hidden; background:#000; flex-shrink:0; }
.pcard-thumb iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; pointer-events:none; }
.pcard-body{ padding:16px 16px 18px; display:flex; flex-direction:column; flex:1; }
.pcard-title{
  font-family:'D-DIN Condensed',sans-serif; font-weight:700; text-transform:uppercase;
  color:#fff; line-height:1.1; margin:5px 0 0; letter-spacing:.3px;
}
.pcard-sub{
  font-family:'D-DIN Condensed',sans-serif; font-size:13.5px; color:rgba(255,255,255,.55);
  margin-top:4px; line-height:1.35; letter-spacing:.4px;
}
.pcard-desc{
  color:rgba(255,255,255,.38); font-size:12.5px; line-height:1.7; margin-top:10px;
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;
}
.pcard .sec-label{
  font-family:'D-DIN Condensed',sans-serif; font-size:10px; letter-spacing:3px;
  text-transform:uppercase; color:var(--red,#B41428);
}
.pcard .port-overlay{
  position:absolute; inset:0; background:rgba(8,8,8,.15); opacity:0; transition:opacity .3s; z-index:2;
}
.pcard:hover .port-overlay{ opacity:1; }
.pcard .play-icon{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.8);
  width:46px; height:46px; border-radius:50%; background:rgba(180,20,40,.92);
  display:flex; align-items:center; justify-content:center; opacity:0;
  transition:opacity .3s, transform .3s; z-index:3; pointer-events:none;
}
.pcard:hover .play-icon{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* ══ Fotografie-Raster (gemischte Formate) ══ */
.fgrid{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:200px; gap:16px; }
.fcard{ position:relative; overflow:hidden; border-radius:10px; border:1px solid #1c1c1c;
        background:#0f0f0f; margin:0; grid-row:span 2; transition:border-color .3s, transform .4s; }
.fcard.f-tall{ grid-row:span 3; }
.fcard.f-wide{ grid-column:span 2; grid-row:span 2; }
.fcard:hover{ border-color:var(--red,#B41428); transform:translateY(-3px); }
.fcard img{ width:100%; height:100%; object-fit:cover; display:block; }
.fcard figcaption{ position:absolute; inset:auto 0 0 0; padding:26px 16px 14px;
  background:linear-gradient(transparent,rgba(8,8,8,.92)); }
.fcard figcaption p{ font-family:'D-DIN Condensed',sans-serif; font-size:16px; font-weight:600;
  color:#fff; margin-top:3px; text-transform:uppercase; letter-spacing:.4px; }
@media (max-width:900px){ .fgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .fgrid{ grid-template-columns:1fr; grid-auto-rows:230px; }
  .fcard, .fcard.f-tall, .fcard.f-wide{ grid-column:span 1; grid-row:span 1; } }

/* Klicks auf Kacheln gehen an die Karte (Modal), nicht an den eingebetteten Player */
.pcard .pcard-thumb iframe { pointer-events: none; }
.pcard { cursor: pointer; }