@charset "UTF-8";
/* =========================================================================
   responsive.css — RESPONSIVE OVERRIDES (nach main.css laden)
   - Keine Basis-Stile, nur Breakpoint- & Capability-Overrides
   ========================================================================= */

/* =========================
   Globale Variablen/Defaults
   ========================= */
:root{
  --wrap-pad: clamp(16px, 2.6vw, 32px); /* horizontales Seitenpadding */
  --nav-h: 64px;                        /* Navbar-Höhe (wird je BP angepasst) */
  --hero-img: clamp(220px, 24vw, 500px);/* runde Hero-Foto-Größe */
  --pin-size: 96px;                     /* Followup-Pin */
  --map-gutter: clamp(12px, 3.5vw, 32px);
}

/* Globale Feinheiten (ohne Media) */
html{ scroll-padding-top: var(--nav-h); }      /* fixe Navbar bei Ankern berücksichtigen */
.navbar{ height: var(--nav-h); padding: 0 1.25rem; }
.btn-glow, .prdbtn-glow{ max-width:100%; }
.hero-image{ --hero-image-size: var(--hero-img); }

/* Mobile Nav: Toggler sichtbar auf dunklem BG */
.navbar-toggler{ border:0; }
.navbar-light .navbar-toggler-icon{
  background-image:url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'>\
      <path stroke='rgba(255,255,255,0.95)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/>\
    </svg>");
}

/* Coarse pointer = größere Touch-Ziele */
@media (pointer:coarse){
  #product .slider>button{ width:56px; height:56px; font-size:2rem; }
}

/* Bewegungsreduktion */
@media (prefers-reduced-motion: reduce){
  .btn-primary:hover{ transform:none; }
  #pricing .plan-card .card-media,
  #partners .partner-hero .product-item,
  #partners .partner-hero .product-item::after,
  #partners .partner-hero .product-item .prod-logo,
  #partners .partner-hero *,
  #partners .partner-card *{ transition:none !important; }
}

/* Desktop-only Hover-Vergrößerungen */
@media (hover:hover){
  #pricing .plan-card:hover .card-media{ transform:scale(1.05); }
}

/* Kleine Höhe im Querformat: Hero nicht zusammenquetschen */
@media (max-height:740px) and (min-width:768px){
  #hero{ min-height:88vh; padding-top: calc(var(--nav-h) + 1rem); }
}

/* ==========================================================
   BREAKPOINTS (von groß → klein)
   XXL ≥1600, XL ≥1280, LG 1024–1279, MD 768–1023,
   SM 560–767, XS ≤559
   ========================================================== */

/* ============ XXL (≥1600px) */
@media (min-width:1600px){
  body{ font-size:1.02rem; }
  .hero-grid, .product-einstieg-header, .product-einstieg-benefit-grid,
  #product .product-layout, #pricing .header-grid,
  #partners .partners-wrap, #followup .followup-wrap, #contact .content-wrap,
  #footer .footer-grid{ padding-inline: var(--wrap-pad); }
}

/* ============ XL (≥1280px) */
@media (min-width:1280px){
  .product-einstieg-grid-benefitcontainer .benefits-list{ position:sticky; top:96px; }
  #pricing .carousel-viewport{ max-width:860px; }
  #contact .people-grid{ grid-template-columns:1fr; }
}

/* ============ LG (1024–1279px) */
@media (min-width:1024px) and (max-width:1279px){
  :root{ --nav-h: 60px; }
  .navbar{ padding: 0 2rem; }
  #pricing{ padding-block: 5rem; }
}

/* ============ MD (768–1023px) */
@media (min-width:768px) and (max-width:1023px){
  .navbar{ padding: 0 1.25rem; }
  .navbar .nav-link{ margin:.6rem; font-size:.95rem; }
  #product .slides{ min-height: clamp(420px, 48vh, 540px); padding-inline: clamp(28px,4vw,56px); }
  #product .slider>button{ font-size:2rem; }
}


/* ============ XS (≤559px) */
@media (max-width:900px){
  :root{ --nav-h: 56px; }
  body{ font-size:.98rem; }
  .navbar{ padding: 0 .9rem; }
  .navbar .nav-link{ margin:.45rem; font-size:.9rem; }
  .navbar .nav-link:hover{
  transform: scale(1.15)}
  #languageButtons .btn{ padding:.18rem .6rem; font-size:.75rem; }
  #pricing .toggle-btn{ height:48px; padding:.45rem .9rem; }
  #pricing .plan-head h3{ font-size: clamp(1.25rem, 5.2vw, 1.6rem); }
  #pricing .price-value{ font-size: clamp(1.3rem, 6vw, 1.8rem); }
  #pricing .pricing-foot{
    max-width:92%; text-align:center; padding:.6rem .7rem; flex-wrap:wrap; gap:.45rem;
  }
  #product .slides{ padding-inline: clamp(18px, 5.5vw, 28px); }
  .contact-mini{ grid-template-columns:1fr; text-align:center; justify-items:center; }
  .contact-mini .actions{ justify-content:center; }
  #contact .btn-submit{ width:100%; }
}

