/* Hintergrund & Basis */
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #ffffff;
  font-family: "Century Gothic", Arial, sans-serif;
  color: #2c3e50;
}

/* Karte */
.container.card {
  background: #fff;
  padding: 48px 36px;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
  text-align: center;
  animation: fadeIn 0.8s ease;
  width: 92%;
  max-width: 1200px;  /* <- von 700px auf z.B. 1000px erhöhen */
}

h1 { margin: 0 0 28px; font-size: 28px; font-weight: 700; }
h2 { margin: 0 0 20px; font-size: 22px; }
h3 { margin: 24px 0 12px; }

/* Link-Buttons (nur Text) */
.link-btn {
  background: none;
  border: none;
  font-size: 22px;
  font-weight: 700;
  color: #2c3e50;
  cursor: pointer;
  display: block;
  margin: 16px auto;
  text-decoration: none;
  transition: transform 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}
.link-btn:hover { transform: scale(1.12); color: #1b2833; }

/* Formular */
form { display: grid; gap: 12px; margin-bottom: 8px; }
label { text-align: left; font-weight: 600; font-size: 14px; }
input, select {
  padding: 10px 12px;
  border: 1px solid #d6dde5;
  border-radius: 10px;
  font-size: 16px;
  outline: none;
}
input:focus { border-color: #a7b7c8; }

.primary-btn {
  background: #2c3e50;
  color: #fff;
  border: none;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.primary-btn:hover { transform: translateY(-1px); }
.primary-btn:active { transform: translateY(0); opacity: 0.9; }

.small-link {
  background: none;
  border: none;
  color: #2c3e50;
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
  margin: 10px;
}

.auth-row {
  margin-top: 18px;
  display: flex;                 /* <— neu */
  justify-content: center;       /* <— neu: mittig */
  align-items: center;           /* <— neu */
  gap: 18px;                     /* <— neu: schöner Abstand */
}

/* Tabelle */
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #e2e6ea;
  padding: 8px 10px;
  text-align: left;
}

/* Anim */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================
   LOGO-HERO / HEADER-LEISTE
   ========================= */
.logo-hero {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center; /* mittig zentrieren */
  gap: clamp(16px, 4vw, 48px);
  margin: 24px 0 8px;
  transition: all 220ms ease;
}

/* Startseite (nicht eingeloggt): großes zentrales Logo, kleinere Seitenlogos */
.logo-hero .logo-main {
  height: clamp(90px, 18vw, 160px);
  width: auto;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,0.12));
}
.logo-hero .logo-side {
  height: clamp(56px, 10vw, 100px);
  width: auto;
  opacity: 0.95;
}

/* Eingeloggt: Leiste oben, alle Logos gleich groß */
body.logged-in .logo-hero {
  position: sticky;   /* bleibt am oberen Rand, wenn man scrollt */
  top: 0;
  z-index: 10;
  padding: 8px 12px;
  margin: 0 0 12px;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid #e7eef6;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}
body.logged-in .logo-hero .logo,
body.logged-in .logo-hero .logo-main,
body.logged-in .logo-hero .logo-side {
  height: clamp(36px, 4.2vw, 56px);
  opacity: 1;
  filter: none;
}

/* Wenn die Leiste oben ist, etwas Platz nach oben für den Card-Container */
body.logged-in .container.card {
  margin-top: 12px;
}

/* Kleine Touch-Optimierungen */
.logo-hero img {
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 160ms ease, opacity 160ms ease;
}
.logo-hero img:hover { transform: scale(1.04); }

/* Responsiv: auf sehr schmalen Screens die Seitenlogos noch etwas kleiner */
@media (max-width: 420px) {
  .logo-hero { gap: 12px; }
  .logo-hero .logo-side { height: 40px; }
}
/* ===== Mobile-Optimierung ===== */

/* Bilder nie größer als ihr Container */
.logo-row img { max-width: 100%; height: auto; }

/* Buttons als klare Tap-Ziele (mind. ~44px Höhe) */
.link-btn,
.primary-btn,
.small-link {
  line-height: 1.2;
  padding: 12px 16px;
  display: inline-block;
}

/* Karte nutzt auf kleinen Screens die volle Breite */
.container.card {
  width: 94%;
  max-width: 720px; /* bleibt auf Desktop hübsch schmal */
}

/* Breakpoint: Tablets & kleiner */
@media (max-width: 768px) {
  h1 { font-size: 24px; }
  .link-btn { font-size: 20px; }
  .logo-row { gap: 1.2rem; }

  /* Logos etwas kleiner, damit nichts umbricht */
  .logo-row img { max-height: 72px; }
}

/* Breakpoint: kleine Smartphones */
@media (max-width: 420px) {
  h1 { font-size: 20px; margin-bottom: 16px; }
  .logo-row { gap: 0.8rem; margin-bottom: 12px; }
  .logo-row img { max-height: 56px; }

  .link-btn { font-size: 18px; margin: 12px auto; }
  .primary-btn { width: 100%; }              /* Buttons volle Breite, leichter zu tippen */
  form { gap: 10px; }                        /* kompaktere Formulare */
}

/* Tabellen mobil scrollbar machen (Admin etc.) */
.table-wrap { overflow-x: auto; }
table { min-width: 620px; } /* verhindert „Zerquetschen“, bleibt horizontal scrollbar */

/* Kleinigkeit: weniger Animationswucht auf Mobile/Low-Power */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Einheitliche Logo-Größen auf Verwaltung & Mitglieder */
.logo-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin: 8px 0 16px;
}

