/* accelsio.com. One-Pager Andre Ehrlich
   Tokens nach KONVENTION-Website-Golden-Rules (Web-Set, nicht Print-Set).
   Kein externer Request, keine Cookies, kein JavaScript. */

/* ---------- Schriften, lokal ---------- */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/open-sans-v44-latin-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/open-sans-v44-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/open-sans-v44-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/open-sans-v44-latin-700.woff2') format('woff2');
}

/* ---------- Tokens ---------- */
:root {
  /* Akzent kommt aus dem accelsio-Logo, nicht aus dem EDE-Sand.
     --rot ist der exakte Logo-Ton, gemessen am Original (#FF311A).
     Er hat gegen Weiss nur 3.7:1 Kontrast und ist deshalb NUR fuer
     grosse Schrift ab 18pt und fuer dekorative Flaechen zulaessig.
     --rot-text ist derselbe Farbton abgedunkelt auf 5.3:1 und traegt
     alles Kleinteilige: Links, Buttonflaechen mit weisser Schrift. */
  --rot: #ff311a;
  --rot-text: #d61600;
  --rot-glow: rgba(255, 49, 26, 0.18);
  --ink: #000;
  --body: #333;
  --anthrazit: #72727c;
  --grey-comp: #efefef;
  --grey-alt: #f3f3f3;
  --line: #e2e2e2;
  --white: #fff;
  --font: 'Open Sans', 'Segoe UI', Arial, Helvetica, sans-serif;
  --pill: 40px;
  --radius: 8px;
  --shadow: 0 10px 28px rgba(16, 19, 12, 0.14);
}

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

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

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.75;
  color: var(--body);
  background: var(--white);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--ink); text-decoration-color: var(--rot); text-underline-offset: 3px; }
a:hover { color: var(--rot-text); }

:focus-visible {
  outline: 2px solid var(--rot-text);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--rot-glow);
}

.container { width: min(1100px, 100% - 44px); margin-inline: auto; }

.skip {
  position: absolute;
  left: -9999px;
  background: var(--ink);
  color: var(--white);
  padding: 12px 20px;
  z-index: 10;
}
.skip:focus { left: 16px; top: 16px; }

/* Nur fuer Screenreader und die Dokument-Gliederung. Die Firmennamen stehen
   sichtbar im Logo und in der Anschrift, als H2 werden sie trotzdem gebraucht. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Typografie ---------- */
h1, h2, h3 {
  font-weight: 300;
  color: var(--ink);
  line-height: 1.2;
  margin: 0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

h1 { font-size: clamp(30px, 6vw, 54px); letter-spacing: 0.1em; }
h2 { font-size: clamp(21px, 3vw, 28px); }
h3 { font-size: 17px; letter-spacing: 0.14em; }

h1 strong, h2 strong { font-weight: 600; color: var(--rot); }

p { margin: 0 0 18px; }
p:last-child { margin-bottom: 0; }

/* Ueberschriften haben margin 0, deshalb den Abstand am Folgeabsatz setzen. */
h1 + p, h2 + p { margin-top: 16px; }

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--anthrazit);
  margin: 0 0 14px;
}

.lead { font-size: clamp(18px, 2.2vw, 21px); font-weight: 300; line-height: 1.65; }

/* ---------- Kopf ---------- */
.site-head {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

/* Das Logo traegt den Faecher ueber dem Schriftzug, der Wortteil nimmt nur
   das untere Drittel ein. Unter etwa 60px Gesamthoehe wird "accelsio"
   unleserlich, deshalb hier bewusst groesser als ein uebliches Kopf-Logo. */
.wordmark { display: inline-block; text-decoration: none; line-height: 0; }
.wordmark img { height: 56px; width: auto; }

/* ---------- Sektionen ---------- */
section { padding: clamp(48px, 8vw, 86px) 0; }
section + section { border-top: 1px solid var(--line); }
.section-alt { background: var(--grey-alt); border-top: none; }
.section-alt + section { border-top: none; }

.prose { max-width: 68ch; }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(40px, 6vw, 68px); }

.hero-grid { display: grid; gap: 34px; align-items: center; }

.hero-portrait {
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 340px;
  box-shadow: var(--shadow);
}
.hero-portrait img { width: 100%; object-fit: cover; }

/* ---------- Schaltflaechen ---------- */
.btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: var(--pill);
  background: var(--ink);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.btn:hover {
  background: var(--rot-text);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* ---------- Firmen-Bloecke (accelsio und EDE INVEST) ---------- */
/* Mobil untereinander, ab 760px nebeneinander je halbe Breite.
   Karten-Muster mit 3px-Akzentkante links, wie es die Golden Rules
   als Familien-Merkmal vorgeben, hier in Logo-Rot statt Sand. */
.firmen { display: grid; gap: 26px; }

.firma {
  background: var(--white);
  border-left: 3px solid var(--rot);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 30px 28px 32px;
}

/* Feste Logo-Zeile, damit beide Karten trotz unterschiedlicher
   Seitenverhaeltnisse auf derselben Grundlinie starten. Das accelsio-Logo
   traegt den Faecher ueber dem Schriftzug und braucht die Hoehe. */
.firma-logo {
  display: flex;
  align-items: center;
  min-height: 76px;
  margin-bottom: 22px;
}
.firma-logo img { max-height: 68px; width: auto; }
.firma-logo-link { display: inline-block; line-height: 0; }
.firma-logo-link:hover { opacity: 0.72; transition: opacity 0.25s ease; }

.firma-satz {
  font-size: clamp(18px, 2vw, 20px);
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink);
}

.firma-kontakt {
  font-style: normal;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 16px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

/* ---------- LinkedIn-Zeile ---------- */
.linkedin {
  margin: 38px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.linkedin-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--anthrazit);
  margin-bottom: 3px;
}

/* ---------- Fuss ---------- */
.site-foot {
  padding: 34px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--anthrazit);
}
.foot-inner { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: baseline; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.site-foot a { color: var(--anthrazit); }
.site-foot a:hover { color: var(--rot-text); }

/* ---------- Rechtstexte ---------- */
.legal { padding: clamp(40px, 6vw, 68px) 0; }
.legal h2 { margin-top: 42px; margin-bottom: 14px; }
.legal h2:first-of-type { margin-top: 30px; }
.legal h3 { margin-top: 26px; margin-bottom: 8px; }
.legal ul { margin: 0 0 18px; padding-left: 22px; }
.legal li { margin-bottom: 7px; }
.legal .back { margin-top: 44px; }

/* ---------- Breakpoints ---------- */
@media (min-width: 760px) {
  body { font-size: 18px; }
  .wordmark img { height: 72px; }
  .hero-grid { grid-template-columns: 1.35fr 1fr; gap: 52px; }
  .hero-portrait { max-width: 380px; justify-self: end; }
  .firmen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .btn:hover { transform: none; }
}