/* Trauerfall Checklist – 1:1 replica of codebase TrauerfallChecklist.
   Every rule is scoped under .tf-section and buttons are reset first, so the
   theme (Neve) / Elementor cannot bleed styles in and this cannot affect the
   rest of the site. */

.tf-section{font-family:'Source Sans 3',system-ui,sans-serif;color:#26303F;width:100%;display:flex;flex-direction:column;align-items:center;}
.tf-section *,.tf-section *::before,.tf-section *::after{box-sizing:border-box;}

/* neutralise theme button styling inside the widget */
.tf-section button{margin:0;padding:0;border:0;background:none;background-color:transparent;color:inherit;font:inherit;line-height:inherit;box-shadow:none;text-shadow:none;text-transform:none;letter-spacing:normal;-webkit-appearance:none;appearance:none;border-radius:0;}
.tf-section button:hover,.tf-section button:focus,.tf-section button:active,.tf-section button:focus-visible{box-shadow:none;outline:none;}

/* Task 3 – never let the theme/Elementor accent (red #990000) bleed onto the
   interactive checklist elements on hover/active/focus. Each element keeps its
   own neutral background; nothing else about the styling changes. */
.tf-section .tf-cl-sec-header:hover,
.tf-section .tf-cl-sec-header:focus,
.tf-section .tf-cl-sec-header:active,
.tf-section .tf-cl-sec-header:focus-visible{background-color:rgba(240,240,240,.5) !important;color:inherit !important;}

.tf-section .tf-cl-item:hover,
.tf-section .tf-cl-item:focus,
.tf-section .tf-cl-item:active,
.tf-section .tf-cl-item:focus-visible{background-color:rgba(240,240,240,.5) !important;border-color:rgba(102,102,102,.2) !important;color:inherit !important;}
.tf-section .tf-cl-item.is-checked,
.tf-section .tf-cl-item.is-checked:hover,
.tf-section .tf-cl-item.is-checked:focus,
.tf-section .tf-cl-item.is-checked:active,
.tf-section .tf-cl-item.is-checked:focus-visible{background-color:rgba(102,102,102,.1) !important;border-color:rgba(102,102,102,.3) !important;}

.tf-section .tf-btn-print:focus,
.tf-section .tf-btn-print:active,
.tf-section .tf-btn-print:focus-visible{background-color:#FAF8F3 !important;color:#26303F !important;}
.tf-section .tf-btn-print:hover{background-color:#666666 !important;color:#FAFAFA !important;}
.tf-section .tf-btn-cta:focus,
.tf-section .tf-btn-cta:active,
.tf-section .tf-btn-cta:focus-visible{background-color:#FAF8F3 !important;color:#26303F !important;}
.tf-section .tf-btn-cta:hover{background-color:#666666 !important;color:#FAFAFA !important;}

.tf-section .tf-intro{text-align:center;margin-left:auto;margin-right:auto;}
.tf-section .tf-eyebrow{display:block;color:#990000;font-weight:500;font-size:.875rem;text-transform:uppercase;letter-spacing:.05em;}
.tf-section .tf-heading{font-family:'Source Sans 3',system-ui,sans-serif;font-weight:600;line-height:1.25;color:#26303F;font-size:1.875rem;letter-spacing:-0.025em;margin:0;}
@media(min-width:768px){.tf-section .tf-heading{font-size:2.25rem;}}
.tf-section .tf-desc{font-size:1.125rem;line-height:1.625;color:#4D4D4D;margin:0;}
@media(min-width:768px){.tf-section .tf-desc{font-size:1.25rem;}}

/* layout variants */
.tf-section--ablauf .tf-intro{max-width:48rem;}
.tf-section--ablauf .tf-heading{margin-bottom:1rem;}
.tf-section--ablauf .tf-desc{margin-bottom:3rem;}
.tf-section--home .tf-intro{max-width:42rem;margin-bottom:3rem;}
.tf-section--home .tf-heading{margin-top:.5rem;margin-bottom:1.5rem;}
.tf-section .tf-card-wrap{width:100%;max-width:48rem;margin-left:auto;margin-right:auto;}
.tf-section--home .tf-card-wrap{margin-bottom:2rem;}
.tf-section .tf-cta{text-align:center;}

/* card (card-serene bg-card) */
.tf-section .tf-checklist{background:#FDFDFC;border-radius:12px;padding:24px;box-shadow:0 4px 20px -4px rgba(38,48,63,0.08);width:100%;}
@media(min-width:768px){.tf-section .tf-checklist{padding:32px;}}

.tf-section .tf-cl-head{display:flex;flex-direction:column;gap:1rem;margin-bottom:1.5rem;}
@media(min-width:640px){.tf-section .tf-cl-head{flex-direction:row;align-items:center;justify-content:space-between;}}
.tf-section .tf-cl-count{color:#4D4D4D;font-size:1.0625rem;line-height:1.7;margin:0;}

.tf-section .tf-btn-print{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:2.25rem;padding:0 .75rem;border:1px solid #E0E0E0;background-color:#FAF8F3;color:#26303F;border-radius:8px;font-size:.875rem;font-weight:500;font-family:inherit;cursor:pointer;transition:background-color .2s,color .2s;}
.tf-section .tf-btn-print:hover{background-color:#666666;color:#FAFAFA;}
.tf-section .tf-btn-print svg{width:16px;height:16px;}

.tf-section .tf-cl-progress{margin-bottom:2rem;}
.tf-section .tf-cl-progress-row{display:flex;align-items:center;justify-content:space-between;font-size:.875rem;margin-bottom:.5rem;}
.tf-section .tf-cl-progress-label{color:#4D4D4D;}
.tf-section .tf-cl-progress-pct{font-weight:600;color:#666666;}
.tf-section .tf-cl-bar{position:relative;height:.5rem;width:100%;overflow:hidden;border-radius:9999px;background:#F0F0F0;}
.tf-section .tf-cl-bar-fill{height:100%;width:0%;background:#990000;transition:width .3s ease;}

.tf-section .tf-cl-sections{display:flex;flex-direction:column;gap:1rem;width:100%;}
.tf-section .tf-cl-sec{border:1px solid #E0E0E0;border-radius:10px;overflow:hidden;opacity:0;transform:translateY(20px);}
.tf-section .tf-cl-sec.is-in{opacity:1;transform:none;transition:opacity .4s ease-out,transform .4s ease-out;}

.tf-section .tf-cl-sec-header{width:100%;display:flex;align-items:center;gap:.75rem;padding:1rem;background-color:rgba(240,240,240,.3);cursor:pointer;text-align:left;font-family:inherit;transition:background-color .2s;}
.tf-section .tf-cl-sec-header:hover{background-color:rgba(240,240,240,.5);}
.tf-section .tf-cl-badge{width:2rem;height:2rem;border-radius:9999px;background-color:rgba(102,102,102,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.tf-section .tf-cl-badge span{font-weight:700;color:#666666;font-size:.875rem;}
.tf-section .tf-cl-sec-titlewrap{flex:1;text-align:left;}
.tf-section .tf-cl-sec-title{font-size:1.125rem;font-weight:600;color:#26303F;margin:0;}
.tf-section .tf-cl-sec-meta{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:#4D4D4D;margin-top:0;flex-wrap:wrap;}
.tf-section .tf-cl-sec-meta svg{width:12px;height:12px;flex-shrink:0;}
.tf-section .tf-cl-sec-meta .tf-acc{color:#666666;}
.tf-section .tf-cl-chevron{width:20px;height:20px;color:#4D4D4D;transition:transform .2s;flex-shrink:0;}
.tf-section .tf-cl-sec.is-open .tf-cl-chevron{transform:rotate(180deg);}

.tf-section .tf-cl-items-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .2s ease;}
.tf-section .tf-cl-sec.is-open .tf-cl-items-wrap{grid-template-rows:1fr;}
.tf-section .tf-cl-items-inner{overflow:hidden;min-height:0;}
.tf-section .tf-cl-items{display:flex;flex-direction:column;gap:.5rem;padding:1rem;padding-top:.5rem;}

.tf-section .tf-cl-item{width:100%;display:flex;align-items:flex-start;gap:.75rem;padding:.75rem;border-radius:10px;text-align:left;border:1px solid transparent;background-color:rgba(240,240,240,.5);cursor:pointer;font-family:inherit;transition:background-color .2s,border-color .2s;}
.tf-section .tf-cl-item:hover{border-color:rgba(102,102,102,.2);}
.tf-section .tf-cl-item.is-checked{background-color:rgba(102,102,102,.1);border-color:rgba(102,102,102,.3);}
.tf-section .tf-cl-check{width:1.25rem;height:1.25rem;border-radius:4px;border:2px solid rgba(77,77,77,.4);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:.125rem;transition:background-color .2s,border-color .2s;}
.tf-section .tf-cl-item.is-checked .tf-cl-check{background-color:#666666;border-color:#666666;}
.tf-section .tf-cl-check svg{width:12px;height:12px;color:#FAFAFA;display:none;}
.tf-section .tf-cl-item.is-checked .tf-cl-check svg{display:block;}
.tf-section .tf-cl-item-text{line-height:1.625;color:#26303F;transition:color .2s;}
.tf-section .tf-cl-item.is-checked .tf-cl-item-text{color:#4D4D4D;text-decoration:line-through;}

.tf-section .tf-cl-footer{margin-top:2rem;padding-top:1.5rem;border-top:1px solid #E0E0E0;}
.tf-section .tf-cl-footer p{font-size:.875rem;color:#4D4D4D;text-align:center;margin:0;line-height:1.7;}
.tf-section .tf-cl-footer a{color:#666666;font-weight:500;text-decoration:none;}
.tf-section .tf-cl-footer a:hover{text-decoration:underline;}

.tf-section .tf-btn-cta{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:2.75rem;padding:0 2rem;border:1px solid #E0E0E0;background-color:#FAF8F3;color:#26303F;border-radius:8px;font-size:.875rem;font-weight:500;text-decoration:none;font-family:inherit;transition:background-color .2s,color .2s;}
.tf-section .tf-btn-cta:hover{background-color:#666666;color:#FAFAFA;}
.tf-section .tf-btn-cta svg{width:16px;height:16px;}

/* print ONLY the checklist section.
   Instead of visibility:hidden (which leaves empty layout boxes behind and
   produces blank pages), the JS marks every ancestor of .tf-section with
   .tf-print-chain and every off-path sibling with .tf-print-hidden. Hidden
   nodes are display:none so they take up NO space -> no blank pages. */
@media print{
  /* everything not on the path to the checklist is fully removed */
  body.tf-printing .tf-print-hidden{display:none !important;}

  /* the ancestor chain is stripped of its own chrome so the checklist prints
     from the top of the page with no offset / leftover height */
  body.tf-printing .tf-print-chain{
    display:block !important;position:static !important;float:none !important;
    margin:0 !important;padding:0 !important;border:0 !important;
    box-shadow:none !important;background:none !important;
    width:auto !important;max-width:none !important;height:auto !important;
    min-height:0 !important;max-height:none !important;overflow:visible !important;
  }
  body.tf-printing{height:auto !important;min-height:0 !important;}

  /* hide interactive-only chrome */
  body.tf-printing .tf-print-hide{display:none !important;}
  body.tf-printing .tf-section .tf-cl-chevron{display:none !important;}

  /* expand EVERY checklist section for print, regardless of open state,
     without touching the DOM (frontend state is unchanged afterwards) */
  body.tf-printing .tf-section .tf-cl-items-wrap{grid-template-rows:1fr !important;}
  body.tf-printing .tf-section .tf-cl-items-inner{overflow:visible !important;min-height:0 !important;}
  body.tf-printing .tf-section .tf-cl-sec{opacity:1 !important;transform:none !important;}

  /* ---- print fidelity: keep borders & fills 1:1 with the screen ----
     Browsers drop background fills and lighten/omit light-grey borders when
     "Background graphics" is off. Forcing exact color adjustment makes every
     border and fill inside the widget print exactly as on screen. */
  body.tf-printing .tf-section,
  body.tf-printing .tf-section *{
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
    color-adjust:exact !important;
  }

  /* the card's outer edge is a box-shadow on screen, and shadows never print;
     swap it for an equivalent 1px border so the printed card keeps its frame */
  body.tf-printing .tf-section .tf-checklist{
    border:1px solid #E0E0E0 !important;box-shadow:none !important;
  }

  /* re-affirm the structural grey borders so they never print faint/missing */
  body.tf-printing .tf-section .tf-cl-sec{border:1px solid #E0E0E0 !important;}
  body.tf-printing .tf-section .tf-cl-footer{border-top:1px solid #E0E0E0 !important;}
  body.tf-printing .tf-section .tf-cl-item.is-checked{border:1px solid rgba(102,102,102,.3) !important;}
  body.tf-printing .tf-section .tf-cl-check{border:2px solid rgba(77,77,77,.4) !important;}
}