/* Copyright (C) 2023 by Dietmar Hättig */

/* ========================================================================
   Use this file to add custom CSS easily
 ========================================================================== */


/* styleanweisung 'blink' z.B. Icons*/

.blink {
    animation: blink 2s ease-in infinite;
    -webkit-animation: blink 2s ease-in infinite;
    }
@keyframes blink {
from, to { opacity: 1 }
50% { opacity: 0 }
}
@-webkit-keyframes blink {
from, to { opacity: 1 }
50% { opacity: 0 }
}

/* <h3 class="uk-ffw-bar-grey"> anreisserbalken links grau/rot */

.uk-ffw-bar-grey {
		padding-left: 6px;
		margin-top: 10px;
		border-left: 5px solid #4f565b;
		line-height: 22px;
}

.uk-ffw-bar-blue {
		padding-left: 6px;
		margin-top: 10px;
		border-left: 5px solid #27355d;
		line-height: 22px;
}

.uk-ffw-bar-red {
		padding-left: 6px;
		margin-top: 10px;
		border-left: 5px solid #cd3330;
		line-height: 22px;
	}

.uk-heading-bullet::before {
  border-left: calc(5px + 0.1em) solid #cd3330;
}

/* Link im Artikeltext mit Kerwa Farbe cd3330 */

.uk-icon-link-kerwa {
  color: #cd3330;
  text-decoration: none !important;
}
.uk-icon-link-kerwa:hover {
  color: #000;
  text-decoration: none !important;
}

/* Button Schrift immer weiß bei hover gelb*/

.btn-primary,
.btn-backtohome,
.btn-prosandcons {
  color: #fff !important;
  background-color: #e12121;
  border-color: rgb(255, 155, 0);
}

.btn-primary:hover,
.btn-backtohome:hover,
.btn-prosandcons:hover {
  color: #fff !important;
  background-color: #e12121;
  border-color: rgb(255, 155, 0);
}

/* readmore override für astroid */
.as-readmore {
    background: #cd3330;
    color: #fff;
    margin-top: 15px;
    border: none;
    overflow: visible;
    font: inherit;
     text-transform: none;
    -webkit-appearance: none;
    border-radius: 0;
    display: inline-block;
    box-sizing: border-box;
    padding: 0 30px;
    vertical-align: middle;
    font-size: 0.875rem;
    line-height: 38px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.1s ease-in-out;
    transition-property: color, background-color, border-color;
}

/* Band auf der linken Seite als Hinweistext unter Artikel
<div style="margin: 5px 0;" class="uk-panel uk-ribbon-box uk-first-column">
 <div class="ribbonleft">Hinweis:</div>
 <p><b>Artikeltext und Bilder:</b><br>Matthias Hiltner</p>
</div>
*/

.uk-ribbon-box {
    padding: 25px 25px 10px 50px;
    background: #fafafa;
    color: #444444;
    border: 1px solid #dddddd;
}

/* HTML: <div class="ribbontop">Your text content</div> */

.ribbontop {
    --f: .5em;
    /* control the folded part*/
    --r: .8em;
    /* control the ribbon shape */

    position: absolute;
    left: 20px;
    top: calc(-1*var(--f));
    padding: .2em;
    background: #cd3330;
    color: #fff;
    border-left: var(--f) solid #0005;
    border-bottom: var(--r) solid #0000;
    clip-path: polygon(var(--f) 0, 100% 0, 100% calc(100% - var(--r)), calc(50% + var(--f)/2) 100%, var(--f) calc(100% - var(--r)), var(--f) var(--f), 0 var(--f));
}

.ribbonleft {
    --f: .5em;
    /* control the folded part */

    position: absolute;
    top: 0;
    left: 0;
    line-height: 1.8;
    padding-inline: 1lh;
    padding-bottom: var(--f);
    border-image: conic-gradient(#0008 0 0) 51%/var(--f);
    clip-path: polygon(100% calc(100% - var(--f)), 100% 100%, calc(100% - var(--f)) calc(100% - var(--f)), var(--f) calc(100% - var(--f)), 0 100%, 0 calc(100% - var(--f)), 999px calc(100% - var(--f) - 999px), calc(100% - 999px) calc(100% - var(--f) - 999px));
    transform: translate(calc((cos(45deg) - 1)*100%), -100%) rotate(-45deg);
    transform-origin: 100% 100%;
    background-color: #cd3330;
    color: #fff;
    /* the main color  */
}

/* HTML: <div class="ribbonleft2">Your text content</div> */

.ribbonleft2 {
    --r: .5em;
    /* control the ribbon shape (the radius) */
    --c: #cd3330;

    position: absolute;
    top: 20px;
    color: #fff;
    left: calc(-1*var(--r));
    line-height: 1.8;
    padding: 0 .6em calc(2*var(--r));
    border-radius: var(--r) 0 0 var(--r);
    background:
        radial-gradient(100% 50% at left, var(--c) 98%, #0000 101%) 100% 0/.5lh calc(100% - 2*var(--r)),
        radial-gradient(100% 50% at right, #0005 98%, #0000 101%) 0 100%/var(--r) calc(2*var(--r)),
        conic-gradient(from 90deg at var(--r) calc(100% - 2*var(--r)), #0000 25%, var(--c) 0) 0 0/calc(101% - .5lh) 100%;
    background-repeat: no-repeat;
}