/* Ink Atelier — website (part 3): Studio, Termin, App. INFORMATION ARCHITECTURE (agreed 2026-08-20, option B): four pages, each answering a different question — arbeiten what the work looks like artists who does it, and where an enquiry starts studio where we are, who we are, what people say termin how an enquiry works The separate "kontakt" page was removed: address and opening hours are facts about the place, so they live on Studio and in the footer. Termin deliberately does NOT re-list the artists as cards — that list lives once, on Artists, on the card with the photo. It ends with the direct channels as plain lines, because that is the action, not a second profile. See DESIGN-DIRECTION.md. All prose is LOREM IPSUM placeholder, and lives in content.js. */ /* ---- Studio ---------------------------------------------------------- */ function Studio({ route }) { return (
} lead={} />
{[1, 2, 3].map((n, i) => (

))}
{/* The photographer, right-aligned under the photo (Celia, 2026-10-11); empty hides it. */} {(T("studio.photo.caption").trim() || window.IA_EDIT_MODE) && ( )}
{/* Per Celia, 2026-08-23: "beim Studio Abschnitt auch Fotos zum scrollen". The same Filmstrip as Arbeiten — full-bleed, so it sits outside the Section container. */}
); } /* ---- Studio ▸ Small Businesses --------------------------------------- Per Celia: "kann man Unterkategorien machen zum Studio zB Small Businesses?". The makers and their one-liners are hers (round 4), as is the aftercare product. Brand names keep their own spelling. Logos: "Da können wir gerne noch die Logos ganz klein hinzufügen" — not delivered yet. A maker gets a small logo the moment `logo` is set (a file in assets/logos/), and a link once `url` is; until then the row is just the name. The page intro and the photo are still placeholders. Names and one-liners are text in content.js (smallbusinesses..*); the list itself — who is on it, in what order — is here. */ const MAKERS = [ { id: "muteddesign" }, { id: "idaping" }, { id: "studioella" }, { id: "feineskleines" }, { id: "headfullceramics" }, { id: "tantemau" }, { id: "studio33" }, ]; const CARE = [ { id: "believatattooaftercarecream" }, // Celia, 2026-10-13: the new cleansing gel next to the cream. { id: "tattoomedcleansinggel" }, ]; /* Names, one-liners and links are text in content.js. An empty name hides the row on the site (in ?edit it stays, so it can be filled again); the link is set in ?edit on a line only edit mode shows. */ const shownMakers = (list) => list.filter((m) => T(`smallbusinesses.${m.id}.name`).trim() || window.IA_EDIT_MODE); function MakerRow({ maker }) { const k = "smallbusinesses." + maker.id; const url = T(k + ".url").trim(); const text = ; const name = url ? {text} : text; return (
{/* A small square to the left: a product or the logo (Celia, 2026-10-08). Optional — a maker without one shows none. */} {(placeSrc(k + ".photo") || window.IA_EDIT_MODE) && ( )}
{name}
{(T(k + ".what") || window.IA_EDIT_MODE) && (
)} {window.IA_EDIT_MODE && (
link:
)}
); } function SmallBusinesses({ route }) { return (
} lead={} /> {shownMakers(MAKERS).map((m) => )} {shownMakers(CARE).map((m) => )}
); } /* ---- Besuch ---------------------------------------------------------- What used to be the Kontakt page. Address, hours and the studio's own channels — reference material about the place, not a second call to action. The call to action is on the artist cards. */ function Besuch() { return (
} max="18ch" /> instagram go("termin")}>termin anfragen
); } /* ---- Rezensionen ------------------------------------------------------ Celia wants her Google reviews here — her words, and it matters to her. Round 4, Celia: "Rezensionen dürfen gerne übernommen werden". COPIED BY HAND, not synced. The Places API only ever returns five reviews and Google picks which; it needs a billed key; and a live embed would need a consent banner. So these are hand-picked Google reviews, copied WORD FOR WORD — never trimmed or corrected — with the reviewer shortened to first name and initial. The aggregate (rating and count) is text in content.js, so Celia can keep it current in ?edit; the reviews themselves are not editable there. `checked` is when Johannes last compared it with Google. § 5b Abs. 3 UWG: a site that shows customer reviews has to say whether and how it checks they come from real customers — hence the one line under the block. It says they are not checked, which is true (Johannes, 2026-10-13): they are copied by hand and not kept in sync. On the styling: no gold stars. The site has no accent colour and no icons, so stars would be the loudest thing on the page. The rating is a number in the display face instead, which matches the numeric language already running through the site (01 / 09, 01 02 03). */ const REVIEWS = { checked: "2026-09-12", profileUrl: CONTACT.maps, // Word for word, emoji and line breaks included. Mixed so neighbours // differ in length and subject; two are about Hanna. items: [ { author: "Antonia H.", text: "So ein ästhetischer Ort - perfekte Atmosphäre für ein Tattoo. Und die Liebe Celia ist eine sehr achtsame, emphatische Person, die ein schönes Tattooerlebnis schafft. Danke!!!" }, { author: "Sally P.", text: "Ich bin super zufrieden! Celia hat mein Tattoo komplett von Hand angezeichnet und geduldig alle meine Wünsche berücksichtigt. Man merkt einfach, wie viel Liebe und Geduld in ihrer Arbeit steckt. Die Atmosphäre im Studio war super angenehm, habe mich sehr wohl gefühlt. Kann das Studio von Herzen empfehlen! 🥰" }, { author: "Lea Marie L.", text: "Einfach fantastisch! Ich war bei der lieben Hannah für mein allererstes Tattoo und hab mich super wohl gefühlt ☺️👏🏼 Das Studio ist wunderschön und gemütlich eingerichtet, man wird super aufgeklärt, immer gefragt ob alles in Ordnung ist und die Artistinnen sind mega freundlich. Ihre Arbeit war wirklich fantastisch- wunderschöne, präzise Fine Line Art ich bin sooo zufrieden 👏🏼👏🏼👏🏼❤️ Vielen Lieben Dank, würde immer wieder gerne dort hin kommen!" }, { author: "Lisa D.", text: "Ich war heute zum ersten Mal da und es war ganz wunderbar. Schon vorab war die Kommunikation angenehm und unkompliziert. Meine sehr unkonkreten Wünsche wurden perfekt zu einem tollen Tattoo umgesetzt und sich viel Zeit für Platzierung und co. genommen. Ich habe mich wohl gefühlt und werde auf jeden Fall wieder kommen 😍" }, { author: "Alina M.", text: "Ich kann das Studio und vor allem Celia von Herzen weiterempfehlen! Man fühlt sich vom ersten Moment an wohl und gut aufgehoben. Ich bin mit meinem Tattoo super zufrieden und komme ganz bestimmt wieder🤍" }, { author: "Jette A.", text: "Ich war jetzt schon zum zweiten Mal bei Hanna und kann sie und das Ink Atelier wärmstens weiterempfehlen 💕 die Atmosphäre ist sehr angenehm und ich habe mich rundum wohlgefühlt ☺️ Hanna hat meine Vorstellungen genauso umgesetzt, wie ich es wollte und hat mich bei Größe und Platzierung immer sehr gut beraten!!! Eins meiner Tattoos von ihr ist mittlerweile schon ein paar Monate alt und ist sehr gut verheilt 👍👍 alles in allem merkt man, dass Hanna mit großem Engagement und Leidenschaft tättowiert und ein Profi für Fine line Tattoos ist 🫶🫶" }, { author: "Anna G.", text: "Ich habe mir im Ink Atelier mein erstes Tattoo stechen lassen und fand es ganz wunderbar. Celia hat mich großartig beraten und mir alles erklärt. Ich habe mich sofort gut aufgehoben gefühlt. Das Resultat ist wunderschön und ich bin vollkommen zufrieden." }, { author: "Conny P.", text: "Bin zwar Tattooerfahren,aber es war mein erster Besuch bei Celia in diesem wunderschönen Studio.\nHerzlicher Empfang und gleich die Hauspuschen wie von Omi wecken ein heimisches Gefühl.\nHabe ein wunderschönes Ergebnis mit nach Hause genommen und habe schon die nächsten Ideen im Kopf. Danke für Deine tolle Arbeit und Deine Herzlichkeit❤" }, { author: "Sophia E.", text: "Ich kann das Ink Atelier nur wärmstens empfehlen! Ich habe mich sofort wohl, sicher und gut aufgehoben gefühlt. Ich wurde herzlich empfangen, meine Wünsche wurden berücksichtigt und die drei Stunden vergingen wie im Flug. Mit meinen Tattoos bin ich mehr als zufrieden und ich freue mich jetzt schon auf den nächsten Termin bei Celia! Dankeschön <3" }, { author: "Helena J.", text: "ich kann das studio zu 100% weiterempfehlen, die atmosphäre ist total warm und einladend und Celia ist unglaublich talentiert!! sie hat meine ersten tattoos gestochen und ich würde immer wieder zu ihr gehen 💗" }, { author: "Laina K.", text: "Dieses Tattoo Studio und die tollen Professionellen Arbeiten von Celia, lassen keine Wünsche offen." }, ], }; function Rezensionen() { const [i, setI] = React.useState(0); const step = (d) => setI((p) => (p + d + REVIEWS.items.length) % REVIEWS.items.length); return (
{/* The aggregate — the more persuasive half, and the half that does not need five reviews to be worth showing. */}
{/* Every review sits in the same grid cell and only the current one is visible. The block is therefore as tall as the longest review, so the arrows below never jump — they stay under the cursor while someone clicks through. Long reviews are set one size smaller, or the longest would make the box so tall that every short one floats in empty space. pre-line keeps the line breaks a reviewer wrote. */}
{REVIEWS.items.map((it, k) => (
220 ? "clamp(0.98rem, 1.5vw, 1.15rem)" : "clamp(1.05rem, 2vw, 1.45rem)", lineHeight: "var(--leading-snug)", color: "var(--ink)", margin: 0, whiteSpace: "pre-line", }}>{it.text}
))}
step(-1)} label="zurück">← step(1)} label="weiter">→

