/* Marketingcenter zusammenbesser.
   Farben, Schriften und Regeln nach
   ../gemeinsam-zusammenbesser/handbuch/ZUSAMMENBESSER-CI.md.
   Die Schriften liegen im Abbild — nichts wird von Google geladen. */

@font-face {
  font-family: 'Raleway';
  src: url('/statisch/schriften/raleway-latin-variable.woff2') format('woff2');
  font-weight: 100 900; font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('/statisch/schriften/source-sans-3-latin-variable.woff2') format('woff2');
  font-weight: 200 900; font-display: swap;
}

:root {
  --zb-salbei:        #6D7A71;
  --zb-terrakotta:    #BA806A;
  --zb-papier:        #EFEADD;
  --zb-tiefgruen:     #2E3630;
  --zb-salbei-dunkel: #59655D;
  --zb-grau:          #5F6A62;
  --zb-terra-dunkel:  #8F5B45;
  --zb-blatt:         #FFFFFF;
  --zb-mappe:         #E5E1D4;

  --anzeige: 'Raleway', 'Avenir Next', 'Segoe UI', sans-serif;
  --text:    'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--text);
  font-size: 1.0625rem;          /* 17 px — Handbuch */
  line-height: 1.65;
  color: var(--zb-tiefgruen);
  background: var(--zb-papier);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
  font-family: var(--anzeige);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: var(--zb-tiefgruen);
  text-wrap: balance;
}
h1 { font-size: 1.9rem; margin: 0 0 .3rem; }
h2 { font-size: 1.1rem; margin: 0 0 .6rem; }

a { color: var(--zb-terra-dunkel); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--zb-terrakotta); outline-offset: 2px;
}

.bahn { max-width: 68rem; margin: 0 auto; padding: 1.25rem 1rem 3rem; }

/* --- Kopf ----------------------------------------------------------- */

.kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: .75rem max(1rem, calc((100vw - 68rem) / 2 + 1rem));
  border-bottom: 1px solid var(--zb-mappe);
  background: var(--zb-papier);
}
.marke { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.marke img { height: 34px; width: auto; display: block; }
.marke-wort {
  font-family: var(--anzeige); font-weight: 600; font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--zb-grau);
  border-left: 1px solid var(--zb-mappe); padding-left: .7rem;
}
@media (max-width: 460px) { .marke-wort { display: none; } }

/* --- Bausteine ------------------------------------------------------- */

.unterzeile { color: var(--zb-grau); margin: 0 0 1.5rem; }
.leise { color: var(--zb-grau); font-size: .9rem; line-height: 1.45; }
.zurueck { margin: 0 0 1rem; }

