/* ========================================
   MODERNE URLAUBSVORSCHLÄGE STYLES
   ======================================== */

/* === RESET & BASE === */
*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    /* Farben */
    --primary: #3b82f6;
    --primary-hover: #2563eb;
    --primary-light: #dbeafe;
    --success: #10b981;
    --success-light: #d1fae5;
    --danger: #ef4444;
    --danger-light: #fee2e2;

    /* Graustufen */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* Schatten */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    /* Abstände */
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    /* Übergänge */
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === BODY & LAYOUT === */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    margin: 0;
    padding: 24px 16px;
    color: var(--gray-800);
    line-height: 1.6;
}

/* Container mit Glasmorphism-Effekt */
body>* {
    max-width: 880px;
    margin: 0 auto;
}

/* === TYPOGRAFIE === */
h1 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    margin: 0 0 8px;
    color: white;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    letter-spacing: -0.02em;
}

h2 {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--gray-900);
    letter-spacing: -0.01em;
}

p {
    margin: 0 0 12px;
    color: var(--gray-600);
}

p:last-child {
    margin-bottom: 0;
}

.muted {
    color: var(--gray-500);
    font-size: 0.9rem;
}

/* === CARDS === */
.card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 24px;
    margin: 20px 0;
    box-shadow: var(--shadow-lg);
    transition: var(--transition);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

#formContainer>p:first-of-type {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.1rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
}

/* === FORM ELEMENTS === */
label {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--gray-700);
    display: block;
    margin-bottom: 8px;
}

input,
button {
    font-family: inherit;
    font-size: 1rem;
    border-radius: var(--radius);
    border: 2px solid var(--gray-200);
    transition: var(--transition);
}

input {
    width: 100%;
    padding: 12px 16px;
    background: white;
    color: var(--gray-900);
    outline: none;
}

input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

input::placeholder {
    color: var(--gray-400);
}

/* Ungültige Eingabe */
input.invalid {
    border-color: var(--danger);
    background-color: var(--danger-light);
    animation: shake 0.3s;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-4px);
    }

    75% {
        transform: translateX(4px);
    }
}

/* === BUTTONS === */
button {
    width: 100%;
    padding: 14px 20px;
    font-weight: 600;
    background: var(--primary);
    color: white;
    cursor: pointer;
    border: none;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}

button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

button:hover::before {
    width: 300px;
    height: 300px;
}

button:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

button:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

#submitBtn {
    background: linear-gradient(135deg, var(--primary) 0%, #8b5cf6 100%);
    font-size: 1.1rem;
    padding: 16px 24px;
    letter-spacing: 0.02em;
}

/* ============================================
   STYLING DES "HINZUFÜGEN"-BUTTONS
   ============================================ */

#addBtn {
    width: 100%;
    padding: 12px 18px;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--gray-700) 0%, var(--gray-800) 100%);
    color: white;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

#addBtn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

#addBtn:hover::before {
    width: 300px;
    height: 300px;
}

#addBtn:hover {
    background: linear-gradient(135deg, #4b5563 0%, #1f2937 100%);
    transform: translateY();
}

#addBtn:active {
    transform: translateY(0);
    box-shadow: var(--shadow);
}

/* === DARK MODE === */
@media (prefers-color-scheme: dark) {
    #addBtn {
        background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
        color: #f9fafb;
        box-shadow: none;
    }

    #addBtn:hover {
        background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
    }

    #addBtn::before {
        background: rgba(255, 255, 255, 0.15);
    }
}


/* === GRID LAYOUT === */
.grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: start;
}

/* === LÄNDER-CHECKBOXEN === */
.countries {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.countries label {
    background: var(--gray-50);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: var(--transition);
    user-select: none;
    position: relative;
    overflow: hidden;
}

.countries label::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--primary-light) 0%, #ddd6fe 100%);
    opacity: 0;
    transition: opacity 0.3s;
}

.countries label:hover::before {
    opacity: 1;
}

.countries label:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.countries label>* {
    position: relative;
    z-index: 1;
}

.countries input[type="checkbox"] {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--primary);
    border-radius: 6px;
    margin: 0;
}

.countries input[type="checkbox"]:checked+span {
    font-weight: 600;
    color: var(--primary);
}

.countries span {
    font-size: 0.95rem;
    transition: var(--transition);
}

/* === STATISTIK === */
#statsCard {
    background: linear-gradient(135deg, white 0%, var(--gray-50) 100%);
}

#statsCard h2 {
    display: flex;
    align-items: center;
    gap: 10px;
}

#statsCard h2::before {
    content: '📊';
    font-size: 1.5em;
}

