/* Persönliche SWOT-Analyse · Styles */
.sw-axis-x { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--mk-muted); margin-bottom: 6px; }
.sw-matrix { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.sw-cell { border: 1.5px solid var(--c); border-radius: var(--mk-radius-sm); padding: 12px; background: color-mix(in srgb, var(--c) 5%, var(--mk-surface)); display: flex; flex-direction: column; gap: 8px; }
.sw-cell-h { display: flex; align-items: center; gap: 8px; } .sw-cell-h > span:first-child { font-size: 20px; } .sw-cell-h b { font-size: 15px; color: var(--c); } .sw-cell-h small { font-size: 11px; color: var(--mk-muted); flex: 1; }
.sw-qs { margin: 0; padding-left: 16px; font-size: 12px; color: var(--mk-muted); } .sw-qs li { margin-bottom: 1px; }
.sw-items { display: grid; gap: 4px; } .sw-item { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; background: var(--mk-surface); border-radius: 8px; padding: 6px 8px; font-size: 13px; } .sw-item-t { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.sw-w { display: flex; gap: 1px; } .sw-w button { border: 0; background: none; font: inherit; font-size: 13px; color: var(--mk-line); cursor: pointer; padding: 0 1px; } .sw-w button.on { color: var(--c); }
.sw-side { grid-column: 1 / -1; font-size: 11px; color: #b45309; }
.sw-add { display: flex; gap: 6px; margin-top: auto; } .sw-add .mk-input { flex: 1; min-width: 0; }
.sw-pos { display: grid; grid-template-columns: 240px 1fr; gap: 18px; align-items: center; }
.sw-pos-grid { position: relative; aspect-ratio: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; background: var(--mk-line); border-radius: var(--mk-radius-sm); overflow: hidden; } .sw-pos-grid .q { background: var(--mk-surface-2); display: grid; place-items: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mk-muted); } .sw-pos-grid .q2 { background: rgba(16,185,129,.12); } .sw-pos-grid .q3 { background: rgba(239,68,68,.1); }
.sw-dot { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--mk-accent); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25); transform: translate(-50%, -50%); transition: left .5s, top .5s; }
.sw-pos-ax { display: flex; justify-content: space-between; font-size: 11px; color: var(--mk-muted); margin-top: 4px; }
.sw-pos-l { font-size: 22px; font-weight: 800; margin-bottom: 6px; } .sw-pos-txt p { margin: 0 0 8px; font-size: 14px; line-height: 1.55; } .sw-pos-n { display: flex; gap: 14px; font-size: 13px; color: var(--mk-muted); } .sw-pos-n b { color: inherit; }
.sw-tows { border: 1px solid var(--mk-line); border-radius: var(--mk-radius-sm); padding: 12px 14px; margin-bottom: 10px; background: linear-gradient(90deg, color-mix(in srgb, var(--a) 6%, var(--mk-surface)), color-mix(in srgb, var(--b) 6%, var(--mk-surface))); } .sw-tows.main { border-color: var(--mk-accent); box-shadow: 0 0 0 2px var(--mk-accent-soft); }
.sw-tows-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .sw-tows-h b { font-size: 15px; }
.sw-tows-src { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; } .sw-tows-src div { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .sw-tows-src small { width: 100%; font-size: 11px; color: var(--mk-muted); font-weight: 600; } .sw-tows-src span { font-size: 12px; background: var(--mk-surface); border: 1px solid var(--mk-line); border-radius: 6px; padding: 2px 8px; }
.sw-act-grp { border: 1px solid var(--mk-line); border-radius: var(--mk-radius-sm); padding: 12px 14px; margin-bottom: 10px; } .sw-act-grp .sw-tows-h span { font-size: 12px; }
.sw-act { display: grid; grid-template-columns: 1fr 120px auto auto; gap: 6px; align-items: center; margin-bottom: 6px; }
.sw-prio { display: flex; gap: 2px; } .sw-prio button { width: 28px; height: 32px; border-radius: 6px; border: 1.5px solid var(--mk-line); background: var(--mk-surface); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; color: var(--mk-muted); padding: 0; } .sw-prio button.on { background: var(--mk-accent); color: #fff; border-color: transparent; }
.sw-q { font-size: 17px; font-weight: 700; padding: 12px 16px; background: var(--mk-accent-soft); border-left: 4px solid var(--mk-accent); border-radius: var(--mk-radius-sm); margin-bottom: 12px; }
.sw-sum-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; } .sw-sum-grid > div { background: var(--mk-surface-2); border-left: 4px solid var(--c); border-radius: var(--mk-radius-sm); padding: 10px 12px; display: grid; gap: 3px; } .sw-sum-grid b { color: var(--c); font-size: 13px; margin-bottom: 2px; } .sw-sum-grid span { font-size: 13px; } .sw-sum-grid em { font-style: normal; font-size: 10px; color: var(--c); }
.sw-ul { margin: 6px 0 0; padding: 0; list-style: none; font-size: 14px; } .sw-ul li { margin-bottom: 4px; } .sw-ul small { color: var(--mk-muted); } .sw-ul b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; font-size: 11px; color: #fff; background: #94a3b8; margin-right: 4px; } .sw-ul .sw-pA { background: #ef4444; } .sw-ul .sw-pB { background: #f59e0b; }
.sw-link { text-decoration: none; color: inherit; text-align: left; }
@media (max-width: 640px) { .sw-axis-x { display: none; } .sw-matrix { grid-template-columns: 1fr; } .sw-pos { grid-template-columns: 1fr; } .sw-pos-chart { max-width: 260px; margin: 0 auto; } .sw-tows-src { grid-template-columns: 1fr; } .sw-act { grid-template-columns: 1fr 1fr; } .sw-act .mk-input:first-child { grid-column: 1 / -1; } .sw-sum-grid { grid-template-columns: 1fr; } }