/*
Theme Name: Arslan Consulting 2026
Theme URI: https://arslanconsulting.ch
Description: Kindtheme von Astra fuer Arslan Consulting. Helle, warme Gestaltung nach Variante D: Portrait im Hero, Ich-Form, Vertrauensleiste, Zweiteilung Unternehmen/Kandidaten, Ablauf in vier Schritten.
Author: Arslan Consulting
Template: astra
Version: 2.9.0
Text Domain: arslan-2026
*/

/* ===========================================================
   1. Farben, Schriften, Grundwerte
   =========================================================== */

:root {
  --ac-bg:        #faf7f2;
  --ac-bg-2:      #f2ece2;
  --ac-ink:       #241f1a;
  --ac-text:      #574d43;
  --ac-muted:     #6b6055;
  --ac-faint:     #8a7f72;
  --ac-line:      #e3dace;
  --ac-line-2:    #ded4c6;
  --ac-accent:    #a8492e;
  --ac-accent-d:  #7d3620;
  --ac-accent-l:  #c98a5e;
  --ac-white:     #ffffff;

  --ac-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --ac-sans:  'Karla', 'Helvetica Neue', Arial, sans-serif;

  --ac-pad-x: 88px;
  --ac-max:   1440px;
}

/* ===========================================================
   2. Grundlayout der Startseite
   =========================================================== */

body.ac-page {
  margin: 0;
  background: var(--ac-bg);
  color: var(--ac-ink);
  font-family: var(--ac-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.ac-page * { box-sizing: border-box; }

.ac-page h1,
.ac-page h2,
.ac-page h3,
.ac-page h4 {
  margin: 0;
  font-family: var(--ac-serif);
  font-weight: 500;
  color: var(--ac-ink);
}

.ac-page p { margin: 0; }

.ac-page a { color: var(--ac-accent); text-decoration: none; }
.ac-page a:hover,
.ac-page a:focus { color: var(--ac-accent-d); }

.ac-page img { max-width: 100%; height: auto; }

.ac-wrap {
  width: 100%;
  max-width: var(--ac-max);
  margin: 0 auto;
  padding-left: var(--ac-pad-x);
  padding-right: var(--ac-pad-x);
}

.ac-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--ac-accent);
  text-transform: uppercase;
}

/* ===========================================================
   3. Kopfzeile
   =========================================================== */

.ac-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 26px;
  padding-bottom: 26px;
}

/* Die eigenen Regeln stehen mit .ac-page davor, damit sie die
   allgemeine Linkfarbe sicher schlagen. */

.ac-page .ac-logo { display: inline-block; line-height: 0; }

.ac-logo-lockup { display: inline-flex; align-items: center; gap: 18px; }

.ac-logo-lockup .ac-signet { display: block; flex: 0 0 auto; }

.ac-logo-rule { width: 1px; height: 40px; display: block; flex: 0 0 auto; }

.ac-logo-words { display: flex; flex-direction: column; gap: 4px; }

.ac-logo-name {
  font-family: 'Jost', 'Karla', Arial, sans-serif;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0.24em;
  line-height: 1.15;
}

.ac-logo-sub {
  font-family: 'Jost', 'Karla', Arial, sans-serif;
  font-size: 8px;
  font-weight: 300;
  letter-spacing: 0.42em;
  line-height: 1.2;
}

/* «Ich kenne beide Seiten.» – bewusst etwas groesser als im Original-Logo,
   sonst ist die Zeile in Kopfzeilengroesse nicht mehr lesbar. */
.ac-logo-claim {
  font-family: 'Jost', 'Karla', Arial, sans-serif;
  font-size: 8.5px;
  font-weight: 300;
  letter-spacing: 0.18em;
  line-height: 1.3;
  padding-top: 3px;
}

.ac-footer-logo { line-height: 0; }

.ac-nav {
  display: flex;
  align-items: center;
  gap: 36px;
}

.ac-nav-links {
  display: flex;
  gap: 28px;
  font-size: 15px;
  font-weight: 500;
}

.ac-nav-links a { color: #5c534a; }
.ac-nav-links a:hover { color: var(--ac-accent); }

.ac-page .ac-phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #d8cfc2;
  border-radius: 999px;
  padding: 11px 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ac-ink);
  white-space: nowrap;
}
.ac-page .ac-phone:hover { border-color: var(--ac-accent); color: var(--ac-ink); }
.ac-page .ac-phone span,
.ac-page .ac-phone a { color: var(--ac-ink); }

/* ===========================================================
   4. Schaltflaechen
   =========================================================== */

.ac-page .ac-btn {
  display: inline-block;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  padding: 17px 30px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
}

.ac-page .ac-btn-primary { background: var(--ac-accent); color: var(--ac-white); }
.ac-page .ac-btn-primary:hover,
.ac-page .ac-btn-primary:focus { background: var(--ac-accent-d); color: var(--ac-white); }

.ac-page .ac-btn-ghost { border-color: var(--ac-ink); color: var(--ac-ink); background: transparent; }
.ac-page .ac-btn-ghost:hover,
.ac-page .ac-btn-ghost:focus { background: var(--ac-ink); color: var(--ac-bg); }

.ac-page .ac-btn-sm { padding: 14px 28px; font-size: 15px; }

.ac-btn-row { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 8px; }

/* ===========================================================
   5. Hero
   =========================================================== */

