/* Angelika Büsgen · Malerei — statischer Neubau (Deltatec)
   Aufbau, Maße und Farben 1:1 nach der bisherigen Contao-Seite:
   960px-Raster, links Lampe + Bild (480px), rechts Logo-Kasten + Vorschaubilder,
   halbtransparente weiße Kästen auf der Backsteinwand. */

:root{
  --ink:#1e1e1e;
  --box:rgba(255,255,255,.5);
  --caption:rgba(0,0,0,.38);
  --req:#f00;
  --bildh:clamp(285px, calc(100vh - 470px), 420px); /* Bildhöhe wächst mit dem Fenster */
  --font:"Lucida Grande","Lucida Sans Unicode","Lucida Sans",Verdana,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:13px/1.4 var(--font); color:var(--ink);
  min-height:100vh;
  background:#cfcac3 url("../../files/ab_theme/bgwand.jpg") center top/cover no-repeat fixed;
}
img{border:0}
a{color:var(--ink)}
h1,h2,h3,p,ul,li,form{margin:0;padding:0}
h2{font-size:1.6667em; font-weight:400; margin:1em 0 12px}
h3{font-size:14px; font-weight:700; margin:1em 0 12px}
p{margin:0 0 12px}

.wrapper{width:960px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column}
.wrapper::after{content:""; display:table; clear:both}

/* ---------- Kopf: Lampe links, Logo-Kasten rechts ---------- */
.site-head{height:270px; position:relative}
.lampe{width:480px; float:left}
.lampe img{display:block; height:220px; width:auto; margin:0 auto}
.logomodul{width:400px; float:right; background:var(--box); padding-left:15px}
.logo{display:flex; align-items:flex-end; text-decoration:none; color:var(--ink);
  font-size:39px; line-height:1; height:149px}
.logo img{width:140px; height:140px; padding:20px 20px 0 0; margin-bottom:-6px}
.logo span{padding-bottom:1px}
.navi{border-top:2px solid var(--ink); margin-top:15px; padding:25px 10px 9px 0; text-align:right}
.navi ul{list-style:none}
.navi li{display:inline-block; font-size:1.1em; padding:0 8px 0 4px; border-right:1px solid var(--ink); line-height:22px}
.navi li:last-child{border-right:0}
.navi a{font-style:italic; text-decoration:none}
.navi a:hover{text-decoration:underline}
.navi .active{font-weight:700}

/* ---------- Galerie ---------- */
.main{min-height:420px; position:relative}
.main::after{content:""; display:table; clear:both}

/* Bild 285–420px hoch (je nach Fensterhöhe); Pfeile sitzen unten in den Ecken der Bildspalte, Bildschild darunter */
.bildbox{width:480px; float:left; padding:0 40px}
.bildzone{position:relative}
.bild{display:block; margin:0 auto; padding:0; border:0; background:none; cursor:zoom-in; line-height:0}
.bild img{display:block; margin:auto; max-height:var(--bildh); max-width:400px; width:auto; height:auto}
.pfeil{position:absolute; bottom:0; width:30px; height:30px; padding:0; border:0; background:none; cursor:pointer}
.pfeil img{display:block; width:30px; height:30px}
.pfeil.links{left:-40px}
.pfeil.rechts{right:-40px}
.pfeil:hover{opacity:.75}

.bildtext{width:max-content; max-width:100%; margin:35px 0 0 auto; background:var(--caption); color:#fff;
  text-align:right; padding:5px 5px 6px; font-size:.9em; min-width:110px}
.bildtext span{display:block; padding:0 10px 0 20px}
.bildtext span:empty{display:none}
.bildtext .t{font-size:20px; padding:5px 10px 5px 20px; line-height:1}
.bildtext.is-empty{display:none}

.reel{width:420px; float:right; margin-top:calc(var(--bildh) - 100px); height:230px;
  display:flex; align-items:flex-start; gap:10px;
  overflow-x:auto; overflow-y:hidden; scroll-behavior:smooth;
  scrollbar-width:none; -webkit-overflow-scrolling:touch}
.reel::-webkit-scrollbar{display:none}
.thumb{flex:0 0 95px; padding:0; border:0; background:none; cursor:pointer; line-height:0;
  opacity:.5; transition:opacity .2s}
.thumb img{display:block; width:95px; height:auto; max-height:215px; object-fit:cover}
.thumb:hover,.thumb.active{opacity:1}

/* ---------- Fuß: Kategorien unten rechts ---------- */
/* Leiste sitzt auf halbem Weg zwischen Inhalt und unterem Fensterrand
   (bei kleinen Fenstern direkt unter dem Inhalt) */
