/* =========================================
   werbeschild.css
========================================= */

.aufklaerungs-schild {

    position: absolute;

    top: -47px;
    left: 30px;

    display: inline-block;

    text-decoration: none;

    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(220px, 28vw, 360px);

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

    transition:
    transform 0.28s ease,
    box-shadow 0.28s ease;

}


/* 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;
}


/* Kleingedruckter Zaunlatten-Hinweis */

.zaunlatte {

    display: block;

    margin-top: 0.55em;

    font-size: 0.65em;

    font-weight: 600;

    line-height: 1.2;

    text-transform: none;

    letter-spacing: 0.015em;

    opacity: 0.72;
}

















/* =========================================
   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);
}


/* =========================================
   Hover-Effekt Werbeschild
========================================= */

.aufklaerungs-schild:hover {

    transform:
        rotate(0deg)
        scale(1.3)
        translateX(12%);

    z-index: 50;
}


/* =========================================
   Seitenleisten-Werbung
========================================= */

.seitenleisten-werbung {

    text-align: center;

    padding: 20px 10px;
}


/* Werbung: */

.werbung-label {

    text-align: left;


    font-size: 0.6rem;

    color: #222;

    margin-bottom: 22px;
}


/* Angstfrei zum Grundeinkommen */

.werbung-projekt {

    font-size: clamp(1.3rem, 1.5vw, 2.1rem);

    line-height: 1.1;

    font-weight: 700;

    color: #C45F12;

    margin-bottom: 46px;

    text-decoration: none !important;

    transition:
      transform 0.22s ease,
      color 0.22s ease,
      filter 0.22s ease;

    display: inline-block;
}


/* jetzt mit dem */

.werbung-text {

    text-align: left;

    font-size: 0.6rem;

    color: #111;

    margin-bottom: 20px;
}


/* BGE-Ausredengenerator */

.werbung-generator {

    font-size: clamp(1.3rem, 1.5vw, 2.1rem);

    line-height: 1.1;

    font-weight: 700;

    color: #C45F12;

    text-decoration: none !important;

    transition:
      transform 0.22s ease,
      color 0.22s ease,
      filter 0.22s ease;

    display: inline-block;
}


/* Hover-Effekt */

.werbung-projekt:hover,
.werbung-generator:hover {

    transform: scale(1.3);

    filter: brightness(1.05);

    text-decoration: none !important;
}