/* TOPFORM Paket 125 – Dichtungsfinder */
.tf125-page{--tf125-red:#d71920;--tf125-ink:#171717;--tf125-muted:#666;--tf125-line:#e5e5e5;--tf125-soft:#f5f5f3;max-width:1480px;margin:0 auto;padding:0 28px 80px;color:var(--tf125-ink)}
.tf125-previewbar{margin:16px 0;padding:10px 16px;border-radius:10px;background:#fff2cc;border:1px solid #ecd37d;font-weight:700}
.tf125-hero{margin:30px 0 34px;padding:46px;border-radius:26px;background:linear-gradient(135deg,#f4f4f2 0%,#fff 72%);display:grid;grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(150px,.65fr));gap:22px;align-items:end;border:1px solid #ededeb}
.tf125-hero-copy{padding-right:25px}.tf125-hero h1{font-size:clamp(42px,5vw,76px);line-height:.96;margin:.18em 0 .3em;letter-spacing:-.045em}.tf125-lead{font-size:clamp(18px,2vw,23px);line-height:1.45;max-width:760px;color:#444}
.tf125-hero-meta{display:flex;gap:26px;margin-top:24px}.tf125-hero-meta span{display:flex;flex-direction:column}.tf125-hero-meta strong{font-size:24px}.tf125-hero-meta span{font-size:13px;color:#666}
.tf125-hero-step{background:#fff;border:1px solid var(--tf125-line);border-radius:18px;padding:20px;min-height:150px;display:flex;gap:13px;align-items:flex-start;box-shadow:0 10px 30px rgba(0,0,0,.035)}
.tf125-hero-step>span{flex:0 0 34px;height:34px;border-radius:50%;background:var(--tf125-red);color:#fff;display:grid;place-items:center;font-weight:900}.tf125-hero-step strong{display:block;margin-bottom:7px}.tf125-hero-step small{display:block;color:#666;line-height:1.4}
.tf125-workspace{display:grid;gap:22px}.tf125-panel{border:1px solid var(--tf125-line);border-radius:22px;padding:30px;background:#fff}.tf125-panelhead{max-width:820px;margin-bottom:24px}.tf125-panelhead h2,.tf125-resultshead h2,.tf125-family-head h2{font-size:clamp(28px,3vw,42px);margin:.1em 0 .25em}.tf125-panelhead p:last-child,.tf125-family-head p:last-child,.tf125-resultshead p:last-child{color:#666;line-height:1.55}
.tf125-usecases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.tf125-usecases button{appearance:none;background:#fafafa;border:1px solid #ddd;border-radius:15px;padding:18px;text-align:left;cursor:pointer;min-height:100px;transition:.18s}.tf125-usecases button:hover{border-color:#aaa;transform:translateY(-1px)}.tf125-usecases button.is-active{background:#181818;color:#fff;border-color:#181818;box-shadow:0 8px 20px rgba(0,0,0,.12)}.tf125-usecases strong,.tf125-usecases span{display:block}.tf125-usecases strong{font-size:18px;margin-bottom:5px}.tf125-usecases span{font-size:13px;opacity:.7}
.tf125-photo-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.tf125-upload{border:1.5px dashed #bbb;border-radius:18px;padding:28px;cursor:pointer;min-height:190px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:#fafafa}.tf125-upload input{position:absolute;opacity:0;pointer-events:none}.tf125-upload-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#171717;color:#fff;font-size:28px;margin-bottom:12px}.tf125-upload small,.tf125-code small{color:#777;margin-top:7px}.tf125-photo-preview{position:relative;border:1px solid #ddd;border-radius:18px;overflow:hidden;min-height:190px;background:#f2f2f2}.tf125-photo-preview img{width:100%;height:250px;object-fit:contain;display:block}.tf125-photo-preview button{position:absolute;right:10px;bottom:10px;border:0;border-radius:999px;background:#fff;padding:8px 12px;box-shadow:0 4px 15px rgba(0,0,0,.15);cursor:pointer}.tf125-code{grid-column:1/-1;display:flex;flex-direction:column;gap:7px}.tf125-code input{font-size:18px;padding:15px 16px;border:1px solid #ccc;border-radius:12px}
.tf125-measures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.tf125-measures label{display:flex;flex-direction:column;gap:7px}.tf125-measures label>span{font-weight:700}.tf125-measures label>div{display:flex;border:1px solid #ccc;border-radius:12px;overflow:hidden}.tf125-measures input{min-width:0;width:100%;border:0;padding:14px;font-size:18px;outline:0}.tf125-measures em{font-style:normal;display:flex;align-items:center;padding:0 13px;background:#f4f4f4;color:#666}.tf125-actions{display:flex;align-items:center;gap:14px;margin-top:24px}.tf125-reset{border:0;background:transparent;text-decoration:underline;cursor:pointer}
.tf125-results{scroll-margin-top:110px;padding:52px 0}.tf125-resultshead{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:24px}.tf125-resultcount{font-size:18px;white-space:nowrap}.tf125-reference{border:1px solid var(--tf125-line);border-radius:18px;padding:15px;margin-bottom:20px;display:grid;grid-template-columns:auto 140px 1fr;gap:16px;align-items:center;background:#fafafa}.tf125-reference>span{font-weight:800}.tf125-reference img{width:140px;height:100px;object-fit:contain;background:#fff;border-radius:10px}.tf125-reference small{color:#666}
.tf125-resultgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.tf125-resultcard{border:1px solid #ddd;border-radius:20px;overflow:hidden;background:#fff;display:flex;flex-direction:column;box-shadow:0 8px 25px rgba(0,0,0,.035)}.tf125-match{display:flex;justify-content:space-between;padding:13px 17px;background:#171717;color:#fff;font-size:13px;font-weight:800}.tf125-match em{font-style:normal;opacity:.6}.tf125-profile-image{height:220px;background:#f7f7f5;display:grid;place-items:center;padding:18px}.tf125-profile-image img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}.tf125-profile-placeholder{text-align:center;font-size:22px;font-weight:900;color:#777}.tf125-resultbody{padding:20px;display:flex;flex-direction:column;flex:1}.tf125-resultbody>small{color:#777}.tf125-resultbody h3{font-size:29px;margin:5px 0 16px}.tf125-featuregrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px}.tf125-featuregrid span{background:#f5f5f3;border-radius:9px;padding:9px}.tf125-featuregrid small,.tf125-featuregrid strong{display:block}.tf125-featuregrid small{font-size:11px;color:#777}.tf125-featuregrid strong{font-size:14px;margin-top:2px}.tf125-colors,.tf125-articlemeta{font-size:13px;color:#666}.tf125-resultbody .button{margin-top:auto;text-align:center}.tf125-noresults{padding:30px;border-radius:16px;background:#f5f5f3}.tf125-noresults strong{font-size:22px}
.tf125-family-section{padding-top:28px;border-top:1px solid #ddd}.tf125-family-head{max-width:800px;margin-bottom:24px}.tf125-family-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.tf125-family-card{display:flex;flex-direction:column;border:1px solid #ddd;border-radius:18px;overflow:hidden;color:inherit;text-decoration:none;background:#fff;transition:.18s}.tf125-family-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.08)}.tf125-family-image{height:180px;background:#f4f4f2;display:grid;place-items:center}.tf125-family-image img{width:100%;height:100%;object-fit:cover}.tf125-family-image span{font-weight:900;color:#aaa}.tf125-family-body{padding:18px;display:flex;flex-direction:column;flex:1}.tf125-family-body small{color:#777}.tf125-family-body h3{font-size:20px;margin:5px 0 10px}.tf125-family-body p{font-size:14px;color:#666;line-height:1.45}.tf125-family-body strong{margin-top:auto;padding-top:10px}
.tf125-empty-page{padding:70px 0;text-align:center}.tf125-empty-page h2{font-size:40px}
@media(max-width:1100px){.tf125-hero{grid-template-columns:1fr 1fr}.tf125-hero-copy{grid-column:1/-1}.tf125-usecases,.tf125-family-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tf125-resultgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.tf125-page{padding:0 16px 55px}.tf125-hero{margin:18px 0 20px;padding:24px;border-radius:19px;grid-template-columns:1fr}.tf125-hero-copy{padding-right:0}.tf125-hero-step{min-height:0}.tf125-hero-meta{gap:18px}.tf125-panel{padding:20px;border-radius:17px}.tf125-usecases{grid-template-columns:1fr 1fr;gap:9px}.tf125-usecases button{padding:14px;min-height:86px}.tf125-photo-grid{grid-template-columns:1fr}.tf125-code{grid-column:auto}.tf125-measures{grid-template-columns:1fr 1fr}.tf125-actions{align-items:stretch;flex-direction:column}.tf125-actions .button{width:100%}.tf125-resultshead{align-items:flex-start;flex-direction:column}.tf125-resultgrid,.tf125-family-grid{grid-template-columns:1fr}.tf125-reference{grid-template-columns:90px 1fr}.tf125-reference img{width:90px;height:75px}.tf125-reference small{grid-column:1/-1}.tf125-profile-image{height:240px}}


/* Paket 125a – Anpassung an bestehende TOPFORM Formsprache
   Keine abgerundeten Karten/Buttons innerhalb des Dichtungsfinders. */
.tf125-page .tf125-hero,
.tf125-page .tf125-hero-step,
.tf125-page .tf125-panel,
.tf125-page .tf125-usecases button,
.tf125-page .tf125-upload,
.tf125-page .tf125-photo-preview,
.tf125-page .tf125-photo-preview button,
.tf125-page .tf125-code input,
.tf125-page .tf125-measures label>div,
.tf125-page .tf125-featuregrid span,
.tf125-page .tf125-reference,
.tf125-page .tf125-resultcard,
.tf125-page .tf125-noresults,
.tf125-page .tf125-family-card,
.tf125-page .tf125-family-image,
.tf125-page .button,
.tf125-page button,
.tf125-page input,
.tf125-page select {
    border-radius:0 !important;
}

/* Runder Schrittzähler bleibt bewusst rund – funktionales Nummernelement,
   kein Karten-/Button-Stilelement. */
.tf125-page .tf125-hero-step>span {
    border-radius:50% !important;
}

/* Profilgrafik ausschließlich im dafür vorgesehenen Bildfenster halten.
   Globale Bildregeln des bestehenden Frontends dürfen sie nicht versetzen. */
.tf125-profile-image {
    position:relative !important;
    overflow:hidden !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    height:220px !important;
    padding:24px !important;
    background:#f7f7f5 !important;
}
.tf125-profile-image img {
    position:static !important;
    inset:auto !important;
    float:none !important;
    display:block !important;
    width:auto !important;
    height:auto !important;
    max-width:88% !important;
    max-height:88% !important;
    object-fit:contain !important;
    margin:auto !important;
    transform:none !important;
    mix-blend-mode:multiply;
}

/* Familien-Milieubilder sind eigenständige Motive und sollen vollständig
   sichtbar sein, nicht wie klassische Produktfotos angeschnitten werden. */
.tf125-family-image {
    position:relative;
    overflow:hidden;
    background:#f4f4f2;
}
.tf125-family-image img {
    position:static !important;
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:cover !important;
    margin:0 !important;
    transform:none !important;
}

@media(max-width:700px){
    .tf125-profile-image{height:210px !important;padding:18px !important}
}


/* Paket 125c – lokale Foto-/Konturerkennung */
.tf125c-photo-compare{display:grid;grid-template-columns:1fr 1fr;min-height:220px}
.tf125c-photo-compare>div{position:relative;display:flex;align-items:center;justify-content:center;background:#f6f6f4;padding:28px 14px 12px}
.tf125c-photo-compare>div+div{border-left:1px solid #ddd}
.tf125c-photo-compare small{position:absolute;left:10px;top:8px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#777;font-weight:700}
.tf125c-photo-compare img{position:static!important;width:100%!important;height:190px!important;max-width:100%!important;max-height:190px!important;object-fit:contain!important;margin:0!important;transform:none!important}
.tf125c-photo-compare canvas{width:190px;height:190px;max-width:100%;background:#fff;border:1px solid #ddd}
.tf125c-photo-status{margin:0;padding:11px 120px 11px 14px;border-top:1px solid #ddd;background:#fff;font-size:13px;line-height:1.4;color:#555}
.tf125c-shape-score{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #ddd;border-bottom:1px solid #ddd;padding:9px 0;margin:0 0 12px}
.tf125c-shape-score small{font-size:12px;color:#666}.tf125c-shape-score strong{font-size:16px}
@media(max-width:700px){
  .tf125c-photo-compare{grid-template-columns:1fr}
  .tf125c-photo-compare>div+div{border-left:0;border-top:1px solid #ddd}
  .tf125c-photo-status{padding-right:14px}
}