.elementor-24332 .elementor-element.elementor-element-72eea04{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-5cfd36f *//* ============================================================
   S & C HOTFIX – Rechner-Abschluss Premium-Karten FINAL
   - alle Kacheln zentriert wie Feature-Cards
   - Icon oben mittig
   - Titel, Untertitel und Button zentriert
   - Untertitel nutzt die Kartenbreite besser aus
   - keine hässlichen Worttrennungen
   - kein HTML-Umbau
=============================================================== */


/* ---------- Grundlayout / Schutz gegen Theme-Ränder ---------- */

html:has(#tip-kacheln),
body:has(#tip-kacheln){
  background:#f6f8fb !important;
}

body:has(#tip-kacheln) :is(
  .site,
  .site-content,
  .content-area,
  .site-main,
  main,
  article,
  .entry-content,
  .wp-site-blocks,
  .wp-block-post-content,
  .elementor,
  .elementor-section-wrap,
  .elementor-section,
  .elementor-container,
  .elementor-column,
  .elementor-widget-wrap,
  .elementor-widget-html,
  .elementor-widget-container,
  .e-con,
  .e-con-inner
):has(#tip-kacheln){
  background:#f6f8fb !important;
}


/* ---------- Außenblock bleibt breit wie Rechner ---------- */

#tip-kacheln{
  background:#f6f8fb !important;
  margin-top:-34px !important;
  margin-bottom:0 !important;
  padding:0 0 18px !important;
  overflow-x:clip !important;
}

#tip-kacheln .tip-shell{
  width:100% !important;
  max-width:1200px !important;
  margin:0 auto !important;
  padding:0 16px !important;
}

@media (min-width:1200px){
  #tip-kacheln .tip-shell{
    max-width:1360px !important;
  }
}


/* ---------- Panel ---------- */

#tip-kacheln .tip-panel{
  background:#fff !important;
  border:1px solid rgba(219,229,240,.96) !important;
  border-radius:22px !important;
  box-shadow:0 10px 28px rgba(17,34,54,.07) !important;
  overflow:hidden !important;
}

#tip-kacheln .tip-top{
  background:#fff !important;
  text-align:center !important;
  padding:14px 16px 10px !important;
}

#tip-kacheln .tip-top h2{
  margin:0 0 5px !important;
  font-size:21px !important;
  line-height:1.2 !important;
  font-weight:950 !important;
  letter-spacing:-.012em !important;
  color:#0f2233 !important;
}

#tip-kacheln .tip-top p{
  margin:0 auto !important;
  max-width:980px !important;
  font-size:13.8px !important;
  line-height:1.5 !important;
  color:#607089 !important;
}


/* ---------- Grid ---------- */

#tip-kacheln .tip-grid{
  padding:16px !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:16px !important;
  align-items:stretch !important;
  background:#fff !important;
}

@media (min-width:740px){
  #tip-kacheln .tip-grid{
    grid-template-columns:1fr 1fr !important;
    gap:16px !important;
  }
}

@media (min-width:960px){
  #tip-kacheln .tip-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}


/* ---------- Karten: zentrierte Premium-Optik ---------- */

#tip-kacheln .tip-card{
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
  min-height:218px !important;
  padding:25px 24px 22px !important;
  border-radius:20px !important;
  text-decoration:none !important;
  color:inherit !important;
  border:1px solid rgba(205,218,233,.96) !important;
  box-shadow:0 12px 26px rgba(17,34,54,.06) !important;
  overflow:hidden !important;
  position:relative !important;
  transition:transform .14s ease, box-shadow .16s ease, border-color .16s ease !important;
  -webkit-tap-highlight-color:transparent !important;
}


/* FAQ / erste Kachel – hellblau */

#tip-kacheln .tip-grid .tip-card:nth-child(1){
  background:
    radial-gradient(280px 190px at 50% 0%, rgba(47,108,223,.075), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(249,252,255,.97) 100%) !important;
  border-color:rgba(190,209,235,.96) !important;
}


/* Guide / zweite Kachel – mint */

#tip-kacheln .tip-grid .tip-card:nth-child(2){
  background:
    radial-gradient(280px 190px at 50% 0%, rgba(0,163,163,.085), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(248,254,253,.97) 100%) !important;
  border-color:rgba(172,215,216,.96) !important;
}


/* Übersicht / dritte Kachel – warm */

#tip-kacheln .tip-grid .tip-card:nth-child(3){
  background:
    radial-gradient(280px 190px at 50% 0%, rgba(212,175,55,.115), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(255,252,245,.97) 100%) !important;
  border-color:rgba(221,198,137,.96) !important;
}

#tip-kacheln .tip-card:visited{
  color:inherit !important;
}

#tip-kacheln .tip-card::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(180deg, rgba(255,255,255,.50) 0%, rgba(255,255,255,0) 58%) !important;
  pointer-events:none !important;
  opacity:.55 !important;
}

