/* ============================================================
   Heyd.Tech – Portal-Startseite
   Schriften: lokal eingebunden aus /code/fonts (keine Google Fonts)
   ============================================================ */

@font-face{
  font-family: "Rubik";
  src: url("../fonts/rubik-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Rubik";
  src: url("../fonts/rubik-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face{
  font-family: "Rubik";
  src: url("../fonts/rubik-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Rubik";
  src: url("../fonts/rubik-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Anton";
  src: url("../fonts/anton-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Press Start 2P";
  src: url("../fonts/press-start-2p-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg: #eef1f5;
  --card: #ffffff;
  --ink: #1a2230;
  --ink-soft: #5b6675;
  --line: #dde3ea;
  /* Markenfarben (Akzent pro Kachel) */
  --c-ostfriesland: #d9a13b; /* Blitz / warmes Gold */
  --c-arcade:       #d94fa6; /* Neon-Pink */
  --c-heydtec:      #2f7de1; /* Technik-Blau */
  --c-gameareas:    #3cb26a; /* Spielfeld-Grün */
  --radius: 22px;
}
*{ box-sizing: border-box; margin: 0; padding: 0; }
html,body{ height: 100%; }
body{
  font-family: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  background:
    radial-gradient(1100px 600px at 15% -10%, #ffffff 0%, transparent 60%),
    radial-gradient(900px 600px at 110% 110%, #e2e8f0 0%, transparent 55%),
    var(--bg);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh; /* berücksichtigt die Adressleiste mobiler Browser */
  padding: 40px 20px;
}

header{ text-align: center; margin-bottom: 40px; }
header h1{
  font-family: "Anton", "Rubik", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(1.6rem, 3.8vw, 2.4rem);
}
header p{
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: clamp(0.95rem, 2vw, 1.05rem);
  font-weight: 500;
}

.grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 380px));
  gap: 24px;
  width: 100%;
  max-width: 820px;
  justify-content: center;
}

.tile{
  --accent: var(--ink);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  padding: 28px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(20,30,45,.05);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  opacity: 0;
  transform: translateY(14px);
  animation: rise .5s ease forwards;
}
.tile:nth-child(1){ --accent: var(--c-ostfriesland); animation-delay: .05s; }
.tile:nth-child(2){ --accent: var(--c-arcade);       animation-delay: .12s; }
.tile:nth-child(3){ --accent: var(--c-heydtec);      animation-delay: .19s; }
.tile:nth-child(4){ --accent: var(--c-gameareas);    animation-delay: .26s; }

@keyframes rise{ to{ opacity: 1; transform: translateY(0); } }

.tile:hover,
.tile:focus-visible{
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow:
    0 10px 28px rgba(20,30,45,.10),
    0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.tile:focus-visible{ outline: none; }

/* Logo-Bild: Datei liegt im Ordner "logos" (Dateinamen siehe HTML).
   Solange kein Logo vorhanden ist, wird automatisch der Textplatzhalter angezeigt. */
.tile img{
  max-width: 78%;
  max-height: 55%;
  object-fit: contain;
}
.tile .fallback{ display: none; text-align: center; }
.tile.no-logo img{ display: none; }
.tile.no-logo .fallback{ display: block; }

.fallback .mark{
  display: block;
  font-family: "Rubik", sans-serif;
  font-weight: 700;
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  letter-spacing: -0.01em;
  color: var(--accent);
}
.fallback .sub{
  display: block;
  margin-top: 6px;
  font-size: .85rem;
  color: var(--ink-soft);
}

/* Kleiner thematischer Akzent: Arcade-Fotobox erhält den Pixel-Font */
.tile:nth-child(2) .fallback .mark{
  font-family: "Press Start 2P", "Rubik", sans-serif;
  font-weight: 400;
  font-size: clamp(.72rem, 2vw, .92rem);
  line-height: 1.6;
}

.tile .url{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .85rem;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color .25s ease;
}
.tile .url svg{
  width: 14px; height: 14px;
  transition: transform .25s ease;
}
.tile:hover .url,
.tile:focus-visible .url{ color: var(--accent); }
.tile:hover .url svg,
.tile:focus-visible .url svg{ transform: translateX(3px); }

footer{
  margin-top: 44px;
  font-size: .8rem;
  color: var(--ink-soft);
  text-align: center;
}
footer a{ color: inherit; }

/* Mobil: 2x2-Raster bleibt erhalten (links oben, rechts oben, links unten, rechts unten),
   nur kompakter – so passt alles ohne Scrollen auf einen Smartphone-Bildschirm */
@media (max-width: 640px){
  body{ padding: 24px 14px; }
  header{ margin-bottom: 22px; }
  header p{ font-size: .88rem; }
  .grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    max-width: 460px;
  }
  .tile{
    aspect-ratio: 1 / 1.05;
    padding: 14px 10px;
    gap: 10px;
    border-radius: 16px;
  }
  .tile img{ max-width: 86%; max-height: 48%; }
  .fallback .mark{
    font-size: .95rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  .tile:nth-child(2) .fallback .mark{ font-size: .68rem; line-height: 1.5; }
  .fallback .sub{ margin-top: 4px; font-size: .72rem; }
  .tile .url{
    font-size: .68rem;
    text-align: center;
    overflow-wrap: anywhere;
  }
  .tile .url svg{ width: 11px; height: 11px; flex-shrink: 0; }
  footer{ margin-top: 24px; }
}

/* Sehr schmale Geräte: Web-Adresse ausblenden, damit nichts überläuft */
@media (max-width: 350px){
  .tile .url{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .tile{ animation: none; opacity: 1; transform: none; transition: none; }
  .tile .url svg{ transition: none; }
}