/* roboto-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/roboto-v51-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/roboto-v51-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/roboto-v51-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* =========================================================
   BASE DESIGN SYSTEM
========================================================= */

:root {
  /* Colors from the reference template */
  --color-primary: #2e6eae;
  --color-secondary: #e13c04;

  --color-text: #2e2e2e;
  --color-light: #ffffff;
  --color-surface: #f4f7fa;
  --color-primary-dark: #24598d;
  --color-primary-soft: #dcebf7;

  /* Shared page rhythm (index.css is the reference) */
  --content-width: 80%;
  --section-space: clamp(80px, 7vw, 100px);
  --section-padding: clamp(60px, 6vw, 80px);
  --title-to-content: clamp(40px, 4vw, 60px);
  --heading-to-copy: clamp(20px, 2vw, 24px);
  --copy-gap: 16px;
  --copy-to-action: clamp(24px, 2.5vw, 32px);
  --card-gap: clamp(24px, 3vw, 40px);
  --card-padding: clamp(24px, 3vw, 40px);

  /* Typography */
  --font-family-base: "Roboto";

  --font-size-body: 18px;
  --line-height-body: 1.5;

  --font-size-h1: clamp(36px, 4vw, 64px);
  --font-size-h2: clamp(28px, 3vw, 44px);
  --font-size-h3: clamp(22px, 2.2vw, 24px);
  --font-size-h4: clamp(18px, 1.6vw, 28px);

  --line-height-heading: 1.15;

  /* Horizontal spacing */
  --page-padding: max(5%, calc((100% - var(--content-width)) / 2));

  /* Vertical spacing */
  --section-gap: 140px;

  /* Spacing system – divisible by 4 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;

  /* Border radius based on the reference template */
  --radius-small: 8px;
  --radius-medium: 20px;
  --radius-large: 40px;
  --radius-image: 50px;

  /* Borders */
  --border-width: 1px;
  --border-width-accent: 12px;

  /* Allowed transitions */
  --transition-interactive:
    color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease,
    text-decoration-color 0.2s ease;
}

/* =========================================================
   RESET
========================================================= */

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

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

section {
  scroll-margin-top: 100px;
}

body {
  min-width: 320px;
  margin: 0;

  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);

  color: var(--color-text);
  background-color: var(--color-light);
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  padding: 0;
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

/* =========================================================
   TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4 {
  font-family: var(--font-family-base);
  font-weight: 900;
  line-height: var(--line-height-heading);
  overflow-wrap: anywhere;
}

h1 {
  font-size: var(--font-size-h1);
}

h2 {
  font-size: var(--font-size-h2);
  color: var(--color-primary);
}

h3 {
  font-size: var(--font-size-h3);
}

h4 {
  font-size: var(--font-size-h4);
}

p,
li {
  font-size: inherit;
}

p + p {
  margin-top: var(--space-4);
}

strong {
  font-weight: 700;
}

/* =========================================================
   LINKS AND INTERACTIVE ELEMENTS
========================================================= */

a {
  color: var(--color-primary);
  text-decoration-line: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 4px;

  transition: var(--transition-interactive);
}

a:hover {
  color: var(--color-secondary);
  text-decoration-thickness: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 4px;
}

/* =========================================================
   PAGE LAYOUT
========================================================= */

main {
  width: 100%;
}

.content-width {
  width: 100%;
  padding-inline: var(--page-padding);
}

.full-width-section {
  width: 100%;
}

.section-gap {
  margin-top: var(--section-gap);
}

/* =========================================================
   CONTENT SPACING
========================================================= */

.flow > * + * {
  margin-top: var(--space-4);
}

.flow > h1 + *,
.flow > h2 + * {
  margin-top: var(--space-7);
}

.flow > h3 + *,
.flow > h4 + * {
  margin-top: var(--space-5);
}

.flow--compact > * + * {
  margin-top: var(--space-3);
}

.flow--large > * + * {
  margin-top: var(--space-7);
}

/* =========================================================
   BASIC RESPONSIVE LAYOUT
========================================================= */

.two-column-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  gap: clamp(32px, 5vw, 96px);
  align-items: center;
}

.three-column-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: clamp(24px, 3vw, 48px);
}

