/* ==========================================================================
   Immobiliengesellschaft Bankhaus Carl F. Plump & Co. GmbH
   Onepager – Stylesheet

   Aufbau (für die spätere Übernahme in ein WordPress-Theme):
   01 Variablen        06 Charme           11 Kontakt
   02 Basis            07 Leistungen       12 Footer
   03 Layout-Helfer    08 Collage          13 Unterseiten
   04 Header/Hero      09 CTA              14 Responsive
   05 Schnellauswahl   10 Unternehmen

   Referenzbreite des Entwurfs: 1440 px, Inhaltsbreite 1180 px.
   ========================================================================== */


/* 00 Schriften – lokal gehostet (keine Verbindung zu Google, DSGVO)
   Variable Fonts: eine Datei je Zeichensatz deckt Regular und Bold ab.
   Lizenz: SIL Open Font License 1.1
   ========================================================================== */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* 01 Variablen
   ========================================================================== */
:root {
  --c-blue: #2e3548;
  --c-blue-shade: #262d3e;     /* dunklere Dachfläche auf Blau   */
  --c-orange: #d65f3d;
  --c-orange-shade: #cf5334;   /* dunklere Dachfläche auf Orange */
  --c-text: #000;
  --c-white: #fff;

  --ff-serif: "Cormorant Garamond", "Garamond", "Times New Roman", serif;
  --ff-sans: "Manrope", "Helvetica Neue", Arial, sans-serif;

  --content: 1180px;
  --gutter: clamp(20px, calc(11vw - 28px), 130px);
  /* Abstand Viewport-Rand → Inhaltskante. Nur in vollbreiten Elementen
     verwenden (der %-Wert bezieht sich auf deren Breite). */
  --edge: max(var(--gutter), calc((100% - var(--content)) / 2));

  --space: clamp(72px, 13.9vw, 200px);      /* Sektionsabstand          */
  --roof: clamp(120px, 20.85vw, 300px);     /* Stärke der Dach-Chevrons */

  --qb-h: 70px;                             /* Höhe Schnellauswahl      */
  --qb-top: 20px;                           /* Abstand zum oberen Rand  */
  --qb-overlap: calc(var(--qb-h) / 2);      /* wie weit die Leiste ins Hero-Bild ragt */
}


/* 02 Basis
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-text);
  font-family: var(--ff-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.nav-open { overflow: hidden; }

h1, h2, h3, p, ul, ol, figure, address { margin: 0; padding: 0; }
ul, ol { list-style: none; }
address { font-style: normal; }
img { display: block; max-width: 100%; height: auto; }
strong { font-weight: 700; }

a { color: inherit; text-decoration: none; transition: color .2s, background-color .2s, opacity .2s; }

:focus-visible {
  outline: 2px solid var(--c-orange);
  outline-offset: 3px;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--c-white);
  color: var(--c-blue);
  font-weight: 700;
}
.skip-link:focus { top: 16px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}


/* 03 Layout-Helfer & Typografie
   ========================================================================== */
.container {
  width: 100%;
  max-width: calc(var(--content) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.heading {
  font-family: var(--ff-serif);
  font-size: clamp(30px, 2.78vw, 40px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--c-blue);
}
.eyebrow + .heading { margin-top: 46px; }

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

/* Pfeil ">" vor Links und Titeln */
.chevron {
  display: inline-block;
  flex: none;
  width: 7px;
  height: 7px;
  margin-right: 12px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
}
.chevron--up {
  margin: 0 0 0 12px;
  transform: translateY(2px) rotate(-45deg);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--ff-serif);
  font-size: 18px;
  font-weight: 700;
  line-height: 25px;
}
.link-arrow .chevron { margin-right: 10px; transition: transform .2s; }
.link-arrow:hover .chevron { transform: translate(4px, -1px) rotate(45deg); }


/* 04 Header & Hero
   ========================================================================== */
.site-header {
  position: relative;
  background: var(--c-blue);
  color: var(--c-white);
}

.topbar {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 60;
  padding-top: clamp(24px, 7vw, 101px);
}

.topbar__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

.site-logo { display: block; flex: 0 1 auto; min-width: 0; }
.site-logo img { width: clamp(210px, 24.45vw, 352px); }

.main-nav { margin-right: clamp(0px, 5.3vw, 76px); }
.main-nav .menu { display: flex; gap: 56px; }
.main-nav a {
  display: block;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 25px;
  white-space: nowrap;
}
.main-nav a:hover { color: var(--c-orange); }

.nav-toggle { display: none; }

/* Höhe folgt dem Seitenverhältnis des Bildes (1310 × 695 im Entwurf) */
.hero {
  position: relative;
  display: grid;
  min-height: 540px;
}
.hero::before {
  content: "";
  grid-area: 1 / 1;
  padding-top: min(860px, calc((100% - var(--edge)) * .5306));
}

/* Bild endet an der rechten Inhaltskante – rechts bleibt ein blauer Streifen */
.hero__media {
  position: absolute;
  inset: 0 var(--edge) 0 0;
  overflow: hidden;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(22, 26, 38, .42) 0%, rgba(22, 26, 38, 0) 60%),
    radial-gradient(ellipse 45% 60% at 32% 60%, rgba(22, 26, 38, .34) 0%, rgba(22, 26, 38, 0) 100%),
    rgba(22, 26, 38, .2);
}

