/* =======================================================================
   Der Mitgliederbereich.

   Eine eigene Datei, weil er kein Teil der Webseite ist, sondern eine
   Anwendung auf einer eigenen Adresse. Er erbt aus tokens.css die Farben
   und Schriften und aus awq.css den Knopf und das Formularfeld; alles
   Uebrige steht hier.

   Dunkel als Normalzustand, nach Identity-Guide 8.3: hier wird abends
   und frueh morgens gehoert, und eine helle Oberflaeche arbeitet dagegen.

   Eine Spalte, kein Raster. Das hier wird auf dem Telefon benutzt, im
   Bett, mit einer Hand.
   ======================================================================= */

/* Das hidden-Attribut muss gewinnen.
   Der Browser setzt dafuer display:none, aber jede eigene Regel mit
   einem display schlaegt das: .ticket traegt display:inline-block, und
   damit stand ein Knopf mit hidden sichtbar auf dem Schirm. Die Abfrage
   im Skript meldete korrekt hidden === true, waehrend das Bild etwas
   anderes zeigte. Genau so sucht man lange an der falschen Stelle. */
[hidden] { display: none !important; }

body.app {
  background: var(--awq-nightfall);
  color: #C9D6E0;
  font-family: var(--awq-body);
  line-height: 1.65;
  margin: 0;
  /* Der Balken unten bei iOS liegt sonst ueber dem letzten Element. */
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-font-smoothing: antialiased;
}

