/* MINT-Präsentation WRG Bendorf
   Gestaltung nach dem WRG-Logo: kantige Flächen in drei Blautönen, keine Rundungen, keine Schatten.
   Zwei Layouts: Smartboard (Querformat ab 900 px, ausgelegt für 1280 × 800) und Handy (eine Spalte). */

@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url("fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 600; font-display: swap; src: url("fonts/barlow-semi-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 700; font-display: swap; src: url("fonts/barlow-semi-condensed-latin-700-normal.woff2") format("woff2"); }

:root {
  /* Farben aus dem WRG-Logo */
  --navy: #1f3a5a;
  --blue: #3b6894;
  --sky: #a9c5de;
  --wash: #edf2f7;
  --paper: #ffffff;
  --ink: #0f1b2a;
  --muted: #3f4d5c;
  --rule: #c7d4e1;
  /* Siegel „MINT-freundliche Schule“, nur für Anmeldung Klasse 5 und Sterne */
  --mint: #00776f;
  --star: #9a6b00;
  --display: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
  --body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.35;
  -webkit-tap-highlight-color: transparent;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: square; stroke-linejoin: miter; flex: none; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: .2rem solid var(--mint); outline-offset: .15rem; }
.label { font-family: var(--display); font-weight: 600; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- Kacheln ---------- */
.tile {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end; gap: .2rem;
  padding: 1rem 1.2rem 1.1rem;
  text-decoration: none;
  touch-action: manipulation;
  overflow: hidden;
}
.tile:active { filter: brightness(.88); }
.tile .tl { position: absolute; top: .9rem; left: 1.2rem; font-family: var(--display); font-weight: 600; font-size: 1rem; letter-spacing: .07em; text-transform: uppercase; }
.tile .tt { font-family: var(--display); font-weight: 700; font-size: 2.05rem; line-height: 1.02; }
.tile .ts { font-size: 1.12rem; font-weight: 500; }
.t-navy { background: var(--navy); color: #fff; }
.t-blue { background: var(--blue); color: #fff; }
.t-sky { background: var(--sky); color: var(--navy); }
.t-photo { background: var(--navy) url("img/ehrung-mainz-2026.jpg") center 35% / cover; color: #fff; }
.t-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,38,60,.95) 30%, rgba(20,38,60,.35)); }
.t-photo > * { position: relative; }
.t-photo .tl { position: absolute; }

/* ---------- Leiste ---------- */
.bar { background: var(--paper); display: flex; flex-direction: column; gap: 1rem; padding: 1.1rem 1rem; }
.bar-logo { width: 100%; max-width: 12.5rem; margin: 0 auto; }
.btn-start {
  display: flex; align-items: center; justify-content: center;
  background: var(--navy); color: #fff; text-decoration: none;
  font-family: var(--display); font-weight: 700; font-size: 1.7rem; letter-spacing: .04em;
  min-height: 4.4rem;
}
.contact { display: flex; flex-direction: column; gap: .45rem; border-top: .25rem solid var(--navy); padding-top: .6rem; }
.contact .label { color: var(--navy); }
.contact-row { display: flex; gap: .7rem; align-items: center; }
.contact-row img { width: 4.2rem; height: 4.2rem; object-fit: cover; }
.contact-name { font-family: var(--display); font-weight: 700; font-size: 1.3rem; line-height: 1.1; }
.contact-role { color: var(--muted); font-size: 1rem; }
.contact-mail { font-size: .98rem; font-weight: 600; color: var(--navy); text-decoration: none; white-space: nowrap; }
.anmeldung-info { border-top: .25rem solid var(--mint); padding-top: .6rem; font-size: .98rem; color: var(--muted); }
.anmeldung-info .label { color: var(--mint); }
.ai-dates { font-family: var(--display); font-weight: 700; font-size: 1.25rem; color: var(--ink); line-height: 1.15; margin: .15rem 0 .1rem; }
.qr { margin-top: auto; }
.qr img { width: 100%; max-width: 11.5rem; margin: 0 auto .4rem; }
.qr p { font-size: 1rem; text-align: center; line-height: 1.25; }
.qr strong { display: block; font-family: var(--display); font-size: 1.35rem; }

/* ---------- Start ---------- */
.start-head { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 1.2rem; align-items: end; }
.start-head h1 { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: .9rem; color: var(--navy); line-height: .95; }
.h1-big { font-size: 4.6rem; font-weight: 700; letter-spacing: .01em; }
.h1-small { font-size: 2rem; font-weight: 600; }
.start-sub { grid-column: 1; font-size: 1.25rem; color: var(--muted); margin-top: .3rem; }
.seal { grid-column: 2; grid-row: 1 / 3; width: 7.5rem; }

/* ---------- Detail ---------- */
.detail-wrap { background: var(--wash); display: flex; flex-direction: column; position: relative; }
.detail-head { display: flex; align-items: stretch; background: var(--navy); color: #fff; min-height: 4.6rem; }
.detail-head h2 { font-size: 2.3rem; font-weight: 700; line-height: 1.05; align-self: center; padding: .5rem 1.3rem; }
.btn-back {
  display: flex; align-items: center; gap: .3rem; flex: none;
  background: var(--sky); color: var(--navy); text-decoration: none;
  font-family: var(--display); font-weight: 700; font-size: 1.35rem;
  padding: 0 1.2rem 0 .8rem;
}
.btn-back svg { font-size: 1.8rem; }
.detail-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 1.2rem 1.4rem 1.6rem; }
.detail { display: flex; flex-direction: column; gap: 1.1rem; font-size: 1.3rem; }
.kid { font-family: var(--display); font-weight: 700; font-size: 2.15rem; line-height: 1.12; color: var(--navy); max-width: 48rem; text-wrap: balance; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cols.three { grid-template-columns: 1fr 1fr 1fr; }
.cols > * { min-width: 0; }
.panel { background: var(--paper); padding: 1.1rem 1.3rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; }
.panel h3, .subj h3, .signup h3 { font-size: 1.5rem; font-weight: 700; color: var(--navy); line-height: 1.1; }
.panel h3:not(:first-child) { margin-top: .5rem; }
h3 small { font-family: var(--body); font-size: 1rem; font-weight: 600; color: var(--blue); margin-left: .3rem; }
.facts, .topics { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .35rem; }
.facts li { position: relative; padding-left: 1.2rem; }
.facts li::before { content: ""; position: absolute; left: 0; top: .5em; width: .5rem; height: .5rem; background: var(--blue); }
.topics { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.topics li { padding: .35rem 0; border-bottom: 1px solid var(--rule); font-size: 1.2rem; }
.more { display: inline-flex; align-items: center; gap: .3rem; align-self: flex-start; margin-top: auto; padding-top: .4rem; color: var(--blue); font-weight: 600; font-size: 1.15rem; text-decoration: none; border-bottom: .15rem solid currentColor; }
.note { font-size: 1rem; color: var(--muted); display: flex; align-items: center; gap: .4rem; }
blockquote { margin-top: .4rem; font-family: var(--display); font-weight: 600; font-size: 1.45rem; line-height: 1.2; color: var(--navy); }
cite { display: block; font-family: var(--body); font-style: normal; font-weight: 500; font-size: 1rem; margin-top: .35rem; color: var(--muted); }

/* MINT-Buchstaben in den Logo-Farben */
.mint-letters { display: grid; grid-template-columns: repeat(4, 1fr); }
.mint-letters p { display: flex; align-items: baseline; padding: .55rem .9rem; font-size: 1.25rem; font-weight: 600; color: #fff; hyphens: manual; min-width: 0; }
.mint-letters b { font-family: var(--display); font-size: 2.6rem; line-height: 1; font-weight: 700; }
.mint-letters p:nth-child(1) { background: var(--navy); }
.mint-letters p:nth-child(2) { background: var(--blue); }
.mint-letters p:nth-child(3) { background: var(--sky); color: var(--navy); }
.mint-letters p:nth-child(4) { background: var(--navy); }

/* Auszeichnungsjahre */
.years { list-style: none; margin: .2rem 0 .3rem; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: .3rem solid var(--navy); }
.years li { font-family: var(--display); font-weight: 700; font-size: 1.45rem; color: var(--blue); padding-bottom: .25rem; }
.years li.now { color: #fff; background: var(--navy); text-align: center; }

/* Fotos und Zoom */
.photo { display: flex; flex-direction: column; gap: .4rem; }
.zoomable { position: relative; padding: 0; border: 0; background: var(--navy); display: block; width: 100%; }
.zoomable img { width: 100%; height: 100%; object-fit: cover; }
.zoom-hint { position: absolute; right: 0; bottom: 0; background: var(--navy); color: #fff; font-family: var(--display); font-weight: 600; font-size: 1.05rem; padding: .35rem .7rem; }
figcaption { font-size: .95rem; color: var(--muted); }

/* Stunden */
.hours { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.hours div { border-left: .3rem solid var(--blue); padding-left: .7rem; }
.hours dt { font-family: var(--display); font-weight: 700; font-size: 1.3rem; color: var(--navy); }

/* Fächer */
.subjects { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.subj { background: var(--paper); padding: 1rem 1.1rem 1.1rem; font-size: 1.12rem; display: flex; flex-direction: column; gap: .45rem; border-top: .35rem solid var(--navy); min-width: 0; }
.subj h3 small { display: block; margin: .1rem 0 0; }

/* AGs */
.ag-wrap { display: grid; grid-template-columns: 1fr 13rem; gap: 1rem; align-items: start; }
.ag-table { width: 100%; border-collapse: collapse; background: var(--paper); font-size: 1.12rem; }
.ag-table thead th { background: var(--navy); color: #fff; text-align: left; font-family: var(--display); font-weight: 600; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; padding: .45rem .8rem; }
.ag-table tbody th { text-align: left; font-family: var(--display); font-weight: 700; font-size: 1.3rem; color: var(--navy); white-space: nowrap; }
.ag-table tbody th, .ag-table td { padding: .5rem .8rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.ag-table td:last-child { white-space: nowrap; color: var(--muted); font-size: 1.02rem; }
.ag-table .kl { font-family: var(--display); font-weight: 700; font-size: 1.25rem; white-space: nowrap; }
.ag-table tr.k5 th { box-shadow: inset .4rem 0 0 var(--mint); }
.ag-table tr.k5 .kl { color: var(--mint); }
.key { display: inline-block; width: .4rem; height: 1.1rem; background: var(--mint); }
.poster { position: relative; }
.poster img { aspect-ratio: 4 / 3; }

/* Wettbewerbe */
.comp { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; }
.comp dt { font-family: var(--display); font-weight: 700; color: var(--blue); }
.wins, .levels { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wins li, .levels li { display: flex; align-items: center; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--rule); }
.wins li:last-child, .levels li:last-child { border-bottom: 0; }
.wins b, .levels b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.35rem; color: var(--navy); }
.wins .y { flex: none; width: 4.6rem; font-family: var(--display); font-weight: 700; font-size: 1.5rem; color: #fff; background: var(--blue); text-align: center; padding: .25rem 0; }

/* Projekte */
.big-number { font-family: var(--display); font-weight: 700; font-size: 6.5rem; line-height: .85; color: var(--navy); }
.big-number span { font-size: 2.6rem; margin-left: .2rem; color: var(--blue); }
.video-qr { display: flex; align-items: center; gap: 1rem; margin-top: auto; padding-top: .5rem; }
.video-qr img { width: 7.5rem; }
.video-qr p { font-size: 1.05rem; font-weight: 600; color: var(--muted); }

/* Zertifikat */
.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: .25rem; }
.steps li { counter-increment: s; background: var(--paper); padding: .8rem .9rem 1rem; font-size: 1.05rem; min-width: 0; }
.steps li::before { content: counter(s); display: block; font-family: var(--display); font-weight: 700; font-size: 2.4rem; line-height: 1; color: var(--blue); }
.steps b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.35rem; color: var(--navy); margin: .1rem 0 .2rem; }
.stars { flex: none; width: 5.6rem; color: var(--star); font-size: 2rem; letter-spacing: -.05em; }
.star-table { border-collapse: collapse; width: 100%; }
.star-table td { padding: .45rem 0; border-bottom: 1px solid var(--rule); }
.star-table td.s { text-align: right; color: var(--star); font-size: 1.6rem; white-space: nowrap; padding-left: .8rem; }
.plus { font-weight: 600; margin-top: .3rem; }

/* Oberstufe */
.signup { display: flex; align-items: center; gap: 1.4rem; background: var(--navy); color: #fff; padding: 1.1rem 1.3rem; }
.signup h3 { color: #fff; }
.signup > div { flex: 1; display: flex; flex-direction: column; gap: .5rem; }
.signup figure { background: #fff; padding: .5rem; text-align: center; }
.signup figure img { width: 8rem; }
.signup figcaption { font-weight: 600; color: var(--ink); font-size: .95rem; }

/* Digital */
.brand { height: 2.4rem; width: auto; max-width: 100%; align-self: flex-start; object-fit: contain; margin: .2rem 0; }

/* Fuß der Detailseite: vor und zurück */
.detail-foot { display: flex; justify-content: space-between; align-items: stretch; gap: 1rem; background: var(--paper); border-top: 1px solid var(--rule); min-height: 4.2rem; }
.detail-foot a { display: flex; align-items: center; gap: .4rem; text-decoration: none; font-family: var(--display); font-weight: 700; color: var(--navy); font-size: 1.25rem; padding: 0 1.2rem; }
.detail-foot svg { font-size: 1.5rem; color: var(--blue); }

/* Scroll-Knöpfe (nur Smartboard, nur wenn der Inhalt länger ist) */
.scroll-btns { display: none; }
.scroll-btns.on { display: flex; }
.scroll-btns button { width: 4.6rem; border: 0; border-left: 1px solid var(--rule); background: var(--wash); color: var(--navy); font-size: 2rem; display: grid; place-items: center; }
.scroll-btns button:disabled { color: var(--rule); }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(10,20,32,.95); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; padding: 1rem; }
.lightbox img { max-height: calc(100% - 6rem); max-width: 100%; object-fit: contain; }
.lightbox p { color: #fff; font-size: 1.2rem; text-align: center; }
.lb-close { background: #fff; color: var(--navy); border: 0; font-family: var(--display); font-weight: 700; font-size: 1.4rem; padding: .7rem 1.8rem; }

/* Handy-Knöpfe */
.cta { display: flex; flex-direction: column; gap: .5rem; }
.cta-btn { display: flex; flex-direction: column; justify-content: center; text-decoration: none; color: #fff; padding: .85rem 1rem; min-height: 4rem; }
.cta-btn span { font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1.1; }
.cta-btn small { font-size: .95rem; font-weight: 500; margin-top: .1rem; }
.cta-5 { background: var(--mint); }
.cta-11 { background: var(--navy); }
.signup .cta-11 { background: #fff; color: var(--navy); align-self: flex-start; }

/* =================== Smartboard / Querformat =================== */
@media (min-width: 900px) and (min-height: 600px) and (orientation: landscape) {
  /* skaliert mit dem Bildschirm, bei 1280 × 800 genau 16 px */
  :root { font-size: min(1.25vw, 2vh); }
  html, body { overflow: hidden; }
  body { user-select: none; -webkit-user-select: none; }
  .mobile-only { display: none !important; }
  .app { display: grid; grid-template-columns: 1fr 16rem; height: 100vh; height: 100dvh; }
  .bar { order: 2; height: 100%; overflow: hidden; border-left: .35rem solid var(--navy); }
  .main { order: 1; position: relative; overflow: hidden; }
  .start { height: 100%; display: flex; flex-direction: column; gap: 1rem; padding: 1.2rem 1.4rem 1.4rem; }
  .tiles { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: .45rem; min-height: 0; }
  .detail-wrap { position: absolute; inset: 0; }
  .photo .zoomable { height: 21rem; }
}

/* =================== Handy / Hochformat =================== */
@media not all and (min-width: 900px) and (min-height: 600px) and (orientation: landscape) {
  .kiosk-only { display: none !important; }
  :root { font-size: 15px; }
  .app { display: flex; flex-direction: column; min-height: 100vh; }
  .main { order: 1; }
  .bar { order: 2; padding: 1.4rem max(16px, env(safe-area-inset-right, 0px)) 2rem max(16px, env(safe-area-inset-left, 0px)); background: var(--wash); }
  .bar-logo { max-width: 11rem; margin: 0; }
  .btn-start { display: none; }
  .footer-info { font-size: 1rem; display: flex; flex-direction: column; gap: .6rem; color: var(--muted); }
  .footer-info a { color: var(--navy); font-weight: 600; }
  .credit { font-size: .85rem; }
  .start { padding: 1rem max(16px, env(safe-area-inset-right, 0px)) 1.5rem max(16px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 1.2rem; max-width: 42rem; margin: 0 auto; }
  .start-head { grid-template-columns: 1fr 6.5rem; }
  .h1-big { font-size: 3.6rem; }
  .h1-small { font-size: 1.45rem; }
  .seal { width: 5.5rem; grid-row: 1; align-self: start; }
  .tiles { display: flex; flex-direction: column; gap: .35rem; }
  .tile { min-height: 6.6rem; padding: 2.1rem 1rem .9rem; }
  .tile .tl { top: .75rem; left: 1rem; font-size: .85rem; }
  .tile .tt { font-size: 1.7rem; }
  .tile .ts { font-size: 1rem; }

  .detail-wrap { position: fixed; inset: 0; z-index: 20; overflow-y: auto; -webkit-overflow-scrolling: touch; display: block; }
  .detail-head { position: sticky; top: 0; z-index: 2; min-height: 3.6rem; }
  .detail-head h2 { font-size: 1.45rem; padding: .5rem .9rem; }
  .btn-back { font-size: 1.05rem; padding: 0 .8rem 0 .5rem; }
  .btn-back svg { font-size: 1.4rem; }
  .detail-scroll { overflow: visible; padding: 1rem max(16px, env(safe-area-inset-right, 0px)) 1.2rem max(16px, env(safe-area-inset-left, 0px)); max-width: 46rem; margin: 0 auto; }
  .detail { font-size: 1.08rem; gap: .9rem; }
  .kid { font-size: 1.6rem; }
  .cols, .cols.three, .subjects, .steps, .ag-wrap { grid-template-columns: 1fr; }
  .steps { gap: .2rem; }
  .mint-letters { grid-template-columns: 1fr 1fr; }
  .mint-letters p { font-size: 1.05rem; }
  .mint-letters b { font-size: 2.1rem; }
  .years li { font-size: 1.1rem; }
  .topics { grid-template-columns: 1fr; }
  .panel h3, .subj h3, .signup h3 { font-size: 1.3rem; }
  .big-number { font-size: 4.8rem; }

  /* AG-Tabelle wird zur Liste */
  .ag-table thead { display: none; }
  .ag-table, .ag-table tbody, .ag-table tr { display: block; }
  .ag-table tr { padding: .7rem .9rem; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 1fr auto; gap: .1rem .8rem; }
  .ag-table tbody th, .ag-table td { display: block; padding: 0; border: 0; }
  .ag-table td:nth-child(3) { grid-column: 1 / -1; }
  .ag-table td:last-child { grid-column: 1 / -1; white-space: normal; }
  .ag-table tr.k5 { box-shadow: inset .35rem 0 0 var(--mint); }
  .ag-table tr.k5 th { box-shadow: none; }

  .signup { flex-direction: column; align-items: stretch; }
  .detail-foot { min-height: 3.6rem; }
  .detail-foot a { font-size: 1.05rem; padding: 0 .8rem; }
  .detail-foot { gap: .3rem; }
  .detail-foot a { min-width: 0; flex: 1 1 0; }
  .btn-next { justify-content: flex-end; }
  .detail-foot a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .scroll-btns { display: none !important; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* ---------- Ergänzungen: Bilder aus dem Plakat, kompakte Themenseiten ---------- */
.tile .kf { position: absolute; top: .55rem; right: 1rem; font-family: var(--display); font-weight: 700; font-size: 3.4rem; line-height: 1; text-align: right; color: var(--sky); }
.t-blue .kf:not(:has(small:not(:empty))), .tile .kf:has(small:empty) { font-size: 2.3rem; letter-spacing: -.02em; }
.tile .kf small { display: block; font-size: 1.05rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; margin-top: .1rem; }
.t-sky .kf { color: var(--blue); }
.t-balloon { background-image: url("img/wetterballon-34km.jpg"); background-position: center 60%; }
.t-photo .kf { position: absolute; color: #fff; }
.balloon { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1rem; }
.balloon > * { min-width: 0; }
.balloon-fig .zoomable { aspect-ratio: 1030 / 545; }

@media (min-width: 900px) and (min-height: 600px) and (orientation: landscape) {
  .detail-scroll { padding: 1rem 1.3rem 1rem; }
  .detail { font-size: 1.2rem; gap: .85rem; }
  .kid { font-size: 1.95rem; max-width: none; }
  .panel { padding: .85rem 1.1rem 1rem; gap: .4rem; }
  .panel h3, .subj h3, .signup h3 { font-size: 1.4rem; }
  .panel h3:not(:first-child) { margin-top: .3rem; }
  .subj { font-size: 1.15rem; padding: .8rem 1rem .9rem; }
  .ag-wrap { grid-template-columns: minmax(0,1fr) 12rem; }
  .ag-table { font-size: 1.2rem; }
  .ag-table tbody th, .ag-table td { padding: .62rem .8rem; }
  .ag-table tbody th { font-size: 1.4rem; }
  .steps li { padding: .6rem .8rem .7rem; font-size: 1.15rem; }
  .steps li::before { font-size: 2rem; }
  .levels li, .wins li { padding: .3rem 0; }
  .star-table td { padding: .22rem 0; }
  .signup { padding: .8rem 1.1rem; }
  .signup figure img { width: 6.5rem; }
  .facts { gap: .25rem; }
  .brand { height: 2rem; }
  .photo .zoomable { height: 19rem; }
}
@media not all and (min-width: 900px) and (min-height: 600px) and (orientation: landscape) {
  .balloon { grid-template-columns: 1fr; }
  .tile .kf { font-size: 2.6rem; top: .6rem; right: .8rem; }
  .t-blue .kf:not(:has(small:not(:empty))), .tile .kf:has(small:empty) { font-size: 2.3rem; letter-spacing: -.02em; }
.tile .kf small { font-size: .85rem; }
  .tile .tt, .tile .ts { padding-right: 5rem; }
}

/* Nach Prüfung: Kennzahlen lesbar, Smartboard ohne Mail-Programm und ohne Zoomen */
.tile .kf small { text-transform: none; letter-spacing: .02em; }
.t-blue .kf { color: #fff; }
.t-sky .kf { color: var(--navy); }
@media (min-width: 900px) and (min-height: 600px) and (orientation: landscape) {
  .contact-mail { pointer-events: none; }
  body { touch-action: pan-x pan-y; }
}
.badges { display: flex; align-items: center; gap: 1.2rem; margin: 0 0 .6rem; }
.badges img { height: 5.6rem; width: auto; min-width: 0; }