/* =========================================
   NAVIGATION (Collapse, Hover-Ziele, etc.)
   ========================================= */
@media (max-width:991.98px){ /* Bootstrap lg */
  .navbar .collapse{
    background:#1b2f26;
    padding:.75rem 0;
    box-shadow: 0 8px 16px rgba(0,0,0,.22);
  }
  .navbar .navbar-nav .nav-link{
    padding:.55rem 1rem;
    display:block;
    text-align:center;
      }
  .navbar ul{
  justify-self:center;
  }    
}

/* =========================================
   HERO – 3→1 Spalte, klare Typo-Skalierung
   ========================================= */
@media (max-width:1199px){
  .hero-grid{
  justify-self:center;
  align-items:center;
   grid-template-columns:1fr;
    gap:1.25rem;
    width:min(92%, 1100px);
    text-align:center;
  }
  .hero-image{ display:none; }
  .hero-image figcaption{ display:none; }
  .hero-logo{ display:none; }


 #hero .hero-grid{
    position: relative; z-index:1;
    display:grid;
    grid-template-columns:1fr;
    grid-template-areas:
      "content"
      "image"
      "logo";
    width:min(100vw,680px);
    margin:0 0;
    justify-items:center;
    text-align:center;
  }
}


/* =========================
   HERO — Mobile (≤ 599px)
   ========================= */
@media (max-width: 900px){
  /* 1) Viewport-Units fix + Platz für die fixe Navbar */
  #hero{
    position: relative;
    min-height: clamp(560px, 100svh, 760px); /* Fallback svh */
    padding: calc(var(--nav-h) + 12px) 16px 24px;
    background-position: center top;
    background-size: cover;
    overflow: hidden;
  }
}
@supports (min-height: 100dvh){
  @media (max-width: 700px){
    #hero{ min-height: clamp(560px, 100dvh, 760px);
    padding-bottom: 24px; }
  }
}

/* 2) Overlays: Kontrast – liegen hinter dem Content */
@media (max-width: 900px){
  #hero::before,
  #hero::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
  }
  #hero::before{
    background: linear-gradient(180deg,
      rgba(0,0,0,.45) 0%,
      rgba(0,0,0,.28) 38%,
      rgba(0,0,0,.08) 100%);
  }
  #hero::after{
    background: linear-gradient(180deg,
      rgba(27,47,38,.90) 0%,
      rgba(27,47,38,.60) 34%,
      rgba(27,47,38,.18) 72%,
      rgba(27,47,38,0) 100%);
    mix-blend-mode: multiply;
  }

  /* 3) Einspaltiges Layout, Reihenfolge Content → Image → Logo */
  #hero .hero-grid{
    position: relative; z-index:1;
    display:grid;
    grid-template-columns:1fr;
    grid-template-areas:
      "content"
      "image"
      "logo";
    width:min(100vw,680px);
    margin:0 0;
    justify-items:center;
    text-align:center;
  }

  #hero .hero-grid > .hero-content{
    grid-area:content;     
    max-width:38ch;
    color:#fff;
    margin-top: 4.5rem;
    padding: 2rem 1.5rem;
  }

  #hero .hero-grid > .hero-image{
    display:none;
    /*grid-area:image;
    position:relative !important;
    transform:none !important;
    z-index:2 !important;
    --hero-image-size: clamp(140px, 44vw, 200px);
    width: var(--hero-image-size);
    margin: 4px auto 0; 
    justify-self:center; */
  }
   #hero .hero-image figcaption{
   display:none;
    /*position: static;
    display: inline-block;
    margin: .5rem auto 0;
    padding: .4rem .6rem;
    max-width: 24ch;
    font-size: .85rem; line-height: 1.2; text-align: center;
    background: rgba(255,255,255,.96);
    color:#1b2f26;
    border-radius: .6rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);*/
  }
  /* Balken aus */
  #hero .hero-image figcaption::before,
  #hero .hero-image figcaption::after{
    content: none !important;
  }


  #hero .hero-grid > .hero-logo{
display: none;
  }
  
 
  /* Lange Wörter umbrechen statt rauszuschieben */
  #hero .hero-content h1,
  #hero .hero-content h2,
  #hero .hero-content h3{
    overflow-wrap:anywhere;
    hyphens:auto;
    text-wrap:balance;
  }

#hero .hero-content h1{
	font-size:1.75rem;
	margin-bottom:2.25rem;
}

#hero .hero-content h2{
	font-size:1.15rem;
	margin-bottom:2.3rem;
	justify-self:center;
}

#hero .hero-content .eyebrow-hero{
	display:none;
}

#hero .hero-content p{
	display:none;
}

#hero .hero-button-wrap{
  width: 60%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

#hero .btn-glow{
  position: relative;
  display: inline-flex;              
  align-items: center;
  justify-content: center;           
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 14px 26px;                
  box-sizing: border-box;
}

#hero .btn-glow ::hover{
transform:scale(1.02);
}

.btn-glow > span{
  
  justify-self:center;
  text-align:center;
}
}

