/* Handy-App: Installieren-Knoepfe, Anleitung, Benachrichtigung, Meine Bestellungen.
   Nur im Web-Modus und auf der Beleg-Seite geladen. Eigene Farbwerte, damit die
   Datei auch ohne kiosk.css (Beleg-Seite) funktioniert. */

.app-knopf {
  display: flex; align-items: center; gap: .9rem; width: 100%;
  margin: 1rem 0 0; padding: .9rem 1.1rem; border: 0; border-radius: 18px;
  background: #1F3A2E; color: #fff; text-align: left; cursor: pointer;
  font: inherit; box-shadow: 0 6px 18px rgba(31, 58, 46, .22);
}
.app-knopf[hidden] { display: none; }
.app-knopf .app-knopf-icon {
  flex: none; width: 3.2rem; height: 3.2rem; border-radius: 12px; background: #fff;
  display: grid; place-items: center; overflow: hidden;
}
.app-knopf .app-knopf-icon img { width: 100%; height: 100%; display: block; }
.app-knopf strong { display: block; font-size: 1.08rem; font-weight: 800; }
.app-knopf small { display: block; opacity: .85; font-size: .82rem; }
.app-knopf .app-knopf-pfeil { margin-left: auto; font-size: 1.3rem; color: #F3A57E; }
.app-knopf:active { transform: scale(.98); }

.menu-kachel[hidden] { display: none !important; }
.kachel-app .kachel-icon { background: #fff !important; padding: 0; overflow: hidden; }
.kachel-app .kachel-icon img { width: 100%; height: 100%; }

/* ── Anleitung als Blatt von unten ─────────────────────── */
.app-huelle {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(20, 32, 26, .55);
  display: flex; align-items: flex-end; justify-content: center;
  animation: app-einblenden .2s ease-out;
}
.app-huelle[hidden] { display: none; }
.app-blatt {
  width: 100%; max-width: 32rem; max-height: 92vh; overflow-y: auto;
  background: #FBF8F1; color: #24322B; border-radius: 24px 24px 0 0;
  padding: 1.3rem 1.2rem calc(1.4rem + env(safe-area-inset-bottom));
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  animation: app-hoch .28s cubic-bezier(.22, .9, .3, 1);
}
.app-blatt h2 { margin: .1rem 0 .3rem; font-size: 1.45rem; color: #1F3A2E; line-height: 1.2; }
.app-blatt .app-unter { margin: 0 0 1rem; color: #6A7A70; font-size: .95rem; }
.app-schritte { list-style: none; margin: 0 0 1rem; padding: 0; counter-reset: schritt; }
.app-schritte li {
  counter-increment: schritt; position: relative;
  padding: .85rem .9rem .85rem 3.4rem; margin-bottom: .55rem;
  background: #fff; border: 2px solid #EDE3D0; border-radius: 16px;
  font-size: 1.02rem; line-height: 1.4;
}
.app-schritte li::before {
  content: counter(schritt); position: absolute; left: .8rem; top: 50%; transform: translateY(-50%);
  width: 2rem; height: 2rem; border-radius: 50%; background: #4A7C3F; color: #fff;
  display: grid; place-items: center; font-weight: 800;
}
.app-schritte small { display: block; color: #6A7A70; font-size: .84rem; margin-top: .15rem; }
.app-symbol {
  display: inline-grid; place-items: center; vertical-align: -.35em;
  width: 1.75em; height: 1.75em; margin: 0 .15em; border-radius: 8px;
  background: #E4EDDE; color: #1F3A2E;
}
.app-symbol svg { width: 1.1em; height: 1.1em; }
.app-warnung {
  margin: 0 0 1rem; padding: .85rem 1rem; border-radius: 16px;
  background: #FFF4D6; border: 2px solid #E9C46A; color: #3D3321; font-size: .95rem; line-height: 1.45;
}
.app-bild { display: block; width: 9.5rem; height: auto; margin: 0 auto .8rem; }
.app-blatt .app-qr { display: block; width: 11rem; height: 11rem; margin: .5rem auto 1rem; }
.app-blatt-knoepfe { display: flex; flex-direction: column; gap: .55rem; }
.app-blatt-knoepfe button, .app-blatt-knoepfe a {
  width: 100%; padding: .95rem 1rem; border-radius: 999px; border: 0; cursor: pointer;
  font: inherit; font-weight: 800; font-size: 1.02rem; text-align: center; text-decoration: none;
}
.app-haupt { background: #E5672A; color: #fff; }
.app-neben { background: #EDE3D0; color: #1F3A2E; }

/* Pfeil, der auf die Browserleiste zeigt */
.app-pfeil {
  position: fixed; z-index: 91; left: 50%; font-size: 2.4rem; line-height: 1;
  color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .45); pointer-events: none;
  animation: app-wippen 1s ease-in-out infinite;
}
.app-pfeil.unten { bottom: calc(.3rem + env(safe-area-inset-bottom)); }
.app-pfeil.oben { top: .3rem; left: auto; right: 1rem; }
.app-pfeil[hidden] { display: none; }

.app-meldung {
  position: fixed; left: 50%; bottom: calc(1.2rem + env(safe-area-inset-bottom)); z-index: 95;
  transform: translateX(-50%); width: calc(100% - 2rem); max-width: 28rem;
  padding: .9rem 1.1rem; border-radius: 16px; background: #1F3A2E; color: #fff;
  font-weight: 700; text-align: center; box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  animation: app-hoch .25s ease-out;
}

/* ── Benachrichtigung auf der Fertig-Seite ─────────────── */
.push-block {
  margin: 1rem 0; padding: 1rem 1.1rem; border-radius: 18px;
  background: #FBE6DA; border: 2px solid #F3C3A8; text-align: left;
}
.push-block[hidden] { display: none; }
.push-block strong { display: block; color: #1F3A2E; font-size: 1.05rem; }
.push-block p { margin: .25rem 0 .7rem; color: #24322B; font-size: .93rem; }
.push-block button {
  width: 100%; padding: .9rem 1rem; border: 0; border-radius: 999px; cursor: pointer;
  background: #E5672A; color: #fff; font: inherit; font-weight: 800; font-size: 1.02rem;
}
.push-block button[hidden] { display: none; }
.push-block.an { background: #E4EDDE; border-color: #B9D0AE; }

/* ── Meine Bestellungen ────────────────────────────────── */
.meine-liste { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .8rem; }
.meine-liste li {
  background: #FBF8F1; border: 2px solid #D9C7A7; border-radius: 18px; padding: .9rem 1rem;
}
.meine-kopf { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; }
.meine-kopf strong { font-size: 1.25rem; color: #1F3A2E; }
.meine-kopf span { color: #6A7A70; font-size: .85rem; }
.meine-wann { margin: .2rem 0 .4rem; font-weight: 700; color: #4A7C3F; }
.meine-was { margin: 0 0 .6rem; color: #24322B; font-size: .92rem; }
.meine-status { margin: 0 0 .5rem; padding: .55rem .8rem; border-radius: 12px; font-size: .95rem; }
.meine-status[hidden] { display: none; }
.meine-status.bereit { background: #E4EDDE; color: #1F3A2E; }
.meine-status.wartet { background: #EDE3D0; color: #6A7A70; }
.meine-ort { display: block; margin-top: .2rem; font-size: 1.15rem; font-weight: 800; }
.meine-knoepfe { display: flex; gap: .5rem; flex-wrap: wrap; }
.meine-knoepfe a, .meine-knoepfe button {
  flex: 1 1 9rem; padding: .7rem .9rem; border-radius: 999px; border: 0; cursor: pointer;
  font: inherit; font-weight: 800; text-align: center; text-decoration: none;
}
.meine-knoepfe a { background: #EDE3D0; color: #1F3A2E; }
.meine-knoepfe button { background: #4A7C3F; color: #fff; }

/* In der installierten App gibt es keine Browserleiste - unten wuerde sonst der
   Balken des iPhones auf den Knoepfen liegen. */
@media (display-mode: standalone), (display-mode: fullscreen) {
  .rahmen { padding-bottom: env(safe-area-inset-bottom); }
  .kontakt-knoepfe { bottom: calc(5.2rem + env(safe-area-inset-bottom)); }
}

/* Schmale Handys (360 px): Kopfzeile passte nicht - "Neu starten" war rechts
   abgeschnitten (gefunden bei den Play-Store-Fotos, 17.09.2026) */
@media (max-width: 420px) {
  .kopf { gap: .4rem; padding: .6rem .75rem; }
  .kopf-btn { padding: .5rem .75rem; font-size: .8rem; white-space: nowrap; gap: .3rem; }
  .marke { gap: .4rem; min-width: 0; }
  .marke-zeichen { width: 2rem; height: 2rem; }
  .marke-name { font-size: 1.02rem; }
}

/* Mit unserem Logo rechts (21.09.2026) wird es bis etwa 600 px eng: das kleine
   Ladenhelfer-Zeichen weicht, "Neu starten" schrumpft zum ✕ (aria-label sagt es
   weiter an). "← Zurück" bleibt als Wort - das brauchen die Leute. */
@media (max-width: 600px) {
  .marke-zeichen { display: none; }
  .marke-ort { display: none; }
  .beenden-text { display: none; }
  .kopf-rechts { gap: .4rem; }
  .kopf-logo { height: 2.4rem; }
}
/* Tablets und Handys quer: "Neu starten" als ✕ reicht, der Platz gehoert dem Namen */
@media (max-width: 1000px) {
  .beenden-text { display: none; }
}

/* Handy: der Hauptknopf ("Weiter →", "Bestellung abschicken") steht immer OBEN und
   breit, der Zurueck-Knopf darunter und kleiner - wer es eilig hat, tippt einfach
   oben drauf (Stefan, 17.09.2026). Dialoge bleiben nebeneinander. */
@media (max-width: 640px) {
  .screen .knopfreihe:not(.senkrecht) {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: .55rem;
  }
  .screen .knopfreihe:not(.senkrecht) .cta:not(.zweit) { width: 100%; min-height: 3.6rem; }
  .screen .knopfreihe:not(.senkrecht) .cta.zweit {
    align-self: center;
    min-height: 2.7rem;
    padding: 0 1.2rem;
    font-size: .88rem;
    border-width: 1.5px;
  }
}

/* Zweiter Knopf unter "Bestellen": "So geht's" fuehrt ins Menue (Stefan, 18.09.2026) */
.start-direkt {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: .7rem;
  padding: .7rem 1.2rem; border-radius: 999px; cursor: pointer;
  /* Halbdurchsichtiges Gruen - der Schriftzug war auf dem Ladenfoto schwer zu lesen
     (Stefan, 16.09.2026) */
  background: rgba(74, 124, 63, .5); border: 2px solid #4A7C3F; color: #14261D;
  font: inherit; font-weight: 800; font-size: .96rem;
  backdrop-filter: blur(2px);
}
.start-direkt:active { transform: scale(.98); background: rgba(74, 124, 63, .72); }

.link-knopf {
  border: 0; background: none; padding: 0; margin-left: .3rem; cursor: pointer;
  font: inherit; color: #4A7C3F; font-weight: 700; text-decoration: underline;
}

@keyframes app-einblenden { from { opacity: 0; } to { opacity: 1; } }
@keyframes app-hoch { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes app-wippen { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 10px); } }
.app-pfeil.oben { animation-name: app-wippen-oben; }
@keyframes app-wippen-oben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Oeffnungsstatus auf der Startseite (nur Web, 18.09.2026): Punkt gruen = offen */
.offen-status {
  display: inline-flex; align-items: center; gap: .55rem; margin: -.3rem 0 0;
  padding: .45rem .95rem; border-radius: 999px;
  background: rgba(251, 248, 241, .88); border: 1.5px solid #D9C7A7;
  font-weight: 800; font-size: .92rem; color: #1F3A2E; backdrop-filter: blur(2px);
}
.offen-status::before {
  content: ""; width: .7rem; height: .7rem; border-radius: 50%;
  background: #B94E1D; box-shadow: 0 0 0 3px rgba(185, 78, 29, .18);
}
.offen-status.offen::before { background: #4A7C3F; box-shadow: 0 0 0 3px rgba(74, 124, 63, .22); }

/* Feedback-Formular (nur Web, 18.09.2026) */
.feedback-form { display: flex; flex-direction: column; gap: .9rem; margin-top: .4rem; }
.feedback-feld { display: flex; flex-direction: column; gap: .35rem; font-weight: 700; color: #1F3A2E; }
.feedback-feld small { font-weight: 500; color: #6A7A70; }
.feedback-feld textarea, .feedback-feld input {
  width: 100%; font: inherit; font-size: 1rem; padding: .85rem 1rem;
  border: 2px solid #D9C7A7; border-radius: 16px; background: #FBF8F1; color: #24322B;
}
.feedback-feld textarea { resize: vertical; min-height: 7rem; }
.feedback-feld textarea:focus, .feedback-feld input:focus { outline: none; border-color: #4A7C3F; }
.feedback-versteckt { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.feedback-fehler { margin: 0; padding: .7rem 1rem; border-radius: 12px; background: #FBE7DC; color: #B94E1D; font-weight: 700; }
.feedback-danke { margin-top: 1rem; }