/* Angelina Hoppe — Komponenten-Styles aus dem Design System (components/bundle.css), unverändert bis auf den Font-Import (die Schriften liegen lokal, siehe fonts.css). */

/* Angelina Hoppe — component styles. Values come from tokens.css (var(--…)). */
.ah, .ah * { box-sizing: border-box; }
body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: 18px; line-height: 28px; -webkit-font-smoothing: antialiased; }
.ah-pad { padding: var(--space-32); }

/* ---------- type helpers ---------- */
.ah-display { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: -0.02em; line-height: .88; margin: 0; }
.ah-h1 { font-family: var(--font-display); font-size: clamp(36px, 5vw, 56px); line-height: 1; letter-spacing: -0.015em; margin: 0; font-weight: 400; }
.ah-h2 { font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 36px); line-height: 1.05; letter-spacing: -0.01em; margin: 0; font-weight: 400; }
.ah-h3 { font-family: var(--font-display); font-size: 22px; line-height: 1.2; margin: 0; font-weight: 400; }
.ah-label { font-family: var(--font-mono); font-weight: 500; font-size: 13px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; }
.ah-lead { font-family: var(--font-sans); font-size: clamp(19px, 1.8vw, 22px); line-height: 1.45; margin: 0; }
.ah-body { font-family: var(--font-sans); font-size: 18px; line-height: 28px; margin: 0; }
.ah-muted { color: var(--ink-muted); }
.ah-accent-word { font-family: var(--font-sans); font-style: italic; text-transform: none; letter-spacing: -0.03em; font-weight: 300; }
.ah-dot { color: var(--accent); }

/* ---------- focus ---------- */
.ah :focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 3px; }
.ah-on-color :focus-visible { outline-color: var(--focus-ring-on-color); }
.ah-on-dark :focus-visible { outline-color: var(--focus-ring-on-dark); }
.ah-on-blue :focus-visible { outline-color: var(--focus-ring-on-blue); }

/* ---------- Button ---------- */
.ah-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-12); font-family: var(--font-display); font-size: 15px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; padding: 22px 32px; border: var(--border-strong) solid transparent; border-radius: var(--radius-none); cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
.ah-btn-lg { font-size: 17px; padding: 28px 44px; }
.ah-btn-sm { font-size: 13px; padding: 14px 20px; }
.ah-btn-primary { background: var(--accent); color: var(--on-accent); }
.ah-btn-primary:hover { background: var(--ink); color: var(--ink-inverse); }
.ah-btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.ah-btn-secondary:hover { background: var(--ink); color: var(--ink-inverse); }
.ah-btn-inverse { background: var(--white); color: var(--ink); }
.ah-btn-inverse:hover { background: var(--ink); color: var(--ink-inverse); }
.ah-btn-blue { background: var(--cobalt); color: var(--ink-inverse); }
.ah-btn-blue:hover { background: var(--ink); color: var(--ink-inverse); }
.ah-btn-arrow { display: inline-block; transition: transform .18s ease; }
.ah-btn:hover .ah-btn-arrow { transform: translateX(4px); }
.ah-btn[disabled] { opacity: .4; cursor: not-allowed; }

/* ---------- TextLink ---------- */
.ah-link { color: var(--link); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: var(--border-strong); text-underline-offset: 4px; }
.ah-link:hover { background: var(--highlight-orange); color: var(--ink); }

/* ---------- Highlight ---------- */
.ah-hl { color: var(--ink); padding: 0 .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ah-hl-orange { background: var(--highlight-orange); }
.ah-hl-blue { background: var(--highlight-blue); color: var(--ink-inverse); }

/* ---------- Eyebrow / Tag ---------- */
.ah-eyebrow { display: inline-block; font-family: var(--font-mono); font-weight: 500; font-size: 13px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); }
.ah-eyebrow-ink { color: var(--ink); }
.ah-eyebrow-inverse { color: var(--ink-inverse); }
.ah-tag { display: inline-block; font-family: var(--font-mono); font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px; background: var(--surface-white); color: var(--ink); }
.ah-tag-orange { background: var(--accent); }
.ah-tag-ink { background: var(--ink); color: var(--ink-inverse); }
.ah-tag-blue { background: var(--cobalt); color: var(--ink-inverse); }