.app-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* Zuschlag OBEN: mit black-translucent liegt die installierte App unter
     der Statusleiste. Stand bis 22.10.2026 im unteren Padding, die Leiste
     rutschte dadurch unter Uhr und Akku. */
  padding: calc(14px + env(safe-area-inset-top)) 20px 14px 20px;
  border-bottom: 1px solid rgba(169, 184, 198, .18);
  position: sticky;
  top: 0;
  /* Kein Filter im Hintergrund: er kostet auf aelteren Telefonen mehr,
     als er hier bringt, und die Flaeche ist ohnehin undurchsichtig. */
  background: var(--awq-nightfall);
  z-index: 5;
}
.app-marke {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #F2F4F6;
  text-decoration: none;
  font-family: var(--awq-display);
  font-size: 15px;
  letter-spacing: .01em;
}
.app-marke img { display: block; opacity: .85; }
.app-abmelden {
  background: none;
  border: 1px solid rgba(169, 184, 198, .32);
  border-radius: var(--awq-radius);
  color: #C9D6E0;
  font: inherit;
  font-size: 14px;
  padding: 7px 14px;
  cursor: pointer;
}
.app-abmelden:hover { border-color: var(--awq-moonstone); color: #F2F4F6; }

.app-inhalt {
  max-width: 640px;
  margin: 0 auto;
  padding: 36px 20px 72px;
}

body.app h1 {
  font-family: var(--awq-display);
  font-weight: 400;
  font-size: clamp(30px, 7vw, 40px);
  line-height: 1.15;
  color: #F2F4F6;
  margin: 0 0 18px;
}
body.app h2 {
  font-family: var(--awq-display);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.25;
  color: #F2F4F6;
  margin: 0 0 10px;
}
body.app h3 {
  font-family: var(--awq-display);
  font-weight: 400;
  font-size: 19px;
  color: #F2F4F6;
  margin: 0 0 6px;
}
body.app p { margin: 0 0 16px; }
body.app a { color: #C9D6E0; }

.app-lead { font-size: 17px; color: #DCE5E9; }
.app-klein { font-size: 14px; color: var(--awq-moonstone); }

/* Das Augenbrauen-Label ist die einzige Stelle mit Versalien, wie auf
   der Webseite auch. */
.app-label {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--awq-moonstone);
  margin: 0 0 8px;
}

.app-laden { color: var(--awq-moonstone); }

.app-block {
  border-top: 1px solid rgba(169, 184, 198, .18);
  padding-top: 26px;
  margin-top: 34px;
}
/* Der einzige Goldakzent im Bereich, und er sitzt auf dem einen Block,
   der etwas verkauft. Zwei Goldelemente auf einem Bildschirm heissen,
   dass eines davon falsch ist. */
.app-block--angebot {
  border: 1px solid rgba(227, 178, 60, .38);
  border-radius: var(--awq-radius);
  padding: 24px 22px 8px;
  margin-top: 40px;
}
.app-preis {
  font-family: var(--awq-display);
  font-size: 21px;
  color: #F2F4F6;
}

.app-liste { margin: 0 0 18px; padding-left: 20px; }
.app-liste li { margin-bottom: 8px; }

.app-kacheln {
  display: grid;
  gap: 14px;
  margin-top: 34px;
}
.app-kachel {
  display: block;
  border: 1px solid rgba(169, 184, 198, .22);
  border-radius: var(--awq-radius);
  padding: 20px 22px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
a.app-kachel:hover { border-color: var(--awq-moonstone); transform: translateY(-1px); }
.app-kachel p:last-child { margin-bottom: 0; }
.app-kachel--zu { opacity: .55; }
.app-schloss { font-size: 14px; color: var(--awq-moonstone); }

.app-stueck {
  border-top: 1px solid rgba(169, 184, 198, .14);
  padding: 18px 0;
}
.app-stueck:first-child { border-top: 0; padding-top: 0; }
.app-stueck audio { width: 100%; margin-top: 8px; }

.app-link {
  display: inline-block;
  color: #C9D6E0;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.app-zurueck { font-size: 14px; color: var(--awq-moonstone); }

.app-form { margin-bottom: 24px; }
body.app .feld label { color: var(--awq-moonstone); }
body.app .feld input {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(169, 184, 198, .3);
  color: #F2F4F6;
  /* 16px ist kein Gestaltungswert: darunter zoomt iOS beim Antippen in
     das Feld hinein und die Seite steht danach schief. */
  font-size: 16px;
}
body.app .feld input:focus { border-color: var(--awq-moonstone); outline: none; }

body.app .meldung { color: var(--awq-moonstone); font-size: 15px; }
body.app .meldung.fehler { color: #F0B7A8; }

body.app .ticket { border: 0; cursor: pointer; font: inherit; }
body.app .ticket[disabled] { opacity: .5; cursor: default; }

.app-fuss {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 20px 40px;
  font-size: 13px;
  color: #7E8E9C;
}
.app-fuss p { margin: 0 0 4px; }
.app-fuss a { color: #7E8E9C; }


/* =======================================================================
   Das Menue. EIN Markup, zwei Erscheinungsformen.

   Unten auf dem Telefon, links auf dem Rechner. Die Grenze liegt bei
   860px: darunter ist eine linke Spalte teurer als sie bringt, darueber
   ist eine Leiste am unteren Rand verschenkter Platz.

   Warum unten und nicht oben: das hier wird einhaendig im Bett benutzt.
   Der Daumen erreicht den unteren Rand, den oberen nicht.
   ======================================================================= */

.app-nav-marke,
.app-nav-abmelden { display: none; }

@media (max-width: 859px) {
  .app-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #101A22;
    border-top: 1px solid rgba(169, 184, 198, .18);
    /* Der Balken bei iPhones ohne Knopf liegt sonst ueber den Reitern. */
    padding-bottom: env(safe-area-inset-bottom);
  }
  .app-reiter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    /* 56px plus Beschriftung: darunter trifft ein Daumen daneben. Die
       Apple- wie die Android-Vorgabe nennt 44 als Untergrenze, und das
       ist die Untergrenze, nicht das Ziel. */
    padding: 9px 4px calc(9px + 2px);
    min-height: 56px;
    color: #7E8E9C;
    text-decoration: none;
    font-size: 11px;
    letter-spacing: .01em;
  }
  .app-reiter svg { width: 23px; height: 23px; }
  .app-reiter[aria-current="page"] { color: var(--awq-gold); }

  /* Platz fuer die Leiste, sonst steht das letzte Element darunter. */
  .app-fuss { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}

@media (min-width: 860px) {
  .app-kopf { display: none; }

  .app-nav {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: 232px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 26px 16px 22px;
    background: #101A22;
    border-right: 1px solid rgba(169, 184, 198, .18);
    z-index: 10;
  }
  .app-nav-marke {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 26px;
    padding: 0 10px;
    color: #F2F4F6;
    text-decoration: none;
    font-family: var(--awq-display);
    font-size: 15px;
    line-height: 1.25;
  }
  .app-nav-marke img { flex: 0 0 auto; }

  .app-reiter {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: var(--awq-radius);
    color: #A9B8C6;
    text-decoration: none;
    font-size: 15px;
  }
  .app-reiter svg { width: 20px; height: 20px; flex: 0 0 auto; }
  .app-reiter:hover { background: rgba(255, 255, 255, .05); color: #F2F4F6; }
  .app-reiter[aria-current="page"] {
    background: rgba(255, 255, 255, .07);
    color: #F2F4F6;
  }

  .app-nav-abmelden {
    display: block;
    margin-top: auto;
    background: none;
    border: 0;
    padding: 11px 12px;
    color: #7E8E9C;
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
  }
  .app-nav-abmelden:hover { color: #C9D6E0; }

  .app-inhalt,
  .app-fuss { margin-left: 232px; padding-left: 40px; padding-right: 40px; }
  .app-inhalt { padding-top: 48px; max-width: 700px; }
}

/* -- Der Hinweis aufs Installieren -------------------------------------
   Als Leiste ueber dem Menue, nicht als Kasten in der Mitte. Ein
   Overlay, das den Inhalt verdeckt, bevor jemand ihn gesehen hat,
   wird weggetippt, ohne gelesen zu werden.                            */
.app-installieren {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(76px + env(safe-area-inset-bottom));
  z-index: 20;
  background: #1D2C38;
  border: 1px solid rgba(227, 178, 60, .4);
  border-radius: 10px;
  padding: 16px 18px;
  font-size: 15px;
  line-height: 1.55;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.app-installieren p { margin: 0 0 12px; }
.app-installieren-knoepfe {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.app-installieren .ticket { font-size: 15px; padding: 10px 18px; }

@media (min-width: 860px) {
  .app-installieren { display: none !important; }
}

/* -- Das Studio ---------------------------------------------------------
   Jaynes Seite zum Befuellen. Dichter als der Rest der Anwendung: hier
   wird gearbeitet, nicht gelesen, und jedes Stueck soll auf einen Blick
   als ein Block erkennbar sein.                                       */

.studio-stueck {
  border: 1px solid rgba(169, 184, 198, .22);
  border-radius: var(--awq-radius);
  padding: 18px 18px 6px;
  margin-bottom: 14px;
}
.studio-stueck .feld { margin-bottom: 12px; }
.studio-stueck textarea {
  width: 100%;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(169, 184, 198, .3);
  border-radius: var(--awq-radius);
  color: #F2F4F6;
  font: inherit;
  font-size: 16px;
  padding: 10px 12px;
  resize: vertical;
}
.studio-stueck h3 { margin-bottom: 2px; }

.studio-haken {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 4px 0 12px;
  color: var(--awq-moonstone);
  cursor: pointer;
}
.studio-haken input {
  /* Gross genug fuer einen Daumen. Die Standardgroesse eines
     Kaestchens ist auf dem Telefon nicht sicher zu treffen. */
  width: 20px;
  height: 20px;
  accent-color: var(--awq-gold);
}

.studio-datei {
  display: block;
  margin: 0 0 12px;
  color: var(--awq-moonstone);
  font-size: 14px;
  max-width: 100%;
}
.studio-datei::file-selector-button {
  background: none;
  border: 1px solid rgba(169, 184, 198, .32);
  border-radius: var(--awq-radius);
  color: #C9D6E0;
  font: inherit;
  font-size: 14px;
  padding: 8px 14px;
  margin-right: 12px;
  cursor: pointer;
}

.studio-knoepfe {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.studio-knoepfe .ticket { font-size: 15px; padding: 9px 20px; }

/* Die zwei Schritte auf der Beitrittsseite. Nummeriert, weil die
   Reihenfolge der Punkt ist: erst zahlen, dann Bescheid geben. */
.app-schritte { margin: 0 0 8px; padding-left: 22px; }
.app-schritte li { margin-bottom: 22px; }
.app-schritte li::marker { color: var(--awq-gold); font-weight: bold; }