.ac-hero {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 56px;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 80px;
}

.ac-hero-photo {
  min-height: 560px;
  background: #efe8dd;
  border: 1px dashed #c8bba8;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Sobald ein Foto hinterlegt ist, verschwinden Platzhalterrahmen und Fläche. */
.ac-hero-photo.has-photo { border: 0; background: transparent; }

.ac-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ac-photo-hint {
  font-size: 14px;
  letter-spacing: 0.12em;
  color: #9b8f80;
  text-align: center;
  padding: 24px;
}

.ac-hero-text { display: flex; flex-direction: column; gap: 26px; }

.ac-hero h1 {
  font-size: 56px;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.ac-lead {
  font-size: 20px;
  line-height: 1.65;
  color: var(--ac-text);
  max-width: 640px;
  text-wrap: pretty;
}

/* ===========================================================
   6. Vertrauensleiste
   =========================================================== */

.ac-trust {
  background: var(--ac-bg-2);
  border-top: 1px solid var(--ac-line);
  border-bottom: 1px solid var(--ac-line);
}

.ac-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  padding-top: 26px;
  padding-bottom: 26px;
}

.ac-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 500;
  color: #3f382f;
}

.ac-trust-item svg { flex: 0 0 auto; }

/* ===========================================================
   7. Zwei Wege (Unternehmen / Kandidaten)
   =========================================================== */

.ac-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.ac-split-col {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 76px var(--ac-pad-x);
}

.ac-split-col:first-child { border-right: 1px solid var(--ac-line); }

.ac-split-col h3 { font-size: 32px; line-height: 1.25; }

.ac-list { display: flex; flex-direction: column; gap: 11px; padding-top: 4px; }

.ac-list-item { display: flex; gap: 12px; align-items: flex-start; }

.ac-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--ac-accent);
  margin-top: 9px;
  flex: 0 0 auto;
}

.ac-list-item span { font-size: 16px; line-height: 1.6; color: #3f382f; }

.ac-split-col .ac-btn { align-self: flex-start; margin-top: 10px; }

/* ===========================================================
   8. Fachgebiete
   =========================================================== */

.ac-fields { background: var(--ac-bg-2); padding-top: 84px; padding-bottom: 72px; }

.ac-fields h2 { font-size: 36px; line-height: 1.2; margin-bottom: 28px; }

/* Zwei feste Spalten: Titel links, Beschreibung rechts.
   So beginnen alle Beschreibungen auf derselben Linie. */
.ac-field-row {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 40px;
  align-items: baseline;
  padding: 30px 0;
  border-top: 1px solid #e0d6c6;
}

.ac-field-row:last-child { border-bottom: 1px solid #e0d6c6; }

.ac-field-row h3 { font-size: 30px; }

.ac-field-desc { font-size: 17px; line-height: 1.6; color: var(--ac-muted); }

/* ===========================================================
   9. Ablauf
   =========================================================== */

.ac-steps { padding-top: 84px; padding-bottom: 84px; }

.ac-section-head { display: flex; flex-direction: column; gap: 14px; max-width: 720px; margin-bottom: 36px; }

.ac-section-head h2 { font-size: 36px; line-height: 1.2; }

.ac-section-head p { font-size: 18px; line-height: 1.65; color: var(--ac-text); }

.ac-step-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }

.ac-step { display: flex; flex-direction: column; gap: 12px; border-top: 2px solid var(--ac-line-2); padding-top: 22px; }

.ac-step:first-child { border-top-color: var(--ac-accent); }

.ac-step-num { font-family: var(--ac-serif); font-size: 34px; color: var(--ac-accent); }

.ac-step h4 { font-size: 21px; }

.ac-step p { font-size: 16px; line-height: 1.65; color: var(--ac-muted); }

/* ===========================================================
   10. Haltung / Zitat
   =========================================================== */

.ac-quote {
  background: var(--ac-ink);
  color: #f7f1e8;
  padding-top: 76px;
  padding-bottom: 76px;
}

.ac-quote-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 1040px;
  margin: 0 auto;
}

.ac-quote h2 {
  font-size: 36px;
  line-height: 1.4;
  text-align: center;
  color: #f7f1e8;
  text-wrap: pretty;
}

.ac-quote-name { font-size: 15px; letter-spacing: 0.1em; color: #b9a892; text-transform: uppercase; }

/* ===========================================================
   11. Stimmen
   =========================================================== */

.ac-voices { padding-top: 76px; padding-bottom: 76px; }

.ac-voices h2 { font-size: 32px; margin-bottom: 28px; }

.ac-voice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }

.ac-voice {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--ac-bg-2);
  padding: 30px;
}

