/* alle-leistungen.css — seitenspezifisches CSS */
:root{
  --tsl-scroll-offset:110px;
}

html{
  scroll-behavior:smooth;
}

.tsl-block[id]{
  scroll-margin-top:var(--tsl-scroll-offset);
}

.tsl-outer{
  position:relative;
  left:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  width:100vw;
  box-sizing:border-box;
  background:#ffffff;
  margin-bottom:-1px;
}

.tsl-outer + p:empty,
.tsl-outer ~ p:empty{
  display:none;
}

.tsl-hero-wrap{
  max-width:1040px;
  margin:0 auto;
  padding:72px 24px 32px;
  box-sizing:border-box;
  text-align:left;
}

.tsl-hero-label{
  display:block;
  font-family:var(--font-sub);
  font-size:17px;
  font-weight:400;
  color:#DC2751;
  margin:0 0 22px;
  line-height:1.2;
  text-align:left;
}

.tsl-hero-title { font-family:'Poppins',sans-serif; font-size:clamp(30px,5vw,52px); font-weight:900; color:#1e2130; margin:0 0 16px; line-height:1.04; text-align:left; letter-spacing:-0.04em; }

.tsl-hero-title span{
  color:#DC2751;
}

.tsl-hero-sub{
  font-family:var(--font-main);
  font-size:16px;
  font-weight:400;
  color:#666;
  max-width:760px;
  line-height:1.85;
  margin:0;
  text-align:left;
}

.tsl-nav-wrap{
  max-width:1040px;
  margin:0 auto;
  padding:0 24px;
  box-sizing:border-box;
  background:#fff;
}

.tsl-nav{
  background:#fff;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-start;
  align-items:center;
  padding:14px 0;
  box-sizing:border-box;
  width:100%;
}

.tsl-nav a{
  font-family:var(--font-headers);
  font-size:0.86rem;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:#444;
  padding:10px 18px;
  border-radius:32px;
  border:1.5px solid #d5d5d5;
  white-space:nowrap;
  display:inline-block;
  text-decoration:none;
  transition:color 0.2s,border-color 0.2s,background 0.2s,transform 0.2s;
}

.tsl-nav a:hover,
.tsl-nav a:focus,
.tsl-nav a:focus-visible{
  color:#DC2751;
  border-color:#DC2751;
  background:#fff8fa;
  outline:none;
  text-decoration:none;
}

.tsl-nav a:active{
  transform:translateY(1px);
}

.tsl-inner{
  max-width:1040px;
  margin:0 auto;
  padding:0 24px 80px;
  font-family:var(--font-main);
  font-size:16px;
  line-height:1.65;
  color:#282834;
}

.tsl-proof{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px 32px;
  flex-wrap:wrap;
  padding:24px 24px 12px;
  max-width:1040px;
  margin:0 auto;
  box-sizing:border-box;
}

.tsl-proof-item{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-headers);
  font-size:0.82rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:#555;
}

.tsl-proof-item svg{
  flex-shrink:0;
}

.tsl-proof-item strong{
  color:#DC2751;
  font-weight:700;
}

.tsl-block{
  margin-top:72px;
}

.tsl-block.tsl-bg{
  background:#f6f6f6;
  margin-left:-24px;
  margin-right:-24px;
  padding:0 24px 56px;
}

.tsl-head{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  margin-bottom:16px;
  padding-top:24px;
}

.tsl-head .tsl-num{
  font-family:var(--font-headers);
  font-size:0.78rem;
  font-weight:700;
  color:#DC2751;
  letter-spacing:0.12em;
  text-transform:uppercase;
  padding:4px 12px;
  border:2px solid #DC2751;
  border-radius:32px;
  white-space:nowrap;
  line-height:1.4;
}

