/* =========================
   DESIGN SYSTEM
========================= */

:root {
    --primary: #0071BB;
    --primary-dark: #005a93;

    --bg: #f5f8fc;
    --card: #ffffff;

    --text: #1f2937;
    --muted: #6b7280;

    --border: #e6ebf2;

    --bs-primary: #0071BB;
    --bs-success: #0071BB !important;
    --bs-success-rgb: 0,113,187 !important;
    --bs-link-color: #0071BB;
    --bs-focus-ring-color: rgba(0,113,187,0.25);
}

/* =========================
   GLOBAL
========================= */

body {
    background: var(--bg) !important;
    color: var(--text) !important;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;

    padding-top: 85px !important;
}

/* =========================
   HEADER (FIXED TOP BAR)
========================= */

.navbar,
.top-bar,
.header {
    background: linear-gradient(90deg, #0071BB, #005a93) !important;
    border: none !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);

    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}

/* Text im Header */

.navbar::before,
.top-bar::before,
.header::before {
    content: "Landsberg am Lech";
    display: block;

    text-align: center;

    font-size: 18px;
    font-weight: 700;

    color: #ffffff;

    padding: 6px 0;
    letter-spacing: 0.5px;

    transform: translateX(20px);
}

/* =========================
   🔥 TOP LIMESURVEY LOGO ERSETZEN (WIRKLICH RICHTIG)
========================= */

/* nur das echte Survey-Logo im Header */

.logo img,
.ls-logo img,
#survey-logo img {
    content: url("Logo.svg") !important;
    max-height: 45px !important;
    width: auto !important;
}

/* WICHTIG:
   dein eigenes Theme-Logo NICHT anfassen!
   (navbar-brand bleibt unangetastet)
*/

/* =========================
   HAMBURGER MENU FIX
========================= */

.navbar-toggler,
.navbar-toggler-icon {
    color: #fff !important;
    border-color: rgba(255,255,255,0.4) !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2.5' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
    opacity: 1 !important;
}

/* =========================
   CARDS
========================= */

.container,
.content,
.question-container,
.panel,
.well,
.ls-answers {
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 20px rgba(16,24,40,0.06);
}

.question-container {
    transition: all 0.18s ease;
    padding: 28px !important;
    margin-bottom: 18px !important;
}

.question-container:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(16,24,40,0.08);
}

/* =========================
   TYPOGRAPHY
========================= */

h1,
h2,
h3,
h4 {
    color: var(--text) !important;
    font-weight: 600;
    letter-spacing: -0.02em;
}

p,
label {
    color: var(--muted);
    line-height: 1.5;
}

/* =========================
   BUTTONS
========================= */

.btn,
button {
    border-radius: 10px !important;
    font-weight: 500 !important;
    transition: all 0.15s ease;
}

.btn-primary,
.btn-success,
button[type="submit"] {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(0,113,187,0.25);
}

.btn-primary:hover,
.btn-success:hover,
button[type="submit"]:hover {
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    transform: translateY(-1px);
}

/* =========================
   ANSWERS - MEHR PLATZ
========================= */

.answer-item label,
.radio label,
.checkbox label,
.list-radio label,
.list-checkbox label {
    display: block;
    padding: 14px 16px !important;
    margin-bottom: 10px !important;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

/* Hover */

.answer-item label:hover,
.radio label:hover,
.checkbox label:hover {
    background: rgba(0,113,187,0.08) !important;
}

/* Checked */

.answer-item input:checked + label,
.radio input:checked + label,
.checkbox input:checked + label,
.list-radio input:checked + label,
.list-checkbox input:checked + label {
    background: #0071BB !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(0,113,187,0.25);
}

/* Radio/Checkbox spacing */

input[type="radio"],
input[type="checkbox"] {
    margin-right: 10px;
    transform: scale(1.1);
}

/* =========================
   INPUTS
========================= */

input,
select,
textarea {
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    padding: 10px !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px rgba(0,113,187,0.15) !important;
}

/* =========================
   PROGRESS BAR
========================= */

.progress-bar {
    background: var(--primary) !important;
}

/* =========================
   FINAL POLISH
========================= */

::selection {
    background: rgba(0,113,187,0.25);
}

mach mir das schön edel, vll. cremetöne, das schöne blau, kein grün bitte,