/* LA Reinigungsservice — stylesheet
   Palette derives from the logo: #003399 blue, #00CCFF cyan.
   #00CCFF is decorative only (1.9:1 on white); --cyan-ink is its accessible
   counterpart for text (5.04:1). */

:root {
  --brand: #003399;
  --brand-dark: #002a7a;
  --brand-mid: #1a4db3;
  --cyan: #00ccff;
  --cyan-soft: #e6f9ff;
  --cyan-ink: #0077a3;

  --text: #17233c;
  --muted: #5f6b7d;
  --line: #dce5ee;
  --white: #ffffff;
  --soft: #f4fbfe;

  --shadow: 0 12px 30px rgba(0, 51, 153, 0.08);
  --radius: 18px;
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
  overflow-wrap: break-word;
}
.ico {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
img, svg { max-width: 100%; }
img { display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

/* Long German compounds may hyphenate inside narrow cards, but never in the
   display headings, where it reads as a typo. */
.card h3, .audience-item, .step h3 { hyphens: auto; }

.container {
  width: min(var(--container), calc(100% - 40px));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand);
  color: white;
  padding: 12px 18px;
  border-radius: 0 0 10px 0;
  z-index: 2000;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--cyan-ink);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(220, 229, 238, .9);
}
.navbar {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand img { width: auto; height: 60px; }
.brand-text {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--brand);
  letter-spacing: -.03em;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
}
.nav-links a {
  font-weight: 650;
  color: #25354e;
  position: relative;
  white-space: nowrap;
}
.nav-links > a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -10px;
  height: 2px;
  background: var(--cyan);
  transition: right .2s ease;
}
.nav-links > a:not(.btn):hover::after,
.nav-links > a.active::after { right: 0; }
.nav-links a.active { color: var(--brand); }
.header-cta { margin-left: 4px; }

/* ---------- language switch ---------- */

.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 18px;
  font-weight: 750;
  font-size: .82rem;
  letter-spacing: .02em;
}
.lang-switch a {
  color: var(--muted);
  padding: 5px 8px;
  border-radius: 7px;
  transition: color .2s ease, background .2s ease;
}
.lang-switch a[href]:hover { color: var(--brand); background: var(--cyan-soft); }
.lang-switch a.active { color: var(--brand); background: var(--cyan-soft); cursor: default; }
.lang-switch .sep { color: var(--line); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 10px;
  padding: 14px 20px;
  font-weight: 750;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-primary {
  color: white;
  background: linear-gradient(135deg, var(--brand-mid), var(--brand));
  box-shadow: 0 10px 24px rgba(0, 51, 153, .22);
}
.btn-primary:hover { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); }
.btn-outline {
  border: 1.5px solid var(--brand);
  color: var(--brand);
  background: white;
}
.btn-outline:hover { background: var(--cyan-soft); }
.btn-block { width: 100%; }

/* Reversed pair for the dark hero. The site's blue primary loses its edge
   against a deep navy scrim, so it swaps to white on the hero only. */
.hero .btn-primary {
  background: #fff;
  color: var(--brand);
  box-shadow: 0 10px 26px rgba(0, 10, 35, .34);
}
.hero .btn-primary:hover { background: #eef6ff; }
.hero .btn-outline {
  border-color: rgba(255, 255, 255, .9);
  color: #fff;
  background: rgba(255, 255, 255, .10);
}
.hero .btn-outline:hover { background: rgba(255, 255, 255, .22); }

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
}
.menu-toggle span {
  width: 24px;
  height: 2px;
  background: var(--brand);
  display: block;
  margin: 5px auto;
  transition: .2s ease;
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #011436;
  min-height: 570px;
  display: flex;
  align-items: center;
}

/* Rotating photographs behind the copy. The images are stacked and
   crossfaded by script.js; without JS (or with reduced motion) only the
   first one shows, and the rest are never downloaded. */
