/*@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@100;200;300;400;500;600;700;800;900&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Rubik+Glitch&display=swap');*/
/*
Theme Name: Hermann Jacobs
Theme URI: http://example.com
Author: Dein Name
Author URI: http://example.com
Description: Ein minimalistisches WordPress-Theme ohne moderne Blöcke.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: minimal, simple, classic
*/

/* Reset */ 
*       { box-sizing: border-box; margin: 0; padding: 0; }
*       { border-color: currentcolor; border-style: solid; border-width: 0; }
a       { text-decoration: none; }
a:hover { text-decoration: underline; }
img     { max-width: 100%; }
.hidden { display: none!important; }

/* Custom Properties */
@property --hue { syntax: "<number>"; initial-value: 0; inherits: false; }

html {
  /* --brightness: 1; */
  --CC: var(--accentcolor, red);
  --bq: color-mix( in srgb, var(--CC) 40%, var(--C2) );
}
[data-stylemode="dark"] {
  /*--color: black;*/
  --color: if( not style(--hue: 0): oklch(0.05 0.5 var(--hue)); else: black; );
  --C1: var(--color, black);
  --C2: color-mix(in srgb, var(--color) 35%, white);
  --CC: lch( from var(--C1) calc(l + 50) calc(c + 50) calc(h + 50) );
}
[data-stylemode="light"] {
  --color: if( not style(--hue: 0): oklch(0.9 0.05 var(--hue)); else: #FFFFFF; );
  --C1: var(--color, white);
  --C2: color-mix(in srgb, var(--color) 25%, black);
}
[data-stylemode="oled"] {
  --C1: black;
  --C2: white;
}

/* Basic Layout */
html     { height: 100%; }
body     { min-height: 100%; }
body     { align-items: center; display: flex; flex-direction: column; }
header   { flex-grow: 0; }
main     { flex-grow: 1; flex-basis: 50%; }
footer   { flex-grow: 0; }
body > * { width: 100%; max-width: 1200px; }
header   { z-index: 100; position: sticky; top: 0; }
footer, main { padding: 10px; }

header            { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
header .blogtitle { font-weight: bold; }
header .menu      { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
header .menu li   { list-style: none; }

header { padding-top: 10px; }
header .blogtitle { padding-left: 10px; }
header .icons { padding-right: 10px; }

#progress {
  background: var(--C2);
  flex-basis: 100%; width: 100%;
  height: 3px;
}
#progress > div {
  background: var(--CC);
  height: 3px; width: 100%;
  transform-origin: left;
  transform: scaleX(0);
  animation: grow auto linear;
  animation-timeline: scroll();
}
@keyframes grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

#settings {
  position: absolute; top: 100%; right: 0; width: 200px;
  padding: 10px;
  display: flex; flex-direction: column;
  gap: 10px;
}
#settings > * { display: flex; flex-direction: column; }
#settings input,
#settings select { width: 100%; }
#settings select { background: none; color: var(--C2); border-width: 2px; padding: 5px; }
#settings span { font-size: 12px; font-weight: bold; text-transform: uppercase; }

footer {
  border-top-width: 3px;
  /*border-top: 5px solid var(--C2);
  padding-top: 0.5rem;*/
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; text-align: center;
  gap: 0.25rem;
}
footer .menu    { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
footer .menu li { list-style: none; }

/* Colors */
a { color: var(--CC); }
button { background: var(--CC); color: var(--C1); }
html { background-color: black; }
body { color: var(--C2, black);  opacity: var(--brightness); }
body, header, #settings { background-color: var(--C1); }
.adsbygoogle { background-color: var(--CC); }

#AccentColors     { display: flex; align-items: center; justify-content: center; width: 100%; }
#AccentColors div { flex-basis: 2px; flex-grow: 1; padding: 2.5px; }

.items[data-viewmode="list"] article {
  border-bottom: 1px dashed var(--C2);
  padding: 0.25rem 0;
}

/* Page: Index (Startseite) */
.index h2 { border-bottom-width: 2px; }
.index { display: flex; flex-direction: column; gap: 20px; }

#widmung > div { 
  margin: auto; max-width: 300px; text-align: center;
  display: flex; flex-direction: column; gap: 10px;
}
#widmung span { font-size: 2rem; font-weight: bold; }
#hj {
  aspect-ratio: 1; width: 100%;
  background-color: var(--CC);
  background-blend-mode: multiply;
  background-image: url(/wp-content/uploads/hj.webp);
  background-size: 100% 100%;
 }

