/* Layout „Portal“ – Banner und große Aktionskacheln, Informationen zuerst. */
.portal-banner { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(14rem, 30vw, 22rem); background: var(--accent-strong); color: #fff; overflow: hidden; }
.portal-banner.has-image { min-height: clamp(18rem, 36vw, 27rem); }
.portal-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.portal-banner.has-image::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(8, 18, 22, .9) 0%, rgba(8, 18, 22, .72) 38%, rgba(8, 18, 22, .2) 75%, rgba(8, 18, 22, .1) 100%); }
.portal-text { padding-top: 3rem; padding-bottom: clamp(4.5rem, 8vw, 6rem); }
.portal-text .hero-title { color: #fff; font-size: clamp(2.2rem, 1.3rem + 3.2vw, 3.6rem); max-width: 22ch; margin: .6rem 0 .3rem; }
.portal-text .hero-lead { color: rgba(255, 255, 255, .92); margin: 0; }
.portal-bar { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr); gap: .9rem; margin-top: clamp(-3.5rem, -5vw, -2.5rem); }
.portal-today { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.3rem 1.4rem; box-shadow: var(--shadow-float); }
.actions-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); gap: .9rem; }
.tile-action { display: flex; flex-direction: column; gap: .7rem; height: 100%; padding: 1.3rem 1.3rem 1.4rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-float); }
.tile-action .icon { width: 1.7rem; height: 1.7rem; color: var(--accent); }
.tile-action .action-label { font-weight: 650; font-size: 1.05rem; line-height: 1.25; }
.tile-action .action-hint { overflow-wrap: anywhere; margin-top: .15rem; }
.tile-action:hover { border-color: var(--accent); }
.tile-action.is-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.tile-action.is-primary .icon, .tile-action.is-primary .action-hint { color: #fff; }
.portal-banner :focus-visible { outline-color: #fff; }
.hero-portal { padding-bottom: clamp(1rem, 3vw, 2rem); }
@media (max-width: 52rem) {
  .portal-bar { grid-template-columns: minmax(0, 1fr); }
  .actions-tiles { grid-template-columns: 1fr 1fr; }
}