/* produkt.css — die seiteneigenen Regeln der Produktseite (S3, 12.09.2026).
 *
 * WARUM EINE EIGENE DATEI. Der Chrome-Bau (scripts/chrome/build_chrome.py)
 * schreibt den Mittelblock jeder Seite neu; eine Zeile darin ueberlebte den
 * naechsten Lauf nicht. Diese Datei haengt HINTER <!-- chrome:mittel:ende -->
 * in product.html und de/product.html, so wie download.css es macht.
 *
 * WARUM main.produkt UND NICHT body[data-page]. Die Produktseite ist eine
 * Neubauseite (NEUBAU in build_chrome.py) und laedt die Altschicht nicht.
 * tests/test_website_design.py koppelt seit dem 01.09.2026 den Marker
 * `<body data-page>` an premium.css: wer den Marker traegt, muss die
 * Schicht laden, und umgekehrt. Ein data-page hier hiesse also, die
 * Altschicht zurueckzuholen. Eingegrenzt wird deshalb auf main.produkt —
 * wie interview.html mit main.landing; in .kopf und .fuss schreibt diese
 * Datei damit auch nichts.
 *
 * NICHTS HIER IST ERFUNDEN. Jede Regel ist aus einem Bauteil des Konzepts
 * (bauteile.css) oder aus boxen.css zusammengesetzt; die Quelle steht je
 * Regel dabei. Keine eigenen Farbwerte — nur Tokens der Palette 2026-09. */

/* Bild oben (box--bildbreit): Der Sphaerenabstand der Ueberschrift
   (.box h3 { margin-top: 58px }) gilt der Kreisgrafik oben rechts. Unter
   einem Bild, das die volle Breite hat, gibt es die Sphaere nicht. */
main.produkt .box--bildbreit h3 { margin-top: 0; }
main.produkt .box--bildbreit picture { display: block; }

/* HIER STAND DIE REGEL FUER DIE SCHIRMBILDER IN DEN KARTEN.
   Sie ist am 20.09.2026 ohne Gegenstand geworden: Arpad, mit einem Bild
   dieser Seite, "hier die screenshots raus aus den Karten". Die sieben
   <picture>-Bloecke sind aus web/product.html und web/de/product.html
   entfernt; `.box--bildbreit` traegt jetzt nur noch Text.

   Die Klasse bleibt an den Karten, weil ihre zweite Wirkung weiter
   gebraucht wird: `main.produkt .box--bildbreit h3 { margin-top: 0 }`
   nimmt den Abstand weg, den `.box h3` fuer die Kreisgrafik oben rechts
   vorsieht -- die es auf diesen Karten nicht gibt.

   Eine tote Regel stehen zu lassen waere billiger gewesen und haette
   beim naechsten Umbau jemanden raten lassen, wofuer sie da ist. */

/* Der Anriss der alten Karteikarte, wieder als eigene Zeile. Auf about.html
   stand er als .fall-karte__anriss AUF der Karte und im Panel darunter ein
   zweites Mal — beides zusammen in EINEM Absatz las sich wie ein Stottern
   (Gegenlesung 12.09.2026: „A tool whose value is the archive has to store."
   zweimal hintereinander). Getrennt steht derselbe Wortlaut wieder so da wie
   vorher. Mass: die Reiterzeile des Konzepts (.tab-btn span: 13 px, Zeile
   1.45); Breite und Abstand von .box__text bzw. .box h3 (boxen.css). */
main.produkt .box__anriss { max-width: 500px; margin: 0 0 14px; font-size: 13px; line-height: 1.45; }

/* Die Kennzahl „6,5": Mass von .proof-item strong (31 px, -.04em). Die Box
   traegt .box--klein, damit die Ueberschrift darunter (29 px) die Zahl nicht
   ueberragt — mit der grossen .box h3 (41 px) las sich die Kennzahl wie eine
   Beschriftung ihrer eigenen Ueberschrift (Gegenlesung 12.09.2026). */
main.produkt .box__zahl { display: block; margin-bottom: 8px; font-size: 31px; letter-spacing: -.04em; font-weight: 800; }

/* Vorzeile in der Box („Vorher · Waehrend · Danach"): .moment-card .number
   des Konzepts, hier fuer .box — dieselben Werte. */
