diff --git a/css/main.css b/css/main.css index 7077513..307ccac 100644 --- a/css/main.css +++ b/css/main.css @@ -1,6 +1,3 @@ -/* ========================= - Modernes Responsive Design -========================= */ * { margin: 0; @@ -8,27 +5,23 @@ box-sizing: border-box; } -:root { +/* Farben */ - /* Farbpalette */ +:root { --primary: #2563eb; --primary-dark: #1d4ed8; - --background: #f5f7fb; + --background: #f4f7fb; --surface: #ffffff; --text: #1e293b; --text-light: #64748b; - --border: #e2e8f0; - - /* Schatten */ - --shadow: 0 8px 25px rgba(0,0,0,0.08); - - /* Rundungen */ - --radius: 16px; + --border: #dbe3ec; } +/* Grundlayout */ + body { font-family: "Segoe UI", Arial, sans-serif; - background: var(--background); + background-color: var(--background); color: var(--text); line-height: 1.6; } @@ -38,180 +31,136 @@ body { ========================= */ header { - background: var(--surface); + background-color: var(--surface); + padding: 18px 40px; + border-bottom: 1px solid var(--border); box-shadow: 0 2px 10px rgba(0,0,0,0.05); - position: sticky; - top: 0; - z-index: 1000; -} - -.header-container { - max-width: 1200px; - margin: auto; - padding: 16px 24px; - - display: flex; - justify-content: space-between; - align-items: center; - gap: 20px; -} - -/* Logo */ - -.logo { - font-size: 1.5rem; - font-weight: 700; - color: var(--primary); } /* ========================= Navigation ========================= */ -nav ul { - list-style: none; - - display: flex; - align-items: center; - gap: 18px; +nav { + background-color: var(--surface); + padding: 15px 40px; + border-bottom: 1px solid var(--border); } nav a { text-decoration: none; color: var(--text); - font-weight: 500; - transition: 0.25s ease; - padding: 8px 14px; + font-weight: 600; + margin-right: 20px; + padding: 10px 16px; border-radius: 10px; + transition: 0.3s; } -nav a:hover, -nav a:focus { - background: #eff6ff; +nav a:hover { + background-color: #e8f0ff; color: var(--primary); } /* ========================= - Suchfeld + Überschriften ========================= */ -.search-box { - display: flex; - gap: 10px; +h1 { + font-size: 3rem; + margin-bottom: 20px; + color: var(--primary); } -.search-box input { - padding: 10px 14px; - border: 1px solid var(--border); - border-radius: 10px; - outline: none; - min-width: 220px; +h2 { + font-size: 1.8rem; + margin-bottom: 15px; + color: var(--primary-dark); } -.search-box input:focus { - border-color: var(--primary); +h3 { + margin-bottom: 10px; + color: var(--text); +} + +/* ========================= + Hauptinhalt +========================= */ + +main { + background-color: var(--surface); + margin: 40px; + padding: 40px; + border-radius: 18px; + box-shadow: 0 10px 30px rgba(0,0,0,0.08); +} + +/* Texte */ + +p { + margin-bottom: 18px; + color: var(--text-light); + font-size: 1.05rem; +} + +/* ========================= + Links +========================= */ + +a { + color: var(--primary); + transition: 0.3s; +} + +a:hover { + color: var(--primary-dark); } /* ========================= Buttons ========================= */ -.btn { - padding: 10px 18px; - border-radius: 10px; - text-decoration: none; - font-weight: 600; - transition: 0.25s ease; +button { + background-color: var(--primary); + color: white; border: none; + padding: 12px 22px; + border-radius: 10px; + font-size: 1rem; cursor: pointer; + transition: 0.3s; } -.btn-primary { - background: var(--primary); - color: white; -} - -.btn-primary:hover { - background: var(--primary-dark); -} - -.btn-secondary { - background: #eff6ff; - color: var(--primary); -} - -.btn-secondary:hover { - background: #dbeafe; +button:hover { + background-color: var(--primary-dark); } /* ========================= - Hauptbereich + Suchfeld ========================= */ -main { - max-width: 1200px; - margin: 50px auto; - padding: 0 24px; +input[type="text"], +input[type="search"] { + + padding: 10px 14px; + border: 1px solid var(--border); + border-radius: 10px; + font-size: 1rem; + background-color: white; } -/* Hero Section */ - -.hero { - background: linear-gradient( - 135deg, - #2563eb, - #3b82f6 - ); - - color: white; - padding: 80px 40px; - border-radius: var(--radius); - text-align: center; - box-shadow: var(--shadow); - - margin-bottom: 50px; -} - -.hero h1 { - font-size: 3rem; - margin-bottom: 20px; -} - -.hero p { - max-width: 800px; - margin: auto; - font-size: 1.1rem; +input:focus { + outline: none; + border-color: var(--primary); } /* ========================= - Karten / Inhalte + Bilder ========================= */ -.content-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); - gap: 24px; -} - -.card { - background: var(--surface); - border-radius: var(--radius); - padding: 28px; - box-shadow: var(--shadow); - transition: 0.3s ease; -} - -.card:hover { - transform: translateY(-5px); -} - -.card h2 { - margin-bottom: 14px; - color: var(--primary); -} - -.card p { - color: var(--text-light); +img { + border-radius: 14px; + box-shadow: 0 5px 20px rgba(0,0,0,0.08); } /* ========================= @@ -219,102 +168,14 @@ main { ========================= */ footer { - margin-top: 80px; - background: var(--surface); + background-color: var(--surface); border-top: 1px solid var(--border); -} - -.footer-container { - max-width: 1200px; - margin: auto; - padding: 24px; - - display: flex; - justify-content: center; - gap: 30px; - flex-wrap: wrap; + padding: 25px; + text-align: center; + margin-top: 40px; } footer a { + margin: 0 10px; text-decoration: none; - color: var(--text-light); - transition: 0.25s ease; -} - -footer a:hover { - color: var(--primary); -} - -/* ========================= - Accessibility -========================= */ - -a:focus, -button:focus, -input:focus { - outline: 3px solid #93c5fd; - outline-offset: 2px; -} - -/* ========================= - Responsive Design -========================= */ - -/* Tablet */ - -@media (max-width: 900px) { - - .header-container { - flex-direction: column; - align-items: stretch; - } - - nav ul { - justify-content: center; - flex-wrap: wrap; - } - - .search-box { - justify-content: center; - } - - .hero h1 { - font-size: 2.3rem; - } -} - -/* Smartphone */ - -@media (max-width: 600px) { - - .hero { - padding: 50px 25px; - } - - .hero h1 { - font-size: 2rem; - } - - .hero p { - font-size: 1rem; - } - - nav ul { - flex-direction: column; - gap: 10px; - } - - .search-box { - flex-direction: column; - } - - .search-box input { - width: 100%; - min-width: unset; - } - - .btn { - width: 100%; - text-align: center; - } } \ No newline at end of file