/* ========================================================================
   Globale Variablen & Grundlayout
   Drei Themes: design1 (Violett), design2 (Marmor/Griechenland), design3 (Wald)
   ======================================================================== */

:root {
    /* abgerundete Rechtecke – keine Pill-Formen */
    --tm-radius-lg: 18px;
    --tm-radius-md: 12px;
    --tm-radius-sm: 8px;

    --tm-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
    --tm-font-heading: "SF Pro Display", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;

    /* Default-Werte – werden von data-theme überschrieben */
    --tm-color-bg: #120a1f;
    --tm-color-bg-elevated: #1c102f;
    --tm-color-bg-subtle: #1a0f2a;
    --tm-color-text: #f4ecff;
    --tm-color-text-muted: #b8a6d6;
    --tm-color-accent: #b388ff;
    --tm-color-accent-soft: rgba(179, 136, 255, 0.18);
    --tm-color-border-soft: rgba(255, 255, 255, 0.06);
    --tm-shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.55);
}

/* ----------------------- Designidee 1 – Violett modern ------------------ */

html[data-theme="design1"] {
    --tm-color-bg: #090512;
    --tm-color-bg-elevated: #140b26;
    --tm-color-bg-subtle: #180f2f;
    --tm-color-text: #f7f0ff;
    --tm-color-text-muted: #b4a1dd;
    --tm-color-accent: #c084fc;
    --tm-color-accent-soft: rgba(192, 132, 252, 0.16);
    --tm-color-border-soft: rgba(255, 255, 255, 0.07);
    --tm-shadow-soft: 0 20px 45px rgba(4, 0, 21, 0.8);
}

/* ------------------ Designidee 2 – Marmor / Griechenland ---------------- */

html[data-theme="design2"] {
    --tm-color-bg: #f5f3ef; /* heller Marmor */
    --tm-color-bg-elevated: #ffffff;
    --tm-color-bg-subtle: #ebe5da;
    --tm-color-text: #1c2b3a;
    --tm-color-text-muted: #5b6a7a;
    --tm-color-accent: #2f5373; /* Saphirblau */
    --tm-color-accent-soft: rgba(47, 83, 115, 0.12);
    --tm-color-border-soft: rgba(44, 61, 85, 0.25);
    --tm-shadow-soft: 0 16px 35px rgba(32, 43, 63, 0.25);
}

/* --------------------- Designidee 3 – Dunkelgrüner Wald ----------------- */

html[data-theme="design3"] {
    --tm-color-bg: #041410;
    --tm-color-bg-elevated: #06211a;
    --tm-color-bg-subtle: #0a2d22;
    --tm-color-text: #e5f6f0;
    --tm-color-text-muted: #9bc7b3;
    --tm-color-accent: #5be3a3;
    --tm-color-accent-soft: rgba(91, 227, 163, 0.14);
    --tm-color-border-soft: rgba(0, 0, 0, 0.4);
    --tm-shadow-soft: 0 18px 40px rgba(1, 12, 8, 0.85);
}

/* ========================================================================
   Grundlayout
   ======================================================================== */

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

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: var(--tm-font-body);
    background: radial-gradient(circle at top, var(--tm-color-bg-subtle), var(--tm-color-bg));
    color: var(--tm-color-text);
    display: flex;
    flex-direction: column;
}

/* Links optisch nicht als klassische Links darstellen */
a {
    color: inherit;
    text-decoration: none;
}

a:hover,
a:focus {
    text-decoration: none;
}

/* Mobile-optimierter Contentbereich */
.tm-main {
    flex: 1 0 auto;
    display: flex;
    justify-content: center;
    padding: 0.75rem;
}

.tm-page {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 1rem 0 1.5rem;
}

/* ========================================================================
   Header & Theme-Switcher
   ======================================================================== */

.tm-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--tm-color-border-soft);
    backdrop-filter: blur(16px);
    background: linear-gradient(
            135deg,
            rgba(0, 0, 0, 0.65),
            rgba(0, 0, 0, 0.25)
    );
}

/* Anpassungen für helles Marmor-Theme */
html[data-theme="design2"] .tm-header {
    background: linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.92),
            rgba(245, 242, 236, 0.95)
    );
    border-bottom: 1px solid rgba(47, 83, 115, 0.24);
}

.tm-header-left,
.tm-header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tm-header-center {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    font-size: 0.9rem;
}

.tm-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 24px;
    border-radius: var(--tm-radius-sm);
    background: linear-gradient(135deg, var(--tm-color-accent), var(--tm-color-bg-subtle));
    color: var(--tm-color-bg);
    font-weight: 700;
    font-size: 0.8rem;
    box-shadow: var(--tm-shadow-soft);
}

