/* ==========================================================================
   soon.css – Platzhalterseiten "Diese Seite befindet sich im Aufbau"
   Eigenständig, damit die Platzhalter nicht an style.css hängen.
   Farben und Typo entsprechen den Tokens aus style.css.
   ========================================================================== */

:root {
  --navy-900: #081729;
  --navy: #0F2544;
  --blue: #0B63D6;
  --blue-dark: #0A54B4;
  --blue-soft: #E8F2FD;
  --white: #FFFFFF;
  --gray-100: #F1F1F3;
  --gray-200: #E5E6E9;
  --text-body: #45506A;
  --text-mute: #858FA5;
  --amber: #F2A33C;
  --font-display: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --r-pill: 999px;
}

* { box-sizing: border-box; }

body.soon {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(32px, 7vw, 72px) clamp(20px, 5vw, 40px);
  font-family: var(--font-body);
  color: var(--text-body);
  background:
    radial-gradient(900px 480px at 50% -10%, var(--blue-soft) 0%, rgba(232, 242, 253, 0) 65%),
    var(--white);
  -webkit-font-smoothing: antialiased;
}

.soon__skip {
  position: absolute;
  left: -9999px;
}
.soon__skip:focus {
  left: 16px; top: 16px;
  z-index: 10;
  padding: 10px 16px;
  background: var(--navy);
  color: #fff;
  border-radius: var(--r-pill);
  text-decoration: none;
}

.soon__wrap {
  width: 100%;
  max-width: 620px;
  text-align: center;
}

.soon__brand {
  display: inline-block;
  margin-bottom: clamp(24px, 5vw, 36px);
  transition: transform .25s ease;
}
.soon__brand:hover { transform: translateY(-2px); }
.soon__brand img { display: block; height: auto; }

.soon__kicker {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.soon__title {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-size: clamp(32px, 6vw, 46px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--navy);
  text-wrap: balance;
}

.soon__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  padding: 9px 18px 9px 14px;
  border: 1px solid var(--gray-200);
  border-radius: var(--r-pill);
  background: var(--white);
  box-shadow: 0 1px 2px rgba(15, 37, 68, .05), 0 2px 8px rgba(15, 37, 68, .04);
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--navy);
}

.soon__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 0 rgba(242, 163, 60, .55);
  animation: soonPulse 2s ease-out infinite;
}
@keyframes soonPulse {
  70%  { box-shadow: 0 0 0 9px rgba(242, 163, 60, 0); }
  100% { box-shadow: 0 0 0 0 rgba(242, 163, 60, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .soon__dot { animation: none; }
  .soon__brand { transition: none; }
}

.soon__lead {
  margin: 0 auto 30px;
  max-width: 50ch;
  font-size: 17px;
  line-height: 1.62;
  text-wrap: pretty;
}

.soon__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.soon__btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.soon__btn svg { width: 18px; height: 18px; flex: none; }
.soon__btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.soon__btn--primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 6px 18px rgba(11, 99, 214, .24);
}
.soon__btn--primary:hover {
  background: var(--blue-dark);
  transform: translateY(-1px);
}

.soon__btn--ghost {
  border: 1px solid var(--gray-200);
  background: var(--white);
  color: var(--navy);
}
.soon__btn--ghost:hover { border-color: var(--navy); }

.soon__back {
  margin: 28px 0 0;
  font-size: 15.5px;
  color: var(--text-mute);
}
.soon__back a {
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(11, 99, 214, .3);
  padding-bottom: 1px;
}
.soon__back a:hover { border-bottom-color: var(--blue); }

.soon__foot {
  margin-top: clamp(40px, 8vw, 64px);
  padding-top: 22px;
  border-top: 1px solid var(--gray-200);
  font-size: 14px;
  color: var(--text-mute);
}
.soon__foot p { margin: 0 0 4px; }
.soon__foot a { color: inherit; }

/* --------------------------------------------------------------------------
   Übersichtsseiten der Hauptmenüpunkte – zeigen, welche Seiten entstehen.
   -------------------------------------------------------------------------- */

.soon__wrap--breit { max-width: 760px; }

.soon__gruppe {
  margin: 26px 0 12px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.soon__liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}
/* Zwischen Gruppen eng, vor den Schaltflächen wieder Luft. */
.soon__gruppe + .soon__liste { margin-bottom: 4px; }
.soon__liste:last-of-type { margin-bottom: 30px; }

.soon__liste a {
  display: inline-block;
  padding: 9px 17px;
  border: 1px solid var(--gray-200);
  border-radius: var(--r-pill);
  background: var(--white);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.soon__liste a:hover {
  border-color: var(--blue);
  color: var(--blue);
  transform: translateY(-1px);
}
.soon__liste a:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .soon__liste a { transition: none; }
}

/* Kein Wort steht allein ------------------------------------------------
   Bleibt in der letzten Zeile eines Absatzes ein einzelnes Wort übrig,
   wirkt der Satz unruhig. Drei Schichten verhindern das:
   1. text-wrap: pretty – der Browser zieht von sich aus ein Wort herunter.
   2. Die geschützten Leerzeichen, die tools/witwen.py zwischen die letzten
      beiden Wörter setzt. Sie wirken auch dort, wo pretty noch fehlt.
   3. overflow-wrap als Netz: Sollte so ein Paar einmal breiter sein als
      seine Spalte, bricht es um, statt über den Rand zu laufen. */
p, li, dd, dt, blockquote, figcaption, address,
.lede, .claim, .svc__text, .tile__hint {
  text-wrap: pretty;
  overflow-wrap: break-word;
}

/* Überschriften bleiben bei text-wrap: balance (siehe oben), brauchen das
   Netz gegen Überlauf aber genauso: Ein geschütztes Paar, das breiter ist
   als seine Spalte, soll umbrechen statt über den Rand zu laufen. */
h1, h2, h3, h4 { overflow-wrap: break-word; }