@charset "UTF-8";

/* ==================================================
   main.css – Globales Stylesheet (bereinigt)
   1) Base / Globals
   2) Components (Cards, Buttons, Figure, Eyebrow)
   3) Navigation
   4) Hero
   5) Produkt-Einstieg (Header + Grid)
   6) Product
   7) Pricing
   8) Partnership
   9) Followup
   10) Contact
  
   ================================================== */

/* ========== 1) Base / Globals ========== */
@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-VariableFont_wdth_wght.ttf");
}

:root{
  --card-bg:#fff;
  --card-fg:#0f1512;
  --card-border:rgba(15,21,18,.08);
  --card-radius:14px;
  --card-pad:clamp(1.25rem,2.5vw,2rem);
  --card-shadow-1:0 10px 24px rgba(0,0,0,.12);
  --card-shadow-2:0 2px 8px rgba(0,0,0,.06);
  --brand:#1b4d36;
  --brand-2:#FFD700;
  --section-topline:rgba(0,0,0,.25);
  --grid-topline:rgba(0,0,0,.25);
  --map-gutter: clamp(12px, 3.5vw, 32px);
}

body{ font-family:"Open Sans", Arial, sans-serif; }

footer{
  background:#1b2f26;
  color:#fff;
}

.highlighted-text{ color:#000; font-weight:600; padding:0 4px; border-radius:4px; }

.carousel i,.slider i,.benefits-list i,#pricing i{ margin-right:.5rem; color:#000; }

/* ========== 2) Components ========== */
/* Cards */
.card{
  position:relative;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(27,77,54,.06), transparent 46%),
    var(--card-bg);
  color:var(--card-fg);
  border:1px solid var(--card-border);
  border-radius:var(--card-radius);
  padding:var(--card-pad);
  box-shadow:var(--card-shadow-1), var(--card-shadow-2);
  line-height:1.55; letter-spacing:.01em;
  backdrop-filter:saturate(1.1);
}
.card::after{
  content:""; position:absolute; inset:0 0 auto 0; height:48px;
  border-radius:var(--card-radius) var(--card-radius) 0 0;
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0));
  pointer-events:none;
}

/* Naked card */
.card2{
  position:relative; color:var(--card-fg);
  padding:0; line-height:1.55; letter-spacing:.01em;
}

/* Shared card typo */
.card h2,.card2 h2{
  margin:0 0 .35rem; font-size:clamp(1.35rem,2.2vw,1.9rem);
  line-height:1.25; letter-spacing:.005em;
}
.card p,.card2 p{ margin:.6rem 0; }
.card p:last-child,.card2 p:last-child{ margin-bottom:0; }
.card mark,.card2 mark{
  background:linear-gradient(180deg, rgba(255,215,0,.45), rgba(255,215,0,.15));
  padding:.05rem .25rem; border-radius:.35rem;
}

/* Figure with hr lines */
.card__figure--contained{
  position:relative; margin:1.25rem 0; padding:1rem 0;
}
.card__figure--contained::before,
.card__figure--contained::after{
  content:""; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(to right, transparent 0%, rgba(0,0,0,.12) 12%, rgba(0,0,0,.12) 88%, transparent 100%);
  pointer-events:none;
}
.card__figure--contained::before{ top:0; }
.card__figure--contained::after{ bottom:0; }
.card__figure--contained img{
  display:block; width:min(92%,560px); max-height:clamp(220px,32vh,340px);
  margin-inline:auto; height:auto; object-fit:contain;
  border-radius:0 0 var(--card-radius) var(--card-radius);
}
.card__figure--contained figcaption{
  position:static !important; transform:none !important;
  display:block; width:100%; text-align:center; margin:.5rem auto 0;
  font-size:.78rem; color:rgba(15,21,18,.55);
}

/* Card accents */
.card--accent-left::before{
  content:""; position:absolute; left:-10px; top:18px; bottom:18px; width:6px;
  background:var(--brand); border-radius:8px; box-shadow:0 0 0 2px rgba(27,77,54,.15);
}
.card--elevated{ box-shadow:0 18px 48px rgba(0,0,0,.16), 0 3px 10px rgba(0,0,0,.06); }

/* Eyebrow */
.eyebrow{
  position:relative; font-size:1rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:rgba(15,21,18,.66);
  --eb-gap:10px; --eb-w:6px; --eb-h:25px;
  padding-left:calc(var(--eb-w) + var(--eb-gap) + 10px);
  font-size:1.15rem;
}
.eyebrow::before{
  content:""; position:absolute; left:0; top:50%;
  width:var(--eb-w); height:var(--eb-h); transform:translateY(-50%);
  border-radius:3px; background:#1b4d36; z-index:1;
}
.eyebrow::after{
  content:""; position:absolute; left:calc(var(--eb-w) - 2px);
  top:calc(50% + 6px); width:var(--eb-w); height:var(--eb-h);
  transform:translateY(-52%); border-radius:3px; background:#FFD700; z-index:2;
}


.eyebrow-hero{
	position:relative; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:rgba(15,21,18,.66);
  --eb-gap:10px; --eb-w:6px; --eb-h:25px;
  padding-left:calc(var(--eb-w) + var(--eb-gap) + 10px);
  font-size:1.2rem; margin-bottom:2rem;
  
}





/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.75rem 1.15rem; border-radius:10px;
  font-weight:700; text-decoration:none; border:1px solid transparent;
  transition:.18s ease; white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(135deg,#2a6f4e,#1b4d36); color:#fff;
  box-shadow:0 6px 16px rgba(27,77,54,.28);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(27,77,54,.34); }
.btn-ghost{ color:var(--brand); background:rgba(27,77,54,.06); border-color:rgba(27,77,54,.2); }
.btn-ghost:hover{ background:rgba(27,77,54,.12); }

/* Section CTA (center) */
.card__footer, .card2 .card__footer{
  margin-top:3rem; display:flex; justify-content:center;
}

