/*
Theme Name:   AA Plan Child
Theme URI:    https://aa-plan.de
Description:  Child Theme für AA Plan GmbH & Co. KG — Design & Engineering
Author:       AA Plan GmbH & Co. KG
Author URI:   https://aa-plan.de
Template:     hello-elementor
Version:      1.0.0
License:      Private
Text Domain:  aa-plan-child
*/

/* ============================================================
   1. DESIGN TOKENS — FARBEN
   ============================================================ */

:root {
  /* Primärfarben */
  --aa-black:          #0f0f0f;
  --aa-white:          #ffffff;

  /* Akzentfarbe Gold */
  --aa-gold:           #B07D3A;
  --aa-gold-light:     #d4a45a;
  --aa-gold-pale:      #e8d5b0;

  /* Grau-Skala */
  --aa-gray-50:        #f9f9f7;
  --aa-gray-100:       #f5f5f3;
  --aa-gray-200:       #e0dedd;
  --aa-gray-400:       #a0a09a;
  --aa-gray-600:       #666660;
  --aa-gray-800:       #2a2a28;

  /* Semantische Farben */
  --aa-bg-primary:     var(--aa-white);
  --aa-bg-secondary:   var(--aa-gray-100);
  --aa-text-primary:   var(--aa-black);
  --aa-text-secondary: var(--aa-gray-600);
  --aa-text-muted:     var(--aa-gray-400);
  --aa-border:         var(--aa-gray-200);
  --aa-border-light:   rgba(0, 0, 0, 0.08);
}

/* ============================================================
   2. DESIGN TOKENS — TYPOGRAFIE
   ============================================================ */

:root {
  /* Schriftarten — lokal eingebunden, kein CDN */
  --aa-font-sans:   -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial,
                    "Segoe UI", Roboto, sans-serif;
  --aa-font-mono:   "Courier New", Courier, monospace;

  /* Schriftgrößen */
  --aa-text-xs:     11px;
  --aa-text-sm:     13px;
  --aa-text-base:   15px;
  --aa-text-md:     16px;
  --aa-text-lg:     18px;
  --aa-text-xl:     22px;
  --aa-text-2xl:    28px;
  --aa-text-3xl:    34px;
  --aa-text-4xl:    42px;
  --aa-text-5xl:    54px;

  /* Zeilenhöhen */
  --aa-leading-tight:   1.12;
  --aa-leading-snug:    1.3;
  --aa-leading-normal:  1.5;
  --aa-leading-relaxed: 1.75;
  --aa-leading-loose:   1.8;

  /* Letter Spacing */
  --aa-tracking-eyebrow: 2.5px;
  --aa-tracking-nav:     0.5px;
  --aa-tracking-wide:    1px;
}

/* ============================================================
   3. DESIGN TOKENS — ABSTÄNDE & RADIEN
   ============================================================ */

:root {
  /* Abstände */
  --aa-space-xs:   8px;
  --aa-space-sm:   16px;
  --aa-space-md:   24px;
  --aa-space-lg:   48px;
  --aa-space-xl:   64px;
  --aa-space-2xl:  96px;

  /* Seitenränder */
  --aa-gutter:     48px;

  /* Radien */
  --aa-radius-sm:  2px;
  --aa-radius-md:  3px;
  --aa-radius-lg:  4px;

  /* Borders */
  --aa-border-width:     0.5px;
  --aa-border-width-em:  1.5px;  /* emphasized, z.B. nav active */
}

/* ============================================================
   4. GLOBALER RESET & BASE
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

html {
  /* overflow-x: hidden hier absichtlich entfernt —
     verursacht Safari-Bug mit position:sticky Headern.
     Overflow wird stattdessen auf einzelnen Containern gesetzt. */
}

body {
  font-family:     var(--aa-font-sans);
  font-size:       var(--aa-text-base);
  line-height:     var(--aa-leading-relaxed);
  color:           var(--aa-text-primary);
  background:      var(--aa-bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width:           100%;
  max-width:       100%;
}

/* Bilder */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Links */
a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--aa-gold);
}

/* ============================================================
   5. TYPOGRAFIE-SYSTEM
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family:  var(--aa-font-sans);
  font-weight:  500;
  line-height:  var(--aa-leading-snug);
  color:        var(--aa-text-primary);
  margin:       0 0 var(--aa-space-md);
}

h1 { font-size: var(--aa-text-5xl); letter-spacing: -1.5px; }
h2 { font-size: var(--aa-text-3xl); letter-spacing: -0.5px; }
h3 { font-size: var(--aa-text-xl);  letter-spacing: -0.3px; }
h4 { font-size: var(--aa-text-lg);  }
h5 { font-size: var(--aa-text-md);  }
h6 { font-size: var(--aa-text-base);}

p {
  margin: 0 0 var(--aa-space-sm);
  color: var(--aa-text-secondary);
  line-height: var(--aa-leading-relaxed);
}

/* Eyebrow — wiederverwendbare Klasse */
.aa-eyebrow {
  font-size:       var(--aa-text-xs);
  font-weight:     400;
  letter-spacing:  var(--aa-tracking-eyebrow);
  text-transform:  uppercase;
  color:           var(--aa-gold);
  display:         flex;
  align-items:     center;
  gap:             12px;
  margin-bottom:   var(--aa-space-xs);
}

.aa-eyebrow::before {
  content:    '';
  display:    block;
  width:      28px;
  height:     0.5px;
  background: var(--aa-gold);
  flex-shrink: 0;
}

/* ============================================================
   6. NAVIGATION
   ============================================================ */

.aa-header {
  position:         sticky;
  top:              0;
  z-index:          1000;
  background:       var(--aa-bg-primary);
  border-bottom:    var(--aa-border-width) solid var(--aa-border);
  height:           72px;
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  padding:          0 var(--aa-gutter) 0 0;
}

/* Logo — WordPress custom_logo Wrapper nullen */
.aa-logo,
.aa-logo .custom-logo-link,
.aa-logo figure,
.aa-logo .wp-block-site-logo {
  display:     flex;
  align-items: center;
  margin:      0 !important;
  padding:     0 !important;
  text-decoration: none;
}

.aa-logo img,
.aa-logo .custom-logo,
.aa-logo .custom-logo-link img {
  height:    44px;
  width:     auto;
  display:   block;
  margin:    0 !important;
  padding:   0 !important;
}

/* Hauptnavigation */
.aa-nav {
  display:     flex;
  gap:         28px;
  align-items: center;
  list-style:  none;
  margin:      0;
  padding:     0;
}

.aa-nav a {
  font-size:       var(--aa-text-xs);
  font-weight:     400;
  letter-spacing:  var(--aa-tracking-nav);
  text-transform:  uppercase;
  color:           var(--aa-text-secondary);
  text-decoration: none;
  padding-bottom:  4px;
  border-bottom:   var(--aa-border-width) solid transparent;
  transition:      color 0.2s ease, border-color 0.2s ease;
}

.aa-nav a:hover,
.aa-nav .current-menu-item > a {
  color:        var(--aa-text-primary);
  border-color: var(--aa-gold);
  border-width: var(--aa-border-width-em);
}

/* Sprach-Toggle */
/* CTA Button Navigation */
.aa-nav-cta {
  font-size:       var(--aa-text-xs);
  font-family:     var(--aa-font-sans);
  font-weight:     500;
  padding:         9px 22px;
  background:      var(--aa-black);
  color:           var(--aa-white);
  border:          none;
  border-radius:   var(--aa-radius-sm);
  cursor:          pointer;
  letter-spacing:  1px;
  text-transform:  uppercase;
  transition:      background 0.2s ease;
  text-decoration: none;
  display:         inline-flex;
  align-items:     center;
}

