/* =============================================================================
   Studibuch, alte App (app.studibuch.de) im Umbau-Zustand
   Ein einziges Stylesheet. Ersetzt alle 14 bisherigen Dateien:

     bootstrap.min.css, styles.css, styles.less, jqueryui.css, startpage.css,
     stickymenu.css, font-awesome.min.css, jquery.mCustomScrollbar.css,
     owl.carousel.css, owl.theme.css, productPage.css, checkout.css,
     productLine.css, faq_css.css

   Die App zeigt nur noch zwei Dinge:
     1. eine Karte mit dem Hinweis auf den Umbau und dem Weg zur neuen Ansicht
     2. das Kundenkonto, und dort nur die Anmeldung: Anmelden und Passwort
        vergessen. Registrieren ist entfernt.

   Deshalb steht hier nur, was diese zwei Dinge brauchen. Das Kundenkonto kommt
   unverändert aus dem CMS und benutzt Bootstrap-3-Klassen (.row, .col-sm-*,
   .form-group) sowie eigene (.stan-box, .headline, .btn, .hint, .error-box).
   Bootstrap ist weg, also sind diese Klassen unten so weit nachgebaut, dass die
   Seite benutzbar bleibt. Nachgebaut, nicht neu erfunden: gleiche Namen,
   gleiche Bedeutung, gleiche Abstände.

   Farben und Rundungen sind die der neuen Seite (verkauf.studibuch.de), damit
   der Sprung dorthin nicht wie ein Bruch wirkt. Grün ist unverändert #95C11E.

   Bewusst KEINE Schrift von einem fremden Server: eine Sperrseite ist kein Ort
   für einen zusätzlichen Google-Fonts-Aufruf. Es gilt die Systemschrift, auf
   iPhone und Android also die jeweils eigene.
   ============================================================================= */

:root {
  --gruen:        #95C11E;
  --gruen-dunkel: #84AC1A;
  --dunkel:       #354809;
  --tinte:        #2A2A26;
  --tinte-leise:  rgba(42, 42, 38, 0.70);
  --papier:       #F4F3EE;
  --papier-linie: #E8E6DD;
  --papier-rand:  #C9C5B4;
  --weiss:        #FFFFFF;
  --rot:          #C0392B;
  --rot-flaeche:  #FDECEA;

  --radius:       16px;
  --radius-klein: 10px;
  --schatten:     0 14px 32px rgba(42, 42, 38, 0.09), 0 4px 8px rgba(42, 42, 38, 0.06);

  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------------- 1. Grundlage */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 16px;          /* nicht kleiner: unter 16px zoomt iOS beim Tippen in ein Feld */
  line-height: 1.5;
  color: var(--tinte);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; border: 0; }

a { color: var(--dunkel); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 12px; line-height: 1.25; font-weight: 600; }
h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 18px; }
h4 { font-size: 17px; }
p { margin: 0 0 12px; }

#site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ------------------------------------------------------------- 2. Kopf und Fuß */

#header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 16px;
  background: var(--weiss);
  border-bottom: 1px solid var(--papier-linie);
}

#header .marke { display: block; line-height: 0; }
#header .marke img { width: 120px; height: auto; }

#main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 16px 32px;
}

#footer {
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--weiss);
  border-top: 1px solid var(--papier-linie);
  text-align: center;
  font-size: 13px;
  color: var(--tinte-leise);
}

#footer .rechtliches {
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}
#footer .rechtliches li { display: inline-block; margin: 0 8px; }
#footer .rechtliches a { color: var(--tinte-leise); }
#footer .rechte { margin: 0; }

/* ------------------------------------------------------------- 3. Umbau-Karte */

.umbau-block {
  display: flex;
  justify-content: center;
  padding: 24px 0 8px;
}

.karte {
  width: 100%;
  max-width: 420px;
  padding: 28px 22px 22px;
  background: var(--weiss);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  text-align: center;
}

.karte h1 { font-size: 23px; }

.karte .fliess {
  margin-bottom: 22px;
  color: var(--tinte-leise);
}

.karte .fussnote {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--tinte-leise);
}

/* Die beiden Knöpfe der Karte. Volle Breite, 52 Pixel hoch: das ist auch mit
   dem Daumen sicher zu treffen. */
