/* =============================================================================
   Scriptomat V6 - /kontakt/

   Herkunft
   --------
   Diese Datei uebernimmt das freigegebene Kontakt-Design aus dem Handoff-Paket
   wp-handoff-kontakt/assets/css/page.css. Sie ist keine Neugestaltung: Aufbau,
   Reihenfolge, Kartenraster, Typografiegrade, Farbrollen, Abstaende und
   Bruchpunkte sind unveraendert uebernommen.

   Was angepasst wurde - und nur das
   ---------------------------------
   1. Die Inhaltsbreite folgt jetzt der Schale der Website (--shell + --gutter),
      damit Kopfzeile, Inhalt und Fusszeile auf einer Kante stehen. Im Handoff
      stand hier eine eigene Breite von 1320px, die neben dem Seitenkopf um
      wenige Pixel verrutscht waere.
   2. Die Schriftfamilien greifen auf die global geladenen Markenschriften der
      Website zu (--display / --body). Der Fallback des Handoffs bleibt als
      zweiter Wert stehen.

   Farben, Radien und Schatten bleiben als lokale Variablen unter
   .scriptomat-contact stehen - genau wie im Handoff. Die Seite fuegt keine
   eigene Art Direction hinzu.

   Phase 2A - Uebernahme in das Theme
   ----------------------------------
   Diese Datei ist die statische kontakt/assets/css/page.css. Entfernt wurden
   ausschliesslich zwei Bloecke, die zur Schale des statischen Entwurfs
   gehoerten und in WordPress an anderer Stelle geloest sind:

   - .wordmark--image / .wordmark__img: die Wortmarke steht zentral in
     header.php und footer.php ueber scriptomat_wordmark().
   - .scriptomat-draftnote: der Vermerk zur Entwurfsfassung. Er gehoerte zum
     browserseitigen Schein-Versand des Prototyps, den diese Fassung nicht
     uebernimmt - das Formular kommt aus dem Formular-Plugin.

   Am freigegebenen Kontakt-Design aendert das nichts.

   Geladen wird die Datei ausschliesslich auf /kontakt/, siehe
   scriptomat_page_styles() in inc/assets.php.
   ========================================================================== */

/* =============================================================================
   Ab hier: uebernommenes Handoff-Stylesheet.
   Alle Regeln sind unter .scriptomat-contact gescoped bzw. mit dem Praefix
   "scriptomat-" versehen. Keine globalen Selektoren, keine externen Requests.
   ========================================================================== */

.scriptomat-contact {
  /* --- lokale Design-Tokens (aus dem Scriptomat Design System uebernommen) --- */
  --scriptomat-green: #3BD7A2;
  --scriptomat-green-600: #20c08c;
  --scriptomat-green-700: #149a6f;
  --scriptomat-green-50: #eefbf6;
  --scriptomat-green-100: #d7f6ea;
  --scriptomat-ink-900: #1B1C2B;
  --scriptomat-ink-800: #2b2c3d;
  --scriptomat-ink-700: #3a3c4b;
  --scriptomat-ink-600: #4a4c5c;
  --scriptomat-ink-500: #565a6e;
  --scriptomat-ink-400: #6e7286;
  --scriptomat-border: #e3e4e8;
  --scriptomat-surface-page: #ffffff;
  --scriptomat-surface-muted: #f1f2f4;
  --scriptomat-surface-subtle: #f8f8f8;
  --scriptomat-danger: #c0392b;
  --scriptomat-radius-sm: 8px;
  --scriptomat-radius-md: 10px;
  --scriptomat-radius-lg: 16px;
  --scriptomat-shadow-sm: 0 1px 3px rgba(27,28,43,0.06), 0 1px 2px rgba(27,28,43,0.04);
  --scriptomat-shadow-md: 0 8px 24px rgba(27,28,43,0.08);
  --scriptomat-dur: 200ms;
  --scriptomat-ease: cubic-bezier(.22,1,.36,1);

  /* Angepasst: die Markenschriften laedt die Website bereits global.
     Der System-Fallback des Handoffs bleibt als zweiter Wert erhalten. */
  --scriptomat-font-display: var(--display, "Schibsted Grotesk"), "Segoe UI", -apple-system, sans-serif;
  --scriptomat-font-text: var(--body, "Hanken Grotesk"), "Segoe UI", -apple-system, sans-serif;

  /* Angepasst: Inhaltsbreite = Schale der Website, damit der Inhalt exakt
     unter der Kopfzeile steht. Ergibt 1280px Satzspiegel bei 64px Rand. */
  --scriptomat-inner: calc(var(--shell, 1280px) + 2 * var(--gutter, 64px));
  --scriptomat-pad-x: var(--gutter, 64px);

  font-family: var(--scriptomat-font-text);
  color: var(--scriptomat-ink-700);
  background: var(--scriptomat-surface-page);
  box-sizing: border-box;
}

