/*
Theme Name: Layout
Description: A Child Theme for the Enfold Wordpress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating wil be much easier then.
Version: 1.0
Author: Kriesi
Author URI: http://www.kriesi.at
Template: enfold
*/
/* ==========================================================================
Hundezentrum Pfalz — Relaunch
Farb- und Typo-System, Feinschliff über die Enfold-Theme-Optionen hinaus.
========================================================================== */
/* Navigationsschrift — lokal gehostet, kein Google-Server.
Enfold lädt nur die in den Theme-Optionen gewählten Schriften, daher hier explizit. */
@font-face {
font-family: 'Allerta Stencil';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../../uploads/dynamic_avia/avia_type_fonts/allerta-stencil/allerta-stencil-regular.woff2') format('woff2'),
url('../../uploads/dynamic_avia/avia_type_fonts/allerta-stencil/allerta-stencil-regular.woff') format('woff');
}
:root {
--hz-orange: #F39200; /* Marke: Logo, Buttons, Linien, Icons */
--hz-orange-dark: #D07800; /* orange Überschriften (>= 24px) */
--hz-orange-link: #B45309; /* orange Fließtext-Links (AA) */
--hz-orange-soft: #FDF3E4; /* sehr helle Orange-Fläche */
--hz-text: #3F4448;
--hz-heading: #2B2E31;
--hz-muted: #6B7176;
--hz-border: #E6E2DC;
--hz-alt-bg: #FAF7F2;
--hz-footer-bg: #363839;
--hz-socket-bg: #282A2B;
--hz-footer-text: #C9C6C2;
--hz-shadow: 0 2px 14px rgba(43,46,49,.08);
--hz-shadow-lg: 0 12px 34px rgba(43,46,49,.16);
}
/* --------------------------------------------------------------------------
1. Typografie
-------------------------------------------------------------------------- */
body,
.avia_textblock,
#top .avia_textblock p {
font-size: 17px;
line-height: 1.75;
color: var(--hz-text);
-webkit-font-smoothing: antialiased;
}
#top h1, #top h2, #top h3, #top h4, #top h5, #top h6 {
font-weight: 700;
letter-spacing: -0.01em;
color: var(--hz-heading);
text-transform: none;
}
#top h1 { font-size: 42px; line-height: 1.18; margin-bottom: .5em; }
#top h2 { font-size: 30px; line-height: 1.25; margin-bottom: .55em; }
#top h3 { font-size: 22px; line-height: 1.35; }
#top h4 { font-size: 19px; line-height: 1.4; }
#top h5 { font-size: 17px; }
/* Orange Überschriften — Erkennungsmerkmal der Live-Site */
#top .hz-h-orange,
#top .hz-h-orange h1,
#top .hz-h-orange h2,
#top .hz-h-orange h3,
#top .av-special-heading.hz-h-orange .av-special-heading-tag {
color: var(--hz-orange-dark);
}
/* Inline-Hervorhebung (im Original: ) */
#top .hz-accent { color: var(--hz-orange-link); }
/* Links im Fließtext */
#top .avia_textblock a,
#top .entry-content-wrapper a,
#top .post-entry a {
color: var(--hz-orange-link);
text-decoration: none;
border-bottom: 1px solid rgba(180, 83, 9, .35);
transition: color .18s ease, border-color .18s ease;
}
#top .avia_textblock a:hover,
#top .entry-content-wrapper a:hover,
#top .post-entry a:hover {
color: var(--hz-heading);
border-bottom-color: var(--hz-orange);
}
#top .avia_textblock a.avia-button,
#top .entry-content-wrapper a.avia-button,
#top .avia_textblock a img,
#top .entry-content-wrapper .av-masonry a,
#top .entry-content-wrapper .avia-image-container,
#top a.hz-plain { border-bottom: none; }
#top ul, #top ol { margin-bottom: 1.2em; }
#top .avia_textblock li { margin-bottom: .35em; }
/* --------------------------------------------------------------------------
2. Header / Navigation
-------------------------------------------------------------------------- */
#top #header {
background-color: #fff;
border-bottom: 1px solid var(--hz-border);
box-shadow: none;
transition: box-shadow .25s ease;
}
#top #header.header-scrolled,
#top #header.av_header_transparency.header-scrolled { box-shadow: var(--hz-shadow); }
.html_header_top.html_logo_left #top .logo { left: 0; }
#top .logo img,
#top .logo a > img { max-height: 56px; width: auto; padding: 0; }
/* Hauptnavigation in Allerta Stencil — Signatur der Original-Site */
#top .av-main-nav > li > a {
font-family: 'Allerta Stencil', 'Montserrat', sans-serif;
font-size: 17px;
font-weight: 400;
letter-spacing: .01em;
color: var(--hz-heading);
transition: color .18s ease;
}
#top .av-main-nav > li > a:hover,
#top .av-main-nav > li.current-menu-item > a,
#top .av-main-nav > li.current-menu-ancestor > a,
#top .av-main-nav > li.current_page_item > a,
#top .av-main-nav > li:hover > a { color: var(--hz-orange-dark); }
/* dezenter Aktiv-Indikator statt Avada-Unterstrich-Balken */
#top .av-main-nav > li > a .avia-menu-text { position: relative; }
#top .av-main-nav > li > a .avia-menu-text::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -7px;
height: 2px;
background: var(--hz-orange);
transform: scaleX(0);
transform-origin: center;
transition: transform .22s ease;
}
#top .av-main-nav > li:hover > a .avia-menu-text::after,
#top .av-main-nav > li.current-menu-item > a .avia-menu-text::after,
#top .av-main-nav > li.current-menu-ancestor > a .avia-menu-text::after,
#top .av-main-nav > li.current_page_item > a .avia-menu-text::after { transform: scaleX(1); }
/* Dropdowns */
#top .av-main-nav ul li a {
font-family: 'Montserrat', sans-serif;
font-size: 15px;
line-height: 1.45;
background-color: #fff;
color: var(--hz-text);
border-bottom: 1px solid var(--hz-border);
}
#top .av-main-nav ul li:last-child a { border-bottom: none; }
#top .av-main-nav ul li a:hover,
#top .av-main-nav ul li.current-menu-item > a {
background-color: var(--hz-orange-soft);
color: var(--hz-orange-dark);
}
#top .av-main-nav ul { box-shadow: var(--hz-shadow-lg); border-radius: 3px; overflow: hidden; }
/* Mobiles Menü */
#top #mobile-advanced li a { font-family: 'Montserrat', sans-serif; font-size: 16px; }
#top .av-burger-menu-main a { color: var(--hz-heading); }
/* --------------------------------------------------------------------------
3. Buttons
-------------------------------------------------------------------------- */
#top .avia-button,
#top .main_color .avia-button,
#top input[type="submit"],
#top button[type="submit"],
#top .wpcf7 input[type="submit"] {
font-family: 'Montserrat', sans-serif;
font-size: 16px;
font-weight: 600;
letter-spacing: .02em;
border-radius: 4px;
border: none;
padding: 15px 30px;
background-color: var(--hz-orange);
color: var(--hz-heading);
box-shadow: 0 2px 0 rgba(43,46,49,.06);
transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
#top .avia-button:hover,
#top input[type="submit"]:hover,
#top button[type="submit"]:hover,
#top .wpcf7 input[type="submit"]:hover {
background-color: var(--hz-orange-dark);
color: #fff;
transform: translateY(-1px);
box-shadow: var(--hz-shadow);
}
#top .avia-button.avia-color-theme-color-subtle {
background-color: transparent;
color: var(--hz-heading);
box-shadow: inset 0 0 0 2px var(--hz-orange);
}
#top .avia-button.avia-color-theme-color-subtle:hover {
background-color: var(--hz-orange);
color: var(--hz-heading);
}
/* Button auf dunklem Hero */
#top .hz-hero .avia-button { background-color: var(--hz-orange); color: var(--hz-heading); }
#top .hz-hero .avia-button:hover { background-color: #fff; color: var(--hz-heading); }
/* --------------------------------------------------------------------------
4. Hero-Sektionen (ersetzen die Avada-Slider)
-------------------------------------------------------------------------- */
#top .hz-hero {
position: relative;
background-size: cover;
background-position: center center;
}
#top .hz-hero::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(20,22,24,.30) 0%, rgba(20,22,24,.55) 60%, rgba(20,22,24,.68) 100%);
pointer-events: none;
}
#top .hz-hero .container, #top .hz-hero .content { position: relative; z-index: 2; }
#top .hz-hero h1,
#top .hz-hero h2,
#top .hz-hero .av-special-heading-tag {
color: #fff;
text-shadow: 0 2px 18px rgba(0,0,0,.45);
margin-bottom: .35em;
}
#top .hz-hero h1 { font-size: 54px; line-height: 1.1; }
#top .hz-hero .hz-hero-sub,
#top .hz-hero .hz-hero-sub p {
color: #F3F1EE;
font-size: 21px;
line-height: 1.5;
text-shadow: 0 2px 14px rgba(0,0,0,.5);
margin-bottom: 1.4em;
}
#top .hz-hero .av-subheading { color: #F3F1EE; }
/* Startseiten-Slider */
#top .hz-homeslider .avia-caption-title {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 52px;
line-height: 1.1;
text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
#top .hz-homeslider .avia-caption-content p {
font-size: 21px;
line-height: 1.5;
text-shadow: 0 2px 14px rgba(0,0,0,.5);
}
#top .hz-homeslider .av-slideshow-caption { z-index: 3; }
#top .hz-homeslider .avia-slideshow-inner li::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(20,22,24,.25) 0%, rgba(20,22,24,.58) 100%);
z-index: 2;
pointer-events: none;
}
/* --------------------------------------------------------------------------
5. Sektionen, Trennlinien, Flächen
-------------------------------------------------------------------------- */
#top .hz-alt { background-color: var(--hz-alt-bg); }
#top .hz-sep .av-seperator-icon,
#top .hz-sep hr { border-color: var(--hz-orange); }
#top hr.avia-divider-fullwidth,
#top .hr-inner .hr-inner-style,
#top .hr .hr-inner { border-color: rgba(243,146,0,.55); }
#top .hr-custom .hr-inner { border-top-width: 1px; }
/* Kartige Teaser (Startseite) */
#top .hz-card {
background: #fff;
border: 1px solid var(--hz-border);
border-radius: 6px;
overflow: hidden;
box-shadow: var(--hz-shadow);
transition: transform .25s ease, box-shadow .25s ease;
}
#top .hz-card:hover { transform: translateY(-4px); box-shadow: var(--hz-shadow-lg); }
#top .hz-card .avia-image-container { margin: 0; }
#top .hz-card .avia-image-container img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
#top .hz-card .flex_column_inner,
#top .hz-card .hz-card-body { padding: 22px 24px 26px; }
#top .hz-card h3 { margin: 0 0 .5em; font-size: 21px; color: var(--hz-orange-dark); }
#top .hz-card p { font-size: 16px; line-height: 1.65; margin-bottom: 0; }
#top .hz-card a { border-bottom: none; }
/* Info-/Hinweisbox */
#top .hz-note {
background: var(--hz-orange-soft);
border-left: 4px solid var(--hz-orange);
border-radius: 4px;
padding: 20px 24px;
}
#top .hz-note p:last-child { margin-bottom: 0; }
/* Bilder */
#top .avia-image-container img { border-radius: 4px; }
#top .avia_textblock img { border-radius: 4px; max-width: 100%; height: auto; }
/* --------------------------------------------------------------------------
6. Tabellen (Angebotsübersicht)
-------------------------------------------------------------------------- */
#top .hz-table table,
#top .entry-content-wrapper table {
border-collapse: collapse;
width: 100%;
font-size: 16px;
}
#top .hz-table th,
#top .entry-content-wrapper th {
background: var(--hz-alt-bg);
color: var(--hz-heading);
font-weight: 700;
text-align: left;
border-bottom: 2px solid var(--hz-orange);
padding: 14px 16px;
}
#top .hz-table td,
#top .entry-content-wrapper td {
border-bottom: 1px solid var(--hz-border);
padding: 14px 16px;
vertical-align: top;
}
#top .hz-table tr:hover td { background: var(--hz-orange-soft); }
#top .hz-table .hz-col-title { font-weight: 600; color: var(--hz-orange-dark); width: 42%; }
#top .hz-table .hz-col-action { text-align: right; white-space: nowrap; }
.hz-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* --------------------------------------------------------------------------
7. Team-/Personenblöcke
-------------------------------------------------------------------------- */
#top .hz-person { padding-bottom: 10px; }
#top .hz-person h2, #top .hz-person h3 { color: var(--hz-orange-dark); }
#top .hz-person + .hz-person { border-top: 1px solid rgba(243,146,0,.4); padding-top: 34px; margin-top: 10px; }
#top .hz-person .avia-image-container img { border-radius: 6px; }
/* --------------------------------------------------------------------------
8. Formulare (Contact Form 7)
-------------------------------------------------------------------------- */
#top .wpcf7 { font-size: 16px; }
#top .wpcf7 label { display: block; font-weight: 600; color: var(--hz-heading); margin-bottom: 6px; }
#top .wpcf7 input[type="text"],
#top .wpcf7 input[type="email"],
#top .wpcf7 input[type="tel"],
#top .wpcf7 input[type="date"],
#top .wpcf7 textarea,
#top .wpcf7 select {
width: 100%;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
color: var(--hz-text);
background: #fff;
border: 1px solid var(--hz-border);
border-radius: 4px;
padding: 12px 14px;
transition: border-color .18s ease, box-shadow .18s ease;
}
#top .wpcf7 input:focus,
#top .wpcf7 textarea:focus,
#top .wpcf7 select:focus {
border-color: var(--hz-orange);
box-shadow: 0 0 0 3px rgba(243,146,0,.18);
outline: none;
}
#top .wpcf7 textarea { min-height: 180px; }
#top .wpcf7 .wpcf7-list-item { display: block; margin: 0 0 8px; }
#top .wpcf7 .wpcf7-acceptance label,
#top .wpcf7 .wpcf7-checkbox label,
#top .wpcf7 .wpcf7-radio label {
font-weight: 400;
display: flex;
gap: 10px;
align-items: flex-start;
line-height: 1.55;
}
#top .wpcf7 input[type="checkbox"],
#top .wpcf7 input[type="radio"] { width: auto; margin-top: 4px; flex: 0 0 auto; }
#top .wpcf7 .hz-form-row { margin-bottom: 20px; }
#top .wpcf7 .hz-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
#top .wpcf7-not-valid-tip { color: #B3261E; font-size: 14px; margin-top: 5px; }
#top .wpcf7 .wpcf7-response-output {
border-radius: 4px;
border-width: 1px;
padding: 14px 18px;
margin: 20px 0 0;
font-size: 16px;
}
#top .wpcf7 .hz-legal-note { font-size: 14px; line-height: 1.6; color: var(--hz-muted); }
/* --------------------------------------------------------------------------
9. Blog / News
-------------------------------------------------------------------------- */
#top .post-entry .post-title { color: var(--hz-heading); }
#top .post-entry .post-title a { border-bottom: none; }
#top .post-entry .post-title a:hover { color: var(--hz-orange-dark); }
#top .post-meta-infos, #top .slide-meta { color: var(--hz-muted); font-size: 14px; }
#top .post-entry {
border-bottom: 1px solid var(--hz-border);
padding-bottom: 34px;
margin-bottom: 34px;
}
#top .post-entry:last-child { border-bottom: none; }
/* --------------------------------------------------------------------------
10. Footer
-------------------------------------------------------------------------- */
#top #footer { background-color: var(--hz-footer-bg); color: var(--hz-footer-text); font-size: 16px; }
#top #footer .widgettitle {
color: #fff;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
margin-bottom: 18px;
}
#top #footer a { color: var(--hz-footer-text); border-bottom: none; transition: color .18s ease; }
#top #footer a:hover { color: var(--hz-orange); }
#top #footer .widget_nav_menu li { border-bottom: 1px solid rgba(255,255,255,.10); }
#top #footer .widget_nav_menu li a { padding: 11px 0; display: block; }
#top #footer .hz-footer-contact p { margin-bottom: .4em; line-height: 1.7; }
#top #footer .hz-footer-contact strong { color: #fff; }
#top #socket { background-color: var(--hz-socket-bg); color: #8F9498; font-size: 14px; }
#top #socket a { color: #8F9498; border-bottom: none; }
#top #socket a:hover { color: var(--hz-orange); }
/* Widerrufs-Schaltfläche nach § 356a BGB — dauerhaft sichtbar hervorgehoben */
#top #footer .hz-widerruf-button a,
#top #socket .hz-widerruf-button a {
display: inline-block;
background: var(--hz-orange);
color: var(--hz-heading);
font-weight: 700;
border-radius: 4px;
padding: 11px 20px;
border-bottom: none;
transition: background-color .18s ease, color .18s ease;
}
#top #footer .hz-widerruf-button a:hover,
#top #socket .hz-widerruf-button a:hover { background: #fff; color: var(--hz-heading); }
/* Social-Icons im Footer */
#top #footer .av-social-link a {
background: rgba(255,255,255,.08);
color: var(--hz-footer-text);
border-radius: 4px;
width: 40px; height: 40px; line-height: 40px;
transition: background-color .18s ease, color .18s ease;
}
#top #footer .av-social-link a:hover { background: var(--hz-orange); color: #fff; }
/* --------------------------------------------------------------------------
11. Sonstiges
-------------------------------------------------------------------------- */
/* Sichtbarer Fokus für Tastaturnutzung */
#top a:focus-visible,
#top button:focus-visible,
#top input:focus-visible,
#top textarea:focus-visible,
#top select:focus-visible {
outline: 3px solid var(--hz-orange);
outline-offset: 2px;
}
/* Scroll-Top-Button */
#top #scroll-top-link {
background: rgba(43,46,49,.75);
color: #fff;
border-radius: 4px;
border: none;
}
#top #scroll-top-link:hover { background: var(--hz-orange); color: var(--hz-heading); }
/* Enfold-Standardabstände etwas großzügiger */
#top .content, #top .sidebar { padding-top: 60px; padding-bottom: 60px; }
/* --------------------------------------------------------------------------
12. Responsive
-------------------------------------------------------------------------- */
@media only screen and (max-width: 1100px) {
#top .av-main-nav > li > a { font-size: 15px; }
#top .hz-hero h1, #top .hz-homeslider .avia-caption-title { font-size: 42px; }
}
@media only screen and (max-width: 989px) {
#top h1 { font-size: 34px; }
#top h2 { font-size: 26px; }
#top h3 { font-size: 20px; }
#top .hz-hero h1, #top .hz-homeslider .avia-caption-title { font-size: 34px; }
#top .hz-hero .hz-hero-sub, #top .hz-homeslider .avia-caption-content p { font-size: 18px; }
#top .wpcf7 .hz-form-grid { grid-template-columns: 1fr; }
}
@media only screen and (max-width: 767px) {
body, .avia_textblock, #top .avia_textblock p { font-size: 16px; line-height: 1.7; }
#top h1 { font-size: 28px; }
#top h2 { font-size: 23px; }
#top .hz-hero h1, #top .hz-homeslider .avia-caption-title { font-size: 27px; }
#top .hz-hero .hz-hero-sub, #top .hz-homeslider .avia-caption-content p { font-size: 16px; }
#top .hz-hero .content, #top .hz-hero .container { padding-top: 46px; padding-bottom: 46px; }
#top .content, #top .sidebar { padding-top: 40px; padding-bottom: 40px; }
#top .avia-button { width: auto; }
#top .hz-person + .hz-person { padding-top: 26px; }
}