/* Terminfindung-Tool — komplett unter #sipo-termin-app gescoped, damit
   Hello Elementor / globale Theme-Styles nichts überschreiben können.
   Nutzt die echten SIPO-Design-Tokens aus homepage.css (--si-*), die
   sitewide immer mitgeladen sind, statt einer eigenen Palette. */

#sipo-termin-app{
  --tf-ink:    var(--si-ink, #1a1a1a);
  --tf-muted:  var(--si-muted, #555);
  --tf-paper:  var(--si-paper, #f3f1eb);
  --tf-border: var(--si-border, #e0ddd8);
  --tf-pink:   var(--si-pink, #E5007E);
  --tf-font:   var(--si-font, 'Roboto', Arial, sans-serif);
  --tf-yes:#2F6F4E;
  --tf-yes-bg:#E3EEE6;
  --tf-maybe:#B98A2E;
  --tf-maybe-bg:#F5EBD8;
  --tf-no:#A5432F;
  --tf-no-bg:#F3E2DD;

  background:var(--tf-paper);
  color:var(--tf-ink);
  font-family:var(--tf-font);
  font-size:15px;
  line-height:1.6;
  padding:48px 20px 96px;
}
#sipo-termin-app *{ box-sizing:border-box; }
#sipo-termin-app .tf-wrap{ max-width:760px; margin:0 auto; }
#sipo-termin-app h1,
#sipo-termin-app h2,
#sipo-termin-app h3{
  font-family:var(--tf-font);
  font-weight:300;
  text-transform:uppercase;
  margin:0 0 8px;
  letter-spacing:-0.02em;
  color:var(--tf-ink);
}
#sipo-termin-app h1{ font-size:36px; line-height:1.1; }
#sipo-termin-app h2{ font-size:24px; }
#sipo-termin-app .tf-lede{ color:var(--tf-muted); margin:0 0 28px; max-width:52ch; font-size:15px; }
#sipo-termin-app .tf-rule{ border:none; border-top:1px solid var(--tf-border); margin:24px 0; }
#sipo-termin-app .tf-card{ background:#fff; border:1px solid var(--tf-border); padding:24px; }
#sipo-termin-app label{ display:block; font-weight:500; margin-bottom:6px; font-size:12.5px; letter-spacing:0.3px; color:var(--tf-muted); }
#sipo-termin-app input[type=text],
#sipo-termin-app input[type=date],
#sipo-termin-app input[type=time],
#sipo-termin-app textarea{
  width:100%;
  font-family:var(--tf-font);
  font-size:15px;
  padding:10px 12px;
  border:1px solid var(--tf-border);
  background:#fff;
  color:var(--tf-ink);
}
#sipo-termin-app input:focus,
#sipo-termin-app textarea:focus,
#sipo-termin-app button:focus-visible{
  outline:2px solid var(--tf-pink); outline-offset:1px;
}
#sipo-termin-app textarea{ resize:vertical; min-height:64px; }
#sipo-termin-app .tf-field{ margin-bottom:16px; }

/* ── Buttons — dieselbe Optik wie .sipo-btn-primary / .sipo-btn-secondary sitewide ── */
#sipo-termin-app button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--tf-font);
  font-weight:500;
  font-size:13px;
  letter-spacing:0.5px;
  padding:13px 28px;
  background:var(--si-btn-gradient, linear-gradient(90deg, #D12A29 0%, #EB3C91 100%));
  color:#fff;
  border:none;
  cursor:pointer;
  line-height:1;
  transition:filter 0.2s ease, transform 0.15s ease-out;
}
@media (hover:hover) and (pointer:fine){ #sipo-termin-app button:hover{ filter:brightness(1.1); } }
#sipo-termin-app button:active{ transform:scale(0.97); }
#sipo-termin-app button.tf-secondary{
  background:transparent; color:var(--tf-ink); border:1px solid var(--tf-ink);
}
@media (hover:hover) and (pointer:fine){ #sipo-termin-app button.tf-secondary:hover{ background:var(--tf-ink); color:#fff; filter:none; } }
#sipo-termin-app button.tf-ghost{
  background:transparent; border:1px solid var(--tf-border); color:var(--tf-muted);
  font-weight:400; padding:9px 16px;
}
@media (hover:hover) and (pointer:fine){ #sipo-termin-app button.tf-ghost:hover{ border-color:var(--tf-ink); color:var(--tf-ink); filter:none; } }
#sipo-termin-app button:disabled{ opacity:0.4; cursor:not-allowed; }
#sipo-termin-app .tf-btn-row{ display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; }

#sipo-termin-app .tf-home-choice{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:8px; }
@media (max-width:560px){ #sipo-termin-app .tf-home-choice{ grid-template-columns:1fr; } }
#sipo-termin-app .tf-choice-card{ border:1px solid var(--tf-border); background:#fff; padding:20px; }
#sipo-termin-app .tf-choice-card h3{ font-size:15px; text-transform:none; letter-spacing:0; font-weight:600; margin-bottom:6px; }
#sipo-termin-app .tf-choice-card p{ color:var(--tf-muted); font-size:13.5px; margin:0 0 14px; }

#sipo-termin-app .tf-date-row{ display:flex; align-items:flex-end; gap:10px; padding:12px 0; border-bottom:1px solid var(--tf-border); }
#sipo-termin-app .tf-date-row:last-of-type{ border-bottom:none; }
#sipo-termin-app .tf-date-row .tf-field{ margin-bottom:0; flex:1; }
#sipo-termin-app .tf-checkbox-line{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--tf-muted); white-space:nowrap; padding-bottom:9px; }
#sipo-termin-app .tf-checkbox-line input{ width:auto; }
#sipo-termin-app .tf-remove-btn{ background:none; border:none; color:var(--tf-muted); font-size:18px; padding:6px 4px; align-self:center; }
#sipo-termin-app .tf-remove-btn:hover{ color:var(--tf-no); }

#sipo-termin-app .tf-ticket{ border:1px solid var(--tf-border); background:#fff; padding:28px 24px; text-align:center; margin-top:20px; border-top:3px solid var(--tf-pink); }
#sipo-termin-app .tf-ticket-label{ font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--tf-pink); }
#sipo-termin-app .tf-code{ font-family:var(--tf-font); font-weight:600; font-size:22px; letter-spacing:0.06em; margin:8px 0 16px; word-break:break-all; }
#sipo-termin-app .tf-link-box{ display:flex; gap:8px; align-items:center; border:1px solid var(--tf-border); padding:8px 10px; background:var(--tf-paper); }
#sipo-termin-app .tf-link-box input{ border:none; padding:2px; background:transparent; font-family:var(--tf-font); font-size:12.5px; color:var(--tf-muted); }
#sipo-termin-app .tf-link-box input:focus{ outline:none; }

#sipo-termin-app table.tf-grid{ border-collapse:collapse; width:100%; margin-top:8px; }
#sipo-termin-app .tf-grid-scroll{ overflow-x:auto; border:1px solid var(--tf-border); }
#sipo-termin-app table.tf-grid th,
#sipo-termin-app table.tf-grid td{ border:1px solid var(--tf-border); padding:10px 12px; text-align:center; font-size:13.5px; white-space:nowrap; }
#sipo-termin-app table.tf-grid th{ background:var(--tf-paper); font-weight:600; }
#sipo-termin-app table.tf-grid td.tf-name-cell,
#sipo-termin-app table.tf-grid th.tf-name-th{ text-align:left; font-weight:500; background:var(--tf-paper); position:sticky; left:0; }
#sipo-termin-app table.tf-grid th .tf-date-label{ font-family:var(--tf-font); font-weight:600; font-size:13px; text-transform:uppercase; }
#sipo-termin-app table.tf-grid th .tf-date-sub{ display:block; color:var(--tf-muted); font-weight:400; font-size:11px; margin-top:2px; text-transform:none; }
#sipo-termin-app table.tf-grid th.tf-best{ background:#FCE6F1; }
#sipo-termin-app .tf-tri{ display:flex; gap:4px; justify-content:center; }
#sipo-termin-app .tf-tri-btn{ width:28px; height:28px; border:1px solid var(--tf-border); background:#fff; font-size:14px; cursor:pointer; padding:0; color:var(--tf-muted); line-height:1; font-weight:400; letter-spacing:0; }
#sipo-termin-app .tf-tri-btn:hover{ opacity:1; border-color:var(--tf-ink); color:var(--tf-ink); filter:none; transform:none; }
#sipo-termin-app .tf-tri-btn.yes.active{ background:var(--tf-yes-bg); border-color:var(--tf-yes); color:var(--tf-yes); }
#sipo-termin-app .tf-tri-btn.maybe.active{ background:var(--tf-maybe-bg); border-color:var(--tf-maybe); color:var(--tf-maybe); }
#sipo-termin-app .tf-tri-btn.no.active{ background:var(--tf-no-bg); border-color:var(--tf-no); color:var(--tf-no); }
#sipo-termin-app .tf-static-mark{ font-size:16px; }
#sipo-termin-app .tf-static-mark.yes{ color:var(--tf-yes); }
#sipo-termin-app .tf-static-mark.maybe{ color:var(--tf-maybe); }
#sipo-termin-app .tf-static-mark.no{ color:var(--tf-no); }
#sipo-termin-app .tf-static-mark.empty{ color:var(--tf-border); }
#sipo-termin-app .tf-count-row td{ font-weight:600; background:var(--tf-paper); }

#sipo-termin-app .tf-join-strip{ display:flex; gap:10px; align-items:flex-end; margin:20px 0; flex-wrap:wrap; }
#sipo-termin-app .tf-join-strip .tf-field{ flex:1; min-width:180px; margin-bottom:0; }

#sipo-termin-app .tf-top-badge{ display:inline-block; font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--tf-pink); background:#FCE6F1; border:1px solid var(--tf-pink); padding:2px 8px; margin-top:4px; }
#sipo-termin-app .tf-msg{ padding:10px 14px; border:1px solid var(--tf-border); background:#fff; font-size:13.5px; margin-bottom:16px; }
#sipo-termin-app .tf-msg.tf-error{ border-color:var(--tf-no); background:var(--tf-no-bg); color:var(--tf-no); }
#sipo-termin-app .tf-top-nav{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px; flex-wrap:wrap; gap:8px; }
#sipo-termin-app .tf-top-nav .tf-code-tag{ font-family:var(--tf-font); font-size:11px; color:var(--tf-muted); word-break:break-all; text-align:right; }