Eingefügter Text(20260902-110723).txt
Dokument

Eingefügter Text(20260902-111512).txt
Dokument




Die Zentrierung ist weg und Druckerei & Digitaldruck in Ganderkese ist einzeilig. Dann sind die roten Aufzählungen blau anstatt rot und sollte etwas größer sein.

Mittwoch 15:04
Da sind striche unter der Aufzählung 5-farb Digitaldruck

Macht den ABstand nicht kleiner

Die Änderung greift nicht

gestern 09:56
Sektglas Kerstin 90.eps
Datei
Kurze andere Aufgabe. Visualisierung Sektglas gelasert. EPS DAtei bitte milchig gelasert auf Sektglas anzeigen. Glasmaße Oben Öffnung 6 cm Durchmesser Sektkelch höhe 14cm. Höhe Komplettglas 21,5 cm. EPS DAte soll in 5 cm von oberen Rand platziert werden.

Generiertes Bild: Lasergravur-Spezifikation für Sektglas

Nicht fun 4print sondern JPG DAtei visualisieren.

Generiertes Bild: Sektglas mit milchiger Herzgravur

Schatten ist noch zu schwach.

Generiertes Bild: Druckerei-Leistungen im Kartenraster

Generiertes Bild: Professionelle Druckerei-Produkte im Raster

Generiertes Bild: Druckvielfalt im übersichtlichen Produktgrid

Generiertes Bild: Druckservice-Katalog mit vielfältigen Produkten

Generiertes Bild: Druckvielfalt im Überblick

Ja. Ich habe die 15 Einzelbilder als eigenes Set aus dem freigegebenen Entwurf angelegt.

Die Bilder liegen bereits in einheitlichem 16:9-Format mit 1200 × 675 px vor. Damit funktionieren sie sauber mit object-fit: cover.

Für die Startseite würde ich die runde Kalkulations-Kachel nicht als Bild, sondern direkt in HTML/CSS bauen. Dadurch bleibt der Text scharf, responsiv und die komplette Fläche kann auf eure Softcover-Kalkulation verlinken.
Angepasstes HTML

Die Reihenfolge bleibt 4 – 4 – 3 – 4. In Reihe 3 setzen wir die runde Kalkulations-Kachel zusätzlich mittig zwischen die Produktkacheln.

