/* Basis-Styles */
body    {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        font-family: var(--font-family);
        font-size: var(--font-size);
        color: var(--text-color);
        background-color: var(--bg-color);
        background-repeat: no-repeat;
        }

/* Layout Mobile */
main#plaho {
        min-height: 100vh;
        max-width: 100vw;
        display: grid;
        gap: 0;
        background-color: var(--bg-trans);
        padding: 0;
        margin: 0;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
        grid-template-areas: 
                "logo"
                "inh"
                "foot";
        }

/* Desktopn & Tablett */
@media screen and (min-width: 60rem) {
main#plaho {
        grid-template-columns: 1fr 2fr;
        grid-template-rows: 1fr auto;
        grid-template-areas: 
                "logo inh"
                "foot foot";
        }}

/* Logo linke seite */
header#logo {
        grid-area: logo;
        align-self: flex-start;
        background-color: var(--bgl-color);
        border: none;
        z-index: 5;
        padding: 2rem 0 0 0;
        margin: 0;
        }

@media screen and (min-width: 60rem) {
header#logo {
        padding: 3rem 0 0 0;
        }}

/* Text Kontakt etc. recht */
article#inh {
        grid-area: inh;
        background-color: var(--bgr-color);
        clip-path: polygon(0 6rem, 100% 0, 100% 100%, 0 100%);
        border: none;
        z-index: 10;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 6rem 0.75rem 2rem 0.75rem;
        margin: 0;
        }

@media screen and (min-width: 60rem) {
article#inh { 
        clip-path: polygon(12rem 0, 100% 0, 100% 100%, 0 100%); 
        padding: 1rem 1rem 2rem 13rem;}}

/* Fußzeile */
footer#feed {
        grid-area: foot;
        padding: 0.75rem;
        margin: 0;
        text-align: center;
        background-color: var(--bgf-color);
        border: none;
        z-index: 5;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        }

@media screen and (min-width: 60rem) {
footer#feed {
        justify-content: space-around;
        }}

/* Spalten für Flex Inhalt */
.spaltli {
        flex-basis: 100%; 
        background-color: var(--bg-trans);
        text-align: left;
        border: none;
        margin: auto;
        }

@media screen and (min-width: 60rem) {
.spaltli {
        text-align: right;
        }}

.spaltre {
        flex-basis: 100%;
        background-color: var(--bg-trans);
        border: none;
        margin: auto;
        }

.spaltfo {
        flex-basis: auto;
        background-color: var(--bg-trans);
        border: none;
        margin: 0 0.5rem;
        padding: 0;
        }

.sptop { align-items: flex-start; }
.spcenter { align-items: center; }
.spbottom { align-items: flex-end; }

/* ========================================================================================================== */

a:link {color: var(--text-color); text-decoration: none}
a:visited {color: var(--text-color); text-decoration: none}
a:focus {color: var(--h15-color); text-decoration: none}
a:hover {color: var(--h15-color); text-decoration: none}
a:active {color: var(--text-color);text-decoration: none}

a.afee:link {color: var(--foo-color); text-decoration: none}
a.afee:visited {color: var(--foo-color); text-decoration: none}
a.afee:focus {color: var(--h15-color); text-decoration: none}
a.afee:hover {color: var(--h15-color); text-decoration: none}
a.afee:active {color: var(--foo-color); text-decoration: none}

/* Standart */
p       {
        font-size: var(--font-size);
        color: var(--text-color);
        font-weight: normal;
        font-style: normal;
        letter-spacing: var(--letter-txt);
        line-height: var(--line-txt);
        }

p.bo    {
        font-family: var(--font-family);
        font-size: var(--font-size);
        color: var(--text-color);
        font-weight: bold;
        font-style: normal;
        letter-spacing: var(--letter-txt);
        line-height: var(--line-txt);
        }

