/* Die Ankündigung auf schulprozess.de (app/ankuendigung_seite.php). Nur die
   neuen Teile; alles andere kommt aus app/style.css und app/landing_faecher.css.
   Präfix ak- (Ankündigung). Regeln: DESIGN.md, „Die Ankündigung“. */

/* Vormerken */
.ak-vormerken { max-width: 560px; }
.ak-label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 0.92rem; }
.ak-zeile { display: flex; flex-wrap: wrap; gap: 10px; }
.ak-feld { flex: 1 1 240px; min-height: 48px; }
.ak-haken {
    display: flex; gap: 10px; align-items: flex-start;
    margin-top: 14px; font-size: 0.92rem; line-height: 1.45; color: var(--text-mid);
}
.ak-haken input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--primary); }

.ak-vormerken--blau {
    display: grid; gap: 10px; padding: 24px 26px; border-radius: 16px;
    background: color-mix(in srgb, var(--on-primary) 10%, var(--primary));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-primary) 18%, transparent);
}
.ak-vormerken--blau .ak-label { color: var(--on-primary); margin: 0; }

/* Drei Sätze */
.ak-drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); margin: 36px 0 0; padding: 0; list-style: none; }
.ak-drei h3 { margin: 14px 0 8px; font-size: 1.15rem; }
.ak-drei p { margin: 0; line-height: 1.6; color: var(--text-mid); }

/* Der Kalender: zwölf Türen */
.ak-kalender {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin: 40px 0 0;
    padding: 18px;
    list-style: none;
    border-radius: 22px;
    background: var(--surface-container);
    box-shadow: inset 0 0 0 1px var(--border);
}
.ak-tuer {
    position: relative;
    display: flex; flex-direction: column; gap: 8px;
    min-height: 196px; padding: 14px 12px 12px;
    border-radius: 12px;
}
.ak-nummer { font: 800 1.9rem/1 'Manrope', system-ui, sans-serif; letter-spacing: -0.03em; }
.ak-tuer--zu {
    justify-content: space-between;
    background: repeating-linear-gradient(180deg, var(--surface-low) 0 14px, var(--surface-high) 14px 15px);
    box-shadow: inset 0 12px 16px -12px color-mix(in srgb, var(--text) 26%, transparent), inset 0 0 0 1px var(--border);
}
.ak-tuer--zu .ak-nummer { color: var(--text-mid); }   /* --text-light reicht auf den Streifen nicht (4,35 : 1) */
.ak-datum {
    align-self: flex-start;
    padding: 5px 9px; border-radius: 6px; background: var(--card);
    font: 600 0.7rem/1.35 'Inter', system-ui, sans-serif; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--text-muted);
}
.ak-tuer--start { box-shadow: inset 0 0 0 2px var(--primary); }
.ak-tuer--start .ak-nummer { color: var(--primary); }
.ak-tuer--offen { background: var(--card); box-shadow: var(--shadow-md), inset 0 0 0 1px var(--border-light); }
.ak-tuer--offen .ak-nummer { position: absolute; top: 14px; right: 12px; font-size: 1rem; color: var(--text-light); }
.ak-tuer--offen h3 { margin: 4px 0 0; font-size: 1rem; overflow-wrap: break-word; }
.ak-tuer--offen p { margin: 0; font-size: 0.84rem; line-height: 1.5; color: var(--text-mid); }
.ak-tuer--neu .ak-nummer::after {
    content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 6px;
    border-radius: 50%; background: var(--primary); vertical-align: middle;
}
.ak-folgen { margin: 18px 0 0; font-size: 0.92rem; color: var(--text-light); }

@media (max-width: 900px) {
    .ak-kalender { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ak-drei { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .ak-kalender { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
}