/* AMNI Website — konsumiert das Design System, verändert es nicht.
   Die Tokens (tokens/*.css) binden die Seitenköpfe als eigene <link>-Elemente ein
   (app/views/partials/tokens.ejs), damit sie parallel statt per @import laden. */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Kleine Schrift auf hellem Grund: --color-text-muted (#8a8079) liegt auf Sand bei
   3,7:1 und damit unter 4,5:1 (WCAG 1.4.3). Die Website hebt deshalb Rubriken,
   Kicker und Hinweise auf --color-text-secondary (D2). Dunkle Flächen setzen
   ihre eigene, spezifischere Farbe (.section--dark, .site-footer, Portal-Sidebar). */
.amni-label { color: var(--color-text-secondary); }
/* Rubrik als echte Überschrift (Minor 9): optisch wie div.amni-label */
h2.amni-label { line-height: inherit; }

.wrap { max-width: var(--container-lg); margin: 0 auto; padding: 0 var(--space-9); }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-surface); color: var(--color-text);
  padding: var(--space-4) var(--space-6); border-radius: var(--radius-sm); border-bottom: none; }
/* nur für Screenreader (gleiche Regel wie in portal.css) */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link:focus-visible { left: var(--space-5); top: var(--space-5); }

/* ── Buttons (aus components/core/Button.jsx übertragen) ─────────── */
.btn { display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-3); font-family: var(--font-body); font-weight: 500;
  line-height: 1; cursor: pointer; text-decoration: none;
  font-size: var(--text-sm); padding: 0 var(--space-6); height: 38px;
  border: 1px solid var(--color-accent); border-radius: var(--radius-sm);
  background: var(--color-accent); color: var(--color-text-on-accent);
  border-bottom-style: solid;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out); }
.btn:hover  { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--color-text-on-accent); }
.btn:active { background: var(--color-accent-press); border-color: var(--color-accent-press); transform: translateY(1px); }
.btn .ph { font-size: 1.15em; }

.btn--lg { font-size: var(--text-md); padding: 0 var(--space-8); height: 48px; }
.btn--sm { font-size: var(--text-xs); padding: 0 var(--space-4); height: 30px; }
.btn--block { display: flex; width: 100%; }

.btn--secondary { background: transparent; color: var(--color-text); border-color: var(--color-border-strong); }
.btn--secondary:hover  { background: var(--color-surface); border-color: var(--amni-neutral-400); color: var(--color-text); }
.btn--secondary:active { background: var(--color-bg-sunken); }

.btn--ghost { background: transparent; color: var(--color-accent-text); border-color: transparent; }
.btn--ghost:hover  { background: var(--color-accent-soft); color: var(--color-accent-text); }
.btn--ghost:active { background: var(--amni-rubin-200); }

.btn--inverse { background: var(--amni-neutral-50); color: var(--amni-granat-800); border-color: var(--amni-neutral-50); }
.btn--inverse:hover  { background: var(--amni-neutral-000); border-color: var(--amni-neutral-000); color: var(--amni-granat-800); }
.btn--inverse:active { background: var(--amni-neutral-200); }

/* ── Karten (aus components/core/Card.jsx übertragen) ────────────── */
.card { display: block; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-7); box-shadow: var(--shadow-sm);
  color: inherit; position: relative; overflow: hidden;
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
  border-bottom-style: solid; }
a.card:hover { border-color: var(--amni-rubin-200); box-shadow: var(--shadow-md);
  transform: translateY(-2px); color: inherit; }
.card__icon { font-size: 26px; color: var(--color-accent); display: block; margin-bottom: var(--space-5); }
.card__kicker { font-family: var(--font-label); font-size: var(--text-3xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-text-secondary); margin-bottom: var(--space-3); }
.card__title { font-size: var(--text-xl); margin-bottom: var(--space-4); color: var(--color-text); }
.card__body { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--color-text-secondary); }
.card__footer { margin-top: var(--space-6); padding-top: var(--space-5);
  border-top: 1px solid var(--color-border); font-family: var(--font-label);
  font-size: var(--text-2xs); letter-spacing: var(--tracking-wide);
  color: var(--color-accent-text); display: flex; align-items: center; gap: var(--space-3); }

