/* Seiten-CSS startseite — nur Unikat-Sektionen dieser Seite. Gehoert dem Seiten-Agenten.
   Stand 14.10.2026 (Seiten-Agent 1). Nur Tokens aus dem Design-System, keine px-Schriftgroessen.
   Unikate: Hero „Licht an“ (Variante C, zwei Bilder + Schalter), Willkommen, Leistungs-Kopf, Kontakt-Liste.
   Motion-Klassen (ax-textauf, ax-fuge, ax-maus, ax-x, ax-vwrap ...) liegen im Theme-style.css. */

/* ---------- 1  Hero „Licht an" (Variante C, live seit 14.10.2026, Agent „Hero live") ----------
   Zwei deckungsgleiche Visualisierungen: unten Licht aus, oben Licht an (Opacity-Einblendung
   beim Laden). Schalter (button[aria-pressed]) setzt .is-off/.is-on — JS: assets/js/pages/startseite.js.
   Kein Hinweis-Badge „Visualisierung" (Arthur 14.10.; Alt-Text sagt „Visualisierung").
   Text steht ab dem ersten Frame; animiert werden nur Bild, Lichtschein und Fuge. */
@keyframes ax-hero-an{from{opacity:0;}to{opacity:1;}}
@keyframes ax-hero-glow{from{opacity:0;}40%{opacity:0;}to{opacity:1;}}
@keyframes ax-hero-fuge{from{opacity:0;clip-path:inset(0 50% 0 50%);}to{opacity:1;clip-path:inset(0 0 0 0);}}

.ax-hero{position:relative;display:flex;align-items:flex-end;isolation:isolate;overflow:hidden;
  min-height:max(640px,min(100svh,960px));background-color:#05080b;}
.ax-hero__bilder{position:absolute;inset:0;z-index:0;}
.ax-hero__bilder img.ax-hero__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:30% 40%;}
.ax-hero__bilder img.ax-hero__img--an{animation:ax-hero-an 1.8s cubic-bezier(.3,.7,.35,1) .6s both;}
.ax-hero.is-off img.ax-hero__img--an{animation:none;opacity:0;transition:opacity .9s ease;}
.ax-hero.is-on img.ax-hero__img--an{animation:none;opacity:1;transition:opacity 1.4s cubic-bezier(.3,.7,.35,1);}
/* weicher Lichtschein an der Decke, kommt mit dem Licht */
.ax-hero__glow{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(60% 22% at 50% 6%,rgba(255,226,180,.22),transparent 70%);
  animation:ax-hero-glow 2.4s ease-out .2s both;}
.ax-hero.is-off .ax-hero__glow{opacity:0;animation:none;transition:opacity .9s;}
.ax-hero.is-on .ax-hero__glow{opacity:1;animation:none;transition:opacity 1.4s;}
/* Lesbarkeits-Schleier: links (Text) und unten (Fakten/Schalter) nur so dunkel wie fuer den Kontrast noetig
   (14.10. Arthur „zu dunkel": gemessen an/aus 1440/1024 – Lead >= 4,5, Eyebrow >= 3 mit ca. 8 % Reserve). */
.ax-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
   linear-gradient(90deg,rgba(8,12,17,.6) 0%,rgba(8,12,17,.55) 34%,rgba(8,12,17,.12) 56%,rgba(8,12,17,0) 66%),
   linear-gradient(180deg,rgba(8,12,17,.32) 0%,rgba(8,12,17,0) 16%,rgba(8,12,17,0) 70%,rgba(8,12,17,.5) 100%);}
.ax-hero__text,.ax-hero__facts{text-shadow:0 0 2px rgba(8,12,17,.55),0 1px 12px rgba(8,12,17,.5);}
.ax-hero__in{position:relative;z-index:2;width:100%;max-width:var(--container);margin:0 auto;
  padding:150px var(--space-gutter) clamp(56px,8vh,96px);}
.ax-hero__text{max-width:620px;}
.ax-hero__fuge{display:block;width:120px;height:2px;margin:0 0 22px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--color-accent) 20%,var(--color-white) 50%,var(--color-accent) 80%,transparent);
  box-shadow:var(--shadow-glow);animation:ax-hero-fuge 1.3s cubic-bezier(.22,.7,.3,1) .9s both;}
.ax-hero__text .eyebrow{line-height:1.1;margin:0 0 14px;}
.ax-hero__text h1{line-height:1.04;}
.ax-hero__text .lead{margin:22px 0 0;max-width:31em;line-height:1.55;}
.ax-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;}
/* Fakten (Icons als CSS-Maske: SVG in Text-Elementen ist nicht garantiert) */
.ax-hero__facts ul{display:flex;flex-wrap:wrap;gap:10px 28px;margin:34px 0 0;padding:0;list-style:none;}
.ax-hero__facts li{display:flex;align-items:center;gap:9px;margin:0;font-size:var(--text-sm);color:var(--color-text);}
.ax-hero__facts li::before,.ax-hero__switch::before{content:"";flex:none;width:18px;height:18px;background-color:var(--color-accent);
  -webkit-mask:var(--ax-icon) center/contain no-repeat;mask:var(--ax-icon) center/contain no-repeat;}
