/* ================================================================
   yourfreelancer.de — style.css
   /webdesign-freelancer-brandenburg/ · style.css

   Inhaltsverzeichnis
   ──────────────────
   01  Design Tokens
   02  Reset & Basis
   03  Barrierefreiheit
   04  Layout-Utilities
   05  Typografie
   06  Buttons
   07  Cookie-Banner
   08  Header & Navigation
   09  Breadcrumb
   10  Hero
   11  Intro
   12  Leistungen
   13  Arbeitsweise
   14  Ablauf
   15  Region
   16  FAQ
   17  Kontakt & Formular
   18  Footer
   19  Scroll Reveal
   20  Responsive (Tablet · Desktop)
   21  Reduced Motion & High Contrast
================================================================ */


/* ── 01  DESIGN ────────────────────────────────────────── */
:root {
  /* Exklusives dunkles Blau – Hauptpalette */
  --ink:        #0f1f3d;   /* tiefstes Marineblau · Überschriften */
  --blue:       #1a3a6e;   /* Primärblau · Buttons, Akzente       */
  --blue-hover: #142f5c;   /* Hover auf Primärblau                */
  --blue-light: #e8eef8;   /* Sehr heller Blauton · Hintergründe  */
  --blue-mid:   #c2d0e8;   /* Mittlerer Blauton · Borders, Pills  */
  --blue-tint:  #f0f4fb;   /* Hauchzartes Blau · Abschnittsbg    */

  /* Neutrale Töne */
  --white:      #ffffff;
  --surface:    #f7f8fa;   /* Leicht getöntes Weiß                */
  --border:     #dde3ed;   /* Dezente Border                      */
  --text:       #2d3748;   /* Fließtext · Dark Gray               */
  --text-muted: #6b7a99;   /* Sekundärtext                        */
  --text-light: #9aaac2;   /* Labels, Metadaten                   */

  /* Typografie */
  --font: 'Inter', system-ui, -apple-system, sans-serif;

  /* Abstände */
  --space-xs:  .375rem;
  --space-sm:  .75rem;
  --space-md:  1.25rem;
  --space-lg:  2rem;
  --space-xl:  3.5rem;
  --space-2xl: 5.5rem;

  /* Radien · minimal, nicht verspielt */
  --r-xs: 3px;
  --r-sm: 5px;
  --r:    8px;

  /* Schatten · dezent */
  --shadow-sm: 0 1px 3px rgba(15, 31, 61, .07);
  --shadow:    0 4px 16px rgba(15, 31, 61, .09);
  --shadow-lg: 0 12px 36px rgba(15, 31, 61, .12);

  /* Übergänge */
  --ease: 180ms ease;

  /* Container */
  --container: 1100px;
}


/* ── 02  RESET & BASIS ────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

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

body {
  font-family:             var(--font);
  font-size:               1rem;
  line-height:             1.7;
  color:                   var(--text);
  background:              var(--white);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

ul,
ol {
  list-style: none;
}

button {
  cursor:     pointer;
  font:       inherit;
  border:     none;
  background: none;
  padding:    0;
}

abbr[title] {
  text-decoration: underline dotted;
  cursor:          help;
}

p + p {
  margin-top: .75rem;
}


/* ── 03  BARRIEREFREIHEIT ─────────────────────────────────────── */

/* Skip Link – nur bei Tastaturfokus sichtbar */
.skip-link {
  position:      fixed;
  top:           -120%;
  left:          1rem;
  z-index:       9999;
  background:    var(--blue);
  color:         var(--white);
  padding:       .6rem 1.1rem;
  border-radius: 0 0 var(--r) var(--r);
  font-size:     .875rem;
  font-weight:   600;
  transition:    top .2s ease;
}
.skip-link:focus {
  top: 0;
}

/* Fokus-Ring – Tastaturnavigation */
:focus-visible {
  outline:        2px solid var(--blue);
  outline-offset: 3px;
  border-radius:  var(--r-xs);
}
:focus:not(:focus-visible) {
  outline: none;
}


