*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; line-height: 1.5; font-family: 'Plus Jakarta Sans', Arial, sans-serif; scroll-behavior: smooth; overflow-x: hidden; }
  body { background: #f4f6f9; color: #1e293b; overflow-x: hidden; width: 100%; position: relative; }
  img { max-width: 100%; height: auto; display: block; }

  .page { display: none; }
  .page.active { display: block; }

  .section-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
  .section-label { text-transform: uppercase; letter-spacing: 0.3em; font-size: 12px; font-family: 'Plus Jakarta Sans', Arial, sans-serif; margin-bottom: 24px; }
.section-label-green { color: #1e50a2; }
.section-label-white { color: #93c5fd; }

  .logo-img { height: 61px; width: auto; }

  /* ── HEADER ── */
  .header { border-bottom: 1px solid #e2e8f0; background: #f4f6f9; position: sticky; top: 0; z-index: 50; }
  .header-inner { max-width: 1280px; margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; justify-content: space-between; }
  .logo-area { display: flex; align-items: center; gap: 10px; cursor: pointer; }

  nav { display: flex; align-items: center; gap: 28px; font-size: 14px; font-family: 'Plus Jakarta Sans', Arial, sans-serif; color: #1e293b; }
  nav a { text-decoration: none; color: inherit; cursor: pointer; transition: color 0.15s; }
  nav a:hover { color: #1e50a2; }
  .header-btns { display: flex; align-items: center; gap: 12px; }
  .btn { padding: 12px 24px; border-radius: 9999px; font-size: 14px; font-weight: 500; cursor: pointer; border: none; font-family: 'Plus Jakarta Sans', Arial, sans-serif; display: inline-flex; align-items: center; gap: 6px; transition: all 0.3s cubic-bezier(0.16,1,0.3,1); white-space: nowrap; }
  /* Every colored .btn variant (btn-green, btn-dark, ...) otherwise looked identically
     clickable whether or not its own `disabled` attribute was set -- a real gap for the
     booking wizard's "Weiter" buttons specifically, which stay disabled until their
     step's requirements are met (e.g. step 3 now also needs a return slot, not just a
     pickup one) and give zero feedback on a click while disabled, since the attribute
     itself already blocks the click event from ever firing. */
  .btn:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.3); transform: none !important; box-shadow: none !important; }
  .btn-outline { border: 1px solid #e2e8f0; background: white; color: #1e293b; box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px 1px 0px rgba(255,255,255,0.6); }
  .btn-outline:hover { background: #f1f5f9; transform: translateY(-1px); }
.btn-green { background: linear-gradient(135deg, #1e50a2 0%, #173e7f 100%); color: white; box-shadow: 0px 4px 10px rgba(30,80,162,0.25), inset 0px 1px 0px rgba(255,255,255,0.3); }
.btn-green:hover { transform: translateY(-2px); box-shadow: 0px 8px 20px rgba(30,80,162,0.4), inset 0px 1px 0px rgba(255,255,255,0.3); filter: brightness(1.1); }
  .btn-dark { background: linear-gradient(135deg, #0284c7 0%, #050b14 100%); color: white; box-shadow: 0px 4px 10px rgba(10,25,47,0.3), inset 0px 1px 0px rgba(255,255,255,0.15); }
  .btn-dark:hover { transform: translateY(-2px); box-shadow: 0px 8px 20px rgba(10,25,47,0.45), inset 0px 1px 0px rgba(255,255,255,0.15); filter: brightness(1.15); }
  .btn-white { background: white; color: #1e293b; }
  .btn-white:hover { background: #f1f5f9; }
  .btn-outline-white { border: 1px solid #475569; color: white; background: transparent; }
  .btn-outline-white:hover { background: rgba(255,255,255,0.08); }
  .btn-outline-white2 { border: 1px solid #475569; color: white; background: transparent; }
  .btn-outline-white2:hover { background: rgba(255,255,255,0.08); }
  .btn-outline-dark { border: 1px solid #e2e8f0; background: white; color: #1e293b; box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px 1px 0px rgba(255,255,255,0.6); }
  .btn-outline-dark:hover { background: #f1f5f9; transform: translateY(-1px); }
  /* Quiet secondary CTA -- never visually equal to the one primary booking button it sits next to. */
  .btn-text { background: none; border: none; padding: 8px 4px; color: #64748b; text-decoration: underline; box-shadow: none; }
  .btn-text:hover { color: #0284c7; }
  .btn-text-white { background: none; border: none; padding: 8px 4px; color: rgba(255,255,255,0.75); text-decoration: underline; box-shadow: none; }
  .btn-text-white:hover { color: white; }

  /* ══ HOME ══ */
  .hero { max-width: 1280px; margin: 0 auto; padding: 40px 32px 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
  .badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 9999px; border: 1px solid #e2e8f0; background: white; color: #64748b; font-size: 14px; font-family: 'Plus Jakarta Sans', Arial, sans-serif; margin-bottom: 32px; }
  .badge-dot { width: 8px; height: 8px; border-radius: 50%; background: #1e50a2; display: inline-block; flex-shrink: 0; }
  .hero h1 { font-size: 64px; line-height: 1.05; letter-spacing: -0.02em; color: #0284c7; font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-weight: 800; }
  .hero h1 em { font-family: 'Playfair Display', Georgia, serif; font-style: italic; color: #1e50a2; font-weight: 400; }
  .hero-desc { margin-top: 20px; max-width: 540px; font-size: 16px; line-height: 1.55; color: #64748b; }
  .hero-plz-check { margin-top: 20px; max-width: 440px; }
  .hero-districts { margin-top: 16px; max-width: 540px; }
  .hero-districts-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: #94a3b8; margin-bottom: 8px; }
  .hero-districts-row { display: flex; flex-wrap: wrap; gap: 8px; }
  .hero-district-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 9999px; border: 1px solid #e2e8f0; background: white; color: #1e293b; font-size: 12px; }
  .hero-district-badge.soon { color: #94a3b8; }
  .hero-district-badge .badge-dot { width: 6px; height: 6px; }
  .hero-district-badge.soon .badge-dot { background: #cbd5e1; }
  .hero-plz-check .bk-message { margin-top: 12px; }
  .hero-actions { display: flex; gap: 16px; margin-top: 8px; flex-wrap: wrap; }
  .hero-email { margin-top: 32px; color: #64748b; font-size: 14px; }
  .hero-stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 28px; margin-top: 28px; padding-top: 20px; border-top: 1px solid #e2e8f0; max-width: 540px; }
  .stat-label { font-size: 14px; color: #64748b; }
  .stat-value { font-size: 26px; margin-top: 8px; font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-weight: 700; color: #0284c7; }
  .hero-image-wrap { position: relative; }
  .hero-img-box { position: relative; border-radius: 36px; height: 500px; width: 100%; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); }
  .hero-img-box .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .hero-img-box .hero-img-a { animation: heroImgA 14s infinite; }
  .hero-img-box .hero-img-b { animation: heroImgB 14s infinite; }
  /* Equal time for each image -- 4s held, 3s crossfade, both directions (14s total):
     hero-img-a 0-28.57% held, fades out 28.57-50%; hero-img-b held 50-78.57%, fades
     out 78.57-100% back to a. */
  @keyframes heroImgA {
    0%, 28.57% { opacity: 1; }
    50%, 78.57% { opacity: 0; }
    100% { opacity: 1; }
  }
  @keyframes heroImgB {
    0%, 28.57% { opacity: 0; }
    50%, 78.57% { opacity: 1; }
    100% { opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-img-box .hero-img { animation: none; opacity: 1; }
    .hero-img-box .hero-img-b { opacity: 0; }
  }
  .hero-card { position: absolute; bottom: -20px; left: 32px; background: rgba(255,255,255,0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 18px; padding: 16px; box-shadow: 0px 1px 2px rgba(0,0,0,0.05), 0px 8px 16px -4px rgba(27,46,94,0.08), inset 0px 1px 0px rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.6); width: 250px; }
  .hero-card-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
  .hero-card-icon { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #e0ecfb 0%, #c4ddf8 100%); box-shadow: inset 0px 1px 1px rgba(255,255,255,0.8); display: flex; align-items: center; justify-content: center; color: #1e50a2; flex-shrink: 0; }
  .hero-card-title { font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-weight: 600; color: #1e293b; font-size: 14px; }
  .hero-card-text { font-size: 13px; color: #64748b; line-height: 1.5; }

  .services { padding: 56px 0; border-top: 1px solid #e2e8f0; }
  .services-header { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-bottom: 32px; align-items: start; }
  .services-header h2 { font-size: 34px; line-height: 1.15; font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-weight: 800; color: #0284c7; }
  .services-header p { color: #64748b; font-size: 15px; line-height: 1.5; max-width: 480px; }
  /* Individually-bordered cards in an auto-wrapping grid (same pattern as .ratgeber-grid/
     .ratgeber-card below) rather than a shared-border grid -- any card count wraps cleanly
     with no orphaned row, unlike the old repeat(3,1fr) + nth-child border math it replaced. */
  .services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
  .service-card { padding: 24px; background: rgba(255,255,255,0.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.6); border-radius: 20px; box-shadow: 0px 1px 2px rgba(0,0,0,0.05), 0px 8px 16px -4px rgba(27,46,94,0.08), inset 0px 1px 0px rgba(255,255,255,0.6); transition: all 0.4s cubic-bezier(0.16,1,0.3,1); position: relative; overflow: hidden; }
  .service-card::before { content:''; position:absolute; top:0; left:0; right:0; height:100%; background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 50%); pointer-events:none; }
  .service-card:hover { transform: translateY(-6px); box-shadow: 0px 4px 6px rgba(0,0,0,0.02), 0px 20px 24px -8px rgba(27,46,94,0.15), inset 0px 1px 0px rgba(255,255,255,0.8); background: rgba(255,255,255,0.9); }
  .service-icon-box { width: 40px; height: 40px; border-radius: 14px; background: linear-gradient(135deg, #e0ecfb 0%, #c4ddf8 100%); box-shadow: inset 0px 1px 1px rgba(255,255,255,0.8); margin-bottom: 16px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
  .service-card h3 { font-size: 18px; line-height: 1.25; margin-bottom: 10px; font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-weight: 700; color: #0284c7; }
  .service-card p { color: #64748b; line-height: 1.5; font-size: 14px; }
  .services-btn-wrap { display: flex; justify-content: center; margin-top: 24px; }

  .concept { background: linear-gradient(135deg, #0284c7 0%, #050b14 100%); padding: 48px 0; color: white; }
  .concept h2 { font-size: 34px; line-height: 1.15; font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-weight: 800; }

  /* "So funktioniert's" -- dark, centered timeline: 3 icon badges connected by a dashed
     line, each numbered top-right. Reuses .concept's background/color. */
  .steps-timeline { position: relative; display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin: 40px 0 32px; }
  .steps-timeline-line { position: absolute; top: 28px; left: 16.666%; right: 16.666%; border-top: 2px dashed #2c4a73; z-index: 0; }
  .steps-timeline-item { position: relative; z-index: 1; }
  .steps-timeline-icon { position: relative; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #2f6fd6 0%, #1e50a2 100%); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; box-shadow: 0 8px 20px rgba(30,80,162,0.4); }
  .steps-timeline-num { position: absolute; top: -4px; right: -4px; width: 22px; height: 22px; border-radius: 50%; background: white; color: #1e50a2; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; font-family: 'Plus Jakarta Sans', Arial, sans-serif; }
  .steps-timeline-item h3 { color: white; font-size: 17px; font-weight: 700; margin-bottom: 6px; font-family: 'Plus Jakarta Sans', Arial, sans-serif; }
  .steps-timeline-item p { color: #94a3b8; font-size: 13px; }

  /* "Hinter der Plattform" -- dark stat band, reuses .concept's background/color. */
  .platform-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
  .platform-stat { border: 1px solid #1e3a5f; border-radius: 16px; padding: 24px 16px; background: #11223d; }
  .platform-stat-value { font-size: 28px; font-weight: 800; color: white; font-family: 'Plus Jakarta Sans', Arial, sans-serif; margin-bottom: 6px; }
  .platform-stat-label { font-size: 13px; color: #94a3b8; line-height: 1.4; }

  .why { padding: 112px 0; }
  .why-grid { max-width: 1280px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
  .why-img-box { border-radius: 32px; width: 100%; aspect-ratio: 1448 / 1086; overflow: hidden; }
  .why-img-box img { width: 100%; height: 100%; object-fit: cover; }
  .why h2 { font-size: 34px; line-height: 1.15; margin-bottom: 20px; font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-weight: 800; color: #0284c7; }
  .why-lead { color: #64748b; font-size: 15px; line-height: 1.6; margin-bottom: 32px; }
  .why-features { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
  .why-feature { display: flex; gap: 16px; }
  .why-check { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #e0ecfb 0%, #c4ddf8 100%); box-shadow: inset 0px 1px 1px rgba(255,255,255,0.8); display: flex; align-items: center; justify-content: center; color: #1e50a2; flex-shrink: 0; margin-top: 4px; font-size: 13px; font-weight: 700; }
  .why-feature h3 { font-size: 18px; line-height: 1.25; margin-bottom: 8px; font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-weight: 700; color: #0284c7; }
  .why-feature p { color: #64748b; font-size: 14px; line-height: 1.75; }

  .refs { padding: 96px 0; border-top: 1px solid #e2e8f0; }
  .refs h2 { font-size: 58px; line-height: 1.1; max-width: 720px; margin-bottom: 16px; font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-weight: 800; color: #0284c7; }
  .refs-lead { color: #64748b; font-size: 18px; margin-bottom: 64px; }
  .refs-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; }
  .ref-card { border: 1px solid #e2e8f0; border-radius: 28px; padding: 40px; min-height: 280px; background: #f4f6f9; }
  .ref-num { font-size: 64px; color: #93c5fd; line-height: 1; margin-bottom: 40px; font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-weight: 700; }
  .ref-card h3 { font-size: 34px; line-height: 1.2; margin-bottom: 20px; font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-weight: 700; color: #0284c7; }
  .ref-card p { color: #64748b; line-height: 1.75; }

  .cta-section { padding: 96px 0; border-top: 1px solid #e2e8f0; }
  .cta-card { background: linear-gradient(135deg, #0284c7 0%, #050b14 100%); border-radius: 36px; padding: 56px 64px; color: white; display: grid; grid-template-columns: 340px 1fr; gap: 64px; align-items: center; }
  .cta-img-box { border-radius: 28px; height: 440px; overflow: hidden; }
  .cta-img-box img { width: 100%; height: 100%; object-fit: cover; }
  .cta-label { text-transform: uppercase; letter-spacing: 0.3em; font-size: 12px; color: #93c5fd; margin-bottom: 24px; }
  .cta-card h2 { font-size: 56px; line-height: 1.1; font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-weight: 800; }
  .cta-card h2 em { font-family: 'Playfair Display', Georgia, serif; font-style: italic; color: #93c5fd; font-weight: 400; }
  .cta-card-desc { margin-top: 28px; color: #cbd5e1; font-size: 17px; line-height: 2; max-width: 680px; }
  .cta-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }

  footer { border-top: 1px solid #e2e8f0; padding: 64px 0 0; background: #f4f6f9; }
  .footer-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 64px; }
  .footer-logo-row { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; cursor: pointer; }
  .footer-logo-row .logo-img { height: 72px; width: auto; }
  /* #64748b measured ~4.3:1 against this footer's #f4f6f9 background -- just under
     WCAG AA's 4.5:1 for normal text, confirmed by a live Lighthouse audit
     (color-contrast) against /buchung. #475569 keeps the same muted-gray intent
     (still visibly lighter than the site's primary text colors) with real margin
     (~7:1) rather than sitting right on the threshold. */
  .footer-about-text { color: #475569; line-height: 1.75; font-size: 14px; max-width: 360px; }
  /* h2, not h4 -- these were the only headings the "footer" landmark ever contributes,
     and h4 created a heading-order skip (h2->h4, no h3 in between) on any page whose
     own content happens to end at h2 right before the footer, e.g. /buchung's entire
     wizard only ever uses h2/h3 and has no h1 at all. h2 is the one level that can
     never skip forward from what a page's own content ends at (h1 or h2 -> h2 is
     sequential; h3 -> h2 only steps back up, which heading-order checks don't flag).
     Confirmed live via Lighthouse against /buchung. */
  footer h2 { text-transform: uppercase; letter-spacing: 0.3em; font-size: 11px; color: #475569; margin-bottom: 24px; font-weight: 600; }
  footer ul { list-style: none; display: flex; flex-direction: column; gap: 14px; color: #1e293b; font-size: 14px; }
  footer ul li { cursor: pointer; transition: color 0.15s; }
  footer ul li:hover { color: #1e50a2; }
  .footer-bottom { max-width: 1280px; margin: 64px auto 0; padding: 32px 32px; border-top: 1px solid #e2e8f0; display: flex; justify-content: space-between; font-size: 13px; color: #475569; }
  /* WCAG 2.5.8 target size (Lighthouse's target-size audit) -- these "Maps ↗" links
     were plain 11px inline text with no padding, well under the 24x24px minimum
     tappable area. Padding grows the hit target without visually enlarging the text
     itself. */
  .footer-maps-link { display: inline-block; padding: 6px 4px; }

  /* ══ LEISTUNGEN ══ */
  .page-hero { padding: 48px 32px 40px; max-width: 1280px; margin: 0 auto; }
  .page-hero h1 { font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-weight: 800; font-size: 48px; line-height: 1.1; color: #0284c7; margin-bottom: 16px; }
  .page-hero h1 em { font-family: 'Playfair Display', Georgia, serif; font-style: italic; color: #1e50a2; font-weight: 400; }
  .page-hero-desc { color: #64748b; font-size: 16px; line-height: 1.5; max-width: 620px; }

  .sd-section { padding: 56px 0; border-top: 1px solid #e2e8f0; }
  .sd-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
  /* Alternation between "image left" and "image right" sections is already fully
     expressed by DOM order (.sd-img/.sd-content swap places in the markup for .rev
     sections) -- no direction:rtl flip needed on top of that. An earlier version of
     this rule did add one, which canceled the DOM-order swap back out and made every
     section render image-left regardless of .rev. */
  .sd-img { border-radius: 28px; overflow: hidden; height: 400px; }
  .sd-img-inner { width: 100%; height: 100%; }
  .bg-clothes { background: linear-gradient(160deg,#cce0dc 0%,#a8ccc5 100%); }
  .bg-staff { background: linear-gradient(160deg,#dce8e5 0%,#c0d8d2 100%); }
  .bg-flat { background: linear-gradient(160deg,#e4eeeb 0%,#c8ddd8 100%); }
  .bg-blue { background: linear-gradient(160deg,#c8dae8 0%,#a8c0d8 100%); }
  .sd-num { font-size: 40px; color: #cbd5e1; line-height: 1; margin-bottom: 8px; font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-weight: 700; }
  .sd-content h2 { font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-weight: 800; font-size: 30px; line-height: 1.2; color: #0284c7; margin-bottom: 12px; }
  .sd-content p { color: #64748b; font-size: 15px; line-height: 1.6; margin-bottom: 20px; }
  .check-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; list-style: none; }
  .check-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: #1e293b; line-height: 1.5; }
  .check-list li::before { content:''; width:20px; height:20px; border-radius:50%; background: #e0ecfb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 4L6.5 11 3 7.5' stroke='%231e50a2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center/10px no-repeat; flex-shrink:0; margin-top:1px; }

  .lst-cta { padding: 56px 0; border-top: 1px solid #e2e8f0; }
  .lst-cta-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 36px; }
  .lst-cta h2 { font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-weight: 800; font-size: 32px; line-height: 1.2; color: #0284c7; margin-bottom: 8px; }
  .lst-cta p { color: #64748b; font-size: 15px; }
  .lst-cta-btns { display: flex; gap: 12px; flex-shrink: 0; }

  /* ══ ÜBER UNS ══ */
  .au-hero { padding: 72px 32px 64px; max-width: 1280px; margin: 0 auto; }
  .au-hero h1 { font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-weight: 800; font-size: 64px; line-height: 1.05; color: #0284c7; margin-bottom: 20px; }
  .au-hero h1 em { font-family: 'Playfair Display', Georgia, serif; font-style: italic; color: #1e50a2; font-weight: 400; }
  .au-hero p { color: #64748b; font-size: 17px; line-height: 1.75; max-width: 580px; }

  .au-story { padding: 88px 0; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; }
  .au-story-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
  .au-img { border-radius: 28px; overflow: hidden; height: 480px; }
  .au-img-inner { width: 100%; height: 100%; background: linear-gradient(160deg,#e4eeeb 0%,#c8ddd8 100%); display: flex; align-items: center; justify-content: center; }
  .au-story-content h2 { font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-weight: 800; font-size: 42px; line-height: 1.15; color: #0284c7; margin-bottom: 24px; }
  .au-story-content p { color: #64748b; font-size: 15px; line-height: 1.8; margin-bottom: 16px; }

  .au-mission { padding: 80px 0; border-bottom: 1px solid #e2e8f0; }
  .au-mission-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: start; }
  .au-mission-left h2 { font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-weight: 800; font-size: 42px; line-height: 1.15; color: #0284c7; }
  .au-mission-right p { color: #64748b; font-size: 16px; line-height: 1.85; }

  .au-values { padding: 80px 0; border-bottom: 1px solid #e2e8f0; }
  .au-values-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
  .au-values-hdr { margin-bottom: 56px; }
  .au-values-hdr h2 { font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-weight: 800; font-size: 52px; line-height: 1.1; color: #0284c7; }
  .values-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
  .value-card { background: rgba(255,255,255,0.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.6); border-radius: 24px; padding: 36px 32px; box-shadow: 0px 1px 2px rgba(0,0,0,0.05), 0px 8px 16px -4px rgba(27,46,94,0.08), inset 0px 1px 0px rgba(255,255,255,0.6); transition: all 0.4s cubic-bezier(0.16,1,0.3,1); }
  .value-card:hover { transform: translateY(-6px); box-shadow: 0px 4px 6px rgba(0,0,0,0.02), 0px 20px 24px -8px rgba(27,46,94,0.15), inset 0px 1px 0px rgba(255,255,255,0.8); background: rgba(255,255,255,0.9); }
  .value-icon { width: 48px; height: 48px; border-radius: 16px; background: linear-gradient(135deg, #e0ecfb 0%, #c4ddf8 100%); box-shadow: inset 0px 1px 1px rgba(255,255,255,0.8); display: flex; align-items: center; justify-content: center; color: #1e50a2; margin-bottom: 24px; }
  .value-card h3 { font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-weight: 700; font-size: 22px; color: #0284c7; margin-bottom: 12px; }
  .value-card p { color: #64748b; font-size: 14px; line-height: 1.75; }

  .au-team { background: linear-gradient(135deg, #0284c7 0%, #050b14 100%); padding: 80px 0; color: white; }
  .au-team-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
  .au-team-inner .section-label { color: #93c5fd; }
  .au-team-left h2 { font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-weight: 800; font-size: 52px; line-height: 1.1; color: white; margin-bottom: 20px; }
  .au-team-left p { color: #94a3b8; font-size: 16px; line-height: 1.8; }
  .au-team-right { display: flex; align-items: center; justify-content: flex-end; }

  /* ══ KONTAKT ══ */
  .kontakt-wrap { padding: 80px 0; }
  .kontakt-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 3fr 2fr; gap: 48px; align-items: start; }
  .cf-card { background: white; border-radius: 24px; border: 1px solid #e2e8f0; padding: 56px; }
  .cf-card h2 { font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-weight: 800; font-size: 40px; color: #0284c7; margin-bottom: 8px; }
  .cf-sub { color: #64748b; font-size: 14px; margin-bottom: 40px; }
  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
  .form-group { display: flex; flex-direction: column; gap: 6px; }
  .form-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #64748b; }
  .form-input, .form-select, .form-textarea { padding: 13px 16px; border: 1.5px solid #e2e8f0; border-radius: 10px; background: white; font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-size: 14px; color: #1e293b; outline: none; transition: border-color 0.15s; -webkit-appearance: none; }
  .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: #1e50a2; }
  .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7l5 5 5-5' stroke='%236f7f91' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
  .form-textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
  .freq-sec { margin-bottom: 20px; }
  .freq-lbl { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #64748b; margin-bottom: 12px; }
  .freq-pills { display: flex; flex-wrap: wrap; gap: 10px; }
  .freq-pill { padding: 10px 18px; border: 1.5px solid #e2e8f0; border-radius: 9999px; background: white; font-size: 13.5px; font-weight: 500; color: #64748b; cursor: pointer; transition: all 0.15s; font-family: 'Plus Jakarta Sans', Arial, sans-serif; }
  .freq-pill:hover { background: #f1f5f9; }
  .freq-pill.active { background: #0284c7; color: white; border-color: #0284c7; }
  .form-disc { font-size: 12px; color: #94a3b8; margin-top: 18px; line-height: 1.6; }
  /* Kontakt form's honeypot field (contact.py) -- off-screen, not display:none, since
     some bots specifically skip display:none fields when auto-filling. Same pattern as
     meine-buchung.html's own .mb-hp. */
  .cf-hp { position: absolute; left: -9999px; top: -9999px; }
  /* Altcha CAPTCHA widget (apps/web/vendor/altcha/) -- these are the widget's own
     documented CSS custom properties (see its README's Styling section), used here
     instead of overriding its internal classes directly, which its shadow DOM
     wouldn't allow anyway. Just enough to sit visually inside .cf-card rather than
     clash with it -- the widget's own layout/interaction behavior is untouched. */
  altcha-widget {
    --altcha-max-width: 100%;
    --altcha-color-base: #fff;
    --altcha-color-border: #e2e8f0;
    --altcha-color-text: #1e293b;
    --altcha-color-border-focus: #1e50a2;
    --altcha-border-radius: 10px;
    font-family: 'Plus Jakarta Sans', Arial, sans-serif;
  }
  .ci-card { background: white; border-radius: 24px; border: 1px solid #e2e8f0; padding: 40px; }
  .ci-card h3 { font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-weight: 700; font-size: 28px; color: #0284c7; margin-bottom: 32px; }
  .ci-items { display: flex; flex-direction: column; gap: 24px; margin-bottom: 32px; }
  .ci-item { display: flex; gap: 16px; align-items: flex-start; }
  .ci-icon { width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(135deg, #e0ecfb 0%, #c4ddf8 100%); box-shadow: inset 0px 1px 1px rgba(255,255,255,0.8); display: flex; align-items: center; justify-content: center; color: #1e50a2; flex-shrink: 0; }
  .ci-lbl { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #94a3b8; margin-bottom: 4px; }
  .ci-val { font-size: 14px; font-weight: 500; color: #1e293b; line-height: 1.6; }
  .btn-maps { width: 100%; padding: 14px; border: 1.5px solid #e2e8f0; border-radius: 9999px; background: white; font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; justify-content: center; gap: 8px; color: #1e293b; }
  .btn-maps:hover { background: #0284c7; color: white; border-color: #0284c7; }

  .impressum-wrap { padding: 80px 0; }
  .impressum-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
  .impressum-card { background: white; border-radius: 24px; border: 1px solid #e2e8f0; padding: 56px; }
  /* overflow-wrap: German legal-page titles ("Datenschutzerklärung",
     "Widerrufsbelehrung", "Allgemeine Geschäftsbedingungen") are long compound words
     with no natural space to break on -- without this, they ran off the right edge of
     the screen entirely on mobile instead of wrapping, same fix .impressum-card a
     already needed for long URLs below. */
  .impressum-card h1 { font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-weight: 800; font-size: 40px; color: #0284c7; margin-bottom: 40px; overflow-wrap: break-word; }
  .impressum-card h2 { font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-weight: 700; font-size: 22px; color: #0284c7; margin-top: 32px; margin-bottom: 12px; }
  .impressum-card p, .impressum-card .imp-line { color: #64748b; font-size: 15px; line-height: 1.8; margin-bottom: 8px; }
  .impressum-card a { color: #1e50a2; text-decoration: underline; word-break: break-all; }

  .ratgeber-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 40px; }
  /* Teppichrechner's own cross-sell currently only has 2 real carpet-relevant
     articles (more planned later) -- explicit 2-column variant so today's 2 cards
     read as an intentional layout instead of leaving an empty 3rd slot. Drop this
     once a 3rd carpet-relevant article exists and the base 3-column grid fits again. */
  .ratgeber-grid-2col { grid-template-columns: repeat(2, 1fr); }
  .ratgeber-card { background: rgba(255,255,255,0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 24px; border: 1px solid rgba(255,255,255,0.6); overflow: hidden; box-shadow: 0px 1px 2px rgba(0,0,0,0.05), 0px 8px 16px -4px rgba(27,46,94,0.08); transition: all 0.4s cubic-bezier(0.16,1,0.3,1); }
  .ratgeber-card:hover { transform: translateY(-6px); box-shadow: 0px 4px 6px rgba(0,0,0,0.02), 0px 20px 24px -8px rgba(27,46,94,0.15); background: rgba(255,255,255,0.95); }
  .ratgeber-card-img { width: 100%; height: 200px; object-fit: cover; }
  .ratgeber-card-body { padding: 24px; }
  .ratgeber-card-date { font-size: 12px; color: #94a3b8; margin-bottom: 8px; }
  .ratgeber-card h3 { font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-weight: 700; font-size: 18px; color: #0284c7; margin-bottom: 8px; }
  .ratgeber-card p { font-size: 14px; color: #64748b; line-height: 1.7; }
  .ratgeber-card .btn { margin-top: 16px; }

  .art-wrap { padding: 56px 0; }
  .art-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
  .art-card { background: white; border-radius: 24px; border: 1px solid #e2e8f0; padding: 48px; }
  .art-breadcrumb { font-size: 13px; color: #94a3b8; margin-bottom: 20px; display: flex; align-items: center; gap: 6px; }
  .art-breadcrumb span { cursor: pointer; color: #1e50a2; text-decoration: underline; }
  .art-tag { display: inline-block; background: rgba(30,80,162,0.1); color: #1e50a2; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 12px; border-radius: 20px; margin-bottom: 16px; }
  .art-card h1 { font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-weight: 800; font-size: 32px; color: #0284c7; line-height: 1.25; margin-bottom: 16px; }
  .art-meta { display: flex; align-items: center; gap: 20px; font-size: 13px; color: #94a3b8; flex-wrap: wrap; margin-bottom: 32px; }
  .art-body p { font-size: 15px; line-height: 1.8; color: #64748b; margin-bottom: 20px; }
  .art-body h2 { font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-weight: 700; font-size: 22px; color: #0284c7; margin: 40px 0 16px; padding-bottom: 8px; border-bottom: 2px solid #f4f6f9; }
  .art-body h3 { font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-weight: 600; font-size: 17px; color: #0284c7; margin: 24px 0 10px; }
  .art-body ul { color: #64748b; font-size: 15px; line-height: 2; padding-left: 24px; margin-bottom: 20px; }
  .sym-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin: 24px 0 32px; }
  .sym-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px 14px 14px; display: flex; flex-direction: column; align-items: center; text-align: center; }
  .sym-card svg { width: 48px; height: 48px; margin-bottom: 10px; flex-shrink: 0; }
  .sym-card .sym-name { font-weight: 600; font-size: 13px; color: #0284c7; margin-bottom: 4px; line-height: 1.3; }
  .sym-card .sym-desc { font-size: 12px; color: #94a3b8; line-height: 1.4; }
  .art-info-box { background: rgba(30,80,162,0.07); border-left: 4px solid #1e50a2; border-radius: 0 8px 8px 0; padding: 20px 24px; margin: 28px 0; }
  .art-info-box p { margin-bottom: 0; font-size: 14px; }
  .art-info-box strong { color: #0284c7; }
  .art-warn-box { background: rgba(211,47,47,0.06); border-left: 4px solid #d32f2f; border-radius: 0 8px 8px 0; padding: 20px 24px; margin: 28px 0; }
  .art-warn-box p { margin-bottom: 0; font-size: 14px; }
  .art-cta-box { background: #0284c7; color: white; border-radius: 16px; padding: 36px 32px; text-align: center; margin-top: 48px; }
  .art-cta-box h3 { font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-weight: 700; font-size: 20px; color: white; margin-bottom: 8px; }
  .art-cta-box p { color: white; font-size: 14px; margin-bottom: 20px; }

  @media (max-width: 600px) {
    .art-card { padding: 24px 20px; }
    .art-card h1 { font-size: 24px; }
    .sym-grid { grid-template-columns: repeat(2, 1fr); }
  }

  .hero-badges { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding-left: 12px; }
  .mobile-nav { display: none; }
  .mobile-nav.open { display: flex; flex-direction: column; gap: 16px; padding: 24px 32px 32px; background: #f4f6f9; border-bottom: 1px solid #e2e8f0; }
  .mobile-nav a { font-size: 15px; font-family: 'Plus Jakarta Sans', Arial, sans-serif; color: #1e293b; text-decoration: none; cursor: pointer; }
  .hamburger { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; padding: 4px; }
  .hamburger span { display: block; width: 22px; height: 2px; background: #1e293b; border-radius: 2px; }

  @media (max-width: 768px) {
    .hero { grid-template-columns: 1fr; gap: 40px; padding: 32px 20px 48px; }
    .hero h1 { font-size: 38px; }
    .hero-card { position: relative; bottom: auto; left: auto; margin-top: 24px; width: 100%; }
    .hero-img-box { height: 400px; }
    .services-header { grid-template-columns: 1fr; gap: 32px; }
    .services-grid { grid-template-columns: 1fr; }
    .steps-timeline { grid-template-columns: 1fr; gap: 32px; }
    .steps-timeline-line { display: none; }
    .platform-stats { grid-template-columns: 1fr; gap: 16px; }
    .why-grid { grid-template-columns: 1fr; gap: 40px; }
    .why-features { grid-template-columns: 1fr; }
    .sd-inner { grid-template-columns: 1fr; gap: 32px; }
    .au-story-inner { grid-template-columns: 1fr; gap: 32px; }
    .au-mission-inner { grid-template-columns: 1fr; gap: 32px; }
    .au-team-inner { grid-template-columns: 1fr; gap: 32px; }
    .kontakt-inner { grid-template-columns: 1fr; gap: 32px; }
    .footer-inner { grid-template-columns: 1fr; gap: 32px; }
    .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
    .check-list { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .values-grid { grid-template-columns: 1fr; }
    .header-inner { padding: 16px 20px; }
    nav { display: none; }
    .hamburger { display: flex; }
    .cf-card { padding: 32px 24px; }
    .hero-badges { padding-left: 0; }
    .lst-cta-inner { flex-direction: column; text-align: center; gap: 24px; }
    .lst-cta-btns { justify-content: center; }
    .section-inner, .page-hero, .au-hero { padding-left: 20px; padding-right: 20px; }
    .sd-inner, .au-story-inner, .au-mission-inner, .au-team-inner, .au-values-inner, .lst-cta-inner, .kontakt-inner, .why-grid { padding: 0 20px; }
    .footer-inner { padding: 0 20px; }
    .footer-bottom { padding: 32px 20px; }
  }
  @media (max-width: 480px) {
    .hero { padding: 20px 16px 36px; gap: 24px; }
    .hero h1 { font-size: 28px; }
    .hero-card { padding: 16px; }
    .hero-stats { grid-template-columns: 1fr; gap: 16px; }
    .hero-img-box { height: 280px; border-radius: 24px; }
    .badge { font-size: 12px !important; padding: 5px 10px !important; }
    .services-header h2 { font-size: 36px; }
    .cta-card h2 { font-size: 28px; }
    .cta-card { padding: 24px 20px; grid-template-columns: 1fr; gap: 32px; }
    .page-hero h1, .au-hero h1 { font-size: 32px; }
    .header-btns .btn-text { display: none; }
    .header-btns .btn-green { padding: 10px 16px; font-size: 13px; }
    .header-inner { padding: 12px 16px; }
    .logo-img { height: 48px; }
    .sd-content h2 { font-size: 28px; }
    .sd-img { height: 280px; }
    .refs h2 { font-size: 32px; }
    .refs-grid { grid-template-columns: 1fr; }
    .au-story-content h2 { font-size: 28px; }
    .au-img { height: 280px; }
    .au-values-hdr h2 { font-size: 32px; }
    .cf-card h2 { font-size: 28px; }
    .ci-card h3 { font-size: 22px; }
    .impressum-card { padding: 32px 24px; }
    .impressum-card h1 { font-size: 28px; }
    .concept h2 { font-size: 28px; }
    .art-card { padding: 28px 20px; }
    .art-card h1 { font-size: 24px; }
    .art-inner { padding: 0 16px; }
    .ratgeber-grid, .ratgeber-grid-2col { grid-template-columns: 1fr; }
  }

/* ── FAQ accordion (homepage, near the end -- see toggleFaq in site.js) ── */
.faq-section { padding: 88px 0; border-top: 1px solid #e2e8f0; }
.faq-list { max-width: 760px; margin: 40px auto 0; display: flex; flex-direction: column; gap: 12px; }
.faq-item { border: 1px solid #e2e8f0; border-radius: 16px; overflow: hidden; background: white; }
.faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; background: none; border: none; text-align: left; font-family: 'Plus Jakarta Sans', Arial, sans-serif;
  font-weight: 700; font-size: 16px; color: #0284c7; cursor: pointer; }
.faq-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: #f1f5fb; color: #1e50a2;
  display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; transition: transform 0.2s ease; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.faq-item.open .faq-answer { max-height: 420px; }
.faq-answer-inner { padding: 0 24px 20px; color: #64748b; font-size: 15px; line-height: 1.75; }
.faq-answer-inner a { color: #1e50a2; text-decoration: underline; }
/* Hidden outright by default (see toggleMoreFaqs in site.js) -- own flex/gap so the
   extra items, once revealed, keep the exact same rhythm as .faq-list's own first 3. */
.faq-more { display: none; flex-direction: column; gap: 12px; margin-top: 12px; }
.faq-more.open { display: flex; }
.faq-more-toggle { display: inline-flex; align-items: center; gap: 6px; background: none; border: none;
  color: #1e50a2; font-size: 14px; font-weight: 600; cursor: pointer; padding: 8px; font-family: inherit; }
.faq-more-toggle:hover { text-decoration: underline; }
.faq-more-toggle .faq-more-arrow { display: inline-block; transition: transform 0.3s ease; }
.faq-more-toggle.open .faq-more-arrow { transform: rotate(180deg); }
@media (max-width: 600px) {
  .faq-question { font-size: 15px; padding: 16px 18px; }
  .faq-answer-inner { padding: 0 18px 16px; }
}