/* THE ALBRECHT’s EVENTS – Layout der Website. Mobil zuerst, Werte nur aus tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

/* Weiches Scrollen zu den Ankern, nur wenn Bewegung erwünscht ist */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Telefonnummer nie mitten in der Nummer umbrechen */
a[href^="tel:"] { white-space: nowrap; }

/* Sichtbarer Tastaturfokus auch für einfache Links */
a:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Sprunglink für Tastatur und Screenreader, nur bei Fokus sichtbar */
.skip-link { position: absolute; left: var(--space-3); top: calc(-1 * var(--space-8)); background: var(--paper); color: var(--ink); padding: var(--space-2) var(--space-3); z-index: 30; }
.skip-link:focus { top: var(--space-3); }

/* Nur für Screenreader */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Abschnitte: Seitenrand mobil --space-4, Inhalt max. 1100px */
.section { padding: var(--space-8) var(--space-4); }
.section__inner { max-width: 1100px; margin: 0 auto; }
.section--soft { background: var(--sage-soft); }

/* Zwei Abschnitte ohne Hintergrundfarbe hintereinander: Abstand nur einmal --space-8 */
.section:not(.section--soft):not(.section--dunkel) + .section:not(.section--soft):not(.section--dunkel) { padding-top: 0; }

.button-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

/* Überschriften nicht automatisch trennen. Lange Wörter bekommen ein ­ im HTML. */
.ae-h1, .ae-h2 { overflow-wrap: break-word; }

/* Lange Button-Texte dürfen am Handy umbrechen */
.ae-btn { text-align: center; padding-block: var(--space-2); }

/* ---------- Kopfzeile ---------- */

/* Ohne JavaScript klebt die Kopfzeile oben. Mit JavaScript ist sie fixiert,
   und der Inhalt beginnt unter ihr. */
.site-header { position: sticky; top: 0; z-index: 20; }
.js-menu .site-header { position: fixed; top: 0; left: 0; right: 0; }
.js-menu main { padding-top: calc(48px + 2 * var(--space-3) + 1px); }

/* Mobil: Logo links, Anfrage und Menü rechts, Links darunter. */
.ae-nav { display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "logo cta toggle" "links links links"; align-items: center; column-gap: var(--space-2); row-gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom-color: transparent; transition: padding .25s ease, border-color .25s ease; }
.ae-nav__logo { grid-area: logo; justify-self: start; }
.ae-nav__logo img { height: 48px; transition: height .25s ease; }
.ae-nav__cta { grid-area: cta; padding-inline: var(--space-3); }
.ae-nav__links { grid-area: links; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }

/* Nach dem ersten Scrollen: schmaler, mit feiner Linie */
.is-schmal .ae-nav { padding-block: var(--space-2); border-bottom-color: var(--line); }
.is-schmal .ae-nav__logo img { height: 40px; }

/* Menü-Button: wie die Nav-Links gesetzt, 48px hoch zum Tippen */
.nav-toggle { grid-area: toggle; min-height: 48px; padding: 0 var(--space-2); background: none; border: 0; border-radius: var(--radius-sm); font-family: var(--font-label); font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink); cursor: pointer; }
.nav-toggle[aria-expanded="true"] { text-decoration: underline; text-decoration-color: var(--sage-deep); text-underline-offset: 6px; }
.nav-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Mit JavaScript unter 800px: Links zugeklappt, aufgeklappt als Liste untereinander */
@media (max-width: 799px) {
  .js-menu .ae-nav { row-gap: 0; }
  .js-menu .ae-nav__links { flex-direction: column; gap: 0; }
  .js-menu .ae-nav__links.is-open { margin-top: var(--space-3); }
  .js-menu .ae-nav__links:not(.is-open) { display: none; }
  .js-menu .ae-nav__links li { border-top: 1px solid var(--line); }
  .js-menu .ae-nav__links a { display: block; padding: var(--space-3) 0; border-bottom: 0; }
}

/* Anker: Überschrift landet unter der schmalen Kopfzeile (65px hoch), nicht dahinter */
main > section[id] { scroll-margin-top: calc(48px + 2 * var(--space-2) + 1px); }
main > .section:not(.section--soft):not(.section--dunkel) + .section[id]:not(.section--soft):not(.section--dunkel) { scroll-margin-top: calc(48px + 2 * var(--space-2) + 1px + var(--space-6)); }

