/* ==========================================================================
   1. PORTFOLIO BASIS-DESIGN & MAIN-ABSTAND
   ========================================================================== */
body {
    display: grid !important;
    grid-template-columns: 100% !important;
    grid-template-rows: auto 1fr auto !important; 
    grid-template-areas: "header" "main" "footer" !important;
    background: linear-gradient(135deg, #250606, #000000) !important;
    /* 🎯 REAL-PHONE-FIX: Stabilisiert den Grid-Rahmen auf echten Mobilgeräten */
    min-height: 100vh !important;
    min-height: 100dvh !important;
    position: relative !important;
}

header {
    grid-area: header !important;
    position: sticky !important;
    top: 0 !important; left: 0 !important; width: 100% !important;
    box-sizing: border-box !important; z-index: 100 !important; 
    background-color: var(--farbe-1, #ffffff) !important; 
}

/* ==========================================================================
   DYNAMISCHES MENÜBOARD-FIX (Verhindert das Abschneiden und blockiertes Scrollen)
   ========================================================================== */
@media screen and (min-width: 600px) {
    .menu {
        top: 85px !important;
        /* 🎯 REAL-PHONE-FIX: Koppelt das geöffnete Menü an den echten Netto-Screen */
        height: calc(100vh - 85px) !important;
        height: calc(100dvh - 85px) !important;
        z-index: 99998 !important;
    }
}

/* 🎯 SMARTPHONE-RETTUNG: Überschreibt den fehlerhaften Rettungs-Fix der Hamburger-CSS */
@media screen and (max-width: 599px) {
    html body .menu {
        top: 85px !important; /* Erzwingt den exakten Beginn direkt unter dem Portfolio-Header */
        height: calc(100dvh - 85px) !important; /* Nutzt den exakt verbleibenden Platz des Screens */
        max-height: calc(100dvh - 85px) !important;
        overflow-y: auto !important; /* Reaktiviert das vertikale Scrollen im Menü */
        -webkit-overflow-scrolling: touch !important;
        z-index: 99998 !important;
        padding-bottom: 80px !important; /* Erzeugt einen unsichtbaren Puffer am Ende gegen Abschneiden */
    }
    
    /* Puffer-Zuweisung für die innere Liste, um echtes Scrollen bis zum Anschlag zu garantieren */
    .menu ul {
        padding-bottom: 60px !important;
    }
}

#hamburger, label.hamburg, label.hamburg * {
    z-index: 99999 !important;
}

main {
    grid-area: main !important; width: 100% !important; position: relative !important; padding-top: 4vh !important; 
}

section { max-width: 100% !important; }

figcaption {
    font-size: 11px !important; color: var(--farbe-5, #a39fa0) !important; margin-top: 8px !important; text-align: left !important;
}

/* ==========================================================================
   2. KAPITELNAME (Links fixiert & Vertikal)
   ========================================================================== */
.kapitel-name {
    grid-column: 1/2 !important; display: flex !important; position: fixed !important;
    /* 🎯 REAL-PHONE-FIX DESKTOP: Nutzt vh, da Desktop-Browser keine einblendbaren Leisten haben */
    top: calc(50vh + (0 - 50) * ((100vh - 300px) / (600 - 300))) !important;
    height: calc(45vh + (30 - 45) * ((100vh - 300px) / (600 - 300))) !important;
    padding: 0 calc(3px + (6 - 3) * ((100vw - 320px) / (2000 - 320))) !important;
    background-color: var(--farbe-5, #a39fa0) !important; color: var(--farbe-1, #ffffff) !important;
    align-items: center !important; justify-content: center !important;
    font-size: calc(11px + (14 - 11) * ((100vh - 300px) / (1000 - 300))) !important;
    letter-spacing: .25em !important; text-transform: uppercase !important;
    border-right: 1.5px solid var(--farbe-10) !important; border-radius: .5vh !important; z-index: 90 !important;
    writing-mode: vertical-lr !important; transform: rotate(180deg) !important; white-space: nowrap !important; 
}
.kapitel-name p { margin: 0 !important; padding: 0 !important; }

@media screen and (max-height: 820px) {
    .kapitel-name {
        font-size: calc(9px + (11 - 9) * ((100vh - 300px) / (820 - 300))) !important;
        padding: 0 4px !important;
    }
}
@media screen and (max-height: 600px) {
    .kapitel-name { font-size: 8px !important; letter-spacing: .15em !important; padding: 0 3px !important; }
}

/* 🎯 REAL-PHONE-FIX MOBIL: Zwingt den vertikalen Balken unter 600px, mit dvh zu rechnen.
   Dadurch springt der Balken beim Scrollen auf dem iPhone/Xiaomi niemals aus der Verankerung! */
@media screen and (max-width: 599px) {
    .kapitel-name {
        top: calc((50dvh + (0 - 50) * ((100dvh - 300px) / (600 - 300))) - (30px + (60 - 30) * ((100dvh - 350px) / (1250 - 350)))) !important;
        height: calc((45dvh + (30 - 45) * ((100dvh - 300px) / (600 - 300))) - (15px + (30 - 15) * ((100dvh - 350px) / (1250 - 350)))) !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}
/* ==========================================================================
   3. GLOBALER PROJEKT-CONTAINER & GEORDNETE FUSION (MIT ZENTRIERUNG DER RESTE)
   ========================================================================== */
.projekt {
    margin: 0 auto 12vh auto !important; 
    padding: 0 45px 0 160px !important; 
    width: 100% !important;
    
    /* 🎯 DIE ULTIMATIVE FUSION: 
       Flexbox erlaubt es uns, jede einzelne Zeile – inklusive der unvollständigen 
       Reste am Ende – kompromisslos und elegant in der Mitte auszumitteln! */
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important; /* Zentriert unvollständige Reihen perfekt */
    align-items: start !important;
    
    gap: 65px !important; 
    row-gap: 100px !important; 
}

/* Basis-Sicherung für absolut identische Card-Bedingungen */
.projekt .card {
    flex: 0 0 auto !important; /* Verhindert, dass unvollständige Cards unkontrolliert wachsen */
    margin: 0 !important;
}

/* (Deine perfekt austarierte Mobil-Weiche bleibt hier drin vollkommen unangetastet) */
@media screen and (max-width: 599px) and (orientation: portrait) {
    .projekt { padding: 0 15px 0 45px !important; gap: 30px !important; row-gap: 50px !important; }
    .projekt-name { margin-bottom: 15px !important; }
    .projekt .card { width: 100% !important; }
}
@media screen and (max-width: 999px) and (orientation: landscape) and (max-height: 480px) {
    .projekt { padding: 0 20px 0 32px !important; gap: 25px !important; row-gap: 40px !important; }
    .projekt-name { margin-bottom: 12px !important; font-size: calc(16px + (24 - 16) * ((100vw - 300px) / (1000 - 300))) !important; }
    .projekt .card { width: 100% !important; }
}

/* ==========================================================================
   🎯 DER STABILE MONITOREN-RECHNER (Feste Card-Breiten, absolut geordnet)
   ========================================================================== */
@media screen and (min-width: 600px) {
    .projekt { 
        gap: 60px !important; 
        row-gap: 90px !important; 
    }
    /* Symmetrische 2-Spalten-Breite */
    .projekt .card { width: calc((100% - 60px) / 2) !important; max-width: 460px !important; }
}

@media screen and (min-width: 1200px) {
    .projekt { 
        /* Begrenzt das gesamte Paket auf eine edle, maximale Gesamtbreite */
        max-width: 1420px !important; 
        gap: 65px !important; 
        row-gap: 100px !important; 
    }
    
    /* 💡 ABSOLUTE ORDNUNG: Alle Cards (inklusive Textboxen) haben auf den Pixel 
       genau dieselbe maximale Breite. Sie stehen perfekt geordnet in Reih und Glied. */
    .projekt .card { 
        width: calc((100% - (2 * 65px)) / 3) !important; 
        max-width: 420px !important; 
    }
}

@media screen and (min-width: 1800px) {
    .projekt { 
        max-width: 1820px !important; 
        gap: 70px !important; 
        row-gap: 100px !important; 
    }
    /* Symmetrische 4-Spalten-Breite auf Ultra-Wide-Monitoren */
    .projekt .card { 
        width: calc((100% - (3 * 70px)) / 4) !important; 
        max-width: 400px !important; 
    }
}

/* ==========================================================================
   REPARATUR-BLOCK (Projektnamen steht felsenfest linksbündig darüber)
   ========================================================================== */
.projekt-name {
    width: 100% !important; /* Zwingt den Titel, immer als volle Zeile über den Cards zu stehen */
    display: block !important;
    color: #ffffff !important; 
    font-weight: 900 !important; 
    font-size: calc(20px + (40 - 20) * ((100vw - 300px) / (2000 - 300))) !important; 
    margin-bottom: 30px !important;
    text-align: left !important;
}

/* ==========================================================================
   4. CARDS, BILDER & DIE EDLE TEXTBOX (UNBERÜHRT)
   ========================================================================== */
.card { width: 100% !important; display: block !important; margin: 0 !important; position: relative !important; z-index: 10 !important; }
.card figure { width: 100% !important; height: auto !important; margin: 0 !important; display: block !important; position: relative !important; }
.img-projekt-quer, .img-projekt-hoch { width: 100% !important; height: auto; object-fit: contain !important; display: block !important; }
.img-projekt-quer:not(.freigestellt), .img-projekt-hoch:not(.freigestellt) { border: 1px solid gray !important; }
.card img.img-projekt-hoch.freigestellt, .card img.img-projekt-quer.freigestellt, .card img.freigestellt { border: none !important; border-color: transparent !important; outline: none !important; }

.text-box {
    font-size: 14px !important; line-height: 1.8 !important; color: var(--farbe-5) !important; background-color: #250606 !important; border: 2px solid #878D83 !important; text-align: justify !important; padding: 30px !important; box-sizing: border-box !important; display: block !important; position: relative !important;
}

.img-projekt-quer, .img-projekt-hoch, .text-box { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease !important; }

@media screen and (min-width: 1200px) {
    .projekt .card:nth-child(3):has(.text-box) { grid-column: span 2 !important; }
}


/* ==========================================================================
   EDEL-HOVER 1: DEEP VOLUME SHADOW (Verstärkte Avantgarde-Variante)
   ========================================================================== */
@media screen and (min-width: 1000px) {
  /* Ausgangszustand: Liegt flach und ruhig im Grid */
  .card:not(.aktiv) .img-projekt-quer,
  .card:not(.aktiv) .img-projekt-hoch {
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3)) !important;
    transition: filter 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  /* Hover-Zustand: Der massive, vierstufige Tiefen-Glow */
  .card:not(.aktiv):hover .img-projekt-quer,
  .card:not(.aktiv):hover .img-projekt-hoch {
    filter: 
      /* 1. Ebene: Der knackige Kontaktschatten am Bildrand */
      drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)) 
      /* 2. Ebene: Der weiche, raumgreifende Raumschatten (hebt das Bild an) */
      drop-shadow(0 15px 30px rgba(0, 0, 0, 0.6)) 
      /* 3. Ebene: Der edle rote Kern-Glow, der die Geometrie betont */
      drop-shadow(0 25px 45px rgba(166, 28, 28, 0.35)) 
      /* 4. Ebene: Das maximale, atmosphärische Umgebungslicht (passend zur Radial-Glow-Farbe) */
      drop-shadow(0 40px 80px rgba(59, 5, 5, 0.5)) !important;
  }
}


/* ==========================================================================
   5. DAS PROPORTIONSSICHERES ZOOM-ZENTRUM (Variante 2: Chromatisch)
   ========================================================================= */
@media screen and (min-width: 1000px) {
  .card { 
    cursor: zoom-in !important; 
    backface-visibility: hidden !important;
    -webkit-font-smoothing: antialiased !important;
  }
  
  .card.aktiv { 
    z-index: 99995 !important; 
    min-height: 420px !important; 
    cursor: zoom-out !important;
  }
  
  .card.aktiv figure { 
    min-height: 100% !important; 
    height: 420px !important; 
  }
  
  .card::after {
    content: "" !important;
    position: fixed !important;
    top: 0 !important; 
    left: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    background-color: rgba(21, 1, 1, 0.88) !important;
    backdrop-filter: blur(8px) !important;
    z-index: 99990 !important;
    display: block !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.45s ease-in-out, backdrop-filter 0.45s ease-in-out !important;
  }

  .card.aktiv::after {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .card.aktiv .img-projekt-quer,
  .card.aktiv .img-projekt-hoch {
    position: fixed !important; 
    top: 50% !important; 
    left: 50% !important; 
    width: auto !important;
    height: auto !important;
    max-width: 85vw !important;  
    max-height: 85dvh !important; 
    object-fit: contain !important; 
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    z-index: 99999 !important; 
    transform: translate(-50%, -50%) scale(1) !important; 
    animation: zoomFocusInFX 1s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  }
  
  .card.aktiv .text-box {
    position: fixed !important; 
    top: 50% !important; 
    left: 50% !important; 
    width: 500px !important; 
    max-width: 85vw !important;
    transform: translate(-50%, -50%) scale(1.3) !important; 
    z-index: 99999 !important; 
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7) !important; 
  }
  
  .card.aktiv figcaption { 
    opacity: 0 !important; 
  }
}

@media screen and (max-width: 999px) and (max-height: 400px) {
  .kapitel-name {
    height: 180px !important;
    margin-top: -70px !important;
  }
}

@keyframes zoomFocusInFX {
  0% {
    filter: drop-shadow(0 0px 15px rgba(199, 40, 40, 0.997)) blur(5px) grayscale(100%) brightness(75%);
  }
  45% {
    filter: drop-shadow(0 15px 40px rgba(92, 14, 14, 0.75)) blur(7px) grayscale(40%) brightness(90%);
  }
  100% {
    filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.85)) blur(0px) grayscale(0%) brightness(100%);
  }
}