/* ============================================================
   VINCENT FLEISCHMANN — Portfolio Stylesheet
   ------------------------------------------------------------
   Struktur:
   1. CSS Custom Properties (Tokens)
   2. Reset & Base
   3. Fixed Contact Email
   4. Hero Section & Background
   5. Hero Copy (Name + Tags)
   6. PNG Positions  ← hier Positionen anpassen
   7. PNG Items (gemeinsame Regeln)
   8. Responsive Breakpoints
   ============================================================ */


/* ============================================================
   1. CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  --font-main: "ff-real-headline-pro", Helvetica, Arial, sans-serif;
  --font-size-name: clamp(2rem, 5vw, 5rem);
  --font-size-tags: clamp(0.85rem, 1.5vw, 1.2rem);
  --font-size-email: clamp(0.75rem, 1.2vw, 0.95rem);

  --color-text-dark: #111111;
  --color-email-bg: rgba(255, 255, 255, 0.08);
  --color-email-hover: rgba(255, 255, 255, 0.18);

  --spacing-email: 20px;
  --spacing-copy-bottom: 8%;

  --hero-bg-image: url("images/hero-bg.jpg");

  --png-width-default: 15vw;
  --png-width-min: 80px;
  --png-width-max: 260px;

  --png-scale: 0.28;
}



/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden; /* Vollbild-Erlebnis ohne Scroll */
  font-family: var(--font-main);
  background-color: #111;
}


/* ============================================================
   3. FIXED CONTACT EMAIL (oben links, immer vorne)
   ============================================================ */
.contact-email {
  position: fixed;
  top: var(--spacing-email);
  left: var(--spacing-email);
  z-index: 1000;           /* immer über allem */

  font-family: var(--font-main);
  font-size: var(--font-size-email);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--color-text-light);
  text-decoration: none;
}

.contact-email:hover {
  background: var(--color-email-hover);
  text-decoration: underline;
}


/* ============================================================
   4. HERO SECTION & HINTERGRUNDBILD
   ============================================================ */
.hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: clip;
}

/* Hintergrundbild-Layer
   Das Bild hat ein 4:5-Seitenverhältnis als Basis.
   object-fit: cover schneidet es auf alle anderen Formate zu. */
.hero-bg {
  position: absolute;
  inset: 0;
  background-image: var(--hero-bg-image);
  background-size: cover;
  background-position: center center;  /* ← Bildausschnitt hier anpassbar */
  background-repeat: no-repeat;
  z-index: 0;
}

/* Overlay deaktiviert — bei Bedarf wieder einkommentieren:
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
} */


/* ============================================================
   6. PNG LAYER — Container
   ============================================================ */
.png-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
}


/* ============================================================
   7. PNG ITEMS — gemeinsame Regeln
   Positionen werden über CSS Custom Properties --x / --y
   gesteuert (gesetzt im HTML als inline style="--x:...; --y:...").
   Individuelle Überschreibungen hier pro ID möglich.
   ============================================================ */
.png-item {
 position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  transform: translate(-50%, -50%) scale(var(--png-scale));
  cursor: grab;
  user-select: none;
  touch-action: none;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
  will-change: transform;
  isolation: isolate; /* eigener Compositing-Layer, ohne transform zu stören */
}

.png-item:active,
.png-item.is-dragging {
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(0.0.25);
  z-index: 50;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.4));
}

.png-item img {
  width: auto;
  height: auto;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
  -webkit-transform: translateZ(0);
}

  #png_Dicker_Magnet { --x: 80%; --y: 80%; }
  #png_Flacher_Magnet { --x: 50%; --y: 50%; }
  #png_Bild { --x: 37%; --y: 25%; }
  #png_Postit { --x: 25%; --y: 40%; }
  #png_h { --x: 67%; --y: 35%; }
  #png_i { --x: 74%; --y: 32%; }
  #png_a { --x: 75%; --y: 3%; }
  #png_r { --x: 8%;  --y: 20%; }
  #png_t { --x: 70%; --y: 95%; }
  #png_at { --x: 87%; --y: 33%; }
  #png_g { --x: 18%; --y: 82%; }
  #png_u { --x: 26%; --y: 82%; }
  #png_m { --x: 35%; --y: 82%; }
  #png_o { --x: 45%; --y: 80%; }
  #png_ausrufezeichen { --x: 78%; --y: 31%; }

  /* ── PNG Schatten ─────────────────────────────────────────
   .shadow-close  = kurz, knapp, plastisch
   .shadow-far    = weit, weich, tief
   offset-x negativ = leicht nach links
   ────────────────────────────────────────────────────────── */

.shadow-close {
  filter: drop-shadow(-2px 15px 2px rgba(0, 0, 0, 0.75));
}

.shadow-far {
  filter: drop-shadow(0px 35px 2px rgba(0, 0, 0, 0.75));
}


/* ============================================================
   8. RESPONSIVE BREAKPOINTS
   ------------------------------------------------------------
   Hier kannst du für Tablet und Mobile:
     a) globale Standard-Größen (--png-width-default) ändern
     b) individuelle Größen pro PNG-ID überschreiben
     c) individuelle Positionen (--x / --y) pro PNG-ID setzen
   ============================================================ */

