/* =====================================================================
   Harmonic Dogs – Design 0.22: ruhiger, heller Auftritt passend zur Website
   - Markenfarbe: Harmonic-Dogs-Grün #23803A (Kontrast zu Weiß 5 : 1), Hover #1B6A2F
   - Weiße Karten statt Farbverläufe/Glanz; Gruppenfarbe nur noch als Akzent (Streifen, Punkt)
   - Größere Schrift und Tippflächen (Formular 16 px, Felder 48 px hoch)
   Wird nach hdb.css / hdb-overview.css / hdb-calendar.css und VOR hdb-dark.css geladen,
   damit der Dunkelmodus (spezifischere Regeln) weiter Vorrang hat.
   ===================================================================== */

.hdb { --hdb-brand: #23803A; --hdb-brand-dark: #1B6A2F; --hdb-brand-tint: #EEF6EF; --hdb-brand-line: #CFE3D3;
	--hdb-accent: #23803A; --hdb-accent-dark: #1B6A2F;
	--hdb-text: #2D2B33; --hdb-muted: #5F5D6B; --hdb-border: #E4E1DA; --hdb-surface: #fff; --hdb-soft: #F8F7F4;
	--hdb-radius: 14px; --hdb-lift: 0 1px 2px rgba(30,28,24,.05), 0 10px 24px -18px rgba(30,28,24,.30); }
.hdb.hdb-wide { font-size: 1rem; line-height: 1.5; color: var(--hdb-text); }
.hdb a:not([class]) { color: var(--hdb-brand-dark); }
.hdb .hdb-small { color: var(--hdb-muted); }