/* Höhe begrenzen – sonst werden die SVGs riesig */
.logo-row img {
  height: auto;
  width: auto;
  max-height: 80px;            /* Desktop */
}

/* Tablet */
@media (max-width: 768px) {
  .logo-row img { max-height: 64px; }
}

/* Handy */
@media (max-width: 420px) {
  .logo-row img { max-height: 48px; }
}

/* Full width layout when body has .page-wide */
body.page-wide .container.card {
  width: 98%;
  max-width: 1600px;
  margin: 24px auto;
  text-align: left;
}

body.page-wide #panels {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}


@media (max-width: 960px){
  body.page-wide .container.card { width: 96%; }
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}
.card-item {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 12px;
  background: #fafafa;
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.card-item:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.card-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 6px;
}
.card-meta {
  font-size: 14px;
  color: #555;
}

/* nur in der Lagerplanung-Übersicht (#cards) */
#cards .trip{
  display:flex;
  flex-direction:column;
}
#cards .trip .admin-row{
  margin-top:auto;    /* oder: margin-top:14px; wenn du nur mehr Abstand willst */
  padding-top:12px;
  display:flex;
  gap:10px;
  justify-content: center;
}

/* === Checkliste: schmalere Spalten + Overflow fix === */
.cl-wrap .cl-row > * { min-width: 0; }  /* damit Inputs im Grid nicht überlaufen */

.cl-wrap .cl-row {
  display: grid;
  grid-template-columns: 28px 1fr 180px 120px auto !important; /* ✓ | Titel | Zuständig | Datum | Notiz */
  gap: 12px;
  align-items: center;
}

.cl-wrap .cl-assignee {
  max-width: 180px !important;
  width: 100%;
  padding: 8px 10px;
}

.cl-wrap .cl-duedate {
  width: 120px !important;
  padding: 8px 10px;
}

.cl-wrap .cl-noteBtn { white-space: nowrap; }

/* Notizbereich passend zur neuen Spaltenzahl */
.cl-wrap .cl-note { grid-column: 2 / -1; margin-top: 6px; }
.cl-wrap .cl-note textarea { width: 100%; min-height: 70px; }

/* Responsive Tweaks */
@media (max-width: 900px){
  .cl-wrap .cl-row { grid-template-columns: 28px 1fr 150px 110px auto !important; gap: 10px; }
  .cl-wrap .cl-assignee { max-width: 150px !important; }
  .cl-wrap .cl-duedate  { width: 110px !important; }
}
@media (max-width: 640px){
  .cl-wrap .cl-row { grid-template-columns: 28px 1fr !important; grid-auto-rows: auto; }
  .cl-wrap .cl-row > .cl-assignee,
  .cl-wrap .cl-row > .cl-duedate,
  .cl-wrap .cl-row > .cl-noteBtn { grid-column: 2 / -1; }
  .cl-wrap .cl-assignee { max-width: 100% !important; }
  .cl-wrap .cl-duedate  { width: 100% !important; max-width: 280px; }
  .cl-wrap .cl-note { grid-column: 1 / -1; }
}
/* --- Checkliste: schmalere Spalten + kompaktere Inputs --- */

