/* ---------------------------------------------------------------------------
   Korrekturen SVP Kilchberg
   --------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
   1) Inhaltslinie bei Plugin-Elementen

   Das Theme arbeitet mit einer Ausnahme fuer Plugins:

       .content div.frame                 { padding: 20px; }
       .content div.frame.frame-type-list { padding-left: 5px; }

   Sie greift nur bei CType "list". Seit TYPO3 12/13 haben Plugins aber eigene
   CTypes (news_pi1, powermail_pi1, ttaddress_listview, calendarize_calendar
   und so weiter), die Ausnahme trifft also nicht mehr zu. Gleichzeitig bringen
   die Plugin-Huellen div.news, div.tx-powermail und div.calendarize selber
   20px mit - das Padding addiert sich auf 40px und der Inhalt rutscht nach
   rechts, waehrend die Ueberschrift bei 20px bleibt.

   Der Rahmen behaelt seine 20px, denn er traegt auch die Ueberschrift des
   Inhaltselements. Stattdessen geben die Plugin-Huellen ihr horizontales
   Padding ab. Ergebnis: Ueberschrift und Plugin-Inhalt stehen beide bei 20px.
   --------------------------------------------------------------------------- */

.content div.frame > div.news,
.content div.frame > div.tx-powermail,
.content div.frame > div.calendarize,
.content div.frame > div.tx-ttaddress {
    padding-left: 0;
    padding-right: 0;
}


/* ---------------------------------------------------------------------------
   2) Accordion

   Frueher uebernahm jQuery slideToggle das Ein- und Ausklappen und setzte
   dabei inline display:none. Jetzt macht es svp.js ueber max-height, damit
   kein Inline-Script und kein Inline-Style noetig ist.
   --------------------------------------------------------------------------- */

ul.accordion li div.acc-content {
    max-height: 0;
    overflow: hidden;
    /* Die Site-CSS gibt padding:10px und margin-bottom:10px vor. max-height
       begrenzt nur den Inhalt, nicht das Padding - im geschlossenen Zustand
       waere sonst ein Streifen sichtbar. Der Einzug links (45px) bleibt. */
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    transition: max-height 0.3s ease, padding 0.3s ease, margin 0.3s ease;
}

ul.accordion li div.acc-content.is-open {
    /* max-height wird von svp.js auf die tatsaechliche Hoehe gesetzt.
       overflow bleibt hidden, sonst quillt der Text waehrend des
       Aufklappens ueber den Rand. svp.js hebt die Begrenzung auf,
       sobald die Bewegung fertig ist. */
    overflow: hidden;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

ul.accordion li div.acc-title {
    cursor: pointer;
}


/* ---------------------------------------------------------------------------
   3) Personenliste (tt_address)

   Jede Karte hat 15px Innenabstand, damit zwischen den Karten ein Zwischen-
   raum entsteht. Am aeusseren Rand fehlt dafuer der Ausgleich, deshalb stand
   das erste Foto 15px weiter rechts als die Ueberschrift darueber.

   Negativer Rand am Listencontainer: aussen buendig, innen bleibt der
   Zwischenraum erhalten.
   --------------------------------------------------------------------------- */

.content div.frame > div.tx-ttaddress > .tt_address_list {
    margin-left: -15px;
    margin-right: -15px;
}


/* ---------------------------------------------------------------------------
   4) Calendarize - Detailansicht

   Die Aufzaehlung ruecke 40px ein und die Punkte klebten aneinander, beim
   Veranstaltungsort stand der Wert 40px versetzt unter der Beschriftung.
   --------------------------------------------------------------------------- */

/* Aufzaehlungen: gruener Punkt statt Standardzeichen */
.calendarize .text ul,
.news-text-wrap ul {
    list-style: none;
    margin: 0 0 24px 0;
    padding-left: 0;
}

.calendarize .text ul > li,
.news-text-wrap ul > li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 7px;
    line-height: 1.6;
}

.calendarize .text ul > li::before,
.news-text-wrap ul > li::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 0.58em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #7cb309;
}

/* Nummerierte Listen: gruener Kreis mit weisser Zahl statt blosser Ziffer.
   Die eigene Zaehlung ersetzt die Standardnummerierung. */
.calendarize .text ol,
.news-text-wrap ol {
    list-style: none;
    counter-reset: punkt;
    margin: 0 0 24px 0;
    padding-left: 0;
}

