/**
 * tpp-forms.css — Ersatz für CF7 + Material Design for CF7 + Conditional Fields.
 * Werte aus cf7md_options: primary #1e73be, Raleway, 16px, text .9 / hint .6
 *
 * Die genotchte Umrandung macht ein fieldset/legend statt der MDC-Bibliothek:
 * gleiche Optik, ~150 Zeilen statt 40 KB Fremdcode.
 */
:root{
  --tf-primary:#1e73be;
  --tf-primary-dark:#175d99;
  --tf-text:rgba(0,0,0,.9);
  --tf-hint:rgba(0,0,0,.6);
  --tf-outline:rgba(0,0,0,.38);
  --tf-outline-hover:rgba(0,0,0,.87);
  --tf-error:#b00020;
  --tf-ok:#1e7b34;
}

.tf{ font-family:Raleway,Helvetica,Arial,sans-serif; font-size:16px; color:var(--tf-text); }
.tf__grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:16px; }

.tf__cell--12{ grid-column:span 12; }
.tf__cell--8 { grid-column:span 8; }
.tf__cell--6 { grid-column:span 6; }
.tf__cell--4 { grid-column:span 4; }
@media (max-width:600px){                      /* mdc phone = 4 Spalten */
  .tf__cell--8,.tf__cell--6{ grid-column:span 12; }
  .tf__cell--4{ grid-column:span 6; }
}

.tf__legend{ grid-column:span 12; margin:6px 0 -4px; font-weight:600; font-size:15px; }

/* --- outlined text field --- */
.tf__field{ position:relative; }
.tf__field input,.tf__field select,.tf__field textarea{
  width:100%; height:56px; padding:0 16px;
  font:inherit; color:var(--tf-text);
  background:transparent; border:0; border-radius:4px;
  outline:none; position:relative; z-index:1;
}
.tf__field textarea{ height:auto; min-height:88px; padding:18px 16px; resize:vertical; }
.tf__field select{ appearance:none; cursor:pointer; padding-right:40px; }
.tf__field--select::after{
  content:""; position:absolute; right:16px; top:26px; z-index:2; pointer-events:none;
  border:5px solid transparent; border-top-color:var(--tf-hint);
}

.tf__outline{
  position:absolute; inset:-6px 0 0 0;
  margin:0; padding:0 8px;
  border:1px solid var(--tf-outline); border-radius:4px;
  pointer-events:none; min-inline-size:auto;
  transition:border-color .15s,border-width .15s;
}
.tf__field:hover .tf__outline{ border-color:var(--tf-outline-hover); }
.tf__field:focus-within .tf__outline{ border:2px solid var(--tf-primary); }

.tf__notch{
  width:auto; height:11px; padding:0; display:block;
  max-width:.01px; visibility:hidden; font-size:12px;
  transition:max-width .1s cubic-bezier(0,0,.2,1);
}
.tf__field.is-float .tf__notch{ max-width:100%; }
.tf__notch span{ display:inline-block; padding:0 5px; opacity:0; }

.tf__label{
  position:absolute; left:16px; top:18px; z-index:2;
  font-size:16px; color:var(--tf-hint); pointer-events:none;
  transform-origin:left top;
  transition:transform .15s cubic-bezier(.4,0,.2,1),color .15s;
}
.tf__field.is-float .tf__label{ transform:translateY(-25px) scale(.75); }
.tf__field:focus-within .tf__label{ color:var(--tf-primary); }

.tf__help{ margin:4px 16px 0; font-size:12px; color:var(--tf-hint); line-height:1.4; }
.tf__help--above{ margin:0 0 6px; }
.tf__err{ margin:4px 16px 0; font-size:12px; color:var(--tf-error); }
.tf__field.is-error .tf__outline{ border-color:var(--tf-error); }
.tf__field.is-error .tf__label{ color:var(--tf-error); }

