/* ============================================================
   Notariat Roman Lorenz – Übergangsseite
   CSS Variables & Styles
   ============================================================ */

/* ----- Font Face ----- */
@font-face {
  font-family: "Kumbh Sans";
  src: url("../fonts/KumbhSans-VariableFont_YOPQ,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

/* ----- CSS Custom Properties (Design Tokens) ----- */
:root {
  /* Colors */
  --color-beige-400: #9e8f7d;
  --color-beige-400-overlay: rgba(158, 143, 125, 0.2);
  --color-black: #000000;
  --color-white: #ffffff;
  --color-surface-page: #ffffff;
  --color-bg-light: #f6f6f6;

  /* Typography – Font Families */
  --font-title: "Kumbh Sans", sans-serif;
  --font-subhead: "Kumbh Sans", sans-serif;
  --font-body: "Kumbh Sans", sans-serif;

  /* Typography – Font Sizes */
  --size-hl-lg: 3.5rem;
  --size-hl-md: 2.5rem;
  --size-hl-sm: 2rem;
  --size-subhead-lg: 2.5rem;
  --size-subhead-sm: 1.125rem;
  --size-body-lg: 1.5rem;
  --size-body-md: 1.25rem;

  /* Typography – Line Heights */
  --lh-headline: 1.2;
  --lh-headline-sm: 1.3;
  --lh-body: 1.4;

  /* Typography – Font Weights */
  --weight-regular: 400;
  --weight-semibold: 600;

  /* Font variation settings */
  --font-variation: "YOPQ" 300;

  /* Spacing (Jumper tokens) */
  --space-8: 0.5rem;
  --space-16: 1rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-56: 3.5rem;
  --space-80: 5rem;
  --space-128: 8rem;
  --space-160: 10rem;
  --space-168: 10.5rem;

  /* Layout */
  --page-max-width: 120rem;
  --page-padding: 10rem;
  --page-padding-mobile: 1.5rem;

  /* Icon size */
  --icon-size: 6.5rem;
  --icon-inner-size: 4.25rem;
}

/* ----- Reset & Base ----- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

body {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-variation-settings: var(--font-variation);
  color: var(--color-black);
  background-color: var(--color-surface-page);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

/* ----- Header ----- */
.header {
  position: relative;
  width: 100%;
  background-color: var(--color-white);
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: var(--space-32) var(--page-padding);
  display: flex;
  align-items: center;
  min-height: 14.4375rem;
  box-sizing: border-box;
}

.header__logo {
  width: 12rem;
  height: auto;
}

/* ----- Hero ----- */
.hero {
  position: relative;
  width: 100%;
  height: 31rem;
  overflow: hidden;
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__image--mobile {
  display: none;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background-color: var(--color-beige-400-overlay);
  pointer-events: none;
}

/* ----- Intro Section ----- */
.intro {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: var(--space-80) var(--page-padding);
  display: flex;
  gap: var(--space-168);
  align-items: flex-start;
}

.intro__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  min-width: 0;
}

.intro__headline {
  font-family: var(--font-title);
  font-weight: var(--weight-semibold);
  font-size: 3rem;
  line-height: var(--lh-headline);
  color: var(--color-beige-400);
  font-variation-settings: var(--font-variation);
}

.intro__subheadline {
  font-family: var(--font-subhead);
  font-weight: var(--weight-regular);
  font-size: 1.75rem;
  line-height: var(--lh-body);
  color: var(--color-black);
  font-variation-settings: var(--font-variation);
}

/* ----- Contact Card ----- */
.contact-card {
  background-color: var(--color-bg-light);
  padding: var(--space-40);
  flex-shrink: 0;
  width: 32rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.contact-card__title {
  font-family: var(--font-title);
  font-weight: var(--weight-semibold);
  font-size: var(--size-hl-sm);
  line-height: var(--lh-headline-sm);
  color: var(--color-beige-400);
  font-variation-settings: var(--font-variation);
}

.contact-card__address {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--size-body-lg);
  line-height: var(--lh-body);
  color: var(--color-black);
  font-variation-settings: var(--font-variation);
  font-style: normal;
}

.contact-card__address strong {
  font-weight: var(--weight-semibold);
}

.contact-card__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--size-body-lg);
  line-height: var(--lh-body);
  color: var(--color-black);
  font-variation-settings: var(--font-variation);
}

.contact-card__details strong {
  font-weight: var(--weight-semibold);
}

.contact-card__details a:hover {
  text-decoration: underline;
}

/* ----- Services Section ----- */
.services {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: var(--space-80) var(--page-padding) var(--space-160);
  display: flex;
  gap: var(--space-80);
  align-items: flex-start;
}