.tsl-head h2 { font-family:'Poppins',sans-serif; font-size:1.9rem; font-weight:900; color:#1e2130; border-left:5px solid #DC2751; padding-left:14px; margin:0; line-height:1.05; letter-spacing:-0.03em; }

.tsl-section-sub{
  font-family:var(--font-main);
  font-size:15px;
  color:#666;
  line-height:1.7;
  max-width:780px;
  margin:0 0 26px 0;
}

.tsl-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px;
}

.tsl-card{
  background:#fff;
  border:1px solid #e2e2e2;
  border-radius:8px;
  padding:22px 24px;
  border-top:4px solid transparent;
  display:flex;
  flex-direction:column;
  transition:border-top-color 0.2s,box-shadow 0.25s,transform 0.25s;
}

@media (hover:hover){
  .tsl-card:hover{
    border-top-color:#DC2751;
    box-shadow:0 6px 24px rgba(0,0,0,0.08);
    transform:translateY(-3px);
  }
}

.tsl-card.tsl-hl{
  border-top:4px solid #DC2751;
}

.tsl-card h3{
  font-family:var(--font-headers);
  font-size:1.08rem;
  font-weight:700;
  color:#282834;
  margin:0 0 8px 0;
  line-height:1.3;
}

.tsl-card.tsl-hl h3{
  color:#DC2751;
}

.tsl-card p{
  font-family:var(--font-main);
  font-size:0.95rem;
  color:#555;
  line-height:1.65;
  margin:0;
  flex:1;
}

