/* ==================================================================
   App-Portal – app.witzki-grimm.de/

   Links die Marke: Firmenblau, weisses Logo, der Tropfen aus dem Logo
   in gross, ueber den beim Laden ein Glanz laeuft ("zu glaenzenden
   Ergebnissen"). Rechts eine ruhige Arbeitsflaeche.
   ================================================================== */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("schrift/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --marke: #312783;
  --marke-hell: #4a3fa8;
  --marke-blass: #eeecf7;
  --rot: #e30613;
  --rot-blass: #fdeced;
  --gruen: #1d7a43;
  --gruen-blass: #e7f3eb;
  --gelb-blass: #fdf5dc;
  --gelb-linie: #e2b400;
  --tinte: #15132f;
  --grau: #5b5a6e;
  --linie: #e3e2ec;
  --linie-stark: #c4c3d4;
  --flaeche: #ffffff;
  --papier: #f6f6f9;

  --schrift: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --anzeige: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;

  --rand: clamp(24px, 5vw, 80px);
  --kurve: cubic-bezier(0.16, 1, 0.3, 1);
  --tempo: 200ms var(--kurve);
  --schatten: 0 1px 2px rgba(21, 19, 47, 0.04), 0 8px 24px rgba(21, 19, 47, 0.06);
  --schatten-hoch: 0 2px 4px rgba(21, 19, 47, 0.05), 0 18px 40px rgba(49, 39, 131, 0.12);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.55;
  color: var(--tinte);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

a { color: var(--marke); }

code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.88em;
  background: var(--marke-blass);
  padding: 1px 6px;
  border-radius: 4px;
}

:focus-visible {
  outline: 3px solid var(--marke-hell);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------------- Symbole ---------------- */

[data-symbol] { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
[data-symbol] > svg { width: 20px; height: 20px; display: block; }

/* ---------------- Testband ---------------- */

.testband {
  background: var(--tinte);
  color: #fff;
  font-size: 13.5px;
  text-align: center;
  padding: 7px 16px;
}

.testband code { background: rgba(255, 255, 255, 0.16); color: #fff; }

/* ---------------- Grundaufteilung ---------------- */

.rahmen {
  display: grid;
  /* Die blaue Seite waechst nicht endlos mit - auf breiten Bildschirmen bleibt sie ruhig */
  grid-template-columns: minmax(380px, min(40vw, 720px)) 1fr;
  min-height: 100vh;
}

/* ---------------- Linke Seite: Buehne ---------------- */

.buehne {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 40px clamp(28px, 4vw, 64px) 48px;
  color: #fff;
  background:
    radial-gradient(90% 60% at 0% 0%, rgba(90, 78, 196, 0.55), transparent 70%),
    var(--marke);
  overflow: hidden;
  isolation: isolate;
}

.buehne__logo { align-self: flex-start; border-radius: 6px; }
.buehne__logo img { display: block; height: clamp(44px, 3.8vw, 60px); width: auto; max-width: 100%; }

.buehne__text {
  margin-top: auto;
  position: relative;
  z-index: 1;
  animation: steigen 900ms var(--kurve) 150ms both;
}

.buehne__titel {
  margin: 0;
  font-family: var(--anzeige);
  font-weight: 800;
  font-size: clamp(42px, 4.6vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.buehne__slogan {
  margin: 20px 0 0;
  max-width: 30ch;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}

/* Der Tropfen aus dem Logo */
/*
 * Der Tropfen fuellt den ganzen Platz zwischen Logo und Text (so wird er nie
 * von der Ueberschrift verdeckt) und laeuft rechts ueber den Rand hinaus:
 * Spitze sichtbar, rechte Rundung angeschnitten.
 */
.tropfen {
  position: relative;
  z-index: -1;
  flex: 1 1 auto;
  min-height: 160px;
  /* nach oben bis auf Logo-Hoehe, nach rechts bis an die Kante der blauen Flaeche */
  margin: calc(-1 * clamp(44px, 3.8vw, 60px)) calc(-1 * clamp(28px, 4vw, 64px)) 28px 0;
  pointer-events: none;
  animation: tropfen-ein 1400ms var(--kurve) both;
}

.tropfen__box {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  aspect-ratio: 1;
  transform: translateX(34%);
}

.tropfen__form { display: block; width: 100%; height: 100%; }
/* Wie das Logo: weisser Tropfen, roter Strich */
.tropfen__form { filter: drop-shadow(0 24px 48px rgba(12, 8, 48, 0.35)); }
.tropfen__schale { fill: #fff; }
.tropfen__strich { fill: var(--rot); }

.tropfen__glanz {
  position: absolute;
  inset: 0;
  -webkit-mask: url("tropfen.svg") center / contain no-repeat;
  mask: url("tropfen.svg") center / contain no-repeat;
  background: linear-gradient(
    110deg,
    transparent 42%,
    rgba(49, 39, 131, 0.14) 46.5%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(49, 39, 131, 0.14) 53.5%,
    transparent 58%
  );
  background-size: 300% 100%;
  background-position: 120% 0;
  opacity: 0;
}

.tropfen__glanz.laeuft { animation: glanz 1600ms cubic-bezier(0.45, 0, 0.2, 1) both; }

/* ---------------- Rechte Seite ---------------- */

.buehnenrand {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
}

.leiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding: 32px var(--rand) 0;
}

.leiste__ort {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grau);
}

.leiste__abmelden {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 16px 8px 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--tinte);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--tempo), border-color var(--tempo), transform 100ms ease-out;
}

.leiste__abmelden svg { width: 17px; height: 17px; }
.leiste__abmelden:hover { color: var(--rot); border-color: rgba(227, 6, 19, 0.35); }
.leiste__abmelden:active { transform: scale(0.97); }

.inhalt {
  flex: 1;
  width: 100%;
  max-width: 900px;
  padding: clamp(40px, 10vh, 120px) var(--rand) 56px;
}

.ansicht { animation: einblenden 500ms var(--kurve) both; }

.titel {
  margin: 0 0 12px;
  font-family: var(--anzeige);
  font-weight: 800;
  font-size: clamp(38px, 4.2vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.032em;
  color: var(--tinte);
  outline: none;
}

.unterzeile {
  margin: 0 0 40px;
  max-width: 46ch;
  font-size: 17px;
  color: var(--grau);
}

.zurueck {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  margin: 0 0 20px -10px;
  padding: 6px 14px 6px 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--grau);
  text-decoration: none;
  border-radius: 999px;
  transition: background var(--tempo), color var(--tempo);
}

.zurueck svg { width: 18px; height: 18px; transition: transform var(--tempo); }
.zurueck:hover { background: var(--flaeche); color: var(--marke); }
.zurueck:hover svg { transform: translateX(-3px); }

.status {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  padding: 5px 12px 5px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gruen);
  background: var(--gruen-blass);
  border-radius: 999px;
}

.status__punkt {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gruen);
  box-shadow: 0 0 0 3px rgba(29, 122, 67, 0.18);
}

