:root {
     /* Design Tokens (Dark) */
     --bg: #0B1220;
     /* Nachtblau */
     --bg-elev: #111726;
     /* leicht heller für Cards */
     --card: #151C2C;
     /* Kartenfläche */
     --card-2: #121827;
     /* zweite Ebene / Popover */
     --text: #E8E7E4;
     /* Primärtext auf dunkel */
     --text-muted: #B6B3AE;
     --line: rgba(199, 168, 123, .22);
     /* Gold-Haarlinie */
     --gold: #C7A87B;
     /* Champagner-Gold */
     --gold-weak: rgba(199, 168, 123, .35);
     --accent: #5B1A1A;
     /* Burgunder (selten) */
     --success: #2BB673;
     --warn: #D98324;
     --danger: #BD3C3C;

     --radius: 14px;
     --shadow-1: 0 8px 28px rgba(0, 0, 0, .35);
     --shadow-2: 0 6px 20px rgba(0, 0, 0, .28);

     --ui-font: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
     --display-font: "Playfair Display", Georgia, "Times New Roman", serif;
 }

 /* ===== Base ===== */
 html,
 body {
     background: radial-gradient(1200px 800px at 20% -10%, rgba(199, 168, 123, .06), transparent 60%),
         var(--bg);
     color: var(--text);
 }

 body {
     font-family: var(--ui-font);
     margin: 2rem;
     line-height: 1.5;
 }

 h1,
 h2,
 h3 {
     font-family: var(--display-font);
     font-weight: 600;
     letter-spacing: .2px;
     margin: 0 0 .8rem 0;
     color: var(--text);
 }

 h1 {
     font-size: 1.9rem;
 }

 h3 {
     font-size: 1.1rem;
     color: var(--text-muted);
 }

 .muted {
     color: var(--text-muted);
     font-size: .95rem;
 }

 .muted-pill {
     color: var(--text-muted);
     background: rgba(255, 255, 255, .06);
     border: 1px solid rgba(255, 255, 255, .08);
     padding: .2rem .5rem;
     border-radius: 999px;
     font-size: .9rem;
 }

 /* ===== Top Bar ===== */
 #userBar {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 1rem;
     padding: .65rem 1rem;
     border: 1px solid var(--gold-weak);
     border-radius: var(--radius);
     background: linear-gradient(180deg, rgba(199, 168, 123, .06), rgba(199, 168, 123, .02));
     box-shadow: var(--shadow-1);
 }

 #logoutBtn {
     color: var(--gold);
     cursor: pointer;
 }

 #logoutBtn:hover {
     text-decoration: underline;
 }

 /* ===== Standard Card ===== */
 .card {
     background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(0, 0, 0, .02)),
         var(--card);
     border: 1px solid var(--line);
     border-radius: var(--radius);
     padding: 1rem 1.1rem;
     box-shadow: var(--shadow-1);
     margin-bottom: 1rem;
 }

 /* ===== Forms ===== */
 input,
 button {
     font-size: 1rem;
 }

 input {
     background: var(--bg-elev);
     color: var(--text);
     border: 1px solid rgba(255, 255, 255, .08);
     padding: .5rem .65rem;
     border-radius: 10px;
     outline: none;
     transition: border-color .15s ease, box-shadow .15s ease;
 }

 input::placeholder {
     color: #8E8B86;
 }

 input:focus {
     border-color: var(--gold);
     box-shadow: 0 0 0 3px rgba(199, 168, 123, .18);
 }

 .actions {
     display: flex;
     gap: .5rem;
     flex-wrap: wrap;
 }

 select {
     background: var(--bg-elev);
     color: var(--text);
     border: 1px solid rgba(255, 255, 255, .08);
     padding: .5rem .65rem;
     border-radius: 10px;
     outline: none;
 }

 select:focus {
     border-color: var(--gold);
     box-shadow: 0 0 0 3px rgba(199, 168, 123, .18);
 }

 /* ===== Buttons ===== */
 button {
     background: transparent;
     color: var(--text);
     border: 1px solid var(--gold-weak);
     border-radius: 999px;
     padding: .45rem .85rem;
     cursor: pointer;
     transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
 }

 button:hover {
     border-color: var(--gold);
     box-shadow: 0 0 0 3px rgba(199, 168, 123, .12);
     transform: translateY(-1px);
 }

 .icon-btn {
     border: 1px solid rgba(255, 255, 255, .08);
     border-radius: 10px;
     padding: .25rem .45rem;
     background: rgba(255, 255, 255, .02);
 }

 .icon-btn:hover {
     border-color: var(--gold);
 }

 .danger {
     color: var(--danger);
     border-color: rgba(189, 60, 60, .35);
 }

 .danger:hover {
     border-color: var(--danger);
     box-shadow: 0 0 0 3px rgba(189, 60, 60, .18);
 }

 /* ===== Grid / Card Lists ===== */
 .card-list {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 1rem;
 }

 .entry-card {
     background: var(--card);
     border: 1px solid var(--line);
     border-radius: var(--radius);
     box-shadow: var(--shadow-1);
     padding: 1rem;
     display: flex;
     flex-direction: column;
     gap: .75rem;
     transition: transform .15s ease, border-color .2s ease, background-color .2s ease;
 }

 .entry-card:hover {
     transform: translateY(-1px);
     border-color: var(--gold-weak);
     background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(0, 0, 0, .02)), var(--card);
 }

 .entry-head {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     gap: .75rem;
 }

 .entry-title {
     font-family: var(--display-font);
     font-size: 1.25rem;
 }

 .entry-meta {
     color: var(--text-muted);
     font-size: .95rem;
     display: flex;
     gap: .6rem;
     flex-wrap: wrap;
 }

 .entry-row {
     display: flex;
     align-items: center;
     gap: .5rem;
     flex-wrap: wrap;
 }

 /* Link in Cards */
 a {
     color: var(--gold);
     text-decoration: none;
     border-bottom: 1px dashed rgba(199, 168, 123, .35);
     padding-bottom: 1px;
 }

 a:hover {
     border-bottom-color: var(--gold);
 }

 /* Mehr Luft unter dem Suchfeld, damit es zu den Card-Abständen passt */
 .card .entry-row.search-row {
     margin-bottom: 1rem;
 }



 /* Falls nicht vorhanden: Entry-Cards relativ positionieren */
 .entry-card {
     position: relative;
     padding-left: 3.5rem;
     /* Platz für Stern-Badge */
 }

 /* Nummern-Badge mit Stern-Hintergrund */
 .visit-index {
     position: absolute;
     top: -6px;
     left: -6px;
     width: 54px;
     height: 54px;
     display: grid;
     place-items: center;
     pointer-events: none;
 }

 .visit-index .star {
     position: absolute;
     font-size: 58px;
     line-height: 1;
     color: var(--gold);
     opacity: .22;
     /* dezenter Stern */
     filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25));
 }

 .visit-index .num {
     position: relative;
     font-family: var(--display-font);
     font-weight: 600;
     font-size: 1.15rem;
     color: var(--text);
     text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
 }



 /* ===== Chips (Teilnahme) ===== */
 .chip {
     display: inline-flex;
     align-items: center;
     gap: .4rem;
     height: 1.9rem;
     padding: 0 .7rem;
     border-radius: 999px;
     background: #1B2234;
     color: var(--text);
     border: 1px solid var(--gold-weak);
     font-weight: 600;
     font-size: .9rem;
 }

 .chip .icon {
     font-size: 1rem;
 }

 .subline {
     color: var(--text-muted);
     font-size: .85rem;
     margin-top: .25rem;
 }


 /* Visit-Card Datum betonen */
 .visit-card .entry-title {
     color: var(--gold);
 }

 /* ===== Popover (Teilnehmende) ===== */
 .popover {
     position: absolute;
     z-index: 1000;
     background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, .03)), var(--card-2);
     color: var(--text);
     border: 1px solid var(--gold-weak);
     border-radius: 12px;
     box-shadow: var(--shadow-2);
     padding: .6rem;
     max-height: 340px;
     overflow: auto;
     min-width: 300px;
 }

 .popover .row {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: .5rem;
     padding: .4rem .35rem;
     border-radius: 8px;
 }

 .popover .row:hover {
     background: rgba(255, 255, 255, .05);
 }

 .popover .name {
     font-size: .95rem;
     color: var(--text);
 }

 .popover .remove {
     background: transparent;
     color: var(--danger);
     border: 1px solid rgba(189, 60, 60, .3);
     border-radius: 10px;
     padding: .2rem .45rem;
 }

 .popover .remove:hover {
     border-color: var(--danger);
     box-shadow: 0 0 0 3px rgba(189, 60, 60, .18);
 }

 /* ===== Picker (Restaurant-Suche im Visit) ===== */
 .picker {
     position: relative;
 }

 .picker input {
     width: 100%;
 }

 .picker-list {
     position: absolute;
     z-index: 10;
     left: 0;
     right: 0;
     background: var(--card-2);
     border: 1px solid var(--gold-weak);
     border-radius: 12px;
     max-height: 260px;
     overflow: auto;
     margin-top: .35rem;
     padding: .25rem 0;
     box-shadow: var(--shadow-2);
 }

 .picker-item {
     padding: .45rem .65rem;
     cursor: pointer;
     color: var(--text);
 }

 .picker-item:hover {
     background: rgba(199, 168, 123, .08);
 }



 /* Popup-Liste als Portal über allen Cards */

 /* Portal-Popup über allen Cards, in edlem Dark-Theme */
 .picker-portal {
     position: absolute;
     z-index: 3000;
     background: var(--card-2, #171717);
     color: var(--text, #eaeaea);
     border: 1px solid var(--gold-weak, rgba(199, 168, 123, .28));
     border-radius: 12px;
     max-height: 260px;
     overflow: auto;
     box-shadow: var(--shadow-2, 0 10px 30px rgba(0, 0, 0, .45));
     padding: .25rem 0;
 }

 .picker-portal .picker-item {
     padding: .45rem .65rem;
     cursor: pointer;
     white-space: nowrap;
     color: inherit;
 }

 .picker-portal .picker-item:hover {
     background: rgba(199, 168, 123, .12);
     /* zarte Gold-Tönung */
 }

 /* Optional: "Keine Treffer" dezenter */
 .picker-portal .muted {
     color: var(--muted, #9aa0a6);
 }

 /* ===== Responsive Tweaks ===== */
 @media (max-width: 640px) {
     body {
         margin: 1rem;
     }

     .entry-head {
         flex-direction: column;
         align-items: flex-start;
     }
 }



 #siteFooter {
     margin-top: 40px;
     padding: 16px 0 32px;
     text-align: center;
     color: var(--muted, #9aa0a6);
     border-top: 1px solid rgba(255, 255, 255, .06);
 }

 #siteFooter a {
     color: var(--gold, #c7a87b);
     text-decoration: none;
 }

 #siteFooter a:hover {
     text-decoration: underline;
 }


 .public-intro {
     margin: 24px 0 12px;
     padding: 20px;
     border: 1px solid var(--gold-weak, rgba(199, 168, 123, .28));
     border-radius: 12px;
     background: var(--card-2, #17171a);
 }

 .public-intro h1 {
     margin: 0 0 4px;
     font: 800 28px/1.2 ui-serif, Georgia, 'Times New Roman', serif;
     letter-spacing: .2px;
 }

 .public-intro h2 {
     margin: 0 0 10px;
     font-weight: 600;
     color: var(--gold, #c7a87b);
 }

 .public-intro p {
     margin: 0 0 8px;
 }