/* ===========================================================
   PRODUKT-EINSTIEG – Header/Benefit 
   =========================================================== */
@media (max-width:1200px){
  .product-einstieg-header .product-einstieg-header-grid{
    grid-template-columns:1fr;
    row-gap:1.25rem;
  }
  .product-einstieg-header .product-einstieg-header-grid::before{ display:none; }
  .header-card{ padding-right:0; justify-self:center; text-align:center; }
  .header-grid-bildcontainer{ justify-content:center; }

  .product-einstieg-benefit-grid{
    grid-template-columns:1fr;
    row-gap: clamp(1.25rem, 3vw, 2rem);
  }
  .product-einstieg-benefit-grid::before{ display:none; }
  .product-einstieg-grid-bildcontainer,
  .product-einstieg-grid-benefitcontainer{ justify-self:center; }
  .product-einstieg-figure{ margin-left:0; max-width:900px; }
}


@media (max-width:900px){
  #product-einstieg{ padding-top: 20px !important; }
  
#product-einstieg .product-einstieg-header{
	margin-bottom:1.5rem;
}  
  
  
#product-einstieg .header-grid-bildcontainer{
	display:none;
}

#product-einstieg .eyebrow{
	font-size:0.85rem;
	text-align:left;
	margin-bottom:1rem;
}

#product-einstieg h2{
	font-size:1.3rem;
	font-weight:600;
	text-align:left;
	margin-bottom:1rem;
}

#product-einstieg p{
	text-align:left;
	font-size:1rem;
}

#product-einstieg ul{
	text-align:left;
}

#product-einstieg .product-points{
	line-height:1.15;
}

#product-einstieg .subpoints{
	line-height:1.1;
	text-align:block;
	font-size:0.7rem;
}

#product-einstieg .product-points .subpoints > li::before{
	left:1.5rem;
	top:0.3rem;
}

#product-einstieg .cta p{
	text-align:center;
}

#product-einstieg  .card__footer{
	margin-top:1.5rem;
}

#product-einstieg .product-einstieg-benefit-grid {
	position: relative; z-index:1;
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    width:min(100vw,680px);
    margin:0 0;
    justify-items:center;
    text-align:center;
}

#product-einstieg .benefits-list {
	padding-left:0;
}

#product-einstieg .benefits-list .benefits {
	padding-left:1rem;
}

#product-einstieg .prdbtn-glow{
  position: relative;
  display: inline-flex;              
  align-items: center;
  justify-content: center;           
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 14px 26px;                
  box-sizing: border-box;
}

 .prdbtn-glow ::hover{
transform:scale(1.02);
}

#product-einstieg .card__footer{
  width: 60%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

#product-einstieg .prdbtn-glow > span{
  
  justify-self:center;
  text-align:center;
}

#product-einstieg .benefits-button-wrap{
  width: 60%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

#product-einstieg .btn-glow{
  position: relative;
  display: inline-flex;              
  align-items: center;
  justify-content: center;           
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 14px 26px;                
  box-sizing: border-box;
}

#product-einstieg .btn-glow ::hover{
transform:scale(1.02);
}

#product-einstieg .btn-glow > span{
  
  justify-self:center;
  text-align:center;
}


/* ===== Canonical: Product ↔ Pricing & Slider – EINZIGE Version ===== */
.band--product-pricing{ display:block !important; position:relative; isolation:isolate; }

#product{
  position:relative; isolation:isolate;
  margin-bottom:clamp(28px,7vw,56px);
}

#product .eyebrow{
	font-size:0.85rem;
	text-align:left;
	margin-bottom:1rem;
}

#product h2{
	font-size:1.3rem;
	font-weight:600;
	text-align:left;
	margin-bottom:1rem;
}

#product p{
	text-align:left;
	font-size:1rem;
}


/* Slider hat echte Höhe und clippt seine absoluten Kinder */
#product .slider{
  position:relative;
  overflow:hidden;
  contain:layout paint;          /* nichts „malt“ über die Section hinaus */
  padding-bottom:44px;           /* Platz für Dots */
}

/* Slides stapeln sich in einer Grid-Zelle; Container misst die größte */
#product .slides{ display:grid; grid-template-rows:auto; }
#product .slides > .slide{ grid-area:1/1; position:relative !important; }
#product .slides > .slide:not(.display-slide){
  visibility:hidden; pointer-events:none; opacity:0;
}

/* Pfeile/Dots sicher innerhalb des Sliders verankern */
#product .slider > .prev,
#product .slider > .next{
  position:absolute; top:18px; transform:none; z-index:2;
}
#product .slider > .prev{ left:10px; }
#product .slider > .next{ right:10px; }
#product .dots{ position:absolute; left:50%; bottom:10px; transform:translateX(-50%); z-index:2; }

/* SVG-Karussell im normalen Fluss halten */
#product .product-carousel{
  position:relative !important; display:block;
  z-index:1; margin-top:clamp(16px,4vw,28px);
}
#product .product-carousel .carousel{
  position:static !important; display:block; width:100%; height:auto;
}

