/* =====================================================================
   Audio Wonder – akoestische panelen voor scholen
   Externe stylesheet. Rustig, warm, licht en professioneel.
   Kleurenstaat volgens de huisstijl.
   ===================================================================== */

:root {
    /* Kleurenstaat */
    --kleur-wit-ivoor:   #FAF8F5;
    --kleur-licht-beige: #F2ECE3;
    --kleur-zand:        #E6DCC8;
    --kleur-hout:        #D9C3A1;
    --kleur-blauwgrijs:  #AFC6D6;
    --kleur-bordeaux:    #7B1E2D;
    --kleur-taupe:       #B8AFA1;
    --kleur-zacht-grijs: #D9D9D6;
    --kleur-dusty-blue:  #6E8BA4;
    --kleur-sage:        #A8B59B;
    --kleur-terracotta:  #C76E54;
    --kleur-antraciet:   #2F2F2F;

    /* Functionele toewijzingen */
    --tekst:            var(--kleur-antraciet);
    --tekst-zacht:      #5c5750;
    --accent:           var(--kleur-bordeaux);
    --accent-hover:     #66161f;
    --achtergrond:      var(--kleur-wit-ivoor);
    --vlak:             #ffffff;

    /* Vormen */
    --radius-s: 10px;
    --radius-m: 18px;
    --radius-l: 28px;
    --radius-xl: 40px;

    /* Schaduw – zacht en subtiel */
    --schaduw-zacht: 0 10px 30px rgba(47, 47, 47, 0.06);
    --schaduw-kaart: 0 14px 40px rgba(47, 47, 47, 0.08);

    /* Typografie */
    --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

    /* Maatvoering */
    --maxbreedte: 1180px;
    --sectie-ruimte: clamp(3.5rem, 8vw, 7rem);
}

/* ----------------------------- Basis ------------------------------ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* Compenseer de vaste header bij ankerlinks. */
    scroll-padding-top: 96px;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--tekst);
    background-color: var(--achtergrond);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.15;
    color: var(--tekst);
    margin: 0 0 0.6em;
    letter-spacing: 0.01em;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }

p { margin: 0 0 1.1rem; }

a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover { color: var(--accent-hover); }

img { max-width: 100%; display: block; }

:focus-visible {
    outline: 3px solid var(--kleur-dusty-blue);
    outline-offset: 3px;
    border-radius: 4px;
}

/* --------------------------- Layout ------------------------------- */

.aw-container {
    width: 100%;
    max-width: var(--maxbreedte);
    margin-inline: auto;
    padding-inline: clamp(1.2rem, 4vw, 2.5rem);
}

.aw-section {
    padding-block: var(--sectie-ruimte);
}

.aw-section--tint   { background-color: var(--kleur-licht-beige); }
.aw-section--sand   { background-color: var(--kleur-zand); }
.aw-section--white  { background-color: var(--vlak); }

.aw-section__intro {
    max-width: 720px;
    margin-bottom: 2.8rem;
}

.aw-eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.9rem;
}

.aw-lead {
    font-size: 1.18rem;
    color: var(--tekst-zacht);
}

/* --------------------------- Knoppen ------------------------------ */

.aw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.95rem 1.7rem;
    border-radius: 999px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.18s ease, background-color 0.2s ease,
                color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    text-align: center;
}

.aw-btn:hover { transform: translateY(-2px); }
.aw-btn:active { transform: translateY(0); }

/* Primaire actie – bordeaux, alleen voor belangrijke accenten */
.aw-btn--primary {
    background-color: var(--accent);
    color: #fff;
    box-shadow: 0 10px 24px rgba(123, 30, 45, 0.25);
}
.aw-btn--primary:hover {
    background-color: var(--accent-hover);
    color: #fff;
}

/* Secundaire actie – rustig, omlijnd */
.aw-btn--ghost {
    background-color: transparent;
    color: var(--tekst);
    border-color: var(--kleur-hout);
}
.aw-btn--ghost:hover {
    background-color: var(--kleur-hout);
    color: var(--tekst);
}

.aw-btn--light {
    background-color: #fff;
    color: var(--accent);
}
.aw-btn--light:hover { background-color: var(--kleur-licht-beige); }

