/* Online-Formular Praxiskarten – Optik angelehnt an die Praxiskarten des Digitalen Praxisbuchs */
:root{
  --thema:#D9AA55; --schwerpunkt:#6E9DB3; --strategie:#72A58D;
  --methode:#9B88B5; --projekt:#C98268; --einheit:#347F83;
  --text:#20333B; --muted:#617279; --flaeche:#F4F7F6; --linie:#dde3e1; --weiss:#ffffff;
  --einheit-hell:#e6f0f0; --methode-hell:#f1edf6; --methode-dunkel:#5e4c7a;
  --blick-hell:#eaf1f5; --blick-rand:#c7dbe5; --blick-dunkel:#3f6f86;
  --fehler:#b3261e; --fehler-hell:#fdecea;
  --fokus:#347F83;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.ff-seite{margin:0; background:var(--flaeche); color:var(--text);
  font-family:'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; font-size:1.0625rem; line-height:1.55}
.ff, .ff *{font-family:'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif}
.ff h2,.ff h3,.ff-haupt h1{line-height:1.2; margin:0}
.ff p{margin:0 0 .6em}
.ff a{color:var(--methode-dunkel)}

/* ---------- Seitenrahmen (Einreichungsseite) ---------- */
.ff-marke{background:var(--weiss); border-bottom:1px solid var(--linie)}
.ff-marke-innen{max-width:980px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.ff-farbband{display:inline-flex; gap:3px}
.ff-farbband i{width:8px; height:22px; border-radius:3px; background:var(--c)}
.ff-marke-name{font-size:1rem; color:var(--muted)}
.ff-marke-name b{color:var(--text)}
.ff-marke-tag{margin-left:auto; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--methode-dunkel); background:var(--methode-hell); border-radius:999px; padding:2px 10px}
.ff-haupt{max-width:980px; margin:0 auto; padding:24px 16px 56px}
.ff-held{background:var(--weiss); border-radius:14px; border-top:10px solid var(--methode); padding:22px 26px 24px;
  box-shadow:0 1px 3px rgba(32,51,59,.08),0 6px 18px rgba(32,51,59,.06)}
.ff-format{display:inline-flex; align-items:center; gap:10px; font-size:.82rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--methode-dunkel); margin-bottom:.5rem}
.ff-badge{display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--methode); color:#fff; font-size:.7rem}
.ff-haupt h1{font-weight:800; font-size:clamp(1.6rem,4.5vw,2.3rem); letter-spacing:-.015em; margin:0 0 .4rem}
.ff-lead{font-size:1.12rem; color:var(--muted); margin:.3rem 0 1rem}
.ff-weg{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.ff-weg li{display:flex; gap:10px; align-items:flex-start; background:var(--flaeche); border-radius:12px; padding:12px 14px; font-size:.95rem}
.ff-weg-nr{flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--einheit); color:#fff; font-weight:800}
.ff-fuss{margin-top:30px; font-size:.86rem; color:var(--muted)}

/* ---------- Werkzeugleiste, Fehler ---------- */
.ff-leiste{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin:22px 0 0; padding:14px 18px;
  background:var(--weiss); border:1px dashed var(--thema); border-radius:12px}
.ff-leiste-text{margin:0 !important; font-size:.92rem; color:var(--muted); flex:1 1 280px}
.ff-fehler{margin:22px 0 0; background:var(--fehler-hell); border:1px solid #f1b7b2; border-left:6px solid var(--fehler);
  border-radius:12px; padding:14px 18px; color:#5a1612}
.ff-fehler h2{font-size:1.05rem; margin:0 0 .4rem; color:var(--fehler)}
.ff-fehler ul{margin:0; padding-left:1.2em}

/* ---------- Knöpfe ---------- */
.ff-knopf{display:inline-flex; align-items:center; gap:8px; font:inherit; font-weight:700; border-radius:999px; cursor:pointer;
  padding:10px 20px; border:2px solid transparent; line-height:1.2}
.ff-knopf-haupt{background:var(--einheit); color:#fff; font-size:1.1rem; padding:14px 30px; box-shadow:0 4px 12px rgba(52,127,131,.25)}
.ff-knopf-haupt:hover{background:#2a6a6d}
.ff-knopf-zweit{background:#fbf3e2; color:#7a5a1c; border-color:var(--thema)}
.ff-knopf-zweit:hover{background:#f6e6c3}
.ff button:focus-visible, .ff input:focus-visible, .ff textarea:focus-visible, .ff select:focus-visible, .ff summary:focus-visible{
  outline:3px solid var(--fokus); outline-offset:2px}

/* ---------- Abschnitte (Karten mit farbigem Rand) ---------- */
.ff-abschnitt{margin-top:22px; background:var(--weiss); border:1px solid var(--linie); border-top:8px solid var(--ac);
  border-radius:14px; padding:20px 24px 22px; box-shadow:0 1px 3px rgba(32,51,59,.05)}
.ff-abschnitt > h2{font-weight:800; font-size:1.3rem; margin:0 0 .8rem; display:flex; align-items:center; gap:10px}
.ff-abschnitt > h2::before{content:""; width:14px; height:14px; border-radius:50%; background:var(--ac); flex:none}
.ff-intro{color:var(--muted); margin-top:-.3rem !important}
.ff-redaktion{background:var(--einheit-hell); border-style:dashed; border-top-style:solid}
.ff-redaktion > h2{color:var(--einheit)}

/* ---------- Felder ---------- */
.ff-feld{margin:0 0 16px; min-width:0; border:0; padding:0}
.ff-feld:last-child{margin-bottom:0}
.ff-label-zeile{display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; margin-bottom:5px; padding:0}
.ff-label-zeile label, .ff-label-zeile > span:first-child, .ff-label-text{font-weight:700; font-size:.98rem}
.ff-zusatz{font-size:.78rem; color:var(--muted); background:var(--flaeche); border:1px solid var(--linie); border-radius:999px; padding:0 8px}
.ff-hilfe{font-size:.88rem; color:var(--muted); margin:-2px 0 6px !important}
.ff input[type=text], .ff input[type=email], .ff textarea, .ff select{
  width:100%; font:inherit; font-size:1rem; color:var(--text); background:#fbfcfc; border:1.5px solid #cfd8d5;
  border-radius:10px; padding:9px 12px}
.ff textarea{resize:vertical; min-height:3.2em; line-height:1.5}
.ff input:hover, .ff textarea:hover, .ff select:hover{border-color:#aebdb8}
.ff input:focus, .ff textarea:focus, .ff select:focus{background:#fff; border-color:var(--fokus)}
.ff-gross input{font-size:1.25rem !important; font-weight:700}
.ff-hinweisfeld textarea{background:var(--methode-hell); border-color:#d9d0e6}
.ff-blickfeld textarea{background:var(--blick-hell); border-color:var(--blick-rand)}
.ff-sagen-feld textarea{background:var(--methode-hell); border-left:4px solid var(--methode); color:var(--methode-dunkel); font-weight:500}
.ff-zwei{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px}
.ff-drei{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 16px}
.ff-zwei-oben{align-items:start}

/* „i“-Knopf */
.ff-i{display:inline-grid; place-items:center; width:24px; height:24px; padding:0; border-radius:50%; cursor:pointer;
  background:var(--weiss); color:var(--einheit); border:2px solid var(--einheit); font:italic 700 .85rem Georgia,'Times New Roman',serif; line-height:1}
.ff-i:hover{background:var(--einheit); color:#fff}
.ff-i-deko{display:inline-grid; vertical-align:middle; cursor:default; width:20px; height:20px; font-size:.75rem}

/* Bausteine zum Zusammenklicken */
.ff-bausteine{margin-top:8px; background:var(--flaeche); border:1px solid var(--linie); border-radius:10px; padding:8px 12px}
.ff-bausteine summary{cursor:pointer; font-weight:700; font-size:.92rem; color:var(--blick-dunkel); padding:2px 0}
.ff-bausteine-innen{margin-top:6px; display:grid; gap:8px}
.ff-gruppe{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.ff-gruppe-name{flex:0 0 100%; font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:var(--muted)}
.ff-baustein{font:inherit; font-size:.88rem; cursor:pointer; border-radius:999px; padding:3px 12px 3px 8px; line-height:1.4;
  background:var(--weiss); color:var(--text); border:1.5px solid var(--blick-rand)}
.ff-baustein::before{content:"+ "; font-weight:700; color:var(--blick-dunkel)}
.ff-baustein:hover{border-color:var(--schwerpunkt)}
.ff-baustein[aria-pressed=true]{background:var(--blick-hell); background:color-mix(in srgb, var(--schwerpunkt) 28%, #fff); border-color:var(--schwerpunkt); color:var(--text); font-weight:600}
.ff-baustein[aria-pressed=true]::before{content:"✓ "; color:var(--blick-dunkel)}

/* ---------- So geht's ---------- */
.ff-merke{display:flex; gap:12px; align-items:flex-start; background:#fbf3e2; border:1px solid #efd9a8; border-left:6px solid var(--thema);
  border-radius:12px; padding:12px 16px; margin:0 0 16px; font-size:.98rem}
.ff-merke-icon{font-size:1.3rem; line-height:1.2}
.ff-etappen{display:grid; gap:14px}
.ff-etappe{position:relative; background:var(--weiss); border:1px solid var(--linie); border-left:8px solid var(--methode);
  border-radius:12px; padding:14px 18px 16px 18px}
.ff-etappe-kopf{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.ff-etappe-kopf h3{font-size:1.08rem; color:var(--methode-dunkel); flex:1}
.ff-nr{display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--methode); color:#fff; font-weight:800; font-size:1.05rem; flex:none}
.ff-entfernen{font:inherit; font-size:.85rem; cursor:pointer; background:none; border:1px solid var(--linie); color:var(--muted);
  border-radius:999px; padding:3px 10px}
.ff-entfernen:hover{border-color:var(--fehler); color:var(--fehler)}
.ff-plus{display:flex; align-items:center; justify-content:center; gap:10px; width:100%; margin-top:12px; font:inherit; font-weight:700;
  color:var(--methode-dunkel); background:var(--methode-hell); border:2px dashed var(--methode); border-radius:12px; padding:12px; cursor:pointer}
.ff-plus:hover{background:#e7e0f0}
.ff-plus-icon{display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--methode); color:#fff; font-size:1.4rem; line-height:1}
.ff-neu{animation:ff-auf .35s ease-out}
@keyframes ff-auf{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}

/* Zuordnung */
.ff-zuordnung{margin-top:22px; padding-top:16px; border-top:1px solid var(--linie)}
.ff-zuordnung > h3{font-size:1.1rem; margin:0 0 .3rem}
.ff-punkt{display:inline-block; width:11px; height:11px; border-radius:50%; background:var(--c); vertical-align:baseline}
.ff-reihe select{border-left:6px solid var(--projekt)}
.ff-andere{margin-top:8px}
.ff-andere label{display:block; font-size:.9rem; font-weight:600; margin-bottom:3px}
.ff-chipfeld legend{float:left; width:100%}
.ff-chipfeld legend + *{clear:both}
.ff-chips{display:flex; flex-wrap:wrap; gap:8px}
.ff-chip{position:relative; cursor:pointer}
.ff-chip input{position:absolute; opacity:0; width:1px; height:1px; margin:0}
.ff-chip span{display:inline-flex; align-items:center; gap:7px; font-size:.92rem; border-radius:999px; padding:5px 13px 5px 7px;
  background:var(--flaeche); border:1.5px solid var(--linie); transition:background .15s, border-color .15s}
.ff-chip span::before{content:""; flex:none; width:14px; height:14px; border-radius:50%; border:2px solid var(--c); background:#fff}
.ff-chip:hover span{border-color:var(--c)}
.ff-chip input:checked + span{background:#fff; background:color-mix(in srgb, var(--c) 28%, #fff); border-color:var(--c); color:var(--text); font-weight:600}
.ff-chip input:checked + span::before{content:"✓"; display:grid; place-items:center; font-size:.62rem; color:#fff; background:var(--c); border-color:var(--c)}
.ff-chip input:focus-visible + span{outline:3px solid var(--fokus); outline-offset:2px}

/* ---------- Sprache ins Spiel bringen ---------- */
.ff-stufen{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.ff-stufe{background:var(--weiss); border:1px solid var(--linie); border-top:6px solid var(--strategie); border-radius:12px; padding:12px 14px}
.ff-stufe label{color:#3e7660}
.ff-balken{display:flex; gap:4px; margin-bottom:4px}
.ff-balken i{width:26px; height:6px; border-radius:3px; background:var(--linie)}
.ff-balken i.an{background:var(--strategie)}
.ff-stufenwort{display:block; font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:var(--muted); margin-bottom:6px}

/* ---------- Kontakt / Datenschutz / Absenden ---------- */
.ff-datenschutz{display:flex; align-items:flex-start; gap:10px; margin-top:8px; background:var(--flaeche); border-radius:10px; padding:12px 14px}
.ff-datenschutz input{width:22px; height:22px; flex:none; margin-top:2px; accent-color:var(--einheit)}
.ff-datenschutz label{font-size:.95rem}
.ff-absenden{margin-top:26px; text-align:center}
.ff-absenden .ff-hilfe{margin-top:10px !important}

/* Redaktion: Nutzungszeilen */
.ff-nutzungen{display:grid; gap:12px}
.ff-nutzung{background:var(--weiss); border:1px solid var(--linie); border-top:5px solid var(--einheit); border-radius:12px; padding:12px 14px}
.ff-nutzung:first-child{background:#f3f9f9}
.ff-redaktion .ff-plus{color:var(--einheit); background:var(--weiss); border-color:var(--einheit)}
.ff-redaktion .ff-plus-icon{background:var(--einheit)}

/* ---------- Beispiel-Dialog ---------- */
.ff-dialog{width:min(640px, calc(100vw - 32px)); max-height:calc(100vh - 48px); border:0; border-radius:14px; padding:0;
  box-shadow:0 20px 60px rgba(32,51,59,.35); color:var(--text)}
.ff-dialog::backdrop{background:rgba(32,51,59,.45)}
.ff-dialog-kopf{position:sticky; top:0; display:flex; align-items:center; gap:10px; background:var(--einheit); color:#fff; padding:12px 16px}
.ff-dialog-kopf h2{flex:1; font-size:1.1rem; margin:0}
.ff-dialog-zu{font:inherit; font-size:1.1rem; background:rgba(255,255,255,.15); color:#fff; border:0; border-radius:50%; width:34px; height:34px; cursor:pointer}
.ff-dialog-zu:focus-visible{outline:3px solid #fff}
.ff-dialog-inhalt{padding:14px 18px 18px}
.ff-dialog-hinweis{font-size:.92rem; color:var(--muted)}
.ff-bsp{margin:12px 0 0}
.ff-bsp-quelle{font-size:.76rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:var(--methode-dunkel); margin-bottom:4px}
.ff-bsp-text{white-space:pre-line; background:var(--methode-hell); border-left:4px solid var(--methode); border-radius:0 10px 10px 0; padding:10px 14px; margin:0}

/* ---------- Mobil ---------- */
@media (max-width:760px){
  .ff-weg{grid-template-columns:1fr}
  .ff-zwei, .ff-drei, .ff-stufen{grid-template-columns:1fr}
  .ff-abschnitt{padding:16px 16px 18px}
  .ff-held{padding:18px 16px 20px}
  .ff-etappe{padding:12px 12px 14px}
  .ff-knopf-haupt{width:100%; justify-content:center}
}
@media (prefers-reduced-motion:reduce){ .ff-neu{animation:none} }