.hero-slides { position: absolute; inset: 0; z-index: -1; }
.hero-slides img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* anchored top: on a wide viewport the scaled image is taller than the
     band, and centring it crops heads off. */
  object-position: right top;
  opacity: 0;
  transition: opacity 1.6s ease-in-out;
}
.hero-slides img.is-active { opacity: 1; }
/* Dark scrim, white copy. A white wash strong enough to carry dark text
   bleaches the photograph; reversing it out keeps the right-hand two thirds
   of the image at close to full strength, which is the point of having it. */
.hero-slides::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(1,20,54,.90) 0 28%, rgba(1,20,54,.80) 44%,
                              rgba(1,20,54,.56) 62%, rgba(1,20,54,.10) 100%);
}
.hero-inner { padding: 70px 0; }
.hero-copy { max-width: 660px; }
.eyebrow {
  color: var(--cyan-ink);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .82rem;
  margin-bottom: 10px;
}
.hero h1,
.page-hero h1 {
  margin: 0 0 14px;
  font-size: clamp(2.1rem, 4.6vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.04em;
  color: #fff;
}

/* On the dark hero the brand cyan finally works as text: 8:1 against the
   scrim, where it manages only 1.9:1 on white and is decorative there. */
.hero .eyebrow,
.page-hero .eyebrow { color: var(--cyan); }
.hero .subhead {
  color: var(--cyan);
  font-size: clamp(1.12rem, 2vw, 1.5rem);
  font-weight: 800;
  margin-bottom: 16px;
}
.hero p { max-width: 590px; font-size: 1.08rem; color: rgba(255,255,255,.93); }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }

/* ---------- sections ---------- */

.section { padding: 76px 0; }
.section-soft { background: linear-gradient(180deg, #f8fdff, var(--soft)); }
.section-title {
  text-align: center;
  color: var(--brand);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.15;
  margin: 0 0 38px;
  letter-spacing: -0.03em;
}
.section-title::after {
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  background: var(--cyan);
  margin: 14px auto 0;
  border-radius: 999px;
}
.section-intro {
  max-width: 760px;
  text-align: center;
  margin: -18px auto 38px;
  color: var(--muted);
}

/* ---------- grids ----------
   auto-fit + minmax lets tracks wrap instead of overflowing. The previous
   fixed repeat(n, 1fr) forced the page 171px wider than the viewport,
   because `1fr` is minmax(auto, 1fr) and German compounds such as
   "Treppenhausreinigung" set a min-content floor wider than the track. */

.grid { display: grid; gap: 22px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid-6 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }

.card {
  background: white;
  border: 1px solid #e3edf5;
  border-radius: 14px;
  padding: 26px 22px;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0,51,153,.12); }
.card h3 { margin: 14px 0 8px; color: var(--brand); line-height: 1.25; font-size: 1.05rem; }
.card p { margin: 0; color: var(--muted); font-size: .95rem; }

.icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--brand);
  background: var(--cyan-soft);
}
.icon svg { width: 26px; height: 26px; }

/* ---------- photo cards ----------
   Service cards with a photo across the top. The icon tile overlaps the
   photo's bottom edge, so the card keeps its glyph without a second row. On
   the homepage the whole card is a link to its section on the services page. */

.card-photo {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}
.card-img {
  width: 100%;
  height: auto; /* see .photo-figure img */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  background: linear-gradient(145deg, #dcf0fa, #f6fdff);
}
.card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 22px 24px;
}
.card-photo .icon {
  position: relative;
  margin-top: -28px;
  border: 3px solid white;
  box-sizing: content-box;
  box-shadow: 0 6px 16px rgba(0, 51, 153, .12);
}
.card-more {
  margin-top: auto;
  padding-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cyan-ink);
  font-weight: 700;
  font-size: .9rem;
}
.card-more svg { width: 16px; height: 16px; transition: transform .2s ease; }
a.card-photo:hover .card-more svg { transform: translateX(3px); }
a.card-photo:focus-visible { border-radius: 14px; }

/* Anchor targets on the services page clear the sticky header. */
.service-card[id] { scroll-margin-top: 120px; }