main.produkt .box .number { color: var(--emerald); font-size: 13px; font-weight: 850; letter-spacing: .12em; }
main.produkt .box--ink .number { color: #48dcae; }

/* Listenboxen (Vorher/Waehrend/Danach): drei bis vier Haken-Zeilen sollen
   ganz stehen; --box-zeilen ist der Regler von boxen.css. */
main.produkt .box--liste { --box-zeilen: 9; }
main.produkt .box__text .feature-list { padding-top: 0; border-top: 0; }

/* Die Stichpunkte „Ebenfalls an Bord" als Kapseln: Zeile aus
   .download-options des Konzepts (flex, wrap, gap 10px). */
main.produkt .produkt__chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }

/* FAQ: die Elementregeln des Konzepts fuer details/summary, die bauteile.css
   nicht traegt (K1, Regel 2) — hier unter .faq-list eingegrenzt, Werte
   woertlich aus docs/konzept/BAUTEILE.md, Geruest 8. */
main.produkt .faq-list details { border-bottom: 1px solid var(--line); }
main.produkt .faq-list summary { position: relative; padding: 24px 44px 24px 0; font-size: 17px; font-weight: 800; list-style: none; cursor: pointer; }
main.produkt .faq-list summary::-webkit-details-marker { display: none; }
main.produkt .faq-list summary::after { position: absolute; right: 4px; top: 24px; color: var(--emerald-dark); font-size: 24px; line-height: 1; content: "+"; }
main.produkt .faq-list details[open] summary::after { content: "−"; }
main.produkt .faq-list details p { padding: 0 44px 23px 0; margin-bottom: 0; font-size: 15px; }

/* Das Band am Fuss traegt eine Ueberschrift (die h2 der alten About-Seite,
   Vertrag test_bestandsseiten_w9), im Mass von .cta-band strong. */
main.produkt .cta-band h2 { margin: 0; color: var(--white); font-size: clamp(20px, 2.5vw, 29px); letter-spacing: -.03em; line-height: 1.2; }
main.produkt .cta-band .hero-actions { flex-shrink: 0; }

/* Arpad: kein Wort mitten gebrochen. thalassa.css trennt deutsche
   Ueberschriften automatisch (:lang(de) h1–h3 { hyphens: auto }); hier
   wird nur DAS aufgehoben. overflow-wrap und word-break bleiben bei
   boxen.css (Boxen) und thalassa.css (Rest) — eine Regel, ein Ort;
   gemessen wird die Wirkung in tests/test_s3_gerendert.py. */
main.produkt h1, main.produkt h2, main.produkt h3 { hyphens: manual; }

@media (max-width: 760px) {
  main.produkt .cta-band .hero-actions { width: 100%; }
}

/* Unter 900 px senkt boxen.css den Titelabstand auf 44 px, die Sphaere
   (.moment-art, .box__bild: 170 px, top -44 px) reicht aber 126 px in die
   Box — die Kreisgrafik lag ueber dem Titel („Kein Notizwerk…", gemessen
   12.09.2026 bei 390 px). Der Titel beginnt deshalb erst unter der Sphaere:
   170 - 44 - 26 (Innenabstand) = 100 px. Nur in Boxen, die eine Sphaere
   tragen; die Zahl ist die Geometrie der Sphaere, keine neue. */
@media (max-width: 900px) {
  main.produkt .moment-art ~ h3, main.produkt .box__bild ~ h3 { margin-top: 100px; }
}
/* Ueber 900 px steht der Titel neben dem unteren Bogen der Sphaere. Das
   Konzept begrenzt ihn auf 480 px; der Kreisrand liegt in der ersten
   Titelzeile aber schon bei 467 px (Mittelpunkt 568/41, Radius 85, Zeile
   ab y = 93), und „Not a general AI assistant" (479 px) lief mit der Ecke
   hinein — gemessen 12.09.2026. 440 px halten jede Zeile frei. */
main.produkt .moment-art ~ h3, main.produkt .box__bild ~ h3 { max-width: 440px; }
/* In einer Drittelbox (401 px) reicht der Kreisrand in der ersten
   Titelzeile bis 257 px — „Gesprächsmodi" allein ist 280 px (gemessen
   12.09.2026). Dort beginnt der Titel erst unter der Sphaere:
   170 - 44 - 34 = 92 px. Nur ueber 900 px — darunter gilt die Regel oben
   (100 px), die diese hier sonst durch ihre Spezifitaet verdraengte. */
@media (min-width: 901px) {
  main.produkt .box--drittel .moment-art ~ h3 { margin-top: 92px; }
}