--- title: "Carrd-Countdown-Timer: 5 eigene Designs (Copy-Paste-Code)" description: "Eigenen Countdown-Timer in Carrd einbauen mit 5 Copy-Paste-Designs in HTML/CSS: Karten-, Dark-, Flip-Clock- und Kreis-Styles. Pro-Standard-Embed, UTC-sichere Daten inklusive." date: 2026-01-21 categories: ["web-development"] tags: ["carrd","countdown-timer","css"] --- *Hinweis: Diese Anleitung enthält Referral-Links. Wenn du darüber kaufst, erhalte ich möglicherweise eine Provision – ohne zusätzliche Kosten für dich.* [Carrd](https://go.bitdoze.com/carrd) bringt ein eingebautes Timer-Element mit, das herunter- (oder hoch-)zählt, aber seine Styling-Optionen sind begrenzt. Wenn du einen **Carrd-Countdown-Timer** für einen Launch, einen Sale oder ein Event willst, der wie ein Teil deines Designs aussieht, führt der Weg über ein Embed-Element mit eigenem Code. Ein Embed plus dem Copy-Paste-Code unten ergibt einen Timer, der zu deiner Marke passt und null externe Skripte lädt. Hier sind fünf eigenständige Designs: eine Gradient-Karte, eine minimale Dark-Leiste, kreisförmige Fortschrittsringe, eine Flip-Clock und eine Inline-Text-Version. Alles schlichtes HTML/CSS/JS, alles mobilfreundlich. Vorab-Warnung, bevor du scrollst: Embeds erfordern Carrd Pro Standard (19 $/Jahr). Details im Abschnitt „Was du brauchst“ weiter unten. [Carrd.co](https://go.bitdoze.com/carrd) Ein paar Carrd-Anleitungen: - [Popup-Modal in Carrd einfügen](/de/carrd-popup-modal/) - [Smooth Scroll in Carrd einfügen](/de/carrd-smooth-scroll/) - [Testimonial-Slider in Carrd einfügen](/de/carrd-testimonial-slider/) - [Dark-Mode-Umschalter in Carrd einfügen](/de/carrd-dark-mode-umschalter/) - [WhatsApp-Button in Carrd einfügen](/de/carrd-whatsapp-button/) - [Zurück-nach-oben-Button in Carrd einfügen](/de/carrd-zurueck-nach-oben-button/) - [Floating-Menü in Carrd einfügen](/de/carrd-floating-menue/) - [Seitenmenü in Carrd einfügen](/de/carrd-seitenmenue/) - [Mobile-responsive Navbar in Carrd bauen](/de/carrd-mobile-navbar/) - [Sticky-Header in Carrd einfügen](/de/carrd-sticky-header-hinzufuegen/) - [FAQ-Akkordeons in Carrd einfügen](/de/carrd-akkordeon-hinzufuegen/) - [Carrd im Review (Preise und Pläne im Vergleich)](/de/carrd-review/) > Die komplette Liste mit Carrd-Plugins, -Themes und -Anleitungen liegt auf meiner **[carrdme.com](https://carrdme.com/)**-Website. Wenn du lieber installierst statt Code einzufügen, hol dir dort mein [Carrd-Tabs-Plugin](https://go.carrdme.com/tabs) oder mein [Carrd-Akkordeon-Plugin](https://go.carrdme.com/accordion). ## Wann sich ein Countdown-Timer auf deiner Carrd-Seite lohnt Countdown-Timer verdienen ihren Platz, wenn eine echte Deadline existiert: 1. **Produkt-Launches** – Vorfreude vor dem Release aufbauen 2. **Sales und Promotions** – ein zeitlich begrenztes Angebot mit hartem Ende (ein echtes Enddatum schlägt „nur für kurze Zeit“-Copy); kombiniere es mit einer [Carrd-Preistabelle](/de/carrd-preistabelle-hinzufuegen/), damit der Rabatt sichtbar ist, während die Uhr läuft 3. **Event-Anmeldungen** – Anmeldefristen 4. **Coming-soon-Seiten** – Besuchern sagen, wann sie wiederkommen sollen 5. **Webinare und Live-Events** – Countdown bis zur Startzeit Eine tickende Uhr erzeugt eine Dringlichkeit, die statischer Text nicht erreicht. Sie stellt aber auch eine harte Anforderung: Bei einem Launch oder Sale muss der Timer für jeden Besucher zum selben Zeitpunkt null erreichen. An dem Detail scheitern viele – überspringe deshalb nicht den [Zeitzonen-Abschnitt](#ziel-datum-und-uhrzeit-festlegen-zeitzonensicher) weiter unten. ## Was du brauchst Eine Voraussetzung entscheidet, ob irgendetwas in diesem Artikel funktioniert: Das Embed-Element ist ein kostenpflichtiges Feature. So stehen die Pläne (von carrd.com/pro, Stand Oktober 2026): | Plan | Preis | Seiten | Embeds? | |---|---|---|---| | Free | 0 $ | 3 | Nein | | Pro Lite | 9 $/Jahr | 3 | Nein | | **Pro Standard** | **19 $/Jahr** | **10** | **Ja** – plus Forms, Widgets, Analytics (Carrds native, cookie-freie Analytics seit Okt. 2026, oder Drittanbieter wie [Plausible](https://www.bitdoze.com/install-plausible-analytics/) / [Umami](https://www.bitdoze.com/umami-analytics-install/)), eigene Domains | | Pro Plus | 49 $/Jahr | 25 | Ja – plus Variables, Redirects, Framing (für Countdowns nicht nötig) | Brauchst du mehr Seiten? Jeder Tier hat Varianten mit mehr Sites (Pro Standard 25 für 39 $/Jahr bis zu 1000 Sites für 599 $/Jahr) – komplette Aufschlüsselung im [Carrd-Review](/de/carrd-review/). **Pro Standard erforderlich** Free- und Pro-Lite-Accounts können gar keinen eigenen Code einfügen, also auch keine Countdowns. Bist du im Free-Plan, schaltet das Upgrade auf [Carrd Pro Standard](https://go.bitdoze.com/carrd) (19 $/Jahr) alles in diesem Artikel frei, plus Forms, Widgets und eigene Domains. Mein [Carrd-Review (Preise und Pläne im Vergleich)](/de/carrd-review/) bricht auf, was dich jeder Tier bringt. Es gibt einen kostenlosen 7-Tage-Pro-Trial (keine Zahlung oder Kreditkarte nötig), und er deckt Forms, Widgets und das Verbinden einer [eigenen Domain mit Carrd](/de/carrd-domain-verbinden/) ab. Die Feature-Liste des Trials enthält aber **nicht** das Embed-Element, du kannst diese Snippets damit also nicht testen – siehe die [Trial-FAQ](#fehlerbehebung-und-faq) unten. Nichts weiter zu installieren. Jedes Snippet unten ist ein eigenständiger HTML/CSS/JS-Block. - Carrd-Account mit Pro Standard oder höher - Eine veröffentlichte (oder veröffentlichbare) Carrd-Seite – eine kostenlose yoursite.carrd.co-Subdomain reicht zum Testen - Dein Ziel-Datum und -Uhrzeit festgelegt, mit einer Zeitzonen-Entscheidung (unten behandelt) - Fünf Minuten ## So fügst du einen eigenen Countdown-Timer in Carrd ein Jedes Design in diesem Artikel läuft über dasselbe Element: das Embed. Der Ablauf ändert sich nie – Element hinzufügen, Type auf Code setzen, Snippet einfügen, veröffentlichen. ### Schritt 1: Ein Embed-Element hinzufügen (Type: Code, Style: Inline) Klicke im Builder auf den `+`-Button und füge ein **Embed**-Element hinzu, dann setze Type auf Code und Style auf Inline. Füge dein HTML/CSS/JS in das Code-Feld ein. `Inline` rendert den Countdown genau dort, wo du das Element im Layout platziert hast. Die andere Option, `Hidden`, injiziert den Code in den Head, Body Top oder Body End der Seite – richtig für globale Skripte wie Analytics, falsch für einen sichtbaren Countdown. (Ältere Tutorials erwähnen einen „Above“-Style; diese Option existiert nicht mehr.) Um das Embed später wiederzufinden oder zu bearbeiten, nutze das Elements-Panel: **More Actions → Elements…** listet jedes Element auf der Seite – und zeigt seit Oktober 2026 auch den Sichtbarkeitsstatus jedes Elements, inklusive vom Publishing ausgeschlossener oder per CSS versteckter Elemente. Praktisch, wenn ein Embed „verschwindet“: Prüfe erst das Panel, bevor du den Code verdächtigst. **Embeds sind im Builder unsichtbar** Carrds Doku sagt es unmissverständlich: Das Embed-Element gibt im Builder nichts aus. Eine leere Stelle, wo dein Countdown sein sollte, ist normal. Veröffentliche die Seite und er erscheint. Das ist der Fehlalarm Nummer eins bei eigenem Code in Carrd. - Code einfügen Builder bleibt leer - Veröffentlichen dann hart neu laden - Countdown live Sekunden ticken Embeds rendern nichts im Builder. Veröffentliche, um jede Änderung zu prüfen. Dann lauf jedes Mal denselben Vier-Schritte-Check: - Seite veröffentlichen - Live-Seite hart neu laden (Ctrl+Shift+R / Cmd+Shift+R) - DevTools-Konsole öffnen – sie sollte sauber sein, keine roten Fehler - Den Sekunden ein paar Schläge beim Ticken zusehen Um eine Änderung rückgängig zu machen, lösche das Embed-Element und veröffentliche erneut. Nichts anderes auf der Seite wird angefasst. ### Schritt 2: Countdown-Style auswählen Wähle eines der fünf Designs unten und füge es in das Code-Feld des Embeds ein. Die einzige Änderung, die du machen musst, ist das Zieldatum oben im Skript, behandelt in [Ziel-Datum und Uhrzeit festlegen](#ziel-datum-und-uhrzeit-festlegen-zeitzonensicher). **Zwei Timer auf einer Seite?** Jedes Snippet nutzt eigene IDs (countdown1…countdown5), verschiedene Styles koexistieren also. Zwei Kopien desselben Styles tun es nicht: Doppelte IDs bedeuten, dass nur der erste Timer tickt. Benenne jede id in der zweiten Kopie um (days1 → days6, countdown1 → countdown6, dayCircle → dayCircle2, day1Card → day1Card2) und die passenden getElementById-Strings in ihrem Skript – dann funktioniert es. --- ## Option 1: Moderner Karten-Countdown-Timer Saubere Gradient-Karten mit dem Label unter jeder Zahl. Der Hover-Lift ist dezent, und die Karten umbrechen auf Mobile. ```html
00
Days
00
Hours
00
Minutes
00
Seconds
``` Anpassen: Ändere die Zeile `Date.UTC(2027, 2, 1, 9, 0, 0)`. Es ist die eine Zeile, die du bearbeitest. Monate sind 0-indiziert (Januar = 0, März = 2). Veröffentliche und sieh ihm beim Ticken zu; zeigt er beim Laden „Event has started!“, liegt dein Zieldatum in der Vergangenheit. --- ## Option 2: Minimaler Dark-Countdown-Timer Eine dunkle Leiste mit Doppelpunkt-Trennern, für Seiten, die ohnehin eine dunkle Palette fahren. ```html
00
Days
:
00
Hours
:
00
Mins
:
00
Secs
``` Ein dunkler Countdown sitzt natürlich auf einer dunklen Sektion. Soll die Sektion dem System-Theme des Besuchers folgen, kombiniere das mit dem [Carrd-Dark-Mode-Umschalter](/de/carrd-dark-mode-umschalter/), damit der Timer zu der gerade aktiven Palette passt. Anpassen: dieselbe `Date.UTC`-Zeile wie Option 1. Veröffentlichen, hart neu laden und den Kontrast auf einem Handy-Display prüfen. --- ## Option 3: Countdown mit kreisförmigen Fortschrittsringen SVG-Fortschrittsringe, die leer laufen, während die Zeit ausläuft. Jeder Kreis hat `r=42`, sein Umfang ist also 2πr ≈ 264 – daher kommt der Wert `stroke-dasharray="264"`. Änderst du `r`, musst du ihn neu berechnen. ```html
00
Days
00
Hours
00
Mins
00
Secs
``` Anpassen: dieselbe `Date.UTC`-Zeile. Veröffentlichen und prüfen, dass die Ringe animieren und sich dann auf den richtigen Bruchteilen einpendeln. --- ## Option 4: Flip-Clock-Countdown-Animation Klassische Split-Flap-Karten, die kippen, wenn eine Ziffer wechselt. Optisch die schwerste Option – und die, an die sich Leute erinnern. **Für Ziele über 100 Tage hinaus** Das Tage-Feld hat nur zwei Ziffern-Karten. Jenseits von 99 Tagen gibt `pad2(days)` drei Zeichen zurück, und `dStr[1]` zeigt die falsche Ziffer. Das Snippet unten klemmt es mit `Math.min(days, 99)`. Brauchst du echte dreistellige Anzeige? Füge ein drittes `day3Card`-Element hinzu und übergib `dStr[2]` an es. ```html
0
0
Days
0
0
Hours
0
0
Minutes
0
0
Seconds
``` Anpassen: dieselbe `Date.UTC`-Zeile. Veröffentlichen, dann mit einem Datum über 100 Tage in der Zukunft testen und bestätigen, dass die Karten „99“ zeigen und sauber kippen. --- ## Option 5: Inline-Text-Countdown Die leichteste Option. Keine Boxen, keine Animation – nur ein Satz, der sich aktualisiert, was ihn leicht zwischen eine Headline und einen Copy-Absatz setzen lässt. Das ist der, der in einen [Sticky-Header](/de/carrd-sticky-header-hinzufuegen/) passt, ohne das Layout zu brechen. ```html
Sale ends in 0 days, 0 hours, 0 minutes
``` Dieser tickt einmal pro Minute statt jede Sekunde, da er keine Sekunden anzeigt. Er passt gut zu einer [Preistabelle](/de/carrd-preistabelle-hinzufuegen/), wenn die Deadline der Grund ist, jetzt zu kaufen. Anpassen: dieselbe `Date.UTC`-Zeile. Veröffentlichen und prüfen, dass der Satz auf Mobile sauber umbricht. --- ## Ziel-Datum und Uhrzeit festlegen (zeitzonensicher) Jedes Snippet setzt seine Deadline in einer Zeile: ```javascript var targetDate = Date.UTC(2027, 2, 1, 9, 0, 0); ``` Das ist die Zeile, die du änderst. `Date.UTC(year, month, day, hour, minute, second)` nimmt dieselben Argumente wie `new Date(...)`, und Monate sind weiterhin 0-indiziert: Januar = 0, März = 2, Dezember = 11. Beispiele in der Zukunft: - 1. März 2027 um 09:00 UTC: `Date.UTC(2027, 2, 1, 9, 0, 0)` - 25. Dezember 2027 um 09:00 UTC: `Date.UTC(2027, 11, 25, 9, 0, 0)` - 4. Juli 2027 um 18:00 UTC: `Date.UTC(2027, 6, 4, 18, 0, 0)` Eine Gewohnheit, die dir ein Republish erspart: Wähl zum Testen ein Datum bequem in der Zukunft. Ein Countdown, dessen Ziel schon verstrichen ist, rendert beim Laden seine Ablauf-Nachricht – das wirkt kaputt, obwohl der Code in Ordnung ist. Wenn das echte Datum steht, roll das Jahr weiter, statt ein altes Datum stehen zu lassen. ### Besucher-lokale vs. UTC-Deadlines `Date.UTC(...)` und `new Date(y, m, d)` sehen austauschbar aus, sind es aber nicht: - `new Date(2027, 2, 1)` zählt bis Mitternacht **in der Zeitzone jedes einzelnen Besuchers**. Ein Besucher in London erreicht null fünf Stunden vor einem Besucher in New York. Für eine globale Deadline (ein Launch, ein Sale-Ende, ein Webinar-Start) ist das ein echter Bug: Manche Besucher sehen „Sale has ended!“, während andere noch Stunden Rest sehen. - `Date.UTC(2027, 2, 1, 9, 0, 0)` ist ein fester Zeitpunkt. Der Timer jedes Besuchers erreicht null im selben Moment; jeder Browser rendert die Restzeit nur gegen seine eigene Uhr. Faustregel: globale Deadline → `Date.UTC`. Lokales Event (Einlass, Promo im Laden) → besucher-lokales `new Date(y, m, d)` ist okay. ### Date.UTC ```javascript var targetDate = Date.UTC(2027, 2, 1, 9, 0, 0); ``` ### ISO-String ```javascript var targetDate = new Date("2027-03-01T09:00:00Z").getTime(); ``` Beide sind derselbe Zeitpunkt: 1. März 2027 um 09:00 UTC. Nimm die Syntax, die du in sechs Monaten lieber lesen willst. **Der Monat ist 0-indiziert** Sowohl in `new Date(y, m, d)` als auch in `Date.UTC(y, m, d, ...)` ist Januar Monat 0 und Dezember Monat 11. Es erwischt jeden einmal. Ist dein Countdown um genau einen Monat daneben, ist das der Grund. - Date.UTC() eine Deadline - - - Null: derselbe Moment London und New York erreichen ihn gemeinsam new Date() lokale Mitternacht - - - London 00:00 New York 00:00 zwei verschiedene Momente, 5 Stunden auseinander new Date() zählt bis zur lokalen Mitternacht jedes Besuchers. Date.UTC() ist ein Moment für alle. ## Countdown-Farben und -Fonts anpassen Jeder Style nutzt schlichte CSS-Farben, deine Marke zu treffen ist also eine Hex-Änderung: Gradient-Hintergründe nehmen zwei Hex-Farben: ```css background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Change the hex colors to match your brand */ ``` Vollfarben sind noch simpler: ```css background: #1a1a2e; /* Dark background */ color: #10b981; /* Accent color */ ``` Die Kreisringe nehmen zwei Stroke-Farben: ```css stroke: #10b981; /* Progress color */ stroke: #e6e6e6; /* Background circle */ ``` Die Snippets nutzen alle System-Font-Stacks, sie funktionieren also überall ohne Ladekosten. Willst du deinen Marken-Font: Ab Pro Standard gibt es Local Fonts – Carrd hat im August 2026 sechs weitere hinzugefügt (Geist Pixel, Smooch Sans, Tangerine und ein paar andere). Lade den Font auf der Seite und überschreibe dann im ``-Block des Embeds: ```css .countdown-value { font-family: 'Smooch Sans', sans-serif; } ``` **Bleib barrierefrei** Die animierten Styles in diesem Artikel kommen mit einem `prefers-reduced-motion`-Guard, und jeder Container trägt `role="timer"`. Wenn du den Code für eine eigene Variante adaptierst, behalte diesen Block: ```css @media (prefers-reduced-motion: reduce) { .countdown-item:hover { transform: none; } .flip-card.flip .flip-card-inner { animation: none; } .circle-progress { transition: none; } } ``` Überspringe `aria-live` bei einem Timer im Sekundentakt. Eine Live-Region würde Screenreadern jeden Tick vorlesen. Dieselbe Embed-Technik deckt auch andere Injektionen ab – ein [Cookie-Hinweis](/de/carrd-cookie-hinweis-hinzufuegen/) funktioniert exakt genauso. ## Was passiert, wenn der Countdown endet Jedes Snippet tauscht den Timer bei null gegen eine Nachricht und stoppt sein eigenes Intervall, es tickt also nicht unsichtbar ewig weiter. Zwei Muster decken die meisten Fälle ab: ### Nachricht zeigen ```javascript if (distance < 0) { clearInterval(iv); document.getElementById('countdown1').innerHTML = '

We are live!

'; return; } ``` ### Redirect bei Ablauf ```javascript if (distance < 0) { clearInterval(iv); window.location.href = 'https://yoursite.com/launch'; return; } ``` **Halte die Uhr an** `setInterval` feuert nach dem Ablauf weiter, wenn du es nicht leerst. Der `clearInterval(iv)`-Aufruf in diesen Snippets fährt den Timer in dem Moment herunter, in dem Nachricht oder Redirect laufen. Ohne ihn tickt das Intervall weiter und tut nichts. Wenn die Uhr null erreicht, ist der Tausch der CTA gegen ein [Popup-Modal](/de/carrd-popup-modal/), das die Warteliste einsammelt, der nächste Schritt. Richte den Redirect auf eine Seite deiner eigenen [Custom Domain](/de/carrd-domain-verbinden/), damit die URL ein Redesign überlebt. Pro Plus (49 $/Jahr) bringt außerdem native Redirects und eine Framing-Option unter Publish → Settings, aber ein dreizeiliger JavaScript-Redirect im Embed reicht für die meisten Countdowns. Ein Security-Hinweis, falls du stattdessen einen iframe-basierten Timer abwägst: Veröffentlichte Carrd-Seiten senden `content-security-policy: frame-ancestors https://carrd.com` und `x-frame-options: deny`. Das beschränkt nur, wer deine Carrd-Seite iframen darf. Inline-Skripte wie diese Snippets laufen problemlos, ebenso Drittanbieter-Widget-Skripte. [Carrd.co testen](https://go.bitdoze.com/carrd) ## Eigener Embed vs. Countdown-Widgets von Drittanbietern Dienste wie der [Elfsight Countdown Timer](https://elfsight.com/countdown-timer-widget/) lassen sich in dasselbe Embed-Element einfügen, das du gerade genutzt hast, und sie sind echte Produkte mit visuellen Editoren, Count-up-Modus und verzögerten Starts. Der Haken sind die Kosten. Stand Oktober 2026 fährt Elfsight vier Tiers: Lite 0 $, Basic 5 $/Monat, Pro 10 $/Monat, Premium 20 $/Monat – pro Widget, also 60–240 $/Jahr, sobald du den Free-Tier verlässt. Prüfe die aktuellen Preise, bevor du budgetierst; Widget-Preise ändern sich oft, und die Abrechnungsbasis geht aus ihrer Website nicht klar hervor. | | Eigener Embed (dieser Artikel) | Drittanbieter-Widget | |---|---|---| | Jährliche Kosten | 0 $ extra (Pro Standard ist ohnehin erforderlich) | 5–20 $/Monat pro Widget (60–240 $/Jahr) zusätzlich zu Carrd | | Externe Requests | Keine | Vendor-JS bei jedem Pageview | | No-Code-Bearbeitung | Nein – du bearbeitest das Snippet | Ja – visuelles Dashboard | | Vendor-Badge | Keins | Free-Tiers fügen meist eins hinzu | Der eigene Embed gewinnt bei Kosten und Seitengewicht. Du brauchst Pro Standard ohnehin für jedes Embed, der Mehrpreis dieser Snippets ist also null, und nichts funkt nach Hause. Ein Widget verdient seine Gebühr nur, wenn du brauchst, was Code nicht einfach liefern kann: - Einen visuellen Editor, den ein nicht-technischer Kunde anpassen kann - Count-up-Modus (Zeit seit einem Event, nicht bis zu einem) - Denselben Timer, über ein Dashboard auf mehreren Seiten synchronisiert Eins, das Leute verwirrt: Carrds eigenes **Widget**-Element unterstützt Stripe, Gumroad, Facebook, PayPal und Typeform. Kein Countdown dabei. Carrds Countdown lebt im separaten **Timer**-Element, und sobald du über seine Styling-Optionen hinauswächst, landest du beim Embed-Element. ## Fehlerbehebung und FAQ **Warum zeigt mein Countdown nichts im Carrd-Builder?** Embed-Elemente rendern nichts im Builder – Carrds Doku sagt das direkt. Veröffentliche die Seite und lade die Live-Seite hart neu. Bleibt sie nach dem Veröffentlichen leer, öffne die DevTools und prüfe die Konsole auf Skriptfehler. Fehlt er auch nach dem Veröffentlichen noch, öffne More Actions → Elements… – seit Oktober 2026 zeigt das Panel, ob ein Element vom Publishing ausgeschlossen oder per CSS versteckt ist. **Warum sagt mein Countdown sofort „Event has started!“?** Dein Zieldatum liegt in der Vergangenheit. Prüfe die `Date.UTC(...)`-Zeile oben im Skript und roll sie nach vorn. Denk an den 0-indizierten Monat: `Date.UTC(2027, 2, 1)` ist der 1. März 2027, nicht der 1. Februar. **Warum erreicht mein Countdown zur falschen Zeit null?** Du hast wahrscheinlich `new Date(y, m, d)` genutzt, das bis Mitternacht in der lokalen Zeitzone jedes Besuchers zählt. Für eine Deadline, die weltweit zum selben Moment fallen muss, wechsle zu `Date.UTC(y, m, d, h, min, s)` oder `new Date("2027-03-01T09:00:00Z").getTime()`. **Brauche ich einen bezahlten Plan für einen Carrd-Countdown-Timer?** Ja. Das Embed-Element erfordert Pro Standard oder höher, mindestens 19 $/Jahr. Free- und Pro-Lite-Pläne können gar keinen eigenen Code einfügen, es gibt also keinen Free-Tier-Workaround innerhalb von Carrd. **Kann ich zwei oder mehr Countdowns auf eine Seite setzen?** Ja. Verschiedene Styles koexistieren, weil sich ihre IDs unterscheiden (`countdown1` bis `countdown5`). Zwei Kopien desselben Styles kollidieren – benenne jede ID in der zweiten Kopie um und passe die `getElementById`-Strings in ihrem Skript entsprechend an. **Warum zeigt die Flip-Clock nach 100 Tagen falsche Tage?** Das Tage-Feld hat zwei Ziffern-Karten, es kann also keine dreistellige Zahl anzeigen. `pad2(150)` gibt „150“ zurück, und `dStr[1]` greift die mittlere Ziffer. Das Snippet klemmt es mit `Math.min(days, 99)`, oder du fügst eine dritte Karte für echte dreistellige Werte hinzu. **Sind diese Countdown-Snippets barrierefrei?** Größtenteils ja. Jeder Container hat `role="timer"`, und die animierten Styles enthalten einen `prefers-reduced-motion`-Guard, der die Flip- und Hover-Effekte für Nutzer killt, die sich dagegen entscheiden. Füge kein `aria-live` zu einem Timer im Sekundentakt hinzu; eine Live-Region, die jeden Tick vorliest, ist schlimmer als gar nichts anzusagen. **Kann ich den Timer mit Carrds kostenlosem 7-Tage-Pro-Trial testen?** Wahrscheinlich nicht. Der Trial deckt Forms, Widgets, das Verbinden einer [eigenen Domain mit Carrd](/de/carrd-domain-verbinden/) und Carrds native Analytics ab – aber das Embed-Element (eigener Code) steht nicht auf der dokumentierten Feature-Liste des Trials unter carrd.com/docs/pro/trial. Du brauchst Pro Standard (19 $/Jahr), um diese Snippets einzufügen und zu veröffentlichen. ## Fazit Carrds eingebautes Timer-Element deckt die Basics ab, aber ein eigener Embed ist der Weg zu einem Countdown, der zu deinem Design passt. Wähl einen Style, ändere eine `Date.UTC`-Zeile, veröffentliche und prüfe, dass er tickt. Du gibst weniger aus als auf dem Widget-Weg und lieferst null externe Skripte aus. Kombiniere den Timer mit einem [Popup-Modal](/de/carrd-popup-modal/) für E-Mail-Capture, einem [WhatsApp-Button](/de/carrd-whatsapp-button/), damit Besucher dich erreichen, wenn die Uhr null erreicht, und einem [Cookie-Hinweis](/de/carrd-cookie-hinweis-hinzufuegen/), falls du EU-Traffic bedienst. Die Anleitungsliste oben enthält den Rest der Carrd-Custom-Code-Builds. [Carrd.co testen](https://go.bitdoze.com/carrd)