/* ---------------------------------------------------------------------------
   Zusatz-Stile für die PHP-Welt (/mitgliederbereich/, /newsletter/)

   WARUM ES DIESE DATEI GIBT — bitte vor dem nächsten Umbau lesen:

   Die PHP-Seiten binden /css/main.css ein. Das ist aber kein vollständiges
   Tailwind, sondern das Ergebnis des Next.js-Builds: Tailwind nimmt nur die
   Klassen mit hinein, die es im React-Quelltext gefunden hat — rund 240 Stück.
   Alles, was ausschliesslich in einer PHP-Datei steht, kennt Tailwind nicht und
   lässt es weg.

   Folge: Eine PHP-Seite kann Klassen schreiben, die es im ausgelieferten CSS
   gar nicht gibt. Sie wirken einfach nicht. Genau daran lag es, dass das
   Mitglieder-Menü zusammengeklebt aussah: gap-1, px-3.5 und rounded-full
   waren nie da.

   Diese Datei definiert deshalb von Hand die Hilfsklassen, die der
   Mitgliederbereich braucht — mit denselben Namen wie in Tailwind, damit das
   Markup in beiden Welten gleich aussieht. Wer hier eine neue Klasse im PHP
   benutzt, muss sie hier eintragen oder prüfen, dass main.css sie schon hat.
--------------------------------------------------------------------------- */

:root {
  --mm-navy:     #023341;
  --mm-ocean:    #0A5A72;
  --mm-sun:      #FC6A0B;
  --mm-sand:     #F2E8DA;
  --mm-charcoal: #2A2A2A;
  --mm-light:    #FFFDF8;
  --mm-coral:    #B44537;
}

/* --- Anzeige und Fluss ---------------------------------------------------- */
/* justify-end/-start fehlen in main.css, weil die React-Seiten sie nicht
   benutzen. Ohne sie stehen im Chat die eigenen Nachrichten links statt
   rechts — im Browser nachgemessen, nicht vermutet. */
