/* ============================================================
   contact.css — LocalLoop /contact (Kontakt), Neubau
   ------------------------------------------------------------
   Eigenständige, saubere Seite (kein Framer-Bundle mehr).
   Werte 1:1 aus dem gerenderten Framer-Export gemessen:
     bg rgb(232,232,232) · dark rgb(23,23,23) · fill rgb(245,245,245)
     Headlines: Sora 700 uppercase, letter-spacing -0.05em
     Labels/Eyebrows/Inputs: IBM Plex Mono 500 uppercase, -0.02em
     Body: Geist 500
   Editorial-Grid: schmale Label-Spalte links (Eyebrow im Gutter),
   breite Inhaltsspalte rechts — wie der Framer-Original-Look.
   Nav kommt aus nav.css + nav.js.
   ============================================================ */

:root {
  --ll-bg: rgb(232, 232, 232);
  --ll-dark: rgb(23, 23, 23);
  --ll-light: rgb(245, 245, 245);
  --ll-muted: rgba(23, 23, 23, 0.6);
  --ll-faint: rgba(23, 23, 23, 0.34);
  --ll-line: rgba(23, 23, 23, 0.14);
  --ll-pad: clamp(20px, 5vw, 52px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ll-bg);
  color: var(--ll-dark);
  font-family: "Geist", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ------------------------------------------------------------
   Rahmen / Editorial-Grid
   ------------------------------------------------------------ */
.ct-shell {
  width: 100%;              /* full-bleed: nutzt die gesamte Bildschirmbreite */
}

.ct-sec {
  display: grid;
  /* Symmetrische Gutter -> Inhaltsspalte mittig zentriert.
     Eyebrow links im Gutter, Nav/Media rechts im Gutter. */
  grid-template-columns: minmax(140px, 1fr) minmax(0, 760px) minmax(140px, 1fr);
  column-gap: clamp(24px, 4vw, 56px);
  padding: clamp(56px, 8vh, 104px) var(--ll-pad);
  border-top: 1px solid var(--ll-line);
}
.ct-sec:first-child { border-top: 0; }

/* Eyebrow (Mono, im linken Gutter) */
.ct-eyebrow {
  grid-column: 1;
  align-self: start;
  justify-self: start;
  margin: 8px 0 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ll-muted);
}
.ct-body { grid-column: 2; min-width: 0; }

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.ct-hero { padding-top: clamp(120px, 18vh, 200px); }
.ct-h1 {
  margin: 0;
  font-family: "Sora", "Geist", sans-serif;
  font-weight: 700;
  font-size: clamp(56px, 10.5vw, 100px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   Mad-Libs-Formular
   ------------------------------------------------------------ */
.ct-form { margin-top: clamp(40px, 6vw, 72px); }
.ct-greet {
  margin: 0 0 clamp(28px, 3vw, 40px);
  font-family: "Sora", "Geist", sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

.ct-madlib {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 16px;
  max-width: 900px;
}
.ct-madlib .lbl {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ll-dark);
  white-space: nowrap;
}
.ct-madlib .brk { flex-basis: 100%; height: 0; }   /* Zeilenumbruch im Flow */

.ct-in {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ll-dark);
  background: var(--ll-light);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 13px 18px;
  outline: none;
  transition: border-color .18s ease, background .18s ease;
}
.ct-in::placeholder { color: var(--ll-faint); text-transform: none; }
.ct-in:focus { border-color: var(--ll-dark); }
.ct-in--name { width: 240px; }
.ct-in--role { width: 260px; }
.ct-in--msg  { width: min(540px, 100%); }
.ct-in--mail { width: 300px; }
.ct-in { max-width: 100%; }

/* Submit + AGB-Zeile */
.ct-submit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 40px;
  margin-top: clamp(36px, 4vw, 52px);
}
.ct-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border: 0;
  border-radius: 999px;
  background: var(--ll-dark);
  color: #fff;
  cursor: pointer;
  font-family: "Sora", "Geist", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.ct-btn svg {
  width: 18px; height: 18px;
  transition: transform .2s ease;
}
.ct-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18); }
.ct-btn:hover svg { transform: translateX(4px); }
.ct-btn:active { transform: translateY(0); }
.ct-btn[disabled] { opacity: .55; pointer-events: none; }