<section class="f4p-section f4p-products">

    <h2 class="f4p-heading">Was können wir für Sie tun?</h2>

    <p class="f4p-lead">
        Entdecken Sie unsere Produkte und Leistungen.
    </p>


    <!-- =====================================================
         REIHE 1
         ===================================================== -->

    <div class="f4p-product-row f4p-product-row-4">

        <!-- Geschäftsdrucksachen -->
        <div class="f4p-product-card">
            <a href="/geschaeftsdrucksachen">

                <img src="/images/produkte/geschaeftsdrucksachen.jpg"
                     alt="Geschäftsdrucksachen von fun4print"
                     loading="lazy">

                <div class="f4p-product-name">
                    Geschäftsdrucksachen
                </div>

                <div class="f4p-product-overlay">
                    <h3>Geschäftsdrucksachen</h3>

                    <p>
                        Visitenkarten, Briefbogen, Umschläge und weitere
                        Drucksachen für Ihren täglichen Geschäftsbedarf.
                    </p>

                    <span>Mehr erfahren →</span>
                </div>

            </a>
        </div>


        <!-- Formulardruck -->
        <div class="f4p-product-card">
            <a href="/formulardruck">

                <img src="/images/produkte/formulardruck.jpg"
                     alt="Formulardruck bei fun4print"
                     loading="lazy">

                <div class="f4p-product-name">
                    Formulardruck
                </div>

                <div class="f4p-product-overlay">
                    <h3>Formulardruck</h3>

                    <p>
                        Individuelle Formulare und Geschäftsvordrucke –
                        funktional und passend zu Ihren betrieblichen Abläufen.
                    </p>

                    <span>Mehr erfahren →</span>
                </div>

            </a>
        </div>


        <!-- Broschüren -->
        <div class="f4p-product-card">
            <a href="/broschueren-buecher">

                <img src="/images/produkte/broschueren-magazine-buecher.jpg"
                     alt="Broschüren Magazine Bücher und Dissertationen drucken"
                     loading="lazy">

                <div class="f4p-product-name">
                    Broschüren, Magazine &amp; Bücher
                </div>

                <div class="f4p-product-overlay">
                    <h3>Broschüren, Magazine &amp; Bücher</h3>

                    <p>
                        Broschüren, Magazine, Bücher und Dissertationen –
                        gedruckt, gebunden und komplett weiterverarbeitet.
                    </p>

                    <span>Mehr erfahren →</span>
                </div>

            </a>
        </div>


        <!-- Satz & Gestaltung -->
        <div class="f4p-product-card">
            <a href="/satz-gestaltung">

                <img src="/images/produkte/satz-gestaltung.jpg"
                     alt="Satz Gestaltung und Druckdatenaufbereitung"
                     loading="lazy">

                <div class="f4p-product-name">
                    Satz &amp; Gestaltung
                </div>

                <div class="f4p-product-overlay">
                    <h3>Satz &amp; Gestaltung</h3>

                    <p>
                        Von der Idee bis zur druckfertigen Datei –
                        Gestaltung, Satz, Bildbearbeitung und Datenaufbereitung.
                    </p>

                    <span>Mehr erfahren →</span>
                </div>

            </a>
        </div>

    </div>



    <!-- =====================================================
         REIHE 2
         ===================================================== -->

    <div class="f4p-product-row f4p-product-row-4">

        <!-- Mailings -->
        <div class="f4p-product-card">
            <a href="/mailings">

                <img src="/images/produkte/mailings-direktkundenwerbung.jpg"
                     alt="Mailings und Direktkundenwerbung"
                     loading="lazy">

                <div class="f4p-product-name">
                    Mailings &amp; Direktkundenwerbung
                </div>

                <div class="f4p-product-overlay">
                    <h3>Mailings &amp; Direktkundenwerbung</h3>

                    <p>
                        Personalisierte Mailings, Anschreiben und
                        Postwurfsendungen – produziert und für den Versand vorbereitet.
                    </p>

                    <span>Mehr erfahren →</span>
                </div>

            </a>
        </div>


        <!-- Personalisierung -->
        <div class="f4p-product-card">
            <a href="/personalisierter-druck">

                <img src="/images/produkte/personalisierte-drucksachen.jpg"
                     alt="Personalisierte Drucksachen und variabler Datendruck"
                     loading="lazy">

                <div class="f4p-product-name">
                    Personalisierte Drucksachen
                </div>

                <div class="f4p-product-overlay">
                    <h3>Personalisierte Drucksachen</h3>

                    <p>
                        Variable Texte, Bilder, Adressen, Nummerierungen,
                        Barcodes, QR- und DataMatrix-Codes.
                    </p>

                    <span>Mehr erfahren →</span>
                </div>

            </a>
        </div>


        <!-- Eintrittskarten -->
        <div class="f4p-product-card">
            <a href="/eintrittskarten">

                <img src="/images/produkte/eintrittskarten-tickets.jpg"
                     alt="Personalisierte Eintrittskarten und Tickets"
                     loading="lazy">

                <div class="f4p-product-name">
                    Eintrittskarten &amp; Tickets
                </div>

                <div class="f4p-product-overlay">
                    <h3>Eintrittskarten &amp; Tickets</h3>

                    <p>
                        Tickets mit Nummerierung, Personalisierung,
                        QR-Code, Barcode und besonderen Veredelungen.
                    </p>

                    <span>Mehr erfahren →</span>
                </div>

            </a>
        </div>


        <!-- Hochzeit -->
        <div class="f4p-product-card">
            <a href="/hochzeit-papeterie">

                <img src="/images/produkte/hochzeit-papeterie.jpg"
                     alt="Individuelle Hochzeitspapeterie"
                     loading="lazy">

                <div class="f4p-product-name">
                    Hochzeit &amp; Papeterie
                </div>

                <div class="f4p-product-overlay">
                    <h3>Hochzeit &amp; Papeterie</h3>

                    <p>
                        Einladungen, Menükarten, Tischkarten und individuelle
                        Papeterie für Hochzeit und besondere Anlässe.
                    </p>

                    <span>Mehr erfahren →</span>
                </div>

            </a>
        </div>

    </div>



    <!-- =====================================================
         REIHE 3
         ===================================================== -->

    <div class="f4p-product-row f4p-product-row-3 f4p-product-row-special">

        <!-- Etiketten -->
        <div class="f4p-product-card">

            <a href="/etikettendruck">

                <img src="/images/produkte/etikettendruck.jpg"
                     alt="Digitaler Etikettendruck auf Rolle und Bogen"
                     loading="lazy">

                <div class="f4p-product-name">
                    Etikettendruck
                </div>

                <div class="f4p-product-overlay">
                    <h3>Etikettendruck</h3>

                    <p>
                        Etiketten auf Rolle oder Bogen – auch in kleinen
                        Auflagen, mit Weißdruck und variablen Daten.
                    </p>

                    <span>Mehr erfahren →</span>
                </div>

            </a>

        </div>


        <!-- Zeitungsbeilagen -->
        <div class="f4p-product-card">

            <a href="/zeitungsbeilagen">

                <img src="/images/produkte/zeitungsbeilagen.jpg"
                     alt="Zeitungsbeilagen Flyer und Prospekte"
                     loading="lazy">

                <div class="f4p-product-name">
                    Zeitungsbeilagen
                </div>

                <div class="f4p-product-overlay">
                    <h3>Zeitungsbeilagen</h3>

                    <p>
                        Flyer, Prospekte und Beilagen für die gezielte
                        Verteilung über Tages- und Wochenzeitungen.
                    </p>

                    <span>Mehr erfahren →</span>
                </div>

            </a>

        </div>


        <!-- Vorsatzscheiben -->
        <div class="f4p-product-card">

            <a href="/vorsatzscheiben">

                <img src="/images/produkte/vorsatzscheiben-schiessstaende.jpg"
                     alt="Vorsatzscheiben für elektronische Schießstände"
                     loading="lazy">

                <div class="f4p-product-name">
                    Vorsatzscheiben für elektronische Schießstände
                </div>

                <div class="f4p-product-overlay">
                    <h3>Vorsatzscheiben</h3>

                    <p>
                        Vorsatzscheiben für elektronische Schießstände –
                        Ausführungen für Luftgewehr und Luftpistole.
                    </p>

                    <span>Mehr erfahren →</span>
                </div>

            </a>

        </div>


        <!-- Runde Kalkulations-Kachel -->

        <a class="f4p-calculator-bubble"
           href="/index.php/kalkulation/kalkulation-softcover"
           aria-label="Kostenlose Kalkulation für Softcover-Bücher">

            <span class="f4p-calculator-icon">
                📖
            </span>

            <span class="f4p-calculator-small">
                Kostenlose
            </span>

            <strong>
                Kalkulation
            </strong>

            <span class="f4p-calculator-title">
                Softcover-Bücher
            </span>

            <span class="f4p-calculator-button">
                Jetzt berechnen →
            </span>

        </a>

    </div>



    <!-- =====================================================
         REIHE 4
         ===================================================== -->

    <div class="f4p-product-row f4p-product-row-4">

        <!-- Laserprodukte -->
        <div class="f4p-product-card">
            <a href="/laserprodukte">

                <img src="/images/produkte/laserprodukte.jpg"
                     alt="Lasergravur und Laserschneiden"
                     loading="lazy">

                <div class="f4p-product-name">
                    Laserprodukte
                </div>

                <div class="f4p-product-overlay">
                    <h3>Laserprodukte</h3>

                    <p>
                        Individuelle Lasergravuren und Laserschnitte für
                        personalisierte Produkte und Sonderanfertigungen.
                    </p>

                    <span>Mehr erfahren →</span>
                </div>

            </a>
        </div>


        <!-- 3D -->
        <div class="f4p-product-card">
            <a href="/3d-druck">

                <img src="/images/produkte/3d-produkte.jpg"
                     alt="Individuelle Produkte im 3D-Druck"
                     loading="lazy">

                <div class="f4p-product-name">
                    3D-Produkte
                </div>

                <div class="f4p-product-overlay">
                    <h3>3D-Produkte</h3>

                    <p>
                        Individuelle Bauteile, Muster und Sonderlösungen
                        vom Einzelstück bis zur Kleinserie.
                    </p>

                    <span>Mehr erfahren →</span>
                </div>

            </a>
        </div>


        <!-- Veredelungen -->
        <div class="f4p-product-card">
            <a href="/veredelung">

                <img src="/images/produkte/veredelungen.jpg"
                     alt="Druckveredelung Metallic Sleeking Folien und Lacke"
                     loading="lazy">

                <div class="f4p-product-name">
                    Veredelungen
                </div>

                <div class="f4p-product-overlay">
                    <h3>Veredelungen</h3>

                    <p>
                        Metallic-Sleeking, Folien, Lacke und weitere
                        hochwertige optische und haptische Veredelungen.
                    </p>

                    <span>Mehr erfahren →</span>
                </div>

            </a>
        </div>


        <!-- Lohnarbeiten -->
        <div class="f4p-product-card">
            <a href="/lohnarbeiten">

                <img src="/images/produkte/lohnarbeiten.jpg"
                     alt="Lohnarbeiten Klebebindung Cellophanierung und Stanzarbeiten"
                     loading="lazy">

                <div class="f4p-product-name">
                    Lohnarbeiten
                </div>

                <div class="f4p-product-overlay">
                    <h3>Lohnarbeiten</h3>

                    <p>
                        Stanzarbeiten, Cellophanierung und Klebebindung
                        als Lohnleistung für Gewerbe und Druckereien.
                    </p>

                    <span>Mehr erfahren →</span>
                </div>

            </a>
        </div>

    </div>