/* --- Checkbox --- */
.tf__check{ grid-column:span 12; display:flex; gap:10px; align-items:flex-start; }
.tf__check input{
  appearance:none; flex:none; width:18px; height:18px; margin:3px 0 0;
  border:2px solid var(--tf-hint); border-radius:2px;
  cursor:pointer; position:relative; transition:.15s;
}
.tf__check input:checked{ background:var(--tf-primary); border-color:var(--tf-primary); }
.tf__check input:checked::after{
  content:""; position:absolute; left:4.5px; top:1px; width:4px; height:9px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.tf__check input:focus-visible{ outline:2px solid var(--tf-primary); outline-offset:3px; }
.tf__check label{ font-size:14px; line-height:1.5; cursor:pointer; }
.tf__check.is-error input{ border-color:var(--tf-error); }

/* --- Switch --- */
.tf__switch{ grid-column:span 12; margin-top:4px; }
.tf__switch-row{ display:flex; gap:12px; align-items:center; }
.tf__switch input{
  appearance:none; flex:none; cursor:pointer;
  width:36px; height:14px; border-radius:7px;
  background:rgba(0,0,0,.26); position:relative; transition:background .2s;
}
.tf__switch input::after{
  content:""; position:absolute; left:0; top:-3px; width:20px; height:20px;
  border-radius:50%; background:#fafafa; box-shadow:0 1px 3px rgba(0,0,0,.4);
  transition:transform .2s,background .2s;
}
.tf__switch input:checked{ background:rgba(30,115,190,.5); }
.tf__switch input:checked::after{ transform:translateX(16px); background:var(--tf-primary); }
.tf__switch input:focus-visible{ outline:2px solid var(--tf-primary); outline-offset:6px; }
.tf__switch label{ font-size:14px; cursor:pointer; }

/* --- Submit --- */
.tf__submit{ grid-column:span 12; }
.tf__btn{
  border:0; cursor:pointer; font:inherit; font-weight:600;
  background:var(--tf-primary); color:#fff;
  padding:0 24px; height:44px; border-radius:4px; letter-spacing:.4px;
  transition:background .15s;
}
.tf__btn:hover{ background:var(--tf-primary-dark); }
.tf__btn:focus-visible{ outline:2px solid var(--tf-primary); outline-offset:2px; }
.tf__btn.is-busy{ opacity:.6; cursor:progress; }

/* --- Datei --- */
.tf__file{ grid-column:span 12; }
.tf__file input[type=file]{ position:absolute; width:1px; height:1px; opacity:0; }
.tf__file-btn{
  display:block; cursor:pointer; width:100%;
  border:1px dashed var(--tf-outline); border-radius:4px;
  padding:14px 18px; color:var(--tf-hint); font-size:14px; text-align:center;
  transition:.15s;
}
.tf__file-btn:hover{ border-color:var(--tf-primary); color:var(--tf-primary); }
.tf__file input:focus-visible + .tf__file-btn,
.tf__file input:focus-visible ~ .tf__file-btn{ outline:2px solid var(--tf-primary); outline-offset:2px; }

/* --- [group Zusatz] --- */
.tf__group{
  grid-column:span 12; display:none;
  border-top:1px solid #e3e7eb; margin-top:8px; padding-top:4px;
}
.tf__group.is-open{ display:block; }
.tf__group h3{ font-size:17px; font-weight:600; margin:14px 0 6px; }
.tf__group > p{ font-size:13px; color:var(--tf-hint); margin:0 0 14px; line-height:1.5; }

/* --- Honigtopf. Kein display:none — manche Bots überspringen das. --- */
.tf__hp{
  position:absolute !important; left:-9999px !important;
  width:1px; height:1px; overflow:hidden;
}

/* --- Rückmeldung --- */
.tf__notice{ margin-top:14px; font-size:14px; }
.tf__notice:empty{ margin:0; }
.tf__notice.is-ok{ color:var(--tf-ok); font-weight:600; }
.tf__notice.is-error{ color:var(--tf-error); font-weight:600; }