/* ============================================================ ALPASANA DESIGN SYSTEM · v1 Wiederverwendbares Stylesheet fuer alle Alpasana-Projekte. Uebernommen aus dem Alpasana-Webstandard und um die im Contenttool benoetigten Komponenten ergaenzt (Mobile-Menue, Vorschauleiste, Hinweise, Fliesstext). Die Tokens bleiben unveraendert. Einbinden: 1) Google-Fonts im laden (siehe includes/layout.php) 2) 3) Klassen .alp-* verwenden, ============================================================ */ :root { /* ── Markenfarben ─────────────────────────────── */ /* Weisser Text auf --alp-blue erreicht nur 3.07:1 und verfehlt damit WCAG AA (4.5:1). Gefuellte Flaechen mit weisser Schrift verwenden deshalb --alp-blue-dark (4.61:1) bzw. --alp-blue-deep fuer den Hover (6.15:1). --alp-blue bleibt fuer Rahmen, Fokusringe und dekorative Flaechen. */ --alp-blue: #269CD9; /* Akzent: Rahmen, Fokus, Dekoration */ --alp-blue-bright: #2EA3F2; /* helleres Blau: Logo, Akzente auf Dunkel */ --alp-blue-dark: #1C7CB0; /* gefuellte Buttons, Links auf Weiss */ --alp-blue-deep: #17688F; /* Hover gefuellter Buttons */ --alp-dark: #232434; /* dunkle Flaechen: Topbar, Footer, Hero */ --alp-dark-2: #2C2D40; --alp-heading: #232434; --alp-text: #6E7077; --alp-muted: #9AA0A6; --alp-bg: #FFFFFF; --alp-bg-soft: #F5F7FA; --alp-border: #E6E9EF; --alp-error: #B00020; --alp-success: #1E7A4B; /* ── Typografie ───────────────────────────────── */ --alp-font-head: 'Rajdhani', 'Segoe UI', sans-serif; --alp-font-body: 'Rubik', 'Segoe UI', Arial, sans-serif; /* ── Form & Effekte ───────────────────────────── */ --alp-radius: 6px; --alp-radius-lg: 14px; --alp-shadow: 0 10px 30px rgba(35, 36, 52, .10); --alp-shadow-sm: 0 4px 14px rgba(35, 36, 52, .07); --alp-container: 1200px; --alp-transition: .2s ease; } /* ============================================================ BASIS */ *, *::before, *::after { box-sizing: border-box; } body.alp { font-family: var(--alp-font-body); color: var(--alp-text); line-height: 1.7; margin: 0; background: var(--alp-bg); -webkit-text-size-adjust: 100%; } .alp h1, .alp h2, .alp h3, .alp h4 { font-family: var(--alp-font-head); color: var(--alp-heading); font-weight: 700; line-height: 1.15; margin: 0 0 .5em; } .alp p { margin: 0 0 1em; } .alp img { max-width: 100%; height: auto; } .alp a { color: var(--alp-blue-dark); text-decoration: none; transition: color var(--alp-transition); } .alp a:hover { color: var(--alp-blue); } /* Sichtbarer Fokus – wichtig fuer Tastaturbedienung */ .alp a:focus-visible, .alp button:focus-visible, .alp input:focus-visible, .alp textarea:focus-visible, .alp select:focus-visible { outline: 3px solid var(--alp-blue); outline-offset: 2px; } .alp-container { max-width: var(--alp-container); margin: 0 auto; padding: 0 20px; } .alp-container--narrow { max-width: 720px; } .alp-mt { margin-top: 28px; } /* Nur fuer Screenreader */ .alp .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Honeypot – fuer Menschen unsichtbar, fuer Bots erreichbar */ .alp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ============================================================ VORSCHAULEISTE */ .alp-preview-bar { background: #14304A; color: rgba(255, 255, 255, .9); font-size: .84rem; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); } .alp-preview-bar .alp-container { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .alp-preview-state { font-family: var(--alp-font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; background: #C77700; color: #fff; padding: 3px 10px; border-radius: 50px; } .alp-preview-state.is-live { background: var(--alp-success); } .alp-preview-text { flex: 1 1 260px; } .alp-preview-links { display: flex; gap: 16px; } .alp-preview-bar a { color: #fff; text-decoration: underline; } .alp-preview-bar a:hover { color: var(--alp-blue-bright); } /* ============================================================ TOPBAR */ .alp-topbar { background: var(--alp-dark); color: rgba(255, 255, 255, .85); font-size: .85rem; padding: 9px 0; } .alp-topbar .alp-container { display: flex; justify-content: flex-end; gap: 28px; flex-wrap: wrap; } .alp-topbar a { color: rgba(255, 255, 255, .85); } .alp-topbar a:hover { color: #fff; } .alp-topbar .alp-ico { color: var(--alp-blue-bright); margin-right: 6px; } /* ============================================================ HEADER / NAVIGATION */ .alp-header { background: #fff; border-bottom: 1px solid var(--alp-border); position: sticky; top: 0; z-index: 50; } .alp-header .alp-container { display: flex; align-items: center; justify-content: space-between; min-height: 84px; gap: 20px; } .alp .alp-logo { display: flex; align-items: center; gap: 12px; color: var(--alp-heading); } .alp-logo img { display: block; } .alp .alp-logo-text { display: flex; flex-direction: column; gap: 3px; line-height: 1.1; font-family: var(--alp-font-head); font-weight: 700; font-size: 1.3rem; color: var(--alp-heading); } .alp .alp-logo-text > span { font-size: .7rem; font-weight: 600; color: var(--alp-blue-dark); text-transform: uppercase; letter-spacing: .12em; } .alp-header-right { display: flex; align-items: center; gap: 28px; } .alp-header-actions { display: flex; align-items: center; gap: 16px; } .alp-nav { display: flex; gap: 30px; } .alp-nav a { font-family: var(--alp-font-head); font-weight: 600; font-size: 1.05rem; color: var(--alp-heading); } .alp-nav a:hover, .alp-nav a.active { color: var(--alp-blue-dark); } .alp-nav-toggle, .alp-nav-close { display: none; background: none; border: 0; cursor: pointer; font-size: 1.7rem; line-height: 1; color: var(--alp-heading); padding: 4px 8px; } .alp-nav-backdrop { display: none; } /* ============================================================ HERO */ .alp-hero { position: relative; color: #fff; padding: 110px 0; background: linear-gradient(140deg, #232434 0%, #1B2B40 55%, #14304A 100%); } .alp-hero .alp-container { position: relative; z-index: 2; } .alp-hero-label { font-family: var(--alp-font-head); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--alp-blue-bright); margin-bottom: 14px; } .alp-hero-label::before { content: '// '; } .alp-hero h1 { color: #fff; font-size: clamp(2.2rem, 6vw, 4.2rem); font-weight: 700; text-transform: uppercase; margin-bottom: 18px; } .alp-hero p { font-size: 1.15rem; max-width: 620px; opacity: .92; } .alp-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; } /* ============================================================ SEKTIONEN */ .alp-section { padding: 84px 0; } .alp-section--soft { background: var(--alp-bg-soft); } .alp-section--dark { background: var(--alp-dark); color: rgba(255, 255, 255, .85); } .alp-section--dark h2, .alp-section--dark h3 { color: #fff; } .alp-section-label { font-family: var(--alp-font-head); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--alp-blue-dark); margin-bottom: 8px; } .alp-section-title { font-size: clamp(1.7rem, 4vw, 2.6rem); text-transform: uppercase; } /* ============================================================ BUTTONS */ .alp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--alp-font-head); font-weight: 600; font-size: 1rem; padding: 13px 30px; border-radius: var(--alp-radius); border: 2px solid transparent; cursor: pointer; text-transform: uppercase; letter-spacing: .02em; transition: all var(--alp-transition); } .alp .alp-btn-primary { background: var(--alp-blue-dark); color: #fff; } .alp .alp-btn-primary:hover { background: var(--alp-blue-deep); color: #fff; } .alp .alp-btn-outline { background: transparent; color: var(--alp-blue-dark); border-color: var(--alp-blue-dark); } .alp .alp-btn-outline:hover { background: var(--alp-blue-dark); color: #fff; } .alp .alp-btn-light { background: #fff; color: var(--alp-heading); } .alp .alp-btn-light:hover { background: var(--alp-blue-dark); color: #fff; } /* ============================================================ CARDS */ .alp-card { display: block; background: #fff; border: 1px solid var(--alp-border); border-radius: var(--alp-radius-lg); padding: 30px; box-shadow: var(--alp-shadow-sm); transition: all var(--alp-transition); color: inherit; } a.alp-card:hover, .alp-card--interactive:hover { box-shadow: var(--alp-shadow); transform: translateY(-3px); } a.alp-card h3 { color: var(--alp-heading); } .alp-form-card, .alp-form-card:hover { box-shadow: var(--alp-shadow); transform: none; } .alp-card h3 { font-size: 1.2rem; text-transform: none; } /* Kleine Texte nutzen --alp-text (4.94:1) statt --alp-muted (3.22:1), damit auch Zusatzangaben WCAG AA erfuellen. --alp-muted bleibt fuer Platzhalter und rein dekorative Elemente. */ .alp-card-meta { font-size: .8rem; color: var(--alp-text); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; } .alp-grid { display: grid; gap: 26px; } .alp-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); } .alp-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); } .alp-grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); } /* ============================================================ FLIESSTEXT */ .alp-prose { font-size: 1.03rem; max-width: 68ch; } .alp-prose p { margin-bottom: 1.1em; } /* ============================================================ HINWEISE */ .alp-alert { border-radius: var(--alp-radius); padding: 13px 17px; font-size: .95rem; margin: 0 0 20px; border: 1px solid transparent; } .alp-alert--error { background: #FDF2F3; border-color: #E7B4BB; color: var(--alp-error); } .alp-alert--ok { background: #F1F9F4; border-color: #B4DCC4; color: var(--alp-success); } /* ============================================================ FORM-FELDER */ .alp-input, .alp-textarea, .alp-select { width: 100%; font-family: var(--alp-font-body); font-size: 1rem; padding: 13px 16px; border: 1.5px solid var(--alp-border); border-radius: var(--alp-radius); background: #fff; color: var(--alp-heading); transition: border-color .15s ease, box-shadow .15s ease; } .alp-textarea { resize: vertical; min-height: 120px; } .alp-input:hover, .alp-textarea:hover, .alp-select:hover { border-color: #C7D0DC; } .alp-input:focus, .alp-textarea:focus, .alp-select:focus { outline: none; border-color: var(--alp-blue); box-shadow: 0 0 0 3px rgba(38, 156, 217, .16); } .alp-input::placeholder, .alp-textarea::placeholder { color: var(--alp-muted); } .alp-field { margin-bottom: 18px; } .alp-form-label { display: block; font-family: var(--alp-font-head); font-weight: 600; font-size: .85rem; color: var(--alp-heading); margin-bottom: 7px; } .alp-form-label .opt { font-weight: 400; color: var(--alp-text); } .alp-hint { font-size: .8rem; color: var(--alp-text); margin: 12px 0 0; } /* ============================================================ FOOTER */ .alp-footer { background: var(--alp-dark); color: rgba(255, 255, 255, .7); padding: 56px 0 26px; } .alp-footer a { color: rgba(255, 255, 255, .7); display: block; margin-bottom: 6px; } .alp-footer a:hover { color: #fff; } .alp-foot-grid { display: grid; gap: 34px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); } .alp-foot-brand { font-family: var(--alp-font-head); font-weight: 700; font-size: 1.35rem; color: #fff; margin: 0 0 8px; } .alp-foot-small { font-size: .9rem; } .alp-foot-small a { display: inline; } .alp-footer .alp-foot-title { color: #fff; font-family: var(--alp-font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 10px; } .alp-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 30px; padding-top: 20px; font-size: .85rem; color: rgba(255, 255, 255, .5); } .alp-footer-bottom p { margin: 0 0 6px; } .alp-foot-privacy { max-width: 600px; } /* ============================================================ RESPONSIVE */ @media (max-width: 1100px) { .alp-nav-toggle { display: block; } .alp-header-right { position: fixed; inset: 0 0 0 auto; width: min(320px, 84vw); background: #fff; z-index: 120; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 8px; padding: 20px 24px; transform: translateX(100%); transition: transform .25s ease; box-shadow: -12px 0 34px rgba(35, 36, 52, .18); overflow-y: auto; } .alp-nav-open .alp-header-right { transform: translateX(0); } .alp-nav-open .alp-nav-close { display: block; align-self: flex-end; } .alp-nav { flex-direction: column; gap: 4px; width: 100%; margin-top: 8px; } .alp-nav a { padding: 12px 0; border-bottom: 1px solid var(--alp-border); width: 100%; } .alp-header-actions { width: 100%; margin-top: 16px; } .alp-header-actions .alp-btn { width: 100%; } .alp-nav-open .alp-nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(35, 36, 52, .5); z-index: 110; } .alp-nav-open { overflow: hidden; } } @media (max-width: 900px) { .alp-hero { padding: 72px 0; } .alp-section { padding: 56px 0; } .alp-card { padding: 24px; } } @media (prefers-reduced-motion: reduce) { .alp *, .alp *::before, .alp *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } a.alp-card:hover { transform: none; } }