/* Spalten enger und Inhalte dürfen schrumpfen */
.cl-row {
  grid-template-columns: 28px 1fr 180px 120px auto; /* Titel | Zuständig 180 | Datum 120 */
  gap: 10px;
}
.cl-row > * { min-width: 0; } /* Text darf umbrechen statt die Spalte zu dehnen */

/* Globale Input-Defaults überstimmen */
.cl-row input[type="text"],
.cl-row input[type="date"] {
  width: auto;                 /* NICHT 100% übernehmen */
  box-sizing: border-box;
  font-size: 13px;
  padding: 6px 8px;            /* kompakter */
  border-radius: 8px;          /* weniger „Pill“ */
}

/* gezielte Breiten */
.cl-assignee {
  width: 180px;
  max-width: 180px;
}
.cl-duedate {
  width: 120px;
  max-width: 120px;
}

/* Notiz-Button kompakter halten */
.cl-noteBtn {
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 8px;
}

/* Responsiv etwas weiter machen */
@media (max-width: 900px) {
  .cl-row { grid-template-columns: 28px 1fr 160px 110px auto; }
  .cl-assignee { width: 160px; max-width: 160px; }
  .cl-duedate  { width: 110px; max-width: 110px; }
}
@media (max-width: 640px) {
  .cl-row { grid-template-columns: 28px 1fr; }
  .cl-assignee, .cl-duedate, .cl-noteBtn { grid-column: 2 / -1; width: 100%; max-width: 100%; }
}
.pp-top{ display:flex; justify-content:flex-start; margin:8px 0 12px; }
.pp-top-row{ display:flex; gap:10px; align-items:center; }
.pp-top-label{ font-weight:600; }
.pp-cap{ width:110px; padding:8px 10px; }
.pp-transport{ padding:8px 10px; }
.pp-add{ display:flex; gap:8px; align-items:center; margin:8px 0 14px; }
.pp-table input[type="text"]{ min-width: 160px; max-width: 260px; }
.pp-num{ width:84px; }
/* --- Teilnehmer-Tab: volle Breite + Taxi-Toggle --- */
.pp-wrap { width: 100%; }
.pp-top { display:flex; align-items:center; gap:12px; margin:8px 0 14px; }
.pp-top-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pp-top-label{ font-weight:600; }
.pp-cap{ width:120px; padding:8px 10px; }
.pp-transport{ padding:8px 10px; }

/* Icon-Button (Taxi) */
.pp-iconbtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:10px; cursor:pointer;
  border:1px solid #d6dee7; background:#fff; font-size:18px;
}
.pp-iconbtn.active{ background:#2c3e50; color:#fff; border-color:#2c3e50; }
.pp-badge {
  font-size:12px; padding:4px 8px; border-radius:999px;
  background:#e9eef5; border:1px solid #d1dae6;
}

/* Tabelle */
.pp-add{ display:flex; gap:8px; align-items:center; margin:8px 0 14px; }
.pp-table{ width:100%; table-layout: fixed; }
.pp-table th, .pp-table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-table input[type="text"]{ min-width:140px; max-width:260px; }
.pp-num{ width:84px; }

/* Taxi-Spalten via Klasse am Wrapper ein/ausblenden */
.pp-wrap.taxi-off .col-taxi { display:none; }


/* Participants tab wide table */
#panels .tab-panel[data-tab="3"] .pp-wrap { max-width: 100%; }

.pp-table {
  width: 100%;
  table-layout: auto;           /* let columns use available width */
  border-collapse: separate;
  border-spacing: 0;
}

.pp-table th, .pp-table td {
  padding: 8px 10px;
  vertical-align: middle;
  white-space: nowrap;          /* prevent ugly wraps in short fields */
}

.pp-table td .pp-input { width: 100%; min-width: 220px; }  /* Allergien/Medik./Hinweise */
.pp-table td .pp-num   { width: 70px; text-align: right; } /* Taxi-Sitze */

/* sensible minimums so “Name” etc. don’t truncate immediately */
.pp-table th:nth-child(1), .pp-table td:nth-child(1) { min-width: 200px; } /* Name */
.pp-table th:nth-child(2), .pp-table td:nth-child(2) { min-width: 220px; } /* Allergien */
.pp-table th:nth-child(3), .pp-table td:nth-child(3) { min-width: 200px; } /* Medikamente */
.pp-table th:nth-child(4), .pp-table td:nth-child(4) { min-width: 240px; } /* Hinweise */