/* =========================================================================
   christastrobl.com — Visitenkarte (statisch)
   Zentrales Stylesheet. Eine Quelle für Farben & Typografie.
   Design aus Christas Entwurf (Jan 2026): blaues Logo-Quadrat auf Schwarz.
   Schrift: Lora (lokal gehostet) — exakt die Serife der alten /kontakt/-Seite.
   ========================================================================= */

/* ---- Schrift lokal eingebunden (kein Google-CDN → DSGVO-sauber) ---------- */
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 700;            /* Variable Font */
  font-display: swap;
  src: url("../fonts/lora.woff2") format("woff2");
}
@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/lora-italic.woff2") format("woff2");
}

:root {
  --cs-blue:      #0a04a0;   /* Ultramarin aus Christas Entwurf (gemessen ~#090290) */
  --cs-black:     #000000;   /* Hintergrund wie im Entwurf */
  --cs-ink:       #1c1c1e;   /* Textfarbe Rechtsseite */
  --cs-muted:     #6b6f76;
  --cs-paper:     #ffffff;
  --serif: "Lora", "Iowan Old Style", Palatino, Georgia, "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =========================================================================
   STARTSEITE — blaues Logo auf Schwarz
   ========================================================================= */

body.home {
  background: var(--cs-black);
  color: #fff;
}

.screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.stage {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;     /* Logo oben anschlagen … */
  justify-content: center;
  padding: 0 1.25rem 2rem;     /* … kein oberer Abstand → Logo berührt den oberen Rand (wie Christas Entwurf) */
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Das Logo: blaues Quadrat mit handschriftlichem Schriftzug im unteren Drittel
   (originalgetreu zum Entwurf). Das ganze Quadrat ist der Klick-Trigger. */
.logo {
  position: relative;
  width: min(78vw, 400px);
  aspect-ratio: 1 / 1;
  background: var(--cs-blue);
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: filter .35s ease;
}
.logo:hover { filter: brightness(1.08); }
.logo:focus-visible { outline: 2px solid rgba(255, 255, 255, .8); outline-offset: 10px; }

.logo-sig {
  width: 84%;
  margin-bottom: 7%;
  height: auto;
  display: block;
  pointer-events: none;
}

/* Kontaktblock — erscheint bei Klick/Tap, Hover oder Tastatur-Fokus auf das Logo.
   Kein „Kontakt"-Titel (so von Christa gewünscht). */
.contact {
  margin-top: 2.2rem;
  font-size: 1.12rem;
  color: rgba(255, 255, 255, .9);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .55s ease, transform .55s ease, visibility 0s linear .55s;
}
/* Inhalt 1:1 wie image0.jpg: Name+Beruf, Adresse (3 Zeilen, AUSTRIA),
   Tel.:-Präfix, E-Mail, Wirtschaftskammer. Gruppen durch Abstand getrennt. */
.contact .cname { margin: 0 0 1.3rem; color: #fff; }
.contact address { font-style: normal; line-height: 1.7; margin: 0 0 1.3rem; }
.contact .lines { margin: 0 0 1.3rem; line-height: 1.85; }
.contact .wk { margin: 0; }
.contact a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}
.contact a:hover { border-bottom-color: rgba(255, 255, 255, .6); }

/* Dezente Fußzeile — nur sichtbar, wenn der Kontakt eingeblendet ist. */
.site-footer {
  flex: 0 0 auto;
  text-align: center;
  padding: 1.4rem 1rem 1.8rem;
  font-size: .82rem;
  letter-spacing: .04em;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease, visibility 0s linear .6s;
}
.site-footer a {
  color: rgba(255, 255, 255, .42);
  text-decoration: none;
  transition: color .25s ease;
}
.site-footer a:hover { color: rgba(255, 255, 255, .85); }
.site-footer .sep { color: rgba(255, 255, 255, .25); margin: 0 .55rem; }

/* Sichtbar-Schalten läuft über .is-open (per JS: Hover mit Maus, Klick/Tap oder
   Tastatur-Fokus öffnen). Es BLEIBT offen, bis außerhalb geklickt oder Esc
   gedrückt wird — so kann man bequem nach unten zu Impressum/Datenschutz fahren,
   ohne dass alles verschwindet. :focus-within zusätzlich als Fallback ohne JS. */
.screen.is-open .contact,
.card:focus-within .contact {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .55s ease, transform .55s ease, visibility 0s;
}
.screen.is-open .site-footer,
.screen:has(.card:focus-within) .site-footer {
  opacity: 1;
  visibility: visible;
  transition: opacity .6s ease, visibility 0s;
}

/* =========================================================================
   RECHTSSEITE — Impressum + Datenschutz auf einer Seite (Anker)
   ========================================================================= */

body.legal {
  background: var(--cs-paper);
  color: var(--cs-ink);
  line-height: 1.65;
}

.legal-wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
}

.home-link { display: inline-block; margin-bottom: 2.5rem; line-height: 0; }
.home-link img { width: 170px; height: auto; display: block; }
.home-link:focus-visible { outline: 2px solid var(--cs-blue); outline-offset: 6px; }

.legal-wrap h1 {
  font-size: 1.85rem;
  font-weight: 600;
  color: var(--cs-blue);
  margin: 2.6rem 0 1.4rem;
  scroll-margin-top: 1.5rem;       /* Anker-Sprung nicht am oberen Rand kleben */
}
.legal-wrap h1:first-of-type { margin-top: 0; }
.legal-wrap h2 { font-size: 1.12rem; font-weight: 600; margin: 2rem 0 .5rem; }
.legal-wrap p, .legal-wrap address { margin: .5rem 0; font-style: normal; }
.legal-wrap a { color: var(--cs-blue); }
.legal-wrap .lead { color: var(--cs-muted); }

.legal-nav {
  margin-bottom: 2.5rem;
  font-size: .92rem;
}
.legal-nav a { margin-right: 1.2rem; }

.section-divider { border: 0; border-top: 1px solid #e7e7ea; margin: 3.5rem 0 0; }

/* Platzhalter, die Christa/Marcus vor dem Live-Gang ausfüllen müssen. */
.todo { background: #fff4cc; border-bottom: 1px dashed #c9a227; padding: 0 .2em; }

footer.legal-footer {
  margin-top: 3.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid #e7e7ea;
  font-size: .82rem;
  color: var(--cs-muted);
}
footer.legal-footer a { color: var(--cs-muted); }

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