.trust-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
}
.trust-item {
  text-align: center;
  padding: 24px 20px;
  background: white;
  border: 1px solid #e3edf5;
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.trust-item .icon { margin: 0 auto; }
.trust-item strong { display: block; color: var(--brand); margin-top: 12px; }
.trust-item small { color: var(--muted); }

/* 1px gap over a tinted background draws the separators, so the cells can
   wrap freely without leaving dangling borders. */
.audience-strip {
  display: grid;
  /* Nine audiences, 3 x 3 at every width: a single row of nine leaves
     too little room for the longer German labels. */
  grid-template-columns: repeat(3, 1fr);
  max-width: 820px;
  margin-inline: auto;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.audience-item {
  padding: 22px 12px;
  text-align: center;
  background: white;
  font-weight: 700;
  color: var(--brand);
  font-size: .85rem;
  overflow-wrap: normal;
  /* Break only at the ­ points in the markup, not mid-syllable. */
  hyphens: manual;
}
.audience-item svg {
  width: 24px;
  height: 24px;
  display: block;
  margin: 0 auto 8px;
  color: var(--cyan-ink);
}
@media (max-width: 620px) {
  .audience-item { padding: 18px 6px; }
}

/* ---------- photography ----------
   The caption sits *below* the image, not over it. These photos are client-
   supplied and get swapped: white text on a gradient over an unknown photo is
   a contrast bet that eventually loses, and an overlay always covers whatever
   sits in the bottom third of the frame. Below the image, neither is a risk.

   The intrinsic aspect-ratio holds the layout while the file loads, and the
   tinted background shows through until it arrives, so a missing photo reads
   as a panel rather than a gap. */

.photo-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.photo-figure img {
  width: 100%;
  /* height:auto is load-bearing. The width/height attributes on the <img> map
     to CSS width and height as presentational hints; `width:100%` overrides the
     first, but an unoverridden `height` hint beats `aspect-ratio` and the image
     renders at its full 900px. */
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 16px;
  background: linear-gradient(145deg, #dcf0fa, #f6fdff);
  box-shadow: var(--shadow);
}
.photo-figure figcaption {
  color: var(--cyan-ink);
  font-weight: 700;
  font-size: .9rem;
  line-height: 1.45;
  letter-spacing: -.005em;
}

.photo-band img { aspect-ratio: 2 / 1; }

/* A photo block that follows a section already carrying bottom padding. */
.section-flush-top { padding-top: 0; }

/* ---------- pre-footer call to action ----------
   Light band rather than dark: the footer directly below is already a deep
   blue gradient, and two dark blocks in sequence lose the CTA. */

.cta-band {
  background: linear-gradient(180deg, var(--white), var(--cyan-soft));
  border-top: 1px solid var(--line);
  padding: 62px 0;
}
.cta-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
/* Circular rather than the 4:5 frame used on the About page: here the picture
   is doing the job of an avatar - naming who answers the phone - not
   presenting a portrait, and the round crop reads that way immediately. */
.cta-portrait {
  flex: 0 0 auto;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid var(--white);
  box-shadow: 0 16px 36px rgba(0, 51, 153, .18);
  background: linear-gradient(145deg, #d5ecf7, #f7fdff);
}
.cta-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cta-copy { max-width: 46ch; }
.cta-band h2 {
  color: var(--brand);
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  line-height: 1.18;
  letter-spacing: -.03em;
  margin: 0 0 12px;
}
.cta-band p {
  color: #3a4961;
  margin: 0;
  font-size: 1.05rem;
}
.cta-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.cta-sig {
  margin-top: 18px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--cyan-ink);
}

/* ---------- expanded service descriptions ---------- */

.service-card { display: flex; flex-direction: column; }
.service-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  border-top: 1px solid #eaf2f8;
  padding-top: 14px;
}
.service-list li {
  position: relative;
  padding: 4px 0 4px 20px;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.5;
}
.service-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
}
.service-scope {
  margin: 14px 0 0;
  color: #7a8697;
  font-size: .82rem;
  font-style: italic;
}

/* ---------- interior page hero ---------- */

.page-hero {
  padding: 56px 0;
  background: linear-gradient(90deg, rgba(1,20,54,.90) 0 32%, rgba(1,20,54,.80) 48%,
                              rgba(1,20,54,.56) 66%, rgba(1,20,54,.12) 100%),
              url('assets/photos/hero/01-buero-team-1920.jpg') right top / cover no-repeat;
  border-bottom: 1px solid var(--line);
}
.page-hero .page-copy { max-width: 620px; }
.page-hero h1 { font-size: clamp(2.1rem, 5vw, 3.9rem); }
.page-hero p { color: rgba(255,255,255,.93); font-size: 1.05rem; }

/* ---------- services ---------- */

.service-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.notice {
  grid-column: 1 / -1;
  border: 1px solid rgba(0, 119, 163, .28);
  background: var(--cyan-soft);
  border-radius: 14px;
  padding: 24px;
  color: #2c4a58;
}
.notice strong { color: var(--cyan-ink); display: block; margin-bottom: 6px; }

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 18px;
}
.step {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
  box-shadow: var(--shadow);
}
.step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand);
  color: white;
  font-weight: 800;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
}
.step h3 { color: var(--brand); margin: 0 0 8px; font-size: 1.05rem; }
.step p { margin: 0; color: var(--muted); font-size: .95rem; }