/* ── 04  LAYOUT-UTILITIES ─────────────────────────────────────── */

/* Zentrierender Container */
.wrap {
  width:          min(100%, var(--container));
  margin-inline:  auto;
  padding-inline: var(--space-md);
}

/* Gemeinsame Section-Abstände */
.section {
  padding-block: var(--space-2xl);
}
.section--tinted {
  background: var(--blue-tint);
}

/* Scroll Reveal */
.reveal {
  opacity:    0;
  transform:  translateY(18px);
  transition: opacity .45s ease, transform .45s ease;
}
.reveal.in {
  opacity:   1;
  transform: none;
}


/* ── 05  TYPOGRAFIE ───────────────────────────────────────────── */

/* Kleines Label über Überschriften */
.label {
  display:        block;
  font-size:      .72rem;
  font-weight:    600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          var(--blue);
  margin-bottom:  .65rem;
}

.section__title {
  font-size:      clamp(1.65rem, 4.5vw, 2.4rem);
  font-weight:    700;
  color:          var(--ink);
  letter-spacing: -.025em;
  line-height:    1.2;
  margin-bottom:  1rem;
}

.section__sub {
  font-size:   1.05rem;
  color:       var(--text-muted);
  max-width:   540px;
  line-height: 1.65;
}

.section__header {
  margin-bottom: var(--space-xl);
}


/* ── 06  BUTTONS ──────────────────────────────────────────────── */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             .5rem;
  padding:         .7rem 1.4rem;
  border-radius:   var(--r-sm);   /* minimal abgerundet */
  font-size:       .9rem;
  font-weight:     600;
  line-height:     1.2;
  min-height:      48px;          /* Touch-Target */
  white-space:     nowrap;
  transition:      background var(--ease), transform var(--ease), box-shadow var(--ease);
  text-decoration: none;
  cursor:          pointer;
  letter-spacing:  .01em;
}

/* Primär */
.btn--primary {
  background: var(--blue);
  color:      var(--white);
  box-shadow: 0 2px 8px rgba(26, 58, 110, .25);
}
.btn--primary:hover {
  background: var(--blue-hover);
  box-shadow: 0 4px 16px rgba(26, 58, 110, .30);
  transform:  translateY(-1px);
}

/* Text-Link-Button */
.btn--text {
  background:  transparent;
  color:       var(--blue);
  padding-inline: .25rem;
  box-shadow:  none;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.btn--text:hover {
  color: var(--blue-hover);
}

/* Volle Breite */
.btn--full {
  width: 100%;
}


/* ── 07  COOKIE-BANNER ────────────────────────────────────────── */
.cookie-banner {
  position:      fixed;
  bottom:        1.25rem;
  left:          1rem;
  right:         1rem;
  z-index:       500;
  max-width:     600px;
  margin-inline: auto;
  background:    var(--white);
  border:        1px solid var(--border);
  border-radius: var(--r);
  box-shadow:    var(--shadow-lg);
  padding:       1.1rem 1.25rem;
  display:       flex;
  flex-direction: column;
  gap:           .65rem;
  transition:    opacity .35s ease, transform .35s ease;
}
.cookie-banner.is-hidden {
  opacity:        0;
  transform:      translateY(12px);
  pointer-events: none;
}

.cookie-banner__title {
  font-size:   .875rem;
  font-weight: 600;
  color:       var(--ink);
}

.cookie-banner__text {
  font-size:   .82rem;
  color:       var(--text-muted);
  line-height: 1.5;
}
.cookie-banner__text a {
  color:           var(--blue);
  text-decoration: underline;
}

.cookie-banner__btn {
  align-self:    flex-start;
  background:    var(--blue);
  color:         var(--white);
  padding:       .5rem 1.1rem;
  border-radius: var(--r-sm);
  font-size:     .82rem;
  font-weight:   600;
  min-height:    40px;
  transition:    background var(--ease);
}
.cookie-banner__btn:hover {
  background: var(--blue-hover);
}


/* ── 08  HEADER & NAVIGATION ──────────────────────────────────── */
.site-header {
  position:          sticky;
  top:               0;
  z-index:           200;
  background:        rgba(255, 255, 255, .95);
  backdrop-filter:   blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom:     1px solid var(--border);
}

.site-header__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          62px;
  gap:             1rem;
}