.scriptomat-contact *,
.scriptomat-contact *::before,
.scriptomat-contact *::after { box-sizing: inherit; }

.scriptomat-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Typografie ---------- */
.scriptomat-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--scriptomat-green-700); margin: 0;
}
.scriptomat-h1 {
  font-family: var(--scriptomat-font-display); font-weight: 800;
  font-size: clamp(2.3rem, 4vw, 3.5rem); line-height: 1.08; letter-spacing: -0.025em;
  color: var(--scriptomat-ink-900); margin: 12px 0 0; max-width: 52ch;
}
.scriptomat-h2 {
  font-family: var(--scriptomat-font-display); font-weight: 800;
  font-size: clamp(1.7rem, 3vw, 2rem); line-height: 1.2; letter-spacing: -0.02em;
  color: var(--scriptomat-ink-900); margin: 0;
}
.scriptomat-h3 {
  font-family: var(--scriptomat-font-display); font-weight: 800;
  font-size: 1.5rem; color: var(--scriptomat-ink-900); margin: 0;
}
.scriptomat-h4 {
  font-family: var(--scriptomat-font-display); font-weight: 800;
  font-size: 1.3rem; color: var(--scriptomat-ink-900); margin: 0;
}
.scriptomat-h4--inverse { color: #fff; }
.scriptomat-lead {
  font-size: 1.1875rem; line-height: 1.6; color: var(--scriptomat-ink-500);
  margin: 24px 0 0; max-width: 62ch;
}
.scriptomat-required { color: var(--scriptomat-danger); }
.scriptomat-error {
  margin: 12px 0 0; font-size: 0.9rem; color: var(--scriptomat-danger); font-weight: 600;
}

/* ---------- Buttons ---------- */
.scriptomat-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--scriptomat-font-text); font-weight: 700; font-size: 1rem;
  text-decoration: none; border: none; border-radius: var(--scriptomat-radius-sm);
  padding: 14px 24px; cursor: pointer;
  transition: background var(--scriptomat-dur) var(--scriptomat-ease), box-shadow var(--scriptomat-dur) var(--scriptomat-ease);
}
.scriptomat-btn--lg { padding: 15px 30px; font-size: 1.0625rem; }
.scriptomat-btn--primary {
  background: var(--scriptomat-green); color: #07261c;
  box-shadow: 0 6px 18px rgba(59,215,162,0.35);
}
.scriptomat-btn--primary:hover, .scriptomat-btn--primary:focus-visible { background: var(--scriptomat-green-600); }
.scriptomat-btn--secondary {
  background: #fff; color: var(--scriptomat-ink-900); border: 1.5px solid var(--scriptomat-border);
}
.scriptomat-btn--secondary:hover, .scriptomat-btn--secondary:focus-visible { border-color: var(--scriptomat-green); color: var(--scriptomat-green-700); }
.scriptomat-contact a:focus-visible,
.scriptomat-contact button:focus-visible,
.scriptomat-contact input:focus-visible,
.scriptomat-contact select:focus-visible,
.scriptomat-contact textarea:focus-visible {
  outline: 3px solid rgba(59,215,162,0.5); outline-offset: 2px;
}