/* ---------- about ---------- */

.about-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 50px;
  align-items: start;
}
.about-layout h2 { color: var(--brand); font-size: 1.7rem; margin-top: 0; }
.founder-card {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}
.founder-photo {
  aspect-ratio: 4/5;
  border-radius: 20px;
  background: linear-gradient(145deg, #d5ecf7, #f7fdff);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.founder-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.founder-intro { font-size: 1.06rem; color: #3a4961; }
.founder-role {
  color: var(--cyan-ink);
  font-weight: 700;
  margin: -6px 0 14px;
  font-size: .98rem;
}
.founder-card h2 { color: var(--brand); font-size: 2rem; margin: .2rem 0 1rem; }
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { padding: 8px 0 8px 32px; position: relative; color: #3b4b63; }
.checklist li svg {
  position: absolute;
  left: 0;
  top: 10px;
  width: 20px;
  height: 20px;
  color: var(--cyan-ink);
}

/* ---------- contact ---------- */

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr);
  gap: 28px;
  align-items: start;
}
.form-card,
.contact-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.form-card { padding: 28px; }
.form-card h2 { margin-top: 0; color: var(--brand); }
.contact-side { display: grid; gap: 16px; }
.contact-card { padding: 22px; display: flex; gap: 14px; align-items: flex-start; }
.contact-card svg { width: 22px; height: 22px; color: var(--cyan-ink); flex-shrink: 0; margin-top: 3px; }
.contact-card strong { color: var(--brand); display: block; margin-bottom: 4px; }
.contact-card span, .contact-card a { color: var(--muted); }
.contact-card a:hover { color: var(--brand); text-decoration: underline; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: grid; gap: 7px; }
.field.full { grid-column: 1 / -1; }
label { color: var(--brand); font-weight: 700; font-size: .92rem; }
input, select, textarea {
  width: 100%;
  border: 1px solid #ced9e3;
  background: #fbfdff;
  color: var(--text);
  border-radius: 9px;
  padding: 13px 14px;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--cyan-ink);
  box-shadow: 0 0 0 3px rgba(0, 119, 163, .12);
}
textarea { min-height: 120px; resize: vertical; }
.form-note { color: var(--muted); font-size: .83rem; margin-top: 10px; }
.required-note { color: var(--muted); font-size: .83rem; }

/* Honeypot: hidden from people, visible to naive bots. Kept out of the
   accessibility tree and out of the tab order rather than display:none,
   which some bots detect. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.consent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: start;
}
.consent input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--brand);
  flex-shrink: 0;
}
.consent label { font-weight: 500; font-size: .9rem; color: #3b4b63; }
.consent a { color: var(--cyan-ink); text-decoration: underline; }

.faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); gap: 18px; }
.faq-card { padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.faq-card h3 { color: var(--brand); margin: 0 0 8px; font-size: 1rem; }
.faq-card p { margin: 0; color: var(--muted); font-size: .95rem; }

/* ---------- alerts / status pages ---------- */

