/* ============================================================
   Steuerberatung Manuel Maul
   Aus Figma: "20260729 stb-maul – Demnächst Version"
   File W2UJAzKxmoUicg4JvgLNYv · Seite "Landingpage"

   Der Entwurf liegt auf einer Canvas von 1920 px. Alle Maße sind
   als Verhältnis dazu notiert, der Sollwert steht im Kommentar.
   ============================================================ */

/* ------------------------------------------------------------
   Schrift — Übergangslösung
   Die Hausschrift Azo Sans (Rui Abreu / R-Typography) wird auf
   dieser Platzhalterseite bewusst NICHT eingebunden. Gesetzt wird
   Avenir Next, das auf macOS und iOS zum System gehört; auf
   Windows und Android greift die Fallback-Kette.

   Avenir Next kennt kein echtes Light — unterhalb von Regular
   folgt direkt Ultra Light. Deshalb läuft der Fließtext hier auf
   400 statt auf den 300 des Entwurfs, sonst rutscht die Auswahl
   auf Ultra Light und wird zu dünn.

   Für den Relaunch mit Azo Sans: WOFF2 nach assets/fonts/ legen,
   die @font-face-Regeln wieder aktivieren (siehe README),
   --font um "Azo Sans" voranstellen und body auf 300 zurücksetzen.
   ------------------------------------------------------------ */

:root {
  /* --- Farbstile --- */
  --primary-black:   #1f2021;
  --secondary-white: #f9f9f9;
  --primary-red:     #992132;
  --footer-bg:       #343536;   /* #1F2021 @ 90 % auf Weiß */
  --meta-grey:       #5e5e5e;
  --page-bg:         #ebeced;

  /* Hero-Verlauf, Stopps aus dem Fill von Rectangle 91 */
  --hero-0: #992132;
  --hero-1: #821424;
  --hero-2: #6b0715;

  /* --- Raster --- */
  --canvas: min(100vw, 1920px);
  --rail:   calc((100vw - var(--canvas)) / 2);
  --inset:  calc(var(--rail) + var(--canvas) * 0.16823);   /* 323 */
  --gutter: calc(var(--rail) + var(--canvas) * 0.08438);   /* 162 */

  /* --- Kopfbereich, alles aus --bar-h abgeleitet --- */
  --bar-h:    clamp(64px, 4.948vw, 95px);            /*  95 */
  --fillet:   calc(var(--bar-h) * 0.47368);          /*  45 */
  --plate-h:  calc(var(--bar-h) + var(--fillet));    /* 140 */
  --hero-top: calc(var(--bar-h) * 0.87368);          /*  83 */
  --step:     calc(var(--bar-h) * 0.69474);          /*  66 (323 → 257) */

  /* --- Hero --- */
  --hero-h: clamp(430px, 40.677vw, 781px);           /* 781 */

  /* --- Typografie --- */
  --h1:   clamp(28px, 2.8125vw, 54px);   /* Bold 54 / 62   */
  --body: clamp(16px, 0.9375vw, 18px);   /* Light 18       */
  --meta: clamp(13px, 0.78125vw, 15px);  /* 15             */

  --font: "Avenir Next", "Avenir Next LT Pro", Avenir,
          "Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--secondary-white);
  color: var(--primary-black);
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--body);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ============================================================
   KOPFBEREICH
   Weiße Fläche aus drei Figma-Shapes:
     Balken     0 → 1920, Höhe  95
     Platte   257 → 1920, Höhe 140
     Viertelkreis r = 45 (Mittelpunkt 257 / 95) als Übergang
   ============================================================ */
.stage { position: relative; display: flow-root; }

.masthead {
  position: absolute; inset: 0 0 auto 0;
  height: var(--plate-h);
  z-index: 2;
  pointer-events: none;
}
.masthead__bar,
.masthead__plate,
.masthead__fillet { position: absolute; background: var(--secondary-white); }

.masthead__bar   { inset: 0 0 auto 0; height: var(--bar-h); }
.masthead__plate { top: 0; right: 0; height: var(--plate-h); left: calc(var(--inset) - var(--step)); }
.masthead__fillet {
  top: var(--bar-h);
  left: calc(var(--inset) - var(--step) - var(--fillet));
  width: var(--fillet); height: var(--fillet);
  border-bottom-left-radius: var(--fillet);
}

.masthead__inner {
  position: relative;
  height: var(--plate-h);
  padding-inline: var(--inset) var(--gutter);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  pointer-events: auto;
}
.masthead__logo {
  display: block;
  width: clamp(190px, 16.823vw, 323px);           /* 323 × 60 */
  margin-top: calc(var(--bar-h) * 0.38105);       /* Oberkante 40 */
}

.masthead__contact {
  display: flex;
  gap: calc(var(--bar-h) * 0.28421);              /* 27 */
  margin-top: calc(var(--bar-h) * 0.10526);       /* Oberkante 10 */
  font-size: var(--meta);
  line-height: 1.2;
  color: var(--meta-grey);
}
.masthead__contact a {
  display: inline-flex; align-items: center;
  gap: 0.8em;                                     /* 12 bei 15 */
  text-decoration: none; white-space: nowrap;
}
.masthead__contact svg { width: 0.93em; height: 0.93em; flex: none; fill: var(--primary-red); }  /* 14 */
.masthead__contact a:hover { color: var(--primary-red); }

/* ============================================================
   HERO   Figma: y 83, 1920 × 781
   ============================================================ */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: var(--hero-top);
  height: var(--hero-h);
  background: var(--hero-2);
}

/* Farbfoto, darüber der rote Radialverlauf im Modus "darken" –
   exakt der Fill-Stack von Rectangle 91. */
