/* ==========================================================================
Anwaltshotline CSS – Gesamtstylesheet (konsolidiert)
========================================================================== */
/* ---------------- Design Tokens ---------------- */
:root{
--c-text:#333;
--c-bg:#f8f9fa;
--c-primary:#1e3c72;
--c-primary-2:#2a5298;
--c-accent:#ff6b35;
--c-accent-2:#e55a2b;
--c-muted:#666;
--c-border:#eee;
--grad-primary:linear-gradient(135deg,#1e3c72,#2a5298);
--grad-number:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
--shadow-sm:0 2px 10px rgba(0,0,0,.1);
--shadow-md:0 5px 20px rgba(0,0,0,.1);
--shadow-lg:0 10px 30px rgba(0,0,0,.1);
--r-10:10px;
--r-14:14px;
--r-15:15px;
--tr:.3s ease;
}
/* ==========================================================================
Reset & Base
========================================================================== */
*{margin:0;padding:0;box-sizing:border-box}
body{
font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
line-height:1.6;color:var(--c-text);background-color:var(--c-bg)
}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.section{padding:4rem 0}
/* ==========================================================================
Accessibility
========================================================================== */
.skip-link{
position:absolute;top:-40px;left:6px;background:#000;color:#fff;padding:8px;
text-decoration:none;border-radius:4px;z-index:10000
}
.skip-link:focus{top:6px}
button:focus,a:focus,input:focus,select:focus,textarea:focus{
outline:2px solid var(--c-accent);outline-offset:2px
}
/* High contrast mode support (global) */
@media (prefers-contrast: high){
.btn-primary,.btn-secondary{border:2px solid currentColor}
}
/* Reduced motion (global) */
@media (prefers-reduced-motion: reduce){
*,::before,::after{
animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important
}
}
/* ==========================================================================
Header
========================================================================== */
.header{
background:var(--grad-primary);color:#fff;padding:1rem 0;box-shadow:var(--shadow-sm)
}
.header-content{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}
.logo{font-size:2rem;font-weight:700;color:#fff}
.contact-info{display:flex;gap:2rem;align-items:center}
.hotline-number{
background:var(--c-accent);padding:.8rem 1.5rem;border-radius:25px;font-weight:700;
font-size:1.1rem;text-decoration:none;color:#fff;transition:all var(--tr)
}
.hotline-number:is(:hover,:focus){background:var(--c-accent-2);transform:translateY(-2px)}
/* ==========================================================================
Breadcrumb
========================================================================== */
.breadcrumb{background:#fff;padding:.5rem 0;border-bottom:1px solid var(--c-border)}
.breadcrumb-list{display:flex;list-style:none;gap:.5rem;align-items:center}
.breadcrumb-list li:not(:last-child)::after{content:"›";margin-left:.5rem;color:#666}
.breadcrumb-list a{text-decoration:none;color:var(--c-primary)}
/* ==========================================================================
Navigation
========================================================================== */
.nav{background:#fff;border-bottom:1px solid var(--c-border);position:sticky;top:0;z-index:1000}
.nav-content{display:flex;justify-content:space-between;align-items:center;padding:1rem 0}
/* Desktop */
@media (min-width:993px){
.mobile-menu-toggle{display:none!important}
.nav-menu{
display:flex;list-style:none;gap:2rem;flex-wrap:wrap;position:static;transform:none;background:transparent;
padding:0;box-shadow:none;height:auto;width:auto;border-radius:0;overflow:visible
}
.nav-menu li{position:relative}
.nav-menu>li>a{
text-decoration:none;color:#333;font-weight:500;padding:.5rem 1rem;border-radius:5px;transition:all var(--tr)
}
.nav-menu>li>a:is(:hover,:focus){background:var(--c-primary);color:#fff}
.dropdown{position:relative}
.dropdown-content{
display:none;position:absolute;background:#fff;min-width:250px;box-shadow:0 8px 16px rgba(0,0,0,.1);
border-radius:5px;top:100%;left:0;z-index:1001;margin-top:8px
}
.dropdown-content a{
display:block;padding:.8rem 1rem;border-bottom:1px solid var(--c-border);color:#333;text-decoration:none
}
.dropdown-content a:last-child{border-bottom:none}
.dropdown-content a:hover{background:var(--c-bg)}
.dropdown:hover .dropdown-content{display:block}
}
/* Mobile */
@media (max-width:992px){
.nav-content{padding:.8rem 0}
.mobile-menu-toggle{
display:inline-flex!important;align-items:center;justify-content:center;width:44px;height:44px;border:0;background:#111;color:#fff;
border-radius:10px;cursor:pointer;margin-left:auto;position:relative;z-index:1003;flex-shrink:0;order:999
}
.mobile-menu-toggle span{
display:block;width:22px;height:2px;background:#fff;transition:transform .3s ease,opacity .2s ease;position:relative
}
.mobile-menu-toggle span:nth-child(2){margin:5px 0}
.mobile-menu-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mobile-menu-toggle.active span:nth-child(2){opacity:0}
.mobile-menu-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-backdrop{
position:fixed;inset:0;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:1001
}
body.nav-open .nav-backdrop{opacity:1;pointer-events:auto}
.nav-menu{
position:fixed;top:0;right:0;width:min(420px,90vw);height:100vh;background:#fff;display:flex!important;flex-direction:column;gap:0;
padding:60px 16px 24px;box-shadow:-14px 0 40px rgba(0,0,0,.2);transform:translateX(100%)!important;transition:transform .3s ease;
overflow-y:auto;-webkit-overflow-scrolling:touch;border-radius:14px 0 0 0;z-index:1002;list-style:none
}
.nav-menu.active{transform:translateX(0)!important}
.nav-menu li{list-style:none;margin:0;padding:0}
.nav-menu>li>a{
display:block;padding:14px 12px;margin-bottom:8px;border-radius:10px;background:#f6f7fb;color:#111;text-decoration:none;font-size:1.05rem;
transition:background .2s ease
}
.nav-menu>li>a:is(:hover,:focus){background:#eef1f6;outline:none}
.dropdown .dropdown-content{
position:static!important;display:block;max-height:0;overflow:hidden;transition:max-height .3s ease;padding-left:6px;margin-top:2px;
background:transparent;box-shadow:none;border:0;border-radius:0
}
.dropdown.open .dropdown-content{max-height:400px}
.dropdown .dropdown-content a{background:transparent!important;padding:10px 10px;margin:0;border-radius:6px;font-size:.95rem;color:#555}
.dropdown .dropdown-content a:hover{background:#f2f2f4!important}
body.nav-open{overflow:hidden}
}
/* ==========================================================================
Hero + CTA
========================================================================== */
main .hero{background:linear-gradient(rgba(30,60,114,.9),rgba(42,82,152,.9));color:#fff;padding:4rem 0;text-align:center}
.hero h1{font-size:3rem;margin-bottom:1rem;font-weight:700}
.hero p{font-size:1.3rem;margin-bottom:2rem;max-width:800px;margin-inline:auto}
.cta-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.btn-primary,.btn-secondary{
padding:1rem 2rem;border:none;border-radius:30px;font-size:1.1rem;font-weight:700;text-decoration:none;
transition:all var(--tr);display:inline-block
}
.btn-primary{background:var(--c-accent);color:#fff}
.btn-primary:is(:hover,:focus){background:var(--c-accent-2);transform:translateY(-2px)}
.btn-secondary{background:transparent;color:#fff;border:2px solid #fff}
.btn-secondary:is(:hover,:focus){background:#fff;color:var(--c-primary)}
/* ==========================================================================
Section Titles
========================================================================== */
.section-title{text-align:center;font-size:2.5rem;margin-bottom:3rem;color:var(--c-primary)}
/* ==========================================================================
Infographic (global)
========================================================================== */
.infographic-container{
display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem;margin:2rem 0
}
.infographic-step{
display:flex;align-items:flex-start;gap:1.5rem;background:#fff;padding:2rem;border-radius:15px;box-shadow:var(--shadow-md);
transition:transform var(--tr), box-shadow var(--tr);position:relative;overflow:hidden
}
.infographic-step:hover{transform:translateY(-5px);box-shadow:0 10px 30px rgba(0,0,0,.15)}
.infographic-step::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--grad-primary)}
.step-number{
background:var(--grad-primary);color:#fff;width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;
font-size:1.5rem;font-weight:700;flex-shrink:0;box-shadow:0 4px 12px rgba(30,60,114,.3)
}
.step-content h4{color:var(--c-primary);margin-bottom:.5rem;font-size:1.2rem}
.step-content p{color:var(--c-muted);line-height:1.6;margin:0}
@media (max-width:768px){
.infographic-container{grid-template-columns:1fr;gap:1.5rem}
.infographic-step{padding:1.5rem;gap:1rem}
.step-number{width:40px;height:40px;font-size:1.2rem}
.step-content h4{font-size:1.1rem}
}
/* ==========================================================================
Phone Numbers (global)
========================================================================== */
.phone-numbers{background:#fff;padding:3rem 0}
.numbers-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:2rem}
.number-card{
background:var(--grad-number);color:#fff;padding:2rem;border-radius:15px;text-align:center;box-shadow:var(--shadow-lg);
transition:transform var(--tr);cursor:pointer
}
.number-card:is(:hover,:focus-within){transform:translateY(-5px)}
.number-card h3{font-size:1.5rem;margin-bottom:1rem}
.number-card .phone{font-size:2rem;font-weight:700;margin:1rem 0;color:#fff}
.number-card .phone a{color:#fff;text-decoration:none}
.number-card .cost{
background:rgba(255,255,255,.2);padding:.5rem 1rem;border-radius:20px;display:inline-block;margin-top:1rem;font-weight:700
}
.warning{
background:#fff3cd;border:1px solid #ffeaa7;color:#856404;padding:1rem;border-radius:10px;margin-top:2rem;text-align:center;font-weight:700
}
/* ==========================================================================
Services (global)
========================================================================== */
.services{padding:4rem 0;background:var(--c-bg)}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}
.service-card{
background:#fff;padding:2rem;border-radius:15px;text-align:center;box-shadow:var(--shadow-md);transition:all var(--tr)
}
.service-card:is(:hover,:focus-within){transform:translateY(-5px);box-shadow:0 10px 30px rgba(0,0,0,.15)}
.service-card .icon{font-size:3rem;margin-bottom:1rem;color:var(--c-primary)}
.service-card h3{margin-bottom:1rem;color:var(--c-primary)}
.service-card ul{list-style:none;padding:0;margin-top:1rem}
.service-card li{padding:.3rem 0;color:var(--c-muted);font-size:.9rem}
.service-card li::before{content:"✓ ";color:var(--c-primary);font-weight:700;margin-right:.5rem}
/* ==========================================================================
Features (global)
========================================================================== */
.features{padding:4rem 0;background:#fff}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}
.feature{display:flex;align-items:center;gap:1rem;padding:1rem}
.feature-icon{
background:var(--c-primary);color:#fff;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;
font-size:1.5rem;flex-shrink:0
}
/* ==========================================================================
FAQ (global)
========================================================================== */
.faq{padding:4rem 0;background:var(--c-bg)}
.faq-container{max-width:800px;margin:0 auto}
.faq-item{background:#fff;border-radius:10px;margin-bottom:1rem;overflow:hidden;box-shadow:var(--shadow-sm)}
.faq-question{
background:var(--c-primary);color:#fff;padding:1.5rem;cursor:pointer;font-weight:700;font-size:1.1rem;border:0;width:100%;text-align:left;
display:flex;justify-content:space-between;align-items:center;transition:background var(--tr)
}
.faq-question:is(:hover,:focus){background:var(--c-primary-2)}
.faq-question::after{content:"+";font-size:1.5rem;font-weight:700}
.faq-question.active::after{content:"−"}
.faq-answer{padding:0 1.5rem;max-height:0;overflow:hidden;transition:all var(--tr)}
.faq-answer.active{padding:1.5rem;max-height:500px}
/* ==========================================================================
Footer (global)
========================================================================== */
.footer{background:#1a1a1a;color:#fff;padding:3rem 0 1rem}
.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-bottom:2rem}
.footer-section h3{margin-bottom:1rem;color:var(--c-accent)}
.footer-section a{color:#ccc;text-decoration:none;display:block;margin-bottom:.5rem}
.footer-section a:is(:hover,:focus){color:var(--c-accent)}
.footer-bottom{border-top:1px solid #333;padding-top:1rem;text-align:center;color:#999}
/* ==========================================================================
Responsive (global)
========================================================================== */
@media (max-width:768px){
.header-content{flex-direction:column;gap:1rem}
.contact-info{flex-direction:column;gap:1rem;text-align:center}
.hotline-number{font-size:1rem;padding:.6rem 1.2rem}
.hero h1{font-size:2rem;line-height:1.2}
.hero p{font-size:1.1rem;padding:0 1rem}
.cta-buttons{flex-direction:column;align-items:center;gap:1rem;padding:0 1rem}
.btn-primary,.btn-secondary{width:100%;max-width:300px;text-align:center;padding:1.2rem 2rem}
.numbers-grid{grid-template-columns:1fr;gap:1.5rem;padding:0 1rem}
.number-card{padding:1.5rem}
.number-card h3{font-size:1.3rem;line-height:1.3}
.number-card .phone{font-size:1.6rem;line-height:1.2;margin:1.2rem 0}
.number-card .phone a{word-break:break-all}
.warning{margin:1rem;padding:1.2rem;font-size:.95rem;line-height:1.4}
.services-grid{grid-template-columns:1fr;gap:1.5rem;padding:0 1rem}
.service-card .icon{font-size:2.5rem}
.features-grid{grid-template-columns:1fr;gap:1.5rem;padding:0 1rem}
.feature{flex-direction:column;text-align:center}
.feature-icon{margin-bottom:1rem}
.faq-container{padding:0 1rem}
.faq-question{font-size:1rem;padding:1.2rem}
.faq-answer{padding:0 1.2rem}
.faq-answer.active{padding:1.2rem}
.section-title{font-size:2rem;padding:0 1rem;text-align:center}
.footer-content{grid-template-columns:1fr;gap:2rem;text-align:center}
.footer-bottom{padding:1rem;font-size:.9rem}
}
@media (max-width:480px){
.container{padding:0 15px}
.logo{font-size:1.8rem}
.section-title{font-size:1.8rem}
.number-card{padding:1.2rem}
.number-card .phone{font-size:1.4rem}
.number-card h3{font-size:1.2rem}
.hero h1{font-size:1.8rem}
.hero p{font-size:1rem}
.nav-menu{width:95vw;padding:50px 12px 20px}
}
/* ==========================================================================
Print (global)
========================================================================== */
@media print{
.nav,.footer,.cta-buttons,.warning{display:none}
.hero{background:none!important;color:#333!important}
.number-card{background:none!important;color:#333!important;border:1px solid #ccc}
}
/* ==========================================================================
Baurecht – Page Specific
========================================================================== */
.baurecht .baurecht-topics{background:var(--c-bg)}
.baurecht .topics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:2rem}
.baurecht .topic-card{
background:#fff;padding:2rem;border-radius:15px;box-shadow:var(--shadow-md);transition:all var(--tr);border-left:4px solid var(--c-primary)
}
.baurecht .topic-card:is(:hover,:focus-within){transform:translateY(-5px);box-shadow:0 10px 30px rgba(0,0,0,.15)}
.baurecht .topic-card .icon{font-size:3rem;color:var(--c-primary);margin-bottom:1rem;display:block}
.baurecht .topic-card h3{color:var(--c-primary);margin-bottom:1rem;font-size:1.4rem}
.baurecht .topic-card p{margin-bottom:1.5rem;color:var(--c-muted);line-height:1.6}
.baurecht .topic-card ul{list-style:none;padding:0}
.baurecht .topic-card ul li{padding:.3rem 0;position:relative;padding-left:1.5rem;color:#555}
.baurecht .topic-card ul li:before{content:"✓";position:absolute;left:0;color:#27ae60;font-weight:700}
.baurecht .kosten{background:#fff}
.baurecht .cost-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-top:2rem}
.baurecht .cost-card{
background:var(--grad-number);color:#fff;padding:2rem;border-radius:15px;text-align:center;box-shadow:var(--shadow-lg);
transition:transform var(--tr)
}
.baurecht .cost-card:is(:hover,:focus-within){transform:translateY(-5px)}
.baurecht .cost-card h3{margin-bottom:1rem;font-size:1.5rem}
.baurecht .cost-card .price{font-size:2.5rem;font-weight:700;margin:1rem 0;color:#fff}
.baurecht .cost-card p{margin-bottom:1.5rem;opacity:.9}
.baurecht .cost-card ul{list-style:none;padding:0;text-align:left}
.baurecht .cost-card ul li{padding:.5rem 0;position:relative;padding-left:1.5rem}
.baurecht .cost-card ul li:before{content:"✓";position:absolute;left:0;color:#fff;font-weight:700}
.baurecht .kontakt{background:var(--c-bg)}
.baurecht .contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-top:2rem}
.baurecht .contact-card{
background:#fff;padding:2rem;border-radius:15px;text-align:center;box-shadow:var(--shadow-md);transition:all var(--tr)
}
.baurecht .contact-card:is(:hover,:focus-within){transform:translateY(-5px);box-shadow:0 10px 30px rgba(0,0,0,.15)}
.baurecht .contact-card h3{color:var(--c-primary);margin-bottom:1rem;font-size:1.4rem}
.baurecht .contact-card .phone-large{font-size:2rem;font-weight:700;color:var(--c-accent);margin:1rem 0}
.baurecht .contact-card p{margin-bottom:.8rem;line-height:1.6}
.baurecht .contact-card a{color:var(--c-primary);text-decoration:none;font-weight:700}
.baurecht .contact-card a:is(:hover,:focus){color:var(--c-accent)}
.baurecht .phone-numbers .numbers-grid .number-card:first-child{grid-column:1/-1;max-width:600px;margin:0 auto}
@media (max-width:768px){
.baurecht .topics-grid,.baurecht .cost-grid,.baurecht .contact-grid{grid-template-columns:1fr;gap:1.5rem;padding:0 1rem}
.baurecht .topic-card,.baurecht .cost-card,.baurecht .contact-card{padding:1.5rem}
.baurecht .topic-card .icon{font-size:2.5rem}
.baurecht .cost-card .price{font-size:2rem}
.baurecht .contact-card .phone-large{font-size:1.6rem}
}
@media (max-width:480px){
.baurecht .topic-card,.baurecht .cost-card,.baurecht .contact-card{padding:1.2rem}
.baurecht .topic-card .icon{font-size:2rem}
.baurecht .cost-card .price{font-size:1.8rem}
.baurecht .contact-card .phone-large{font-size:1.4rem}
}
/* Visuelle/Warning Upgrades (baurecht) */
.baurecht .section-title{position:relative;padding-bottom:1rem}
.baurecht .section-title:after{
content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:80px;height:3px;
background:linear-gradient(90deg,var(--c-primary),var(--c-accent));border-radius:2px
}
.baurecht .warning{position:relative;overflow:hidden}
.baurecht .warning::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--c-accent),var(--c-accent-2))}
/* ==========================================================================
Arbeitsrecht – Infografik & Sektionen
========================================================================== */
.arbeitsrecht .arbeitsrecht-infografik{background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);padding:4rem 0}
.arbeitsrecht .infografik-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;margin-top:2rem}
.arbeitsrecht .info-card{
background:#fff;padding:2rem;border-radius:15px;text-align:center;box-shadow:0 8px 25px rgba(0,0,0,.1);
transition:all var(--tr);border-left:5px solid transparent
}
.arbeitsrecht .info-card:hover{transform:translateY(-5px);box-shadow:0 15px 35px rgba(0,0,0,.15)}
.arbeitsrecht .info-card.kündigung{border-left-color:var(--c-accent)}
.arbeitsrecht .info-card.lohn{border-left-color:#28a745}
.arbeitsrecht .info-card.urlaub{border-left-color:#17a2b8}
.arbeitsrecht .info-card.arbeitszeit{border-left-color:#ffc107}
.arbeitsrecht .info-icon{font-size:3rem;margin-bottom:1rem;height:80px;display:flex;align-items:center;justify-content:center}
.arbeitsrecht .info-card h3{color:var(--c-primary);margin-bottom:1.5rem;font-size:1.4rem}
.arbeitsrecht .info-content p{margin-bottom:.8rem;text-align:left;font-size:.95rem;line-height:1.5}
.arbeitsrecht .info-content p strong{color:var(--c-primary)}
.arbeitsrecht .costs{background:#fff;padding:4rem 0}
.arbeitsrecht .costs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:2rem}
.arbeitsrecht .cost-card{
background:var(--c-bg);padding:2rem;border-radius:15px;text-align:center;box-shadow:var(--shadow-md);transition:all var(--tr);border:2px solid transparent
}
.arbeitsrecht .cost-card:hover{transform:translateY(-5px);box-shadow:0 10px 30px rgba(0,0,0,.15)}
.arbeitsrecht .cost-card.primary{background:var(--grad-primary);color:#fff;border-color:var(--c-accent)}
.arbeitsrecht .cost-card.notfall{background:linear-gradient(135deg,#ff6b35,#f7971e);color:#fff}
.arbeitsrecht .cost-card h3{margin-bottom:1rem;font-size:1.3rem;color:var(--c-primary)}
.arbeitsrecht .cost-card.primary h3,.arbeitsrecht .cost-card.notfall h3{color:#fff}
.arbeitsrecht .price{font-size:2.5rem;font-weight:700;margin:1rem 0;color:var(--c-primary)}
.arbeitsrecht .cost-card.primary .price,.arbeitsrecht .cost-card.notfall .price{color:#fff}
.arbeitsrecht .price span{font-size:1rem;font-weight:400;opacity:.8}
.arbeitsrecht .cost-card ul{list-style:none;text-align:left;margin:1.5rem 0;padding:0}
.arbeitsrecht .cost-card ul li{padding:.3rem 0;font-size:.95rem}
.arbeitsrecht .mobile-warning{background:rgba(255,107,53,.1);padding:.8rem;border-radius:8px;margin-top:1rem;font-size:.9rem;color:#856404}
.arbeitsrecht .cost-card.primary .mobile-warning{background:rgba(255,255,255,.2);color:rgba(255,255,255,.9)}
.arbeitsrecht .contact{background:var(--c-bg);padding:4rem 0}
.arbeitsrecht .contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:2rem}
.arbeitsrecht .contact-card{
background:#fff;padding:2rem;border-radius:15px;text-align:center;box-shadow:var(--shadow-md);transition:all var(--tr)
}
.arbeitsrecht .contact-card:hover{transform:translateY(-5px);box-shadow:0 10px 30px rgba(0,0,0,.15)}
.arbeitsrecht .contact-card h3{color:var(--c-primary);margin-bottom:1rem;font-size:1.3rem}
.arbeitsrecht .contact-phone,.arbeitsrecht .contact-email{
display:inline-block;font-size:1.5rem;font-weight:700;color:var(--c-accent);text-decoration:none;margin:1rem 0;
padding:.8rem 1.5rem;border:2px solid var(--c-accent);border-radius:25px;transition:all var(--tr)
}
.arbeitsrecht .contact-phone:is(:hover,:focus),.arbeitsrecht .contact-email:is(:hover,:focus){
background:var(--c-accent);color:#fff;transform:translateY(-2px)
}
.arbeitsrecht .contact-note{font-size:.9rem;color:#666;margin-top:.5rem}
.arbeitsrecht .contact-card address{font-style:normal;line-height:1.6;color:#555}
@media (prefers-contrast: high){
.arbeitsrecht .number-card,.arbeitsrecht .info-card,.arbeitsrecht .cost-card,.arbeitsrecht .contact-card{border:2px solid #fff}
}
/* ==========================================================================
Familienrecht – Page Specific
========================================================================== */
.familienrecht .familienrecht-hero{
background:linear-gradient(135deg,rgba(233,30,99,.9),rgba(156,39,176,.9));position:relative;overflow:hidden
}
.familienrecht .familienrecht-hero::before{
content:'';position:absolute;inset:0;
background:url('data:image/svg+xml,') center/cover
}
.familienrecht .services-overview{
background:linear-gradient(135deg,#f8f9fa,#fff);border-radius:20px;padding:2rem;margin-bottom:3rem;box-shadow:var(--shadow-lg)
}
.familienrecht .service-stats{
display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2rem;text-align:center
}
.familienrecht .stat-item{padding:1rem}
.familienrecht .stat-number{font-size:2.5rem;font-weight:700;color:#e91e63;margin-bottom:.5rem}
.familienrecht .stat-label{font-size:.9rem;color:#666;font-weight:500;text-transform:uppercase;letter-spacing:.5px}
.familienrecht .familienrecht-services .service-card{position:relative;overflow:hidden;transition:all .4s ease;border:2px solid transparent}
.familienrecht .familienrecht-services .service-card:hover{border-color:#e91e63;transform:translateY(-8px) scale(1.02)}
.familienrecht .familienrecht-services .service-card::before{
content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
background:linear-gradient(90deg,transparent,rgba(233,30,99,.1),transparent);transition:left .5s ease
}
.familienrecht .familienrecht-services .service-card:hover::before{left:100%}
.familienrecht .familienrecht-services .service-card ul{list-style:none;padding:1rem 0;margin:0}
.familienrecht .familienrecht-services .service-card li{padding:.3rem 0;color:#666;font-size:.9rem;position:relative;padding-left:1.2rem}
.familienrecht .familienrecht-services .service-card li::before{content:'✓';position:absolute;left:0;color:#e91e63;font-weight:700}
.familienrecht .costs{background:linear-gradient(135deg,#f8f9fa,#e3f2fd);padding:4rem 0}
.familienrecht .cost-comparison{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-bottom:3rem}
.familienrecht .cost-card{
background:#fff;border-radius:20px;padding:2rem;text-align:center;box-shadow:var(--shadow-lg);position:relative;transition:all var(--tr)
}
.familienrecht .cost-card:hover{transform:translateY(-5px)}
.familienrecht .cost-card.featured{background:linear-gradient(135deg,#e91e63,#9c27b0);color:#fff;transform:scale(1.05)}
.familienrecht .cost-card.featured::before{
content:'EMPFOHLEN';position:absolute;top:-10px;right:20px;background:var(--c-accent);color:#fff;padding:.3rem 1rem;border-radius:15px;
font-size:.8rem;font-weight:700
}
.familienrecht .cost-card h3{margin-bottom:1.5rem;font-size:1.3rem}
.familienrecht .price{font-size:3rem;font-weight:700;color:#e91e63;margin-bottom:.5rem}
.familienrecht .cost-card.featured .price{color:#fff}
.familienrecht .price-label{font-size:1rem;color:#666;margin-bottom:2rem}
.familienrecht .cost-card.featured .price-label{color:rgba(255,255,255,.9)}
.familienrecht .cost-card ul{list-style:none;text-align:left;padding:0}
.familienrecht .cost-card li{padding:.5rem 0;padding-left:1.5rem;position:relative;color:#666}
.familienrecht .cost-card.featured li{color:rgba(255,255,255,.9)}
.familienrecht .cost-card li::before{content:'✓';position:absolute;left:0;color:#4caf50;font-weight:700}
.familienrecht .cost-card.featured li::before{color:#fff}
.familienrecht .cost-details{background:#fff;border-radius:20px;padding:2rem;box-shadow:var(--shadow-lg)}
.familienrecht .cost-details h3{text-align:center;margin-bottom:2rem;color:#e91e63}
.familienrecht .cost-table{display:grid;gap:1rem}
.familienrecht .cost-row{
display:grid;grid-template-columns:100px 150px 100px 1fr;gap:1rem;padding:1rem;background:var(--c-bg);border-radius:10px;align-items:center;
transition:all var(--tr)
}
.familienrecht .cost-row:hover{background:#e1f5fe;transform:translateX(10px)}
.familienrecht .cost-row .duration{font-weight:700;color:#e91e63}
.familienrecht .cost-row .calculation{font-family:monospace;background:#fff;padding:.3rem .8rem;border-radius:5px;border:1px solid #ddd}
.familienrecht .cost-row .total{font-weight:700;color:#2e7d32;font-size:1.1rem}
.familienrecht .cost-row .use-case{color:#666;font-style:italic}
.familienrecht .contact{background:linear-gradient(135deg,var(--c-primary),var(--c-primary-2));color:#fff;padding:4rem 0}
.familienrecht .contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:3rem}
.familienrecht .contact-info h3,.familienrecht .contact-form h3{color:#fff;margin-bottom:2rem}
.familienrecht .contact-item{
display:flex;align-items:center;gap:1rem;margin-bottom:2rem;padding:1rem;background:rgba(255,255,255,.1);
border-radius:10px;transition:all var(--tr)
}
.familienrecht .contact-item:hover{background:rgba(255,255,255,.2);transform:translateX(10px)}
.familienrecht .contact-icon{
font-size:2rem;width:60px;height:60px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.2);border-radius:50%
}
.familienrecht .contact-form{background:rgba(255,255,255,.1);padding:2rem;border-radius:20px}
.familienrecht .email-info{background:rgba(255,255,255,.1);padding:1.5rem;border-radius:10px;margin-top:1.5rem}
.familienrecht .email-info h4{margin-bottom:1rem;color:#fff}
.familienrecht .email-info ul{list-style:none;padding:0}
.familienrecht .email-info li{padding:.3rem 0;color:rgba(255,255,255,.9)}
@keyframes heartbeat{
0%,20%,50%,80%,100%{transform:scale(1)} 40%{transform:scale(1.1)} 60%{transform:scale(1.05)}
}
.familienrecht .familienrecht-services .service-card .icon{animation:heartbeat 2s infinite}
.familienrecht .familienrecht-services .service-card:hover .icon{animation:none;transform:scale(1.2)}
@media (prefers-color-scheme: dark){
.familienrecht .services-overview{background:linear-gradient(135deg,#2d2d2d,#1a1a1a);color:#fff}
.familienrecht .stat-label{color:#ccc}
.familienrecht .cost-details{background:#2d2d2d;color:#fff}
.familienrecht .cost-row{background:#1a1a1a;color:#fff}
.familienrecht .cost-row:hover{background:#3d3d3d}
}
@media (max-width:768px){
.familienrecht .service-stats{grid-template-columns:repeat(2,1fr);gap:1rem}
.familienrecht .stat-number{font-size:2rem}
.familienrecht .cost-comparison{grid-template-columns:1fr}
.familienrecht .cost-card.featured{transform:none}
.familienrecht .cost-row{grid-template-columns:1fr;text-align:center}
.familienrecht .contact-grid{grid-template-columns:1fr}
}
@media (max-width:480px){
.familienrecht .service-stats{grid-template-columns:1fr}
.familienrecht .services-overview{padding:1.5rem}
.familienrecht .stat-number{font-size:1.8rem}
.familienrecht .cost-details{padding:1.5rem}
.familienrecht .contact-item{flex-direction:column;text-align:center}
}
@media print{
.familienrecht .familienrecht-hero,.familienrecht .contact,.familienrecht .cta-buttons{display:none!important}
.familienrecht .service-stats,.familienrecht .cost-comparison{display:block!important}
.familienrecht .cost-card{break-inside:avoid;margin-bottom:1rem}
}
/* ==========================================================================
Sozialrecht – Page Specific
========================================================================== */
.sozialrecht .sozialrecht-overview{padding:4rem 0;background:var(--c-bg)}
.sozialrecht .overview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-bottom:3rem}
.sozialrecht .overview-card{
background:#fff;padding:2rem;border-radius:15px;text-align:center;box-shadow:var(--shadow-md);transition:all var(--tr);border-top:4px solid var(--c-primary)
}
.sozialrecht .overview-card:hover{transform:translateY(-5px);box-shadow:0 10px 30px rgba(0,0,0,.15)}
.sozialrecht .overview-card .icon{font-size:3rem;margin-bottom:1rem;display:block}
.sozialrecht .overview-card h3{color:var(--c-primary);margin-bottom:1rem;font-size:1.5rem}
.sozialrecht .overview-card p{color:var(--c-muted);line-height:1.6}
.sozialrecht .info-highlight{
background:var(--grad-number);color:#fff;padding:2rem;border-radius:15px;text-align:center;font-size:1.2rem;margin-top:2rem
}
/* ==========================================================================
Steuerrecht – Page Specific (scoped, tokens)
========================================================================== */
.steuerrecht{
--tax-primary:#2e8b57; --tax-primary-2:#3cb371; --tax-aux:#20b2aa;
--tax-grad:linear-gradient(135deg,var(--tax-primary) 0%,var(--tax-primary-2) 50%,var(--tax-aux) 100%);
}
/* Print (nur Steuerrecht) */
@media print{
.steuerrecht .steuerrecht-hero,
.steuerrecht .steuerrecht-stats,
.steuerrecht .steuerrecht-cta,
.steuerrecht .kontakt-section{
background:none!important;color:#333!important;box-shadow:none!important
}
.steuerrecht .stat-card,
.steuerrecht .problem-card,
.steuerrecht .kosten-card,
.steuerrecht .kontakt-card{
background:none!important;border:1px solid #ccc;color:#333!important;box-shadow:none!important
}
.steuerrecht .btn-primary,
.steuerrecht .btn-secondary,
.steuerrecht .btn-cta{
background:none!important;color:#333!important;border:1px solid #333
}
}
.steuerrecht .steuerrecht-hero{background:var(--tax-grad);position:relative;overflow:hidden}
.steuerrecht .steuerrecht-hero::before{
content:"";position:absolute;inset:0;
background:url('data:image/svg+xml,') repeat;
opacity:.3
}
.steuerrecht .hero-content{position:relative;z-index:2}
.steuerrecht .hero-features{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}
.steuerrecht .feature-pill{
background:rgba(255,255,255,.2);backdrop-filter:blur(10px);padding:.5rem 1rem;border-radius:25px;font-size:.9rem;font-weight:700;
border:1px solid rgba(255,255,255,.3)
}
/* Stats */
.steuerrecht .steuerrecht-stats{background:var(--c-bg);padding:3rem 0;border-bottom:1px solid var(--c-border)}
.steuerrecht .stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;max-width:1000px;margin:0 auto}
.steuerrecht .stat-card{
background:#fff;padding:2rem;border-radius:var(--r-15);text-align:center;box-shadow:var(--shadow-md);transition:transform var(--tr)
}
.steuerrecht .stat-card:hover{transform:translateY(-5px)}
.steuerrecht .stat-icon{font-size:2.5rem;margin-bottom:1rem;color:var(--tax-primary)}
.steuerrecht .stat-number{font-size:2.5rem;font-weight:700;color:var(--tax-primary);margin-bottom:.5rem}
.steuerrecht .stat-label{font-size:1rem;color:var(--c-muted);font-weight:500}
/* Probleme */
.steuerrecht .steuer-probleme{background:var(--c-bg);padding:4rem 0}
.steuerrecht .problems-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem}
.steuerrecht .problem-card{
background:#fff;padding:2rem;border-radius:var(--r-15);box-shadow:var(--shadow-md);transition:all var(--tr);border-left:4px solid var(--tax-primary)
}
.steuerrecht .problem-card:hover{transform:translateY(-5px);box-shadow:0 10px 30px rgba(0,0,0,.15)}
.steuerrecht .problem-icon{font-size:2.5rem;color:var(--tax-primary);margin-bottom:1rem;text-align:center}
.steuerrecht .problem-card h3{color:var(--tax-primary);margin-bottom:1rem;font-size:1.3rem}
.steuerrecht .problem-features{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.steuerrecht .problem-features span{background:#e8f5e8;color:var(--tax-primary);padding:.3rem .8rem;border-radius:15px;font-size:.8rem;font-weight:500}
/* Kosten */
.steuerrecht .kosten-section{background:#fff;padding:4rem 0}
.steuerrecht .kosten-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;max-width:1200px;margin:0 auto}
.steuerrecht .kosten-card{
background:var(--c-bg);border-radius:var(--r-15);padding:2rem;text-align:center;box-shadow:var(--shadow-md);transition:transform var(--tr);
position:relative;overflow:hidden
}
.steuerrecht .kosten-card:hover{transform:translateY(-5px)}
.steuerrecht .kosten-card.primary{
background:linear-gradient(135deg,var(--tax-primary) 0%,var(--tax-primary-2) 100%);color:#fff;transform:scale(1.05)
}
.steuerrecht .kosten-card.primary:hover{transform:scale(1.05) translateY(-5px)}
.steuerrecht .kosten-card.primary::before{
content:"EMPFOHLEN";position:absolute;top:20px;right:-30px;background:var(--c-accent);color:#fff;padding:.3rem 2rem;font-size:.8rem;font-weight:700;transform:rotate(45deg)
}
.steuerrecht .kosten-card h3{margin-bottom:1rem;color:var(--tax-primary)}
.steuerrecht .kosten-card.primary h3{color:#fff}
.steuerrecht .preis{font-size:3rem;font-weight:700;color:var(--tax-primary);margin-bottom:.5rem}
.steuerrecht .kosten-card.primary .preis{color:#fff}
.steuerrecht .preis-info{font-size:1rem;color:var(--c-muted);margin-bottom:2rem}
.steuerrecht .kosten-card.primary .preis-info{color:rgba(255,255,255,.9)}
.steuerrecht .kosten-features{list-style:none;padding:0;margin:0 0 2rem 0;text-align:left}
.steuerrecht .kosten-features li{padding:.5rem 0;border-bottom:1px solid var(--c-border)}
.steuerrecht .kosten-card.primary .kosten-features li{border-bottom:1px solid rgba(255,255,255,.2)}
.steuerrecht .kosten-note{
font-size:.9rem;color:var(--c-muted);font-style:italic;border-top:1px solid var(--c-border);padding-top:1rem
}
.steuerrecht .kosten-card.primary .kosten-note{color:rgba(255,255,255,.8);border-top:1px solid rgba(255,255,255,.2)}
.steuerrecht .kosten-vergleich{
background:#e8f5e8;border:1px solid var(--tax-primary);border-radius:var(--r-15);padding:2rem;margin-top:3rem;text-align:center
}
.steuerrecht .kosten-vergleich h3{color:var(--tax-primary);margin-bottom:1rem}
/* Kontakt */
.steuerrecht .kontakt-section{background:var(--c-bg);padding:4rem 0}
.steuerrecht .kontakt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-bottom:3rem}
.steuerrecht .kontakt-card{
background:#fff;padding:2rem;border-radius:var(--r-15);text-align:center;box-shadow:var(--shadow-md);transition:transform var(--tr)
}
.steuerrecht .kontakt-card:hover{transform:translateY(-5px)}
.steuerrecht .kontakt-card.hotline{border-top:4px solid var(--tax-primary)}
.steuerrecht .kontakt-card.email{border-top:4px solid var(--c-primary)}
.steuerrecht .kontakt-card.notdienst{border-top:4px solid var(--c-accent)}
.steuerrecht .kontakt-phone,.steuerrecht .kontakt-email{font-size:1.5rem;font-weight:700;margin:1rem 0}
.steuerrecht .kontakt-phone a,.steuerrecht .kontakt-email a{color:var(--tax-primary);text-decoration:none}
.steuerrecht .kontakt-info{display:flex;gap:1rem;justify-content:center;margin-top:1rem}
.steuerrecht .kontakt-info span{background:#e8f5e8;color:var(--tax-primary);padding:.3rem .8rem;border-radius:15px;font-size:.8rem;font-weight:500}
.steuerrecht .kontakt-impressum{background:#fff;padding:2rem;border-radius:var(--r-15);box-shadow:var(--shadow-md);text-align:center}
.steuerrecht .kontakt-impressum h4{color:var(--tax-primary);margin-bottom:1rem}
/* CTA */
.steuerrecht .steuerrecht-cta{background:linear-gradient(135deg,var(--tax-primary),var(--tax-primary-2));color:#fff;padding:4rem 0;text-align:center}
.steuerrecht .steuerrecht-cta h2{margin-bottom:1rem;font-size:2.5rem}
.steuerrecht .steuerrecht-cta p{font-size:1.2rem;margin-bottom:2rem;opacity:.9}
.steuerrecht .btn-cta{
background:#fff;color:var(--tax-primary);padding:1rem 2rem;border-radius:50px;text-decoration:none;font-weight:700;font-size:1.1rem;
display:inline-block;transition:all var(--tr);box-shadow:0 5px 20px rgba(0,0,0,.2)
}
.steuerrecht .btn-cta:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,.3)}
.steuerrecht .cta-note{margin-top:1rem;font-size:.9rem;opacity:.8}
/* A11y & HC/RM (lokal) */
.steuerrecht .steuerrecht-hero .hero-content h1:focus,
.steuerrecht .steuerrecht-stats .stat-card:focus,
.steuerrecht .problem-card:focus,
.steuerrecht .kosten-card:focus,
.steuerrecht .kontakt-card:focus{outline:2px solid var(--c-accent);outline-offset:2px}
@media (prefers-contrast: high){
.steuerrecht .stat-card,.steuerrecht .problem-card,.steuerrecht .kosten-card,.steuerrecht .kontakt-card{border:2px solid #333}
.steuerrecht .feature-pill{border:2px solid #fff}
.steuerrecht .btn-cta{border:2px solid var(--tax-primary)}
}
@media (prefers-reduced-motion: reduce){
.steuerrecht .stat-card,.steuerrecht .problem-card,.steuerrecht .kosten-card,.steuerrecht .kontakt-card,.steuerrecht .btn-cta{transition:none!important}
.steuerrecht .stat-card:hover,.steuerrecht .problem-card:hover,.steuerrecht .kosten-card:hover,.steuerrecht .kontakt-card:hover{transform:none!important}
}
/* Responsive (steuerrecht) */
@media (max-width:768px){
.steuerrecht .steuerrecht-hero h1{font-size:2rem;line-height:1.2}
.steuerrecht .hero-features{flex-direction:column;align-items:center}
.steuerrecht .feature-pill{width:100%;max-width:200px;text-align:center}
.steuerrecht .stats-grid{grid-template-columns:repeat(2,1fr);gap:1rem}
.steuerrecht .stat-card{padding:1.5rem}
.steuerrecht .stat-number{font-size:2rem}
.steuerrecht .problems-grid{grid-template-columns:1fr;gap:1.5rem;padding:0 1rem}
.steuerrecht .problem-card{padding:1.5rem}
.steuerrecht .problem-features{flex-direction:column}
.steuerrecht .kosten-grid{grid-template-columns:1fr;gap:1.5rem}
.steuerrecht .kosten-card.primary{transform:none}
.steuerrecht .kosten-card.primary:hover{transform:translateY(-5px)}
.steuerrecht .preis{font-size:2.5rem}
.steuerrecht .kontakt-grid{grid-template-columns:1fr;gap:1.5rem}
.steuerrecht .kontakt-info{flex-direction:column;gap:.5rem}
.steuerrecht .steuerrecht-cta h2{font-size:2rem}
.steuerrecht .btn-cta{font-size:1rem;padding:1rem 1.5rem;word-break:break-word}
}
@media (max-width:480px){
.steuerrecht .stats-grid{grid-template-columns:1fr}
.steuerrecht .stat-card{padding:1rem}
.steuerrecht .problem-card{padding:1rem}
.steuerrecht .problem-icon{font-size:2rem}
.steuerrecht .kosten-card{padding:1.5rem}
.steuerrecht .preis{font-size:2rem}
.steuerrecht .kontakt-card{padding:1.5rem}
.steuerrecht .kontakt-phone,.steuerrecht .kontakt-email{font-size:1.2rem}
.steuerrecht .steuerrecht-cta h2{font-size:1.8rem}
.steuerrecht .steuerrecht-cta p{font-size:1rem}
}
/* ==========================================================================
Vertragsrecht – Page Specific (scoped, tokens)
========================================================================== */
.vertragsrecht{ --ctr-grad:var(--grad-number); }
.vertragsrecht .contract-stats{background:var(--ctr-grad);padding:3rem 0;color:#fff}
.vertragsrecht .stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;margin-top:1rem}
.vertragsrecht .stat-card{
text-align:center;padding:1.5rem;background:rgba(255,255,255,.1);border-radius:var(--r-15);
backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);transition:transform var(--tr)
}
.vertragsrecht .stat-card:hover{transform:translateY(-5px);background:rgba(255,255,255,.15)}
.vertragsrecht .stat-number{font-size:3rem;font-weight:700;margin-bottom:.5rem;color:#fff}
.vertragsrecht .stat-text{font-size:1.1rem;opacity:.9}
.vertragsrecht .contract-types{background:var(--c-bg);padding:4rem 0}
.vertragsrecht .contract-types-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:2rem}
.vertragsrecht .contract-type-card{
background:#fff;padding:2rem;border-radius:var(--r-15);box-shadow:var(--shadow-lg);
transition:all var(--tr);border-top:4px solid var(--c-primary)
}
.vertragsrecht .contract-type-card:hover{transform:translateY(-10px);box-shadow:0 20px 40px rgba(0,0,0,.15)}
.vertragsrecht .contract-icon{font-size:3rem;text-align:center;margin-bottom:1rem}
.vertragsrecht .contract-type-card h3{color:var(--c-primary);margin-bottom:1rem;font-size:1.4rem;text-align:center}
.vertragsrecht .contract-type-card p{margin-bottom:1.5rem;line-height:1.6;color:var(--c-muted)}
.vertragsrecht .contract-features{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}
.vertragsrecht .contract-features span{background:#e3f2fd;color:#1565c0;padding:.3rem .8rem;border-radius:20px;font-size:.9rem;font-weight:500}
.vertragsrecht .contract-btn{
display:block;background:var(--c-accent);color:#fff;text-decoration:none;padding:.8rem 1.5rem;border-radius:25px;font-weight:700;text-align:center;
transition:all var(--tr)
}
.vertragsrecht .contract-btn:hover{background:var(--c-accent-2);transform:translateY(-2px)}
.vertragsrecht .cost-section{background:#fff;padding:4rem 0}
.vertragsrecht .cost-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;margin-top:2rem}
.vertragsrecht .cost-card{
background:var(--c-bg);padding:2rem;border-radius:var(--r-15);text-align:center;border:2px solid #e9ecef;transition:all var(--tr)
}
.vertragsrecht .cost-card.primary{background:var(--grad-primary);color:#fff;border-color:var(--c-primary)}
.vertragsrecht .cost-card:hover{transform:translateY(-5px);box-shadow:0 10px 30px rgba(0,0,0,.1)}
.vertragsrecht .cost-card h3{margin-bottom:1rem;font-size:1.3rem}
.vertragsrecht .cost-card.primary h3{color:#fff}
.vertragsrecht .price{font-size:2.5rem;font-weight:700;margin-bottom:.5rem;color:var(--c-primary)}
.vertragsrecht .cost-card.primary .price{color:#fff}
.vertragsrecht .price span{font-size:1rem;opacity:.7}
.vertragsrecht .cost-card>p{margin-bottom:1.5rem;opacity:.8}
.vertragsrecht .cost-card ul{list-style:none;padding:0;margin:0}
.vertragsrecht .cost-card li{padding:.5rem 0;border-bottom:1px solid rgba(0,0,0,.1)}
.vertragsrecht .cost-card.primary li{border-bottom-color:rgba(255,255,255,.2)}
.vertragsrecht .cost-card li:last-child{border-bottom:none}
.vertragsrecht .cost-note{
background:#fff3cd;border:1px solid #ffeaa7;color:#856404;padding:1.5rem;border-radius:var(--r-10);margin-top:2rem;text-align:center
}
.vertragsrecht .contact-section{background:var(--ctr-grad);padding:4rem 0;color:#fff}
.vertragsrecht .contact-section .section-title{color:#fff;margin-bottom:3rem}
.vertragsrecht .contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:2rem}
.vertragsrecht .contact-card{
background:rgba(255,255,255,.1);padding:2rem;border-radius:var(--r-15);text-align:center;backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.2);transition:all var(--tr)
}
.vertragsrecht .contact-card:hover{transform:translateY(-5px);background:rgba(255,255,255,.15)}
.vertragsrecht .contact-card h3{color:#fff;margin-bottom:1rem;font-size:1.4rem}
.vertragsrecht .contact-phone{font-size:2rem;font-weight:700;color:#fff;margin:1rem 0}
.vertragsrecht .contact-email{font-size:1.3rem;color:#fff;margin:1rem 0;word-break:break-word}
.vertragsrecht .contact-card address{font-style:normal;line-height:1.6;margin:1rem 0}
.vertragsrecht .contact-btn{
display:inline-block;background:var(--c-accent);color:#fff;text-decoration:none;padding:1rem 2rem;border-radius:25px;font-weight:700;margin-top:1rem;
transition:all var(--tr)
}
.vertragsrecht .contact-btn:hover{background:var(--c-accent-2);transform:translateY(-2px)}
@media (max-width:768px){
.vertragsrecht .stats-grid{grid-template-columns:repeat(2,1fr);gap:1rem}
.vertragsrecht .stat-card{padding:1rem}
.vertragsrecht .stat-number{font-size:2rem}
.vertragsrecht .contract-types-grid,
.vertragsrecht .cost-grid,
.vertragsrecht .contact-grid{grid-template-columns:1fr;gap:1.5rem;padding:0 1rem}
.vertragsrecht .contract-type-card{padding:1.5rem}
.vertragsrecht .contract-features{justify-content:center}
.vertragsrecht .price{font-size:2rem}
.vertragsrecht .contact-phone{font-size:1.5rem}
.vertragsrecht .contact-email{font-size:1.1rem}
}
@media (max-width:480px){
.vertragsrecht .stats-grid{grid-template-columns:1fr}
.vertragsrecht .stat-number{font-size:1.8rem}
.vertragsrecht .contract-type-card{padding:1.2rem}
.vertragsrecht .contract-icon{font-size:2.5rem}
.vertragsrecht .cost-card,.vertragsrecht .contact-card{padding:1.5rem}
}
@media print{
.vertragsrecht .contract-stats,
.vertragsrecht .cost-section,
.vertragsrecht .contact-section{background:none!important;color:#333!important}
.vertragsrecht .stat-card,
.vertragsrecht .contract-type-card,
.vertragsrecht .cost-card,
.vertragsrecht .contact-card{background:none!important;color:#333!important;border:1px solid #ccc;box-shadow:none!important}
.vertragsrecht .contract-btn,.vertragsrecht .contact-btn{background:none!important;color:#333!important;border:1px solid #333}
}
+
/* ==========================================================================
Kosten & Kontakt Sections - Zusätzliches CSS
========================================================================== */
/* Kosten Section - Spezifische Styles für die neue Section */
.kosten-section {
background: #fff;
padding: 4rem 0;
position: relative;
overflow: hidden;
}
.kosten-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
}
.kosten-intro {
text-align: center;
max-width: 800px;
margin: 0 auto 3rem auto;
font-size: 1.1rem;
color: var(--c-muted);
line-height: 1.8;
}
.kosten-section .kosten-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.kosten-section .kosten-card {
background: var(--c-bg);
padding: 2.5rem;
border-radius: var(--r-15);
text-align: center;
box-shadow: var(--shadow-md);
transition: all var(--tr);
border: 2px solid transparent;
position: relative;
overflow: hidden;
}
.kosten-section .kosten-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 35px rgba(0,0,0,.15);
border-color: var(--c-primary);
}
.kosten-section .kosten-card::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(30,60,114,.03), transparent);
transition: left .5s ease;
pointer-events: none;
}
.kosten-section .kosten-card:hover::before {
left: 100%;
}
.kosten-section .kosten-card.primary-kosten {
background: var(--grad-primary);
color: #fff;
border-color: var(--c-accent);
transform: scale(1.05);
}
.kosten-section .kosten-card.primary-kosten:hover {
transform: scale(1.05) translateY(-8px);
box-shadow: 0 20px 40px rgba(30,60,114,.25);
border-color: var(--c-accent);
}
.kosten-section .kosten-card.primary-kosten::after {
content: "EMPFOHLEN";
position: absolute;
top: 20px;
right: -30px;
background: var(--c-accent);
color: #fff;
padding: .3rem 2rem;
font-size: .8rem;
font-weight: 700;
transform: rotate(45deg);
box-shadow: 0 2px 10px rgba(255,107,53,.3);
}
.kosten-section .kosten-card.notdienst-kosten {
background: linear-gradient(135deg, #ff6b35, #f7971e);
color: #fff;
border-color: #ff6b35;
}
.kosten-icon {
font-size: 3.5rem;
margin-bottom: 1.5rem;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
}
.kosten-section .kosten-card h3 {
margin-bottom: 1rem;
font-size: 1.5rem;
color: var(--c-primary);
}
.kosten-section .kosten-card.primary-kosten h3,
.kosten-section .kosten-card.notdienst-kosten h3 {
color: #fff;
}
.kosten-preis {
font-size: 3rem;
font-weight: 700;
color: var(--c-accent);
margin: 1rem 0;
line-height: 1;
}
.kosten-section .kosten-card.primary-kosten .kosten-preis,
.kosten-section .kosten-card.notdienst-kosten .kosten-preis {
color: #fff;
}
.kosten-preis-info {
font-size: 1rem;
color: var(--c-muted);
margin-bottom: 2rem;
opacity: .8;
}
.kosten-section .kosten-card.primary-kosten .kosten-preis-info,
.kosten-section .kosten-card.notdienst-kosten .kosten-preis-info {
color: rgba(255,255,255,.9);
}
.kosten-section .kosten-features {
list-style: none;
padding: 0;
margin: 1.5rem 0;
text-align: left;
}
.kosten-section .kosten-features li {
padding: .8rem 0;
border-bottom: 1px solid var(--c-border);
position: relative;
padding-left: 2rem;
font-size: .95rem;
}
.kosten-section .kosten-card.primary-kosten .kosten-features li,
.kosten-section .kosten-card.notdienst-kosten .kosten-features li {
border-bottom-color: rgba(255,255,255,.2);
color: rgba(255,255,255,.95);
}
.kosten-section .kosten-features li::before {
content: "✓";
position: absolute;
left: 0;
color: #4caf50;
font-weight: 700;
}
.kosten-section .kosten-card.primary-kosten .kosten-features li::before,
.kosten-section .kosten-card.notdienst-kosten .kosten-features li::before {
color: #fff;
}
.kosten-section .kosten-features li:last-child {
border-bottom: none;
}
.kosten-mobile-warnung {
background: rgba(255,107,53,.1);
border: 1px solid rgba(255,107,53,.3);
color: #d63031;
padding: 1rem;
border-radius: var(--r-10);
margin-top: 1.5rem;
font-size: .9rem;
font-weight: 600;
}
.kosten-section .kosten-card.primary-kosten .kosten-mobile-warnung,
.kosten-section .kosten-card.notdienst-kosten .kosten-mobile-warnung {
background: rgba(255,255,255,.2);
border-color: rgba(255,255,255,.3);
color: rgba(255,255,255,.9);
}
.kosten-vergleich {
background: linear-gradient(135deg, #e8f5e8, #f0f8ff);
border: 2px solid var(--c-primary);
border-radius: var(--r-15);
padding: 2.5rem;
margin-top: 3rem;
text-align: center;
position: relative;
}
.kosten-vergleich::before {
content: "💡";
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
background: var(--c-primary);
color: #fff;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
}
.kosten-vergleich h3 {
color: var(--c-primary);
margin-bottom: 1rem;
font-size: 1.4rem;
}
/* Kontakt Section - Spezifische Styles für die neue Section */
.kontakt-section {
background: var(--c-bg);
padding: 4rem 0;
position: relative;
}
.kontakt-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--c-accent), var(--c-primary));
}
.kontakt-intro {
text-align: center;
max-width: 700px;
margin: 0 auto 3rem auto;
font-size: 1.1rem;
color: var(--c-muted);
}
.kontakt-section .kontakt-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.kontakt-section .kontakt-card {
background: #fff;
padding: 2.5rem;
border-radius: var(--r-15);
text-align: center;
box-shadow: var(--shadow-md);
transition: all var(--tr);
border-top: 5px solid transparent;
position: relative;
}
.kontakt-section .kontakt-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0,0,0,.15);
}
.kontakt-section .kontakt-card.telefon-kontakt {
border-top-color: var(--c-primary);
}
.kontakt-section .kontakt-card.email-kontakt {
border-top-color: var(--c-accent);
}
.kontakt-section .kontakt-card.notdienst-kontakt {
border-top-color: #ff6b35;
}
.kontakt-icon {
font-size: 3.5rem;
margin-bottom: 1.5rem;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
color: var(--c-primary);
}
.kontakt-section .kontakt-card.email-kontakt .kontakt-icon {
color: var(--c-accent);
}
.kontakt-section .kontakt-card.notdienst-kontakt .kontakt-icon {
color: #ff6b35;
}
.kontakt-section .kontakt-card h3 {
margin-bottom: 1rem;
font-size: 1.4rem;
color: var(--c-primary);
}
.kontakt-phone-link,
.kontakt-email-link {
font-size: 1.8rem;
font-weight: 700;
color: var(--c-primary);
text-decoration: none;
display: inline-block;
margin: 1rem 0;
padding: 1rem 2rem;
border: 2px solid var(--c-primary);
border-radius: 30px;
transition: all var(--tr);
}
.kontakt-section .kontakt-card.email-kontakt .kontakt-email-link {
border-color: var(--c-accent);
font-size: 1.3rem;
}
.kontakt-section .kontakt-card.notdienst-kontakt .kontakt-phone-link {
border-color: #ff6b35;
}
.kontakt-phone-link:hover,
.kontakt-email-link:hover {
background: var(--c-primary);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(30,60,114,.3);
}
.kontakt-section .kontakt-card.email-kontakt .kontakt-email-link:hover {
background: var(--c-accent);
}
.kontakt-section .kontakt-card.notdienst-kontakt .kontakt-phone-link:hover {
background: #ff6b35;
}
.kontakt-info {
font-size: .9rem;
color: var(--c-muted);
margin: 1rem 0;
line-height: 1.6;
}
.kontakt-features {
display: flex;
flex-wrap: wrap;
gap: .5rem;
justify-content: center;
margin-top: 1.5rem;
}
.kontakt-features span {
background: #e3f2fd;
color: var(--c-primary);
padding: .3rem .8rem;
border-radius: 15px;
font-size: .8rem;
font-weight: 500;
}
.kontakt-section .kontakt-card.email-kontakt .kontakt-features span {
background: rgba(255,107,53,.1);
color: var(--c-accent);
}
.kontakt-section .kontakt-card.notdienst-kontakt .kontakt-features span {
background: rgba(255,107,53,.1);
color: #ff6b35;
}
.kontakt-unternehmen {
background: #fff;
padding: 2.5rem;
border-radius: var(--r-15);
box-shadow: var(--shadow-md);
text-align: center;
margin-top: 2rem;
border: 2px solid var(--c-border);
}
.kontakt-unternehmen h3 {
color: var(--c-primary);
margin-bottom: 2rem;
font-size: 1.5rem;
}
.unternehmen-info {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
text-align: left;
}
.unternehmen-details h4 {
color: var(--c-primary);
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: .5rem;
}
.unternehmen-details address {
font-style: normal;
line-height: 1.8;
color: var(--c-muted);
}
.unternehmen-details p {
margin: .5rem 0;
color: var(--c-muted);
}
.unternehmen-details a {
color: var(--c-primary);
text-decoration: none;
}
.unternehmen-details a:hover {
color: var(--c-accent);
}
/* Responsive - Kosten & Kontakt */
/* Cost button styling für Anwaltshotline */
.kosten-info-button {
margin-top: 1rem;
text-align: center;
}
.btn-kosten {
display: inline-block;
background: rgba(255, 255, 255, 0.1);
color: white;
padding: 0.5rem 1rem;
border-radius: 25px;
text-decoration: none;
font-size: 0.9rem;
border: 2px solid rgba(255, 255, 255, 0.3);
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.btn-kosten:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
/* Cost links in number cards */
.cost a {
color: inherit;
text-decoration: none;
transition: all 0.3s ease;
}
.cost a:hover {
text-decoration: underline;
opacity: 0.8;
}
/* Responsive Design */
@media (max-width: 768px) {
.btn-kosten {
font-size: 0.8rem;
padding: 0.4rem 0.8rem;
}
}
/* Cost button styling für Anwaltshotline */
.kosten-info-button {
margin-top: 1rem;
text-align: center;
}
.btn-kosten {
display: inline-block;
background: rgba(255, 255, 255, 0.1);
color: white;
padding: 0.5rem 1rem;
border-radius: 25px;
text-decoration: none;
font-size: 0.9rem;
border: 2px solid rgba(255, 255, 255, 0.3);
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.btn-kosten:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
/* Cost links in number cards - make them white */
.cost {
color: white !important;
text-decoration: none;
transition: all 0.3s ease;
}
.cost:hover {
text-decoration: none;
opacity: 0.8;
color: white !important;
}
/* Responsive Design */
@media (max-width: 768px) {
.btn-kosten {
font-size: 0.8rem;
padding: 0.4rem 0.8rem;
}
}
/* ==========================================================================
Arbeitsrecht - Zusätzliche Styles für fehlende Elemente
========================================================================== */
/* Arbeitsrecht Infografik - Erweiterte Styles */
.arbeitsrecht .arbeitsrecht-infografik {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 4rem 0;
position: relative;
overflow: hidden;
}
.arbeitsrecht .arbeitsrecht-infografik::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
}
.arbeitsrecht .infografik-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.arbeitsrecht .info-card {
background: #fff;
padding: 2rem;
border-radius: 15px;
text-align: center;
box-shadow: 0 8px 25px rgba(0,0,0,.1);
transition: all var(--tr);
border-left: 5px solid transparent;
position: relative;
overflow: hidden;
}
.arbeitsrecht .info-card::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(30,60,114,.03), transparent);
transition: left .5s ease;
pointer-events: none;
}
.arbeitsrecht .info-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0,0,0,.15);
}
.arbeitsrecht .info-card:hover::before {
left: 100%;
}
.arbeitsrecht .info-card.kündigung {
border-left-color: var(--c-accent);
}
.arbeitsrecht .info-card.lohn {
border-left-color: #28a745;
}
.arbeitsrecht .info-card.urlaub {
border-left-color: #17a2b8;
}
.arbeitsrecht .info-card.arbeitszeit {
border-left-color: #ffc107;
}
.arbeitsrecht .info-icon {
font-size: 3rem;
margin-bottom: 1rem;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
color: var(--c-primary);
}
.arbeitsrecht .info-card.kündigung .info-icon {
color: var(--c-accent);
}
.arbeitsrecht .info-card.lohn .info-icon {
color: #28a745;
}
.arbeitsrecht .info-card.urlaub .info-icon {
color: #17a2b8;
}
.arbeitsrecht .info-card.arbeitszeit .info-icon {
color: #ffc107;
}
.arbeitsrecht .info-card h3 {
color: var(--c-primary);
margin-bottom: 1.5rem;
font-size: 1.4rem;
}
.arbeitsrecht .info-content {
text-align: left;
}
.arbeitsrecht .info-content p {
margin-bottom: .8rem;
font-size: .95rem;
line-height: 1.5;
color: var(--c-muted);
}
.arbeitsrecht .info-content p strong {
color: var(--c-primary);
font-weight: 700;
}
/* Klickbare Telefonnummern als Buttons */
.arbeitsrecht .number-card .phone a {
display: inline-block;
color: white !important;
text-decoration: none;
transition: all 0.3s ease;
padding: 0.2rem 0.5rem;
border-radius: 8px;
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
}
.arbeitsrecht .number-card .phone a:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
text-decoration: none;
}
/* Cost links styling */
.arbeitsrecht .number-card .cost {
color: white !important;
text-decoration: none;
font-weight: 600;
display: inline-block;
padding: 0.5rem 1rem;
margin-top: 1rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.3);
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.arbeitsrecht .number-card .cost:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-2px);
text-decoration: none;
color: white !important;
}
/* Hero CTA Button Fix */
.arbeitsrecht .hero .cta-buttons .btn-primary {
background: var(--c-accent);
color: #fff;
padding: 1rem 2rem;
border-radius: 30px;
font-size: 1.1rem;
font-weight: 700;
text-decoration: none;
transition: all var(--tr);
display: inline-block;
border: none;
}
.arbeitsrecht .hero .cta-buttons .btn-primary:hover {
background: var(--c-accent-2);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(255, 107, 53, 0.3);
}
/* Kontakt Button Verbesserungen */
.arbeitsrecht .kontakt-phone-link,
.arbeitsrecht .kontakt-email-link {
display: inline-block;
font-size: 1.6rem;
font-weight: 700;
color: var(--c-primary);
text-decoration: none;
margin: 1rem 0;
padding: 1rem 2rem;
border: 3px solid var(--c-primary);
border-radius: 30px;
transition: all var(--tr);
position: relative;
overflow: hidden;
}
.arbeitsrecht .kontakt-phone-link::before,
.arbeitsrecht .kontakt-email-link::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: var(--c-primary);
transition: left 0.3s ease;
z-index: -1;
}
.arbeitsrecht .kontakt-phone-link:hover::before,
.arbeitsrecht .kontakt-email-link:hover::before {
left: 0;
}
.arbeitsrecht .kontakt-phone-link:hover,
.arbeitsrecht .kontakt-email-link:hover {
color: #fff;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(30, 60, 114, 0.3);
text-decoration: none;
}
.arbeitsrecht .kontakt-card.email-kontakt .kontakt-email-link {
border-color: var(--c-accent);
color: var(--c-accent);
}
.arbeitsrecht .kontakt-card.email-kontakt .kontakt-email-link::before {
background: var(--c-accent);
}
.arbeitsrecht .kontakt-card.notdienst-kontakt .kontakt-phone-link {
border-color: #ff6b35;
color: #ff6b35;
}
.arbeitsrecht .kontakt-card.notdienst-kontakt .kontakt-phone-link::before {
background: #ff6b35;
}
/* Responsive Anpassungen */
@media (max-width: 768px) {
.arbeitsrecht .infografik-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 0 1rem;
}
.arbeitsrecht .info-card {
padding: 1.5rem;
}
.arbeitsrecht .info-icon {
font-size: 2.5rem;
height: 60px;
}
.arbeitsrecht .info-card h3 {
font-size: 1.2rem;
}
.arbeitsrecht .kontakt-phone-link,
.arbeitsrecht .kontakt-email-link {
font-size: 1.3rem;
padding: 0.8rem 1.5rem;
}
.arbeitsrecht .number-card .phone a {
word-break: break-all;
}
}
@media (max-width: 480px) {
.arbeitsrecht .info-card {
padding: 1.2rem;
}
.arbeitsrecht .info-icon {
font-size: 2rem;
height: 50px;
}
.arbeitsrecht .info-card h3 {
font-size: 1.1rem;
}
.arbeitsrecht .info-content p {
font-size: 0.9rem;
}
.arbeitsrecht .kontakt-phone-link,
.arbeitsrecht .kontakt-email-link {
font-size: 1.1rem;
padding: 0.7rem 1.2rem;
}
}
/* Print Styles */
@media print {
.arbeitsrecht .arbeitsrecht-infografik,
.arbeitsrecht .kontakt-section {
background: none !important;
color: #333 !important;
}
.arbeitsrecht .info-card,
.arbeitsrecht .kontakt-card {
background: none !important;
color: #333 !important;
border: 1px solid #ccc;
box-shadow: none !important;
}
.arbeitsrecht .kontakt-phone-link,
.arbeitsrecht .kontakt-email-link {
background: none !important;
color: #333 !important;
border: 1px solid #333;
}
}
/* ==========================================================================
Baurecht - Zusätzliche CSS Ergänzungen
========================================================================== */
/* Infografik Section - Baurecht spezifisch */
.baurecht .baurecht-infografik {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 4rem 0;
}
.baurecht .infografik-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.baurecht .infografik-step {
display: flex;
align-items: flex-start;
gap: 1.5rem;
background: #fff;
padding: 2rem;
border-radius: 15px;
box-shadow: var(--shadow-md);
transition: transform var(--tr), box-shadow var(--tr);
position: relative;
overflow: hidden;
border-left: 5px solid #8B4513;
}
.baurecht .infografik-step:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0,0,0,.15);
}
.baurecht .infografik-step::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 5px;
height: 100%;
background: linear-gradient(135deg, #8B4513, #D2691E);
}
.baurecht .step-number {
background: linear-gradient(135deg, #8B4513, #D2691E);
color: #fff;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 700;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(139,69,19,.3);
}
.baurecht .step-content h4 {
color: #8B4513;
margin-bottom: .5rem;
font-size: 1.2rem;
font-weight: 600;
}
.baurecht .step-content p {
color: var(--c-muted);
line-height: 1.6;
margin: 0;
}
/* Klickbare Telefonnummer Buttons für Baurecht */
.baurecht .hotline-number,
.baurecht .phone a,
.baurecht .cost {
display: inline-block;
color: white !important;
text-decoration: none;
transition: all var(--tr);
font-weight: 700;
}
.baurecht .hotline-number:hover,
.baurecht .phone a:hover {
opacity: 0.9;
transform: translateY(-1px);
}
.baurecht .cost {
background: rgba(255,255,255,0.2);
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.9rem;
margin-top: 1rem;
border: 1px solid rgba(255,255,255,0.3);
transition: all 0.3s ease;
}
.baurecht .cost:hover {
background: rgba(255,255,255,0.3);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
/* Baurecht spezifische Nummernkarten */
.baurecht .number-card.baurecht-primary {
background: linear-gradient(135deg, #8B4513 0%, #D2691E 100%);
}
.baurecht .number-card.baurecht-primary .phone {
font-size: 2rem;
font-weight: 700;
margin: 1rem 0;
color: #fff;
}
/* Button-Styling für Telefonnummern */
.baurecht .phone-button {
display: inline-block;
background: rgba(255,255,255,0.1);
color: white;
padding: 1rem 2rem;
border-radius: 30px;
text-decoration: none;
font-size: 1.1rem;
font-weight: 700;
border: 2px solid rgba(255,255,255,0.3);
transition: all 0.3s ease;
backdrop-filter: blur(10px);
margin: 0.5rem 0;
}
.baurecht .phone-button:hover {
background: rgba(255,255,255,0.2);
border-color: rgba(255,255,255,0.5);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0,0,0,0.2);
color: white;
}
/* Baurecht Hero Ergänzungen */
.baurecht .hero {
background: linear-gradient(135deg, rgba(139,69,19,0.9), rgba(210,105,30,0.9));
color: #fff;
position: relative;
overflow: hidden;
}
.baurecht .hero::before {
content: "";
position: absolute;
inset: 0;
background: url('data:image/svg+xml,') repeat;
opacity: 0.3;
}
.baurecht .hero-content {
position: relative;
z-index: 2;
}
/* CTA Button für Baurecht */
.baurecht .cta-buttons .btn-baurecht {
background: var(--c-accent);
color: #fff;
padding: 1rem 2rem;
border: none;
border-radius: 30px;
font-size: 1.1rem;
font-weight: 700;
text-decoration: none;
transition: all var(--tr);
display: inline-block;
margin: 0.5rem;
}
.baurecht .cta-buttons .btn-baurecht:hover {
background: var(--c-accent-2);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(255,107,53,.3);
}
/* Baurecht spezifische Topic Cards Verbesserungen */
.baurecht .topic-card {
transition: all 0.4s ease;
border-left-color: #8B4513;
}
.baurecht .topic-card:hover {
border-left-color: #D2691E;
border-left-width: 6px;
}
.baurecht .topic-card .icon {
color: #8B4513;
transition: all var(--tr);
}
.baurecht .topic-card:hover .icon {
color: #D2691E;
transform: scale(1.1);
}
/* Responsive Anpassungen für Baurecht */
@media (max-width: 768px) {
.baurecht .infografik-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 0 1rem;
}
.baurecht .infografik-step {
padding: 1.5rem;
gap: 1rem;
}
.baurecht .step-number {
width: 40px;
height: 40px;
font-size: 1.2rem;
}
.baurecht .phone-button {
width: 100%;
text-align: center;
margin: 1rem 0;
}
}
@media (max-width: 480px) {
.baurecht .infografik-step {
padding: 1.2rem;
flex-direction: column;
text-align: center;
}
.baurecht .step-number {
margin-bottom: 1rem;
}
.baurecht .phone-button {
font-size: 1rem;
padding: 0.8rem 1.5rem;
}
}
/* Print Styles für Baurecht */
@media print {
.baurecht .hero,
.baurecht .cta-buttons,
.baurecht .phone-button,
.baurecht .cost {
background: none !important;
color: #333 !important;
box-shadow: none !important;
}
.baurecht .number-card,
.baurecht .topic-card,
.baurecht .infografik-step {
background: none !important;
border: 1px solid #ccc;
color: #333 !important;
box-shadow: none !important;
}
}
/* ==========================================================================
Erbrecht – Page Specific CSS
========================================================================== */
.erbrecht {
--erb-primary: #2c5530;
--erb-primary-2: #4a7c59;
--erb-secondary: #8B4513;
--erb-accent: #B8860B;
--erb-grad: linear-gradient(135deg, var(--erb-primary) 0%, var(--erb-primary-2) 100%);
}
/* Hero Section - Erbrecht spezifisch */
.erbrecht .hero {
background: var(--erb-grad);
position: relative;
overflow: hidden;
}
.erbrecht .hero::before {
content: "";
position: absolute;
inset: 0;
background: url('data:image/svg+xml,') repeat;
opacity: 0.3;
}
.erbrecht .hero-content {
position: relative;
z-index: 2;
}
/* Erbrecht Hotlines Section */
.erbrecht .phone-numbers {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 4rem 0;
}
.erbrecht .numbers-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.erbrecht .number-card {
background: var(--erb-grad);
color: #fff;
padding: 2.5rem;
border-radius: var(--r-15);
text-align: center;
box-shadow: var(--shadow-lg);
transition: all var(--tr);
cursor: pointer;
position: relative;
overflow: hidden;
}
.erbrecht .number-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(44, 85, 48, 0.3);
}
.erbrecht .number-card::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
transition: left 0.5s ease;
}
.erbrecht .number-card:hover::before {
left: 100%;
}
.erbrecht .number-card h3 {
font-size: 1.4rem;
margin-bottom: 1.5rem;
color: #fff;
}
.erbrecht .number-card .phone {
font-size: 2.2rem;
font-weight: 700;
margin: 1.5rem 0;
color: #fff;
}
.erbrecht .number-card .phone a {
color: #fff;
text-decoration: none;
transition: all var(--tr);
}
.erbrecht .number-card .phone a:hover {
text-shadow: 0 0 10px rgba(255,255,255,0.5);
}
.erbrecht .number-card p {
margin-bottom: 1.5rem;
line-height: 1.6;
opacity: 0.95;
}
.erbrecht .number-card .cost {
background: rgba(255,255,255,0.2);
color: #fff;
padding: 0.8rem 1.5rem;
border-radius: 25px;
display: inline-block;
font-weight: 700;
text-decoration: none;
transition: all var(--tr);
border: 2px solid rgba(255,255,255,0.3);
backdrop-filter: blur(10px);
}
.erbrecht .number-card .cost:hover {
background: rgba(255,255,255,0.3);
border-color: rgba(255,255,255,0.5);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
/* Erbrecht Services Grid */
.erbrecht .services {
background: var(--c-bg);
padding: 4rem 0;
}
.erbrecht .services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.erbrecht .service-card {
background: #fff;
padding: 2.5rem;
border-radius: var(--r-15);
text-align: center;
box-shadow: var(--shadow-md);
transition: all var(--tr);
border-left: 4px solid var(--erb-primary);
position: relative;
overflow: hidden;
}
.erbrecht .service-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 35px rgba(0,0,0,0.15);
border-left-color: var(--erb-accent);
}
.erbrecht .service-card::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(44,85,48,0.05), transparent);
transition: left 0.5s ease;
}
.erbrecht .service-card:hover::before {
left: 100%;
}
.erbrecht .service-card .icon {
font-size: 3.5rem;
margin-bottom: 1.5rem;
color: var(--erb-primary);
transition: all var(--tr);
}
.erbrecht .service-card:hover .icon {
color: var(--erb-accent);
transform: scale(1.1);
}
.erbrecht .service-card h3 {
color: var(--erb-primary);
margin-bottom: 1.5rem;
font-size: 1.4rem;
}
.erbrecht .service-card p {
color: var(--c-muted);
line-height: 1.6;
}
/* Testament Hilfe Section */
.erbrecht .features {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 4rem 0;
}
.erbrecht .features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.erbrecht .feature {
display: flex;
align-items: flex-start;
gap: 1.5rem;
padding: 2rem;
background: #fff;
border-radius: var(--r-15);
box-shadow: var(--shadow-md);
transition: all var(--tr);
}
.erbrecht .feature:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.erbrecht .feature-icon {
background: var(--erb-primary);
color: #fff;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
flex-shrink: 0;
transition: all var(--tr);
}
.erbrecht .feature:hover .feature-icon {
background: var(--erb-accent);
transform: scale(1.1);
}
.erbrecht .feature h4 {
color: var(--erb-primary);
margin-bottom: 1rem;
font-size: 1.3rem;
}
.erbrecht .feature p {
color: var(--c-muted);
line-height: 1.6;
}
/* Erbrecht Situationen Section */
.erbrecht #erbrecht-situationen {
background: var(--erb-grad);
padding: 4rem 0;
position: relative;
overflow: hidden;
}
.erbrecht #erbrecht-situationen::before {
content: "";
position: absolute;
inset: 0;
background: url('data:image/svg+xml,') repeat;
opacity: 0.4;
}
.erbrecht #erbrecht-situationen .container {
position: relative;
z-index: 2;
}
.erbrecht #erbrecht-situationen .section-title {
color: #fff;
margin-bottom: 3rem;
}
.erbrecht #erbrecht-situationen .services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.erbrecht #erbrecht-situationen .service-card {
background: rgba(255,255,255,0.1);
color: #fff;
border: 1px solid rgba(255,255,255,0.2);
backdrop-filter: blur(10px);
transition: all var(--tr);
}
.erbrecht #erbrecht-situationen .service-card:hover {
background: rgba(255,255,255,0.2);
border-color: rgba(255,255,255,0.4);
transform: translateY(-8px);
}
.erbrecht #erbrecht-situationen .service-card .icon {
color: #fff;
font-size: 3rem;
margin-bottom: 1.5rem;
}
.erbrecht #erbrecht-situationen .service-card h3 {
color: #fff;
margin-bottom: 1rem;
}
.erbrecht #erbrecht-situationen .service-card p {
color: rgba(255,255,255,0.9);
line-height: 1.6;
}
.erbrecht #erbrecht-situationen .service-card strong {
color: #fff;
display: block;
margin-bottom: 0.5rem;
}
/* FAQ Section - Erbrecht spezifisch */
.erbrecht .faq {
background: #fff;
padding: 4rem 0;
}
.erbrecht .faq-container {
max-width: 900px;
margin: 0 auto;
}
.erbrecht .faq-item {
background: #fff;
border-radius: var(--r-15);
margin-bottom: 1.5rem;
overflow: hidden;
box-shadow: var(--shadow-md);
border: 1px solid var(--c-border);
transition: all var(--tr);
}
.erbrecht .faq-item:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
.erbrecht .faq-question {
background: var(--erb-primary);
color: #fff;
padding: 1.8rem 2rem;
cursor: pointer;
font-weight: 700;
font-size: 1.1rem;
border: 0;
width: 100%;
text-align: left;
display: flex;
justify-content: space-between;
align-items: center;
transition: background var(--tr);
}
.erbrecht .faq-question:hover {
background: var(--erb-primary-2);
}
.erbrecht .faq-question::after {
content: "+";
font-size: 1.8rem;
font-weight: 700;
transition: transform var(--tr);
}
.erbrecht .faq-question.active::after {
content: "−";
transform: rotate(180deg);
}
.erbrecht .faq-answer {
padding: 0 2rem;
max-height: 0;
overflow: hidden;
transition: all var(--tr);
}
.erbrecht .faq-answer.active {
padding: 2rem;
max-height: 800px;
}
.erbrecht .faq-answer p {
margin-bottom: 1rem;
line-height: 1.6;
color: var(--c-text);
}
.erbrecht .faq-answer ul {
list-style: none;
padding-left: 0;
margin: 1rem 0;
}
.erbrecht .faq-answer li {
padding: 0.3rem 0;
position: relative;
padding-left: 1.5rem;
color: var(--c-muted);
}
.erbrecht .faq-answer li::before {
content: "•";
position: absolute;
left: 0;
color: var(--erb-primary);
font-weight: 700;
}
.erbrecht .faq-answer strong {
color: var(--erb-primary);
}
/* Responsive Design für Erbrecht */
@media (max-width: 768px) {
.erbrecht .numbers-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 0 1rem;
}
.erbrecht .number-card {
padding: 2rem;
}
.erbrecht .number-card h3 {
font-size: 1.2rem;
}
.erbrecht .number-card .phone {
font-size: 1.8rem;
}
.erbrecht .services-grid,
.erbrecht .features-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 0 1rem;
}
.erbrecht .service-card,
.erbrecht .feature {
padding: 1.5rem;
}
.erbrecht .service-card .icon {
font-size: 2.5rem;
}
.erbrecht .feature {
flex-direction: column;
text-align: center;
}
.erbrecht .feature-icon {
margin-bottom: 1rem;
}
.erbrecht .faq-question {
font-size: 1rem;
padding: 1.5rem;
}
.erbrecht .faq-answer.active {
padding: 1.5rem;
}
}
@media (max-width: 480px) {
.erbrecht .number-card {
padding: 1.5rem;
}
.erbrecht .number-card h3 {
font-size: 1.1rem;
}
.erbrecht .number-card .phone {
font-size: 1.6rem;
}
.erbrecht .service-card,
.erbrecht .feature {
padding: 1.2rem;
}
.erbrecht .service-card .icon {
font-size: 2rem;
}
.erbrecht .faq-question {
padding: 1.2rem;
font-size: 0.95rem;
}
}
/* Print Styles für Erbrecht */
@media print {
.erbrecht .hero,
.erbrecht #erbrecht-situationen,
.erbrecht .cta-buttons,
.erbrecht .warning {
background: none !important;
color: #333 !important;
}
.erbrecht .number-card,
.erbrecht .service-card,
.erbrecht .feature,
.erbrecht .faq-item {
background: none !important;
color: #333 !important;
border: 1px solid #ccc;
box-shadow: none !important;
}
.erbrecht .number-card .cost {
background: none !important;
color: #333 !important;
border: 1px solid #333;
}
}
/* ==========================================================================
Familienrecht - Zusätzliche Infografiken & Button-Styles
========================================================================== */
/* Familienrecht Infografik Section */
.familienrecht .familienrecht-infografik {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 4rem 0;
position: relative;
}
.familienrecht .familienrecht-infografik::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #e91e63, #9c27b0);
}
.familienrecht .infografik-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.familienrecht .info-card {
background: #fff;
padding: 2.5rem;
border-radius: 15px;
text-align: center;
box-shadow: 0 8px 25px rgba(0,0,0,.1);
transition: all var(--tr);
border-left: 5px solid transparent;
position: relative;
overflow: hidden;
}
.familienrecht .info-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 35px rgba(0,0,0,.15);
}
.familienrecht .info-card::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(233,30,99,.05), transparent);
transition: left .5s ease;
}
.familienrecht .info-card:hover::before {
left: 100%;
}
.familienrecht .info-card.scheidung {
border-left-color: #e91e63;
}
.familienrecht .info-card.sorgerecht {
border-left-color: #9c27b0;
}
.familienrecht .info-card.unterhalt {
border-left-color: #ff6b35;
}
.familienrecht .info-card.ehevertrag {
border-left-color: #2196F3;
}
.familienrecht .info-icon {
font-size: 3.5rem;
margin-bottom: 1.5rem;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
color: #e91e63;
}
.familienrecht .info-card.sorgerecht .info-icon {
color: #9c27b0;
}
.familienrecht .info-card.unterhalt .info-icon {
color: #ff6b35;
}
.familienrecht .info-card.ehevertrag .info-icon {
color: #2196F3;
}
.familienrecht .info-card h3 {
color: var(--c-primary);
margin-bottom: 1.5rem;
font-size: 1.4rem;
}
.familienrecht .info-content p {
margin-bottom: .8rem;
text-align: left;
font-size: .95rem;
line-height: 1.6;
color: var(--c-muted);
}
.familienrecht .info-content p strong {
color: var(--c-primary);
}
.familienrecht .info-features {
display: flex;
flex-wrap: wrap;
gap: .5rem;
justify-content: center;
margin-top: 1.5rem;
}
.familienrecht .info-features span {
background: rgba(233,30,99,.1);
color: #e91e63;
padding: .3rem .8rem;
border-radius: 15px;
font-size: .8rem;
font-weight: 500;
}
.familienrecht .info-card.sorgerecht .info-features span {
background: rgba(156,39,176,.1);
color: #9c27b0;
}
.familienrecht .info-card.unterhalt .info-features span {
background: rgba(255,107,53,.1);
color: #ff6b35;
}
.familienrecht .info-card.ehevertrag .info-features span {
background: rgba(33,150,243,.1);
color: #2196F3;
}
/* Clickable Phone Number Buttons für Familienrecht */
.familienrecht .phone a,
.familienrecht .cost {
color: white !important;
text-decoration: none !important;
transition: all 0.3s ease;
}
.familienrecht .phone a:hover {
opacity: 0.9;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.familienrecht .number-card .phone {
position: relative;
}
.familienrecht .number-card .phone a {
display: block;
width: 100%;
height: 100%;
color: white;
text-decoration: none;
}
.familienrecht .cost {
display: inline-block;
margin-top: 1rem;
padding: 0.5rem 1rem;
background: rgba(255,255,255,0.2);
border-radius: 20px;
font-size: 0.9rem;
font-weight: 600;
border: 1px solid rgba(255,255,255,0.3);
transition: all 0.3s ease;
backdrop-filter: blur(5px);
}
.familienrecht .cost:hover {
background: rgba(255,255,255,0.3);
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
/* CTA Button im Hero */
.familienrecht .hero .btn-primary {
background: #e91e63;
border-color: #e91e63;
font-size: 1.2rem;
padding: 1rem 2.5rem;
box-shadow: 0 4px 15px rgba(233,30,99,0.3);
}
.familienrecht .hero .btn-primary:hover {
background: #c2185b;
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(233,30,99,0.4);
}
/* Responsive Anpassungen */
@media (max-width: 768px) {
.familienrecht .infografik-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 0 1rem;
}
.familienrecht .info-card {
padding: 2rem;
}
.familienrecht .info-icon {
font-size: 3rem;
height: 70px;
}
.familienrecht .info-features {
flex-direction: column;
align-items: center;
}
}
@media (max-width: 480px) {
.familienrecht .info-card {
padding: 1.5rem;
}
.familienrecht .info-icon {
font-size: 2.5rem;
height: 60px;
}
.familienrecht .info-card h3 {
font-size: 1.2rem;
}
}
/* Animationen für bessere UX */
@keyframes familienrecht-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.familienrecht .info-icon:hover {
animation: familienrecht-pulse 1s ease-in-out;
}
/* Print Styles für Familienrecht */
@media print {
.familienrecht .familienrecht-hero,
.familienrecht .phone-numbers,
.familienrecht .kosten-section,
.familienrecht .kontakt-section {
background: none !important;
color: #333 !important;
}
.familienrecht .info-card,
.familienrecht .number-card,
.familienrecht .service-card {
background: none !important;
border: 1px solid #ccc;
color: #333 !important;
box-shadow: none !important;
}
.familienrecht .btn-primary,
.familienrecht .btn-secondary,
.familienrecht .cost {
background: none !important;
color: #333 !important;
border: 1px solid #333;
}
}
/* ==========================================================================
Mietrecht - Page Specific Infografiken & Verbesserungen
========================================================================== */
/* Mietrecht Infografik Section */
.mietrecht .mietrecht-infografik {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 4rem 0;
position: relative;
}
.mietrecht .mietrecht-infografik::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
}
/* Mietrecht Infografik Grid */
.mietrecht .infografik-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.mietrecht .info-card {
background: #fff;
padding: 2.5rem;
border-radius: 15px;
text-align: center;
box-shadow: 0 8px 25px rgba(0,0,0,.1);
transition: all var(--tr);
border-left: 5px solid transparent;
position: relative;
overflow: hidden;
}
.mietrecht .info-card::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(30,60,114,.03), transparent);
transition: left .5s ease;
pointer-events: none;
}
.mietrecht .info-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 35px rgba(0,0,0,.15);
}
.mietrecht .info-card:hover::before {
left: 100%;
}
/* Unterschiedliche Farben für verschiedene Bereiche */
.mietrecht .info-card.mieter {
border-left-color: #28a745;
}
.mietrecht .info-card.vermieter {
border-left-color: #17a2b8;
}
.mietrecht .info-card.kuendigung {
border-left-color: var(--c-accent);
}
.mietrecht .info-card.kosten {
border-left-color: #ffc107;
}
.mietrecht .info-card.modernisierung {
border-left-color: #6f42c1;
}
.mietrecht .info-card.streit {
border-left-color: #dc3545;
}
/* Infografik Icons */
.mietrecht .info-icon {
font-size: 4rem;
margin-bottom: 1.5rem;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
color: var(--c-primary);
}
.mietrecht .info-card.mieter .info-icon {
color: #28a745;
}
.mietrecht .info-card.vermieter .info-icon {
color: #17a2b8;
}
.mietrecht .info-card.kuendigung .info-icon {
color: var(--c-accent);
}
.mietrecht .info-card.kosten .info-icon {
color: #ffc107;
}
.mietrecht .info-card.modernisierung .info-icon {
color: #6f42c1;
}
.mietrecht .info-card.streit .info-icon {
color: #dc3545;
}
.mietrecht .info-card h3 {
color: var(--c-primary);
margin-bottom: 1.5rem;
font-size: 1.5rem;
font-weight: 700;
}
.mietrecht .info-content {
text-align: left;
}
.mietrecht .info-content p {
margin-bottom: 1rem;
font-size: 1rem;
line-height: 1.6;
color: var(--c-muted);
}
.mietrecht .info-content p strong {
color: var(--c-primary);
font-weight: 700;
}
.mietrecht .info-content ul {
list-style: none;
padding: 0;
margin: 1rem 0;
}
.mietrecht .info-content ul li {
padding: .5rem 0;
position: relative;
padding-left: 1.5rem;
color: #555;
}
.mietrecht .info-content ul li::before {
content: "✓";
position: absolute;
left: 0;
color: #27ae60;
font-weight: 700;
}
/* Mietrecht Statistics Section */
.mietrecht .mietrecht-stats {
color: #fff;
padding: 3rem 0;
text-align: center;
}
.mietrecht .stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.mietrecht .stat-card {
padding: 2rem;
background: rgba(255,255,255,.1);
border-radius: 15px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,.2);
transition: all var(--tr);
}
.mietrecht .stat-card:hover {
transform: translateY(-5px);
background: rgba(255,255,255,.15);
}
.mietrecht .stat-number {
font-size: 3rem;
font-weight: 700;
margin-bottom: .5rem;
color: #fff;
}
.mietrecht .stat-label {
font-size: 1.1rem;
opacity: .9;
}
/* Hotline Button Improvements */
.mietrecht .hotline-button {
display: inline-block;
background: var(--c-accent);
color: #fff;
padding: 1rem 2rem;
border-radius: 30px;
text-decoration: none;
font-weight: 700;
font-size: 1.1rem;
transition: all var(--tr);
border: 2px solid var(--c-accent);
box-shadow: 0 4px 15px rgba(255,107,53,.3);
}
.mietrecht .hotline-button:hover {
background: var(--c-accent-2);
border-color: var(--c-accent-2);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(255,107,53,.4);
color: #fff;
}
/* Responsive Design für Mietrecht Infografiken */
@media (max-width: 768px) {
.mietrecht .infografik-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 0 1rem;
}
.mietrecht .info-card {
padding: 2rem;
}
.mietrecht .info-icon {
font-size: 3rem;
height: 80px;
}
.mietrecht .info-card h3 {
font-size: 1.3rem;
}
.mietrecht .stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.mietrecht .stat-card {
padding: 1.5rem;
}
.mietrecht .stat-number {
font-size: 2.5rem;
}
}
@media (max-width: 480px) {
.mietrecht .info-card {
padding: 1.5rem;
}
.mietrecht .info-icon {
font-size: 2.5rem;
height: 70px;
}
.mietrecht .info-card h3 {
font-size: 1.2rem;
}
.mietrecht .stats-grid {
grid-template-columns: 1fr;
}
.mietrecht .stat-number {
font-size: 2rem;
}
.mietrecht .hotline-button {
padding: .8rem 1.5rem;
font-size: 1rem;
}
}
/* Print Styles für Mietrecht */
@media print {
.mietrecht .mietrecht-infografik,
.mietrecht .mietrecht-stats {
background: none !important;
color: #333 !important;
}
.mietrecht .info-card,
.mietrecht .stat-card {
background: none !important;
border: 1px solid #ccc;
color: #333 !important;
box-shadow: none !important;
}
.mietrecht .hotline-button {
background: none !important;
color: #333 !important;
border: 1px solid #333;
}
}
/* ==========================================================================
Scheidungsrecht - Infografik Section
========================================================================== */
.infographic-section {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 4rem 0;
position: relative;
overflow: hidden;
}
.infographic-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #e74c3c, #c0392b);
}
.infographic-section .section-title {
position: relative;
margin-bottom: 3rem;
}
.infographic-section .section-title::after {
content: "";
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 3px;
background: linear-gradient(90deg, #e74c3c, #c0392b);
border-radius: 2px;
}
.infographic-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin: 2rem 0;
}
.process-step {
background: #fff;
padding: 2rem;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0,0,0,.1);
transition: all 0.3s ease;
position: relative;
border-left: 4px solid #e74c3c;
overflow: hidden;
}
.process-step:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0,0,0,.15);
}
.process-step::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(231,76,60,.03), transparent);
transition: left .5s ease;
pointer-events: none;
}
.process-step:hover::before {
left: 100%;
}
.step-number {
background: linear-gradient(135deg, #e74c3c, #c0392b);
color: #fff;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 1.5rem;
box-shadow: 0 4px 15px rgba(231,76,60,.3);
position: relative;
}
.step-number::after {
content: "";
position: absolute;
inset: -3px;
border-radius: 50%;
background: linear-gradient(45deg, #e74c3c, #c0392b, #e74c3c);
z-index: -1;
opacity: 0.3;
}
.step-content h3 {
color: #e74c3c;
margin-bottom: 1rem;
font-size: 1.3rem;
font-weight: 700;
}
.step-content p {
color: #666;
line-height: 1.6;
margin-bottom: 1rem;
}
.step-detail {
background: rgba(231,76,60,.1);
color: #c0392b;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 600;
display: inline-block;
margin-top: 0.5rem;
}
.infographic-summary {
background: #fff;
padding: 2rem;
border-radius: 15px;
margin-top: 3rem;
text-align: center;
box-shadow: 0 5px 20px rgba(0,0,0,.1);
border: 2px solid #e74c3c;
}
.infographic-summary h3 {
color: #e74c3c;
margin-bottom: 1rem;
font-size: 1.4rem;
}
.infographic-summary p {
color: #666;
font-size: 1.1rem;
line-height: 1.6;
}
/* ==========================================================================
Scheidungsrecht - Klickbare Telefon Buttons
========================================================================== */
.phone a {
color: white !important;
text-decoration: none;
transition: all 0.3s ease;
display: block;
padding: 0.5rem;
border-radius: 8px;
background: rgba(255,255,255,0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.2);
font-weight: 700;
}
.phone a:hover {
background: rgba(255,255,255,0.2);
transform: scale(1.05);
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.cost {
color: white !important;
text-decoration: none;
transition: all 0.3s ease;
display: inline-block;
margin-top: 1rem;
padding: 0.5rem 1rem;
background: rgba(255,255,255,0.1);
border-radius: 20px;
font-size: 0.9rem;
border: 1px solid rgba(255,255,255,0.2);
backdrop-filter: blur(10px);
}
.cost:hover {
background: rgba(255,255,255,0.2);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* ==========================================================================
Responsive - Scheidungsrecht Infografik
========================================================================== */
@media (max-width: 768px) {
.infographic-container {
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 0 1rem;
}
.process-step {
padding: 1.5rem;
}
.step-number {
width: 50px;
height: 50px;
font-size: 1.5rem;
}
.step-content h3 {
font-size: 1.2rem;
}
.infographic-summary {
margin: 2rem 1rem 0 1rem;
padding: 1.5rem;
}
}
@media (max-width: 480px) {
.process-step {
padding: 1.2rem;
}
.step-number {
width: 45px;
height: 45px;
font-size: 1.3rem;
}
.step-content h3 {
font-size: 1.1rem;
}
.infographic-summary {
padding: 1rem;
}
.infographic-summary h3 {
font-size: 1.2rem;
}
.infographic-summary p {
font-size: 1rem;
}
}
/* ==========================================================================
Sozialrecht - Spezifische Styles für Infografiken und Buttons
========================================================================== */
/* Sozialrecht Overview - Infografik Styling */
.sozialrecht .sozialrecht-overview {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 4rem 0;
position: relative;
}
.sozialrecht .sozialrecht-overview::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
}
.sozialrecht .overview-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.sozialrecht .overview-card {
background: #fff;
padding: 2.5rem;
border-radius: var(--r-15);
text-align: center;
box-shadow: var(--shadow-md);
transition: all var(--tr);
border-left: 5px solid transparent;
position: relative;
overflow: hidden;
}
.sozialrecht .overview-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 35px rgba(0,0,0,.15);
}
.sozialrecht .overview-card::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(30,60,114,.03), transparent);
transition: left .5s ease;
pointer-events: none;
}
.sozialrecht .overview-card:hover::before {
left: 100%;
}
/* Farbvariationen für verschiedene Karten */
.sozialrecht .overview-card:nth-child(1) {
border-left-color: #28a745; /* Grün für Hartz 4 */
}
.sozialrecht .overview-card:nth-child(2) {
border-left-color: #007bff; /* Blau für Rente */
}
.sozialrecht .overview-card:nth-child(3) {
border-left-color: #dc3545; /* Rot für Krankengeld */
}
.sozialrecht .overview-card:nth-child(4) {
border-left-color: #ffc107; /* Gelb für Schwerbehinderung */
}
.sozialrecht .overview-card:nth-child(5) {
border-left-color: #6f42c1; /* Lila für Wohngeld */
}
.sozialrecht .overview-card:nth-child(6) {
border-left-color: #fd7e14; /* Orange für Sozialhilfe */
}
.sozialrecht .overview-card .icon {
font-size: 3.5rem;
margin-bottom: 1.5rem;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
color: var(--c-primary);
}
.sozialrecht .overview-card h3 {
color: var(--c-primary);
margin-bottom: 1rem;
font-size: 1.4rem;
}
.sozialrecht .overview-card p {
color: var(--c-muted);
line-height: 1.6;
font-size: .95rem;
}
.sozialrecht .info-highlight {
background: var(--grad-primary);
color: #fff;
padding: 2.5rem;
border-radius: var(--r-15);
text-align: center;
font-size: 1.1rem;
margin-top: 3rem;
box-shadow: var(--shadow-lg);
position: relative;
}
.sozialrecht .info-highlight::before {
content: "💡";
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
background: var(--c-accent);
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
}
/* Service Cards - Erweiterte Styles */
.sozialrecht .services .service-card {
position: relative;
overflow: hidden;
transition: all .4s ease;
border: 2px solid transparent;
}
.sozialrecht .services .service-card:hover {
border-color: var(--c-primary);
transform: translateY(-8px) scale(1.02);
}
.sozialrecht .services .service-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(30,60,114,.05), transparent);
transition: left .5s ease;
}
.sozialrecht .services .service-card:hover::before {
left: 100%;
}
.sozialrecht .service-list {
list-style: none;
padding: 0;
margin: 1rem 0;
text-align: left;
}
.sozialrecht .service-list li {
padding: .5rem 0;
position: relative;
padding-left: 1.5rem;
font-size: .9rem;
color: #666;
}
.sozialrecht .service-list li::before {
content: "✓";
position: absolute;
left: 0;
color: #28a745;
font-weight: 700;
}
/* Clickbare Telefonnummern als Buttons */
.sozialrecht .phone-numbers .number-card .phone a {
display: inline-block;
color: #fff;
text-decoration: none;
transition: all var(--tr);
padding: .5rem 1rem;
border-radius: 25px;
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
}
.sozialrecht .phone-numbers .number-card .phone a:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.sozialrecht .phone-numbers .cost {
color: white !important;
text-decoration: none;
transition: all 0.3s ease;
margin-top: 1rem;
display: inline-block;
}
.sozialrecht .phone-numbers .cost:hover {
opacity: 0.8;
color: white !important;
}
/* Responsive Design */
@media (max-width: 768px) {
.sozialrecht .overview-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 0 1rem;
}
.sozialrecht .overview-card {
padding: 2rem;
}
.sozialrecht .overview-card .icon {
font-size: 3rem;
height: 70px;
}
.sozialrecht .overview-card h3 {
font-size: 1.2rem;
}
.sozialrecht .info-highlight {
padding: 2rem;
font-size: 1rem;
}
}
@media (max-width: 480px) {
.sozialrecht .overview-card {
padding: 1.5rem;
}
.sozialrecht .overview-card .icon {
font-size: 2.5rem;
height: 60px;
}
.sozialrecht .overview-card h3 {
font-size: 1.1rem;
}
.sozialrecht .info-highlight {
padding: 1.5rem;
font-size: .95rem;
}
}
/* Print Styles */
@media print {
.sozialrecht .sozialrecht-overview,
.sozialrecht .phone-numbers,
.sozialrecht .services {
background: none !important;
color: #333 !important;
}
.sozialrecht .overview-card,
.sozialrecht .number-card,
.sozialrecht .service-card {
background: none !important;
border: 1px solid #ccc;
color: #333 !important;
box-shadow: none !important;
}
.sozialrecht .info-highlight {
background: none !important;
color: #333 !important;
border: 2px solid #333;
}
}
/* ==========================================================================
Steuerrecht - Zusätzliche Verbesserungen
========================================================================== */
/* Infographic für Steuerrecht */
.steuerrecht .steuerrecht-infografik {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 4rem 0;
}
.steuerrecht .infografik-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.steuerrecht .info-card {
background: #fff;
padding: 2rem;
border-radius: 15px;
text-align: center;
box-shadow: 0 8px 25px rgba(0,0,0,.1);
transition: all var(--tr);
border-left: 5px solid transparent;
position: relative;
overflow: hidden;
}
.steuerrecht .info-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0,0,0,.15);
}
.steuerrecht .info-card::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(46,139,87,.03), transparent);
transition: left .5s ease;
pointer-events: none;
}
.steuerrecht .info-card:hover::before {
left: 100%;
}
.steuerrecht .info-card.steuererklarung { border-left-color: var(--tax-primary); }
.steuerrecht .info-card.betriebspruefung { border-left-color: #28a745; }
.steuerrecht .info-card.steuerstrafrecht { border-left-color: #dc3545; }
.steuerrecht .info-card.unternehmenssteuern { border-left-color: #17a2b8; }
.steuerrecht .info-icon {
font-size: 3rem;
margin-bottom: 1rem;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
color: var(--tax-primary);
}
.steuerrecht .info-card h3 {
color: var(--tax-primary);
margin-bottom: 1.5rem;
font-size: 1.4rem;
}
.steuerrecht .info-content p {
margin-bottom: .8rem;
text-align: left;
font-size: .95rem;
line-height: 1.6;
color: var(--c-muted);
}
.steuerrecht .info-content p strong {
color: var(--tax-primary);
}
.steuerrecht .info-features {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin-top: 1rem;
justify-content: center;
}
.steuerrecht .info-features span {
background: #e8f5e8;
color: var(--tax-primary);
padding: .3rem .8rem;
border-radius: 15px;
font-size: .8rem;
font-weight: 500;
}
/* Clickable Phone Links in Number Cards */
.steuerrecht .number-card .phone a {
color: white !important;
text-decoration: none;
display: block;
padding: 0.5rem;
border-radius: 10px;
transition: all 0.3s ease;
}
.steuerrecht .number-card .phone a:hover {
background: rgba(255, 255, 255, 0.1);
transform: scale(1.02);
}
/* Cost Button in Number Cards */
.steuerrecht .number-card .cost {
display: inline-block;
background: rgba(255, 255, 255, 0.1);
color: white !important;
padding: 0.5rem 1rem;
border-radius: 25px;
text-decoration: none;
font-size: 0.9rem;
border: 2px solid rgba(255, 255, 255, 0.3);
transition: all 0.3s ease;
backdrop-filter: blur(10px);
margin-top: 0.5rem;
}
.steuerrecht .number-card .cost:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
/* Improved CTA Section */
.steuerrecht .steuerrecht-cta {
background: linear-gradient(135deg, var(--tax-primary), var(--tax-primary-2));
color: #fff;
padding: 4rem 0;
text-align: center;
position: relative;
overflow: hidden;
}
.steuerrecht .steuerrecht-cta::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--c-accent), var(--tax-aux));
}
.steuerrecht .steuerrecht-cta h2 {
margin-bottom: 1rem;
font-size: 2.5rem;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.steuerrecht .steuerrecht-cta p {
font-size: 1.2rem;
margin-bottom: 2rem;
opacity: .9;
}
.steuerrecht .btn-cta {
background: #fff;
color: var(--tax-primary);
padding: 1rem 2rem;
border-radius: 50px;
text-decoration: none;
font-weight: 700;
font-size: 1.1rem;
display: inline-block;
transition: all var(--tr);
box-shadow: 0 5px 20px rgba(0,0,0,.2);
border: 3px solid transparent;
}
.steuerrecht .btn-cta:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0,0,0,.3);
border-color: var(--c-accent);
}
.steuerrecht .cta-note {
margin-top: 1rem;
font-size: .9rem;
opacity: .8;
}
/* Enhanced Stats Section */
.steuerrecht .steuerrecht-stats {
background: var(--tax-grad);
padding: 3rem 0;
color: #fff;
position: relative;
}
.steuerrecht .steuerrecht-stats::before {
content: "";
position: absolute;
inset: 0;
background: url('data:image/svg+xml,') repeat;
opacity: .3;
}
.steuerrecht .stats-grid {
position: relative;
z-index: 2;
}
/* Responsive Improvements */
@media (max-width: 768px) {
.steuerrecht .infografik-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 0 1rem;
}
.steuerrecht .info-card {
padding: 1.5rem;
}
.steuerrecht .info-icon {
font-size: 2.5rem;
}
.steuerrecht .steuerrecht-cta h2 {
font-size: 2rem;
}
.steuerrecht .btn-cta {
font-size: 1rem;
padding: 1rem 1.5rem;
word-break: break-word;
}
}
@media (max-width: 480px) {
.steuerrecht .info-card {
padding: 1.2rem;
}
.steuerrecht .info-icon {
font-size: 2rem;
}
.steuerrecht .steuerrecht-cta h2 {
font-size: 1.8rem;
}
.steuerrecht .steuerrecht-cta p {
font-size: 1rem;
}
}
/* ==========================================================================
Strafrecht - Page Specific Styles
========================================================================== */
/* Strafrecht Process Section */
.strafrecht .strafrecht-process {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 4rem 0;
position: relative;
}
.strafrecht .strafrecht-process::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #dc2626, #991b1b);
}
.strafrecht .process-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.strafrecht .process-step {
background: #fff;
padding: 2.5rem;
border-radius: 15px;
text-align: center;
box-shadow: 0 8px 25px rgba(0,0,0,.1);
transition: all var(--tr);
border-left: 5px solid transparent;
position: relative;
overflow: hidden;
}
.strafrecht .process-step:hover {
transform: translateY(-8px);
box-shadow: 0 15px 35px rgba(0,0,0,.15);
border-left-color: #dc2626;
}
.strafrecht .process-step::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(220,38,38,.03), transparent);
transition: left .5s ease;
pointer-events: none;
}
.strafrecht .process-step:hover::before {
left: 100%;
}
.strafrecht .process-step-number {
background: linear-gradient(135deg, #dc2626, #991b1b);
color: white;
width: 70px;
height: 70px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
font-weight: 700;
margin: 0 auto 1.5rem;
box-shadow: 0 4px 15px rgba(220,38,38,.3);
}
.strafrecht .process-step h3 {
color: #dc2626;
margin-bottom: 1rem;
font-size: 1.4rem;
}
.strafrecht .process-step p {
color: var(--c-muted);
line-height: 1.6;
font-size: .95rem;
}
/* Strafrecht Emergency Buttons */
.strafrecht .emergency-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 2rem;
}
.strafrecht .btn-emergency {
background: linear-gradient(135deg, #dc2626, #991b1b);
color: #fff;
padding: 1rem 2rem;
border: none;
border-radius: 30px;
font-size: 1.1rem;
font-weight: 700;
text-decoration: none;
transition: all var(--tr);
display: inline-flex;
align-items: center;
gap: .5rem;
box-shadow: 0 4px 15px rgba(220,38,38,.3);
}
.strafrecht .btn-emergency:hover {
background: linear-gradient(135deg, #991b1b, #7f1d1d);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(220,38,38,.4);
}
.strafrecht .btn-emergency.notdienst {
background: linear-gradient(135deg, #ff6b35, #f7971e);
animation: pulse 2s infinite;
}
.strafrecht .btn-emergency.notdienst:hover {
background: linear-gradient(135deg, #f7971e, #e85d04);
animation: none;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
/* Strafrecht Numbers Cards Enhancement */
.strafrecht .number-card.strafrecht-primary {
background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
border: 2px solid #ff6b35;
position: relative;
}
.strafrecht .number-card.strafrecht-primary::after {
content: "STRAFRECHT SPEZIALIST";
position: absolute;
top: 15px;
right: -25px;
background: #ff6b35;
color: #fff;
padding: .2rem 1.5rem;
font-size: .7rem;
font-weight: 700;
transform: rotate(45deg);
box-shadow: 0 2px 8px rgba(255,107,53,.3);
}
/* Strafrecht Services Enhancement */
.strafrecht .services .service-card {
border-top: 4px solid #dc2626;
transition: all .4s ease;
}
.strafrecht .services .service-card:hover {
border-top-color: #ff6b35;
transform: translateY(-8px) scale(1.02);
}
.strafrecht .services .service-card .icon {
color: #dc2626;
transition: all .3s ease;
}
.strafrecht .services .service-card:hover .icon {
color: #ff6b35;
transform: scale(1.2);
}
/* Strafrecht FAQ Enhancement */
.strafrecht .faq-question {
background: linear-gradient(135deg, #dc2626, #991b1b);
color: #fff;
}
.strafrecht .faq-question:hover {
background: linear-gradient(135deg, #991b1b, #7f1d1d);
}
/* Emergency Contact Cards */
.strafrecht .emergency-contact {
background: linear-gradient(135deg, #fee2e2, #fecaca);
border: 2px solid #dc2626;
border-radius: 15px;
padding: 2rem;
margin: 2rem 0;
text-align: center;
position: relative;
}
.strafrecht .emergency-contact::before {
content: "🚨";
font-size: 2rem;
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
background: #fff;
padding: .5rem;
border-radius: 50%;
}
.strafrecht .emergency-contact h3 {
color: #dc2626;
margin: 1rem 0;
font-size: 1.5rem;
}
.strafrecht .emergency-contact .emergency-phone {
font-size: 2rem;
font-weight: 700;
color: #dc2626;
text-decoration: none;
display: inline-block;
margin: 1rem 0;
padding: 1rem 2rem;
border: 3px solid #dc2626;
border-radius: 30px;
transition: all var(--tr);
}
.strafrecht .emergency-contact .emergency-phone:hover {
background: #dc2626;
color: #fff;
transform: scale(1.05);
}
/* Responsive Design for Strafrecht */
@media (max-width: 768px) {
.strafrecht .process-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 0 1rem;
}
.strafrecht .process-step {
padding: 2rem;
}
.strafrecht .process-step-number {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
.strafrecht .emergency-buttons {
flex-direction: column;
align-items: center;
gap: 1rem;
padding: 0 1rem;
}
.strafrecht .btn-emergency {
width: 100%;
max-width: 300px;
justify-content: center;
}
.strafrecht .emergency-contact .emergency-phone {
font-size: 1.5rem;
padding: .8rem 1.5rem;
}
}
@media (max-width: 480px) {
.strafrecht .process-step {
padding: 1.5rem;
}
.strafrecht .process-step-number {
width: 50px;
height: 50px;
font-size: 1.3rem;
}
.strafrecht .emergency-contact {
padding: 1.5rem;
margin: 1.5rem 1rem;
}
.strafrecht .emergency-contact .emergency-phone {
font-size: 1.3rem;
padding: .6rem 1.2rem;
}
}
/* High contrast and reduced motion support for Strafrecht */
@media (prefers-contrast: high) {
.strafrecht .process-step,
.strafrecht .emergency-contact {
border: 2px solid #000;
}
.strafrecht .btn-emergency {
border: 2px solid #fff;
}
}
@media (prefers-reduced-motion: reduce) {
.strafrecht .process-step,
.strafrecht .btn-emergency,
.strafrecht .emergency-phone {
transition: none !important;
}
.strafrecht .process-step:hover,
.strafrecht .btn-emergency:hover {
transform: none !important;
}
.strafrecht .btn-emergency.notdienst {
animation: none !important;
}
}
/* ==========================================================================
Verkehrsrecht - Additional CSS
========================================================================== */
/* Verkehrsrecht Infografiken */
.verkehr-infographics {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 4rem 0;
position: relative;
}
.verkehr-infographics::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #e74c3c, #f39c12, #8e44ad, #27ae60);
}
.verkehr-infographic-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.verkehr-info-card {
background: white;
padding: 2rem;
border-radius: 15px;
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
text-align: center;
border-top: 5px solid transparent;
transition: all var(--tr);
position: relative;
overflow: hidden;
}
.verkehr-info-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}
.verkehr-info-card::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(231,76,60,0.03), transparent);
transition: left 0.5s ease;
}
.verkehr-info-card:hover::before {
left: 100%;
}
.verkehr-info-card.unfaelle {
border-top-color: #e74c3c;
}
.verkehr-info-card.bussgeld {
border-top-color: #f39c12;
}
.verkehr-info-card.fuehrerschein {
border-top-color: #8e44ad;
}
.verkehr-info-card.erfolg {
border-top-color: #27ae60;
}
.verkehr-info-icon {
font-size: 3rem;
margin-bottom: 1rem;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
}
.verkehr-info-card.unfaelle .verkehr-info-icon {
color: #e74c3c;
}
.verkehr-info-card.bussgeld .verkehr-info-icon {
color: #f39c12;
}
.verkehr-info-card.fuehrerschein .verkehr-info-icon {
color: #8e44ad;
}
.verkehr-info-card.erfolg .verkehr-info-icon {
color: #27ae60;
}
.verkehr-info-card h3 {
color: var(--c-primary);
margin-bottom: 1rem;
font-size: 1.2rem;
}
.verkehr-stat-number {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
line-height: 1;
}
.verkehr-info-card.unfaelle .verkehr-stat-number {
color: #e74c3c;
}
.verkehr-info-card.bussgeld .verkehr-stat-number {
color: #f39c12;
}
.verkehr-info-card.fuehrerschein .verkehr-stat-number {
color: #8e44ad;
}
.verkehr-info-card.erfolg .verkehr-stat-number {
color: #27ae60;
}
.verkehr-info-card p {
color: #666;
font-size: 0.9rem;
line-height: 1.5;
}
/* Timeline Ablauf nach Unfall */
.verkehr-timeline {
margin-top: 3rem;
background: white;
padding: 2.5rem;
border-radius: 15px;
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
position: relative;
}
.verkehr-timeline::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #e74c3c, #f39c12, #8e44ad, #27ae60);
border-radius: 15px 15px 0 0;
}
.verkehr-timeline h3 {
text-align: center;
color: var(--c-primary);
margin-bottom: 2rem;
font-size: 1.4rem;
}
.verkehr-timeline-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
}
.verkehr-timeline-step {
text-align: center;
padding: 1rem;
position: relative;
}
.verkehr-step-number {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
font-weight: bold;
color: white;
font-size: 1.2rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.verkehr-timeline-step:nth-child(1) .verkehr-step-number {
background: #e74c3c;
}
.verkehr-timeline-step:nth-child(2) .verkehr-step-number {
background: #f39c12;
}
.verkehr-timeline-step:nth-child(3) .verkehr-step-number {
background: #8e44ad;
}
.verkehr-timeline-step:nth-child(4) .verkehr-step-number {
background: #27ae60;
}
.verkehr-timeline-step h4 {
color: var(--c-primary);
margin-bottom: 0.5rem;
font-size: 1.1rem;
}
.verkehr-timeline-step p {
font-size: 0.9rem;
color: #666;
line-height: 1.4;
}
/* Klickbare Telefon-Buttons in Hero */
.hero .cta-buttons .btn-phone {
background: var(--c-accent);
color: #fff;
padding: 1rem 2rem;
border: none;
border-radius: 30px;
font-size: 1.1rem;
font-weight: 700;
text-decoration: none;
transition: all var(--tr);
display: inline-block;
position: relative;
overflow: hidden;
}
.hero .cta-buttons .btn-phone:hover {
background: var(--c-accent-2);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(255,107,53,0.3);
}
.hero .cta-buttons .btn-phone::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.5s ease;
}
.hero .cta-buttons .btn-phone:hover::before {
left: 100%;
}
/* Number Cards - Improved phone links */
.number-card .phone a {
color: white !important;
text-decoration: none;
transition: all var(--tr);
display: block;
padding: 0.5rem;
border-radius: 10px;
}
.number-card .phone a:hover {
background: rgba(255,255,255,0.1);
transform: scale(1.05);
}
.number-card .cost {
background: rgba(255,255,255,0.1);
padding: 0.5rem 1rem;
border-radius: 20px;
margin-top: 1rem;
font-size: 0.9rem;
font-weight: 600;
color: white !important;
text-decoration: none;
display: inline-block;
transition: all var(--tr);
border: 1px solid rgba(255,255,255,0.2);
}
.number-card .cost:hover {
background: rgba(255,255,255,0.2);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
/* Responsive für Verkehrsrecht Infografiken */
@media (max-width: 768px) {
.verkehr-infographic-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 0 1rem;
}
.verkehr-info-card {
padding: 1.5rem;
}
.verkehr-info-icon {
font-size: 2.5rem;
height: 60px;
}
.verkehr-stat-number {
font-size: 2rem;
}
.verkehr-timeline {
padding: 2rem 1.5rem;
margin: 2rem 1rem 0;
}
.verkehr-timeline-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.verkehr-step-number {
width: 40px;
height: 40px;
font-size: 1rem;
}
.verkehr-timeline-step h4 {
font-size: 1rem;
}
.verkehr-timeline-step p {
font-size: 0.8rem;
}
}
@media (max-width: 480px) {
.verkehr-timeline-grid {
grid-template-columns: 1fr;
}
.verkehr-info-card {
padding: 1.2rem;
}
.verkehr-stat-number {
font-size: 1.8rem;
}
.verkehr-timeline h3 {
font-size: 1.2rem;
}
}
/* ==========================================================================
Vertragsrecht - Zusätzliche Infografiken und Button-Styles
========================================================================== */
/* Vertragsrecht Hero mit spezieller Hotline-Nummer */
.vertragsrecht .hero .cta-buttons .btn-primary {
background: var(--c-accent);
color: #fff;
padding: 1rem 2rem;
border-radius: 30px;
font-size: 1.1rem;
font-weight: 700;
text-decoration: none;
transition: all var(--tr);
display: inline-block;
border: none;
cursor: pointer;
}
.vertragsrecht .hero .cta-buttons .btn-primary:is(:hover,:focus) {
background: var(--c-accent-2);
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(255,107,53,.3);
}
/* Telefon-Button Styles für alle tel: Links */
.vertragsrecht a[href^="tel:"] {
display: inline-block;
background: var(--c-accent);
color: #fff !important;
padding: 0.8rem 1.5rem;
border-radius: 25px;
text-decoration: none;
font-weight: 700;
transition: all var(--tr);
border: 2px solid var(--c-accent);
}
.vertragsrecht a[href^="tel:"]:is(:hover,:focus) {
background: var(--c-accent-2);
border-color: var(--c-accent-2);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(255,107,53,.3);
}
/* Spezielle Telefon-Buttons in Contract-Type-Cards */
.vertragsrecht .contract-btn {
display: block;
background: var(--c-accent);
color: #fff;
text-decoration: none;
padding: 0.8rem 1.5rem;
border-radius: 25px;
font-weight: 700;
text-align: center;
transition: all var(--tr);
margin-top: 1rem;
border: 2px solid var(--c-accent);
}
.vertragsrecht .contract-btn:is(:hover,:focus) {
background: var(--c-accent-2);
border-color: var(--c-accent-2);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(255,107,53,.3);
}
/* Infografik für Vertragsrecht-Prozess */
.vertragsrecht .process-infographic {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 4rem 0;
margin: 2rem 0;
}
.vertragsrecht .process-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.vertragsrecht .process-step {
background: #fff;
padding: 2rem;
border-radius: 15px;
text-align: center;
box-shadow: var(--shadow-md);
transition: all var(--tr);
position: relative;
border-left: 4px solid var(--c-primary);
}
.vertragsrecht .process-step:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0,0,0,.15);
}
.vertragsrecht .process-step::before {
content: "";
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 40px;
background: var(--c-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 700;
font-size: 1.2rem;
}
.vertragsrecht .process-step:nth-child(1)::before { content: "1"; }
.vertragsrecht .process-step:nth-child(2)::before { content: "2"; }
.vertragsrecht .process-step:nth-child(3)::before { content: "3"; }
.vertragsrecht .process-step:nth-child(4)::before { content: "4"; }
.vertragsrecht .process-icon {
font-size: 3rem;
margin: 1rem 0;
color: var(--c-primary);
}
.vertragsrecht .process-step h4 {
color: var(--c-primary);
margin-bottom: 1rem;
font-size: 1.3rem;
}
.vertragsrecht .process-step p {
color: var(--c-muted);
line-height: 1.6;
}
/* Vertragsarten Highlights */
.vertragsrecht .contract-highlights {
background: #fff;
padding: 3rem 0;
}
.vertragsrecht .highlights-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.vertragsrecht .highlight-item {
background: var(--c-bg);
padding: 1.5rem;
border-radius: 10px;
text-align: center;
transition: all var(--tr);
border: 2px solid transparent;
}
.vertragsrecht .highlight-item:hover {
border-color: var(--c-primary);
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0,0,0,.1);
}
.vertragsrecht .highlight-icon {
font-size: 2rem;
margin-bottom: 0.5rem;
color: var(--c-primary);
}
.vertragsrecht .highlight-title {
font-weight: 700;
color: var(--c-primary);
margin-bottom: 0.5rem;
}
.vertragsrecht .highlight-desc {
font-size: 0.9rem;
color: var(--c-muted);
}
/* Vertragsrecht Statistiken verbessert */
.vertragsrecht .enhanced-stats {
background: var(--grad-primary);
padding: 4rem 0;
color: #fff;
position: relative;
overflow: hidden;
}
.vertragsrecht .enhanced-stats::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
opacity: 0.3;
}
.vertragsrecht .enhanced-stats .container {
position: relative;
z-index: 2;
}
.vertragsrecht .enhanced-stats .stat-card {
background: rgba(255,255,255,0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.2);
color: #fff;
}
.vertragsrecht .enhanced-stats .stat-number {
color: #fff;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
/* Vertragsrecht FAQ erweitert */
.vertragsrecht .faq-enhanced {
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
padding: 4rem 0;
}
.vertragsrecht .faq-enhanced .faq-item {
margin-bottom: 1.5rem;
border-radius: 15px;
overflow: hidden;
box-shadow: var(--shadow-md);
border: 2px solid transparent;
transition: all var(--tr);
}
.vertragsrecht .faq-enhanced .faq-item:hover {
border-color: var(--c-primary);
box-shadow: 0 10px 30px rgba(0,0,0,.15);
}
.vertragsrecht .faq-enhanced .faq-question {
background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-2) 100%);
color: #fff;
padding: 1.5rem 2rem;
cursor: pointer;
font-weight: 700;
font-size: 1.1rem;
border: 0;
width: 100%;
text-align: left;
display: flex;
justify-content: space-between;
align-items: center;
transition: all var(--tr);
}
.vertragsrecht .faq-enhanced .faq-question:hover {
background: linear-gradient(135deg, var(--c-primary-2) 0%, var(--c-primary) 100%);
}
.vertragsrecht .faq-enhanced .faq-question::after {
content: "+";
font-size: 1.5rem;
font-weight: 700;
transition: transform var(--tr);
}
.vertragsrecht .faq-enhanced .faq-question.active::after {
content: "−";
transform: rotate(180deg);
}
/* Responsive Anpassungen für Vertragsrecht */
@media (max-width: 768px) {
.vertragsrecht .process-steps {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.vertragsrecht .process-step {
padding: 1.5rem;
margin-top: 1rem;
}
.vertragsrecht .highlights-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.vertragsrecht .highlight-item {
padding: 1rem;
}
.vertragsrecht a[href^="tel:"] {
font-size: 0.9rem;
padding: 0.7rem 1.2rem;
}
}
@media (max-width: 480px) {
.vertragsrecht .highlights-grid {
grid-template-columns: 1fr;
}
.vertragsrecht .process-icon {
font-size: 2.5rem;
}
.vertragsrecht .enhanced-stats .stat-card {
padding: 1.5rem 1rem;
}
.vertragsrecht a[href^="tel:"] {
font-size: 0.8rem;
padding: 0.6rem 1rem;
border-radius: 20px;
}
}
/* Print Styles für Vertragsrecht */
@media print {
.vertragsrecht .enhanced-stats,
.vertragsrecht .process-infographic,
.vertragsrecht .contract-highlights {
background: none !important;
color: #333 !important;
}
.vertragsrecht .process-step,
.vertragsrecht .highlight-item,
.vertragsrecht .stat-card {
background: none !important;
border: 1px solid #ccc;
color: #333 !important;
box-shadow: none !important;
}
.vertragsrecht a[href^="tel:"],
.vertragsrecht .contract-btn {
background: none !important;
color: #333 !important;
border: 1px solid #333;
}
}
/* ==========================================================================
Wettbewerbsrecht – Page Specific CSS Ergänzungen
========================================================================== */
/* Wettbewerbsrecht Hero Button */
.hero .btn-primary-wettbewerb {
background: linear-gradient(135deg, #ff6b35, #f7971e);
color: #fff;
padding: 1rem 2rem;
border: none;
border-radius: 30px;
font-size: 1.1rem;
font-weight: 700;
text-decoration: none;
transition: all var(--tr);
display: inline-block;
box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
}
.hero .btn-primary-wettbewerb:hover {
background: linear-gradient(135deg, #e55a2b, #e8890b);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(255, 107, 53, 0.4);
}
/* Wettbewerbsrecht Infografik Section */
.wettbewerbsrecht .wettbewerbs-infografik {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 4rem 0;
}
.wettbewerbsrecht .wettbewerbs-infografik .infographic-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin: 2rem 0;
}
.wettbewerbsrecht .wettbewerbs-infografik .infographic-step {
display: flex;
align-items: flex-start;
gap: 1.5rem;
background: #fff;
padding: 2rem;
border-radius: 15px;
box-shadow: var(--shadow-md);
transition: transform var(--tr), box-shadow var(--tr);
position: relative;
overflow: hidden;
}
.wettbewerbsrecht .wettbewerbs-infografik .infographic-step:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.wettbewerbsrecht .wettbewerbs-infografik .infographic-step::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 4px;
background: linear-gradient(135deg, #ff6b35, #f7971e);
}
.wettbewerbsrecht .wettbewerbs-infografik .step-number {
background: linear-gradient(135deg, #ff6b35, #f7971e);
color: #fff;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 700;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}
.wettbewerbsrecht .wettbewerbs-infografik .step-content h4 {
color: var(--c-primary);
margin-bottom: 0.5rem;
font-size: 1.2rem;
}
.wettbewerbsrecht .wettbewerbs-infografik .step-content p {
color: var(--c-muted);
line-height: 1.6;
margin: 0;
}
/* Wettbewerbsrecht CTA Button */
.wettbewerb-cta-button {
display: inline-block;
background: linear-gradient(135deg, #ff6b35, #f7971e);
color: #fff;
padding: 0.8rem 1.5rem;
border-radius: 25px;
text-decoration: none;
font-weight: 700;
font-size: 0.9rem;
transition: all var(--tr);
box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
}
.wettbewerb-cta-button:hover {
background: linear-gradient(135deg, #e55a2b, #e8890b);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(255, 107, 53, 0.4);
color: #fff;
}
/* Spezielle Formatierung für Wettbewerbsrecht Kontakt Cards */
.wettbewerbsrecht .kontakt-card.wettbewerb-telefon {
border-top-color: #ff6b35;
}
.wettbewerbsrecht .kontakt-card.wettbewerb-telefon .kontakt-icon {
color: #ff6b35;
}
.wettbewerbsrecht .kontakt-card.wettbewerb-telefon .kontakt-phone-link {
color: #ff6b35;
border-color: #ff6b35;
}
.wettbewerbsrecht .kontakt-card.wettbewerb-telefon .kontakt-phone-link:hover {
background: #ff6b35;
color: #fff;
}
.wettbewerbsrecht .kontakt-card.wettbewerb-telefon .kontakt-features span {
background: rgba(255, 107, 53, 0.1);
color: #ff6b35;
}
/* Responsive Anpassungen */
@media (max-width: 768px) {
.wettbewerbsrecht .wettbewerbs-infografik .infographic-container {
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 0 1rem;
}
.wettbewerbsrecht .wettbewerbs-infografik .infographic-step {
padding: 1.5rem;
gap: 1rem;
}
.wettbewerbsrecht .wettbewerbs-infografik .step-number {
width: 40px;
height: 40px;
font-size: 1.2rem;
}
.wettbewerbsrecht .wettbewerbs-infografik .step-content h4 {
font-size: 1.1rem;
}
}
/* Familienrecht Infografik Styles */
.familienrecht-infografik {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
padding: 4rem 0;
position: relative;
overflow: hidden;
}
.familienrecht-infografik::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
background-size: 50px 50px;
animation: float 20s infinite linear;
}
@keyframes float {
0% { transform: translateY(0px); }
100% { transform: translateY(-100px); }
}
.infografik-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-top: 3rem;
position: relative;
z-index: 2;
}
.info-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.info-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.info-card:hover::before {
transform: scaleX(1);
}
.info-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.info-card.scheidung {
border-left: 4px solid #e74c3c;
}
.info-card.sorgerecht {
border-left: 4px solid #3498db;
}
.info-card.unterhalt {
border-left: 4px solid #f39c12;
}
.info-card.ehevertrag {
border-left: 4px solid #9b59b6;
}
.info-icon {
font-size: 3rem;
text-align: center;
margin-bottom: 1rem;
display: block;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.1));
}
.info-card h3 {
color: #2c3e50;
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
text-align: center;
position: relative;
}
.info-card h3::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 2px;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}
.info-content {
margin-bottom: 1.5rem;
}
.info-content p {
margin-bottom: 0.8rem;
font-size: 0.95rem;
line-height: 1.6;
color: #34495e;
}
.info-content strong {
color: #2c3e50;
font-weight: 600;
}
.info-features {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1rem;
}
.info-features span {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 0.4rem 0.8rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 500;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
transition: all 0.3s ease;
}
.info-features span:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
/* Services Overview Stats */
.services-overview {
margin-bottom: 3rem;
text-align: center;
}
.service-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 2rem;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 2rem;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.stat-item {
text-align: center;
position: relative;
}
.stat-number {
font-size: 2.5rem;
font-weight: 700;
background: linear-gradient(135deg, #667eea 0%, #ffffff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: block;
margin-bottom: 0.5rem;
}
.stat-label {
color: #34495e;
font-weight: 500;
font-size: 0.9rem;
}
/* Service Cards Grid */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.service-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.service-card:hover::before {
transform: scaleX(1);
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.service-card .icon {
font-size: 3rem;
text-align: center;
margin-bottom: 1rem;
display: block;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.service-card h3 {
color: #2c3e50;
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 1rem;
text-align: center;
}
.service-card p {
color: #34495e;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.service-card ul {
list-style: none;
padding: 0;
}
.service-card ul li {
color: #34495e;
padding: 0.5rem 0;
position: relative;
padding-left: 1.5rem;
}
.service-card ul li::before {
content: '✓';
position: absolute;
left: 0;
color: #27ae60;
font-weight: bold;
}
/* Responsive Design */
@media (max-width: 768px) {
.familienrecht-infografik {
padding: 2rem 0;
}
.infografik-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.info-card,
.service-card {
padding: 1.5rem;
}
.service-stats {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
padding: 1.5rem;
}
.stat-number {
font-size: 2rem;
}
.services-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
@media (max-width: 480px) {
.service-stats {
grid-template-columns: 1fr;
}
.info-features {
justify-content: center;
}
.info-features span {
font-size: 0.75rem;
padding: 0.3rem 0.6rem;
}
}