/* =========================================================
   MACH-HANDWERK · Kiosk-Ansicht
   Ausgelegt auf stehende Bildschirme (1080 × 1920), lesbar aus 2–3 Metern.
   Alle Maße in vh/vw, damit jede Bildschirmgröße passt.
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body.kiosk{
  margin:0;overflow:hidden;
  font-family:"Inter",system-ui,-apple-system,Arial,sans-serif;
  background:#0f151b;color:#fff;
  display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;
  cursor:none;
}
img,svg{display:block;max-width:100%}
.ico{width:1em;height:1em;flex:none}

/* Kopf */
.k-kopf{
  display:flex;align-items:center;gap:2vh;
  padding:2.4vh 3vh;border-bottom:1px solid rgba(255,255,255,.1);
}
.k-logo{height:4.4vh;width:auto}
.k-ort{
  margin-left:auto;font-weight:600;font-size:1.9vh;color:rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:.7vh 1.4vh;
}
.k-uhr{font-family:"Archivo",sans-serif;font-weight:700;font-size:2.4vh;color:rgba(255,255,255,.5);margin-left:1.5vh}

/* Bühne */
.k-buehne{flex:1;position:relative;overflow:hidden}
.k-folie{
  position:absolute;inset:0;padding:3.4vh 3vh;
  display:grid;grid-template-rows:auto 1fr auto;gap:2.4vh;
  opacity:0;transform:translateY(2vh);pointer-events:none;
  transition:opacity .55s ease, transform .55s ease;
}
.k-folie.is-aktiv{opacity:1;transform:none}
.k-folie-mitte,.k-folie-marke{display:flex;align-items:center;justify-content:center;text-align:center}

