* {
box-sizing: border-box;
}
html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden !important;
color: #212121;
background-color: #F9F7F4;
font-family: Geist, sans-serif;
line-height: 1.6;
}
img,
video,
iframe {
max-width: 100%;
height: auto;
}
/* ==========================================
GEIST LOKAL (Regular, 500, 600, 700)
========================================== */
@font-face {
font-family: "Geist";
src: url("fonts/geist-regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Geist";
src: url("fonts/geist-500.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Geist";
src: url("fonts/geist-600.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Geist";
src: url("fonts/geist-700.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
h1 { color: #212121; font-size: 40px; font-family: Geist, Geist; font-weight: 600; line-height: 1.15 }
h2 { color: #212121; font-size: 32px; font-family: Geist; font-weight: 600; line-height: 1.3 }
h3 { color: #212121; font-size: 22px; font-family: Geist; font-weight: 600; line-height: 1.35 }
p { color: #212121; font-size: 18px; font-family: Geist; font-weight: 400; line-height: 1.65 }
li { color: #212121; font-size: 18px; font-family: Geist; font-weight: 400; line-height: 1.65 }
a {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
/* Tablet + Handy */
@media (max-width: 768px) {
h1 {
font-size: 26px;
line-height: 1.2;
}
h2 {
font-size: 22px;
line-height: 1.3;
}
h3 {
font-size: 20px;
line-height: 1.35;
}
p,
li {
font-size: 16px;
line-height: 1.65;
}
}
.seo-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.pt-0 { padding-top: 0 !important }
.pt-10 { padding-top:10px !important; }
.pt-20 { padding-top:20px !important; }
.pt-30 { padding-top: 20px !important }
.pt-40 { padding-top: 40px !important }
.pt-50 { padding-top: 50px !important }
.pt-60 { padding-top: 60px !important }
.pt-50 { padding-top: 50px !important; }
.pt-70 { padding-top: 70px !important }
.pt-100 { padding-top: 100px !important }
.pt-150 { padding-top: 150px !important; }
/* -----------------SECTION-------------------------------------------------------------------------- */
.pb-0 { margin-bottom: 0px !important; padding-bottom: 0px !important }
.pb-20 { padding-bottom: 20px !important;}
.pb-30 { padding-bottom: 30px !important;}
.pb-40 { padding-bottom: 40px !important;}
.pb-50 { padding-bottom: 50px !important;}
.pb-70 { padding-bottom: 70px !important }
.pb-150 { padding-bottom: 150px !important; }
.pb-100 { padding-bottom: 100px !important;}
/* ==========================================--- Wichtig -------------Button---- btn --------------------------------------------------------------------------- */
@media (max-width: 768px) {
.pt-40 { padding-top: 20px !important;}
.pt-100 { padding-top: 48px !important }
h3 { font-size: 22px; line-height: 1.4;}
}
/* ==========================================
GRUNDLAYOUT UND GLOBAL-STILE
========================================== */
img { color: #fff; display: block; width: 100%; height: auto; overflow: hidden; border: 0; border-radius: 8px; }
.img-40 { width: 40%; height: auto; border-radius: 8px }
.img-60 { width: 60% ; height: auto; border-radius: 8px; display: block; margin-left: auto;}
.img-80 { width: 80%; height: auto; border-radius: 8px; display: block; margin-left: auto;}
.img-100 { width: 100%; height: auto; border-radius: 8px; display: block; margin-left: auto;}
.img-40a { padding: 0 40px 0 0 ; height: auto; border-radius: 150% !important; display: block; margin-left: auto; }
.img-shadow { box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
img-fluid { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; width: 100%; height: auto; border-radius: 8px }
.img-round { border-radius: 50%; }
.vertical {
display: flex;
align-items: center; /* vertikal mittig */
justify-content: center; /* horizontal mittig */
height: 100%;
}
.vertical img {
display: block;
height: auto;
border-radius: 8px;
}
.center img {
display: block;
margin-left: auto;
margin-right: auto;
}
.left img { display: block; margin-right: auto; }
.right img { display: block; margin-left: auto; }
/* ------------------------------------------- */
.rubin .links { margin-top: 32px; margin-bottom: 32px; padding-top: 24px; padding-bottom: 24px }
.rubin .links-intro { margin-top: 24px; margin-bottom: 0px; padding: 24px 0 32px; }
/* ------------------------------------------- */
label {
margin-bottom: .1rem !important;
}
.card-texts .blog-label,
.title .blog-label,
.beratung .blog-label,
.ebook-content .blog-label,
.about .blog-label {color:#fff;
background-color:#d46235 !important;
padding: 4px 10px !important;
font-size: 0.7em;
font-weight: 600;border-radius: 15px;
}
.card-texts .blog-labels,
.title .blog-labels,
.beratung .blog-labels,
.ebook-content .blog-labels,
.about .blog-labels {
background-color: #F3E5DB !important;
padding: 3px 8px !important;
font-size: 0.7em;
font-weight: 600;border-radius: 15px;
}
/* === header ======================= */
.header {
background: linear-gradient( 190deg, rgba(218, 213, 202, 0.55) 0%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0) 100% );
text-align: left;
padding: 52px 15px 15px;
position: relative;
border-radius: 0;
}
.header .nome { color: #212121; font-size: 20px; margin-top: 0px; padding-top: 0px; padding-bottom: 0px; line-height: 1.3 }
.header .nome a {
color: #212121;
font-size: 22px;
font-weight: 400;
line-height: 1.3;
margin-top: 0;
padding-top: 0;
padding-bottom: 0;
}
.header .nome span {
color: #000;background: #eadebd;
font-size: 24px;
font-weight: 700;
line-height: 1.3;
margin-top: 0;
padding:5px; border-radius: 150%
}
.header .telefon { color: #212121; font-size: 18px; margin-top: 0px; padding-top: 0px; padding-bottom: 0px; line-height: 1.1 }
.header .telefon p { color: #2b2b2b; font-size: 18px; margin-top: 0; padding-top: 0px; line-height: 1.3 }
.header .telefon a { color: #212121; font-size: 20px; font-style: italic; font-weight: 700 !important; text-decoration: none; text-align: left; margin: 0; padding: 0 0 0 }
.header .telefon span { color: #fff; font-size: 28px; font-weight: 700; background-color:#687666 ; padding: 1px 8px; border-radius: 150% }
.header .telefon:hover span {
color: #fff;
background-color: #a29985;
}
@media (max-width: 768px) {
.header {
background: #fff;
padding: 24px 15px 24px;
position: relative;
border-radius: 0;
}
.header .nome { color: #212121; font-size: 20px; margin-top: 0px; padding-top: 0px; padding-bottom: 0px; line-height: 1.3 }
.header .nome a { color: #212121; font-size: 20px; font-weight: 700; line-height: 1.3; margin-top: 0; padding-top: 0; padding-bottom: 0 }
.header .telefon {
color: #212121;
font-size: 20px;
}
.header .telefon a {
font-size: 24px;
margin: 0;
padding: 0 0 0;
}
.header .telefon span { color: #fff; font-size: 20px; font-weight: 700; background-color:#212121 ; padding: 2px 4px; border-radius: 150% }
.img-40a { padding-right: 0px; height: auto; border-radius: 8px; display: block; margin-left: auto;}
}
/* ------------------------------------------- */
.navii {
background: linear-gradient( 270deg, #A29985 0%, rgba(251, 247, 243, 0) 80%, rgba(251, 247, 243, 0) 100% );
margin-bottom: 40px;
padding: 80px 0 0 0;border-bottom: 1px solid #ccc;;
}
.nup-nav {
background-color:;
text-align: right;
padding: 0;
position: relative;
}
.nup-menu-toggle {
display: none;
}
/* Buttons */
.nup-menu-toggle:checked ~ .nup-blog-btn {
display: none;
}
.nup-back-btn {
color: #fff;
font-size: 16px;
font-weight: 500;
background-color: #212121;
display: inline-block;
text-decoration: none;
border-radius: 80px;
padding: 12px 24px;
margin: 12px 0 0 0;
}
.nup-back-btn:hover {
color: #fff;
background-color: #212121;
text-decoration: none;
}
.nup-termin-btn {
color: #212121;
font-size: 15px;
font-weight: 500;
background-color: #aebfcd;
display: inline-block;
text-decoration: none;
border-radius: 80px;
padding: 10px 24px;
margin: 2px 0px 0px 8px;
cursor: pointer;
}
.nup-menu-btn {
color: #000;
font-weight: 600;
background-color:#eadebd;
display: inline-block;
text-decoration: none;
border-radius: 80px 80px 0 0;
padding: 16px 32px;
margin-left: 8px;margin-bottom: -4px;
cursor: pointer;
}
.nup-termin-btn:hover,
.nup-menu-btn:hover {
color: #fff;
background-color: #212121;
text-decoration: none;
}
/* Menu */
.nup-menu {
display: none;
position: absolute;
right: 0;
top: 60px;
z-index: 9999;
width: 350px;
max-width: 90%;
background-color: #c3d3df;
padding: 24px;
border-radius: 0;
text-align: left;
}
.nup-menu-toggle:checked ~ .nup-menu {
display: block;
}
.nup-menu a {
color: #212121;font-size: 16px;
display: block;
padding: 6px 6px;
margin-top: 0px;
border-radius: 0px;
text-decoration: none;width: 100%
font-family: "Geist"; border-bottom: 1px solid #ebe5e1;
}
.nup-menu a:hover {
padding: 6px 7px;
text-decoration: none;
}
.about-alone img {
padding-right: 0px !important; padding-left: 40px !important; }
/* Mobile */
@media (max-width:991px) {
.navii {padding: 104px 0 0 0;
margin-bottom: 104px;
padding-top: 0;
}
.nup-menu {
width: 100%;
}
.nup-menu a {
color: #212121;text-align: right;
display: block;font-size: 18px;
padding: 8px 0px;
margin-top: 1px;
border-radius: 0px;
text-decoration: none;
font-family: "Geist";
}
}
@media (max-width:530px) {
.header .logo a {
padding: 0pc 0px 0px 50px
}
}
.navbar { background: transparent !important; border-bottom: 2px solid rgb(228, 229, 224); text-align: right; margin-right: auto; margin-left: auto; padding:32px 0 0 0 }
.navbar-expand-lg .navbar-nav .nav-link { color: #212121; font-size: 17px; font-weight: 400; text-align: center; letter-spacing: -0.5px; margin-left: 2px; padding: 0px 14px; border-radius: 1px }
.navbar-expand-lg .navbar-nav .nav-link:hover {
color: #f5f1ec;
background-color: #212121;
}
.navbar-expand-lg .navbar-nav .nav-link.active { color: #ede9e2; font-size: 17px; font-weight: 700; background-color: #212121; text-align: center; letter-spacing: -0.5px; margin-left: 2px; padding: 0px 14px; border-radius: 5px; transition: all 0.3s ease }
.navbar-expand-lg .navbar-nav .nav-link.active:hover {
color: #f5f1ec; background-color: #212121; font-weight: 700;
}
/* Dropdown-Menü */
.dropdown-menu {
background: #fff;
border: 1px solid #e7ded7;
border-radius: 8px;
padding: 6px 0;
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.dropdown-item {
color: #5a4636;
font-size: 16px;
padding: 12px 18px;
background: transparent;
transition: all 0.25s ease;
}
.dropdown-item:hover {
background-color: #f9f4ef;
padding-left: 26px; /* sanfter Slide-Effekt */
color: #8d5f3a;
}
/* ' HAMBURGER ALS BUTTON GLOBAL! */
.navbar-toggler { color: #212121 !important; background: #eee8e0;font-size: 16px !important; font-style: normal !important; font-weight: normal !important; margin-right: 3px !important; padding: 12px 8px; border: solid 0 !important; border-radius: 5px !important; box-shadow: none !important; transition: all .3s ease !important }
@media (max-width: 991px) {
.navii { margin-bottom: 104px; padding: 80px 0 0 0;; padding-bottom: 0px }
.mobile-top-nav {
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
}
.mobile-extra-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
}
.navbar-collapse {
border-top: 1px solid #d6e3dd;
padding-top: 12px;
margin-top: 10px; }
}
@media (max-width: 768px) {
.navii { margin-bottom: 36px; padding: 24px 0 0 0;; padding-bottom: 0px }
}
/* ======================================
container background-image: linear-gradient(to right, #af6748 0%, #b8986b 40%, #d4b98c 100%);
====================================== */
/* =======================================================
TITLE / INTRO
======================================================= */
.title h1 { font-size: 30px; font-weight: bold; line-height: 1.4; padding-top: 0px; padding-bottom: 8px }
.title h1 span { color: #212121; font-weight: bold; line-height: 1.4; padding-top: 32px; padding-bottom: 8px }
.title h2 { font-size: 30px; line-height: 1.2; padding-top: 0; padding-bottom: 0 }
.ebook .title { color: #9c6b38; font-size: 24px; font-style: italic; line-height: 1.2; letter-spacing: 1px; display: block; margin-bottom: 28px }
.title b { font-size: 18px; font-weight: 700 }
.title p { font-size: 18px; line-height: 1.6; margin-bottom: 20px }
.title p span { font-size: 26px; font-weight: bold; line-height: 1.35; display: inline-block; margin: 0; padding: 0 }
.title { padding-top: 0 }
.title .title-h1 { font-size: 32px; font-weight: 600; line-height: 1.35; margin-top: 8px; margin-bottom: 40px }
.title .rub {
margin-top: 32px;
}
.title .links-intro {
margin: 0;
padding: 0;
}
.title .abschnitt.pretitle {
color: #212121;
text-transform: uppercase;
letter-spacing: 2px;
display: inline-block;
margin-right: auto;
margin-left: auto;
padding: 0;
}
.title img {
display: block;
width: 100%;
height: auto;
margin: 8px 0 0;
padding: 0;
}
/* Breadcrumb / kleine Linkliste */
.title ol {
font-size: 16px;
line-height: 1.4;
list-style: none;
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 8px 0 40px 0;
}
.title ol li {
color: #000;font-size: 20px;
margin: 0;font-weight: 700;
padding: 0;
}
.title ol li + li::before {
color: #000;font-size: 16px;
line-height: 1;
display: inline-block;
margin: 0;
padding: 0 6px;
content: "\2022";
}
.title ol li a {
color:#000;
font-size: 16px;
line-height: 1.4;
text-decoration: none;
margin: 0;
padding: 0;
}
.title ol li a:hover {
color: #a29080;
text-decoration: none;
}
/* =======================================================
RESPONSIVE
======================================================= */
@media (max-width: 991px) {
.title {
padding-bottom: 24px;
}
.title .title-h1 {
font-size: 28px;
margin-bottom: 32px;
}
.title h1,
.title h2,
.title p span {
font-size: 24px;
}
.title p {
font-size: 18px;
line-height: 1.75;
}
.title img {
margin-top: 24px;
}
}
@media (max-width: 786px) {
.title {
padding-bottom: 0px;
}
.title .title-h1 {
font-size: 26px;
margin-bottom: 0px;
}
.title h1,
.title h2,
.title p span {
font-size: 24px;
line-height: 1.35;
}
.title p {
font-size: 18px;
line-height: 1.5;
margin-top: 16px;
margin-bottom: 16px;
}
.title .rub {
margin-top: 24px;
}
.title img {
margin-top: 24px;
}
.title ol {
padding: 0px 15px 32px 15px;
}
}
/* ----------------------------------------------------------- ROSA Button ---------------- */
.btn-rosa { color: #4a433e !important;
font-size: 18px;
font-weight: 500;
background-color: #A29985;
display: inline-block;
margin: 1px;
padding: 20px 25px;
position: relative;
-webkit-transition: 0.6s;
border-radius: 150%;
transition: 0.6s; }
.btn-rosa:hover {
color: #fff !important;
background-color:#2B4252 !important;
}
.btn-action { color: #fff !important;
font-size: 18px;
font-weight: 500;
background-color: #687666;
display: inline-block;
margin: 1px;
padding: 25px;
position: relative;
-webkit-transition: 0.6s;
border-radius: 150%;
transition: 0.6s; }
.btn-action:hover {
background-color: #f5f1ec !important;
color: #212121 !important;
box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
transform: translateY(-1px);
}
.btn-white { color: #4a433e !important;
font-size: 18px;
font-weight: 500;
background-color: #DED3C6;
display: inline-block;
margin: 1px;
padding: 20px;
position: relative;
-webkit-transition: 0.6s;
border-radius: 150%;
transition: 0.6s; }
.btn-white:hover {
background-color: #e8ceb7 !important;
}
.btn-black { color: #fff !important; font-size: 18px !important; font-weight: bold !important; text-decoration: none !important; background-color: #212121; margin-bottom: 3px; padding: 20px 26px; border-radius: 8px !important; }
.btn-black:hover {
background-color: #29475b;
color: #fff !important;
}
.btn-grey { color: #212121 !important; font-size: 18px !important; font-weight: 700; margin: 2px; padding: 32px 8px; border: none !important; border-radius: 8px !important; transition: all .0s ease !important }
.btn-grey:hover {
background-color: #555 !important;
color: #fff !important;
box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
transform: translateY(-1px);
}
.btn-term { color: #212121 !important; font-size: 18px !important; font-weight: 600 !important; margin: 2px 2px 3px; padding: 16px 24px !important; border: solid 1px #C96F4E !important; border-radius: 8px !important }
.btn-term:hover { color: #fff !important; background-color: #555 !important; box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important; transform: translateY(-1px) }
.btn-outline-dark {
color:#2d658e !important;
border-color:2d658e;
}
.btn-outline-dark:hover {
background:#212121;
color:#fff !important;
border-color:#212121;
}
/* ----------------- --------------------------------------------------------------------------- */
@media only screen and (max-width: 640px) {
.btn,
.btn-gold,
.btn-warning,
.btn-rosa,
.btn-white,
.btn-black,
{ padding: 14px 5px; }
}
@media (max-width: 768px) {
.btn-grey{ color: #212121 !important; font-size: 16px !important; margin-right: 4px !important; margin: 2px !important; padding: 16px 8px !important; border: none !important; border-radius: 8px !important; transition: all .0s ease !important }
.links p {
display: flex;
flex-direction: column;
}
.btn-text {
width: 100%;
margin-right: 0 !important;
text-align: center;
}
}
/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
overflow: hidden;
position: relative;
}
#hero .carousel, #hero .carousel-inner, #hero .carousel-item, #hero .carousel-item::before {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
#hero .carousel-container {
display: flex;
align-items: flex-end;
justify-content: center;
position: absolute;
bottom: 60px;
top: 70px;
left: 55px;
right: 55px;
}
/*================================================
Features Area CSS
=================================================*/
/* ================================
Features Area
================================ */
.features-area {
padding-top: 0;
padding-bottom: 0;
}
.features-area .features h2 {
color: #212529;
font-size: 30px;
line-height: 1.4;
text-align: center;
margin: 0 auto 30px auto;
}
/* Bootstrap-Spalten sauber halten */
.features-area .row {
margin-left: -15px;
margin-right: -15px;
}
.features-area [class*="col-"] {
padding-left: 3px;
padding-right: 3px;
margin-bottom: 3px;
}
/* Box */
.single-features {
width: 100%;
background-color:#f6f4f1;
padding: 30px 30px 35px 30px;
margin: 0;
border-radius: 30px 30px 0 30px;
transition: transform 0.4s ease;
}
/* Überschrift in der Box */
.features-area .single-features h3 {
color: #212529;
font-size: 24px;
line-height: 1.2;
text-align: center;
margin: 0;
padding: 8px 0 32px 0;
}
/* Bild */
.single-features img {
width: 100%;
height: auto;
display: block;
border-radius: 16px;
}
/* Text */
.single-features p {
color: #212529;
font-size: 18px;
font-weight: 500;
line-height: 28px;
text-align: left;
margin: 0;
padding-top: 40px;
padding-bottom: 24px;
}
@media (max-width: 768px) {
.single-features {
margin: 0;
border-radius: 80px;margin-bottom: 32px;
transition: transform 0.4s ease;
}
}
/* ======================================
about
====================================== */
#about { }
.about {}
.about h1 { font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -0.2px; margin-top: 8px; margin-bottom: 16px; padding-bottom: 0 }
.about h2 { margin-bottom: 32px; padding-top: 0; padding-bottom: 0 }
.about h3 { color: #212121; font-style: italic; font-weight: 400; letter-spacing: -1px; display: block; margin-bottom: 24px }
.about h4 { color: #f63; font-style: italic; font-weight: 300; letter-spacing: -1px; display: block; margin-bottom: 16px }
.about .subline { color: #d46235; font-size: 24px; font-style: italic; line-height: 1.2; letter-spacing: 1px; display: block; margin-bottom: 28px }
.about b { font-weight: 700 }
.about p { margin-bottom: 20px }
.about img { text-align: right; padding: 0px 30px 0px 0px; margin: 0px; }
.about img.b-cover { padding: 50px 0px; width: 70%;
display: block; filter: drop-shadow(0px 10px 10px rgba(0,0,0,0.5));
margin: 0 auto;}
.about .row.content { display: flex; align-items: center }
/* ======================================
about-alone
====================================== */
#about-alone { }
.about-alone { margin: 0; float: none }
.about-alone img {
display: block;
width: 100%;
height: auto;
border-radius: 8px;
padding-right: 50px;
}
.about-alone h2 { margin: 0 0 32px }
.about-alone h3 { font-weight: bold; margin-top: 30px; margin-right: 0; margin-left: 0 }
.about-alone .content { text-align: left; }
.about-alone .content a { ) }
.about-alone .content a:hover { font-size: 19px; font-style: italic; text-decoration: none }
.about-alone .content p { font-size: 18px; line-height: 28px }
.about-alone .content-link { text-align: left; margin: 0 2px 3px 0;padding-top: 30px; padding-right: 0; padding-bottom: 0 }
.about-alone .content-link a { color: #555; font-size: 18px; font-weight: bold; text-decoration: none; margin-top: 2px; margin-bottom: 2px; margin-left: 0;border-radius: 8px ; padding: 20pxbox-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) }
.about-alone .content-link a:hover { text-decoration: none, background-color: #B8A7BC; background-color: #bad2cd }
/* --icon boxes---*/
.about-alone .content h2 { color: #212529; font-weight: bold; text-align: left; margin-top: 0; margin-bottom: 16px; padding-top: 0; padding-bottom: 0 }
.about-alone .content h3 { color: #212529; font-weight: bold; text-align: left; margin-top: 0; margin-bottom: 30px }
@media (max-width: 992px) {
.about img.b-cover {
padding: 20px !important;
margin: 24px auto 0 auto; /* oben Abstand + horizontal zentriert */
display: block; /* wichtig für margin:auto */
border-radius: 8px;
}
}
@media (max-width: 768px) {
.about h1 {
font-size: 26px;
line-height: 28px;
padding-top: 20px;line-height: 1.2;
}
.about p { margin-bottom: 20px; }
.about .row.content {
flex-direction: column;
text-align: left;
padding: 0 15px;
}
.about img {
padding-right: 0;
margin-bottom: 16px;
width: 100%;
height: auto;
}
.about .subline,
.about h3 {
font-size: 22px;
line-height: 1.4;text-align: left;
margin: 32px 0px;
}
#about-alone {padding: 0px 15px }
}
/*--------------------------------------------------------------
# Kontakt auf Kontakt zu finden
--------------------------------------------------------------*/
#contact { }
.contact { }
.contact-title{ font-size:22px;line-height:32px;margin-top:0;margin-bottom:30px;padding-top:0 }
.contact-title h1 { }
.contact p a{ color:#212529;font-size:16px;text-decoration:none;padding:0;border-radius:8px }
.contact p a:hover { font-style: italic; text-decoration: none }
.contact h1{ color:#212529;font-size:26px;text-align:left;margin:30px 0 0;padding:0 }
.contact .info-wrap{ margin:0;padding:20px 10px 0;box-shadow:0px 2px 16px rgba(0,0,0,0.0) }
.contact .info{ background:#fff;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0 }
.contact .info a{ background:#fff;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0 }
.contact .info p{ color:#212529;font-size:16px;line-height:22px;margin-bottom:0;padding:0 0 30px 64px }
.contact .info h4 { color: #212529; margin-top: 0; margin-left: 30px; padding: 0 0 0 30px }
.contact .info h4 a { color: #212529; margin: 0 }
.contact .info i { color: #fff; background:#b35550;font-size: 24px; font-weight: bold; display: flex; padding: 20px; width: 44px; height: 44px; float: left; border: solid 1px; align-items: center; border-radius: 50px; justify-content: center; transition: all 0.3s }
.contact .info:hover i { text-decoration: none; padding: 24px; border: solid 1px }
@-webkit-keyframes animate-loading{ 0%{ transform:rotate(0deg);}
100%{ transform:rotate(360deg);}
}
@keyframes animate-loading{ 0%{ transform:rotate(0deg);}
100%{ transform:rotate(360deg);}
}
/*---
# ID e-Book Bereich funktionierende Variante
--------------------------------------------------------------*/
#ebook { }
.ebook { }
.ebook h1 { font-size: 30px; font-weight: bold; line-height: 1.4; padding-top: 32px; padding-bottom: 8px }
.ebook h1 span { color: #212121; font-size: 30px; font-weight: bold; line-height: 1.4; padding-top: 32px; padding-bottom: 8px }
.ebook h2 { font-size: 30px; line-height: 1.2; padding-top: 0; padding-bottom: 0 }
.ebook h3 { color: #898989; font-size: 32px; font-weight: 700; line-height: 1.1; letter-spacing: -1px; display: block; margin-top: 24px; margin-bottom: 24px }
.ebook .ebook-content h3 {
color: #212121;
font-size: 32px;
font-weight: 700;
line-height: 1.2;
letter-spacing: -1px;
display: block;
margin-bottom: 24px;
}
.ebook .subline { color: #9c6b38; font-size: 24px; font-style: italic; line-height: 1.2; letter-spacing: 1px; display: block; margin-bottom: 28px }
.ebook b { font-weight: 700 }
.ebook p { font-size: 18px; line-height: 1.6; margin-bottom: 20px }
.ebook img { text-align: right; display: block; padding-right: 50px; width: 100%; height: auto; border-radius: 8px }
.ebook .row.content { display: flex; align-items: center }
.ebook .b-cover img {
width: 100%;
height: auto;padding: 30px 30px 30px 30px;
border-radius: 8px;margin-right: 0px; filter: drop-shadow(0px 10px 10px rgba(0,0,0,0.5));
}
.ebook .content { }
@media (max-width:992px)
{
/*===================================================-----------------------hilosophy---------------------------philosophie */
.ebook h2 { font-size: 30px; padding-top: 80px;line-height: 28px; line-height: 1.2}
.ebook .row.content {
flex-direction: column;
text-align: left;
padding: 0 24px;
}
.ebook h3 { color: #9c6b38; font-size: 30px; line-height: 1.3; letter-spacing: -1px; display: block; margin-top: 24px; margin-bottom: 32px }
}
@media (max-width: 768px) {
.ebook h1 {
font-size: 24px;
line-height: 28px;
padding-top: 20px;
}
.ebook h2 { font-size: 26px; padding-top: 20px;line-height: 28px; }
.ebook .row.content {
flex-direction: column;
text-align: left;
padding: 0 24px;
}
.ebook h3 { color: #7b6758; font-size: 30px; line-height: 1.3; letter-spacing: -1px; display: block; margin-top: 30px; margin-bottom: 30px }
.ebook img {
padding-right: 0;
margin-bottom: 20px;
width: 100%;
height: auto;
}
.ebook p,
.ebook b {
font-size: 18px;
line-height: 1.6;
}
.ebook .subline,
{ }
}
.ebook .b-cover {
margin-right: 15%; /* dein Abstand nach rechts */
}
.ebook .b-cover img {
width: 100%;
max-width: 100%;
height: auto;
padding: 0px 30px; /* dein Innenabstand bleibt */
border-radius: 8px;
display: block;
margin: 0 auto; /* zentriert */
}
@media (max-width: 996px) {
.ebook .b-cover {
margin-right: 0; margin-bottom: 56px;
width: 100%;
}
.ebook .b-cover img {
width: 70%;
margin: 0 auto;
}
}
@media (max-width: 768px) {
.ebook .b-cover {
margin-right: 0; margin-bottom: 56px;
width: 100%;
}
.ebook .b-cover img {
width: 70%;
margin: 0 auto;
}
}
/*--------------------------------------------------------------
# ID Beratung Indexseite
--------------------------------------------------------------*/
#beratung { margin: 0; padding: 0 }
#beratung .container p { text-align: center !important; margin: 0; padding: 0 }
#beratung h2 { font-size: 22px; font-weight: bold; line-height: 1.2; text-align: center; display: block; margin: 0 0 32px; position: relative }
#beratung h2::after { background-color: #555; display: block; margin: 20px auto 0; width: 64px; height: 2px; content: "" }
#beratung h3 { font-size: 30px; line-height: 1.2; display: block; margin: 0px 0 24px }
#beratung p { text-align: center }
.beratung .icon-box { background: #e3e0da; display: flex; margin: 2px; padding: 0; align-items: center; border-radius: 0px; box-shadow: 0 2px 10px rgba(80,60,40,0.06); flex-direction: column; }
.beratung .icon-box:hover {
}
.beratung .beratung-link { color: #212121; font-size: 18px; font-weight: 700; line-height: 70px; text-decoration: none; margin: 3px !important; background-color:#e3e0da; text-align: center; display: block; margin-top: 2px; width: 100%; height: 70px; border-radius: 0px; transition: all 0.3s ease }
.beratung .beratung-link:hover { color: #fff; background-color: #212121; }
.beratung .beratung-link:focus-visible {
outline: 3px solid #d9a066; /* helles Ocker */
outline-offset: 3px; /* etwas Abstand */
}
.beratung .beratung-link-blue { color: #212121; font-size: 20px; font-weight: 700; line-height: 120px; text-decoration: none; background-color: #c3d3df !important; text-align: center; display: block; margin: 0px !important; padding: 0px !important; width: 100%; height: 120px; border-radius: 8px; transition: all 0.3s ease }
.beratung .beratung-link-beige { color: #212121; font-size: 20px; font-weight: 700; line-height: 120px; text-decoration: none; background-color: #e8ceb7 !important; text-align: center; display: block; margin: 2px; width: 100%; height: 120px; border-radius: 8px; transition: all 0.3s ease }
.beratung .beratung-link-rosa { color: #212121; font-size: 20px; font-weight: 700; line-height: 100px; text-decoration: none; background:#f5f1ec !important; text-align: center; display: block; margin: 2px; width: 100%; height: 100px; border-radius: 8px; transition: all 0.3s ease }
.beratung .beratung-link-blau { color: #fff; font-size: 20px; font-weight: 700; line-height: 100px; text-decoration: none; background:#212121 !important; text-align: center; display: block; margin: 2px; width: 100%; height: 100px; border-radius: 8px; transition: all 0.3s ease }
.beratung .beratung-link-blau:hover { color: #fff; font-size: 20px; font-weight: 700; line-height: 100px; text-decoration: none; background:#756557 !important; text-align: center; display: block; margin: 2px; width: 100%; height: 100px; border-radius: 8px; transition: all 0.3s ease }
.beratung .beratung-link-brown { color: #fff; font-size: 20px; font-weight: 700; line-height: 120px; text-decoration: none; height: 120px;background:#a29080 !important; text-align: center; display: block; margin: 2px; width: 100%; border-radius: 8px; transition: all 0.3s ease }
.beratung .beratung-link-brown:hover { color: #fff; font-size: 20px; font-weight: 700; line-height: 100px; text-decoration: none; background:#756557 !important; text-align: center; display: block; margin: 2px; width: 100%; height: 100px; border-radius: 8px; transition: all 0.3s ease }
.beratung .beratung-link-blue:hover,
.beratung .beratung-link-beige:hover,
.beratung .beratung-link-rosa {
color: #ffffff;
background-color: #6A93B0 !important;
text-decoration: none;
}
.beratung .icon-box img { margin: 0; padding: 0; width: 100%; height: 150px; border-radius: 8px; object-fit: cover }
/* Mobile Ansicht: Bild oben, Text unten */
/*--------------------------------------------------------------
# ID Zahlung
--------------------------------------------------------------*/
#features{ }
.features { margin: 3px }
#features h2 { font-size: 22px; font-weight: bold; line-height: 1.2; text-align: center; display: block; margin: 0 0 40px; position: relative }
#features h2::after { background-color: #555; display: block; margin: 20px auto 0; width: 64px; height: 2px; content: "" }
/* Neue Feature-Karten */
.features .feature-card { display: flex; margin: 0; padding: 15px; width: auto; height: auto; border-radius: 50px; flex: 1 1 300px; flex-direction: column; justify-content: stretch; transform: translateY(-2px); transition: transform 0.3s, box-shadow 0.3s }
.features .feature-content { color: #555; background-color: #dce0d9; padding: 25px; border: solid 1px; flex: 1 }
.features .feature-card:hover {
transform: translateY(-4px);
}
.features .feature-card h3 { color: #555 !important; font-size: 20px; line-height: 1.2; margin-bottom: 10px }
.features .feature-card p { color: #555; font-size: 18px; line-height: 1.6; margin: 0 }
#features .btn.btn-black { color: #555 !important; font-size: 16px !important; background-color: #fff !important; padding: 15px; border: solid 1px !important; box-shadow: none !important }
#features .btn.btn-black:hover { color: #fff !important; background-color: #555 !important }
/* Mobil-Layout */
/*--------------------------------------------------------------
# Feat Buttons, die fest in eine Reihe passen und den Platz nutzen auf einer seite
--------------------------------------------------------------*/
#feat .icon-box { }
.feat .icon-box{ color:#212121;background-image:none;background-repeat:repeat;background-attachment:scroll;background-position:0 0;display:flex;padding:10px 20px;align-items:center;border-radius:8px;box-shadow:0px 20px 16px rgba(0,0,0,0.1);transition:ease-in-out 0.3s }
.feat .icon-box img { width: 100% }
.feat .icon-box i { color: #db7093; font-size: 22px; line-height: 1; padding-right: 10px }
/*--------------------------------------------------------------
# FAQ
--------------------------------------------------------------*/
#faq { }
.faq { }
.faq h1 { color: #212121; font-size: 30px; line-height: 1.3; margin-top: 32px; margin-bottom: 16px; position: relative }
.faq h1 span { color:#212121; font-size: 30px; line-height: 1.3; margin-top: 32px; margin-bottom: 16px; position: relative }
.faq h2 { color: #927344; font-size: 26px; line-height: 1.3; margin-top: 32px; margin-bottom: 16px; position: relative }
.faq h3 { font-size: 22px; font-weight: bold; margin-bottom: 24px; position: relative }
.faq .faq-list { padding: 0px 0px 0px 0px }
.faq .faq-list ul { list-style: none; padding: 0 }
.faq .faq-list li + li { margin-top: 16px; padding: 30px; border: solid 1px #906555 }
.faq .faq-list li { background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0 0; padding: 30px; position: relative; border: solid 1px #906555; border-radius: 8px }
.faq .faq-list a { color:#212121 ; font-size: 20px; font-weight: 500; line-height: 24px; display: block; padding: 0 0px; position: relative; outline: none medium }
.faq .faq-list p { color: #F05A28; margin-bottom: 0; padding-right: 0; padding: 32px 0 32px 0; padding-left: 0 }
.faq .faq-list p a { font-size: 16px; font-style: italic; font-weight: bold; display: block; margin-top: 20px; padding-right: 30px; padding-bottom: 0; padding-left: 30px; position: relative; outline: none medium }
.faq .faq-list a:hover { font-style: italic; text-decoration: none }
.faq .faq-list p a:hover { font-size: 16px; font-style: normal }
.faq .faq-list .icon-help { color: #cdb2b3; font-size: 24px; position: absolute; right: 0; left: 20px }
.faq .faq-list .icon-show,.faq .faq-list .icon-close{ font-size:24px;position:absolute;right:0;top:0;}
.faq .faq-list .icon-show{ display:none;}
.faq .faq-list a.collapsed { color: #212121 ; font-size: 20px; transition: 0.3s }
.faq .faq-list a.collapsed:hover { color:#F05A28 ; font-style: italic; text-decoration: none }
.faq .faq-list a.collapsed .icon-show { color: #212121; display: inline-block; padding-top: 3px; }
.faq .faq-list a.collapsed .icon-close { color: #212121; display: none }
.faq-link,
.faq-secondary {
display: inline-block;
margin-top: 6px;
text-decoration: none;
transition: color .3s ease, border-color .3s ease;
}
.foto { background-position: center; margin-top: 40px; margin-bottom: 64px; padding-top: 130px; padding-bottom: 130px; left: 1em; width: 100%; height: 180px; clear: both }
@media (max-width: 767.98px) {
.faq-plus {
display: none;
}
}
/*=================================================MEMBER --- index -------- member-- */
#member { }
.member { margin-bottom: -20px; padding: 0 }
.member-title { font-size: 28px; font-weight: bold; text-align: left; padding-bottom: 40px }
.member-description { font-size: 18px; padding-bottom: 64px }
.member h1 { padding-top: 0; padding-bottom: 40px }
.member h3 { color: #252828; font-weight: bold; text-align: right; padding: 0 10px 40px; width: 100%; height: auto }
.member h4 { color: #252828; font-weight: bold; text-align: right; padding: 0 10px 40px; width: 100%; height: auto }
.member p { font-size: 16px; font-style: normal; font-weight: normal; text-align: left; padding: 5px; float: left }
.member-body { font-size: 18px; margin-bottom: 30px; width: 100%; overflow: hidden; border: solid 1px #dadada; border-radius: 8px; box-shadow: 0px 2px 16px rgba(0,0,10,0.3) }
.member-body a:hover { color: #555; font-size: 20px; font-style: italic; text-decoration: none }
.member-img { vertical-align: baseline; border-radius: 8px }
.member-link { font-size: 16px; font-weight: bold; background-color: #c4ddd7; margin: 0; padding: 16px; border-radius: 0 180px 0 0 }
/*================================--Middle Banner --------------------- ----------------------------Werbung mit Link------- */
.bild-banner-area {
margin-top: 136px;
margin-bottom: 136px;
color: #fff;
overflow: hidden;
}
.bild-banner-area { margin-top: 88px; margin-bottom: 88px }
.bild-banner-item {
background-color: #212121;
background-size: cover;
background-position: center;
border-radius: 0;
padding: 136px 0; /* schöner, moderner Abstand */
}
.bild-banner-content { margin-top: 32px; padding: 15px; width: 100% }
.bild-banner-content h2 { font-size: 24px; margin-top: 24px; width: 100% }
.bild-banner-content p { line-height: 160%; margin-bottom: 24px }
.bild-banner-item img { margin: 15px; padding: 15px; height: auto }
/* =======================================================-Counter Banner Werbung */
.btn-banner {
color: #b1a393 !important;
border: 2px solid #b1a393;
padding: 14px 24px;
border-radius: 8px;
display: inline-block;
transition: 0.3s;
}
.btn-banner:hover {
color: #996666;
border-color: #996666;
text-decoration: none;
}
.object-fit-cover {
object-fit: cover;
}
/* =======================================================
LITTLE BANNER
======================================================= */
#little-banner-area {
}
.little-banner-area {
color: #8a7a6a;
text-align: center;
margin-top: 104px;
margin-bottom: 104px;
z-index: 1;
overflow: hidden;
border-radius: 0;
}
.little-banner-item {
color: #fff;
background-color: #6A93B0;
text-align: center;
padding: 80px 60px 72px 60px;
background-size: cover;
background-repeat: no-repeat;
}
.little-banner-item h2 {
color: #fff;
text-align: center;
}
.little-banner-item h3 {
color: #212121;
text-align: center;
}
.little-banner-content {
color: #8a7a6a;
text-align: right;
margin: 0;
padding: 5px;
}
.little-banner-content .card-body p a { color: #902734; padding: 0px 0px; border: solid 0px }
.little-banner-content p { color: #212121; font-size: 18px; font-style: normal; line-height: 1.6; text-align: center; margin: 0 }
.little-banner-content p a { color: #212121; text-align: center; margin-top: 32px; padding: 16px 32px; border: solid 1px }
.little-banner-content p a:hover {
color: #212121; }
/* =======================================================
MIDDLE BANNER
======================================================= */
#middle-banner-area { margin-top: 104px;
margin-bottom: 104px; }
.middle-banner-area { background-color: #DCD8D4; background-position: center; margin-top: 140px; margin-bottom: 104px }
.middle-banner-item {text-align: center; background-color:#bdb7a9;
}
.middle-banner-content {
text-align: left;
padding: 104px 400px 104px 0px; background-image: linear-gradient(
to right,
rgba(162, 153, 133, 1) 0%,
rgba(162, 153, 133, .65) 35%,
rgba(189, 183, 169, .55) 70%,
rgba(189, 183, 169, 1) 100%
), url("img/91.webp");
background-repeat:no-repeat;
background-position:right center;
background-size:38% auto;
}
.middle-banner-content h1 {
color: #212121;
font-size: 32px;
font-weight: bold;
line-height: 1.2;
margin-bottom: 0;
padding-bottom: 24px;
}
.middle-banner-content-h2 {
color: #fce1d0;
font-size: 32px;
font-weight: bold;
line-height: 1.2;
padding-bottom: 24px;
}
.middle-banner-content h2 {
color: #212121;
font-size: 32px;
font-weight: bold;
line-height: 1.2;
margin-bottom: 0;
padding-bottom: 24px;
}
.middle-banner-content h2 span {
color: #d46235 !important;
font-size: 36px;
font-style: italic;
font-weight: 100;
line-height: 1.2;
}
.middle-banner-content h3 {
color: #ece6df !important;
font-size: 26px;
font-weight: bold;
line-height: 1.2;
padding-bottom: 16px;
}
.middle-banner-content p {
color: #212121;
font-size: 18px;
font-style: normal; padding-bottom: 32px;
line-height: 1.4;
}
.middle-banner-content p span {
color: #C96F4E;
font-size: 20px;
font-style: italic;
line-height: 150%;
}
.middle-banner-content p a {
color:#212121 !important;
font-size: 18px;
font-weight: bold;
display: inline-block;
margin-right: 3px;
margin-bottom: 5px;
padding: 18px 24px;
border: solid 1px;
border-radius: 8px;
}
.middle-banner-content p a:hover {
color:#d46235 !important;
text-decoration: none;
}
.middle-banner-content ul {
margin-left: -35px;
}
.middle-banner-content li {
margin-top: 15px; margin-left: 15px;
}
/* =======================================================
COUNTER BANNER
======================================================= */
#counter-banner-area {
}
.counter-banner-area {
margin-top: 104px;
margin-bottom: 104px;
}
.counter-banner-item{
background-color:#f5f1ec;
text-align:left;
}
.counter-banner-content {
text-align: left;
padding: 104px 200px 104px 0px; background-image:
linear-gradient(
to left,
rgba(195,211,223,.15) 0%,
rgba(210,216,218,.65) 35%,
rgba(230,228,224,.95) 60%,
rgba(245,241,236,1) 100%
),
url("img/91.webp");
background-repeat:no-repeat;
background-position:right center;
background-size:38% auto;
}
.counter-banner-content h2 {
color: #212121;
font-size: 36px;
font-weight: bold;
line-height: 1.2;
padding-bottom: 15px;
}
.counter-banner-content h2 span {
color: #d46235 !important;
font-size: 36px;
font-style: italic;
font-weight: 100;
line-height: 1.2;
}
.counter-banner-content h3 {
color: #fff;
font-size: 21px;
font-weight: normal;
line-height: 1.5;
padding-bottom: 25px;
}
.counter-banner-content p {
color: #212121;
font-size: 18px;
line-height: 150%;
margin: 0 0 16px;
}
.counter-banner-content b {
color: #212121;
font-size: 18px;
font-weight: bold;
line-height: 1.8;
margin: 0 0 16px;
}
.counter-banner-content p a {
color: #4D668E;
font-size: 18px;
display: inline-block;
margin-top: 2px;
margin-right: 2px;
margin-bottom: 2px;
padding: 18px 24px;
border: solid 1px;
border-radius: 8px;
}
.counter-banner-content p a:hover {
color: #212121;
font-style: italic;
text-decoration: none;
border: solid 1px;
border-radius: 8px;
}
.counter-banner-content ul {
margin-left: -35px;
}
.counter-banner-content li {
margin-top: 15px; margin-left: 15px;
}
/* =======================================================
TABLET
======================================================= */
@media (max-width: 991px) {
.little-banner-item {
padding: 80px 0px 72px 0px;
background-size: cover;
background-repeat: no-repeat;
}
.little-banner-area {
margin-top: 64px;
margin-bottom: 64px;
}
.middle-banner-content {
text-align: left;padding: 80px 140px 180px 0px;
}
}
@media (max-width: 786px) {
.middle-banner-content {
background-position: right;
}
.middle-banner-content {
text-align: left;padding: 80px 80px 80px 0px;
}
.counter-banner-content {
text-align: left;
padding: 80px 0px 80px 0px;
}
/* ================================
HERO BEREICH ISOLIERTE VERSION
================================ */
.feature.hero { color: #fff; background: url(img/xm_9356616_s.webp) center; margin: 120px 0; position: relative; bottom: 500px; overflow: hidden }
.feature.hero::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.9),
rgba(0, 0, 0, 0.1)
);
pointer-events: none; /* blockiert keine Klicks */
z-index: 0;
}
.feature.hero .overlay {
position: relative;
z-index: 1; /* über dem Verlauf */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 500px;
text-align: center;
padding: 60px 20px;
border-radius: 3px;
transition: background 0.8s ease-in-out;
}
.feature.hero:hover .overlay {
}
.feature.hero h2 { color: #ece4db; font-size: 36px; font-weight: 600; margin-bottom: 20px }
.feature.hero .highlight { color: #b18d27; font-style: italic; font-weight: 700 }
.feature.hero .lead { color: #ece4db; font-size: 20px; margin-bottom: 30px }
.feature.hero p a { color: #555; font-size: 18px; text-decoration: none; background: #eadbc8; display: inline-block; margin: 10px 5px; padding: 14px 28px; border: solid 1px #ece4db; border-radius: 8px; transition: background 0.3s ease ;opacity: 0.9 }
.feature.hero p a:hover {
background: #d1a437;
}
transition: all 0.3s ease;
}
.feature.hero p a:hover {
background: #c6d8d3;
color: #555;
text-decoration: none;
}
@media (max-width: 768px) {
.feature.hero {
background-attachment: scroll; /* kein Parallax auf Handy */
}
.feature.hero h2 {
font-size: 28px;
}
.feature.hero .lead {
font-size: 16px;
}
}
/*========================================== ------------MORE SEVICES ---- zu finden auf Beratung ----------Boxen untereinander ----------------------------- */
#more-services { margin: 0; padding: 0 }
.more-services { margin: 0 0; padding: 0 0 }
.more-services .subline { color: #b1747d; font-size: 20px; font-style: italic; font-weight: 400; margin-top: 20px; margin-bottom: 40px }
.more-services img { background-color: #efebea; margin: 0px 0; }
.more-services-title { font-size: 28px; font-weight: bold; line-height: 1.4; text-align: center; margin-top: 0; padding-top: 0; padding-bottom: 50px }
.more-services h1 { font-weight: bold; text-align: left; margin: 0; padding: 0 16px 24px 0 }
.more-services h2 { font-weight: bold; padding-top: 0; padding-bottom: 20px }
.more-services h3 { font-weight: bold; padding-top: 0; padding-bottom: 0 }
.more-services .card { padding: 0; position: relative; width: 100%; border: solid 1px #fff }
.more-services .card-body { background-image: none; margin: 0 0 20px; padding: 30px; z-index: 10; border: solid 1px #f0ea55; border-radius: 8px }
.more-services .card-body-last { margin: 0; padding: 0 30px 0; position: relative; width: 100%; border: solid 1px #fff; border-radius: 50% }
.more-services .card-title { font-size: 24px; line-height: 1.2; text-align: left; padding: 50px 0 0 }
.more-services .card-bodys { background-color: #fff; margin: 0px; padding: 25px 50px; border-radius: 8px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); }
.more-services .card-title a { font-size: 24px; line-height: 16px; margin-bottom: 0; padding-bottom: 0 }
.more-services .card-title h2 { font-size: 18px; font-weight: bold; line-height: 32px; text-align: left }
.more-services .card-title h3 { font-size: 18px; font-weight: bold; line-height: 32px; text-align: left; margin-bottom: 0; padding-top: 20px; padding-bottom: 20px }
.more-services .card { font-size: 18px; line-height: 24px; padding: 0 0 0 }
.more-services .card-text { font-size: 18px; line-height: 1.5; padding: 0 0 10px }
.more-services .card-text a { color: #212529; font-size: 18px; line-height: 1.6 }
.more-services .card-text a:hover { color: #212529; font-size: 18px; text-decoration: none }
.more-services .read-more {padding-top: 20px; padding-bottom: 20px; }
.more-services .read-more a { font-size: 16px; font-weight: normal; background-color: #f4f4f4; padding: 20px; border: solid 1px #b8a7bc; border-radius: 8px ; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: 0.4s }
.more-services .read-more a:hover { color: #555; font-size: 16px; font-weight: bold; text-decoration: none; background-color: #f4f4f4; padding: 24px 40px; border: solid 1px #b9b9a6; border-radius: 8px ; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: 0.4s }
.more-services .reads-more a { color: #FAF0E6; font-size: 16px; font-weight: bold; background-color: #D84171; padding: 20px; border: solid 1px #D84171; border-radius: 8px; transition: 0.4s }
.more-services .reads-more a:hover { color: #b8a7bc; font-size: 16px; text-decoration: none; background-color: #555; border-radius: 8px }
.more-services .subline { font-size: 20px; }
.more-services-title { font-size:24px; }
.more-services h1 { font-weight: 500; letter-spacing: -0.3px; margin-top: 8px; margin-bottom: 8px; padding-bottom: 0 }
.more-services h2 { margin-bottom: 0; padding-top: 16px; padding-bottom: 24px }
.more-services h3 { }
.more-services .card-title { font-size: 24px; }
.more-services .card-title a { font-size: 24px; }
.more-services .card-title h2 { }
.more-services .card-title h3 { }
.more-services .read-more a,
.more-services .read-more a:hover,
.more-services .reads-more a,
.more-services .reads-more a:hover {
font-size: 14px;
}
@media (max-width: 768px) {
.more-services h2 {
font-size: 20px;
padding-top: 16px;
padding-bottom: 16px;
}
.more-services h3 {
font-size: 18px;
}
.more-services .col-lg-6,
.more-services .col-md-6,
.more-services .col-md-12 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.more-services .card {
margin-bottom: 14px;
}
.more-services .card-bodys {
margin-left: 0 !important;
margin-right: 0 !important;
padding: 18px 14px;
}
}
/*============================================================-port-filter ----------fürr die Werbung im BlogWerbung
---------------------
-moz-box-shadow: 10px 10px 50px #fff; -webkit-box-shadow: 10px 10px 50px #2c3531; box-shadow: 10px 10px 50px #555
-----------------------------------------*/
.port-filter { background-color: #f4f4f4; text-align: left; margin: 80px 20px; padding: 56px 0px 56px 0px; }
.port-filter .label {
font-size: 16px;
font-weight: 600;
color: #555;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.port-filter-h3 { color: #111 !important; margin: 8px 0; padding: 0 }
.port-filter p { color: #222; font-size: 18px; line-height: 1.65; margin: 0 0 8px }
.port-filter .meta {
font-size: 16px;
color: #2B4252;
font-weight: 600;
margin-bottom: 25px;
}
.port-filter .cta-btn { color: #555 !important; font-size: 17px; font-weight: 600; text-decoration: none; background: #d9d5cf; display: inline-block; margin-right: 12px; padding: 12px 30px; border: none; border-radius: 8px; transition: 0.2s }
.port-filter .cta-btn:hover {
background: #a8854f;
}
.port-filter.book-card {
max-width: 1100px;
margin: 80px auto;
background-color: #fff; /* neutral, aber nicht schlafmützig */
border-top: 2px solid #c1121f;
border-bottom: 2px solid #c1121f;
text-align: left;
}
.port-filter.book-card .label {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
color: #555;
margin: 0 0 10px 0;
}
.port-filter.book-card h2 { color: #c66 !important; font-size: 32px !important; font-weight: 500 !important; line-height: 1.2; margin: 0px !important; padding: 0px !important }
.port-filter.book-card p {
font-size: 18px;
line-height: 1.6;
color: #222;
margin: 0 0 14px 0;
}
.port-filter.book-card .meta {
font-size: 15px;
font-weight: 600;
color: #2B4252;
margin-bottom: 22px;
}
.port-filter.book-card .divider {
border-top: 1px solid #c7c2bd;
margin: 10px 0 22px 0;
}
.port-filter.book-card .content-btn {
display: inline-block;
margin-right: 10px;
margin-bottom: 6px;
padding: 10px 24px;
background-color: #555; /* später einfach durch Beere/Orange ersetzen */
color: #fff;
font-size: 16px;
font-weight: 600;
text-decoration: none;
letter-spacing: 0.3px;
border-radius: 8px;
transition: 0.2s;
}
.port-filter.book-card .content-btn:hover {
background-color: #212121;
}
/*--------------------------------------------------------------
# ID Portfolio Bilder, Bücher auf Seite Buchempfehlungen
--------------------------------------------------------------*/
#portfolio { margin: 0; padding: 0 }
.portfolio{ margin-top:30px;margin-bottom:50px }
.portfolio-title { font-size: 22px;font-weight: bold; padding-bottom: 40px }
.portfolio #portfolio-flt { color: #a8854f; list-style: none; margin: 0 0 20px; padding: 8px 16px 8px 0; border: solid 1px }
.portfolio #portfolio-flt li{ color:#212529;font-size:14px;line-height:16px;text-align:left;cursor:pointer;display:inline-block;margin-bottom:3px;margin-left:2px;padding:10px 20px;border:solid 1px;border-radius:8px }
.portfolio #portfolio-flt li.filter-active{ color:#fff;font-size:14px;line-height:16px;background:#c4dbdb;margin-bottom:3px;margin-left:2px;padding:12px 20px 10px;border:solid 1px #c4dbdb;border-radius:8px }
.portfolio #portfolio-flt li:hover { font-style: italic; text-decoration: none; background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0 0; padding: 12px 20px; border: solid 1px #ccc }
.portfolio #portfolio-flters { text-align: left; list-style: none; margin: 0 auto 70px; padding: 0 }
.portfolio #portfolio-flters li { color: #212529; font-size: 16px; line-height: 16px; cursor: pointer; display: inline-block; margin-right: 1px; margin-bottom: 4px; padding: 8px 16px; border: solid 2px #a8854f; border-radius: 8px }
.portfolio #portfolio-flters li:hover,.portfolio #portfolio-flters li.filter-active { color: #fff; text-decoration: none; background: #1e1e1e; padding: 8px 16px; border: solid 2px #555 }
.portfolio #portfolio-flters li:last-child{ margin-right:0;}
.portfolio .portfolio-item{ margin-bottom:30px;}
.portfolio .portfolio-item .portfolio-info{ opacity:0;position:absolute;left:30px;right:30px;bottom:0;z-index:3;transition:all ease-in-out 0.3s;background:rgba(255,255,255,0.9);padding:16px;}
.portfolio .portfolio-item .portfolio-info h4{ color:#212529;font-weight:600 }
.portfolio .portfolio-item .portfolio-info p{ color:#212529;font-size:12px;line-height:22px;margin-bottom:0 }
.portfolio .portfolio-item .portfolio-info .preview-link,.portfolio .portfolio-item .portfolio-info .details-link{ position:absolute;right:40px;font-size:24px;top:calc(50% - 16px);color:#2b2b2b;}
.portfolio .portfolio-item .portfolio-info .preview-link:hover,.portfolio .portfolio-item .portfolio-info .details-link:hover{ color:#c4dbdb }
.portfolio .portfolio-item .portfolio-info .details-link{ right:10px;}
.portfolio .portfolio-item .portfolio-links{ text-align:left;position:absolute;z-index:3;right:0;left:0;opacity:0;transition:all ease-in-out 0.3s }
.portfolio .portfolio-item .portfolio-links a{ color:#fff;margin:0 2px;font-size:28px;display:inline-block;transition:0.3s;}
.portfolio .portfolio-item .portfolio-links a:hover { color: #6c4675; text-decoration: none }
.portfolio .portfolio-item:hover .portfolio-info{ opacity:1;bottom:20px;}
/*RUB CARD---------------------------
eingesetzt auf Blog -webkit-box-shadow: 10px 10px 6px 0px rgba(219, 219, 219, 0.75);
-moz-box-shadow: 10px 10px 6px 0px rgba(219, 219, 219, 0.75);
box-shadow: 10px 10px 6px 0px rgba(219, 219, 219, 0.75);
------------------------------------------------- */
/* =========================================
Global Card Styles
========================================= */
.rub .links { padding-top: 24px; padding-bottom: 0; }
.rub .links-intro { color: #212121; margin-top: 16px; margin-bottom: 32px; }
/* == box */
.rub .card { background-color: #fff; display: flex; margin-right: 0; margin-bottom: 40px; margin-left: 0; padding: 0; width: 100%; height: auto; border-style: solid; border-width: 0; border-color: #fff #fff #fff ; -moz-box-shadow: 10px 10px 50px #ccc; -webkit-box-shadow: 10px 10px 50px #ccc; box-shadow: 10px 10px 50px #ccc; flex-direction: column }
.rub .card:hover { display: flex; margin-right: 0; margin-bottom: 40px; margin-left: 0; padding: 0; width: 100%; height: auto }
.rub .card h2 { color: #212121; font-size: 20px; font-weight: bold; line-height: 1.4; text-align: left; margin: 0; padding: 25px 0 15px }
.rub .card h2 span { color: #212121; font-size: 32px; font-weight: bold; line-height: 1.1; background-color: rgba(248, 182, 139, 0.7); text-align: left; margin: 0; padding: 20px; border-radius: 150% }
.rub .card h2 a::before { position: absolute; z-index: 1; content: ''; inset: 0 }
.rub .card h2 a {color: #212121; font-size: 20px; font-weight: 600; line-height: 1.3; text-align: left; margin: 0; padding: 0 }
.rub .card h2 a:hover { color: #212121; font-size: 20px; font-weight: bold; line-height: 1.4; text-decoration: none; text-align: left; margin-bottom: 0 }
.rub .card h3 { color: #212121; font-size: 22px; font-weight: bold; line-height: 1.3; text-align: center; margin: 0; padding: 20px 0 }
.rub .card h3 span { color: #212121; font-size: 30px; font-weight: bold; line-height: 1.1; background-color: #e1875a; text-align: center; margin: 0; padding: 60px; border-radius: 150% }
.rub .card h4 { color: #212121; font-size: 18px; font-weight: bold; line-height: 1.3; text-align: left; margin: 0; padding: 15px 0 10px }
.rub .card h4 a::before { line-height: 150%; position: absolute; z-index: 1; content: ''; inset: 0 }
.rub .card h4 a { font-size: 18px; line-height: 150%; text-align: left; margin: 0; padding: 0 }
.rub .card h4 a:hover { color: #4d4d4d; font-size: 18px; line-height: 150%; text-decoration: none; background-color: #fff; text-align: left; margin-bottom: 0 }
.rub .card p { color: #212121; font-size: 18px; font-weight: normal; line-height: 1.4; margin-top: 0; margin-bottom: 0; padding-top: 8px; padding-bottom: 30px }
.rub .card p a { color: #555; font-size: 18px; font-weight: normal; line-height: 1.4; margin: 0; padding: 32px 0 0 }
.rub .card p span { color: #212121; font-size: 16px; font-weight: bold; line-height: 150%; text-align: left; margin-top: 30px; padding: 15px 0px; border-radius: 15px }
.rub .card li {display: none; }
.rub .card:focus-within {
box-shadow: 0 0 0 0 4px black;
}
.rub .card:focus-within :focus {
box-shadow: none;
outline: none;
border: none;
}
.rub .card img {
}
.rub .card__img-wrapper { overflow: hidden; order: -1 }
.rub .card__img-wrapper img { display: block; padding-top: 0; padding-bottom: 0; padding-left: 0; height: auto; border-radius: 0px 0px 0px 0px }
.rub .card-texx { font-weight: bold; text-align: left; padding: 0 32px; border-left: 30px solid #87a8c0 }
.rub .card-textt p { color: #555; font-size: 24px; font-weight: bold; line-height: 150%; text-align: left; padding-top: 20px; padding-bottom: 20px }
.rub .card-textt h2 a { color: #555; font-size: 18px !important; font-weight: normal !important; line-height: 1.3; text-align: left }
.rub .card-textt h3 { color: #555; font-size: 24px; font-weight: bold; line-height: 1.3; background-color: #ec6469; text-align: left; padding: 20px 50px }
.rub .card-textt h4 { font-size: 18px; line-height: 1.3; padding: 15px }
.rub .card-textt h4 a { color: #555; font-size: 18px !important; font-weight: normal !important; line-height: 1.3; text-align: left }
.rub .card-texts { padding: 25px }
/*RUB --------------------------RUB --------------fÃ Æ Ã â¬ "!à ⬠aà ¼r Cards aller Art ------------------------------------------ */
.rub .member-bg { font-size: 18px; background-color: #FFF; text-align: left; margin: 0 0 60px; padding: 0 0 30px; width: 100%; overflow: hidden; border-radius: 2px; }
.rub .member li { font-size: 18px; background-color: #fff; text-align: left; margin: 0 0 60px; padding: 0 0 30px; width: 100%; overflow: hidden; -moz-box-shadow: 10px 10px 50px #fff; -webkit-box-shadow: 10px 10px 50px #2c3531; border-radius: 2px; box-shadow: 10px 10px 50px #59656f }
#rub { margin-bottom: 0; padding-bottom: 0px }
.rub h1 { color: #555; font-size: 32px; font-weight: bold; text-align: center; margin: 0; padding: 0 32px 24px 0 }
.rub .member-bg.old { font-size: 18px; text-align: left; margin: 0 0 60px; padding: 0 0 30px; width: 100%; overflow: hidden; border-radius: 2px; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; }
.rub .member-bg-last { font-size: 18px; background: #fff; text-align: left; margin: 0 0 0; padding: 0 0 30px; width: 100%; overflow: hidden; border: solid 1px #dadada; border-radius: 2px; box-shadow: 0px 2px 15px rgba(0,0,10,0.3) }
.rub .member-bg a { }
.rub .member-bg a:hover { color: #212121; font-style: italic; text-decoration: none; background: #fff }
.rub .rub-bg img { border-radius: 5px }
/* TEAM ----------- member-bg */
.rub .member-dingbat { font-size: 25px; text-align: left; margin: 0; height: 20px }
.rub .member-info { text-align: left; width: 100%; overflow: hidden }
.rub .member-info h2 { color: #555; font-size: 20px; font-weight: bold; padding: 20px 20px 10px }
.rub .member-info h3 { color: #fff; font-size: 26px; font-weight: bold; text-align: center; letter-spacing: -1px; margin-bottom: 0; padding: 15px 5px; width: 100%; overflow: hidden }
.rub .member-info h4 { color: #555; font-size: 18px; font-weight: bold; line-height: 150%; text-align: center; padding: 20px 15px 10px; width: 100%; overflow: hidden }
.rub .member-info h3 span { color: #555; font-size: 16px; font-weight: normal; text-align: center; padding: 15px; width: 100%; overflow: hidden }
.rub .member-info p { font-size: 18px; font-weight: normal; line-height: 1.3; margin-top: 0; padding: 15px 15px 0px 20px }
.rub .member-info:hover { color: #212121; font-style: italic; text-decoration: none; background: #fff }
.rub .member-info text { font-size: 18px; line-height: 1.3; margin-top: 0; padding: 0 20px 10px }
.rub .member-text { color: #555; font-size: 16px; line-height: 150%; margin-right: 0; margin-bottom: 0; margin-left: 0; padding: 0 20px 20px }
.rub .member-readmore { font-size: 14px; font-weight: bold; text-align: left; margin-top: 0; padding: 0 20px }
.rub .member-readmore:hover { color: #db7093; font-style: italic; text-align: left; margin-top: 0; padding-top: 0; padding-right: 15px; padding-left: 15px }
.rub .member-info span { color: #555; font-size: 14px; line-height: 1; margin: 30px 0 0 }
@media (max-width: 768px) {
.rub .card-texts {
font-size: 20px;
font-weight: bold;
line-height: 1.3;
text-align: left;
padding: 16px 15px 32px 15px;
}
.rub .card p { color: #555; font-size: 18px; font-weight: normal; line-height: 150%; margin-top: 0; margin-bottom: 0; padding-top: 16px; padding-bottom: 0 }
.rub .card p a { color: #555; font-size: 18px; font-weight: normal; line-height: 1.4; margin: 0; padding: 40px 0 40px 0 }
.rub .card img {
height:auto !important;
display:block !important;
margin-left:auto !important;
margin-right:auto !important;
}
}}
/* ------------------ SERV -------------- Beratungsangebot Sucht usw---------------------------------------------------- *//* ------------------ SERV -------------- Beratungsangebot Sucht usw---------------------------------------------------- */
/* ------------------ SERV -------------- Beratungsangebot Sucht usw---------------------------------------------------- */
#serv { }
.serv { margin-bottom: -24px ; padding: 0}
.serv h1{ font-size:26px;font-weight:700;text-align:left;margin-top:0;margin-bottom:0;padding-bottom:20px }
.serv h2 { font-size: 28px; font-weight: bold; line-height: 30px; text-align: center; padding: 0 0 40px }
.serv .serv-title { padding: 0px 0 20px 0; }
.serv p { font-size: 18px; line-height: 150%; text-align: left; margin-bottom: 0; padding-top: 0; padding-bottom: 16px; position: relative }
.serv .icon-box { background-color: #fff; text-align: center; margin-bottom: 40px; padding: 0 1px 0 0; border-color: #212121; border-radius: 5px; text-align:center; transition: all ease-in-out 0.3s }
.serv .icon-box img { text-align: left; margin: 0; padding: 0; width: 100%; height: auto; border-radius: 5px }
.serv .icon-box .icon{ display:flex;margin:0 auto 0;padding-top:0;position:relative;align-items:center;justify-content:center;transition:ease-in-out 0.3s }
.serv .icon-box .icon i{ font-size:24px;padding-top:16px;padding-bottom:16px;position:relative;transition:0.5s }
.serv .icon-box h3 { color: #242424; font-size: 18px; background-color: #fff; padding: 16px 16px 0 }
.serv .icon-box h3 a { color: #212529; font-size: 18px; line-height:26px;font-weight: bold; text-align: center; transition: ease-in-out 0.3s ; }
.serv .icon-box p { font-size: 18px; font-weight: bold; line-height: 150%; background-color: #cebbb5; margin-bottom: 0; padding: 16px }
.serv .icon-box a { text-decoration: none; margin: 0; padding: 0; border-color: #fff }
.serv .icon-box:hover { text-decoration: none; border-color: #fff; box-shadow: 0px 0 35px 0 rgba(0,0,0,0.25); }
.serv .icon-box span{ color:#fff;font-size:16px;font-weight:normal;background-color:#c4dbdb;margin-top:10px;padding:2px;border-radius:5px }
/* ------------------ SERV -------------- Beratungsangebot Sucht usw---------------------------------------------------- */
#service { }
.service { }
.service-title { font-size: 24px; font-weight: bold; line-height: 30px; text-align: center; margin-bottom: 64px; padding: 0 0 0 }
.service h2 { font-size: 26px; font-weight: bold; line-height: 30px; text-align: center; padding: 0 0 50px }
.service h3 { font-size: 22px; font-weight: bold; line-height: 30px; text-align: left; letter-spacing: -1; margin: 0 0 20px }
.service-img { -o-transform: scale(1.0); -webkit-transform: scale(1.0); border-radius: 5px; transform: scale(1.0) }
.service-content { font-size: 18px; line-height: 150%; text-align: left; margin-bottom: 0; padding-top: 0; padding-bottom: 50px; position: relative }
.service p { font-size: 18px; line-height: 150%; text-align: left; margin-bottom: 0; padding-bottom: 16px; position: relative }
.service p a{ color:#212529;font-size:18px;text-align:left }
.service p a:hover { font-style: italic; text-decoration: none }
.service .member-bg { text-align: right; margin: 0; padding: 10px 8px 40px; }
.service .member-info {border-radius: 5px }
.service .member-info-img { -o-transform: scale(1.0); -webkit-transform: scale(1.0); border-radius: 5px; transform: scale(1.0) }
.service .member-info-img:hover {
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);transition: ease-in-out 0.3s ;
}
.service .member-info p { font-size: 18px; font-style: normal; font-weight: bold; line-height: 150%; text-align: left; padding: 5px; float: left }
/*--------------------------------------------------------------
# team für Selbsthilfeangebote auf Seite Selbsthilfeangebote
--------------------------------------------------------------*/
#team { }
.team { margin-bottom: -20px }
.team .icon-box { text-align: center; margin: 0 0 20px; overflow: hidden; border-radius: 16px
; box-shadow: 0 6px 14px rgba(0,0,0,0.08); transition: transform 0.3s ease, box-shadow 0.3s ease }
.team .icon-box a { font-size: 18px; box-shadow: 0 10px 20px rgba(0,0,0,0.12); transform: translateY(-3px) }
.team .icon-box:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0,0,0,0.12);
}
.team .icon-box img { display: block; margin: 0 auto; width: 100%; height: 120px; object-fit: cover }
.team .team-link { color: #212121; font-size: 20px; font-weight: 600; text-decoration: none; background-color: #edbba9 ; display: block; padding: 48px 24px; border-top: 1px solid #eee; transition: color 0.3s ease; }
.team .team-link:hover {
/* Ocker beim Hover */
font-style: italic;background-color: #f1ede6;
}
.team span { font-size: 22px; line-height: 36px; text-align: center; margin: 0; padding: 0 30 0 30px; position: relative }
.team p { font-size: 18px; line-height: 150%; padding-bottom: 16px }
.team p a{ color:#212529;font-size:18px;text-align:left }
.team p a:hover { font-style: italic; text-decoration: none }
/*==================================================== Tetimonials ______________ Text */
#testimonials{ }
.testimonials { }
.testimonials h1 { font-size: 30px; font-weight: bold; line-height: 1.2; text-align: left; padding-top: 0;}
.testimonials h2 { font-size: 26px; font-weight: bold; line-height: 1.4; padding: 0 }
.testimonials h3 { font-size: 24px; line-height: 1.4; padding-top: 20px; padding-bottom: 20px }
.testimonials p { font-size: 18px; }
/*------------------------------------------ Testimonials ______________ Sieben Schritte */
.testimonials .testimonials-itemss { background-color: transparent; background-repeat: no-repeat; background-position: left top; text-align: left; margin-top: 0; margin-bottom: 30px; padding: 45px; overflow: hidden; border: solid 1px #d9d5cf; border-radius: 5px; box-shadow: 0px 2px 16px rgba(0,0,10,0.3) }
.testimonials .testimonials-itemss a:hover { color: #555; font-style: italic; text-decoration: none; background-color: white }
.testimonials .testimonials-itemss-last { text-align: left; margin-top: 0; margin-bottom: 30px; padding: 20px; overflow: hidden; border-style: solid; border-width: 1px 1px 1px 20px; border-color: #dadada #dadada #dadada #c4ddd7; border-radius: 5px; box-shadow: 0px 2px 16px rgba(0,0,10,0.3) }
.testimonials .testimonials-itemss span { font-size: 16px; font-weight: bold; line-height: 32px; background-color: #fff; padding: 5px ; }
.testimonials .testimonials-itemss-last span { font-size: 14px; font-weight: bold; line-height: 32px; background-color: #ed969e; padding: 10px; border-radius: 5px }
.testimonials .testimonials-img { background-color: #e1e1e1; margin-top: 30px; margin-right: 40px; width: 120px; height: 64px; float: left; border-radius: 50px }
.testimonials .testimonials-itemss-last img { background-color: #e1e1e1; margin-top: 30px; margin-right: 40px; width: 120px; height: 64px; float: left; border-radius: 50px }
.testimonials .testimonials-itemss h2 { font-size: 22px; line-height: 1.3; margin: 5px 0 0; padding-top: 0px; padding-bottom: 0px }
.testimonials .testimonials-itemss h3 { font-size: 24px; font-weight: bold; line-height: 1.4; margin: 5px 0 0; padding-top: 20px; padding-bottom: 20px }
.testimonials .testimonials-itemss-last h2 { font-size: 22px; line-height: 1.3; margin: 5px 0 0; padding-top: 0; padding-bottom: 0 }
.testimonials .testimonials-itemss .testimonial-itemss-last p { font-size: 18px; line-height: 26px; padding-left: 0 }
.testimonials .testimonials-itemss a{ color:#212121;font-size:18px;line-height:26px }
.testimonials .testimonial-itemss a:hover { font-size: 18px; font-style: italic; line-height: 26px; text-decoration: none }
.testimonials .testimonials-itemss p a{ color:#212121;font-size:18px;line-height:26px }
.testimonials .testimonials-itemss p a:hover { font-size: 18px; font-style: italic; line-height: 26px; text-decoration: none }
.testimonials .testimonials-item{ padding:5px 10px 10px }
.testimonials .testimonials-item a { font-weight: normal; margin: 0; padding-top: 0; padding-bottom: 0; float: left; clear: both }
.testimonials .testimonials-item a:hover { font-style: italic; text-decoration: none; padding-left: 3px }
.testimonials .testimonials-item p { font-size: 18px; line-height: 26px; margin: 0; padding: 0 }
.testimonials .testimonials-item h3{ color:#212121;font-size:22px;font-weight:bold;line-height:28px;margin:0;padding-top:0;padding-bottom:10px }
.testimonials .testimonials-item h3 a{ color:black;font-size:26px;line-height:30px;float:left;clear:both }
.testimonials .testimonials-itemss img { width: 100%; height: auto }
.testimonials .testimonials-itemss h4 { font-size: 18px; line-height: 1.4; background-color: #b2cde4; margin: 5px 0 0; padding-top: 0; padding-bottom: 0 }
.testimonials .testimonials-itemss-last h4 { font-size: 18px; line-height: 1.4; margin: 5px 0 0; padding-top: 0; padding-bottom: 0 }
.testimonials .testimonials-itemss h4{ color:#212121;font-size:20px;font-weight:bold;line-height:28px;margin:0;padding-top:0;padding-bottom:30px; }
.testimonials .testimonials-itemss h4 a{ color:black;font-size:20px;line-height:30px; background-color:#fff; padding: 20px; border-radius: 50px }
/* ============================================Testimonal---Partnerseiten------------------------- ------------------------------------------------------- */
#testimonial{margin-bottom:-30px; padding: 0px}
.testimonial h1 { font-size: 30px; font-weight: bold; line-height: 1.2; text-align: left; padding-top: 0; padding-bottom: 30px }
.testimonial h2 { font-size: 26px; line-height: 26px }
.testimonial h3 { font-size: 26px; font-weight: bold; line-height: 1.4; padding-bottom: 24px }
.testimonial p { font-size: 18px; margin-bottom: 24px }
/* -----------------------------------------------------------Thema Selbsthilfegruppen ------Sieben Schritte --was erwartet mich--------------------------------------------- */
.testimonial .testimonial-item { text-align: left; margin-top: 0; margin-bottom: 30px; padding: 20px 40px; overflow: hidden; border: solid 2px #ede9e2; border-radius: 5px; background-color: #ede9e2 }
.testimonial .testimonial-item span { color: #4a433e; font-size: 16px; font-weight: bold; line-height: 32px; background-color: #E29578; padding: 10px; border-radius: 5px }
.testimonial .testimonial-item span:hover { color: #fff; font-size: 16px; font-weight: normal; line-height: 32px; background-color: #212121; padding: 10px; border-radius: 5px }
.testimonial .testimonial-item img { background-color: #e1e1e1; margin-top: 30px; margin-right: 40px; width: 120px; height: auto; float: left; border-radius: 50px }
.testimonial .testimonial-item h2 { font-size: 22px; line-height: 1.3; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 30px; padding-bottom: 0 }
.testimonial .testimonial-item-last { text-align: left; margin-top: 0; margin-bottom: 0; padding: 0 30px; overflow: hidden; border-style: solid; border-width: 1px 1px 1px 20px }
.testimonial .testimonial-item h3 { font-size: 22px; line-height: 1.3; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 30px; padding-bottom: 0 }
.testimonial .testimonial-item-last h3 { font-size: 22px; line-height: 1.3; margin: 0; padding-top: 30px; padding-bottom: 0 }
.testimonial .testimonial-item p { font-size: 18px;color: #4a433e; line-height: 26px; padding-top: 20px; padding-bottom: 20px }
.testimonial .testimonial-item a { font-size: 18px; font-weight: bold; line-height: 26px }
.testimonials .testimonial-item a:hover { color: #ede9e2; font-style: italic; text-decoration: none; background-color: #555; padding-left: 3px }
/* ===============================================Allgemeiner Bereich */
#thema { margin: 0; padding: 0 }
.thema { margin: 0; padding: 0 }
.thema h2 {
font-size: 24px;
font-weight: bold;
line-height: 1.4;
padding-top: 16px;
padding-bottom: 0;
}
.thema h3 {
font-size: 18px;
font-weight: bold;
line-height: 1.4;
padding-top: 16px;
padding-bottom: 0;
}
.thema p {
font-size: 18px;
line-height: 1.6;
}
#thema a span { color: #666; font-size: 14px; line-height: 1.6; margin-left: 10px; padding: 5px; border: solid 1px; border-radius: 20px }
/* Themen-Link-Kacheln */
.thema-link {
display: block; font-size: 18px;
padding: 1.5rem;
text-align: center;
font-size: 1.1rem;
font-weight: 500;
border-radius: 5px;
text-decoration: none;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.thema-link:hover {
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}
.thema .thema-text { }
.thema .thema-text h4 { color: #8d8175; font-size: 26px; line-height: 32px; margin: 0; padding: 40px 0 32px }
.thema .thema-text h2 { font-size: 24px; line-height: 32px; margin: 0 0 4px; padding: 0 }
/* Farbklassen */
.link-sand { color: #5d4a1f; background-color: #f6f1e9; border-bottom: 1px #555 }
.link-sand:hover {
background-color: #efe4d4;
color: #555;
}
.link-sage {
background-color: #e6f3ec;
color: #2e5e4e;
}
.link-sage:hover {
background-color: #d1e7db;
color: #555;
}
.link-rose {
background-color: #fae5e9;
color: #7a2f3a;
}
.link-rose:hover {
background-color: #f5d0d8;
color: #555;
}
/* Buch-Link-Stil */
.book-links p { margin: 0 0 16px }
.book-links a {
font-size: 18px;
color: #555;
text-decoration: none;
}
.book-links a:hover {
text-decoration: underline;
color: #3e3315;
}
@media (max-width:992px)
{
/*===================================================-----------------------hilosophy---------------------------philosophie */
.testimonials .testimonial-itemss img{ float:none, padding: 20px 0 0 0 }
.testimonials .testimonial-itemss p{ color:#555;padding-left:0px;}
.serv .icon-box h3 a { font-size: 20px; }
.team .member .member-info p{ font-size:18px;}
.team h3{ padding:20px 0px 0px;}
.team .member-info { font-size: 20px; text-align: right;}
.team .member .member-info h3 { font-size: 20px; }
}
@media (max-width:768px)
{
.card { margin-bottom: 30px !important; padding: 5px !important }
.more-services .card-bodys-last { margin-bottom: 40px; padding: 0 16px 0px 16px;}
.portfolio-details .portfolio-info{ position:static;margin-top:30px;}
.portfolio .portfolio-item img{ width:70% }
.testimonials .testimonial-itemss p{ color:#212121;padding-left:0px;}
.team .member .member-info h3 { font-size: 20px; }
}
@media (max-width:578px)
{
.more-services .card-bodys-last {
margin-bottom: 24px;
padding: 0 16px 0px 16px;
}
.more-services .card-bodys {
margin-bottom: 0px;
padding: 24px 8px;
}
}
@media (max-width:768px)
{
.more-services .card-bodys-last {
margin-bottom: 24px;
padding: 0 16px 0px 16px;
}
.more-services .card-bodys {
margin-bottom: 0px;
padding: 24px 12px;
}
}
/* ==ID=BLOG alone -----zu finden auf seite Beratung und Gesprächsbegleitung wenn sitebar eingefügt werden soo, im Zusammenspiel mit BLOG---------------blog-alone------------------------------------------------------------------ */
#blog-alone { margin: 0; padding: 0 }
.blog-alone { font-size: 18px; line-height: 1.7; text-align: left; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; width: 100% }
.blog-alone h1 { font-size: 32px; font-weight: 700; line-height: 1.25; letter-spacing: -0.2px; margin-top: 8px; margin-bottom: 16px; padding-bottom: 0 }
.blog-alone h2 { font-size: 26px; line-height: 1.5 }
.blog-alone h3 { font-size: 22px; line-height: 1.2; margin-top: 62px; margin-bottom: 16px }
.blog-alone h4 { font-size: 20px; line-height: 1.2; margin-bottom: 16px }
.blog-alone .subline { color: #d46235; font-size: 20px; font-style: italic; font-weight: 400; margin-bottom: 30px }
.blog-alone .text { margin: 0; width: 70%; height: auto }
.blog-alone img { padding-top: 8px; width: 100%; height: auto; vertical-align: middle; border-style: none; border-radius: 5px; }
.blog-alone-buttonzone { font-size: 18px; font-style: bold; padding-top: 40px }
.blog-alone p { font-size: 18px; font-weight: normal; position: relative }
.blog-alone p a { font-size: 18px; font-weight: normal; text-decoration: none; }
.blog-alone a:hover { color: #555; font-size: 18px; font-style: italic; font-weight: bold; text-decoration: none }
.blog-alone .content-link { text-align: left; margin: 0 auto; padding-top: 30px; padding-right: 0; padding-bottom: 0 }
.reviews-image { height: auto; max-width: 100% }
/* --icon boxes---*/
.blog-alone blockquote { font-size: 18px; font-style: italic; line-height: 28px; background-color: white; text-align: left; margin-top: 48px; margin-right: 0; margin-bottom: 48px; padding: 15px; position: relative; overflow: hidden; border-style: solid; border-width: 20px; border-color: #fbf6ef #fff #fff #ead7c3 }
.blog-alone blockquote p { font-size: 18px; line-height: 28px; margin: 0; padding: 16px 0 16px 10px }
@media (max-width: 640px) {
.blog-alone-buttonzone .btn {
display: block;
width: 100%;
max-width: 460px;
margin: 10px auto;
}
}
/*============================================================--------------blog ------------------------ blog ------------ */
#blog { }
.blog { color: #212121; font-size: 18px }
.blog a { color: #212121 ; font-size: 18px; text-decoration: none }
.blog a:hover { }
.blog h1 { font-size: 32px; font-weight: bold; line-height: 1.2; text-align: left; padding-bottom: 24px }
.blog .content{ margin-bottom:0px }
.blog .content p{ font-size:18px;line-height:21px;text-align:justify }
.blog .blog-author { margin-bottom: 30px; padding: 20px; box-shadow: 0 4px 16px rgba(0,0,0,0.1) }
.blog img { margin-bottom: 0px; width: 100%; height: auto }
.blog .titel { margin-right: auto; margin-left: auto; padding-top: 90px; padding-bottom: 20px }
.blog .titel h1{ font-size:26px;line-height:30px }
.blog .media-body {padding: 0px 32px;margin: 4px 0px;
}
.blog .media-body h2 {font-size: 26px !important;padding: 8px 0px !important; margin: 0px !important;
}
/* PC */
.blog .blog-author { background: #f5f1ec; margin: 60px 0 0; padding: 20px; border: solid 1px #c3d3df }
.blog .entry .blog-author {
margin: 60px 0 0 0;
padding: 20px;
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.blog .entry .blog-author .blog-rub-btn:hover { color: #f5f1ec !important; font-size: 18px !important; text-decoration: none; background-color: #bf3c30; display: inline-block; margin: 0; padding: 8px 16px; border-radius: 4px }
.blog .entry .blog-author .blog-rub-btn { color: #f5f1ec !important; font-size: 18px !important; text-decoration: none; background-color: #6a93b0; display: inline-block; margin: 0; padding: 8px 16px; border-radius: 4px }
.blog .entry .blog-author .media-object {
width: 150px;
height: auto;
}
.blog .entry .blog-author .media-body {
padding: 0 32px;
margin: 4px 0;
}
.blog .entry .entry-content .media-body p { font-size: 18px; line-height: 170%; margin: 0 0 16px; padding: 0 }
/* Tablet */
@media (max-width: 991px) {
.blog .entry .blog-author {
padding: 16px;
}
.blog .entry .blog-author .media-object {
width: 130px;
}
.blog .entry .blog-author .media-body {
padding: 0 20px;
}
}
/* Handy */
@media (max-width: 575px) {
.blog .entry .blog-author {
padding: 20px;
}
.blog .entry .blog-author .media {
display: block;
text-align: center;
}
.blog .entry .blog-author .media-left {
display: block;
margin-bottom: 15px;
}
.blog .entry .blog-author .media-object {
width: 50%;
height: auto;
margin: 0 auto;
}
.blog .entry .blog-author .media-body {
padding: 32px 0px;
margin: 0;
}
.blog .entry .blog-author .media-body p {
text-align: center;
}
}
/*------------------------------------------------------ blog------ */
.blog .entry{ padding-top:0px;padding-bottom:0px; margin: 0px 90px }
.blog .entry-selbst h3{ padding:0px 0px 10px 0px }
.blog .entry h3 { margin-top: 56px; margin-bottom: 16px !important }
.blog .entry-selbst{ padding:40px 0px 0px 0px }
.blog .entry .entry-abstand{ margin-top:30px;margin-bottom:30px }
.blog .entry .entry-img{ margin-top:16px;margin-bottom:16px;margin-left:auto;width:100%;height:auto }
.blog .entry .entry-content { margin-bottom: 0; padding-bottom: 0 }
.blog .entry .entry-content img{ margin-bottom:0px !important;width:100%; }
.blog .entry .entry-content p { color: #2B4252; font-size: 18px; text-align: justify;line-height: 170%; margin: 0 0 24px; padding: 0 }
.blog .entry .entry-content p b { color: #212121; font-size: 19px; font-weight: bold; line-height: 170%; margin: 0 0 16px; padding: 0 }
.blog .entry .entry-content p a { color: #212121 !important; font-size: 18px; }
.blog .entry .entry-content p span a { color: #212121 !important; font-size: 18px; font-style: italic;padding-right: 3px; }
.blog .entry .entry-content p span a:hover { color: #fff !important; font-size: 18px; font-style: italic;padding-right: 3px; }
.blog .entry .entry-content p a:hover { font-size: 18px; font-style: italic; text-decoration: none;color: #555 }
.blog .entry .entry-content span{ font-size:18px;line-height:20px }
.blog .entry-content-fix h2{ font-size:28px;line-height:32px;text-align:left;margin:0 0 40px;padding:0 }
.blog .entry .entry-content h1 { font-size: 32px; line-height: 36px; letter-spacing: -0.5px; margin-top: 0; margin-bottom: 14px; padding: 0px }
.blog .entry .entry-content h2 { color: #212121; font-size: 30px; line-height: 1.25; padding: 64px 0 16px }
.blog .entry .entry-content h3 { color: #212121; font-size: 24px; font-weight: 700; line-height: 1.3; text-align: left; margin-top: 64px; margin-bottom: 16px }
.blog .entry .entry-content h4 { color: #212121; font-size: 19px; font-weight: 700; line-height: 1.3; text-align: left; margin-top: 48px; margin-bottom: 8px }
.blog .entry .entry-content h5 { color: #2B4252; font-size: 18px; line-height: 1.2; margin-top: CSS_PROPERTY_UNDEF }
.blog .entry .entry-content h5 a { color: #2B4252; margin: 0; padding: 0 }
.blog .entry .entry-content h5 a:hover { font-style: italic }
.blog .entry .entry-content span { font-size: 16px; font-weight: bold; font-style: italic }
.blog .entry .entry-content ul{ list-style:none;padding:10px 0 0 }
.blog .entry .entry-content ul li{ font-size:18px;line-height:30px;text-align:left;padding: 0px 0 0 0px;position:relative }
.blog .entry .entry-content .read-more { margin-top: 64px; margin-bottom: 64px; padding: 20px 64px }
.blog .entry .entry-content .read-more a { color: #555; font-size: 16px; font-style: italic; background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0 0; display: inline-block; border-radius: 5px; transition: 0.3s }
.blog .entry .entry-content .read-more a:hover { font-style: italic; text-decoration: none; background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0 0; border: solid 1px }
@media (max-width: 768px) {
.blog .entry {
margin: 0px 15px;
}
.blog .entry .entry-content p { color: #2B4252; font-size: 18px; text-align: left;line-height: 170%; margin: 0 0 24px; padding: 0 }
}
/* ------blockquote------ */
.blog .entry .entry-content blockquote { color: #212121; background-image: none; text-align: left; margin: 104px 30px 80px 30px; padding-top: 10px; padding-right: 120px; padding-left: 60px; position: relative; overflow: hidden }
.blog .entry .entry-content blockquote p { font-size: 18px; font-style: italic; font-weight: 300; line-height: 170%; margin: 0px 0 0 10px }
.blog .entry .entry-content blockquote a { color: #212121; padding: 3px 8px; border-radius: 5px }
.blog .entry .entry-content blockquote a:hover { color: #555; text-decoration: none; padding: 10px }
.blog .entry .entry-content blockquote .quote-left { color: #d9d5cf; font-size: 80px; position: absolute; top: 10px; left: 0 }
.blog .entry .entry-content blockquote .quote-right { color: #e8e1d8; font-size: 40px; position: absolute; right: 24px; bottom: 20px }
.blog .entry .entry-content blockquote::after { background-repeat: no-repeat; margin-top: 20px; margin-bottom: 0px; position: absolute; top: 0; bottom: 0; left: 0; width: 30px; content: '' }
@media (max-width: 768px) {
.blog .entry {
margin: 0px 15px;
}
.blog .entry .entry-content blockquote {
margin: 40px 0px 40px 0px;
padding: 16px 16px 16px 34px;
border: none;
box-shadow: none;
border-radius: 0;
background: none;
}
.blog .entry .entry-content blockquote p {
font-size: 18px;
margin: 0;
}
.blog .entry .entry-content blockquote .quote-left {
font-size: 28px;
top: 14px;
left: 0;
color: rgba(0,0,0,0.15);
}
.blog .entry .entry-content blockquote .quote-right {
display: none; /* Raus damit spart Platz */
}
.blog .entry .entry-content p { color: #2B4252; font-size: 18px; text-align: left;line-height: 170%; margin: 0 0 24px; padding: 0 }
}
@media (min-width: 701px) and (max-width: 991px) {
.blog .entry .entry-content blockquote {
margin: 40px 20px;
padding: 20px 30px 20px 60px;
}
.blog .entry .entry-content blockquote p {
margin-left: 10px;font-size: 18px
}
.blog .entry .entry-content blockquote {
padding-left: 60px;
}
.blog .entry .entry-content blockquote .quote-left {
font-size: 40px;
top: 20px;
left: 10px;
color: rgba(0,0,0,0.15);
}
.blog .entry .entry-content blockquote .quote-right {
display: none; /* spart Platz in der Mittelgröße */
}
.blog .entry .entry-content p { color: #2B4252; font-size: 18px; text-align: left;line-height: 170%; margin: 0 0 24px; padding: 0 }
}
@media (min-width: 900px) {
.blog .entry .entry-content blockquote {
margin: 36px 0px;
padding: 0px 20px 0px 72px;
background: none;
border: none;
box-shadow: none;
}
.blog .entry .entry-content blockquote p {
font-size: 18px;
margin: 0 0 0 10px;
}
.blog .entry .entry-content blockquote .quote-left {
font-size: 56px;
top: 0px;
left: 10px;
color: #6A93B0;
}
.blog .entry .entry-content blockquote .quote-right {
font-size: 40px;
right: 10px;
bottom: 10px;
color: rgba(0,0,0,0.10);
display: block;
}
.blog .entry .entry-content p { color: #2B4252; font-size: 18px; text-align: left;line-height: 170%; margin: 0 0 24px; padding: 0 }
}
.blog .entry .entry-content .blog-inner-box {
background: #fff;
border: 1px solid rgba(0,0,0,.125);
border-radius: .25rem;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
margin: 48px 0;
overflow: hidden;
text-align: center;
padding: 0;border-radius: 14px;
}
.blog .entry .entry-content .blog-inner-box .card-header {
padding: 0px;
background-color: rgba(0,0,0,.03);
border-bottom: 1px solid rgba(0,0,0,.125);
font-weight: 600;
color: #212529;
}
.blog .entry .entry-content .blog-inner-box .card-footer {
padding: 0px;
background-color: rgba(0,0,0,.03);
border-top: 1px solid rgba(0,0,0,.125);
font-size: .875rem;
color: #6c757d;
}
.blog .entry .entry-content .blog-inner-box .content {
padding: 80px 32px 32px 32px;
margin: 0px auto;
position: relative;
overflow: hidden;
z-index: 1;
background-image:
linear-gradient(
to bottom right,
rgba(0,0,0,0.98), /* dunkler! */
rgba(0,0,0,0.65)
),
url(img/xm_30141534.webp);
background-size: cover;
background-position: center;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border-radius: 0px;
}
.blog .entry .entry-content .blog-inner-box .content .wrap {
max-width: 500px; /* oder jede Breite, die du willst */
margin: 0;
text-align: left; /* zentriert */
}
.blog .entry .entry-content .blog-inner-box .content h3 {
font-size: 28px;
font-weight: 700;
margin-bottom: 16px; margin-top: 0px;
color: #fff;
}
.blog .entry .entry-content .blog-inner-box .content p {
margin-bottom: 16px;text-align: left;
color: #fff;
line-height: 1.6;
}
.blog .entry .entry-content .blog-inner-box .content .meta { color: #f8b68b !important; font-style: italic; margin-bottom: 24px }
.blog .entry .entry-content .blog-inner-box .content .content-btn {
display: inline-block;
padding: 14px 32px;
font-size: 16px;
border-radius: 6px;
background: rgba(255,255,255,0.85); /* glossy weiß */
color: #555 !important;
border: 1px solid rgba(255,255,255,0.95);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
margin: 8px 6px 0 0;
text-decoration: none;
box-shadow:
0 8px 20px rgba(0,0,0,0.18),
0 3px 6px rgba(0,0,0,0.10);
transition: .2s ease;
}
.blog .entry .entry-content .blog-inner-box .content .content-btn:hover {
background: #fff;
color: #555 !important;
box-shadow:
0 12px 28px rgba(0,0,0,0.22),
0 4px 10px rgba(0,0,0,0.12);
}
@media (min-width: 992px) {
.blog .entry .entry-content .blog-inner-box .content {
padding: 24px; /* links 40 = Text rückt nach links */
}
.blog .entry .entry-content .blog-inner-box {
margin: 64px 0;
}
.blog .entry .entry-content .blog-inner-box .content .wrap {
max-width: 400px; /* bleibt 400, wird NICHT breiter */
margin: 0;
text-align: left;
}
.blog .entry .entry-content p {
color: #2B4252; line-height: 1.6; text-align: justify;
margin: 0 0 16px; font-size: 18px;
padding: 0;
}
.blog .entry .entry-content .h2-title {
color: #212121;
font-size: 30px;
line-height: 1.25;
padding: 16px 0 16px;
}
}
/* ============================================
BUCH MINI-WERBUNG (angepasst an Beratungsstil)
============================================ */
.blog .entry .entry-content .blog-inner-boxs {
position: relative;
margin: 80px 0;
padding: 48px 48px;
background-color: #ffffff; /* weiß wie Beratung */
border: 1px solid #e0d5c4; /* feine Linie */
border-radius: 14px;
box-shadow: 0 4px 14px rgba(0,0,0,0.06); /* leichter Schatten */
max-width: 1555px;
overflow: hidden;
}
.blog .entry .entry-content .blog-inner-boxs::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 6px;
background-color: #a8854f; /* deine CTA-Farbe */
border-radius: 14px 0 0 14px;
}
.blog .entry .entry-content .blog-inner-boxs .content {
position: relative;
margin-left: 10px; /* Abstand vom Balken */
padding: 0;
}
.blog .entry .entry-content .blog-inner-boxs .wrap {
max-width: 900px;
margin: 0;
text-align: left;
}
.blog .entry .entry-content .blog-inner-boxs .meta {
font-size: 14px;
color: #a8854f;
margin-bottom: 8px;
font-weight: 600;
letter-spacing: 0.5px;
}
.blog .entry .entry-content .blog-inner-boxs h3 {
font-size: 24px;margin-top: 54px;
font-weight: 800;
margin-bottom: 16px;
color: #222;
}
.blog .entry .entry-content .blog-inner-boxs p {
font-size: 17px;
line-height: 1.55;
margin-bottom: 18px;
color: #212121;
}
.blog .entry .entry-content .blog-inner-boxs .content-btn {
margin-top: 8px;
margin-right: 10px;
}
@media (max-width: 768px) {
.blog .entry .entry-content .blog-inner-boxs {
padding: 24px 20px;
margin: 40px 0;
}
}
/* ============================================
Beratung schlanke Box mit Seitenbalken
============================================ */
.blog .entry .entry-content .beratungs-box {
position: relative;
margin: 80px 0;
padding: 24px 32px;
background-color: #ffffff; /* weiß, nicht beige */
border: 1px solid #e0d5c4; /* feiner Rahmen */
border-radius: 10px;
box-shadow: 0 4px 14px rgba(0,0,0,0.04);
max-width: 1555px; /* etwas schmaler als die Buch-Box */
}
.blog .entry .entry-content .beratungs-box::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 6px;
background-color: #a8854f; /* deine CTA-Farbe */
border-radius: 10px 0 0 10px;
}
.blog .entry .entry-content .beratungs-box .content {
position: relative;
margin-left: 8px; /* etwas Abstand vom Balken */
}
.blog .entry .entry-content .beratungs-box h3 {
font-size: 24px;
font-weight: 800;
color: #222;
margin: 0 0 12px 0;
}
.blog .entry .entry-content .beratungs-box p {
font-size: 17px;
line-height: 1.6;
color: #212121;
margin: 0 0 14px 0;
}
.blog .entry .entry-content .beratungs-box .content-btn {
margin-top: 12px;
margin-right: 10px;
}
@media (max-width: 768px) {
.blog .entry .entry-content .beratungs-box {
margin: 40px 0;
padding: 20px 18px;
border-radius: 8px;
}
.blog .entry .entry-content .beratungs-box::before {
width: 4px;
}
.blog .entry .entry-content .beratungs-box h3 {
font-size: 20px;
}
.blog .entry .entry-content .beratungs-box p {
font-size: 15px;
line-height: 1.5;
}
}
/* ============================
BERATUNGS-BOX (unabhängig)
============================ */
.blog .entry .entry-content .beratungs-boxg { background: #555 url(img/xxx_119271170.webp) no-repeat center; margin: 80px 0; padding: 80px 32px 32px 32px; position: relative; overflow: hidden; border-radius: 14px }
.blog .entry .entry-content .beratungs-boxg::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to right,
rgba(0,0,0,0.8), /* links dunkel */
rgba(0,0,0,0.1) /* rechts hell */
);
z-index: 0;
pointer-events: none;
}
.blog .entry .entry-content .beratungs-boxg .content .wrap {
max-width: 640px; /* oder jede Breite, die du willst */
margin: 0;
text-align: left; /* zentriert */
}
.blog .entry .entry-content .beratungs-boxg .content {
position: relative;
z-index: 1;
margin: 0;
padding: 0;
}
.blog .entry .entry-content .beratungs-boxg .content h3 {
color: #fff;
font-size: 26px;
margin-bottom: 20px;
}
.blog .entry .entry-content .beratungs-boxg .content p {
color: #f0f0f0;
margin-bottom: 20px;
line-height: 1.4;
}
.blog .entry .entry-content .beratungs-boxg .content .content-btn {
background: rgba(255,255,255,0.85);
color: #555 !important;
padding: 14px 40px;
border-radius: 5px;
display: inline-block;
border: 1px solid rgba(255,255,255,0.9);
margin-top: 10px;
transition: 0.2s ease;
}
.blog .entry .entry-content .beratungs-boxg .content .content-btn:hover {
background: #fff;
color: #555 !important;
}
@media (max-width: 991px) {
.blog .entry .entry-content .beratungs-boxg .content .wrap {
max-width: 500px; /* oder jede Breite, die du willst */
margin: 0;
text-align: left; /* zentriert */
}
}
@media (max-width: 768px) {
.blog .entry .entry-content .beratungs-boxg {
background: #555 url(img/xm_30141534.webp) no-repeat center; margin: 48px 0;
padding: 0 24px 56px 24px;
border-radius: 10px;
}
.blog .entry .entry-content .beratungs-boxg .content h3 {
font-size: 24px;
margin-bottom: 15px;
}
.blog .entry .entry-content .beratungs-boxg .content p {
font-size: 18px; text-align: left;
line-height: 1.0;
margin-bottom: 15px;
}
.blog .entry .entry-content .beratungs-boxg .content .content-btn {
padding: 12px 28px;
font-size: 15px;
border-radius: 4px;
}
}
.blog .entry .entry-meta { margin: 0; padding: 0 }
.blog .entry .entry-meta h1 { color: #212121; font-size: 32px; font-weight: bold; line-height: 1.2; text-align: left; padding: 12px 0 24px 0}
.blog .entry .entry-meta { color: #212121; font-size: 16px; line-height: 40px; margin: 0; padding:0 }
.blog .entry .entry-meta img { color: #c4dbdb; font-size: 14px; margin-top: 0; margin-bottom: 35px; padding-top: 0; width: 100%; height: auto; border-radius: 3px;border-style: solid; border-width: 1px; }
.blog .entry .entry-meta ul{ list-style:none;display:flex;margin:10px 0;padding:0 0 0;flex-wrap:wrap }
.blog .entry .entry-meta ul li + li{ }
.blog .entry .entry-meta i{ font-size:14px;padding-right:4px }
.blog .entry .entry-meta a{ font-size:18px;line-height:20px;display:inline-block;transition:0.3s }
.blog .entry .entry-meta a:hover { font-size:18px;line-height:20px;display:inline-block;transition:0.3s; font-style: italic; text-decoration: none }
/* ------entry-footer------ */
.blog .entry .entry-footer{ padding-top:50px }
.blog .entry .entry-footer ul li {margin-top:0px !important}
.blog .entry .entry-footer a { color: #f8b68b; font-size: 18px; transition: 0.3s; padding: 0px ; }
.blog .entry .entry-footer a:hover { font-size: 18px; font-style: italic; text-decoration: none; transition: 0.3s }
.blog .entry .entry-footer-link { padding-top: 10px }
.blog .entry .entry-footer-link h4 { color: #212121; font-size: 18px; padding-top: 16px; padding-bottom: 16px; text-align: center; }
.blog .entry .entry-footer-link p { margin: 0; padding: 0 }
.blog .entry .entry-footer-link a { color: #212529; font-size: 18px; text-align: left; display: inline-block ; margin-bottom: 5px; padding: 20px 30px; width: 100%; border: solid 1px #212121; transition: 0.3s }
.blog .entry .entry-footer-links a { color: #212529; font-weight: 600; font-size: 16px !important; text-align: left; display: inline-block ; margin-bottom: 0px; padding: 8px 8px; }
.blog .entry .entry-footer-links { font-size: 18px; text-align: left; display: inline-block ; color: #f8b68b; margin-top: 20px; margin-bottom: -20px; padding: 0px }
.blog .entry .entry-footer a.success-gray { color: #212121 !important; font-size: 18px; border-radius: 50%; font-weight: bold; background-color: #b4c9d7; text-align: center; display: inline-block; margin-bottom: 13px; padding: 24px !important; vertical-align: middle;box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.blog .entry .entry-footer a.success-gray:hover { color: #fff !important; background-color: #212121; }
.blog .entry .entry-footer ul { }
.blog .entry .entry-footer .blog-rub-btn {
color: #212121 !important;
background-color: #b4c9d7;
font-size: 18px !important;margin: 2px 0 0 0;
padding: 4px 8px !important;
border-radius: 4px;
display: inline-block;
text-decoration: none;
}
.blog .entry .entry-footer .blog-rub-btn:hover {
color: #fff !important;
background-color: #789DB5;
}
/* ------entry-footer cats tags------ */
.blog .entry .entry-footer .cats{ font-size:14px;list-style:none;display:inline;padding:0 20px 0 0 }
.blog .entry .entry-footer .cats li{ display:inline-block }
.blog .entry .entry-footer .tags{ font-size:14px;list-style:none;display:inline;margin-top:10px;padding:0 }
.blog .entry .entry-footer .tags li{ display:inline-block;margin-top:10px }
.blog .entry .entry-footer .tags li + li::before{ color:#6c4675;padding-right:6px;content:"," }
.blog .entry .entry-footer .share{ font-size:16px;margin-top:10px;margin-bottom:20px;margin-left:20px }
.blog .entry .entry-footer .share i {
color: #6A93B0;
font-size: 18px;
width: 38px;
height: 38px;
line-height: 38px;
padding-left: 0;
text-align: center;
border-radius: 50%;
display: inline-block;
transition: all 0.2s ease;
}
.blog .entry .entry-footer .share i:hover {
color: #fff;
background-color: #F05A28;
}
.blog .entry .entry-footer .share p { font-size: 16px; font-weight: bold; margin-top: 10px; margin-bottom: 20px }
/*-#Blog Sidebar-----*/
.blog .sidebar{ margin-top:0;margin-right:0;padding:104px 0px 30px 30px }
.blog .sidebar .sidebar-title { color: #212121; font-size: 18px; font-weight: bold; text-align: center; margin: 8px 0px 22px 0px}
.blog .sidebar .sidebar-item { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-right: 0; padding-left: 0 }
.blog .sidebar .sidebar-item1 { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-right: 0; padding-left: 0 }
.blog .sidebar .sidebar-item .cateberat .tags{ margin-bottom: 48px; padding-top: 0; padding-right: 0; padding-left: 0 }.blog .sidebar .cateberat ul{ list-style:none;margin:0 0 0 0;padding:0; line-height: 24px;}
.blog .sidebar .cateberat ul li + li {
background-color: #f8f5f0; /* Hintergrund wie die Buch-Card */
border: 1px solid #ddd; /* Umrandung wie die Buch-Card */
border-radius: 5px; /* gleiche Rundung */
box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* gleicher Schatten */
margin-bottom: 8px;
padding: 24px;
margin: 16px;
}
.blog .sidebar .cateberat ul a { color: #212529; font-size: 16px; padding-left: 2px; transition: 0.3s }
.blog .sidebar .cateberat ul a:hover { font-style: italic; text-decoration: none; }
.blog .sidebar .cateberat ul a span { color: #212121; font-size: 18px; font-weight: bold; }
.blog .sidebar .categories { text-align: center; list-style: none; border: solid 1px #ead7c3 }
.blog .sidebar .categories h4 { color: #212121; font-size: 20px; font-weight: bold; line-height: 22px; list-style: none; margin: 0 0 5px; padding-top: 5px; padding-right: 0; padding-left: 0 }
.blog .sidebar .categories p { color: #555; font-size: 16px; line-height: 28px }
.blog .sidebar .categories ul { list-style: none; margin-top: 16px; margin-right: 16px; margin-left: 16px; padding-top: 16px; padding-right: 16px; padding-left: 16px }
.blog .sidebar .categories ul li { padding-top: 8px; padding-bottom: 8px }
.blog .sidebar .categories ul li + li { padding-top: 8px; padding-bottom: 10px; border-top: 1px solid #666 }
.blog .sidebar .categories ul a { color: #212121; font-size: 16px; line-height: 24px; text-decoration: none !important; padding-left: 2px; transition: 0.3s }
.blog .sidebar .categories ul a:hover { font-style: italic; text-decoration: none }
.blog .sidebar .categories ul a span { color: #c87e85; font-size: 14px; padding-left: 5px }
.blog .sidebar .tags { margin-top: 20px;margin-left: 0px }
.blog .sidebar .tags ul{ list-style:none;margin-bottom:16px;padding-right:0;padding-left:0px }
.blog .sidebar .tags ul li{ display:inline-block }
.blog .sidebar .tags ul a { color: #212121; font-size: 14px; display: inline-block; margin: 0 2px 7px 0; padding: 8px 16px; border: solid 1px #c4ddd7; border-radius: 5px; transition: 0.3s }
.blog .sidebar .tags ul a:hover { color: #fff; font-weight: normal; text-decoration: none; background-color: #555; border: solid 1px }
.blog .sidebar .tags ul a span{ color:#f69;font-size:14px;padding-left:0px }
/*-#Blog Sidebar werbung-----*/
.blog .sidebar .sidebar-item.cateberat h3 { color: #212121; font-size: 18px; font-weight: bold; line-height: 24px; margin-top: 0; margin-bottom: 16px }
.blog .sidebar .sidebar-item.cateberat .card { background-color: #f4f4f4; text-align: center; margin: 0 16px 24px; padding: 16px; border: solid 1px #fff; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1) }
.blog .sidebar .sidebar-item.cateberat .card h3 { font-size: 18px; line-height: 1.4; margin-bottom: 16px }
.blog .sidebar .sidebar-item.cateberat .card h3 span { color: #555; font-size: 18px; line-height: 1.4; background-color: #ead7c3; margin-bottom: 16px; padding: 48px 4px; border-radius: 150px }
.blog .sidebar .sidebar-item.cateberat .card h4 { font-size: 16px; line-height: 1.4; margin-top: 48px; margin-bottom: 16px }
.blog .sidebar .sidebar-item.cateberat .card p {
font-size: 16px;
line-height: 1.4;
margin-bottom: 16px;
}
.blog .sidebar .sidebar-item.cateberat .card p span { font-size: 16px; font-style: bold; line-height: 1.6; background-color: #ead7c3; margin-bottom: 16px; padding: 8px 24px; border-radius: 5px }
.blog .sidebar .sidebar-item.cateberat .card img {
max-width: 100%;
border-radius: 5px;
margin-bottom: 16px;
}
.blog .sidebar .sidebar-item.cateberat .card a { color: #212121; font-size: 20px; font-weight: 600; text-decoration: none; display: inline-block }
.blog .sidebar .sidebar-item.cateberat .card a:hover {
color: #555;
}
@media (max-width:992px){
.sidebar-item cateberat{ margin-top:0;margin-right:0;padding:72px 30px 0px 30px }
}
.blog .sidebar .recent-posts h4{ font-size:20px;}
.blog .sidebar .recent-posts1 img{ margin-right:16px;}
.blog .sidebar{ margin:72px 0px 0px 0;padding:20px 0px 0px 0px }
.blog .sidebar .recent-posts times{ font-size:18px;}
.blog .sidebar .recent-posts time{ font-size:18px;}
.blog .sidebar .post-item{ margin-bottom:10px;}
.more-services .card-title h3{ color:#212121;font-size:24px;font-weight:bold;line-height:32px;text-align:left;margin-bottom:0;padding-top:20px;padding-bottom:20px }
}
.blog .sidebar .tags ul{ list-style:none;margin-bottom:0px;padding-right:0;padding-left:0px }
.card {
background: #fff;
flex: 1 1 300px;
margin: 0px;
padding: 24px;
}
.card h2 { font-size: 22px; line-height: 1.4; padding-top: 24px; padding-bottom: 8px }
.entry-content p{ text-align:left }
.blog .sidebar .categories {
text-align: center;
list-style: none;
margin: 0 16px 0px;
padding: 0;
border: solid 1px #ead7c3;
}
blog .blog-author img{ width:120px;}
.blog .blog-author h4{ margin-left:140px;font-weight:600;font-size:20px;margin-bottom:0px;padding:0;}
.blog .blog-author .social-links{ margin:0 0 5px 140px;}
.blog .entry .entry-content ul li{ font-size:16px;}
.more-services .card-title h3{ color:#212121;font-size:24px;font-weight:bold;line-height:32px;text-align:left;margin-bottom:0;padding-top:20px;padding-bottom:20px }
.blog .sidebar .sidebar-item.cateberat .card {
background-color: #f8f5f0;
text-align: center;
margin: 0 0px 48px;
padding: 16px;
border: solid 1px #fff;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.blog .sidebar .categories {
text-align: center;
list-style: none;
margin: 0 0px 16px 0px;
padding: 0;
border: solid 1px #F05A28;}
/* ---Footer---- Footer -----------------------------------------------------------------------------*/
#footer { font-size: 18px; font-weight: normal; background-color: #403d35; margin-top: 104px; margin-right: 0; margin-left: 0; padding: 60px 0 30px }
#footer .footer-top { font-size: 16px; font-weight: normal; text-align: left; margin: 0; padding: 0; border-radius: 5px}
#footer .footer-top a { color: #e1dcd9; font-size: 18px; font-weight: normal; display: inline-block; margin-right: 20px; margin-bottom: 20px; transition: 0.2s }
#footer .footer-top .footer-contact { color: #fff; margin-top: 0; margin-right: 0; margin-left: 0px; padding-top: 56px; padding-bottom: 0; padding-left: 0; opacity: 0.7 }
#footer .footer-top .footer-contact h1{ color:#fff;font-size:22px;border-radius:50px 30px }
#footer .footer-top .footer-contact p { color: #D6CFC7; font-size: 18px }
#footer .footer-top .footer-contact a { color: #e1dcd9; font-size: 16px; font-weight: normal; display: inline-block; margin-right: 20px; margin-bottom: 20px; transition: 0.2s }
#footer .footer-top .footer-contact a:hover { color: #fff !important;font-style: normal; text-decoration: none }
#footer .footer-top .footer-contact-link { margin-top: 20px; margin-bottom: 20px }
#footer .footer-top .footer-contact-link a { font-size: 16px; display: inline-block; margin-right: 20px; margin-bottom: 10px; padding: 30px 64px; border: solid 2px; transition: 0.2s }
#footer .footer-top .footer-contact-link a:hover { font-style: italic; text-decoration: none }
#footer .footer-top h4 { color: #d2917d; font-size: 22px; font-style: normal; font-weight: 700; line-height: 1.4; margin: 0; padding: 0 0 32px; position: relative }
#footer .footer-top h4 span { color: #4a433e; font-size: 22px; font-weight: 700; background-color: #d2917d; margin: 0; padding: 8px; border-radius: 150% }
/* ---- -Links----*/
#footer .footer-top .footer-links { text-align: left; margin-right: 0; margin-left: 0; padding: 56px 56px 40px 15px;opacity: 0.7 }
#footer .footer-top .footer-links h2 { color: #fff; font-size: 18px; font-weight: bold; text-align: left; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 20px }
#footer .footer-top .footer-links h2 span { color:#ae9f80; font-size: 40px; font-weight: bold; padding: 0px; border-radius: 150% }
#footer .footer-top .footer-links p { color:#fff; font-size: 18px; margin-right: 0; margin-left: 0; padding-left: 0 }
/* ---- --Soziale Links-----*/
.foot { background-color: #716b5d; margin: 0; padding: 2px 0 40px; border-top: 1px solid #272727 }
.foot img { width: 100%; height: auto; border-radius: 50px }
.foot p{ font-size:16px;margin-bottom:0px;text-align: center }
.foot .content { text-align: center }
.foot .content a { color: #D6CFC7; font-size: 22px; font-weight: normal; text-align: center; display: inline-block; margin-right: 1px; margin-bottom: 30px; padding: 10px; vertical-align: middle; border-radius: 5px }
.foot .content a:hover { font-size: 17px; font-style: italic; text-decoration: none }
@media (max-width:992px){
#footer { font-size: 18px; font-weight: normal; background-color: #212121; margin-top: 64px; margin-right: 0; margin-left: 0; padding: 88px 0 30px; }
#footer .footer-top .footer-links{ padding:0px 0px 0px 20px;}
#footer .footer-top .footer-links p { font-size: 18px;}
#footer .footer-top .footer-contact { color: #fff; margin-top: 0; margin-right: 0; margin-left: 20px; padding-top: 40px; padding-bottom: 0; padding-left: 0; opacity: 0.7 }
#footer .footer-top .footer-contact a { font-size: 18px;}
#footer .footer-top{ font-size:18px;font-weight:normal;background-color:#212121;text-align:left;margin-bottom:0;padding-top:0px;padding-bottom:0px;padding-left:0px;border-left:3px solid #212121;border-radius:5px }
}
@media (max-width:768px){
#footer { font-size: 18px; font-weight: normal; background-color: #212121; margin-top: 64px; margin-right: 0; margin-left: 0; padding: 16px 0 30px; }
#footer .footer-top .footer-links{ padding:56px 0px 0px 20px;}
#footer .footer-top .footer-links a{ font-size:18px;line-height:26px;;margin-top:10px;margin-bottom:24px;margin-left:0;padding:0px;}
#footer .footer-top .footer-contact { padding: 30px 0 0 0px; }
}