</section>

CSS für die größere Kalkulations-Kachel

Die Kalkulations-Kachel würde ich jetzt bewusst mit ca. 220 px Durchmesser ausführen. Damit ist sie deutlich größer als im bisherigen Entwurf und wird zum Blickfang.

Ergänze das zu deiner bestehenden custom.css:

/* =========================================================
   REIHE MIT KALKULATIONS-KACHEL
   ========================================================= */

.f4p-home .f4p-product-row-special {
    position: relative;
}


/* =========================================================
   RUNDE KALKULATIONS-KACHEL
   ========================================================= */

.f4p-home .f4p-calculator-bubble {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 220px;
    height: 220px;

    transform: translate(-50%, -50%);

    z-index: 20;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: #ffffff;

    border: 5px solid rgba(255, 255, 255, 0.95);
    border-radius: 50%;

    box-shadow:
        0 6px 12px rgba(0, 0, 0, 0.34),
        0 14px 30px rgba(0, 0, 0, 0.22);

    color: #070066 !important;
    text-align: center;
    text-decoration: none !important;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.f4p-home .f4p-calculator-bubble:hover {
    transform: translate(-50%, -50%) scale(1.06);

    box-shadow:
        0 9px 18px rgba(0, 0, 0, 0.40),
        0 18px 38px rgba(0, 0, 0, 0.27);
}


.f4p-home .f4p-calculator-icon {
    display: block;

    margin-bottom: 4px;

    font-size: 36px;
    line-height: 1;
}


.f4p-home .f4p-calculator-small {
    display: block;

    font-size: 19px;
    line-height: 1.15;
    font-weight: 700;
}


.f4p-home .f4p-calculator-bubble strong {
    display: block;

    margin: 2px 0;

    color: #070066;

    font-size: 27px;
    line-height: 1.05;
    font-weight: 800;
}


.f4p-home .f4p-calculator-title {
    display: block;

    margin-bottom: 11px;

    font-size: 20px;
    line-height: 1.15;
    font-weight: 700;
}


.f4p-home .f4p-calculator-button {
    display: inline-block;

    padding: 7px 14px;

    background: #070066;

    border-radius: 20px;

    color: #ffffff;

    font-size: 15px;
    line-height: 1.2;
    font-weight: 700;
}

Auf dem Desktop sitzt die Kugel dadurch zwischen den Kacheln der dritten Reihe und deutlich davor, ähnlich unserem Entwurf.

Für Tablet und Smartphone würde ich sie aber nicht mehr über die anderen Kacheln legen. Ergänze deshalb:

@media (max-width: 991px) {

    .f4p-home .f4p-calculator-bubble {
        position: relative;

        left: auto;
        top: auto;

        width: 210px;
        height: 210px;

        margin: 10px auto 30px;

        transform: none;
    }


    .f4p-home .f4p-calculator-bubble:hover {
        transform: scale(1.04);
    }
}

Damit bleibt das Ganze auf Smartphone sauber bedienbar.
Bilddateien

Nach dem Entpacken des ZIP-Pakets kannst du die Dateien direkt nach

/images/produkte/

hochladen.

Die Dateinamen passen bereits zum HTML:

geschaeftsdrucksachen.jpg
formulardruck.jpg
broschueren-magazine-buecher.jpg
satz-gestaltung.jpg

mailings-direktkundenwerbung.jpg
personalisierte-drucksachen.jpg
eintrittskarten-tickets.jpg
hochzeit-papeterie.jpg

etikettendruck.jpg
zeitungsbeilagen.jpg
vorsatzscheiben-schiessstaende.jpg

laserprodukte.jpg
3d-produkte.jpg
veredelungen.jpg
lohnarbeiten.jpg

Damit haben wir jetzt die gewünschte Struktur 4 – 4 – 3 – 4 plus die größere runde Softcover-Kalkulation als zusätzlichen Blickfang in der Mitte.


Generiertes Bild: Industrielle Buchbindemaschine im modernen Druckbetrieb

Eingefügter Text(20260903-112618).txt
Dokument
Ausschnitte gefallen mir immer noch nicht. Und Bubbel ist nicht sichtbar. Schwarzer Schatten kann intensiver.

Eingefügter Text(20260903-113348).txt
Dokument
wo?

Bilder haben weißen Rand oben? Zeitungsbeilagen und 3D-Produkte Veredelungen haben NAchbarbilder drin.

Generiertes Bild: Drucklösungen im übersichtlichen Service-Grid

Formate passen immer noch nicht. Bildkopf immer noch weißer Rand.

Generiertes Bild: Produkte und Leistungen im Überblick

Immer noch Weißer Rahmen oben?

Generiertes Bild: Laserprodukte, 3D-Druck und Veredelungen

Jetzt haben die bilder ein anderes Format.

passt immer noch nicht!

Ausschnitt passt noch nicht. Bildfuß wird zuviel weg geschnitten.

Generiertes Bild: Kostenlose Kalkulation für Softcover-Bücher


Generiertes Bild: Gravur, 3D-Druck und Druckveredelung

weißer Rand ist unterschiedlich. Und wieder weiße Rand am Kopf.

Ja, jetzt habe ich die vier Bilder so bearbeitet, dass oben weniger Weißraum bleibt, der untere Bildbereich erhalten bleibt und alle vier wieder exakt dasselbe Format 1220 × 640 px haben.

· · ·

Für den Fließtext im Hover kannst du den Zeilenabstand ebenfalls etwas enger machen. Ändere bei:

.f4p-home .f4p-product-overlay p

den Wert von bisher:

line-height: 1.35;

auf:

line-height: 1.22;

also komplett:

.f4p-home .f4p-product-overlay p {
    margin: 0 0 13px;

    color: #ffffff;

    font-size: 16px;
    line-height: 1.22;
}

Das wirkt bei den kurzen Produktbeschreibungen kompakter und passt besser in die Kachel, ohne gequetscht auszusehen.

Das weiße Feld für die Beschreibung ist noch unterschiedlich hoch. Bitte auch die restlichen Bilder von Rändern befreien. Die 4 unteren Bilder sind Randfrei. die sind ok.

Generiertes Bild: Produkte und Drucklösungen im Überblick

Generiertes Bild: Professionelle fun4print Geschäftsausstattung

Generiertes Bild: Druck- und Designservice Grid-Collage

Generiertes Bild: Professionelles fun4print-Drucksortiment

Fertig. Ich habe die restlichen 11 Bilder aus der von dir freigegebenen randfreien Version als Einzelbilder angelegt. Die 4 unteren Bilder, die bereits passen, habe ich unverändert übernommen. Damit hast du jetzt alle 15 Produktbilder zusammen.

Einzeldownloads der neu bearbeiteten Bilder:

· · · · · · · · · ·

Alle Dateien haben dasselbe 1220 × 640 px-Format. Die weiße Beschriftungsfläche bleibt damit ausschließlich Bestandteil deines HTML/CSS und nicht der Bilder.

Generiertes Bild: Moderne Drucktechnik trifft Handwerk

Diesen Bereich so umsetzen und das Hintergraundbild in den aktuelle Hintergrung auslaufen lassen. weicher übergang.

Generiertes Bild: Moderne Drucktechnik trifft Handwerk

Generiertes Bild: Prägedruck auf eleganter Visitenkarte

Generiertes Bild: Goldener Meisterbetriebs-Siegel mit Krone

Generiertes Bild: Qualität, Technik und Beratung

Generiertes Bild: Drei Feature-Icons mit HTML-Code

So sieht es kacke aus!!!

H1 Druckerei & Digitaldruck in Ganderkesee bei Bremen unter H1 Modernste Drucktechnik trifft auf echtes HAndwerk. DAnn trifft auf echtes HAndwerk in cyan blau und 2 Zeilig, wie erster Vorschlag von dir. Hintergrundbild fehlt und Das Meistersiegel fehlt.

Generiertes Bild: Moderne Drucktechnik trifft Handwerk

Generiertes Bild: Navyblauer Kreis mit Gruppensymbol

Modernste Drucktechnik eine zeile. trifft auf echtes HAndwerk eine Zeile. Wie bei deinem ersten Vorschlag. Nächste Zeie Druckerei & Digitaldruck in Ganderkesee bei Bremen. Regional verwurzelt – für Kunden aus Bremen, Delmenhorst und Oldenburg
ebenso wie in ganz Deutschland und Europa. Full-Service-Druckerei – von Satz & Gestaltung bis zum fertigen Produkt. Zu underen Produkten soll in Blau Helvetica uund dann in klein Eintdecken Sie unsere Produkte und leistungen in rot und comic san. Rechts den Button ANfragen bitte genauso hoch, wie die 2 Zeilen links.

Eingefügter Text(20260904-073611).txt
Dokument
bitte css bereinigen. DA ist jetzt zu viel müll drin. 

Das ist Müll!!! Beratunsg Icon hat nicht die gleiche Größe wie die anderen beiden und jetzt ist alles in einer Reihe. 

Eingefügter Text(20260904-074234).txt
Dokument
CSS hast du bereinigt. jetzt die html bereinigen! 

Es wir dlangsam. Das Hintergrundbild bitte oben am grauen Balken beginnen lassen und nach unten hin auslaufen lassen. Trifft auf echtes Handwerk kleiner. Bei Bremen 2. Zeile. für Kunden aus nächste Zeile Bremen... Dann beim Qualitäts icon Qualität darunter aus Meisterhand. Meistersiegel weiter nach rechts. Hintergrundbild ist nicht vollständig. rechts fehlt etwas.

Past noch nicht. Das Hintergrundbild hat den Vverlauf nach links und nicht nach unten. Für Kunden aus, nächste Zeile Bremen...

Generiertes Bild: Moderne Drucktechnik trifft Handwerk

Passt immer noch nicht. Ist nicht im Hintergrund und lauft nicht nach unten hin aus. Ich würde das Bild auch weiter nach unten laufen lassen bis ca. hälfte 1 Reihe kacheln.

Bild läuft jetzt uten aus aber immer noch nicht rechtsbünding und nicht über die komplette breite?

Generiertes Bild: Moderne Drucktechnik trifft Handwerk

Das ist kacke. MAch es endlich gescheid, so wie besprochen!!!

Das ist auch kacke!!! nicht oben bündig am grauen balken. nicht im Hintergrund. und der Ausschnitt auch auch kacke. 

Jetzt habe ich 2 Hintergründe. und nicht im Hintergrund. Außerdem passt der AUsschnitt immer noch nicht!!!!

Eingefügter Text(20260904-084908).txt
Dokument
bitte kontrollieren: 

Es ist immer noch nicht so, wie ich es haben will. Hintergrundbild genauso vom Ausschnitt, wie zuerst von dir vorgeschlagen. Textblock ist nicht rechtsbündig mit den rechten Kacheln. Anfrage Button ist nicht  lins bündig. Neistersiegel steht auch nicht korrekt.

Hintergrundbild rechtsbündig zum rechten KAchel. Auslaufend bis oberkante erste Kachelreihe. Textblock sll linksbündig zur linken Kachelreihe sein. Msietrsiegel steht immer noch falsch.

Es wird gut. links würde ich das Hintergrundbild an der Kante auslaufen lassen. Keine harte Kante. Abstand zwischen Reihe Qualität aus Meisterhand und zu unseren Produkten gößrer Abstand. Miestersiegel weiter links hinter Drucktechnik. Modersnte Drucktechnik mit hellerem Bereich hinterlegen.

Genau – die Zeile „Idee • Druck • Veredelung • Realisierung“ soll also nicht kompakt links stehen, sondern über ungefähr dieselbe Breite wie „Modernste Drucktechnik“ auseinandergezogen werden. Gleichzeitig soll oben zum grauen Navigationsblock etwas mehr Abstand entstehen.

Ersetze den CSS-Block .f4p-process-line durch:

/* Idee • Druck • Veredelung • Realisierung */
.f4p-home .f4p-process-line {
    display: flex;
    align-items: center;
    justify-content: space-between;

    /* ungefähr Breite von "Modernste Drucktechnik" */
    width: 555px;
    max-width: 100%;

    /* mehr Abstand zum grauen Block oben */
    margin: 18px 0 18px 0;
    padding: 0;

    color: #070066;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .2px;
}

.f4p-home .f4p-process-dot {
    color: #960101;
    font-size: 21px;
    line-height: 1;
    font-weight: 700;
}

Damit wird aus dem bisher engen:

Idee • Druck • Veredelung • Realisierung

eher:

Idee     •     Druck     •     Veredelung     •     Realisierung
───────────────────────────────────────────────────────────────
Modernste Drucktechnik

Noch etwas mehr Abstand zum grauen Balken

Da dein Hero aktuell oben

padding: 34px 0 30px;

hat, würde ich nicht zusätzlich sehr viel Margin verwenden. Wenn du den gesamten oberen Bereich weiter nach unten haben möchtest, ändere bei .f4p-newhero-inner:

padding: 44px 0 30px;

statt:

padding: 34px 0 30px;

Dann haben wir oben rund 10 px mehr Luft, ohne dass sich die horizontale Ausrichtung verändert.

Modernste Drucktechnik selbst, „Zu unseren Produkten“ und die Kachelpositionen jetzt nicht verändern.

Hintergrundbild ist nicht bündig oben mit dem grauen Balken. Hintergrundbild höher setzen. 

Ja. Nur das Hintergrundbild höher setzen, nicht den Textblock. Der Abstand der neuen Zeile zum grauen Balken kann damit bestehen bleiben.

In .f4p-newhero::before hast du aktuell:

top: 0;

Ändere das auf:

top: -35px;

Da das Bild dadurch oben 35 px weiter nach oben rutscht, solltest du gleichzeitig die Höhe erhöhen:

height: 625px;

Der Anfang des Blocks sieht dann so aus:

.f4p-home .f4p-newhero::before {
    content: "";
    position: absolute;
    z-index: 1;

    top: -35px;
    left: 0;

    width: 100%;
    height: 625px;

    background-image:
        url("/images/Bilder/fun4print-hero-printmotiv.png");

    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;

    pointer-events: none;

    /* deine bestehenden Masken/Verläufe darunter
       unverändert lassen */
}

Falls noch ein kleiner Spalt zum grauen Balken bleibt

Dann nur diesen Wert weiter erhöhen:

top: -45px;

Nicht .f4p-newhero-inner nach oben ziehen. Sonst wandert auch

Idee • Druck • Veredelung • Realisierung

wieder zu dicht an den grauen Balken.

Das Ziel ist also:

GRAUER NAVIGATIONSBALKEN
────────────────────────────────────
Hintergrundbild beginnt bündig hier
       ↓ etwas Luft
Idee  •  Druck  •  Veredelung  •  Realisierung

Modernste Drucktechnik
trifft auf echtes Handwerk.

Ich würde bei deinem aktuellen Aufbau mit top: -35px beginnen.

css bereinigen und Tablet und smartphone angleichen.
Eingefügter Text(20260904-095143).txt
Dokument

Ich habe die CSS-Datei bereinigt und Tablet/Smartphone auf das aktuelle Desktop-Layout abgestimmt. Dabei habe ich die bestehenden Desktop-Werte weitgehend beibehalten und vor allem die Konflikte entfernt. In deiner Datei waren unter anderem .f4p-products doppelt definiert, ::after erst per display:none!important abgeschaltet und später trotzdem noch einmal aufgebaut, die beiden Masken für Firefox/WebKit waren unterschiedlich, und bei top: -30 fehlte die Einheit px.

Bei Tablet habe ich jetzt Hero, Produktüberschrift und Kachelreihen auf dieselben Außenränder gesetzt. Die zusätzlichen 38px Innenabstände, die vorher Hero und Produktüberschrift gegeneinander verschoben haben, sind entfernt.

Beim Smartphone habe ich außerdem den alten Aufbau mit padding-bottom:300px entfernt. Der Hero verhält sich nun wie auf Desktop/Tablet: Hintergrundbild hinter dem Inhalt, Text linksbündig, Weißverlauf hinter der H1, Benefit-Zeile responsive und das Meistersiegel kleiner rechts im Hero. Die Produktkacheln bleiben einspaltig und zeigen den blauen Infobereich dauerhaft.

Hier ist die komplette bereinigte Datei zum Ersetzen deines bisherigen Homepage-CSS:

Wichtig: Ich würde jetzt nicht einzelne Stücke daraus zusätzlich unter deine vorhandene CSS setzen, sondern den bisherigen fun4print-Homepage-Block komplett durch diese bereinigte Version ersetzen. Sonst haben wir wieder alte Regeln, die die neuen Media-Queries überschreiben.

Eine Sache habe ich bewusst zunächst beibehalten: auf Desktop steht dein Hero-Text weiterhin mit left:15px, und das Meistersiegel weiterhin mit left:650px, weil das genau die Werte deiner aktuell hochgeladenen Fassung sind. Wenn du mir danach je einen Screenshot Desktop, Tablet und Smartphone gibst, können wir diese drei Ansichten jetzt gezielt feinjustieren, ohne die CSS erneut durcheinanderzubringen.


/* =========================================================
FUN4PRINT STARTSEITE – FINAL BEREINIGT
Ziel: Hero wie freigegebene Referenz
========================================================= */

.f4p-home {
position: relative;
color: #070066;
font-family: Helvetica, Arial, sans-serif;

--f4p-content-width: 1284px;

}

/* =========================================================
HERO
========================================================= */

/* Inhalt liegt über dem vollflächigen Hintergrundbild */

.f4p-home .f4p-newhero-left {
position: relative;
z-index: 6;

width: 49%;
max-width: 625px;

margin: 0;
padding: 0;

left: 15px;

}

/* =========================================================
MEISTERSIEGEL
========================================================= */

.f4p-home .f4p-newhero-meister {
position: absolute;

z-index: 10;

top: -20px;
left: 650px;

width: 190px;
height: auto;

transform: none;

filter: drop-shadow(0 6px 9px rgba(0,0,0,.28));

}

/* =========================================================
HERO – H1
========================================================= */

/* Idee • Druck • Veredelung • Realisierung */
.f4p-home .f4p-process-line {
display: flex;
align-items: center;
justify-content: space-between;

/* ungefähr Breite von "Modernste Drucktechnik" */
width: 600px;
max-width: 100%;

/* mehr Abstand zum grauen Block oben */
margin: 18px 0 18px 0;
padding: 0;

color: #070066;
font-family: Helvetica, Arial, sans-serif;
font-size: 17px;
line-height: 1;
font-weight: 700;
letter-spacing: .2px;

}

.f4p-home .f4p-process-dot {
color: #960101;
font-size: 21px;
line-height: 1;
font-weight: 700;
}

/* =========================================================
HELLER BEREICH HINTER H1
========================================================= */

.f4p-home .f4p-main-title {
position: relative;
z-index: 6;

/*
 * Weißfläche bewusst über die eigentliche
 * Überschrift hinaus nach rechts verlängern
 */
width: 850px;
max-width: none;

margin-left: -90px;
padding: 10px 190px 12px 90px;

box-sizing: border-box;

background: linear-gradient(
    to right,

    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 4%,
    rgba(255,255,255,.88) 8%,
    rgba(255,255,255,.98) 13%,

    rgba(255,255,255,.98) 58%,
    rgba(255,255,255,.94) 66%,
    rgba(255,255,255,.82) 74%,
    rgba(255,255,255,.62) 82%,
    rgba(255,255,255,.38) 89%,
    rgba(255,255,255,.16) 95%,
    rgba(255,255,255,0) 100%
);

border-radius: 0;

}

.f4p-home .f4p-main-title span {
display: block;
white-space: nowrap;
}

.f4p-home .f4p-title-blue {
color: #070066;
font-size: clamp(40px, 4.1vw, 56px);
}

.f4p-home .f4p-title-cyan {
color: #0789d1;
font-size: clamp(35px, 3.65vw, 50px);
}

/* =========================================================
HERO – STANDORT
========================================================= */

.f4p-home .f4p-location-line {
margin: 0 0 18px;

color: #070066;
font-family: Helvetica, Arial, sans-serif;
text-align: left;

}

.f4p-home .f4p-location-line span {
display: block;
}

.f4p-home .f4p-location-main {
font-size: 25px;
line-height: 1.15;
font-weight: 700;
}

.f4p-home .f4p-location-place {
margin-top: 2px;
font-size: 21px;
line-height: 1.2;
font-weight: 600;
}

/* =========================================================
HERO – TEXTE
========================================================= */

.f4p-home .f4p-newhero-text {
max-width: 590px;
margin: 0 0 15px;

color: #070066;
font-size: 17px;
line-height: 1.42;
text-align: left;

}

.f4p-home .f4p-region {
margin: 0;

color: #070066;
font-size: 16px;
line-height: 1.3;
font-weight: 700;
text-align: left;

}

.f4p-home .f4p-region span {
display: block;
}

.f4p-home .f4p-region-second {
margin-top: 2px;
}

.f4p-home .f4p-fullservice {
margin: 13px 0 24px;

color: #070066;
font-size: 17px;
line-height: 1.3;
font-weight: 700;
text-align: left;

}

/* =========================================================
HERO – VORTEILE
========================================================= */

.f4p-home .f4p-newhero-benefits {
display: flex;
align-items: center;
gap: 34px;

margin-bottom: 70px;

}

.f4p-home .f4p-benefit {
display: flex;
align-items: center;
gap: 10px;

color: #070066;
font-size: 15px;
line-height: 1.12;

}

.f4p-home .f4p-benefit > span,
.f4p-home .f4p-benefit-text {
display: flex;
flex-direction: column;
}

.f4p-home .f4p-benefit strong,
.f4p-home .f4p-benefit-text strong {
display: block;

color: #070066;
font-size: 16px;
line-height: 1.1;
font-weight: 700;

}

.f4p-home .f4p-benefit-icon-img {
display: block !important;

width: 50px !important;
height: 50px !important;

min-width: 50px !important;
max-width: 50px !important;
min-height: 50px !important;
max-height: 50px !important;

margin: 0 !important;
padding: 0 !important;

border-radius: 50%;
object-fit: cover;

}

/* =========================================================
HERO-HINTERGRUND – FINAL
========================================================= */

.f4p-home .f4p-newhero {
position: relative;

width: calc(100% - 80px);
max-width: var(--f4p-content-width);

min-height: 500px;

margin: 0 auto;
padding: 0;

overflow: visible;

}

/* =========================================================
HERO-HINTERGRUND: links weich auslaufen
========================================================= */

/* =========================================================
HERO-HINTERGRUND
rechts UND unten weich auslaufend
========================================================= */

.f4p-home .f4p-newhero::before {
content: "";

position: absolute;
z-index: 1;

top: -30;
left: 0;

width: 100%;
height: 625px;

background-image:
    url("/images/Bilder/fun4print-hero-printmotiv.png");

background-repeat: no-repeat;
background-size: 100% auto;
background-position: center top;

pointer-events: none;

/*
 * 1. Verlauf: rechts ausblenden
 * 2. Verlauf: nach unten ausblenden
 */
-webkit-mask-image:

/* horizontal: links UND rechts weich auslaufen */
linear-gradient(
to right,
transparent 0%,
rgba(0,0,0,.18) 2%,
rgba(0,0,0,.45) 4%,
rgba(0,0,0,.72) 7%,
rgba(0,0,0,.92) 10%,
#000 13%,

#000 82%,

rgba(0,0,0,.95) 86%,
rgba(0,0,0,.78) 90%,
rgba(0,0,0,.52) 94%,
rgba(0,0,0,.25) 97%,
transparent 100%

),
linear-gradient(
to bottom,
#000 0%,
#000 65%,
rgba(0,0,0,.95) 72%,
rgba(0,0,0,.72) 80%,
rgba(0,0,0,.42) 87%,
rgba(0,0,0,.18) 93%,
transparent 100%
);

-webkit-mask-composite: source-in;

mask-image:
    linear-gradient(
        to right,
        #000 0%,
        #000 84%,
        rgba(0,0,0,.95) 87%,
        rgba(0,0,0,.75) 91%,
        rgba(0,0,0,.45) 95%,
        rgba(0,0,0,.18) 98%,
        transparent 100%
    ),
    linear-gradient(
        to bottom,
        #000 0%,
        #000 65%,
        rgba(0,0,0,.95) 72%,
        rgba(0,0,0,.42) 87%,
        rgba(0,0,0,.18) 93%,
        transparent 100%
    );

mask-composite: intersect;

}

/*

    Das große Bild aus dem HTML darf NICHT

    zusätzlich angezeigt werden.
    */
    .f4p-home .f4p-newhero-image {
    display: none !important;
    }

/*

    Kein weißer Zusatzverlauf.

    Der Papierhintergrund kommt durch die

    Transparenz des ::before selbst hindurch.
    */
    .f4p-home .f4p-newhero::after,
    .f4p-home .f4p-newhero-right::after {
    display: none !important;
    }

/* =========================================================
HERO – EIN EINZIGES HINTERGRUNDBILD
========================================================= */

.f4p-home .f4p-newhero::after {
content: "";

position: absolute;

left: 0;
right: 0;

top: 430px;

height: 360px;

z-index: 2;

pointer-events: none;

background:
    linear-gradient(
        to bottom,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.12) 20%,
        rgba(255,255,255,.32) 40%,
        rgba(255,255,255,.58) 60%,
        rgba(255,255,255,.82) 80%,
        rgba(255,255,255,1) 100%
    );

}

