/* echotec.de – Under-Construction-Seite
   Schrift: Sansation (SIL OFL 1.1), lokal eingebunden, keine externen Ressourcen */

@font-face {
  font-family: "Sansation";
  src: url("fonts/Sansation-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sansation";
  src: url("fonts/Sansation-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sansation";
  src: url("fonts/Sansation-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --grau-950: #14181b;
  --grau-900: #1c2125;
  --grau-800: #272e33;
  --grau-600: #4a555d;
  --petrol: #138a94;
  --petrol-hell: #3cc3cf;
  --blau: #3d8fd6;
  --weiss: #f3f7f8;
  --weiss-gedimmt: #b9c5ca;
  --radius: 18px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { color-scheme: dark; }

body {
  font-family: "Sansation", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  line-height: 1.6;
  color: var(--weiss);
  background:
    radial-gradient(1100px 700px at 12% -10%, rgba(19, 138, 148, .28), transparent 60%),
    radial-gradient(900px 600px at 105% 110%, rgba(61, 143, 214, .22), transparent 60%),
    linear-gradient(160deg, var(--grau-900), var(--grau-950));
  background-attachment: fixed;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

a { color: var(--petrol-hell); text-underline-offset: 3px; }
a:hover, a:focus-visible { color: var(--weiss); }
:focus-visible { outline: 2px solid var(--petrol-hell); outline-offset: 3px; border-radius: 4px; }

/* Echo-Ringe im Hintergrund */
.echo {
  position: fixed;
  top: 28%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 0;
}
.echo span {
  position: absolute;
  left: 0;
  top: 0;
  width: 120vmin;
  height: 120vmin;
  margin: -60vmin 0 0 -60vmin;
  border-radius: 50%;
  border: 1.5px solid var(--petrol);
  opacity: 0;
  transform: scale(.08);
  animation: echo 9s cubic-bezier(.2, .6, .3, 1) infinite;
}
.echo span:nth-child(2) { animation-delay: 3s; border-color: var(--blau); }
.echo span:nth-child(3) { animation-delay: 6s; }

@keyframes echo {
  0%   { transform: scale(.08); opacity: .55; }
  80%  { opacity: .06; }
  100% { transform: scale(1);   opacity: 0; }
}

main, header, footer { position: relative; z-index: 1; }

header {
  padding: 28px 16px 0;
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--weiss);
  text-decoration: none;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.logo svg { width: 38px; height: 38px; flex: none; }
.logo .tld { font-weight: 300; color: var(--petrol-hell); }

main {
  flex: 1;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding: 8vh 16px 48px;
}

.kicker {
  display: inline-block;
  font-size: .85rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--petrol-hell);
  border: 1px solid rgba(60, 195, 207, .4);
  border-radius: 999px;
  padding: 6px 16px;
  margin-bottom: 22px;
}

h1 {
  font-size: clamp(2.2rem, 7vw, 4.2rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: 18px;
}
h1 em {
  font-style: normal;
  background: linear-gradient(90deg, var(--petrol-hell), var(--blau));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead {
  font-size: clamp(1.05rem, 2.6vw, 1.3rem);
  font-weight: 300;
  color: var(--weiss-gedimmt);
  max-width: 34em;
  margin-bottom: 44px;
}

.kontakt {
  background: linear-gradient(180deg, rgba(39, 46, 51, .85), rgba(28, 33, 37, .85));
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius);
  padding: clamp(22px, 4vw, 36px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
  position: relative;
  overflow: hidden;
}
.kontakt::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--petrol), var(--blau));
}
.kontakt h2 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--weiss-gedimmt);
  margin-bottom: 22px;
}

.kontakt dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px 40px;
}
@media (min-width: 640px) {
  .kontakt dl { grid-template-columns: repeat(2, 1fr); }
}
.kontakt dt {
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--petrol-hell);
  margin-bottom: 4px;
}
.kontakt dd { font-size: 1.15rem; font-style: normal; word-break: break-word; }
.kontakt address { font-style: normal; }
.kontakt dd a { text-decoration: none; border-bottom: 1px solid rgba(60, 195, 207, .45); }
.kontakt dd a:hover { border-bottom-color: var(--weiss); }

/* Nebenspiele */
.spiele { margin-top: 56px; }
.spiele h2 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--weiss-gedimmt);
  margin-bottom: 6px;
}
.spiele-lead { color: var(--weiss-gedimmt); font-weight: 300; margin-bottom: 20px; }
.spiele-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.spiel {
  display: flex;
  flex-direction: column;
  color: var(--weiss);
  text-decoration: none;
  background: linear-gradient(180deg, rgba(39, 46, 51, .85), rgba(28, 33, 37, .85));
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease;
}
.spiel:hover, .spiel:focus-visible { transform: translateY(-3px); border-color: var(--petrol-hell); color: var(--weiss); }
.spiel img { display: block; width: 100%; height: auto; aspect-ratio: 640 / 471; object-fit: cover; background: var(--grau-950); }
.spiel-text { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
.spiel-text strong { font-size: 1.25rem; }
.spiel-text span { color: var(--weiss-gedimmt); font-weight: 300; }
.spiel[href^="plopp"] img { image-rendering: pixelated; }
.spiel-text .los { color: var(--petrol-hell); font-weight: 700; margin-top: 4px; }

footer {
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
  padding: 22px 16px 28px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  font-size: .9rem;
  color: var(--weiss-gedimmt);
}
footer nav { display: flex; gap: 20px; }
footer a { color: var(--weiss-gedimmt); }
footer a:hover { color: var(--weiss); }

/* Rechtstexte */
.text h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); margin-bottom: 28px; }
.text h2 { font-size: 1.25rem; margin: 32px 0 8px; color: var(--petrol-hell); }
.text p, .text li { color: var(--weiss-gedimmt); margin-bottom: 10px; max-width: 46em; }
.text ul { padding-left: 1.3em; margin-bottom: 10px; }
.text strong { color: var(--weiss); font-weight: 700; }
.text address { font-style: normal; color: var(--weiss); margin-bottom: 10px; }

@media (prefers-reduced-motion: reduce) {
  .echo span { animation: none; opacity: .08; transform: scale(.5); }
  .echo span:nth-child(2) { transform: scale(.75); }
  .echo span:nth-child(3) { transform: scale(1); }
}