.karte .knopf {
  display: block;
  min-height: 52px;
  padding: 15px 18px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  background: var(--gruen);
  color: var(--dunkel);
}
.karte .knopf:hover,
.karte .knopf:focus {
  background: var(--gruen-dunkel);
  text-decoration: none;
}

.karte .knopf--leise {
  margin-top: 10px;
  background: transparent;
  border: 1px solid var(--papier-rand);
  color: var(--tinte);
  font-weight: 500;
}
.karte .knopf--leise:hover,
.karte .knopf--leise:focus { background: var(--papier); }

/* ------------------------------------------------- 4. Hinweisleiste im Konto */

.konto-hinweis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  padding: 12px 14px;
  background: var(--weiss);
  border-radius: var(--radius-klein);
  border: 1px solid var(--papier-linie);
  font-size: 14px;
}
.konto-hinweis p { margin: 0; color: var(--tinte-leise); }
.konto-hinweis a {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--gruen);
  color: var(--dunkel);
  font-weight: 600;
  white-space: nowrap;
}
.konto-hinweis a:hover { background: var(--gruen-dunkel); text-decoration: none; }

@media (max-width: 460px) {
  .konto-hinweis { flex-direction: column; align-items: stretch; text-align: center; }
}

/* =============================================================================
   5. Kundenkonto: Ersatz für bootstrap.min.css und styles.css

   Nur die Klassen, die im Konto wirklich vorkommen. Reihenfolge wie im Markup:
   Raster, Formulare, Kästen, Knöpfe, Hinweise.
   ============================================================================= */

/* --- Raster (Bootstrap 3, Umbruchpunkt 768px wie im Original) --------------- */

.row {
  margin-left: -15px;
  margin-right: -15px;
}
.row::after, .form-group::after, .group::after, .clearfix::after {
  content: "";
  display: table;
  clear: both;
}