.hero__photo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 58%;
}
.hero__wash {
  position: absolute; inset: 0; z-index: -1;
  mix-blend-mode: darken;
  background: radial-gradient(ellipse 100% 100% at 50% 50%,
    var(--hero-0) 0%, var(--hero-1) 50%, var(--hero-2) 100%);
}

/* Key Visual: zwei Vektorgruppen, oben bündig an der Logo-Platte,
   unten bündig an der Hero-Kante. */
.hero__keyvis { position: absolute; }
.hero__keyvis--top {
  top: calc(var(--plate-h) - var(--hero-top));    /* 140 − 83 */
  left: 70.964%; width: 18.125%; min-width: 130px;
}
.hero__keyvis--bottom {
  bottom: 0;
  left: 60.990%; width: 30.495%; min-width: 220px;
}

.hero__inner {
  position: relative;
  height: 100%;
  padding: calc(var(--hero-h) * 0.33419) var(--gutter) 0 var(--inset);  /* 261 */
}
.hero__title {
  margin: 0;
  font-size: var(--h1);
  font-weight: 700;
  line-height: 1.1481;                            /* 62 / 54 */
  color: var(--secondary-white);
}
.hero__title span { display: block; }
.hero__title .indent { padding-left: 3.76em; }    /* 203 */

/* ============================================================
   INHALTSSEITEN   Impressum · Datenschutzerklärung
   Fließtext: 18 px, Zeilenabstand 35 px, keine Absatzlücken
   ============================================================ */
.page { background: var(--page-bg); padding-top: var(--hero-top); }
.page__head { padding: calc(var(--hero-h) * 0.33419) var(--gutter) 0 var(--inset); }
.page h1 {
  margin: 0;
  font-size: var(--h1); font-weight: 700; line-height: 1.1481;
}
.page__body {
  padding: calc(var(--canvas) * 0.08906) var(--gutter)   /* 344 → 577 */
           calc(var(--canvas) * 0.14219) var(--inset);
  max-width: calc(var(--inset) + var(--canvas) * 0.40990 + var(--gutter));  /* 787 */
  line-height: 1.9444;                            /* 35 / 18 */
}
.page__body h2,
.page__body h3 { margin: 0; font-size: 1em; font-weight: 700; }
.page__body p  { margin: 0; }
.page__body a  { color: var(--primary-red); text-underline-offset: 3px; }

/* ============================================================
   FOOTER   Figma: 1920 × 430
   Logo 162 / 73 · Spalten 650 und 963 ab y 177 · Fußzeile y 366
   ============================================================ */
.footer {
  background: var(--footer-bg);
  color: var(--secondary-white);
  font-size: var(--body);
  line-height: 1.3333;                            /* 24 / 18 */
}
.footer__inner {
  padding: calc(var(--canvas) * 0.03802)          /*  73 */
           var(--gutter)
           calc(var(--canvas) * 0.01495);         /*  29 */
}

.footer__cols { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 3vw, 40px); }
@media (min-width: 860px) {
  .footer__cols {
    grid-template-columns: 30.58% 19.61% auto;    /* 488 / 313 im 1596er Inhalt */
    gap: 0;
  }
  .footer__block { padding-top: calc(var(--canvas) * 0.05417); }   /* 177 − 73 */
}
.footer__logo { width: clamp(200px, 15.521vw, 298px); }            /* 298 × 59 */

.footer h2 { margin: 0 0 1.3333em; font-size: 1em; font-weight: 700; color: #fff; }
.footer address { font-style: normal; }
.footer p { margin: 0; }

.footer__list { margin: 0; padding: 0; list-style: none; }
.footer__list li { display: flex; align-items: center; gap: 0.72em; }
.footer__list svg { width: 1.06em; height: 1.06em; flex: none; fill: currentColor; }  /* 19 bei 18 */
.footer__list a { text-decoration: none; }
.footer__list a:hover { text-decoration: underline; }

.footer__base {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 12px 24px;
  margin-top: calc(var(--canvas) * 0.03599);      /* 366 − 297 */
  min-height: calc(var(--canvas) * 0.01833);      /*  35 */
  font-size: var(--meta);
}
.footer__base p { display: flex; align-items: center; gap: 0.5em; margin: 0; }
.footer__base svg { width: 0.93em; height: 0.93em; flex: none; fill: currentColor; }
.footer__legal { display: flex; align-items: center; gap: calc(var(--bar-h) * 0.32105); }  /* 30.5 */
.footer__legal a { text-decoration: none; color: #fff; }
.footer__legal a:hover { text-decoration: underline; }
.footer__legal .rule {
  width: 1px; height: calc(var(--canvas) * 0.01833);   /* 35 */
  background: rgba(255, 255, 255, 0.4);
}

/* ============================================================
   Enge Viewports – ab hier löst sich das 1920er Raster auf
   ============================================================ */
@media (max-width: 860px) {
  :root {
    --inset:  clamp(20px, 5.5vw, 48px);
    --gutter: clamp(20px, 5.5vw, 48px);
    --bar-h:  72px;
    --step:   0px;
  }
  .masthead__plate,
  .masthead__fillet { display: none; }
  .masthead__contact .label { display: none; }
  .masthead__contact svg { width: 21px; height: 21px; }
  .masthead__contact { margin-top: 26px; }
  .hero__title .indent { padding-left: 0; }
  .hero__keyvis--top { top: calc(var(--bar-h) - var(--hero-top)); left: 56%; }
  .hero__keyvis--bottom { left: 38%; }
  .page__body { max-width: none; line-height: 1.7; }
  .page__body h2 { margin-top: 1.7em; }
  .page__body h2:first-of-type { margin-top: 0; }
}

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