Shirt-King Preis\u00fcbersicht<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@600;700;800&family=Open+Sans:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.7.2\/css\/all.min.css\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\">\n <style>\n html { scroll-behavior: smooth; }\n * { margin: 0; padding: 0; box-sizing: border-box; }\n\n :root {\n --bg: #f4f7fb;\n --surface: #ffffff;\n --surface-strong: #ffffff;\n --surface-muted: #f2f7ff;\n --text: #333333;\n --muted: #667085;\n --line: #d9e2ef;\n --brand: #0056b3;\n --brand-dark: #00418a;\n --cta: #2fbcd5;\n --cta-dark: #2098ad;\n --accent: #1f2937;\n --shadow: 0 12px 30px rgba(15, 23, 42, 0.08);\n --radius-xl: 16px;\n --radius-lg: 10px;\n --radius-md: 8px;\n }\n\n body {\n font-family: \"Open Sans\", \"Segoe UI\", sans-serif;\n color: var(--text);\n background:\n radial-gradient(circle at top right, rgba(47, 188, 213, 0.14), transparent 24%),\n linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);\n min-height: 100vh;\n padding: 24px;\n }\n\n h1, h2, h3, .tab, .choice-pill, .highlight-value, .summary-grand strong {\n font-family: \"Montserrat\", \"Open Sans\", sans-serif;\n }\n\n .container {\n max-width: 1440px;\n margin: 0 auto;\n }\n\n .hero-panel,\n .calculator-card,\n .calc-summary,\n .catalog-shell,\n .discount-shell {\n background: var(--surface);\n border: 1px solid var(--line);\n border-radius: var(--radius-xl);\n box-shadow: var(--shadow);\n }\n\n .hero-panel {\n padding: 26px;\n margin-bottom: 18px;\n }\n\n .hero-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 24px;\n }\n\n .hero-copy-block {\n flex: 1;\n min-width: 0;\n }\n\n .brand-mark {\n display: inline-flex;\n align-items: center;\n margin-bottom: 14px;\n padding: 4px 0;\n }\n\n .brand-mark-text {\n font-size: clamp(1.9rem, 4vw, 3rem);\n font-weight: 800;\n letter-spacing: 0.02em;\n line-height: 1;\n color: var(--cta);\n text-transform: uppercase;\n }\n\n .hero-title {\n font-size: clamp(1.45rem, 2.4vw, 2rem);\n line-height: 1.04;\n text-transform: uppercase;\n letter-spacing: 0.03em;\n max-width: 14ch;\n margin-bottom: 8px;\n }\n\n .hero-copy {\n color: var(--muted);\n font-size: 0.96rem;\n line-height: 1.45;\n max-width: 58ch;\n margin-bottom: 16px;\n }\n\n .hero-highlights {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 10px;\n width: min(100%, 520px);\n }\n\n .highlight {\n padding: 14px;\n border-radius: var(--radius-lg);\n background: var(--surface-strong);\n border: 1px solid var(--line);\n min-width: 0;\n }\n\n .highlight-link {\n text-decoration: none;\n transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;\n }\n\n .highlight-link:hover {\n transform: translateY(-2px);\n border-color: var(--cta);\n box-shadow: 0 10px 24px rgba(47, 188, 213, 0.16);\n }\n\n .highlight-value {\n font-size: clamp(1.2rem, 2vw, 1.65rem);\n font-weight: 700;\n color: var(--accent);\n }\n\n .highlight-label {\n color: var(--muted);\n margin-top: 4px;\n font-size: 0.92rem;\n }\n\n .calculator-shell {\n display: grid;\n grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr);\n gap: 18px;\n margin-bottom: 18px;\n }\n\n .calculator-card {\n padding: 22px;\n display: flex;\n flex-direction: column;\n gap: 14px;\n background:\n linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 255, 0.98)),\n var(--surface);\n }\n\n .calculator-card h2 {\n font-size: 1.25rem;\n line-height: 1.1;\n text-transform: uppercase;\n }\n\n .calculator-card p {\n color: var(--muted);\n line-height: 1.45;\n }\n\n .calculator-form {\n display: grid;\n gap: 12px;\n }\n\n .form-field {\n display: grid;\n gap: 8px;\n }\n\n .form-field label,\n .summary-label {\n font-size: 0.88rem;\n font-weight: 700;\n color: var(--accent);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n }\n\n .form-field input,\n .form-field select,\n .search-box input {\n width: 100%;\n border: 1px solid var(--line);\n background: var(--surface-strong);\n color: var(--text);\n border-radius: 12px;\n padding: 14px 16px;\n font-size: 1rem;\n outline: none;\n transition: border-color 0.2s ease, box-shadow 0.2s ease;\n }\n\n .form-field input:focus,\n .form-field select:focus,\n .search-box input:focus {\n border-color: rgba(47, 188, 213, 0.8);\n box-shadow: 0 0 0 4px rgba(47, 188, 213, 0.16);\n }\n\n .choice-group {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 10px;\n }\n\n .choice-group input {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n }\n\n .choice-pill {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 54px;\n padding: 14px;\n border-radius: 14px;\n border: 1px solid var(--line);\n background: var(--surface-strong);\n color: var(--muted);\n font-weight: 700;\n cursor: pointer;\n transition: all 0.2s ease;\n }\n\n .choice-group input:checked + .choice-pill {\n border-color: var(--cta);\n background: rgba(47, 188, 213, 0.14);\n color: #0f4e59;\n }\n\n .choice-group input:disabled + .choice-pill {\n background: #eef2f7;\n border-color: #d6dce5;\n color: #98a2b3;\n cursor: not-allowed;\n }\n\n .calculator-meta {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n }\n\n .meta-badge {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n border-radius: 999px;\n background: var(--surface-muted);\n border: 1px solid var(--line);\n color: var(--accent);\n font-size: 0.9rem;\n font-weight: 600;\n }\n\n .source-note {\n display: grid;\n gap: 6px;\n padding: 10px 14px;\n border-radius: var(--radius-md);\n background: var(--surface-muted);\n border: 1px solid var(--line);\n color: var(--muted);\n font-size: 0.92rem;\n line-height: 1.5;\n }\n\n .source-note strong { color: var(--accent); }\n\n .source-note.error {\n background: #fff1f2;\n border-color: #f5c2c7;\n color: #b42318;\n }\n\n .source-note.error strong { color: #b42318; }\n\n .calc-summary {\n padding: 18px;\n border-radius: 22px;\n background: #0f172a;\n color: #f8fbff;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n position: relative;\n }\n\n .summary-rows {\n display: grid;\n gap: 10px;\n margin-bottom: 16px;\n }\n\n .summary-row,\n .summary-total,\n .summary-grand {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n }\n\n .summary-row {\n color: rgba(255, 248, 240, 0.76);\n font-size: 0.96rem;\n }\n\n .summary-total {\n padding-top: 12px;\n border-top: 1px solid rgba(255, 248, 240, 0.18);\n font-weight: 700;\n }\n\n .summary-grand {\n margin-top: 16px;\n padding: 16px;\n border-radius: 16px;\n background: linear-gradient(135deg, var(--cta), var(--cta-dark));\n font-weight: 700;\n font-size: 1.06rem;\n transition: box-shadow 0.2s ease, transform 0.2s ease;\n }\n\n .summary-grand strong {\n font-size: 1.35rem;\n }\n\n .summary-grand.pinned {\n position: fixed;\n right: max(24px, calc((100vw - 1440px) \/ 2 + 24px));\n bottom: 24px;\n width: min(420px, calc(100vw - 32px));\n z-index: 30;\n box-shadow: 0 14px 30px rgba(15, 23, 42, 0.22);\n }\n\n .catalog-shell {\n padding: 22px;\n margin-bottom: 24px;\n }\n\n .catalog-header {\n display: flex;\n align-items: end;\n justify-content: space-between;\n gap: 20px;\n margin-bottom: 20px;\n flex-wrap: wrap;\n }\n\n .catalog-header h2 {\n font-size: 1.8rem;\n text-transform: uppercase;\n }\n\n .catalog-header p {\n color: var(--muted);\n margin-top: 6px;\n }\n\n .search-box {\n flex: 1;\n min-width: min(100%, 320px);\n }\n\n .filter-info {\n margin-bottom: 16px;\n color: var(--muted);\n min-height: 1.2em;\n font-size: 0.95rem;\n }\n\n .tabs {\n display: flex;\n gap: 12px;\n margin-bottom: 22px;\n flex-wrap: wrap;\n }\n\n .tab {\n padding: 13px 18px;\n background: var(--surface-muted);\n border: 1px solid transparent;\n border-radius: 999px;\n color: var(--accent);\n cursor: pointer;\n transition: all 0.25s ease;\n font-weight: 700;\n font-size: 0.96rem;\n }\n\n .tab:hover {\n border-color: rgba(47, 188, 213, 0.35);\n transform: translateY(-2px);\n }\n\n .tab.active {\n background: var(--cta);\n color: #083c45;\n border-color: var(--cta);\n }\n\n .tab .count {\n background: rgba(31, 26, 21, 0.08);\n padding: 4px 9px;\n border-radius: 999px;\n font-size: 0.85em;\n margin-left: 8px;\n }\n\n .tab.active .count {\n background: rgba(255, 255, 255, 0.18);\n color: #fff6ec;\n }\n\n .content-section {\n display: none;\n }\n\n .content-section.active {\n display: block;\n }\n\n .price-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n gap: 16px;\n }\n\n .price-card {\n background: var(--surface-strong);\n border-radius: 22px;\n padding: 22px;\n border: 1px solid var(--line);\n transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;\n cursor: pointer;\n }\n\n .price-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 14px 28px rgba(33, 25, 16, 0.08);\n border-color: rgba(47, 188, 213, 0.4);\n }\n\n .price-card.selected {\n border-color: var(--cta);\n box-shadow: 0 0 0 3px rgba(47, 188, 213, 0.16);\n }\n\n .card-tag {\n display: inline-flex;\n margin-bottom: 12px;\n padding: 6px 10px;\n border-radius: 999px;\n background: rgba(47, 188, 213, 0.1);\n color: var(--brand-dark);\n font-size: 0.76rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.06em;\n }\n\n .card-meta {\n margin-top: 12px;\n display: grid;\n gap: 6px;\n color: var(--muted);\n font-size: 0.85rem;\n }\n\n .price-card h3 {\n color: var(--text);\n margin-bottom: 14px;\n font-size: 1.1em;\n line-height: 1.4;\n min-height: 50px;\n }\n\n .price {\n font-size: 1.9em;\n font-weight: bold;\n color: var(--accent);\n margin-bottom: 8px;\n }\n\n .price-note {\n color: var(--muted);\n font-size: 0.88em;\n }\n\n .empty-state {\n text-align: center;\n padding: 60px 20px;\n background: var(--surface-strong);\n border-radius: 20px;\n color: var(--muted);\n border: 1px dashed var(--line);\n }\n\n .empty-state-icon {\n font-size: 4em;\n margin-bottom: 20px;\n }\n\n .discount-shell {\n margin-top: 24px;\n padding: 28px;\n }\n\n .discount-shell h2 {\n font-size: 1.8rem;\n text-transform: uppercase;\n margin-bottom: 10px;\n }\n\n .discount-shell p {\n color: var(--muted);\n line-height: 1.7;\n }\n\n .discount-table {\n width: 100%;\n border-collapse: collapse;\n margin: 20px 0 18px;\n overflow: hidden;\n border-radius: var(--radius-md);\n border: 1px solid var(--line);\n }\n\n .discount-table thead {\n background: var(--surface-muted);\n }\n\n .discount-table th,\n .discount-table td {\n padding: 16px 18px;\n text-align: left;\n border-bottom: 1px solid var(--line);\n }\n\n .discount-table th {\n font-family: \"Montserrat\", \"Open Sans\", sans-serif;\n font-size: 0.92rem;\n text-transform: uppercase;\n color: var(--accent);\n }\n\n .discount-table tbody tr:last-child td {\n border-bottom: none;\n }\n\n .discount-note {\n margin-top: 10px;\n padding: 18px 20px;\n border-radius: var(--radius-md);\n background: var(--surface-muted);\n border: 1px solid var(--line);\n }\n\n .discount-note p + p {\n margin-top: 14px;\n }\n\n @media (max-width: 1100px) {\n body { padding: 18px; }\n .hero-panel, .calculator-card, .calc-summary, .catalog-shell, .discount-shell { padding: 20px; }\n .hero-header, .calculator-shell { grid-template-columns: 1fr; display: grid; }\n .hero-header { gap: 16px; }\n .hero-title { max-width: none; }\n .search-box { width: 100%; min-width: 100%; }\n .catalog-header { align-items: stretch; }\n .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n .summary-grand.pinned {\n right: 18px;\n bottom: 18px;\n width: min(360px, calc(100vw - 36px));\n }\n }\n\n @media (max-width: 768px) {\n body {\n padding: 16px;\n padding-bottom: 92px;\n }\n .hero-panel, .calculator-card, .calc-summary, .catalog-shell, .discount-shell { padding: 18px; }\n .hero-highlights, .choice-group { grid-template-columns: 1fr; }\n .brand-mark-text { font-size: clamp(1.8rem, 9vw, 2.4rem); }\n .hero-header { display: grid; }\n .hero-highlights { width: 100%; }\n .hero-title { font-size: 1.35rem; }\n .highlight-value { font-size: 1.35rem; }\n .meta-badge { width: 100%; justify-content: center; }\n .price-grid { grid-template-columns: 1fr; }\n .price-card { padding: 18px; }\n .catalog-header h2, .discount-shell h2 { font-size: 1.35rem; }\n .search-box input, .form-field select { padding: 13px 14px; }\n .summary-grand.pinned {\n position: fixed;\n left: 16px;\n right: 16px;\n bottom: 16px;\n width: auto;\n margin-top: 0;\n padding: 12px 14px;\n border-radius: 14px;\n box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22);\n z-index: 30;\n font-size: 0.96rem;\n }\n .discount-table, .discount-table thead, .discount-table tbody, .discount-table tr, .discount-table th, .discount-table td {\n display: block; width: 100%;\n }\n .discount-table thead { display: none; }\n .discount-table tr { border-bottom: 1px solid var(--line); }\n .discount-table td { padding: 12px 16px; border-bottom: none; }\n }\n\n @media (max-width: 480px) {\n body {\n padding: 12px;\n padding-bottom: 88px;\n }\n .hero-panel, .calculator-card, .catalog-shell, .discount-shell {\n padding: 16px;\n border-radius: 14px;\n }\n .summary-grand.pinned {\n left: 12px;\n right: 12px;\n bottom: 12px;\n padding: 11px 12px;\n font-size: 0.9rem;\n }\n .summary-grand strong {\n font-size: 1.18rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <section class=\"hero-panel\">\n <div class=\"hero-header\">\n <div class=\"hero-copy-block\">\n <div class=\"brand-mark\" aria-label=\"Shirt-King Logo\">\n <div class=\"brand-mark-text\">SHIRT-KING<\/div>\n <\/div>\n <h2 class=\"hero-title\">CLOUD Preise und Leistungen<\/h2>\n <p class=\"hero-copy\">Netto-Preis\u00fcbersicht f\u00fcr Produkte, Druckoptionen und Versand.<\/p>\n <\/div>\n <div class=\"hero-highlights\">\n <a class=\"highlight highlight-link\" href=\"#katalog\">\n <div class=\"highlight-value\">Katalog<\/div>\n <div class=\"highlight-label\">Zu Produkten und Leistungen<\/div>\n <\/a>\n <a class=\"highlight highlight-link\" href=\"#rabatte\">\n <div class=\"highlight-value\">Rabatt\u00fcbersicht<\/div>\n <div class=\"highlight-label\">Zu den Rabattstufen<\/div>\n <\/a>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"calculator-shell\">\n <div class=\"calculator-card\">\n <div>\n <h2>Produktrechner<\/h2>\n <p>Produkt w\u00e4hlen, Druckseiten festlegen und sofort eine saubere Aufschl\u00fcsselung sehen.<\/p>\n <\/div>\n\n <div class=\"calculator-form\">\n <div class=\"form-field\">\n <label for=\"productSelect\">Produkt<\/label>\n <select id=\"productSelect\"><\/select>\n <\/div>\n\n <div class=\"form-field\">\n <label for=\"shippingSelect\">Versand<\/label>\n <select id=\"shippingSelect\"><\/select>\n <\/div>\n\n <div class=\"form-field\">\n <span class=\"summary-label\">Druckseiten<\/span>\n <div class=\"choice-group\">\n <label>\n <input type=\"radio\" name=\"printSides\" value=\"1\" checked>\n <span class=\"choice-pill\">Einseitig<\/span>\n <\/label>\n <label>\n <input type=\"radio\" id=\"twoSideInput\" name=\"printSides\" value=\"2\">\n <span class=\"choice-pill\">Zweiseitig<\/span>\n <\/label>\n <\/div>\n <\/div>\n\n <div class=\"calculator-meta\">\n <div class=\"meta-badge\"><i class=\"fa-solid fa-print\"><\/i> Druckart: <span id=\"printMethodBadge\">\u2013<\/span><\/div>\n <div class=\"meta-badge\"><i class=\"fa-solid fa-layer-group\"><\/i> Freigabe: <span id=\"printSidesBadge\">\u2013<\/span><\/div>\n <\/div>\n\n <div class=\"source-note\" id=\"priceStatusNote\">\n <div id=\"priceDateLine\"><strong>Stand:<\/strong> <span id=\"priceDateHint\">Live-Daten werden geladen ...<\/span><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"calc-summary\">\n <div class=\"summary-label\">Aufschl\u00fcsselung<\/div>\n <div class=\"summary-rows\" id=\"summaryRows\"><\/div>\n <div class=\"summary-total\">\n <span>Zwischensumme netto<\/span>\n <span id=\"netSubtotal\">0.00\u20ac<\/span>\n <\/div>\n <div class=\"summary-row\" style=\"margin-top: 12px;\">\n <span>MwSt. (19 %)<\/span>\n <span id=\"vatAmount\">0.00\u20ac<\/span>\n <\/div>\n <div class=\"summary-grand\">\n <span>Gesamt inkl. Versand<\/span>\n <strong id=\"grossTotal\">0.00\u20ac<\/strong>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"catalog-shell\" id=\"katalog\">\n <div class=\"catalog-header\">\n <div>\n <h2>Produkte, Optionen und Versand<\/h2>\n <p>Direkt aus mehreren Tabs im Google Sheet geladen.<\/p>\n <\/div>\n\n <div class=\"search-box\">\n <input type=\"text\" id=\"searchInput\" placeholder=\"Suche nach Produkt, Option oder Versand\">\n <\/div>\n <\/div>\n\n <div class=\"filter-info\" id=\"filterInfo\"><\/div>\n\n <div class=\"tabs\">\n <button type=\"button\" class=\"tab active\" onclick=\"switchTab(event, 'rohteile')\">\n Rohteile <span class=\"count\" id=\"countRohteile\">0<\/span>\n <\/button>\n <button type=\"button\" class=\"tab\" onclick=\"switchTab(event, 'optionen')\">\n Optionen <span class=\"count\" id=\"countOptionen\">0<\/span>\n <\/button>\n <button type=\"button\" class=\"tab\" onclick=\"switchTab(event, 'versand')\">\n Versand <span class=\"count\" id=\"countVersand\">0<\/span>\n <\/button>\n <\/div>\n\n <div id=\"rohteile\" class=\"content-section active\">\n <div class=\"price-grid\" id=\"rohteileGrid\"><\/div>\n <\/div>\n\n <div id=\"optionen\" class=\"content-section\">\n <div class=\"price-grid\" id=\"optionenGrid\"><\/div>\n <\/div>\n\n <div id=\"versand\" class=\"content-section\">\n <div class=\"price-grid\" id=\"versandGrid\"><\/div>\n <\/div>\n <\/section>\n\n <section class=\"discount-shell\" id=\"rabatte\">\n <h2>M\u00f6gliche Rabattstufen<\/h2>\n <table class=\"discount-table\">\n <thead>\n <tr>\n <th>Rabattstufe<\/th>\n <th>Dein Mindestumsatz pro Monat bei uns<\/th>\n <th>Rabatt auf Rechnungsbetrag<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <tr><td>I<\/td><td>10.000 EUR<\/td><td>2 %<\/td><\/tr>\n <tr><td>II<\/td><td>15.000 EUR<\/td><td>3 %<\/td><\/tr>\n <tr><td>III<\/td><td>30.000 EUR<\/td><td>4 %<\/td><\/tr>\n <tr><td>IV<\/td><td>ab 40.000 EUR<\/td><td>individuelle Konditionen<\/td><\/tr>\n <\/tbody>\n <\/table>\n <div class=\"discount-note\">\n <p>Bei Erreichen des Mindestumsatzes ist der Rabatt ab dem folgenden Monat g\u00fcltig.<\/p>\n <p><strong>Beispiel:<\/strong> Erreicht ihr im Mai bei uns einen Umsatz in H\u00f6he von 17.000 EUR, erhaltet ihr f\u00fcr alle eure Ums\u00e4tze bei uns ab Juni 3 % Rabatt auf die Rechnungssumme.<\/p>\n <\/div>\n <\/section>\n <\/div>\n\n <script>\n const SHEET_CONFIG = {\n spreadsheetId: \"1HpEjWiz561YbSyUajjsJVeLM_sSYYXeY-BiqsOZwfTk\",\n gids: {\n rohteile: \"0\",\n optionen: \"388398752\",\n versand: \"1004741700\"\n }\n };\n\n const VAT_RATE = 0.19;\n const DEFAULT_OPTION_PRICES = {\n DTG: 5.50,\n DTF: 5.50,\n SUB: 5.50,\n DEFAULT: 5.50\n };\n const DEFAULT_HANDLING_PRICE = 0.69;\n\n let allData = { rohteile: [], optionen: [], versand: [] };\n let filteredData = { rohteile: [], optionen: [], versand: [] };\n\n function escapeHtml(value) {\n return String(value ?? \"\")\n .replace(\/&\/g, \"&\")\n .replace(\/<\/g, \"<\")\n .replace(\/>\/g, \">\")\n .replace(\/\"\/g, \""\")\n .replace(\/'\/g, \"'\");\n }\n\n function getCsvUrl(gid) {\n return `https:\/\/docs.google.com\/spreadsheets\/d\/${SHEET_CONFIG.spreadsheetId}\/export?format=csv&gid=${gid}&ts=${Date.now()}`;\n }\n\n async function fetchCsv(url) {\n const response = await fetch(url, { cache: \"no-store\" });\n if (!response.ok) throw new Error(`HTTP ${response.status}`);\n return response.text();\n }\n\n function parseCSVLine(line) {\n const result = [];\n let current = \"\";\n let inQuotes = false;\n\n for (let i = 0; i < line.length; i++) {\n const char = line[i];\n const next = line[i + 1];\n\n if (char === '\"') {\n if (inQuotes && next === '\"') {\n current += '\"';\n i++;\n } else {\n inQuotes = !inQuotes;\n }\n } else if (char === \",\" && !inQuotes) {\n result.push(current);\n current = \"\";\n } else {\n current += char;\n }\n }\n\n result.push(current);\n return result;\n }\n\n function parsePrice(value) {\n if (value === undefined || value === null || value === \"\") return 0;\n if (String(value).trim().toUpperCase() === \"TBA\") return 0;\n if (String(value).trim().toLowerCase() === \"free\") return 0;\n\n return parseFloat(\n String(value)\n .replace(\"\u20ac\", \"\")\n .replace(\/\\s\/g, \"\")\n .replace(\/\\.\/g, \"\")\n .replace(\",\", \".\")\n ) || 0;\n }\n\n function formatPrice(value) {\n return Number(value || 0).toFixed(2) + \"\u20ac\";\n }\n\n function readablePrintSides(value) {\n const text = String(value || \"\").toLowerCase();\n if (text.includes(\"ein\") && text.includes(\"zwei\")) return \"Ein- oder zweiseitig\";\n if (text.includes(\"einseitig\")) return \"Nur einseitig\";\n if (text.includes(\"zweiseitig\")) return \"Nur zweiseitig\";\n return value || \"Nicht hinterlegt\";\n }\n\n function isSingleOnly(value) {\n const text = String(value || \"\").toLowerCase();\n return text.includes(\"einseitig\") && !text.includes(\"zwei\");\n }\n\n function parseSheet(text, section) {\n const lines = text.split(\/\\r?\\n\/).filter(line => line.trim() !== \"\");\n if (!lines.length) return [];\n\n let headerIndex = 0;\n for (let i = 0; i < Math.min(lines.length, 6); i++) {\n const row = parseCSVLine(lines[i]).map(v => v.trim().toLowerCase());\n const hasName = row.some(v => [\"name\", \"produkt\", \"bezeichnung\", \"artikel\", \"versand\"].includes(v));\n const hasPrice = row.some(v => [\"price\", \"preis\", \"netto\", \"betrag\", \"kosten\"].includes(v));\n if (hasName && hasPrice) {\n headerIndex = i;\n break;\n }\n }\n\n const headers = parseCSVLine(lines[headerIndex]).map(h => h.trim());\n\n const rows = lines.slice(headerIndex + 1).map(line => {\n const values = parseCSVLine(line);\n const row = {};\n headers.forEach((header, index) => {\n row[header] = (values[index] || \"\").trim();\n });\n return row;\n });\n\n if (section === \"rohteile\") {\n return rows.map(row => ({\n name: row[\"Name\"] || row[\"Produkt\"] || row[\"Bezeichnung\"] || \"\",\n price: row[\"Price\"] || row[\"Preis\"] || \"\",\n printType: row[\"Druck\"] || row[\"Druckart\"] || \"\",\n printSides: row[\"Druckseiten\"] || row[\"Seiten\"] || \"\",\n date: row[\"Stand:\"] || row[\"Stand: \"] || row[\"Stand\"] || \"\"\n })).filter(item => item.name);\n }\n\n if (section === \"optionen\") {\n return rows.map(row => ({\n name: row[\"Name\"] || row[\"Produkt\"] || row[\"Bezeichnung\"] || \"\",\n price: row[\"Price\"] || row[\"Preis\"] || \"\",\n date: row[\"Stand:\"] || row[\"Stand: \"] || row[\"Stand\"] || \"\",\n key: (row[\"Key\"] || row[\"calc_key\"] || row[\"Schluessel\"] || \"\").toLowerCase()\n })).filter(item => item.name);\n }\n\n if (section === \"versand\") {\n return rows.map(row => ({\n name: row[\"Name\"] || row[\"Versand\"] || row[\"Bezeichnung\"] || \"\",\n price: row[\"Price\"] || row[\"Preis\"] || \"\",\n date: row[\"Stand:\"] || row[\"Stand: \"] || row[\"Stand\"] || \"\"\n })).filter(item => item.name);\n }\n\n return [];\n }\n\n function switchTab(event, tab) {\n document.querySelectorAll(\".tab\").forEach(el => el.classList.remove(\"active\"));\n document.querySelectorAll(\".content-section\").forEach(el => el.classList.remove(\"active\"));\n event.currentTarget.classList.add(\"active\");\n document.getElementById(tab).classList.add(\"active\");\n }\n\n function getSelectedProduct() {\n const index = parseInt(document.getElementById(\"productSelect\").value || \"0\", 10);\n return filteredData.rohteile[index] || allData.rohteile[0] || null;\n }\n\n function getSelectedShipping() {\n const index = parseInt(document.getElementById(\"shippingSelect\").value || \"0\", 10);\n return allData.versand[index] || allData.versand[0] || null;\n }\n\n function getHandlingPrice() {\n const explicit = allData.optionen.find(item =>\n item.key === \"handling\" || item.name.toLowerCase().includes(\"handling\")\n );\n return explicit ? parsePrice(explicit.price) : DEFAULT_HANDLING_PRICE;\n }\n\n function getPrintOptionPrice(printType) {\n const normalized = String(printType || \"\").toUpperCase();\n const explicit = allData.optionen.find(item => {\n const name = item.name.toLowerCase();\n return (\n item.key === `print-${normalized.toLowerCase()}` ||\n (normalized === \"DTG\" && name.includes(\"dtg\")) ||\n (normalized === \"DTF\" && name.includes(\"dtf\")) ||\n (normalized === \"SUB\" && (name.includes(\"sub\") || name.includes(\"sublimation\")))\n );\n });\n\n if (explicit) return parsePrice(explicit.price);\n return DEFAULT_OPTION_PRICES[normalized] ?? DEFAULT_OPTION_PRICES.DEFAULT;\n }\n\n function filterItems() {\n const searchTerm = document.getElementById(\"searchInput\").value.toLowerCase().trim();\n\n if (!searchTerm) {\n filteredData = {\n rohteile: [...allData.rohteile],\n optionen: [...allData.optionen],\n versand: [...allData.versand]\n };\n document.getElementById(\"filterInfo\").textContent = \"\";\n } else {\n filteredData = {\n rohteile: allData.rohteile.filter(item =>\n item.name.toLowerCase().includes(searchTerm) ||\n String(item.printType || \"\").toLowerCase().includes(searchTerm)\n ),\n optionen: allData.optionen.filter(item =>\n item.name.toLowerCase().includes(searchTerm)\n ),\n versand: allData.versand.filter(item =>\n item.name.toLowerCase().includes(searchTerm)\n )\n };\n\n const total = filteredData.rohteile.length + filteredData.optionen.length + filteredData.versand.length;\n document.getElementById(\"filterInfo\").textContent = `${total} Treffer f\u00fcr \"${searchTerm}\"`;\n }\n\n renderAll();\n populateCalculator();\n updateCalculator();\n }\n\n function updateCounts() {\n document.getElementById(\"countRohteile\").textContent = filteredData.rohteile.length;\n document.getElementById(\"countOptionen\").textContent = filteredData.optionen.length;\n document.getElementById(\"countVersand\").textContent = filteredData.versand.length;\n }\n\n function renderSection(section, items, note, tag) {\n const grid = document.getElementById(`${section}Grid`);\n const activeProductName = getSelectedProduct()?.name;\n\n if (!items.length) {\n grid.innerHTML = `\n <div class=\"empty-state\">\n <div class=\"empty-state-icon\"><i class=\"fa-solid fa-magnifying-glass\"><\/i><\/div>\n <h3>Keine Ergebnisse gefunden<\/h3>\n <p>Versuche einen anderen Suchbegriff.<\/p>\n <\/div>\n `;\n return;\n }\n\n const sortedProducts = filteredData.rohteile;\n\n grid.innerHTML = items.map((item) => {\n const productIndex = sortedProducts.findIndex(product => product.name === item.name);\n\n return `\n <div class=\"price-card ${section === 'rohteile' && activeProductName === item.name ? 'selected' : ''}\"\n ${section === 'rohteile' ? `onclick=\"selectProduct(${productIndex})\"` : ''}>\n <div class=\"card-tag\">${tag}<\/div>\n <h3>${escapeHtml(item.name)}<\/h3>\n <div class=\"price\">${escapeHtml(formatPrice(parsePrice(item.price)))}<\/div>\n <div class=\"price-note\">${note}<\/div>\n ${section === 'rohteile' ? `\n <div class=\"card-meta\">\n <div><i class=\"fa-solid fa-print\"><\/i> Druckart: ${escapeHtml(item.printType || 'Nicht hinterlegt')}<\/div>\n <div><i class=\"fa-solid fa-layer-group\"><\/i> Freigabe: ${escapeHtml(readablePrintSides(item.printSides))}<\/div>\n <\/div>\n ` : ''}\n <\/div>\n `;\n }).join(\"\");\n }\n\n function renderAll() {\n renderSection(\"rohteile\", filteredData.rohteile, \"Rohling netto, Druck und Versand separat.\", \"Rohteil\");\n renderSection(\"optionen\", filteredData.optionen, \"Zusatzkosten netto, passend f\u00fcr Kalkulationen.\", \"Option\");\n renderSection(\"versand\", filteredData.versand, \"Versand netto, wird im Kalkulator direkt eingerechnet.\", \"Versand\");\n updateCounts();\n }\n\n function populateCalculator() {\n const productSelect = document.getElementById(\"productSelect\");\n const shippingSelect = document.getElementById(\"shippingSelect\");\n\n const currentProductValue = productSelect.value;\n const currentShippingValue = shippingSelect.value;\n\n productSelect.innerHTML = filteredData.rohteile.map((item, index) =>\n `<option value=\"${index}\">${escapeHtml(item.name)} - ${formatPrice(parsePrice(item.price))}<\/option>`\n ).join(\"\");\n\n shippingSelect.innerHTML = allData.versand.map((item, index) =>\n `<option value=\"${index}\">${escapeHtml(item.name)} - ${formatPrice(parsePrice(item.price))}<\/option>`\n ).join(\"\");\n\n if (filteredData.rohteile.length) {\n if (currentProductValue !== \"\" && filteredData.rohteile[parseInt(currentProductValue, 10)]) {\n productSelect.value = currentProductValue;\n } else {\n productSelect.value = \"0\";\n }\n }\n\n if (allData.versand.length) {\n if (currentShippingValue !== \"\" && allData.versand[parseInt(currentShippingValue, 10)]) {\n shippingSelect.value = currentShippingValue;\n } else {\n const defaultShippingIndex = allData.versand.findIndex(item => item.name === \"DHL Paket National\");\n shippingSelect.value = String(defaultShippingIndex >= 0 ? defaultShippingIndex : 0);\n }\n }\n }\n\n function syncPrintControls(product) {\n const twoSideInput = document.getElementById(\"twoSideInput\");\n const oneSideInput = document.querySelector('input[name=\"printSides\"][value=\"1\"]');\n const priceStatusNote = document.getElementById(\"priceStatusNote\");\n const priceDateLine = document.getElementById(\"priceDateLine\");\n const singleOnly = isSingleOnly(product.printSides);\n\n twoSideInput.disabled = singleOnly;\n if (singleOnly && twoSideInput.checked) {\n oneSideInput.checked = true;\n }\n\n document.getElementById(\"printMethodBadge\").textContent = product.printType || \"Nicht hinterlegt\";\n document.getElementById(\"printSidesBadge\").textContent = readablePrintSides(product.printSides);\n priceStatusNote.classList.remove(\"error\");\n priceDateLine.innerHTML = `<strong>Stand:<\/strong> <span id=\"priceDateHint\">${escapeHtml(product.date || \"Nicht hinterlegt\")}<\/span>`;\n }\n\n function updateCalculator() {\n const product = getSelectedProduct();\n const shipping = getSelectedShipping();\n\n if (!product || !shipping) {\n document.getElementById(\"summaryRows\").innerHTML = `\n <div class=\"summary-row\">\n <span>Live-Daten<\/span>\n <span>Nicht verf\u00fcgbar<\/span>\n <\/div>\n `;\n return;\n }\n\n syncPrintControls(product);\n\n const sides = parseInt(document.querySelector('input[name=\"printSides\"]:checked').value, 10);\n const productPrice = parsePrice(product.price);\n const printPricePerSide = getPrintOptionPrice(product.printType);\n const printPrice = printPricePerSide * sides;\n const handling = getHandlingPrice();\n const shippingPrice = parsePrice(shipping.price);\n\n const netSubtotal = productPrice + printPrice + handling + shippingPrice;\n const vatAmount = netSubtotal * VAT_RATE;\n const grossTotal = netSubtotal + vatAmount;\n\n const rows = [\n { label: product.name, value: formatPrice(productPrice) },\n { label: `${product.printType || \"Druck\"} ${sides === 1 ? \"einseitig\" : \"zweiseitig\"}`, value: formatPrice(printPrice) },\n { label: \"Handling\", value: formatPrice(handling) },\n { label: shipping.name, value: formatPrice(shippingPrice) }\n ];\n\n document.getElementById(\"summaryRows\").innerHTML = rows.map(row => `\n <div class=\"summary-row\">\n <span>${escapeHtml(row.label)}<\/span>\n <span>${escapeHtml(row.value)}<\/span>\n <\/div>\n `).join(\"\");\n\n document.getElementById(\"netSubtotal\").textContent = formatPrice(netSubtotal);\n document.getElementById(\"vatAmount\").textContent = formatPrice(vatAmount);\n document.getElementById(\"grossTotal\").textContent = formatPrice(grossTotal);\n\n renderAll();\n updatePinnedTotalVisibility();\n }\n\n function selectProduct(index) {\n if (index < 0) return;\n document.getElementById(\"productSelect\").value = String(index);\n updateCalculator();\n }\n\n function updatePinnedTotalVisibility() {\n const totalBar = document.querySelector(\".summary-grand\");\n const catalog = document.getElementById(\"katalog\");\n\n if (!totalBar || !catalog) return;\n\n const catalogTop = catalog.getBoundingClientRect().top;\n if (catalogTop <= 16) {\n totalBar.classList.add(\"pinned\");\n } else {\n totalBar.classList.remove(\"pinned\");\n }\n }\n\n async function loadLiveData() {\n const priceStatusNote = document.getElementById(\"priceStatusNote\");\n\n try {\n const [rohteileCsv, optionenCsv, versandCsv] = await Promise.all([\n fetchCsv(getCsvUrl(SHEET_CONFIG.gids.rohteile)),\n fetchCsv(getCsvUrl(SHEET_CONFIG.gids.optionen)),\n fetchCsv(getCsvUrl(SHEET_CONFIG.gids.versand))\n ]);\n\n allData = {\n rohteile: parseSheet(rohteileCsv, \"rohteile\"),\n optionen: parseSheet(optionenCsv, \"optionen\"),\n versand: parseSheet(versandCsv, \"versand\")\n };\n\n filteredData = {\n rohteile: [...allData.rohteile],\n optionen: [...allData.optionen],\n versand: [...allData.versand]\n };\n\n if (!allData.rohteile.length) throw new Error(\"Keine Rohteile geladen\");\n if (!allData.versand.length) throw new Error(\"Keine Versanddaten geladen\");\n\n priceStatusNote.classList.remove(\"error\");\n renderAll();\n populateCalculator();\n updateCalculator();\n } catch (error) {\n priceStatusNote.classList.add(\"error\");\n document.getElementById(\"priceDateLine\").innerHTML = `<strong>Fehler: Live-Daten konnten nicht geladen werden.<\/strong>`;\n document.getElementById(\"rohteileGrid\").innerHTML = `\n <div class=\"empty-state\">\n <div class=\"empty-state-icon\"><i class=\"fa-solid fa-circle-exclamation\"><\/i><\/div>\n <h3>Live-Daten konnten nicht geladen werden<\/h3>\n <p>Bitte pr\u00fcfe, ob alle drei Tabs \u00f6ffentlich freigegeben sind.<\/p>\n <\/div>\n `;\n document.getElementById(\"optionenGrid\").innerHTML = \"\";\n document.getElementById(\"versandGrid\").innerHTML = \"\";\n }\n }\n\n document.getElementById(\"searchInput\").addEventListener(\"input\", filterItems);\n document.getElementById(\"productSelect\").addEventListener(\"change\", updateCalculator);\n document.getElementById(\"shippingSelect\").addEventListener(\"change\", updateCalculator);\n document.querySelectorAll('input[name=\"printSides\"]').forEach(input => {\n input.addEventListener(\"change\", updateCalculator);\n });\n\n window.addEventListener(\"scroll\", updatePinnedTotalVisibility, { passive: true });\n window.addEventListener(\"resize\", updatePinnedTotalVisibility);\n\n loadLiveData();\n <\/script>\n<\/body>\n<\/html>"},"padding":{"id":127570569,"value":"6"},"fullWidth":{"id":127570570,"value":"1"},"fullBackgroundColor":{"id":127570571,"value":"#fff0"},"published":{"id":127570572,"value":"1"},"conditions":{"id":127570573,"value":"[]"},"template":{"id":128033626,"value":"html"}}}],"properties":{"isStorePage":{"id":108006975,"value":"1"},"title":{"id":108006976,"value":"Home"},"isSearchable":{"id":126766393,"value":"0"},"loginState":{"id":126766394,"value":"everyone"},"ogImage":{"id":126766416,"value":"https:\/\/images.podos.io\/jccebchj5xg6wev8mjzvr6cwmefwvulufjlpfwa1anprfyaa.jpg.jpg?w=1200&h=auto"}},"labels":[],"published":1,"sitemap":1,"divisionId":402521,"edited":true,"keyPhraseCampaignId":null}

