/* ============================================================= 00 – BASIS: Design-Tokens, Reset, Typografie, Buttons, Helfer Schlossbrauerei Maxlrain – Corporate Design ============================================================= */ :root { /* ---- Markenfarben (Corporate Design) ---- MAXLRAINER: Pantone 300 U (Blau) + 115 U (Gelb) Maxl: Pantone 299 U (helles Blau) Dach-Rot aus dem Logo. Werte sind Näherungen – bei finalem Logo/CD ggf. exakt nachjustieren. */ --c-blue: #005EB8; /* Primär (Pantone 300) */ --c-blue-dark: #004A93; /* Hover / Verläufe */ --c-blue-deep: #002B57; /* Hero / Footer / dunkle Flächen */ --c-sky: #00A3E0; /* Maxl (Pantone 299) */ --c-yellow: #FFD200; /* Akzent / Zierlinien (Pantone 115) */ --c-yellow-dk: #E4B800; --c-red: #A6222E; /* Dach-Rot, sparsamer Akzent */ /* ---- Neutrale Töne ---- */ --c-ink: #16233A; /* Text dunkel (Blauschwarz) */ --c-ink-soft: #566578; /* Text gedämpft */ --c-bg: #FFFFFF; /* Grundfläche */ --c-bg-tint: #F1F6FA; /* kühles Off-white */ --c-line: #DCE6EF; /* Trennlinien */ --c-white: #FFFFFF; /* ---- Typografie ---- Drei-Schriften-System „modern trifft Tradition": • Headings = Utopia Std (Serif) ── via Adobe Fonts • Labels/UI = DIN Condensed (Sans) ── Eyebrows, Navigation, Buttons • Fließtext = Merriweather Light ── via Google Fonts Adobe-Kit im von index.html. Reihenfolge = Fallback-Kette. */ --font-serif: "utopia-std", Georgia, "Times New Roman", serif; --font-sans: "din-condensed-variable", "DIN Condensed", system-ui, -apple-system, sans-serif; --font-body: "Merriweather", Georgia, "Times New Roman", serif; /* ---- Maße & Effekte ---- */ --maxw: 1500px; --gutter: clamp(1.25rem, 4vw, 2.5rem); --radius: 14px; --radius-lg: 22px; --shadow-sm: 0 2px 8px rgba(22, 35, 58, 0.07); --shadow-md: 0 14px 40px rgba(22, 35, 58, 0.13); --shadow-lg: 0 30px 70px rgba(22, 35, 58, 0.20); --header-h: 88px; --ease: cubic-bezier(0.22, 1, 0.36, 1); /* ---- Grain-Textur (SVG-Rauschen, kachelt bei 280px) ---- Deckkraft steckt im SVG (feFuncA slope) – dort justieren. */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.18'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); /* Stärkere Variante für Inhaltskacheln (Braukunst-Feature, Slow Brewing) */ --grain-strong: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.32'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); } /* ---- Reset / Basis ---- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); } body { font-family: var(--font-body); font-weight: 300; /* Merriweather Light */ color: var(--c-ink); background: var(--c-bg); line-height: 1.78; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } h1, h2, h3 { font-family: var(--font-serif); line-height: 1.12; font-weight: 600; letter-spacing: -0.01em; text-transform: uppercase; } /* alle Headings in Versalien */ strong, b { font-weight: 700; } /* Merriweather Bold hebt sich vom Light-Fließtext ab */ /* ---- Layout-Helfer ---- */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } /* Einheitliches Segment-Padding (oben/unten), +25 % für mehr Luft */ .section { padding-block: clamp(5rem, 11.25vw, 8.75rem); } .section--tint { background: var(--c-bg-tint); } .section--dark { background: var(--c-blue-deep); color: #DCE8F5; } /* Grain auf allen HELLEN Sektionen (rustikale Anmutung) – dunkle/blaue Sektionen (section--dark, Geschichte) bleiben außen vor. Die höhere Spezifität dieses Selektors setzt das Bild auch gegen die background- Shorthands der Sektionen (z. B. .section--tint) durch. */ .section:not(.section--dark):not(.geschichte) { background-image: var(--grain); } /* Größerer Abstand vom Kopf (Heading + Text) zu den folgenden Kacheln/Bildern */ .section__head { max-width: 820px; margin: 0 auto clamp(3.4rem, 6.75vw, 5.2rem); text-align: center; } /* Einheitliche Größen für alle Sektionen (Niveau der Geschichte-/Zeitleisten-Sektion) */ .section__title { font-size: clamp(2.6rem, 6vw, 4.6rem); color: var(--c-ink); } .section--dark .section__title { color: #F1F6FB; } /* Abstand Heading → Text +30 %; Fließtext etwas größer */ .section__intro { margin-top: 1.3rem; color: var(--c-ink-soft); font-size: clamp(1.15rem, 1.6vw, 1.35rem); } .section--dark .section__intro { color: #B9C9DC; } /* Sanftes Einschweben der Sektions-Überschriften von unten (per JS: .is-in) */ .section__title { opacity: 0; transform: translateY(42px); transition: opacity 0.85s var(--ease), transform 0.85s var(--ease); } .section__title.is-in { opacity: 1; transform: none; } /* Auszeichnung: kleine Überschrift mit gelber Zierlinie (Logo-Motiv) */ .eyebrow { display: inline-block; font: 700 0.78rem/1 var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-blue); margin-bottom: 0.9rem; position: relative; padding-bottom: 0.55rem; } .eyebrow::after { content: ""; position: absolute; left: 0; bottom: 0; width: 42px; height: 3px; border-radius: 2px; background: var(--c-yellow); } .section__head .eyebrow::after { left: 50%; transform: translateX(-50%); } .eyebrow--light { color: var(--c-yellow); } .eyebrow--light::after { background: var(--c-yellow); } /* ---- Grid ---- */ .grid { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } .grid--center { align-items: center; } /* ---- Buttons ---- */ .btn { --btn-bg: var(--c-blue); --btn-fg: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font: 700 1.15rem/1 var(--font-sans); /* Button-Schriftgröße (Basis) */ padding: 0.9rem 1.6rem; border-radius: 100px; border: 2px solid transparent; background: var(--btn-bg); color: var(--btn-fg); cursor: pointer; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s, color 0.25s, border-color 0.25s; white-space: nowrap; } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn--primary { --btn-bg: var(--c-blue); box-shadow: 0 6px 18px rgba(0, 94, 184, 0.28); } .btn--primary:hover { --btn-bg: var(--c-blue-dark); } .btn--accent { --btn-bg: var(--c-yellow); --btn-fg: var(--c-blue-deep); box-shadow: 0 6px 18px rgba(255, 210, 0, 0.35); } .btn--accent:hover { --btn-bg: var(--c-yellow-dk); } /* weiße Variante für dunkle Flächen (z. B. Hero) */ .btn--light { --btn-bg: #fff; --btn-fg: var(--c-blue-deep); box-shadow: 0 6px 18px rgba(255, 255, 255, 0.22); } .btn--light:hover { --btn-bg: #EAF2FB; } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--c-ink); border-color: rgba(22, 35, 58, 0.22); } .btn--ghost:hover { border-color: var(--c-ink); box-shadow: none; } /* helle Ghost-Variante für dunkle/farbige Flächen */ .btn--ghost-light { --btn-bg: transparent; --btn-fg: #fff; border-color: rgba(255,255,255,0.5); } .btn--ghost-light:hover { border-color: #fff; background: rgba(255,255,255,0.1); box-shadow: none; } .btn--lg { padding: 1.05rem 1.9rem; font-size: 1.28rem; } /* große Buttons (z. B. Hero) */ .btn--sm { padding: 0.6rem 1.1rem; font-size: 0.86rem; } /* ---- Text-Link mit Pfeil ---- */ .link-arrow { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 700; color: var(--c-blue); margin-top: 0.5rem; } .section--dark .link-arrow { color: var(--c-yellow); } .link-arrow::after { content: "→"; transition: transform 0.25s var(--ease); } .link-arrow:hover::after { transform: translateX(5px); } /* ---- Scroll-Reveal ---- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } /* ---- Globale Responsive-Regeln ---- */ @media (max-width: 900px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: 1fr; } } @media (max-width: 720px) { .grid--2 { grid-template-columns: 1fr; } } @media (max-width: 480px) { .grid--4 { grid-template-columns: 1fr; } } /* ---- Reduzierte Bewegung ---- */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; transition: none; } .section__title { opacity: 1; transform: none; transition: none; } }