.calendarize .text ol > li,
.news-text-wrap ol > li {
    counter-increment: punkt;
    position: relative;
    min-height: 26px;
    padding-left: 38px;
    margin-bottom: 10px;
    line-height: 1.6;
}

.calendarize .text ol > li::before,
.news-text-wrap ol > li::before {
    content: counter(punkt);
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: #7cb309;
    color: #fff;
    font-size: 0.8em;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
}

.calendarize .text p {
    margin-bottom: 14px;
}

.calendarize dl.meta {
    margin-bottom: 24px;
}

.calendarize dl.meta dt {
    font-weight: 600;
    margin-bottom: 2px;
}

.calendarize dl.meta dd {
    margin-left: 0;
    margin-bottom: 12px;
}

.calendarize .btn-group .btn {
    margin-right: 8px;
}


/* ---------------------------------------------------------------------------
   5) Termine - Uebersicht und Detailansicht

   Das Theme setzt fuer .calendarize-item display:block, float:left, width:100%
   (zusammen mit der Newsliste). Fuer das Datums-Kaestchen daneben braucht es
   flex - mit demselben Selektor, sonst gewinnt die Theme-Regel.
   Rahmen und Abstaende des Themes bleiben, damit es zur Newsliste passt.
   --------------------------------------------------------------------------- */

div.folge div.content .calendarize .calendarize-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    float: none;
    width: auto;
}

/* --- Datums-Kaestchen ----------------------------------------------------- */