[class*="col-xs-"], [class*="col-sm-"] {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

.col-xs-1  { width: 8.333333%;  float: left; }
.col-xs-2  { width: 16.666667%; float: left; }
.col-xs-3  { width: 25%;        float: left; }
.col-xs-4  { width: 33.333333%; float: left; }
.col-xs-5  { width: 41.666667%; float: left; }
.col-xs-6  { width: 50%;        float: left; }
.col-xs-7  { width: 58.333333%; float: left; }
.col-xs-8  { width: 66.666667%; float: left; }
.col-xs-9  { width: 75%;        float: left; }
.col-xs-10 { width: 83.333333%; float: left; }
.col-xs-11 { width: 91.666667%; float: left; }
.col-xs-12 { width: 100%; }

@media (min-width: 768px) {
  .col-sm-1  { width: 8.333333%;  float: left; }
  .col-sm-2  { width: 16.666667%; float: left; }
  .col-sm-3  { width: 25%;        float: left; }
  .col-sm-4  { width: 33.333333%; float: left; }
  .col-sm-5  { width: 41.666667%; float: left; }
  .col-sm-6  { width: 50%;        float: left; }
  .col-sm-7  { width: 58.333333%; float: left; }
  .col-sm-8  { width: 66.666667%; float: left; }
  .col-sm-9  { width: 75%;        float: left; }
  .col-sm-10 { width: 83.333333%; float: left; }
  .col-sm-11 { width: 91.666667%; float: left; }
  .col-sm-12 { width: 100%; float: left; }

  .col-sm-offset-1  { margin-left: 8.333333%; }
  .col-sm-offset-2  { margin-left: 16.666667%; }
  .col-sm-offset-3  { margin-left: 25%; }
  .col-sm-offset-4  { margin-left: 33.333333%; }
  .col-sm-offset-5  { margin-left: 41.666667%; }
  .col-sm-offset-6  { margin-left: 50%; }
  .col-sm-offset-7  { margin-left: 58.333333%; }
  .col-sm-offset-8  { margin-left: 66.666667%; }
  .col-sm-offset-9  { margin-left: 75%; }
  .col-sm-offset-10 { margin-left: 83.333333%; }
  .col-sm-offset-11 { margin-left: 91.666667%; }
}

/* --- Formulare -------------------------------------------------------------- */

fieldset { border: 0; padding: 0; margin: 0; }
fieldset.forms { margin-left: -15px; margin-right: -15px; }  /* wie im Original */

.form-group { margin-bottom: 12px; }

.form-group label,
label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
  font-size: 14px;
  color: var(--tinte);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
select,
textarea {
  display: block;
  width: 100%;
  /* Das Original hatte 30 Pixel hohe Felder. In einer App, die mit dem Daumen
     bedient wird, ist das zu klein; 46 sind die von Apple und Google
     empfohlenen 44 plus Rahmen. */
  height: 46px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 16px;
  color: var(--tinte);
  background: var(--papier);
  border: 1px solid var(--papier-linie);
  border-radius: var(--radius-klein);
  -webkit-appearance: none;
  appearance: none;
}

textarea { height: auto; min-height: 110px; padding: 10px 12px; }

select {
  /* Ohne eigenes Zeichen fehlt der Hinweis, dass es ein Auswahlfeld ist:
     -webkit-appearance:none nimmt den vom Betriebssystem gezeichneten Pfeil weg. */
  padding-right: 38px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%232A2A26' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gruen);
  background: var(--weiss);
}

/* Feld mit Fehler: das alte JavaScript setzt diese Klasse und nimmt sie beim
   Antippen wieder weg (script.js). Also muss sie hier existieren. */
.input-error { background: var(--rot-flaeche) !important; border-color: var(--rot) !important; }

/* hidden-Felder bleiben hidden. Steht hier, weil das alte Markup einen
   Absende-Knopf mit style="display:none" mitbringt und ein zu breit gefasster
   Reset ihn sichtbar machen würde. */
input[hidden], [hidden] { display: none !important; }

/* --- Kästen und Überschriften ---------------------------------------------- */

.stan-box {
  position: relative;
  margin-bottom: 20px;
  padding: 18px 16px;
  background: var(--weiss);
  border: 1px solid var(--papier-linie);
  border-radius: var(--radius);
}

.headline {
  display: block;
  margin-bottom: 14px;
  font-size: 18px;
  font-weight: 600;
  color: var(--tinte);
}
.stan-box .headline { color: var(--dunkel); }

.h3 { font-size: 18px; }
.h4 { font-size: 17px; }

.underline { border-bottom: 2px solid var(--gruen); padding-bottom: 6px; }

/* --- Knöpfe ---------------------------------------------------------------- */

/* Im Konto sind die Knöpfe <a class="btn btn-default">, geklickt wird per
   JavaScript (submitLogin, ipilum.js). Aussehen wie die Karte, damit die App
   nicht zwei Knopfsprachen hat.

   inline-block, NICHT block: in der Verkaufshistorie steht neben jeder Zeile ein
   "Details"-Knopf. Als Block über die ganze Spaltenbreite mit 48 Pixel Höhe
   überlappen die sich gegenseitig (am 2026-08-05 im angemeldeten Konto gesehen).
   Über die ganze Breite gehen Knöpfe nur da, wo das Markup es sagt: in einer
   .button-group, also unter dem Anmeldeformular. */
.btn {
  display: inline-block;
  width: auto;
  min-height: 48px;
  padding: 13px 18px;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  color: var(--dunkel);
  background: var(--gruen);
  cursor: pointer;
}
.btn:hover, .btn:focus { background: var(--gruen-dunkel); color: var(--dunkel); text-decoration: none; }

.btn.btn-default { background: var(--gruen); }
.btn.btn-default:hover { background: var(--gruen-dunkel); }

.btn.btn-neutral {
  background: transparent;
  border: 1px solid var(--papier-rand);
  color: var(--tinte);
}
.btn.btn-neutral:hover { background: var(--papier); }

.button-group { margin-top: 16px; }
.button-group .btn { display: block; width: 100%; margin-bottom: 10px; }
.button-group .btn:last-child { margin-bottom: 0; }

.forgot-pw { display: inline-block; padding: 6px 0; color: var(--dunkel); text-decoration: underline; }

/* --- Hinweise im Inhalt ---------------------------------------------------- */

.hint {
  margin: 16px 0;
  padding: 12px 14px;
  border-radius: var(--radius-klein);
  font-size: 13px;
}
.hint.hint-default { color: var(--dunkel); background: #F1F7DF; border: 1px solid var(--gruen); }
.hint.hint-sec     { color: var(--tinte);  background: var(--papier); border: 1px solid var(--papier-rand); }

/* --- Listen im Kontoinhalt -------------------------------------------------- */

/* Das Konto-Menü (Meine Daten, Auszahlung, Verkaufshistorie, Passwort ändern)
   ist eine schlichte <ul>. Ohne Bootstrap standen davor Aufzählungspunkte. */
#ContentDiv ul { margin: 0 0 16px; padding: 0; list-style: none; }
#ContentDiv li { margin-bottom: 8px; }
#ContentDiv li > a { display: inline-block; padding: 4px 0; }

/* --- Tabellen (Verkaufsübersicht im angemeldeten Konto) -------------------- */

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 10px 8px; text-align: left; border-bottom: 1px solid var(--papier-linie); }
th { font-weight: 600; }

/* --- Font Awesome ist weg -------------------------------------------------- */

/* Alle .fa-Zeichen verschwinden, statt als leeres Kästchen stehen zu bleiben.

   Dazu gehört das Auge am Passwortfeld: es kam aus Font Awesome, also entfällt
   der Knopf zum Ein- und Ausblenden des Passworts ganz. Das Skript im Layout
   nimmt ihn aus dem Dokument, diese Regeln sind das Netz darunter, falls der
   Inhalt später per AJAX nachgeladen wird. Beides ist nötig: bloßes Ausblenden
   ließe eine antippbare Fläche stehen, die nichts mehr bewirkt. */
.fa { display: none !important; }
#togglePasswordLogin, #togglePassword { display: none !important; }

/* ------------------------------------------- 6. Meldungen (##errors##/##msg##) */

/* Das System hängt Meldungen als .error-box unten ins Dokument und macht sie
   per Klick wieder zu (init_errorbox in script.js). Grün ist der Erfolgsfall
   (.hinweisFeld), rot der Fehler. Unten statt oben, weil oben in der App der
   Kopf steht und die Meldung dort im Rahmen des Betriebssystems verschwindet. */
.error-box {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 9999;
  padding: 14px 16px;
  border-radius: var(--radius-klein);
  background: var(--rot);
  color: var(--weiss);
  font-size: 15px;
  cursor: pointer;
  box-shadow: var(--schatten);
}
.error-box.hinweisFeld { background: var(--gruen); color: var(--dunkel); }
.error-box .headline { display: inline-block; margin: 0 8px 0 0; color: inherit; font-size: 15px; }
.error-box div { display: inline; }
.error-box a { color: inherit; text-decoration: underline; }

/* =============================================================================
   7. Die Weiche

   Die Klasse am <html>-Element entscheidet, was zu sehen ist. Beides steht im
   Dokument, damit ein einziges Layout für beide Fälle reicht.

   Den Inhalt gesperrter Seiten (Suche, Warenkorb, Artikelseiten) nimmt das
   Skript im Layout ganz aus dem Dokument. Die Regel hier ist das Netz darunter:
   sie greift, bevor das Skript läuft, und auch dann, wenn es gar nicht läuft.
   ============================================================================= */

.umbau-block, .konto-hinweis, .kein-konto { display: none; }

html.umbau .umbau-block { display: flex; }
html.umbau #ContentDiv  { display: none; }

html.konto .konto-hinweis { display: flex; }
html.konto .umbau-block   { display: none; }

/* Keine Konto-Erstellung mehr. Das Skript im Layout nimmt die Registrierung aus
   dem Dokument; diese Regeln sind das Netz darunter, falls der Inhalt später per
   AJAX nachgeladen wird und das Skript ihn nicht mehr zu sehen bekommt.

   BEWUSST OHNE html.konto: am 2026-08-05 hat sich gezeigt, dass die Kontoseiten
   aus einem ZWEITEN, alten Layout kommen — dort läuft die Weiche nicht, also ist
   die Klasse nicht gesetzt. Registrieren soll aber nirgends möglich sein, egal
   welches Layout die Seite ausliefert. Deshalb greifen diese Regeln immer.

   Drei Teile, nicht einer: der Registrier-Kasten, der Satz zu den Pflichtfeldern
   und der Knopf "Registrieren" liegen im fertigen Dokument NEBENEINANDER, nicht
   ineinander (das Markup ist nicht saubergeschachtelt). Wer nur den Kasten
   ausblendet, lässt den Knopf stehen.

   Der Kindselektor ">" ist wichtig: die Anmeldung hat ihre eigene .button-group
   INNERHALB von .stan-box.customer, und die muss bleiben. */
#LoginForm > .stan-box.new-customer,
#LoginForm > .hint,
#LoginForm > .button-group { display: none !important; }

/* Der Hinweis für Neukunden steht nur dort, wo auch ein Anmeldeformular ist. */
html.nur-login .kein-konto {
  display: block;
  max-width: 100%;
  margin: 0 0 8px;
  padding: 14px 16px;
  background: var(--weiss);
  border: 1px solid var(--papier-linie);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--tinte-leise);
  text-align: center;
}

