/* ========================================================================= Roland Tojzán — Persönliche Website Design: warmes, editoriales Premium-Design — Systemschrift, grosszügiger Weissraum, aber warme (nicht kalte) Flächen, mutige Typo-Hierarchie, nummerierte Case Studies statt reiner Card-Grids. Technische Präzision trifft persönliche Wärme statt reiner Industrie-Optik. ========================================================================= */ /* ---------- Design tokens ------------------------------------------------ */ :root{ /* Farbe — warmes Off-White statt kaltem Weiss, warmes Anthrazit statt reinem Schwarz. Wird im Dark Mode unten komplett überschrieben. */ --paper: #FAF8F4; --paper-alt: #F1ECE3; --ink: #211F1C; --ink-soft: #4A453F; --ink-faint: #6B655C; --line: #E3DDD1; --line-soft: #EDE8DE; --accent: #2B6142; --accent-ink: #1F4830; --accent-tint:#E7F0EA; --header-bg: rgba(250, 248, 244, 0.82); /* Theme-stabile Tokens: ändern sich bewusst NICHT zwischen hell/dunkel, damit gefüllte Buttons (weisser Text auf Akzentfläche) in beiden Modi denselben, geprüften Kontrast behalten. */ --accent-fill: #2B6142; --accent-fill-hover: #1F4830; --on-accent: #FFFFFF; /* Typografie — Systemschrift wie auf Apple-Geräten, überall sonst ein sauberer, lizenzfreier Fallback-Stack. Keine eingebettete Fremdschrift. */ --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace; /* Layout */ --measure: 40rem; --wide: 76rem; --gutter: clamp(1.5rem, 5vw, 4rem); --section-space: clamp(5rem, 12vw, 10.5rem); --radius-pill: 980px; --radius: 18px; } /* ---------- Dark Mode — warmer Dunkelton statt reinem Schwarz. Wird per data-theme="dark" auf aktiviert (siehe includes/head.php + assets/js/script.js). ------------------------------------------------- */ html[data-theme="dark"]{ --paper: #141210; --paper-alt: #221F1B; --ink: #F5F1EA; --ink-soft: #C9C2B7; --ink-faint: #8F887C; --line: rgba(255, 245, 230, 0.14); --line-soft: rgba(255, 245, 230, 0.08); --accent: #7FD1A0; --accent-ink: #A3E0BC; --accent-tint:rgba(127, 209, 160, 0.16); --header-bg: rgba(20, 18, 16, 0.75); } /* Sanfter Übergang beim Umschalten statt hartem Sprung */ body, .site-header, .contact-card, .testimonial, .copy-btn{ transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease; } /* ---------- Reset / base -------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } body{ margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.5; letter-spacing: -0.011em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.07; margin: 0; letter-spacing: -0.022em; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } ul { margin: 0; padding: 0; list-style: none; } ::selection { background: var(--accent-fill); color: var(--on-accent); } :focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; } /* ---------- Utility -------------------------------------------------------- */ .wrap{ max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); } .measure{ max-width: var(--measure); margin-inline: auto; } .center{ text-align: center; } .eyebrow{ font-family: var(--font-display); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 1rem; } .section{ padding-block: var(--section-space); scroll-margin-top: 6.5rem; } .section-head{ margin-bottom: clamp(2.5rem, 6vw, 4rem); max-width: 42rem; } .section-head.center{ margin-inline: auto; } .section-head h2{ font-size: clamp(1.9rem, 3.6vw, 2.8rem); } .section-intro{ margin-top: 1rem; font-size: clamp(1.02rem, 1.6vw, 1.15rem); color: var(--ink-soft); line-height: 1.5; } .bg-alt{ background: var(--paper-alt); } /* ---------- Buttons (Pill, Apple-typisch) ---------------------------------- */ .btn{ display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--font-display); font-size: 0.98rem; font-weight: 500; text-decoration: none; border-radius: var(--radius-pill); padding: 0.72em 1.5em; transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease; } .btn-primary{ background: var(--accent-fill); color: var(--on-accent); } .btn-primary:hover{ background: var(--accent-fill-hover); } .btn-link{ font-family: var(--font-display); font-size: 1rem; font-weight: 500; color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 0.3em; } .btn-link:hover{ color: var(--accent-ink); } .btn-link .arrow{ transition: transform 0.2s ease; } .btn-link:hover .arrow{ transform: translateX(3px); } /* ---------- Skip link -------------------------------------------------- */ .skip-link{ position: absolute; left: -999px; top: auto; background: var(--ink); color: var(--paper); padding: 0.75em 1.25em; font-size: 0.9rem; border-radius: 8px; z-index: 100; } .skip-link:focus{ left: var(--gutter); top: 1rem; } /* ---------- Theme-Toggle (Darkmode) ------------------------------------------- */ .theme-toggle{ order: 1; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--paper-alt); color: var(--ink); cursor: pointer; padding: 0; transition: background-color 0.2s ease, border-color 0.2s ease; } .theme-toggle:hover{ background: var(--line-soft); } .theme-toggle svg{ width: 16px; height: 16px; } .theme-toggle .icon-moon{ display: none; } html[data-theme="dark"] .theme-toggle .icon-sun{ display: none; } html[data-theme="dark"] .theme-toggle .icon-moon{ display: block; } /* ---------- Header / Nav (schmale, blurred Leiste) --------------------------- */ .site-header{ position: sticky; top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--line-soft); } .site-header .wrap.header-row{ display: flex; align-items: center; justify-content: space-between; gap: 0.85rem 1.5rem; padding-block: 0.7rem; flex-wrap: wrap; } .brand{ font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; } .main-nav{ order: 3; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .main-nav::-webkit-scrollbar{ display: none; } .main-nav ul{ display: flex; gap: clamp(1rem, 2vw, 1.75rem); padding-bottom: 0.15rem; width: max-content; } .main-nav a{ font-family: var(--font-display); font-size: 0.8rem; font-weight: 500; letter-spacing: -0.005em; text-decoration: none; color: var(--ink-soft); padding-block: 0.3em; white-space: nowrap; transition: color 0.2s ease; } .main-nav a:hover{ color: var(--ink); } .main-nav a.nav-cta{ color: var(--on-accent); background: var(--accent-fill); padding: 0.42em 0.95em; border-radius: var(--radius-pill); margin-left: 0.25rem; } .main-nav a.nav-cta:hover{ background: var(--accent-fill-hover); color: var(--on-accent); } .lang-switch{ order: 2; display: flex; align-items: center; gap: 0.5em; font-family: var(--font-display); font-size: 0.78rem; font-weight: 500; } .lang-switch .active{ color: var(--ink); } .lang-switch .disabled{ color: var(--ink-faint); cursor: default; text-decoration: none; } .lang-switch .sep{ color: var(--line); } @media (min-width: 780px){ .main-nav{ order: 0; width: auto; overflow: visible; } .main-nav ul{ width: auto; padding-bottom: 0; } .lang-switch{ order: 0; } } /* ---------- Hero — riesig, zentriert, produktseitig ---------------------------- */ /* ---------- Hero — Split-Layout: Text links, Portrait rechts -------------- */ .hero{ position: relative; padding-block: clamp(3rem, 8vw, 5.5rem) clamp(3.5rem, 9vw, 7rem); overflow: hidden; } .hero-inner{ position: relative; display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: center; text-align: center; } @media (min-width: 900px){ .hero-inner{ grid-template-columns: 1.15fr 0.85fr; text-align: left; } } .hero-text{ min-width: 0; } .hero-visual{ position: relative; justify-self: center; } @media (min-width: 900px){ .hero-visual{ justify-self: end; } } .hero-portrait{ position: relative; width: clamp(220px, 30vw, 340px); aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; z-index: 1; } .hero-portrait img{ width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(8%); } .hero-visual::before{ /* dezenter Farbblock hinter dem Portrait — kleines kreatives Detail */ content: ""; position: absolute; inset: 1.1rem -1.1rem -1.1rem 1.1rem; background: var(--accent-tint); border-radius: 28px; z-index: 0; } .hero-eyebrow{ font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; color: var(--accent-ink); } .hero h1{ margin-top: 1.1rem; font-size: clamp(2.5rem, 5.4vw, 3.9rem); letter-spacing: -0.026em; margin-bottom: 1.4rem; } .hero .lede{ font-family: var(--font-body); font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.5; color: var(--ink-soft); max-width: 34rem; margin-inline: auto; letter-spacing: -0.01em; } @media (min-width: 900px){ .hero .lede{ margin-inline: 0; } } .hero-cta{ margin-top: clamp(1.75rem, 4vw, 2.5rem); display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; } @media (min-width: 900px){ .hero-cta{ justify-content: flex-start; } } .hero-byline{ display: flex; justify-content: center; gap: 1.1rem; margin-top: 1.75rem; font-size: 0.92rem; color: var(--ink-faint); flex-wrap: wrap; } @media (min-width: 900px){ .hero-byline{ justify-content: flex-start; } } .hero-byline strong{ color: var(--ink); font-weight: 600; } /* ---------- Profil -------------------------------------------------------- */ .profil-body{ max-width: 46rem; margin-inline: auto; display: grid; gap: 1.5rem; } .profil-body p{ font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.55; color: var(--ink-soft); letter-spacing: -0.012em; text-align: center; } /* ---------- Timeline (Signaturelement) ------------------------------------ Bleibt bewusst erhalten — eigenständiges Element statt Apple-Klon, nur visuell leichter/reduzierter gehalten. */ .timeline{ position: relative; max-width: 52rem; margin-inline: auto; } .timeline-item{ position: relative; display: grid; gap: 0.35rem 2rem; padding-block: 2.1rem; padding-left: clamp(2rem, 5vw, 3.25rem); border-top: 1px solid var(--line-soft); } .timeline-item:first-child{ border-top: none; } @media (min-width: 720px){ .timeline-item{ grid-template-columns: 9rem minmax(0, 1fr); } } .timeline-item::before{ content: ""; position: absolute; left: 0.55rem; top: 0; bottom: 0; width: 1px; background: var(--line); } .timeline-item:first-child::before{ top: 2.3rem; } .timeline-item:last-child::before{ bottom: calc(100% - 2.3rem); } .timeline-item::after{ content: ""; position: absolute; left: calc(0.55rem - 4px); top: 2.1rem; width: 8px; height: 8px; background: var(--paper); border: 1.5px solid var(--ink-faint); } .timeline-item.is-current::after{ border-color: var(--accent); background: var(--accent); } .timeline-period{ font-family: var(--font-display); font-size: 0.85rem; font-weight: 500; color: var(--ink-faint); padding-top: 0.3rem; } .timeline-num{ display: block; font-weight: 700; font-size: 1.3rem; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 0.2rem; } .timeline-item.is-current .timeline-num{ color: var(--accent-ink); } .timeline-item.is-current .timeline-period{ color: var(--accent-ink); } .timeline-head{ display: flex; align-items: flex-start; gap: 0.9rem; } .org-logo{ flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px; background: #FFFFFF; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; } .org-logo img{ width: 78%; height: 78%; object-fit: contain; } .timeline-role{ font-family: var(--font-display); font-weight: 600; font-size: 1.18rem; letter-spacing: -0.015em; margin-bottom: 0.2rem; } .timeline-org{ font-size: 0.96rem; color: var(--ink-faint); margin-bottom: 0.7rem; } .timeline-text{ color: var(--ink-soft); font-size: 1rem; line-height: 1.55; max-width: 56ch; } .badge-current{ display: inline-block; font-family: var(--font-display); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.01em; color: var(--accent-ink); background: var(--accent-tint); padding: 0.22em 0.65em; border-radius: var(--radius-pill); margin-left: 0.6em; vertical-align: 2px; } /* ---------- Projekte — nummerierte Case Studies ------------------------------ */ .cases{ display: grid; gap: clamp(3.5rem, 8vw, 5.5rem); max-width: 62rem; margin-inline: auto; } .case{ position: relative; padding: clamp(2rem, 5vw, 3.25rem) clamp(1.75rem, 5vw, 3rem); background: var(--paper-alt); border-radius: 24px; } .case-number{ font-family: var(--font-display); font-weight: 700; font-size: clamp(3.5rem, 9vw, 6rem); line-height: 1; letter-spacing: -0.03em; color: var(--accent-tint); -webkit-text-stroke: 1.5px var(--accent); margin-bottom: 0.5rem; } html[data-theme="dark"] .case-number{ color: transparent; } .case-head{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.25rem; margin-bottom: clamp(1.75rem, 4vw, 2.5rem); } .case-head h3{ font-size: clamp(1.5rem, 3vw, 1.9rem); letter-spacing: -0.018em; width: 100%; } .case-subtitle{ font-size: 1.02rem; color: var(--ink-soft); margin: 0; } .case-period{ font-family: var(--font-display); font-size: 0.85rem; font-weight: 500; color: var(--ink-faint); margin-left: auto; white-space: nowrap; } .case-stats{ display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1.5rem; padding: clamp(1.5rem, 4vw, 2.25rem) 0; margin-bottom: clamp(1.75rem, 4vw, 2.5rem); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .case-stat-num{ display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 4vw, 2.6rem); letter-spacing: -0.02em; color: var(--accent-ink); line-height: 1.1; } .case-stat-label{ display: block; font-size: 0.86rem; color: var(--ink-faint); margin-top: 0.3rem; } .case-body{ display: grid; gap: clamp(1.5rem, 4vw, 2.25rem); } @media (min-width: 780px){ .case-body{ grid-template-columns: 1fr 1fr 1fr; } } .case-block h4{ font-family: var(--font-display); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--accent-ink); margin: 0 0 0.7rem; } .case-block p{ font-size: 0.98rem; line-height: 1.55; color: var(--ink-soft); margin: 0; } .case-tags{ display: flex; flex-wrap: wrap; gap: 0.5rem; } .case-tags li{ font-family: var(--font-display); font-size: 0.76rem; font-weight: 500; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line); padding: 0.3em 0.7em; border-radius: var(--radius-pill); } .tag-pills{ display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; margin-bottom: 0; } .tag-pills li{ font-family: var(--font-display); font-size: 0.78rem; font-weight: 500; color: var(--accent-ink); background: var(--accent-tint); padding: 0.32em 0.75em; border-radius: var(--radius-pill); } /* ---------- Leistungen ---------------------------------------------------- */ .leistungen-grid{ display: grid; gap: clamp(2.5rem, 6vw, 3.5rem) clamp(2rem, 5vw, 4rem); max-width: 68rem; margin-inline: auto; } @media (min-width: 700px){ .leistungen-grid{ grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px){ .leistungen-grid{ grid-template-columns: repeat(3, 1fr); } } .leistung-num{ display: block; font-family: var(--font-display); font-weight: 700; font-size: 2.6rem; letter-spacing: -0.02em; color: var(--accent-tint); -webkit-text-stroke: 1.2px var(--accent); margin-bottom: 0.6rem; } html[data-theme="dark"] .leistung-num{ color: transparent; } .leistung h3{ font-size: 1.15rem; letter-spacing: -0.015em; margin-bottom: 1.1rem; } .leistung li{ position: relative; padding-left: 1.35rem; margin-bottom: 0.6rem; color: var(--ink-soft); font-size: 1rem; line-height: 1.5; } .leistung li::before{ content: ""; position: absolute; left: 0; top: 0.68em; width: 6px; height: 1.5px; background: var(--accent); } /* ---------- Ausbildung ------------------------------------------------------ */ .edu-highlights{ display: flex; justify-content: center; flex-wrap: wrap; gap: 0.75rem 1rem; max-width: 52rem; margin: 0 auto clamp(2.5rem, 6vw, 3.5rem); } .edu-highlight{ font-family: var(--font-display); font-weight: 600; font-size: clamp(1rem, 2vw, 1.15rem); letter-spacing: -0.015em; color: var(--ink); padding: 0.55em 1.1em; background: var(--paper-alt); border-radius: var(--radius-pill); } .edu-list{ display: grid; gap: 1.75rem; max-width: 52rem; margin-inline: auto; } .edu-item{ display: grid; gap: 0.3rem 2rem; padding-block: 1.75rem; border-top: 1px solid var(--line-soft); } .edu-item:first-child{ border-top: none; padding-top: 0; } @media (min-width: 720px){ .edu-item{ grid-template-columns: 9rem minmax(0, 1fr); } } .edu-body{ display: flex; gap: 1.25rem; align-items: flex-start; } .edu-logo{ flex-shrink: 0; width: 88px; height: 56px; border-radius: 8px; background: #FFFFFF; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; } .edu-logo img{ width: 82%; height: 82%; object-fit: contain; } .edu-content{ min-width: 0; } .edu-period{ font-family: var(--font-display); font-size: 0.85rem; font-weight: 500; color: var(--ink-faint); padding-top: 0.3rem; } .edu-title{ font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; letter-spacing: -0.015em; margin-bottom: 0.2rem; } .edu-org{ font-size: 0.96rem; color: var(--ink-faint); margin-bottom: 0.45rem; } .edu-text{ color: var(--ink-soft); font-size: 0.98rem; line-height: 1.5; max-width: 58ch; } .languages{ margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: clamp(2rem, 5vw, 2.75rem); border-top: 1px solid var(--line-soft); display: flex; justify-content: center; flex-wrap: wrap; gap: 2.75rem; max-width: 52rem; margin-inline: auto; } .language-item{ text-align: center; } .language-item .lang{ font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; } .language-item .level{ font-family: var(--font-display); font-size: 0.82rem; color: var(--ink-faint); } .courses{ margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: clamp(2rem, 5vw, 2.75rem); border-top: 1px solid var(--line-soft); max-width: 52rem; margin-inline: auto; } .courses-label{ font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; color: var(--ink-faint); margin: 0 0 1.25rem; } .courses-list{ display: grid; gap: 0.9rem 2.5rem; } @media (min-width: 700px){ .courses-list{ grid-template-columns: repeat(2, 1fr); } } .courses-list li{ display: flex; flex-direction: column; gap: 0.15rem; } .course-title{ font-size: 0.95rem; color: var(--ink); line-height: 1.4; } .course-org{ font-size: 0.82rem; color: var(--ink-faint); } /* ---------- Digitale Projekte --------------------------------------------- */ .web-projects{ display: grid; gap: clamp(1.5rem, 4vw, 2rem); max-width: 52rem; margin-inline: auto; } @media (min-width: 700px){ .web-projects{ grid-template-columns: repeat(2, 1fr); } } .web-project{ display: flex; flex-direction: column; background: var(--paper-alt); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; transition: background-color 0.2s ease; } .web-project:hover{ background: var(--line-soft); } .web-project-image{ aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-alt); } .web-project-image img{ width: 100%; height: 100%; object-fit: cover; } .web-project-body{ display: flex; flex-direction: column; flex: 1; padding: clamp(1.4rem, 3.5vw, 1.75rem); } .web-project-name{ font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; letter-spacing: -0.015em; margin-bottom: 0.6rem; } .web-project-desc{ font-size: 0.95rem; line-height: 1.5; color: var(--ink-soft); margin-bottom: 1.1rem; } .web-project-link{ font-family: var(--font-display); font-size: 0.9rem; font-weight: 500; color: var(--accent); display: inline-flex; align-items: center; gap: 0.3em; margin-top: auto; } .web-project-link .arrow{ transition: transform 0.2s ease; } .web-project:hover .web-project-link .arrow{ transform: translateX(3px); } /* ---------- Empfehlungen ---------------------------------------------------- */ .testimonial-featured{ max-width: 44rem; margin: 0 auto clamp(3rem, 7vw, 4rem); padding: clamp(2rem, 5vw, 3rem); background: var(--paper); border-radius: 24px; text-align: center; box-shadow: 0 1px 2px rgba(33, 31, 28, 0.04), 0 12px 32px -16px rgba(33, 31, 28, 0.12); } .testimonial-featured-avatar{ width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--accent-tint); margin: 0 auto 1.5rem; } .testimonial-featured blockquote{ margin: 0 0 1.5rem; font-size: clamp(1.25rem, 2.6vw, 1.6rem); line-height: 1.45; letter-spacing: -0.016em; color: var(--ink); font-weight: 500; } .testimonial-featured cite{ font-style: normal; display: block; font-size: 0.92rem; color: var(--ink-faint); } .testimonial-featured cite strong{ color: var(--ink); font-weight: 600; display: block; margin-bottom: 0.2rem; font-size: 1rem; } .testimonial-row{ display: flex; gap: 1.25rem; overflow-x: auto; padding-bottom: 0.5rem; scroll-snap-type: x proximity; max-width: 74rem; margin-inline: auto; -webkit-overflow-scrolling: touch; } .testimonial-row::-webkit-scrollbar{ height: 6px; } .testimonial-row::-webkit-scrollbar-thumb{ background: var(--line); border-radius: 3px; } .testimonial{ flex: 0 0 clamp(240px, 40vw, 300px); scroll-snap-align: start; display: flex; flex-direction: column; padding: clamp(1.5rem, 3.5vw, 1.9rem); background: var(--paper); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(33, 31, 28, 0.03), 0 8px 20px -12px rgba(33, 31, 28, 0.14); } .testimonial-avatar{ width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--accent-tint); margin-bottom: 1.1rem; } .testimonial blockquote{ margin: 0 0 1.35rem; font-size: 0.98rem; line-height: 1.5; letter-spacing: -0.008em; color: var(--ink); } .testimonial cite{ font-style: normal; display: block; font-size: 0.85rem; color: var(--ink-faint); margin-top: auto; } .testimonial cite strong{ color: var(--ink); font-weight: 600; display: block; margin-bottom: 0.2rem; font-size: 0.92rem; } /* ---------- Kontakt ---------------------------------------------------------- */ .contact-section{ padding-bottom: clamp(6rem, 14vw, 9rem); text-align: center; } .contact-text{ max-width: 34rem; margin-inline: auto; margin-bottom: 2.5rem; } .contact-text p{ font-size: clamp(1.1rem, 1.8vw, 1.3rem); line-height: 1.5; color: var(--ink-soft); letter-spacing: -0.012em; } .contact-card{ max-width: 26rem; margin-inline: auto; background: var(--paper-alt); border-radius: var(--radius); padding: clamp(1.75rem, 4vw, 2.25rem); text-align: left; } .contact-row{ display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.05rem; border-top: 1px solid var(--line); } .contact-row:first-child{ border-top: none; padding-top: 0; } .contact-row:last-child{ padding-bottom: 0; } .contact-row .label{ font-family: var(--font-display); font-size: 0.85rem; color: var(--ink-faint); } .contact-row .value{ font-family: var(--font-display); font-weight: 500; font-size: 1rem; text-decoration: none; color: var(--accent); transition: color 0.2s ease; } .contact-row .value:hover{ color: var(--accent-ink); } .contact-row .value--plain{ color: var(--ink); font-weight: 400; } .copy-btn{ font-family: var(--font-display); font-size: 0.85rem; font-weight: 500; background: var(--paper); border: none; border-radius: var(--radius-pill); color: var(--ink); padding: 0.55em 1.1em; cursor: pointer; transition: background-color 0.2s ease; } .copy-btn:hover{ background: var(--line-soft); } .copy-btn[data-copied="true"]{ color: var(--accent-ink); } /* ---------- Rechtliche Seiten (Impressum, AGB) ---------------------------------- */ .legal-page{ padding-block: clamp(4rem, 10vw, 7rem) clamp(5rem, 12vw, 8rem); } .legal-title{ font-size: clamp(2rem, 4.5vw, 2.9rem); } .legal-body{ text-align: left; } .legal-body h2{ font-size: 1.15rem; letter-spacing: -0.014em; margin-top: 2.5rem; margin-bottom: 0.75rem; } .legal-body h2:first-child{ margin-top: 0; } .legal-body p{ font-size: 1rem; line-height: 1.6; color: var(--ink-soft); letter-spacing: -0.011em; } .legal-link{ color: var(--accent); text-decoration: none; } .legal-link:hover{ color: var(--accent-ink); } .legal-note{ margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line-soft); font-size: 0.9rem; color: var(--ink-faint); } /* ---------- Footer ------------------------------------------------------------ */ .site-footer{ border-top: 1px solid var(--line); padding-block: 2.25rem; } .footer-top{ display: flex; justify-content: center; margin-bottom: 1.75rem; } .social-row{ display: flex; gap: 0.75rem; } .social-row a{ display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--paper-alt); border: 1px solid var(--line); color: var(--ink-soft); text-decoration: none; font-family: var(--font-display); font-size: 0.7rem; font-weight: 700; letter-spacing: -0.02em; transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease; } .social-row a:hover{ border-color: var(--accent); color: var(--accent-ink); background: var(--accent-tint); } .site-footer .wrap{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; font-size: 0.85rem; color: var(--ink-faint); } .footer-links{ display: flex; flex-wrap: wrap; gap: 1.5rem; } .site-footer a{ color: var(--ink-faint); text-decoration: none; } .site-footer a:hover{ color: var(--ink-soft); } /* ---------- Reveal-on-scroll (weicher, Apple-typischer Timing) ----------------- */ html.js .reveal{ opacity: 0; transform: translateY(22px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } html.js .reveal.is-visible{ opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce){ html.js .reveal{ opacity: 1; transform: none; } }