/* * styles.css — Lernwelt FaBe * Gemeinsame Basis-Styles für alle HK-Seiten * Einbinden: * (Pfad anpassen falls Datei in Unterordner: href="../styles.css") */ /* ── FONTS (lokal) ── */ /* In jeder HTML-Datei im einbinden: */ /* ── CSS-VARIABLEN ── */ :root { --gold-dunkel: #1f3a5f; --gold-mittel: #2e5a8a; --gold-hell: #4a7eb8; --gold-blass: #e8f0f9; --gold-rand: #c8dcf0; --text: #2c3e50; --text-light: #566573; --bg: #F7F6F3; --weiss: #ffffff; --border: #c8dcf0; --card-shadow: 0 2px 12px rgba(184, 134, 11, .15); } /* ── RESET ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── BODY ── */ body { font-family: 'Assistant', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; } /* ── HEADER ── */ header { background: var(--gold-mittel); color: #fff; padding: 36px 60px 40px; } header .back-link { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .75); text-decoration: none; font-size: .85rem; font-weight: 600; letter-spacing: .04em; margin-bottom: 18px; transition: color .15s; } header .back-link:hover { color: #fff; } header .site-label { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; opacity: .75; margin-bottom: 8px; } header h1 { font-family: 'Assistant', sans-serif; font-size: 2.2rem; font-weight: 700; line-height: 1.2; margin-bottom: 8px; } header .header-sub { font-size: 1.05rem; opacity: .85; font-weight: 400; max-width: 580px; } /* ── MAIN ── */ main { flex: 1; padding: 48px 60px 80px; max-width: 1000px; width: 100%; margin: 0 auto; } /* ── INTRO-BOX ── */ .intro-box { background: var(--gold-blass); border-left: 4px solid var(--gold-hell); border-radius: 8px; padding: 18px 22px; margin-bottom: 40px; font-size: .97rem; color: var(--gold-dunkel); max-width: 62ch; /* Zeilenlänge auf ~65–72 Zeichen begrenzen */ } .intro-box strong { font-weight: 700; } .intro-box a { color: var(--gold-dunkel); font-weight: 600; } /* ── SECTION LABEL ── */ .section-label { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-light); margin-bottom: 20px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } /* ── TAG ── */ .tag { display: inline-block; background: var(--gold-blass); color: var(--gold-dunkel); font-size: .73rem; font-weight: 600; padding: 3px 10px; border-radius: 20px; margin-right: 4px; margin-bottom: 4px; border: 1px solid var(--gold-rand); } /* ── RESPONSIVE ── */ @media (max-width: 700px) { header { padding: 28px 24px 32px; } main { padding: 32px 24px 60px; } header h1 { font-size: 1.7rem; } } /* ── ÜBUNGS-KACHELN ── */ .uebung-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; margin-top: 32px; } .uebung-card { display: flex; flex-direction: column; background: var(--weiss); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--card-shadow); text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; overflow: hidden; } .uebung-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(31,58,95,.18); } .uebung-card-header { background: var(--gold-dunkel); color: var(--weiss); padding: 20px 24px 16px; } .kapitel-label { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .75; margin-bottom: 6px; } .uebung-card-header h2 { font-size: 1.15rem; font-family: 'Assistant', sans-serif; font-weight: 700; margin-bottom: 6px; line-height: 1.3; } .uebung-typ { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .7; } .uebung-card-body { padding: 18px 24px; flex: 1; font-size: .9rem; color: var(--text); line-height: 1.6; } .uebung-card-footer { padding: 14px 24px; background: var(--gold-blass); color: var(--gold-dunkel); font-weight: 700; font-size: .85rem; border-top: 1px solid var(--gold-rand); } @media (max-width: 700px) { .uebung-grid { grid-template-columns: 1fr; } } /* Merke-Kaestchen Gluehbirne Icon */ .merke-label .icon { font-size: 0; width: 22px; height: 22px; display: inline-block; background-image: url('/die-gluhbirne (1).png'); background-size: contain; background-repeat: no-repeat; background-position: center; } /* ── TITEL-AUSRICHTUNG AN TEXTSPALTE ── */ /* h2 (.chapter-heading) und h3 erhalten dieselbe Breite wie

(65ch bei 17px Body-Schrift). max-width: 65ch wäre hier zu breit, weil ch relativ zur eigenen Schriftgrösse ist (30px bzw. 20px). 34.3125rem = 549px = 65ch × 17px / 16px-Root = exakt gleiche Spalte. */ .content .chapter-heading, .content h3 { max-width: 34.3125rem; margin-inline: auto; }