/* ============================================================ SCHUHHAUS DISCHER – Stylesheet Token & @font-face liegen inline im (partials/head.php). Aufbau: Basis → Layout → Kopf/Nav → Sektionen → Komponenten → Seiten-Spezifisches → Utilities → Motion/Print ============================================================ */ /* ── Basis ──────────────────────────────────────────────── */ img { max-width: 100%; height: auto; display: block; } p, ul, ol, table { margin: 0 0 1em; } ul, ol { padding-left: 1.2em; } a { color: var(--rot); text-underline-offset: 3px; } a:hover { color: var(--rot-dunkel); } strong { font-weight: 650; } hr { border: 0; border-top: 1px solid var(--creme-tief); margin: 2rem 0; } address { font-style: normal; } table { border-collapse: collapse; } :focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; border-radius: 2px; } h1, h2, h3, h4 { font-family: var(--kopf); line-height: 1.18; margin: 0 0 .55em; font-weight: 650; letter-spacing: -.01em; text-wrap: balance; } h1 { font-size: clamp(2.3rem, 5.2vw, 4rem); } h2 { font-size: clamp(1.85rem, 3.7vw, 2.9rem); } h3 { font-size: clamp(1.25rem, 2.1vw, 1.55rem); } h4 { font-size: 1.08rem; font-family: var(--schrift); font-weight: 700; } body { font-size: clamp(1.02rem, .4vw + .95rem, 1.125rem); } .einleitung { font-size: 1.22em; color: var(--tinte-60); max-width: 44em; } .fliess { max-width: 68ch; } /* Eyebrow/Vorzeile über Überschriften (Museo, gesperrt) */ .vorzeile { font-family: var(--schrift); font-size: clamp(.78rem, 1vw, .92rem); font-weight: 700; line-height: 1.4; color: var(--rot); display: block; margin-bottom: .6em; text-transform: uppercase; letter-spacing: .16em; } .sektion--dunkel .vorzeile { color: var(--gruen); } /* ── Layout ─────────────────────────────────────────────── */ .innen { width: min(100% - 2.5rem, 72rem); margin-inline: auto; } .innen--schmal { width: min(100% - 2.5rem, 50rem); } .sektion { padding-block: clamp(3.4rem, 8.5vw, 7rem); } .sektion--creme { background: var(--creme); } .sektion--tief { background: var(--creme-tief); } .sektion--dunkel { background: var(--dunkel, #2b2723); color: #f3efe8; } .sektion--dunkel h2, .sektion--dunkel h3 { color: #fff; } .sektion--dunkel a { color: #f7b0ab; } .sektion--kompakt { padding-block: clamp(2rem, 4vw, 3rem); } .sektionskopf { max-width: 46em; margin-bottom: clamp(1.6rem, 3.5vw, 2.6rem); } .sektionskopf--mitte { margin-inline: auto; text-align: center; } /* ── Skip-Link & Topbar ─────────────────────────────────── */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--tinte); color: #fff; padding: .7rem 1.2rem; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; color: #fff; } .topbar { margin: 0; background: var(--tinte); color: #e9e4dc; font-size: .875rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .45rem max(1.25rem, calc((100% - 72rem) / 2)); } .topbar a { color: #fff; text-decoration: none; } .topbar a:hover { text-decoration: underline; color: #fff; } .topbar__status { display: inline-flex; align-items: center; gap: .45em; } .status-punkt { width: .6em; height: .6em; border-radius: 50%; background: var(--gruen); display: inline-block; flex: 0 0 auto; } .ist-zu .status-punkt, .status-punkt.ist-zu { background: #d9a13c; } /* ── Kopf & Navigation ──────────────────────────────────── */ .kopf { background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--creme-tief); position: sticky; top: 0; z-index: 60; } @supports (backdrop-filter: blur(1px)) { .kopf { background: rgba(255, 255, 255, .82); backdrop-filter: blur(14px) saturate(1.4); } } .kopf__innen { width: min(100% - 2.5rem, 72rem); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: .8rem; } .kopf__logo { display: block; flex: 0 0 auto; } .kopf__logo img { width: clamp(108px, 12vw, 148px); height: auto; } .nav { display: flex; align-items: center; } .nav__liste { list-style: none; margin: 0; padding: 0; display: flex; gap: .2rem; align-items: center; } .nav__punkt > a { display: block; padding: .7rem .9rem; text-decoration: none; color: var(--tinte); font-weight: 600; background-image: linear-gradient(var(--rot), var(--rot)); background-repeat: no-repeat; background-size: 0% 3px; background-position: .9rem calc(100% - .35rem); border-radius: 10px; transition: background-size .22s ease, color .15s ease; } .nav__punkt > a:hover { color: var(--rot-dunkel); background-size: calc(100% - 1.8rem) 3px; } .nav__punkt.ist-aktiv > a { color: var(--rot); background-size: calc(100% - 1.8rem) 3px; } .nav__punkt--cta > a { margin-left: .6rem; border: 2px solid var(--rot); border-radius: 999px; color: var(--rot); padding: .55rem 1.25rem; background-image: none; transition: background-color .16s ease, color .16s ease; } .nav__punkt--cta > a:hover, .nav__punkt--cta.ist-aktiv > a { background-color: var(--rot); color: #fff; } /* Unterpunkte (Desktop: Dropdown) */ .nav__punkt { position: relative; } .nav__unter { list-style: none; margin: 0; padding: .5rem; position: absolute; left: 0; top: 100%; min-width: 13rem; background: #fff; border: 1px solid var(--creme-tief); border-radius: 12px; box-shadow: 0 14px 34px rgba(43, 39, 35, .12); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; } .nav__punkt:hover > .nav__unter, .nav__punkt:focus-within > .nav__unter { opacity: 1; visibility: visible; transform: none; } .nav__unter a { display: block; padding: .55rem .8rem; border-radius: 8px; color: var(--tinte); text-decoration: none; font-weight: 500; white-space: nowrap; } .nav__unter a:hover { background: var(--creme); } .nav__unter a[aria-current="page"] { color: var(--rot); font-weight: 650; } /* Mobil: Burger (
nur als Schalter, die Liste ist Geschwister-Element – so bleibt die Desktop-Nav sichtbar und das Menü funktioniert ohne JS) */ .nav__mobil { display: none; } .nav__burger { cursor: pointer; list-style: none; display: inline-flex; font-weight: 650; padding: .6rem .9rem; border-radius: 10px; border: 1px solid var(--creme-tief); align-items: center; gap: .6rem; } .nav__burger::-webkit-details-marker { display: none; } .burger { display: inline-flex; flex-direction: column; gap: 4px; width: 20px; } .burger span { height: 2px; background: var(--tinte); border-radius: 2px; transition: transform .2s, opacity .2s; } @media (max-width: 900px) { .nav__mobil { display: block; } .nav__mobil[open] .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav__mobil[open] .burger span:nth-child(2) { opacity: 0; } .nav__mobil[open] .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .nav__liste { display: none; } .nav__mobil[open] ~ .nav__liste { display: flex; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; align-items: stretch; background: #fff; border-bottom: 1px solid var(--creme-tief); padding: .6rem 1.25rem 1.2rem; box-shadow: 0 22px 34px rgba(43, 39, 35, .14); } .nav__punkt > a { padding: .8rem .4rem; border-bottom: 1px solid var(--creme); border-radius: 0; background-image: none; } .nav__punkt.ist-aktiv > a { color: var(--rot); } .nav__punkt--cta > a { margin: .8rem 0 0; text-align: center; border-radius: 999px; border-bottom: 0; padding: .7rem 1.25rem; } .nav__unter { position: static; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; padding: 0 0 .4rem .9rem; border-radius: 0; } .nav__unter a { padding: .55rem .4rem; } .topbar { font-size: .8rem; } } /* Sonderöffnungszeiten-Hinweis */ .sonderzeiten { background: #fdf6e3; border-bottom: 1px solid #f0e2bb; } .sonderzeiten__innen { width: min(100% - 2.5rem, 72rem); margin-inline: auto; padding-block: .6rem; } .sonderzeiten p { margin: .15rem 0; font-size: .95rem; } /* ── Buttons ────────────────────────────────────────────── */ .knopf { display: inline-block; padding: .78rem 1.5rem; border-radius: 999px; font-weight: 650; text-decoration: none; border: 2px solid transparent; transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease; cursor: pointer; font-size: 1rem; font-family: var(--schrift); line-height: 1.4; } .knopf--voll { background: var(--rot); color: #fff; } .knopf--voll:hover { background: var(--rot-dunkel); color: #fff; transform: translateY(-1px); } .knopf--rahmen { border-color: currentColor; color: var(--tinte); background: transparent; } .knopf--rahmen:hover { background: var(--tinte); color: #fff; border-color: var(--tinte); } .knopf--hell { border-color: #fff; color: #fff; background: transparent; } .knopf--hell:hover { background: #fff; color: var(--tinte); } .knopfzeile { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; } .textlink { font-weight: 650; } .textlink::after { content: " →"; } /* ── Brotkrumen ─────────────────────────────────────────── */ .brotkrumen { font-size: .875rem; color: var(--tinte-60); padding-top: 1rem; } .brotkrumen ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; } .brotkrumen li + li::before { content: "›"; margin-right: .35rem; color: var(--tinte-60); } .brotkrumen a { color: var(--tinte-60); text-decoration: none; } .brotkrumen a:hover { color: var(--rot); text-decoration: underline; } /* ── Öffnungszeiten-Objekt ──────────────────────────────── */ .oz { background: #fff; border-radius: 16px; padding: 1.4rem 1.5rem; box-shadow: 0 18px 44px rgba(43, 39, 35, .14); border-top: 4px solid var(--gruen); max-width: 24rem; color: var(--tinte); } .oz__titel { font-weight: 700; display: flex; align-items: center; gap: .5em; margin-bottom: .7rem; } .oz__tabelle { width: 100%; margin: 0; } .oz__tabelle th { text-align: left; font-weight: 500; padding: .3rem 0; color: var(--tinte-60); } .oz__tabelle td { text-align: right; padding: .3rem 0; font-variant-numeric: tabular-nums; font-weight: 600; } .oz__heute th, .oz__heute td { color: var(--tinte); font-weight: 700; } .oz__heute th::before { content: "▸ "; color: var(--gruen); } .oz--kompakt { background: transparent; box-shadow: none; border: 0; padding: 0; border-radius: 0; max-width: none; } .oz--kompakt .oz__titel { font-size: .95rem; } .oz--kompakt .oz__tabelle td { text-align: left; padding-left: 1rem; } /* ── Held (Startseite): großes Bild, Text in der Bildfläche ─ */ .held { background: var(--creme); } .held__flaeche { position: relative; background: #eef0f2; } .held__foto { width: 100%; height: auto; display: block; } /* Headline links oben in der (erweiterten) Bildfläche */ .held__wort { position: absolute; z-index: 2; left: max(1.25rem, calc((100vw - 76rem) / 2)); top: clamp(1.4rem, 5.5vw, 4.5rem); width: min(31vw, 31rem); } .held__sub { margin: .7rem 0 0; font-size: clamp(.95rem, 1.3vw, 1.3rem); color: var(--tinte-60); max-width: 26em; } .held__hand { font-family: var(--schrift); font-weight: 700; color: var(--rot); font-size: clamp(.78rem, 1vw, .92rem); line-height: 1.4; text-transform: uppercase; letter-spacing: .16em; display: block; margin-bottom: .5em; } .held__wort h1 { font-size: clamp(1.4rem, 3.3vw, 3.4rem); margin: 0; } /* Öffnungszeiten als freier Text mit feinem Rahmen oben rechts */ .held__zeiten { position: absolute; z-index: 2; top: clamp(.9rem, 2.2vw, 1.8rem); right: clamp(1rem, 2.5vw, 3rem); } .oz--frei { background: transparent; border: 1px solid rgba(43, 39, 35, .35); border-radius: 10px; box-shadow: none; padding: .7rem .95rem; max-width: none; color: var(--tinte); } .oz--frei .oz__titel { font-size: .85rem; margin-bottom: .35rem; } .oz--frei .oz__tabelle { font-size: .82rem; } .oz--frei .oz__tabelle th { padding: .12rem 0; color: var(--tinte); font-weight: 500; } .oz--frei .oz__tabelle td { padding: .12rem 0 .12rem .8rem; white-space: nowrap; } .oz--frei .oz__heute th { font-weight: 700; } /* CTA-Zeile unterhalb des Bildes */ .held__cta { width: min(100% - 2.5rem, 72rem); margin-inline: auto; text-align: center; padding-block: clamp(1.4rem, 3.5vw, 2.2rem); } .held__cta p { margin: 0 auto .9rem; max-width: 60ch; color: var(--tinte-60); font-size: 1.05em; } @media (max-width: 760px) { .held__flaeche { display: flex; flex-direction: column; background: var(--creme); } .held__wort { position: static; transform: none; width: auto; order: -1; padding: 1.6rem 1.25rem .9rem; } .held__wort h1 { font-size: clamp(1.9rem, 7vw, 2.4rem); } .held__hand { font-size: clamp(1.35rem, 5vw, 1.7rem); } .held__foto { height: clamp(170px, 52vw, 300px); object-fit: cover; object-position: 82% 50%; } .held__zeiten { position: static; padding: 1rem 1.25rem 0; } .oz--frei { max-width: 22rem; } } /* ── Scrolly-Held (Startseite): 4 Szenen beim Scrollen ──── */ .scrolly__lauf { position: relative; height: 400vh; height: 400svh; } .scrolly__buehne { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--tinte); } .scrolly__bild { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; } .scrolly__bild img { width: 100%; height: 100%; object-fit: cover; display: block; } .scrolly__bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28, 24, 20, .78) 0%, rgba(28, 24, 20, .48) 36%, rgba(28, 24, 20, .05) 64%), linear-gradient(0deg, rgba(28, 24, 20, .35) 0%, rgba(28, 24, 20, 0) 35%); } .scrolly__bild--familie img { object-position: 70% 50%; } .scrolly__bild--damen img { object-position: 30% 85%; } .scrolly__bild--damen::after { background: linear-gradient(270deg, rgba(28, 24, 20, .78) 0%, rgba(28, 24, 20, .48) 36%, rgba(28, 24, 20, .05) 64%), linear-gradient(0deg, rgba(28, 24, 20, .35) 0%, rgba(28, 24, 20, 0) 35%); } .scrolly__bild--herren img { object-position: 62% 58%; } .scrolly__bild--kinder img { object-position: 58% 55%; } .scrolly__buehne[data-szene="1"] .scrolly__bild--familie, .scrolly__buehne[data-szene="2"] .scrolly__bild--damen, .scrolly__buehne[data-szene="3"] .scrolly__bild--herren, .scrolly__buehne[data-szene="4"] .scrolly__bild--kinder { opacity: 1; } .scrolly__text { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: 3.5rem 1.25rem 2.4rem; padding-left: max(1.25rem, calc((100vw - 80rem) / 2)); color: #fff; opacity: 0; transform: translateY(22px); transition: opacity .55s ease .15s, transform .55s ease .15s; pointer-events: none; } .scrolly__text--rechts { align-items: flex-end; padding-left: 1.25rem; padding-right: max(1.25rem, calc((100vw - 80rem) / 2)); } .scrolly__text--rechts > * { width: min(100%, 34rem); } .scrolly__buehne[data-szene="1"] .scrolly__text--1, .scrolly__buehne[data-szene="2"] .scrolly__text--2, .scrolly__buehne[data-szene="3"] .scrolly__text--3, .scrolly__buehne[data-szene="4"] .scrolly__text--4 { opacity: 1; transform: none; pointer-events: auto; } .scrolly__hand { font-family: var(--schrift); font-weight: 700; line-height: 1.4; font-size: clamp(.78rem, 1vw, .92rem); text-transform: uppercase; letter-spacing: .16em; color: var(--creme); display: block; margin-bottom: .7em; } .scrolly__titel { font-family: var(--kopf); font-weight: 700; color: #fff; font-size: clamp(2.2rem, 4.8vw, 4rem); line-height: 1.05; margin: 0 0 .35em; max-width: 12em; } .scrolly__text h1.scrolly__titel { margin: 0 0 .35em; } .scrolly__sub { font-size: clamp(1.08rem, 1.55vw, 1.35rem); line-height: 1.55; color: rgba(255, 255, 255, .93); max-width: 34rem; margin: 0 0 1.5rem; } .scrolly__text .knopfzeile { margin: 0; } .scrolly__zeiten { position: absolute; z-index: 2; top: clamp(1rem, 2.5vw, 2.5rem); right: max(1.25rem, calc((100vw - 80rem) / 2)); opacity: 0; transition: opacity .55s ease; pointer-events: none; } .scrolly__buehne[data-szene="1"] .scrolly__zeiten { opacity: 1; pointer-events: auto; } .scrolly__punkte { position: absolute; z-index: 3; right: clamp(.7rem, 1.4vw, 1.4rem); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: .55rem; } .scrolly__punkte span { width: .55rem; height: .55rem; border-radius: 50%; background: rgba(255, 255, 255, .45); box-shadow: 0 0 0 1px rgba(28, 24, 20, .25); transition: background .3s ease, transform .3s ease; } .scrolly__buehne[data-szene="1"] .scrolly__punkte span:nth-child(1), .scrolly__buehne[data-szene="2"] .scrolly__punkte span:nth-child(2), .scrolly__buehne[data-szene="3"] .scrolly__punkte span:nth-child(3), .scrolly__buehne[data-szene="4"] .scrolly__punkte span:nth-child(4) { background: #fff; transform: scale(1.35); } @media (max-width: 1100px) { .scrolly__zeiten { display: none; } .scrolly__text, .scrolly__text--rechts { justify-content: flex-end; align-items: stretch; text-align: left; } .scrolly__text--rechts > * { width: auto; } .scrolly__bild::after, .scrolly__bild--damen::after { content: ""; background: linear-gradient(0deg, rgba(28, 24, 20, .85) 0%, rgba(28, 24, 20, .55) 38%, rgba(28, 24, 20, .08) 68%); } .scrolly__bild--familie img { object-position: 74% 50%; } } /* Ohne JS: nur Szene 1 als ruhiger Vollbild-Hero, kein Leerlauf */ html:not(.js) .scrolly__lauf { height: auto; } html:not(.js) .scrolly__buehne { position: static; } html:not(.js) .scrolly__punkte { display: none; } @media (prefers-reduced-motion: reduce) { .scrolly__bild, .scrolly__text, .scrolly__zeiten, .scrolly__punkte span { transition: none; } .scrolly__text { transform: none; } } /* ── Zahlenband ─────────────────────────────────────────── */ .zahlenband { --dunkel: #2b2723; } .zahlenband .innen { display: grid; gap: 1.8rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); text-align: center; } .zahl { margin: 0; } .zahl__wert { font-family: var(--kopf); font-weight: 700; display: block; font-size: clamp(1.8rem, 3.6vw, 3rem); color: #fff; white-space: nowrap; } .zahl__text { color: #cfc8bd; font-size: .95rem; } /* ── Kacheln (Sortiment) ────────────────────────────────── */ .kacheln { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .kachel { background: var(--creme); border-radius: 0; overflow: hidden; display: flex; flex-direction: column; transition: transform .18s ease; } .kachel:hover { transform: translateY(-4px); } .kachel__bild { aspect-ratio: 5 / 4; overflow: hidden; background: var(--creme); } .kachel__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; } .kachel__text { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; } .kachel__text h3 { margin: 0; } .kachel__text p { margin: 0; color: var(--tinte-60); font-size: .97rem; flex: 1; } .kachel__links { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .8rem; font-size: .97rem; } .kachel__haupt { font-weight: 700; text-decoration: none; } .kachel__haupt::after { content: " →"; } .kachel h3 a { color: inherit; text-decoration: none; } .kachel h3 a:hover { color: var(--rot); } /* ── Service ────────────────────────────────────────────── */ .servicekarten { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); } .servicekarte { background: #fff; border-radius: 0; padding: 1.5rem 1.55rem; border: 1px solid var(--creme-tief); display: flex; flex-direction: column; gap: .55rem; } .servicekarte h3, .servicekarte h4 { margin: 0; font-size: 1.06rem; font-family: var(--schrift); font-weight: 700; } .servicekarte p { margin: 0; color: var(--tinte-60); font-size: .95rem; } .service-icon { width: 54px; height: 54px; border-radius: 14px; background: var(--creme); color: var(--rot); display: grid; place-items: center; margin-bottom: .3rem; } .service-icon svg { width: 34px; height: 34px; } .servicekarte--held { grid-column: 1 / -1; background: var(--tinte); color: #f3efe8; border: 0; display: grid; grid-template-columns: auto 1fr; gap: 1.2rem 1.6rem; align-items: center; padding: 1.8rem 1.9rem; } .servicekarte--held h3 { color: #fff; font-size: 1.35rem; font-family: var(--kopf); } .servicekarte--held p { color: #d8d2c8; font-size: 1.02rem; } .servicekarte--held .service-icon { width: 84px; height: 84px; background: rgba(255, 255, 255, .12); color: #fff; } .servicekarte--held .service-icon svg { width: 56px; height: 56px; } @media (max-width: 640px) { .servicekarte--held { grid-template-columns: 1fr; } } /* ── Bänder, Raster, Karten ─────────────────────────────── */ .sektion--anschluss { padding-top: 1rem; } .bildband { line-height: 0; } .bildband img { width: 100%; max-height: 340px; object-fit: cover; } .bildband--schmal img { max-height: 190px; } .kacheln--drei { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } .kachel__titel { font-size: clamp(1.18rem, 2vw, 1.4rem); margin: 0; } .kachel__bild--muster img { object-fit: cover; } .h3-stil { font-size: 1.35rem; margin: 0 0 .3em; } .servicegruppe { margin-top: clamp(2.2rem, 5vw, 3.2rem); } .servicegruppe__titel { margin-bottom: .15em; } .servicegruppe__intro { color: var(--tinte-60); margin-bottom: 1.2rem; } .kontaktraster { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } @media (max-width: 900px) { .kontaktraster { grid-template-columns: 1fr; } } .kontaktraster__info { display: grid; gap: 1.4rem; } .infokarte { background: #fff; border-radius: 0; padding: 1.6rem 1.7rem; border: 1px solid var(--creme-tief); } .infokarte h2 { font-size: 1.15rem; margin-bottom: .6em; } .infokarte :last-child { margin-bottom: 0; } .aktuellesraster { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; } @media (max-width: 900px) { .aktuellesraster { grid-template-columns: 1fr; } } .aktuellesraster__seite { display: grid; gap: 1.4rem; } .aktuellesraster__seite .oz { max-width: none; } .news--sonder { background: #fdf6e3; border-color: #f0e2bb; margin-bottom: 1.2rem; } .news--sonder h2 { font-size: 1.1rem; margin-bottom: .5em; } .news__titel { font-size: clamp(1.18rem, 2vw, 1.4rem); margin-bottom: .3em; } .teamfoto { margin: 0; } .teamfoto__bild { border-radius: 0; } .teamfoto__zeile { text-align: center; padding-top: .7rem; font-size: 1.45rem; color: var(--tinte-60); } .hinweis-klein { font-size: .9rem; color: var(--tinte-60); } .op-tief { object-position: 50% 88% !important; } .op-unten { object-position: 50% 72% !important; } .op-links { object-position: 30% 85% !important; } .op-oben { object-position: 50% 30% !important; } /* Freigestellte Produktfotos in Bildflächen: einpassen statt beschneiden */ img.freigestellt { object-fit: contain !important; background: #fff; padding: 7%; } .produkt__bild img { mix-blend-mode: multiply; } /* Text-Kacheln mit großer Ziffer (z. B. Accessoires) */ .kachel--text { background: var(--creme); border: 0; box-shadow: none; } .kachel--text .kachel__text { padding: 2rem 1.8rem 2.2rem; } .kachel__nummer { font-family: var(--kopf); font-weight: 700; font-size: clamp(2.6rem, 5vw, 3.6rem); color: var(--creme-tief); line-height: 1; display: block; margin-bottom: .35rem; } .kachel--text:hover .kachel__nummer { color: var(--rot); transition: color .25s ease; } .einleitung--mitte { margin-inline: auto; } .knopfzeile--mitte { justify-content: center; } /* ── Apple-Grid (Startseite): seitenfüllendes 2er-Raster ── */ .apfelgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px; background: #fff; } .apfelkachel { background: var(--creme); display: flex; flex-direction: column; height: clamp(26rem, 44vw, 37rem); overflow: hidden; text-align: center; } .apfelkachel--dunkel { background: #2b2723; color: #f3efe8; } .apfelkachel--dunkel h3 { color: #fff; } .apfelkachel--dunkel .apfelkachel__sub { color: #cfc8bd; } .apfelkachel__text { padding: clamp(2rem, 4vw, 3.2rem) 1.5rem 0; } .apfelkachel__text h3 { font-size: clamp(1.7rem, 2.9vw, 2.5rem); margin-bottom: .2em; } .apfelkachel__sub { color: var(--tinte-60); font-size: clamp(1rem, 1.4vw, 1.2rem); margin: 0 0 .7em; } .apfelkachel__links { display: flex; gap: 1.6rem; justify-content: center; margin: 0; font-weight: 650; } .apfelkachel__links a { text-decoration: none; } .apfelkachel__links a::after { content: " ›"; } .apfelkachel__links a:hover { text-decoration: underline; } .apfelkachel__bild { flex: 1; min-height: 0; margin-top: clamp(1.2rem, 2.5vw, 2rem); } .apfelkachel__bild img { width: 100%; height: 100%; object-fit: cover; } .apfelkachel__bild--frei { display: grid; place-items: center; padding: 0 2rem 2rem; } .apfelkachel__bild--frei img { width: min(70%, 24rem); height: auto; object-fit: contain; } @media (max-width: 820px) { .apfelgrid { grid-template-columns: 1fr; gap: 10px; padding: 10px; } .apfelkachel { height: clamp(22rem, 96vw, 30rem); } } /* Schmale Variante (Übersichtsseite): 2/3 der Seitenbreite, zentriert */ .apfelgrid--schmal { width: min(66.67vw, 88rem); margin-inline: auto; padding-inline: 0; } .apfelgrid--schmal .apfelkachel { height: clamp(22rem, 30vw, 27rem); } @media (max-width: 1100px) { .apfelgrid--schmal { width: 100%; padding-inline: 10px; } .apfelgrid--schmal .apfelkachel { height: clamp(22rem, 44vw, 30rem); } } /* Bildzentrierung einzelner Kachelmotive */ .op-kind { object-position: 58% 68% !important; } /* ── Vollbreite Split-Bänder (Text links, Bild/Wolke rechts) ── */ .breitband { display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); min-height: clamp(22rem, 38vw, 30rem); } .breitband__text { align-self: center; padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 3rem); padding-left: max(1.25rem, calc((100vw - 80rem) / 2)); max-width: none; } .breitband__text p { max-width: 65ch; font-size: clamp(1.05rem, 1.4vw, 1.25rem); } .breitband__text h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); } .breitband__bild { position: relative; min-height: 16rem; } .breitband__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .breitband--dunkel { background: #2b2723; color: #f3efe8; } .breitband--dunkel h2 { color: #fff; } .breitband--dunkel p { color: #d8d2c8; } .breitband--dunkel .vorzeile { color: var(--gruen); } /* Marken-Wortwolke */ .breitband__wolke { background: var(--creme); display: flex; align-items: center; justify-content: center; padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 4rem); } .wortwolke { display: flex; flex-wrap: wrap; gap: .3em .75em; justify-content: center; align-items: baseline; max-width: 36rem; margin: 0; line-height: 1.2; text-align: center; } .wortwolke .w1 { font-size: clamp(.95rem, 1.3vw, 1.2rem); font-weight: 600; color: var(--tinte-60); } .wortwolke .w2 { font-size: clamp(1.25rem, 1.9vw, 1.7rem); font-weight: 650; color: var(--tinte); } .wortwolke .w3 { font-family: var(--kopf); font-size: clamp(1.7rem, 2.7vw, 2.4rem); font-weight: 700; color: var(--tinte); } .wortwolke .w4 { font-family: var(--kopf); font-size: clamp(2.2rem, 3.6vw, 3.2rem); font-weight: 700; color: var(--tinte); } .wortwolke .wolke-rot { color: var(--rot); } .wortwolke .wolke-gruen { color: var(--gruen-text); } .wortwolke .dreh-l { display: inline-block; transform: rotate(-3deg); } .wortwolke .dreh-r { display: inline-block; transform: rotate(2.5deg); } @media (max-width: 820px) { .breitband { grid-template-columns: 1fr; } .breitband__text { max-width: none; padding: 2.2rem 1.25rem 1.6rem; } .breitband__bild { min-height: 15rem; } .breitband__bild img { position: absolute; } } /* ── Marken-Segment (global, direkt über dem Footer) ────── */ .markenband { background: var(--creme); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(1.5rem, 3vw, 3rem); min-height: clamp(10rem, 19vw, 15rem); padding-block: clamp(1.8rem, 3.2vw, 2.8rem); } .markenband__text { padding-left: max(1.25rem, calc((100vw - 72rem) / 2)); padding-right: 1rem; } .markenband__text h2 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); margin-bottom: .25em; } .markenband__text p { margin: 0; color: var(--tinte-60); max-width: 34ch; } .markenband__wolke { padding-right: max(1.25rem, calc((100vw - 72rem) / 2)); padding-left: 1rem; } .markenband .wortwolke { max-width: none; gap: .2em .65em; } .markenband .wortwolke .w1 { font-size: clamp(.82rem, 1vw, .98rem); } .markenband .wortwolke .w2 { font-size: clamp(1rem, 1.4vw, 1.3rem); } .markenband .wortwolke .w3 { font-size: clamp(1.3rem, 1.9vw, 1.75rem); } .markenband .wortwolke .w4 { font-size: clamp(1.6rem, 2.5vw, 2.3rem); } @media (max-width: 820px) { .markenband { grid-template-columns: 1fr; gap: 1.2rem; } .markenband__text { padding-right: 1.25rem; } .markenband__wolke { padding: 0 1.25rem; } .markenband .wortwolke { justify-content: flex-start; text-align: left; } } /* ── Schaufenster (Produkt-Highlights aus dem Shop) ─────── */ .sektionskopf--gross h2 { font-size: clamp(2.3rem, 5.4vw, 3.9rem); letter-spacing: -.02em; } .produkte { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } .produkt { background: var(--creme); border: 0; border-radius: 0; padding: 1.4rem 1.45rem 1.55rem; text-decoration: none; color: var(--tinte); display: flex; flex-direction: column; gap: .1rem; transition: transform .18s ease, box-shadow .18s ease; } .produkt:hover { transform: translateY(-4px); color: var(--tinte); } .produkt__bild { aspect-ratio: 1; display: grid; place-items: center; margin-bottom: .6rem; } .produkt__bild img { max-width: 100%; height: auto; } .produkt__marke { font-weight: 700; font-size: 1.08rem; } .produkt__modell { color: var(--tinte-60); font-size: .92rem; flex: 1; } .produkt__cta { margin-top: .75rem; color: var(--rot); font-weight: 650; font-size: .95rem; } .produkt__cta::after { content: " →"; transition: margin-left .18s ease; } .produkt:hover .produkt__cta::after { margin-left: .25em; } .schaufenster__hinweis { margin-top: 1.4rem; text-align: center; } /* ── Muster-Band (grünes Schuh-Muster) ──────────────────── */ .musterband { line-height: 0; } .musterband img { width: 100%; height: clamp(70px, 10vw, 130px); object-fit: cover; } /* ── Zweispalter ────────────────────────────────────────── */ .duo { display: grid; gap: clamp(2.2rem, 5vw, 4.5rem); grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); align-items: center; } .duo__bild img { border-radius: 0; width: 100%; } .duo__bild--portraet { max-width: 27rem; justify-self: center; } .duo__bild--portraet img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; } .duo--tausch .duo__bild { order: 2; } @media (max-width: 700px) { .duo--tausch .duo__bild { order: 0; } } /* ── Aktuelles ──────────────────────────────────────────── */ .newsliste { display: grid; gap: 1.2rem; } .news { background: #fff; border-radius: 0; padding: 1.5rem 1.6rem; border: 1px solid var(--creme-tief); } .news__datum { color: var(--tinte-60); font-size: .875rem; display: block; margin-bottom: .3rem; } .news h3 { margin-bottom: .3em; } .news p:last-child { margin-bottom: 0; } /* ── Team ───────────────────────────────────────────────── */ .teamgitter { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); } .teamkarte { text-align: center; } .teamkarte figure { margin: 0; } .teamkarte img { border-radius: 0; aspect-ratio: 4 / 5; object-fit: cover; width: 100%; background: var(--creme); } .teamkarte figcaption { padding-top: .7rem; } .teamkarte .name { font-weight: 700; display: block; } .teamkarte .rolle { color: var(--tinte-60); font-size: .9rem; } /* ── Marken ─────────────────────────────────────────────── */ .markengruppe { margin-bottom: 2.4rem; } .markengruppe h2, .markengruppe h3 { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; } .markengruppe .anzahl { font-size: .9rem; color: var(--tinte-60); font-family: var(--schrift); font-weight: 500; letter-spacing: 0; } .markenliste { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem .9rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); } .markenliste li { background: #fff; border: 1px solid var(--creme-tief); border-radius: 0; padding: .55rem .9rem; font-weight: 600; font-size: .97rem; } .markenliste--klein li { background: #fff; border: 0; } /* ── Historie / Zeitleiste ──────────────────────────────── */ .zeitleiste { list-style: none; margin: 0; padding: 0; position: relative; } .zeitleiste::before { content: ""; position: absolute; left: 1.05rem; top: .4rem; bottom: .4rem; width: 2px; background: var(--creme-tief); } .epoche { position: relative; padding: 0 0 2.2rem 3.2rem; } .epoche:last-child { padding-bottom: 0; } .epoche::before { content: ""; position: absolute; left: .55rem; top: .35rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--gruen); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--gruen); } .epoche--rot::before { background: var(--rot); box-shadow: 0 0 0 2px var(--rot); } .epoche__jahr { font-family: var(--kopf); font-weight: 700; color: var(--rot); font-size: 1.5rem; display: block; margin-bottom: .15rem; } .epoche h3 { margin-bottom: .25em; } .epoche p { max-width: 58ch; } /* ── Kontakt & Formular ─────────────────────────────────── */ .karte-rahmen { border-radius: 0; overflow: hidden; box-shadow: 0 10px 30px rgba(43, 39, 35, .1); } .karte-rahmen img { width: 100%; } .karte-quelle { font-size: .8rem; color: var(--tinte-60); margin-top: .5rem; } .formular { display: grid; gap: 1.1rem; max-width: 40rem; } .feld { display: grid; gap: .35rem; } .feld label { font-weight: 650; } .feld input, .feld textarea { font: inherit; color: inherit; padding: .75rem .9rem; border-radius: 10px; border: 1.5px solid #d9d2c7; background: #fff; width: 100%; } .feld input:focus-visible, .feld textarea:focus-visible { outline: 2px solid var(--rot); outline-offset: 1px; border-color: var(--rot); } .feld textarea { min-height: 9.5rem; resize: vertical; } .feld .hinweis { font-size: .85rem; color: var(--tinte-60); } .pflicht { color: var(--rot); } /* Honeypot: für Menschen unsichtbar, für Bots ein normales Feld */ .feld--website { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .formular-meldung { border-radius: 12px; padding: 1rem 1.2rem; border: 1.5px solid; } .formular-meldung--ok { background: #f0f8ee; border-color: var(--gruen); color: #24541f; } .formular-meldung--fehler { background: #fdf1f0; border-color: var(--rot); color: #7c1a17; } .formular-meldung ul { margin: .4rem 0 0; } /* ── Fußbereich ─────────────────────────────────────────── */ .fuss { background: #2b2723; color: #d8d2c8; margin-top: 0; } .fuss a { color: #fff; } .fuss a:hover { color: #f7b0ab; } .fuss__innen { width: min(100% - 2.5rem, 72rem); margin-inline: auto; display: grid; gap: 2.2rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); padding-block: clamp(2.5rem, 5vw, 3.8rem) 2rem; } .fuss h2 { font-size: 1rem; color: #fff; font-family: var(--schrift); font-weight: 700; margin-bottom: .7em; } .fuss__marke img { width: 120px; } .fuss__claim { font-size: 1.02rem; line-height: 1.5; color: #fff; margin: .8rem 0 .4rem; } .fuss__nav { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; } .fuss__nav a { text-decoration: none; } .fuss__nav a:hover { text-decoration: underline; } .fuss__shoptitel { margin-top: 1.3em; } .fuss__hinweis { font-size: .9rem; color: #b9b1a4; } .fuss .oz--kompakt { color: #d8d2c8; } .fuss .oz--kompakt .oz__titel { color: #fff; } .fuss .oz--kompakt .oz__tabelle th { color: #b9b1a4; } .fuss .oz--kompakt .oz__tabelle td { color: #fff; } .fuss__leiste { border-top: 1px solid rgba(255, 255, 255, .12); display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; width: min(100% - 2.5rem, 72rem); margin-inline: auto; padding-block: 1.1rem; font-size: .875rem; } .fuss__leiste p { margin: 0; } /* ── Utilities ──────────────────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .hand { font-family: var(--schrift); font-weight: 700; line-height: 1.4; text-transform: uppercase; letter-spacing: .16em; font-size: clamp(.78rem, 1vw, .92rem); display: inline-block; } .gruen { color: var(--gruen-text); } .mitte { text-align: center; } .abstand-oben { margin-top: 2rem; } .haken-liste { list-style: none; padding: 0; } .haken-liste li { padding-left: 1.6em; position: relative; margin-bottom: .45em; } .haken-liste li::before { content: "✓"; position: absolute; left: 0; color: var(--gruen-text); font-weight: 700; } /* ── 404 ────────────────────────────────────────────────── */ .fehlerseite { text-align: center; padding-block: clamp(4rem, 10vw, 7rem); } .fehlerseite .gross { font-family: var(--kopf); font-size: clamp(4rem, 12vw, 7rem); font-weight: 700; color: var(--creme-tief); line-height: 1; margin: 0; } /* ── Seiten-Held (großer emotionaler Einstieg einer Unterseite) ── */ .seitenheld { position: relative; background: var(--tinte); } .seitenheld__bild img { width: 100%; height: clamp(30rem, 54vw, 46rem); object-fit: cover; object-position: 62% 58%; display: block; } .seitenheld__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28, 24, 20, .8) 0%, rgba(28, 24, 20, .5) 36%, rgba(28, 24, 20, .06) 64%), linear-gradient(0deg, rgba(28, 24, 20, .4) 0%, rgba(28, 24, 20, 0) 36%); } .seitenheld__innen { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: 3.6rem 1.25rem 2.4rem; padding-left: max(1.25rem, calc((100vw - 80rem) / 2)); color: #fff; } .seitenheld .brotkrumen { position: absolute; z-index: 2; top: 1rem; left: max(1.25rem, calc((100vw - 80rem) / 2)); padding: 0; color: rgba(255, 255, 255, .78); } .seitenheld .brotkrumen a, .seitenheld .brotkrumen li + li::before { color: rgba(255, 255, 255, .78); } .seitenheld .brotkrumen a:hover { color: #fff; } .seitenheld__hand { font-family: var(--schrift); font-weight: 700; line-height: 1.4; font-size: clamp(.78rem, 1vw, .92rem); text-transform: uppercase; letter-spacing: .16em; color: var(--creme); display: block; margin-bottom: .7em; } .seitenheld h1 { color: #fff; font-size: clamp(2.2rem, 5vw, 4.1rem); line-height: 1.04; margin: 0 0 .35em; max-width: 11em; } .seitenheld__sub { font-size: clamp(1.08rem, 1.55vw, 1.35rem); line-height: 1.55; color: rgba(255, 255, 255, .93); max-width: 37rem; margin: 0 0 1.5rem; } .seitenheld .knopfzeile { margin: 0; } /* Variante: Text rechts (wenn die ruhige Bildfläche rechts liegt) */ .seitenheld--rechts .seitenheld__scrim { background: linear-gradient(270deg, rgba(28, 24, 20, .8) 0%, rgba(28, 24, 20, .5) 36%, rgba(28, 24, 20, .06) 64%), linear-gradient(0deg, rgba(28, 24, 20, .4) 0%, rgba(28, 24, 20, 0) 36%); } .seitenheld--rechts .seitenheld__innen { align-items: flex-end; padding-left: 1.25rem; padding-right: max(1.25rem, calc((100vw - 80rem) / 2)); } .seitenheld--rechts .seitenheld__innen > * { width: min(100%, 37rem); } .seitenheld--rechts h1 { max-width: none; } @media (max-width: 820px) { .seitenheld__bild img { height: clamp(32rem, 138vw, 40rem); object-position: 58% 62%; } .seitenheld__scrim, .seitenheld--rechts .seitenheld__scrim { background: linear-gradient(0deg, rgba(28, 24, 20, .85) 0%, rgba(28, 24, 20, .55) 38%, rgba(28, 24, 20, .1) 68%); } .seitenheld__innen { justify-content: flex-end; } .seitenheld--rechts .seitenheld__innen { align-items: stretch; } .seitenheld--rechts .seitenheld__innen > * { width: auto; } } /* ── Seitenkopf (Unterseiten) ───────────────────────────── */ .seitenkopf { background: var(--creme); position: relative; overflow: hidden; } .seitenkopf__innen { width: min(100% - 2.5rem, 72rem); margin-inline: auto; display: grid; gap: clamp(1.6rem, 4vw, 3.5rem); align-items: center; padding-block: clamp(2.6rem, 6vw, 5rem); position: relative; z-index: 1; } .seitenkopf--bild .seitenkopf__innen { grid-template-columns: minmax(0, 11fr) minmax(0, 8fr); } .seitenkopf__text .brotkrumen { padding: 0 0 1.1rem; } .seitenkopf h1 { margin-bottom: .3em; } .seitenkopf .einleitung { margin-bottom: 0; } .seitenkopf__bild { min-width: 0; } .seitenkopf__swoosh { position: absolute; right: -5rem; top: 50%; width: 26rem; height: 26rem; transform: translateY(-50%) rotate(8deg); background: url('/assets/img/favicon.svg') no-repeat center / contain; opacity: .06; pointer-events: none; } .seitenkopf--schlicht .seitenkopf__innen { padding-block: clamp(1.8rem, 4vw, 2.6rem); } .seitenkopf--schlicht .seitenkopf__swoosh { width: 18rem; height: 18rem; } @media (max-width: 900px) { .seitenkopf--bild .seitenkopf__innen { grid-template-columns: 1fr; } .seitenkopf__bild { max-width: 30rem; } } /* Bild mit versetztem Rahmen (wiederkehrendes Gestaltungselement) */ .bildrahmen { position: relative; border-radius: 0; overflow: hidden; box-shadow: 0 18px 44px rgba(43, 39, 35, .16); } .bildrahmen::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(43, 39, 35, .08); border-radius: 0; pointer-events: none; } .bildrahmen img { width: 100%; display: block; } .bildrahmen--versetzt { margin: 1rem 0 0 1rem; } .bildrahmen--versetzt::before { content: ""; position: absolute; inset: -1rem auto auto -1rem; width: 100%; height: 100%; border: 2px solid var(--creme-tief); border-radius: 0; z-index: -1; } /* ── Auswahl-Service: „So einfach geht's" (1-2-3) ────────── */ .schritte { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); counter-reset: schritt; position: relative; } .schritt { background: #fff; border-radius: 0; padding: 2.6rem 1.6rem 1.6rem; position: relative; border: 1px solid var(--creme-tief); } .schritt::before { counter-increment: schritt; content: counter(schritt); position: absolute; top: -1.35rem; left: 1.4rem; width: 2.7rem; height: 2.7rem; display: grid; place-items: center; background: var(--rot); color: #fff; font-family: var(--kopf); font-weight: 700; font-size: 1.35rem; border-radius: 50%; box-shadow: 0 8px 18px rgba(201, 42, 38, .35); } .schritt h3 { margin-bottom: .35em; font-size: 1.12rem; } .schritt p { margin: 0; color: var(--tinte-60); font-size: .97rem; } .schritt--fazit { background: var(--tinte); border: 0; color: #f3efe8; display: flex; flex-direction: column; justify-content: center; padding-top: 1.6rem; } .schritt--fazit::before { content: "✓"; background: var(--gruen); box-shadow: 0 8px 18px rgba(79, 175, 69, .4); } .schritt--fazit .hand { color: var(--gruen); } .schritt--fazit p { color: #d8d2c8; } /* ── Handwerk-Streifen (dunkel, kompakt) ────────────────── */ .handwerk { background: #2b2723; color: #f3efe8; } .handwerk__innen { width: min(100% - 2.5rem, 72rem); margin-inline: auto; padding-block: clamp(2rem, 4.5vw, 3rem); display: grid; gap: 1.6rem; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; } .handwerk h2 { color: #fff; margin-bottom: .2em; } .handwerk__intro { color: #cfc8bd; margin: 0; } .handwerk__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); } .handwerk__liste li { display: flex; align-items: center; gap: .7rem; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; padding: .75rem .9rem; font-weight: 600; font-size: .95rem; } .handwerk__liste svg { width: 26px; height: 26px; flex: 0 0 auto; color: var(--gruen); } .handwerk a { color: #f7b0ab; } @media (max-width: 820px) { .handwerk__innen { grid-template-columns: 1fr; } } /* ── Volles Bildband mit Parallax + Claim ───────────────── */ .parallaxband { position: relative; overflow: hidden; min-height: clamp(20rem, 44vw, 30rem); display: grid; align-items: center; } .parallaxband__bild { position: absolute; inset: 0; z-index: 0; } .parallaxband__bild img { width: 100%; height: 130%; object-fit: cover; object-position: 50% 40%; position: absolute; top: -15%; } .parallaxband__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(247, 243, 236, .92) 0%, rgba(247, 243, 236, .72) 42%, rgba(247, 243, 236, .1) 100%); } .parallaxband__innen { position: relative; z-index: 2; width: min(100% - 2.5rem, 72rem); margin-inline: auto; padding-block: clamp(2.5rem, 6vw, 4rem); } .parallaxband .hand { color: #fff; opacity: .85; display: block; margin-bottom: .6em; } .parallaxband h2 { margin-bottom: .4em; } .parallaxband p { max-width: 30em; } /* ── Versetzte Kacheln (Startseite) ─────────────────────── */ @media (min-width: 901px) { .kacheln--versetzt .kachel:nth-child(even) { transform: translateY(1.6rem); } .kacheln--versetzt .kachel:nth-child(even):hover { transform: translateY(calc(1.6rem - 4px)); } .kacheln--versetzt { padding-bottom: 1.6rem; } } /* ── Parallax (Scroll-getrieben, rein CSS, mit Fallback) ── */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .parallax { overflow: hidden; } .parallax > img, .parallaxband__bild img { animation: gleiten linear both; animation-timeline: view(); } .parallax > img { height: 112%; width: 100%; object-fit: cover; } @keyframes gleiten { from { transform: translateY(-5.5%); } to { transform: translateY(5.5%); } } /* Familienband: nur nach oben gleiten, damit die Schuhe unten nie beschnitten werden */ .held__band > img { animation-name: gleiten-sanft; } @keyframes gleiten-sanft { from { transform: translateY(-9%); } to { transform: translateY(0); } } .seitenkopf__swoosh, .held::before { animation: schweben linear both; animation-timeline: scroll(); animation-range: 0 120vh; } @keyframes schweben { from { translate: 0 0; } to { translate: 0 -3rem; } } } } /* ── Motion ─────────────────────────────────────────────── */ @media (prefers-reduced-motion: no-preference) { html.js .anblick { opacity: 0; transform: translateY(10px); } html.js .anblick.ist-sichtbar { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; } /* Apfel-Kacheln: etwas mehr Hub und sanft versetzt */ html.js .apfelkachel.anblick { opacity: 0; transform: translateY(26px) scale(.985); } html.js .apfelkachel.anblick.ist-sichtbar { opacity: 1; transform: none; transition: opacity .65s ease, transform .65s ease; } html.js .apfelgrid .apfelkachel.ist-sichtbar:nth-child(2n) { transition-delay: .12s; } html.js .apfelgrid .apfelkachel.ist-sichtbar:nth-child(3) { transition-delay: .06s; } html.js .apfelgrid .apfelkachel.ist-sichtbar:nth-child(4) { transition-delay: .18s; } html.js .apfelgrid .apfelkachel.ist-sichtbar:nth-child(5) { transition-delay: .06s; } html.js .apfelgrid .apfelkachel.ist-sichtbar:nth-child(6) { transition-delay: .18s; } /* Wortwolke: Marken erscheinen versetzt nacheinander */ html.js .wortwolke span { opacity: 0; transform: translateY(9px); } html.js .ist-sichtbar .wortwolke span { opacity: 1; transform: none; transition: opacity .45s ease, transform .45s ease; } html.js .ist-sichtbar .wortwolke span:nth-child(1) { transition-delay: .05s; } html.js .ist-sichtbar .wortwolke span:nth-child(2) { transition-delay: .10s; } html.js .ist-sichtbar .wortwolke span:nth-child(3) { transition-delay: .15s; } html.js .ist-sichtbar .wortwolke span:nth-child(4) { transition-delay: .20s; } html.js .ist-sichtbar .wortwolke span:nth-child(5) { transition-delay: .25s; } html.js .ist-sichtbar .wortwolke span:nth-child(6) { transition-delay: .30s; } html.js .ist-sichtbar .wortwolke span:nth-child(7) { transition-delay: .35s; } html.js .ist-sichtbar .wortwolke span:nth-child(8) { transition-delay: .40s; } html.js .ist-sichtbar .wortwolke span:nth-child(9) { transition-delay: .45s; } html.js .ist-sichtbar .wortwolke span:nth-child(10) { transition-delay: .50s; } html.js .ist-sichtbar .wortwolke span:nth-child(11) { transition-delay: .55s; } html.js .ist-sichtbar .wortwolke span:nth-child(12) { transition-delay: .60s; } html.js .ist-sichtbar .wortwolke span:nth-child(13) { transition-delay: .65s; } html.js .ist-sichtbar .wortwolke span:nth-child(14) { transition-delay: .70s; } html.js .ist-sichtbar .wortwolke span:nth-child(15) { transition-delay: .75s; } html.js .ist-sichtbar .wortwolke span:nth-child(16) { transition-delay: .80s; } html.js .ist-sichtbar .wortwolke span:nth-child(17) { transition-delay: .85s; } html.js .ist-sichtbar .wortwolke span:nth-child(18) { transition-delay: .90s; } html.js .ist-sichtbar .wortwolke span:nth-child(19) { transition-delay: .95s; } html.js .ist-sichtbar .wortwolke span:nth-child(20) { transition-delay: 1s; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } } /* ── Druck ──────────────────────────────────────────────── */ @media print { .topbar, .nav, .fuss__nav, .skip-link, .knopfzeile { display: none !important; } .held__scrim { display: none; } body { color: #000; } a { color: #000; text-decoration: none; } }