.aa-nav-cta:hover {
  background: var(--aa-gold);
  color:      var(--aa-white);
}

/* Mobile Menu Toggle */
.aa-menu-toggle {
  display: none;
}

/* ============================================================
   7. HERO-SECTION
   ============================================================ */

.aa-hero {
  display:     grid;
  grid-template-columns: 1fr 1fr;
  min-height:  88vh;
  background:  var(--aa-bg-primary);
  border-bottom: var(--aa-border-width) solid var(--aa-border);
}

.aa-hero__left {
  padding:         80px var(--aa-gutter);
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  border-right:    var(--aa-border-width) solid var(--aa-border);
}

.aa-hero__h1 {
  font-size:      var(--aa-text-5xl);
  line-height:    var(--aa-leading-tight);
  letter-spacing: -1.5px;
  margin-bottom:  var(--aa-space-md);
}

.aa-hero__h1 em {
  font-style: normal;
  color:      var(--aa-gold);
}

.aa-hero__sub {
  font-size:   var(--aa-text-base);
  line-height: var(--aa-leading-relaxed);
  color:       var(--aa-text-secondary);
  max-width:   440px;
  margin-bottom: var(--aa-space-lg);
}

.aa-hero__actions {
  display:     flex;
  gap:         14px;
  align-items: center;
  margin-bottom: var(--aa-space-xl);
}

.aa-hero__contact {
  display: flex;
  gap:     28px;
}

.aa-hero__contact-item {
  display:        flex;
  flex-direction: column;
  gap:            3px;
}

.aa-hero__contact-label {
  font-size:      var(--aa-text-xs);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color:          var(--aa-text-muted);
}

.aa-hero__contact-value {
  font-size:  var(--aa-text-sm);
  color:      var(--aa-text-secondary);
  font-weight: 400;
}

.aa-hero__right {
  background:   var(--aa-gray-100);
  position:     relative;
  overflow:     hidden;
  display:      flex;
  flex-direction: column;
  justify-content: flex-end;
  padding:      var(--aa-space-lg) var(--aa-space-md);
}

.aa-hero__image {
  position:        absolute;
  inset:           0;
  object-fit:      cover;
  width:           100%;
  height:          100%;
}

.aa-hero__stat-bar {
  position:     relative;
  z-index:      2;
  background:   var(--aa-bg-primary);
  border:       var(--aa-border-width) solid var(--aa-border);
  border-radius: var(--aa-radius-lg);
  padding:      18px var(--aa-space-md);
  display:      grid;
  grid-template-columns: repeat(3, 1fr);
}

.aa-hero__stat {
  text-align: center;
}

.aa-hero__stat + .aa-hero__stat {
  border-left: var(--aa-border-width) solid var(--aa-border);
}

.aa-hero__stat-num {
  font-size:      26px;
  font-weight:    500;
  color:          var(--aa-text-primary);
  letter-spacing: -0.5px;
}

.aa-hero__stat-label {
  font-size:      var(--aa-text-xs);
  color:          var(--aa-text-secondary);
  letter-spacing: 0.5px;
  margin-top:     2px;
  text-transform: uppercase;
}

/* ============================================================
   8. SECTION-SYSTEM
   ============================================================ */

.aa-section {
  padding:       var(--aa-space-2xl) var(--aa-gutter);
  border-bottom: var(--aa-border-width) solid var(--aa-border);
}

.aa-section--alt {
  background: var(--aa-bg-secondary);
}

.aa-section--dark {
  background: var(--aa-black);
  border-color: transparent;
}

.aa-section__header {
  display:         flex;
  align-items:     flex-end;
  justify-content: space-between;
  margin-bottom:   52px;
}

.aa-section__link {
  font-size:       var(--aa-text-sm);
  color:           var(--aa-text-secondary);
  text-decoration: none;
  border-bottom:   var(--aa-border-width) solid var(--aa-border);
  padding-bottom:  2px;
  transition:      color 0.2s;
}

.aa-section__link:hover {
  color: var(--aa-text-primary);
}

/* ============================================================
   9. GRID-SYSTEM
   ============================================================ */

/* Projekte-Grid */
.aa-projects-grid {
  display:               grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:                   1px;
  background:            var(--aa-border);
  border:                var(--aa-border-width) solid var(--aa-border);
  border-radius:         var(--aa-radius-md);
  overflow:              hidden;
}

/* Leistungen-Grid */
.aa-services-grid {
  display:               grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:                   1px;
  background:            var(--aa-border);
  border:                var(--aa-border-width) solid var(--aa-border);
  border-radius:         var(--aa-radius-md);
  overflow:              hidden;
}

/* Team-Grid */
.aa-team-grid {
  display:               grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:                   1px;
  background:            var(--aa-border);
  border:                var(--aa-border-width) solid var(--aa-border);
  border-radius:         var(--aa-radius-md);
  overflow:              hidden;
}

/* Werte-Grid */
.aa-values-grid {
  display:        flex;
  flex-direction: column;
  border:         var(--aa-border-width) solid var(--aa-border);
  border-radius:  var(--aa-radius-md);
  overflow:       hidden;
}

/* Two-Column */
.aa-grid-2 {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   72px;
  align-items:           center;
}

/* ============================================================
   10. KARTEN-KOMPONENTEN
   ============================================================ */

/* Projekt-Karte */
.aa-project-card {
  background:   var(--aa-gray-100);
  aspect-ratio: 4 / 3;
  position:     relative;
  overflow:     hidden;
  cursor:       pointer;
}

.aa-project-card.aa-project-card--wide {
  grid-column: span 2;
}

.aa-project-card__image {
  position:   absolute;
  inset:      0;
  object-fit: cover;
  width:      100%;
  height:     100%;
  transition: transform 0.5s ease;
}

.aa-project-card:hover .aa-project-card__image {
  transform: scale(1.03);
}

.aa-project-card__overlay {
  position:       absolute;
  inset:          0;
  background:     var(--aa-black);
  opacity:        0;
  transition:     opacity 0.3s ease;
  display:        flex;
  flex-direction: column;
  justify-content: flex-end;
  padding:        24px;
}

.aa-project-card:hover .aa-project-card__overlay {
  opacity: 0.9;
}

.aa-project-card__type {
  font-size:      10px;
  color:          var(--aa-gold-light);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom:  6px;
}

.aa-project-card__name {
  font-size:   16px;
  font-weight: 500;
  color:       var(--aa-white);
}

.aa-project-card__meta {
  font-size:  12px;
  color:      #999;
  margin-top: 4px;
}

/* Leistungs-Karte */
.aa-service-card {
  background: var(--aa-bg-primary);
  padding:    32px var(--aa-space-md);
}

.aa-service-card__phase {
  font-size:       var(--aa-text-xs);
  color:           var(--aa-gold);
  font-weight:     500;
  letter-spacing:  1px;
  margin-bottom:   var(--aa-space-xs);
}

.aa-service-card__title {
  font-size:     var(--aa-text-md);
  font-weight:   500;
  color:         var(--aa-text-primary);
  margin-bottom: var(--aa-space-xs);
  line-height:   var(--aa-leading-snug);
}

