/* =========================
   Zentrale Design-Variablen
   ========================= */
@import url('ui-sizes.css');
@import url('surfaces.css');
@import url('headings.css');


@import url('title-row.css');


@import url('list-order.css');
@import url('wheelpicker.css');
@import url('datawheels.css');

:root {
    --color-bg-smartphone: #ff8c00;
    --color-bg-desktop: #222222;
    --color-text-light: #ffffff;
    --color-button: #d00000;
    --color-button-hover: #a80000;
    --color-nav-text: #ffffff;
    --color-nav-text-muted: #dddddd;
    --color-nav-bg: rgba(0,0,0,0.35);
    --max-width-smartphone: 420px;
    --max-height-smartphone: 860px;
    --border-radius: 16px;
    --header-h: 64px;
    --logo-height: calc(var(--header-h) - 24px);
    --main-bottom-gap: 40px;
    --nav-width: 180px;
    --spacing: 20px;
    --shadow-elev: 0 10px 30px rgba(0,0,0,.35);
    /* Bottom-Sheet-Wheel Defaults */
    --wt-sheet-bg: #3a3a3a; /* neutrales Grau statt (zu) schwarz */
    --wp-accent: rgba(255,255,255,.45); /* Linien/Indikator auf dunklem BG */
    --wp-mask-color: var(--wt-sheet-bg); /* Fades oben/unten auf Sheet-Farbe */
    --wp-item-height: 34px;
    --wp-visible-count: 5;
    /* Saubere Trennung: Geometrie vs. Intensität */
    --wp-mask-height: 2; /* = frühere Logik: 2 × Itemhöhe */
    --wp-mask-opacity: 45%; /* wie stark der Fade anfangs ist */
    /* NEU: Farb-Ton des Fades (unabhängig von der Card-Farbe) */
    --wp-mask-tint: #000; /* dunkel überblenden */
    /* 1) Mindestbreite pro Wheel (Touch-Fläche) */
    --wp-col-min-width: 52px; /* kompatibel zu deiner alten Var */
    /* --- DateWheel: Touch-Fläche für Tage --- */
    --wp-day-col-min-width: 52px; /* 56–72px je nach Gefühl */
    --wp-day-col-pad-x: .05rem; /* seitlicher Innenabstand */
    /* 2) Abstand zwischen den Wheels */
    --wp-gap: 14px; /* ~12px */
    /* 3) Innenabstand links/rechts im Container (Fades/Linien laufen mit) */
    --wp-outer-pad: 82px; /* z.B. 24px für „mehr Luft“ am Rand */
    /* optional: Innen-Polster *im* Wheel (zusätzliche Touch-Puffer) */
    /* --wp-col-pad-x: var(--wp-day-col-pad-x, .25rem);*/

    --dt-divider: rgba(255,255,255,.38); /* Farbe der Trennlinie */
    --dt-divider-pad: 10px; /* Abstand nach der Linie */
}


* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    background: var(--color-bg-desktop);
    color: var(--color-text-light);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, Helvetica, "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}

.smartphone-container {
    position: relative;
    width: 100%;
    max-width: var(--max-width-smartphone);
    height: min(100dvh, var(--max-height-smartphone));
    background: var(--color-bg-smartphone);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-elev);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-bottom: var(--main-bottom-gap);
}

.site-header, .layout-header {
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--spacing);
    background: rgba(0,0,0,0.08);
    backdrop-filter: blur(4px);
    z-index: 20;
}

.logo {
    height: var(--logo-height);
    width: auto;
    display: block;
}
.icon {
    height: var(--logo-height);
    width: auto;
    display: block;
}

.burger-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: var(--logo-height);
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .15s ease;
}
.burger-btn:hover { background: rgba(0,0,0,0.15); }

/* Variante 1: Main mit Abstand zum unteren Rand */
.site-main {
    margin-top: 0;
    margin-bottom: var(--main-bottom-gap);
    padding: 0 var(--spacing);
}

