/* specials */
/* ------------------------------------------------------------------------------ */
/* DETAILS AND SUMMARY                                            6.00/14 - 03-08-25
/* ------------------------------------------------------------------------------ */
/* link   -> https://codepen.io/jdsteinbach/pen/GYmQjo */
/* update -> 22-02-2019 */
/* info   -> css only - no javascript necessary */
/* ------------------------------------------------------------------------------ */

details {
  position:relative;
  width:100%;
  max-width:calc(100% - 1rem);
  margin: 1.2rem auto;
  padding: 0 1rem;
  border: 1px solid var(--det-bdr-col);
  border-radius:var(--det-bdr-rnd);
  background:var(--det-bgr-col);
  color: var(--main-col-h3);
  transition: background-color 0.2s;
}
details > :last-child {
  margin-bottom: 1.4rem;
}
details::before {
  content:'';
  position:absolute;
  top:0;
  left: 0;
  width:100%;
  height:100%;
  border-radius:inherit;
  opacity:.15;
  box-shadow:var(--det-shadow);/* self 0 0.25em 0.5em #263238; */
  pointer-events:none;
  transition:opacity 0.25s;
  z-index: -1;
}
details[open] {
  background-color: #FFF;
}
details[open]::before {
  opacity:.6;
}
/* headline */
summary {
  position: relative;
  display: block;
  padding: 1rem 2em 1rem 0;
  /* border: 1px solid orange; */
  font-size: 1.2rem;
  text-transform: uppercase;
  cursor: pointer;
}
/* the cross "-" and "+" */
summary::before, summary::after {
  content:'';
  position:absolute;
  top: 50%;
  right:0;
  width:.75em;
  height: 2px;
  background:currentColor;
  /*border:1px solid var(--color-primary);*/
  text-align:right;
  transform:translateY(-50%);
  transition:transform 0.3s ease-in-out;
}
summary::after {
  transform:translateY(-50%) rotate(90deg);
}
[open] summary::after {
  transform: translateY(-50%) rotate(180deg);
}
summary::-webkit-details-marker {
  display:none;
}

/* line colored in <div> */
.sum-line {
  border-top: 1px solid var(--color-primary);
  margin-bottom: 8px;
}

/* ------------------------------------------------------------------------------ */
/* vcard - simple */
/* link -> https://codepen.io/abcretrograde/pen/MPRgRN */
/* upd  -> 12-09-2021 */

:root {
  --card-size: 320px;
  --card-width: calc(100vw - var(--grid-gap) * 2);
  --card-height: calc(var(--card-width) * 0.6);
  --grid-gap: 2.4rem;
}

* {
  box-sizing: border-box;
}

.container {
  min-height: 100%;
  max-width: 1600px;
  margin: auto;
  padding: var(--grid-gap);
  display: grid;
  justify-content: center;
  grid-template-columns: 1fr;
  grid-column-gap: var(--grid-gap);
  grid-row-gap: calc(var(--grid-gap) - 0.3rem);
}

.card {
  text-align: center;
  border: 1px solid #f2f2f2; /* self */
  border-radius: 6px;
  user-select: none;
}
.card:hover {
  opacity: 0.7;
}
.card__img {
  width: var(--card-width);
  height: calc(var(--card-height) - 2em);
}
.card__img img {
  display: block;
  height: 100%;
  width: 100%;
  border: none !important;
  object-fit: contain; /* OR cover */
}
.card__header {
  margin: 0.7em 0 0.55em;
  font-family: 'MainFont';
  font-size: 1rem;
  line-height: 1.13;
  font-weight: 100;
  letter-spacing: 0.05em;
}
.card__description {
  margin: 0;
  padding: 0 6px; /* self */
  letter-spacing: 0.025em;
}

@media (min-width: 600px) {
  :root {
    --card-height: calc(var(--card-size) * 0.7);
    --card-width: var(--card-size);
  }

  .container {
    padding: var(--grid-gap);
    grid-template-columns: repeat(auto-fit, var(--card-width));
  }

  .container--space-evenly {
    --grid-column-gap: 3.5vw;
    width: 100%;
    max-width: 100%;
    padding-left: calc(var(--grid-column-gap) * 2) !important;
    padding-right: calc(var(--grid-column-gap) * 2) !important;
    justify-content: space-evenly;
    grid-column-gap: calc(var(--grid-column-gap) * 0.6);
  }
}


/* ------------------------------------------------------------------------------ */
/* list-container */
.list-container {
  width:100%;
  margin: 2em auto; 
  padding: 1rem;
  border: 0px solid orange;
}
/* list row - referenzen */
.list-row {
  display: flex;
  align-items: stretch; /* Änderung auf "stretch" */
  margin-bottom: 2px; /* Optionaler Abstand zwischen den Zeilen */
}

dd {
  flex: 2;
  padding: 4px 2px;
  border: 1px solid transparent;
  border-width: 0 0 1px 0;
  font-size:1rem;
  white-space: normal; /* Text umbrechen erlauben */
  overflow: hidden; /* Versteckt den überlaufenden Text */
  transition: background 0.4s, border-color 0.8s; /* Füge eine sanfte Einblendung hinzu */
}

