@charset "UTF-8"; /* ⚠️ DIESE ZEILE MUSS DIE ERSTE SEIN — und sie muss dastehen. Gemessen 31.08.2026: Hostinger liefert die Datei als `text/css` OHNE charset aus. Ohne @charset raet der Browser die Kodierung, liest die Umlaute in den Kommentaren („Groesser", „Muenchen", „fuellte") als Doppelbytes — und bricht den Parser mittendrin ab. Von 123 Regeln kamen 45 an: alles ab `.zier` fehlte, das Zier-SVG wurde 293 px gross und schwarz, die Icons riesig. Die Willkommensseite sah dadurch kaputt aus, obwohl die Datei vollstaendig und fehlerfrei war. */ /* =================================================================== willkommen.roema-design.de — Bewertungs- und Willkommens-Karte. Design-Richtung "Kaffeehaus-Couture" (Entwurfsrunde 29.08.2026, drei unabhängige Entwürfe + dreifache Jury; Ansage Marcel: "edel und grau", die weiße Standard-Karte davor war ihm zu öde). Die Idee in einem Satz: die Seite ist eine dunkle Bühne aus Graphit, und darauf liegt EINE helle Papier-Insel — genau dort, wo der Gast handeln soll. Der Blick landet ohne Pfeil und ohne Signalfarbe auf den Sternen, weil Helligkeit stärker führt als jede bunte Fläche. Der Haus-Akzent (--brand-color aus clients.php) kennzeichnet, er trägt nicht: Kante der Insel, Prägung der Sterne, Zierraute. Keine bunten Vollflächen — dieselbe Regel wie auf den Siebert's-Websites. EINE feste Design-Richtung, kein Dark-Mode-Zweig (Hausregel). =================================================================== */ /* Schriften SELBST GEHOSTET — kein Google-CDN (DSGVO, LG München I 2022). Dieselben Dateien wie auf den Siebert's-Websites. */ @font-face{ font-family:'Cormorant Garamond'; src:url('../fonts/cormorant-garamond-latin.woff2') format('woff2'); font-weight:300 700;font-style:normal;font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Cormorant Garamond'; src:url('../fonts/cormorant-garamond-latin-ext.woff2') format('woff2'); font-weight:300 700;font-style:normal;font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304, U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0, U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:'Jost'; src:url('../fonts/jost-latin.woff2') format('woff2'); font-weight:100 900;font-style:normal;font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Jost'; src:url('../fonts/jost-latin-ext.woff2') format('woff2'); font-weight:100 900;font-style:normal;font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304, U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0, U+2113,U+2C60-2C7F,U+A720-A7FF; } :root{ --brand-color: #5b6066; /* Rückfall; index.php setzt den echten Wert */ /* ---------- Die Buehne traegt die Farben DES BETRIEBS ---------- ⚠️ REGEL (Marcel, 04.09.2026): „Die Farben des Unternehmens und der Website spiegeln immer die Farben dieser Willkommensseiten wider, damit es uebernommen wird." Die drei Werte hier sind nur der RUECKFALL — das originale Grau der Siebert's-Wortmarke, aus den Logodateien gemessen: #23282c liegt in K17 und K19 auf 99 % der deckenden Pixel (PIL-Zaehlung 29.08.2026). Marcel damals: „das originale grau vom Logo was die immer nehmen". Jeder Kunde mit eigenen Werten in clients.php › buehne/buehneTief/ buehneHoch ueberschreibt sie; index.php setzt sie am
. Wer nichts eintraegt, bekommt weiter das Grau — deshalb aendert diese Regel an den bestehenden Karten nichts. */ --buehne: #23282c; --buehne-tief: #1b1f22; --buehne-hoch: #2b3136; /* eine Stufe heller, fuer Absetzungen */ --graphit: #2b2a28; --papier: #f4f2ee; --papier-hell: #fdfcf9; --silber: #a7adb5; --stein: #6f6a63; --stein-tief: #5c574f; /* Fließtext auf Papier — 6,4:1 */ --tinte: #2b2a28; --linie: #d6d2cb; --hell-1: rgba(255,255,255,.09); --hell-2: rgba(255,255,255,.17); --hell-3: rgba(255,255,255,.30); --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif; --sans:"Jost","Avenir Next","Helvetica Neue",Arial,sans-serif; --kurve:cubic-bezier(.22,1,.36,1); /* ================= HAUSSTIL DER WILLKOMMENSKARTEN =================== 22.09.2026, Ansage Marcel: „Mach einmal fuer alle einen neuen Stil und lege ihn fest." Ab hier steht der Stil in Tokens statt in Einzelwerten — vorher trug jede Komponente ihren eigenen Radius (16/12/11/9/3) und ihren eigenen Schatten. Der Aufbau ist bei allen sechs Betrieben derselbe, die Hausfarbe bleibt Akzent und traegt nie eine Flaeche. Der ausgeschriebene Stil steht in _STILGUIDE.md daneben. */ /* Radien — weich, aber nicht rund. Drei Stufen reichen. */ --r-s: 10px; /* Feld, Zeile in einer Gruppe */ --r-m: 14px; /* Knopf, Kachel, Zeilengruppe */ --r-g: 18px; /* Insel, Newsletter — die Traeger */ --r-voll:999px; /* Pille */ /* Schatten — Tiefe, keine Wolke. Zwei Stufen, mehr nie. */ --schatten-1:0 1px 2px rgba(20,18,16,.05); --schatten-2:0 1px 2px rgba(20,18,16,.04), 0 14px 32px -14px rgba(20,18,16,.30); /* Zeichen — ein Kasten, drei Groessen. Strichstaerke steht am SVG (1.5). */ --ikon: 22px; /* Linkzeile, Standard */ --ikon-s: 18px; /* Knopf, Pille */ /* Seitenrand am Handy. Haelt Karten, Bildkachel und Knoepfe vom Bildschirmrand weg, damit Rahmen und runde Ecken ganz stehen. Gemessen 23.09.: ohne ihn 375 px breit bei left 0. */ --rand: 16px; /* Typo-Skala. Grad und Gewicht gehoeren zusammen: gross+leicht (Serif) fuer Namen und Fragen, klein+gesperrt (Sans) fuer Rubriken. Dazwischen nichts. */ --t-marke: clamp(1.9rem, 7.4vw, 2.3rem); --t-frage: clamp(1.34rem, 5.6vw, 1.58rem); --t-zeile: 1rem; --t-klein: .86rem; --t-mini: .7rem; /* nur gesperrte Versal-Rubriken */ } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; min-height:100vh; min-height:100dvh; /* iOS rechnet die Adressleiste sonst mit */ /* 23.09.2026: 34 -> 12 px plus Sicherheitsrand des Geraets (Hoehenrechnung im _STILGUIDE.md › „Hoehen"). */ padding:0 0 calc(12px + env(safe-area-inset-bottom, 0px)); /* Grauer Look im Marken-Ton (Ansage Marcel 29.08.), aber NICHT traurig: der Grund ist das Logo-Grau, alles Bedienbare liegt als helle Karte darauf. Der Kontrast macht die Seite freundlich, nicht die Helligkeit. */ background:var(--buehne); background-image:radial-gradient(130% 55% at 50% -6%, color-mix(in srgb, var(--brand-color) 26%, transparent), transparent 70%); background-attachment:fixed; color:var(--papier); font-family:var(--sans); font-weight:300; font-size:16px; line-height:1.62; -webkit-font-smoothing:antialiased; } /* Nur für Vorleseprogramme — der Name steht sichtbar genau einmal (im Logo). */ .nur-vorleser{position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap} .verstecktes-svg{position:absolute;width:0;height:0;overflow:hidden} .karte{width:100%;max-width:430px;margin-inline:auto;text-align:center} /* Der Kopf bleibt ein randloses Band, alles darunter steht im Seitenrand. */ .karte__leib{padding-inline:var(--rand)} /* ---------- Auftritt: alles kommt gestaffelt, nichts hüpft ---------- */ .auf{opacity:0;transform:translateY(12px);animation:auf .72s var(--kurve) both;animation-delay:var(--d,0s)} @keyframes auf{to{opacity:1;transform:none}} /* ---------- Kopf ---------- */ .karte__kopf{ /* 23.09.2026 knapper (unten 28 -> 18, Abstand 22 -> 16), oben bleiben 34 px: die Sprachwahl sitzt absolut bei top 10 px und darf nie ins Logo ragen. */ text-align:center;padding:34px 20px 18px;margin:0 0 16px; /* Der Kopf hebt sich nur leicht vom Grund ab — eine harte Kante wuerde die Seite wieder in zwei Haelften teilen. */ background:linear-gradient(180deg, var(--buehne-hoch), var(--buehne)); border-bottom:2px solid color-mix(in srgb, var(--brand-color) 70%, var(--buehne)); } .marke{margin:0} .marke__text{font-family:var(--serif);font-weight:600;font-size:2rem;color:#fff;line-height:1.1} .logo{ display:block;margin:0 auto; /* Größer als vorher (Ansage Marcel 29.08.): die Wortmarke IST die Überschrift, darunter steht nur noch der Ort. */ width:min(268px,80%);height:auto; /* ⚠️ Deckel gegen HOCHFORMATIGE Logos (31.08.2026). Die Breitenangabe allein genügt nur bei Wortmarken im Querformat. Das Sizilien-Wappen von Mamma Mia ist quadratisch — bei 268 px Breite wurde es 268 px hoch und füllte den halben Bildschirm, noch bevor der erste Satz kam. `object-fit:contain` hält dabei das Seitenverhältnis. */ max-height:96px;object-fit:contain; /* dunkle Wortmarke auf transparentem Grund → auf der Bühne weiß drehen */ filter:brightness(0) invert(1); } .monogramm{ width:78px;height:78px;margin:0 auto; border-radius:50%; border:1px solid var(--hell-2); display:grid;place-items:center; font-family:var(--serif);font-weight:500;font-size:31px;letter-spacing:.04em; color:#fff; } /* Zierlinie mit Raute — der Trenner, den auch die Speisekarten tragen */ .karte__ort{ margin:0;font-size:.7rem;font-weight:400; letter-spacing:.42em;text-indent:.42em;text-transform:uppercase; color:var(--silber); } /* ---------- Speisekarte: der erste Griff, noch auf der Bühne ---------- */ .karte-oben{margin:0 0 18px} /* 21.09.2026 (Ansage Marcel, Il Gusto): steht der Knopf UNTER den Linkzeilen, dreht sich sein Abstand um. Der Wert ist derselbe wie der Abstand der Linkzeilen nach oben, damit die Reihe gleichmäßig bleibt. */ .karte-oben--unten{margin:22px 0 0} /* 22.09.2026 (Ansage Marcel): Speisekarte steht wie Instagram und Website, Zeichen links, Text links, gleiche Schriftgröße. */ .knopf-menu{ display:flex;align-items:center;justify-content:flex-start;gap:13px; min-height:54px;padding:15px 18px; background:#fff; border:1px solid var(--linie); border-radius:var(--r-m); color:var(--tinte); box-shadow:var(--schatten-1); /* Normalschreibung statt gesperrter Versalien: die Jury hat gemessen, dass Versalien mit weiter Sperrung bei schlechtem Licht am schwersten zu lesen sind — und sie klingen auch strenger. */ font-size:var(--t-zeile);font-weight:400;letter-spacing:.01em;text-align:left; text-decoration:none; transition:transform .16s var(--kurve),border-color .25s ease-out,background .25s ease-out; } .knopf-menu:hover{border-color:var(--brand-color)} .knopf-menu:active{transform:scale(.99)} /* ⚠️ HIER STEHT KEINE `stroke-width` MEHR (22.09.2026). Strichstaerke, Kappen und Ecken kommen aus `ikone()` am selbst — eine CSS-Eigenschaft schlaegt das Attribut und liess das Set wieder auseinanderlaufen (gemessen davor: 1.4 hier, 1.5 an zwei Pfaden, 1.4 in der Linkzeile). Das CSS sagt nur noch, wie GROSS und in welcher FARBE das Zeichen steht. */ .knopf-menu svg{width:var(--ikon);height:var(--ikon);flex:none;stroke:var(--brand-color)} /* ---------- Die Papier-Insel: hier handelt der Gast ---------- */ /* ---------- Die Papier-Insel: hier handelt der Gast ---------- EINE Flaeche traegt die Handlung. Die Hausfarbe steht als feine Kante oben darauf, nicht als Fuellung — so kennzeichnet sie, ohne zu schreien. */ .insel{ position:relative; background:#fff; border:1px solid var(--linie); border-top:2px solid var(--brand-color); border-radius:var(--r-g); /* 23.09.2026 (Ansage Marcel): Google-Karte niedriger, 28/26 -> 22/20. */ padding:22px 20px 20px; color:var(--tinte); text-align:center; box-shadow:var(--schatten-2); } .oberzeile{ margin:0 0 6px;font-size:.66rem;font-weight:400; letter-spacing:.34em;text-indent:.34em;text-transform:uppercase; color:var(--stein); } .insel h1{ font-family:var(--serif);font-weight:600; font-size:clamp(1.72rem,7.4vw,2.15rem);line-height:1.1; margin:0 0 10px;text-wrap:balance;color:var(--tinte); } .unterzeile{ margin:0;font-family:var(--serif); /* Die Frage ist der Grund, warum die Seite existiert — sie bekommt den größten Grad nach dem Hausnamen. Jury-Urteil 29.08.2026, einstimmig: der leise Gruß in Kleinschrift war die schwächste Stelle. */ font-size:clamp(1.34rem,5.6vw,1.58rem);line-height:1.25;color:var(--tinte); text-wrap:balance; } .unterzeile .leise{ display:block;font-style:italic;font-size:.72em;color:var(--stein-tief); margin-bottom:2px; } /* ---------- Sterne: geprägt, nicht gemalt ---------- */ .sterne{display:flex;justify-content:center;gap:6px;margin:14px 0 0} .stern{ -webkit-tap-highlight-color:transparent; background:none;border:0;margin:0; /* 46×46 — über dem Mindestmaß für Tap-Ziele, ohne dass die Reihe bricht */ /* 23.09.2026: Innenabstand 5/3 -> 2 px, die Reihe steht damit genau auf 46 px (vorher 52). Zeichen und Tippflaeche bleiben gleich gross. */ min-width:46px;min-height:46px;padding:2px; display:grid;place-items:center; line-height:0;cursor:pointer;border-radius:3px; transition:transform .2s var(--kurve); } .stern svg{width:42px;height:42px;display:block;overflow:visible} /* Gold wie bei Google — der Gast erkennt die Skala, bevor er liest. Leer: Umriss in Stein, gemessen 3,4:1 gegen Weiß (WCAG 1.4.11). */ .stern .form{fill:none;stroke:#a9a49c;stroke-width:1.6;stroke-linejoin:round; transition:fill .2s ease-out, stroke .2s ease-out} .stern.voll .form{fill:url(#gold);stroke:#dd8f0c;stroke-width:1} .stern.voll svg{filter:drop-shadow(0 1px 2px rgba(221,143,12,.32))} .stern.voll{animation:praegen .46s cubic-bezier(.34,1.5,.64,1) both;animation-delay:calc(var(--i) * 58ms)} @keyframes praegen{0%{transform:scale(1)}38%{transform:scale(1.22)}100%{transform:scale(1)}} /* ---------- 1 bis 3 Sterne: die Reihe darf kleiner werden ---------- 22.09.2026 (Ansage Marcel). Nach einer leisen Bewertung ist die Reihe nicht mehr die Hauptsache, sondern die Quittung darueber, was gewaehlt wurde — sie tritt zurueck, damit darunter der Weg Platz hat. ⚠️ NUR DAS ZEICHEN wird kleiner. Der Knopf behaelt seine 46 px Tippflaeche, und der Google-Knopf darunter bleibt sichtbar und mit 44 px tippbar: das ist die rechtliche Grenze gegen Bewertungs-Gating (UWG Anhang zu § 3 Abs. 3 Nr. 23b/c) — leiser darf er sein, versteckt oder unerreichbar nie. */ /* 22.09.2026: Kleiner werden die Sterne ueber transform, nicht ueber width. width zu animieren rechnet das Layout in jedem Bild neu (pruef.py: „teure Eigenschaften"); scale laeuft auf der Grafikkarte. Tippflaeche bleibt 44 px. */ .sterne--klein .stern svg{transform:scale(.8)} .sterne--klein .stern{min-width:44px;min-height:44px} .sterne{transition:none} .stern svg{transform-origin:50% 50%;transition:transform .28s var(--kurve)} .stern:hover{transform:translateY(-2px)} .stern:active{transform:scale(.93)} .stern:focus-visible{outline:2px solid var(--brand-color);outline-offset:1px} .wertwort{ font-family:var(--serif);font-style:italic;font-size:1.04rem; /* 23.09.2026: Zeile genau so hoch wie reserviert (1.4 / 1.4em). Vorher 1.62 gegen 1.55em: beim ersten Stern rueckte alles 1,2 px nach unten. */ color:var(--stein-tief);margin:4px 0 0;line-height:1.4;min-height:1.4em; opacity:0;transform:translateY(5px); transition:opacity .4s ease-out, transform .4s var(--kurve); } .wertwort.da{opacity:1;transform:none} /* ---------- Die beiden Wege ---------- */ .weg{margin-top:4px;text-align:left} .weg[hidden]{display:none} .weg.rein{animation:rein .55s var(--kurve) both} @keyframes rein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .weg::before{ content:"";display:block;height:1px;margin:18px auto 16px;max-width:120px; background:linear-gradient(90deg,transparent,var(--linie),transparent); } .dank{ margin:0 0 14px;text-align:center; font-family:var(--serif);font-size:1.16rem;line-height:1.4;color:var(--tinte); } /* ---------- Knöpfe ---------- */ .knopf{ display:block;width:100%;border:0;border-radius:var(--r-m); font-family:var(--sans);font-size:.95rem;font-weight:500; text-align:center;text-decoration:none;cursor:pointer; transition:transform .16s var(--kurve),border-color .22s ease-out,background .22s ease-out,color .22s ease-out; } .knopf:active{transform:scale(.985)} /* Der eine gefüllte Knopf der Seite: Graphit mit Akzentkante unten. */ .knopf-gross{ min-height:54px;padding:16px 18px; background:color-mix(in srgb, var(--brand-color) 88%, #1b1a18); color:#fff;letter-spacing:.02em;font-size:1rem; box-shadow:0 8px 22px color-mix(in srgb, var(--brand-color) 30%, transparent); } .knopf-gross:hover{background:var(--brand-color)} .knopf-google{margin-bottom:0} /* 21.09.2026 — das mehrfarbige Google-G im großen Knopf. `.knopf` setzt display:block; ohne diese Regel stünde das Zeichen auf einer eigenen Zeile. Die weiße Scheibe darunter ist Pflicht: das G ist für helle Flächen gezeichnet, auf dem dunklen Markenrot verlöre das Blau seinen Kontrast. */ .knopf-google--g{display:flex;align-items:center;justify-content:center;gap:11px} .knopf-google--g svg{ width:20px;height:20px;flex:none; background:#fff;border-radius:50%;padding:4px;box-sizing:content-box; } .knopf-klein,.knopf-fein{ min-height:48px;padding:13px 16px;border-radius:var(--r-m); background:transparent;color:var(--tinte); border:1px solid var(--linie);font-weight:400; } .knopf-klein:hover,.knopf-fein:hover{border-color:var(--brand-color)} /* ---------- Linkzeilen: EINE Flaeche, feine Trennlinien ---------- 22.09.2026 (Ansage Marcel: „feine Trennlinien statt Kästen"). Vorher stand jede Zeile als eigener Kasten mit eigenem Rahmen und eigenem Schatten da — bei sechs Wegen waren das sechs Rahmen untereinander, und der Blick zaehlte Kanten statt Ziele. Jetzt ist es EINE ruhige Flaeche; getrennt wird mit einer Haarlinie. `overflow:hidden` haelt die erste und letzte Zeile in der Rundung der Gruppe — ohne das steht eine gefuellte Zeile (vCard) mit rechtwinkliger Ecke in einer runden Flaeche. ⚠️ Tippflaeche unveraendert bei 56 px. Das Wandern nach rechts ist weg: in einer geschlossenen Flaeche wuerde eine einzelne Zeile ausscheren. */ .links{ margin-top:22px;text-align:left; display:grid;gap:0; background:#fff; border:1px solid var(--linie);border-radius:var(--r-m); box-shadow:var(--schatten-1); overflow:hidden; } .knopf-neben{ display:flex;align-items:center;gap:13px; min-height:56px;padding:15px 16px; background:transparent; border:0;border-top:1px solid var(--linie);border-radius:0; color:var(--tinte);font-size:var(--t-zeile);font-weight:400;text-align:left; box-shadow:none; transition:background .2s ease-out; } .links > .knopf-neben:first-child{border-top:0} .knopf-neben:hover{background:color-mix(in srgb, var(--brand-color) 6%, #fff)} .knopf-neben:focus-visible{outline:2px solid var(--brand-color);outline-offset:-2px} .knopf-neben svg{ width:var(--ikon);height:var(--ikon);flex:none;stroke:var(--stein); } /* Fremdmarken bringen ihre eigene Zeichnung mit und duerfen nie eingefaerbt oder verkleinert werden (Ansage Marcel 22.09.2026) — sie stehen eine Spur groesser, weil eine Flaechenform optisch leichter wirkt als ein Strich. */ .knopf-neben svg.ikone--marke{width:calc(var(--ikon) + 4px);height:calc(var(--ikon) + 4px)} /* Instagram bringt seine eigenen Farben mit (Verlauf im Kopf der Seite) — die Strichfarbe der uebrigen Zeichen darf sie nicht ueberschreiben. ⚠️ 04.09.2026 erweitert: die Regel griff nur bei fill="url(#ig)". LinkedIn (#0A66C2) und Google (vier feste Farben) tragen einfache fill-Werte und bekamen deshalb zusaetzlich den grauen Strich der uebrigen Zeichen — sichtbar als grauer Rand um die Markenfarbe. */ .knopf-neben svg [fill^="url"], .knopf-neben svg [fill^="#"]{stroke:none} /* ---------- Digitale Visitenkarte (04.09.2026) ---------- Der einzige Knopf, der etwas AUF DEM TELEFON hinterlaesst — alles andere ist ein Besuch. Darum hebt er sich ab: Markenfarbe als Flaeche statt Weiss. Bewusst KEIN Verlauf und kein Schatten extra: die Karte lebt vom ruhigen Papier-Eindruck, ein zweiter Blickfang wuerde die Feedback-Sterne schwaechen. */ /* ⚠️ 14.09.2026, GEMESSEN: Weiss auf der reinen Markenfarbe faellt durch, sobald die Marke hell ist — das Apothekengruen #489348 kam auf 3,79:1 (pruef.py mass 3,92:1; Grenze 4,5:1, WCAG 1.4.3). Dieselbe Loesung wie beim grossen Knopf: die Marke wird gegen Graphit abgedunkelt, statt die Schrift grau zu machen. Bei dunklen Marken (Il Gusto #8b1e1e) aendert sich fast nichts, bei hellen rettet es die Zeile. ⚠️ Nicht die Deckkraft senken — 78 % Weiss auf hellem Gruen faellt genauso durch, nur unauffaelliger. */ .knopf-vcard{ background:color-mix(in srgb, var(--brand-color) 84%, #14130f); border-color:transparent; color:#fff; } .knopf-vcard:hover{ border-color:transparent; background:color-mix(in srgb, var(--brand-color) 84%, #14130f); filter:brightness(1.08); } .knopf-vcard svg{stroke:#fff} .knopf-vcard .zeile-klein{color:rgba(255,255,255,.88)} /* ---------- Formulare (liegen auf der Papier-Insel) ---------- */ .klein-details{margin-top:6px} .klein-details summary{ cursor:pointer;font-size:.92rem;color:var(--stein-tief); text-align:center;padding:10px 0;list-style:none;min-height:44px; } .klein-details summary::-webkit-details-marker{display:none} .klein-details summary:hover{color:var(--brand-color)} .formular{display:grid;gap:11px;margin-top:10px} .formular label{ display:grid;gap:5px; font-size:.86rem;font-weight:500;letter-spacing:.02em; color:var(--stein-tief); } .formular .optional{font-weight:300;text-transform:none;letter-spacing:0} .formular input,.formular textarea{ font-family:var(--sans);font-weight:300; font-size:1rem; /* 16px: iOS zoomt sonst beim Tippen */ color:var(--tinte);background:#fffefc; border:1px solid var(--linie);border-radius:var(--r-s); padding:12px 13px;width:100%;min-height:48px; } .formular textarea{resize:vertical;min-height:78px} .formular input:focus,.formular textarea:focus{ outline:2px solid var(--brand-color);outline-offset:1px;border-color:transparent; } .formular .knopf{margin-top:4px} .hp-feld{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;visibility:hidden} /* Falle für Werbe-Roboter. visibility:hidden nimmt das Feld zusätzlich aus Tab-Folge und Vorleser-Baum (neben tabindex=-1/aria-hidden im Markup); einfache Roboter füllen es trotzdem aus, weil es im Quelltext steht. */ .ds-hinweis{font-size:.75rem;line-height:1.5;color:var(--stein);margin:2px 0 0} .ds-hinweis a{color:var(--stein)} .google-klein{font-size:.9rem;color:var(--stein-tief);text-align:center;margin:16px 0 0} .google-klein a{color:var(--brand-color)} /* ⚠️ 14.09.2026 (Ansage Marcel): Der öffentliche Weg nach 1–3 Sternen ist kein Kleingedrucktes mehr, sondern eine Überschrift über einem vollen Knopf — „man soll Google schon sehen, nicht so ganz mini den Button". `.google-klein` bleibt für Altbestand stehen, benutzt wird sie hier nicht mehr. */ .google-offen{font-size:.95rem;color:var(--stein-tief);text-align:center; margin:22px 0 10px} .danke{ margin:14px 0 0;font-family:var(--serif);font-size:1.14rem;color:var(--tinte); } .danke[hidden]{display:none} /* ---------- Die anderen Läden ---------- */ .schwestern{margin-top:26px;text-align:left} .schwestern h2{ font-size:.7rem;font-weight:500; letter-spacing:.28em;text-indent:.28em;text-transform:uppercase; color:var(--silber);margin:0 0 12px;text-align:center; } .schwestern .reihe{display:grid;gap:8px} .chip{ display:flex;align-items:center;justify-content:space-between;gap:12px; min-height:62px;padding:14px 16px; background:#fff; border:1px solid var(--linie);border-left:2px solid var(--brand-color);border-radius:var(--r-m); color:var(--tinte);text-decoration:none; box-shadow:var(--schatten-1); transition:transform .16s var(--kurve),border-color .22s ease-out; } .chip:hover{transform:translateX(3px)} .chip__text{display:grid;gap:1px;text-align:left} .chip__name{font-family:var(--serif);font-size:1.16rem;line-height:1.2;color:var(--tinte)} /* ⚠️ 14.09.2026 GEMESSEN an Sieberts Buchholz und Kretsch: 4,37:1 bei 10,9 px — knapp unter der Grenze von 4,5:1 (WCAG 1.4.3). Die Zeile ist klein UND gesperrt gesetzt, da faellt jedes Zehntel auf. `--stein-tief` ist derselbe Farbton eine Stufe dunkler und im Haus schon als Fliesstextfarbe belegt. */ .chip__zeile{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stein-tief)} .chip__adresse{font-size:.82rem;line-height:1.35;color:var(--stein)} .chip .pfeil{color:var(--stein);font-size:1rem;flex:none} /* ---------- Standort-Karten (10.09.2026) ---------- Ein Standort ist jetzt ein Block statt einer Zeile: oben der Name als Hauptknopf (unveraendertes Ziel), darunter die Wege dorthin. Die Wege liegen IM Block und nicht daneben, damit auf 375 px klar bleibt, zu welchem Haus ein Knopf gehoert — nebeneinander gestellte Reihen lesen sich auf schmalen Schirmen wie eine einzige lange Liste. */ .schwestern__sub{ margin:-6px 0 12px;text-align:center; font-size:.86rem;line-height:1.45;color:var(--silber); } .reihe--standorte{gap:14px} .standort{display:grid;gap:0} /* Kopf und Wege sind EIN Block: unten offen, damit die Knopfreihe optisch daran haengt statt daneben zu schweben. */ .standort .chip--kopf{border-bottom-left-radius:0;border-bottom-right-radius:0} .standort__wege{ display:flex;flex-wrap:wrap;gap:6px; padding:10px 12px 12px; background:color-mix(in srgb, #fff 78%, transparent); border:1px solid var(--linie);border-top:0; border-left:2px solid var(--brand-color); border-radius:0 0 var(--r-m) var(--r-m); } .weg-knopf{ display:inline-flex;align-items:center;gap:7px; /* 44 px Tippflaeche — MB4 der Mobil-Checkliste; darunter trifft am Tisch niemand zuverlaessig. */ min-height:44px;padding:8px 12px; background:#fff; border:1px solid var(--linie);border-radius:var(--r-voll); color:var(--tinte);text-decoration:none; font-size:var(--t-klein);line-height:1.2; transition:transform .16s var(--kurve),border-color .22s ease-out; } .weg-knopf:hover{border-color:var(--brand-color);transform:translateY(-1px)} .weg-knopf svg{ width:var(--ikon-s);height:var(--ikon-s);flex:none;stroke:var(--stein); } .weg-knopf svg [fill^="url"], .weg-knopf svg [fill^="#"]{stroke:none} /* ---------- Fuß ---------- */ .fusszeile{ margin-top:18px;padding-top:8px; border-top:1px solid rgba(255,255,255,.12); font-size:.78rem;color:var(--silber);text-align:center; } .fusszeile p{margin:0} /* Impressum und Datenschutz sind Pflichtlinks — sie müssen mit dem Daumen zu treffen sein. Gemessen wurden vorher 16 px, dann 38,2 px Höhe. WCAG 2.5.5 verlangt 44 px: min-height plus mittige Ausrichtung, damit die Schrift an derselben Stelle steht wie vorher. */ .fusszeile a{ color:var(--silber);display:inline-flex;align-items:center;justify-content:center; min-height:44px;padding:9px 7px; } /* Fehlerkarte (unbekannte Kennung) */ .karte--leer .insel{border-top-color:var(--stein)} @media (prefers-reduced-motion: reduce){ *{animation:none !important;transition:none !important} .auf{opacity:1;transform:none} .wertwort{opacity:1;transform:none} } /* ---------- Zeilen mit zweiter Zeile (z. B. der Instagram-Name) ---------- */ .zeile-text{display:grid;gap:1px;text-align:left} .zeile-haupt{font-size:1rem;line-height:1.3} .zeile-klein{font-size:.82rem;color:var(--stein);letter-spacing:.01em} /* Instagram bekommt sein Zeichen so groß wie die Zeile hoch ist — es soll erkannt werden, bevor der Text gelesen wird (Ansage Marcel 29.08.). */ .knopf-insta svg{width:38px;height:38px;border-radius:11px} /* ---------- Gehört auch zu uns (Catering) ---------- */ .dazu{margin-top:20px;text-align:left} .dazu h2{ font-size:.7rem;font-weight:500; letter-spacing:.28em;text-indent:.28em;text-transform:uppercase; color:var(--silber);margin:0 0 12px;text-align:center; } .dazu .reihe{display:grid;gap:8px} /* Optisch leiser als die Läden: es ist eine Empfehlung, kein zweiter Standort. */ .chip--dazu{ border-left-width:1px;border-left-color:var(--linie); background:rgba(255,255,255,.9); box-shadow:none; } .chip--dazu .chip__name{font-size:1.04rem} /* Überschrift auf der Fehlerkarte — sie liegt jetzt auf der hellen Insel, vorher stand dunkle Tinte auf dunklem Grund (Prüfbefund 29.08.2026). */ .insel-titel{font-family:var(--serif);font-weight:600;font-size:1.5rem; line-height:1.2;margin:0 0 8px;color:var(--tinte)} .karte--leer .fusszeile{margin-top:22px} /* Freiwillige Zusatzfelder im Kritikweg */ .mehr-details summary{cursor:pointer;font-size:.9rem;color:var(--stein-tief); padding:10px 0;min-height:44px;list-style:none} .mehr-details summary::-webkit-details-marker{display:none} .mehr-details summary::before{content:"+ ";color:var(--brand-color)} .mehr-details[open] summary::before{content:"– "} .mehr-details{display:grid;gap:10px} /* ---------- Zwischenschritt bei 1-3 Sternen ---------- Beide Wege sind gleich groß und kosten denselben einen Klick. Der Unterschied zum verbotenen Bewertungs-Gating: nichts ist versteckt, nichts verriegelt, keiner der Wege ist schwerer erreichbar. */ .zwischen-text{margin:0 0 16px;font-size:1rem;color:var(--stein-tief);text-align:center} .zwei-wege{display:grid;gap:10px} .knopf-zweit{ background:#fff;color:var(--tinte); border:1.5px solid var(--brand-color); box-shadow:none; } .knopf-zweit:hover{background:color-mix(in srgb, var(--brand-color) 8%, #fff)} /* Der interne Weg im Gut-Fall bekommt dieselbe Größe wie der Google-Knopf */ .klein-details.gleich summary{ min-height:54px;padding:16px 18px; border:1.5px solid var(--brand-color);border-radius:11px; background:#fff;color:var(--tinte); font-size:1rem;font-weight:500; } .klein-details.gleich summary:hover{background:color-mix(in srgb, var(--brand-color) 8%, #fff)} .klein-details.gleich[open] summary{margin-bottom:8px} /* ═══════════════════════════════════════════════════════════════════════ Newsletter — steht ÜBER „Schön, dass Sie da sind" (Marcel, 04.09.2026). Er hat die vCard-Kachel dort ersetzt: „Dieser Bereich mit Kontakt speichern soll zu diesem Newsletterbereich werden." Warum er auf der Bühne steht und nicht auf der Papier-Insel: die Insel ist der Ort für die Frage nach dem Besuch. Zwei weiße Flächen übereinander nähmen ihr das Gewicht — der Gast wüsste nicht mehr, was zuerst dran ist. ═══════════════════════════════════════════════════════════════════════ */ .nl{ margin:0 0 14px;padding:20px 18px 18px; border-radius:var(--r-g); background:var(--buehne-hoch); border:1px solid var(--hell-2); box-shadow:0 10px 26px rgba(0,0,0,.22); } .nl__titel{ font-family:var(--serif);font-size:1.34rem;font-weight:600; color:#fff;letter-spacing:.005em;line-height:1.2; } /* 01.10.2026: Newsletter zu, bis der Gast tippt. Die ganze Zeile ist die Tippflaeche, rechts ein Winkel, der sich beim Oeffnen dreht (nur transform). */ .nl__oeffnen{display:flex;align-items:center;justify-content:space-between;gap:14px; min-height:44px;cursor:pointer;list-style:none} .nl__oeffnen::-webkit-details-marker{display:none} .nl__oeffnen::after{content:"";flex:none;width:9px;height:9px;margin-right:4px; border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor; transform:translateY(-3px) rotate(45deg);transition:transform .32s var(--kurve);opacity:.7} .nl__auf[open] .nl__oeffnen::after{transform:translateY(2px) rotate(225deg)} .nl__oeffnen:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:4px} .nl__oeffnen .nl__titel{margin:0;font-size:1.12rem} @media (prefers-reduced-motion:reduce){.nl__oeffnen::after{transition:none}} .nl__zeile{ margin-top:5px;font-size:.9rem;line-height:1.5; color:var(--silber); } .nl__form{margin-top:13px;display:grid;gap:9px} .nl__feld{ width:100%;min-height:48px;padding:12px 14px; border-radius:var(--r-m);border:1px solid var(--hell-3); background:rgba(255,255,255,.07);color:#fff; font-size:1rem;font-family:inherit; transition:border-color .2s ease-out,background .2s ease-out; } .nl__feld::placeholder{color:rgba(255,255,255,.42)} .nl__feld:focus{ outline:none;border-color:#fff;background:rgba(255,255,255,.12); } /* Das Häkchen trägt den Wortlaut, der später den Nachweis bildet — es ist der rechtlich wichtigste Text der ganzen Seite und darf nicht kleingedruckt wirken. 0.78rem ist die Untergrenze, bei der er noch bequem lesbar ist. */ .nl__haken{ display:flex;gap:9px;align-items:flex-start; font-size:.78rem;line-height:1.45;color:var(--silber);cursor:pointer; } /* ⚠️ 14.09.2026 GEMESSEN auf der Roema-Karte: 17 px — unter der Pflichtgrenze von 24 px (WCAG 2.5.8 AA). Das Haekchen sitzt zwar in einem und blockiert — die Flaeche ist ab der ersten Bildzeile da. ⚠️ KEIN JAVASCRIPT NOETIG (Keyframe mit `forwards`); app.js haelt nur ein Sicherheitsnetz fuer den Fall, dass ein Hintergrund-Tab die Keyframes anhaelt (belegte Falle 13b der Animations-Checkliste). ⚠️ Nur opacity und transform — nichts, was Schrift umbricht. ============================================================================ */ .lader{ position:fixed;inset:0;z-index:95; display:grid;place-items:center;padding:24px; background:var(--buehne); animation:lader-weg .26s ease-out .62s forwards; } .lader--wort{ animation-delay:.70s; } .lader__mitte{ line-height:0;will-change:transform,opacity; } .lader__logo{ display:block;width:min(240px,62vw);max-height:104px;height:auto; object-fit:contain; animation:lader-auf .46s var(--kurve) both; } /* Dieselbe Regel wie beim Kopf: dunkle Wortmarken auf transparentem Grund drehen auf der dunklen Buehne auf Weiss. Auf einer PAPIER-Karte waere das ein weisses Logo auf hellem Grund — also dort nicht. */ body:not(.karte--papier) .lader__logo:not(.lader__logo--farbe){ filter:brightness(0) invert(1); } /* „Von hinten nach vorn": der Name kommt klein aus der Tiefe und waechst EINMAL auf seine Groesse. Kein Nachfedern, kein zweiter Zug. */ .lader__wort{ display:block;line-height:1.06;color:var(--papier); padding:.06em .04em .16em; transform-origin:50% 50%; animation:lader-wachs .60s cubic-bezier(.2,.78,.22,1) both; } body.karte--papier .lader__wort{ color:var(--brand-color); } .lader__wort--schlicht{ font-family:var(--serif);font-weight:600;font-size:var(--t-marke); } @keyframes lader-auf{ from{ opacity:0;transform:scale(.965) } to{ opacity:1;transform:none } } @keyframes lader-wachs{ from{ opacity:0;transform:scale(.38) } to{ opacity:1;transform:scale(1) } } @keyframes lader-weg{ to{ opacity:0;visibility:hidden;pointer-events:none } } /* Sicherheitsnetz von app.js — darf unter keinen Umstaenden noch Klicks fangen. */ .lader[data-fertig]{ opacity:0;visibility:hidden;pointer-events:none } /* ⚠️ Wer Bewegung abgestellt hat, sieht SOFORT die Seite — keine schnellere Fassung. Muss `display:none` sein: die Sammelregel weiter oben schaltet alle Animationen ab, der Vorhang bliebe sonst stehen. */ @media (prefers-reduced-motion: reduce){ .lader{ display:none } } /* Im Schaufenster laeuft nichts (Hausregel wie bei [style*="--d"]) — index.php gibt die Flaeche dort schon gar nicht erst aus, das hier ist der Riegel. */ body.schaufenster .lader{ display:none } /* ============================================================================ LADEBILDSCHIRM (Intro) — 14.09.2026, gebaut fuer K22 Apotheke am Hugenottenplatz ---------------------------------------------------------------------------- Ansage Marcel: „oben soll das Logo ein A sein was sich dann aufbaut" — das ECHTE Apotheken-A. Ablauf in vier Zuegen: 0,1–1,2 s das Apotheken-A steht allein und waechst sanft auf 1,2–2,1 s es sinkt auf Zeilenhoehe und blendet weg, waehrend der rote Block „Apotheke" von links aufzieht — das Wort entsteht aus dem A 2,3–3,4 s darunter faehrt „Am Hugenottenplatz" auf 5,0–5,9 s alles wandert nach oben und wird zur Ueberschrift ⚠️ ES WIRD KEIN LOGO NACHGEBAUT. Sichtbar ist immer das Bild des Kunden; bewegt wird nur ein FENSTER darueber (`width` auf overflow:hidden). Zeile b zeigt dasselbe Bild um --i-wort nach links geschoben. ⚠️ NUR transform/opacity/width animiert, nichts, was Schrift umbricht. ⚠️ KEIN JAVASCRIPT NOETIG. Die Keyframes enden mit `forwards` im unsichtbaren Zustand; app.js richtet nur den Endpunkt pixelgenau auf den echten Kopf aus. Bleibt das Skript aus, blendet das Intro trotzdem weg — eine Seite, die hinter einem haengengebliebenen Vorhang stirbt, waere der teuerste Fehler dieses Bausteins. ============================================================================ */ .intro{ position:fixed;inset:0;z-index:90; display:grid;place-items:center; background:linear-gradient(180deg,var(--buehne-hoch),var(--buehne-tief)); animation:intro-vorhang .5s ease-out 5.6s forwards; } /* Massstab: Zeilenhoehe der Wortmarke im Intro. Alle Breiten leiten sich am gemessenen Originalbild ab — --i-ganz/--i-hoch/--i-wort aus clients.php. */ .intro__block{ --ih:clamp(30px,7.4vw,52px); --k:calc(var(--ih) / var(--i-hoch)); /* Skalierung Bild -> Schirm */ position:relative; display:flex;flex-direction:column;align-items:center;gap:calc(var(--ih) * .38); animation:intro-hoch .9s cubic-bezier(.65,0,.2,1) 5.0s forwards; } /* ---- Zug 1 und 2: das Apotheken-A ---- Es liegt ABSOLUT ueber der ersten Zeile, damit sein Verschwinden die beiden Zeilen nicht verschiebt — ein Sprung an dieser Stelle wuerde die ganze Bewegung billig aussehen lassen. */ .intro__a{ position:absolute;left:50%;top:0; width:calc(var(--ih) * 3.1);height:auto; transform:translate(-50%,calc(-50% + var(--ih) * .5)) scale(.72); opacity:0; animation:intro-a-auf .95s cubic-bezier(.3,1.3,.5,1) .12s forwards, intro-a-weg .85s cubic-bezier(.5,0,.15,1) 1.2s forwards; } @keyframes intro-a-auf{ to{ opacity:1;transform:translate(-50%,calc(-50% + var(--ih) * .5)) scale(1); } } /* Das A sinkt auf Zeilenhoehe und geht dabei weg — genau waehrend das Wort aufzieht. Nicht erst danach: sonst sieht man zwei Dinge nacheinander statt einer Verwandlung. */ @keyframes intro-a-weg{ to{ opacity:0;transform:translate(-50%,calc(-50% + var(--ih) * .5)) scale(.34); } } /* ---- Zug 2 und 3: die beiden Zeilen der Wortmarke ---- */ .intro__zeile{ display:block;overflow:hidden;height:var(--ih);width:0; } .intro__zeile--a{ animation:intro-wort 1.0s cubic-bezier(.4,0,.12,1) 1.2s forwards; } .intro__zeile--b{ animation:intro-rest 1.1s cubic-bezier(.4,0,.12,1) 2.3s forwards; } .intro__bild{ display:block;height:var(--ih);width:calc(var(--i-ganz) * var(--k));max-width:none; } /* Zeile b zeigt das Bild ab der rechten Kante des roten Blocks. */ .intro__bild--rest{ margin-left:calc(var(--i-wort) * var(--k) * -1); } @keyframes intro-wort{ to{ width:calc(var(--i-wort) * var(--k)); } } @keyframes intro-rest{ to{ width:calc((var(--i-ganz) - var(--i-wort)) * var(--k)); } } @keyframes intro-hoch{ to{ transform:translateY(var(--i-ziel-y,-32vh)) scale(var(--i-ziel-s,.86)); } } @keyframes intro-vorhang{ to{ opacity:0;visibility:hidden;pointer-events:none; } } /* Der echte Kopf haelt sich zurueck, bis das Intro oben angekommen ist — sonst stuenden Wortmarke und Intro-Wortmarke eine Sekunde lang doppelt da. */ .karte--intro .karte__kopf{ animation:intro-kopf .45s ease-out 5.45s both; } @keyframes intro-kopf{ from{ opacity:0 } to{ opacity:1 } } /* Ist das Intro durch (app.js setzt das Merkmal, sonst der Vorhang-Keyframe), darf es unter keinen Umstaenden noch Klicks abfangen. */ .intro[data-fertig]{ opacity:0;visibility:hidden;pointer-events:none; } /* ⚠️ Wer Bewegung abgestellt hat, bekommt KEINEN Ladebildschirm — nicht eine schnellere Fassung. Ein Vorhang ohne Bewegung ist nur eine Wartezeit. */ @media (prefers-reduced-motion: reduce){ .intro{ display:none; } .karte--intro .karte__kopf{ animation:none; } } /* Im Schaufenster (Vorschau-Kachel) laeuft nichts — Hausregel wie bei [style*="--d"]. */ body.schaufenster .intro{ display:none; } body.schaufenster .karte--intro .karte__kopf{ animation:none; } /* ---------- Sterne-Hinweis vor dem Sprung zu Google (14.09.2026) ---------- Ansage Marcel: bei 4-5 Sternen KEIN Textfeld mehr, nur Google — aber die Sterne sollen mitgehen. Google kann sie nicht vorbefuellen (kein Parameter, der Dialog oeffnet leer), also bekommt der Gast sie hier noch einmal gesagt. Eine Zeile, leise, direkt ueber dem Knopf: sie soll den Weg erklaeren, nicht ihn aufhalten. */ .sterne-mit{ margin:2px 0 10px; font:400 .86rem var(--sans);line-height:1.4;color:var(--stein); /* Derselbe Riegel wie bei `.wertwort` und `.sk-zaehler` (17.09.2026): der Hinweis wechselt mit der Sternzahl und wird bei manchen Werten ganz weggenommen — ohne reservierte Zeile ruckt der Google-Knopf darunter. */ min-height:1.4em; } .sterne-mit[hidden]{display:block;visibility:hidden} /* Die Rueckmeldung „Text kopiert" gibt es nur noch auf dem Kritik-Weg — dort, wo wirklich ein Text steht, der mitgehen kann. */ .bewtext__melde{ margin:8px 0 0;font:500 .86rem var(--sans); color:color-mix(in srgb, var(--brand-color) 80%, #1b1a18); /* ⚠️ 17.09.2026: „Text kopiert" erscheint 700 ms lang, BEVOR der Gast zu Google geschickt wird — und schob dabei Newsletter, Links und Fusszeile nach unten. Eine Meldung, die den Inhalt verrueckt, liest niemand, sie erschreckt nur. Die Zeile wird jetzt freigehalten und nur ein- und ausgeblendet. */ min-height:1.4em; } .bewtext__melde[hidden]{display:block;visibility:hidden} /* ---------- Wortmarke als Schriftzug (15.09.2026) ---------- Ansage Marcel für Il Gusto: „oben soll einfach groß Il Gusto in der Schriftart wie auf dem Logo stehen." ⚠️ Great Vibes ist die Schrift des Logos und liegt lizenziert (OFL) bereits im Kundenprojekt — hier self-hosted danebengelegt, NIE über ein fremdes CDN (§ 25 TDDDG). `font-display:swap`: lieber kurz in der Ersatzschrift lesen als gar nichts sehen. ⚠️ `unicode-range` bewusst NICHT gesetzt — der Schriftzug ist der Name des Betriebs, und der darf nie an einem fehlenden Zeichen zerbrechen. */ @font-face{ font-family:'Great Vibes'; src:url('../fonts/greatvibes.woff2') format('woff2'); font-weight:400;font-style:normal;font-display:swap; } .marke__zug{ display:block;margin:0 auto; color:var(--brand-color); line-height:1.06; /* Schreibschriften tragen ihre Unterlängen weit nach unten — ohne diese Luft schneidet der Kopfbereich das „G" von Gusto an. */ padding:.06em 0 .16em; } .marke__zug--script{ font-family:'Great Vibes','Snell Roundhand','Apple Chancery',cursive; /* Groß, aber nie breiter als die Karte: 8,2 vw skaliert vom Handy bis zum Schreibtisch, die Grenzen halten es lesbar. */ font-size:clamp(2.9rem, 8.2vw, 4.6rem); letter-spacing:.005em; } .marke__zug--serif{ font-family:var(--serif);font-weight:600; font-size:clamp(2rem, 5.4vw, 3rem); } /* Auf dunkler Bühne trägt der Schriftzug die helle Papierfarbe, sonst verschwindet eine dunkle Markenfarbe im Grund. */ body:not(.karte--papier) .marke__zug{ color:var(--papier); } /* ---- KI-KENNZEICHNUNG (Ansage Marcel 16.09.2026) ------------------------- Winziges Label unten rechts IM Medium, nur bei belegter KI-Herkunft (Schalter: "kiMedien" je Betrieb in clients.php, siehe Kopf von index.php). ⚠️ Warum der eigene Kasten und nicht nur Text: das Label liegt auf einem BILD, dessen Farbe niemand kennt. Weiße Schrift auf einem hellen Foto wäre unlesbar, und den Kontrast kann man nicht gegen ein Bild rechnen. Der halbtransparente dunkle Kasten macht den Untergrund berechenbar: bei 62 % Deckung bleibt selbst über reinem Weiß 6,2:1 gegen die weiße Schrift — über allem Dunkleren mehr. Gemessen am Pixel: siehe Prüflauf 16.09.2026. */ .medium{ position:relative; display:inline-block; line-height:0; } .ki-label{ position:absolute; right:.35em; bottom:.35em; /* 9–10 px: da, aber nie laut. */ font-family:var(--sans, system-ui, sans-serif); font-size:9.5px; line-height:1.25; font-weight:500; letter-spacing:.02em; color:#fff; background:rgba(0,0,0,.62); padding:.18em .42em; border-radius:3px; /* Das Label ist eine Angabe, kein Knopf — es fängt keine Berührung ab. */ pointer-events:none; white-space:nowrap; } /* 18.09.2026 — `kacheln3d` (Mamma Mia): Bereiche als Kacheln, ein Wort, ein raeumliches Objekt in den Markenfarben. Zwei nebeneinander, auch am Handy. */ .k3{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;margin:18px 0 6px} .k3__kachel{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 10px 16px; background:#fff;border:1px solid rgba(60,40,20,.14);border-radius:22px;text-decoration:none;color:#2a1d12; box-shadow:0 10px 24px -14px rgba(60,30,10,.45),inset 0 -3px 0 rgba(192,57,43,.9); transition:transform .25s ease,box-shadow .25s ease} .k3__kachel:hover,.k3__kachel:focus-visible{transform:translateY(-3px);box-shadow:0 16px 30px -14px rgba(60,30,10,.5),inset 0 -3px 0 rgba(192,57,43,1)} .k3__obj{width:92px;height:92px;overflow:visible} .k3__dreh{transform-origin:60px 60px;animation:k3schweben 4.8s ease-in-out infinite} .k3__kachel:nth-child(2) .k3__dreh{animation-delay:-2.4s} .k3__wort{font-size:1.12rem;font-weight:600;letter-spacing:.01em} @keyframes k3schweben{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(3deg)}} @media (prefers-reduced-motion:reduce){.k3__dreh{animation:none}.k3__kachel{transition:none}} /* ---- RECHTSSEITEN je Betrieb (22.09.2026) -------------------------------- impressum.php / datenschutz.php. Dasselbe Gesicht wie die Karte: Buehne, Kopf mit Logo und Zier, eine helle Papier-Insel. Nur der Text ist links- buendig, weil man Rechtstext liest und nicht ueberfliegt. Farben kommen ausschliesslich aus den vorhandenen Tokens, damit Papier-Karten (Il Gusto, Mamma Mia) und dunkle Buehnen (Roema, Veluta) von selbst stimmen. */ .recht-seite .karte{margin:0 auto} .recht-leib{padding:0 var(--rand)} .recht-kopf__marke{display:block;text-decoration:none;color:inherit} .recht-wahl{display:flex;justify-content:center;gap:8px;margin:0 0 14px} .recht-wahl a{ display:inline-flex;align-items:center;min-height:44px;padding:0 16px; border:1px solid var(--hell-2);border-radius:999px; color:var(--silber);font-size:.86rem;text-decoration:none; } .recht-wahl a[aria-current="page"]{ color:var(--papier);border-color:color-mix(in srgb,var(--brand-color) 70%,transparent); background:var(--hell-1); } .insel.recht{text-align:left;padding:24px 20px 22px} .recht__titel{ font-family:var(--serif);font-weight:600;font-size:clamp(1.6rem,6.6vw,2rem); line-height:1.12;margin:0;color:var(--tinte);text-wrap:balance; } .recht__unter{margin:4px 0 6px;font-size:.8rem;color:var(--stein-tief);letter-spacing:.02em} .recht h2{ font-family:var(--serif);font-weight:600;font-size:1.14rem;line-height:1.25; margin:20px 0 6px;color:var(--tinte); } .recht p,.recht li,.recht address{ margin:0 0 10px;font-size:.93rem;line-height:1.62;color:var(--stein-tief); font-style:normal;overflow-wrap:anywhere;hyphens:auto; } .recht strong{font-weight:500;color:var(--tinte)} .recht ul{margin:0 0 10px;padding-left:1.1em} .recht li{margin-bottom:6px} .recht a{ color:var(--tinte);text-decoration:underline;text-underline-offset:3px; text-decoration-color:color-mix(in srgb,var(--brand-color) 60%,transparent); } .recht__stand{margin-top:18px !important;font-size:.8rem !important} .recht-zurueck{margin:18px 0 0} .recht-zurueck .knopf-menu{text-decoration:none} .fusszeile__roema{font-size:.74rem} .fusszeile__roema a{min-height:44px} /* 22.09.2026 (Ansage Marcel): andere Läden nur mit Route + Website, zwei Knöpfe nebeneinander; der Name ist kein Link mehr. */ .chip--still{cursor:default} .chip--still:hover{transform:none} .standort__wege--zwei{display:grid;grid-template-columns:1fr 1fr;gap:8px} .standort__wege--zwei .weg-knopf{justify-content:center} .standort__wege--zwei .weg-knopf:only-child{grid-column:1 / -1} /* ---------- Google bei 1 bis 3 Sternen: leise, aber DIESELBE Box ---------- 23.09.2026 (Ansage Marcel): „nicht so viel verschieben, edel". Vorher grau, .86rem, max. 240 px breit und 44 px hoch, unter dem Formular. Jetzt steht er an der Stelle des grossen Google-Knopfs (index.php, #weg-kritik) in genau dessen Box: volle Breite, 54 px, gleicher Innenabstand, gleiches Google-G. Leiser NUR ueber Flaeche (keine), Schriftfarbe, Gewicht und eine Haarkante. Kein Breiten- oder Hoehenwechsel beim Umschalten der Sterne. Sichtbar und mit einem Klick erreichbar (UWG Anhang zu § 3 Abs. 3 Nr. 23b/c). Kontrast --stein-tief auf Weiss 6,4:1. */ .knopf.knopf-google-leise{ display:flex;align-items:center;justify-content:center;gap:11px; width:100%;min-height:54px;padding:16px 18px;margin:0; background:transparent;color:var(--stein-tief); border:1px solid var(--linie);box-shadow:none; font-size:1rem;font-weight:400;letter-spacing:.02em; } .knopf.knopf-google-leise:hover{border-color:var(--stein);background:transparent} .knopf.knopf-google-leise:focus-visible{outline:2px solid var(--brand-color);outline-offset:2px} /* Das G steht in derselben 28-px-Scheibe wie im grossen Knopf, damit die Schrift an derselben Stelle beginnt. */ .knopf-google-leise.knopf-google--g svg{background:transparent} .knopf-google-leise + .bewtext__melde{margin:6px 0 12px;text-align:center} /* 22.09.2026 (Ansage Marcel): Der Speisekarte-Knopf fluchtet mit Instagram und Website, Zeichen links, Text links, gleiche Schriftgröße. Diese Regel steht bewusst am Ende: `.knopf` setzt weiter oben display:block und text-align:center und schlug die Ausrichtung sonst wieder zurück. */ .knopf.knopf-menu{ display:flex;align-items:center;justify-content:flex-start;gap:13px; text-align:left;font-size:var(--t-zeile); } /* ========================================================================== AUFBAU FUER ALLE (23.09.2026, Ansage Marcel) Speisekarte als Kachel, darunter die Knoepfe zu zweit nebeneinander, Platz fuer eine zweite Knopfzeile. Vorher nur Il Gusto (abend.css), jetzt jede Karte in ihren eigenen Tokens. abend.css faerbt nur noch um. Takt: 12 px zwischen Google-Karte, Kachel, Knopfzeile 1 und Knopfzeile 2. Hoehen bei 375 px: Kachel 150, Knopfzeile 56 (Rechnung im _STILGUIDE.md). Bewegung nur opacity und transform. ========================================================================== */ .kachel{ position:relative;display:block;margin:12px 0 0; height:clamp(140px, 40vw, 164px); border-radius:var(--r-g);overflow:hidden;isolation:isolate; /* Ohne Foto: ruhige Flaeche wie die Linkgruppe, Hausfarbe nur als Zeichen und Kante am Pfeil. */ background:#fff;border:1px solid var(--linie);box-shadow:var(--schatten-1); color:var(--tinte);text-decoration:none;text-align:left; -webkit-tap-highlight-color:transparent; transition:transform .16s var(--kurve); } .kachel:active{transform:scale(.99)} .kachel:focus-visible{outline:2px solid var(--brand-color);outline-offset:3px} .kachel__zeichen{position:absolute;top:16px;left:18px;line-height:0} .kachel__zeichen svg{width:var(--ikon);height:var(--ikon);stroke:var(--brand-color)} .kachel__text{ position:absolute;left:18px;right:14px;bottom:14px; display:flex;align-items:flex-end;justify-content:space-between;gap:12px; } .kachel__titel{ font-family:var(--serif);font-weight:500; font-size:clamp(1.6rem, 6.6vw, 1.9rem);line-height:1.05; color:var(--tinte); } .kachel__pfeil{ display:grid;place-items:center;flex:none; width:44px;height:44px;border-radius:50%; border:1px solid color-mix(in srgb, var(--brand-color) 55%, var(--linie)); color:var(--brand-color); transition:transform .22s var(--kurve); } .kachel__pfeil svg{width:18px;height:18px} @media (hover:hover){ .kachel:hover .kachel__pfeil{transform:translateX(3px)} } /* Mit Fotos: das Bild traegt die Kachel, die Schrift steht auf einem dunklen Auslauf unten (Lesbarkeit, keine Zierde). Wechsel alle 5 s, kachel.js. */ .kachel--bild{ background:var(--buehne-tief);border:0; box-shadow:0 0 0 1px var(--hell-2), var(--schatten-2); color:#fff; } .kachel__bilder{position:absolute;inset:0;z-index:-2} .kachel__bild{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transform:scale(1.06); transition:opacity 1.2s ease-in-out, transform 6.2s linear; } .kachel__bild.ist-an{opacity:1;transform:scale(1)} .kachel--bild::before{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg, rgba(12,12,12,0) 34%, rgba(12,12,12,.78) 100%); } .kachel--bild .kachel__titel{color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.5)} .kachel--bild .kachel__pfeil{ border-color:rgba(255,255,255,.6);background:rgba(0,0,0,.32);color:#fff; } /* 02.10.2026: Fotos ohne Speisekarte (index.php, `.kachel--nurbild`): ruhige Bildflaeche, kein Link, kein Titel, kein dunkler Auslauf (der gehoert nur zur Schrift der Kachel), keine Druckreaktion. */ .kachel--nurbild{cursor:default;transition:none} .kachel--nurbild:active{transform:none} .kachel--nurbild::before{display:none} /* ---------- Knoepfe zu zweit (Instagram, Website; zweite Zeile frei) ---------- */ .wege{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0 0} .wege > .wege__knopf:only-child{grid-column:1 / -1} /* Roema: Newsletter direkt unter der Knopfzeile stand ohne Abstand (gemessen 23.09.2026 abends, 0 px). Derselbe 12-px-Takt wie ueberall. */ .wege + .nl{margin-top:12px} /* 25.09.2026 (Ansage Marcel, Roema-Karte): clients.php › `reihenfolge` ordnet Google-Karte, Speisekarte, Knopfzeile und Newsletter neu. Zwischen den Bloecken derselbe 12-px-Takt; der erste steht wie sonst die Google-Karte direkt unter dem Kopf. Greift nur mit der Klasse, also nur mit dem Feld. */ .karte__leib--reihe > .insel, .karte__leib--reihe > .nl, .karte__leib--reihe > .kachel, .karte__leib--reihe > .wege{margin-top:12px} .karte__leib--reihe > :first-child{margin-top:0} .wege__knopf{ display:flex;align-items:center;justify-content:center;gap:10px; min-height:56px;padding:8px 12px; border-radius:var(--r-m); background:#fff;border:1px solid var(--linie);box-shadow:var(--schatten-1); color:var(--tinte);text-decoration:none; font-size:var(--t-zeile);font-weight:400;line-height:1.2; -webkit-tap-highlight-color:transparent; transition:transform .16s var(--kurve), border-color .22s ease-out; } @media (hover:hover){ .wege__knopf:hover{border-color:var(--brand-color)} } .wege__knopf:active{transform:scale(.985)} .wege__knopf:focus-visible{outline:2px solid var(--brand-color);outline-offset:3px} /* Eigene Zeichen in der Hausfarbe; Fremdmarken in Originalfarbe und -form. */ .wege__knopf svg{width:var(--ikon);height:var(--ikon);flex:none;stroke:var(--brand-color)} .wege__knopf svg.ikone--marke{width:30px;height:30px;stroke:none} .wege__knopf svg [fill^="url"], .wege__knopf svg [fill^="#"]{stroke:none} .wege__logo{ width:36px;height:36px;flex:none;border-radius:8px;object-fit:cover; box-shadow:0 0 0 1px var(--linie); } /* Ungerade Knopfzahl (z. B. Website, Instagram, TikTok): der letzte nimmt die ganze Zeile, keine Luecke rechts. Einer allein wie bisher (:only-child). */ .wege > .wege__knopf:nth-child(odd):last-child{grid-column:1 / -1} /* ---------- WLAN mit einem Klick (28.09.2026, Ansage Marcel) ---------- Eine ganze Zeile unter der Speisekarte.