.ct-agb {
  margin: 0;
  max-width: 260px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ll-muted);
}
.ct-agb a { text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------------------
   Kontakt-Details (Telefon / Mail / Social)
   ------------------------------------------------------------ */
.ct-details { margin-top: clamp(48px, 6vw, 80px); display: grid; gap: 18px; }
.ct-mail {
  font-family: "Sora", "Geist", sans-serif;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  text-decoration: none;
}
.ct-mail:hover { text-decoration: underline; text-underline-offset: 3px; }
.ct-phone {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ll-muted);
}
.ct-social { display: flex; gap: 14px; }
.ct-social a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--ll-line);
  border-radius: 999px;
  transition: background .18s ease, color .18s ease;
}
.ct-social a:hover { background: var(--ll-dark); color: #fff; }
.ct-social svg { width: 18px; height: 18px; }

/* ------------------------------------------------------------
   CTA: Für Lokale & Creator
   ------------------------------------------------------------ */
.ct-cta {
  background: var(--ll-light);
  /* Eyebrow links | Text + Handy-Foto als zentriertes Paar | freier Raum rechts */
  grid-template-columns: minmax(150px, 1fr) minmax(0, 460px) minmax(0, 320px) minmax(150px, 1fr);
  column-gap: 24px;
  align-items: center;
}
.ct-cta-media { grid-column: 3; align-self: center; width: 100%; display: flex; justify-content: center; }
.ct-cta-media img { width: auto; max-width: min(360px, 100%); height: auto; }
/* Hand-Mockup: echter App-Screenshot liegt auf dem weissen Screen des Fotos */
.ct-cta-media .ll-handmock { position: relative; display: inline-block; width: min(360px, 100%); line-height: 0; }
.ct-cta-media .ll-handmock img.hand { position: relative; z-index: 1; width: 100%; height: auto; max-width: none; }
.ct-cta-media .ll-handmock img.shot {
  position: absolute; z-index: 2;
  left: 12.8%; top: 1%; width: 43.7%; height: 79.5%;
  object-fit: cover; object-position: center top;
  border-radius: 7% / 4%;
  transform: rotate(-1.6deg);
}
.ct-h2 {
  margin: 0 0 clamp(20px, 2vw, 28px);
  max-width: 14ch;
  font-family: "Sora", "Geist", sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}
.ct-cta p { margin: 0 0 clamp(28px, 3vw, 36px); max-width: 46ch; color: var(--ll-dark); }
.ct-team {
  display: flex; align-items: center; gap: 14px;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--ll-line);
}
.ct-team img { width: 44px; height: 44px; object-fit: contain; }
.ct-team b {
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px; font-weight: 500; letter-spacing: -0.02em; text-transform: uppercase;
}
.ct-team span {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: -0.02em; text-transform: uppercase; color: var(--ll-muted);
}

/* ------------------------------------------------------------
   Footer (minimal, konsistent mit den Angebot-Seiten)
   ------------------------------------------------------------ */
.ct-footer {
  max-width: 1240px; margin: 0 auto;
  padding: 28px var(--ll-pad) 40px;
  border-top: 1px solid var(--ll-line);
}
.ct-footer .in {
  display: flex; flex-wrap: wrap; gap: 12px 28px;
  align-items: center; justify-content: space-between;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px; letter-spacing: -0.02em; text-transform: uppercase; color: var(--ll-muted);
}
.ct-footer nav { display: flex; gap: 20px; }
.ct-footer a { text-decoration: none; }
.ct-footer a:hover { color: var(--ll-dark); }

/* ------------------------------------------------------------
   Responsive: Label-Spalte über den Inhalt stapeln
   ------------------------------------------------------------ */
@media (max-width: 860px) {
  .ct-sec { grid-template-columns: 1fr; row-gap: 20px; }
  .ct-cta { grid-template-columns: 1fr; }
  .ct-eyebrow { grid-column: 1; margin-top: 0; }
  .ct-body { grid-column: 1; }
  .ct-cta-media { grid-column: 1; justify-content: flex-start; margin-top: 12px; }
  .ct-cta-media img { max-width: 280px; }
  .ct-in--name, .ct-in--role, .ct-in--mail { width: 100%; }
}