.ac-voice.is-placeholder { border: 1px dashed #cdc0ae; background: var(--ac-bg-2); }

.ac-voice p { font-size: 17px; line-height: 1.65; color: var(--ac-ink); }

.ac-voice.is-placeholder p { color: var(--ac-faint); }

.ac-voice-name { font-size: 14px; color: #a2968a; }

/* ===========================================================
   12. Kontakt
   =========================================================== */

.ac-contact { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; padding-top: 84px; padding-bottom: 88px; }

.ac-contact-text { display: flex; flex-direction: column; gap: 22px; }

.ac-contact-text h2 { font-size: 38px; line-height: 1.2; }

.ac-contact-list { display: flex; flex-direction: column; gap: 12px; padding-top: 10px; }

.ac-contact-line { display: flex; align-items: center; gap: 12px; font-size: 17px; color: var(--ac-ink); }

.ac-contact-line a { color: var(--ac-ink); }
.ac-contact-line a:hover { color: var(--ac-accent); }

.ac-contact-box { background: var(--ac-bg-2); padding: 40px; }

.ac-contact-box .wpcf7 { margin: 0; }

.ac-contact-box input[type="text"],
.ac-contact-box input[type="email"],
.ac-contact-box input[type="tel"],
.ac-contact-box textarea {
  width: 100%;
  background: var(--ac-bg);
  border: 1px solid var(--ac-line-2);
  border-radius: 0;
  padding: 12px 14px;
  font-family: var(--ac-sans);
  font-size: 16px;
  color: var(--ac-ink);
}

.ac-contact-box input:focus,
.ac-contact-box textarea:focus { outline: 2px solid var(--ac-accent); outline-offset: -2px; }

.ac-contact-box label { font-size: 14px; font-weight: 600; color: var(--ac-text); }

.ac-contact-box input[type="submit"],
.ac-contact-box button[type="submit"] {
  background: var(--ac-accent);
  color: var(--ac-white);
  border: 0;
  border-radius: 999px;
  padding: 15px 30px;
  font-family: var(--ac-sans);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.ac-contact-box input[type="submit"]:hover,
.ac-contact-box button[type="submit"]:hover { background: var(--ac-accent-d); }

/* Attrappe, solange kein Formular-Plugin eingebunden ist */
.ac-form-mock { display: flex; flex-direction: column; gap: 18px; }
.ac-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ac-form-field { display: flex; flex-direction: column; gap: 8px; }
.ac-form-field span { font-size: 14px; font-weight: 600; color: var(--ac-text); }
.ac-form-box { height: 48px; background: var(--ac-bg); border: 1px solid var(--ac-line-2); }
.ac-form-box.is-tall { height: 132px; }
.ac-form-note { font-size: 13px; color: var(--ac-faint); }

/* ===========================================================
   13. Fusszeile
   =========================================================== */

.ac-footer { background: var(--ac-ink); color: #a2968a; }

.ac-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding-top: 34px;
  padding-bottom: 34px;
}

/* Die Fusszeilen-Wortmarke steht als Logo weiter oben. */

.ac-footer-links { display: flex; flex-wrap: wrap; gap: 30px; font-size: 14px; }

.ac-footer-links a { color: #a2968a; }
.ac-footer-links a:hover { color: #f7f1e8; }

/* ===========================================================
   14. Handy und Tablet
   =========================================================== */

@media (max-width: 1100px) {
  :root { --ac-pad-x: 48px; }

  .ac-hero h1 { font-size: 46px; }
  .ac-nav-links { gap: 20px; font-size: 14px; }
  .ac-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .ac-step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .ac-voice-grid { grid-template-columns: 1fr; }
  .ac-page-hero h1 { font-size: 40px; }
  .ac-offers { grid-template-columns: 1fr; }
  .ac-price-grid { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 900px) {
  :root { --ac-pad-x: 24px; }

  body.ac-page { font-size: 16px; }

  .ac-header { padding-top: 18px; padding-bottom: 18px; gap: 12px; }
  .ac-nav-links { display: none; }
  .ac-logo-lockup { gap: 12px; }
  .ac-logo-lockup .ac-signet { height: 26px; width: 49.4px; }
  .ac-logo-rule { height: 32px; }
  .ac-logo-name { font-size: 15px; letter-spacing: 0.2em; }
  .ac-logo-sub { font-size: 6.5px; letter-spacing: 0.36em; }
  .ac-phone { padding: 10px 16px; font-size: 14px; }

  .ac-hero {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 16px;
    padding-bottom: 48px;
  }

  .ac-hero-photo { min-height: 340px; order: -1; }

  .ac-hero h1 { font-size: 34px; line-height: 1.15; }
  .ac-lead { font-size: 17px; }

  .ac-btn { width: 100%; text-align: center; padding: 16px 20px; }
  .ac-btn-row { flex-direction: column; gap: 10px; }
  .ac-split-col .ac-btn { align-self: stretch; }

  .ac-trust-grid { grid-template-columns: 1fr; gap: 14px; padding-top: 22px; padding-bottom: 22px; }

  .ac-split { grid-template-columns: 1fr; }
  .ac-split-col { padding-top: 48px; padding-bottom: 48px; }
  .ac-split-col:first-child { border-right: 0; border-bottom: 1px solid var(--ac-line); }
  .ac-split-col h3 { font-size: 26px; }

  .ac-fields { padding-top: 52px; padding-bottom: 48px; }
  .ac-fields h2 { font-size: 28px; }
  .ac-field-row { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }
  .ac-field-row h3 { font-size: 24px; }
  .ac-field-desc { font-size: 16px; }

  .ac-steps { padding-top: 52px; padding-bottom: 52px; }
  .ac-section-head h2 { font-size: 28px; }
  .ac-step-grid { grid-template-columns: 1fr; gap: 26px; }
  .ac-step { border-top-color: var(--ac-accent); }

  .ac-quote { padding-top: 52px; padding-bottom: 52px; }
  .ac-quote h2 { font-size: 24px; line-height: 1.45; }

  .ac-voices { padding-top: 52px; padding-bottom: 52px; }
  .ac-voices h2 { font-size: 26px; }

  .ac-contact { grid-template-columns: 1fr; gap: 28px; padding-top: 52px; padding-bottom: 56px; }
  .ac-contact-text h2 { font-size: 28px; }
  .ac-contact-box { padding: 24px; }
  .ac-form-row { grid-template-columns: 1fr; }

  .ac-footer-inner { flex-direction: column; align-items: flex-start; gap: 18px; }
  .ac-footer-links { gap: 18px; }

  /* Angebotsseiten am Handy */
  .ac-page-hero { padding-top: 34px; padding-bottom: 40px; gap: 18px; }
  .ac-page-hero h1 { font-size: 32px; }
  .ac-offers { grid-template-columns: 1fr; gap: 20px; padding-bottom: 48px; }
  .ac-offer { padding: 28px 22px 30px 22px; }
  .ac-offer-head h2 { font-size: 25px; }
  .ac-price { font-size: 24px; }
  .ac-price-grid { grid-template-columns: 1fr; gap: 26px; padding-top: 38px; padding-bottom: 38px; }
  .ac-step-grid-2 { grid-template-columns: 1fr; }

  /* Die Logo-Zeile hat am Handy zu wenig Platz */
  .ac-logo-claim { display: none; }
}


/* ===========================================================
   16. Angebotsseiten (Bewerbungsservice, Leistungen für Firmen)
   =========================================================== */

.ac-page-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding-top: 76px;
  padding-bottom: 64px;
}

/* Die Breite begrenzen die Elemente selbst, nicht der Rahmen –
   sonst rückt der ganze Block in die Seitenmitte. */
.ac-page-hero > * { max-width: 900px; }

.ac-page-hero h1 {
  font-size: 50px;
  line-height: 1.14;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

/* Zwei Angebotskarten nebeneinander */
.ac-offers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  padding-bottom: 76px;
}

.ac-offers-single { grid-template-columns: 1fr; }

.ac-offer {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--ac-bg-2);
  border-top: 3px solid var(--ac-accent);
  padding: 38px 34px 40px 34px;
}

.ac-offer-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.ac-offer-head h2 { font-size: 30px; line-height: 1.2; }

.ac-price {
  font-family: var(--ac-serif);
  font-size: 28px;
  font-weight: 500;
  color: var(--ac-accent);
  white-space: nowrap;
}

.ac-price-request { font-size: 20px; color: var(--ac-muted); }

.ac-offer-lead { font-size: 17px; line-height: 1.7; color: var(--ac-text); }

.ac-offer-note {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ac-faint);
  border-top: 1px solid var(--ac-line);
  padding-top: 16px;
}

.ac-offer .ac-btn { align-self: flex-start; }

/* Leiste mit den Nebenpreisen */
.ac-price-strip {
  background: var(--ac-ink);
  color: #f7f1e8;
}

.ac-price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding-top: 52px;
  padding-bottom: 52px;
}

.ac-price-item { display: flex; flex-direction: column; gap: 8px; }

.ac-price-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #b9a892;
}

.ac-price-value {
  font-family: var(--ac-serif);
  font-size: 30px;
  font-weight: 500;
  color: #f7f1e8;
}

.ac-price-item p { font-size: 15px; line-height: 1.6; color: #b9a892; }

.ac-step-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ===========================================================
   15. Uebrige Seiten (Kontakt, Impressum usw.)
   Damit die Unterseiten nicht im alten Blau stehen bleiben,
   solange sie noch nicht neu gebaut sind.
   =========================================================== */

body:not(.ac-page) {
  background: var(--ac-bg);
  color: var(--ac-ink);
}

body:not(.ac-page) .entry-content,
body:not(.ac-page) .site-content {
  font-family: var(--ac-sans);
}

body:not(.ac-page) h1,
body:not(.ac-page) h2,
body:not(.ac-page) h3,
body:not(.ac-page) h4 {
  font-family: var(--ac-serif);
  font-weight: 500;
  color: var(--ac-ink);
}

body:not(.ac-page) a { color: var(--ac-accent); }
body:not(.ac-page) a:hover { color: var(--ac-accent-d); }


/* ===========================================================
   17. Angebotsseiten am Tablet und Handy
   Steht bewusst am Schluss, damit es Abschnitt 16 schlaegt.
   =========================================================== */

@media (max-width: 1100px) {
  .ac-page-hero h1 { font-size: 40px; }
  .ac-offers { grid-template-columns: 1fr; }
  .ac-price-grid { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 900px) {
  .ac-page-hero { padding-top: 34px; padding-bottom: 40px; gap: 18px; }
  .ac-page-hero h1 { font-size: 32px; }
  .ac-offers { grid-template-columns: 1fr; gap: 20px; padding-bottom: 48px; }
  .ac-offer { padding: 28px 22px 30px 22px; }
  .ac-offer-head { gap: 8px; }
  .ac-offer-head h2 { font-size: 25px; }
  .ac-price { font-size: 24px; }
  .ac-price-grid { grid-template-columns: 1fr; gap: 26px; padding-top: 38px; padding-bottom: 38px; }
  .ac-step-grid-2 { grid-template-columns: 1fr; }
  .ac-offer .ac-btn { align-self: stretch; }
}


/* ===========================================================
   18. Textseiten (Impressum, Datenschutz, AGB)
   =========================================================== */

.ac-text-hero { padding-bottom: 32px; }

.ac-text {
  padding-bottom: 90px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ac-text > * { max-width: 900px; }

.ac-text h2 {
  font-size: 27px;
  line-height: 1.3;
  margin-top: 44px;
  margin-bottom: 14px;
}

.ac-text h2:first-child { margin-top: 0; }

.ac-text p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--ac-text);
  margin-bottom: 16px;
}

.ac-text p b { color: var(--ac-ink); }

.ac-text ul {
  margin: 0 0 20px 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ac-text li {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ac-text);
}

.ac-text li::marker { color: var(--ac-accent); }

.ac-text-date {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--ac-line);
  font-size: 15px;
  color: var(--ac-faint);
}

@media (max-width: 900px) {
  .ac-text { padding-bottom: 56px; }
  .ac-text h2 { font-size: 22px; margin-top: 34px; }
  .ac-text p, .ac-text li { font-size: 16px; }
}

/* ===========================================================
   19. Offene Stellen, Kontaktseite, Formulare, «Warum ein Mensch»
   =========================================================== */

/* --- Kopfzeile: aktive Seite ----------------------------- */
.ac-nav-links a.is-active { color: var(--ac-accent); }

/* --- Hero: Telefonzeile ---------------------------------- */
.ac-hero-call {
  margin-top: 18px;
  font-size: 15px;
  color: var(--ac-muted);
}
.ac-hero-call a {
  color: var(--ac-ink);
  font-weight: 600;
  border-bottom: 1px solid var(--ac-line-2);
  text-decoration: none;
}
.ac-hero-call a:hover { color: var(--ac-accent); border-color: var(--ac-accent); }

/* --- Stellen: Liste und Karten --------------------------- */
.ac-stellen { padding-top: 40px; padding-bottom: 72px; }
.ac-stellen-home { padding-top: 76px; background: transparent; }
.ac-stellen-more { padding-top: 20px; }

.ac-stellen-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.ac-stelle-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 26px 26px 26px;
  background: var(--ac-white);
  border: 1px solid var(--ac-line);
  border-radius: 3px;
  transition: border-color .18s ease, transform .18s ease;
}
.ac-stelle-card:hover { border-color: var(--ac-accent-l); transform: translateY(-2px); }

