/* Breakpoints: 1050px (nav switch + single columns), 760px (phones), 390px (small phones). */
@media (max-width: 1050px) {
  .header-inner {
    grid-template-columns: 1fr auto;
  }

  .desktop-nav,
  .header-cta {
    display: none;
  }

  .menu-toggle {
    display: grid;
    width: 48px;
    height: 48px;
    padding: 0;
    place-content: center;
    gap: 5px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    color: var(--green-deep);
    cursor: pointer;
    transition:
      transform var(--motion-base) var(--ease-spring),
      border-color var(--motion-base) var(--ease-smooth),
      background-color var(--motion-base) var(--ease-smooth);
  }

  @media (hover: hover) and (pointer: fine) {
    .menu-toggle:hover {
      transform: scale(1.045);
      border-color: color-mix(in srgb, var(--green) 35%, transparent);
      background: rgba(255, 255, 255, 0.78);
    }
  }

  .menu-toggle span {
    width: 20px;
    height: 1.5px;
    background: currentColor;
    transform-origin: center;
    transition:
      transform var(--motion-base) var(--ease-spring),
      opacity var(--motion-fast) ease;
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }

  .mobile-nav {
    position: fixed;
    top: var(--header-height);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    display: block;
    overflow-y: auto;
    background: rgba(251, 247, 239, 0.985);
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-14px);
    will-change: opacity, transform;
    transition:
      opacity var(--motion-base) var(--ease-smooth),
      transform var(--motion-base) var(--ease-smooth),
      visibility 0s linear var(--motion-base);
  }

  .mobile-nav[data-state="opening"],
  .mobile-nav[data-state="closing"] {
    visibility: visible;
  }

  .mobile-nav[data-state="open"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
  }

  .mobile-nav[hidden] {
    display: none;
  }

  .mobile-nav-inner {
    width: min(calc(100% - 48px), 720px);
    margin-inline: auto;
    padding: 1rem 0 3rem;
  }

  .mobile-nav-inner > a:not(.button) {
    min-height: 58px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border);
    font-family: "Lora", Georgia, serif;
    font-size: 1.25rem;
    text-decoration: none;
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity var(--motion-base) var(--ease-smooth),
      transform var(--motion-base) var(--ease-smooth),
      color var(--motion-fast) ease;
  }

  .mobile-nav[data-state="open"] .mobile-nav-inner > a {
    opacity: 1;
    transform: translateY(0);
  }

  .mobile-nav[data-state="open"] .mobile-nav-inner > a:nth-child(2) { transition-delay: 35ms; }
  .mobile-nav[data-state="open"] .mobile-nav-inner > a:nth-child(3) { transition-delay: 70ms; }
  .mobile-nav[data-state="open"] .mobile-nav-inner > a:nth-child(4) { transition-delay: 105ms; }
  .mobile-nav[data-state="open"] .mobile-nav-inner > a:nth-child(5) { transition-delay: 140ms; }
  .mobile-nav[data-state="open"] .mobile-nav-inner > a:nth-child(6) { transition-delay: 175ms; }

  .mobile-nav-inner > a[aria-current="page"] {
    color: var(--green-deep);
    font-weight: 700;
  }

  .mobile-nav-cta {
    width: 100%;
    margin-top: 1.5rem;
  }

  /* Zwischen 760px und 1050px bleibt der Hero zweispaltig, aber enger. Die
     gekippte Notizkarte hat hier keinen Platz mehr und wird ausgeblendet. */
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.74fr);
    gap: clamp(1.5rem, 4vw, 3rem);
  }

  .hero-note-card {
    display: none;
  }

  /* Vertrauensleiste: unterhalb von 1050px passen die vier Punkte nicht mehr
     in eine Zeile. Zwei mal zwei ist gewollt, Trennlinie nur zwischen den
     Spalten und zwischen den Zeilen. */
  .trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }

  .trust-grid span {
    min-height: 56px;
    gap: 0.55rem;
    padding: 0.65rem 0.8rem;
    border-left: 0;
    border-bottom: 1px solid var(--border);
  }

  .trust-grid span:nth-child(2n) {
    border-left: 1px solid var(--border);
  }

  .trust-grid span:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .about-body,
  .lead-grid {
    grid-template-columns: 1fr;
  }

  .about-portrait {
    width: min(100%, 520px);
    margin-inline: auto;
  }

  .about-credentials {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 1.8rem;
  }

  .process-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .process-intro {
    position: static;
  }

  .process-timeline {
    padding-bottom: 0;
  }

  .process-timeline-item {
    min-height: 180px;
  }

  .process .section-heading {
    max-width: 640px;
  }

  .process-cta {
    margin-top: 1.4rem;
  }

  .primary-offer {
    grid-template-columns: 1fr;
  }

  .results-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .results-intro {
    position: static;
  }

  .offer-row {
    gap: clamp(1.75rem, 4vw, 3rem);
  }

  .offer-row-number {
    font-size: clamp(2.5rem, 2vw + 1.75rem, 3.75rem);
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Ab hier wird die Hero-Fotospalte zu schmal fuer eine ruhige Komposition –
   der Hero stapelt darum schon bei 900px, nicht erst bei 760px. Die uebrigen
   Mobil-Regeln (Schriftgroessen, Nav) bleiben bei 760px. */
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .hero-media {
    grid-row: 2;
  }

  .hero-copy {
    padding-block: clamp(1.25rem, 3vw, 2.25rem) 0;
  }

  .hero-composition {
    width: min(100%, 24rem);
    margin-inline: auto;
    margin-block: clamp(1.5rem, 4vw, 2.5rem) 0.5rem;
  }

  .hero-title {
    max-width: none;
  }

  .hero-deco-arc {
    display: none;
  }

  .hero-atmosphere-blob {
    opacity: 0.35;
  }

  .trust-strip {
    margin-top: clamp(1.5rem, 5vw, 3rem);
  }
}

