/* ==========================================================
   Hammer AnzeigenMarkt
   Anzeigendetailseite
   Version: 2.0
   Stand: 14.07.2026
   ========================================================== */

body.azm-modal-open {
    overflow: hidden;
}

.azm-breadcrumb{
    margin-bottom:20px;
    color:var(--azm-muted);
    font-size:14px;
    line-height:1.6;
    overflow-wrap:anywhere;
}
.azm-breadcrumb a{color:var(--azm-primary);text-decoration:none}
.azm-breadcrumb a:hover{text-decoration:underline}

.azm-detail-grid{
    display:grid;
    grid-template-columns:minmax(0,2fr) minmax(300px,1fr);
    gap:24px;
}

.azm-panel{
    border:1px solid var(--azm-border);
    border-radius:12px;
    background:#fff;
    overflow:hidden;
}
.azm-panel-body{padding:22px}
.azm-tools-panel{margin-top:22px}

.azm-gallery-main{
    position:relative;
    aspect-ratio:4/3;
    overflow:hidden;
    background:#eef2f6;
}
.azm-main-image-button{
    position:relative;
    width:100%;
    height:100%;
    padding:0;
    border:0;
    background:transparent;
    cursor:zoom-in;
}
.azm-gallery-main img{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    transition:opacity .18s ease,transform .25s ease;
}
.azm-gallery-main img.is-changing{opacity:.35;transform:scale(.985)}
.azm-zoom-hint{
    position:absolute;
    right:14px;
    bottom:14px;
    padding:8px 11px;
    border-radius:999px;
    color:#fff;
    background:rgba(20,36,52,.76);
    font-size:13px;
    font-weight:700;
    pointer-events:none;
}
.azm-gallery-placeholder{
    width:100%;
    height:100%;
    display:grid;
    place-items:center;
    font-size:72px;
}

.azm-thumbs{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(90px,1fr));
    gap:10px;
    padding:14px;
    border-top:1px solid var(--azm-border);
}
.azm-thumb{
    display:block;
    aspect-ratio:1/1;
    overflow:hidden;
    padding:0;
    border:2px solid transparent;
    border-radius:8px;
    background:#eef2f6;
    cursor:pointer;
}
.azm-thumb:hover,.azm-thumb.active{border-color:var(--azm-primary)}
.azm-thumb:focus-visible{outline:3px solid rgba(23,90,156,.25);outline-offset:2px}
.azm-thumb img{width:100%;height:100%;display:block;object-fit:cover}

