/* ===========================================================================
   Gemeinsame Gestaltungsgrundlage der drei Apps.

   Damit sehen Auslieferung, Zustellungsrechner und Schulung wie die Website
   aus: dieselben Schriften (Petrona fuer Ueberschriften, Manrope fuer den
   Text), dieselben Farben, dieselben Rundungen und Schatten.

   Diese Datei wird VOR der jeweiligen style.css eingebunden; dort werden nur
   noch die eigenen Variablen auf diese Werte gelegt.
   =========================================================================== */

@font-face{font-family:'Petrona';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('/assets/fonts/petrona.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/assets/fonts/manrope.woff2') format('woff2');}

:root{
  /* Logofarben - wie auf der Website */
  --tanne:#159a47;
  --tanne-btn:#0f7f39;       /* Flaechen mit weisser Schrift: 5,1:1 Kontrast */
  --tanne-dk:#0b6c31;
  --tanne-lt:#4fc17a;
  --tanne-hell:#8fe3ab;
  --rot:#d33230;
  --rot-dk:#a81e1b;
  --rinde:#5a3031;
  --gold:#c9a227;
  --gold-dk:#a8871c;

  /* Flaechen */
  --moos:#0e2a1a;
  --moos-2:#15381f;
  --moos-3:#1d4527;
  --creme:#fbf7f0;
  --sand:#f0e7d6;
  --sand-2:#e5d9c2;

  /* Schrift */
  --kt-text:#1b2b20;
  --kt-muted:#59685d;
  --kt-rand:rgba(14,42,26,.12);

  --ff-display:'Petrona',Georgia,'Times New Roman',serif;
  --ff-text:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --r-sm:10px; --r-md:18px; --r-lg:26px;
  --ease:cubic-bezier(.22,.68,.28,1);
  --kt-schatten:0 16px 44px rgba(14,42,26,.09);
  --kt-schatten-klein:0 8px 24px rgba(14,42,26,.06);
}

/* Grundschrift: Manrope im Text, Petrona in den Ueberschriften - genau wie
   auf kummertoni.at. Die Apps setzen darunter nur noch ihre eigenen Groessen. */
