Kachelgröße und Aufmacherhöhe gibt es jetzt auch in der App

Phase 1 des Einstellungs-Abgleichs. Beide standen bisher nur im Web,
obwohl sie nirgends hingehören, wo es die Sache nicht überall gibt.

Die Kachelgröße ist ein Faktor und keine Punktzahl: die Breiten von
Plakat und Querformat stehen in einem Verhältnis, das stimmen soll —
zwei getrennte Zahlen ließen sich gegeneinander verstellen, bis eine
Reihe zur anderen nicht mehr passt. Sie wirkt auf Startseite und
Mediathek, sonst sähe das eine anders aus als das andere.

Sie steht bei der Darstellung, nicht bei der Startseite: es geht ums
Aussehen, und sie gilt für beide Seiten. Die Aufmacherhöhe steht bei der
Startseite, direkt bei Quelle und Anzahl.

Voreingestellt ist genau das bisherige feste Verhalten — wer nichts
anfasst, merkt nichts. Gelesene Werte werden auf ihren Bereich begrenzt,
damit eine ältere Ablage keine Kachel über den halben Bildschirm ergibt.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Flixy/Views/Home/HeroCarousel.swift

@@ -65,6 +65,7 @@ struct HeroCarousel: View {
     @Environment(FlixySession.self) private var session
     @Environment(\.horizontalSizeClass) private var sizeClass
     @Environment(TopChrome.self) private var chrome
+    @Environment(HomeLayoutSettings.self) private var layout
 
     /// Wie weit der Aufmacher nach oben unter die Insel greift.
     ///
@@ -112,7 +113,7 @@ struct HeroCarousel: View {
             //
             // Auf einem schmalen Gerät nicht: dort ist der Aufmacher hochkant
             // und rechnet sich seine Höhe aus der Breite aus.
-            .modifier(HeroHeight(fraction: sizeClass == .compact ? nil : 0.82, extra: overlap))
+            .modifier(HeroHeight(fraction: sizeClass == .compact ? nil : layout.heroHeight, extra: overlap))
             // **Kein** Seitenverhältnis hier: der Aufmacher bringt sein
             // eigenes mit, und eines darüber legte ihn auf die Breite des
             // Inhaltsbereichs fest. Weil er nach links unter die Seitenleiste

Flixy/Views/Home/MediaRow.swift

@@ -8,12 +8,17 @@ struct MediaRow: View {
 
     @Environment(FlixySession.self) private var session
 
+    @Environment(HomeLayoutSettings.self) private var layout
+
     /// Breit genug, dass die übernächste Kachel angeschnitten ist — das zeigt,
     /// dass es weitergeht, ohne einen Pfeil dafür zu brauchen.
-    private let landscapeWidth: CGFloat = 220
+    private var landscapeWidth: CGFloat { 220 * layout.cardScale }
     /// Schmaler, weil hochkant: bei gleicher Höhe passen so mehr Plakate
     /// nebeneinander, und mehr Auswahl auf einen Blick ist genau der Zweck.
-    private let posterWidth: CGFloat = 116
+    ///
+    /// Beide mit demselben Faktor: ihr Verhältnis zueinander soll stimmen,
+    /// egal wie groß es insgesamt eingestellt ist.
+    private var posterWidth: CGFloat { 116 * layout.cardScale }
 
     var body: some View {
         VStack(alignment: .leading, spacing: FlixySpacing.regular) {

Flixy/Views/Library/LibraryView.swift

@@ -7,6 +7,9 @@ struct LibraryView: View {
     let library: MediaLibrary
 
     @Environment(FlixySession.self) private var session
+    /// Nur für die Kachelgröße. „layout“ heißt hier schon die Wahl
+    /// zwischen Raster und Liste.
+    @Environment(HomeLayoutSettings.self) private var sizing
     @AppStorage("flixy.library.layout") private var layout: LibraryLayout = .grid
     @Environment(\.horizontalSizeClass) private var sizeClass
 
@@ -79,7 +82,7 @@ struct LibraryView: View {
                 // Mindestbreite statt fester Spaltenzahl: dieselbe Ansicht
                 // ergibt auf dem iPhone drei und auf dem iPad sechs Spalten,
                 // ohne dass die Größenklasse abgefragt werden muss.
-                columns: [GridItem(.adaptive(minimum: 110), spacing: FlixySpacing.regular)],
+                columns: [GridItem(.adaptive(minimum: 110 * sizing.cardScale), spacing: FlixySpacing.regular)],
                 spacing: FlixySpacing.loose
             ) {
                 ForEach(items) { item in

Flixy/Views/Settings/AppearanceView.swift

@@ -9,6 +9,7 @@ import FlixyDesign
 /// stillschweigend zu verändern.
 struct AppearanceView: View {
     @Environment(FlixyTheme.self) private var theme
+    @Environment(HomeLayoutSettings.self) private var layout
     @State private var customHex: String = ""
     @State private var showsCustomField = false
 
@@ -29,6 +30,30 @@ struct AppearanceView: View {
                 Text("appearance.accentExplanation")
             }
 
+            // Die Kachelgröße steht bei der Darstellung und nicht bei der
+            // Startseite: sie gilt für Reihen **und** Mediathek, und es geht
+            // ums Aussehen, nicht um den Aufbau einer bestimmten Seite.
+            Section {
+                @Bindable var layout = layout
+
+                LabeledContent {
+                    Text(layout.cardScale.formatted(.percent.precision(.fractionLength(0))))
+                        .foregroundStyle(Color.flixyTextSecondary)
+                        .monospacedDigit()
+                } label: {
+                    Text("appearance.cardScale")
+                }
+                Slider(
+                    value: $layout.cardScale,
+                    in: HomeLayoutSettings.cardScaleRange,
+                    step: 0.1
+                )
+                .accessibilityLabel(Text("appearance.cardScale"))
+            } footer: {
+                Text("appearance.cardScaleExplanation")
+            }
+            .listRowBackground(Color.flixySurface)
+
             Section {
                 Toggle("appearance.customColor", isOn: $showsCustomField.animation(.snappy))
 

Flixy/Views/Settings/HomeLayoutView.swift

@@ -39,6 +39,23 @@ struct HomeLayoutView: View {
                         Text(count.formatted()).tag(count)
                     }
                 }
+
+                // Ein Regler und keine Auswahl aus festen Stufen: es gibt hier
+                // keinen richtigen Wert, nur den, bei dem die erste Reihe
+                // gerade so weit hereinlugt, wie man es mag.
+                LabeledContent {
+                    Text(layout.heroHeight.formatted(.percent.precision(.fractionLength(0))))
+                        .foregroundStyle(Color.flixyTextSecondary)
+                        .monospacedDigit()
+                } label: {
+                    Text("home.heroHeight")
+                }
+                Slider(
+                    value: $layout.heroHeight,
+                    in: HomeLayoutSettings.heroHeightRange,
+                    step: 0.05
+                )
+                .accessibilityLabel(Text("home.heroHeight"))
             } header: {
                 Text("home.hero")
             } footer: {