@media (min-width: 1800px) {
    :root {
    --png-scale: 0.35;
}
}
/* ────────────────────────────────────────────────────────────
   TABLET  (≤ 1024px)
   ──────────────────────────────────────────────────────────── */
@media (max-width: 1250px) {

  /* Globale Standard-Größe für alle PNGs auf Tablet */
  :root {
    --png-width-default: 22vw;
    --png-width-min: 70px;
    --png-width-max: 200px;
    --png-scale: 0.22;
  }

  .png-item {
  transform: translate(-50%, -50%) scale(var(--png-scale));
}

  .png-item:active,
  .png-item.is-dragging {
    filter: none;
  }

  /* ── Individuelle PNG-Größen (Tablet) ── 
  #png_Dicker_Magnet { --png-width-default: 25vw; }
  #png_Flacher_Magnet { --png-width-default: 18vw; }
  #png_Bild { --png-width-default: 20vw; }
  #png_postit { --png-width-default: 22vw; }
  #png_h { --png-width-default: 19vw; }
  #png_i { --png-width-default: 24vw; }
  #png_a { --png-width-default: 21vw; }
  #png_r { --png-width-default: 17vw; }
  #png_t { --png-width-default: 20vw; }
  #png_at { --png-width-default: 23vw; }
  #png_g { --png-width-default: 18vw; }
  #png_u { --png-width-default: 26vw; }
  #png_m { --png-width-default: 20vw; }
  #png_o { --png-width-default: 21vw; }
  #png_ausrufezeichen { --png-width-default: 19vw; }

  /* ── Individuelle PNG-Positionen (Tablet) ──
     --x = horizontal (0% links → 100% rechts)
     --y = vertikal   (0% oben  → 100% unten)  */
  #png_Dicker_Magnet { --x: 80%; --y: 80%; }
  #png_Flacher_Magnet { --x: 50%; --y: 50%; }
  #png_Bild { --x: 37%; --y: 25%; }
  #png_postit { --x: 22%; --y: 40%; }
  #png_ { --x: 67%; --y: 35%; }
  #png_i { --x: 74%; --y: 32%; }
  #png_a { --x: 75%; --y: 3%; }
  #png_r { --x: 8%;  --y: 15%; }
  #png_t { --x: 70%; --y: 95%; }
  #png_at { --x: 89%; --y: 33%; }
  #png_g { --x: 12%; --y: 82%; }
  #png_u { --x: 22%; --y: 82%; }
  #png_m { --x: 33%; --y: 82%; }
  #png_o { --x: 45%; --y: 80%; }
  #png_ausrufezeichen { --x: 78%; --y: 31%; }

}


/* ────────────────────────────────────────────────────────────
   MOBILE  (≤ 640px)
   ──────────────────────────────────────────────────────────── */
@media (max-width: 780px) {

  /* Globale Typografie & Abstände auf Mobile */
  :root {
    --font-size-name: clamp(1.6rem, 8vw, 3rem);
    --font-size-tags: clamp(0.7rem, 3vw, 1rem);
    --spacing-email: 14px;
    --png-width-default: 30vw;
    --png-width-min: 55px;
    --png-width-max: 140px;
    --png-scale: 0.18;
  }
  .hero-tags .sep {
    display: none;
  }

  .png-item {
  transform: translate(-50%, -50%) scale(var(--png-scale));
}

  .png-item:active,
  .png-item.is-dragging {
    filter: none;
  }

  /* ── Individuelle PNG-Größen (Mobile) ── 
  #png_Dicker_Magnet { --png-width-default: 35vw; }
  #png_Flacher_Magnet { --png-width-default: 28vw; }
  #png_Bild { --png-width-default: 32vw; }
  #png_postit { --png-width-default: 30vw; }
  #png_png_h { --png-width-default: 27vw; }
  #png_i { --png-width-default: 34vw; }
  #png_a { --png-width-default: 31vw; }
  #png_r { --png-width-default: 26vw; }
  #png_t { --png-width-default: 29vw; }
  #png_at { --png-width-default: 33vw; }
  #png_g { --png-width-default: 27vw; }
  #png_u { --png-width-default: 36vw; }
  #png_m { --png-width-default: 28vw; }
  #png_o { --png-width-default: 30vw; }
  #png_ausrufezeichen { --png-width-default: 26vw; }

  /* ── Individuelle PNG-Positionen (Mobile) ──
     --x = horizontal (0% links → 100% rechts)
     --y = vertikal   (0% oben  → 100% unten)  */
  #png_Dicker_Magnet { --x: 95%; --y: 80%; }
  #png_Flacher_Magnet { --x: 50%; --y: 50%; }
  #png_Bild { --x: 37%; --y: 22%; }
  #png_Postit { --x: 22%; --y: 40%; }
  #png_h { --x: 72%; --y: 35%; }
  #png_i { --x: 84%; --y: 32%; }
  #png_a { --x: 75%; --y: 3%; }
  #png_r { --x: 8%;  --y: 15%; }
  #png_t { --x: 70%; --y: 100%; }
  #png_at { --x: 105%; --y: 55%; }
  #png_g { --x: -5%; --y: 82%; }
  #png_u { --x: 12%; --y: 82%; }
  #png_m { --x: 32%; --y: 82%; }
  #png_o { --x: 52%; --y: 80%; }
  #png_ausrufezeichen { --x: 92%; --y: 31%; }

}