/* Nur die Startseite. Die gemeinsame Grundlage (Schriften,
   Farbwerte, Kopf- und Fußzeile) steht in site.css und wird davor geladen.

   Reihenfolge wie auf der Seite: erst das Intro, das über allem liegt, dann
   die Seite darunter von oben nach unten. */

/* ================= Intro =================

   Das Blau liegt als feste Ebene über der Seite und lüftet beim Scrollen weg.
   Das Wortzeichen darin fliegt in den leeren Platz in der Navigationspille
   und bleibt dort liegen. Es IST das Logo der Pille, deshalb wird das Intro
   am Ende nicht ausgeblendet. Die Maße kommen aus dem Skript in index.html. */

/* Scrollstrecke, die der Übergang verbraucht; das Skript setzt sie exakt. */
.spacer{height:105vh;}

.intro{
  position:fixed;
  inset:0;
  z-index:50;
  pointer-events:none;
  will-change:opacity;
}
.intro-bg{
  position:absolute;
  inset:0;
  background:var(--blue);
  will-change:opacity;
}
.fly{
  position:fixed;
  top:0;left:0;
  color:#fff;                 /* das Skript fährt die Farbe auf Tinte */
  will-change:transform;
  transform-origin:top left;
}
.fly svg{display:block;width:100%;height:auto;}

.tagline{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  text-align:center;
  color:#fff;
  font-family:"NN-F01","Archivo Black",sans-serif;
  font-weight:400;
  font-size:clamp(20px,3.6vw,54px);
  line-height:1.2;
  letter-spacing:.04em;
  word-spacing:.1em;
  white-space:nowrap;
  will-change:opacity,transform;
}

.scrollhint{
  position:fixed;
  left:50%;bottom:34px;
  transform:translateX(-50%);
  color:#fff;
  /* Vorher STL-Dots. Deren Buchstaben treppen innen diagonal, und bei 22 px
     mit weiter Sperrung lesen sich sechs davon als geneigte Zeile — obwohl
     die Schrift aufrecht steht und die slnt-Achse hier gar nichts tut
     (geprüft: -15, 0 und +15 rendern identisch). NN-F01 steht schon im
     Zweizeiler darüber, ist blockig aufrecht und macht aus dem Titelbild
     zwei Schriften statt drei. */
  font-family:"NN-F01","Archivo Black",sans-serif;
  font-size:clamp(15px,1.6vw,19px);
  letter-spacing:.25em;
  text-transform:uppercase;
  opacity:.85;
  will-change:opacity;
}
.scrollhint::after{
  content:"";
  display:block;
  width:1px;height:26px;
  margin:10px auto 0;
  background:currentColor;
  animation:hint 1.6s ease-in-out infinite;
  transform-origin:top;
}
@keyframes hint{0%,100%{transform:scaleY(.4);opacity:.4}50%{transform:scaleY(1);opacity:1}}

@media (prefers-reduced-motion:reduce){
  .scrollhint::after{animation:none;}
}

/* ================= Die Seite unter dem Intro ================= */

.page{
  position:relative;
  padding-top:var(--topbar-h);
  padding-bottom:14vh;
  min-height:100vh;
  background:var(--light);
}

/* ---------- Navigationspille ---------- */

.navwrap{
  display:flex;
  justify-content:center;
  margin-top:clamp(18px,3vh,34px);
  padding:0 20px;
  position:sticky;
  top:calc(var(--topbar-h) + 8px);
  z-index:20;
}
.navpill{
  display:flex;
  align-items:center;
  gap:clamp(20px,3vw,45px);
  background:var(--pill);
  border-radius:20px;
  padding:16px clamp(16px,1.6vw,20px);
}
/* Normalerweise leer: Hier landet das Wortzeichen aus dem Intro und bleibt
   liegen. Die Maße hält der Platz frei, das Skript misst sie aus. Nur wenn
   der Übergang ausfällt, setzt das Skript das Zeichen selbst hier hinein. */
.nav-logo{
  width:88px;
  height:27.5px;
  flex:0 0 auto;
}
.nav-logo svg{width:100%;height:100%;display:block;}
.nav-links{
  display:flex;
  gap:clamp(14px,1.6vw,23px);
  font-size:14px;
  white-space:nowrap;
}
.nav-links a{color:inherit;text-decoration:none;opacity:.9;transition:opacity .2s;}
.nav-links a:hover{opacity:1;}
.nav-cta{
  display:inline-block;
  background:var(--blue);
  color:#fff;
  border-radius:76px;
  padding:8px 14px;
  font-size:14px;
  line-height:normal;
  white-space:nowrap;
  text-decoration:none;
  transition:transform .15s ease, filter .2s ease;
}
.nav-cta:hover{transform:translateY(-1px);filter:brightness(1.08);}

