/* Single Page additions (flat, matching masonry styles) */

.ss-single .ss-container{
  width: min(980px, calc(100% - 36px));
}

.ss-single .ss-container #transparenz {
	    margin-top: 15px;
    display: block;
}

.ss-single-head{
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  margin-bottom: 18px;
}

.ss-nav {
	 display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 20px;
}

.ss-back{
  display:inline-block;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--line);
  padding: 8px 10px;
  border-radius: 6px;
  background: transparent;
  
}

.ss-home{
  display:inline-block;
 
}

.ss-home img {
	height: 30px;
    width: 30px;
	margin-top: 8px;
}


.ss-back:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(232,238,252,.24);
  color: var(--fg);
}

.ss-single-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.ss-single-meta-right{
  display:flex;
  align-items:center;
  gap: 10px;
}

.ss-date{
  color: var(--muted);
  font-size: 12px;
}

.ss-single-title{
  margin: 0 0 10px;
  font-size: clamp(26px, 3vw, 40px);
  letter-spacing: -0.02em;
  font-weight: 700;
  line-height: 1.12;
}

.ss-single-excerpt{
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
  max-width: 80ch;
}

.ss-single-hero{
  margin: 0 0 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255,255,255,.02);
}
.ss-single-hero img{
  display:block;
  width: 100%;
  height: auto;
}

/* Content typography */
.ss-content{
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255,255,255,.03);
  padding: 16px;
	position: relative;
	overflow: hidden;
}

.ss-content :where(p, ul, ol){
  color: rgba(232,238,252,.86);
  line-height: 1.7;
  font-size: 15px;
}

.ss-content :where(h2, h3){
  margin-top: 1.4em;
  margin-bottom: .5em;
  letter-spacing: -0.01em;
}

.ss-content a{
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent) 70%, transparent);
}
.ss-content a:hover{
  text-decoration-color: var(--accent);
}

.ss-content blockquote{
  margin: 1.1em 0;
  padding: 10px 12px;
  border-left: 3px solid var(--accent);
  background: rgba(255,255,255,.03);
  color: rgba(232,238,252,.80);
}

.ss-content hr{
  border: 0;
  border-top: 1px solid rgba(232,238,252,.12);
  margin: 16px 0;
}

/* Prev/Next */
.ss-single-nav{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.ss-single-nav a{
  display:block;
  border: 1px solid var(--line);
  padding: 10px 12px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--fg);
  background: transparent;
  max-width: 45ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
	margin-bottom: 10px;
}
.ss-single-nav a:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(232,238,252,.24);
}

@media (max-width: 720px){
	.ss-single-nav {
	display: block;	
	}

	
	
}


/* IMAGE SINGLE */

.ss-content .wp-post-image {
	    position: absolute;
    right: 0;
    top: 0;
	z-index: 0;
}

.ss-content .wp-post-image img {
	height: 100%;
    width: auto;
}

.ss-content .wp-post-image {
	opacity: 0.15;
}

.ss-content .wp-post-image {
  display:block;
  width:  auto;
  height:100%;

  /* links transparent -> rechts deckend */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%,
    rgba(0,0,0,1) 20%,
    rgba(0,0,0,1) 100%
  );
  mask-image: linear-gradient(to right,
    transparent 0%,
    rgba(0,0,0,1) 20%,
    rgba(0,0,0,1) 100%
  );

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* WEB SUMMARY */


#news-web-summary_wrapper  {
	border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(255, 255, 255, .03);
    padding: 16px;
    position: relative;
    overflow: hidden;
	margin-top: 30px;
}

#news-web-summary_wrapper a {
	color: #FFF;
}

#news-web-summary_wrapper h6 {
	margin: 0;
}

.web-summary {
	    font-size: 15px;
    line-height: 1.3em;
}

.web-summary h3 {
	   border-bottom: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
     margin: 20px 0 0px 0px;
    padding: 0;
}

.web-summary ul {
	margin: 0;
    padding: 16px;
 
}

.web-summary ul:last-of-type {
margin: 10px 0 0px 0px !important;
padding: 0 !important;
}
.web-summary ul:last-of-type li {
      list-style: none;
    margin: 0px 5px 10px 0px;
    padding: 0;
    float: none;
    display: inline-block;
  
    /* gap: 20px; */
   
}

.web-summary ul li a {
	line-height: 1em;
       display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .03);
    border-radius: 6px;
    padding: 3px 4px 3px 4px;
    transition: background .12s ease, border-color .12s ease;
}

.web-summary ul li a:hover  {
background-color:	var(--line);
}


/* Magic AI Card – Styles für .story-related / #news-web-summary_wrapper */
#ss-grid.story-related{

  margin: 24px 0;
 
}

.ss-content-pages a {
	
	color: #FFF;
	
}






a.ss-back{
  position: relative;
  overflow: hidden;
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;

  background: rgba(7,10,18,.15);
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  backdrop-filter: blur(6px);
}

a.ss-back::before{
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(90deg,
    transparent,
    rgba(37,99,235,.18),
    transparent
  );
  transform: translateX(-60%) rotate(8deg);
  animation: ssBackShimmer 5.5s ease-in-out infinite;
}

@keyframes ssBackShimmer{
  0%   { transform: translateX(-60%) rotate(8deg); opacity: .6; }
  50%  { opacity: .8; }
  100% { transform: translateX(60%) rotate(8deg); opacity: .6; }
}

/* Text bleibt oben */
a.ss-back > * , a.ss-back{
  position: relative;
  z-index: 1;
}


.ai_image_hinweis span {
	    display: none;
}

.ai_image_hinweis  {
	  position: absolute;
    right: 0;
    bottom: 3px; 
	cursor:pointer;
}

.ai_image_hinweis:hover img {
	opacity: 0.5;
}

.ai_image_hinweis:hover  span {
	display: block;
    position: absolute;
    right: 32px;
    bottom: 0px;
    width: 250px;
    background-color: #000;
    border-radius: 5px;
    padding: 10px;
    text-align: center;
    max-width: 200px;
    z-index: 999;
}