/* Grün CTA (hero) */
.hero-button-wrap 
{ margin-top: 1.75rem; /* Abstand zum Text */ 
display: flex; 
justify-content: center; /* Button mittig */ } .btn-glow { background: linear-gradient(135deg, #2a6f4e, #1b4d36); color: #fff; font-weight: 600; font-size: 1.2rem; width:320px; padding: 1rem 2.5rem; border-radius: 12px; text-transform: uppercase; letter-spacing: 0.05em; text-align: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 0 8px rgba(255, 255, 255, 0.1); transition: all 0.35s ease; display: inline-block; cursor: pointer; text-decoration: none; border: 1px; position: relative; overflow: hidden; } /* Hover-Effekt */ .btn-glow:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35), inset 0 0 12px rgba(255, 255, 255, 0.15); transform: translateY(-3px) scale(1.02); } /* Glow-Animation */ .btn-glow::before { content: ""; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; background: linear-gradient(60deg, #06402B, #1b4d36, #2a6f4e, #eebc1d, #2a6f4e, #1b4d36); background-size: 400% 400%; filter: blur(12px); z-index: -1; opacity: 0; transition: opacity 0.4s ease-in-out; border-radius: 14px; } .btn-glow:hover::before { opacity: 1; animation: glowMove 8s ease infinite; } /* Keyframes für sanfte Bewegung */ @keyframes glowMove { 0% { background-position: 0% 50%; } 50% { background-position : 100% 50%; } 100% { background-position : 0% 50%; } }

/* Gold CTA (product/pricing/etc.) */
.prdbtn-glow{
  background:linear-gradient(135deg,#FFD700,#eebc1d); color:#000;
  font-weight:600; font-size:1.2rem; padding:1rem 2.5rem; border-radius:12px;
  text-transform:uppercase; letter-spacing:.05em; text-align:center;
  box-shadow:0 4px 12px rgba(0,0,0,.25), inset 0 0 8px rgba(255,255,255,.1);
  transition:all .35s ease; display:inline-block; cursor:pointer; text-decoration:none;
  border:3px; position:relative; overflow:hidden;
  width:320px;
}
.prdbtn-glow:hover{
  box-shadow:0 8px 20px rgba(0,0,0,.25), inset 0 0 12px rgba(255,255,255,.15);
  transform:translateY(-3px) scale(1.02);
}
.prdbtn-glow::before{
  content:""; position:absolute; inset:-4px;
  background:linear-gradient(60deg,#a67c00,#bfa14a,#d4af37,orange,#ffbd2c,#1b4d36);
  background-size:400% 400%; filter:blur(12px); z-index:-1; opacity:0;
  transition:opacity .4s ease-in-out; border-radius:14px;
}
.prdbtn-glow:hover::before{ opacity:1; animation:glowMove 8s ease infinite; }
@keyframes glowMove{
  0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%}
}

/* ========== 3) Navigation ========== */
.navbar{
  position:fixed; top:0; left:0; width:100%; height:64px; display:flex;
  align-items:center; justify-content:space-between; padding:0 3rem;
  background:#1b2f26; backdrop-filter:blur(6px); z-index:1000; transition:all .3s ease;
}
.navbar.scrolled{ background:#0f1d17; box-shadow:0 4px 8px rgba(0,0,0,.3); }
.nav-logo{ height:42px; width:auto; }
.firm-logo img{ height:38px; width:auto; margin:0 1.5rem 0 2rem; }
.navbar .nav-link{
  color:#f4f8f4; margin:1rem; font-size:1rem; position:relative; transition:color .3s ease; font-weight:600; text-transform: uppercase;
}
.navbar .nav-link:hover,.navbar .nav-link.active{ color:#f8d856; }
.navbar .nav-link::after{
  content:""; position:absolute; left:0; bottom:-4px; width:0%; height:2px; background:#a8e6c3; transition:width .3s ease;
}
.navbar .nav-link:hover::after,.navbar .nav-link.active::after{ width:100%; }
.navbar .nav-link i{ font-size:1.25rem; }
.navbar .nav-link i:hover{ transform:scale(1.35); }

/* language buttons */
#languageButtons{ display:flex; gap:.4rem; }
#languageButtons .btn{
  font-weight:600; padding:.25rem .8rem; font-size:.8rem; border-radius:40%;
  background:rgba(255,255,255,.1); color:#f4f8f4; border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(6px); transition:all .3s ease; letter-spacing:.5px;
}
#languageButtons .btn:hover{ background:#5e9693; color:#fff; border-color:#5e9693; box-shadow:0 0 10px rgba(94,150,147,.6); transform:translateY(-1px); }
#languageButtons .btn.active{ background:#5e9693; color:#000; border-color:#5e9693; box-shadow:0 0 8px rgba(94,150,147,.5); cursor:default; }



/* ========== 4) Hero ========== */
#hero{
  position:relative; display:flex; align-items:center; justify-content:center;
  padding:6rem 2rem 2rem; background-image:url("../img/ORHG1E0.jpg");
  background-size:cover; background-position:center; background-repeat:no-repeat;
  min-height:100vh; overflow:hidden;
}
#hero::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.03); z-index:1; } 
#hero>*{ position:relative; z-index:2; }

.hero-grid{
  display:grid; grid-template-columns:minmax(280px,.95fr) minmax(560px,1.35fr) minmax(240px,.85fr);
  align-items:center; gap:clamp(3.5rem,5vw,4.5rem); width:78%; max-width:100%; margin-inline:auto; text-align:center;
}

/* Left image circle + caption */
.hero-image{
  grid-column:1; justify-self:end; transform:translateX(-6vw);
  position:relative; display:flex; justify-content:center; align-items:center;
  --hero-image-size:clamp(340px,25vw,500px);
}
.hero-image img{
  width:var(--hero-image-size); height:var(--hero-image-size); object-fit:cover; border-radius:50%;
  box-shadow:0 8px 16px rgba(0,0,0,.2); border:2px solid rgba(255,255,255,.35);
}

/*.hero-image img:hover{
  transform: scale(1.02);
}*/

.hero-image figcaption{
  position:absolute; left:50%; bottom:-8px; transform:translate(-50%,100%);
  font-size:.75rem; font-weight:600; color:#1b2f26; background:#fff;
  padding:.4rem .85rem; border-radius:8px; display:inline-flex; align-items:center; gap:.75rem; padding-left:22px; 
}
.hero-image figcaption::before{ content:""; position:absolute; left:8px; top:50%; transform:translateY(-50%); width:6px; height:24px; border-radius:3px; background:#1b4d36; }
.hero-image figcaption::after{ content:""; position:absolute; left:12px; top:calc(50% + 6px); transform:translateY(-50%); width:6px; height:24px; border-radius:3px; background:#FFD700; }

/* Center text */
.hero-content{
  grid-column:2; place-self:center; max-width:72ch; padding:1.5rem 2rem;
}
#hero h1{ font-size:2.75rem; line-height:1.25; letter-spacing:.02em; margin-bottom:2.5rem;font-weight:600;}
#hero h2{ font-size:1.4rem; line-height:1.25; margin-bottom:1rem; font-weight:600; margin-bottom: 1rem;}
#hero h3{ font-size:clamp(0.75rem,.55vw + .9rem,1.25rem); line-height:1.55; margin-bottom:1.3rem; }

#hero p{font-size:clamp(0.7rem,.9vw + .9rem,1.2rem); line-height:1.25;}
.hero-button-wrap{ margin-top:1.75rem; display:flex; justify-content:center; }


/* Right logo */
.hero-logo{ grid-column:3; justify-self:start; transform:translateX(5vw); width:clamp(160px,18vw,340px); height:auto; margin:0; }

#hero .rotator{
  font-weight:600;
  -webkit-background-clip:text; background-clip:text;
  color: orange;

}



@keyframes rotOut { from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(-10px)} }
@keyframes rotIn  { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
#followup .rotator.is-out{ animation:rotOut .35s ease both; }
#followup .rotator.is-in{  animation:rotIn  .45s ease both;}



/* ========== 5) Produkt-Einstieg  ========== */
#product-einstieg{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
 padding: 3rem 2rem 0rem;     
  color:#000;
  background-image:
    linear-gradient(to right, rgba(0,0,0,.10) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 78%, rgba(0,0,0,.10) 100%),
    linear-gradient(#d8d7e0 0%, #dee0dc 20%, #e6e9e3 40%, #edf2ec 65%, #f4f8f4 100%);
}
#product-einstieg::before{
content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--section-topline); z-index:1; }


/* ---------- Header (links, mit Card) ---------- */
.product-einstieg-header{
  max-width:1920px;                     
  margin-bottom: 5rem;
  
}

/* ---------- Product-Header-Grid (2 Spalten) ---------- */

.product-einstieg-header .product-einstieg-header-grid{
	position:relative;
  display:grid;
  grid-template-columns:minmax(560px, 1.10fr) 1fr;  /* linke Spalte minimal breiter */
  align-items:start;
  column-gap:clamp(2rem, 4vw, 3rem);
}

.product-einstieg-header .product-einstieg-header-grid::before{
  content: "";
  position: absolute;
  top: 0;                     
  bottom: 0;                   
  left: 50%;                   
  width: 1px;
  transform: translateX(-50%); 
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,.25) 8%,
    rgba(0,0,0,.30) 14%,
    rgba(0,0,0,.35) 65%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;                 
}

.header-grid-textcontainer{
  grid-column: 1;
  display: flex;
  align-items: center;               
  justify-content: center;           
  
}

.header-card{
  --fg:#0f1512; --radius:14px;
  justify-self:start;                        
  color:var(--fg);
  padding-right:6rem;
}


.header-card .sublead{
  margin:0;
  font-size:clamp(1.08rem, 1.35vw, 1.23rem);/* +~10–15% */
  color:#1a1d1a; 
  opacity:.9;
}

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

/* Basisliste */
#product-einstieg .product-points{
  margin: 1rem 0 1.6rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .6rem;
  max-width: 58ch;               
}

#product-einstieg .product-points i{
	margin-right: 1rem;
}

/* Hauptpunkte mit Icon-Marker (Check) */
#product-einstieg .product-points > li{
  position: relative;
  padding-left: 0;
  line-height: 1.45;
}


/* Unterliste kompakt, ohne Standardmarker */
#product-einstieg .product-points .subpoints{
  margin:.35rem 0 0;
  padding:0;
  list-style:none;
  display:grid; gap:.3rem;
  opacity:.92;
  padding-top:0.3rem;
  line-height:1.2;
}
#product-einstieg .product-points .subpoints > li{
  position:relative; padding-left:2.5rem;
  font-size: 1rem; 
}
#product-einstieg .product-points .subpoints > li::before{
  content:"";
  position:absolute; left:1rem; top:.55em;
  width:.45rem; height:.45rem; border-radius:50%;
  background:orange;           
}

.header-grid-bildcontainer{
  grid-column: 2;
  width: 100%;
  max-width: 980px;
  display: flex;
  align-items: center;               
  justify-content: center;           
  
}


