/* Suche — Header-Toggle, Panel und Trefferliste
   ===========================================================================
   Ergänzt dist/assets/css/app.css. Der src/assets/scss-Baum im Theme stammt
   aus einem anderen Projekt und wird hier nicht kompiliert (kein Buildtool),
   deshalb steht dieses CSS bewusst als eigene, unminifizierte Datei hier.
   Farbwerte wie in app.css: #005bab primär, #1d1d1b Text, #fefefe weiß. */


/* 01. Basis des Lupen-Buttons
   ------------------------------------------------------------------------- */

.search-toggle {
    display: -webkit-inline-box;
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #1d1d1b;
    font-family: inherit;
    cursor: pointer;
    -webkit-transition: color .25s ease;
    transition: color .25s ease;
}

.search-toggle svg {
    display: block;
    width: 20px;
    height: 20px;
}

/* Grundzustand für die kompakte Lupe. Die blaue Leiste überschreibt das in
   Abschnitt 02 mit der höheren Spezifität von ".top .search-toggle". */
.search-toggle:hover,
.search-toggle:focus,
.search-toggle[aria-expanded="true"] {
    color: #005bab;
}

.search-toggle:focus-visible {
    outline: 2px solid #005bab;
    outline-offset: 2px;
}

/* Die Beschriftung ist standardmäßig nur für Screenreader da und wird in der
   blauen Leiste sichtbar geschaltet. */
.search-toggle__text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* 02. Hauptplatzierung: blaue Leiste ganz oben (egal ob in .top-left oder .top-right)
   ------------------------------------------------------------------------- */

.top .search-toggle {
    margin-left: 1rem;
    padding: .25rem 0;
    color: #fefefe;
    font-size: .77778rem; /* wie a.mail und a.phone in der blauen Leiste */
    line-height: 1.5;
}

.top .search-toggle svg {
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

/* Beschriftung hier sichtbar - der Button liest sich wie seine Nachbarn. */
.top .search-toggle .search-toggle__text {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

.top .search-toggle:hover,
.top .search-toggle:focus,
.top .search-toggle[aria-expanded="true"] {
    color: #fefefe;
    text-decoration: underline;
}

.top .search-toggle:focus-visible {
    outline: 2px solid #fefefe;
    outline-offset: 2px;
}


/* 03. Rückfallebene beim Scrollen
   -------------------------------------------------------------------------
   Das Theme blendet die blaue Leiste aus, sobald header.fixedscroll greift.
   Damit die Suche erreichbar bleibt, erscheint dann die kompakte Lupe in der
   Navigation (Desktop) bzw. in der Title-Bar (Mobil). Sichtbar ist immer nur
   genau eine der beiden Varianten. */

.title-bar .search-toggle,
.top-bar-right .search-toggle {
    display: none;
    min-width: 44px;
    min-height: 44px;
}

header.fixedscroll .title-bar .search-toggle,
header.fixedscroll .top-bar-right .search-toggle {
    display: -webkit-inline-box;
    display: inline-flex;
}

.title-bar .search-toggle {
    margin-left: auto;
    margin-right: .75rem;
    color: #005bab;
}

@media print, screen and (min-width: 40em) {
    .top-bar-right {
        display: -webkit-box;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
    }

    .top-bar-right .search-toggle {
        margin-left: .5rem;
    }

    /* app.css blendet zwischen 40em und 64em die komplette .top-bar-right aus,
       sobald gescrollt wird - dann bliebe keine Suche übrig. */
    header.fixedscroll .top-bar .top-bar-right {
        display: -webkit-box;
        display: flex;
    }

    header.fixedscroll .top-bar .top-bar-right > ul {
        display: none;
    }
}


/* 04. Aufklappbares Suchpanel
   ------------------------------------------------------------------------- */

.search-panel {
    width: 100%;
    padding: 1rem 0;
    background: #f6f6f6;
    border-top: 1px solid #667085;
}

.search-panel[hidden] {
    display: none;
}

.search-panel .search-form {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin: 0;
}


/* 05. Suchformular
   ------------------------------------------------------------------------- */

.search-form .search-field {
    -webkit-box-flex: 1;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0; /* Foundation gibt [type=search] sonst margin-bottom mit. */
}

.search-form .search-submit {
    display: -webkit-inline-box;
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    margin: 0 0 0 .5rem;
    padding: .7rem 1rem;
    background: #005bab;
    color: #fefefe;
}

.search-form .search-submit:hover,
.search-form .search-submit:focus {
    background: #1d1d1b;
    color: #fefefe;
}

.search-form .search-submit svg {
    display: block;
    width: 20px;
    height: 20px;
}


/* 06. Trefferliste (baut auf den vorhandenen .magazin-Styles auf)
   ------------------------------------------------------------------------- */

/* search.php verzichtet bewusst auf <article class="bg"> — die Klasse bringt aus
   app.css den grauen Kasten (#f7f7f7) samt 4rem Innenabstand mit. Der Abstand
   wird hier ohne die Färbung nachgereicht. */
.magazin.suche {
    padding: 2rem 0 3rem;
}

.magazin.suche .treffer {
    color: #667085;
    margin-bottom: 2rem;
}

/* .imglink hat border-radius:16px, aber die weißen Kinder ragten oben über die
   Rundung hinaus, solange kein Beitragsbild da ist. overflow:hidden beschneidet
   die Karte sauber an allen vier Ecken. */
.magazin.suche .imglink {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    flex-direction: column;
    height: calc(100% - 2rem);
    overflow: hidden;
    background: #fefefe;
}

/* Textblock wächst, damit die Buttons aller Karten auf einer Linie sitzen. */
.magazin.suche .imglink a.link-content {
    -webkit-box-flex: 1;
    flex: 1 1 auto;
}

.magazin.suche .imglink a.link-content .desc {
    margin-top: .5rem;
    font-size: .8rem;
    line-height: 1.4; /* Bestand setzt line-height:1 — zu eng für mehrere Zeilen. */
    color: #1d1d1b;
}

.magazin.suche .imglink .desc mark {
    padding: 0 .15em;
    border-radius: 3px;
    background: #005bab;
    color: #fefefe;
}

/* Button statt Typ-Bubble am Kartenfuß. */
.magazin.suche .karte-cta {
    padding: 0 1rem 1rem;
    background: #fefefe;
}

.magazin.suche .karte-cta .button {
    margin: 0; /* Foundation gibt .button sonst margin-bottom:1rem mit. */
}

.magazin.suche .keine-treffer .search-form {
    max-width: 480px;
    margin: 0 0 1.5rem 0;
}


/* 07. Mobil
   ------------------------------------------------------------------------- */

@media screen and (max-width: 39.9375em) {
    .search-panel {
        padding: .75rem 0;
    }

    .title-bar .search-toggle {
        margin-right: .5rem;
    }

    .top .search-toggle {
        margin-left: .75rem;
    }
}