/* --- Deine Original Styles --- */
:root{
    --bg:#ffffff;
    --ink:#1f2937;
    --muted:#6b7280;
    --accent:#274c77;
    --school:#e7f0ff;
    --home:#e6f9e6;
    --fun:#fff8d6;
    --grid:#d1d5db;
}

body { font-family: system-ui, -apple-system, sans-serif; color: var(--ink); background: #f0f2f5; margin: 0; display: flex; gap: 20px; padding: 20px; }
.page { background: white; max-width: 1120px; padding: 16px 24px 28px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); flex: 1; }

header{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 18px; border:2px solid var(--grid); border-radius:14px; background: linear-gradient(180deg, #f8fafc, #f3f4f6);}
h1{font-size: 30px; margin:0; color:var(--accent)}
.week{display:flex; gap:12px; align-items:center; font-size:16px;}
.week label{font-weight:600}
.line{display:inline-block; min-width:180px; border-bottom:2px solid var(--grid); height:20px}
.legend{display:flex; gap:10px; flex-wrap:wrap; font-size:13px; color:var(--muted)}
.chip{padding:4px 8px; border-radius:999px; border:1px solid var(--grid); background:#fff}
table{width:100%; border-collapse:separate; border-spacing:0; margin-top:18px; table-layout:fixed;}
.table-wrap{width:100%; overflow-x:auto; -webkit-overflow-scrolling: touch;}
.table-wrap table{min-width:720px;}
thead th{position:sticky; top:0; background:#eef2ff;}
th, td{border:1px solid var(--grid); padding:12px; text-align:center; vertical-align:middle;}
col.col-activity{width:38%;}
col.col-day{width:8.857%;}
th:first-child, td:first-child{ text-align:left; padding-left:12px; vertical-align:top;}
th{font-size:14px}
td{height:44px}
.group{font-weight:700; letter-spacing:.2px; height:10px;}
tr.group.school td{background:var(--school)}
tr.group.home td{background:var(--home)}
tr.group.fun td{background:var(--fun)}
.label{display:flex; align-items:flex-start; gap:10px; line-height:1.25;}
.label .ico{flex:0 0 22px; width:22px; height:22px; display:flex; align-items:center; justify-content:center; font-size:16px}
.label span{display:block; overflow-wrap:anywhere; word-break:break-word;}
.box{width:20px; height:20px; border:2px solid var(--ink); display:inline-block; border-radius:4px}
.reflect{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; margin-top:20px}
.card{border:2px solid var(--grid); border-radius:12px; padding:14px 16px; min-height:100px}
.card h3{margin:0 0 8px 0; font-size:15px}
.schoolTag{background:var(--school)}
.homeTag{background:var(--home)}
.funTag{background:var(--fun)}
footer{margin-top:10px; font-size:12px; color:var(--muted); display:flex; justify-content:space-between}

/* --- Editor Styles (NEU) --- */
.editor {
    width: 350px;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    height: fit-content;
    position: sticky;
    top: 20px;
    overflow-y: auto;
    max-height: 90vh;
}
.editor h2 { margin-top: 0; font-size: 1.2rem; border-bottom: 2px solid #eee; padding-bottom: 10px; }
.editor-section { margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #eee; }
.editor-section h3 { font-size: 1rem; margin-bottom: 10px; color: var(--accent); }
.date-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.date-row label { min-width: 36px; font-weight: 600; }
.date-input { flex: 1; padding: 6px; border: 1px solid #ddd; border-radius: 4px; font: inherit; }
.input-row { display: flex; gap: 8px; margin-bottom: 8px; }
.input-row input[type="text"] { flex: 1; padding: 6px; border: 1px solid #ddd; border-radius: 4px; }
.input-row select.emoji-select { width: 44px; padding: 4px; text-align: center; }
.btn-del { background: #fee2e2; border: 1px solid #fecaca; color: #991b1b; cursor: pointer; border-radius: 4px; padding: 0 8px; }
button { cursor: pointer; padding: 6px 12px; border: 1px solid #ddd; background: #f9fafb; border-radius: 4px; width: 100%; }
button:hover { background: #f3f4f6; }
.btn-print { background: var(--accent); color: white; border-color: var(--accent); font-weight: bold; margin-bottom: 8px; }
.btn-print:hover { background: #1e3a5f; }
.hint { font-size: 0.8rem; color: #888; text-align: center; }

/* --- Druck Styles --- */
@page{size: A4 portrait; margin:10mm;}
@media screen and (max-width: 900px){
    body { flex-direction: column; padding: 12px; }
    .editor { width: 100%; position: static; max-height: none; }
    .page { width: 100%; max-width: none; padding: 12px 16px 20px; }
    header { flex-direction: column; align-items: flex-start; }
    .week { flex-wrap: wrap; }
    .line { min-width: 140px; }
    .reflect { grid-template-columns: 1fr; }
}
@media screen and (max-width: 600px){
    h1 { font-size: 22px; }
    th, td { padding: 8px; font-size: 12px; }
    .editor h2 { font-size: 1.05rem; }
    .editor-section h3 { font-size: 0.95rem; }
    .input-row { align-items: center; }
    .input-row input[type="text"] { font-size: 14px; }
    .input-row select.emoji-select { width: 40px; }
    button { padding: 10px 12px; }
}
@media print{
    body { background: white; display: block; padding: 0; margin: 0; }
    .no-print { display: none !important; }
    .page { box-shadow: none; margin: 0; width: 100%; max-width: none; padding: 0; }
    .table-wrap { overflow: visible; }
    .table-wrap table { min-width: 0; }
    table { margin-top: 10px; }
    th { font-size: 12px; }
    td { height: 30px; }
    th, td { padding: 6px; }
    .box { width: 16px; height: 16px; border-width: 1px; }
    header{background:#f8fafc !important; -webkit-print-color-adjust: exact;}
    thead th{background:#e5e7eb !important; -webkit-print-color-adjust: exact;}
    .group.school td{background:var(--school) !important; -webkit-print-color-adjust: exact;}
    .group.home td{background:var(--home) !important; -webkit-print-color-adjust: exact;}
    .group.fun td{background:var(--fun) !important; -webkit-print-color-adjust: exact;}
    .card.schoolTag{background:var(--school) !important; -webkit-print-color-adjust: exact;}
    .card.funTag{background:var(--fun) !important; -webkit-print-color-adjust: exact;}
    .legend, footer { display: none; } /* Optional: Footer beim Druck ausblenden */
}