.hero__content {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  align-self: end;
  padding-bottom: calc(var(--qb-overlap) + clamp(40px, 6.4vw, 92px));
  padding-top: 180px;
}

.hero__title {
  font-family: var(--ff-serif);
  font-size: clamp(34px, 3.44vw, 49.5px);
  font-weight: 400;
  line-height: 1.2245;
}

.hero__lead {
  margin-top: clamp(22px, 3.05vw, 44px);
  font-size: clamp(18px, 1.67vw, 24px);
  line-height: 1.3334;
}


/* 05 Schnellauswahl (mitlaufend)
   Liegt halb auf dem Hero-Bild. Höhe 0 im Fluss, damit die folgende
   Sektion direkt am Hero anschließt; die Buttons ragen nach unten heraus.
   ========================================================================== */
.quickbar {
  position: -webkit-sticky;
  position: sticky;
  top: var(--qb-top);
  z-index: 50;
  height: 0;
  margin-top: calc(-1 * var(--qb-overlap));
  margin-bottom: var(--qb-overlap);
  padding-inline: var(--edge);
}

.quickbar__inner {
  display: flex;
  gap: 24px;
  height: var(--qb-h);
}

.quickbar__btn {
  display: flex;
  flex: 0 1 377px;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  background: var(--c-white);
  color: var(--c-blue);
  font-family: var(--ff-serif);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  transition: background-color .25s, color .25s, box-shadow .3s;
}
.quickbar__btn .chevron { margin-right: 11px; }
.quickbar__btn--accent { color: var(--c-orange); }

.quickbar__btn:hover { background: var(--c-blue); color: var(--c-white); }
.quickbar__btn--accent:hover { background: var(--c-orange); color: var(--c-white); }

/* sobald die Leiste oben "klebt" (Klasse per JS), Schatten für Kontrast auf Weiß */
.quickbar.is-stuck .quickbar__btn { box-shadow: 0 12px 32px -12px rgba(46, 53, 72, .45); }


/* 06 Charme
   ========================================================================== */
.charme__intro {
  position: relative;
  overflow: hidden;
  background: var(--c-blue);
  color: var(--c-white);
  padding-top: calc(var(--space) - 1px);
  padding-bottom: calc(var(--space) - 9px);
}
.charme__intro .heading { color: var(--c-white); }

/* großes Dach (Logo-Motiv) */
.charme__intro::before {
  content: "";
  position: absolute;
  top: clamp(40px, 7.5vw, 108px);
  left: calc(var(--edge) + clamp(40px, 8.75vw, 126px) - 1500px);
  width: 3000px;
  height: 1500px;
  background: var(--c-blue-shade);
  clip-path: polygon(50% 0, 100% 100%, calc(100% - var(--roof)) 100%, 50% var(--roof), var(--roof) 100%, 0 100%);
  pointer-events: none;
}

.charme__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.charme__text { max-width: 535px; margin-top: -2px; }

.charme__media { position: relative; }
.charme__media::before {          /* blaue Fläche hinter dem oberen Bildteil */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: var(--edge);
  height: 60.3%;
  background: var(--c-blue);
}
.charme__media img {
  position: relative;
  width: 100%;
  aspect-ratio: 1180 / 552;
  object-fit: cover;
}


/* 07 Leistungen
   ========================================================================== */
.services {
  padding-top: calc(var(--space) - 2px);
  padding-bottom: calc(var(--space) - 6px);
}

.services__grid {
  display: grid;
  grid-template-columns: 398fr 782fr;
}

.services__list {
  display: grid;
  row-gap: 41px;
  margin-top: -2px;
}

.service {
  display: grid;
  grid-template-columns: 172fr 610fr;
}

