Über den Channel
About the Channel
- - - - + +Unsere Themen
Our Topics
- - - - - - + + + +Was wir nicht wollen
What we do NOT want
- - - - - - - - + + + + + +@@ -217,7 +80,6 @@
diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..d07ed3e --- /dev/null +++ b/css/styles.css @@ -0,0 +1,96 @@ +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } +:root { + --black: #000000; + --white: #ffffff; + --blue: #1e40af; + --gray1: #f3f4f6; + --gray2: #e5e7eb; +} +html { scroll-behavior: smooth; } +body { + font-family: 'Inter', system-ui, sans-serif; + background: var(--white); + color: var(--black); + line-height: 1.6; +} +a { color: var(--blue); text-decoration: none; } +a:hover { text-decoration: underline; } + +.container { max-width: 900px; margin: 0 auto; padding: 0 24px; } + +.header { + display: flex; + justify-content: center; + align-items: center; + padding: 24px 0; +} +.brand { font-size: 1.75rem; font-weight: 800; } +.lang-select { + display: flex; gap: 8px; background: var(--gray1); + padding: 4px; border-radius: 8px; +} +.lang-btn { + padding: 6px 14px; font-size: .85rem; font-weight: 600; + border: none; border-radius: 6px; background: transparent; + cursor: pointer; color: var(--black); transition: all .2s; +} +.lang-btn.active { background: var(--white); box-shadow: 0 1px 3px rgba(0,0,0,.1); } + +.intro { padding: 48px 0 32px; text-align: center; } +.intro h1 { font-size: 2.5rem; font-weight: 800; line-height: 1.2; margin-bottom: 16px; } +.intro p { font-size: 1.1rem; color: #4b5563; max-width: 600px; margin: 0 auto; } + +.main-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; } +.news-col h2 { font-size: 1.75rem; font-weight: 800; border-bottom: 2px solid var(--black); padding-bottom: 12px; margin-bottom: 24px; } +.news-item { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--gray2); } +.news-date { font-size: .75rem; color: #9ca3af; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; } +.news-item h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 10px; line-height: 1.3; } +.news-item p { font-size: 1rem; color: #4b5563; line-height: 1.6; } +.news-tag { + display: inline-block; font-size: .75rem; font-weight: 600; + color: var(--blue); text-transform: uppercase; letter-spacing: .04em; + border: 1px solid var(--blue); padding: 4px 10px; border-radius: 20px; margin-top: 10px; +} + +.sidebar-col { position: sticky; top: 20px; height: fit-content; } +.login-panel { background: var(--gray1); padding: 32px; border-radius: 16px; border: 1px solid var(--gray2); } +.newsletter-panel { background: var(--gray1); padding: 32px; border-radius: 16px; border: 1px solid var(--gray2); } +.notebook { background: var(--white); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,.1); } +.newsletter-panel h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--gray2); } +.notebook .tabs { display: flex; border-bottom: 2px solid var(--gray2); } +.notebook .tab { flex: 1; padding: 14px; text-align: center; font-weight: 600; cursor: pointer; border: none; background: #f9fafb; color: #6b7280; } +.notebook .tab.active { background: var(--white); color: var(--black); border-bottom: 3px solid var(--blue); } +.notebook .tab-content { padding: 24px; min-height: 200px; } +.notebook .hidden { display: none; } +.login-panel h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--gray2); } +.form-group { margin-bottom: 16px; } +.form-group label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 6px; } +.form-group input { + width: 100%; padding: 12px; border: 1px solid var(--gray2); border-radius: 8px; + font-size: 1rem; outline: none; transition: border-color .2s; +} +.form-group input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30,64,175,.1); } +.btn-primary { width: 100%; padding: 12px; background: var(--black); color: var(--white); border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background .2s; } +.btn-primary:hover { background: var(--blue); } +.btn-secondary { width: 100%; padding: 10px; background: var(--gray1); border: 1px solid var(--gray2); border-radius: 8px; font-size: .9rem; font-weight: 600; cursor: pointer; margin-top: 12px; } +.btn-secondary:hover { background: #e5e7eb; } +.hidden { display: none; } +.success-msg { padding: 12px; background: #d1fae5; border: 1px solid #34d399; border-radius: 8px; color: #065f46; margin-bottom: 16px; text-align: center; } + +.footer { margin-top: 64px; padding-top: 32px; border-top: 2px solid var(--black); text-align: center; font-size: 1rem; } +.footer a { font-weight: 600; text-decoration: none; } +.footer a:hover { text-decoration: underline; } + +@media (max-width: 768px) { + .main-grid { grid-template-columns: 1fr; } + .sidebar-col { position: static; } + .brand { font-size: 1.4rem; } + .header { flex-direction: column; gap: 12px; } +} + +.hide-de { display: none; } +.hide-en { display: none; } +[data-lang="de"] .hide-de { display: block; } +[data-lang="en"] .hide-en { display: block; } +[data-lang="de"] .hide-en { display: none; } +[data-lang="en"] .hide-de { display: none; } diff --git a/index.html b/index.html index 1f4de5c..5efb9ac 100644 --- a/index.html +++ b/index.html @@ -8,113 +8,14 @@ - +
@@ -217,7 +80,6 @@