.aa-service-card__desc {
  font-size:   var(--aa-text-sm);
  color:       var(--aa-text-secondary);
  line-height: var(--aa-leading-relaxed);
}

/* Werte-Karte */
.aa-value-item {
  background:    var(--aa-bg-primary);
  padding:       22px 26px;
  border-bottom: var(--aa-border-width) solid var(--aa-border);
  display:       flex;
  gap:           18px;
  align-items:   flex-start;
}

.aa-value-item:last-child {
  border-bottom: none;
}

.aa-value-item__dot {
  width:        7px;
  height:       7px;
  border-radius: 50%;
  background:   var(--aa-gold);
  margin-top:   7px;
  flex-shrink:  0;
}

.aa-value-item__title {
  font-size:     14px;
  font-weight:   500;
  color:         var(--aa-text-primary);
  margin-bottom: 4px;
}

.aa-value-item__text {
  font-size:   var(--aa-text-sm);
  color:       var(--aa-text-secondary);
  line-height: var(--aa-leading-relaxed);
}

/* Team-Karte */
.aa-team-card {
  background:     var(--aa-bg-primary);
  display:        flex;
  flex-direction: column;
}

.aa-team-card__photo {
  background:  var(--aa-gray-100);
  aspect-ratio: 3 / 4;
  position:    relative;
  overflow:    hidden;
}

.aa-team-card__photo img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.aa-team-card__role-tag {
  position:   absolute;
  bottom:     0;
  left:       0;
  right:      0;
  padding:    12px 20px;
  background: var(--aa-black);
}

.aa-team-card__role-tag span {
  font-size:      10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color:          var(--aa-gold-light);
}

.aa-team-card__info {
  padding: 24px 26px 28px;
  flex:    1;
}

.aa-team-card__name {
  font-size:     18px;
  font-weight:   500;
  color:         var(--aa-text-primary);
  margin-bottom: 4px;
}

.aa-team-card__position {
  font-size:       12px;
  letter-spacing:  1px;
  text-transform:  uppercase;
  color:           var(--aa-text-muted);
  margin-bottom:   16px;
}

.aa-team-card__divider {
  width:        28px;
  height:       0.5px;
  background:   var(--aa-gold);
  margin-bottom: 16px;
}

.aa-team-card__bio {
  font-size:   var(--aa-text-sm);
  color:       var(--aa-text-secondary);
  line-height: var(--aa-leading-relaxed);
}

/* ============================================================
   11. BUTTONS
   ============================================================ */

.aa-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--aa-font-sans);
  font-size:       var(--aa-text-xs);
  font-weight:     500;
  letter-spacing:  1px;
  text-transform:  uppercase;
  border-radius:   var(--aa-radius-sm);
  cursor:          pointer;
  transition:      all 0.2s ease;
  text-decoration: none;
  padding:         13px 30px;
  border:          var(--aa-border-width) solid transparent;
}

.aa-btn--primary {
  background: var(--aa-black);
  color:      var(--aa-white);
  border-color: var(--aa-black);
}

.aa-btn--primary:hover {
  background:   var(--aa-gold);
  border-color: var(--aa-gold);
  color:        var(--aa-white);
}

.aa-btn--outline {
  background:   transparent;
  color:        var(--aa-text-primary);
  border-color: var(--aa-border);
}

.aa-btn--outline:hover {
  border-color: var(--aa-text-primary);
  color:        var(--aa-text-primary);
}

.aa-btn--white {
  background:   var(--aa-white);
  color:        var(--aa-black);
  border-color: var(--aa-white);
}

.aa-btn--white:hover {
  background:   var(--aa-gold-pale);
  border-color: var(--aa-gold-pale);
}

.aa-btn--ghost {
  background:   transparent;
  color:        var(--aa-white);
  border-color: #444;
}

.aa-btn--ghost:hover {
  border-color: var(--aa-white);
}

/* ============================================================
   12. CTA-BALKEN
   ============================================================ */

.aa-cta-bar {
  padding:         72px var(--aa-gutter);
  background:      var(--aa-black);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             40px;
}

.aa-cta-bar__title {
  font-size:      34px;
  font-weight:    500;
  color:          var(--aa-white);
  letter-spacing: -0.5px;
  line-height:    var(--aa-leading-snug);
  margin:         0 0 var(--aa-space-xs);
}

.aa-cta-bar__sub {
  font-size: 14px;
  color:     #777;
}

.aa-cta-bar__actions {
  display:     flex;
  gap:         14px;
  flex-shrink: 0;
}

/* ============================================================
   13. FOOTER
   ============================================================ */

.aa-footer {
  padding:      72px var(--aa-gutter) 32px;
  background:   var(--aa-bg-primary);
  border-top:   var(--aa-border-width) solid var(--aa-border);
}

.aa-footer__top {
  display:               grid;
  grid-template-columns: 2fr 1fr;
  gap:                   80px;
  margin-bottom:         56px;
  align-items:           start;
}

.aa-footer__logo {
  margin-bottom: 20px;
}

.aa-footer__desc {
  font-size:   var(--aa-text-sm);
  color:       var(--aa-text-secondary);
  line-height: var(--aa-leading-relaxed);
  max-width:   320px;
  margin:      0 0 16px 0;
}

.aa-footer__ams {
  margin:      0;
  font-size:   var(--aa-text-xs);
  color:       var(--aa-text-muted);
  letter-spacing: 0.3px;
}

.aa-footer__ams a {
  color:         var(--aa-text-muted);
  border-bottom: var(--aa-border-width) solid var(--aa-border-light);
}

.aa-footer__col-title {
  font-size:       var(--aa-text-xs);
  font-weight:     500;
  letter-spacing:  1.5px;
  text-transform:  uppercase;
  color:           var(--aa-text-primary);
  margin:          0 0 20px 0;
}

.aa-footer__col a,
.aa-footer__col span {
  display:       block;
  font-size:     var(--aa-text-sm);
  color:         var(--aa-text-secondary);
  margin-bottom: 10px;
  transition:    color 0.2s;
  line-height:   1.6;
}

.aa-footer__col span:last-child,
.aa-footer__col a:last-child {
  margin-bottom: 0;
}

.aa-footer__col a:hover {
  color: var(--aa-text-primary);
}

.aa-footer__bottom {
  border-top:     var(--aa-border-width) solid var(--aa-border);
  padding-top:    24px;
  display:        flex;
  justify-content: space-between;
  align-items:    center;
  flex-wrap:      wrap;
  gap:            16px;
}

.aa-footer__legal {
  font-size: 12px;
  color:     var(--aa-text-muted);
  display:   flex;
  gap:       20px;
  flex-wrap: wrap;
  align-items: center;
}

.aa-footer__legal a {
  color: var(--aa-text-muted);
  transition: color 0.2s;
}

.aa-footer__legal a:hover {
  color: var(--aa-text-secondary);
}

/* ============================================================
   14. FILTER-LEISTE (Projekte)
   ============================================================ */

.aa-filter-bar {
  padding:       24px var(--aa-gutter);
  border-bottom: var(--aa-border-width) solid var(--aa-border);
  display:       flex;
  gap:           10px;
  align-items:   center;
  background:    var(--aa-bg-primary);
  flex-wrap:     wrap;
}

.aa-filter-btn {
  font-size:     12px;
  font-family:   var(--aa-font-sans);
  padding:       7px 16px;
  border:        var(--aa-border-width) solid var(--aa-border);
  border-radius: var(--aa-radius-sm);
  background:    transparent;
  color:         var(--aa-text-secondary);
  cursor:        pointer;
  letter-spacing: 0.3px;
  transition:    all 0.2s ease;
}

