/* ==========================================================================
   Vertrag widerrufen (Widerrufsfunktion) — Page-Styles
   2026-10-27 — Neu. Stammt aus dem Block "NEU" des Prototyps widerruf.html
   (Niko-Freigabe 24.10.2026). Ergaenzt assets/css/legal.css (.ik-legal*), wird nur auf
   /vertrag-widerrufen/ geladen und muss NACH legal.css stehen.
   Klassen mit Vorsatz wf-, deutsche Namen. Keine Namen mit den Teilen stats, grid, actions
   oder section-card: style.css hat dafuer ab 768 px Sammelregeln mit !important.
   Variablen aus assets/brand/tokens.css (--ik-*).
   ========================================================================== */

[hidden] { display: none !important; }

/* Ansichten der Funktion */
.ik-legal__body .wf-ansicht h2 { margin-top: 32px; scroll-margin-top: 96px; }
.ik-legal__body .wf-ansicht h2:focus { outline: none; }
.ik-legal__body .wf-ansicht h2:focus-visible { outline: 1.5px solid var(--ik-red); outline-offset: 4px; }
.ik-legal__body .wf-ansicht h3 { margin-top: 32px; }
.ik-legal__body p.wf-schritt { margin: 32px 0 0; font-family: var(--ik-font-body); font-weight: 500; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ik-text-secondary); line-height: 1.4; }
.ik-legal__body .wf-schritt + h2 { margin-top: 8px; }
.ik-legal__body p.wf-abstand { margin-top: 24px; }
.wf-nowrap { white-space: nowrap; }

/* Hinweis ohne JavaScript */
.ik-legal__body .wf-ohnejs { margin: 0 0 32px; }
.ik-legal__body .wf-ohnejs p { margin: 0; }

/* Formular */
.wf-fehlerbox { margin: 0 0 32px; scroll-margin-top: 120px; padding: 16px 20px; background: var(--ik-gray); border: 1px solid var(--ik-red); font-size: 15px; line-height: 1.6; color: var(--ik-black); }
.wf-fehlerbox:focus { outline: none; }
.wf-fehlerbox:focus-visible { outline: 1.5px solid var(--ik-red); outline-offset: 2px; }
.ik-legal__body .wf-fehlerbox p { margin: 0; }
.ik-legal__body .wf-fehlerbox p + p { margin-top: 8px; }
.wf-fehlerbox--senden { margin: 24px 0 0; }
.wf-feld { margin: 0 0 28px; }
.wf-feld--schmal { max-width: 320px; }
.wf-label { display: block; margin: 0 0 4px; font-family: var(--ik-font-body); font-weight: 500; font-size: 15px; line-height: 1.4; color: var(--ik-black); }
.wf-hilfe { display: block; margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--ik-text-secondary); }
/* 2026-10-24 K3 W-B1: Feldregeln mit Vorsatz .ik-legal__body .wf-feld (0,3,0 und hoeher), damit sie die
   Ollie-Regel "input:not([type="submit"]):not([type="radio"]), select, textarea" (Ollie style.css Zeilen 92 bis 105,
   Spezifitaet 0,2,1) schlagen. Vorher: ".wf-eingabe" (0,1,0). Ollie setzt color, border-radius, border, padding,
   font-size, background-color und box-shadow, jede Eigenschaft steht hier mit Prototyp-Wert (box-shadow none). */