.services__intro {
  flex: 0 0 40%;
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.services__label {
  font-family: var(--font-subhead);
  font-weight: var(--weight-semibold);
  font-size: var(--size-subhead-sm);
  line-height: var(--lh-headline);
  letter-spacing: 0.125rem;
  text-transform: uppercase;
  color: var(--color-beige-400);
  font-variation-settings: var(--font-variation);
  margin-bottom: 0;
}

.services__headline {
  font-family: var(--font-title);
  font-weight: var(--weight-semibold);
  font-size: var(--size-hl-md);
  line-height: var(--lh-headline);
  color: var(--color-beige-400);
  font-variation-settings: var(--font-variation);
  margin-top: var(--space-16);
}

.services__description {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--size-body-lg);
  line-height: var(--lh-body);
  color: var(--color-black);
  font-variation-settings: var(--font-variation);
}

/* ----- Service Items ----- */
.services__list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
  min-width: 0;
}

.service-item {
  display: flex;
  gap: var(--space-32);
  align-items: flex-start;
}

.service-item__icon {
  flex-shrink: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-item__icon img {
  width: var(--icon-size);
  height: var(--icon-size);
  object-fit: contain;
}

.service-item__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  flex: 1;
  min-width: 0;
}

.service-item__title {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--size-body-lg);
  line-height: var(--lh-body);
  color: var(--color-beige-400);
  font-variation-settings: var(--font-variation);
}

.service-item__text {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--size-body-md);
  line-height: var(--lh-body);
  color: var(--color-black);
  font-variation-settings: var(--font-variation);
}

/* ----- Footer ----- */
.footer {
  background-color: var(--color-beige-400);
  color: var(--color-white);
  padding: var(--space-80) 0;
}

.footer__inner {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 var(--page-padding);
  display: flex;
  gap: var(--space-160);
  align-items: flex-start;
}

.footer__logo {
  flex-shrink: 0;
  width: 12rem;
  height: auto;
}

.footer__content {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  min-width: 0;
}

.footer__contact {
  display: flex;
  gap: var(--space-128);
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--size-body-md);
  line-height: var(--lh-body);
  font-variation-settings: var(--font-variation);
}

.footer__address {
  font-style: normal;
  white-space: nowrap;
}

.footer__address strong,
.footer__details strong {
  font-weight: var(--weight-semibold);
}

.footer__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  white-space: nowrap;
}

.footer__nav {
  white-space: nowrap;
}

.footer__details a:hover {
  text-decoration: underline;
}

.footer__nav {
  display: flex;
  gap: var(--space-56);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--size-body-md);
  line-height: var(--lh-body);
  font-variation-settings: var(--font-variation);
}

.footer__nav a:hover {
  text-decoration: underline;
}

/* ----- Subpages (Impressum, Datenschutz) ----- */
.header--static {
  position: relative;
  background-color: var(--color-surface-page);
  border-bottom: 0.0625rem solid var(--color-bg-light);
}

.subpage {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: var(--space-80) var(--page-padding);
  min-height: 50vh;
}

.subpage__content {
  max-width: 65rem;
}

.subpage__headline {
  font-family: var(--font-title);
  font-weight: var(--weight-semibold);
  font-size: var(--size-hl-md);
  line-height: var(--lh-headline);
  color: var(--color-beige-400);
  font-variation-settings: var(--font-variation);
  margin-bottom: var(--space-48);
}

.subpage__content p {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: var(--space-16);
  font-variation-settings: var(--font-variation);
}

.subpage__content a {
  color: var(--color-beige-400);
  text-decoration: underline;
}

.subpage__content a:hover {
  text-decoration: none;
}

.subpage__content strong {
  font-weight: 600;
}

.subpage__content h2 {
  font-family: var(--font-title);
  font-weight: var(--weight-semibold);
  font-size: 1.375rem;
  line-height: var(--lh-headline-sm);
  color: var(--color-beige-400);
  font-variation-settings: var(--font-variation);
  margin-top: var(--space-40);
  margin-bottom: var(--space-16);
}

/* ============================================================
   RESPONSIVE – Page Margins
   ============================================================ */
@media (max-width: 1200px) {
  :root {
    --page-padding: 5rem;
  }
}

@media (max-width: 960px) {
  :root {
    --page-padding: 3rem;
  }
}

/* ============================================================
   RESPONSIVE – Content Breakpoints
   ============================================================ */

/* ============================================================
   RESPONSIVE – Footer Breakpoint
   ============================================================ */
@media (max-width: 1700px) {
  .footer__inner {
    gap: var(--space-80);
  }

  .footer__contact {
    gap: var(--space-80);
    font-size: 1.125rem;
  }

  .footer__nav {
    gap: var(--space-48);
    font-size: 1.125rem;
  }
}