.aa-filter-btn.active,
.aa-filter-btn:hover {
  background:   var(--aa-black);
  color:        var(--aa-white);
  border-color: var(--aa-black);
}

/* ============================================================
   15. FORMULAR-SYSTEM
   ============================================================ */

.aa-form-group {
  margin-bottom: 16px;
}

.aa-form-group label {
  display:        block;
  font-size:      var(--aa-text-xs);
  letter-spacing: 1px;
  text-transform: uppercase;
  color:          var(--aa-text-muted);
  margin-bottom:  7px;
}

.aa-form-group input,
.aa-form-group select,
.aa-form-group textarea {
  width:       100%;
  padding:     11px 14px;
  border:      var(--aa-border-width) solid var(--aa-border);
  border-radius: var(--aa-radius-sm);
  font-size:   14px;
  font-family: var(--aa-font-sans);
  color:       var(--aa-text-primary);
  background:  var(--aa-bg-primary);
  outline:     none;
  transition:  border-color 0.2s ease;
  appearance:  none;
}

.aa-form-group input:focus,
.aa-form-group select:focus,
.aa-form-group textarea:focus {
  border-color: var(--aa-text-primary);
}

.aa-form-group textarea {
  min-height: 100px;
  resize:     vertical;
}

.aa-form-consent {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  margin:      18px 0;
}

.aa-form-consent input[type="checkbox"] {
  width:      16px;
  height:     16px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--aa-black);
  cursor:     pointer;
}

.aa-form-consent label {
  font-size:   12px;
  color:       var(--aa-text-secondary);
  line-height: 1.5;
  cursor:      pointer;
}

/* ============================================================
   16. BREADCRUMB
   ============================================================ */

.aa-breadcrumb {
  padding:       16px var(--aa-gutter);
  border-bottom: var(--aa-border-width) solid var(--aa-border);
  font-size:     12px;
  color:         var(--aa-text-muted);
  display:       flex;
  gap:           8px;
  align-items:   center;
  background:    var(--aa-bg-primary);
}

.aa-breadcrumb a {
  color: var(--aa-text-muted);
  transition: color 0.2s;
}

.aa-breadcrumb a:hover {
  color: var(--aa-text-secondary);
}

/* ============================================================
   17. BADGES & TAGS
   ============================================================ */

.aa-badge {
  display:        inline-block;
  font-size:      9px;
  font-weight:    500;
  padding:        3px 8px;
  border-radius:  var(--aa-radius-sm);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.aa-badge--gold {
  background: var(--aa-gold);
  color:      var(--aa-white);
}

.aa-badge--dark {
  background: var(--aa-black);
  color:      var(--aa-white);
}

/* ============================================================
   18. HILFSPROGRAMME
   ============================================================ */

.aa-sr-only {
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0, 0, 0, 0);
  white-space: nowrap;
  border:     0;
}

.aa-text-gold    { color: var(--aa-gold); }
.aa-text-muted   { color: var(--aa-text-muted); }
.aa-text-white   { color: var(--aa-white); }

.aa-bg-black     { background: var(--aa-black); }
.aa-bg-alt       { background: var(--aa-bg-secondary); }

/* ============================================================
   19. RESPONSIVE — TABLET (max 1024px)
   ============================================================ */

@media (max-width: 1024px) {
  :root { --aa-gutter: 32px; }

  h1 { font-size: 40px; }
  h2 { font-size: 28px; }

  /* Header */
  .aa-header { padding: 0 var(--aa-gutter) 0 0; }

  /* Hero */
  .aa-hero { grid-template-columns: 1fr; min-height: auto; }
  .aa-hero__right { min-height: 400px; border-right: none; }
  .aa-hero__left { border-right: none; padding: 56px var(--aa-gutter); }

  /* Seiten-Layouts */
  .aa-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aa-grid-2 { grid-template-columns: 1fr; gap: 48px; }

  /* Footer */
  .aa-footer__top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .aa-cta-bar { flex-direction: column; align-items: flex-start; gap: 24px; }

  /* ── HTML-Widget Seiten (aa-page) ── */

  /* Allgemeine Sektionen */
  .aa-page [class*="-hero"],
  .aa-page [class*="-section"],
  .aa-page [class*="-approach"],
  .aa-page [class*="-ams"],
  .aa-page [class*="-haltung"],
  .aa-page [class*="-team"],
  .aa-page [class*="-initiativ"],
  .aa-page [class*="-kultur"],
  .aa-page [class*="-jobs-section"],
  .aa-page [class*="-karriere-hero"],
  .aa-page .aa-contact-body,
  .aa-page .aa-form-wrap,
  .aa-page .aa-quote-bar,
  .aa-page .aa-cta { padding-left: 32px !important; padding-right: 32px !important; }

  /* Zweispaltige Layouts aufbrechen */
  .aa-page .aa-phil-hero,
  .aa-page .aa-contact-hero,
  .aa-page .aa-team-hero,
  .aa-page .aa-karriere-hero { grid-template-columns: 1fr !important; }

  .aa-page .aa-approach__header,
  .aa-page .aa-ams__grid,
  .aa-page .aa-team-preview__grid,
  .aa-page .aa-initiativ__grid,
  .aa-page .aa-kultur__header,
  .aa-page .aa-jobs-section__header,
  .aa-page .aa-contact-body { grid-template-columns: 1fr !important; }

  /* Mitglied-Karten */
  .aa-page .aa-member { grid-template-columns: 200px 1fr; }
}

/* ============================================================
   20. RESPONSIVE — MOBIL (max 768px)
   ============================================================ */

