* { forced-color-adjust: none; }

html { font-size: 18px; background-color: #0a0a12; background-image: linear-gradient( to bottom, #0a1a3a, #0f2f73 ); background-repeat: no-repeat; background-size: cover; min-height: 100vh; }
body { font-family: Arial, sans-serif; margin: 0; padding: 8px; max-width: 800px; margin-left: auto; margin-right: auto; background: transparent; margin: 0; color: #e6e6e6; max-width: 800px; margin-left: auto; margin-right: auto; }

@media (prefers-color-scheme: light) {
html { background-color: #dcdcdc; background-image: linear-gradient( to bottom, #c9c9c9, #a0a0a0 ); }
body { color: #222; }
}

@media (prefers-color-scheme: dark) {
html { background-color: #0a0a12; background-image: linear-gradient( to bottom, #0a1a3a, #0f2f73 ); }
body { color: #e6e6e6; }
}

* { box-sizing: border-box; }

input, select, button { display: block; width: 100%; font-size: 18px; padding: 4px; margin: 8px 0; border-radius: 6px; border: 1px solid #ccc; line-height: 1.2; }
button { padding: 12px; border-radius: 6px; cursor: pointer; color: #fff; background: #0066cc; border-color: #0066cc; }
button.ok { background: #a3d9a5; color: #000; border-color: #7ccf80; }
button.ok:hover { background: #8fce92; }
button.abbruch { background: #f3b6bc; color: #000; border-color: #e89aa2; }
button.abbruch:hover { background: #e89aa2; }

input[type="datetime-local"] { font-family: Arial, sans-serif; }

@media (prefers-color-scheme: dark) {
    button.ok { background: #4b8f4b; color: #000; border-color: #3f7a3f; }
    button.ok:hover { background: #3f7a3f; }
    button.abbruch { background: #b84a4a; color: #000; border-color: #a33f3f; }
    button.abbruch:hover { background: #a33f3f; }
}

textarea { font-family: Arial, sans-serif; display: block; width: 100%; font-size: 16px; padding: 4px; margin: 8px 0; border-radius: 6px; border: 1px solid #ccc; background: #fff; color: #000; line-height: 1.4; resize: vertical; min-height: 120px; }

@media (prefers-color-scheme: dark) {
textarea { background: #1e1e1e; color: #e5e5e5; border: 1px solid #444; }
}

@media (max-width: 600px) {
    body { padding: 4px; }
    ul li { padding: 4px 0; }
    button { width: 100%; margin-top: 4px; }
}

h1, h2, h3, h4, h5, h6, p, ul { margin-top: 0; margin-bottom: 16px; }

@media (max-width: 600px) {
    h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child, p:first-child, ul:first-child { margin-top: 0; }
}

header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
a { color: #0066cc; text-decoration: none; font-weight: bold; }
a:hover { text-decoration: underline; }
a.icon { text-decoration: none; margin-left: 6px; display: inline-block; line-height: 1; }
a button { text-decoration: none; }

span.kein-umbruch { white-space: nowrap; display: inline-block; }
span.menu-option { white-space: nowrap; display: inline-block; margin-bottom: 0.4rem; }

form { max-width: 350px; margin: 0 auto; }
form { max-width: 350px; margin: 0 auto; }
.meldung { margin-top: 8px; font-weight: bold; color: green; }
.warnung { margin-top: 8px; font-weight: bold; color: red; }
@media (prefers-color-scheme: dark) { a { color: #4da3ff; } }
ul.aufgabe { list-style: none; padding: 0; margin: 0; }
li[class*="prio-"] { padding: 4px; background: rgba(242, 242, 242, 0.5) /* #f2f2f2 */ ; margin-bottom: 10px; border-radius: 8px; display: block; }
@media (prefers-color-scheme: dark) { li[class*="prio-"] { background: rgba(30, 30, 30, 0.5) /* #1e1e1e; */ } }
li.prio-hoch    { border-left: 6px solid #eb4d4b; }
li.prio-mittel  { border-left: 6px solid #f9ca24; }
li.prio-niedrig { border-left: 6px solid #6ab04c; }
li.prio-keine   { border-left: 6px solid #b2bec3; }
.titel-hoch    { color: #d80000; font-weight: bold; }
.titel-mittel  { color: #ff8c00; font-weight: bold; }
.titel-niedrig { color: #008000; font-weight: bold; }
.titel-keine   { color: #cccccc; font-weight: bold; }
@media (prefers-color-scheme: light) { .titel-keine { color: #666666; } }

@media (prefers-color-scheme: dark) { .titel-hoch { color: #ff6b6b; } .titel-mittel { color: #ffb84d; } .titel-niedrig { color: #7dff7d; } }
.kat { color: #666; font-size: 0.9em; font-weight: bold; }
@media (prefers-color-scheme: dark) { .kat { color: #bbb; } }
.erledigt { padding: 10px; background: rgba(223, 249, 251, 0.5) /* #dff9fb */ ; margin: 5px 0; border-radius: 6px; }
@media (prefers-color-scheme: dark) { .erledigt { background: rgba(22, 60, 63, 0.5) /* #163c3f; */ } }
input, select, button { font-size: 18px; padding: 12px; width: 100%; margin: 8px 0; border-radius: 6px; border: 1px solid #ccc; }
@media (prefers-color-scheme: dark) { input, select, button { background: #1e1e1e; color: #e5e5e5; border: 1px solid #444; } }
button { background: #0066cc; color: #fff; border: none; }
button:hover { background: #004c99; }
@media (prefers-color-scheme: dark) { button { background: #4da3ff; color: #000; } button:hover { background: #1a7fd1; } }
.box { max-width: 350px; margin: 8px auto; }

@media (max-width: 600px) { body { padding: 8px; } li { padding: 8px; } button { width: 100%; } }
table { width: 100%; border-collapse: collapse; margin-top: 10px; }
td, th { padding: 10px; border-bottom: 1px solid #ccc; }
@media (prefers-color-scheme: dark) { td, th { border-bottom: 1px solid #444; } }
.bearbeite-zeile { background: #f0f8ff; }
@media (prefers-color-scheme: dark) { .bearbeite-zeile { background: #1e3a4a; } }

.griff { cursor: grab; width: 20px; text-align: center; color: #888; font-size: 18px; }
@media (prefers-color-scheme: dark) { .griff { color: #aaa; } }
.platzhalter { background: transparent; border: 2px dashed #ccc; }
.wird-gezogen { opacity: 0.7; position: relative; z-index: 10; }

.kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kopf > div:first-child { flex: 1 1 auto; /* darf schrumpfen */ min-width: 0; /* verhindert, dass der Text den Pfeil wegdrückt */ }
.pfeil { cursor: pointer; font-size: 18px; color: #666; user-select: none; margin-right: 0px; flex-shrink: 0;  /* Pfeil bleibt immer rechts */ margin-left: auto; /* schiebt ihn maximal nach rechts */ }

.aktionen { display: none; margin-top: 8px; padding-top: 8px; gap: 12px; align-items: center; white-space: nowrap; }
.pfeil.offen { transform: rotate(180deg); }

.beschreibung { font-size: 0.8rem; }

#katTable td:last-child { text-align: right; white-space: nowrap; }

img.Sicherheitskode { display: block; margin: 0 auto; border: 4px solid rgba(255, 0, 0, 0.8); border-radius: 18px; padding: 4px; background: rgba(255, 255, 255, 0.4); cursor: pointer; transition: 0.2s ease; width: auto; height: auto; }
img.Sicherheitskode:hover { border-color: rgb(255, 80, 80); background: rgba(255, 255, 255, 0.6); }

.info { cursor: pointer; }
.info input { display: none; }
.infotext { display: none; }
.info input:checked ~ .infotext { display: inline; }

.zeiger-hand { cursor:pointer; }
details.blocksatz p, p.blocksatz { text-align: justify; hyphens: auto; }