/* =============================================================================
   PARTANUM — COMING SOON
   Eine einzelne, eigenständige Seite. Sie teilt sich NICHTS mit der grossen
   Website: eigener Ordner, eigene Schriften, eigenes Stylesheet, kein
   JavaScript. Hochladen und fertig.

   Aufbau:
     0) Schriften
     1) Tokens — die einzige Stelle mit Werten
     2) Grundlagen (Reset, Grundschrift, Fokus)
     3) Die Seite
     4) Druck

   Farben und Schriftgrössen sind dieselben wie auf der Website, damit die
   Baustellenseite nicht fremd wirkt.
   ============================================================================= */


/* =============================================================================
   0) SCHRIFTEN
   Vier Schnitte, alle in Assets/fonts/ (woff2 mit woff als Rückfall).
   ============================================================================= */

@font-face {
  font-family: "PP Monument Normal";
  src: url("../Assets/fonts/PPMonumentNormal-Regular.woff2") format("woff2"),
       url("../Assets/fonts/PPMonumentNormal-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PP Monument Wide";
  src: url("../Assets/fonts/PPMonumentWide-Regular.woff2") format("woff2"),
       url("../Assets/fonts/PPMonumentWide-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PP Monument Wide";
  src: url("../Assets/fonts/PPMonumentWide-Black.woff2") format("woff2"),
       url("../Assets/fonts/PPMonumentWide-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Der Dateiname enthält Leerzeichen, daher %20 in der Adresse. */
@font-face {
  font-family: "GT Pressura Mono";
  src: url("../Assets/fonts/GT%20Pressura%20Mono%20Regular%20Regular.woff2") format("woff2"),
       url("../Assets/fonts/GT%20Pressura%20Mono%20Regular%20Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* =============================================================================
   1) TOKENS
   Für Änderungen reicht dieser Block.
   ============================================================================= */

:root {
  /* Farben — dieselben Werte wie auf der Website */
  --primary: #313c44;                    /* dunkler Grund */
  --paper: #eeeae7;                      /* Schrift auf dunklem Grund */
  --accent: #ff7057;                     /* Signalfarbe: Linien und Flächen */
  --accent-text: #ff8570;                /* aufgehellt für TEXT auf Dunkel, 4.75:1 */
  --paper-muted: rgb(238 234 231 / 0.66);/* ruhigere Zweitzeile, 6.6:1 */

  /* Schriften */
  --font-primary: "PP Monument Normal", "Helvetica Neue", Arial, sans-serif;
  --font-heading: "PP Monument Wide", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "GT Pressura Mono", ui-monospace, "SFMono-Regular", Menlo,
               Consolas, monospace;

  /* Schriftgrössen: klein → gross, mit der Fensterbreite */
  --text-xs: clamp(0.75rem, 0.7rem    + 0.25vw, 0.9375rem);  /* 12 → 15 */
  --text-m:  clamp(1rem,    0.9775rem + 0.09vw, 1.0625rem);  /* 16 → 17 */
  --text-l:  clamp(1.125rem, 1.02rem  + 0.53vw, 1.375rem);   /* 18 → 22 */
  --h1:      clamp(2.5rem,  0.9rem    + 8vw,    5rem);       /* 40 → 80 */

  --lh-base: 1.462;
  --lh-heading: 1.1;

  /* Abstände */
  --space-2xs: clamp(0.25rem, 0.21875rem + 0.25vw, 0.375rem);  /*  4 →  6 */
  --space-xs:  clamp(0.5rem,  0.4375rem  + 0.5vw,  0.75rem);   /*  8 → 12 */
  --space-s:   clamp(1rem,    0.875rem   + 1vw,    1.5rem);    /* 16 → 24 */
  --space-m:   clamp(1.5rem,  1.25rem    + 2vw,    2.5rem);    /* 24 → 40 */
  --space-l:   clamp(2.5rem,  2rem       + 4vw,    4.5rem);    /* 40 → 72 */
  --space-xl:  clamp(4rem,    3.125rem   + 7vw,    7.5rem);    /* 64 → 120 */

  --gutter: clamp(1.25rem, -1.8375rem + 9.88vw, 7.5rem);       /* 20 → 120 */
  --content-width: 75rem;                                      /* 1200px */

  --tap-target: 2.75rem;                 /* 44px, WCAG 2.5.8 */
  --focus-width: 3px;
  --focus-offset: 2px;
  --duration: 150ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}


/* =============================================================================
   2) GRUNDLAGEN
   ============================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-block-size: 100svh;
  display: flex;
  flex-direction: column;
  background-color: var(--primary);
  color: var(--paper);
  font-family: var(--font-primary);
  font-size: var(--text-m);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-inline-size: 100%; block-size: auto; }

p { margin: 0; text-wrap: pretty; }

a { color: inherit; }

/* Sichtbarer Fokus für Tastaturnutzer (WCAG 2.4.7). */
:focus-visible {
  outline: var(--focus-width) solid var(--paper);
  outline-offset: var(--focus-offset);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}


/* =============================================================================
   3) DIE SEITE
   Drei Blöcke untereinander: Logo, Aussage, Kontakt. Der mittlere Block
   nimmt den freien Platz, dadurch sitzt die Aussage auf jedem Schirm ruhig
   in der Mitte und der Kontakt steht unten.
   ============================================================================= */

.page {
  inline-size: 100%;
  max-inline-size: var(--content-width);
  margin-inline: auto;
  padding: var(--space-l) var(--gutter);
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* --- Logo ------------------------------------------------------------------ */
.page__logo {
  flex: 0 0 auto;
}

.page__logo img {
  inline-size: clamp(7.75rem, 13vw, 11.5rem);           /* 124 → 184 */
}

/* --- Aussage ---------------------------------------------------------------
   Die Abstände stehen hier als eigene Werte statt als gemeinsames gap:
   über der Aussage darf es luftig sein, darunter ist es enger.            */
.intro {
  margin-block: var(--space-xl) var(--space-l);
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-s);
}

.intro__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.intro__title {
  margin: 0;
  max-inline-size: 20ch;
  font-family: var(--font-heading);
  font-size: var(--h1);
  font-weight: 900;
  line-height: var(--lh-heading);
  text-wrap: balance;
}

.intro__text {
  max-inline-size: 46ch;
  font-size: var(--text-l);
  color: var(--paper-muted);
}

/* --- Kontakt ---------------------------------------------------------------
   Zwei Spalten ab 768px, darunter untereinander. Die Beschriftungen stehen
   in der Schreibmaschinenschrift, die Werte gross daneben.                  */
.contact {
  flex: 0 0 auto;
  display: grid;
  gap: var(--space-m);
  padding-block-start: var(--space-m);
  border-block-start: 1px solid rgb(238 234 231 / 0.2);
}

@media (width >= 48em) {
  .contact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-l);
  }
}

.contact__item {
  min-inline-size: 0;
  display: grid;
  gap: var(--space-2xs);
}

.contact__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-muted);
}

.contact__value {
  font-family: var(--font-heading);
  font-size: var(--text-l);
  font-weight: 400;
  line-height: var(--lh-heading);
  overflow-wrap: anywhere;                              /* lange Adresse darf umbrechen */
}

/* Links: mindestens 44px hohe Zielfläche, Unterstrich in der Signalfarbe. */
.contact__value a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-target);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: color var(--duration) var(--ease);
}

.contact__value a:hover {
  color: var(--accent-text);
}

.contact__address {
  font-style: normal;                                   /* <address> kursiviert sonst */
}


/* =============================================================================
   4) DRUCK
   ============================================================================= */

@media print {
  body { background: #fff; color: #000; }
  .contact__value a { color: #000; text-decoration-color: #000; }
}