/* ==========================================================================
   ALBI HOME — KONTAKT (the page)
     1. the hero, over the entrance photograph
     2. the two lines, as glass cards
     3. the split panel: form left, "Direkt erreichbar" right
     4. form controls (the only real form on the site)

   Depends on tokens.css + base.css + components.css + hero.css.
   area.css handles the Einsatzgebiet section that closes the page; nothing
   here touches it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO
   The photograph is bright — white render, open sky — and every other page on
   this site opens dark. A flat scrim heavy enough to fix that (.88, like the
   Über-uns backdrop) would erase the picture entirely, so the scrim is
   DIRECTIONAL instead: near-opaque on the left where the headline sits over
   open sky, thinning to the right so the entrance door and the glazing — the
   thing being sold — stay visible behind the cards.
   -------------------------------------------------------------------------- */
.contact-hero {
  position: relative;
  padding-block: clamp(3rem, 5.5vw, 5.25rem) clamp(3.5rem, 6vw, 6rem);
  background-color: var(--bg-hero);
  background-image: var(--contact-scrim), url("../img/contact-bg-1440.jpg");
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;

  --contact-scrim: linear-gradient(
    100deg,
    rgba(9, 8, 6, .95) 0%,
    rgba(9, 8, 6, .91) 34%,
    rgba(9, 8, 6, .76) 62%,
    rgba(9, 8, 6, .64) 100%
  );
}
@supports (background-image: image-set(url("x.webp") type("image/webp") 1x)) {
  .contact-hero {
    background-image: var(--contact-scrim), image-set(
      url("../img/contact-bg-1440.webp") type("image/webp") 1x,
      url("../img/contact-bg-1440.jpg")  type("image/jpeg") 1x);
  }
}
@media (max-width: 1023.98px) {
  .contact-hero { background-image: var(--contact-scrim), url("../img/contact-bg-1024.jpg"); }
  @supports (background-image: image-set(url("x.webp") type("image/webp") 1x)) {
    .contact-hero {
      background-image: var(--contact-scrim), image-set(
        url("../img/contact-bg-1024.webp") type("image/webp") 1x,
        url("../img/contact-bg-1024.jpg")  type("image/jpeg") 1x);
    }
  }
}
@media (max-width: 719.98px) {
  .contact-hero { background-image: var(--contact-scrim), url("../img/contact-bg-720.jpg"); }
  @supports (background-image: image-set(url("x.webp") type("image/webp") 1x)) {
    .contact-hero {
      background-image: var(--contact-scrim), image-set(
        url("../img/contact-bg-720.webp") type("image/webp") 1x,
        url("../img/contact-bg-720.jpg")  type("image/jpeg") 1x);
    }
  }
}

/* Softens the seam into the flat section below, so the photograph ends by
   fading rather than by stopping at a hard horizontal edge. */
.contact-hero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 140px;
  background: var(--grad-hero-foot);
  pointer-events: none;
}

.contact-hero__grid {
  position: relative;
  z-index: var(--z-content);
  display: grid;
  grid-template-columns: minmax(0, 585fr) minmax(0, 640fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.contact-hero__title {
  margin-top: var(--space-5);
  /* Breaks "Lassen Sie uns über / Ihr Projekt sprechen", as drawn. Balanced
     wrapping (base.css's default for headings) splits it after "uns". */
  max-width: 16ch;
  text-wrap: wrap;
}

.contact-hero__lead {
  margin-top: var(--space-6);
  max-width: 54ch;
  color: var(--text-on-media);
  line-height: var(--lh-normal);
}

/* --- The response pledge -------------------------------------------------
   The one green thing on the site. Green is reserved for status here — it is
   a promise about behaviour, not a brand accent — so it must not be gold. */
.contact-pledge {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  color: var(--text-primary);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
}
.contact-pledge::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: var(--radius-pill);
  background-color: var(--success);
  /* The resting ring. motion.css adds a second, expanding shadow layer on top
     of this one so the pulse grows out of the ring rather than replacing it. */
  box-shadow: 0 0 0 4px var(--a-success-18);
}

/* --------------------------------------------------------------------------
   2. THE LINE CARDS
   The design draws three single-purpose cards (WhatsApp / Telefon / E-Mail).
   This business has no mailbox and two mobiles that are BOTH on WhatsApp, so
   the card is one LINE carrying both actions rather than one channel. Two
   richer cards land at almost exactly the height of the three drawn ones.
   -------------------------------------------------------------------------- */
.contact-lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.line-card {
  padding: clamp(1.25rem, 2vw, 1.75rem);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-lg);
  /* The same frosted surface as the hero feature strip. Alpha, not a flat
     colour, so the card stays ~26 points above whatever the photograph is
     doing behind it rather than at one fixed grey. */
  background-color: rgba(255, 255, 255, .055);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: border-color var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .line-card:hover {
    border-color: var(--a-gold-24);
    background-color: rgba(255, 255, 255, .08);
  }
}