.aw-btn--small {
    padding: 0.65rem 1.2rem;
    font-size: 0.92rem;
}

/* ----------------------------- Logo ------------------------------- */

.aw-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
    color: var(--tekst);
}

.aw-logo:hover { color: var(--tekst); }

/* Icoon: houten paneel met geluidsgolf, volledig in CSS opgebouwd. */
.aw-logo__mark {
    position: relative;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(170deg, var(--kleur-zand), var(--kleur-hout));
    flex: 0 0 auto;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

/* Verticale paneellatten via een herhalend verloop. */
.aw-logo__slats {
    position: absolute;
    inset: 6px 6px 20px 6px;
    border-radius: 7px;
    background-image: repeating-linear-gradient(
        90deg,
        #c9ad84 0 4px,
        #ddc7a3 4px 9px
    );
    opacity: 0.9;
}

/* Blauwe geluidsgolf onderlangs. */
.aw-logo__wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 20px;
    background: var(--kleur-blauwgrijs);
    -webkit-mask: radial-gradient(14px 14px at 50% 0, transparent 13px, #000 14px);
            mask: radial-gradient(14px 14px at 50% 0, transparent 13px, #000 14px);
}

.aw-logo__text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.aw-logo__name {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kleur-antraciet);
}

.aw-logo__tagline {
    font-family: var(--font-body);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--kleur-dusty-blue);
    margin-top: 0.35rem;
}

/* --------------------------- Header ------------------------------- */

.aw-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: rgba(250, 248, 245, 0.88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(47, 47, 47, 0.06);
}

.aw-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 0.85rem;
}

.aw-nav {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    flex-wrap: wrap;
}

.aw-nav__link {
    font-weight: 500;
    color: var(--tekst);
    font-size: 0.98rem;
}

.aw-nav__link:hover { color: var(--accent); }

.aw-header .aw-btn { white-space: nowrap; }

/* ----------------------------- Hero ------------------------------- */

.aw-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(120% 120% at 85% 0%, var(--kleur-licht-beige) 0%, var(--kleur-wit-ivoor) 55%);
    padding-block: clamp(3rem, 7vw, 6rem);
}

/* Subtiele paneel/houtstructuur op de achtergrond. */
.aw-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        90deg,
        rgba(217, 195, 161, 0.16) 0 2px,
        transparent 2px 46px
    );
    pointer-events: none;
}

.aw-hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.aw-hero__title { margin-bottom: 0.6rem; }

.aw-hero__subtitle {
    font-size: 1.25rem;
    color: var(--tekst-zacht);
    max-width: 38ch;
    margin-bottom: 2rem;
}

.aw-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Beeldvlak/placeholder van een klaslokaal met panelen. */
.aw-hero__visual {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-xl);
    background: linear-gradient(160deg, var(--kleur-blauwgrijs) 0%, var(--kleur-dusty-blue) 100%);
    box-shadow: var(--schaduw-kaart);
    overflow: hidden;
}

.aw-hero__visual::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 38%;
    background: linear-gradient(180deg, transparent, rgba(47, 47, 47, 0.18));
}

/* Decoratieve "akoestische panelen" in het beeldvlak. */
.aw-panel-grid {
    position: absolute;
    inset: 12% 10% 26% 10%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 12px;
    z-index: 1;
}

.aw-panel-grid__tile {
    border-radius: 14px;
    background: repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.12) 0 3px,
        rgba(255, 255, 255, 0.02) 3px 8px
    ),
    var(--kleur-hout);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.aw-panel-grid__tile:nth-child(2) { background-color: var(--kleur-sage); }
.aw-panel-grid__tile:nth-child(3) { background-color: var(--kleur-terracotta); }
.aw-panel-grid__tile:nth-child(4) { background-color: var(--kleur-taupe); }
.aw-panel-grid__tile:nth-child(5) { background-color: var(--kleur-bordeaux); }
.aw-panel-grid__tile:nth-child(6) { background-color: var(--kleur-zand); }

.aw-hero__caption {
    position: absolute;
    left: 8%;
    bottom: 7%;
    z-index: 2;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 500;
    text-shadow: 0 1px 6px rgba(0,0,0,0.35);
}

/* ----------------------- Wat zijn panelen ------------------------- */

