/* Drumbook zum Ausprobieren (/ausprobieren/, /en/try/, #247).

   Die Seite zeigt die App in einem eigenen, neutralen Handyrahmen. Apples
   Geraeterahmen duerfen laut den Marketing-Richtlinien weder veraendert noch
   klickbar gemacht werden.

   Alles im Bildschirm rechnet in Punkten des iPhone 17 Pro (402 breit): eine
   Einheit --u ist ein Punkt, egal wie breit das Handy auf der Seite steht.
   Dafuer ist der Bildschirm ein Container (cqw). */

.demo { padding: 0 0 72px; }
.demo__head { max-width: 660px; margin: 26px 0 34px; }
.demo__kick { color: var(--accent); font-size: 13px; font-weight: 650;
              letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
.demo h1 { font-size: clamp(1.85rem, 5.4vw, 2.75rem); line-height: 1.1;
           letter-spacing: -.022em; margin-bottom: 14px; text-wrap: balance; }
.demo__sub { font-size: 1.06rem; color: var(--ink-muted); }

.demo__buehne { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 56px; align-items: start; }
@media (max-width: 820px) {
  .demo__buehne { grid-template-columns: 1fr; gap: 28px; justify-items: center; }
}

/* ---------- Seitenleiste: die fuenf Kapitel ---------- */

.kapitel { width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 22px; }
.kapitel__jetzt { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.kapitel__jetzt p { margin: 0; }
.kapitel__label { padding: 9px 18px 8px; background: var(--accent-dim); border-bottom: 1px solid var(--line);
                  color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .085em; text-transform: uppercase; }
.kapitel__text { padding: 15px 18px 17px; font-size: 1.02rem; line-height: 1.5; min-height: 4.6em; }
.kapitel ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; counter-reset: k; }
.kapitel li button {
  width: 100%; display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: baseline;
  text-align: left; background: none; border: 0; border-radius: 10px; padding: 11px 12px;
  color: var(--ink-muted); font: inherit; cursor: pointer; }
.kapitel li button:hover { background: var(--bg-raised); }
.kapitel li button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.kapitel__nr { font-variant-numeric: tabular-nums; color: var(--ink-faint); font-weight: 650; }
.kapitel__titel { color: var(--ink); font-weight: 600; display: block; }
.kapitel__zeile { font-size: 14px; display: block; margin-top: 2px; }
.kapitel__ton { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
                color: var(--accent); border: 1px solid var(--accent-dim); border-radius: 999px; padding: 2px 8px; }
.kapitel li[aria-current="step"] button { background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--line); }
.kapitel li[aria-current="step"] .kapitel__nr { color: var(--accent); }
.kapitel li.fertig .kapitel__nr::after { content: " ✓"; color: var(--accent); }
.kapitel__fuss { font-size: 13.5px; color: var(--ink-faint); line-height: 1.55; }
.kapitel__fuss button { background: none; border: 0; padding: 0; color: var(--accent-soft); font: inherit; cursor: pointer; }

/* ---------- Der Rahmen ---------- */

.handy {
  width: min(320px, 84vw); padding: 11px; border-radius: 52px; background: #060607;
  box-shadow: 0 0 0 1px #2c2c33, 0 0 0 7px #0d0d10, 0 0 0 8px #24242a, 0 40px 80px -30px rgba(0,0,0,.9);
  position: relative;
}
.handy__schirm {
  position: relative; aspect-ratio: 402 / 874; border-radius: 42px; overflow: hidden;
  container-type: inline-size; background: #f2f2f7; isolation: isolate;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  color: #111; -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none;
}
.handy__insel {
  position: absolute; z-index: 30; top: calc(100cqw / 402 * 11); left: 50%; transform: translateX(-50%);
  width: calc(100cqw / 402 * 124); height: calc(100cqw / 402 * 36); border-radius: 999px; background: #000;
  pointer-events: none;
}
/* Die Leiste unter dem Handy: Zurueck, wo man steht, Weiter. Auf dem Handy
   ist sie der einzige sichtbare Weg zwischen den Stationen. */
