/* ========================================================================== Tandour — Sortenschriften Jede Rollo-Sorte trägt auf der Tafel am Eingang ihre eigene Schrift und Farbe. Diese Datei bildet das nach: für die Speisekarte (.gericht__name), das große Hero-Wort (.hero__wort) und den Sortennamen links (.hero__sorte b). Zuordnung über data-sorte="…". Schriften: freie Google-Fonts (OFL/Apache), selbst gehostet und auf A–Z/a–z/Umlaute beschnitten (assets/fonts/sorten/). Original auf der Tafel → hier: Falafel Colonna/Trajan-artig, dünn → Cinzel Vegetar. Brush Script → Yellowtail Mexican Fiesta-Serif mit Zickzack → Rye Cylon ornamentierte Goldkapitalen → Emblema One Asia „Wonton"-Pinsel → Reggae One Tandouri fette Schreibschrift kursiv → Lobster Arabic eigenes Logo-Lettering → SVG-Symbol #wortmarke-arabic (kein Font) Kikiriki Impact-artig mit Kontur → Anton (schon vorhanden) + Kontur Dul Kebab extrafette, gedrungene Slab → Bowlby One SC Cocopan Century-Gothic-Kapitalen → Jost 700 Zaziki VAG Rounded, gesperrt → Fredoka 700 Mozzapan geometrisch kursiv → Jost 700 kursiv ========================================================================== */ @font-face { font-family: "Cinzel"; src: url("fonts/sorten/cinzel-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Yellowtail"; src: url("fonts/sorten/yellowtail-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Rye"; src: url("fonts/sorten/rye-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Emblema One"; src: url("fonts/sorten/emblema-one-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Reggae One"; src: url("fonts/sorten/reggae-one-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Lobster"; src: url("fonts/sorten/lobster-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Bowlby One SC"; src: url("fonts/sorten/bowlby-one-sc-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Jost"; src: url("fonts/sorten/jost-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Jost"; src: url("fonts/sorten/jost-700-italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: "Fredoka"; src: url("fonts/sorten/fredoka-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* 1 ── Zuordnung Sorte → Schrift, Farbe, Schreibweise ---------------------- */ [data-sorte="falafel"] { --sorte-schrift: "Cinzel", "Times New Roman", serif; --sorte-farbe: #7B6472; --sorte-hell: #DCC8D7; --sorte-name: #F2E8F0; --sorte-fall: uppercase; --sorte-abstand: .06em; --sorte-karte: 1.42rem; } [data-sorte="vegetarisch"] { --sorte-schrift: "Yellowtail", "Brush Script MT", cursive; --sorte-farbe: #3C8A5C; --sorte-fall: none; --sorte-karte: 1.9rem; } [data-sorte="mexican"] { --sorte-schrift: "Rye", "Rockwell", serif; --sorte-farbe: #D8482A; --sorte-fall: none; --sorte-karte: 1.38rem; } [data-sorte="cylon"] { --sorte-schrift: "Emblema One", "Impact", serif; --sorte-farbe: #C9930F; --sorte-fall: uppercase; --sorte-abstand: .03em; --sorte-karte: 1.46rem; } [data-sorte="asia"] { --sorte-schrift: "Reggae One", "Impact", sans-serif; --sorte-farbe: #E5652A; --sorte-fall: uppercase; --sorte-abstand: .02em; --sorte-karte: 1.42rem; } [data-sorte="tandouri"] { --sorte-schrift: "Lobster", "Brush Script MT", cursive; --sorte-farbe: #8F1C34; --sorte-fall: none; --sorte-karte: 1.45rem; } [data-sorte="arabic"] { --sorte-schrift: Georgia, serif; /* nur Fallback, sichtbar ist das SVG */ --sorte-farbe: #3E8E4E; --sorte-hell: #86D896; --sorte-name: #D2F3D8; --sorte-fall: uppercase; --sorte-abstand: .02em; --sorte-karte: 1.62rem; } [data-sorte="kikiriki"] { --sorte-schrift: "Anton", "Arial Narrow", Impact, sans-serif; --sorte-farbe: #DB7B2E; --sorte-fuellung: #FBE4C4; --sorte-kontur: #8E4708; --sorte-name: #FFF3E0; --sorte-fall: uppercase; --sorte-abstand: .03em; --sorte-karte: 1.78rem; } [data-sorte="dulkebab"] { --sorte-schrift: "Bowlby One SC", "Rockwell Extra Bold", serif; --sorte-farbe: #D42B2A; --sorte-hell: #FF7466; --sorte-name: #FFB4AA; --sorte-schatten: #3E0A0D; --sorte-fall: uppercase; --sorte-abstand: .01em; --sorte-karte: 1.3rem; } [data-sorte="cocopan"] { --sorte-schrift: "Jost", "Century Gothic", sans-serif; --sorte-gewicht: 700; --sorte-farbe: #6E8BA8; --sorte-fall: uppercase; --sorte-abstand: .07em; --sorte-karte: 1.32rem; } [data-sorte="zaziki"] { --sorte-schrift: "Fredoka", "Arial Rounded MT Bold", sans-serif; --sorte-gewicht: 700; --sorte-farbe: #2A8FE0; --sorte-fall: none; --sorte-abstand: .14em; --sorte-karte: 1.34rem; } [data-sorte="mozzapan"] { --sorte-schrift: "Jost", "Century Gothic", sans-serif; --sorte-gewicht: 700; --sorte-stil: italic; --sorte-farbe: #2FB4D8; --sorte-fall: uppercase; --sorte-abstand: .04em; --sorte-karte: 1.32rem; } /* 2 ── Speisekarte: Name in Sortenschrift und -farbe ------------------------ */ .gericht__name[data-sorte] { font-family: var(--sorte-schrift); font-weight: var(--sorte-gewicht, 400); font-style: var(--sorte-stil, normal); font-size: var(--sorte-karte, 1.45rem); line-height: 1; letter-spacing: var(--sorte-abstand, 0); text-transform: var(--sorte-fall, none); color: var(--sorte-farbe); align-self: baseline; } /* Kikiriki wie auf der Tafel: helle Füllung, orangene Kontur */ .gericht__name[data-sorte="kikiriki"] { --k: var(--sorte-kontur); color: #F1BD80; text-shadow: .9px 0 0 var(--k), -.9px 0 0 var(--k), 0 .9px 0 var(--k), 0 -.9px 0 var(--k), .65px .65px 0 var(--k), -.65px .65px 0 var(--k), .65px -.65px 0 var(--k), -.65px -.65px 0 var(--k), 1.6px 1.6px 0 color-mix(in srgb, var(--k) 40%, transparent); } /* Dul Kebab wie auf der Tafel: dunkler Schlagschatten */ .gericht__name[data-sorte="dulkebab"] { text-shadow: 1px 1px 0 color-mix(in srgb, var(--sorte-schatten) 55%, transparent); } /* 3 ── Hero: großes Wort hinter dem Rollo ---------------------------------- */ /* Die helle Kante entsteht aus acht Textschatten statt -webkit-text-stroke: Safari verliert die Kontur auf animierten Textebenen gern nach dem Übergang, Schatten sind überall stabil. */ .hero__wort[data-sorte] { --kante: color-mix(in srgb, var(--hero-tinte) 85%, transparent); --kd: clamp(.9px, .12vw, 1.8px); --kanten-schatten: var(--kd) 0 0 var(--kante), calc(var(--kd) * -1) 0 0 var(--kante), 0 var(--kd) 0 var(--kante), 0 calc(var(--kd) * -1) 0 var(--kante), calc(var(--kd) * .7) calc(var(--kd) * .7) 0 var(--kante), calc(var(--kd) * -.7) calc(var(--kd) * .7) 0 var(--kante), calc(var(--kd) * .7) calc(var(--kd) * -.7) 0 var(--kante), calc(var(--kd) * -.7) calc(var(--kd) * -.7) 0 var(--kante); font-family: var(--sorte-schrift); font-weight: var(--sorte-gewicht, 400); font-style: var(--sorte-stil, normal); letter-spacing: var(--sorte-abstand, .01em); line-height: 1; color: var(--sorte-hell, var(--sorte-farbe)); -webkit-text-stroke: 0; text-shadow: var(--kanten-schatten), 0 .04em .1em rgba(20, 6, 4, .32); } /* Sortenwörter voll deckend (hero.css setzt .92) */ .folie3[data-zustand="aktiv"] .hero__wort[data-sorte] { opacity: 1; } .hero__wort[data-sorte="kikiriki"] { --kante: var(--sorte-kontur); --kd: clamp(1.4px, .2vw, 3px); color: var(--sorte-fuellung); text-shadow: var(--kanten-schatten), .035em .045em 0 color-mix(in srgb, var(--sorte-kontur) 55%, transparent); } .hero__wort[data-sorte="dulkebab"] { text-shadow: var(--kanten-schatten), .045em .05em 0 var(--sorte-schatten); } /* 4 ── Hero: Sortenname links --------------------------------------------- */ .hero__sorte b[data-sorte] { font-family: var(--sorte-schrift); font-weight: var(--sorte-gewicht, 400); font-style: var(--sorte-stil, normal); font-size: var(--sorte-hero-name, 1.08em); line-height: 1.02; letter-spacing: var(--sorte-abstand, 0); text-transform: var(--sorte-fall, none); color: var(--sorte-name, var(--sorte-hell, var(--sorte-farbe))); margin-left: 0; text-shadow: 0 1px 2px rgba(20, 6, 4, .25); } .hero__sorte b[data-sorte="kikiriki"] { --k: var(--sorte-kontur); color: var(--sorte-fuellung); text-shadow: 1.1px 0 0 var(--k), -1.1px 0 0 var(--k), 0 1.1px 0 var(--k), 0 -1.1px 0 var(--k), .8px .8px 0 var(--k), -.8px .8px 0 var(--k), .8px -.8px 0 var(--k), -.8px -.8px 0 var(--k), 2px 2px 0 color-mix(in srgb, var(--k) 45%, transparent); } .hero__sorte b[data-sorte="dulkebab"] { text-shadow: 2px 2px 0 var(--sorte-schatten); --sorte-hero-name: 1.02em; } .hero__sorte b[data-sorte="falafel"] { --sorte-hero-name: 1em; } .hero__sorte b[data-sorte="arabic"] { --sorte-hero-name: 1.06em; } /* 5 ── Handy: eigene Wortgröße je Sorte (Schriften sind unterschiedlich breit) */ @media (max-width: 760px) { .hero__wort[data-sorte] { font-size: clamp(2.4rem, var(--wortgroesse-m, 20vw), 6.4rem); } } /* 6 ── Arabic: echtes Lettering aus dem Logo als SVG (Symbol #wortmarke-arabic in index.html) ---- */ .wortmarke { display: block; height: 1em; width: auto; /* Breite folgt aus der viewBox (1091×311) */ fill: currentColor; overflow: visible; } .gericht__name[data-sorte="arabic"] .wortmarke { display: inline-block; height: 1.02em; vertical-align: -.06em; } .hero__wort[data-sorte="arabic"] { -webkit-text-stroke: 0; text-shadow: none; line-height: 1; } .hero__wort[data-sorte="arabic"] .wortmarke { stroke: color-mix(in srgb, var(--hero-tinte) 85%, transparent); stroke-width: 3; /* viewBox-Einheiten ≈ 1,3 px bei 172 px Worthöhe */ stroke-linejoin: round; paint-order: stroke fill; filter: drop-shadow(0 .04em .12em rgba(20, 6, 4, .3)); } .hero__sorte b[data-sorte="arabic"] { text-shadow: none; } .hero__sorte b[data-sorte="arabic"] .wortmarke { filter: drop-shadow(0 1px 2px rgba(20, 6, 4, .25)); } /* ========================================================================== 7 ── Zurückgenommen (25.09.2026) Die von der Tafel nachgezogenen Schriftzüge sind wieder raus — die Namen stehen wieder in ihren Schriften aus Abschnitt 1. Vom Schild geblieben sind nur die zwei Tierzeichen: der Hahn auf „Kikiriki", das Lamm vor „Dul Kebab" (regal.css §1). Das Werkzeug für die Vektoren liegt weiter in werkzeuge/schriftzuege/. ========================================================================== */