/* ------------------------------------------------------------------
   Landingpage-Hero — Bildhintergrund und Serif-Headline.
   Wird ausschliesslich auf der oeffentlichen Landingpage geladen.
   ------------------------------------------------------------------ */

:root{
  --ag-hero-serif:"Playfair Display","Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --ag-hero-cta:var(--ag-aqua);          /* Mobile-Entwurf nutzte #d9b991 */
  --ag-hero-ink:#eaf5f5;
  --ag-hero-nav-h:78px;
}

/* --- Grundgeruest -------------------------------------------------
   Das Hintergrundbild ist 1448x1086 (4:3). Auf die volle Bildhoehe
   gerechnet waere der Hero 75vw hoch - bei 1920px also 1440px. Deshalb
   wird bewusst beschnitten: 56vw zeigt rund 75 % der Bildhoehe, und
   object-position schiebt den Ausschnitt nach unten, sodass Himmel
   wegfaellt und Laptop samt Tisch stehen bleiben. */
.ag-hero-v2{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;min-height:clamp(600px,56vw,1080px);padding-top:clamp(112px,11vw,168px);color:#fff;background:var(--ag-petrol);overflow:hidden}
.ag-hero-v2-bg{position:absolute;inset:0;z-index:-2;display:block}
.ag-hero-v2-bg img{width:100%;height:100%;object-fit:cover;object-position:center 62%}
.ag-hero-v2::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(97deg,rgba(0,24,27,.94) 0%,rgba(0,28,32,.84) 30%,rgba(0,30,34,.48) 54%,rgba(0,30,34,.14) 76%,rgba(0,30,34,.05) 100%)}
.ag-hero-v2::after{content:"";position:absolute;right:6%;top:4%;width:min(30vw,420px);aspect-ratio:1;z-index:-1;opacity:.06;pointer-events:none;background:url("../../img/AuditGuide_Bildmarke_weiss.svg") center/contain no-repeat}

.ag-hero-v2-inner{position:relative;flex:1;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:start;gap:40px;padding-bottom:clamp(36px,5vw,80px)}

/* --- Textspalte --------------------------------------------------- */
.ag-hero-v2-copy{max-width:820px;min-width:0}
/* Beide Fassungen sollen zweizeilig bleiben - "Ihr Jahresprogramm?" ist
   die laengste Zeile und bestimmt die Breite. */
/* --- Badges als Umschalter der beiden Textkombinationen ------------- */
.ag-hero-v2-badges{display:flex;flex-direction:column;align-items:flex-start;gap:9px;margin:0 0 28px}
.ag-hero-v2-badge{display:inline-flex;align-items:center;gap:10px;padding:8px 18px;border:1px solid rgba(255,255,255,.26);border-radius:999px;background:rgba(255,255,255,.07);backdrop-filter:blur(14px) brightness(.78);color:rgba(255,255,255,.7);font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.01em;cursor:pointer;transition:color .3s ease,background .3s ease,border-color .3s ease}
.ag-hero-v2-badge::before{content:"";width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:rgba(255,255,255,.3);transition:background .3s ease,box-shadow .3s ease}
.ag-hero-v2-badge:hover{color:#fff;border-color:rgba(255,255,255,.44)}
.ag-hero-v2-badge:focus-visible{outline:3px solid var(--ag-aqua-2);outline-offset:3px}
.ag-hero-v2-badge.is-active{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5);color:#fff}
.ag-hero-v2-badge.is-active::before{background:var(--ag-aqua);box-shadow:0 0 0 4px rgba(25,239,228,.2)}

/* --- Wechsel zwischen den Textkombinationen -------------------------- */
/* Beide Fassungen liegen in derselben Rasterzelle: die Hoehe richtet sich
   nach der laengeren, es gibt also keinen Sprung beim Wechsel. */
.ag-hero-v2-rotator{display:grid}
.ag-hero-v2-slide{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease,visibility 0s linear .55s}
.ag-hero-v2-slide.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .55s ease,transform .55s ease,visibility 0s}
.ag-page .ag-hero-v2 h1{font-family:var(--ag-hero-serif);font-weight:500;font-size:clamp(34px,3.5vw,58px);line-height:1.03;letter-spacing:-.015em;margin:0 0 22px;color:#fff;text-wrap:balance}
.ag-page .ag-hero-v2-lead{max-width:47ch;margin:0;color:rgba(234,245,245,.82);font-size:clamp(16px,1.25vw,19px);font-weight:300;line-height:1.6}
.ag-hero-v2-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:34px}
.ag-hero-v2 .ag-btn-aqua{background:var(--ag-hero-cta);gap:10px;min-height:54px;padding:14px 26px;font-size:16px;box-shadow:0 14px 30px rgba(0,20,23,.35)}
.ag-hero-v2 .ag-btn-aqua:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(0,20,23,.42)}
.ag-hero-v2 .ag-btn-aqua svg{width:19px;height:19px;flex:0 0 19px}
.ag-hero-v2-ghost{display:inline-flex;align-items:center;gap:11px;min-height:54px;padding:14px 24px;border:1px solid rgba(255,255,255,.34);border-radius:10px;color:#fff!important;text-decoration:none;font-weight:600;font-size:16px;background:rgba(255,255,255,.04);transition:background .2s ease,border-color .2s ease}
.ag-hero-v2-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.6)}
.ag-hero-v2-ghost svg{width:21px;height:21px;flex:0 0 21px;color:var(--ag-aqua)}