.ac-stelle-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.ac-stelle-card h2,
.ac-stelle-card h3 {
  font-family: var(--ac-serif);
  font-size: 23px;
  line-height: 1.25;
  color: var(--ac-ink);
  margin: 0;
}
.ac-stelle-card h2 a,
.ac-stelle-card h3 a { color: inherit; text-decoration: none; }
.ac-stelle-card h2 a:hover,
.ac-stelle-card h3 a:hover { color: var(--ac-accent); }

.ac-stelle-ref {
  flex: 0 0 auto;
  font-family: var(--ac-sans);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ac-faint);
  white-space: nowrap;
}

.ac-stelle-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0;
  font-size: 14px;
  color: var(--ac-muted);
}
.ac-stelle-facts span { position: relative; }
.ac-stelle-facts span + span { padding-left: 15px; }
.ac-stelle-facts span + span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--ac-accent-l);
}

.ac-stelle-excerpt {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ac-text);
  margin: 0;
}

.ac-stelle-more,
.ac-stelle-more-link {
  align-self: flex-start;
  margin-top: 2px;
  font-family: var(--ac-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--ac-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.ac-stelle-more:hover,
.ac-stelle-more-link:hover { border-color: var(--ac-accent); }

.ac-stellen-empty {
  padding: 40px 34px;
  background: var(--ac-bg-2);
  border: 1px solid var(--ac-line);
  border-radius: 3px;
}
.ac-stellen-empty h2 {
  font-family: var(--ac-serif);
  font-size: 26px;
  line-height: 1.25;
  color: var(--ac-ink);
  margin-bottom: 12px;
}
.ac-stellen-empty p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ac-text);
  max-width: 660px;
  margin-bottom: 20px;
}

