/* ===================================================================
   Auswahlseite  (page-landing.php)

   Das Problem der ersten Fassung war nicht die Farbwahl, sondern der
   Aufbau: links ein helles Feld mit dunklem Inhalt, rechts ein dunkles
   Feld mit hellem Inhalt – zwei gegensätzliche Bauprinzipien
   nebeneinander. Dazu stießen mit Gold und Orange zwei warme Töne
   direkt aneinander, zu ähnlich für Kontrast, zu verschieden für
   Harmonie.

   Hier tragen beide Hälften denselben Grund. Gold und Orange berühren
   sich nie als Fläche, sie sitzen als Akzent auf gemeinsamem Schwarz –
   getrennt durch eine feine Linie in Cream. Erst beim Hovern flutet
   die gewählte Hälfte in ihrer Markenfarbe und das Logo dreht sich um.

   Farbrollen:
     Schwarz   #000000  Grund
     Gold   #907234  Akzent atm
     Orange #BE5317  Akzent Kiosque
     Cream  #FAECCE  Schrift und Trennlinie
   =================================================================== */

@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-gold:#907234;
  --atm-orange:#BE5317;
  --atm-cream:#FAECCE;

  /* Kantenlänge der Logo-Box. Beide SVGs füllen ihre Zeichenfläche zu
     100 %, randlos – dieselbe Box heißt hier also auch derselbe Kreis
     und derselbe Abstand zur Schrift. Kein Ausgleich nötig. */
  --logo-size:clamp(150px,19vw,340px);

  /* Diagonale: X-Position der Kante oben bzw. unten */
  --cut-top:58.5%;
  --cut-bottom:41%;
  /* Stärke der Trennlinie. Feste Pixel statt Prozent – sonst wird die
     Linie im Hochformat dick, weil sich Prozente dort auf die Höhe
     beziehen. */
  --rule:2px;

  --atm-ease:cubic-bezier(.22,.61,.36,1);
}

html.atm2-html,
html.atm2-html body{height:100%}

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

body.atm2.admin-bar .atm2-split{height:calc(100dvh - 32px)}

