/* ===== Japanische Schriften, selbst gehostet ========================== Vorher kamen Noto Sans JP und Noto Serif JP direkt von fonts.googleapis.com. Das uebertraegt die IP-Adresse jedes Besuchers an Google, und zwar sofort beim Seitenaufruf - dagegen hilft kein Einwilligungsbanner. Jetzt liegen sie unter Fonts/noto/ als Subsets mit den 150 japanischen Zeichen, die auf der Seite wirklich vorkommen. 19 bis 25 KB je Schnitt. Lizenz SIL Open Font License 1.1, Selbsthosten ausdruecklich erlaubt. Siehe Fonts/noto/LIESMICH-SCHRIFTEN.txt - dort steht auch, wie man das Subset neu erzeugt, wenn neue Kanji dazukommen. */ @font-face{font-family:"Noto Serif JP";font-style:normal;font-weight:400;font-display:swap; src:url("Fonts/noto/noto-serif-jp-400.woff2?v=59") format("woff2")} @font-face{font-family:"Noto Serif JP";font-style:normal;font-weight:500;font-display:swap; src:url("Fonts/noto/noto-serif-jp-500.woff2?v=59") format("woff2")} @font-face{font-family:"Noto Serif JP";font-style:normal;font-weight:600;font-display:swap; src:url("Fonts/noto/noto-serif-jp-600.woff2?v=59") format("woff2")} @font-face{font-family:"Noto Serif JP";font-style:normal;font-weight:700;font-display:swap; src:url("Fonts/noto/noto-serif-jp-700.woff2?v=59") format("woff2")} @font-face{font-family:"Noto Sans JP";font-style:normal;font-weight:300;font-display:swap; src:url("Fonts/noto/noto-sans-jp-300.woff2") format("woff2")} @font-face{font-family:"Noto Sans JP";font-style:normal;font-weight:400;font-display:swap; src:url("Fonts/noto/noto-sans-jp-400.woff2") format("woff2")} @font-face{font-family:"Noto Sans JP";font-style:normal;font-weight:500;font-display:swap; src:url("Fonts/noto/noto-sans-jp-500.woff2") format("woff2")} @font-face{font-family:"Noto Sans JP";font-style:normal;font-weight:600;font-display:swap; src:url("Fonts/noto/noto-sans-jp-600.woff2") format("woff2")} /* ========================================================= Shin Ramen Hannover - Design-System Palette und Formensprache nach tokyoeki-1bangai.co.jp/street/ramen Offwhite #F8F7F4 / CI-Rot #DE3128 / Gold-Tan #C59C5C Inhaltliche Haltung nach dishoom.com: Kultur vor Produktversprechen ========================================================= */ :root{ --paper:#F8F7F4; /* Offwhite, nicht mehr beige */ --paper-2:#FCFBFA; --white:#FFFFFF; --red:#DE3128; /* CI-Rot */ --red-dark:#B8251E; --red-soft:#FBE7E5; --tan:#C59C5C; /* Gold nur noch als Akzent in Linien und Kickern */ --tan-soft:#DEDAD2; /* Flaechen und Raender jetzt neutral statt beige */ --tan-faint:#ECEAE5; --ink:#1B1611; --gruen:#3F6B2E; /* Nur fuer das Vegan-Zeichen. Gedeckt, damit es neben dem warmen Papier nicht als Ampelgruen herausfaellt. */ --ink-2:#4C443A; --ink-3:#8B8071; /* Schrift: Sys TT (Fabrizio Schiavi), lizenziert ueber Adobe Fonts. Webprojekt "shinfoods", Kit-ID mez3aay. Eingebunden per JavaScript-Loader im jeder Seite, NICHT per CSS-Link: der Aufruf mez3aay.css antwortet mit HTTP 412. Grund war die japanische Schrift AH Hakushu im selben Webprojekt — ostasiatische Schriften liefert Adobe nur ueber dynamische Untergruppen aus, und die brauchen den JS-Code (so steht es in Adobes eigener Hilfe zu den Einbettungscodes). Die Schrift ist am 15.09.2026 wieder aus dem Projekt entfernt worden, im Kit liegt nur noch sys-tt — der CSS-Endpunkt bleibt trotzdem gesperrt. Also: Loader stehen lassen. Es ist KEINE Domain-Sperre, Adobe-Webprojekte haben kein Domain-Feld mehr. "sys-tt" ist der Name aus dem Kit, "Sys TT" der lokal installierte Desktop-Name als Fallback fuer die Vorschau ohne Netz. Sys TT hat KEINE japanischen Zeichen — dafuer stehen die JP-Stacks dahinter und in den .mark/.sidejp-Regeln. Eine Pinselschrift (ah-hakushu-fude-thick-script) lag kurzzeitig im Kit und ist wieder raus. Japanische Zeichen laufen weiter ueber die selbst gehostete Noto Serif JP / Noto Sans JP in Fonts/noto/. */ --serif:"sys-tt","Sys TT","Noto Serif JP",Georgia,"Times New Roman",serif; --sans:"sys-tt","Sys TT","Noto Sans JP","Hiragino Kaku Gothic ProN",system-ui,-apple-system,sans-serif; --maxw:1180px; --pad:clamp(20px,4vw,32px); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--paper);color:var(--ink); font-family:var(--sans);font-size:16px;line-height:1.9;font-weight:400; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img{max-width:100%;display:block} a{color:var(--red);text-decoration:none} a:hover{color:var(--red-dark)} h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.4;margin:0;letter-spacing:.01em} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)} .narrow{max-width:760px;margin-left:auto;margin-right:auto} section{padding:clamp(64px,9vw,110px) 0;position:relative} .center{text-align:center} /* --- Textbausteine --- */ .eyebrow{ font-family:var(--sans);font-size:12px;letter-spacing:.26em;text-transform:uppercase; color:var(--red);font-weight:600;display:block; } .eyebrow-jp{font-family:var(--serif);font-size:14px;letter-spacing:.32em;color:var(--tan);display:block} .rule{width:44px;height:2px;background:var(--tan);border:0;margin:20px 0} .center .rule{margin-left:auto;margin-right:auto} .claim{ font-family:var(--serif);font-size:clamp(19px,2.2vw,24px);line-height:1.65; color:var(--tan);font-weight:600;margin:0 0 18px; } /* Begrenzte Absaetze stehen immer mittig im Block. Das "auto" ist wichtig: mit "margin:0" gewann .lead gegen .narrow und der Text stand links, auch in Bloecken, die per text-align:center mittig gesetzt sind (Seitenkoepfe von Zum Mitnehmen und FAQ). */ .lead{color:var(--ink-2);font-size:16.5px;margin:0 auto 18px} .center .lead,.center .narrow,.center p{margin-left:auto;margin-right:auto} .narrow,.small.narrow,.tiny.narrow{margin-left:auto;margin-right:auto} /* Damit eine aufgeklappte Frage nicht unter der Kopfzeile klebt */ details.acc{scroll-margin-top:96px} .small{font-size:14px;color:var(--ink-2);line-height:1.85} .tiny{font-size:12px;color:var(--ink-3);letter-spacing:.04em} .caption{ font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3); margin-top:12px;display:block; } .caption b{color:var(--tan);font-weight:600} .open{ display:inline;background:linear-gradient(transparent 62%, rgba(197,156,92,.32) 62%); border-bottom:1px dashed var(--tan);color:var(--ink-2); } /* --- Buttons --- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:50px;padding:13px 30px;border-radius:999px;border:1px solid var(--red); background:var(--red);color:var(--white)!important;font-family:var(--sans); font-size:14.5px;font-weight:600;letter-spacing:.02em;cursor:pointer; transition:background .22s,transform .22s,box-shadow .22s; } .btn:hover{background:var(--red-dark);border-color:var(--red-dark);transform:translateY(-2px);box-shadow:0 8px 18px rgba(184,37,30,.22)} .btn-tan{background:var(--tan);border-color:var(--tan);color:var(--white)!important} .btn-tan:hover{background:#B08946;border-color:#B08946;box-shadow:0 8px 18px rgba(197,156,92,.28)} .btn-ghost{background:transparent;color:var(--red)!important} .btn-ghost:hover{background:var(--red);color:var(--white)!important} .btn .arrow{transition:transform .22s} .btn:hover .arrow{transform:translateX(4px)} /* --- Kopf --- */ header{ position:sticky;top:0;z-index:60;background:rgba(248,247,244,.94); backdrop-filter:blur(10px);border-bottom:2px solid var(--red); } .bar{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:70px} .brand{display:flex;align-items:center;gap:11px;color:var(--red)!important} .brand .sig{width:38px;height:38px;flex:none} .brand .word{height:17px;width:auto} .brand i{font-style:normal;font-size:9.5px;letter-spacing:.2em;color:var(--tan);white-space:nowrap} nav ul{display:flex;list-style:none;margin:0;padding:0;gap:2px} nav a{ display:flex;align-items:center;min-height:44px;padding:8px 13px; color:var(--ink)!important;font-size:14.5px;position:relative;white-space:nowrap; } nav a:hover{color:var(--red)!important} nav a.current{color:var(--red)!important;font-weight:600} nav a.current::after{content:"";position:absolute;left:13px;right:13px;bottom:12px;height:2px;background:var(--red)} .bar .btn{min-height:42px;padding:9px 20px;font-size:13.5px} /* --- Menuetaste fuer das Handy, drei Striche --- */ .burger{ display:none;width:46px;height:46px;flex:none;border:0;background:none;cursor:pointer; padding:0;align-items:center;justify-content:center;flex-direction:column;gap:6px; } .burger span{ display:block;width:26px;height:2.5px;border-radius:2px;background:var(--ink); transition:transform .3s cubic-bezier(.2,.8,.3,1),opacity .2s; } .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8.5px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)} /* Schublade, die von oben hereinfaehrt */ .drawer{ position:fixed;left:0;right:0;top:0;z-index:55;background:var(--paper); border-bottom:2px solid var(--red);padding:80px var(--pad) 22px; transform:translateY(-102%);transition:transform .38s cubic-bezier(.2,.8,.3,1); box-shadow:0 18px 40px rgba(0,0,0,.12); } .drawer.open{transform:none} .drawer ul{list-style:none;margin:0;padding:0} .drawer li{border-top:1px solid var(--tan-faint)} .drawer li:first-child{border-top:0} .drawer a{ display:block;padding:13px 2px;font-family:var(--serif);font-size:17px; color:var(--ink)!important;font-weight:600; } .drawer a.current{color:var(--red)!important} .drawer .btn{display:flex;justify-content:center;margin-top:18px;width:100%;color:var(--white)!important;min-height:46px;padding:11px 20px;font-size:13.5px} .drawer-back{ position:fixed;inset:0;z-index:50;background:rgba(20,15,10,.42); opacity:0;visibility:hidden;transition:opacity .3s; } .drawer-back.open{opacity:1;visibility:visible} html.drawer-offen{overflow:hidden} @media(min-width:901px){ .drawer,.drawer-back{display:none} } /* --- Blaettern statt fortlaufendem Scrollen --- Die Seite rastet beim Scrollen an den Abschnitten ein. "proximity" heisst: sie bremst nur, wenn man ohnehin in der Naehe ist, und blockiert nie. Abschnitte, die hoeher als der Bildschirm sind, nehmen wir aus, sonst kaeme man dort nicht mehr sauber durch. */ html.snap{scroll-snap-type:y proximity} html.snap section{scroll-snap-align:start;scroll-margin-top:74px} html.snap section.nosnap{scroll-snap-align:none} /* Die Fusszeile muss erreichbar bleiben. Ohne eigenen Rastpunkt am Seitenende zieht das Einrasten beim Loslassen zurueck zum Anfang des letzten Abschnitts. Auf dem iPad war deshalb die Fusszeile nicht einsehbar, die Seite sprang immer wieder hoch zur Ueberschrift "Anerkennung". Also: der letzte Abschnitt rastet nicht mehr ein, und das Seitenende ist selbst ein gueltiger Rastpunkt. */ html.snap body > section:last-of-type{scroll-snap-align:none} html.snap footer{scroll-snap-align:end} /* Kapitelwechsel: zurueckhaltend, aber sichtbar. Ohne dieses Signal fuehlt sich das Einrasten wie ein Fehler an. */ html.snap .kapitel{ transition:opacity .5s ease; } html.snap .kapitel:not(.kapitel-an){opacity:.55} html.snap .kapitel > * > .center > .eyebrow, html.snap .kapitel > * > .center > h2, html.snap .kapitel > * > .center > .jpclaim, html.snap .kapitel > .wrap > .eyebrow, html.snap .kapitel > .wrap > h2{ transition:transform .62s cubic-bezier(.2,.8,.3,1),opacity .62s ease; } html.snap .kapitel:not(.kapitel-an) > * > .center > .eyebrow, html.snap .kapitel:not(.kapitel-an) > * > .center > h2, html.snap .kapitel:not(.kapitel-an) > * > .center > .jpclaim, html.snap .kapitel:not(.kapitel-an) > .wrap > .eyebrow, html.snap .kapitel:not(.kapitel-an) > .wrap > h2{ transform:translateY(16px);opacity:0; } /* Feiner Strich, der Anfang und Ende eines Kapitels markiert */ html.snap .kapitel::before{ content:"";position:absolute;top:0;left:50%;width:0;height:2px; background:var(--red);transform:translateX(-50%); transition:width .7s cubic-bezier(.2,.8,.3,1); } html.snap .kapitel.kapitel-an::before{width:64px} html.snap .hero.kapitel::before{display:none} @media (prefers-reduced-motion:reduce){ .fv-halo{animation:none} html.snap .kapitel,html.snap .kapitel *{transition:none!important;opacity:1!important;transform:none!important} } @media(max-width:900px){ html.snap section{scroll-margin-top:64px} } /* --- Rotierende Bilder, auf mehreren Seiten benutzt --- */ .rot{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--tan-faint)} .rot img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transition:opacity .9s ease; } .rot img.on{opacity:1} .rotdots{position:absolute;left:0;right:0;bottom:12px;display:flex;gap:7px;justify-content:center;z-index:2} .rotdots button{ width:8px;height:8px;border-radius:50%;border:0;cursor:pointer;padding:0; background:rgba(255,255,255,.55);box-shadow:0 1px 3px rgba(0,0,0,.3); } .rotdots button.on{background:#fff;transform:scale(1.3)} /* --- Senkrechte japanische Randschrift --- Wie die Kolumnentitel in klassischen japanischen Buechern: links am Rand, von oben nach unten. Rein dekorativ, deshalb aria-hidden. Seit dem 19.09.2026 echter Senkrechtsatz per writing-mode. Vorher stand jedes Zeichen in einer eigenen Zeile; das sah bei reinen Kanji gleich aus, liess aber die senkrechten Zeichenvarianten der Schrift ungenutzt — Komma und Punkt sassen dann mittig statt oben rechts. Die Subsets in Fonts/noto/ tragen dafuer seit dem 19.09. die Tabellen vert und vrt2; die alte Fassung ohne diese Tabellen liegt daneben in Fonts/noto/_alt-ohne-vert/. Fehlt die japanische Schrift auf dem Geraet, springt der Browser auf eine Systemschrift; jede davon beherrscht Senkrechtsatz. Sie klebt beim Scrollen unter der Kopfzeile und begleitet den Abschnitt, bis der naechste uebernimmt. Bewegt und ein- und ausgeblendet wird sie in shin.js, weil position:sticky die Spalte in den naechsten Abschnitt laufen liesse. Sichtbar ist immer nur die Spalte des Abschnitts, der gerade oben steht, die Uebergabe ist eine Ueberblendung. Sie liegt ueber Bildern und Texten, deshalb pointer-events:none, eine niedrige Deckkraft und ein weicher Gegenschein, damit die Zeichen auch auf Fotos als Form erkennbar bleiben. */ :root{ --kopfhoehe:90px; } .sidejp{ position:absolute;left:clamp(2px,1.2vw,22px);top:0; /* Echter japanischer Senkrechtsatz. Dadurch greifen die senkrechten Zeichenvarianten der Schrift (vert/vrt2): 、。 stehen oben rechts, Klammern liegen richtig. Der Zeichenabstand kommt aus letter-spacing und entspricht der frueheren Zeilenhoehe von 1,22. */ writing-mode:vertical-rl;text-orientation:mixed; line-height:1;letter-spacing:.22em; font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif; font-weight:700;font-size:clamp(46px,6.2vw,108px); color:var(--ink); text-shadow:0 0 22px rgba(255,255,255,.75), 0 0 4px rgba(255,255,255,.6); pointer-events:none;user-select:none;z-index:6; opacity:0;transition:opacity .5s ease;will-change:transform; } /* .sidejp i gibt es nicht mehr — die Zeichen stehen seit dem 19.09.2026 als zusammenhaengender Text im Senkrechtsatz, nicht mehr einzeln gestapelt. */ .sidejp.an{opacity:.2} /* Auf dunklem Grund umgekehrt: helle Zeichen, dunkler Gegenschein */ .sidejp.hell{ color:#fff; text-shadow:0 0 26px rgba(0,0,0,.55), 0 0 5px rgba(0,0,0,.4); } .sidejp.hell.an{opacity:.34} @media(max-width:900px){ :root{ --kopfhoehe:76px; } .sidejp{font-size:clamp(40px,12vw,64px);left:-2px} .sidejp.an{opacity:.15} .sidejp.hell.an{opacity:.3} } /* Wer Bewegung reduziert haben moechte, sieht sie still am Abschnittsanfang */ @media (prefers-reduced-motion:reduce){ .fv-halo{animation:none} .sidejp{transform:none!important;transition:none} .sidejp.an,.sidejp.hell.an{opacity:.16} } /* --- Intro-Splash mit dem Logo --- */ #splash{ position:fixed;inset:0;z-index:200;background:var(--paper); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px; animation:splashOut .5s ease 1.5s forwards; } #splash .sig{ width:clamp(96px,15vw,148px);height:auto; animation:sigIn .8s cubic-bezier(.16,.9,.28,1) both; } #splash .word{ width:clamp(180px,28vw,290px);height:auto; animation:wordIn .7s cubic-bezier(.2,.8,.3,1) .34s both; } #splash .ort{ font-family:var(--sans);font-size:10.5px;letter-spacing:.42em;color:var(--tan); animation:wordIn .7s cubic-bezier(.2,.8,.3,1) .52s both; } @keyframes sigIn{ 0%{opacity:0;transform:scale(.72) rotate(-14deg)} 60%{opacity:1} 100%{opacity:1;transform:scale(1) rotate(0)} } @keyframes wordIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} @keyframes splashOut{to{opacity:0;visibility:hidden}} /* --- Fade-up beim Scrollen --- */ .fadeup{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)} .fadeup.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .fv-halo{animation:none} html{scroll-behavior:auto} #splash{display:none} .fadeup{opacity:1;transform:none;transition:none} *{animation-duration:.001s!important;animation-iteration-count:1!important} } /* --- Nudel-Linie als Trenner --- */ .noodle{display:block;width:100%;height:26px;color:var(--tan-soft)} /* --- Wasserzeichen-Schriftzeichen --- */ .mark{ position:absolute;font-weight:600;color:var(--tan); font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif; opacity:.15;line-height:.85;pointer-events:none;user-select:none;z-index:0; font-size:clamp(110px,17vw,240px); } /* --- Haus-Kennzeichen: macht ueberall sofort sichtbar, welches Lokal gemeint ist --- */ .hpill{ display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:11px; letter-spacing:.12em;text-transform:uppercase;font-weight:600;border-radius:999px; padding:4px 12px;white-space:nowrap; } .hpill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.75} .hpill.gw{background:var(--red);color:#fff} .hpill.tp{background:var(--ink);color:#fff} .hpill.both{background:var(--tan-faint);color:var(--ink-2);border:1px solid var(--tan-soft)} .hpill.both::before{background:var(--tan)} /* --- Fußzeile --- */ footer{background:var(--white);border-top:2px solid var(--red);padding:60px 0 96px} footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:36px} footer .flogo{display:flex;align-items:center;gap:12px;margin-bottom:16px} footer .flogo .sig{width:44px;height:44px} footer .flogo .word{height:18px;width:auto} footer h5{font-family:var(--sans);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin:0 0 14px} footer p{font-size:14px;color:var(--ink-2);margin:0 0 8px} footer a{color:var(--ink)!important} footer a:hover{color:var(--red)!important} footer .fine{ margin-top:40px;padding-top:20px;border-top:1px solid var(--tan-faint); font-size:12px;color:var(--ink-3);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px; } /* --- Nach-oben-Knopf --- */ #totop{ position:fixed;right:20px;bottom:24px;z-index:55;width:56px;height:56px;border-radius:50%; background:var(--red);border:0;cursor:pointer;display:none;align-items:center;justify-content:center; flex-direction:column;gap:2px;box-shadow:0 6px 16px rgba(0,0,0,.2); } #totop.show{display:flex} #totop svg{width:24px;color:#fff} #totop span{color:#fff;font-size:8.5px;letter-spacing:.14em;font-weight:600} /* --- Modal --- */ .modal-backdrop{ position:fixed;inset:0;z-index:150;background:rgba(27,22,17,.55); display:none;align-items:center;justify-content:center;padding:20px; } .modal-backdrop.open{display:flex} .modal{ background:var(--white);border-radius:14px;max-width:640px;width:100%; max-height:86vh;overflow-y:auto;padding:34px clamp(22px,4vw,44px) 34px;position:relative; animation:modalIn .3s cubic-bezier(.2,.8,.3,1) both; } @keyframes modalIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}} .modal-close{ position:sticky;top:-6px;float:right;margin:-14px -14px 0 12px; width:40px;height:40px;border-radius:50%;z-index:4; box-shadow:0 0 0 8px var(--white), 0 4px 14px rgba(27,22,17,.18); border:0;background:var(--tan);color:#fff;font-size:19px;cursor:pointer;line-height:1; } .modal-close:hover{background:#B08946} .modal-head{margin-bottom:26px;padding-right:44px} .modal-head .who{font-size:12px;color:var(--red);letter-spacing:.06em;display:block;margin-bottom:6px} .modal-head h3{font-size:23px} .modal-guide{ position:absolute;top:34px;right:64px;text-align:right;font-size:10.5px; letter-spacing:.1em;color:var(--tan);line-height:1.5; } /* Dreier-Skala wie im Vorbild */ .scale{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;margin-bottom:12px} .scale > b{font-size:13.5px;font-weight:600;color:var(--ink)} .segs{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--red);border-radius:6px;overflow:hidden} .segs.one{grid-template-columns:1fr} .segs span{ text-align:center;font-size:12.5px;padding:9px 4px;color:var(--red); border-right:1px dashed rgba(200,23,30,.45); } .segs span:last-child{border-right:0} .segs span.on{background:var(--red);color:#fff;font-weight:600} .segs.undecided span{color:var(--ink-3);border-color:rgba(139,128,113,.4)} .segs.undecided{border-color:var(--ink-3);border-style:dashed} .modal-note{margin-top:20px;font-size:11.5px;color:var(--ink-3);line-height:1.7} /* Empfehlungspunkte I. II. III. */ .points{margin:0;padding:0;list-style:none} .points li{display:grid;grid-template-columns:32px 1fr;gap:10px;margin-bottom:20px} .points .num{font-family:var(--serif);color:var(--red);font-size:15px;font-weight:600} .points h4{font-size:15.5px;color:var(--tan);margin-bottom:4px} .points p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.8} /* --- Responsive --- */ @media(max-width:900px){ nav{display:none} .burger{display:flex} footer .cols{grid-template-columns:1fr;gap:28px} #totop{bottom:24px;right:14px;width:48px;height:48px} .scale{grid-template-columns:1fr;gap:6px} .modal-guide{display:none} } @media(max-width:640px){ /* Auf dem Telefon ist im Kopf kein Platz fuer die Schaltflaeche. Sie steht im Menue hinter dem Burger. */ .bar .btn{display:none} .bar{min-height:62px} .brand .sig{width:32px;height:32px} .brand .word{height:15px} .brand i{display:none} } /* ========================================================= WHO'S THAT RAMEN? Vollbild-Finder Aufbau: beiger Grund wie bei den Speisekarten, stehende rot-orange Strahlen aus der unteren rechten Ecke, darueber ein tuerkiser Halo, der sich langsam nach links dreht, und die Schuessel in Tinte. ========================================================= */ #finderVoll{ position:fixed;inset:0;z-index:300;display:none; background:var(--paper);overflow:hidden; } #finderVoll.an{display:block;animation:fvAuf .32s ease both} @keyframes fvAuf{from{opacity:0}to{opacity:1}} /* Strahlen. Die Quelle liegt ausserhalb des Bildes, unten rechts, und bewegt sich nicht: sie soll den Raum aufspannen, nicht auffallen. */ .fv-strahlen{ position:absolute;inset:0;pointer-events:none;z-index:0; background: repeating-conic-gradient(from 0deg at 106% 112%, rgba(222,49,40,.10) 0deg .45deg, rgba(222,49,40,0) .45deg 1.8deg), repeating-conic-gradient(from .7deg at 106% 112%, rgba(236,124,46,.09) 0deg .6deg, rgba(236,124,46,0) .6deg 2.7deg), repeating-conic-gradient(from 1.9deg at 106% 112%, rgba(222,49,40,.055) 0deg .3deg, rgba(222,49,40,0) .3deg 4.3deg); /* zur Quelle hin ausblenden, sonst wird die Ecke zum Fleck */ -webkit-mask-image:radial-gradient(130% 130% at 106% 112%, transparent 0%, #000 26%, #000 100%); mask-image:radial-gradient(130% 130% at 106% 112%, transparent 0%, #000 26%, #000 100%); } /* Halo im Manga-Ton: harte Tuschzacken statt weicher Verlaeufe, dazu tuerkise Keile und ein Raster wie ein Screentone. Dreht langsam nach links. */ .fv-halo{ position:absolute;left:50%;top:50%;width:var(--halo,152%);aspect-ratio:1; transform:translate(-50%,-50%);pointer-events:none; background: /* feine Tuschstriche, die Kante bleibt hart */ repeating-conic-gradient(from 0deg, rgba(27,22,17,.46) 0deg .8deg, rgba(27,22,17,0) .8deg 7.1deg), /* breite tuerkise Keile, unregelmaessig verteilt */ repeating-conic-gradient(from 3.1deg, rgba(46,196,208,.78) 0deg 3.2deg, rgba(46,196,208,0) 3.2deg 14.7deg), repeating-conic-gradient(from 9.4deg, rgba(22,150,170,.55) 0deg 1.6deg, rgba(22,150,170,0) 1.6deg 23.3deg); -webkit-mask-image:radial-gradient(closest-side, transparent 0%, transparent 21%, #000 34%, #000 58%, transparent 78%); mask-image:radial-gradient(closest-side, transparent 0%, transparent 21%, #000 34%, #000 58%, transparent 78%); animation:fvDreh 150s linear infinite; } /* Screentone: Rasterpunkte im Ring, drehen nicht mit */ .fv-halo::after{ content:"";position:absolute;inset:0; background:radial-gradient(rgba(27,22,17,.30) 1.2px, transparent 1.3px) 0 0/9px 9px; -webkit-mask-image:radial-gradient(closest-side, transparent 30%, #000 44%, #000 56%, transparent 70%); mask-image:radial-gradient(closest-side, transparent 30%, #000 44%, #000 56%, transparent 70%); } @keyframes fvDreh{ from{transform:translate(-50%,-50%) rotate(0deg)} to {transform:translate(-50%,-50%) rotate(-360deg)} } /* Heller Kern, auf dem die Schuessel steht */ .fv-kern{ position:absolute;left:50%;top:50%;width:var(--halo-kern,104%);aspect-ratio:1; transform:translate(-50%,-50%);pointer-events:none; background:radial-gradient(closest-side, rgba(255,255,255,1) 0%, rgba(255,255,255,.96) 32%, rgba(255,255,255,.5) 55%, rgba(255,255,255,0) 78%); } .fv-zu{ position:absolute;top:18px;right:20px;z-index:6;width:44px;height:44px;border-radius:50%; border:0;background:rgba(27,22,17,.14);color:var(--ink);font-size:25px;line-height:1;cursor:pointer; } .fv-zu:hover{background:rgba(27,22,17,.26)} /* Kein z-index hier: sonst entsteht ein eigener Stapelkontext und das freigestellte Ergebnisfoto kann sich nicht mit dem Grund verrechnen. Die Reihenfolge im HTML reicht, die Strahlen stehen davor. */ .fv-raum{ position:relative;height:100%;max-width:1280px;margin:0 auto; display:grid;grid-template-columns:1.05fr .95fr;align-items:center; gap:clamp(16px,3vw,48px);padding:clamp(16px,3vw,40px); } /* Vorgeschmack im Abschnitt auf der Startseite */ #finderProbe .t{opacity:0;transition:opacity .5s ease;transform-origin:50% 70%} #finderProbe .t{fill:var(--white);stroke:var(--ink);stroke-width:8;stroke-linejoin:round;stroke-linecap:round} #finderProbe .t.strich{fill:none} #finderProbe .t .voll{stroke:none} #finderProbe .t.an{opacity:1} #finderProbe .t.neu{animation:fvTeil .7s cubic-bezier(.18,.9,.28,1.3) both} #finderProbe .dampf{animation:fvDampf 4.5s ease-in-out infinite} @keyframes fvDampf{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} /* --- Bühne mit der Silhouette --- */ .fv-buehne{position:relative;display:flex;align-items:center;justify-content:center; width:100%;max-width:var(--buehne,560px);margin:0 auto} /* Der Halo waechst mit der Ansicht mit: je mehr Platz die Spalte hat, desto groesser Buehne und Strahlenkranz. */ @media(min-width:901px) and (max-width:1199px){ .fv-buehne{--buehne:440px;--halo:148%;--halo-kern:102%} } @media(min-width:1500px){ .fv-buehne{--buehne:600px;--halo:151%;--halo-kern:106%} } .fv-sil{position:relative} .fv-sil{width:100%;max-width:640px} .fv-sil svg{width:100%;height:auto;display:block} .fv-sil .t{opacity:0;pointer-events:none;transition:opacity .34s ease, transform .34s ease;transform-origin:50% 70%} .fv-sil .t{fill:#fff;stroke:var(--ink);stroke-width:8;stroke-linejoin:round;stroke-linecap:round} .fv-sil .t.strich{fill:none} .fv-sil .t .voll{stroke:none} .fv-sil .t.an{opacity:1} .fv-sil .t.neu{animation:fvTeil .62s cubic-bezier(.18,.9,.28,1.3) both} @keyframes fvTeil{ 0%{opacity:0;transform:translateY(26px) scale(.86)} 60%{opacity:1;transform:translateY(-5px) scale(1.04)} 100%{opacity:1;transform:none} } .fv-buehne.puls::after{ content:"";position:absolute;inset:-8%;border-radius:50%;pointer-events:none; background:radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,0) 70%); animation:fvPuls .5s ease-out both; } @keyframes fvPuls{from{opacity:.9;transform:scale(.72)}to{opacity:0;transform:scale(1.15)}} /* Enthüllung */ /* Kein filter in den Keyframes: das wuerde einen eigenen Stapelkontext aufmachen und das freigestellte Foto koennte sich nicht mehr mit dem Grund verrechnen. */ .fv-buehne.enthuellt{animation:fvKnall .7s cubic-bezier(.2,.9,.3,1.15) both} @keyframes fvKnall{ 0%{transform:scale(.86);opacity:0} 40%{opacity:1} 100%{transform:none;opacity:1} } .fv-foto{width:100%;max-width:520px;margin:0 auto} /* Die Ergebnisfotos liegen als echte Freisteller in fotos/frei/ (WebP mit Transparenz). Sie stehen damit vor dem Grund, die Strahlen laufen nicht durch die Schuessel, und der Halo bleibt dahinter sichtbar. */ .fv-foto img{ width:100%;height:auto;display:block; filter:drop-shadow(0 20px 30px rgba(27,22,17,.22)); } /* Ersatz fuer ein fehlendes Gerichtsfoto: das Schriftzeichen auf einer ruhigen Flaeche, im selben Rund wie eine Schuessel. Kein Bild von einem anderen Gericht -- das waere eine Aussage, die nicht stimmt. */ /* Vegan-Zeichen. Als CSS-Maske eingebunden, nicht als : so nimmt es die Farbe des Textes an und laesst sich an einer Stelle umstellen. Es ist ein freies Symbol zur Orientierung, kein zertifiziertes Siegel -- siehe symbole/LIESMICH.txt. */ .vegzeichen{ display:inline-block;width:1em;height:1.06em;vertical-align:-.14em;flex:none; background:currentColor; /* Das Zeichen steckt als data-data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22340%22%20height%3D%22362%22%20viewBox%3D%220%200%20340%20362%22%3E%3Cg%20transform%3D%22matrix%28.1%200%200%20-.1%200%20362%29%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22m%203190%2C3550%20c%20-80%2C-21%20-249%2C-59%20-375%2C-84%20-321%2C-63%20-372%2C-82%20-515%2C-188%20-203%2C-151%20-345%2C-443%20-344%2C-708%201%2C-101%2016%2C-173%2033%2C-154%204%2C5%2018%2C34%2030%2C64%2061%2C147%20238%2C371%20389%2C492%2077%2C62%20232%2C123%20232%2C91%200%2C-11%20-53%2C-77%20-116%2C-143%20-59%2C-63%20-79%2C-89%20-190%2C-250%20-115%2C-169%20-265%2C-471%20-366%2C-740%20-98%2C-261%20-170%2C-469%20-218%2C-625%20-81%2C-267%20-154%2C-478%20-167%2C-482%20-16%2C-6%20-60%2C137%20-152%2C492%20-143%2C556%20-204%2C747%20-350%2C1095%20-100%2C237%20-232%2C427%20-500%2C718%20-147%2C161%20-356%2C315%20-482%2C357%20-82%2C28%20-89%2C14%20-27%2C-55%20292%2C-329%20461%2C-573%20640%2C-920%20151%2C-295%20255%2C-588%20444%2C-1260%2048%2C-172%20154%2C-610%20188%2C-780%2038%2C-189%2080%2C-374%2091%2C-403%204%2C-9%2019%2C-21%2034%2C-25%2034%2C-9%20198%2C-9%20233%2C0%2052%2C15%2062%2C56%20134%2C528%2048%2C319%2089%2C510%20171%2C795%20139%2C486%20287%2C842%20377%2C900%2013%2C8%2077%2C24%20144%2C35%20260%2C43%20469%2C158%20617%2C341%2099%2C122%20125%2C212%20150%2C512%2013%2C159%2021%2C204%2051%2C299%2019%2C62%2032%2C118%2030%2C125%20-7%2C18%20-23%2C16%20-186%2C-27%20z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E direkt hier drin, nicht als Dateiverweis. Grund: Eine Maske aus einer externen Datei wird beim Oeffnen per Doppelklick (file://) vom Browser verworfen -- das Zeichen waere dann unsichtbar, ohne Fehlermeldung. Die Quelldatei liegt in symbole/vegan.svg; wer die Form aendert, erzeugt die Zeile hier neu (siehe LIESMICH dort). */ -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22340%22%20height%3D%22362%22%20viewBox%3D%220%200%20340%20362%22%3E%3Cg%20transform%3D%22matrix%28.1%200%200%20-.1%200%20362%29%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22m%203190%2C3550%20c%20-80%2C-21%20-249%2C-59%20-375%2C-84%20-321%2C-63%20-372%2C-82%20-515%2C-188%20-203%2C-151%20-345%2C-443%20-344%2C-708%201%2C-101%2016%2C-173%2033%2C-154%204%2C5%2018%2C34%2030%2C64%2061%2C147%20238%2C371%20389%2C492%2077%2C62%20232%2C123%20232%2C91%200%2C-11%20-53%2C-77%20-116%2C-143%20-59%2C-63%20-79%2C-89%20-190%2C-250%20-115%2C-169%20-265%2C-471%20-366%2C-740%20-98%2C-261%20-170%2C-469%20-218%2C-625%20-81%2C-267%20-154%2C-478%20-167%2C-482%20-16%2C-6%20-60%2C137%20-152%2C492%20-143%2C556%20-204%2C747%20-350%2C1095%20-100%2C237%20-232%2C427%20-500%2C718%20-147%2C161%20-356%2C315%20-482%2C357%20-82%2C28%20-89%2C14%20-27%2C-55%20292%2C-329%20461%2C-573%20640%2C-920%20151%2C-295%20255%2C-588%20444%2C-1260%2048%2C-172%20154%2C-610%20188%2C-780%2038%2C-189%2080%2C-374%2091%2C-403%204%2C-9%2019%2C-21%2034%2C-25%2034%2C-9%20198%2C-9%20233%2C0%2052%2C15%2062%2C56%20134%2C528%2048%2C319%2089%2C510%20171%2C795%20139%2C486%20287%2C842%20377%2C900%2013%2C8%2077%2C24%20144%2C35%20260%2C43%20469%2C158%20617%2C341%2099%2C122%20125%2C212%20150%2C512%2013%2C159%2021%2C204%2051%2C299%2019%2C62%2032%2C118%2030%2C125%20-7%2C18%20-23%2C16%20-186%2C-27%20z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22340%22%20height%3D%22362%22%20viewBox%3D%220%200%20340%20362%22%3E%3Cg%20transform%3D%22matrix%28.1%200%200%20-.1%200%20362%29%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22m%203190%2C3550%20c%20-80%2C-21%20-249%2C-59%20-375%2C-84%20-321%2C-63%20-372%2C-82%20-515%2C-188%20-203%2C-151%20-345%2C-443%20-344%2C-708%201%2C-101%2016%2C-173%2033%2C-154%204%2C5%2018%2C34%2030%2C64%2061%2C147%20238%2C371%20389%2C492%2077%2C62%20232%2C123%20232%2C91%200%2C-11%20-53%2C-77%20-116%2C-143%20-59%2C-63%20-79%2C-89%20-190%2C-250%20-115%2C-169%20-265%2C-471%20-366%2C-740%20-98%2C-261%20-170%2C-469%20-218%2C-625%20-81%2C-267%20-154%2C-478%20-167%2C-482%20-16%2C-6%20-60%2C137%20-152%2C492%20-143%2C556%20-204%2C747%20-350%2C1095%20-100%2C237%20-232%2C427%20-500%2C718%20-147%2C161%20-356%2C315%20-482%2C357%20-82%2C28%20-89%2C14%20-27%2C-55%20292%2C-329%20461%2C-573%20640%2C-920%20151%2C-295%20255%2C-588%20444%2C-1260%2048%2C-172%20154%2C-610%20188%2C-780%2038%2C-189%2080%2C-374%2091%2C-403%204%2C-9%2019%2C-21%2034%2C-25%2034%2C-9%20198%2C-9%20233%2C0%2052%2C15%2062%2C56%20134%2C528%2048%2C319%2089%2C510%20171%2C795%20139%2C486%20287%2C842%20377%2C900%2013%2C8%2077%2C24%20144%2C35%20260%2C43%20469%2C158%20617%2C341%2099%2C122%20125%2C212%20150%2C512%2013%2C159%2021%2C204%2051%2C299%2019%2C62%2032%2C118%2030%2C125%20-7%2C18%20-23%2C16%20-186%2C-27%20z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/contain no-repeat; } .fv-schild.veganschild{color:var(--gruen);background:#EDF2E8;box-shadow:inset 0 0 0 1px rgba(63,107,46,.35)} .fv-schild .vegzeichen{margin-right:5px} .fv-zeichen{ width:100%;aspect-ratio:1/1;max-width:420px;margin:0 auto; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,2.4vw,22px); border-radius:50%; background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.14),rgba(255,255,255,.04) 62%,transparent 72%); } .fv-zeichen .kanji{ font-family:var(--serif);font-weight:600;line-height:1; font-size:clamp(88px,21vw,180px);color:#fff;opacity:.9; text-shadow:0 18px 34px rgba(27,22,17,.35); } .fv-zeichen .hinweis{ background:var(--ink);color:#fff;font-family:var(--sans);font-size:11.5px; letter-spacing:.14em;text-transform:uppercase;padding:7px 14px;border-radius:999px;white-space:nowrap; } .fv-keinbild{position:relative} .fv-keinbild .t{opacity:0;fill:#fff;stroke:rgba(27,22,17,.45)} .fv-keinbild .t.strich{fill:none} .fv-keinbild .t .voll{stroke:none} .fv-keinbild span{ position:absolute;left:50%;bottom:6%;transform:translateX(-50%); background:var(--ink);color:#fff;font-family:var(--sans);font-size:11.5px; letter-spacing:.14em;text-transform:uppercase;padding:7px 14px;border-radius:999px;white-space:nowrap; } /* --- Panel mit Frage oder Ergebnis --- */ .fv-panel{color:var(--ink);max-width:520px} .fv-fortschritt{display:flex;gap:7px;margin-bottom:clamp(16px,2.4vw,26px)} .fv-fortschritt i{width:34px;height:4px;border-radius:2px;background:rgba(27,22,17,.18);transition:.3s} .fv-fortschritt i.voll{background:var(--ink)} /* Fragen im Comicton: gelbe Fettschrift mit blauer Kontur. paint-order legt die Kontur hinter die Fuellung, sonst frisst sie die Buchstaben von innen auf. */ .fv-frage h3{ font-size:clamp(28px,3.9vw,48px);line-height:1.12;margin:0 0 clamp(20px,2.6vw,30px); font-weight:800;color:#FFD21E; -webkit-text-stroke:5px #1B52C9; paint-order:stroke fill; text-shadow:0 4px 0 rgba(27,82,201,.45); } .fv-wahl{display:grid;gap:12px} .fv-wahl button{ text-align:left;background:#fff;border:1.5px solid rgba(27,22,17,.13); border-radius:14px;padding:20px 24px;cursor:pointer;transition:.2s;font-family:var(--sans); box-shadow:0 6px 20px rgba(27,22,17,.09); } .fv-wahl button:hover{border-color:var(--ink);transform:translateX(5px);box-shadow:0 12px 30px rgba(27,22,17,.16)} .fv-wahl button b{display:block;font-family:var(--serif);font-size:20px;color:var(--ink)} /* Skala für Schärfe und Toppingmenge. Bewusst als Stufen gebaut und nicht als Schieber, der sich nicht ziehen lässt. Die Marken zeigen die Steigerung. */ .fv-skala{display:flex;gap:0;background:#fff;border:1.5px solid rgba(27,22,17,.13);border-radius:14px;overflow:hidden;box-shadow:0 6px 20px rgba(27,22,17,.09)} .fv-skala .stufe{ flex:1;border:0;background:none;padding:16px 12px 18px;cursor:pointer;text-align:center; font-family:var(--sans);transition:.2s; } .fv-skala .stufe + .stufe{border-left:1px solid rgba(27,22,17,.1)} .fv-skala .stufe:hover{background:var(--paper)} .fv-skala .marken{display:flex;gap:7px;justify-content:center;align-items:flex-end;height:36px;margin-bottom:14px} .fv-skala .marken i{width:14px;border-radius:3px;background:transparent;box-shadow:inset 0 0 0 2px rgba(27,22,17,.18);transition:.2s} .fv-skala .marken i:nth-child(1){height:14px} .fv-skala .marken i:nth-child(2){height:25px} .fv-skala .marken i:nth-child(3){height:36px} .fv-skala .marken i.voll{background:var(--red);box-shadow:none} .fv-skala[data-art="menge"] .marken i.voll{background:var(--ink);box-shadow:none} .fv-skala .stufe:hover .marken i.voll{transform:scaleY(1.08);transform-origin:bottom} .fv-skala .stufe b{display:block;font-family:var(--serif);font-size:17px;color:var(--ink)} /* Topping-Regler. Vier Rasten, sichtbar wie bei der Lautstaerke. */ .fv-regler{ background:#fff;border:1.5px solid rgba(27,22,17,.13);border-radius:14px; padding:22px 24px 16px;box-shadow:0 6px 20px rgba(27,22,17,.09);margin-bottom:12px; } .fv-regler input[type=range]{ -webkit-appearance:none;appearance:none;width:100%;height:10px;border-radius:999px; background:linear-gradient(90deg,var(--tan-soft),var(--ink-3));outline:none;margin:0; } .fv-regler input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none;appearance:none;width:30px;height:30px;border-radius:50%; background:var(--red);border:3px solid #fff;cursor:pointer; box-shadow:0 3px 10px rgba(27,22,17,.3); } .fv-regler input[type=range]::-moz-range-thumb{ width:30px;height:30px;border-radius:50%;background:var(--red);border:3px solid #fff;cursor:pointer; } .fv-rasten{display:flex;justify-content:space-between;margin:12px 3px 0} .fv-rasten i{ width:14px;height:14px;border-radius:50%;background:transparent; box-shadow:inset 0 0 0 2px rgba(27,22,17,.2);transition:.2s; } .fv-rasten i.voll{background:var(--ink);box-shadow:none} .fv-reglerwort{ display:flex;justify-content:space-between;margin-top:9px; font-family:var(--sans);font-size:12.5px;letter-spacing:.06em;color:var(--ink-3); } .fv-kit{ font-family:var(--sans);font-size:13.5px;color:var(--ink-2);margin:-8px 0 16px; } .fv-hinweis{ font-size:14px;line-height:1.7;color:var(--ink);margin:0 0 20px;max-width:42ch; background:var(--red-soft);border-radius:10px;padding:12px 16px; } .fv-unten{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:18px} .fv-egal{ border:0;background:none;color:var(--ink);font-family:var(--sans);font-size:13.5px; cursor:pointer;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.85); box-shadow:0 2px 10px rgba(27,22,17,.1); } .fv-egal:hover{background:#fff;box-shadow:0 4px 16px rgba(27,22,17,.18)} .fv-zurueck{ border:0;color:var(--ink);font-family:var(--sans);font-size:13.5px;cursor:pointer; padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.85); box-shadow:0 2px 10px rgba(27,22,17,.1); } .fv-zurueck:hover{background:#fff;box-shadow:0 4px 16px rgba(27,22,17,.18)} /* --- Ergebnis --- */ .fv-ergebnis{ animation:fvRein .5s .12s ease both; background:var(--white);border-radius:18px; padding:clamp(24px,3vw,36px) clamp(22px,2.8vw,34px); box-shadow:0 24px 60px rgba(27,22,17,.22); } @keyframes fvRein{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} .fv-kicker{ font-family:var(--serif);font-size:15px;letter-spacing:.2em;color:var(--ink-3);display:block;margin-bottom:8px; } .fv-ergebnis h3{font-size:clamp(28px,4vw,46px);line-height:1.1;margin:0 0 6px;color:var(--ink)} .fv-preis{ font-family:var(--sans);font-size:20px;font-weight:600;color:var(--ink);display:block;margin-bottom:16px; font-variant-numeric:tabular-nums; } .fv-text{font-size:15.5px;line-height:1.8;color:var(--ink-2);margin:0 0 16px;max-width:44ch} .fv-zudir{ font-size:15px;line-height:1.8;color:var(--ink);margin:0 0 22px;max-width:42ch; font-family:var(--serif);border-left:3px solid var(--red);padding-left:18px; } .fv-schild{ display:inline-block;vertical-align:middle;font-family:var(--sans);font-size:11px;font-weight:600; letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--ink); border-radius:999px;padding:5px 12px;margin-left:10px;position:relative;top:-4px; } .fv-klein{font-size:12px;color:var(--ink-3);line-height:1.7;margin:18px 0 0} .fv-klein a{color:var(--ink-2);text-decoration:underline} .fv-auch{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:22px} .fv-auch span{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);width:100%;margin-bottom:2px} .fv-alt{ border:1px solid var(--tan-soft);background:var(--paper);border-radius:999px; padding:7px 14px;font-family:var(--sans);font-size:13px;color:var(--ink-2); cursor:pointer;transition:.2s; } .fv-alt::before{content:'↺ ';opacity:.5} .fv-alt:hover{background:#fff;border-color:var(--ink);color:var(--ink)} .fv-aktion{display:flex;gap:12px;flex-wrap:wrap} .fv-aktion .btn-ghost{background:var(--white);border-color:var(--ink);color:var(--ink)!important} .fv-aktion .btn-ghost:hover{background:var(--ink);color:#fff!important} @media(max-width:900px){ #finderVoll.an{overflow-y:auto} .fv-raum{ grid-template-columns:1fr;height:auto;min-height:100%;align-content:start; gap:48px;padding:58px 18px 34px; } .fv-sil{max-width:300px} .fv-buehne{--buehne:320px;--halo:152%;--halo-kern:104%} .fv-panel{max-width:none} .fv-frage h3{font-size:26px;-webkit-text-stroke-width:3px;padding-left:3px} .fv-skala{flex-direction:column} .fv-skala .stufe + .stufe{border-left:0;border-top:1px solid rgba(27,22,17,.1)} .fv-skala .stufe{text-align:left;padding:15px 20px;display:flex;align-items:center;gap:14px} .fv-skala .marken{margin-bottom:0;order:1;height:18px} .fv-foto{max-width:300px} .fv-aktion{gap:10px} .fv-aktion .btn{flex:1;justify-content:center;text-align:center;min-width:140px} .fv-egal{margin-left:auto} } @media(max-width:600px){ .fv-sil{max-width:276px} .fv-buehne{--buehne:292px;--halo:156%;--halo-kern:106%} } @media (prefers-reduced-motion:reduce){ .fv-halo{animation:none} .fv-sil .t.neu,.fv-buehne.enthuellt,.fv-buehne.puls::after{animation:none} } /* ===== Einwilligung fuer Google Maps (consent.js) ===================== */ /* Karten werden erst geladen, wenn zugestimmt wurde. Bis dahin steht hier eine Flaeche mit Schaltflaeche. */ .mapgate{position:relative;display:block;width:100%;min-height:200px;background:var(--paper-2); border:1px solid var(--tan-soft);border-radius:10px;overflow:hidden} .mapgate iframe{width:100%;height:100%;min-height:200px;border:0;display:block;filter:grayscale(.15)} .mapgate-in{padding:26px 22px;text-align:center;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:8px;min-height:200px} .mapgate-in b{font-family:var(--serif);font-size:16px} .mapgate-in p{margin:0;max-width:46ch;font-size:13px;line-height:1.65;color:var(--ink-2)} .mapgate-btn{margin-top:6px} .mapgate-immer{background:none;border:0;padding:4px;cursor:pointer;font-family:var(--sans); font-size:11.5px;letter-spacing:.06em;color:var(--ink-3);text-decoration:underline} .mapgate-immer:hover{color:var(--red)} .consent{position:fixed;left:0;right:0;bottom:0;z-index:290;background:var(--white); border-top:2px solid var(--red);box-shadow:0 -10px 40px rgba(27,22,17,.16)} .consent[hidden]{display:none} .consent-in{max-width:var(--maxw);margin:0 auto;padding:18px var(--pad); display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center} .consent-text b{display:block;font-family:var(--serif);font-size:16px;margin-bottom:4px} .consent-text p{margin:0;font-size:13px;line-height:1.7;color:var(--ink-2);max-width:74ch} /* Beide Schaltflaechen gleich gross und gleich sichtbar. Kein Dark Pattern. */ .consent-btns{display:flex;gap:10px;flex:none} .consent-btns .btn{white-space:nowrap} /* Auf schmalen Schirmen untereinander. Rasterfelder brauchen min-width:0, sonst koennen sie nicht schmaler werden als ihr eigener Text - genau daran ist die erste Fassung auf dem Handy aus dem Bild gelaufen. */ @media(max-width:760px){ .consent-in{grid-template-columns:1fr;gap:14px;padding:16px var(--pad) 18px} .consent-in > *{min-width:0} .consent-text p{font-size:12.5px} .consent-btns{display:grid;grid-template-columns:1fr;gap:8px} .consent-btns .btn{width:100%;text-align:center;white-space:normal;min-width:0} } /* --- Sprachwahl in der Kopfzeile ------------------------------------ Die Sprachnamen stehen in ihrer eigenen Schrift. Bewusst NICHT in der Noto-Teilmenge gesetzt: die enthaelt nur die Zeichen, die sonst auf der Seite vorkommen, 中文 waere dort nicht drin. Deshalb hier die Systemschrift, die jedes Geraet fuer seine Schriftsysteme mitbringt. */ .sprachwahl{position:relative;flex:0 0 auto} .sprachknopf{ display:flex;align-items:center;justify-content:center;width:40px;height:40px; border:1px solid var(--tan-soft);border-radius:999px;background:transparent; color:var(--ink-2);cursor:pointer;padding:0; } .sprachknopf:hover{border-color:var(--red);color:var(--red)} .sprachknopf svg{width:20px;height:20px} .sprachmenue{ position:absolute;top:calc(100% + 8px);right:0;z-index:90;display:none; min-width:186px;background:var(--white);border:1px solid var(--tan-soft); border-radius:10px;padding:6px;box-shadow:0 14px 34px rgba(16,12,8,.14); } .sprachwahl.open .sprachmenue{display:block} .sprachlink{ display:flex;align-items:center;justify-content:space-between;gap:10px; padding:9px 12px;border-radius:7px;font-size:14.5px;text-decoration:none; color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",sans-serif; } a.sprachlink:hover{background:var(--paper);color:var(--red)} .sprachlink.on{background:var(--paper-2);font-weight:600} .sprachlink.aus{color:var(--ink-3);cursor:default} .sprachlink small{ font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tan); } .drawer-sprachen{ margin-top:18px;padding-top:16px;border-top:1px solid var(--tan-faint); display:flex;flex-direction:column;gap:2px; } @media(max-width:860px){ .bar .sprachwahl{display:none} } /* --- Vorschlagsleiste fuer die Sprache ------------------------------- Erscheint nur beim ersten Besuch und nur, wenn die Browsersprache eine ist, die wir wirklich anbieten. Sie leitet nicht um, sie fragt. */ .sprachhinweis{ position:fixed;left:0;right:0;bottom:0;z-index:120; display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap; background:var(--ink);color:#fff;padding:14px 18px;font-size:14px; padding-bottom:calc(14px + env(safe-area-inset-bottom)); font-family:system-ui,-apple-system,"Segoe UI",sans-serif; } .sprachhinweis button{ font:inherit;font-size:13.5px;padding:8px 16px;border-radius:999px;cursor:pointer; border:1px solid rgba(255,255,255,.5);background:transparent;color:#fff; } .sprachhinweis button.ja{background:var(--red);border-color:var(--red);font-weight:600} .sprachhinweis button:hover{border-color:#fff} @media(max-width:560px){ .sprachhinweis{font-size:13px;gap:10px;padding:12px 14px} } /* --- Japanische Zierschrift in ostasiatischen Fassungen ausblenden ----- Siehe Begruendung in shin.js. Der Inhalt bleibt vollstaendig, nur die Zierschicht faellt weg: Wasserzeichen, Randschrift, Kicker-Kana. */ html.ohne-deko [data-jp]::before, html.ohne-deko [data-jp]::after, html.ohne-deko .mark, html.ohne-deko .sidejp, html.ohne-deko .diyhero .kicker, html.ohne-deko .eyebrow .jp{display:none}