/* ═══════════════════════════════════════════════
   RESPONSIVE — Media Queries
═══════════════════════════════════════════════ */

@media (max-width: 900px) {
  .hidden-mobile { display: none !important; }
  #burger { display: flex !important; }

  /* ─── Grids: 2 Spalten → 1 Spalte ─── */
  .about-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .cv-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
  .contact-grid { grid-template-columns: 1fr !important; gap: 52px !important; }
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns:55fr 45fr"],
  div[style*="grid-template-columns:45fr 55fr"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* Kontaktdetails (kontakt.html): 2×2 → eine Spalte, Trennlinien zwischen allen Blöcken */
  .page-section div.contact-details-grid {
    grid-template-rows: none !important;
    grid-auto-flow: row !important;
    gap: 0 !important;
  }
  .page-section div.contact-details-grid > div {
    padding: 40px 0 !important;
    border-bottom: 1px solid rgba(0,0,0,0.07) !important;
  }
  .page-section div.contact-details-grid > div:first-child { padding-top: 0 !important; }
  .page-section div.contact-details-grid > div:last-child { padding-bottom: 0 !important; border-bottom: none !important; }

  /* ─── Gestaffelte Bildpaare (Startseite + Studio) ───
     Auf Desktop liegen die beiden Bilder absolut positioniert
     übereinander in einem 600px hohen Container. Auf Mobile wird
     daraus ein normaler Fluss: grosses Bild oben, kleines leicht
     überlappend nach rechts versetzt. */
  .staggered-pair {
    position: static !important;
    height: auto !important;
    display: block !important;
  }
  .staggered-pair > picture,
  .staggered-pair > div {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: block !important;
  }
  .staggered-pair > *:first-child {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
  }
  .staggered-pair > *:last-child {
    width: 58% !important;
    aspect-ratio: 3 / 4 !important;
    margin: -56px 0 0 auto !important;
  }
  .staggered-pair img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* ─── Leistungen-Seite: farbige Deko-Blöcke ausblenden ─── */
  .page-section div[style*="background:#2c502c"],
  .page-section div[style*="background:#f1add4"] {
    display: none !important;
  }
  .page-section div[style*="min-height:100vh"] {
    min-height: unset !important;
    padding: 48px 0 !important;
  }

  /* ─── Leistungen: neue asymm. Spalten → 1 Spalte auf Mobile ─── */
  .page-section .reveal[style*="grid-template-columns:3fr 2fr"],
  .page-section .reveal[style*="grid-template-columns:2fr 3fr"] {
    grid-template-columns: 1fr !important;
    min-height: unset !important;
    padding: 0 !important;
  }
  .page-section .reveal[style*="grid-template-columns:3fr 2fr"] > div,
  .page-section .reveal[style*="grid-template-columns:2fr 3fr"] > div {
    padding: 60px 24px !important;
    min-height: 300px !important;
  }
  /* Foto-Div bei Fotografie/Content (foto-links) nach unten */
  .page-section .reveal[style*="grid-template-columns:2fr 3fr"] > div:first-child {
    order: 2 !important;
  }
  .page-section .reveal[style*="grid-template-columns:2fr 3fr"] > div:last-child {
    order: 1 !important;
  }

  /* ─── Leistungen: grüner Hintergrund (Brand Identity & Web) ─── */
  .page-section div[style*="border-right"][style*="flex-direction:column"] {
    background: #2c502c !important;
    border: none !important;
    padding: 48px 24px !important;
  }
  .page-section div[style*="border-right"][style*="flex-direction:column"] h2,
  .page-section div[style*="border-right"][style*="flex-direction:column"] h2 span {
    color: #fff !important;
  }
  .page-section div[style*="border-right"][style*="flex-direction:column"] span {
    color: rgba(255,255,255,0.65) !important;
    border-bottom-color: rgba(255,255,255,0.15) !important;
  }
  .page-section div[style*="border-right"][style*="flex-direction:column"] div[style*="border-top"] {
    border-top-color: rgba(255,255,255,0.15) !important;
  }
  .page-section div[style*="border-right"][style*="flex-direction:column"] a {
    color: rgba(255,255,255,0.8) !important;
  }

  /* ─── Leistungen: rosa Hintergrund (Fotografie & Content) ─── */
  .page-section div[style*="border-left"][style*="flex-direction:column"] {
    background: #f1add4 !important;
    border: none !important;
    padding: 48px 24px !important;
  }
  .page-section div[style*="border-left"][style*="flex-direction:column"] h2,
  .page-section div[style*="border-left"][style*="flex-direction:column"] h2 span {
    color: #fff !important;
  }
  .page-section div[style*="border-left"][style*="flex-direction:column"] span {
    color: rgba(255,255,255,0.75) !important;
    border-bottom-color: rgba(255,255,255,0.2) !important;
  }
  .page-section div[style*="border-left"][style*="flex-direction:column"] div[style*="border-top"] {
    border-top-color: rgba(255,255,255,0.2) !important;
  }
  .page-section div[style*="border-left"][style*="flex-direction:column"] a {
    color: rgba(255,255,255,0.85) !important;
  }

  /* ─── Leistungen: 4 Spalten → 2 Spalten ─── */
  div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  div[style*="grid-template-columns:repeat(4,1fr)"] > div {
    border-right: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    padding: 28px 0 !important;
  }

  /* ─── Works-Grid (index.html) ─── */
  #works-grid { grid-template-columns: 1fr 1fr !important; }
  #works-grid .work-item[style*="span 2"] { grid-column: span 2 !important; }
  #works-grid { padding-bottom: 0 !important; }

  /* Der versetzte Stapel-Effekt (transform:translateY am Element) ergibt
     nur nebeneinander Sinn. Untereinander erzeugt er ungleiche Abstände
     und überlappende Karten - deshalb für alle Karten zurücksetzen,
     nicht nur im Works-Grid. */
  .work-item {
    margin-top: 0 !important;
    transform: none !important;
  }

  /* ─── Arbeiten & Team: repeat(3,1fr) → 1 Spalte ─── */
  div[style*="grid-template-columns:repeat(3,1fr)"]:not(#works-grid) {
    grid-template-columns: 1fr !important;
    grid-auto-rows: 320px !important;
    gap: 24px !important;
  }
  div[style*="grid-template-columns:repeat(3,1fr)"]:not(#works-grid) .work-item {
    grid-column: span 1 !important;
  }

  /* ─── Alle Content-Bilder quadratisch ─── */
  .gallery-item img,
  .about-founder-img {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  /* ─── Projekt- und Teamkarten ───
     Die Bilder sind für den Parallax-Effekt absolut positioniert und
     überstehen die Karte bewusst (left:-15%, top:-12.5%, width:130%).
     Zusätzlich verschiebt das Skript sie per transform. Auf Mobile gibt
     es kein Parallax - die Karte bekommt ein quadratisches Format und
     das Bild füllt sie randlos aus. */
  .work-item .work-card,
  .work-item .work-card-inner {
    height: auto !important;
  }
  .work-item .work-card-inner {
    position: relative !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
  }
  .work-item .work-card-inner img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    max-height: none !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
  }

  /* Container overflow damit crop sauber bleibt.
     .work-item bleibt sichtbar: die Karte kappt ihren Inhalt selbst, und
     ihr versetzter Schlagschatten (5px rechts/unten) darf nicht wegfallen. */
  .gallery-item {
    overflow: hidden !important;
    height: auto !important;
  }
  .work-item {
    overflow: visible !important;
    height: auto !important;
  }

  /* Lightbox nicht verzerren */
  #lightbox img {
    aspect-ratio: unset !important;
    width: auto !important;
    height: auto !important;
    max-width: 90vw !important;
    max-height: 90vh !important;
    object-fit: contain !important;
  }

  /* Grid-Zeilenhöhen auf auto */
  #works-grid,
  div[style*="grid-template-columns:repeat(3,1fr)"]:not(#works-grid),
  .gallery-grid {
    grid-auto-rows: auto !important;
  }

  /* ─── Projekt-Header: Titel + Details untereinander ─── */
  div[style*="grid-template-columns:1fr 280px"] {
    grid-template-columns: 1fr !important;
  }

  /* Galerie-Seiten: 1 Spalte auf Mobile */
  .gallery-grid {
    grid-template-columns: 1fr !important;
  }
  .gallery-item.wide {
    grid-column: span 1 !important;
  }

  /* ─── Footer: die rechte Linkgruppe steht auf nowrap mit 24px gap.
     Mit dem per JS ergänzten Cookie-Link passt das unter ~400px
     nicht mehr nebeneinander und schiebt die Seite auf. ─── */
  footer > div {
    gap: 14px !important;
  }
  footer > div > div {
    flex-wrap: wrap !important;
    gap: 8px 16px !important;
  }

  /* ─── Kundenlogos: feste Pixelbreiten (bis 300px) sprengen
     auf Mobile die Kachel. Padding runter, Logo skaliert mit. ─── */
  .logo-card {
    padding: 32px 24px !important;
  }
  .logo-card img {
    width: 100% !important;
    max-width: 200px !important;
    height: auto !important;
  }

  /* ─── Illustration ─── */
  #site-illu { transform: scale(0.85) !important; height: auto !important; }

  /* ─── Cursor ausblenden ─── */
  #cursor-dot, #cursor-ring { display: none !important; }

  /* ─── Einheitlicher seitlicher Abstand: 24px überall ─── */
  div[style*="max-width:1360px"] { padding-left: 24px !important; padding-right: 24px !important; }
  .page-section > div > div[style*="padding"] {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* Header auf Mobile kleiner */
  #site-header > div:first-child { height: 72px !important; }
  .site-logo-svg { height: 56px !important; }

  /* Alle Sections bekommen auf Mobile eigenen Atemraum */
  .stack-section { padding-top: 72px !important; padding-bottom: 72px !important; }

  /* Vollflächige Bild-Sections haben ein festes aspect-ratio. Bekommen sie
     zusätzlich vertikales Padding, wird die Box höher als das Verhältnis
     erlaubt - der Browser verbreitert sie dann über den Viewport hinaus. */
  .stack-section[style*="aspect-ratio"] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Hero: Abstand zum fixierten Header */
  #hero { padding-top: 96px !important; padding-bottom: 60px !important; min-height: unset !important; }

  #work { padding: 72px 0 !important; }

  /* Sections mit inline padding:80px 0 */
  section[style*="padding:80px 0"] { padding: 72px 0 !important; }
}

@media (max-width: 600px) {
  /* ─── Leistungen: 2 Spalten → 1 Spalte ─── */
  div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* ─── Works-Grid: 1 Spalte ─── */
  #works-grid { grid-template-columns: 1fr !important; }
  #works-grid .work-item[style*="span 2"] { grid-column: span 1 !important; }
  /* Zeilenhöhe muss auto bleiben: die Karte ist quadratisch, eine feste
     Höhe von 320px würde ihren unteren Rand abschneiden. */
  #works-grid { grid-auto-rows: auto !important; }
}