/* Die Hero-Komposition wird vor dem einspaltigen Layout bewusst reduziert:
   Portrait und Notiz bleiben lesbar, ohne die Textspalte zu bedrängen. */
@media (max-width: 1050px) and (min-width: 901px) {
  .section.hero {
    min-height: 0;
    padding-block: 4.5rem 8rem;
  }

  .hero-grid {
    width: min(calc(100% - 5rem), 75rem);
    grid-template-columns: minmax(0, 1.08fr) minmax(19rem, 0.92fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    min-height: 0;
  }

  .hero-title {
    font-size: clamp(2.85rem, 2rem + 2.7vw, 4.1rem);
  }

  .hero-composition {
    width: min(100%, 23rem);
    margin-right: 2.5rem;
  }

  .hero-note-card {
    display: flex;
    right: -34%;
    width: 7.5rem;
  }

  .hero-note-script {
    font-size: 1.45rem;
  }

  .hero-deco-branch {
    left: -14%;
    bottom: 18%;
    width: 6rem;
  }

  .trust-strip {
    margin-top: -3.5rem;
  }

  .trust-grid {
    width: min(calc(100% - 5rem), 75rem);
  }
}

@media (max-width: 900px) {
  .section.hero {
    min-height: 0;
    padding-block: 3.75rem 3rem;
  }

  .hero-grid {
    width: min(calc(100% - 3rem), 42rem);
    min-height: 0;
  }

  .hero-title {
    max-width: 14ch;
    font-size: clamp(2.7rem, 8vw, 4rem) !important;
  }

  .hero-title span {
    display: inline;
    white-space: normal !important;
  }

  .hero-media {
    place-items: center;
  }

  .hero-composition {
    width: min(100%, 25rem);
    margin: 2.5rem auto 0;
  }

  .hero-note-card {
    display: flex;
    right: -30%;
    width: 7.25rem;
    min-height: 8rem;
  }

  .hero-note-script {
    font-size: 1.38rem;
  }

  .hero-deco-branch {
    left: -10%;
    bottom: 18%;
    width: 5.5rem;
  }

  .trust-strip {
    margin-top: 2.5rem;
    padding-bottom: 3rem;
  }

  .trust-grid {
    width: min(calc(100% - 3rem), 42rem);
  }
}

@media (max-width: 760px) {
  .hero-composition {
    width: min(100%, 20.5rem);
    transform: none;
  }

  .hero-deco-panel--rear {
    display: none;
  }

  .hero-deco-panel:not(.hero-deco-panel--rear) {
    top: 8%;
    right: -14%;
    width: 56%;
    height: 76%;
  }

}

@media (max-width: 760px) {
  .section.hero {
    padding-inline: 20px;
  }

  body {
    font-size: 17px;
    line-height: 1.62;
  }

  .container,
  .narrow,
  .faq-wrap {
    width: min(calc(100% - 40px), var(--container));
  }

  .footer-container {
    width: calc(100% - 40px);
  }

  .section {
    padding-block: 4rem;
  }

  .section-anchor {
    scroll-margin-top: calc(var(--header-height) + 12px);
  }

  .header-inner {
    gap: 1rem;
  }

  .brand-name {
    font-size: 1.18rem;
  }

  .brand-suffix {
    font-size: 0.49rem;
    letter-spacing: 0.16em;
  }

  .menu-toggle {
    width: 44px;
    height: 44px;
  }

  .section-heading {
    margin-bottom: 2.4rem;
  }

  .button {
    min-height: 50px;
    padding: 0.85rem 1.2rem;
    font-size: 0.93rem;
  }

  .button-row {
    align-items: stretch;
  }

  /* Hero: eine Spalte. Die getönte Fläche bleibt randlos und trägt das Foto
     weiterhin bodenbündig – nur eben unter dem Text statt daneben. */
  :root {
    --page-gutter: 20px;
    --page-inset: 24px;
  }

  /* Die Haarlinie ergibt in einer Spalte keinen Bundsteg mehr. */
  .hero::after {
    display: none;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    width: 100%;
    min-width: 0;
  }

  .hero-copy {
    min-width: 0;
    padding-block: 2.6rem 2.4rem;
  }

  .hero-title {
    max-width: 100%;
    font-size: clamp(2.2rem, 9vw, 3.3rem) !important;
    overflow-wrap: anywhere;
  }

  .hero-lead {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .hero-actions {
    align-items: stretch;
    gap: 0.6rem;
  }

  .hero-actions .button {
    width: 100%;
  }

  .hero-note {
    max-width: none;
    text-align: center;
  }

  .hero-secondary-link {
    justify-content: center;
    width: 100%;
  }

  .hero-media {
    grid-row: 2;
    padding: 0;
  }

  .hero-composition {
    width: min(100%, 23rem);
    margin-block: 1.25rem 0.5rem;
  }

  /* Auf einer Spalte nur die zwei ruhigen Deko-Elemente behalten. */
  .hero-deco-arc,
  .hero-note-card {
    display: none;
  }

  /* Auf schmalen Screens bleibt der Zweig ein kleiner Akzent an der
     Fotoecke, statt den Textbereich zu überlagern. */
  .hero-deco-branch {
    width: clamp(56px, 16vw, 80px);
    left: -5%;
    bottom: 16%;
  }

  .hero-atmosphere-blob {
    opacity: 0.3;
  }

  .trust-strip {
    margin-top: 2rem;
  }

  .brand-logo {
    height: 40px;
  }

  .brand-logo-only .brand-logo {
    height: 50px;
  }

  .brand {
    gap: 0.55rem;
  }

  /* Problem */
  .problem-list {
    margin-top: 2rem;
  }

  .problem-list li {
    padding: 1rem 0 1rem 1.5rem;
    font-size: 1.14rem;
  }

  .statement {
    margin-top: 2rem;
    font-size: 1.25rem;
  }

  /* About */
  .about-body {
    gap: 2.4rem;
  }

  .about-portrait {
    aspect-ratio: 1 / 1;
  }

  .about-text > p {
    font-size: 1rem;
  }

  .credentials-ledger li {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }

  .credentials-label {
    align-self: start;
  }

  .credential-detail,
  .credential-note,
  .credentials-ledger a {
    grid-row: auto;
    grid-column: 1;
  }

  /* ABEX: same idea stacked – big apricot initial, ending on its baseline,
     description underneath. Kein Hoch-Tief-Versatz auf schmalen Displays. */
  .abex-steps {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 7vw, 2.75rem);
  }

  .abex-steps li {
    padding-block: 0;
    border-top: 0;
  }

  .abex-step-heading {
    margin-bottom: 0.6rem;
  }

  .abex-step-letter {
    font-size: clamp(3.5rem, 17vw, 5.5rem);
  }

  .abex-step-rest {
    font-size: 1.22rem;
  }

  .abex-steps p {
    font-size: 0.93rem;
  }

  /* Process */
  .process .section-heading {
    text-align: left;
  }

  .process-cta .button {
    width: 100%;
  }

  .process-timeline {
    --timeline-left: 24px;
    --timeline-start: 24px;
  }

  .process-timeline-item {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 1.15rem;
    min-height: 0;
  }

  .process-marker {
    width: 48px;
    height: 48px;
    box-shadow: 0 0 0 6px var(--timeline-track);
  }

  .process-marker-num {
    font-size: 0.66rem;
  }

  .process-marker-check {
    width: 20px;
    height: 20px;
  }

  .process-timeline-item.is-active .process-marker {
    box-shadow:
      0 0 0 6px var(--timeline-track),
      0 0 0 12px color-mix(in srgb, var(--sage) 24%, transparent);
  }

  .process-timeline-copy {
    padding: 0 0 2.2rem;
  }

  .process-timeline h3 {
    font-size: 1.3rem;
  }

  .process-timeline-copy > p:last-child {
    font-size: 0.94rem;
  }

  /* Main offer */
  .primary-offer {
    padding: 0;
    border-radius: 26px;
  }

  .offer-letter,
  .offer-details {
    padding: 1.7rem 1.4rem;
  }

  .offer-media {
    border-radius: 18px 18px 6px 18px;
  }

  .offer-media img {
    max-height: 320px;
  }

  .offer-steps {
    margin: 1.5rem 0 1.7rem;
  }

  .offer-steps li {
    font-size: 0.94rem;
  }

  .offer-actions .button {
    width: 100%;
  }

  .offer-actions .cta-note {
    max-width: none;
    text-align: center;
  }

  /* Results */
  .results-list li {
    gap: 1rem;
    padding: 1.1rem 0.1rem;
    font-size: 1.06rem;
  }

  /* Other offers: stacked, image always on top regardless of the
     desktop left/right alternation – --media-left's order:-1 already
     matches that, the base row just needs the same order here. */
  .offer-storyboard {
    margin-top: 2.2rem;
  }

  .offer-row {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding-block: 2.2rem;
  }

  .offer-row-media {
    order: -1;
  }

  .offer-row-content {
    gap: 1rem;
  }

  .offer-row-number {
    font-size: 2.25rem;
  }

  /* Instagram */
  .instagram-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .instagram-section .button {
    width: 100%;
  }

  .instagram-handle {
    max-width: 100%;
    font-size: 0.7rem;
  }

  /* FAQ */
  .faq-list summary {
    min-height: 62px;
    padding: 0.9rem 1rem 0.9rem 1.15rem;
    font-size: 1.02rem;
  }

  .faq-answer-inner {
    padding: 0 3.65rem 1.2rem 1.15rem;
  }

  .faq-answer-inner p {
    font-size: 0.94rem;
  }

  /* Final CTA */
  .final-actions {
    flex-direction: column;
  }

  .final-actions .button,
  .final-actions .text-link-light {
    width: 100%;
    justify-content: center;
  }

  /* Footer */
  .site-footer {
    padding-top: 3.25rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }

  .site-footer li + li {
    margin-top: 0;
  }

  .site-footer li a {
    min-height: 44px;
    display: flex;
    align-items: center;
    overflow-wrap: anywhere;
  }

  .footer-bottom {
    flex-direction: column;
    margin-top: 2.4rem;
  }
}

@media (max-width: 390px) {
  .container,
  .narrow,
  .faq-wrap,
  .mobile-nav-inner {
    width: min(calc(100% - 32px), var(--container));
  }

  .footer-container {
    width: calc(100% - 32px);
  }

  .brand-name {
    font-size: 1.08rem;
  }

  .brand-suffix {
    font-size: 0.45rem;
  }

  .menu-toggle {
    width: 42px;
    height: 42px;
  }

  :root {
    --page-inset: 16px;
  }

  .hero-copy {
    padding-block: 2.2rem 2rem;
  }

  .primary-offer {
    padding: 0;
  }

  .trust-grid {
    grid-template-columns: 1fr;
  }

  .trust-grid span,
  .trust-grid span:nth-child(2n) {
    border-left: 0;
  }

  .trust-grid span,
  .trust-grid span:nth-last-child(-n + 2) {
    border-bottom: 1px solid var(--border);
  }

  .trust-grid span:last-child {
    border-bottom: 0;
  }

  .brand-logo {
    height: 36px;
  }

  .brand-logo-only .brand-logo {
    height: 44px;
  }
}

/* The QR code helps on desktop; on the same phone screen it is pointless. */
@media (max-width: 760px) {
  .instagram-grid .qr-card {
    display: none;
  }
}

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

  .process-progress-dot {
    display: none;
  }

  .process-timeline::after,
  .process-timeline-item,
  .process-marker,
  .process-marker-num,
  .process-marker-check {
    transition: none !important;
    animation: none !important;
  }

  .process-timeline-item,
  .process-timeline.is-enhanced .process-timeline-item,
  .process-timeline.is-enhanced .process-timeline-item .process-marker {
    opacity: 1;
    transform: none;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}