/* ==========================================================================
   CHULA MANAGEMENT – Web-Visitenkarte
   ========================================================================== */

/* --- Schrift: Montserrat, lokal gehostet (DSGVO-konform) ----------------- */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Design-Tokens ------------------------------------------------------- */
:root {
  --bg: #000000;
  --fg: #ffffff;
  --accent: #d378ef;
  --accent-hover: #e298ff;
  --rule: #d378ef;
  --content: 664px;

  /* --k  = Schriftskala: folgt der Breite, im Querformat zusätzlich der Höhe,
           damit die Karte auf einen Blick auf den Bildschirm passt.
     --sp = Einheit für alle senkrechten Abstände (gleiche Logik).          */
  --k: 1vw;
  --sp: 1rem;

  /* Fluide Typo: Mobil -> Desktop (Maximum = Entwurfsgröße) */
  --fs-role: clamp(1.25rem, calc(0.75rem + 1.6 * var(--k)), 2rem);      /* 20 -> 32 */
  --fs-sub: clamp(0.95rem, calc(0.62rem + 1.05 * var(--k)), 1.5rem);    /* 15.2 -> 24 */
  --fs-head: clamp(1.1rem, calc(0.78rem + 1.0 * var(--k)), 1.75rem);    /* 17.6 -> 28 */
  --fs-contact: clamp(1rem, calc(0.72rem + 0.9 * var(--k)), 1.5rem);    /* 16 -> 24 */
  --fs-btn: clamp(0.85rem, calc(0.63rem + 0.7 * var(--k)), 1.375rem);   /* 13.6 -> 22 */
  --fs-footer: clamp(0.9rem, calc(0.7rem + 0.62 * var(--k)), 1.375rem); /* 14.4 -> 22 */
  --fs-body: clamp(0.95rem, calc(0.88rem + 0.3 * var(--k)), 1.125rem);
}

/* Ab Tablet-Breite Schrift und Abstände zusätzlich an die Bildschirmhöhe koppeln,
   damit das Logo über dem Inhalt stehen bleibt und trotzdem alles sichtbar ist. */
@media (min-width: 48rem) {
  :root {
    --k: min(1vw, 0.875vh);
    --sp: min(1rem, 0.58vh);
  }
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 4px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* --- Grundgerüst --------------------------------------------------------- */
.page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(3.75 * var(--sp)) 1.25rem calc(3.75 * var(--sp));
}

.card {
  width: 100%;
  max-width: var(--content);
  text-align: center;
}

/* --- Logo ---------------------------------------------------------------- */
.logo {
  /* Breite wie im Entwurf, auf flachen Bildschirmen an die Höhe gekoppelt */
  width: min(524px, 82%, 29vh);
  margin: 0 auto calc(6.375 * var(--sp));
}

/* --- Trennlinien --------------------------------------------------------- */
.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
  width: 100%;
}

/* --- Rolle / Claim ------------------------------------------------------- */
.role {
  margin: 0;
  font-size: var(--fs-role);
  font-weight: 400;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.25;
}

.role__sub {
  display: block;
  margin-top: 0.55em;
  color: var(--accent);
  font-size: var(--fs-sub);
  font-weight: 400;
  letter-spacing: 0.17em;
}

.section-intro { padding: calc(2.35 * var(--sp)) 0 calc(3 * var(--sp)); }

/* --- Kontakt ------------------------------------------------------------- */
.section-contact { padding: calc(3 * var(--sp)) 0 calc(4.5 * var(--sp)); }

.section-title {
  margin: 0 0 calc(2.6 * var(--sp));
  color: var(--accent);
  font-size: var(--fs-head);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.contact-list {
  display: grid;
  grid-template-columns: calc(2 * var(--fs-contact)) 1fr;
  gap: calc(2.8 * var(--sp)) clamp(1.4rem, calc(0.7rem + 1.6 * var(--k)), 2.3rem);
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: left;
}

.contact-list__row {
  display: contents;
}

.contact-list__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.contact-list__icon svg {
  width: 100%;
  height: auto;
  fill: currentColor;
}

.contact-list__value {
  font-size: var(--fs-contact);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.contact-list__value a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.contact-list__value a:hover,
.contact-list__value a:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* --- Buttons ------------------------------------------------------------- */
.section-actions { padding: calc(4.25 * var(--sp)) 0 calc(4 * var(--sp)); }

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, calc(0.4rem + 1.6 * var(--k)), 2.15rem);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-width: clamp(9.5rem, calc(6rem + 12 * var(--k)), 15.5rem);
  padding: 0.6em 1.2em;
  border-radius: 999px;
  background: var(--accent);
  color: #ffffff;
  line-height: 1;
  font-size: var(--fs-btn);
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn svg {
  width: 1.4em;
  height: auto;
  flex: none;
  fill: currentColor;
  transition: transform 0.2s ease;
}

.btn:hover,
.btn:focus-visible {
  background: var(--accent-hover);
  box-shadow: 0 0 24px rgba(211, 120, 239, 0.45);
}

.btn:hover svg,
.btn:focus-visible svg { transform: translateX(0.2em); }

/* --- Footer -------------------------------------------------------------- */
.site-footer { padding-top: calc(3 * var(--sp)); }

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.35em;
  color: var(--accent);
  font-size: var(--fs-footer);
}