#pricing{
  position:relative; isolation:isolate;
  z-index:auto; /* keine künstliche Überdeckung */
  padding-top:clamp(12px,4vw,20px);
  padding-bottom: 3rem;
}

#pricing .eyebrow{
	font-size:0.85rem;
	text-align:left;
	margin-bottom:1rem;
}

#pricing h2{
	font-size:1.3rem;
	font-weight:600;
	text-align:left;
	margin-bottom:1rem;
}

#pricing p{
	text-align:left;
	font-size:1rem;
}

#pricing .plan-cta{
  width: 60%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

#pricing .prdbtn-glow{
  position: relative;
  display: inline-flex;              
  align-items: center;
  justify-content: center;           
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 14px 26px;                
  box-sizing: border-box;
}

#pricing .prdbtn-glow ::hover{
transform:scale(1.02);
}

#pricing .prdbtn-glow > span{
  
  justify-self:center;
  text-align:center;
}

#pricing .pricing-foot{
	font-size:0.75rem;
}

#pricing .toggle-btn{
	font-size:0.9rem;
}

#pricing .toggle-btn .save-badge{
	font-size:0.75rem;
}

}


@media (max-width:900px){
  #product{ margin-bottom:clamp(36px,8vw,72px); }
  #product .slider{ padding-bottom:52px; }
}



/* ===========================================================
   PARTNERS – Hero-Kachel & Grid: 3→2→1
   =========================================================== */
@media (max-width:900px){
  #partners .partner-hero .product-list{ grid-template-columns: repeat(2,1fr); }
  #partners .partners-grid{ grid-template-columns: repeat(2,1fr); }
  #partners{
	padding-top:2rem;}
}
@media (max-width:560px){
	
  #partners .partner-hero .product-list{ grid-template-columns:1fr; }
  #partners .partner-hero{ height: clamp(220px, 48vw, 320px); }
  #partners .partners-grid{ grid-template-columns:1fr; }
  
/* Die Rückseite sollte Layout sauber halten */

.partner-hero-content{
  height: 100%;
}

#partners .partner-hero.partner-css .partner-hero-back {
	height:100%;}
	

.partner-hero-back h3{
	font-size:1rem;
}

.partner-hero-back p{
	font-size:0.75rem;
}

/* Scrollbereich: die Produktliste */
.partner-hero .product-list{
  max-height: 120px;          /* anpassen: z.B. 180–280px */
  overflow-y: auto;           /* scrollbar nur wenn nötig */
  overflow-x: hidden;
  padding-right: 6px;         /* Platz, damit Text nicht unter Scrollbar liegt */
  margin: 12px 0 0;
}

/* Optional: etwas Abstand zwischen Items */
.partner-hero .product-list li{
  margin-bottom: 10px;
}
}

/* ===========================================================
   FOLLOW-UP – Timeline: 3→1
   =========================================================== */
@media (max-width:1100px){
  :root{ --pin-size: 86px; }
  #followup .followup-steps{ --pin: var(--pin-size); }
}
@media (max-width:900px){
  #followup .step-label{ padding-left:46px; justify-self:center; text-align:center; }
  #followup .step-label::before{ width:30px; height:30px; font-size:.9rem; }
  :root{ --fu-dot-size:5px; --fu-dot-gap:10px; }
}
@media (max-width:860px){
  #followup{ padding: 4.5rem 1.25rem;}
  #followup .followup-steps{
    grid-template-columns:1fr;
    row-gap: clamp(18px, 4.5vw, 28px);
  }
  #followup .followup-steps::before,
  #followup .step::before,
  #followup .step::after{ display:none; }

  #followup .step-label{ grid-column:1; padding-left:42px;}
  #followup .step-label::before{ width:28px; height:28px; font-size:.85rem; }
  #followup .step-pin{
    grid-column:1;
    --pin-local: clamp(64px, 18vw, 78px);
    width:var(--pin-local); height:var(--pin-local);
    margin-bottom:1rem;
    margin-top:1rem;
  }
  #followup .step-card{ grid-column:1; width:100%; margin-left:0; margin-bottom:1rem; }
}

@media (max-width: 900px){
	#followup .eyebrow{
	font-size:0.85rem;
	text-align:left;
	margin-bottom:1rem;
}

#followup h2{
	font-size:1.3rem;
	font-weight:600;
	text-align:left;
	margin-bottom:1rem;
}

#followup p{
	text-align:left;
	font-size:1rem;
}

#followup h4{
	font-size:1.3rem;
}

#followup .step-card{
	font-size:0.9rem;
}


	
#followup .followup-jump {
	align-self:center;
	}

#followup h3{
	font-size:1.25rem;
}

#followup .followup-cta p{
font-size: 0.9rem;	
}

	
#followup .btn-appointment  {
  width: 65%;
  margin: auto auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

#followup .prdbtn-glow{
  position: relative;
  display: inline-flex;              
  align-items: center;
  justify-content: center;           
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 14px 26px;                
  box-sizing: border-box;
  margin-bottom:1rem;	
}