/* =========================================================
PRODUKTÜBERSCHRIFT + ANFRAGE
========================================================= */

.f4p-home .f4p-products {
position: relative;
z-index: 5;

margin-top: 0;
padding-top: 0;

}

.f4p-home .f4p-products-head {
display: flex;
align-items: stretch;
justify-content: space-between;

width: calc(100% - 80px);
max-width: var(--f4p-content-width);

margin: 0 auto 22px;
padding: 0;

box-sizing: border-box;

}

.f4p-home .f4p-products-title {
display: flex;
flex-direction: column;
justify-content: center;

text-align: left;

}

.f4p-home .f4p-products-title h2 {
margin: 0 0 4px;

color: #070066;

font-family: Helvetica, Arial, sans-serif;
font-size: 34px;
line-height: 1.08;
font-weight: 700;

}

.f4p-home .f4p-products-title p {
margin: 0;

color: #960101;

font-family: "Comic Sans MS", cursive;
font-size: 18px;
line-height: 1.2;
font-weight: 700;

}

.f4p-home .f4p-anfrage-button {
display: flex;
align-items: center;
justify-content: center;

align-self: stretch;

width: 190px;
min-height: 64px;

padding: 0 28px;

box-sizing: border-box;

border: 0;
border-radius: 32px;

background: #070066;

color: #ffffff !important;

font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.2;
font-weight: 700;

text-decoration: none !important;

box-shadow: 0 5px 12px rgba(0,0,0,.22);

transition:
    transform .25s ease,
    box-shadow .25s ease;

}