#statsCard canvas {
    width: 100%;
    height: 280px;
    margin: 16px 0;
    border-radius: var(--radius);
    background: white;
    padding: 16px;
    box-shadow: var(--shadow);
}

/* Tabelle */
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

thead {
    background: linear-gradient(135deg, var(--gray-700) 0%, var(--gray-800) 100%);
    color: white;
}

th {
    padding: 14px 16px;
    font-weight: 600;
    text-align: left;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--gray-200);
}

tbody tr {
    transition: var(--transition);
}

tbody tr:hover {
    background: var(--primary-light);
}

tbody tr:last-child td {
    border-bottom: none;
}

tfoot {
    background: var(--gray-50);
    font-weight: 700;
}

tfoot td {
    padding: 16px;
    border-top: 2px solid var(--gray-300);
}

/* === CHIPS (Namen) === */
.chipwrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border: 2px solid var(--primary-light);
    border-radius: 999px;
    background: linear-gradient(135deg, white 0%, var(--primary-light) 100%);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--primary);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.chip:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: var(--primary);
}

/* === MESSAGES === */
.msg {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: var(--radius);
    font-weight: 500;
    animation: slideIn 0.3s;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.msg:not(:empty) {
    background: var(--primary-light);
    color: var(--primary);
    border: 2px solid var(--primary);
}

/* === UTILITY CLASSES === */
.w100 {
    width: 100%;
}

.w180 {
    width: 180px;
}

.block {
    display: block;
}

.mt6 {
    margin-top: 6px;
}

.mt12 {
    margin-top: 12px;
}

.mb8 {
    margin-bottom: 8px;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    body {
        padding: 16px 12px;
    }

    .card {
        padding: 20px;
        margin: 16px 0;
    }

    .grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .countries {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
    }

    #statsCard canvas {
        height: 220px;
    }

    .w180 {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .countries {
        grid-template-columns: 1fr;
    }

    .card {
        padding: 16px;
    }

    h1 {
        font-size: 1.75rem;
    }
}

/* === DARK MODE === */
@media (prefers-color-scheme: dark) {
    :root {
        --gray-50: #18181b;
        --gray-100: #27272a;
        --gray-200: #3f3f46;
        --gray-300: #52525b;
        --gray-400: #a1a1aa;
        --gray-500: #d4d4d8;
        --gray-600: #e4e4e7;
        --gray-700: #f4f4f5;
        --gray-800: #fafafa;
        --gray-900: #ffffff;
    }

    body {
        background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
    }

    .card {
        background: var(--gray-100);
        border-color: var(--gray-300);
    }

    input {
        background: var(--gray-50);
        border-color: var(--gray-300);
        color: var(--gray-900);
    }

    .countries label {
        background: var(--gray-50);
        border-color: var(--gray-300);
    }

    .countries label:hover::before {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
    }

    #statsCard canvas,
    table {
        background: var(--gray-50);
    }

    tbody tr:hover {
        background: rgba(59, 130, 246, 0.1);
    }

    .chip {
        background: linear-gradient(135deg, var(--gray-50) 0%, rgba(59, 130, 246, 0.2) 100%);
        border-color: rgba(59, 130, 246, 0.3);
    }
}

/* === ANIMATIONEN === */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.card {
    animation: fadeIn 0.4s ease-out;
}

/* Stagger-Effekt für Checkboxen */
.countries label {
    animation: fadeIn 0.3s ease-out backwards;
}

.countries label:nth-child(1) {
    animation-delay: 0.05s;
}

.countries label:nth-child(2) {
    animation-delay: 0.1s;
}

.countries label:nth-child(3) {
    animation-delay: 0.15s;
}

.countries label:nth-child(4) {
    animation-delay: 0.2s;
}

.countries label:nth-child(5) {
    animation-delay: 0.25s;
}

.countries label:nth-child(6) {
    animation-delay: 0.3s;
}

.countries label:nth-child(7) {
    animation-delay: 0.35s;
}

.countries label:nth-child(8) {
    animation-delay: 0.4s;
}

/* === SCROLLBAR === */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--gray-100);
}

::-webkit-scrollbar-thumb {
    background: var(--gray-400);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gray-500);
}

/* === LAYOUT: stapeln & sauber zentrieren === */
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* alles mittig */
    gap: 24px;
    /* Abstand zwischen Blöcken */
}

/* Form + Statistik gleiche Breite, mittig */
#formContainer,
#statsCard {
    width: min(100%, 960px);
    margin-inline: auto;
}

/* Sicherheitsnetz: Cards niemals nebeneinander floaten */
.card {
    clear: both;
}

/* Stats-Canvas Höhe nur per CSS steuern (kein HTML height-Attribut) */
#statsCard canvas {
    display: block;
    width: 100%;
    height: 280px;
}