eine auswahl unserer google-rezensionen, wortgetreu übernommen. wir prüfen nicht, ob sie von personen stammen, die bei uns tätowiert wurden.

); } /* ---- Termin ---------------------------------------------------------- The process, not a booking platform and not a second artist directory. It answers "what do I send, and then what happens", and ends with the direct channels. */ function Termin() { return (
} lead={} />
{[1, 2, 3].map((n, i) => (

))}
{/* The action. Plain lines, not cards — the artist profiles live on the Artists page and are not repeated here. */}
{ARTISTS.map((a) => (
{/* A face with every name. Naming someone and showing nothing of them reads as a list of strangers — and the portrait is small enough that this is still not a second profile card. In colour here, black and white only on the artists' own cards (Celia, 2026-10-06). */} {handleOf(a) ? ( @ ) : ( )} {enquiresByMail(a) ? "per mail anfragen" : "per dm anfragen"}
))}
go("artists")}>artists ansehen
{/* A landscape photo on the white part, centred above the questions: booking, a design, a consultation (Celia, 2026-10-08). */}
{/* A line under it (Celia, 2026-10-10); empty hides it. */} {(T("termin.photo.caption").trim() || window.IA_EDIT_MODE) && ( )}
); } /* ---- FAQ -------------------------------------------------------------- */ function FAQ() { // As many places as there are faq.N.question texts; one whose question // is left empty is not shown, so Celia can have fewer without anyone // touching the code. In ?edit the list always ends in one free place: // a question written there is a new one, and the next free place // appears (edit/apply.mjs adds them to content.js). const nums = [...new Set([...Object.keys(window.CONTENT.texts), ...Object.keys(window.IA_TEXT || {})] .map((k) => /^faq\.(\d+)\.question$/.exec(k)).filter(Boolean).map((m) => +m[1]))].sort((a, b) => a - b); const last = nums[nums.length - 1] || 0; if (window.IA_EDIT_MODE && T(`faq.${last}.question`).trim()) nums.push(last + 1); const qs = nums.filter((n) => T(`faq.${n}.question`).trim() || window.IA_EDIT_MODE); const [open, setOpen] = React.useState(0); return (
{qs.map((n, i) => { const isOpen = open === i; return (

); })}
); } /* ---- Impressum & Datenschutz ------------------------------------------ Both made by Celia with the eRecht24 generator (2026-10-13), adjusted where the generator didn't fit what the site actually does — see the notes at each page. Every text is in content.js (impressum.*, datenschutz.*), so she checks and corrects them in ?edit. Until she signs off, a banner says "entwurf" (legal.entwurf); deleting that text is the sign-off and removes it. A section whose text is empty is not shown; a one-element entry is a numbered group heading. Reachable from the footer only; deliberately not in the main nav. */ function LegalPage({ label, title, sections }) { /* No Reveal anywhere on this page. Legal text is reference material — you land on it, scan it, maybe ctrl-F it. Fading it in on scroll makes it feel like marketing and gets in the way of reading. It just renders. */ const grouped = sections.some((e) => e.length === 1); const H = grouped ? "h3" : "h2"; const shown = sections.filter(([, body]) => typeof body !== "string" || T(body).trim() || window.IA_EDIT_MODE); return (

{title}

{(T("legal.entwurf").trim() || window.IA_EDIT_MODE) && (
)}
{shown.map(([heading, body]) => body === undefined ? (

{heading}

) : (
{heading}

{typeof body === "string" ? : body}

))}
); } /* A section is [heading, content key] — or [heading, element] for a line that follows the site's data. The Impressum is the one Celia made with the eRecht24 generator (2026-10-13), which asks for its source line to stay. Kept from her own version of 2026-10-12: the second email. The generator's "[Telefonnummer]" is left out (no phone on the site, her wish), "Tätowierer" is "Tätowiererin" (Celia), and the number is a USt-IdNr. — DE plus nine digits; a Wirtschafts-IdNr. would carry a "-00001"-style suffix. */ function Impressum() { return ( ); } /* eRecht24's text (Celia, 2026-10-13), with these changes: - Instagram and Google Maps are plain links here, nothing embedded; the generator only offers them as embedded plugins (with consent, which would need a banner), so one section on the links replaces both. - Hosting: the generator wants payment for Cloudflare, so that section is ours: Cloudflare hosts the site and forwards the domain's email (since 2026-10-13). - Ours too: the Google reviews shown with shortened names. - Left out: "Analyse-Tools" (there are none), the phone placeholder. Fixed: the postcode (14467). */ function Datenschutz() { return ( ); } /* ---- App -------------------------------------------------------------- */ const PAGES = { start: Start, arbeiten: Arbeiten, artists: Artists, studio: Studio, "studio/small-businesses": SmallBusinesses, termin: Termin, impressum: Impressum, datenschutz: Datenschutz, }; function App() { const route = useRoute(); // ?edit: re-render when a photo is swapped (edit/editor.js). const [, setEditRev] = React.useState(0); React.useEffect(() => { const bump = () => setEditRev((n) => n + 1); window.addEventListener("ia-edits", bump); return () => window.removeEventListener("ia-edits", bump); }, []); const Page = PAGES[route] || Start; return (
); } Object.assign(window, { Studio, MAKERS, CARE, shownMakers, MakerRow, SmallBusinesses, Besuch, REVIEWS, Rezensionen, Termin, FAQ, LegalPage, Impressum, Datenschutz, PAGES, App });