/* =========================================================
   TeachTronPro — Coming Soon (v2, with flyer + logo)
   Clean Industrial Technology. No third-party fonts/trackers.
   ========================================================= */

/* Local font hook — drop licensed .woff2 files in /assets/fonts/
   and uncomment to activate Manrope/Inter. Falls back to a
   close system sans-serif stack until then. */
/* @font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Variable.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
} */

:root{
  --blue: #0075E0;
  --blue-strong: #005FBC;
  --navy: #0A2745;
  --graphite: #20252B;
  --light-blue: #B4EAFF;
  --off-white: #F7F9FB;
  --white: #FFFFFF;
  --line: #E1E7ED;

  --font-display: "Manrope", "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --container: 1120px;
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
body{
  margin:0; font-family: var(--font-body); color: var(--graphite); background: var(--white);
  -webkit-font-smoothing:antialiased; line-height:1.6;
}
img{ max-width:100%; display:block; }
a{ color: var(--blue); }
h1,h2,h3{ font-family: var(--font-display); font-weight:800; color: var(--navy); margin:0 0 0.6em; letter-spacing:-0.01em; line-height:1.15; }
p{ margin:0 0 1em; }

/* Language toggle logic */
html:not(.show-en) .lang-en{ display:none !important; }
html.show-en .lang-de{ display:none !important; }

.skip-link{
  position:absolute; left:1rem; top:-3rem; background:var(--navy); color:var(--white);
  padding:0.75rem 1.25rem; border-radius: var(--radius-s); z-index:999; transition: top .2s ease;
}
.skip-link:focus{ top:1rem; }
:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; border-radius:4px; }
.visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.container{ max-width: var(--container); margin-inline:auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.section{ padding-block: clamp(3.5rem, 7vw, 6rem); }
.section--off{ background: var(--off-white); }
.section-head{ max-width:38rem; margin-inline:auto; text-align:center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.eyebrow{ display:inline-block; font-family: var(--font-display); font-weight:700; font-size:0.8rem; letter-spacing:0.14em; text-transform:uppercase; color: var(--blue); margin-bottom:0.85rem; }
.lede{ font-size:1.1rem; color:#48505A; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  font-family: var(--font-display); font-weight:700; font-size:0.98rem;
  padding:0.9rem 1.75rem; border-radius: var(--radius-s); border:1.5px solid transparent;
  cursor:pointer; text-decoration:none; min-height:46px;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--blue); color: var(--white); }
.btn-primary:hover{ background: var(--blue-strong); }
.btn-secondary{ background: transparent; color: var(--navy); border-color: var(--line); }
.btn-secondary:hover{ border-color: var(--blue); color: var(--blue); }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:500; background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(140%) blur(10px); border-bottom:1px solid var(--line);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; height:76px; gap:1rem; }
.brand{ display:flex; align-items:center; gap:0.6rem; text-decoration:none; flex:0 0 auto; }
.brand img{ height:40px; width:auto; }
.brand-name{ font-family: var(--font-display); font-weight:800; color: var(--navy); font-size:1.05rem; }
.header-actions{ display:flex; align-items:center; gap:1rem; flex:0 0 auto; }
.lang-toggle{ display:flex; align-items:center; gap:0.15rem; border:1px solid var(--line); border-radius:999px; padding:2px; font-family: var(--font-display); font-weight:700; font-size:0.85rem; background: var(--white); }
.lang-toggle button{ border:none; background:transparent; color:#7A8393; padding:0.45rem 0.8rem; border-radius:999px; cursor:pointer; min-height:36px; min-width:44px; }
.lang-toggle button[aria-pressed="true"]{ background: var(--navy); color: var(--white); }
.header-contact{ font-size:0.92rem; font-weight:600; color: var(--navy); text-decoration:none; white-space:nowrap; }
.header-contact:hover{ color: var(--blue); }
@media (max-width:560px){ .header-contact{ display:none; } }

/* ---------- Hero ---------- */
.hero{ padding-block: clamp(3.5rem, 8vw, 6rem); position:relative; overflow:hidden; }
.hero-ring{
  position:absolute; top:50%; left:50%; width:min(64rem, 140vw); aspect-ratio:1;
  transform: translate(-50%,-50%); border:1.5px solid var(--light-blue); border-radius:50%;
  opacity:0.55; pointer-events:none;
}
.hero-ring::before{
  content:""; position:absolute; inset:8%; border:1px solid var(--light-blue); border-radius:50%; opacity:0.6;
}
.hero-inner{ position:relative; max-width:42rem; margin-inline:auto; text-align:center; }
.hero h1{ font-size: clamp(2.1rem, 5vw, 3.25rem); }
.hero .lede{ margin-top:1.1rem; font-size:1.15rem; }
.hero .desc{ margin-top:1rem; color:#3C434C; font-size:1.03rem; max-width:36rem; margin-inline:auto; }
.hero-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; margin-top:2rem; }

/* ---------- Flyer section ---------- */
.flyer-wrap{ display:flex; flex-direction:column; align-items:center; gap:1.25rem; }
.flyer-frame{
  background: var(--white); border:1px solid var(--line); border-radius: var(--radius-l);
  box-shadow: 0 4px 10px rgba(10,39,69,0.08), 0 20px 48px rgba(10,39,69,0.10);
  padding: clamp(0.75rem, 2vw, 1.25rem); max-width: 26rem; width:100%;
}
.flyer-frame button.flyer-trigger{
  display:block; width:100%; padding:0; border:none; background:none; cursor:zoom-in; border-radius: var(--radius-m); overflow:hidden;
}
.flyer-frame img{ width:100%; height:auto; border-radius: var(--radius-m); }
.flyer-caption{ text-align:center; font-size:0.9rem; color:#7A8393; }
.flyer-caption strong{ color: var(--navy); }

/* ---------- Coming soon divider ---------- */
.divider-mark{ display:flex; align-items:center; justify-content:center; gap:1rem; margin-bottom:1.75rem; }
.divider-mark span{ width:44px; height:1px; background: var(--line); }
.divider-mark .dot-ring{ width:14px; height:14px; border-radius:50%; border:1.5px solid var(--blue); flex:none; }

/* ---------- Contact ---------- */
.contact-section{ text-align:center; }
.contact-email{ font-family: var(--font-display); font-weight:700; font-size:1.1rem; color: var(--navy); display:inline-block; margin: 0.5rem 0 1.5rem; }
.contact-email:hover{ color: var(--blue); }

/* ---------- Footer ---------- */
.site-footer{ background: var(--navy); color:#C7D3E0; padding-block: 2.75rem; }
.site-footer .container{ display:flex; flex-direction:column; align-items:center; gap:1.25rem; text-align:center; }
.footer-brand{ display:flex; align-items:center; gap:0.6rem; }
.footer-brand img{ height:34px; width:34px; border-radius:8px; background: var(--white); padding:2px; }
.footer-brand span{ font-family: var(--font-display); font-weight:800; color: var(--white); font-size:1.05rem; }
.footer-origin{ font-size:0.9rem; color:#9AA9BC; margin:0; }
.footer-legal{ display:flex; flex-wrap:wrap; justify-content:center; gap:0.4rem 1.5rem; list-style:none; margin:0; padding:0; }
.footer-legal a{ font-size:0.9rem; color:#C7D3E0; text-decoration:none; }
.footer-legal a:hover{ color: var(--white); text-decoration:underline; }
.footer-copyright{ font-size:0.82rem; color:#7F92AC; margin:0; }
.footer-rule{ width:100%; max-width:20rem; height:1px; background: rgba(255,255,255,0.14); margin:0; border:none; }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }

/* ---------- Lightbox ---------- */
.lightbox{ border:none; padding:0; background:transparent; max-width:min(94vw, 640px); width:100%; }
.lightbox::backdrop{ background: rgba(10,20,32,0.82); }
.lightbox-inner{ position:relative; }
.lightbox-inner img{ width:100%; height:auto; border-radius: var(--radius-m); box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
.lightbox-close{
  position:absolute; top:-14px; right:-14px; width:42px; height:42px; border-radius:50%;
  background: var(--white); color: var(--navy); border:1px solid var(--line); cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}
@media (max-width:560px){ .lightbox-close{ top:-46px; right:0; } }

/* ---------- Legal pages ---------- */
.legal-main{ padding-block: clamp(2.5rem, 6vw, 4rem); }
.legal-page{ max-width:42rem; margin-inline:auto; }
.legal-page h2{ font-size:1.15rem; margin-top:2rem; }
.legal-page p, .legal-page li{ color:#3C434C; }
.legal-placeholder{
  background:#E6F2FD; border:1px dashed #8FC1EE; border-radius: var(--radius-s); padding:1rem 1.2rem;
  font-size:0.92rem; color:#0A2745; margin:1.25rem 0 0.5rem;
}
.legal-placeholder strong{ color: var(--blue-strong); }
.back-link{ display:inline-block; margin-top:2.25rem; font-weight:600; text-decoration:none; }