.line-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.line-card__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--grad-gold);
  color: var(--text-on-gold);
  box-shadow: var(--shadow-sm);
}
.line-card__icon .icon { width: 24px; height: 24px; }

.line-card__label {
  display: block;
  color: var(--text-accent);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  line-height: 1.2;
  text-transform: uppercase;
}

/* A link, so a desktop visitor can still click to dial through their phone's
   pairing — and it keeps the number selectable for copy-paste. */
.line-card__number {
  display: inline-block;
  margin-top: var(--space-2);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + 0.85vw, 1.625rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: 1.1;
  text-decoration: none;
}
.line-card__number:hover { color: var(--text-accent); }

.line-card__note {
  margin-top: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

/* --- The two actions ------------------------------------------------------
   48px rather than the site's 56px button: these are the third level of a
   card, not a page CTA, and 56 makes the pair dominate the card it sits in.
   Still clears the 44px touch minimum with room to spare. */
.line-card__actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.line-card__actions .btn {
  /* min-width:0 with the zero basis, or the two buttons size themselves from
     their labels — "WhatsApp" plus a disc against a bare "Anrufen" — and the
     pair ends up visibly lopsided. */
  flex: 1 1 0;
  min-width: 0;
  min-height: 48px;
  padding-inline: var(--space-4);
  gap: var(--space-2);
  font-size: var(--fs-sm);
}
/* components.css narrows the left padding of any ghost button that leads with
   a WhatsApp disc — tuned for the 56px hero CTA. Inside a card the pair must
   stay symmetrical, so that rule is undone here. Written with :has() to match
   its specificity; a plainer selector loses to it. */
.line-card__actions .btn--ghost:has(> .bubble:first-child) {
  padding-inline: var(--space-4);
}
.line-card__actions .btn .icon { width: 18px; height: 18px; }
.line-card__actions .bubble { width: 24px; height: 24px; }
.line-card__actions .bubble .svg-icon { width: 13px; height: 13px; }

@media (max-width: 1099.98px) and (min-width: 900px) {
  /* The two-column hero squeezes the card; stack its buttons before the
     labels start truncating. */
  .line-card__actions { flex-direction: column; }
}

/* --------------------------------------------------------------------------
   HERO BREAKPOINTS
   -------------------------------------------------------------------------- */
@media (max-width: 899.98px) {
  .contact-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }
  .contact-hero__title { max-width: none; }
  /* The photograph is landscape and the section is now tall, so a
     left-to-right scrim would leave the bottom of the column bright. */
  .contact-hero {
    --contact-scrim: linear-gradient(
      rgba(9, 8, 6, .90) 0%,
      rgba(9, 8, 6, .93) 55%,
      rgba(9, 8, 6, .95) 100%
    );
  }
}