/* === Mid-CTA (v5, 2026-04-24) - hell, volle Breite, responsive optimiert === */
.tsl-mid-cta {
  position: relative;
  background: #f9fafb;
  border: 1px solid #e8e8ec;
  border-radius: 16px;
  padding: 36px 44px;
  margin: 56px auto 0;
  max-width: 1040px;
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.tsl-mid-cta::before {
  content: '';
  position: absolute;
  left: 0; top: 28px; bottom: 28px;
  width: 4px;
  background: #DC2751;
  border-radius: 0 2px 2px 0;
}
.tsl-mid-cta-body {
  flex: 1 1 380px;
  min-width: 0;
}
.tsl-mid-cta-eyebrow {
  display: block;
  color: #DC2751 !important;
  font-size: 15px !important;
  margin-bottom: 10px;
  letter-spacing: 0.01em;
}
.tsl-mid-cta-title {
  font-family: var(--font-headers, 'Poppins', sans-serif);
  font-weight: 900;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: #1e2130;
  margin: 0 0 10px;
}
.tsl-mid-cta-text {
  font-family: var(--font-main, 'Hind', sans-serif) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: #555 !important;
  font-weight: 400 !important;
  margin: 0 !important;
}
.tsl-mid-cta-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.tsl-mid-cta .tsl-btn-rot {
  display: inline-flex;
  width: auto;
  min-width: 260px;
  max-width: none;
  margin: 0;
  padding: 16px 36px;
  white-space: nowrap;
}
.tsl-mid-cta-hint {
  display: block;
  font-family: var(--font-main, 'Hind', sans-serif);
  font-size: 12.5px;
  line-height: 1.45;
  color: #6b6b80;
  text-align: center;
}

/* Tablet (bis 900px): Padding reduzieren, aber Layout bleibt horizontal falls Platz */
@media (max-width: 900px) {
  .tsl-mid-cta {
    padding: 32px 32px 32px 40px;
    gap: 28px;
  }
  .tsl-mid-cta .tsl-btn-rot {
    min-width: 240px;
    padding: 15px 28px;
    font-size: 0.92rem;
  }
}

/* Mobile (bis 680px): Vertikales Layout, kompakt */
@media (max-width: 680px) {
  .tsl-mid-cta {
    padding: 28px 22px 24px 28px;
    margin-top: 40px;
    border-radius: 14px;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  .tsl-mid-cta::before {
    top: 24px; bottom: 24px; width: 3px;
  }
  .tsl-mid-cta-body {
    flex: 1 1 auto;
  }
  .tsl-mid-cta-title {
    font-size: 1.15rem;
  }
  .tsl-mid-cta-text {
    font-size: 14.5px !important;
  }
  .tsl-mid-cta-actions {
    width: 100%;
    align-items: stretch;
    gap: 10px;
  }
  .tsl-mid-cta .tsl-btn-rot {
    width: 100%;
    min-width: 0;
    padding: 15px 20px;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
  }
  .tsl-mid-cta-hint {
    font-size: 12px;
  }
}

.tsl-btn-rot{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#DC2751;
  color:#fff !important;
  font-family:var(--font-headers);
  font-size:0.98rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.06em;
  padding:18px 52px;
  border-radius:32px;
  text-decoration:none !important;
  line-height:1;
  transition:background 0.2s,transform 0.2s;
}

.tsl-btn-rot:hover{
  background:#b01f42;
  color:#fff !important;
  transform:translateY(-1px);
}

.tsl-btn-out{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  color:#ffffff !important;
  font-family:var(--font-headers);
  font-size:0.98rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.06em;
  padding:18px 52px;
  border-radius:32px;
  border:2px solid rgba(255,255,255,0.55);
  text-decoration:none !important;
  line-height:1;
  transition:border-color 0.2s,color 0.2s,background 0.2s,transform 0.2s;
}

.tsl-btn-out:hover{
  border-color:#ffffff;
  color:#DC2751 !important;
  background:#ffffff;
  transform:translateY(-1px);
}

/* === Final-CTA (v3, 2026-04-24) - Brand-Pink Vollflaechen-Band === */
/* Volle Breite wie .tsl-outer: links/rechts aus dem Container ausbrechen */
.tsl-cta{
  position:relative;
  left:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  width:100vw;
  max-width:100vw;
  box-sizing:border-box;
  background:#DC2751;
  padding:80px 24px;
  text-align:center;
  margin-top:72px;
  overflow:hidden;
}

.tsl-cta::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:4px;
  background:rgba(255,255,255,0.18);
}

.tsl-cta-eyebrow{
  display:inline-block;
  font-family:var(--font-sub, 'Architects Daughter', cursive);
  font-size:18px;
  color:#ffffff;
  margin-bottom:14px;
  opacity:0.92;
}

.tsl-cta h2 {
  font-family:'Poppins',sans-serif;
  font-size:clamp(24px,3.2vw,40px);
  font-weight:900;
  color:#ffffff;
  margin:0 auto 16px;
  line-height:1.18;
  letter-spacing:-0.025em;
  max-width:820px;
}

.tsl-cta-sub2{
  color:#ffffff;
  font-size:17px;
  display:block;
  margin:0 auto 38px;
  max-width:720px;
  line-height:1.7;
  font-family:var(--font-main);
  opacity:0.95;
}

.tsl-btns{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
  margin:0;
}

/* Primary Button im CTA: weiss mit pinkem Text */
.tsl-cta .tsl-btn-rot{
  background:#ffffff;
  color:#DC2751 !important;
  border:2px solid #ffffff;
  padding:16px 40px;
  font-size:13px;
  transition:background 0.2s,color 0.2s,transform 0.2s;
}
.tsl-cta .tsl-btn-rot:hover{
  background:transparent;
  color:#ffffff !important;
  transform:translateY(-2px);
}

.tsl-cta-hint{
  color:rgba(255,255,255,0.78);
  font-size:14px;
  display:block;
  margin:28px auto 0;
  padding-top:22px;
  line-height:1.6;
  font-family:var(--font-main);
  max-width:520px;
  border-top:1px solid rgba(255,255,255,0.2);
}

.tsl-nav a:focus-visible,
.tsl-btn-rot:focus-visible,
.tsl-btn-out:focus-visible{
  outline:2px solid #DC2751;
  outline-offset:3px;
}

@media (max-width:900px){
  .tsl-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width:640px){
  .tsl-hero-wrap{
    padding:40px 16px 14px;
  }
  .tsl-nav-wrap{
    padding:0 16px;
  }
  .tsl-inner{
    padding:0 16px 60px;
  }
  .tsl-block{
    margin-top:56px;
  }
  .tsl-block.tsl-bg{
    margin-left:-16px;
    margin-right:-16px;
    padding:0 16px 44px;
  }
  .tsl-nav{
    padding:10px 0;
    gap:6px;
  }
  .tsl-nav a{
    font-size:0.76rem;
    padding:6px 11px;
  }
  .tsl-head h2{
    font-size:1.4rem;
  }
  .tsl-grid{
    grid-template-columns:1fr;
  }
  .tsl-cta{
    padding:56px 20px;
    margin-top:56px;
  }
  .tsl-cta::before {
    height:3px;
  }
  .tsl-cta-eyebrow{
    font-size:16px;
  }
  .tsl-cta h2 {
    font-size:clamp(22px,5vw,28px);
  }
  .tsl-cta-sub2 {
    font-size:15px;
    margin-bottom:28px;
  }
  .tsl-btns{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    margin:0;
  }
  .tsl-cta .tsl-btn-rot,
  .tsl-btn-out{
    width:100%;
    max-width:none;
    text-align:center;
    box-sizing:border-box;
    padding:15px 20px;
    font-size:0.9rem;
    letter-spacing:0.04em;
  }
  .tsl-cta-hint {
    font-size:13px;
    margin-top:24px;
    padding-top:18px;
  }
  .tsl-proof{
    gap:14px 20px;
    padding:20px 16px 10px;
    justify-content:flex-start;
  }
}

@media (max-width:400px){
  .tsl-nav a{
    font-size:0.72rem;
    padding:5px 9px;
  }
  .tsl-card{
    padding:18px 16px;
  }
  .tsl-btn-rot,
  .tsl-btn-out{
    max-width:100%;
  }
}

/* ============================================================
   SECTION-LINK ZU DETAILSEITE
   Hinzugefügt: 26.04.2026 — verlinkt jede Übersichts-Sektion 
   mit der jeweiligen Detail-Unterseite.
   ============================================================ */

.tsl-section-link-wrap {
  margin-top: 32px;
  display: flex;
  justify-content: flex-end;
}

.tsl-section-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  background: transparent;
  border: 1.5px solid rgba(220, 39, 81, 0.35);
  border-radius: 999px;
  color: #DC2751;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.tsl-section-link:hover,
.tsl-section-link:focus-visible {
  background: #DC2751;
  border-color: #DC2751;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(220, 39, 81, 0.25);
}

.tsl-section-link-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  transition: transform 0.25s ease;
}

.tsl-section-link:hover .tsl-section-link-arrow,
.tsl-section-link:focus-visible .tsl-section-link-arrow {
  transform: translateX(4px);
}

/* Für Sektionen mit dunklerem Hintergrund (.tsl-bg) — gleiche Optik */
.tsl-block.tsl-bg .tsl-section-link {
  border-color: rgba(220, 39, 81, 0.45);
}

/* Mobile — Link bleibt rechts, aber kompakter */
@media (max-width: 640px) {
  .tsl-section-link-wrap {
    margin-top: 24px;
    justify-content: center;
  }
  .tsl-section-link {
    padding: 12px 18px;
    font-size: 0.9rem;
    white-space: normal;
    text-align: center;
  }
}


/* Profi-Bildintegration */
img {
  border-radius: 12px;
  filter: contrast(1.08) saturate(0.92) brightness(1.02);
  box-shadow: 0 0 80px 20px rgba(40, 40, 52, 0.6);
}
section[style*="ffffff"] img,
section[style*="fafafb"] img,
section[style*="f4f4f6"] img,
.fg-light img,
.fg-bg-light img,
[class*="white"] img,
[class*="-light"] img {
  box-shadow: 0 0 80px 20px rgba(220, 220, 230, 0.7);
}