#followup .btn-appointment .prdbtn-glow ::hover{
transform:scale(1.02);
}

#followup .btn-appointment .prdbtn-glow > span{
  
  justify-self:center;
  text-align:center;
}	
	
}



/* ===========================================================
   CONTACT – 2→1 Spalte
   =========================================================== */
@media (max-width:980px){
  #contact .contact-layout{
    grid-template-columns:1fr;
    grid-template-areas:
      "header"
      "form"
      "aside";
    gap:20px;
    margin-left:2.5rem;
  }
  #contact .contact-people::before{ display:none; }
  #contact .contact-people{ position: static; top:auto; max-width:680px; justify-self:center; }
}
@media (max-width:820px){
  #contact .grid{ grid-template-columns:1fr; }
}

@media (max-width: 900px){
	
#contact .contact-card{
	margin-bottom:1rem;
}	

#contact .btn-submit  {
  width: 70%;
  margin: auto auto;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-self:center;
align-self:center;
}

#contact .btn-glow{
  position: relative;
  display: inline-flex;              
  align-items: center;
  justify-content: center;           
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 14px 26px;                
  box-sizing: border-box;
  margin-bottom:1rem;	
}

#contact .btn-glow ::hover{
transform:scale(1.02);
}

#contact .btn-glow > span{
  
  justify-self:center;
  text-align:center;
}	

}
/* ===========================================================
   FOOTER – Grid: 3→2→1, Map zentrieren, Legal kompakt
   =========================================================== */
@media (max-width:992px){
  #footer .footer-grid{
    grid-template-columns: 1fr 1fr;
    row-gap: clamp(12px, 3vw, 18px);
    justify-items:center;
  }
  #footer .footer-map{ margin:0 auto; max-width:min(680px,92vw); justify-self:center; }
  #footer .footer-legal p{ margin:0; }
}
@media (max-width:900px){
  #footer .footer-grid{ grid-template-columns:1fr; }
  #footer .footer-about{ margin-top:1.5rem; }
  #footer .footer-legal{
    grid-template-columns:1fr;
    row-gap:6px;
    justify-items:center;
    text-align:center;
  }
}
@media (max-width:640px){
  #footer .footer-companies{ grid-template-columns: repeat(2, minmax(110px,1fr)); margin-bottom:3rem; margin-top:2.5rem; }
  #footer .footer-about p{
  font-size:0.9rem;}
}

/* Footer: zentriert auf Phones */
@media (max-width: 900px){
  #footer{
    text-align: center;
  }

  #footer .footer-grid{
    display: grid;
    grid-template-columns: 1fr;      
    justify-items: center;          
    align-items: start;
    gap: 14px;
    padding-inline: 16px;
  }

  /* Robby, About, Map – jeweils mittig */
  #footer .robby,
  #footer .footer-about,
  #footer .footer-map{
    justify-self: center;
    width: 100%;
  }

  #footer .footer-about p{
    margin-inline: auto;
    max-width: 48ch;                 
  }

  /* Firmen-Logos gleichmäßig mittig */
  #footer .footer-companies{
    display: grid;
    grid-template-columns: repeat(2, minmax(110px,1fr));
    justify-items: center;
    gap: 10px 14px;
    width: 100%;
  }
  #footer .company-figure,
  #footer .company-figure img{
    margin-inline: auto;
    display: block;
  }

  /* Karte mittig & nicht zu breit */
  #footer .footer-map{
    margin: 0 auto;
    max-width: min(680px, 92vw);
  }
  
  #footer .footer-map .map-marker span{
  font-size:0.65rem;}

  /* Legal-Bereich + Links & Socials zentrieren */
  #footer .footer-legal{
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 6px;
    text-align: center;
    padding-inline: 12px;
    font-size:0.8rem;
  }
  
  #footer .footer-legal p{
  font-size:0.7rem;}
  
  #footer .footer-center{
    display: grid;
    justify-items: center;
    row-gap: 6px;
    width: 100%;
    padding-bottom:1rem;
  }
  #footer .footer-links{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem .7rem;
    margin-top:0.5rem;
  }
  #footer .social-links{
    display: flex;
    justify-content: center;
    gap: 12px;
    padding-top:1rem;
    margin-bottom:0.5rem;
  }
}

/* ===========================================================
   LEGACY/FEIN-TUNING aus style.css
   =========================================================== */
@media (min-width:1200px){
  #contact .contact-people{ position:sticky; top:96px; }
}

/* ====== Full-bleed & Grid-Fix für Phones (≤ 599px) ====== */
@media (max-width:900px){
  .band,
  .band--product-pricing,
  #product-einstieg,
  #product,
  #pricing,
  #partners,
  #followup,
  #contact,
  #footer{
    width:100vw !important;
    max-width:100vw !important;
    margin:0 !important;
    padding-inline:0;   
    box-sizing:border-box;
  }


  /* Falls .band ein Grid ist: einklappen */
  .band,
  .band--product-pricing{
    display:block !important;
    grid-template-columns: 1fr !important;
    column-gap:0 !important;
  }
  

  /* Innere Content-Grids: zentriert & gepolstert */
  .product-einstieg-header .product-einstieg-header-grid,
  .product-einstieg-benefit-grid,
  #product .product-layout,
  #pricing .header-grid,
  #partners .partners-wrap,
  #followup .followup-wrap,
  #footer .footer-grid{
    width:min(94vw, 1100px);
    padding-inline:16px;
    box-sizing:border-box;
  }

  /* Sicherheitsnetz gegen horizontale Ausreißer */
  img, svg, video{ max-width:100%; height:auto; display:block; }
}