/* ---------------- Auswahl: Kunde oder Mitarbeiter ---------------- */

.wahl { border-top: 1px solid var(--linie); }

.wahl__zeile {
  position: relative;
  display: grid;
  grid-template-columns: 60px 1fr 48px;
  align-items: center;
  gap: 22px;
  min-height: 112px;
  padding: 24px 0;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--linie);
  isolation: isolate;
  animation: steigen 700ms var(--kurve) both;
}

.wahl__zeile + .wahl__zeile { animation-delay: 80ms; }

/* Hover-Flaeche: eine weisse Karte, die unter der Zeile auftaucht */
.wahl__zeile::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1px -18px;
  background: var(--flaeche);
  border-radius: 18px;
  box-shadow: var(--schatten-hoch);
  opacity: 0;
  transform: scale(0.985);
  transition: opacity var(--tempo), transform 320ms var(--kurve);
}

.wahl__zeile:hover::before,
.wahl__zeile:focus-visible::before { opacity: 1; transform: none; }
.wahl__zeile:active::before { transform: scale(0.99); transition-duration: 100ms; }

.wahl__symbol {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  color: var(--marke);
  background: var(--marke-blass);
  transition: background var(--tempo), color var(--tempo), transform 320ms var(--kurve);
}

.wahl__symbol svg { width: 28px; height: 28px; }
.wahl__symbol--kunde { color: var(--rot); background: var(--rot-blass); }

.wahl__zeile:hover .wahl__symbol { color: #fff; background: var(--marke); transform: rotate(-5deg); }
.wahl__zeile:hover .wahl__symbol--kunde { background: var(--rot); }

.wahl__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.wahl__name {
  font-family: var(--anzeige);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.wahl__info { font-size: 15px; color: var(--grau); }

.wahl__pfeil {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--linie-stark);
  color: var(--tinte);
  transition: background var(--tempo), color var(--tempo), border-color var(--tempo), transform 320ms var(--kurve);
}

.wahl__zeile:hover .wahl__pfeil {
  color: #fff;
  background: var(--marke);
  border-color: var(--marke);
  transform: translateX(4px);
}

/* Hinweis auf die oeffentlichen Seiten zu den Apps, unter der Auswahl */
.vorschau {
  margin: 28px 0 0;
  font-size: 14.5px;
  color: var(--grau);
}

.vorschau a {
  color: var(--grau);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--linie-stark);
}

