/* ============================================================ FCS Düren — Übergangs-Website (shared page styling) Built entirely on the design-system tokens (../styles.css). Per-page brand colour comes from data-brand on . ============================================================ */ /* ---- Reset-ish page shell ---- */ html { scroll-behavior: smooth; } body { min-height: 100vh; } .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: var(--container-narrow); } .section { padding-block: var(--space-9); } .section--tight { padding-block: var(--space-8); } .section--alt { background: var(--surface-alt); } .section-head { max-width: 640px; margin-bottom: var(--space-7); } .overline { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-overline); letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--brand-primary); margin: 0 0 var(--space-3); } .section-head h2 { font-size: var(--fs-display-md); margin: 0 0 var(--space-3); } .section-head p { font-size: var(--fs-body-lg); color: var(--text-muted); margin: 0; } .lead { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--text-body); } /* ---- Construction banner ---- */ .constr { background: var(--brand-primary); color: var(--brand-on-primary); font-size: var(--fs-body-sm); } .constr .container { display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-3); justify-content: center; text-align: center; } .constr [data-lucide] { width: 17px; height: 17px; flex: none; opacity: .9; } .constr strong { font-weight: var(--fw-bold); } /* ---- Site header ---- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.82); backdrop-filter: saturate(1.2) blur(12px); border-bottom: 1px solid var(--border-subtle); } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); height: 74px; } .brand-lockup { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; min-width: 0; } .brand-lockup:hover { text-decoration: none; } .brand-lockup img { height: 40px; width: auto; } .brand-lockup .bl-text { display: flex; flex-direction: column; line-height: 1.05; } .brand-lockup .bl-name { font-family: var(--font-display); font-weight: var(--fw-black); font-size: 17px; letter-spacing: var(--ls-tight); color: var(--text-strong); } .brand-lockup .bl-sub { font-family: var(--font-body); font-size: 12px; color: var(--text-muted); letter-spacing: .01em; } .main-nav { display: flex; align-items: center; gap: var(--space-5); } .main-nav a { white-space: nowrap; } .main-nav a { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-body-md); color: var(--text-body); } .main-nav a:hover { color: var(--brand-primary); text-decoration: none; } .nav-back { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-body-sm); color: var(--text-muted); } .nav-back [data-lucide] { width: 16px; height: 16px; } .nav-back:hover { color: var(--brand-primary); text-decoration: none; } .nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: #fff; color: var(--text-strong); cursor: pointer; } .nav-toggle [data-lucide] { width: 24px; height: 24px; } .nav-toggle .ic-close { display: none; } .site-header.nav-open .nav-toggle .ic-open { display: none; } .site-header.nav-open .nav-toggle .ic-close { display: inline-flex; } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-body-md); line-height: 1; padding: 15px 24px; border-radius: var(--radius-sm); border: 1.5px solid transparent; cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); text-decoration: none; } .btn [data-lucide] { width: 18px; height: 18px; } .btn:hover { text-decoration: none; } .btn:active { transform: scale(.98); } .btn--primary { background: var(--brand-primary); color: var(--brand-on-primary); } .btn--primary:hover { background: var(--brand-primary-dark); box-shadow: var(--shadow-md); } .btn--ghost { background: transparent; color: var(--brand-primary); border-color: var(--border-strong); } .btn--ghost:hover { border-color: var(--brand-primary); background: var(--brand-tint); } .btn--ondark { background: #fff; color: var(--brand-primary); } .btn--ondark:hover { box-shadow: 0 8px 24px rgba(0,0,0,.25); transform: translateY(-1px); } .btn--ondark-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); } .btn--ondark-ghost:hover { border-color: #fff; background: rgba(255,255,255,.12); } .btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); } /* ---- Hero ---- */ .hero { position: relative; overflow: hidden; background: var(--brand-primary); color: var(--brand-on-primary); } .hero .container { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--space-8); align-items: center; padding-block: var(--space-9); } .hero--center .container { grid-template-columns: 1fr; justify-items: center; text-align: center; max-width: 900px; padding-block: var(--space-10); } .hero-eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-overline); letter-spacing: var(--ls-overline); text-transform: uppercase; color: rgba(255,255,255,.85); margin-bottom: var(--space-4); } .hero h1 { color: #fff; font-size: var(--fs-display-xl); line-height: var(--lh-tight); letter-spacing: var(--ls-display); margin: 0 0 var(--space-5); } .hero--center h1 { font-size: clamp(44px, 6vw, 84px); } .hero p { color: rgba(255,255,255,.92); font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); max-width: 46ch; margin: 0 0 var(--space-6); } .hero--center p { margin-inline: auto; } .hero .btn-row { margin-top: var(--space-2); } .hero--center .btn-row { justify-content: center; } .hero-watermark { position: absolute; z-index: 1; opacity: .07; pointer-events: none; } .hero-watermark.wm-right { right: -80px; top: 50%; transform: translateY(-50%); width: 560px; } .hero-media { position: relative; z-index: 2; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; background: rgba(255,255,255,.08); } /* Full-bleed photo hero */ .hero--photo { background: var(--ink); } .hero--photo .hero-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center 62%; } .hero--photo .hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,20,24,.86) 0%, rgba(20,20,24,.66) 42%, rgba(20,20,24,.18) 100%); } .hero--photo .container { grid-template-columns: minmax(0, 640px); padding-block: var(--space-10); } @media (max-width: 900px) { .hero--photo .hero-bg::after { background: linear-gradient(180deg, rgba(20,20,24,.62) 0%, rgba(20,20,24,.82) 100%); } } /* Brand-tinted photo hero (department subpages) */ .hero--brandtint .hero-bg::after { background: linear-gradient(90deg, color-mix(in srgb, var(--brand-primary-dark) 86%, transparent) 0%, color-mix(in srgb, var(--brand-primary-dark) 62%, transparent) 46%, color-mix(in srgb, var(--brand-primary-dark) 12%, transparent) 100%); } @media (max-width: 900px) { .hero--brandtint .hero-bg::after { background: linear-gradient(180deg, color-mix(in srgb, var(--brand-primary-dark) 55%, transparent) 0%, color-mix(in srgb, var(--brand-primary-dark) 84%, transparent) 100%); } } .hero-media image-slot { width: 100%; height: 100%; } /* ---- Notice inline (repeats construction message in body) ---- */ .notice { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-5); border-radius: var(--radius-md); background: var(--brand-tint); border: 1px solid var(--border-subtle); } .notice [data-lucide] { width: 22px; height: 22px; color: var(--brand-primary); flex: none; margin-top: 2px; } .notice p { margin: 0; color: var(--text-body); } .notice strong { color: var(--text-strong); } /* ---- Department grid (Deckseite) ---- */ .dept-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } .dept-card { position: relative; display: flex; flex-direction: column; gap: var(--space-4); background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-6); overflow: hidden; text-decoration: none; color: inherit; transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out); box-shadow: var(--shadow-xs); } .dept-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--brand-primary); } .dept-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--brand-primary-soft); text-decoration: none; } .dept-card .dc-mark { height: 56px; width: 56px; object-fit: contain; object-position: left center; } .dept-card h3 { font-size: var(--fs-heading-lg); margin: 0; color: var(--text-strong); } .dept-card .dc-tag { font-family: var(--font-body); font-size: var(--fs-body-sm); color: var(--text-muted); font-weight: var(--fw-medium); margin-top: -8px; } .dept-card p { margin: 0; color: var(--text-body); font-size: var(--fs-body-md); } .dept-card .dc-go { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: var(--fw-bold); color: var(--brand-primary); } .dept-card .dc-go [data-lucide] { width: 18px; height: 18px; transition: transform var(--dur-fast) var(--ease-out); } .dept-card:hover .dc-go [data-lucide] { transform: translateX(4px); } .dept-card--soon { opacity: .92; } .dept-card .dc-badge { position: absolute; top: var(--space-5); right: var(--space-5); font-family: var(--font-body); font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--brand-primary); background: var(--brand-tint); padding: 5px 10px; border-radius: var(--radius-pill); } /* ---- Feature / info cards ---- */ .card-grid { display: grid; gap: var(--space-5); } .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .info-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-6); box-shadow: var(--shadow-xs); } .info-card .ic-ico { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--radius-sm); background: var(--brand-tint); color: var(--brand-primary); margin-bottom: var(--space-4); } .info-card .ic-ico [data-lucide] { width: 24px; height: 24px; } .info-card h3 { font-size: var(--fs-heading-md); margin: 0 0 var(--space-2); } .info-card p { margin: 0; color: var(--text-muted); } /* ---- News / blog ---- */ .news-card { display: flex; flex-direction: column; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-xs); transition: box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); } .news-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } .news-media { aspect-ratio: 16 / 10; background: var(--brand-tint); position: relative; } .news-media image-slot { width: 100%; height: 100%; } .news-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; } .news-date { font-family: var(--font-body); font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase; color: var(--brand-primary); } .news-body h3 { font-size: var(--fs-heading-sm); margin: 0; color: var(--text-strong); } .news-body p { margin: 0; font-size: var(--fs-body-sm); color: var(--text-muted); } /* ---- Contact card ---- */ .contact-wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-7); align-items: start; } .contact-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-7); box-shadow: var(--shadow-sm); } .contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); } .contact-list li { display: flex; gap: var(--space-4); align-items: flex-start; } .contact-list .cl-ico { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius-sm); background: var(--brand-tint); color: var(--brand-primary); flex: none; } .contact-list [data-lucide] { width: 20px; height: 20px; } .contact-list .cl-label { font-family: var(--font-body); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: var(--fw-bold); margin-bottom: 2px; } .contact-list .cl-value { font-size: var(--fs-body-md); color: var(--text-strong); font-weight: var(--fw-medium); } .contact-list a.cl-value:hover { color: var(--brand-primary); } /* ---- Mail CTA panel (Kita) ---- */ .mail-panel { background: var(--brand-primary); color: #fff; border-radius: var(--radius-xl); padding: var(--space-9) var(--space-8); text-align: center; position: relative; overflow: hidden; } .mail-panel h2 { color: #fff; font-size: var(--fs-display-md); margin: 0 0 var(--space-4); } .mail-panel p { color: rgba(255,255,255,.9); font-size: var(--fs-body-lg); max-width: 52ch; margin: 0 auto var(--space-6); } .mail-panel .wm { position: absolute; right: -40px; bottom: -40px; width: 260px; opacity: .12; pointer-events: none; } /* ---- FAQ (accordion via

) ---- */ .faq { display: flex; flex-direction: column; gap: var(--space-3); max-width: var(--container-narrow); } .faq details { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-card); overflow: hidden; transition: border-color var(--dur-fast) var(--ease-out); } .faq details[open] { border-color: var(--brand-primary-soft); box-shadow: var(--shadow-xs); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); cursor: pointer; list-style: none; padding: var(--space-5); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-heading-sm); color: var(--text-strong); } .faq summary::-webkit-details-marker { display: none; } .faq summary .fq-plus { flex: none; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--brand-tint); color: var(--brand-primary); transition: transform var(--dur-med) var(--ease-out); } .faq details[open] summary .fq-plus { transform: rotate(45deg); } .faq .fq-body { padding: 0 var(--space-5) var(--space-5); color: var(--text-body); } .faq .fq-body p { margin: 0; } /* ---- Footer ---- */ .site-footer { background: var(--ink); color: rgba(255,255,255,.72); padding-block: var(--space-8) var(--space-6); font-size: var(--fs-body-sm); } .site-footer .container { display: flex; flex-direction: column; gap: var(--space-6); } .footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-6); } .footer-brand { display: flex; align-items: center; gap: var(--space-3); } .footer-brand img { height: 38px; width: auto; } .footer-brand .fb-name { font-family: var(--font-display); font-weight: var(--fw-black); font-size: 16px; color: #fff; line-height: 1.1; } .footer-brand .fb-sub { font-size: 12px; color: rgba(255,255,255,.6); } .footer-contact { display: flex; flex-direction: column; gap: 4px; } .footer-contact .fc-line { color: rgba(255,255,255,.8); } .footer-contact a { color: rgba(255,255,255,.8); } .footer-contact a:hover { color: #fff; } .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-5); border-top: 1px solid rgba(255,255,255,.14); } .footer-links { display: flex; flex-wrap: wrap; gap: var(--space-5); } .footer-links a { color: rgba(255,255,255,.72); font-weight: var(--fw-medium); } .footer-links a:hover { color: #fff; } .footer-copy { color: rgba(255,255,255,.5); } /* ---- Legal (Impressum/Datenschutz) ---- */ .legal { padding-block: var(--space-8) var(--space-9); } .legal h1 { font-size: var(--fs-display-md); margin-bottom: var(--space-5); } .legal h2 { font-size: var(--fs-heading-md); margin: var(--space-7) 0 var(--space-3); } .legal p, .legal address { font-size: var(--fs-body-md); line-height: var(--lh-relaxed); color: var(--text-body); font-style: normal; } .legal .placeholder { background: var(--gray-100); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 3px 8px; color: var(--text-muted); font-size: .95em; } .legal .note { background: var(--brand-tint); border-radius: var(--radius-md); padding: var(--space-5); margin-bottom: var(--space-6); font-size: var(--fs-body-sm); } /* ---- Responsive ---- */ @media (max-width: 900px) { .hero .container { grid-template-columns: 1fr; gap: var(--space-6); padding-block: var(--space-8); } .hero-media { order: -1; aspect-ratio: 16/10; } .hero h1 { font-size: var(--fs-display-lg); } .dept-grid { grid-template-columns: 1fr; } .card-grid.cols-3, .card-grid.cols-2 { grid-template-columns: 1fr; } .contact-wrap { grid-template-columns: 1fr; } .nav-toggle { display: inline-flex; } .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-2) 0; background: #fff; border-bottom: 1px solid var(--border-subtle); box-shadow: var(--shadow-md); } .site-header.nav-open .main-nav { display: flex; } .main-nav a, .main-nav a.nav-back { padding: 14px var(--gutter); font-size: var(--fs-body-lg); border-top: 1px solid var(--gray-100); } .main-nav a:first-child { border-top: none; } .section { padding-block: var(--space-8); } .section-head h2 { font-size: var(--fs-heading-lg); } } @media (max-width: 560px) { .hero h1, .hero--center h1 { font-size: var(--fs-display-md); } .brand-lockup .bl-sub { display: none; } } /* ---- Scroll-Reveal (Fade-in) ---- */ @media (prefers-reduced-motion: no-preference) { .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); will-change: opacity, transform; } .reveal--in { opacity: 1; transform: none; } } /* ---- Blog & Artikel (aus früherer Version übernommen) ---- */ .news-nocover { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--brand-tint); } .news-nocover img { width: 64px; height: 64px; object-fit: contain; opacity: .55; } .news-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .news-card:hover .dc-go [data-lucide] { transform: translateX(4px); } /* ---- Blog: article page + list ---- */ .article { padding-block: var(--space-8) var(--space-9); } .article-head { max-width: var(--container-narrow); margin: 0 auto var(--space-7); } .article-head .news-date { display: block; margin-bottom: var(--space-3); } .article-head h1 { font-size: var(--fs-display-md); line-height: var(--lh-tight); margin: 0; color: var(--text-strong); } .article-cover { max-width: var(--container-max); margin: 0 auto var(--space-7); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); } .article-cover img { width: 100%; display: block; max-height: 520px; object-fit: cover; } .article-cover.fit-contain { background: #2b2b2b; } .article-cover.fit-contain img { object-fit: contain; max-height: 640px; } .article-body { max-width: var(--container-narrow); margin: 0 auto; } .article-body p { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--text-body); margin: 0 0 var(--space-5); } .article-body .a-caption { font-size: var(--fs-body-sm); color: var(--text-muted); font-style: italic; margin-bottom: var(--space-5); } .article-body figure { margin: var(--space-6) 0; } .article-body figure img { width: 100%; border-radius: var(--radius-md); display: block; } .article-body figure.fit-contain { background: #2b2b2b; border-radius: var(--radius-md); } .article-body figure.fit-contain img { object-fit: contain; max-height: 620px; } .article-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin: var(--space-6) 0; } .article-gallery img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--radius-md); display: block; } .article-gallery.g-landscape img { aspect-ratio: 4/3; } .article-links { background: var(--brand-tint); border-radius: var(--radius-md); padding: var(--space-5); margin: var(--space-6) 0; } .article-links p { font-size: var(--fs-body-md); margin: 0 0 var(--space-3); } .article-links ul { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: 6px; } .article-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); background: var(--brand-tint); border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); margin: var(--space-6) 0; } .article-cta span { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-heading-sm); color: var(--text-strong); } .article-foot { max-width: var(--container-narrow); margin: var(--space-8) auto 0; padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); } .blog-loading { text-align: center; color: var(--text-muted); padding: var(--space-8); } @media (max-width: 700px) { .article-gallery { grid-template-columns: 1fr 1fr; gap: var(--space-3); } .article-head h1 { font-size: var(--fs-heading-lg); } } /* ---- Anklickbare Adresse (Kartenlink) ---- */ .addr-link { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 35%, transparent); transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .addr-link:hover { color: var(--brand-primary); border-color: currentColor; text-decoration: none; } .cl-value .addr-link [data-lucide] { width: 14px; height: 14px; vertical-align: -2px; margin-left: 4px; opacity: .6; } .footer-contact .addr-link:hover { color: #fff; } /* Kompaktere Navigation bei mittleren Breiten (9 Menüpunkte) */ @media (min-width: 901px) and (max-width: 1420px) { .main-nav { gap: var(--space-4); } .main-nav a { font-size: var(--fs-body-sm); } } /* Bildmarke statt generischem Icon in der Hero-Überzeile */ .hero-eyebrow img { height: 24px; width: auto; display: block; flex: 0 0 auto; } /* ---- Lange deutsche Wörter auf schmalen Displays sauber trennen ---- */ @media (max-width: 640px) { h1, h2, h3, .hero h1, .legal h1, .legal h2, .section-head h2 { -webkit-hyphens: auto; hyphens: auto; } .legal p, .fq-body p { -webkit-hyphens: auto; hyphens: auto; } } /* Logo-Schriftzug nur bei sichtbarer Desktop-Navigation nicht umbrechen (auf schmalen Displays muss er umbrechen dürfen, sonst wird das Burger-Menü aus dem Bildschirm geschoben). */ @media (min-width: 901px) { .brand-lockup { flex: 0 0 auto; } .brand-lockup .bl-name, .brand-lockup .bl-sub { white-space: nowrap; } } /* Auf schmalen Displays darf der Schriftzug schrumpfen und umbrechen, damit das Burger-Menü im Bildschirm bleibt. */ @media (max-width: 900px) { .brand-lockup .bl-text { min-width: 0; overflow-wrap: break-word; } .nav-toggle { flex: 0 0 auto; } } /* Kontakt-Panel auf schmalen Displays: weniger Innenabstand, Überschrift passt sich an */ @media (max-width: 640px) { .mail-panel { padding: var(--space-7) var(--space-5); border-radius: var(--radius-lg); } .mail-panel h2 { font-size: clamp(26px, 7.5vw, var(--fs-display-md)); -webkit-hyphens: auto; hyphens: auto; } .mail-panel p { font-size: var(--fs-body-md); } .mail-panel .wm { width: 180px; right: -30px; bottom: -30px; } }