@charset "UTF-8"; 

body p{
  font-family: 'Roboto', Arial, sans-serif !important;
  font-weight: 400 !important; /* matches Roboto-Regular */
}
strong, b {
  font-weight: 700; /* matches Roboto-Bold */
}
em, i {
  font-style: italic; /* matches Roboto-Italic */
}

/* =========================================
**
**  CRUCIAL KEYBOARD ACCESSIBILITY HELPERS
**  ARIA and Skip Navigation Styles
**
** ========================================= 
*/
.screen-reader-text, .hide {
 position: absolute !important;
  z-index: -1000;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  text-decoration: none;
  border: 0;
  word-wrap: normal !important;
}

/* 
  When a screen-reader-text element receives keyboard focus 
  (e.g., via a skip link), it becomes visible.
*/
.screen-reader-text:focus, .hide:focus ,
.screen-reader-text a:focus, hide a:focus {
	/* gpt considers these Misplaced or redundant..  
  height: auto;
  position: static;left: 5px;top: 5px;
  z-index: 1000;
  width: auto;
 ****************************************/
  line-height: 1.2;
  margin: 0.5rem;
  padding: 0.25rem 0.5rem;
  display: inline-block;
  outline: 2px solid #0070f3;
  outline-offset: 2px;
clip-path: none;
font-size: 1rem;
height: auto;
padding: 15px 23px 14px;
text-decoration: none;
width: auto;
z-index: 100000;
}


/* 
  Completely hide content, 
  NOT accessible.
*/
.hideout, .hidden{ 
  display:none !important; 
  visibility:hidden !important; 
  speak:none !important; 
}


/* 
  for now, hide the fucking Custom Styles wp link */
ul.footer-pages li:last-child {
  display: none !important;
  visibility: hidden !important;
  speak: none !important;
}

	a.xtern {
    color: #888888; font-weight:bold;
    text-decoration: none;
}
a.xtrn:hover {
    text-decoration: underline;
}

a.xtrn::after {                       
        content: url('https://repixel.de/blog/wp-content/themes/micromoon/images/xtrn.svg' ); 
        display: inline-block;
        vertical-align: middle;
        margin-left:-2px;
        padding-right:0px;
    }

/* Optional: Import other stylesheets  
@import url(" w/e "); 
*/
/********** english and german language flags ***************/
p.flexer{  display: flex;   
  /*  justify-content: space-between;  far left and right */
	justify-content: flex-end;
    width:100%;  
    margin: 0 auto; 
	 align-items: center;  /* Vertically center the content */
	}  
p.flexer a {
    display: block;
  background-repeat:no-repeat;
background-position:50% 0%;
background-color:inherit;
    text-decoration: none;    
width:50px; height30px; 
}
a.lang_en{

/*  background-image:url('images/engl.gif');*/
background-image: url('https://repixel.de/blog/wp-content/themes/micromoon/images/engl.gif');


margin-left: auto; margin-right:30px;
/* margin-right: auto;            /* Push the "Previous" link to the far left */
}   


a.lang_de { 
/*background-color:inherit; background-image:url('images/deuts.gif');*/
background-image: url('https://repixel.de/blog/wp-content/themes/micromoon/images/deuts.gif');
/*margin-left: auto;             /* Push the "Next" link to the far right */
}     
 

@media screen and (min-width:768px){  
p.flexer{  max-width: 80%;      }
} 
 





.entry-content, .entry-content p, aside, header {
  text-align: left;
}

/* General inner Layout */
.entry-content {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  line-height: 1.6;
  font-size: 1em;
  gap: 1rem;
}
  /* Paragraphs: full width flex items */
.entry-content p {
  flex: 1 0 100%; /* Do not shrink below 100% width */
  margin-bottom: 1em;
}

 
 
/* Style for all articles with id starting with 'post-' */
.entry-content article,
article[id^="post-"] {
  margin-bottom: 2em;
   font-size:1.1rem;  
  /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow */
  /* border-radius: 5px; /* Slightly rounded corners */
}




.post-password-form input, 
input[id*="pwbox-"] {padding:.5em ;}


@media screen and (min-width: 768px){
	article[id^="post-"] {
	margin:2rem auto; 
	max-width:50rem;
	font-size:1.2rem;
	}
}

/* Style the date */
.post-date {
  font-size: 0.9em;
  margin-bottom:1em;
  display: block; 
  text-align:right; 
  padding-right:8rem;
}


/*  post title */
.entry-content h2,
.entry-title {
  font-size: 1.8em;
  margin: 0 0 1em 0;
}
.entry-title a {
  text-decoration: none;
 }

.entry-title a:hover {
  /*color: #0073aa; /* WordPress blue */
}
/******************************************************/

.archive-list .post-date {
  font-size: 1em;
  margin-bottom:0;
  display: inline-block;   padding-right:2rem;
}
.archive-list .entry-title a {
 display: inline-block; 
 }
/*
 =================================
*/

/*

.storycontent > p{ display:flex;
	align-items:flex-start;
	flex:0 0 100%;
	 width:100%;
}
*/
 

 
 
.entry-content p img[class*="align"] { 
  height: auto !important;
  object-fit: scale-down;
  max-width: 99%;
  max-height: 99%; 
  transition: transform 0.3s ease-in-out;
  will-change: transform;
}
img.alignleft,
img.alignright,
img.aligncenter {
  display:block;
  margin: 0 auto 1rem auto;
  float: none;
  max-width:98%;
} 
 @media screen and (max-width: 680px) {
	 img.alignleft,
img.alignright{ clear:both;}
}

 @media screen and (min-width: 680px) {
.entry-content p img.alignleft {
  float: left;
  margin: 0 1rem 0 0;
  max-width:40%;
}

.entry-content p img.alignright {
  float: right;
  margin: 0 0 0 1rem;
  max-width:40%;
}
}

 

 
img[class*="align"]:hover {
  transform: scale(1.05);
  z-index: 2;
}
  