.aw-explain {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

/* Visuele opbouw van een paneel (frame → vulling → doek). */
.aw-explain__visual {
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-l);
    background-color: var(--kleur-hout);
    padding: 22px;
    box-shadow: var(--schaduw-kaart);
}

.aw-explain__cloth {
    height: 100%;
    border-radius: var(--radius-m);
    background:
        repeating-linear-gradient(
            90deg,
            rgba(0,0,0,0.03) 0 2px,
            transparent 2px 5px
        ),
        linear-gradient(135deg, var(--kleur-sage), #93a386);
    box-shadow: inset 0 0 40px rgba(0,0,0,0.08);
}

.aw-feature-list {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.aw-feature-list li {
    position: relative;
    padding-left: 2.2rem;
    color: var(--tekst-zacht);
}

.aw-feature-list li strong { color: var(--tekst); }

.aw-feature-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45rem;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background-color: var(--kleur-licht-beige);
    border: 2px solid var(--accent);
    background-image: linear-gradient(45deg, transparent 45%, var(--accent) 45% 55%, transparent 55%),
                      linear-gradient(-45deg, transparent 45%, var(--accent) 45% 55%, transparent 55%);
    background-size: 0.7rem 0.7rem;
    background-position: center;
    background-repeat: no-repeat;
}

/* ----------------------------- Cards ------------------------------ */

.aw-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.aw-card {
    background-color: var(--vlak);
    border-radius: var(--radius-l);
    padding: 2rem 1.8rem;
    box-shadow: var(--schaduw-zacht);
    border: 1px solid rgba(47, 47, 47, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.aw-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--schaduw-kaart);
}

.aw-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    margin-bottom: 1.1rem;
    background-color: var(--kleur-licht-beige);
    color: var(--accent);
    font-size: 1.5rem;
}

.aw-card h3 { margin-bottom: 0.4rem; }
.aw-card p { color: var(--tekst-zacht); margin-bottom: 0; }

/* --------------------------- Werkwijze ---------------------------- */

.aw-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    counter-reset: stap;
}

.aw-step {
    position: relative;
    background-color: var(--vlak);
    border-radius: var(--radius-m);
    padding: 1.8rem 1.6rem 1.6rem;
    box-shadow: var(--schaduw-zacht);
    border: 1px solid rgba(47, 47, 47, 0.05);
}

.aw-step::before {
    counter-increment: stap;
    content: counter(stap);
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    margin-bottom: 1rem;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    color: #fff;
    background-color: var(--accent);
}

.aw-step h3 { font-size: 1.15rem; margin-bottom: 0.3rem; }
.aw-step p { color: var(--tekst-zacht); margin-bottom: 0; font-size: 0.98rem; }

/* --------------------------- CTA-blok ----------------------------- */

.aw-cta {
    background: linear-gradient(135deg, var(--kleur-bordeaux), #5c1622);
    color: #fff;
    border-radius: var(--radius-xl);
    padding: clamp(2.5rem, 6vw, 4rem);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.aw-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        90deg,
        rgba(255,255,255,0.05) 0 2px,
        transparent 2px 40px
    );
}