/* Logo */
.logo {
  display:         flex;
  align-items:     center;
  gap:             .55rem;
  text-decoration: none;
  flex-shrink:     0;
}
.logo__mark {
  width:          34px;
  height:         34px;
  background:     var(--blue);
  color:          var(--white);
  font-weight:    700;
  font-size:      .82rem;
  letter-spacing: -.01em;
  display:        grid;
  place-items:    center;
  border-radius:  var(--r-sm);
  flex-shrink:    0;
  transition:     background var(--ease);
}
.logo:hover .logo__mark {
  background: var(--blue-hover);
}
.logo__name {
  font-size:      .9rem;
  font-weight:    600;
  color:          var(--ink);
  letter-spacing: -.015em;
}
.logo__dot {
  color: var(--blue);
}

/* Burger */
.nav__burger {
  display:         flex;
  flex-direction:  column;
  gap:             5px;
  padding:         .5rem;
  border-radius:   var(--r-sm);
  min-width:       44px;
  min-height:      44px;
  align-items:     center;
  justify-content: center;
  transition:      background var(--ease);
}
.nav__burger span {
  display:       block;
  width:         20px;
  height:        2px;
  background:    var(--ink);
  border-radius: 1px;
  transition:    var(--ease);
}
.nav__burger:hover {
  background: var(--blue-light);
}

/* Nav Menu – Mobile */
.nav__menu {
  position:       fixed;
  inset:          62px 0 auto 0;
  background:     var(--white);
  border-bottom:  1px solid var(--border);
  padding:        .875rem var(--space-md) 1.25rem;
  display:        flex;
  flex-direction: column;
  gap:            .15rem;
  transform:      translateY(-108%);
  opacity:        0;
  transition:     transform .28s ease, opacity .22s ease;
  pointer-events: none;
  box-shadow:     var(--shadow-lg);
  z-index:        190;
}
.nav__menu.is-open {
  transform:      none;
  opacity:        1;
  pointer-events: all;
}

.nav__link {
  display:       flex;
  align-items:   center;
  padding:       .65rem .875rem;
  border-radius: var(--r-xs);
  font-size:     .9rem;
  font-weight:   500;
  color:         var(--text);
  transition:    background var(--ease), color var(--ease);
  min-height:    46px;
}
.nav__link:hover {
  background: var(--blue-light);
  color:      var(--blue);
}

.nav__link--cta {
  background:      var(--blue);
  color:           var(--white) !important;
  border-radius:   var(--r-sm);
  justify-content: center;
  margin-top:      .4rem;
}
.nav__link--cta:hover {
  background: var(--blue-hover) !important;
}


/* ── 09  BREADCRUMB ───────────────────────────────────────────── */
.breadcrumb {
  padding-block: .75rem;
}
.breadcrumb__list {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         .35rem;
  font-size:   .78rem;
  color:       var(--text-light);
}
.breadcrumb__list a {
  color:      var(--blue);
  transition: color var(--ease);
}
.breadcrumb__list a:hover {
  text-decoration: underline;
}
.breadcrumb__list [aria-current="page"] {
  color: var(--text-muted);
}


/* ── 10  HERO ─────────────────────────────────────────────────── */
.hero {
  padding-block: var(--space-2xl);
  background:    var(--white);
}

.hero__inner {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-xl);
}

.hero__location {
  font-size:      .75rem;
  font-weight:    600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          var(--blue);
  margin-bottom:  .75rem;
}

.hero__headline {
  font-size:      clamp(2.4rem, 7.5vw, 4.2rem);
  font-weight:    700;
  color:          var(--ink);
  letter-spacing: -.035em;
  line-height:    1.1;
  margin-bottom:  1.1rem;
}