/* Feste Leiste unten am Handy. Blendet sich aus, sobald das Formular ins Bild kommt. */
.mobil-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--line); transition: transform .3s ease, visibility 0s; }
.mobil-leiste .ae-btn { width: 100%; letter-spacing: 0.12em; }
.mobil-leiste.is-versteckt { transform: translateY(100%); visibility: hidden; transition: transform .3s ease, visibility 0s .3s; }
/* Ohne JavaScript bleibt die Leiste stehen, der Footer braucht dann Platz darunter */
.hat-leiste { padding-bottom: calc(48px + 2 * var(--space-2) + 1px); }
.js-menu .hat-leiste { padding-bottom: 0; }

/* ---------- Hero ---------- */
/* Mobil: Foto randlos im Hochformat, der Text schiebt sich von unten ins Bild. */
.hero { padding-bottom: 0; }
.hero__bild { overflow: hidden; background: var(--sage-soft); }
.hero__bild img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 74% 50%; }
.hero__text { position: relative; margin: calc(-1 * var(--space-7)) var(--space-6) 0 0; padding: var(--space-5) var(--space-4) 0; background: var(--paper); }
.hero__text .ae-kicker { margin-bottom: var(--space-3); }

/* ---------- Kurz vorgestellt ---------- */
.about { display: grid; gap: var(--space-5); grid-template-areas: "kopf" "bild" "text"; }
.about__kopf { grid-area: kopf; }
.about__bild { grid-area: bild; }
.about__bild .ae-img { aspect-ratio: 2 / 3; }
.about__text { grid-area: text; }
.about__text p { margin: 0 0 var(--space-3); max-width: 36em; }
.about__text .about__unterschrift { margin-top: var(--space-4); color: var(--ink); }
.values__titel { margin-top: var(--space-7); }
.values { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.values p { margin: 0; padding-top: var(--space-3); border-top: 1px solid var(--line); }
.values strong { font-weight: 500; }

/* ---------- Leistungen: nummerierte Liste, Bild wechselnd links und rechts ---------- */
.leistungen__region { margin: var(--space-3) 0 0; max-width: 36em; }
.leistungen { list-style: none; counter-reset: leistung; margin: var(--space-7) 0 0; padding: 0; display: grid; gap: var(--space-7); }
.leistung { counter-increment: leistung; display: grid; gap: var(--space-4); scroll-margin-top: calc(48px + 2 * var(--space-2) + 1px + var(--space-5)); }
.leistung .ae-img { aspect-ratio: auto; height: auto; }
/* Mobil: Hochformate schmaler und abwechselnd links und rechts eingerückt */
.leistung:nth-child(1) .leistung__bild, .leistung:nth-child(5) .leistung__bild { margin-right: var(--space-7); }
.leistung:nth-child(4) .leistung__bild { margin-left: var(--space-7); }
.leistung__text { max-width: 30em; }
.leistung__text::before { content: counter(leistung, decimal-leading-zero); display: block; margin-bottom: var(--space-3); font-family: var(--font-serif); font-size: 64px; line-height: 1; color: var(--ink-muted); }
.leistung__text > p { margin: var(--space-2) 0 0; }
.leistung__text .leistung__bsp { margin-top: var(--space-4); font-family: var(--font-label); font-size: 13px; line-height: 16px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-muted); }

