/* FranchiseVerzeichnis.com - Portal */

:root {
	/* Farben aus dem Logo: Marine, Signalrot, Creme */
	--fv-primary: #032E44;
	--fv-primary-dark: #021f2e;
	--fv-accent: #DD2C00;
	--fv-accent-dark: #b82400;
	--fv-light: #FEF4DC;
	--fv-ink: #1f2933;
	--fv-muted: #6b7280;
	--fv-line: #e5e7eb;
	--fv-bg: #f7f8f9;
}

body { color: var(--fv-ink); background: var(--fv-bg); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--fv-primary); }
a:hover { color: var(--fv-primary-dark); }
.btn-success { background: var(--fv-accent); border-color: var(--fv-accent); }
.btn-success:hover, .btn-success:focus { background: var(--fv-accent-dark); border-color: var(--fv-accent-dark); }
.btn-outline-success { color: var(--fv-primary); border-color: var(--fv-primary); }
.btn-outline-success:hover { background: var(--fv-primary); border-color: var(--fv-primary); }
.bg-success { background: var(--fv-accent) !important; }
.text-success { color: var(--fv-primary) !important; }

/* Kopf */
.portal-header { background: #fff; border-bottom: 1px solid var(--fv-line); }
.portal-header .navbar-brand { display: flex; align-items: center; padding: .35rem 0; }
.brand-logo { height: 40px; width: auto; display: block; }
.portal-footer .brand-logo { height: 34px; }
.portal-header .nav-link { color: var(--fv-ink); font-weight: 500; }
.portal-header .nav-link.active, .portal-header .nav-link:hover { color: var(--fv-primary); }

.portal-main { min-height: 60vh; padding-bottom: 3rem; }
.portal-footer { background: #fff; border-top: 1px solid var(--fv-line); padding: 2.5rem 0 1.5rem; margin-top: 3rem; }
.portal-footer a { color: var(--fv-ink); text-decoration: none; }
.portal-footer a:hover { color: var(--fv-primary); }

/* Hero */
.hero { background: linear-gradient(135deg, var(--fv-primary) 0%, #0b4f72 100%); color: #fff; padding: 3.5rem 0 3rem; }
.hero h1 { font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.8rem); }
.hero .lead { opacity: .95; }
.hero .suchbox { background: #fff; border-radius: 12px; padding: 1rem; box-shadow: 0 10px 30px rgba(0,0,0,.15); }
.hero .suchbox .form-control, .hero .suchbox .form-select { border-color: var(--fv-line); }

.abschnitt { padding: 2.5rem 0 0; }
.abschnitt h2 { font-weight: 700; font-size: 1.5rem; margin-bottom: 1.25rem; }

/* Branchen */
.branche-kachel { display: block; background: #fff; border: 1px solid var(--fv-line); border-radius: 10px; padding: 1rem; color: var(--fv-ink); text-decoration: none; height: 100%; transition: border-color .15s, box-shadow .15s; }
.branche-kachel:hover { border-color: var(--fv-primary); box-shadow: 0 6px 18px rgba(0,0,0,.06); color: var(--fv-ink); }
.branche-kachel .anzahl { color: var(--fv-muted); font-size: .85rem; }

/* Systemkarten */
.system-karte { background: #fff; border: 1px solid var(--fv-line); border-radius: 12px; padding: 1.1rem; height: 100%; display: flex; flex-direction: column; transition: box-shadow .15s, border-color .15s; position: relative; }
.system-karte:hover { border-color: #cfe7db; box-shadow: 0 8px 24px rgba(0,0,0,.07); }
.system-karte .logo { height: 64px; display: flex; align-items: center; margin-bottom: .75rem; }
.system-karte .logo img { max-height: 64px; max-width: 160px; }
.system-karte .logo .platzhalter { width: 64px; height: 64px; border-radius: 10px; background: var(--fv-light); color: var(--fv-primary); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.4rem; }
.system-karte h3 { font-size: 1.1rem; font-weight: 700; margin: 0; }
.system-karte h3 a { color: var(--fv-ink); text-decoration: none; }
.system-karte h3 a:hover { color: var(--fv-primary); }
.system-karte .claim { color: var(--fv-muted); font-size: .9rem; margin: .15rem 0 .6rem; }
.system-karte .teaser { font-size: .9rem; flex: 1; }
.system-karte .kennzahlen { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .8rem; font-size: .85rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--fv-line); }
.system-karte .kennzahlen .label { color: var(--fv-muted); display: block; font-size: .75rem; }
.system-karte .merken { position: absolute; top: .8rem; right: .8rem; }

.merken { background: none; border: 1px solid var(--fv-line); border-radius: 50%; width: 36px; height: 36px; line-height: 1; color: var(--fv-muted); cursor: pointer; }
.merken:hover, .merken.aktiv { color: var(--fv-accent); border-color: var(--fv-accent); }
.merken .herz::before { content: "\2661"; font-size: 1.15rem; }
.merken.aktiv .herz::before { content: "\2665"; }

/* Sterne */
.sterne .stern { color: #d1d5db; letter-spacing: 1px; }
.sterne .stern.voll { color: #f5a623; }
.sterne-anzahl { color: var(--fv-muted); font-size: .9em; }

/* Filter */
.filter-box { background: #fff; border: 1px solid var(--fv-line); border-radius: 12px; padding: 1.1rem; }
.filter-box h3 { font-size: 1rem; font-weight: 700; }
.filter-box .form-label { font-size: .85rem; color: var(--fv-muted); margin-bottom: .2rem; }
.chip { display: inline-block; background: var(--fv-light); color: var(--fv-primary); border-radius: 999px; padding: .2rem .7rem; font-size: .8rem; margin: 0 .3rem .3rem 0; }

/* Detailseite */
.detail-kopf { background: #fff; border-bottom: 1px solid var(--fv-line); padding: 2rem 0; }
.detail-kopf .logo img { max-height: 110px; max-width: 220px; }
.detail-kopf .logo .platzhalter { width: 110px; height: 110px; border-radius: 14px; background: var(--fv-light); color: var(--fv-primary); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 2.2rem; }
.detail-kopf h1 { font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: .2rem; }
.kennzahl-tabelle { background: #fff; border: 1px solid var(--fv-line); border-radius: 12px; overflow: hidden; }
.kennzahl-tabelle .zeile { display: flex; justify-content: space-between; padding: .7rem 1rem; border-bottom: 1px solid var(--fv-line); font-size: .95rem; }
.kennzahl-tabelle .zeile:last-child { border-bottom: 0; }
.kennzahl-tabelle .zeile .label { color: var(--fv-muted); }
.inhalt-box { background: #fff; border: 1px solid var(--fv-line); border-radius: 12px; padding: 1.5rem; margin-bottom: 1.25rem; }
.inhalt-box h2 { font-size: 1.3rem; font-weight: 700; margin-bottom: 1rem; }
.anfrage-box { background: #fff; border: 2px solid var(--fv-accent); border-radius: 12px; padding: 1.25rem; }
.anfrage-box h2 { font-size: 1.2rem; font-weight: 700; }
.sticky-seite { position: sticky; top: 1rem; }

.bewertung { border-top: 1px solid var(--fv-line); padding: 1rem 0; }
.bewertung:first-child { border-top: 0; }
.bewertung .antwort { background: var(--fv-light); border-radius: 8px; padding: .75rem 1rem; margin-top: .75rem; font-size: .95rem; }
.verteilung .balken { height: 8px; background: var(--fv-line); border-radius: 4px; overflow: hidden; }
.verteilung .balken span { display: block; height: 100%; background: #f5a623; }

.cta-franchisegeber { background: var(--fv-primary); color: #fff; border-radius: 14px; padding: 2rem; }
.cta-franchisegeber a.btn { background: var(--fv-accent); color: #fff; font-weight: 600; border: 0; }
.cta-franchisegeber a.btn:hover { background: var(--fv-accent-dark); color: #fff; }

.video-wrap { position: relative; padding-bottom: 56.25%; height: 0; border-radius: 10px; overflow: hidden; }
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.seiten .page-link { color: var(--fv-primary); }
.seiten .page-item.active .page-link { background: var(--fv-primary); border-color: var(--fv-primary); }

.dn { display: none !important; }

@media (max-width: 575.98px) {
	.hero { padding: 2.25rem 0 2rem; }
	.detail-kopf { padding: 1.25rem 0; }
}

/* Rechtstexte aus dem Framework (Impressum, Datenschutz, AGB) */
.portal-rahmen .white-box, .portal-rahmen .card { max-width: 860px; margin: 0 auto 1.5rem; background: #fff; border: 1px solid var(--fv-line); border-radius: 12px; padding: 2rem; box-shadow: none; }
.portal-rahmen .white-box h1 { font-weight: 800; font-size: 1.8rem; margin-bottom: 1rem; }
.portal-rahmen .white-box h2 { font-size: 1.15rem; font-weight: 700; margin: 1.6rem 0 .5rem; }
.portal-rahmen .card .card-body { padding: 0; }
@media (max-width: 575.98px) { .portal-rahmen .white-box, .portal-rahmen .card { padding: 1.25rem; } }