/* * PaMa-IT — statisches Stylesheet. * * Zusammengefuehrt aus assets/styles/*.css (Tokens, Reset, Basis, Module). * Reihenfolge ist relevant. */ /* =================================================================== _tokens =================================================================== */ /* * Design-Tokens * * Die Palette ist von einer Terrakotta-Schneidematte mit weissem Raster * abgeleitet: warme, ruhige Toene, kein reines Schwarz und kein reines Weiss — * beides wirkt in diesem Umfeld hart. * * Breakpoints (Mobile-First, ausschliesslich min-width): * 30rem = 480px | 48rem = 768px | 64rem = 1024px | 80rem = 1280px */ :root { /* --- Farben ----------------------------------------------------------- */ /* Flaechen */ --c-paper: #faf4ea; /* Seitenhintergrund, warmes Cremeweiss */ --c-paper-warm: #f2e7d7; /* leicht abgesetzte Flaechen */ --c-line: #e5d8c4; /* Trennlinien */ /* Text */ --c-ink: #33241b; /* Fliesstext und Ueberschriften, warmes Dunkelbraun */ --c-ink-soft: #6f5948; /* Sekundaertext */ /* Akzent — aus dem Bild abgenommen */ --c-terracotta: #c4652f; --c-terracotta-deep: #9d4d21; /* --- Typografie ------------------------------------------------------- */ --font-display: ui-serif, Georgia, 'Times New Roman', serif; --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Fluid von 320px bis 1440px — keine Breakpoint-Spruenge noetig */ --fs-100: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); --fs-200: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem); --fs-300: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); --fs-400: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem); --fs-500: clamp(1.375rem, 1.2rem + 0.85vw, 1.75rem); --fs-600: clamp(1.75rem, 1.4rem + 1.7vw, 2.5rem); /* Hero-Claim: bewusst eigener, viel weiterer Bereich */ --fs-claim: clamp(2.75rem, 1.2rem + 11vw, 9rem); --fs-claim-tail: clamp(1.125rem, 0.7rem + 2.4vw, 2.5rem); --lh-tight: 0.95; --lh-snug: 1.25; --lh-body: 1.7; /* --- Abstaende -------------------------------------------------------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; /* Seitenrand: waechst mit dem Viewport */ --gutter: clamp(1.25rem, 5vw, 4rem); --measure: 65ch; /* Zellgroesse des Raster-Motivs (siehe .grid-surface in _base.css). */ --grid-cell: 2.5rem; /* --- Sonstiges -------------------------------------------------------- */ --radius: 2px; --nav-h: 4rem; --z-base: 1; --z-nav: 100; --z-skip: 200; /* Ruhige, weiche Bewegung — passend zum Bildmotiv. */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur: 320ms; } @media (min-width: 48rem) { :root { --nav-h: 5rem; --grid-cell: 3.25rem; } } /* =================================================================== _reset =================================================================== */ /* Moderner, minimaler Reset */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* * Bewusst KEIN globales overflow-x auf oder : Overflow auf * diesen beiden Elementen propagiert auf den Viewport und beeinflusst das * Scroll- und Sticky-Verhalten der ganzen Seite. Horizontaler Ueberhang * wird stattdessen dort behoben, wo er entsteht — der Hero clippt seinen * Hintergrund lokal (siehe _hero.css). */ } body { min-height: 100svh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, svg, video { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } ul[class], ol[class] { list-style: none; padding: 0; } h1, h2, h3, h4 { text-wrap: balance; } p { text-wrap: pretty; } /* Nutzer:innen mit reduzierter Bewegung bekommen keine Animationen. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* =================================================================== _base =================================================================== */ /* Grundtypografie und globale Elemente */ body { background-color: var(--c-paper); color: var(--c-ink); font-family: var(--font-body); font-size: var(--fs-300); line-height: var(--lh-body); } a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 0.25em; transition: text-decoration-color var(--dur) var(--ease), color var(--dur) var(--ease); } a:hover { color: var(--c-terracotta-deep); text-decoration-color: currentColor; } :focus-visible { outline: 2px solid var(--c-terracotta); outline-offset: 3px; border-radius: var(--radius); } ::selection { background-color: color-mix(in srgb, var(--c-terracotta) 25%, transparent); color: var(--c-ink); } /* Sprunglink: erst sichtbar, wenn er den Fokus bekommt. */ .skip-link { position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: var(--z-skip); padding: var(--sp-2) var(--sp-4); background-color: var(--c-ink); color: var(--c-paper); font-size: var(--fs-200); text-decoration: none; border-radius: var(--radius); transform: translateY(calc(-100% - var(--sp-5))); transition: transform var(--dur) var(--ease); } .skip-link:focus-visible { transform: translateY(0); } /* --- Sektionen ---------------------------------------------------------- */ .main { position: relative; z-index: var(--z-base); background-color: var(--c-paper); } .section { padding-inline: var(--gutter); padding-block: var(--sp-8); } @media (min-width: 48rem) { .section { padding-block: var(--sp-9); } } /* * Raster-Flaeche: das durchgaengige Motiv der Seite — ein feines Millimeter- * papier-Raster auf warmem Cremeweiss, das nach aussen weich auslaeuft statt * hart abzuschneiden. Wird ueber ein ::before gelegt, damit der Inhalt der * Flaeche von der Maske unberuehrt bleibt. */ .grid-surface { position: relative; background-color: var(--c-paper); } .grid-surface::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(to right, var(--c-line) 1px, transparent 1px), linear-gradient(to bottom, var(--c-line) 1px, transparent 1px); background-size: var(--grid-cell) var(--grid-cell); mask-image: radial-gradient(115% 85% at 50% 45%, #000 12%, transparent 70%); } /* =================================================================== _nav =================================================================== */ /* Navbar: fix, transparent am Seitenanfang, beim Scrollen abgesetzt. */ .nav { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: var(--z-nav); color: var(--c-ink); border-block-end: 1px solid transparent; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .nav.is-scrolled { background-color: color-mix(in srgb, var(--c-paper) 86%, transparent); border-block-end-color: var(--c-line); backdrop-filter: blur(12px); } .nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); block-size: var(--nav-h); padding-inline: var(--gutter); } .nav__brand { font-size: var(--fs-200); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; /* Sehr lange Firmennamen sollen die Navbar auf 320px nicht sprengen. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav__brand:hover { color: inherit; } /* --- Dropdown ----------------------------------------------------------- */ .dropdown { position: relative; } .dropdown__trigger { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0; color: inherit; font-size: var(--fs-200); letter-spacing: 0.08em; text-transform: uppercase; } .dropdown__chevron { inline-size: 0.7em; flex: none; transition: transform var(--dur) var(--ease); } .dropdown__trigger[aria-expanded='true'] .dropdown__chevron { transform: rotate(180deg); } /* * Mobile-First: Das Panel klappt vollflaechig unter der Navbar auf. * `hidden` wird per JS gesetzt/entfernt; display muss explizit ueberschrieben * werden, weil die Liste als Grid laeuft. */ .dropdown__panel { position: fixed; inset-block-start: var(--nav-h); inset-inline: 0; padding: var(--sp-4) var(--gutter) var(--sp-6); /* Immer heller Untergrund — auch wenn die Navbar gerade hell auf Bild steht. */ background-color: var(--c-paper); color: var(--c-ink); border-block-end: 1px solid var(--c-line); } .dropdown__panel[hidden] { display: none; } .dropdown__list { display: grid; gap: var(--sp-1); margin: 0; } .dropdown__item { display: flex; align-items: baseline; gap: var(--sp-3); padding-block: var(--sp-3); font-size: var(--fs-400); border-block-end: 1px solid var(--c-line); } .dropdown__list li:last-child .dropdown__item { border-block-end: 0; } /* Noch ohne Ziel — sichtbar, aber erkennbar inaktiv. */ .dropdown__item[aria-disabled='true'] { color: var(--c-ink-soft); cursor: default; } .dropdown__hint { color: var(--c-terracotta-deep); font-size: var(--fs-100); letter-spacing: 0.1em; text-transform: uppercase; } /* Ab Tablet: schwebendes Panel, rechtsbuendig unter dem Trigger. */ @media (min-width: 48rem) { .dropdown__panel { position: absolute; inset-block-start: calc(100% + var(--sp-3)); inset-inline: auto 0; min-inline-size: 15rem; padding: var(--sp-3) var(--sp-5); border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: 0 16px 40px rgb(58 32 16 / 0.16); } .dropdown__item { font-size: var(--fs-300); } } /* =================================================================== _hero =================================================================== */ /* * Hero: bildschirmfuellende Raster-Flaeche, Claim mittig, Scroll-Hinweis unten. * * Der Hintergrund ist bewusst kein Foto, sondern das gezeichnete Raster aus * .grid-surface (siehe _base.css) — ruhig, schnell und in jeder Aufloesung * gestochen scharf. */ .hero { position: relative; display: grid; place-items: center; /* 100svh statt 100vh — sonst springt der Hero auf iOS Safari, wenn die Adressleiste ein-/ausblendet. */ min-block-size: 100svh; padding-inline: var(--gutter); padding-block: calc(var(--nav-h) + var(--sp-6)) var(--sp-9); /* Haelt das Raster in der Sektion, ohne globales overflow-x. */ overflow: hidden; isolation: isolate; } .hero__content { inline-size: 100%; max-inline-size: 68rem; } /* --- Claim --------------------------------------------------------------- */ .hero__claim { display: flex; flex-direction: column; margin: 0; font-weight: 400; } .hero__claim-lead { font-family: var(--font-display); font-size: var(--fs-claim); line-height: var(--lh-tight); letter-spacing: -0.03em; text-transform: uppercase; } .hero__claim-tail { /* Versetzt nach rechts, kleiner und kursiv — der Kontrast zur ersten Zeile traegt die ganze Typografie. */ margin-inline-start: 0.6em; margin-block-start: 0.15em; color: var(--c-terracotta-deep); font-family: var(--font-display); font-size: var(--fs-claim-tail); font-style: italic; line-height: var(--lh-snug); letter-spacing: 0.01em; text-transform: lowercase; } @media (min-width: 48rem) { .hero__claim-tail { margin-inline-start: 2.2em; } } /* --- Scroll-Hinweis ------------------------------------------------------ */ .hero__scroll { position: absolute; inset-block-end: var(--sp-6); inset-inline-start: 50%; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-2); color: var(--c-ink-soft); text-decoration: none; } .hero__scroll:hover { color: var(--c-ink); } .hero__scroll-label { font-size: var(--fs-100); letter-spacing: 0.32em; text-transform: uppercase; /* Letter-spacing schiebt optisch nach rechts — visuell zentrieren. */ text-indent: 0.32em; } /* Duenne Linie, in der ein dunkler Abschnitt nach unten wandert. */ .hero__scroll-line { position: relative; inline-size: 1px; block-size: 3rem; background-color: var(--c-line); overflow: hidden; } .hero__scroll-line::after { content: ''; position: absolute; inset-inline: 0; block-size: 40%; background-color: var(--c-terracotta); animation: scroll-hint 2.8s var(--ease) infinite; } @keyframes scroll-hint { 0% { transform: translateY(-100%); opacity: 0; } 30% { opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(250%); opacity: 0; } } /* Bei reduzierter Bewegung bleibt die Linie ruhig sichtbar statt zu laufen. */ @media (prefers-reduced-motion: reduce) { .hero__scroll-line::after { inset-block-start: 0; block-size: 100%; background-color: var(--c-terracotta); } } /* =================================================================== _footer =================================================================== */ /* Footer: auf Mobile gestapelt, ab Tablet dreispaltig. */ .footer { position: relative; z-index: var(--z-base); background-color: var(--c-paper-warm); border-block-start: 1px solid var(--c-line); } .footer__inner { display: grid; gap: var(--sp-5); padding-inline: var(--gutter); padding-block: var(--sp-7); font-size: var(--fs-200); color: var(--c-ink-soft); } .footer__brand { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3); } .footer__name { color: var(--c-ink); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } .footer__links { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin: 0; } .footer__links a, .footer__contact a { text-decoration: none; } .footer__links a:hover, .footer__contact a:hover { color: var(--c-terracotta-deep); } @media (min-width: 48rem) { .footer__inner { grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-6); } .footer__nav { justify-self: center; } .footer__contact { justify-self: end; } } /* =================================================================== _form =================================================================== */ /* Formulare — bewusst ruhig: Linien statt Kaesten, kein harter Rahmen. */ .form { display: grid; gap: var(--sp-5); margin-block-start: var(--sp-5); } .form__row { display: grid; gap: var(--sp-2); } .form__label { font-size: var(--fs-200); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .form__control { inline-size: 100%; padding: var(--sp-3) var(--sp-3); background-color: var(--c-paper); color: var(--c-ink); font-family: inherit; font-size: var(--fs-300); line-height: var(--lh-snug); border: 1px solid var(--c-line); border-radius: var(--radius); transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); } .form__control:hover { border-color: color-mix(in srgb, var(--c-terracotta) 45%, var(--c-line)); } .form__control:focus-visible { border-color: var(--c-terracotta); /* Der globale Fokus-Ring wuerde hier doppelt wirken. */ outline-offset: 1px; } .form__control--area { /* Nur vertikal — horizontales Ziehen wuerde das Layout sprengen. */ resize: vertical; min-block-size: 8rem; line-height: var(--lh-body); } .form__hint { color: var(--c-ink-soft); font-size: var(--fs-200); line-height: var(--lh-snug); } .form__actions { display: grid; gap: var(--sp-3); justify-items: start; } .form__note, .form__status { color: var(--c-ink-soft); font-size: var(--fs-200); line-height: var(--lh-snug); } .form__status[hidden] { display: none; } .form__status { padding: var(--sp-3) var(--sp-4); background-color: color-mix(in srgb, var(--c-terracotta) 10%, transparent); border-inline-start: 2px solid var(--c-terracotta); border-radius: var(--radius); } /* --- Button -------------------------------------------------------------- */ .button { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-6); background-color: var(--c-ink); color: var(--c-paper); font-size: var(--fs-200); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; border-radius: var(--radius); transition: background-color var(--dur) var(--ease); } .button:hover { background-color: var(--c-terracotta-deep); color: var(--c-paper); } @media (min-width: 48rem) { .form__actions { display: flex; align-items: center; gap: var(--sp-5); } .form__note { max-inline-size: 32ch; } } /* =================================================================== _legal =================================================================== */ /* Legal-Seiten: eine ruhige, gut lesbare Textspalte. */ .page-legal .main { padding-inline: var(--gutter); /* Platz fuer die fixierte Navbar. */ padding-block: calc(var(--nav-h) + var(--sp-7)) var(--sp-8); } .legal { max-inline-size: var(--measure); margin-inline: auto; } .legal__header { padding-block-end: var(--sp-5); margin-block-end: var(--sp-6); border-block-end: 1px solid var(--c-line); } .legal__title { font-family: var(--font-display); font-size: var(--fs-600); line-height: var(--lh-snug); letter-spacing: -0.02em; } .legal__intro { margin-block-start: var(--sp-2); color: var(--c-ink-soft); font-size: var(--fs-200); } .legal__section + .legal__section { margin-block-start: var(--sp-6); } .legal h2 { margin-block-end: var(--sp-3); font-size: var(--fs-400); font-weight: 600; line-height: var(--lh-snug); } .legal p + p, .legal ul + p, .legal p + ul { margin-block-start: var(--sp-4); } .legal ul { padding-inline-start: 1.25em; } .legal li::marker { color: var(--c-terracotta); } .legal li + li { margin-block-start: var(--sp-2); } .legal code { padding: 0.1em 0.35em; background-color: var(--c-paper-warm); border-radius: var(--radius); font-size: 0.9em; } /* Offene TODO-Stellen sind im Browser sofort erkennbar, damit sie nicht versehentlich live gehen. */ .legal em { padding: 0.1em 0.35em; background-color: color-mix(in srgb, var(--c-terracotta) 16%, transparent); color: var(--c-terracotta-deep); font-style: normal; font-weight: 600; border-radius: var(--radius); } .legal__meta { color: var(--c-ink-soft); font-size: var(--fs-200); }