/* Ruhige Liste mit Trennlinien */
.liste { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.liste li { padding: var(--space-2) 0; border-top: 1px solid var(--line); }
.liste li:last-child { border-bottom: 1px solid var(--line); }

/* ---------- Ausgewählte Arbeiten ---------- */
/* Mobil: zwei Spalten, Querformate und einzelne Hochformate über die volle Breite. */
.arbeiten { margin-top: var(--space-6); display: grid; gap: var(--space-6); }
.arbeiten__gruppe { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: dense; gap: var(--space-2); }
.band { display: contents; }
.band figure { margin: 0; }
.band .ae-img { aspect-ratio: 4 / 5; height: 100%; }
.band .quer, .band .breit { grid-column: span 2; }
.band .quer .ae-img { aspect-ratio: 3 / 2; }
.arbeiten__link { margin: var(--space-5) 0 0; }

/* ---------- Ablauf: nummerierte Schritte ---------- */
.steps { list-style: none; counter-reset: schritt; margin: var(--space-6) 0 0; padding: 0; }
.steps li { counter-increment: schritt; display: grid; grid-template-columns: var(--space-6) 1fr; column-gap: var(--space-3); row-gap: var(--space-1); padding: var(--space-4) 0; border-top: 1px solid var(--sage); }
.steps li:last-child { border-bottom: 1px solid var(--sage); }
.steps li::before { content: counter(schritt, decimal-leading-zero); grid-row: span 2; padding-top: var(--space-2); font-family: var(--font-label); font-size: 13px; line-height: 16px; letter-spacing: 0.3em; color: var(--sage-deep); }
.steps h3, .steps p { margin: 0; grid-column: 2; }

/* ---------- Kundenstimme (dunkler Abschnitt, vorerst ausgeblendet) ---------- */
.section--dunkel { background: var(--ink); color: var(--on-dark); }
.section--dunkel .ae-kicker { color: var(--on-dark); }
.section--dunkel .ae-small { color: var(--on-dark-muted); }
.quote { margin: 0 auto; text-align: center; }
.quote blockquote p { margin: 0; }
.quote figcaption { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }

/* ---------- Anfrageformular ---------- */
.form { display: grid; gap: var(--space-5); max-width: 640px; margin-top: var(--space-6); }
.form textarea.ae-input { min-height: 144px; resize: vertical; }
.form .ae-field { max-width: none; }
/* Beim Fokus auf ein Feld mit Fehler: Feld samt Label unter der Kopfzeile zeigen */
.form input, .form select, .form textarea { scroll-margin-top: calc(48px + 2 * var(--space-2) + 1px + var(--space-6)); }
.form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.form legend { padding: 0; margin-bottom: var(--space-2); }
.ae-choice--top { align-items: flex-start; }
.ae-choice--top input { flex-shrink: 0; margin-top: var(--space-1); }
.ae-field--error .ae-select, .ae-field--error textarea.ae-input { border-color: var(--error); }
.ae-field__error { margin: 0; }
.honeypot { display: none; }
.form .ae-small { margin: 0; }

/* ---------- Rechtstexte: schmale Textspalte ---------- */
.prose > * { max-width: 40em; }
.prose h2 { margin: var(--space-6) 0 var(--space-2); }
.prose p { margin: 0 0 var(--space-3); }

/* ---------- 404 und Danke: mittig ---------- */
.center { text-align: center; }
.center .ae-lead { margin-inline: auto; }
.center .button-row { justify-content: center; }
.center .ae-script { display: block; margin-top: var(--space-5); }

/* ---------- Footer, mobil einspaltig ---------- */
.ae-footer { grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-6) var(--space-4); }
.ae-footer p + p { margin-top: var(--space-3); }
.ae-footer a:focus-visible { box-shadow: 0 0 0 2px var(--on-dark); }
.site-footer__logo { display: block; align-self: start; }

/* ---------- Ab 800px ---------- */
/* Desktop-Kopfzeile, Footer dreispaltig. Seitenrand --space-7,
   auf breiten Schirmen bleibt der Inhalt bei 1100px. */