.ac-stellen-hint { padding-bottom: 80px; }
.ac-stellen-hint-inner {
  padding: 34px 32px;
  border-left: 3px solid var(--ac-accent-l);
  background: var(--ac-bg-2);
}
.ac-stellen-hint h2 {
  font-family: var(--ac-serif);
  font-size: 24px;
  color: var(--ac-ink);
  margin-bottom: 10px;
}
.ac-stellen-hint p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ac-text);
  max-width: 760px;
}
.ac-stellen-hint a { color: var(--ac-accent); }

.ac-stellen-more h2 {
  font-family: var(--ac-serif);
  font-size: 28px;
  color: var(--ac-ink);
  margin-bottom: 22px;
}

/* --- Einzelne Stelle ------------------------------------- */
.ac-stelle-hero .ac-eyebrow a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--ac-line-2); }
.ac-stelle-hero .ac-eyebrow a:hover { color: var(--ac-accent); }

.ac-stelle-expired {
  margin-top: 6px;
  padding: 14px 18px;
  background: #f6e9e4;
  border-left: 3px solid var(--ac-accent);
  font-size: 16px;
  color: var(--ac-ink);
}

.ac-stelle-body {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 54px;
  align-items: start;
  padding-bottom: 80px;
}

.ac-stelle-facts-box {
  position: sticky;
  top: 24px;
  padding: 26px 24px;
  background: var(--ac-white);
  border: 1px solid var(--ac-line);
  border-radius: 3px;
}

