:root {

  --navy: #102653;
  --navy-dark: #081a3d;

  --orange: #ff8300;
  --orange-dark: #e87500;

  --white: #ffffff;

  --off-white: #f5f7fb;

  --soft: #eef1f7;

  --text: #182238;

  --muted: #63708a;

  --border: #dce2ec;

  --radius: 18px;

  --max-width: 1180px;

  --shadow:
    0 22px 55px
    rgba(16, 38, 83, 0.12);

}



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

* {

  box-sizing:
    border-box;

  margin:
    0;

  padding:
    0;

}


html {

  scroll-behavior:
    smooth;

}


body {

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  color:
    var(--text);

  background:
    var(--white);

  line-height:
    1.6;

}


a {

  color:
    inherit;

  text-decoration:
    none;

}


button,
input,
textarea {

  font:
    inherit;

}


button {

  cursor:
    pointer;

}


img {

  max-width:
    100%;

}


.container {

  width:
    min(
      calc(100% - 40px),
      var(--max-width)
    );

  margin-inline:
    auto;

}



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

.site-header {

  position:
    sticky;

  top:
    0;

  z-index:
    1000;

  background:
    rgba(
      255,
      255,
      255,
      0.98
    );

  backdrop-filter:
    blur(14px);

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

}


.header-inner {

  min-height:
    92px;

  display:
    flex;

  align-items:
    center;

  gap:
    30px;

}


.brand {

  width:
    190px;

  height:
    76px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-start;

  overflow:
    hidden;

}


.header-logo {

  width:
    185px;

  height:
    74px;

  display:
    block;

  object-fit:
    contain;

  mix-blend-mode:
    multiply;

}


.main-nav {

  margin-left:
    auto;

  display:
    flex;

  align-items:
    center;

  gap:
    26px;

  font-size:
    0.94rem;

  font-weight:
    800;

}


.main-nav a {

  position:
    relative;

  transition:
    0.2s ease;

}


.main-nav a:not(.nav-offer)::after {

  content:
    "";

  position:
    absolute;

  left:
    0;

  bottom:
    -8px;

  width:
    0;

  height:
    2px;

  background:
    var(--orange);

  transition:
    width 0.2s ease;

}


.main-nav a:not(.nav-offer):hover {

  color:
    var(--orange);

}


.main-nav a:not(.nav-offer):hover::after {

  width:
    100%;

}


/* ANGEBOT BUTTON IM MENÜ */

.nav-offer {

  min-height:
    44px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 18px;

  border-radius:
    9px;

  background:
    var(--orange);

  color:
    white;

  box-shadow:
    0 8px 20px
    rgba(255, 131, 0, 0.20);

}


.nav-offer:hover {

  background:
    var(--orange-dark);

  transform:
    translateY(-1px);

}



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

.hero {

  position:
    relative;

  color:
    white;

  background-image:

    linear-gradient(
      90deg,
      rgba(5, 17, 40, 0.91) 0%,
      rgba(5, 17, 40, 0.79) 45%,
      rgba(5, 17, 40, 0.53) 72%,
      rgba(5, 17, 40, 0.35) 100%
    ),

    url(
      "../bilder/referenz-wohnzimmer-nachher.jpeg"
    );

  background-size:
    cover;

  background-position:
    center;

  background-repeat:
    no-repeat;

}


.hero::before {

  content:
    "";

  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.03),
      rgba(0, 0, 0, 0.18)
    );

  pointer-events:
    none;

}


.hero-inner {

  position:
    relative;

  z-index:
    2;

  min-height:
    690px;

  display:
    flex;

  align-items:
    center;

  padding:
    85px 0;

}


.hero-copy {

  width:
    100%;

  max-width:
    820px;

}


.eyebrow {

  display:
    inline-block;

  margin-bottom:
    12px;

  color:
    var(--orange);

  font-size:
    0.8rem;

  font-weight:
    900;

  letter-spacing:
    0.14em;

  text-transform:
    uppercase;

}


.eyebrow-hero {

  padding:
    9px 14px;

  color:
    white;

  border:
    1px solid
    rgba(255, 255, 255, 0.28);

  border-radius:
    8px;

  background:
    rgba(255, 255, 255, 0.12);

  backdrop-filter:
    blur(7px);

}


.eyebrow-light {

  color:
    #ffb15a;

}


.hero h1 {

  max-width:
    800px;

  margin-bottom:
    25px;

  color:
    white;

  font-size:
    clamp(
      3rem,
      5.5vw,
      5.2rem
    );

  line-height:
    0.98;

  letter-spacing:
    -0.05em;

  text-shadow:
    0 8px 28px
    rgba(0, 0, 0, 0.28);

}


.hero-text {

  max-width:
    760px;

  color:
    rgba(
      255,
      255,
      255,
      0.94
    );

  font-size:
    1.12rem;

}


.hero-actions {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    12px;

  margin-top:
    31px;

}


.btn {

  min-height:
    54px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 25px;

  border-radius:
    10px;

  font-weight:
    900;

  transition:
    0.2s ease;

}


.btn:hover {

  transform:
    translateY(-2px);

}


