/* ==========================================================================
   K Multi Family Office GmbH, alle Seiten
   Layout und Typografie entsprechen der ursprünglichen Website
   (Referenzbreite 1600 px).
   ========================================================================== */

:root {
  --dark:       #4e4138;   /* Überschriften, aktiver Navigationsbutton      */
  --beige:      #b89a82;   /* Farbflächen "Über uns" / "So einzigartig"     */
  --gold:       #ddbf7f;   /* Zierlinien, Formularlinien, Senden-Button     */
  --card-bg:    #fffaf7;   /* Kachelhintergrund                             */
  --card-title: #a89484;   /* Kachelüberschriften                           */
  --text:       #45403c;   /* Fliesstext auf Weiss                          */
  --text-light: #ffffff;   /* Fliesstext auf Beige / Bild                   */
  --disabled:   #666666;   /* Senden-Button vor Zustimmung                  */
  --logo-wort:  #3a3a3a;   /* Schriftzug unter den Lohokreisen              */
}
/* Gold ist im Druck PANTONE 871 U (metallisch). Auf dem Bildschirm entspricht
   ihm die Fassung aus der Logodatei des Corporate Design, #ddbf7f. */

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

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

body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; }

/* Sichtbare Markierung für die Bedienung per Tastatur. currentColor passt sich
   dem Abschnitt an: hell auf Beige, dunkel auf Weiss. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Inhaltsspalte: bei 1600 px Fensterbreite von 170 px bis 1430 px */
