/* Visuelle Beispiele des Website-Widgets (inc/partials/widget-demo.php) – /entwickler und anbieter/website-einbinden.php */
.dev-demo__title { margin: 32px 0 14px; font-size: 1.1rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dev-demo { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); align-items: start; }
.dev-demo__item { margin: 0; display: grid; gap: 10px; min-width: 0; }
.dev-demo__browser { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 10px 30px rgba(3, 103, 211, .08); }
.dev-demo__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #eef2f7; border-bottom: 1px solid var(--line); }
.dev-demo__bar i { width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1; flex: 0 0 auto; }
.dev-demo__bar i:nth-child(1) { background: var(--logo-red); }
.dev-demo__bar i:nth-child(2) { background: var(--logo-yellow); }
.dev-demo__bar i:nth-child(3) { background: var(--logo-green); }
.dev-demo__url { margin-left: 8px; flex: 1; min-width: 0; padding: 3px 10px; border-radius: 999px; background: #fff; font-size: .72rem; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-demo__site { padding: 14px; background: #fbfcfe; }
.dev-demo__sitehead { font-weight: 800; font-size: .95rem; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 2px solid #1f2937; color: #1f2937; letter-spacing: .01em; }
.dev-demo__cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr)); }
.dev-demo__card { border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.dev-demo__img { aspect-ratio: 4 / 3; background: #f3f5f8; display: flex; align-items: center; justify-content: center; font-size: 30px; }
.dev-demo__img { overflow: hidden; }
.dev-demo__img img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.dev-demo__body { padding: 8px 9px 10px; display: flex; flex-direction: column; gap: 2px; font-size: .74rem; line-height: 1.3; flex: 1; }
.dev-demo__body strong { font-size: .82rem; color: #1f2937; }
.dev-demo__cat { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #6b7280; }
.dev-demo__meta { color: #6b7280; }
.dev-demo__meta b { color: #b45309; font-weight: 500; }
.dev-demo__price { font-weight: 700; color: #1f2937; margin-top: 2px; }
.dev-demo__btns { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; padding-top: 6px; }
.dev-demo__btn { display: inline-flex; justify-content: center; padding: 4px 9px; border-radius: 999px; border: 2px solid var(--brand2, #0367d3); background: var(--brand2, #0367d3); color: #fff; font-weight: 700; font-size: .68rem; }
.dev-demo__btn--ghost { background: transparent; color: var(--brand2, #0367d3); }
.dev-demo__btn--full { width: 100%; margin-top: 8px; padding: 6px 9px; }
.dev-demo__brand { margin-top: 10px; text-align: right; font-size: .66rem; color: #6b7280; }
.dev-demo__detail { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); align-items: start; font-size: .76rem; }
.dev-demo__h { display: block; font-size: .95rem; color: #1f2937; margin: 2px 0; }
.dev-demo__cal { margin-top: 10px; }
.dev-demo__month { display: block; font-weight: 700; margin-bottom: 6px; color: #1f2937; }
.dev-demo__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; font-size: .66rem; }
.dev-demo__dow { color: #6b7280; font-weight: 700; }
.dev-demo__day { padding: 3px 0; border-radius: 4px; }
.dev-demo__day--free { background: #dcfce7; color: #166534; }
.dev-demo__day--booked { background: #fee2e2; color: #991b1b; text-decoration: line-through; }
.dev-demo__form { padding: 10px; border: 1px solid #e5e7eb; border-radius: 10px; background: #f6f8fb; display: flex; flex-direction: column; gap: 3px; }
.dev-demo__form strong { color: #1f2937; margin-bottom: 4px; }
.dev-demo__label { font-weight: 600; font-size: .68rem; color: #374151; }
.dev-demo__input { height: 22px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; margin-bottom: 4px; }
.dev-demo__card { min-width: 0; }
.dev-demo__body strong { overflow-wrap: anywhere; hyphens: auto; }

/* Link zum Live-Beispiel (hops24.de/demo) */
.widget-demo__live { grid-column: 1 / -1; margin: 6px 0 0; text-align: center; }