@media (max-width: 768px) {
    #statsCard canvas {
        height: 220px;
    }
}

/* Buttons/Inputs im Länder-Right-Column auf Desktop nicht breiter als Card-Inhalt */
.grid>div:last-child .w180 {
    width: 220px;
}

@media (max-width: 768px) {
    .grid>div:last-child .w180 {
        width: 100%;
    }
}

/* === DARK MODE VERBESSERUNGEN === */
@media (prefers-color-scheme: dark) {

    /* Hintergrund und Textkontraste */
    body {
        background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
        color: #e5e7eb;
    }

    h1 {
        color: #fff;
    }

    h2 {
        color: #e5e7eb;
    }

    /* Karten + Inputs */
    .card {
        background: #0b1220;
        /* dunkler als gray-100-Mapping */
        border-color: #1f2937;
        box-shadow: none;
    }

    label {
        color: #cbd5e1;
    }

    input {
        background: #0f172a;
        border-color: #1f2937;
        color: #e5e7eb;
    }

    input::placeholder {
        color: #64748b;
    }

    /* Länder-Kacheln */
    .countries label {
        background: #0f172a;
        border-color: #1f2937;
    }

    .countries label:hover {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
    }

    .countries label::before {
        background: linear-gradient(135deg, rgba(59, 130, 246, .16) 0%, rgba(139, 92, 246, .16) 100%);
    }

    .countries input[type="checkbox"] {
        accent-color: #60a5fa;
    }

    .countries input[type="checkbox"]:checked+span {
        color: #93c5fd;
    }

    /* Statistik-Block */
    #statsCard {
        background: linear-gradient(135deg, #0b1020 0%, #111827 100%);
    }

    #statsCard canvas {
        background: #0b1220;
        border: 1px solid #1f2937;
    }

    /* Tabelle */
    table {
        background: #0b1220;
        border-color: #1f2937;
    }

    thead {
        background: linear-gradient(135deg, #111827 0%, #0f172a 100%);
        color: #e5e7eb;
    }

    td {
        border-bottom: 1px solid #1f2937;
        color: #cbd5e1;
    }

    tbody tr:hover {
        background: rgba(59, 130, 246, .10);
    }

    tfoot {
        background: #0f172a;
    }

    /* Chips (Namen) */
    .chip {
        background: linear-gradient(135deg, #0f172a 0%, rgba(59, 130, 246, .15) 100%);
        border-color: rgba(59, 130, 246, .35);
        color: #bfdbfe;
    }

    /* Primärbutton leichte Aufhellung bei Hover */
    #submitBtn {
        filter: none;
    }

    #submitBtn:hover {
        box-shadow: 0 6px 20px rgba(59, 130, 246, .25);
    }
}

/* --- Buttons: nur dezenter Farbwechsel, sonst nichts --- */

/* Ripple & Glanz komplett ausschalten */
button::before,
#addBtn::before,
#submitBtn::before {
  content: none !important;
}

/* keine Bewegung / kein Shadow-Wechsel mehr */
button:hover,
#addBtn:hover,
#submitBtn:hover,
button:active,
#addBtn:active,
#submitBtn:active {
  transform: none !important;
  box-shadow: var(--shadow-sm) !important; /* oder var(--shadow-md) – wie du magst */
}

/* sanfter Farbwechsel beibehalten */
#submitBtn {
  background: linear-gradient(135deg, var(--primary) 0%, #8b5cf6 100%);
  box-shadow: var(--shadow-sm);
  transition: background-color .2s ease, background .2s ease;
}
#submitBtn:hover {
  background: linear-gradient(135deg, var(--primary-hover) 0%, #7c3aed 100%);
}

/* Add-Button: nur leicht dunkler beim Hover */
#addBtn {
  background: linear-gradient(135deg, var(--gray-700) 0%, var(--gray-800) 100%);
  box-shadow: var(--shadow-sm);
  transition: background-color .2s ease, background .2s ease;
}
#addBtn:hover {
  background: linear-gradient(135deg, #475569 0%, #1e293b 100%);
}

/* Dark Mode: ebenfalls nur Farbe ändern */
@media (prefers-color-scheme: dark) {
  #submitBtn { background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%); }
  #submitBtn:hover { background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); }

  #addBtn { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); }
  #addBtn:hover { background: linear-gradient(135deg, #334155 0%, #1e293b 100%); }
}

/* Input-Feld für neues Land soll gleich breit sein wie der Hinzufügen-Button */
#newCountry {
  display: block;
  width: 100%;
  padding: 12px 24px;
  box-sizing: border-box;
}



#addBtn {
  width: 100%;
}