/* Schriftart Goldmarie einbinden */
@font-face {
    font-family: 'Goldmarie'; /* Name der Schriftart */
    src: url('/fonts/goldmarie.ttf') format('truetype'); /* Pfad zur Schriftart */
    font-weight: normal;
    font-style: normal;
}

/* Schriftart 18thCtrKurTxt einbinden */
@font-face {
    font-family: 'Kurrent';
    src: url('/fonts/18thCtrKurTxt.ttf') format('truetype');
}


@font-face {
    font-family: 'Trirong';
    src: url('/fonts/Trirong-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Trirong';
    src: url('/fonts/Trirong-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

html {
    font-size: 16px; /* Basis-Schriftgröße */
}

/* Globale Einstellungen */
/* 🌍 Allgemeine Styles für die Seite */
body {
    margin: 0;
    font-family: var(--font-standard);
	background-color: var(--farbe-blau); /* Blauer Hintergrund */
    color: var(--farbe-beige); /* Helle Schriftfarbe */


/* 🖥 Hauptcontainer für die Seite */
.container {
    max-width: 1400px; /* NEU: Erhöhte Breite für große Monitore */
    width: 90vw; /* Dynamische Anpassung */
    margin: 0 auto; /* Zentriert den Container */
    padding: 0px;
    background-color: #353244;
}

.bruch {
    font-size: 0.7em;        /* Kleiner machen */
    vertical-align: 0.15em;   /* Leicht hochsetzen */
    line-height: 1;          /* Enger zusammen */
}


	
/* 📌 Hybrid-Layout für Karte & Infobox */
#map-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    max-width: 1400px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 10px;

    /* ✨ WICHTIG: Ausgangszustand unsichtbar */
    opacity: 0;

    /* Sanftes Einblenden */
    transition: opacity 1s ease-in-out;

    min-width: 0;
}

/* ✨ Wird per JS hinzugefügt */
#map-container.visible {
    opacity: 1;
}


/* Canvas selbst */
#map-canvas {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 2000 / 1413;
    height: auto;
    display: block;
    background: #eee;
    border: 2px solid rgb(188, 162, 116);
    border-radius: 10px;
    z-index: 1;
	position: relative

}


/* 🖼️ Wrapper für Canvas + Switch */
/* Canvas-Wrapper: nimmt ca. 70% ein, aber nie mehr als 100% */
#canvas-wrapper {
    flex: 2 1 0;
    min-width: 320px;
    max-width: 70vw;
	padding: 0 4px 4px 4px;
	position: relative;

    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    visibility: visible;   /* Das kannst du bei Bedarf wieder umschalten */
    opacity: 1;
    transition: opacity 0.4s;
}
	
#canvas-wrapper.visible {
    visibility: visible;
    opacity: 1;
}
/* Info-Container: ca. 30% */
#info-container {
    flex: 1 1 0;
    min-width: 270px;
    max-width: 420px;
    width: 30%;
    box-sizing: border-box;
    min-height: 300px;
    background-color: var(--farbe-beige);
    padding: 10px;
    border: 2px solid rgb(188, 162, 116);
    border-radius: 10px;
    color: #353244; 
    overflow-y: auto;
    height: 671px;
}
	

/* 🗺️ Canvas */
#chronik-canvas {
	box-sizing: border-box;
    width: 100%;
    aspect-ratio: 1.415 / 1;
    background: #eee;
    border: 2px solid rgb(188, 162, 116);
    border-radius: 10px;
	z-index: 1;
	    position: relative;   /* <-- DAS IST ENTSCHEIDEND! */
}

/* =======================
   Universeller Tooltip
   ======================= */
#tooltip {
    position: absolute;
    pointer-events: none;
    font-size: var(--text-mini, 15px);  /* Fallback falls Variable fehlt */
    background: var(--farbe-beige, #f6efe7);
    color: #353244;
    padding: 7px 14px;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(50, 50, 50, 0.13);
    opacity: 0;
    transition: opacity 0.18s;
    z-index: 1100;
    white-space: pre-line;
    line-height: 1.36;
    border: 1px solid rgba(188, 162, 116, 0.30);
    /* Sanftes Schatten/Glow für bessere Lesbarkeit */
    filter: drop-shadow(0 1px 6px rgba(80,80,60,0.10));
}

#tooltip.show {
    opacity: 1;
    /* Optional für weichere Animation: */
    transition: opacity 0.18s cubic-bezier(.5,1.8,.5,1);
}

/* Optional: kleiner Pfeil unter dem Tooltip */
#tooltip::after {
    content: "";
    position: absolute;
    left: 22px;
    top: 100%;
    width: 0; height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid var(--farbe-beige, #f6efe7);
    filter: drop-shadow(0 1px 2px rgba(50,50,50,0.11));
    /* Damit der Pfeil mit dem Tooltip mitschiebt, ggf. left dynamisch setzen */
    pointer-events: none;
}

	
	
@media (max-width: 768px) {
    #map-container {
        flex-direction: column;
        align-items: center;
    }

    #info-container {
        width: 90%;
        max-height: none;
    }

    #canvas-wrapper {
        width: 100%;
    }
}