/* ========================================================================== * Landingpage socialworld.bot — gc_sw_landing_v1 (31.08.) * * Farbwelt und Rhythmus folgen socialnet.bot: dunkelblaue Bänder (#0e1a2e) * wechseln mit hellen Blöcken, Teal als Akzent, großzügige Abstände. * * 🔴 EIGENE KLASSEN MIT PRÄFIX `swl-`. Das Panel benutzt `sw-`; würden beide * denselben Namensraum teilen, änderte eine Korrektur an der Landingpage * unbemerkt das Dashboard. Zwei Flächen, zwei Präfixe. * * Die Seite ist bewusst NICHT vom Farbschema des Betrachters abhängig: eine * Marketing-Seite hat ein Aussehen, keine zwei. Das Panel dahinter hat weiterhin * hell und dunkel. * ======================================================================= */ .swl { --swl-dunkel: #0b1524; --swl-dunkel2: #0e1a2e; --swl-karte: #16243c; --swl-rand: #24344f; --swl-text: #eaf1fb; --swl-leise: #9db0c9; --swl-akzent: #2ea3a0; --swl-akzent2: #38bdb9; /* gc_swl_faq_nr_auf_hell_v1 — der Akzent oben ist fuer die DUNKLEN Baender gemacht (dort 8:1). Auf den hellen Bloecken (#fff / --swl-hell) bleiben davon 3.06:1, also unter der Grenze 4.5 fuer normale Schrift. Wer Akzent auf hellem Grund braucht, nimmt DIESES Token — gleicher Farbton, 5.27:1. */ --swl-akzentAufHell: #1a7875; --swl-tinte: #04191c; --swl-hell: #f5f8fc; --swl-hellText:#0d1a2b; --swl-hellLeise:#48607d; background: var(--swl-dunkel); color: var(--swl-text); font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow-x: hidden; /* nur hier, nicht global */ } .swl * { box-sizing: border-box; } .swl a { color: inherit; text-decoration: none; } .swl h1, .swl h2, .swl h3, .swl h4 { margin: 0 0 .5em; line-height: 1.15; font-weight: 700; } .swl h1 { font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -.02em; } .swl h2 { font-size: clamp(1.55rem, 3.4vw, 2.4rem); letter-spacing: -.01em; } .swl h3 { font-size: 1.14rem; } .swl p { margin: 0 0 1em; } .swl-breit { width: min(1180px, 100% - 2.5rem); margin-inline: auto; } .swl-schmal { width: min(820px, 100% - 2.5rem); } .swl-mitte { text-align: center; } .swl-lead { font-size: 1.08rem; color: var(--swl-leise); max-width: 62ch; } .swl-mitte .swl-lead { margin-inline: auto; } .swl-klein { font-size: .9rem; color: var(--swl-leise); } /* ---------- Knöpfe ---------- */ .swl-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; /* Tap-Ziel, auch auf dem Telefon */ padding: .62rem 1.15rem; border-radius: 10px; background: var(--swl-akzent); color: var(--swl-tinte); font-weight: 650; font-size: .95rem; border: 1px solid transparent; transition: background .15s ease, transform .15s ease; } .swl-btn:hover { background: var(--swl-akzent2); } .swl-btn:active { transform: translateY(1px); } .swl-btn--leer { background: transparent; color: var(--swl-text); border-color: var(--swl-rand); } .swl-btn--leer:hover { background: rgba(255,255,255,.06); } .swl-btn--gross { padding: .85rem 1.6rem; font-size: 1rem; } .swl-cta-zeile { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.6rem 0 .8rem; } .swl-cta-zeile--mitte { justify-content: center; } /* ---------- Kopf ---------- */ .swl-kopf { position: sticky; top: 0; z-index: 40; background: rgba(11,21,36,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--swl-rand); } .swl-kopf__innen { display: flex; align-items: center; gap: 1.5rem; padding: .8rem 0; } .swl-marke { display: inline-flex; align-items: center; gap: .6rem; font-weight: 750; font-size: 1.12rem; } .swl-marke img { display: block; } .swl-nav { display: flex; gap: 1.5rem; margin-inline: auto; font-size: .95rem; color: var(--swl-leise); } .swl-nav a:hover { color: var(--swl-text); } .swl-kopf__rechts { display: flex; align-items: center; gap: .6rem; } .swl-burger { display: none; background: none; border: 0; padding: 10px; cursor: pointer; } .swl-burger span { display: block; width: 22px; height: 2px; background: var(--swl-text); margin: 4px 0; border-radius: 2px; } .swl-mobilnav { display: none; flex-direction: column; gap: .2rem; padding: .5rem 1.25rem 1.25rem; border-top: 1px solid var(--swl-rand); } .swl-mobilnav a { padding: .7rem .2rem; min-height: 44px; display: flex; align-items: center; } /* ---------- Hero ---------- */ .swl-hero { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 5vw, 4rem); background: radial-gradient(1100px 520px at 78% -12%, rgba(46,163,160,.20), transparent 62%); } .swl-hero__innen { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .swl-drei { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: .9rem; } .swl-drei li { display: grid; gap: .1rem; padding-left: 1.6rem; position: relative; } .swl-drei li::before { content: ""; position: absolute; left: 0; top: .55em; width: .55rem; height: .55rem; border-radius: 50%; background: var(--swl-akzent); } .swl-drei strong { font-size: .98rem; } .swl-drei span { color: var(--swl-leise); font-size: .93rem; } /* Telefon-Attrappe: zeigt das Produkt, ohne einen Screenshot zu behaupten, den es so noch nicht gibt. */ .swl-hero__bild { display: flex; justify-content: center; } .swl-phone { width: min(330px, 100%); border-radius: 26px; padding: 1rem; background: linear-gradient(165deg, var(--swl-karte), #101c30); border: 1px solid var(--swl-rand); box-shadow: 0 30px 70px -30px rgba(0,0,0,.85); display: grid; gap: .6rem; } .swl-phone__kopf { display: flex; align-items: center; gap: .5rem; padding-bottom: .7rem; border-bottom: 1px solid var(--swl-rand); font-weight: 650; font-size: .92rem; } .swl-phone__blase { padding: .6rem .8rem; border-radius: 12px; font-size: .88rem; max-width: 86%; } .swl-phone__blase--bot { background: #1d304d; border-bottom-left-radius: 4px; } .swl-phone__blase--du { background: var(--swl-akzent); color: var(--swl-tinte); margin-left: auto; border-bottom-right-radius: 4px; font-weight: 600; } .swl-phone__karte { background: #0b1524; border: 1px solid var(--swl-rand); border-radius: 12px; padding: .8rem; display: grid; gap: .25rem; font-size: .88rem; } .swl-phone__preis { font-size: 1.25rem; font-weight: 700; color: var(--swl-akzent2); } /* ---------- Band ---------- */ .swl-band { border-block: 1px solid var(--swl-rand); background: rgba(255,255,255,.02); } .swl-band__innen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; padding: 1.6rem 0; text-align: center; } .swl-band strong { display: block; font-size: 1.7rem; color: var(--swl-akzent2); line-height: 1.1; } .swl-band span { color: var(--swl-leise); font-size: .9rem; } /* ---------- Abschnitte ---------- */ .swl-dunkel { background: var(--swl-dunkel2); padding: clamp(3rem, 7vw, 5.5rem) 0; } .swl-dunkel > .swl-breit > h2 { text-align: center; } .swl-hell { background: var(--swl-hell); color: var(--swl-hellText); padding: clamp(3rem, 7vw, 5.5rem) 0; } .swl-hell h2 { text-align: center; } .swl-hell .swl-lead { color: var(--swl-hellLeise); } /* Schritte */ .swl-schritte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; } .swl-schritte article { background: var(--swl-karte); border: 1px solid var(--swl-rand); border-radius: 16px; padding: 1.6rem; display: grid; gap: .3rem; align-content: start; } .swl-nr { font-size: .82rem; font-weight: 700; letter-spacing: .12em; color: var(--swl-akzent2); } .swl-schritte p { color: var(--swl-leise); font-size: .94rem; } .swl-schritte .swl-btn { justify-self: start; margin-top: .6rem; } /* Feature-Karten */ .swl-karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.5rem; } .swl-karten article { background: #fff; border: 1px solid #dde5f0; border-radius: 14px; padding: 1.4rem; } .swl-karten p { color: var(--swl-hellLeise); font-size: .94rem; margin: 0; } /* Zwei Modi */ .swl-zwei { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2.5rem; } .swl-zwei article { background: var(--swl-karte); border: 1px solid var(--swl-rand); border-radius: 16px; padding: 1.8rem; } .swl-zwei p { color: var(--swl-leise); margin: 0; } /* FAQ */ .swl-faq { background: #fff; border: 1px solid #dde5f0; border-radius: 12px; margin-top: .75rem; overflow: hidden; } .swl-faq summary { display: flex; align-items: center; gap: .9rem; cursor: pointer; padding: 1.05rem 1.2rem; font-weight: 640; min-height: 44px; list-style: none; } .swl-faq summary::-webkit-details-marker { display: none; } /* gc_swl_faq_nr_auf_hell_v1 — .swl-faq hat background:#fff; der dunkle Akzent mass hier 3.06:1 bei 14.4px/640 (Grenze 4.5, keine grosse Schrift). */ .swl-faq__nr { color: var(--swl-akzentAufHell); font-variant-numeric: tabular-nums; font-size: .9rem; } .swl-faq p { padding: 0 1.2rem 1.15rem 3.05rem; margin: 0; color: var(--swl-hellLeise); } .swl-faq[open] summary { border-bottom: 1px solid #eef3f9; } /* Abschluss */ .swl-abschluss { background: var(--swl-dunkel2); padding: clamp(3rem, 6vw, 4.5rem) 0; border-top: 1px solid var(--swl-rand); } /* ---------- Fuß ---------- */ .swl-fuss { background: var(--swl-dunkel); border-top: 1px solid var(--swl-rand); padding: 3rem 0 1.5rem; } .swl-fuss__innen { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; } .swl-fuss h4 { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--swl-leise); margin-bottom: .8rem; } .swl-fuss__innen > div > a { display: block; padding: .32rem 0; color: var(--swl-leise); font-size: .93rem; min-height: 32px; } .swl-fuss__innen > div > a:hover { color: var(--swl-text); } .swl-fuss__marke p { color: var(--swl-leise); font-size: .92rem; margin-top: .8rem; max-width: 34ch; } .swl-fuss__unten { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; border-top: 1px solid var(--swl-rand); margin-top: 2.5rem; padding-top: 1.25rem; color: var(--swl-leise); font-size: .85rem; } /* ---------- Schmale Bildschirme ---------- */ @media (max-width: 980px) { .swl-hero__innen { grid-template-columns: 1fr; } .swl-hero__bild { order: -1; } .swl-schritte, .swl-karten, .swl-zwei { grid-template-columns: 1fr; } .swl-fuss__innen { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { .swl-nav, .swl-kopf__rechts .swl-btn--leer { display: none; } .swl-burger { display: block; margin-left: auto; } .swl-kopf__rechts { margin-left: auto; } .swl-mobilnav { display: flex; } .swl-band__innen { grid-template-columns: 1fr; gap: 1.1rem; } .swl-fuss__innen { grid-template-columns: 1fr; } } /* Wer Bewegung reduziert haben will, bekommt sie nicht. */ @media (prefers-reduced-motion: reduce) { .swl * { transition: none !important; scroll-behavior: auto !important; } } /* ========================================================================== * ANMELDEFLÄCHE (gc_sw_login_v2, 31.08.) — Aufbau nach cp.socialnet.bot * * Zwei Spalten ab 980 px: links die Begründung, rechts die Karte mit dem * Formular. Darunter eine Spalte, Karte zuerst — wer auf dem Telefon zum * Anmelden kommt, will das Formular sehen und nicht erst Marketing scrollen. * ======================================================================= */ .swl-auth { min-height: 100vh; display: flex; flex-direction: column; } .swl-auth__kopf { display: flex; align-items: center; justify-content: space-between; width: min(1180px, 100% - 2.5rem); margin-inline: auto; padding: 1.1rem 0; } .swl-auth__innen { flex: 1; display: grid; grid-template-columns: 1fr 400px; gap: clamp(2rem, 6vw, 5rem); align-items: center; width: min(1180px, 100% - 2.5rem); margin-inline: auto; padding: clamp(1.5rem, 5vw, 4rem) 0; } .swl-auth__links h1 { font-size: clamp(1.9rem, 4.2vw, 2.6rem); } .swl-akzent { color: var(--swl-akzent2); } .swl-auth__links .swl-drei { margin-top: 2rem; } /* --- die Karte --- */ .swl-authkarte { background: var(--swl-karte); border: 1px solid var(--swl-rand); border-radius: 18px; padding: clamp(1.5rem, 3vw, 2rem); box-shadow: 0 30px 70px -35px rgba(0,0,0,.9); } .swl-authkarte h2 { font-size: 1.25rem; margin-bottom: 1.4rem; } .swl-feld { margin-bottom: 1.1rem; } .swl-feld label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: .4rem; } .swl-feld__zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .swl-feld__zeile label { margin-bottom: .4rem; } .swl-feld input { width: 100%; min-height: 44px; padding: .6rem .8rem; /* 🔴 16px, nicht kleiner: iOS Safari zoomt beim Fokus in JEDES Feld unter 16px hinein und der Nutzer steht danach auf einer verschobenen Seite. Das ist kein Geschmacks-, sondern ein Verhaltensgrund. */ font-size: 16px; color: var(--swl-text); background: #0b1524; border: 1px solid var(--swl-rand); border-radius: 10px; } .swl-feld input:focus-visible { outline: 2px solid var(--swl-akzent2); outline-offset: 1px; border-color: transparent; } .swl-feld input::placeholder { color: #5d7392; } .swl-merk { display: flex; align-items: center; gap: .55rem; margin: 0 0 1.3rem; } .swl-merk input { width: 20px; height: 20px; accent-color: var(--swl-akzent); } /* Das Label trägt das Tap-Ziel: der Kasten allein ist 20 px, zusammen mit dem Text wird daraus eine Fläche, die ein Daumen trifft. */ .swl-merk label { font-size: .9rem; color: var(--swl-leise); padding-block: 12px; cursor: pointer; } .swl-btn--voll { width: 100%; } .swl-hinweis { margin: 0 0 1.1rem; padding: .7rem .9rem; border-radius: 10px; font-size: .9rem; background: rgba(46,163,160,.12); border: 1px solid rgba(46,163,160,.35); } .swl-hinweis--rot { background: rgba(224,56,79,.12); border-color: rgba(224,56,79,.45); color: #ffc9d0; } .swl-authkarte__fuss { margin: 1.3rem 0 0; text-align: center; font-size: .9rem; color: var(--swl-leise); } .swl-authkarte__fuss a { color: var(--swl-akzent2); font-weight: 600; padding-block: 6px; } .swl-authrecht { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1rem; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--swl-rand); font-size: .78rem; color: var(--swl-leise); } .swl-authrecht a { color: var(--swl-leise); padding-block: 7px; } .swl-authrecht a:hover { color: var(--swl-text); } @media (max-width: 980px) { .swl-auth__innen { grid-template-columns: 1fr; gap: 2.2rem; } /* Karte zuerst — das Formular ist der Grund des Besuchs. */ .swl-auth__rechts { order: -1; } .swl-auth__links { text-align: center; } .swl-auth__links .swl-lead { margin-inline: auto; } .swl-auth__links .swl-drei { text-align: left; max-width: 22rem; margin-inline: auto; } } /* --- Tap-Ziele der Anmeldefläche (gemessen im Walk, 31.08.) --------------- * Befund: „Forgot your password?" 151×23, die Feld-Labels 23 px hoch, der * „Remember me"-Kasten 20×20, die Sprachwahl 72×23. Grenze ist 24 px. * * 🔴 DER TRICK, DER HIER NICHTS VERSCHIEBT: bei den Labels wird der bestehende * `margin-bottom` in ein `padding-bottom` umgewandelt. Der Abstand zum Feld * bleibt aufs Pixel gleich — aber der Abstand gehört jetzt zum Label und * vergrößert damit dessen Trefferfläche. Ein Klick auf ein Label fokussiert * sein Feld; das ist eine echte Bedienhandlung, kein Zierrat. * Ohne diesen Umweg müsste man `min-height` setzen und bekäme zusätzlichen * Abstand — die Seite würde für einen Messwert schlechter aussehen. */ .swl-feld label, .swl-feld__zeile label { margin-bottom: 0; padding-bottom: .4rem; } .swl-feld__zeile { align-items: center; } .swl-feld__zeile a.swl-klein { padding-block: 8px; } /* 23 → 39 px */ .swl-merk input { width: 24px; height: 24px; } /* 20 → 24 px */ /* Die Sprachwahl ist auf jeder Seite dieselbe Schaltfläche — sie hier zu korrigieren hilft auch der Landingpage. */ .swl-sprache__knopf, .swl-kopf__rechts .swl-sprache button { min-height: 32px; padding-block: 6px; } /* --- „ODER" -Trenner und X-Knopf (gc_sw_x_v1, 31.08.) -------------------- */ .swl-oder { display: flex; align-items: center; gap: .8rem; margin: 1.5rem 0 1.1rem; color: var(--swl-leise); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; } /* Die Linien entstehen aus dem Flex-Rest, nicht aus einer festen Breite — sonst reißt der Trenner, sobald die Übersetzung länger wird („ODER ANMELDEN MIT" ist im Deutschen deutlich breiter als im Englischen). */ .swl-oder::before, .swl-oder::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--swl-rand); } .swl-btn--x { gap: .6rem; } .swl-btn--x svg { flex: 0 0 auto; } /* ── gc_sw_fuss_rechtstexte_v1 (31.08.2026) ──────────────────────────────── Die Rechtsspalte trägt jetzt NEUN Einträge statt drei — die sechs Netfield-Pflichtdokumente und der DMCA-Verweis sind dazugekommen. In der 1fr-Spalte des Vierer-Rasters wäre das eine sehr lange Leiste neben drei kurzen; die Spalte bekommt deshalb mehr Grundbreite und darf ab 1100px zweispaltig umbrechen. 🔴 `min-height: 32px` bleibt: die Einträge sind Tap-Ziele, und die Erfahrung aus drei Fällen an einem Tag war, dass ein Textlink ohne senkrechtes Polster bei ~19px landet. `padding` statt `height`, weil ein `` hier als Block gerendert wird, aber die Regel sonst wieder auf ein Inline-Element trifft und wirkungslos ist. */ .swl-fuss__innen { grid-template-columns: 1.6fr 1fr 1fr 1.4fr; } .swl-fuss__recht > a { padding: .34rem 0; } @media (min-width: 1100px) { .swl-fuss__recht { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.2rem; } .swl-fuss__recht h4 { grid-column: 1 / -1; } } /* --------------------------------------------------------------------------- * gc_swl_btn_tinte_spezifitaet_v1 (02.09.2026) * * 🔴 BEFUND, auf dem S26 gemessen und mit einer ZWEITEN Methode bestaetigt: * die Haupt-Handlungsknoepfe der Startseite (Create account, Create a creator /* --------------------------------------------------------------------------- * gc_swl_btn_tinte_spezifitaet_v1 (02.09.2026) * * BEFUND, auf dem S26 gemessen und mit einer ZWEITEN, unabhaengigen Methode * bestaetigt (Pixelmessung im Walk: 2.69:1 -- CSS-Rechnung im Browser: 2.69:1): * die Haupt-Handlungsknoepfe der Startseite ("Create account", "Create a creator * account") standen bei 2,69:1, also fast weisse Schrift auf Tuerkis. * * URSACHE ist kein falscher Farbwert, sondern SPEZIFITAET: * .swl-btn { color: var(--swl-tinte) } -> 0,1,0 * .swl a { color: inherit } -> 0,1,1 GEWINNT * Jeder ANKER-Knopf erbte damit die helle Schrift des dunklen Kopfbereichs. * Der