Drop the draft notice and give the Moldovan legal pages proper margins

The legal pages put their width limit on the section itself, which shrank the section and its container along with it: the text sat 32 px from the window edge while the header's brand stands at 100 px. The section now stays full width and only the content column is limited, so title and text share the header's edge on every device. Both pages open with a pale band - label, title, lead - in the colour of the offers section, followed by one row per point: heading on the left, text on the right, separated by fine rules, stacked on a phone. The footer no longer carries "Gestaltungsentwurf · Beispieltexte & illustratives KI-Bild". Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-09-15 06:40:29 +02:00
1 parent 1973bd10ef
commit 860bed9199
@@ -396,7 +396,6 @@ $fuss = [
                    ['id' => 'fuss-rechtliches', 'type' => 'legal', 'props' => ['label' => 'Rechtliches'],
                        'style' => ['desktop' => ['fontSize' => '12px', 'justifyContent' => 'flex-end', 'gap' => '4px'], 'mobile' => ['justifyContent' => 'flex-start']],
                        'css' => "& a:hover{text-decoration:underline}"],
-                    $text('fuss-hinweis-text', 'Gestaltungsentwurf · Beispieltexte & illustratives KI-Bild', ['desktop' => ['fontSize' => '12px', 'textAlign' => 'right', 'margin' => ['top' => '6px', 'bottom' => '0px']], 'mobile' => ['fontSize' => '11px', 'textAlign' => 'left']]),
                ]),
            ], '20px', ['justifyContent' => 'space-between', 'alignItems' => 'flex-start', 'borderWidth' => $nurOben('1px'), 'borderStyle' => 'solid', 'borderColor' => '#e7ebe4', 'padding' => ['top' => '18px', 'bottom' => '18px'], 'color' => '#78817b'], ['flexDirection' => 'column', 'gap' => '7px']),
        ], [
@@ -415,33 +414,59 @@ echo "Kopf- und Fußbereich angelegt\n";
 * Stellen, die nur die Tagespflege selbst beantworten kann, stehen als „NOCH ZU PRÜFEN“ im Text,
 * statt erfunden zu werden – eine falsche Registerangabe ist schlimmer als eine fehlende.
 */
-$rechtsseite = static function (string $praefix, string $label, string $titel, string $vorspann, array $absaetze) use ($abschnitt, $kleinzeile, $heading, $text, $serif, $fliess, $emGruen): array {
-    $kinder = [
-        $kleinzeile($praefix.'-label', $label),
-        $heading($praefix.'-h1', $titel, 1, [
-            'desktop' => [...$serif, 'fontSize' => '53px', 'margin' => ['bottom' => '25px']],
-            'tablet' => ['fontSize' => '42px'],
-            'mobile' => ['fontSize' => '38px'],
-        ], $emGruen),
-        $text($praefix.'-vorspann', $vorspann, [
-            'desktop' => ['fontSize' => '20px', 'lineHeight' => 1.7, 'color' => '@tinte', 'margin' => ['bottom' => '34px']],
-            'mobile' => ['fontSize' => '18px'],
-        ]),
-    ];
+$rechtsseite = static function (string $praefix, string $label, string $titel, string $vorspann, array $absaetze) use ($section, $abschnitt, $row, $column, $kleinzeile, $heading, $text, $serif, $emGruen, $nurOben, $nurUnten): array {
+    // Oben ein ruhiges Band in der Farbe des Angebotsbereichs: Kleinzeile, Titel, Vorspann.
+    // Die Sektion bleibt voll breit; die Breite begrenzt erst der Inhalt darin. So steht der
+    // Text auf derselben Kante wie Marke und Menü im Kopf, statt am Fensterrand zu kleben.
+    $kopf = $section($praefix.'-kopf', [
+        [...$kleinzeile($praefix.'-label', $label), 'layout' => ['effects' => ['entrance' => 'fade', 'delay' => 'none']]],
+        [...$heading($praefix.'-h1', $titel, 1, [
+            'desktop' => [...$serif, 'fontSize' => '59px', 'margin' => ['bottom' => '22px']],
+            'tablet' => ['fontSize' => '46px'],
+            'mobile' => ['fontSize' => '40px', 'margin' => ['bottom' => '16px']],
+        ], $emGruen), 'layout' => ['effects' => ['entrance' => 'rise', 'delay' => 'short']]],
+        [...$text($praefix.'-vorspann', $vorspann, [
+            'desktop' => ['maxWidth' => '640px', 'fontSize' => '19px', 'lineHeight' => 1.7, 'color' => '@gedaempft', 'margin' => ['bottom' => '0px']],
+            'mobile' => ['fontSize' => '17px'],
+        ]), 'layout' => ['effects' => ['entrance' => 'rise', 'delay' => 'medium']]],
+    ], [
+        'desktop' => ['backgroundColor' => '@blass', 'borderWidth' => $nurUnten('1px'), 'borderStyle' => 'solid', 'borderColor' => '@linie', 'padding' => ['top' => '84px', 'bottom' => '72px']],
+        'tablet' => ['padding' => ['top' => '64px', 'bottom' => '56px']],
+        'mobile' => ['padding' => ['top' => '48px', 'bottom' => '40px']],
+    ]);
+
+    // Darunter jeder Punkt als eigene Zeile: Zwischentitel links, Text rechts, getrennt durch
+    // eine feine Linie. Auf dem Telefon untereinander.
+    $punkte = [];
    foreach ($absaetze as $i => [$zwischentitel, $inhalt]) {
-        if ('' !== $zwischentitel) {
-            $kinder[] = $heading($praefix.'-h2-'.$i, $zwischentitel, 2, [
-                'desktop' => ['fontFamily' => 'body', 'fontSize' => '19px', 'fontWeight' => '700', 'letterSpacing' => '-0.02em', 'lineHeight' => 1.35, 'margin' => ['top' => '34px', 'bottom' => '12px']],
-            ]);
-        }
-        $kinder[] = $text($praefix.'-p-'.$i, $inhalt, $fliess);
+        $punkte[] = $row($praefix.'-punkt-'.$i, [
+            $column($praefix.'-punkt-'.$i.'-titel', '' === $zwischentitel ? [] : [
+                $heading($praefix.'-h2-'.$i, $zwischentitel, 2, [
+                    'desktop' => ['fontFamily' => 'body', 'fontSize' => '17px', 'fontWeight' => '700', 'letterSpacing' => '-0.01em', 'lineHeight' => 1.5, 'color' => '@tinte', 'margin' => ['bottom' => '0px']],
+                ]),
+            ], [
+                'desktop' => ['flexBasis' => '280px', 'flexShrink' => 0],
+                'tablet' => ['flexBasis' => '220px'],
+                'mobile' => ['flexBasis' => 'auto'],
+            ]),
+            $column($praefix.'-punkt-'.$i.'-text', [
+                $text($praefix.'-p-'.$i, $inhalt, [
+                    'desktop' => ['fontSize' => '16px', 'lineHeight' => 1.75, 'color' => '@gedaempft', 'margin' => ['bottom' => '0px']],
+                ], "& a{color:#2e7595;text-decoration:underline;text-underline-offset:3px}\n& a:hover{color:#245e79}"),
+            ], ['desktop' => ['flexGrow' => 1, 'flexBasis' => '0', 'minWidth' => '0']]),
+        ], [], [
+            'desktop' => ['display' => 'flex', 'alignItems' => 'flex-start', 'gap' => '48px', 'margin' => ['top' => '0px'],
+                'borderWidth' => $nurOben('1px'), 'borderStyle' => 'solid', 'borderColor' => '@linie', 'padding' => ['top' => '28px', 'bottom' => '28px']],
+            'tablet' => ['gap' => '32px'],
+            'mobile' => ['flexDirection' => 'column', 'gap' => '8px', 'padding' => ['top' => '22px', 'bottom' => '22px']],
+        ]);
    }

-    $kinder[0]['layout'] = ['effects' => ['entrance' => 'fade', 'delay' => 'none']];
-    $kinder[1]['layout'] = ['effects' => ['entrance' => 'rise', 'delay' => 'short']];
-    $kinder[2]['layout'] = ['effects' => ['entrance' => 'rise', 'delay' => 'medium']];
+    $inhalt = $abschnitt($praefix, [
+        $column($praefix.'-inhalt', $punkte, ['desktop' => ['maxWidth' => '960px']]),
+    ], ['desktop' => ['padding' => ['top' => '56px', 'bottom' => '100px']], 'mobile' => ['padding' => ['top' => '28px', 'bottom' => '61px']]]);

-    return $abschnitt($praefix, $kinder, ['desktop' => ['maxWidth' => '820px', 'padding' => ['top' => '80px', 'bottom' => '100px']], 'mobile' => ['padding' => ['top' => '52px', 'bottom' => '61px']]]);
+    return [$kopf, $inhalt];
 };

 // ---------------------------------------------------------------------------------------------
@@ -798,7 +823,7 @@ $anlegen('impressum', [
    'schemaVersion' => $SCHEMA, 'title' => 'Impressum',
    'description' => 'Anbieterangaben der Tagespflege Jacqueline Moldovan in Baden-Baden.',
    'blocks' => [
-        $rechtsseite('impressum', 'Rechtliche Angaben', 'Impressum', 'Angaben gemäß § 5 DDG und § 18 Abs. 2 MStV.', [
+        ...$rechtsseite('impressum', 'Rechtliche Angaben', 'Impressum', 'Angaben gemäß § 5 DDG und § 18 Abs. 2 MStV.', [
            ['Anbieterin', "Tagespflege Jacqueline Moldovan<br>Fremersbergstraße 75<br>76530 Baden-Baden<br><br>Vertreten durch Jacqueline Moldovan."],
            ['Kontakt', "Telefon: <a href=\"$telHref\">$telefon</a><br>E-Mail: <a href=\"mailto:$mail\">$mail</a>"],
            ['Rechtsform und Register', 'NOCH ZU PRÜFEN: Rechtsform, Registergericht und Registernummer ergänzen, sofern eine Eintragung besteht.'],
@@ -816,7 +841,7 @@ $anlegen('datenschutz', [
    'schemaVersion' => $SCHEMA, 'title' => 'Datenschutz',
    'description' => 'Wie die Tagespflege Jacqueline Moldovan Daten beim Besuch der Website und bei einer Kontaktaufnahme verarbeitet.',
    'blocks' => [
-        $rechtsseite('datenschutz', 'Ihre Daten', 'Datenschutzhinweise', 'Hier erfahren Sie, welche Daten beim Besuch dieser Website und bei Ihrer Kontaktaufnahme verarbeitet werden – und welche Rechte Sie haben.', [
+        ...$rechtsseite('datenschutz', 'Ihre Daten', 'Datenschutzhinweise', 'Hier erfahren Sie, welche Daten beim Besuch dieser Website und bei Ihrer Kontaktaufnahme verarbeitet werden – und welche Rechte Sie haben.', [
            ['1. Verantwortliche', "Tagespflege Jacqueline Moldovan, Fremersbergstraße 75, 76530 Baden-Baden. Telefon <a href=\"$telHref\">$telefon</a>, E-Mail <a href=\"mailto:$mail\">$mail</a>.<br><br>NOCH ZU PRÜFEN: Ob eine Datenschutzbeauftragte oder ein Datenschutzbeauftragter zu benennen ist, hängt von der Zahl der ständig mit der Verarbeitung beschäftigten Personen ab; gegebenenfalls hier die Kontaktdaten ergänzen."],
            ['2. Besuch dieser Website', 'Beim Aufruf verarbeitet der Hostingdienst technisch erforderliche Verbindungsdaten: IP-Adresse, Zeitpunkt, angeforderte Adresse, Browserangaben und HTTP-Status. Das dient der sicheren Bereitstellung und der Fehlersuche. Rechtsgrundlage ist unser berechtigtes Interesse an einem störungsfreien Betrieb, Art. 6 Abs. 1 lit. f DSGVO.<br><br>NOCH ZU PRÜFEN: Hostinganbieter benennen, Auftragsverarbeitungsvertrag abschließen, Verarbeitungsländer und die konkrete Speicherdauer der Serverprotokolle eintragen.'],
            ['3. Cookies, Schriften, externe Dienste', 'Diese Website setzt keine Analyse- oder Werbecookies. Bilder, Schriften und Gestaltung kommen vom eigenen Server; es werden keine Karten, Videos oder Schriften von Dritten nachgeladen. Deshalb gibt es auch keinen Einwilligungsdialog.'],