/*
 * Interaktive Bausteine fuer TerraCom-Blogartikel.
 * Wird nur auf Beitraegen geladen, die eine .tc-rag-Box enthalten.
 *
 * Achtung: Astra faerbt alle <button> global im Magenta der Website ein.
 * Die Widget-Buttons muessen sich dagegen behaupten, sonst verschwindet die
 * Beschriftung (magenta auf magenta). Daher die erhoehte Spezifitaet und das
 * !important auf den kritischen Eigenschaften.
 */
.tc-rag {
  --tc-pink: #e6007e;
  --tc-ink: #151616;
  --tc-ink2: #232529;
  --tc-grey: #65696F;
  --tc-line: #E3E1E1;
  --tc-soft: #F6F6F6;
  --tc-soft2: #F1F0F0;
  font-family: 'Roboto', sans-serif;
  color: var(--tc-ink);
  font-size: 17px;
  line-height: 1.65;
}
.tc-rag * { box-sizing: border-box; }
.tc-rag h3, .tc-rag h4 {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 600; line-height: 1.2; margin: 0 0 .5em;
}
.tc-rag--box {
  border: 1px solid var(--tc-line); border-radius: 10px; background: #fff;
  padding: 28px; margin: 38px 0;
}
.tc-rag--label {
  font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em; font-size: 14px;
  color: var(--tc-pink); margin-bottom: 6px;
}
.tc-rag--hint { font-size: 15px; color: var(--tc-grey); margin: 0 0 20px; }
.tc-rag--titel { font-size: 26px; }

/* --- Theme-Reset fuer Buttons --- */
.tc-rag button {
  -webkit-appearance: none !important; appearance: none !important;
  background-image: none !important; box-shadow: none !important;
  text-transform: none !important; letter-spacing: normal !important;
  text-shadow: none !important; width: auto !important;
  min-height: 0 !important; line-height: 1.4 !important; font-weight: 400 !important;
}
.tc-rag .tc-rag--btn {
  font-family: 'Roboto', sans-serif !important; font-size: 15px !important;
  border: 1px solid var(--tc-line) !important; background: var(--tc-soft) !important;
  color: var(--tc-ink2) !important; border-radius: 7px !important;
  padding: 10px 16px !important; cursor: pointer; transition: .15s;
}
.tc-rag .tc-rag--btn:hover { border-color: var(--tc-pink) !important; color: var(--tc-pink) !important; }
.tc-rag .tc-rag--btn:focus-visible { outline: 2px solid var(--tc-pink); outline-offset: 2px; }
.tc-rag .tc-rag--btn.is-on {
  background: var(--tc-pink) !important; border-color: var(--tc-pink) !important; color: #fff !important;
}