/* Ein Sprungziel muss unter der Kopfzeile UND unter der Pille landen, sonst
   liegt die Überschrift, auf die man gesprungen ist, hinter der Pille.
   site.css setzt für jedes [id] nur die Kopfzeilenhöhe frei. */
#features,
#mcp{scroll-margin-top:calc(var(--topbar-h) + 8px + 65px + 24px);}

/* ---------- Schlagzeile und Aufmacherbild ---------- */

.headline{
  max-width:840px;
  margin:clamp(56px,9vh,96px) auto 0;
  padding:0 20px;
  text-align:center;
  font-family:"STL-Dots",sans-serif;
  font-size:clamp(22px,3.4vw,37px);
  font-variation-settings:"wght" 260, "wdth" 82, "slnt" 0;
  line-height:1.12;
  text-transform:uppercase;
  letter-spacing:.01em;
}

.hero img{width:100%;height:auto;display:block;}

/* ---------- Blauer Kreis ---------- */

.rounded-banner{
  margin:0 var(--gutter);
  padding:120px 0;
  border-radius:50%;
  background:var(--blue);
  color:var(--light);
  text-align:center;
}
.rounded-banner h3{
  font-family:"NN-F01",sans-serif;
  font-size:clamp(30px,5.2vw,72px);
}
.rounded-banner .stl-www{
  font-family:"STL-WWW",sans-serif;
  font-size:clamp(30px,5.2vw,172px);
}
.rounded-banner .classic{
  font-family:"STL-Classic",sans-serif;
  font-size:clamp(20px,2.1vw,34px);
}

/* ---------- Laufband ----------

   Das <marquee>-Element ist seit HTML5 abgekündigt und kennt
   prefers-reduced-motion nicht: Es lief auch dann, wenn jemand Bewegung
   abgestellt hat. Ersetzt durch zwei Kopien desselben Satzes, die um genau
   ihre halbe Gesamtbreite wandern. An der Nahtstelle steht dadurch wieder
   der Anfang, die Schleife ist nicht zu sehen.

   Ohne Bibliothek: Das wären zwanzig Zeilen CSS gegen eine Abhängigkeit, und
   die Seite lädt bewusst nichts von fremden Servern nach. */

