/ mit border-radius, ohne ein einziges Bild. Das lädt nichts nach und bleibt in jeder Auflösung scharf. -------------------------------------------------------------------------- */ .hw-szene { position: fixed; inset: 0; z-index: 0; overflow: hidden; /* Damit Klicks durch die Dekoration hindurchgehen und nicht auf ihr hängenbleiben. Ohne das wären Links darunter nicht anklickbar. */ pointer-events: none; } /* Eine feine Körnung über die ganze Fläche, damit die Verläufe nicht wie glatte Farbflächen wirken. Zwei Punktraster in leicht unterschiedlicher Größe, beide fast durchsichtig. */ .hw-szene::after { position: absolute; inset: 0; content: ""; background-image: radial-gradient(circle at 30% 20%, rgba(126, 142, 93, 0.025) 0 1px, transparent 1px), radial-gradient(circle at 70% 70%, rgba(23, 63, 37, 0.025) 0 1px, transparent 1px); background-size: 13px 13px, 17px 17px; opacity: 0.65; } /* Die geschwungenen Wege: sehr große Kreise mit dickem Rahmen, von denen nur ein Ausschnitt im Bild liegt. Daher die negativen Positionen. */ .hw-weg { position: absolute; border: solid rgba(174, 162, 116, 0.11); border-radius: 50%; } .hw-weg--links { top: 275px; left: -385px; width: 760px; height: 610px; border-width: 54px; transform: rotate(-31deg); } .hw-weg--rechts { right: -445px; bottom: 40px; width: 990px; height: 450px; border-width: 68px; transform: rotate(-15deg); } /* Hügel: oben rund, unten gerade. */ .hw-huegel { position: absolute; background: rgba(178, 167, 119, 0.1); border-radius: 50% 50% 0 0; } .hw-huegel--eins { right: -170px; bottom: 78px; width: 780px; height: 235px; transform: rotate(-6deg); } .hw-huegel--zwei { right: 210px; bottom: 74px; width: 430px; height: 110px; opacity: 0.55; } /* Der Baum rechts: drei runde Kronen und ein Stamm mit zwei Ästen. */ .hw-baum { position: absolute; right: 10.5%; top: 27%; width: 150px; height: 210px; opacity: 0.07; } .hw-baum-stamm { position: absolute; bottom: 0; left: 67px; width: 18px; height: 105px; background: var(--forest); border-radius: 12px 12px 2px 2px; } /* Die beiden Äste. ::before und ::after sind Elemente, die es nur in CSS gibt – so bleibt das HTML frei von leeren Hilfs-. */ .hw-baum-stamm::before, .hw-baum-stamm::after { position: absolute; top: 5px; width: 12px; height: 75px; content: ""; background: var(--forest); border-radius: 10px; /* Gedreht wird um den unteren Punkt, damit die Äste am Stamm ansetzen und nicht in der Luft schweben. */ transform-origin: bottom; } .hw-baum-stamm::before { left: -18px; transform: rotate(-39deg); } .hw-baum-stamm::after { right: -18px; transform: rotate(39deg); } .hw-baum-krone { position: absolute; background: var(--forest); border-radius: 50%; } .hw-baum-krone--eins { top: 12px; left: 25px; width: 104px; height: 92px; } .hw-baum-krone--zwei { top: 47px; left: 0; width: 85px; height: 82px; } .hw-baum-krone--drei { top: 49px; right: 0; width: 85px; height: 80px; } /* Zwei große, sehr blasse Pfoten als Deko. filter: grayscale(1) nimmt dem bunten Emoji die Farbe – sonst läge ein brauner Fleck in der grünen Landschaft. */ .hw-pfote-deko { position: absolute; color: var(--olive); filter: grayscale(1); line-height: 1; opacity: 0.075; } .hw-pfote-deko--eins { top: 10%; left: 10%; font-size: 5.5rem; transform: rotate(-15deg); } .hw-pfote-deko--zwei { right: 7%; bottom: 21%; font-size: 4.8rem; transform: rotate(15deg); } /* Zweige mit Blättern in zwei Ecken. Der Zweig selbst ist ein flacher, gedrehter Balken (::before), die Blätter liegen einzeln darauf. */ .hw-zweig { position: absolute; width: 285px; height: 180px; opacity: 0.72; } .hw-zweig::before { position: absolute; top: 88px; left: 8px; width: 280px; height: 3px; content: ""; background: var(--olive); border-radius: 50%; transform: rotate(26deg); transform-origin: left; } .hw-zweig--oben { top: -28px; right: -42px; transform: rotate(-8deg); } /* 171 Grad statt 180: leicht schief wirkt gewachsen statt gespiegelt. */ .hw-zweig--unten { bottom: 64px; left: -80px; transform: rotate(171deg); } /* Blattform: zwei gegenüberliegende Ecken rund, die anderen spitz. */ .hw-blatt { position: absolute; width: 55px; height: 25px; background: var(--olive); border-radius: 100% 0 100% 0; } .hw-blatt--eins { top: 46px; left: 41px; transform: rotate(34deg); } .hw-blatt--zwei { top: 89px; left: 78px; transform: rotate(192deg); } .hw-blatt--drei { top: 69px; left: 119px; transform: rotate(34deg); } .hw-blatt--vier { top: 112px; left: 155px; transform: rotate(193deg); } .hw-blatt--fuenf { top: 93px; left: 199px; transform: rotate(34deg); } .hw-blatt--sechs { top: 137px; left: 231px; transform: rotate(193deg); } /* -------------------------------------------------------------------------- 3. Inhaltsbereich -------------------------------------------------------------------------- */ /* z-index: 1 hebt den Inhalt über die Landschaft (die liegt auf 0). min() begrenzt die Breite auf 1120px, lässt aber auf schmalen Fenstern immer 20px Luft an jeder Seite. */ .hw-start-inhalt { position: relative; z-index: 1; width: min(1120px, calc(100% - 40px)); margin: 0 auto; /* clamp(): mindestens 24px, am liebsten 4% der Fensterhöhe, höchstens 48px. Auf niedrigen Fenstern rückt der Inhalt also automatisch nach oben. */ padding: clamp(24px, 4vh, 48px) 0 28px; flex: 1; } .hw-hero { max-width: 950px; margin: 0 auto; text-align: center; } /* Das Logo ist quadratisch (1254 × 1254) und wird rund beschnitten. Angezeigt wird es mit rund 150px – die geladene Datei hat 320px bzw. 480px, damit es auf hochauflösenden Displays scharf bleibt (siehe srcset in index.php). */ .hw-hero-logo { width: clamp(140px, 16vw, 160px); height: auto; display: block; margin: 0 auto clamp(12px, 2vh, 22px); border-radius: 50%; filter: drop-shadow(0 12px 24px rgba(23, 63, 37, 0.08)); } /* Überschreibt die kleinere h1-Regel aus style.css (siehe Kopf der Datei). Die Schriftgröße wächst mit dem Fenster: 2,55rem bis 4,65rem. */ .hw-hero h1 { margin: 0; color: var(--forest); font-family: var(--hw-serif); font-size: clamp(2.55rem, 5.1vw, 4.65rem); font-weight: 700; line-height: 1.04; /* Große Serifenschrift wirkt schnell auseinandergezogen – die Buchstaben rücken deshalb leicht zusammen. */ letter-spacing: -0.035em; /* Der Umbruch steht fest im HTML (
vor "Hundewegweiser"), und der Markenname soll nie mit Trennstrich zerlegt werden. "manual" schaltet die automatische Silbentrennung aus style.css für diese Überschrift ab; die Schriftgrößen sind so bemessen, dass beide Zeilen überall ohne Trennung passen. */ hyphens: manual; } .hw-subtitle { margin: 15px 0 0; color: var(--forest-light); font-size: clamp(1.25rem, 2.4vw, 2rem); font-weight: 750; letter-spacing: -0.02em; } /* Der Pfoten-Trenner: eine Linie, eine Pfote, eine Linie. grid mit "1fr auto 1fr" heißt: die beiden Linien teilen sich den Platz, der nach der Pfote übrig bleibt – die Pfote sitzt dadurch exakt mittig. */ .hw-pfoten-trenner { width: min(370px, 75%); margin: 17px auto 14px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 15px; color: var(--olive); } .hw-pfoten-trenner span { height: 1px; background: var(--olive-light); } .hw-pfoten-trenner b { filter: grayscale(1); font-size: 1.45rem; font-weight: 400; line-height: 1; } /* Fließtext auf schmalerer Spalte als die Überschrift: lange Zeilen sind schwer zu lesen, weil das Auge den Zeilenanfang nicht wiederfindet. */ .hw-intro { max-width: 705px; margin: 0 auto; font-size: clamp(1rem, 1.55vw, 1.27rem); line-height: 1.55; } /* Der kursive Satz unter der Kurzbeschreibung. */ .hw-hero-note { margin: 12px 0 0; color: var(--forest-light); font-family: var(--hw-serif); font-size: clamp(1.05rem, 1.7vw, 1.3rem); font-style: italic; } /* -------------------------------------------------------------------------- 4. Die beiden Schaltflächen -------------------------------------------------------------------------- Bewusst eigene Klassen statt .hw-btn aus style.css: die Knöpfe hier sind deutlich größer, tragen die Serifenschrift und liegen nebeneinander mittig. Mit Zusatzregeln auf .hw-btn müsste fast jede Eigenschaft wieder überschrieben werden – dann sind eigene Klassen ehrlicher. -------------------------------------------------------------------------- */ .hw-aktionen { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 11px; } .hw-start-btn { /* 48px Mindesthöhe: die übliche Größe, die sich mit dem Finger sicher treffen lässt. */ min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 23px; border-radius: 999px; box-shadow: 0 9px 22px rgba(23, 63, 37, 0.16); font-family: var(--hw-serif); font-size: 1.03rem; font-weight: 700; text-decoration: none; transition: color 180ms ease, background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; } /* Gefüllt – die Hauptaktion. */ .hw-start-btn--voll { color: var(--cream); background: linear-gradient(135deg, #264f2b, var(--forest-dark)); } .hw-start-btn--voll:hover { color: var(--white); box-shadow: 0 12px 28px rgba(23, 63, 37, 0.22); transform: translateY(-2px); } /* Umrandet – die Nebenaktion. */ .hw-start-btn--rand { color: var(--forest); background: var(--paper); border: 2px solid var(--forest); } .hw-start-btn--rand:hover { color: var(--white); background: var(--forest); box-shadow: 0 12px 28px rgba(23, 63, 37, 0.22); transform: translateY(-2px); } /* Sichtbare Markierung für alle, die mit der Tastatur navigieren. Bitte nicht durch "outline: none" ersetzen. */ .hw-start a:focus-visible, .hw-kachel:focus-visible { outline: 3px solid var(--olive-light); outline-offset: 4px; border-radius: 6px; } /* Das Bildchen im Knopf (WhatsApp). Es sitzt links neben der Beschriftung, weil der Knopf mit display: inline-flex und gap arbeitet – der Abstand kommt also von dort und muss hier nicht noch einmal gesetzt werden. */ .hw-btn-icon { display: inline-flex; /* flex-shrink: 0 – das Icon darf nicht zusammengedrückt werden, wenn die Beschriftung auf schmalen Displays viel Platz braucht. */ flex-shrink: 0; } .hw-btn-icon svg { display: block; width: 20px; height: 20px; } /* Die kleine Zeile unter den Knöpfen: Anmelden und Mailadresse. width: max-content + margin auto zentriert die Zeile, ohne dass sie über die ganze Breite läuft. */ .hw-mailadresse { width: max-content; max-width: 100%; margin: 9px auto 0; display: block; color: var(--muted); font-size: 0.85rem; font-weight: 650; text-align: center; } /* padding: dieselbe Ueberlegung wie bei der Fusszeile in style.css – zwei Links dicht nebeneinander, als reine Textzeile nur 18 Pixel hoch. Hier stand kurz ein negatives margin, um die Zeile optisch genau da zu halten, wo sie vorher war. Das war falsch: die groessere Flaeche waechst dann nach oben und stoesst direkt an den E-Mail-Knopf darueber. Zwei Ziele ohne Abstand dazwischen sind schlimmer als eines, das etwas tiefer sitzt. Die Zeile rutscht jetzt rund 9 Pixel nach unten – das faellt auf einer Seite dieser Laenge niemandem auf. */ .hw-mailadresse a { display: inline-block; padding: 0.55rem 0.25rem; color: var(--forest-light); text-underline-offset: 3px; } /* Die Trennpunkte zwischen den beiden Angaben etwas zurücknehmen. */ .hw-mailadresse span { margin: 0 4px; color: var(--olive-light); } /* -------------------------------------------------------------------------- 5. Die vier Kacheln -------------------------------------------------------------------------- Anders als auf der Coming-Soon-Seite ist jede Kachel jetzt ein Link auf eine eigene Seite. Das umschließt die ganze Kachel, damit die Klickfläche so groß ist wie das, was man sieht. -------------------------------------------------------------------------- */ .hw-kacheln { margin-top: clamp(28px, 4vh, 48px); display: grid; grid-template-columns: repeat(4, 1fr); /* overflow: hidden schneidet die Ecken der äußeren Kacheln mit ab – sonst stünde ihr Hintergrund beim Überfahren über die runde Kante des Kastens hinaus. */ overflow: hidden; background: var(--paper); border: 1px solid rgba(98, 104, 71, 0.12); border-radius: 22px; box-shadow: var(--shadow); backdrop-filter: blur(7px); } .hw-kachel { /* min-width: 0 erlaubt der Kachel, schmaler als ihr längstes Wort zu werden. Ohne das sprengt ein langes Wort das Raster. */ min-width: 0; display: block; padding: 20px 21px 22px; color: inherit; text-align: center; text-decoration: none; transition: background-color 180ms ease, transform 180ms ease; } .hw-kachel + .hw-kachel { border-left: 1px solid rgba(125, 142, 93, 0.28); } .hw-kachel:hover { color: inherit; background: rgba(255, 255, 255, 0.62); } .hw-kachel:hover .hw-kachel-titel { text-decoration: underline; text-underline-offset: 3px; } .hw-kachel-icon { width: 58px; height: 48px; margin: 0 auto 7px; display: grid; place-items: center; color: var(--forest-light); } .hw-kachel-icon svg { display: block; width: 38px; height: 38px; } /* Überschrift der Kachel. Im HTML ist das ein h2 – überschreibt also die h2-Regel aus style.css, die eine Linie darunter zeichnen würde. */ .hw-kachel-titel { margin: 0 0 4px; padding: 0; border: none; color: var(--forest); font-family: var(--hw-serif); font-size: 1.16rem; } .hw-kachel p { max-width: 210px; margin: 0 auto; font-size: 0.82rem; line-height: 1.42; } /* -------------------------------------------------------------------------- 6. Fußzeile auf der Startseite -------------------------------------------------------------------------- Die Fußzeile selbst kommt aus style.css (.hw-seitenfuss) und ist auf allen Seiten dieselbe – das ist Absicht: dort stehen Impressum und Kontakt, und die müssen überall erreichbar sein. Gäbe es hier eine zweite, eigene Fußzeile, müssten die Links an zwei Stellen gepflegt werden. Hier stehen deshalb nur die beiden Dinge, die auf der Startseite anders sind als sonst. -------------------------------------------------------------------------- */ /* 1. Über die Landschaft heben. Die Dekoration liegt auf z-index 0 und ist "position: fixed" – ohne diese Regel läge der Baum halb über der Fußzeile. */ /* 2. Etwas mehr Höhe. Auf der Startseite ist die Fußzeile ein Abschluss des Ganzen und nicht nur eine Zeile unter einem Text. */ .hw-start .hw-seitenfuss { position: relative; z-index: 2; padding: 19px 20px; } /* -------------------------------------------------------------------------- 7. Mittlere Bildschirme (Tablet) -------------------------------------------------------------------------- */ @media (max-width: 900px) { .hw-start-inhalt { width: min(760px, calc(100% - 32px)); } .hw-baum { right: -10px; } /* Vier Kacheln nebeneinander wären hier zu schmal – also zwei mal zwei. */ .hw-kacheln { grid-template-columns: repeat(2, 1fr); } /* Die dritte Kachel beginnt jetzt eine neue Zeile und darf links keine Trennlinie mehr haben. Stattdessen bekommen die Kacheln der zweiten Zeile eine Linie nach oben. */ .hw-kachel:nth-child(3) { border-left: 0; } .hw-kachel:nth-child(n + 3) { border-top: 1px solid rgba(125, 142, 93, 0.28); } } /* -------------------------------------------------------------------------- 8. Kleine Bildschirme (Handy) -------------------------------------------------------------------------- */ @media (max-width: 620px) { /* Die Dekoration wird kleiner und blasser: auf einem Handydisplay konkurriert sie sonst mit dem Text um Aufmerksamkeit. */ .hw-zweig { width: 210px; opacity: 0.45; transform: scale(0.78); } .hw-zweig--oben { top: -48px; right: -85px; } .hw-zweig--unten { bottom: 55px; left: -100px; transform: rotate(171deg) scale(0.78); } .hw-pfote-deko--eins { top: 19%; left: -10px; font-size: 4rem; } .hw-pfote-deko--zwei { right: -15px; bottom: 26%; font-size: 3.7rem; } .hw-baum { top: 42%; right: -58px; transform: scale(0.7); } .hw-start-inhalt { width: min(100% - 24px, 620px); padding-top: 22px; } .hw-hero-logo { width: min(45vw, 150px); } /* "Hundewegweiser" steht durch das
im HTML allein in seiner Zeile und darf nicht getrennt werden. Nachgemessen ist das Wort in dieser Serifenschrift (mit letter-spacing) 8,77-mal so breit wie die Schriftgröße; die Inhaltsspalte ist "100% - 24px" breit. Damit das Wort sicher passt, muss die Schrift unter (100vw - 24px) / 8,77 bleiben – 10,2vw erfüllt das ab etwa 230px Fensterbreite. Vorher stand hier 11,4vw: gut 10% größer, wodurch das Wort z. B. bei 375px nur mit Trennstrich passte. Der Mindestwert 1,8rem (28,8px) ist so gewählt, dass es auch beim schmalsten verbreiteten Display klappt: 280px (Frontdisplay des Galaxy Fold) bietet 256px Platz, das Wort braucht dann 253px. */ .hw-hero h1 { font-size: clamp(1.8rem, 10.2vw, 3.4rem); } .hw-subtitle { margin-top: 11px; } .hw-pfoten-trenner { margin-top: 14px; margin-bottom: 11px; } .hw-intro { max-width: 94%; } /* Die Knöpfe stehen untereinander und füllen die Breite – nebeneinander wären sie zu schmal zum Treffen. */ .hw-aktionen { width: min(100%, 360px); margin-right: auto; margin-left: auto; } .hw-start-btn { width: 100%; } /* Kacheln untereinander, Icon links neben dem Text statt darüber: spart Höhe, sodass man weniger scrollen muss. */ .hw-kacheln { grid-template-columns: 1fr; margin-top: 30px; border-radius: 18px; } .hw-kachel { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 13px; padding: 17px 19px; text-align: left; } .hw-kachel + .hw-kachel, .hw-kachel:nth-child(3) { border-top: 1px solid rgba(125, 142, 93, 0.28); border-left: 0; } .hw-kachel-icon { margin: 0 auto; } .hw-kachel p { max-width: none; margin: 0; } } /* -------------------------------------------------------------------------- 9. Rücksicht auf Bewegungsempfindlichkeit -------------------------------------------------------------------------- Wer im Betriebssystem "Bewegung reduzieren" eingestellt hat, bekommt keine Übergänge zu sehen. Für manche Menschen lösen Bewegungen auf dem Bildschirm Schwindel oder Übelkeit aus. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .hw-start *, .hw-start *::before, .hw-start *::after { transition-duration: 0.01ms !important; } .hw-start-btn:hover, .hw-kachel:hover { transform: none; } } /* -------------------------------------------------------------------------- 10. Druckansicht -------------------------------------------------------------------------- Die Startseite druckt vermutlich nie jemand aus. Falls doch, soll wenigstens kein halbes Blatt Grünfläche dabei herauskommen. -------------------------------------------------------------------------- */ @media print { .hw-szene, .hw-aktionen, .hw-startfuss { display: none !important; } .hw-start { background: #fff; } .hw-kacheln { background: none; box-shadow: none; backdrop-filter: none; } }