/* ============================================================
   HQ Community — Betriebe (Verzeichnis, Profilseite, Editor)
   Skandinavisch-minimalistisch, konsistent zum Theme
   ============================================================ */

/* --- Verzeichnis ------------------------------------------- */
.hq-directory { padding: clamp(8rem, 14vh, 11rem) var(--pad-x, 6vw) 6rem; max-width: 1600px; margin: 0 auto; }
.hq-directory__head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.hq-eyebrow { display: inline-block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--champagne, #A99D8D); }
.hq-directory__title { font-size: clamp(2.4rem, 6vw, 4.5rem); font-weight: 200; margin: 0.8rem 0 1rem; color: var(--slate, #60686F); letter-spacing: -0.015em; }
.hq-directory__sub { font-size: 1.08rem; line-height: 1.7; color: var(--body, #454C52); margin: 0; }

.hq-directory__map { height: clamp(320px, 48vh, 520px); border-radius: 8px; overflow: hidden; margin-bottom: 2.2rem; border: 1px solid var(--line, #DCDBD7); z-index: 0; }

.hq-directory__filter { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2.6rem; }
.hq-chip { border: 1px solid var(--line, #DCDBD7); background: var(--white, #fff); color: var(--slate, #60686F); font-family: inherit; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.65rem 1.3rem; border-radius: 100px; cursor: pointer; transition: background 0.3s, color 0.3s, border-color 0.3s; }
.hq-chip:hover { border-color: var(--champagne, #A99D8D); color: var(--ink, #2C3531); }
.hq-chip.is-active { background: var(--slate, #60686F); border-color: var(--slate, #60686F); color: var(--cream, #F2F1EF); }

.hq-directory__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; }
.hq-biz-card { background: var(--white, #fff); border: 1px solid var(--line, #DCDBD7); border-radius: 8px; overflow: hidden; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s; }
.hq-biz-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(44,53,49,0.09); }
.hq-biz-card > a { display: block; height: 100%; }
.hq-biz-card__media { position: relative; height: 170px; background: var(--sand, #E5E1DC) center/cover no-repeat; }
.hq-biz-card__logo { position: absolute; left: 1.2rem; bottom: -26px; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 3px solid var(--white, #fff); background: var(--white, #fff); box-shadow: 0 4px 14px rgba(44,53,49,0.14); }
.hq-biz-card__body { padding: 2.2rem 1.4rem 1.5rem; }
.hq-biz-card__cat { display: block; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--champagne, #A99D8D); margin-bottom: 0.45rem; }
.hq-biz-card__name { font-size: 1.25rem; font-weight: 300; color: var(--slate, #60686F); margin: 0 0 0.55rem; letter-spacing: -0.01em; }
.hq-biz-card__desc { font-size: 0.92rem; line-height: 1.65; color: var(--body, #454C52); margin: 0 0 1rem; }
.hq-biz-card__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; font-size: 0.8rem; color: var(--slate-soft, #7D888F); }
.hq-badge-radius { display: inline-block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #4d6b52; background: #e7efe6; padding: 0.28rem 0.7rem; border-radius: 100px; }

/* --- Betriebsprofil (öffentliche Seite) --------------------- */
.hq-biz-hero { position: relative; min-height: 46vh; background: var(--sand, #E5E1DC) center/cover no-repeat; display: flex; align-items: flex-end; }
.hq-biz-hero__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(44,53,49,0.62), rgba(44,53,49,0.08) 55%, rgba(44,53,49,0.28)); }
.hq-biz-hero__inner { position: relative; width: 100%; padding: 6rem var(--pad-x, 6vw) 2.6rem; display: flex; align-items: flex-end; gap: 1.6rem; }
.hq-biz-hero__logo { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; border: 4px solid var(--white, #fff); background: var(--white, #fff); box-shadow: 0 8px 24px rgba(0,0,0,0.22); }
.hq-biz-hero__label { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,255,255,0.85); margin-bottom: 0.5rem; }
.hq-biz-hero__name { font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 200; color: #fff; margin: 0; letter-spacing: -0.015em; }
.hq-biz-hero__meta { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin-top: 0.7rem; font-size: 0.85rem; color: rgba(255,255,255,0.85); align-items: center; }
.hq-biz-hero--plain { min-height: 0; background: var(--sand, #E5E1DC); }
.hq-biz-hero--plain .hq-biz-hero__name { color: var(--slate, #60686F); }
.hq-biz-hero--plain .hq-biz-hero__label { color: var(--champagne, #A99D8D); }
.hq-biz-hero--plain .hq-biz-hero__meta { color: var(--slate-soft, #7D888F); }

.hq-biz-about { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: clamp(2rem, 5vw, 5rem); padding: clamp(3rem, 6vw, 5rem) var(--pad-x, 6vw); max-width: 1600px; margin: 0 auto; }
.hq-biz-about__portrait { font-size: 1.12rem; line-height: 1.8; color: var(--body, #454C52); max-width: 42rem; }
.hq-biz-facts { border-left: 2px solid var(--champagne, #A99D8D); padding-left: 1.6rem; align-self: start; }
.hq-biz-facts dt { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--champagne, #A99D8D); margin-top: 1.1rem; }
.hq-biz-facts dt:first-child { margin-top: 0; }
.hq-biz-facts dd { margin: 0.25rem 0 0; font-size: 0.98rem; color: var(--body, #454C52); line-height: 1.6; white-space: pre-line; }
.hq-biz-facts a { color: var(--taupe, #776D5F); border-bottom: 1px solid var(--line, #DCDBD7); transition: border-color 0.3s; }
.hq-biz-facts a:hover { border-color: var(--champagne, #A99D8D); }

.hq-biz-map-wrap { padding: 0 var(--pad-x, 6vw) clamp(3rem, 6vw, 5rem); max-width: 1600px; margin: 0 auto; }
.hq-biz-map-wrap #hq-single-map { height: 320px; border-radius: 8px; border: 1px solid var(--line, #DCDBD7); z-index: 0; }
.hq-biz-map-caption { margin-top: 0.8rem; font-size: 0.85rem; color: var(--slate-soft, #7D888F); }

.hq-biz-posts-head { padding: 0 var(--pad-x, 6vw); max-width: 1600px; margin: 0 auto 2rem; }
.hq-biz-posts-head h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 200; color: var(--slate, #60686F); margin: 0; }

/* --- Profil-Editor („Mein Betrieb") — Social-App-Muster ----- */
.hq-biz-viewlink a { color: var(--taupe, #776D5F); border-bottom: 1px solid var(--line, #DCDBD7); }

/* Segmented Control für den Kontotyp */
.hq-segment { display: inline-flex; background: var(--sand, #E5E1DC); border-radius: 100px; padding: 4px; gap: 2px; }
.hq-segment__opt { position: relative; cursor: pointer; }
.hq-segment__opt input { position: absolute; opacity: 0; pointer-events: none; }
.hq-segment__opt span {
	display: inline-block; padding: 0.6rem 1.5rem; border-radius: 100px;
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--slate-soft, #7D888F); transition: all 0.25s;
}
.hq-segment__opt input:checked + span { background: var(--white, #fff); color: var(--slate, #60686F); box-shadow: 0 2px 8px rgba(44,53,49,0.10); }
.hq-segment__opt input:focus-visible + span { outline: 2px solid var(--champagne, #A99D8D); outline-offset: 2px; }

/* Bühne: Titelbild + rundes Logo überlappend, Name direkt darauf */
.hq-biz-stage { position: relative; margin-bottom: 2.2rem; }
.hq-biz-media--cover .hq-biz-media__preview {
	height: 220px; border-radius: 12px;
	border: 1.5px dashed var(--slate-mute, #98A2A2);
	background: var(--sand, #E5E1DC) center/cover no-repeat;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; transition: border-color 0.3s, filter 0.3s;
}
.hq-biz-media--cover .hq-biz-media__preview.has-image { border: none; }
.hq-biz-media--cover .hq-biz-media__preview:hover { border-color: var(--champagne, #A99D8D); filter: brightness(0.97); }
.hq-biz-media--cover .hq-biz-media__cta {
	background: rgba(255,255,255,0.92); color: var(--slate, #60686F);
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
	padding: 0.7rem 1.4rem; border-radius: 100px; box-shadow: 0 4px 14px rgba(44,53,49,0.12);
}
.hq-biz-media--logo { position: absolute; left: 2rem; bottom: -2.4rem; z-index: 2; }
.hq-biz-media--logo .hq-biz-media__preview {
	width: 96px; height: 96px; border-radius: 50%;
	border: 4px solid var(--white, #fff);
	background: var(--cream, #F2F1EF) center/cover no-repeat;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; box-shadow: 0 6px 18px rgba(44,53,49,0.14);
	transition: filter 0.3s;
}
.hq-biz-media--logo .hq-biz-media__preview:hover { filter: brightness(0.95); }
.hq-biz-media--logo .hq-biz-media__cta { font-size: 1.5rem; font-weight: 300; color: var(--slate-mute, #98A2A2); }
.hq-biz-media--logo .hq-biz-media__preview.has-image .hq-biz-media__cta { opacity: 0; }
.hq-biz-media__status:empty { display: none; }
.hq-biz-media--logo .hq-biz-media__status { position: absolute; left: 0; top: 100%; white-space: nowrap; }

/* Name + Kategorie unter der Bühne, eingerückt neben dem Logo */
.hq-biz-stage__id { display: flex; gap: 1rem; align-items: center; padding: 1.2rem 0 0 9rem; flex-wrap: wrap; }
.hq-biz-stage__name {
	flex: 1; min-width: 220px;
	border: none !important; border-bottom: 1px solid var(--line, #DCDBD7) !important;
	border-radius: 0 !important; background: transparent !important;
	font-size: 1.5rem !important; font-weight: 300; color: var(--slate, #60686F);
	padding: 0.4rem 0 !important;
}
.hq-biz-stage__name:focus { border-bottom-color: var(--champagne, #A99D8D) !important; outline: none; box-shadow: none !important; }
.hq-biz-stage__cat {
	border: 1px solid var(--line, #DCDBD7); border-radius: 100px;
	padding: 0.6rem 1.2rem; font-family: inherit; font-size: 0.8rem; color: var(--slate, #60686F);
	background: var(--white, #fff); cursor: pointer;
}

@media (max-width: 880px) {
	.hq-biz-about { grid-template-columns: 1fr; }
	.hq-biz-media-row { grid-template-columns: 1fr; }
	.hq-biz-hero__inner { flex-direction: column; align-items: flex-start; }
}

/* --- Partner-Badge („Mein Betrieb", Ausbaustufe 3.4) --------- */
.hq-partner-badge { margin-top: 2.6rem; background: var(--white, #fff); border: 1px solid var(--line, #DCDBD7); border-left: 3px solid var(--champagne, #A99D8D); border-radius: 10px; padding: 1.6rem 1.8rem; max-width: 44rem; }
.hq-partner-badge__title { font-size: 1.05rem; font-weight: 400; color: var(--slate, #60686F); margin: 0 0 0.6rem; }
.hq-partner-badge p { font-size: 0.9rem; line-height: 1.65; color: var(--body, #454C52); margin: 0 0 0.9rem; }
.hq-partner-badge__preview a { color: var(--taupe, #776D5F); border-bottom: 1px solid var(--line, #DCDBD7); transition: border-color 0.3s; }
.hq-partner-badge__preview a:hover { border-color: var(--champagne, #A99D8D); }
.hq-partner-badge__label { display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--slate-soft, #7D888F); margin: 0.4rem 0 0.45rem; }
.hq-partner-badge .hq-copybox { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; line-height: 1.5; color: var(--body, #454C52); background: var(--cream, #F2F1EF); border: 1px solid var(--line, #DCDBD7); border-radius: 8px; padding: 0.7rem 0.8rem; resize: vertical; }
.hq-partner-badge .hq-copybox:focus { outline: none; border-color: var(--champagne, #A99D8D); }
.hq-partner-badge .hq-copy-btn { margin-top: 0.6rem; }
.hq-partner-badge .hq-copy-btn.is-copied { background: #4d6b52; border-color: #4d6b52; color: var(--cream, #F2F1EF); }
.hq-partner-badge .hq-hint { margin-top: 0.9rem; margin-bottom: 0; }