.stage {
  position: relative;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --------------------------------------------------------------- Kopfzeile */
.site-header {
  position: relative;
  height: 246px;
  background: #fff;
}
.site-header .stage { height: 100%; position: static; }

.logo {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  text-align: center;
  text-decoration: none;
  color: var(--logo-wort);
}
.logo-mark { display: block; width: 90px; height: 87px; margin: 0 auto; color: var(--gold); }
.logo-text {
  display: block;
  margin-top: 9px;
  font-size: 13px;
  font-weight: 300;          /* Inter Light, wie im Corporate Design */
  letter-spacing: .2px;
  white-space: nowrap;
}

/* Die Navigation sitzt im Original 400 px vom rechten Rand (bei 1600 px
   Fensterbreite). Sie wandert mit der Inhaltsspalte mit, statt bei schmaleren
   Fenstern an den Fensterrand zu springen. */
.main-nav {
  position: absolute;
  top: 43px;
  right: max(20px, calc(50% - 400px));
  display: flex;
  gap: 6px;
}
.nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 73px;
  height: 37px;
  padding: 0 12px;
  border: 1px solid var(--dark);
  color: var(--dark);
  font-size: 15px;
  letter-spacing: 1px;
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.nav-btn.is-active,
.nav-btn:hover {
  background: var(--dark);
  border-color: var(--dark);
  color: #fff;
}

.lang-switch { position: absolute; top: 183px; right: max(20px, calc(50% - 400px)); }
.lang-note {
  position: absolute;
  top: 36px;
  right: 0;
  width: 210px;
  margin: 0;
  color: #6b6058;
  font-size: 13px;
  line-height: 17px;
  text-align: right;
}
.lang-switch select {
  width: 83px;
  height: 31px;
  padding: 0 8px;
  border: 1px solid #cbbfb4;
  border-radius: 0;
  background: #fff;
  color: #4a4540;
  font: inherit;
  font-size: 15px;
  letter-spacing: .5px;
}

/* -------------------------------------------------------------------- Hero */
.hero {
  position: relative;
  overflow: hidden;
  height: 740px;
  background: #e8cfae url("../images/hero-zuerich.jpg") center center / cover no-repeat;
}

/* ------------------------------------------------------------------ Intro */
.intro {
  height: 206px;
  padding-top: 28px;
  background: #fff;
  text-align: center;
}
.intro h1 {
  margin: 0;
  color: var(--dark);
  font-size: 60px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .5px;
}
.intro p {
  margin: 10px 0 0;
  color: var(--dark);
  font-size: 40px;
  line-height: 1.2;
}

/* --------------------------------------------------- Abschnittsüberschrift */
.section-head {
  margin: 0;
  font-size: 48px;
  font-weight: 400;
  line-height: 66px;
  letter-spacing: .5px;
}
.rule {
  display: block;
  height: 3px;
  background: var(--gold);
}
.rule-about  { width: 285px; margin-top: 3px; }
.rule-areas  { width: 289px; margin-top: 0; }
.rule-unique { width: 384px; margin-top: 0; }
.rule-heart  { width: 468px; margin: 3px auto 0; }

/* --------------------------------------------------------------- Über uns */
.about {
  position: relative;
  height: 889px;
  overflow: hidden;
  background: var(--beige);
  color: var(--text-light);
}
.about-copy {
  position: absolute;
  top: 54px;
  left: 51px;
  width: 462px;
  z-index: 2;
}
.about-copy .section-head { color: var(--text-light); }
.about-copy p {
  margin: 0;
  font-size: 18px;
  line-height: 24px;
}
.about-copy p:nth-of-type(1) { margin-top: 31px; }
.about-copy p:nth-of-type(2) { margin-top: 23px; }
.about-copy p:nth-of-type(3) { margin-top: 21px; }

.about-buttons { display: flex; gap: 12px; margin-top: 58px; }
.ghost-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 37px;
  padding: 0 20px;
  border: 1px solid #fff;
  color: #fff;
  font-size: 14px;
  letter-spacing: 1px;
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.ghost-btn:hover { background: #fff; color: var(--beige); }
button.ghost-btn { background: transparent; font-family: inherit; cursor: pointer; }

/* Die beiden Bilder hängen am rechten Rand der Inhaltsspalte (bei 1260 px
   Spaltenbreite stehen sie wie im Original bei 760 px bzw. 814 px). So bleiben
   sie auch bei schmaleren Fenstern vollständig sichtbar. */
.about-img { position: absolute; z-index: 2; }
.about-img-1 { right: 19.15%; top: 37px;  width: 271px; height: 399px; }
.about-img-2 { right: 4%;     top: 485px; width: 414px; height: 305px; }

.deco { position: absolute; z-index: 1; color: var(--gold); pointer-events: none; }
.deco-hero   { left: 50%; margin-left: -143px; top: 382px; width: 287px; height: 278px; }
.deco-about  { left: 49px;  top: 619px;  width: 489px; height: 474px; }
.deco-unique { left: 933px; top: -150px; width: 381px; height: 369px; }

/* -------------------------------------------------------- Unsere Bereiche */
.areas {
  padding: 33px 0 4px;
  background: #fff;
}
.areas .section-head { color: var(--dark); margin-left: 31px; }
.areas .rule { margin-left: 31px; }
.areas-lead {
  margin: 0 0 0 31px;
  max-width: 476px;
  font-size: 18px;
  line-height: 28px;
}
.areas-lead:nth-of-type(1) { margin-top: 34px; }
.areas-lead:nth-of-type(2) { margin-top: 21px; }

.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 38px 36px;
  margin-top: 110px;
}
.card {
  display: flex;
  min-height: 366px;
  background: var(--card-bg);
}
.card > img {
  flex: 0 0 292px;
  width: 292px;
  height: 266px;
  object-fit: cover;
}
.card-body { padding: 10px 7px 20px 24px; }
.card-body h3 {
  margin: 0;
  color: var(--card-title);
  max-width: 260px;
  font-size: 24px;
  font-weight: 400;
  line-height: 34px;
  letter-spacing: .3px;
}
.card-body p {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 21px;
}

/* ---------------------------------------------------------- So einzigartig */
.unique {
  position: relative;
  height: 471px;
  overflow: hidden;
  padding-top: 32px;
  background: var(--beige);
  color: var(--text-light);
}
.unique .section-head { color: var(--text-light); margin-left: 31px; }
.unique .rule { margin-left: 31px; }
.unique p {
  position: relative;
  z-index: 2;
  margin: 48px 0 0 31px;
  max-width: 486px;
  font-size: 18px;
  line-height: 28px;
}

/* ======================================================== Seite „Über uns“
   Eigene Unterseite: Auf dem Bildstreifen folgt das Namensband auf beigem
   Grund, danach die drei Textblöcke auf Weiss und zuletzt der beige Abschnitt
   mit Anschrift, Foto, Karte und Formular.                                  */

.intro-alt { background: var(--beige); }
.intro-alt h1,
.intro-alt p { color: var(--text-light); }

.story {
  position: relative;
  overflow: hidden;
  padding: 84px 0 90px;
  background: #fff;
}
.story article {
  position: relative;
  z-index: 2;
  max-width: 550px;
  margin-left: 64px;
}
.story article + article { margin-top: 120px; }
.story h2 {
  margin: 0 0 22px;
  color: var(--card-title);
  font-size: 37px;
  font-weight: 400;
  line-height: 44px;
  letter-spacing: .3px;
}
.story p { margin: 0; font-size: 18px; line-height: 30px; }
.deco-story { right: 10px; top: -14px; width: 287px; height: 278px; }

.heart {
  position: relative;
  padding: 44px 0 89px;
  background: var(--beige);
  color: var(--text-light);
}
.heart-grid {
  display: grid;
  grid-template-columns: 545px 316px;
  column-gap: 175px;
  row-gap: 86px;      /* Anschrift und Foto beginnen auf gleicher Höhe */
}
.heart-head { grid-column: 1; text-align: center; }
.heart-head .section-head { color: var(--text-light); }

.heart-info {
  grid-column: 1;
  font-size: 20px;
  line-height: 41px;
  text-align: center;
}
.heart-info p { margin: 0; }
.heart-info p + p { margin-top: 39px; }
.heart-info a { text-decoration: none; }
.heart-info a:hover { text-decoration: underline; }

.heart-figur {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
}
.heart-img {
  width: 316px;
  height: 447px;
  object-fit: cover;
}
/* Name und Funktion stehen so auf der Visitenkarte im Corporate Design. */
.heart-figur figcaption {
  margin-top: 16px;
  font-size: 17px;
  line-height: 25px;
  text-align: center;
}
.heart-figur figcaption span { font-weight: 300; opacity: .85; }

/* Anfahrt. Die Karte wird erst nach einem Klick von Google geladen; vorher
   verlässt kein Datum den Browser. Ohne JavaScript bleibt der Hinweis mit dem
   Link auf Google Maps stehen. */
.map {
  position: relative;
  width: 690px;
  max-width: 100%;
  margin: 96px auto 0;
  aspect-ratio: 690 / 420;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .45);
  background: #a98a70;
}
.map iframe { display: block; width: 100%; height: 100%; border: 0; }
.map-note {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 24px;
  text-align: center;
}
.map-note > * { flex: none; }
.map-note svg { width: 32px; height: 32px; }
.map-note p { margin: 0; max-width: 420px; font-size: 15px; line-height: 22px; }
.map-route { font-size: 15px; }

