Pias Schülerpraktikum – Kalender 2026

by der_robert

HTML

<main class="calendar-grid">
    <!-- Februar 2026 -->
    <section class="month-card" aria-label="Februar 2026">
      <header class="month-header">
        <div class="month-title"><span class="month-name">Februar</span> <span class="month-year">2026</span></div>
        
      </header>
      <table class="calendar" role="grid">
        <thead>
          <tr>
            <th scope="col" class="kw">KW</th>
            <th scope="col">Mo</th>
            <th scope="col">Di</th>
            <th scope="col">Mi</th>
            <th scope="col">Do</th>
            <th scope="col">Fr</th>
            <th scope="col">Sa</th>
            <th scope="col">So</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="kw-cell">KW 5</td>
            <td class="day-cell day-empty"><div class="day-inner"><span class="day-number">&nbsp;</span></div></td>
            <td class="day-cell day-empty"><div class="day-inner"><span class="day-number">&nbsp;</span></div></td>
            <td class="day-cell day-empty"><div class="day-inner"><span class="day-number">&nbsp;</span></div></td>
            <td class="day-cell day-empty"><div class="day-inner"><span class="day-number">&nbsp;</span></div></td>
            <td class="day-cell day-empty"><div class="day-inner"><span class="day-number">&nbsp;</span></div></td>
            <td class="day-cell"><div class="day-inner"><span class="day-number">1</span></div></td>
            <td class="day-cell"><div class="day-inner"><span class="day-number">2</span></div></td>
          </tr>
          <tr>
            <td class="kw-cell">KW 6</td>
            <td class="day-cell"><div class="day-inner"><span class="day-number">2</span></div></td>
            <td class="day-cell"><div class="day-inner"><span class="day-number">3</span></div></td>
            <td class="day-cell"><div class="day-inner"><span class="day-number">4</span></div></td>
            <td...

CSS

:root {
    /* Grundfarben – Bildschirm */
    --page-bg: #f5f5f5;
    --card-bg: #ffffff;
    --border: #d4d4d4;
    --text-main: #111827;
    --text-muted: #6b7280;
    --line-soft: #e5e7eb;
    --praktikum-bg: #fde7ef;
    --praktikum-border: #e11d48;
  }

  * {
    box-sizing: border-box;
  }

  html, body {
    margin: 0;
    padding: 0;
  }

  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--page-bg);
    color: var(--text-main);
    padding: 24px 16px;
  }

  .page-header {
    max-width: 960px;
    margin: 0 auto 20px;
    padding: 12px 16px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
  }

  .page-header-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .page-title {
    font-size: 1.2rem;
    font-weight: 600;
  }

  .page-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
  }

  .legend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #fafafa;
    font-size: 0.8rem;
    white-space: nowrap;
  }

  .legend-color {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: var(--praktikum-bg);
    border: 1px solid var(--praktikum-border);
  }

  .calendar-grid {
    max-width: 960px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
  }

  .month-card {
    background: var(--card-bg);
    border-radius: 8px;
    border: 1px solid var(--border);
    padding: 12px 12px 14px;
    page-break-inside: avoid;
  }

  .month-header {
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--line-soft);
...