/* Stuttgart Kinder — Platzhalterseite. Tokens aus dem Design-System (stg002-kinder-website). */
@font-face {
  font-family: "Merriweather Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/merriweather-sans-v28-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Merriweather Sans";
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url("assets/fonts/merriweather-sans-v28-latin-800.woff2") format("woff2");
}
:root {
  --color-blue: #000f68;
  --color-blue-hover: #001bba;
  --color-yellow: #fffb6e;
  --side-pad: clamp(24px, 8vw, 120px);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #000;
  font-family: "Merriweather Sans", sans-serif;
  line-height: 1.5;
}
a { color: var(--color-blue); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--color-blue-hover); }

header { padding: clamp(16px, 3vh, 40px) var(--side-pad) 0; flex-shrink: 0; }
.logo { display: block; width: 219px; height: 45px; }

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vh, 32px);
  padding: clamp(16px, 3vh, 40px) var(--side-pad);
}
.text { max-width: 560px; display: flex; flex-direction: column; gap: clamp(12px, 2vh, 24px); }
h1 {
  margin: 0;
  font-size: clamp(40px, 6.5vw, 96px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-blue);
}
p { margin: 0; font-size: 18px; text-wrap: pretty; }
.lead { font-size: clamp(18px, 1.5vw, 24px); font-weight: 700; line-height: 1.6; }
.highlight {
  background: var(--color-yellow);
  padding: 4px 10px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.illo { width: min(100%, 480px, max(180px, calc((100svh - 540px) * 1.1786))); }
.illo img { display: block; width: 100%; height: auto; }

footer {
  flex-shrink: 0;
  display: flex;
  gap: 32px;
  padding: clamp(12px, 2vh, 24px) var(--side-pad) clamp(16px, 3vh, 32px);
  font-size: clamp(14px, 1vw, 16px);
}

@media (min-width: 1000px), (min-width: 700px) and (max-height: 700px) {
  main {
    display: grid;
    grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
    justify-content: center;
    align-items: center;
    gap: clamp(32px, 4vw, 64px);
  }
  .illo {
    width: min(100%, 660px, calc((100svh - 300px) * 1.1786));
    justify-self: center;
  }
}