@media (max-width: 1400px) {
  /* Header */
  .header__logo {
    width: 10rem;
  }

  .header {
    min-height: 12rem;
  }

  /* Intro */
  .intro {
    flex-direction: column;
    gap: var(--space-48);
    padding-bottom: var(--space-40);
  }

  .contact-card {
    width: 100%;
    max-width: 32rem;
    padding: var(--space-32);
  }

  .contact-card__title {
    font-size: 1.625rem;
  }

  .contact-card__address,
  .contact-card__details {
    font-size: 1.25rem;
  }

  .intro__headline {
    font-size: 2.5rem;
  }

  .intro__subheadline {
    font-size: 1.5rem;
  }

  /* Services */
  .services {
    flex-direction: column;
    gap: var(--space-48);
    padding-top: var(--space-40);
    padding-bottom: var(--space-80);
  }

  .services__intro {
    flex: none;
    width: 100%;
  }

  .services__list {
    width: 100%;
    max-width: 85%;
  }

  .services__headline {
    font-size: 2rem;
  }

  .services__description {
    font-size: 1.125rem;
  }

  .service-item__text {
    font-size: 1.0625rem;
  }

  /* Footer */
  .footer__inner {
    gap: var(--space-56);
  }

  .footer__contact {
    gap: var(--space-56);
    font-size: 1rem;
  }

  .footer__nav {
    gap: var(--space-32);
    font-size: 1rem;
  }
}

@media (max-width: 1300px) {
  .footer__inner {
    flex-direction: column;
    gap: var(--space-40);
  }

  .footer__logo {
    width: 10rem;
  }

  .footer__content {
    width: 100%;
  }

  .footer__contact {
    gap: var(--space-56);
  }
}

@media (max-width: 850px) {
  .header__logo {
    width: 9rem;
  }

  .header {
    min-height: 10.5rem;
  }

  .footer__logo {
    width: 9rem;
  }

  .footer__content {
    flex-direction: column;
    gap: var(--space-32);
  }

  .footer__contact {
    flex-direction: column;
    gap: var(--space-24);
  }

  .footer__nav {
    flex-direction: row;
    gap: var(--space-32);
  }
}

/* ============================================================
   RESPONSIVE – Mobile (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --size-hl-lg: 1.75rem;
    --size-hl-md: 1.5rem;
    --size-hl-sm: 1.25rem;
    --size-subhead-lg: 1.25rem;
    --size-subhead-sm: 0.875rem;
    --size-body-lg: 1.25rem;
    --size-body-md: 1rem;
  }

  /* Header */
  .header {
    padding: var(--space-40) var(--page-padding-mobile);
    min-height: 9.5rem;
  }

  .header__logo {
    width: 8rem;
  }

  /* Hero */
  .hero {
    height: 23rem;
  }

  .hero__image--desktop {
    display: none;
  }

  .hero__image--mobile {
    display: block;
  }

  /* Intro */
  .intro {
    flex-direction: column;
    padding: var(--space-48) var(--page-padding-mobile) var(--space-24);
    gap: var(--space-48);
  }

  .intro__text {
    width: 100%;
    gap: var(--space-24);
  }

  .intro__headline {
    font-size: 1.75rem;
  }

  .intro__subheadline {
    font-size: 1.25rem;
  }

  .contact-card {
    width: 100%;
    padding: var(--space-24);
    gap: var(--space-16);
  }

  .contact-card__title {
    font-size: var(--size-hl-sm);
  }

  .contact-card__address,
  .contact-card__details {
    font-size: var(--size-body-lg);
  }

  /* Services */
  .services {
    flex-direction: column;
    padding: var(--space-24) var(--page-padding-mobile) var(--space-80);
    gap: var(--space-48);
  }

  .services__intro {
    width: 100%;
    gap: var(--space-16);
  }

  .services__headline {
    font-size: 1.5rem;
    margin-top: 0.875rem;
  }

  .services__description {
    margin-top: 0.125rem;
  }

  .services__list {
    width: 100%;
    max-width: 100%;
    gap: var(--space-32);
  }

  .service-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .service-item__icon {
    width: 5.25rem;
    height: 5.25rem;
    justify-content: flex-start;
    align-items: flex-start;
    margin-left: -0.875rem;
    margin-bottom: -0.5rem;
  }

  .service-item__icon img {
    width: 5.25rem;
    height: 5.25rem;
  }

  .service-item__content {
    gap: 0.875rem;
  }

  /* Footer */
  .footer {
    padding: var(--space-48) 0;
  }

  .footer__inner {
    padding: 0 var(--page-padding-mobile);
    flex-direction: column;
    gap: var(--space-48);
  }

  .footer__logo {
    width: 8rem;
  }

  .footer__content {
    flex-direction: column;
    gap: var(--space-48);
  }

  .footer__contact {
    flex-direction: column;
    gap: var(--space-40);
    font-size: var(--size-body-lg);
  }

  .footer__nav {
    gap: var(--space-32);
    font-size: 1rem;
  }

  /* Subpages */
  .subpage {
    padding: var(--space-48) var(--page-padding-mobile);
  }

  .subpage__headline {
    font-size: 1.5rem;
    margin-bottom: var(--space-32);
  }

  .subpage__content p {
    font-size: 0.9375rem;
  }

  .subpage__content h2 {
    font-size: 1.1875rem;
    margin-top: var(--space-32);
  }

  .header--static {
    padding: var(--space-40) var(--page-padding-mobile);
  }
}