.hero__sub {
  font-size:   1.05rem;
  color:       var(--text-muted);
  line-height: 1.65;
  max-width:   500px;
  margin-bottom: 1.75rem;
}

.hero__actions {
  display:   flex;
  flex-wrap: wrap;
  gap:       .875rem;
  align-items: center;
}

/* Hero Bild */
.hero__img-wrap {
  width:         100%;
  border-radius: var(--r);
  overflow:      hidden;
  box-shadow:    var(--shadow-lg);
  background:    var(--blue-light);  /* Placeholder-Farbe bis Bild geladen */
  min-height:    220px;
}
.hero__img {
  width:        100%;
  height:       auto;
  object-fit:   cover;
  display:      block;
}


/* ── 11  INTRO ────────────────────────────────────────────────── */
.intro__inner {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-xl);
}

/* Intro Bild */
.intro__img-wrap {
  width:         100%;
  border-radius: var(--r);
  overflow:      hidden;
  box-shadow:    var(--shadow);
  background:    var(--blue-light);
  min-height:    200px;
}
.intro__img {
  width:      100%;
  height:     auto;
  object-fit: cover;
}

.intro__text p {
  color:       var(--text);
  line-height: 1.75;
}
.intro__text strong {
  color:       var(--ink);
  font-weight: 600;
}

/* Checkliste */
.check-list {
  margin-top: 1.5rem;
  display:    flex;
  flex-direction: column;
  gap:        .5rem;
}
.check-list li {
  display:     flex;
  align-items: center;
  gap:         .65rem;
  font-size:   .9rem;
  color:       var(--text);
  font-weight: 500;
}
.check-list li::before {
  content:       '';
  display:       inline-block;
  width:         18px;
  height:        18px;
  background:    var(--blue);
  border-radius: 50%;
  flex-shrink:   0;
  /* Häkchen via clip-path */
  clip-path: polygon(20% 52%, 42% 72%, 80% 28%, 88% 36%, 42% 88%, 12% 60%);
  /* Fallback: einfaches Symbol wenn clip-path nicht unterstützt */
}


/* ── 12  LEISTUNGEN ───────────────────────────────────────────── */
.service-list {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   1px;          /* Grid-Linien-Effekt */
  background:            var(--border);
  border:                1px solid var(--border);
  border-radius:         var(--r);
  overflow:              hidden;
}

.service-item {
  background:     var(--white);
  padding:        var(--space-lg) var(--space-md);
  display:        flex;
  flex-direction: column;
  gap:            .75rem;
  transition:     background var(--ease);
}
.service-item:hover {
  background: var(--blue-tint);
}

/* Featured · Webdesign · mit blauem Akzentstreifen */
.service-item--featured {
  background:  var(--blue);
  color:       var(--white);
  border-left: none;
}
.service-item--featured h3 { color: var(--white); }
.service-item--featured p  { color: rgba(255, 255, 255, .75); }
.service-item--featured .pill-list li {
  background:   rgba(255, 255, 255, .12);
  color:        rgba(255, 255, 255, .9);
  border-color: rgba(255, 255, 255, .2);
}
.service-item--featured:hover {
  background: var(--blue-hover);
}

/* Offene Card */
.service-item--open {
  background: var(--blue-tint);
}

.service-item h3 {
  font-size:      1rem;
  font-weight:    700;
  color:          var(--ink);
  letter-spacing: -.015em;
}

.service-item p {
  font-size:   .9rem;
  color:       var(--text-muted);
  line-height: 1.6;
}

/* Pill-Tags */
.pill-list {
  display:   flex;
  flex-wrap: wrap;
  gap:       .35rem;
}
.pill-list li {
  font-size:     .72rem;
  font-weight:   500;
  padding:       .2rem .6rem;
  background:    var(--blue-light);
  color:         var(--blue);
  border:        1px solid var(--blue-mid);
  border-radius: var(--r-xs);
  letter-spacing: .02em;
}

