@import url("https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap");
/* Mittelteil als echtes HTML, nicht als großes Hintergrundbild */
.museum-start { --papier:#efddbc; --braun:#49301e; --rahmen:#97704b; --rot:#842c25; }
 .museum-start, .museum-start * { box-sizing:border-box; }

.museum-start {
  color:var(--braun); width:100%; min-width:0; overflow:hidden;
  background-color:#efddbc;
  background-image:radial-gradient(ellipse at 20% 20%,rgba(255,249,224,.60),transparent 48%),
   radial-gradient(ellipse at 85% 75%,rgba(162,104,48,.12),transparent 55%),
   repeating-linear-gradient(35deg,rgba(90,55,20,.018) 0px,rgba(90,55,20,.018) 1px,transparent 1px,transparent 4px);
  font-family:Georgia,"Times New Roman",serif;
}
.willkommen { max-width:1320px; margin:auto; padding:24px 24px 22px; display:grid;
 grid-template-columns:1.2fr 1.2fr .42fr; gap:clamp(18px,3vw,55px); align-items:center; }
.willkommen-text { max-width:450px; }
.willkommen h1 { margin:0 0 8px; font-family:"Great Vibes","URW Chancery L",cursive; font-weight:400;
 font-size:clamp(38px,4.5vw,65px); line-height:1.12; white-space:nowrap; }
.willkommen-text>p:not(.motto) { font-size:clamp(16px,1.25vw,20px); line-height:1.42; font-style:italic; margin:0; }
.zierlinie { display:flex; align-items:center; gap:7px; margin:16px 0 3px; color:#7e5734; }
.zierlinie:before,.zierlinie:after { content:""; flex:1; height:1px; background:#97704b; }
.zierlinie span { font-size:25px; line-height:1; }
.motto { font-family:"Great Vibes","URW Chancery L",cursive; font-size:clamp(24px,2.4vw,34px); margin:0; text-align:center; }
.historisches-foto { position:relative; margin:0; transform:rotate(-2deg); filter:drop-shadow(2px 5px 3px #5b422c50); }
.historisches-foto img { display:block; width:100%; height:auto; border:5px solid #ead3a8; outline:1px solid #aa8b63; }
.historisches-foto figcaption { position:absolute; right:7px; bottom:8px; padding:4px 9px;
 background:#ead5ad; color:#49301e; font-size:clamp(10px,1vw,13px); transform:rotate(1deg); }
.leitworte { text-align:center; font-family:"Great Vibes","URW Chancery L",cursive;
 font-size:clamp(26px,2.8vw,39px); line-height:1.18; font-weight:400; }
.leitworte .stern { display:block; font-family:Georgia,serif; font-size:46px; color:#9d6e34; margin-bottom:5px; }
.leitworte div { border-left:1px solid #86623e; padding:5px 0 5px 12px; }
.leitworte-strich { display:block; width:65%; border-top:1px solid #9d7851; margin:14px auto 0; }
.themen { padding:20px clamp(16px,6vw,110px) 28px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
 gap:20px; border-top:1px solid #e0c89f; background:rgba(255,247,223,.23); }
.themenkarte { min-width:0; position:relative; padding:13px 12px 15px; text-align:center;
 border:3px double var(--rahmen); outline:1px solid rgba(119,77,35,.35); outline-offset:-8px;
 background:rgba(255,246,224,.19); display:flex; flex-direction:column; align-items:center; }
.themenkarte:before,.themenkarte:after { content:"❦"; position:absolute; font-size:14px; color:#8d6842; }
.themenkarte:before { top:0; left:5px; } .themenkarte:after { right:5px; bottom:0; transform:rotate(180deg); }
.themenkarte img { width:145px; max-width:65%; height:125px; object-fit:cover; border-radius:3px; }
.kartenstern { position:absolute; left:11%; top:55px; font-size:38px; line-height:1; color:#9e6d31; }
.themenkarte h2 { font-family:"Great Vibes","URW Chancery L",cursive; font-weight:400;
 font-size:clamp(22px,2.1vw,31px); line-height:1.1; margin:11px 0 5px; }
.themenkarte p { font-size:clamp(13px,1vw,15px); line-height:1.45; margin:0 0 10px; flex:1; }
.themenkarte a { color:var(--rot); text-decoration:none; font-style:italic; font-size:15px; padding:5px 8px; }
.themenkarte a:hover,.themenkarte a:focus-visible { text-decoration:underline; }
@media(max-width:1020px) {
 .willkommen { grid-template-columns:1fr 1fr; }
 .leitworte { grid-column:1/-1; display:flex; justify-content:center; align-items:center; gap:18px; }
 .leitworte div { border-left:0; padding:0; } .leitworte div br { display:none; }
 .leitworte-strich { display:none; }
 .themen { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .themenkarte h2 { font-size:29px; }
}
@media(max-width:640px) {
 .willkommen { grid-template-columns:1fr; padding:24px 16px; gap:23px; }
 .willkommen-text { max-width:none; }
 .willkommen h1 { white-space:normal; text-align:center; font-size:clamp(38px,10vw,55px); }
 .historisches-foto { width:min(92%,460px); justify-self:center; }
 .leitworte { grid-column:1; font-size:28px; }
 .leitworte .stern { font-size:30px; margin:0; }
 .themen { grid-template-columns:1fr; gap:16px; padding:18px 16px 28px; }
 .themenkarte { max-width:440px; width:100%; margin:auto; }
 .themenkarte img { max-width:70%; }
 .kartenstern { left:16%; }
}