/* ==============================
   Branchen – CLEAN & UNIFIED CSS
   ============================== */

/* Colors */
:root{
  --navy:#081b35; --navy-2:#0e2b52; --blue:#1680e0; --gold:#ffc107;
  --brand-red:#b30000;
}

/* safe space under sticky header */
main{ padding-top:6px; }

/* ================= Hero (lede/page-hero) ================ */
.lede-wrap, .page-hero{ max-width:900px; margin:32px auto 0; padding:0 16px; }
.lede-wrap h1, .page-hero h1{
  margin:12px auto 10px; text-align:center; color:var(--blue);
  font-weight:800; line-height:1.22; max-width:26ch;
  font-size:clamp(1.35rem,4.2vw,2.1rem);
  text-wrap:balance; -webkit-hyphens:auto; hyphens:auto; overflow-wrap:anywhere;
}
.lede-wrap p, .page-hero .intro{
  color:#222; text-align:center; max-width:66ch; margin:0 auto 14px;
  font-size:clamp(.96rem,2.7vw,1.05rem); line-height:1.65;
}

/* ================= Intro Cards ================= */
.intro-cards{
  display:flex; flex-wrap:wrap; justify-content:center; gap:28px;
  max-width:1120px; margin:42px auto 32px; padding:0 16px;
}
.intro-card{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  border:2px solid #b4dcff; border-radius:18px; background:#fff;
  box-shadow:0 6px 20px rgba(8,27,53,.08);
  min-width:290px; max-width:360px; min-height:360px; overflow:hidden;
  transition:transform .18s, box-shadow .18s, border-color .18s;
  opacity:0; transform:translateY(20px); animation:cardFadeUp .7s ease forwards;
}
.intro-card:hover{
  transform:translateY(-4px) scale(1.01);
  border-color:var(--blue);
  box-shadow:0 14px 34px rgba(22,128,224,.22);
}
.intro-card img{
  width:100%; height:180px; object-fit:cover; display:block;
  border-radius:16px 16px 0 0;
}

/* card body: title | text | arrow */
.card-text{
  display:grid; grid-template-rows:auto 1fr auto; gap:10px;
  padding:18px 16px 16px; min-height:160px;
}
.card-text h2, .card-text h3{
  margin:0 0 8px; text-align:center; color:var(--brand-red); font-weight:800;
  font-size:clamp(1.02rem,2.6vw,1.18rem);
}
.card-text p{
  margin:0; color:#111; text-align:center; line-height:1.6;
  text-wrap:balance; -webkit-hyphens:auto; hyphens:auto; overflow-wrap:anywhere;
}
.card-text .icon{
  justify-self:end; align-self:end; font-weight:900; font-size:1.15rem; color:var(--blue);
}