.ac-fact-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ac-line);
}
.ac-fact-row:last-child { border-bottom: 0; padding-bottom: 0; }
.ac-fact-row:first-child { padding-top: 0; }

.ac-fact-label {
  font-family: var(--ac-sans);
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ac-faint);
}
.ac-fact-value {
  font-size: 16px;
  color: var(--ac-ink);
  font-weight: 500;
}
.ac-fact-free .ac-fact-value { color: var(--ac-accent); }

.ac-stelle-text > h2:first-child { margin-top: 0; }

/* --- Bewerben-Block -------------------------------------- */
.ac-apply {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--ac-line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.ac-apply-note {
  flex: 1 0 100%;
  margin: 4px 0 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ac-faint);
}
.ac-apply-note a { color: var(--ac-accent); }

/* --- Kontaktseite ---------------------------------------- */
.ac-kontakt-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--ac-line);
}

.ac-form-block {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 54px;
  align-items: start;
  padding-top: 64px;
  padding-bottom: 64px;
}
.ac-form-block-alt { border-top: 1px solid var(--ac-line); }

.ac-form-intro h2 {
  font-family: var(--ac-serif);
  font-size: 32px;
  line-height: 1.2;
  color: var(--ac-ink);
  margin: 6px 0 14px 0;
}
.ac-form-intro p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ac-text);
  margin-bottom: 0;
}
.ac-form-intro p + p { margin-top: 14px; }

.ac-ref-badge {
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--ac-bg-2);
  border-left: 3px solid var(--ac-accent);
  font-size: 15px;
}
.ac-ref-badge strong { color: var(--ac-ink); }

.ac-form-alt {
  margin-top: 18px;
  font-size: 15px;
  color: var(--ac-muted);
}
.ac-form-alt a { color: var(--ac-accent); }

.ac-form-box-outer {
  padding: 32px 30px;
  background: var(--ac-white);
  border: 1px solid var(--ac-line);
  border-radius: 3px;
}

.ac-kontakt-note { padding-top: 10px; padding-bottom: 70px; }
.ac-kontakt-note p { font-size: 15px; color: var(--ac-faint); }
.ac-kontakt-note a { color: var(--ac-accent); }

/* --- Fluent Forms an die Seite anpassen ------------------ */
.ac-page .fluentform { font-family: var(--ac-sans); }

.ac-page .fluentform .ff-el-group { margin-bottom: 18px; }

.ac-page .fluentform .ff-el-input--label label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ac-muted);
  margin-bottom: 6px;
}

.ac-page .fluentform .ff-el-input--label.ff-el-is-required label:after { color: var(--ac-accent); }

.ac-page .fluentform input[type="text"],
.ac-page .fluentform input[type="email"],
.ac-page .fluentform input[type="tel"],
.ac-page .fluentform input[type="url"],
.ac-page .fluentform select,
.ac-page .fluentform textarea,
.ac-page .fluentform .ff-el-form-control {
  width: 100%;
  padding: 13px 14px;
  font-family: var(--ac-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ac-ink);
  background: var(--ac-bg);
  border: 1px solid var(--ac-line-2);
  border-radius: 2px;
  box-shadow: none;
  transition: border-color .15s ease, background .15s ease;
}

.ac-page .fluentform textarea.ff-el-form-control { min-height: 150px; resize: vertical; }

.ac-page .fluentform .ff-el-form-control:focus {
  outline: none;
  background: var(--ac-white);
  border-color: var(--ac-accent-l);
  box-shadow: none;
}

.ac-page .fluentform .ff-el-form-control::placeholder { color: var(--ac-faint); }

.ac-page .fluentform .ff-btn-submit,
.ac-page .fluentform button[type="submit"] {
  width: auto;
  margin-top: 4px;
  padding: 16px 34px;
  font-family: var(--ac-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--ac-white);
  background: var(--ac-accent);
  border: 1px solid var(--ac-accent);
  border-radius: 2px;
  cursor: pointer;
  transition: background .15s ease;
}
.ac-page .fluentform .ff-btn-submit:hover,
.ac-page .fluentform button[type="submit"]:hover { background: var(--ac-accent-d); }

.ac-page .fluentform .ff-el-form-check-label,
.ac-page .fluentform .ff-el-form-check label {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ac-muted);
}
.ac-page .fluentform .ff-el-form-check-label a { color: var(--ac-accent); }

.ac-page .fluentform .ff-el-help-message {
  font-size: 13px;
  color: var(--ac-faint);
  margin-top: 4px;
}

.ac-page .fluentform .error,
.ac-page .fluentform .text-danger,
.ac-page .fluentform .ff-el-is-error .error { font-size: 13px; color: var(--ac-accent-d); }

.ac-page .fluentform .ff-el-is-error .ff-el-form-control { border-color: var(--ac-accent); }

.ac-page .ff-message-success {
  padding: 16px 18px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ac-ink);
  background: var(--ac-bg-2);
  border: 0;
  border-left: 3px solid var(--ac-accent);
  border-radius: 0;
}

.ac-page .fluentform .ff-custom_html {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ac-muted);
}

