/* ==========================================================
   Ilg Treuhand & Finanzen – Baustellenseite
   Konzept: Die Seite ist die Visitenkarte – links die weisse
   Vorderseite mit allen Angaben, rechts die bordeauxfarbene
   Rückseite mit dem Monogramm.
   ========================================================== */

@font-face {
  font-family: "Jost";
  src: url("fonts/jost-latin-300-normal.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("fonts/jost-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bordeaux: #69151e;
  --bordeaux-deep: #4d0f16;
  --grau: #6e6e6e;
  --grau-hell: #d8d4d4;
  --papier: #ffffff;

  --font: "Jost", "Avenir Next", "Avenir", "Century Gothic", "Segoe UI", sans-serif;

  /* Typo-Skala (Faktor ~1.25) */
  --fs-small: 0.8125rem;
  --fs-base: 1.0625rem;
  --fs-name: 1.375rem;
  --fs-status: clamp(1.75rem, 1.2rem + 1.9vw, 2.75rem);

  --pad: clamp(1.75rem, 1rem + 4vw, 5.5rem);
}

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

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--grau);
  font-family: var(--font);
  font-weight: 300;
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

p, h1, address { margin: 0; }
address { font-style: normal; }

/* ---------- Grundraster ---------- */

.page {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  min-height: 100vh;
  min-height: 100svh;
}

/* ---------- Vorderseite ---------- */

.card {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 6vh, 5rem);
  padding: var(--pad);
}

.logo {
  display: block;
  width: clamp(180px, 22vw, 260px);
  height: auto;
}

.card__body {
  margin-block: auto;
  max-width: 34rem;
}

.status {
  color: var(--bordeaux);
  font-weight: 300;
  font-size: var(--fs-status);
  line-height: 1.15;
  letter-spacing: -0.005em;
  max-width: 16ch;
}

.status__sub {
  margin-top: 1rem;
  max-width: 38ch;
}

/* Name und Titel wie auf der Visitenkarte */
.person {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--grau-hell);
}

.person__name {
  color: var(--bordeaux);
  font-weight: 400;
  font-size: var(--fs-name);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.2;
}

.person__title {
  margin-top: 0.4rem;
}

.contact {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 1.5rem 3rem;
  margin-top: 1.75rem;
}

.contact a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--bordeaux), var(--bordeaux));
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: color .2s ease, background-size .25s ease;
}

.contact a:hover {
  color: var(--bordeaux);
  background-size: 100% 1px;
}

.contact a:focus-visible {
  outline: 2px solid var(--bordeaux);
  outline-offset: 3px;
  border-radius: 2px;
  color: var(--bordeaux);
}

.card__foot {
  font-size: var(--fs-small);
  color: #8a8a8a;
}

/* ---------- Rückseite ---------- */

.reverse {
  position: relative;
  overflow: hidden;
  background: var(--bordeaux);
}

/* das Monogramm, gross und an den Rand angeschnitten */
.monogram {
  position: absolute;
  right: -6%;
  bottom: -9%;
  height: 92%;
  width: auto;
  fill: var(--papier);
  animation: rise 1.6s cubic-bezier(.2, .7, .2, 1) .15s both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(4%); }
  to   { opacity: 1; transform: none; }
}

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

/* ---------- Tablet ---------- */

@media (max-width: 960px) {
  .page { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .contact { grid-template-columns: 1fr; gap: 1.25rem; }
  .monogram { width: 110%; height: auto; right: -14%; bottom: -6%; }
}

/* ---------- Mobile: Vorderseite oben, Rückseite als Abschluss ---------- */

@media (max-width: 640px) {
  .page {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .card { gap: 3rem; }

  .reverse {
    height: 15rem;
  }

  .monogram {
    width: auto;
    height: 120%;
    right: 10%;
    bottom: -30%;
  }
}

@media print {
  .reverse { display: none; }
  .page { display: block; }
}