/* Überschriften */
.k-h1{
  font-family:"Archivo",sans-serif;font-weight:800;text-transform:uppercase;
  font-size:min(5.2vh, 7.4vw);line-height:1.02;letter-spacing:-.03em;margin:0;
  overflow-wrap:anywhere;
}
.k-h1 em{display:block;font-style:normal;color:#fd7400}
.k-lead{font-size:min(2.4vh, 3.6vw);line-height:1.5;color:rgba(255,255,255,.72);max-width:34ch;margin:1.5vh auto 3vh}

/* Angebotsliste */
.k-liste{display:flex;flex-direction:column;gap:1.4vh;min-height:0;overflow:hidden}
/* Hochformat zeigt drei Angebote – das vierte hätte nur halb Platz. */
.k-liste > :nth-child(4){display:none}
.k-eintrag{
  display:flex;align-items:center;gap:2.2vh;
  padding:1.9vh 2.2vh;border-radius:1.5vh;
  background:#18212b;border:1px solid rgba(255,255,255,.07);
}
.k-eintrag.ist-partner{border-color:rgba(253,116,0,.55);background:linear-gradient(100deg,#1d2029,#18212b)}
.k-icon{
  width:6.2vh;height:6.2vh;flex:none;border-radius:1.3vh;
  background:#fd7400;color:#fff;display:grid;place-items:center;
}
.k-icon .ico{width:3.1vh;height:3.1vh;stroke-width:2}
.k-text{min-width:0;flex:1}
.k-text b{display:block;font-family:"Archivo",sans-serif;font-size:min(2.5vh, 3.9vw);line-height:1.15;font-weight:700}
.k-betrieb{display:block;font-size:min(2.1vh, 3.1vw);color:rgba(255,255,255,.7);margin-top:.5vh}
.k-ort-zeile{display:flex;align-items:center;gap:.7vh;font-size:1.8vh;color:rgba(255,255,255,.5);margin-top:.6vh}
.k-ort-zeile .ico{width:1.8vh;height:1.8vh}
.k-partner{
  display:flex;align-items:center;gap:.7vh;flex:none;
  padding:.9vh 1.6vh;border-radius:999px;background:#fd7400;color:#fff;
  font-size:1.6vh;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
}
.k-partner .ico{width:1.8vh;height:1.8vh}

/* Betriebe */
.k-betriebe{display:grid;grid-template-columns:repeat(auto-fit,minmax(30vh,1fr));gap:1.8vh;align-content:start;min-height:0;overflow:hidden}
.k-betrieb-karte{
  display:flex;align-items:center;gap:1.8vh;padding:2.2vh;
  border-radius:1.4vh;background:#18212b;border:1px solid rgba(253,116,0,.35);
}
.k-logo-feld{
  width:7vh;height:7vh;flex:none;border-radius:1.2vh;background:#fff;overflow:hidden;
  display:grid;place-items:center;color:#0f151b;font-family:"Archivo",sans-serif;font-weight:700;font-size:2.2vh;
}
.k-logo-feld img{width:100%;height:100%;object-fit:cover}
.k-betrieb-karte > div{min-width:0}
.k-betrieb-karte > div b{display:block;font-size:min(2.3vh,3.4vw);line-height:1.2}
.k-betrieb-karte > div span{display:block;font-size:min(1.8vh,2.8vw);color:rgba(255,255,255,.6);margin-top:.4vh}

/* Fußbereich mit QR */
.k-fuss{
  display:flex;align-items:center;gap:2.2vh;
  padding:2.2vh;border-radius:1.6vh;background:#fff;color:#0f151b;
}
.k-qr{flex:none;width:16.5vh;height:16.5vh}
.k-qr svg{width:100%;height:100%}
.k-qr-gross{width:34vh;height:34vh;margin:0 auto 3vh;background:#fff;padding:2vh;border-radius:2vh}
.k-qr-gross svg{width:100%;height:100%}
.k-cta{display:block;font-family:"Archivo",sans-serif;font-size:min(2.8vh, 4vw);font-weight:800;line-height:1.15}
.k-folie-mitte .k-cta{color:#fff}
.k-url{display:block;font-size:2.1vh;font-weight:700;color:#fd7400;margin-top:.6vh}
.k-url.gross{font-size:3.4vh;margin-top:3vh}
.k-hint{display:block;font-size:1.9vh;color:#5c666f;margin-top:.8vh;line-height:1.4}

/* Markenfolie */
.k-claim{width:min(74vw, 80vh);margin:0 auto 5vh}
.k-zahlen{display:flex;gap:5vh;justify-content:center;margin-bottom:2vh}
.k-zahlen b{display:block;font-family:"Archivo",sans-serif;font-size:min(6vh, 9vw);font-weight:800;color:#fd7400;line-height:1}
.k-zahlen span{display:block;font-size:1.9vh;color:rgba(255,255,255,.6);margin-top:.8vh}

/* Fortschrittsbalken */
.k-balken{height:.7vh;background:rgba(255,255,255,.12)}
.k-balken i{display:block;height:100%;width:0;background:#fd7400}

/* Querformat: zwei Spalten, damit auch liegende Bildschirme funktionieren */

/* Folie 5 vertikal zentrieren, QR ergänzen */
.k-folie-marke{flex-direction:column}
.k-folie-marke > div{display:flex;flex-direction:column;align-items:center;gap:2.6vh;text-align:center;max-width:86%}
.k-marke-qr{background:#fff;padding:2vh;border-radius:1.6vh;width:26vh;max-width:52vw}
.k-marke-qr svg{display:block;width:100%;height:auto}
.k-folie-marke .k-hint{max-width:80%;text-align:center}

/* Querformat (Fernseher, 16:9): zwei Spalten, mittig gefasst.
   Die Maße sind so gewählt, dass Kopf, zwei Kartenreihen und der QR-Fuß
   auf 16:9 vollständig sichtbar bleiben. */
@media (min-aspect-ratio: 1/1){
  .k-folie{padding:3vh 5vw;gap:2vh}
  .k-h1{font-size:min(6.4vh, 5vw);text-align:center}
  .k-lead{font-size:min(2.6vh, 2vw);max-width:46ch}
  .k-liste{display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:1.8vh;
           max-width:1180px;width:100%;margin:0 auto}
  .k-betriebe{grid-template-columns:repeat(3,1fr);max-width:1180px;width:100%;margin:0 auto}
  .k-eintrag{padding:2vh 2.4vh;gap:2vh}
  .k-icon{width:6.6vh;height:6.6vh}
  .k-icon .ico{width:3.3vh;height:3.3vh}
  .k-text b{font-size:min(2.9vh, 1.8vw)}
  .k-liste > :nth-child(4){display:flex}
  .k-fuss{justify-self:center;max-width:min(1000px, 82vw);padding:2vh 2.6vh}
  .k-qr{width:18vh;height:18vh}
  .k-marke-qr{width:22vh}
}