/* --- Warum ein Mensch ------------------------------------ */
.ac-why { background: var(--ac-bg-2); padding-top: 76px; padding-bottom: 76px; }

.ac-why h2 {
  font-family: var(--ac-serif);
  font-size: 34px;
  line-height: 1.2;
  color: var(--ac-ink);
  margin-bottom: 32px;
  max-width: 760px;
}

.ac-why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px 44px;
}

.ac-why-item h3 {
  font-family: var(--ac-sans);
  font-size: 17px;
  font-weight: 700;
  color: var(--ac-ink);
  margin-bottom: 8px;
}
.ac-why-item p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ac-text);
}

/* --- Mobil ------------------------------------------------ */
@media (max-width: 900px) {
  .ac-stellen { padding-top: 52px; padding-bottom: 52px; }
  .ac-stelle-body { grid-template-columns: 1fr; gap: 30px; padding-bottom: 56px; }
  .ac-stelle-facts-box { position: static; }
  .ac-form-block { grid-template-columns: 1fr; gap: 26px; padding-top: 44px; padding-bottom: 44px; }
  .ac-form-box-outer { padding: 24px 20px; }
  .ac-form-intro h2 { font-size: 26px; }
  .ac-why { padding-top: 52px; padding-bottom: 52px; }
  .ac-why h2 { font-size: 26px; margin-bottom: 24px; }
  .ac-why-grid { gap: 22px; }
  .ac-stelle-card { padding: 22px 20px; }
  .ac-stelle-head { flex-direction: column; gap: 6px; }
  .ac-stellen-empty { padding: 28px 22px; }
  .ac-stellen-empty h2 { font-size: 22px; }
  .ac-stellen-hint-inner { padding: 24px 20px; }
  .ac-apply .ac-btn { width: 100%; text-align: center; }
  .ac-kontakt-facts { flex-direction: column; gap: 10px; padding-bottom: 28px; }
}

/* ===========================================================
   20. Menue fuer Handy und Tablet
   =========================================================== */

.ac-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 40px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--ac-line-2);
  border-radius: 4px;
  cursor: pointer;
}

.ac-burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ac-ink);
  border-radius: 2px;
  transition: transform .18s ease, opacity .18s ease;
}

.ac-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ac-burger.is-open span:nth-child(2) { opacity: 0; }
.ac-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {

  .ac-nav { position: relative; gap: 10px; }

  .ac-burger { display: flex; }

  .ac-header .ac-nav-links {
    display: none;
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    z-index: 60;
    flex-direction: column;
    gap: 0;
    min-width: 230px;
    padding: 6px 0;
    background: var(--ac-white);
    border: 1px solid var(--ac-line);
    border-radius: 4px;
    box-shadow: 0 14px 34px rgba(36, 31, 26, .13);
  }

  .ac-header .ac-nav-links.is-open { display: flex; }

  .ac-header .ac-nav-links a {
    padding: 13px 20px;
    font-size: 16px;
    font-weight: 500;
    color: var(--ac-ink);
    border-bottom: 1px solid var(--ac-line);
  }
  .ac-header .ac-nav-links a:last-child { border-bottom: 0; }
  .ac-header .ac-nav-links a.is-active { color: var(--ac-accent); }
}

@media (max-width: 420px) {
  .ac-page .ac-phone { padding: 9px 12px; font-size: 13px; gap: 6px; }
  .ac-header { gap: 8px; }
}

/* ===========================================================
   21. Direkter E-Mail-Weg und Zahlungszeile
   =========================================================== */

.ac-mail-first {
  margin: 20px 0 22px 0;
  padding: 24px 24px 22px 24px;
  background: var(--ac-bg-2);
  border-left: 3px solid var(--ac-accent);
  border-radius: 2px;
}

.ac-mail-first h3 {
  font-family: var(--ac-serif);
  font-size: 22px;
  line-height: 1.25;
  color: var(--ac-ink);
  margin-bottom: 8px;
}

.ac-mail-first p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ac-text);
  margin-bottom: 16px;
}

.ac-mail-first .ac-btn { margin-bottom: 12px; }

.ac-mail-first-note {
  margin-bottom: 0;
  font-size: 14px;
  color: var(--ac-faint);
}
.ac-mail-first-note a { color: var(--ac-accent); }

.ac-price-note {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .78);
  max-width: 820px;
}

@media (max-width: 900px) {
  .ac-mail-first { padding: 20px 18px; }
  .ac-mail-first h3 { font-size: 19px; }
  .ac-mail-first .ac-btn { width: 100%; text-align: center; }
  .ac-price-note { margin-top: 20px; font-size: 14px; }
}

/* ===========================================================
   22. Kontaktband mit Skyline
   =========================================================== */

.ac-kontakt-band {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--ac-line);
}

.ac-kontakt-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  padding-top: 30px;
  padding-bottom: 26px;
}

.ac-skyline {
  display: block;
  width: 100%;
  height: auto;
  opacity: .13;
  pointer-events: none;
  user-select: none;
}

/* Der breite erste Block im Abschnitt «Warum ein Mensch» */
.ac-why-wide { grid-column: 1 / -1; }
.ac-why-wide h3 { font-size: 19px; }
.ac-why-wide p { max-width: 900px; }

@media (max-width: 900px) {
  .ac-kontakt-facts { flex-direction: column; gap: 10px; padding-top: 20px; padding-bottom: 20px; }
  .ac-skyline { opacity: .15; }
}