.knopf, .knopf-leise {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .55rem 1.1rem;
  font-family: var(--anzeige); font-size: 1rem; font-weight: 600;
  border: 1px solid var(--zb-salbei-dunkel); cursor: pointer;
  text-decoration: none;
}
.knopf { background: var(--zb-salbei-dunkel); color: #fff; }
.knopf-leise { background: transparent; color: var(--zb-salbei-dunkel); }
.knopf:hover { background: var(--zb-tiefgruen); border-color: var(--zb-tiefgruen); }

.meldung { padding: .7rem .9rem; margin: 0 0 1rem; border-left: 3px solid; }
.fehler  { border-color: var(--zb-terra-dunkel); background: #fff; }
.warnung { border-color: var(--zb-terrakotta); background: #fff; }

.marke-chip {
  display: inline-flex; align-items: center; min-height: 38px;
  padding: .25rem .8rem; margin: 0 .4rem .4rem 0;
  font-family: var(--anzeige); font-size: .9rem; font-weight: 600;
  letter-spacing: .04em; text-decoration: none;
  color: var(--zb-salbei-dunkel); background: var(--zb-mappe);
}
.marke-chip.gewaehlt { background: var(--zb-salbei-dunkel); color: #fff; }
.filter { margin: 0 0 1.5rem; }

.eckdaten {
  display: grid; grid-template-columns: auto 1fr; gap: .15rem .8rem;
  margin: 0; font-size: .95rem;
}
.eckdaten dt { color: var(--zb-grau); }
.eckdaten dd { margin: 0; }
.eckdaten code { font-size: .85rem; word-break: break-all; }

/* --- Übersicht ------------------------------------------------------- */

.raster {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.karte { background: var(--zb-blatt); border: 1px solid var(--zb-mappe); }
.karte a { display: block; text-decoration: none; color: inherit; height: 100%; }
.karte:hover { border-color: var(--zb-terrakotta); }
.karte-bild {
  background: var(--zb-mappe); aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.karte-bild img { max-width: 100%; max-height: 100%; object-fit: contain; padding: .8rem; }
.kein-bild { color: var(--zb-grau); font-size: .9rem; }
.karte-text { padding: .9rem 1rem 1.1rem; }
.karte-art {
  font-family: var(--anzeige); font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--zb-grau);
  margin: 0 0 .25rem;
}
.karte h2 { font-size: 1.15rem; margin: 0 0 .6rem; }

/* --- Produktseite ---------------------------------------------------- */

.deckel { margin: 0 0 1.5rem; }
.spalten { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 60rem) { .spalten { grid-template-columns: 1.3fr 1fr; align-items: start; } }

.blatt {
  background: var(--zb-blatt); border: 1px solid var(--zb-mappe);
  padding: 1.1rem 1.2rem; margin: 0 0 1.25rem;
}
.angaben .blatt:last-child { margin-bottom: 0; }

.vorschauen { display: grid; gap: 1.2rem; }
@media (min-width: 36rem) { .vorschauen { grid-template-columns: 1fr 1fr; } }
.vorschauen h2 { grid-column: 1 / -1; }
.vorschauen figure { margin: 0; }
.vorschauen img {
  width: 100%; height: auto; display: block;
  background: var(--zb-mappe); border: 1px solid var(--zb-mappe);
}
.vorschauen figcaption { color: var(--zb-grau); font-size: .9rem; padding-top: .4rem; }

.dateiliste { list-style: none; margin: 0; padding: 0; }
.dateiliste li { margin: 0 0 1rem; }
.dateiliste li:last-child { margin-bottom: 0; }
.dateiliste .knopf { width: 100%; }
.dateiliste p { margin: .35rem 0 0; }

/* =====================================================================
   GEMEINSAM — dieser Abschnitt steht WOERTLICH GLEICH in
   `doku-zusammenbesser`, `controlling-zusammenbesser` und
   `print-zusammenbesser`. Wer hier etwas aendert, aendert es in allen
   dreien (Ansage Gunnar, 28.10.2026).

   Deshalb keine Variablen der jeweiligen Anwendung: feste Markenfarben
   aus dem Handbuch und eine eigene Schriftvariable. Das Controlling steht
   sonst noch auf der alten Palette — an diesen beiden Stellen nicht.
   ===================================================================== */

/* Der Abschnitt bringt seine Schriften selbst mit. Das Controlling fuehrt
   sonst Montserrat; ohne diese beiden Zeilen saehe sein Anmeldeschirm anders
   aus als die der anderen, und „gleich" waere er nur im Aufbau. Die Dateien
   liegen in jedem Abbild unter demselben Weg; nichts kommt von Google. */
@font-face {
  font-family: "Raleway";
  font-style: normal; font-weight: 300 600; font-display: swap;
  src: url(/statisch/schriften/raleway-latin-variable.woff2) format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(/statisch/schriften/source-sans-3-latin-variable.woff2) format("woff2");
}

.anmelde-buehne, .profil {
  --gemeinsam-anzeige: "Raleway", "Avenir Next", "Segoe UI", sans-serif;
  --gemeinsam-text: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* Auch der Fliesstext gehoert dazu: Die Felder erben sonst die Schrift der
   jeweiligen Anwendung, und dann stehen in der einen Montserrat-Ziffern und
   in der anderen Source-Sans-Ziffern. */
.anmelde-buehne, .profil-klappe { font-family: var(--gemeinsam-text); }

/* --- Anmeldung ------------------------------------------------------- */
/* DER ANMELDESCHIRM IST IN ALLEN EIGENEN ZUSAMMENBESSER-ANWENDUNGEN GLEICH.
   Raster vom Controlling, Farben und Schriften aus dem Handbuch (Ansage
   Gunnar, 28.10.2026). Wer ihn hier aendert, aendert ihn auch in
   `doku-zusammenbesser` und `controlling-zusammenbesser`.

   Zwei Flaechen ueber die volle Hoehe. Die linke traegt Salbei dunkel und
   das Logo in der Negativfassung; die rechte den Papierton. Der Sprung
   zwischen den Haelften ist deutlich, aber beide bleiben Markenflaechen —
   kein Schwarz, kein Weiss.

   Feste Markenfarben statt Tokens: EIN Aussehen, unabhaengig davon, welche
   Variablen die jeweilige Anwendung sonst fuehrt. Das Controlling steht
   heute noch auf der alten Palette; an dieser Stelle nicht. */

.anmelde-buehne {
  min-height: 100dvh;
  display: grid; grid-template-columns: 1fr;
  background: #EFEADD;                       /* Papier */
}

/* Drei Reihen: Das Logo steht in der mittleren und damit in der wirklichen
   senkrechten Mitte der Flaeche, der Spruch sitzt am Fuss der unteren. Die
   beiden Randreihen sind `minmax(0, 1fr)` und nicht `1fr` — sonst schoebe
   die Hoehe des Spruchs die untere Reihe auf und das Logo saesse messbar zu
   hoch. */
.anmelde-signatur {
  background: #59655D; color: #EFEADD;       /* Salbei dunkel auf Papier */
  display: grid; grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  justify-items: center;
  padding: 3rem 2rem;
}

/* Der Block ist so breit wie das Logo und so hoch wie das Logo — mehr nicht.
   Der Spruch haengt absolut darunter und zaehlt fuer die Hoehe nicht mit.
   Genau das haelt das Logo in der senkrechten Mitte: Ein langer Spruch
   reicht weiter nach unten, statt das Logo nach oben zu schieben. */
.signatur-block { grid-row: 2; width: min(88%, 300px); position: relative; }

.anmelde-logo { display: block; width: 100%; height: auto; }

/* Rechts an der Logokante ausgerichtet, nicht links: Das Lockup laeuft dort
   mit „ZUSAMMEN" und „BESSER" auf eine gemeinsame Kante aus, und der Block
   nimmt sie auf.

   Linksbuendig mit Balken an der Kante — die aelteste Form, ein Zitat als
   Zitat zu kennzeichnen, und die einzige, die ohne waagerechte Linie
   auskommt. Der Balken steht in Terrakotta hell: Das normale Terrakotta
   waere auf dem dunklen Grund zu leise (Handbuch, Abschnitt 3).

   Nicht kursiv, obwohl das bei Zitaten die Gewohnheit ist: Kursiv ist eine
   Auszeichnung fuer ein paar Woerter, ueber drei Zeilen wird der Grauwert
   unruhig. Anfuehrungszeichen und Balken zeichnen bereits aus. */
.spruch {
  position: absolute; top: 100%; right: 0; margin: 1.5rem 0 0;
  width: 85%;
  padding: .1rem 0 .1rem 1rem; border: 0;
  border-left: 2px solid #D9A88E;            /* Terrakotta hell */
}
.spruch p {
  margin: 0 0 .5rem;
  font-family: var(--gemeinsam-anzeige); font-weight: 300;
  font-size: .9375rem; line-height: 1.6; font-style: normal;
  text-wrap: pretty;
}
.spruch cite {
  display: block; font-style: normal;
  font-size: .75rem; font-weight: 400; line-height: 1.6; opacity: .9;
}
/* Werk und Jahr eine Spur leiser als der Name — die Fundstelle belegt, sie
   soll nicht mitreden. */
.spruch cite span { display: block; opacity: .8; }

.anmelde-feldseite { display: grid; place-items: center; padding: 2rem 1.5rem; }

/* Frei stehend: kein Rahmen, kein Hintergrund, kein Schatten. Das ist der
   Kern der Wirkung — neben dem Formular steht nichts, was den Blick haelt. */
.anmelde-karte {
  width: 100%; max-width: 23.75rem;
  background: transparent; border: 0; padding: 0; color: #2E3630;
}

.marke-zeile {
  margin: 0 0 .75rem;
  font-family: var(--gemeinsam-anzeige);
  font-size: .75rem; font-weight: 600; line-height: 1.55;
  letter-spacing: .22em; text-transform: uppercase; color: #5F6A62;
}

/* Groesse und Abstaende wie im Controlling, aber **mager**: Das Handbuch
   (Abschnitt 4) setzt Ueberschriften auf 400 und ausdruecklich nicht fett.
   Die 800 des Controllings gehoeren zu dessen alter Palette. */
.anmelde-karte h1 {
  font-family: var(--gemeinsam-anzeige);
  font-size: 2.125rem; font-weight: 400; letter-spacing: .01em;
  line-height: 1.2; margin: 0 0 1.5rem; color: #2E3630;
}

.anmelde-karte .meldung { margin: 0 0 1.4rem; background: #FFFFFF; }

/* 16 px zwischen zwei Feldgruppen und ebenso vom letzten Feld zum Knopf —
   der untere Abstand hier leistet beides. */
.feld { display: block; margin: 0 0 1rem; }
.feld span {
  display: block;
  font-family: var(--gemeinsam-anzeige);
  font-size: .75rem; font-weight: 600; letter-spacing: .08em;
  line-height: 1.55; text-transform: uppercase; color: #5F6A62;
  margin-bottom: .5rem;
}
/* Eckig, und zwar Feld wie Knopf. Hoehen fest, damit sie in allen drei
   Anwendungen gleich sind. 17 px im Feld, sonst zoomt iOS beim Antippen. */
.feld input {
  width: 100%; height: 46px; padding: 10px 12px;
  font: inherit; font-size: 1.0625rem; font-weight: 400;
  color: #2E3630; background: #FFFFFF;
  border: 2px solid #6D7A71; border-radius: 0;
}
.feld input:focus-visible { border-color: #BA806A; outline: 2px solid #BA806A; }

.anmelde-karte .knopf {
  width: 100%; height: 46px; border-radius: 0;
  background: #59655D; border-color: #59655D; color: #FFFFFF;
}
.anmelde-karte .knopf:hover { background: #2E3630; border-color: #2E3630; }

@media (min-width: 48rem) {
  .anmelde-buehne { grid-template-columns: minmax(20rem, 42%) 1fr; }
  .anmelde-signatur { padding: 3.5rem; }
  .signatur-block { width: min(100%, 360px); }
  .anmelde-feldseite { padding: 3rem 2rem; justify-items: start; }
  .anmelde-karte { max-width: 25rem; }
}

/* Schmal steht der Spruch im Fluss und nicht absolut: Auf einem Telefon
   haengt er sonst aus der farbigen Flaeche heraus und liegt im Papierton.
   Das Logo darf dort ein Stueck wandern — ueberlappender Text nicht. */
@media (max-width: 47.99rem) {
  .anmelde-signatur { grid-template-rows: auto; align-content: center; }
  .spruch { position: static; width: 100%; margin: 1.25rem 0 0; }
}

/* --- Benutzerbereich ------------------------------------------------- */
/* IN ALLEN EIGENEN ZUSAMMENBESSER-ANWENDUNGEN GLEICH. Vorbild ist das
   Controlling; dazugekommen sind die Kacheln zu den Schwesteranwendungen.
   Wer das hier aendert, aendert es auch in `doku-zusammenbesser` und
   `controlling-zusammenbesser`. Feste Markenfarben statt Tokens, damit es
   ueberall gleich aussieht. */

.profil { position: relative; }

/* Der Ausloeser ist eine Pille, nicht nur der Kreis: Der Rand liegt im
   Ruhezustand durchsichtig da und wird bei Hover und im offenen Zustand
   sichtbar. So bleibt der Kopf ruhig, und der Knopf antwortet trotzdem. */
.profil > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .4rem .2rem .2rem;
  min-height: 44px;
  border: 1px solid transparent; border-radius: 999px;
  transition: border-color .12s, background .12s;
}
.profil > summary::-webkit-details-marker { display: none; }
.profil > summary::marker { content: ""; }
.profil > summary:hover { border-color: #C9CFC9; }
.profil[open] > summary { border-color: #C9CFC9; background: #FFFFFF; }
.profil > summary:focus-visible { outline: 2px solid #BA806A; outline-offset: 2px; }

.profil-pfeil { flex: 0 0 auto; color: #5F6A62; transition: transform .15s; }
.profil[open] .profil-pfeil { transform: rotate(180deg); color: #2E3630; }

.profil-kreis {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 50%;
  background: #59655D; color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--gemeinsam-anzeige);
  font-size: .78rem; font-weight: 600; letter-spacing: .02em;
  user-select: none;
}

.profil-klappe {
  position: absolute; top: calc(100% + .55rem); right: 0; z-index: 20;
  min-width: 17rem;
  /* Rechts verankert, aber nie breiter als der Bildschirm: sonst klebt die
     Klappe auf schmalen Geraeten am Rand oder schiebt die Seite auf. */
  max-width: calc(100vw - 1.5rem);
  background: #FFFFFF; color: #2E3630;
  border: 1px solid #E5E1D4;
  box-shadow: 0 12px 28px rgba(46, 54, 48, .18);
  padding: .4rem;
}

.profil-wer {
  display: grid; gap: .15rem;
  padding: .5rem .6rem .6rem;
  border-bottom: 1px solid #E5E1D4; margin-bottom: .3rem;
}
.profil-wer strong { font-family: var(--gemeinsam-anzeige); font-size: .9rem; line-height: 1.3; }
/* Ein langer Login soll die Klappe nicht aufziehen. */
.profil-wer small { color: #5F6A62; font-size: .75rem; overflow-wrap: anywhere; }

.profil-klappe > a,
.profil-abmelden button {
  display: block; width: 100%; text-align: left;
  padding: .5rem .6rem;
  text-decoration: none; font-size: .85rem; font-weight: 600; color: #5F6A62;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; line-height: inherit;
}
.profil-klappe > a:hover,
.profil-abmelden button:hover { background: #EFEADD; color: #2E3630; }

/* Die Kacheln: drei nebeneinander, die eigene mitgezaehlt und gekennzeichnet.
   Nebeneinander statt untereinander, weil sie zusammen EINE Sache sind — wo
   sonst noch etwas liegt. Untereinander laesen sie sich wie drei weitere
   Menuepunkte. */
.profil-kacheln {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem;
  padding: .3rem 0; margin: .3rem 0;
  border-top: 1px solid #E5E1D4; border-bottom: 1px solid #E5E1D4;
}
/* `.profil-kacheln .kachel` und nicht nur `.kachel`: Das Controlling traegt
   weiter oben ein `.profil-klappe a { background: none; ... }`, das die
   Kacheln sonst schlaegt — es ist spezifischer als eine einzelne Klasse.
   Der Abschnitt soll sich selbst tragen und nicht davon abhaengen, was in
   der jeweiligen Anwendung darueber steht. */
.profil-kacheln .kachel {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .55rem .25rem; min-height: 68px;
  text-decoration: none; text-align: center;
  color: #5F6A62; background: #EFEADD;
  border: 1px solid transparent;
}
.profil-kacheln a.kachel:hover { background: #FFFFFF; border-color: #BA806A; color: #2E3630; }
.profil-kacheln a.kachel:focus-visible { outline: 2px solid #BA806A; outline-offset: 1px; }
.profil-kacheln .kachel-zeichen { width: 20px; height: 20px; flex: 0 0 auto; }
.profil-kacheln .kachel-name {
  font-family: var(--gemeinsam-anzeige);
  font-size: .62rem; font-weight: 600; letter-spacing: .06em;
  line-height: 1.25; text-transform: uppercase; hyphens: auto;
}
/* Die eigene Anwendung: kein Ziel, sondern eine Ortsangabe. Deshalb kein
   Zeigefinger, kein Hover — und der Salbeiton, den auch der Kreis traegt. */
.profil-kacheln .kachel.hier {
  background: #59655D; color: #FFFFFF; cursor: default;
}

/* Abmelden ist von den uebrigen Punkten abgesetzt — es beendet etwas,
   waehrend die anderen nur woandershin fuehren. */
.profil-abmelden { margin-top: .3rem; }

/* ===== Ende des gemeinsamen Abschnitts ===== */



/* --- Fuß ------------------------------------------------------------- */

.fuss {
  border-top: 1px solid var(--zb-mappe);
  padding: 1.2rem max(1rem, calc((100vw - 68rem) / 2 + 1rem));
}
.fuss p { margin: 0; color: var(--zb-grau); font-size: .85rem; }