.justify-end   { justify-content: flex-end; }
.justify-start { justify-content: flex-start; }
.text-left     { text-align: left; }
.align-top     { vertical-align: top; }
.pr-4          { padding-right: 1rem; }
.inline-flex { display: inline-flex; }
.flex-1     { flex: 1 1 0%; }
.flex-none  { flex: none; }
.min-w-0    { min-width: 0; }
.items-start{ align-items: flex-start; }
.whitespace-nowrap   { white-space: nowrap; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.resize-y   { resize: vertical; }
.cursor-pointer { cursor: pointer; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-clamp-2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Waagerechte Leiste ohne sichtbaren Rollbalken. */
.mm-ohne-rollbalken { scrollbar-width: none; -ms-overflow-style: none; }
.mm-ohne-rollbalken::-webkit-scrollbar { display: none; }

/* --- Abstände ------------------------------------------------------------- */
.gap-1 { gap: .25rem; }
.gap-8 { gap: 2rem; }
.mt-0\.5 { margin-top: .125rem; }
.mt-1  { margin-top: .25rem; }
.mt-5  { margin-top: 1.25rem; }
.mt-8  { margin-top: 2rem; }
.mt-14 { margin-top: 3.5rem; }
.mb-0\.5 { margin-bottom: .125rem; }
.ml-2  { margin-left: .5rem; }
.mr-4  { margin-right: 1rem; }
.pt-3  { padding-top: .75rem; }
.pt-10 { padding-top: 2.5rem; }
.pb-4  { padding-bottom: 1rem; }
.pb-6  { padding-bottom: 1.5rem; }
.py-8  { padding-top: 2rem; padding-bottom: 2rem; }
.py-0\.5 { padding-top: .125rem; padding-bottom: .125rem; }
.py-1  { padding-top: .25rem; padding-bottom: .25rem; }
.py-1\.5 { padding-top: .375rem; padding-bottom: .375rem; }
.px-1  { padding-left: .25rem; padding-right: .25rem; }
.px-2  { padding-left: .5rem; padding-right: .5rem; }
.px-3  { padding-left: .75rem; padding-right: .75rem; }
.px-2\.5 { padding-left: .625rem; padding-right: .625rem; }
.px-3\.5 { padding-left: .875rem; padding-right: .875rem; }
.px-5  { padding-left: 1.25rem; padding-right: 1.25rem; }
.p-0   { padding: 0; }
.p-10  { padding: 2.5rem; }
.space-y-1 > * + * { margin-top: .25rem; }
.space-y-3 > * + * { margin-top: .75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-8 > * + * { margin-top: 2rem; }

/* --- Grössen -------------------------------------------------------------- */
.w-4  { width: 1rem; }
.w-32 { width: 8rem; }
.h-4  { height: 1rem; }
.h-5  { height: 1.25rem; }
.h-6  { height: 1.5rem; }
.h-32 { height: 8rem; }
.h-\[24rem\] { height: 24rem; }
.h-\[26rem\] { height: 26rem; }
.max-w-xs { max-width: 20rem; }
.max-w-xl { max-width: 36rem; }
.max-w-\[85\%\] { max-width: 85%; }
.min-w-\[1\.25rem\] { min-width: 1.25rem; }
.min-w-\[1\.5rem\]  { min-width: 1.5rem; }
.min-w-\[12rem\]    { min-width: 12rem; }
.min-w-\[14rem\]    { min-width: 14rem; }

/* --- Raster --------------------------------------------------------------- */
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* --- Ecken, Rahmen, Ringe ------------------------------------------------- */
.rounded-lg   { border-radius: .5rem; }
.rounded-r-xl { border-top-right-radius: .75rem; border-bottom-right-radius: .75rem; }
.border       { border-width: 1px; border-style: solid; }
.border-l-4   { border-left-width: 4px; border-left-style: solid; }
.border-navy\/20 { border-color: rgba(2, 51, 65, .2); }
.border-navy\/10 { border-color: rgba(2, 51, 65, .1); }
.border-sun      { border-color: var(--mm-sun); }
.ring-1        { box-shadow: 0 0 0 1px rgba(2, 51, 65, .1); }
.ring-navy\/10 { box-shadow: 0 0 0 1px rgba(2, 51, 65, .1); }
.ring-sun\/60  { box-shadow: 0 0 0 1px rgba(252, 106, 11, .6); }
.shadow-inner  { box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, .05); }
.transition-shadow { transition: box-shadow .15s ease; }
.hover\:shadow-md:hover { box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); }

/* --- Farben --------------------------------------------------------------- */
.bg-navy\/10  { background-color: rgba(2, 51, 65, .1); }
.bg-light\/10 { background-color: rgba(255, 253, 248, .1); }
.bg-light\/20 { background-color: rgba(255, 253, 248, .2); }
.bg-sand\/40  { background-color: rgba(242, 232, 218, .4); }
.bg-sand\/50  { background-color: rgba(242, 232, 218, .5); }
.bg-sun\/20   { background-color: rgba(252, 106, 11, .2); }
.hover\:bg-navy\/20:hover { background-color: rgba(2, 51, 65, .2); }
.hover\:bg-sun:hover      { background-color: var(--mm-sun); }
.text-charcoal\/50 { color: rgba(42, 42, 42, .5); }
.text-charcoal\/55 { color: rgba(42, 42, 42, .55); }
.text-charcoal\/90 { color: rgba(42, 42, 42, .9); }
.text-coral    { color: var(--mm-coral); }
.text-red-700  { color: #BE171E; }
.to-ocean      { --tw-gradient-to: var(--mm-ocean); }

/* --- Schrift -------------------------------------------------------------- */
.text-\[10px\] { font-size: 10px; line-height: 1.3; }
.text-\[11px\] { font-size: 11px; line-height: 1.3; }
.text-6xl      { font-size: 3.75rem; line-height: 1; }
.tracking-wider{ letter-spacing: .05em; }
.font-mono     { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.align-middle  { vertical-align: middle; }
.list-disc     { list-style-type: disc; }
.list-decimal  { list-style-type: decimal; }
.list-inside   { list-style-position: inside; }
.hover\:no-underline:hover { text-decoration: none; }

/* --- Formularfelder ------------------------------------------------------- */
.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
.focus\:ring-2:focus       { box-shadow: 0 0 0 2px rgba(252, 106, 11, .45); }
.focus\:ring-sun:focus     { box-shadow: 0 0 0 2px rgba(252, 106, 11, .45); }
.focus\:ring-sun\/30:focus { box-shadow: 0 0 0 2px rgba(252, 106, 11, .3); }
.focus\:border-sun:focus   { border-color: var(--mm-sun); }

.file\:mr-4::file-selector-button          { margin-right: 1rem; }
.file\:rounded-full::file-selector-button  { border-radius: 9999px; }
.file\:border-0::file-selector-button      { border: 0; }
.file\:bg-navy::file-selector-button       { background-color: var(--mm-navy); }
.file\:text-light::file-selector-button    { color: var(--mm-light); }
.file\:px-4::file-selector-button          { padding-left: 1rem; padding-right: 1rem; }
.file\:py-2::file-selector-button          { padding-top: .5rem; padding-bottom: .5rem; }
.file\:text-sm::file-selector-button       { font-size: 14px; }
.file\:font-semibold::file-selector-button { font-weight: 600; cursor: pointer; }

/* --- ab 640 Pixel --------------------------------------------------------- */
@media (min-width: 640px) {
  .sm\:col-span-2 { grid-column: span 2 / span 2; }
  .sm\:col-span-3 { grid-column: span 3 / span 3; }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sm\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sm\:grid-cols-\[16rem_1fr_auto\] { grid-template-columns: 16rem 1fr auto; }
  .sm\:h-\[30rem\] { height: 30rem; }
  .sm\:h-\[32rem\] { height: 32rem; }
  .sm\:max-w-\[70\%\] { max-width: 70%; }
  .sm\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
}

/* ---------------------------------------------------------------------------
   Das Mitglieder-Menü. Eigene Klassen statt Hilfsklassen-Stapel: Das Menü ist
   ein einzelner, wiederkehrender Baustein, und so kann es niemand mehr
   versehentlich mit einer Klasse zerlegen, die es im CSS nicht gibt.
--------------------------------------------------------------------------- */
.mm-menu {
  background: var(--mm-navy);
  border-top: 1px solid rgba(255, 253, 248, .12);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
}
.mm-menu-innen {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 640px) { .mm-menu-innen { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .mm-menu-innen { padding: 0 2rem; } }

/* 26.8.2026: Vorher eine einzige waagerecht scrollende Zeile mit bewusst
   verstecktem Scrollbalken — bei 12 bis 14 Punkten (13-14 für den Owner)
   ohne jeden Hinweis, dass es weitergeht. Karsten: "eine Katastrophe". Jetzt
   umbricht die Liste normal auf so viele Zeilen wie nötig — alles sichtbar,
   nichts versteckt, kein Scrollen in dieser Leiste mehr nötig. */
.mm-menu-liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .375rem;
  margin: 0;
  padding: .375rem 0;
  list-style: none;
}

/* 26.8.2026, zweiter Schritt: Der Umbruch allein hat nur das Verstecken
   beseitigt, nicht die Überladung — Codex' ehrlicher Review, Fund 3. Jetzt
   vier thematische Gruppen mit eigener Kopfzeile statt einer einzigen Liste. */
.mm-menu-gruppen {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 1.75rem;
  padding: .5rem 0;
}
.mm-menu-gruppe { padding: .25rem 0; }
.mm-menu-gruppentitel {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255, 253, 248, .45);
  padding: .25rem 0 0;
}

.mm-menu-punkt {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  white-space: nowrap;
  padding: .5rem .9rem;
  border-radius: 9999px;
  font-size: 14px;
  line-height: 1.2;
  color: rgba(255, 253, 248, .78);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.mm-menu-punkt:hover  { background: rgba(255, 253, 248, .12); color: var(--mm-light); }
.mm-menu-punkt:focus-visible { outline: 2px solid var(--mm-sun); outline-offset: 2px; }
.mm-menu-punkt[aria-current="page"] {
  background: var(--mm-sun);
  color: var(--mm-navy);
  font-weight: 600;
}

/* Zahl der ungelesenen Nachrichten. */
.mm-menu-zahl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 .3rem;
  border-radius: 9999px;
  background: var(--mm-sun);
  color: var(--mm-navy);
  font-size: 11px;
  font-weight: 700;
}
.mm-menu-punkt[aria-current="page"] .mm-menu-zahl {
  background: var(--mm-navy);
  color: var(--mm-sun);
}