CINXE.COM
Vor Ort. Find ich gut.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vor Ort. Find ich gut.</title> <meta name="HandheldFriendly" content="True" /> <meta name="MobileOptimized" content="320" /> <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1" /> <link href="css/all.css" rel="stylesheet"> <!-- FONTAWESOME load all styles --> <link href="css/vorort.css" rel="stylesheet"> <!-- VORORT styles --> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Signika:wght@300;500;600&display=swap" rel="stylesheet"> </head> <body> <!--TODO: Add before Upload to Server--> <!-- Matomo --> <script type="text/javascript"> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(["setDoNotTrack", true]); _paq.push(["disableCookies"]); _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://www.neckaralb.de/analytics/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '3']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script> <!-- End Matomo Code --> <div class="wrapper"> <header> <a href="https://www.neckaralb.de/" target="_blank"><img src="_img/Standortagentur-Logo.png" alt="Standortagentur Logo" height="50"/></a> </header> <h1>Vor Ort. Find ich gut.</h1> <div id="BgStadt"> <div id="BgScreen1" class="screen"></div> <div id="BgScreen2" class="screen"></div> <div id="BgScreen3" class="screen"></div> <div id="BgScreen4" class="screen"></div> <div id="BgScreen5" class="screen"></div> </div> <div class="himmel"> <div id="wolke1" class="imgInactive"></div> <div id="wolke2" class="imgInactive"></div> <div id="wolke3" class="imgInactive"></div> <div id="wolke4" class="imgInactive"></div> <div id="wolke5" class="imgInactive"></div> </div> <div id="bgBlack"></div> <div id="stadt"> <div id="start-msg" class="msg msgStadt"> <h2>Wir alle sind irgendwo vor Ort.</h2> Ob dieser Ort grau ist oder bunt, entscheiden wir selbst. Wie und warum, das erfährst du in diesem Spiel in fünf kleinen Geschichten.<br/> <strong>Klicke auf eine der Personen und mache mit ihnen bunt und lebendig, was wir lieben und wo wir leben: Vor Ort.</strong> <button class="btnNext"><i class="icon fas fa-chevron-circle-right"></i> Los geht‘s!</button> </div> <button id="helpAllgemein" class="btnHelp"><i class="icon fas fa-question-circle"></i></button> <div id="helpAllgemeinMSG" class="msg msgBuch inactive"> <h2>Klicke auf die Figuren, um die Geschichten zu beginnen.</h2> Wenn du nicht weiterkommst, versuche auch die Sprechblasen anzuklicken. <br/> <button class="btnNext btnClose"><i class="icon fas fa-chevron-circle-right"></i>Los geht‘s!</button> </div> <div id="screen1" class="screen"> <img id="stadtteil1" class="stadtteil imgInactive" src="_img/stadtteil1.png" alt=""/> <div id="paul"><img id="imgPaul" src="_img/paul_winkt2.png" alt=""/></div> <div id="screen1-msg1" class="msg msgStadt inactive"> Das ist Paul. Paul hat Schuhe online bestellt. Passen aber nicht. Zu groß. Drüber gestolpert, Zahn abgebrochen. Also Schuhe ins Paket, Paket auf die Post, Paul zum Zahnarzt. <button class="btnNext"><i class="icon fas fa-chevron-circle-right"></i></button> </div> <div id="zahnarzt" class="inactive hoverScale"><img id="zahnarztImg" src="_img/zahnarzt.png" alt=""/></div> <div id="screen1-msg2" class="msg msgStadt inactive"> Auf dem Zahnarztstuhl fällt Paul siedigheiß ein, dass er noch ein Geschenk für heute Abend braucht: Silberhochzeit der Eltern! <button class="btnNext"><i class="icon fas fa-chevron-circle-right"></i></button> </div> <div id="buchhandlung" class="inactive hoverScale"><img src="_img/buchhandlung.png" alt=""/></div> <div id="screen1-msg3" class="msg msgStadt inactive"> Zum Glück ist der Laden unter dem Zahnarzt eine Buchhandlung. Hier findet Paul alles, was er braucht.<br/> <button class="btnNextAction"> Geh mit Paul in den Laden und hilf ihm bei der Suche nach einem passenden Geschenk! <i class="icon fas fa-chevron-circle-right"></i> </button> </div> <div id="screen1-msg4" class="msg msgStadt msg-info inactive"> <fieldset> <legend><i class="icon fas fa-info"></i></legend> <h2>Vielfalt / Lebendigkeit</h2> Vielfältige Geschäfte machen den Ort lebendig. Infrastruktur und Einzelhandel ergänzen sich ideal, denn das Einkaufen lässt sich gut mit anderen Erledigungen verbinden. <br/>Lebendige Innenstädte sind der Spiegel einer gut funktionierenden Gesellschaft in einem lebenswerten Umfeld. <button class="btnNext"><i class="icon fas fa-chevron-circle-right"></i></button> </fieldset> </div> <!-- DIV BuchhandlungInnen --> <div id="screen1-msg6" class="msg msgStadt msg-info inactive"> <fieldset> <legend><i class="icon fas fa-info"></i></legend> <h3>Was kaum jemand weiß: </h3> Auch online sind lokale Buchhandlungen oft besser als die großen Portale. Sie bieten dasselbe Sortiment, liefern aber unter Umständen noch am Tag der Bestellung. <button class="btnNext"><i class="icon fas fa-chevron-circle-right"></i></button> </fieldset> </div> </div> <div id="screen2" class="screen"><img id="stadtteil2" class="stadtteil imgInactive" src="_img/stadtteil2.png" alt=""/> <div id="walz"><img id="imgWalz" src="_img/walz_winkt2.png" alt=""/></div> <div id="screen2-msg1" class="msg msgStadt inactive"> Das sind Karl-Heinz und Margarete Walz. Ihre Zwillingsenkel Penny und Lennart haben Geburtstag. Oma und Opa Walz sind ratlos: Was sollen sie den 10-Jährigen bloß schenken? <button class="btnNext"><i class="icon fas fa-chevron-circle-right"></i></button> </div> <div id="spielwarenladen" class="inactive hoverScale"><img src="_img/spielwarenladen.png" alt=""/></div> <div id="screen2-msg2" class="msg msgStadt inactive"> Sandra Hofstetter, die Verkäuferin im Spielzeugladen, hat Kinder im selben Alter und weiß genau, welche Spiele derzeit bei den Kids angesagt sind. Und außerdem, welche davon auch den Eltern keine Bauchschmerzen oder Hörschäden zufügen. 😀 <button class="btnNext"><i class="icon fas fa-chevron-circle-right"></i></button> </div> <div id="walzSchaufenster" class="figur inactive"><img id="imgWalzSchaufenster" src="_img/walz_schaufenster.png" alt=""/></div> <div id="pflegeheim" class="inactive hoverScale"><img src="_img/pflegeheim.png" alt=""/></div> <div id="pflegeheimLaterne" class="laterne"><img src="_img/laterne.png" alt=""/></div> <div id="screen2-msg3" class="msg msgStadt inactive"> Das Ehepaar Walz ist nach dem Einkauf erleichtert und schaut noch auf einen kleinen Besuch bei Margaretes betagter Tante Marie im Pflegeheim vorbei. Marie ist hinten im Park. <button class="btnNextAction"> Aber wo genau? Hilf Karl-Heinz und Margarete beim Suchen! <i class="icon fas fa-chevron-circle-right"></i> </button> </div> <div id="walzPflegeheim" class="figur inactive"><img id="imgWalzPflegeheim" src="_img/walz_pflegeheim.png" alt=""/></div> <div id="screen2-msg4" class="msg msgStadt msg-info inactive"> <fieldset> <legend><i class="icon fas fa-info"></i></legend> <h3>Kommunikationsplattform</h3> Im Geschäft kommt man unter Menschen und wird von Menschen beraten. In kleineren Städten sind das oft Nachbarn oder Freunde. Im Laden werden Informationen ausgetauscht – und auch mal Tratsch. <button class="btnNext"><i class="icon fas fa-chevron-circle-right"></i></button> </fieldset> </div> <!-- #SENIORENHEIM INNEN/PARK --> <div id="screen2-msg6" class="msg msgStadt msg-info inactive"> <fieldset> <legend><i class="icon fas fa-info"></i></legend> <br> Das Seniorenheim „Luisen-Pflege“ wurde bewusst in der Innenstadt angesiedelt – mit Betreuungsmöglichkeiten von der Senioren-WG bis zur Intensiv-Pflege. So können ältere Menschen am gesellschaftlichen Leben teilhaben und die Innenstadt profitiert von der Belebung durch Besucher:innen. <button class="btnNext"><i class="icon fas fa-chevron-circle-right"></i></button> </fieldset> </div> </div> <div id="screen3" class="screen"> <img id="stadtteil3" class="stadtteil imgInactive" src="_img/stadtteil3.png" alt=""/> <div id="flaschner"><img id="imgFlaschner" src="_img/flaschner_winkt1.png" alt=""/></div> <div id="screen3-msg1" class="msg msgStadt inactive"> Das ist die mobile Werkstatt von Kurt Kächele. Notfall im Sportgeschäft – alles unter Wasser! Kurt macht erst mal den Haupthahn zu, doch das Wasser steigt weiter!!! Seine Azubine Yasmin holt das Werkzeug! <button class="btnNext"><i class="icon fas fa-chevron-circle-right"></i></button> </div> <div id="sportgeschaeft" class="inactive hoverScale"><img src="_img/sportgeschaeft1.png" alt=""/></div> <div id="sportgeschaeftLaterne" class="laterne"><img src="_img/laterne.png" alt=""/></div> <div id="sportgeschaeftauto" class="auto inactive"><img src="_img/auto1.png" alt=""/></div> <div id="screen3-msg2" class="msg msgStadt inactive"> Das Gute daran: Jetzt kann Kurt gleich die Trikots der C-Jugend-Fußballerinnen abholen. Die sponsert er nämlich, weil seine Tochter Paula dort mitkickt. <button class="btnNext"><i class="icon fas fa-chevron-circle-right"></i></button> </div> <div id="screen3-msg3" class="msg msgStadt inactive"> Aber zuerst muss der Schaden repariert werden. Das Wasser steigt und steigt. <button class="btnNextAction"> Hilf Kurt und Yasmin, das kaputte Ventil zu finden! <i class="icon fas fa-chevron-circle-right"></i> </button> </div> <div id="screen3-msg4" class="msg msgStadt msg-info inactive"> <fieldset> <legend><i class="icon fas fa-info"></i></legend> <h3>Arbeits-/Ausbildungsplätze</h3> Der Einzelhandel sichert Arbeitsplätze und Ausbildung vor Ort. Die örtlichen Einzelhändler unterstützen Vereine, Veranstalter und Initiativen. Kein Sportverein kommt ohne lokale Sponsoren aus. <button class="btnNext"><i class="icon fas fa-chevron-circle-right"></i></button> </fieldset> </div> <!-- #ROHRE --> </div> <div id="screen4" class="screen"> <img id="stadtteil4" class="stadtteil imgInactive" src="_img/stadtteil4.png" alt=""/> <div id="annalena"><img id="imgAnnaLena" src="_img/annalena_winkt2.png" alt=""/></div> <div id="screen4-msg1" class="msg msgStadt inactive"> Leonie und Annalena sind auf Shopping-Tour. Gegenseitige Kicherberatung. Annalena hat nix mehr zum Anziehen: Dringend neues Kleid! Und Leonie schreit vor Glück: Endlich neue Schuhe! <button class="btnNext"><i class="icon fas fa-chevron-circle-right"></i></button> </div> <div id="modehaus" class="inactive hoverScale"><img id="modehausImg" src="_img/modehaus.png" alt=""/></div> <div id="screen4-msg2" class="msg msgStadt inactive"> Anschließend gehen sie einen Kaffee trinken und machen Selfies mit Ihren neuen Errungenschaften. Und was man sonst noch so knipsen kann. <button class="btnNext"><i class="icon fas fa-chevron-circle-right"></i></button> </div> <div id="cafe" class="inactive hoverScale"><img src="_img/cafe.png" alt=""/></div> <div id="screen4-msg3" class="msg msgStadt inactive"> Dann machen sie eine Wette: Wer kriegt mehr Insta-Likes für seine Fotos?<br/> <button class="btnNextAction"> Schau nach, wer gewonnen hat: <br/>Annalena oder Leonie? <i class="icon fas fa-chevron-circle-right"></i> </button> </div> <div id="screen4-msg4" class="msg msgStadt msg-info inactive"> <fieldset> <legend><i class="icon fas fa-info"></i></legend> <h2>Shopping-Erlebnis</h2> Einkaufen ist ein Erlebnis. Mit der Freundin shoppen, mit dem Ehepartner bummeln – das geht nur im richtigen Leben. Im Geschäft kann man aus- und anprobieren. Die Waren sind anfassbar. Beim Metzger kriegt das Kind ein Rädle Wurst, beim Bäcker eine Kinderbrezel. <button class="btnNext"><i class="icon fas fa-chevron-circle-right"></i></button> </fieldset> </div> <!-- DIV CafeInnen --> </div> <div id="screen5" class="screen"> <img id="stadtteil5" class="stadtteil imgInactive" src="_img/stadtteil5.png" alt=""/> <div id="melanie"><img id="imgMelanie" src="_img/melanie_winkt2.png" alt=""/></div> <div id="screen5-msg1" class="msg msgStadt inactive"> Das ist Melanie Heinzelmann. Ihr Steuerberater hat schlechte Nachrichten. <button class="btnNext"><i class="icon fas fa-chevron-circle-right"></i></button> </div> <div id="steuerberater" class="inactive"><img id="steuerberaterImg" src="_img/steuerberater.png" alt=""/> </div> <div id="screen5-msg2-1" class="inactive"> <div class="sprechblase sp_right"> Ich fürchte, da kommt eine Steuer­nach­zahlung auf Sie zu! </div> </div> <div id="screen5-msg2-2" class="inactive"> <div class="sprechblase sp_left"> Super! </div> </div> <div id="screen5-msg2-3" class="inactive"> <div class="sprechblase sp_right"> Wiiiiiie bitte? </div> </div> <div id="screen5-msg2-4" class="inactive"> <div class="sprechblase sp_left"> Ich freue mich, wenn ich viele Steuern zahlen muss. Dann habe ich auch gut verdient! </div> </div> <div id="screen5-msg2-5" class="inactive"> <div class="sprechblase sp_right"> So gesehen ... </div> </div> <div id="screen5-msg2-6" class="inactive"> <div class="sprechblase sp_left"> Und wissen Sie, was am meisten Umsatz gebracht hat? </div> </div> <div id="screen5-msg2-7" class="inactive"> <div class="sprechblase sp_right"> Ja, das war überraschend, nämlich ... </div> </div> <div id="geschenkeladen" class="inactive hoverScale"><img src="_img/geschenkeladen.png" alt=""/></div> <div id="screen5-msg3" class="msg msgStadt inactive"> Leider verstehen wir den Steuerberater nicht, weil ein LKW vorbeifährt. Melanie kehrt in ihren Geschenkeladen zurück. Der läuft gut, vor allem, seit sie ihre Produkte auch online anbietet. Weil sie exklusive skandinavische Produkte verkauft, kommen sogar Kunden aus der Nachbarstadt.<br/> <button class="btnNextAction"> Womit hat sie 2020 am meisten Umsatz gemacht? <i class="icon fas fa-chevron-circle-right"></i> </button> </div> <div id="screen5-msg4" class="msg msgStadt msg-info inactive"> <fieldset> <legend><i class="icon fas fa-info"></i></legend> <h3>Lokaler Wirtschaftskreislauf</h3> Lokales Einkaufen fördert die Wirtschaft. Unternehmen geben ihr Geld auch vor Ort aus. So bleibt das Geld im lokalen Kreislauf. Und auch die Unternehmensgewinne stützen durch die Gewerbesteuern die Region. <button class="btnNext"><i class="icon fas fa-chevron-circle-right"></i></button> </fieldset> </div> <!-- DIV OnlineShopInnen --> </div> </div> <!---- BUCHHANDLUNG INNENRAUM --> <div id="BuchhandlungInnen"> <img class="" src="_img/buchhandlung-innen.png" alt=""/> <button id="helpBuchhandlung" class="btnHelp"><i class="icon fas fa-question-circle"></i></button> <div id="helpBuchhandlungMSG" class="msg msgBuch inactive"> <h2>Hilf Paul, ein passendes Geschenk zu finden. </h2> Einzelne Bücher sind anklickbar.<br/>Finde das richtige. <br/> <button class="btnNext btnBack" id="buchTippBtn"><i class="icon fas fa-info-circle"></i>Gib mir bitte einen Tipp!</button> <span class="hidden" id="buchTipp">Wo fünf gleichfarbige Bücher nebeneinander stehen, wird es interessant.</span> <button class="btnNext btnBack " id="buchhandlungBackToCity"><i class="icon fas fa-undo-alt currentColor"></i>Ich will das Rätsel nicht lösen. Bitte zurück zur Stadt!</button> <button class="btnNext btnBack btnClose"><i class="icon fas fa-chevron-circle-right"></i>Ich will weitersuchen.</button> </div> <div id="screen1-btnBuch1" class="btnBuch"><img src="_img/buch1.png" alt=""/></div> <div id="screen1-btnBuch1MSG" class="msg msgBuch inactive"> <h2>Unterm Rad.<br/><small>Hermann Hesse</small></h2> Frühe Erzählung des Nobelpreisträgers. Guter Einstieg in das Gesamtwerk. <br/><br/> <span class="red">Tolles Buch. Aber nicht das passende Geschenk.</span> <button class="btnNext red"><i class="icon fas fa-chevron-circle-right"></i> Weitersuchen</button> </div> <div id="screen1-btnBuch2" class="btnBuch"><img src="_img/buch2.png" alt=""/></div> <div id="screen1-btnBuch2MSG" class="msg msgBuch inactive"> <h2>60 Kilo Sonnenschein.<br/><small>Hallgrímur Helgason</small></h2> <blockquote>„Die Figuren, die Helgason sich ausdenkt, sind eine rare Pracht. Seiner krachend absurden Phantasie verfällt man sofort.“ <br/><i>Spiegel Online</i></blockquote> <br/> <span class="red">Tolles Buch. Aber nicht das passende Geschenk.</span> <button class="btnNext red"><i class="icon fas fa-chevron-circle-right"></i> Weitersuchen</button> </div> <div id="screen1-btnBuch3" class="btnBuch"><img src="_img/buch3.png" alt=""/></div> <div id="screen1-btnBuch3MSG" class="msg msgBuch inactive"> <h2>Der Tag, an dem die Oma das Internet kaputt gemacht hat.<br/><small>Marc-Uwe Kling</small></h2> Das erste Kinderbuch des Känguru-Chronisten. Großartwitzig. <br/><br/> <span class="red">Tolles Buch. Aber nicht das passende Geschenk.</span> <button class="btnNext red"><i class="icon fas fa-chevron-circle-right"></i> Weitersuchen</button> </div> <div id="screen1-btnBuch4" class="btnBuch"><img src="_img/buch4.png" alt=""/></div> <div id="screen1-btnBuch4MSG" class="msg msgBuch inactive"> <h2>Cheng.<br/><small>Heinrich Steinfest</small></h2> Erster Band der Krimireihe um den Wiener Privatdetektiv Markus Cheng. Skuriller Humor, einzigartiger Schreibstil. <br/><br/> <span class="red">Tolles Buch. Aber nicht das passende Geschenk.</span> <button class="btnNext red"><i class="icon fas fa-chevron-circle-right"></i> Weitersuchen</button> </div> <div id="screen1-btnBuch5" class="btnBuch"><img src="_img/buch5.png" alt=""/></div> <div id="screen1-btnBuch5MSG" class="msg msgBuch inactive"> <h2>Die unglaubliche Geschichte von der Riesenbirne.<br/><small>Jakob Martin Strid</small></h2> Aus dem Stand ein Klassiker für Kinder jeden Alters. <br/><br/> <span class="red">Tolles Buch. Aber nicht das passende Geschenk.</span> <button class="btnNext red"><i class="icon fas fa-chevron-circle-right"></i> Weitersuchen</button> </div> <div id="screen1-btnBuch6" class="btnBuch"><img src="_img/buch6.png" alt=""/></div> <div id="screen1-btnBuch6MSG" class="msg msgBuch inactive"> <h2>Heimat muss man selber machen. Wie wir gemeinsam eine lebenswerte Gesellschaft schaffen.<br/><small>Sina Trinkwalder</small></h2> Das Buch der Unternehmerin und Gründerin des ersten textilen Social Business in Deutschland. <br/><br/> <span class="red">Tolles Buch. Aber nicht das passende Geschenk.</span> <button class="btnNext red"><i class="icon fas fa-chevron-circle-right"></i> Weitersuchen</button> </div> <div id="screen1-btnBuch7" class="btnBuch"><img src="_img/buch7.png" alt=""/></div> <div id="screen1-btnBuch7MSG" class="msg msgBuch inactive"> <h2>Hamster im hinteren Stromgebiet.<br/><small>Joachim Meyerhoff</small></h2> Schauspieler des Jahres, erfolgreicher Schriftsteller, jetzt Schlaganfall. Was Meyerhoff daraus macht, lässt einem die Augen tränen. <br/>Vor Lachen. <br/><br/> <span class="red">Tolles Buch. Aber nicht das passende Geschenk.</span> <button class="btnNext red"><i class="icon fas fa-chevron-circle-right"></i> Weitersuchen</button> </div> <div id="screen1-btnBuch8" class="btnBuch"><img src="_img/buch8.png" alt=""/></div> <div id="screen1-btnBuch8MSG" class="msg msgBuch inactive"> <h2>Überleben in 25 Jahren Ehe.<br/><small>Peter Butschkow</small></h2> Humorvolle Texte und Cartoons zur Silberhochzeit. Geschenkbuchklassiker. <br/> <button class="btnNext"><i class="icon fas fa-chevron-circle-right"></i> Ja, das ist das perfekte Geschenk! </button> </div> <div id="screen1-msg5" class="msg msg-success inactive"> <h2><i class="icon fas fa-check-circle"></i> Super, du hast Paul gerettet!</h2> <p>Die Buchhändlerin packt das Geschenk ein und Paul sucht noch eine passende Glückwunschkarte dazu aus. Außerdem hat er beim Schmökern ein Buch für sich selber entdeckt. <br/><br/> <em>Wenn du in die Stadt zurückkehrst, ist sie ein bisschen bunter geworden. Danke fürs Mitmachen!</em> </p> <button id="btnReturnToStadt1" class="btnNextStadtteil"><i class="icon fas fa-chevron-circle-right"></i> zurück zur Stadt </button> <button id="btnMSGBuch" class="btnNextStadtteil Invert"><i class="icon fas fa-chevron-circle-right"></i> noch ein bisschen weiter schmökern </button> </div> </div> <!---- SENIORENHEIM INNEN/PARK --> <div id="seniorenheim" class="innenScreen"> <img src="_img/seniorenheim.png" alt="Seniorenheim"> <button id="helpPark" class="btnHelp"><i class="icon fas fa-question-circle"></i></button> <div id="helpParkMSG" class="msg msgBuch inactive"> <h2>Hilf den Walzens, Tante Marie zu finden.</h2> Einzelne Seniorinnen und Senioren sind anklickbar. Finde Tante Marie.<br/> <button class="btnNext btnBack" id="parkTippBtn"><i class="icon fas fa-info-circle"></i>Gib mir einen Tipp!</button> <span class="hidden" id="parkTipp">Tante Marie hat einen Lieblingsbaum. Und macht gern Spaß.</span> <button class="btnNext btnBack " id="parkBackToCity"><i class="icon fas fa-undo-alt currentColor"></i>Ich will das Rätsel nicht lösen. Bitte zurück zur Stadt!</button> <button class="btnNext btnBack btnClose"><i class="icon fas fa-chevron-circle-right"></i>Ich will weitersuchen.</button> </div> <div id="screen2-heiner" class="btnFigur"><img class="float-right" src="_img/heiner1.png" alt=""></div> <div id="screen2-heinerMSG" class="msg msgBuch msgFigur inactive"> Heiner Peralta ist pensionierter Polizeibeamter. Früher sangen die Verbrecher, wenn er sie vernahm, heute vernimmt er gerne den Gesang der Vögel im Park. <br/><br/> <span class="red">Interessante Person mit spannender Geschichte. Aber nicht Tante Marie.</span> <button class="btnNext red"><i class="icon fas fa-chevron-circle-right"></i> Weitersuchen</button> </div> <div id="screen2-helga" class="btnFigur"><img src="_img/helga1.png" alt=""></div> <div id="screen2-helgaMSG" class="msg msgBuch msgFigur inactive"> Helga Bäuerle ist nicht mehr so gut zu Fuß. Aber weil die Luisen-Pflege mitten in der Stadt liegt und die Innenstadt barrierefrei gestaltet wurde, kann sie mit ihrem E-Rolli sogar alleine ins Theater fahren. <br><br> <span class="red">Interessante Person mit spannender Geschichte. Aber nicht Tante Marie.</span> <button class="btnNext red"><i class="icon fas fa-chevron-circle-right"></i> Weitersuchen</button> </div> <div id="screen2-herta" class="btnFigur"><img src="_img/herta1.png" alt=""></div> <div id="screen2-hertaMSG" class="msg msgBuch msgFigur inactive"> Herta Kowalski betrieb früher eine Kiezkneipe in Berlin. Ihr Leitspruch: „Das Leben ist hart. Aber ich bin Herta.“ <br><br> <span class="red">Interessante Person mit spannender Geschichte. Aber nicht Tante Marie.</span> <button class="btnNext red"><i class="icon fas fa-chevron-circle-right"></i> Weitersuchen</button> </div> <div id="screen2-luiselotte" class="btnFigur"><img src="_img/luiselotte1.png" alt=""></div> <div id="screen2-luiselotteMSG" class="msg msgBuch msgFigur inactive"> Luise Maier und Lotte Müller sind Zwillinge und auch im hohen Alter unzertrennlich. Dass Ihre verstorbenen Männer Luis Müller und Lothar Maier hießen, glaubt ihnen niemand. Stimmt aber. <br><br> <span class="red">Interessante Personen mit spannender Geschichte. Aber nicht Tante Marie.</span> <button class="btnNext red"><i class="icon fas fa-chevron-circle-right"></i> Weitersuchen</button> </div> <div id="screen2-oskar" class="btnFigur"><img class="float-right" src="_img/oskar1.png" alt=""></div> <div id="screen2-oskarMSG" class="msg msgBuch msgFigur inactive"> Oskar Ricoletti kam in den Sechzigern aus Italien nach Deutschland und blieb für immer. „Ist jetzt so warm hier wie in Bella Italia“, lacht er. <br><br> <span class="red">Interessante Person mit spannender Geschichte. Aber nicht Tante Marie.</span> <button class="btnNext red"><i class="icon fas fa-chevron-circle-right"></i> Weitersuchen</button> </div> <div id="screen2-tante" class="btnFigur"><img src="_img/tante.png" alt=""></div> <div id="screen2-tanteMSG" class="msg msgBuch msgFigur inactive"> Marie Walz schaut hinter ihrem Lieblingsbaum hervor. Sie hat ein Späßle gemacht und sich versteckt. <br/> <button class="btnNext"><i class="icon fas fa-chevron-circle-right"></i> Ja, das ist Tante Marie!</button> </div> <div id="screen2-gebuesch" class="btnFigur"><img src="_img/gebuesch.png" alt=""></div> <div id="screen2-msg5" class="msg msg-success inactive"> <h2><i class="icon fas fa-check-circle"></i>Hurra, du hast Marie gefunden!</h2> <p>Jetzt freut sich Marie auf einen Zwetschgenkuchen mit Margarete und Karl-Heinz im Café. <br/><br/> Wenn du in die Stadt zurückkehrst, ist sie ein bisschen bunter geworden. Danke fürs Mitmachen!</p> <button id="btnReturnToStadt2" class="btnNextStadtteil"><i class="icon fas fa-chevron-circle-right"></i> zurück in die Stadt </button> <button id="btnMSGPark" class="btnNextStadtteil Invert"><i class="icon fas fa-chevron-circle-right"></i> weiter mit den anderen Senior:innen plaudern </button> </div> </div> <!---- SPORTGESCHAEFT INNENRAUM --> <div id="rohre" class="innenScreen"> <div class="pipe-water-wrapper"> <img src="_img/roehren_hintergrund.png" alt=""> <div class="water"></div> </div> <img src="_img/roehren_vordergrund.png" alt="" class="absolute top-0"> <button id="helpRohre" class="btnHelp"><i class="icon fas fa-question-circle"></i></button> <div id="helpRohreMSG" class="msg msgBuch inactive"> <h2>Hilf Kurt und Yasmin, das kaputte Ventil zu finden.</h2> Einzelne Räder sind anklickbar. Finde das richtige, damit das Wasser wieder abläuft. <br/> <button class="btnNext btnBack" id="rohreTippBtn"><i class="icon fas fa-info-circle"></i>Gib mir einen Tipp!</button> <span class="hidden" id="rohreTipp">Wenn du schon am Rad drehst, dann am besten unten links.</span> <button class="btnNext btnBack " id="rohreBackToCity"><i class="icon fas fa-undo-alt currentColor"></i>Ich will das Rätsel nicht lösen. Bitte zurück zur Stadt!</button> <button class="btnNext btnBack btnClose"><i class="icon fas fa-chevron-circle-right"></i>Ich will weitersuchen.</button> </div> <div id="screen3-ventilMSG" class="msg msgBuch msgVentil inactive"> Schönes Ventil. Aber leider nicht das richtige. Das Wasser steigt! <br><br> <button class="btnNext red"><i class="icon fas fa-chevron-circle-right"></i> Weitersuchen</button> </div> <div id="screen3-richtigesVentilMSG" class="msg msgBuch msgVentil inactive"> Puh, das war knapp! <br><br> <button class="btnNext"><i class="icon fas fa-chevron-circle-right"></i> Weiter</button> </div> <div id="ventil1" class="ventil"></div> <div id="ventil2" class="ventil"></div> <div id="ventil3" class="ventil"></div> <div id="ventil4" class="ventil"></div> <div id="ventil5" class="ventil"></div> <div id="ventilEnd" class="ventil"></div> <div id="screen3-msg5" class="msg msg-success inactive"> <h2><i class="icon fas fa-check-circle"></i>Toll! Du hast das richtige Ventil gefunden.</h2> <p>Das Wasser geht wieder zurück. Kurt und Yasmin reparieren den Schaden. Danach holen sie die Trikots ab. Paula wird sich freuen. <br><br> Wenn du in die Stadt zurückkehrst, ist sie ein bisschen bunter geworden. Danke fürs Mitmachen! </p> <button id="btnReturnToStadt3" class="btnNextStadtteil"><i class="icon fas fa-chevron-circle-right"></i> zurück zur Stadt </button> <!-- <button id="btnMSGBuch" class="btnNextStadtteil Invert"><i class="icon fas fa-chevron-circle-right"></i> noch ein bisschen weiter schmökern</button>--> </div> </div> <!---- CAFE INNEN --> <div id="CafeInnen" class="innenScreen"> <img class="" src="_img/cafe-innen.png" alt=""/> <button id="helpCafe" class="btnHelp"><i class="icon fas fa-question-circle"></i></button> <div id="helpCafeMSG" class="msg msgBuch inactive"> <h2>Wer hat den besten Beitrag gepostet und erhält die meisten Likes?</h2> Mit Klick auf die Smartphones scrollst du durch die Timeline der Freundinnen. <br/> <button class="btnNext btnBack" id="cafeTippBtn"><i class="icon fas fa-info-circle"></i>Gib mir einen Tipp!</button> <span class="hidden" id="cafeTipp">Leonie knipst viel. Manchmal ganze Serien. Schau dir alle Bilder an.</span> <button class="btnNext btnBack " id="cafeBackToCity"><i class="icon fas fa-undo-alt currentColor"></i>Ich will das Rätsel nicht lösen. Bitte zurück zur Stadt!</button> <button class="btnNext btnBack btnClose"><i class="icon fas fa-chevron-circle-right"></i>Ich will weitersuchen.</button> </div> <a id="screen4-btnInstaLinks1" class="btnInstaLinks"><img src="_img/insta-links-1.png" alt=""/></a> <a id="screen4-btnInstaLinks2" class="btnInstaLinks"><img src="_img/insta-links-2.png" alt=""/></a> <a id="screen4-btnInstaLinks3" class="btnInstaLinks"><img src="_img/insta-links-3.png" alt=""/></a> <a id="screen4-btnInstaLinks4" class="btnInstaLinks"><img src="_img/insta-links-4.png" alt=""/></a> <a id="screen4-btnInstaLinks5" class="btnInstaLinks"><img src="_img/insta-links-5.png" alt=""/></a> <a id="screen4-btnInstaRechts1" class="btnInstaRechts"><img src="_img/insta-rechts-1.png" alt=""/></a> <a id="screen4-btnInstaRechts2" class="btnInstaRechts"><img src="_img/insta-rechts-2.png" alt=""/></a> <a id="screen4-btnInstaRechts3" class="btnInstaRechts"><img src="_img/insta-rechts-3.png" alt=""/></a> <a id="screen4-btnInstaRechts4" class="btnInstaRechts"><img src="_img/insta-rechts-4.png" alt=""/></a> <a id="screen4-btnInstaRechts5" class="btnInstaRechts"><img src="_img/insta-rechts-5.png" alt=""/></a> <a id="screen4-btnInstaRechts6" class="btnInstaRechts"><img src="_img/insta-rechts-6.png" alt=""/></a> <a id="screen4-btnInstaRechts7" class="btnInstaRechts"><img src="_img/insta-rechts-7.png" alt=""/></a> <a id="screen4-btnInstaRechts8" class="btnInstaRechts"><img src="_img/insta-rechts-8.png" alt=""/></a> <a id="screen4-btnInstaRechts9" class="btnInstaRechts"><img src="_img/insta-rechts-9.png" alt=""/></a> <!-- <a id="screen4-btnInstaRechts10" class="btnInstaRechts"><img src="_img/insta-rechts-10.png" alt=""/></a>--> <div id="screen4-msg5" class="msg msg-success inactive"> <h2><i class="icon fas fa-check-circle"></i> Klare Sache:<br/> Leonie hat gewonnen!</h2> <p>Ihr Post zum Unfall von Annalenas Ex Jan-Uwe wird von vielen Followern geteilt und erhält Likes ohne Ende. Dieses Shopping-Date vergessen die beiden Freundinnen nicht so schnell. <br/><br/> <em>Wenn du in die Stadt zurückkehrst, ist sie ein bisschen bunter geworden. Danke fürs Mitmachen!</em> </p> <button id="btnReturnToStadt4" class="btnNextStadtteil"><i class="icon fas fa-chevron-circle-right"></i> zurück zur Stadt </button> <button id="btnMSGCafe" class="btnNextStadtteil Invert"><i class="icon fas fa-chevron-circle-right"></i> weiter durch die Smartphones scrollen </button> </div> </div> <!---- ONLINE-SHOP INNENRAUM --> <div id="OnlineShopInnen" class="innenScreen"> <img class="" src="_img/onlineshop-innen.png" alt=""/> <button id="helpOnlineShop" class="btnHelp"><i class="icon fas fa-question-circle"></i></button> <div id="helpOnlineShopMSG" class="msg msgBuch inactive"> <h2>Finde Melanies Umsatzbringer 2020.</h2> Klicke dich durch ihren Onlineshop. Nutze die Buttons 'nächster Artikel' und 'vorheriger Artikel'.<br/> <button class="btnNext btnBack" id="onlineShopTippBtn"><i class="icon fas fa-info-circle"></i>Gib mir einen Tipp!</button> <span class="hidden" id="onlineShopTipp">Was fängt mit „K“ an und reimt sich auf „Tier“?</span> <button class="btnNext btnBack " id="onlineShopBackToCity"><i class="icon fas fa-undo-alt currentColor"></i>Ich will das Rätsel nicht lösen. Bitte zurück zur Stadt!</button> <button class="btnNext btnBack btnClose"><i class="icon fas fa-chevron-circle-right"></i>Ich will weitersuchen.</button> </div> <div id="screen5-imgArtikelAlle" class="imgArtikel"><img src="_img/artikel-alle.png" alt=""/></div> <a id="screen5-btnArtikelAlleTasse" class="btnArtikelAlleDummy"><img src="_img/btnDummyArtikel.png" alt=""/></a> <a id="screen5-btnArtikelAlleKissen" class="btnArtikelAlleDummy"><img src="_img/btnDummyArtikel.png" alt=""/></a> <a id="screen5-btnArtikelAlleAnhaenger" class="btnArtikelAlleDummy"><img src="_img/btnDummyArtikel.png" alt=""/></a> <a id="screen5-btnArtikelAlleButton" class="btnArtikelAlleDummy"><img src="_img/btnDummyArtikel.png" alt=""/></a> <a id="screen5-btnArtikelAlleSchal" class="btnArtikelAlleDummy"><img src="_img/btnDummyArtikel.png" alt=""/></a> <a id="screen5-btnArtikelAllePostkarten" class="btnArtikelAlleDummy"><img src="_img/btnDummyArtikel.png" alt=""/></a> <a id="screen5-btnArtikelAlleKlopapier" class="btnArtikelAlleDummy"><img src="_img/btnDummyArtikel.png" alt=""/></a> <a id="screen5-btnArtikelAlleAufkleber" class="btnArtikelAlleDummy"><img src="_img/btnDummyArtikel.png" alt=""/></a> <a id="screen5-btnArtikelAlleDecke" class="btnArtikelAlleDummy"><img src="_img/btnDummyArtikel.png" alt=""/></a> <a id="screen5-btnArtikelAlleCappie" class="btnArtikelAlleDummy"><img src="_img/btnDummyArtikel.png" alt=""/></a> <a id="screen5-btnArtikelAlleLikoer" class="btnArtikelAlleDummy"><img src="_img/btnDummyArtikel.png" alt=""/></a> <a id="screen5-btnArtikelTasse" class="btnArtikel"><img src="_img/artikel-tasse.png" alt=""/></a> <a id="screen5-btnArtikelKissen" class="btnArtikel"><img src="_img/artikel-kissen.png" alt=""/></a> <a id="screen5-btnArtikelAnhaenger" class="btnArtikel"><img src="_img/artikel-anhaenger.png" alt=""/></a> <a id="screen5-btnArtikelButton" class="btnArtikel"><img src="_img/artikel-button.png" alt=""/></a> <a id="screen5-btnArtikelSchal" class="btnArtikel"><img src="_img/artikel-schal.png" alt=""/></a> <a id="screen5-btnArtikelPostkarten" class="btnArtikel"><img src="_img/artikel-postkarten.png" alt=""/></a> <a id="screen5-btnArtikelKlopapier" class="btnArtikel"><img src="_img/artikel-klopapier.png" alt=""/></a> <a id="screen5-btnArtikelAufkleber" class="btnArtikel"><img src="_img/artikel-aufkleber.png" alt=""/></a> <a id="screen5-btnArtikelDecke" class="btnArtikel"><img src="_img/artikel-decke.png" alt=""/></a> <a id="screen5-btnArtikelCappie" class="btnArtikel"><img src="_img/artikel-cappie.png" alt=""/></a> <a id="screen5-btnArtikelLikoer" class="btnArtikel"><img src="_img/artikel-likoer.png" alt=""/></a> <a id="screen5-btnArtikelNext" class="btnArtikelNext"><img id="imgArtikelNext" src="_img/btnArtikelNext.png" alt=""/></a> <a id="screen5-btnArtikelPrev" class="btnArtikelPrev"><img id="imgArtikelPrev" src="_img/btnArtikelPrev.png" alt=""/></a> <a id="screen5-btnSchweden" class="btnSchweden"><img src="_img/btnSchweden.png" alt=""/></a> <a id="screen5-btnLogoGeschenke" class="btnLogoGeschenke"><img src="_img/btnLogoGeschenke.png" alt=""/></a> <div id="screen5-msg5" class="msg msg-success inactive"> <h2><i class="icon fas fa-check-circle"></i> Super, du hast ihn gefunden!</h2> <p>Dass ausgerechnet das Toilettenpapier der größte Umsatzbringer 2020 werden würde, damit haben weder Melanie noch ihr Steuerberater gerechnet. Wer konnte das auch ahnen? <br/><br/> <em>Wenn du in die Stadt zurückkehrst, ist sie ein bisschen bunter geworden. Danke fürs Mitmachen!</em> </p> <button id="btnReturnToStadt5" class="btnNextStadtteil"><i class="icon fas fa-chevron-circle-right"></i> zurück zur Stadt </button> <button id="btnMSGOnlineShop" class="btnNextStadtteil Invert"><i class="icon fas fa-chevron-circle-right"></i> weiter im Online-Shop surfen </button> </div> </div> <div id="msgFinal" class="msg msg-success inactive"> <h2><i class="icon fas fa-check-circle"></i> Danke fürs Mitmachen!</h2> <p>Wer vor Ort einkauft, sorgt dafür, dass die Stadt bunt bleibt.<br/> Dass du dabei mitmachst, finden wir gut.<br/> Für mehr Informationen zur Region, besuch die <a href="https://www.neckaralb.de" target="_blank">Standortagentur Neckar-Alb</a>. <br/> </p> </div> <footer> © <a href="https://www.neckaralb.de" target="_blank">Standortagentur Neckar-Alb</a> | <a href="https://www.neckaralb.de/top-menue/datenschutz-microsites.html" target="_blank">Datenschutz</a> | <a href="https://www.neckaralb.de/impressum.html" target="_blank">Impressum</a> | <a href="https://www.peak-agentur.de" target="_blank">Idee+Umsetzung</a> </footer> <div id="preloader"></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="_js/main.js"></script> <script src="_js/screen1.js"></script> <script src="_js/screen2.js"></script> <script src="_js/screen3.js"></script> <script src="_js/screen4.js"></script> <script src="_js/screen5.js"></script> </body> </html>