.btn-primary {

  background:
    var(--orange);

  color:
    white;

  box-shadow:
    0 10px 25px
    rgba(255, 131, 0, 0.25);

}


.btn-primary:hover {

  background:
    var(--orange-dark);

}


.btn-secondary {

  border:
    1px solid
    rgba(255, 255, 255, 0.45);

  background:
    rgba(255, 255, 255, 0.10);

  color:
    white;

  backdrop-filter:
    blur(5px);

}


.btn-secondary:hover {

  background:
    rgba(255, 255, 255, 0.17);

}


.hero-points {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    12px 28px;

  margin-top:
    38px;

  padding-top:
    28px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.22);

  color:
    rgba(
      255,
      255,
      255,
      0.95
    );

  font-size:
    0.94rem;

  font-weight:
    700;

}


.hero-points span::before {

  content:
    "✓";

  width:
    22px;

  height:
    22px;

  display:
    inline-grid;

  place-items:
    center;

  margin-right:
    7px;

  border-radius:
    50%;

  background:
    white;

  color:
    var(--orange);

  font-size:
    0.75rem;

  font-weight:
    900;

}



/* =========================================
   SEKTIONEN
========================================= */

.section {

  padding:
    90px 0;

}


.section-heading {

  max-width:
    720px;

  margin-bottom:
    38px;

}


.section h2 {

  color:
    var(--navy);

  font-size:
    clamp(
      2rem,
      4vw,
      3.3rem
    );

  line-height:
    1.08;

  letter-spacing:
    -0.035em;

  margin-bottom:
    14px;

}


.section-heading
p:last-child {

  color:
    var(--muted);

}


.section-soft {

  background:
    var(--off-white);

}



/* =========================================
   LEISTUNGEN
========================================= */

.cards {

  display:
    grid;

  gap:
    18px;

}


.service-grid {

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

}


.card {

  padding:
    30px;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius);

  background:
    white;

  transition:
    0.2s ease;

}


.card:hover {

  transform:
    translateY(-6px);

  border-color:
    #ffd2a6;

  box-shadow:
    var(--shadow);

}


.icon {

  width:
    50px;

  height:
    50px;

  display:
    grid;

  place-items:
    center;

  margin-bottom:
    18px;

  border-radius:
    50%;

  background:
    #fff0df;

  color:
    var(--orange-dark);

  font-weight:
    900;

}


.card h3 {

  margin-bottom:
    8px;

  color:
    var(--navy);

}


.card p {

  color:
    var(--muted);

}


/* LINK UNTER DEN LEISTUNGEN */

.services-offer-link {

  margin-top:
    36px;

  text-align:
    center;

}


.services-offer-link a {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  padding-bottom:
    3px;

  border-bottom:
    2px solid
    var(--orange);

  color:
    var(--navy);

  font-size:
    1.05rem;

  font-weight:
    900;

  transition:
    0.2s ease;

}


.services-offer-link a:hover {

  color:
    var(--orange);

  transform:
    translateY(-1px);

}



/* =========================================
   SOFORT ANFRAGE
========================================= */

.instant-section {

  padding:
    90px 0;

  background:
    white;

}


.instant-grid {

  display:
    grid;

  grid-template-columns:
    0.95fr
    1.05fr;

  gap:
    80px;

  align-items:
    center;

}


.instant-intro h2 {

  max-width:
    580px;

  color:
    var(--text);

  font-size:
    clamp(
      2.2rem,
      4vw,
      3.4rem
    );

  line-height:
    1.1;

  letter-spacing:
    -0.035em;

}


.instant-description {

  max-width:
    570px;

  margin-top:
    20px;

  color:
    var(--muted);

  font-size:
    1.08rem;

}


.instant-steps-left {

  display:
    grid;

  gap:
    16px;

  margin-top:
    30px;

}


.intro-step {

  display:
    flex;

  align-items:
    center;

  gap:
    15px;

}


.intro-step > span {

  width:
    38px;

  height:
    38px;

  flex-shrink:
    0;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    #fff0df;

  color:
    var(--orange-dark);

  font-weight:
    900;

}



/* =========================================
   ANFRAGE KARTE
========================================= */

.quote-card {

  overflow:
    hidden;

  border:
    1px solid
    #dce3ef;

  border-radius:
    24px;

  background:
    white;

  box-shadow:
    0 28px 70px
    rgba(16, 38, 83, 0.15);

}


.quote-card-header {

  padding:
    24px 28px 20px;

  background:
    linear-gradient(
      120deg,
      #102653,
      #102653 68%,
      #5c3a28 150%
    );

  color:
    white;

}


.free-badge {

  display:
    inline-flex;

  align-items:
    center;

  min-height:
    26px;

  padding:
    0 13px;

  margin-bottom:
    6px;

  border-radius:
    20px;

  background:
    var(--orange);

  color:
    #111b32;

  font-size:
    0.72rem;

  font-weight:
    900;

  letter-spacing:
    0.08em;

}


.quote-card-header h3 {

  font-size:
    1.8rem;

  line-height:
    1.1;

}