/* --- Pipeline --- */
.tc-pipe { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.tc-rag .tc-pipe button {
  flex: 1 1 140px; text-align: left !important; padding: 14px !important;
  border: 1px solid var(--tc-line) !important; border-radius: 8px !important;
  background: var(--tc-soft) !important; cursor: pointer; transition: .15s;
  font-family: 'Roboto', sans-serif !important; color: var(--tc-ink) !important; display: block;
}
.tc-rag .tc-pipe button:hover { border-color: var(--tc-pink) !important; }
.tc-rag .tc-pipe button:focus-visible { outline: 2px solid var(--tc-pink); outline-offset: 2px; }
.tc-rag .tc-pipe button[aria-selected="true"] {
  background: var(--tc-ink2) !important; border-color: var(--tc-ink2) !important;
}
.tc-rag .tc-pipe button .tc-pipe-n { color: var(--tc-pink) !important; }
.tc-rag .tc-pipe button .tc-pipe-t { color: var(--tc-ink) !important; }
.tc-rag .tc-pipe button[aria-selected="true"] .tc-pipe-t { color: #fff !important; }
.tc-pipe-n {
  display: block; font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 600;
  font-size: 13px; letter-spacing: .08em; margin-bottom: 3px;
}
.tc-pipe-t {
  display: block; font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 600; font-size: 19px;
}
.tc-pipe-panel {
  border-left: 3px solid var(--tc-pink); background: var(--tc-soft);
  padding: 20px 22px; border-radius: 0 8px 8px 0; min-height: 120px;
}
.tc-pipe-panel p { margin: 0 0 10px; }
.tc-pipe-panel p:last-child { margin: 0; }
.tc-pipe-panel .tc-warn {
  font-size: 15px; color: var(--tc-ink2); border-top: 1px solid var(--tc-line);
  padding-top: 10px; margin-top: 14px;
}

/* --- Regler --- */
.tc-ctrl { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; margin-bottom: 20px; }
.tc-ctrl label { font-size: 15px; font-weight: 500; display: block; margin-bottom: 6px; }
.tc-ctrl input[type=range], .tc-calc-grid input[type=range] { width: 230px; accent-color: #e6007e; }

/* --- Chunking --- */
.tc-chunks {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 340px; overflow-y: auto; padding-right: 6px;
}
.tc-chunk {
  padding: 11px 14px; border-radius: 7px; font-size: 15px; line-height: 1.5;
  border-left: 3px solid var(--tc-pink); background: var(--tc-soft); color: var(--tc-ink);
}
.tc-chunk:nth-child(even) { background: var(--tc-soft2); border-left-color: var(--tc-ink2); }
.tc-chunk b {
  font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 600; font-size: 13px;
  letter-spacing: .06em; color: var(--tc-grey); display: block; margin-bottom: 3px;
}
.tc-chunk .tc-ov { background: rgba(230, 0, 126, .13); border-radius: 3px; padding: 0 2px; }
.tc-verdict {
  margin-top: 18px; padding: 14px 16px; border-radius: 8px; font-size: 15px;
  background: var(--tc-soft); border-left: 3px solid var(--tc-grey); color: var(--tc-ink);
}
.tc-verdict.good { border-left-color: #2e8b57; }
.tc-verdict.bad { border-left-color: var(--tc-pink); }

/* --- Entscheidungs-Check --- */
.tc-q { margin-bottom: 20px; }
.tc-q p { font-weight: 500; margin: 0 0 10px; }
.tc-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.tc-result { margin-top: 8px; padding: 20px 22px; border-radius: 8px; background: var(--tc-ink2); color: #fff; }
.tc-result h4 { color: #fff; font-size: 22px; }
.tc-result p { margin: 0; color: #DCDCDC; font-size: 16px; }
.tc-result .tc-rec {
  color: var(--tc-pink); font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; font-size: 13px; display: block; margin-bottom: 4px;
}

/* --- Kontext-Rechner --- */
.tc-calc-grid { display: flex; flex-wrap: wrap; gap: 26px; margin-bottom: 24px; }
.tc-calc-grid label { font-size: 15px; font-weight: 500; display: block; margin-bottom: 6px; }
.tc-out { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tc-out div { padding: 20px; border-radius: 8px; background: var(--tc-soft); }
.tc-out div.hi { background: var(--tc-ink2); }
.tc-out span { display: block; font-size: 14px; color: var(--tc-grey); margin-bottom: 6px; }
.tc-out div.hi span { color: #9A9A9A; }
.tc-out strong {
  font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 600; font-size: 40px;
  line-height: 1; color: var(--tc-ink); font-variant-numeric: tabular-nums;
}
.tc-out div.hi strong { color: var(--tc-pink); }
.tc-out small { display: block; font-size: 13px; color: var(--tc-grey); margin-top: 8px; line-height: 1.45; }
.tc-out div.hi small { color: #9A9A9A; }
.tc-warnfarbe { color: var(--tc-pink); }
.tc-fuss { font-size: 14px; color: var(--tc-grey); margin: 16px 0 0; }

/* --- FAQ --- */
.tc-faq details { border-bottom: 1px solid var(--tc-line); padding: 2px 0; }
.tc-faq summary {
  cursor: pointer; padding: 16px 0; font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 600; font-size: 21px; list-style: none;
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
}
.tc-faq summary::-webkit-details-marker { display: none; }
.tc-faq summary::after { content: "+"; color: var(--tc-pink); font-size: 26px; line-height: 1; flex: 0 0 auto; }
.tc-faq details[open] summary::after { content: "\2013"; }
.tc-faq summary:focus-visible { outline: 2px solid var(--tc-pink); outline-offset: 3px; }
.tc-faq details p { margin: 0 0 18px; color: var(--tc-ink2); }

/* --- Abschluss-Kasten --- */
.tc-cta { background: var(--tc-ink2); color: #fff; border-radius: 10px; padding: 34px; margin: 42px 0; }
.tc-cta h3 { color: #fff; font-size: 28px; }
.tc-cta p { color: #D6D6D6; margin: 0 0 20px; }
.tc-cta a {
  display: inline-block; background: var(--tc-pink); color: #fff; text-decoration: none;
  padding: 13px 26px; border-radius: 7px; font-weight: 500;
}
.tc-cta a:hover { background: #c40069; color: #fff; }

@media (max-width: 600px) {
  .tc-rag--box { padding: 20px; }
  .tc-out { grid-template-columns: 1fr; }
  .tc-ctrl input[type=range], .tc-calc-grid input[type=range] { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .tc-rag * { transition: none !important; }
}

/* --------------------------------------------------- Links im Beitragstext
 * Das Theme faerbt Links im Artikel weiss (weiss auf weiss = unsichtbar).
 * Denselben Fehler hatte schon der Beitragstitel in der Uebersicht.
 * Der Knopf im Abschluss-Kasten (.tc-cta a) ist ausgenommen: der steht
 * bereits weiss auf dunklem Grund und ist dort richtig.
 */
.entry-content p a,
.entry-content li a,
.entry-content figcaption a,
.tc-faq a {
  color: #e6007e !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.entry-content p a:hover,
.entry-content li a:hover,
.tc-faq a:hover {
  color: #c40069 !important;
  text-decoration-thickness: 2px;
}
.entry-content p a:focus-visible,
.entry-content li a:focus-visible {
  outline: 2px solid #e6007e;
  outline-offset: 2px;
}
.tc-cta a,
.tc-cta a:hover {
  text-decoration: none;
  color: #fff !important;
}