.cypd-home,.cypd-board,.cypd-manage{font-family:Inter,Arial,sans-serif;max-width:1320px;margin:36px auto;padding:0 20px;color:#111827}.cypd-hero{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;background:radial-gradient(circle at top right,#1d4ed8,#0f172a 52%,#020617);color:#fff;border-radius:30px;padding:56px;box-shadow:0 28px 80px #0f172a33}.cypd-badge{display:inline-block;background:#ffffff18;border:1px solid #ffffff25;padding:7px 12px;border-radius:999px;font-weight:800;margin-bottom:12px}.cypd-hero h1,.cypd-board-hero h1{font-size:58px;line-height:1.02;margin:0 0 14px}.cypd-hero p,.cypd-board-hero p{font-size:22px;color:#cbd5e1;margin:0 0 24px}.cypd-btn{display:inline-block;background:linear-gradient(135deg,#7c3aed,#06b6d4);border:0;border-radius:14px;color:#fff!important;padding:14px 22px;text-decoration:none;font-weight:900;cursor:pointer}.cypd-hero-card{background:#ffffff10;border:1px solid #ffffff20;border-radius:24px;padding:24px}.cypd-map-wrap{display:grid;grid-template-columns:minmax(320px,560px) 1fr;gap:24px;align-items:start}.cypd-pixel-map{position:relative;height:520px;max-width:560px;background:linear-gradient(180deg,#ffffff14,#ffffff05);border-radius:22px;border:1px solid #ffffff25;overflow:hidden}.cypd-section .cypd-pixel-map{border-color:#e5e7eb;background:#f8fafc}.cypd-state{position:absolute;left:calc(var(--x)*7%);top:calc(var(--y)*5%);width:calc(var(--w)*7%);height:calc(var(--h)*5%);background:linear-gradient(135deg,#7c3aed,#06b6d4);border:2px solid #fff;border-radius:7px;display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;font-weight:900;box-shadow:0 8px 20px #0003;transition:.18s}.cypd-state span{position:relative;z-index:1;text-shadow:0 2px 8px #000}.cypd-state:hover{transform:scale(1.08);z-index:10;filter:saturate(1.3)}.cypd-state-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}.cypd-state-list a{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:15px;text-decoration:none;color:#111827;font-weight:800;box-shadow:0 10px 30px #0000000a}.cypd-info-row,.cypd-board-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:24px 0}.cypd-info-row div,.cypd-board-stats div{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:20px;box-shadow:0 10px 35px #0000000a}.cypd-info-row strong,.cypd-board-stats strong{display:block;font-size:28px}.cypd-info-row span,.cypd-board-stats span{color:#64748b}.cypd-section{margin-top:34px}.cypd-section h2{font-size:36px}.cypd-board-hero{display:flex;justify-content:space-between;gap:24px;align-items:center;background:#0f172a;color:#fff;border-radius:26px;padding:36px;margin-bottom:22px}.cypd-price-box{background:#ffffff12;border:1px solid #ffffff25;border-radius:20px;padding:22px;min-width:160px;text-align:center}.cypd-price-box strong{font-size:34px;display:block}.cypd-price-box span{color:#cbd5e1}.cypd-selection-bar{position:sticky;top:32px;z-index:20;display:flex;gap:12px;justify-content:center;background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:14px;margin:18px 0;box-shadow:0 16px 50px #00000012}.cypd-selection-bar div{min-width:140px;text-align:center}.cypd-selection-bar strong{font-size:24px}.cypd-wall-wrap{position:relative;background:#020617;border-radius:18px;padding:12px;max-height:780px;overflow:auto}.cypd-grid,.cypd-ad-layer{display:grid;gap:2px}.cypd-ad-layer{position:absolute;inset:12px;pointer-events:none}.cypd-cell{aspect-ratio:1/1;min-width:6px;border:0;border-radius:2px;background:#d1d5db;cursor:pointer;transition:.12s}.cypd-cell.free:hover{background:#93c5fd;transform:scale(1.35);z-index:4}.cypd-cell.selected{background:#2563eb}.cypd-cell.busy{background:#1f2937;cursor:not-allowed}.cypd-ad{pointer-events:auto;position:relative;z-index:8;border:2px solid #fff;border-radius:6px;overflow:hidden;background:linear-gradient(135deg,#7c3aed,#06b6d4);color:#fff;display:flex;align-items:center;justify-content:center;min-height:16px;box-shadow:0 8px 28px #0006;cursor:pointer;transition:.18s}.cypd-ad img{width:100%;height:100%;object-fit:contain;background:#fff}.cypd-ad span{font-size:11px;font-weight:900;padding:3px;text-align:center}.cypd-ad em{display:none;position:absolute;left:50%;bottom:100%;transform:translateX(-50%);background:#111827;color:#fff;font-style:normal;border-radius:10px;padding:8px 10px;white-space:nowrap;box-shadow:0 10px 30px #0006}.cypd-ad:hover{transform:scale(1.22);z-index:50}.cypd-ad:hover em{display:block}.cypd-buy,.cypd-manage{background:#f8fafc;border:1px solid #e5e7eb;border-radius:22px;padding:26px;margin-top:26px}.cypd-form,.cypd-link-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:18px 0}.cypd-form label,.cypd-manage label{font-weight:800;display:block;margin:10px 0}.cypd-form input,.cypd-manage input,.cypd-manage textarea{width:100%;padding:13px;border:1px solid #cbd5e1;border-radius:12px;margin-top:6px}.cypd-small{font-size:13px;color:#64748b}.cypd-notice{padding:20px;background:#fff7ed;border:1px solid #fed7aa;border-radius:14px}.cypd-modal{display:none;position:fixed;inset:0;background:#0008;z-index:99999;align-items:center;justify-content:center;padding:20px}.cypd-modal.open{display:flex}.cypd-modal-box{background:#fff;border-radius:24px;padding:24px;max-width:560px;width:100%;position:relative;box-shadow:0 30px 90px #0008}.cypd-modal-close{position:absolute;right:14px;top:10px;border:0;background:#111827;color:#fff;width:34px;height:34px;border-radius:50%;font-size:22px;cursor:pointer}.cypd-pop-head{display:flex;gap:16px;align-items:center}.cypd-pop-head img{width:90px;height:90px;object-fit:contain;border:1px solid #e5e7eb;border-radius:14px}.cypd-pop-head h2{margin:0}.cypd-pop-head p{margin:6px 0 0;color:#64748b}.cypd-pop-links{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.cypd-pop-links a{background:#2563eb;color:#fff;text-decoration:none;border-radius:999px;padding:9px 13px;font-weight:800}@media(max-width:900px){.cypd-hero,.cypd-map-wrap{grid-template-columns:1fr}.cypd-hero h1,.cypd-board-hero h1{font-size:38px}.cypd-board-hero{display:block}.cypd-pixel-map{height:420px}.cypd-selection-bar{position:static;flex-wrap:wrap}}

/* V4: Deutschlandkarte Hover-Statistiken */
.cypd-state.cypd-load-low{background:linear-gradient(135deg,#16a34a,#22c55e)}
.cypd-state.cypd-load-medium{background:linear-gradient(135deg,#f59e0b,#facc15)}
.cypd-state.cypd-load-high{background:linear-gradient(135deg,#dc2626,#f97316)}
.cypd-state-tooltip{
    display:none;
    position:absolute;
    left:50%;
    bottom:calc(100% + 12px);
    transform:translateX(-50%);
    min-width:230px;
    background:#0f172a;
    color:#fff;
    border:1px solid rgba(255,255,255,.18);
    border-radius:14px;
    padding:13px 14px;
    box-shadow:0 18px 50px rgba(0,0,0,.45);
    z-index:100;
    text-align:left;
    pointer-events:none;
}
.cypd-state-tooltip:after{
    content:"";
    position:absolute;
    left:50%;
    top:100%;
    transform:translateX(-50%);
    border:8px solid transparent;
    border-top-color:#0f172a;
}
.cypd-state-tooltip strong{
    display:block;
    font-size:15px;
    margin-bottom:7px;
}
.cypd-state-tooltip small{
    display:block;
    font-size:12px;
    line-height:1.45;
    color:#dbeafe;
}
.cypd-state-tooltip em{
    display:block;
    margin-top:8px;
    color:#67e8f9;
    font-style:normal;
    font-weight:800;
    font-size:12px;
}
.cypd-state:hover .cypd-state-tooltip{
    display:block;
}
.cypd-state-list a{
    display:flex;
    flex-direction:column;
    gap:5px;
}
.cypd-state-list a span{
    color:#64748b;
    font-size:13px;
    font-weight:600;
}

.cypd-svg-map{position:relative;max-width:620px;width:100%}
.cypd-svg-map svg{width:100%;height:auto;display:block;border-radius:28px;box-shadow:0 24px 70px rgba(2,6,23,.28)}
.cypd-svg-state{cursor:pointer}
.cypd-svg-state:hover{filter:brightness(1.08) saturate(1.2)}
.cypd-map-floating-tooltip{display:none;position:absolute;z-index:200;min-width:240px;background:#0f172a;color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:16px;padding:14px 15px;box-shadow:0 18px 55px rgba(0,0,0,.48);pointer-events:none}
.cypd-map-floating-tooltip.open{display:block}
.cypd-map-floating-tooltip strong{display:block;font-size:16px;margin-bottom:8px}
.cypd-map-floating-tooltip small{display:block;font-size:12px;line-height:1.5;color:#dbeafe}
.cypd-map-floating-tooltip em{display:block;margin-top:9px;color:#67e8f9;font-style:normal;font-weight:900;font-size:12px}

/* V6: professionelle SVG-Karte auf echter Bundeslandkarten-Basis */
.cypd-svg-map svg{background:#071527}

/* V8: PNG-Deutschlandkarte mit transparenter SVG-Hotspot-Ebene */
.cypd-png-map{position:relative;max-width:720px;width:100%;border-radius:28px;overflow:hidden;box-shadow:0 24px 70px rgba(2,6,23,.32)}
.cypd-png-map img{display:block;width:100%;height:auto}
.cypd-hotspot-layer{position:absolute;inset:0}
.cypd-hotspot-layer svg{display:block;width:100%;height:100%}
.cypd-map-floating-tooltip{display:none;position:absolute;z-index:200;min-width:250px;background:#0f172a;color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:16px;padding:14px 15px;box-shadow:0 18px 55px rgba(0,0,0,.48);pointer-events:none}
.cypd-map-floating-tooltip.open{display:block}
.cypd-map-floating-tooltip strong{display:block;font-size:16px;margin-bottom:8px}
.cypd-map-floating-tooltip small{display:block;font-size:12px;line-height:1.5;color:#dbeafe}
.cypd-map-floating-tooltip em{display:block;margin-top:9px;color:#67e8f9;font-style:normal;font-weight:900;font-size:12px}

/* V14: Stadtstaaten-Hotspots liegen in der SVG-Zeichenreihenfolge oben, nicht geografisch verschoben. */

/* V23: V17-Pixelkarte groß mittig + verschiebbare Labels */
.cypd-map-section{text-align:center;margin:30px auto}
.cypd-map-title{font-size:clamp(34px,5vw,64px);line-height:1.05;margin:0 0 10px;font-weight:900;color:#fff;text-shadow:0 6px 22px rgba(0,0,0,.35)}
.cypd-map-subtitle{margin:0 auto 22px;max-width:760px;color:#cbd5e1;font-size:18px}
.cypd-single-map-wrap{display:flex;justify-content:center;width:100%}
.cypd-png-map.cypd-label-map{position:relative;max-width:1180px!important;width:100%;margin:0 auto;border-radius:28px;overflow:hidden;box-shadow:0 24px 70px rgba(2,6,23,.38);background:#061427}
.cypd-png-map.cypd-label-map img{width:100%;height:auto;display:block}
.cypd-label-layer{position:absolute;inset:0;z-index:8}
.cypd-state-label{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;justify-content:center;padding:5px 9px;border-radius:999px;background:rgba(6,15,30,.72);border:1px solid rgba(255,255,255,.65);color:#fff!important;text-decoration:none!important;font-size:clamp(9px,1.1vw,15px);font-weight:900;line-height:1.05;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.35);text-shadow:0 2px 5px rgba(0,0,0,.7)}
.cypd-state-label:hover{background:rgba(37,99,235,.95);border-color:#eaff00;color:#fff!important}
.cypd-map-floating-tooltip{z-index:30}
.cypd-state-list-under-map{max-width:1180px;margin:24px auto 0}
@media(max-width:700px){.cypd-state-label{font-size:8px;padding:3px 5px}.cypd-map-subtitle{font-size:15px}}

/* Admin label editor */
.cypd-label-editor{position:relative;max-width:1100px;width:100%;border-radius:18px;overflow:hidden;background:#061427;box-shadow:0 14px 40px rgba(0,0,0,.22)}
.cypd-label-editor img{display:block;width:100%;height:auto}
.cypd-label-editor-layer{position:absolute;inset:0}
.cypd-editor-label{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;justify-content:center;padding:5px 9px;border-radius:999px;background:rgba(37,99,235,.95);border:2px solid #eaff00;color:#fff;font-weight:900;font-size:13px;cursor:move;user-select:none;box-shadow:0 4px 14px rgba(0,0,0,.35);white-space:nowrap}