/* Den ersten dd auf 5% Breite setzen */
dd:first-child {
  flex: 0.5;
  max-width:6ch;
  /*margin:0 auto;*/
  /*padding:4px 6px 0 0;*/
  text-align:right;
  vertical-align:middle;
}

/* Die letzte dd auf maximal 15 Zeichen Breite begrenzen */
dd:last-child {
  max-width: 15ch;
  text-align: center;
}

/* headline - TRICKY !!! */
.list-row:first-of-type {
  margin: 0 0 4px 0;
  padding: 6px 0;
  background: #999;
  color:#fff;
  border-radius: 6px 6px 0 0;
}
.list-row:first-of-type:hover {
  background: #999;
  border: none;
}

/* Füge Hintergrund und ändere border-bottom-Farbe bei :hover */
.list-row:hover {
  background: #f5f5f5; /* Leicht grauer Hintergrund bei Hover */
}
.list-row:hover dd {
  border: 1px solid #999; /* Dunklere border-bottom bei Hover */
  border-width: 0 0 1px 0;
}
/* Füge eine graue border-right zur letzten Spalte bei Hover hinzu */
.list-row:hover dd:last-child {
  border: 1px solid #999;
  border-width: 0 1px 1px 0;
  border-radius: 0 0 6px 0;
}

/* Füge ein rotes Chevron (Font Awesome) nur im ersten dd der Zeile hinzu */
/*
.list-row:hover dd:first-child::before {
  content: '\f054';
  display:inline-block;
  margin: 0;
  padding-left:2px;
  vertical-align:middle;
  font-family: 'FontAwesome';
  text-align:left;
  color:var(--color-primary);
}
*/
/* Verstecke das Chevron-Right-Symbol standardmäßig */
.chevron {
  display:none;
}
/* Zeige das Chevron-Right-Symbol im ersten dd der Zeile nur bei Hover */
.list-row:hover dd:first-child .chevron {
  display:inline-block;
  color:var(--color-primary); /* Rote Farbe */
  /*margin-right:4px;*/
  padding: 1px 0 0 6px;
  vertical-align:middle;
  float:left;
}

.text {
  text-align:right;
  padding:0 6px 0 0;
}


/* ------------------------------------------------------------------------------ */
/* Scroll Triggered Highlights w/ CSS Scroll Driven Animations */
/* see  -> specials.js
/* use  -> index.php
/* https://codepen.io/jh3y/pen/qBgRLxb */
/* 07-11-2023 */
/* ------------------------------------------------------------------------------ */

:root {
  --hue-red: 0;
  --lightness-red: 95%; /* Helleres Rot */

  --hue-blu: 190;
  --lightness-blu: 90%; /* Dunkleres Blau */

  --hue-org: 240;
  --lightness-org: 95%; /* Helleres Orange */

  --hue-grn: 150;
  --lightness-grn: 95%; /* Normales Grün */

  --hue-gry: 0;
  --lightness-gry: 30%; /* Dunkleres Grau */

  --hue-yel: 59.31;   /* #F4F39E; /* hsl(59.31 80% 79%) */
  --lightness-yel: 82%; /* Marker yellow */
  
}

mark        {color: hsl(0 0% 6%);}
.dark mark  {color: hsl(0 0% 98%);}

mark {
	--lightness: 90%; /* self 80% */
  --highlighted: 1;
  --highlight:hsl(var(--hue-yel, 45) 80% var( --lightness-yel));
  background:transparent;
  /* color: #fff; */
}

@supports (animation-timeline: view()) {
  mark {
    --highlighted: 0;
    animation: highlight steps(1) both;
    animation-timeline: view();
    animation-range: entry 100% cover 10%;
  }
}

.dark mark { --lightness: 35%; }

mark span {
  background: linear-gradient(120deg, var(--highlight, lightblue) 50%, transparent 50%) 110% 0 / 200% 100% no-repeat;
  background-position: calc((1 - var(--highlighted)) * 110%) 0;
  transition: background-position 4s;
}

mark::after {
  content: attr(data-author);
  display: grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
  font-weight: bold;
  position: absolute;
  width: 32px;
  aspect-ratio: 1;
  border-radius: 12px;
  background: var(--highlight);
  font-weight: 80;
  top: 0;
  left: 100%;
  translate: 50% 0;
  font-size: 0.875rem;
  scale: var(--highlighted);
  transition: scale 10s;
}

@keyframes highlight {
  to {
    --highlighted: 1;
  }
}

::view-transition-new(root) {
	animation: grow 6s; /* self 1s */
}
::view-transition-old(root) {
	animation: none;
}

@keyframes grow {
	0% {
		clip-path: polygon(50vmax 50vmax, 50vmax 50vmax, 50vmax 50vmax);
	}
	100% {
		clip-path: polygon(50vmax -100vmax, -100vmax 200vmax, 200vmax 200vmax);
	}
}