.calendarize a.event-datebox,
.calendarize div.event-datebox {
    flex: 0 0 62px;
    /* Das Theme floatet fast alles nach links. Ein Float blockifiziert
       display:inline-block wieder zu block - deshalb hier aufheben,
       sonst ueberlagern sich Datum und Text. */
    float: none;
    /* Das Theme setzt "div.calendarize div { width: 100% }" - das trifft das
       nicht verlinkte Kaestchen (div) und macht daraus einen Balken. */
    width: 62px;
    display: block;
    padding: 8px 4px;
    background-color: #7cb309;
    color: #fff;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

a.event-datebox:hover,
a.event-datebox:focus {
    background-color: #6a9a08;
    color: #fff;
    text-decoration: none;
}

.calendarize .event-datebox .tag {
    display: block;
    font-size: 1.55em;
    font-weight: 700;
    line-height: 1.05;
}

.calendarize .event-datebox .monat {
    display: block;
    margin-top: 2px;
    font-size: 0.72em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.calendarize .event-datebox .jahr {
    display: block;
    font-size: 0.66em;
    opacity: 0.85;
}

/* --- Angaben daneben ------------------------------------------------------ */

/* Der Knopf ist float:right (Theme-Konvention wie bei der Newsliste). Ohne
   Clearfix ragt er aus dem Kasten heraus und liegt auf der Trennlinie. */
.calendarize div.event-body::after {
    content: '';
    display: block;
    clear: both;
}

.calendarize div.event-body {
    flex: 1 1 auto;
    min-width: 0;
    /* Das Theme setzt float:left. Im Flex-Layout ist das wirkungslos, im
       Mobil-Block aber nicht: der Kasten faellt dann in sich zusammen und
       seine untere Linie rutscht direkt unter das Datum. */
    float: none;
    width: auto;
}

.calendarize div.event-body h2 {
    float: none;
    width: auto;
    margin: 0 0 4px 0;
    font-size: 1.2em;
    line-height: 1.3;
}

.calendarize .event-body h2 a {
    color: #222;
    text-decoration: none;
}

.calendarize .event-body h2 a:hover {
    color: #7cb309;
}

.calendarize .event-when {
    margin: 0 0 2px 0;
    font-size: 0.95em;
    font-weight: 600;
}

.calendarize .event-canceled {
    color: #b20808;
}

.calendarize .event-location {
    margin: 0 0 8px 0;
    font-size: 0.92em;
    color: #666;
}

.calendarize .event-teaser {
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.calendarize a.btn {
    display: inline-block;
    border: none;
    border-radius: 20px;
    background-color: #7cb309;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.calendarize a.btn:hover,
.calendarize a.btn:focus {
    background-color: #6a9a08;
    color: #fff;
    text-decoration: none;
}

/* --- Detailansicht -------------------------------------------------------- */

.calendarize .event-meta {
    margin: 0 0 28px 0;
    padding: 14px 18px;
    background-color: #f2f6ea;
    border-left: 4px solid #7cb309;
}

.calendarize .event-meta .event-date {
    margin: 0 0 4px 0;
    font-size: 1.05em;
    font-weight: 600;
    color: #222;
}

.calendarize .event-meta .event-location {
    margin: 0;
    font-size: 0.95em;
    color: #555;
}

/* --- schmale Bildschirme --------------------------------------------------- */

@media (max-width: 640px) {
    div.folge div.content .calendarize .calendarize-item {
        display: block;
    }

    .calendarize a.event-datebox,
    .calendarize div.event-datebox {
        display: inline-block;
        width: auto;
        margin-bottom: 12px;
        padding: 6px 12px;
    }

    .calendarize a.event-datebox .tag,
    .calendarize div.event-datebox .tag,
    .calendarize a.event-datebox .monat,
    .calendarize div.event-datebox .monat,
    .calendarize a.event-datebox .jahr,
    .calendarize div.event-datebox .jahr {
        display: inline;
        font-size: 1em;
        margin: 0 2px;
    }
}


/* ---------------------------------------------------------------------------
   6) Parolen beim Termin

   Das Theme setzt in styles.min.css eine Sammelregel "div.calendarize div
   { width: 100% }". Sie ist spezifischer als "div.parole-vote" und macht aus
   dem Ja/Nein-Kennzeichen einen Balken ueber die volle Breite. Hier gezielt
   zurueckgeholt.
   --------------------------------------------------------------------------- */

.event-parolen {
    margin-top: 34px;
}

.event-parolen h3 {
    margin: 0 0 16px 0;
    font-size: 1.15em;
    font-weight: 600;
}

.event-parolen div.parole-vote {
    width: 130px;
    /* height:100% greift bei automatischer Hoehe des Elternelements nicht
       zuverlaessig. Oben und unten verankern streckt zuverlaessig. */
    top: 0;
    bottom: 0;
    height: auto;
}

/* Parolen ohne Empfehlung brauchen rechts keinen Platz fuer das Kennzeichen */
.event-parolen div.parole[data-typ="1"] {
    padding-right: 30px;
}

@media (max-width: 640px) {
    /* parolen.css zieht den Balken mit negativen Raendern ueber die
       Kartenpolsterung hinaus (calc(100% + 40px)). Meine Regel oben ist
       spezifischer und muss denselben Wert setzen, sonst fehlen rechts 40px. */
    .event-parolen div.parole-vote {
        width: calc(100% + 40px);
    }
}


/* ---------------------------------------------------------------------------
   7) Wahlempfehlungen hervorheben

   Bei Parolen ohne Ja/Nein (typ 1) ist die eigentliche Aussage der Name der
   empfohlenen Person. Der letzte Absatz der Beschreibung wird deshalb als
   abgesetzter Block dargestellt.

   Gilt fuer beide Ausgaben - Parolen-Seite (Fluid) und Termin (TypoScript),
   beide setzen data-typ.
   --------------------------------------------------------------------------- */

div.parole[data-typ="1"] .parole-description p:last-child {
    margin: 14px 0 0 0;
    padding: 12px 18px;
    background-color: #f2f6ea;
    border-left: 4px solid #7cb309;
    font-size: 1.05em;
    line-height: 1.5;
}

div.parole[data-typ="1"] .parole-description p:last-child strong {
    /* Bleibt in der Zeile - sonst steht der Zusatz auf einer neuen Zeile
       und beginnt mit einem Komma. */
    font-size: 1.12em;
    font-weight: 700;
    color: #2f880e;
}

/* Wenn die Beschreibung nur aus einem Absatz besteht, ist das kein
   Empfehlungsblock - dann nicht hervorheben. */
div.parole[data-typ="1"] .parole-description p:only-child {
    margin: 0;
    padding: 0;
    background: none;
    border-left: none;
    font-size: 1em;
}

div.parole[data-typ="1"] .parole-description p:only-child strong {
    display: inline;
    font-size: 1em;
    color: inherit;
}


/* ---------------------------------------------------------------------------
   8) Parolen ohne Empfehlung auf schmalen Bildschirmen

   parolen.css setzt dort padding-bottom:0, damit der Ja/Nein-Balken buendig
   am unteren Kartenrand sitzt. Parolen ohne Balken (typ 1) brauchen den
   Abstand aber - sonst klebt der Text am Rand.
   --------------------------------------------------------------------------- */

@media (max-width: 640px) {
    div.parole[data-typ="1"],
    div.parole.parole-nur-text {
        padding-bottom: 20px;
    }
}