.card-text .card-cta{
  justify-self: center;
  align-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: linear-gradient(180deg,#1990ff 0%,#1680e0 60%,#0e6cc3 100%);
  color: #fff;
  font-weight: 800;
  font-size: .88rem;
  letter-spacing: .01em;
  box-shadow: 0 8px 20px rgba(22,128,224,.24);
}

/* stagger (use .delay-1 … .delay-10) */
.intro-card.delay-1{animation-delay:.15s;}
.intro-card.delay-2{animation-delay:.3s;}
.intro-card.delay-3{animation-delay:.45s;}
.intro-card.delay-4{animation-delay:.6s;}
.intro-card.delay-5{animation-delay:.75s;}
.intro-card.delay-6{animation-delay:.9s;}
.intro-card.delay-7{animation-delay:1.05s;}
.intro-card.delay-8{animation-delay:1.2s;}
.intro-card.delay-9{animation-delay:1.35s;}
.intro-card.delay-10{animation-delay:1.5s;}

@keyframes cardFadeUp{
  from{opacity:0; transform:translateY(20px);}
  to{opacity:1; transform:translateY(0);}
}

/* ================= FAQ ================= */
.faq-section{
  max-width:820px; margin:40px auto 28px; background:#fff; border-radius:17px;
  box-shadow:0 2px 10px #b4dcff22; padding:28px 22px 20px;
}
.faq-section h2{
  text-align:center; color:var(--brand-red); font-weight:800; margin:0 0 16px;
  font-size:clamp(1.05rem,4vw,1.28rem); line-height:1.25;
}
.faq-section h3{
  color:var(--blue); font-weight:700; margin:18px 0 6px;
  font-size:clamp(1rem,3.4vw,1.08rem);
}
.faq-section p{
  margin:0 0 8px; color:#222; line-height:1.65;
  font-size:clamp(.96rem,3.2vw,1.02rem);
}

/* ================= Weiterführende Inhalte (chips) ================= */
.more-links{
  background:#f9fbff; border:1px solid #cce6ff; border-radius:16px;
  box-shadow:0 4px 18px rgba(8,27,53,.05); padding:24px 18px;
  max-width:1000px; margin:24px auto 36px; text-align:center;
}
.more-links h2{ color:var(--brand-red); margin:0 0 18px; font-size:1.28rem; }
.more-links ul{
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px 16px;
  list-style:none; padding:0; margin:0;
}
.more-links li{ list-style:none; }
.more-links a,
.more-links a:link,
.more-links a:visited{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; min-height:42px; border-radius:9999px; font-weight:800; line-height:1.2;
  background:var(--navy); color:var(--gold); border:1px solid rgba(255,193,7,.42);
  text-decoration:none; white-space:normal; text-wrap:balance;
  box-shadow:0 6px 20px rgba(8,27,53,.14), inset 0 -2px 0 rgba(255,255,255,.06);
  transition:background .16s, border-color .16s, transform .16s, box-shadow .16s;
}
.more-links a:hover, .more-links a:focus-visible{
  background:var(--navy-2); color:var(--gold); border-color:rgba(255,193,7,.7);
  transform:translateY(-1px); outline:none;
}

/* ===== CTA (global for Branchen pages) ===== */
.cta-wrap{
  display:flex; justify-content:center; align-items:center; gap:12px;
  margin:36px auto 22px; padding:0 16px;
}
.card-btn,
.card-btn:link,
.card-btn:visited{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:14px 22px; border-radius:9999px; border:none; font-weight:800;
  font-size:clamp(1rem, 1.1vw + .2rem, 1.08rem);
  letter-spacing:.2px; line-height:1.2; text-decoration:none; cursor:pointer;
  color:#fff;
  background:linear-gradient(180deg,#1990ff 0%,#1680e0 60%,#0e6cc3 100%);
  box-shadow:0 10px 28px rgba(22,128,224,.28), 0 2px 0 rgba(255,255,255,.12) inset;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.card-btn::after{
  content:"→"; font-weight:900; transform:translateX(0); transition:transform .18s ease;
}
.card-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 36px rgba(22,128,224,.35), 0 2px 0 rgba(255,255,255,.18) inset;
}
.card-btn:hover::after{ transform:translateX(3px); }
.card-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(22,128,224,.18), 0 12px 34px rgba(22,128,224,.38);
}
.card-btn:active{
  transform:translateY(0);
  box-shadow:0 8px 22px rgba(22,128,224,.25), 0 1px 0 rgba(255,255,255,.12) inset;
}

/* ================= Responsive ================= */

/* ≤900px */
@media (max-width:900px){
  .intro-cards{ flex-direction:column; align-items:center; gap:18px; }
  .intro-card{ max-width:94vw; min-height:340px; }
  .faq-section{ padding:20px 14px; margin:28px 16px; }

  /* Mobile-only: bigger card typography */
  .intro-card .card-text h2,
  .intro-card .card-text h3{
    font-size:clamp(1.15rem, 4.6vw, 1.35rem);
  }
  .intro-card .card-text p{
    font-size:clamp(1.02rem, 4.2vw, 1.12rem);
    line-height:1.7;
  }
  .intro-card .card-text .icon{ font-size:1.25rem; }
}

/* ≤700px */
@media (max-width:700px){
  .more-links{ padding:18px 12px; border-radius:14px; }
  .more-links a{ padding:9px 12px; min-height:40px; }

  /* H1 (both .page-hero & .lede-wrap) */
  .page-hero h1, .lede-wrap h1{
    font-size:clamp(1.65rem, 7.2vw, 2.1rem);
    line-height:1.25; text-align:center; word-break:break-word;
  }
  /* FAQ title & text */
  .faq-section h2{
    font-size:clamp(1.35rem, 6.4vw, 1.8rem); line-height:1.25; text-align:center;
  }
  .faq-section h3{ font-size:clamp(1.05rem, 4.8vw, 1.22rem); }
  .faq-section p{ font-size:clamp(1.02rem, 4.2vw, 1.12rem); line-height:1.7; }
}

/* CTA compact on very small screens */
@media (max-width:540px){
  .cta-wrap{ margin:28px auto 16px; }
  .card-btn{ padding:12px 18px; font-size:1rem; }
}
/* Full-width button on extra-narrow screens */
@media (max-width:380px){
  .card-btn{ width:100%; max-width:480px; }
}

/* ===== Tablet typography (701px–1024px) ===== */
@media (min-width:701px) and (max-width:1024px){
  .page-hero h1, .lede-wrap h1{
    font-size:clamp(1.9rem, 3.2vw, 2.35rem);
    line-height:1.25; text-align:center;
  }
  .faq-section h2{
    font-size:clamp(1.4rem, 2.4vw, 1.8rem); line-height:1.25; text-align:center;
  }
  .faq-section h3{ font-size:clamp(1.08rem, 2.0vw, 1.28rem); }
  .faq-section p{ font-size:clamp(1.02rem, 1.8vw, 1.12rem); line-height:1.7; }
  .card-text h2, .card-text h3{
    font-size:clamp(1.12rem, 2.2vw, 1.35rem);
  }
  .card-text p{
    font-size:clamp(1rem, 1.9vw, 1.12rem);
  }
}
/* ===== Info Box – Flat List Cards ===== */
.info-box{
  --bd:#d7e9ff;
  --bg:#ffffff;
  --bg2:#f6faff;

  max-width: 1000px;
  margin: 32px auto 40px;
  padding: 20px 18px;
  border: 1px solid var(--bd);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  box-shadow: 0 2px 10px rgba(8,27,53,.06);
}

.info-box__title{
  margin: 0 0 14px;
  text-align: left;
  color: var(--brand-red);
  font-weight: 800;
  font-size: clamp(1.06rem, 3.6vw, 1.24rem);
  line-height: 1.25;
}

/* list resets */
.info-links{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* row card */
.info-links li{
  margin: 0; padding: 0;
}

.info-links a,
.info-links a:link,
.info-links a:visited{
  display: grid;
  grid-template-columns: 1fr auto;   /* text | arrow */
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid #e3efff;
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
  color: var(--navy);
  font-weight: 700;
  line-height: 1.25;
  box-shadow: 0 1px 0 rgba(8,27,53,.04);
  position: relative;
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease, background .15s ease;
}

/* subtle left accent bar */
.info-links a::before{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  border-radius: 10px 0 0 10px;
  background: linear-gradient(180deg, #5aa9ff, #2c79cb);
  opacity: .65;
  transition: opacity .15s ease;
}

/* right arrow */
.info-links a::after{
  content: "→";
  font-weight: 900;
  color: var(--blue);
  transform: translateX(0);
  transition: transform .15s ease;
}

/* hover/focus */
.info-links a:hover{
  border-color: #c8e2ff;
  background: #fdfefe;
  box-shadow: 0 6px 16px rgba(8,27,53,.08);
  transform: translateY(-1px);
}
.info-links a:hover::after{ transform: translateX(3px); }

.info-links a:focus-visible{
  outline: none;
  border-color: #8bc2ff;
  box-shadow: 0 0 0 4px rgba(22,128,224,.16);
}

/* active (mouse down) */
.info-links a:active{
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(8,27,53,.07);
}

/* responsive: dense spacing on small screens */
@media (max-width: 700px){
  .info-box{ padding: 16px 14px; border-radius: 10px; }
  .info-links{ gap: 8px; }
  .info-links a{ padding: 12px 14px; border-radius: 9px; }
}


/*
.info-box.is-compact .info-links a{
  padding: 10px 12px;
  border-radius: 8px;
  font-weight: 700;
}
*/
/* ===== Responsive: Intro Section (unter H1) ===== */


@media (max-width: 900px){
  .section-card--intro{
    max-width: 86vw;          
    margin: 0 auto 24px;      
    padding: 0 12px;          
    text-align: center;       
  }

  .section-card--intro h1{
    margin: 16px auto 12px;
    line-height: 1.25;
    text-align: center;
    word-break: break-word;
  }

  .section-card--intro p{
    margin: 0 auto 14px;
    max-width: 66ch;          
    font-size: clamp(1rem, 2.8vw, 1.08rem);
    line-height: 1.65;
    text-align: center;
  }

  .section-card--intro a{
    color: var(--blue);
    font-weight: 600;
    text-decoration: underline;
  }
  .section-card--intro a:hover{
    color: var(--navy);
  }
}


@media (max-width: 540px){
  .section-card--intro{
    padding: 0 10px;
    margin: 0 auto 20px;
  }
  .section-card--intro p{
    font-size: 1.02rem;
  }
}
/* ===== Vorteile: non-clickable, distinct look ===== */
.info-box[aria-label="Vorteile"]{
  max-width:880px;
  margin:28px auto 36px;
  text-align:center;              
}

.info-box[aria-label="Vorteile"] .info-box__title{
  text-align:center;
  margin-bottom:16px;
}


.info-box[aria-label="Vorteile"] .info-links{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

.info-box[aria-label="Vorteile"] .info-links a{
  cursor:default;               
  pointer-events:none;          
  color:#0f1c2e;
  text-decoration:none;
  background:#fff;
  border:2px solid #d7e9ff;     
  border-radius:12px;
  padding:16px 18px;
  font-weight:700;
  line-height:1.45;
  display:block;
  grid-template-columns:1fr;    
}


.info-box[aria-label="Vorteile"] .info-links a::before,
.info-box[aria-label="Vorteile"] .info-links a::after{
  content:none;
}


.info-box[aria-label="Vorteile"] .info-links a:hover{
  transform:none;
  box-shadow:0 1px 0 rgba(8,27,53,.04);
  border-color:#d7e9ff;
  background:#fff;
}


@media (max-width:700px){
  .info-box[aria-label="Vorteile"]{ padding:16px 14px; }
  .info-box[aria-label="Vorteile"] .info-links{ gap:10px; }
  .info-box[aria-label="Vorteile"] .info-links a{
    padding:14px 14px;
    border-radius:10px;
  }
}



/* Intro block used on Branchen pages (centered) */
.section-card--intro{
  max-width: 900px;
  margin: 32px auto 0;
  padding: 0 16px;
  text-align: center; 
}
.section-card--intro h1{
  margin: 12px auto 10px;
  color: var(--blue);
  font-weight: 800;
  line-height: 1.22;
  font-size: clamp(1.35rem, 4.2vw, 2.1rem);
  text-wrap: balance;
  -webkit-hyphens: auto; 
  hyphens: auto; 
  overflow-wrap: anywhere;
}
.section-card--intro p{
  color: #222;
  max-width: 66ch;
  margin: 0 auto 14px;
  font-size: clamp(.96rem, 2.7vw, 1.05rem);
  line-height: 1.65;
}
@media (max-width:900px){
  .section-card--intro{ max-width: 86vw; margin: 0 auto 24px; }
}
/* ===== Generic List Cards (centered, responsive) ===== */
.list-cards {
  max-width: 880px;
  margin: 32px auto 40px;
  padding: 0;
  display: grid;
  gap: 16px;
}

.list-cards__item {
  border: 2px solid #d7e9ff;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(8,27,53,.06);
  padding: 18px 20px;
  text-align: center;
}

.list-cards__item h3 {
  margin: 0 0 8px;
  color: var(--blue);
  font-weight: 800;
  font-size: clamp(1.05rem, 3.2vw, 1.2rem);
  line-height: 1.3;
  text-wrap: balance;
}

.list-cards__item p {
  margin: 0;
  color: #222;
  font-size: clamp(.95rem, 2.8vw, 1.05rem);
  line-height: 1.65;
  text-wrap: balance;
}

/* Responsive */

@media (max-width: 700px){
  .list-cards{
    padding-left: 12px;   
    padding-right: 12px;  
    gap: 12px;
  }
  .list-cards__item{
    border-radius: 12px;   
    border-width: 1.5px;   
    box-shadow: 0 1px 8px rgba(8,27,53,.08); 
  }
}


@media (max-width: 380px){
  .list-cards{
    padding-left: 10px;
    padding-right: 10px;
  }
  .list-cards__item{
    border-radius: 10px;
    border-width: 1px;
  }
}

.section-card{
  max-width: 900px;
  margin: 24px auto 26px;
  padding: 18px 16px;                 
  background: #fff;
  border: 2px solid #b4dcff;
  border-radius: 18px;
  box-shadow: 0 6px 20px rgba(8,27,53,.08);
}


.section-card--intro{
  text-align: center;
}
.section-card--intro .page-title,
.section-card--intro h1{
  margin: 12px auto 10px;
  color: var(--blue);
  font-weight: 800;
  line-height: 1.22;
  font-size: clamp(1.35rem, 4.2vw, 2.1rem);
  text-wrap: balance;
  -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere;
}
.section-card--intro p{
  color:#222;
  max-width:66ch;
  margin:0 auto 14px;
  font-size:clamp(.96rem,2.7vw,1.05rem);
  line-height:1.65;
}
.section-card--intro a{ color:var(--blue); font-weight:600; text-decoration:underline; }
.section-card--intro a:hover{ color:var(--navy); }


@media (max-width: 900px){
  .section-card{ max-width: 86vw; margin: 16px auto 22px; padding: 16px 12px; }
}
@media (max-width: 540px){
  .section-card{ padding: 14px 10px; }
}