/* =========================================================
   PRODUCT x PRICING – Mobile Re-Layout (≤ 599px)
   ========================================================= */
@media (max-width: 900px){



  /* 2) Einspaltiges Grid ohne Dividerlinien & ohne Höhenkappe */
  #product .product-layout{
    max-height: none !important;        /* <— wichtigste Änderung */
    grid-template-columns: 1fr;
    row-gap: clamp(14px, 4vw, 22px);
    align-items: start;
    padding-inline: 16px;
  }
  #product .product-layout::before
 { display:none; } /* vertikaler Trenner aus */

  /* 3) Slider oben, voll im Flow, alles innerhalb des Sliders bleibt drin */
  #product .slider{
    grid-column: 1;
    order: 1;
    width: 100%;
    margin: 0 auto clamp(14px, 5vw, 24px);
    padding: 0 0 48px;                  
    overflow: hidden;                 
  }
  #product .slides{
    min-height: auto;
    padding-inline: clamp(14px, 5vw, 22px);
  }
  #product .slider > .prev,
  #product .slider > .next{
    top: 10px;                          /* etwas kompakter */
  }
  
  #product .slider img{justify-self:center;}
  
  #product .dots{ bottom: 8px; }

  /* 4) Runde SVG-Navigation unter dem Slider und kleiner */
  #product .product-carousel{
    grid-column: 1;
    order: 2;
    --carousel-size: clamp(260px, 80vw, 420px);
    margin: 6px auto clamp(18px, 6vw, 28px);
    overflow: visible;                  /* darf etwas „atmen“, stört aber nicht mehr */
  }

  /* 5) Extra-Schrumpfung für sehr schmale Phones */
  @media (max-width: 599px){
    #product .slides{ padding-inline: 12px; }
    #product .product-carousel{ --carousel-size: clamp(240px, 86vw, 360px); }
  }
}

/* =========================================================
   PRICING – Mobile Re-Layout (≤ 599px)
   ========================================================= */
@media (max-width: 900px){

  /* Section rhythm */
  #pricing{
    isolation: isolate;
  }

  /* Header einspaltig, Trenner aus */
  #pricing .header-grid{
    grid-template-columns: 1fr;
    row-gap: 12px;
    align-items: start;
  }
  #pricing .header-grid::before{ display:none; }

  /* Text vor Karussell */
  #pricing .header-content{
    order: 1;
  }
  #pricing .plans-carousel{
    order: 2;
    margin-top: 6px;
    padding-top: 0;
  }

  /* Viewport: volle Breite, sanfter Schatten, schöne Rundung */
  #pricing .carousel-viewport{
    max-width: 94vw;
    margin-inline: auto;
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(0,0,0,.18);
  }

  /* Kartenhöhe dynamisch (kein 42vh-Quetschen) */
  #pricing .plan-card{
    min-height: unset;           /* war: clamp(360px,42vh,480px) */
  }
  #pricing .plan-card .card-content{
    padding: 16px 18px 20px;     /* etwas kompakter */
  }

  /* Typo & Liste kompakter */
  #pricing .plan-head h3{ font-size: clamp(1.25rem, 5.2vw, 1.6rem); }
  #pricing .plan-sub{ font-size: clamp(.9rem, 3.4vw, 1rem); }
  #pricing .price-value{ font-size: clamp(1.35rem, 6.2vw, 1.8rem); }
  #pricing .plan-card .plan-features{ gap: .35rem; }
  #pricing .plan-card .plan-features li{ padding-left: .95rem; }
  #pricing .plan-card .plan-features li::before{ width: .45rem; height:.45rem; }

  /* CTA durchgehend */
  #pricing .plan-cta .prdbtn-glow{
    width: 100%;
    max-width: none;
  }

  /* Controls größer & separierter */
  #pricing .carousel-controls{
    gap: .6rem;
    margin-top: .8rem;
  }
  #pricing .nav-btn{ width: 42px; height: 42px; }
  #pricing .dots button{ width: 9px; height: 9px; }
  #pricing .dots button[aria-selected="true"]{ width: 24px; }

  /* Fußnote mit Luft, bricht schön um */
  #pricing .pricing-foot{
    max-width: 92%;
    margin-top: 12px;
    text-align: center;
  }
}

/* Ultra-schmal (≤ 360px) – noch etwas kompakter */
@media (max-width: 360px){
  #pricing .header-content{ padding-inline: 12px; }
  #pricing .carousel-viewport{ max-width: 92vw; }
  #pricing .plan-card .card-content{ padding: 14px 16px 18px; }
}