.aw-cta__inner { position: relative; max-width: 640px; margin-inline: auto; }
.aw-cta h2 { color: #fff; }
.aw-cta p { color: rgba(255,255,255,0.85); font-size: 1.15rem; }

/* --------------------------- Referenties -------------------------- */

.aw-reference {
    background-color: var(--vlak);
    border-radius: var(--radius-l);
    overflow: hidden;
    box-shadow: var(--schaduw-zacht);
    border: 1px solid rgba(47, 47, 47, 0.05);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.aw-reference:hover {
    transform: translateY(-4px);
    box-shadow: var(--schaduw-kaart);
}

/* Beeldvlak als CSS-placeholder. */
.aw-reference__image {
    aspect-ratio: 16 / 10;
    position: relative;
}

.aw-reference__image::after {
    content: "";
    position: absolute;
    inset: 14% 12%;
    border-radius: 12px;
    background: repeating-linear-gradient(
        90deg,
        rgba(255,255,255,0.18) 0 3px,
        rgba(255,255,255,0.04) 3px 9px
    );
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
}

.aw-reference__image--a { background: linear-gradient(150deg, var(--kleur-hout), #c2a577); }
.aw-reference__image--b { background: linear-gradient(150deg, var(--kleur-dusty-blue), #56738c); }
.aw-reference__image--c { background: linear-gradient(150deg, var(--kleur-sage), #8c9c7e); }

.aw-reference__body { padding: 1.6rem 1.6rem 1.8rem; }
.aw-reference__body h3 { margin-bottom: 0.4rem; }
.aw-reference__body p { color: var(--tekst-zacht); margin-bottom: 0; }

/* ----------------------------- Forms ------------------------------ */

.aw-form-wrap {
    background-color: var(--vlak);
    border-radius: var(--radius-l);
    padding: clamp(1.8rem, 4vw, 2.8rem);
    box-shadow: var(--schaduw-kaart);
    border: 1px solid rgba(47, 47, 47, 0.05);
    max-width: 760px;
}

.aw-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.1rem 1.3rem;
}

.aw-field { display: flex; flex-direction: column; }
.aw-field--full { grid-column: 1 / -1; }

.aw-field label {
    font-size: 0.92rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: var(--tekst);
}

.aw-field .aw-required { color: var(--accent); }

.aw-input,
.aw-textarea,
.aw-select {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--tekst);
    background-color: var(--kleur-wit-ivoor);
    border: 1.5px solid var(--kleur-zacht-grijs);
    border-radius: var(--radius-s);
    padding: 0.75rem 0.9rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    width: 100%;
}

.aw-input:focus,
.aw-textarea:focus,
.aw-select:focus {
    outline: none;
    border-color: var(--kleur-dusty-blue);
    box-shadow: 0 0 0 3px rgba(110, 139, 164, 0.18);
}

.aw-textarea { resize: vertical; min-height: 130px; }

.aw-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    font-size: 0.98rem;
    color: var(--tekst-zacht);
    cursor: pointer;
}

.aw-checkbox input {
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0.15rem;
    accent-color: var(--accent);
    flex: 0 0 auto;
}

.aw-form__actions {
    margin-top: 1.6rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Validatieboodschappen van Blazor's EditForm. */
.aw-form .validation-message,
.aw-form .invalid-feedback {
    color: var(--accent);
    font-size: 0.85rem;
    margin-top: 0.3rem;
}

.aw-form .invalid {
    border-color: var(--kleur-terracotta);
}

.aw-form .valid.modified:not([type=checkbox]) {
    border-color: var(--kleur-sage);
}

/* Meldingen na verzenden. */
.aw-alert {
    border-radius: var(--radius-m);
    padding: 1.1rem 1.3rem;
    margin-bottom: 1.4rem;
    font-size: 1rem;
    border: 1px solid transparent;
}

.aw-alert--success {
    background-color: #eef3e9;
    border-color: var(--kleur-sage);
    color: #41512f;
}

.aw-alert--error {
    background-color: #f7e9e5;
    border-color: var(--kleur-terracotta);
    color: #7a3525;
}

.aw-spinner {
    width: 1.1rem;
    height: 1.1rem;
    border: 2.5px solid rgba(255,255,255,0.5);
    border-top-color: #fff;
    border-radius: 50%;
    animation: aw-spin 0.7s linear infinite;
}

@keyframes aw-spin { to { transform: rotate(360deg); } }

/* --------------------------- Agenda ------------------------------- */

.aw-agenda-list {
    display: grid;
    gap: 1.4rem;
}

.aw-concert {
    display: grid;
    grid-template-columns: 150px 1fr auto;
    gap: 1.5rem;
    align-items: center;
    background-color: var(--vlak);
    border-radius: var(--radius-l);
    padding: 1.6rem 1.8rem;
    box-shadow: var(--schaduw-zacht);
    border: 1px solid rgba(47, 47, 47, 0.05);
}

.aw-concert__date {
    text-align: center;
    background-color: var(--kleur-licht-beige);
    border-radius: var(--radius-m);
    padding: 1rem 0.6rem;
}

.aw-concert__date .day {
    display: block;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--accent);
    line-height: 1;
}

.aw-concert__date .full {
    display: block;
    font-size: 0.85rem;
    color: var(--tekst-zacht);
    margin-top: 0.35rem;
}

.aw-concert__date .time {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--kleur-dusty-blue);
}

.aw-concert__body h3 { margin-bottom: 0.25rem; }

.aw-concert__location {
    font-weight: 600;
    color: var(--kleur-dusty-blue);
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.aw-concert__body p { color: var(--tekst-zacht); margin-bottom: 0; }

.aw-empty {
    background-color: var(--vlak);
    border: 1px dashed var(--kleur-taupe);
    border-radius: var(--radius-l);
    padding: 2.5rem;
    text-align: center;
    color: var(--tekst-zacht);
}

/* --------------------------- Beheer ------------------------------- */

.aw-btn--danger {
    background-color: transparent;
    color: var(--accent);
    border-color: rgba(123, 30, 45, 0.35);
}
.aw-btn--danger:hover {
    background-color: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.aw-admin-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.6rem;
}

.aw-admin-head h1 { margin-bottom: 0; }
.aw-admin-head__actions { display: flex; gap: 0.7rem; flex-wrap: wrap; }

.aw-admin-table-wrap {
    overflow-x: auto;
    background-color: var(--vlak);
    border-radius: var(--radius-l);
    box-shadow: var(--schaduw-zacht);
    border: 1px solid rgba(47, 47, 47, 0.05);
}

.aw-admin-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
}

.aw-admin-table th,
.aw-admin-table td {
    text-align: left;
    padding: 0.95rem 1.1rem;
    vertical-align: top;
    border-bottom: 1px solid var(--kleur-licht-beige);
}

.aw-admin-table th {
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tekst-zacht);
    background-color: var(--kleur-licht-beige);
}

.aw-admin-table tbody tr:last-child td { border-bottom: none; }
.aw-admin-table tbody tr:hover { background-color: rgba(242, 236, 227, 0.4); }
.aw-admin-table tr.is-archived { opacity: 0.75; }

.aw-admin-table__desc {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: var(--tekst-zacht);
    max-width: 42ch;
}

.aw-admin-table__actions { white-space: nowrap; }
.aw-admin-table__actions .aw-btn { margin-left: 0.4rem; }
.aw-admin-table__actions .aw-btn:first-child { margin-left: 0; }

.aw-confirm {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent);
    margin-right: 0.4rem;
}

.aw-badge {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    vertical-align: middle;
}

.aw-badge--muted {
    background-color: var(--kleur-zacht-grijs);
    color: var(--tekst-zacht);
}

/* --------------------------- Footer ------------------------------- */

.aw-footer {
    background-color: var(--kleur-antraciet);
    color: rgba(255,255,255,0.8);
    padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

.aw-footer a { color: rgba(255,255,255,0.8); }
.aw-footer a:hover { color: #fff; }

.aw-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 2rem;
}

.aw-footer h4 {
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.85rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.aw-footer__brand p { max-width: 34ch; }

.aw-footer .aw-logo__name { color: #fff; }
.aw-footer .aw-logo__tagline { color: var(--kleur-hout); }

.aw-footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }

.aw-footer__bottom {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.12);
    font-size: 0.85rem;
    color: rgba(255,255,255,0.55);
}

.aw-footer__version {
    margin-left: 0.6rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background-color: rgba(255,255,255,0.08);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.7);
}

/* ------------------------- Responsief ----------------------------- */

@media (max-width: 900px) {
    .aw-hero__grid,
    .aw-explain {
        grid-template-columns: 1fr;
    }

    .aw-hero__visual { order: -1; }

    .aw-form-grid { grid-template-columns: 1fr; }

    .aw-footer__grid { grid-template-columns: 1fr 1fr; }

    .aw-concert {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .aw-concert__date {
        display: flex;
        align-items: baseline;
        gap: 0.8rem;
        text-align: left;
    }

    .aw-concert__date .full { margin-top: 0; }
    .aw-concert__date .time { margin-top: 0; }
}

@media (max-width: 640px) {
    .aw-header__inner { flex-wrap: wrap; }
    .aw-nav { gap: 1rem; width: 100%; }
    .aw-nav__cta { display: none; }
    .aw-footer__grid { grid-template-columns: 1fr; }
    .aw-hero__actions .aw-btn { flex: 1 1 auto; }
}

/* Respecteer voorkeur voor minder beweging. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; animation: none !important; }
}