/* ============================================================
   layout.css - shared layout styles for all WSW pages
   Do not modify style.css - extend here instead.
   ============================================================ */

/* --- Download icon size override (style.css uses 56px) --- */
.download-icon {
   width: 48px;
   height: 48px;
}

/* --- Max-width override (style.css uses 1100px, reduced to 950px) --- */
.container,
.nav-inner,
.product-nav-inner,
.hero-inner,
.footer-inner {
   max-width: 950px;
}

/* --- Text link style (content areas only) ---
   Applies to links in main content.
   Nav, footer, buttons are excluded via their own class rules below.
*/
a {
   color: #1a4aaa;
   text-decoration: underline;
   text-underline-offset: 3px;
}

a:hover {
   color: #c5350b;
   text-decoration: underline;
}

/* Nav links: no underline, explicit colors to override global link style */
.nav-menu > li > a,
.nav-menu > li > span {
   text-decoration: none;
   color: #e2e8f0;
}

.nav-menu > li > a:hover,
.nav-menu > li > span:hover,
.nav-menu > li:hover > a,
.nav-menu > li:hover > span {
   color: #ffffff;
   text-decoration: none;
}

.nav-menu > li > a.active {
   color: #93c5fd;
}

.nav-dropdown li a {
   text-decoration: none;
   color: #374151;
}

.nav-dropdown li a:hover {
   color: #2563eb;
   text-decoration: none;
}

.nav-mobile a {
   text-decoration: none;
   color: #e2e8f0;
}

.nav-mobile a:hover {
   color: #93c5fd;
   text-decoration: none;
}

.nav-logo {
   text-decoration: none;
   color: #ffffff;
}

.nav-logo:hover,
.nav-logo:hover span {
   color: #93c5fd;
   text-decoration: none;
}

/* Footer links: no underline */
.footer-products a,
.footer-copy a {
   text-decoration: none;
}

.footer-products a:hover,
.footer-copy a:hover {
   color: #ffffff;
   text-decoration: none;
}

/* Buttons: no underline regardless of state */
.btn,
.btn-cta-primary,
.btn-cta-outline,
.btn-shop {
   text-decoration: none !important;
}

/* --- Nav: dropdown gap fix --- */
.nav-dropdown {
   padding-top: 8px;
}
.nav-menu > li {
   padding-bottom: 8px;
   margin-bottom: -8px;
}