/* ── Bildplätze (assets/fotos/README.md) ──────────────────────────
   Nur gerendert, wenn ein echtes Foto mit Alt-Text vorliegt; ohne Foto
   bleibt das einspaltige Layout ohne Leerfläche. Bildflächen 22 px Radius
   (--radius-xl), kein Schatten (das DS definiert keinen für Bilder).
   z-index 1 wie aller Inhalt: der fixierte Hintergrundbaum (z-index 0)
   liegt immer dahinter. */
.foto { margin: 0; position: relative; z-index: 1; }
.foto img { display: block; width: 100%; height: auto; object-fit: cover;
  border-radius: var(--radius-xl); background: var(--color-bg-sunken); }
.foto__credit { margin-top: var(--space-3); font-size: var(--text-2xs);
  color: var(--color-text-secondary); }
.foto--hero img { aspect-ratio: 4 / 5; }
.foto--ueber-amni img, .foto--leistungen img, .foto--ki-und-digitalisierung img,
.foto--kontakt img { aspect-ratio: 3 / 2; }
.foto--beratung img, .foto--enablement img, .foto--digitalisierung img { aspect-ratio: 16 / 9; }
.foto--werkbank img { aspect-ratio: 21 / 9; }

/* Breites Band zwischen zwei Abschnitten der Startseite: kein eigener Innenabstand,
   die Abschnitte davor und danach tragen ihn (80 px, mobil 48 px). Auf schmalen
   Bildschirmen wäre 21:9 nur ein Streifen, dort gilt 3:2, mittig zugeschnitten. */
.foto-band { position: relative; z-index: 1; }
@media (max-width: 720px) {
  .foto--werkbank img { aspect-ratio: 3 / 2; }
}

/* Kontakt: Foto unter den Kontaktwegen in der linken Spalte. */
.foto--kontakt { margin-top: var(--space-10); max-width: 560px; }

/* Hero mit Foto: unter 1024 px gestapelt (Foto unter Text und Aktionen),
   ab 1024 px zweispaltig mit dem Foto rechts. */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
.hero-grid > .foto--hero { max-width: 440px; }
.hero-grid--quer > .foto { max-width: var(--container-sm); }
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-11); align-items: center; }
  .hero-grid > .foto--hero, .hero-grid--quer > .foto { max-width: none; }
}

/* Kartenfotos randabfallend oben in der Karte: die Bildfläche übernimmt
   die Kartenecken (overflow: hidden), eine zweite Rundung im Inneren entfällt. */
/* Spalte statt Block: der Fließtext wächst, damit „Mehr erfahren“ in allen Karten
   einer Reihe auf derselben Höhe steht, auch wenn ein Titel zweizeilig umbricht. */
.card--foto { display: flex; flex-direction: column; }
.card--foto .card__body { flex: 1 0 auto; }
.card--foto > .foto { margin: calc(-1 * var(--space-7)) calc(-1 * var(--space-7)) var(--space-6); }
.card--foto > .foto img { border-radius: 0; }
.card--foto > .foto .foto__credit { padding: 0 var(--space-7); }

/* ── Kopfzeile (aus components/navigation/Navbar.jsx übertragen) ── */
.site-header { display: flex; align-items: center; gap: var(--space-9);
  padding: var(--space-5) var(--space-9);
  background: rgba(251, 249, 246, .88); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; z-index: 20; }
.site-brand { display: inline-flex; align-items: center; gap: var(--space-4);
  border-bottom: none; color: var(--color-text);
  font-family: var(--font-display); font-size: var(--text-lg); }
.site-brand:hover { color: var(--color-text); }
.site-nav { display: flex; gap: var(--space-7); margin-left: auto; align-items: center; }
.site-nav a { font-size: var(--text-sm); color: var(--color-text-secondary);
  border-bottom: 1px solid transparent; padding-bottom: 2px; }
.site-nav a:hover { color: var(--color-text); }
.site-nav a[aria-current="page"] { color: var(--color-text); border-bottom-color: var(--color-accent); }
.nav-toggle { display: none; background: transparent; border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm); width: 38px; height: 38px; cursor: pointer;
  color: var(--color-text); font-size: 20px; align-items: center; justify-content: center; }
.scroll-progress { position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--amni-opal-500);
  transform: scaleX(0); transform-origin: left; pointer-events: none; }

