@font-face {
  font-family: "Familyname";
  src: url("../fonts/CAS.ttf") format("truetype-variations"),
       url("../fonts/CAS.ttf") format("truetype");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --bg: #333333;
  --fg: #ececec;
  --muted: #b4b4b4;
  --line: rgba(236, 236, 236, 0.18);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font-family: "Familyname", system-ui, sans-serif;
  font-size: 1.125rem;
  line-height: 1.6;
  /* Regular-Instanz der VF */
  font-variation-settings: "wght" 300, "wdth" 297;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
    hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}

strong, b, h1, h2, h3 {
  font-weight: normal;
  /* Bold-Instanz der VF */
  font-variation-settings: "wght" 670, "wdth" 315;
}

a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.5s var(--ease), color 0.3s;
}
a:hover,
a:focus-visible { background-size: 100% 1px; }
a:focus-visible { outline: 1px solid var(--fg); outline-offset: 4px; }

::selection { background: var(--fg); color: var(--bg); }

/* ---------- Landing ---------- */

.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(3rem, 8vh, 5.5rem);
  padding: 3rem 1.5rem;
  text-align: center;
}

.logo {
  width: min(560px, 86vw);
  height: auto;
  display: block;
  overflow: visible;
}
.logo path,
.logo rect {
  fill: var(--fg);
  stroke: var(--fg);
  stroke-width: 5.05px;
}

/* Fallback ohne JavaScript: Telefonnummer steht rückwärts im Quelltext */
.rev {
  unicode-bidi: bidi-override;
  direction: rtl;
}

.contact {
  font-style: normal;
  font-size: 1.25rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
}
.contact p { margin: 0; }
.contact .name {
  font-variation-settings: "wght" 670, "wdth" 315;
  margin-bottom: 0.4em;
}

/* ---------- Footer ---------- */

.site-footer {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  padding: 1.75rem 1.5rem 2.25rem;
  font-size: 1rem;
  color: var(--muted);
}
.site-footer a:hover { color: var(--fg); }

/* ---------- Unterseiten ---------- */

.page-header {
  display: flex;
  justify-content: center;
  padding: 3rem 1.5rem 0;
}
.page-header a { background: none; }
.page-header img {
  width: min(260px, 60vw);
  height: auto;
  display: block;
}

.legal {
  flex: 1;
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 4rem;
}
.legal h1 {
  font-size: 2rem;
  line-height: 1.2;
  margin: 0 0 2.5rem;
  letter-spacing: 0.02em;
}
.legal h2 {
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 2.75rem 0 0.75rem;
  padding-top: 2.75rem;
  border-top: 1px solid var(--line);
}
.legal h1 + h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.legal h3 {
  font-size: 1.125rem;
  margin: 1.75rem 0 0.5rem;
}
.legal p,
.legal ul { margin: 0 0 1em; }
.legal ul { padding-left: 1.25em; }
.legal a { background-size: 100% 1px; }
.legal a:hover { background-size: 0% 1px; }
.legal .back {
  display: inline-block;
  margin-top: 2.5rem;
  color: var(--muted);
  background-size: 0% 1px;
}
.legal .back:hover { color: var(--fg); background-size: 100% 1px; }

/* ---------- Einblendung ---------- */

@keyframes emblem-in {
  from { opacity: 0; transform: scale(0.82) rotate(-25deg); filter: blur(12px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes letter-in {
  from { opacity: 0; transform: translateY(60px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.logo .emblem {
  transform-box: fill-box;
  transform-origin: center;
  animation: emblem-in 1.8s var(--ease) 0.2s both;
}
.logo .letter {
  transform-box: fill-box;
  animation: letter-in 1.1s var(--ease) both;
  animation-delay: calc(0.9s + var(--i) * 0.06s);
}
.contact > * {
  animation: rise 1.1s var(--ease) both;
}
.contact > :nth-child(1) { animation-delay: 1.9s; }
.contact > :nth-child(2) { animation-delay: 2.05s; }
.contact > :nth-child(3) { animation-delay: 2.2s; }
.home .site-footer { animation: fade 1.2s ease 2.6s both; }

.page-header,
.legal,
.legal-page .site-footer { animation: rise 0.9s var(--ease) both; }
.legal { animation-delay: 0.15s; }
.legal-page .site-footer { animation-delay: 0.3s; }

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

@media (max-width: 480px) {
  .contact { font-size: 1.125rem; }
  .legal h1 { font-size: 1.625rem; }
  .site-footer { gap: 1.75rem; }
}