/* ---------- Header ---------- */
.ah-header { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); padding: var(--space-24) var(--margin-desktop); background: var(--surface); }
.ah-header-overlay { background: transparent; color: var(--ink-inverse); }
.ah-wordmark { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.02em; color: inherit; text-decoration: none; white-space: nowrap; }
.ah-nav { display: flex; align-items: center; gap: var(--space-32); }
.ah-nav a { font-family: var(--font-mono); font-weight: 500; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: inherit; text-decoration: none; padding: 6px 0; border-bottom: var(--border-strong) solid transparent; }
.ah-nav a:hover, .ah-nav a[aria-current="page"] { border-bottom-color: var(--accent); }
.ah-menu-btn { display: none; background: none; border: var(--border-strong) solid currentColor; color: inherit; font-family: var(--font-mono); font-weight: 500; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; padding: 10px 14px; cursor: pointer; }
@media (max-width: 960px) {
  .ah-header { padding: var(--space-16) var(--margin-mobile); }
  .ah-nav { display: none; }
  .ah-menu-btn { display: inline-block; }
}

/* ---------- Marquee ---------- */
.ah-marquee { overflow: hidden; white-space: nowrap; padding: 16px 0; background: var(--surface-stage); color: var(--ink-inverse); }
.ah-marquee-orange { background: var(--accent); color: var(--ink); }
.ah-marquee-blue { background: var(--surface-blue); color: var(--ink-inverse); }
.ah-marquee-track { display: inline-flex; animation: ah-marquee 40s linear infinite; }
.ah-marquee-item { font-family: var(--font-display); font-size: 22px; line-height: 1; letter-spacing: .02em; text-transform: uppercase; padding-right: 28px; }
.ah-marquee-sep { padding-right: 28px; color: var(--accent); }
.ah-marquee-orange .ah-marquee-sep, .ah-marquee-blue .ah-marquee-sep { color: inherit; }
.ah-marquee-item:nth-child(4n+1) { color: var(--orange); }
.ah-marquee .ah-marquee-sep { color: var(--ink-inverse-muted); }
.ah-marquee-orange .ah-marquee-item, .ah-marquee-blue .ah-marquee-item { color: inherit; }
@keyframes ah-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ah-marquee-track { animation: none; } }

/* ---------- Image slot (placeholder until real photos) ---------- */
.ah-img { position: relative; overflow: hidden; background: var(--surface-stage-raised); }
.ah-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ah-img-mono img { filter: grayscale(1) contrast(1.05); }
.ah-img-ph { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: var(--space-16); background: var(--surface-stage-raised); color: var(--ink-inverse); }
.ah-img-ph span { font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- Hero ---------- */
.ah-hero { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); padding: 0 var(--margin-desktop) var(--space-96); min-height: 640px; align-content: end; }
.ah-hero-overlay { color: var(--ink-inverse); background: var(--surface-stage); overflow: hidden; }
.ah-hero-overlay > .ah-img { position: absolute; inset: 0; }
.ah-hero-overlay > .ah-img::after { content: ""; position: absolute; inset: 0; background: rgba(30, 30, 30, .45); }
.ah-hero-text { position: relative; grid-column: 6 / span 7; display: grid; gap: var(--space-32); padding-top: var(--space-192); }
.ah-hero-title { font-size: clamp(56px, 8.2vw, 152px); }
.ah-hero-split { background: var(--surface); align-content: center; padding-top: var(--space-64); }
.ah-hero-split > .ah-img { grid-column: 1 / span 5; grid-row: 1; align-self: stretch; min-height: 560px; }
.ah-hero-split .ah-hero-text { grid-column: 6 / span 7; grid-row: 1; padding-top: 0; align-self: center; }
.ah-hero-split .ah-hero-title { font-size: clamp(48px, 6.4vw, 112px); }
@media (max-width: 960px) {
  .ah-hero { grid-template-columns: 1fr; padding: 0 var(--margin-mobile) var(--space-64); min-height: 0; }
  .ah-hero-text, .ah-hero-split .ah-hero-text, .ah-hero-split > .ah-img { grid-column: 1; grid-row: auto; }
  .ah-hero-text { padding-top: var(--space-128); }
  .ah-hero-split > .ah-img { min-height: 380px; margin-bottom: var(--space-32); }
}