/* --- Schwebende Funktions-Pills ----------------------------------- */
.ag-hero-v2-pills{position:relative;list-style:none;margin:34px 0 0;padding:0;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.ag-hero-v2-pill{position:relative;display:inline-flex;align-items:center;gap:11px;padding:14px 20px;border:1px solid rgba(255,255,255,.42);border-radius:999px;background:rgba(255,255,255,.14);backdrop-filter:blur(18px) saturate(140%) brightness(.72);color:#fff;font-size:14.5px;font-weight:600;white-space:nowrap;box-shadow:0 14px 34px rgba(0,18,21,.28)}
.ag-hero-v2-pill svg{width:19px;height:19px;flex:0 0 19px;color:rgba(255,255,255,.92)}
.ag-hero-v2-pill i{font-size:18px;line-height:1;flex:0 0 auto;color:rgba(255,255,255,.92)}
@supports not (backdrop-filter:blur(1px)){.ag-hero-v2-pill,.ag-hero-v2-badge{background:rgba(6,34,38,.72)}}
.ag-hero-v2-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:0 0 0 4px rgba(255,255,255,.16)}
/* Ab hier deckt das Bild die Breite ab; die Prozentwerte sind an der
   vermessenen Bildschirmflaeche des Laptops ausgerichtet (x 50-84 %,
   y 36-77 % des Heros), damit die Pills sie nicht verdecken. */
/* Ab hier waechst der Abstand zum Rand sonst mit der Fensterbreite, weil
   .ag-container bei 1180px deckelt und zentriert - links entsteht eine leere
   Flaeche, waehrend die Navigation randlos laeuft. Der Hero bekommt deshalb
   denselben fluiden Seitenabstand wie die Navigation. Die Textbreite bleibt
   durch .ag-hero-v2-copy auf 660px begrenzt, es wird also nichts breiter -
   der Block rueckt nur nach links. */
@media(min-width:1200px){
  .ag-hero-v2-inner{width:calc(100% - clamp(96px,11.4vw,240px));max-width:none}
}
@media(min-width:1200px){
  /* static, damit die Pills gegen den Hero (= das Bild) positionieren,
     nicht gegen den 1180px-Container. */
  .ag-hero-v2-inner{position:static}
  .ag-hero-v2-pills{position:absolute;inset:0;margin:0;display:block;pointer-events:none}
  .ag-hero-v2-pill{position:absolute;pointer-events:auto}
  /* Zwei Reihen statt Streuung: Umsetzungsplan und Nachweiseditor oben auf
     einer Linie, DocumentCheck und Jahresprogramm darunter, Nachweisfuehrung
     unten rechts neben dem Bildschirm. */
  /* Der Laptop ist im neuen Bild groesser: Bildschirm x 46-89 %, y 35-83 %
     des Heros. Alle Pills liegen deshalb ueber dem Bildschirm oder links
     davon - das Mockup bleibt vollstaendig sichtbar. */
  .ag-hero-v2-pill-plan  {top:12%; left:64%}
  .ag-hero-v2-pill-editor{top:12%; right:2%}
  .ag-hero-v2-pill-doc   {top:21%; left:47%}
  .ag-hero-v2-pill-year  {top:60%; right:0.5%}
}

/* --- Vertrauensband ----------------------------------------------- */
.ag-hero-v2-trust{position:relative;padding:26px 0 24px;background:#001417;border-top:1px solid rgba(255,255,255,.1);text-align:center}
.ag-hero-v2-trust-label{margin:0 0 16px;font-size:13px;font-weight:700;letter-spacing:.08em;color:rgba(234,245,245,.7)}
.ag-hero-v2-trust-list{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px clamp(40px,5.5vw,104px);margin:0;padding:0;list-style:none}
.ag-hero-v2-trust-list li{color:rgba(255,255,255,.86);font-size:16px;font-weight:600;letter-spacing:.02em}
.ag-hero-v2-trust-list .ag-hero-v2-reference-logo{display:flex;align-items:center;justify-content:center;width:166px;height:76px;padding:7px 12px;border:1px solid #fff;border-radius:11px;background:#fff;box-shadow:0 10px 24px rgba(0,15,18,.2)}
.ag-hero-v2-reference-logo img{display:block;width:auto;height:auto;object-fit:contain}
.ag-hero-v2-reference-logo.is-saxonia img{max-width:148px;max-height:50px}
.ag-hero-v2-reference-logo.is-innovatek img{max-width:94px;max-height:62px}
.ag-hero-v2-trust-list .ag-hero-v2-reference-logo.is-oevq{padding:7px 12px}
.ag-hero-v2-reference-logo.is-oevq a{display:flex;width:100%;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--ag-petrol)!important;text-decoration:none}
.ag-hero-v2-reference-logo.is-oevq img{max-width:68px;max-height:45px}
.ag-hero-v2-reference-logo.is-oevq span{font-size:12px;font-weight:700;line-height:1;letter-spacing:.02em}
.ag-hero-v2-reference-logo.is-oevq a:hover span,.ag-hero-v2-reference-logo.is-oevq a:focus-visible span{text-decoration:underline;text-underline-offset:2px}
.ag-hero-v2-trust-list .ag-hero-v2-auditor{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:5px;color:var(--ag-petrol);cursor:default;outline:none;overflow:visible}
.ag-hero-v2-auditor>strong{display:block;width:100%;font-size:11px;line-height:1.1;letter-spacing:.08em;text-align:center;text-transform:uppercase}
.ag-hero-v2-auditor>img{display:block;width:50px;height:50px;max-width:none;margin:0 auto;border-radius:50%;object-fit:cover}
.ag-hero-v2-auditor-quote{position:absolute;left:50%;bottom:calc(100% + 13px);z-index:4;width:min(350px,calc(100vw - 32px));padding:17px 18px;border:1px solid rgba(0,59,64,.16);border-radius:12px;background:#fff;color:var(--ag-petrol);box-shadow:0 20px 48px rgba(0,15,18,.28);text-align:left;opacity:0;visibility:hidden;transform:translate(-50%,9px);transition:opacity .2s ease,transform .2s ease,visibility .2s ease;pointer-events:none}
.ag-hero-v2-auditor-quote::after{content:"";position:absolute;left:50%;top:100%;width:13px;height:13px;background:#fff;border-right:1px solid rgba(0,59,64,.16);border-bottom:1px solid rgba(0,59,64,.16);transform:translate(-50%,-7px) rotate(45deg)}
.ag-hero-v2-auditor-quote blockquote{margin:0 0 10px;font-size:13px;font-weight:400;line-height:1.48;letter-spacing:0}
.ag-hero-v2-auditor-quote>span{display:block;font-size:13px;font-weight:700;line-height:1.3;letter-spacing:0}
.ag-hero-v2-auditor-quote>small{display:block;margin-top:2px;color:#607477;font-size:12px;font-weight:500;line-height:1.3;letter-spacing:0}
.ag-hero-v2-auditor:hover .ag-hero-v2-auditor-quote,.ag-hero-v2-auditor:focus .ag-hero-v2-auditor-quote,.ag-hero-v2-auditor:focus-within .ag-hero-v2-auditor-quote{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* --- Responsiv ---------------------------------------------------- */
/* Gestapelt duennen die Pills nach unten hin aus, damit die Spalte
   nicht hoeher wird als der Textblock daneben. */
@media(max-width:1199.98px){
  .ag-hero-v2-pill-eco{display:none}
}
@media(max-width:900px){
  .ag-hero-v2-inner{grid-template-columns:minmax(0,1fr);gap:0}
  .ag-hero-v2-pill-year,.ag-hero-v2-pill-eco{display:none}
}
@media(max-width:780px){
  .ag-hero-v2{min-height:min(178vw,760px);padding-top:clamp(96px,26vw,132px);justify-content:flex-start}
  .ag-hero-v2::before{background:linear-gradient(180deg,rgba(0,24,27,.92) 0%,rgba(0,28,32,.7) 34%,rgba(0,30,34,.24) 62%,rgba(0,30,34,.06) 100%)}
  .ag-hero-v2::after{display:none}
  .ag-page .ag-hero-v2 h1{font-size:clamp(30px,10.1vw,52px)}
  .ag-hero-v2-actions{gap:12px;margin-top:28px}
  .ag-hero-v2 .ag-btn-aqua,.ag-hero-v2-ghost{width:100%;justify-content:center}
  .ag-hero-v2-inner{padding-bottom:clamp(200px,58vw,340px)}
  .ag-hero-v2-pills{margin-top:26px}
  .ag-hero-v2-pill-editor{display:none}
  .ag-hero-v2-pill{font-size:13.5px;padding:12px 16px}
  .ag-hero-v2-trust-list{gap:10px 22px}
  .ag-hero-v2-trust-list li{font-size:14px}
  .ag-hero-v2-trust-list .ag-hero-v2-reference-logo{width:142px;height:68px}
  .ag-hero-v2-reference-logo.is-saxonia img{max-width:126px}
  .ag-hero-v2-reference-logo.is-innovatek img{max-width:82px;max-height:56px}
  .ag-hero-v2-reference-logo.is-oevq img{max-width:56px;max-height:37px}
  .ag-hero-v2-auditor>img{width:43px;height:43px}
}
@media(prefers-reduced-motion:reduce){
  .ag-hero-v2-slide{transform:none;transition:opacity .2s linear,visibility 0s linear .2s}
  .ag-hero-v2-slide.is-active{transition:opacity .2s linear,visibility 0s}.ag-hero-v2-auditor-quote{transition:none}}
@media(prefers-reduced-motion:reduce){
  .ag-hero-v2 .ag-btn-aqua:hover{transform:none}
}

/* Der Auditoren-Tooltip ist mittig ueber dem Logo verankert (left:50% +
   translate(-50%)). Das Vertrauensband liegt ausserhalb von .ag-hero-v2,
   dessen overflow:hidden greift also nicht - auf schmalen Fenstern schob der
   Tooltip die ganze Seite auf (452px statt 390px). Unter 1000px deshalb
   rechts verankern statt zentrieren: Tooltip rechts verankern. */
@media(max-width:1000px){
  .ag-hero-v2-auditor-quote{left:auto;right:0;width:min(320px,calc(100vw - 40px));transform:translate(0,9px)}
  .ag-hero-v2-auditor:hover .ag-hero-v2-auditor-quote,
  .ag-hero-v2-auditor:focus .ag-hero-v2-auditor-quote,
  .ag-hero-v2-auditor:focus-within .ag-hero-v2-auditor-quote{transform:translate(0,0)}
}