/* ---------- Product-Einstieg-Grid (2 Spalten) ---------- */
.product-einstieg-benefit-grid{
  position:relative;
  width:100%;
  max-width:1920px;
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(520px,1fr) minmax(620px,1fr);
  column-gap:clamp(2.5rem,5vw,6rem);
  row-gap:3rem;
  align-items:stretch;
  padding: 3rem 2rem 0rem;     
}
/* Vertikaler Trenner ausschließlich zwischen den Spalten */
.product-einstieg-benefit-grid::before{
  content:"";
  position:absolute;
  left:50%;
  top:.75rem;                          
  bottom:1.25rem;
  transform:translateX(-.5px);
  width:1px;
  background:linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,.25) 8%,
    rgba(0,0,0,.30) 14%,
    rgba(0,0,0,.35) 65%,
    transparent 97%
  );
  pointer-events:none;
}

/*Horizontaler Trenner zwischen den Grids*/
 .product-einstieg-benefit-grid::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:2px;
  background:
    linear-gradient(to right,
      transparent 0%,
      rgba(0,0,0,.08) 10%,
      rgba(0,0,0,.12) 25%,
      rgba(0,0,0,.14) 50%,
      rgba(0,0,0,.12) 75%,
      rgba(0,0,0,.08) 90%,
      transparent 100%
  );
  pointer-events:none;
  z-index:1;
}

.product-einstieg-grid-bildcontainer{
  grid-column: 1;
  width: 100%;
  max-width: 860px;
  display: flex;
  align-items: center;               
  justify-content: center;           
  
}

/* Figure selbst: volle Spaltenbreite, zentriert */
.product-einstieg-figure{
  width: 100%;
  max-width: 860px;           
  margin: 1.1rem auto 1.25rem;
  margin-left: 1.2rem;
  text-align: center; 
}

/* Bild: niemals breiter als die Figure, bleibt skalierbar */
.product-einstieg-figure img{
  display: block;
  margin-inline: auto;
  width: 100%;
  height: auto;
  max-width: 100%;    
  margin-top: 3rem;        
}

/* Caption */
.product-einstieg-figure figcaption{
  margin-top: .45rem;
  font-size: .85rem;
  color: rgba(15,21,18,.65);
}

.product-einstieg-grid-benefitcontainer{
  grid-column: 2;
  justify-self: end;   
  align-self: end;    
  max-width:880px; 
}


/* ---------- Rechte Karte (Artikel) ---------- */

.product-einstieg-grid-benefitcontainer .benefits-list{
  max-width: 880px;
  margin-bottom: clamp(8px, 3vw, 28px);
  padding-left: 5rem;
}

.product-einstieg-grid-benefitcontainer .benefits-list > header{
  position: relative;
  text-align: left;
  padding-right: .25rem; 
}

/* Semantische Liste (Icon + Text) */
.benefits-list ul.benefits{
  list-style:none;
  margin:1rem 0 .25rem;
  padding:0;
  display:grid;
  gap:.6rem;
}
.benefits-list li.benefit{
  display:flex;
  align-items:flex-start;
  gap:.65rem;
  padding:.35rem 0;
}
.benefits-list li.benefit i{
  flex:0 0 auto;
  font-size:1.05rem;
  line-height:1.2;
  margin-top:.15rem;                    
  color:#0f1512;
}
.benefits-list li.benefit p{
  margin:0;
  line-height:1.55;
  color:#2a2d29;
}
.benefits-list li.benefit p > strong{
  color:#000;
  font-weight:700;
}

/* CTA unten in der rechten Karte */

.product-einstieg-grid-benefitcontainer .benefits-button-wrap{
  margin-top:2rem;
  display:flex;
  justify-content:center;
}



/* ========== 6) Product ========== */
/* Gemeinsamer Background über beide Bereiche */
.band--product-pricing{
  position: relative;
  /* exakt dein bisheriger #product-Background */
  background-image:
    linear-gradient(to right, rgba(0,0,0,.10) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 78%, rgba(0,0,0,.10) 100%),
    linear-gradient(#f4f8f4 0%, #edf2ec 20%, #e6e9e3 40%, #dee0dc 65%, #d8d7e0 100%);
}

/* Die beiden Bereiche selbst lassen den Wrapper durchscheinen */
#product,
#pricing{
  background: transparent;
  background-image: none;
}

#product{
  position: relative;
  padding: 3rem 2rem 0rem;    
  color:#000;
}
/* #product::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--section-topline); pointer-events:none; z-index:1; } */

#product > .product-header, #product > .product-layout{ max-width:100%; margin-inline:auto; }
#product .product-header{
  text-align:left;  padding-inline:auto; padding-right:3rem;
  padding-top:3rem;
}
#product h2, #product h3{ margin-bottom:1rem; }
#product h2{ font-size:2rem; } #product h3{ font-size:1.5rem; }

.product-button-wrap{ margin-top:3rem; display:flex; justify-content:center; }

/* Grid-Container – identisch zur Optik des header-grids */
#product .product-layout{
  position: relative;
  width: 100%;
  /*max-height: 70vh;*/
  max-width: 1920px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(560px, 1.10fr) 1fr; 
  column-gap: clamp(2rem, 4vw, 3rem);
  row-gap: 2.5rem;
  align-items: start; 
}

/* Vertikaler Trenner nur über der Grid-Höhe (wie im Header-Grid) */
#product .product-layout::before{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:50%;
  transform: translateX(-50%);
  width:1px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,.25) 8%,
    rgba(0,0,0,.30) 14%,
    rgba(0,0,0,.35) 65%,
    transparent 100%
  );
  pointer-events:none;
  z-index:0;
}

/* Horizontaler Anschluss-Strich oben – gleiche Optik wie beim benefit-grid */
#product .product-layout::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:2px;
  background:
    linear-gradient(to right,
      transparent 0%,
      rgba(0,0,0,.08) 10%,
      rgba(0,0,0,.12) 25%,
      rgba(0,0,0,.14) 50%,
      rgba(0,0,0,.12) 75%,
      rgba(0,0,0,.08) 90%,
      transparent 100%
  );
  pointer-events:none;
  z-index:1;
}



/* Rechte Spalte: Carousel */
#product .product-carousel{
  place-self: center;                
  display: grid;
  place-items: center;
  --carousel-size: clamp(520px, 38vw, 720px);     
  overflow:visible;              
}
/* Größe per Variable, zuverlässig */
#product .product-carousel > div > .carousel{
  width: var(--carousel-size);
  max-width: 100%;                 
  height: auto;
  display: block;
  overflow:visible;
}
.carousel svg,.carousel img{ width:100%; height:auto; object-fit:contain; overflow:visible; }

/* Linke Spalte: Slider-Card */
#product .slider{
  grid-column: 1;
  position: relative;
  justify-self: center;
  width: min(900px, 100%);
  padding: 2rem 0 0;
  display: grid;
  place-items: stretch;
  margin-right: 6rem; 
}
#product .slides{ grid-area:1/1; min-height: clamp(480px, 54vh, 560px); padding-inline: clamp(48px,4.5vw,72px); }
#product .slides > .slide{ display:none; }
#product .slides > .slide.display-slide{ display:block !important; }
#product .slides > .slide > div{
  padding: 1rem 0; text-align:center;
}
#product .slide-heading{ font-weight:600; margin:1.2rem 0 1rem; color:#000; }
#product .slide > div p{ text-align:left; margin-bottom:1.5rem; text-align:block; }

#product .slides > .slide > div > img{
  display: block;
  margin-inline: auto;
}

/* Slider-Pfeile */
#product .slider>button{
  grid-area:1/1; align-self:center; background:transparent; border:0; cursor:pointer;
  font-size:2.1rem; width:48px; height:48px; display:grid; place-items:center; color:#000; z-index:3;
}
#product .slider>.next{ justify-self:end; }
#product .slider>button:hover{ filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); }


/* SVG nav colors (wie gehabt, kurz belassen) */