html[data-theme="design2"] .tm-logo {
    background: linear-gradient(135deg, #d4af37, #b8860b);
    color: #fdf8e9;
}

html[data-theme="design3"] .tm-logo {
    background: linear-gradient(135deg, #4ade80, #064e3b);
    color: #022c22;
}

.tm-app-name {
    font-family: var(--tm-font-heading);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.tm-user {
    font-size: 0.85rem;
    opacity: 0.85;
}

/* Theme Switcher Buttons */

.tm-theme-switcher {
    display: flex;
    gap: 0.3rem;
}

.tm-theme-button {
    border-radius: var(--tm-radius-md);
    border: 1px solid transparent;
    background: transparent;
    color: var(--tm-color-text-muted);
    padding: 0.25rem 0.7rem;
    font-size: 0.75rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.18s ease-out;
}

.tm-theme-button:hover {
    background: var(--tm-color-accent-soft);
    color: var(--tm-color-text);
}

.tm-theme-button.tm-theme-button--active {
    background: var(--tm-color-accent);
    color: var(--tm-color-bg);
    border-color: transparent;
}

/* Marmor-Theme – Ornamente */

html[data-theme="design2"] body {
    background:
            radial-gradient(circle at top, rgba(255, 255, 255, 0.95), rgba(245, 240, 232, 0.95)),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath fill='none' stroke='%23d8c9a9' stroke-width='1' d='M0 40h80M40 0v80'/%3E%3C/svg%3E");
    background-blend-mode: normal;
}

/* Wald-Theme – dezente Silhouette */

html[data-theme="design3"] body {
    background-image:
            radial-gradient(circle at top, #14332b, #041410),
            linear-gradient(to bottom, rgba(0, 0, 0, 0.1), transparent);
}

/* ========================================================================
   Buttons
   ======================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.6rem 1rem;
    border-radius: var(--tm-radius-md);
    border: 1px solid transparent;
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.18s ease-out;
    font-weight: 500;
}

.btn-small {
    padding: 0.4rem 0.85rem;
    font-size: 0.78rem;
}

.btn-primary {
    background: var(--tm-color-accent);
    color: var(--tm-color-bg);
    box-shadow: var(--tm-shadow-soft);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
}

.btn-secondary {
    background: var(--tm-color-bg-subtle);
    color: var(--tm-color-text);
    border-color: var(--tm-color-border-soft);
}

html[data-theme="design2"] .btn-secondary {
    background: #e8dfcf;
}

.btn-secondary:hover {
    background: var(--tm-color-accent-soft);
    border-color: var(--tm-color-accent);
}

.btn-ghost {
    background: transparent;
    color: var(--tm-color-text-muted);
    border-radius: var(--tm-radius-md);
}

.btn-ghost:hover {
    background: var(--tm-color-accent-soft);
    color: var(--tm-color-text);
}

/* Fallback: alle klickbaren Elemente ohne explizite Button-/Kachelklasse
   werden wie sekundäre Buttons dargestellt */

a:not(.btn):not(.tm-tile):not(.tm-theme-button),
button:not(.btn):not(.tm-theme-button),
input[type="submit"]:not(.btn),
input[type="button"]:not(.btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.6rem 1rem;
    border-radius: var(--tm-radius-md);
    border: 1px solid var(--tm-color-border-soft);
    background: var(--tm-color-bg-subtle);
    color: var(--tm-color-text);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.18s ease-out;
    font-weight: 500;
    text-decoration: none;
}

html[data-theme="design2"]
a:not(.btn):not(.tm-tile):not(.tm-theme-button),
html[data-theme="design2"]
button:not(.btn):not(.tm-theme-button),
html[data-theme="design2"]
input[type="submit"]:not(.btn),
html[data-theme="design2"]
input[type="button"]:not(.btn) {
    background: #e8dfcf;
}

a:not(.btn):not(.tm-tile):not(.tm-theme-button):hover,
button:not(.btn):not(.tm-theme-button):hover,
input[type="submit"]:not(.btn):hover,
input[type="button"]:not(.btn):hover {
    background: var(--tm-color-accent-soft);
    border-color: var(--tm-color-accent);
}

/* ========================================================================
   Kacheln / Karten / Panels / Listen
   ======================================================================== */

.tm-card {
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.06), var(--tm-color-bg-elevated));
    border-radius: var(--tm-radius-lg);
    border: 1px solid var(--tm-color-border-soft);
    box-shadow: var(--tm-shadow-soft);
    padding: 1rem 1rem 0.9rem;
    margin-bottom: 0.9rem;
    position: relative;
}

/* Helles Marmor-Theme mit griechischem Rahmen */
html[data-theme="design2"] .tm-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), #f8f4ec);
    border: 1px solid rgba(47, 83, 115, 0.3);
    box-shadow: 0 16px 30px rgba(39, 52, 74, 0.25);
}

html[data-theme="design2"] .tm-card::before {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: calc(var(--tm-radius-lg) - 5px);
    background-image: repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 6px,
            rgba(47, 83, 115, 0.15) 6px,
            rgba(47, 83, 115, 0.15) 7px
    );
    opacity: 0.35;
    pointer-events: none;
}

/* Wald-Theme – weicher Lichtschein */

html[data-theme="design3"] .tm-card {
    background: radial-gradient(circle at top left, rgba(34, 197, 94, 0.16), var(--tm-color-bg-elevated));
    border-color: rgba(15, 118, 110, 0.7);
}

/* Kachel-Basis für auswählbare Elemente (statt Textlinks) */

