/* ============================================================ assets/marke.css — Typografie und Feinschliff ============================================================ Wird NACH dem Seiten-CSS geladen und ändert nur Schrift, Abstände und Rundungen. Der Aufbau der Seiten bleibt unangetastet, also lässt sich die Datei jederzeit wieder entfernen. Schriftwahl: Überschriften Fraunces – eine Serif mit weichen Formen. Sie wirkt persönlich und handgemacht, passt zu einem Ein-Mann- Betrieb und hebt dich von den vielen Seiten ab, die Inter oder Poppins verwenden. Fliesstext Inter – bleibt. Sie ist für Bildschirme gemacht und in kleinen Grössen besser lesbar als jede Serif. Der Gegensatz aus warmer Serif und nüchterner Grotesk ist genau das, was gute Agenturseiten machen: charaktervoll oben, ruhig im Text. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap'); :root { --schrift-titel: 'Fraunces', Georgia, serif; --titel-abstand: -0.015em; } /* ---------- Überschriften ---------- */ h1, h2, h3, .cms-slide-title, .pricing-card-price, .af-frage, .p-name { font-family: var(--schrift-titel) !important; letter-spacing: var(--titel-abstand); font-weight: 600; } /* Fraunces trägt optisch stärker auf als Inter - deshalb etwas kleiner und mit engerem Zeilenabstand, sonst wirkt es wuchtig. */ h1, .cms-slide-title { line-height: 1.08; } h2 { line-height: 1.15; } /* ---------- Fliesstext ---------- */ body, p, li, input, textarea, button, select { font-family: 'Inter', system-ui, -apple-system, sans-serif; } /* Etwas mehr Zeilenabstand: der häufigste Unterschied zwischen einer selbstgebauten und einer gestalteten Seite. */ p, li { line-height: 1.72; } /* ---------- Kleine Auszeichnungen ---------- */ /* Die Kennzeichen über den Überschriften ("KOSTENLOS UND UNVERBINDLICH") bleiben in der Grotesk - eine Serif in Versalien wirkt altmodisch. */ [style*="letter-spacing:.09em"], [style*="letter-spacing: .09em"], .p-branche, .af-nr { font-family: 'Inter', sans-serif !important; font-weight: 700; } /* ---------- Feinschliff ---------- */ /* Zahlen in Tabellen und Preisen gleich breit setzen, damit Spalten sauber untereinander stehen. */ .pricing-card-price, td, .betrag { font-variant-numeric: tabular-nums; } /* ===================================================================== SLIDER-PFEILE AUF DEM HANDY Sie stehen mittig links und rechts - auf dem Rechner neben dem Text, auf dem Handy MITTEN DARIN. Dort ist die Folie schmal, und die Pfeile liegen ueber den Woertern: "…ich baue (Pfeil)nelle, klare Webseiten…" Loesung: Auf schmalen Geraeten wandern sie nach unten zu den Punkten. Dort stoeren sie nicht, und gewischt wird auf dem Handy ohnehin. ===================================================================== */ @media (max-width: 700px) { .cms-slider-nav { top: auto !important; bottom: 14px !important; transform: none !important; justify-content: center !important; gap: 190px; /* Platz fuer die Punkte dazwischen */ padding: 0 !important; } .cms-slider-nav button { width: 34px !important; height: 34px !important; font-size: 15px !important; background: rgba(15, 23, 42, .28) !important; border-color: rgba(255, 255, 255, .35) !important; } } /* Sehr schmale Geraete: Pfeile ganz weglassen. Bei 360 Pixeln zaehlt jeder Millimeter, und gewischt wird sowieso. */ @media (max-width: 380px) { .cms-slider-nav { display: none !important; } } /* ===================================================================== SLIDER-ANZEIGE AUF DEM HANDY Die Punkte sitzen fest am unteren Rand der Folie und mittig. Auf dem Handy ist der Inhalt hoeher als die Folie - dadurch liegt der letzte Knopf genau dort, und ein Punkt steht mitten im Text: "Kostenloser(Punkt)Website-Check". Zwei frueheren Versuche haben am Inhalt geschraubt (mehr Abstand unten). Das half nicht, weil die Punkte nicht am Inhalt haengen, sondern an der Folie. Deshalb werden sie auf dem Handy ausgeblendet. Die Pfeile sind dort ohnehin schon weg, gewischt wird mit dem Finger, und zwei Folien erkennt man auch ohne Anzeige. ===================================================================== */ @media (max-width: 700px) { .cms-slider-dots, .cms-slider .cms-slider-dots, div.cms-slider-dots { display: none !important; } /* Knoepfe untereinander und gleich breit - nebeneinander werden sie auf schmalen Geraeten zu eng fuer den Text. */ .cms-slide-btns { flex-direction: column !important; align-items: center !important; gap: 10px !important; } .cms-slide-btns .cms-slide-btn { /* Schmaler als zuvor: bei 300 px reichten die Knoepfe fast an den Rand und "Kostenloser Website-Check" brach auf zwei Zeilen um. */ width: auto; max-width: 260px; padding-left: 22px !important; padding-right: 22px !important; font-size: .92rem !important; white-space: nowrap; text-align: center; box-sizing: border-box; } /* Unten Luft, damit der letzte Knopf nicht am naechsten Abschnitt klebt. */ .cms-slide-btns { margin-bottom: 8px !important; } .cms-slide-content { padding-bottom: 34px !important; } } /* ===================================================================== SLIDER-HOEHE AUF DEM HANDY Die Folie hat im Export eine feste Hoehe (style="height: 560px"). Auf dem Handy ist der Inhalt hoeher: Badge, Titel, Text und zwei Knoepfe. Er wird mittig zentriert, laeuft oben und unten ueber, und weil die Folie overflow:hidden hat, ist die Badge oben abgeschnitten ("WEBDESIGN AUS DEM RHEINTAL" nur halb sichtbar unter dem Header). Loesung: Die aktive Folie wird relativ positioniert und gibt dem Slider seine Hoehe - er waechst mit dem Inhalt. Die inaktiven Folien bleiben absolut darueber liegen (unsichtbar), damit das Ueberblenden weiter funktioniert. ===================================================================== */ @media (max-width: 768px) { .cms-slider { height: auto !important; min-height: 0 !important; } .cms-slide.active { position: relative !important; inset: auto !important; transform: none !important; } .cms-slide-content { padding-top: 40px !important; } } /* ===================================================================== MENÜLEISTE — UMBRUCH VERHINDERN In Edge und bei etwas breiterer Schrift brechen einzelne Punkte zweizeilig um: "Über / mich", "Häufige / Fragen", "Website- / Check". Die Leiste wirkt dadurch unruhig und wird hoeher. Zwei Massnahmen: 1. Punkte duerfen grundsaetzlich nicht umbrechen. 2. Wird der Platz knapp, werden Abstand und Schrift schrittweise kleiner - statt umzubrechen. Erst wenn auch das nicht reicht, uebernimmt das Handy-Menue. ===================================================================== */ .nav-links .menu-item, .nav-links .menu-item > a, .nav-links > a { white-space: nowrap !important; } /* Mittlere Bildschirme: enger setzen statt umbrechen */ @media (min-width: 993px) and (max-width: 1400px) { .nav-links { gap: 14px !important; } .nav-links .menu-item > a { font-size: .93rem !important; } } @media (min-width: 993px) and (max-width: 1200px) { .nav-links { gap: 10px !important; } .nav-links .menu-item > a { font-size: .88rem !important; } .header-action-btn { padding-left: 16px !important; padding-right: 16px !important; } } /* --------------------------------------------------------------------- Der Knopf "Projekt starten" wurde rechts angeschnitten: Die Leiste reicht bis an den Rand, und der Knopf ragt darueber hinaus. --------------------------------------------------------------------- */ @media (min-width: 993px) { header nav { padding-right: 24px; box-sizing: border-box; } .header-action-btn { flex-shrink: 0; /* darf nicht gestaucht werden */ margin-right: 0; } /* Die Punkte davor duerfen schrumpfen, der Knopf nicht */ .nav-links { min-width: 0; flex-wrap: nowrap; } } /* ===================================================================== KNÖPFE: RÜCKMELDUNG BEIM ÜBERFAHREN Viele Knoepfe bekommen ihre Farbe direkt im style-Attribut (style="background:#2563eb"). Dafuer gibt es keine Hover-Regel, also passiert beim Ueberfahren nichts - der Knopf wirkt tot. Geloest ueber filter statt ueber eine zweite Farbe: brightness wirkt auf JEDEN Hintergrund, egal ob er aus einer Klasse, einem style-Attribut oder einem Verlauf kommt. So braucht es keine Extrawurst je Knopfsorte. ===================================================================== */ .cms-slide-btn, .header-action-btn, .au-btn, .footer-btn, a.btn, a[class*="btn-"], a[class*="bg-blue-"], a[style*="background:#2563eb"], a[style*="background: #2563eb"], a[style*="background:#3b82f6"], a[style*="background: #3b82f6"], button[type="submit"] { transition: filter .16s ease, transform .16s ease, box-shadow .16s ease; } .cms-slide-btn:hover, .header-action-btn:hover, .au-btn:hover, .footer-btn:hover, a.btn:hover, a[class*="btn-"]:hover, a[class*="bg-blue-"]:hover, a[style*="background:#2563eb"]:hover, a[style*="background: #2563eb"]:hover, a[style*="background:#3b82f6"]:hover, a[style*="background: #3b82f6"]:hover, button[type="submit"]:hover { filter: brightness(1.1); transform: translateY(-1px); cursor: pointer; } /* Beim Druecken wieder zurueck - das macht den Klick spuerbar. */ .cms-slide-btn:active, .header-action-btn:active, .au-btn:active, a.btn:active, a[class*="btn-"]:active, a[class*="bg-blue-"]:active, button[type="submit"]:active { transform: translateY(0); filter: brightness(.96); } /* Umrissknoepfe haben keinen Grund, den man aufhellen koennte - dort wird stattdessen der Rand kraeftiger und ein Hauch Flaeche sichtbar. */ .cms-btn-zweit:hover, .au-btn-ghost:hover, a[class*="-btn-ghost"]:hover, a[class*="btn-outline"]:hover { filter: none; background: rgba(37, 99, 235, .08) !important; border-color: #2563eb !important; } html.site-dark .cms-btn-zweit:hover, html.site-dark .au-btn-ghost:hover, html.site-dark a[class*="-btn-ghost"]:hover, html.site-dark a[class*="btn-outline"]:hover { background: rgba(255, 255, 255, .10) !important; border-color: rgba(255, 255, 255, .6) !important; } /* Tastaturbedienung: Wer mit der Tabulatortaste navigiert, muss sehen, wo er steht. Ohne das ist die Seite fuer manche unbenutzbar. */ .cms-slide-btn:focus-visible, .header-action-btn:focus-visible, .au-btn:focus-visible, a.btn:focus-visible, button[type="submit"]:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; } /* --------------------------------------------------------------------- Telefonknoepfe Sie haben keine Klasse und ihren Rahmen direkt im style-Attribut. Deshalb ueber die Zieladresse ansprechen: tel: gibt es nur bei Anrufverweisen. --------------------------------------------------------------------- */ a[href^="tel:"] { transition: filter .16s ease, transform .16s ease, background-color .16s ease; } /* Nur die knopfartigen: mit Rahmen oder Grund, nicht die schlichten Textverweise in der Fusszeile. */ a[href^="tel:"][style*="border"], a[href^="tel:"][style*="background"], a[href^="tel:"][class*="border"], a[href^="tel:"][class*="bg-"] { cursor: pointer; } a[href^="tel:"][style*="border"]:hover, a[href^="tel:"][class*="border"]:hover { background: rgba(37, 99, 235, .08) !important; border-color: #2563eb !important; transform: translateY(-1px); } a[href^="tel:"][style*="background"]:hover, a[href^="tel:"][class*="bg-"]:hover { filter: brightness(1.1); transform: translateY(-1px); } html.site-dark a[href^="tel:"][style*="border"]:hover, html.site-dark a[href^="tel:"][class*="border"]:hover { background: rgba(255, 255, 255, .10) !important; border-color: rgba(255, 255, 255, .6) !important; } /* ===================================================================== EINHEITLICHES AUSSEHEN ALLER KNÖPFE Vorbild ist der Knopf "Kostenlose 20-Minuten-Analyse": vollrund, kräftiges Blau, weisse Schrift, weicher blauer Schein. Die Seiten bringen drei Namensschemata mit (btn, cms-btn, au-btn) und setzen Farben teils direkt im style-Attribut. Deshalb hier einmal zentral, mit Auffangregeln fuer alles, was wie ein Knopf aussieht. ===================================================================== */ .cms-slide-btn, .header-action-btn, .au-btn, .footer-btn, .af-weiter, a.btn, a[class*="btn-solid"], a[class*="btn-primary"], a[class*="bg-blue-6"], a[class*="bg-blue-7"], button[type="submit"], .pricing-card .cms-btn, a[style*="background:#2563eb"], a[style*="background: #2563eb"], a[style*="background-color:#2563eb"], a[style*="background-color: #2563eb"] { border-radius: 999px !important; background: #2563eb !important; color: #ffffff !important; font-weight: 700 !important; letter-spacing: .01em; border: none !important; box-shadow: 0 12px 26px -10px rgba(37, 99, 235, .75); padding: 13px 30px; text-decoration: none; } /* Umrissknöpfe: gleiche Form, aber ohne Fläche - sie sollen dem Hauptknopf die Aufmerksamkeit lassen. */ .cms-btn-zweit, .au-btn-ghost, a[class*="btn-ghost"], a[class*="btn-outline"], a[class*="btn-zweit"] { border-radius: 999px !important; background: transparent !important; border: 2px solid #cbd5e1 !important; color: #1d4ed8 !important; font-weight: 700 !important; box-shadow: none !important; padding: 12px 28px; } html.site-dark .cms-btn-zweit, html.site-dark .au-btn-ghost, html.site-dark a[class*="btn-ghost"], html.site-dark a[class*="btn-outline"], html.site-dark a[class*="btn-zweit"] { border-color: rgba(255, 255, 255, .32) !important; color: #e8ecf2 !important; } /* Im Dunkelmodus traegt der Schein etwas kraeftiger - sonst geht er auf dunklem Grund unter. */ html.site-dark .cms-slide-btn, html.site-dark .header-action-btn, html.site-dark .au-btn-solid, html.site-dark button[type="submit"], html.site-dark a[class*="btn-solid"] { box-shadow: 0 14px 30px -10px rgba(37, 99, 235, .9); } /* Telefonknöpfe mit Rahmen bekommen dieselbe Form */ a[href^="tel:"][style*="border"], a[href^="tel:"][class*="border"] { border-radius: 999px !important; } /* ===================================================================== ZWEISPALTIGE ABSCHNITTE — LEERRAUM UND AUSRICHTUNG Bei "Wer hinter nissa.ch steht" ist die rechte Karte 390 Pixel hoch, der Text darin aber nur 309: Die Karte wird auf die Hoehe des Bildes gestreckt, der Text klebt oben, darunter klafft eine Luecke. Statt die Streckung abzuschalten (gleich hohe Karten sind an anderen Stellen erwuenscht) wird der Inhalt mittig gesetzt. Die Luecke verteilt sich damit auf oben und unten und faellt nicht mehr auf. ===================================================================== */ .content-block:has(> .content-text) { display: flex; flex-direction: column; justify-content: center; } /* Absaetze im Fliesstext brauchen Luft. Ohne Abstand lesen sich mehrere Saetze wie ein einziger Block. */ .content-text p { margin-bottom: .85rem; } .content-text p:last-child { margin-bottom: 0; } /* Der Telefonknopf unter dem Bild stand linksbuendig, der Knopf daneben mittig - das wirkte unabsichtlich. Beide mittig. */ .my-4:has(a[href^="tel:"]), .my-4:has(> a[href^="tel:"]) { text-align: center; } /* Aeltere Browser ohne :has - dort bleibt alles wie bisher, nur ohne die Verbesserung. Kein Schaden. */