/* ---------- Hero ---------- */
.scriptomat-hero {
  position: relative; background: var(--scriptomat-surface-muted); overflow: hidden;
}
.scriptomat-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(#c7cad3 1px, transparent 1px);
  background-size: 26px 26px; opacity: 0.35; pointer-events: none;
}
.scriptomat-hero::after {
  content: ""; position: absolute; top: -140px; right: -120px; width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(59,215,162,0.22), transparent 62%); pointer-events: none;
}
.scriptomat-hero__inner {
  position: relative; max-width: var(--scriptomat-inner); margin: 0 auto;
  padding: 80px var(--scriptomat-pad-x) 64px;
}
.scriptomat-option-grid {
  margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.scriptomat-option-card {
  background: #fff; border: 1px solid var(--scriptomat-border); border-radius: var(--scriptomat-radius-lg);
  box-shadow: var(--scriptomat-shadow-sm); padding: 32px; display: flex; flex-direction: column;
}
.scriptomat-option-card--accent { border: 1.5px solid var(--scriptomat-green); }
.scriptomat-option-icon {
  display: inline-flex; width: 46px; height: 46px; border-radius: 12px;
  background: var(--scriptomat-green-50); color: var(--scriptomat-green-700);
  align-items: center; justify-content: center; margin-bottom: 18px;
}
.scriptomat-option-card:not(.scriptomat-option-card--accent) .scriptomat-option-icon {
  background: var(--scriptomat-surface-muted); color: var(--scriptomat-ink-700);
}
.scriptomat-option-title {
  font-family: var(--scriptomat-font-display); font-weight: 800; font-size: 1.35rem;
  color: var(--scriptomat-ink-900); margin: 0;
}
.scriptomat-option-text {
  margin: 10px 0 22px; font-size: 1.0625rem; line-height: 1.55; color: var(--scriptomat-ink-500); flex: 1;
}

/* Rueckruf-Widget */
.scriptomat-callback__form { display: flex; flex-direction: column; gap: 10px; }
.scriptomat-callback__row { display: flex; gap: 10px; }
.scriptomat-callback__row .scriptomat-field { flex: 1; }
.scriptomat-callback__submit {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--scriptomat-font-text); font-weight: 700; color: #fff;
  background: var(--scriptomat-green); border: none; border-radius: var(--scriptomat-radius-sm);
  padding: 0 18px; cursor: pointer; transition: background var(--scriptomat-dur) var(--scriptomat-ease);
}
.scriptomat-callback__submit:hover, .scriptomat-callback__submit:focus-visible { background: var(--scriptomat-green-600); }
.scriptomat-callback__success {
  display: flex; align-items: center; gap: 10px; background: var(--scriptomat-green-50);
  border: 1px solid var(--scriptomat-green-100); border-radius: var(--scriptomat-radius-sm);
  padding: 13px 15px; font-size: 0.98rem; font-weight: 600; color: var(--scriptomat-ink-800); margin: 0;
}

/* ---------- Formularfelder ---------- */
.scriptomat-field {
  width: 100%; font-family: var(--scriptomat-font-text); font-size: 1rem;
  color: var(--scriptomat-ink-900); background: #fff; border: 1px solid var(--scriptomat-border);
  border-radius: var(--scriptomat-radius-sm); padding: 13px 15px;
  transition: border-color var(--scriptomat-dur) var(--scriptomat-ease), box-shadow var(--scriptomat-dur) var(--scriptomat-ease);
}
.scriptomat-field:focus {
  outline: none; border-color: var(--scriptomat-green);
  box-shadow: 0 0 0 3px rgba(59,215,162,0.25);
}
.scriptomat-label {
  display: block; font-size: 0.85rem; font-weight: 600; color: var(--scriptomat-ink-700); margin-bottom: 7px;
}
.scriptomat-checkbox-row {
  display: flex; align-items: flex-start; gap: 9px; cursor: pointer;
}
.scriptomat-checkbox-row input {
  width: 18px; height: 18px; flex: none; margin-top: 2px; accent-color: var(--scriptomat-green); cursor: pointer;
}
.scriptomat-checkbox-row span {
  font-size: 0.82rem; line-height: 1.45; color: var(--scriptomat-ink-500);
}
.scriptomat-checkbox-row--form { margin-top: 22px; }
.scriptomat-checkbox-row--form input { width: 20px; height: 20px; }
.scriptomat-checkbox-row--form span { font-size: 0.92rem; color: var(--scriptomat-ink-600); }
.scriptomat-contact a { color: var(--scriptomat-green-700); font-weight: 600; text-decoration: none; }
.scriptomat-contact a:hover { text-decoration: underline; }

/* Korrektur gegenueber dem Handoff - kein Gestaltungseingriff.
   Die Zeile darueber (.scriptomat-contact a) ist spezifischer als
   .scriptomat-btn--primary und steht spaeter. Dadurch verloren die beiden
   Schaltflaechen im Hero, die Links sind, ihre gesetzte Textfarbe: statt
   #07261c bzw. Ink-900 erbten sie Green-700. Auf der Mintflaeche ergab das
   ein Kontrastverhaeltnis von 1.94:1 - unlesbar. Die identische Schaltflaeche
   im Formular ist ein <button>, wird von der Regel nicht getroffen und zeigt
   die beabsichtigte Farbe. Hier wird also nur die im Stylesheet bereits
   erklaerte Absicht wiederhergestellt, nicht die Gestaltung geaendert.
   Danach: Primaer 9.5:1, Sekundaer 14.6:1. */