@media (min-width: 800px) {
  .ae-nav { display: flex; padding-inline: max(var(--space-7), (100% - 1100px) / 2); }
  .ae-nav__logo img { height: 64px; }
  .is-schmal .ae-nav__logo img { height: 48px; }
  .ae-nav__links { margin-left: auto; }
  .ae-nav__cta { padding-inline: var(--space-4); }
  .nav-toggle { display: none; }
  .js-menu main { padding-top: calc(64px + 2 * var(--space-3) + 1px); }

  .mobil-leiste { display: none; }
  .hat-leiste { padding-bottom: 0; }

  .section { padding-inline: var(--space-7); }

  .about { grid-template-columns: 5fr 6fr; grid-template-rows: 1fr auto auto 1fr; grid-template-areas: "bild ." "bild kopf" "bild text" "bild ."; column-gap: var(--space-7); row-gap: var(--space-4); }
  .values { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }

  /* Arbeiten: Reihen mit gleicher Bildhöhe. Jedes Bild ist so breit, wie sein
     Seitenverhältnis es verlangt (f-150 = 3:2, f-67 = 2:3 usw.), nichts wird beschnitten. */
  .arbeiten { gap: var(--space-7); }
  .arbeiten__gruppe { grid-template-columns: 1fr; gap: var(--space-3); }
  .band { display: flex; gap: var(--space-3); }
  .band figure { flex: 1 1 0; min-width: 0; }
  .band .ae-img, .band .quer .ae-img { aspect-ratio: auto; height: 100%; }
  .band .f-150 { flex-grow: 1.5; }
  .band .f-136 { flex-grow: 1.364; }
  .band .f-75 { flex-grow: 0.75; }
  .band .f-71 { flex-grow: 0.714; }
  .band .f-67 { flex-grow: 0.667; }
  .band .f-60 { flex-grow: 0.6; }

  /* Leistungen: 12er-Raster, jede Leistung anders aufgeteilt */
  .leistungen { gap: var(--space-8); margin-top: var(--space-8); }
  .leistung { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-4); align-items: center; }
  .leistung .leistung__bild { margin: 0; grid-row: 1; }
  .leistung__text { grid-row: 1; }
  .leistung:nth-child(1) .leistung__bild { grid-column: 1 / 6; }
  .leistung:nth-child(1) .leistung__text { grid-column: 7 / 12; }
  .leistung:nth-child(2) .leistung__bild { grid-column: 6 / 13; }
  .leistung:nth-child(2) .leistung__text { grid-column: 1 / 5; }
  .leistung:nth-child(3) .leistung__bild { grid-column: 1 / 8; }
  .leistung:nth-child(3) .leistung__text { grid-column: 9 / 13; }
  .leistung:nth-child(4) .leistung__bild { grid-column: 8 / 12; }
  .leistung:nth-child(4) .leistung__text { grid-column: 2 / 7; }
  .leistung:nth-child(5) .leistung__bild { grid-column: 2 / 6; }
  .leistung:nth-child(5) .leistung__text { grid-column: 7 / 12; }

  .steps li { grid-template-columns: var(--space-7) 220px 1fr; column-gap: var(--space-5); align-items: baseline; }
  .steps li::before { grid-row: auto; padding-top: 0; }
  .steps h3 { grid-column: 2; }
  .steps p { grid-column: 3; }

  .ae-footer { grid-template-columns: 200px 1fr 1fr; gap: var(--space-6); padding: var(--space-7) max(var(--space-7), (100% - 1100px) / 2); }
}

/* Erstgespräch ab 1000px: Überschrift links, Formular rechts */
@media (min-width: 1000px) {
  .erstgespraech { display: grid; grid-template-columns: 5fr 7fr; column-gap: var(--space-7); align-items: start; }
  .erstgespraech__kopf { position: sticky; top: calc(48px + 2 * var(--space-2) + 1px + var(--space-5)); }
  .erstgespraech .form { margin-top: 0; }
}

/* Hero 800–999px: Foto breit oben, Text darunter überlappend */
@media (min-width: 800px) and (max-width: 999px) {
  .hero__bild img { aspect-ratio: 3 / 2; }
  .hero__text { margin-right: calc(100% - 640px); padding-inline: var(--space-7) var(--space-5); }
}

/* Hero ab 1000px: Foto fast randlos rechts (Andela sitzt rechts im Bild),
   Text links, ragt ins Bild hinein */
@media (min-width: 1000px) {
  .hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; max-width: 1600px; margin: 0 auto; padding: var(--space-4) var(--space-4) 0 max(var(--space-7), (100% - 1100px) / 2); }
  .hero__bild { grid-column: 5 / 13; grid-row: 1; }
  .hero__bild img { aspect-ratio: auto; height: min(78vh, 760px); min-height: 520px; object-position: 60% 50%; }
  .hero__text { grid-column: 1 / 6; grid-row: 1; margin: 0; padding: var(--space-6) var(--space-6) var(--space-6) 0; }
}

/* ---------- Bewegung (nur mit JavaScript, siehe js/motion.js) ---------- */
/* Die Klasse .bewegung setzt erst motion.js. Ohne sie ist alles sofort sichtbar. */
.bewegung .einblenden { opacity: 0; transform: translateY(16px); transition: opacity .4s ease, transform .4s ease; }
.bewegung .einblenden.ist-sichtbar { opacity: 1; transform: none; }
.bewegung main .ae-mark { background-size: 0% 100%; background-repeat: no-repeat; transition: background-size .6s ease; }
.bewegung main .ae-mark.ist-sichtbar { background-size: 100% 100%; }
.bewegung .enthuellen { overflow: hidden; clip-path: inset(100% 0 0 0); transition: clip-path .6s cubic-bezier(.2, .7, .2, 1); }
.bewegung .enthuellen.ist-sichtbar { clip-path: inset(0 0 0 0); }
.bewegung .enthuellen img, .bewegung .hero__bild img { will-change: transform; }

/* Bei „Bewegung reduzieren“: keine Übergänge */
@media (prefers-reduced-motion: reduce) {
  .ae-nav, .ae-nav__logo img, .mobil-leiste { transition: none; }
}