.tm-tile {
    display: block;
    padding: 0.75rem 0.9rem;
    border-radius: var(--tm-radius-md);
    border: 1px solid var(--tm-color-border-soft);
    background: var(--tm-color-bg-elevated);
    transition: all 0.16s ease-out;
    cursor: pointer;
}

.tm-tile:hover {
    background: var(--tm-color-accent-soft);
    border-color: var(--tm-color-accent);
}

/* Inhalte innerhalb der Karten */
.tm-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
}

.tm-card-title {
    font-family: var(--tm-font-heading);
    font-size: 1.05rem;
    font-weight: 600;
}

.tm-card-subtitle {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--tm-color-text-muted);
}

/* Task-Listen generisch, unabhängig von konkreter HTML-Struktur */

.tm-task-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tm-task-item {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.55rem 0.4rem;
    border-radius: var(--tm-radius-md);
    position: relative;
    transition: background 0.16s ease-out, transform 0.08s ease-out;
}

.tm-task-item + .tm-task-item {
    margin-top: 0.1rem;
}

.tm-task-item:hover {
    background: rgba(255, 255, 255, 0.03);
    transform: translateY(-1px);
}

html[data-theme="design2"] .tm-task-item:hover {
    background: rgba(47, 83, 115, 0.04);
}

/* Task Check / Status */
.tm-task-check {
    width: 20px;
    height: 20px;
    border-radius: var(--tm-radius-sm);
    border: 2px solid var(--tm-color-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.tm-task-check--done {
    background: var(--tm-color-accent);
    color: var(--tm-color-bg);
    font-size: 0.8rem;
}

.tm-task-main {
    flex: 1 1 auto;
}

.tm-task-title {
    font-size: 0.9rem;
    font-weight: 500;
}

.tm-task-meta {
    font-size: 0.75rem;
    color: var(--tm-color-text-muted);
    margin-top: 0.15rem;
}

/* ========================================================================
   Formulare
   ======================================================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
select,
textarea {
    width: 100%;
    border-radius: var(--tm-radius-md);
    border: 1px solid var(--tm-color-border-soft);
    padding: 0.55rem 0.7rem;
    font-size: 0.9rem;
    background: var(--tm-color-bg-subtle);
    color: var(--tm-color-text);
    outline: none;
    transition: border-color 0.16s ease-out, box-shadow 0.16s ease-out, background 0.16s ease-out;
}

html[data-theme="design2"] input[type="text"],
html[data-theme="design2"] input[type="email"],
html[data-theme="design2"] input[type="password"],
html[data-theme="design2"] input[type="date"],
html[data-theme="design2"] select,
html[data-theme="design2"] textarea {
    background: rgba(255, 255, 255, 0.9);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--tm-color-accent);
    box-shadow: 0 0 0 1px var(--tm-color-accent-soft);
}

/* ========================================================================
   Scrollbars – Farbanpassung je Theme
   ======================================================================== */

html {
    scrollbar-width: thin;
    scrollbar-color: var(--tm-color-accent) var(--tm-color-bg-subtle);
}

html[data-theme="design2"] {
    scrollbar-color: var(--tm-color-accent) #e6dfd2;
}

html[data-theme="design3"] {
    scrollbar-color: var(--tm-color-accent) #052418;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--tm-color-bg-subtle);
}

html[data-theme="design2"] ::-webkit-scrollbar-track {
    background: #e6dfd2;
}

::-webkit-scrollbar-thumb {
    background: var(--tm-color-accent);
    border-radius: var(--tm-radius-md);
}

/* ========================================================================
   Flash-Messages
   ======================================================================== */

.tm-flash-container {
    margin-bottom: 0.75rem;
}

.tm-flash {
    padding: 0.6rem 0.8rem;
    border-radius: var(--tm-radius-md);
    font-size: 0.85rem;
    margin-bottom: 0.4rem;
    background: var(--tm-color-accent-soft);
}

.tm-flash-success {
    border-left: 3px solid #22c55e;
}

.tm-flash-error,
.tm-flash-danger {
    border-left: 3px solid #ef4444;
}

/* ========================================================================
   Footer
   ======================================================================== */

.tm-footer {
    flex: 0 0 auto;
    padding: 0.45rem 0.75rem 0.75rem;
    font-size: 0.72rem;
    text-align: center;
    color: var(--tm-color-text-muted);
}

.tm-footer-separator {
    padding: 0 0.35rem;
}

/* ========================================================================
   Utility-Klassen
   ======================================================================== */

.tm-flex {
    display: flex;
}

.tm-flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tm-mb-sm {
    margin-bottom: 0.5rem;
}

.tm-mb-md {
    margin-bottom: 1rem;
}

.tm-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.55rem;
    border-radius: var(--tm-radius-sm);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border: 1px solid var(--tm-color-border-soft);
    background: rgba(0, 0, 0, 0.14);
}

html[data-theme="design2"] .tm-badge {
    background: rgba(223, 215, 199, 0.9);
}

/* Mobile-Optimierung */

@media (min-width: 768px) {
    .tm-main {
        padding: 1rem;
    }

    .tm-page {
        max-width: 640px;
    }
}