/* ============================================================================= txts.chat – Gestaltung der Unterseiten Dieselbe Sprache wie die Startseite: cremefarbenes Papier mit Punktraster, fast schwarze Schrift, Grün als einziger Akzent, Pillen statt Knöpfe, Karten mit hartem Schatten. Die Startseite trägt ihre Regeln inline im – sie bringt so viel eigenes Verhalten mit (Demo, Reveal, Hero), dass ein Umbau auf diese Datei mehr Risiko als Nutzen wäre. Wer hier Farben oder Abstände ändert, sollte deshalb dort nachziehen. Die ältere style.css bleibt für /support und /privacy bestehen. ========================================================================== */ :root { --paper: #F7F2E7; /* cremefarbene Grundfläche */ --paper-soft: #FDFBF5; /* helleres Creme für Karten */ --ink: #131512; /* fast schwarz */ --ink-2: #4d524c; /* Zweitschrift */ --green: #4CB878; /* Akzent */ --pine: #1E6B47; /* dunkles Grün für Kicker und Links */ --danger: #b3372b; --dot: rgba(19, 21, 18, 0.10); --hairline: rgba(19, 21, 18, 0.14); --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font); background: radial-gradient(var(--dot) 1.2px, transparent 1.2px) 0 0 / 34px 34px, var(--paper); color: var(--ink); line-height: 1.5; letter-spacing: -0.012em; -webkit-font-smoothing: antialiased; overflow-x: hidden; } .mono { font-family: var(--mono); } /* --- Navigation: Logo links, Pillen rechts ------------------------------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 18px 26px; pointer-events: none; } .nav > * { pointer-events: auto; } .nav-logo { display: flex; align-items: center; } .nav-logo img { width: 46px; height: 46px; border-radius: 13px; box-shadow: 0 2px 10px rgba(19, 21, 18, 0.12); } .nav-right { display: flex; gap: 10px; align-items: center; } .pill { display: inline-flex; align-items: center; gap: 9px; background: var(--ink); color: var(--paper); text-decoration: none; font-family: inherit; font-weight: 600; font-size: 0.95rem; padding: 12px 22px; border-radius: 99px; border: 1.5px solid var(--ink); white-space: nowrap; cursor: pointer; transition: transform 0.15s ease, background 0.2s, color 0.2s; } .pill:hover { transform: scale(1.04); } .pill.pill-ghost { background: transparent; color: var(--ink); } .pill.pill-ghost:hover { background: var(--ink); color: var(--paper); } .pill.pill-green { background: var(--green); border-color: var(--green); color: #fff; } /* Wartend, nicht kaputt: sichtbar, aber ohne Wirkung. */ .pill[disabled], .pill.is-soon { opacity: .4; pointer-events: none; cursor: default; border-style: dashed; } /* --- Sprachumschalter ---------------------------------------------------- */ .lang-toggle { display: inline-flex; border: 1.5px solid var(--ink); border-radius: 99px; overflow: hidden; } .lang-toggle button { font-family: var(--mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; padding: 9px 13px; border: none; background: transparent; color: var(--ink); cursor: pointer; } .lang-toggle button.active { background: var(--ink); color: var(--paper); } /* --- Seitenrumpf --------------------------------------------------------- */ .page { padding: 150px 5vw 40px; } .page-inner { max-width: 860px; margin: 0 auto; } .kicker { font-family: var(--mono); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--pine); margin-bottom: 22px; } .statement { font-size: clamp(2.1rem, 5.2vw, 3.6rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1.04; max-width: 900px; margin-bottom: 22px; } .statement .soft { color: var(--ink-2); } .statement .green { color: var(--green); } .lede { font-size: clamp(1.02rem, 1.6vw, 1.22rem); color: var(--ink-2); font-weight: 500; max-width: 640px; margin-bottom: 46px; } /* --- Karten -------------------------------------------------------------- */ .card { background: var(--paper-soft); border: 1.5px solid var(--ink); border-radius: 24px; padding: 30px 26px; } .card + .card { margin-top: 18px; } .card h2 { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.025em; margin-bottom: 8px; } .card h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; } .card p { font-size: 0.94rem; color: var(--ink-2); } /* --- Tarife -------------------------------------------------------------- */ .plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-bottom: 16px; } .plan { position: relative; background: var(--paper-soft); border: 1.5px solid var(--ink); border-radius: 24px; padding: 34px 26px 28px; text-align: center; transition: transform 0.2s ease, box-shadow 0.2s ease; } .plan:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 rgba(19, 21, 18, 0.9); } .plan-name { font-family: var(--mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); } .plan-price { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.045em; margin: 12px 0 2px; } .plan-price span { font-size: 0.9rem; font-weight: 600; color: var(--ink-2); } .plan-note { font-size: 0.86rem; color: var(--ink-2); min-height: 22px; } .plan .pill { width: 100%; justify-content: center; margin-top: 20px; } .plan-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--green); border: 1.5px solid var(--ink); color: #fff; font-family: var(--mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 14px; border-radius: 99px; white-space: nowrap; } /* --- Leistungen: Haarlinien-Liste wie auf der Startseite ------------------ */ .perks { list-style: none; border-top: 1.5px solid var(--ink); margin-top: 40px; } .perks li { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: 22px 0; border-bottom: 1.5px solid var(--hairline); } .perks .tick { color: var(--pine); font-weight: 800; } .perks strong { display: block; font-size: 1.12rem; font-weight: 800; letter-spacing: -0.025em; margin-bottom: 4px; } .perks .body { font-size: 0.94rem; color: var(--ink-2); max-width: 560px; } .note { font-size: 0.86rem; color: var(--ink-2); line-height: 1.6; background: var(--paper-soft); border: 1.5px solid var(--hairline); border-radius: 18px; padding: 18px 22px; margin-top: 34px; } .note a { color: var(--pine); font-weight: 600; } .note.center { text-align: center; } /* --- Formular ------------------------------------------------------------ */ .field { display: flex; flex-direction: column; gap: 7px; margin-top: 16px; } .field label { font-family: var(--mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); } .field input { font: inherit; font-size: 1rem; padding: 13px 16px; border-radius: 14px; border: 1.5px solid var(--ink); background: #fff; color: var(--ink); } .field input:focus { outline: none; box-shadow: 0 0 0 3px rgba(76, 184, 120, 0.35); } .field-at { display: flex; align-items: center; gap: 9px; } .field-at > span { font-family: var(--mono); color: var(--ink-2); } .field-at input { flex: 1; } .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } .msg { font-size: 0.9rem; line-height: 1.5; margin-top: 16px; } .msg.err { color: var(--danger); } .msg.ok { color: var(--pine); } .linkbutton { background: none; border: none; padding: 0; font: inherit; color: var(--ink-2); text-decoration: underline; cursor: pointer; } /* --- Fusszeile ----------------------------------------------------------- */ .footer { padding: 90px 5vw 40px; } .footer-inner { max-width: 860px; margin: 0 auto; } .footer-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; justify-content: space-between; border-top: 1.5px solid var(--ink); padding-top: 22px; font-size: 0.85rem; color: var(--ink-2); } .footer-meta nav { display: flex; flex-wrap: wrap; gap: 18px; } .footer-meta a { color: var(--ink); text-decoration: none; font-weight: 600; } .footer-meta a:hover { color: var(--pine); } .hidden { display: none !important; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } @media (max-width: 640px) { .nav { padding: 14px 16px; } .nav-logo img { width: 40px; height: 40px; } .pill { font-size: 0.82rem; padding: 10px 16px; } .page { padding: 120px 6vw 30px; } .plans { grid-template-columns: 1fr; } } /* --- Auswahl zweier Tarife (Kontoseite) ---------------------------------- */ .choices { display: flex; gap: 12px; margin-top: 20px; } .choice { flex: 1; font: inherit; cursor: pointer; padding: 16px 12px; border-radius: 18px; border: 1.5px solid var(--hairline); background: var(--paper-soft); color: var(--ink); text-align: center; transition: border-color 0.15s, box-shadow 0.15s; } .choice b { display: block; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.03em; } .choice small { color: var(--ink-2); font-size: 0.82rem; } .choice.sel { border-color: var(--ink); box-shadow: 3px 3px 0 rgba(19, 21, 18, 0.9); } .choice:disabled { opacity: .45; cursor: default; box-shadow: none; } /* --- Zähler für zugekaufte Plätze ---------------------------------------- */ .counter { display: flex; align-items: center; gap: 14px; margin: 18px 0 4px; } .counter button { width: 42px; height: 42px; flex: none; font: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer; border-radius: 14px; border: 1.5px solid var(--ink); background: var(--paper-soft); color: var(--ink); } .counter button:disabled { opacity: .35; cursor: default; } .counter b { font-size: 1.5rem; font-weight: 800; min-width: 1.5em; text-align: center; } .counter .caption { color: var(--ink-2); font-size: 0.88rem; } /* --- Zustandspunkt ------------------------------------------------------- */ .state { display: flex; align-items: center; gap: 15px; } .state .dot { width: 13px; height: 13px; flex: none; border-radius: 50%; border: 1.5px solid var(--ink); background: transparent; } .state .dot.on { background: var(--green); } .state h2 { margin: 0; } .state .sub { color: var(--ink-2); font-size: 0.92rem; margin-top: 3px; } .rule { border: none; border-top: 1.5px solid var(--hairline); margin: 26px 0 20px; } .who { font-family: var(--mono); font-size: 0.92rem; color: var(--ink-2); } /* --- Fliesstext in Karten (Support, Datenschutz) -------------------------- */ .card h2 + p, .card h3 + p, .card p + p, .card p + h3, .card ul + p, .card p + ul, .card h3 + ul { margin-top: 10px; } .card h3 { margin-top: 22px; } .card > h3:first-child, .card > h2:first-child { margin-top: 0; } .card p, .card li { line-height: 1.65; } .card ul { padding-left: 20px; } .card li { font-size: 0.94rem; color: var(--ink-2); margin-top: 6px; } .card a { color: var(--pine); font-weight: 600; } .card strong { color: var(--ink); } /* Der Klassenname steckt in den Übersetzungstexten – deshalb bleibt er. */ .subpage-mail { font-family: var(--mono); font-size: 0.95rem; color: var(--pine); font-weight: 600; } .stand { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); margin-top: 18px; } /* --- Symbole in der Leistungsliste --------------------------------------- */ /* Strichzeichnungen im Stil von Lucide (ISC-Lizenz, frei verwendbar), direkt im HTML statt als Schriftart oder Bilddatei: kein zusätzlicher Ladevorgang, und sie nehmen die Textfarbe an. */ .perks li { align-items: start; } .perk-icon { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 13px; border: 1.5px solid var(--hairline); background: var(--paper-soft); color: var(--pine); transition: transform .2s ease, border-color .2s ease, background .2s ease; } .perk-icon svg { width: 21px; height: 21px; } .perks li:hover .perk-icon { transform: translateY(-2px); border-color: var(--ink); background: #fff; } /* Der Haken zeichnet sich beim Überfahren nach – dieselbe Idee wie bei den animierten Icon-Bibliotheken, nur ohne deren React-Abhängigkeit. */ .perk-icon .draw { stroke-dasharray: 24; stroke-dashoffset: 0; transition: stroke-dashoffset .45s ease; } .perks li:hover .perk-icon .draw { stroke-dashoffset: 24; animation: perk-draw .45s ease forwards; } @keyframes perk-draw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .perk-icon, .perk-icon .draw { transition: none; animation: none; } .perks li:hover .perk-icon { transform: none; } }