@media (max-width: 768px) {
  :root { --aa-gutter: 20px; }

  h1 { font-size: 30px; letter-spacing: -0.5px; }
  h2 { font-size: 22px; }

  /* ── HEADER MOBILE ── */
  .aa-header {
    padding: 0 var(--aa-gutter);
    height: 60px;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }

  /* Logo verkleinern */
  .aa-logo img,
  .aa-logo svg { height: 32px !important; width: auto !important; }

  /* Desktop-CTA Wrapper (neuer Ansatz ohne CSS-Spezifitäts-Konflikte) */
  .aa-desktop-cta { display: none !important; }

  /* Navigation verstecken — gilt auch für jedes ul im Header-Nav */
  .aa-nav,
  #aa-main-nav > ul,
  #aa-main-nav .menu { display: none !important; }

  /* Hamburger zeigen */
  .aa-menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    color: var(--aa-text-primary);
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }

  /* Rechte Header-Seite */
  .aa-header__right {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
  }

  /* Offenes Menü — Fullscreen Overlay */
  .aa-nav.open,
  #aa-main-nav > ul.open,
  #aa-main-nav .menu.open {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: #fff !important;
    border-top: 0.5px solid #e0dedd !important;
    padding: 24px 24px 32px !important;
    gap: 0 !important;
    z-index: 99999 !important;
    overflow-y: auto !important;
    margin: 0 !important;
    list-style: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .aa-nav.open li,
  #aa-main-nav > ul.open li,
  #aa-main-nav .menu.open li {
    border-bottom: 0.5px solid #f0efed !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .aa-nav.open li:last-child,
  #aa-main-nav > ul.open li:last-child,
  #aa-main-nav .menu.open li:last-child { border-bottom: none !important; }
  .aa-nav.open li a,
  #aa-main-nav > ul.open li a,
  #aa-main-nav .menu.open li a {
    display: block !important;
    padding: 22px 4px !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    color: #0f0f0f !important;
    letter-spacing: -0.3px !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
  }
  .aa-nav.open li a:active,
  #aa-main-nav > ul.open li a:active { color: #B07D3A !important; }

  /* Body kann nicht mehr scrollen wenn Menü offen */
  body.aa-nav-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
  }


  /* ── ALLE REPEAT-GRIDS (Stat-Boxen, Nutzungsmix, Feature-Boxen): EINSPALTIG ──
     Egal ob repeat(2/3/4, 1fr) oder minmax — auf Mobile immer untereinander.
     KEIN horizontal-scroll, KEIN vertikaler Text. */
  .aa-page [style*="grid-template-columns"][style*="repeat"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    overflow-x: visible !important;
    gap: 1px !important;
  }
  .aa-page [style*="grid-template-columns"][style*="repeat"] > * {
    min-width: 0 !important;
    width: auto !important;
    flex-shrink: 1 !important;
  }
  /* Auch explizite 1fr-Ketten (ohne repeat) einspaltig */
  .aa-page [style*="grid-template-columns: 1fr 1fr"],
  .aa-page [style*="grid-template-columns:1fr 1fr"],
  .aa-page [style*="1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    display: grid !important;
  }

  /* ── TEXT-UMBRUCH: nur normal umbrechen, NIEMALS Wörter mitten zerhacken ── */
  .aa-page p,
  .aa-page li,
  .aa-page div,
  .aa-page span,
  .aa-page h1,
  .aa-page h2,
  .aa-page h3 {
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none !important;
    max-width: 100% !important;
  }

  /* ── GLOBALER OVERFLOW-SCHUTZ ── */
  .aa-page { max-width: 100vw !important; overflow-x: hidden !important; }
  .elementor-widget-html { overflow-x: hidden !important; max-width: 100% !important; }

  /* ── FOOTER ── */
  .aa-footer { padding: 56px 24px 28px !important; }
  .aa-footer__top {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    margin-bottom: 40px !important;
  }
  .aa-footer__logo { margin-bottom: 16px !important; }
  .aa-footer__desc {
    font-size: 15px !important;
    line-height: 1.7 !important;
    max-width: 100% !important;
    margin: 0 0 14px 0 !important;
  }
  .aa-footer__ams {
    font-size: 13px !important;
    margin: 0 !important;
  }
  .aa-footer__col-title {
    font-size: 12px !important;
    letter-spacing: 1.8px !important;
    margin: 0 0 18px 0 !important;
  }
  .aa-footer__col a,
  .aa-footer__col span {
    font-size: 15px !important;
    margin-bottom: 12px !important;
    line-height: 1.6 !important;
  }
  .aa-footer__bottom {
    flex-direction: column !important;
    gap: 16px !important;
    text-align: left !important;
    align-items: flex-start !important;
    padding-top: 20px !important;
  }
  .aa-footer__legal {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    font-size: 12px !important;
  }
  .aa-footer__legal a { font-size: 12px !important; }

  /* ── GRIDS ── */
  .aa-projects-grid { grid-template-columns: 1fr; }
  .aa-project-card--wide { grid-column: span 1; }
  .aa-services-grid,
  .aa-team-grid { grid-template-columns: 1fr; }
  .aa-grid-2 { grid-template-columns: 1fr; gap: 40px; }

  /* ── SECTIONS ── */
  .aa-section { padding: 48px var(--aa-gutter); }
  .aa-section__header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .aa-cta-bar { flex-direction: column; align-items: flex-start; gap: 20px; }

  /* ── HTML-WIDGET SEITEN (aa-page) ── */

  /* Padding aller Sektionen reduzieren */
  .aa-page [class*="-hero"] { padding: 40px var(--aa-gutter) !important; }
  .aa-page [class*="-section"],
  .aa-page [class*="-approach"],
  .aa-page [class*="-ams"],
  .aa-page [class*="-haltung"],
  .aa-page [class*="-team-section"],
  .aa-page [class*="-team-preview"],
  .aa-page [class*="-initiativ"],
  .aa-page [class*="-kultur"],
  .aa-page [class*="-jobs-section"],
  .aa-page .aa-form-wrap,
  .aa-page .aa-contact-sidebar,
  .aa-page .aa-quote-bar,
  .aa-page .aa-team-quote { padding: 40px var(--aa-gutter) !important; }

  .aa-page .aa-cta { padding: 40px var(--aa-gutter) !important; flex-direction: column !important; align-items: flex-start !important; gap: 24px !important; }
  .aa-page .aa-cta__actions { flex-direction: column !important; width: 100% !important; }
  .aa-page .aa-btn { width: 100% !important; justify-content: center !important; }

  /* Alle zweispaltigen Grids auf 1 Spalte */
  .aa-page .aa-phil-hero,
  .aa-page .aa-contact-hero,
  .aa-page .aa-contact-body,
  .aa-page .aa-team-hero,
  .aa-page .aa-karriere-hero { grid-template-columns: 1fr !important; }

  .aa-page .aa-contact-hero__right { grid-template-columns: 1fr 1fr !important; }

  .aa-page .aa-approach__header,
  .aa-page .aa-approach__grid,
  .aa-page .aa-ams__grid,
  .aa-page .aa-haltung__grid,
  .aa-page .aa-team-preview__grid,
  .aa-page .aa-team-hero,
  .aa-page .aa-initiativ__grid,
  .aa-page .aa-kultur__header,
  .aa-page .aa-kultur__grid,
  .aa-page .aa-jobs-section__header { grid-template-columns: 1fr !important; }

  /* Team-Karten vertikal */
  .aa-page .aa-member { grid-template-columns: 1fr !important; }
  .aa-page .aa-member__photo { min-height: 240px !important; border-right: none !important; border-bottom: 0.5px solid #e0dedd; }
  .aa-page .aa-member__info { padding: 24px 20px !important; }
  .aa-page .aa-member__name { font-size: 22px !important; }

  /* Formulare */
  .aa-page .aa-form-row { grid-template-columns: 1fr !important; }
  .aa-page .aa-form-wrap { border-right: none !important; border-bottom: 0.5px solid #e0dedd; }

  /* Kontakt-Sidebar */
  .aa-page .aa-contact-body { grid-template-columns: 1fr !important; }
  .aa-page .aa-contact-sidebar { padding: 32px var(--aa-gutter) !important; }

  /* Karte */
  .aa-page .aa-map-caption { padding: 14px var(--aa-gutter) !important; flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
  .aa-page .aa-map-frame { height: 260px !important; }

  /* Zitat-Bereiche */
  .aa-page .aa-quote-bar__text { font-size: 17px !important; }
  .aa-page .aa-team-quote__text { font-size: 17px !important; }

  /* H1-Größen */
  .aa-page .aa-phil-hero__h1 { font-size: 30px !important; letter-spacing: -0.5px !important; }
  .aa-page .aa-contact-hero__h1 { font-size: 30px !important; letter-spacing: -0.5px !important; }
  .aa-page .aa-team-hero__h1 { font-size: 30px !important; }
  .aa-page .aa-karriere-hero__h1 { font-size: 30px !important; }

  /* Helden-Fakten */
  .aa-page .aa-contact-hero__right { grid-template-columns: 1fr 1fr !important; }
  .aa-page .aa-team-hero__stats { flex-wrap: wrap !important; }

  /* Stellenanzeigen Innen-Grid */
  .aa-page [id^="job-"] > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Bewerbungsbox */
  .aa-page .aa-bewerbung-box__footer { flex-direction: column !important; gap: 8px !important; }
  .aa-page .aa-bewerbung-box__footer div { margin-left: 0 !important; text-align: left !important; }

  /* AMS-Box */
  .aa-page .aa-ams-logo { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }

  /* Karriere-Join Box */
  .aa-page .aa-team-join { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
  .aa-page .aa-team-join .aa-btn { width: auto !important; }

  /* Impressum/Datenschutz */
  .aa-legal-hero { padding: 36px var(--aa-gutter) 28px !important; }
  .aa-legal-hero h1 { font-size: 26px !important; }
  .aa-legal-body { padding: 32px var(--aa-gutter) 56px !important; }
  .aa-toc { padding: 18px var(--aa-gutter) !important; }
  .aa-data-row { flex-direction: column !important; }
  .aa-data-label { min-width: unset !important; border-right: none !important; border-bottom: 0.5px solid #e0dedd !important; }
  .aa-warning { padding: 14px var(--aa-gutter) !important; }

  /* Cookie-Banner */
  #aa-cookie-modal { margin: 0 !important; border-radius: 0 !important; max-height: 90vh !important; overflow-y: auto !important; }
  .aa-cookie-overlay,
  #aa-cookie-overlay { align-items: flex-end !important; }
  .aa-cb-foot { flex-direction: column !important; }
  .aa-cb-btn { width: 100% !important; text-align: center !important; }
}

/* ============================================================
   20b. RESPONSIVE — KLEIN-MOBIL (max 480px)
   ============================================================ */

@media (max-width: 480px) {
  h1 { font-size: 26px !important; }

  .aa-page .aa-contact-hero__right { grid-template-columns: 1fr 1fr !important; }
  .aa-page .aa-contact-hero__fact-num { font-size: 20px !important; }
  .aa-page .aa-approach__grid { grid-template-columns: 1fr !important; }
  .aa-page .aa-haltung__grid { grid-template-columns: 1fr !important; }

  /* Buttons nebeneinander auf sehr kleinen Screens */
  .aa-page .aa-cta__actions .aa-btn { font-size: 11px !important; padding: 12px 16px !important; }
}

/* ============================================================
   21. ELEMENTOR-ÜBERSCHREIBUNGEN
   ============================================================ */

/* Elementor-Standard-Abstände zurücksetzen */
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: 1440px;
}

/* Elementor-Widgets an unser System anpassen */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--aa-font-sans) !important;
}

.elementor-widget-text-editor p {
  font-family: var(--aa-font-sans) !important;
  font-size:   var(--aa-text-base) !important;
  line-height: var(--aa-leading-relaxed) !important;
  color:       var(--aa-text-secondary) !important;
}

/* Elementor-Button auf unser System */
.elementor-button {
  font-family:    var(--aa-font-sans) !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border-radius:  var(--aa-radius-sm) !important;
}

/* Verhindert dass Widget-CSS den Bauanfrage-Button auf Mobile wieder einblendet */
@media (max-width: 768px) {
  .aa-nav-cta,
  a.aa-nav-cta,
  .aa-header .aa-nav-cta,
  #aa-bauanfrage-btn { display: none !important; }
}

/* ============================================================
   22. PRINT
   ============================================================ */

@media print {
  .aa-header,
  .aa-footer,
  .aa-cta-bar,
  .aa-nav-cta {
    display: none !important;
  }
}

/* ============================================================
   23. NEUE SEITEN — Über uns (.aa-uu-) und Karriere (.aa-k-)
       Mobile-Padding und Grid-Aufbruch für die neuen Klassen
   ============================================================ */

@media (max-width: 1024px) {
  /* Über uns */
  .aa-page .aa-uu-hero,
  .aa-page .aa-uu-team,
  .aa-page .aa-uu-karriere,
  .aa-page .aa-uu-quote { padding-left: 32px !important; padding-right: 32px !important; }
  .aa-page .aa-uu-member { grid-template-columns: 220px 1fr !important; }

  /* Karriere */
  .aa-page .aa-k-hero,
  .aa-page .aa-k-jobs,
  .aa-page .aa-k-init,
  .aa-page .aa-k-cta { padding-left: 32px !important; padding-right: 32px !important; }
}

@media (max-width: 768px) {
  /* Über uns */
  .aa-page .aa-uu-hero,
  .aa-page .aa-uu-team,
  .aa-page .aa-uu-karriere,
  .aa-page .aa-uu-quote { padding-left: 20px !important; padding-right: 20px !important; }
  .aa-page .aa-uu-member { grid-template-columns: 1fr !important; }
  .aa-page .aa-uu-member__photo {
    border-right: none !important;
    border-bottom: 0.5px solid #e0dedd !important;
    min-height: 0 !important;
    height: 320px !important;
    max-height: 360px !important;
  }
  .aa-page .aa-uu-member__photo img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }
  /* Platzhalter (ohne Foto) kompakter */
  .aa-page .aa-uu-member__photo-ph {
    height: 220px !important;
    min-height: 0 !important;
  }
  /* Member-Textbereich: Abstände auf Mobile straffen */
  .aa-page .aa-uu-member__body { padding: 28px 20px !important; }
  .aa-page .aa-uu-member__name { font-size: 24px !important; margin-bottom: 4px !important; line-height: 1.2 !important; }
  .aa-page .aa-uu-member__role { font-size: 11px !important; margin-bottom: 10px !important; }
  .aa-page .aa-uu-member__sub { font-size: 13px !important; line-height: 1.5 !important; margin-bottom: 14px !important; }
  .aa-page .aa-uu-member__text { font-size: 14px !important; line-height: 1.7 !important; }
  .aa-page .aa-uu-karriere__inner { flex-direction: column !important; align-items: flex-start !important; gap: 24px !important; }

  /* Karriere */
  .aa-page .aa-k-hero,
  .aa-page .aa-k-jobs,
  .aa-page .aa-k-init,
  .aa-page .aa-k-cta { padding-left: 20px !important; padding-right: 20px !important; }
  .aa-page .aa-k-cta { flex-direction: column !important; align-items: flex-start !important; }
  .aa-page .aa-k-job__head { flex-wrap: wrap !important; }
}