/* iOS-robuste Zentrierung für Followup-Button */
#followup aside{
  justify-content:center;
  text-align:center;
}

#followup .followup-jump{
  /* statt justify-self → immer zuverlässig */
  margin-inline:auto;          /* block-Element mittig */
  display:flex;                /* sauberer Center innerhalb des Kreises */
  align-items:center;
  justify-content:center;
  line-height:0;               /* vermeidet Baseline-Offsets um das SVG */
}

/* Safari-Subpixel: keine vertikale Verschiebung des Icons */
#followup .followup-jump svg{
  transform:none;              /* remove translateY(-2px) */
  /*display:block;               /* verhindert Inline-Baseline-Effekt */
}

/* Slider: „#1“-Grafik wirklich mittig (statt justify-self auf img) */
#product .slides > .slide > div > img{
  display:block;
  margin-left:auto;
  margin-right:auto;
}

/* =========================================================
   RESOLUTION CLUSTERS — OVERRIDE LAYER 
   A) Laptop S / Large Tablet Landscape (1024–1279)
   B) Tablet L Portrait (900–1023)
   C) Tablet S Portrait (768–899)
   D) Large Phones / Phablets (600–767)
   ========================================================= */

/* ===== A) Laptop S / Large Tablet Landscape (1024–1279) ===== */
@media (min-width:1024px) and (max-width:1279px){

  /* HERO: 2 Spalten, ohne Offsets, Business-CTA linksbündig */
  .hero-grid{
    width:min(96%,1100px);
    grid-template-columns: minmax(320px,1fr) minmax(460px,1.25fr);
    gap: clamp(18px, 3vw, 32px);
    align-items: center;
    text-align: left;
  }
  .hero-image{
    --hero-image-size: clamp(260px, 28vw, 360px);
    transform:none; justify-self:end;
  }
  .hero-image figcaption{ position:static; transform:none; margin-top:.75rem; }
  .hero-content{ max-width:60ch; padding:0; }
  #hero h1{ font-size: clamp(2.1rem, 1.2vw + 1.2rem, 2.6rem); }
  #hero h2{ font-size: clamp(1.1rem, .9vw + .9rem, 1.35rem); }
  #hero h3{ font-size: clamp(1rem, .5vw + .9rem, 1.2rem); }
  .hero-button-wrap{ justify-content:flex-start; }
  .hero-logo{ width: clamp(140px, 16vw, 220px); transform:none; justify-self:start; }

  /* PRODUCT: 2 Spalten wieder möglich, luftige Gaps */
  #product .product-layout{
    grid-template-columns: minmax(520px,1fr) minmax(420px,1fr);
    column-gap: clamp(18px,3vw,32px);
    row-gap: 20px;
    align-items: start;
    padding-inline: 20px;
  }
  #product .slider{ margin:0; width:100%; padding-bottom:42px; }
  #product .slides{ min-height: clamp(420px, 44vh, 560px); }
  #product .product-carousel{
    --carousel-size: clamp(460px, 38vw, 560px);
    margin: 0 auto;
  }

  /* PRICING: 2 Spalten, Viewport angenehm breit */
  #pricing .header-grid{
    grid-template-columns: minmax(520px,1.1fr) 1fr;
    column-gap: clamp(18px,3vw,28px);
    align-items: start;
  }
  #pricing .header-content{ padding-inline:20px; }
  #pricing .carousel-viewport{ max-width: min(860px, 88vw); }
}

/* ===== B) Tablet L Portrait (900–1023) ===== */
@media (min-width:900px) and (max-width:1023px){

  /* HERO: 2 Spalten, kompaktere Typo */
  .hero-grid{
    width:min(96%,1100px);
    grid-template-columns: minmax(260px,.9fr) minmax(360px,1.1fr);
    gap: clamp(16px,3vw,28px);
    align-items:center;
    text-align:left;
  }
  .hero-image{ --hero-image-size: clamp(230px, 32vw, 330px); transform:none; justify-self:center; }
  .hero-image figcaption{ position:static; transform:none; margin-top:.75rem; }
  .hero-content{ max-width:54ch; padding:0; }
  #hero h1{ font-size: clamp(1.9rem, 2.2vw + 1rem, 2.4rem); }
  #hero h2{ font-size: clamp(1.05rem, 1.2vw + .85rem, 1.3rem); }
  .hero-button-wrap{ justify-content:flex-start; }
  .hero-logo{ width: clamp(120px, 18vw, 180px); transform:none; justify-self:start; }

  /* PRODUCT: stapeln (Slider → Carousel) für mehr Luft */
  #product .product-layout{ grid-template-columns:1fr; row-gap:22px; padding-inline:20px; }
  #product .slider{ width:min(760px,100%); margin:0 auto 20px; padding-bottom:40px; }
  #product .slides{ min-height: clamp(380px, 46vh, 520px); padding-inline: clamp(24px,4vw,48px); }
  #product .product-carousel{ --carousel-size: clamp(420px, 68vw, 560px); margin:8px auto 0; }

  /* PRICING: Header einspaltig */
  #pricing .header-grid{ grid-template-columns:1fr; row-gap:14px; }
  #pricing .header-content{ padding-inline:20px; }
  #pricing .carousel-viewport{ max-width:86vw; }
}

