Gute version, fonts laden nicht

.gitignore

@@ -1,2 +1 @@
 node_modules
-.next

.next/build-manifest.json

@@ -0,0 +1,32 @@
+{
+  "polyfillFiles": [
+    "static/chunks/polyfills.js"
+  ],
+  "devFiles": [
+    "static/chunks/react-refresh.js"
+  ],
+  "ampDevFiles": [],
+  "lowPriorityFiles": [
+    "static/development/_buildManifest.js",
+    "static/development/_ssgManifest.js"
+  ],
+  "rootMainFiles": [],
+  "pages": {
+    "/": [
+      "static/chunks/webpack.js",
+      "static/chunks/main.js",
+      "static/chunks/pages/index.js"
+    ],
+    "/_app": [
+      "static/chunks/webpack.js",
+      "static/chunks/main.js",
+      "static/chunks/pages/_app.js"
+    ],
+    "/_error": [
+      "static/chunks/webpack.js",
+      "static/chunks/main.js",
+      "static/chunks/pages/_error.js"
+    ]
+  },
+  "ampFirstPages": []
+}

.next/package.json

@@ -0,0 +1 @@
+{"type": "commonjs"}

.next/react-loadable-manifest.json

@@ -0,0 +1 @@
+{}

.next/server/interception-route-rewrite-manifest.js

@@ -0,0 +1 @@
+self.__INTERCEPTION_ROUTE_REWRITE_MANIFEST="[]"

.next/server/middleware-build-manifest.js

@@ -0,0 +1,34 @@
+self.__BUILD_MANIFEST = {
+  "polyfillFiles": [
+    "static/chunks/polyfills.js"
+  ],
+  "devFiles": [
+    "static/chunks/react-refresh.js"
+  ],
+  "ampDevFiles": [],
+  "lowPriorityFiles": [],
+  "rootMainFiles": [],
+  "pages": {
+    "/": [
+      "static/chunks/webpack.js",
+      "static/chunks/main.js",
+      "static/chunks/pages/index.js"
+    ],
+    "/_app": [
+      "static/chunks/webpack.js",
+      "static/chunks/main.js",
+      "static/chunks/pages/_app.js"
+    ],
+    "/_error": [
+      "static/chunks/webpack.js",
+      "static/chunks/main.js",
+      "static/chunks/pages/_error.js"
+    ]
+  },
+  "ampFirstPages": []
+};
+self.__BUILD_MANIFEST.lowPriorityFiles = [
+"/static/" + process.env.__NEXT_BUILD_ID + "/_buildManifest.js",
+,"/static/" + process.env.__NEXT_BUILD_ID + "/_ssgManifest.js",
+
+];

.next/server/middleware-manifest.json

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "middleware": {},
+  "functions": {},
+  "sortedMiddleware": []
+}

.next/server/middleware-react-loadable-manifest.js

@@ -0,0 +1 @@
+self.__REACT_LOADABLE_MANIFEST="{}"

.next/server/next-font-manifest.js

@@ -0,0 +1 @@
+self.__NEXT_FONT_MANIFEST="{\"pages\":{},\"app\":{},\"appUsingSizeAdjust\":false,\"pagesUsingSizeAdjust\":false}"

.next/server/next-font-manifest.json

@@ -0,0 +1 @@
+{"pages":{},"app":{},"appUsingSizeAdjust":false,"pagesUsingSizeAdjust":false}

.next/server/pages-manifest.json

@@ -0,0 +1,6 @@
+{
+  "/_document": "pages/_document.js",
+  "/_app": "pages/_app.js",
+  "/_error": "pages/_error.js",
+  "/": "pages/index.js"
+}

.next/server/vendor-chunks/@swc.js

@@ -0,0 +1,35 @@
+"use strict";
+/*
+ * ATTENTION: An "eval-source-map" devtool has been used.
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file with attached SourceMaps in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+exports.id = "vendor-chunks/@swc";
+exports.ids = ["vendor-chunks/@swc"];
+exports.modules = {
+
+/***/ "./node_modules/@swc/helpers/cjs/_interop_require_default.cjs":
+/*!********************************************************************!*\
+  !*** ./node_modules/@swc/helpers/cjs/_interop_require_default.cjs ***!
+  \********************************************************************/
+/***/ ((__unused_webpack_module, exports) => {
+
+eval("\n\nexports._ = exports._interop_require_default = _interop_require_default;\nfunction _interop_require_default(obj) {\n    return obj && obj.__esModule ? obj : { default: obj };\n}\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9ub2RlX21vZHVsZXMvQHN3Yy9oZWxwZXJzL2Nqcy9faW50ZXJvcF9yZXF1aXJlX2RlZmF1bHQuY2pzIiwibWFwcGluZ3MiOiJBQUFhOztBQUViLFNBQVMsR0FBRyxnQ0FBZ0M7QUFDNUM7QUFDQSwyQ0FBMkM7QUFDM0MiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly9mYW5jeXRleHQtZ2VuZXJhdG9yLy4vbm9kZV9tb2R1bGVzL0Bzd2MvaGVscGVycy9janMvX2ludGVyb3BfcmVxdWlyZV9kZWZhdWx0LmNqcz8zYmQ2Il0sInNvdXJjZXNDb250ZW50IjpbIlwidXNlIHN0cmljdFwiO1xuXG5leHBvcnRzLl8gPSBleHBvcnRzLl9pbnRlcm9wX3JlcXVpcmVfZGVmYXVsdCA9IF9pbnRlcm9wX3JlcXVpcmVfZGVmYXVsdDtcbmZ1bmN0aW9uIF9pbnRlcm9wX3JlcXVpcmVfZGVmYXVsdChvYmopIHtcbiAgICByZXR1cm4gb2JqICYmIG9iai5fX2VzTW9kdWxlID8gb2JqIDogeyBkZWZhdWx0OiBvYmogfTtcbn1cbiJdLCJuYW1lcyI6W10sInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///./node_modules/@swc/helpers/cjs/_interop_require_default.cjs\n");
+
+/***/ }),
+
+/***/ "./node_modules/@swc/helpers/cjs/_interop_require_wildcard.cjs":
+/*!*********************************************************************!*\
+  !*** ./node_modules/@swc/helpers/cjs/_interop_require_wildcard.cjs ***!
+  \*********************************************************************/
+/***/ ((__unused_webpack_module, exports) => {
+
+eval("\n\nfunction _getRequireWildcardCache(nodeInterop) {\n    if (typeof WeakMap !== \"function\") return null;\n\n    var cacheBabelInterop = new WeakMap();\n    var cacheNodeInterop = new WeakMap();\n\n    return (_getRequireWildcardCache = function(nodeInterop) {\n        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;\n    })(nodeInterop);\n}\nexports._ = exports._interop_require_wildcard = _interop_require_wildcard;\nfunction _interop_require_wildcard(obj, nodeInterop) {\n    if (!nodeInterop && obj && obj.__esModule) return obj;\n    if (obj === null || typeof obj !== \"object\" && typeof obj !== \"function\") return { default: obj };\n\n    var cache = _getRequireWildcardCache(nodeInterop);\n\n    if (cache && cache.has(obj)) return cache.get(obj);\n\n    var newObj = { __proto__: null };\n    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;\n\n    for (var key in obj) {\n        if (key !== \"default\" && Object.prototype.hasOwnProperty.call(obj, key)) {\n            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;\n            if (desc && (desc.get || desc.set)) Object.defineProperty(newObj, key, desc);\n            else newObj[key] = obj[key];\n        }\n    }\n\n    newObj.default = obj;\n\n    if (cache) cache.set(obj, newObj);\n\n    return newObj;\n}\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9ub2RlX21vZHVsZXMvQHN3Yy9oZWxwZXJzL2Nqcy9faW50ZXJvcF9yZXF1aXJlX3dpbGRjYXJkLmNqcyIsIm1hcHBpbmdzIjoiQUFBYTs7QUFFYjtBQUNBOztBQUVBO0FBQ0E7O0FBRUE7QUFDQTtBQUNBLEtBQUs7QUFDTDtBQUNBLFNBQVMsR0FBRyxpQ0FBaUM7QUFDN0M7QUFDQTtBQUNBLHVGQUF1Rjs7QUFFdkY7O0FBRUE7O0FBRUEsbUJBQW1CO0FBQ25COztBQUVBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOztBQUVBOztBQUVBOztBQUVBO0FBQ0EiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly9mYW5jeXRleHQtZ2VuZXJhdG9yLy4vbm9kZV9tb2R1bGVzL0Bzd2MvaGVscGVycy9janMvX2ludGVyb3BfcmVxdWlyZV93aWxkY2FyZC5janM/Nzc5NyJdLCJzb3VyY2VzQ29udGVudCI6WyJcInVzZSBzdHJpY3RcIjtcblxuZnVuY3Rpb24gX2dldFJlcXVpcmVXaWxkY2FyZENhY2hlKG5vZGVJbnRlcm9wKSB7XG4gICAgaWYgKHR5cGVvZiBXZWFrTWFwICE9PSBcImZ1bmN0aW9uXCIpIHJldHVybiBudWxsO1xuXG4gICAgdmFyIGNhY2hlQmFiZWxJbnRlcm9wID0gbmV3IFdlYWtNYXAoKTtcbiAgICB2YXIgY2FjaGVOb2RlSW50ZXJvcCA9IG5ldyBXZWFrTWFwKCk7XG5cbiAgICByZXR1cm4gKF9nZXRSZXF1aXJlV2lsZGNhcmRDYWNoZSA9IGZ1bmN0aW9uKG5vZGVJbnRlcm9wKSB7XG4gICAgICAgIHJldHVybiBub2RlSW50ZXJvcCA/IGNhY2hlTm9kZUludGVyb3AgOiBjYWNoZUJhYmVsSW50ZXJvcDtcbiAgICB9KShub2RlSW50ZXJvcCk7XG59XG5leHBvcnRzLl8gPSBleHBvcnRzLl9pbnRlcm9wX3JlcXVpcmVfd2lsZGNhcmQgPSBfaW50ZXJvcF9yZXF1aXJlX3dpbGRjYXJkO1xuZnVuY3Rpb24gX2ludGVyb3BfcmVxdWlyZV93aWxkY2FyZChvYmosIG5vZGVJbnRlcm9wKSB7XG4gICAgaWYgKCFub2RlSW50ZXJvcCAmJiBvYmogJiYgb2JqLl9fZXNNb2R1bGUpIHJldHVybiBvYmo7XG4gICAgaWYgKG9iaiA9PT0gbnVsbCB8fCB0eXBlb2Ygb2JqICE9PSBcIm9iamVjdFwiICYmIHR5cGVvZiBvYmogIT09IFwiZnVuY3Rpb25cIikgcmV0dXJuIHsgZGVmYXVsdDogb2JqIH07XG5cbiAgICB2YXIgY2FjaGUgPSBfZ2V0UmVxdWlyZVdpbGRjYXJkQ2FjaGUobm9kZUludGVyb3ApO1xuXG4gICAgaWYgKGNhY2hlICYmIGNhY2hlLmhhcyhvYmopKSByZXR1cm4gY2FjaGUuZ2V0KG9iaik7XG5cbiAgICB2YXIgbmV3T2JqID0geyBfX3Byb3RvX186IG51bGwgfTtcbiAgICB2YXIgaGFzUHJvcGVydHlEZXNjcmlwdG9yID0gT2JqZWN0LmRlZmluZVByb3BlcnR5ICYmIE9iamVjdC5nZXRPd25Qcm9wZXJ0eURlc2NyaXB0b3I7XG5cbiAgICBmb3IgKHZhciBrZXkgaW4gb2JqKSB7XG4gICAgICAgIGlmIChrZXkgIT09IFwiZGVmYXVsdFwiICYmIE9iamVjdC5wcm90b3R5cGUuaGFzT3duUHJvcGVydHkuY2FsbChvYmosIGtleSkpIHtcbiAgICAgICAgICAgIHZhciBkZXNjID0gaGFzUHJvcGVydHlEZXNjcmlwdG9yID8gT2JqZWN0LmdldE93blByb3BlcnR5RGVzY3JpcHRvcihvYmosIGtleSkgOiBudWxsO1xuICAgICAgICAgICAgaWYgKGRlc2MgJiYgKGRlc2MuZ2V0IHx8IGRlc2Muc2V0KSkgT2JqZWN0LmRlZmluZVByb3BlcnR5KG5ld09iaiwga2V5LCBkZXNjKTtcbiAgICAgICAgICAgIGVsc2UgbmV3T2JqW2tleV0gPSBvYmpba2V5XTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgIG5ld09iai5kZWZhdWx0ID0gb2JqO1xuXG4gICAgaWYgKGNhY2hlKSBjYWNoZS5zZXQob2JqLCBuZXdPYmopO1xuXG4gICAgcmV0dXJuIG5ld09iajtcbn1cbiJdLCJuYW1lcyI6W10sInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///./node_modules/@swc/helpers/cjs/_interop_require_wildcard.cjs\n");
+
+/***/ })
+
+};
+;

