/* Mandatum – Abschnitt „Franchise- und Partnermodell“ (#franchise). Nutzt die Tokens aus styles.css (eine Signalfarbe, warme Flächen, Haarlinien). */

/* Kopfzeile: Nutzer-/Demo-Login ohne Umbruch; Knopftext kürzer bei mittleren Breiten, Demo-Login dann im Menü/Footer */
.nav-signin { white-space: nowrap; }
.nav-cta .btn { white-space: nowrap; }
.t-short { display: none; }
@media (max-width: 1400px) { .t-long { display: none; } .t-short { display: inline; } }
@media (max-width: 1100px) { .nav-cta .nav-demo { display: none; } }

.fr { position: relative; }
.fr-anchor { position: absolute; top: -90px; }

/* 1 · Modell als Netzwerk */
.fr-model { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; margin-top: 64px; }
.fr-model-copy { display: grid; gap: 16px; align-content: start; }
.fr-legend { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 14px; }
.fr-legend li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: baseline; font-size: 15px; color: var(--ink-60); }
.fr-legend b { color: var(--ink); font-weight: 500; }
.fr-l { display: inline-block; width: 28px; height: 0; border-top: 2px solid; transform: translateY(-4px); }
.fr-l-out { border-color: var(--accent); }
.fr-l-lead { border-color: var(--accent); border-top-style: dashed; }
.fr-l-in { border-color: var(--ink-60); }
.fr-l-fee { border-color: var(--ink-40); border-top-style: dotted; }