/* ============================================================================
     BLOCKQUOTE, CITE, QUOTE
**     and  INLINE TEXT  
** ============================================================================ 
*/


/* Reset browser-inserted quotes and hyphens */
blockquote,
q,
cite,
.cite,
.citation,
ins,
.entry-content blockquote,
.entry-content cite,
.entry-content q,
.storycontent > p { 
  word-break: normal !important;
  overflow-wrap: normal !important;

}

/* Remove browser-generated quote marks */
/* Remove browser-generated quote marks */
cite,
blockquote, q ,
blockquote::before,
blockquote::after,
q::before,
q::after {
  content: none !important;
  quotes: none !important;
   hyphens: none !important;
  -webkit-hyphens: none !important;
  -ms-hyphens: none !important;
}
/* Blockquote styling */
blockquote  {
  position: relative;
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.6;
  color: #555;
  background-color:#D4EFFF;
  padding: 2rem 1rem 1rem 3rem;
  margin: 2rem 0;
  border-left: 4px solid #ccc;
  border-radius: 1em;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1),
              0 1px 3px rgba(0, 0, 0, 0.08);
  text-decoration: none;
}

/* Responsive tweak for blockquotes */
@media (max-width: 600px) {
  blockquote,
  .cite {
    padding-left: 2.5rem;
    font-size: 1rem;
  }
}

/* Inline citation style (HTML tag or custom classes) */
cite,
.cite,
.citation,
ins {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  display: inline;
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.6;
  text-decoration: none;
  margin: 0;
  padding: 0 0.5em;
}

/* Citation footer inside blockquote */
.cite footer,
blockquote footer {
  display: block;
  margin-top: 1rem;
  font-size: 0.95rem;
  font-style: normal;
  text-align: right;
}

















 
/* Styling for the code block */
.entry-content pre { font-weight:bold; color:#026;
    background-image: url('https://repixel.de/blog/wp-content/themes/micromoon/images/millimeterpapier-b2.png'); /* Repetitive background */
    background-size: 25px 25px; /* Adjust to your preference */
    border: 1px solid #888; /* Border for better definition */
    border-radius: 5px;
    font-family: monospace, "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", "monospace";
    font-size: 1.05rem; letter-spacing:0.05em;
    line-height: 1.5;
    padding: 1em;
    width: 96%; /* Max width for responsiveness */
    margin: 0 auto;
    overflow: auto; /* Scrollbars will appear if the content overflows */
    word-wrap: break-word;
    white-space: pre-wrap; /* Preserve whitespace and allow line breaks */
  /* Inset shadow for "hole" effect */
    box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.6),
                inset 0 -2px 4px rgba(0, 0, 0, 0.3);
}   
    /* Optional: slight darkening for depth */

/* Code inside the pre block */
.entry-content code {
    font-family: monospace, "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", "monospace";
    font-size: 1rem;
    color: #004; 
}

/* Media Query for smaller screens */
@media (max-width: 768px) {
    .entry-content pre {
        font-size: 0.9rem; /* Slightly smaller font for mobile screens */
        padding: 0.8em; /* Adjust padding for smaller screens */
    }
    .entry-content code {
        font-size: 0.9rem; /* Adjust code size for mobile */
    }
}
/* Add pseudo-content before the code block  
.entry-content pre::before {
    content: "The gravity grid, in its infinite complexity, manifests an event horizon wherein minute fluctuations within the spacetime continuum propagate through wave behavior, subtly influencing the interaction of matter and light, thereby generating interference patterns that defy conventional understanding of quantum relativity and transcendent wave dynamics.";
    display: block;
    font-size: 1.2rem; /* Slightly larger for emphasis *//*
    color: #333; /* Darker text color for readability */
   /* margin-bottom: 1em; /* Space between the content and the code block *//*
    padding: 1em;
    background: rgba(0, 0, 0, 0.05); /* Light background for contrast *//*
    border-radius: 5px; /* Rounded corners *//*
}*/



/*******************************************
AI-Optimized Responsive Table CSS
/* ==================================
** TABLES — Clean, Responsive, Readable
** ================================== */

.table-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
}

/* Base table setup */
.table-container table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ccc; /* outer border */
  min-width: 600px; /* keeps columns readable on narrow screens */
  background-color: #fff;
  font-size: 0.95rem;
}

/* Header */
.table-container th {
  background-color: #f8f8f8;
  font-weight: 600;
  text-align: left;
  padding: 0.75rem;
  border: 1px solid #ccc;
  position: sticky; 
  top: 0; /* stays visible on scroll if desired */
  z-index: 1;
}

/* Cells */
.table-container td {
  padding: 0.75rem;
  border: 1px solid #ddd;
}

/* Zebra striping for readability */
.table-container tbody tr:nth-child(even) {
  background-color: #fafafa;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .table-container table {
    min-width: 500px; /* slightly tighter */
  }

  .table-container th,
  .table-container td {
    white-space: nowrap;
  }
}
/*
🤖 Why an AI would do this

Semantic + wrapper-based layout
→ overflow-x belongs on a container, not the table — cleaner and more reliable.

Balanced border logic
→ Only one consistent border set (border-collapse: collapse; border: 1px solid) keeps all edges visible without double lines.

Readability tweaks
→ Light header shading and zebra stripes improve scannability.
→ Sticky headers are a subtle UX boost.

Mobile first
→ Forces horizontal scroll on small screens instead of text wrapping chaos.
→ Keeps text readable and structure intact.

Sensible defaults
→ Neutral colors, easy to theme, accessible contrast.
*/