/* ---------- OfferTile ---------- */
.ah-offers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.ah-offer { display: flex; flex-direction: column; gap: var(--space-24); padding: var(--space-48); min-height: 520px; text-decoration: none; }
.ah-offer-orange { background: var(--surface-signal); color: var(--ink); }
.ah-offer-blue { background: var(--surface-blue); color: var(--ink-inverse); }
.ah-offer-white { background: var(--surface-white); color: var(--ink); }
.ah-offer-stage { background: var(--surface-stage); color: var(--ink-inverse); }
.ah-offer-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-16); }
.ah-offer-no { font-family: var(--font-mono); font-weight: 500; font-size: 13px; letter-spacing: .06em; }
.ah-offer-title { font-family: var(--font-display); font-size: clamp(36px, 4.4vw, 64px); line-height: .95; letter-spacing: -0.02em; margin: 0; font-weight: 400; }
.ah-offer-text { font-size: 18px; line-height: 28px; margin: 0; max-width: 46ch; }
.ah-offer-meta { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.ah-offer-meta .ah-tag { background: transparent; border: 1px solid currentColor; color: inherit; }
.ah-offer-foot { margin-top: auto; }
.ah-offer-orange .ah-btn { background: var(--ink); color: var(--ink-inverse); }
.ah-offer-orange .ah-btn:hover { background: var(--white); color: var(--ink); }
.ah-offer-blue .ah-btn { background: var(--white); color: var(--ink); }
.ah-offer-blue .ah-btn:hover { background: var(--accent); color: var(--on-accent); }
.ah-offer-stage .ah-btn { background: var(--accent); color: var(--on-accent); }
.ah-offer-stage .ah-btn:hover { background: var(--white); color: var(--ink); }
.ah-offer-no { opacity: 1; }
@media (max-width: 960px) { .ah-offers { grid-template-columns: 1fr; } .ah-offer { padding: var(--space-32); min-height: 0; } }

/* ---------- ServiceList (MXM) ---------- */
.ah-services { display: grid; }
.ah-service-row { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gutter); padding: var(--space-32) 0; border-top: var(--border-hairline) solid var(--hairline); }
.ah-service-row:last-child { border-bottom: var(--border-hairline) solid var(--hairline); }
.ah-service-label { display: flex; gap: var(--space-16); align-items: baseline; font-family: var(--font-display); font-size: 22px; line-height: 1.2; text-transform: uppercase; }
.ah-service-no { font-size: 13px; letter-spacing: .08em; color: var(--accent-text); }
.ah-service-items { font-family: var(--font-sans); font-size: 18px; line-height: 28px; margin: 0; }
.ah-services-stage { background: var(--surface-stage); color: var(--ink-inverse); }
.ah-services-stage .ah-service-row { border-color: var(--hairline-inverse); }
.ah-services-stage .ah-service-no { color: var(--accent); }
@media (max-width: 640px) { .ah-service-row { grid-template-columns: 1fr; gap: var(--space-8); } }