#tip-kacheln .tip-card::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(180deg, rgba(255,255,255,.50) 0%, rgba(255,255,255,0) 56%) !important;
  opacity:0 !important;
  transition:opacity .16s ease !important;
  pointer-events:none !important;
}

@media (hover:hover) and (pointer:fine){
  #tip-kacheln .tip-card:hover{
    transform:translateY(-2px) !important;
    box-shadow:0 18px 42px rgba(17,34,54,.11) !important;
  }

  #tip-kacheln .tip-card:hover::after{
    opacity:1 !important;
  }
}


/* ---------- Inhalt in der Karte ---------- */

#tip-kacheln .tip-inner{
  position:relative !important;
  z-index:2 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  flex:1 1 auto !important;
  width:100% !important;
  min-width:0 !important;
  gap:15px !important;
  text-align:center !important;
}

#tip-kacheln .tip-meta{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  flex:1 1 auto !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  text-align:center !important;
}


/* ---------- Icon ---------- */

#tip-kacheln .tip-ico{
  width:60px !important;
  height:60px !important;
  flex:0 0 60px !important;
  border-radius:20px !important;
  display:grid !important;
  place-items:center !important;
  align-self:center !important;
  margin:0 auto 4px !important;
  border:3px solid rgba(255,255,255,.98) !important;
  box-shadow:
    inset 0 -7px 12px rgba(0,0,0,.08),
    0 14px 26px rgba(17,34,54,.12) !important;
  color:#0f2233 !important;
}

#tip-kacheln .tip-ico.blue{
  background:linear-gradient(180deg, rgba(47,108,223,.18) 0%, rgba(47,108,223,.10) 100%) !important;
}

#tip-kacheln .tip-ico.teal{
  background:linear-gradient(180deg, rgba(0,163,163,.16) 0%, rgba(0,163,163,.10) 100%) !important;
}

#tip-kacheln .tip-grid .tip-card:nth-child(3) .tip-ico{
  background:linear-gradient(180deg, rgba(243,234,215,.98) 0%, rgba(239,224,196,.94) 100%) !important;
}

#tip-kacheln .tip-ico svg{
  width:25px !important;
  height:25px !important;
}


/* ---------- Harte Bruchkontrolle ---------- */

#tip-kacheln .tip-title,
#tip-kacheln .tip-text,
#tip-kacheln .tip-pill{
  hyphens:none !important;
  -webkit-hyphens:none !important;
  -ms-hyphens:none !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  line-break:auto !important;
}

/* falls ältere Varianten noch <wbr> in Titeln enthalten */
#tip-kacheln .tip-title wbr{
  display:none !important;
}


/* ---------- Titel ---------- */

#tip-kacheln .tip-title{
  margin:0 auto 8px !important;
  width:100% !important;
  max-width:100% !important;
  text-align:center !important;
  font-size:clamp(18.4px,1.48vw,21.5px) !important;
  line-height:1.16 !important;
  font-weight:950 !important;
  letter-spacing:-.018em !important;
  color:#0f2233 !important;
  white-space:normal !important;
  text-wrap:pretty !important;
}


/* ---------- Untertitel: bewusst breiter ---------- */

#tip-kacheln .tip-text{
  width:100% !important;
  max-width:min(100%, 54ch) !important;
  margin:0 auto !important;
  text-align:center !important;
  font-size:15px !important;
  line-height:1.48 !important;
  font-weight:500 !important;
  color:#6a7a92 !important;
  white-space:normal !important;
  text-wrap:pretty !important;
}


/* ---------- Button ---------- */

#tip-kacheln .tip-foot{
  width:100% !important;
  margin-top:auto !important;
  padding-top:17px !important;
  display:flex !important;
  justify-content:center !important;
  min-width:0 !important;
}

#tip-kacheln .tip-pill{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:10px 18px !important;
  border-radius:999px !important;
  border:2px solid rgba(36,50,64,.48) !important;
  background:rgba(255,255,255,.92) !important;
  box-shadow:0 12px 22px rgba(17,34,54,.06) !important;
  color:#0f2233 !important;
  font-size:15px !important;
  line-height:1.15 !important;
  font-weight:950 !important;
  white-space:nowrap !important;
}

#tip-kacheln .tip-grid .tip-card:nth-child(1) .tip-pill{
  border-color:rgba(36,50,64,.45) !important;
}

#tip-kacheln .tip-grid .tip-card:nth-child(2) .tip-pill{
  border-color:rgba(96,158,162,.58) !important;
}

#tip-kacheln .tip-grid .tip-card:nth-child(3) .tip-pill{
  border-color:rgba(205,176,96,.66) !important;
}


/* ---------- Focus ---------- */

#tip-kacheln a:focus-visible{
  outline:2px solid rgba(47,108,223,.35) !important;
  outline-offset:3px !important;
  border-radius:20px !important;
}


/* ---------- Tablet ---------- */