.f4p-home .f4p-anfrage-button {
background: #070066;
color: #ffffff !important;

transform: translateY(-2px);

box-shadow: 0 7px 16px rgba(0,0,0,.30);

}

/* =========================================================
SEKTIONEN / STANDARDTEXTE
========================================================= */

.f4p-home .f4p-section {
padding: 10px 20px 40px;
}

.f4p-home .f4p-heading {
margin: 15px 0 18px;
text-align: center;
color: #960101;
font-family: "Comic Sans MS", Helvetica, Arial, sans-serif;
font-size: 34px;
line-height: 1.25;
font-weight: 700;
}

.f4p-home .f4p-text {
color: #070066;
font-family: Helvetica, Arial, sans-serif;
font-size: 22px;
line-height: 1.4;
}

.f4p-home .f4p-text-center {
max-width: 1050px;
margin-left: auto;
margin-right: auto;
text-align: center;
}

.f4p-home .f4p-lead {
margin: 0 auto 18px;
color: #070066;
font-size: 24px;
line-height: 1.45;
font-weight: 700;
text-align: center;
}

.f4p-home .f4p-highlight {
color: #960101;
font-weight: 700;
}

/* =========================================================
ZWEISPALTIGE BEREICHE
========================================================= */

.f4p-home .f4p-row {
display: flex;
align-items: center;
gap: 40px;
margin: 35px 0;
}