.fr-net { background: var(--panel); border-radius: 16px; padding: 12px; }
.fr-net svg { display: block; width: 100%; height: auto; }
.fr-paths path { stroke: var(--ink-20); }
.fr-nodes circle { fill: #fff; stroke: rgba(11, 11, 10, 0.14); stroke-width: 1.2; transition: stroke .3s, fill .3s; }
.fr-nodes text { font: 500 11.5px var(--font); fill: var(--ink); }
.fr-nodes .fr-reg { font: 400 10.5px "IBM Plex Mono", ui-monospace, monospace; fill: var(--ink-60); }
.fr-nodes g.is-hot circle { stroke: var(--accent); fill: var(--accent-soft); }
.fr-center .fr-c1 { font: 500 15px var(--font); fill: #fff; letter-spacing: -0.01em; }
.fr-center .fr-c2 { font: 400 10px "IBM Plex Mono", ui-monospace, monospace; fill: rgba(255, 255, 255, 0.8); letter-spacing: .08em; text-transform: uppercase; }
.fr-dots .d-out { fill: var(--accent); }
.fr-dots .d-lead { fill: #fff; stroke: var(--accent); stroke-width: 1.6; }
.fr-dots .d-in { fill: var(--ink-60); }
.fr-dots .d-fee { fill: var(--ink-40); }

/* 2 · Leistung und Beitrag */
.fr-give { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; margin-top: 72px; }
.fr-give-card { background: var(--panel); border-radius: 16px; padding: 32px; display: grid; gap: 18px; align-self: stretch; align-content: start; }
.fr-give-card.is-you { background: #fff; border: 1px solid var(--accent-line); box-shadow: 0 0 0 4px var(--accent-soft); }
.fr-give-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.fr-give-card li { display: grid; gap: 2px; font-size: 15px; color: var(--ink-60); line-height: 1.45; }
.fr-give-card li b { color: var(--ink); font-weight: 500; font-size: 16px; }
.fr-swap { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; border: 1px solid var(--line); }

/* 3 · Stufen mit Vergleich */
.fr-tiers { margin-top: 88px; }
.fr-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.fr-tabs button {
  text-align: left; display: grid; gap: 4px; padding: 18px 20px; border-radius: 12px; cursor: pointer;
  background: #fff; border: 1px solid var(--line); font: inherit; color: var(--ink); transition: border-color .2s, background .2s, box-shadow .2s;
}
.fr-tabs button:hover { border-color: var(--accent-line); }
.fr-tabs button[aria-selected="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 4px var(--accent-soft); }
.fr-tabs b { font-weight: 500; font-size: 20px; letter-spacing: -0.02em; }
.fr-tabs span { font-size: 14px; color: var(--ink-60); }
.fr-tier-text { margin: 20px 0 8px; font-size: 16px; color: var(--ink-60); max-width: 720px; min-height: 48px; }
.fr-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fr-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.fr-table thead th { font-weight: 500; font-size: 14px; padding: 14px 8px; text-align: center; border-bottom: 1px solid var(--line); }
.fr-table tbody th { text-align: left; font-weight: 400; padding: 13px 16px 13px 0; color: var(--ink); min-width: 240px; }
.fr-table td { text-align: center; padding: 13px 8px; width: 16%; }
.fr-table tbody tr + tr { border-top: 1px solid var(--line-soft); }
.fr-table td, .fr-table thead th { transition: background .25s; }
.fr-table[data-col="0"] thead th:nth-child(2), .fr-table[data-col="0"] td:nth-child(2),
.fr-table[data-col="1"] thead th:nth-child(3), .fr-table[data-col="1"] td:nth-child(3),
.fr-table[data-col="2"] thead th:nth-child(4), .fr-table[data-col="2"] td:nth-child(4) { background: var(--accent-soft); }
.fr-table[data-col="0"] thead th:nth-child(2), .fr-table[data-col="1"] thead th:nth-child(3), .fr-table[data-col="2"] thead th:nth-child(4) { color: var(--accent); border-radius: 10px 10px 0 0; }
.fr-yes { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.fr-table[data-col="0"] td:nth-child(2) .fr-yes, .fr-table[data-col="1"] td:nth-child(3) .fr-yes, .fr-table[data-col="2"] td:nth-child(4) .fr-yes { background: #fff; }
.fr-dash { color: var(--ink-40); }
.fr-txt { font-size: 13px; color: var(--ink-80); }

/* 4 · Honorar (schematisch) */
.fr-money { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-top: 88px; }
.fr-money > div:first-child { display: grid; gap: 14px; }
.fr-note { font-size: 12px; line-height: 1.5; }
.fr-bar-box { background: var(--panel); border-radius: 16px; padding: 28px; display: grid; gap: 16px; }
.fr-bar-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-60); text-transform: uppercase; letter-spacing: .06em; }
.fr-bar-head span:last-child { color: var(--accent); }
.fr-bar { display: flex; height: 64px; border-radius: 12px; overflow: hidden; background: #fff; }
.fr-seg { display: flex; align-items: center; padding-left: 16px; transition: flex-basis .6s cubic-bezier(.2,.7,.2,1); flex: 0 0 0; overflow: hidden; white-space: nowrap; }
.fr-seg b { color: #fff; font-weight: 500; font-size: 15px; }
.fr-seg-you { background: var(--accent); }
.fr-seg-lic { background: #9db89d; }
.fr-seg-ai { background: #d6e3d6; }
.fr-seg-share { background: var(--ink); }
.fr-money[data-tier="0"] .fr-seg-you, .fr-money[data-tier="1"] .fr-seg-you { flex-basis: 85%; }
.fr-money[data-tier="0"] .fr-seg-lic { flex-basis: 9%; }
.fr-money[data-tier="1"] .fr-seg-lic { flex-basis: 10%; }
.fr-money[data-tier="0"] .fr-seg-ai, .fr-money[data-tier="1"] .fr-seg-ai { flex-basis: 5%; padding-left: 0; }
.fr-money[data-tier="2"] .fr-seg-you { flex-basis: 76%; }
.fr-money[data-tier="2"] .fr-seg-lic { flex-basis: 10%; }
.fr-money[data-tier="2"] .fr-seg-ai { flex-basis: 5%; padding-left: 0; }
.fr-money[data-tier="2"] .fr-seg-share { flex-basis: 9%; }
.fr-seg-lic, .fr-seg-share { padding-left: 0; }
.fr-bar-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--ink-60); }
.fr-bar-legend li { display: flex; align-items: center; gap: 8px; }
.fr-bar-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none; }
.fr-bar-legend .lg-you { background: var(--accent); }
.fr-bar-legend .lg-lic { background: #9db89d; }
.fr-bar-legend .lg-ai { background: #d6e3d6; }
.fr-bar-legend .lg-share { background: var(--ink); }
.fr-money:not([data-tier="2"]) .fr-only-fr { opacity: .35; text-decoration: line-through; }

/* 5 · Schritte */
.fr-sub { margin-top: 88px; }
.fr-steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; position: relative; }
.fr-steps li { position: relative; display: grid; gap: 8px; align-content: start; padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.fr-steps li:not(:last-child)::after {
  content: ""; position: absolute; top: 34px; right: -13px; width: 10px; height: 10px; border-top: 1.5px solid var(--accent); border-right: 1.5px solid var(--accent);
  transform: rotate(45deg); background: transparent; z-index: 1;
}
.fr-step-n { color: var(--accent); font-size: 12px; }
.fr-steps b { font-weight: 500; font-size: 17px; }
.fr-steps span:not(.fr-step-n) { color: var(--ink-60); font-size: 15px; line-height: 1.45; }
.fr-steps em { font-style: normal; font-size: 11px; color: var(--ink-60); margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line-soft); text-transform: uppercase; letter-spacing: .06em; }

/* 6 · Spielregeln */
.fr-rules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 56px; }
.fr-rule { display: grid; gap: 8px; align-content: start; padding-top: 18px; border-top: 1px solid var(--line); }
.fr-rule-i { color: var(--accent); }
.fr-rule b { font-weight: 500; }
.fr-rule p { margin: 0; color: var(--ink-60); font-size: 15px; line-height: 1.45; }

/* Abschluss */
.fr-cta { margin-top: 64px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; background: var(--dark); color: #fff; border-radius: 16px; padding: 36px; }
.fr-cta h3 { color: #fff; margin: 0 0 6px; }
.fr-cta p { margin: 0; color: rgba(255, 255, 255, 0.62); }
.fr-cta-btns { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 900px) {
  .fr-model, .fr-money { grid-template-columns: 1fr; gap: 32px; }
  .fr-give { grid-template-columns: 1fr; }
  .fr-swap { justify-self: center; transform: rotate(90deg); }
  .fr-tabs { grid-template-columns: 1fr; }
  .fr-steps, .fr-rules { grid-template-columns: 1fr 1fr; }
  .fr-steps li:not(:last-child)::after { display: none; }
}
@media (max-width: 560px) {
  .fr-steps, .fr-rules { grid-template-columns: 1fr; }
  .fr-give-card { padding: 24px; }
  .fr-cta { padding: 26px; }
  .fr-seg b { font-size: 13px; }
}
/* mittlere Breiten: weniger Hauptnavigation (alle Ziele bleiben über Menü, Footer und Seitenfluss erreichbar) */
@media (max-width: 1300px) { .nav-links a[href="#plattform"], .nav-links a[href="#integrationen"] { display: none; } }
@media (max-width: 1100px) { .nav-links a[href="#profile"], .nav-links a[href="#sicherheit"] { display: none; } }
/* Vergleichstabelle auf dem Handy: alle drei Stufen sichtbar */
@media (max-width: 560px) {
  .fr-table { font-size: 14px; }
  .fr-table tbody th { min-width: 0; padding: 11px 8px 11px 0; }
  .fr-table td { padding: 11px 2px; width: 19%; }
  .fr-table thead th { font-size: 12.5px; padding: 12px 2px; }
  .fr-txt { font-size: 11.5px; }
}