/* ============================================================= 10 – BRAUEREIFÜHRUNGEN Großzügige, helle Sektion: viel Weißraum, große Schrift, Brauerei-Fotos im Kerb-Rahmen (.frame-notch aus 05-braukunst). ============================================================= */ /* ---- Reihen: Bild + Fakten, abwechselnd gespiegelt ---- */ .fuehrungen__row { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; margin-top: clamp(4rem, 8vw, 6.5rem); } .fuehrungen__row--flip .fuehrungen__img { order: 2; /* Bild rechts */ transform: rotate(2.5deg); /* leicht gedreht */ } /* ---- Bilder-Stapel (Reihe 1): zwei kleinere Fotos, gedreht + überlappend, wie die Collage in der Auszeichnungen-Sektion. Hover: aufrichten, nach vorn. ---- */ .fuehrungen__stack { display: grid; place-items: center; padding-block: clamp(1.5rem, 3vw, 2.5rem); /* Luft für die Drehung/Versätze */ } .fuehrungen__stack .fuehrungen__img { grid-area: 1 / 1; /* beide im selben Feld → Überlappung */ width: min(72%, 440px); cursor: pointer; transition: transform 0.5s var(--ease); } .fuehrungen__stack-a { transform: rotate(-5deg) translate(-11%, -9%); z-index: 1; } .fuehrungen__stack-b { transform: rotate(3deg) translate(11%, 10%); z-index: 2; } .fuehrungen__stack .fuehrungen__img:hover { transform: rotate(0deg) scale(1.04); z-index: 3; } /* ---- Foto-Rahmen mit invertierten Ecken (Technik wie Hero-Kacheln) ---- Außen: Maske kerbt Viertelkreise aus den Ecken, gelbe Kontur folgt der Silhouette per Drop-Shadows. Innen: feine Passepartout-Linie. */ .fuehrungen__img { --notch: 26px; /* Radius der nach innen gekehrten Ecken */ --ow: 2px; /* Stärke der gelben Außenkontur */ position: relative; margin: 0; filter: drop-shadow(var(--ow) 0 0 var(--c-yellow)) drop-shadow(calc(-1 * var(--ow)) 0 0 var(--c-yellow)) drop-shadow(0 var(--ow) 0 var(--c-yellow)) drop-shadow(0 calc(-1 * var(--ow)) 0 var(--c-yellow)) drop-shadow(0 22px 34px rgba(22, 35, 58, 0.22)); } .fuehrungen__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; -webkit-mask: radial-gradient(circle at left top, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) left top / 51% 51% no-repeat, radial-gradient(circle at right top, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) right top / 51% 51% no-repeat, radial-gradient(circle at left bottom, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) left bottom / 51% 51% no-repeat, radial-gradient(circle at right bottom, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) right bottom / 51% 51% no-repeat; mask: radial-gradient(circle at left top, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) left top / 51% 51% no-repeat, radial-gradient(circle at right top, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) right top / 51% 51% no-repeat, radial-gradient(circle at left bottom, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) left bottom / 51% 51% no-repeat, radial-gradient(circle at right bottom, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) right bottom / 51% 51% no-repeat; } /* Innere Passepartout-Linie: zeichnet die Kerbform nach (4 Viertelkreis-Ringe an den Ecken + 4 gerade Segmente) */ .fuehrungen__line { --inset: 16px; /* Abstand der Linie vom Fotorand */ --n: 18px; /* Eckradius der Linie */ --w: 1.5px; /* Linienstärke */ --c: rgba(255, 255, 255, 0.85); position: absolute; inset: var(--inset); pointer-events: none; background: radial-gradient(circle at left top, transparent calc(var(--n) - var(--w)), var(--c) 0, var(--c) var(--n), transparent 0) left top / var(--n) var(--n) no-repeat, radial-gradient(circle at right top, transparent calc(var(--n) - var(--w)), var(--c) 0, var(--c) var(--n), transparent 0) right top / var(--n) var(--n) no-repeat, radial-gradient(circle at left bottom, transparent calc(var(--n) - var(--w)), var(--c) 0, var(--c) var(--n), transparent 0) left bottom / var(--n) var(--n) no-repeat, radial-gradient(circle at right bottom, transparent calc(var(--n) - var(--w)), var(--c) 0, var(--c) var(--n), transparent 0) right bottom / var(--n) var(--n) no-repeat, linear-gradient(var(--c), var(--c)) top center / calc(100% - 2 * var(--n)) var(--w) no-repeat, linear-gradient(var(--c), var(--c)) bottom center / calc(100% - 2 * var(--n)) var(--w) no-repeat, linear-gradient(var(--c), var(--c)) left center / var(--w) calc(100% - 2 * var(--n)) no-repeat, linear-gradient(var(--c), var(--c)) right center / var(--w) calc(100% - 2 * var(--n)) no-repeat; } /* ---- Fakten-Blöcke: DIN-Label mit gelber Zierlinie, große Schrift ---- */ .fakt + .fakt { margin-top: clamp(2.2rem, 4.5vw, 3.5rem); } /* Labels in der Heading-Schrift (Utopia, Versalien global), ohne Zierlinie */ .fakt__label { font-size: clamp(1.5rem, 2.4vw, 2.1rem); color: var(--c-ink); margin-bottom: 1rem; } .fakt p, .fakt__list li { font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.65; color: var(--c-ink); } .fakt__sub { margin-top: 0.8rem; color: var(--c-ink-soft); font-size: clamp(0.95rem, 1.2vw, 1.05rem) !important; } /* Leistungs-Liste mit gelben Punkten */ .fakt__list li { position: relative; padding-left: 1.6rem; margin-bottom: 0.55rem; } .fakt__list li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 9px; height: 9px; border-radius: 50%; background: var(--c-yellow); } /* ---- Kontakt / Anfrage ---- */ .fuehrungen__cta { text-align: center; margin-top: clamp(4.5rem, 9vw, 7rem); } .fuehrungen__cta h3 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: 1.6rem; } .fuehrungen__cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; } .fuehrungen__hinweis { max-width: 62ch; margin: clamp(2.2rem, 4vw, 3rem) auto 0; font-style: italic; font-size: 0.95rem; color: var(--c-ink-soft); } /* ---- Responsive ---- */ @media (max-width: 900px) { .fuehrungen__row { grid-template-columns: 1fr; gap: 2rem; } .fuehrungen__row--flip .fuehrungen__img { order: 0; } /* Bild immer zuerst */ } @media (max-width: 480px) { .fuehrungen__cta-actions .btn { width: 100%; } }