.f4p-home .f4p-col {
flex: 1 1 0;
min-width: 0;
}

.f4p-home .f4p-image {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}

.f4p-home .f4p-image-border {
border: 8px solid #ffffff;
}

/* =========================================================
DIGITALER ETIKETTENDRUCK
========================================================= */

.f4p-home .f4p-label-section {
padding-top: 20px;
}

.f4p-home .f4p-label-row {
max-width: 1100px;
margin: 35px auto 20px;
}

.f4p-home .f4p-label-image {
flex: 0 1 40%;
text-align: center;
}

.f4p-home .f4p-label-content {
flex: 0 1 60%;
}

.f4p-home .f4p-label-title {
margin: 0 !important;
padding: 0 !important;
color: #960101;
font-family: "Comic Sans MS", Helvetica, Arial, sans-serif;
font-size: 28px;
line-height: 1.4 !important;
font-weight: 700;
}

.f4p-home .f4p-label-subline {
margin: 0 0 12px !important;
padding: 0 !important;
color: #070066;
font-family: Helvetica, Arial, sans-serif;
font-size: 20px;
line-height: 1.4 !important;
}

.f4p-home .f4p-label-content .f4p-text {
margin: 0 0 12px;
font-size: 20px;
line-height: 1.4;
}

.f4p-home .f4p-checklist {
margin: 18px 0 0;
padding: 0;
list-style: none;
color: #070066;
font-size: 20px;
line-height: 1.5;
}

