:root { /* Definiert wiederverwendbare Farben und Größen. */


    --nacht: #102127; /* Legt die dunkelste Hintergrundfarbe fest. */


    --tief: #163943; /* Legt die dunkle Kartenfarbe fest. */


    --panel: rgba(20, 48, 51, 0.94); /* Färbt halbtransparente Bedienfelder. */


    --panel-hell: rgba(41, 78, 72, 0.94); /* Färbt hervorgehobene Bedienfelder. */


    --gold: #ffd66b; /* Markiert Energie und wichtige Werte. */


    --gruen: #77d36a; /* Markiert positive und aktive Elemente. */


    --text: #f6f3df; /* Legt die Hauptschriftfarbe fest. */


    --leise: #b8c9c1; /* Legt die zurückhaltende Schriftfarbe fest. */


    --rot: #dc6b65; /* Markiert gefährliche Aktionen. */


    --rand: rgba(222, 238, 203, 0.16); /* Zeichnet dezente Begrenzungen. */


} /* Beendet die globalen Farbwerte. */





* { box-sizing: border-box; } /* Bezieht Innenabstände in Größenberechnungen ein. */





html, body { /* Formatiert die gesamte Browserfläche. */


    width: 100%; /* Nutzt die vollständige Browserbreite. */


    height: 100%; /* Nutzt die vollständige Browserhöhe. */


    margin: 0; /* Entfernt den Standardaußenrand. */


    overflow: hidden; /* Verhindert störende Browser-Scrollbalken. */


    background: radial-gradient(circle at 50% 15%, #315f62 0%, var(--nacht) 68%); /* Erzeugt einen atmosphärischen Hintergrund. */


    color: var(--text); /* Verwendet die helle Hauptschriftfarbe. */


    font-family: "Segoe UI", system-ui, sans-serif; /* Verwendet eine gut lesbare Systemschrift. */


} /* Beendet die Seitenformatierung. */





button { /* Gibt allen Schaltflächen eine gemeinsame Grundlage. */


    color: var(--text); /* Färbt Schaltflächentext hell. */


    font: inherit; /* Übernimmt die Seitenschrift. */


    border: 1px solid var(--rand); /* Zeichnet eine dezente Kontur. */


    cursor: pointer; /* Zeigt beim Darüberfahren eine Hand. */


} /* Beendet die gemeinsame Schaltflächenformatierung. */





button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } /* Macht Tastaturfokus sichtbar. */