/* ---------- WorkGrid (Blue Flame) ---------- */
.ah-work { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-12); }
.ah-work-tile { aspect-ratio: 4 / 5; position: relative; text-decoration: none; color: inherit; }
.ah-work-tile .ah-img { position: absolute; inset: 0; }
.ah-work-text { display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-32); }
.ah-work-text.orange { background: var(--surface-signal); color: var(--ink); }
.ah-work-text.blue { background: var(--surface-blue); color: var(--ink-inverse); }
.ah-work-text.stage { background: var(--surface-stage); color: var(--ink-inverse); }
.ah-work-text.beige { background: var(--surface-white); color: var(--ink); }
.ah-work-no { font-family: var(--font-mono); font-weight: 500; font-size: 13px; letter-spacing: .06em; align-self: flex-end; }
.ah-work-title { font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 34px); line-height: 1.05; margin: 0; font-weight: 400; }
.ah-work-title::before { content: "[ "; } .ah-work-title::after { content: " ]"; }
.ah-work-desc { font-size: 16px; line-height: 24px; margin: 0; }
.ah-work-cta { margin-top: auto; font-family: var(--font-mono); font-weight: 500; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; }
.ah-work-tile:hover .ah-img img { transform: scale(1.03); }
.ah-work-tile .ah-img img { transition: transform .4s ease; }
@media (max-width: 960px) { .ah-work { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .ah-work { grid-template-columns: 1fr; } .ah-work-tile { aspect-ratio: auto; min-height: 360px; } }

/* ---------- Testimonial ---------- */
.ah-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.ah-quote { display: flex; flex-direction: column; gap: var(--space-24); padding: var(--space-32); background: var(--surface); margin: 0; }
.ah-quote-white { background: var(--surface-white); }
.ah-quote-stage { background: var(--surface-stage-raised); color: var(--ink-inverse); }
.ah-quote-stage .ah-quote-role { color: var(--ink-inverse-muted); }
.ah-quote-mark { font-family: var(--font-display); font-size: 72px; line-height: .6; color: var(--accent); height: 36px; }
.ah-quote blockquote { margin: 0; font-family: var(--font-sans); font-style: italic; font-weight: 300; font-size: clamp(22px, 2vw, 26px); line-height: 1.3; }
.ah-quote figcaption { margin-top: auto; display: flex; gap: var(--space-12); align-items: center; }
.ah-quote-avatar { width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--cobalt); overflow: hidden; flex: none; }
.ah-quote-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ah-quote-name { font-family: var(--font-mono); font-weight: 500; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; display: block; }
.ah-quote-role { font-size: 14px; line-height: 20px; color: var(--ink-muted); display: block; }
@media (max-width: 960px) { .ah-quotes { grid-template-columns: 1fr; } }

/* ---------- Timeline ---------- */
.ah-timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--ah-cols, 5), 1fr); }
.ah-tl-item { position: relative; padding: var(--space-32) var(--space-24) 0 0; border-top: var(--border-hairline) solid var(--hairline); }
.ah-tl-item::before { content: ""; position: absolute; top: -7px; left: 0; width: 13px; height: 13px; border-radius: var(--radius-full); background: var(--ink); }
.ah-tl-item.is-now::before { background: var(--accent); width: 17px; height: 17px; top: -9px; }
.ah-tl-year { font-family: var(--font-display); font-size: clamp(40px, 4.2vw, 64px); line-height: .9; letter-spacing: -0.02em; display: block; }
.ah-tl-brand { display: block; margin-top: var(--space-16); font-family: var(--font-mono); font-weight: 500; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.ah-tl-role { display: block; margin-top: var(--space-4); font-size: 16px; line-height: 24px; color: var(--ink-muted); }
.ah-tl-item.is-now .ah-tl-year { color: var(--ink); }
@media (max-width: 960px) {
  .ah-timeline { grid-template-columns: 1fr; border-left: var(--border-hairline) solid var(--hairline); margin-left: 8px; }
  .ah-tl-item { border-top: 0; padding: 0 0 var(--space-32) var(--space-32); }
  .ah-tl-item::before { top: 6px; left: -7px; }
  .ah-tl-item.is-now::before { left: -9px; }
}

/* ---------- Accordion ---------- */
.ah-acc { border-top: var(--border-hairline) solid var(--hairline); }
.ah-acc-item { border-bottom: var(--border-hairline) solid var(--hairline); }
.ah-acc-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--space-24); padding: var(--space-24) 0; background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--font-display); font-size: 22px; line-height: 1.2; color: var(--ink); }
.ah-acc-btn:hover, .ah-acc-btn[aria-expanded="true"] { color: var(--accent-text); }
.ah-acc-icon { position: relative; width: 20px; height: 20px; flex: none; transition: transform .2s ease; }
.ah-acc-icon::before, .ah-acc-icon::after { content: ""; position: absolute; background: var(--ink); left: 0; right: 0; top: 9px; height: 2px; }
.ah-acc-icon::after { transform: rotate(90deg); }
.ah-acc-btn[aria-expanded="true"] .ah-acc-icon { transform: rotate(45deg); }
.ah-acc-panel { padding: 0 0 var(--space-32); max-width: var(--text-max); }
.ah-acc-panel p { margin: 0 0 var(--space-16); }