.azm-head{margin-bottom:22px}
.azm-type{
    display:inline-block;
    margin-bottom:10px;
    padding:5px 10px;
    color:var(--azm-primary);
    background:#eaf3fb;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}
.azm-head h1{
    margin:0 0 12px;
    color:var(--azm-primary);
    font-size:clamp(28px,4vw,42px);
    line-height:1.15;
    overflow-wrap:anywhere;
}
.azm-price{font-size:28px;font-weight:800;color:#173552}
.azm-description{line-height:1.75;color:#384d60;white-space:pre-line;overflow-wrap:anywhere}

.azm-facts{display:grid;gap:11px}
.azm-fact{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:18px;
    padding:11px 0;
    border-bottom:1px solid #e7ebef;
}
.azm-fact:last-child{border-bottom:0}
.azm-fact span{color:var(--azm-muted)}
.azm-fact strong{text-align:right;overflow-wrap:anywhere}

.azm-contact{display:grid;gap:12px;line-height:1.5}
.azm-contact a{color:var(--azm-primary);overflow-wrap:anywhere}

.azm-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:10px 17px;
    border:0;
    border-radius:8px;
    font-weight:700;
    text-decoration:none;
    cursor:pointer;
    transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.azm-button:hover{transform:translateY(-1px)}
.azm-button:focus-visible{outline:3px solid rgba(23,90,156,.25);outline-offset:2px}
.azm-button-primary{color:#fff;background:var(--azm-primary)}
.azm-button-primary:hover{background:var(--azm-primary-dark)}
.azm-button-secondary{color:#23435f;background:#fff;border:1px solid #cad3dc}
.azm-button-secondary:hover{background:#f7fafc}
.azm-button-danger{color:#b42318;background:#fff3f2;border:1px solid #f3c5c1}
.azm-button-danger:hover{background:#ffe9e6}
.azm-button.is-favorite{color:#9b1c31;background:#fff0f3;border-color:#efb8c2}

.azm-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.azm-back-actions{margin-top:22px}
.azm-tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.azm-tool-grid .azm-button{width:100%}
.azm-tool-note{margin:13px 0 0;color:var(--azm-muted);font-size:12px;line-height:1.5}

.azm-ad-navigation{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
    margin-top:28px;
}
.azm-nav-card{
    display:flex;
    min-height:92px;
    flex-direction:column;
    justify-content:center;
    gap:8px;
    padding:17px;
    color:inherit;
    border:1px solid var(--azm-border);
    border-radius:10px;
    background:#fff;
    text-decoration:none;
}
.azm-nav-card:hover{border-color:#aebdca;box-shadow:0 8px 22px rgba(31,51,72,.08)}
.azm-nav-card span{color:var(--azm-muted);font-size:13px}
.azm-nav-card strong{color:var(--azm-primary);overflow-wrap:anywhere}
.azm-nav-card-next{text-align:right;align-items:flex-end}

.azm-related{margin-top:28px}
.azm-related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.azm-related-card{
    display:block;
    overflow:hidden;
    color:inherit;
    border:1px solid var(--azm-border);
    border-radius:10px;
    background:#fff;
    text-decoration:none;
    transition:transform .15s ease,box-shadow .15s ease;
}
.azm-related-card:hover{transform:translateY(-2px);box-shadow:0 9px 22px rgba(31,51,72,.09)}
.azm-related-image{height:150px;background:#eef2f6}
.azm-related-image img{width:100%;height:100%;display:block;object-fit:cover}
.azm-related-placeholder{width:100%;height:100%;display:grid;place-items:center;font-size:38px}
.azm-related-body{padding:14px}
.azm-related-body h3{margin:0 0 8px;color:var(--azm-primary);overflow-wrap:anywhere}
.azm-related-meta{color:var(--azm-muted);font-size:13px}

.azm-modal[hidden]{display:none}
.azm-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px}
.azm-modal-backdrop{position:absolute;inset:0;background:rgba(10,23,36,.78);backdrop-filter:blur(3px)}
.azm-modal-dialog{
    position:relative;
    z-index:1;
    width:min(760px,100%);
    max-height:calc(100vh - 40px);
    overflow:auto;
    padding:26px;
    border-radius:14px;
    background:#fff;
    box-shadow:0 24px 70px rgba(0,0,0,.32);
}
.azm-modal-close{
    position:absolute;
    top:10px;
    right:12px;
    z-index:5;
    width:42px;
    height:42px;
    border:0;
    border-radius:50%;
    color:#24394d;
    background:rgba(255,255,255,.9);
    font-size:30px;
    line-height:1;
    cursor:pointer;
}
.azm-lightbox-dialog{
    width:min(1100px,100%);
    height:min(88vh,820px);
    display:grid;
    place-items:center;
    padding:18px 64px 42px;
    background:#111b24;
    overflow:hidden;
}
.azm-lightbox-dialog img{max-width:100%;max-height:100%;object-fit:contain}
.azm-lightbox-arrow{
    position:absolute;
    top:50%;
    width:48px;
    height:64px;
    transform:translateY(-50%);
    border:0;
    border-radius:10px;
    color:#fff;
    background:rgba(255,255,255,.14);
    font-size:42px;
    cursor:pointer;
}
.azm-lightbox-arrow:hover{background:rgba(255,255,255,.24)}
.azm-lightbox-prev{left:10px}
.azm-lightbox-next{right:10px}
.azm-lightbox-count{position:absolute;bottom:14px;color:#fff;font-weight:700}
.azm-small-dialog{width:min(430px,100%);text-align:center}
.azm-qr-code{display:grid;place-items:center;min-height:220px;margin:18px auto}
.azm-qr-code img,.azm-qr-code canvas{max-width:100%;height:auto!important}

.azm-report-form{display:grid;gap:15px;margin-top:18px}
.azm-report-form label{display:grid;gap:7px;font-weight:700}
.azm-report-form small{font-weight:400;color:var(--azm-muted)}
.azm-report-form select,.azm-report-form textarea,.azm-report-form input{
    width:100%;
    padding:12px 13px;
    border:1px solid #cbd5df;
    border-radius:8px;
    color:var(--azm-text);
    background:#fff;
}
.azm-report-form textarea{resize:vertical}
.azm-honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.azm-alert{margin:15px 0;padding:13px 15px;border-radius:8px;line-height:1.5}
.azm-alert-success{color:#075d38;background:#eaf8f1;border:1px solid #acd9c2}
.azm-alert-error{color:#8e1b13;background:#fff0ef;border:1px solid #efbeb9}

@media(max-width:850px){
    body{padding:12px}
    .wrapper{padding:18px;border-radius:8px}
    .azm-detail-grid{grid-template-columns:1fr}
    .azm-gallery-main{aspect-ratio:16/11}
    .azm-ad-navigation{grid-template-columns:1fr}
    .azm-nav-card-next{text-align:left;align-items:flex-start}
}

@media(max-width:600px){
    .azm-breadcrumb{margin-bottom:14px;font-size:13px}
    .azm-panel-body{padding:17px}
    .azm-head h1{font-size:clamp(27px,9vw,35px)}
    .azm-price{font-size:24px}
    .azm-gallery-main{aspect-ratio:4/3}
    .azm-zoom-hint{right:9px;bottom:9px;font-size:12px}
    .azm-thumbs{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;padding:10px}
    .azm-fact{display:grid;grid-template-columns:1fr;gap:4px}
    .azm-fact strong{text-align:left}
    .azm-actions,.azm-back-actions{display:grid;grid-template-columns:1fr}
    .azm-actions .azm-button{width:100%}
    .azm-tool-grid{grid-template-columns:1fr}
    .azm-related-grid{grid-template-columns:1fr}
    .azm-related-image{height:190px}
    .azm-modal{padding:10px}
    .azm-modal-dialog{padding:22px 17px}
    .azm-lightbox-dialog{height:calc(100vh - 20px);padding:55px 10px 50px}
    .azm-lightbox-arrow{top:auto;bottom:6px;width:52px;height:40px;transform:none;font-size:34px}
    .azm-lightbox-prev{left:12px}
    .azm-lightbox-next{right:12px}
    .azm-lightbox-count{bottom:17px}
}

/* ==========================================================
   Gemeinsamer Frontend-Rahmen und Werbeplatz
   ========================================================== */

.azm-ad-slot-ad-sidebar {
    width: 100%;
    max-width: 300px;
    min-height: 250px;
    margin: 22px auto 0;
    aspect-ratio: 300 / 250;
}

.azm-ad-empty-page {
    margin-bottom: 30px;
    padding: 55px 25px;
    border: 1px solid var(--azm-border);
    border-radius: var(--azm-radius-medium);
    background: #fff;
    text-align: center;
}

.azm-ad-empty-icon {
    font-size: 44px;
}

.azm-detail-grid > aside {
    min-width: 0;
}

@media (max-width: 850px) {
    .azm-ad-slot-ad-sidebar {
        width: 100%;
        max-width: 300px;
    }
}