.site-footer a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--accent-hover);
  border-bottom-color: currentColor;
}

.site-footer .sep { opacity: 0.7; }

/* --- Rechtstexte (Impressum / Datenschutz) ------------------------------- */
.page--legal {
  justify-content: flex-start;
  padding-top: clamp(2.5rem, 1rem + 5vw, 4.5rem);
}

.legal {
  width: 100%;
  max-width: 46rem;
  text-align: left;
  font-size: var(--fs-body);
}

.legal__brand {
  display: block;
  width: min(220px, 55%);
  margin: 0 auto 3rem;
}

.legal h1 {
  margin: 0 0 2rem;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}

.legal h2 {
  margin: 2.4rem 0 0.8rem;
  color: var(--accent);
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.3rem);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.legal h3 {
  margin: 1.9rem 0 0.6rem;
  font-size: 1.1em;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.legal h4 {
  margin: 1.4rem 0 0.5rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95em;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.legal p, .legal li { color: rgba(255, 255, 255, 0.86); }
.legal p { margin: 0 0 1rem; }
.legal ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.legal li { margin-bottom: 0.4rem; }

.legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.2em; }
.legal a:hover, .legal a:focus-visible { color: var(--accent-hover); }

.legal__back {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-top: 3rem;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.85em;
  font-weight: 600;
}

.legal__back svg { width: 1.25em; height: auto; fill: currentColor; transform: rotate(180deg); }
.legal__back:hover, .legal__back:focus-visible { color: var(--accent-hover); }

.legal .rule { margin: 3rem 0 2rem; }

/* --- Mobile Feinschliff -------------------------------------------------- */
@media (max-width: 30rem) {
  .section-intro { padding: calc(1.8 * var(--sp)) 0 calc(2 * var(--sp)); }
  .section-contact { padding: calc(2.2 * var(--sp)) 0 calc(2.4 * var(--sp)); }
  .section-actions { padding: calc(2.4 * var(--sp)) 0 calc(2.4 * var(--sp)); }
  .actions { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* --- Breite Desktop-Ansicht: Logo neben den Inhalt ------------------------
   Der Entwurf ist hochformatig; auf breiten, flachen Bildschirmen würde er
   Scrollen erzwingen. Ab 62rem Breite und querformatigem Viewport steht das
   Logo deshalb links neben dem Textblock. Mobil bleibt alles untereinander. */
/* Nur bei ausgeprägtem Querformat (breit UND flach) wandert das Logo nach links;
   auf großen Bildschirmen mit genug Höhe bleibt es über dem Inhalt. */
@media (min-width: 62rem) and (max-height: 50rem) {
  .page:not(.page--legal) {
    padding-block: calc(3 * var(--sp));
  }

  .page:not(.page--legal) .card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(2.5rem, 4vw, 5rem);
    max-width: 1180px;
  }

  .page:not(.page--legal) .logo {
    flex: 0 1 auto;
    width: min(440px, 40vw, 65vh);
    margin: 0;
  }

  .card__body {
    flex: 0 1 var(--content);
    min-width: 0;
  }

  .card__body > .rule:first-child { margin-top: 0; }

  .section-intro { padding: min(2rem, 3.5vh) 0 min(2.5rem, 4vh); }
  .section-contact { padding: min(2.5rem, 4vh) 0 min(3.5rem, 5.5vh); }
  .section-actions { padding: min(3.25rem, 5vh) 0 min(3rem, 4.5vh); }
  .site-footer { padding-top: min(2.25rem, 3.5vh); }
}