.marquee{
  --marquee-gap:clamp(40px,6vw,120px);
  --marquee-duration:16s;
  overflow:hidden;
  margin:60px 0;
  font-family:"NN-F01",sans-serif;
  font-size:clamp(30px,5.2vw,72px);
  /* Weil immer Text über beiden Rändern steht, würde er dort hart abgeschnitten. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee-track{
  display:flex;
  width:max-content;
  animation:marquee var(--marquee-duration) linear infinite;
}
.marquee-run{
  padding-right:var(--marquee-gap);
  white-space:nowrap;
}
/* Wer mitlesen will, hält an. */
.marquee:hover .marquee-track{animation-play-state:paused;}

@keyframes marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

@media (prefers-reduced-motion:reduce){
  .marquee{
    overflow:visible;
    text-align:center;
    -webkit-mask-image:none;
    mask-image:none;
  }
  .marquee-track{animation:none;width:auto;}
  .marquee-run{padding-right:0;white-space:normal;}
  /* Die zweite Kopie trägt nichts bei, sobald nichts mehr wandert. */
  .marquee-run[aria-hidden="true"]{display:none;}
}

/* ================= Bänder =================

   Drei Abschnitte teilen sich dasselbe Zwölfspaltenraster. */

.features,
.band-outlines,
.devices,
.band-export,
.band-colour,
.band-metadata,
.section-mcp,
.band-price{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:16px;
  margin:120px var(--gutter);
}

/* Das erste Band stand doppelt im Stylesheet und hat aus der zweiten Fassung
   zusätzlich Innenabstand mitbekommen und sitzt dadurch schmaler als die
   beiden anderen. Bleibt so, damit sich am Bild nichts ändert; ohne diese
   Regel läge es bündig mit `.devices`. */
.features{
  align-items:start;
  padding:clamp(64px,11vh,140px) var(--gutter);
}

/* Überschrift über einem Band, quer über alle Spalten. */
.feature-headline{
  grid-column:1 / -1;
  padding:64px;
  text-align:center;
  font-family:"NN-F01",sans-serif;
  font-size:clamp(50px,7.2vw,172px);
}
.feature-artist{
  grid-column:1 / -1;
  padding:64px;
  text-align:center;
  font-family:"STL-BB",sans-serif;
  font-variation-settings:"wght" 320, "wdth" 75, "slnt" -15;
  font-size:clamp(50px,6.2vw,122px);
}

/* ---------- Die drei Kacheln: Draw, Space, Ship ---------- */

.feature{
  grid-column:span 4;
  padding:32px 16px;
  border-radius:16px;
  background:var(--pill);
  font-size:clamp(16px,1.4vw,22px);
}
.feature h2{
  margin-bottom:16px;
  text-align:center;
  color:var(--blue);
  font-family:"STL-Classic",sans-serif;
  font-size:clamp(28px,2.8vw,44px);
}



/* ---------- Geräte ---------- */

.device-xl{grid-column:span 7;}
.device{grid-column:span 5;}
.device img,
.device-xl img{
  width:100%;
  height:auto;
  display:block;
  border-radius:30px;
}

/* ================= Funktionskarten =================

   Vier Spalten, in die die vier Karten versetzt eingehängt sind. Der Versatz
   kam vorher aus sieben leeren <div class="spc">, die im Raster je eine Zelle
   verbraucht haben, unsichtbar im Markup und nicht zu lesen. Jetzt sagt jede
   Karte selbst, wo sie steht. */

.feature-cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin:0 var(--gutter);
}
.feature-card{
  text-align:center;
  font-family:"STL-Dots",sans-serif;
  font-size:clamp(22px,3.4vw,37px);
  font-variation-settings:"wght" 260, "wdth" 82, "slnt" 0;
}
.feature-card img{width:100%;height:auto;display:block;}

.card-tools   {grid-row:2; grid-column:1;}
.card-grid    {grid-row:2; grid-column:3;}
.card-specimen{grid-row:3; grid-column:2 / span 2;}
.card-spacing {grid-row:4; grid-column:4;}

/* ================= Farbe =================

   Zwei Kacheln statt drei, deshalb mittig eingehängt statt über die volle
   Breite verteilt. Mit Klassen und nicht mit :nth-of-type — das zählt alle
   <div> im Band, also auch die Überschrift, und hat dadurch die Überschrift
   verschoben statt der ersten Kachel. */

.pair-left {grid-column:3 / span 4;}
.pair-right{grid-column:7 / span 4;}

.colour-shot{
  grid-column:3 / span 8;
  margin:0 0 clamp(24px,4vh,48px);
}
.colour-shot img{
  width:100%;
  height:auto;
  display:block;
  border-radius:14px;
}
.colour-shot figcaption{
  max-width:46rem;
  margin:clamp(14px,2vh,22px) auto 0;
  text-align:center;
  font-size:clamp(14px,1.2vw,16px);
  line-height:1.5;
  color:var(--ink-soft);
  text-wrap:pretty;
}

/* ================= Angaben zur Schrift =================

   Das Blatt links ist leer, und genau darum geht es: Die Prüfung vor der
   Ausgabe merkt das und sagt es. Der Wortlaut im Hinweis ist der aus
   FontCheck.swift, Zeichen für Zeichen. */

.preflight{
  grid-column:8 / span 4;
  align-self:start;
  padding:28px 24px;
  border-radius:16px;
  background:var(--pill);
}
.preflight .label{
  display:block;
  margin-bottom:.9em;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--blue);
}
.preflight h3{
  font-size:clamp(17px,1.5vw,21px);
  line-height:1.3;
  font-weight:600;
  letter-spacing:-.01em;
}
.preflight p{
  margin-top:.55em;
  font-size:clamp(14px,1.2vw,16px);
  line-height:1.5;
  color:var(--ink-soft);
  text-wrap:pretty;
}
.preflight p + p{
  margin-top:1.1em;
  padding-top:1.1em;
  border-top:1px solid var(--rule);
}