/* Link am Ende einer Card */
.service-link {
  font-size:   .875rem;
  font-weight: 600;
  color:       var(--blue);
  margin-top:  .25rem;
  align-self:  flex-start;
  transition:  color var(--ease);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.service-link:hover {
  color: var(--blue-hover);
}


/* ── 13  ARBEITSWEISE ─────────────────────────────────────────── */
.arbeitsweise__inner {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-xl);
}

.arbeitsweise__text p {
  color:       var(--text);
  line-height: 1.75;
  max-width:   540px;
}

/* Bild */
.arbeitsweise__img-wrap {
  width:         100%;
  border-radius: var(--r);
  overflow:      hidden;
  box-shadow:    var(--shadow);
  background:    var(--blue-light);
  min-height:    240px;
}
.arbeitsweise__img {
  width:      100%;
  height:     auto;
  object-fit: cover;
}


/* ── 14  ABLAUF ───────────────────────────────────────────────── */
.steps {
  display:        flex;
  flex-direction: column;
  gap:            0;
  position:       relative;
  counter-reset:  step;
}

/* Vertikale Linie */
.steps::before {
  content:    '';
  position:   absolute;
  left:       19px;
  top:        0;
  bottom:     0;
  width:      1px;
  background: var(--border);
}

.step {
  display:    flex;
  gap:        1.25rem;
  padding:    1.5rem 0;
  position:   relative;
}

.step__num {
  width:          40px;
  height:         40px;
  background:     var(--blue);
  color:          var(--white);
  border-radius:  50%;
  display:        grid;
  place-items:    center;
  font-size:      .72rem;
  font-weight:    700;
  letter-spacing: .04em;
  flex-shrink:    0;
  z-index:        1;
  box-shadow:     0 0 0 4px var(--white);  /* Unterbricht die Linie optisch */
}

.step__body h3 {
  font-size:     .95rem;
  font-weight:   700;
  color:         var(--ink);
  margin-bottom: .3rem;
  padding-top:   .5rem;
}
.step__body p {
  font-size: .88rem;
  color:     var(--text-muted);
}


/* ── 15  REGION ───────────────────────────────────────────────── */
.region-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   .5rem;
  max-width:             640px;
  margin-inline:         auto;
  margin-top:            .5rem;
}

.region-grid li {
  background:    var(--white);
  border:        1px solid var(--border);
  border-radius: var(--r-xs);
  padding:       .65rem 1rem;
  font-size:     .875rem;
  font-weight:   500;
  color:         var(--text);
  transition:    border-color var(--ease), color var(--ease);
}
.region-grid li:hover {
  border-color: var(--blue);
  color:        var(--blue);
}


/* ── 16  FAQ ──────────────────────────────────────────────────── */
.faq {
  max-width: 720px;
  margin-inline: auto;
}

.faq__item {
  border-bottom: 1px solid var(--border);
}
.faq__item:first-child {
  border-top: 1px solid var(--border);
}

.faq__btn {
  width:           100%;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             1rem;
  padding:         1rem 0;
  font-size:       .93rem;
  font-weight:     600;
  color:           var(--ink);
  text-align:      left;
  background:      none;
  border:          none;
  cursor:          pointer;
  transition:      color var(--ease);
}
.faq__btn:hover,
.faq__btn[aria-expanded="true"] {
  color: var(--blue);
}

.faq__icon {
  font-size:   1.2rem;
  color:       var(--blue);
  flex-shrink: 0;
  line-height: 1;
  width:       20px;
  text-align:  center;
}

.faq__answer {
  padding-bottom: 1rem;
  font-size:      .88rem;
  color:          var(--text-muted);
  line-height:    1.7;
}


/* ── 17  KONTAKT & FORMULAR ───────────────────────────────────── */
.kontakt__inner {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-xl);
}

.kontakt__text p {
  color:       var(--text-muted);
  font-size:   .97rem;
  line-height: 1.65;
  margin-top:  .75rem;
}