/* --- Nav logo --- */
.nav-logo {
   font-size: 1.2rem;
   font-weight: 700;
   color: #ffffff;
}
.nav-logo span { color: #ffffff; }
.nav-logo:hover,
.nav-logo:hover span { color: #93c5fd; }

/* --- Footer: three-column layout --- */
.footer-inner {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 24px 40px;
   align-items: start;
}
.footer-col-label {
   font-size: 0.72rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: rgba(255,255,255,0.35);
   margin-bottom: 10px;
}
.footer-products {
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 6px;
}
.footer-products a {
   color: rgba(255,255,255,0.65);
   font-size: 0.88rem;
   transition: color 0.15s;
}
.footer-products a:hover {
   color: #ffffff;
   text-decoration: none;
}
.footer-copy {
   grid-column: 1 / -1;
   border-top: 1px solid rgba(255,255,255,0.1);
   padding-top: 16px;
   margin-top: 8px;
   font-size: 0.82rem;
   color: rgba(255,255,255,0.45);
   text-align: center;
}
.footer-copy a { color: rgba(255,255,255,0.55); }

/* --- SVG feature icons --- */
.feature-icon {
   background: #edf2f7;
   border: 1px solid #c9d6e3;
}
.feature-icon svg {
   width: 26px;
   height: 26px;
   stroke: #4f7499;
   fill: none;
   stroke-width: 1.8;
   stroke-linecap: round;
   stroke-linejoin: round;
}

/* --- CTA box: solid dark navy --- */
.cta-box {
   background: #1e3a5f;
}
.cta-box p {
   color: rgba(255,255,255,0.72);
}
.btn-cta-primary {
   display: inline-block;
   padding: 14px 32px;
   border-radius: 8px;
   font-size: 1.05rem;
   font-weight: 600;
   background: #ffffff;
   color: #1e3a5f;
   border: 2px solid #ffffff;
   text-decoration: none;
   transition: background 0.15s, color 0.15s, transform 0.15s;
   line-height: 1.4;
   cursor: pointer;
}
.btn-cta-primary:hover {
   background: #e8f0fe;
   border-color: #e8f0fe;
   color: #1e3a5f;
   text-decoration: none;
   transform: translateY(-1px);
}
.btn-cta-outline {
   display: inline-block;
   padding: 14px 32px;
   border-radius: 8px;
   font-size: 1.05rem;
   font-weight: 600;
   background: transparent;
   color: #ffffff;
   border: 2px solid rgba(255,255,255,0.55);
   text-decoration: none;
   transition: background 0.15s, border-color 0.15s, transform 0.15s;
   line-height: 1.4;
   cursor: pointer;
}
.btn-cta-outline:hover {
   background: rgba(255,255,255,0.1);
   border-color: rgba(255,255,255,0.85);
   color: #ffffff;
   text-decoration: none;
   transform: translateY(-1px);
}

/* --- Feature card hover: border-color im Projektsystem --- */
.feature-card:hover {
   border-color: #c9d6e3;
}

/* --- .btn-primary: dark navy filled button --- */
.btn-primary {
   display: inline-block;
   padding: 12px 28px;
   border-radius: 8px;
   font-size: 1rem;
   font-weight: 600;
   background: #1e3a5f;
   color: #ffffff;
   border: 2px solid #1e3a5f;
   box-shadow: 0 4px 14px rgba(30,58,95,0.28);
   text-decoration: none !important;
   transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
   line-height: 1.4;
   cursor: pointer;
}
.btn-primary:hover {
   background: #16304f;
   border-color: #16304f;
   box-shadow: 0 6px 20px rgba(30,58,95,0.38);
   color: #ffffff;
   transform: translateY(-1px);
}

/* --- .btn-outline: dezentes Blau --- */
.btn-outline {
   color: #4c6588;
   border-color: #4c6588;
   text-decoration: none !important;
}
.btn-outline:hover {
   background: #4c6588;
   border-color: #4c6588;
   color: #ffffff;
   text-decoration: none !important;
}

/* --- .btn-shop: primary accent blue, used in shop and editions --- */
.btn-shop {
   background: #4c6588;
   color: #ffffff !important;
   box-shadow: 0 2px 6px rgba(76,101,136,0.22);
   text-decoration: none !important;
}
.btn-shop:hover {
   background: #405774;
   color: #ffffff !important;
   box-shadow: 0 4px 12px rgba(76,101,136,0.32);
   text-decoration: none !important;
}

/* --- Responsive --- */
@media (max-width: 700px) {
   .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
   .footer-inner { grid-template-columns: 1fr; }
   .footer-copy { grid-column: 1; }
}

/* --- Shared current-page layout used by Home, Features, Download and future pages --- */
body.home-page {
   background: #eef3f8;
   color: #303844;
}

.home-page .container,
.home-page .nav-inner,
.home-page .product-nav-inner,
.home-page .hero-inner,
.home-page .footer-inner {
   max-width: 900px;
}

.home-page .site-header {
   background: #4c6588;
   box-shadow: 0 1px 2px rgba(20,38,57,0.12);
}

.home-page .nav-inner {
   height: 54px;
}

.home-page .nav-logo {
   font-size: 0.98rem;
   font-weight: 600;
   color: rgba(255,255,255,0.82);
}

.home-page .nav-logo span {
   color: rgba(255,255,255,0.82);
}

.home-page .nav-logo:hover,
.home-page .nav-logo:hover span {
   color: #ffffff;
}

.home-page .nav-menu > li > a,
.home-page .nav-menu > li > span {
   color: rgba(255,255,255,0.78);
   font-size: 0.86rem;
   padding: 7px 11px;
   border-radius: 3px;
}

.home-page .nav-menu > li > a:hover,
.home-page .nav-menu > li > span:hover,
.home-page .nav-menu > li:hover > a,
.home-page .nav-menu > li:hover > span {
   background: rgba(255,255,255,0.075);
   color: #ffffff;
}

.home-page .nav-menu > li > a.active {
   color: #ffffff;
   background: rgba(255,255,255,0.12);
   box-shadow: none;
}

.home-page main {
   width: min(900px, calc(100% - 32px));
   margin: 18px auto 0;
   background: #ffffff;
   border: 1px solid #c7d5e5;
   box-shadow: 0 3px 12px rgba(41,66,92,0.12);
}

.home-page .product-titlebar {
   background:
      radial-gradient(ellipse 160px 80px at 96% 0%, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0.14) 38%, rgba(255,255,255,0) 72%),
      linear-gradient(90deg, #405d7f 0%, #4c6588 34%, #8fa5ba 72%, #d2dee9 100%);
   color: #f3f7fb;
   border-bottom: 1px solid #d9e4ee;
   padding: 20px 28px;
   font-size: 1.48rem;
   font-weight: 700;
   line-height: 1.25;
}

.home-page .hero {
   background: #ffffff;
   border-bottom: 0;
   padding: 38px 28px;
   color: #303844;
}

.home-page .hero .hero-inner {
   grid-template-columns: 1.55fr 1.05fr;
   gap: 32px;
   align-items: start;
}

.home-page .hero .hero-inner .hero-text {
   min-width: 0;
}

.home-page .hero-eyebrow {
   display: none;
}

.home-page .hero-text h1 {
   color: #3d5c74;
   font-size: 1.58rem;
   line-height: 1.32;
   margin-bottom: 24px;
}

.home-page .hero-text > p:not(.hero-tagline) {
   max-width: 560px;
   color: #3f4a56;
   font-size: 0.94rem;
}

.home-page .hero-checklist {
   margin-top: 16px;
   padding-left: 6px;
}

.home-page .hero-checklist li {
   color: #344252;
   font-size: 0.92rem;
   line-height: 1.5;
}

.home-page .hero-checklist li::before {
   content: "\2713";
   width: auto;
   min-width: auto;
   height: auto;
   margin-top: 0;
   background: none;
   border-radius: 0;
   color: #3d8a3a;
   font-weight: 700;
   font-size: 1rem;
   line-height: 1.6;
}

.home-page .hero-tagline {
   color: #66717d !important;
   font-size: 0.84rem !important;
   font-style: italic;
}

.home-page .btn-group {
   gap: 10px;
}

.home-page .btn-hero-filled,
.home-page .home-cta .btn-cta-primary {
   display: inline-block;
   background: #d87925;
   color: #ffffff;
   border: 0;
   border-radius: 8px;
   padding: 12px 24px;
   font-size: 0.92rem;
   font-weight: 600;
   line-height: 1.4;
   text-decoration: none;
   box-shadow: none;
   cursor: pointer;
   transition: background 0.15s, color 0.15s;
}

.home-page .btn-hero-filled:hover,
.home-page .home-cta .btn-cta-primary:hover {
   background: #bf671b;
   color: #ffffff;
   text-decoration: none;
   transform: none;
}

.home-page .btn-hero-outline-dark,
.home-page .home-cta .btn-cta-outline {
   display: inline-block;
   background: #f8fafc;
   color: #4c6588;
   border: 2px solid #9ab1c8;
   border-radius: 8px;
   padding: 10px 22px;
   font-size: 0.92rem;
   font-weight: 600;
   line-height: 1.4;
   text-decoration: none;
   cursor: pointer;
   transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.home-page .btn-hero-outline-dark:hover,
.home-page .home-cta .btn-cta-outline:hover {
   background: #4c6588;
   border-color: #4c6588;
   color: #ffffff;
   text-decoration: none;
   transform: none;
}

.home-page .hero-right {
   display: flex;
   flex-direction: column;
   gap: 16px;
   padding-top: 88px;
}

.home-page .hero-right a {
   display: block;
}

.home-page .hero-right img {
   display: block;
   width: 100%;
   max-width: 100% !important;
   min-width: 260px;
   border: 1px solid #c7d5e5;
   border-radius: 3px;
   box-shadow: 0 6px 18px rgba(41,66,92,0.16);
   transition: box-shadow 0.2s, transform 0.2s;
}

.home-page .hero-right a:hover img {
   box-shadow: 0 10px 26px rgba(41,66,92,0.22);
}

.home-page .section {
   padding: 36px 28px;
}

.home-page .hero + .section {
   padding-top: 24px;
}

.home-page .section-gray {
   background: #f5f7fa;
   border-top: 1px solid #dde5ee;
   border-bottom: 1px solid #dde5ee;
}

.home-page .section-header {
   margin-bottom: 22px;
}

.home-page .section-title {
   color: #3d5c74;
   font-size: 1.38rem;
}

.intro-title {
   color: #3d5c74;
   font-size: 1.58rem;
   line-height: 1.32;
   font-weight: 800;
   margin: 0 0 24px;
}

.home-page .section-subtitle {
   color: #596675;
   font-size: 0.92rem;
}

.home-page .text-center .section-subtitle {
   margin: 0 auto;
}

.home-page .features-grid {
   margin-top: 36px;
}

.home-page .feature-card,
.home-page .usecase-card,
.home-page .testimonial-card,
.home-page .home-cta {
   background: #ffffff;
   border: 1px solid #d6e0ea;
   border-radius: 8px;
   box-shadow: none;
}

.home-page .feature-card,
.home-page .usecase-card {
   padding: 20px 18px;
}

.home-page .feature-card:hover {
   box-shadow: none;
   border-color: #d6e0ea;
   transform: none;
}

.home-page .feature-icon {
   width: 42px;
   height: 42px;
   background: #edf3f8;
   border-color: #c8d6e4;
   border-radius: 8px;
   margin-bottom: 14px;
}

.home-page .feature-icon svg {
   width: 23px;
   height: 23px;
   stroke: #40698f;
}

.home-page .feature-card h3 {
   color: #3d5c74;
}

.home-page .usecases-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   margin-top: 36px;
}

.home-page .usecase-card h3 {
   color: #3d5c74;
   font-size: 0.97rem;
   font-weight: 700;
   margin-bottom: 10px;
}

.home-page .testimonial-text strong {
   color: #3d5c74;
}

.home-page .usecase-card p {
   color: #596675;
   font-size: 0.88rem;
   line-height: 1.6;
   margin: 0;
}

.home-page .features-more,
.home-page .testimonials-more {
   margin-top: 32px;
}

.home-page .testimonials-grid {
   grid-template-columns: repeat(3, 1fr);
   margin-top: 32px;
}

.home-page .home-cta-section {
   padding-top: 40px;
   padding-bottom: 48px;
}

.home-page .home-cta {
   max-width: 760px;
   margin: 0 auto;
   padding: 32px 28px;
   background: #fbfcfe;
   color: #213f5f;
}

.home-page .home-cta h2 {
   color: #3d5c74;
   font-size: 1.32rem;
}

.home-page .home-cta p {
   color: #596675;
}

.home-page .cta-note {
   margin-bottom: 18px;
   color: #596675;
   font-size: 0.84rem;
   line-height: 1.45;
}

.home-page .home-cta-actions {
   justify-content: center;
}

.home-page .site-footer {
   width: min(900px, calc(100% - 32px));
   margin: 0 auto 24px;
   padding: 36px 0 24px;
   background: #eef3f8;
   color: #526274;
}

.home-page .footer-col-label {
   color: #526274;
}

.home-page .footer-products a,
.home-page .footer-copy a {
   color: #2e5d8a;
}

.home-page .footer-products a:hover,
.home-page .footer-copy a:hover {
   color: #b85f19;
}

.home-page .footer-copy {
   border-top-color: rgba(76,101,136,0.22);
   color: #657486;
}

@media (max-width: 900px) {
   .home-page .hero .hero-inner {
      grid-template-columns: 1fr;
   }

   .home-page .hero-right {
      display: none;
   }

   .home-page .hero-text h1 {
      white-space: normal;
      font-size: 1.5rem;
   }

   .home-page .usecases-grid {
      grid-template-columns: 1fr 1fr;
   }
}

@media (max-width: 700px) {
   .home-page .testimonials-grid,
   .home-page .usecases-grid {
      grid-template-columns: 1fr;
   }
}