.vorschau a:hover { color: var(--marke); text-decoration-color: currentColor; }

/* ---------------- App-Kacheln ---------------- */

.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.kachel {
  --i: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 220px;
  padding: 24px 24px 20px;
  color: inherit;
  text-decoration: none;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 18px;
  box-shadow: var(--schatten);
  transition: transform 320ms var(--kurve), box-shadow var(--tempo), border-color var(--tempo);
  animation: steigen 650ms var(--kurve) both;
  animation-delay: calc(var(--i) * 70ms);
}

a.kachel:hover {
  transform: translateY(-3px);
  border-color: rgba(49, 39, 131, 0.3);
  box-shadow: var(--schatten-hoch);
}

a.kachel:active { transform: translateY(-1px) scale(0.99); transition-duration: 100ms; }

.kachel__symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  margin-bottom: 18px;
  border-radius: 14px;
  color: var(--marke);
  background: var(--marke-blass);
  transition: transform 320ms var(--kurve);
}

.kachel__symbol svg { width: 25px; height: 25px; }
a.kachel:hover .kachel__symbol { transform: rotate(-5deg) scale(1.05); }

.kachel__symbol--datenblatt { color: var(--rot); background: var(--rot-blass); }
.kachel__symbol--plan { color: var(--gruen); background: var(--gruen-blass); }
.kachel__symbol--einstellungen { color: #fff; background: var(--tinte); }
.kachel__symbol--app { color: var(--grau); background: #efeff4; }

.zugang {
  align-self: flex-start;
  margin: -4px 0 10px;
  padding: 2px 9px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--marke);
  background: var(--marke-blass);
  border-radius: 999px;
}

.kachel__name {
  margin: 0 0 6px;
  font-family: var(--anzeige);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.kachel__text {
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--grau);
}

.kachel__fuss {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--linie);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--marke);
}

.kachel__fuss svg { width: 18px; height: 18px; transition: transform 320ms var(--kurve); }
a.kachel:hover .kachel__fuss svg { transform: translateX(5px); }

.kachel--bald {
  background: transparent;
  border-style: dashed;
  border-color: var(--linie-stark);
  box-shadow: none;
}

.kachel--bald .kachel__symbol { filter: grayscale(1); opacity: 0.5; }
.kachel--bald .kachel__name { color: var(--grau); }
.kachel--bald .kachel__fuss { color: var(--grau); font-weight: 500; }

.abzeichen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: #6b4d00;
  background: var(--gelb-blass);
  border: 1px solid rgba(226, 180, 0, 0.4);
  border-radius: 999px;
}

.leer {
  grid-column: 1 / -1;
  margin: 0;
  padding: 40px 24px;
  text-align: center;
  color: var(--grau);
  border: 1px dashed var(--linie-stark);
  border-radius: 18px;
}

/* ---------------- Kunden-Anmeldung ---------------- */

.kundenzugang { max-width: 560px; margin-bottom: 48px; }
.kundenzugang .unterzeile { margin-bottom: 24px; }

.kundenformular {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0 14px;
  padding: 24px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 18px;
  box-shadow: var(--schatten);
}

.kundenformular .feld { margin-bottom: 0; }
.kundenformular .knopf { grid-column: 1 / -1; margin-top: 18px; }
.kundenformular.ohne-plz { grid-template-columns: 1fr; }
.kundenzugang.wackeln { animation: wackeln 380ms ease-in-out; }

.kundenstatus {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 8px 0 40px;
}

.kundenstatus .status { margin: 0; }

.textknopf {
  min-height: 36px;
  padding: 4px 2px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--grau);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.textknopf:hover { color: var(--rot); }

.zwischentitel {
  margin: 0 0 16px;
  font-family: var(--anzeige);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.015em;
}

/* ---------------- Anmeldung ---------------- */

.anmeldung { max-width: 420px; }
.anmeldung.wackeln { animation: wackeln 380ms ease-in-out; }

.formular { margin: 0; }

.feld { display: block; margin-bottom: 18px; }
label.feld[for] { margin-bottom: 0; }

.feld__name {
  display: block;
  margin-bottom: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tinte);
}

input[type="email"],
input[type="text"],
input[type="password"] {
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  font: inherit;
  font-size: 16px;
  color: var(--tinte);
  background: var(--flaeche);
  border: 1.5px solid var(--linie-stark);
  border-radius: 12px;
  transition: border-color var(--tempo), box-shadow var(--tempo);
}