/* ── Abschnitte und Raster ────────────────────────────────────────── */
main { position: relative; z-index: 1; }
.section { padding: var(--space-12) 0; position: relative; z-index: 1; scroll-margin-top: 80px; }
.section--hero { padding: var(--space-13) 0 var(--space-12); }
.section--dark { background: var(--amni-granat-800); color: var(--amni-neutral-50); }
.section--dark .amni-label { color: rgba(251, 249, 246, .6); }
/* Text auf der dunklen Fläche: Abstufungen der Inversfarbe zentral statt inline (D10). */
.section--dark { --site-inverse-lead: color-mix(in srgb, var(--color-text-inverse) 72%, transparent);
  --site-inverse-small: color-mix(in srgb, var(--color-text-inverse) 68%, transparent); }
.dark-title { font-size: var(--text-3xl); margin-top: var(--space-5); max-width: 26ch; }
.dark-lead { margin-top: var(--space-5); max-width: 58ch; color: var(--site-inverse-lead); }

/* ── Werteband (partials/werteband.ejs) ───────────────────────────── */
.werte { margin-top: var(--space-10); }
.wert { border-top: 2px solid var(--wert-farbe); padding-top: var(--space-5); }
.wert--rubin  { --wert-farbe: var(--amni-stone-rubin-on-dark); }
.wert--opal   { --wert-farbe: var(--amni-stone-opal-on-dark); }
.wert--granat { --wert-farbe: var(--amni-stone-granat-on-dark); }
.wert__icon { font-size: 22px; color: var(--wert-farbe); }
.wert__titel { font-family: var(--font-display); font-size: var(--text-xl); margin-top: var(--space-4); }
.wert__text { font-size: var(--text-sm); color: var(--site-inverse-small); margin-top: var(--space-3); }
.section-head { display: flex; align-items: baseline; gap: var(--space-7); margin-bottom: var(--space-9); }
.section-head .amni-rule { flex: 1; }
/* Schmale Textblöcke halten die linke Kante des .wrap (D3) */
.narrow { max-width: 560px; }
.narrow--wide { max-width: 640px; }
.hero-title { font-size: var(--text-5xl); margin-top: var(--space-6); }
.hero-actions { display: flex; gap: var(--space-5); margin-top: var(--space-9); flex-wrap: wrap; }
.small-note { font-size: var(--text-xs); color: var(--color-text-secondary); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-11); }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); }

/* ── Formulare ────────────────────────────────────────────────────── */
.field { display: grid; gap: var(--space-3); }
.field > label { font-size: var(--text-sm); font-weight: 500; color: var(--color-text); }
.hint { font-size: var(--text-xs); color: var(--color-text-secondary); }
.input { font: inherit; font-size: var(--text-sm); color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5); width: 100%; }
textarea.input { resize: vertical; }
.req { color: var(--color-accent); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.form-fallback { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-3); }
.checkbox { display: flex; gap: var(--space-4); align-items: flex-start;
  font-size: var(--text-sm); color: var(--color-text-secondary); }
.checkbox input { accent-color: var(--color-accent); margin-top: 3px; }

/* ── Newsletter-Anmeldung (partials/newsletter.ejs) ───────────────────
   Feld und Knopf in einer Zeile (schmal untereinander), Einwilligung als Hinweis
   darunter. Fehler wie Field/Input aus components/forms (--color-danger). */
.newsletter { display: grid; gap: var(--space-6); }
.newsletter__titel { font-size: var(--text-xl); }
.newsletter__titel--gross { font-size: var(--text-3xl); }
.newsletter__text { margin-top: var(--space-4); color: var(--color-text-secondary); max-width: 52ch; }
.newsletter__feld { display: grid; gap: var(--space-3); }
.newsletter__label { font-size: var(--text-sm); font-weight: 500; color: var(--color-text); }
.newsletter__zeile { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.newsletter__zeile .input { flex: 1 1 16rem; min-width: 0; height: 38px; padding-top: 0; padding-bottom: 0; }
.newsletter__zeile .btn { flex: 0 0 auto; }
.newsletter__fehler { display: flex; gap: var(--space-3); align-items: baseline;
  font-size: var(--text-xs); color: var(--color-danger); }
.newsletter .input[aria-invalid="true"] { border-color: var(--color-danger); }
.newsletter__einwilligung { font-size: var(--text-xs); color: var(--color-text-secondary); max-width: 64ch; }
.newsletter-seite__text { margin-top: var(--space-6); color: var(--color-text-secondary); }
.newsletter-seite__aktion { margin-top: var(--space-8); }
.newsletter-seite__formular { margin-top: var(--space-9); }

/* ── Fußzeile ─────────────────────────────────────────────────────── */
.site-footer { background: var(--amni-granat-900); color: rgba(251, 249, 246, .7);
  padding: var(--space-11) 0 var(--space-9); position: relative; z-index: 1; }
.site-footer a { color: rgba(251, 249, 246, .75); border-bottom: none; font-size: var(--text-sm); }
.site-footer a:hover { color: var(--amni-neutral-50); }
.site-footer .amni-label { color: rgba(251, 249, 246, .5); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-9); }
.footer-col { display: grid; gap: var(--space-2); margin-top: var(--space-5); align-content: start; }
/* Zielgröße mindestens 24 px (WCAG 2.5.8), mobil 44 px (D6) */
.footer-col a { justify-self: start; padding: var(--space-1) 0; min-height: 24px; }
/* Kompaktes Newsletter-Formular unter den Spalten: Text in der ersten Spalte, Feld
   über die drei übrigen (gleiches Raster wie .footer-grid, damit die Kanten fluchten). */