/* =============================
   Alternative (auskommentiert):
   Main im freien Bereich mittig zentrieren
   ============================= */
/*
.smartphone-container { justify-content: center; }
.site-main {
    margin-top: 0;
    margin-bottom: 0;
    min-height: calc(100dvh - var(--header-h));
    display: flex;
    align-items: center;
    justify-content: center;
}
*/

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
select,
textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: none;
    outline: none;
    color: #222;
    background: #fff;
}

/*button {
    border: none;
    border-radius: 12px;
    padding: 12px 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .12s ease, background-color .12s ease, opacity .12s ease;
}*/

button {
    border: none;
    border-radius: 12px;
    /* NEU: von Variablen gesteuert */
    padding: var(--btn-pad-y, 12px) var(--btn-pad-x, 16px);
    font-size: var(--btn-font-size, 1rem);
    font-weight: 600;
    cursor: pointer;
    transition: transform .12s ease, background-color .12s ease, opacity .12s ease;
}
button:active { transform: translateY(1px); }

.btn-primary,
.tile,
.tile-button {
    background: var(--color-button);
    color: #fff;
}
.btn-primary:hover,
.tile:hover,
.tile-button:hover {
    background: var(--color-button-hover);
}

.center { display: grid; place-items: center; }

.notification-bar {
    width: 100%;
    background: #d00000;
    color: #fff;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1rem;
    border-bottom: 1px solid #a80000;
    flex-wrap: wrap; /* auf kleinen Screens umbrechen */
    gap: 12px;
    z-index: 100;
}

.notification-close {
    background: #fff;
    color: #d00000;
    border: none;
    border-radius: 8px;
    padding: 6px 16px;
    cursor: pointer;
    font-weight: 600;
}
.notification-close:hover {
    background: #ffe5e5;
}

@media (min-width: 600px) {
    .smartphone-container { margin: 20px; }
}


/* Wheel-Profile – EINHEITLICH hier steuern */
.wp-compact {
    --wp-item-height: 32px; /* kompakt */
    --wp-visible-count: 5; 
}

.wp-normal {
    --wp-item-height: 44px; /* standard */
    --wp-visible-count: 5;
}

/* Wheels in einer Zeile (Datum/Uhrzeit) */
.wheels {
    display: flex;
    gap: var(--wheels-gap, 12px);
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
}

/* speziell die äußere Gruppe in DateTimeWheel (Date vs. Time) */
.wheels--outer {
    gap: var(--wheels-gap-outer, var(--wheels-gap, 26px));
}

/* Overlay für eine ganze Wheel-Zeile (Datum+Uhrzeit) */
.wheels-wrap {
    position: relative;
}


/* transparente Card-Variante (kein Weiß dahinter, weiße Schrift) */
.card--ghost {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    color: var(--color-text-light) !important;
    --wheel-bg: var(--color-bg-smartphone, #ffffff);
    --wp-mask-color: var(--wheel-bg);
}
/* graue Card-Variante (kein Weiß dahinter, weiße Schrift) */
.card--grey {
    background: var(--wt-sheet-bg) !important;
    box-shadow: none !important;
    border: none !important;
    color: var(--color-text-light) !important;
    --wheel-bg: var(--wt-sheet-bg) !important;
    --wp-mask-color: var(--wheel-bg);
    --wp-accent: rgba(255,255,255,.45);
}


    


/*.datetimewheel-row {
    display: flex;
    gap: 1.5rem;*/ /* Abstand zwischen den Komponenten */
    /*align-items: flex-start;
}*/


/* Diktat Seite – minimal global, greift sofort */
.dict-page .recent-item {
    background: rgba(255,255,255,.18) !important;
    border: 1px solid rgba(255,255,255,.24) !important;
}

.dict-page .dict-actions .icon-btn img {
    width: 14px !important;
    height: 14px !important;
}