input:hover { border-color: #a9a8bd; }

input:focus {
  outline: none;
  border-color: var(--marke-hell);
  box-shadow: 0 0 0 4px rgba(74, 63, 168, 0.16);
}

input:disabled { background: #f0f0f4; cursor: not-allowed; }

.passwortfeld { position: relative; }
.passwortfeld input { padding-right: 56px; }

.passwortfeld__auge {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
  color: var(--grau);
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}

.passwortfeld__auge:hover { color: var(--marke); background: var(--marke-blass); }

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  margin-top: 24px;
  padding: 14px 24px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: var(--marke);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: background var(--tempo), transform 100ms ease-out;
}

.knopf:hover { background: var(--marke-hell); }
.knopf:active { transform: scale(0.98); }
.knopf:disabled { cursor: progress; opacity: 0.85; }
.knopf--schmal { width: auto; }

.knopf__kreis {
  display: none;
  width: 17px;
  height: 17px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: drehen 700ms linear infinite;
}

.knopf.laedt .knopf__kreis { display: inline-block; }

/* ---------------- Meldungen ---------------- */

.kasten {
  margin: 0 0 20px;
  padding: 12px 15px;
  font-size: 14.5px;
  border-radius: 12px;
  border: 1px solid;
}

.kasten--fehler { background: var(--rot-blass); border-color: rgba(227, 6, 19, 0.3); color: #8d040d; }
.kasten--hinweis { background: var(--gelb-blass); border-color: rgba(226, 180, 0, 0.45); color: #6b4d00; }

/* ---------------- Fusszeile ---------------- */

.fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  margin: 0 var(--rand);
  padding: 22px 0 28px;
  font-size: 13.5px;
  color: var(--grau);
  border-top: 1px solid var(--linie);
}

.fuss__links { display: flex; gap: 22px; }

.fuss__links a {
  display: inline-block;
  padding: 6px 0;
  color: var(--grau);
  text-decoration: none;
  transition: color var(--tempo);
}

.fuss__links a:hover { color: var(--marke); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------- Bewegung ---------------- */

@keyframes einblenden {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes steigen {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@keyframes tropfen-ein {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

@keyframes glanz {
  0% { opacity: 1; background-position: 120% 0; }
  100% { opacity: 1; background-position: -20% 0; }
}

@keyframes wackeln {
  0%, 100% { transform: none; }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}

@keyframes drehen { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
  .tropfen__glanz { display: none; }
}

/* ---------------- Tablet und Handy ---------------- */

@media (max-width: 960px) {
  .rahmen { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }

  .buehne {
    position: relative;
    height: auto;
    min-height: 0;
    padding: 22px var(--rand) 34px;
  }

  .buehne__logo img { height: 38px; }
  /* Platz fuer den Tropfen oben rechts, damit er nie hinter der Ueberschrift liegt */
  .buehne__text { margin-top: 64px; }
  .buehne__titel { font-size: clamp(36px, 9vw, 56px); }
  .buehne__slogan { font-size: 15px; margin-top: 14px; }

  .buehnenrand { min-height: 0; }

  /* Handy: gross am rechten Rand, die Ueberschrift bricht dafuer in drei kurze Zeilen */
  .tropfen {
    position: absolute;
    inset: 0;
    margin: 0;
    min-height: 0;
  }
  .tropfen__box { top: 10px; height: min(84vw, 340px); transform: translateX(38%); }
  .tropfen__form { filter: drop-shadow(0 12px 24px rgba(12, 8, 48, 0.35)); }
  .buehne__titel { max-width: 6.2em; }
  .buehne__slogan { max-width: 14em; }

  /* In den Unteransichten nur die schmale Kopfzeile, damit der Inhalt oben bleibt */
  body:not([data-ansicht="start"]) .buehne { padding-bottom: 22px; }
  body:not([data-ansicht="start"]) .buehne__text { display: none; }
  body:not([data-ansicht="start"]) .tropfen { display: none; }

  .leiste { padding-top: 20px; }
  .inhalt { padding-top: 28px; }
}

@media (max-width: 560px) {
  .titel { font-size: clamp(32px, 9vw, 40px); }
  .unterzeile { font-size: 16px; margin-bottom: 28px; }

  .wahl__zeile {
    grid-template-columns: 50px 1fr 40px;
    gap: 16px;
    min-height: 92px;
    padding: 18px 0;
  }

  .wahl__symbol { width: 50px; height: 50px; border-radius: 15px; }
  .wahl__symbol svg { width: 24px; height: 24px; }
  .wahl__pfeil { width: 40px; height: 40px; }

  .kacheln { grid-template-columns: 1fr; gap: 12px; }
  .kundenformular { grid-template-columns: 1fr; gap: 16px; padding: 20px; }
  .kundenformular .knopf { margin-top: 4px; }
  .kachel { min-height: 0; padding: 20px 20px 16px; }

  .fuss { flex-direction: column; align-items: flex-start; }
}