@import url("template.css");

:root {
    --color--hintergrund: #fff;
    --color--text: #333;
    --color--header: steelblue;
    --color--abdunkelung: #3a414580;
    --color--invers: steelblue;
    --cover-title-height: 66vh;
}

main a[href^="http"] {
  padding-right: 1em;
  background: 
    url('data:image/svg+xml;utf-8,\
    <svg width="16" height="16" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">\
      <polygon fill="rgb(51, 51, 51)" points="2,2 5,2 5,3 3,3 3,9 9,9 9,7 10,7 10,10 2,10"/>\
      <polygon fill="rgb(51, 51, 51)" points="6.2,2 10,2 10,5.79 8.58,4.37 6.5,6.5 5.5,5.5 7.6,3.4"/>\
    </svg>') right 42.5% no-repeat;	
}

.color-invers a[href^="http"] {
  padding-right: 1em;
  background: 
    url('data:image/svg+xml;utf-8,\
    <svg width="16" height="16" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">\
      <polygon fill="white" points="2,2 5,2 5,3 3,3 3,9 9,9 9,7 10,7 10,10 2,10"/>\
      <polygon fill="white" points="6.2,2 10,2 10,5.79 8.58,4.37 6.5,6.5 5.5,5.5 7.6,3.4"/>\
    </svg>') right 42.5% no-repeat;	
}

h2, h3 {
  text-align: center;
}

h3:has(#html), h3:has(#css), h3:has(#js) {
  position: relative;
  top:-1.125em;

  &::after {
    position:relative;
    top:1.125em;
  content:"";
  background-repeat: no-repeat;
  width: 50%;
  height:3em;
  display: inline-block;
  }
}

h3:has(#html)::after { 
  background-image: url("../../../images/von-wordpress-zu-joomla/HTMLbg.png"); 
  margin-left: 1.5em;
}
h3:has(#css)::after { 
  background-image: url("../../../images/von-wordpress-zu-joomla/CSSbg.png"); 
  margin-left: 2.5em;
}
h3:has(#js)::after { 
  background-image: url("../../../images/von-wordpress-zu-joomla/JSbg.png"); 
  margin-left: 3.5em;
}

.item-image img { background-color: steelblue; }

.inhalt > .block1 > p.color-invers {
  box-sizing: content-box;
  padding: 1em;
  width: 100%;
  position: relative;
  left: -1em;
}