.scriptomat-contact a.scriptomat-btn--primary { color: #07261c; }
.scriptomat-contact a.scriptomat-btn--secondary { color: var(--scriptomat-ink-900); }
.scriptomat-contact a.scriptomat-btn:hover { text-decoration: none; }
.scriptomat-contact a.scriptomat-btn--secondary:hover,
.scriptomat-contact a.scriptomat-btn--secondary:focus-visible { color: var(--scriptomat-green-700); }

/* ---------- Logo-Band ---------- */
.scriptomat-logos { border-bottom: 1px solid var(--scriptomat-border); }
.scriptomat-logos__inner {
  max-width: var(--scriptomat-inner); margin: 0 auto;
  padding: 40px var(--scriptomat-pad-x); text-align: center;
}
.scriptomat-logos__caption { font-size: 0.9375rem; color: var(--scriptomat-ink-500); margin: 0 0 24px; font-weight: 500; }
.scriptomat-logos__list {
  list-style: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center;
  gap: 56px; flex-wrap: wrap;
}
.scriptomat-logos__img { height: 38px; width: auto; mix-blend-mode: multiply; filter: grayscale(1); opacity: 0.7; display: block; }

/* ---------- Formular-Sektion ---------- */
.scriptomat-form-section {
  max-width: var(--scriptomat-inner); margin: 0 auto;
  padding: clamp(40px,8vw,72px) var(--scriptomat-pad-x);
}
.scriptomat-form-section__grid { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: 48px; align-items: start; }
.scriptomat-form-card {
  background: #fff; border: 1px solid var(--scriptomat-border); border-radius: var(--scriptomat-radius-lg);
  box-shadow: var(--scriptomat-shadow-md); padding: 44px;
}
.scriptomat-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px; }
.scriptomat-field-group--full { margin-top: 18px; }
.scriptomat-form-note {
  display: flex; align-items: center; gap: 9px; margin-top: 20px; font-size: 0.85rem; color: var(--scriptomat-ink-400);
}
.scriptomat-form-note svg { flex: none; }
.scriptomat-form-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 22px; }
.scriptomat-form-actions__hint { font-size: 0.9rem; color: var(--scriptomat-ink-400); }

.scriptomat-form-success { padding: 40px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.scriptomat-form-success[hidden],
.scriptomat-callback__success[hidden] { display: none; }
.scriptomat-form-success__icon {
  width: 64px; height: 64px; border-radius: 50%; background: var(--scriptomat-green-50); color: var(--scriptomat-green-700);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 22px;
}
.scriptomat-form-success__text { margin: 14px 0 0; font-size: 1.0625rem; line-height: 1.6; color: var(--scriptomat-ink-600); max-width: 420px; }

/* ---------- Sidebar ---------- */
.scriptomat-sidebar { display: flex; flex-direction: column; gap: 24px; }
.scriptomat-sidebar-card {
  background: #fff; border: 1px solid var(--scriptomat-border); border-radius: var(--scriptomat-radius-lg);
  box-shadow: var(--scriptomat-shadow-md); padding: 32px;
}
.scriptomat-sidebar-card--dark {
  background: var(--scriptomat-ink-900); border: none; position: relative; overflow: hidden;
  box-shadow: none;
}
.scriptomat-sidebar-card--dark::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(500px 240px at 90% 0%, rgba(59,215,162,0.13), transparent 60%);
}
.scriptomat-sidebar-card--dark > * { position: relative; }
.scriptomat-person { display: flex; align-items: center; gap: 16px; }
.scriptomat-person__photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--scriptomat-border); }
.scriptomat-person__eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--scriptomat-green-700); margin: 0 0 5px; }
.scriptomat-person__name { font-family: var(--scriptomat-font-display); font-weight: 700; font-size: 1.2rem; color: var(--scriptomat-ink-900); margin: 0; }
.scriptomat-person__role { font-size: 0.95rem; color: var(--scriptomat-ink-500); margin: 1px 0 0; }
.scriptomat-person__quote { margin: 20px 0 0; font-size: 1rem; line-height: 1.6; color: var(--scriptomat-ink-600); }
.scriptomat-sidebar-text { margin: 14px 0 20px; font-size: 1rem; line-height: 1.6; color: rgba(255,255,255,0.72); }
.scriptomat-trust-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.scriptomat-trust-list li { display: flex; align-items: center; gap: 11px; font-size: 0.98rem; font-weight: 600; color: #fff; }
.scriptomat-trust-list svg { flex: none; color: var(--scriptomat-green); }
.scriptomat-sidebar-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--scriptomat-ink-400); margin: 0 0 16px; }
.scriptomat-address { font-size: 1.0625rem; line-height: 1.6; color: var(--scriptomat-ink-800); font-style: normal; }
.scriptomat-contact-links { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--scriptomat-border); display: flex; flex-direction: column; gap: 12px; }
.scriptomat-contact-links a { display: inline-flex; align-items: center; gap: 11px; font-size: 0.98rem; color: var(--scriptomat-ink-800); font-weight: 500; }
.scriptomat-contact-links a svg { color: var(--scriptomat-green-700); flex: none; }
.scriptomat-sidebar-links {
  margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--scriptomat-border);
  display: flex; gap: 24px; flex-wrap: wrap;
}
.scriptomat-sidebar-links a { font-size: 0.92rem; font-weight: 500; color: var(--scriptomat-ink-500); }