.f4p-home .f4p-checklist li {
margin: 0 0 4px;
padding: 0;
border: 0 !important;
border-bottom: none !important;
background: none !important;
}

.f4p-home .f4p-checklist li::before,
.f4p-home .f4p-checklist li::after {
border: 0 !important;
background: none !important;
}

/* =========================================================
PRODUKTKACHELN
========================================================= */

.f4p-home .f4p-products {
position: relative;
z-index: 5;

margin-top: -20px;
padding-top: 0;

}

.f4p-home .f4p-product-row {
display: grid;
gap: 22px;

width: calc(100% - 80px);
max-width: var(--f4p-content-width);

margin: 0 auto 22px;

}

.f4p-home .f4p-product-row-4 {
grid-template-columns: repeat(4, 1fr);
}

.f4p-home .f4p-product-row-3 {
grid-template-columns: repeat(3, 1fr);

width: calc(75% - 15px);
max-width: 1335px;

}
.f4p-home .f4p-product-card {
position: relative;
overflow: hidden;

background: #ffffff;
border: 1px solid rgba(0,0,0,.12);

box-shadow:
    0 5px 10px rgba(0,0,0,.42),
    0 12px 24px rgba(0,0,0,.28);

transition:
    box-shadow .3s ease,
    transform .3s ease;

}

.f4p-home .f4p-product-card {
transform: translateY(-5px);

box-shadow:
    0 8px 16px rgba(0,0,0,.50),
    0 18px 32px rgba(0,0,0,.34);

}

.f4p-home .f4p-product-card a {
display: flex;
flex-direction: column;
position: relative;

width: 100%;

color: inherit;
text-decoration: none !important;

}

.f4p-home .f4p-product-card img {
display: block;

width: 100%;
height: auto;

aspect-ratio: 305 / 160;

object-fit: cover;
object-position: center;

margin: 0;
padding: 0;

}

.f4p-home .f4p-product-name {
width: 100%;
height: 52px;
min-height: 52px;

box-sizing: border-box;

margin: 0;
padding: 6px 9px;

display: flex;
align-items: center;
justify-content: center;

background: #ffffff;
color: #070066;

font-size: 18px;
line-height: 1.12;
font-weight: 700;
text-align: center;

}

.f4p-home .f4p-product-overlay {
position: absolute;
inset: 3px;

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

padding: 22px;

background: rgba(7,0,102,.95);
color: #ffffff;
text-align: center;

opacity: 0;

transition: opacity .25s ease;

}

.f4p-home .f4p-product-card .f4p-product-overlay {
opacity: 1;
}

.f4p-home .f4p-product-overlay h3 {
margin: 0 0 10px;
color: #ffffff;
font-size: 20px;
line-height: 1.2;
font-weight: 700;
}