.atm2-visually-hidden{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* --- Bühne ------------------------------------------------------- */

.atm2-split{position:relative;width:100%;height:100vh;height:100dvh}

.atm2-panel{
  position:absolute;inset:0;display:flex;
  text-decoration:none;
  background:var(--atm-black);
  transition:clip-path .55s var(--atm-ease),background-color .45s var(--atm-ease);
  -webkit-tap-highlight-color:transparent;
}
.atm2-panel--atm{
  justify-content:flex-start;
  clip-path:polygon(0 0, var(--cut-top) 0, var(--cut-bottom) 100%, 0 100%);
}
.atm2-panel--kiosque{
  justify-content:flex-end;
  clip-path:polygon(var(--cut-top) 0, 100% 0, 100% 100%, var(--cut-bottom) 100%);
}

/* Trennlinie: eigener Splitter mit derselben Geometrie, folgt dadurch
   jeder Bewegung der Diagonale von selbst. */
.atm2-rule{
  position:absolute;inset:0;
  background:var(--atm-cream);
  opacity:.75;
  pointer-events:none;
  z-index:3;
  clip-path:polygon(
    var(--cut-top) 0,
    calc(var(--cut-top) + var(--rule)) 0,
    calc(var(--cut-bottom) + var(--rule)) 100%,
    var(--cut-bottom) 100%);
  transition:clip-path .55s var(--atm-ease),opacity .45s var(--atm-ease);
}

.atm2-panel__inner{
  width:50%;height:100%;
  display:flex;flex-direction:column;
  padding:clamp(20px,3.4vw,64px);
}

/* --- Logo mit Umschlag beim Hovern -------------------------------- */

.atm2-panel__logo-wrap{
  flex:1;display:flex;align-items:center;justify-content:center;
}
.atm2-logo{
  position:relative;display:block;
  width:var(--logo-size);aspect-ratio:1;
  transition:transform .55s var(--atm-ease);
}
.atm2-logo img{
  position:absolute;inset:0;
  width:100%;height:100%;display:block;
  transition:opacity .45s var(--atm-ease);
}
.atm2-logo img.is-invers{opacity:0}

/* --- Schrift ------------------------------------------------------ */

.atm2-panel__text{
  display:flex;flex-direction:column;gap:.4em;
  color:var(--atm-cream);
  transition:color .45s var(--atm-ease);
}
.atm2-panel--atm .atm2-panel__text{align-self:flex-start;text-align:left}
.atm2-panel--kiosque .atm2-panel__text{align-self:flex-end;text-align:right}

.atm2-claim{
  font-weight:900;text-transform:uppercase;
  font-size:clamp(20px,2.6vw,46px);line-height:1;letter-spacing:-.015em;
}
.atm2-meta{
  font-weight:500;
  font-size:clamp(14px,1.4vw,24px);line-height:1.3;
  opacity:.85;
}

/* --- Hover: die Hälfte flutet, das Logo dreht um ------------------ */

@media (hover:hover) and (pointer:fine){
  .atm2-split:has(.atm2-panel--atm:hover){--cut-top:68%;--cut-bottom:50.5%}
  .atm2-split:has(.atm2-panel--kiosque:hover){--cut-top:49%;--cut-bottom:31.5%}
  .atm2-split:has(.atm2-panel:hover) .atm2-rule{opacity:0}

  .atm2-panel--atm:hover{background:var(--atm-gold)}
  .atm2-panel--kiosque:hover{background:var(--atm-orange)}

  .atm2-panel:hover .atm2-panel__text{color:var(--atm-black)}
  .atm2-panel:hover .atm2-logo{transform:scale(1.045)}
  .atm2-panel:hover .atm2-logo img.is-normal{opacity:0}
  .atm2-panel:hover .atm2-logo img.is-invers{opacity:1}
}

.atm2-panel:focus-visible{outline:3px solid var(--atm-cream);outline-offset:-14px}

/* --- Mobil: gestapelt, kein Hover --------------------------------- */

@media (max-width:900px){
  .atm2-panel{align-items:flex-start;transition:none}
  .atm2-panel--atm{clip-path:polygon(0 0, 100% 0, 100% 45%, 0 55%)}
  .atm2-panel--kiosque{align-items:flex-end;clip-path:polygon(0 55%, 100% 45%, 100% 100%, 0 100%)}

  /* Ohne Hover gibt es hier nichts aufzudecken – deshalb steht die
     atm-Hälfte gleich in Gold, so wie sie am Desktop beim Hovern
     erscheint. Kiosque bleibt auf Schwarz mit orangem Logo. */
  .atm2-panel--atm{background:var(--atm-gold)}
  .atm2-panel--atm .atm2-logo img.is-normal{opacity:0}
  .atm2-panel--atm .atm2-logo img.is-invers{opacity:1}
  .atm2-panel--atm .atm2-panel__text{color:var(--atm-black)}

  /* Die beiden Farbflächen trennen sich selbst, die Linie wäre hier
     nur eine Naht zu viel. */
  .atm2-rule{display:none}

  /* Logo und Schrift rücken als Gruppe zusammen in die Mitte der
     Hälfte, statt dass das Logo oben schwebt und die Schrift unten
     klebt. */
  /* Der Abstand steht bewusst nur an dieser einen Stelle und gilt für
     beide Hälften – so ist er oben und unten zwangsläufig gleich. */
  .atm2-panel__inner{
    width:100%;height:50%;
    align-items:center;justify-content:center;
    gap:clamp(19px,4.9vw,32px);
  }
  .atm2-panel__logo-wrap{flex:0 0 auto}
  .atm2-panel--atm .atm2-panel__inner{padding-bottom:clamp(30px,8vw,60px)}
  .atm2-panel--kiosque .atm2-panel__inner{padding-top:clamp(30px,8vw,60px)}

  :root{--logo-size:clamp(140px,40vw,230px)}
  .atm2-panel__text{align-items:center}
  .atm2-panel--atm .atm2-panel__text,
  .atm2-panel--kiosque .atm2-panel__text{align-self:center;text-align:center}
  .atm2-claim{font-size:clamp(19px,5.8vw,32px)}
  .atm2-meta{font-size:clamp(13px,3.7vw,18px)}
}

@media (prefers-reduced-motion:reduce){
  .atm2-panel,.atm2-logo,.atm2-logo img,.atm2-rule,.atm2-panel__text{transition:none}
}