/* ========================================================== Mut im Gepaeck - Zimmer-Stil fuer die Etagen-Unterseiten Wird NACH style.css eingebunden und wirkt nur auf (zimmer-eg = Erdgeschoss, zimmer-1 = 1. Etage, zimmer-2 = 2. Etage, zimmer-3 = Dachgeschoss). Ein neues Zimmer = neue Klasse .zimmer-N, die nur die Zimmer-Variablen setzt (siehe Abschnitt 1). Holz, Leisten, Rahmen und Schilder sind in allen Zimmern gleich. Aufbau siehe natuerlich-mensch.html. Aufbau: 1 Variablen · 2 Grundlage · 3 Decke (Kopf) 4 Wand mit Tapete und Licht · 5 Schild und Tafel 6 Leiste (Wand/Footer) · 7 Teppich mit Zurueck-Link 8 Bewegung (nur wenn erlaubt) ========================================================== */ /* ---- 1. Variablen ---- */ /* Wandfarben zum Wiederverwenden fuer weitere Zimmer */ :root { --wand-salbei: #8CBF9D; /* jetzt Zimmer EG (mit Streifen rgba(255,255,255,.13), Schatten rgba(25,55,35,.38)) */ } /* Gleich in allen Zimmern (dasselbe Haus) */ .room { --room-wood: #8A5A3A; /* Rahmen und Schild */ --room-wood-inner: #B07A4F; /* Innenkante der Rahmen */ --room-panel: #FBF3E2; /* Stuckleiste (Kopf) */ --room-paper: #FFFDF7; /* Grund der Tafel */ --room-ink: #3B2A1A; --room-brass-ink: #2A1A0C; /* Schrift auf dem Messingschild */ --room-light-pos: 85% 22%; /* woher das Licht kommt */ --room-edge: rgba(138, 90, 58, 0.45); /* Zimmer-Variablen: Standardwerte = frueheres Salbei-Zimmer, .zimmer-N ueberschreibt */ --room-wall: var(--wand-salbei); /* Wandfarbe */ --room-stripe: rgba(255, 255, 255, 0.13); /* Streifenfarbe */ --room-shade: rgba(25, 55, 35, 0.38); /* Vignette und Schattenlinien */ --room-rug: #E8C4A0; /* Teppich */ --room-rug-trim: #C98358; /* Zierlinien im Teppich */ --room-rug-edge: var(--room-rug); /* aeusserer Rand des Teppichs */ --room-brass: #D9A441; /* Messingschild */ --room-light: rgba(255, 244, 170, 0.38); /* Lichtfarbe */ } /* Zimmer EG (Erdgeschoss, Willkommen): Salbeigruen */ .zimmer-eg { --room-wall: var(--wand-salbei); --room-stripe: rgba(255, 255, 255, 0.13); --room-shade: rgba(25, 55, 35, 0.38); --room-rug: #E8C4A0; --room-rug-trim: #C98358; --room-rug-edge: #E8C4A0; --room-brass: #D9A441; --room-light: rgba(255, 244, 170, 0.38); } /* Zimmer 1 (1. Etage, Natuerlich Mensch!): Butterblumengelb */ .zimmer-1 { --room-wall: #ECD28A; --room-stripe: #F3E0A8; --room-shade: #D4B866; --room-rug: #E8C4A0; --room-rug-trim: #C98358; --room-rug-edge: #E8C4A0; --room-brass: #B9822B; --room-light: rgba(255, 246, 216, 0.5); } /* Zimmer 2 (2. Etage, Assistenz Stammtisch): Taubenblau */ .zimmer-2 { --room-wall: #9CB8CC; --room-stripe: #B3CBDB; --room-shade: #7F9FB5; --room-rug: #E8C4A0; --room-rug-trim: #C98358; --room-rug-edge: #E8C4A0; --room-brass: #D9A441; --room-light: rgba(255, 244, 170, 0.38); } /* Zimmer 3 (Dachgeschoss, Ueber mich): Flieder */ .zimmer-3 { --room-wall: #CDB9E3; --room-stripe: #DDCFEE; --room-shade: #A78FC6; --room-rug: #E8C4A0; --room-rug-trim: #C98358; --room-rug-edge: #E8C4A0; --room-brass: #D9A441; --room-light: rgba(255, 246, 216, 0.45); } /* ---- 2. Grundlage ---- */ /* Hinter der Wand liegt die Footer-Farbe (--footer aus style.css), z. B. beim Ueberscrollen. */ body.room { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; background: var(--footer); color: var(--room-ink); } .room main { display: flex; flex-direction: column; flex: 1 0 auto; } .room .site-header, .room .site-footer { flex: none; } /* ---- 3. Decke: Kopf als Stuckleiste ---- */ .room .site-header { position: relative; z-index: 5; background: linear-gradient(180deg, #FFFBF1 0%, var(--room-panel) 60%, #F2E4C6 100%); border-bottom: 4px solid #E6D2A8; box-shadow: 0 4px 0 #F7ECD2, 0 12px 16px -6px rgba(50, 35, 20, 0.4); } /* Zahnschnitt unter der Leiste */ .room .site-header::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% + 4px); height: 8px; background: repeating-linear-gradient(90deg, #F2E4C6 0 9px, transparent 9px 14px); filter: drop-shadow(0 3px 2px rgba(50, 35, 20, 0.25)); pointer-events: none; } .room .site-name { color: var(--room-ink); } .room .top-nav a { background: #fff; border-color: #E3CFA5; } .room .top-nav a:hover { border-color: var(--room-wood-inner); } .room .top-nav a[aria-current="page"] { background: #E9A77B; border-color: #C98358; } /* ---- 4. Wand mit Tapete und Licht ---- */ .room-wall { position: relative; display: flex; flex-direction: column; flex: 1 0 auto; background: radial-gradient(ellipse at 50% 45%, transparent 55%, var(--room-shade) 100%), repeating-linear-gradient(90deg, var(--room-stripe) 0 3px, transparent 3px 30px), repeating-linear-gradient(90deg, transparent 0 15px, var(--room-shade) 15px 16px, transparent 16px 30px), var(--room-wall); box-shadow: 0 5px 5px -2px rgba(20, 10, 0, 0.4); } .room-wall::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 60% 75% at var(--room-light-pos), var(--room-light), transparent 72%); pointer-events: none; } .room-wall-inner { position: relative; z-index: 1; flex: 1 1 auto; width: 100%; max-width: 46rem; margin: 0 auto; padding: 4.2rem 1rem 3rem; display: flex; flex-direction: column; gap: 3rem; } /* ---- 5. Schild und Tafel ---- */ /* Titelschild: Holzschild an zwei Schnueren */ .room-sign { position: relative; align-self: center; width: min(100%, 36rem); padding: 2rem 1.4rem 1.5rem; border: 12px solid var(--room-wood); border-radius: 6px; background: repeating-linear-gradient(180deg, transparent 0 0.55rem, rgba(138, 90, 58, 0.09) 0.55rem 0.62rem, transparent 0.62rem 1.3rem), #EFD6B4; box-shadow: inset 0 0 0 3px var(--room-wood-inner), inset 0 3px 8px rgba(80, 45, 20, 0.3), 0 12px 22px rgba(30, 20, 10, 0.38); text-align: center; } .room-sign::before, .room-sign::after { content: ""; position: absolute; top: calc(-2.4rem - 12px); width: 14px; height: 2.4rem; background: radial-gradient(circle at 35% 30%, #E4E0D8 0 2px, #857F74 3px, #4D4941 6.5px, transparent 7px) 0 0 / 14px 14px no-repeat, linear-gradient(90deg, transparent 6px, #B58F5E 6px 8px, transparent 8px); } .room-sign::before { left: 12%; } .room-sign::after { right: 12%; } .room-sign h1 { margin: 0.4rem 0 0.4rem; font-size: clamp(1.75rem, 5vw, 2.7rem); color: var(--room-ink); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55); } .room-sign .lead { color: var(--room-ink); font-weight: 600; } /* Messingschild "N. Etage": Farbe kommt aus --room-brass */ .room .floor-tag { position: absolute; top: -1.55rem; left: 50%; transform: translateX(-50%); margin: 0; padding: 0.2rem 1.5rem; border: 1px solid #674717; border-color: color-mix(in srgb, var(--room-brass) 40%, var(--room-brass-ink)); border-radius: 5px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, 0.03) 100%), var(--room-brass); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.55); color: var(--room-brass-ink); font-size: 0.9rem; white-space: nowrap; } .room .floor-tag::before, .room .floor-tag::after { content: ""; position: absolute; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F3DFA3, #8A6414); } .room .floor-tag::before { left: 0.45rem; } .room .floor-tag::after { right: 0.45rem; } /* Tafel: heller Grund mit dezentem Holzrahmen, Haupttext und Kontakt */ .room-board { padding: 1.8rem 2rem 2rem; border: 5px solid var(--room-wood); border-radius: 6px; background: var(--room-paper); box-shadow: inset 0 0 0 1px var(--room-wood-inner), 0 8px 18px rgba(30, 20, 10, 0.3); color: var(--room-ink); } .room .placeholder { margin: 0; padding: 0; border-radius: 0; background: none; color: var(--room-ink); } .room-board h2 { margin: 1.6rem 0 0.5rem; padding-top: 1.4rem; border-top: 1px solid var(--room-edge); font-size: 1.45rem; color: var(--room-ink); } /* Steht eine Ueberschrift am Anfang der Tafel, braucht sie keine Trennlinie */ .room-board h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } /* Zusatztafel an der Wand (z. B. fuer Termine): haengt eigenstaendig unter der Tafel, in jedem Zimmer einsetzbar (z. B. 1. und 2. Etage). */ .wandtafel { position: relative; align-self: center; width: min(90%, 24rem); margin: -0.6rem 0 0; padding: 1.5rem 1.4rem; background: linear-gradient(155deg, #C79A63 0%, #A9773F 100%); border: 7px solid var(--room-wood); border-radius: 6px; box-shadow: 0 3px 4px rgba(20, 12, 4, 0.48), 0 16px 24px 2px rgba(20, 12, 4, 0.3); } .wandtafel h2 { margin: 0 0 0.4rem; padding: 0; border: 0; font-size: 1.15rem; color: #F5EDE0; text-shadow: 0 1px 2px rgba(43, 24, 16, 0.5); } .wandtafel .placeholder { color: #F5EDE0; text-shadow: 0 1px 2px rgba(43, 24, 16, 0.5); font-weight: 600; } /* Linkfarbe: warmes Gold, setzt sich vom cremefarbenen Fliesstext ab und bleibt dank text-shadow auch auf dem Verlauf gut lesbar */ .wandtafel a { color: #F6C453; text-decoration: underline; text-underline-offset: 0.15em; text-shadow: 0 1px 2px rgba(43, 24, 16, 0.5); } .wandtafel a:hover, .wandtafel a:focus-visible { color: #FFDD8A; } @media (max-width: 699px) { .wandtafel { width: min(94%, 22rem); padding: 1.3rem 1.1rem; border-width: 6px; } .wandtafel h2 { font-size: 1.05rem; } } /* ---- 6. Leiste zwischen Wand und Footer (5 px) ---- */ /* Der Footer selbst bleibt wie auf der Startseite (style.css). */ .room-baseboard { position: relative; z-index: 1; flex: none; height: 5px; background: linear-gradient(180deg, #F6EAD0 0%, #EBD9B4 100%); } /* ---- 7. Teppich mit dem Zurueck-Link auf der Wand ---- */ .room-back { text-align: center; } .room .room-rug { display: inline-block; margin: 0; padding: 1.3rem 3.2rem; border-radius: 50%; background: var(--room-rug); /* Rand, Fuellung und Zierlinien aus den Teppich-Variablen; erste Zeile = Fallback ohne color-mix */ box-shadow: inset 0 0 0 3px var(--room-rug-edge), inset 0 0 0 6px var(--room-rug), inset 0 0 0 9px var(--room-rug-trim), inset 0 0 0 15px var(--room-rug), inset 0 0 0 17px var(--room-rug-trim), 0 2px 0 rgba(0, 0, 0, 0.35), 0 8px 14px rgba(0, 0, 0, 0.38); box-shadow: inset 0 0 0 3px var(--room-rug-edge), inset 0 0 0 6px var(--room-rug), inset 0 0 0 9px var(--room-rug-trim), inset 0 0 0 15px var(--room-rug), inset 0 0 0 17px color-mix(in srgb, var(--room-rug-trim) 55%, transparent), 0 2px 0 rgba(0, 0, 0, 0.35), 0 8px 14px rgba(0, 0, 0, 0.38); color: var(--room-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; } .room .room-rug:hover { filter: brightness(1.05); } .room .room-rug:focus-visible { outline: 3px solid #F9F1E0; outline-offset: 5px; border-radius: 50%; } /* ---- schmale Bildschirme: Deko vereinfachen ---- */ @media (max-width: 699px) { .room-wall-inner { padding-top: 3.6rem; gap: 2.6rem; } .room-sign { border-width: 9px; padding: 1.9rem 1rem 1.2rem; } .room-sign::before, .room-sign::after { top: calc(-2.4rem - 9px); } .room-board { padding: 1.2rem 1.1rem 1.4rem; border-width: 4px; } .room-board h2 { margin-top: 1.2rem; padding-top: 1.1rem; font-size: 1.25rem; } .room .room-rug { padding: 1.2rem 2.4rem; } } /* ---- 8. Bewegung: nur wenn der Browser sie nicht ausdruecklich abwaehlt ---- */ @media (prefers-reduced-motion: no-preference) { .room-wall::before { animation: room-light 11s ease-in-out infinite alternate; } .room .room-rug { transition: filter 0.2s ease; } } @keyframes room-light { from { opacity: 0.8; } to { opacity: 1; } }