/* ============================================================
   HAFA 2026 — Content-Seiten-Layer
   Reskinnt den Contao-/PCT-Body OHNE framework.css, per CSS auf
   die von den Element-Templates ausgegebenen Klassen.
   Ergänzt hafa2026.css (Tokens, Typo, Buttons, Header/Footer).
   ============================================================ */

/* ---------- Content-Bereich (rendert $this->main) ---------- */
#hafa-main{padding-block:var(--space-8);}
#hafa-main .wrap{max-width:1240px;margin:0 auto;padding-inline:32px;}
#hafa-main .mod_article{margin-bottom:var(--space-7);}
#hafa-main .mod_article:last-child{margin-bottom:0;}

/* Standard-Inhaltselemente */
#hafa-main .ce_text,#hafa-main .ce_headline,#hafa-main .ce_image,
#hafa-main .ce_hyperlink,#hafa-main .ce_gallery{margin-bottom:var(--space-5);}
#hafa-main h1{font-size:var(--fs-h1);margin-bottom:var(--space-5);}
#hafa-main h2{font-size:var(--fs-h2);margin-bottom:var(--space-4);}
#hafa-main h3{font-size:var(--fs-h3);margin-bottom:var(--space-3);}
#hafa-main p{font-size:1.0625rem;line-height:1.7;color:var(--text-body);}
#hafa-main ul,#hafa-main ol{font-size:1.0625rem;line-height:1.7;color:var(--text-body);padding-left:1.3em;}
#hafa-main figure{margin:0;}
#hafa-main figure img{border-radius:var(--radius-lg);width:100%;height:auto;}
#hafa-main figure figcaption{font-size:var(--fs-sm);color:var(--text-subtle);margin-top:var(--space-2);}
#hafa-main a:not(.btn){color:var(--color-brand);}

/* ---------- PCT Autogrid (ohne framework.css) ---------- */
#hafa-main .autogrid_grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-6);align-items:start;}
#hafa-main .autogrid_row{display:flex;flex-wrap:wrap;gap:44px 40px;align-items:flex-start;margin-block:8px 40px;}
#hafa-main .autogrid_row.same_height{align-items:stretch;}
#hafa-main .autogrid_row > .column{flex:1 1 0;min-width:240px;}
#hafa-main .autogrid_row.no_gutter{gap:0;}
#hafa-main .column > .attributes{height:100%;}
#hafa-main .same-height-wrap{height:100%;}

/* ---------- PCT image_text_box / text_image_bar ---------- */
#hafa-main .image_text_box,#hafa-main .text_image_bar{display:flex;gap:var(--space-6);align-items:center;flex-wrap:wrap;}
#hafa-main .image_text_box .image_container,#hafa-main .text_image_bar .image_container{flex:1 1 300px;}
#hafa-main .image_text_box .text_container,#hafa-main .text_image_bar .text_container{flex:1 1 300px;}
#hafa-main .image_text_box img,#hafa-main .text_image_bar img{border-radius:var(--radius-lg);}

/* ---------- Divider ---------- */
#hafa-main .divider_extended,#hafa-main hr{border:0;border-top:1px solid var(--border);margin-block:var(--space-6);}

/* ---------- Buttons in Inhalt ---------- */
#hafa-main .ce_hyperlink a{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-body);font-weight:var(--fw-bold);border:2px solid var(--color-brand);border-radius:8px;padding:13px 22px;background:var(--color-brand);color:#fff;text-decoration:none;}
#hafa-main .ce_hyperlink a:hover{background:var(--color-brand-hover);border-color:var(--color-brand-hover);}

/* ---------- Header-Navigation (Contao-Modul 155, nur Top-Ebene) ---------- */
.nav--contao{display:flex;align-items:center;}
.nav--contao nav,.nav--contao ul{margin:0;padding:0;}
.nav--contao ul.level_1{list-style:none;display:flex;gap:26px;align-items:center;flex-wrap:wrap;}
.nav--contao ul.level_1 > li{position:relative;list-style:none;}
.nav--contao ul.level_2,.nav--contao ul.level_3,.nav--contao ul.level_4{display:none;} /* Dropdowns folgen später */
.nav--contao ul.level_1 > li > a,
.nav--contao ul.level_1 > li > strong{font-size:15px;font-weight:var(--fw-medium);color:var(--text-body);text-decoration:none;white-space:nowrap;padding:6px 0;display:block;position:relative;}
.nav--contao ul.level_1 > li > a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--color-brand);transition:right var(--dur-base) var(--ease-standard);}
.nav--contao ul.level_1 > li > a:hover{color:var(--color-brand);}
.nav--contao ul.level_1 > li > a:hover::after{right:0;}
.nav--contao ul.level_1 > li > strong.active,
.nav--contao ul.level_1 > li > a.trail{color:var(--color-brand);}

/* ---------- Header-Feinschliff ---------- */
.header__phone span,.header__phone b{white-space:nowrap;}
.header .wrap{gap:28px;}

/* ============================================================
   PCT-Custom-Elemente — Reskin (Schub 2)
   ============================================================ */