.site-foot{margin:auto 0; padding:24px 0 16px; display:flex; justify-content:flex-end}
.cats{width:650px; background:var(--box); padding:5px; text-align:left}
.cats button{font:inherit; font-size:1.1em; line-height:22px; color:var(--ink); background:none;
  border:0; border-right:1px solid var(--ink); padding:0 8px 0 4px; margin:0; cursor:pointer; font-style:italic}
.cats button:last-child{border-right:0}
.cats button:hover{text-decoration:underline}
.cats button.active{font-style:normal; font-weight:700; text-decoration:none; cursor:default}

/* ---------- Textseiten ---------- */
.contentleft{width:510px; float:left; margin-bottom:40px; padding:0 15px 15px; background:var(--box)}
.contentright{width:400px; float:right; margin-bottom:25px; padding:0 15px 15px; background:var(--box)}
.contentbox{background:var(--box); padding:0 15px 15px; margin-bottom:40px}
.contentleft a,.contentright a,.contentbox a{font-weight:700; font-style:normal}
.portrait{float:right; padding:0 0 20px 20px; width:190px; height:auto}
.imprint-contact{border-collapse:collapse; margin:0 0 12px}
.imprint-contact td{padding:0 24px 0 0; vertical-align:top}
.contentleft h2:first-child,.contentright h2:first-child,.contentbox h2:first-child{margin-top:.65em}

/* Kontaktformular */
#kontaktformular label{display:block; margin:7px 0 3px}
#kontaktformular input[type=text],#kontaktformular textarea{
  width:100%; display:block; padding:3px 6px; font:inherit; font-size:.99em; color:#000;
  background:#fff; border:1px solid #fff; border-radius:0}
#kontaktformular input[type=text]{height:30px}
#kontaktformular textarea{resize:vertical}
#kontaktformular input:focus,#kontaktformular textarea:focus{outline:0; background:#fcfcfc; border-color:#bbb}
.req{color:var(--req)}
.captcha-row{display:flex; align-items:center}
#kontaktformular .captcha-row input{width:80px; margin-right:20px; flex:none}
.submit-row{margin:10px 0; overflow:hidden}
.submit{float:right; width:80px; padding:5px 15px; font:inherit; background:#fff; color:#000; border:0; cursor:pointer}
.submit:hover{background:#f3f3f3}
.submit[disabled]{opacity:.6; cursor:wait}
.form-status{min-height:1.2em; margin:4px 0 8px; font-weight:700}
.form-status:empty{display:none}
.form-status.ok{color:#2e6b34}
.form-status.err{color:#b03a2e}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ---------- Lightbox (Großansicht) ---------- */
.lightbox{position:fixed; inset:0; z-index:50; background:rgba(18,16,14,.92);
  display:flex; align-items:center; justify-content:center; padding:4vh 4vw}
.lightbox[hidden]{display:none}
.lightbox img{max-width:92vw; max-height:82vh; object-fit:contain; box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lb-cap{position:absolute; bottom:3vh; left:0; right:0; text-align:center; color:#eee; font-size:17px}
.lb-cap small{display:block; font-size:12px; opacity:.75; margin-top:4px}
.lb-close,.lb-prev,.lb-next{position:absolute; background:rgba(255,255,255,.12); color:#fff;
  border:0; cursor:pointer; border-radius:50%; width:52px; height:52px; font-size:28px; line-height:1}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.25)}
.lb-close{top:3vh; right:3vw; font-size:30px}
.lb-prev{left:2vw; top:50%; transform:translateY(-50%)}
.lb-next{right:2vw; top:50%; transform:translateY(-50%)}

/* ---------- Schmale Bildschirme (Tablet/Handy) ---------- */
@media (max-width:979px){
  body{background-attachment:scroll}
  .wrapper{width:auto; padding:0 12px}
  .site-head{height:auto; overflow:hidden; margin-bottom:16px}
  .lampe{display:none}
  .logomodul{width:auto; float:none}
  .logo{font-size:30px; height:auto}
  .logo img{width:96px; height:96px; padding:14px 14px 0 0}
  .main{min-height:0}
  .bildbox{width:auto; float:none; padding:0 36px}
  .bild img{max-width:100%; max-height:60vh}
  .bildbox .pfeil{top:calc(50% - 15px); bottom:auto}
  .pfeil.links{left:-36px}
  .pfeil.rechts{right:-36px}
  .bildtext{margin-top:10px}
  .reel{width:auto; float:none; margin:16px 0 0; height:auto; max-height:170px}
  .site-foot{padding:14px 0 24px; display:block}
  .cats{float:none; width:auto}
  .contentleft,.contentright{width:auto; float:none; margin-bottom:16px}
  .contentbox{margin-bottom:16px}
}
@media (max-width:480px){
  .portrait{float:none; display:block; margin:0 auto 12px; padding:0}
  .cats button{font-size:1em; padding:2px 6px 2px 3px}
}