.carousel .circle{ fill:#808080; }
g .icon{ fill:#fff; }
.carousel .circle path:nth-of-type(2){ stroke:#fff; stroke-width:5px; }
text.carousel-label{ fill:#fff; font-weight:700; text-transform:uppercase; font-size:16px; text-anchor:middle; }
.vertrieb:hover .circle{ fill:#b1b01a; }
.personalwesen:hover .circle{ fill:#065e4b; }
.finanzen:hover .circle{ fill:#3c7940; }
.projektmanagement:hover .circle{ fill:#76952f; }
.beschaffung:hover .circle{ fill:#dbb30a; }
.carousel-nav.activeCarouselButton .circle{ stroke:#1b2f26; stroke-width:7px; }
.carousel-nav.activeCarouselButton .circle path:nth-of-type(2){ stroke:#1b2f26; stroke-width:5px; }
.personalwesen.activeCarouselButton .circle{ fill:#065e4b; }
.finanzen.activeCarouselButton .circle{ fill:#3c7940; }
.beschaffung.activeCarouselButton .circle{ fill:#dbb30a; }
.projektmanagement.activeCarouselButton .circle{ fill:#76952f; }
.vertrieb.activeCarouselButton .circle{ fill:#b1b01a; }



/* ===================== 7) Pricing – Full-Bleed Single Card ===================== */

#pricing{
  position:relative;
  padding:6rem 2rem;
  color:var(--p2-ink);
}


#pricing .pricing2-wrap{ max-width:var(--p2-max); margin-inline:auto;}

#pricing .header-grid::before{
	content:"";
  position:absolute;
  top:0; bottom:0;
  left:50%;
  transform: translateX(-50%);
  width:1px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,.25) 8%,
    rgba(0,0,0,.30) 14%,
    rgba(0,0,0,.35) 65%,
    transparent 100%
  );
  pointer-events:none;
  z-index:0;
}


/* ---- Design-Variablen ---- */
:root{
  --p2-max: 1920px;
  --p2-gutter: clamp(2rem, 4vw, 3rem);
  --p2-ink: #0f1512;
  --p2-muted: #2a2d29;
  --p2-line: rgba(0,0,0,.12);
  --p2-accent: #f0a500;
  --p2-radius: 16px;
  --p2-shadow-s: 0 8px 14px rgba(0,0,0,.16);
  --p2-shadow-l: 0 24px 50px rgba(0,0,0,.30);
}

/* ---- Header ---- */
#pricing .header-grid{
  position:relative;
  display:grid;
  grid-template-columns: minmax(560px,1.1fr) 1fr;
  column-gap: var(--p2-gutter);
  align-items:start;
}
#pricing .header-grid::after{
  content:"";
  position:absolute; left:0; right:0; top:0; height:2px;
  background: linear-gradient(to right, transparent 0%,
    rgba(0,0,0,.08) 10%, rgba(0,0,0,.12) 25%, rgba(0,0,0,.14) 50%,
    rgba(0,0,0,.12) 75%, rgba(0,0,0,.08) 90%, transparent 100%);
  pointer-events:none;
}

#pricing .header-content{ display:flex; align-items:center; justify-content:center; max-width:860px; padding-top:3rem;}
#pricing .header-card{ max-width:800px; padding:clamp(1.1rem,2.6vw,2rem) clamp(1.25rem,3vw,2.2rem); }
#pricing .header-card .sublead{ margin:.35rem 0 .9rem; color:var(--p2-muted); }

/* ---- Toggle ---- */
#pricing .billing-toggle{
  display:inline-flex; gap:.5rem; margin-top:.5rem;
  padding:.35rem; border:1px solid var(--p2-line); border-radius:999px;
  background:#fff; box-shadow:var(--p2-shadow-s);
}
#pricing .toggle-btn{
  border:0; background:transparent; cursor:pointer; height:54px;
  padding:.55rem 1rem; border-radius:999px; font-weight:700; line-height:1; color:var(--p2-muted);
}
#pricing .toggle-btn.is-active{ background:#0f1512; color:#fff; }
#pricing .toggle-btn .save-badge{ font-size:.85em; font-weight:800; color:var(--p2-accent); }

/* ---- Carousel (1 Karte sichtbar) ---- */
#pricing .plans-carousel{ margin-top: clamp(24px, 4vw, 40px); padding-top:3rem;}
#pricing .carousel-viewport{
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap:0;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  border-radius: var(--p2-radius);
  box-shadow: var(--p2-shadow-l);
  max-width:720px;
  margin-inline:auto;
  -ms-overflow-style:none; scrollbar-width:none;
}
#pricing .carousel-viewport::-webkit-scrollbar{ height:10px; }
#pricing .carousel-viewport::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:999px; }
#pricing .carousel-viewport::-webkit-scrollbar-track{ background:transparent; }

/* ===================== Kartenbasis + Farblogik ===================== */
#pricing .plan-card{
  position:relative;
  scroll-snap-align:center;
  min-height: clamp(360px, 42vh, 480px);
  isolation:isolate;
  overflow:hidden;

  /* Default: helle Schrift auf dunklem Overlay */
  --ink:#fff;
  --ink-muted:rgba(255,255,255,.92);
  --bullet:rgba(255,255,255,.9);
  --overlay-from:rgba(0,0,0,.25);
  --overlay-to:rgba(0,0,0,.25); 
}

/* Hintergrundbild + Overlay */
#pricing .plan-card .card-media{
  position:absolute; inset:0;
  background-image: var(--bg);
  background-size:cover; background-position:center;
  transform:scale(1.02);
  transition:transform .6s ease;
  z-index:0;
}
#pricing .plan-card .card-overlay{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(to bottom, var(--overlay-from), var(--overlay-to));
}
#pricing .plan-card .card-content{
  position:relative; z-index:2;
  display:flex; flex-direction:column; height:100%;
  padding: clamp(18px, 2.2vw, 24px);
  padding-inline: clamp(20px, 5vw, 48px);
  padding-bottom: clamp(22px, 5vh, 56px);
  justify-content:flex-end;
}



/* Typografie & Bullets konsequent über Variablen */
#pricing .plan-card .plan-head h3,
#pricing .plan-card .price,
#pricing .plan-card .price .price-term,
#pricing .plan-card p{ color:var(--ink); }

#pricing .plan-card .plan-sub,
#pricing .plan-card .plan-features li{ color:var(--ink-muted); }

#pricing .plan-card .plan-features{ margin:.7rem 0 1rem; padding:0; display:grid; gap:.35rem; }
#pricing .plan-card .plan-features li{
  list-style:none; position:relative; padding-left:1.15rem;
}
#pricing .plan-card .plan-features li::before{
  content:""; position:absolute; left:0; top:.5rem;
  width:.55rem; height:.55rem; border-radius:50%; background:var(--bullet);
}

/* Headline/Meta-Größen */
#pricing .plan-head .plan-icon{ font-size:1.6rem; line-height:1; opacity:.95; }
#pricing .plan-head h3{ margin:.35rem 0 .15rem; font-size: clamp(1.35rem, 3.4vw, 2rem); font-weight:900; letter-spacing:.2px; }
#pricing .plan-sub{ margin:0 0 .6rem; font-size: clamp(.95rem, 2.2vw, 1.05rem); }
#pricing .price{ display:flex; align-items:baseline; gap:.45rem; margin:.2rem 0 .2rem; }
#pricing .price-value{ font-size: clamp(1.4rem, 4vw, 2.1rem); font-weight:900; letter-spacing:.2px; color:orange; }
#pricing .price-term{ opacity:.9; }

#pricing .plan-cta{ display:grid; justify-items:start; }
#pricing .plan-cta .prdbtn-glow{ filter: drop-shadow(0 6px 12px rgba(0,0,0,.25)); }

/* Hover-Parallax */
@media (hover:hover){
  #pricing .plan-card:hover .card-media{ transform:scale(1.05); }
}

/* ---- Modifier: Schwarze Schrift (aufgehelltes Overlay) ---- */
#pricing .plan-card.is-dark-ink{
  --ink:black;
  --ink-muted:black;
  --bullet:black;

}

/* Optional: mehr/weniger Kontrast je Foto */
#pricing .plan-card.is-contrast-strong{
  --overlay-from:rgba(0,0,0,.62);
  --overlay-to:rgba(0,0,0,.62);
}
#pricing .plan-card.is-contrast-light{
  --overlay-from:rgba(255,255,255,.42);
  --overlay-to:rgba(255,255,255,.28);
}

/* ---- Carousel Controls & Fußzeile ---- */
#pricing .carousel-controls{
  display:flex; align-items:center; justify-content:center; gap:.75rem;
  margin-top:.9rem;
}
#pricing .nav-btn{
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--p2-line); background:#fff; cursor:pointer;
  display:grid; place-items:center; font-size:1.45rem; line-height:1;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
}
#pricing .nav-btn:hover{ transform:translateY(-1px); }
#pricing .dots{ display:flex; gap:.45rem; align-items:center; }
#pricing .dots button{
  width:9px; height:9px; border-radius:999px; border:0; background:rgba(0,0,0,.18); cursor:pointer;
}
#pricing .dots button[aria-selected="true"]{ background:#1b2f26; width:22px; }

/* Stylischer Hinweis-Chip unter der Preistafel */
#pricing .pricing-foot{
  position: relative;
  display: flex;
  align-items: center;
  gap: .55rem;
  width: fit-content;                 
  margin: 1rem auto 0;                
  padding: .55rem .85rem;
  color: var(--p2-muted);
  font-weight: 600;
  line-height: 1.35;
}