/*
a {
	color: hsl(212 100% 50%);
	text-decoration: none;
}

a:is(:hover, :focus-visible) {
	text-decoration: underline;
	text-underline-offset: 6px;
}
*/

/* ------------------------------------------------------------------------------ */
/* TEXT-ROTATE */
/* https://codepen.io/Twikito/pen/KVBoeJ */
/* 02-02-2016 */
/* ------------------------------------------------------------------------------ */

.text-rotate {
  display:inline-block;
  width:auto;
  height:auto;
  margin: .2rem 1rem;
  padding: 1.4rem 0;
  font-weight: 100;
  font-size:var(--font-size-h3); /* self 40px; */
  border:0px solid orange;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

.txt-start, .txt-rotate {display:inline-block;vertical-align:top;margin:0;}
.txt-word {position:absolute;width:100%;opacity:0;}
.letter         {display:inline-block;position:relative;float:left;transform:translateZ(25px);transform-origin:50% 50% 25px;}
.letter.out     {transform:rotateX(90deg);transition:transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);}
.letter.behind  {transform:rotateX(-90deg);}
.letter.in      {transform:rotateX(0deg);transition:transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
/* colors */
.rotate-0 {color:var(--rot-col-0);}
.rotate-1 {color:var(--rot-col-1);} /* #8e44ad; */
.rotate-2 {color:var(--rot-col-2);} /* #2980b9; */
.rotate-3 {color:var(--rot-col-3);} /* #c0392b; */
.rotate-4 {color:var(--rot-col-4);} /* #16a085; */
.rotate-5 {color:var(--rot-col-5);} /* #2c3e50; */
.rotate-6 {color:var(--rot-col-6);} /* #2c3e50; */

/* do not show on smartphones due to wrong word-break */
@media only screen and (max-width: 767px) {
  .text-rotate {
    display: none;
  }
}

/* ------------------------------------------------------------------------------ */
/* ECHECK | WARTUNG | SERVICE */
/* https://codepen.io/MarkBoots/pen/KKJPPXg */
/* 19-10-2023 */
/* ------------------------------------------------------------------------------ */

.card2round {
  display: grid;
  grid-template:'txt2frame cardimg1 cardimg2'
                'cta cta cardimg2';
  grid-template-columns: 4fr 3fr 3fr;
  row-gap: .4rem;
  width: min(75rem, 100%);
  margin-inline:auto;
  margin-bottom:1.4em;
  padding: 0;
  background:none; /* #eff4f6; */
  --circle-border-size: 3rem;
  --circle-border-color: oklch(93.7% 0 0);
}
.card2round > .txt2frame {
  grid-area:txt2frame;
  display:grid;
  gap: 0;
  border:0px solid red;
}
.card2round > .cta {
  grid-area: cta;
  display: flex;
  height: var(--circle-border-size);
  justify-content: start;
  border-radius: 100vw 0 0 100vw;
  background: var(--circle-border-color);
}
/* BUTTON on the left side */
.card2round > .cta > .button {
  display:grid;
  place-items:center;
  margin: 0;
  padding-inline: 1.2rem;
  border-radius: 6px 32px 32px 6px;
  background:var(--color-primary);
  color: #fff;
  text-decoration:none;
}
.card2round > .cta > .button:hover {
  border:1px solid red;
  border-width: 2px;
  background:var(--circle-border-color);
  color:var(--color-primary);
}

.card2round > .cardimg1 {
  grid-area:cardimg1;
  display: grid;
  justify-content:end;
  translate: calc(var(--circle-border-size) / 2);
  z-index:1;
}
.card2round > .cardimg2 {
  grid-area:cardimg2;
  display: grid;
  place-self:end;
  place-items:center;
  border: var(--circle-border-size) solid var(--circle-border-color);
  margin:0 0 0 -1px; /* error - trick - due to smal vertical line at chrome */
  padding: calc(var(--circle-border-size) * 0.25 );
  border-radius: 50% 50% 50% 0;
  clip-path: polygon(
    0 0, 
    100% 0, 
    100% 100%, 
    0 100%,
    0 calc(100% - var(--circle-border-size)),
    var(--circle-border-size) calc(100% - var(--circle-border-size)),
    var(--circle-border-size) 50%,
    0 50% 
  )
} 
.card2round img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit:cover;
  border-radius: 50%;
}

/* MQ max 820px */
@media (max-width: 820px) {
  .card2round {
    grid-template-areas:
      'txt2frame'
      'cta';
    grid-template-columns: 1fr;
  }

  .card2round > .txt2frame {
    width: 100%;
  }

  .card2round > .cta {
    background: none;
  }

  .card2round > .cta .button {
    margin-left: .8rem;
  }

  .card2round > .cardimg1,
  .card2round > .cardimg2 {
    display: none;
  }
}



/* IMG2 - STICKER - ROTATED */
.rotated-image {
transform: rotate(-10deg);
}
/* ------------------------------------------------------------------------------ */
/* END */	
/* ------------------------------------------------------------------------------ */