/* ---- productbox ---- */
#hafa-main .ce_productbox_inside{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:transform var(--dur-base),box-shadow var(--dur-base);}
#hafa-main .ce_productbox_inside:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
#hafa-main .ce_productbox .image-wrapper{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--surface-alt);}
#hafa-main .ce_productbox .image-wrapper img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow);}
#hafa-main .ce_productbox_inside:hover .image-wrapper img{transform:scale(1.05);}
#hafa-main .ce_productbox_content_top{padding:22px 22px 6px;}
#hafa-main .ce_productbox_content_top h2,#hafa-main .ce_productbox_content_top h3{font-size:20px;margin:0 0 8px;}
#hafa-main .ce_productbox_content_bottom{padding:0 22px 22px;margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
#hafa-main .ce_productbox .price{font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--color-brand);}

/* ---- teambox ---- */
#hafa-main .teambox_inside{height:100%;background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;}
#hafa-main .teambox_inside .image{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--surface-alt);}
#hafa-main .teambox_inside .image img{width:100%;height:100%;object-fit:cover;}
#hafa-main .teambox_content{padding:20px;}
#hafa-main .teambox_content .name{font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--text-strong);margin:0 0 2px;}
#hafa-main .teambox_content .function{color:var(--color-brand);font-weight:var(--fw-bold);font-size:12px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px;}
#hafa-main .teambox_content .description{font-size:14.5px;color:var(--text-muted);line-height:1.6;}
#hafa-main .teambox_content .phone,#hafa-main .teambox_content .email{font-size:14px;margin-top:6px;color:var(--text-body);}
#hafa-main .teambox .socials{display:flex;gap:12px;margin-top:12px;}
#hafa-main .teambox .socials a{color:var(--color-brand);font-size:17px;}

/* ---- teaserbox ---- */
#hafa-main .ce_teaserbox_inside{height:100%;background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;}
#hafa-main .ce_teaserbox .image_wrapper img{width:100%;height:auto;display:block;}
#hafa-main .ce_teaserbox .text_wrapper .margins{padding:22px;}
#hafa-main .ce_teaserbox h2,#hafa-main .ce_teaserbox h3{font-size:19px;margin:0 0 8px;}

/* ---- iconbox ---- */
#hafa-main .ce_iconbox_inside{text-align:center;padding:26px 22px;}
#hafa-main .ce_iconbox_icon{width:66px;height:66px;border-radius:50%;background:var(--color-brand-tint);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
#hafa-main .ce_iconbox_icon i,#hafa-main .ce_iconbox_icon .fa{color:var(--color-brand);font-size:26px;line-height:1;}
#hafa-main .ce_iconbox .content h2,#hafa-main .ce_iconbox .content h3,#hafa-main .ce_iconbox .content h4{font-size:19px;margin:0 0 8px;}
#hafa-main .ce_iconbox .content{font-size:15px;color:var(--text-muted);line-height:1.6;}

/* ---- testimonial ---- */
#hafa-main .ce_testimonial_inside{height:100%;background:#fff;border:1px solid var(--border);border-radius:14px;padding:28px;position:relative;}
#hafa-main .ce_testimonial .text,#hafa-main .ce_testimonial .text_inside{font-size:16px;line-height:1.65;color:var(--text-body);}
#hafa-main .ce_testimonial .fa-quote-right,#hafa-main .ce_testimonial .fa-quote-left{color:var(--red-100);font-size:30px;}
#hafa-main .ce_testimonial .info{margin-top:16px;}
#hafa-main .ce_testimonial .name{font-family:var(--font-display);font-weight:700;color:var(--text-strong);font-size:15px;}
#hafa-main .ce_testimonial .additional{font-size:13px;color:var(--text-subtle);}
#hafa-main .font_headline{font-family:var(--font-display)!important;}
#hafa-main .font_serif_2{font-family:var(--font-body)!important;}

/* ---- leadertext ---- */
#hafa-main .ce_leadertext{font-size:1.2rem;line-height:1.65;color:var(--text-muted);}
#hafa-main .ce_leadertext .divider,#hafa-main .ce_leadertext .divider-first{display:inline-block;height:3px;width:64px;background:var(--color-brand);margin:14px 0;border-radius:2px;}

/* ---- text_image_bar ---- */
/* Redaktionelles Layout statt Box: Text 7/12, Bild 5/12 sticky mit eigenem Format.
   Verhindert, dass lange Texte die Bildspalte strecken und das Bild beschneiden. */