.quote-benefits {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    18px;

  margin-top:
    8px;

  color:
    rgba(255, 255, 255, 0.72);

  font-size:
    0.9rem;

}



/* =========================================
   FORTSCHRITT
========================================= */

.progress-wrapper {

  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    8px;

  margin-top:
    20px;

}


.progress-item {

  display:
    grid;

  gap:
    8px;

  color:
    rgba(255, 255, 255, 0.55);

  font-size:
    0.78rem;

  font-weight:
    800;

}


.progress-bar {

  height:
    4px;

  border-radius:
    10px;

  background:
    rgba(255, 255, 255, 0.22);

}


.progress-item.active {

  color:
    var(--orange);

}


.progress-item.active
.progress-bar {

  background:
    var(--orange);

}



/* =========================================
   FORMULAR
========================================= */

.quote-form {

  min-height:
    410px;

  padding:
    26px;

}


.form-step {

  display:
    none;

}


.form-step.active {

  display:
    block;

}


.form-step h4,
.form-success h4 {

  color:
    var(--text);

  font-size:
    1.45rem;

  line-height:
    1.2;

}


.step-hint {

  margin-top:
    5px;

  color:
    var(--muted);

  font-size:
    0.9rem;

}


.optional-label {

  display:
    inline-block;

  margin-left:
    5px;

  color:
    var(--muted);

  font-size:
    0.72rem;

  font-weight:
    500;

}



/* =========================================
   AUSWAHLKARTEN
========================================= */

.service-choice-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    12px;

  margin-top:
    20px;

}


.service-choice {

  min-height:
    115px;

  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  padding:
    16px 10px;

  border:
    1.5px solid
    var(--border);

  border-radius:
    16px;

  background:
    white;

  color:
    var(--text);

  text-align:
    center;

  transition:
    0.2s ease;

}


.service-choice:hover {

  border-color:
    var(--orange);

  transform:
    translateY(-2px);

}


.service-choice.selected {

  border-color:
    var(--orange);

  background:
    #fff7eb;

  box-shadow:
    0 0 0 2px
    rgba(255, 131, 0, 0.12);

}


.choice-icon {

  color:
    var(--navy);

  font-size:
    1.7rem;

  font-weight:
    900;

}


.service-choice.selected
.choice-icon {

  color:
    var(--orange);

}


.service-choice strong {

  font-size:
    0.9rem;

  line-height:
    1.2;

}


.choice-check {

  position:
    absolute;

  top:
    10px;

  right:
    10px;

  width:
    22px;

  height:
    22px;

  border:
    1.5px solid
    var(--border);

  border-radius:
    50%;

  background:
    white;

}


.service-choice.selected
.choice-check {

  border-color:
    var(--orange);

  background:
    var(--orange);

}


.service-choice.selected
.choice-check::after {

  content:
    "✓";

  display:
    grid;

  place-items:
    center;

  width:
    100%;

  height:
    100%;

  color:
    white;

  font-size:
    0.7rem;

  font-weight:
    900;

}



/* =========================================
   FORMULAR FELDER
========================================= */

.quote-field {

  display:
    grid;

  gap:
    7px;

  margin-top:
    18px;

}


.quote-field label {

  color:
    var(--navy);

  font-size:
    0.9rem;

  font-weight:
    800;

}


.quote-field input,
.quote-field textarea {

  width:
    100%;

  border:
    1.5px solid
    var(--border);

  border-radius:
    10px;

  padding:
    13px 14px;

  background:
    white;

  color:
    var(--text);

  outline:
    none;

  transition:
    0.2s;

}


.quote-field input {

  min-height:
    48px;

}


.quote-field textarea {

  resize:
    vertical;

}


.quote-field input:focus,
.quote-field textarea:focus {

  border-color:
    var(--orange);

  box-shadow:
    0 0 0 3px
    rgba(255, 131, 0, 0.10);

}



/* =========================================
   FOTO UPLOAD
========================================= */

.photo-upload-area {

  margin-top:
    24px;

}


.photo-upload-heading strong {

  color:
    var(--navy);

}


.photo-upload-heading p {

  margin-top:
    5px;

  color:
    var(--muted);

  font-size:
    0.86rem;

}


.photo-upload-box {

  min-height:
    145px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    3px;

  margin-top:
    12px;

  padding:
    20px;

  border:
    2px dashed
    #cbd4e3;

  border-radius:
    14px;

  background:
    #fafbfe;

  text-align:
    center;

  cursor:
    pointer;

  transition:
    0.2s;

}


.photo-upload-box:hover {

  border-color:
    var(--orange);

  background:
    #fff9f0;

}


.upload-icon {

  width:
    42px;

  height:
    42px;

  display:
    grid;

  place-items:
    center;

  margin-bottom:
    5px;

  border-radius:
    50%;

  background:
    #fff0df;

  color:
    var(--orange);

  font-size:
    1.5rem;

  font-weight:
    900;

}


.photo-upload-box strong {

  color:
    var(--navy);

}


.photo-upload-box
span:not(.upload-icon) {

  color:
    var(--muted);

  font-size:
    0.78rem;

}