/* ---------- BookingBlock ---------- */
.ah-booking { background: var(--surface-signal); color: var(--ink); padding: var(--space-128) var(--margin-desktop); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: var(--space-48); }
.ah-booking-title { grid-column: 1 / -1; font-size: clamp(56px, 9vw, 152px); text-transform: none; }
.ah-booking-copy { grid-column: 1 / span 5; display: grid; gap: var(--space-24); align-content: start; }
.ah-booking-embed { grid-column: 7 / span 6; min-height: 560px; background: var(--white); position: relative; }
.ah-booking-embed iframe { width: 100%; height: 100%; min-height: 640px; border: 0; display: block; }
.ah-booking-slot { position: absolute; inset: 0; display: grid; place-content: center; gap: var(--space-12); text-align: center; padding: var(--space-32); color: var(--ink); }
.ah-booking-slot .ah-label { color: var(--ink-muted); }
.ah-booking-alt { font-size: 16px; line-height: 24px; }
.ah-booking-alt a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (max-width: 960px) {
  .ah-booking { grid-template-columns: 1fr; padding: var(--space-96) var(--margin-mobile); }
  .ah-booking-copy, .ah-booking-embed { grid-column: 1; }
}

/* ---------- Section frame (for previews and pages) ---------- */
.ah-section { padding: var(--space-128) var(--margin-desktop); }
.ah-section-white { background: var(--surface-white); }
.ah-section-stage { background: var(--surface-stage); color: var(--ink-inverse); }
.ah-section-stage .ah-link { color: var(--link-on-stage); }
@media (max-width: 960px) { .ah-section { padding: var(--space-96) var(--margin-mobile); } }
@media (max-width: 640px) { .ah-header .ah-btn { display: none; } .ah-wordmark { font-size: 19px; } }

/* ---------- Scribble (Permanent Marker) ---------- */
.ah-scribble { display: inline-block; font-family: var(--font-marker); font-size: 30px; line-height: 1.1; color: var(--ink); transform: rotate(-4deg); transform-origin: left center; }
.ah-scribble-s { font-size: 20px; }
.ah-scribble-orange { color: var(--accent); }
.ah-scribble-blue { color: var(--cobalt); }
.ah-scribble-white { color: var(--white); }
.ah-scribble-arrow { display: inline-block; margin-right: 6px; }
.ah-circled { position: relative; display: inline-block; }
.ah-circled svg { position: absolute; left: -10%; top: -18%; width: 120%; height: 136%; overflow: visible; pointer-events: none; }
.ah-circled path { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ah-circled-blue path { stroke: var(--cobalt); }
.ah-eyebrow-glow { color: var(--accent); }