| <!DOCTYPE html> |
| <html lang="de"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
| <title>Bielefeld Digital – KI, Open Data & Civic Tech</title> |
|
|
| <meta |
| name="description" |
| content="Bielefeld Digital ist eine unabhängige Community rund um KI, Open Data, Civic Tech, Forschung und digitale Projekte in Bielefeld." |
| > |
|
|
| <meta name="theme-color" content="#d62929"> |
|
|
| |
| <link rel="icon" type="image/png" href="logo-bielefeld.png"> |
|
|
| <style> |
| :root { |
| --bg: #f6f6f4; |
| --surface: #ffffff; |
| --text: #171717; |
| --muted: #666666; |
| --border: #e3e3df; |
| --accent: #d62929; |
| --accent-dark: #ae1818; |
| --soft-red: #fff1f1; |
| --soft-blue: #eef6ff; |
| --dark: #16181d; |
| --max: 1120px; |
| --shadow: 0 12px 35px rgba(20,20,20,.07); |
| } |
| |
| * { |
| box-sizing: border-box; |
| } |
| |
| html { |
| scroll-behavior: smooth; |
| } |
| |
| body { |
| margin: 0; |
| background: var(--bg); |
| color: var(--text); |
| font-family: |
| Inter, |
| -apple-system, |
| BlinkMacSystemFont, |
| "Segoe UI", |
| sans-serif; |
| line-height: 1.6; |
| } |
| |
| a { |
| color: inherit; |
| text-decoration: none; |
| } |
| |
| .container { |
| width: min(calc(100% - 36px), var(--max)); |
| margin: 0 auto; |
| } |
| |
| |
| |
| |
| header { |
| position: sticky; |
| top: 0; |
| z-index: 100; |
| background: rgba(255,255,255,.94); |
| backdrop-filter: blur(15px); |
| border-bottom: 1px solid var(--border); |
| } |
| |
| .nav { |
| min-height: 82px; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 30px; |
| } |
| |
| .brand { |
| display: flex; |
| align-items: center; |
| gap: 14px; |
| font-weight: 850; |
| font-size: 1.12rem; |
| letter-spacing: -.03em; |
| } |
| |
| |
| |
| |
| |
| .brand-logo { |
| width: 58px; |
| height: 58px; |
| object-fit: contain; |
| display: block; |
| border-radius: 12px; |
| background: white; |
| } |
| |
| .brand-text { |
| display: flex; |
| flex-direction: column; |
| line-height: 1.15; |
| } |
| |
| .brand-text small { |
| margin-top: 4px; |
| font-size: .72rem; |
| color: var(--muted); |
| font-weight: 600; |
| letter-spacing: .02em; |
| } |
| |
| .nav-links { |
| display: flex; |
| align-items: center; |
| gap: 28px; |
| font-size: .9rem; |
| font-weight: 650; |
| color: #444; |
| } |
| |
| .nav-links a { |
| position: relative; |
| } |
| |
| .nav-links a:hover { |
| color: var(--accent); |
| } |
| |
| |
| |
| |
| .hero { |
| padding: 90px 0 95px; |
| overflow: hidden; |
| position: relative; |
| background: |
| radial-gradient( |
| circle at 88% 15%, |
| rgba(214,41,41,.11), |
| transparent 29% |
| ), |
| radial-gradient( |
| circle at 72% 90%, |
| rgba(71,137,220,.08), |
| transparent 30% |
| ), |
| var(--surface); |
| border-bottom: 1px solid var(--border); |
| } |
| |
| .hero::after { |
| content: ""; |
| position: absolute; |
| width: 420px; |
| height: 420px; |
| border: 70px solid rgba(214,41,41,.04); |
| border-radius: 50%; |
| right: -100px; |
| top: -150px; |
| pointer-events: none; |
| } |
| |
| .hero-content { |
| position: relative; |
| z-index: 2; |
| max-width: 850px; |
| } |
| |
| .eyebrow { |
| display: inline-flex; |
| align-items: center; |
| gap: 10px; |
| color: var(--accent); |
| font-size: .78rem; |
| font-weight: 850; |
| text-transform: uppercase; |
| letter-spacing: .11em; |
| margin-bottom: 23px; |
| } |
| |
| .eyebrow::before { |
| content: ""; |
| width: 29px; |
| height: 3px; |
| border-radius: 30px; |
| background: var(--accent); |
| } |
| |
| h1 { |
| margin: 0; |
| max-width: 900px; |
| font-size: clamp(3.8rem, 9vw, 7rem); |
| line-height: .93; |
| letter-spacing: -.07em; |
| } |
| |
| .hero-claim { |
| margin-top: 24px; |
| max-width: 760px; |
| font-size: clamp(1.45rem, 3vw, 2.15rem); |
| line-height: 1.25; |
| font-weight: 690; |
| letter-spacing: -.03em; |
| } |
| |
| .hero-copy { |
| max-width: 720px; |
| margin: 24px 0 0; |
| color: var(--muted); |
| font-size: 1.08rem; |
| } |
| |
| .hero-tags { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 9px; |
| margin-top: 31px; |
| } |
| |
| .tag { |
| padding: 8px 13px; |
| border: 1px solid var(--border); |
| border-radius: 999px; |
| background: white; |
| font-size: .81rem; |
| font-weight: 700; |
| } |
| |
| |
| |
| |
| main { |
| padding: 20px 0 70px; |
| } |
| |
| .section { |
| padding-top: 68px; |
| } |
| |
| .section-head { |
| max-width: 740px; |
| margin-bottom: 27px; |
| } |
| |
| .section-kicker { |
| margin-bottom: 7px; |
| color: var(--accent); |
| font-size: .77rem; |
| font-weight: 850; |
| text-transform: uppercase; |
| letter-spacing: .10em; |
| } |
| |
| .section-head h2 { |
| margin: 0; |
| font-size: clamp(2rem, 4vw, 2.8rem); |
| line-height: 1.05; |
| letter-spacing: -.055em; |
| } |
| |
| .section-head p { |
| margin: 13px 0 0; |
| color: var(--muted); |
| font-size: .99rem; |
| } |
| |
| |
| |
| |
| .grid { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| gap: 17px; |
| } |
| |
| .card { |
| position: relative; |
| min-height: 250px; |
| padding: 26px; |
| border: 1px solid var(--border); |
| border-radius: 21px; |
| background: var(--surface); |
| box-shadow: var(--shadow); |
| overflow: hidden; |
| transition: |
| transform .18s ease, |
| box-shadow .18s ease, |
| border-color .18s ease; |
| } |
| |
| .card:hover { |
| transform: translateY(-3px); |
| border-color: #d3d3cf; |
| box-shadow: 0 17px 42px rgba(20,20,20,.10); |
| } |
| |
| .card small { |
| color: var(--accent); |
| font-size: .73rem; |
| font-weight: 850; |
| text-transform: uppercase; |
| letter-spacing: .08em; |
| } |
| |
| .card h3 { |
| margin: 13px 0 10px; |
| font-size: 1.32rem; |
| line-height: 1.18; |
| letter-spacing: -.035em; |
| } |
| |
| .card p { |
| margin: 0 0 22px; |
| color: var(--muted); |
| font-size: .91rem; |
| } |
| |
| .card a { |
| position: absolute; |
| left: 26px; |
| bottom: 23px; |
| color: var(--accent); |
| font-size: .88rem; |
| font-weight: 800; |
| } |
| |
| .card a:hover { |
| color: var(--accent-dark); |
| } |
| |
| .card-icon { |
| width: 44px; |
| height: 44px; |
| display: grid; |
| place-items: center; |
| border-radius: 13px; |
| margin-bottom: 19px; |
| background: var(--soft-red); |
| font-size: 1.35rem; |
| } |
| |
| |
| |
| |
| .regional-card { |
| background: |
| linear-gradient( |
| 135deg, |
| rgba(214,41,41,.05), |
| rgba(255,255,255,1) 55% |
| ); |
| } |
| |
| |
| |
| |
| .project-box { |
| position: relative; |
| overflow: hidden; |
| margin-top: 74px; |
| padding: 56px; |
| border-radius: 28px; |
| background: |
| radial-gradient( |
| circle at 90% 10%, |
| rgba(214,41,41,.30), |
| transparent 31% |
| ), |
| var(--dark); |
| color: white; |
| } |
| |
| .project-box::after { |
| content: ""; |
| position: absolute; |
| width: 330px; |
| height: 330px; |
| border-radius: 50%; |
| border: 55px solid rgba(255,255,255,.035); |
| right: -100px; |
| bottom: -140px; |
| } |
| |
| .project-box-content { |
| position: relative; |
| z-index: 2; |
| max-width: 760px; |
| } |
| |
| .project-box h2 { |
| margin: 0; |
| font-size: clamp(2.3rem, 5vw, 3.8rem); |
| line-height: 1; |
| letter-spacing: -.06em; |
| } |
| |
| .project-box p { |
| max-width: 670px; |
| margin: 20px 0 0; |
| color: rgba(255,255,255,.73); |
| font-size: 1rem; |
| } |
| |
| |
| |
| |
| footer { |
| margin-top: 55px; |
| padding: 34px 0 42px; |
| background: white; |
| border-top: 1px solid var(--border); |
| color: var(--muted); |
| font-size: .82rem; |
| } |
| |
| .footer-row { |
| display: flex; |
| justify-content: space-between; |
| gap: 25px; |
| flex-wrap: wrap; |
| } |
| |
| .footer-brand { |
| color: var(--text); |
| font-weight: 750; |
| } |
| |
| .disclaimer { |
| max-width: 710px; |
| margin-top: 14px; |
| line-height: 1.55; |
| } |
| |
| |
| |
| |
| @media (max-width: 900px) { |
| .grid { |
| grid-template-columns: repeat(2, 1fr); |
| } |
| } |
| |
| @media (max-width: 680px) { |
| .nav { |
| min-height: 72px; |
| } |
| |
| .brand-logo { |
| width: 48px; |
| height: 48px; |
| } |
| |
| .nav-links { |
| display: none; |
| } |
| |
| .hero { |
| padding: 68px 0 72px; |
| } |
| |
| h1 { |
| font-size: 4rem; |
| } |
| |
| .grid { |
| grid-template-columns: 1fr; |
| } |
| |
| .card { |
| min-height: 230px; |
| } |
| |
| .project-box { |
| padding: 38px 28px; |
| } |
| } |
| </style> |
| </head> |
|
|
|
|
| <body> |
|
|
| <header> |
| <div class="container nav"> |
|
|
| |
| <a class="brand" href="#"> |
| <img |
| src="logo-bielefeld.png" |
| alt="Bielefeld Logo" |
| class="brand-logo" |
| > |
|
|
| <span class="brand-text"> |
| Bielefeld Digital |
| <small>Unabhängige Community</small> |
| </span> |
| </a> |
|
|
| <nav class="nav-links"> |
| <a href="#open-data">Open Data</a> |
| <a href="#ki">KI & Forschung</a> |
| <a href="#community">Community</a> |
| </nav> |
|
|
| </div> |
| </header> |
|
|
|
|
| <section class="hero"> |
|
|
| <div class="container"> |
|
|
| <div class="hero-content"> |
|
|
| <div class="eyebrow"> |
| Unabhängige Community |
| </div> |
|
|
| <h1> |
| Bielefeld<br>Digital |
| </h1> |
|
|
| <div class="hero-claim"> |
| Digitales in der Stadt entdecken. |
| </div> |
|
|
| <p class="hero-copy"> |
| Eine unabhängige Community rund um künstliche Intelligenz, |
| Open Data, Civic Tech, Forschung und digitale Projekte |
| in Bielefeld. |
| </p> |
|
|
| <div class="hero-tags"> |
| <span class="tag">KI</span> |
| <span class="tag">Open Data</span> |
| <span class="tag">Civic Tech</span> |
| <span class="tag">Forschung</span> |
| <span class="tag">Smart City</span> |
| </div> |
|
|
| </div> |
|
|
| </div> |
|
|
| </section> |
|
|
|
|
| <main class="container"> |
|
|
|
|
| |
|
|
| <section class="section" id="open-data"> |
|
|
| <div class="section-head"> |
|
|
| <div class="section-kicker"> |
| Daten & Stadt |
| </div> |
|
|
| <h2> |
| Open Data & Stadt |
| </h2> |
|
|
| <p> |
| Öffentliche Daten, Karten und digitale Informationsangebote |
| können eine Grundlage für neue Anwendungen, Analysen und |
| lokale KI-Projekte bilden. |
| </p> |
|
|
| </div> |
|
|
|
|
| <div class="grid"> |
|
|
|
|
| <article class="card"> |
|
|
| <div class="card-icon">◫</div> |
|
|
| <small>Offene Daten</small> |
|
|
| <h3> |
| Open Data Bielefeld |
| </h3> |
|
|
| <p> |
| Das zentrale Open-Data-Angebot der Stadt mit frei |
| zugänglichen Datensätzen aus unterschiedlichen Bereichen. |
| </p> |
|
|
| <a |
| href="https://open-data.bielefeld.de/" |
| target="_blank" |
| rel="noopener"> |
| Open Data öffnen → |
| </a> |
|
|
| </article> |
|
|
|
|
| <article class="card"> |
|
|
| <div class="card-icon">⌖</div> |
|
|
| <small>Karten & Geodaten</small> |
|
|
| <h3> |
| Geoportal Bielefeld |
| </h3> |
|
|
| <p> |
| Karten, Geodaten und räumliche Informationen rund um |
| Stadtgebiet, Planung und weitere kommunale Themen. |
| </p> |
|
|
| <a |
| href="https://www.bielefeld.de/geoportal" |
| target="_blank" |
| rel="noopener"> |
| Geoportal ansehen → |
| </a> |
|
|
| </article> |
|
|
|
|
| <article class="card"> |
|
|
| <div class="card-icon">↗</div> |
|
|
| <small>Community Dataset</small> |
|
|
| <h3> |
| Open Data Bielefeld auf Hugging Face |
| </h3> |
|
|
| <p> |
| Eine kuratierte Sammlung öffentlich zugänglicher |
| Datenquellen aus Bielefeld für Forschung, Civic Tech |
| und KI-Anwendungen. |
| </p> |
|
|
| <a |
| href="https://huggingface.co/datasets/bielefeld/open-data-bielefeld" |
| target="_blank" |
| rel="noopener"> |
| Dataset entdecken → |
| </a> |
|
|
| </article> |
|
|
| </div> |
|
|
| </section> |
|
|
|
|
|
|
| |
|
|
| <section class="section" id="ki"> |
|
|
| <div class="section-head"> |
|
|
| <div class="section-kicker"> |
| Technologie |
| </div> |
|
|
| <h2> |
| KI & Forschung |
| </h2> |
|
|
| <p> |
| Bielefeld verfügt über Hochschulen, Forschungseinrichtungen |
| und Projekte an der Schnittstelle von Informatik, |
| künstlicher Intelligenz und Mensch-Technik-Interaktion. |
| </p> |
|
|
| </div> |
|
|
|
|
| <div class="grid"> |
|
|
|
|
| <article class="card"> |
|
|
| <div class="card-icon">AI</div> |
|
|
| <small>Universität Bielefeld</small> |
|
|
| <h3> |
| CITEC |
| </h3> |
|
|
| <p> |
| Forschung zu kognitiver Interaktionstechnologie, |
| intelligenten Systemen und der Zusammenarbeit |
| zwischen Mensch und Maschine. |
| </p> |
|
|
| <a |
| href="https://www.cit-ec.de/" |
| target="_blank" |
| rel="noopener"> |
| CITEC entdecken → |
| </a> |
|
|
| </article> |
|
|
|
|
| <article class="card"> |
|
|
| <div class="card-icon">⌘</div> |
|
|
| <small>Wissenschaft</small> |
|
|
| <h3> |
| Universität Bielefeld |
| </h3> |
|
|
| <p> |
| Forschung und Lehre unter anderem in Informatik, |
| Datenwissenschaften, intelligenten Systemen und |
| interdisziplinären Technologiefeldern. |
| </p> |
|
|
| <a |
| href="https://www.uni-bielefeld.de/" |
| target="_blank" |
| rel="noopener"> |
| Universität ansehen → |
| </a> |
|
|
| </article> |
|
|
|
|
| <article class="card"> |
|
|
| <div class="card-icon">◇</div> |
|
|
| <small>Hochschule</small> |
|
|
| <h3> |
| Forschung an der HSBI |
| </h3> |
|
|
| <p> |
| Die Hochschule Bielefeld verbindet angewandte Forschung |
| mit Digitalisierung, Technik, Wirtschaft und |
| gesellschaftlichen Fragestellungen. |
| </p> |
|
|
| <a |
| href="https://www.hsbi.de/forschung" |
| target="_blank" |
| rel="noopener"> |
| Forschung entdecken → |
| </a> |
|
|
| </article> |
|
|
| </div> |
|
|
| </section> |
|
|
|
|
|
|
| |
|
|
| <section class="section" id="community"> |
|
|
| <div class="section-head"> |
|
|
| <div class="section-kicker"> |
| Tech & Community |
| </div> |
|
|
| <h2> |
| Digitale Projekte in Bielefeld |
| </h2> |
|
|
| <p> |
| Initiativen, Plattformen und regionale Angebote, die |
| digitale Themen mit Bielefeld und Ostwestfalen verbinden. |
| </p> |
|
|
| </div> |
|
|
|
|
| <div class="grid"> |
|
|
|
|
| <article class="card"> |
|
|
| <div class="card-icon">↗</div> |
|
|
| <small>Startup-Ökosystem</small> |
|
|
| <h3> |
| Founders Foundation |
| </h3> |
|
|
| <p> |
| Bielefelder Plattform und Community für digitale |
| Gründungen, Entrepreneurship und technologische |
| Geschäftsmodelle. |
| </p> |
|
|
| <a |
| href="https://foundersfoundation.de/" |
| target="_blank" |
| rel="noopener"> |
| Mehr erfahren → |
| </a> |
|
|
| </article> |
|
|
|
|
| <article class="card"> |
|
|
| <div class="card-icon">+</div> |
|
|
| <small>Civic Tech</small> |
|
|
| <h3> |
| Open Data nutzen |
| </h3> |
|
|
| <p> |
| Offene Daten können für Visualisierungen, |
| lokale Anwendungen, Analysen und KI-Agenten |
| weiterverwendet werden. |
| </p> |
|
|
| <a |
| href="https://open-data.bielefeld.de/" |
| target="_blank" |
| rel="noopener"> |
| Daten entdecken → |
| </a> |
|
|
| </article> |
|
|
|
|
| <article class="card regional-card"> |
|
|
| <div class="card-icon">B</div> |
|
|
| <small>Regionale Plattform</small> |
|
|
| <h3> |
| Bielefeld auf ostwestfalen.nrw |
| </h3> |
|
|
| <p> |
| Orte, Veranstaltungen, Unternehmen und aktuelle Themen |
| aus Bielefeld und der Region – kuratiert auf |
| ostwestfalen.nrw. |
| </p> |
|
|
| <a |
| href="https://ostwestfalen.nrw/bielefeld/" |
| target="_blank" |
| rel="noopener"> |
| Bielefeld entdecken → |
| </a> |
|
|
| </article> |
|
|
| </div> |
|
|
| </section> |
|
|
|
|
|
|
| |
|
|
| <section class="project-box"> |
|
|
| <div class="project-box-content"> |
|
|
| <div class="section-kicker"> |
| Bielefeld Digital |
| </div> |
|
|
| <h2> |
| Ein wachsendes Projekt. |
| </h2> |
|
|
| <p> |
| Bielefeld Digital sammelt interessante Quellen, |
| Projekte und Entwicklungen rund um digitale Technologien |
| in der Stadt. Die Seite wird schrittweise ergänzt und |
| weiterentwickelt. |
| </p> |
|
|
| </div> |
|
|
| </section> |
|
|
|
|
| </main> |
|
|
|
|
| <footer> |
|
|
| <div class="container"> |
|
|
| <div class="footer-row"> |
|
|
| <div class="footer-brand"> |
| Bielefeld Digital · Bielefeld Community |
| </div> |
|
|
| <div> |
| KI · Open Data · Civic Tech · Forschung |
| </div> |
|
|
| </div> |
|
|
| <div class="disclaimer"> |
| Bielefeld Digital ist ein unabhängiges Community-Projekt. |
| Dieses Angebot ist nicht mit der Stadt Bielefeld oder ihrer |
| Verwaltung verbunden. |
| </div> |
|
|
| </div> |
|
|
| </footer> |
|
|
| </body> |
| </html> |