.photo-preview-grid {

  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    10px;

  margin-top:
    12px;

}


.photo-preview-item {

  position:
    relative;

  overflow:
    hidden;

  aspect-ratio:
    1 / 1;

  border:
    1px solid
    var(--border);

  border-radius:
    10px;

  background:
    var(--soft);

}


.photo-preview-item img {

  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;

}


.photo-preview-item button {

  position:
    absolute;

  top:
    6px;

  right:
    6px;

  width:
    28px;

  height:
    28px;

  border:
    0;

  border-radius:
    50%;

  background:
    rgba(8, 26, 61, 0.9);

  color:
    white;

}


.photo-error {

  margin-top:
    8px;

  color:
    #bb2525;

  font-size:
    0.82rem;

  font-weight:
    700;

}



/* =========================================
   DATENSCHUTZ
========================================= */

.privacy-box,
.final-privacy-box {

  margin-top:
    22px;

  padding:
    16px;

  border:
    1px solid
    #dfe6ef;

  border-left:
    4px solid
    var(--orange);

  border-radius:
    10px;

  background:
    #f8faff;

}


.privacy-box strong,
.final-privacy-box strong {

  color:
    var(--navy);

}


.privacy-box p,
.final-privacy-box p {

  margin-top:
    6px;

  color:
    var(--muted);

  font-size:
    0.82rem;

  line-height:
    1.5;

}



/* =========================================
   BUTTONS
========================================= */

.quote-next-button,
.quote-submit-button {

  width:
    100%;

  min-height:
    54px;

  margin-top:
    20px;

  border:
    0;

  border-radius:
    12px;

  background:
    var(--orange);

  color:
    white;

  font-weight:
    900;

  font-size:
    1rem;

  transition:
    0.2s;

}


.quote-next-button:hover,
.quote-submit-button:hover {

  background:
    var(--orange-dark);

}


.quote-back-button {

  min-height:
    54px;

  padding:
    0 22px;

  border:
    1px solid
    var(--border);

  border-radius:
    12px;

  background:
    white;

  color:
    var(--navy);

  font-weight:
    800;

}


.quote-buttons {

  display:
    grid;

  grid-template-columns:
    auto 1fr;

  gap:
    10px;

  margin-top:
    20px;

}


.quote-buttons
.quote-next-button,
.quote-buttons
.quote-submit-button {

  margin-top:
    0;

}


.form-error {

  min-height:
    22px;

  margin-top:
    10px;

  color:
    #bb2525;

  font-size:
    0.85rem;

  font-weight:
    700;

}



/* =========================================
   ZUSAMMENFASSUNG
========================================= */

.summary-box {

  margin-top:
    20px;

  overflow:
    hidden;

  border:
    1px solid
    var(--border);

  border-radius:
    14px;

}


.summary-row {

  display:
    grid;

  grid-template-columns:
    130px 1fr;

  gap:
    18px;

  padding:
    13px 15px;

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

}


.summary-row:last-child {

  border-bottom:
    0;

}


.summary-row span {

  color:
    var(--muted);

  font-size:
    0.86rem;

}


.summary-row strong {

  color:
    var(--navy);

  font-size:
    0.9rem;

  overflow-wrap:
    anywhere;

}


.summary-message strong {

  white-space:
    pre-wrap;

}


.privacy-note {

  margin-top:
    16px;

  color:
    var(--muted);

  font-size:
    0.78rem;

}


.privacy-note a {

  color:
    var(--orange-dark);

  font-weight:
    700;

  text-decoration:
    underline;

}



/* =========================================
   ERFOLG
========================================= */

.form-success {

  display:
    none;

  padding:
    25px 5px;

  text-align:
    center;

}


.form-success.active {

  display:
    block;

}


.success-icon {

  width:
    68px;

  height:
    68px;

  display:
    grid;

  place-items:
    center;

  margin:
    0 auto 18px;

  border-radius:
    50%;

  background:
    #e6f6ea;

  color:
    #21873f;

  font-size:
    2rem;

  font-weight:
    900;

}


.success-small {

  margin-top:
    8px;

  color:
    var(--muted);

  font-size:
    0.85rem;

}





/* =========================================
   REFERENZEN
========================================= */

.references-section {

  background:
    var(--off-white);

}

.references-grid {

  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    24px;

}

.reference-card {

  overflow:
    hidden;

  border:
    1px solid var(--border);

  border-radius:
    var(--radius);

  background:
    white;

  box-shadow:
    var(--shadow);

}

.reference-image-wrap {

  aspect-ratio:
    16 / 10;

  overflow:
    hidden;

  background:
    #e9edf3;

}

.reference-image {

  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;

  transition:
    transform 0.3s ease;

}

.reference-card:hover .reference-image {

  transform:
    scale(1.03);

}

.reference-content {

  padding:
    24px;

}

.reference-tag {

  display:
    inline-block;

  margin-bottom:
    10px;

  color:
    var(--orange-dark);

  font-size:
    0.76rem;

  font-weight:
    900;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;

}

.reference-content h3 {

  margin-bottom:
    8px;

  color:
    var(--navy);

}

