/* ===========================================================================
   KI-Schulungen und Veranstaltungen 2026 - mandala IT
   Landingpage /lp/  ·  Stylesheet

   Aufbau:
     1. Schriften      Funnel Display (Ueberschriften) + Inter (Fliesstext)
     2. Grundlagen     uebernommen aus der urspruenglichen Seite
     3. Auswahlfelder  Termin- und Teilnahmeform-Buttons
     4. Hover-Effekte  ueber das Attribut data-hover am Element
     5. Nach-oben      der runde Knopf unten rechts
   =========================================================================== */


/* --- 1. Schriften ---------------------------------------------------------
   Eingebunden sind nur die lateinischen Zeichensaetze. Kyrillisch, Griechisch
   und Vietnamesisch wurden entfernt, da sie auf dieser Seite nicht vorkommen.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Funnel Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/funnel-display-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Funnel Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/funnel-display-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Funnel Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/funnel-display-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Funnel Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/funnel-display-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Funnel Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/funnel-display-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Funnel Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/funnel-display-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* --- 2. Grundlagen -------------------------------------------------------- */
* { box-sizing: border-box; }
  body { margin:0; background:#ffffff; font-family:'Inter',Arial,Helvetica,sans-serif; color:#13343f; -webkit-font-smoothing:antialiased; }
  a { color:#0040a3; }
  a:hover { color:#13343f; }
  details summary::-webkit-details-marker { display:none; }
  html { scroll-behavior: smooth; }
  @keyframes dcIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
  .dc-in { animation: dcIn .28s ease-out both; }
  input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible { outline:2px solid #0040a3; outline-offset:2px; }
  :root { --meta-h: 40px; }
  img { max-width:100%; }
  @media (max-width: 760px) {
    :root { --meta-h: 0px; }
    h1, h2, h3 { letter-spacing:-0.4px; word-break:break-word; }
    input, select, textarea { font-size:16px !important; }
  }
  @media (hover: none) {
    a[href="#top"] { opacity:.92; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
    .dc-in { animation:none; }
  }


/* --- 3. Auswahlfelder ------------------------------------------------------
   Die Termin- und Teilnahmeform-Knoepfe verhalten sich wie Radio-Buttons.
   Der ausgewaehlte Zustand haengt an aria-checked, das app.js setzt - so
   stimmen Optik und Screenreader-Ausgabe immer ueberein.
   -------------------------------------------------------------------------- */
.wahl {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  border: 1px solid #c9d5d5;
  background: #ffffff;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  line-height: 1.45;
  color: #13343f;
  transition: border-color .18s ease, background-color .18s ease;
}
.wahl:hover { border-color: #0040a3; }
.wahl[aria-checked="true"] { border-color: #0040a3; background: #eef4fb; }

.wahl-punkt {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 2px solid #c9d5d5;
  background: #ffffff;
  transition: border-color .18s ease, background-color .18s ease;
}
.wahl[aria-checked="true"] .wahl-punkt {
  border-color: #0040a3;
  background: #0040a3;
  box-shadow: inset 0 0 0 4px #ffffff;
}


/* --- 4. Hover-Effekte ----------------------------------------------------- */
[data-hover="1"]:hover { background:#eef2f2;box-shadow:0 10px 26px rgba(19,52,63,0.13);transform:translateY(-3px); }
[data-hover="2"]:hover { background:#13343f; }
[data-hover="3"]:hover { background:#0040a3; }


/* --- 5. Nach-oben-Knopf ---------------------------------------------------
   Standardmaessig ausgeblendet; app.js setzt .ist-sichtbar beim Scrollen.
   -------------------------------------------------------------------------- */
.nach-oben {
  position: fixed;
  right: clamp(14px, 3vw, 24px);
  bottom: clamp(14px, 3vw, 24px);
  width: clamp(46px, 12vw, 52px);
  height: clamp(46px, 12vw, 52px);
  background: #0040a3;
  color: #ffffff;
  text-decoration: none;
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(19, 52, 63, .28);
  z-index: 50;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, background-color .18s ease;
}
.nach-oben.ist-sichtbar { opacity: 1; transform: none; pointer-events: auto; }


/* --- 6. Absende-Knopf waehrend des Versands ------------------------------- */
#anmeldeformular button[type="submit"][disabled] { opacity: .6; cursor: progress; }