:root{ --bg:lightblue; --red:#e41b23; --red-600:#c0171d; --gray:#e6e6e6; --text:#111; --muted:#6b7280; }
  html,body{height:100%}
  body{font-family:'DM Sans',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;background:var(--bg);color:var(--text);margin:0}

  /* ===== Shell: 60% Main + reservierte Sidebars ===== */
  .page{display:flex;justify-content:center}
  .side{flex:1 0 20%}
  .container{width:60%;min-width:340px;max-width:1100px;padding:28px 20px 40px;box-sizing:border-box}
  .center{margin:0 auto}
  h2{margin:0 0 18px 0}

  /* ===== Flipcards-Grid ===== */
  .grid2{display:grid;gap:22px;grid-template-columns:repeat(2,minmax(0,1fr))}
  @media(max-width:900px){.grid2{grid-template-columns:1fr}}

  /* ===== Flipcards ===== */
  .flipcard{perspective:1200px}
  .flip-inner{position:relative;min-height:300px;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.22,.7,.2,1)}
  .flipped .flip-inner{transform:rotateY(180deg)}
  .panel{position:absolute;inset:0;border-radius:16px;background:#fff;border:1px solid var(--gray);box-shadow:0 8px 24px rgba(0,0,0,.06);padding:16px 18px;box-sizing:border-box;backface-visibility:hidden}
  .front{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;cursor:pointer}
  .front svg{width:76px;height:76px;fill:#1f2937}
  .label{font-weight:800;font-size:18px}
  .back{transform:rotateY(180deg)}
  .back .back-btn{border:none;background:none;color:var(--red);font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:6px;margin-bottom:14px}

  /* ===== Form-Felder (sauber, ohne Doppelrahmen) ===== */
  .form-grid{display:grid;gap:14px}
  .row-2{grid-template-columns:1fr 1fr}
  .row-1{grid-template-columns:1fr}
  @media(max-width:820px){.row-2{grid-template-columns:1fr}}

  .group{display:flex;flex-direction:column}
  .group label{font-size:13px;color:var(--muted);margin:0 0 6px 2px}
  .control{position:relative}
  .control input,
  .control select,
  .control textarea{width:100%;box-sizing:border-box;padding:13px 14px;border:1.5px solid var(--gray);border-radius:12px;background:#fff;font-size:15px;line-height:1.2;outline:none}
  .control textarea{min-height:96px;resize:vertical}
  .control input:focus,
  .control select:focus,
  .control textarea:focus{border-color:#d9d9d9;box-shadow:0 0 0 4px rgba(228,27,35,.12)}
  .control select{appearance:none;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="%23666" d="M7 10l5 5 5-5z"/></svg>');background-repeat:no-repeat;background-position:right 12px center;background-size:18px}

  /* ===== Summaries ===== */
  .summary{margin:8px 4px 4px;color:#4b5563;font-size:13px;min-height:18px}

  /* ===== Bottom Actionbar ===== */
  .actionbar{display:flex;gap:12px;margin-top:26px;align-items:center}
  .btn{border:none;border-radius:14px;padding:12px 18px;font-weight:800;cursor:pointer}
  #findBtn{background:var(--red);color:#fff;box-shadow:0 6px 20px rgba(228,27,35,.18)}
  #findBtn:disabled{background:#efefef;color:#9aa0a6;box-shadow:none}
  .btn.secondary{background:#fff;color:var(--red);border:2px solid var(--red)}
  .power-bar{text-align:right;margin:10px 0 0 0;font-size:13px;color:#6b7280}
  .power-bar button{background:none;border:none;color:inherit;cursor:pointer}
  
  .time-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  position: relative;
}

.time-block label {
  font-weight: 500;
  margin-top: 4px;
}

/* gemeinsame Box für kontextspezifische Angaben (Event, Bahn, später mehr) */
.where-context {
  display: none;              /* WICHTIG: standardmäßig versteckt */
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #faf7f7;
  border: 1px dashed #e1d6d6;
}

/* Radios hübsch in einer Zeile, mit Zeilenumbruch bei wenig Platz */
.radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 13px;
}
.radio-row label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.radio-row input[type="radio"] {
  accent-color: var(--red);
}

/* Stack-Helfer (hast du evtl. schon) */
.stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Radio-Row nur noch für EVENT-Kontext */
.radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 13px;
}
.radio-row label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.radio-row input[type="radio"] {
  accent-color: var(--red);
}

/* vertikale Stacks innerhalb von Grid-Spalten */
.stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Row für Beginn + Jetzt */
.time-vert {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.time-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 10px;
  align-items: center;
}
.time-input input {
  width: 100%;
}

/* Jetzt-Button */
.nowBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 48px;
  background: var(--red);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  transition: background .15s, transform .1s;
}
.nowBtn:hover { background: var(--red-600); }
.nowBtn:active { transform: translateY(1px); }

/* Button in der WHERE-Card */
.detailsBtn {
  margin-top: 8px;
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--red);
  background: #fff;
  color: var(--red);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.detailsBtn:hover {
  background: #ffecec;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.locateBtn {
  margin-top: 6px;
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #f3f4f6;
  color: #374151;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s, transform .1s;
}
.locateBtn:hover {
  background: #e5e7eb;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.locateBtn:active {
  transform: translateY(1px);
}
.locateBtn:disabled {
  opacity: .6;
  cursor: default;
  box-shadow: none;
}

.hint {
  font-size: 12px;
  color: #6b7280;
}

/* Modal-Overlay */
.place-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

/* Modal-Inhalt */
.place-modal-inner {
  width: min(600px, 92vw);
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 16px;
  padding: 16px 18px 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  box-sizing: border-box;
}

.place-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.place-modal-head h3 {
  margin: 0;
  font-size: 18px;
}
.modal-close {
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.modal-hint {
  font-size: 13px;
  color: #6b7280;
  margin: 0 0 10px;
}

/* Kontextboxen im Modal */
.where-context {
  display: none;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #faf7f7;
  border: 1px dashed #e1d6d6;
}

.modal-footer {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}