/* =========================================
   Werbeschild
========================================= */

.aufklaerungs-schild {

    position: absolute;

    top: -47px;
    left: 30px;

    display: inline-block;

    padding: 12px 16px;

    background:
    linear-gradient(
        180deg,
        #f7f2df 0%,
        #f3ecd2 100%
    );

    border: 4px solid #1f1f1f;

    box-shadow:
        8px 8px 18px rgba(0,0,0,0.25);

        transform: rotate(-3deg);

    max-width: clamp(140px, 22vw, 220px);

    margin: 18px 12px;
    z-index: 5;
}


/* Klebeband */

.schild-klebeband {

    position: absolute;
    z-index: 10;

    top: -10px;
    left: 50%;

    width: 68px;
    height: 11px;
    border-radius: 1px;

    background:
        linear-gradient(
            180deg,
            rgba(245,245,235,0.72) 0%,
            rgba(210,210,195,0.62) 100%
        );

    border:
        1px solid rgba(0,0,0,0.08);

    transform:
        translateX(-50%)
        rotate(5deg);

    opacity: 0.78;

    backdrop-filter: blur(1px);

    box-shadow:
        0 1px 1px rgba(0,0,0,0.08);
}


/* Text */

.schild-text {

    font-family: Arial, sans-serif;

    font-size: clamp(0.55rem, 1vw, 1.5rem);

    font-weight: 700;

    line-height: 1.25;

    text-transform: uppercase;

    letter-spacing: 0.02em;

    color: #111;

    text-align: center;
    position: relative;
    z-index: 3;
}


.schild-klein {

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    margin-top: 2em;

    font-size: 0.62em;

    white-space: nowrap;

    letter-spacing: 0.04em;

    opacity: 0.82;
}

.schild-gesucht {

    display: block;

    margin-top: 0.9em;
}


/* =========================================
   Papierstruktur
========================================= */

.aufklaerungs-schild::before {

    content: "";

    position: absolute;
    z-index: 1;
    inset: 0;

    background:
      repeating-linear-gradient(
          -45deg,
          rgba(255,255,255,0.05) 0px,
          rgba(255,255,255,0.05) 3px,
          rgba(0,0,0,0.025) 4px,
          rgba(0,0,0,0.025) 6px
      );

    opacity: 0.6;

    pointer-events: none;
}

/* =========================================
   Zerknickte Ecke
========================================= */

.aufklaerungs-schild::after {

    content: "";

    position: absolute;
    z-index: 2;

    bottom: -1px;
    left: -1px;

    width: 38px;
    height: 38px;

    background:
        linear-gradient(
            135deg,
            rgba(0,0,0,0.18) 0%,
            rgba(255,255,255,0.7) 42%,
            #ddd4b8 43%,
            #f5f0d8 100%
        );

    clip-path: polygon(
        0 100%,
        0 0,
        100% 100%
    );



    opacity: 0.9;
    box-shadow:
    2px -2px 4px rgba(0,0,0,0.18);
}