/* ========================
       RESET & BASE
    ======================== */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --red:        #C41E2E;
      --red-dark:   #9B0000;
      --red-light:  #E02535;
      --dark:       #111111;
      --dark-2:     #1e1e1e;
      --gray:       #555555;
      --gray-lt:    #888888;
      --border:     #e2e2e2;
      --light:      #f6f6f6;
      --white:      #ffffff;
      --trans:      0.3s ease;
      --shadow:     0 4px 20px rgba(0,0,0,0.09);
      --shadow-lg:  0 12px 40px rgba(0,0,0,0.15);
      --radius:     4px;
      --font:       'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--font);
      color: var(--dark);
      background: var(--white);
      line-height: 1.6;
      overflow-x: hidden;
    }

    img  { max-width: 100%; height: auto; display: block; }
    a    { text-decoration: none; color: inherit; }
    ul   { list-style: none; }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 28px;
    }

    .section-label {
      display: inline-block;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--red);
      margin-bottom: 14px;
    }

    .section-title {
      font-size: clamp(28px, 4vw, 48px);
      font-weight: 800;
      line-height: 1.12;
      color: var(--dark);
    }

    .section-title span { color: var(--red); }

    .section-desc {
      font-size: 17px;
      color: var(--gray);
      line-height: 1.78;
    }

    /* Buttons */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 14px 28px;
      font-size: 15px;
      font-weight: 600;
      font-family: var(--font);
      border-radius: var(--radius);
      cursor: pointer;
      border: none;
      transition: all var(--trans);
      white-space: nowrap;
    }

    .btn-primary   { background: var(--red); color: var(--white); }
    .btn-primary:hover { background: var(--red-dark); transform: translateY(-1px); }

    .btn-outline   { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,0.55); }
    .btn-outline:hover { border-color: var(--white); background: rgba(255,255,255,0.08); }

    .btn-white     { background: var(--white); color: var(--red); font-weight: 700; }
    .btn-white:hover { background: #f0f0f0; transform: translateY(-1px); }

    .btn-white-ol  { border: 2px solid rgba(255,255,255,0.5); color: var(--white); }
    .btn-white-ol:hover { border-color: var(--white); background: rgba(255,255,255,0.1); }

    /* ========================
       NAVIGATION
    ======================== */
    #navbar {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 1000;
      padding: 22px 0;
      transition: background var(--trans), box-shadow var(--trans), padding var(--trans);
    }

    #navbar.scrolled {
      background: var(--dark);
      box-shadow: 0 2px 24px rgba(0,0,0,0.35);
      padding: 14px 0;
    }

    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .logo { display: flex; flex-direction: column; line-height: 1; }
    .logo-name {
      font-size: 19px;
      font-weight: 800;
      color: var(--white);
      letter-spacing: 1.5px;
    }
    .logo-name span { color: var(--red); }
    .logo-sub {
      font-size: 10px;
      color: rgba(255,255,255,0.5);
      letter-spacing: 0.5px;
      margin-top: 3px;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 30px;
    }

    .nav-links a {
      font-size: 14px;
      font-weight: 500;
      color: rgba(255,255,255,0.82);
      letter-spacing: 0.3px;
      transition: color var(--trans);
    }
    .nav-links a:hover { color: var(--white); }

    .nav-cta {
      background: var(--red) !important;
      color: var(--white) !important;
      padding: 10px 20px;
      border-radius: var(--radius);
    }
    .nav-cta:hover { background: var(--red-dark) !important; }

    .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 4px;
      z-index: 1001;
    }
    .hamburger span {
      display: block; width: 25px; height: 2px;
      background: var(--white); border-radius: 2px;
      transition: all var(--trans);
    }
    .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .hamburger.active span:nth-child(2) { opacity: 0; }
    .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

    /* Mobile overlay menu */
    .mobile-menu {
      position: fixed;
      inset: 0;
      background: var(--dark);
      z-index: 999;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 36px;
      transform: translateX(100%);
      transition: transform 0.4s cubic-bezier(0.25,0.1,0.25,1);
    }
    .mobile-menu.open { transform: translateX(0); }
    .mobile-menu a {
      font-size: 26px;
      font-weight: 700;
      color: var(--white);
      transition: color var(--trans);
    }
    .mobile-menu a:hover { color: var(--red); }

    /* ========================
       HERO
    ======================== */
    #hero {
      position: relative;
      height: 100vh;
      min-height: 620px;
      display: flex;
      align-items: center;
      overflow: hidden;
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
    }
    .hero-bg video,
    .hero-bg img {
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center;
    }

    .hero-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(
        105deg,
        rgba(0,0,0,0.80) 0%,
        rgba(0,0,0,0.50) 55%,
        rgba(0,0,0,0.18) 100%
      );
    }

    .hero-content {
      position: relative;
      z-index: 2;
      max-width: 660px;
    }

    .hero-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--red);
      color: var(--white);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      padding: 7px 15px;
      border-radius: 2px;
      margin-bottom: 24px;
    }

    .hero-title {
      font-size: clamp(36px, 5.5vw, 68px);
      font-weight: 900;
      color: var(--white);
      line-height: 1.08;
      margin-bottom: 22px;
    }
    .hero-title span { color: var(--red); }

    .hero-sub {
      font-size: clamp(16px, 1.8vw, 19px);
      color: rgba(255,255,255,0.82);
      line-height: 1.68;
      margin-bottom: 32px;
      max-width: 530px;
    }

    .hero-phone {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 32px;
    }
    .hero-phone a {
      font-size: clamp(22px, 3vw, 30px);
      font-weight: 800;
      color: var(--white);
      letter-spacing: 0.5px;
    }
    .hero-phone svg { color: var(--red); flex-shrink: 0; }

    .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

    .hero-scroll {
      position: absolute;
      bottom: 30px; left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      opacity: 0.7;
    }
    .hero-scroll svg { display: block; }

    /* ========================
       STATS BAR
    ======================== */
    #stats { background: var(--dark); }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
    }

    .stat-item {
      padding: 44px 24px;
      text-align: center;
      border-right: 1px solid rgba(255,255,255,0.07);
    }
    .stat-item:last-child { border-right: none; }

    .stat-number {
      font-size: clamp(34px, 4vw, 54px);
      font-weight: 900;
      color: var(--red);
      line-height: 1;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .stat-label {
      font-size: 13px;
      font-weight: 500;
      color: rgba(255,255,255,0.55);
      letter-spacing: 0.3px;
      line-height: 1.4;
    }

    /* ========================
       ABOUT
    ======================== */
    #about { padding: 110px 0; background: var(--white); }

    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }

    .about-img-wrap { position: relative; }

    .about-img {
      width: 100%; height: 540px;
      object-fit: cover;
      border-radius: 5px;
    }

    .about-badge {
      position: absolute;
      bottom: -30px; right: -30px;
      width: 164px; height: 164px;
      background: var(--red);
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: var(--white);
      box-shadow: var(--shadow-lg);
      border: 5px solid var(--white);
    }
    .about-badge .num { font-size: 44px; font-weight: 900; line-height: 1; }
    .about-badge .txt { font-size: 12px; font-weight: 500; opacity: 0.9; text-align: center; line-height: 1.3; }

    .about-content { }

    .check-list {
      margin: 28px 0 38px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .check-list li {
      display: flex;
      align-items: flex-start;
      gap: 13px;
      font-size: 16px;
      color: var(--dark);
      line-height: 1.5;
    }

    .check-list li::before {
      content: '';
      display: block;
      width: 22px; height: 22px;
      min-width: 22px;
      background: var(--red);
      border-radius: 50%;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
      background-size: 13px;
      background-position: center;
      background-repeat: no-repeat;
      margin-top: 1px;
    }

    /* ========================
       FUGENSANIERUNG (HAUPTLEISTUNG)
    ======================== */
    #fugensanierung { padding: 110px 0; background: var(--light); }

    .fugen-intro {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: start;
      margin-bottom: 60px;
    }

    .fugen-intro .section-desc { max-width: 100%; }

    .fugen-cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }

    .fugen-card {
      background: var(--white);
      border-radius: 6px;
      overflow: hidden;
      box-shadow: var(--shadow);
      transition: transform var(--trans), box-shadow var(--trans);
    }
    .fugen-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

    .fugen-card-img {
      width: 100%; height: 220px;
      object-fit: cover;
    }

    .fugen-card-body { padding: 26px; }

    .fugen-card-title {
      font-size: 18px;
      font-weight: 700;
      color: var(--dark);
      margin-bottom: 10px;
    }

    .fugen-card-text {
      font-size: 14px;
      color: var(--gray);
      line-height: 1.68;
    }

    /* Denkmalschutz highlight */
    .denkmal-block {
      margin-top: 64px;
      background: var(--dark-2);
      border-radius: 8px;
      overflow: hidden;
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 420px;
    }

    .denkmal-img { position: relative; overflow: hidden; }
    .denkmal-img img {
      width: 100%; height: 100%;
      object-fit: cover;
      opacity: 0.65;
      transition: transform 0.6s ease;
    }
    .denkmal-block:hover .denkmal-img img { transform: scale(1.04); }

    .denkmal-body {
      padding: 60px 52px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .denkmal-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--red);
      margin-bottom: 16px;
    }

    .denkmal-title {
      font-size: clamp(24px, 2.5vw, 34px);
      font-weight: 800;
      color: var(--white);
      line-height: 1.22;
      margin-bottom: 18px;
    }

    .denkmal-text {
      font-size: 15px;
      color: rgba(255,255,255,0.65);
      line-height: 1.75;
      margin-bottom: 30px;
    }

    /* ========================
       WEITERE LEISTUNGEN
    ======================== */
    #leistungen { padding: 110px 0; background: var(--white); }

    .leistungen-hd { text-align: center; margin-bottom: 56px; }
    .leistungen-hd .section-desc { margin: 16px auto 0; max-width: 600px; }

    .leistungen-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }

    .l-card {
      border: 1.5px solid var(--border);
      border-radius: 6px;
      padding: 36px 28px;
      transition: all var(--trans);
      position: relative;
      overflow: hidden;
    }
    .l-card::after {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 3px; height: 100%;
      background: var(--red);
      transform: scaleY(0);
      transform-origin: bottom;
      transition: transform var(--trans);
    }
    .l-card:hover::after { transform: scaleY(1); }
    .l-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }

    .l-icon {
      width: 52px; height: 52px;
      background: #FFF0F0;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
    }
    .l-icon svg { color: var(--red); }

    .l-title {
      font-size: 17px;
      font-weight: 700;
      color: var(--dark);
      margin-bottom: 10px;
    }

    .l-text { font-size: 14px; color: var(--gray); line-height: 1.68; }

    /* ========================
       GALLERY
    ======================== */
    #galerie { padding: 110px 0; background: var(--dark); }

    .galerie-hd { text-align: center; margin-bottom: 48px; }
    .galerie-hd .section-title { color: var(--white); }

    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-auto-rows: 210px;
      gap: 8px;
    }

    .g-item {
      overflow: hidden;
      border-radius: 4px;
      cursor: zoom-in;
    }
    .g-item:nth-child(1) {
      grid-column: span 2;
      grid-row: span 2;
    }
    .g-item img {
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform 0.55s ease;
    }
    .g-item:hover img { transform: scale(1.06); }

    /* ========================
       PROCESS
    ======================== */
    #ablauf { padding: 110px 0; background: var(--light); }

    .ablauf-hd { text-align: center; margin-bottom: 64px; }

    .steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      position: relative;
    }
    .steps::before {
      content: '';
      position: absolute;
      top: 36px; left: 12.5%; right: 12.5%;
      height: 2px;
      background: linear-gradient(to right, var(--red), var(--red-dark));
      z-index: 0;
    }

    .step { text-align: center; padding: 0 20px; position: relative; z-index: 1; }

    .step-num {
      width: 72px; height: 72px;
      border-radius: 50%;
      background: var(--red);
      color: var(--white);
      font-size: 22px; font-weight: 800;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 26px;
      border: 5px solid var(--light);
      box-shadow: 0 0 0 3px var(--red);
    }

    .step-title {
      font-size: 17px; font-weight: 700;
      color: var(--dark); margin-bottom: 10px;
    }
    .step-text { font-size: 14px; color: var(--gray); line-height: 1.68; }

    /* ========================
       CTA BAND
    ======================== */
    #cta-band { padding: 84px 0; background: var(--red); }

    .cta-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
    }

    .cta-text h2 {
      font-size: clamp(22px, 3vw, 38px);
      font-weight: 800; color: var(--white); line-height: 1.2;
    }
    .cta-text p { font-size: 16px; color: rgba(255,255,255,0.78); margin-top: 8px; }

    .cta-actions { display: flex; gap: 14px; align-items: center; flex-shrink: 0; }

    /* ========================
       CONTACT
    ======================== */
    #kontakt { padding: 110px 0; background: var(--white); }

    .kontakt-grid {
      display: grid;
      grid-template-columns: 1fr 1.45fr;
      gap: 80px;
      align-items: start;
    }

    .kontakt-info h2 {
      font-size: clamp(28px, 3.5vw, 44px);
      font-weight: 800; color: var(--dark);
      line-height: 1.18; margin-bottom: 16px;
    }
    .kontakt-info h2 span { color: var(--red); }
    .kontakt-info > p { font-size: 16px; color: var(--gray); line-height: 1.72; margin-bottom: 36px; }

    .k-details { display: flex; flex-direction: column; gap: 20px; }

    .k-detail { display: flex; align-items: center; gap: 16px; }

    .k-icon {
      width: 48px; height: 48px;
      background: #FFF0F0;
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .k-icon svg { color: var(--red); }

    .k-lbl {
      font-size: 11px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 1px;
      color: var(--gray-lt); margin-bottom: 2px;
    }
    .k-val { font-size: 17px; font-weight: 600; color: var(--dark); }
    .k-val a { color: var(--red); }

    /* Form */
    .k-form {
      background: var(--light);
      border-radius: 8px;
      padding: 42px;
    }

    .form-title { font-size: 22px; font-weight: 700; color: var(--dark); margin-bottom: 26px; }

    .f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

    .f-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }

    .f-group label { font-size: 13px; font-weight: 600; color: var(--dark); }

    .f-group input,
    .f-group select,
    .f-group textarea {
      padding: 12px 16px;
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      font-size: 15px; font-family: var(--font);
      color: var(--dark); background: var(--white);
      transition: border-color var(--trans);
      outline: none; width: 100%;
    }
    .f-group input:focus,
    .f-group select:focus,
    .f-group textarea:focus { border-color: var(--red); }

    .f-group textarea { min-height: 120px; resize: vertical; }

    .f-note { font-size: 12px; color: var(--gray-lt); line-height: 1.55; margin-bottom: 20px; }

    .f-submit .btn { width: 100%; justify-content: center; font-size: 16px; padding: 16px; }

    /* ========================
       FOOTER
    ======================== */
    #footer { background: #0d0d0d; padding: 64px 0 30px; }

    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 48px;
      margin-bottom: 52px;
    }

    .f-brand-name {
      font-size: 19px; font-weight: 800;
      color: var(--white); letter-spacing: 1.5px; margin-bottom: 4px;
    }
    .f-brand-name span { color: var(--red); }

    .f-brand-tag { font-size: 11px; color: rgba(255,255,255,0.38); margin-bottom: 16px; }

    .f-brand-desc { font-size: 14px; color: rgba(255,255,255,0.45); line-height: 1.72; }

    .f-col h4 {
      font-size: 11px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 2px;
      color: rgba(255,255,255,0.35); margin-bottom: 20px;
    }

    .f-links { display: flex; flex-direction: column; gap: 10px; }
    .f-links a,
    .f-links span {
      font-size: 14px;
      color: rgba(255,255,255,0.55);
      transition: color var(--trans);
    }
    .f-links a:hover { color: var(--white); }

    .footer-bt {
      border-top: 1px solid rgba(255,255,255,0.07);
      padding-top: 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }

    .f-copy { font-size: 13px; color: rgba(255,255,255,0.3); }

    .f-legal { display: flex; gap: 22px; }
    .f-legal a { font-size: 13px; color: rgba(255,255,255,0.3); transition: color var(--trans); }
    .f-legal a:hover { color: rgba(255,255,255,0.7); }

    /* ========================
       FADE-UP ANIMATION
    ======================== */
    .fu {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.65s ease, transform 0.65s ease;
    }
    .fu.visible { opacity: 1; transform: translateY(0); }
    .fu:nth-child(2) { transition-delay: 0.1s; }
    .fu:nth-child(3) { transition-delay: 0.2s; }
    .fu:nth-child(4) { transition-delay: 0.3s; }

    /* ========================
       RESPONSIVE
    ======================== */
    @media (max-width: 1024px) {
      .about-grid      { grid-template-columns: 1fr; }
      .about-img-wrap  { display: none; }
      .fugen-intro     { grid-template-columns: 1fr; gap: 32px; }
      .denkmal-block   { grid-template-columns: 1fr; }
      .denkmal-img     { height: 280px; }
      .kontakt-grid    { grid-template-columns: 1fr; gap: 48px; }
      .footer-grid     { grid-template-columns: 1fr 1fr; }
    }

    @media (max-width: 768px) {
      .nav-links   { display: none; }
      .hamburger   { display: flex; }

      .stats-grid  { grid-template-columns: repeat(2, 1fr); }
      .stat-item   { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); }

      .fugen-cards { grid-template-columns: 1fr; }

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

      .gallery-grid {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 160px;
      }
      .g-item:nth-child(1) { grid-column: span 2; }

      .steps       { grid-template-columns: 1fr 1fr; gap: 40px; }
      .steps::before { display: none; }

      .cta-inner   { flex-direction: column; text-align: center; }
      .cta-actions { flex-direction: column; width: 100%; }
      .cta-actions .btn { width: 100%; justify-content: center; }

      .f-row       { grid-template-columns: 1fr; }

      .footer-grid { grid-template-columns: 1fr; }
      .footer-bt   { flex-direction: column; text-align: center; }

      #about, #fugensanierung, #leistungen, #galerie, #ablauf, #kontakt { padding: 68px 0; }

      .denkmal-body { padding: 40px 30px; }
    }

    @media (max-width: 480px) {
      .leistungen-grid { grid-template-columns: 1fr; }
      .steps { grid-template-columns: 1fr; }
      .hero-phone a { font-size: 22px; }
      .k-form { padding: 28px 20px; }
    }

    /* ========================
       SUBPAGE: PAGE HERO
    ======================== */
    .page-hero {
      position: relative;
      padding: 170px 0 80px;
      background: var(--dark);
      overflow: hidden;
    }
    .page-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      opacity: 0.28;
      z-index: 0;
    }
    .page-hero .container { position: relative; z-index: 1; }

    .breadcrumb {
      display: flex;
      gap: 9px;
      align-items: center;
      font-size: 13px;
      color: rgba(255,255,255,0.5);
      margin-bottom: 18px;
      flex-wrap: wrap;
    }
    .breadcrumb a { color: rgba(255,255,255,0.7); transition: color var(--trans); }
    .breadcrumb a:hover { color: var(--white); }
    .breadcrumb span { color: var(--red); }

    .page-hero h1 {
      font-size: clamp(30px, 4.5vw, 52px);
      font-weight: 900;
      color: var(--white);
      line-height: 1.12;
      max-width: 760px;
    }
    .page-hero h1 span { color: var(--red); }
    .page-hero .lead {
      font-size: 17px;
      color: rgba(255,255,255,0.7);
      line-height: 1.7;
      max-width: 640px;
      margin-top: 18px;
    }

    /* ========================
       SUBPAGE: ARTICLE CONTENT
    ======================== */
    .content-section { padding: 84px 0; background: var(--white); }
    .content-section.alt { background: var(--light); }

    .content-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: center;
    }
    .content-grid.reverse .content-media { order: 2; }

    .content-media img {
      width: 100%;
      height: 460px;
      object-fit: cover;
      border-radius: 6px;
      box-shadow: var(--shadow);
    }

    .prose h2 {
      font-size: clamp(24px, 3vw, 36px);
      font-weight: 800;
      color: var(--dark);
      line-height: 1.18;
      margin-bottom: 18px;
    }
    .prose h2 span { color: var(--red); }
    .prose h3 {
      font-size: 20px;
      font-weight: 700;
      color: var(--dark);
      margin: 26px 0 10px;
    }
    .prose p {
      font-size: 16px;
      color: var(--gray);
      line-height: 1.8;
      margin-bottom: 16px;
    }
    .prose p strong { color: var(--dark); }
    .prose .section-label { margin-bottom: 12px; }

    /* full-width prose block (single column) */
    .prose-wide { max-width: 820px; margin: 0 auto; }
    .prose-wide h2 { text-align: center; }
    .prose-wide > .section-label { display: block; text-align: center; }

    /* ========================
       SUBPAGE: FAQ
    ======================== */
    .faq-section { padding: 84px 0; background: var(--light); }
    .faq-list { max-width: 820px; margin: 40px auto 0; }
    .faq-item {
      background: var(--white);
      border: 1.5px solid var(--border);
      border-radius: 6px;
      margin-bottom: 14px;
      overflow: hidden;
    }
    .faq-q {
      width: 100%;
      text-align: left;
      padding: 22px 26px;
      font-size: 17px;
      font-weight: 600;
      color: var(--dark);
      background: none;
      border: none;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      font-family: var(--font);
    }
    .faq-q .ico {
      flex-shrink: 0;
      transition: transform var(--trans);
      color: var(--red);
    }
    .faq-item.open .faq-q .ico { transform: rotate(45deg); }
    .faq-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s ease;
    }
    .faq-a-inner {
      padding: 0 26px 22px;
      font-size: 15px;
      color: var(--gray);
      line-height: 1.75;
    }

    /* ========================
       SUBPAGE: RELATED SERVICES
    ======================== */
    .related { padding: 84px 0; background: var(--white); }
    .related-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 40px;
    }
    .related-card {
      display: block;
      padding: 28px;
      border: 1.5px solid var(--border);
      border-radius: 6px;
      transition: all var(--trans);
    }
    .related-card:hover {
      border-color: var(--red);
      box-shadow: var(--shadow);
      transform: translateY(-3px);
    }
    .related-card h4 { font-size: 17px; font-weight: 700; color: var(--dark); margin-bottom: 8px; }
    .related-card p { font-size: 14px; color: var(--gray); line-height: 1.6; }
    .related-card .arrow { color: var(--red); font-weight: 700; font-size: 14px; margin-top: 12px; display: inline-block; }

    /* ========================
       SUBPAGE: LEGAL PAGES
    ======================== */
    .legal { padding: 150px 0 90px; background: var(--white); }
    .legal-wrap { max-width: 820px; margin: 0 auto; }
    .legal h1 { font-size: clamp(28px, 4vw, 42px); font-weight: 800; color: var(--dark); margin-bottom: 30px; }
    .legal h2 { font-size: 21px; font-weight: 700; color: var(--dark); margin: 34px 0 12px; }
    .legal h3 { font-size: 17px; font-weight: 700; color: var(--dark); margin: 22px 0 8px; }
    .legal p { font-size: 15px; color: var(--gray); line-height: 1.8; margin-bottom: 12px; }
    .legal ul { margin: 0 0 14px 20px; }
    .legal ul li { font-size: 15px; color: var(--gray); line-height: 1.8; list-style: disc; margin-bottom: 4px; }
    .legal a { color: var(--red); }
    .legal .muted { font-size: 13px; color: var(--gray-lt); }

    @media (max-width: 1024px) {
      .content-grid { grid-template-columns: 1fr; gap: 36px; }
      .content-grid.reverse .content-media { order: 0; }
      .content-media img { height: 320px; }
      .related-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 768px) {
      .page-hero { padding: 130px 0 60px; }
      .content-section, .faq-section, .related { padding: 56px 0; }
    }

    /* ========================
       NAV DROPDOWN
    ======================== */
    .nav-links li.has-dropdown { position: relative; }

    .nav-links li.has-dropdown > a::after {
      content: '';
      display: inline-block;
      width: 7px; height: 7px;
      margin-left: 7px;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: translateY(-2px) rotate(45deg);
      transition: transform var(--trans);
      opacity: 0.8;
    }
    .nav-links li.has-dropdown:hover > a::after,
    .nav-links li.has-dropdown:focus-within > a::after {
      transform: translateY(0) rotate(225deg);
    }

    .dropdown {
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%) translateY(12px);
      min-width: 280px;
      background: var(--white);
      border-radius: 8px;
      box-shadow: 0 16px 44px rgba(0,0,0,0.20);
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 1px;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity var(--trans), transform var(--trans), visibility var(--trans);
      z-index: 1001;
    }
    /* invisible bridge so the gap between item and panel stays hoverable */
    .dropdown::before {
      content: '';
      position: absolute;
      top: -16px; left: 0; right: 0;
      height: 16px;
    }

    .nav-links li.has-dropdown:hover .dropdown,
    .nav-links li.has-dropdown:focus-within .dropdown {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateX(-50%) translateY(8px);
    }

    .dropdown li { width: 100%; }
    .dropdown a {
      display: block;
      padding: 11px 16px;
      font-size: 14px;
      font-weight: 500;
      color: var(--dark) !important;
      border-radius: 5px;
      white-space: nowrap;
      transition: background var(--trans), color var(--trans);
    }
    .dropdown a:hover { background: var(--light); color: var(--red) !important; }

    .dropdown li.dd-sep { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border); }
    .dropdown li.dd-sep a { color: var(--red) !important; font-weight: 700; }
    .dropdown li.dd-sep a:hover { background: #FFF0F0; }

    /* ===== Mobile: expandable services group ===== */
    .mm-group { display: flex; flex-direction: column; align-items: center; gap: 0; }
    .mm-toggle {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      font-size: 26px;
      font-weight: 700;
      color: var(--white);
      background: none;
      border: none;
      cursor: pointer;
      font-family: var(--font);
    }
    .mm-toggle::after {
      content: '';
      width: 9px; height: 9px;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: translateY(-3px) rotate(45deg);
      transition: transform var(--trans);
    }
    .mm-group.open .mm-toggle::after { transform: translateY(0) rotate(225deg); }
    .mm-sub {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }
    .mm-group.open .mm-sub { max-height: 520px; margin-top: 22px; }
    .mm-sub a { font-size: 18px !important; font-weight: 500 !important; color: rgba(255,255,255,0.78) !important; }
    .mm-sub a:hover { color: var(--red) !important; }

    /* ========================
       UX: ACCESSIBILITY & FLOATING ACTIONS
    ======================== */

    /* Keyboard focus visibility */
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    .hamburger:focus-visible {
      outline: 3px solid var(--red);
      outline-offset: 3px;
      border-radius: 3px;
    }

    /* Skip link */
    .skip-link {
      position: absolute;
      left: -9999px;
      top: 0;
      z-index: 2000;
      background: var(--red);
      color: #fff;
      padding: 12px 20px;
      font-weight: 600;
      border-radius: 0 0 6px 0;
    }
    .skip-link:focus { left: 0; }

    /* Anchor offset so fixed navbar doesn't cover headings */
    #about, #fugensanierung, #leistungen, #galerie, #ablauf, #kontakt {
      scroll-margin-top: 90px;
    }

    /* Floating call button (mobile) */
    .floating-call {
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 900;
      display: none;
      align-items: center;
      gap: 9px;
      background: var(--red);
      color: #fff;
      font-weight: 700;
      font-size: 15px;
      padding: 14px 20px;
      border-radius: 50px;
      box-shadow: 0 8px 24px rgba(196,30,46,0.45);
      transition: transform var(--trans), background var(--trans);
    }
    .floating-call:hover { background: var(--red-dark); }
    .floating-call:active { transform: scale(0.96); }

    /* Back-to-top button */
    .to-top {
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 899;
      width: 46px; height: 46px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--dark);
      color: #fff;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      opacity: 0;
      visibility: hidden;
      transform: translateY(12px);
      transition: opacity var(--trans), transform var(--trans), visibility var(--trans), background var(--trans);
      box-shadow: var(--shadow);
    }
    .to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
    .to-top:hover { background: var(--red); }

    @media (max-width: 768px) {
      .floating-call { display: inline-flex; }
      /* lift back-to-top above the floating call pill on mobile */
      .to-top { bottom: 78px; width: 42px; height: 42px; }
    }

    /* Form feedback message */
    .form-feedback {
      display: none;
      margin-top: 14px;
      padding: 13px 16px;
      border-radius: var(--radius);
      background: #E9F7EC;
      border: 1px solid #BfE5C7;
      color: #1c6b30;
      font-size: 14px;
      line-height: 1.5;
    }
    .form-feedback.show { display: block; }

    /* Respect reduced motion preference */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
      }
      .fu { opacity: 1 !important; transform: none !important; }
    }

    /* ========================
       GSAP INTEGRATION
    ======================== */
    /* When GSAP drives the reveals, disable the CSS transition so the two
       don't fight (GSAP writes inline styles every frame). */
    .js-gsap .fu { transition: none; }
    /* Clip the scale-in content images cleanly */
    .content-media { overflow: hidden; border-radius: 6px; }

    /* ========================================================
       VEX-STIL HERO  (raw video, liquid glass, char animation)
    ======================================================== */

    /* --- Liquid glass (exakt nach Spezifikation) --- */
    .liquid-glass {
      background: rgba(0, 0, 0, 0.4);
      background-blend-mode: luminosity;
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      border: none;
      box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
      position: relative;
      overflow: hidden;
    }
    .liquid-glass::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1.4px;
      background: linear-gradient(180deg,
        rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 20%,
        rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
        rgba(255,255,255,0.1) 80%, rgba(255,255,255,0.3) 100%);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
    }

    /* --- Glass navbar pill (only on homepage via .glass-pill) --- */
    #navbar.glass-pill,
    #navbar.glass-pill.scrolled {
      background: transparent;
      box-shadow: none;
      padding: 22px 0;
    }
    /* glass bar variant WITHOUT overflow:hidden so the dropdown isn't clipped */
    .glass-bar {
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      border-radius: 14px;
      padding: 10px 18px;
      box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12);
      position: relative;
    }
    .glass-bar::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1.4px;
      background: linear-gradient(180deg,
        rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 20%,
        rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
        rgba(255,255,255,0.1) 80%, rgba(255,255,255,0.3) 100%);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
    }

    /* --- Hero layout --- */
    #hero { display: block; }
    .hero-protect {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      /* dezenter Schutz nur unten/links hinter dem Text – Video bleibt sonst roh */
      background:
        linear-gradient(to top, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.20) 32%, rgba(0,0,0,0) 58%),
        linear-gradient(to right, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 45%);
    }

    .hero-vex {
      position: relative;
      z-index: 2;
      height: 100%;
      max-width: none;
      margin: 0;
      display: flex;
      flex-direction: column;
      padding: 0 24px;
    }
    .hero-vex-inner {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding-bottom: 48px;
    }
    .hero-vex-grid { width: 100%; }

    .hero-vex-h1 {
      color: #fff;
      font-weight: 400;
      letter-spacing: -0.04em;
      line-height: 1.04;
      margin-bottom: 18px;
      font-size: clamp(38px, 7.5vw, 80px);
    }

    .hero-vex-sub {
      color: #d1d5db;
      font-size: clamp(16px, 1.8vw, 19px);
      line-height: 1.6;
      margin-bottom: 22px;
      max-width: 540px;
    }

    .hero-vex-actions { display: flex; flex-wrap: wrap; gap: 16px; }

    .btn-vex-solid {
      background: #fff;
      color: #000;
      padding: 13px 32px;
      border-radius: 8px;
      font-weight: 500;
      font-size: 15px;
      transition: background var(--trans);
    }
    .btn-vex-solid:hover { background: #f0f0f0; }

    .btn-vex-glass {
      color: #fff;
      padding: 13px 32px;
      border-radius: 8px;
      font-weight: 500;
      font-size: 15px;
      transition: background var(--trans), color var(--trans);
    }
    .btn-vex-glass:hover { background: #fff; color: #000; }

    .hero-vex-right {
      display: flex;
      align-items: flex-end;
      justify-content: flex-start;
      margin-top: 28px;
    }
    .hero-vex-tag {
      color: #fff;
      font-weight: 300;
      font-size: clamp(18px, 2.2vw, 24px);
      padding: 12px 24px;
      border-radius: 14px;
    }

    @media (min-width: 768px) {
      .hero-vex { padding: 0 48px; }
    }
    @media (min-width: 1024px) {
      .hero-vex { padding: 0 64px; }
      .hero-vex-inner { padding-bottom: 64px; }
      .hero-vex-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: end;
        gap: 40px;
      }
      .hero-vex-right { margin-top: 0; justify-content: flex-end; }
    }

    /* --- Character + fade entrance animations --- */
    .ah-char {
      display: inline-block;
      opacity: 0;
      transform: translateX(-18px);
      transition: opacity 0.5s ease, transform 0.5s ease;
      will-change: opacity, transform;
    }
    .ah-char.in { opacity: 1; transform: translateX(0); }

    .fade-el { opacity: 0; transition: opacity 1s ease; }
    .fade-el.in { opacity: 1; }

    /* reduced motion: show hero instantly */
    @media (prefers-reduced-motion: reduce) {
      .ah-char, .fade-el { opacity: 1 !important; transform: none !important; transition: none !important; }
    }

    /* ========================
       COOKIE / DSGVO BANNER
    ======================== */
    .cookie-banner {
      position: fixed;
      left: 18px; right: 18px; bottom: 18px;
      z-index: 1200;
      max-width: 480px;
      background: var(--dark);
      color: #fff;
      border-radius: 12px;
      padding: 22px 24px;
      box-shadow: 0 16px 48px rgba(0,0,0,0.35);
      transform: translateY(140%);
      opacity: 0;
      transition: transform 0.5s cubic-bezier(0.25,0.1,0.25,1), opacity 0.5s ease;
    }
    .cookie-banner.show { transform: translateY(0); opacity: 1; }
    .cookie-banner h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
    .cookie-banner p { font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,0.72); margin-bottom: 16px; }
    .cookie-banner p a { color: #fff; text-decoration: underline; }
    .cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }
    .cookie-actions button {
      font-family: var(--font);
      font-size: 14px; font-weight: 600;
      padding: 11px 22px; border-radius: 8px;
      border: none; cursor: pointer;
      transition: all var(--trans);
    }
    .cookie-accept { background: var(--red); color: #fff; }
    .cookie-accept:hover { background: var(--red-dark); }
    .cookie-info {
      background: transparent; color: rgba(255,255,255,0.8);
      border: 1.5px solid rgba(255,255,255,0.3) !important;
    }
    .cookie-info:hover { border-color: #fff !important; color: #fff; }

    @media (max-width: 540px) {
      .cookie-banner { left: 12px; right: 12px; bottom: 12px; padding: 18px 18px; }
      .cookie-actions button { flex: 1; }
    }

    /* ========================
       KONTAKTFORMULAR: Honeypot + Consent
    ======================== */
    .hp-field {
      position: absolute !important;
      left: -9999px !important;
      width: 1px; height: 1px;
      overflow: hidden;
    }
    .f-consent {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 16px;
    }
    .f-consent input[type="checkbox"] {
      width: 18px; height: 18px;
      min-width: 18px;
      margin-top: 2px;
      accent-color: var(--red);
      cursor: pointer;
    }
    .f-consent label {
      font-size: 13px;
      color: var(--gray);
      line-height: 1.55;
      cursor: pointer;
    }
    .f-consent label a { color: var(--red); text-decoration: underline; }

    /* ========================
       VORHER / NACHHER
    ======================== */
    .ba-block {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 40px;
    }
    .ba-card {
      position: relative;
      margin: 0;
      border-radius: 8px;
      overflow: hidden;
      aspect-ratio: 4 / 3;
      box-shadow: var(--shadow);
      background: #000;
    }
    .ba-card img {
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center 60%;
    }
    .ba-badge {
      position: absolute;
      top: 14px; left: 14px;
      z-index: 2;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      padding: 7px 14px;
      border-radius: 4px;
      color: #fff;
    }
    .ba-badge-before { background: rgba(17,17,17,0.85); }
    .ba-badge-after  { background: var(--red); }
    .ba-caption {
      grid-column: 1 / -1;
      text-align: center;
      font-size: 15px;
      color: rgba(255,255,255,0.7);
      margin-top: 4px;
    }
    @media (max-width: 640px) {
      .ba-block { grid-template-columns: 1fr; }
      .ba-card { aspect-ratio: 3 / 4; }
    }

    /* ========================
       LIGHTBOX (Galerie-Vergrößerung)
    ======================== */
    .lightbox {
      position: fixed;
      inset: 0;
      z-index: 1500;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 28px;
      background: rgba(0,0,0,0.9);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    .lightbox.open { opacity: 1; visibility: visible; }
    .lightbox img {
      max-width: 92vw;
      max-height: 86vh;
      width: auto; height: auto;
      border-radius: 6px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.5);
      transform: scale(0.96);
      transition: transform 0.3s ease;
    }
    .lightbox.open img { transform: scale(1); }
    .lightbox-cap {
      position: absolute;
      bottom: 20px; left: 0; right: 0;
      text-align: center;
      color: rgba(255,255,255,0.85);
      font-size: 14px;
      padding: 0 28px;
      pointer-events: none;
    }
    .lightbox-close,
    .lightbox-nav {
      position: absolute;
      background: rgba(255,255,255,0.12);
      color: #fff;
      border: none;
      cursor: pointer;
      width: 48px; height: 48px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      transition: background var(--trans);
    }
    .lightbox-close:hover,
    .lightbox-nav:hover { background: rgba(255,255,255,0.25); }
    .lightbox-close { top: 20px; right: 20px; font-size: 26px; line-height: 1; }
    .lightbox-nav { top: 50%; transform: translateY(-50%); }
    .lightbox-prev { left: 18px; }
    .lightbox-next { right: 18px; }
    @media (max-width: 600px) {
      .lightbox-nav { width: 42px; height: 42px; }
      .lightbox-prev { left: 8px; } .lightbox-next { right: 8px; }
    }
    .g-item img { cursor: zoom-in; }