/* ================= MCP =================

   Das Band erklärt sich über drei Kacheln wie das erste auch, mit einem
   Vorspann darüber und einem Mitschnitt darunter. Der Wortlaut kommt aus dem
   MCP-Blatt der App selbst, damit Seite und Programm dasselbe sagen. */

/* Vorspann über einem Band: schmaler als das Raster, damit die Zeilen nicht
   zu lang werden. */
.band-lede strong{
  font-weight:600;
  color:var(--ink);
}
.band-lede a{
  color:var(--blue);
  text-underline-offset:.18em;
  text-decoration-thickness:from-font;
}
.band-lede a:hover{text-decoration-thickness:2px;}

.band-lede{
  grid-column:3 / span 8;
  max-width:46rem;
  margin:0 auto clamp(20px,3vh,40px);
  text-align:center;
  font-size:clamp(17px,1.5vw,21px);
  line-height:1.55;
  color:var(--ink-soft);
  text-wrap:pretty;
}

/* Die dreizehn Werkzeugnamen stehen so da, wie ein Client sie sieht. */
.tool-list{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:clamp(12px,1vw,14px);
  line-height:2;
  word-spacing:.15em;
}

/* Der Nachsatz unter der Werkzeugliste: kleiner und ruhiger als der Kacheltext,
   weil er eine Einschränkung nennt und keine Ansage macht. */
.tool-note{
  margin-top:1em;
  font-size:.82em;
  line-height:1.5;
  color:var(--ink-soft);
  text-wrap:pretty;
}
/* Der einzige Fließtext-Verweis auf der Startseite. Er führt dorthin, wohin
   auch die App schickt, wenn sie den Export verweigert. */
.tool-note a{
  color:var(--blue);
  text-underline-offset:.18em;
  text-decoration-thickness:from-font;
}
.tool-note a:hover{text-decoration-thickness:2px;}