/* ---------- Schritte ---------- */
.scriptomat-steps { background: var(--scriptomat-surface-subtle); }
.scriptomat-steps__inner {
  max-width: var(--scriptomat-inner); margin: 0 auto;
  padding: clamp(40px,8vw,72px) var(--scriptomat-pad-x);
}
.scriptomat-steps__list { list-style: none; margin: 40px 0 0; padding: 0; display: flex; gap: 24px; flex-wrap: wrap; }
.scriptomat-step-card {
  flex: 1 1 0; min-width: 240px; background: #fff; border: 1px solid var(--scriptomat-border);
  border-radius: var(--scriptomat-radius-lg); box-shadow: var(--scriptomat-shadow-sm); padding: 32px;
}
.scriptomat-step-card__num {
  display: inline-flex; width: 38px; height: 38px; border-radius: 50%; background: var(--scriptomat-green-50);
  color: var(--scriptomat-green-700); align-items: center; justify-content: center;
  font-family: var(--scriptomat-font-display); font-weight: 800; font-size: 1rem;
}
.scriptomat-step-card__title { margin: 16px 0 0; font-family: var(--scriptomat-font-display); font-weight: 800; font-size: 1.2rem; color: var(--scriptomat-ink-900); }
.scriptomat-step-card__text { margin: 10px 0 0; font-size: 1.0625rem; line-height: 1.55; color: var(--scriptomat-ink-500); }

/* ---------- Signale ---------- */
.scriptomat-signals__inner {
  max-width: var(--scriptomat-inner); margin: 0 auto;
  padding: clamp(40px,8vw,72px) var(--scriptomat-pad-x);
}
.scriptomat-signals__list {
  list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 40px;
}
.scriptomat-signals__list li {
  display: flex; align-items: flex-start; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--scriptomat-border);
}
.scriptomat-signals__list svg { flex: none; margin-top: 2px; color: var(--scriptomat-green-700); }
.scriptomat-signals__list span { font-size: 1.0625rem; font-weight: 500; color: var(--scriptomat-ink-700); line-height: 1.45; }

/* ---------- Responsive ----------
   1440 nutzt das Grundraster. Unterhalb greifen die drei Bruchpunkte des
   Handoffs unveraendert: 1024 verengt den Rand, 900 stellt die Raster auf
   eine Spalte, 640 ist die Fassung fuer 390. */
@media (max-width: 1024px) {
  .scriptomat-contact { --scriptomat-pad-x: 32px; }
}

@media (max-width: 900px) {
  .scriptomat-option-grid { grid-template-columns: 1fr; }
  .scriptomat-form-section__grid { grid-template-columns: 1fr; }
  .scriptomat-form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .scriptomat-contact { --scriptomat-pad-x: 22px; }
  .scriptomat-form-card,
  .scriptomat-sidebar-card { padding: 26px; }
  .scriptomat-logos__list { gap: 28px; }
  .scriptomat-logos__img { height: 30px; }
  .scriptomat-signals__list { grid-template-columns: 1fr; }
  .scriptomat-steps__list { flex-direction: column; }
  .scriptomat-callback__row { flex-direction: column; }
  .scriptomat-callback__submit { padding: 12px; }
  .scriptomat-form-actions .scriptomat-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .scriptomat-contact * { transition: none !important; }
}

/* Die persoenliche Adresse unter dem Zitat der Ansprechpartnerkarte.
   Sie steht in der Karte, in der auch das Portrait steht - die
   allgemeinen Wege der Firma bleiben in der Karte "Direkter Kontakt". */
.scriptomat-person__ways { margin: 14px 0 0; font-size: 0.95rem; font-weight: 600; }
/* #0F7F5C statt --scriptomat-green-700: derselbe Ton, aber der
   barrierefreie Wert des Seitensystems (Kontrast zu Weiss rund 5:1). */
.scriptomat-person__ways a { color: #0F7F5C; text-decoration: none; border-bottom: 1px solid currentColor; }
.scriptomat-person__ways a:hover { color: #14151F; }