@media (max-width: 460px) {
  html.konto .konto-hinweis { display: block; }
}

/* =============================================================================
   8. Netz für Seiten, die noch das ALTE Layout ausliefern

   Stand 2026-08-05: die Startseite liefert das neue Layout, die Kontoseiten
   (index.jsp?action=8) kommen aus einem ZWEITEN, alten Template. Bis das
   ebenfalls ersetzt ist, muss dieses Stylesheet auch dort aufräumen — es hängt
   über ##head## an jeder Seite.

   Die Umbau-Karte kann es dort nicht zeigen, die steht nur im neuen Layout. Was
   es kann: den alten Rahmen ruhigstellen und nichts Bedienbares stehen lassen.
   ============================================================================= */

#loader-wrapper, .stickyMenu, .appscan { display: none !important; }

/* Kopfzeile des alten Layouts. Die Liste ist der Grund für die zwei
   Aufzählungspunkte neben dem Logo: ein <li> mit dem Burger-Zeichen (das mit
   Font Awesome verschwunden ist) und ein <li> mit dem Logo. */
#main-navbar { width: 100%; }
#main-navbar .container { padding: 0; }
#main-navbar .open-menu { display: none !important; }

.app-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.app-menu .app-logo img { width: 120px; height: auto; }

/* Die Schublade des alten Layouts. Ohne das alte CSS hat sie keine Position mehr
   und stünde als langer Block mitten in der Seite. Alles Bedienbare raus — aber
   die Rechtslinks bleiben, die sind Pflicht und stecken ausgerechnet hier. Über
   die Flex-Reihenfolge in #site rutschen sie unter den Seiteninhalt. */
