/* ===============================
   ROOT / SYSTEM
================================ */

:root {
  --logo-gray: #3a3a3a;
  --logo-accent: #d32f2f;
  --bg: #f4f4f4;
  --text: #222;
  --font-main: Arial, Helvetica, sans-serif;
}


/* ===============================
   BASE LAYOUT
================================ */

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-main);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.site-wrapper {
  text-align: center;
  padding: 40px 20px;
  max-width: 640px;
  width: 100%;
  position: relative;
}


/* =====================================================
   Brand & Headings – ruhige Typografie
   ===================================================== */

/* Zentrale Brand-Schrift */
.brand-text {
  font-size: 2.2rem;
  font-weight: 400;          /* bewusst kein Fett */
  letter-spacing: 0.04em;
  color: var(--text-main);
}

.brand-sub {
  font-size: 1.6rem;
  letter-spacing: 0.12em;
  color: var(--logo-gray);
  opacity: 0.75;
  margin-top: 0.25em;	
}

/* ===============================
   LANGUAGE SWITCH
================================ */
.language-switch {
	display: inline-block;
    text-decoration: none;
    position: relative;
	
	font-weight: 600;	
  
	margin: 1.6em 0;
  	letter-spacing: 0.15em;
  	opacity: 0.7;
}

.language-switch a {
  	margin: 0 0.5em;
  	text-decoration: none;
  	color: inherit;
	font-weight: 600;	
}

.language-switch a:hover {
  text-decoration: underline;
}

/* raus am 25.2.26

.language-switch a {
  position: relative;
  text-decoration: none;
}

.language-switch a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  height: 1px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.language-switch a:hover::after {
  transform: scaleX(1);
}
*/
/* ===============================
   LOGO SYMBOL BLOCK
================================ */

.logo-dot {
  	display: inline-block;
	width: 0.22em;
	height: 0.22em;
  	background: var(--logo-gray);
  	border-radius: 50%;
  	margin: 0 0.22em;
	vertical-align: middle;   /* statt baseline */
  	/* vertical-align: 0.02em; /* vertical-align: 0.08em;*/
}



.logo-block {
  margin: 1.6em 0;
}

.logo-block img {
  /*width: 90px;*/
  height: auto;
}

.logo-name {
  color: #2a2a2a;   /* dunkles Grau dunkler #222222; */
}

.logo-inline {
  color: ##f4f4f4;   /* dunkles Grau dunkler #222222; */
}
/* ===============================
   ENTRY TEXT
================================ */

.entry-claim {
    margin-top: 2rem;
    line-height: 1.6;;
    gap: 2rem;              /* Abstand zwischen Sprachblöcken */
}

.claim-tile {
    display: block;
}

.claim-tile {
    margin-bottom: 0,5rem;
   
}
.debug-bar{
    background:#111;
    color:#0f0;

    font-family:monospace;
    font-size:12px;

    padding:10px;

    border-bottom:1px solid #444;
}
.stage-container{
    position:relative;
}
/* ohne rahmen: */
.stage-exit{
    position:absolute;
    right:12px;
    bottom:12px;
    width:70px;
    height:40px;
}
/* mit rahmen */
.stage-exit{
    position:absolute;

    right:12px;
    bottom:12px;

    width:70px;
    height:40px;

    border:2px solid red;   /* nur zum Ausrichten */
}

.stage-exit{
    background:url("/assets/img/system/exit.png") no-repeat center;
    background-size:contain;
}