/* ============================================================
   24. GLOBALE MOBILE-FIXES FÜR PROJEKTDETAILSEITEN
       (greift in allen aa-page Containern auf allen Projekt-Seiten)
   ============================================================ */

@media (max-width: 768px) {

  /* ── HERO BADGES: alle Overlay-Badges (EH55, Sanierung, Effizienzhaus, etc.) ── */
  .aa-page .aa-hero__eff-badge,
  .aa-page .aa-hero__san-band,
  .aa-page .aa-hero__eff-badge,
  .aa-page .aa-hero__san-band,
  .aa-page .aa-hero__sakral-badge,
  .aa-page [class*="hero__"][class*="badge"],
  .aa-page [class*="hero__"][class*="band"] {
    position: absolute !important;
    bottom: 10px !important;
    right: 10px !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    padding: 7px 11px !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
    background: rgba(15,15,15,0.82) !important;
    color: #fff !important;
    border-radius: 3px !important;
    z-index: 5 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 55% !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 5px !important;
    white-space: nowrap !important;
  }
  .aa-page .aa-hero__eff-num,
  .aa-page .aa-hero__sakral-value { font-size: 15px !important; display: inline !important; font-weight: 600 !important; line-height: 1 !important; margin: 0 !important; }
  .aa-page .aa-hero__eff-label,
  .aa-page .aa-hero__sakral-label { font-size: 9px !important; display: inline !important; margin: 0 !important; letter-spacing: 0.5px !important; opacity: 0.85 !important; }

  /* Großes Hintergrund-Wasserzeichen (z.B. "NERO" / "N") auf Mobile ausblenden */
  .aa-page .aa-hero__bg-text,
  .aa-page [class*="hero__bg-text"],
  .aa-page [class*="hero__watermark"] { display: none !important; }

  /* ── EYEBROW / TAG-LISTE: bei zu langen Tag-Reihen horizontal scrollbar ── */
  .aa-page .aa-hero__tag {
    flex-wrap: wrap !important;
    font-size: 11px !important;
    letter-spacing: 1.2px !important;
    line-height: 1.6 !important;
    word-break: normal !important;
  }

  /* ── 3-SPALTEN-NUTZUNGSMIX o. ä.: auf Mobile UNTEREINANDER statt vertikaler Text ── */
  .aa-page [style*="grid-template-columns: repeat(3"],
  .aa-page [style*="grid-template-columns:repeat(3"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1px !important;
    overflow: visible !important;
  }
  .aa-page [style*="grid-template-columns: repeat(3"] > *,
  .aa-page [style*="grid-template-columns:repeat(3"] > * {
    min-width: 0 !important;
    width: 100% !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  /* ── STAT-BOXEN (Bild-Overlay-Zahlen wie 118 / 18.672 / LPH 1-4) ── */
  .aa-page .aa-hero__stat-overlay,
  .aa-page [class*="hero__stat"] {
    position: relative !important;
    inset: auto !important;
    background: #f5f5f3 !important;
    color: #0f0f0f !important;
    padding: 16px !important;
    border-top: 0.5px solid #e0dedd !important;
  }

  /* ── BREADCRUMB ── */
  .aa-page .aa-breadcrumb {
    padding: 12px 20px !important;
    font-size: 12px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .aa-page .aa-breadcrumb::-webkit-scrollbar { display: none; }

  /* ── KENNDATEN: auf Mobile besser lesbar ── */
  .aa-page .aa-kenndaten {
    grid-template-columns: 1fr 1fr !important;
    gap: 1px !important;
  }
  .aa-page .aa-kd {
    padding: 14px 14px !important;
  }
  .aa-page .aa-kd__label {
    font-size: 9.5px !important;
    letter-spacing: 1px !important;
    margin-bottom: 4px !important;
  }
  .aa-page .aa-kd__value {
    font-size: 13px !important;
    line-height: 1.35 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  /* ── HERO-INFO: Eyebrow-Tags nicht vertikal brechen + Abstände straffen ── */
  .aa-page .aa-hero__info {
    padding: 28px 20px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .aa-page .aa-hero__tag {
    margin-bottom: 18px !important;
    order: 1 !important;
  }
  .aa-page .aa-hero__h1 {
    font-size: 28px !important;
    letter-spacing: -0.5px !important;
    line-height: 1.15 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    margin: 0 0 14px 0 !important;
    order: 2 !important;
  }
  .aa-page .aa-hero__location,
  .aa-page .aa-hero__sub {
    font-size: 13px !important;
    letter-spacing: 1px !important;
    line-height: 1.4 !important;
    margin: 0 0 18px 0 !important;
    order: 3 !important;
  }
  .aa-page .aa-hero__lead {
    font-size: 15px !important;
    line-height: 1.7 !important;
    margin: 0 !important;
    order: 4 !important;
  }

  /* ── HERO-BILD-Container (Projektseiten — div.aa-hero__img mit <img> drin) ── */
  .aa-page div.aa-hero__img {
    min-height: 280px !important;
    max-height: 360px !important;
    position: relative !important;
  }
  .aa-page div.aa-hero__img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
  /* Wenn .aa-hero__img direkt ein <img> ist (Startseite), soll's NICHT relative werden */

  /* ── GALERIE: 1 Spalte, gute Höhe ── */
  .aa-page .aa-gallery {
    grid-template-columns: 1fr !important;
    gap: 1px !important;
  }
  .aa-page .aa-gallery__item {
    aspect-ratio: 4/3 !important;
  }
  .aa-page .aa-gallery__caption {
    opacity: 1 !important;
    position: relative !important;
    background: #f5f5f3 !important;
    color: #0f0f0f !important;
    padding: 12px 14px !important;
    font-size: 12px !important;
    letter-spacing: 0.3px !important;
  }

  /* ── PLÄNE: 1 Spalte mit eigenem Aspect ── */
  .aa-page .aa-plans {
    grid-template-columns: 1fr !important;
    gap: 1px !important;
  }
  .aa-page .aa-plan-item {
    border-right: none !important;
  }
  .aa-page .aa-plan-item__img-wrap {
    padding-bottom: 65% !important;
  }
  .aa-page .aa-plan-item__label {
    padding: 14px 16px !important;
  }
  .aa-page .aa-plan-item__type {
    font-size: 10px !important;
    margin-bottom: 4px !important;
  }
  .aa-page .aa-plan-item__name {
    font-size: 14px !important;
  }

  /* ── PROJEKT-NAV: bessere Anordnung ── */
  .aa-page .aa-proj-nav,
  .aa-proj-nav {
    padding: 16px 20px !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    justify-content: space-between !important;
  }
  .aa-page .aa-proj-nav__btn,
  .aa-proj-nav__btn {
    font-size: 11px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .aa-page .aa-proj-nav__back,
  .aa-proj-nav__back {
    flex: 0 0 auto !important;
    order: 0 !important;
    font-size: 11px !important;
  }

  /* ── CTA: vollbreite Buttons ── */
  .aa-page .aa-cta,
  .aa-cta {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 20px !important;
    padding: 40px 20px !important;
    text-align: left !important;
  }
  .aa-page .aa-cta__actions,
  .aa-cta__actions {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }
  .aa-page .aa-cta__actions .aa-btn,
  .aa-cta__actions .aa-btn {
    width: 100% !important;
    justify-content: center !important;
  }
  .aa-page .aa-cta__title,
  .aa-cta__title {
    font-size: 22px !important;
    line-height: 1.25 !important;
  }
  .aa-page .aa-cta__sub,
  .aa-cta__sub {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  /* ── "Interesse an Planunterlagen…" Box ── */
  .aa-page [style*="background:#f5f5f3"][style*="display:flex"][style*="justify-content:space-between"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    padding: 18px !important;
  }
  .aa-page [style*="background:#f5f5f3"][style*="display:flex"] .aa-btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* ── 2-Spalten-Sektionen (Highlights, Beschreibungen) ── */
  .aa-page .aa-grid-2col {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    align-items: stretch !important;
  }

  /* ── HEADINGS in Sections ── */
  .aa-page .aa-section { padding: 48px 20px !important; }
  .aa-page .aa-section__title { font-size: 24px !important; line-height: 1.2 !important; letter-spacing: -0.4px !important; }
  .aa-page .aa-section--alt { padding: 48px 20px !important; }
  .aa-page .aa-section--dark { padding: 48px 20px !important; }

  /* ── LPH-Liste ── */
  .aa-page .aa-lph-list { gap: 1px !important; }
  .aa-page .aa-lph-item {
    padding: 14px 16px !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
  }
  .aa-page .aa-lph-badge {
    font-size: 10px !important;
    padding: 4px 8px !important;
    flex-shrink: 0 !important;
  }
  .aa-page .aa-lph-text {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  /* ── Bauherr/Bauherren-Sidebox auf Mobile besser ── */
  .aa-page [style*="margin-top:20px"][style*="padding:16px"],
  .aa-page [style*="margin-top:12px"][style*="padding:18px"],
  .aa-page [style*="margin-top:16px"][style*="padding:14px"] {
    padding: 16px 18px !important;
  }
}

/* ── EXTRA-SCHMAL (≤ 380px) — kleine Smartphones ── */
@media (max-width: 380px) {
  .aa-page .aa-hero__h1 { font-size: 24px !important; }
  .aa-page div.aa-hero__img { min-height: 240px !important; }
  .aa-page .aa-section__title { font-size: 21px !important; }
  .aa-page .aa-kenndaten { grid-template-columns: 1fr !important; }
  .aa-page .aa-cta__title { font-size: 19px !important; }
}

/* ============================================================
   25. STARTSEITE & ÜBERSICHTSSEITEN — Mobile
   ============================================================ */

@media (max-width: 768px) {

  /* ── Startseite: Projektgrid komplett 1-spaltig ── */
  .aa-page .aa-projects {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    grid-auto-rows: 240px !important;
    gap: 0 !important;
  }
  .aa-page .aa-project-card--wide {
    grid-column: 1 !important;
    grid-row: auto !important;
    height: 280px !important;
  }
  .aa-page .aa-project-card {
    border-right: none !important;
    border-bottom: 1px solid #e0dedd !important;
  }
  .aa-page .aa-project-card:last-child {
    border-bottom: none !important;
  }
  .aa-page .aa-project-card__overlay {
    opacity: 1 !important;
    background: linear-gradient(to top, rgba(15,15,15,0.85) 0%, rgba(15,15,15,0) 60%) !important;
    justify-content: flex-end !important;
    padding: 20px !important;
  }
  .aa-page .aa-project-card__name {
    font-size: 19px !important;
  }
  .aa-page .aa-project-card__meta {
    font-size: 12px !important;
  }

  /* ── Startseite: 4-Spalten Service-Cards → 1 Spalte ── */
  .aa-page .aa-services {
    grid-template-columns: 1fr !important;
    gap: 1px !important;
  }
  .aa-page .aa-service-card {
    padding: 24px 20px !important;
  }
  .aa-page .aa-service-card__title {
    font-size: 16px !important;
  }
  .aa-page .aa-service-card__desc {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  /* ── Section-Header (Eyebrow + Title + Link) ── */
  .aa-page .aa-section__header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    margin-bottom: 32px !important;
  }
  .aa-page .aa-section__link {
    font-size: 12px !important;
  }

  /* ── About-Sektion mit 2 Spalten ── */
  .aa-page .aa-about {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .aa-page .aa-about__text p {
    font-size: 15px !important;
    line-height: 1.75 !important;
  }
  .aa-page .aa-values {
    gap: 20px !important;
  }
  .aa-page .aa-value__title {
    font-size: 15px !important;
  }
  .aa-page .aa-value__text {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  /* ── Hero: zweispaltig → einspaltig, gut sichtbar ── */
  .aa-page .aa-hero[class*="--alt"],
  .aa-page section.aa-hero {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  /* ── Projekte-Übersichtsseite: Filterleiste scrollbar ── */
  .aa-page .aa-filters {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 8px !important;
    margin-right: -20px !important;
  }
  .aa-page .aa-filters::-webkit-scrollbar { display: none; }
  .aa-page .aa-filter-btn {
    flex-shrink: 0 !important;
    font-size: 12px !important;
    padding: 8px 14px !important;
  }

  /* ── Projekte-Übersichtsseite: Karten-Grid 1 Spalte ── */
  .aa-page .aa-projects-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .aa-page .aa-card {
    aspect-ratio: 4/3 !important;
  }
  .aa-page .aa-card__overlay {
    opacity: 1 !important;
    background: linear-gradient(to top, rgba(15,15,15,0.85) 0%, rgba(15,15,15,0) 55%) !important;
    justify-content: flex-end !important;
    padding: 18px !important;
  }
  .aa-page .aa-card__name {
    font-size: 18px !important;
  }

  /* ── Leistungen: LPH-Karten 1-spaltig ── */
  .aa-page .aa-lph-grid {
    grid-template-columns: 1fr !important;
    gap: 1px !important;
  }
  .aa-page .aa-lph-card {
    padding: 24px 20px !important;
  }

  /* ── Kontakt: Hero einspaltig ── */
  .aa-page .aa-contact-hero {
    padding: 56px 20px !important;
  }
  .aa-page .aa-contact-hero__h1 {
    font-size: 30px !important;
  }
  .aa-page .aa-contact-hero__sub {
    font-size: 15px !important;
  }
  .aa-page .aa-contact-body {
    grid-template-columns: 1fr !important;
  }
  .aa-page .aa-form-wrap {
    padding: 32px 20px !important;
    border-right: none !important;
    border-bottom: 0.5px solid #e0dedd !important;
  }
  .aa-page .aa-form-row {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .aa-page .aa-contact-sidebar {
    padding: 32px 20px !important;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    justify-content: flex-start !important;
  }
  /* Sidebar-Sektionen: Abstände straffen, NICHT strecken */
  .aa-page .aa-sidebar-section {
    padding-bottom: 22px !important;
    margin-bottom: 22px !important;
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .aa-page .aa-sidebar-item {
    font-size: 15px !important;
    line-height: 1.55 !important;
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
    justify-content: flex-start !important;
    margin-bottom: 10px !important;
    gap: 2px !important;
  }
  /* Ansprechpartner-Block: Name + Rolle enger */
  .aa-page .aa-contact-person__name,
  .aa-page .aa-sidebar-section strong { font-size: 16px !important; line-height: 1.3 !important; }
  /* Response-Badge (Wir antworten...) kompakter */
  .aa-page .aa-response-badge {
    padding: 16px 18px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  /* AMS-Groupe Logo-Box: nicht zu hoch */
  .aa-page .aa-sidebar-section [style*="background:#0f0f0f"] {
    padding: 14px 16px !important;
    min-height: 0 !important;
  }
  /* Map kompakt */
  .aa-page .aa-map-frame { height: 240px !important; }
  .aa-page .aa-map-caption { font-size: 12px !important; padding: 12px 16px !important; }
  /* Öffnungszeiten-Zeilen */
  .aa-page .aa-hours-row { font-size: 14px !important; padding: 8px 0 !important; }
  /* Formular-Felder: Labels und Inputs */
  .aa-page .aa-field label,
  .aa-page .aa-form label { font-size: 12px !important; letter-spacing: 1px !important; margin-bottom: 6px !important; }
  .aa-page .aa-field input,
  .aa-page .aa-field select,
  .aa-page .aa-field textarea { font-size: 15px !important; padding: 13px 14px !important; }
  .aa-page .aa-form-title { font-size: 22px !important; line-height: 1.25 !important; }
  .aa-page .aa-form-sub { font-size: 14px !important; line-height: 1.6 !important; margin-bottom: 24px !important; }
  /* "Oder rufen Sie direkt an" Box */
  .aa-page .aa-form [style*="background"][style*="border-radius"] { padding: 14px 16px !important; }
}