/* ---------- Buttons ---------- */
.hdb .hdb-button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: .6rem 1.25rem; border-radius: 10px; background: var(--hdb-brand); color: #fff !important; font-weight: 600; font-size: 1rem; line-height: 1.2; letter-spacing: 0; text-transform: none; box-shadow: none; transition: background-color .15s ease; }
.hdb .hdb-button:hover, .hdb .hdb-button:focus { background: var(--hdb-brand-dark); }
.hdb .hdb-button:focus-visible { outline: 3px solid var(--hdb-brand); outline-offset: 2px; }
.hdb .hdb-button-alt { background: #fff; color: var(--hdb-brand-dark) !important; box-shadow: inset 0 0 0 2px var(--hdb-brand); }
.hdb .hdb-button-alt:hover, .hdb .hdb-button-alt:focus { background: var(--hdb-brand); color: #fff !important; }
.hdb .hdb-dialog .hdb-button, .hdb .hdb-offer-page .hdb-button, .hdb .hdb-choice .hdb-button { background: var(--hdb-brand); }
.hdb .hdb-dialog .hdb-button:hover, .hdb .hdb-offer-page .hdb-button:hover, .hdb .hdb-choice .hdb-button:hover { background: var(--hdb-brand-dark); }
.hdb .hdb-dialog .hdb-button-alt, .hdb .hdb-offer-page .hdb-button-alt { background: #fff; color: var(--hdb-brand-dark) !important; box-shadow: inset 0 0 0 2px var(--hdb-brand); }
.hdb .hdb-dialog .hdb-button-alt:hover, .hdb .hdb-offer-page .hdb-button-alt:hover { background: var(--hdb-brand); color: #fff !important; }

/* ---------- So funktioniert's ---------- */
.hdb .hdb-howto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 0 0 2.25rem; padding: 0; }
.hdb .hdb-howto-step { display: flex; align-items: center; gap: .75rem; margin: 0; padding: .85rem 1rem; border-radius: var(--hdb-radius); background: var(--hdb-brand-tint); border: 1px solid var(--hdb-brand-line); }
.hdb .hdb-howto-num { flex: none; width: 2rem; height: 2rem; border-radius: 999px; display: grid; place-items: center; background: var(--hdb-brand); color: #fff; font-weight: 700; font-size: .95rem; }
.hdb .hdb-howto-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.hdb .hdb-howto-text strong { font-size: .98rem; color: var(--hdb-text); }
.hdb .hdb-howto-text span { font-size: .85rem; color: var(--hdb-muted); }
@media (max-width: 760px) {
	.hdb .hdb-howto { grid-template-columns: 1fr; gap: .4rem; margin-bottom: 1.75rem; }
	.hdb .hdb-howto-step { padding: .6rem .8rem; }
	.hdb .hdb-howto-num { width: 1.7rem; height: 1.7rem; font-size: .85rem; }
}

/* ---------- Abschnitte ---------- */
.hdb .hdb-section { margin-bottom: 3rem; }
.hdb .hdb-section-title { margin: 0 0 1rem; }

/* ---------- Angebotsübersicht: Lebensphasen ---------- */
.hdb .hdb-step { background: var(--hdb-surface); border: 1px solid var(--hdb-border); border-radius: var(--hdb-radius);
	box-shadow: inset 0 4px 0 var(--hdb-accent), var(--hdb-lift); transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.hdb .hdb-step-num { background: var(--hdb-bg1); color: var(--hdb-tile-ink); box-shadow: inset 0 0 0 1.5px var(--hdb-accent); font-weight: 700; }
.hdb .hdb-step-title { color: var(--hdb-text); }
.hdb .hdb-step-text { color: var(--hdb-muted); }
.hdb .hdb-step-count { color: var(--hdb-muted); font-weight: 600; opacity: 1; }
.hdb .hdb-step-toggle { border: 1.5px solid #CFCBC2; background: #fff; box-shadow: none; }
.hdb .hdb-step-toggle::before, .hdb .hdb-step-toggle::after { background: var(--hdb-text); }
.hdb details.hdb-step > summary:hover .hdb-step-toggle, .hdb details.hdb-step[open] .hdb-step-toggle { background: var(--hdb-brand); border-color: var(--hdb-brand); }
.hdb details.hdb-step > summary:hover .hdb-step-toggle::before, .hdb details.hdb-step > summary:hover .hdb-step-toggle::after,
.hdb details.hdb-step[open] .hdb-step-toggle::before, .hdb details.hdb-step[open] .hdb-step-toggle::after { background: #fff; }
.hdb details.hdb-step > summary:focus-visible .hdb-step-toggle { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--hdb-brand); }
.hdb details.hdb-step:hover { border-color: #CFCBC2; }
.hdb details.hdb-step[open] { border-color: var(--hdb-accent); background: var(--hdb-bg1); }

/* Angebots-Kacheln */
.hdb .hdb-chip { background: #fff; border: 1px solid var(--hdb-border); border-radius: 12px; color: var(--hdb-text) !important;
	box-shadow: inset 4px 0 0 var(--hdb-accent), 0 1px 2px rgba(30,28,24,.04); padding: .8rem .85rem .8rem 1rem; }
.hdb .hdb-chip:hover { transform: translateY(-1px); border-color: #CFCBC2; box-shadow: inset 4px 0 0 var(--hdb-accent), 0 8px 18px -12px rgba(30,28,24,.35); }
.hdb .hdb-chip:focus-visible { outline: 3px solid var(--hdb-brand); }
.hdb .hdb-chip-title { color: var(--hdb-text); }
.hdb .hdb-chip-meta { color: var(--hdb-muted); font-size: .85rem; }
.hdb .hdb-chip-arrow { color: var(--hdb-brand); opacity: 1; }

/* Web/Tablet: Angebote der geöffneten Lebensphase breit unter der Kachelreihe */
@media (min-width: 761px) {
	.hdb .hdb-path.js-panel details.hdb-step > .hdb-step-offers { display: none; }
	.hdb .hdb-path.js-panel details.hdb-step[open] > summary { margin-bottom: 0; }
	.hdb .hdb-path.js-panel .hdb-path-steps { align-items: stretch; }
	.hdb .hdb-path.js-panel .hdb-step-wrap > .hdb-step { height: 100%; }
	.hdb .hdb-path.js-panel details.hdb-step[open] { position: relative; }
	.hdb .hdb-path.js-panel details.hdb-step[open]::after { content: ""; position: absolute; left: 50%; bottom: -.95rem; width: 0; height: 0; margin-left: -.6rem; border: .6rem solid transparent; border-top-color: var(--hdb-accent); }
}
.hdb .hdb-path-panel { margin: 1.1rem 0 0; padding: 1.1rem 1.25rem 1.25rem; border-radius: var(--hdb-radius); background: var(--hdb-bg1, var(--hdb-soft)); border: 1px solid var(--hdb-accent, var(--hdb-border)); animation: hdb-unfold .2s ease-out; }
.hdb .hdb-path-panel[hidden] { display: none; }
.hdb .hdb-path-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 .85rem; }
.hdb .hdb-path-panel-title { font-weight: 700; font-size: 1.1rem; color: var(--hdb-text); }
.hdb .hdb-path-panel-close { font: inherit; font-size: .9rem; font-weight: 600; padding: .4rem .9rem; min-height: 38px; border-radius: 999px; border: 1px solid #CFCBC2; background: #fff; color: var(--hdb-text); cursor: pointer; }
.hdb .hdb-path-panel-close:hover { border-color: var(--hdb-brand); color: var(--hdb-brand-dark); }
.hdb .hdb-path-panel .hdb-step-offers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); gap: .75rem; }
.hdb .hdb-path-panel .hdb-chip { height: 100%; }
@media (prefers-reduced-motion: reduce) { .hdb .hdb-path-panel { animation: none; } }

/* Detailfenster */
.hdb .hdb-dialog { border-radius: 16px; }
.hdb .hdb-dialog-head { background: #fff; box-shadow: inset 0 4px 0 var(--hdb-accent); border-bottom: 1px solid var(--hdb-border); }
.hdb .hdb-dialog-head h3 { color: var(--hdb-text); }
.hdb .hdb-dialog-type { color: var(--hdb-tile-ink); opacity: 1; }
.hdb .hdb-dialog-close { border-color: var(--hdb-border); color: var(--hdb-text); }
.hdb .hdb-dialog-close:hover { background: var(--hdb-text); color: #fff; }
.hdb .hdb-facts-grid { background: var(--hdb-soft); }
.hdb .hdb-facts-grid dt, .hdb .hdb-detail-h { color: var(--hdb-muted); }
.hdb .hdb-dates li { gap: .5rem .75rem; padding: .75rem 0; }

/* ---------- Wochenplan ---------- */
.hdb .hdb-cal { --hdb-hour-h: 96px; --hdb-ink: var(--hdb-text); --hdb-muted: var(--hdb-muted); --hdb-line: #ECE9E3; --hdb-bg: var(--hdb-soft); }
.hdb .hdb-cal-kw { background: var(--hdb-brand); }
.hdb .hdb-cal-btn { box-shadow: none; border-color: #D9D5CC; min-height: 44px; min-width: 44px; }
.hdb .hdb-cal-btn:hover { transform: none; box-shadow: none; border-color: var(--hdb-brand); color: var(--hdb-brand-dark) !important; }
.hdb .hdb-cal-btn:focus-visible, .hdb .hdb-cal-fbtn:focus-visible { outline-color: var(--hdb-brand); }
.hdb .hdb-cal-fbtn { min-height: 38px; padding: .4rem .95rem; font-size: .9rem; color: var(--hdb-text); border-color: #D9D5CC; }
.hdb .hdb-cal-fbtn:hover { border-color: var(--hdb-brand); color: var(--hdb-brand-dark); }
.hdb .hdb-cal-fbtn.is-active { background: var(--hdb-brand); border-color: var(--hdb-brand); color: #fff; }
.hdb .hdb-cal-grid { border-radius: var(--hdb-radius); box-shadow: var(--hdb-lift); border-color: var(--hdb-border); }
.hdb .hdb-cal-day.is-weekend .hdb-cal-col { background-color: #FCFCFA; }
.hdb .hdb-cal-day.is-today .hdb-cal-dayhead { background: var(--hdb-brand-tint); }
.hdb .hdb-cal-day.is-today .hdb-cal-date { background: var(--hdb-brand); }
.hdb .hdb-cal-pastnote { display: none; }

/* Kacheln: flach, getönt, Gruppenfarbe als Streifen – ohne Glanz und schwere Schatten */
.hdb .hdb-tile { background: var(--hdb-bg1); border: 1px solid var(--hdb-edge); border-radius: 10px;
	box-shadow: inset 4px 0 0 var(--hdb-accent), 0 1px 2px rgba(30,28,24,.06); }
.hdb .hdb-tile::before { display: none; }
.hdb a.hdb-tile:hover { transform: translateY(-1px); box-shadow: inset 4px 0 0 var(--hdb-accent), 0 8px 16px -10px rgba(30,28,24,.4); }
.hdb .hdb-tile .hdb-tile-status { background: var(--hdb-brand-dark); }
.hdb .hdb-tile.is-past { opacity: .45; filter: grayscale(1); box-shadow: inset 4px 0 0 var(--hdb-accent); }
.hdb .hdb-tile.is-past .hdb-tile-status { background: #66636D; }
.hdb .hdb-tile.is-cancelled { background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.05) 0 8px, transparent 8px 16px); }

/* Freie Einzeltermine im Raster: nur Uhrzeit + „frei“ (Erklärung steht in der Legende) */
.hdb .hdb-slot { background: #FBFDFB; border: 1px dashed #BFD8C5; color: var(--hdb-muted) !important; }
.hdb .hdb-slot.is-hour .hdb-slot-title, .hdb .hdb-slot.is-hour .hdb-slot-sub { display: none !important; }
.hdb .hdb-slot.is-hour { justify-content: center; }
.hdb .hdb-slot-cta { color: var(--hdb-brand-dark); border-color: var(--hdb-brand-line); }
.hdb a.hdb-slot:hover, .hdb a.hdb-slot:focus-visible { border-color: var(--hdb-brand); background: var(--hdb-brand-tint); }
.hdb a.hdb-slot:hover .hdb-slot-cta { background: var(--hdb-brand); border-color: var(--hdb-brand); color: #fff; }
.hdb .hdb-cal-dot-free { background: #FBFDFB !important; border: 1.5px dashed #9CC4A6; }
.hdb .hdb-cal-legend { color: var(--hdb-muted); }
.hdb .hdb-cal-dot { box-shadow: none; border-radius: 999px; }

/* Handy/Tablet-Liste: nur kommende Termine */
@media (max-width: 1024px) {
	.hdb .hdb-cal-pastnote { display: block; margin: -.25rem 0 1rem; font-size: .85rem; color: var(--hdb-muted); }
	.hdb .hdb-cal-day.is-over { display: none; }
	.hdb .hdb-tile.is-past:not(.is-running) { display: none; }
	.hdb .hdb-tile { padding: .8rem 1rem .8rem 1.1rem; }
	.hdb .hdb-cal-dayhead { font-size: 1rem; }
	.hdb .hdb-free-chips { background: #FBFDFB; border-color: #BFD8C5; }
	.hdb .hdb-free-chip { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; border-color: var(--hdb-brand-line); color: var(--hdb-brand-dark) !important; }
	.hdb .hdb-free-chip:hover, .hdb .hdb-free-chip:focus-visible { background: var(--hdb-brand); border-color: var(--hdb-brand); color: #fff !important; }
}

/* ---------- Buchungsformular ---------- */
.hdb [data-hdb-key="form"], .hdb [data-hdb-key="notice"] { max-width: 760px; margin-left: auto; margin-right: auto; }
.hdb .hdb-back { margin: 0 0 1rem; }
.hdb .hdb-back a { color: var(--hdb-brand-dark); font-weight: 600; text-decoration: none; }
.hdb .hdb-back a:hover { text-decoration: underline; }
.hdb .hdb-summary, .hdb .hdb-offer { border-radius: var(--hdb-radius); border-color: var(--hdb-border); box-shadow: var(--hdb-lift); padding: 1.25rem 1.5rem; }
.hdb .hdb-summary h3 { color: var(--hdb-text); font-size: 1.35rem; line-height: 1.3; }
.hdb .hdb-badge { background: var(--hdb-brand-tint); color: var(--hdb-brand-dark); font-weight: 700; }
.hdb .hdb-form fieldset { margin: 0 0 1.25rem; padding: 1.1rem 1.5rem 1.25rem; border: 1px solid var(--hdb-border); border-radius: var(--hdb-radius); background: #fff; }
.hdb .hdb-form legend { float: left; width: 100%; margin: 0 0 .75rem; padding: 0; font-size: 1.1rem; font-weight: 700; color: var(--hdb-text); }
.hdb .hdb-form legend + * { clear: both; }
.hdb .hdb-form fieldset p { margin: 0 0 .9rem; }
.hdb .hdb-form fieldset p:last-child { margin-bottom: 0; }
.hdb .hdb-form label { font-weight: 600; font-size: .95rem; color: var(--hdb-text); margin-bottom: .3rem; }
.hdb .hdb-form input[type=text], .hdb .hdb-form input[type=email], .hdb .hdb-form input[type=tel], .hdb .hdb-form textarea {
	min-height: 48px; padding: .7rem .85rem; border: 1px solid #CBC7BE; border-radius: 10px; background: #fff; font-size: 16px; line-height: 1.4; color: var(--hdb-text); box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease; }
.hdb .hdb-form input:focus, .hdb .hdb-form textarea:focus { outline: none; border-color: var(--hdb-brand); box-shadow: 0 0 0 3px rgba(35,128,58,.18); }
.hdb .hdb-form input::placeholder, .hdb .hdb-form textarea::placeholder { color: #8C8995; }
.hdb .hdb-fields { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
.hdb .hdb-fields > p { margin: 0 0 .9rem; }
@media (min-width: 640px) {
	.hdb .hdb-fields { grid-template-columns: 1fr 1fr; }
	.hdb .hdb-fields > p:first-child, .hdb .hdb-fields > p:has(textarea) { grid-column: 1 / -1; }
	.hdb .hdb-fields > p:nth-last-child(-n+2):not(:first-child) { margin-bottom: 0; }
}
@media (max-width: 639px) { .hdb .hdb-fields > p:last-child { margin-bottom: 0; } }
.hdb .hdb-pay-choice .hdb-radio { border-radius: 12px; padding: .85rem 1rem; }
.hdb .hdb-pay-choice .hdb-radio:has(input:checked) { border-color: var(--hdb-brand); background: var(--hdb-brand-tint); box-shadow: inset 3px 0 0 var(--hdb-brand); }
.hdb .hdb-form input[type=radio], .hdb .hdb-form input[type=checkbox] { width: 1.2rem; height: 1.2rem; accent-color: var(--hdb-brand); flex: none; }
.hdb .hdb-form p.hdb-consent, .hdb .hdb-form .hdb-terms p, .hdb .hdb-form p:has(> label > input[type=checkbox]) { margin: 0 0 .75rem; }
.hdb .hdb-form label:has(> input[type=checkbox]) { display: flex; align-items: flex-start; gap: .65rem; font-weight: 400; font-size: .95rem; line-height: 1.45; cursor: pointer; }
.hdb .hdb-form label:has(> input[type=checkbox]) input { margin: .12rem 0 0; }
.hdb .hdb-submit-row { margin: 1.5rem 0 .6rem; }
.hdb .hdb-button.hdb-submit { min-height: 54px; min-width: 280px; padding: .8rem 2rem; font-size: 1.1rem; font-weight: 700; border-radius: 12px; }
.hdb .hdb-after-note { margin: 0; }
@media (max-width: 760px) {
	.hdb .hdb-button.hdb-submit { width: 100%; min-width: 0; }
	.hdb .hdb-form fieldset { padding: 1rem 1rem 1.1rem; }
	.hdb .hdb-summary { padding: 1rem 1.1rem; }
}
.hdb .hdb-notice { border-radius: var(--hdb-radius); }
.hdb .hdb-success { background: var(--hdb-brand-tint); border-color: var(--hdb-brand-line); }
.hdb .hdb-form .hdb-pay-choice label.hdb-radio { font-weight: 400; }
.hdb .hdb-form .hdb-pay-choice label.hdb-radio strong { font-weight: 700; }
@media (max-width: 1024px) { .hdb .hdb-path.js-panel details.hdb-step[open]::after { display: none; } }