/* Der Beleg: ein Mitschnitt und das, was dabei herauskam. */
.mcp-proof{
  grid-column:2 / span 10;
  margin:clamp(36px,6vh,72px) 0 0;
  /* Ohne das bläht der Mitschnitt die Rasterspalte auf: Rasterelemente
     verweigern von sich aus, schmaler als ihr Inhalt zu werden, und
     `white-space:pre` kennt keinen Umbruch. Dann schiebt eine einzige Zeile
     die ganze Seite in die Breite, statt dass die Konsole selbst scrollt. */
  min-width:0;
}
.mcp-console{
  padding:clamp(18px,2.4vw,30px);
  border-radius:16px;
  background:var(--ink);
  overflow-x:auto;
}
.mcp-console pre{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:clamp(11px,1vw,14px);
  line-height:1.8;
  color:#d8d8dc;
  white-space:pre;
}
.mcp-console .call{color:#8f9bff;}   /* was der Assistent angefordert hat */
.mcp-console .out {color:#8e8e95;}   /* was die App geantwortet hat */

.mcp-proof img{
  width:100%;
  height:auto;
  display:block;
  margin-top:clamp(14px,2vh,24px);
  padding:clamp(20px,3vw,44px);
  border-radius:16px;
  background:#fff;
}
.tool-note code,
.mcp-proof figcaption code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  /* Dieselbe Punktgröße wirkt in einer Schreibmaschinenschrift größer. */
  font-size:.92em;
}
.mcp-proof figcaption{
  max-width:46rem;
  margin:clamp(12px,2vh,20px) auto 0;
  text-align:center;
  font-size:clamp(14px,1.2vw,16px);
  line-height:1.5;
  color:var(--ink-soft);
  text-wrap:pretty;
}

/* ================= Von Zellen zu Konturen =================

   Das eine Bild, das erklärt, warum aus einem Raster eine Schrift wird und
   kein Bitmap. Nebeneinander und nicht überblendet: Bei einem Vergleich will
   man beide Zustände gleichzeitig sehen und die Ecken direkt halten können.
   Beide Ausschnitte sind deckungsgleich beschnitten. Jede Abweichung würde
   einen Unterschied vortäuschen, den es nicht gibt. */

.compare{
  grid-column:4 / span 6;
  margin:0;
}
.compare-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(14px,2vw,28px);
}
.compare-pair figure{margin:0;}
.compare-pair img{
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
}
.compare-pair figcaption{
  margin-top:clamp(8px,1.4vh,14px);
  text-align:center;
  font-size:clamp(11px,1.1vw,13px);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.compare > figcaption{
  max-width:42rem;
  margin:clamp(18px,3vh,30px) auto 0;
  text-align:center;
  font-size:clamp(14px,1.2vw,16px);
  line-height:1.5;
  color:var(--ink-soft);
  text-wrap:pretty;
}

/* ================= Ausgabeformate =================

   Bild und Liste nebeneinander: Das Blatt zeigt, dass es die Auswahl wirklich
   gibt, die Liste sagt, wofür die Formate da sind. Der Wortlaut kommt aus der
   Kaufseite und aus export_font in MCPService.swift. */

/* Ein Bildschirmabzug in den linken fünf Spalten, Text rechts daneben.
   Zwei Bänder nutzen das: Ausgabeformate und Angaben zur Schrift. */
.band-shot{
  grid-column:2 / span 5;
  margin:0;
}
.band-shot img{
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
}

.formats{
  grid-column:8 / span 4;
  margin:0;
}
.formats dt{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:clamp(12px,1.05vw,14px);
  letter-spacing:.02em;
}
.formats dd{
  margin:.3em 0 1.15em;
  font-size:clamp(14px,1.2vw,16px);
  line-height:1.5;
  color:var(--ink-soft);
  text-wrap:pretty;
}
.formats dd:last-child{margin-bottom:0;}

/* ================= Preis =================

   Der Abschluss der Seite. Die Zahl steht ausdrücklich für den Mac: Auf
   iPhone und iPad setzt der App Store den Preis je Land selbst fest, eine
   Zahl wäre dort in jedem zweiten Land falsch. Dieselbe Überlegung steht
   als Kommentar auf buy/index.html. */

.band-cta{
  grid-column:1 / -1;
  justify-self:center;
  margin-top:clamp(20px,3vh,36px);
  padding:.85em 1.6em;
  border-radius:76px;
  background:var(--blue);
  color:#fff;
  font-size:clamp(16px,1.5vw,20px);
  line-height:normal;
  text-decoration:none;
  white-space:nowrap;
  transition:transform .15s ease, filter .2s ease;
}
.band-cta:hover{transform:translateY(-1px);filter:brightness(1.08);}

/* Mac-Knopf und App-Store-Badge nebeneinander, auf schmalen Schirmen
   untereinander. Der Badge bringt seinen Freiraum aus site.css mit. */
.band-actions{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:20px 32px;
  margin-top:clamp(20px,3vh,36px);
}
.band-actions .band-cta{margin-top:0;}

/* ================= Schmale Schirme =================

   Neu, kein Aufräumen: Ohne diesen Block standen die Kacheln auch auf dem
   Telefon zu viert nebeneinander, gut 88 Pixel breit. Die Bänder stapeln
   hier nur; Kreis und Schriftgrößen brauchen noch einen eigenen Durchgang. */

@media (max-width:860px){
  .features,
  .band-outlines,
  .devices,
  .band-export,
  .band-colour,
  .band-metadata,
  .section-mcp,
  .band-price{
    grid-template-columns:1fr;
    margin:64px var(--gutter);
  }
  .features{padding:32px 0;}
  .feature,
  .pair-left,
  .pair-right,
  .colour-shot,
  .device,
  .device-xl,
  .band-lede,
  .mcp-proof,
  .compare,
  .band-shot,
  .formats,
  .preflight{grid-column:1;}

  .feature-cards{
    grid-template-columns:1fr;
    gap:48px;
  }
  .card-tools,
  .card-grid,
  .card-specimen,
  .card-spacing{grid-row:auto; grid-column:1;}

  .feature-headline,
  .feature-artist{padding:32px 0;}

  /* Mit drei Verweisen braucht die Pille 460 px und hat 350. Der Knopf geht,
     nicht die Verweise: „Draw a new font" führt auf downloads/, und genau
     dorthin führt auch das DOWNLOAD in der Kopfzeile, das ohnehin die ganze
     Zeit oben steht. Der Logo-Platz muss bleiben, dort landet das
     Wortzeichen aus dem Intro. */
  .navpill{gap:16px;}
  .nav-cta{display:none;}
  .nav-links{gap:12px;font-size:13px;}
}

/* Unter den beiden Gerätebildern, über die ganze Breite und mittig: Das Band
   zeigt die App auf dem iPhone, und dort gehört der Weg dorthin hin. */
.devices .store-badge{
  grid-column:1 / -1;
  justify-self:center;
  margin-top:clamp(12px,2vh,24px);
}