.ik-legal__body .wf-feld .wf-eingabe { display: block; width: 100%; min-height: 48px; padding: 12px 14px; font-family: var(--ik-font-body); font-weight: 400; font-size: 16px; line-height: 1.4; color: var(--ik-black); background: #FFFFFF; border: 1px solid #8A8782; border-radius: 0; box-shadow: none; scroll-margin-top: 120px; -webkit-appearance: none; appearance: none; }
.ik-legal__body .wf-feld input[type="date"].wf-eingabe { height: 48px; padding-top: 0; padding-bottom: 0; }
.ik-legal__body .wf-feld .wf-eingabe:hover { border-color: var(--ik-black); }
.ik-legal__body .wf-feld .wf-eingabe:focus-visible { outline: 1.5px solid var(--ik-red); outline-offset: 2px; }
.ik-legal__body .wf-feld .wf-eingabe[aria-invalid="true"] { border-color: var(--ik-red); border-width: 1.5px; }
.ik-legal__body .wf-feld textarea.wf-eingabe { min-height: 132px; resize: vertical; }
.ik-legal__body .wf-feld select.wf-eingabe { padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M0.5 0.75 4.5 4.75 8.5 0.75' fill='none' stroke='%230A0A0A'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.ik-legal__body p.wf-fehler { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--ik-red-dark); font-weight: 500; }

/* Der ganze Workshopname bleibt auf schmalen Bildschirmen sichtbar. */
.ik-legal__body .wf-workshopgruppe { min-inline-size: 0; margin: 0 0 28px; padding: 0; border: 0; }
.wf-workshopgruppe legend { padding: 0; }
.wf-workshopwahl { display: flex; align-items: flex-start; gap: 12px; min-height: 48px; margin: 0; padding: 14px; color: var(--ik-black); background: var(--ik-body-bg); border: 1px solid #8A8782; cursor: pointer; }
.wf-workshopwahl:hover { border-color: var(--ik-black); }
.wf-workshopwahl:focus-within { outline: 1.5px solid var(--ik-red); outline-offset: 2px; }
.wf-workshopwahl input[type="radio"] { flex: 0 0 20px; width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--ik-red); appearance: auto; }
.wf-workshopwahl input[aria-invalid="true"] { outline: 1.5px solid var(--ik-red); outline-offset: 3px; }
.wf-workshoptext { display: block; min-width: 0; font-family: var(--ik-font-body); font-weight: 400; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.wf-workshoptermin { display: block; margin-top: 4px; color: var(--ik-text-secondary); font-size: 14px; line-height: 1.5; }

/* Hinweiskasten nach dem Knopf (vorhandene Klasse, Abstand im Textkoerper nachgezogen) */
.ik-legal__body p.ik-legal__notice { margin: 40px 0 0; padding: 20px 24px; }

/* Schaltflaechen */
.wf-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin: 32px 0 0; }
/* 2026-10-24 K3 W-B3: width und padding zurueck auf die Werte von .ik-btn (components.css) und .ik-btn--filled.
   Ueberstimmt magic-link.css Zeilen 505 bis 508 (@media max-width 768px: ".ik-btn { width: 100%; padding: 14px 24px; }", 0,1,0).
   Unter 481 px setzt die Regel im Block max-width 480px weiter unten wieder volle Breite (gleiche Spezifitaet, spaeter). */
.wf-aktionen .ik-btn { min-height: 48px; justify-content: center; width: auto; padding: 10px 22px; }
.wf-aktionen .ik-btn--filled { padding: 11px 23px; }
/* 2026-10-24 Dirigent (Nachtest W2, NEU-1): Hover der Knoepfe "Vertrag widerrufen" und "Widerruf bestaetigen" (type=button)
   wie im Prototyp, Verlauf bleibt, nur der Halo aus components.css kommt dazu. Ueberstimmt magic-link.css ".ik-btn:hover"
   (0,2,0, background #0A0A0A per Kurzschreibweise, color #FFFFFF), das sonst Bild und Groesse des Verlaufs loescht. Hier 0,3,0.
   background-position steuert die Animation ik-liquid-flow, deshalb keine Kurzschreibweise. */
.wf-aktionen .ik-btn--filled:hover { background-color: transparent; background-image: var(--ik-red-metal-flow); background-size: 200% 200%; color: #FFFFFF; }
.wf-aktionen .ik-btn[disabled], .wf-aktionen .ik-btn[aria-busy="true"] { cursor: default; opacity: 0.55; animation: none; box-shadow: none; }

/* 2026-10-24 K3 W-B2: Absende-Knopf "Angaben pruefen" (button type=submit) wieder im Zustand von .ik-btn--filled.
   Ueberstimmt magic-link.css Zeilen 317 bis 340 ("button.ik-btn[type="submit"]" 0,2,1 und :hover 0,3,1, dort background,
   border, border-radius, color mit !important). Hier 0,3,1 und :hover 0,4,1 nur fuer genau diese Eigenschaften mit !important.
   Weil magic-link auch background-position per Kurzschreibweise mit !important festlegt (das wuerde die Animation
   ik-liquid-flow blockieren), laeuft der Verlauf ueber die Variable --wf-fluss: background-position: var(--wf-fluss) var(--wf-fluss),
   Werte 0% bis 100% in 4s wie ik-liquid-flow in components.css Zeilen 112 bis 115. Ohne @property bleibt der Verlauf statisch. */
@property --wf-fluss { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@keyframes wf-verlauf-fluss { 0%, 100% { --wf-fluss: 0%; } 50% { --wf-fluss: 100%; } }
.wf-aktionen button.ik-btn--filled[type="submit"] {
  background-color: transparent !important;
  background-image: var(--ik-red-metal-flow) !important;
  background-size: 200% 200% !important;
  background-position: var(--wf-fluss) var(--wf-fluss) !important;
  border: 0 !important;
  border-radius: var(--ik-radius-default) !important;
  color: #FFFFFF !important;
  animation: wf-verlauf-fluss 4s ease-in-out infinite;
}
.wf-aktionen button.ik-btn--filled[type="submit"]:hover {
  background-color: transparent !important;
  background-image: var(--ik-red-metal-flow) !important;
  background-size: 200% 200% !important;
  background-position: var(--wf-fluss) var(--wf-fluss) !important;
  border: 0 !important;
  color: #FFFFFF !important;
}
.wf-aktionen button.ik-btn--filled[type="submit"][disabled],
.wf-aktionen button.ik-btn--filled[type="submit"][aria-busy="true"] { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .wf-aktionen button.ik-btn--filled[type="submit"] { animation: none; --wf-fluss: 50%; }
}
.wf-linkknopf { min-height: 44px; padding: 0; font-family: var(--ik-font-body); font-weight: 400; font-size: 15px; color: var(--ik-red); background: none; border: 0; border-radius: 0; text-decoration: underline; cursor: pointer; }
.wf-linkknopf:hover { color: var(--ik-red-dark); }
.wf-linkknopf[disabled] { opacity: 0.55; cursor: default; }
@media (max-width: 480px) {
  .ik-legal__body .wf-feld .wf-eingabe { font-size: 18px; }
  .wf-workshoptext { font-size: 18px; }
  .wf-aktionen { flex-direction: column; align-items: stretch; gap: 8px; }
  .wf-aktionen .ik-btn { width: 100%; }
  .wf-linkknopf { align-self: center; }
}

/* Zusammenfassung der Angaben */
.wf-angaben { margin: 24px 0 0; border-top: 0.5px solid var(--ik-gray-border); }
.wf-angaben div { display: grid; grid-template-columns: 200px 1fr; gap: 4px 24px; padding: 14px 0; border-bottom: 0.5px solid var(--ik-gray-border); }
.wf-angaben dt { font-weight: 500; color: var(--ik-black); font-size: 15px; }
.wf-angaben dd { margin: 0; font-size: 16px; color: var(--ik-black); overflow-wrap: anywhere; white-space: pre-line; }
@media (max-width: 600px) { .wf-angaben div { grid-template-columns: 1fr; } }

/* Eingang */
.wf-eingang { margin: 24px 0 0; padding: 20px 24px; background: var(--ik-gray); border: 1px solid var(--ik-gray-border); font-size: 17px; line-height: 1.6; }
.ik-legal__body .wf-eingang p { margin: 0; }
.ik-legal__body .wf-eingang p + p { margin-top: 8px; }
.wf-eingang time { font-weight: 500; }