.service__num {
  margin-top: -9px;
  color: rgba(214, 95, 61, .2);
  font-size: clamp(54px, 5.56vw, 80px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .03em;
  font-variant-numeric: tabular-nums;
  transition: color .35s;
}
.service:hover .service__num { color: var(--c-orange); }

.service__body {
  position: relative;
  padding-left: 20px;
  max-width: 560px;
}
.service__title {
  color: var(--c-blue);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 25px;
}
.service__title .chevron {
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  margin: 0;
  transform: rotate(45deg);
}


/* 08 Collage
   ========================================================================== */
.collage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.collage img {
  width: 100%;
  aspect-ratio: 360 / 550;
  object-fit: cover;
}


/* 09 CTA Verkaufen | Suchen
   ========================================================================== */
.cta-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.cta {
  position: relative;
  overflow: hidden;
  display: flex;
  color: var(--c-white);
  padding-top: clamp(56px, 6.95vw, 100px);
  padding-bottom: clamp(56px, 6.45vw, 93px);
  scroll-margin-top: calc(var(--qb-top) + var(--qb-h));
}
.cta .heading { color: var(--c-white); }

.cta--sell {
  background: var(--c-blue);
  padding-left: max(var(--gutter), calc(100% - var(--content) / 2));
  padding-right: min(110px, max(var(--gutter), 7.6vw));
}
.cta--search {
  background: var(--c-orange);
  padding-left: min(112px, max(var(--gutter), 7.8vw));
  padding-right: max(var(--gutter), calc(100% - var(--content) / 2));
}

/* Dach-Chevron: Spitze oben in der Mitte zwischen beiden Hälften */
.cta::before {
  content: "";
  position: absolute;
  top: 0;
  width: 2000px;
  height: 2000px;
  pointer-events: none;
}
.cta--sell::before {
  right: 0;
  background: var(--c-blue-shade);
  clip-path: polygon(100% 0, 100% var(--roof), var(--roof) 100%, 0 100%);
}
.cta--search::before {
  left: 0;
  background: var(--c-orange-shade);
  clip-path: polygon(0 0, 100% 100%, calc(100% - var(--roof)) 100%, 0 var(--roof));
}

.cta__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.cta__text { margin-top: 37px; max-width: 470px; }
.cta--search .cta__text { max-width: 450px; }
.cta__action {
  margin-top: auto;
  padding-top: clamp(40px, 6.4vw, 92px);
}


/* 10 Unternehmen
   Spaltenraster nach Entwurf (bezogen auf 1180 px Inhaltsbreite):
   0 | 177 | 301 | 477 | 636 | 702 | 1180
   ========================================================================== */
.about {
  overflow: hidden;
  overflow: clip;
  padding-top: var(--space);
}

.about__grid {
  display: grid;
  grid-template-columns: 177fr 124fr 176fr 159fr 66fr 478fr;
  grid-template-rows: clamp(200px, 17.85vw, 257px) clamp(160px, 18.7vw, 269px) auto;
}

.about__media {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  margin-left: calc(-1 * max(var(--gutter), (100vw - var(--content)) / 2));
}
.about__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__drawing {
  position: relative;
  z-index: 1;
  grid-column: 2 / 5;
  grid-row: 2 / 4;
  align-self: start;
  padding: 7.6% 9.7% 0;
  background: var(--c-white);
}
.about__drawing img { width: 100%; }

.about__head {
  grid-column: 4 / 7;
  grid-row: 1;
}

.about__text {
  grid-column: 6 / 7;
  grid-row: 2 / 4;
  margin-top: -8px;
}


/* 11 Kontakt
   Untere 123 px blau – die weißen Karten ragen in die blaue Fläche.
   ========================================================================== */
.contact {
  --band: 123px;
  --card-pad: min(50px, var(--gutter));
  padding-top: calc(var(--space) - 10px);
  background: linear-gradient(to bottom, var(--c-white) calc(100% - var(--band)), var(--c-blue) calc(100% - var(--band)));
}

.contact__grid {
  display: grid;
  grid-template-columns: 378fr 124fr 378fr 24fr 378fr;
  margin-inline: calc(-1 * var(--card-pad));
}

.contact__card {
  display: flex;
  flex-direction: column;
  padding: 0 var(--card-pad) 42px;
  background: var(--c-white);
}
.contact__card--intro { grid-column: 1; }
.contact__card--intro .heading { margin-right: -40%; }  /* Headline darf in die Lücke laufen */
.contact__card:nth-child(2) { grid-column: 3; }
.contact__card:nth-child(3) { grid-column: 5; }

.contact__address {
  margin-top: auto;
  padding-top: 48px;
}
.contact__address p + p { margin-top: 10px; }
.contact__company,
.person__name {
  color: var(--c-blue);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 25px;
}
.contact a:hover { color: var(--c-orange); }

.person__photo {
  width: 100%;
  max-width: 277px;
  aspect-ratio: 277 / 333;
  object-fit: cover;
  filter: grayscale(1);
}
.person__info { margin-top: 49px; }
.person__mail { margin-top: 10px; overflow-wrap: anywhere; }


/* 12 Footer
   ========================================================================== */
.site-footer {
  background: var(--c-blue);
  color: var(--c-white);
  padding-top: clamp(72px, 14.1vw, 203px);
  padding-bottom: clamp(48px, 6.4vw, 92px);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 502fr 678fr;
  align-items: end;
}
.site-footer__logo img { width: clamp(210px, 24.45vw, 352px); }

.site-footer__meta { grid-column: 2; grid-row: 1; }
.site-footer__copy { font-weight: 700; letter-spacing: .01em; }

.footer-menu {
  display: flex;
  gap: 40px;
  margin-top: 11px;
}

.to-top {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  letter-spacing: .01em;
}

.site-footer a:hover { color: var(--c-orange); }


/* 13 Unterseiten (Impressum, Datenschutz)
   ========================================================================== */
.site-header--sub { padding-bottom: calc(60px + var(--qb-h) + 40px); }
.site-header--sub .topbar { position: relative; }
/* Schnellauswahl liegt auf Unterseiten vollständig im blauen Kopfbereich */
.site-header--sub + .quickbar {
  margin-top: calc(-1 * var(--qb-h) - 40px);
  margin-bottom: calc(var(--qb-h) + 40px);
}

.legal {
  padding-top: clamp(56px, 8.3vw, 120px);
  padding-bottom: var(--space);
}
.legal__inner { max-width: 760px; }
.legal h1 { margin-top: 46px; }
.legal h2 {
  margin-top: 48px;
  color: var(--c-blue);
  font-family: var(--ff-serif);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}
.legal .text { margin-top: 32px; }
.legal .text > h2:first-child { margin-top: 0; }
.legal h3 {
  margin-top: 32px;
  color: var(--c-blue);
  font-size: 16px;
  font-weight: 700;
  line-height: 25px;
  letter-spacing: .01em;
}
.legal h4 {
  margin-top: 20px;
  color: var(--c-blue);
  font-size: 16px;
  font-weight: 400;
  font-style: italic;
  line-height: 25px;
}
.legal h2 + h3 { margin-top: 16px; }
.legal h2 + p,
.legal h3 + p,
.legal h4 + p,
.legal .text p + p,
.legal .text p + ul,
.legal .text ul + p { margin-top: 12px; }
.legal ul { padding-left: 20px; list-style: disc; }
.legal li + li { margin-top: 8px; }
.legal a { color: var(--c-orange); overflow-wrap: anywhere; }


/* 14 Responsive
   ========================================================================== */

/* — kleinere Desktops — */
@media (max-width: 1279px) {
  .main-nav { margin-right: 2.5vw; }
  .main-nav .menu { gap: 36px; }
  .main-nav a { font-size: 17px; }
}

/* — Tablet: Burger-Menü — */
@media (max-width: 1023px) {
  .nav-toggle {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 -10px -6px 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--c-white);
    cursor: pointer;
  }
  .nav-toggle__bar,
  .nav-toggle__bar::before,
  .nav-toggle__bar::after {
    display: block;
    width: 26px;
    height: 2px;
    background: currentColor;
    transition: transform .3s, background-color .3s;
  }
  .nav-toggle__bar { position: relative; }
  .nav-toggle__bar::before,
  .nav-toggle__bar::after { content: ""; position: absolute; left: 0; }
  .nav-toggle__bar::before { top: -8px; }
  .nav-toggle__bar::after { top: 8px; }

  .nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(8px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { transform: translateY(-8px) rotate(-45deg); }

  .main-nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 120px var(--gutter) 80px;
    background: var(--c-blue);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility 0s .3s;
  }
  .main-nav.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity .3s;
  }
  .main-nav .menu {
    flex-direction: column;
    align-items: center;
    gap: 22px;
  }
  .main-nav a {
    font-family: var(--ff-serif);
    font-size: 34px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.2;
  }

  /* Charme */
  .charme__grid { grid-template-columns: 1fr; }
  .charme__text { margin-top: 36px; }

  /* Leistungen */
  .services__grid { grid-template-columns: 1fr; }
  .services__list { margin-top: 56px; }
  .service { grid-template-columns: clamp(84px, 16vw, 150px) 1fr; }

  /* Unternehmen */
  .about__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto clamp(80px, 14vw, 140px) auto auto;
  }
  .about__head { grid-column: 1 / -1; grid-row: 1; margin-bottom: 48px; }
  .about__media { grid-column: 1 / 8; grid-row: 2 / 4; }
  .about__media img { height: auto; aspect-ratio: 431 / 526; }
  .about__drawing { grid-column: 6 / 13; grid-row: 3 / 5; }
  .about__text { grid-column: 4 / -1; grid-row: 5; margin-top: 48px; }

  /* Kontakt */
  .contact__grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
  }
  .contact__card--intro {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    padding-bottom: 64px;
  }
  .contact__card--intro .eyebrow { grid-column: 1; }
  .contact__card--intro .heading { grid-column: 1; margin-right: 0; }
  .contact__address { grid-column: 2; grid-row: 1 / 3; align-self: end; padding-top: 0; }
  .contact__card:nth-child(2) { grid-column: 1; }
  .contact__card:nth-child(3) { grid-column: 2; }

  /* Footer */
  .site-footer__grid { grid-template-columns: 1fr auto; }
  .site-footer__meta { grid-column: 1 / -1; grid-row: 2; margin-top: 40px; }
  .to-top { grid-column: 2; grid-row: 1; }
}