/* ===== C) Tablet S Portrait (768–899) ===== */
@media (min-width:768px) and (max-width:899px){

  /* HERO: 2 Spalten bleiben, alles eine Nummer kleiner */
  .hero-grid{
    width:min(96%,980px);
    grid-template-columns: minmax(240px,.95fr) minmax(320px,1.05fr);
    gap: clamp(14px,3vw,24px);
    align-items:center;
    text-align:left;
  }
  .hero-image{ --hero-image-size: clamp(220px, 34vw, 320px); transform:none; justify-self:center; }
  .hero-content{ max-width:52ch; padding:0; }
  #hero h1{ font-size: clamp(1.8rem, 2vw + .9rem, 2.25rem); }
  #hero h2{ font-size: clamp(1rem, 1vw + .8rem, 1.2rem); }
  .hero-logo{ width: clamp(110px, 17vw, 160px); }

  /* PRODUCT: klar stapeln */
  #product .product-layout{ grid-template-columns:1fr; row-gap:20px; padding-inline:18px; }
  #product .slider{ width:min(720px,100%); margin:0 auto 18px; padding-bottom:38px; }
  #product .slides{ min-height: clamp(360px, 44vh, 500px); padding-inline: clamp(20px,4vw,40px); }
  #product .product-carousel{ --carousel-size: clamp(380px, 72vw, 520px); margin:6px auto 0; }

  /* PRICING: einspaltig */
  #pricing .header-grid{ grid-template-columns:1fr; row-gap:12px; }
  #pricing .header-content{ padding-inline:18px; }
  #pricing .carousel-viewport{ max-width:88vw; }
}

/* ===== D) Large Phones / Phablets (600–767) ===== */
@media (min-width:600px) and (max-width:767px){

  /* HERO: einspaltig, zentriert, sichere Typo */
  .hero-grid{ grid-template-columns:1fr; gap:16px; width:min(94%,640px); text-align:center; }
  .hero-image{ --hero-image-size: clamp(220px, 58vw, 300px); }
  #hero h1{ font-size: clamp(1.7rem, 5vw, 2.2rem); }
  #hero h2{ font-size: clamp(1rem, 3.2vw, 1.2rem); }
  .hero-button-wrap{ justify-content:center; }

  /* PRODUCT & PRICING: wie Phone, aber Viewports etwas breiter */
  #product .product-layout{ grid-template-columns:1fr; padding-inline:16px; }
  #product .product-carousel{ --carousel-size: clamp(340px, 78vw, 480px); }
  #pricing .header-grid{ grid-template-columns:1fr; }
  #pricing .carousel-viewport{ max-width:92vw; }
}

/* =========================================================
   COMPLEMENT — restliche Sektionen in Clustern angleichen
   ========================================================= */

/* A) 1024–1279: Footer 2-spaltig, Partners 2-spaltig, Einstieg spacing */
@media (min-width:1024px) and (max-width:1279px){
  #footer .footer-grid{ grid-template-columns:1fr 1fr; justify-items:center; }
  #partners .partner-hero .product-list,
  #partners .partners-grid{ grid-template-columns:repeat(2,1fr); }
  .product-einstieg-header .product-einstieg-header-grid,
  .product-einstieg-benefit-grid{ width:min(96%,1100px); margin-inline:auto; }
}

/* B) 900–1023: Partners 2-spaltig, Follow-up Luft, Einstieg padding */
@media (min-width:900px) and (max-width:1023px){
  #partners .partner-hero .product-list,
  #partners .partners-grid{ grid-template-columns:repeat(2,1fr); }
  #partners .partner-hero{ height: clamp(260px, 40vw, 360px); }
  .product-einstieg-header .product-einstieg-header-grid,
  .product-einstieg-benefit-grid{ padding-inline:20px; }
  #followup{ padding: clamp(48px, 6vw, 72px) 20px; }
}

/* C) 768–899: Partners 2-spaltig, Einstieg zentriert, Footer 2-spaltig */
@media (min-width:768px) and (max-width:899px){
  #partners .partner-hero .product-list,
  #partners .partners-grid{ grid-template-columns:repeat(2,1fr); }
  .product-einstieg-header .product-einstieg-header-grid,
  .product-einstieg-benefit-grid{ padding-inline:18px; }
  .product-einstieg-figure{ max-width:min(92vw,780px); margin-inline:auto; }
  #footer .footer-grid{ grid-template-columns:1fr 1fr; justify-items:center; }
}

/* D) 600–767: kleine Feinheiten (Partners Höhe, Footer 1-spaltig) */
@media (min-width:600px) and (max-width:767px){
  #partners .partner-hero{ height: clamp(220px, 52vw, 340px); }
  #footer .footer-grid{ grid-template-columns:1fr; }
}