/* kleines Info-Icon vorneweg (SVG als Maske) */
#pricing .pricing-foot::before{
  content:"";
  width: 18px; height: 18px; flex: 0 0 18px;
  background: black;
  mask: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='16' x2='12' y2='12'/><line x1='12' y1='8' x2='12.01' y2='8'/></svg>") no-repeat center/contain;
  -webkit-mask: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='16' x2='12' y2='12'/><line x1='12' y1='8' x2='12.01' y2='8'/></svg>") no-repeat center/contain;
}


/* ========== 8) Partnership ========== */

#partners{ padding:4rem 2rem; 
background-color:#1b4d36; color:white;}
#partners .partners-wrap{ max-width:1200px; margin-inline:auto; padding-bottom:3rem; padding-top:2rem;}
#partners .partners-header{ text-align:center; margin-bottom:1.25rem; }
#partners .partners-header h2{color:orange;font-weight:600;margin-bottom:3rem;}
#partners .partners-header h3{ margin:0; font-weight:600;margin-bottom:1rem; text-decoration:underline;}

/* ---------- Hero-Kachel (exklusiv CSS) ---------- */
#partners .partner-hero{
  position:relative; isolation:isolate;
  border-radius:16px; overflow:hidden; cursor:pointer; outline:none;
  height: clamp(220px, 36vw, 320px);
  margin-bottom: 3rem;
  box-shadow: 0 12px 24px rgba(0,0,0,.10);
  background:#fff;
}
#partners .partner-hero .hero-front{
  position:absolute; inset:0; display:grid; place-items:center;
  filter:saturate(.95);
}
#partners .partner-hero .css-logo{
  transition: .25s ease;
}
#partners .partner-hero .partner-hero-back{
  position:absolute; left:0; right:0; bottom:0; height: 48%;
  transform: translateY(100%); transition: transform .28s ease;
  background:#0f1512; color:#fff; box-shadow: 0 -14px 28px rgba(0,0,0,.18);
}
#partners .partner-hero .partner-hero-content{ padding:16px 18px; }
#partners .partner-hero h3{ margin:.1rem 0 .2rem; font-weight:900; }
#partners .partner-hero .hero-sub{ margin:0 0 .4rem; opacity:.9; }
#partners .partner-hero .tags{
  margin:.1rem 0 .4rem; padding:0; list-style:none;
  display:flex; flex-wrap:wrap; gap:.4rem;
}
#partners .partner-hero .tags li{
  font-size:.85rem; font-weight:700; line-height:1;
  color:#0f1512; background:#f1d98a; border-radius:999px; padding:.32rem .6rem;
}

#partners .partner-hero:hover .css-logo,
#partners .partner-hero:focus-visible .css-logo{ transform: translateY(-4px); filter:grayscale(0) contrast(1); }
#partners .partner-hero:hover .partner-hero-back,
#partners .partner-hero:focus-within .partner-hero-back{ transform: translateY(0); }

/* ===== CSS-AG Hero: 3 Produkt-Kacheln ===== */
#partners .partner-hero.partner-css .partner-hero-back{
  height: 78%;                     
}

/* Produktliste im Hero (3 Spalten, responsive) */
#partners .partner-hero .product-list{
  margin:.4rem 0 0; padding:0; list-style:none;
  display:grid; gap:24px;
  grid-template-columns: repeat(3, 1fr);
}


/* einzelne Produkt-Kachel */
#partners .partner-hero .product-item{
  position: relative;
  height:120px;
  margin-top:1rem;
  display: grid;
  grid-template-columns: auto 1fr auto; /* Logo | Text | Pfeil */
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  text-decoration: none;      
  color: inherit;             
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    border-color .18s ease;
}
#partners .partner-hero .product-item:link,
#partners .partner-hero .product-item:visited{
  color: inherit; text-decoration: none;
}

/* sanfter „Sheen“ über der Karte */
#partners .partner-hero .product-item::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
  opacity: 0; transition: opacity .2s ease;
}

/* Chevron ganz rechts, fährt leicht rein */
#partners .partner-hero .product-item::after{
  content:"";
  width: 18px; height: 18px;
  justify-self: end;
  background: no-repeat center/contain
    url("data:image/svg+xml;utf8,\
      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18l6-6-6-6'/></svg>");
  opacity: .55;
  transform: translateX(-6px);
  transition: opacity .2s ease, transform .2s ease;
}


/* Hover/Focus: leichte Erhöhung + hellerer Hintergrund + klarer Fokus */
#partners .partner-hero .product-item:hover,
#partners .partner-hero .product-item:focus-visible{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.32);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  outline: none;
}
#partners .partner-hero .product-item:hover::before,
#partners .partner-hero .product-item:focus-visible::before{ opacity: .9; box-shadow: -3px 0 0 0 #f1d98a inset;}
#partners .partner-hero .product-item:hover::after,
#partners .partner-hero .product-item:focus-visible::after{
  opacity: .95; transform: translateX(0);
}


#partners .partner-hero .prod-logo{
  width:64px; height:auto; display:block; 
  transition: transform .18s ease;
  border-radius:12px;
}
#partners .partner-hero .product-item:hover .prod-logo,
#partners .partner-hero .product-item:focus-visible .prod-logo{ transform: scale(1.06); }

#partners .partner-hero .product-item .prod-text strong{ color:#fff; }
#partners .partner-hero .product-item .prod-text span{ color: rgba(255,255,255,.85); }

/* Tap/active-State */
#partners .partner-hero .product-item:active{
  transform: translateY(-1px) scale(.99);
}

/* weniger Bewegung, wenn gewünscht */
@media (prefers-reduced-motion: reduce){
  #partners .partner-hero .product-item,
  #partners .partner-hero .product-item::after,
  #partners .partner-hero .product-item .prod-logo{
    transition: none !important;
  }
}


/* ---------- Grid mit 6 Kacheln ---------- */
#partners .partners-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(220px,1fr));
  gap: clamp(14px, 2.4vw, 24px);
}


/* ---------- Partner-Karte (Klein) ---------- */
#partners .partner-card{
  position:relative; isolation:isolate; border-radius:14px; background:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,.08); height:140px; cursor:pointer;
  overflow:hidden; outline:none; display:grid; place-items:center;
  transition: box-shadow .2s ease;
}
#partners .partner-card:focus-visible{ box-shadow:0 0 0 3px #0f1512, 0 8px 20px rgba(0,0,0,.08); }
#partners .partner-card .card-front{ display:grid; place-items:center; padding:18px; }
#partners .partner-card .card-front img{
  max-width:68%; height:auto; display:block;  transition:.25s ease;
}
#partners .partner-card .card-back{
  position:absolute; inset:auto 0 0 0; height:75%;
  transform:translateY(100%); background:#0f1512; color:#fff;
  transition: transform .28s ease; box-shadow:0 -12px 24px rgba(0,0,0,.16);
}
#partners .partner-card .back-content{
  padding:14px 16px; display:grid; gap:.35rem;
}
#partners .partner-card .back-content h3{ margin:0 0 .1rem; font-size:1rem; font-weight:800; }
#partners .partner-card .tags{
  margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:.35rem;
}
#partners .partner-card .tags li{
  font-size:.8rem; font-weight:700; line-height:1;
  color:#0f1512; background:#f1d98a; border-radius:999px; padding:.28rem .5rem;
}


/*Verlinkung auf Software-Integrationen*/

#partners .partner-card .verlinkung-chip{
  justify-self:left; display:inline-flex; align-items:center; gap:.4rem;
  font-weight:700; font-size:.85rem; text-decoration:none; color:#fff;
  padding:.38rem .6rem; border:1px solid rgba(255,255,255,.35); border-radius:10px;
}

/* sanfter „Sheen“ über der Karte */
#partners .partner-card .verlinkung-chip::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
  opacity: 0; transition: opacity .2s ease;
}

/* Chevron ganz rechts, fährt leicht rein */
#partners .partner-card .verlinkung-chip::after{
  content:"";
  width: 14px; height: 14px;
  justify-self: end;
  background: no-repeat center/contain
    url("data:image/svg+xml;utf8,\
      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18l6-6-6-6'/></svg>");
  opacity: .55;
  transform: translateX(-6px);
  transition: opacity .2s ease, transform .2s ease;
}