.reference-content p {

  color:
    var(--muted);

}

.references-cta {

  margin-top:
    34px;

  padding:
    24px 28px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  border:
    1px solid var(--border);

  border-radius:
    14px;

  background:
    white;

}

.references-cta p {

  color:
    var(--muted);

}

.references-cta a {

  flex-shrink:
    0;

  color:
    var(--navy);

  font-weight:
    900;

  border-bottom:
    2px solid var(--orange);

}

.references-cta a:hover {

  color:
    var(--orange);

}


/* =========================================
   VORHER / NACHHER
========================================= */

.before-after-section {

  background:
    var(--off-white);

}


.comparison {

  width:
    100%;

  max-width:
    700px;

  margin-inline:
    auto;

  overflow:
    hidden;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius);

  box-shadow:
    var(--shadow);

}


.comparison-images {

  position:
    relative;

  width:
    100%;

  aspect-ratio:
    4 / 3;

  overflow:
    hidden;

  background:
    #ddd;

}


.comparison-image {

  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  pointer-events:
    none;

  user-select:
    none;

}


.after-image {

  z-index:
    1;

}


.before-image {

  z-index:
    2;

  clip-path:
    inset(
      0 50% 0 0
    );

}


.comparison-label {

  position:
    absolute;

  top:
    15px;

  z-index:
    5;

  padding:
    6px 11px;

  border-radius:
    8px;

  background:
    rgba(8, 26, 61, 0.88);

  color:
    white;

  font-size:
    0.78rem;

  font-weight:
    900;

  text-transform:
    uppercase;

}


.label-before {

  left:
    15px;

}


.label-after {

  right:
    15px;

}


.comparison-line {

  position:
    absolute;

  top:
    0;

  bottom:
    0;

  left:
    50%;

  z-index:
    4;

  width:
    3px;

  background:
    white;

  transform:
    translateX(-50%);

  pointer-events:
    none;

}


.comparison-handle {

  position:
    absolute;

  top:
    50%;

  left:
    50%;

  width:
    48px;

  height:
    48px;

  display:
    grid;

  place-items:
    center;

  transform:
    translate(-50%, -50%);

  border:
    3px solid
    white;

  border-radius:
    50%;

  background:
    var(--orange);

  color:
    white;

  font-weight:
    900;

}


.comparison-slider {

  position:
    absolute;

  inset:
    0;

  z-index:
    10;

  width:
    100%;

  height:
    100%;

  opacity:
    0;

  cursor:
    ew-resize;

}



/* =========================================
   ÜBER UNS
========================================= */

.section-dark {

  background:
    var(--navy);

  color:
    white;

}


.section-dark h2 {

  color:
    white;

}


.about-grid {

  display:
    grid;

  grid-template-columns:
    0.9fr 1.1fr;

  gap:
    60px;

  align-items:
    center;

}


.light-copy {

  margin-bottom:
    18px;

  color:
    rgba(255, 255, 255, 0.72);

}


.about-boxes {

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    14px;

}


.about-item {

  display:
    grid;

  grid-template-columns:
    42px 1fr;

  gap:
    12px;

  padding:
    22px;

  border:
    1px solid
    rgba(255, 255, 255, 0.12);

  border-radius:
    14px;

  background:
    rgba(255, 255, 255, 0.05);

}


.about-item > span {

  width:
    34px;

  height:
    34px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    var(--orange);

  color:
    white;

  font-weight:
    900;

}



/* =========================================
   ABLAUF
========================================= */

.process-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap:
    18px;

}


.process-card {

  padding:
    25px;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius);

}


.process-card > span {

  color:
    var(--orange);

  font-weight:
    900;

}


.process-card h3 {

  margin:
    10px 0 8px;

  color:
    var(--navy);

}


.process-card p {

  color:
    var(--muted);

}



/* =========================================
   EINSATZGEBIET / KONTAKT
========================================= */

.location-grid,
.contact-grid {

  display:
    grid;

  grid-template-columns:
    1.1fr 0.9fr;

  gap:
    56px;

  align-items:
    center;

}


.location-grid p,
.contact-grid
> div
> p:last-child {

  color:
    var(--muted);

}


.location-card,
.contact-card {

  padding:
    30px;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius);

  background:
    white;

  box-shadow:
    var(--shadow);

}


.pin {

  color:
    var(--orange);

  font-size:
    2rem;

}


.contact-row {

  display:
    grid;

  gap:
    3px;

  padding:
    15px 0;

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

}


.contact-row span {

  color:
    var(--muted);

}


.contact-row strong {

  color:
    var(--navy);

}


.contact-button {

  min-height:
    50px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  margin-top:
    12px;

  border-radius:
    10px;

  background:
    var(--orange);

  color:
    white;

  font-weight:
    900;

}



/* =========================================
   FOOTER
========================================= */

.site-footer {

  padding:
    34px 0;

  background:
    var(--navy-dark);

  color:
    white;

}


.footer-inner {

  display:
    flex;

  justify-content:
    space-between;

  gap:
    30px;

}


.footer-links {

  display:
    flex;

  gap:
    20px;

}



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