#hafa-main .ce_text_image_bar .inside{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:start;}
#hafa-main .ce_text_image_bar .textbox{padding:0;}
#hafa-main .ce_text_image_bar .text-table,#hafa-main .ce_text_image_bar .text-cell{display:block;width:auto;height:auto;padding:0;}
#hafa-main .ce_text_image_bar .text-cell > .ce_headline{margin-bottom:22px;}
#hafa-main .ce_text_image_bar .text-cell .ce_text p{font-size:17px;line-height:1.75;}
#hafa-main .ce_text_image_bar .imagebox{position:sticky;top:118px;min-height:0;aspect-ratio:4/3;background-size:contain;background-repeat:no-repeat;background-position:center top;cursor:zoom-in;}
#hafa-main .ce_text_image_bar .imagebox .arrow{display:none;}
#hafa-main .ce_text_image_bar .mobile_image{display:none;width:100%;}
@media (max-width:860px){#hafa-main .ce_text_image_bar .inside{grid-template-columns:1fr;gap:28px;}#hafa-main .ce_text_image_bar .imagebox{display:none;}#hafa-main .ce_text_image_bar .mobile_image{display:block;}#hafa-main .ce_text_image_bar .mobile_image img{border-radius:16px;width:100%;}}

/* ---- divider / divider_extended ---- */
#hafa-main .ce_divider,#hafa-main .ce_divider_extended{display:flex;align-items:center;justify-content:center;gap:8px;margin-block:var(--space-6);}
#hafa-main .divider-one,#hafa-main .divider-three{display:inline-block;width:60px;height:2px;background:var(--border);}
#hafa-main .divider-two{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--color-brand);}

/* ---- gallery (Contao core) ---- */
#hafa-main .ce_gallery ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;padding:0;margin:0;}
#hafa-main .ce_gallery li{margin:0;}
#hafa-main .ce_gallery img{width:100%;height:100%;object-fit:cover;border-radius:10px;aspect-ratio:4/3;display:block;}

/* ---- accordion (ce_accordionSingle) ---- */
#hafa-main .ce_accordionSingle{border-bottom:1px solid var(--border);}
#hafa-main .ce_accordionSingle .toggler{cursor:pointer;padding:18px 0;font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--text-strong);display:flex;justify-content:space-between;align-items:center;gap:16px;letter-spacing:-.01em;}
#hafa-main .ce_accordionSingle .toggler::after{content:"+";color:var(--color-brand);font-size:26px;line-height:1;flex:none;}
#hafa-main .ce_accordionSingle .toggler:hover{color:var(--color-brand);}
#hafa-main .ce_accordionSingle .toggler.active{color:var(--color-brand);}
#hafa-main .ce_accordionSingle .toggler.active::after{content:"\2013";}
#hafa-main .ce_accordionSingle .accordion{overflow:hidden;}
#hafa-main .ce_accordionSingle .accordion .rstr,#hafa-main .ce_accordionSingle .accordion>div{padding:0 0 20px;color:var(--text-muted);line-height:1.65;font-size:15.5px;}

/* ---- before_after_slider (vanilla, ohne jQuery/twentytwenty) ---- */
#hafa-main .ce_before_after_slider [id^="ce_before_after_slider_"]{position:relative;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-md);user-select:none;line-height:0;}
#hafa-main .ce_before_after_slider img{width:100%;display:block;}
#hafa-main .ce_before_after_slider img:nth-child(2){position:absolute;inset:0;height:100%;object-fit:cover;clip-path:inset(0 0 0 var(--ba,50%));}
#hafa-main .ba2-handle{position:absolute;top:0;bottom:0;left:var(--ba,50%);width:3px;background:#fff;transform:translateX(-50%);box-shadow:0 0 0 1px rgba(0,0,0,.1);cursor:ew-resize;z-index:3;}
#hafa-main .ba2-handle::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:var(--shadow-md);}
#hafa-main .ba2-handle::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:18px;height:18px;z-index:1;background:var(--color-brand);clip-path:polygon(35% 25%,15% 50%,35% 75%,35% 58%,65% 58%,65% 75%,85% 50%,65% 25%,65% 42%,35% 42%);}

/* ============================================================
   PCT/Contao-Elemente — Reskin (Schub 3)
   ============================================================ */

/* ---- bgimage (Hintergrundbild-Sektion) — .ce_bgimage MUSS Containing-Block sein ---- */
#hafa-main .ce_bgimage{position:relative;overflow:hidden;}
#hafa-main .ce_bgimage-image{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;}
#hafa-main .ce_bgimage-outer{position:relative;z-index:1;}
#hafa-main .ce_bgimage-inside{position:relative;z-index:1;padding:var(--space-8) var(--space-6);}

/* ---- wrap (generischer Wrapper) ---- */
#hafa-main [class*="ce_wrap_"] > .inside{width:100%;}

/* ---- fancylink (Pfeil-Link) ---- */
#hafa-main .ce_fancylink a,#hafa-main a.fancylink{display:inline-flex;align-items:center;gap:9px;font-weight:var(--fw-bold);font-size:15px;color:var(--color-brand);text-decoration:none;}
#hafa-main .ce_fancylink .shaft,#hafa-main .ce_fancylink .arrow{display:inline-block;}
#hafa-main .ce_fancylink a:hover{color:var(--color-brand-hover);}
#hafa-main .ce_fancylink a:hover .arrow{transform:translateX(4px);transition:transform var(--dur-fast);}

/* ---- iconbox_v2 (horizontal, grüner Akzent) ---- */
#hafa-main .ce_iconbox_v2 .ce_iconbox_inside{display:flex;gap:16px;align-items:flex-start;text-align:left;padding:18px 4px;}
#hafa-main .ce_iconbox_v2 i,#hafa-main .ce_iconbox_v2 .fa{font-size:28px;line-height:1;flex:none;color:var(--color-brand);}
#hafa-main .color-accent{color:var(--color-accent)!important;}
#hafa-main .ce_iconbox_v2 .content h2,#hafa-main .ce_iconbox_v2 .content h3,#hafa-main .ce_iconbox_v2 .content h4{font-size:18px;margin:0 0 6px;}
#hafa-main .ce_iconbox_v2 .content{font-size:14.5px;color:var(--text-muted);line-height:1.6;}

/* ---- linkbox (Bild-Kachel mit Overlay) ---- */
#hafa-main .ce_linkbox{position:relative;display:block;border-radius:14px;overflow:hidden;aspect-ratio:4/3;text-decoration:none;}
#hafa-main .ce_linkbox_image{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform var(--dur-slow) var(--ease-standard);}
#hafa-main .ce_linkbox:hover .ce_linkbox_image{transform:scale(1.05);}
#hafa-main .ce_linkbox_overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,15,15,.78) 0%,rgba(15,15,15,.1) 60%,rgba(15,15,15,0) 100%);}
#hafa-main .ce_linkbox .content{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:20px;color:#fff;}
#hafa-main .ce_linkbox .content h2,#hafa-main .ce_linkbox .content h3{color:#fff;font-size:20px;margin:0;}

/* ---- Contao-Formulare ---- */
#hafa-main .ce_form{background:#fff;border:1px solid var(--border);border-radius:16px;padding:30px;box-shadow:var(--shadow-sm);max-width:680px;}
#hafa-main .ce_form .formbody{display:flex;flex-direction:column;gap:16px;}
#hafa-main .ce_form .widget{display:flex;flex-direction:column;gap:6px;}
#hafa-main .ce_form label{font-size:13px;font-weight:var(--fw-bold);color:var(--text-strong);}
#hafa-main .ce_form input[type=text],#hafa-main .ce_form input[type=email],#hafa-main .ce_form input[type=tel],#hafa-main .ce_form input[type=number],#hafa-main .ce_form input[type=password],#hafa-main .ce_form textarea,#hafa-main .ce_form select{font-family:var(--font-body);font-size:15px;padding:12px 14px;border:1.5px solid var(--border-strong);border-radius:8px;background:#fff;color:var(--text-body);width:100%;transition:border-color var(--dur-fast),box-shadow var(--dur-fast);}
#hafa-main .ce_form input:focus,#hafa-main .ce_form textarea:focus,#hafa-main .ce_form select:focus{outline:none;border-color:var(--color-brand);box-shadow:0 0 0 3px var(--color-brand-tint);}
#hafa-main .ce_form textarea{min-height:120px;resize:vertical;}
#hafa-main .ce_form .widget-checkbox,#hafa-main .ce_form .widget-radio{flex-direction:row;align-items:flex-start;gap:10px;flex-wrap:wrap;}
#hafa-main .ce_form .widget-checkbox label,#hafa-main .ce_form .widget-radio label{font-weight:var(--fw-regular);font-size:14px;color:var(--text-muted);}
#hafa-main .ce_form .widget-explanation{font-size:13px;color:var(--text-subtle);}
#hafa-main .ce_form .error,#hafa-main .ce_form p.error{color:var(--color-danger);font-size:13px;}
#hafa-main .ce_form button,#hafa-main .ce_form input[type=submit]{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-body);font-weight:var(--fw-bold);font-size:16px;letter-spacing:.01em;border:2px solid var(--color-brand);border-radius:8px;background:var(--color-brand);color:#fff;padding:14px 26px;cursor:pointer;transition:background var(--dur-fast),border-color var(--dur-fast);}
#hafa-main .ce_form button:hover,#hafa-main .ce_form input[type=submit]:hover{background:var(--color-brand-hover);border-color:var(--color-brand-hover);}

/* ---- Schlanker Eigen-Slider (RevSlider-Ersatz, .hafa-rs) ---- */
#hafa-main .hafa-rs{position:relative;border-radius:16px;overflow:hidden;background:var(--gray-900);}
#hafa-main .hafa-rs__viewport{position:relative;min-height:clamp(320px,44vw,520px);}
#hafa-main .hafa-rs__slide{position:absolute;inset:0;background-size:cover;background-position:center;display:flex;align-items:center;opacity:0;visibility:hidden;transition:opacity .6s var(--ease-standard),visibility .6s;}
#hafa-main .hafa-rs__slide.is-active{opacity:1;visibility:visible;}
#hafa-main .hafa-rs__scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,15,15,.62) 0%,rgba(15,15,15,.25) 45%,rgba(15,15,15,.05) 100%);}
#hafa-main .hafa-rs__cap{position:relative;width:100%;color:#fff;}
#hafa-main .hafa-rs__cap .wrap{max-width:1240px;margin:0 auto;padding:0 40px;}
#hafa-main .hafa-rs__cap :is(h1,h2,h3,h4){color:#fff;}
#hafa-main .hafa-rs__cap p{color:rgba(255,255,255,.92);}
/* RevSlider-Layer in den normalen Fluss zwingen (kein abs. Positioning ohne RevSlider-JS) */
#hafa-main .hafa-rs__cap [class*="tp-caption"],#hafa-main .hafa-rs__cap [class*="rs-"],#hafa-main .hafa-rs__cap [data-x]{position:static!important;transform:none!important;left:auto!important;top:auto!important;width:auto!important;max-width:640px!important;white-space:normal!important;visibility:visible!important;opacity:1!important;}
#hafa-main .hafa-rs__arrow{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:var(--text-strong);font-size:28px;line-height:1;cursor:pointer;z-index:3;display:flex;align-items:center;justify-content:center;}
#hafa-main .hafa-rs__arrow--prev{left:16px;} #hafa-main .hafa-rs__arrow--next{right:16px;}
#hafa-main .hafa-rs__arrow:hover{background:#fff;color:var(--color-brand);}
#hafa-main .hafa-rs__dots{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:9px;z-index:3;}
#hafa-main .hafa-rs__dot{width:10px;height:10px;border-radius:50%;border:0;background:rgba(255,255,255,.5);cursor:pointer;padding:0;transition:width var(--dur-fast),background var(--dur-fast);}
#hafa-main .hafa-rs__dot.is-active{background:#fff;width:26px;border-radius:5px;}
@media (max-width:720px){#hafa-main .hafa-rs__cap .wrap{padding:0 20px;}#hafa-main .hafa-rs__arrow{display:none;}}

/* ============================================================
   Long-Tail-Elemente — Reskin (Schub 4)
   ============================================================ */

/* generische Karten-Box (mehrere Elemente teilen sich den Look) */
#hafa-main .ce_featurebox_inside,#hafa-main .ce_benefitbox_inside,#hafa-main .ce_colorbox_inside,
#hafa-main .ce_imagebox .inside,#hafa-main .ce_iconbox_v3_content{background:#fff;border:1px solid var(--border);border-radius:14px;padding:24px;height:100%;}

/* fonticon (PCT-Icon-Klasse) */
#hafa-main .fonticon{color:var(--color-brand);font-size:30px;line-height:1;display:inline-block;}

/* ---- chartbar ---- */
#hafa-main .ce_chartbar .title,#hafa-main [class*="ce_chart_"] .title{font-weight:var(--fw-bold);color:var(--text-strong);margin-bottom:7px;font-size:15px;}
#hafa-main .chart_bg{background:var(--surface-alt);border-radius:999px;height:14px;overflow:hidden;}
#hafa-main .chart_data{background:var(--color-brand);height:100%;border-radius:999px;min-width:2%;transition:width .8s var(--ease-standard);}
#hafa-main .chart_data.green{background:var(--color-accent);}

/* ---- countup ---- */
#hafa-main .ce_countup{text-align:center;}
#hafa-main .ce_countup .headline{font-family:var(--font-display);font-weight:700;font-size:46px;line-height:1;color:var(--color-brand);}
#hafa-main .ce_countup .text{font-size:14px;color:var(--text-muted);margin-top:6px;}

/* ---- benefitbox ---- */
#hafa-main .ce_benefitbox .number{font-family:var(--font-display);font-weight:700;font-size:34px;color:var(--color-brand);line-height:1;margin-bottom:6px;}

/* ---- calltoaction ---- */
#hafa-main .ce_calltoaction_inside{background:var(--surface-alt);border:1px solid var(--border);border-radius:16px;padding:30px 34px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
#hafa-main .ce_calltoaction_content{flex:1 1 320px;}

/* ---- pricecard ---- */
#hafa-main .ce_pricecard_inside{display:flex;gap:0;background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;flex-wrap:wrap;}
#hafa-main .ce_pricecard .pricecard_leftside{flex:1 1 240px;padding:28px;}
#hafa-main .ce_pricecard .pricecard_rightside{flex:1 1 200px;padding:28px;background:var(--surface-alt);display:flex;flex-direction:column;justify-content:center;gap:12px;}
#hafa-main .ce_pricecard .price{font-family:var(--font-display);font-weight:700;font-size:34px;color:var(--color-brand);line-height:1;}

/* ---- timeline ---- */
#hafa-main .timeline-item{position:relative;padding:0 0 26px 28px;border-left:2px solid var(--border);}
#hafa-main .timeline-item::before{content:"";position:absolute;left:-7px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--color-brand);}
#hafa-main .timeline-item-title{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--text-strong);margin-bottom:6px;}
#hafa-main .timeline-item-text{color:var(--text-muted);line-height:1.6;}
#hafa-main .timeline-item-image img{border-radius:10px;margin-top:10px;}

/* ---- fancy_divider ---- */
#hafa-main .ce_fancy_divider{display:flex;align-items:center;justify-content:center;gap:8px;margin-block:var(--space-6);}
#hafa-main .ce_fancy_divider_inside{height:2px;background:var(--border);flex:1;max-width:90px;}

/* ---- imagebox ---- */
#hafa-main .ce_text_imagebox_image img,#hafa-main .ce_imagebox img{border-radius:12px;width:100%;height:auto;display:block;}

/* ---- youtube / Video-Embed ---- */
#hafa-main [class*="ce_youtube"] .player{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;}
#hafa-main [class*="ce_youtube"] .player iframe,#hafa-main [class*="ce_youtube"] iframe{width:100%;height:100%;border:0;}
#hafa-main .privacy.hidden{display:none;}
#hafa-main .privacy_optout_click{cursor:pointer;color:var(--color-brand);}

/* ---- fancybox (Lightbox degradiert: Bild + Hover-Overlay) ---- */
#hafa-main .ce_fancybox{position:relative;border-radius:14px;overflow:hidden;display:block;}
#hafa-main .ce_fancybox .overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,15,15,.55),rgba(15,15,15,0));opacity:0;transition:opacity var(--dur-base);}
#hafa-main .ce_fancybox:hover .overlay{opacity:1;}
#hafa-main .ce_fancybox .content,#hafa-main .ce_fancybox .headline_wrap{position:absolute;left:0;right:0;bottom:0;padding:18px;color:#fff;z-index:2;}

/* ---- portfoliofilter (Filter degradiert: Buttons + Grid) ---- */
#hafa-main .ce_portfoliofilter ul.filter,#hafa-main .ce_portfoliofilter_content > ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 22px;}
#hafa-main .ce_portfoliofilter .filter a,#hafa-main .ce_portfoliofilter .name{display:inline-block;padding:8px 16px;border:1px solid var(--border-strong);border-radius:999px;font-size:14px;font-weight:var(--fw-bold);color:var(--text-body);text-decoration:none;cursor:pointer;}
#hafa-main .ce_portfoliofilter .filter a.active,#hafa-main .ce_portfoliofilter .filter a:hover{background:var(--color-brand);border-color:var(--color-brand);color:#fff;}
#hafa-main .mobile-filter-trigger{color:var(--color-brand);}

/* ---- tabs ---- */
#hafa-main .tabs{display:flex;flex-wrap:wrap;gap:2px;list-style:none;padding:0;margin:0 0 22px;border-bottom:2px solid var(--border);}
#hafa-main .tabs > li,#hafa-main .tabs > a{margin:0;}
#hafa-main .tabs a,#hafa-main .tabs > li > *{display:inline-block;padding:13px 20px;cursor:pointer;font-weight:var(--fw-bold);font-size:15px;color:var(--text-muted);text-decoration:none;border-bottom:3px solid transparent;margin-bottom:-2px;}
#hafa-main .tabs .active a,#hafa-main .tabs a.active,#hafa-main .tabs li.active > *{color:var(--color-brand);border-bottom-color:var(--color-brand);}
#hafa-main .panes .section{display:none;}
#hafa-main .panes .section.active{display:block;}

/* ---- iconbox_v3 (Rückseite vorerst aus) ---- */
#hafa-main .ce_iconbox_v3 .backside{display:none;}

/* ---- flipbox (CSS-Flip on hover) ---- */
#hafa-main .ce_flipbox_inside{position:relative;perspective:1200px;min-height:240px;}
#hafa-main .ce_flipbox_frontside,#hafa-main .ce_flipbox_backside{position:absolute;inset:0;backface-visibility:hidden;border-radius:14px;overflow:hidden;transition:transform .6s var(--ease-standard);}
#hafa-main .ce_flipbox_frontside{background:#fff;border:1px solid var(--border);}
#hafa-main .ce_flipbox_backside{background:var(--gray-900);color:#fff;transform:rotateY(180deg);}
#hafa-main .ce_flipbox_inside:hover .ce_flipbox_frontside{transform:rotateY(-180deg);}
#hafa-main .ce_flipbox_inside:hover .ce_flipbox_backside{transform:rotateY(0);}
#hafa-main .ce_flipbox_frontside_inside,#hafa-main .ce_flipbox_backside_inside{padding:24px;height:100%;display:flex;flex-direction:column;justify-content:center;}

/* ---- Produkt-Hero (Bild-Banner über dem Inhalt) ---- */
.phero{position:relative;overflow:hidden;background:var(--gray-900);}
.phero__bg{position:absolute;inset:0;background-image:url('../assets/images/hero-staircase.png');background-size:cover;background-position:center;}
.phero__scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(15,15,15,.85) 0%,rgba(15,15,15,.55) 50%,rgba(15,15,15,.2) 100%);}
.phero__inner{position:relative;padding-block:64px 58px;color:#fff;}
.phero__tag{font-size:16px;color:rgba(255,255,255,.9);margin:14px 0 26px;font-weight:var(--fw-medium);}
.phero__actions{display:flex;gap:14px;flex-wrap:wrap;}
/* H1 direkt unter dem Banner kräftig hervorheben */
#hafa-main > .wrap > .mod_article:first-child h1,#hafa-main h1:first-child{margin-top:8px;}
@media (max-width:720px){.phero__inner{padding-block:40px 36px;}}

/* ---- Lexikon A–Z: Buchstaben-Navi kompakt & horizontal ---- */
#hafa-main .lexikonbutton{display:inline-block;vertical-align:top;margin:0 8px 8px 0;}
#hafa-main .lexikonbutton a{width:46px;height:46px;min-width:0;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:17px;border-radius:10px;}

/* ---- YouTube/Video-Embed: korrektes 16:9 + Consent-Karte ---- */
#hafa-main .ce_youtube{max-width:900px;margin-inline:auto;}
#hafa-main .ce_youtube .video_container{position:relative;aspect-ratio:16/9;height:auto;border-radius:14px;overflow:hidden;background:#111;}
#hafa-main .ce_youtube .video_container iframe,#hafa-main .ce_youtube .video_container > img{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;}
#hafa-main .ce_youtube .privacy{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;color:#fff;padding:28px;background:linear-gradient(0deg,rgba(15,15,15,.75),rgba(15,15,15,.55));}
#hafa-main .ce_youtube .privacy p,#hafa-main .ce_youtube .privacy span{color:#fff;font-size:15px;line-height:1.5;max-width:520px;margin:0;}
#hafa-main .ce_youtube .privacy_optout_click,#hafa-main .ce_youtube .privacy a{display:inline-flex;align-items:center;gap:8px;background:var(--color-brand);color:#fff;padding:12px 22px;border-radius:8px;font-weight:var(--fw-bold);text-decoration:none;cursor:pointer;}
#hafa-main .ce_youtube .privacy_optout_click:hover,#hafa-main .ce_youtube .privacy a:hover{background:var(--color-brand-hover);}

/* ---- Regionale Landingpage: Ansprechpartner-Karte ---- */
.hafa-rep{display:flex;gap:24px;align-items:center;background:var(--gray-50,#f7f7f7);border:1px solid var(--gray-200,#e5e5e5);border-radius:16px;padding:24px;margin:8px 0 32px;}
.hafa-rep__img{width:130px;height:130px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.hafa-rep__body{font-size:15px;line-height:1.55;}
.hafa-rep__body b{font-size:17px;}
.hafa-rep__role{color:var(--gray-600,#666);margin:2px 0 10px;}
.hafa-rep__body p{margin:0 0 10px;}
.hafa-rep__body a{color:var(--color-brand);text-decoration:none;}
@media (max-width:600px){.hafa-rep{flex-direction:column;text-align:center;}.hafa-rep__img{width:110px;height:110px;}}
.hafa-konfteaser{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;background:var(--gray-900,#171717);color:#fff;border-radius:16px;padding:32px 36px;margin:40px 0;}
.hafa-konfteaser h3{color:#fff;margin:0 0 6px;}
.hafa-konfteaser p{color:rgba(255,255,255,.8);margin:0;max-width:560px;}

/* ---- Autogrid: leere Füllspalten (JS markiert .is-empty / .has-empty) ----
   Verbleibender Einzelblock wird zur horizontalen Karte über volle Breite */
#hafa-main .autogrid_row > .column.is-empty{display:none;}
#hafa-main .autogrid_row.is-solo > .column{flex:1 1 100%;max-width:100%;}
#hafa-main .autogrid_row.is-solo .ce_image_text_box_inside{display:grid;grid-template-columns:minmax(280px,440px) 1fr;gap:44px;align-items:center;background:var(--gray-50,#f7f7f7);border:1px solid var(--border,#e5e5e5);border-radius:18px;padding:40px 48px;}
#hafa-main .autogrid_row.is-solo .ce_image_text_box_image{margin:0;}
#hafa-main .autogrid_row.is-solo .ce_image_text_box img{border-radius:12px;width:100%;height:auto;}
@media (max-width:820px){#hafa-main .autogrid_row.is-solo .ce_image_text_box_inside{grid-template-columns:1fr;gap:20px;padding:22px;}}

/* ---- Sektions-Seiten (Claude-Design-Integration): Subnav, Kicker, Badges, Textlinks ---- */
.hafa-subnav{position:sticky;top:var(--hd,72px);z-index:40;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);}
.hafa-subnav a:hover{color:var(--color-brand)!important;}
.hafa-kicker{font-family:var(--font-body);font-weight:var(--fw-bold,700);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-brand);}
a.hafa-txtlink{color:var(--color-brand);font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:7px;}
a.hafa-txtlink:hover{color:var(--color-brand-hover);}
a.hafa-txtlink svg{transition:transform .2s cubic-bezier(.2,0,.1,1);}
a.hafa-txtlink:hover svg{transform:translateX(3px);}
.hafa-badge{display:inline-flex;align-items:center;font-size:13px;font-weight:700;line-height:1;padding:6px 12px;border-radius:999px;white-space:nowrap;}
.hafa-badge--solid-red{background:var(--color-brand);color:#fff;}
.hafa-badge--red{background:var(--red-50,#fdecec);color:var(--color-brand);}
.hafa-badge--green{background:var(--green-50,#eef6e3);color:var(--green-700,#009940);}
.hafa-badge--solid-green{background:var(--green-500,#76b82a);color:#fff;}
.hafa-badge--neutral{background:var(--gray-100,#ececec);color:var(--gray-700,#575756);}
/* Sektions-Karten sanfter Hover */
#hafa-main section article{transition:box-shadow .2s,transform .2s;}
#hafa-main section article:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
#hafa-main section[id],#hafa-main [id="anfrage"]{scroll-margin-top:130px;}
html{scroll-behavior:smooth;}

/* ---- Produkt-Hero v2: heller Split-Hero (Claude-Design) ---- */
.phero2{background:var(--surface-alt,#f6f6f6);border-bottom:1px solid var(--border);}
.phero2__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:56px;align-items:center;min-height:460px;}
.phero2__content{padding-block:56px;}
.phero2__title{font-family:var(--font-display);font-weight:800;color:var(--text-strong);font-size:clamp(40px,5.2vw,72px);line-height:1.02;letter-spacing:-.015em;margin:14px 0 18px;hyphens:manual;}
.phero2__sub{font-size:19px;line-height:1.55;color:var(--text-muted);max-width:46ch;margin:0 0 30px;}
.phero2__actions{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 26px;}
.phero2__checks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 26px;}
.phero2__checks li{font-size:14.5px;color:var(--text-body);display:inline-flex;align-items:center;gap:8px;}
.phero2__checks li::before{content:"\2713";color:var(--green-600,#5fa01f);font-weight:700;}
.phero2__media{align-self:stretch;background-image:url('../assets/images/hero-staircase.png');background-size:cover;background-position:center;min-height:320px;}
@media (max-width:900px){
	.phero2__grid{grid-template-columns:1fr;gap:0;}
	.phero2__content{padding-block:40px 32px;}
	.phero2__media{min-height:220px;margin:0 -32px;}
}
/* Sektions-Seiten: kein Main-Padding (Sektionen bringen eigenes), Outline-Buttons auf hell sichtbar */
#hafa-main.hafa-main--sections{padding:0;}
.phero2 .btn--secondary,#hafa-main.hafa-main--sections .btn--secondary{border-color:var(--gray-300,#cfcfce);color:var(--text-strong);}
.phero2 .btn--secondary:hover,#hafa-main.hafa-main--sections .btn--secondary:hover{border-color:var(--gray-500,#878787);color:var(--text-strong);}

/* ---- Lead-Formulare ---- */
.hafa-form{max-width:860px;}
.hafa-form__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;}
.hafa-form__field{display:flex;flex-direction:column;gap:6px;font-size:14.5px;font-weight:700;color:var(--text-strong);}
.hafa-form__field--full{grid-column:1/-1;}
.hafa-form__field input,.hafa-form__field select,.hafa-form__field textarea{font:inherit;font-weight:400;padding:12px 14px;border:1px solid var(--gray-300,#cfcfce);border-radius:10px;background:#fff;color:var(--text-body);}
.hafa-form__field input:focus,.hafa-form__field select:focus,.hafa-form__field textarea:focus{outline:2px solid var(--color-brand);outline-offset:1px;border-color:var(--color-brand);}
.hafa-form__radios{border:1px solid var(--border);border-radius:12px;padding:16px 18px;}
.hafa-form__radios legend{font-weight:700;font-size:14.5px;padding:0 6px;}
.hafa-form__radios > div{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px 16px;}
.hafa-form__radio{font-weight:400;font-size:14.5px;display:flex;gap:8px;align-items:center;}
.hafa-form__consent{display:flex;gap:12px;align-items:flex-start;margin:22px 0;font-size:13.5px;line-height:1.55;color:var(--text-muted);}
.hafa-form__consent input{margin-top:3px;flex:none;}
.hafa-form__hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden;}
.hafa-form__error{background:var(--red-50,#fdecec);color:var(--color-brand);border:1px solid var(--color-brand);border-radius:10px;padding:12px 16px;font-weight:700;}
.hafa-form__note{font-size:12.5px;color:var(--text-subtle);margin-top:10px;}
@media (max-width:640px){.hafa-form__grid{grid-template-columns:1fr;}}
.hafa-danke{max-width:720px;margin:0 auto;text-align:center;padding:40px 0 20px;}
.hafa-danke svg{width:64px;height:64px;color:var(--green-500);margin-bottom:18px;}

/* FAQ-Accordion (Partnerseite u. a.) */
details.hafa-faq{border-bottom:1px solid var(--border);}
details.hafa-faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;font-family:var(--font-display);font-weight:700;color:var(--text-strong);font-size:17px;position:relative;}
details.hafa-faq summary::-webkit-details-marker{display:none;}
details.hafa-faq summary::after{content:"+";position:absolute;right:6px;top:16px;font-size:24px;color:var(--color-brand);line-height:1;}
details.hafa-faq[open] summary::after{content:"\2013";}
details.hafa-faq>div{padding:0 40px 22px 0;font-size:15.5px;line-height:1.65;color:var(--text-muted);}