/* Impressum / Datenschutz */
p.idtxt {
        font-family: var(--font-family);
        font-size: calc(var(--font-size) - 0.2rem);
        color: var(--foo-color);
        font-weight: normal;
        font-style: normal;
        letter-spacing: var(--letter-txt);
        line-height: var(--line-txt);
        }

/* footer */
p.fext {
        font-family: var(--font-family);
        font-size: calc(var(--font-size) - 0.2rem);
        color: var(--foo-color);
        font-weight: normal;
        font-style: normal;
        letter-spacing: var(--letter-txt);
        line-height: var(--line-txt);
        }

/* Überschriften */
h1      {
        font-family: var(--h15-font);
        font-size: calc(var(--font-size) + 1rem);
        color: var(--text-color);
        font-weight: normal;
        font-style: normal;
        line-height: var(--line-h15);
        letter-spacing: var(--letter-h15);
        }

@media screen and (min-width: 60rem) {
h1      { font-size: calc(var(--font-size) + 1.5rem); }}

h2      {
        font-family: var(--h15-font);
        font-size: calc(var(--font-size) + 1rem);
        color: var(--text-color);
        font-weight: normal;
        font-style: normal;
        line-height: var(--line-h15);
        letter-spacing: calc(var(--letter-h15) - 0.01rem);
        }

h3      {
        font-family: var(--h15-font);
        font-size: calc(var(--font-size) + 0.75rem);
        color: var(--text-color);
        font-weight: normal;
        font-style: normal;
        line-height: var(--line-h15);
        letter-spacing: calc(var(--letter-h15) - 0.02rem);
        }

/* Text ausrichtung */
.txtlef   { text-align: left; }
.txtcen   { text-align: center; }
.txtrig   { text-align: right; }
.txtjust  { text-align: justify; }

/* Listen Datenschutz */
li.lidat  { overflow-wrap: break-word; word-break: break-word; font-size: calc(var(--font-size) - 0.2rem); }

/* ========================================================================================================== */

/* für Akkordion Kontakt */
details.detp {
        font-family: var(--font-family);
        border: none;
        margin: 0;
        padding: 0;
        text-align: left;
        }

summary.sump {
        font-weight: normal;
        font-size: calc(var(--font-size) + 0.25rem);
        padding: 0.25rem 0 0.5rem 0;
        border: none;
        cursor: pointer;
        }

/* ========================================================================================================== */

/* Kontaktformular */
form    {
        max-width: 25rem;
        font-family: var(--font-family);
        font-weight: normal;
        font-style: normal;
        border: none;
        background-color: var(--bg-trans);
        margin: 1rem 0.5rem 0.75rem 0.5rem;
        }

input#Name, input#Tel, input#Email
        {
        width: 69%;
        min-height: 2rem;
        border: 1px solid var(--text-color);
        border-radius: 0%;
        font-family: var(--font-family);
        color: var(--text-form);
        font-size: var(--font-size);
        }

textarea#Nachricht {
        width: 99%;
        border: 1px solid var(--text-color);
        border-radius: 0%;
        font-family: var(--font-family);
        color: var(--text-form);
        font-size: var(--font-size);
        }

input#Datenschutz {
        height: 15px;
        width: 15px;
        border: 1px solid var(--text-color);
        border-radius: 0%;
        }

input#Senden {
        font-family: var(--font-family);
        font-size: var(--font-size);
        font-weight: bold;
        letter-spacing: calc(var(--letter-h15) + 0.05rem);
        padding: 0.25em 0.5em 0.25em 0.5em;
        margin-top: 0.5em;
        color: var(--text-color);
        background-color: var(--h15-color);
        border: none;
        }

.fromspan { display: none; }

.message {
        margin-top: 10px;
        padding: 10px;
        border-radius: 5px;
        }

.success {
        background-color: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
        }

.error {
        background-color: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
        }

/* ========================================================================================================== */

img.log {
        max-width: 80%;
        height: auto;
        border: none;
        margin: 0;
        }

@media screen and (min-width: 60rem) {
img.log { min-width: 90%; }}