:root {
	--op-accent: #e2600a;
	--op-accent-dark: #b4270c;
	--op-bg: #ffffff;
	--op-line: #e4e4e7;
	--op-text: #1f2328;
	--op-muted: #6b7280;
	--op-radius: 12px;
	--op-shadow: 0 4px 24px rgba(0, 0, 0, .08);
}

/* ---------- Formular ---------- */
.op-form-wrap {
	max-width: 640px;
	margin: 0 auto;
}
.op-form {
	background: var(--op-bg);
	border: 1px solid var(--op-line);
	border-radius: var(--op-radius);
	box-shadow: var(--op-shadow);
	padding: 28px;
}
.op-progress {
	height: 6px;
	background: var(--op-line);
	border-radius: 99px;
	overflow: hidden;
	margin-bottom: 24px;
}
.op-progress__bar {
	height: 100%;
	width: 25%;
	background: var(--op-accent);
	transition: width .35s ease;
}
.op-step { display: none; }
.op-step.is-active { display: block; animation: opFade .25s ease; }
@keyframes opFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.op-step__title {
	font-size: 1.35rem;
	line-height: 1.3;
	margin: 0 0 18px;
	color: var(--op-text);
}

/* Auswahlkacheln */
.op-choices {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 10px;
}
.op-choice {
	position: relative;
	display: flex;
	align-items: center;
	border: 1.5px solid var(--op-line);
	border-radius: 10px;
	padding: 12px 14px;
	cursor: pointer;
	transition: border-color .15s, background .15s;
	font-size: .95rem;
}
.op-choice:hover { border-color: var(--op-accent); }
.op-choice input { position: absolute; opacity: 0; }
.op-choice input:checked + span { font-weight: 600; color: var(--op-accent-dark); }
.op-choice:has(input:checked) { border-color: var(--op-accent); background: #fff6ef; }

/* Felder */
.op-field { display: block; margin-bottom: 16px; }
.op-field > span { display: block; font-size: .9rem; font-weight: 600; margin-bottom: 6px; color: var(--op-text); }
.op-field input, .op-field textarea, .op-field select {
	width: 100%;
	padding: 11px 13px;
	border: 1.5px solid var(--op-line);
	border-radius: 10px;
	font-size: 1rem;
	box-sizing: border-box;
	font-family: inherit;
}
.op-field input:focus, .op-field textarea:focus, .op-field select:focus {
	outline: none;
	border-color: var(--op-accent);
}
.op-row { display: flex; gap: 12px; }
.op-field--sm { flex: 0 0 130px; }
@media (max-width: 480px) { .op-row { flex-direction: column; } .op-field--sm { flex: 1; } }

/* Navigation */
.op-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; gap: 12px; }
.op-btn {
	appearance: none;
	border: none;
	background: var(--op-accent);
	color: #fff;
	font-weight: 600;
	font-size: 1rem;
	padding: 12px 22px;
	border-radius: 10px;
	cursor: pointer;
	transition: background .15s, transform .05s;
}
.op-btn:hover { background: var(--op-accent-dark); }
.op-btn:active { transform: translateY(1px); }
.op-btn:disabled { opacity: .6; cursor: default; }
.op-btn--ghost { background: transparent; color: var(--op-muted); padding-left: 6px; padding-right: 6px; }
.op-btn--ghost:hover { background: transparent; color: var(--op-text); }
.op-btn--submit { width: 100%; padding: 14px; font-size: 1.05rem; }
.op-nav:has(.op-btn--submit) { flex-direction: column-reverse; }

