/* =========================================================
SUCHBEREICH
========================================================= */

.pattern-tools {

padding: 30px 55px 28px;

background: var(--white);

border-bottom:
    1px solid
    rgba(81,75,87,0.08);

}

.search-box {

position: relative;

max-width: 690px;

height: 54px;

margin: 0 auto 23px;

display: flex;

align-items: center;

border:
    2px solid
    var(--light-lilac);

border-radius: 100px;

background: var(--white);

transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;

}

.search-box:focus-within {

border-color: var(--lilac);

box-shadow:
    0 6px 22px
    rgba(183,182,225,0.25);

}

.search-symbol {

width: 52px;

flex: 0 0 52px;

text-align: center;

color: var(--lilac);

font-size: 1.55rem;

line-height: 1;

}

.search-box input {

flex: 1;

min-width: 0;

height: 100%;

padding: 0 12px 0 0;

border: 0;

outline: none;

background: transparent;

color: var(--dark);

font-size: 0.88rem;

}

.search-box input::placeholder {

color: #aaa4ae;

}

/* =========================================================
FILTER
========================================================= */

.difficulty-buttons {

display: flex;

align-items: center;

justify-content: center;

flex-wrap: wrap;

gap: 7px;

}

.difficulty-button {

padding: 7px 15px;

border:
    1px solid
    #e3dfe5;

border-radius: 100px;

background: var(--white);

color: var(--dark);

font-size: 0.75rem;

font-weight: 600;

cursor: pointer;

transition:
    all 0.2s ease;

}

.difficulty-button:hover {

transform: translateY(-1px);

border-color: var(--lilac);

}

.difficulty-button.active {

border-color: var(--dark);

background: var(--dark);

color: var(--white);

}

/* =========================================================
SCHWIERIGKEITS-FILTER
========================================================= */

.difficulty-row {

margin-top: 14px;

}

.difficulty-button {

font-size: 0.7rem;

color: var(--soft-dark);

}

/* Jeder Button zeigt dauerhaft die Farbe seines
   Schwierigkeitsgrads (passend zu den Karten in der
   Übersicht: mint = leicht, light lilac = mittel,
   pink = anspruchsvoll) */

.difficulty-button.easy {

background: var(--mint);

border-color: var(--mint);

color: var(--dark);

}

.difficulty-button.medium {

background: var(--light-lilac);

border-color: var(--light-lilac);

color: var(--dark);

}

.difficulty-button.hard {

background: var(--pink);

border-color: var(--pink);

color: var(--dark);

}

.difficulty-button.easy:hover,
.difficulty-button.easy.active,
.difficulty-button.medium:hover,
.difficulty-button.medium.active,
.difficulty-button.hard:hover,
.difficulty-button.hard.active {

border-color: var(--dark);

box-shadow:
    inset 0 0 0 1px
    var(--dark);

}

/* =========================================================
ERGEBNISZEILE
========================================================= */

.pattern-result-line {

padding: 24px 55px 14px;

display: flex;

align-items: center;

justify-content: space-between;

color: var(--soft-dark);

font-size: 0.72rem;

}

.pattern-result-line strong {

color: var(--dark);

}

.result-line-decoration {

color: var(--yellow);

font-size: 1.1rem;

}

/* =========================================================
SCHNITTMUSTER GRID
========================================================= */

.pattern-list {

display: grid;

grid-template-columns:
    repeat(4, minmax(0, 1fr));

gap: 30px;

padding:
    10px 55px 75px;

}

/* =========================================================
SCHNITTMUSTER-KARTE
========================================================= */

.pattern-card {

position: relative;

overflow: hidden;

border-radius: 28px;

background: var(--white);

box-shadow:
    0 8px 28px
    rgba(81,75,87,0.08);

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

}

.pattern-card:hover {

transform: translateY(-5px);

box-shadow:
    0 14px 35px
    rgba(81,75,87,0.13);

}

.pattern-card.hidden {

display: none;

}

/* =========================================================
BILDER
========================================================= */

.pattern-image {

position: relative;

display: block;

aspect-ratio: 1/1;

overflow: hidden;

padding: 10px;

box-sizing: border-box;

}

.pattern-image img {

display: block;

width: 100%;

height: 100%;

object-fit: cover;

border-radius: 20px;

transition:
    transform 0.5s ease;

}

.pattern-card:hover
.pattern-image img {

transform: scale(1.035);

}

/* =========================================================
SCHWIERIGKEITS-FARBEN
========================================================= */

/*
Die Farbe der Karte zeigt den
Schwierigkeitsgrad:

MINT = leicht
FLIEDER = mittel
ROSA = anspruchsvoll
*/

.difficulty-easy .pattern-image {

background: var(--mint);

}

.difficulty-medium .pattern-image {

background: var(--lilac);

}

.difficulty-hard .pattern-image {

background: var(--pink);

}

/* =========================================================
KARTENINHALT
========================================================= */

.pattern-card-body {

padding: 21px 22px 24px;

}

.pattern-tags {

display: flex;

align-items: center;

flex-wrap: wrap;

gap: 6px;

margin-bottom: 9px;

}

.pattern-tags span {

padding: 4px 9px;

border-radius: 100px;

background: var(--cream);

color: var(--soft-dark);

font-size: 0.58rem;

font-weight: 700;

text-transform: uppercase;

letter-spacing: 0.07em;

}

/* Kategorie-Farbe passend zum Schwierigkeitsgrad */

.difficulty-easy
.pattern-tags .tag-category {

background: var(--mint);

color: var(--dark);

}

.difficulty-medium
.pattern-tags .tag-category {

background: var(--lilac);

color: var(--dark);

}

.difficulty-hard
.pattern-tags .tag-category {

background: var(--pink);

color: var(--dark);

}

.pattern-card-body h2 {

margin-bottom: 8px;

font-size: 1.65rem;

}

.pattern-card-body p {


    max-width: 500px;
margin-bottom: 16px;

color: var(--soft-dark);

font-size: 0.8rem;

line-height: 1.55;

}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 1000px) {

.pattern-list {

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 25px;

    padding-left: 35px;
    padding-right: 35px;

}

.pattern-result-line {

    padding-left: 35px;
    padding-right: 35px;

}

}

@media (max-width: 900px) {

.pattern-tools {

    padding:
        28px 35px;

}

}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 700px) {

.pattern-tools {

    padding:
        23px 20px;

}

.search-box {

    height: 50px;

}

.filter-row {

    justify-content: flex-start;

}

.filter-label {

    width: 100%;

    margin: 4px 0;

}

.filter-buttons,
.difficulty-buttons {

    justify-content: flex-start;

}

.pattern-result-line {

    padding:
        22px 20px 12px;

}

.pattern-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding:
        10px 15px 60px;

}

.pattern-image {

    aspect-ratio: 1.15;

}

.pattern-card-body {

    padding:
        19px 21px 22px;

}

.pattern-card-body h2 {

    font-size: 1.7rem;

}

}

/* =========================================================
SEHR KLEINE HANDYS
========================================================= */

@media (max-width: 420px) {

    .pattern-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding:
            10px 10px 50px;
    }

    .pattern-card-body h2 {
        font-size: 1.2rem;
    }

    .filter-button,
    .difficulty-button {
        padding:
            7px 11px;
        font-size:
            0.68rem;
    }
}

/* =========================================================
REDUZIERTE BEWEGUNG
========================================================= */

@media (prefers-reduced-motion: reduce) {

.pattern-card,
.pattern-image img {

    transition: none;

    animation: none;

}

}