.two-column-layout > *,
.three-column-layout > * {
  min-width: 0;
}

/* =========================================================
   RESPONSIVE MEDIA
========================================================= */

.responsive-media {
  width: 100%;
  height: auto;
}

.media-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-rounded {
  border-radius: var(--radius-image);
}

.media-accent-border {
  border: var(--border-width-accent) solid var(--color-secondary);
}
.full-width-media {
  width: 100%;
}

.full-width-media img {
  width: 100%;
  height: auto;
}

.media-frame {
  overflow: hidden;
}

.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   BASIC BUTTON SYSTEM
========================================================= */

.button--primary {
  color: var(--color-light);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.button--primary:hover,
.button--primary:focus-visible {
  color: var(--color-light);
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.button--secondary {
  color: var(--color-light);
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.button--secondary:hover,
.button--secondary:focus-visible {
  color: var(--color-light);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.button--outline {
  color: var(--color-primary);
  background-color: transparent;
  border-color: var(--color-primary);
}

.button--outline:hover,
.button--outline:focus-visible {
  color: var(--color-light);
  background-color: var(--color-primary);
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1023px) {
  :root {
    --section-gap: 104px;
  }

  .three-column-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .two-column-layout {
    gap: clamp(32px, 6vw, 64px);
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
  :root {
    --page-padding: 5%;
    --section-gap: 72px;

    --font-size-body: 16px;

    --font-size-h1: clamp(32px, 10vw, 44px);
    --font-size-h2: clamp(28px, 8vw, 38px);
    --font-size-h3: clamp(22px, 6vw, 30px);
    --font-size-h4: clamp(20px, 5vw, 24px);

    --radius-large: 28px;
    --radius-image: 28px;
  }

  .two-column-layout,
  .three-column-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .two-column-layout,
  .three-column-layout {
    gap: var(--space-7);
  }

  .responsive-media {
    width: 100%;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {
  .button-group {
    gap: var(--space-3);
  }
}

/* =========================================================
   HEADER
========================================================= */

:root {
  --header-height: 120px;
  --header-bg: var(--color-light);
  --header-border: rgba(46, 46, 46, 0.12);
}

.header {
  position: fixed;
  inset: 0 0 auto;

  width: 100%;
  height: var(--header-height);

  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);

  z-index: 1000;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;

  height: 100%;
  padding-inline: var(--page-padding);

  gap: var(--space-7);
}

.logo {
  flex-shrink: 0;

  width: clamp(90px, 7vw, 105px);

  text-decoration: none;
}

.logo img {
  width: 100%;
  height: auto;
}

/* =========================================================
   NAVIGATION
========================================================= */

.navigation {
  margin-left: auto;
}

.navigation-list {
  display: flex;
  align-items: center;

  gap: clamp(24px, 2vw, 42px);

  list-style: none;
}

.navigation-list > li {
  position: relative;
}

.navigation-list > li > a {
  display: flex;
  align-items: center;

  min-height: 48px;

  color: var(--color-text);

  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;

  text-decoration: none;

  transition: var(--transition-interactive);
}

.navigation-list > li > a:hover,
.navigation-list > li > a:focus-visible,
.navigation-list > li > a.active,
.navigation-list > li > a[aria-current="page"] {
  color: var(--color-secondary);
}

/* =========================================================
   DROPDOWN
========================================================= */

.navigation-dropdown > a {
  gap: 6px;
}

.navigation-dropdown > a::after {
  content: "";

  width: 6px;
  height: 6px;

  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;

  transform: rotate(45deg);
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;

  min-width: 260px;

  padding: 12px 0;

  list-style: none;

  background: var(--color-light);

  border: 1px solid var(--header-border);
  border-radius: var(--radius-small);

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}

.dropdown-menu li + li {
  margin-top: 2px;
}

.dropdown-menu a {
  display: block;

  padding: 10px 20px;

  color: var(--color-text);

  font-size: 15px;

  text-decoration: none;

  transition: var(--transition-interactive);
}

.dropdown-menu a:hover,
.dropdown-menu a:focus-visible {
  color: var(--color-light);
  background: var(--color-primary);
}

.navigation-dropdown:hover .dropdown-menu,
.navigation-dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
}

/* =========================================================
   BURGER
========================================================= */

.menu-button {
  display: none;

  width: 48px;
  height: 48px;
  padding: 10px;

  background: transparent;

  border: 1px solid var(--color-primary);
  border-radius: var(--radius-small);

  cursor: pointer;

  transition: var(--transition-interactive);
}

.menu-button span {
  display: block;

  width: 100%;
  height: 2px;

  background: var(--color-primary);
}

.menu-button span + span {
  margin-top: 6px;
}

.menu-button:hover,
.menu-button:focus-visible,
.menu-button[aria-expanded="true"] {
  background: var(--color-primary);
}

.menu-button:hover span,
.menu-button:focus-visible span,
.menu-button[aria-expanded="true"] span {
  background: var(--color-light);
}

/* =========================================================
   OFFSET
========================================================= */

body {
  padding-top: var(--header-height);
}

.content-image,
.service-guide,
.cta-banner-content,
.eob-benefits,
.home-process-inner,
.regional-service,
.contact-content {
  width: var(--content-width);
  margin: 0 auto;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1023px) {
  :root {
    --header-height: 88px;
  }

  .menu-button {
    display: block;
  }

  .navigation {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    width: 100%;
    background: var(--color-light);
    border-top: 1px solid var(--header-border);

    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .navigation.is-open {
    display: block;
  }

  .navigation-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;

    padding: 20px var(--page-padding);
  }

  .navigation-list > li > a {
    min-height: 52px;

    border-bottom: 1px solid var(--header-border);
  }

  .dropdown-menu {
    position: static;

    display: none;

    min-width: 100%;

    margin-bottom: 12px;

    border: 0;
    border-radius: 0;

    opacity: 1;
    visibility: visible;
  }

  .navigation-dropdown.is-open .dropdown-menu {
    display: block;
  }

  .navigation-dropdown .dropdown-menu {
    display: none;
    position: static;
    opacity: 1;
    visibility: visible;
  }

  .navigation-dropdown.is-open .dropdown-menu {
    display: block;
  }
}

/* =========================================================
   FIXED CONTACT
========================================================= */

.hero-contact {
  position: fixed;
  z-index: 900;
  top: calc(var(--header-height) + var(--space-2));
  right: 0;

  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.hero-contact a {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;

  background-color: var(--color-primary);
  border-radius: var(--radius-small) 0 0 var(--radius-small);

  text-decoration: none;

  transition: var(--transition-interactive);
}

.hero-contact a:hover,
.hero-contact a:focus-visible,
.hero-contact a:active {
  background-color: var(--color-secondary);
}

.hero-contact img {
  width: 24px;
  height: 24px;
}

/* =========================================================
   FIXED LEGAL
========================================================= */

.hero-legal {
  position: fixed;
  z-index: 900;
  right: var(--space-2);
  bottom: var(--space-2);

  display: flex;
  gap: var(--space-2);
}

.hero-legal a {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 44px;
  padding-inline: var(--space-7);

  color: var(--color-light);
  background-color: var(--color-secondary);

  font-size: 14px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;

  transition: var(--transition-interactive);
}

.hero-legal a:hover,
.hero-legal a:focus-visible,
.hero-legal a:active {
  color: var(--color-light);
  background-color: var(--color-primary);
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1023px) {
  .hero {
    min-height: max(680px, calc(100svh - var(--header-height)));
    padding-top: var(--space-11);
    padding-bottom: var(--space-10);
  }

  .hero-content {
    width: min(68%, 720px);
    padding: var(--space-7) var(--page-padding) var(--space-7)
      var(--page-padding);
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
  .hero {
    align-items: stretch;

    min-height: calc(100svh - var(--header-height));
    padding: 0;

    background-position: center;
    background-attachment: scroll;
  }

  .hero-content {
    justify-content: center;

    width: 100%;
    min-height: calc(100svh - var(--header-height));
    padding: clamp(56px, 12vw, 80px) var(--page-padding)
      clamp(112px, 24vw, 144px);

    background-color: rgba(255, 255, 255, 0.88);
    border-radius: 0;
  }

  .hero-content .button {
    width: 100%;
  }

  .hero-contact a {
    width: 44px;
    height: 44px;
  }

  .hero-legal {
    right: 0;
    bottom: 0;
    left: 0;

    gap: var(--space-1);
  }

  .hero-legal a {
    flex: 1;

    min-width: 0;
    padding-inline: var(--space-3);

    font-size: 13px;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {
  .hero-content {
    justify-content: flex-start;

    padding-top: var(--space-10);
    padding-bottom: 112px;
  }
}
/* =========================================================
   HERO BUTTON
========================================================= */

.hero .button {
  align-self: flex-start;
  margin-top: var(--space-3);
}

/* =========================================================
   FIXED CONTACT
========================================================= */

.hero-contact {
  position: fixed;
  top: calc(var(--header-height) + var(--space-4));
  right: 0;

  display: flex;
  flex-direction: column;

  z-index: 900;
}

.hero-contact a {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 56px;
  height: 56px;

  background: var(--color-primary);

  text-decoration: none;

  transition: var(--transition-interactive);
}

.hero-contact a:first-child {
  border-radius: var(--radius-small) 0 0 0;
}

.hero-contact a:last-child {
  border-radius: 0 0 0 var(--radius-small);
}

.hero-contact a:hover,
.hero-contact a:focus-visible {
  background: var(--color-secondary);
}

.hero-contact a:last-child img {
  width: 35px;
}

/* =========================================================
   FIXED LEGAL
========================================================= */

.hero-legal {
  position: fixed;
  right: 0;
  bottom: 0;

  display: flex;

  z-index: 900;
}

.hero-legal a:first-child {
  border-radius: var(--radius-small) 0 0 0;
}
.hero-legal a:last-child {
  border-radius: 0 var(--radius-small) 0 0;
}

.hero-legal a {
  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 170px;
  height: 48px;

  padding-inline: var(--space-6);

  color: var(--color-light);

  background: var(--color-secondary);

  text-decoration: none;

  transition: var(--transition-interactive);
}

.hero-legal a:hover,
.hero-legal a:focus-visible {
  background: var(--color-primary);
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1023px) {
  .hero {
    align-items: flex-end;
  }

  .hero-content {
    width: 100%;
    max-width: 100%;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
  .hero {
    min-height: auto;

    padding-top: 120px;
    padding-bottom: 120px;

    background-position: 70% center;
  }

  .hero-content {
    padding: 24px;
  }

  .hero-subtitle {
    font-size: 22px;
  }

  .hero-contact {
    top: auto;
    bottom: 56px;

    flex-direction: row;
  }

  .hero-contact a:first-child {
    border-radius: var(--radius-small) 0 0 0;
  }

  .hero-contact a:last-child {
    border-radius: 0;
  }

  .hero-legal {
    left: 0;
    right: 0;
  }

  .hero-legal a {
    flex: 1;
    min-width: auto;
  }
}

/* =========================================================
   HERO
========================================================= */

.hero {
  position: relative;
  height: 750px;
  background-image: url("../images/header.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.hero--about {
    background-image: url("../images/header-ueber-uns.jpg");
}

.hero--beratungskosten {
    background-image: url("../images/header-beratungskosten.jpg");
}

.hero-content {
  position: absolute;
  left: 0;
  bottom: 80px;
  width: auto;
  max-width: 850px;
  padding: 28px 80px 28px 100px;
  background-color: hsla(0, 0%, 100%, 0.8);
  border-radius: 0 20px 20px 0;
}

.hero-content h1 {
  padding: 0;
  color: var(--color-secondary);
  font-size: 35px;
  line-height: 40px;
}

.hero-subtitle {
  margin-top: 12px;
  color: var(--color-primary);
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}

@media (max-width: 900px) {
  .hero {
    height: 560px;
    min-height: 0;
  }

  .hero-content {
    right: 30px;
    bottom: 30px;
    width: auto;
    max-width: none;
    min-height: 0;
    padding: 22px 30px;
    border-radius: 0 20px 20px 0;
  }
}

@media (max-width: 600px) {
  .hero {
    height: 480px;
    min-height: 0;
  }

  .hero-content {
    right: 20px;
    bottom: 20px;
    width: auto;
    min-height: 0;
    padding: 20px;
  }

  .hero-content h1 {
    font-size: 28px;
    line-height: 32px;
  }

  .hero-subtitle {
    margin-top: 10px;
    font-size: 20px;
    line-height: 26px;
  }
}

/* =========================================================
   CONTENT WITH IMAGE
========================================================= */
.content-image {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(48px, 6vw, 96px);
  margin: var(--section-space) auto;
}

.content-text,
.content-picture {
  min-width: 0;
}

.content-text h2 {
  margin-bottom: var(--space-7);
}

.content-text p + p {
  margin-top: var(--space-4);
}

.content-highlight {
  margin-top: var(--space-7);
}

.content-picture img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: var(--border-width-accent) solid var(--color-secondary);
  border-radius: var(--radius-image);
}

@media (max-width: 900px) {
  .content-image {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .content-picture {
    order: 2;
  }

  .content-text {
    order: 1;
  }
}

@media (max-width: 620px) {
  .content-picture {
    width: calc(100% + (var(--page-padding) * 2));
    margin-left: calc(var(--page-padding) * -1);
  }
}
/* =========================================================
   CTA BANNERS
========================================================= */

.cta-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-top: var(--section-space);
  background-image: url("../images/puffer1.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.cta-banner--blue {
  background-image: url("../images/parallax-9.jpg");
}

.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-primary);
  opacity: 0.88;
}

.cta-banner-content {
  position: relative;
  z-index: 1;
  width: min(58%, 1000px);
  margin-inline: auto;
  padding-block: var(--section-padding);
  text-align: center;
}

.cta-banner--home::before {
  background-color: var(--color-secondary);
}

.cta-banner h2 {
  margin: 0 0 var(--heading-to-copy);
  color: var(--color-light);
  font-size: clamp(32px, 3.5vw, 44px);
  line-height: 1.08;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.cta-banner p {
  margin: 0;
  color: var(--color-light);
}

.cta-banner .button {
  margin-top: var(--copy-to-action);
}

.cta-banner--home .button {
  background-color: var(--color-light);
  color: var(--color-primary);
  border: solid 1px var(--color-light);
}

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border: 1px solid var(--color-primary);
  border-radius: 8px;
  background-color: var(--color-primary);
  color: var(--color-light);
  font-size: 17px;
  text-align: center;
  text-decoration: none;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.button:hover,
.button:focus-visible {
  border-color: #24598d;
  background-color: #24598d;
  color: var(--color-light);
}

.button-white {
  border-color: var(--color-light);
  background-color: var(--color-light);
  color: var(--color-primary);
}

.button-white:hover,
.button-white:focus-visible {
  border-color: var(--color-light);
  background-color: transparent;
  color: var(--color-light);
}

.button:focus-visible {
  outline: 3px solid rgba(225, 60, 4, 0.4);
  outline-offset: 4px;
}

@media (max-width: 1023px) {
  .cta-banner {
    background-attachment: scroll;
  }
}

/* =========================================================
   CONTACT
========================================================= */

.contact {
  padding-block: clamp(72px, 8vw, 120px);
  background-color: var(--color-primary);
  color: var(--color-light);
  width: 100%;
  padding: 80px 0;
}

.contact-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.7fr);
  gap: clamp(48px, 7vw, 120px);
  align-items: center;

  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 80%;
  margin: 0 auto;
  gap: 60px;
}

.contact-text {
  max-width: 500px;
}
.contact-text h2 {
  margin: 0 0 32px;
  color: var(--color-light);
  font-size: clamp(32px, 3.2vw, 36px);
  font-weight: 600;
}

.contact-text p {
  margin-bottom: 18px;
  color: var(--color-light);
  font-weight: 600;
}

.contact-text p:last-child {
  margin-bottom: 0;
}

.contact-text a {
  color: var(--color-light);
  text-underline-offset: 4px;
  transition:
    color 0.2s ease,
    text-decoration-color 0.2s ease;
  position: relative;
  text-decoration: none;
}

.strich-a {
  position: relative;
  text-decoration: none;
}

.strich-a:hover {
  color: var(--color-primary);
}

.contact-text a::after,
.strich-a::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 30%;
  height: 1px;
  background-color: #ffffff;
  transition: width 0.3s ease;
}

.contact-text a:hover,
.contact-text a:focus-visible {
  color: #e6e4fb;
  text-decoration-color: transparent;
}

.contact-text a:hover::after,
.strich-a:hover::after {
  width: 100%;
}
.strich-a.blau::after {
  background-color: var(--color-primary);
}

.contact-text a:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.45);
  outline-offset: 4px;
}

.contact-logos {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 30px;
}

.contact-logos img {
  display: block;
  width: clamp(600px, 200px, 400px);
  height: auto;
  max-height: 320px;
  object-fit: contain;
  padding: 16px;
  border-radius: 20px;
  background-color: var(--color-light);
}

.contact-address div {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  align-items: center;
}

@media (max-width: 900px) {
  .contact-content {
    flex-direction: column;
    align-items: flex-start;
  }

  .contact-logos {
    justify-content: flex-start;
  }
}

@media (max-width: 600px) {
  .contact-content {
    width: 88%;
  }

  .contact-logos img {
    max-width: 140px;
  }
}

/* =========================================================
   RESPONSIVE: MEDIUM DESKTOP / TABLET
========================================================= */

@media (max-width: 1180px) {
  .services-grid,
  .service-guide-grid,
  .eob-benefits-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-process-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-process-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* =========================================================
   RESPONSIVE: TABLET
========================================================= */

@media (max-width: 900px) {
  .content-image,
  .section-title,
  .regional-service-inner,
  .contact-content {
    grid-template-columns: minmax(0, 1fr);
  }

  .section-title {
    gap: 16px;
  }

  .content-image.reverse .content-picture {
    order: initial;
  }

  .content-picture {
    order: 2;
  }

  .content-text {
    order: 1;
  }

  .cta-banner-content {
    width: 78%;
  }

  .home-process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-logos {
    max-width: 560px;
  }
}

/* =========================================================
   RESPONSIVE: MOBILE
========================================================= */

@media (max-width: 620px) {
  .content-image {
    gap: 32px;
  }

  .content-picture {
    width: calc(100% + 10%);
    margin-left: -5%;
  }

  .content-picture img {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .content-highlight {
    padding: 20px;
    border-left-width: 6px;
  }

  .services-grid,
  .service-guide-grid,
  .eob-benefits-grid,
  .home-process-grid,
  .contact-logos {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-card {
    border-radius: 32px;
  }

  .service-guide-item {
    padding: 24px;
  }

  .cta-banner {
    background-attachment: scroll;
  }

  .cta-banner-content {
    width: 80%;
    margin: 0 auto;
  }

  .home-process-inner {
    gap: 48px;
  }

  .regional-service-inner,
  .contact-content {
    gap: var(--card-gap);
  }

  .contact-logos {
    gap: 16px;
  }
}

/* =========================================================
   VERY SMALL SCREENS
========================================================= */

@media (max-width: 380px) {
  .service-card-content,
  .service-guide-item {
    padding: 20px;
  }

  .button {
    width: 100%;
    padding-inline: 20px;
  }

  .contact-logos img {
    padding: 12px;
  }
}

/* =========================================================
   CONTENT + IMAGE
========================================================= */

.content-text,
.content-picture {
  min-width: 0;
}

.content-text h2 {
  margin-bottom: var(--heading-to-copy);
  color: var(--color-primary);
  font-size: clamp(32px, 3.2vw, 44px);
  line-height: 1.08;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.content-text p + p {
  margin-top: 16px;
}

.content-picture img {
  display: block;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border: clamp(6px, 0.7vw, 12px) solid var(--color-secondary);
  border-radius: clamp(28px, 3vw, 50px);
}

.content-image.reverse .content-picture {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.content-highlight {
  margin-top: clamp(24px, 3vw, 40px);
  padding: clamp(20px, 2vw, 28px);
  border-left: 8px solid var(--color-secondary);
  border-radius: 0 20px 20px 0;
  background-color: var(--color-surface);
}

.content-highlight p {
  margin: 0;
  color: var(--color-text);
}

.section-label {
  margin-bottom: 12px;
  color: var(--color-secondary);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* =========================================================
   SHARED PAGE RHYTHM
   index.css defines the visual reference; all subpages use
   these same dimensions and relationship-specific gaps.
========================================================= */

:where(
  .services,
  .service-guide,
  .eob-benefits,
  .construction-services,
  .construction-process,
  .services-overview,
  .funding-programs,
  .funding-services,
  .funding-process,
  .heating-data,
  .heating-process,
  .proof-context,
  .proof-overview,
  .proof-difference,
  .proof-process,
  .certificate-duty,
  .certificate-types,
  .certificate-details,
  .certificate-service-info,
  .check-audience,
  .building-overview,
  .isfp-check,
  .isfp-process,
  .info-section,
  .moisture-protection,
  .process-section,
  .construction-support
) {
  width: var(--content-width);
  margin: var(--section-space) auto;
}

:where(
  .construction-funding-content,
  .construction-costs-inner,
  .costs-content,
  .funding-costs-content,
  .proof-costs-inner,
  .certificate-costs-inner,
  .cta-banner-content,
  .contact-content
) {
  width: var(--content-width);
  margin-inline: auto;
}

.section-title {
  margin-bottom: var(--title-to-content);
}

.section-title h2 {
  margin-bottom: var(--heading-to-copy);
  color: var(--color-primary);
  font-size: clamp(32px, 3.2vw, 44px);
  line-height: 1.08;
}

.section-title p + p {
  margin-top: var(--copy-gap);
}

:where(.content-text, .section-title, .contact-text) p + p {
  margin-top: var(--copy-gap);
}

:where(.content-text, .content-list) ul,
ul.content-list {
  margin-block: var(--heading-to-copy);
  padding-left: var(--space-5);
}

:where(.content-text, .content-list) li + li,
ul.content-list li + li {
  margin-top: var(--space-1);
}

:where(.content-text, .content-list) li::marker,
ul.content-list li::marker {
  color: var(--color-secondary);
}

:where(
  .services-grid,
  .service-guide-grid,
  .eob-benefits-grid,
  .home-process-grid,
  .construction-services-grid,
  .construction-measures-grid,
  .construction-process-grid,
  .services-overview-grid,
  .funding-programs-grid,
  .funding-services-grid,
  .funding-process-grid,
  .heating-process-grid,
  .proof-process-grid,
  .certificate-duty-grid,
  .building-overview-grid,
  .isfp-process-grid,
  .moisture-protection-grid,
  .process-grid
) {
  gap: var(--card-gap);
}

:where(
  .service-overview-card,
  .funding-program-card,
  .funding-services-grid article,
  .funding-process-grid article,
  .heating-data-box,
  .heating-data-note,
  .heating-process-grid article,
  .construction-services-grid article,
  .construction-process-grid article,
  .proof-process-grid article,
  .certificate-duty-grid article,
  .isfp-process-grid article,
  .moisture-protection-card,
  .process-item
) {
  padding: var(--card-padding);
  border-radius: var(--radius-large);
}

:where(
  .construction-costs,
  .costs,
  .funding-costs,
  .proof-costs,
  .certificate-costs,
  .cta-banner
) {
  margin-top: var(--section-space);
}

:where(
  .construction-funding,
  .construction-costs-inner,
  .costs-content,
  .funding-costs-content,
  .proof-costs-inner,
  .certificate-costs-inner,
  .cta-banner-content
) {
  padding-block: var(--section-padding);
}

:where(
    .content-text,
    .construction-costs-inner,
    .costs-content,
    .funding-costs-content,
    .proof-costs-inner,
    .certificate-costs-inner,
    .cta-banner-content
  )
  .button {
  margin-top: var(--copy-to-action);
}

@media (max-width: 620px) {
  :root {
    --content-width: 90%;
    --card-gap: 30px;
    --card-padding: 30px;
  }

  .section-title {
    margin-bottom: var(--title-to-content);
  }
}

@media (max-width: 380px) {
  :root {
    --card-padding: 20px;
  }
}

/* =========================================================
   algemei
========================================================= */
.flex {
  display: flex;
}

.vertical-center {
  align-items: center;
  gap: 20px;
}

.strich {
  height: 3px;
  background-color: #e13c04;
  min-width: 12px;
  display: block;
}

.max-width {
  max-width: 900px;
}

.contact-text img {
  width: 18px;
}