/* ========================================================================== HAUSTIERSCHUTZHELDEN — VERSPIELTE STILEBENE ========================================================================== Diese Datei liegt ÜBER styles.css und ändert nur das Aussehen: Farben, Schrift, Formen, Bewegung. Struktur, Rechenlogik, Barrierefreiheit und das responsive Verhalten bleiben unberührt. Abschalten: im die Zeile mit verspielt.css entfernen — die Seite fällt dann auf das ruhige Design zurück. ========================================================================== */ /* ---------- 1. Farben: heller, fröhlicher, mehr Kontrast im Spiel ---------- */ :root{ /* Versionsmarke. Die Pruefseite liest sie aus. Weicht sie von der Marke in spielereien.js ab, liegt eine alte Datei im Browsercache. */ --hsh-version: "2026-09-07-a"; --brand-logo: #0B84FF; --brand: #0A6ADB; --brand-700: #0A55AF; --brand-800: #12386E; --brand-100: #CFE4FF; --brand-50: #E8F2FF; --accent: #FF9351; --accent-600: #F0762E; --accent-100: #FFE0CC; --accent-50: #FFF2E9; --accent-ink: #4A2409; /* Dritte Farbe fürs Spiel: sonniges Gelb */ --sonne: #FFC94D; --sonne-50: #FFF6DF; /* Vierte: frisches Mint für Abwechslung in den Kacheln */ --mint: #7BD3B4; --mint-50: #E4F7F0; --ink: #21303F; --ink-2: #46586B; --muted: #5A6D80; --line: #E3ECF5; --line-2: #EFF5FA; --cream: #F4F9FF; --surface: #FFFFFF; --sand: #FFF6E4; /* Runder, weicher, kindlicher */ --r-sm: 14px; --r: 22px; --r-lg: 30px; --r-xl: 40px; --sh-1: 0 2px 0 rgba(33,48,63,.04), 0 6px 18px -8px rgba(33,48,63,.18); --sh-2: 0 3px 0 rgba(33,48,63,.05), 0 16px 34px -14px rgba(33,48,63,.28); --sh-3: 0 4px 0 rgba(33,48,63,.06), 0 30px 60px -22px rgba(33,48,63,.34); --ff-head: "Baloo 2", "Segoe UI", system-ui, sans-serif; --ff-body: "Nunito", "Segoe UI", system-ui, sans-serif; /* Federnde Kurve für alle Bewegungen */ --feder: cubic-bezier(.34, 1.56, .64, 1); } body{ font-size:17.5px; } /* ---------- 2. Schrift: rund und freundlich ---------- */ h1,h2,h3,h4{ letter-spacing:-.01em; line-height:1.1; } h1{ font-weight:800; } h2{ font-weight:800; } h3{ font-weight:700; } .eyebrow{ letter-spacing:.1em; } /* ---------- 3. Schaltflächen: dick, rund, mit Federung ---------- */ .btn{ border-width:0; font-weight:800; padding:16px 30px; box-shadow:0 4px 0 rgba(0,0,0,.10); transition:transform .22s var(--feder), box-shadow .22s ease, background .2s ease; } .btn:hover{ transform:translateY(-3px) rotate(-.6deg); box-shadow:0 7px 0 rgba(0,0,0,.10); } .btn:active{ transform:translateY(1px); box-shadow:0 2px 0 rgba(0,0,0,.10); } .btn--ghost{ background:var(--surface); color:var(--brand); box-shadow:0 4px 0 var(--brand-100); } .btn--ghost:hover{ box-shadow:0 7px 0 var(--brand-100); } .btn--lg{ padding:19px 38px; } .btn--sm{ padding:12px 22px; } /* ---------- 4. Karten: runder, mit farbiger Standlinie ---------- */ .card, .cost-card, .tariff, .testi, .contact-tile, .calc__panel, .quickbar__inner{ border-radius:var(--r-lg); } .card, .cost-card, .testi, .contact-tile{ border:0; box-shadow:0 3px 0 var(--line), 0 14px 30px -18px rgba(33,48,63,.3); transition:transform .28s var(--feder), box-shadow .28s ease; } .card--hover:hover, .contact-tile:hover{ transform:translateY(-6px) rotate(-.5deg); box-shadow:0 6px 0 var(--brand-100), 0 22px 44px -20px rgba(33,48,63,.34); } /* Runde Symbolfelder in wechselnden Farben — bringt Leben in die Reihe */ .card__icon{ border-radius:50%; } .grid > *:nth-child(4n+1) .card__icon{ background:var(--brand-50); color:var(--brand); } .grid > *:nth-child(4n+2) .card__icon{ background:var(--sonne-50); color:#B07A00; } .grid > *:nth-child(4n+3) .card__icon{ background:var(--mint-50); color:#136B4F; } .grid > *:nth-child(4n+4) .card__icon{ background:var(--accent-50); color:var(--accent-600); } /* ---------- 5. Tarifkarten: dicker Rahmen, schräges Band ---------- */ .tariff{ border:3px solid var(--line); box-shadow:0 4px 0 var(--line-2); } .tariff--featured{ border-color:var(--brand); box-shadow:0 5px 0 var(--brand-100), 0 26px 50px -24px rgba(10,106,219,.45); } .tariff__flag{ border-radius:var(--pill); transform:translateX(-50%) rotate(-2.5deg); box-shadow:0 3px 0 rgba(0,0,0,.12); letter-spacing:.06em; } .tariff:hover{ transform:translateY(-6px) rotate(.4deg); } @media (min-width:961px){ .tariff--featured:hover{ transform:scale(1.035) translateY(-6px) rotate(.4deg); } } .tariff__price .amount{ font-family:var(--ff-head); } /* ---------- 6. Fotos in organischen Formen statt Rechtecken ---------- */ .helden .ph{ border-radius:44% 56% 52% 48% / 50% 45% 55% 50%; overflow:hidden; transition:border-radius 1.2s ease, transform .5s var(--feder); } .helden .ph:nth-child(2){ border-radius:56% 44% 47% 53% / 46% 54% 46% 54%; } .helden .ph:nth-child(3){ border-radius:48% 52% 58% 42% / 54% 44% 56% 46%; } .helden .ph:nth-child(4){ border-radius:53% 47% 44% 56% / 47% 56% 44% 53%; } .helden .ph:nth-child(5){ border-radius:45% 55% 55% 45% / 55% 48% 52% 45%; } .helden .ph:nth-child(6), .helden .ph:nth-child(7){ border-radius:var(--r-xl); } .helden{ gap:18px; } /* Beim Ueberfahren hebt sich die Kachel leicht an und kippt ein wenig. styles.css setzt fuer denselben Zustand ebenfalls ein transform; weil verspielt.css spaeter geladen wird, gilt diese Angabe. z-index und Schattenwurf von dort bleiben erhalten. Innerhalb dieser Datei darf es nur diese eine transform-Regel geben. */ .helden .ph{ transition:transform .5s var(--feder), box-shadow .4s ease; } .helden .ph:hover{ transform:translateY(-6px) scale(1.04) rotate(-1.2deg); } /* Der warme Schleier braucht dieselbe Form wie die Kachel */ .helden .ph::after{ border-radius:inherit; } /* Kopfbereich: siehe den Abschnitt "Kopfbereich: Text mittig oben, Bilder darunter" weiter unten in dieser Datei. Dort steht die gueltige Form. Hier stand vorher eine Regel mit rahmenloser, weich auslaufender Kante; sie ist entfallen, weil die ausgefransten Raender wie ein misslungener Freisteller wirkten. */ /* ---------- 7. Wellenförmige Übergänge zwischen den Abschnitten ---------- */ .section--white, .section--cream, .section--mint{ position:relative; } .section--mint::before, .section--mint::after{ content:""; position:absolute; left:0; right:0; height:26px; background-repeat:repeat-x; background-size:110px 26px; pointer-events:none; } .section--mint::before{ top:-1px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='26' viewBox='0 0 110 26'%3E%3Cpath d='M0 26V8c14 0 14 10 27.5 10S55 8 55 8s13.5 10 27.5 10S110 8 110 8v18z' fill='%23FFF6E4'/%3E%3C/svg%3E"); transform:scaleY(-1); } .section--mint::after{ bottom:-1px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='26' viewBox='0 0 110 26'%3E%3Cpath d='M0 26V8c14 0 14 10 27.5 10S55 8 55 8s13.5 10 27.5 10S110 8 110 8v18z' fill='%23FFFFFF'/%3E%3C/svg%3E"); } /* ---------- 8. Badges wie Aufkleber ---------- */ .badge{ border-width:0; font-weight:800; padding:8px 16px; box-shadow:0 3px 0 rgba(0,0,0,.08); transform:rotate(-1.5deg); } .badge--accent{ background:var(--sonne-50); color:#8A5A00; } /* ---------- 9. Ablauf-Schritte: bunte Kreise ---------- */ .step__num{ border:0; color:#fff; box-shadow:0 4px 0 rgba(0,0,0,.10); font-family:var(--ff-head); } .steps > *:nth-child(1) .step__num{ background:var(--brand); } .steps > *:nth-child(2) .step__num{ background:var(--sonne); color:#5A3B00; } .steps > *:nth-child(3) .step__num{ background:var(--mint); color:#0E4A36; } .steps > *:nth-child(4) .step__num{ background:var(--accent); color:var(--accent-ink); } /* ---------- 10. Häkchen und kleine Symbole hüpfen ---------- */ .check{ box-shadow:0 3px 0 rgba(10,106,219,.25); } .hero__usps li{ transition:transform .25s var(--feder); } .hero__usps li:hover{ transform:translateX(5px); } @media (prefers-reduced-motion:no-preference){ .card--hover:hover .card__icon, .contact-tile:hover .contact-tile__icon{ animation:wackeln .55s ease-in-out; } } @keyframes wackeln{ 0%,100%{ transform:rotate(0); } 25%{ transform:rotate(-9deg) scale(1.06); } 75%{ transform:rotate(9deg) scale(1.06); } } /* ---------- 11. Formularfelder: rund und weich ---------- */ .input, select.input, textarea.input{ border-radius:16px; border-width:2px; border-color:var(--line); } .choice label{ border-radius:20px; border-width:2px; transition:transform .22s var(--feder), border-color .2s ease, background .2s ease; } .choice label:hover{ transform:translateY(-3px); } .choice input:checked + label{ box-shadow:0 4px 0 var(--brand-100); transform:translateY(-2px); } .addon{ border-radius:20px; border-width:2px; } /* ---------- 12. FAQ: runde Blasen ---------- */ .faq details{ border:0; border-radius:22px; box-shadow:0 3px 0 var(--line); margin-bottom:14px; } .faq details[open]{ box-shadow:0 3px 0 var(--brand-100); } /* ---------- 13. Fussbereich und dunkle Flächen etwas freundlicher ---------- */ .site-footer{ background:#12386E; } .disclaimer{ background:#0E2C58; } .cta-band{ background:linear-gradient(135deg,#12386E 0%, var(--brand-700) 55%, var(--brand) 100%); } /* ---------- 14. Ergebnis im Rechner ---------- */ .result-card{ border-radius:var(--r-xl); } .result-card__price .amount{ font-family:var(--ff-head); } /* ---------- 15. Schwebende Deko im Kopfbereich ---------- */ .hero::before, .hero::after{ content:""; position:absolute; border-radius:50%; pointer-events:none; z-index:0; } .hero::before{ width:190px; height:190px; left:-70px; top:22%; background:radial-gradient(circle at 35% 35%, var(--sonne-50), rgba(255,201,77,.22)); } .hero::after{ width:130px; height:130px; right:6%; bottom:8%; background:radial-gradient(circle at 35% 35%, var(--mint-50), rgba(123,211,180,.22)); } @media (prefers-reduced-motion:no-preference){ .hero::before{ animation:treiben 11s ease-in-out infinite; } .hero::after{ animation:treiben 9s ease-in-out infinite reverse; } } @keyframes treiben{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(14px,-18px) scale(1.07); } } @media (max-width:860px){ .hero::before, .hero::after{ display:none; } } /* ---------- 16. Bewegung abschalten, wenn gewünscht ---------- */ @media (prefers-reduced-motion:reduce){ .btn:hover, .card--hover:hover, .contact-tile:hover, .tariff:hover, .helden .ph:hover, .choice label:hover, .hero__usps li:hover{ transform:none; } } /* ========================================================================== Spielereien — Bewegungsebene zu assets/js/spielereien.js Alles hier ist Beiwerk. Jede Regel muss so gebaut sein, dass die Seite ohne sie vollstaendig benutzbar bleibt. Deshalb: - keine Regel setzt opacity:0 ohne einen Weg zurueck, - jede Deko-Ebene hat pointer-events:none, - am Ende schaltet ein Block fuer "weniger Bewegung" alles wieder ab. ========================================================================== */ /* --- Die Kreise im Kopfbereich schweben ------------------------------- */ /* Das Schweben der Kopfbilder macht bereits styles.css (auf .ph__img, mit drei verschiedenen Laufzeiten). Eine zweite Bewegung auf der Figur darueber sah unruhig aus und ist deshalb entfallen. */ /* --- Knoepfe folgen dem Zeiger ---------------------------------------- */ /* Gefuellte Knoepfe. Wichtig: Es gibt KEINE Klasse .btn--primary in diesem Projekt — der blaue Hauptknopf ist schlicht .btn. Frueher stand hier ".btn--primary, .btn--accent"; damit lief auf dem wichtigsten Knopf der Seite ueberhaupt kein Effekt. */ .btn:not(.btn--ghost):not(.btn--light):not(.btn--outline-light){ transform:translate3d(var(--zug-x,0px), var(--zug-y,0px), 0); transition:transform .28s var(--feder, cubic-bezier(.34,1.56,.64,1)), box-shadow .28s ease, background-color .2s ease; } .btn:not(.btn--ghost):not(.btn--light):not(.btn--outline-light):active{ transform:translate3d(0,1px,0) scale(.98); } /* --- Pfotenspur am linken Rand ---------------------------------------- */ .pfotenspur{ position:fixed; left:16px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:10px; z-index:3; pointer-events:none; /* niemals Klicks abfangen */ } .pfotenspur__pfote{ width:15px; height:15px; opacity:0; transition:opacity .45s ease, transform .45s var(--feder, cubic-bezier(.34,1.56,.64,1)); background-repeat:no-repeat; background-size:contain; background-position:center; /* Pfote als Datei-URI: kein zusaetzlicher Ladevorgang, funktioniert auch beim Oeffnen per Doppelklick. */ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F88A50'%3E%3Cellipse cx='12' cy='16' rx='5.2' ry='4.4'/%3E%3Cellipse cx='5.6' cy='10.4' rx='2.5' ry='3.1'/%3E%3Cellipse cx='10' cy='6.6' rx='2.4' ry='3'/%3E%3Cellipse cx='15.2' cy='6.8' rx='2.4' ry='3'/%3E%3Cellipse cx='19' cy='11' rx='2.4' ry='3'/%3E%3C/svg%3E"); } .pfotenspur__pfote.is-da{ opacity:.42; } @media (max-width:1180px){ .pfotenspur{ display:none; } } /* --- Rasterkinder schwingen nacheinander herein ------------------------ */ /* Der Ausgangszustand haengt an der Klasse "js" — ohne JavaScript stehen die Karten sofort an ihrem Platz. */ .js .grid > *, .js .helden__raster > *, .js .tiles > *{ transition:transform .55s var(--feder, cubic-bezier(.34,1.56,.64,1)); } /* Der Ausgangszustand veraendert NUR die Position, niemals die Deckkraft. Grund: Eine laufende CSS-Transition rangiert ueber der normalen Angabe. Bleibt sie aus irgendeinem Grund haengen — gedrosselter Hintergrundtab, unterbrochene Animation —, dann friert der Ausgangswert ein. Stuende dort eine Deckkraft nahe null, waere der Text dauerhaft unlesbar. So ist der schlimmste denkbare Fall ein um 14 Pixel versetzter Kasten. Das Ein- und Ausblenden macht ohnehin schon .reveal. */ @media (prefers-reduced-motion: no-preference){ .js .grid > *:not(.ist-eingeschwungen), .js .helden__raster > *:not(.ist-eingeschwungen), .js .tiles > *:not(.ist-eingeschwungen){ transform:translateY(14px) scale(.985); } } /* --- Kleine Regungen beim Ueberfahren --------------------------------- */ @keyframes wedeln{ 0%,100%{ transform:rotate(0deg); } 25% { transform:rotate(-9deg); } 75% { transform:rotate(9deg); } } .card--hover:hover .card__icon, .tile:hover .tile__icon{ animation:wedeln .55s ease-in-out; } /* Vertrauenszahlen atmen leicht, sobald sie sichtbar sind. */ @keyframes pochen{ 0%,100%{ transform:scale(1); } 50% { transform:scale(1.045); } } .stat__num{ display:inline-block; } .reveal.is-in .stat__num{ animation:pochen 3.4s ease-in-out 1.2s infinite; } /* --- Wer weniger Bewegung eingestellt hat, bekommt keine -------------- */ @media (prefers-reduced-motion: reduce){ .hero__pic--side, .card--hover:hover .card__icon, .tile:hover .tile__icon, .reveal.is-in .stat__num{ animation:none; } .btn:not(.btn--ghost), .btn--accent, .helden .ph{ transform:none; transition:none; } .pfotenspur{ display:none; } /* Der Ausgangszustand des Rasters wird oben gar nicht erst gesetzt, deshalb ist hier nichts zurueckzunehmen. */ .js .grid > *, .js .helden__raster > *, .js .tiles > *{ transition:none; } } /* ========================================================================== Kostenabschnitt — die Zahlen sollen wirken, nicht nur dastehen ========================================================================== */ /* Der Balken liegt als dritte Zeile unter Bezeichnung und Preis. Dafuer muss die Zeile umbrechen duerfen. */ .cost-row{ flex-wrap:wrap; } .kostenbalken{ flex:0 0 100%; height:6px; margin-top:8px; border-radius:99px; background:var(--sand); overflow:hidden; } .kostenbalken i{ display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg, var(--brand) 0%, var(--accent) 100%); transition:width 1.15s var(--feder, cubic-bezier(.34,1.56,.64,1)); } /* Die Breite kommt aus --anteil, das JavaScript je Zeile berechnet. */ .kostenbalken.ist-voll i{ width:calc(var(--anteil, 0) * 100%); } /* Kostenkarte hebt sich beim Ueberfahren und das Tiersymbol wackelt kurz. */ .cost-card{ transition:transform .4s var(--feder, cubic-bezier(.34,1.56,.64,1)), box-shadow .4s ease, border-color .3s ease; } .cost-card:hover{ transform:translateY(-5px); box-shadow:0 20px 44px -24px rgba(10,58,114,.42); border-color:var(--brand); } .cost-card:hover .cost-card__head svg{ animation:wedeln .55s ease-in-out; } /* Die ueberfahrene Zeile tritt hervor — hilft beim Vergleichen. */ .cost-row{ transition:background-color .25s ease; border-radius:8px; padding-left:8px; padding-right:8px; margin-left:-8px; margin-right:-8px; } .cost-row:hover{ background:var(--cream); } .cost-row:hover dd{ color:var(--brand); } /* ========================================================================== Weitere Regungen ========================================================================== */ /* Ein Strich zeichnet sich unter jede Abschnittsueberschrift, sobald sie ins Bild kommt. Er haengt an .reveal.is-in — der Mechanik, die es schon gibt. Ohne JavaScript ist .is-in sofort gesetzt, dann steht der Strich einfach da. */ .section-head h2{ position:relative; display:inline-block; } .section-head h2::after{ content:""; position:absolute; left:0; right:0; bottom:-10px; height:4px; border-radius:99px; background:linear-gradient(90deg, var(--accent), var(--brand)); transform:scaleX(0); transform-origin:left center; transition:transform .8s var(--feder, cubic-bezier(.34,1.56,.64,1)) .25s; } .section-head--center h2::after{ transform-origin:center; } .section-head.is-in h2::after{ transform:scaleX(1); } /* Ein Lichtschein wandert einmal ueber die Hauptknoepfe, wenn man sie ueberfaehrt. Der Schein darf keine Klicks abfangen. */ .btn:not(.btn--ghost):not(.btn--light):not(.btn--outline-light){ position:relative; overflow:hidden; } .btn:not(.btn--ghost):not(.btn--light):not(.btn--outline-light)::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.42) 50%, transparent 62%); transform:translateX(-120%); } .btn:not(.btn--ghost):not(.btn--light):not(.btn--outline-light):hover::after{ animation:glanz .75s ease-out; } @keyframes glanz{ to{ transform:translateX(120%); } } @media (prefers-reduced-motion: reduce){ /* Balken gibt es bei "weniger Bewegung" gar nicht: spielereien.js steigt in diesem Fall sofort aus und legt sie nie an. */ .cost-card, .cost-row{ transition:none; } .cost-card:hover{ transform:none; } .cost-card:hover .cost-card__head svg{ animation:none; } .section-head h2::after{ transition:none; transform:scaleX(1); } .btn:hover::after{ animation:none; } } /* ========================================================================== Weitere Bewegung — Navigation, FAQ, Schritte, Tarife, Zurueck-Knopf ========================================================================== */ /* ---------- Gleitende Pille in der Hauptnavigation ---------- */ /* Die Klasse "hat-marker" setzt nur spielereien.js. Ohne Skript behalten die Punkte ihren eigenen Hintergrund — es fehlt dann nichts. */ /* NUR auf breiten Bildschirmen positionieren. Unterhalb von 1181 px ist die Navigation ein Klappmenue und in styles.css auf "position:fixed" gesetzt, damit sie ueber der Seite liegt. Ein ungeschuetztes "position:relative" an dieser Stelle hat das ueberschrieben: Das eingeklappte Menue stand dann wieder im Textfluss und machte die Kopfzeile auf dem Handy 446 Pixel hoch, mehr als die halbe Bildschirmhoehe. Sichtbar war davon nichts, weil das Menue auf opacity:0 steht. Den Marker gibt es ohnehin nur mit Maus und ab 981 Pixel Breite. */ @media (min-width:1181px){ .nav__links{ position:relative; } } .nav__marker{ position:absolute; left:0; top:50%; height:38px; margin-top:-19px; border-radius:var(--pill); background:var(--brand-50); opacity:0; pointer-events:none; /* darf niemals einen Punkt abfangen */ z-index:0; transition:transform .34s var(--feder, cubic-bezier(.34,1.56,.64,1)), width .34s var(--feder, cubic-bezier(.34,1.56,.64,1)), opacity .2s ease; } .nav__links.hat-marker > li{ position:relative; z-index:1; } .nav__links.hat-marker a:hover, .nav__links.hat-marker a[aria-current="page"]{ background:transparent; } /* Die Rueckmeldung beim Ueberfahren haengt bewusst NICHT am Marker. Sollte die Pille aus irgendeinem Grund nicht erscheinen, faerbt sich der Punkt trotzdem — und zwar ohne Uebergang, damit auch eine haengende Transition nichts verschlucken kann. */ .nav__links.hat-marker a{ position:relative; transition:none; } .nav__links.hat-marker a:hover{ color:var(--brand-700); } /* ---------- FAQ klappt weich auf ---------- */ /* Nur das Oeffnen wird bewegt. Beim Schliessen entfernt der Browser den Inhalt sofort aus dem Layout — das liesse sich nur mit einem Eingriff in das
-Verhalten animieren, und ein Effekt darf die Bedienung nicht anfassen. */ /* Es wird ausschliesslich die Position bewegt, nicht die Deckkraft. Eine Animation mit "both" haelt ihren Startwert fest, solange sie nicht laeuft. Stand dort opacity:0 — wie in der ersten Fassung —, war die Antwort in einem gedrosselten Tab unsichtbar, obwohl das Aufklappen funktionierte. Im Test war genau das reproduzierbar. Regel im ganzen Projekt: Ein Effekt darf Inhalt nicht verstecken koennen. */ .faq details[open] .faq__body{ animation:aufklappen .34s ease; } @keyframes aufklappen{ from{ transform:translateY(-9px); } to { transform:none; } } .faq summary{ transition:background .2s ease, padding-left .2s ease; } .faq summary:hover{ padding-left:26px; } .faq details[open] summary{ color:var(--brand-700); } /* ---------- Schrittlinie zeichnet sich ---------- */ /* Liegt ueber der gepunkteten Linie aus styles.css und faerbt sie ein, sobald der Schritt ins Bild kommt. */ .step::before{ content:""; position:absolute; top:34px; left:60px; right:-16px; height:2px; background:linear-gradient(90deg, var(--brand), var(--accent)); transform:scaleX(0); transform-origin:left center; z-index:2; transition:transform .9s var(--feder, cubic-bezier(.34,1.56,.64,1)) .15s; } .step:last-child::before{ display:none; } .step.is-in::before{ transform:scaleX(1); } @media (max-width:900px){ .step::before{ display:none; } } /* Die Nummer bekommt beim Erscheinen einen kleinen Sprung. */ .step.is-in .step__num{ animation:hopser .6s var(--feder, cubic-bezier(.34,1.56,.64,1)); } @keyframes hopser{ 0% { transform:scale(.7); } 60% { transform:scale(1.12); } 100%{ transform:scale(1); } } /* ---------- Tarifkarten ---------- */ .tariff{ transition:transform .4s var(--feder, cubic-bezier(.34,1.56,.64,1)), box-shadow .4s ease; position:relative; /* KEIN overflow:hidden. Das Band "Am haeufigsten gewaehlt" sitzt bewusst 13 Pixel oberhalb der Kartenkante. Mit overflow:hidden wurde genau dieser Teil abgeschnitten, das Band war auf der Karte nicht mehr lesbar. Der Lichtschein unten kommt deshalb ohne Beschneidung aus: Er verschiebt nicht das Element, sondern nur seine Hintergrundposition. */ } /* Ergaenzt die Regel weiter oben um den Schatten. Die Drehung muss hier mit aufgefuehrt werden, denn diese spaetere Angabe ersetzt die fruehere vollstaendig, sie addiert sich nicht dazu. */ .tariff:hover{ transform:translateY(-6px) rotate(.4deg); box-shadow:0 26px 54px -28px rgba(10,58,114,.5); } .tariff::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.5) 50%, transparent 60%); background-size:250% 100%; background-position:150% 0; } .tariff:hover::before{ animation:glanzFlaeche .85s ease-out; } @keyframes glanzFlaeche{ from{ background-position:150% 0; } to { background-position:-60% 0; } } /* Das Band muss ueber dem Lichtschein liegen. */ .tariff__flag{ z-index:2; } /* ---------- Galeriekachel wird beim Ueberfahren waermer ---------- */ .helden .ph .ph__img{ transition:filter .45s ease; } .helden .ph:hover .ph__img{ filter:saturate(1.16) brightness(1.04); } /* ---------- Zurueck nach oben ---------- */ .hoch{ position:fixed; right:20px; bottom:20px; width:48px; height:48px; padding:0; border:0; border-radius:50%; background:#fff; box-shadow:0 10px 26px -12px rgba(10,58,114,.55); cursor:pointer; display:grid; place-items:center; opacity:0; transform:translateY(14px) scale(.9); pointer-events:none; /* unsichtbar heisst auch: faengt nichts ab */ transition:opacity .3s ease, transform .3s var(--feder, cubic-bezier(.34,1.56,.64,1)); z-index:60; } .hoch.ist-da{ opacity:1; transform:none; pointer-events:auto; } .hoch:hover{ transform:translateY(-3px); } .hoch svg{ position:absolute; width:44px; height:44px; } .hoch__spur{ fill:none; stroke:var(--sand); stroke-width:3; } .hoch__ring{ fill:none; stroke:var(--accent); stroke-width:3; stroke-linecap:round; transform:rotate(-90deg); transform-origin:center; } .hoch__pfeil{ width:20px; height:20px; position:relative; fill:none; stroke:var(--brand); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; } /* Auf schmalen Displays sitzt unten die feste Aktionsleiste. */ @media (max-width:860px){ .hoch{ bottom:84px; right:14px; } } body:has(#rechner) .hoch{ bottom:20px; } /* ---------- Pfoten nach dem Absenden ---------- */ .jubel{ position:fixed; inset:0; pointer-events:none; /* rein dekorativ */ overflow:hidden; z-index:70; } .jubel__pfote{ position:absolute; top:-40px; width:20px; height:20px; background-repeat:no-repeat; background-size:contain; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F88A50'%3E%3Cellipse cx='12' cy='16' rx='5.2' ry='4.4'/%3E%3Cellipse cx='5.6' cy='10.4' rx='2.5' ry='3.1'/%3E%3Cellipse cx='10' cy='6.6' rx='2.4' ry='3'/%3E%3Cellipse cx='15.2' cy='6.8' rx='2.4' ry='3'/%3E%3Cellipse cx='19' cy='11' rx='2.4' ry='3'/%3E%3C/svg%3E"); animation:rieseln linear forwards; } @keyframes rieseln{ 0% { transform:translateY(0) rotate(0deg); opacity:0; } 10% { opacity:.9; } 100%{ transform:translateY(105vh) rotate(var(--dreh, 180deg)); opacity:0; } } @media (prefers-reduced-motion: reduce){ .nav__marker{ transition:none; } .faq details[open] .faq__body{ animation:none; } .faq summary:hover{ padding-left:22px; } .step::before{ transition:none; transform:scaleX(1); } .step.is-in .step__num{ animation:none; } .tariff{ transition:none; } .tariff:hover{ transform:none; } .tariff:hover::before{ animation:none; } .helden .ph:hover .ph__img{ filter:none; } .hoch{ transition:none; } /* Die Pfoten legt spielereien.js bei "weniger Bewegung" gar nicht erst an. */ } /* ========================================================================== Mehr sichtbare Bewegung Alles hier laeuft ohne JavaScript und ohne Scrollen — reine CSS-Keyframes. Bewegt werden ausschliesslich Position, Groesse und Farbe. Keine Regel fasst die Deckkraft von Inhalt an. ========================================================================== */ /* ---------- Der Kopfbereich faehrt beim Laden ein ---------- */ /* Nur Position, keine Deckkraft: Bleibt eine Animation stehen, sitzt der Text ein paar Pixel daneben — lesbar ist er immer. */ @keyframes einzug{ from{ transform:translateY(30px) scale(.97); } to { transform:none; } } .js .hero__text > *{ animation:einzug .7s var(--feder, cubic-bezier(.34,1.56,.64,1)) both; } .js .hero__text > h1 { animation-delay:.06s; } .js .hero__text > .hero__lead { animation-delay:.12s; } .js .hero__text > .hero__usps { animation-delay:.18s; } .js .hero__text > .btn-row { animation-delay:.24s; } .js .hero__text > .hero__proof { animation-delay:.30s; } /* ---------- Der Haupt-Knopf atmet ---------- */ /* Ein ruhiger Puls alle paar Sekunden, damit der Blick den Weg zum Beitragsrechner findet. Kein Blinken, keine Farbaenderung. */ @keyframes atmen{ 0%, 82%, 100%{ transform:translate3d(var(--zug-x,0px), var(--zug-y,0px), 0) scale(1); } 88% { transform:translate3d(var(--zug-x,0px), var(--zug-y,0px), 0) scale(1.075); } 94% { transform:translate3d(var(--zug-x,0px), var(--zug-y,0px), 0) scale(.99); } } .hero__text .btn-row .btn:not(.btn--ghost), .site-header .btn--accent{ animation:atmen 6s ease-in-out 2s infinite; } /* ---------- Ein Lichtband wandert dauerhaft ueber das CTA-Band ---------- */ @keyframes wandern{ 0% { transform:translateX(-35%); } 100%{ transform:translateX(35%); } } .cta-band{ position:relative; overflow:hidden; } .cta-band::after{ content:""; position:absolute; inset:-20% -40%; pointer-events:none; background:radial-gradient(ellipse at center, rgba(255,255,255,.16), transparent 62%); animation:wandern 11s ease-in-out infinite alternate; } /* ---------- Die Sterne funkeln nacheinander ---------- */ @keyframes funkeln{ 0%, 70%, 100%{ transform:scale(1) rotate(0deg); } 80% { transform:scale(1.28) rotate(-9deg); } 90% { transform:scale(1.05) rotate(4deg); } } .stars svg, .testi__stars svg{ animation:funkeln 5s ease-in-out infinite; } .stars svg:nth-child(2), .testi__stars svg:nth-child(2){ animation-delay:.18s; } .stars svg:nth-child(3), .testi__stars svg:nth-child(3){ animation-delay:.36s; } .stars svg:nth-child(4), .testi__stars svg:nth-child(4){ animation-delay:.54s; } .stars svg:nth-child(5), .testi__stars svg:nth-child(5){ animation-delay:.72s; } /* ---------- Die Kartensymbole atmen leise mit ---------- */ @keyframes tupfen{ 0%, 100%{ transform:translateY(0) rotate(0deg); } 50% { transform:translateY(-7px) rotate(-4deg); } } .card__icon{ animation:tupfen 4.5s ease-in-out infinite; } .grid > *:nth-child(2n) .card__icon{ animation-duration:5.4s; animation-delay:-1.2s; } .grid > *:nth-child(3n) .card__icon{ animation-duration:6.1s; animation-delay:-2.6s; } /* ---------- Der Begleiter wippt beim Laufen ---------- */ .begleiter{ animation:tupfen 2.6s ease-in-out infinite; } /* ========================================================================== "Weniger Bewegung": grosse Bewegung aus, Leben bleibt Frueher wurde hier praktisch alles abgeschaltet — die Seite stand dann vollstaendig still. prefers-reduced-motion richtet sich aber gegen grosse, mitziehende Bewegung, nicht gegen jede Regung. Deshalb bleiben ruhige, kleine Effekte erhalten; alles Wandernde entfaellt. Die Klasse "ruhig" setzt spielereien.js zusaetzlich, damit auch JavaScript dieselbe Grenze zieht. ========================================================================== */ @media (prefers-reduced-motion: reduce){ /* Grosse oder mitziehende Bewegung: aus. */ .hero__pic--main .ph__img, .hero__pic--side .ph__img, .helden .ph.is-settled .ph__img, .bildband.is-settled .ph__img, .cta-band::after, .page-hero .ph.is-settled .ph__img{ animation:none; } .js .hero__text > *{ animation:none; } .hero__text .btn-row .btn, .site-header .btn--accent{ animation:none; } /* Kleine, ortsfeste Regungen: bleiben. Sie ziehen den Blick nicht mit und loesen keine Schwindelgefuehle aus. */ .card__icon{ animation-duration:7s; } .stars svg, .testi__stars svg{ animation-duration:8s; } /* Was das Skript sonst mit Uebergang einblendet, erscheint sofort. */ .ruhig .kostenbalken i{ transition:none; width:calc(var(--anteil, 0) * 100%); } .ruhig .nav__marker{ transition:none; } .ruhig .hoch{ transition:none; } } /* ========================================================================== Heldenerzählung — dezente Zeichen Die Marke heisst Haustierschutzhelden. Die Seite erzaehlt das jetzt auch: Der Halter ist der Held seines Tieres, Haustierschutzhelden ist das Team dahinter. Bewusst zurueckhaltend umgesetzt — Wappen und Wegmarken, keine Umhaenge. Es geht um Versicherung, das muss serioes bleiben. ========================================================================== */ /* ---------- Wappen im Kopf der Tarifkarten ---------- */ .wappen{ display:inline-flex; align-items:center; gap:8px; margin-bottom:10px; font-family:var(--ff-head); font-weight:800; font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; } .wappen svg{ width:22px; height:24px; flex:0 0 22px; } .wappen--bronze svg{ fill:#E7B27A; } .wappen--bronze span{ color:#8A5A2B; } .wappen--silber svg{ fill:#C3CFDB; } .wappen--silber span{ color:#5A6D80; } .wappen--gold svg{ fill:var(--sonne); } .wappen--gold span{ color:#8A6100; } /* Das Wappen bekommt beim Ueberfahren der Karte einen kurzen Glanz. */ @keyframes wappenBlitz{ 0%, 100%{ transform:scale(1) rotate(0deg); } 40% { transform:scale(1.18) rotate(-7deg); } } .tariff:hover .wappen svg{ animation:wappenBlitz .6s ease-in-out; } /* ---------- Die vier Schritte als Heldenreise ---------- */ /* Die Wegmarke sitzt auf der Verbindungslinie und wandert mit dem Lesefortschritt mit — sie zeigt, wie weit man auf der Reise ist. */ .step__num{ position:relative; } .step--done .step__num::after{ content:""; position:absolute; right:-3px; bottom:-3px; width:16px; height:16px; border-radius:50%; background:var(--sonne); box-shadow:0 0 0 3px #fff; } /* ---------- Pfoten-Wappen als wiederkehrendes Zeichen ---------- */ /* Ersetzt den kurzen orangen Strich aus styles.css durch das Pfoten-Wappen. Wichtig: Dort steht die Kurzform "background:var(--accent)", die auch die Hintergrundfarbe setzt. Die muss hier ausdruecklich zurueckgenommen werden, sonst deckt der orange Kasten das Pfotenbild vollstaendig ab — genau das war im ersten Versuch zu sehen. */ .eyebrow::before{ content:""; display:inline-block; width:15px; height:15px; margin-right:8px; vertical-align:-2px; background-color:transparent; border-radius:0; background-repeat:no-repeat; background-size:contain; background-position:center; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27%23FF9351%27%3E%3Cellipse cx=%2712%27 cy=%2716%27 rx=%275.2%27 ry=%274.4%27/%3E%3Cellipse cx=%275.6%27 cy=%2710.4%27 rx=%272.5%27 ry=%273.1%27/%3E%3Cellipse cx=%2710%27 cy=%276.6%27 rx=%272.4%27 ry=%273%27/%3E%3Cellipse cx=%2715.2%27 cy=%276.8%27 rx=%272.4%27 ry=%273%27/%3E%3Cellipse cx=%2719%27 cy=%2711%27 rx=%272.4%27 ry=%273%27/%3E%3C/svg%3E"); } @media (prefers-reduced-motion: reduce){ .tariff:hover .wappen svg{ animation:none; } } /* ========================================================================== WhatsApp — auf jeder Seite erreichbar Sitzt fest unten rechts, oberhalb davon der Knopf nach oben. Auf schmalen Displays weicht er der festen Aktionsleiste aus. Es ist bewusst ein normaler Link und kein eingebettetes Widget: So gehen erst dann Daten an Meta, wenn jemand tatsaechlich darauf klickt. Das gehoert trotzdem in die Datenschutzerklaerung. ========================================================================== */ .wa-knopf{ position:fixed; right:20px; bottom:78px; display:inline-flex; align-items:center; gap:9px; height:52px; padding:0 20px 0 15px; border-radius:var(--pill); background:#25D366; color:#0B2E17; font-family:var(--ff-head); font-weight:800; font-size:.95rem; text-decoration:none; box-shadow:0 10px 26px -10px rgba(37,211,102,.7), 0 3px 0 rgba(0,0,0,.12); z-index:61; transition:transform .28s var(--feder, cubic-bezier(.34,1.56,.64,1)), box-shadow .28s ease; } .wa-knopf svg{ width:26px; height:26px; flex:0 0 26px; } .wa-knopf:hover{ transform:translateY(-3px); box-shadow:0 16px 34px -12px rgba(37,211,102,.8), 0 5px 0 rgba(0,0,0,.12); } .wa-knopf:active{ transform:translateY(1px); } /* Sanft pulsierender Ring, damit der Knopf auffaellt, ohne zu blinken. */ @keyframes waPuls{ 0% { box-shadow:0 0 0 0 rgba(37,211,102,.55); } 70% { box-shadow:0 0 0 16px rgba(37,211,102,0); } 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); } } .wa-knopf::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; animation:waPuls 3.2s ease-out infinite; } /* Auf schmalen Displays nur das Symbol. Der Platz fuer die Aktionsleiste entfaellt: Unterhalb von 641 Pixeln uebernimmt die Leiste das WhatsApp selbst, der schwebende Knopf ist dort ausgeblendet. */ @media (max-width:860px){ .wa-knopf{ bottom:78px; right:14px; padding:0; width:52px; justify-content:center; } .wa-knopf__text{ display:none; } } @media (max-width:860px){ .wa-blase{ bottom:142px; right:14px; } } /* Auf Formularseiten faellt die Aktionsleiste weg, der Knopf rueckt nach. */ body:has(#rechner) .wa-knopf{ bottom:78px; } @media (max-width:860px){ body:has(#rechner) .wa-knopf{ bottom:78px; } } @media (prefers-reduced-motion: reduce){ .wa-knopf{ transition:none; } .wa-knopf:hover{ transform:none; } .wa-knopf::after{ animation:none; } } /* ========================================================================== Tierfakten auf den Fotos Der Fakt liegt jetzt mittig ueber dem ganzen Bild, nicht mehr als Band am unteren Rand. Grund: Die Galeriekacheln sind organisch geformt; am unteren Rand laeuft die Form stark zusammen und schnitt den Text an den Seiten ab. In der Mitte ist die Flaeche am breitesten, dort ist der Text sicher. Der Text steht als echtes Element im HTML, damit ihn auch ein Screenreader vorliest. Die Ebene hat pointer-events:none und faengt keine Klicks ab. ========================================================================== */ .ph__fakt{ position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:12% 14%; text-align:center; background:rgba(16, 46, 92, .84); color:#fff; font-size:.92rem; line-height:1.45; text-shadow:0 1px 3px rgba(0,0,0,.45); opacity:0; transition:opacity .3s ease; pointer-events:none; border-radius:inherit; } .ph:hover .ph__fakt, .ph:focus-within .ph__fakt, .ph.fakt-offen .ph__fakt{ opacity:1; } /* Kleiner Hinweis, dass es hier etwas zu entdecken gibt. */ .ph__fakt::before{ content:"Wusstest du?"; font-family:var(--ff-head); font-weight:800; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--sonne); } .ph__fakt span{ max-width:32ch; } /* Auf den grossen Kopfbildern ist mehr Platz, dort darf der Text groesser sein und braucht weniger Rand. */ .hero__pic .ph__fakt, .page-hero .ph__fakt{ padding:10%; font-size:.95rem; } @media (prefers-reduced-motion: reduce){ .ph__fakt{ transition:none; } } /* ---------- Sprechblase am WhatsApp-Knopf ---------- */ .wa-blase{ position:fixed; right:20px; bottom:140px; width:min(280px, calc(100vw - 40px)); padding:16px 40px 16px 18px; border-radius:var(--r); background:var(--surface); color:var(--ink); font-size:.9rem; line-height:1.45; box-shadow:0 3px 0 var(--line), 0 20px 42px -18px rgba(33,48,63,.45); z-index:62; opacity:0; transform:translateY(10px) scale(.96); transition:opacity .3s ease, transform .35s var(--feder, cubic-bezier(.34,1.56,.64,1)); } .wa-blase.ist-da{ opacity:1; transform:none; } .wa-blase strong{ display:block; font-family:var(--ff-head); margin-bottom:4px; } /* Kleine Spitze, die zum Knopf zeigt. */ .wa-blase::after{ content:""; position:absolute; right:26px; bottom:-9px; width:18px; height:18px; background:var(--surface); transform:rotate(45deg); border-radius:3px; } .wa-blase__zu{ position:absolute; top:8px; right:8px; width:30px; height:30px; padding:0; border:0; border-radius:50%; background:var(--line-2); color:var(--ink-2); cursor:pointer; display:grid; place-items:center; } .wa-blase__zu svg{ width:15px; height:15px; } .wa-blase__zu:hover{ background:var(--line); } /* Position der Blase auf schmalen Displays: siehe Abschnitt WhatsApp-Knopf. */ body:has(#rechner) .wa-blase{ bottom:140px; } @media (prefers-reduced-motion: reduce){ .wa-blase{ transition:none; } } /* ========================================================================== Kopfbereich: Text mittig oben, Bilder darunter Der Text steht zentriert und in ruhiger Zeilenlaenge ganz oben, darunter folgen die drei Tierfotos ueber die volle Inhaltsbreite. Bei 1200 Pixeln sind das rund 390 Pixel je Bild. Die Aufzaehlung bleibt innerhalb ihres Blocks linksbuendig und wird als Ganzes zentriert. Zentrierte Listenzeilen mit Haken davor lesen sich schlecht, weil die Haken dann nicht mehr untereinander stehen. ========================================================================== */ .hero__grid{ grid-template-columns:1fr; gap:0; } .hero__text{ order:0; max-width:none; /* volle Inhaltsbreite, siehe unten */ margin-inline:auto; text-align:center; } .hero__text .badge{ margin-inline:auto; } /* Nur die beiden Fliesstexte bekommen eine Lesebreite, und die ist grosszuegig gesetzt. Der Block als Ganzes bleibt breit, sonst steht links und rechts auffaellig viel Leere. */ .hero__text > h1{ max-width:min(100%, 940px); margin-inline:auto; } .hero__lead{ max-width:min(100%, 64ch); margin-inline:auto; } /* Der hervorgehobene Halbsatz soll nicht mitten im gelben Balken umbrechen. Als eigener Block rutscht er im Ganzen in die naechste Zeile, und die Ueberschrift bricht dort, wo auch der Satz endet. Die Grenze bei 361 Pixeln ist keine Willkuer: Ein inline-block kann nicht umbrechen. Auf einem 320 Pixel schmalen Geraet waere der Halbsatz breiter als die Spalte und wuerde seitlich herausragen. Dort bleibt es beim normalen Umbruch. Ab 361 Pixeln passt er, gemessen auf 375, 390 und 430. */ @media (min-width:361px){ .hero h1 .hl{ display:inline-block; } } /* Die drei Vorteile stehen nebeneinander statt untereinander. Das fuellt die Breite, spiegelt die drei Fotos darunter und macht den Kopfbereich kuerzer. Innerhalb einer Spalte bleibt es linksbuendig, damit die Haken untereinander stehen. */ .hero__usps{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px 30px; max-width:none; margin:1.9rem 0 2rem; text-align:left; } .hero__usps li{ align-items:flex-start; } .hero__text .btn-row{ justify-content:center; } /* Die drei Kennzahlen ebenso: gleiche Spalten ueber die volle Breite, damit sie mit der Aufzaehlung darueber und den Fotos darunter fluchten. */ .hero__proof{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px 30px; justify-items:center; text-align:center; max-width:none; } /* Die Fotos folgen unter dem Text. */ .hero__media{ order:1; grid-template-columns:repeat(3, 1fr); gap:14px; max-width:none; margin:36px 0 0; } .hero__pic--main, .hero__pic--side{ grid-row:auto; align-self:stretch; aspect-ratio:5/4; } /* Gemeinsame Form fuer alle drei. Die Maske aus styles.css wird hier ausdruecklich abgeschaltet, sonst blieben die Kanten ausgefranst. */ .hero__pic.ph{ overflow:hidden; border-radius:26px; box-shadow:none; background:var(--line-2); } .hero__pic .ph__img{ -webkit-mask-image:none; mask-image:none; border-radius:inherit; } /* Auf schmalen Displays bleiben alle drei sichtbar, aber untereinander waere das zu lang. Deshalb dort eine Reihe mit drei kleineren Bildern nur bis 860 Pixel, darunter ein einzelnes grosses. */ /* Unter 900 Pixeln wird eine Spalte zu schmal fuer den Text. Dann wieder untereinander, als zentrierter Block mit linksbuendigen Zeilen. */ @media (max-width:900px){ .hero__usps{ display:inline-grid; grid-template-columns:1fr; gap:.7rem; margin-inline:auto; } .hero__proof{ grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); } } /* Auf schmalen Displays passen drei Bilder nicht nebeneinander, und untereinander waere der Kopfbereich endlos lang. Frueher blieb deshalb nur der Hund uebrig, Katze und Pferd verschwanden ganz. Jetzt liegen alle drei in einer Reihe, durch die man wischt. Jedes Bild nimmt 88 Prozent der Breite ein, das naechste schaut also am Rand hervor: Daran erkennt man, dass es weitergeht, ohne Pfeil und ohne Punktemenue. Das Einrasten sorgt dafuer, dass immer ein Tier ganz im Bild steht. Nebeneffekt: Auf dem Handy faellt jede Bewegung mit der Maus weg. Dieses Wischen ist eine der wenigen Stellen, an denen die Seite dort ueberhaupt auf eine Geste antwortet. */ @media (max-width:860px){ .hero__media{ display:grid; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:88%; gap:10px; margin-top:28px; overflow-x:auto; overscroll-behavior-x:contain; /* kein Zurueckblaettern im Browser */ scroll-snap-type:x mandatory; scrollbar-width:none; } .hero__media::-webkit-scrollbar{ display:none; } .hero__pic--side{ display:block; } .hero__pic--main, .hero__pic--side{ aspect-ratio:4/3; scroll-snap-align:center; } } /* Dieselbe klare Form auf den Kopfbildern der Unterseiten. */ .page-hero .ph{ overflow:hidden; border-radius:26px; box-shadow:none; } .page-hero .ph .ph__img{ -webkit-mask-image:none; mask-image:none; border-radius:inherit; } /* ========================================================================== HANDY: Tippflaechen Auf einem Zeigergeraet reicht ein 20 Pixel hoher Link, mit dem Finger nicht. WCAG 2.5.8 verlangt mindestens 24 x 24 Pixel fuer alles, was kein Wort mitten in einem Satz ist. Fusszeile, Kopfleiste und Brotkrumen lagen darunter, gemessen zwischen 18 und 22 Pixeln. Wo mehr Hoehe die Gestaltung verschieben wuerde, wird sie mit einem negativen Aussenabstand wieder ausgeglichen: Die Trefferflaeche waechst, das Bild bleibt. ========================================================================== */ @media (max-width:900px){ /* Fusszeile: die Listen sind Navigation, keine Fliesstexte. */ .site-footer ul a{ display:inline-block; padding-block:9px; margin-block:-4px; /* haelt den Abstand der Zeilen wie vorher */ } .site-footer ul{ gap:.35rem; } .site-footer .btn{ margin-block:0; padding-block:12px; } .footer__legal{ gap:6px 20px; } .footer__legal a{ display:inline-block; padding-block:9px; } .socials a{ width:44px; height:44px; border-radius:13px; } .socials svg{ width:20px; height:20px; } /* Kopfleiste: die Rufnummer ist auf dem Handy der kuerzeste Weg zu uns. Der negative Aussenabstand haelt die Leiste trotzdem bei 38 Pixeln. */ .topbar a{ display:inline-block; padding:10px 8px; margin:-10px -8px; } /* Brotkrumen */ .crumbs{ gap:.35rem; } .crumbs a{ display:inline-block; padding:7px 3px; margin:-7px -3px; } /* Schliesskreuz der WhatsApp-Sprechblase */ .wa-blase__zu{ width:36px; height:36px; top:6px; right:6px; } .wa-blase{ padding-right:46px; } } /* ---------- Aktionsleiste auf dem Handy ---------- Drei Wege zu uns nebeneinander. WhatsApp nur als Symbol, sonst passt "Beitrag berechnen" bei 360 Pixeln nicht mehr in eine Zeile. */ .btn--wa{ --bg:#25D366; --fg:#0B2E17; --bd:#25D366; } .mobile-cta__wa{ flex:0 0 48px !important; padding:0 !important; } .mobile-cta__wa svg{ width:24px; height:24px; } /* Gleich breite Knoepfe zwangen "Beitrag berechnen" in zwei Zeilen und die Leiste damit auf 77 statt 62 Pixel. Jetzt nimmt "Anrufen" nur so viel Platz, wie das Wort braucht, der Rest geht an den wichtigeren Knopf. */ /* Kein white-space:nowrap: Auf einem 320 Pixel schmalen Geraet wuerde die Beschriftung sonst abgeschnitten statt umzubrechen. */ .mobile-cta .btn{ font-size:.88rem; padding-inline:14px; } .mobile-cta .btn--ghost{ flex:0 1 auto; } .mobile-cta .btn--accent{ flex:1 1 auto; min-width:0; } /* Solange die Leiste da ist, braucht es keinen schwebenden Knopf und keine Sprechblase mehr. Beide lagen ueber dem Text. */ @media (max-width:640px){ .wa-knopf, .wa-blase{ display:none !important; } /* Auf dem Beitragsrechner faellt die Aktionsleiste weg, damit sie die Bedienelemente nicht verdeckt. Dort waere sonst gar kein Weg zu WhatsApp mehr sichtbar, also bleibt dort der schwebende Knopf. */ body:has(#rechner) .wa-knopf, body:has(form[data-demo-form]) .wa-knopf{ display:inline-flex !important; bottom:78px; } } /* ---------- Breite Tabelle auf dem Handy ---------- Die Vergleichstabelle ist 680 Pixel breit und rollt seitlich. Auf einem 375 Pixel schmalen Bildschirm sieht man davon nur die erste Spalte und ahnt nicht, dass es weitergeht. Ein Satz darueber sagt es. Kein weicher Farbverlauf am rechten Rand: Ein absolut gesetztes Element in einem rollenden Kasten haengt am Ende des Inhalts, nicht am sichtbaren Rand. Es waere also genau dann zu sehen, wenn man es nicht mehr braucht. */ .wisch-hinweis{ display:none; } @media (max-width:760px){ .wisch-hinweis{ display:block; margin:0 0 8px; font-size:.85rem; color:var(--muted); } } /* Der Menuepunkt "Kontakt" gilt nur dort, wo der gleichnamige Knopf neben dem Logo aus Platzgruenden ausgeblendet ist. Sonst staende er doppelt. */ .nav__nur-schmal{ display:none; } @media (max-width:1180px){ .nav__nur-schmal{ display:block; } } /* Die Sprungliste auf der Fehlerseite liest sich wie ein Satz, wird aber wie ein Menue benutzt. Auf dem Handy braucht sie deshalb Hoehe zum Tippen. */ @media (max-width:900px){ .weiter-zu{ line-height:2.4; } .weiter-zu a{ display:inline-block; padding:6px 6px; } } /* ========================================================================== HANDY: die Seite muss auf Beruehrung antworten Am Rechner lebt die Seite vom Zeiger: Karten heben sich an, Knoepfe folgen der Maus, Fotos zeigen beim Ueberfahren einen Tierfakt. Auf einem Sensorbildschirm faellt das alles ersatzlos weg. Dieselbe Seite, die am Rechner auf jede Bewegung antwortet, liegt auf dem Handy still. Dieser Block gibt drei Dinge zurueck: 1. eine sichtbare Antwort auf jede Beruehrung, 2. eine Hervorhebung fuer das, was gerade in der Bildschirmmitte steht, 3. einen Hinweis, dass hinter den Fotos ein Tierfakt steckt. Alles ueber "scale", nicht ueber "transform": Auf "transform" schreibt bereits die Einschwing-Mechanik. Zwei Regeln auf derselben Eigenschaft loeschen sich gegenseitig aus, "scale" multipliziert sich dazu. ========================================================================== */ @media (hover:none){ /* ---------- 1. Antwort auf die Beruehrung ---------- */ .card--hover, .tariff, .contact-tile, .cost-card, .faq summary, .tile-list a{ transition:scale .16s ease, box-shadow .22s ease, border-color .22s ease; } .card--hover:active, .tariff:active, .contact-tile:active, .cost-card:active, .faq summary:active, .tile-list a:active{ scale:.978; } /* Bilder geben ebenfalls nach, sie sind hier ja anfassbar. */ .ph:active{ scale:.99; } /* ---------- 2. Was in der Mitte steht, tritt hervor ---------- */ .im-blick{ scale:1.012; box-shadow:var(--sh-2); } .tariff.im-blick{ border-color:var(--brand-100); } /* Die hervorgehobene Karte hat ihre eigene Auszeichnung, die soll die Mitte nicht ueberstrahlen. */ .tariff--featured.im-blick{ scale:1.006; } /* ---------- 3. Hinter dem Foto steckt etwas ---------- ".ph::after" ist schon vergeben (warmer Schleier ueber jedem Foto), deshalb hier ::before. Der Hinweis verschwindet dauerhaft, sobald jemand einmal einen Fakt geoeffnet hat. */ .ph:has(.ph__fakt)::before{ content:"Tippen für einen Fakt"; position:absolute; left:12px; bottom:12px; z-index:5; padding:6px 12px; border-radius:99px; background:rgba(16, 46, 92, .82); color:#fff; font-family:var(--ff-head); font-weight:700; font-size:.72rem; letter-spacing:.02em; pointer-events:none; animation:tippAtmen 3.4s ease-in-out infinite; } .ph.fakt-offen::before, .fakt-verstanden .ph::before{ content:none; } @keyframes tippAtmen{ 0%, 100% { opacity:.72; } 50% { opacity:1; } } } /* Wer weniger Bewegung eingestellt hat, bekommt die Hervorhebung ohne Groessenaenderung und den Hinweis ohne Pulsieren. Weg ist er nicht: Ohne ihn bliebe der Tierfakt auf dem Handy unentdeckt. */ @media (hover:none) and (prefers-reduced-motion: reduce){ .card--hover, .tariff, .contact-tile, .cost-card, .faq summary, .tile-list a{ transition:box-shadow .2s ease; } .card--hover:active, .tariff:active, .contact-tile:active, .cost-card:active, .faq summary:active, .tile-list a:active, .ph:active{ scale:1; } .im-blick{ scale:1; } .ph:has(.ph__fakt)::before{ animation:none; opacity:1; } } /* ========================================================================== HANDY: erst das Tier, dann der Text Gemessen auf einem 375 x 812 Bildschirm sah es vorher so aus: Abzeichen ab 178 px Ueberschrift ab 233 px Fliesstext ab 363 px Vorteile ab 585 px Knoepfe ab 841 px Kennzahlen ab 1008 px ERSTES BILD ab 1233 px <- eineinhalb Bildschirme weit unten 99 Woerter, bevor ein einziges Tier zu sehen war. Wer auf dem Handy ankommt, entscheidet in zwei Sekunden, und in diesen zwei Sekunden gab es nur Text. Die Bilder ruecken deshalb direkt unter die Ueberschrift. Moeglich wird das mit "display:contents" auf dem Textblock: Sein Kasten verschwindet, seine Kinder werden zu Kindern desselben Rasters wie die Bilder, und dann laesst sich die Reihenfolge mit "order" frei bestimmen. Ohne diesen Kniff ginge es nicht, weil Text und Bilder im HTML in getrennten Kaesten liegen. Am Rechner bleibt die Reihenfolge unveraendert. ========================================================================== */ @media (max-width:860px){ .hero__grid{ display:grid; grid-template-columns:1fr; } .hero__text{ display:contents; } .hero__text > .badge { order:1; } .hero__text > h1 { order:2; } .hero__media { order:3; } .hero__text > .hero__lead { order:4; } .hero__text > .hero__usps { order:5; } .hero__text > .btn-row { order:6; } .hero__text > .hero__proof{ order:7; } /* Ohne den umschliessenden Kasten stapeln sich die Abstaende nicht mehr von selbst, also hier von Hand. */ .hero__text > .badge { margin:0 auto 14px; } .hero__text > h1 { margin:0 0 4px; } .hero__media { margin:18px 0 22px; } .hero__text > .hero__lead { margin:0 auto 4px; } .hero__text > .hero__usps { margin:18px auto 22px; } .hero__text > .btn-row { margin:0 0 4px; } .hero__text > .hero__proof{ margin:22px 0 0; } /* Die Bilder duerfen bis an den Bildschirmrand laufen. Sie sind hier die Hauptsache, nicht eine Beigabe neben dem Text. Der negative Aussenrand hebt die 24 Pixel Innenabstand des Inhaltskastens auf, der gleich grosse Innenabstand setzt das erste Bild wieder buendig zum Text. */ .hero__media{ margin-inline:-24px; padding-inline:24px; grid-auto-columns:85%; } .hero__pic--main, .hero__pic--side{ aspect-ratio:4/3; } /* Die drei Kennzahlen standen auf dem Handy zweizeilig und brauchten 223 Pixel. Nebeneinander und kleiner sind es rund 90. */ .hero__proof{ grid-template-columns:repeat(3, 1fr); gap:12px; padding-top:16px; } .hero__proof .stat__num{ font-size:1.05rem; } .hero__proof .stat__lbl{ font-size:.72rem; line-height:1.3; } }