/* ------------------------------------------------------
   SZENE UERDINGEN – TEMPORÄRE STARTSEITE
   ------------------------------------------------------ */

/*
   Die Datei DarkDistance.otf muss im Ordner "fonts"
   liegen:

   /index.html
   /styles.css
   /szene-uerdingen.jpg
   /fonts/DarkDistance.otf
*/

@font-face {
  font-family: "Dark Distance";
  src: url("fonts/DarkDistance.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}


/* ------------------------------------------------------
   GRUNDEINSTELLUNGEN
   ------------------------------------------------------ */

:root {
  --text-color: #ffffff;
  --icon-size: 34px;
  --icon-gap: 22px;

  /* Abdunklung des Hintergrundbildes
     0 = keine Abdunklung
     1 = komplett schwarz */
  --overlay-strength: 0.38;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100svh;
  overflow-x: hidden;
  background-color: #080b0e;
}


/* ------------------------------------------------------
   HINTERGRUND
   ------------------------------------------------------ */

.coming-soon {
  position: relative;

  width: 100%;
  min-height: 100svh;

  display: grid;
  place-items: center;

  isolation: isolate;

  background-image: url("szene-uerdingen.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}


/* ------------------------------------------------------
   DUNKLES OVERLAY ÜBER DEM BILD
   ------------------------------------------------------ */

.overlay {
  position: absolute;
  inset: 0;
  z-index: -1;

  background: linear-gradient(
    rgba(0, 0, 0, var(--overlay-strength)),
    rgba(0, 0, 0, var(--overlay-strength))
  );
}


/* ------------------------------------------------------
   INHALT
   ------------------------------------------------------ */

.content {
  width: min(92%, 1200px);

  padding: 40px 20px;

  text-align: center;
  color: var(--text-color);
}


/* ------------------------------------------------------
   SCHRIFTZUG "SZENE UERDINGEN"
   ------------------------------------------------------ */

h1 {
  margin: 0;

  font-family:
    "Dark Distance",
    Impact,
    Haettenschweiler,
    "Arial Narrow Bold",
    sans-serif;

  font-size: clamp(4rem, 11vw, 10rem);

  font-weight: 400;

  /* Abstand zwischen SZENE und UERDINGEN */
  line-height: 1.07;

  letter-spacing: 0.015em;

  color: #ffffff;

  /* Schatten für bessere Lesbarkeit */
  text-shadow:
    0 3px 18px rgba(0, 0, 0, 0.85);
}


/* ------------------------------------------------------
   SOCIAL MEDIA
   ------------------------------------------------------ */

.social-links {
  display: flex;

  justify-content: center;
  align-items: center;

  gap: var(--icon-gap);

  margin-top: clamp(28px, 5vw, 52px);
}

.social-links a {
  display: grid;
  place-items: center;

  width: 52px;
  height: 52px;

  color: var(--text-color);

  text-decoration: none;

  opacity: 0.95;

  transition:
    transform 180ms ease,
    opacity 180ms ease;
}


/* Hover-Effekt */

.social-links a:hover,
.social-links a:focus-visible {
  transform: translateY(-3px) scale(1.06);
  opacity: 1;
}


/* Tastatur-Navigation */

.social-links a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
  border-radius: 4px;
}


/* Instagram */

.social-links svg {
  width: var(--icon-size);
  height: var(--icon-size);

  fill: none;
  stroke: currentColor;

  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Facebook */

.social-links a:last-child svg {
  fill: currentColor;
  stroke: none;
}


/* ------------------------------------------------------
   TABLET
   ------------------------------------------------------ */

@media (max-width: 900px) {

  .content {
    padding-inline: 24px;
  }

}


/* ------------------------------------------------------
   SMARTPHONE
   ------------------------------------------------------ */

@media (max-width: 600px) {

  :root {
    --icon-size: 30px;
    --icon-gap: 16px;
  }

  .content {
    width: 100%;
    padding: 32px 18px;
  }

  h1 {
    /*
      Vorher:
      clamp(3.3rem, 18vw, 6rem)

      Jetzt ca. 10 % kleiner:
    */
    font-size: clamp(3rem, 16.2vw, 5.4rem);

    line-height: 1.07;
    letter-spacing: 0.015em;

    color: #ffffff;

    /* Gleicher Schatten wie Desktop */
    text-shadow:
      0 3px 18px rgba(0, 0, 0, 0.85);
  }

  .social-links {
    margin-top: 28px;
  }

  .social-links a {
    width: 48px;
    height: 48px;
  }

}


/* ------------------------------------------------------
   SEHR KLEINE SMARTPHONES
   ------------------------------------------------------ */

@media (max-width: 360px) {

  h1 {
    /* Ebenfalls ca. 10 % kleiner */
    font-size: 2.7rem;

    line-height: 1.07;
    letter-spacing: 0.015em;

    color: #ffffff;

    /* Gleicher Schatten wie Desktop */
    text-shadow:
      0 3px 18px rgba(0, 0, 0, 0.85);
  }

}


/* ------------------------------------------------------
   BARRIEREFREIHEIT
   ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

  .social-links a {
    transition: none;
  }

}