.ax-hero__fact--garantie{--ax-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M10 2.5 4 5v4.6c0 3.7 2.6 6.7 6 7.9 3.4-1.2 6-4.2 6-7.9V5l-6-2.5Z'/%3E%3Cpath d='m7.3 10 1.9 1.9 3.6-3.8'/%3E%3C/svg%3E");}
.ax-hero__fact--montage{--ax-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='7.3'/%3E%3Cpath d='M10 6v4.2l2.8 1.7'/%3E%3C/svg%3E");}
.ax-hero__fact--erfahrung{--ax-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='m10 2.8 2.1 4.4 4.8.6-3.5 3.3.9 4.8L10 13.6l-4.3 2.3.9-4.8-3.5-3.3 4.8-.6L10 2.8Z'/%3E%3C/svg%3E");}

/* Lichtschalter unten rechts (nur mit JS sichtbar) */
.ax-hero__meta{position:absolute;z-index:2;right:var(--space-gutter);bottom:28px;display:flex;gap:10px;align-items:center;}
button.ax-hero__switch{display:none;align-items:center;gap:9px;min-height:44px;margin:0;padding:0 16px;border-radius:var(--radius-pill);cursor:pointer;
  font-family:var(--font-body);font-weight:600;font-size:var(--text-xs);line-height:1;color:var(--color-white);
  background:rgba(8,12,17,.62);border:1px solid rgba(255,255,255,.18);box-shadow:none;text-shadow:none;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color .2s ease;}
.ax-js button.ax-hero__switch{display:inline-flex;}
button.ax-hero__switch:hover{border-color:var(--color-accent-glow);background:rgba(8,12,17,.62);}
button.ax-hero__switch:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;}
.ax-hero__switch{--ax-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M7.5 15.5h5M8 18h4M10 2.5a5.5 5.5 0 0 0-3.2 10c.5.4.7.9.7 1.5V14h5v-.1c0-.6.3-1.1.8-1.5A5.5 5.5 0 0 0 10 2.5Z'/%3E%3C/svg%3E");}
.ax-hero__switch::before{width:16px;height:16px;}

@media (max-width:767px){
  .ax-hero{display:block;min-height:0;--ax-band:clamp(340px,50svh,440px);background-color:var(--color-bg);}
  .ax-hero__bilder{top:58px;bottom:auto;height:calc(var(--ax-band) - 58px);}
  .ax-hero__bilder img.ax-hero__img{object-position:58% 40%;}
  .ax-hero__glow{bottom:auto;height:var(--ax-band);
    background:radial-gradient(90% 26% at 50% 10%,rgba(255,226,180,.2),transparent 70%);}
  .ax-hero::before{bottom:auto;height:var(--ax-band);
    background:linear-gradient(180deg,rgba(8,12,17,.55) 0%,rgba(8,12,17,0) 24%,rgba(8,12,17,0) 60%,var(--color-bg) 100%);}
  .ax-hero__in{padding-top:calc(var(--ax-band) - 56px);padding-bottom:40px;}
  .ax-hero__meta{top:calc(var(--ax-band) - 112px);right:16px;bottom:auto;}
  .ax-hero__actions .btn{flex:1 1 100%;}
}
@media (prefers-reduced-motion:reduce){
  .ax-hero__bilder img.ax-hero__img--an,.ax-hero__glow,.ax-hero__fuge{animation:none;}
  .ax-hero__bilder img.ax-hero__img--an,.ax-hero__glow{opacity:1;}
  .ax-hero__fuge{opacity:1;clip-path:none;}
  .ax-hero.is-on img.ax-hero__img--an,.ax-hero.is-off img.ax-hero__img--an,
  .ax-hero.is-on .ax-hero__glow,.ax-hero.is-off .ax-hero__glow{transition:none;}
}

/* ---------- 2  Willkommen (hell) ---------- */
.ax-welcome__inner{text-align:center;}
.ax-welcome__inner .statement{margin-top:var(--space-2xs);}
.ax-welcome__erklaer{margin-top:var(--space-lg);margin-inline:auto;max-width:var(--container-text);}

/* ---------- 3  Leistungen: Kopf links, Intro rechts ---------- */
.ax-start-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--space-lg);margin-bottom:var(--space-2xl);}
.ax-start-head h2{max-width:680px;}
.ax-start-head p{max-width:340px;}
@media (max-width:767px){.ax-start-head{margin-bottom:var(--space-xl);}}

/* ---------- Sprungmarken (Menue: /#leistungen, /#warum, /#kontakt) ---------- */
.ax-anker{display:block;height:0;overflow:hidden;}

/* ---------- 4  Kontakt: Info-Spalte ---------- */
.ax-kontakt-grid.container{align-items:start;}
.ax-kontakt-info h2{margin-bottom:var(--space-sm);}
.ax-kontakt-info .lead{margin-bottom:var(--space-xl);max-width:440px;}
.ax-kontakt-liste{display:flex;flex-direction:column;gap:var(--space-sm);}
a.ax-kontakt-item,a.ax-kontakt-item:visited{display:flex;align-items:center;gap:14px;min-height:44px;
  color:var(--color-text);text-decoration:none;}
a.ax-kontakt-item:hover .ax-kontakt-item__wert{color:var(--color-accent);}
.ax-kontakt-item svg.icon-box{padding:12px;overflow:visible;}
.ax-kontakt-item__text{display:flex;flex-direction:column;}
.ax-kontakt-item__label{display:block;font-size:var(--text-xs);color:var(--color-text-muted);}
.ax-kontakt-item__wert{display:block;font-size:var(--text-base);font-weight:600;color:var(--color-heading);
  transition:color .2s ease;}
.ax-kontakt-item__hinweis{display:block;font-size:var(--text-xs);color:var(--color-accent);}
@media (prefers-reduced-motion:reduce){.ax-kontakt-item__wert{transition:none;}}

/* --- Kundenstimmen / Google-Bewertungen (14.10.2026, Vorbild klassewohnen.de: Text links 3fr, Widget rechts 7fr) --- */
.ax-reviews-section{background:linear-gradient(180deg,#eef4fa 0%,#f7fafd 100%);}
.ax-reviews{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,7fr);gap:var(--space-xl);align-items:start;}
.ax-reviews__left{display:flex;flex-direction:column;gap:var(--space-sm);}
.ax-reviews__left h2{margin:0;}
.ax-reviews__left p{margin:0;color:var(--color-text);}
.ax-reviews__left .eyebrow{margin:0;}
.ax-reviews .ax-reviews__subhead{font-weight:600;color:var(--color-heading);}
.ax-reviews__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-xs);}
.ax-reviews__list li{position:relative;padding-left:1.7em;color:var(--color-heading);}
.ax-reviews__list li::before{content:"";position:absolute;left:0;top:.2em;width:1.15em;height:1.15em;border-radius:50%;
  background:var(--color-primary-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231670b6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3L15 7'/%3E%3C/svg%3E") center/70% no-repeat;}
.ax-reviews__cta{margin-top:var(--space-xs);}
/* Hinweis-Icon (UWG: Herkunft/Pruefung der Bewertungen) */
.ax-reviews__info{position:relative;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-left:.4em;vertical-align:.35em;
  border-radius:50%;border:1.5px solid var(--color-border-strong);color:var(--color-text);font:600 13px/1 var(--font-body);cursor:help;}
.ax-reviews__info::before{content:"i";}
.ax-reviews__info:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;}
.ax-reviews__tip{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);width:min(280px,70vw);padding:12px 14px;border-radius:12px;
  background:var(--color-ink);color:#fff;font:400 var(--text-xs)/1.45 var(--font-body);letter-spacing:0;text-transform:none;text-align:left;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s;z-index:5;}
.ax-reviews__info:hover .ax-reviews__tip,.ax-reviews__info:focus .ax-reviews__tip{opacity:1;visibility:visible;transition:opacity .2s ease;}
/* Platzhalter bis zum Trustindex-Shortcode */
.ax-reviews__placeholder{min-height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-xs);text-align:center;
  padding:var(--space-lg);border:2px dashed rgba(22,112,182,.35);border-radius:20px;background:rgba(255,255,255,.7);}
