Style and position settings button

frontend/src/components/basics/BasicButtonDefinitions.ts

@@ -22,6 +22,10 @@ export const ButtonType = {
         textColor: "text-white",
         backgroundColor: "bg-gray-600  hover:bg-gray-800",
     },
+    LightButton: {
+        textColor: "text-gray-600",
+        backgroundColor: "bg-white  hover:bg-gray-300",
+    },
     PrimaryButton: {
         textColor: "text-gray-600",
         backgroundColor: "bg-blue-300 hover:bg-blue-400",

frontend/src/components/basics/CircularIconButton.tsx

@@ -6,6 +6,7 @@ import clsx from "clsx";
 type CircularIconButtonProps = {
     icon: LucideIcon;
     onClick: () => void;
+    buttonType?: ButtonType
     disabled?: boolean;
     className?: string;
 };
@@ -17,14 +18,16 @@ export default function CircularIconButton({
                                                onClick,
                                                icon: Icon,
                                                className = "",
+                                               buttonType = ButtonType.PrimaryButton,
                                                disabled = false,
                                                ...props
                                            }: CircularIconButtonProps) {
     return (
         <button
             className={clsx(
-                "flex-shrink-0 w-7 h-7 rounded-full text-white flex items-center justify-center shadow-sm",
-                ButtonType.PrimaryButton.backgroundColor,
+                "flex-shrink-0 w-7 h-7 rounded-full flex items-center justify-center shadow-sm",
+                buttonType.backgroundColor,
+                buttonType?.textColor,
                 className)}
             onClick={onClick}
             disabled={disabled}

frontend/src/components/basics/NumberCircle.tsx

@@ -12,18 +12,18 @@ type NumberCircleProps = React.HTMLAttributes<HTMLDivElement> & {
  * Can be used as a standalone indicator or as a drag handle.
  * Accepts any div attributes (e.g. `className`, `title`, `onClick`, or DnD listeners).
  */
-export function NumberCircle({ number, className, ...rest }: NumberCircleProps) {
+export function NumberCircle({number, className, ...rest}: NumberCircleProps) {
     return (
         <div
             {...rest}
-    className={clsx(
-        "flex-shrink-0 w-7 h-7 rounded-full bg-blue-300 text-white",
-        "flex items-center justify-center shadow-sm",
-        "cursor-default select-none",
-        className
-)}
->
-    {number}
-    </div>
-);
+            className={clsx(
+                "flex-shrink-0 w-7 h-7 rounded-full bg-blue-300 text-white",
+                "flex items-center justify-center shadow-sm",
+                "cursor-default select-none",
+                className
+            )}
+        >
+            {number}
+        </div>
+    );
 }

frontend/src/components/basics/NumberStepControl.tsx

@@ -50,6 +50,7 @@ export function NumberStepControl({
             className)}>
             <CircularIconButton
                 onClick={handleDecrease}
+                className={"text-white"}
                 icon={Minus}
             />
 
@@ -64,6 +65,7 @@ export function NumberStepControl({
 
             <CircularIconButton
                 onClick={handleIncrease}
+                className={"text-white"}
                 icon={Plus}
             />
 

frontend/src/components/basics/PageContentLayout.tsx

@@ -3,6 +3,8 @@ import React, {type ReactNode, useState} from "react";
 import clsx from "clsx";
 import {Settings} from "lucide-react";
 import {SettingsMenu} from "../SettingsMenu";
+import CircularIconButton from "./CircularIconButton.tsx";
+import {ButtonType} from "./BasicButtonDefinitions.ts";
 
 /**
  * Layout wrapper for the main content area of a page.
@@ -28,14 +30,13 @@ export default function PageContentLayout({
                 className
             )}
         >
-            {/* Settings Button (top-right) */}
-            <button
+            {/* Settings Button (top-right) - Sticky with higher z-index than header */}
+            <CircularIconButton
                 onClick={() => setIsMenuOpen(true)}
-                className="absolute top-4 right-4 p-2 rounded-full bg-white hover:bg-gray-200 shadow transition"
-                title="Einstellungen"
-            >
-                <Settings size={20}/>
-            </button>
+                buttonType={ButtonType.LightButton}
+                className="sticky top-4 float-right w-10 h-10 z-20 mb-[-40px]"
+                icon={Settings}
+            />
 
             {/* Page content */}
             {children}