@media (max-width: 519.98px) {
  .line-card__actions { flex-direction: column; }
  .line-card__actions .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   3. THE SPLIT PANEL
   Form and contact details are ONE object with one border and one radius, as
   drawn — not two cards with a gap between them. overflow:hidden lets the
   photograph on the right run to the panel's rounded corner without needing
   its own radius, which would otherwise have to be kept in sync by hand.
   -------------------------------------------------------------------------- */
/* The Leistungen/Einsatzgebiet backdrop, shared with .area-section further
   down this page. The scrim is a GRADIENT that ends on exactly the .88 that
   area.css uses flat, so the two sections meet at the same value and read as
   one continuous ground rather than as the same photograph used twice with a
   seam between them. It also has to stay dark: --bg-card is darker than a
   lightly-scrimmed photograph, and the panel would sink into its own section
   instead of sitting on it. */
.contact-form-section {
  background-color: var(--bg-page);
  background-image: var(--anfrage-scrim), url("../img/area-bg-1440.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;

  --anfrage-scrim: linear-gradient(rgba(16, 18, 23, .90), rgba(16, 18, 23, .86));
}
@supports (background-image: image-set(url("x.webp") type("image/webp") 1x)) {
  .contact-form-section {
    background-image: var(--anfrage-scrim), image-set(
      url("../img/area-bg-1440.webp") type("image/webp") 1x,
      url("../img/area-bg-1440.jpg")  type("image/jpeg") 1x);
  }
}
@media (max-width: 1023.98px) {
  .contact-form-section { background-image: var(--anfrage-scrim), url("../img/area-bg-1024.jpg"); }
  @supports (background-image: image-set(url("x.webp") type("image/webp") 1x)) {
    .contact-form-section {
      background-image: var(--anfrage-scrim), image-set(
        url("../img/area-bg-1024.webp") type("image/webp") 1x,
        url("../img/area-bg-1024.jpg")  type("image/jpeg") 1x);
    }
  }
}
@media (max-width: 719.98px) {
  .contact-form-section { background-image: var(--anfrage-scrim), url("../img/area-bg-720.jpg"); }
  @supports (background-image: image-set(url("x.webp") type("image/webp") 1x)) {
    .contact-form-section {
      background-image: var(--anfrage-scrim), image-set(
        url("../img/area-bg-720.webp") type("image/webp") 1x,
        url("../img/area-bg-720.jpg")  type("image/jpeg") 1x);
    }
  }
}

.contact-split {
  display: grid;
  grid-template-columns: minmax(0, 660fr) minmax(0, 600fr);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  background-color: var(--bg-card);
  box-shadow: var(--shadow-lg);
}

.contact-form {
  padding: clamp(1.5rem, 3vw, 3rem);
}

/* Deliberately below --fs-h2. These two head the halves of one panel, not
   the page — at section-title size they would outrank "Lassen Sie uns über
   Ihr Projekt sprechen" further up and flatten the page's hierarchy. */
.contact-form__title,
.contact-direkt__title { font-size: clamp(1.5rem, 1.25rem + 0.9vw, 1.875rem); }

.contact-form__lead {
  margin-top: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
}

/* --------------------------------------------------------------------------
   4. FORM CONTROLS
   The only form on the site, so the whole control vocabulary lives here.

   THREE FIELDS, not the six in the mock. Two of those six were dropped for a
   reason rather than for brevity: the message is delivered over WhatsApp, so
   the sender's number arrives with it — asking for a phone number is asking
   for something already in hand — and there is no mailbox behind an e-mail
   field. What is left is what the business cannot infer: who, what, and what
   for.
   -------------------------------------------------------------------------- */
.contact-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-4);
  margin-top: var(--space-7);
}
.field--wide { grid-column: 1 / -1; }

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

/* A real <label>, above the control and always visible. A placeholder that
   disappears the moment someone types is not a label. */
.field__label {
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  line-height: 1.2;
  text-transform: uppercase;
}
.field__label .req { color: var(--text-accent); }

.field__hint {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
}

.control {
  width: 100%;
  min-height: 52px;                 /* clears the 44px touch minimum */
  padding: 14px 16px;
  border: 1px solid var(--border-line);
  border-radius: var(--radius-sm);
  background-color: var(--ink-950);
  color: var(--text-primary);
  font-family: var(--font-body);
  /* 16px minimum, always: anything smaller makes iOS Safari zoom the page in
     on focus and the visitor has to pinch back out. */
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  transition: border-color var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}
.control::placeholder { color: var(--text-muted); }
.control:hover { border-color: var(--border-strong); }
.control:focus {
  border-color: var(--gold-400);
  background-color: var(--ink-900);
  outline: none;                    /* :focus-visible below draws the ring */
}
.control:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 2px;
}

textarea.control {
  min-height: 148px;
  resize: vertical;
}

/* The native arrow cannot be recoloured, so it is replaced. The chevron is a
   data: URI rather than a file — one fewer request, and it is two lines of
   SVG. appearance:none removes the platform control on every engine; the
   right padding reserves the arrow's own space. */