/* — Collage & CTA untereinander — */
@media (max-width: 899px) {
  .cta-split { grid-template-columns: 1fr; }
  .cta--sell,
  .cta--search {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
  .cta__action { padding-top: 40px; }
}

/* — Smartphone — */
@media (max-width: 767px) {
  :root {
    --qb-h: 104px;                          /* 2 × 48 px Buttons + 8 px Abstand */
    --qb-top: 12px;
    --qb-overlap: 24px;                     /* Bildkante mittig im oberen Button */
  }

  .hero { min-height: max(560px, min(calc(100svh - 72px), 720px)); }
  .hero__media { right: 0; }               /* Bild auf dem Handy randlos, ohne blauen Streifen */
  .hero__content { padding-top: 140px; }
  .br-lg { display: none; }

  /* Buttons untereinander */
  .quickbar__inner { flex-direction: column; gap: 8px; }
  /* Leiste ragt tiefer in den Charme-Bereich – Abstand zum Inhalt ausgleichen */
  .charme__intro { padding-top: calc(var(--space) - 1px + var(--qb-h) / 2 - var(--qb-overlap)); }
  .quickbar__btn {
    flex: 1 1 0;
    padding: 0 16px;
    font-size: 17px;
    line-height: 1.15;
  }
  .quickbar__btn .chevron { margin-right: 8px; }

  .eyebrow + .heading { margin-top: 28px; }
  main section[id] { scroll-margin-top: calc(var(--qb-top) + var(--qb-h) + 16px - var(--space)); }

  .charme__media img { aspect-ratio: 3 / 2; }

  .services__list { row-gap: 36px; }
  .service { grid-template-columns: 76px 1fr; }
  .service__num { margin-top: -4px; }

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

  .about__head { margin-bottom: 36px; }
  .about__media { grid-column: 1 / 11; }
  .about__text { grid-column: 1 / -1; }
  .about__drawing { grid-column: 4 / 13; }
  .about__text { margin-top: 40px; }

  .contact {
    padding-bottom: 72px;
    background: var(--c-white);
  }
  .contact__grid {
    grid-template-columns: 1fr;
    row-gap: 56px;
    margin-inline: 0;
  }
  .contact__card { padding: 0; }
  .contact__card--intro { display: flex; padding-bottom: 0; }
  .contact__address { align-self: auto; padding-top: 36px; }
  .contact__card:nth-child(2),
  .contact__card:nth-child(3) { grid-column: 1; }
  .person__info { margin-top: 24px; }

  .site-footer__grid {
    grid-template-columns: 1fr;
    row-gap: 40px;
    align-items: start;
  }
  .site-footer__meta,
  .to-top { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 0; }
  .footer-menu { gap: 28px; }
}

@media (max-width: 480px) {
  .service { grid-template-columns: 1fr; }
  .service__num { margin: 0 0 10px; font-size: 48px; }
}

@media (max-width: 380px) {
  .hero__title { font-size: 32px; }
}