/* ===========================================================
   23. Über mich und Google-Bewertungen
   =========================================================== */

/* --- Über mich ------------------------------------------- */
.ac-about {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 60px;
  align-items: start;
  padding-bottom: 84px;
}

.ac-about-text > h2:first-child { margin-top: 0; }

.ac-about-side {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.ac-about-photo {
  overflow: hidden;
  border-radius: 3px;
  line-height: 0;
}
.ac-about-photo img { width: 100%; height: auto; display: block; }

.ac-about-card {
  padding: 26px 24px;
  background: var(--ac-white);
  border: 1px solid var(--ac-line);
  border-radius: 3px;
}
.ac-about-card .ac-eyebrow { margin-bottom: 14px; }

.ac-about-cta {
  padding: 24px;
  background: var(--ac-bg-2);
  border-left: 3px solid var(--ac-accent);
  border-radius: 2px;
}
.ac-about-cta .ac-btn { margin-bottom: 12px; }
.ac-about-cta-note { font-size: 14px; color: var(--ac-muted); margin: 0; }
.ac-about-cta-note a { color: var(--ac-ink); font-weight: 600; }

/* --- Google-Bewertungen ---------------------------------- */
.ac-reviews { padding-top: 76px; padding-bottom: 80px; }

.ac-review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 28px;
}

.ac-review {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 26px 24px;
  background: var(--ac-white);
  border: 1px solid var(--ac-line);
  border-radius: 3px;
}

.ac-stars { display: flex; gap: 3px; line-height: 0; }

.ac-review blockquote {
  margin: 0;
  font-family: var(--ac-serif);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ac-ink);
}

.ac-review figcaption {
  margin-top: auto;
  padding-top: 4px;
  font-family: var(--ac-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ac-faint);
}

.ac-review-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  font-size: 15px;
  color: var(--ac-muted);
}

@media (max-width: 900px) {
  .ac-about { grid-template-columns: 1fr; gap: 30px; padding-bottom: 56px; }
  .ac-about-side { position: static; }
  .ac-reviews { padding-top: 52px; padding-bottom: 56px; }
  .ac-review { padding: 22px 20px; }
  .ac-review blockquote { font-size: 17px; }
  .ac-review-foot { flex-direction: column; align-items: flex-start; gap: 12px; }
  .ac-review-foot .ac-btn { width: 100%; text-align: center; }
}

/* --- Bild im Textteil von «Über mich» -------------------- */
.ac-about-figure {
  margin: 28px 0 0 0;
  max-width: 620px;
}

.ac-about-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}

.ac-about-figure figcaption {
  margin-top: 10px;
  font-size: 14px;
  color: var(--ac-faint);
}

@media (max-width: 900px) {
  .ac-about-figure { margin-top: 22px; }
}

/* ===========================================================
   24. Absenden-Knopf: Farbe des Plugins überschreiben
   Fluent Forms setzt eigene Farben mit Vorrang, deshalb hier
   ausdrücklich erzwungen. Gilt für alle Formulare.
   =========================================================== */

.ac-page .fluentform .ff-btn-submit,
.ac-page .fluentform button[type="submit"],
.ac-page .fluentform .ff_btn_style,
.ac-page .fluentform input[type="submit"] {
  background-color: var(--ac-accent) !important;
  background-image: none !important;
  border: 1px solid var(--ac-accent) !important;
  color: #ffffff !important;
  border-radius: 2px !important;
  padding: 16px 34px !important;
  font-family: var(--ac-sans) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  box-shadow: none !important;
  text-transform: none !important;
  transition: background-color .15s ease !important;
}

.ac-page .fluentform .ff-btn-submit:hover,
.ac-page .fluentform button[type="submit"]:hover,
.ac-page .fluentform .ff_btn_style:hover,
.ac-page .fluentform input[type="submit"]:hover {
  background-color: var(--ac-accent-d) !important;
  border-color: var(--ac-accent-d) !important;
  color: #ffffff !important;
}

.ac-page .fluentform .ff-btn-submit:focus-visible,
.ac-page .fluentform button[type="submit"]:focus-visible {
  outline: 2px solid var(--ac-accent-d) !important;
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .ac-page .fluentform .ff-btn-submit,
  .ac-page .fluentform button[type="submit"] { width: 100% !important; }
}

/* ===========================================================
   25. Fehlerseite (404)
   =========================================================== */

.ac-404 {
  padding-bottom: 90px;
}

.ac-404-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.ac-page .ac-404-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 26px 28px;
  background: var(--ac-white);
  border: 1px solid var(--ac-line);
  color: var(--ac-ink);
  transition: border-color .15s ease, transform .15s ease;
}

.ac-page .ac-404-card:hover,
.ac-page .ac-404-card:focus-visible {
  border-color: var(--ac-accent);
  color: var(--ac-ink);
  transform: translateY(-2px);
}

.ac-404-label {
  font-family: var(--ac-serif);
  font-size: 21px;
  line-height: 1.25;
  color: var(--ac-accent);
}

.ac-404-text {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ac-text);
}

.ac-404-phone {
  padding-top: 26px;
  font-size: 16px;
  color: var(--ac-muted);
}

@media (max-width: 860px) {
  .ac-404-grid { grid-template-columns: 1fr; }
  .ac-404 { padding-bottom: 60px; }
}