/* Page: Single */
.single article { column-count: var(--columns); }
.single article blockquote {
  border-left:  5px solid var(--C2);
  border-right: 5px solid var(--C2);
  border-color: var(--bq); color: var(--bq);
  opacity: 0.75;
  padding: 0 10px;
}
.single article p {
  hyphens: var(--hyphens);
  line-height: var(--lineheight);
  text-align: var(--alignment);
  /*text-wrap: pretty;*/
}
.single article > *                    { margin-top: 0.5rem; }
.single article :is(h1,h2,h3,h4,h5,h6) { margin-block: 1rem; }
/*.single article > *:first-child        { margin-top: 0; }*/

.toc        { border-width: 1px; padding: 10px; }
.toc span   { font-size: 1.25rem; font-weight: bold; }
.toc ul li  { border-top: 1px dashed; padding: 5px; }
.toc button { border: none; border-radius: 5px; margin-left: 10px; padding: 5px; }

iframe { aspect-ratio: 16/9; max-width: 100%; }

/* Font & Text Layout */
html { font-size: calc( var(--fontsize) * 1px ); }
body { font-family: var(--font); }
body {
  /*font-smooth: always;*/ /* auto never*/
  /*text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;*/
  /*text-rendering: auto;*/
  /*text-rendering: optimizeSpeed;*/
  /*text-rendering: optimizeLegibility;*/
  /*text-rendering: geometricPrecision;*/
}
header,
footer     { font-size: 16px; }
#settings  { font-size: 14px; }
.single h1 { font-size: 1.75rem; font-weight: 900; }
.single h2 { font-size: 1.60rem; font-weight: 900; }
.single h3 { font-size: 1.45rem; font-weight: 800; }
.single h4 { font-size: 1.30rem; font-weight: 800; }
.single h5 { font-size: 1.15rem; font-weight: 700; }
.single h6 { font-size: 1.00rem; font-weight: 700; }
blockquote { font-style: italic; }

/*
bold { font-weight: bold; }
[class="flex"] {}
[class="flex-column"] {}
[class="flex-column-sb"] {}
[class="flex-row"] {}
[class="flex-row-sb"] {}
[class="sticky-top"] {}

[class="flex-colrow"] {}
[class="flex-rowcol"] {}

[class="flex"]    { display: flex; }
[class="flex-y"]  { flex-direction: column; }
[class="flex-yx"] {}
[class="flex-x"]  { flex-direction: row; }
[class="flex-xy"] {}
*/

/* Slider */

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  color: var(--C2);
  
  --slider-track-color:       currentcolor;
  --slider-track-focus-color: var(--CC);
  --slider-thumb-color:       currentcolor;
  --slider-track-radius:  2px;
  --slider-thumb-radius:  2px;
  --slider-track-height:  5px;
  --slider-thumb-height: 16px;
  --slider-thumb-width:  16px;
  
  margin-block: calc( (var(--slider-thumb-height) - var(--slider-track-height)) / 2 );
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  background: var(--slider-track-color);
  border-radius: var(--slider-track-radius);
  cursor: pointer;
  height: var(--slider-track-height); width: 100%;
}
input[type=range]::-webkit-slider-thumb {
  background: var(--slider-thumb-color);
  border-radius: var(--slider-thumb-radius);
  cursor: pointer;
  height: var(--slider-thumb-height); 
  width: var(--slider-thumb-width);
  margin-top: calc( (var(--slider-thumb-height) - var(--slider-track-height)) / 2 * -1 );
  -webkit-appearance: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: var(--slider-track-focus-color);
}
input[type=range]::-moz-range-track {
  background: var(--slider-track-color);
  border-radius: var(--slider-track-radius);
  cursor: pointer;
  height: var(--slider-track-height); width: 100%;
}
input[type=range]::-moz-range-thumb {
  background: var(--slider-thumb-color);
  border-radius: var(--slider-thumb-radius);
  cursor: pointer;
  height: var(--slider-thumb-height); 
  width: var(--slider-thumb-width);
}
input[type=range]::-ms-track {
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
  cursor: pointer;
  height: var(--slider-track-height); width: 100%;
}
input[type=range]::-ms-fill-lower,
input[type=range]::-ms-fill-upper {
  background: var(--slider-track-color);
  border-radius: var(--slider-track-radius);
}
input[type=range]::-ms-thumb {
  background: var(--slider-thumb-color);
  border-radius: var(--slider-thumb-radius);
  cursor: pointer;
  height: var(--slider-thumb-height);
  width: var(--slider-thumb-width);
}
input[type=range]:focus::-ms-fill-lower,
input[type=range]:focus::-ms-fill-upper {
  background: var(--slider-track-color);
}