/* ===========================================================
   RobotSpaceDog – Stylesheet
   Farben und Größen zentral hier anpassbar
   =========================================================== */

:root {
  --color-bg: #B96BD9;
  --color-text: #ffffff;
  --color-muted: rgba(255, 255, 255, 0.78);
  --font-body: 'Quantico', 'Helvetica Neue', Arial, sans-serif;
  --content-max: 720px;
  --side-padding: 6vw;
}

/* quantico-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Quantico';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/quantico-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* quantico-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Quantico';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/quantico-v19-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

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

html, body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-text); }
a:hover { opacity: 0.85; }

/* ===== STARTSEITE ===== */

.home {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4vh var(--side-padding) 6vh;
}

.logo-wrap {
  position: relative;
  width: 100%;
  max-width: 900px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.logo-wordmark {
  width: 70%;
  max-width: 700px;
  height: auto;
  display: block;
}

.logo-dog {
  position: absolute;
  right: 2%;
  bottom: -4%;
  width: 17%;
  max-width: 170px;
  height: auto;
}

.home-mail {
  margin-top: 8vh;
  font-size: 16px;
  letter-spacing: 0.02em;
}

.home-mail a {
  color: var(--color-muted);
  text-decoration: none;
}
.home-mail a:hover { color: var(--color-text); }

.footer-link {
  position: fixed;
  bottom: 16px;
  right: 24px;
  font-size: 12px;
  color: var(--color-muted);
  text-decoration: none;
  letter-spacing: 0.05em;
}
.footer-link:hover { color: var(--color-text); }

/* ===== UNTERSEITEN ===== */

.page {
  min-height: 100vh;
  padding: 8vh var(--side-padding) 12vh;
  display: flex;
  justify-content: center;
}

.page-content {
  width: 100%;
  max-width: var(--content-max);
  font-size: 12pt;
  line-height: 1.6;
}

.page-content h1 {
  font-size: 16pt;
  font-weight: 700;
  margin-bottom: 1.2em;
}

.page-content h2 {
  font-size: 16pt;
  font-weight: 700;
  margin-top: 1.8em;
  margin-bottom: 0.6em;
}

.page-content h3 {
  font-size: 16pt;
  font-weight: 600;
  margin-top: 1.4em;
  margin-bottom: 0.4em;
}

.page-content p { margin-bottom: 1em; }
.page-content .block { margin-bottom: 1.4em; }

.back-link {
  display: inline-block;
  margin-top: 3em;
  font-size: 14pt;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-muted);
  padding-bottom: 2px;
}
.back-link:hover { border-bottom-color: var(--color-text); }

/* ===== RESPONSIVE ===== */

@media (max-width: 720px) {
  .logo-wordmark { width: 85%; }
  .logo-dog { width: 22%; right: 2%; }
  .page-content { font-size: 14pt; }
  .page-content h1 { font-size: 24pt; }
  .page-content h2,
  .page-content h3 { font-size: 18pt; }
}