/* F01 content styling. Header/menu styling and animations remain unchanged in site.css. */
.bereichsseite { --area-accent: #007a99; }
.bereichsseite[data-active-area="rent"] { --area-accent: #527511; }
.bereichsseite[data-active-area="workwear"] { --area-accent: #a95100; }
.bereichsseite[data-active-area="skischule"] { --area-accent: #b72e1b; }
.bereichsseite[data-active-area="racing"] { --area-accent: #164879; }
.bereichsseite .skip-link {
    position: fixed; top: 8px; left: 16px; z-index: 100;
    padding: 10px 18px; border-radius: 8px; background: #fff; color: var(--ink);
    transform: translateY(-150%);
}
.bereichsseite .skip-link:focus { transform: none; }
.bereichsseite .area-intro { padding-block: clamp(36px, 5vw, 72px); }
.bereichsseite .area-intro__copy { gap: 22px; min-width: 0; }
.bereichsseite .area-intro h1 { hyphens: auto; overflow-wrap: anywhere; }
.bereichsseite .area-intro h1 { font-size: clamp(40px, 4.8vw, 72px); }
.bereichsseite .area-intro__image { aspect-ratio: 5 / 4; background: #292d32; }
.bereichsseite .area-intro__image--blank { color: #f1f1ed; }
.bereichsseite .area-label i { background: var(--area-accent); }
.bereichsseite .area-content--white { background: #fff; }
.bereichsseite .button--red,
.bereichsseite .mobile-booking a:last-child { background: var(--area-accent); }
.bereichsseite .button--red:hover,
.bereichsseite .mobile-booking a:last-child:hover { background: var(--ink); }
.bereichsseite .site-footer { background: #23272c; }
.bereichsseite .mobile-booking { display: none; }
.bereichsseite .actions { gap: 12px; }
.bereichsseite .request-form { min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bereichsseite .request-form label { min-width: 0; }
.bereichsseite .request-form input,
.bereichsseite .request-form textarea { min-width: 0; width: 100%; }
@media (max-width: 1100px) {
    .bereichsseite .area-intro { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .bereichsseite .area-intro__copy { max-width: 720px; }
    .bereichsseite .area-intro__image { aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
    .bereichsseite .area-intro { padding-top: 30px; gap: 26px; }
    .bereichsseite .area-intro h1 { font-size: clamp(36px, 10vw, 46px); }
    .bereichsseite .area-intro__copy { gap: 18px; }
    .bereichsseite .area-intro p { font-size: 17px; }
    .bereichsseite .button { font-size: 15px; padding-inline: 20px; min-height: 50px; }
    .bereichsseite .mobile-booking { display: flex; }
    .bereichsseite .mobile-booking a:last-child { font-size: 15px; }
    .bereichsseite .request-form { grid-template-columns: minmax(0, 1fr); }
    .bereichsseite .request-form input,
    .bereichsseite .request-form textarea { min-width: 0; width: 100%; }
    .bereichsseite .courses h3 { flex-direction: column; }
    .bereichsseite .courses p { flex-wrap: wrap; gap: 4px; }
    .bereichsseite .school-details { grid-template-columns: minmax(0, 1fr); gap: 6px; font-size: 16px; }
    .bereichsseite .school-details dd { margin-bottom: 16px; }
    .bereichsseite .site-footer { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
}