/* ============================================================================
Ansprechpartner-Seite (roncalli, Page-ID 4839) — Kontaktpersonen im Event-Look.
----------------------------------------------------------------------------
Restyled die BESTEHENDEN Parasol-Kontaktblöcke (block__content__columns > col__4:
Name
Rolle
TEL … / mailto …
) in die Optik der Event-Team-
Sektion — nur OHNE Fotos. KEINE Strukturänderung am Seiteninhalt.
Vollständig gekapselt unter body.ap-restyle und wird via functions.php AUSSCHLIESSLICH
auf dieser Seite geladen → kein Einfluss auf den Rest von roncalli.de.
Farben/Fonts 1:1 aus event.css übernommen (dark-blue #00364e, red #c02b3e,
blue #02658e, beige #faf1e0; Barlow Semi Condensed / Montserrat).
========================================================================== */
body.ap-restyle {
--ap-dark:#00364e;
--ap-red:#c02b3e;
--ap-blue:#02658e;
--ap-role:#5a5247;
--ap-beige:#faf1e0;
--ap-line:rgba(0,54,78,.10);
/* The theme's own faces (Proxima Nova, already loaded site-wide) instead of
Barlow/Montserrat from fonts.googleapis.com: no third-party font request
on this page (TCK-0084). */
--ap-display:var(--font-condensed);
--ap-body:var(--font-main);
background:#fff;
}
/* The form block ships Barlow as its display face; point it at the theme's. */
body.ap-restyle .woogency-kontakt{
--wgc-font-display:var(--font-condensed);
}
/* Hintergrund der Kontakt-Sektion weiß: der cremefarbene Grund ist ein
psl-section-block mit colorScheme „beige" (.bg__beige — identisch zur
Kartenfarbe). Wir treffen NUR die beige Sektion, die Kontaktnamen ()
enthält → der rote Newsletter (.bg__carpet, ohne ) bleibt unberührt.
Ergebnis: weißer Grund, beige Karten heben sich ab. */
body.ap-restyle .bg__beige:has(h5) { background:#fff; }
body.ap-restyle .main-content .block__text-v2,
body.ap-restyle .main-content .block__headline { background:transparent; }
/* Hinweis: Sektions-Überschriften (.title__custom) bewusst NICHT restyled —
sie bleiben im ursprünglichen Parasol-Stil. */
/* --- Kontakt-Grid: 2 Spalten (wie die Event-Team-Darstellung) ---
.block__text-v2 im Selektor ist nötig für den Editor: dort setzt das
Block-CSS ".wp-block-parasol-island-psl-text-block-v2 .block__text-v2
.block__content__columns" (drei Klassen) Flex mit space-between, und die
Karten schrumpften an die Ränder. */
body.ap-restyle .block__text-v2 .block__content__columns:has(h5) {
display:grid;
grid-template-columns:1fr;
gap:18px;
align-items:stretch;
margin-bottom:18px; /* Abstand zwischen gestapelten Karten-Zeilen (jeder Block = eine Zeile) */
}
@media (min-width:560px) { body.ap-restyle .block__text-v2 .block__content__columns:has(h5) { grid-template-columns:repeat(2,1fr); } }
/* --- Kontaktkarte (wie .member in event.css, ohne Foto) --- */
body.ap-restyle .block__content__columns:has(h5) > [class*="col__"] {
width:auto !important;
max-width:none !important;
flex:none !important;
float:none !important;
margin:0 !important;
padding:20px 22px !important;
background:var(--ap-beige);
border-radius:16px;
display:flex;
flex-direction:column;
gap:2px;
transition:box-shadow .2s ease, transform .2s ease;
}
body.ap-restyle .block__content__columns:has(h5) > [class*="col__"]:hover {
box-shadow:0 8px 26px rgba(0,54,78,.10);
transform:translateY(-3px);
}
/* Karten ohne Namen (leere Spalten) ausblenden — progressive Verbesserung via :has */
body.ap-restyle .block__content__columns:has(h5) > [class*="col__"]:not(:has(h5)) { display:none; }
/* Name */
body.ap-restyle .block__content__columns:has(h5) > [class*="col__"] h5 {
font-family:var(--ap-display);
font-weight:800;
text-transform:uppercase;
font-size:20px;
line-height:1;
letter-spacing:.005em;
color:var(--ap-dark);
margin:0 0 8px;
}
/* Rolle + weiterer Text */
body.ap-restyle .block__content__columns:has(h5) > [class*="col__"] p {
font-family:var(--ap-body);
font-size:13.5px;
line-height:1.45;
color:var(--ap-role);
margin:0 0 3px;
}
/* Rolle (erste Zeile nach dem Namen) etwas kräftiger absetzen */
body.ap-restyle .block__content__columns:has(h5) > [class*="col__"] h5 + p {
margin-bottom:10px;
}
/* Kontakt-Links (Telefon / E-Mail) */
body.ap-restyle .block__content__columns:has(h5) > [class*="col__"] a {
font-family:var(--ap-body);
font-weight:600;
color:var(--ap-blue);
text-decoration:none;
word-break:break-word;
}
body.ap-restyle .block__content__columns:has(h5) > [class*="col__"] a:hover {
color:var(--ap-red);
}
/* letzter (oft leerer ) Absatz: keinen Extra-Abstand */
body.ap-restyle .block__content__columns:has(h5) > [class*="col__"] p:last-child {
margin-bottom:0;
}
/* --- Mail-/Telefon-Icons vor den Kontakt-Links (wie Event-Seite) --- */
body.ap-restyle .block__content__columns:has(h5) > [class*="col__"] a[href^="mailto:"],
body.ap-restyle .block__content__columns:has(h5) > [class*="col__"] a[href^="tel:"],
body.ap-restyle .block__content__columns:has(h5) > [class*="col__"] a[href^="+"] {
display:inline-flex;
align-items:center;
gap:8px;
}
body.ap-restyle .block__content__columns:has(h5) > [class*="col__"] a[href^="mailto:"]::before,
body.ap-restyle .block__content__columns:has(h5) > [class*="col__"] a[href^="tel:"]::before,
body.ap-restyle .block__content__columns:has(h5) > [class*="col__"] a[href^="+"]::before {
content:"";
width:15px;
height:15px;
flex:0 0 auto;
background-color:currentColor;
-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
-webkit-mask-position:center; mask-position:center;
-webkit-mask-size:contain; mask-size:contain;
}
/* Briefumschlag (Mail) */
body.ap-restyle .block__content__columns:has(h5) > [class*="col__"] a[href^="mailto:"]::before {
-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='5'%20width='18'%20height='14'%20rx='2'/%3E%3Cpath%20d='m3%207%209%206%209-6'/%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='5'%20width='18'%20height='14'%20rx='2'/%3E%3Cpath%20d='m3%207%209%206%209-6'/%3E%3C/svg%3E");
}
/* Telefonhörer */
body.ap-restyle .block__content__columns:has(h5) > [class*="col__"] a[href^="tel:"]::before,
body.ap-restyle .block__content__columns:has(h5) > [class*="col__"] a[href^="+"]::before {
-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72%2012.84%2012.84%200%200%200%20.7%202.81%202%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45%2012.84%2012.84%200%200%200%202.81.7A2%202%200%200%201%2022%2016.92z'/%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72%2012.84%2012.84%200%200%200%20.7%202.81%202%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45%2012.84%2012.84%200%200%200%202.81.7A2%202%200%200%201%2022%2016.92z'/%3E%3C/svg%3E");
}
/* --- FAX-Zeile (kein Link → gedämpftes Grau) mit Fax-/Drucker-Icon --- */
body.ap-restyle .block__content__columns:has(h5) > [class*="col__"] .ap-fax {
display:inline-flex;
align-items:center;
gap:8px;
font-family:var(--ap-body);
font-size:13.5px;
font-weight:600;
color:var(--ap-role);
}
body.ap-restyle .block__content__columns:has(h5) > [class*="col__"] .ap-fax::before {
content:"";
width:15px;
height:15px;
flex:0 0 auto;
background-color:currentColor;
-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
-webkit-mask-position:center; mask-position:center;
-webkit-mask-size:contain; mask-size:contain;
-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='6%209%206%202%2018%202%2018%209'/%3E%3Cpath%20d='M6%2018H4a2%202%200%200%201-2-2v-5a2%202%200%200%201%202-2h16a2%202%200%200%201%202%202v5a2%202%200%200%201-2%202h-2'/%3E%3Crect%20x='6'%20y='14'%20width='12'%20height='8'/%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='6%209%206%202%2018%202%2018%209'/%3E%3Cpath%20d='M6%2018H4a2%202%200%200%201-2-2v-5a2%202%200%200%201%202-2h16a2%202%200%200%201%202%202v5a2%202%200%200%201-2%202h-2'/%3E%3Crect%20x='6'%20y='14'%20width='12'%20height='8'/%3E%3C/svg%3E");
}