@media (max-width:959px){

  #tip-kacheln .tip-card{
    min-height:0 !important;
    padding:25px 22px 23px !important;
  }

  #tip-kacheln .tip-title{
    font-size:clamp(18.4px,2.55vw,21px) !important;
  }

  #tip-kacheln .tip-text{
    max-width:min(100%, 50ch) !important;
    font-size:15px !important;
  }
}


/* ---------- Mobile ---------- */

@media (max-width:640px){

  #tip-kacheln{
    margin-top:-22px !important;
    padding:0 0 18px !important;
  }

  #tip-kacheln .tip-shell{
    padding:0 14px !important;
  }

  #tip-kacheln .tip-panel{
    border-radius:20px !important;
  }

  #tip-kacheln .tip-top{
    padding:14px 14px 10px !important;
  }

  #tip-kacheln .tip-top h2{
    font-size:20px !important;
  }

  #tip-kacheln .tip-top p{
    max-width:100% !important;
    font-size:13.7px !important;
    line-height:1.48 !important;
  }

  #tip-kacheln .tip-grid{
    padding:14px !important;
    gap:18px !important;
  }

  #tip-kacheln .tip-card{
    padding:25px 22px 23px !important;
    min-height:0 !important;
    border-radius:20px !important;
  }

  #tip-kacheln .tip-inner{
    gap:15px !important;
  }

  #tip-kacheln .tip-ico{
    width:62px !important;
    height:62px !important;
    flex:0 0 62px !important;
    border-radius:20px !important;
    margin-bottom:5px !important;
  }

  #tip-kacheln .tip-ico svg{
    width:26px !important;
    height:26px !important;
  }

  #tip-kacheln .tip-title{
    width:100% !important;
    max-width:100% !important;
    font-size:clamp(18px,5vw,21px) !important;
    line-height:1.15 !important;
    letter-spacing:-.018em !important;
  }

  #tip-kacheln .tip-text{
    width:100% !important;
    max-width:100% !important;
    font-size:15.25px !important;
    line-height:1.48 !important;
  }

  #tip-kacheln .tip-foot{
    padding-top:17px !important;
  }

  #tip-kacheln .tip-pill{
    padding:10px 18px !important;
    font-size:15px !important;
  }
}


/* ---------- Sehr schmale Geräte ---------- */

@media (max-width:380px){

  #tip-kacheln .tip-card{
    padding-left:18px !important;
    padding-right:18px !important;
  }

  #tip-kacheln .tip-title{
    font-size:17.6px !important;
    line-height:1.15 !important;
  }

  #tip-kacheln .tip-text{
    font-size:14.75px !important;
    line-height:1.47 !important;
  }

  #tip-kacheln .tip-pill{
    font-size:14.6px !important;
    padding:10px 16px !important;
  }
}


/* ---------- Motion reduzieren ---------- */

@media (prefers-reduced-motion:reduce){

  #tip-kacheln .tip-card{
    transition:none !important;
  }

  #tip-kacheln .tip-card:hover{
    transform:none !important;
  }
}




/* ============================================================
   S & C HOTFIX – Rechner-Abschluss Clean White Cards
   - Karten selbst wieder clean white
   - nur Symbolflächen behalten Farbe
   - Button neutral
   - kein HTML-Umbau
=============================================================== */

#tip-kacheln .tip-card,
#tip-kacheln .tip-grid .tip-card:nth-child(1),
#tip-kacheln .tip-grid .tip-card:nth-child(2),
#tip-kacheln .tip-grid .tip-card:nth-child(3){
  background:#fff !important;
  border-color:rgba(205,218,233,.96) !important;
}

#tip-kacheln .tip-card::before{
  background:linear-gradient(180deg, rgba(248,251,255,.42) 0%, rgba(255,255,255,0) 58%) !important;
  opacity:.38 !important;
}

#tip-kacheln .tip-card::after{
  background:linear-gradient(180deg, rgba(255,255,255,.52) 0%, rgba(255,255,255,0) 56%) !important;
}

/* Symbolflächen bleiben farblich differenziert */
#tip-kacheln .tip-ico.blue{
  background:linear-gradient(180deg, rgba(47,108,223,.18) 0%, rgba(47,108,223,.10) 100%) !important;
}

#tip-kacheln .tip-ico.teal{
  background:linear-gradient(180deg, rgba(0,163,163,.16) 0%, rgba(0,163,163,.10) 100%) !important;
}

#tip-kacheln .tip-grid .tip-card:nth-child(3) .tip-ico{
  background:linear-gradient(180deg, rgba(243,234,215,.98) 0%, rgba(239,224,196,.94) 100%) !important;
}

/* Buttons neutral halten */
#tip-kacheln .tip-pill,
#tip-kacheln .tip-grid .tip-card:nth-child(1) .tip-pill,
#tip-kacheln .tip-grid .tip-card:nth-child(2) .tip-pill,
#tip-kacheln .tip-grid .tip-card:nth-child(3) .tip-pill{
  border-color:rgba(36,50,64,.48) !important;
  background:#fff !important;
}/* End custom CSS */