.footer-newsletter { margin-top: var(--space-10); }
.footer-newsletter .newsletter { padding-top: var(--space-9); border-top: 1px solid rgba(251, 249, 246, .14);
  grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-9); align-items: start; }
.footer-newsletter .newsletter__feld { grid-column: 2 / -1; }
.site-footer .newsletter__titel { font-size: var(--text-lg); color: var(--amni-neutral-50); }
.site-footer .newsletter__text { margin-top: var(--space-3); font-size: var(--text-xs); color: inherit; max-width: 36ch; }
.site-footer .newsletter__label { font-size: var(--text-xs); font-weight: 400; color: rgba(251, 249, 246, .75); }
.site-footer .newsletter__einwilligung { color: rgba(251, 249, 246, .7); }
.site-footer .newsletter__einwilligung a { font-size: inherit; text-decoration: underline; }

/* ── Hintergrundbaum ──────────────────────────────────────────────── */
#amni-tree { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  display: flex; align-items: flex-end; justify-content: flex-end; overflow: hidden; }
#amni-tree svg { opacity: .16; margin-right: 4vw; margin-bottom: 3vh; }

/* ── Responsiv ────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .grid3 { grid-template-columns: repeat(2, 1fr); }
  .grid4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .site-nav { display: none; }
  .site-nav.is-open { display: grid; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--color-bg); border-bottom: 1px solid var(--color-border);
    padding: var(--space-6) var(--space-9); gap: var(--space-5); margin-left: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-newsletter .newsletter { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .footer-newsletter .newsletter__feld { grid-column: auto; }
}
@media (max-width: 720px) {
  .wrap { padding: 0 var(--space-6); }
  .grid2, .grid3, .grid4, .form-row { grid-template-columns: 1fr; }
  .section { padding: var(--space-10) 0; }
  .section--hero { padding: var(--space-11) 0 var(--space-10); }
  /* Lange Komposita („Familienunternehmen“ ist bei 64 px 660 px breit)
     sprengten die 375-px-Spalte: mobil eine Stufe kleiner und mit
     Silbentrennung nur an langen Wörtern statt Überlauf. */
  .hero-title { font-size: var(--text-4xl); }
  h1, h2 { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 12 5 5;
    overflow-wrap: break-word; }
  /* Baum tritt hinter den Hero-Fließtext zurück (D5) */
  #amni-tree svg { opacity: .08; margin-right: -8vw; }
  /* gestapelte Hero-Aktionen gleich breit (D8) */
  .hero-actions .btn { flex: 1 1 100%; }
  .footer-col { gap: 0; }
  .footer-col a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
  /* „Mittelstandsnewsletter“ passt eine Stufe kleiner ohne Trennung in die Spalte. */
  .newsletter__titel--gross { font-size: var(--text-2xl); }
  /* Feld und Knopf untereinander, beide volle Breite und 44 px hoch (D6). */
  .newsletter__zeile .input, .newsletter__zeile .btn { flex: 1 1 100%; height: 44px; }
}

/* Reduzierte Bewegung (D4): base.css verkürzt Übergänge bereits global;
   hier fallen zusätzlich Hover-Lift und scrollgebundene Fortschrittsleiste weg. */
@media (prefers-reduced-motion: reduce) {
  a.card:hover, .btn:active { transform: none; }
  .scroll-progress { display: none; }
}