.f4p-home .f4p-product-overlay p {
margin: 0 0 13px;
color: #ffffff;
font-size: 16px;
line-height: 1.22;
}

.f4p-home .f4p-product-overlay span {
color: #ffffff;
font-size: 16px;
font-weight: 700;
}

/* =========================================================
SOFTCOVER-KALKULATION
========================================================= */

.f4p-home .f4p-calculator-wrap {
position: relative;
width: 100%;
max-width: 1180px;
margin: 18px auto 35px;

display: flex;
justify-content: center;
align-items: center;

z-index: 30;

}

.f4p-home .f4p-calculator-bubble {
position: relative;

width: 260px;
height: 260px;
flex: 0 0 260px;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

box-sizing: border-box;
padding: 24px;

background: #ffffff;
border: 7px solid #ffffff;
border-radius: 50%;

box-shadow:
    0 7px 14px rgba(0,0,0,.44),
    0 18px 34px rgba(0,0,0,.30);

color: #070066 !important;
text-align: center;
text-decoration: none !important;

z-index: 40;

transition:
    transform .3s ease,
    box-shadow .3s ease;

}

.f4p-home .f4p-calculator-bubble {
transform: scale(1.06);

box-shadow:
    0 10px 20px rgba(0,0,0,.50),
    0 22px 42px rgba(0,0,0,.35);

}

.f4p-home .f4p-calculator-icon {
display: block;
margin-bottom: 5px;
font-size: 38px;
line-height: 1;
}

.f4p-home .f4p-calculator-small {
display: block;
font-size: 19px;
line-height: 1.15;
font-weight: 700;
}

.f4p-home .f4p-calculator-bubble strong {
display: block;
margin: 3px 0;
color: #070066;
font-size: 30px;
line-height: 1.05;
font-weight: 800;
}

.f4p-home .f4p-calculator-title {
display: block;
margin-bottom: 14px;
font-size: 21px;
line-height: 1.15;
font-weight: 700;
}

.f4p-home .f4p-calculator-button {
display: inline-block;
padding: 8px 16px;
background: #070066;
border-radius: 22px;
color: #ffffff;
font-size: 15px;
line-height: 1.2;
font-weight: 700;
}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 1100px) {

.f4p-home .f4p-newhero-inner {
    min-height: 500px;
    padding-left: 38px;
    padding-right: 38px;
}

.f4p-home .f4p-newhero-left {
    width: 58%;
}

.f4p-home .f4p-title-blue {
    font-size: clamp(38px, 4vw, 46px);
}

.f4p-home .f4p-title-cyan {
    font-size: clamp(33px, 3.55vw, 41px);
}

.f4p-home .f4p-location-main {
    font-size: 22px;
}

.f4p-home .f4p-location-place {
    font-size: 19px;
}

.f4p-home .f4p-newhero-text {
    max-width: 520px;
    font-size: 16px;
}

.f4p-home .f4p-newhero-benefits {
    gap: 20px;
}

.f4p-home .f4p-benefit-icon-img {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
}

.f4p-home .f4p-newhero-meister {
    left: 55%;
    width: 130px;
}

.f4p-home .f4p-products-head {
    padding-left: 38px;
    padding-right: 38px;
}

.f4p-home .f4p-product-row {
    max-width: calc(100% - 76px);
}

.f4p-home .f4p-product-row-3 {
    max-width: calc(75% - 57px);
}

}

/* =========================================================
SMARTPHONE
========================================================= */

@media (max-width: 767px) {

.f4p-home .f4p-newhero {
    overflow: hidden;
}

.f4p-home .f4p-newhero-inner {
    min-height: 0;
    padding: 30px 18px 300px;
}

.f4p-home .f4p-newhero-left {
    width: 100%;
    max-width: none;
    text-align: center;
}

.f4p-home .f4p-main-title {
    text-align: center;
}

.f4p-home .f4p-main-title span {
    white-space: normal;
}

.f4p-home .f4p-title-blue {
    font-size: 34px;
}

.f4p-home .f4p-title-cyan {
    font-size: 30px;
}

.f4p-home .f4p-location-line,
.f4p-home .f4p-newhero-text,
.f4p-home .f4p-region,
.f4p-home .f4p-fullservice {
    text-align: center;
}

.f4p-home .f4p-location-main {
    font-size: 21px;
}

.f4p-home .f4p-location-place {
    font-size: 18px;
}

.f4p-home .f4p-newhero-text {
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
}

.f4p-home .f4p-region {
    font-size: 15px;
}

.f4p-home .f4p-newhero-benefits {
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px 20px;
}

.f4p-home .f4p-newhero-right {
position: absolute;

z-index: 8;

top: 0;
left: 0;

width: 100%;
height: 100%;

pointer-events: none;

}

.f4p-home .f4p-newhero-image {
    object-position: 68% top;
}

.f4p-home .f4p-newhero-meister {
    top: auto;
    bottom: 195px;
    left: 50%;
    width: 105px;
    transform: translateX(-50%);
}

.f4p-home .f4p-products {
    padding-top: 15px;
}

.f4p-home .f4p-products-head {
    flex-direction: column;
    align-items: center;
    gap: 18px;

    padding: 0 18px;
}

.f4p-home .f4p-products-title {
    text-align: center;
}

.f4p-home .f4p-products-title h2 {
    font-size: 28px;
}

.f4p-home .f4p-products-title p {
    font-size: 17px;
}

.f4p-home .f4p-anfrage-button {
    width: 190px;
    min-height: 50px;
    padding: 10px 25px;
}

.f4p-home .f4p-product-row-4,
.f4p-home .f4p-product-row-3 {
    grid-template-columns: 1fr;
    max-width: calc(100% - 36px);
    gap: 22px;
}

.f4p-home .f4p-product-card img {
    aspect-ratio: 16 / 9;
}

.f4p-home .f4p-product-name {
    display: none;
}

.f4p-home .f4p-product-overlay {
    position: static;
    opacity: 1;
    padding: 18px 20px 20px;
    background: #070066;
}

.f4p-home .f4p-product-card:hover {
    transform: none;
}

.f4p-home .f4p-row {
    display: block;
    margin: 25px 0;
}

.f4p-home .f4p-col {
    width: 100%;
    margin-bottom: 25px;
}

.f4p-home .f4p-calculator-bubble {
    width: 230px;
    height: 230px;
    flex: 0 0 230px;
}

}

/* =========================================================
KLEINE SMARTPHONES
========================================================= */

@media (max-width: 480px) {

.f4p-home .f4p-title-blue {
    font-size: 31px;
}

.f4p-home .f4p-title-cyan {
    font-size: 27px;
}

.f4p-home .f4p-location-main {
    font-size: 20px;
}

.f4p-home .f4p-location-place {
    font-size: 17px;
}

}