.next/server/webpack-runtime.js

@@ -0,0 +1,237 @@
+/*
+ * ATTENTION: An "eval-source-map" devtool has been used.
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file with attached SourceMaps in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+/******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	var __webpack_modules__ = ({});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		var threw = true;
+/******/ 		try {
+/******/ 			__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 			threw = false;
+/******/ 		} finally {
+/******/ 			if(threw) delete __webpack_module_cache__[moduleId];
+/******/ 		}
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = __webpack_modules__;
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/async module */
+/******/ 	(() => {
+/******/ 		var webpackQueues = typeof Symbol === "function" ? Symbol("webpack queues") : "__webpack_queues__";
+/******/ 		var webpackExports = typeof Symbol === "function" ? Symbol("webpack exports") : "__webpack_exports__";
+/******/ 		var webpackError = typeof Symbol === "function" ? Symbol("webpack error") : "__webpack_error__";
+/******/ 		var resolveQueue = (queue) => {
+/******/ 			if(queue && queue.d < 1) {
+/******/ 				queue.d = 1;
+/******/ 				queue.forEach((fn) => (fn.r--));
+/******/ 				queue.forEach((fn) => (fn.r-- ? fn.r++ : fn()));
+/******/ 			}
+/******/ 		}
+/******/ 		var wrapDeps = (deps) => (deps.map((dep) => {
+/******/ 			if(dep !== null && typeof dep === "object") {
+/******/ 				if(dep[webpackQueues]) return dep;
+/******/ 				if(dep.then) {
+/******/ 					var queue = [];
+/******/ 					queue.d = 0;
+/******/ 					dep.then((r) => {
+/******/ 						obj[webpackExports] = r;
+/******/ 						resolveQueue(queue);
+/******/ 					}, (e) => {
+/******/ 						obj[webpackError] = e;
+/******/ 						resolveQueue(queue);
+/******/ 					});
+/******/ 					var obj = {};
+/******/ 					obj[webpackQueues] = (fn) => (fn(queue));
+/******/ 					return obj;
+/******/ 				}
+/******/ 			}
+/******/ 			var ret = {};
+/******/ 			ret[webpackQueues] = x => {};
+/******/ 			ret[webpackExports] = dep;
+/******/ 			return ret;
+/******/ 		}));
+/******/ 		__webpack_require__.a = (module, body, hasAwait) => {
+/******/ 			var queue;
+/******/ 			hasAwait && ((queue = []).d = -1);
+/******/ 			var depQueues = new Set();
+/******/ 			var exports = module.exports;
+/******/ 			var currentDeps;
+/******/ 			var outerResolve;
+/******/ 			var reject;
+/******/ 			var promise = new Promise((resolve, rej) => {
+/******/ 				reject = rej;
+/******/ 				outerResolve = resolve;
+/******/ 			});
+/******/ 			promise[webpackExports] = exports;
+/******/ 			promise[webpackQueues] = (fn) => (queue && fn(queue), depQueues.forEach(fn), promise["catch"](x => {}));
+/******/ 			module.exports = promise;
+/******/ 			body((deps) => {
+/******/ 				currentDeps = wrapDeps(deps);
+/******/ 				var fn;
+/******/ 				var getResult = () => (currentDeps.map((d) => {
+/******/ 					if(d[webpackError]) throw d[webpackError];
+/******/ 					return d[webpackExports];
+/******/ 				}))
+/******/ 				var promise = new Promise((resolve) => {
+/******/ 					fn = () => (resolve(getResult));
+/******/ 					fn.r = 0;
+/******/ 					var fnQueue = (q) => (q !== queue && !depQueues.has(q) && (depQueues.add(q), q && !q.d && (fn.r++, q.push(fn))));
+/******/ 					currentDeps.map((dep) => (dep[webpackQueues](fnQueue)));
+/******/ 				});
+/******/ 				return fn.r ? promise : getResult();
+/******/ 			}, (err) => ((err ? reject(promise[webpackError] = err) : outerResolve(exports)), resolveQueue(queue)));
+/******/ 			queue && queue.d < 0 && (queue.d = 0);
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/compat get default export */
+/******/ 	(() => {
+/******/ 		// getDefaultExport function for compatibility with non-harmony modules
+/******/ 		__webpack_require__.n = (module) => {
+/******/ 			var getter = module && module.__esModule ?
+/******/ 				() => (module['default']) :
+/******/ 				() => (module);
+/******/ 			__webpack_require__.d(getter, { a: getter });
+/******/ 			return getter;
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/define property getters */
+/******/ 	(() => {
+/******/ 		// define getter functions for harmony exports
+/******/ 		__webpack_require__.d = (exports, definition) => {
+/******/ 			for(var key in definition) {
+/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 				}
+/******/ 			}
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/ensure chunk */
+/******/ 	(() => {
+/******/ 		__webpack_require__.f = {};
+/******/ 		// This file contains only the entry chunk.
+/******/ 		// The chunk loading function for additional chunks
+/******/ 		__webpack_require__.e = (chunkId) => {
+/******/ 			return Promise.all(Object.keys(__webpack_require__.f).reduce((promises, key) => {
+/******/ 				__webpack_require__.f[key](chunkId, promises);
+/******/ 				return promises;
+/******/ 			}, []));
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/get javascript chunk filename */
+/******/ 	(() => {
+/******/ 		// This function allow to reference async chunks and sibling chunks for the entrypoint
+/******/ 		__webpack_require__.u = (chunkId) => {
+/******/ 			// return url for filenames based on template
+/******/ 			return "" + chunkId + ".js";
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+/******/ 	(() => {
+/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/startup entrypoint */
+/******/ 	(() => {
+/******/ 		__webpack_require__.X = (result, chunkIds, fn) => {
+/******/ 			// arguments: chunkIds, moduleId are deprecated
+/******/ 			var moduleId = chunkIds;
+/******/ 			if(!fn) chunkIds = result, fn = () => (__webpack_require__(__webpack_require__.s = moduleId));
+/******/ 			chunkIds.map(__webpack_require__.e, __webpack_require__)
+/******/ 			var r = fn();
+/******/ 			return r === undefined ? result : r;
+/******/ 		}
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/require chunk loading */
+/******/ 	(() => {
+/******/ 		// no baseURI
+/******/ 		
+/******/ 		// object to store loaded chunks
+/******/ 		// "1" means "loaded", otherwise not loaded yet
+/******/ 		var installedChunks = {
+/******/ 			"webpack-runtime": 1
+/******/ 		};
+/******/ 		
+/******/ 		// no on chunks loaded
+/******/ 		
+/******/ 		var installChunk = (chunk) => {
+/******/ 			var moreModules = chunk.modules, chunkIds = chunk.ids, runtime = chunk.runtime;
+/******/ 			for(var moduleId in moreModules) {
+/******/ 				if(__webpack_require__.o(moreModules, moduleId)) {
+/******/ 					__webpack_require__.m[moduleId] = moreModules[moduleId];
+/******/ 				}
+/******/ 			}
+/******/ 			if(runtime) runtime(__webpack_require__);
+/******/ 			for(var i = 0; i < chunkIds.length; i++)
+/******/ 				installedChunks[chunkIds[i]] = 1;
+/******/ 		
+/******/ 		};
+/******/ 		
+/******/ 		// require() chunk loading for javascript
+/******/ 		__webpack_require__.f.require = (chunkId, promises) => {
+/******/ 			// "1" is the signal for "already loaded"
+/******/ 			if(!installedChunks[chunkId]) {
+/******/ 				if("webpack-runtime" != chunkId) {
+/******/ 					installChunk(require("./" + __webpack_require__.u(chunkId)));
+/******/ 				} else installedChunks[chunkId] = 1;
+/******/ 			}
+/******/ 		};
+/******/ 		
+/******/ 		module.exports = __webpack_require__;
+/******/ 		__webpack_require__.C = installChunk;
+/******/ 		
+/******/ 		// no HMR
+/******/ 		
+/******/ 		// no HMR manifest
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+/******/ 	
+/******/ 	
+/******/ })()
+;

.next/static/chunks/_error.js

@@ -0,0 +1,28 @@
+/*
+ * ATTENTION: An "eval-source-map" devtool has been used.
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file with attached SourceMaps in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+(self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([["/_error"],{
+
+/***/ "./node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?absolutePagePath=%2Fmnt%2Fc%2FUsers%2Fa931627%2FDocuments%2Ffancytextstuff%2Fnode_modules%2Fnext%2Fdist%2Fpages%2F_error.js&page=%2F_error!":
+/*!******************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?absolutePagePath=%2Fmnt%2Fc%2FUsers%2Fa931627%2FDocuments%2Ffancytextstuff%2Fnode_modules%2Fnext%2Fdist%2Fpages%2F_error.js&page=%2F_error! ***!
+  \******************************************************************************************************************************************************************************************************************************/
+/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
+
+eval(__webpack_require__.ts("\n    (window.__NEXT_P = window.__NEXT_P || []).push([\n      \"/_error\",\n      function () {\n        return __webpack_require__(/*! ./node_modules/next/dist/pages/_error.js */ \"./node_modules/next/dist/pages/_error.js\");\n      }\n    ]);\n    if(true) {\n      module.hot.dispose(function () {\n        window.__NEXT_P.push([\"/_error\"])\n      });\n    }\n  //# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9ub2RlX21vZHVsZXMvbmV4dC9kaXN0L2J1aWxkL3dlYnBhY2svbG9hZGVycy9uZXh0LWNsaWVudC1wYWdlcy1sb2FkZXIuanM/YWJzb2x1dGVQYWdlUGF0aD0lMkZtbnQlMkZjJTJGVXNlcnMlMkZhOTMxNjI3JTJGRG9jdW1lbnRzJTJGZmFuY3l0ZXh0c3R1ZmYlMkZub2RlX21vZHVsZXMlMkZuZXh0JTJGZGlzdCUyRnBhZ2VzJTJGX2Vycm9yLmpzJnBhZ2U9JTJGX2Vycm9yISIsIm1hcHBpbmdzIjoiO0FBQ0E7QUFDQTtBQUNBO0FBQ0EsZUFBZSxtQkFBTyxDQUFDLDBGQUEwQztBQUNqRTtBQUNBO0FBQ0EsT0FBTyxJQUFVO0FBQ2pCLE1BQU0sVUFBVTtBQUNoQjtBQUNBLE9BQU87QUFDUDtBQUNBIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vX05fRS8/ZGU5MSJdLCJzb3VyY2VzQ29udGVudCI6WyJcbiAgICAod2luZG93Ll9fTkVYVF9QID0gd2luZG93Ll9fTkVYVF9QIHx8IFtdKS5wdXNoKFtcbiAgICAgIFwiL19lcnJvclwiLFxuICAgICAgZnVuY3Rpb24gKCkge1xuICAgICAgICByZXR1cm4gcmVxdWlyZShcIi4vbm9kZV9tb2R1bGVzL25leHQvZGlzdC9wYWdlcy9fZXJyb3IuanNcIik7XG4gICAgICB9XG4gICAgXSk7XG4gICAgaWYobW9kdWxlLmhvdCkge1xuICAgICAgbW9kdWxlLmhvdC5kaXNwb3NlKGZ1bmN0aW9uICgpIHtcbiAgICAgICAgd2luZG93Ll9fTkVYVF9QLnB1c2goW1wiL19lcnJvclwiXSlcbiAgICAgIH0pO1xuICAgIH1cbiAgIl0sIm5hbWVzIjpbXSwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///./node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?absolutePagePath=%2Fmnt%2Fc%2FUsers%2Fa931627%2FDocuments%2Ffancytextstuff%2Fnode_modules%2Fnext%2Fdist%2Fpages%2F_error.js&page=%2F_error!\n"));
+
+/***/ })
+
+},
+/******/ function(__webpack_require__) { // webpackRuntimeModules
+/******/ var __webpack_exec__ = function(moduleId) { return __webpack_require__(__webpack_require__.s = moduleId); }
+/******/ __webpack_require__.O(0, ["main"], function() { return __webpack_exec__("./node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?absolutePagePath=%2Fmnt%2Fc%2FUsers%2Fa931627%2FDocuments%2Ffancytextstuff%2Fnode_modules%2Fnext%2Fdist%2Fpages%2F_error.js&page=%2F_error!"); });
+/******/ var __webpack_exports__ = __webpack_require__.O();
+/******/ _N_E = __webpack_exports__;
+/******/ }
+]);

.next/static/chunks/pages/_error.js

@@ -0,0 +1,28 @@
+/*
+ * ATTENTION: An "eval-source-map" devtool has been used.
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file with attached SourceMaps in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+(self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([["pages/_error"],{
+
+/***/ "./node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?absolutePagePath=private-next-pages%2F_error&page=%2F_error!":
+/*!***********************************************************************************************************************************************!*\
+  !*** ./node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?absolutePagePath=private-next-pages%2F_error&page=%2F_error! ***!
+  \***********************************************************************************************************************************************/
+/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
+
+eval(__webpack_require__.ts("\n    (window.__NEXT_P = window.__NEXT_P || []).push([\n      \"/_error\",\n      function () {\n        return __webpack_require__(/*! private-next-pages/_error */ \"./node_modules/next/dist/pages/_error.js\");\n      }\n    ]);\n    if(true) {\n      module.hot.dispose(function () {\n        window.__NEXT_P.push([\"/_error\"])\n      });\n    }\n  //# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9ub2RlX21vZHVsZXMvbmV4dC9kaXN0L2J1aWxkL3dlYnBhY2svbG9hZGVycy9uZXh0LWNsaWVudC1wYWdlcy1sb2FkZXIuanM/YWJzb2x1dGVQYWdlUGF0aD1wcml2YXRlLW5leHQtcGFnZXMlMkZfZXJyb3ImcGFnZT0lMkZfZXJyb3IhIiwibWFwcGluZ3MiOiI7QUFDQTtBQUNBO0FBQ0E7QUFDQSxlQUFlLG1CQUFPLENBQUMsMkVBQTJCO0FBQ2xEO0FBQ0E7QUFDQSxPQUFPLElBQVU7QUFDakIsTUFBTSxVQUFVO0FBQ2hCO0FBQ0EsT0FBTztBQUNQO0FBQ0EiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly9fTl9FLz84MDdiIl0sInNvdXJjZXNDb250ZW50IjpbIlxuICAgICh3aW5kb3cuX19ORVhUX1AgPSB3aW5kb3cuX19ORVhUX1AgfHwgW10pLnB1c2goW1xuICAgICAgXCIvX2Vycm9yXCIsXG4gICAgICBmdW5jdGlvbiAoKSB7XG4gICAgICAgIHJldHVybiByZXF1aXJlKFwicHJpdmF0ZS1uZXh0LXBhZ2VzL19lcnJvclwiKTtcbiAgICAgIH1cbiAgICBdKTtcbiAgICBpZihtb2R1bGUuaG90KSB7XG4gICAgICBtb2R1bGUuaG90LmRpc3Bvc2UoZnVuY3Rpb24gKCkge1xuICAgICAgICB3aW5kb3cuX19ORVhUX1AucHVzaChbXCIvX2Vycm9yXCJdKVxuICAgICAgfSk7XG4gICAgfVxuICAiXSwibmFtZXMiOltdLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///./node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?absolutePagePath=private-next-pages%2F_error&page=%2F_error!\n"));
+
+/***/ })
+
+},
+/******/ function(__webpack_require__) { // webpackRuntimeModules
+/******/ var __webpack_exec__ = function(moduleId) { return __webpack_require__(__webpack_require__.s = moduleId); }
+/******/ __webpack_require__.O(0, ["pages/_app","main"], function() { return __webpack_exec__("./node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?absolutePagePath=private-next-pages%2F_error&page=%2F_error!"); });
+/******/ var __webpack_exports__ = __webpack_require__.O();
+/******/ _N_E = __webpack_exports__;
+/******/ }
+]);

.next/static/development/_buildManifest.js

@@ -0,0 +1 @@
+self.__BUILD_MANIFEST = {__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},"/":["static\u002Fchunks\u002Fpages\u002Findex.js"],"/_error":["static\u002Fchunks\u002Fpages\u002F_error.js"],sortedPages:["\u002F","\u002F_app","\u002F_error"]};self.__BUILD_MANIFEST_CB && self.__BUILD_MANIFEST_CB()

.next/static/development/_ssgManifest.js

@@ -0,0 +1 @@
+self.__SSG_MANIFEST=new Set;self.__SSG_MANIFEST_CB&&self.__SSG_MANIFEST_CB()

.next/static/webpack/2ad40788ae47ce95.webpack.hot-update.json

@@ -0,0 +1 @@
+{"c":["webpack"],"r":[],"m":[]}

.next/static/webpack/633457081244afec._.hot-update.json

@@ -0,0 +1 @@
+{"c":[],"r":[],"m":[]}

.next/static/webpack/webpack.2ad40788ae47ce95.hot-update.js

@@ -0,0 +1,18 @@
+"use strict";
+/*
+ * ATTENTION: An "eval-source-map" devtool has been used.
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file with attached SourceMaps in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+self["webpackHotUpdate_N_E"]("webpack",{},
+/******/ function(__webpack_require__) { // webpackRuntimeModules
+/******/ /* webpack/runtime/getFullHash */
+/******/ !function() {
+/******/ 	__webpack_require__.h = function() { return "d1363c6e2dfbe09d"; }
+/******/ }();
+/******/ 
+/******/ }
+);

components/ImprovedCategoryFilter.jsx

@@ -1,3 +1,4 @@
+// components/ImprovedCategoryFilter.jsx
 import React from "react";
 import { motion } from "framer-motion";
 import { Button } from "@/components/ui/button";
@@ -13,31 +14,31 @@ export default function ImprovedCategoryFilter({
     { 
       id: 'all', 
       name: '🔥 All Fonts', 
-      description: 'Complete collection',
+      description: 'Complete collection of 60 styles',
       gradient: 'from-pink-500 to-purple-600'
     },
     { 
       id: 'modern', 
       name: '🔤 Modern', 
-      description: 'Clean & professional',
+      description: 'Clean & professional fonts',
       gradient: 'from-blue-500 to-indigo-600'
     },
     { 
       id: 'handwriting', 
       name: '✍️ Handwriting', 
-      description: 'Personal & casual',
+      description: 'Personal, casual and handwritten',
       gradient: 'from-green-500 to-emerald-600'
     },
     { 
       id: 'statement', 
       name: '🧑‍🎤 Statement', 
-      description: 'Bold & eye-catching',
+      description: 'Bold & attention-grabbing',
       gradient: 'from-red-500 to-pink-600'
     },
     { 
       id: 'futuristic', 
       name: '🚀 Futuristic', 
-      description: 'Tech & gaming',
+      description: 'Tech & gaming inspired',
       gradient: 'from-purple-500 to-violet-600'
     },
     { 
@@ -59,7 +60,7 @@ export default function ImprovedCategoryFilter({
       <div className="text-center mb-6">
         <h2 className="text-2xl font-bold text-white mb-2">Choose Your Style</h2>
         <p className="text-white/70 text-sm">
-          Browse fonts by category or view all {fontCounts.all} unique styles
+          Browse fonts by category or view all {fontCounts?.all ?? 60} unique styles
         </p>
       </div>
 
@@ -97,7 +98,7 @@ export default function ImprovedCategoryFilter({
                       : 'bg-white/10 text-white/80 border-white/20'
                   }`}
                 >
-                  {fontCounts[category.id] || 0} fonts
+                  {fontCounts?.[category.id] ?? 0} fonts
                 </Badge>
               </div>
             </Button>
@@ -114,7 +115,7 @@ export default function ImprovedCategoryFilter({
         >
           <div className="bg-white/10 backdrop-blur-sm rounded-lg p-3 inline-block">
             <p className="text-white/80 text-sm">
-              Showing <span className="font-semibold text-white">{fontCounts[selectedCategory]}</span> fonts 
+              Showing <span className="font-semibold text-white">{fontCounts?.[selectedCategory] ?? 0}</span> fonts 
               in <span className="font-semibold text-white">{categories.find(c => c.id === selectedCategory)?.name}</span> category
             </p>
           </div>

components/PerformanceOptimizedFontCard.jsx

@@ -95,26 +95,16 @@ const PerformanceOptimizedFontCard = forwardRef(({
 
   const getFontStyle = useCallback((name) => {
     const baseStyle = { wordBreak: "break-word", lineHeight: "1.3", willChange: "auto" };
-    const fontMap = {
+    const fontEntry = fontTransforms[name];
-      Montserrat: { fontFamily: "Montserrat, sans-serif", fontWeight: "500" },
+    if (!fontEntry) return baseStyle;
-      'Bebas Neue': { fontFamily: '"Bebas Neue", cursive', fontWeight: "400", textTransform: "uppercase", letterSpacing: "0.05em" },
+
-      Oswald: { fontFamily: "Oswald, sans-serif", fontWeight: "500", textTransform: "uppercase" },
+    const style = { ...baseStyle };
-      Raleway: { fontFamily: "Raleway, sans-serif", fontWeight: "400" },
+    if (fontEntry.fontFamily) style.fontFamily = fontEntry.fontFamily;
-      Poppins: { fontFamily: "Poppins, sans-serif", fontWeight: "500" },
+    if (fontEntry.fontWeight) style.fontWeight = fontEntry.fontWeight;
-      Inter: { fontFamily: "Inter, sans-serif", fontWeight: "400" },
+    if (fontEntry.textTransform) style.textTransform = fontEntry.textTransform;
-      Caveat: { fontFamily: "Caveat, cursive", fontWeight: "400" },
+    if (fontEntry.letterSpacing) style.letterSpacing = fontEntry.letterSpacing;
-      Pacifico: { fontFamily: "Pacifico, cursive", fontWeight: "400" },
+    if (fontEntry.fontSize) style.fontSize = fontEntry.fontSize;
-      'Dancing Script': { fontFamily: '"Dancing Script", cursive', fontWeight: "400" },
+    return style;
-      'Amatic SC': { fontFamily: '"Amatic SC", cursive', fontWeight: "400" },
-      Anton: { fontFamily: "Anton, sans-serif", fontWeight: "400", textTransform: "uppercase" },
-      'Luckiest Guy': { fontFamily: '"Luckiest Guy", cursive', fontWeight: "400", textTransform: "uppercase" },
-      'Fredoka One': { fontFamily: '"Fredoka One", cursive', fontWeight: "400" },
-      Bangers: { fontFamily: "Bangers, cursive", fontWeight: "400", textTransform: "uppercase" },
-      Orbitron: { fontFamily: "Orbitron, sans-serif", fontWeight: "400" },
-      'Press Start 2P': { fontFamily: '"Press Start 2P", cursive', fontWeight: "400", fontSize: "0.85em" },
-      'Playfair Display': { fontFamily: '"Playfair Display", serif', fontWeight: "400" }
-    };
-    return { ...baseStyle, ...(fontMap[name] || {}) };
   }, []);
 
   const previewText = sStr(transformedText) || "Hallo Instagram!";
@@ -185,7 +175,7 @@ const PerformanceOptimizedFontCard = forwardRef(({
             {copied ? (
               <><Check className="w-4 h-4 mr-2" /> Copy! ✨</>
             ) : (
-              <><Copy className="w-4 h-4 mr-2" /> Copy! ✨ </>
+              <><Copy className="w-4 h-4 mr-2" /> Start Typing ✨ </>
             )}
           </Button>
         </div>

components/fontTransforms.jsx

@@ -1,20 +1,18 @@
 // components/fontTransforms.jsx
-// Unicode-basiertes Font-Transformationsmapping für deine aktuelle Font-Liste
-// Nutzt verschiedene Unicode-Blöcke, damit beim Kopieren der "fancy" Stil erhalten bleibt.
 
-// 1) Definition der Unicode-Blöcke (Startpunkte)
+// 1) Unicode-Blöcke (Startpunkte)
 const unicodeBlocks = {
-  sansSerif:       { upperStart: 0x1D5A0, lowerStart: 0x1D5BA }, // Mathematical Sans-Serif
+  sansSerif:       { upperStart: 0x1D5A0, lowerStart: 0x1D5BA },
-  sansSerifBold:   { upperStart: 0x1D5D4, lowerStart: 0x1D5EE }, // Bold Sans-Serif
+  sansSerifBold:   { upperStart: 0x1D5D4, lowerStart: 0x1D5EE },
-  script:          { upperStart: 0x1D49C, lowerStart: 0x1D4B6 }, // Mathematical Script
+  script:          { upperStart: 0x1D49C, lowerStart: 0x1D4B6 },
-  scriptBold:      { upperStart: 0x1D4D0, lowerStart: 0x1D4EA }, // Bold Script
+  scriptBold:      { upperStart: 0x1D4D0, lowerStart: 0x1D4EA },
-  fraktur:         { upperStart: 0x1D504, lowerStart: 0x1D51E }, // Mathematical Fraktur
+  fraktur:         { upperStart: 0x1D504, lowerStart: 0x1D51E },
-  frakturBold:     { upperStart: 0x1D56C, lowerStart: 0x1D586 }, // Bold Fraktur
+  frakturBold:     { upperStart: 0x1D56C, lowerStart: 0x1D586 },
-  monospace:       { upperStart: 0x1D670, lowerStart: 0x1D68A }, // Mathematical Monospace
+  monospace:       { upperStart: 0x1D670, lowerStart: 0x1D68A },
-  fullwidth:       { upperStart: 0xFF21,   lowerStart: 0xFF41 }  // Fullwidth Latin
+  fullwidth:       { upperStart: 0xFF21,  lowerStart: 0xFF41 }
 };
 
-// 2) Helfer zum Mappen von A-Z und a-z in den jeweiligen Unicode-Block
+// 2) Unicode-Mapping-Helfer
 const mapUnicode = (char, block) => {
   const code = char.charCodeAt(0);
   if (code >= 65 && code <= 90) return String.fromCodePoint(block.upperStart + (code - 65));
@@ -23,64 +21,104 @@ const mapUnicode = (char, block) => {
 };
 
 const createTransform = (blockKey) => (text) =>
-  text
+  text.split('').map((c) => mapUnicode(c, unicodeBlocks[blockKey])).join('');
-    .split('')
-    .map((c) => mapUnicode(c, unicodeBlocks[blockKey]))
-    .join('');
 
-// 3) Font-Transformations für deine Liste
+// 3) Font-Transformationen
-export const fontTransforms = {
+export const fontTransforms = Object.fromEntries(
-  // 🔤 Modern – Clean & professional
+  Object.entries({
-  Montserrat:       { transform: createTransform('sansSerifBold'), category: 'modern',     description: 'Montserrat – Sans-Serif Bold Unicode' },
+    // 🔤 Modern
-  Lato:             { transform: createTransform('sansSerif'),     category: 'modern',     description: 'Lato – Humanistischer Sans-Serif Unicode' },
+    Montserrat:       ['sansSerifBold', 'modern', 'Montserrat – Sans-Serif Bold Unicode'],
-  Raleway:          { transform: createTransform('sansSerif'),     category: 'modern',     description: 'Raleway – Elegant Display Unicode' },
+    Lato:             ['sansSerif',     'modern', 'Lato – Humanistischer Sans-Serif Unicode'],
-  Poppins:          { transform: createTransform('sansSerif'),     category: 'modern',     description: 'Poppins – Rund & freundlich Unicode' },
+    Raleway:          ['sansSerif',     'modern', 'Raleway – Elegant Display Unicode'],
-  'Open Sans':      { transform: createTransform('sansSerif'),     category: 'modern',     description: 'Open Sans – Vielseitig Unicode' },
+    Poppins:          ['sansSerif',     'modern', 'Poppins – Rund & freundlich Unicode'],
-  Roboto:           { transform: createTransform('sansSerif'),     category: 'modern',     description: 'Roboto – Modernes Grotesk Unicode' },
+    'Open Sans':      ['sansSerif',     'modern', 'Open Sans – Vielseitig Unicode'],
-  'Work Sans':      { transform: createTransform('sansSerif'),     category: 'modern',     description: 'Work Sans – Tech & Clean Unicode' },
+    Roboto:           ['sansSerif',     'modern', 'Roboto – Modernes Grotesk Unicode'],
+    'Work Sans':      ['sansSerif',     'modern', 'Work Sans – Tech & Clean Unicode'],
+    'Noto Sans':      ['sansSerif',     'modern', 'Noto Sans – International Unicode'],
+    Jost:             ['sansSerif',     'modern', 'Jost – Geometrisch modern Unicode'],
+    Quicksand:        ['sansSerif',     'modern', 'Quicksand – Soft Rounded Unicode'],
+    'Averia Libre':   ['sansSerif',     'modern', 'Averia Libre – Experimentell Unicode'],
+    'Philosopher':    ['sansSerif',     'modern', 'Philosopher – Elegant Unicode'],
 
-  // ✍️ Handwriting – Personal & casual
+    // ✍️ Handwriting
-  Pacifico:         { transform: createTransform('scriptBold'),    category: 'handwriting', description: 'Pacifico – Lockerer Pinsel Bold Script Unicode' },
+    Pacifico:         ['scriptBold',    'handwriting', 'Pacifico – Lockerer Pinsel Bold Script Unicode'],
-  Sacramento:       { transform: createTransform('scriptBold'),    category: 'handwriting', description: 'Sacramento – Retro-Handlettering Bold Script Unicode' },
+    Sacramento:       ['scriptBold',    'handwriting', 'Sacramento – Retro-Handlettering Bold Script Unicode'],
-  Caveat:           { transform: createTransform('scriptBold'),    category: 'handwriting', description: 'Caveat – Natural Handwriting Bold Script Unicode' },
+    Caveat:           ['scriptBold',    'handwriting', 'Caveat – Natural Handwriting Bold Script Unicode'],
-  'Dancing Script': { transform: createTransform('scriptBold'),    category: 'handwriting', description: 'Dancing Script – Lebhafte Kursive Bold Script Unicode' },
+    'Dancing Script': ['scriptBold',    'handwriting', 'Dancing Script – Lebhafte Kursive Bold Script Unicode'],
-  'Indie Flower':   { transform: createTransform('scriptBold'),    category: 'handwriting', description: 'Indie Flower – Verspieltes Bold Script Unicode' },
+    'Indie Flower':   ['scriptBold',    'handwriting', 'Indie Flower – Verspieltes Bold Script Unicode'],
-  'Amatic SC':      { transform: createTransform('scriptBold'),    category: 'handwriting', description: 'Amatic SC – Skizzenartiges Bold Script Unicode' },
+    'Amatic SC':      ['scriptBold',    'handwriting', 'Amatic SC – Skizzenartiges Bold Script Unicode'],
-  'Kaushan Script': { transform: createTransform('scriptBold'),    category: 'handwriting', description: 'Kaushan Script – Fettere Kursive Bold Script Unicode' },
+    'Kaushan Script': ['scriptBold',    'handwriting', 'Kaushan Script – Fettere Kursive Bold Script Unicode'],
+    'Architects Daughter': ['scriptBold','handwriting', 'Architects Daughter – Skizzenhafte Handschrift Unicode'],
+    Neucha:           ['scriptBold',    'handwriting', 'Neucha – Persönlich und kantig Unicode'],
+    'Great Vibes':    ['scriptBold',    'handwriting', 'Great Vibes – Elegante Kalligraphie Unicode'],
+    Satisfy:          ['scriptBold',    'handwriting', 'Satisfy – Weiche Script Unicode'],
+    Yellowtail:       ['scriptBold',    'handwriting', 'Yellowtail – Vintage Script Unicode'],
+    'Gloria Hallelujah': ['scriptBold', 'handwriting', 'Gloria Hallelujah – Lebendige Handschrift Unicode'],
 
-  // 🧑‍🎤 Statement – Bold & eye-catching
+    // 🧑‍🎤 Statement
-  Oswald:                     { transform: createTransform('sansSerifBold'), category: 'statement', description: 'Oswald – Bold Grotesk Unicode' },
+    Oswald:                     ['sansSerifBold', 'statement', 'Oswald – Bold Grotesk Unicode'],
-  'Bebas Neue':               { transform: createTransform('fullwidth'),   category: 'statement', description: 'Bebas Neue – Fullwidth Caps Unicode' },
+    'Bebas Neue':               ['fullwidth',     'statement', 'Bebas Neue – Fullwidth Caps Unicode'],
-  Anton:                      { transform: createTransform('fullwidth'),   category: 'statement', description: 'Anton – Plakative Fullwidth Unicode' },
+    Ultra:                      ['sansSerifBold', 'statement', 'Ultra – Kompakte Bold Unicode'],
-  Ultra:                      { transform: createTransform('sansSerifBold'), category: 'statement', description: 'Ultra – Kompakte Bold Unicode' },
+    'Stint Ultra Condensed':    ['sansSerifBold', 'statement', 'Stint Ultra Condensed – Kompakte Bold Unicode'],
-  'Stint Ultra Condensed':    { transform: createTransform('sansSerifBold'), category: 'statement', description: 'Stint Ultra Condensed – Kompakte Bold Unicode' },
+    'Playfair Display':         ['scriptBold',    'statement', 'Playfair Display – Elegante Bold Script Unicode'],
-  'Playfair Display':         { transform: createTransform('scriptBold'),   category: 'statement', description: 'Playfair Display – Elegante Bold Script Unicode' },
+    'Abril Fatface':            ['scriptBold',    'statement', 'Abril Fatface – Fettere Bold Script Unicode'],
-  'Abril Fatface':            { transform: createTransform('scriptBold'),   category: 'statement', description: 'Abril Fatface – Fettere Bold Script Unicode' },
+    'Permanent Marker':         ['scriptBold',    'statement', 'Permanent Marker – Marker-Style Unicode'],
+    'Alfa Slab One':            ['fullwidth',     'statement', 'Alfa Slab One – Slab Serif Heavy Unicode'],
+    'Black Ops One':            ['fullwidth',     'statement', 'Black Ops One – Military Display Unicode'],
+    'Germania One':             ['frakturBold',   'statement', 'Germania One – Oldstyle Fraktur Unicode'],
+    'Holtwood One SC':          ['fullwidth',     'statement', 'Holtwood One SC – Klassisch Bold Small Caps Unicode'],
+    Courgette:                  ['scriptBold',    'statement', 'Courgette – Verspieltes Script Unicode'],
 
-  // 🚀 Futuristic – Tech & gaming
+    // 🚀 Futuristic
-  Exo:                        { transform: createTransform('sansSerif'),   category: 'futuristic', description: 'Exo – Tech Grotesk Unicode' },
+    Exo:                        ['sansSerif',     'futuristic', 'Exo – Tech Grotesk Unicode'],
-  Orbitron:                   { transform: createTransform('monospace'),   category: 'futuristic', description: 'Orbitron – Sci-Fi Monospace Unicode' },
+    Orbitron:                   ['monospace',     'futuristic', 'Orbitron – Sci-Fi Monospace Unicode'],
-  Audiowide:                  { transform: createTransform('monospace'),   category: 'futuristic', description: 'Audiowide – Rundes Monospace Unicode' },
+    Audiowide:                  ['monospace',     'futuristic', 'Audiowide – Rundes Monospace Unicode'],
-  Rajdhani:                   { transform: createTransform('monospace'),   category: 'futuristic', description: 'Rajdhani – Digital Monospace Unicode' },
+    Rajdhani:                   ['monospace',     'futuristic', 'Rajdhani – Digital Monospace Unicode'],
-  'Space Mono':               { transform: createTransform('monospace'),   category: 'futuristic', description: 'Space Mono – Tech Monospace Unicode' },
+    'Space Mono':               ['monospace',     'futuristic', 'Space Mono – Tech Monospace Unicode'],
-  Questrial:                  { transform: createTransform('sansSerif'),   category: 'futuristic', description: 'Questrial – Clean Sans-Serif Unicode' },
+    Questrial:                  ['sansSerif',     'futuristic', 'Questrial – Clean Sans-Serif Unicode'],
+    'Syncopate':                ['monospace',     'futuristic', 'Syncopate – Techno Unicode'],
+    'Unica One':                ['monospace',     'futuristic', 'Unica One – Monospace Mix Unicode'],
+    'Italiana':                 ['sansSerif',     'futuristic', 'Italiana – Futuristisch Serif Unicode'],
+    'Staatliches':              ['monospace',     'futuristic', 'Staatliches – Moderne Grotesk Unicode'],
 
-  // 🧢 Aesthetic – Retro & Instagram vibes
+    // 🧢 Aesthetic
-  'Press Start 2P':           { transform: createTransform('monospace'),   category: 'aesthetic', description: 'Press Start 2P – Pixel Monospace Unicode' },
+    'Press Start 2P':           ['monospace',     'aesthetic', 'Press Start 2P – Pixel Monospace Unicode'],
-  Righteous:                  { transform: createTransform('frakturBold'), category: 'aesthetic', description: 'Righteous – Stylische Bold Fraktur Unicode' },
+    Righteous:                  ['frakturBold',   'aesthetic', 'Righteous – Stylische Bold Fraktur Unicode'],
-  'Metal Mania':              { transform: createTransform('scriptBold'),  category: 'aesthetic', description: 'Metal Mania – Fettere Script Unicode' }
+    'Metal Mania':              ['scriptBold',    'aesthetic', 'Metal Mania – Fettere Script Unicode'],
-};
+    'Alegreya':                 ['frakturBold',   'aesthetic', 'Alegreya – Literatur Serif Unicode'],
-
+    'Spectral':                 ['frakturBold',   'aesthetic', 'Spectral – Editorial Serif Unicode'],
-// Hilfsfunktionen
+    'Fjalla One':               ['sansSerifBold', 'aesthetic', 'Fjalla One – Headline Sans Unicode'],
-export const getPopularFonts = () => Object.keys(fontTransforms).slice(0, 10);
+    'Glass Antiqua':            ['scriptBold',    'aesthetic', 'Glass Antiqua – Zarte Antiqua Script Unicode'],
-export const getFontsByCategory = (category) => (
+    'Cinzel Decorative':        ['scriptBold',    'aesthetic', 'Cinzel Decorative – Klassische Zier-Serif Unicode'],
-  category === 'all'
+    'Andika':                   ['sansSerif',     'aesthetic', 'Andika – Leserlich Unicode'],
-    ? Object.keys(fontTransforms)
+    'Almendra':                 ['scriptBold',    'aesthetic', 'Almendra – Historische Handschrift Unicode'],
-    : Object.keys(fontTransforms).filter(f => fontTransforms[f].category === category)
+  }).map(([name, [block, category, description]]) => [
+    name,
+    {
+      transform: createTransform(block),
+      category,
+      description,
+      className: `font-${name.toLowerCase().replace(/\s+/g, '')}`,
+    },
+  ])
 );
 
+// 🔝 Neue transformText-Funktion – gibt transformierten Text **und** Tailwind-Klasse zurück
 export const transformText = (text, fontName) => {
   const font = fontTransforms[fontName];
-  if (!font || !text) return text;
+  if (!font || !text) return { transformed: text, fontClassName: '' };
-  return font.transform(text);
+  return {
+    transformed: font.transform(text),
+    fontClassName: font.className,
+  };
 };
+
+// Weitere Helfer
+export const getPopularFonts = () => Object.keys(fontTransforms).slice(0, 10);
+
+export const getFontsByCategory = (category) =>
+  category === 'all'
+    ? Object.keys(fontTransforms)
+    : Object.keys(fontTransforms).filter(
+        (f) => fontTransforms[f].category === category
+      );

components/ui/FontCard.jsx

@@ -4,8 +4,9 @@ import { Card } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Copy, Check, Heart, Share2, Info } from "lucide-react";
-import { fontTransforms } from "../fontTransforms";
+import { transformText, fontTransforms } from "../fontTransforms";
 import { getFontData } from "@/lib/fonts";
+import fontMap from "@/lib/tailwind-font-map";
 
 export default function FontCard({
   fontName,
@@ -19,12 +20,20 @@ export default function FontCard({
 
   const fontInfo = fontTransforms[fontName];
   const fontData = getFontData(fontName);
-  const displayText = transformedText || "Hallo Instagram!";
+  const fontKey = fontName.toLowerCase().replace(/\s+/g, "");
+  const fontVarName = fontMap[fontKey];
+  const fontVar = fontVarName ? { fontFamily: `var(${fontVarName})` } : {};
+  const fontClass = fontData?.className || "";
+
+  const rawText = "Hallo Instagram!";
+  const transformed = transformText(rawText, fontName);
+  const finalText = transformed?.transformed || rawText;
+  const copyText = transformed?.transformed || rawText;
 
   const handleCopy = () => {
     if (navigator.clipboard && window.isSecureContext) {
       navigator.clipboard
-        .writeText(displayText)
+        .writeText(copyText)
         .then(() => flashCopied())
         .catch(() => fallbackCopy());
     } else {
@@ -39,7 +48,7 @@ export default function FontCard({
 
   const fallbackCopy = () => {
     const textarea = document.createElement("textarea");
-    textarea.value = displayText;
+    textarea.value = copyText;
     textarea.setAttribute("readonly", "");
     textarea.style.position = "fixed";
     textarea.style.top = "0";
@@ -69,7 +78,7 @@ export default function FontCard({
     try {
       await navigator.share({
         title: `FancyText – ${fontName}`,
-        text: displayText,
+        text: copyText,
         url: window.location.href,
       });
     } catch (err) {
@@ -124,10 +133,10 @@ export default function FontCard({
 
           <input
             type="text"
-            value={displayText}
+            value={finalText}
             readOnly
-            className={`${fontData.className} text-2xl md:text-3xl mb-6 p-4 bg-gray-50 rounded-xl text-center text-gray-800 min-h-[80px] w-full select-all border-0 focus:ring-0`}
+            className={`${fontClass} text-2xl md:text-3xl mb-6 p-4 bg-gray-50 rounded-xl text-center text-gray-800 min-h-[80px] w-full select-all border-0 focus:ring-0`}
-            style={{ lineHeight: "1.2" }}
+            style={{ ...fontVar, lineHeight: "1.2" }}
           />
 
           <Button

lib/fonts.js

@@ -1,153 +1,69 @@
-// 1) Google‑Fonts Platzhalter
+// lib/fonts.js
-export const inter = { className: "", variable: "--font-inter" };
-export const roboto = { className: "", variable: "--font-roboto" };
-export const openSans = { className: "", variable: "--font-opensans" };
-export const montserrat = { className: "", variable: "--font-montserrat" };
-export const raleway = { className: "", variable: "--font-raleway" };
-export const poppins = { className: "", variable: "--font-poppins" };
-export const manrope = { className: "", variable: "--font-manrope" };
-export const dmSans = { className: "", variable: "--font-dmsans" };
-export const plusJakartaSans = {
-  className: "",
-  variable: "--font-plusjakarta",
-};
-export const spaceGrotesk = { className: "", variable: "--font-spacegrotesk" };
 
-export const dancingScript = {
-  className: "",
-  variable: "--font-dancingscript",
-};
-export const pacifico = { className: "", variable: "--font-pacifico" };
-export const caveat = { className: "", variable: "--font-caveat" };
-export const indieFlower = { className: "", variable: "--font-indieflower" };
-export const greatVibes = { className: "", variable: "--font-greatvibes" };
-export const sacramento = { className: "", variable: "--font-sacramento" };
-export const alexBrush = { className: "", variable: "--font-alexbrush" };
-export const amaticSC = { className: "", variable: "--font-amaticsc" };
-export const marckScript = { className: "", variable: "--font-marckscript" };
-export const protestRevolution = {
-  className: "",
-  variable: "--font-protestrevolution",
-};
-
-export const anton = { className: "", variable: "--font-anton" };
-export const bebasNeue = { className: "", variable: "--font-bebasneue" };
-export const oswald = { className: "", variable: "--font-oswald" };
-export const bangers = { className: "", variable: "--font-bangers" };
-export const ultra = { className: "", variable: "--font-ultra" };
-export const abrilFatface = { className: "", variable: "--font-abrilfatface" };
-export const fjallaOne = { className: "", variable: "--font-fjallaone" };
-export const fredokaOne = { className: "", variable: "--font-fredokaone" };
-export const luckiestGuy = { className: "", variable: "--font-luckiestguy" };
-export const fugazOne = { className: "", variable: "--font-fugazone" };
-export const shrikhand = { className: "", variable: "--font-shrikhand" };
-export const chango = { className: "", variable: "--font-chango" };
-export const gravitasOne = { className: "", variable: "--font-gravitasone" };
-export const coiny = { className: "", variable: "--font-coiny" };
-export const quicksand = { className: "", variable: "--font-quicksand" };
-
-export const orbitron = { className: "", variable: "--font-orbitron" };
-export const zenDots = { className: "", variable: "--font-zendots" };
-export const audiowide = { className: "", variable: "--font-audiowide" };
-export const exo2 = { className: "", variable: "--font-exo2" };
-export const rajdhani = { className: "", variable: "--font-rajdhani" };
-export const syncopate = { className: "", variable: "--font-syncopate" };
-export const pressStart2p = { className: "", variable: "--font-pressstart2p" };
-export const shareTechMono = {
-  className: "",
-  variable: "--font-sharetechmono",
-};
-
-export const playfairDisplay = {
-  className: "",
-  variable: "--font-playfairdisplay",
-};
-export const cinzel = { className: "", variable: "--font-cinzel" };
-export const italiana = { className: "", variable: "--font-italiana" };
-export const youngSerif = { className: "", variable: "--font-youngserif" };
-export const caprasimo = { className: "", variable: "--font-caprasimo" };
-export const righteous = { className: "", variable: "--font-righteous" };
-export const luxuriousRoman = {
-  className: "",
-  variable: "--font-luxuriousroman",
-};
-
-export const vt323 = { className: "", variable: "--font-vt323" };
-export const neonderthaw = { className: "", variable: "--font-neonderthaw" };
-
-// 2) System‑Fonts
-export const systemFonts = {
-  helvetica: { className: "font-helvetica", variable: "--font-helvetica" },
-  arial: { className: "font-arial", variable: "--font-arial" },
-  comicSans: { className: "font-comicsans", variable: "--font-comicsans" },
-};
-
-// 3) Pseudo‑Fonts
-export const pseudoFonts = {
-  bubble: { className: "", variable: "--font-bubble" },
-  glitch: { className: "", variable: "--font-glitch" },
-  wide: { className: "", variable: "--font-wide" },
-  upsideDown: { className: "", variable: "--font-upsidedown" },
-  strikethrough: { className: "", variable: "--font-strikethrough" },
-  underline: { className: "", variable: "--font-underline" },
-};
-
-// Zusammenfassung aller Fonts
 export const fonts = {
-  Inter: inter,
+  montserrat: "font-montserrat",
-  Roboto: roboto,
+  opensans: "font-opensans",
-  Open_Sans: openSans,
+  roboto: "font-roboto",
-  Montserrat: montserrat,
+  lato: "font-lato",
-  Raleway: raleway,
+  raleway: "font-raleway",
-  Poppins: poppins,
+  poppins: "font-poppins",
-  Manrope: manrope,
+  worksans: "font-worksans",
-  DM_Sans: dmSans,
+  jost: "font-jost",
-  Plus_Jakarta_Sans: plusJakartaSans,
+  notosans: "font-notosans",
-  Space_Grotesk: spaceGrotesk,
+  quicksand: "font-quicksand",
-  Dancing_Script: dancingScript,
+  averialibre: "font-averialibre",
-  Pacifico: pacifico,
+  philosopher: "font-philosopher",
-  Caveat: caveat,
+
-  Indie_Flower: indieFlower,
+  pacifico: "font-pacifico",
-  Great_Vibes: greatVibes,
+  caveat: "font-caveat",
-  Sacramento: sacramento,
+  sacramento: "font-sacramento",
-  Alex_Brush: alexBrush,
+  dancingscript: "font-dancingscript",
-  Amatic_SC: amaticSC,
+  indieflower: "font-indieflower",
-  Marck_Script: marckScript,
+  amatic: "font-amatic",
-  Protest_Revolution: protestRevolution,
+  kaushan: "font-kaushan",
-  Anton: anton,
+  architects: "font-architects",
-  Bebas_Neue: bebasNeue,
+  neucha: "font-neucha",
-  Oswald: oswald,
+  greatvibes: "font-greatvibes",
-  Bangers: bangers,
+  satisfy: "font-satisfy",
-  Ultra: ultra,
+  yellowtail: "font-yellowtail",
-  Abril_Fatface: abrilFatface,
+  gloria: "font-gloria",
-  Fjalla_One: fjallaOne,
+  courgette: "font-courgette",
-  Fredoka_One: fredokaOne,
+  almendra: "font-almendra",
-  Luckiest_Guy: luckiestGuy,
+
-  Fugaz_One: fugazOne,
+  oswald: "font-oswald",
-  Shrikhand: shrikhand,
+  bebasneue: "font-bebasneue",
-  Chango: chango,
+
-  Gravitas_One: gravitasOne,
+  ultra: "font-ultra",
-  Coiny: coiny,
+  stint: "font-stint",
-  Quicksand: quicksand,
+  playfair: "font-playfair",
-  Orbitron: orbitron,
+  abril: "font-abril",
-  Zen_Dots: zenDots,
+  permanentmarker: "font-permanentmarker",
-  Audiowide: audiowide,
+  alfaslab: "font-alfaslab",
-  Exo_2: exo2,
+  blackops: "font-blackops",
-  Rajdhani: rajdhani,
+  germania: "font-germania",
-  Syncopate: syncopate,
+  holtwood: "font-holtwood",
-  Press_Start_2P: pressStart2p,
+
-  Share_Tech_Mono: shareTechMono,
+  exo: "font-exo",
-  Playfair_Display: playfairDisplay,
+  orbitron: "font-orbitron",
-  Cinzel: cinzel,
+  audiowide: "font-audiowide",
-  Italiana: italiana,
+  rajdhani: "font-rajdhani",
-  Young_Serif: youngSerif,
+  spacemono: "font-spacemono",
-  Caprasimo: caprasimo,
+  questrial: "font-questrial",
-  Righteous: righteous,
+  syncopate: "font-syncopate",
-  Luxurious_Roman: luxuriousRoman,
+  unicaone: "font-unicaone",
-  VT323: vt323,
+  italiana: "font-italiana",
-  Neonderthaw: neonderthaw,
+  staatliches: "font-staatliches",
-  ...systemFonts,
+
-  ...pseudoFonts,
+  pressstart2p: "font-pressstart2p",
+  righteous: "font-righteous",
+  metalmania: "font-metalmania",
+  alegreya: "font-alegreya",
+  spectral: "font-spectral",
+  fjallaone: "font-fjallaone",
+  glassantiqua: "font-glassantiqua",
+  cinzeldecorative: "font-cinzeldecorative",
+  andika: "font-andika",
 };
 
-export const getFontData = (key) => fonts[key] ?? inter;
+export const getFontData = (key) =>
+  fonts[key?.toLowerCase()] ?? fonts["montserrat"];

lib/tailwind‑font‑map.js

@@ -1,14 +1,68 @@
 /**
  * Enthält **nur** die CSS‑Variablen‑Namen, die next/font im Browser setzt.
- * In fonts.js werden sie erzeugt, hier referenzieren wir sie nur.
+ * In fonts.js oder per @font-face werden sie erzeugt – hier referenzieren wir sie.
  */
+
 export default {
   montserrat: "--font-montserrat",
-  bebasneue: "--font-bebasneue",
+  lato: "--font-lato",
+  raleway: "--font-raleway",
+  poppins: "--font-poppins",
+  opensans: "--font-opensans",
+  roboto: "--font-roboto",
+  worksans: "--font-worksans",
+  notosans: "--font-notosans",
+  jost: "--font-jost",
+  quicksand: "--font-quicksand",
+  averialibre: "--font-averialibre",
+  philosopher: "--font-philosopher",
+
   pacifico: "--font-pacifico",
+  sacramento: "--font-sacramento",
   caveat: "--font-caveat",
-  fredokaone: "--font-fredokaone",
+  dancingscript: "--font-dancingscript",
-  playfair: "--font-playfair",
+  indieflower: "--font-indieflower",
-  vt323: "--font-vt323",
+  amaticsc: "--font-amatic",
-  // … alle weiteren Fonts, die du brauchst
+  kaushanscript: "--font-kaushan",
+  architectsdaughter: "--font-architects",
+  neucha: "--font-neucha",
+  greatvibes: "--font-greatvibes",
+  satisfy: "--font-satisfy",
+  yellowtail: "--font-yellowtail",
+  gloriahallelujah: "--font-gloria",
+
+  oswald: "--font-oswald",
+  bebasneue: "--font-bebasneue",
+  ultra: "--font-ultra",
+  stintultracondensed: "--font-stint",
+  playfairdisplay: "--font-playfair",
+  abrilfatface: "--font-abril",
+  permanentmarker: "--font-permanentmarker",
+  alfaslabone: "--font-alfaslab",
+  blackopsone: "--font-blackops",
+  germaniaone: "--font-germania",
+  holtwoodonesc: "--font-holtwood",
+  courgette: "--font-courgette",
+
+  exo: "--font-exo",
+  orbitron: "--font-orbitron",
+  audiowide: "--font-audiowide",
+  rajdhani: "--font-rajdhani",
+  spacemono: "--font-spacemono",
+  questrial: "--font-questrial",
+  syncopate: "--font-syncopate",
+  unicaone: "--font-unicaone",
+  italiana: "--font-italiana",
+  staatliches: "--font-staatliches",
+
+  pressstart2p: "--font-pressstart2p",
+  righteous: "--font-righteous",
+  metalmania: "--font-metalmania",
+  alegreya: "--font-alegreya",
+  spectral: "--font-spectral",
+  fjallaone: "--font-fjallaone",
+  glassantiqua: "--font-glassantiqua",
+  cinzeldecorative: "--font-cinzeldecorative",
+  andika: "--font-andika",
+  almendra: "--font-almendra",
 };

next.config.js

@@ -1,9 +1,15 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  // Deine sonstigen Next‑Optionen, z.B.:
+  experimental: {
-  // reactStrictMode: true,
+    fontLoaders: [
-  // images: { domains: [...] },
+      {
-  // rewrites: async () => [ ... ],
+        loader: "@next/font/google",
+        options: {
+          subsets: ["latin"],
+        },
+      },
+    ],
+  },
 };
 
 module.exports = nextConfig;

pages/_app.js

@@ -1,10 +1,10 @@
 // pages/_app.jsx
 import "@/styles/tailwind.build.css"; // dein Tailwind‑Build
-
 import { fonts } from "@/lib/fonts";
 
-// Alle CSS‑Variablen aus deinen next/font‑Loaders, damit die Utilities greifen
+// CSS-Variablen für alle Fonts aus next/font/google
 const allFontVars = Object.values(fonts)
+  .filter((f) => f?.variable)
   .map((f) => f.variable)
   .join(" ");
 

pages/_document.js

@@ -14,10 +14,18 @@ export default class MyDocument extends Document {
             crossOrigin=""
           />
 
-          {/* Alle 30 Google‑Fonts */}
+          {/* Google Fonts – ALLE 60 Fonts */}
           <link
             rel="stylesheet"
-            href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Roboto:wght@100..900&family=Open+Sans&family=Montserrat:wght@100..900&family=Raleway:wght@100..900&family=Poppins:wght@100..900&family=Manrope:wght@100..700&family=Dancing+Script&family=Pacifico&family=Caveat&family=Indie+Flower&family=Great+Vibes&family=Sacramento&family=Alex+Brush&family=Anton&family=Bebas+Neue&family=Oswald:wght@200..700&family=Bangers&family=Abril+Fatface&family=Fredoka+One&family=Luckiest+Guy&family=Orbitron&family=Audiowide&family=Exo+2&family=Rajdhani&family=Syncopate&family=Press+Start+2P&family=Share+Tech+Mono&family=Playfair+Display&family=Cinzel&family=Italiana&family=Young+Serif&family=Caprasimo&family=Righteous&family=Luxurious+Roman&family=VT323&family=Neonderthaw&display=swap"
+            href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Roboto&family=Open+Sans&family=Montserrat:wght@100..900&family=Raleway:wght@100..900&family=Poppins:wght@100..900&family=Manrope:wght@100..700&family=Jost:wght@100..900&family=Quicksand&family=Noto+Sans&family=Syncopate&family=Orbitron&family=Work+Sans&family=Spectral&family=Philosopher&family=Alegreya&family=Holtwood+One+SC&family=Italiana&family=Almendra&family=Cinzel+Decorative&family=Staatliches&family=Averia+Libre&family=Germania+One&display=swap"
+          />
+          <link
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/css2?family=Pacifico&family=Great+Vibes&family=Courgette&family=Architects+Daughter&family=Neucha&family=Satisfy&family=Yellowtail&family=Indie+Flower&family=Gloria+Hallelujah&family=Alex+Brush&family=Dancing+Script&family=Kaushan+Script&family=Sacramento&family=Amatic+SC&family=Caveat&display=swap"
+          />
+          <link
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Ultra&family=Oswald:wght@200..700&family=Playfair+Display&family=Abril+Fatface&family=Black+Ops+One&family=Righteous&family=Metal+Mania&family=Press+Start+2P&family=Stint+Ultra+Condensed&family=Exo&family=Audiowide&family=Rajdhani&family=Questrial&family=Space+Mono&family=Unica+One&family=Glass+Antiqua&family=Fjalla+One&family=Bungee&family=Andika&family=Alfa+Slab+One&family=Permanent+Marker&display=swap"
           />
         </Head>
         <body>