::selection { background:var(--bg); color:#000; } 
*       	{ box-sizing:border-box; margin:0; padding:0; }
img     	{ border:none; height:auto; max-width:100%; display: block;}
p 			{ margin-bottom: 2rem; }
b           { font-weight: 800; }
:root 		{
			-webkit-text-size-adjust: 100%; /* Apple rotation bug */
			font-size: 62.5%; /* 1.6rem = 16px */
			scroll-behavior: smooth; 
			--bg: #fff;
            --txt: #333;
            --lnk: fuchsia;
            --lnk_: #000;
            --btn: #555;
            --btn_: #eee;
            --acc: darkorange;
  			}

body {
    background: var(--bg);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 1.6;
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--txt);
    }	
main {
    width: 100%;
    max-width: 700px;    
    height: auto;
    position: relative;
    padding-bottom: 10vh;	  
    margin-left: 10vw;
    }
header {
    width: 100%;
    max-width: 700px;
    height: 190px;
    margin-left: 10vw;
    }
header a { text-decoration: none; }

.logo {
    width: 128px;
    height: auto;
    margin-bottom: 4rem;
    margin-top: 3px; /* beim Drehen wird oben was abgeschnitten, weil nicht quadratisch? */
    transform: rotate(270deg);
    &:hover {
        transform: rotate(0deg);
        mix-blend-mode: color-dodge;
    }
}

.hand:hover #innen { fill: #00000022; }
.hand svg {  transform: rotate(-90deg); margin-top: 3px; }
.hand:hover svg { transform: rotate(-180deg) scaleY(-1); }

.breadcrumb { 
    display: flex;
    column-gap: 20px;
}

h1 {
    font-size: 6.8rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 2rem;
    }
h2 {
    font-size: 2.0rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 800;
    }
ul, ol { margin: 0 0 2rem 2rem; }

.grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    grid-gap: 25px;
    margin-bottom: 2rem; 
    }   
.grid3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; 
    grid-gap: 10px;
    margin-bottom: 2rem; 
    }
.btn {
    padding: 12px 24px;
    margin-top: 30px;
    display: inline-block;
    border: 3px dashed var(--txt);
    text-decoration: none;
    color: var(--txt);
    &:hover {
        background: #fff; 
        color: #000;
        text-decoration: none;
        border: 3px solid #000;
        }
    }

.date { letter-spacing: 1px; }

img + p { margin-top: 2rem; }

.sub {
    font-style: italic;
    font-size: 1.4rem;
    margin-top: 10px;
    }
.toc {
    line-height: 2;
    & i {
        background: purple;
        color: #eee;
        border-radius: 3px;
        padding: 2px 5px;
        font-size: 1.5rem;
    }
}
pre {
    /* font-family: 'Courier New', Courier, monospace; */
    padding: 15px;
    background: #333;
    color: lightgreen;
}
code {
    display: inline-block;
    padding: 1px 5px;
    font-size: 1.4rem;
    border-radius: 5px;
    background: #333;
    color: lightgreen;   
}
a {
    text-decoration: none;
    color: var(--lnk);
    font-weight: 400;
    text-underline-offset: 3px;
    &:hover {
        color: var(--lnk_);
        text-decoration-line: underline;
        text-underline-offset: 3px; 
    }     
}
main a::after { content: ' ▶'; }
.breadcrumb a:first-child::before { content: '◀ '; }
.breadcrumb a:first-child::after { content: ''; }

/* --- RESPONSIVE ------------------------------------- */

@media screen and (max-width: 800px) {
    body {
        font-size: 1.7rem;
        font-weight: 500;
    }
    header {
        margin-left: 6vw;   
    }
	h1 { font-size: 5rem }

    main {
        margin-left: 0;	  
        padding: 0 6vw 10vh 6vw;	  
        }   


} /*  800  */