.kontakt__meta {
  margin-top: 1.25rem;
  display:    flex;
  flex-direction: column;
  gap:        .5rem;
}
.kontakt__meta li {
  font-size:   .9rem;
  color:       var(--text);
}
.kontakt__meta a {
  color:       var(--blue);
  font-weight: 600;
}
.kontakt__meta a:hover {
  text-decoration: underline;
}

/* Formular */
.kontakt__form {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
}

.form__row {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
}

.form__group {
  display:        flex;
  flex-direction: column;
  gap:            .35rem;
}

.form__group label {
  font-size:   .82rem;
  font-weight: 600;
  color:       var(--ink);
}

.form__group input,
.form__group textarea {
  width:         100%;
  padding:       .7rem .875rem;
  border:        1px solid var(--border);
  border-radius: var(--r-sm);
  background:    var(--white);
  color:         var(--ink);
  font-family:   var(--font);
  font-size:     .9rem;
  line-height:   1.5;
  transition:    border-color var(--ease), box-shadow var(--ease);
  resize:        vertical;
}
.form__group input::placeholder,
.form__group textarea::placeholder {
  color: var(--text-light);
}
.form__group input:focus,
.form__group textarea:focus {
  outline:      none;
  border-color: var(--blue);
  box-shadow:   0 0 0 3px rgba(26, 58, 110, .12);
}

/* Checkbox */
.form__group--check {
  flex-direction: row;
  align-items:    flex-start;
  gap:            .6rem;
}
.form__group--check input[type="checkbox"] {
  width:        18px;
  height:       18px;
  margin-top:   .2rem;
  accent-color: var(--blue);
  flex-shrink:  0;
  cursor:       pointer;
}
.form__group--check label {
  font-size:   .82rem;
  font-weight: 400;
  color:       var(--text-muted);
  line-height: 1.5;
  cursor:      pointer;
}
.form__group--check label a {
  color:           var(--blue);
  text-decoration: underline;
}

.form__note {
  font-size: .75rem;
  color:     var(--text-light);
}


/* ── 18  FOOTER ───────────────────────────────────────────────── */
.site-footer {
  background:    var(--ink);
  color:         var(--text-light);
  padding-top:   var(--space-xl);
}

.site-footer__inner {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-lg);
}

/* Brand */
.site-footer__brand .logo__name {
  color: var(--white);
}
.site-footer__brand .logo__mark {
  background: rgba(255, 255, 255, .15);
  color:      var(--white);
}
.site-footer__brand:hover .logo__mark {
  background: var(--blue);
}
.site-footer__brand p {
  margin-top:  .65rem;
  font-size:   .82rem;
  color:       rgba(255, 255, 255, .45);
  line-height: 1.6;
}

/* Nav */
.site-footer__nav-title {
  font-size:      .7rem;
  font-weight:    600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, .35);
  margin-bottom:  .75rem;
}

.site-footer__inner nav ul {
  display:        flex;
  flex-direction: column;
  gap:            .45rem;
}
.site-footer__inner nav a {
  font-size:  .85rem;
  color:      rgba(255, 255, 255, .55);
  transition: color var(--ease);
}
.site-footer__inner nav a[aria-current="page"] {
  color: rgba(255, 255, 255, .85);
}
.site-footer__inner nav a:hover {
  color: var(--white);
}

/* Cookie-Reopen im Footer */
.site-footer__cookie-btn {
  font-size:   .85rem;
  color:       rgba(255, 255, 255, .55);
  transition:  color var(--ease);
  cursor:      pointer;
  text-align:  left;
}
.site-footer__cookie-btn:hover {
  color: var(--white);
}

/* Bottom Bar */
.site-footer__bottom {
  margin-top:  var(--space-lg);
  border-top:  1px solid rgba(255, 255, 255, .08);
}
.site-footer__bottom-inner {
  display:        flex;
  flex-direction: column;
  gap:            .4rem;
  padding-block:  1.1rem;
  font-size:      .75rem;
  color:          rgba(255, 255, 255, .3);
}
.site-footer__bottom-inner p:last-child {
  display: flex;
  gap:     1rem;
}
.site-footer__bottom-inner a {
  color:      rgba(255, 255, 255, .45);
  transition: color var(--ease);
}
.site-footer__bottom-inner a:hover {
  color: var(--white);
}