/* Hover/Focus: leichte Erhöhung + hellerer Hintergrund + klarer Fokus */
#partners .partner-card .verlinkung-chip:hover,
#partners .partner-card .verlinkung-chip:focus-visible{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.32);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  outline: none;
}
#partners .partner-card .verlinkung-chip:hover::before,
#partners .partner-card .verlinkung-chip:focus-visible::before{ opacity: .9; box-shadow: -3px 0 0 0 #f1d98a inset;}
#partners .partner-card .verlinkung-chip:hover::after,
#partners .partner-card .verlinkung-chip:focus-visible::after{
  opacity: .95; transform: translateX(0);
}

/*Verlinkung-Ende*/


#partners .partner-card:hover .card-front img,
#partners .partner-card:focus-visible .card-front img{
  transform: translateY(-4px); filter:grayscale(0) contrast(1);
}
#partners .partner-card:hover .card-back,
#partners .partner-card:focus-within .card-back{
  transform: translateY(0);
}

/* ---------- Optional: „tap to open“ Klasse für Mobile ---------- */
#partners .partner-hero.is-open .hero-back{ transform: translateY(0); }
#partners .partner-card.is-open .card-back{ transform: translateY(0); }





/* ========== 9) Follow-up (Timeline) – Cleaned ========== */
:root{
  --fu-max: 1920px;
  --fu-ink: #0f1512;
  --fu-muted: #2a2d29;
  --fu-line: grey;
  --fu-brand:#1b4d36;
  --fu-shadow: 0 10px 24px rgba(0,0,0,.12);
    --fu-dot-size: 6px;                    /* Punktdurchmesser */
  --fu-dot-gap: 14px;                    /* Abstand */
  --fu-dot: rgba(0,0,0,.35);             /* Punktfarbe */
  --fu-rail-fade: linear-gradient(       /* zarte „Schiene“ darunter */
      to right, transparent, rgba(0,0,0,.08) 15%, rgba(0,0,0,.08) 85%, transparent );
}

#followup{
  position:relative;
  color:var(--fu-ink);
  padding-block: 6.5rem 5rem;
  background-image:
    linear-gradient(to right, rgba(0,0,0,.10) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 78%, rgba(0,0,0,.10) 100%),
    linear-gradient(#d8d7e0 0%, #dee0dc 20%, #e6e9e3 40%, #edf2ec 65%, #f4f8f4 100%);
}
#followup .followup-wrap{ max-width:var(--fu-max); margin-inline:auto; }

/* Header */
#followup .header-card{ max-width:860px; margin:0 auto 1.25rem; }
#followup .header-card .sublead{ color:var(--fu-muted); }

/* Rotator */

#followup .rotator{
  font-weight:600;
  -webkit-background-clip:text; background-clip:text;
  color: orange;
  font-size:1.05em;
  text-decoration:blink  orange;

}



@keyframes rotOut { from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(-10px)} }
@keyframes rotIn  { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
#followup .rotator.is-out{ animation:rotOut .35s ease both; }
#followup .rotator.is-in{  animation:rotIn  .45s ease both;}





/* ---------- Grid: Label (1) | Mittelbereich (2) | Card (1) ---------- */
#followup .followup-steps{
	counter-reset: fu-step;
	justify-self:center;
  position:relative;
  max-width: 1420px; margin-inline:auto;
  margin:1.75rem 0 2.25rem;
  padding:0; list-style:none;
  display:grid;
  /* 1 : 2 : 1 – mit Mindestbreiten für Stabilität */
  grid-template-columns: minmax(400px,1fr) minmax(460px,2fr) minmax(400px,1fr);
  column-gap: clamp(12px, 2vw, 24px);

  /* zentrale Größen-Parameter */
  --pin: 96px;
  --conn-dot: 12px;
  --conn-gap: 12px;

  row-gap: clamp(28px, 2vw, 54px);
}

/* vertikale Timeline  */
#followup .followup-steps::before{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:50%; transform:translateX(-50%);
  width:6px; border-radius:999px;
   background:
    radial-gradient(circle, var(--fu-dot) 60%, transparent 61%)
      50% 0 / var(--fu-dot-size) calc(var(--fu-dot-size) + var(--fu-dot-gap)) repeat-y;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  z-index:0;
}

/* Step nutzt Subgrid; horizontale Hilfslinie dezent */
#followup .step{
  counter-increment: fu-step;
  display:grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items:center;
  position: relative;
  z-index: 0;
}
#followup .step::before{
  content:"";
  position:absolute; left:0; right:0; top:50%;
  transform: translateY(-50%);
  height:1px;
  background: linear-gradient(
    90deg,
    transparent 0,
    rgba(0,0,0,.10) 12%,
    rgba(0,0,0,.10) 88%,
    transparent 100%
  );
  z-index: 0;
}

/* NEU: dotted layer über der Rail – links & rechts vom Pin */

#followup .step::after{
  content:"";
  position:absolute; left:0; right:0; top:50%;
  transform: translateY(-50%);
  height:1px;                       /* Hairline */
  padding-inline: calc(var(--pin)/2 + var(--conn-gap));  
  background-clip: content-box;
  border-radius: 1px;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(27,77,54,.40) 14%,        
      rgba(27,77,54,.55) 50%,        
      rgba(27,77,54,.40) 86%,
      transparent 100%);
  box-shadow: 0 0 0 1px rgba(27,77,54,.05); 
  z-index: 1;   
}


/* Label/Pin/Card liegen darüber */
#followup .step-label,
#followup .step-pin,
#followup .step-card{ position:relative; z-index:2; }

/* Label links */
#followup .step-label{
	position: relative;
  padding-left: 52px;          
  color: var(--fu-brand);
  letter-spacing:.02em;
  margin:0; padding-right:6px;
  font-weight:600;  text-transform:uppercase;
}

/* Runder Nummern-Badge */
#followup .step-label::before{
  content: counter(fu-step);
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  display: grid; place-items: center;
  font: 800 0.95rem/1 system-ui, sans-serif;
  color: #fff;
  background: var(--fu-brand);
  border-radius: 50%;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}

/* Pin exakt mittig (keine Offsets) */
#followup .step-pin{
  grid-column:2;
  justify-self:center;
  width:var(--pin); height:var(--pin);
  border-radius:50%;
  background:var(--fu-brand);
  display:grid; place-items:center;
  box-shadow:0 10px 22px rgba(0,0,0,.12);
  position:relative; z-index:2;
}
#followup .step-pin i{ color:#fff; font-size: calc(var(--pin) * .35); }



/* Card rechts */
#followup .step-card{
  grid-column:3;
  background:#fff;
  border:1px solid rgba(0,0,0,.16);
  border-radius:14px;
  padding: clamp(20px, 2.4vw, 26px);
  box-shadow:var(--fu-shadow);
  margin-left: clamp(24px, 3.2vw, 36px);
  width:420px; max-width:100%;
  opacity:0; transform:translateY(16px);
  transition:opacity .45s ease, transform .45s ease;
}
#followup .step-card::before{
  content:"";
  position:absolute; left:-12px; top:24px;
  width:16px; height:16px; background:#fff;
  border-left:1px solid rgba(0,0,0,.16);
  border-top:1px solid rgba(0,0,0,.16);
  transform:rotate(-45deg);
  box-shadow:-6px -6px 16px rgba(0,0,0,.04);
}
#followup .step-card p{ margin:0; color:var(--fu-muted); }
#followup .step-card.is-visible{ opacity:1; transform:none; }
#followup .step-card .bullets{
	margin-top:0.5rem;
}

/* Follow-up Aside: Layout & CTA */
.followup-cta{
  display:grid;
  justify-items:center;
  text-align:center;
  gap:.5rem;
}

/* CTA Pfeil */
#followup aside{ justify-self:center; text-align:center; font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:black; font-size: 1.2rem; margin-bottom:-5rem; }

#followup .followup-jump{
  --size:72px;
  display:grid; place-items:center;
  width:var(--size); height:var(--size);
  margin-bottom:3.5rem; margin-top:-2rem;
  border-radius:50%;
  background:orange; border:2px solid rgba(0,0,0,.16);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  text-decoration:none;
  position: relative; isolation:isolate;
  transition: transform .2s ease, box-shadow .2s ease;
  justify-self:center;
}
#followup .followup-jump svg{
  width:64px; height:64px; fill:#0f1512;
  transform: translateY(-2px);
  transition: transform .25s ease;
  padding-top:1rem;
}
#followup .followup-jump:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0,0,0,.16); }
#followup .followup-jump:hover svg{ transform: translateY(0); }
#followup .followup-jump::after{
  content:""; position:absolute; inset:-10px; border-radius:50%;
  border:4px solid orange; opacity:0; pointer-events:none;
  animation: jumpPulse 2.2s ease-out infinite;
}
@keyframes jumpPulse{
  0%{ transform: scale(.9); opacity:.75; }
  70%,100%{ transform: scale(1.15); opacity:0; }
}

