/* OpenDirection Referenzhandbuch 2026 - scoped styles; no overrides of existing site */
.od-hb { --od-hb-navy:#102c3c; --od-hb-teal:#0d9e93; --od-hb-mint:#b4f4e6; box-sizing:border-box; font-family:inherit; }
.od-hb *, .od-hb *::before, .od-hb *::after { box-sizing:border-box; }
.od-hb a { text-decoration:none; }
.od-hb-banner { display:grid; grid-template-columns:minmax(0,1fr) 170px; gap:32px; align-items:center; padding:38px 43px; background:linear-gradient(118deg,#102c3c 5%,#123647 67%,#086d6f 150%); border-radius:22px; color:#fff; box-shadow:0 14px 34px rgba(8,34,50,.13); }
.od-hb-main { max-width:1140px; margin:clamp(34px,5vw,70px) auto; padding:0 20px; width:100%; clear:both; }
.od-hb-kicker { font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:#9be8dc; margin:0 0 12px; }
.od-hb-title { color:#fff !important; font-size:clamp(1.55rem,2.6vw,2.38rem); line-height:1.15; letter-spacing:-.022em; margin:0 0 13px; font-weight:750; }
.od-hb-body { color:#e0eef0; font-size:1rem; line-height:1.66; margin:0 0 16px; max-width:660px; }
.od-hb-meta { display:flex; flex-wrap:wrap; gap:7px 16px; color:#b6d2d7; font-size:.84rem; margin:12px 0 22px; }
.od-hb-buttons { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.od-hb-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:46px; padding:11px 19px; background:#0db3a5; border:1px solid #0db3a5; border-radius:9px; font-size:.95rem; line-height:1.3; font-weight:700; color:#082b35 !important; transition:filter .2s; }
.od-hb-button:hover, .od-hb-button:focus-visible { filter:brightness(1.13); }
.od-hb-button-alt { background:transparent; border-color:#b8d0d7; color:#fff !important; }
.od-hb-cover { display:block; max-width:100%; width:170px; height:auto; border-radius:5px; box-shadow:0 16px 32px rgba(0,0,0,.23); }
.od-hb-note { margin:14px 0 0; color:#e3f5ef; opacity:.85; font-size:.77rem; line-height:1.5; }
.od-hb-download { margin:26px auto 34px; }
.od-hb-download .od-hb-banner { grid-template-columns:155px minmax(0,1fr); }
.od-hb-download .od-hb-cover { width:155px; }
.od-hb-matrix { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.od-hb-matrix figure { margin:0; }
.od-hb-matrix img { width:100%; height:auto; border:1px solid #c8dade; border-radius:10px; background:white; }
.od-hb-matrix figcaption { margin-top:10px; color:#4a5d65; font-size:.9rem; }
@media(max-width:670px) { .od-hb-banner { grid-template-columns:1fr; padding:28px 24px; gap:20px; } .od-hb-main { padding:0 14px; margin:30px auto; } .od-hb-cover { width:128px; } .od-hb-download .od-hb-banner { grid-template-columns:1fr; } .od-hb-download .od-hb-cover { width:128px; } .od-hb-matrix { grid-template-columns:1fr; } }