@media
(max-width: 1050px) {


  .main-nav {

    gap:
      17px;

    font-size:
      0.86rem;

  }


  .nav-offer {

    padding:
      0 13px;

  }

}


@media
(max-width: 980px) {


  .header-inner {

    flex-wrap:
      wrap;

    padding:
      8px 0;

  }


  .brand {

    width:
      165px;

    height:
      68px;

  }


  .header-logo {

    width:
      160px;

    height:
      65px;

  }


  .main-nav {

    order:
      3;

    width:
      100%;

    overflow-x:
      auto;

    padding-bottom:
      7px;

  }


  .hero-inner {

    min-height:
      610px;

  }


  .instant-grid,
  .about-grid,
  .location-grid,
  .contact-grid {

    grid-template-columns:
      1fr;

  }


  .instant-grid {

    gap:
      45px;

  }


  .quote-card {

    max-width:
      680px;

  }


  .service-grid {

    grid-template-columns:
      repeat(
        2,
        1fr
      );

  }


  .process-grid {

    grid-template-columns:
      1fr 1fr;

  }

}



/* =========================================
   HANDY
========================================= */

@media
(max-width: 680px) {


  .container {

    width:
      calc(100% - 28px);

  }


  .site-header {

    position:
      static;

  }


  .header-inner {

    gap:
      12px;

  }


  .brand {

    width:
      145px;

    height:
      60px;

  }


  .header-logo {

    width:
      140px;

    height:
      58px;

  }


  .main-nav {

    gap:
      18px;

    font-size:
      0.84rem;

  }


  .nav-offer {

    min-height:
      40px;

  }


  .hero {

    background-position:
      62% center;

  }


  .hero-inner {

    min-height:
      auto;

    padding:
      70px 0;

  }


  .hero h1 {

    font-size:
      2.65rem;

  }


  .hero-actions {

    flex-direction:
      column;

  }


  .btn {

    width:
      100%;

  }


  .hero-points {

    flex-direction:
      column;

    align-items:
      flex-start;

  }


  .section {

    padding:
      70px 0;

  }


  .instant-section {

    padding:
      70px 0;

  }


  .quote-card-header {

    padding:
      22px 18px 18px;

  }


  .quote-form {

    min-height:
      auto;

    padding:
      20px 16px;

  }


  .service-choice-grid {

    grid-template-columns:
      1fr 1fr;

  }


  .photo-preview-grid {

    grid-template-columns:
      1fr 1fr;

  }


  .quote-buttons {

    grid-template-columns:
      1fr;

  }


  .quote-back-button {

    width:
      100%;

  }


  .summary-row {

    grid-template-columns:
      1fr;

    gap:
      3px;

  }


  .service-grid,
  .about-boxes,
  .process-grid {

    grid-template-columns:
      1fr;

  }


  .comparison {

    max-width:
      100%;

  }


  .footer-inner {

    flex-direction:
      column;

  }

}



/* =========================================
   KLEINE HANDYS
========================================= */

@media
(max-width: 430px) {


  .service-choice-grid {

    grid-template-columns:
      1fr;

  }


  .service-choice {

    min-height:
      85px;

    flex-direction:
      row;

    justify-content:
      flex-start;

    padding:
      15px 45px 15px 18px;

    text-align:
      left;

  }


  .choice-icon {

    width:
      35px;

  }


  .hero h1 {

    font-size:
      2.3rem;

  }


  .services-offer-link a {

    font-size:
      0.95rem;

  }

}

@media
(max-width: 680px) {

  .references-grid {
    grid-template-columns: 1fr;
  }

  .references-cta {
    flex-direction: column;
    align-items: flex-start;
  }

}


/* =========================================
   MOBILE NAVIGATION / HAMBURGER
========================================= */

.menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  margin-left: auto;
  padding: 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.menu-toggle span {
  display: block;
  width: 25px;
  height: 3px;
  border-radius: 10px;
  background: var(--navy);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-toggle.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* =========================================
   REFERENZEN MIT VERGLEICH
========================================= */

.references-section {
  background: var(--off-white);
}

.references-list {
  display: grid;
  gap: 30px;
}

.reference-comparison-card {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 34px;
  align-items: center;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: white;
  box-shadow: var(--shadow);
}

.reference-comparison-card .comparison {
  max-width: none;
  margin: 0;
}

.reference-comparison-text {
  padding: 12px 8px;
}

.reference-comparison-text h3 {
  margin: 12px 0 10px;
  color: var(--navy);
  font-size: 1.55rem;
  line-height: 1.2;
}

.reference-comparison-text p {
  color: var(--muted);
}

.reference-tag {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff0df;
  color: var(--orange-dark);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.reference-link {
  display: inline-block;
  margin-top: 20px;
  color: var(--navy);
  font-weight: 900;
  border-bottom: 2px solid var(--orange);
}

.reference-link:hover {
  color: var(--orange-dark);
}

/* =========================================
   RECHTLICHE SEITEN
========================================= */

.legal-page {
  min-height: 70vh;
  padding: 70px 0 90px;
  background: var(--off-white);
}

.legal-card {
  max-width: 900px;
  margin: 0 auto;
  padding: 38px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: white;
  box-shadow: var(--shadow);
}

.legal-card h1 {
  margin-bottom: 24px;
  color: var(--navy);
  font-size: clamp(2rem, 4vw, 3.3rem);
  line-height: 1.08;
}

.legal-card h2 {
  margin: 30px 0 10px;
  color: var(--navy);
  font-size: 1.35rem;
}

.legal-card p,
.legal-card li {
  color: var(--muted);
}

.legal-card p + p {
  margin-top: 10px;
}

.legal-card ul {
  margin: 10px 0 0 20px;
}

.legal-card a {
  color: var(--orange-dark);
  text-decoration: underline;
}

.legal-back {
  display: inline-flex;
  margin-bottom: 20px;
  color: var(--navy);
  font-weight: 900;
}

@media (max-width: 900px) {
  .menu-toggle {
    display: flex;
  }

  .header-inner {
    position: relative;
    flex-wrap: nowrap;
  }

  .main-nav {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    width: 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px 20px 18px;
    background: white;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 18px 30px rgba(16, 38, 83, 0.12);
  }

  .main-nav.open {
    display: flex;
  }

  .main-nav a {
    width: 100%;
    padding: 13px 0;
    border-bottom: 1px solid var(--border);
  }

  .main-nav a:last-child {
    border-bottom: 0;
  }

  .main-nav a::after {
    display: none;
  }

  .reference-comparison-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .site-header {
    position: sticky;
  }

  .legal-page {
    padding: 40px 0 60px;
  }

  .legal-card {
    padding: 24px 18px;
  }

  .reference-comparison-card {
    padding: 14px;
    gap: 18px;
  }
}

/* =========================================
   NEUES EINSATZGEBIET
========================================= */

.service-area-section {
  background: var(--off-white);
}

.service-area-hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  min-height: 390px;
  overflow: hidden;
  border-radius: 26px;
  background: linear-gradient(135deg, var(--navy-dark), var(--navy));
  box-shadow: var(--shadow);
}

.service-area-copy {
  padding: 50px;
  color: white;
}

.service-area-copy h2 {
  max-width: 620px;
  color: white;
  font-size: clamp(2.2rem, 4vw, 3.7rem);
  line-height: 1.05;
  margin-bottom: 18px;
}

.service-area-copy p:not(.eyebrow) {
  max-width: 610px;
  color: rgba(255,255,255,.78);
  font-size: 1.02rem;
}

.service-area-cta {
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  margin-top: 25px;
  padding: 0 22px;
  border-radius: 10px;
  background: var(--orange);
  color: white;
  font-weight: 900;
}

.service-area-visual {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,131,0,.15), transparent 34%),
    linear-gradient(135deg, #eef5ef, #d8eadf);
}

.area-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 2px solid rgba(255,131,0,.55);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.area-ring-large { width: 310px; height: 310px; }
.area-ring-small { width: 180px; height: 180px; }

.area-center,
.area-dot {
  position: absolute;
  padding: 6px 10px;
  border-radius: 999px;
  background: white;
  color: var(--navy);
  font-size: .78rem;
  font-weight: 900;
  box-shadow: 0 7px 18px rgba(16,38,83,.12);
}

.area-center {
  left: 50%;
  top: 50%;
  background: var(--orange);
  color: white;
  transform: translate(-50%, -50%);
}

.area-dot-1 { left: 45%; top: 12%; }
.area-dot-2 { left: 15%; top: 31%; }
.area-dot-3 { right: 12%; top: 29%; }
.area-dot-4 { right: 19%; bottom: 15%; }
.area-dot-5 { left: 18%; bottom: 17%; }

.service-area-benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 16px;
  padding: 18px 22px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: white;
  color: var(--navy);
  font-size: .86rem;
  font-weight: 800;
}

.service-area-benefits span::first-letter {
  color: var(--orange);
}

.service-area-overview {
  padding: 58px 0 12px;
  text-align: center;
}

.service-area-overview h2 {
  margin-bottom: 8px;
}

.service-area-overview > p:last-of-type {
  color: var(--muted);
}

.location-chips {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 11px;
  margin-top: 28px;
}

.location-chips span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: white;
  color: var(--navy);
  font-size: .82rem;
  font-weight: 800;
}

.location-chips span::first-letter {
  color: var(--orange);
}

.service-area-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 28px;
  padding: 26px 30px;
  border-radius: 18px;
  background: var(--navy);
  color: white;
}

.service-area-bottom h3 {
  font-size: 1.35rem;
}

.service-area-bottom p {
  margin-top: 4px;
  color: rgba(255,255,255,.72);
}

.service-area-bottom a {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 10px;
  background: var(--orange);
  color: white;
  font-weight: 900;
}

/* =========================================
   FAQ
========================================= */

.faq-section {
  background: white;
}

.faq-container {
  max-width: 920px;
}