/* Termin-Button nutzt goldenen Stil, aber sauber eingebettet */
#followup .btn-appointment{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  width: min(340px, 100%);                          
  text-decoration:none;
  margin-bottom:1rem;
  border:1px;
}


/* ========== 10) Contact ========== */
#contact{
  position:relative; padding:0rem 2rem; color:#000;
  background-image:
    linear-gradient(to right, rgba(0,0,0,.10) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 78%, rgba(0,0,0,.10) 100%),
    linear-gradient(#f4f8f4 0%, #edf2ec 20%, #e6e9e3 40%, #dee0dc 65%, #d8d7e0 100%);
padding-bottom:3rem;
padding-top:3rem;
}

/*#contact::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--section-topline); z-index:1; }

/* Schlankere Breite + schmalere Spalten */
#contact .content-wrap{
  max-width: 1720px;              
  margin: 0 auto;
}


/* Layout: 3 Spalten – Form | Divider(1px) | Aside */
#contact .contact-layout{
  display:grid;
  grid-template-columns: minmax(560px, 1fr) minmax(420px, .9fr);
  grid-template-areas:
    "header header"
    "form   aside";
  gap: 28px;
  align-items: start;
  justify-content: center;                
}

#contact .contact-divider{
  grid-area: divider;
  align-self: stretch;
  width: 2px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,.25) 8%,
    rgba(0,0,0,.30) 14%,
    rgba(0,0,0,.35) 78%,
    transparent 100%
  );
  border-radius: .5px;
  opacity: .85; 
}

/* Areas zuweisen */
#contact .contact-header{ grid-area:header; }
#contact .contact-card  { grid-area:form; padding: clamp(1rem, 2.2vw, 1.6rem); }
#contact .contact-people{ grid-area:aside;  }

/* ----- Header-Styling */
/* Header über beide Spalten */
#contact .contact-header{
  grid-area: header;
  margin: 0;
  padding-bottom:.25rem;
  display:grid; gap:.35rem;
}
#contact .contact-header h2{ margin:0; font-weight:800; font-size:clamp(1.6rem,2.4vw,2rem); }
#contact .contact-header p{ margin:0; opacity:.85; }

/* ----- Formular-Karte */
#contact .contact-card{
  --bg:#fff; --fg:#0f1512; --radius:16px;
  padding: clamp(1.2rem,3vw,2rem);
  background: radial-gradient(120% 120% at 0% 0%, rgba(27,77,54,.06), transparent 46%), var(--bg);
  color: var(--fg);
  border: 1px solid rgba(15,21,18,.08);
  border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(0,0,0,.16), 0 3px 10px rgba(0,0,0,.06);
}
#contact .contact-title{ margin:0 0 .2rem; font-weight:800; font-size: clamp(1.25rem,2.1vw,1.6rem); }
#contact .contact-sub{ margin:0 0 1rem; opacity:.8; }

/* Formular-Grid (2-spaltig) */
#contact .grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; }
#contact .field{ display:flex; flex-direction:column; gap:6px; }
#contact .field.full{ grid-column:1 / -1; }

/* Eingabefelder */
#contact .field label{ font-weight:600; font-size:.95rem; }
#contact .field input, #contact .field textarea{
  border:1.5px solid rgba(15,21,18,.18);
  border-radius:12px; padding:.9rem .95rem; background:#fff; color:#0f1512;
  transition:border-color .18s ease, box-shadow .18s ease;
}
#contact .field textarea{ resize:vertical; min-height:140px; }
#contact .field input:focus, #contact .field textarea:focus{
  outline:0; border-color:var(--brand); box-shadow:0 0 0 4px rgba(27,77,54,.12);
}

/* Autofill */
#contact .field input:-webkit-autofill,
#contact .field textarea:-webkit-autofill{
  box-shadow:0 0 0 1000px #fff inset !important; -webkit-text-fill-color:#0f1512;
}

/* Fehlerzustände */
#contact .error{ min-height:1.05em; color:#c0392b; font-size:.85rem; margin-top:.15rem; }
#contact .is-invalid{ border-color:#c0392b !important; box-shadow:0 0 0 4px rgba(192,57,43,.12) !important; }

/* Consent-Zeile */
#contact .field.consent{
  display:grid; grid-template-columns:auto 1fr; align-items:start; gap:10px;
}
#contact .field.consent input{ width:18px; height:18px; margin-top:.35rem; }

/* Submit-Button */
#contact .btn-submit{
  margin-top:10px; display:inline-flex; align-items:center; justify-content:center;
  padding:.9rem 1.4rem; border-radius:12px; border:0; cursor:pointer;
  font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:#000;
  background:linear-gradient(135deg, var(--brand-2), #eebc1d);
  box-shadow:0 6px 16px rgba(27,77,54,.18);
  transition:transform .18s ease, box-shadow .18s ease;
}
#contact .btn-submit:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(27,77,54,.25); }
#contact .btn-submit[disabled]{ opacity:.6; cursor:not-allowed; box-shadow:none; transform:none; }
#contact .form-status{ margin-top:.75rem; font-weight:600; }
.btn-submit.is-loading{ pointer-events:none; }
.btn-submit.is-loading::after{
  content:""; margin-left:.6rem; width:1em; height:1em;
  border:.18em solid rgba(0,0,0,.25); border-top-color:rgba(0,0,0,.7);
  border-radius:50%; display:inline-block; animation:spin 1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Honeypot */
#contact .hp-field{ position:absolute !important; left:-9999px !important; opacity:0 !important; }

/* ----- Ansprechpartner (rechte Spalte) */
#contact .contact-people{
  grid-area: aside;
  position: relative;                      
  justify-self: center;                    
  width:100%; max-width: 520px;            
}

#contact .contact-people::before{
  content:"";
  position:absolute;
  left:-20px; top:0; bottom:0; width:1px;
  background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.25) 8%, rgba(0,0,0,.30) 14%, rgba(0,0,0,.35) 78%, transparent 100%);
  pointer-events:none;
}

#contact .contact-people-title{ margin:0 0 .25rem; font-weight:800; font-size:clamp(1.1rem,2vw,1.4rem); }
#contact .contact-people-sub{ margin:0 0 1rem; opacity:.8; }

/* --- Figure Cards for contacts --- */
#contact .people-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 2vw, 18px);
  margin-top: 1.5rem;
}


/* Basiskarte */
.contact-mini{
  --avatar: 120px;                 
  display: grid;
  grid-template-columns: var(--avatar) 1fr;
  align-items: center;
  gap: clamp(14px, 2vw, 18px);
  padding: clamp(14px, 2vw, 18px);
  border-radius: var(--card-radius, 14px);
  background: #fff;
  border: 1px solid var(--card-border, rgba(15,21,18,.08));
  box-shadow: var(--card-shadow-1, 0 10px 24px rgba(0,0,0,.12)),
              var(--card-shadow-2, 0 2px 8px rgba(0,0,0,.06));
  margin: 0; /* reset figure default */
  margin-bottom: 0.5rem;
}

.contact-mini .avatar{
  width: var(--avatar);
  height: var(--avatar);
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Textbereich */
.contact-mini figcaption{ display: grid; gap: .45rem; }
.contact-mini h4{ margin: 0; font-weight: 800; letter-spacing: .01em; }
.contact-mini .role{ margin: 0; opacity: .8; font-weight: 600; }

/* Actions */
.contact-mini .actions{
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: .25rem;
}
.contact-mini .chip{
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .6rem;
  border-radius: 999px;
  font-weight: 700; font-size: .88rem;
  text-decoration: none; color: #0f1512;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.contact-mini .chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,.18);
}

/* Hover-Effekt Gesamtkarten */
.contact-mini:hover{ box-shadow: 0 14px 28px rgba(0,0,0,.14), 0 4px 10px rgba(0,0,0,.08); }

.contact-mini img:hover{
	transform: scale(1.05);
}



/* ---------- Footer ---------- */

/* Footer helpers */
#footer{ padding:1rem 0; position:relative;}

#footer::before{
  content:"";
  position:absolute;
  left:0; right:0; top:12px;      
  height:2px;
  background: rgba(255,255,255,.35);
  pointer-events:none;
  z-index:1;
}



/* ======= Footer-Grid ========== */
#footer .footer-grid{
  justify-self:center;
  position:relative;
  max-width: 1920px; margin-inline:auto;
  margin:1.75rem 0 2.25rem;
  padding:0; list-style:none;
  display:grid;
  grid-template-columns: minmax(360px,0.75fr) minmax(560px,1.25fr) minmax(560px,1fr);
  column-gap: clamp(12px, 2vw, 24px);
}

