/* ========================================================= Light on Hill Inclusive School – CSS Split Datei: 01-core.css Stand: 2026-01-15 Zweck: Grundlagen + Header/Nav + Buttons (Original-Reihenfolge, layout-neutral). Hinweis: Inhalt stammt aus der bereinigten styles.css. Reihenfolge ist relevant! (siehe HTML ) ========================================================= */ :root{ --bg:#0b1a13; --bg-2:#0e221a; --panel:#11281f; --text:#f3f7f5; --muted:#b6c7bf; --brand:#10B981; --brand-2:#0ea277; --accent:#F59E0B; --border:rgba(255,255,255,.10); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family: var(--font-sans); color:var(--text); background:radial-gradient(1200px 600px at 10% -10%, rgba(16,185,129,.15), transparent 60%), linear-gradient(180deg,var(--bg), #13271f 60%, #142a21); line-height:1.55; /* WICHTIG: keine Opacity/Animation auf body */ opacity: 1; animation: none; } #main{ opacity:0; transform:translateY(6px); animation: fadeIn .55s ease-out .05s both; } /* optional, wenn Header/Footer auch sanft rein sollen */ .site-header, .site-footer{ opacity:0; transform:translateY(6px); animation: fadeIn .55s ease-out .05s both; } @keyframes fadeIn{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} } img{max-width:100%; display:block} a{color:var(--brand); text-decoration:none} a:hover{text-decoration:underline} .container{max-width:1140px; margin:0 auto; padding:0 20px} .site-header{ position:sticky; top:0; z-index:60; background:rgba(239,173,90,.65); backdrop-filter:blur(10px); border-bottom:1px solid var(--border) } .header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0} .brand{display:flex; align-items:center; gap:10px; color:#fff; font-weight:800} /* Logo im Header (global) */ .brand img{ width:36px; height:36px; } /* Header-Logo clean */ .brand .brand-logo{ padding:0; border:0; box-shadow:none; border-radius:0; object-fit:contain; display:block; } .nav{position:relative} .nav>ul{display:flex; gap:18px; list-style:none; margin:0; padding:0; align-items:center} /* Links im Header (Basis) */ .nav a{color:#fff; opacity:.95} /* Dropdown */ .nav .has-sub{position:relative} .nav .dropdown{ position:absolute; right:0; top:calc(100% + 8px); background:#0a1a13; border:1px solid var(--border); border-radius:12px; display:none; min-width:220px; padding:8px } .nav .dropdown a{ display:block; margin:4px; padding:.55rem .8rem; border:1px solid rgba(255,255,255,.12); border-radius:.7rem; background:#0e221a; color:#e5f1ea } .nav .dropdown a:hover{ background:#133025; text-decoration:none; } .nav .has-sub.open .dropdown{display:block} .nav-toggle{ display:none; background:transparent; border:1px solid rgba(255,255,255,.2); color:#fff; padding:.5rem .7rem; border-radius:.6rem } /* Buttons */ .btn{ --btn-bg:#0e221a; --btn-fg:#fff; --btn-bd:rgba(255,255,255,.20); display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.7rem 1rem; border-radius:.9rem; border:1px solid var(--btn-bd); background:var(--btn-bg); color:var(--btn-fg); font-weight:600; box-shadow:0 8px 20px rgba(0,0,0,.22); transition:transform .06s ease, filter .2s ease, opacity .2s ease; } .btn:hover{transform:translateY(-1px)} .btn:active{transform:translateY(0)} .btn-primary{ --btn-bg:linear-gradient(135deg,var(--brand),var(--brand-2)); --btn-bd:transparent; box-shadow:0 10px 24px rgba(16,185,129,.28) } .btn-secondary{--btn-bg:#0f241b; --btn-bd:rgba(255,255,255,.18)} .btn-ghost{--btn-bg:transparent; --btn-bd:rgba(255,255,255,.20)} /* ========================================================= NAV: alle gleich (außer Spenden) + keine schwarzen Ränder ========================================================= */ .nav button{ -webkit-appearance:none; appearance:none; background-clip: padding-box; font: inherit; border:0; outline:0; } /* Normale Nav-Links als Buttons */ .nav > ul > li > a:not(.btn){ padding:.55rem .9rem; border-radius:.8rem; border:1px solid rgba(255,255,255,.18); background:#0f241b; color:#fff; opacity:.95; text-decoration:none; display:inline-flex; align-items:center; line-height:1.2; } /* Spenden-CTA nicht anfassen -> bleibt voll grün */ .nav > ul > li > a.btn{ text-decoration:none; } /* Transparenz-Button exakt wie normale Nav-Buttons */ .nav > ul > li.has-sub > button{ padding:.55rem .9rem; border-radius:.8rem; border:1px solid rgba(255,255,255,.18); background:#0f241b; color:#fff; opacity:.95; cursor:pointer; line-height:1.2; } /* Hover einheitlich */ .nav > ul > li > a:not(.btn):hover, .nav > ul > li.has-sub > button:hover{ text-decoration:none; filter: brightness(1.06); } /* Focus sauber */ .nav a:focus, .nav button:focus{ outline:none; } .nav a:focus-visible, .nav button:focus-visible{ box-shadow:0 0 0 3px rgba(16,185,129,.18); border-color: rgba(16,185,129,.55); }