.op-error { color: #d33; font-size: .85rem; display: block; margin-top: 4px; font-style: normal; }
.op-consent { font-size: .8rem; color: var(--op-muted); margin: 12px 0 0; }
.op-hp { position: absolute !important; left: -9999px !important; height: 0; width: 0; overflow: hidden; }

/* Erfolg */
.op-success { text-align: center; padding: 20px 0; }
.op-success__icon {
	width: 64px; height: 64px; line-height: 64px;
	margin: 0 auto 16px;
	background: #16a34a; color: #fff;
	border-radius: 50%; font-size: 2rem;
}

/* ---------- Kategorien-Raster ---------- */
.op-kategorien {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 12px;
}
.op-kategorie {
	display: flex; flex-direction: column; align-items: center; text-align: center;
	gap: 8px; padding: 20px 12px;
	border: 1px solid var(--op-line); border-radius: var(--op-radius);
	text-decoration: none; color: var(--op-text);
	transition: box-shadow .15s, transform .1s, border-color .15s;
}
.op-kategorie:hover { box-shadow: var(--op-shadow); transform: translateY(-2px); border-color: var(--op-accent); }
.op-kategorie__icon { font-size: 1.8rem; }
.op-kategorie__name { font-size: .9rem; font-weight: 600; }

/* ---------- Firmen ---------- */
.op-firmen {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
}
.op-firma {
	border: 1px solid var(--op-line); border-radius: var(--op-radius);
	padding: 18px; background: var(--op-bg);
}
.op-firma__logo img { max-width: 100%; height: auto; border-radius: 8px; margin-bottom: 10px; }
.op-firma__name { margin: 0 0 6px; font-size: 1.05rem; }
.op-firma__name a { text-decoration: none; color: var(--op-text); }
.op-firma__meta { margin: 0; color: var(--op-muted); font-size: .9rem; }
.op-firma__meta a { color: var(--op-accent-dark); text-decoration: none; }

/* ---------- Regionen ---------- */
.op-regionen {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 24px;
}
.op-region-block__title { margin: 0 0 8px; font-size: 1.05rem; }
.op-region-block__title a { text-decoration: none; color: inherit; }
.op-region-block__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.op-region-block__list a { text-decoration: none; color: var(--op-muted); font-size: .9rem; }
.op-region-block__list a:hover { color: var(--op-accent-dark); }

/* ---------- Sterne & Verifizierung ---------- */
.op-stars { display: inline-flex; gap: 1px; vertical-align: middle; }
.op-star { color: #d8dde5; font-size: 1rem; line-height: 1; }
.op-star.is-on { color: #f5a623; }
.op-verif-badge { display: inline-grid; place-items: center; width: 20px; height: 20px; background: #16a34a; color: #fff; border-radius: 50%; font-size: .7rem; font-weight: 700; vertical-align: middle; }

/* ---------- Firmenkarten (aufgewertet) ---------- */
.op-firmen { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.op-firma { border: 1px solid var(--op-line); border-radius: var(--op-radius); background: #fff; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s, transform .12s; }
.op-firma:hover { box-shadow: var(--op-shadow); transform: translateY(-3px); }
.op-firma__logo { display: block; }
.op-firma__logo img { width: 100%; height: 150px; object-fit: cover; display: block; }
.op-firma__body { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.op-firma__name { margin: 0; font-size: 1.1rem; }
.op-firma__name a { text-decoration: none; color: inherit; }
.op-firma__rating { display: flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--op-muted); }
.op-firma__meta { margin: 0; color: var(--op-muted); font-size: .9rem; }
.op-firma__meta a { color: var(--op-accent-dark); text-decoration: none; }
.op-firma__tags { margin: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.op-firma__tag { background: #f2f4f7; color: #475569; font-size: .72rem; padding: 3px 8px; border-radius: 99px; }
.op-firma__cta { margin-top: auto; display: block; text-align: center; background: var(--op-accent); color: #fff; text-decoration: none; font-weight: 700; padding: 10px; border-radius: 8px; transition: background .15s; }
.op-firma__cta:hover { background: var(--op-accent-dark); }

/* Direktanfrage-Hinweis */
.op-form-target { background: #eef8f0; border: 1px solid #16a34a; color: #14532d; padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-weight: 600; }

/* ---------- Konto & Dashboard ---------- */
.op-account { max-width: 900px; margin: 0 auto; }
.op-account__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.op-account--login { max-width: 420px; }
.op-account__stats { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.op-stat { background: #fff; border: 1px solid var(--op-line); border-radius: 10px; padding: 16px 20px; display: flex; flex-direction: column; gap: 2px; }
.op-stat strong { font-size: 1.15rem; color: var(--op-accent-dark); }
.op-stat span { color: var(--op-muted); font-size: .85rem; }
.op-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.op-card { border: 1px solid var(--op-line); border-radius: var(--op-radius); padding: 18px; background: #fff; }
.op-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.op-card__meta { color: var(--op-muted); font-size: .85rem; margin: 0 0 10px; }
.op-card__contact { font-size: .9rem; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--op-line); }
.op-card__contact a { color: var(--op-accent-dark); text-decoration: none; }
.op-account__reg { margin-top: 14px; font-size: .9rem; }

/* Login-Formular (WP) */
.op-account .login-username, .op-account .login-password, .op-account .login-remember, .op-account .login-submit { margin-bottom: 12px; }
.op-account input[type=text], .op-account input[type=password], .op-account input[type=email] { width: 100%; padding: 11px 13px; border: 1.5px solid var(--op-line); border-radius: 10px; box-sizing: border-box; }
.op-account .button-primary { background: var(--op-accent); border: none; color: #fff; padding: 11px 22px; border-radius: 10px; font-weight: 700; cursor: pointer; }

/* Registrierungsformular */
.op-reg-form { max-width: 520px; }
.op-reg-form .op-field, .op-reg-form .op-row { margin-bottom: 14px; }

/* ---------- Bewertungen (Profil) ---------- */
.op-reviews { display: grid; gap: 14px; }
.op-review { border: 1px solid var(--op-line); border-radius: 10px; padding: 16px; background: #fff; }
.op-review__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.op-review__author { font-weight: 700; color: var(--op-text); }
.op-review__text { margin: 0; color: #374151; }
.op-review-form { border: 1px solid var(--op-line); border-radius: var(--op-radius); padding: 20px; background: var(--op-soft, #f4f7fb); margin-top: 18px; }
.op-rate { display: inline-flex; flex-direction: row-reverse; gap: 2px; font-size: 1.6rem; }
.op-rate input { display: none; }
.op-rate label { color: #d8dde5; cursor: pointer; }
.op-rate input:checked ~ label, .op-rate label:hover, .op-rate label:hover ~ label { color: #f5a623; }