body{ font-family:var(--ff-text); -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,.kt-display{
  font-family:var(--ff-display); font-weight:650; letter-spacing:-.01em; line-height:1.18;
}

/* Sichtbarer Fokus - auf dem Verkaufsplatz wird auch mit Handschuhen getippt
   und manchmal mit der Tastatur gearbeitet. */
:focus-visible{ outline:3px solid var(--tanne); outline-offset:2px; border-radius:4px; }

/* Auf dem Handy nie unter 16px in Eingabefeldern: iOS zoomt sonst beim Tippen
   in die Seite hinein und der Rest der Oberflaeche verrutscht. */
input,select,textarea,button{ font-family:inherit; }
@media (max-width:820px){
  input,select,textarea{ font-size:16px; }
}

/* ===========================================================================
   Anmeldeseite - gleiche Gestaltung wie die Website-Verwaltung unter /admin.

   Links die dunkle Markenspalte (Girlande oben, Baumreihe unten, Logo,
   Stichpunkte), rechts das Formular. Auf dem Handy rutscht die Markenspalte
   nach oben und wird zu einem schmalen Kopfband.

   Die Apps benutzen dieselben Klassen; nur Kicker, Titel und Stichpunkte
   unterscheiden sich.
   =========================================================================== */
.kt-login{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  min-height:100vh; min-height:100dvh; background:var(--creme);
}
.kt-login__marke{
  position:relative; overflow:hidden; color:#fff; display:flex; align-items:center;
  padding:clamp(2.4rem,5vw,4rem) clamp(1.6rem,4vw,3.4rem);
  background:linear-gradient(155deg,var(--moos) 0%,var(--moos-2) 55%,var(--moos-3) 100%);
}
.kt-login__girlande{
  position:absolute; left:0; right:0; top:0; height:96px; z-index:1; pointer-events:none;
  background:url('/assets/img/girlande-schmal.svg') repeat-x top center; background-size:auto 96px;
  filter:saturate(.7) brightness(.82); opacity:.75;
}
.kt-login__baumreihe{
  position:absolute; left:0; right:0; bottom:0; height:70px; z-index:1; pointer-events:none;
  background:url('/assets/img/baumreihe.svg') repeat-x bottom center; background-size:auto 70px;
  opacity:.5;
}
.kt-login__inhalt{position:relative; z-index:2; max-width:34rem; margin-inline:auto; padding-block:2.4rem}
.kt-login__logo{
  display:block;                            /* sonst steht der Kicker in derselben
                                               Zeile rechts neben dem Logo */
  width:84px; height:auto; margin-bottom:1.6rem; background:#fff;
  border-radius:16px; padding:8px;
}
.kt-login__kicker{
  display:inline-flex; align-items:center; gap:.55rem; margin:0 0 .7rem;
  font-size:.72rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
  color:var(--tanne-hell);
}
.kt-login__kicker::before{
  content:""; width:11px; height:10px; background:currentColor;
  clip-path:polygon(50% 0,100% 100%,0 100%);
}
.kt-login__marke h1{
  font-family:var(--ff-display);
  font-size:clamp(2.1rem,4vw,3rem); font-weight:600; color:#fff; margin:0 0 .6rem;
  letter-spacing:-.022em; line-height:1.14;
}
.kt-login__sub{
  margin:0 0 2rem; color:rgba(255,255,255,.78); font-size:1.02rem; line-height:1.7; max-width:44ch;
}
.kt-login__punkte{list-style:none; margin:0; padding:0; display:grid; gap:.7rem}
.kt-login__punkte li{
  display:grid; grid-template-columns:42px 1fr; align-items:center;
  gap:.15rem .95rem; padding:.75rem .95rem;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-sm);
}
.kt-login__punkte span{
  grid-row:1 / 3; width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:rgba(79,193,122,.18); color:var(--tanne-hell);
}
.kt-login__punkte span svg{width:19px; height:19px}
.kt-login__punkte b{font-size:.98rem; font-weight:700; line-height:1.3; color:#fff}
.kt-login__punkte small{font-size:.84rem; color:rgba(255,255,255,.62); line-height:1.45}

.kt-login__form{
  display:grid; place-items:center;
  padding:clamp(2rem,5vw,3rem) clamp(1.2rem,4vw,2.6rem); background:var(--creme);
}
.kt-login__box{width:min(100%,26rem)}
.kt-login__ic{
  display:grid; place-items:center; width:52px; height:52px; border-radius:16px; margin-bottom:1.1rem;
  background:rgba(21,154,71,.14); color:var(--tanne-dk);
}
.kt-login__ic svg{width:24px; height:24px}
.kt-login__box h1,.kt-login__box h2{
  font-family:var(--ff-display); font-size:1.75rem; font-weight:650;
  color:var(--kt-text); margin:0 0 .5rem; letter-spacing:-.015em;
}
.kt-login__hilfe{
  font-size:.92rem; line-height:1.6; color:var(--kt-muted); margin:.55rem 0 1.3rem;
}
.kt-login__feld{display:block; margin:0 0 1rem}
.kt-login__feld label{
  display:block; font-size:.82rem; font-weight:700; letter-spacing:.04em;
  text-transform:none;                      /* die Schulung setzt Labels sonst in Versalien */
  color:var(--kt-text); margin:0 0 .35rem;
}
.kt-login__feld input{
  display:block; width:100%; box-sizing:border-box; padding:.8rem .95rem;
  font-size:1rem; font-family:inherit; color:var(--kt-text);
  background:#fff; border:1px solid var(--kt-rand); border-radius:var(--r-sm);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.kt-login__feld input:focus{
  outline:none; border-color:var(--tanne); box-shadow:0 0 0 3px rgba(21,154,71,.16);
}
.kt-login__feld input.kt-login__code{
  font-size:1.5rem; font-weight:700; letter-spacing:.42em; text-align:center; padding-inline:.5rem;
}
.kt-login__btn{
  display:block; width:100%; box-sizing:border-box; margin:.2rem 0 0;
  padding:.85rem 1.1rem; font-size:1rem; font-weight:700; font-family:inherit;
  color:#fff; background:var(--tanne-btn); border:1px solid var(--tanne-dk);
  border-radius:var(--r-sm); cursor:pointer;
  transition:background-color .15s ease, transform .08s ease;
}
.kt-login__btn:hover{background:var(--tanne-dk)}
.kt-login__btn:active{transform:translateY(1px)}
.kt-login__btn--leise{
  margin-top:.6rem; background:transparent; color:var(--tanne-dk);
  border-color:transparent; font-weight:600; text-decoration:underline;
}
.kt-login__btn--leise:hover{background:rgba(21,154,71,.08); color:var(--tanne-dk)}
.kt-login__ziel{
  display:flex; align-items:center; gap:.55rem; margin:0 0 1.1rem; padding:.7rem .9rem;
  background:rgba(21,154,71,.09); border:1px solid rgba(21,154,71,.24); border-radius:var(--r-sm);
  font-size:.88rem; color:#0a5227;
}
.kt-login__ziel svg{width:16px; height:16px; flex:none}
.kt-login__fehler{
  margin:1rem 0 0; padding:.7rem .9rem; border-radius:var(--r-sm);
  background:rgba(211,50,48,.08); border:1px solid rgba(211,50,48,.3);
  color:var(--rot-dk); font-size:.9rem; line-height:1.5;
}
.kt-login__fuss{margin:1.2rem 0 0; font-size:.85rem; line-height:1.6; color:var(--kt-muted)}
.kt-login__fuss a{color:var(--tanne-dk)}

/* --- Handy und kleines Tablet ------------------------------------------- */
/* Das Wichtigste ist das Eingabefeld. Darum wird die Markenspalte zu einem
   schmalen Kopfband: Logo links, Kicker und Titel rechts daneben, die
   Stichpunkte entfallen. So beginnt das Formular weit oben im Bild. */
@media (max-width:860px){
  .kt-login{grid-template-columns:1fr; min-height:0}
  .kt-login__marke{padding:1.15rem 1.1rem 1.5rem}
  .kt-login__girlande{height:44px; background-size:auto 44px; opacity:.6}
  .kt-login__baumreihe{height:34px; background-size:auto 34px; opacity:.42}
  .kt-login__inhalt{
    padding-block:1.5rem 0; max-width:34rem;
    width:100%;                             /* sonst schrumpft der Block im Flex-
                                               Container und rutscht in die Mitte */
    display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center;
    column-gap:.9rem; row-gap:.1rem;
  }
  .kt-login__logo{grid-row:1 / 3; width:52px; margin:0; border-radius:13px; padding:6px}
  .kt-login__kicker{grid-column:2; margin:0 0 .15rem; font-size:.66rem; letter-spacing:.18em}
  .kt-login__marke h1{grid-column:2; font-size:1.55rem; margin:0}
  .kt-login__sub{grid-column:1 / -1; margin:.75rem 0 0; font-size:.92rem; line-height:1.55}
  .kt-login__punkte{display:none}
  .kt-login__form{padding:1.5rem 1.1rem 2.4rem}
  .kt-login__box{width:100%}
  .kt-login__ic{width:44px; height:44px; border-radius:13px; margin-bottom:.8rem}
  .kt-login__ic svg{width:21px; height:21px}
  .kt-login__box h1,.kt-login__box h2{font-size:1.5rem}
  .kt-login__hilfe{margin:.4rem 0 1.1rem}
  /* Grosse Tippflaechen: am Verkaufsplatz wird mit kalten Fingern getippt. */
  .kt-login__feld input{min-height:52px; padding:.85rem 1rem}
  .kt-login__btn{min-height:52px; font-size:1.02rem}
  .kt-login__btn--leise{min-height:44px}
}
/* --- sehr schmale Geraete ------------------------------------------------ */
@media (max-width:380px){
  .kt-login__sub{display:none}             /* Platz fuer das Formular */
  .kt-login__marke h1{font-size:1.4rem}
}