/* Robby: dekorativ, stört das Grid nicht */
#footer .robby{
    width: clamp(240px, 22vw, 420px);
  margin:0; z-index:0; pointer-events:none; opacity:.95;
}
#footer .robby img{
  display:block; width:100%; height:auto;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.35));
  border-radius: 12px;
}


/* ===== About-Block (INSTART group) ===== */
#footer .footer-about{
  max-width: 540px;
  justify-self:center;
  text-align:center;
  align-items:center;
  margin-top:3rem;
  
}
#footer .footer-about h4{margin:.25rem 0 .35rem; font-size:1.25rem; font-weight:600;color:orange}
#footer .footer-about p{ margin-top:1.5rem; line-height:1.55; }



/* ================ Logos ==================== */

#footer .footer-companies{
	justify-self:center;
  display:grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 36px;
  align-items:center;
  justify-items:center;
  margin-top:5rem;
  max-width: 560px;
}
#footer .company-figure{ width:140px; margin:0; }
#footer .company-figure img{ display:block; width:100%; height:auto; }


#footer .company-figure img:hover{
  transform: scale(1.05);
}



/* === Karte rechts, mit Abstand vom Rand === */
#footer .footer-map{
  position: relative;
  justify-self: end;                 
  margin-right: var(--map-gutter);   
  max-width: min(560px, 46vw);
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25) inset;
}

/* Bild selbst – natürliches Seitenverhältnis */
#footer .footer-map > img{
  display:block;
  width: 100%;
  height: auto;           
  object-fit: contain;
  filter:saturate(.9) contrast(1.05) brightness(.95);
}

/* weicher Kontrastverlauf */
#footer .footer-map::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.10), transparent 40%),
    radial-gradient(120% 110% at 10% 10%, rgba(0,0,0,.08), transparent 45%),
    radial-gradient(120% 110% at 90% 10%, rgba(0,0,0,.08), transparent 45%);
  pointer-events:none;
}


/* ===== Marker/Pin + Info-Karten ===== */

/* Marker-Container positioniert Pin + Karte über CSS-Variablen */
#footer .map-marker{
  position:absolute;
  left:var(--x); top:var(--y);
  transform:translate(-50%,-50%);
}

/* Klickbarer Pin (mit Label) */
#footer .map-pin{
  --size:14px;
  display:flex; align-items:center; gap:.55rem;
  background:transparent; border:0; cursor:pointer;
  color:#fff; padding:0; position:relative;
}

/* Punkt + Puls */
#footer .map-pin::before{
  content:""; width:var(--size); height:var(--size);
  border-radius:50%; background:#FFD700;
  box-shadow:0 0 0 3px rgba(255,215,0,.35);
  position:relative; z-index:1;
}
#footer .map-pin::after{
  content:""; position:absolute; inset:calc(var(--size) * -1.2);
  border-radius:50%; border:2px solid rgba(255,215,0,.35);
  animation:pinPulse 2.2s ease-out infinite;
}
@keyframes pinPulse{
  0%{ transform:scale(.6); opacity:.9; }
  70%,100%{ transform:scale(1.3); opacity:0; }
}

/* Label neben dem Punkt */
#footer .map-pin > span{
  font-weight:700;
  font-size:clamp(.85rem,.9vw,.95rem);
  background:rgba(0,0,0,.45);
  padding:.25rem .55rem;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(2px);
  line-height:1; white-space:nowrap; transform:translateY(-2px);
}

/* Hover/Focus */
#footer .map-pin:hover::before,
#footer .map-pin:focus-visible::before{
  box-shadow:0 0 0 5px rgba(255,215,0,.45);
}
#footer .map-pin:hover > span,
#footer .map-pin:focus-visible > span{
  background:rgba(0,0,0,.6);
}

/* Info-Karte (Popover) */
#footer .pin-card{
  position:absolute;
  min-width:240px; max-width:320px;
  background:#fff; color:#0f1512;
  border-radius:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.15);
  padding:.85rem .95rem;
  transform-origin:bottom center;
  opacity:0; pointer-events:none;
  transform:translate(-50%, calc(-100% - 16px)) scale(.96);
  transition:.18s ease; z-index:5;
}


/* Ausrichtung je Position (Kante vermeiden) */
#footer .map-marker[data-side="right"] .pin-card{
  left:auto; top:0; transform:translate(12px, -50%) scale(.96);
}
#footer .map-marker[data-side="right"] .pin-card::after{
  left:-7px; bottom:auto; top:50%; transform:translateY(-50%) rotate(45deg);
}
#footer .map-marker[data-side="top"] .pin-card{
  transform:translate(-50%, calc(-100% - 16px)) scale(.96);
}
#footer .map-marker[data-side="top-left"] .pin-card{
  transform:translate(-65%, calc(-100% - 16px)) scale(.96);
}

/* Sichtbar-Zustand (per JS oder :hover/:focus-within) */
#footer .pin-card.is-open{
  opacity:1; pointer-events:auto;
  transform:translate(var(--tx, -50%), var(--ty, calc(-100% - 16px))) scale(1);
}
#footer .map-marker[data-side="right"] .pin-card.is-open{ --tx:12px; --ty:-50%; }
#footer .map-marker[data-side="top"] .pin-card.is-open{ --tx:-50%; --ty:calc(-100% - 16px); }
#footer .map-marker[data-side="top-left"] .pin-card.is-open{ --tx:-65%; --ty:calc(-100% - 16px); }

/* Typo/Buttons in der Karte */
#footer .pin-card h5{ margin:.1rem 0 .35rem; font-size:1rem; font-weight:800; }
#footer .pin-card p{ margin:.25rem 0; font-size:.92rem; }
#footer .pin-card .pin-links{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.5rem; }
#footer .pin-btn{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem .6rem; border-radius:10px; font-weight:700; font-size:.9rem;
  text-decoration:none; color:#0f1512;
  background:#f4f4f4; border:1px solid #e6e6e6;
}
#footer .pin-btn:hover{ background:#f0f0f0; }

/* Hover-Preview auf Desktop */
@media (hover:hover){
  #footer .map-marker:hover .pin-card,
  #footer .map-marker:focus-within .pin-card{
    opacity:1; pointer-events:auto;
    transform:translate(var(--tx, -50%), var(--ty, calc(-100% - 16px))) scale(1);
  }
}


/* ---------- Footer: Legal row (Links + Social) ---------- */

/* Zeile horizontal, zentriert, kompakt */
#footer .footer-legal{
 display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  column-gap:24px;
  padding: 10px 12px;
  position:relative;
}

#footer .footer-legal::before{
  content:"";
  position:absolute;
  left:0; right:0; top:-5px;      
  height:2px;                     
  background: rgba(255,255,255,.35);
}


/*für Copyright und Coded by */
 #footer .footer-legal p{
 line-height: 1;          
 font-weight: 600;
 margin:0rem 18rem;
}


/* Mitte: Links + Social nebeneinander */
#footer .footer-center{
  justify-self:center;
  display:flex;
  align-items:center;
  gap:16px;                     
}

/* Link-Gruppe (Impressum | Datenschutz) */
#footer .footer-legal .footer-links{
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Alle direkten Kinder (Links + Trenner) vertikal mittig ausrichten */
#footer .footer-legal .footer-links > *{
  display: inline-flex;               
  align-items: center;               
  line-height: 1;                     
}

/* Optional: angenehme Klickhöhe, ohne optisch größer zu wirken */
#footer .footer-legal .footer-links a{
  padding: 2px 0;                    
}


/* Links – weiß, uppercase, dezenter Hover */
#footer .footer-legal a.footer-link:link,
#footer .footer-legal a.footer-link:visited{
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1;     
  transition: color .2s ease;
}
#footer .footer-legal a.footer-link:hover,
#footer .footer-legal a.footer-link:focus-visible{
  color: #f1d98a;
  text-decoration: underline;
  outline: none;
}

/* Social-Icons in einer Reihe */
#footer .footer-legal .social-links{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;          
  margin: 0;
  line-height: 1;
}


#footer .footer-legal .social-links .nav-link{
  display: flex;
  align-items: center;
  gap: 16px;
  line-height: 1;
}

/* Icons – kompakter, mit sanftem Hover */
#footer .footer-legal .social-links i{
  font-size: 1.25rem;        
  transform: translateZ(0);  
  transition: transform .15s ease;
}
#footer .footer-legal .social-links i:hover,
#footer .footer-legal .social-links i:focus-visible{
  transform: scale(1.12);
  outline: none;
}