.alert {
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 26px;
  border: 1px solid;
}
.alert h2 { margin: 0 0 8px; font-size: 1.15rem; }
.alert p:last-child, .alert ul:last-child { margin-bottom: 0; }
.alert ul { margin: 8px 0 0; padding-left: 20px; }
.alert-error { background: #fff5f5; border-color: #f0c2c2; color: #8a2b2b; }
.alert-error h2 { color: #a32020; }
.alert-success { background: var(--cyan-soft); border-color: rgba(0,119,163,.3); color: #2c4a58; }
.alert-success h2 { color: var(--cyan-ink); }

.status-page { padding: 90px 0; }
.status-card {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 46px 34px;
}
.status-card .icon { margin: 0 auto 20px; width: 64px; height: 64px; }
.status-card .icon svg { width: 32px; height: 32px; }
.status-card h1 { color: var(--brand); margin: 0 0 12px; font-size: clamp(1.7rem, 4vw, 2.4rem); }
.status-card p { color: var(--muted); margin: 0 0 10px; }
.status-card .btn { margin-top: 22px; }

/* ---------- legal / prose pages ---------- */

.legal { max-width: 800px; }
.legal h2 {
  color: var(--brand);
  font-size: 1.4rem;
  margin: 42px 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--cyan-soft);
}
.legal h2:first-of-type { margin-top: 0; }
.legal h3 { color: var(--brand); font-size: 1.05rem; margin: 26px 0 8px; }
.legal p, .legal li { color: #3b4b63; }
.legal ul { padding-left: 22px; }
.legal li { margin-bottom: 7px; }
.legal a { color: var(--cyan-ink); text-decoration: underline; }
.legal address { font-style: normal; line-height: 1.8; }

/* Marks a value the business owner still has to supply. */
.todo {
  background: #fff8e1;
  border-bottom: 2px dotted #d99b00;
  color: #7a5600;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
}
.todo-banner {
  background: #fff8e1;
  border: 1px solid #f0d68a;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 30px;
  color: #7a5600;
  font-size: .92rem;
}
.todo-banner strong { color: #6b4a00; }

/* ---------- footer ---------- */

.site-footer {
  background: linear-gradient(135deg, var(--brand-dark), var(--brand));
  color: white;
}
.footer-grid {
  min-height: 180px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 30px 26px;
  padding: 44px 0;
  align-items: start;
}
.site-footer p,
.site-footer small { color: rgba(255, 255, 255, .78); }
.site-footer p { margin: 10px 0 0; font-size: .92rem; }
.footer-logo { height: 88px; width: auto; margin-bottom: 12px; }
.footer-col strong { display: block; margin-bottom: 8px; line-height: 1.35; }
.footer-link { display: block; color: white; margin: 4px 0; font-size: .95rem; line-height: 1.45; }
.footer-link:hover { text-decoration: underline; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding: 18px 0;
  text-align: center;
}

.mobile-only { display: none; }

/* ---------- responsive ----------
   The grids above wrap on their own, so these queries only handle the
   navigation, hero and the few fixed two-column layouts. */

/* Between the burger breakpoint and ~1120px the German nav labels
   ("Startseite Leistungen Über uns Kontakt") are just wide enough to push the
   header over: 999px of content into a 984px container at 1024. The width comes
   back out of the gaps and the wordmark rather than the mark, which is the one
   thing that must not shrink here. English fits either way. */
@media (min-width: 981px) and (max-width: 1120px) {
  .navbar { gap: 14px; }
  .nav-links { gap: 18px; }
  .brand img { height: 54px; }
  .brand-text { font-size: 1.3rem; }
  .header-cta { padding: 13px 16px; }
}

@media (max-width: 980px) {
  .menu-toggle { display: block; }
  .header-cta { display: none; }
  .nav-links {
    position: fixed;
    top: 96px;
    left: 16px;
    right: 16px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: white;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    border-radius: 14px;
    padding: 12px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
  }
  .nav-links.open { display: flex; }
  .lang-switch { margin-left: auto; margin-right: 2px; }
  .nav-links a { padding: 13px 10px; }
  .nav-links > a:not(.btn)::after { display: none; }
  .nav-links .mobile-only { display: flex; margin-top: 4px; }

  /* Stacked, the hero shows only a narrow vertical slice of each photograph,
     so each one is aimed at its figure, and the scrim opens up below the copy
     so a person is actually visible. */
  .hero { min-height: auto; }
  .hero-slides::after {
    background: linear-gradient(180deg, rgba(1,20,54,.88) 0 58%, rgba(1,20,54,.62) 100%);
  }
  .hero-slides img:nth-child(1) { object-position: 62% top; }
  .hero-slides img:nth-child(2) { object-position: 58% top; }
  .hero-slides img:nth-child(3) { object-position: 66% top; }
  .hero-slides img:nth-child(4) { object-position: 38% top; }
  .hero-slides img:nth-child(5) { object-position: 55% top; }
  .hero-slides img:nth-child(6) { object-position: 82% top; }
  .hero-inner { padding: 70px 0 64px; }
  .hero-copy { max-width: 680px; }
  .page-hero {
    background: linear-gradient(180deg, rgba(1,20,54,.88) 0 66%, rgba(1,20,54,.66) 100%),
                url('assets/photos/hero/01-buero-team-960.jpg') 62% top / cover no-repeat;
  }
  .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .about-layout { gap: 34px; }
  .founder-card { grid-template-columns: minmax(200px, 250px) minmax(0, 1fr); gap: 30px; }
}

@media (max-width: 620px) {
  .container { width: min(100% - 28px, var(--container)); }

  /* The mark carries the brand on a phone, so it gets the space back from the
     wordmark, the language switch and the menu button. Everything here is a
     width trade: the header must still fit a 320px viewport without scrolling. */
  .navbar { min-height: 86px; gap: 10px; }
  .nav-links { top: 86px; }
  .brand { gap: 9px; }
  .brand img { height: 54px; }
  .brand-text { font-size: 1rem; letter-spacing: -.035em; }
  .lang-switch { margin-left: auto; font-size: .78rem; gap: 0; }
  .lang-switch a { padding: 4px 5px; }
  .menu-toggle { width: 38px; height: 40px; }
  .menu-toggle span { width: 22px; }

  .hero p, .page-hero p { font-size: 1rem; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .section { padding: 58px 0; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .field.full { grid-column: auto; }
  .form-card { padding: 20px; }
  .founder-card { grid-template-columns: minmax(0, 1fr); }
  .founder-photo { max-width: 260px; width: 100%; }
  .status-card { padding: 34px 22px; }

  /* 2:1 is a desktop crop; on a phone it collapses toward a letterbox strip,
     so the frame gets taller and object-fit trims the sides instead. */
  .photo-band img { aspect-ratio: 3 / 2; }
  .photo-trio { gap: 18px; }

  .cta-band { padding: 48px 0; }
  .cta-inner { flex-direction: column; gap: 24px; text-align: center; }
  .cta-portrait { width: 136px; height: 136px; border-width: 4px; }
  .cta-actions { flex-direction: column; align-items: stretch; }
  .cta-actions .btn { width: 100%; }

  /* Footer spacing: tight inside a group, a clear rule between groups.
     The links keep a 36px tap target via padding, which costs no visual
     space because the gap between them stays closed. */
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 32px 0 26px;
    min-height: 0;
  }
  .footer-col { padding: 17px 0; border-top: 1px solid rgba(255, 255, 255, .14); }
  .footer-col:first-child { padding-top: 0; border-top: 0; }
  .footer-col strong { margin-bottom: 3px; font-size: .95rem; }
  .footer-col strong[style] { margin-top: 0 !important; }
  .footer-link { margin: 0; padding: 6px 0; line-height: 1.4; }
  .site-footer p { margin-top: 10px; }
  .footer-logo { height: 74px; }
}

@media (max-width: 400px) {
  .brand img { height: 48px; }
  .brand-text { font-size: .84rem; }
  .lang-switch { font-size: .74rem; }
  .lang-switch a { padding: 4px 4px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .btn:hover, .card:hover { transform: none; }
}

@media print {
  .site-header, .site-footer, .hero-actions, .menu-toggle { display: none; }
  body { color: #000; }
}