/* ===================================================================
   Kiosque-Teaser  (page-kiosque-soon.php)

   Eigenständige Datei neben landing.css.

   Drei Farben mit fester Arbeitsteilung:
     Schwarz #000000  trägt die Fläche
     Orange  #BE5317  trägt die Form (Logo, Laufband)
     Cream   #FAECCE  trägt die Schrift

   Die Buchstaben im Logo sind ausgespart – im orangen Kreis scheint
   also das Schwarz des Hintergrunds durch (4.44:1).
   COMING SOON steht mit 18.0:1 auf dem Grund.
   =================================================================== */

@font-face{font-family:"Barlow";src:url("../fonts/barlow/Barlow-Medium.woff2") format("woff2"),url("../fonts/barlow/Barlow-Medium.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/barlow/Barlow-Bold.woff2") format("woff2"),url("../fonts/barlow/Barlow-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/barlow/Barlow-Black.woff2") format("woff2"),url("../fonts/barlow/Barlow-Black.woff") format("woff");font-weight:900;font-style:normal;font-display:swap}

:root{
  --atm-black:#000000;
  --atm-orange:#BE5317;
  --atm-cream:#FAECCE;
  --atm-ease:cubic-bezier(.22,.61,.36,1);

  /* Durchmesser des Logos und sein Versatz nach oben rechts, letzterer
     als Anteil des Durchmessers. Die Ecke oben rechts ist genau dann
     vollständig gedeckt, wenn --mark-shift größer als 0.146 ist –
     darunter blitzt der Hintergrund durch. Größere Werte schieben den
     Kreis weiter aus dem Bild und geben der Typo links mehr Luft.
     Sinnvoller Bereich: 0.20 bis 0.32.
     (Die Schwelle 0.146 gilt für ein Logo, das seine Zeichenfläche
     randlos füllt – bei den aktuellen SVGs ist das der Fall.) */
  --mark-size:86vmin;
  --mark-shift:.28;
}

body.atm-teaser{
  margin:0;padding:0;
  font-family:"Barlow",system-ui,-apple-system,sans-serif;
  background:var(--atm-black);
  color:var(--atm-cream);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.atm-teaser *,
body.atm-teaser *::before,
body.atm-teaser *::after{box-sizing:border-box}

.atm-alt__stage{
  position:relative;
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  padding:clamp(22px,3.2vw,52px);
  padding-bottom:0;
  overflow:hidden;
}

/* --- Logo: füllt die Ecke oben rechts vollständig ---------------- */

.atm-alt__mark{
  position:absolute;
  width:var(--mark-size);height:auto;
  top:calc(var(--mark-size) * -1 * var(--mark-shift));
  right:calc(var(--mark-size) * -1 * var(--mark-shift));
  pointer-events:none;
  z-index:0;
}

/* --- Kopfzeile --------------------------------------------------- */

.atm-alt__back{
  position:relative;z-index:2;
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:.5em;
  font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:clamp(11px,1vw,14px);
  color:var(--atm-cream);text-decoration:none;
  opacity:.8;transition:opacity .25s var(--atm-ease);
}
.atm-alt__back::before{content:"\2190"}
.atm-alt__back:hover,
.atm-alt__back:focus-visible{opacity:1}

/* --- Hero -------------------------------------------------------- */

.atm-alt__main{
  position:relative;z-index:1;
  flex:1;
  display:flex;flex-direction:column;justify-content:flex-end;
  gap:clamp(26px,3.4vw,48px);
  padding-bottom:clamp(30px,4.5vw,64px);
}

.atm-alt__hero{
  margin:0;
  font-weight:900;text-transform:uppercase;
  font-size:clamp(58px,13.6vw,240px);
  line-height:.8;
  letter-spacing:-.035em;
  color:var(--atm-cream);
}
.atm-alt__hero span{display:block}

.atm-alt__content{
  max-width:44ch;
  font-weight:500;
  font-size:clamp(15px,1.5vw,21px);line-height:1.45;
  color:var(--atm-cream);
}
.atm-alt__content p{margin:0 0 .6em}
.atm-alt__content p:last-child{margin-bottom:0}
.atm-alt__content a{color:var(--atm-cream)}

/* --- Buttons ----------------------------------------------------- */

.atm-alt__links{display:flex;flex-wrap:wrap;gap:clamp(10px,1.2vw,16px)}
.atm-alt__link{
  display:inline-block;
  font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  font-size:clamp(12px,1.05vw,15px);
  color:var(--atm-black);text-decoration:none;
  background:var(--atm-cream);border:2px solid var(--atm-cream);
  padding:.85em 1.7em;
  transition:background-color .25s var(--atm-ease),color .25s var(--atm-ease);
}
.atm-alt__link:hover,
.atm-alt__link:focus-visible{background:transparent;color:var(--atm-cream)}

/* --- Laufband ---------------------------------------------------- */

.atm-alt__ticker{
  position:relative;z-index:1;
  margin:0 calc(-1 * clamp(22px,3.2vw,52px));
  background:var(--atm-orange);
  padding:clamp(10px,1.1vw,16px) 0;
  overflow:hidden;
}
.atm-alt__ticker-track{
  display:flex;width:max-content;
  animation:atm-alt-ticker 26s linear infinite;
}
.atm-alt__ticker-track span{
  flex:none;padding-right:.6em;
  font-weight:900;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(15px,1.7vw,26px);
  color:var(--atm-black);white-space:nowrap;
}
@keyframes atm-alt-ticker{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* --- Mobil ------------------------------------------------------- */

@media (max-width:700px){
  /* Bewusst nur minimal größer als am Desktop – die Eckendeckung kommt
     über den Versatz nach rechts, nicht über die Skalierung. */
  :root{--mark-size:96vmin;--mark-shift:.30}

  /* In dieser Größe liegt der Kreis über der linken oberen Ecke, der
     Zurück-Link wäre dort schlecht lesbar. Deshalb rutscht er per order
     unter die Buttons, statt das Logo dafür zu verkleinern. */
  .atm-alt__main{order:1}
  .atm-alt__back{order:2;margin:clamp(18px,5vw,28px) 0}
  .atm-alt__ticker{order:3}

  .atm-alt__hero{font-size:clamp(56px,23vw,150px);letter-spacing:-.03em}
  .atm-alt__links{width:100%}
  .atm-alt__link{flex:1 1 auto;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  .atm-alt__ticker-track{animation:none}
  .atm-alt__link,.atm-alt__back{transition:none}
}