/* Reisen-App (reisen.html, js/reisen.js, js/reisen-admin.js). Baut auf css/app.css auf (Farben, Knöpfe, Felder). */

.reisen-leiste {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
  padding: max(.6rem, env(safe-area-inset-top)) 1rem .6rem; background: var(--karte); border-bottom: 1px solid var(--sand-linie);
}
.reisen-leiste__marke { display: inline-flex; align-items: center; gap: .5rem; color: var(--marine); font-family: Georgia, "Times New Roman", serif; font-size: 1.3rem; font-weight: 700; text-decoration: none; }
.reisen-leiste nav { display: flex; flex-wrap: wrap; gap: .25rem .75rem; }
.reisen-leiste nav a, .reisen-leiste nav button {
  min-height: 2.75rem; padding: 0 .35rem; border: 0; background: none; color: var(--gruen); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer;
  display: inline-flex; align-items: center;
}
.reisen-leiste nav a[aria-current="page"] { color: var(--marine); text-decoration: none; border-bottom: 3px solid var(--gruen); }

.weltkugel { color: var(--gruen); }
.weltkugel--klein { width: 1.9rem; height: 1.9rem; }

.seite--reisen { max-width: 46rem; margin-inline: auto; }

/* Startseite: Titel mittig mit Weltkugel als Wasserzeichen */
.reisen-titel { position: relative; padding: 3.5rem 0 2.5rem; text-align: center; overflow: hidden; }
.reisen-titel .weltkugel--wasserzeichen { position: absolute; left: 50%; top: 50%; width: 12rem; height: 12rem; transform: translate(-50%, -50%); opacity: .1; pointer-events: none; }
.reisen-titel h1 { position: relative; margin: 0; font-size: 2.6rem; }
.reisen-untertitel { position: relative; margin: .4rem 0 0; font-size: 1.15rem; color: var(--marine-weich); }

.veranstalterwahl { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 0 1.25rem; }
.veranstalterwahl button { min-height: 2.75rem; padding: 0 1rem; border: 2px solid var(--gruen); border-radius: 999px; background: var(--karte); color: var(--gruen); font: inherit; font-weight: 600; cursor: pointer; }
.veranstalterwahl button[aria-pressed="true"] { background: var(--gruen); color: #fff; }

.reisenliste { display: grid; gap: .8rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.reise { display: block; padding: 1rem 1.25rem; background: var(--karte); border: 1px solid var(--sand-linie); border-radius: var(--radius); color: inherit; text-decoration: none; }
.reise:hover { border-color: var(--gruen); }
.reise:focus-visible { outline: 3px solid var(--gruen); outline-offset: 3px; }
.reise__ort { display: block; font-size: 1.3rem; font-weight: 700; }
.reise__zeit, .reise__veranstalter { display: block; margin-top: .2rem; color: var(--marine-weich); }

/* Der Zustand steht als Wort in der Pille, nicht nur als Farbe */
.pille { display: inline-block; margin-top: .45rem; padding: .1rem .7rem; border: 2px solid var(--marine-weich); border-radius: 999px; font-size: .85rem; font-weight: 700; color: var(--marine); background: #fff; }
.pille--laeuft { border-color: var(--gruen); color: var(--gruen); }
.pille--bald { border-color: #8F6B00; color: #6B5000; }

/* Kacheln der Reiseseite. Grüner Rand = für alle Teilnehmer, roter Rand = privat, dazu steht es als Wort darunter. */
.kacheln { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); margin: 1.25rem 0; padding: 0; list-style: none; }
.kachel { display: flex; flex-direction: column; gap: .25rem; min-height: 6rem; padding: .9rem 1rem; border: 3px solid var(--gruen); border-radius: var(--radius); background: var(--karte); color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.kachel--privat { border-color: #8A2D1F; }
.kachel[disabled], .kachel--bald { cursor: default; opacity: .75; border-style: dashed; }
.kachel__titel { font-size: 1.1rem; font-weight: 700; }
.kachel__stufe { font-size: .85rem; font-weight: 600; color: var(--marine-weich); }
.kachel__stufe--privat { color: #8A2D1F; }
.kachel__bald { font-size: .85rem; font-weight: 700; color: #6B5000; }
.kachel:focus-visible { outline: 3px solid var(--marine); outline-offset: 3px; }

.personenliste { display: grid; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.person { display: flex; align-items: center; gap: .8rem; padding: .6rem .9rem; background: var(--karte); border: 1px solid var(--sand-linie); border-radius: var(--radius); }
.person__kuerzel { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--pastell); color: var(--marine); font-weight: 700; letter-spacing: .04em; }
.person__name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.person__zusatz { display: block; font-size: .85rem; color: var(--marine-weich); }

.abschnitt { margin: 1.75rem 0 0; }
.abschnitt h2 { margin: 0 0 .25rem; font-size: 1.25rem; }
.angaben { margin: 1rem 0 0; display: grid; gap: .6rem; }
.angaben dt { font-weight: 700; }
.angaben dd { margin: 0; overflow-wrap: anywhere; }
.angaben a { color: var(--gruen); font-weight: 600; }

.feld textarea { width: 100%; min-height: 5rem; padding: .7rem .9rem; border: 1px solid #8F8670; border-radius: var(--radius); background: var(--karte); color: var(--marine); font: inherit; }
.feld input[type="date"], .feld input[type="tel"], .feld select {
  width: 100%; min-height: 3rem; padding: 0 .9rem; border: 1px solid #8F8670; border-radius: var(--radius); background: var(--karte); color: var(--marine); font: inherit;
}
.feld textarea:focus-visible, .feld input[type="date"]:focus-visible, .feld input[type="tel"]:focus-visible, .feld select:focus-visible { outline: 3px solid var(--gruen); outline-offset: 2px; }

.passwortbox { margin: 1.25rem 0; padding: 1.1rem 1.25rem; border: 3px solid var(--gruen); border-radius: var(--radius); background: var(--pastell); }
.passwortbox__wert { display: block; margin: .6rem 0; padding: .6rem .8rem; background: #fff; border-radius: 8px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.5rem; letter-spacing: .08em; overflow-wrap: anywhere; user-select: all; }

.verwaltungsliste { display: grid; gap: .8rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.verwaltung { padding: .9rem 1.1rem; background: var(--karte); border: 1px solid var(--sand-linie); border-radius: var(--radius); }
.verwaltung__kopf { font-size: 1.1rem; font-weight: 700; overflow-wrap: anywhere; }
.verwaltung__zusatz { margin: .15rem 0 0; color: var(--marine-weich); overflow-wrap: anywhere; }
.verwaltung__knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.verwaltung__knoepfe .knopf { width: auto; margin: 0; min-height: 2.75rem; font-size: .95rem; }
.rolle { display: inline-block; margin-left: .4rem; padding: 0 .55rem; border: 2px solid var(--gruen); border-radius: 999px; font-size: .8rem; font-weight: 700; color: var(--gruen); }

.reisen-fuss { padding: 1.5rem 1rem 2rem; text-align: center; color: var(--marine-weich); font-size: .9rem; }
.reisen-fuss p { margin: 0; }