body:not(.spiel-bereit) #spiel { visibility: hidden; } /* Hält die komplette Spieloberfläche bis zur bewussten Auswahl auf dem Startbildschirm unsichtbar. */
.startbildschirm { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; overflow: auto; padding: 24px; background: radial-gradient(circle at 50% 38%,rgba(72,157,159,.62),rgba(10,35,42,.96) 62%),linear-gradient(#45a8b7,#12353d); } /* Füllt beim Aufruf zuerst den gesamten Browser mit einer ruhigen Meeresstimmung. */
.startbildschirm.verlassen { display: none; } /* Entfernt den Startbildschirm erst nach einer gewählten Aktion vollständig. */
.start-meer { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; opacity: .42; pointer-events: none; } /* Legt die dekorative Insel hinter die bedienbare Startkarte. */
.start-meer::before { content: ""; position: absolute; width: min(82vw,900px); aspect-ratio: 1.8; border-radius: 50%; border: 2px solid rgba(141,225,230,.24); box-shadow: 0 0 0 45px rgba(42,145,164,.18),0 0 0 90px rgba(24,116,145,.15); animation: startWellen 5s ease-in-out infinite alternate; } /* Zeichnet sanft atmende Wasserringe um die Insel. */
.start-insel { position: relative; width: min(66vw,650px); aspect-ratio: 1.75; border: 18px solid #d6c37c; border-radius: 46% 54% 44% 56%; background: radial-gradient(circle at 48% 45%,#83c85d 0 48%,#61aa4d 70%); box-shadow: 0 16px 35px rgba(0,0,0,.35); transform: rotate(-3deg); } /* Zeichnet eine einfache grüne Insel mit Sandküste. */
.start-insel span { position: absolute; font-size: clamp(25px,4vw,48px); filter: drop-shadow(0 5px 3px rgba(0,0,0,.3)); } /* Verteilt sichtbare Bestandteile auf der Startinsel. */
.start-insel span:nth-child(1) { left: 18%; top: 22%; } .start-insel span:nth-child(2) { left: 43%; top: 43%; } .start-insel span:nth-child(3) { right: 18%; top: 28%; } .start-insel span:nth-child(4) { right: 31%; bottom: 12%; } /* Platziert Wald, Haus, Feld und Kaserne locker auf der Insel. */
.start-karte { position: relative; width: min(92vw,560px); padding: clamp(24px,4vw,42px); border: 1px solid rgba(255,214,107,.38); border-radius: 24px; background: linear-gradient(145deg,rgba(18,53,52,.96),rgba(9,34,39,.97)); box-shadow: 0 24px 70px rgba(0,0,0,.52),inset 0 1px rgba(255,255,255,.08); text-align: center; backdrop-filter: blur(8px); } /* Schafft einen klar lesbaren Mittelpunkt über der dekorativen Insel. */
.start-marke { display: flex; justify-content: center; align-items: center; gap: 15px; } /* Ordnet Startlogo und Spielnamen nebeneinander an. */
.start-titel h1 { display: flex; align-items: baseline; margin: 0; color: var(--text); font: 800 clamp(38px,7vw,58px) Georgia,serif; letter-spacing: 1px; } /* Hebt den Spielnamen als Hauptmotiv des Startbildschirms hervor. */
.start-titel p { margin: 2px 0 0; color: var(--leise); text-align: left; } /* Zeigt den vertrauten Untertitel zurückhaltend an. */
.start-leitsatz { margin: 24px auto; color: #d7e4dc; font: 600 clamp(16px,2.2vw,20px) Georgia,serif; } /* Macht das Spielziel direkt verständlich. */
.skin-auswahl { width: min(100%,340px); margin: -8px auto 18px; padding: 11px; border: 1px solid rgba(255,214,107,.22); border-radius: 14px; background: rgba(3,25,29,.38); } /* Gibt der Volksauswahl einen eigenen ruhigen Bereich. */
.skin-auswahl h2 { margin: 0 0 8px; color: var(--gold); font: 700 14px Georgia,serif; } /* Benennt die Auswahl kompakt. */
.skin-auswahl > small { display: block; margin-top: 7px; color: var(--leise); font-size: 10px; } /* Erklärt, dass der Skin keine Spielwerte verändert. */
.skin-karten { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } /* Stellt beide Skins gleichwertig nebeneinander. */
.skin-karte { display: grid; grid-template-columns: 42px 1fr; align-items: center; min-height: 54px; padding: 5px 9px; border-radius: 11px; background: #214846; color: var(--text); text-align: left; } /* Gestaltet jede Auswahl als kleine Vorschaukarte. */
.skin-karte[aria-pressed="true"] { border-color: var(--gold); background: linear-gradient(145deg,#48694c,#28534c); box-shadow: 0 0 0 2px rgba(255,214,107,.15); } /* Kennzeichnet den gespeicherten aktiven Skin eindeutig. */
.skin-karte img { width: 40px; height: 40px; object-fit: contain; } /* Zeigt die transparente Wikingerfigur vollständig. */
.skin-klassisch { display: grid; place-items: center; width: 28px; height: 38px; margin-left: 6px; border-radius: 12px 12px 8px 8px; background: #efb271; color: #30211d; font-size: 12px; } /* Baut eine kleine Vorschau des bisherigen einfachen Pipsels. */
.start-aktionen { display: grid; gap: 10px; width: min(100%,340px); margin: 0 auto; } /* Stapelt die Startknöpfe für Maus und Touch sauber. */
.start-knopf { min-height: 48px; padding: 10px 18px; border-radius: 12px; background: #285956; font-weight: 700; transition: transform .15s,background .15s; } /* Gestaltet jede Startaktion groß und eindeutig. */
.start-knopf:hover:not(:disabled) { transform: translateY(-2px); background: #347069; } /* Gibt beim Berühren eine ruhige sichtbare Rückmeldung. */
.start-knopf.hauptaktion { border-color: #9bdd75; background: linear-gradient(145deg,#5fae5c,#347450); } /* Kennzeichnet Weiterspielen als bevorzugte Aktion. */
.start-knopf.leise-aktion { color: var(--gold); background: rgba(31,76,75,.58); } /* Unterscheidet die Anleitung von einer Spielstandsaktion. */
.start-knopf:disabled { opacity: .42; cursor: not-allowed; } /* Zeigt eindeutig, wenn noch kein Spielstand fortgesetzt werden kann. */
.start-anleitung { margin: 18px 0 0; padding: 16px; border: 1px solid var(--rand); border-radius: 12px; background: rgba(4,25,29,.62); text-align: left; } /* Öffnet die Grundregeln innerhalb derselben Startkarte. */
.start-anleitung h2 { margin: 0 0 10px; color: var(--gold); font: 700 20px Georgia,serif; } /* Überschreibt die Anleitung klar. */
.start-anleitung p { margin: 8px 0; color: #d3ddd8; font-size: 13px; line-height: 1.45; } /* Hält jeden Anleitungsschritt kurz und lesbar. */
.start-version { display: block; margin-top: 19px; color: #88aaa4; letter-spacing: 1px; } /* Zeigt die Alpha-Fassung unaufdringlich an. */
@keyframes startWellen { from { transform: scale(.94); opacity: .55; } to { transform: scale(1.04); opacity: 1; } } /* Bewegt ausschließlich die Wasserringe langsam und ruhig. */



#spiel { /* Ordnet die vollständige Spieloberfläche an. */


    display: grid; /* Aktiviert ein übersichtliches Rasterlayout. */


    grid-template-rows: 82px minmax(0, 1fr) 104px; /* Reserviert Platz für Kopf, Karte und Werkzeuge. */


    width: 100vw; /* Nutzt die volle Fensterbreite. */


    height: 100vh; /* Nutzt die volle Fensterhöhe. */


} /* Beendet das Hauptlayout. */





.kopfzeile { /* Gestaltet den oberen Statusbereich. */
    z-index: 4; /* Hält den Kopf über dem Spielfeld. */


    display: flex; /* Ordnet Marke, Werte und Zeit nebeneinander an. */


    align-items: center; /* Zentriert alle Elemente senkrecht. */


    gap: 24px; /* Schafft Luft zwischen den Bereichen. */


    padding: 10px 18px; /* Schafft Innenabstand. */


    background: linear-gradient(180deg, rgba(13, 35, 39, 0.98), rgba(19, 49, 51, 0.94)); /* Erzeugt eine tiefe Holz-/Meer-Stimmung. */


    border-bottom: 1px solid var(--rand); /* Trennt Kopf und Karte. */


    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3); /* Hebt den Kopf räumlich ab. */
    min-width: 0; /* Erlaubt allen Kopfbereichen, sich an die echte Fensterbreite anzupassen. */
} /* Beendet die Kopfgestaltung. */



.marke { display: flex; align-items: center; gap: 10px; min-width: 165px; } /* Ordnet Logo und Titel an. */


.logo-pipsel { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50% 45% 52% 43%; background: linear-gradient(145deg, #a6e45f, #4ba458); color: #15351d; font: 900 30px Georgia, serif; box-shadow: inset 0 3px 5px rgba(255,255,255,.45), 0 4px 12px rgba(0,0,0,.35); transform: rotate(-5deg); } /* Zeichnet das vorläufige Blatt-Logo. */


.marke h1 { display: flex; align-items: baseline; margin: 0; font: 800 25px Georgia, serif; letter-spacing: .5px; } /* Hält Schrift und den Soldaten an derselben Grundlinie. */
.titel-soldat { position: relative; display: inline-block; align-self: center; width: 13px; height: 27px; margin: -3px 1px -4px; } /* Nimmt genau den schmalen Platz des ersetzten i ein. */
.titel-soldat i { position: absolute; display: block; pointer-events: none; } /* Baut die kleine Figur aus einfachen, klar skalierbaren Formen auf. */
.titel-feder { z-index: 4; top: 0; left: 7px; width: 7px; height: 3px; border-radius: 100% 0; background: #f3c94f; transform: rotate(-28deg); transform-origin: left center; } /* Zeichnet die eindeutig goldene Helmfeder. */
.titel-helm { z-index: 3; top: 4px; left: 2px; width: 10px; height: 6px; border-radius: 7px 7px 1px 1px; background: #77878b; box-shadow: 0 2px 0 #526267; } /* Zeichnet einen kleinen grauen Soldatenhelm ohne Waffe. */
.titel-kopf { z-index: 2; top: 9px; left: 3px; width: 8px; height: 7px; border-radius: 45%; background: #efb985; } /* Zeichnet das Gesicht des Titelsoldaten. */
.titel-kopf::after { content: ""; position: absolute; top: 2px; left: 1px; width: 1.5px; height: 1.5px; border-radius: 50%; background: #27231f; box-shadow: 4px 0 0 #27231f; } /* Ergänzt zwei kleine dunkle Augen unter dem Helm. */
.titel-koerper { z-index: 1; bottom: 0; left: 2px; width: 10px; height: 13px; border-radius: 4px 4px 3px 3px; background: #e8bd63; box-shadow: 0 2px 0 rgba(0,0,0,.22); } /* Zeichnet nur den Körper und lässt bewusst Schwert sowie weitere Waffen weg. */
.marke p { margin: 1px 0 0; color: var(--leise); font-size: 12px; } /* Gestaltet den Untertitel. */





.ressourcen { display: flex; justify-content: center; gap: clamp(4px,.6vw,9px); flex: 1 1 auto; min-width: 0; } /* Verteilt und verkleinert Ressourcenwerte passend zur Fensterbreite. */
.wert { display: flex; align-items: center; gap: clamp(4px,.5vw,8px); min-width: 0; flex: 1 1 108px; max-width: 190px; overflow: hidden; padding: 7px clamp(6px,.7vw,11px); border: 1px solid var(--rand); border-radius: 12px; background: rgba(3, 23, 25, .42); box-shadow: inset 0 1px rgba(255,255,255,.05); } /* Hält auch lange Statustexte innerhalb ihrer anpassbaren Ressourcenkarte. */
.wert > span { font-size: 23px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); } /* Vergrößert das Ressourcensymbol. */


.wert div { display: grid; grid-template-columns: minmax(0,1fr) max-content; column-gap: 7px; align-items: baseline; min-width: 0; } /* Legt Bezeichnung und Stundenrate gemeinsam in die freie obere Zeile. */
.wert small { grid-column: 1; grid-row: 1; color: var(--leise); font-size: 10px; text-transform: uppercase; letter-spacing: .6px; } /* Gestaltet die Ressourcenbezeichnung links neben der Rate. */
.wert strong { grid-column: 1 / 3; grid-row: 2; min-width: 0; font-size: 17px; white-space: nowrap; } /* Gibt Bestand und Maximum darunter die komplette Kartenbreite. */
.wert em { grid-column: 2; grid-row: 1; min-width: max-content; overflow: visible; color: #8ed8a1; font-size: 10px; font-style: normal; white-space: nowrap; } /* Zeigt die stündliche Rate rechts neben Holz, Nahrung, Eisen oder Energie. */
.energie-wert strong { color: var(--gold); } /* Markiert Energie goldfarben. */

.wert.unbekannt { opacity: .72; border-style: dashed; } /* Lässt die geheime Ressource sichtbar, ohne ihre Art oder Menge zu verraten. */

.wert.unbekannt strong { color: #aab7b4; font-size: 13px; } /* Hält den unbekannten Namen bewusst zurückhaltend. */




.zeitsteuerung { display: flex; flex: 0 0 auto; gap: 5px; align-items: center; white-space: nowrap; } /* Hält Pause, Tempo und Testknopf gemeinsam sichtbar. */
.zeitsteuerung button { min-width: 35px; height: 34px; border-radius: 8px; background: #244a4d; } /* Gestaltet Zeitknöpfe kompakt. */


.zeitsteuerung button:hover, .zeitsteuerung button.aktiv { color: #18311f; background: var(--gold); } /* Markiert aktive und berührte Zeitknöpfe. */
.zeitsteuerung .test-knopf { min-width: 42px; color: #15351d; background: #8ed8a1; font-weight: 800; } /* Kennzeichnet die vorübergehende Rohstoff-Testhilfe grün. */
.zeitsteuerung .test-knopf:hover { background: #b7efae; } /* Hebt den Testknopf beim Berühren sichtbar hervor. */



.hauptbereich { display: grid; grid-template-columns: minmax(0, 1fr) 248px; min-height: 0; } /* Teilt Karte und Seitenleiste auf. */


.kartenbereich { position: relative; min-width: 0; overflow: hidden; background: #287e9b; } /* Definiert den sichtbaren Kartenausschnitt. */


#spielfeld { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; } /* Lässt die Zeichenfläche den Kartenraum füllen. */


#spielfeld:active { cursor: grabbing; } /* Zeigt beim Verschieben eine geschlossene Hand. */





.meldung { position: absolute; top: 15px; left: 50%; z-index: 3; max-width: min(620px, 80%); padding: 10px 18px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(14, 34, 35, .9); box-shadow: 0 5px 18px rgba(0,0,0,.25); opacity: 0; transform: translate(-50%, -10px); transition: .25s ease; pointer-events: none; text-align: center; } /* Positioniert kurze Spielmeldungen. */


.meldung.sichtbar { opacity: 1; transform: translate(-50%, 0); } /* Blendet eine aktuelle Meldung ein. */


.kamera-hilfe { position: absolute; right: 12px; bottom: 10px; padding: 6px 10px; border-radius: 8px; color: rgba(255,255,255,.78); background: rgba(4,25,31,.58); font-size: 11px; pointer-events: none; } /* Zeigt eine dezente Bedienhilfe. */





.seitenleiste { z-index: 2; display: flex; flex-direction: column; gap: 9px; min-height: 0; padding: 12px; overflow-y: auto; background: linear-gradient(180deg, rgba(24,57,57,.98), rgba(13,38,41,.98)); border-left: 1px solid var(--rand); box-shadow: -8px 0 25px rgba(0,0,0,.18); } /* Gestaltet die rechte Informationsleiste. */


.karte-info { padding: 11px; border: 1px solid var(--rand); border-radius: 12px; background: rgba(2,23,26,.32); } /* Gestaltet eine Informationskarte. */


.karte-info h2 { margin: 0 0 9px; color: var(--gold); font: 700 15px Georgia, serif; } /* Gestaltet Überschriften der Seitenkarten. */
.ki-status { border-color: rgba(125,190,240,.42); background: rgba(31,65,88,.42); } /* Hebt die getrennte blaue KI-Nachbarinsel sichtbar von den eigenen Werten ab. */
.ki-status h2 { color: #a9d9ff; } /* Kennzeichnet die Computerinsel mit derselben blauen Farbe wie ihre Platzhalter-Pipsel. */
.ki-status > small { display: block; margin-top: 7px; color: #a9bdc9; font-size: 10px; } /* Erklärt den friedlichen Testzustand zurückhaltend. */
.volk-zeile { display: flex; justify-content: space-between; padding: 3px 0; color: var(--leise); font-size: 12px; } /* Ordnet Bevölkerungswerte an. */


.volk-zeile strong { color: var(--text); } /* Hebt Bevölkerungszahlen hervor. */


.karte-info label { display: flex; justify-content: space-between; margin-top: 7px; color: var(--leise); font-size: 11px; } /* Gestaltet Bedürfnisbeschriftungen. */


.balken { height: 7px; margin-top: 3px; overflow: hidden; border-radius: 9px; background: #102c2f; } /* Zeichnet den Hintergrund eines Bedürfnisbalkens. */


.balken i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #e5a955, #77d36a); transition: width .3s ease; } /* Zeichnet den farbigen Füllstand. */


.ereignisse { display: flex; flex: 1; flex-direction: column; min-height: 210px; overflow: hidden; } /* Gibt der Chronik nach dem Entfernen der Spielstandknöpfe deutlich mehr Raum. */

.chronik-filter { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: -2px 0 8px; } /* Ordnet alle sechs Ereignisfilter kompakt nebeneinander an. */

.chronik-filter label { position: relative; display: grid; place-items: center; min-width: 0; height: 29px; margin: 0; border: 1px solid var(--rand); border-radius: 7px; background: #16383a; cursor: pointer; } /* Zeichnet jeden Filter als kleinen Symbolkasten. */

.chronik-filter label:hover { border-color: rgba(255,214,107,.65); } /* Hebt den berührten Filter hervor. */

.chronik-filter input { position: absolute; opacity: 0; pointer-events: none; } /* Verbirgt nur das normale Kästchen und erhält die Bedienbarkeit des Häkchens. */

.chronik-filter span { font-size: 15px; opacity: .35; filter: grayscale(1); } /* Zeigt ausgeschaltete Ereignisarten zurückhaltend. */

.chronik-filter input:checked + span { opacity: 1; filter: none; } /* Färbt ein eingeschaltetes Ereignissymbol vollständig. */

.chronik-filter input:checked + span::after { content: "✓"; position: absolute; right: 2px; bottom: 0; color: var(--gruen); font: 700 9px sans-serif; } /* Ergänzt ein kleines eindeutiges Häkchen. */

#ereignisliste { min-height: 0; margin: 0; padding: 0 6px 0 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #6c9b7c #143437; scrollbar-width: thin; list-style: none; } /* Macht die Inselchronik unabhängig scrollbar. */

#ereignisliste::-webkit-scrollbar { width: 8px; } /* Legt eine schmale Chronik-Scrollleiste fest. */

#ereignisliste::-webkit-scrollbar-track { border-radius: 8px; background: #143437; } /* Färbt den Hintergrund der Scrollleiste. */

#ereignisliste::-webkit-scrollbar-thumb { border-radius: 8px; background: #6c9b7c; } /* Färbt den beweglichen Teil der Scrollleiste. */

#ereignisliste li { padding: 5px 0 5px 11px; border-bottom: 1px dashed rgba(255,255,255,.08); color: var(--leise); font-size: 11px; line-height: 1.25; position: relative; } /* Gestaltet einen Chronikeintrag. */


#ereignisliste li::before { content: "•"; position: absolute; left: 0; color: var(--gold); } /* Fügt einen goldenen Ereignispunkt hinzu. */





.werkzeugleiste { z-index: 4; display: flex; justify-content: center; align-items: stretch; gap: clamp(4px,.4vw,8px); min-width: 0; min-height: 0; padding: 7px clamp(5px,.6vw,11px) 9px; overflow-x: auto; overflow-y: hidden; background: linear-gradient(0deg, #102b2d, #1c4544); border-top: 1px solid var(--rand); box-shadow: 0 -8px 24px rgba(0,0,0,.25); } /* Hält die Werkzeugpalette sauber innerhalb der festen unteren Bildschirmzeile. */
.werkzeug { position: relative; display: flex; flex: 1 1 130px; flex-direction: column; justify-content: center; align-items: center; min-width: 104px; max-width: 180px; min-height: 0; gap: 2px; padding: 5px 6px; border-radius: 12px; background: linear-gradient(145deg, #315f56, #244b49); text-align: center; box-shadow: inset 0 1px rgba(255,255,255,.08), 0 3px 8px rgba(0,0,0,.22); transition: transform .15s ease, border-color .15s ease, background .15s ease; } /* Stapelt Symbol, Namen und Kosten sauber übereinander und vermeidet unruhige Zeilenumbrüche. */
.werkzeug:hover:not(:disabled) { transform: translateY(-3px); border-color: rgba(255,214,107,.7); } /* Hebt ein berührtes Werkzeug an. */


.werkzeug.aktiv { border-color: var(--gold); background: linear-gradient(145deg, #567649, #31594d); box-shadow: 0 0 0 2px rgba(255,214,107,.2), 0 4px 12px rgba(0,0,0,.3); } /* Markiert das gewählte Werkzeug. */


.werkzeug > span { flex: 0 0 auto; font-size: clamp(20px,1.5vw,27px); line-height: 1; } /* Hält jedes Werkzeugsymbol kompakt über dem Namen. */
.werkzeug > .ritterhelm-icon { position: relative; display: inline-block; width: 31px; height: 29px; overflow: visible; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); } /* Reserviert die normale Symbolgröße für den gezeichneten Ritterhelm. */
.ritterhelm-icon i { position: absolute; display: block; pointer-events: none; } /* Setzt die einzelnen Metallteile des Ritterhelms zusammen. */
.ritterhelm-kamm { z-index: 1; top: 0; left: 13px; width: 5px; height: 7px; border-radius: 3px 3px 0 0; background: #c6a84f; box-shadow: 0 0 3px rgba(255,215,90,.45); } /* Zeichnet einen kleinen goldfarbenen Helmkamm als mittelalterliches Erkennungsmerkmal. */
.ritterhelm-schale { z-index: 2; top: 4px; left: 4px; width: 23px; height: 18px; border: 1px solid #3f4c50; border-radius: 12px 12px 4px 4px; background: linear-gradient(110deg,#839398 0%,#d1d9d8 48%,#65757a 100%); } /* Zeichnet die gewölbte Metallschale des Ritterhelms. */
.ritterhelm-visier { z-index: 4; top: 12px; left: 2px; width: 27px; height: 9px; border: 1px solid #364247; border-radius: 2px 2px 5px 5px; background: repeating-linear-gradient(90deg,#56666a 0 3px,#192326 3px 5px); box-shadow: inset 0 1px #b9c4c4; } /* Zeichnet ein geschlossenes dunkles Visier mit mehreren schmalen Sehschlitzen. */
.ritterhelm-nacken { z-index: 3; bottom: 1px; left: 6px; width: 19px; height: 9px; border-radius: 0 0 5px 5px; background: linear-gradient(90deg,#64757a,#aebabb,#596a6f); border-bottom: 2px solid #344146; } /* Ergänzt den tiefen Nackenschutz eines Ritterhelms. */
.werkzeug strong { max-width: 100%; overflow: hidden; font-size: clamp(10px,.68vw,12px); line-height: 1.1; white-space: nowrap; text-overflow: ellipsis; } /* Hält Werkzeugnamen in genau einer sauberen Zeile. */
.werkzeug small { max-width: 100%; overflow: hidden; color: var(--gold); font-size: clamp(9px,.62vw,11px); line-height: 1.1; white-space: nowrap; text-overflow: ellipsis; } /* Hält auch Kosten und Erklärungen in genau einer Zeile. */
.werkzeug.gesperrt { opacity: .42; cursor: not-allowed; } /* Kennzeichnet noch gesperrte Werkzeuge. */
.werkzeug.unbekannt-gesperrt > * { visibility: hidden; } /* Verrät bei einer noch unerforschten Fähigkeit weder Symbol noch Namen oder Kosten. */
.werkzeug.unbekannt-gesperrt::after { content: "🔒"; position: absolute; inset: 0; display: grid; place-items: center; visibility: visible; font-size: clamp(25px,2vw,34px); opacity: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); } /* Zeigt bis zur Erforschung ausschließlich ein gut erkennbares Schloss. */
.forschung-knoten .forschung-schloss { display: grid; place-items: center; width: 100%; height: 100%; font-size: 34px; filter: grayscale(.2); } /* Zeigt in unbekannten Forschungskarten ausschließlich ein mittiges Schloss. */


.forschung-fenster { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 24px; background: rgba(3,16,20,.78); opacity: 0; pointer-events: none; transition: opacity .2s ease; } /* Legt den geschlossenen Forschungsbaum über die Insel. */

.forschung-fenster.offen { opacity: 1; pointer-events: auto; } /* Macht den Forschungsbaum sichtbar und bedienbar. */

.forschung-dialog { display: grid; grid-template-rows: auto minmax(0,1fr); width: min(1120px,96vw); height: min(720px,90vh); overflow: hidden; border: 1px solid rgba(255,214,107,.35); border-radius: 18px; background: linear-gradient(160deg,#17383b,#0b252a); box-shadow: 0 24px 80px rgba(0,0,0,.58); } /* Gestaltet das große Forschungsfenster hochwertig. */

.forschung-dialog > header { display: flex; justify-content: space-between; gap: 20px; padding: 16px 20px; border-bottom: 1px solid var(--rand); background: rgba(4,22,25,.5); } /* Ordnet Titel, Erklärung und Schließknopf an. */

.forschung-dialog h2 { margin: 0; color: var(--gold); font: 700 24px Georgia,serif; } /* Hebt den Forschungsnamen hervor. */

.forschung-dialog p { margin: 4px 0 0; color: var(--leise); font-size: 12px; } /* Erklärt das Ratenzahlungsprinzip knapp. */

#forschungSchliessen { width: 40px; height: 40px; border-radius: 10px; background: #244a4d; } /* Gestaltet den gut erreichbaren Schließknopf. */

.forschungsbaum { display: grid; grid-template-columns: repeat(2,minmax(390px,1fr)); gap: 24px; padding: 24px; overflow: auto; } /* Stellt die beiden gemeinsamen Forschungswurzeln nebeneinander dar. */

.forschungs-bereich { min-width: 390px; } /* Hält jeden vollständigen Wurzelbereich lesbar. */

.forschungs-wurzel { position: relative; width: 290px; margin: 0 auto 34px; } /* Gibt Holzbearbeitung und Feuer unabhängig von Text und Spaltenbreite exakt dieselbe Größe. */

.forschungs-wurzel .forschung-knoten { width: 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere; } /* Verhindert, dass die längere Feuerbeschreibung ihre feste Karte verbreitert. */

.forschungs-wurzel::after { content: ""; position: absolute; left: 50%; bottom: -24px; width: 52%; height: 23px; border-top: 2px solid rgba(255,214,107,.48); border-left: 2px solid rgba(255,214,107,.48); border-right: 2px solid rgba(255,214,107,.48); transform: translateX(-50%); } /* Zeichnet die echte Aufteilung einer Wurzel in zwei Äste. */

.forschungs-zweige { display: grid; grid-template-columns: repeat(2,minmax(175px,1fr)); gap: 18px; } /* Ordnet beide Entwicklungswege unter derselben Wurzel an. */

.forschungs-ast { display: flex; flex-direction: column; gap: 20px; min-width: 0; padding-top: 2px; } /* Stapelt die Forschungen jedes Astes ohne überflüssige Zwischenüberschrift. */

.forschung-knoten { position: relative; min-height: 76px; padding: 10px; border: 1px solid var(--rand); border-radius: 12px; background: linear-gradient(145deg,#2a5652,#1d4142); text-align: left; } /* Zeichnet eine einzelne Forschung als Karte. */

.forschungs-ast > .forschung-knoten::before { content: "↓"; position: absolute; top: -20px; left: 50%; color: var(--gold); transform: translateX(-50%); } /* Verbindet jeden Ast von der gemeinsamen Wurzel bis zum Ende. */

.forschungs-endgabel { position: relative; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding-top: 16px; } /* Stellt Schwert und Rüstung gleichrangig nebeneinander. */

.forschungs-endgabel::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 12px; border-top: 2px solid rgba(255,214,107,.48); border-left: 2px solid rgba(255,214,107,.48); border-right: 2px solid rgba(255,214,107,.48); } /* Zeichnet die Gabel von der Kaserne zu beiden Militärausbauten. */

.forschungs-endgabel .forschung-knoten { min-height: 72px; padding: 8px; } /* Hält beide Endknoten kompakt und lesbar. */

.forschungs-astgabel { position: relative; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding-top: 16px; } /* Teilt nach Bessere Angel in den Feld-Pflug-Weg und den Förster auf. */

.forschungs-astgabel::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 12px; border-top: 2px solid rgba(255,214,107,.48); border-left: 2px solid rgba(255,214,107,.48); border-right: 2px solid rgba(255,214,107,.48); } /* Zeichnet die Landwirtschaftsgabel sichtbar zu beiden Wegen. */

.forschungs-astgabel > .forschungs-ast { gap: 20px; padding-top: 0; } /* Stapelt unter dem Feld zusätzlich den Pflug, während der Förster allein bleibt. */

.forschung-knoten strong { display: block; color: var(--text); font-size: 13px; } /* Zeigt den Forschungsnamen. */

.forschung-knoten small { display: block; margin-top: 5px; color: var(--leise); font-size: 10px; line-height: 1.35; } /* Zeigt Kosten und Fortschritt. */

.forschung-knoten .wirkung { min-height: 27px; color: #c9d7d0; } /* Gibt den beiden Startforschungen gleich viel Raum für ihre kurze Wirkungsbeschreibung. */

.forschung-knoten.verfuegbar { border-color: rgba(255,214,107,.58); cursor: pointer; } /* Kennzeichnet eine bezahlbare Forschung. */

.forschung-knoten.verfuegbar:hover { background: linear-gradient(145deg,#49684d,#2b5350); transform: translateY(-1px); } /* Hebt eine berührte Forschung leicht an. */

.forschung-knoten.fertig { border-color: rgba(119,211,106,.75); background: linear-gradient(145deg,#315f44,#25463f); } /* Markiert eine abgeschlossene Forschung grün. */

.forschung-knoten.gesperrt { opacity: .48; cursor: not-allowed; } /* Hält spätere oder noch nicht erreichbare Forschungen sichtbar, aber gesperrt. */

.forschung-knoten .status { color: var(--gold); } /* Hebt Fortschritt oder Sperrgrund hervor. */




@media (max-width: 1050px) { /* Passt die Oberfläche an kleinere Fenster an. */
    #spiel { grid-template-rows: auto minmax(0, 1fr) 92px; } /* Verkleinert die Werkzeugzone. */


    .kopfzeile { gap: 10px; padding: 7px 10px; } /* Reduziert Abstände im Kopf. */


    .marke p, .wert small { display: none; } /* Spart auf kleineren Fenstern Platz, lässt die wichtigen grünen Stundenwerte aber sichtbar. */
    .wert { min-width: 78px; padding: 7px; } /* Verkleinert Ressourcenkarten. */


    .werkzeug { min-width: 96px; padding: 5px; } /* Verkleinert Werkzeuge und erhält die saubere senkrechte Ordnung. */
    .werkzeug > span { font-size: 22px; } /* Verkleinert Werkzeugsymbole. */

    .forschungsbaum { grid-template-columns: 1fr; } /* Stapelt die beiden vollständigen Wurzelbereiche auf kleineren Fenstern. */

} /* Beendet die Anpassung für kleinere Fenster. */

@media (max-width: 1900px) { /* Verhindert Überlagerungen auf üblichen Full-HD-Fenstern mit Browserrahmen. */
    .ressourcen .wert:last-child em { display: none; } /* Blendet nur den langen Bevölkerungshinweis aus; die Bevölkerungszahl bleibt vollständig sichtbar. */
} /* Beendet die Full-HD-Anpassung. */



@media (max-width: 780px) { /* Passt das Spiel an schmale Tabletfenster an. */


    .hauptbereich { grid-template-columns: 1fr; } /* Gibt der Karte die volle Breite. */


    .seitenleiste { display: none; } /* Blendet die Seiteninformationen vorläufig aus. */


    .marke { min-width: auto; } /* Lässt die Marke schmaler werden. */


    .marke h1 { font-size: 18px; } /* Verkleinert den Spielnamen. */


    .logo-pipsel { width: 38px; height: 38px; font-size: 23px; } /* Verkleinert das Logo. */


    .werkzeugleiste { justify-content: flex-start; overflow-x: auto; } /* Erlaubt horizontales Scrollen der Werkzeuge. */

    .forschungs-bereich { min-width: 330px; } /* Bewahrt die sichtbare Verzweigung auch auf schmalen Fenstern. */

} /* Beendet die Tablet-Anpassung. */