/* Gemeinsames Aussehen der Mitglieder-Seiten (Anmeldung, Buchungen). */

*{ margin:0; padding:0; box-sizing:border-box; }

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:#F1F7FB;
  color:#373A3B;
  font-family:'Karla', system-ui, sans-serif;
  line-height:1.65;
}

header{
  border-bottom:1px solid #D3DEE5;
  padding:1rem clamp(1.25rem,4vw,3rem);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
header a.marke{ display:inline-flex; align-items:center; gap:0.55rem; color:#373A3B; text-decoration:none; }
.logo-label{ display:flex; align-items:baseline; gap:0.35rem;
  font-family:'Montserrat','Segoe UI',system-ui,sans-serif; font-weight:800;
  font-size:1.4rem; letter-spacing:0.02em; color:#373A3B; }
.logo-label span{ font-family:'Karla',system-ui,sans-serif; font-weight:600;
  font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:#6C7477; }
.logo-mark{ height:2.1rem; aspect-ratio:2612.26 / 3169.95; width:auto; flex-shrink:0; display:block; }

main{
  flex:1;
  width:100%;
  max-width:720px;
  margin:0 auto;
  padding:clamp(2.5rem,7vw,4.5rem) clamp(1.25rem,4vw,3rem) 4rem;
  display:flex;
  flex-direction:column;
  gap:1.25rem;
}
main.mittig{ align-items:center; text-align:center; justify-content:center; }

h1{
  font-family:'Fraunces', Georgia, serif;
  font-weight:600;
  font-size:clamp(1.9rem, 5.5vw, 2.6rem);
  line-height:1.15;
  text-wrap:balance;
}
.strich{ width:56px; height:6px; background:#F6E63C; border-radius:3px; }
.intro{ color:#4A5356; max-width:52ch; text-wrap:pretty; }

/* Knöpfe */
button{
  font-family:'Karla', system-ui, sans-serif;
  font-size:1rem;
  font-weight:700;
  cursor:pointer;
  border-radius:999px;
  border:2px solid #373A3B;
  padding:0.7rem 1.8rem;
  background:#373A3B;
  color:#FFFFFF;
  transition:background 0.15s, color 0.15s;
}
button:hover:not(:disabled){ background:#F6E63C; color:#373A3B; }
button:disabled{ opacity:0.55; cursor:default; }
button.zurueckhaltend{ background:transparent; color:#373A3B; border-width:1px; border-color:#6C7477;
  font-size:0.9rem; padding:0.45rem 1.1rem; }
button.zurueckhaltend:hover{ background:#373A3B; color:#FFFFFF; border-color:#373A3B; }

/* Buchungsliste */
ul.buchungen{ list-style:none; display:flex; flex-direction:column; gap:1rem; width:100%; }
.buchung{
  background:#FFFFFF;
  border:1px solid #D3DEE5;
  border-radius:14px;
  padding:1.4rem;
  display:flex;
  flex-direction:column;
  gap:0.3rem;
}
.buchung h2{ font-family:'Fraunces', Georgia, serif; font-weight:600; font-size:1.2rem; line-height:1.25; }
.buchung .termin{ color:#373A3B; }
.buchung .status{ color:#6C7477; font-size:0.92rem; }

/* Ankündigung des Gestaltungsbruchs auf der Wix-Anmeldemaske. */
.weiterleitung-hinweis{
  max-width:44ch;
  margin-top:-0.35rem;
  color:#6C7477;
  font-size:0.88rem;
  line-height:1.5;
  text-wrap:pretty;
}

/* Hinweise */
.meldung{
  background:#FFFFFF;
  border:1px solid #D3DEE5;
  border-left:5px solid #F6E63C;
  border-radius:10px;
  padding:1rem 1.2rem;
  color:#4A5356;
  width:100%;
}
.meldung.ist-fehler{ border-left-color:#C0392B; }
.lade-hinweis{ color:#6C7477; }

footer{
  border-top:1px solid #D3DEE5;
  padding:1.2rem clamp(1.25rem,4vw,3rem);
  font-size:0.85rem;
  color:#6C7477;
}
footer a{
  color:#6C7477;
  text-decoration:underline;
  text-decoration-color:#F6E63C;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  margin-right:1.5rem;
}

a:focus-visible, button:focus-visible{ outline:3px solid #373A3B; outline-offset:3px; border-radius:2px; }