/* mfangano.com Startseite – Bild mit klickbaren Feldern (Claude 04.10.2026) */
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:#0b1a2e}
body{font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
.mf-stage{position:relative;width:100%;max-width:none;margin:0;aspect-ratio:1536/1024}
.mf-stage>img{display:block;width:100%;height:auto}
.mf-hs{position:absolute;z-index:10}
.mf-hs>a.mf-hit{display:block;width:100%;height:100%;border-radius:6px}
.mf-hs>a.mf-hit:hover,.mf-hs>a.mf-hit:focus{background:rgba(255,255,255,.12);outline:none}
.mf-dd{display:none;position:absolute;top:100%;left:0;min-width:clamp(180px,17vw,300px);
  background:rgba(8,20,38,.92);border:1px solid #d9a441;border-radius:10px;padding:10px 14px;z-index:20}
.mf-hs:hover .mf-dd,.mf-hs:focus-within .mf-dd{display:block}
.mf-dd a{display:block;color:#fff;text-decoration:none;font-size:clamp(12px,1vw,16px);padding:6px 0}
.mf-dd a:hover{color:#f0b84a}
.mf-search{position:absolute;z-index:10}
.mf-search input{width:100%;height:100%;background:transparent;border:0;color:#fff;
  font-size:clamp(10px,1vw,16px);padding:0 14% 0 7%;outline:none}
.mf-search input::placeholder{color:transparent}
.mf-search button{position:absolute;right:0;top:0;width:18%;height:100%;background:transparent;border:0;cursor:pointer}
.mf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mf-search input:focus{background:rgba(8,20,38,.95);border-radius:6px}
.mf-search input:focus::placeholder{color:#bbb}

/* Transparenter Info-Rahmen (Claude 04.10.2026, Schrift 23:56) */
.mf-ov{position:absolute;left:50%;top:14%;transform:translateX(-50%);width:min(900px,64%);height:auto;max-height:60%;z-index:50;
  background:rgba(8,20,38,.84);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(217,164,65,.9);border-radius:16px;
  padding:42px 52px 38px;color:#fff;overflow:auto;box-shadow:0 12px 44px rgba(0,0,0,.5);text-align:left;font-family:Arial,Helvetica,sans-serif}
.mf-ov[hidden]{display:none}
.mf-ov-t{font-size:clamp(28px,2.4vw,42px);line-height:1.2;margin:0 44px 24px 0;color:#fff;padding-bottom:14px;border-bottom:1px solid rgba(217,164,65,.6)}
.mf-ov-b{font-size:clamp(18px,1.3vw,22px);line-height:1.75;max-width:70ch}
.mf-ov-b p,.mf-ov-b li{font-size:inherit;line-height:inherit;margin:0 0 1.1em;text-align:left;word-spacing:normal;letter-spacing:.005em}
.mf-ov-b h2{font-size:clamp(20px,1.55vw,26px);color:#f0b84a;margin:1.4em 0 .5em;line-height:1.3}
.mf-ov-b ul,.mf-ov-b ol{margin:0 0 1.1em;padding-left:1.4em}
.mf-ov-b a{color:#f0b84a}
.mf-ov-x{position:absolute;top:14px;right:18px;background:none;border:0;color:#fff;font-size:38px;line-height:1;cursor:pointer;padding:4px 8px}
.mf-ov-x:hover{color:#f0b84a}
.mf-ov-b .bx-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-top:12px}
.mf-ov-b .bx-gal figure{margin:0;background:rgba(255,255,255,.08);border-radius:8px;overflow:hidden}
.mf-ov-b .bx-gal img{width:100%;height:120px;object-fit:cover;display:block}
.mf-ov-b .bx-gal figcaption{font-size:15px;padding:6px 8px;line-height:1.4}
@media(max-width:800px){.mf-ov{position:fixed;left:4%;top:5%;transform:none;width:92%;max-height:90%;padding:28px 22px 24px}.mf-ov-t{font-size:26px;margin-right:40px}.mf-ov-b{font-size:17px}}

/* Bild an der Goldlinie abschneiden + Handy-Menue (Claude 05.10.2026) */
.mf-clip{position:relative;width:100%;aspect-ratio:1536/802;overflow:hidden}
.mf-mbar,.mf-mpanel{display:none}
@media(max-width:800px){
  .mf-mbar{display:flex;position:sticky;top:0;z-index:300;align-items:center;justify-content:space-between;gap:10px;
    background:#001326;border-bottom:2px solid #d9a441;padding:8px 14px;min-height:52px}
  .mb-brand{color:#fff;font-weight:900;letter-spacing:1px;font-size:17px;text-decoration:none}
  .mb-brand span{color:#f0b84a}
  .mb-lang{color:#888;font-size:15px}.mb-lang a{color:#fff;text-decoration:none;font-weight:700;padding:6px 4px}.mb-lang a.on{color:#f0b84a}
  .mb-btn{background:none;border:1px solid #d9a441;color:#fff;border-radius:8px;font-size:24px;line-height:1;padding:6px 12px;cursor:pointer}
  .mf-mpanel{display:block;position:fixed;top:54px;left:0;right:0;bottom:0;overflow:auto;background:rgba(0,19,38,.97);z-index:299;padding:6px 16px 90px}
  .mf-mpanel[hidden]{display:none}
  .mf-mpanel details{border-bottom:1px solid #3c4354}
  .mf-mpanel summary{color:#f0b84a;font-weight:700;font-size:19px;padding:15px 4px;cursor:pointer;list-style:none}
  .mf-mpanel summary::-webkit-details-marker{display:none}
  .mf-mpanel summary::after{content:"+";float:right;color:#fff}
  .mf-mpanel details[open] summary::after{content:"\2212"}
  .mf-mpanel details a{display:block;color:#fff;text-decoration:none;font-size:17px;padding:11px 14px}
  .mf-mpanel details a.mb-ueb{color:#f0b84a}
  .mf-mpanel form{display:flex;margin:18px 0}
  .mf-mpanel input[type=search]{flex:1;min-width:0;font-size:17px;padding:11px;border:1px solid #d9a441;background:#0b1a2e;color:#fff;border-radius:8px 0 0 8px}
  .mf-mpanel form button{background:#d9a441;border:0;padding:0 16px;border-radius:0 8px 8px 0;font-size:18px;cursor:pointer}
  .mf-stage .mf-hs,.mf-stage .mf-search{display:none}
}