.ax-reviews__placeholder p{margin:0;}
.ax-reviews__ph-stars{font-size:28px;letter-spacing:4px;color:#f5b400;}
.ax-reviews__ph-title{font:600 var(--text-lg)/1.2 var(--font-head);color:var(--color-heading);}
.ax-reviews__ph-text{max-width:42ch;color:var(--color-text);}
@media (max-width:1024px){.ax-reviews{grid-template-columns:minmax(0,1fr);gap:var(--space-lg);}}
@media (max-width:600px){.ax-reviews__tip{left:auto;right:-8px;transform:none;}}
/* Trustindex rendert in <pre> mit fester Breite: Spalte darf nicht aufziehen (sonst mobil 2100 px Layoutbreite) */
.ax-reviews__left,.ax-reviews__right{min-width:0;max-width:100%;}
.ax-reviews__right pre.ti-widget{white-space:normal;max-width:100%;overflow:hidden;margin:0;font:inherit;}

/* Einsatzgebiet-Absatz im Kontaktblock (05.11.2026): Abstand vom Einleitungstext übernehmen, gleiche Breite wie der Text darüber */
.ax-kontakt-info > .lead:has(+ .ax-kontakt-gebiet){margin-bottom:16px}
.ax-kontakt-info > .ax-kontakt-gebiet{max-width:440px;margin-bottom:44px;font-size:inherit;line-height:1.6;opacity:.85}