select.control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C99A3D'%3E%3Cpath d='M7.4 9.6 12 14.2l4.6-4.6L18 11l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
  cursor: pointer;
}
/* The dropdown list itself is painted by the OS, not by this stylesheet, and
   on a dark page it inherits nothing — so the options are given their colours
   explicitly or Windows renders black text on a black list. */
select.control option { background-color: var(--ink-850); color: var(--text-primary); }

.contact-form__submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
  margin-top: var(--space-6);
}
.contact-form__submit .btn { flex: 0 0 auto; }

.contact-form__aside {
  flex: 1 1 220px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

/* Where the form's answer lands. Empty until something is submitted, so it
   reserves no space and cannot push the button around on first render. */
.contact-form__status {
  margin-top: var(--space-4);
  color: var(--text-accent);
  font-size: var(--fs-sm);
}
.contact-form__status:empty { display: none; }

/* --------------------------------------------------------------------------
   5. "DIREKT ERREICHBAR"
   The right half of the panel: the same photograph treatment as the hero, at
   a heavier scrim because this one carries text edge to edge rather than only
   in its left third.
   -------------------------------------------------------------------------- */
.contact-direkt {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 3rem);
  background-color: var(--ink-950);
  background-image:
    linear-gradient(180deg, rgba(9, 8, 6, .76) 0%, rgba(9, 8, 6, .90) 100%),
    url("../img/contact-direkt-700.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
@supports (background-image: image-set(url("x.webp") type("image/webp") 1x)) {
  .contact-direkt {
    background-image:
      linear-gradient(180deg, rgba(9, 8, 6, .76) 0%, rgba(9, 8, 6, .90) 100%),
      image-set(url("../img/contact-direkt-700.webp") type("image/webp") 1x,
                url("../img/contact-direkt-700.jpg")  type("image/jpeg") 1x);
  }
}

.contact-direkt__lead {
  margin-top: var(--space-3);
  color: var(--text-on-media);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
}

.direkt-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-7);
}

.direkt-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* A rounded square, not the disc used in the hero cards — these are labels
   for information, not buttons, and the different shape says so before the
   copy does. */
.direkt-item__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: var(--radius-md);
  background: var(--grad-gold);
  color: var(--text-on-gold);
  box-shadow: var(--shadow-sm);
}
.direkt-item__icon .icon { width: 21px; height: 21px; }

.direkt-item__label {
  display: block;
  color: var(--text-accent);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  line-height: 1.2;
  text-transform: uppercase;
}

/* block, not inline-block: the phone row stacks two numbers under one label,
   and inline they would run together on the same line at wide widths. */
.direkt-item__value {
  display: block;
  width: fit-content;
  margin-top: 6px;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  text-decoration: none;
}
a.direkt-item__value:hover { color: var(--text-accent); }

/* --- Opening hours -------------------------------------------------------
   margin-top:auto pins this block to the bottom of the panel, so the panel
   matches the form's height without either side being given a fixed one. */
.direkt-hours {
  margin-top: auto;
  padding-top: var(--space-7);
}

.direkt-hours__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-line);
  color: var(--text-accent);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}
.direkt-hours__title .icon { width: 15px; height: 15px; }

.direkt-hours__list {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-3);
}

/* dt and dd on one row. The grid is two columns rather than a flex row so
   every day's value starts at the same x — a flex row would let a long value
   ("Nach Vereinbarung") pull its own row's label off the others' alignment. */
.direkt-hours__row {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: baseline;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-sm);
}
.direkt-hours__row:last-child { border-bottom: 0; }
.direkt-hours__day   { color: var(--text-secondary); }
.direkt-hours__value { color: var(--text-primary); font-weight: var(--fw-medium); text-align: right; }

/* --------------------------------------------------------------------------
   SPLIT-PANEL BREAKPOINTS
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  .contact-split { grid-template-columns: minmax(0, 1fr); }
  /* Stacked, the photograph panel no longer has a form beside it to match, so
     the auto-margin has nothing to push against. */
  .direkt-hours { margin-top: var(--space-7); padding-top: 0; }
}

@media (max-width: 599.98px) {
  .contact-split { border-radius: var(--radius-lg); }
  /* One column: two half-width fields at 280px each truncate their labels. */
  .contact-fields { grid-template-columns: minmax(0, 1fr); }
  .contact-form__submit .btn { width: 100%; }
  .direkt-item__icon { width: 42px; height: 42px; }
}