.faq-heading {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.faq-list {
  display: grid;
  gap: 12px;
}

.faq-item {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: white;
  box-shadow: 0 8px 24px rgba(16,38,83,.06);
}

.faq-item summary {
  position: relative;
  padding: 20px 58px 20px 22px;
  color: var(--navy);
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff0df;
  color: var(--orange-dark);
  font-size: 1.25rem;
  transform: translateY(-50%);
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-item p {
  padding: 0 22px 22px;
  color: var(--muted);
}

@media (max-width: 900px) {
  .service-area-hero {
    grid-template-columns: 1fr;
  }

  .service-area-visual {
    min-height: 320px;
  }

  .service-area-benefits {
    grid-template-columns: 1fr 1fr;
  }

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

@media (max-width: 680px) {
  .service-area-copy {
    padding: 32px 22px;
  }

  .service-area-copy h2 {
    font-size: 2.15rem;
  }

  .service-area-visual {
    min-height: 280px;
  }

  .area-ring-large { width: 250px; height: 250px; }
  .area-ring-small { width: 145px; height: 145px; }

  .service-area-benefits {
    grid-template-columns: 1fr;
  }

  .location-chips {
    grid-template-columns: 1fr 1fr;
  }

  .service-area-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .service-area-bottom a {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 430px) {
  .location-chips {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   STILISIERTE EINSATZGEBIET-KARTE
========================================= */

.service-area-visual {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  background: #e7f0e9;
}

.service-area-map {
  width: 100%;
  height: 100%;
  min-height: 390px;
  display: block;
}

.map-river {
  fill: none;
  stroke: #bad7ea;
  stroke-width: 18;
  stroke-linecap: round;
  opacity: .9;
}

.map-road {
  fill: none;
  stroke: rgba(255,255,255,.95);
  stroke-width: 7;
  stroke-linecap: round;
}

.map-road-main {
  stroke: #f0c978;
  stroke-width: 9;
}

.map-radius {
  fill: rgba(255,131,0,.06);
  stroke: rgba(255,131,0,.55);
  stroke-width: 3;
  stroke-dasharray: 8 7;
}

.map-radius-inner {
  fill: rgba(255,131,0,.08);
  stroke: rgba(255,131,0,.35);
  stroke-width: 2;
  stroke-dasharray: 5 6;
}

.map-pin circle {
  fill: var(--navy);
  stroke: white;
  stroke-width: 3;
}

.map-pin-main circle {
  fill: var(--orange);
  stroke-width: 4;
}

.map-pin-main path {
  fill: white;
  stroke: none;
}

.map-pin-main path + circle {
  fill: var(--orange-dark);
  stroke: none;
}

.map-label {
  fill: var(--navy);
  font-size: 15px;
  font-weight: 800;
  paint-order: stroke;
  stroke: rgba(255,255,255,.9);
  stroke-width: 5px;
  stroke-linejoin: round;
}

.map-label-main {
  fill: var(--orange-dark);
  font-size: 20px;
  font-weight: 900;
}

.map-legend rect {
  fill: rgba(255,255,255,.96);
  stroke: rgba(16,38,83,.08);
}

.map-legend circle {
  fill: var(--orange);
}

.map-legend text {
  fill: var(--navy);
  font-size: 13px;
  font-weight: 900;
}

.map-legend .map-legend-small {
  fill: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

@media (max-width: 900px) {
  .service-area-map {
    min-height: 320px;
  }
}

@media (max-width: 680px) {
  .service-area-map {
    min-height: 280px;
  }

  .map-label {
    font-size: 13px;
  }

  .map-label-main {
    font-size: 18px;
  }

  .map-legend {
    transform: translate(490px, 24px) scale(.9);
    transform-origin: top left;
  }
}

/* =========================================
   REFERENZEN – 3 NEBENEINANDER, KOMPAKT
========================================= */

.references-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}

.reference-comparison-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.reference-comparison-card .comparison {
  width: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.reference-comparison-card .comparison-images {
  aspect-ratio: 4 / 3;
  max-height: 260px;
}

.reference-comparison-text {
  width: 100%;
  min-height: 235px;
  padding: 20px 20px 22px;
  border-top: 1px solid var(--border);
  background: #ffffff;
}

.reference-comparison-text h3 {
  margin: 10px 0 8px;
  font-size: 1.18rem;
  line-height: 1.25;
}

.reference-comparison-text p {
  font-size: 0.92rem;
  line-height: 1.55;
}

.reference-link {
  margin-top: 15px;
  font-size: 0.9rem;
}

.reference-comparison-card .comparison-label {
  top: 10px;
  padding: 5px 9px;
  font-size: 0.68rem;
}

.reference-comparison-card .label-before {
  left: 10px;
}

.reference-comparison-card .label-after {
  right: 10px;
}

.reference-comparison-card .comparison-handle {
  width: 38px;
  height: 38px;
  font-size: 0.8rem;
}

@media (max-width: 980px) {
  .references-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reference-comparison-card .comparison-images {
    max-height: 280px;
  }
}

@media (max-width: 680px) {
  .references-list {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .reference-comparison-card .comparison-images {
    max-height: 300px;
  }

  .reference-comparison-text {
    min-height: 0;
    padding: 18px;
  }
}