/* ── 19  SCROLL REVEAL ────────────────────────────────────────── */
/* Klassen werden per main.js gesetzt – Styles nur hier */


/* ── 20  RESPONSIVE ───────────────────────────────────────────── */

/* Tablet · ≥ 640px */
@media (min-width: 640px) {

  .service-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .region-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .form__row {
    flex-direction: row;
    gap:            1rem;
  }
  .form__row .form__group {
    flex: 1;
  }

  .cookie-banner {
    flex-direction: row;
    align-items:    center;
  }
  .cookie-banner__btn {
    flex-shrink: 0;
  }

  .site-footer__inner {
    flex-direction: row;
    flex-wrap:      wrap;
    gap:            2rem;
  }
  .site-footer__bottom-inner {
    flex-direction:  row;
    justify-content: space-between;
    align-items:     center;
  }
}

/* Desktop · ≥ 1024px */
@media (min-width: 1024px) {

  /* Nav */
  .nav__burger {
    display: none;
  }
  .nav__menu {
    position:       static;
    flex-direction: row;
    transform:      none;
    opacity:        1;
    pointer-events: all;
    padding:        0;
    border:         none;
    box-shadow:     none;
    background:     transparent;
    align-items:    center;
    gap:            .15rem;
    z-index:        auto;
  }
  .nav__link {
    padding:    .4rem .7rem;
    min-height: auto;
  }
  .nav__link--cta {
    padding:    .45rem 1.1rem;
    margin-top: 0;
  }

  /* Hero */
  .hero__inner {
    flex-direction: row;
    align-items:    center;
    gap:            5rem;
  }
  .hero__text {
    flex:      1;
    max-width: 500px;
  }
  .hero__img-wrap {
    flex:      0 0 480px;
    max-width: 480px;
  }

  /* Intro */
  .intro__inner {
    flex-direction: row;
    align-items:    flex-start;
    gap:            4.5rem;
  }
  .intro__img-wrap {
    flex:      0 0 400px;
    max-width: 400px;
    order:     -1;
  }
  .intro__text {
    flex: 1;
  }

  /* Leistungen */
  .service-list {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Arbeitsweise */
  .arbeitsweise__inner {
    flex-direction: row;
    align-items:    flex-start;
    gap:            5rem;
  }
  .arbeitsweise__text {
    flex: 1;
  }
  .arbeitsweise__img-wrap {
    flex:      0 0 400px;
    max-width: 400px;
  }

  /* Ablauf */
  .steps {
    flex-direction: row;
    gap:            0;
  }
  .steps::before {
    top:    19px;
    left:   0;
    right:  0;
    bottom: auto;
    width:  auto;
    height: 1px;
  }
  .step {
    flex-direction: column;
    flex:           1;
    padding:        0 2rem 1rem 0;
  }
  .step__body h3 {
    padding-top: .65rem;
  }

  /* Region */
  .region-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Kontakt */
  .kontakt__inner {
    flex-direction: row;
    gap:            5rem;
    align-items:    flex-start;
  }
  .kontakt__text {
    flex: 0 0 280px;
  }
  .kontakt__form {
    flex: 1;
  }

  /* Footer */
  .site-footer__inner {
    flex-wrap:       nowrap;
    justify-content: space-between;
    gap:             3rem;
  }
}


/* ── 21  REDUCED MOTION & HIGH CONTRAST ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:        .01ms !important;
    animation-iteration-count: 1    !important;
    transition-duration:       .01ms !important;
  }
  .reveal {
    opacity:   1;
    transform: none;
  }
}

@media (forced-colors: active) {
  .btn--primary,
  .cookie-banner__btn {
    forced-color-adjust: none;
  }
}