#site > #mobile-nav-layer { order: 2; }
#site > .page { order: 1; }

#mobile-nav-layer > .dontclick,
#mobile-nav-layer .appscan,
#mobile-nav-layer .search,
#mobile-nav-layer .navi-button,
#mobile-nav-layer .expandMenu,
#mobile-nav-layer .labelExpandableMenu,
#mobile-nav-layer .labelExpandableMenu2,
#mobile-nav-layer #expandableMenu,
#mobile-nav-layer #expandableMenu2,
#mobile-nav-layer .shop-button,
#mobile-nav-layer .social-links,
#mobile-nav-layer center { display: none !important; }

#mobile-nav-layer .info-footer {
  padding: 16px;
  border-top: 1px solid var(--papier-linie);
  text-align: center;
}
#mobile-nav-layer .info-footer ul { margin: 0; padding: 0; list-style: none; }
#mobile-nav-layer .info-footer li { display: inline-block; margin: 0 8px; }
#mobile-nav-layer .info-footer a { color: var(--tinte-leise); font-size: 13px; }

/* Der alte Fuß trägt nur die Jahreszahl. */
#footer.board { background: transparent; border: 0; }

/* Sollte eine CMS-Seite eines dieser Bauteile selbst mitbringen, bleibt es
   unsichtbar, statt die Sperre zu durchbrechen. */
.shop-button, .social-links,
.expandMenu, .labelExpandableMenu, .labelExpandableMenu2,
#expandableMenu, #expandableMenu2 { display: none !important; }