/* ── Art of Touch custom overrides ──────────────────────────────────────── */

/* Portfolio cards: item-box style */
.card { border: none; background: transparent; }
.card-img-top { border-radius: 0; }
.card-body { background: #fff; padding: 0.6rem 0.75rem; }
.card-title { font-size: 14px; color: #2E363F; margin: 0; font-weight: 600; }
.card-text  { font-size: 12px; color: #F07057; font-weight: 600; letter-spacing: 0.05em; }
.card-footer { display: none; }

.card-link { text-decoration: none; color: inherit; }
.card-link:hover { text-decoration: none; }
.card-link:hover .card-img-top { opacity: 0.85; }

/* Sections */
section.container { padding-top: 2rem; padding-bottom: 2rem; }

/* Hero (ForgeCMS default) */
section.hero {
    background: transparent;
    border-left: none;
    padding: 2rem 0 1rem;
}
section.hero h1 { color: #2E363F; font-size: 1.8rem; }
section.hero p   { color: #555; }

/* Buttons */
.button {
    background: #F07057;
    color: #fff;
    padding: 0.5rem 1.5rem;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
    margin-top: 1rem;
}
.button:hover { background: #ed5434; color: #fff; text-decoration: none; }

/* Footer bar */
.footer-bar {
    background: #1b1f23;
    color: #aaa;
    padding: 10px 0;
    font-size: 13px;
}
.footer-bar a { color: #F07057; }
.footer-bar .toTop { float: right; color: #aaa; text-decoration: none; }

/* Footer content */
.footer-content {
    background: #2E363F;
    color: #ccc;
    padding: 2.5rem 0;
    font-size: 13px;
}
.footer-content h3 { color: #fff; font-size: 14px; letter-spacing: 0.1em; margin-bottom: 1rem; }
.footer-content h4 { color: #fff; font-size: 16px; letter-spacing: 0.2em; margin-top: 0.75rem; }
.footer-content a { color: #ccc; text-decoration: none; }
.footer-content a:hover { color: #F07057; }
.footer-content ul { list-style: none; padding: 0; margin: 0; }
.footer-content ul li { padding-top: 3px; padding-bottom: 3px; }
.footer-content address { font-style: normal; }
/* footer-sprite padding comes from layout.css (30px left for icon) — do not override */

/* Wrapper padding für fixed navbar */
#wrapper { padding-top: 81px; }

/* ── Hero Slider ─────────────────────────────────────────────────────────── */
.fullwidthbanner-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

#hero-slider {
    margin-bottom: 0;
}

#hero-slider .item {
    position: relative;
    height: 480px;
    overflow: hidden;
    background: #000;
}

#hero-slider .item img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7;
}

#hero-slider .carousel-caption {
    position: absolute;
    left: 80px;
    right: 80px;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    text-align: left;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
    padding: 0;
}

#hero-slider .carousel-caption h1 {
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

#hero-slider .carousel-caption p {
    font-size: 1rem;
    color: #e0e0e0;
    line-height: 1.7;
    max-width: 560px;
}

#hero-slider .carousel-control {
    background: none;
    width: 5%;
    opacity: 0.6;
}

#hero-slider .carousel-control:hover { opacity: 1; }

#hero-slider .carousel-indicators li {
    border-color: #fff;
}

#hero-slider .carousel-indicators .active {
    background-color: #F07057;
    border-color: #F07057;
}

@media (max-width: 767px) {
    #hero-slider .item { height: 280px; }
    #hero-slider .carousel-caption { left: 20px; right: 20px; }
    #hero-slider .carousel-caption h1 { font-size: 1.6rem; }
}