.steuer { width: min(320px, 84vw); margin: 22px auto 0; display: grid; grid-template-columns: auto 1fr auto;
          align-items: center; gap: 10px; }
.steuer__stand { text-align: center; font-size: 13px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.steuer .btn { white-space: nowrap; }
.steuer .btn:disabled { opacity: .35; cursor: default; transform: none; }
.handy__notiz { font-size: 13px; color: var(--ink-faint); text-align: center; max-width: min(320px, 84vw);
                margin: 18px auto 0; line-height: 1.5; }

.szene { position: absolute; inset: 0; --u: calc(100cqw / 402); }
.szene[hidden] { display: none !important; }
.szene > img.voll { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Klickbare Flaechen ueber den Aufnahmen: unsichtbar, aber mit Fokusrahmen */
.flaeche { position: absolute; z-index: 5; background: transparent; border: 0; border-radius: calc(var(--u) * 16);
           cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; }
.flaeche:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.flaeche.zeigen { box-shadow: 0 0 0 calc(var(--u) * 3) rgba(249,129,44,.85); }
@media (prefers-reduced-motion: no-preference) {
  .flaeche.zeigen { animation: puls 1.6s ease-in-out infinite; }
}
@keyframes puls { 50% { box-shadow: 0 0 0 calc(var(--u) * 6) rgba(249,129,44,.25); } }

/* ---------- Hinweisblase ---------- */

.blase {
  position: absolute; z-index: 25; left: 7%; right: 7%;
  background: #f9812c; color: #1a0e04; border-radius: calc(var(--u) * 14);
  font: 600 calc(var(--u) * 14.5) / 1.32 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  padding: calc(var(--u) * 11) calc(var(--u) * 14); box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 24) rgba(0,0,0,.35);
  pointer-events: none; text-align: center; --u: calc(100cqw / 402);
}
.blase::after {
  content: ""; position: absolute; left: var(--pfeil, 50%); transform: translateX(-50%);
  border: calc(var(--u) * 9) solid transparent;
}
.blase.unten::after { top: 100%; border-top-color: #f9812c; border-bottom: 0; }
.blase.oben::after { bottom: 100%; border-bottom-color: #f9812c; border-top: 0; }
.blase[hidden] { display: none !important; }

/* ---------- Nachgebaute Bildschirme: gemeinsame Teile ---------- */

.leiste-oben { position: absolute; top: 0; left: 0; width: 100%; height: calc(var(--u) * 54); display: block; }
.nb { position: absolute; top: calc(var(--u) * 62); left: calc(var(--u) * 14); right: calc(var(--u) * 14);
      display: flex; align-items: center; justify-content: space-between; }
.nb b { font-size: calc(var(--u) * 17); font-weight: 600; }
.pille { font: 500 calc(var(--u) * 16.5) -apple-system, sans-serif; color: #111; background: #fff; border: 0;
         border-radius: 999px; padding: calc(var(--u) * 11) calc(var(--u) * 16); cursor: pointer;
         box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 10) rgba(0,0,0,.06); }
.pille.fett { font-weight: 600; }
.pille:focus-visible, .rund:focus-visible, .knopf:focus-visible, .stern:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- Session ---------- */

.sess__kopf { position: absolute; top: calc(var(--u) * 126); left: calc(var(--u) * 16); right: calc(var(--u) * 16);
              display: flex; flex-direction: column; align-items: center; text-align: center; }
.sess__titel { font-size: calc(var(--u) * 17.5); font-weight: 600; }
.sess__wie { font-size: calc(var(--u) * 12.2); color: #8a8a8e; line-height: 1.36; margin-top: calc(var(--u) * 6); }
.sess__uhr { font-size: calc(var(--u) * 64); font-weight: 600; letter-spacing: -.015em; line-height: 1;
             font-variant-numeric: tabular-nums; margin-top: calc(var(--u) * 12); }
.sess__balken { width: 90%; height: calc(var(--u) * 4.5); background: #e2e2e6; border-radius: 99px;
                overflow: hidden; margin-top: calc(var(--u) * 14); }
.sess__balken i { display: block; height: 100%; width: 0; background: #d96a0f; border-radius: 99px; }
.sess__plan { font-size: calc(var(--u) * 11.5); color: #8a8a8e; margin-top: calc(var(--u) * 8); }
.sess__knoepfe { display: flex; align-items: center; gap: calc(var(--u) * 16); margin-top: calc(var(--u) * 12); }
.knopf { font: 500 calc(var(--u) * 15.5) -apple-system, sans-serif; background: #e3e3e8; color: #111; border: 0;
         border-radius: 999px; padding: calc(var(--u) * 9) calc(var(--u) * 15); cursor: pointer; }
.pause { width: calc(var(--u) * 50); height: calc(var(--u) * 50); border-radius: 50%; border: 0; background: #d96a0f;
         cursor: pointer; display: grid; place-items: center; color: #fff; }
.pause svg { width: 40%; height: 40%; }
.sess__rest { font-size: calc(var(--u) * 12); color: #8a8a8e; margin-top: calc(var(--u) * 10); }

.klick { position: absolute; top: calc(var(--u) * 420); left: 0; right: 0; height: calc(var(--u) * 62);
         background: #fff; border-top: 1px solid #e3e3e8; border-bottom: 1px solid #e3e3e8;
         display: flex; align-items: center; gap: calc(var(--u) * 10); padding: 0 calc(var(--u) * 14); }
.rund { width: calc(var(--u) * 44); height: calc(var(--u) * 44); border-radius: 50%; border: 0; background: #e5e5ea;
        color: #111; display: grid; place-items: center; cursor: pointer; flex: none; padding: 0; }
.rund svg { width: 40%; height: 40%; }
.rund.an { background: #d96a0f; color: #fff; width: calc(var(--u) * 36); height: calc(var(--u) * 36); }
.rund.aus { background: #d96a0f; color: #fff; width: calc(var(--u) * 36); height: calc(var(--u) * 36); }
.bpm { text-align: center; line-height: 1; flex: none; min-width: calc(var(--u) * 42); }
.bpm b { display: block; font-size: calc(var(--u) * 21); font-weight: 600; font-variant-numeric: tabular-nums; }
.bpm span { font-size: calc(var(--u) * 10); color: #8a8a8e; }
.lichter { flex: 1; display: flex; gap: calc(var(--u) * 8); justify-content: center; align-items: center; min-height: calc(var(--u) * 40); }
.lichter i { width: calc(var(--u) * 24); height: calc(var(--u) * 24); border-radius: 50%; background: #fff6cf;
             box-shadow: inset 0 0 0 calc(var(--u) * 1.5) #f0cf48; }
.lichter i:first-child { background: #fde2cf; box-shadow: inset 0 0 0 calc(var(--u) * 1.5) #f1a066; }
.lichter i.an { background: #f5c518; }
.lichter i:first-child.an { background: #f9812c; }
.lichter .zahl { font-size: calc(var(--u) * 30); font-weight: 700; color: #d96a0f; font-variant-numeric: tabular-nums; }

.ablauf { position: absolute; top: calc(var(--u) * 498); left: calc(var(--u) * 16); right: calc(var(--u) * 16); }
.ablauf h5 { margin: 0 0 calc(var(--u) * 10) calc(var(--u) * 14); font-size: calc(var(--u) * 16); font-weight: 600; color: #8a8a8e; }
.zeile-karte { background: #fff; border-radius: calc(var(--u) * 22); padding: calc(var(--u) * 14) calc(var(--u) * 16);
               display: flex; align-items: center; gap: calc(var(--u) * 12); }
.zeile-karte .icon { width: calc(var(--u) * 34); height: calc(var(--u) * 34); border-radius: calc(var(--u) * 9);
                     background: #fde8d8; display: grid; place-items: center; color: #d96a0f; font-size: calc(var(--u) * 17); flex: none; }
.zeile-karte .mitte { flex: 1; min-width: 0; }
.zeile-karte .name { font-size: calc(var(--u) * 16.5); font-weight: 600; }
.zeile-karte .mini { height: calc(var(--u) * 3.5); background: #e5e5ea; border-radius: 99px; margin-top: calc(var(--u) * 7); overflow: hidden; }
.zeile-karte .mini i { display: block; height: 100%; width: 0; background: #d96a0f; }
.zeile-karte .zeit { text-align: right; font-variant-numeric: tabular-nums; }
.zeile-karte .zeit b { display: block; color: #d96a0f; font-weight: 500; font-size: calc(var(--u) * 15); }
.zeile-karte .zeit span { font-size: calc(var(--u) * 11.5); color: #8a8a8e; }
.hinzu { margin-top: calc(var(--u) * 28); background: #fff; border-radius: calc(var(--u) * 22);
         padding: calc(var(--u) * 15) calc(var(--u) * 18); color: #d96a0f; font-size: calc(var(--u) * 16.5); }

/* ---------- Abschluss und Erinnerungsfrage ---------- */

.form { position: absolute; top: calc(var(--u) * 116); left: calc(var(--u) * 16); right: calc(var(--u) * 16); }
.form h5 { margin: calc(var(--u) * 18) 0 calc(var(--u) * 8) calc(var(--u) * 16); font-size: calc(var(--u) * 14); font-weight: 600; color: #8a8a8e; }
.gruppe { background: #fff; border-radius: calc(var(--u) * 22); padding: 0 calc(var(--u) * 16); }
.gruppe > div { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--u) * 14) 0;
                font-size: calc(var(--u) * 16.5); }
.gruppe > div + div { border-top: 1px solid #e6e6ea; }
.gruppe .leise { color: #8a8a8e; }
.sterne { display: flex; gap: calc(var(--u) * 2); }
.stern { background: none; border: 0; padding: calc(var(--u) * 2); font-size: calc(var(--u) * 20); color: #c7c7cc; cursor: pointer; line-height: 1; }
.stern.an { color: #f5b50a; }
.sichern { position: absolute; left: calc(var(--u) * 16); right: calc(var(--u) * 16); bottom: calc(var(--u) * 40);
           border: 0; border-radius: 999px; background: #d96a0f; color: #fff; cursor: pointer;
           font: 500 calc(var(--u) * 18) -apple-system, sans-serif; padding: calc(var(--u) * 16); }
.gesichert { position: absolute; inset: 0; z-index: 8; display: grid; place-content: center; justify-items: center;
             gap: calc(var(--u) * 10); background: rgba(242,242,247,.96); font-size: calc(var(--u) * 20); font-weight: 600; }
.gesichert svg { width: calc(var(--u) * 70); height: calc(var(--u) * 70); color: #34a853; }
.gesichert[hidden] { display: none !important; }

.dunkel { position: absolute; inset: 0; background: rgba(0,0,0,.28); }
.blatt { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: calc(var(--u) * 38) calc(var(--u) * 38) 0 0;
         padding: calc(var(--u) * 26) calc(var(--u) * 26) calc(var(--u) * 34); display: flex; flex-direction: column;
         align-items: center; text-align: center; gap: calc(var(--u) * 12); }
.blatt::before { content: ""; width: calc(var(--u) * 38); height: calc(var(--u) * 5); border-radius: 99px; background: #d1d1d6;
                 margin-top: calc(var(--u) * -14); margin-bottom: calc(var(--u) * 4); }
.blatt svg { width: calc(var(--u) * 38); height: calc(var(--u) * 38); color: #d96a0f; }
.blatt h5 { margin: 0; font-size: calc(var(--u) * 22); font-weight: 600; line-height: 1.2; }
.blatt p { margin: 0; font-size: calc(var(--u) * 16); color: #6b6b70; line-height: 1.38; }
.blatt small { font-size: calc(var(--u) * 12); color: #8a8a8e; line-height: 1.4; }
.blatt .ja { width: 100%; border: 0; border-radius: 999px; background: #d96a0f; color: #fff; cursor: pointer;
             font: 600 calc(var(--u) * 17) -apple-system, sans-serif; padding: calc(var(--u) * 15); margin-top: calc(var(--u) * 6); }
.blatt .nein { width: 100%; border: 0; border-radius: 999px; background: #f2f2f7; color: #d96a0f; cursor: pointer;
               font: 500 calc(var(--u) * 17) -apple-system, sans-serif; padding: calc(var(--u) * 15); }

/* ---------- Notenband ---------- */

.noten { background: #fff; }
.noten__kopf { position: absolute; top: 0; left: 0; width: 100%; z-index: 4; display: block; }
.noten__fenster { position: absolute; top: calc(100% * 118 / 874); left: 0; right: 0; bottom: 0; overflow: hidden; }
.noten__blatt { position: absolute; top: 0; left: 0; width: 100%; will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .noten__blatt { transition: transform .55s cubic-bezier(.2,.7,.2,1); }
}
.noten__blatt img { width: 100%; display: block; }
.noten__ende { margin: calc(var(--u) * 18) 0 0; text-align: center; font-size: calc(var(--u) * 13);
               color: #8a8a8e; letter-spacing: .02em; }
.noten__zeile { position: absolute; left: 0; right: 0; background: rgba(249,129,44,.09);
                box-shadow: inset calc(var(--u) * 4) 0 0 #f9812c; pointer-events: none; }
.noten__zeile[hidden] { display: none !important; }
.noten__zahl { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
               font-size: calc(var(--u) * 110); font-weight: 700; color: rgba(217,106,15,.85); font-variant-numeric: tabular-nums; }
.noten__zahl[hidden] { display: none !important; }
.tipp { position: absolute; z-index: 6; left: calc(var(--u) * 14); right: calc(var(--u) * 14); bottom: calc(var(--u) * 26);
        display: flex; align-items: center; gap: calc(var(--u) * 10); padding: calc(var(--u) * 9) calc(var(--u) * 12);
        border-radius: 999px; background: rgba(248,248,250,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
        box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 24) rgba(0,0,0,.16), inset 0 0 0 1px rgba(0,0,0,.05); }
.tipp .takt { margin-left: auto; font-size: calc(var(--u) * 14); font-weight: 600; color: #3a3a3e; font-variant-numeric: tabular-nums;
              padding-right: calc(var(--u) * 6); white-space: nowrap; }
.zurueck-flaeche { position: absolute; z-index: 6; top: calc(100% * 50 / 874); left: calc(100% * 12 / 402);
                   width: calc(100% * 48 / 402); height: calc(100% * 48 / 874); border-radius: 50%; border: 0;
                   background: transparent; cursor: pointer; }
.zurueck-flaeche:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- Unter der Buehne ---------- */

.demo__danach { margin-top: 64px; background: var(--bg-raised); border: 1px solid var(--line);
                border-radius: var(--r-lg); padding: 32px 30px; }
.demo__danach h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); margin-bottom: 10px; }
.demo__danach > p { color: var(--ink-muted); max-width: 62ch; }
.demo__danach .lp__ways { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.demo__danach .btn { white-space: normal; text-align: center; }

/* ---------- iPad im Querformat (#248) ----------

   Derselbe Aufbau, anderes Geraet: 1376 x 1032 Punkt, eine Einheit --u ist
   wieder ein Punkt. Die nachgebauten Bildschirme stehen in der 760 Punkt
   breiten Spalte, die die App auf dem iPad benutzt; ihre Innenmasse bleiben
   die vom iPhone, weil die App dort dieselben Abstaende hat. */

.geraete { display: inline-flex; gap: 2px; padding: 3px; margin: 0 0 22px; border-radius: 999px;
           background: var(--bg-raised); border: 1px solid var(--line); }
.geraete button { font: 600 14px/1 var(--font); color: var(--ink-muted); background: none; border: 0;
                  border-radius: 999px; padding: 9px 16px; cursor: pointer; }
.geraete button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.geraete button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 699px) { .geraete { display: none; } }

.demo__buehne.ipad { grid-template-columns: minmax(0, 1fr); gap: 34px; justify-items: stretch; }
.demo__buehne.ipad > div:first-child { width: 100%; }
.demo__buehne.ipad .kapitel { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
                              gap: 18px 34px; align-items: start; }
.demo__buehne.ipad .kapitel__fuss { grid-column: 1; }
@media (max-width: 820px) { .demo__buehne.ipad .kapitel { grid-template-columns: 1fr; } }

/* Hoch genug, dass das ganze iPad auf einen Laptop-Bildschirm passt. */
.handy.ipad { width: min(100%, calc((100vh - 150px) * 1376 / 1032 + 30px)); min-width: min(100%, 640px);
              margin: 0 auto; padding: 15px; border-radius: 34px; }
.handy.ipad .handy__schirm { aspect-ratio: 1376 / 1032; border-radius: 20px; }
.handy.ipad .handy__insel { display: none; }
.demo__buehne.ipad .steuer, .demo__buehne.ipad .handy__notiz { width: auto; max-width: 520px; }

.ipad .szene { --u: calc(100cqw / 1376); }
.ipad .blase { --u: calc(100cqw / 1376); font-size: calc(var(--u) * 19); padding: calc(var(--u) * 14) calc(var(--u) * 18);
               border-radius: calc(var(--u) * 16); }
.ipad .blase::after { border-width: calc(var(--u) * 11); }
.ipad .flaeche { border-radius: calc(var(--u) * 12); }

/* Statusleiste ueber den nachgebauten Bildschirmen. Die Aufnahmen und der
   Kopf des Notenbands bringen ihre eigene mit. */
.ipad-status { display: none; position: absolute; z-index: 0; top: 0; left: 0; right: 0; --u: calc(100cqw / 1376);
               height: calc(var(--u) * 26); padding: 0 calc(var(--u) * 22); align-items: center; justify-content: space-between;
               font: 600 calc(var(--u) * 13) -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; color: #111; }
.ipad-status span { font-weight: 500; margin-left: calc(var(--u) * 8); }
.ipad-status svg { height: calc(var(--u) * 12); width: auto; }
.ipad .handy__schirm[data-szene="session"] .ipad-status,
.ipad .handy__schirm[data-szene="abschluss"] .ipad-status,
.ipad .handy__schirm[data-szene="erinnerung"] .ipad-status { display: flex; }
.ipad .leiste-oben { display: none; }

/* Session und Abschluss: die Spalte in der Mitte. */
.ipad #sz-session, .ipad #sz-abschluss { left: calc(100% * 308 / 1376); right: calc(100% * 308 / 1376); }
.ipad #sz-session { background: linear-gradient(#fff, #fff) top / 100% calc(var(--u) * 482) no-repeat; }
.ipad .nb { top: calc(var(--u) * 31); }
.ipad .sess__kopf { top: calc(var(--u) * 100); }
.ipad .klick { top: calc(var(--u) * 417); }
.ipad .ablauf { top: calc(var(--u) * 492); }
.ipad .form { top: calc(var(--u) * 86); }
.ipad .sichern { bottom: calc(var(--u) * 30); }

/* Erinnerungsfrage: auf dem iPad ein Blatt in der Mitte statt von unten. */
.ipad .blatt { left: 50%; right: auto; bottom: auto; top: 50%; width: calc(var(--u) * 380);
               transform: translate(-50%, -50%); border-radius: calc(var(--u) * 28);
               padding: calc(var(--u) * 30) calc(var(--u) * 30) calc(var(--u) * 24); }

/* Notenband: das Band ueber die ganze Breite, der Kopf 100 Punkt hoch. */
.ipad .noten__fenster { top: calc(100% * 100 / 1032); }
.ipad .tipp { left: 50%; right: auto; width: calc(var(--u) * 460); transform: translateX(-50%); bottom: calc(var(--u) * 26); }
.ipad .zurueck-flaeche { top: calc(100% * 28 / 1032); left: calc(100% * 8 / 1376);
                         width: calc(100% * 46 / 1376); height: calc(100% * 46 / 1032); }
.ipad .noten__zahl { font-size: calc(var(--u) * 150); }