.heart .form-wrap h3 { margin-top: 118px; }

/* ============================================ Impressum, AGB, Datenschutz */
.legal-head { height: auto; padding: 52px 20px; }
.legal-head h1 { font-size: 40px; letter-spacing: .3px; }

.legal { padding: 74px 0 90px; background: #fff; }
.legal .stage { max-width: 940px; }
.legal-stand { margin: 0 0 46px; color: #7a706a; font-size: 15px; }
.legal section + section { margin-top: 46px; }
.legal h2 {
  margin: 0 0 16px;
  color: var(--card-title);
  font-size: 25px;
  font-weight: 400;
  line-height: 34px;
  letter-spacing: .3px;
}
.legal p { margin: 0 0 14px; max-width: 720px; font-size: 17px; line-height: 28px; }
.legal p:last-child { margin-bottom: 0; }

/* Kopfblock des Anwaltsdokuments ueber den Abschnitten. */
.legal-vorspann {
  font-size: 16px;
  line-height: 26px;
  color: #4a4a4a;
}
.legal-vorspann + .legal-vorspann { margin-top: -6px; }
.legal .stage > .legal-vorspann:last-of-type { margin-bottom: 34px; }

/* Zwischenueberschrift GEMEINSAME SCHLUSSBESTIMMUNGEN: steht im Dokument
   ueber beiden Teilen und traegt keinen eigenen Text. */
.legal section:has(> h2:only-child) h2 {
  margin-top: 18px;
  font-size: 15px;
  letter-spacing: 0.12em;
  color: #6a6a6a;
}
.legal ul {
  margin: 0 0 14px;
  padding-left: 22px;
  max-width: 720px;
  font-size: 17px;
  line-height: 28px;
}
.legal li { margin-bottom: 6px; }
.legal li::marker { color: var(--gold); }
.legal a { color: var(--dark); }

/* ----------------------------------------------------------------- Kontakt */
.contact {
  padding: 84px 20px 89px;
  /* Der Farbverlauf verdunkelt das Hintergrundbild dort, wo Überschrift und
     Formular stehen, damit die weisse Schrift so gut lesbar bleibt wie im
     Original. Oben und unten bleibt das Bild unverändert hell. */
  background:
    linear-gradient(rgba(28, 20, 14, .08) 0%,
                    rgba(28, 20, 14, .38) 16%,
                    rgba(28, 20, 14, .38) 90%,
                    rgba(28, 20, 14, .10) 100%),
    #2b2320 url("../images/kontakt-hintergrund.jpg") center center / cover no-repeat;
  color: #fff;
  text-align: center;
}
.contact-title {
  margin: 0;
  font-size: 58px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .5px;
}
.contact-rule {
  display: block;
  width: 543px;
  max-width: 100%;
  height: 2px;
  margin: 24px auto 13px;
  background: var(--gold);
}

.form-wrap {
  width: 690px;
  max-width: 100%;
  margin: 0 auto;
  text-align: left;
}
.form-wrap h3 {
  margin: 99px 0 0;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .5px;
}

.contact-form {
  display: grid;
  grid-template-columns: 332px 332px;
  column-gap: 26px;
  margin-top: 31px;
}
.field { position: relative; height: 59px; }
.field-full { grid-column: 1 / -1; }

.field input,
.field textarea {
  width: 100%;
  height: 40px;
  padding: 0 0 5px;
  border: 0;
  border-bottom: 2px solid var(--gold);
  border-radius: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 15px;
}
.field input:focus,
.field textarea:focus { outline: none; border-bottom-color: #fff; }

/* Automatisches Ausfuellen (Chrome, Edge, Safari).
   Diese Browser malen ausgefuellte Felder mit einem eigenen hellblauen Block
   und dunkler Schrift zu. Die Felder verlieren dabei ihre transparente
   Gestaltung, und die weisse Schrift wird unlesbar.

   background-color laesst sich hier nicht ueberschreiben, auch nicht mit
   !important. Der sonst uebliche innere box-shadow scheidet aus: er
   funktioniert nur mit einer deckenden Farbe, und dieses Formular liegt ueber
   einem Foto. Stattdessen zwei Griffe, die mit Transparenz arbeiten:

   1. background-clip: text beschneidet den aufgezwungenen Hintergrund auf die
      Buchstaben - er ist damit praktisch unsichtbar;
   2. der sehr lange transition-delay haelt die urspruengliche Farbe, weil
      Chrome die Einfaerbung erst nach dem Ausfuellen nachtraegt.

   -webkit-text-fill-color schlaegt color und stellt die weisse Schrift her. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field input:-webkit-autofill:active,
.field textarea:-webkit-autofill,
.field textarea:-webkit-autofill:hover,
.field textarea:-webkit-autofill:focus {
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  transition: background-color 0s 600000s, color 0s 600000s;
}

/* Firefox faerbt ausgefuellte Felder ueber eine eigene Eigenschaft. */
.field input:autofill,
.field textarea:autofill {
  background-color: transparent;
  color: #fff;
  filter: none;
}

/* Die Vorwahl steht in einem eigenen Kasten neben dem Nummernfeld und wird
   von Chrome mitgefaerbt, sobald die Telefonnummer automatisch kommt. */
.field-phone .phone-prefix select:-webkit-autofill {
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, .82);
  transition: background-color 0s 600000s;
}

.field label {
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, .82);
  font-size: 15px;
  pointer-events: none;
  transition: opacity .15s;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label { opacity: 0; }

.field-phone { display: flex; align-items: flex-start; }
.field-phone .phone-prefix {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 40px;
  flex: 0 0 auto;
  border-bottom: 2px solid var(--gold);
  color: rgba(255, 255, 255, .82);
}
.field-phone .phone-prefix svg { width: 17px; height: 17px; }
.field-phone .phone-prefix select {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 24px;
  border: 0;
  border-radius: 0;
  font-size: 0;
  cursor: pointer;
  background: transparent
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%23e8e2dc' stroke-width='1.4'/%3E%3C/svg%3E")
    no-repeat center / 11px 8px;
}
.field-phone .phone-prefix select option { color: #333; font-size: 14px; }
.field-phone input { padding-left: 8px; }
.field-phone label { left: 62px; }

.field-message { height: 89px; grid-column: 1 / -1; }
.field-message textarea {
  height: 89px;
  padding-top: 8px;
  resize: vertical;
}
.field-message label { align-items: flex-start; padding-top: 9px; }

/* Spamschutz-Feld: für Menschen unsichtbar, für Automaten vorhanden.
   Nicht display:none, damit einfache Skripte es trotzdem ausfüllen. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.consent {
  grid-column: 1 / -1;
  display: flex;
  gap: 15px;
  margin-top: 23px;
}
.consent input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  appearance: none;
  border: 1px solid var(--gold);
  background: transparent;
  cursor: pointer;
}
.consent input:checked::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--gold);
}
.consent label { max-width: 600px; font-size: 14px; line-height: 19px; }
.consent a { color: inherit; }

.send-btn {
  grid-column: 1 / -1;
  justify-self: start;
  width: 216px;
  height: 38px;
  margin-top: 32px;
  border: 0;
  border-radius: 0;
  background: var(--gold);
  color: #fff;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: background-color .2s;
}
.send-btn:hover:not(:disabled) { background: #cfae66; }
.send-btn:disabled { background: var(--disabled); cursor: not-allowed; }

.form-status {
  grid-column: 1 / -1;
  min-height: 0;
  margin: 12px 0 0;
  font-size: 15px;
}
.form-status:empty { margin: 0; }

/* Auffangnetz des Kontaktformulars: erscheint, wenn sich kein Mailprogramm
   oeffnet oder die Nachricht fuer die Uebergabe zu lang ist. */
.mail-fallback {
  grid-column: 1 / -1;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--gold);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.55);
}
.mail-fallback[hidden] { display: none; }
.mail-fallback-text {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.5;
}
.mail-fallback-body {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, 0.22);
  border-radius: 3px;
  background: #fff;
  resize: vertical;
}
.copy-btn {
  margin-top: 10px;
  height: 40px;
  padding: 0 22px;
  border: 1px solid var(--gold);
  border-radius: 3px;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.copy-btn:hover { background: var(--gold); color: #fff; }

/* ----------------------------------------------------------------- Fusszeile */
.site-footer {
  position: relative;
  height: 304px;
  background: #fff;
  color: #1a1a1a;
  font-size: 14px;
  line-height: 23.5px;
}
/* zentrierter Inhaltsblock der Fusszeile: 812 px breit */
.site-footer .stage {
  position: relative;
  height: 100%;
  max-width: 852px;
}
.site-footer p { margin: 0; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer .foot-address a[target] { text-decoration: underline; }

.foot-logo   { position: absolute; left: 20px;  top: 57px;  width: 132px; color: var(--logo-wort); }
.foot-logo svg { width: 100px; height: 97px; margin-left: 13px; color: var(--gold); }
.foot-logo span { display: block; margin-top: 9px; font-size: 13px; font-weight: 300; line-height: 15.6px; text-align: center; }

.foot-address { position: absolute; left: 196px; top: 63px; }
.foot-address p + p { margin-top: 15px; line-height: 18.5px; }

.foot-contact { position: absolute; left: 471px; top: 63px; }
.linkedin { position: absolute; left: -2px; top: 106px; color: #111; }
.linkedin svg { width: 34px; height: 34px; }

.foot-badge { position: absolute; left: 695px; top: 52px; }
.foot-badge img { width: 97px; height: 97px; }

.foot-copy { position: absolute; left: 646px; top: 185px; white-space: nowrap; }

/* ================================================================ Responsive
   Unterhalb der Referenzbreite gehen die absolut gesetzten Elemente in einen
   fliessenden Aufbau über.                                                  */

@media (max-width: 1100px) {
  .site-header { height: auto; padding: 22px 0 20px; }
  .site-header .stage {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .logo { position: static; transform: none; }
  .main-nav, .lang-switch { position: static; }

  .hero { height: 46vw; min-height: 240px; }
  .deco-hero { width: 20vw; height: 19.4vw; margin-left: -10vw; top: 52%; }

  .intro { height: auto; padding: 40px 20px; }
  .intro h1 { font-size: clamp(28px, 5vw, 60px); }
  .intro p  { font-size: clamp(20px, 3vw, 40px); }

  .section-head { font-size: clamp(30px, 4.4vw, 48px); line-height: 1.35; }
  .rule-about, .rule-areas, .rule-unique { width: 260px; max-width: 60%; margin-top: 6px; }
  .rule-heart { width: 260px; max-width: 60%; margin: 6px auto 0; }

  .about { height: auto; padding: 44px 0 54px; }
  .about .stage { display: flex; flex-direction: column; gap: 30px; }
  .about-copy { position: static; width: auto; }
  .about-img  { position: static; width: 100%; height: auto; max-width: 420px; }
  .deco-about { left: -60px; top: auto; bottom: -160px; }

  .areas { padding: 44px 0 40px; }
  .areas .section-head, .areas .rule, .areas-lead { margin-left: 0; }
  .cards { grid-template-columns: minmax(0, 1fr); margin-top: 48px; }

  .unique { height: auto; padding: 44px 0 60px; }
  .unique .section-head, .unique .rule, .unique p { margin-left: 0; }
  .unique p { margin-top: 30px; }
  .deco-unique { left: auto; right: -120px; top: -180px; }

  .legal-head { padding: 34px 20px; }
  .legal-head h1 { font-size: clamp(22px, 4vw, 40px); }
  .legal { padding: 44px 0 54px; }
  .legal h2 { font-size: clamp(21px, 2.6vw, 25px); line-height: 1.35; }
  .legal-stand { margin-bottom: 32px; }

  .story { padding: 46px 0 54px; }
  .story article { margin-left: 0; max-width: none; }
  .story article + article { margin-top: 62px; }
  .story h2 { font-size: clamp(24px, 3.6vw, 37px); line-height: 1.35; margin-bottom: 18px; }
  .deco-story { right: -90px; top: -70px; }

  .heart { padding: 44px 0 60px; }
  .heart-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; justify-items: center; }
  .heart-info { font-size: 18px; line-height: 34px; }
  .heart-info p + p { margin-top: 28px; }
  .heart-figur { grid-column: 1; grid-row: auto; }
  /* schmale Fenster: der Hinweis braucht mehr Platz als das Seitenverhältnis */
  .map { margin-top: 46px; min-height: 320px; }
  .heart .form-wrap h3 { margin-top: 54px; }

  .contact { padding: 54px 20px 60px; }
  /* Die Grundgrössen sind so gewählt, dass auch die langen Einzelwörter
     („MASSGESCHNEIDERT“, „KONTAKTINFORMATIONEN“) auf 320 px Breite passen. */
  .contact-title { font-size: clamp(22px, 4.6vw, 58px); }
  .contact-rule { margin: 16px auto 10px; }
  .form-wrap h3 { margin-top: 48px; font-size: clamp(19px, 6.2vw, 28px); }
  .contact-form { grid-template-columns: minmax(0, 1fr); column-gap: 0; }

  .site-footer { height: auto; padding: 46px 0 50px; }
  .site-footer .stage {
    max-width: 1300px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 24px;
  }
  .foot-logo, .foot-address, .foot-contact, .foot-badge, .foot-copy, .linkedin {
    position: static;
    left: auto;
    top: auto;
    padding: 0;
  }
  .foot-logo { width: auto; }
  .foot-logo svg { margin-left: 0; }
  .foot-logo span { text-align: left; }
  .foot-address p + p { margin-top: 24px; }
  .linkedin { display: inline-block; margin-top: 18px; }
  .foot-copy { grid-column: 1 / -1; white-space: normal; }
  .card-body h3 { max-width: none; }
}

/* ------------------------------------------------------- Bedienung am Handy
   Eingabefelder mit weniger als 16 px lassen iOS beim Antippen in die Seite
   zoomen; Schaltflächen bekommen zudem eine Fläche, die sich mit dem Finger
   sicher treffen lässt.                                                     */
/* Auf schmalen Bildschirmen genuegen die kleineren Bildfassungen. Das spart
   rund 1,1 MB Ladevolumen, ohne dass ein Unterschied sichtbar waere. */
@media (max-width: 800px) {
  .hero {
    background-image: url("../images/hero-zuerich-800.jpg");
  }
  .contact {
    background-image:
      linear-gradient(rgba(28, 20, 14, .08) 0%,
                      rgba(28, 20, 14, .38) 16%,
                      rgba(28, 20, 14, .38) 90%,
                      rgba(28, 20, 14, .10) 100%),
      url("../images/kontakt-hintergrund-800.jpg");
  }
}

@media (max-width: 768px) {
  .field input,
  .field textarea,
  .field label,
  .lang-switch select { font-size: 16px; }
  /* 16 px verhindert das Hineinzoomen beim Antippen; der gewählte Wert bleibt
     unsichtbar, sichtbar ist nur das Pfeilsymbol im Hintergrund. */
  .field-phone .phone-prefix select { font-size: 16px; color: transparent; }
  .field-phone .phone-prefix select option { font-size: 16px; color: #333; }

  .lang-switch select { height: 40px; }
  .nav-btn { height: 44px; }

  .field { height: 63px; }
  .field input { height: 44px; }
  .field label { height: 44px; }
  .field-phone .phone-prefix,
  .field-phone .phone-prefix select { height: 44px; }
  .consent input { width: 24px; height: 24px; }
  .send-btn { height: 44px; }
  .map-note .ghost-btn { height: 44px; }

  /* Foto darf nie breiter werden als der Bildschirm */
  .heart-img { width: 100%; max-width: 316px; height: auto; aspect-ratio: 316 / 447; }
}

@media (max-width: 640px) {
  .card { flex-direction: column; min-height: 0; }
  .card > img { flex: none; width: 100%; height: auto; }
  .card-body { padding: 16px 20px 24px; }
  .site-footer .stage { grid-template-columns: minmax(0, 1fr); }
  .foot-badge img { width: 88px; height: 88px; }
}

/* ==================================================================== Druck
   Vor allem für Impressum, AGB und Datenschutzerklärung: schwarz auf weiss,
   ohne Navigation, Bildstreifen und Formular.                              */
@media print {
  body { color: #000; font-size: 11pt; line-height: 1.45; }
  .site-header .main-nav,
  .lang-switch,
  .hero,
  .deco,
  .map,
  .contact-form,
  .honigtopf { display: none; }

  .site-header { height: auto; padding: 0 0 12pt; }
  .logo { position: static; transform: none; }
  .intro, .intro-alt, .legal-head { background: none; height: auto; padding: 12pt 0; }
  .intro h1, .intro p, .legal-head h1 { color: #000; font-size: 18pt; }
  .legal { padding: 0; }
  .legal .stage, .stage { max-width: none; padding: 0; }
  .legal h2 { color: #000; font-size: 13pt; page-break-after: avoid; }
  .legal p, .story p { font-size: 11pt; max-width: none; }
  .legal section { page-break-inside: avoid; }
  .about, .heart, .unique, .contact { background: #fff; color: #000; }
  .site-footer { height: auto; page-break-inside: avoid; }
  .site-footer .stage { display: block; max-width: none; }
  .foot-logo, .foot-address, .foot-contact, .foot-badge, .foot-copy, .linkedin {
    position: static; margin-bottom: 8pt;
  }
  a { text-decoration: none; }
  /* Adressen ausschreiben, damit sie auf Papier nachvollziehbar bleiben */
  .legal a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}