{"id":470436,"url":"\/","layout":"standard","version":"2026-04-08T11:09:49.000000Z","blocks":[{"id":5074060,"type":"html","published":1,"size":{"x":12,"y":0},"order":0,"items":[],"properties":{"html":{"id":127570567,"value":"\n\n\n \n \n Shirt-King Preis\u00fcbersicht<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@600;700;800&family=Open+Sans:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.7.2\/css\/all.min.css\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\">\n <style>\n html { scroll-behavior: smooth; }\n * { margin: 0; padding: 0; box-sizing: border-box; }\n\n :root {\n --bg: #f4f7fb;\n --surface: #ffffff;\n --surface-strong: #ffffff;\n --surface-muted: #f2f7ff;\n --text: #333333;\n --muted: #667085;\n --line: #d9e2ef;\n --brand: #0056b3;\n --brand-dark: #00418a;\n --cta: #2fbcd5;\n --cta-dark: #2098ad;\n --accent: #1f2937;\n --shadow: 0 12px 30px rgba(15, 23, 42, 0.08);\n --radius-xl: 16px;\n --radius-lg: 10px;\n --radius-md: 8px;\n }\n\n body {\n font-family: \"Open Sans\", \"Segoe UI\", sans-serif;\n color: var(--text);\n background:\n radial-gradient(circle at top right, rgba(47, 188, 213, 0.14), transparent 24%),\n linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);\n min-height: 100vh;\n padding: 24px;\n }\n\n h1, h2, h3, .tab, .choice-pill, .highlight-value, .summary-grand strong {\n font-family: \"Montserrat\", \"Open Sans\", sans-serif;\n }\n\n .container {\n max-width: 1440px;\n margin: 0 auto;\n }\n\n .hero-panel,\n .calculator-card,\n .calc-summary,\n .catalog-shell,\n .discount-shell {\n background: var(--surface);\n border: 1px solid var(--line);\n border-radius: var(--radius-xl);\n box-shadow: var(--shadow);\n }\n\n .hero-panel {\n padding: 26px;\n margin-bottom: 18px;\n }\n\n .hero-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 24px;\n }\n\n .hero-copy-block {\n flex: 1;\n min-width: 0;\n }\n\n .brand-mark {\n display: inline-flex;\n align-items: center;\n margin-bottom: 14px;\n padding: 4px 0;\n }\n\n .brand-mark-text {\n font-size: clamp(1.9rem, 4vw, 3rem);\n font-weight: 800;\n letter-spacing: 0.02em;\n line-height: 1;\n color: var(--cta);\n text-transform: uppercase;\n }\n\n .hero-title {\n font-size: clamp(1.45rem, 2.4vw, 2rem);\n line-height: 1.04;\n text-transform: uppercase;\n letter-spacing: 0.03em;\n max-width: 14ch;\n margin-bottom: 8px;\n }\n\n .hero-copy {\n color: var(--muted);\n font-size: 0.96rem;\n line-height: 1.45;\n max-width: 58ch;\n margin-bottom: 16px;\n }\n\n .hero-highlights {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 10px;\n width: min(100%, 520px);\n }\n\n .highlight {\n padding: 14px;\n border-radius: var(--radius-lg);\n background: var(--surface-strong);\n border: 1px solid var(--line);\n min-width: 0;\n }\n\n .highlight-link {\n text-decoration: none;\n transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;\n }\n\n .highlight-link:hover {\n transform: translateY(-2px);\n border-color: var(--cta);\n box-shadow: 0 10px 24px rgba(47, 188, 213, 0.16);\n }\n\n .highlight-value {\n font-size: clamp(1.2rem, 2vw, 1.65rem);\n font-weight: 700;\n color: var(--accent);\n }\n\n .highlight-label {\n color: var(--muted);\n margin-top: 4px;\n font-size: 0.92rem;\n }\n\n .calculator-shell {\n display: grid;\n grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr);\n gap: 18px;\n margin-bottom: 18px;\n }\n\n .calculator-card {\n padding: 22px;\n display: flex;\n flex-direction: column;\n gap: 14px;\n background:\n linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 255, 0.98)),\n var(--surface);\n }\n\n .calculator-card h2 {\n font-size: 1.25rem;\n line-height: 1.1;\n text-transform: uppercase;\n }\n\n .calculator-card p {\n color: var(--muted);\n line-height: 1.45;\n }\n\n .calculator-form {\n display: grid;\n gap: 12px;\n }\n\n .form-field {\n display: grid;\n gap: 8px;\n }\n\n .form-field label,\n .summary-label {\n font-size: 0.88rem;\n font-weight: 700;\n color: var(--accent);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n }\n\n .form-field input,\n .form-field select,\n .search-box input {\n width: 100%;\n border: 1px solid var(--line);\n background: var(--surface-strong);\n color: var(--text);\n border-radius: 12px;\n padding: 14px 16px;\n font-size: 1rem;\n outline: none;\n transition: border-color 0.2s ease, box-shadow 0.2s ease;\n }\n\n .form-field input:focus,\n .form-field select:focus,\n .search-box input:focus {\n border-color: rgba(47, 188, 213, 0.8);\n box-shadow: 0 0 0 4px rgba(47, 188, 213, 0.16);\n }\n\n .choice-group {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 10px;\n }\n\n .choice-group input {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n }\n\n .choice-pill {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 54px;\n padding: 14px;\n border-radius: 14px;\n border: 1px solid var(--line);\n background: var(--surface-strong);\n color: var(--muted);\n font-weight: 700;\n cursor: pointer;\n transition: all 0.2s ease;\n }\n\n .choice-group input:checked + .choice-pill {\n border-color: var(--cta);\n background: rgba(47, 188, 213, 0.14);\n color: #0f4e59;\n }\n\n .choice-group input:disabled + .choice-pill {\n background: #eef2f7;\n border-color: #d6dce5;\n color: #98a2b3;\n cursor: not-allowed;\n }\n\n .calculator-meta {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n }\n\n .meta-badge {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n border-radius: 999px;\n background: var(--surface-muted);\n border: 1px solid var(--line);\n color: var(--accent);\n font-size: 0.9rem;\n font-weight: 600;\n }\n\n .source-note {\n display: grid;\n gap: 6px;\n padding: 10px 14px;\n border-radius: var(--radius-md);\n background: var(--surface-muted);\n border: 1px solid var(--line);\n color: var(--muted);\n font-size: 0.92rem;\n line-height: 1.5;\n }\n\n .source-note strong { color: var(--accent); }\n\n .source-note.error {\n background: #fff1f2;\n border-color: #f5c2c7;\n color: #b42318;\n }\n\n .source-note.error strong { color: #b42318; }\n\n .calc-summary {\n padding: 18px;\n border-radius: 22px;\n background: #0f172a;\n color: #f8fbff;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n position: relative;\n }\n\n .summary-rows {\n display: grid;\n gap: 10px;\n margin-bottom: 16px;\n }\n\n .summary-row,\n .summary-total,\n .summary-grand {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n }\n\n .summary-row {\n color: rgba(255, 248, 240, 0.76);\n font-size: 0.96rem;\n }\n\n .summary-total {\n padding-top: 12px;\n border-top: 1px solid rgba(255, 248, 240, 0.18);\n font-weight: 700;\n }\n\n .summary-grand {\n margin-top: 16px;\n padding: 16px;\n border-radius: 16px;\n background: linear-gradient(135deg, var(--cta), var(--cta-dark));\n font-weight: 700;\n font-size: 1.06rem;\n transition: box-shadow 0.2s ease, transform 0.2s ease;\n }\n\n .summary-grand strong {\n font-size: 1.35rem;\n }\n\n .summary-grand.pinned {\n position: fixed;\n right: max(24px, calc((100vw - 1440px) \/ 2 + 24px));\n bottom: 24px;\n width: min(420px, calc(100vw - 32px));\n z-index: 30;\n box-shadow: 0 14px 30px rgba(15, 23, 42, 0.22);\n }\n\n .catalog-shell {\n padding: 22px;\n margin-bottom: 24px;\n }\n\n .catalog-header {\n display: flex;\n align-items: end;\n justify-content: space-between;\n gap: 20px;\n margin-bottom: 20px;\n flex-wrap: wrap;\n }\n\n .catalog-header h2 {\n font-size: 1.8rem;\n text-transform: uppercase;\n }\n\n .catalog-header p {\n color: var(--muted);\n margin-top: 6px;\n }\n\n .search-box {\n flex: 1;\n min-width: min(100%, 320px);\n }\n\n .filter-info {\n margin-bottom: 16px;\n color: var(--muted);\n min-height: 1.2em;\n font-size: 0.95rem;\n }\n\n .tabs {\n display: flex;\n gap: 12px;\n margin-bottom: 22px;\n flex-wrap: wrap;\n }\n\n .tab {\n padding: 13px 18px;\n background: var(--surface-muted);\n border: 1px solid transparent;\n border-radius: 999px;\n color: var(--accent);\n cursor: pointer;\n transition: all 0.25s ease;\n font-weight: 700;\n font-size: 0.96rem;\n }\n\n .tab:hover {\n border-color: rgba(47, 188, 213, 0.35);\n transform: translateY(-2px);\n }\n\n .tab.active {\n background: var(--cta);\n color: #083c45;\n border-color: var(--cta);\n }\n\n .tab .count {\n background: rgba(31, 26, 21, 0.08);\n padding: 4px 9px;\n border-radius: 999px;\n font-size: 0.85em;\n margin-left: 8px;\n }\n\n .tab.active .count {\n background: rgba(255, 255, 255, 0.18);\n color: #fff6ec;\n }\n\n .content-section {\n display: none;\n }\n\n .content-section.active {\n display: block;\n }\n\n .price-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n gap: 16px;\n }\n\n .price-card {\n background: var(--surface-strong);\n border-radius: 22px;\n padding: 22px;\n border: 1px solid var(--line);\n transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;\n cursor: pointer;\n }\n\n .price-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 14px 28px rgba(33, 25, 16, 0.08);\n border-color: rgba(47, 188, 213, 0.4);\n }\n\n .price-card.selected {\n border-color: var(--cta);\n box-shadow: 0 0 0 3px rgba(47, 188, 213, 0.16);\n }\n\n .card-tag {\n display: inline-flex;\n margin-bottom: 12px;\n padding: 6px 10px;\n border-radius: 999px;\n background: rgba(47, 188, 213, 0.1);\n color: var(--brand-dark);\n font-size: 0.76rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.06em;\n }\n\n .card-meta {\n margin-top: 12px;\n display: grid;\n gap: 6px;\n color: var(--muted);\n font-size: 0.85rem;\n }\n\n .price-card h3 {\n color: var(--text);\n margin-bottom: 14px;\n font-size: 1.1em;\n line-height: 1.4;\n min-height: 50px;\n }\n\n .price {\n font-size: 1.9em;\n font-weight: bold;\n color: var(--accent);\n margin-bottom: 8px;\n }\n\n .price-note {\n color: var(--muted);\n font-size: 0.88em;\n }\n\n .empty-state {\n text-align: center;\n padding: 60px 20px;\n background: var(--surface-strong);\n border-radius: 20px;\n color: var(--muted);\n border: 1px dashed var(--line);\n }\n\n .empty-state-icon {\n font-size: 4em;\n margin-bottom: 20px;\n }\n\n .discount-shell {\n margin-top: 24px;\n padding: 28px;\n }\n\n .discount-shell h2 {\n font-size: 1.8rem;\n text-transform: uppercase;\n margin-bottom: 10px;\n }\n\n .discount-shell p {\n color: var(--muted);\n line-height: 1.7;\n }\n\n .discount-table {\n width: 100%;\n border-collapse: collapse;\n margin: 20px 0 18px;\n overflow: hidden;\n border-radius: var(--radius-md);\n border: 1px solid var(--line);\n }\n\n .discount-table thead {\n background: var(--surface-muted);\n }\n\n .discount-table th,\n .discount-table td {\n padding: 16px 18px;\n text-align: left;\n border-bottom: 1px solid var(--line);\n }\n\n .discount-table th {\n font-family: \"Montserrat\", \"Open Sans\", sans-serif;\n font-size: 0.92rem;\n text-transform: uppercase;\n color: var(--accent);\n }\n\n .discount-table tbody tr:last-child td {\n border-bottom: none;\n }\n\n .discount-note {\n margin-top: 10px;\n padding: 18px 20px;\n border-radius: var(--radius-md);\n background: var(--surface-muted);\n border: 1px solid var(--line);\n }\n\n .discount-note p + p {\n margin-top: 14px;\n }\n\n @media (max-width: 1100px) {\n body { padding: 18px; }\n .hero-panel, .calculator-card, .calc-summary, .catalog-shell, .discount-shell { padding: 20px; }\n .hero-header, .calculator-shell { grid-template-columns: 1fr; display: grid; }\n .hero-header { gap: 16px; }\n .hero-title { max-width: none; }\n .search-box { width: 100%; min-width: 100%; }\n .catalog-header { align-items: stretch; }\n .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n .summary-grand.pinned {\n right: 18px;\n bottom: 18px;\n width: min(360px, calc(100vw - 36px));\n }\n }\n\n @media (max-width: 768px) {\n body {\n padding: 16px;\n padding-bottom: 92px;\n }\n .hero-panel, .calculator-card, .calc-summary, .catalog-shell, .discount-shell { padding: 18px; }\n .hero-highlights, .choice-group { grid-template-columns: 1fr; }\n .brand-mark-text { font-size: clamp(1.8rem, 9vw, 2.4rem); }\n .hero-header { display: grid; }\n .hero-highlights { width: 100%; }\n .hero-title { font-size: 1.35rem; }\n .highlight-value { font-size: 1.35rem; }\n .meta-badge { width: 100%; justify-content: center; }\n .price-grid { grid-template-columns: 1fr; }\n .price-card { padding: 18px; }\n .catalog-header h2, .discount-shell h2 { font-size: 1.35rem; }\n .search-box input, .form-field select { padding: 13px 14px; }\n .summary-grand.pinned {\n position: fixed;\n left: 16px;\n right: 16px;\n bottom: 16px;\n width: auto;\n margin-top: 0;\n padding: 12px 14px;\n border-radius: 14px;\n box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22);\n z-index: 30;\n font-size: 0.96rem;\n }\n .discount-table, .discount-table thead, .discount-table tbody, .discount-table tr, .discount-table th, .discount-table td {\n display: block; width: 100%;\n }\n .discount-table thead { display: none; }\n .discount-table tr { border-bottom: 1px solid var(--line); }\n .discount-table td { padding: 12px 16px; border-bottom: none; }\n }\n\n @media (max-width: 480px) {\n body {\n padding: 12px;\n padding-bottom: 88px;\n }\n .hero-panel, .calculator-card, .catalog-shell, .discount-shell {\n padding: 16px;\n border-radius: 14px;\n }\n .summary-grand.pinned {\n left: 12px;\n right: 12px;\n bottom: 12px;\n padding: 11px 12px;\n font-size: 0.9rem;\n }\n .summary-grand strong {\n font-size: 1.18rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <section class=\"hero-panel\">\n <div class=\"hero-header\">\n <div class=\"hero-copy-block\">\n <div class=\"brand-mark\" aria-label=\"Shirt-King Logo\">\n <div class=\"brand-mark-text\">SHIRT-KING<\/div>\n <\/div>\n <h2 class=\"hero-title\">CLOUD Preise und Leistungen<\/h2>\n <p class=\"hero-copy\">Netto-Preis\u00fcbersicht f\u00fcr Produkte, Druckoptionen und Versand.<\/p>\n <\/div>\n <div class=\"hero-highlights\">\n <a class=\"highlight highlight-link\" href=\"#katalog\">\n <div class=\"highlight-value\">Katalog<\/div>\n <div class=\"highlight-label\">Zu Produkten und Leistungen<\/div>\n <\/a>\n <a class=\"highlight highlight-link\" href=\"#rabatte\">\n <div class=\"highlight-value\">Rabatt\u00fcbersicht<\/div>\n <div class=\"highlight-label\">Zu den Rabattstufen<\/div>\n <\/a>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"calculator-shell\">\n <div class=\"calculator-card\">\n <div>\n <h2>Produktrechner<\/h2>\n <p>Produkt w\u00e4hlen, Druckseiten festlegen und sofort eine saubere Aufschl\u00fcsselung sehen.<\/p>\n <\/div>\n\n <div class=\"calculator-form\">\n <div class=\"form-field\">\n <label for=\"productSelect\">Produkt<\/label>\n <select id=\"productSelect\"><\/select>\n <\/div>\n\n <div class=\"form-field\">\n <label for=\"shippingSelect\">Versand<\/label>\n <select id=\"shippingSelect\"><\/select>\n <\/div>\n\n <div class=\"form-field\">\n <span class=\"summary-label\">Druckseiten<\/span>\n <div class=\"choice-group\">\n <label>\n <input type=\"radio\" name=\"printSides\" value=\"1\" checked>\n <span class=\"choice-pill\">Einseitig<\/span>\n <\/label>\n <label>\n <input type=\"radio\" id=\"twoSideInput\" name=\"printSides\" value=\"2\">\n <span class=\"choice-pill\">Zweiseitig<\/span>\n <\/label>\n <\/div>\n <\/div>\n\n <div class=\"calculator-meta\">\n <div class=\"meta-badge\"><i class=\"fa-solid fa-print\"><\/i> Druckart: <span id=\"printMethodBadge\">\u2013<\/span><\/div>\n <div class=\"meta-badge\"><i class=\"fa-solid fa-layer-group\"><\/i> Freigabe: <span id=\"printSidesBadge\">\u2013<\/span><\/div>\n <\/div>\n\n <div class=\"source-note\" id=\"priceStatusNote\">\n <div id=\"priceDateLine\"><strong>Stand:<\/strong> <span id=\"priceDateHint\">Live-Daten werden geladen ...<\/span><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"calc-summary\">\n <div class=\"summary-label\">Aufschl\u00fcsselung<\/div>\n <div class=\"summary-rows\" id=\"summaryRows\"><\/div>\n <div class=\"summary-total\">\n <span>Zwischensumme netto<\/span>\n <span id=\"netSubtotal\">0.00\u20ac<\/span>\n <\/div>\n <div class=\"summary-row\" style=\"margin-top: 12px;\">\n <span>MwSt. (19 %)<\/span>\n <span id=\"vatAmount\">0.00\u20ac<\/span>\n <\/div>\n <div class=\"summary-grand\">\n <span>Gesamt inkl. Versand<\/span>\n <strong id=\"grossTotal\">0.00\u20ac<\/strong>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"catalog-shell\" id=\"katalog\">\n <div class=\"catalog-header\">\n <div>\n <h2>Produkte, Optionen und Versand<\/h2>\n <p>Direkt aus mehreren Tabs im Google Sheet geladen.<\/p>\n <\/div>\n\n <div class=\"search-box\">\n <input type=\"text\" id=\"searchInput\" placeholder=\"Suche nach Produkt, Option oder Versand\">\n <\/div>\n <\/div>\n\n <div class=\"filter-info\" id=\"filterInfo\"><\/div>\n\n <div class=\"tabs\">\n <button type=\"button\" class=\"tab active\" onclick=\"switchTab(event, 'rohteile')\">\n Rohteile <span class=\"count\" id=\"countRohteile\">0<\/span>\n <\/button>\n <button type=\"button\" class=\"tab\" onclick=\"switchTab(event, 'optionen')\">\n Optionen <span class=\"count\" id=\"countOptionen\">0<\/span>\n <\/button>\n <button type=\"button\" class=\"tab\" onclick=\"switchTab(event, 'versand')\">\n Versand <span class=\"count\" id=\"countVersand\">0<\/span>\n <\/button>\n <\/div>\n\n <div id=\"rohteile\" class=\"content-section active\">\n <div class=\"price-grid\" id=\"rohteileGrid\"><\/div>\n <\/div>\n\n <div id=\"optionen\" class=\"content-section\">\n <div class=\"price-grid\" id=\"optionenGrid\"><\/div>\n <\/div>\n\n <div id=\"versand\" class=\"content-section\">\n <div class=\"price-grid\" id=\"versandGrid\"><\/div>\n <\/div>\n <\/section>\n\n <section class=\"discount-shell\" id=\"rabatte\">\n <h2>M\u00f6gliche Rabattstufen<\/h2>\n <table class=\"discount-table\">\n <thead>\n <tr>\n <th>Rabattstufe<\/th>\n <th>Dein Mindestumsatz pro Monat bei uns<\/th>\n <th>Rabatt auf Rechnungsbetrag<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <tr><td>I<\/td><td>10.000 EUR<\/td><td>2 %<\/td><\/tr>\n <tr><td>II<\/td><td>15.000 EUR<\/td><td>3 %<\/td><\/tr>\n <tr><td>III<\/td><td>30.000 EUR<\/td><td>4 %<\/td><\/tr>\n <tr><td>IV<\/td><td>ab 40.000 EUR<\/td><td>individuelle Konditionen<\/td><\/tr>\n <\/tbody>\n <\/table>\n <div class=\"discount-note\">\n <p>Bei Erreichen des Mindestumsatzes ist der Rabatt ab dem folgenden Monat g\u00fcltig.<\/p>\n <p><strong>Beispiel:<\/strong> Erreicht ihr im Mai bei uns einen Umsatz in H\u00f6he von 17.000 EUR, erhaltet ihr f\u00fcr alle eure Ums\u00e4tze bei uns ab Juni 3 % Rabatt auf die Rechnungssumme.<\/p>\n <\/div>\n <\/section>\n <\/div>\n\n <script>\n const SHEET_CONFIG = {\n spreadsheetId: \"1HpEjWiz561YbSyUajjsJVeLM_sSYYXeY-BiqsOZwfTk\",\n gids: {\n rohteile: \"0\",\n optionen: \"388398752\",\n versand: \"1004741700\"\n }\n };\n\n const VAT_RATE = 0.19;\n const DEFAULT_OPTION_PRICES = {\n DTG: 5.50,\n DTF: 5.50,\n SUB: 5.50,\n DEFAULT: 5.50\n };\n const DEFAULT_HANDLING_PRICE = 0.69;\n\n let allData = { rohteile: [], optionen: [], versand: [] };\n let filteredData = { rohteile: [], optionen: [], versand: [] };\n\n function escapeHtml(value) {\n return String(value ?? \"\")\n .replace(\/&\/g, \"&\")\n .replace(\/<\/g, \"<\")\n .replace(\/>\/g, \">\")\n .replace(\/\"\/g, \""\")\n .replace(\/'\/g, \"'\");\n }\n\n function getCsvUrl(gid) {\n return `https:\/\/docs.google.com\/spreadsheets\/d\/${SHEET_CONFIG.spreadsheetId}\/export?format=csv&gid=${gid}&ts=${Date.now()}`;\n }\n\n async function fetchCsv(url) {\n const response = await fetch(url, { cache: \"no-store\" });\n if (!response.ok) throw new Error(`HTTP ${response.status}`);\n return response.text();\n }\n\n function parseCSVLine(line) {\n const result = [];\n let current = \"\";\n let inQuotes = false;\n\n for (let i = 0; i < line.length; i++) {\n const char = line[i];\n const next = line[i + 1];\n\n if (char === '\"') {\n if (inQuotes && next === '\"') {\n current += '\"';\n i++;\n } else {\n inQuotes = !inQuotes;\n }\n } else if (char === \",\" && !inQuotes) {\n result.push(current);\n current = \"\";\n } else {\n current += char;\n }\n }\n\n result.push(current);\n return result;\n }\n\n function parsePrice(value) {\n if (value === undefined || value === null || value === \"\") return 0;\n if (String(value).trim().toUpperCase() === \"TBA\") return 0;\n if (String(value).trim().toLowerCase() === \"free\") return 0;\n\n return parseFloat(\n String(value)\n .replace(\"\u20ac\", \"\")\n .replace(\/\\s\/g, \"\")\n .replace(\/\\.\/g, \"\")\n .replace(\",\", \".\")\n ) || 0;\n }\n\n function formatPrice(value) {\n return Number(value || 0).toFixed(2) + \"\u20ac\";\n }\n\n function readablePrintSides(value) {\n const text = String(value || \"\").toLowerCase();\n if (text.includes(\"ein\") && text.includes(\"zwei\")) return \"Ein- oder zweiseitig\";\n if (text.includes(\"einseitig\")) return \"Nur einseitig\";\n if (text.includes(\"zweiseitig\")) return \"Nur zweiseitig\";\n return value || \"Nicht hinterlegt\";\n }\n\n function isSingleOnly(value) {\n const text = String(value || \"\").toLowerCase();\n return text.includes(\"einseitig\") && !text.includes(\"zwei\");\n }\n\n function parseSheet(text, section) {\n const lines = text.split(\/\\r?\\n\/).filter(line => line.trim() !== \"\");\n if (!lines.length) return [];\n\n let headerIndex = 0;\n for (let i = 0; i < Math.min(lines.length, 6); i++) {\n const row = parseCSVLine(lines[i]).map(v => v.trim().toLowerCase());\n const hasName = row.some(v => [\"name\", \"produkt\", \"bezeichnung\", \"artikel\", \"versand\"].includes(v));\n const hasPrice = row.some(v => [\"price\", \"preis\", \"netto\", \"betrag\", \"kosten\"].includes(v));\n if (hasName && hasPrice) {\n headerIndex = i;\n break;\n }\n }\n\n const headers = parseCSVLine(lines[headerIndex]).map(h => h.trim());\n\n const rows = lines.slice(headerIndex + 1).map(line => {\n const values = parseCSVLine(line);\n const row = {};\n headers.forEach((header, index) => {\n row[header] = (values[index] || \"\").trim();\n });\n return row;\n });\n\n if (section === \"rohteile\") {\n return rows.map(row => ({\n name: row[\"Name\"] || row[\"Produkt\"] || row[\"Bezeichnung\"] || \"\",\n price: row[\"Price\"] || row[\"Preis\"] || \"\",\n printType: row[\"Druck\"] || row[\"Druckart\"] || \"\",\n printSides: row[\"Druckseiten\"] || row[\"Seiten\"] || \"\",\n date: row[\"Stand:\"] || row[\"Stand: \"] || row[\"Stand\"] || \"\"\n })).filter(item => item.name);\n }\n\n if (section === \"optionen\") {\n return rows.map(row => ({\n name: row[\"Name\"] || row[\"Produkt\"] || row[\"Bezeichnung\"] || \"\",\n price: row[\"Price\"] || row[\"Preis\"] || \"\",\n date: row[\"Stand:\"] || row[\"Stand: \"] || row[\"Stand\"] || \"\",\n key: (row[\"Key\"] || row[\"calc_key\"] || row[\"Schluessel\"] || \"\").toLowerCase()\n })).filter(item => item.name);\n }\n\n if (section === \"versand\") {\n return rows.map(row => ({\n name: row[\"Name\"] || row[\"Versand\"] || row[\"Bezeichnung\"] || \"\",\n price: row[\"Price\"] || row[\"Preis\"] || \"\",\n date: row[\"Stand:\"] || row[\"Stand: \"] || row[\"Stand\"] || \"\"\n })).filter(item => item.name);\n }\n\n return [];\n }\n\n function switchTab(event, tab) {\n document.querySelectorAll(\".tab\").forEach(el => el.classList.remove(\"active\"));\n document.querySelectorAll(\".content-section\").forEach(el => el.classList.remove(\"active\"));\n event.currentTarget.classList.add(\"active\");\n document.getElementById(tab).classList.add(\"active\");\n }\n\n function getSelectedProduct() {\n const index = parseInt(document.getElementById(\"productSelect\").value || \"0\", 10);\n return filteredData.rohteile[index] || allData.rohteile[0] || null;\n }\n\n function getSelectedShipping() {\n const index = parseInt(document.getElementById(\"shippingSelect\").value || \"0\", 10);\n return allData.versand[index] || allData.versand[0] || null;\n }\n\n function getHandlingPrice() {\n const explicit = allData.optionen.find(item =>\n item.key === \"handling\" || item.name.toLowerCase().includes(\"handling\")\n );\n return explicit ? parsePrice(explicit.price) : DEFAULT_HANDLING_PRICE;\n }\n\n function getPrintOptionPrice(printType) {\n const normalized = String(printType || \"\").toUpperCase();\n const explicit = allData.optionen.find(item => {\n const name = item.name.toLowerCase();\n return (\n item.key === `print-${normalized.toLowerCase()}` ||\n (normalized === \"DTG\" && name.includes(\"dtg\")) ||\n (normalized === \"DTF\" && name.includes(\"dtf\")) ||\n (normalized === \"SUB\" && (name.includes(\"sub\") || name.includes(\"sublimation\")))\n );\n });\n\n if (explicit) return parsePrice(explicit.price);\n return DEFAULT_OPTION_PRICES[normalized] ?? DEFAULT_OPTION_PRICES.DEFAULT;\n }\n\n function filterItems() {\n const searchTerm = document.getElementById(\"searchInput\").value.toLowerCase().trim();\n\n if (!searchTerm) {\n filteredData = {\n rohteile: [...allData.rohteile],\n optionen: [...allData.optionen],\n versand: [...allData.versand]\n };\n document.getElementById(\"filterInfo\").textContent = \"\";\n } else {\n filteredData = {\n rohteile: allData.rohteile.filter(item =>\n item.name.toLowerCase().includes(searchTerm) ||\n String(item.printType || \"\").toLowerCase().includes(searchTerm)\n ),\n optionen: allData.optionen.filter(item =>\n item.name.toLowerCase().includes(searchTerm)\n ),\n versand: allData.versand.filter(item =>\n item.name.toLowerCase().includes(searchTerm)\n )\n };\n\n const total = filteredData.rohteile.length + filteredData.optionen.length + filteredData.versand.length;\n document.getElementById(\"filterInfo\").textContent = `${total} Treffer f\u00fcr \"${searchTerm}\"`;\n }\n\n renderAll();\n populateCalculator();\n updateCalculator();\n }\n\n function updateCounts() {\n document.getElementById(\"countRohteile\").textContent = filteredData.rohteile.length;\n document.getElementById(\"countOptionen\").textContent = filteredData.optionen.length;\n document.getElementById(\"countVersand\").textContent = filteredData.versand.length;\n }\n\n function renderSection(section, items, note, tag) {\n const grid = document.getElementById(`${section}Grid`);\n const activeProductName = getSelectedProduct()?.name;\n\n if (!items.length) {\n grid.innerHTML = `\n <div class=\"empty-state\">\n <div class=\"empty-state-icon\"><i class=\"fa-solid fa-magnifying-glass\"><\/i><\/div>\n <h3>Keine Ergebnisse gefunden<\/h3>\n <p>Versuche einen anderen Suchbegriff.<\/p>\n <\/div>\n `;\n return;\n }\n\n const sortedProducts = filteredData.rohteile;\n\n grid.innerHTML = items.map((item) => {\n const productIndex = sortedProducts.findIndex(product => product.name === item.name);\n\n return `\n <div class=\"price-card ${section === 'rohteile' && activeProductName === item.name ? 'selected' : ''}\"\n ${section === 'rohteile' ? `onclick=\"selectProduct(${productIndex})\"` : ''}>\n <div class=\"card-tag\">${tag}<\/div>\n <h3>${escapeHtml(item.name)}<\/h3>\n <div class=\"price\">${escapeHtml(formatPrice(parsePrice(item.price)))}<\/div>\n <div class=\"price-note\">${note}<\/div>\n ${section === 'rohteile' ? `\n <div class=\"card-meta\">\n <div><i class=\"fa-solid fa-print\"><\/i> Druckart: ${escapeHtml(item.printType || 'Nicht hinterlegt')}<\/div>\n <div><i class=\"fa-solid fa-layer-group\"><\/i> Freigabe: ${escapeHtml(readablePrintSides(item.printSides))}<\/div>\n <\/div>\n ` : ''}\n <\/div>\n `;\n }).join(\"\");\n }\n\n function renderAll() {\n renderSection(\"rohteile\", filteredData.rohteile, \"Rohling netto, Druck und Versand separat.\", \"Rohteil\");\n renderSection(\"optionen\", filteredData.optionen, \"Zusatzkosten netto, passend f\u00fcr Kalkulationen.\", \"Option\");\n renderSection(\"versand\", filteredData.versand, \"Versand netto, wird im Kalkulator direkt eingerechnet.\", \"Versand\");\n updateCounts();\n }\n\n function populateCalculator() {\n const productSelect = document.getElementById(\"productSelect\");\n const shippingSelect = document.getElementById(\"shippingSelect\");\n\n const currentProductValue = productSelect.value;\n const currentShippingValue = shippingSelect.value;\n\n productSelect.innerHTML = filteredData.rohteile.map((item, index) =>\n `<option value=\"${index}\">${escapeHtml(item.name)} - ${formatPrice(parsePrice(item.price))}<\/option>`\n ).join(\"\");\n\n shippingSelect.innerHTML = allData.versand.map((item, index) =>\n `<option value=\"${index}\">${escapeHtml(item.name)} - ${formatPrice(parsePrice(item.price))}<\/option>`\n ).join(\"\");\n\n if (filteredData.rohteile.length) {\n if (currentProductValue !== \"\" && filteredData.rohteile[parseInt(currentProductValue, 10)]) {\n productSelect.value = currentProductValue;\n } else {\n productSelect.value = \"0\";\n }\n }\n\n if (allData.versand.length) {\n if (currentShippingValue !== \"\" && allData.versand[parseInt(currentShippingValue, 10)]) {\n shippingSelect.value = currentShippingValue;\n } else {\n const defaultShippingIndex = allData.versand.findIndex(item => item.name === \"DHL Paket National\");\n shippingSelect.value = String(defaultShippingIndex >= 0 ? defaultShippingIndex : 0);\n }\n }\n }\n\n function syncPrintControls(product) {\n const twoSideInput = document.getElementById(\"twoSideInput\");\n const oneSideInput = document.querySelector('input[name=\"printSides\"][value=\"1\"]');\n const priceStatusNote = document.getElementById(\"priceStatusNote\");\n const priceDateLine = document.getElementById(\"priceDateLine\");\n const singleOnly = isSingleOnly(product.printSides);\n\n twoSideInput.disabled = singleOnly;\n if (singleOnly && twoSideInput.checked) {\n oneSideInput.checked = true;\n }\n\n document.getElementById(\"printMethodBadge\").textContent = product.printType || \"Nicht hinterlegt\";\n document.getElementById(\"printSidesBadge\").textContent = readablePrintSides(product.printSides);\n priceStatusNote.classList.remove(\"error\");\n priceDateLine.innerHTML = `<strong>Stand:<\/strong> <span id=\"priceDateHint\">${escapeHtml(product.date || \"Nicht hinterlegt\")}<\/span>`;\n }\n\n function updateCalculator() {\n const product = getSelectedProduct();\n const shipping = getSelectedShipping();\n\n if (!product || !shipping) {\n document.getElementById(\"summaryRows\").innerHTML = `\n <div class=\"summary-row\">\n <span>Live-Daten<\/span>\n <span>Nicht verf\u00fcgbar<\/span>\n <\/div>\n `;\n return;\n }\n\n syncPrintControls(product);\n\n const sides = parseInt(document.querySelector('input[name=\"printSides\"]:checked').value, 10);\n const productPrice = parsePrice(product.price);\n const printPricePerSide = getPrintOptionPrice(product.printType);\n const printPrice = printPricePerSide * sides;\n const handling = getHandlingPrice();\n const shippingPrice = parsePrice(shipping.price);\n\n const netSubtotal = productPrice + printPrice + handling + shippingPrice;\n const vatAmount = netSubtotal * VAT_RATE;\n const grossTotal = netSubtotal + vatAmount;\n\n const rows = [\n { label: product.name, value: formatPrice(productPrice) },\n { label: `${product.printType || \"Druck\"} ${sides === 1 ? \"einseitig\" : \"zweiseitig\"}`, value: formatPrice(printPrice) },\n { label: \"Handling\", value: formatPrice(handling) },\n { label: shipping.name, value: formatPrice(shippingPrice) }\n ];\n\n document.getElementById(\"summaryRows\").innerHTML = rows.map(row => `\n <div class=\"summary-row\">\n <span>${escapeHtml(row.label)}<\/span>\n <span>${escapeHtml(row.value)}<\/span>\n <\/div>\n `).join(\"\");\n\n document.getElementById(\"netSubtotal\").textContent = formatPrice(netSubtotal);\n document.getElementById(\"vatAmount\").textContent = formatPrice(vatAmount);\n document.getElementById(\"grossTotal\").textContent = formatPrice(grossTotal);\n\n renderAll();\n updatePinnedTotalVisibility();\n }\n\n function selectProduct(index) {\n if (index < 0) return;\n document.getElementById(\"productSelect\").value = String(index);\n updateCalculator();\n }\n\n function updatePinnedTotalVisibility() {\n const totalBar = document.querySelector(\".summary-grand\");\n const catalog = document.getElementById(\"katalog\");\n\n if (!totalBar || !catalog) return;\n\n const catalogTop = catalog.getBoundingClientRect().top;\n if (catalogTop <= 16) {\n totalBar.classList.add(\"pinned\");\n } else {\n totalBar.classList.remove(\"pinned\");\n }\n }\n\n async function loadLiveData() {\n const priceStatusNote = document.getElementById(\"priceStatusNote\");\n\n try {\n const [rohteileCsv, optionenCsv, versandCsv] = await Promise.all([\n fetchCsv(getCsvUrl(SHEET_CONFIG.gids.rohteile)),\n fetchCsv(getCsvUrl(SHEET_CONFIG.gids.optionen)),\n fetchCsv(getCsvUrl(SHEET_CONFIG.gids.versand))\n ]);\n\n allData = {\n rohteile: parseSheet(rohteileCsv, \"rohteile\"),\n optionen: parseSheet(optionenCsv, \"optionen\"),\n versand: parseSheet(versandCsv, \"versand\")\n };\n\n filteredData = {\n rohteile: [...allData.rohteile],\n optionen: [...allData.optionen],\n versand: [...allData.versand]\n };\n\n if (!allData.rohteile.length) throw new Error(\"Keine Rohteile geladen\");\n if (!allData.versand.length) throw new Error(\"Keine Versanddaten geladen\");\n\n priceStatusNote.classList.remove(\"error\");\n renderAll();\n populateCalculator();\n updateCalculator();\n } catch (error) {\n priceStatusNote.classList.add(\"error\");\n document.getElementById(\"priceDateLine\").innerHTML = `<strong>Fehler: Live-Daten konnten nicht geladen werden.<\/strong>`;\n document.getElementById(\"rohteileGrid\").innerHTML = `\n <div class=\"empty-state\">\n <div class=\"empty-state-icon\"><i class=\"fa-solid fa-circle-exclamation\"><\/i><\/div>\n <h3>Live-Daten konnten nicht geladen werden<\/h3>\n <p>Bitte pr\u00fcfe, ob alle drei Tabs \u00f6ffentlich freigegeben sind.<\/p>\n <\/div>\n `;\n document.getElementById(\"optionenGrid\").innerHTML = \"\";\n document.getElementById(\"versandGrid\").innerHTML = \"\";\n }\n }\n\n document.getElementById(\"searchInput\").addEventListener(\"input\", filterItems);\n document.getElementById(\"productSelect\").addEventListener(\"change\", updateCalculator);\n document.getElementById(\"shippingSelect\").addEventListener(\"change\", updateCalculator);\n document.querySelectorAll('input[name=\"printSides\"]').forEach(input => {\n input.addEventListener(\"change\", updateCalculator);\n });\n\n window.addEventListener(\"scroll\", updatePinnedTotalVisibility, { passive: true });\n window.addEventListener(\"resize\", updatePinnedTotalVisibility);\n\n loadLiveData();\n <\/script>\n<\/body>\n<\/html>"},"padding":{"id":127570569,"value":"6"},"fullWidth":{"id":127570570,"value":"1"},"fullBackgroundColor":{"id":127570571,"value":"#fff0"},"published":{"id":127570572,"value":"1"},"conditions":{"id":127570573,"value":"[]"},"template":{"id":128033626,"value":"html"}}}],"properties":{"isStorePage":{"id":108006975,"value":"1"},"title":{"id":108006976,"value":"Home"},"isSearchable":{"id":126766393,"value":"0"},"loginState":{"id":126766394,"value":"everyone"},"ogImage":{"id":126766416,"value":"https:\/\/images.podos.io\/jccebchj5xg6wev8mjzvr6cwmefwvulufjlpfwa1anprfyaa.jpg.jpg?w=1200&h=auto"}},"labels":[],"published":1,"sitemap":1,"divisionId":402521,"edited":true,"keyPhraseCampaignId":null}